/* BJRC · site rebuild
   Jetons repris de la charte deja etablie sur le portail
   (2_agence-ud/portals/bjrc/assets/portal.css), elle-meme reprise du preview
   que Simon a construit: navy #0B1929, teal #3DD8C5, off-white #F7F5F0,
   Playfair Display sur Inter. Une seule charte pour le portail et le site,
   sinon le client voit deux marques.

   Ce fichier n'est PAS minifie: c'est la version de travail. La minification,
   le retrait des commentaires et les cartes OG arrivent a la mise en ligne,
   comme le veut 2_agence-ud/CLAUDE.md. */

/* ─────────────────────────────────────────── le signe de dollar
   Playfair Display dessine le dollar avec DEUX barres verticales. Verifie au
   rendu le 2026-08-27: a cote d'un montant en Inter, qui n'en a qu'une, ca se
   voit immediatement, et ca ne ressemble pas a un prix ecrit par un humain.

   Plutot que d'envelopper chaque montant a la main, cette famille ne couvre
   qu'un seul caractere, U+0024, et se place AVANT Playfair dans la pile. Tout
   dollar, present et futur, tombe donc sur un sans serif a une barre sans
   qu'aucun balisage ne le demande. Les polices citees sont installees d'office
   sur Windows, macOS, iOS et Android, donc aucune requete reseau. */
@font-face {
  font-family: 'Devise';
  src: local('Inter'), local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  unicode-range: U+0024;
}
/* Meme principe pour l'esperluette (Simon, 2026-09-29): le & de Playfair est une
   ligature "Et" a boucles qui se lit mal dans un titre. Georgia donne un & classique,
   toujours serif, installe partout; Noto Serif couvre Android. */
@font-face {
  font-family: 'Devise';
  src: local('Georgia'), local('Noto Serif'), local('NotoSerif-Regular'), local('Times New Roman'), local('DejaVu Serif');
  unicode-range: U+0026;
}

:root {
  --navy-deep: #0B1929;
  --navy: #152A45;
  --navy-mid: #1E3D5C;
  --teal: #3DD8C5;
  --teal-deep: #1C9589;

  --white: #FFFFFF;
  --off-white: #F7F5F0;
  --sand: #EDEAE3;
  --line: #E5E7EB;
  --line-2: #D6D9DE;

  --ink: #1A2E4A;
  --ink-2: #617182;
  --ink-3: #8B95A3;

  --warn: #A8670C;
  --warn-soft: #FBF3E6;
  --good: #1C9589;
  --alerte: #D64545;

  --icone-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");

  --display: 'Devise', 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --body: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--off-white); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* Filet de securite contre le defilement horizontal. Les causes connues
     sont corrigees plus bas, mais un seul mot trop long dans un titre de
     poste venu de Bullhorn suffirait a le ramener, et sur telephone c'est la
     panne la plus visible qui soit. `clip` plutot que `hidden`: hidden cree
     un conteneur de defilement et casse le `position: sticky` de l'en-tete. */
  overflow-x: clip;
}
/* Un intitule sans espace, une URL collee dans un descriptif: on coupe
   plutot que de pousser la colonne. */
h1, h2, h3, p, li, td { overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-deep); text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.75rem; }
.etroit { max-width: 46rem; }

h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--display); font-weight: 400; }
h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.4rem); line-height: 1.06; letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.16; }
h3 { font-size: 1.12rem; }
p { margin: 0; max-width: 68ch; }

/* Le libelle de section, en teal et en capitales espacees, precede de son
   filet. Repris du preview: le filet ancre le libelle et fait lire la page
   comme une suite de chapitres plutot que comme un long document. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--body); font-size: .66rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--teal-deep);
}
.eyebrow::before { content: ''; width: 1.5rem; height: 1px; background: currentColor; }
/* (SEO, delorme, 2026-09) Le libelle de section porte maintenant le H2, et le
   titre large passe en <p class="tete-titre">. Demande de l'audit: un <span>
   pose au-dessus d'un titre est un faux titre, il n'est ni editable ni lu comme
   un niveau. L'aspect ne bouge pas d'un pixel, seule la balise change. */
.tete-titre {
  font-family: var(--display); font-weight: 400; color: var(--navy);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.16;
  text-wrap: balance; max-width: none;
}
.sombre .tete p.tete-titre, .sombre .tete-titre { color: var(--white); }
.hero .tete-titre { color: inherit; }
/* Sur fond sombre le teal fonce ne passe pas: on prend le teal clair. */
.hero .eyebrow, .sombre .eyebrow { color: var(--teal); }

/* ─────────────────────────────────────────── cartes de service
   Le trait qui se remplit au survol vient du preview. C'est le seul mouvement
   du site et il porte tout le caractere: sans lui les cartes sont des boites. */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.5rem; }
.carte {
  background: var(--white); border: 1px solid var(--line);
  padding: 2.6rem 2rem 2.2rem; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .7rem;
  transition: transform .35s ease, box-shadow .35s ease;
}
.carte::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal));
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.carte:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(11,25,41,.09); }
.carte:hover::after { transform: scaleX(1); }
.carte-icone { width: 2.6rem; height: 2.6rem; color: var(--teal-deep); margin-bottom: .6rem; }
/* A quatre colonnes, chaque carte fait environ 15 rem: "Finance & Accounting"
   ne tient pas sur une ligne, donc on equilibre les deux lignes plutot que de
   laisser un mot seul en bas. */
.carte h2, .carte h3 { font-family: var(--display); font-size: 1.24rem; color: var(--navy); text-wrap: balance; }
.carte p { font-size: .95rem; color: var(--ink-2); }
.carte .lien {
  margin-top: auto; padding-top: 1.1rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep);
  text-decoration: none;
}
.carte .lien:hover { text-decoration: underline; }
/* Le compteur de mandats en pastille, en haut a droite de la carte. En bas et
   en gris, il se lisait comme une note de bas de page: c'est pourtant le seul
   chiffre vivant de la carte, et le seul qu'un concurrent ne peut pas copier
   sans avoir les mandats derriere. */
/* Le badge occupe une rangee reelle avec l'icone. En position absolue au-dessus
   du contenu, il chevauchait le titre des que celui-ci tenait sur une ligne au
   lieu de deux, et sur les cartes sans icone il le chevauchait toujours. */
.carte-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.carte-tete .carte-icone { margin-bottom: 0; }
.carte-tete:has(> .carte-badge:only-child) { justify-content: flex-end; }

/* Les quatre titres tiennent sur la meme grille: si l'un passe a deux lignes,
   tous reservent deux lignes, sinon les paragraphes demarrent en escalier. */
/* `line-height` EXPLICITE, sinon la reserve est fausse. La regle reservait
   deux lignes avec `calc(2 * 1.24rem * 1.2)`, soit 1,2 d'interligne, mais le
   titre n'en declarait aucun et heritait celui du corps de texte. Deux vraies
   lignes occupaient donc plus que la hauteur reservee, et les resumes
   repartaient quand meme en escalier: « Legal & Compliance » et « Finance &
   Accounting » passent a deux lignes, « Executive Search » et « Interim &
   Contract » tiennent sur une (Simon, 2026-09-15). La reserve et le texte
   doivent compter avec le meme interligne. */
.carte h2, .carte h3 { line-height: 1.2; min-height: calc(2 * 1.24rem * 1.2); }

/* La pastille du compte mene au regroupement de postes. C'est le premier
   endroit ou l'oeil va sur la carte, et jusqu'ici elle ne faisait rien. */
a.carte-badge { text-decoration: none; transition: background .18s, border-color .18s, transform .18s; }
a.carte-badge:hover { background: #CFF3ED; border-color: var(--teal-deep); transform: translateY(-1px); }
a.carte-badge:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }

.carte-badge {
  display: inline-flex; align-items: baseline; gap: .3rem;
  background: #E4F8F5; border: 1px solid #B4EBE3; border-radius: 999px;
  padding: .3rem .7rem; white-space: nowrap;
}
.carte-badge b { font-size: .92rem; font-weight: 700; color: var(--teal-deep); }
.carte-badge span {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-deep); opacity: .8;
}
/* Pas de reservation a droite du titre: la pastille est a la hauteur du
   pictogramme, deux lignes plus haut. Le padding qui l'evitait cassait
   "Finance & Accounting" sur trois lignes pour rien. */

/* ─────────────────────────────────────────── etapes, en liste bordee
   Remplace les quatre boites de meme poids: une etape est une progression,
   et un filet vertical la lit mieux qu'une grille. */
.etapes-liste { display: flex; flex-direction: column; gap: 2px; }
.etape-ligne {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1.6rem; align-items: baseline;
  padding: 1.35rem 1.5rem; border-left: 2px solid var(--line);
  transition: border-color .3s, background .3s;
}
.etape-ligne:hover { border-left-color: var(--teal-deep); background: #ECFAF7; }
.etape-ligne .quand {
  font-family: var(--display); font-size: 1.1rem; color: var(--teal-deep); line-height: 1.2;
}
.etape-ligne b { display: block; color: var(--navy); font-size: 1.02rem; margin-bottom: .3rem; }
.etape-ligne span { font-size: .95rem; color: var(--ink-2); }

/* ─────────────────────────────────────────── fiches d'equipe
   Portrait 3:4, degrade vers le bas, nom et role dans l'image. Le gris
   partiel unifie douze photos prises a douze moments differents. */
.equipe-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 1.3rem; }
.fiche {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px;
  background: var(--navy-mid); border: 1px solid rgba(255,255,255,.06);
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.fiche:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(11,25,41,.35); border-color: rgba(61,216,197,.45); }
.fiche > img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  filter: grayscale(.5) contrast(1.04); transition: filter .7s ease, transform 1s ease;
}
.fiche:hover > img { filter: grayscale(0) contrast(1.04); transform: scale(1.04); }
/* Le lien etire: toute la carte mene a la fiche. Il couvre le portrait, et
   c'est l'ORDRE DES COUCHES qui decide si la carte reste utilisable.

   `.fiche-voile` est pose en absolu par-dessus et peint APRES lui: laisse tel
   quel, le voile recoit tous les clics et le lien ne sert a rien, tandis que
   « Email » et « LinkedIn », qui vivent dedans, deviendraient les seules
   zones cliquables... ou plus rien du tout. On rend donc le voile transparent
   aux clics et on redonne leurs evenements a ses liens, au-dessus du lien
   etire. Trois lignes qui doivent bouger ensemble. */
.fiche-lien { position: absolute; inset: 0; z-index: 1; }
.fiche-voile {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem 1.25rem 1.2rem; color: var(--white);
  background: linear-gradient(to top, rgba(5,14,26,.95) 0%, rgba(5,14,26,.58) 42%, transparent 78%);
  pointer-events: none; z-index: 2;
}
.fiche-voile a, .fiche-voile .fiche-sans-courriel { pointer-events: auto; position: relative; }
.fiche-ville {
  position: absolute; top: 1rem; right: 1rem; font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72);
  background: rgba(5,14,26,.55); border: 1px solid rgba(255,255,255,.18);
  padding: .2rem .5rem; border-radius: 2px;
}
.fiche-nom { font-family: var(--display); font-size: 1.16rem; line-height: 1.2; }
.fiche-role { font-size: .74rem; color: var(--teal); margin-top: .3rem; letter-spacing: .04em; }
.fiche-tel {
  margin-top: .7rem; font-size: .82rem; color: rgba(255,255,255,.82); text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: .6rem;
}
.fiche-tel:hover { color: var(--teal); }
/* Le courriel prend la place de la ligne directe sur la grille de /team/:
   meme filet, meme poids, parce qu'il occupe le meme rang. `break-all` parce
   qu'une adresse ne se coupe pas toute seule et deborderait la carte. */
/* « Email » et « LinkedIn » se lisent comme une paire de liens, meme graisse,
   meme casse, sous le meme filet. L'adresse complete vivait ici et cassait la
   carte: elle est passee dans le href et le title. */
.fiche-courriel {
  display: inline-block; margin-top: .7rem; font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.82); text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: .6rem;
}
.fiche-courriel:hover { color: var(--teal); }
/* Le trou, en sourdine. Le crochet rouge disait bien qu'il manquait quelque
   chose, mais il criait par-dessus onze portraits sur dix-sept: sur une page
   que le client regarde, ca se lit comme un site casse plutot que comme une
   donnee a fournir. Meme poids que le lien, en gris, avec le pointille du
   portail pour « a completer ». */
.fiche-sans-courriel {
  display: inline-block; margin-top: .7rem; font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
  border-top: 1px dashed rgba(255,255,255,.22); padding-top: .6rem;
}
/* « MISSING EMAIL » sur une carte SOMBRE. Le crochet ambre est dessine pour
   un fond clair: ici il vire a la pastille blanchatre illisible, le meme
   piege que le hero (voir .hero .attente). Meme role, autre contraste, et en
   rouge parce que celui-la n'attend pas une donnee agreable a avoir: il
   signale une carte qu'on ne peut pas contacter. */
.fiche-voile .attente {
  display: inline-block; margin-top: .7rem; padding: .18rem .45rem;
  background: rgba(214,69,69,.14); border: 1px dashed var(--alerte);
  color: #FFB3B3; font-size: .68rem; letter-spacing: .06em;
}
/* Le LinkedIn sous la ligne directe, plus discret qu'elle: c'est un lien de
   verification, pas l'action qu'on attend de la carte. */
.fiche-li {
  display: inline-block; margin-top: .35rem; font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.62); text-decoration: none;
}
.fiche-li:hover { color: var(--teal); }

/* ─────────────────────────────────────────── temoignages, sur fond sombre */
.sombre { background: var(--navy-deep); color: var(--white); border-top: 0; }
.sombre h2, .sombre h3 { color: var(--white); }
.sombre .tete p { color: rgba(255,255,255,.7); }
.temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1.3rem; }
.temoignage {
  background: rgba(255,255,255,.034); border: 1px solid rgba(255,255,255,.07);
  padding: 2.2rem; border-radius: 3px; transition: border-color .3s, background .3s;
}
.temoignage:hover { border-color: rgba(61,216,197,.32); background: rgba(61,216,197,.05); }
.temoignage blockquote {
  margin: 0 0 1.5rem; font-size: .98rem; line-height: 1.8; font-style: italic;
  color: rgba(255,255,255,.72);
}
.temoignage .qui { font-size: .88rem; color: var(--white); font-weight: 600; }
.temoignage .ou { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: .2rem; }

/* LA MEME CARTE SUR FOND CLAIR. Les couleurs ci-dessus sont ecrites pour le
   bloc navy de l'accueil: blanc a 72%, bordure blanche a 7%. `blocAvis()` des
   fiches de consultants reutilise le meme balisage dans `.avis-perso`, qui n'a
   PAS de fond sombre: l'avis sortait donc en blanc sur creme, illisible
   (Simon, 2026-09-15, capture a l'appui). La regle ne leve aucune erreur, elle
   rend juste un texte que personne ne voit, ce qui est la panne CSS typique.

   Le teal pale des etoiles vaut pour le navy; sur creme il passe en
   `--teal-deep`, sinon elles disparaissent a leur tour. */
/* TROIS DE FRONT SUR UNE FICHE, pas deux plus un (Simon, 2026-09-16). La
   regle generique `auto-fit, minmax(17rem, 1fr)` vise la pleine largeur de
   l'accueil; dans la colonne d'une fiche, qui fait environ 700px, elle ne
   tient que deux colonnes, donc le troisieme avis tombait seul a la ligne
   suivante. Trois colonnes explicites ici, et une seule sous 900px.
   `align-items: start` pour que les cartes ne s'etirent pas a la hauteur de
   la plus longue: c'est l'autre moitie de l'effet « bancal ». */
/* TROIS CARTES DE MEME TAILLE. `align-items: stretch` (le defaut) plutot que
   `start`: les trois prennent la hauteur de la plus haute, et la carte devient
   une colonne flex pour que le nom se pose en bas, aligne d'une carte a
   l'autre. Sans ca, un avis court laissait sa signature flotter au milieu. */
.avis-perso .temoignages { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.avis-perso .temoignage { display: flex; flex-direction: column; }
.avis-perso .temoignage .qui { margin-top: auto; padding-top: 1rem; }
/* Le texte complet est dans la page; c'est ici qu'il se coupe, a sept lignes.
   `line-clamp` coupe A LA LIGNE, pas au caractere: la carte garde donc la
   meme hauteur quel que soit le nombre de mots, ce qu'une coupe a 240
   caracteres ne pouvait pas garantir. */
.avis-perso blockquote.avis-coupe {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;
  overflow: hidden;
}
.avis-bascule:checked ~ blockquote.avis-coupe { -webkit-line-clamp: unset; overflow: visible; }
.avis-plus {
  cursor: pointer; align-self: flex-start; margin-top: .6rem; font-size: .74rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-deep); border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.avis-plus span:last-child, .avis-bascule:checked ~ .avis-plus span:first-child { display: none; }
.avis-bascule:checked ~ .avis-plus span:last-child { display: inline; }
.avis-plus:hover { color: var(--navy); }
.avis-bascule:focus-visible ~ .avis-plus { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
@media (max-width: 900px) { .avis-perso .temoignages { grid-template-columns: 1fr; } }
.avis-perso .temoignage { background: var(--white); border-color: var(--line); padding: 1.5rem 1.4rem; }
.avis-perso .temoignage blockquote { font-size: .92rem; line-height: 1.7; }
.avis-perso .temoignage:hover { border-color: var(--teal-deep); background: #F5FCFB; }
.avis-perso .temoignage blockquote { color: var(--ink-2); }
.avis-perso .temoignage .qui { color: var(--navy); }
.avis-perso .temoignage .ou { color: var(--ink-3); }
.avis-perso .etoiles { color: var(--teal-deep); }
.etoiles { color: var(--teal); letter-spacing: .18em; font-size: .8rem; margin-bottom: 1rem; }

/* La revelation au defilement. Sans JavaScript, tout reste visible: la regle
   ne s'applique que si le script a pu marquer la page. */
.js .revele { opacity: 0; transform: translateY(1.6rem); transition: opacity .65s ease, transform .65s ease; }
.js .revele.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .revele { opacity: 1; transform: none; transition: none; }
  .carte, .fiche, .fiche > img { transition: none; }
}

/* ─────────────────────────────────────────────────────── en-tete
   Un site se reconnait a son en-tete: une marque dessinee, une navigation, et
   les deux actions qui separent les deux publics. La version precedente etait
   un mot en serif et cinq liens: ca se lit comme un document, pas comme une
   entreprise. */
.entete {
  background: var(--navy-deep); position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* La bande de l'en-tete est plus large que la colonne de contenu: le logo se
   pose donc un peu plus a gauche que le titre, et surtout il se detache de la
   navigation. A egalite de largeur, les deux se touchaient presque et
   "BJRC" se lisait comme le premier element du menu. */
/* Le menu se centre entre le logo et les boutons, pas sur l'axe de la page.
   Une grille `1fr auto 1fr` posait le menu au centre mathematique exact de la
   barre, verifie a 0px pres de 1195 a 1920px, et il avait quand meme l'air
   pousse a droite: le logo pese 88px et le bloc FR + Find a job + Start hiring
   en pese 296. Le menu se retrouvait avec 276px de vide a sa gauche et 68 a sa
   droite, donc il collait aux boutons. L'oeil ne mesure pas un axe, il compare
   deux vides.

   `margin: 0 auto` sur une rangee flex partage l'espace libre en deux parts
   egales: 172px de chaque cote. Le menu tombe 104px a gauche du centre de la
   page et c'est voulu, c'est le prix des deux vides egaux (Simon, 2026-08-27).
   Si le bloc de droite maigrit un jour, les deux centres se rejoindront tout
   seuls. */
.entete-in {
  max-width: 76rem; margin: 0 auto; padding: .85rem 1.75rem;
  display: flex; align-items: center; gap: 1.6rem;
  transition: padding .22s ease;
}

/* Une barre collante prend la meme hauteur sur toute la page. Passe la
   premiere fenetre, elle se resserre: le logo perd un quart de sa taille et
   le rembourrage la moitie, ce qui rend une soixantaine de pixels au texte
   sans jamais faire disparaitre la navigation. La classe est posee par
   site.js; sans JavaScript la barre reste simplement a sa taille pleine. */
.defile .entete-in { padding: .45rem 1.75rem; }
.defile .marque img { height: 2.9rem; }
.defile .entete { box-shadow: 0 6px 22px rgba(4,16,26,.28); }
/* Lien d'evitement. Hors ecran jusqu'au focus, puis pose par-dessus la barre. */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal); color: var(--navy-deep);
  padding: .8rem 1.4rem; border-radius: 0 0 4px 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.evitement:focus { left: 0; }
#contenu:focus { outline: none; }

.marque { display: flex; align-items: center; flex: 0 0 auto; }
/* Le logo gagne du poids et la navigation en perd: a taille egale, "LEGAL &
   COMPLIANCE" pesait plus lourd que la marque, et l'oeil ne savait plus ou
   commencer la page. */
.marque img { height: 3.75rem; width: auto; transition: height .22s ease; }

/* Le menu au centre, pas colle a droite: l'espace libre se repartit alors des
   deux cotes, ce qui degage le logo a gauche autant que les boutons a droite. */
.menu { display: flex; align-items: center; gap: 1.5rem; margin: 0 auto; }
/* `.menu .chef` accompagne `.menu a` parce que le francais n'a pas encore de
   page sommaire des services: son intitule de groupe est un <span>, qui
   n'ouvre rien mais doit se lire exactement comme les autres. */
.menu a, .menu .chef {
  color: rgba(255,255,255,.78); text-decoration: none;
  font-size: .7rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase;
  white-space: nowrap;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--teal); }
.menu span.chef { cursor: default; }

/* Trois entetes de menu qui ouvrent chacun sa liste, au lieu de six liens a
   plat. La barre plate avait consomme ses six places en pages de service et
   laissait neuf pages reelles sans aucun chemin depuis la navigation, dont
   /services/ lui-meme, /contact/ et le guide salarial.
 *
 * Les liens sont de vrais <a> dans le HTML, jamais injectes en JavaScript, et
 * l'ouverture est en CSS pur. C'est ce qui fait qu'un menu deroulant ne coute
 * rien au referencement: le robot voit les dix-sept liens sur chaque page,
 * exactement comme s'ils etaient visibles. Un menu construit en JS, lui, peut
 * n'etre jamais explore.
 *
 * L'entete de groupe est un lien, pas un bouton: "What we do" mene a la page
 * /services/, qui existe et qui doit recevoir des liens internes. Un survol
 * ouvre la liste, un clic va au sommaire. */
.groupe { position: relative; }
.chef { display: inline-flex; align-items: center; gap: .32rem; padding: .55rem 0; position: relative; }

/* La section courante se signale sous son intitule. Sans ca, un visiteur qui
   arrive sur /team/ depuis Google ne sait pas ou il se trouve dans le site:
   la barre est identique partout. Le trait est pose par build.mjs, qui
   connait l'URL de chaque page au moment de l'ecrire. */
.chef.actif { color: var(--white); }
.chef.actif::before {
  content: ""; position: absolute; left: 0; right: .62rem; bottom: .12rem;
  height: 2px; background: var(--teal); border-radius: 2px;
}
.sous a[aria-current="page"] { background: var(--sand); color: var(--teal-deep); font-weight: 600; }
.chef::after {
  content: ""; width: .3rem; height: .3rem; margin-top: -.18rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .18s ease, opacity .18s ease;
}
.groupe:hover .chef, .groupe:focus-within .chef { color: var(--teal); }
.groupe:hover .chef::after, .groupe:focus-within .chef::after { opacity: 1; transform: rotate(225deg) translate(-.12rem,-.12rem); }

.sous {
  position: absolute; top: 100%; left: -1rem; min-width: 14.5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: .5rem; box-shadow: 0 18px 40px rgba(6,22,34,.22);
  display: grid; gap: .1rem;
  visibility: hidden; z-index: 110;
}
/* Pas de fondu (BJRC Recruiting, 2026-09-28): pendant les 0,16 s d'animation la
   liste etait a demi transparente et la page se lisait a travers. Elle apparait
   d'un coup, opaque. Le pont invisible couvre l'espace sous l'intitule, pour
   que la liste ne se referme pas quand la souris descend. */
.sous::before { content: ""; position: absolute; left: 0; right: 0; top: -.9rem; height: .9rem; }
.groupe:hover .sous, .groupe:focus-within .sous { visibility: visible; }

/* Un lien de liste se lit, il ne se crie pas: on quitte les capitales
   espacees de la barre pour de la casse normale, plus rapide a parcourir. */
.sous a {
  color: var(--navy); font-size: .84rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; padding: .5rem .7rem; border-radius: 8px;
}
.sous a:hover, .sous a[aria-current="page"] { color: var(--navy); background: #E4F8F5; }
/* Le premier lien de « Who we are » est la page equipe, qui recoit 1 283 clics
   par an et arrive troisieme du site: elle merite d'etre lue en premier. */
.sous a:first-child { font-weight: 600; }

.actions { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
/* Le selecteur de langue est un lien, pas une action: il se lit, il ne se
   dispute pas l'attention avec Start hiring. Discret, mais toujours visible,
   parce qu'une balise hreflang parle a Google et pas au visiteur. */
/* Deux lettres, gris clair, discret. "FRANCAIS" en capitales espacees pesait
   autant qu'un element de menu alors que ce n'en est pas un: c'est un
   interrupteur, pas une destination. */
.btn.langue {
  border-color: transparent; background: none;
  color: rgba(255,255,255,.42); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; padding: .4rem .45rem;
}
.btn.langue:hover { border-color: transparent; color: rgba(255,255,255,.85); background: none; }
.btn {
  display: inline-block; padding: .58rem 1.05rem; border-radius: 3px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-creux { border-color: rgba(255,255,255,.32); color: var(--white); font-weight: 500; }
.btn-creux:hover { border-color: var(--teal); color: var(--teal); }
/* Le degrade du preview, plutot qu'un aplat: sur un bouton de cette taille il
   se lit comme une matiere, et c'est la seule couleur vive de la page. */
.btn-plein {
  background: linear-gradient(135deg, #4FE1CF 0%, #3DD8C5 50%, #2AB8A6 100%);
  border-color: rgba(61,216,197,.55); color: var(--navy-deep);
}
.btn-plein:hover { background: var(--white); border-color: var(--white); }
/* Sur fond clair, le contour blanc disparait. */
.sur-clair.btn-creux { border-color: var(--line-2); color: var(--navy); }
.sur-clair.btn-creux:hover { border-color: var(--teal-deep); color: var(--teal-deep); }

/* La navigation mobile, sans une ligne de JavaScript: une case a cocher
   masquee pilote l'ouverture. Un menu qui depend du JS est un menu qui
   disparait quand un script tiers plante. */
.bascule, .burger { display: none; }
/* Le burger tombait a 1250px, une valeur calculee pour six liens a plat.
   Trois intitules de groupe tiennent la barre entiere en 870px environ, donc
   a 1180px on montrait un burger a cote de 800px de vide. Le seuil descend a
   960px: un portable et une tablette en paysage gardent la vraie barre. */
@media (max-width: 960px) {
  .entete-in { display: flex; flex-wrap: wrap; gap: 1rem; }
  .burger {
    display: block; margin-left: auto; width: 2.4rem; height: 2.4rem;
    border: 1px solid rgba(255,255,255,.3); border-radius: 3px; background: none;
    cursor: pointer; position: relative;
  }
  .burger span, .burger::before, .burger::after {
    content: ''; position: absolute; left: .55rem; right: .55rem; height: 1.5px;
    background: var(--white); transition: transform .2s, opacity .2s;
  }
  .burger span { top: 50%; transform: translateY(-50%); }
  .burger::before { top: .72rem; }
  .burger::after { bottom: .72rem; }
  .menu, .actions { display: none; width: 100%; margin: 0; }
  .bascule:checked ~ .menu, .bascule:checked ~ .actions { display: flex; }
  .menu { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: .6rem 0 .2rem; }

  /* Sur telephone il n'y a pas de survol, donc rien a deployer: les trois
     listes s'affichent en entier, chacune sous son intitule. Dix-sept liens
     dans un panneau qui defile valent mieux qu'un accordeon a piloter du
     pouce, et ca evite un script pour ouvrir un menu. */
  .groupe { width: 100%; }
  .chef { padding: 0 0 .5rem; }
  .chef::after { display: none; }
  .sous {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; padding: 0 0 0 .9rem;
    min-width: 0; border-left: 1px solid rgba(255,255,255,.14); gap: 0;
  }
  .sous a { color: rgba(255,255,255,.72); padding: .42rem 0; font-size: .88rem; }
  .sous a:hover, .sous a[aria-current="page"] { background: none; color: var(--teal); }
  .actions { padding-bottom: .5rem; }
  .bascule:checked ~ .burger span { opacity: 0; }
  .bascule:checked ~ .burger::before { top: 50%; transform: rotate(45deg); }
  .bascule:checked ~ .burger::after { bottom: 50%; transform: rotate(-45deg); }
}

/* ─────────────────────────────────────────────────────── hero
   Une photographie plein cadre sous un voile navy. Le fond plat de la version
   precedente etait lisible et sans corps: rien ne disait qu'on etait sur un
   site plutot que dans un document. Le voile est assez dense pour que le
   texte blanc passe le contraste AA sans dependre de la zone de l'image. */
.hero {
  position: relative; color: var(--white);
  background:
    radial-gradient(ellipse 60% 90% at 88% 0%, rgba(61,214,196,.13), transparent 62%),
    linear-gradient(160deg, #0b1929 0%, #12263c 60%, #0b1929 100%);
  padding: 4.6rem 0 3.8rem;
}
.hero .wrap { position: relative; }
.hero h1 { color: var(--white); }
.hero h1 em { font-style: italic; color: var(--teal); }
.hero .promesse {
  margin-top: 1.25rem; font-size: 1.16rem; font-weight: 300;
  color: rgba(255,255,255,.82); max-width: 46ch;
}

/* La page d'accueil prend la hauteur d'ecran, les pages interieures non: sur
   une page de service, un hero pleine hauteur repousse la reponse sous la
   ligne de flottaison, et la reponse est ce que la personne est venue lire. */
/* En flex, .wrap se reduit a la largeur de son contenu et son margin auto le
   recentre: le titre se decalait vers la droite, plus aucun alignement avec
   l'en-tete. La largeur explicite le remet dans la colonne. */
/* Plafonne, pas seulement proportionnel. A 78vh seuls, le hero fait 1123 px
   sur un ecran de 1440 de haut: le titre flotte au milieu d'un vide et la
   premiere section passe sous la ligne de flottaison sans raison. */
.hero-grand { min-height: min(62vh, 600px); display: flex; align-items: center; padding: 4rem 0; }
.hero-grand .wrap { width: 100%; }
/* Simon, 2026-08-11: "le titre est bizarre, peut-etre trop gros". A 4,3 rem
   sur un ecran large, trois lignes de Playfair occupent la moitie de la
   hauteur utile et le titre cesse d'etre une phrase pour devenir une affiche.
   Le plafond descend a 3,4 rem, la meme valeur que les autres h1 du site. */
/* Simon, 2026-09-24: le titre des trois pratiques prenait toute la largeur.
   Une pratique par ligne, plus petit, et un hero moins haut. */
.hero-grand h1 { font-size: clamp(1.9rem, 1rem + 2.2vw, 2.8rem); line-height: 1.15; }
.hero-grand .promesse { text-wrap: balance; }

/* Le surtitre avec son filet, repris du preview: il ancre le titre et donne
   la geographie avant meme qu'on lise. */
.surtitre {
  display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal);
}
.surtitre::before { content: ''; width: 3rem; height: 1.5px; background: var(--teal); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.hero-actions .btn { padding: .95rem 1.7rem; font-size: .76rem; }

/* Les chiffres quittent le hero pour un bandeau a part. Dans le hero ils
   entraient en concurrence avec les deux boutons, et un hero qui demande
   deux choses n'en obtient aucune. */
.bandeau-chiffres { background: var(--navy); color: var(--white); padding: 2.1rem 0; }
.bandeau-chiffres .credibilite { margin-top: 0; gap: 3rem; }

/* ─────────────────────────────────────────── mur de confiance
   Dix-huit logos que tout le monde reconnait. C'est l'actif le plus
   convaincant du site et il ne demande aucune donnee nouvelle a BJRC. */
.confiance { background: var(--white); border-top: 1px solid var(--line); }
.confiance-titre {
  text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 2.2rem; max-width: none;
}
/* Flex et non grid, pour que la DERNIERE rangee soit centree. En grid, dix-huit
   logos sur cinq colonnes laissent deux cases vides a droite, ce qui se lit
   comme un oubli. En flex centre, le compte n'a plus a tomber juste: on ajoute
   ou on retire un client sans avoir a rebalancer la rangee. */
.mur {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2.4rem 2rem; align-items: center;
}
/* Boite de largeur FIXE, pas la largeur intrinseque du fichier. En laissant
   width auto, un logo large mange la place de deux etroits et les rangees
   deviennent inegales: 8, puis 7, puis 3. A 8.5rem il en entre SIX par rangee,
   et dix-huit clients tombent donc juste en trois rangees pleines, sans case
   vide et sans avoir a trouver deux logos de plus. Le centrage reste la pour le
   jour ou le compte ne tombera plus juste. */
.mur img {
  height: 2.5rem; width: 8.5rem; object-fit: contain; opacity: .72;
  transition: opacity .2s;
}
.mur img:hover { opacity: 1; }

/* Les deux medailles sont des PNG de 200x200, et c'est tout ce qui existe:
   Manage HR ne nous a jamais envoye de version plus grande. A 6,5rem elles
   etaient deja servies a la taille native sur un ecran retina, et le libelle
   grave dedans (« TOP EMERGING CANADA EXECUTIVE SEARCH FIRM ») restait
   illisible. Les grossir davantage ne ferait que les rendre floues. La mention
   sort donc de l'image et devient du texte: lisible a toute resolution,
   indexable, et lue par un lecteur d'ecran. 9rem est le plafond avant que le
   flou se voie. Si la version haute definition arrive un jour, la legende peut
   disparaitre et l'image reprendre le travail seule. */
.recompenses { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; justify-content: center; }
.recompense { display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 15rem; margin: 0; }
.recompenses img { height: 9rem; width: auto; }
.recompense figcaption { text-align: center; }
.recompense figcaption b {
  display: block; font-size: .82rem; font-weight: 600; line-height: 1.35; color: var(--navy);
}
.recompense figcaption span {
  display: block; margin-top: .35rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep);
}

@media (max-width: 640px) {
  .hero-grand { min-height: 0; padding: 3.6rem 0; }
  .mur { gap: 1.8rem; }
  .mur img { height: 2.1rem; }

  /* Constate a 390 px le 2026-08-11: la page debordait a droite et coupait le
     texte du hero, le second bouton et les chiffres. La cause etait la rangee
     de chiffres en flex: "DESKS, ONE SPECIALIST EACH" en capitales espacees
     ne peut pas retrecir sous sa largeur de contenu, et deux de ces libelles
     cote a cote depassaient l'ecran. En grille de deux colonnes, chacun a une
     largeur imposee et le texte revient a la ligne. */
  .credibilite { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1rem; }
  .credibilite span { font-size: .64rem; letter-spacing: .08em; }
  .bandeau-chiffres .credibilite { gap: 1.3rem 1rem; }

  /* Deux boutons cote a cote tiennent a un ou deux pixels pres selon le
     libelle. Pleine largeur, la question ne se pose plus. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }

  .faits { gap: .4rem 1.1rem; }
  .etape, .etape-ligne { grid-template-columns: 1fr; gap: .35rem; }
  .etape .jours { grid-row: auto; }
}

/* (3) La credibilite en un coup d'oeil, juste sous le titre. Des nombres, pas
   des adjectifs: un adjectif se lit comme une promesse, un nombre se verifie. */
.credibilite { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2.2rem; }
.credibilite div { display: flex; flex-direction: column; gap: .18rem; }
.credibilite b { font-family: var(--display); font-weight: 400; font-size: 1.85rem; color: var(--teal); line-height: 1; }
.credibilite span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* Trois avis a l'ecran, les autres attendent leur tour. Sans JavaScript la
   page montre les trois premiers et rien ne bouge: un carrousel qui ne defile
   pas reste une section d'avis, alors qu'une pile de douze cartes est un mur. */
.carrousel .temoignage:nth-child(n+4) { display: none; }
.carrousel.est-pret .temoignage { display: none; }
.carrousel.est-pret .temoignage.est-visible { display: block; }
.carrousel-barre[hidden] { display: none; }
.carrousel-barre {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  margin-top: 1.8rem;
}
.carrousel-fleche {
  width: 2.4rem; height: 2.4rem; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.72);
  font-size: 1rem; line-height: 1; transition: border-color .2s, color .2s;
}
.carrousel-fleche:hover { border-color: var(--teal); color: var(--teal); }
.carrousel-fleche:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.carrousel-points { display: flex; gap: .5rem; }
.carrousel-point {
  width: .5rem; height: .5rem; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.26); border: 0; transition: background .2s, transform .2s;
}
.carrousel-point.est-actif { background: var(--teal); transform: scale(1.25); }
.carrousel-point:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* La note et le nombre d avis, sous le titre de la section. Ce fut une
   pastille pendant une heure: son padding la decalait d un rem vers la droite
   et elle ne s alignait plus sur le libelle ni sur le titre (Simon,
   2026-09-02). A plat, tout tombe sur la meme verticale. */
.avis-badge {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .5rem; font-size: .84rem; letter-spacing: .02em;
  color: rgba(255,255,255,.82);
}
.avis-badge b { color: var(--white); font-weight: 600; }
/* `margin-bottom` REMIS A ZERO, et ce n'est pas cosmetique. `.etoiles` porte
   1rem de marge basse pour son usage dans une carte de temoignage, ou les
   etoiles surmontent la citation. Ici le badge est une rangee flex centree:
   cette marge compte dans la boite de l'element, donc les cinq etoiles
   remontent au-dessus de la ligne de « 5.0 out of 5 on Google » (Simon,
   2026-09-15). Le meme selecteur reglait deja la couleur et la taille sans
   toucher a la marge, ce qui laissait la cause en place. */
.avis-badge .etoiles { color: var(--teal); letter-spacing: .1em; font-size: .88rem; margin-left: -2px; margin-bottom: 0; }
.avis-badge .avis-compte { color: rgba(255,255,255,.58); }
.avis-badge .avis-lien { color: var(--teal); text-decoration: underline;
  text-underline-offset: 3px; margin-left: .25rem; }
.avis-badge .avis-lien:hover, .avis-badge .avis-lien:focus-visible { color: var(--white); }

.avis-perso { margin-top: 2.2rem; }
.avis-perso .temoignages { gap: 1rem; }

/* ─────────────────────────────────────────────────────── sections */
section { padding: 3.4rem 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
.tete { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.6rem; }

/* (9) Le partenaire, en haut. Sur ce domaine les gens sont ce qui performe le
   mieux: /meet-the-team/ ranke 4.1 et les noms ramenent 516 clics a eux seuls.
   L'anatomie generique met les visages au neuvieme rang; la donnee de BJRC dit
   de les monter. */

/* Deux associes cote a cote plutot qu'un seul. Sous 900px ils s'empilent,
   sinon chaque portrait tombe a la taille d'une vignette. */
.partenaires { display: grid; gap: 1.1rem; }
/* Deux associes cote a cote, deux bios de longueurs differentes, et donc deux
   liens a deux hauteurs (Simon, 2026-09-02). La carte s'etire, le contenu
   devient une colonne, et le lien est pousse en bas: les deux « His open
   searches » se retrouvent sur la meme ligne quelle que soit la largeur. */
.partenaires .partenaire { align-items: stretch; }
.partenaires .partenaire > div { display: flex; flex-direction: column; }
.partenaires .partenaire .contact { margin-top: auto; padding-top: .9rem; }
@media (min-width: 900px) { .partenaires { grid-template-columns: 1fr 1fr; } }

.partenaire {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.8rem; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.6rem 1.8rem; box-shadow: inset 4px 0 0 var(--teal);
}
/* Les portraits sont des 540x720. Tailles dans un carre, `object-position` par
   defaut coupe au milieu de la hauteur: 90px partent du haut, et le dessus du
   crane est rogne sur presque toute l'equipe pendant que le visage remonte
   dans le cadre. Verifie le 2026-08-31 sur les quinze portraits, planche de
   controle a l'appui. 18% est la meme valeur que `.fiche > img` utilise deja
   pour la grille d'equipe: le visage se pose au centre et personne n'est
   decapite. Une valeur maison, pas un reglage par personne. */
.partenaire img {
  width: 8.5rem; height: 8.5rem; border-radius: 12px;
  object-fit: cover; object-position: center 18%; background: var(--sand);
}
.partenaire .role { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.partenaire h3 { font-size: 1.4rem; margin: .2rem 0 .5rem; color: var(--navy); }
/* Photo et nom menent au profil (Simon, 2026-09-29). */
.partenaire-photo { display: block; border-radius: 12px; }
.partenaire-photo img { display: block; transition: transform .2s; }
.partenaire-photo:hover img { transform: scale(1.03); }
.partenaire h3 a { color: inherit; text-decoration: none; }
.partenaire h3 a:hover { color: var(--teal-deep); }
.partenaire .contact { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .9rem; font-size: .92rem; }

/* Les deux actions au bas d'une carte d'associe: prendre rendez-vous, ou aller
   voir ses mandats. `margin-top:auto` reprend exactement ce que faisait
   `.contact`, sinon deux bios de longueurs differentes posent les boutons a
   deux hauteurs, ce qui avait deja ete corrige une fois (2026-09-02). */
.partenaires .partenaire .carte-actions { margin-top: auto; padding-top: .9rem; }
.carte-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.carte-actions .btn { padding: .72rem 1.15rem; font-size: .7rem; }

/* La bande d'equipe, sous les deux associes. Les visages se chevauchent pour
   dire « il y en a d'autres » sans occuper la largeur d'une grille, et le
   chiffre vient d'equipe.json (fragment `equipe-bande` de build.mjs), jamais
   du HTML. */
.equipe-bande {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem;
  margin-top: 1.1rem; padding: 1.1rem 1.4rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
}
.equipe-visages { display: flex; align-items: center; flex: none; }
/* Le meme `object-position: center 18%` que `.partenaire img` et `.fiche img`:
   les portraits sont des 540x720 et un cadrage au centre decapite presque
   toute l'equipe. Une valeur maison, verifiee sur les quinze portraits. */
.equipe-visages img {
  width: 2.7rem; height: 2.7rem; border-radius: 50%; object-fit: cover;
  object-position: center 18%; background: var(--sand);
  border: 2px solid var(--white); margin-left: -.75rem;
}
.equipe-visages img:first-child { margin-left: 0; }
.equipe-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem; border-radius: 50%; margin-left: -.75rem;
  background: var(--navy); color: var(--white); border: 2px solid var(--white);
  font-size: .78rem; font-weight: 600;
}
.equipe-mots { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 13rem; }
.equipe-mots b { color: var(--navy); font-size: .98rem; }
.equipe-mots span { color: var(--ink-2); font-size: .86rem; }
@media (max-width: 700px) {
  .equipe-bande { flex-direction: column; align-items: flex-start; }
  .equipe-bande .btn { width: 100%; text-align: center; }
  .carte-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* (4)(6)(11) Le processus, en jours. C'est la question a laquelle aucun
   concurrent ne repond, et la seule qu'un dirigeant se pose vraiment.
   Meme traitement que .etapes-liste de la page d'accueil: quatre boites de
   poids egal ne disaient pas qu'il s'agit d'une progression. Le filet
   vertical le dit sans un mot. */
.etapes { display: flex; flex-direction: column; gap: 2px; }
.etape {
  display: grid; grid-template-columns: 9rem 1fr; gap: .2rem 1.6rem; align-items: baseline;
  padding: 1.35rem 1.5rem; border-left: 2px solid var(--line);
  transition: border-color .3s, background .3s;
}
.etape:hover { border-left-color: var(--teal-deep); background: #ECFAF7; }
.etape .jours {
  grid-row: span 2; align-self: start;
  font-family: var(--display); font-size: 1.15rem; color: var(--teal-deep); line-height: 1.3;
}
.etape b, .etape h3 { color: var(--navy); font-size: 1.02rem; font-family: var(--display); font-weight: 400; }
/* Une etape peut porter plus que deux lignes (titre, texte, livrable). Sans
   ceci le troisieme enfant retombe dans la colonne de la date. */
.etape > *:not(.jours) { grid-column: 2; }
.etape span { font-size: .95rem; color: var(--ink-2); }

/* (7) Placements et preuves. Meme carte que les services, meme trait teal au
   survol: une seule famille de carte sur tout le site. */
.preuves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.2rem; }
.preuve {
  background: var(--white); border: 1px solid var(--line); padding: 1.6rem 1.5rem;
  position: relative; overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.preuve::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal));
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.preuve:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(11,25,41,.09); }
.preuve:hover::after { transform: scaleX(1); }
/* Un titre de poste Bullhorn peut porter une suite sans espace du genre
   "Insurance Defense/Litigation/Construction": plus large que la carte, il
   debordait au lieu de revenir a la ligne (Simon, 2026-09-22). */
.preuve .titre { color: var(--navy); font-weight: 600; font-size: 1.05rem;
  overflow-wrap: anywhere; word-break: break-word; }
.preuve .titre a { color: inherit; text-decoration: none; }
.preuve .titre a:hover { color: var(--teal-deep); }
.preuve .meta { margin-top: .45rem; font-size: .88rem; color: var(--ink-2); line-height: 1.6; }

/* Le mur de logos, version compacte pour les pages interieures. */
.confiance-mince { padding: 2.6rem 0; }
.confiance-mince .mur img { height: 2rem; opacity: .62; }

.citation { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--teal);
            border-radius: 12px; padding: 1.5rem 1.7rem; }
.citation p { font-family: var(--display); font-size: 1.24rem; line-height: 1.42; color: var(--navy); }
.citation footer { margin-top: .8rem; font-size: .88rem; color: var(--ink-2); }

/* (10) Les chiffres du marche. Le creneau que Korn Ferry ne prendra pas: leur
   donnee de remuneration est derriere un abonnement, donc la donnee canadienne
   gratuite est libre au sommet de la recherche. */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 1rem; }
.chiffre { background: var(--sand); border-radius: 12px; padding: 1.3rem 1.4rem; }
/* Le montant porte sa devise. "$270k" seul se lit en dollars americains par
   defaut chez la moitie des lecteurs, et sur un guide salarial canadien c'est
   une erreur de 35%. */
.chiffre b { display: block; font-family: var(--display); font-size: 2rem; color: var(--navy); line-height: 1; }
/* `display: inline` explicitement: la regle generique `.chiffre span` est en
   block pour le libelle sous le chiffre, et sans cette ligne le CAD tombait a
   la ligne au lieu de se poser a cote du montant. */
.chiffre b .cad {
  display: inline; font-family: var(--body); font-size: .56rem; font-weight: 700;
  letter-spacing: .1em; color: var(--ink-3); margin-left: .3rem; vertical-align: .55em;
}
.chiffre span { display: block; margin-top: .35rem; font-size: .9rem; color: var(--ink-2); }

/* (5) Les questions, en clair. Absentes des trois pages actuelles, et c'est
   aussi ce qu'une reponse d'IA cite. */
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 12px;
               padding: 1rem 1.3rem; margin-bottom: .7rem; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--navy); font-size: 1.02rem; }
.faq details[open] summary { margin-bottom: .6rem; }
.faq p { color: var(--ink-2); }

/* (13) Deux sorties, jamais une. Un dirigeant qui recrute et un candidat qui
   postule ne veulent pas le meme bouton, et les melanger fait perdre les deux. */
/* Les deux cartes ont rarement la meme longueur de texte, et sans rien elles
   avaient deux hauteurs et deux boutons a deux niveaux (Simon, 2026-08-11).
   La grille les etire a la meme hauteur, la colonne pousse le bouton en bas:
   les deux actions se retrouvent sur la meme ligne, ce qui est exactement ce
   qu'on demande a l'oeil de comparer. */
.sorties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1.1rem; align-items: stretch; }
/* La carte pale portait une bordure d'1px que la foncee n'avait pas: son
   contenu partait 1px plus bas et plus a droite, et elle finissait 2px plus
   haute. Une bordure transparente sur la foncee remet les deux boites a la
   meme geometrie. Le respiro monte aussi: 1.8rem etait juste pour un bloc qui
   porte un titre, deux lignes et un bouton. */
.sortie {
  background: var(--navy-deep); color: var(--white); border-radius: 14px;
  border: 1px solid transparent;
  padding: 2.4rem 2.4rem 2.2rem; display: flex; flex-direction: column;
}
.sortie p { margin-top: .7rem; line-height: 1.65; }
/* Pas de `padding-top: 0` ici. Il y a ete pose le 2026-08-27 pour coller le
   bouton au paragraphe, mais un padding agit DANS le bouton et non au-dessus:
   il ne retirait rien a l'ecart, il ecrasait le label contre le bord haut de
   la pastille. Mesure au 2026-08-31: 3px au-dessus du texte, 17,8px en dessous,
   soit 14,8px hors centre sur les quatre CTA du site. L'ecart au paragraphe,
   lui, se regle par `margin-top: auto` sur cette meme ligne. */
/* Les deux CTA font la meme largeur, quel que soit le libelle. Sans ca ils
   dependaient du nombre de lettres: « Book a call » 145,6px contre « See
   finance roles » 192,4px, deux rectangles differents cote a cote dans un bloc
   qui demande justement de comparer les deux (Simon, 2026-08-31). 14rem couvre
   le plus long des douze paires du site, « Prendre rendez-vous » a 13,7rem.
   Le `min()` est ce qui evite le debordement: sous 900px la carte tombe a
   ~195px de contenu, et une largeur fixe de 224px sortirait du cadre. */
.sortie .bouton { margin-top: auto; margin-bottom: 0; align-self: flex-start; }
/* La regle de largeur egale ne vivait que dans les paires .sorties. Simon la
   veut sur TOUS les CTA (2026-09-02): deux pastilles de largeurs differentes
   dans une meme page se lisent comme deux niveaux d'action alors qu'elles
   pesent pareil. 15rem couvre le plus long libelle du site, "Read the salary
   guide". Le min() evite le debordement sous 900px, ou une carte tombe a
   ~195px de contenu. */
.bouton { min-width: min(15rem, 100%); text-align: center; }
/* Telephone et courriel du bureau, sur la meme ligne. Le courriel n'est pas
   une pastille: "info@bjrconsultants.com" en capitales fait 258px et sortirait
   de la largeur commune. */
.actions-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.actions-contact .bouton { margin-top: 0; }
.lien-courriel { font-size: .95rem; }
/* Le bouton se decolle du paragraphe, sinon il a l air colle quand la carte
   est courte et flottant quand elle est longue. L'ecart minimal se pose sur le
   paragraphe et non sur le bouton: `margin-block: 1.6rem 0` ecrasait le
   `margin-top: auto` de la ligne au-dessus, et le bouton cessait d'etre pousse
   au bas de la carte. Les deux cartes ont la meme hauteur mais rarement le
   meme nombre de lignes, alors les deux actions se retrouvaient a deux
   hauteurs des que l'une des deux passait a trois lignes (Simon, 2026-08-27). */
.sortie p:last-of-type { margin-bottom: 1.6rem; }
.sortie.pale { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.sortie h3 { color: var(--white); font-size: 1.3rem; }
.sortie.pale h3 { color: var(--navy); }
.sortie p { margin-top: .5rem; font-size: .96rem; color: rgba(255,255,255,.72); }
.sortie.pale p { color: var(--ink-2); }
/* Meme bouton que dans l'en-tete: carre, capitales, degrade teal. La pilule
   arrondie d'avant venait d'une autre famille visuelle et se voyait des qu'on
   la mettait a cote de Start hiring. */
.bouton {
  display: inline-block; margin-top: 1.2rem; padding: .85rem 1.6rem; border-radius: 3px;
  background: linear-gradient(135deg, #4FE1CF 0%, #3DD8C5 50%, #2AB8A6 100%);
  border: 1px solid rgba(61,216,197,.55); color: var(--navy-deep);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.bouton:hover { background: var(--white); border-color: var(--white); }
/* Sur une section claire, le bouton creux se voyait a peine: un contour gris
   sur du blanc casse ne dit pas "clique ici". Le bouton sombre est le meme
   bouton, en navy plein. */
.bouton.sombre {
  background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white);
}
.bouton.sombre:hover { background: var(--navy-mid); border-color: var(--navy-mid); color: var(--white); }
.bouton.creux {
  background: none; border-color: var(--line-2); color: var(--navy);
}
.bouton.creux:hover { border-color: var(--teal-deep); color: var(--teal-deep); background: none; }
/* Sur les blocs sombres, le contour doit etre clair pour exister. */
.sortie:not(.pale) .bouton.creux, .sombre .bouton.creux {
  border-color: rgba(255,255,255,.32); color: var(--white);
}
.sortie:not(.pale) .bouton.creux:hover, .sombre .bouton.creux:hover {
  border-color: var(--teal); color: var(--teal);
}

/* Le CTA de la carte pale etait un bouton creux, donc une bordure grise fine
   sur du blanc: invisible, et lu comme desactive a cote du bouton plein de la
   carte foncee. Les deux cartes d'une paire portent le meme poids visuel, pas
   la meme couleur. */
.sortie.pale .bouton.creux {
  background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white);
}
.sortie.pale .bouton.creux:hover {
  background: var(--navy-mid); border-color: var(--navy-mid); color: var(--white);
}

/* ─────────────────────────────────────────── blocs A FOURNIR
   Le crochet en ligne marche pour un mot manquant. Pour une SECTION entiere
   qui attend BJRC, il se noie: on lit la page, on voit un paragraphe gris et
   on passe. Ce bloc-ci ne se rate pas, et il dit trois choses: ce qui manque,
   qui le fournit, et ce qui arrive si personne ne le fournit.
   L etiquette est en ANGLAIS, comme le corps du bloc: c est BJRC qui la lit,
   et chez BJRC personne ne travaille en francais (Simon, 2026-08-31). Le
   francais du site s arrete aux pages francaises. */
.tbd {
  border: 2px dashed var(--warn); background: var(--warn-soft); border-radius: 6px;
  padding: 1.5rem 1.6rem; margin-top: 1.2rem; position: relative;
}
.tbd::before {
  content: 'BJRC to provide'; position: absolute; top: -.72rem; left: 1.3rem;
  background: var(--warn); color: var(--white); font-family: var(--mono);
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .18rem .6rem; border-radius: 3px;
}
.tbd h3 {
  font-family: var(--body); font-size: 1rem; font-weight: 700; color: #7A4C08;
  margin: .2rem 0 .6rem;
}
.tbd p { font-size: .93rem; color: #7A4C08; max-width: 68ch; }
.tbd p + p { margin-top: .55rem; }
.tbd ul { margin: .6rem 0 0; padding-left: 1.2rem; color: #7A4C08; font-size: .93rem; }
.tbd li { margin: .25rem 0; }
.tbd .sans { display: block; margin-top: .8rem; font-size: .84rem; font-style: italic; opacity: .85; }

/* Le faux texte est en latin, jamais en anglais plausible. Un paragraphe
   anglais credible finit par partir en ligne parce que personne ne l'a
   reconnu; "Lorem ipsum" ne trompe personne, une seconde. */
.lorem { color: var(--ink-3); }

/* Ce qui reste a fournir, marque comme tel. Un gabarit qui a l'air fini part en
   production avec ses trous: les crochets disent qu'il manque une donnee, et
   ils sont impossibles a rater. */
.attente {
  background: var(--warn-soft); border: 1px dashed var(--warn); border-radius: 8px;
  padding: .12rem .5rem; font-size: .86rem; color: var(--warn); font-family: var(--mono);
}

/* Sur le fond navy, le crochet ambre devient une pastille blanche illisible.
   Meme role, autre contraste: il faut qu'il se voie comme un trou a combler,
   pas comme un element de design. */
.hero .attente, .sortie:not(.pale) .attente {
  background: transparent; border-color: rgba(61,216,197,.55); color: var(--teal);
}
.credibilite .attente { font-size: 1.3rem; padding: 0 .35rem; }

/* ─────────────────────────────────────────── tableaux de salaires
   Le coeur du guide. C'est la seule donnee du site qu'un concurrent ne peut
   pas copier, et la forme qu'une reponse d'IA reprend telle quelle: en
   tableau HTML elle est lisible par tout le monde, dans un PDF elle n'existe
   pour personne. */
.tableau-enveloppe {
  overflow-x: auto; border: 1px solid var(--line); background: var(--white);
  margin-top: 1.2rem;
}
table.salaires { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .93rem; }

/* Tableau de comparaison dans un article. Meme squelette que les salaires, mais
   du texte plutot que des montants, donc aligne a gauche des deux cotes. */
table.comparaison {
  border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .93rem;
  margin-block: 1.4rem;
}
table.comparaison caption {
  caption-side: top; text-align: left; padding-bottom: .7rem;
  font-size: .8rem; color: var(--ink-3);
}
table.comparaison th, table.comparaison td {
  padding: .72rem 1.1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.comparaison thead th {
  background: var(--navy-deep); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
table.comparaison tbody th { font-weight: 600; color: var(--navy); width: 11rem; }
table.comparaison tbody tr:nth-child(even) { background: rgba(11,25,41,.025); }
table.salaires caption {
  caption-side: top; text-align: left; padding: 1.1rem 1.3rem .2rem;
  font-family: var(--body); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep);
}
table.salaires th, table.salaires td { padding: .72rem 1.3rem; text-align: right; }
table.salaires th:first-child, table.salaires td:first-child { text-align: left; }
table.salaires thead th {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
table.salaires tbody tr + tr { border-top: 1px solid var(--line); }
table.salaires tbody tr:hover { background: #ECFAF7; }
table.salaires tbody th { font-weight: 600; color: var(--navy); }
/* Guide salarial en apercu (BJRC, 2026-09-29): les chiffres floutes sont des
   gabarits a zeros, le vrai montant n'est pas dans la page. */
table.salaires td.floute span { filter: blur(5px); user-select: none; opacity: .75; }
table.salaires tbody tr.verrou:hover { background: transparent; }
.apercu-plus { margin-top: 1.1rem; font-size: .95rem; color: var(--ink-2); }
.apercu-plus a { color: var(--teal-deep); font-weight: 600; margin-left: .3rem; }
.demande-guide .formulaire { max-width: 46rem; background: var(--white); border: 2px solid var(--teal-deep);
  border-radius: 14px; padding: 1.6rem; }
@media (max-width: 640px) { .demande-guide .formulaire { grid-template-columns: 1fr; padding: 1.2rem; } }
table.salaires td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* La colonne moyenne est celle qu'on vient chercher. */
table.salaires .moyenne { color: var(--navy); font-weight: 600; }

.note-methode {
  margin-top: 1rem; font-size: .82rem; color: var(--ink-3); max-width: 70ch;
}

/* Un sommaire colle en haut: le guide fait quatre pratiques et une trentaine
   de lignes, on ne fait pas defiler a l'aveugle. */
.sommaire { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.sommaire a {
  border: 1px solid var(--line-2); border-radius: 999px; padding: .45rem .95rem;
  font-size: .86rem; color: var(--navy); text-decoration: none; background: var(--white);
}
.sommaire a:hover { border-color: var(--teal-deep); color: var(--teal-deep); }

@media (max-width: 640px) {
  table.salaires { font-size: .86rem; min-width: 30rem; }
  table.salaires th, table.salaires td { padding: .6rem .9rem; }
}

/* ─────────────────────────────────────────── pied de page
   Deux lignes de texte ne font pas un pied de page: c'est le dernier endroit
   ou quelqu'un cherche un numero, et la seule partie du site presente sur
   chacune des 86 pages. */
footer.pied { background: var(--navy-deep); color: rgba(255,255,255,.62); font-size: .92rem; }
footer.pied a { color: rgba(255,255,255,.75); text-decoration: none; }
footer.pied a:hover { color: var(--teal); }

.pied-haut {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem;
  padding: 3.4rem 0 2.8rem;
}
/* Le logo du pied etait a 2,8rem, plus petit que celui de l'en-tete alors que
   c'est la derniere fois qu'on voit la marque sur la page (Simon, 2026-08-31).
   Le SVG monte sans perte, donc la seule limite est la place. */
.pied-marque img { height: 4.2rem; width: auto; margin-bottom: 1.2rem; }
.pied-marque p { font-size: .92rem; color: rgba(255,255,255,.55); max-width: 30ch; }
/* Les medailles montent avec lui, mais pas au-dela: elles sont en 200x200 et
   rien de plus grand n'existe (voir le bloc .recompenses). A 4,6rem elles sont
   servies a leur taille native sur un ecran retina, ce qui est le plafond
   avant que le flou se voie. L'opacite passe a 1: les reduire ET les eteindre
   les rendait deux fois moins presentes qu'une distinction ne le merite. */
.pied-prix { display: flex; gap: 1.2rem; margin-top: 1.5rem; }
.pied-prix img { height: 4.6rem; width: auto; opacity: 1; }

.pied-col h3 {
  font-family: var(--body); font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 1rem;
}
.pied-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pied-col li { font-size: .92rem; }
.pied-col .tel { display: block; color: var(--white); font-weight: 500; }
.pied-col .ou { display: block; font-size: .78rem; color: rgba(255,255,255,.45); margin-top: .1rem; }

.pied-bas {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center;
  border-top: 1px solid rgba(255,255,255,.09); padding: 1.4rem 0 2.2rem;
  font-size: .82rem; color: rgba(255,255,255,.42);
}
.pied-bas .pousse { margin-left: auto; }

@media (max-width: 860px) {
  .pied-haut { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .pied-haut { grid-template-columns: 1fr; }
  .pied-bas .pousse { margin-left: 0; }
}

/* ─────────────────────────────────────────── postes · liste et fiche
   Les pages de /jobs/ sont generees par build-jobs.mjs a partir du flux
   Bullhorn. Rien ici n'est ecrit a la main, donc tout ce qui touche a leur
   apparence vit dans ce fichier, jamais dans le gabarit. */

.filtres { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .9rem; align-items: end; }
/* .champ est un <label>: il doit rester un bloc. */
label.champ { display: block; }

.champ { display: flex; flex-direction: column; gap: .35rem; }
.etiq { font-size: .68rem; font-weight: 600; letter-spacing: .12em;
        text-transform: uppercase; color: var(--ink-2); }
.filtres input, .filtres select {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--line-2); border-radius: 10px; padding: .62rem .8rem; width: 100%;
}
.filtres input:focus-visible, .filtres select:focus-visible {
  outline: 2px solid var(--teal-deep); outline-offset: 1px; border-color: var(--teal-deep);
}
.resultat { margin: 1.1rem 0 .6rem; font-size: .86rem; color: var(--ink-2); }
.vide { margin-top: 1.2rem; color: var(--ink-2); }
.vide button { font: inherit; color: var(--teal-deep); background: none; border: 0;
               padding: 0; text-decoration: underline; cursor: pointer; }

.offres { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
          background: var(--line); border: 1px solid var(--line);
          overflow: hidden; }
.offre { background: var(--white); }
/* Toute la ligne est cliquable: sur une liste de 65 postes, viser le titre
   seul est un cout par ligne, et les gens cliquent la ou ils lisent. Le filet
   teal qui apparait a gauche est le meme geste que sur les etapes. */
.offre > a { display: grid; grid-template-columns: 11rem 1fr; gap: .3rem 1.4rem;
             align-items: baseline; padding: 1.05rem 1.4rem; text-decoration: none; color: inherit;
             border-left: 2px solid transparent; transition: border-color .25s, background .25s; }
.offre > a:hover { background: #ECFAF7; border-left-color: var(--teal-deep); }

/* Chaque ligne est un lien depuis toujours, mais rien ne le disait: la liste
   se lisait comme un tableau. Un chevron discret le dit au repos, et se colore
   au survol. Il est en ::after plutot qu'en balise: c'est de la decoration, un
   lecteur d'ecran n'a pas a l'annoncer. */
.offre > a { position: relative; padding-right: 2.6rem; }
.offre > a::after {
  content: '';
  position: absolute; right: 1.4rem; top: 50%;
  width: .5rem; height: .5rem; margin-top: -.28rem;
  border-right: 2px solid var(--ink-3); border-top: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: border-color .18s, transform .18s;
}
.offre > a:hover::after { border-color: var(--teal-deep); transform: rotate(45deg) translate(2px, -2px); }
.offre-titre { text-underline-offset: 3px; }
.offre > a:hover .offre-titre { color: var(--teal-deep); text-decoration: underline; }
.offre-pratique { grid-row: span 2; align-self: center; font-size: .68rem; font-weight: 600;
                  letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); }
.offre-titre { font-weight: 600; color: var(--navy); font-size: 1.04rem; }
.offre-meta { font-size: .86rem; color: var(--ink-2); }

/* ─────────────────────────────────────────── formulaires
   Deux colonnes sur large, une seule sur mobile. Les libelles sont au-dessus
   des champs et jamais dans le champ: un placeholder qui sert d'etiquette
   disparait des qu'on commence a ecrire, et on ne sait plus ce qu'on remplit. */
/* Le rappel du poste, en tete de /candidates/ quand on arrive d'une fiche.
   Le liseret teal a gauche est celui de .partenaire: sur ce site, un bloc
   encadre de teal veut dire « voici de qui, ou de quoi, on parle ». */
.poste-vise {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: inset 4px 0 0 var(--teal);
  padding: 1.3rem 1.6rem; margin-bottom: 1.8rem;
}
.poste-vise-quoi {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-deep);
}
.poste-vise-titre { font-size: 1.35rem; margin: .35rem 0 .2rem; color: var(--navy); }
.poste-vise-titre a { color: inherit; text-decoration: none; }
.poste-vise-titre a:hover { text-decoration: underline; }
.poste-vise-ou {
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-3);
}
.poste-vise-resume { margin-top: .7rem; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
/* Offre pourvue: le bloc ne promet plus rien, il oriente. */
.poste-vise-ferme { box-shadow: inset 4px 0 0 var(--line-2); }
.poste-vise-ferme .poste-vise-quoi {
  text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 400; color: var(--ink-2);
}

.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
/* L'asterisque et sa legende remplacent six « > » qui trainaient dans le HTML
   des deux formulaires: `</label>>`, une faute de frappe repetee que la revue
   du 2026-08-28 a prise pour un marqueur de champ obligatoire. L'asterisque
   est `aria-hidden`, le lecteur d'ecran annonce deja le champ comme requis par
   l'attribut `required`; l'entendre deux fois n'aide personne. */
.formulaire-legende {
  grid-column: 1 / -1; margin: 0 0 .2rem; font-size: .78rem; color: var(--ink-3);
}
.requis { color: #C0392B; font-weight: 700; }
.formulaire .champ.large { grid-column: 1 / -1; }
.formulaire input, .formulaire select, .formulaire textarea {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--line-2); border-radius: 10px; padding: .62rem .8rem; width: 100%;
}
.formulaire textarea { resize: vertical; }
.formulaire input[type="file"] { padding: .5rem .6rem; background: var(--sand); }
.formulaire input:focus-visible, .formulaire select:focus-visible, .formulaire textarea:focus-visible {
  outline: 2px solid var(--teal-deep); outline-offset: 1px; border-color: var(--teal-deep);
}
.formulaire .bouton { border: 0; cursor: pointer; font-family: inherit; }
.formulaire .fine { margin-top: .9rem; font-size: .82rem; color: var(--ink-3); }

@media (max-width: 640px) { .formulaire { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────── equipe
   Le visage d'abord, le titre ensuite, le numero en dernier et toujours
   visible: c'est la seule page du site ou le but est de faire partir le
   visiteur vers un telephone. */
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1.4rem; }
.personne {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .25rem;
}
.personne img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  background: var(--sand); margin-bottom: .9rem;
}
.personne h2, .personne h3 { font-family: var(--display); font-size: 1.22rem; color: var(--navy); }
.personne .poste { font-size: .88rem; font-weight: 600; color: var(--teal-deep); }
.personne .ou { font-size: .82rem; color: var(--ink-3); }
.personne .note { margin-top: .55rem; font-size: .88rem; color: var(--ink-2); }
/* Le numero est pousse en bas pour que toutes les cartes d'une rangee
   l'alignent, meme quand les notes n'ont pas la meme longueur. */
.personne > a {
  margin-top: auto; padding-top: .9rem; font-size: .93rem; font-weight: 600;
  color: var(--navy); text-decoration: none;
}
/* Le glyphe telephone d'Unicode rend un rond barre dans la moitie des polices
   systeme: un pictogramme dessine, pas un caractere. */
.personne > a::before {
  content: ''; display: inline-block; width: .95em; height: .95em;
  margin-right: .5rem; vertical-align: -.12em;
  background: var(--teal-deep);
  -webkit-mask: var(--icone-tel) center / contain no-repeat;
  mask: var(--icone-tel) center / contain no-repeat;
}
.personne > a:hover { color: var(--teal-deep); text-decoration: underline; }

/* Les regroupements: pratique, ville, et les deux croises. Ils se lisent comme
   une barre de navigation, pas comme une liste a puces, parce que c'est ce
   qu'ils sont. Le nombre a droite evite le clic vers une page a deux offres. */
.liens-hubs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.liens-hubs li { display: flex; }
.liens-hubs a {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--white); border: 1px solid var(--line-2); border-radius: 999px;
  padding: .5rem 1rem; font-size: .93rem; color: var(--navy); text-decoration: none;
}
.liens-hubs a:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
/* Le compteur vit DANS la pastille. Frere du lien, il se dessinait a cote,
   et on lisait "Legal jobs" puis un 37 flottant. */
.liens-hubs span {
  font-size: .72rem; font-weight: 700; color: var(--teal-deep);
  background: #E4F8F5; border-radius: 999px; padding: .1rem .4rem;
}
.liens-hubs a:hover span { background: var(--teal); color: var(--navy-deep); }

.hero-poste { padding-bottom: 2.6rem; }
.fil { font-size: .84rem; margin-bottom: 1.1rem; color: rgba(255,255,255,.55); }
.fil a { color: var(--teal); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil span { padding: 0 .35rem; }
.faits { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.5rem 0 0; padding: 0; }
.faits li { font-size: .92rem; color: rgba(255,255,255,.78); }
.faits li:first-child { color: var(--teal); font-weight: 500; }

/* Le bandeau « poste comble » n'existe qu'apres la verification en direct.
   Cache par defaut plutot que l'inverse: si le script echoue, la page reste
   celle d'un poste ouvert, ce qui est l'etat de loin le plus probable. */
.comble { display: none; background: var(--warn-soft); border-bottom: 1px solid #EBD9BC; padding: 1rem 0; }
.comble p { font-size: .95rem; color: #7A4C08; max-width: none; }
.est-comble .comble { display: block; }
.est-comble .carte-postuler { display: none; }

.poste-grille { display: grid; grid-template-columns: minmax(0,1fr) 20rem; gap: 3rem; align-items: start; }
.poste-corps { min-width: 0; }

/* Le corps d'un article migre est du HTML ecrit par quatre ans d'auteurs dans
   WordPress: on ne controle pas son ordre de balises, seulement son allure.
   Toute la mise en forme passe donc par des selecteurs de descendance, sans
   une seule classe, parce que le texte importe n'en portera jamais. */
.poste-corps > *:first-child { margin-top: 0; }
.poste-corps p { margin: 0 0 1.05rem; max-width: 68ch; line-height: 1.75; }
.poste-corps h2 { font-family: var(--display); font-size: 1.62rem; font-weight: 400; color: var(--navy-deep);
                  line-height: 1.25; margin: 2.6rem 0 .85rem; letter-spacing: -.01em; }
.poste-corps h3 { font-family: var(--body); font-size: 1.06rem; font-weight: 600; color: var(--navy);
                  margin: 2rem 0 .6rem; letter-spacing: .01em; }
.poste-corps h4 { font-family: var(--body); font-size: .95rem; font-weight: 600; color: var(--navy);
                  margin: 1.5rem 0 .5rem; }
.poste-corps ul, .poste-corps ol { margin: 0 0 1.2rem; padding-left: 1.25rem; }
.poste-corps li { margin: .42rem 0; max-width: 66ch; line-height: 1.65; }
.poste-corps li::marker { color: var(--teal-deep); }
.poste-corps strong { font-weight: 600; color: var(--navy); }

/* Un lien dans un corps de texte doit se voir sans crier. Le soulignement
   decale evite qu'il coupe les jambages, et la couleur ne change qu'au
   survol: 824 liens colores en teal feraient un texte en confettis. */
.poste-corps a { color: var(--navy); text-decoration: underline;
                 text-decoration-color: var(--teal); text-underline-offset: .18em;
                 text-decoration-thickness: 1.5px; }
.poste-corps a:hover { color: var(--teal-deep); text-decoration-color: var(--teal-deep); }

.poste-corps img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.6rem 0; display: block; }
.poste-corps blockquote { margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem;
                          border-left: 3px solid var(--teal); }
.poste-corps blockquote p { font-size: 1.08rem; color: var(--navy); }

/* Une video doit garder son rapport sans script, et surtout sans deborder la
   colonne sur telephone: aspect-ratio fait les deux. */
.poste-corps .video { position: relative; margin: 1.8rem 0; border-radius: 12px; overflow: hidden;
                      background: var(--navy-deep); aspect-ratio: 16 / 9; }
.poste-corps .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Un tableau large ne casse pas la page: il defile dans sa propre boite. */
.poste-corps table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .93rem; }
.poste-corps th, .poste-corps td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.poste-corps th { font-weight: 600; color: var(--navy); background: var(--sand); }

.poste-image { width: 100%; height: auto; border-radius: 14px; margin: 0 0 2rem; display: block; }

/* Un portrait est en 3:4, pas en 16:9: a pleine largeur de colonne il ferait
   960px de haut et pousserait tout le texte sous la ligne de flottaison.
 *
 * Il a d'abord ete mis en `float: right`, ce qui etait une erreur: la liste
 * des postes se retrouvait comprimee dans la gouttiere restante, et les
 * titres longs etaient coupes net au bord du flottant. Une grille de deux
 * colonnes pour la seule zone d'introduction fait le meme effet visuel sans
 * contraindre quoi que ce soit en dessous. */
.fiche-intro { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem;
               align-items: start; margin-bottom: 2.2rem; }
.fiche-portrait { width: 100%; height: auto; border-radius: 14px; display: block; }
.fiche-mot > *:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .fiche-intro { grid-template-columns: 1fr; gap: 1.3rem; }
  .fiche-portrait { max-width: 11rem; }
}

/* Une liste de postes n'est pas de la prose: elle garde ses propres regles,
   sinon les 824 liens soulignes du corps d'article viennent souligner chaque
   titre de mandat et la liste devient illisible. */
.poste-corps .offres a, .poste-corps .offres a:hover { text-decoration: none; }
.poste-corps .offres { list-style: none; padding-left: 0; }

/* Le nom de la carte mene a la fiche. Il reste blanc et sans soulignement:
   la carte entiere se lit deja comme un bloc cliquable, et douze liens
   soulignes sur une grille de portraits feraient du bruit. */
.fiche-nom a { color: inherit; text-decoration: none; }
.fiche:hover .fiche-nom a, .fiche-nom a:hover { color: var(--teal); }
.fiche-nom a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

/* ---- index du blogue -------------------------------------------------- */

.billets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
           gap: 1.6rem; margin-top: 1.6rem; }
.billet { background: var(--white); border: 1px solid var(--line); border-radius: 14px;
          overflow: hidden; display: flex; flex-direction: column;
          transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.billet:hover { border-color: var(--teal); transform: translateY(-2px);
                box-shadow: 0 10px 26px rgba(10,42,58,.09); }
.billet > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

/* Le rapport fige empeche 148 vignettes de hauteurs differentes de faire une
   grille en dents de scie, et reserve la place avant le chargement. */
.billet-vignette { aspect-ratio: 16 / 9; background: var(--sand); overflow: hidden; }
.billet-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.billet:hover .billet-vignette img { transform: scale(1.03); }
.billet-vignette img { transition: transform .4s ease; }

.billet-texte { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; gap: .5rem; }
.billet-haut { display: flex; align-items: center; gap: .55rem; font-size: .74rem;
               text-transform: uppercase; letter-spacing: .07em; }
.billet-pratique { font-weight: 700; color: var(--teal-deep); }
.billet-date { color: var(--ink-3); letter-spacing: .04em; }
.billet h2, .billet h3 { font-family: var(--display); font-size: 1.14rem; font-weight: 400; line-height: 1.3;
             color: var(--navy-deep); margin: 0; letter-spacing: -.01em; }
.billet:hover h3 { color: var(--teal-deep); }
.billet p { font-size: .89rem; color: var(--ink-2); line-height: 1.6; margin: 0; }
.billet-pied { margin-top: auto; padding-top: .55rem; font-size: .78rem; color: var(--ink-3); }

/* L'annee separe les 150 billets sans ajouter un titre de plus: un filet et
   un nombre suffisent a se reperer en defilant. */
.an-barre { display: flex; align-items: baseline; gap: 1rem; margin: 3rem 0 0; }
.an-barre:first-of-type { margin-top: 0; }
.an-barre b { font-family: var(--display); font-size: 1.5rem; font-weight: 400; color: var(--navy-deep); }
.an-barre span { font-size: .8rem; color: var(--ink-3); letter-spacing: .04em; }
.an-barre i { flex: 1; height: 1px; background: var(--line); }

.poste-cote { position: sticky; top: 5rem; display: grid; gap: 1rem; }
.carte-postuler { background: var(--navy-deep); color: var(--white); border-radius: 14px; padding: 1.5rem 1.6rem; }
.carte-postuler h2 { font-size: 1.22rem; color: var(--white); }
.carte-postuler p { margin-top: .5rem; font-size: .93rem; color: rgba(255,255,255,.72); }
.carte-postuler .fine { margin-top: .9rem; font-size: .78rem; color: rgba(255,255,255,.5); }
/* Le crochet « courriel a venir » sur la carte NAVY. `.attente` est dessine
   pour un fond clair (ambre sur creme): pose ici, il devient une pastille
   criarde sur onze fiches anglaises et onze francaises, alors qu'il signale
   une donnee manquante, pas une panne. Meme traitement que la grille de
   /team/: le poids d'un lien, en sourdine, avec le pointille du portail.
   Troisieme fois ce soir que ce composant traverse du clair au sombre. */
.carte-postuler .attente {
  display: inline-block; background: transparent; border: 1px dashed rgba(255,255,255,.28);
  color: rgba(255,255,255,.55); font-size: .74rem; font-family: var(--body);
  letter-spacing: .04em; padding: .25rem .55rem;
}
/* Les trois types de mandats d'un consultant. Une puce teal plutot qu'un point
   noir: la liste se lit comme une specialite, pas comme un inventaire. */
.types-roles { list-style: none; margin: .9rem 0 2rem; padding: 0; display: grid; gap: .55rem; }
.types-roles li {
  position: relative; padding-left: 1.15rem; font-size: 1rem; color: var(--ink);
}
.types-roles li::before {
  content: ''; position: absolute; left: 0; top: .52em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--teal-deep);
}

.carte-voisins { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.5rem; }
.carte-voisins h2 { font-size: 1rem; font-family: var(--body); font-weight: 600; color: var(--navy); }
.carte-voisins ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .85rem; }
.carte-voisins li { display: flex; flex-direction: column; gap: .12rem; font-size: .92rem; }
.carte-voisins li a { color: var(--navy); text-decoration: none; font-weight: 500; }
.carte-voisins li a:hover { color: var(--teal-deep); text-decoration: underline; }
.carte-voisins li span { font-size: .82rem; color: var(--ink-3); }
.lien-plus { display: inline-block; margin-top: 1.1rem; font-size: .88rem; }

@media (max-width: 900px) {
  .poste-grille { grid-template-columns: 1fr; gap: 2rem; }
  .poste-cote { position: static; }
  .filtres { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .partenaire { grid-template-columns: 1fr; }
  .partenaire img { width: 6.5rem; height: 6.5rem; }
  .offre > a { grid-template-columns: 1fr; padding: .95rem 1.1rem; }
  .offre-pratique { grid-row: auto; }

  /* Douze portraits en 3:4 sur une seule colonne font une page de six
     ecrans, et personne ne descend jusqu'a Montreal. Deux par rangee: la
     page tient, et un visage de 160 px reste parfaitement lisible. */
  .equipe-grille { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .fiche-voile { padding: 1rem .85rem .85rem; }
  .fiche-nom { font-size: .96rem; }
  .fiche-role { font-size: .66rem; margin-top: .2rem; }
  .fiche-tel { font-size: .78rem; margin-top: .5rem; padding-top: .45rem; }
  .fiche-ville { font-size: .5rem; top: .6rem; right: .6rem; padding: .15rem .35rem; }

  /* Les grands blocs respirent moins sur telephone: la marge blanche coute
     un ecran entier sur une page qui en fait deja six. */
  .carte { padding: 1.9rem 1.4rem 1.6rem; }
  .temoignage { padding: 1.5rem 1.3rem; }
  .etape, .etape-ligne { padding: 1.1rem 1.1rem; }
  section { padding: 2.6rem 0; }
  .wrap { padding: 0 1.25rem; }
  .entete-in { padding: .7rem 1.25rem; }

  /* Trois logos par rangee plutot que deux: le mur reste un mur, pas une
     colonne de dix-huit lignes. */
  /* Trois par rangee et non deux: a 7rem il n'en entrait que deux, soit neuf
     rangees a faire defiler. A 5.5rem les dix-huit tombent encore juste, en
     six rangees pleines. */
  .mur { gap: 1.3rem 1.2rem; }
  .mur img { height: 1.7rem; width: 5.5rem; }

  .liens-hubs a { padding: .45rem .8rem; font-size: .86rem; }
  .recompenses { gap: 2.2rem; }
  .recompenses img { height: 7rem; }
  .pied-prix img { height: 3.8rem; }
  .pied-marque img { height: 3.4rem; }
}

/* Une ligne d'article pas encore migre: meme grille que .offre > a, mais sans
   lien. Un lien vers une page qui n'existe pas est un lien mort, et 149 liens
   morts sur un index sont pires qu'un index incomplet. */
.offre-attente {
  display: grid; grid-template-columns: 11rem 1fr; gap: .3rem 1.4rem;
  align-items: baseline; padding: 1.05rem 1.4rem; border-left: 2px solid transparent;
}
.offre-attente .offre-titre { color: var(--ink-2); font-weight: 500; }
.offre-attente .offre-meta { grid-column: 2; }
@media (max-width: 640px) { .offre-attente { grid-template-columns: 1fr; padding: .95rem 1.1rem; }
  .offre-attente .offre-meta { grid-column: auto; } }

/* ─────────────────────────────────────────── bande LinkedIn
   Simon, 2026-08-11: "j'aimerais pousser le suivi LinkedIn, quelque part, un
   peu creatif." Pas un bouton "suivez-nous" de plus dans le pied: une raison
   de suivre, dite en une phrase, et qui se trouve etre vraie. L'analyse de
   leur compte le montre: les publications sur les gens font environ trois
   fois la portee du reste, et ce contenu-la n'atterrit jamais sur le blogue.
   La bande le dit, et le teal ne sert qu'a ca sur toute la page. */
.li-bande {
  background: var(--navy-deep); color: var(--white);
  border-top: 3px solid var(--teal); padding: 2.8rem 0;
}
.li-in {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.6rem 1.8rem; align-items: center;
}
.li-logo { width: 2.6rem; height: 2.6rem; color: var(--teal); flex: none; }
.li-in h2 { font-size: 1.55rem; color: var(--white); }
.li-in p { margin-top: .4rem; font-size: .95rem; color: rgba(255,255,255,.66); max-width: 60ch; }
.li-in .bouton { margin-top: 0; white-space: nowrap; }

@media (max-width: 780px) {
  .li-in { grid-template-columns: 1fr; gap: 1.1rem; }
  .li-in .bouton { justify-self: start; }
}


/* ─────────────────────────────────────────── confort tactile
   Mesure sur un ecran de 335px de contenu, aout 2026. Trois defauts qui ne se
   voient pas sur un portable et qui coutent des appels sur un telephone. */
@media (max-width: 760px) {

  /* iOS agrandit toute la page des qu'un champ sous 16px prend le focus, et le
     visiteur se retrouve a dezoomer a la main au milieu du formulaire. */
  /* .formulaire et .filtres portent .95rem, plus specifique qu'un selecteur
     de type nu, donc la regle doit les nommer pour gagner. */
  input, select, textarea,
  .formulaire input, .formulaire select, .formulaire textarea,
  .filtres input, .filtres select { font-size: 16px; }

  /* Un numero de telephone est l'action principale de ce site. A 28px de haut
     il se rate au pouce. Les cibles autonomes montent a 44px, la recommandation
     Apple et WCAG 2.5.8. Les liens en pleine phrase ne sont pas touches: les
     grossir casserait l'interligne du texte courant. */
  .fiche-nom a, .fiche-tel, .tel, .lien, .lien-plus,
  .pied-col ul a, .pied-col ul li > a, .menu a, .foot-grid a,
  .sous a, .colonnes a, .liste-liens a,
  .preuve .meta a[href^="tel:"], .preuve .meta a[href^="mailto:"],
  .pratiques-liste a, .liste-pratiques a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* Les liens des menus deroulants tombaient a 39px, cinq pixels sous la cible.
     min-height ne fait rien sur une boite inline: il faut d'abord la sortir du
     flux en ligne, sinon la regle est valide et sans effet. */
  .sous a { display: flex; align-items: center; min-height: 44px; }
  .fiche-tel, .tel { padding-inline: .1rem; }
}

/* Avis d'apercu sous un formulaire non branche. Ambre comme les crochets
   ambre: le client reconnait la meme convention, c'est en attente, pas casse. */
.avis-apercu {
  margin-top: 1rem; padding: .9rem 1.1rem;
  border: 1px dashed #C79A3A; border-radius: 4px;
  background: #FDF6E7; color: #6B4E12;
  font-size: .9rem; line-height: 1.5;
}


/* ─────────────────────────────────────────── depot de CV
   Le controle de fichier natif affiche le libelle de la LANGUE DU NAVIGATEUR:
   sur un poste francophone, un site anglais montrait « Choisir un fichier /
   Aucun fichier choisi ». Le champ reste dans le DOM, seul son rendu natif est
   masque, donc le clavier, les lecteurs d'ecran et la validation continuent de
   fonctionner. Le libelle visible est a nous, donc il est en anglais. */
.depot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; min-height: 8rem; padding: 1.4rem;
  border: 1.5px dashed var(--line-2); border-radius: 10px;
  background: var(--white); cursor: pointer; text-align: center;
  transition: border-color .18s, background .18s;
}
.depot:hover, .depot:focus-within { border-color: var(--teal-deep); background: #F4FCFA; }
.depot.est-survole { border-color: var(--teal-deep); background: #ECFAF7; border-style: solid; }
.depot.a-un-fichier { border-style: solid; border-color: var(--teal-deep); background: #F4FCFA; }
.depot input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.depot-mot { font-size: .95rem; color: var(--ink); }
.depot-mot b { color: var(--teal-deep); font-weight: 600; text-decoration: underline; }
.depot-fin { font-size: .8rem; color: var(--ink-3); }

/* Formulaires branches sur /api/contact (porte depuis main, 2026-09-15). */
.formulaire .bouton[disabled] { opacity: .55; cursor: progress; }
/* Le piege a robots: hors ecran plutot que display:none, que les remplisseurs
   automatiques savent ignorer. */
.leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-court { max-width: 46rem; }

/* Le groupe de boutons radio de /book et /fr/reserver. C'est le PREMIER
   fieldset du site: sans remise a zero, le navigateur pose sa bordure et son
   rembourrage par defaut au milieu d'un formulaire qui n'en porte nulle part
   ailleurs, et la difference ne se voit qu'a l'ecran, jamais dans le code.
   `min-width:0` est la regle qui empeche un fieldset de refuser de retrecir
   dans une grille, un comportement propre a cet element. */
.choix { border: 0; margin: 0; padding: 0; min-width: 0; }
.choix .etiq { padding: 0; }
.choix-ligne {
  display: flex; align-items: center; gap: .5rem; margin-top: .45rem;
  font-size: .95rem; color: var(--ink);
}
.choix-ligne input { accent-color: var(--teal-deep); width: 1rem; height: 1rem; flex: none; }
.etat-envoi:empty { display: none; }
.etat-envoi {
  margin-top: .9rem; font-size: .9rem; line-height: 1.5; color: var(--ink-2);
  border-left: 2px solid var(--teal-deep); padding-left: .8rem;
}
.etat-envoi.rate { border-left-color: #B4472F; color: #8E3823; }
.etat-envoi.reussi { margin-top: 1.6rem; font-size: 1rem; color: var(--ink); }

/* Les numeros d'une fiche: le libelle (Direct:, Office:) reste du texte, seul
   le numero est un lien, avec un peu d'air entre les deux (Simon, 2026-09-21). */
.tel-lab { margin-right: .45em; text-decoration: none; }

/* ------------------------------------------------- le bandeau qui defile
   Jessica, 2026-09-21: "a scrolling reel". Ce qui separe un bandeau propre
   d'un bandeau bon marche: la lenteur (160 s pour un tour; 60 puis 100 allaient trop vite, Simon, 2026-09-21), une boucle sans
   saut (la piste est doublee, voir 'logos' dans build.mjs), des bords qui
   s'effacent au lieu de couper un logo net, et une pause au survol pour qui
   veut lire un nom. */
.reel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reel-piste {
  display: flex; align-items: center; gap: 3rem; width: max-content;
  animation: reel-defile 160s linear infinite;
}
.reel:hover .reel-piste { animation-play-state: paused; }
.reel-piste img {
  /* Largeur NATURELLE, pas une boite fixe: dans une boite de 8.5rem, les
     logos etroits (Canadian Tire, Home Depot) flottaient dans du vide et les
     ecarts paraissaient inegaux (Simon, 2026-09-21). Ici l'ecart est le meme
     entre chaque logo, quelle que soit sa forme. */
  height: calc(2.5rem * var(--h, 1)); width: auto; max-width: 9rem; object-fit: contain; flex: none;
  opacity: .72; transition: opacity .2s;
}
.reel-piste img:hover { opacity: 1; }
/* -50% moins la moitie d'un intervalle: le gap entre la derniere image de la
   premiere copie et la premiere de la seconde compte dans la largeur. */
@keyframes reel-defile { to { transform: translateX(calc(-50% - 1.5rem)); } }
@media (max-width: 700px) {
  .reel-piste { gap: 2rem; animation-duration: 120s; }
  .reel-piste img { height: calc(1.9rem * var(--h, 1)); max-width: 6.5rem; }
  @keyframes reel-defile { to { transform: translateX(calc(-50% - 1rem)); } }
}
/* Qui a demande moins de mouvement a son systeme retrouve le mur fixe: la
   copie disparait et les logos passent a la ligne. */
@media (prefers-reduced-motion: reduce) {
  .reel { -webkit-mask-image: none; mask-image: none; }
  .reel-piste { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 2.4rem 2rem; }
  .reel-piste img[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------- les quatre piliers
   Contingent, Faster, Smarter, Low risk, repris de la fiche de lancement de
   BJRC. Quatre colonnes comme sur leur fiche, pas une liste verticale: la
   liste a filet fin et petits numeros se lisait comme un gabarit, et prenait
   trois ecrans pour quatre phrases (Simon, 2026-09-21: "very AI"). Le chiffre
   et le titre portent la section; le texte reste court. */
/* Quatre cartes egales (Simon, 2026-09-29: « make this part all aligned, maybe
   with boxes, it looks unfinished »). La premiere colonne n'avait pas de marge
   gauche et la phrase en gras tenait sur une ou deux lignes selon la carte:
   les textes partaient a des hauteurs differentes. Subgrid aligne les quatre
   rangees (icone, titre, phrase, texte) d'une carte a l'autre. */
.piliers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}
.pilier {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--teal-deep);
  border-radius: 14px; padding: 1.6rem 1.5rem 1.7rem;
}
.pilier-n {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 3.4rem; line-height: 1; color: var(--teal-deep);
  letter-spacing: -.02em; margin-bottom: .9rem;
}
.pilier-icone { display: block; width: 2.2rem; height: 2.2rem; color: var(--teal-deep); margin-bottom: .9rem; }
.pilier h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.7rem;
  line-height: 1.1; color: var(--navy); margin: 0 0 .6rem;
}
.pilier-cle { font-weight: 600; color: var(--ink); font-size: .98rem; margin: 0 0 .45rem; }
.pilier p { font-size: .92rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
.pilier .pilier-cle { color: var(--ink); }
@media (max-width: 960px) {
  .piliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .piliers { grid-template-columns: 1fr; }
  .pilier { padding: 1.3rem 1.2rem 1.4rem; }
  .pilier-n { font-size: 2.6rem; }
  .pilier h3 { font-size: 1.45rem; }
}

/* Les postes qu'on pourvoit, avec les icones de l'ancien site (BJ/PJ, Miro,
   2026-09-24: "consistent with old website little icons"). */
.roles-icones { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.roles-icones li { display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.3rem 1rem; font-size: .95rem; color: var(--navy); line-height: 1.35; }
.roles-icones img { width: 56px; height: 56px; object-fit: contain; }
/* Chaque carte mene aux postes ouverts de sa pratique (reunion BJRC 2026-09-29). */
.roles-icones li { padding: 0; transition: border-color .2s, transform .2s; }
.roles-icones li > a { display: flex; flex-direction: inherit; flex-wrap: inherit; align-items: center;
  justify-content: inherit; gap: inherit; width: 100%; height: 100%; padding: 1.3rem 1rem;
  color: inherit; text-decoration: none; border-radius: inherit; }
.roles-icones li:hover { border-color: var(--teal-deep); transform: translateY(-2px); }
.roles-icones li > a:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
/* Le poste vedette, mis en avant a la demande de Brady (2026-09-29): Chief Compliance Officer. */
.roles-icones li.role-vedette { grid-column: span 2; flex-direction: row; justify-content: center; gap: 1rem;
  flex-wrap: wrap; border: 2px solid var(--teal-deep); background: var(--navy); color: var(--white);
  font-size: 1.1rem; font-weight: 600; }
.roles-icones li.role-vedette img { background: var(--white); border-radius: 50%; padding: 6px; }
.roles-icones li.role-vedette em { flex-basis: 100%; font-style: normal; font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
@media (max-width: 480px) { .roles-icones li.role-vedette { grid-column: 1 / -1; } }

/* La reconnaissance ROB en une bande compacte (Simon, 2026-09-24). */
section.reco { padding: 2.4rem 0; }
.reco-carte { display: flex; align-items: center; gap: 1.4rem; max-width: 40rem; margin: 0 auto;
  padding: 1.4rem 1.8rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.reco-icone { width: 3.2rem; height: 3.2rem; flex: none; color: var(--teal); }
/* Logo officiel ROB (Simon, 2026-09-28), fond blanc opaque comme la carte. */
.reco-logo { width: 13rem; height: auto; flex: none; }
.reco-carte:has(.reco-logo) { max-width: 44rem; gap: 1.8rem; }
.reco-carte > div { min-width: 0; }

/* Le prix ROB, bande a part sous les avis (2026-09-28). Refait le meme jour
   (Simon: "ugly", "lost with LinkedIn"): la bande de 30px coincee entre deux
   sections sombres se lisait comme un trou. Vraie section, badge seul en
   grand sur une carte blanche (plus de trophee ni de filet), aligne sur la
   grille du site. */
.rob-bande { padding: 72px 0; }
.rob-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3.5rem; }
.rob-badge { display: block; width: 260px; height: auto; border-radius: 4px; background: #fff;
  padding: 22px 26px; box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(11, 25, 41, .06), 0 12px 32px -12px rgba(11, 25, 41, .18); }
.rob-sur { margin: 0 0 .7rem; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--teal-deep); }
.rob-titre { margin: 0; font-family: var(--display); font-size: 2rem; line-height: 1.2; color: var(--navy); }
.rob-source { margin: .7rem 0 0; font-size: 1rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .rob-bande { padding: 56px 0; }
  .rob-ligne { grid-template-columns: 1fr; justify-items: center; gap: 1.8rem; text-align: center; }
  .rob-badge { width: 220px; }
  .rob-titre { font-size: 1.5rem; }
}
/* Le prix ROB sur About (EN et FR), en section standard: titre a gauche comme
   partout, badge de l'accueil dessous, source a cote. */
.reco-ligne { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.reco-ligne .rob-source { margin: 0; }
@media (max-width: 560px) { .reco-ligne { flex-direction: column; align-items: flex-start; gap: 1rem; } }
/* Employers, "Fees and the Guarantee" (Simon, 2026-09-28): trois promesses
   centrees, le chiffre en grand, un libelle court, puis la phrase. */
.chiffres-centre .chiffre { text-align: center; padding: 2.2rem 1.6rem 2rem; }
.chiffres-centre .chiffre b { font-size: clamp(2.8rem, 2rem + 2.4vw, 3.8rem); }
.chiffres-centre .chiffre em { display: block; margin-top: .55rem; font-style: normal; font-size: 11px;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-deep); }
.chiffres-centre .chiffre span { margin: .8rem auto 0; max-width: 18rem; }
/* Guide d'entrevue (PDF de BJRC repris en HTML, 2026-09-28): listes dans les etapes. */
.guide-liste { margin: .6rem 0 .9rem; padding-left: 1.2rem; color: var(--ink-2); }
.guide-liste li { margin: .3rem 0; line-height: 1.55; }
.etape .guide-liste + span { display: block; }
/* Accueil: RETOUR a la photo du bandeau actuel de BJRC, l'immeuble (BJRC via
   Simon, 2026-09-30: « use the building, status quo »). Les lignes diagonales
   du 2026-09-29 (2f44e252) sont retirees; lignes.svg reste sur le disque.
   Voile opaque a gauche sous le texte, transparent a droite sur la tour. */
/* Photo de l'immeuble, en vrai bleu (Simon, 2026-09-30: "put back the photo a bit,
   it's too dark", "we need to see it's a building"). Cadree a 55 %: le soleil
   (haut de l'image) sort du cadre, la courbe de la tour et le treillis restent.
   Fondu en haut pour le dernier reste de reflet. Voile plus fort a gauche, sous le texte. */
.hero.hero-accueil {
  background:
    linear-gradient(rgba(11, 23, 39, .55), transparent 28%),
    linear-gradient(90deg, rgba(11, 23, 39, .85) 0%, rgba(11, 23, 39, .6) 45%, rgba(11, 23, 39, .25) 80%, rgba(11, 23, 39, .1) 100%),
    url("/assets/hero/ancien-site.webp") center 55% / cover no-repeat,
    #12263c;
}
/* Tablette: le hero est plus haut que large en proportion, le soleil revenait
   derriere "Focus". Photo agrandie, cadree en bas a droite. */
@media (max-width: 1100px) {
  .hero.hero-accueil { background-size: auto, auto, max(170%, 1300px) auto, auto; background-position: 0 0, 0 0, 100% 100%, 0 0; }
}
.hero-accueil .surtitre { white-space: nowrap; letter-spacing: .16em; }
.hero-accueil .surtitre::before { display: none; }
.hero-accueil h1 { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.2rem); line-height: 1.05; }
@media (max-width: 760px) {
  .hero-accueil .surtitre { white-space: normal; }
  .hero.hero-accueil {
    background:
      linear-gradient(rgba(11, 23, 39, .78), rgba(11, 23, 39, .78)),
      url("/assets/hero/ancien-site.webp") 100% 55% / cover no-repeat,
      #12263c;
  }
}
/* Confirmation d'envoi: une carte visible, pas une ligne grise (Simon, 2026-09-28). */
.envoi-reussi { margin-top: 1rem; padding: 2rem 1.6rem; border-radius: 12px; text-align: center;
  background: #E6F7F4; border: 1px solid #9FDCD2; outline: none; }
.envoi-coche { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--teal-deep); color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1; }
.envoi-titre { margin: .9rem 0 .3rem; font-family: var(--display); font-size: 1.6rem; color: var(--navy); }
.envoi-texte { margin: 0 auto; max-width: 34rem; color: var(--ink); }
.pied-marque img.pied-rob { height: 40px; width: auto; margin: 1.3rem 0 0; background: #fff;
  padding: 5px 7px; border-radius: 6px; box-sizing: border-box; display: block; }
@media (max-width: 560px) { .reco-logo { width: 12rem; } .reco-carte { padding: 1.4rem 1.2rem; } }
.reco-carte .eyebrow { margin: 0 0 .35rem; }
.reco-titre { font-family: "Playfair Display", Georgia, serif; font-size: 1.45rem; line-height: 1.2; color: var(--navy); margin: 0; }
.reco-source { margin: .3rem 0 0; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 560px) { .reco-carte { flex-direction: column; text-align: center; } .reco-carte .eyebrow { justify-content: center; } }

/* Bandeau: le h1 EST l accroche, la ligne teal des pratiques dessous, puis les
   boutons, sans phrase entre les deux (Simon, 2026-09-24). */
.hero-grand h1.hero-titre { font-size: clamp(2rem, 1.1rem + 2.5vw, 3.3rem); line-height: 1.1; max-width: 24ch; }
.hero-pratiques { margin: 1.1rem 0 0; font-family: var(--body); font-size: clamp(.78rem, .7rem + .3vw, .92rem);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.7; color: var(--teal); max-width: none; }
.hero-pratiques + .hero-actions { margin-top: 1.9rem; }

/* /jobs/ facon portail Bullhorn (Simon, 2026-09-24): volet de filtres a gauche,
   categories cochables avec leur compte, resultats a droite. */
.offres-cadre { display: grid; grid-template-columns: 17rem 1fr; gap: 1.6rem; align-items: start; }
.filtres-cote { position: sticky; top: calc(var(--hdrH, 5rem) + 1rem); background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.1rem 1.2rem; }
.filtres-cote summary { display: none; }
.filtres-cote fieldset { border: 0; margin: 1.1rem 0 0; padding: 0; }
.filtres-cote legend { font-weight: 600; font-size: .92rem; color: var(--navy); margin-bottom: .45rem; }
.recherche-cle input { width: 100%; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .95rem; background: var(--white); }
.cases-defile { max-height: 17rem; overflow-y: auto; padding-right: .3rem; }
/* /jobs/, mise en page du 2026-09-28 (Lindsay): recherche et regroupements en
   haut sur toute la largeur, puces des filtres actifs au-dessus de la liste. */
.offres-recherche { margin: 0 0 1rem; }
.offres-recherche input { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 1rem; background: var(--white); }
.offres-recherche input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.hubs-haut { margin: 0 0 1.6rem; gap: .4rem; }
/* Deux lignes au plus sur ordinateur (Lindsay): meme pastille, un cran plus compacte. */
.hubs-haut a { padding: .4rem .72rem; font-size: .84rem; gap: .4rem; }
.roles-tout { margin-top: .4rem; background: none; border: 0; padding: 0; color: var(--teal-deep, #1b8f80);
  cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; }
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.filtres-actifs[hidden] { display: none; }
.puce { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); color: var(--navy); font: inherit; font-size: .86rem; cursor: pointer; }
.puce span { font-size: 1.05rem; line-height: 1; color: var(--ink-2); }
.puce:hover { border-color: var(--teal-deep); }
.puce:hover span { color: var(--teal-deep); }
.puces-tout { background: none; border: 0; padding: 0 .3rem; color: var(--teal-deep, #1b8f80); text-decoration: underline;
  cursor: pointer; font: inherit; font-size: .86rem; }
@media (max-width: 1000px) {
  .hubs-haut { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hubs-haut::-webkit-scrollbar { display: none; }
  .hubs-haut li { flex: none; }
  .hubs-haut a { white-space: nowrap; }
}
@media (max-width: 640px) {
  .hubs-haut { margin-left: -1.25rem; margin-right: -1.25rem; padding: 0 1.25rem; }
}
.case { display: flex; align-items: baseline; gap: .45rem; font-size: .9rem; padding: .22rem 0; cursor: pointer; }
.case input { accent-color: var(--teal-deep, #1b8f80); flex: none; }
.case b { font-weight: 500; color: var(--ink-2); margin-left: auto; }
.filtres-reinit { margin-top: 1rem; background: none; border: 0; padding: 0; color: var(--teal-deep, #1b8f80);
  text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem; }
@media (max-width: 860px) {
  .offres-cadre { grid-template-columns: 1fr; }
  .filtres-cote { position: static; }
  .filtres-cote summary { display: block; cursor: pointer; font-weight: 600; color: var(--navy); }
  .filtres-cote[open] summary { margin-bottom: .6rem; }
}

/* Conseil consultatif: resume sur la carte, bio complete dans un dialog (2026-09-24). */
.conseil-carte { display: flex; flex-direction: column; cursor: pointer; }
.conseil-carte:hover .conseil-ouvrir { text-decoration: underline; }
.carte .conseil-firme, .conseil-firme { margin: .35rem 0 .15rem; color: #1b8f80; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; }
.carte.conseil-carte h2.conseil-nom { min-height: 0; margin: 0 !important; font-size: 1.45rem; line-height: 1.2; }
.carte .conseil-titre, .conseil-titre { margin: 0 0 .5rem; color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.conseil-carte .conseil-titre { min-height: 0; }
.conseil-carte .conseil-titre + p { margin-top: 0; }
.conseil-ouvrir { margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
/* La fenetre tient dans l ecran (Simon, 2026-09-24: "i have to scroll down"):
   hauteur plafonnee, defilement a l interieur, nom et croix epingles en haut. */
.conseil-bio { max-width: 42rem; width: calc(100% - 2rem); max-height: min(88vh, 46rem); overflow-y: auto;
  border: 0; border-radius: 14px; padding: 0 0 1.2rem; background: var(--white); color: var(--ink);
  box-shadow: 0 30px 80px rgba(11,25,41,.35); overscroll-behavior: contain; }
.conseil-bio::backdrop { background: rgba(11,23,39,.72); }
.conseil-bio > p { margin: 0 0 .85rem; padding: 0 1.6rem; font-size: .96rem; line-height: 1.6; }
.conseil-bio-tete { position: sticky; top: 0; z-index: 1; display: flex; gap: .9rem; align-items: center;
  margin-bottom: 1rem; padding: 1.1rem 3.4rem 1rem 1.6rem; background: var(--white); border-bottom: 1px solid var(--line); }
.conseil-bio-tete img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.conseil-bio-tete h2 { margin: 0 0 .15rem; font-size: 1.3rem; }
.conseil-bio-tete .conseil-firme { margin: .15rem 0 .1rem; }
.conseil-bio-tete .conseil-titre { margin: 0; font-size: .85rem; }
/* LinkedIn de chaque conseiller (Simon, 2026-09-30), carte et bio. Le clic
   sur le lien n'ouvre pas la bio: le gestionnaire de la carte ignore les <a>. */
.conseil-li { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; font-size: .8rem;
  font-weight: 600; color: #0a66c2; text-decoration: none; position: relative; z-index: 2; }
.conseil-li:hover { text-decoration: underline; }
/* Les rangees des cartes alignees d'une carte a l'autre (Simon, 2026-09-30:
   "align all linkedin"): un titre sur deux lignes poussait le LinkedIn et le
   resume plus bas que chez les voisins. Subgrid, comme les piliers. */
.cartes:has(> .conseil-carte) { row-gap: 1.5rem; }
.carte.conseil-carte { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: .7rem; align-content: start; }
.conseil-carte > .conseil-li { justify-self: start; align-self: start; }
.conseil-carte > .conseil-ouvrir { align-self: end; justify-self: start; }
.conseil-bio-tete .conseil-li { margin: .35rem 0 0; }
.conseil-fermer { position: sticky; top: .7rem; float: right; z-index: 2; margin: .7rem .9rem 0 0; width: 2.2rem; height: 2.2rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 50%; font-size: 1.3rem; line-height: 1;
  cursor: pointer; color: var(--ink-2); }
@media (max-width: 600px) {
  .conseil-bio { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }
}

/* ─────────────────────────────────────────── mobile, audit du 2026-09-28
   Audit sur toutes les pages a 390 et 360 px avant le lancement du 1er
   octobre. Aucun debordement lateral; ce bloc corrige le reste. */

/* Le menu ouvert faisait 1 230 px dans une entete collante: sur un telephone
   de 760 px, Find a job, Start hiring et FR restaient hors d'atteinte, meme en
   defilant. L'entete ouverte defile maintenant dans sa propre hauteur. */
@media (max-width: 960px) {
  .entete:has(.bascule:checked) {
    max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  }
}

@media (max-width: 640px) {
  /* Cibles tactiles: 40 px au moins pour tout ce qui se touche du pouce. */
  .pied-col ul { gap: .1rem; }
  .pied-col li a, .pied-col li .tel { display: inline-block; padding: .45rem 0; }
  .pied-bas a { display: inline-block; padding: .6rem 0; }
  .carrousel-point { position: relative; }
  .carrousel-point::after { content: ''; position: absolute; inset: -1rem -.3rem; }
  .faq summary { padding: .6rem 0; margin: -.6rem 0; }
  .faq details[open] summary { margin-bottom: 0; }
  .avis-lien { display: inline-block; padding: .55rem 0; }
  a[href^="tel:"], a[href^="mailto:"] { display: inline-block; padding-block: .45rem; }
  .fiche-courriel, .fiche-li { padding-block: .6rem; }
  main ul:not(.offres):not(.liens-hubs):not(.roles-icones) > li > a:not([class]) { display: inline-block; padding-block: .45rem; }
  .filtres-cote summary { padding: .7rem 0; }
  .case { padding: .55rem 0; }
  .case input { width: 1.1rem; height: 1.1rem; }

  /* Texte: 12 px au minimum, meme en capitales espacees. */
  .eyebrow, .pied-col h3, .offre-pratique { font-size: .75rem; }
  .bouton, .btn { font-size: .8rem; }
  .billet-date, .billet-pratique, caption, th, .etiq, .surtitre, .fiche-role, .role, .fiche-ville,
  .conseil-firme, .lien, .confiance-titre, .rob-sur, .fiche-courriel, .fiche-li, .carte-badge span,
  .chiffre em { font-size: .75rem; }
  .cad { font-size: .7rem; }
  .resultat a, .roles-tout, .filtres-reinit { display: inline-block; padding-block: .55rem; }
  /* Meme regle, a la specificite des regles d'origine. */
  .hero-actions .btn, .carte-actions .btn { font-size: .8rem; }
  .partenaire .role, .chiffres-centre .chiffre em, .carte .conseil-firme, .carte .lien,
  table.comparaison caption, table.salaires caption, table.comparaison thead th, table.salaires thead th,
  .poste-corps th { font-size: .75rem; }
  .chiffre b .cad { font-size: .7rem; }
  .preuve .titre a, .preuve .meta a { display: inline-block; padding-block: .5rem; }
}

/* Recherches recentes en liste, le poste et la ville (Lindsay V4, Simon,
   2026-09-28): les cartes blanches vides avaient l'air inachevees. */
/* Une seule colonne, six lignes (Simon, 2026-09-29: plus sobre, plus 'corporate'). */
.recherches { list-style: none; margin: 0; padding: 0; max-width: 46rem; border-top: 1px solid var(--line); }
.recherches li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line); }
.rech-titre { color: var(--navy); font-weight: 600; font-size: 1rem; line-height: 1.4; }
.rech-ville { flex: none; color: var(--ink-2); font-size: .88rem; white-space: nowrap; }


/* Interim, « When a Contractor Is the Right Answer »: deux listes cochees au lieu
   de huit cartes vides (Simon, 2026-09-29). Meme trait que les recherches recentes. */
.quand-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; max-width: 60rem; }
.quand-groupe h3 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; color: var(--navy); margin: 0 0 .6rem; }
.quand-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.quand-liste li { position: relative; padding: .9rem 0 .9rem 2rem; border-bottom: 1px solid var(--line);
  color: var(--navy); font-weight: 600; }
.quand-liste li::before { content: ''; position: absolute; left: .2rem; top: 1.25rem; width: .8rem; height: .45rem;
  border-left: 2px solid var(--teal-deep, #1b8f80); border-bottom: 2px solid var(--teal-deep, #1b8f80); transform: rotate(-45deg); }
@media (max-width: 720px) { .quand-grille { grid-template-columns: 1fr; gap: 2rem; } }

/* LinkedIn en vrai bouton sous le courriel, sur la carte des fiches (Simon,
   2026-09-29: le lien souligne passait inapercu). Contour clair sur le navy. */
.bouton-li { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .75rem;
  padding: .8rem 1.2rem; border: 1px solid rgba(255,255,255,.38); border-radius: 3px; color: var(--white);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: border-color .15s, color .15s; }
.bouton-li svg { width: 1rem; height: 1rem; flex: none; }
.bouton-li:hover { border-color: var(--teal); color: var(--teal); }
@media (max-width: 640px) { .bouton-li { font-size: .8rem; } }

/* Le LinkedIn de l'en-tete des fiches, avec son logo (Simon, 2026-09-29). */
.li-lien { display: inline-flex; align-items: center; gap: .4rem; color: inherit; }
.li-lien svg { width: .95rem; height: .95rem; flex: none; color: var(--teal); }
.li-lien:hover { color: var(--teal); }

/* Le prix ROB en plus grand (Simon, 2026-09-30: "should be bigger", "feels too
   much like Claude"). Plus de petit sur-titre en capitales: le rang porte la
   bande, en tres grand, le badge a 220 px (400 etait trop, Simon le meme jour: "way too big", moitie). Fond creme garde: les
   avis au-dessus et LinkedIn en dessous sont deja marine. Brady a dit oui au
   rang (No. 29), l'annee reste 2025. */
.rob-bande { padding: 64px 0; }
.rob-ligne { gap: 2.6rem; }
.rob-badge { width: 220px; padding: 16px 18px; }
.rob-rang { margin: 0 0 .5rem; font-family: var(--display); font-weight: 700;
  font-size: 3.2rem; line-height: 1; letter-spacing: -.02em; color: var(--navy); }
.rob-rang sup { font-size: .45em; vertical-align: super; }
.rob-titre { font-size: 1.35rem; line-height: 1.25; text-wrap: balance; }
.rob-source { margin-top: .5rem; font-size: .95rem; }
@media (max-width: 860px) {
  .rob-bande { padding: 48px 0; }
  .rob-ligne { gap: 1.4rem; }
  .rob-badge { width: 200px; padding: 14px 16px; }
  .rob-rang { font-size: 2.8rem; }
  .rob-titre { font-size: 1.25rem; }
}

/* Interim: deux groupes de postes, finance puis juridique (Pat, 2026-09-30).
   Quatre colonnes chacun: 4 postes en finance, la conformite en vedette (2
   colonnes) plus 2 en juridique, donc les deux rangees ont la meme largeur. */
.roles-groupe { margin: 0 0 .9rem; font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--navy); }
.roles-quatre + .roles-groupe { margin-top: 2.2rem; }
.roles-icones.roles-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .roles-icones.roles-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.roles-icones.roles-quatre li > a { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.roles-icones.roles-quatre li.role-vedette > a { flex-direction: row; flex-wrap: wrap; }

/* Piliers: un peu d'air entre la phrase en gras et le texte (Simon, 2026-09-30:
   "make it breathe"). `.pilier p { margin: 0 }` l'annulait. */
.pilier p.pilier-cle { margin-bottom: .7rem; }

/* Chiffres: plus d'air entre le montant et sa legende (Simon, 2026-09-30). */
.chiffre b + span { margin-top: .75rem; line-height: 1.5; }

/* Regroupements de postes (2026-09-30): la puce de la page ouverte est pleine,
   et les sous-titres de hero s'equilibrent (pas de mot seul en fin de ligne). */
.hubs-haut a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.hubs-haut a[aria-current="page"] span { background: var(--teal); color: var(--navy-deep); }
.hero .promesse { text-wrap: balance; }

/* Pastilles des cartes de pratique plus petites (Simon, 2026-09-30). */
.carte-badge { padding: .18rem .55rem; gap: .25rem; }
.carte-badge b { font-size: .8rem; }
.carte-badge span { font-size: .56rem; }

/* Jamais un mot seul en derniere ligne (Simon, 2026-09-30). */
p, li { text-wrap: pretty; }

/* Prix ROB centre et empile: logo, puis le rang, le titre, la source (Simon,
   2026-09-30: cote a cote, le bloc tombait a gauche au-dessus de LinkedIn). */
.rob-ligne { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.6rem; }
.rob-texte { max-width: 36rem; }

/* Les deux guides (Simon, 2026-09-30): une seule boite, en haut, compacte.
   L'en-tete et le formulaire vivent dans la meme carte. */
.guide-boite { max-width: 52rem; background: var(--white); border: 2px solid var(--teal-deep);
  border-radius: 16px; padding: 2rem 2.2rem; }
.guide-boite .tete { margin-bottom: 0; }
.demande-guide .guide-boite .formulaire { max-width: none; background: none; border: 0; padding: 0; margin-top: 1.2rem; }
.guide-infolettre { flex-direction: row; align-items: center; gap: .6rem; font-size: .92rem; color: var(--ink); cursor: pointer; }
.guide-infolettre input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--teal-deep); flex: none; }
@media (max-width: 640px) { .guide-boite { padding: 1.4rem 1.2rem; } }
/* Apercu du guide d'entrevue: cinq parties, pas le contenu. */
.guide-apercu { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem;
  grid-template-columns: repeat(5, minmax(0, 1fr)); }
.guide-apercu li { background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1rem; color: var(--navy); font-weight: 600; font-size: .95rem; line-height: 1.35; }
.guide-apercu b { display: block; font-family: var(--display); font-size: 1.6rem; color: var(--teal-deep); margin-bottom: .4rem; }
@media (max-width: 900px) { .guide-apercu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Guides: une section en deux, le contenu a gauche, le formulaire a droite. */
.guide-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; }
.guide-duo .guide-boite { max-width: none; }
.guide-duo .guide-boite .formulaire { margin-top: 0; }
.guide-cote .tete { margin-bottom: 0; }
.guide-points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.guide-points li { display: flex; align-items: center; gap: 1rem; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: .85rem 1.1rem; color: var(--navy); font-weight: 600; font-size: .98rem; }
.guide-points b { font-family: var(--display); font-size: 1.35rem; color: var(--teal-deep); min-width: 2rem; }
@media (max-width: 900px) { .guide-duo { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ─────────────────────────────────────────── accueil, Option A
   Retenue par BJRC le 2026-09-30 (BRIEF-homepage-option-a.md). Hero sans
   surtitre ni paragraphe: H1, les trois pratiques, deux boutons, puis les
   quatre piliers en rangee au bas du hero. Lindsay: resserrer l'ecart entre
   les boutons et la rangee des piliers, d'ou un hero sans hauteur minimale. */
.hero-option-a.hero-grand { min-height: 0; display: block; padding: 5.2rem 0 0; }
.hero-option-a h1 { font-size: clamp(2.6rem, 1rem + 5vw, 6.2rem); line-height: 1.05; letter-spacing: -.01em; }
.hero-pratiques { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 1.7rem 0 0;
  font-size: .875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #3DD8C5; }
.hero-pratiques .point { color: #4b5a6b; }
.hero-option-a .hero-actions { margin-top: 2rem; }
.hero-option-a .hero-actions .btn { font-size: .95rem; padding: 1.05rem 1.8rem; letter-spacing: 0; text-transform: none; }
.hero-piliers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem;
  border-top: 1px solid rgba(255,255,255,.15); }
.hero-pilier { padding: 2.1rem 1.75rem 2.8rem; }
.hero-pilier + .hero-pilier { border-left: 1px solid rgba(255,255,255,.15); }
.hero-pilier:first-child { padding-left: 0; }
.hero-pilier-label { margin: 0 0 .8rem; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #3DD8C5; }
.hero-pilier-valeur { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.2vw, 2.15rem);
  line-height: 1.15; color: var(--white); }
.sym { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }
/* Deuxieme ligne des piliers (BJRC via Simon, 2026-09-30: « $0 / to start,
   10 days / candidate presentation, industry / experts, free / replacement »):
   le chiffre en grand, sa legende dessous en plus petit. */
.hero-pilier-suite { display: block; margin-top: .45rem; font-family: var(--body); font-weight: 400;
  font-size: 1.05rem; line-height: 1.35; color: var(--white); } /* blanc franc, option B (Simon, 2026-09-30) */
@media (max-width: 760px) {
  .hero-option-a.hero-grand { padding-top: 3.4rem; }
  .hero-piliers { grid-template-columns: 1fr 1fr; margin-top: 2.2rem; }
  .hero-pilier { padding: 1.4rem 1rem 1.6rem; }
  .hero-pilier:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hero-pilier:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.15); }
  .hero-option-a .hero-actions .btn { width: 100%; text-align: center; }
}
/* Qui nous sommes: une phrase, centree, sous le mur de clients. */
.qui-sommes { background: #F7F5F0; padding: 4rem 0 1.2rem; border-top: 0; }
.qui-sommes p { max-width: 56rem; margin: 0 auto; text-align: center; font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.35; color: #1A2E4A; text-wrap: balance; }
.qui-sommes em { font-style: italic; color: #1C9589; }
.qui-sommes + section { border-top: 0; }
/* Chaque valeur tient sur ses deux lignes, jamais trois. */
.hero-pilier-valeur { white-space: nowrap; }
@media (max-width: 420px) { .hero-pilier-valeur { font-size: 1.3rem; } }
@media (max-width: 1000px) { .hero-pilier-valeur { font-size: 1.45rem; } .hero-pilier { padding-right: 1rem; } }
@media (max-width: 760px) {
  .hero-pratiques { flex-direction: column; align-items: flex-start; gap: .45rem; }
  .hero-pratiques .point { display: none; }
}
@media (max-width: 480px) { .hero-pilier-valeur { font-size: 1.2rem; } .hero-pilier { padding-right: .6rem; } }
/* Piliers du hero sur une ligne, sans gras (Simon, 2026-09-30). */
.hero-pilier-valeur { font-weight: 400; white-space: normal; font-size: clamp(1.6rem, 1rem + 1.3vw, 2.3rem); line-height: 1.2; text-wrap: balance; }
.hero-pilier-valeur .sym { font-weight: 400; }
@media (max-width: 480px) { .hero-pilier-valeur { font-size: 1.35rem; } }
.hero-pilier-valeur { font-size: clamp(1.35rem, .85rem + 1vw, 1.75rem); overflow-wrap: normal; word-break: normal; hyphens: none; }
.qui-sommes .eyebrow { justify-content: center; margin: 0 auto 1.1rem; }
.qui-sommes .wrap { display: flex; flex-direction: column; align-items: center; }
.hero-pilier-valeur { font-size: clamp(1.3rem, .8rem + .95vw, 1.62rem); }
.hero-pilier { padding-right: 1rem; padding-left: 1.5rem; }
.hero-pilier:first-child { padding-left: 0; }
@media (max-width: 760px) { .hero-pilier:nth-child(odd) { padding-left: 0; } .hero-pilier:nth-child(even) { padding-left: 1rem; } }
/* Entre les deux (Simon, 2026-09-30): une ligne, demi-gras, un cran plus grand. */
.hero-pilier-valeur { font-weight: 600; font-size: clamp(1.35rem, .8rem + 1.05vw, 1.78rem); }
.hero-pilier-valeur .sym { font-weight: 700; }
@media (max-width: 480px) { .hero-pilier-valeur { font-size: 1.3rem; } }
.hero-pilier-valeur { font-size: clamp(1.3rem, .8rem + .95vw, 1.62rem); }
@media (min-width: 1100px) { .hero-pilier-valeur { white-space: nowrap; } }
html[lang^="fr"] .hero-pilier-valeur { white-space: normal; }

/* Le prix ROB, dans la section des avis Google (Simon, 2026-09-30): logo,
   « No. 29 » en grand, un filet, puis le titre et la source. Une seule ligne,
   centree; empilee sur telephone. */
.prix-bande { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap;
  margin-top: 2.6rem; padding-top: 2.4rem; border-top: 1px solid rgba(255,255,255,.12); }
.prix-badge { width: 170px; height: auto; background: #fff; border-radius: 6px; padding: 10px 12px; box-sizing: border-box; }
.prix-bloc { display: flex; align-items: center; gap: 1.4rem; }
.prix-rang { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 1.8vw, 3.6rem);
  line-height: 1; color: #3DD8C5; white-space: nowrap; letter-spacing: -.01em; }
.prix-rang sup { font-size: .45em; vertical-align: .9em; line-height: 0; }
.prix-texte { border-left: 1px solid rgba(255,255,255,.2); padding-left: 1.4rem; }
.prix-titre { margin: 0; font-family: var(--display); font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); line-height: 1.2; color: var(--white); }
.prix-source { margin: .35rem 0 0; font-size: .88rem; color: rgba(255,255,255,.6); }
@media (max-width: 760px) {
  .prix-bande { flex-direction: column; gap: 1.3rem; text-align: center; }
  .prix-bloc { flex-direction: column; gap: .7rem; }
  .prix-texte { border-left: 0; padding-left: 0; }
}
/* Le 9 de la police descend sous la ligne (chiffres elzeviriens): le rang
   paraissait bas. Chiffres alignes + petite correction optique (Simon, 2026-09-30). */
.prix-rang { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; position: relative; top: -.04em; }

/* Fiche equipe: telephones et ville de la carte « Reach » dans le meme gris
   que la ligne sous le nom (Simon, 2026-09-30). */
.carte-postuler .fine.coord { margin-top: .7rem; font-size: .92rem; color: rgba(255,255,255,.78); }
.carte-postuler .fine.coord a { text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────────────────────── bande infolettre (2026-09-30)
   Juste au-dessus du pied, sur chaque page. Fond clair pour se detacher du
   pied sombre; courriel et bouton sur une ligne, empiles sur telephone. */
.infolettre-bande { background: #E6F7F4; border-top: 1px solid #9FDCD2; padding: 2.4rem 0; }
.infolettre-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 1.2rem 2.4rem; align-items: center; }
.infolettre-texte h2 { font-size: 1.6rem; color: var(--navy); margin: 0; }
.infolettre-texte p { margin: .45rem 0 0; color: var(--ink-2); font-size: 1rem; }
.formulaire.infolettre { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; max-width: none; }
.formulaire.infolettre .infolettre-champ { flex: 1 1 14rem; margin: 0; }
.formulaire.infolettre input[type="email"] { width: 100%; height: 3rem; padding: 0 1rem; border: 1px solid #9FDCD2; border-radius: 8px; background: var(--white); font-size: 1rem; }
.formulaire.infolettre .bouton { margin: 0; height: 3rem; padding: 0 1.6rem; white-space: nowrap; }
.formulaire.infolettre .cf-turnstile { flex-basis: 100%; }
.formulaire.infolettre .etat-envoi:empty { display: none; }
.formulaire.infolettre .etat-envoi, .formulaire.infolettre .fine { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--ink-2); }
.infolettre-bande .envoi-reussi { margin: 0; padding: 1.2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 780px) {
  .infolettre-in { grid-template-columns: 1fr; }
  .formulaire.infolettre .bouton { flex: 1 1 100%; }
}

/* CTA mobiles (Amel via Simon, 2026-09-30: "ces cta non centres sur la version
   mobile"). Les .bouton gardaient leur largeur de bureau, cales a gauche dans des
   cartes pleine largeur: Get in touch, Send your CV, salary guide, LinkedIn,
   Apply, courriels et telephones des fiches. Au telephone, pleine largeur et
   texte centre, comme les boutons du hero. Audit 390 px: 27 boutons, 75 pages. */
@media (max-width: 640px) {
  .bouton { display: block; width: 100%; box-sizing: border-box; text-align: center; }
  .actions-contact { flex-direction: column; align-items: stretch; }
}

/* Fiches d'equipe sur telephone (audit 390px, 2026-09-30): le bouton courriel
   en capitales espacees ne se coupait jamais, donc « NCORDIANO@BJRCCONSULTANTS.COM »
   imposait 335px a la carte et la page debordait de 5 a 17px (Neda, Natalie,
   Stephanie, EN et FR). Les colonnes peuvent retrecir, et le courriel se coupe. */
.poste-grille > * { min-width: 0; }
.carte-postuler a.bouton[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .carte-postuler a.bouton[href^="mailto:"] { letter-spacing: .04em; font-size: .78rem; padding-inline: .8rem; }
}

/* ═══════════════════════════════════════════ PASSE MOBILE (Simon, 2026-09-30:
   « every mobile section optimized, well aligned and centred »). Une seule
   couche, en fin de feuille, sous 760px: le bureau ne bouge pas. Regle: les
   TETES de section, le hero, les cartes d'appel, l'infolettre et le pied sont
   centres; le texte courant (bios, articles, FAQ, listes) reste aligne a gauche
   parce qu'un paragraphe centre se lit mal. */
@media (max-width: 760px) {
  /* 1. Les etapes s'empilaient dans une 2e colonne implicite: la regle
     « .etape > *:not(.jours) { grid-column: 2 } » survivait au passage en 1fr,
     et le texte tombait dans une bande de 150px. */
  .etape, .etape-ligne { grid-template-columns: 1fr; gap: .3rem; }
  .etape > *:not(.jours), .etape-ligne > * { grid-column: 1; }
  .etape .jours { grid-row: auto; }
  .etape, .etape-ligne { padding: 1.1rem 1.1rem 1.2rem; }

  /* 2. Tetes de section centrees, eyebrow compris (son trait reste devant). */
  .tete { text-align: center; margin-inline: auto; }
  .tete .eyebrow { justify-content: center; }
  /* Centre, le trait devant l'eyebrow restait seul a gauche quand le libelle
     passait sur deux lignes. Sur telephone, le libelle seul. */
  .tete .eyebrow::before { display: none; }
  .tete p { margin-inline: auto; }
  .roles-groupe { text-align: center; }
  /* Blogue: la liste de billets gardait le retrait par defaut d'un <ul> (40px). */
  ul.billets { padding-left: 0; }
  .tete .avis-badge { justify-content: center; text-align: center; }

  /* 3. Hero centre, piliers compris. */
  .hero .wrap, .hero .promesse, .hero h1 { text-align: center; }
  .hero .surtitre, .hero .eyebrow, .hero .fil { justify-content: center; }
  .hero-pratiques { justify-content: center; align-items: center; text-align: center; }
  .hero-pratiques > * { text-align: center; }
  .hero-pilier { text-align: center; padding-inline: .6rem; }
  .hero-pilier:first-child, .hero-pilier:nth-child(odd) { padding-left: .6rem; }

  /* 4. « START HERE » sur Start Hiring heritait du h2 des colonnes
     (.poste-corps h2, 1.62rem serif): on lui rend l'allure d'eyebrow. */
  .poste-corps h2.eyebrow { font-family: var(--body); font-size: .66rem; font-weight: 700;
    letter-spacing: .22em; color: var(--teal-deep); margin: 0; }

  /* 5. Cartes de pratique: le <br> du titre ne sert qu'au bureau. */
  .carte h3 br { display: none; }

  /* 6. Cartes d'appel (You Are Hiring / Candidate): centrees, bouton pleine largeur. */
  .sortie { text-align: center; align-items: stretch; }
  .sortie .bouton { align-self: stretch; text-align: center; }

  /* 7. Infolettre centree. */
  .infolettre-texte { text-align: center; }

  /* 8. Pied centre. */
  .pied-haut { text-align: center; justify-items: center; }
  .pied-marque { display: flex; flex-direction: column; align-items: center; }
  .pied-marque p { margin-inline: auto; }
  .pied-col ul { padding: 0; list-style: none; }
  .pied-col h3 { justify-content: center; }
  .pied-bas { justify-content: center; text-align: center; flex-wrap: wrap; gap: .6rem 1.2rem; }
  .pied-bas .pousse { margin-left: 0; flex-basis: 100%; }
}

/* 9. Grille d'equipe sur telephone: deux colonnes de 170px ne portent pas
   nom + role + Email + LinkedIn par-dessus un visage. On garde nom et role
   (la fiche porte le reste), voile plus dense, pastille de ville qui ne couvre
   plus le nom. */
@media (max-width: 480px) {
  .fiche-voile { padding: .9rem .75rem .8rem;
    background: linear-gradient(to top, rgba(5,14,26,.96) 0%, rgba(5,14,26,.7) 30%, transparent 62%); }
  .fiche-voile .fiche-courriel, .fiche-voile .fiche-li, .fiche-voile .fiche-tel, .fiche-voile .fiche-sans-courriel { display: none; }
  .fiche-nom { font-size: 1rem; }
  .fiche-role { font-size: .66rem; line-height: 1.35; }
  .fiche-ville { top: .5rem; right: .5rem; left: auto; max-width: calc(100% - 1rem); font-size: .5rem;
    letter-spacing: .1em; padding: .15rem .4rem; white-space: normal; text-align: right; }
}

/* Pied mobile compact (Simon, 2026-10-01: "the footer looks WAY too long on mobile, it is the less
   important piece"): 1 490 px -> ~690. Logo + ROB sur une ligne, sans la phrase; Expertise et
   Postes en deux colonnes; telephones sur une ligne; equipe, mandat et bureaux retires au
   telephone (deja dans le menu). Cible par lien, pas par position: le pied FR est different. */
@media (max-width: 640px) {
  .pied-haut { grid-template-columns: 1fr 1fr; gap: 1.8rem .8rem; padding: 2.4rem 0 1.8rem; align-items: start; }
  .pied-marque { grid-column: 1 / -1; flex-direction: row; justify-content: center; align-items: center; gap: 1.2rem; }
  .pied-marque img { height: 3rem; margin: 0; }
  .pied-marque img.pied-rob { margin: 0; height: 36px; }
  .pied-marque p { display: none; }
  .pied-col h3 { margin-bottom: .5rem; font-size: .64rem; letter-spacing: .1em; }
  .pied-col li { font-size: .86rem; line-height: 1.35; }
  .pied-col li a, .pied-col li .tel { padding: .38rem 0; }
  /* "Talk to a Person" a gauche (telephones, ville sous chacun), "Contact" a droite
     (courriel + LinkedIn), comme les deux colonnes du dessus (Simon, 2026-10-01).
     La liste passe en display: contents pour que ses lignes se placent dans la
     grille de la colonne; le titre "Contact" est un ::before, pareil en FR. */
  .pied-col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;
    column-gap: .8rem; align-items: start; justify-items: center; }
  .pied-col:last-child > h3 { grid-column: 1; grid-row: 1; }
  .pied-col:last-child::before { content: "Contact"; grid-column: 2; grid-row: 1;
    font-family: var(--body); font-size: .64rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; }
  .pied-col:last-child ul { display: contents; }
  .pied-col:last-child li { margin-top: 0 !important; }
  .pied-col:last-child li:has(.tel) { grid-column: 1; }
  .pied-col:last-child li:has(a[href^="mailto:"]) { grid-column: 2; grid-row: 2; }
  .pied-col:last-child li:has(a[href*="linkedin.com"]) { grid-column: 2; grid-row: 3; }
  .pied-col:last-child li:has(a[href="/team/"], a[href="/employers/"], a[href="/toronto/"],
    a[href="/fr/equipe/"], a[href="/fr/employeurs/"], a[href="/fr/toronto/"]) { display: none; }
  .pied-col:last-child li .tel { padding: .3rem 0 .1rem; line-height: 1.3; min-height: 0; }
  .pied-col:last-child .ou { margin: 0 0 .7rem; line-height: 1.2; }
  .pied-bas { padding: .8rem 0 1.4rem; gap: 0 1rem; }
  .pied-bas a { padding: .4rem 0; }
}

/* Logo LinkedIn dans le pied, devant le mot. */
footer.pied .li-ico { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: .4rem; }