/* ════════════════════════════════════════════════════════════════════
   HIRINGNOTES — feuille de style unique

   Portage du design system de la maquette (thème magenta, Plus Jakarta
   Sans) en CSS autonome.

   ⚠️  PAS DE BOOTSTRAP, PAS DE MARTEX.

       La maquette d'origine est un thème Bootstrap 5.3 + Martex : ~300 Ko
       de CSS pour une vingtaine de classes réellement utilisées. Ici le
       rendu vient du serveur et les composants sont connus d'avance — on
       écrit les vingt classes.

       Ce qui est repris à l'identique : la palette, l'échelle typo, les
       rayons, les boutons pilule, le rythme des sections.

   ⚠️  PAS DE STYLE EN LIGNE, NULLE PART.

       La CSP déclarée dans server.js interdit `style-src 'unsafe-inline'`.
       C'est ce qui empêche un `<style>` glissé dans une description d'offre
       de s'appliquer. La maquette Martex, elle, utilise l'inline partout :
       ce pattern n'est PAS repris.

   ⚠️  POLICE AUTO-HÉBERGÉE, JAMAIS GOOGLE FONTS.

       Un `@import` vers fonts.googleapis.com ferait tomber la CSP et
       enverrait l'IP de chaque visiteur à un tiers — ce qui, en Europe,
       demande un consentement qu'on n'a pas.
   ════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ════════════════════════════════════════════════════════════════
     PALETTE — relevée sur la maquette, valeur par valeur.

     ⚠️  LES TEINTES NE SONT PAS « À PEU PRÈS ». Un magenta arrondi d'un
         point se voit quand deux composants se touchent : le bouton d'un
         côté, le badge de l'autre, et l'œil accroche sur la jointure.
         Les valeurs ci-dessous sont relevées dans le fichier source.
     ════════════════════════════════════════════════════════════════ */

  /* ── Magenta, la couleur d'action ── */
  --theme:        #C73E9B;
  --theme-hover:  #952E74;   /* la maquette assombrit franchement au survol */
  --theme-link:   #952E74;
  --theme-fonce:  #7B2E60;   /* accent des cartes secondaires */
  --theme-clair:  #E87FC4;
  --theme-voile:  #FDF7FB;

  /* ── Navy, les surfaces profondes ──
     ⚠️  ABSENT DE LA VERSION PRÉCÉDENTE, ET C'EST LE PLUS GROS ÉCART.
         La maquette pose un bandeau navy en tête de page et sur le
         backoffice. Sans ce jeu de teintes, tout le haut du site
         retombait en blanc et l'identité disparaissait. */
  --navy:         #1B1B3A;
  --navy-doux:    #3A3A5C;
  --navy-voile:   rgba(255, 255, 255, .07);

  --bleu:         #024AAD;
  --bleu-pale:    #EEF3FC;
  --bleu-hover:   #013A8A;
  --etoile:       #F0A61D;

  /* ── Violets et roses ── */
  --lilas:        #EEE2FC;
  --violet-pale:  #F9F6FF;
  --violet-tete:  #EAE7F2;
  --violet-fond:  #F4F2F9;
  --violet-gris:  #F0EEF6;
  --rose-pale:    #F9F0F6;

  /* ── Encres et gris ── */
  --encre:        #22223B;
  --encre-douce:  #42425A;
  --gris:         #5C5C74;
  --gris-clair:   #6E6E85;
  --gris-tres:    #9A9AAE;
  --gris-pale:    #B9B9C8;
  --trait:        #E4E0EE;
  --blanc-400:    #F4F4F9;
  --snow:         #FDFDFD;
  --fond:         #ffffff;

  /* ⚠️  LE FOND DE PAGE N'EST PAS BLANC.
         `body { background:#E9E9EF }` dans la maquette. C'est ce gris
         très légèrement violacé qui fait ressortir les cartes blanches ;
         sur fond blanc, elles disparaissent et il faut compenser par des
         bordures — ce que la maquette ne fait jamais. */
  --page:         #E9E9EF;

  /* ── États ── */
  --succes:       #1E7B45;
  --succes-pale:  #E8F6ED;
  --alerte:       #D4145A;
  --alerte-pale:  #FDECEF;
  --attente:      #92610A;
  --attente-pale: #FDF5E3;

  /* ── Rayons ──
     ⚠️  20px EST LE RAYON DES CARTES, PAS SEULEMENT DES PILULES.
         Il domine largement dans la maquette (71 occurrences). L'ancien
         `--pill: 20px` servait aux boutons pendant que les cartes
         restaient en 16 : deux rayons différents côte à côte, ce qui se
         lit comme une erreur de rendu. */
  --r-06: 6px;
  --r-08: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-16: 16px;
  --r-20: 20px;
  --pill: 20px;

  /* ── Ombres ──
     ⚠️  BEAUCOUP PLUS PORTÉE QU'AVANT. La maquette utilise une seule
         ombre de carte, très diffuse : `0 24px 60px rgba(34,34,59,.14)`.
         L'ancienne (`0 8px 30px … .08`) était trois fois plus discrète —
         les cartes semblaient collées au fond au lieu de flotter. */
  --ombre:     0 2px 8px rgba(34, 34, 59, .05);
  --ombre-mid: 0 24px 60px rgba(34, 34, 59, .14);
  --ombre-navy: 0 40px 90px rgba(27, 27, 58, .40);

  --largeur:   1240px;

  /* ⚠️  PLUS JAKARTA SANS, AUTO-HÉBERGÉE.
         La maquette la charge depuis Google Fonts ; le site ne le fait
         pas — la CSP l'interdit et l'IP du visiteur partirait chez un
         tiers sans consentement. Les .woff2 vont dans public/fonts/. */
  --pile: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--pile);
  font-size: 16px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* ⚠️  `text-wrap: pretty` VIENT DE LA MAQUETTE.
       Il évite les lignes orphelines d'un seul mot en fin de paragraphe —
       très visible sur les accroches courtes du site. Ignoré par les
       navigateurs qui ne le connaissent pas, donc sans risque. */
p { text-wrap: pretty; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.6px; font-weight: 700; }
p { margin: 0 0 1em; }

a { color: var(--theme); text-decoration: none; }
a:hover { color: var(--theme-link); text-decoration: underline; }

img { max-width: 100%; height: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Échelle typo reprise de la maquette (classes s-XX = px) */
.s-15 { font-size: 15px; }   .s-17 { font-size: 17px; }
.s-20 { font-size: 20px; }   .s-22 { font-size: 22px; }
.s-24 { font-size: 24px; }   .s-28 { font-size: 28px; }
.s-32 { font-size: 32px; }
.s-34 { font-size: 34px; }   .s-40 { font-size: 40px; }
.s-60 { font-size: 60px; }
.w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; }

.p-md { font-size: 17px; }
.p-lg { font-size: 18px; }
.color--theme { color: var(--theme); }

/* ── Conteneurs ─────────────────────────────────────────────────── */

.container { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.container--etroit { max-width: 820px; }
.section { padding: 80px 0; }
.section--sm { padding: 50px 0; }
.section--gris { background: var(--blanc-400); }
.section--lilas { background: var(--lilas); }
.section--encre { background: var(--encre); color: #fff; }
.section__titre { text-align: center; margin-bottom: 45px; }
.section__titre h2 { font-size: 32px; }
.section__titre p { color: var(--gris); font-size: 17px; max-width: 620px; margin: 0 auto; }

.grille { display: grid; gap: 26px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ── En-tête ────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   ⚠️  L'EN-TÊTE EST BLANC — la maquette « Site complet » a tranché.

   La direction Tour 7 posait un bandeau navy ; la maquette finale (Tour 4,
   treize pages) revient à un en-tête blanc, filet #F0EEF6, logo
   « » Hiring notes. » en navy, et garde le navy pour les SURFACES de
   contenu : heros recruteurs/annuaire, bandeaux de chiffres, pied de page.

   ⚠️  76px DE HAUT, ET COLLÉ. La maquette fixe la hauteur ; le padding
   vertical en découle (76 − 2×14 = 48px de zone utile, la taille du CTA).
   ══════════════════════════════════════════════════════════════════ */
.entete {
  background: #fff; position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--violet-gris);
}
.entete__inner {
  max-width: 1340px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 34px;
}

/* Le lien texte « Se connecter » / « Mon espace » */
.entete__lien { color: var(--encre); font-size: 15px; font-weight: 500; white-space: nowrap; }
.entete__lien:hover { color: var(--theme); text-decoration: none; }

/* ── Sélecteur de langue ────────────────────────────────────────────
   ⚠️  La pastille de la maquette est devenue un vrai menu : cinq langues,
       les mêmes mécaniques déroulantes que « Ressources » — :hover à la
       souris, :focus-within au clavier, zéro JavaScript. Le wrapper porte
       AUSSI la classe .nav__groupe : c'est elle qui ouvre le .nav__sous. */
.entete__lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--gris-clair); white-space: nowrap;
  position: relative;
}
.entete__lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--gris-clair);
}
.entete__lang-btn:hover { color: var(--theme); }
/*
  ⚠️  LE MENU S'OUVRE VERS LA GAUCHE, PARCE QUE LE SÉLECTEUR EST AU BORD.

      Il est passé à droite du bouton d'action : ancré à gauche, le panneau
      dépasserait de la fenêtre et le navigateur ajouterait une barre de
      défilement horizontale à toute la page. `right: 0` le fait grandir
      vers l'intérieur.
*/
.entete__lang .nav__sous { left: auto; right: 0; min-width: 180px; }

/* Un cran d'air après le bouton : collé, le drapeau semblait en faire partie. */
.entete__lang--fin { margin-left: 4px; }

/*
  ── Menu des langues ────────────────────────────────────────────────

  ⚠️  UNE GRILLE, PAS UNE SUITE DE MOTS.

      Les codes et les noms sont alignés sur deux colonnes fixes : l'œil
      descend une seule ligne verticale au lieu de suivre des débuts de
      mots décalés. C'est aussi ce qui fait tenir l'état verrouillé au
      même endroit que les autres — il partageait avant ses propres
      garnitures, et son code partait douze pixels à gauche.

  ⚠️  LES NOMS SONT DANS LEUR LANGUE, LE CODE RESTE.

      « Deutsch » se reconnaît là où « Allemand » demande de traduire
      mentalement. Le code à deux lettres reste devant : c'est lui qu'on
      vise quand on connaît déjà le menu.
*/
.entete__lang .nav__langues-menu { min-width: 212px; padding: 6px; }

.lang-item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 14px;
  align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-08);
  font-size: 14px; color: var(--encre-douce);
}
.lang-item__code {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--gris-clair);
}
.lang-item__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/*
  ⚠️  LE DRAPEAU OCCUPE LA COLONNE DU CODE, IL NE S'AJOUTE PAS.

      La grille garde ses trois colonnes : dessin, nom, marqueur. Un
      drapeau EN PLUS du sigle aurait élargi le menu pour redire la même
      chose. Le cadre fixe et le léger trait tiennent les images
      téléversées, dont les proportions varient.
*/
.drapeau {
  display: block; width: 20px; height: 14px;
  border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(17, 17, 34, .12);
}
.lang-item .drapeau { justify-self: center; }
.lang-item--inerte .drapeau { opacity: .45; filter: grayscale(1); }

/* Dans la barre, le drapeau remplace « FR » : même gabarit, sans le sigle. */
.entete__lang-btn .drapeau { width: 21px; height: 15px; }

/*
  ── Drapeaux du pied ────────────────────────────────────────────────

  ⚠️  ILS MÈNENT À L'ACCUEIL DE CHAQUE LANGUE, PAS À LA PAGE TRADUITE.

      Voir le commentaire du gabarit : le pied change de marché, le
      bandeau change de version. La langue courante est marquée et
      non cliquable — un lien vers là où l'on est n'offre rien.
*/
.pied__langues { display: flex; gap: 9px; list-style: none; margin: 0; padding: 0; }
.pied__langue { display: block; line-height: 0; opacity: .62; }
.pied__langue:hover { opacity: 1; }
.pied__langue.is-actif { opacity: 1; }
.pied__langue.is-actif .drapeau { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
.pied__langues .drapeau { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

.entete__lang .nav__sous a.lang-item:hover {
  background: var(--violet-pale); color: var(--theme); text-decoration: none;
}
.lang-item:hover .lang-item__code { color: var(--theme); }

.entete__lang .nav__sous a.lang-item.is-actif {
  background: var(--violet-pale); color: var(--theme); font-weight: 600;
}
.lang-item.is-actif .lang-item__code { color: var(--theme); }
.lang-item__coche { width: 13px; height: 13px; color: var(--theme); }

/*
  ⚠️  VERROUILLÉ, PAS CASSÉ.

      Le cadenas dit ce que le gris seul laisserait deviner : la page
      n'existe pas encore dans cette langue. Il occupe la colonne de la
      coche, donc rien ne bouge d'une ligne à l'autre. Le curseur et le
      `title` complètent — un état qui se voit, se survole et s'explique.
*/
.lang-item--inerte { color: var(--gris-tres); cursor: not-allowed; }
.lang-item--inerte .lang-item__code { color: var(--gris-tres); }
.lang-item__cadenas { width: 12px; height: 12px; color: var(--gris-tres); }

/* Dans le tiroir mobile, les langues deviennent une rangée de liens
   (le menu déroulant de l'entête y est masqué, voir plus bas). */
.nav__langues { display: none; }

.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; color: var(--navy); letter-spacing: -.4px; }
.logo:hover { text-decoration: none; color: var(--navy); }

/* Le guillemet-chevron « » » de la maquette — resserré pour coller au mot. */
.logo__marque { font-size: 20px; letter-spacing: -3px; line-height: 1; }

/* Conservée pour l'espace connecté (header_app.ejs). */
.logo__pastille {
  width: 30px; height: 30px; border-radius: 9px; background: var(--theme);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.logo--pied { color: #fff; }
.logo--pied:hover { color: #fff; }

.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a { color: var(--encre); font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--theme); text-decoration: none; }
.nav a.is-actif { color: var(--theme); font-weight: 700; }

/* ── Menu déroulant « Ressources » ─────────────────────────────────
   ⚠️  SANS JAVASCRIPT : :hover pour la souris, :focus-within pour le
       clavier. Un script qui gère l'ouverture serait un composant de plus
       à casser — et le lien parent mène de toute façon à /articles. */
.nav__groupe { position: relative; }
.nav__parent { display: inline-flex; align-items: center; gap: 5px; }
.nav__sous {
  position: absolute; top: 100%; left: -14px; min-width: 240px;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-12);
  box-shadow: var(--ombre-mid); padding: 8px;
  display: none; flex-direction: column; z-index: 70;
}
.nav__sous a {
  padding: 9px 12px; border-radius: var(--r-06);
  font-size: 14px; font-weight: 500; color: var(--encre-douce);
}
.nav__sous a:hover { background: var(--violet-pale); color: var(--theme); }
.nav__groupe:hover .nav__sous,
.nav__groupe:focus-within .nav__sous { display: flex; }

.entete__actions { display: flex; align-items: center; gap: 18px; }
.burger { display: none; }

/* ── Boutons ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* ⚠️  12px 22px / 14.5px / 600 — les valeurs de la maquette.
         La bordure passe de 2px à 1px : à 2px, le bouton fantôme paraît
         plus lourd que le bouton plein posé à côté, alors que c'est
         l'inverse qui est voulu. */
  padding: 12px 22px; border-radius: var(--pill); border: 1px solid transparent;
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.btn:hover { text-decoration: none; }

.btn--theme { background: var(--theme); border-color: var(--theme); color: #fff; }
.btn--theme:hover { background: var(--theme-hover); border-color: var(--theme-hover); color: #fff; }

.btn--outline { background: #fff; border-color: var(--theme); color: var(--theme); }
.btn--outline:hover { background: var(--rose-pale); color: var(--theme); }

.btn--bleu { background: var(--bleu); border-color: var(--bleu); color: #fff; font-size: 14px; padding: 8px 18px; }
.btn--bleu:hover { background: var(--bleu-hover); border-color: var(--bleu-hover); color: #fff; }

.btn--blanc { background: #fff; border-color: #fff; color: var(--theme); }
.btn--blanc:hover { background: rgba(255,255,255,.85); color: var(--theme); }

.btn--fantome { background: transparent; border-color: var(--trait); color: var(--encre); }
.btn--fantome:hover { border-color: var(--gris-tres); background: var(--blanc-400); }

/* Alias historique — l'espace connecté et le backoffice l'emploient encore. */
.btn--ghost { background: transparent; border-color: var(--trait); color: var(--encre); }
.btn--ghost:hover { border-color: var(--gris-tres); background: var(--blanc-400); }

.btn--danger { background: transparent; border-color: var(--alerte); color: var(--alerte); }
.btn--danger:hover { background: var(--alerte-pale); }

.btn--lg { padding: 14px 32px; font-size: 16px; }
.btn--sm { padding: 6px 14px; font-size: 13px; border-width: 1px; }
.btn--bloc { width: 100%; }

.lien-fleche { font-weight: 600; font-size: 15px; }
.lien-fleche::after { content: ' →'; }
.lien-retour { display: inline-block; color: var(--gris); font-size: 14px; margin-bottom: 10px; }
.lien-discret { color: var(--gris); font-size: 14px; }
.inline { display: inline; }

/* ── Hero ───────────────────────────────────────────────────────── */

.hero { background: var(--lilas); padding: 70px 0 80px; }
.hero__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 50px; align-items: center; }
/* ⚠️  LES TAILLES DE HERO SONT CANONIQUES, PAS ESTHÉTIQUES.
       Le design system fixe trois hauteurs de H1 selon le type de page :
       s-60 pour le hero d'accueil, s-40 pour un hero de page interne, s-34
       pour un en-tête de liste. Un 44 px « qui rendait bien » place la page
       entre deux niveaux — assez proche pour paraître juste, assez loin pour
       que l'accueil ne pèse plus autant que celui du site existant. */
.hero h1 { font-size: 60px; margin-bottom: 18px; }

/* Sous-titre du hero d'accueil : `.p-hero2` du design system. */
.hero__accroche { font-size: 24px; color: var(--encre-douce); margin-top: 25px; margin-bottom: 26px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

.hero--court { padding: 48px 0 42px; }
.hero--court h1 { font-size: 40px; margin-bottom: 6px; }   /* s-40 : hero de page interne */
.hero--court p { color: var(--gris); margin: 0; }

.preuve { display: flex; align-items: center; gap: 12px; }
.preuve__avatars { display: flex; }
.preuve__avatars span {
  width: 42px; height: 42px; border-radius: 50%; background: #fff;
  border: 2px solid var(--lilas); margin-left: -10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--theme);
}
.preuve__avatars span:first-child { margin-left: 0; }
.preuve__texte { font-size: 14px; color: var(--encre-douce); }
.etoiles { color: var(--etoile); letter-spacing: 1px; }

/* Carte formulaire du hero */
.carte-form-hero {
  /* 40px 44px : le padding de carte de la maquette. À 30px, le
     formulaire du hero paraissait à l'étroit contre le titre. */
  background: #fff; border-radius: var(--r-20); padding: 40px 44px;
  box-shadow: var(--ombre-mid);
}
.carte-form-hero h2 { font-size: 22px; margin-bottom: 4px; }
.carte-form-hero > p { color: var(--gris); font-size: 15px; margin-bottom: 20px; }

/* ── Bande de chiffres ──────────────────────────────────────────── */

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 30px; text-align: center; }
.chiffre__valeur { display: block; font-size: 40px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.1; }
.chiffre__libelle { display: block; font-size: 15px; opacity: .75; margin-top: 4px; }
.section--encre .chiffre__valeur { color: #fff; }

/* ── Cartes ─────────────────────────────────────────────────────── */

/* ⚠️  RAYON 20, OMBRE PORTÉE, ET PAS DE BORDURE AU REPOS.

       La maquette sépare les cartes du fond par l'OMBRE, pas par un
       trait. Garder les deux donne un contour doublé, très visible sur
       les grilles denses (liste d'offres, annuaire). La bordure ne
       revient qu'au survol, en magenta, pour marquer la cible. */
.carte {
  background: #fff; border: 1px solid transparent; border-radius: var(--r-20);
  padding: 26px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--ombre);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.carte:hover { border-color: var(--theme); box-shadow: var(--ombre-mid); }
.carte__titre { margin: 0; font-size: 20px; }
.carte__titre a { color: var(--encre); }
.carte__titre a:hover { color: var(--theme); text-decoration: none; }
.carte__soustitre { margin: 0; color: var(--gris); font-size: 15px; }
.carte__meta { margin: 0; color: var(--gris-clair); font-size: 13px; }
.carte__extrait { margin: 0; color: var(--gris); font-size: 15px; }
.carte__salaire { margin: 0; font-weight: 700; font-size: 16px; }
.carte__honoraires { margin: 0; color: var(--succes); font-size: 15px; font-weight: 600; }
.carte__bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.carte__date { color: var(--gris-tres); font-size: 13px; }

.carte-icone { text-align: left; }
.carte-icone__ico {
  width: 54px; height: 54px; border-radius: var(--r-12); background: var(--rose-pale);
  color: var(--theme); display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; margin-bottom: 16px;
}
.carte-icone h3 { font-size: 20px; margin-bottom: 8px; }
.carte-icone p { color: var(--gris); font-size: 15px; margin: 0; }

.etape__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--theme);
  color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 14px;
}

/* Cartes article */
.carte--article { padding: 0; overflow: hidden; }
.carte--article > *:not(.carte__visuel) { margin-left: 24px; margin-right: 24px; }
.carte--article > *:last-child { margin-bottom: 24px; }
.carte__visuel { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--blanc-400); }
.carte__visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte--article .carte__meta:first-child,
.carte--article .carte__titre:first-child { margin-top: 24px; }

/* ── Étiquettes et badges ───────────────────────────────────────── */

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.etiquette {
  padding: 4px 12px; border-radius: var(--pill); background: var(--blanc-400);
  border: 1px solid var(--trait); font-size: 13px; color: var(--encre-douce);
}
.etiquette--accent { background: var(--rose-pale); border-color: var(--rose-pale); color: var(--theme); }

.pill {
  display: inline-block; padding: 7px 16px; border-radius: var(--pill);
  background: #F7F8F9; color: var(--encre-douce); font-size: 14px; font-weight: 500;
}
.pill:hover { background: var(--theme); color: #fff; text-decoration: none; }
.pill.is-actif { background: var(--theme); color: #fff; }

.badge { display: inline-block; padding: 4px 12px; border-radius: var(--pill); font-size: 13px; font-weight: 600; }
.badge--waiting, .badge--draft    { background: var(--attente-pale); color: var(--attente); }
.badge--accepted, .badge--online  { background: var(--succes-pale); color: var(--succes); }
.badge--refused, .badge--canceled { background: var(--alerte-pale); color: var(--alerte); }
.badge--hired    { background: var(--theme); color: #fff; }
.badge--offline, .badge--archived { background: var(--blanc-400); color: var(--gris); }
.badge--accent, .badge--info      { background: var(--rose-pale); color: var(--theme); }
a.badge:hover { text-decoration: none; opacity: .85; }

/* ── Formulaires ────────────────────────────────────────────────── */

.formulaire { display: flex; flex-direction: column; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.champ > span, .champ > legend { font-size: 14px; font-weight: 600; color: var(--encre-douce); }
.champ small { font-weight: 400; color: var(--gris-tres); }

.champ input[type="text"], .champ input[type="email"], .champ input[type="password"],
.champ input[type="url"], .champ input[type="tel"], .champ input[type="number"],
.champ input[type="date"], .champ input[type="datetime-local"], .champ input[type="search"],
.champ input[type="file"], .champ select, .champ textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--trait);
  border-radius: var(--r-06); font: inherit; font-size: 15px;
  color: var(--encre); background: #fff;
}
.champ textarea { resize: vertical; min-height: 100px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--theme); outline-offset: 1px; border-color: var(--theme);
}

.champ--case { flex-direction: row; align-items: flex-start; gap: 9px; }
.champ--case input { margin-top: 4px; flex: 0 0 auto; }
.champ--case span { font-size: 15px; font-weight: 400; color: var(--encre); }

.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }

/* Choix d'espace : entreprise / cabinet / les deux */
.choix-espaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choix-espace {
  border: 2px solid var(--trait); border-radius: var(--r-10); padding: 14px;
  cursor: pointer; display: block; transition: border-color .15s ease, background-color .15s ease;
}
.choix-espace:hover { border-color: var(--theme); }
.choix-espace input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix-espace input:checked ~ .choix-espace__corps { color: var(--theme); }
.choix-espace:has(input:checked) { border-color: var(--theme); background: var(--rose-pale); }
.choix-espace__titre { display: block; font-weight: 700; font-size: 15px; }
.choix-espace__note { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; }

.carte-form { background: #fff; border: 1px solid var(--trait); border-radius: var(--r-12); padding: 30px; }
.carte-form__titre { font-size: 17px; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--trait); }
.carte-form__titre:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.carte-form__note { color: var(--gris); font-size: 13px; margin: 0; }

.barre-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--trait); }

.filtres {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-12);
  padding: 22px; display: flex; flex-direction: column; gap: 16px;
  align-self: start; position: sticky; top: 90px;
}
.filtres__titre { font-size: 15px; margin: 0; }
.filtres--ligne { flex-direction: row; flex-wrap: wrap; align-items: center; position: static; margin-bottom: 24px; }
.filtres--ligne input, .filtres--ligne select {
  padding: 9px 13px; border: 1px solid var(--trait); border-radius: var(--r-06);
  font: inherit; font-size: 15px; min-width: 170px;
}
.avec-filtres { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 34px; padding: 45px 0 70px; align-items: start; }

/* ── Alertes ────────────────────────────────────────────────────── */

.alerte {
  max-width: var(--largeur); margin: 16px auto; padding: 13px 18px;
  border-radius: var(--r-06); font-size: 15px; border: 1px solid transparent;
}
.alerte--succes { background: var(--succes-pale); color: var(--succes); border-color: #C8E9D8; }
.alerte--erreur { background: var(--alerte-pale); color: var(--alerte); border-color: #F6CFCC; }
.alerte--info   { background: var(--violet-pale); color: var(--theme-link); border-color: var(--violet-tete); }

/* ── Plateforme ─────────────────────────────────────────────────── */

.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 34px; max-width: var(--largeur); margin: 0 auto; padding: 30px 20px 70px; align-items: start; }
.shell__main { min-width: 0; }

.lateral { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; }
.lateral__nav { display: flex; flex-direction: column; gap: 2px; }
.lateral__nav a { padding: 9px 13px; border-radius: var(--r-06); color: var(--encre-douce); font-size: 15px; font-weight: 500; }
.lateral__nav a:hover { background: var(--blanc-400); text-decoration: none; }
.lateral__nav a.is-actif { background: var(--rose-pale); color: var(--theme); }

/* Sélecteur d'espace : le composant qui matérialise le double rôle */
.bascule-espace { background: var(--violet-pale); border: 1px solid var(--violet-tete); border-radius: var(--r-10); padding: 14px; }
.bascule-espace__titre { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--gris-clair); margin-bottom: 8px; }
.bascule-espace__options { display: flex; gap: 4px; background: #fff; border-radius: var(--r-06); padding: 3px; }
.bascule-espace__options a, .bascule-espace__options button {
  flex: 1; padding: 7px 10px; border: 0; background: transparent; border-radius: 4px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--gris);
  cursor: pointer; text-align: center;
}
.bascule-espace__options a:hover { background: var(--blanc-400); text-decoration: none; }
.bascule-espace__options .is-actif { background: var(--theme); color: #fff; }

.encart-attente { background: var(--attente-pale); border-radius: var(--r-10); padding: 14px; font-size: 13px; color: var(--attente); }
.encart-attente p { margin: 5px 0 0; }


.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 30px; }
.compteur {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-12);
  padding: 18px; display: flex; flex-direction: column; gap: 2px; color: var(--encre);
}
.compteur:hover { text-decoration: none; border-color: var(--theme); }
.compteur--accent { border-color: var(--theme); background: var(--rose-pale); }
.compteur__valeur { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -1px; }   /* s-32 */
.compteur__libelle { font-size: 13px; color: var(--gris); }

.panneau { background: #fff; border: 1px solid var(--trait); border-radius: var(--r-12); padding: 26px; margin-bottom: 24px; }
.panneau--accent { border-color: var(--theme); }
.panneau__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.panneau h2 { font-size: 20px; }
.panneau h3 { font-size: 16px; margin-top: 20px; }

.onglets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 24px; border-bottom: 1px solid var(--trait); }
.onglets a { padding: 10px 16px; color: var(--gris); font-size: 15px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a:hover { text-decoration: none; color: var(--encre); }
.onglets a.is-actif { color: var(--theme); border-bottom-color: var(--theme); }

.fil-etapes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.fil-etapes__item { display: flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--trait); border-radius: var(--pill); color: var(--gris); font-size: 13px; }
.fil-etapes__item:hover { text-decoration: none; border-color: var(--theme); }
.fil-etapes__item.is-actif { background: var(--theme); border-color: var(--theme); color: #fff; }
.fil-etapes__num { font-weight: 700; }

/* ── Tableaux et listes ─────────────────────────────────────────── */

.tableau { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--trait); border-radius: var(--r-12); overflow: hidden; font-size: 15px; }
.tableau th { text-align: left; padding: 12px 15px; background: var(--violet-tete); font-size: 13px; font-weight: 700; color: var(--encre-douce); border-bottom: 1px solid var(--trait); }
.tableau td { padding: 13px 15px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--violet-pale); }
.tableau__lien { color: var(--encre); font-weight: 600; }
.tableau__lien:hover { color: var(--theme); }
.tableau__meta { display: block; color: var(--gris-tres); font-size: 13px; }
.tableau__actions { display: flex; gap: 5px; flex-wrap: wrap; }

.liste-lignes { list-style: none; padding: 0; margin: 0; }
.ligne { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.ligne:last-child { border-bottom: 0; }
.ligne__principal { flex: 1; min-width: 0; color: var(--encre); }
.ligne__principal:hover { text-decoration: none; }
.ligne__principal strong { display: block; font-weight: 600; }
.ligne__meta { display: block; color: var(--gris); font-size: 13px; }
.ligne__date { color: var(--gris-tres); font-size: 13px; white-space: nowrap; }

.liste-simple { list-style: none; padding: 0; margin: 0 0 16px; font-size: 15px; }
.liste-simple li { padding: 7px 0; border-bottom: 1px solid var(--trait); display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.liste-check { list-style: none; padding: 0; margin: 0 0 22px; }
.liste-check li { padding-left: 28px; position: relative; margin-bottom: 10px; color: var(--encre-douce); }
.liste-check li::before {
  content: '✓'; position: absolute; left: 0; top: 1px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--rose-pale); color: var(--theme);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.liste-nav { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 2px; }
.liste-nav a { display: block; padding: 8px 12px; border-radius: var(--r-06); color: var(--encre-douce); font-size: 15px; }
.liste-nav a:hover { background: var(--blanc-400); text-decoration: none; }
.liste-nav a.is-actif { background: var(--rose-pale); color: var(--theme); font-weight: 600; }
.compte { color: var(--gris-tres); font-size: 13px; }

.paires { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 15px; }
.paires dt { color: var(--gris); }
.paires dd { margin: 0; }

/* ── Fiches ─────────────────────────────────────────────────────── */

.fiche__entete { background: var(--lilas); padding: 45px 0; }
.fiche__societe { color: var(--gris); margin-bottom: 14px; }
.fiche__salaire { font-size: 20px; font-weight: 700; margin: 16px 0 20px; }
.fiche__corps { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 44px; padding: 45px 0 70px; align-items: start; }
.fiche__principal section { margin-bottom: 32px; }
.fiche__cote { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }

.encart { background: var(--violet-pale); border: 1px solid var(--violet-tete); border-radius: var(--r-12); padding: 22px; }
.encart h3 { font-size: 16px; margin-bottom: 12px; }
.encart__note { font-size: 13px; color: var(--gris); margin: 14px 0 0; }
.souligne-honoraires { color: var(--succes); font-weight: 700; }

/* ── Accordéon ──────────────────────────────────────────────────── */

.accordeon { display: flex; flex-direction: column; gap: 10px; }
.accordeon__item { background: #fff; border: 1px solid var(--trait); border-radius: var(--r-12); padding: 18px 22px; }
.accordeon__item summary { cursor: pointer; font-weight: 600; font-size: 16px; }
.accordeon__item[open] { border-color: var(--theme); }
.accordeon__corps { padding-top: 12px; color: var(--gris); }
.accordeon__corps p { margin: 0; }

/* ── Discussion ─────────────────────────────────────────────────── */

.fil { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
.fil__msg { padding: 13px 18px; border-radius: var(--r-12); max-width: 78%; }
.fil__msg--moi { background: var(--rose-pale); align-self: flex-end; }
.fil__msg--autre { background: var(--blanc-400); align-self: flex-start; }
.fil__msg p { margin: 0; font-size: 15px; }
.fil__entete { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; font-size: 12.5px; color: var(--gris); }

/* ── États vides, pagination ────────────────────────────────────── */

.vide { text-align: center; padding: 50px 24px; background: var(--blanc-400); border-radius: var(--r-12); }
.vide h2, .vide h3 { font-size: 20px; margin-bottom: 6px; }   /* s-20 */
.vide p { color: var(--gris); margin-bottom: 18px; }
.vide-inline { color: var(--gris-tres); font-style: italic; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; flex-wrap: wrap; }
.pagination__etat { color: var(--gris); font-size: 14px; }
.pagination__lien { padding: 8px 16px; border: 1px solid var(--trait); border-radius: var(--pill); font-size: 14px; }
.pagination__lien:hover { text-decoration: none; border-color: var(--theme); }

/* ── Authentification ───────────────────────────────────────────── */

.page-auth { display: flex; justify-content: center; padding: 50px 20px 80px; background: var(--blanc-400); min-height: 70vh; }
.carte-auth { width: 100%; max-width: 470px; background: #fff; border-radius: var(--r-12); padding: 36px; box-shadow: var(--ombre-mid); }
.carte-auth--large { max-width: 640px; }
.carte-auth h1 { font-size: 24px; }   /* s-24 */
.carte-auth__note { color: var(--gris); font-size: 15px; }
.carte-auth__pied { margin: 20px 0 0; text-align: center; font-size: 15px; color: var(--gris); }

.page-erreur { text-align: center; padding: 80px 20px; }
.page-erreur h1 { font-size: 40px; color: var(--theme); }   /* s-40 */
.page-erreur__detail { display: inline-block; text-align: left; background: var(--blanc-400); padding: 16px; border-radius: var(--r-06); font-size: 13px; overflow-x: auto; max-width: 100%; }

/* ── Pied de page ───────────────────────────────────────────────── */

/* ⚠️  CINQ COLONNES, GRILLE FIXE DE LA MAQUETTE : marque large, trois
       colonnes de liens, colonne contact un peu plus large. `auto-fit`
       donnait des colonnes égales — la marque et le contact étouffaient. */
.pied { background: var(--encre); color: #fff; padding: 70px 0 0; margin-top: 60px; }
.pied__inner {
  max-width: var(--largeur); margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 30px;
}
/* ⚠️  L'ÉCART SE RESSERRE PARCE QUE LES LIENS ONT LEUR PROPRE RESPIRATION.
       Le survol de l'en-tête pose un rembourrage vertical permanent sur
       chaque lien (6px haut et bas) ; laissé à 9px, l'écart de colonne
       s'additionnait et la liste s'étirait d'un tiers. Le rendu à l'œil
       reste celui de la maquette. */
.pied__col { display: flex; flex-direction: column; gap: 0; }
.pied__col h4 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.pied__lien { color: rgba(255, 255, 255, .72); font-size: 14.5px; }
.pied__lien:hover { color: #fff; text-decoration: none; }

/* ⚠️  LA COLONNE DES RÉSEAUX EST PLUS ÉTROITE QUE CELLES DE LIENS.
       Elle ne porte que des icônes : lui laisser la même largeur qu'une
       colonne de six libellés créerait un vide à droite du pied, comme si
       une rubrique avait été oubliée. */
.pied__col--reseaux { flex: 0 1 auto; }
.pied__puce { color: rgba(255, 255, 255, .45); margin-right: 2px; }
.pied__note { color: rgba(255, 255, 255, .72); font-size: 14.5px; line-height: 1.7; margin: 12px 0 0; }

/* `gap: 0` sur la colonne : les blocs qui ne sont pas des liens reprennent
   leur écart eux-mêmes, sinon ils se collent au courriel. */
/*
  ⚠️  LES ICÔNES PASSENT À LA LIGNE PLUTÔT QUE DE DÉBORDER.

      Sept réseaux dans une colonne du pied ne tiennent pas sur une ligne :
      sans `wrap`, la dernière sortait de la colonne et se glissait sous la
      voisine. `wrap` les range sur deux rangs, ce qui reste lisible.
*/
.pied__reseaux { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 17px; }
.pied__reseaux a { color: #fff; display: inline-flex; }
.pied__reseaux a:hover { color: var(--theme-clair); }

/* Le badge « conforme RGPD » de la maquette. */
.pied__rgpd {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  align-self: flex-start; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-08); padding: 7px 11px;
}

.pied__bas {
  max-width: var(--largeur); margin: 46px auto 0; padding: 22px 20px 26px;
  border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); font-size: 13px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* `gap` resserré : chaque lien porte désormais 12px de rembourrage
   horizontal, qui s'ajoutait aux 22px et écartait la ligne du double. */
.pied__bas-liens { display: flex; gap: 0; flex-wrap: wrap; margin-left: 12px; }
.pied__bas-liens a { color: rgba(255, 255, 255, .6); }
.pied__bas-liens a:hover { color: #fff; }

/* ── Contenu éditorial ──────────────────────────────────────────── */

.centre { text-align: center; }
.bandeau__intro { color: var(--gris); max-width: 70ch; }
.image-large { width: 100%; border-radius: var(--r-16); display: block; }
.legende { color: var(--gris); font-size: 13px; margin-top: 10px; text-align: center; }

.article-corps, .contenu-libre { font-size: 17px; line-height: 1.8; }
.article-corps h2, .contenu-libre h2 { margin-top: 34px; font-size: 24px; }
.article-corps h3, .contenu-libre h3 { margin-top: 26px; font-size: 20px; }
.article-corps img, .contenu-libre img { border-radius: var(--r-16); margin: 22px 0; }
.article-corps ul, .article-corps ol, .contenu-libre ul, .contenu-libre ol { padding-left: 22px; margin-bottom: 20px; }
.article-corps li, .contenu-libre li { margin-bottom: 7px; }
.article-corps blockquote, .contenu-libre blockquote {
  margin: 26px 0; padding: 16px 22px; border-left: 3px solid var(--theme);
  background: var(--violet-pale); border-radius: 0 var(--r-06) var(--r-06) 0;
}
.article-corps table, .contenu-libre table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
.article-corps th, .contenu-libre th { background: var(--violet-tete); }
.article-corps th, .article-corps td, .contenu-libre th, .contenu-libre td {
  padding: 10px 14px; border: 1px solid var(--trait); text-align: left;
}
.article-corps pre, .contenu-libre pre { background: var(--blanc-400); padding: 18px; border-radius: var(--r-06); overflow-x: auto; font-size: 14px; }

/* ── Backoffice ─────────────────────────────────────────────────── */

.backoffice { background: var(--blanc-400); }
/* ⚠️  L'ANCIENNE COQUILLE DU BACKOFFICE A ÉTÉ RETIRÉE D'ICI.

       `app.css` portait encore `.bo-header*`, `.bo-main`, `.bo-section`,
       `.bo-connexion` et surtout `.bo-carte { max-width: 420px }` — les
       styles d'avant `backoffice.css`. Les deux feuilles étant chargées
       ensemble dans le backoffice, la seconde redéfinissait le fond, le
       rayon et le padding de `.bo-carte`… mais PAS `max-width`, qu'elle ne
       mentionne pas. La règle survivante plafonnait donc TOUTES les cartes
       du backoffice à 420 pixels : les réglages, les formulaires d'édition,
       les panneaux latéraux. Un écran de 27 pouces affichait une colonne de
       champs large comme un téléphone, sans que rien n'explique pourquoi.

       C'est le danger d'un même sélecteur dans deux systèmes : ce qui est
       redéfini est écrasé, ce qui ne l'est pas subsiste — et la propriété
       oubliée est justement celle qu'on ne pense pas à chercher.

       Les classes encore employées (`.bo-connexion`, `.bo-connexion__carte`,
       `.bo-carte`) vivent désormais UNIQUEMENT dans `backoffice.css`.
       `.bloc-edit*`, ci-dessous, reste ici : il sert à l'éditeur de blocs
       de page et n'a pas d'équivalent là-bas. */

.bloc-edit { border: 1px solid var(--trait); border-radius: var(--r-12); margin-bottom: 12px; background: #fff; }
.bloc-edit > summary { padding: 14px 18px; cursor: pointer; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--violet-pale); border-radius: var(--r-12) var(--r-12) 0 0; }
.bloc-edit[open] > summary { border-bottom: 1px solid var(--trait); }
.bloc-edit__titre { color: var(--gris); font-size: 14px; }
.bloc-edit > form, .bloc-edit > .barre-actions { padding: 18px; }

.mono, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
code { background: var(--blanc-400); padding: 2px 6px; border-radius: 4px; }
.etroit { max-width: 90px; }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.media { margin: 0; background: #fff; border: 1px solid var(--trait); border-radius: var(--r-12); overflow: hidden; }
.media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--blanc-400); }
.media__doc { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: var(--blanc-400); color: var(--gris); font-weight: 700; letter-spacing: 1px; }
.media figcaption { padding: 12px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.media__nom { color: var(--gris); word-break: break-all; }
.media figcaption input[type="text"] { width: 100%; padding: 6px 9px; border: 1px solid var(--trait); border-radius: var(--r-06); font: inherit; font-size: 13px; }

/* Import / export JSON */
.echange { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.echange__bloc { background: var(--violet-pale); border: 1px dashed var(--theme); border-radius: var(--r-12); padding: 20px; }
.echange__bloc h3 { font-size: 16px; margin-bottom: 6px; }
.echange__bloc p { font-size: 13px; color: var(--gris); margin-bottom: 14px; }
.rapport { background: #fff; border: 1px solid var(--trait); border-radius: var(--r-06); padding: 14px; font-size: 13px; margin-top: 14px; }
.rapport ul { margin: 8px 0 0; padding-left: 20px; }
.rapport li { margin-bottom: 3px; }

/* ════════════════════════════════════════════════════════════════════
   COMPOSANTS COMPLÉMENTAIRES

   ⚠️  CES CLASSES MANQUAIENT, ET LEUR ABSENCE NE PROVOQUAIT AUCUNE ERREUR.

       Une classe sans règle CSS rend simplement l'élément sans style : le
       texte colle aux bords, le bouton perd sa couleur. Rien dans les
       journaux, rien à la validation — on ne s'en aperçoit qu'en regardant
       la page. `npm run test:design` les détecte maintenant.
   ════════════════════════════════════════════════════════════════════ */

.site { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1; min-height: 60vh; }

/* Conteneur étroit — texte long, formulaires */
.container--etroit { max-width: 820px; }

/* Titre de section avec un lien aligné à droite */
.section__titre--ligne {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; text-align: left; flex-wrap: wrap;
}

/* Hero centré : le bloc « héros » d'une page composée */
.hero--centre { text-align: center; }
.hero__titre { font-size: 40px; margin-bottom: 18px; }   /* s-40 : page interne */
.hero__intro { color: var(--gris); max-width: 70ch; }
.hero__intro p { margin: 6px 0; }

/* Colonne de résultats à droite des filtres */
.resultats { min-width: 0; }

.deux-colonnes {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
}

/* Chiffre clé du bandeau sombre */
.chiffre { display: flex; flex-direction: column; gap: 4px; }

/* Étape numérotée — le pattern « 3 arguments » de la maquette */
.etape { text-align: left; }
.etape h3 { font-size: 20px; margin-bottom: 8px; }   /* s-20 */
.etape p { color: var(--gris); font-size: 15px; margin: 0; }

/* Fiche : offre publique, cabinet de l'annuaire */
.fiche { display: block; }
.fiche__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* Carte d'offre : l'en-tête porte le statut à droite du titre */
.carte--offre { gap: 12px; }
.carte__haut {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

/* ⚠️  `.bo-xs` et `.bo-muted` viennent du backoffice mais servent aussi dans
       l'espace connecté (vue Toolbox). Déclarées ici, elles sont disponibles
       partout — plutôt que recopiées dans deux feuilles qui divergeraient. */
.bo-xs { font-size: 13px; }
.bo-muted { color: var(--gris); }

/* ── Adaptatif ──────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .hero__grille { grid-template-columns: 1fr; gap: 34px; }
  /* ⚠️  32px, c'est le palier TABLETTE documenté (mobile : 28px, plus bas).
         Un 34 px ici recouperait le palier « en-tête de liste » et rendrait
         un hero d'accueil de tablette identique à un titre de page de blog. */
  .hero h1 { font-size: 32px; }
  .hero__accroche { font-size: 20px; }
  .avec-filtres, .shell, .fiche__corps { grid-template-columns: 1fr; }
  .filtres, .lateral, .fiche__cote { position: static; }
  .tableau { display: block; overflow-x: auto; white-space: nowrap; }
  .pied__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 25px !important; }
  h3 { font-size: 23px !important; }
  .section { padding: 50px 0; }

  .burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    width: 42px; height: 38px; margin-left: auto; background: transparent;
    border: 1px solid var(--trait); border-radius: var(--r-06); cursor: pointer;
  }
  .burger__barre { display: block; height: 2px; width: 18px; margin: 0 auto; background: var(--encre); position: relative; }
  .burger__barre::before, .burger__barre::after {
    content: ''; display: block; height: 2px; width: 18px; background: var(--encre); position: absolute;
  }
  .burger__barre::before { top: -6px; }
  .burger__barre::after { top: 6px; }

  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch; background: #fff;
    border-bottom: 1px solid var(--trait); padding: 8px 20px 16px;
  }
  .nav.is-ouvert { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--trait); }

  .entete__inner { position: relative; flex-wrap: wrap; }
  .entete__actions { margin-left: 0; width: 100%; padding-top: 10px; }
  .entete__actions .btn { flex: 1; }
  .fil__msg { max-width: 94%; }
  .pied__inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ENCART SPONSORISÉ

   ⚠️  IL DOIT SE DISTINGUER DU CONTENU ÉDITORIAL.

       Un encart publicitaire qui imite parfaitement un article est une
       pratique commerciale trompeuse (L121-1 du code de la consommation),
       et Google la traite comme du contenu trompeur.

       D'où le fond distinct, la bordure, et l'étiquette « Sponsorisé » —
       qui n'est pas discrète par accident : elle doit se lire.
   ════════════════════════════════════════════════════════════════════ */

.encart-sponso {
  border: 1px solid var(--trait);
  border-radius: var(--r-12);
  background: var(--violet-pale);
  padding: 20px 22px;
  margin: 32px 0;
}

.encart-sponso__etiquette {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 12px;
}

.encart-sponso__corps { display: flex; gap: 18px; align-items: flex-start; }

.encart-sponso__logo {
  flex: none;
  width: 72px; height: 72px;
  border-radius: var(--r-10);
  background: #fff;
  border: 1px solid var(--trait);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* `contain` et pas `cover` : un logo recadré perd sa lisibilité, et
   l'annonceur le remarque avant nous. */
.encart-sponso__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.encart-sponso__texte { flex: 1; min-width: 0; }
.encart-sponso__titre { font-size: 18px; margin: 0 0 6px; }
.encart-sponso__description {
  font-size: 15px; color: var(--encre-douce); margin: 0 0 14px;
  /* Deux lignes maximum : au-delà, l'encart concurrence l'article. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dans la colonne latérale d'une fiche, l'espace est plus étroit. */
.fiche__cote .encart-sponso { margin: 0; padding: 18px; }
.fiche__cote .encart-sponso__corps { flex-direction: column; gap: 12px; }
.fiche__cote .encart-sponso__logo { width: 56px; height: 56px; }

@media (max-width: 575px) {
  .encart-sponso__corps { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════
   SOMMAIRE FLOTTANT

   ⚠️  `position: fixed` EN BAS À GAUCHE, ET UN `z-index` MODESTE.

       L'en-tête est en `z-index: 60` et reste collé en haut. Un sommaire
       au-dessus recouvrirait la navigation quand on remonte — donc
       exactement au moment où on cherche à en sortir.
   ════════════════════════════════════════════════════════════════════ */

.sommaire {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 40;
  max-width: min(340px, calc(100vw - 40px));
}

/* Le bouton fermé
   ⚠️  MAGENTA, PAS LA COULEUR D'ENCRE.
       La règle du design system est explicite : tout est magenta sauf les
       deux emplacements bleus (CTA du menu et bandeaux). Un bouton flottant
       en #22223B ne serait pas « une variante », ce serait un troisième
       accent — celui qu'on remarque au bout de deux pages sans savoir dire
       pourquoi ça jure.
   ⚠️  PILL 20px, comme tous les boutons de la vitrine. */
.sommaire__bouton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--pill);
  background: var(--theme);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(34, 34, 59, .22);
  list-style: none;
  user-select: none;
}
/* Retire le triangle natif, sur les deux familles de moteurs. */
.sommaire__bouton::-webkit-details-marker { display: none; }
.sommaire__bouton::marker { content: ''; }

.sommaire__bouton:hover { background: var(--theme-hover); }
.sommaire__bouton:focus-visible { outline: 3px solid var(--theme); outline-offset: 3px; }

.sommaire__ico { font-size: 13px; line-height: 1; }
.sommaire__compte {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ouvert : le pill se carre en haut du panneau. */
.sommaire[open] .sommaire__bouton {
  background: var(--theme-hover);
  border-radius: var(--r-12) var(--r-12) 0 0;
  width: 100%;
}

/* Le panneau */
.sommaire__panneau {
  background: #fff;
  border: 1px solid var(--trait);
  border-top: 0;
  border-radius: 0 0 var(--r-12) var(--r-12);
  box-shadow: 0 10px 34px rgba(34, 34, 59, .16);
  /* ⚠️  Hauteur bornée : un article à trente titres ferait sortir la liste
         de l'écran par le haut, et les premières entrées deviendraient
         inatteignables. */
  max-height: min(56vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sommaire__liste { list-style: none; margin: 0; padding: 10px 0; counter-reset: sommaire; }

.sommaire__item a {
  display: block;
  padding: 8px 18px;
  color: var(--encre-douce);
  font-size: 15px;   /* p-sm */
  line-height: 1.4;
  border-left: 3px solid transparent;
}
.sommaire__item a:hover {
  background: var(--violet-pale);
  color: var(--theme);
  text-decoration: none;
}
.sommaire__item--h3 a {
  padding-left: 34px;
  font-size: 14px;   /* p-socialproof — le plus petit pas documenté */
  color: var(--gris);
}

/* Section en cours de lecture — posé par app.js */
.sommaire__item a.est-lu {
  border-left-color: var(--theme);
  background: var(--rose-pale);
  color: var(--theme);
  font-weight: 600;
}

/* ⚠️  DÉCALAGE POUR L'EN-TÊTE COLLÉ.
       Sans `scroll-margin-top`, cliquer une entrée amène le titre pile sous
       la barre de navigation, qui le recouvre : on croit que le lien est
       cassé. */
.article-corps h2,
.article-corps h3,
.contenu-libre h2,
.contenu-libre h3 { scroll-margin-top: 90px; }

@media (max-width: 767px) {
  .sommaire { left: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
  .sommaire__panneau { max-height: 48vh; }
  /* Sur un petit écran, le libellé prend la place du contenu : l'icône et le
     compteur suffisent à comprendre. */
  .sommaire:not([open]) .sommaire__label { display: none; }
}

@media print {
  /* Une bulle flottante à l'impression, c'est un rectangle noir au milieu
     du texte. */
  .sommaire { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   CARTE AUTEUR
   ════════════════════════════════════════════════════════════════════ */

.carte-auteur {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--violet-pale);
  border-radius: var(--r-16);
  padding: 26px 28px;
  margin: 40px 0 0;
}

.carte-auteur__photo {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.carte-auteur__photo--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;   /* s-22 */
  font-weight: 700;
  color: var(--theme);
  border: 2px solid #fff;
}

.carte-auteur__corps { min-width: 0; }
.carte-auteur__titre { font-size: 20px;   /* s-20 w-700, comme un titre de carte blog */ margin: 0 0 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.carte-auteur__role { font-size: 14px; color: var(--gris); margin: 0 0 12px; }
.carte-auteur__bio { font-size: 15px;   /* p-sm */ line-height: 1.7; color: var(--encre-douce); margin: 0; }

.carte-auteur__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #0A66C2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.carte-auteur__linkedin:hover { background: #084d94; color: #fff; text-decoration: none; }

@media (max-width: 575px) {
  .carte-auteur { flex-direction: column; gap: 14px; padding: 20px; }
}

/* ── Bouton compact ─────────────────────────────────────────────────
   Pour les panneaux denses du backoffice, où trois actions cohabitent
   dans une largeur de colonne. */
.btn--petit {
  padding: 7px 14px; font-size: 13px; border-radius: var(--r-14);
}

/* ── Actions des pages d'erreur ─────────────────────────────────── */
.page-erreur__actions {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; margin-top: 22px;
}

/* ════════════════════════════════════════════════════════════════════
   MAQUETTE « SITE COMPLET » — composants des treize pages

   Tout ce qui suit transpose les sections de la maquette finale en
   classes, puisque la CSP interdit le style en ligne qu'elle emploie.

   ⚠️  LES TAILLES SONT RAMENÉES À L'ÉCHELLE DOCUMENTÉE.
       La maquette écrit 56, 48, 44, 19, 15.5… ; le design system ne
       connaît que s-15…s-60 et les paliers intermédiaires du vérificateur.
       Chaque valeur hors échelle est posée sur le pas le plus proche —
       c'est ce que `npm run test:design` contrôle.
   ════════════════════════════════════════════════════════════════════ */

/* Une section ciblée par une ancre ne doit pas se glisser sous
   l'en-tête collant. */
.section[id], section[id] { scroll-margin-top: 90px; }

/* ── Icônes SVG inline ──────────────────────────────────────────────
   1em par défaut : l'icône suit la taille de texte de son conteneur.
   Les variantes de taille passent par width/height, jamais par
   font-size — l'échelle typographique reste réservée au texte. */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.ico--caret { width: 11px; height: 11px; }
.ico--16 { width: 16px; height: 16px; }
.ico--20 { width: 20px; height: 20px; }
.ico--28 { width: 28px; height: 28px; }
.ico--36 { width: 36px; height: 36px; }
.ico--theme { color: var(--theme); }
.ico--theme-clair { color: var(--theme-clair); }
.ico--succes { color: var(--succes); }
.ico--alerte { color: var(--alerte); }
.ico--etoile { color: var(--etoile); }

/* ── Surtitre (« eyebrow ») ─────────────────────────────────────────
   La petite pilule d'annonce au-dessus des H1 : « Espace employeurs »,
   « Outil gratuit », « Recruteurs »… */
.surtitre {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lilas); color: var(--theme-fonce);
  font-size: 13px; font-weight: 600; padding: 7px 14px;
  border-radius: var(--pill); margin-bottom: 22px;
}
.surtitre--blanc { background: #fff; }
.surtitre--violet { background: var(--violet-pale); }
/* Sur fond navy : voile blanc, texte magenta clair. */
.surtitre--navy { background: rgba(255, 255, 255, .1); color: var(--theme-clair); }

/* ── Heros ──────────────────────────────────────────────────────────
   Trois familles dans la maquette : vidéo (accueil), lilas (pages
   claires), navy (recruteurs, annuaire, FAQ entreprises, anonymiseur). */

.hero-video { position: relative; overflow: hidden; background: var(--encre); }
.hero-video__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Repli décoratif si aucune vidéo n'est configurée. */
.hero-video__repli {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--lilas) 0%, var(--violet-tete) 55%, var(--violet-fond) 100%);
}
/* ⚠️  LE VOILE PORTE LA LISIBILITÉ. Blanc quasi opaque côté texte,
       laissant transparaître la vidéo côté droit — les valeurs viennent
       de la maquette. */
.hero-video__voile {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .94) 40%,
    rgba(255, 255, 255, .55) 72%, rgba(255, 255, 255, .35) 100%);
}
.hero-video__grille {
  position: relative; z-index: 1;
  max-width: var(--largeur); margin: 0 auto; padding: 64px 20px 76px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 50px; align-items: center;
}
.hero-video h1 { font-size: 60px; line-height: 1.1; letter-spacing: -1.3px; margin: 0; }
.hero-video__accroche {
  font-size: 22px; line-height: 1.5; color: var(--encre-douce);
  margin: 22px 0 0; max-width: 520px;
}
.hero-video .hero__actions { margin: 30px 0 0; }
.hero-video .preuve { margin-top: 30px; }

/* Avatars du bloc de preuve sociale — anneau blanc, disque lilas. */
.preuve__avatars--hero span { border-color: #fff; background: var(--lilas); color: var(--theme-fonce); }

/* La carte vidéo de démonstration, à droite du hero. */
.demo-carte {
  position: relative; border-radius: 18px; overflow: hidden;
  background: var(--encre); box-shadow: var(--ombre-navy);
}
.demo-carte__visuel {
  position: relative; aspect-ratio: 16 / 9; display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet-tete), var(--lilas));
}
.demo-carte__visuel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-carte__lecture {
  position: relative; z-index: 1;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--theme); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(199, 62, 155, .45);
}
.demo-carte__lecture .ico { width: 24px; height: 24px; }
.demo-carte__lecture:hover { background: var(--theme-hover); }
.demo-carte__chip {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(34, 34, 59, .72); color: #fff;
  font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: var(--pill);
}
.demo-carte__chip .ico { width: 8px; height: 8px; color: var(--theme-clair); }
.demo-carte.est-lance .demo-carte__lecture,
.demo-carte.est-lance .demo-carte__chip { display: none; }

/* ── Hero lilas (pages internes claires) ──────────────────────────── */
.hero-interne {
  background: linear-gradient(135deg, var(--violet-pale) 0%, var(--lilas) 60%, var(--violet-tete) 100%);
  padding: 64px 0;
}
.hero-interne h1 { font-size: 40px; line-height: 1.15; letter-spacing: -1px; margin: 0; }
.hero-interne__accroche { font-size: 18px; line-height: 1.6; color: var(--encre-douce); margin: 20px 0 0; max-width: 640px; }
.hero-interne--centre { text-align: center; }
.hero-interne--centre h1 { max-width: 760px; margin: 0 auto; }
.hero-interne--centre .hero-interne__accroche { margin: 14px auto 0; }
.hero-interne__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 60px; align-items: center;
}

/* ── Hero navy ────────────────────────────────────────────────────── */
.hero-navy { background: var(--navy); padding: 64px 0; color: #fff; }
.hero-navy h1 { font-size: 40px; line-height: 1.15; letter-spacing: -1px; margin: 0; color: #fff; }
.hero-navy__accroche { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .78); margin: 20px 0 0; max-width: 640px; }
.hero-navy__note { font-size: 14px; color: rgba(255, 255, 255, .6); margin-top: 20px; }
.hero-navy__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 60px; align-items: center;
}
.hero-navy .btn--outline {
  background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff;
}
.hero-navy .btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

/* Puces à coche des heros (« 100 % gratuit… »). */
.puces-coche { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.puces-coche span { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.puces-coche .ico { color: var(--theme); width: 18px; height: 18px; }

/* ── Bande d'arguments (chevauche le hero d'accueil) ──────────────── */
.bande-args {
  margin-top: -32px; position: relative; z-index: 2;
  background: #fff; border: 1px solid var(--violet-gris); border-radius: var(--r-12);
  box-shadow: 0 12px 32px rgba(34, 34, 59, .07);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.arg { padding: 26px 30px; display: flex; align-items: center; gap: 16px; border-left: 1px solid var(--violet-gris); }
.arg:first-child { border-left: 0; }
.arg__ico {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-12);
  background: var(--violet-pale); color: var(--theme);
  display: flex; align-items: center; justify-content: center;
}
.arg__ico .ico { width: 20px; height: 20px; }
.arg__titre { font-size: 17px; font-weight: 700; }
.arg__texte { font-size: 14.5px; color: var(--gris); margin-top: 3px; }

/* ── Bande de chiffres navy ───────────────────────────────────────── */
.stats-navy {
  background: var(--encre); border-radius: var(--r-16); padding: 54px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.stat { padding: 0 14px; border-left: 1px solid rgba(255, 255, 255, .12); }
.stat__valeur { font-size: 40px; font-weight: 700; color: #fff; letter-spacing: -1px; line-height: 1.1; }
.stat__libelle { font-size: 15px; color: rgba(255, 255, 255, .78); margin-top: 6px; }

/* ── Étapes numérotées ────────────────────────────────────────────── */

/* En lignes (accueil : « Comment ça marche pour les employeurs ? »). */
.etapes-lignes { display: flex; flex-direction: column; gap: 26px; }
.etape-ligne { display: flex; gap: 18px; }
.etape-ligne .etape__num { flex: none; width: 40px; height: 40px; margin: 0; }
.etape-ligne__titre { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.etape-ligne__texte { font-size: 16px; line-height: 1.6; color: var(--gris); margin: 0; }

/* En cartes bordées (pages employeur / recruteur / candidat / outil). */
.carte-etape { background: #fff; border: 1px solid var(--violet-gris); border-radius: var(--r-16); padding: 28px; }
.carte-etape .etape__num { width: 44px; height: 44px; margin-bottom: 18px; }
.carte-etape h3 { font-size: 20px; margin-bottom: 8px; }
.carte-etape p { font-size: 15px; line-height: 1.6; color: var(--gris); margin: 0; }
/* Numéros navy côté recruteurs — la maquette inverse la couleur. */
.carte-etape--navy .etape__num { background: var(--encre); }

/* ── Cartes d'avantages ───────────────────────────────────────────── */

/* Icône pleine magenta (accueil : « Pourquoi utiliser notre plateforme ? »). */
.carte-icone--pleine .carte-icone__ico { background: var(--theme); color: #fff; width: 52px; height: 52px; border-radius: var(--r-14); }
.carte-icone--pleine .carte-icone__ico .ico { width: 22px; height: 22px; }
.carte-icone--pleine h3 { font-size: 22px; }

/* Icône douce (pages employeur / recruteur / fiche cabinet). */
.carte-icone--douce { background: var(--snow); border-color: var(--violet-gris); box-shadow: none; }
.carte-icone--douce .carte-icone__ico { width: 48px; height: 48px; border-radius: 13px; background: var(--violet-pale); }
.carte-icone--douce .carte-icone__ico .ico { width: 20px; height: 20px; }

/* Rangée icône + texte (candidats : « Ce que l'anonymat change »). */
.avantages-lignes { display: flex; flex-direction: column; gap: 22px; }
.avantage-ligne { display: flex; gap: 16px; }
.avantage-ligne .arg__ico { width: 44px; height: 44px; }
.avantage-ligne h3 { font-size: 18px; margin-bottom: 5px; }
.avantage-ligne p { font-size: 15px; line-height: 1.6; color: var(--gris); margin: 0; }

/* ── Bande des catégories ─────────────────────────────────────────── */
.bande-categories {
  background: var(--blanc-400); border-radius: var(--r-12); padding: 28px 32px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
.bande-categories__intro { font-size: 14px; font-weight: 700; color: var(--encre-douce); flex: none; }
.puce-cat {
  background: #fff; border-radius: var(--pill); padding: 9px 16px;
  font-size: 15px; font-weight: 600; color: var(--encre-douce);
}
a.puce-cat:hover { background: var(--theme); color: #fff; text-decoration: none; }

/* ── Témoignages ──────────────────────────────────────────────────── */
.temoignages { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; }
.temoignages__cote { display: flex; flex-direction: column; gap: 26px; }
.temoignage-principal { background: var(--violet-pale); border-radius: var(--r-16); padding: 44px; }
.temoignage-principal .citation { font-size: 24px; line-height: 1.45; font-weight: 500; letter-spacing: -.3px; margin: 0 0 28px; }
.temoignage { border: 1px solid var(--violet-gris); border-radius: var(--r-16); padding: 28px; flex: 1; }
.temoignage .citation { font-size: 17px; line-height: 1.6; margin: 0 0 20px; }
.etoiles-rang { display: flex; gap: 2px; color: var(--etoile); margin-bottom: 20px; }
.etoiles-rang .ico { width: 15px; height: 15px; }

.temoin { display: flex; align-items: center; gap: 14px; }
.temoin__avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--lilas); color: var(--theme-fonce);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.temoin__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.temoin__nom { font-size: 15px; font-weight: 700; }
.temoin__role { font-size: 13px; color: var(--gris-clair); }

/* ── FAQ en deux colonnes de cartes (accueil, tarifs, anonymiseur) ── */
.faq-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.faq-carte { background: var(--snow); border: 1px solid var(--violet-gris); border-radius: var(--r-12); padding: 24px; }
.faq-carte h3 { font-size: 17px; margin-bottom: 10px; }
.faq-carte p { font-size: 15px; line-height: 1.65; color: var(--gris); margin: 0; }

/* ── Bandeaux d'appel ─────────────────────────────────────────────── */

/* Le grand bandeau bleu centré — l'un des deux emplacements bleus. */
.cta-bleu { background: var(--bleu); border-radius: var(--r-16); padding: 70px 50px; text-align: center; }
.cta-bleu h2 { color: #fff; font-size: 32px; line-height: 1.3; max-width: 700px; margin: 0 auto; }
.cta-bleu .hero__actions { justify-content: center; margin: 30px 0 0; }
.cta-bleu .btn--outline { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.cta-bleu .btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

/* Bandeau en rangée, fond violet pâle (« Une question avant de publier ? »). */
.cta-violet {
  background: var(--violet-pale); border-radius: var(--r-16); padding: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.cta-violet h2 { font-size: 28px; letter-spacing: -.5px; margin: 0 0 10px; }
.cta-violet p { font-size: 16px; color: var(--gris); margin: 0; max-width: 600px; }
.cta-violet__actions { flex: none; display: flex; gap: 12px; }

/* Encart violet plein — la FAQ de l'anonymiseur. */
.encart-violet { background: var(--violet-pale); border-radius: var(--r-16); padding: 52px; }
.encart-violet h2 { margin: 0 0 26px; letter-spacing: -.5px; }
.encart-violet .faq-carte { background: #fff; }

/* Bandeau en rangée, fond navy (newsletter, tarifs entreprises). */
.cta-navy {
  background: var(--encre); border-radius: var(--r-16); padding: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.cta-navy h2 { color: #fff; font-size: 28px; letter-spacing: -.5px; margin: 0 0 10px; }
.cta-navy p { font-size: 16px; color: rgba(255, 255, 255, .78); margin: 0; max-width: 640px; }
.cta-navy__actions { flex: none; display: flex; gap: 12px; align-items: center; }
.cta-navy .champ-navy {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--pill); padding: 12px 22px; font: inherit; font-size: 15px;
  color: #fff; min-width: 260px;
}
.cta-navy .champ-navy::placeholder { color: rgba(255, 255, 255, .55); }
.cta-navy .champ-navy:focus { outline: 2px solid var(--theme); outline-offset: 1px; }

/* ── Visuels décoratifs (captures produit, images absentes) ───────── */
.visuel {
  border-radius: var(--r-16); overflow: hidden; display: block;
  background: linear-gradient(135deg, var(--blanc-400) 0%, var(--violet-tete) 100%);
}
.visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visuel--produit { aspect-ratio: 6 / 5; }
.visuel--large { aspect-ratio: 21 / 9; }
.visuel--carte { aspect-ratio: 16 / 10; }

/* ── Maquette d'offre anonyme (employeurs, sur fond navy) ─────────── */
.split-navy {
  background: var(--encre); border-radius: var(--r-16); padding: 54px 44px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.split-navy h2 { color: #fff; font-size: 30px; letter-spacing: -.6px; margin: 0 0 16px; }
.split-navy > div > p { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .78); margin: 0 0 26px; }

.offre-masquee { background: rgba(255, 255, 255, .06); border-radius: var(--r-14); padding: 30px; }
.offre-masquee__entete { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.offre-masquee__vue {
  background: rgba(199, 62, 155, .2); color: var(--theme-clair);
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--pill);
}
.offre-masquee__ref { font-size: 13px; color: rgba(255, 255, 255, .55); }
.offre-masquee__titre { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.offre-masquee__meta { font-size: 14.5px; color: rgba(255, 255, 255, .78); margin-bottom: 20px; }
.offre-masquee__lignes { display: flex; flex-direction: column; gap: 9px; }
.offre-masquee__lignes span { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .14); display: block; }
.offre-masquee__lignes span:nth-child(2) { width: 78%; }
.offre-masquee__lignes span:nth-child(3) { width: 56%; }
.offre-masquee__pied {
  margin-top: 22px; display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 700; color: var(--theme-clair);
}

/* ── Aperçu de CV anonyme (page candidats) ────────────────────────── */
.cv-anonyme { border: 1px solid var(--violet-gris); border-radius: var(--r-16); padding: 34px; background: var(--snow); }
.cv-anonyme__legende {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 20px;
}
.cv-anonyme__entete { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.cv-anonyme__avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--violet-fond); color: var(--gris-tres);
  display: flex; align-items: center; justify-content: center;
}
.cv-anonyme__avatar .ico { width: 22px; height: 22px; }
.cv-anonyme__ref { font-size: 18px; font-weight: 700; }
.cv-anonyme__par { font-size: 14px; color: var(--gris-clair); }
.cv-anonyme__champs { display: flex; flex-wrap: wrap; gap: 9px; }
.champ-retire {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--violet-fond); font-size: 13px; font-weight: 600;
  color: var(--encre-douce); padding: 8px 14px; border-radius: var(--pill);
}
.champ-retire .ico { width: 12px; height: 12px; color: var(--theme); }
.cv-anonyme__note { margin: 22px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--gris); }

/* ── Mini-cartes d'offres (hero recruteurs) ───────────────────────── */
.offres-mini { display: flex; flex-direction: column; gap: 14px; }
.offre-mini { background: #fff; border-radius: var(--r-14); padding: 22px 24px; display: block; color: var(--encre); }
a.offre-mini:hover { text-decoration: none; box-shadow: var(--ombre-mid); color: var(--encre); }
.offre-mini__haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.offre-mini__secteur {
  background: var(--rose-pale); color: var(--theme-link);
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--pill);
}
.offre-mini__frais { font-size: 14px; font-weight: 700; color: var(--theme); }
.offre-mini__titre { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.offre-mini__meta { font-size: 14px; color: var(--gris-clair); }

/* ── Annuaire ─────────────────────────────────────────────────────── */
.barre-recherche {
  background: #fff; border-radius: var(--r-14); padding: 14px;
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px;
}
.barre-recherche input, .barre-recherche select {
  border: 1px solid var(--trait); border-radius: var(--r-10);
  padding: 13px 16px; font: inherit; font-size: 15px; color: var(--encre);
  background: #fff; min-width: 0;
}
.barre-recherche input:focus, .barre-recherche select:focus {
  outline: 2px solid var(--theme); outline-offset: 1px; border-color: var(--theme);
}
.barre-recherche .btn { border-radius: var(--r-10); }

.avec-panneau { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 34px; padding: 44px 0 70px; align-items: start; }

.panneau-filtres { border: 1px solid var(--violet-gris); border-radius: var(--r-16); overflow: hidden; background: #fff; position: sticky; top: 96px; }
.panneau-filtres__titre { padding: 20px 22px; font-size: 17px; font-weight: 700; border-bottom: 1px solid var(--violet-gris); }
.panneau-filtres__corps { padding: 22px; display: flex; flex-direction: column; gap: 24px; }
.panneau-filtres h3 { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.filtre-liste { display: flex; flex-direction: column; gap: 10px; }
.filtre-choix { display: flex; align-items: center; gap: 11px; color: var(--encre-douce); font-size: 14.5px; }
.filtre-choix:hover { color: var(--theme); text-decoration: none; }
.filtre-choix__case {
  flex: none; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--gris-pale); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.filtre-choix__case .ico { width: 10px; height: 10px; opacity: 0; }
.filtre-choix.is-actif { color: var(--encre); font-weight: 600; }
.filtre-choix.is-actif .filtre-choix__case { background: var(--theme); border-color: var(--theme); }
.filtre-choix.is-actif .filtre-choix__case .ico { opacity: 1; }
.filtre-choix__libelle { flex: 1; min-width: 0; }
.filtre-choix__compte { font-size: 13px; color: var(--gris-tres); }
.panneau-filtres__pied {
  border-top: 1px solid var(--violet-gris); padding-top: 18px;
  display: flex; justify-content: space-between; font-size: 14px; font-weight: 600;
}
.panneau-filtres__pied a:first-child { color: var(--gris-clair); }
/* « Appliquer » est un bouton (il soumet la barre de recherche par son
   attribut form) mais doit se présenter comme le lien d'en face. */
.panneau-filtres__pied button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--theme); }

.resultats__barre { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.resultats__compte { font-size: 15px; color: var(--gris); }
.resultats__compte strong { color: var(--encre); }
.tri { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--encre-douce); }
.tri select {
  border: 1px solid var(--trait); border-radius: var(--pill); padding: 8px 14px;
  font: inherit; font-size: 14px; font-weight: 600; background: #fff; color: var(--encre);
}

.carte-cabinet { border: 1px solid var(--violet-gris); border-radius: var(--r-16); padding: 26px; background: #fff; display: flex; flex-direction: column; }
.carte-cabinet:hover { border-color: var(--theme); box-shadow: var(--ombre-mid); }
.carte-cabinet__entete { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.carte-cabinet__logo {
  flex: none; width: 56px; height: 56px; border-radius: var(--r-14);
  background: var(--lilas); color: var(--theme-fonce); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.carte-cabinet__logo img { width: 100%; height: 100%; object-fit: cover; }
.carte-cabinet__titre { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.carte-cabinet__titre a { color: var(--encre); }
.carte-cabinet__titre a:hover { color: var(--theme); text-decoration: none; }
.carte-cabinet__meta { font-size: 14px; color: var(--gris-clair); }
.carte-cabinet__desc { font-size: 14.5px; line-height: 1.6; color: var(--gris); margin: 0 0 16px; }
.carte-cabinet__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tag-gris { background: var(--blanc-400); font-size: 13px; font-weight: 600; color: var(--encre-douce); padding: 6px 12px; border-radius: var(--pill); }
.carte-cabinet__pied {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--violet-fond);
}
.mention-charte { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--theme-link); }
.mention-charte .ico { width: 13px; height: 13px; }

/* Pagination numérotée de la maquette (annuaire, fiches pratiques). */
.pagination-num { display: flex; justify-content: center; gap: 9px; margin-top: 34px; flex-wrap: wrap; }
.pagination-num a, .pagination-num span {
  min-width: 40px; height: 40px; padding: 0 8px; border-radius: 11px;
  border: 1px solid var(--trait); background: #fff; color: var(--encre-douce);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 700;
}
.pagination-num a:hover { border-color: var(--theme); color: var(--theme); text-decoration: none; }
.pagination-num .is-actif { background: var(--theme); border-color: var(--theme); color: #fff; }
.pagination-num .pagination-num__points { border: 0; background: transparent; color: var(--gris-tres); }

/* ── Fiche cabinet ────────────────────────────────────────────────── */
/* ⚠️  `.fil-ariane` retirée : ni les fiches ni les articles n'en portent
       plus — voir views/vitrine/blog_article.ejs. */
.fil-ariane__sep { margin: 0 8px; }

.fiche-banniere { height: 200px; background: linear-gradient(135deg, var(--lilas), var(--violet-tete)); overflow: hidden; }
.fiche-banniere img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ⚠️  LA GRILLE REMONTE SUR LA BANNIÈRE (-52px), comme la maquette.
       La colonne latérale, elle, redescend d'autant pour s'aligner sous
       la bannière. */
.fiche-grille { margin-top: -52px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start; }
/*
  ⚠️  LE CÔTÉ MONTE AVEC LA CARTE PRINCIPALE, IL NE LA REGARDE PLUS D'EN BAS.

      La grille chevauche la bannière de 52 px, et le côté portait un
      `margin-top: 52px` qui l'en excluait : les deux cartes démarraient à
      des hauteurs différentes — un décalage qui se lisait comme un
      accident, pas comme un choix. Elles partent maintenant du même
      bord ; le `top` du sticky reste celui de l'en-tête.
*/
.fiche-grille__cote { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }

.carte-blanche { background: #fff; border: 1px solid var(--violet-gris); border-radius: var(--r-16); padding: 34px; }
.carte-blanche + .carte-blanche { margin-top: 22px; }
.carte-blanche h2 { font-size: 22px; margin: 0 0 22px; }

.fiche-entete { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.fiche-logo {
  flex: none; width: 88px; height: 88px; border-radius: var(--r-20);
  background: var(--lilas); color: var(--theme-fonce); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.fiche-logo img { width: 100%; height: 100%; object-fit: cover; }
.fiche-entete__corps { flex: 1; min-width: 240px; }
.fiche-entete__ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fiche-entete h1 { font-size: 30px; letter-spacing: -.7px; margin: 0; }
.fiche-entete__meta { font-size: 15px; color: var(--gris-clair); }
.fiche-vues { flex: none; text-align: right; font-size: 13px; color: var(--gris-clair); }
.fiche-vues strong { display: block; font-size: 20px; color: var(--encre); }
.fiche-desc { margin: 24px 0 0; font-size: 16px; line-height: 1.7; color: var(--encre-douce); }
.fiche-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.fiche-tags .tag-gris { font-size: 14px; padding: 9px 16px; }

.specialites { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.specialite { display: flex; gap: 14px; align-items: flex-start; }
.specialite .arg__ico { width: 40px; height: 40px; border-radius: 11px; }
.specialite .arg__ico .ico { width: 17px; height: 17px; }
.specialite h3 { font-size: 16px; margin: 0 0 3px; }
.specialite p { font-size: 14px; color: var(--gris); line-height: 1.55; margin: 0; }

.carte-cote { background: #fff; border: 1px solid var(--violet-gris); border-radius: var(--r-16); padding: 28px; }
.carte-cote--violet { background: var(--violet-pale); border-color: var(--violet-pale); }
.carte-cote h2 { font-size: 18px; margin: 0 0 18px; }
.coordonnees { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.coordonnees a, .coordonnees span { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--encre-douce); word-break: break-word; }
.coordonnees .ico { width: 16px; height: 16px; color: var(--theme); }
.carte-cote .btn + .btn { margin-top: 10px; }

.verifs { display: flex; flex-direction: column; }
.verif { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--violet-gris); }
.verif:first-child { border-top: 0; padding-top: 0; }
.verif .ico { width: 17px; height: 17px; color: var(--succes); }
.verif__titre { font-size: 14.5px; font-weight: 700; }
.verif__detail { font-size: 13px; color: var(--gris-clair); word-break: break-word; }


/* ── Fiches pratiques (liste) ─────────────────────────────────────── */
.chips-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip-cat {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--pill);
  padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--encre-douce);
}
.chip-cat:hover { border-color: var(--theme); color: var(--theme); text-decoration: none; }
.chip-cat.is-actif { background: var(--theme); border-color: var(--theme); color: #fff; }

.a-la-une {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: center;
  background: var(--snow); border: 1px solid var(--violet-gris);
  border-radius: var(--r-16); overflow: hidden;
}
.a-la-une__visuel { align-self: stretch; min-height: 320px; background: linear-gradient(135deg, var(--blanc-400), var(--lilas)); }
.a-la-une__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-la-une__corps { padding: 40px 40px 40px 0; }
.a-la-une h2 { font-size: 30px; line-height: 1.25; letter-spacing: -.6px; margin: 0 0 14px; }
.a-la-une h2 a { color: var(--encre); }
.a-la-une h2 a:hover { color: var(--theme); text-decoration: none; }
.a-la-une__extrait { font-size: 16px; line-height: 1.65; color: var(--gris); margin: 0 0 22px; }

.chip-theme {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  color: var(--theme-fonce); background: var(--violet-pale);
  padding: 5px 12px; border-radius: var(--pill); margin-bottom: 12px;
}
a.chip-theme:hover { background: var(--theme); color: #fff; text-decoration: none; }

.carte-fiche { display: flex; flex-direction: column; }
.carte-fiche__visuel { aspect-ratio: 3 / 2; border-radius: var(--r-16); overflow: hidden; background: linear-gradient(135deg, var(--blanc-400), var(--lilas)); margin-bottom: 18px; display: block; }
.carte-fiche__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-fiche h3 { font-size: 18px; line-height: 1.32; margin: 0 0 10px; }
.carte-fiche h3 a { color: var(--encre); }
.carte-fiche h3 a:hover { color: var(--theme); text-decoration: none; }
.carte-fiche p { font-size: 15px; line-height: 1.6; color: var(--gris); margin: 0 0 14px; }
.carte-fiche__meta { font-size: 13px; color: var(--gris-clair); margin-top: auto; }

/* ── Article ──────────────────────────────────────────────────────── */
/*
  ⚠️  LA COLONNE D'ARTICLE ÉPOUSE LE CONTENEUR, COMME LE BLOC BLEU.

      Elle était bridée à 760 px et centrée : elle démarrait donc à ~240 px
      du bord, alors que le bandeau bleu du bas commence au bord du
      conteneur. Le texte paraissait en retrait sous un bloc plus large que
      lui, et l'ensemble semblait mal aligné.

  ⚠️  LES LIGNES DEVIENNENT LONGUES, ET C'EST LE COÛT ASSUMÉ.

      À 1 200 px, une ligne fait environ 170 caractères — les recommandations
      de lisibilité tournent autour de 75. Le confort de lecture se règle
      ici, en une valeur : remettre `max-width` sur cette classe le rétablit
      sans toucher au reste.
*/
.article-colonne { max-width: none; margin: 0; }
.article-entete h1 { font-size: 40px; line-height: 1.15; letter-spacing: -1.1px; margin: 0 0 20px; }
.article-signature {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 32px; border-bottom: 1px solid var(--violet-gris);
}
.article-signature__corps { flex: 1; }
.article-signature__nom { font-size: 15px; font-weight: 700; }
.article-signature__date { font-size: 14px; color: var(--gris-clair); }
.partage { display: flex; gap: 12px; color: var(--gris-clair); }
.partage a, .partage button {
  display: inline-flex; border: 0; background: transparent; padding: 0;
  color: var(--gris-clair); cursor: pointer; font: inherit;
}
.partage a:hover, .partage button:hover { color: var(--theme); }
.partage .est-copie { color: var(--succes); }
.partage .ico { width: 17px; height: 17px; }

.article-visuel { max-width: 900px; margin: 36px auto 0; }

/* Chapo — le premier paragraphe appuyé de la maquette. */
.article-chapo { font-size: 20px; line-height: 1.65; color: var(--encre-douce); font-weight: 500; margin: 0 0 26px; }

/* Encadré « À retenir » de la maquette d'article. Le corps d'article est
   du HTML libre saisi au backoffice : il suffit d'y écrire
   <div class="a-retenir"><h3>À retenir</h3><ul><li>…</li></ul></div>. */
.article-corps .a-retenir { background: var(--violet-pale); border-radius: var(--r-16); padding: 32px; margin: 40px 0; }
.article-corps .a-retenir h3 { font-size: 18px; margin: 0 0 12px; }
.article-corps .a-retenir ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.article-corps .a-retenir li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: var(--encre-douce); }
.article-corps .a-retenir li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--theme-link); font-weight: 700; }

/* ── Anonymiser un CV ─────────────────────────────────────────────── */
.carte-depot { background: #fff; border-radius: 18px; padding: 30px; box-shadow: var(--ombre-navy); }
.depot {
  border: 2px dashed var(--theme); background: var(--theme-voile);
  border-radius: var(--r-14); padding: 40px; text-align: center; display: block;
}
a.depot:hover { text-decoration: none; background: var(--rose-pale); }
.depot .ico { width: 32px; height: 32px; color: var(--theme); }
.depot__titre { font-size: 17px; font-weight: 700; margin-top: 16px; color: var(--encre); }
.depot__note { font-size: 14px; color: var(--gris-clair); margin-top: 6px; }
.depot .btn { margin-top: 18px; }
.carte-depot__mention {
  display: flex; align-items: center; gap: 11px; margin-top: 18px;
  font-size: 13px; color: var(--gris); line-height: 1.55;
}
.carte-depot__mention .ico { width: 15px; height: 15px; color: var(--theme); }

.retire-garde { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.liste-retire, .liste-garde { border-radius: var(--r-16); padding: 32px; }
.liste-retire { border: 1px solid var(--alerte-pale); background: var(--alerte-pale); }
.liste-garde { border: 1px solid var(--succes-pale); background: var(--succes-pale); }
.liste-retire h3, .liste-garde h3 {
  display: flex; align-items: center; gap: 11px;
  font-size: 18px; margin: 0 0 20px;
}
.liste-retire h3 { color: var(--alerte); }
.liste-garde h3 { color: var(--succes); }
.liste-retire ul, .liste-garde ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.liste-retire li, .liste-garde li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--encre-douce); }
.liste-retire .ico { width: 14px; height: 14px; color: var(--alerte); }
.liste-garde .ico { width: 14px; height: 14px; color: var(--succes); }

/* ── Pages FAQ (deux publics) ─────────────────────────────────────── */
.champ-recherche {
  background: #fff; border-radius: var(--pill); padding: 13px 22px;
  display: flex; align-items: center; gap: 12px; max-width: 520px;
  border: 1px solid transparent;
}
.champ-recherche:focus-within { border-color: var(--theme); }
.champ-recherche .ico { width: 16px; height: 16px; color: var(--theme); }
.champ-recherche input { border: 0; background: transparent; font: inherit; font-size: 15px; flex: 1; min-width: 0; color: var(--encre); }
.champ-recherche input:focus { outline: none; }
.hero-navy .champ-recherche { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.hero-navy .champ-recherche .ico { color: var(--theme-clair); }
.hero-navy .champ-recherche input { color: #fff; }
.hero-navy .champ-recherche input::placeholder { color: rgba(255, 255, 255, .55); }

.faq-mise-en-page { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; padding: 52px 0 70px; align-items: start; }
/* ⚠️  `.faq-colonne` retirée avec la rangée de thèmes des pages FAQ. */
.faq-aide { margin-top: 20px; background: var(--violet-pale); border-radius: var(--r-14); padding: 22px; }
.faq-aide h3 { font-size: 16px; margin: 0 0 8px; }
.faq-aide p { font-size: 14px; line-height: 1.6; color: var(--gris); margin: 0 0 14px; }

.faq-groupes { display: flex; flex-direction: column; gap: 34px; }
.faq-groupe h2 { font-size: 24px; letter-spacing: -.4px; margin: 0 0 18px; scroll-margin-top: 96px; }
.faq-groupe .accordeon__item { border-radius: var(--r-14); padding: 20px 26px; }
.faq-groupe .accordeon__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  font-size: 17px; list-style: none;
}
.faq-groupe .accordeon__item summary::-webkit-details-marker { display: none; }
.faq-groupe .accordeon__item summary .ico { width: 14px; height: 14px; color: var(--theme); margin-top: 5px; transition: transform .15s ease; }
.faq-groupe .accordeon__item[open] summary .ico { transform: rotate(180deg); }
.faq-groupe .accordeon__corps { font-size: 16px; line-height: 1.7; }
.faq-groupes .est-cache { display: none; }
.faq-vide { display: none; }
.faq-vide.est-visible { display: block; }

/* ── Tarifs ───────────────────────────────────────────────────────── */
.cartes-tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.carte-tarif {
  background: #fff; border: 1.5px solid var(--violet-tete); border-radius: var(--r-16);
  padding: 34px; display: flex; flex-direction: column;
}
.carte-tarif__haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.carte-tarif__nom { font-size: 18px; font-weight: 700; }
.carte-tarif__badge {
  background: var(--theme); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 5px 11px; border-radius: var(--pill);
}
.carte-tarif__prix { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.carte-tarif__prix strong { font-size: 40px; font-weight: 700; letter-spacing: -1.2px; }
.carte-tarif__prix span { font-size: 15px; color: var(--gris-clair); }
.carte-tarif__sous { font-size: 15px; color: var(--gris-clair); margin-bottom: 24px; }
.carte-tarif__points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.carte-tarif__points span { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--encre-douce); }
.carte-tarif__points .ico { width: 13px; height: 13px; color: var(--succes); margin-top: 4px; }
.carte-tarif .btn { margin-top: auto; }

/* La carte mise en avant, sur fond navy. */
.carte-tarif--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.carte-tarif--navy .carte-tarif__nom, .carte-tarif--navy .carte-tarif__prix strong { color: #fff; }
.carte-tarif--navy .carte-tarif__prix span,
.carte-tarif--navy .carte-tarif__sous { color: rgba(255, 255, 255, .72); }
.carte-tarif--navy .carte-tarif__points span { color: rgba(255, 255, 255, .9); }
.carte-tarif--navy .carte-tarif__points .ico { color: var(--theme-clair); }

.comparatif { border: 1px solid var(--violet-gris); border-radius: var(--r-16); overflow: hidden; background: #fff; }
.comparatif__ligne {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 16px;
  padding: 17px 28px; border-bottom: 1px solid var(--violet-fond); align-items: center;
  font-size: 15px;
}
.comparatif__ligne:last-child { border-bottom: 0; }
.comparatif__ligne--entete {
  background: var(--violet-pale); border-bottom-color: var(--violet-gris);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
.comparatif__fonction { font-weight: 600; color: var(--encre-douce); }
.comparatif__oui { color: var(--theme-link); font-weight: 600; }
.comparatif__non { color: var(--gris-tres); }

/* ── Contact ──────────────────────────────────────────────────────── */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 60px; align-items: start; padding: 64px 0 70px; }
.contact-grille h1 { font-size: 40px; line-height: 1.15; letter-spacing: -1px; margin: 0 0 14px; }
.contact-grille__intro { font-size: 18px; line-height: 1.6; color: var(--encre-douce); margin: 0 0 40px; max-width: 520px; }
.canaux { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.canal { border: 1px solid var(--violet-gris); border-radius: var(--r-16); padding: 26px; display: flex; gap: 18px; align-items: flex-start; background: #fff; }
.canal h3 { font-size: 17px; margin: 0 0 5px; }
.canal p { font-size: 15px; line-height: 1.6; color: var(--gris); margin: 0 0 8px; }
.canal__valeur { font-size: 15px; font-weight: 600; }

.carte-adresse { position: relative; border-radius: var(--r-16); overflow: hidden; min-height: 280px; background: linear-gradient(135deg, var(--blanc-400), var(--lilas)); }
.carte-adresse__etiquette {
  position: absolute; left: 28px; bottom: 28px; background: #fff;
  border-radius: var(--r-14); padding: 22px 26px; box-shadow: 0 12px 30px rgba(34, 34, 59, .14);
}
.carte-adresse__etiquette strong { display: block; font-size: 16px; margin-bottom: 5px; }
.carte-adresse__etiquette span { font-size: 14.5px; line-height: 1.6; color: var(--gris); }

.carte-form-contact { background: var(--snow); border: 1px solid var(--violet-gris); border-radius: var(--r-16); padding: 34px; }
.carte-form-contact h2 { font-size: 22px; margin: 0 0 6px; }
.carte-form-contact > p { font-size: 14.5px; line-height: 1.6; color: var(--gris); margin: 0 0 24px; }

/* ⚠️  PIÈGE À ROBOTS. Le champ est retiré du flux ET de l'accessibilité :
       un humain ne le voit ni ne le remplit, un robot naïf si. Voir la
       route POST /contact. */
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Adaptatif des nouveaux composants ────────────────────────────── */
@media (max-width: 1120px) {
  .hero-video__grille, .hero-navy__grille, .hero-interne__grille { grid-template-columns: 1fr; gap: 36px; }
  .hero-video__voile { background: rgba(255, 255, 255, .93); }
  .temoignages, .a-la-une { grid-template-columns: 1fr; }
  .a-la-une__corps { padding: 32px; }
  .a-la-une__visuel { min-height: 220px; }
  .contact-grille { grid-template-columns: 1fr; gap: 40px; }
  .fiche-grille { grid-template-columns: 1fr; }
  /* Le côté n'a plus de marge à annuler : seule la position tombe. */
  .fiche-grille__cote { position: static; }
}

@media (max-width: 991px) {
  .hero-video h1 { font-size: 32px; }
  .hero-video__accroche { font-size: 18px; }
  .bande-args { grid-template-columns: 1fr; }
  .arg { border-left: 0; border-top: 1px solid var(--violet-gris); }
  .arg:first-child { border-top: 0; }
  .stats-navy { grid-template-columns: 1fr 1fr; padding: 34px 24px; }
  .cartes-tarifs, .retire-garde, .specialites { grid-template-columns: 1fr; }
  .faq-duo { grid-template-columns: 1fr; }
  .cta-violet, .cta-navy { flex-direction: column; align-items: flex-start; }
  .split-navy { grid-template-columns: 1fr; padding: 34px 24px; }
  .avec-panneau { grid-template-columns: 1fr; }
  .panneau-filtres { position: static; }
  .barre-recherche { grid-template-columns: 1fr; }
  .faq-mise-en-page { grid-template-columns: 1fr; }
  .comparatif__ligne { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 14px 16px; font-size: 14px; }
}

@media (max-width: 767px) {
  .entete__actions { gap: 12px; }
  .entete__lang { display: none; }
  .nav__langues {
    display: flex; gap: 16px; padding: 12px 0;
    border-bottom: 1px solid var(--trait);
  }
  .nav__langues a { font-size: 14px; color: var(--gris-clair); }
  .nav__langues a.is-actif { color: var(--theme); font-weight: 700; }
  .pied__inner { grid-template-columns: 1fr 1fr; }
  .pied__col--marque { grid-column: 1 / -1; }
  .cta-bleu { padding: 44px 24px; }
  .cta-violet, .cta-navy, .encart-violet { padding: 30px 24px; }
  .cta-navy__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-navy .champ-navy { min-width: 0; width: 100%; }
  .carte-blanche, .carte-depot { padding: 24px; }
  .a-la-une__corps { padding: 24px; }
  .article-entete h1 { font-size: 28px; }
  .fiche-entete h1 { font-size: 25px; }

  /* Le sous-menu Ressources s'aplatit dans le tiroir mobile. */
  .nav__groupe { position: static; }
  .nav__parent { padding: 11px 0; border-bottom: 1px solid var(--trait); display: flex; width: 100%; }
  .nav__sous {
    position: static; display: flex; border: 0; box-shadow: none;
    border-radius: 0; min-width: 0; padding: 0 0 0 16px;
  }
  .nav__sous a { border-bottom: 1px solid var(--trait); border-radius: 0; padding: 11px 0; }
}

@media (max-width: 575px) {
  .pied__inner { grid-template-columns: 1fr; }
  .stats-navy { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 0 0; }
  .stat:first-child { border-top: 0; padding-top: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   RÉVISION MAQUETTE — fond blanc, animations de navigation, écrans
   d'authentification, page recruteurs, filtres multiples de l'annuaire.
   ════════════════════════════════════════════════════════════════════ */

/* ⚠️  LE FOND DE LA VITRINE EST BLANC.
       La maquette pose #E9E9EF sur les écrans d'application (backoffice,
       espace connecté) mais laisse la vitrine en blanc : les sections
       colorées (navy, lilas, violet) suffisent à découper la page, et un
       gris de fond derrière une section blanche crée une bande parasite
       en haut et en bas de chaque bloc. `body.site` ne vise que la
       vitrine — .app et .bo posent leur propre fond. */
body.site { background: #fff; }

/* ── Utilitaires de rythme ───────────────────────────────────────── */
.mt-32 { margin-top: 32px; }
.mt-44 { margin-top: 44px; }
.mb-40 { margin-bottom: 40px; }

/* ── Navigation : bulle au survol ──────────────────────────────────
   ⚠️  LA BULLE EST UN FOND, PAS UN CADRE.
       Un `border` au survol décale le texte d'un pixel et fait sauter
       toute la barre. Le fond arrondi est posé en permanence, transparent,
       et ne fait que changer de couleur — rien ne bouge autour. */
.nav a {
  position: relative; padding: 8px 14px; border-radius: var(--pill);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.nav > a:hover, .nav__parent:hover { background: var(--theme-voile); transform: translateY(-1px); }
.nav a.is-actif { background: var(--rose-pale); }

/* Le trait qui se déploie sous l'entrée survolée. */
.nav > a::after, .nav__parent::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  background: var(--theme); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
}
.nav > a:hover::after, .nav__parent:hover::after,
.nav > a.is-actif::after, .nav__parent.is-actif::after { transform: scaleX(1); }

/* Le caret pivote quand le groupe s'ouvre. */
.nav__parent .ico--caret { transition: transform .2s ease; }
.nav__groupe:hover .ico--caret, .nav__groupe:focus-within .ico--caret { transform: rotate(180deg); }

/* Le tiroir descend au lieu d'apparaître d'un coup. */
.nav__sous { transform: translateY(-6px); opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.nav__groupe:hover .nav__sous, .nav__groupe:focus-within .nav__sous { opacity: 1; transform: translateY(0); }
.nav__sous a { transition: background-color .16s ease, color .16s ease, padding-left .16s ease; }
.nav__sous a:hover { padding-left: 16px; }

.entete__lien { position: relative; transition: color .18s ease; }
.entete__lien::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--theme); border-radius: 2px; transform: scaleX(0); transition: transform .22s ease;
}
.entete__lien:hover::after { transform: scaleX(1); }

.entete__lang-btn { border-radius: var(--pill); padding: 6px 10px; transition: background-color .18s ease, color .18s ease; }
.entete__lang-btn:hover { background: var(--violet-pale); }

/* Le bouton d'action se soulève — mêmes 18 centièmes que le reste. */
.entete__actions .btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.entete__actions .btn:hover { transform: translateY(-2px); box-shadow: var(--ombre-mid); }

/* ── Logo configurable (image seule ou image + titre) ─────────────── */
/*
  ⚠️  LA HAUTEUR EST FIXE, LA LARGEUR SUIT — JAMAIS L'INVERSE.

      `width: auto` laisse le navigateur déduire la largeur du ratio du
      fichier. Contraindre les deux déformerait tout logo dont les
      proportions ne tombent pas juste, et la déformation ne se voit pas sur
      le sien : elle se voit sur celui de l'installation d'à côté.
*/
.logo__img { display: block; height: 43px; width: auto; }
.logo--pied .logo__img { height: 30px; }

/* ── Pied de page : mêmes effets, sens inverse ───────────────────── */
/*
  ⚠️  LE PIED REPREND LE SURVOL DE LA BARRE DE NAVIGATION.

      Il glissait de quatre pixels vers la droite et grossissait sa puce,
      pendant que l'en-tête posait une bulle et déployait un trait. Deux
      grammaires de survol sur la même page font douter d'être sur le même
      site — et la version du pied déplaçait le texte, ce que celle du haut
      avait justement été écrite pour éviter.

  ⚠️  MÊME GESTE, COULEURS DU FOND SOMBRE.

      La bulle de l'en-tête est un voile magenta pensé pour du blanc
      (`--theme-voile`, #FDF7FB) : sur le bleu nuit du pied, elle serait
      invisible. On garde le geste — fond arrondi posé en permanence,
      transparent, qui ne fait que changer de couleur — avec un voile
      blanc. Rien ne bouge autour : le rembourrage est là au repos.

  ⚠️  LA PUCE RESTE, ET NE GROSSIT PLUS.

      Elle appartient à la maquette du pied ; c'est son animation qui
      partait dans une autre direction que le reste du site.
*/
/*
  ⚠️  LE FOND AU SURVOL RESTE ; C'EST LE TRAIT QUI EST PARTI.

      Les liens portaient TROIS effets à la fois : la pastille de fond, une
      légère élévation, et un trait qui se déployait sous le texte. Le trait
      était l'effet de trop — il redoublait un soulignement que le lien
      n'avait pas, et sur une colonne de six entrées il faisait clignoter la
      ligne au passage.

      La pastille, elle, dit où l'on est dans une colonne serrée : la retirer
      avait rendu le survol trop discret pour se repérer. Corrigé aussitôt —
      « surligné » désignait le trait, pas le fond.

  ⚠️  LE RETRAIT ET L'ALIGNEMENT RESTENT.

      `padding` donne une zone de clic confortable au doigt, et le
      `margin-left` négatif la compense pour que la colonne reste alignée
      sur son titre.
*/
.pied__lien {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; margin-left: -12px; border-radius: var(--pill);
  align-self: flex-start;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.pied__lien:hover {
  background: rgba(255, 255, 255, .08); transform: translateY(-1px);
  text-decoration: none;
}

.pied__puce { transition: color .18s ease; }
.pied__lien:hover .pied__puce { color: var(--theme-clair); }

/* Les liens de la barre du bas suivent la même règle : la pastille reste,
   le trait est parti. Voir le commentaire de `.pied__lien` juste au-dessus. */
.pied__bas-liens a {
  display: inline-flex;
  padding: 6px 12px; margin-left: -12px; border-radius: var(--pill);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.pied__bas-liens a:hover {
  background: rgba(255, 255, 255, .08); transform: translateY(-1px);
  text-decoration: none;
}
.pied__reseaux a {
  width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); transition: background-color .2s ease, transform .2s ease, color .2s ease;
}
.pied__reseaux a:hover { background: var(--theme); color: #fff; transform: translateY(-3px); }

/* ════════════════════════════════════════════════════════════════
   AUTHENTIFICATION — écran en deux volets
   ════════════════════════════════════════════════════════════════ */

/* ⚠️  `.auth-ecran` N'EST PAS UNE GRILLE — C'ÉTAIT LE BUG.

       Elle en était une, à deux colonnes, ET contenait `.auth-cadre`, elle
       aussi à deux colonnes. La carte n'occupait donc que la moitié de la
       largeur disponible, et chacun de ses volets la moitié de cette
       moitié : un quart de l'écran par volet, avec des titres qui
       s'entassaient sur cinq lignes. Deux grilles imbriquées qui font le
       même travail : la seconde suffit. */
.auth-ecran { display: block; }

/* Le tunnel d'authentification occupe l'écran entier : ni en-tête, ni pied
   de page, ni marge — voir views/layouts/auth.ejs. */
.auth-page, .auth-plein { min-height: 100vh; }
.auth-plein { display: flex; flex-direction: column; }
.auth-plein > .auth-ecran { flex: 1; display: flex; }

.auth-cadre {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden; background: #fff; width: 100%;
}

/* Volet gauche : navy, citation, chiffres. */
.auth-vitre {
  background: var(--navy); color: #fff; padding: 44px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
  position: relative; overflow: hidden;
}
.auth-vitre::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 14px, transparent 14px 28px);
  pointer-events: none;
}
.auth-vitre > * { position: relative; z-index: 1; }
.auth-vitre .citation { color: #fff; font-size: 28px; line-height: 1.35; font-weight: 700; letter-spacing: -.6px; }
.auth-vitre .temoin__nom { color: #fff; }
.auth-vitre .temoin__role { color: rgba(255, 255, 255, .66); }
.auth-vitre .temoin__avatar { background: var(--lilas); color: var(--theme-fonce); }
.auth-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 26px; }
.auth-stat__valeur { font-size: 28px; font-weight: 700; letter-spacing: -1px; }
.auth-stat__libelle { font-size: 13px; color: rgba(255, 255, 255, .62); line-height: 1.4; }

/* Volet droit : le formulaire.
   ⚠️  IL DÉFILE SEUL. Sur un écran bas — un portable en 1280×720 —, le
       formulaire de création de compte dépasse la hauteur : sans ce
       défilement propre au volet, la page entière glissait et la citation
       de gauche partait avec, ce qui donne l'impression que l'écran saute. */
.auth-volet { padding: 44px; display: flex; flex-direction: column; overflow-y: auto; max-height: 100vh; }
.auth-volet__haut { display: flex; justify-content: flex-end; gap: 6px; font-size: 15px; color: var(--gris); margin-bottom: 28px; }
.auth-volet h1 { font-size: 40px; letter-spacing: -1.4px; margin-bottom: 8px; }
.auth-volet__accroche { color: var(--gris); font-size: 17px; margin-bottom: 26px; }

.auth-champ { display: block; margin-bottom: 18px; }
.auth-champ__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.auth-champ__tete span, .auth-champ > span { font-size: 14.5px; font-weight: 600; }
.auth-boite {
  display: flex; align-items: center; gap: 10px; padding: 4px 14px;
  border: 1.5px solid var(--trait); border-radius: var(--r-12); background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-boite:focus-within { border-color: var(--theme); box-shadow: 0 0 0 4px var(--theme-voile); }
.auth-boite .ico { color: var(--theme); flex: none; }
.auth-boite input {
  border: 0; outline: 0; padding: 13px 0; font: inherit; font-size: 15px;
  color: var(--encre); background: none; flex: 1; min-width: 0;
}
.auth-oeil {
  border: 0; background: none; padding: 6px; cursor: pointer; color: var(--gris-tres);
  display: inline-flex; border-radius: var(--r-06); transition: color .18s ease, background-color .18s ease;
}
.auth-oeil:hover { color: var(--theme); background: var(--theme-voile); }
.auth-lien { font-size: 14px; font-weight: 600; color: var(--theme); }

.auth-case { display: flex; align-items: center; gap: 11px; font-size: 15px; margin: 4px 0 22px; cursor: pointer; }
.auth-case input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-case__marque {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-06);
  border: 1.5px solid var(--gris-pale); background: #fff;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background-color .16s ease, border-color .16s ease;
}
.auth-case__marque .ico { width: 12px; height: 12px; opacity: 0; }
.auth-case input:checked + .auth-case__marque { background: var(--theme); border-color: var(--theme); }
.auth-case input:checked + .auth-case__marque .ico { opacity: 1; }
.auth-case input:focus-visible + .auth-case__marque { outline: 2px solid var(--theme); outline-offset: 2px; }

.auth-info {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 26px;
  background: var(--theme-voile); border-radius: var(--r-14); padding: 16px 18px;
  font-size: 14.5px; color: var(--encre-douce); line-height: 1.55;
}
.auth-info .ico { color: var(--theme); flex: none; margin-top: 2px; }
.auth-volet__pied {
  margin-top: auto; padding-top: 30px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--gris-tres);
}
.auth-volet__pied a { color: var(--gris-clair); }
.auth-volet__pied a:hover { color: var(--theme); text-decoration: none; }
.auth-volet__liens { display: flex; gap: 22px; }

/* Cartes autonomes : mot de passe oublié, choix du type de compte. */
/* ⚠️  LA CARTE CENTRÉE GARDE SA LARGEUR, PAS SA POSITION.
       Une carte de 520 px étirée à l'écran entier donnerait un formulaire
       de deux champs large comme un tableau. On centre dans une page qui,
       elle, occupe tout. */
.page-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-plein > .page-auth { flex: 1; }
.auth-carte {
  background: #fff; border-radius: var(--r-20); box-shadow: var(--ombre-mid);
  padding: 44px; width: 100%; max-width: 520px; margin: 0 auto;
}
.auth-carte h1 { font-size: 34px; letter-spacing: -1px; margin-bottom: 10px; }
.auth-carte__note { color: var(--gris); font-size: 16px; margin-bottom: 26px; }
.auth-pastille {
  width: 54px; height: 54px; border-radius: var(--r-16); background: var(--theme-voile);
  display: flex; align-items: center; justify-content: center; color: var(--theme);
  margin-bottom: 22px;
}
.auth-retour { display: block; text-align: center; margin-top: 20px; font-weight: 600; }

.choix-compte {
  display: flex; align-items: center; gap: 18px; width: 100%; text-align: left;
  border: 1.5px solid var(--trait); border-radius: var(--r-16); padding: 22px;
  margin-bottom: 16px; background: #fff; color: var(--encre);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.choix-compte:hover {
  text-decoration: none; color: var(--encre); border-color: var(--theme);
  background: var(--theme-voile); transform: translateY(-2px); box-shadow: var(--ombre-mid);
}
.choix-compte__ico {
  flex: none; width: 52px; height: 52px; border-radius: var(--r-14);
  display: flex; align-items: center; justify-content: center;
  background: var(--violet-pale); color: var(--theme);
}
.choix-compte--pleine .choix-compte__ico { background: var(--theme); color: #fff; }
.choix-compte__corps { flex: 1; min-width: 0; }
.choix-compte__tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.choix-compte__titre { font-size: 20px; font-weight: 700; }
.choix-compte__badge {
  font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: var(--pill);
  background: var(--rose-pale); color: var(--theme-fonce);
}
.choix-compte__badge--bleu { background: var(--bleu-pale); color: var(--bleu); }
.choix-compte__texte { color: var(--gris); font-size: 15px; line-height: 1.5; }
.choix-compte__fleche { flex: none; color: var(--theme); transition: transform .2s ease; }
.choix-compte:hover .choix-compte__fleche { transform: translateX(5px); }

/* ════════════════════════════════════════════════════════════════
   PAGE RECRUTEURS — hero lilas, trio d'arguments, parcours
   ════════════════════════════════════════════════════════════════ */

.hero-lilas { background: var(--lilas); padding: 34px 0 60px; }
.hero-lilas__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 46px; align-items: start;
}
.hero-lilas h1 { font-size: 40px; line-height: 1.15; letter-spacing: -1.4px; margin: 10px 0 14px; }
.hero-lilas__accroche { font-size: 18px; color: var(--encre-douce); max-width: 520px; }
.hero-lilas .puces-coche { margin: 22px 0 26px; }

.preuve-rang { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.preuve-rang__texte { font-size: 14.5px; color: var(--gris); }

.video-carte {
  margin-top: 28px; border-radius: var(--r-20); overflow: hidden; background: #fff;
  box-shadow: var(--ombre); position: relative; aspect-ratio: 16 / 9; max-width: 520px;
  display: flex; align-items: center; justify-content: center;
}
.video-carte__media { width: 100%; height: 100%; object-fit: cover; }
.video-carte__lecture {
  position: absolute; width: 62px; height: 62px; border-radius: 50%; border: 0;
  background: var(--theme); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--ombre-mid); transition: transform .2s ease, background-color .2s ease;
}
.video-carte__lecture:hover { transform: scale(1.08); background: var(--theme-hover); }
.video-carte__legende {
  position: absolute; right: 14px; bottom: 12px; font-size: 12px; color: var(--gris-tres);
}

.carte-inscription {
  background: #fff; border-radius: var(--r-20); box-shadow: var(--ombre-mid); padding: 28px;
}
.carte-inscription h2 { font-size: 22px; margin-bottom: 4px; }
.carte-inscription__intro { color: var(--gris); font-size: 14.5px; margin-bottom: 20px; }
.carte-inscription .champ input, .carte-inscription .champ select { font-size: 15px; }
.carte-inscription__mention { font-size: 12.5px; color: var(--gris-tres); text-align: center; margin: 12px 0 0; }

.bande-trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--violet-gris); border-radius: var(--r-16); background: #fff;
  margin-top: -32px; position: relative; z-index: 2; overflow: hidden;
}
.trio { display: flex; gap: 14px; padding: 22px 24px; border-left: 1px solid var(--violet-gris); }
.trio:first-child { border-left: 0; }
.trio__ico {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-10);
  background: var(--violet-pale); color: var(--theme);
  display: flex; align-items: center; justify-content: center;
}
.trio__titre { font-weight: 700; font-size: 15px; }
.trio__texte { color: var(--gris); font-size: 14px; line-height: 1.5; }

.parcours { display: flex; flex-direction: column; gap: 26px; }
.parcours__item { display: flex; gap: 16px; }
.parcours__num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--theme); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.parcours__titre { font-weight: 700; font-size: 17px; }
.parcours__texte { color: var(--gris); font-size: 15px; }
.capture {
  border-radius: var(--r-20); background: var(--violet-fond); min-height: 320px;
  position: relative; overflow: hidden;
}
.capture::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(199, 62, 155, .06) 0 12px, transparent 12px 24px);
}
.capture__legende { position: absolute; right: 14px; bottom: 12px; font-size: 12px; color: var(--gris-tres); z-index: 1; }

.encart-preuve {
  background: var(--violet-pale); border-radius: var(--r-20); padding: 34px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center;
}
.encart-preuve .citation { font-size: 20px; line-height: 1.5; }
.encart-preuve__chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.chiffre-cle { min-width: 0; }
.chiffre-cle__valeur { font-size: 32px; font-weight: 700; color: var(--theme); letter-spacing: -1px; }
.chiffre-cle__libelle { font-size: 14px; color: var(--gris); line-height: 1.4; }

/* ════════════════════════════════════════════════════════════════
   ANNUAIRE — intro pleine largeur, filtres à choix multiple
   ════════════════════════════════════════════════════════════════ */

.annuaire-intro {
  color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.6;
  max-width: none; width: 100%; margin: 14px 0 0;
}
.hero-navy .barre-recherche { margin-top: 30px; }

/* ⚠️  DE VRAIES CASES À COCHER, DONC UNE VRAIE SÉLECTION MULTIPLE.
       Les filtres étaient des liens : un seul choix actif à la fois.
       Ce sont maintenant des `input[type=checkbox]` rattachés à la barre
       de recherche par leur attribut `form` — cocher deux spécialités
       ADDITIONNE les résultats (SQL `IN`), elle ne les croise pas : une
       fiche n'a qu'une catégorie en base. */
.filtre-choix { padding: 4px 2px; cursor: pointer; border-radius: var(--r-08); transition: background-color .16s ease, color .16s ease; }
.filtre-choix:hover { background: var(--theme-voile); }
.filtre-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.filtre-choix__case { width: 24px; height: 24px; border-radius: var(--r-06); border-width: 2px; transition: background-color .16s ease, border-color .16s ease; }
.filtre-choix__case .ico { width: 13px; height: 13px; }
.filtre-choix input:checked ~ .filtre-choix__case { background: var(--theme); border-color: var(--theme); }
.filtre-choix input:checked ~ .filtre-choix__case .ico { opacity: 1; }
.filtre-choix input:checked ~ .filtre-choix__libelle { color: var(--encre); font-weight: 600; }
.filtre-choix input:focus-visible ~ .filtre-choix__case { outline: 2px solid var(--theme); outline-offset: 2px; }
.panneau-filtres__aide { font-size: 13px; color: var(--gris-tres); margin: -6px 0 10px; }

@media (max-width: 991px) {
  .auth-cadre { grid-template-columns: 1fr; }
  .auth-vitre { display: none; }
  .hero-lilas__grille { grid-template-columns: 1fr; }
  .bande-trio { grid-template-columns: 1fr; margin-top: 0; }
  .trio { border-left: 0; border-top: 1px solid var(--violet-gris); }
  .trio:first-child { border-top: 0; }
  .encart-preuve { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 767px) {
  .auth-volet, .auth-carte { padding: 28px 22px; }
  .auth-volet h1 { font-size: 28px; }
  .auth-carte h1 { font-size: 27px; }
  .hero-lilas h1 { font-size: 28px; }
  .encart-preuve { padding: 24px; }
  .encart-preuve__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

  /* Dans le tiroir mobile, la bulle de survol gênerait l'empilement. */
  .nav a { padding: 11px 0; border-radius: 0; }
  .nav > a:hover, .nav__parent:hover { background: none; transform: none; }
  .nav > a::after, .nav__parent::after { display: none; }
}

/* Choix de la langue en pied de tunnel — l'en-tête du site n'y est pas. */
.auth-langues { display: flex; gap: 10px; }
.auth-langues a { color: var(--gris-tres); font-size: 13px; font-weight: 600; }
.auth-langues a:hover { color: var(--theme); text-decoration: none; }
.auth-langues a.is-actif { color: var(--theme); }

/* ⚠️  LE RETOUR AU SITE RESTE POSSIBLE. Sans en-tête, le logo est la seule
       porte de sortie : on la rend visible plutôt que devinable. */
.auth-retour-site { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gris); }
.auth-retour-site:hover { color: var(--theme); text-decoration: none; }

/* ════════════════════════════════════════════════════════════════
   ANNUAIRE — pages reprises des maquettes

   ⚠️  LES MAQUETTES ARRIVAIENT EN STYLES INLINE : 250 ATTRIBUTS `style`.

       Collées telles quelles, elles s'affichaient SANS AUCUN STYLE : la
       politique de sécurité du site interdit `style-src 'unsafe-inline'`
       — c'est elle qui empêche un attribut `style` glissé dans une fiche
       d'annuaire de s'appliquer chez le visiteur, et cette table sera un
       jour éditable par les cabinets eux-mêmes. Les valeurs sont donc
       portées ici, en classes, à l'identique.

   ⚠️  LE CADRE DE 1440 px DES MAQUETTES N'EST PAS REPRIS.

       Elles sont livrées dans une carte blanche à coins arrondis, avec
       ombre portée : c'est un rendu de présentation, pas une page. Repris
       tel quel, le site s'afficherait dans une fenêtre au milieu de
       l'écran. Le contenu est intégré à la largeur du site.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero de l'annuaire : diagonale violet / blanc ── */
.annu-hero { position: relative; background: var(--violet-pale); overflow: hidden; }
.annu-hero__fond {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--violet-pale) 46%, #fff 46%);
}
/* ⚠️  LA COLONNE DE LA CARTE EST ÉLARGIE, PAS LA CARTE SEULE.

       Grossir la carte dans une colonne de 430 px la ferait déborder ou
       rétrécirait sa marge intérieure. C'est la colonne qui décide de sa
       largeur ; `minmax(0, 1fr)` à gauche absorbe la différence. */
.annu-hero__grille {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 520px;
  gap: 48px; align-items: center; padding: 54px 0 60px;
}
.annu-hero h1 { font-size: 42px; line-height: 1.15; letter-spacing: -1px; margin: 0 0 18px; }
.annu-hero__texte { font-size: 17px; line-height: 1.65; color: var(--gris); max-width: 520px; margin: 0 0 16px; }

/* Carte de recherche posée sur la diagonale. */
/* ⚠️  C'EST L'ACTION PRINCIPALE DE LA PAGE : ELLE DOIT LE MONTRER.

       L'annuaire ne liste plus de fiches hors recherche — la carte est donc
       la seule chose à faire sur cet écran. À 30 px de marge et 19 px de
       titre, elle passait pour un encart secondaire à côté du texte du hero.

       Le champ passe à 52 px de haut : c'est la taille d'un champ qu'on vise
       au doigt sans réfléchir, et celle du bouton posé à côté. */
.annu-chercher {
  background: #fff; border-radius: var(--r-20); padding: 40px;
  box-shadow: var(--ombre-mid);
}
.annu-chercher__titre { font-size: 24px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 10px; line-height: 1.2; }
.annu-chercher__texte { font-size: 15px; line-height: 1.6; color: var(--gris); margin: 0 0 24px; }
.annu-chercher__ligne { display: flex; gap: 10px; }
.annu-chercher__ligne input[type="search"] {
  flex: 1; min-width: 0; border: 1px solid var(--trait); border-radius: var(--r-12);
  padding: 15px 18px; font: inherit; font-size: 16px; color: var(--encre); background: #fff;
}
.annu-chercher__ligne .btn { padding: 15px 26px; font-size: 16px; }
.annu-chercher__ligne input[type="search"]::placeholder { color: #9A9AAE; }

/* ── Grille des secteurs ── */
.annu-secteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.annu-secteur {
  display: block; border: 1px solid var(--trait); border-radius: var(--r-12);
  padding: 18px 20px; background: #fff; transition: border-color .15s ease, transform .15s ease;
}
.annu-secteur:hover { border-color: var(--theme); transform: translateY(-2px); text-decoration: none; }
.annu-secteur__nom { font-size: 15.5px; font-weight: 600; color: var(--encre); }
.annu-secteur__compte { font-size: 13px; color: var(--gris-tres); margin-top: 4px; }

/* ── Bandeau « ajoutez votre cabinet » ── */
.annu-ajout {
  display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 48px;
  align-items: center; background: var(--violet-pale); border-radius: var(--r-20);
  padding: 44px 46px;
}
.annu-ajout h2 { font-size: 26px; letter-spacing: -.5px; margin: 0 0 14px; }
.annu-ajout p { font-size: 15.5px; line-height: 1.65; color: var(--gris); margin: 0; }

/* ── Page catégorie : groupes par pays ── */
.annu-cat__intro { font-size: 16px; line-height: 1.7; color: var(--gris); max-width: 780px; }
.annu-pays { margin-top: 38px; }
.annu-pays h2 { font-size: 20px; letter-spacing: -.3px; margin: 0 0 16px; }
.annu-vide {
  border: 1px dashed var(--trait); border-radius: var(--r-12);
  padding: 30px; text-align: center; color: var(--gris-tres); font-size: 15px;
}

/* ── Fiche cabinet ── */
.annu-fiche__tete { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.annu-fiche__logo {
  width: 88px; height: 88px; flex: none; border-radius: var(--r-12);
  border: 1px solid var(--trait); background: #fff; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
  font-size: 26px; font-weight: 700; color: var(--theme);
}
.annu-fiche__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.annu-fiche h1 { font-size: 36px; line-height: 1.2; letter-spacing: -.8px; margin: 0 0 10px; }
.annu-fiche__meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.annu-fiche__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start;
}
.annu-bloc { background: #fff; border: 1px solid var(--trait); border-radius: var(--r-20); padding: 30px; }
.annu-bloc h2 { font-size: 24px; letter-spacing: -.4px; margin: 0 0 16px; }
.annu-bloc p { font-size: 15.5px; line-height: 1.75; color: var(--gris); }

.annu-coord { display: flex; flex-direction: column; gap: 14px; }
.annu-coord__ligne { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--encre-douce); }
.annu-coord__ligne .ico { flex: none; width: 18px; height: 18px; color: var(--theme); margin-top: 2px; }

/* ⚠️  LE SOMMAIRE SUIT LE DÉFILEMENT, MAIS PAS SUR MOBILE.
       Collé en haut d'un petit écran, il mange le tiers de la hauteur
       utile pour deux liens. */
.annu-sommaire { position: sticky; top: 90px; }
.annu-sommaire h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .6px; color: var(--gris-tres); }
.annu-sommaire a { display: block; padding: 9px 0; font-size: 15px; border-bottom: 1px solid var(--trait); }

.annu-note { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--gris); }

@media (max-width: 991px) {
  .annu-hero__grille, .annu-ajout, .annu-fiche__grille { grid-template-columns: 1fr; gap: 28px; }
  .annu-hero__fond { background: var(--violet-pale); }
  .annu-secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .annu-sommaire { position: static; }
  .annu-hero h1 { font-size: 30px; }
  .annu-fiche h1 { font-size: 27px; }
}
@media (max-width: 575px) {
  .annu-secteurs { grid-template-columns: 1fr; }
  .annu-chercher__ligne { flex-direction: column; }
}

/* Cadre d'aperçu du backoffice — la page servie dans l'iframe de l'éditeur. */
.apercu-cadre { background: #fff; min-height: 100vh; }
.apercu-vide {
  padding: 60px 24px; text-align: center; color: var(--gris-tres); font-size: 15px;
}

/* Bandeau de l'aperçu : signale une section servie dans une autre langue. */
.apercu-repli {
  padding: 10px 16px; background: var(--violet-pale); color: var(--encre-douce);
  font-size: 13px; border-bottom: 1px solid var(--trait);
}

/* Réponse à une recherche sans résultat : une ligne, pas un panneau. */
/* ⚠️  `.resultats__aucun` retirée : l'état vide est devenu un bloc
       d'appel à l'action — voir `.annu-vide`. */

/* ── Inscription à la newsletter, avec consentement ─────────────────
   ⚠️  LA CASE PASSE SOUS LE CHAMP, PAS À CÔTÉ.

       Sur une ligne, elle serait tassée entre l'adresse et le bouton, et
       se cocherait sans être lue. Un consentement qu'on ne lit pas n'en
       est pas un — c'est la première chose que vérifierait un contrôle. */
.cta-navy__actions--consentement { flex-direction: column; align-items: stretch; gap: 12px; }
.cta-navy__ligne { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-navy__ligne .champ-navy { flex: 1; min-width: 220px; }

.cta-navy__consentement {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .82);
  cursor: pointer;
}
.cta-navy__consentement input { margin-top: 3px; flex: none; width: 16px; height: 16px; cursor: pointer; }

@media (max-width: 767px) {
  .cta-navy__ligne .champ-navy { min-width: 0; }
}

/* ── Notifications éphémères, en bas de l'écran ─────────────────────
   ⚠️  `position: fixed` ET NON `absolute`.
       Le message doit rester visible même si la page défile pendant les
       quelques secondes où il s'affiche. */
.notifs {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 10px;
  align-items: center; width: min(92vw, 520px);
  /* ⚠️  Le conteneur ne capte pas les clics : vide, il couvrirait le bas
         de la page et rendrait les liens qui s'y trouvent inutilisables. */
  pointer-events: none;
}

.notif {
  pointer-events: auto;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; border-radius: 12px;
  font-size: 15px; line-height: 1.45;
  box-shadow: 0 12px 32px rgba(27, 27, 58, .22);
  animation: notif-entree .22s ease-out;
}
.notif--succes { background: #14532D; color: #fff; }
.notif--erreur { background: var(--alerte); color: #fff; }
.notif__ico { flex: none; display: flex; }
.notif__ico .ico { width: 19px; height: 19px; }
.notif__texte { flex: 1; }

.notif__fermer {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 7px;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.notif__fermer:hover { background: rgba(255, 255, 255, .26); }

.notif--sort { animation: notif-sortie .3s ease-in forwards; }

@keyframes notif-entree {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes notif-sortie {
  to { opacity: 0; transform: translateY(10px); }
}

/* ⚠️  QUI DEMANDE MOINS D'ANIMATION N'EN REÇOIT PAS.
       Un mouvement inattendu en bas de l'écran peut déclencher un malaise
       chez les personnes sensibles au mouvement ; le message, lui, reste. */
@media (prefers-reduced-motion: reduce) {
  .notif, .notif--sort { animation: none; }
}

/* ── Lecteur vidéo en fenêtre ───────────────────────────────────────
   ⚠️  RATIO 16/9 PAR `aspect-ratio`, PAS PAR LE VIEUX PADDING.
       L'astuce du `padding-bottom: 56.25%` demande un conteneur en
       position absolue et se règle mal sur les écrans très hauts. */
.video-modale {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.video-modale[hidden] { display: none; }
.video-modale__voile {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
  background: rgba(15, 15, 35, .82);
}
.video-modale__boite { position: relative; width: min(94vw, 960px); }
.video-modale__cadre {
  aspect-ratio: 16 / 9; width: 100%; background: var(--encre);
  border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 15, 35, .5);
}
.video-modale__cadre iframe { width: 100%; height: 100%; display: block; border: 0; }
.video-modale__croix {
  position: absolute; top: -40px; right: 0; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: rgba(255, 255, 255, .16);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.video-modale__croix:hover { background: rgba(255, 255, 255, .3); }

/* ⚠️  LE FOND NE DÉFILE PLUS TANT QUE LA FENÊTRE EST OUVERTE.
       Sinon la molette fait glisser la page derrière la vidéo. */
body.a-modale-ouverte { overflow: hidden; }

/* La miniature remplit son cadre sans le déformer. */
.demo-carte__image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ⚠️  `.nav__sous-inerte` A ÉTÉ REMPLACÉE PAR `.lang-item--inerte`.

       Elle portait ses propres garnitures — `padding: 11px 0` contre
       `9px 12px` pour les liens voisins — et le code de langue verrouillé
       se retrouvait décalé, sur une ligne plus haute que les autres. Le
       menu des langues partage désormais une seule grille : voir la
       section « Menu des langues » plus haut. */

/* ── Carte des cabinets ─────────────────────────────────────────────
   ⚠️  UNE HAUTEUR EXPLICITE, SINON LEAFLET NE S'AFFICHE PAS.
       Le conteneur est vide au chargement : sans hauteur, il fait zéro
       pixel et la carte se dessine dans le néant. C'est l'erreur la plus
       courante avec cette bibliothèque. */
/* ⚠️  `.carte-annuaire` retirée : le conteneur Leaflet n'existe plus. */

.carte-annuaire__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.carte-annuaire__liste li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.carte-annuaire__ville { color: var(--gris); font-size: 14px; }


/* ── Panneau de navigation mobile ───────────────────────────────────
   ⚠️  IL GLISSE DEPUIS LA GAUCHE, SOUS LE BURGER QUI L'OUVRE.
       Un panneau qui arrive du côté opposé au bouton fait chercher des yeux
       ce qu'on vient de déclencher. */
@media (max-width: 767px) {
  /* Le bandeau : burger à gauche, logo centré, rien à droite. */
  .entete__inner { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; }
  .entete__inner .logo { grid-column: 2; justify-self: center; }
  .burger { grid-column: 1; margin-left: 0; }

  /* ⚠️  LES ACTIONS QUITTENT LA BARRE, ELLES SONT DANS LE PANNEAU.
         Les garder ici écraserait le logo — c'est ce qui se passait avant. */
  .entete__actions { display: none; }

  .nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 250;
    width: min(84vw, 340px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border: 0; padding: 0 0 24px;
    /* ⚠️  `translateX` PLUTÔT QUE `left` : la transformation est portée par
           le compositeur, le glissement reste fluide sur un téléphone. */
    transform: translateX(-102%);
    transition: transform .24s ease;
    /* ⚠️  LE PANNEAU DÉFILE TOUT SEUL.
           Douze entrées de menu, cinq langues et deux boutons dépassent la
           hauteur d'un téléphone : sans ça, le bas est inatteignable. */
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 28px rgba(15, 15, 35, .18);
  }
  .nav.is-ouvert { transform: translateX(0); }

  .nav__voile {
    position: fixed; inset: 0; z-index: 240; border: 0; padding: 0;
    background: rgba(15, 15, 35, .5);
    opacity: 0; pointer-events: none; transition: opacity .24s ease;
  }
  /* ⚠️  LA CLASSE VIENT DU BODY, PAS D'UN SÉLECTEUR FRÈRE.

         Le voile est déclaré AVANT la nav dans le document — pour être
         sous elle sans jouer sur les z-index. Un sélecteur `~` ne remonte
         donc pas jusqu'à lui, et `:has()` n'est pas partout. Le JS pose
         déjà `a-menu-ouvert` sur le body : on s'en sert. */
  body.a-menu-ouvert .nav__voile { opacity: 1; pointer-events: auto; }

  .nav__tete {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--trait); position: sticky; top: 0;
    background: #fff; z-index: 2;
  }
  .nav__titre { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
  .nav__croix { width: 34px; height: 34px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--encre); cursor: pointer; }

  .nav a { padding: 13px 20px; border-bottom: 1px solid var(--trait); }

  .nav__actions { display: flex; flex-direction: column; gap: 10px; padding: 20px; margin-top: auto; }
  .nav__actions .btn { width: 100%; }

  /* Le fond ne défile plus derrière le panneau. */
  body.a-menu-ouvert { overflow: hidden; }
}

/* Sur grand écran, le panneau redevient une barre : ni voile, ni en-tête,
   ni boutons dupliqués. */
@media (min-width: 768px) {
  .nav__voile, .nav__tete, .nav__actions { display: none; }
}

/* ── Ancre d'une question de FAQ ────────────────────────────────────
   ⚠️  DISCRÈTE, MAIS PAS INVISIBLE AU CLAVIER.
       Elle n'apparaît qu'au survol de la question — sinon trente dièses
       parasitent la lecture — mais reste atteignable à la tabulation, où
       le survol n'existe pas. */
.accordeon__ancre {
  opacity: 0; margin-left: 8px; color: var(--gris-tres);
  font-weight: 400; text-decoration: none; transition: opacity .14s ease;
}
.accordeon__item summary:hover .accordeon__ancre,
.accordeon__ancre:focus-visible { opacity: 1; }
.accordeon__ancre:hover { color: var(--theme); }

/* ⚠️  L'ANCRE VISÉE SE DÉTACHE ET NE PASSE PAS SOUS L'EN-TÊTE FIXE.
       Sans `scroll-margin-top`, la question ciblée par un lien partagé
       arrive cachée derrière la barre du haut. */
.accordeon__item { scroll-margin-top: 90px; }
.accordeon__item:target { box-shadow: 0 0 0 2px var(--theme); border-radius: var(--r-08, 8px); }

/* ── Navigation de l'espace connecté ────────────────────────────────
   ⚠️  GROUPÉE PAR INTENTION, PAS PAR ORDRE D'ÉCRITURE.
       Les intertitres — Recrutement, Diffusion, Échanges — coûtent trois
       lignes et font gagner le balayage : on cherche « où je réponds à un
       candidat », pas « la sixième entrée ». */
.app-nav { display: flex; flex-direction: column; gap: 22px; padding: 4px 0; }
.app-nav__groupe { display: flex; flex-direction: column; gap: 2px; }
.app-nav__titre {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gris-tres); padding: 0 14px 6px;
}

.app-nav__lien {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: 10px;
  font-size: 14.5px; color: var(--encre-douce);
  transition: background .14s ease, color .14s ease;
}
.app-nav__lien:hover { background: var(--violet-pale); color: var(--theme); text-decoration: none; }
.app-nav__lien.is-actif { background: var(--theme-voile); color: var(--theme); font-weight: 600; }
.app-nav__lien .ico { width: 18px; height: 18px; flex: none; }
.app-nav__libelle { flex: 1; min-width: 0; }

/* ⚠️  LE BADGE EST À DROITE, PAS COLLÉ AU LIBELLÉ.
       Aligné en bout de ligne, il se lit en colonne d'un groupe à l'autre :
       on voit d'un coup où l'attention est demandée. */
.app-nav__badge {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--theme); color: #fff;
  border-radius: 10px; font-size: 11.5px; font-weight: 700;
}
.app-nav__externe { flex: none; font-size: 12px; color: var(--gris-tres); }

/* ⚠️  UNE ENTRÉE À VENIR SE VOIT SANS SE CLIQUER.
       Elle annonce ce qui arrive plutôt que de laisser chercher une page
       vue en maquette — mais ne prétend pas être un lien. */
.app-nav__lien.est-a-venir { color: var(--gris-tres); cursor: default; }
.app-nav__lien.est-a-venir:hover { background: transparent; color: var(--gris-tres); }
.app-nav__bientot {
  flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gris-tres);
  background: var(--trait-clair, #EDEBF3); padding: 2px 7px; border-radius: 8px;
}

/* ── Écrans de l'espace connecté (maquette v9) ──────────────────────
   ⚠️  DES BRIQUES, PAS DES STYLES PAR ÉCRAN.
       `app-entete`, `app-filtres`, `app-vide` servent aux seize écrans :
       les styler une fois évite qu'ils divergent au fil des ajouts. */
.app-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.app-entete h1 { font-size: 28px; letter-spacing: -.6px; margin: 0; }
.app-entete__sous { color: var(--gris); font-size: 14.5px; margin: 4px 0 0; }

.app-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.app-puce {
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px;
  background: #fff; border: 1px solid var(--trait); color: var(--encre-douce);
}
.app-puce:hover { border-color: var(--theme); color: var(--theme); text-decoration: none; }
.app-puce.is-actif { background: var(--theme); border-color: var(--theme); color: #fff; }

.app-vide { background: #fff; border-radius: var(--r-12); padding: 48px 32px; text-align: center; }
.app-vide h2 { font-size: 19px; margin: 0 0 8px; }
.app-vide p { color: var(--gris); margin: 0 0 20px; }

/* ── Cartes de candidature ──────────────────────────────────────────
   ⚠️  LE LISERÉ SIGNALE LE NON-LU SANS COULEUR DE FOND.
       Un fond teinté sur les nouvelles rendrait la liste bariolée dès
       qu'il y en a trois ; un liseré à gauche se voit en balayant. */
.cv-liste { display: flex; flex-direction: column; gap: 12px; }
.cv-carte { background: #fff; border-radius: var(--r-12); padding: 18px 20px; border-left: 3px solid transparent; }
.cv-carte.est-nouveau { border-left-color: var(--theme); }
.cv-carte__tete { display: flex; align-items: center; gap: 13px; }
.cv-carte__initiales {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--violet-pale); color: var(--theme); font-weight: 700; font-size: 14px;
}
.cv-carte__identite { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-carte__meta { font-size: 13.5px; color: var(--gris); }
.cv-carte__pastille {
  flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--theme-voile); color: var(--theme); padding: 3px 9px; border-radius: 999px;
}
.cv-carte__resume { color: var(--encre-douce); font-size: 14.5px; margin: 12px 0 0; }
.cv-carte__actions { display: flex; gap: 8px; margin-top: 14px; }

/* ── Fils de messages ───────────────────────────────────────────────
   ⚠️  LA CARTE ENTIÈRE EST CLIQUABLE.
       Un lien sur le seul nom fait viser trois mots dans une carte de
       cent pixels de haut. */
.cv-carte--lien { display: block; color: inherit; }
.cv-carte--lien:hover { background: var(--violet-pale); text-decoration: none; }
.cv-carte__date { flex: none; font-size: 13px; color: var(--gris-tres); }

/* ── Aide ───────────────────────────────────────────────────────────*/
.aide-groupe { margin-bottom: 26px; }
.aide-groupe__titre { font-size: 17px; margin: 0 0 12px; }
.aide-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border-radius: var(--r-12); padding: 20px 24px; margin-top: 8px;
}

/* ── Abonnement ─────────────────────────────────────────────────────*/
.abo-carte { background: #fff; border-radius: var(--r-12); padding: 24px; margin-bottom: 20px; }
.abo-carte__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.abo-carte__nom { font-size: 20px; font-weight: 700; }
.abo-carte__prix { font-size: 15px; color: var(--gris); margin-left: 10px; }
.abo-carte__note { color: var(--gris); font-size: 14.5px; margin: 12px 0 0; }

.abo-usage__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.abo-usage__bloc { background: #fff; border-radius: var(--r-12); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.abo-usage__valeur { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.abo-usage__libelle { font-size: 13.5px; color: var(--gris); }

/* ⚠️  LA JAUGE SE RÈGLE PAR CLASSE, PAS PAR `style=""`.
       La politique de sécurité interdit le style en ligne : la largeur
       passe par des paliers de 5 %, comme les barres du tableau de bord. */
.abo-usage__jauge { display: block; height: 6px; border-radius: 3px; background: var(--violet-pale); overflow: hidden; margin-top: 4px; }
.abo-usage__part { display: block; height: 100%; background: var(--theme); border-radius: 3px; }

.abo-usage__part[data-part="0"] { width: 0%; }
.abo-usage__part[data-part="5"] { width: 5%; }
.abo-usage__part[data-part="10"] { width: 10%; }
.abo-usage__part[data-part="15"] { width: 15%; }
.abo-usage__part[data-part="20"] { width: 20%; }
.abo-usage__part[data-part="25"] { width: 25%; }
.abo-usage__part[data-part="30"] { width: 30%; }
.abo-usage__part[data-part="35"] { width: 35%; }
.abo-usage__part[data-part="40"] { width: 40%; }
.abo-usage__part[data-part="45"] { width: 45%; }
.abo-usage__part[data-part="50"] { width: 50%; }
.abo-usage__part[data-part="55"] { width: 55%; }
.abo-usage__part[data-part="60"] { width: 60%; }
.abo-usage__part[data-part="65"] { width: 65%; }
.abo-usage__part[data-part="70"] { width: 70%; }
.abo-usage__part[data-part="75"] { width: 75%; }
.abo-usage__part[data-part="80"] { width: 80%; }
.abo-usage__part[data-part="85"] { width: 85%; }
.abo-usage__part[data-part="90"] { width: 90%; }
.abo-usage__part[data-part="95"] { width: 95%; }
.abo-usage__part[data-part="100"] { width: 100%; }

.abo-factures { background: #fff; border-radius: var(--r-12); padding: 20px 24px; margin-top: 20px; }
.abo-usage { margin-top: 20px; }

/* ── Fil de discussion ──────────────────────────────────────────────
   ⚠️  HAUTEUR FIXE ET DÉFILEMENT INTERNE.
       Un fil qui allonge la page fait remonter la zone de saisie hors de
       l'écran à chaque message reçu. */
.fil { background: #fff; border-radius: var(--r-12); display: flex; flex-direction: column; overflow: hidden; }
.fil__messages { height: 52vh; min-height: 320px; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.fil__vide { color: var(--gris); text-align: center; margin: auto; }

.fil__message { display: flex; flex-direction: column; gap: 4px; max-width: 76%; }
.fil__message.est-moi { align-self: flex-end; align-items: flex-end; }
.fil__bulle { background: var(--violet-pale); padding: 11px 15px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.fil__message.est-moi .fil__bulle { background: var(--theme); color: #fff; }
.fil__heure { font-size: 11.5px; color: var(--gris-tres); }

.fil__saisie { display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--trait); align-items: flex-end; }
.fil__saisie textarea { flex: 1; resize: vertical; min-height: 44px; }
.fil__etat { padding: 0 22px 12px; font-size: 12.5px; color: var(--gris-tres); min-height: 18px; margin: 0; }

/* ── FAQ publique : pleine largeur ───────────────────────────────────
   ⚠️  LES QUESTIONS PASSENT DEVANT LA COLONNE D'ANCRES.

       `faq-mise-en-page` posait la colonne des thèmes à GAUCHE, sur toute
       la hauteur : les réponses — du texte long, c'est l'essentiel de la
       page — se serraient sur ce qui restait. Les ancres, elles, tiennent
       en une dizaine de mots.

       Elles passent donc au-dessus, en bandeau, et les accordéons occupent
       toute la largeur. */
.faq-plein { padding: 40px 0 72px; }

/* ⚠️  `.faq-plein__aside` A DISPARU AVEC LA RANGÉE DE THÈMES.
       Elle n'enveloppait plus qu'un encart, désormais placé sous les
       questions — voir views/vitrine/faq_publics.ejs. */

.faq-plein__filtre { margin-bottom: 24px; max-width: 520px; }

/* L'encart d'aide en fin de page : c'est là qu'on arrive quand la réponse
   n'était pas dans la liste. Centré, il ne se confond pas avec une
   question de plus. */
.faq-aide--bas { margin: 40px auto 0; max-width: 560px; text-align: center; }

/* ⚠️  LE HERO N'A QU'UNE COLONNE ICI.
       `annu-hero__grille` en pose deux — texte et carte de recherche. Sans
       cette variante, la moitié droite resterait vide et le titre serait
       tassé à gauche sur la moitié de l'écran. */
.annu-hero__grille--simple { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .faq-plein__aside { flex-direction: column; }
  .faq-plein__aside .faq-aide { max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════
   MENU MOBILE — le tiroir jusqu'à 991 px

   ⚠️  LE SEUIL ÉTAIT À 767 px, ET C'EST TROP BAS.

       Entre 768 et 991 px — un iPad en portrait fait exactement 768,
       largeur que proposent d'emblée tous les outils de test responsive —
       le bouton disparaissait (`.burger` n'apparaît qu'en dessous de 768)
       pendant que la barre horizontale, elle, restait affichée avec ses
       sept entrées et ses deux boutons d'action. Elle débordait ou passait
       à la ligne, sans aucun moyen de la replier.

       Ce bloc étend le tiroir jusqu'à 991 px. Il est placé en fin de
       feuille pour l'emporter sur les règles antérieures sans avoir à
       toucher aux cinq media queries où le menu est éparpillé — chacune
       mêlant des règles qui, elles, doivent rester à 767.

   ⚠️  IL FAUT AUSSI NEUTRALISER `@media (min-width: 768px)`.

       Cette règle masque `.nav__voile`, `.nav__tete` et `.nav__actions`
       au-dessus de 767 px. Sans les réafficher ici, le tiroir s'ouvrirait
       entre 768 et 991 sans en-tête, sans voile et sans boutons — un
       panneau sans moyen de le refermer.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    width: 42px; height: 38px; margin-left: auto; background: transparent;
    border: 1px solid var(--trait); border-radius: var(--r-06); cursor: pointer;
  }

  /* Les actions sont reprises dans le tiroir : les garder ici écraserait
     le logo sur les largeurs intermédiaires. */
  .entete__actions { display: none; }

  .nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 250;
    width: min(84vw, 340px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border: 0; padding: 0 0 24px;
    transform: translateX(-102%);
    transition: transform .24s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 28px rgba(15, 15, 35, .18);
  }
  .nav.is-ouvert { transform: translateX(0); }

  .nav__voile {
    display: block;
    position: fixed; inset: 0; z-index: 240; border: 0; padding: 0;
    background: rgba(15, 15, 35, .5);
    opacity: 0; pointer-events: none; transition: opacity .24s ease;
  }
  body.a-menu-ouvert .nav__voile { opacity: 1; pointer-events: auto; }

  .nav__tete {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--trait);
    position: sticky; top: 0; background: #fff; z-index: 2;
  }
  .nav__actions { display: flex; flex-direction: column; gap: 10px; padding: 20px; margin-top: auto; }
  .nav__actions .btn { width: 100%; }

  .nav a { padding: 13px 20px; border-bottom: 1px solid var(--trait); }

  body.a-menu-ouvert { overflow: hidden; }
}

/* Au-delà, le panneau redevient une barre : ni voile, ni en-tête, ni
   boutons dupliqués. */
@media (min-width: 992px) {
  .nav__voile, .nav__tete, .nav__actions { display: none; }
}

/* La référence d'incident : discrète, mais sélectionnable d'un double-clic. */
.erreur__ref { margin-top: 22px; font-size: 14px; color: var(--gris); }
.erreur__ref code {
  background: var(--violet-pale); border-radius: 6px; padding: 3px 8px;
  font-size: 14px; letter-spacing: .08em; user-select: all;
}

/* ── FAQ : carte du bandeau et champ de filtre ───────────────────────
   ⚠️  LE CHAMP AVAIT UNE BORDURE TRANSPARENTE.

       `border: 1px solid transparent` réserve la place sans rien montrer :
       le champ se confondait avec le fond blanc de la page, et rien ne
       disait qu'on pouvait y écrire. Elle devient visible au repos et
       prend la couleur du thème au focus. */
.faq-plein__filtre {
  border-color: var(--trait);
  box-shadow: 0 1px 2px rgba(34, 34, 59, .04);
  transition: border-color .15s, box-shadow .15s;
}
.faq-plein__filtre:hover { border-color: var(--tiret); }
.faq-plein__filtre:focus-within {
  border-color: var(--theme);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}


/* ⚠️  LE BLOC « AUCUN RÉSULTAT » N'EXISTE QUE PENDANT UNE RECHERCHE.
       Il est révélé par `app.js` via `.est-visible` — jamais rendu visible
       au chargement, où il annoncerait un vide qui n'existe pas. */
.faq-vide {
  display: none; text-align: center; padding: 44px 24px;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-14);
  margin-bottom: 24px;
}
.faq-vide.est-visible { display: block; }
.faq-vide strong { display: block; font-size: 18px; margin-bottom: 8px; }
.faq-vide p { font-size: 14.5px; color: var(--gris); margin-bottom: 18px; }

/* ── Accueil : réassurance et bande de preuve ────────────────────────
   ⚠️  LES TROIS PREUVES SONT SOUS LE BANDEAU, PAS EN BAS DE PAGE.

       Elles répondent aux objections qu'on se formule en lisant la
       promesse. Plus bas, elles arrivent après la décision de partir. */
.hero-video__rassurance {
  margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .78);
}

.preuves {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r-14);
  padding: 24px 28px;
}
.preuves__item { display: flex; align-items: flex-start; gap: 13px; }
.preuves__item .ico {
  flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--theme);
}
.preuves__item strong { display: block; font-size: 15.5px; margin-bottom: 3px; }
.preuves__item span { font-size: 14px; line-height: 1.55; color: var(--gris); }

@media (max-width: 860px) {
  .preuves { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
}

/* ⚠️  LE SECOND BOUTON D'AIGUILLAGE A SA PROPRE TEINTE.

       Les deux mènent à des inscriptions différentes et ont le même poids
       dans la page. Les distinguer par la couleur — et non par la taille —
       dit qu'il s'agit d'un choix, pas d'une action principale suivie de
       son repli. */
.btn--wr { background: var(--violet-tete, #5B21B6); color: #fff; }
.btn--wr:hover { filter: brightness(.88); color: #fff; text-decoration: none; }

/* ── Sections de la page d'accueil ───────────────────────────────────
   ⚠️  CES CLASSES ACCOMPAGNENT `accueil-sections.html`.

       Le HTML collé dans l'éditeur ne porte aucun style en ligne : la CSP
       les bloquerait, et une couleur écrite en dur survivrait au prochain
       changement de palette. Les six règles manquantes sont donc ici. */

.section--alt { background: var(--violet-pale); }

.section__intro {
  max-width: 720px; margin: 0 auto 32px; text-align: center;
  font-size: 17px; line-height: 1.7; color: var(--gris);
}
.section__lien { margin-top: 26px; text-align: center; font-weight: 600; }

.hero__rassurance { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .78); }

/* ⚠️  L'ENCART REPREND LA COULEUR DU THÈME SANS LA FIXER.
       `--theme` bascule selon l'espace visité (magenta employeur, violet
       recruteur) : écrire la teinte ici figerait l'un des deux. */
.encart--theme { border-color: var(--theme); background: var(--violet-pale); }

.cta-final {
  background: var(--violet-tete); color: #fff;
  border-radius: var(--r-14); padding: 52px 44px; text-align: center;
}
.cta-final h2 { color: #fff; margin-bottom: 12px; }
.cta-final p { color: rgba(255, 255, 255, .82); margin-bottom: 26px; }
.cta-final .btn--outline { border-color: rgba(255, 255, 255, .5); color: #fff; }
.cta-final .btn--outline:hover { background: rgba(255, 255, 255, .12); color: #fff; }

@media (max-width: 760px) { .cta-final { padding: 36px 24px; } }

/* ── Adresses du réseau, sur la fiche d'un cabinet ─────────────────── */

/* ⚠️  LA LISTE EST SOUS LA CARTE, PAS À LA PLACE.

       Leaflet n'est pas fourni dans le dépôt (la CSP interdit les scripts de
       CDN) : sans lui, le conteneur reste vide. La liste porte alors la même
       information — et elle reste lisible par un moteur de recherche, ce
       qu'une carte n'est jamais. */
.fiche-adresses { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }

.fiche-adresses li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  background: #F9F6FF; border-radius: 12px;
}

.fiche-adresses strong { font-size: 15px; color: #22223B; }
.fiche-adresses span { font-size: 14px; color: #5C5C74; }

/* ⚠️  LE CONTENU DE LA PRÉSENTATION VIENT D'UN ÉDITEUR RICHE.

       Il porte donc des titres, des listes et parfois des tableaux, qui
       n'héritaient d'aucun style : la page rendait un pavé sans hiérarchie.
       Ces règles restent dans `.fiche-desc` pour ne pas déborder sur le
       reste de la fiche. */
.fiche-desc h2 { font-size: 19.2px; margin: 22px 0 10px; }
.fiche-desc h3 { font-size: 17px; margin: 18px 0 8px; }
.fiche-desc p { margin: 0 0 12px; }
.fiche-desc ul, .fiche-desc ol { margin: 0 0 14px; padding-left: 20px; }
.fiche-desc li { margin-bottom: 6px; }
.fiche-desc table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.fiche-desc th, .fiche-desc td { padding: 8px 10px; border-bottom: 1px solid #EAE7F2; text-align: left; }
.fiche-desc th { background: #F9F6FF; font-weight: 600; }

/* ── Autres langues d'une fiche de cabinet ─────────────────────────── */

.fiche-langues { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.fiche-langues a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: #F9F6FF; color: #22223B; font-size: 14px;
}

.fiche-langues a:hover { background: #F0EEF6; text-decoration: none; }

/* Le code tient lieu de drapeau : deux lettres se lisent partout, là où un
   drapeau désigne un pays et non une langue — et l'espagnol n'en a pas un. */
.fiche-langues__code { font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: #952E74; }

/* ── Index par pays, façon plan du site ────────────────────────────── */

.index-pays { margin-top: 40px; }
.index-pays__titre { font-size: 25px; margin: 44px 0 14px; }
.index-pays__vide { color: var(--gris-clair); font-size: 15px; }

/* ⚠️  LA BARRE ALPHABÉTIQUE NE LISTE QUE LES LETTRES PRÉSENTES.

       Vingt lettres éteintes remplissent une ligne de bruit et font chercher
       un contenu qui n'existe pas. Le gabarit ne rend que ce qui est là. */
/*
  ⚠️  LES BLOCS SE RÉPARTISSENT EN COLONNES, ILS NE S'EMPILENT PAS.

      J'avais mis la lettre à gauche et les noms à droite : chaque lettre
      occupait alors une bande de toute la largeur, et vingt lettres faisaient
      vingt écrans. Sur ce contenu — beaucoup de lettres, deux ou trois noms
      chacune — c'était le mauvais choix.

      `columns` répartit les blocs comme un plan du site : les colonnes se
      remplissent d'elles-mêmes, une lettre à une entrée ne réserve pas une
      ligne entière, et l'ensemble se parcourt d'un coup d'œil.

  ⚠️  `break-inside: avoid` EST OBLIGATOIRE.

      Sans lui, une lettre et ses noms se coupent en bas de colonne : le « G »
      finit à droite et « Grafton » reprend en haut de la colonne suivante,
      sous le « J ». L'index devient illisible précisément là où il devrait
      servir.
*/
.index-lettre__grille {
  columns: 4 220px;
  column-gap: 32px;
}

.index-lettre {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 22px;
  /* L'ancre de la barre alphabétique atterrit sinon sous l'en-tête collant. */
  scroll-margin-top: 90px;
}

/*
  ⚠️  32 px, UNE VALEUR DE L'ÉCHELLE.

      Élargir l'échelle typographique pour un caractère décoratif coûterait
      plus cher qu'il ne rapporte — une valeur de plus à arbitrer chaque fois
      qu'on hésite entre deux tailles voisines, sur toutes les pages.
*/
.index-lettre__lettre {
  font-size: 32px; line-height: 1; font-weight: 700;
  color: var(--encre); letter-spacing: -1px; margin-bottom: 6px;
}

.index-lettre__noms { list-style: none; margin: 0; padding: 0; }
.index-lettre__noms li { font-size: 15px; line-height: 1.6; }

/* ⚠️  LE NOM SANS FICHE N'EST PAS GRISÉ AU POINT D'ÊTRE ILLISIBLE.

       Il porte une information réelle — cette agence existe — et doit se
       lire. Ce qui le distingue d'un lien, c'est l'absence de couleur de
       lien, pas un contraste dégradé. */
.index-lettre__inerte { color: #22223B; }
.index-lettre__ville { color: var(--gris-clair); font-size: 13.5px; }

/* Sur écran étroit, `columns: 4 220px` retombe seule à une colonne : la
   largeur minimale de 220 px décide, aucune règle de repli n'est nécessaire. */


/* ── Plan de situation et coordonnées, en tête de fiche ────────────── */

/*
  ⚠️  LA CARTE NE DICTE PLUS LA HAUTEUR DE L'ENCART.

      L'image Google fait 900 × 320 : rendue à sa proportion, elle tirait
      le bloc violet à trois cents pixels — un tiers d'écran avant la
      première ligne de présentation, pour un plan qu'on regarde deux
      secondes. La hauteur est bornée et l'image RECADRÉE (`object-fit`) :
      le point reste centré, l'encart suit la colonne des coordonnées.
      Même effet quand l'image ne charge pas — clé absente en local, quota
      atteint : le cadre garde sa taille au lieu d'ouvrir un trou.
*/
.fiche-lieu {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px; align-items: stretch;
  padding: 14px; margin: 4px 0 26px;
  background: #F9F6FF; border-radius: var(--r-12);
}

.fiche-lieu__carte { display: block; height: 180px; }
/* Deux classes : `.carte-google img` — plus bas dans cette feuille — remet
   `height: auto`, et à spécificité égale c'est la dernière qui gagne. */
.fiche-lieu .fiche-lieu__carte img { width: 100%; height: 100%; object-fit: cover; }
.fiche-lieu__contact { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px; }
.fiche-lieu__contact h2 { font-size: 18px; margin: 0; }
.fiche-lieu__adresse { margin: 0; color: #5C5C74; font-size: 14.5px; line-height: 1.5; }
.fiche-lieu__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.fiche-lieu__liens a { font-size: 14.5px; word-break: break-word; }

@media (max-width: 767px) {
  /* En colonne unique, la carte perd encore de la hauteur : sur un écran
     étroit elle repousserait sinon les coordonnées sous la ligne de
     flottaison. */
  .fiche-lieu { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
  .fiche-lieu__carte { height: 150px; }
}

/* ── Page d'une enseigne dans un pays ──────────────────────────────── */

.reseau__titre { font-size: 19.2px; margin: 32px 0 14px; }
.reseau__retour { margin-top: 28px; }

.reseau-carte {
  position: relative; overflow: hidden;
  height: var(--carte-h, 520px); border-radius: var(--r-12); background: #E9E9EF;
}

.reseau-carte__mosaique { position: absolute; inset: 0; }
.reseau-carte__mosaique img { position: absolute; display: block; max-width: none; }

/* ⚠️  LES REPÈRES SONT DES LIENS VERS LEUR BLOC DE COORDONNÉES.

       Sur un réseau de quinze agences, retrouver à l'œil laquelle correspond
       au repère 7 est fastidieux. Le décalage négatif centre la pastille sur
       le point — un repère dont le coin haut-gauche marque l'adresse la
       désigne vingt mètres trop au nord-ouest. */
.reseau-carte__repere {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: -14px; margin-top: -14px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--rose); border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.reseau-carte__repere:hover { text-decoration: none; background: #952E74; }

.reseau-carte__credit {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  padding: 2px 6px; font-size: 11px; color: #5C5C74;
  background: rgba(255, 255, 255, .82); border-top-left-radius: 6px;
}

.reseau-liste { display: grid; gap: 14px; }

/* ⚠️  `scroll-margin-top` : le repère mène ici par une ancre, et sans marge
       le bloc arrive collé au bord haut de la fenêtre, titre à moitié coupé. */
.reseau-agence {
  padding: 18px 20px; background: #F9F6FF; border-radius: var(--r-12);
  scroll-margin-top: 24px;
}

.reseau-agence__titre { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 6px; }

.reseau-agence__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--rose); border-radius: 50%;
}

.reseau-agence__cp { font-size: 14px; font-weight: 400; color: #5C5C74; }
.reseau-agence__adresse { margin: 0 0 10px; color: #5C5C74; font-size: 15px; }

/* Une liste de définitions plutôt qu'un tableau : les intitulés sont des
   étiquettes, pas des en-têtes de colonnes, et l'ordre change d'une agence à
   l'autre selon ce qui est renseigné. */
.reseau-agence__contact { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 15px; }
.reseau-agence__contact dt { font-weight: 600; color: #22223B; }
.reseau-agence__contact dd { margin: 0; word-break: break-word; }

/* ── Raccourcis de contenu : %tab_ville% et %maps_ville% ───────────── */

.rc-liste { margin: 24px 0; padding: 18px; background: #F9F6FF; border-radius: var(--r-12); }
.rc-liste__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.rc-liste__item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding-bottom: 10px; border-bottom: 1px solid #EAE7F2;
}
.rc-liste__item:last-child { border-bottom: 0; padding-bottom: 0; }
.rc-liste__nom { font-size: 15px; font-weight: 600; }
.rc-liste__adresse { font-size: 14px; color: #5C5C74; }
.rc-liste__tel { font-size: 14px; }
.rc-liste__tout { margin: 14px 0 0; font-size: 14px; }

/* ── Raccourci %maps_ville% : carte Google + liste numérotée ─────────
   La mosaïque de tuiles, ses repères `<details>` et son crédit
   OpenStreetMap ont été retirés avec le passage à la Static Maps API. */
.rc-carte { margin: 24px 0; }
.rc-carte__image { display: block; border-radius: var(--r-12); overflow: hidden; }
.rc-carte__image img { display: block; width: 100%; height: auto; }

.rc-carte__liste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.rc-carte__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }

/* L'étiquette reprend celle du repère sur la carte : « 2 » ici désigne le
   repère « 2 » là-bas. Sans ce lien, une carte de dix points ne dit pas
   lequel est lequel. */
.rc-carte__num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--theme); color: #fff; font-size: 12px; font-weight: 700;
}
.rc-carte__adr { color: var(--gris); font-size: 14px; }


/* ── Étiquettes de catégories : neuf visibles, le reste au clic ────── */

/* ⚠️  LA CASE EST DÉPLACÉE HORS ÉCRAN, PAS EN `display: none`.

       `display: none` la retire de l'ordre de tabulation : le bouton
       « + N autres » cesserait d'être atteignable au clavier, et un lecteur
       d'écran ne l'annoncerait plus. */
.chips-cats__bascule {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.chip-cat--cache { display: none; }
.chips-cats__bascule:checked ~ .chip-cat--cache { display: inline-block; }

/* ⚠️  LE BOUTON PORTE LES DEUX LIBELLÉS, LE CSS EN MONTRE UN.

       Réécrire le texte au clic demanderait un script. Deux `<span>` dont un
       masqué coûtent quelques octets et rien d'autre. */
.chip-cat--plus { cursor: pointer; border-style: dashed; user-select: none; }
.chip-cat__moins { display: none; }
.chips-cats__bascule:checked ~ .chip-cat--plus .chip-cat__plus { display: none; }
.chips-cats__bascule:checked ~ .chip-cat--plus .chip-cat__moins { display: inline; }

/* Le contour au clavier doit se voir sur le bouton, pas sur la case cachée. */
.chips-cats__bascule:focus-visible ~ .chip-cat--plus {
  outline: 2px solid var(--theme); outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   L'EN-TÊTE SE FOND DANS LE HERO — recruteur, employeur, annuaire, fiches

   ⚠️  ON TEINTE L'EN-TÊTE, ON NE LE FAIT PAS FLOTTER PAR-DESSUS.

       La façon évidente serait de rendre l'en-tête transparent et de
       remonter le hero dessous. Elle a un défaut qui ne se voit qu'en
       faisant défiler : passé le hero, une barre transparente laisse le
       texte de la page traverser les libellés du menu. Elle devient
       illisible exactement là où l'on en a besoin.

       On donne donc à l'en-tête la teinte de départ du hero. À l'arrivée
       sur la page, la couture disparaît — c'est le résultat cherché. En
       défilant, la barre reste une bande teintée, lisible, et qui a l'air
       voulue.

   ⚠️  AUCUNE INFORMATION DU HERO N'EST MASQUÉE.

       L'en-tête garde sa place dans le flux : il ne recouvre rien. C'est
       précisément ce que la version « transparente et superposée » aurait
       risqué, et pourquoi elle demande ensuite une marge de compensation
       qu'on oublie de mettre à jour.

   ⚠️  `:has()` PLUTÔT QU'UNE CLASSE POSÉE PAR CHAQUE ROUTE.

       L'en-tête précède le hero dans le document : aucun sélecteur de
       voisinage ne peut remonter jusqu'à lui. `:has()` sur `body` le permet
       sans ajouter une variable que les huit routes concernées devraient
       transmettre — et qu'une neuvième oublierait.

       Sur un navigateur sans `:has()`, l'en-tête reste blanc : exactement
       l'affichage d'avant. Une dégradation qui ne casse rien.
   ══════════════════════════════════════════════════════════════════════ */

/*
  ⚠️  LA RÈGLE SUIT LA CLASSE DU HERO, PAS LE NOM DE LA PAGE.

      Elle s'applique donc partout où ces trois hero sont employés —
      aujourd'hui recruteur, employeur, annuaire, fiches pratiques, plus la
      page de FAQ qui réutilise `annu-hero`. C'est voulu : un même hero doit
      donner le même en-tête, sinon deux pages au dessin identique se
      comportent différemment sans qu'on sache pourquoi.

      Une page qui voudra l'en-tête blanc devra utiliser un autre hero — ce
      qui est plus honnête que d'ajouter une exception ici.
*/

/* Recruteur : lilas plein. */
body:has(.hero-lilas) .entete {
  background: var(--lilas);
  border-bottom-color: transparent;
}

/*
  Employeur et fiches pratiques : le hero est un dégradé qui part du
  violet pâle en haut à gauche. C'est cette teinte-là que l'en-tête reprend,
  celle avec laquelle il est en contact.
*/
body:has(.hero-interne) .entete,
body:has(.annu-hero) .entete {
  background: var(--violet-pale);
  border-bottom-color: transparent;
}

/*
  ⚠️  LES PAGES À BANDEAU COLORÉ TEINTENT AUSSI LEUR EN-TÊTE.

      La fiche d'un cabinet et la page des adresses d'une enseigne posent
      une bande lilas juste sous la barre de navigation, restée blanche :
      la couleur commençait donc à un trait horizontal, et la barre
      flottait au-dessus comme un élément rapporté. Reprendre la teinte
      fait démarrer le fond sur l'en-tête lui-même.

      C'est `--lilas` pour les deux : leur bandeau est un dégradé qui part
      de cette couleur en haut à gauche, celle avec laquelle la barre est
      en contact. Prendre la couleur d'arrivée du dégradé créerait une
      cassure au point de jonction.
*/
body:has(.fiche-banniere) .entete,
body:has(.hero-reseau) .entete {
  background: var(--lilas);
  border-bottom-color: transparent;
}

/*
  ⚠️  LE MENU DÉROULANT GARDE SON FOND BLANC.

      Il s'ouvre par-dessus le contenu de la page : teinté comme la barre, il
      se confondrait avec le hero derrière lui et les entrées deviendraient
      difficiles à suivre.
*/
body:has(.hero-lilas) .nav__sous,
body:has(.hero-interne) .nav__sous,
body:has(.annu-hero) .nav__sous,
body:has(.fiche-banniere) .nav__sous,
body:has(.hero-reseau) .nav__sous { background: #fff; }

/* ── Avis des lecteurs sur un article ──────────────────────────────── */

.avis { margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--trait); }
.avis h2 { font-size: 25px; margin: 0 0 20px; }
.avis__merci { padding: 10px 14px; background: #E8F6ED; border-radius: 10px; }
.avis__erreur { padding: 10px 14px; background: #FDECEF; border-radius: 10px; }
.avis__vide { color: var(--gris-clair); }

.avis__resume { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; margin-bottom: 28px; }
.avis__moyenne { display: grid; justify-items: center; gap: 2px; }
.avis__moyenne strong { font-size: 40px; line-height: 1; }
.avis__surcinq, .avis__total { font-size: 13px; color: var(--gris-clair); }
.avis__etoiles { color: #F0A61D; letter-spacing: 2px; }

.avis__repartition { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
/* La colonne du rang (« 5★ ») et le formulaire : deux conteneurs qui ne
   portaient aucune règle alors que le gabarit les nomme. Une classe posée
   sans style finit par être supprimée par quelqu'un qui la croit morte. */
.avis__rang { color: var(--gris-clair); }
.avis__form { margin-top: 6px; }

/*
  ── Avis d'une fiche d'annuaire ────────────────────────────────────

  ⚠️  EN CARTE, LE TRAIT DE SÉPARATION FAIT DOUBLON.

      `.avis` porte une bordure haute et une grande marge : c'est ce qu'il
      faut au bas d'un article, où le bloc flotte dans le texte. Dans une
      `carte-blanche`, la carte fait déjà la séparation — le trait
      ajoutait une ligne à deux centimètres du bord supérieur.
*/
.avis.carte-blanche { margin: 22px 0 0; padding-top: 34px; border-top: 0; position: relative; }
.avis__bloc { border: 0; padding: 0; margin: 0; min-width: 0; }

/*
  ⚠️  LE FORMULAIRE VERROUILLÉ RESTE LISIBLE, PAS EFFACÉ.

      On montre au visiteur anonyme ce qu'il pourra faire : donner une note
      et écrire deux lignes. Trop pâle, il ressemblerait à une panne ; trop
      net, on cliquerait dedans sans comprendre pourquoi rien ne répond.
      `pointer-events: none` coupe les clics du formulaire — les champs sont
      déjà `disabled`, c'est la ceinture avec les bretelles — et le voile
      posé par-dessus porte l'action réelle.
*/
.avis__form.est-verrouille { opacity: .5; filter: saturate(.6); pointer-events: none; user-select: none; }

.avis__voile {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: -84px; margin-bottom: 24px; position: relative; z-index: 2;
  padding: 20px 22px; text-align: center;
  background: rgba(255, 255, 255, .94);
  border: 1px dashed var(--violet-gris); border-radius: var(--r-12);
}
.avis__voile p {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14.5px; color: var(--encre-douce);
}
.avis__voile .ico { width: 15px; height: 15px; color: var(--theme); }

@media (max-width: 575px) {
  /* Sur un écran étroit, le formulaire est plus haut : le voile remonte
     moins, sinon il coifferait les étoiles au lieu de les accompagner. */
  .avis__voile { margin-top: -60px; }
}

.avis__repartition li { display: grid; grid-template-columns: 34px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.avis__barre { height: 8px; background: #F0EEF6; border-radius: 999px; overflow: hidden; }
.avis__barre span { display: block; height: 100%; background: #F0A61D; }
.avis__compte { color: var(--gris-clair); text-align: right; }

/* ⚠️  LES ÉTOILES SONT DES BOUTONS RADIO DÉGUISÉS.

       Le groupe est en `row-reverse` : le HTML va de 5 à 1 pour que `~`
       puisse atteindre les étoiles suivantes dans le document — c'est-à-dire
       les notes INFÉRIEURES — et les allumer avec celle qu'on survole. Un
       sélecteur de voisinage ne remonte pas ; inverser l'ordre visuel est la
       seule façon d'obtenir l'effet sans script. */
.avis__notes { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; border: 0; padding: 0; margin: 0 0 16px; }
.avis__notes legend { float: left; width: 100%; font-size: 14px; color: var(--gris); margin-bottom: 6px; }

.avis__radio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.avis__etoile { font-size: 28px; line-height: 1; color: #E4E0EE; cursor: pointer; }

.avis__radio:checked ~ .avis__etoile,
.avis__etoile:hover,
.avis__etoile:hover ~ .avis__etoile { color: #F0A61D; }

/* Le contour au clavier doit se voir sur l'étoile, pas sur la case cachée. */
.avis__radio:focus-visible + .avis__etoile { outline: 2px solid var(--theme); outline-offset: 2px; border-radius: 4px; }

.avis__champ { display: grid; gap: 6px; margin-bottom: 14px; }
.avis__champ span { font-size: 14px; color: var(--gris); }
.avis__champ textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px; font: inherit; }
.avis__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avis__mention { font-size: 13px; color: var(--gris-clair); max-width: 46ch; }
.avis__connexion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--gris); }

.avis__liste { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.avis__item { padding-top: 18px; border-top: 1px solid #F0EEF6; }
.avis__tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.avis__auteur { font-weight: 600; }
.avis__date { font-size: 13px; color: var(--gris-clair); }
.avis__texte { margin: 8px 0 0; }

/* ── Sous-rubriques d'une catégorie d'articles ─────────────────────── */

/* ⚠️  ELLES SE DISTINGUENT DES RUBRIQUES PRINCIPALES.

       Alignées à l'identique, on ne saurait pas qu'on est descendu d'un
       niveau — et cliquer semblerait ramener au même endroit. Le contour
       pointillé et la taille réduite disent « à l'intérieur de », sans
       ajouter un titre qui alourdirait la page. */
.chips-cats--sous { margin-top: 14px; }
.chip-cat--sous { padding: 7px 14px; font-size: 13.5px; border-style: dashed; }
.chip-cat__n { margin-left: 6px; color: var(--gris-clair); font-weight: 400; }

/* ════════════════════════════════════════════════════════════════════
   PAGES MARKETPLACE — maquette de l'ancien site (2026)
   Hero lilas coupé en diagonale + carte d'inscription, arguments en
   grille, offres récentes, étapes de l'outil, prix, panneau annuaire.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero « vague » ──────────────────────────────────────────────────
   Le fond lilas est porté par ::before, découpé en biais : le contenu
   reste dans le flux, et la coupe suit la hauteur réelle du bloc. La
   classe `hero-lilas` reste posée à côté : c'est elle que l'en-tête
   collant lit (body:has) pour prendre la teinte lilas. */
.hero-vague { position: relative; background: transparent; padding: 46px 0 110px; }
.hero-vague::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--lilas);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 110px), 0 100%);
}
.hero-vague > .container { position: relative; z-index: 1; }

.hero-vague__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) 460px;
  gap: 56px; align-items: start;
}
.hero-vague__texte h1 {
  font-size: clamp(30px, 4vw, 42px); line-height: 1.18;
  letter-spacing: -.8px; color: var(--navy); margin: 0 0 18px;
}
.hero-vague__sous { font-size: 18px; font-weight: 600; color: var(--navy); margin: 0 0 12px; }
.hero-vague__accroche { font-size: 17px; line-height: 1.65; color: var(--gris); margin: 0 0 14px; max-width: 56ch; }

.preuve-rang { display: flex; align-items: center; gap: 12px; margin: 18px 0 26px; }
.preuve-rang__texte { font-weight: 600; color: var(--navy); }

/* ── Vignette de démonstration ─────────────────────────────────────── */
.demo-vignette {
  position: relative; max-width: 480px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-doux) 100%);
  box-shadow: 0 18px 40px rgba(27, 27, 58, .18);
}
.demo-vignette__image { display: block; width: 100%; height: auto; }
.demo-vignette__repli {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 210px; padding: 24px 56px; color: #fff; font-weight: 600; font-size: 17px;
}
.demo-vignette__lecture {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--theme); color: #fff;
  box-shadow: 0 10px 26px rgba(199, 62, 155, .45);
  transition: transform .15s ease, background .15s ease;
}
.demo-vignette__lecture:hover { background: var(--theme-hover, var(--theme)); color: #fff; transform: translate(-50%, -50%) scale(1.06); }
.demo-vignette__lecture svg { width: 24px; height: 24px; }

/* ── Carte d'inscription / de recherche ────────────────────────────── */
.carte-signup {
  background: #fff; border-radius: 16px; padding: 28px 26px;
  box-shadow: 0 22px 48px rgba(27, 27, 58, .14);
}
.carte-signup h2 { font-size: 20px; line-height: 1.3; margin: 0 0 10px; color: var(--navy); }
.carte-signup__intro { font-size: 14.5px; line-height: 1.6; color: var(--gris); margin: 0 0 18px; }
.carte-signup__ligne { display: flex; gap: 10px; }
.carte-signup__ligne input {
  flex: 1; min-width: 0; padding: 12px 14px; font: inherit;
  border: 1px solid var(--trait); border-radius: 10px;
}

/* ── Formulaire « placeholders seuls » de la maquette ──────────────── */
.formulaire--signup { display: grid; gap: 12px; }
.champ-nu { display: block; }
.champ-nu input {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--navy);
  background: #fff; border: 1px solid var(--trait); border-radius: 9px;
}
.champ-nu input::placeholder { color: var(--gris-clair); }
.champ-nu input:focus { outline: 2px solid var(--theme); outline-offset: 1px; border-color: var(--theme); }
.champ-nu__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.case-legale { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--gris); }
.case-legale input { margin-top: 2px; flex: none; }
.case-legale a { color: var(--theme); text-decoration: underline; }
.formulaire--signup__captcha { margin: 2px 0; }

/*
  ⚠️  LE WIDGET reCAPTCHA A UNE LARGEUR FIXE (302 px) QU'IL NE NÉGOCIE PAS.

      Google le rend dans une iframe dimensionnée en dur. Dans la carte
      d'inscription sur un téléphone étroit, il dépasse et fait apparaître
      une barre de défilement horizontale sur toute la page — le symptôme
      classique « mon site scrolle de côté sur mobile ».

      On le réduit à l'échelle plutôt que de le rogner : rogner cacherait
      la case à cocher, c'est-à-dire la seule chose à faire dans ce bloc.
      `transform-origin` à gauche le garde aligné sur les autres champs.
*/
.g-recaptcha { display: block; }

@media (max-width: 380px) {
  .g-recaptcha { transform: scale(.86); transform-origin: 0 0; height: 66px; }
}
.formulaire--signup .btn { margin-top: 4px; }

/* Libellé pour lecteurs d'écran : la maquette n'affiche que des
   placeholders, mais un placeholder n'est pas un label. */
.lisible-lecteur {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Arguments en grille (pourquoi / avantages) ────────────────────── */
.titre-centre { text-align: center; }
.section--pourquoi .titre-centre { margin-bottom: 44px; }
.benefices { display: grid; gap: 34px 44px; }
.benefices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benefice { display: flex; gap: 16px; align-items: flex-start; }
.benefice__ico {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(199, 62, 155, .12); color: var(--theme);
}
.benefice__ico svg { width: 22px; height: 22px; }
.benefice h3 { margin: 2px 0 8px; font-size: 17px; color: var(--navy); }
.benefice p { margin: 0 0 8px; color: var(--gris); line-height: 1.62; }
.benefice p:last-child { margin-bottom: 0; }

/* ── Offres récentes (cartes simples) ──────────────────────────────── */
.section--offres-simples .titre-centre { margin-bottom: 40px; }
.offres-simples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 30px; }
.offre-simple { display: grid; gap: 6px; align-content: start; }
.offre-simple__titre { margin: 0; font-size: 17px; line-height: 1.4; }
.offre-simple__titre a { color: var(--navy); }
.offre-simple__titre a:hover { color: var(--theme); text-decoration: none; }
.offre-simple__lieu { margin: 0; font-size: 12.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--gris); }
.offre-simple__fee { margin: 0; display: flex; align-items: center; gap: 7px; color: var(--navy); font-size: 14.5px; }
.offre-simple__fee svg { width: 16px; height: 16px; color: var(--theme); }
.offre-simple__voir { font-weight: 600; font-size: 14.5px; color: var(--theme); }
.offres-simples__plus { margin-top: 40px; text-align: center; }

/* ── Étapes de l'outil (fil numéroté) ──────────────────────────────── */
.container--etroit { max-width: 860px; }
.section--etapes-fil h2 { margin-bottom: 34px; }
.etapes-fil { display: grid; gap: 26px; position: relative; }
.etape-fil { display: flex; gap: 18px; align-items: flex-start; position: relative; }
.etape-fil__num {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--theme); color: #fff; font-weight: 700;
}
/* Le fil relie les pastilles ; il s'arrête à la dernière. */
.etape-fil:not(:last-child)::before {
  content: ""; position: absolute; left: 19px; top: 40px; bottom: -26px;
  width: 2px; background: rgba(199, 62, 155, .25);
}
.etape-fil h3 { margin: 8px 0 8px; font-size: 17px; color: var(--navy); }
.etape-fil p { margin: 0; color: var(--gris); line-height: 1.6; }
.etapes-fil__note { margin: 26px 0 0; color: var(--gris); line-height: 1.65; }

/* ── Prix de l'outil ───────────────────────────────────────────────── */
.section--tarifs-outil h2 { margin-bottom: 30px; }
.tarifs-simples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tarif-simple {
  background: #fff; border: 1px solid var(--trait); border-radius: 14px;
  padding: 24px 22px; display: grid; gap: 6px; align-content: start;
}
.tarif-simple__nom { font-weight: 700; color: var(--navy); font-size: 17px; }
.tarif-simple__prix { display: flex; align-items: baseline; gap: 7px; margin: 4px 0 6px; }
.tarif-simple__prix strong { font-size: 27px; color: var(--theme); letter-spacing: -.5px; }
.tarif-simple__prix span { color: var(--gris); font-size: 14px; }
.tarif-simple p { margin: 0; color: var(--gris); font-size: 14.5px; line-height: 1.55; }

/* ── Appel à l'action de l'outil ───────────────────────────────────── */
.section--cta-outil .centre { text-align: center; }
.section--cta-outil h2 { margin-bottom: 12px; }
.cta-outil__texte { color: var(--gris); margin: 0 auto 22px; max-width: 58ch; }

/* ── FAQ simple de l'outil ─────────────────────────────────────────── */
.section--faq-simple .titre-centre { margin-bottom: 36px; }
.faq-simple { display: grid; gap: 24px; }
.faq-simple__item h3 { margin: 0 0 8px; font-size: 17px; color: var(--navy); }
.faq-simple__item p { margin: 0; color: var(--gris); line-height: 1.62; }
.faq-simple__aide { margin: 34px 0 0; text-align: center; color: var(--gris); }
.faq-simple__aide a { color: var(--theme); font-weight: 600; }

/* ── Annuaire : hero, secteurs, panneau d'ajout ────────────────────── */
.hero-vague--annuaire .hero-vague__accroche { margin-bottom: 12px; }
.carte-signup--chercher h2 { font-size: 20px; }

.annu-secteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; }
.annu-secteur {
  display: flex; align-items: center; min-height: 58px;
  padding: 14px 18px; background: #fff;
  border: 1px solid var(--trait); border-radius: 10px;
  color: var(--navy); font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.annu-secteur:hover {
  text-decoration: none; color: var(--navy);
  border-color: rgba(199, 62, 155, .5); box-shadow: 0 8px 22px rgba(27, 27, 58, .08);
}

.annu-panneau {
  background: var(--violet-fond); border-radius: 18px;
  padding: 52px clamp(22px, 6vw, 80px); text-align: center;
}
.annu-panneau h2 { max-width: 21em; margin: 0 auto 14px; font-size: clamp(23px, 3vw, 30px); line-height: 1.3; color: var(--navy); }
.annu-panneau__texte { max-width: 62ch; margin: 0 auto 30px; color: var(--gris); line-height: 1.6; }
.annu-panneau__form { max-width: 620px; margin: 0 auto; text-align: left; }

/* ── Écrans étroits ────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-vague__grille { grid-template-columns: 1fr; gap: 34px; }
  .hero-vague { padding-bottom: 88px; }
  .hero-vague::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%); }
  .benefices--2 { grid-template-columns: 1fr; }
  .offres-simples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarifs-simples { grid-template-columns: 1fr; }
  .annu-secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .offres-simples { grid-template-columns: 1fr; }
  .annu-secteurs { grid-template-columns: 1fr; }
  .champ-nu__duo { grid-template-columns: 1fr; }
  .carte-signup { padding: 22px 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   ACCUEIL — reprise de la page en ligne
   Hero centré, cartes vidéo, réassurances, blocs numérotés, tableau des
   rémunérations, catégories, fiches pratiques, questions clés.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────────── */
/*
  ⚠️  DES RUBANS PASTEL SUR BLANC, PLUS UN À-PLAT LILAS.

      Le fond était un dégradé plein d'un coin à l'autre : lisible, mais il
      teintait tout — le titre en 72px paraissait posé sur un carton coloré.
      Les rubans laissent le blanc respirer là où le texte passe, et donnent
      de la couleur sur les bords, là où il n'y a rien à lire.

  ⚠️  LE RACCOURCI `background` EST ÉCLATÉ EN PROPRIÉTÉS SÉPARÉES.

      `.hero-accueil--image` pose son image en style INLINE quand un fond est
      réglé au backoffice. Avec le raccourci, cet inline n'écrasait que la
      composante `background-image` et laissait la couleur derrière ; en
      propriétés séparées, le comportement est explicite — la photo réglée
      remplace les rubans, et le blanc reste dessous en attendant qu'elle
      charge.

  ⚠️  `cover`, DONC LE DESSIN EST ROGNÉ.

      Le SVG est en 16/9, le hero bien plus bas et large : on ne voit qu'une
      bande centrale du dessin. C'est voulu — les trois rubans traversent
      toute la hauteur, il en reste toujours quelque chose à l'écran.
*/
.hero-accueil {
  position: relative;
  padding: 62px 0 74px;
  text-align: center;
  background-color: #fff;
  background-image: url("/img/hero-vagues.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* L'image de fond, quand elle est réglée, passe sous un voile clair :
   le texte doit rester lisible quelle que soit la photo choisie. */
.hero-accueil--image { background-size: cover; background-position: center; }
.hero-accueil--image::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, .78);
}
/*
  ⚠️  LE CONTENEUR S'ÉLARGIT AVEC LE TITRE, SINON LES COUPURES CHANGENT.

      À 900px, le titre passé de 60 à 72px se serait replié sur quatre lignes
      au lieu de trois — « recruitment agencies! » seul sur la dernière. Ce
      n'est pas une question d'esthétique : la promesse se lit d'un bloc, et
      une ligne orpheline la coupe en deux idées.

      1040px ≈ 900 × (72 / 60) : la même longueur de ligne, à l'échelle.
*/
.hero-accueil__contenu { position: relative; z-index: 1; max-width: 1040px; }

/*
  ⚠️  UNE TAILLE FLUIDE, PAS UN PALIER FIXE.

      `clamp(min, fluide, max)` : 34px sur un téléphone, 72px sur un grand
      écran, et tout ce qu'il y a entre les deux sans point de rupture. Un
      `font-size: 72px` accompagné de trois media queries ferait le même
      travail avec trois occasions de se contredire.

      Le plancher monte aussi (30 → 34px) : c'est lui qui s'applique sous
      650 pixels, où le titre paraissait rétréci depuis que les boutons ont
      grandi.

      72px n'est pas un maximum inventé — le site monte déjà à 80px ailleurs.
*/
.hero-accueil h1 {
  font-size: clamp(34px, 5.2vw, 72px); line-height: 1.1;
  letter-spacing: -1.5px; color: var(--navy); margin: 0 0 20px;
}
.hero-accueil__accent { color: var(--theme); }
.hero-accueil__accroche {
  font-size: 18px; line-height: 1.6; color: var(--gris);
  max-width: 60ch; margin: 0 auto 26px;
}
.hero-accueil__actions {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 22px;
}
/*
  ⚠️  LES DEUX BOUTONS DU HERO SONT PLUS GRANDS QUE LES AUTRES.

      Ils portent l'appel à l'action principal de la page d'accueil, au
      milieu d'un titre en 60px et d'une accroche en 19px : à la taille
      commune (14.5px, 12/22 de retrait), ils se lisaient comme deux liens
      secondaires posés là. Ce n'est pas un caprice d'échelle — c'est le
      seul endroit du site où deux boutons doivent attirer l'œil avant le
      reste.

      17px vient de l'échelle typographique déclarée (`verifier_design.js`),
      pas d'une valeur choisie à l'estime : une taille hors échelle passe
      inaperçue ici et ressort ailleurs, sur un composant qui hérite du même
      style.
*/
.hero-accueil__actions .btn {
  border-radius: 30px;
  padding: 15px 30px;
  font-size: 17px;
  gap: 10px;
}

/*
  ⚠️  L'ICÔNE GRANDIT AVEC LE TEXTE, PAS PLUS.

      À 16px dans un bouton passé à 17px, elle paraissait rétrécie — l'œil
      compare la hauteur du glyphe à celle des lettres. 20px la remet au
      niveau des majuscules.

      `margin-left` est retiré : `.btn` pose déjà un `gap`, et les deux se
      cumulaient en un écart trop large entre le libellé et l'icône.
*/
.hero-accueil__actions .btn svg {
  width: 20px; height: 20px; vertical-align: -4px;
}

/*
  ⚠️  SUR PETIT ÉCRAN, ILS PRENNENT TOUTE LA LARGEUR.

      À 17px et 30px de retrait, les deux boutons ne tiennent plus côte à
      côte sous 480 pixels : ils passaient à la ligne avec des largeurs
      inégales, ce qui se lit comme un défaut d'alignement. Empilés et
      pleine largeur, ils redeviennent deux cibles franches.
*/
@media (max-width: 480px) {
  .hero-accueil__actions { flex-direction: column; align-items: stretch; }
  .hero-accueil__actions .btn { width: 100%; }
}
.hero-accueil__avis {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  font-size: 13.5px; color: var(--gris); margin: 0;
}
.hero-accueil__etoiles { display: inline-flex; gap: 2px; color: var(--jaune, #F0A61D); }
.hero-accueil__etoiles svg { width: 14px; height: 14px; fill: currentColor; }
.hero-accueil__via { color: var(--gris-clair); }

/* Les modificateurs de section : ils ne portent que le rythme vertical,
   le reste vit dans les classes de contenu. Déclarés explicitement pour
   que le contrôle du design system voie une définition et non un oubli. */
.section--cartes-video { padding-top: 62px; }
.section--reassurance { padding-top: 20px; }
.section--bloc-num { padding-top: 62px; }
.section--saviez-vous { padding-top: 62px; }
.section--bandeau-bleu { padding-top: 62px; }

/* ── Cartes vidéo ───────────────────────────────────────────────────── */
.cartes-video { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.carte-video { text-align: center; }
.carte-video__ecran {
  position: relative; border-radius: 14px; overflow: hidden;
  /* Visible seulement quand la vignette n'est pas en 16/9 : un gris très
     clair se lit comme une marge, pas comme une erreur d'affichage. */
  background: var(--blanc-400);
  /*
    ⚠️  16/9, LE RATIO NATIF DES VIDÉOS — ET NON 4/3.

        Le cadre était en 4/3 alors que les vignettes YouTube sont en 16/9.
        Avec `object-fit: cover`, l'image était donc agrandie jusqu'à remplir
        la hauteur, et débordait des deux côtés : « HIRING NOTES » incrusté à
        gauche se lisait « RING NOT ». Rien ne cassait, rien ne s'affichait de
        travers — l'image paraissait simplement trop zoomée.

        Au bon ratio, `cover` n'a plus rien à rogner sur une vignette 16/9.
  */
  aspect-ratio: 16 / 9;
}
/*
  ⚠️  `contain` : L'IMAGE ENTIÈRE, JAMAIS ROGNÉE.

      Ces vignettes sont composées — un titre incrusté, un cadre, un sujet
      calé dans un coin. `cover` remplit toujours le cadre, mais coupe dès
      que le ratio diffère d'un cheveu : c'est ainsi que « WATCH THE DEMO »
      perdait son premier mot. Une vignette dont on lit la moitié du texte
      ne remplit plus son rôle, si bien qu'elle soit cadrée.

      `contain` inverse le compromis : on voit tout, et si le ratio ne tombe
      pas juste, le fond du cadre apparaît sur les côtés plutôt que du texte
      amputé. Une bordure discrète se remarque moins qu'un mot coupé.

  ⚠️  LE RAYON EST SUR L'IMAGE, PAS SEULEMENT SUR LE CADRE.

      Avec `cover`, l'image débordait et c'est `overflow: hidden` du cadre
      qui dessinait les coins. En `contain`, elle est parfois plus petite que
      son cadre : les coins arrondis se seraient appliqués au fond, et
      l'image serait restée carrée à l'intérieur. Les deux portent donc le
      même rayon.
*/
.carte-video__image {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 14px;
}
.carte-video__lecture {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--theme); color: #fff;
  box-shadow: 0 8px 22px rgba(199, 62, 155, .45);
  transition: transform .15s ease;
}
.carte-video__lecture:hover { transform: translate(-50%, -50%) scale(1.08); }
.carte-video__lecture svg { width: 20px; height: 20px; }
.carte-video__titre { font-size: 20px; color: var(--navy); margin: 18px 0 8px; }
.carte-video__texte { color: var(--gris); margin: 0 0 14px; }

/* ── Réassurances ───────────────────────────────────────────────────── */
.reassurances {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  background: var(--violet-fond); border-radius: 14px; padding: 34px 24px; text-align: center;
}
.reassurance__ico { display: inline-flex; color: var(--theme); }
.reassurance__ico svg { width: 38px; height: 38px; }
.reassurance h2 { font-size: 17px; color: var(--navy); margin: 12px 0 0; }

/* ── Blocs numérotés ────────────────────────────────────────────────── */
.bloc-num { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: center; }
/* Le média passe à gauche un bloc sur deux, comme sur la page en ligne. */
.bloc-num--inverse .bloc-num__media { order: -1; }
.bloc-num--plein { grid-template-columns: 1fr; }
.bloc-num__tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bloc-num__pastille {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--theme); color: #fff; font-weight: 700; font-size: 19px;
}
.bloc-num__tete h2 { margin: 0; font-size: 24px; line-height: 1.3; color: var(--navy); }
.bloc-num__texte h3 { font-size: 19px; color: var(--navy); margin: 22px 0 8px; }
.bloc-num__texte p { color: var(--gris); line-height: 1.65; margin: 0 0 12px; }
.bloc-num__texte strong { color: var(--navy); }
.bloc-num__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.bloc-num .btn { border-radius: 20px; }

.liste-puces { margin: 0 0 14px; padding-left: 20px; color: var(--gris); line-height: 1.65; }
.liste-puces li { margin-bottom: 8px; }
.liste-puces li::marker { color: var(--theme); }

/* ── Tableau des options de rémunération ────────────────────────────── */
.table-remu { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-remu th, .table-remu td {
  border: 1px solid var(--trait); padding: 10px 12px; text-align: left; vertical-align: top;
}
.table-remu th { background: var(--violet-fond); color: var(--navy); font-weight: 700; }
.table-remu td { color: var(--gris); }
.table-remu__note { margin: 16px 0 0; color: var(--gris); font-size: 14px; line-height: 1.6; }

/* ── Bandeaux d'appel à l'action ────────────────────────────────────── */
.bandeau-clair {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center;
  margin-top: 44px; padding: 22px 30px; text-align: center;
  background: var(--violet-fond); border-radius: 50px;
}
.bandeau-clair p { margin: 0; color: var(--navy); font-size: 17px; }
.bandeau-clair .btn { border-radius: 20px; }

.bandeau-bleu {
  display: grid; gap: 20px; justify-items: center; text-align: center;
  background: var(--bleu, #024AAD); border-radius: 16px; padding: 46px 30px; color: #fff;
}
.bandeau-bleu p { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.4; max-width: 40ch; }

/* ── « Le saviez-vous ? » ───────────────────────────────────────────── */
.saviez-vous {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; align-items: center;
  background: var(--gris-tres-clair, #F4F4FA); border-radius: 16px; padding: 40px;
}
.saviez-vous__sur { margin: 0 0 6px; font-weight: 700; color: var(--navy); }
.saviez-vous h2 { font-size: 22px; line-height: 1.35; color: var(--navy); margin: 0 0 14px; }
.saviez-vous p { color: var(--gris); line-height: 1.65; margin: 0 0 18px; }
.saviez-vous .btn { border-radius: 20px; }
.saviez-vous__ico { display: flex; align-items: center; justify-content: center; color: var(--theme); }
.saviez-vous__ico svg { width: 120px; height: 120px; }

/* ── Catégories ─────────────────────────────────────────────────────── */
.section--categories .titre-centre { margin-bottom: 40px; }
.categories-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.categorie-carte {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; background: #fff;
  border: 1px solid var(--trait); border-radius: 12px;
}
.categorie-carte__ico { flex: none; display: flex; color: var(--theme); }
.categorie-carte__ico svg { width: 26px; height: 26px; }
.categorie-carte__nom { font-weight: 700; color: var(--navy); }

/* ── Fiches pratiques ───────────────────────────────────────────────── */
.section--fiches .titre-centre { margin-bottom: 40px; }
.fiches-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.fiche-carte__visuel {
  display: block; border-radius: 14px; overflow: hidden;
  background: var(--violet-fond); aspect-ratio: 1 / 1; margin-bottom: 16px;
}
.fiche-carte__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fiche-carte h3 { font-size: 18px; line-height: 1.4; margin: 0 0 8px; }
.fiche-carte h3 a { color: var(--navy); }
.fiche-carte h3 a:hover { color: var(--theme); text-decoration: none; }
.fiche-carte p { margin: 0; color: var(--gris); font-size: 14.5px; line-height: 1.6; }

/* ── Questions clés ─────────────────────────────────────────────────── */
.section--faq-accueil .titre-centre { margin-bottom: 40px; }
.faq-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; }
.faq-colonnes__item h3 { font-size: 18px; color: var(--navy); margin: 0 0 8px; }
.faq-colonnes__item p { margin: 0; color: var(--gris); line-height: 1.65; }

/* ── Écrans étroits ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cartes-video, .reassurances, .categories-grille, .fiches-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloc-num, .faq-colonnes, .saviez-vous { grid-template-columns: 1fr; }
  .bloc-num--inverse .bloc-num__media { order: 0; }
  .saviez-vous__ico { display: none; }
  .table-remu { font-size: 13px; }
}
@media (max-width: 620px) {
  .cartes-video, .reassurances, .categories-grille, .fiches-grille { grid-template-columns: 1fr; }
  .hero-accueil { padding: 44px 0 52px; }
  .bandeau-clair { border-radius: 16px; }
  /* Le tableau déborde plutôt que d'écraser ses colonnes : on le fait
     défiler seul, sans entraîner la page. */
  .table-remu { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ════════════════════════════════════════════════════════════════════
   ADRESSES D'UNE ENSEIGNE — /recruteur/:pays/:enseigne
   La carte et la liste qui vivaient en bas de chaque fiche, réunies sur
   une page unique.
   ════════════════════════════════════════════════════════════════════ */

/* Le fond démarre immédiatement sous l'en-tête collant : aucune bande
   blanche entre la navigation et la couleur. */
.hero-reseau { padding: 44px 0 40px; background: linear-gradient(135deg, var(--lilas), var(--violet-tete)); }
.hero-reseau h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.18; color: var(--navy); margin: 0; }
.hero-reseau__compte { margin: 10px 0 0; color: var(--gris); font-size: 17px; }

/* La carte du réseau est plus haute que celle de l'annuaire : c'est le
   contenu principal de la page, pas un complément. */
.carte-annuaire--reseau { height: 560px; margin: 0 0 34px; }

.reseau-adresses { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.reseau-adresse {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 18px 20px; background: #fff;
  border: 1px solid var(--trait); border-radius: 12px;
}
.reseau-adresse__nom { font-size: 17px; color: var(--navy); }
.reseau-adresse__nom a { color: var(--navy); }
.reseau-adresse__nom a:hover { color: var(--theme); text-decoration: none; }
.reseau-adresse__lieu { color: var(--gris); font-size: 14.5px; }
/* ⚠️  `.reseau-adresse__tel` retirée : le numéro n'est plus listé ici,
       il vit sur la fiche — voir views/vitrine/reseau.ejs. */
.reseau-adresse__fiche { margin-top: 10px; align-self: flex-start; }

@media (min-width: 768px) {
  /* Deux colonnes dès qu'il y a la place : un réseau de quinze agences
     tient alors sur un écran au lieu de deux. */
  .reseau-adresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) { .carte-annuaire--reseau { height: 380px; } }

/* ── Mention de rédaction en fin d'article ──────────────────────────
   Discrète mais lisible : c'est une information de transparence, pas un
   avertissement. Un encadré rouge ferait douter du texte qu'on vient de
   lire ; une ligne grise se voit sans dominer. */
.article-mention-ia {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 32px 0 0; padding: 14px 16px;
  background: var(--violet-fond); border-radius: 10px;
  color: var(--gris); font-size: 13.5px; line-height: 1.6;
}
.article-mention-ia__ico { flex: none; display: flex; color: var(--gris-clair); margin-top: 1px; }
.article-mention-ia__ico svg { width: 17px; height: 17px; }

/* ── Cartes Google ───────────────────────────────────────────────────
   ⚠️  UNE IMAGE QUI S'ÉTIRE, PAS UNE MOSAÏQUE POSÉE AU PIXEL.

       L'image est demandée en double densité et rendue à la largeur du
       bloc : elle remplit toujours son conteneur, quelle que soit la
       colonne — c'est précisément ce que la mosaïque de tuiles ne savait
       pas faire. */
.carte-google { display: block; border-radius: var(--r-12); overflow: hidden; background: var(--violet-fond); }
.carte-google img { display: block; width: 100%; height: auto; }
.carte-google:hover { text-decoration: none; }

.carte-google--reseau { margin: 0 0 34px; }
.carte-google--annuaire { margin: 0 0 28px; }

/* ── Annuaire : aucun résultat ───────────────────────────────────────
   ⚠️  UN ÉTAT VIDE PROPOSE UNE ACTION, IL NE CONSTATE PAS.

       Une ligne grise « aucun résultat » laisse le visiteur devant une
       page qui n'a rien à lui dire — et, sur la page d'un secteur neuf,
       elle donne l'impression d'un site en panne plutôt que d'un annuaire
       qui commence. Le bloc reprend la mise en page des cartes du site et
       descend vers le formulaire qui existe déjà plus bas. */
.annu-vide {
  display: grid; justify-items: center; gap: 12px;
  margin: 20px 0 8px; padding: 48px 30px; text-align: center;
  background: var(--violet-fond); border-radius: 18px;
}
.annu-vide__ico {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: #fff; color: var(--theme); margin-bottom: 4px;
}
.annu-vide__ico svg { width: 28px; height: 28px; }
.annu-vide h2 { margin: 0; font-size: 24px; line-height: 1.3; color: var(--navy); max-width: 24ch; }
.annu-vide p { margin: 0; color: var(--gris); line-height: 1.65; max-width: 56ch; }
.annu-vide .btn { margin-top: 10px; border-radius: 24px; }
.annu-vide__second { font-size: 14.5px; }
.annu-vide__second a { color: var(--theme); }


/* ── FAQ publique : liste numérotée ──────────────────────────────────
   ⚠️  TOUT EST OUVERT, ET C'EST LE POINT.

       L'accordéon cachait les réponses aux moteurs de recherche comme au
       Ctrl+F du visiteur ; le filtre instantané supposait qu'on sache
       déjà quoi taper. Vingt-deux questions tiennent sur une page qu'on
       déroule. */
.faq-liste { max-width: 860px; padding: 56px 20px 80px; }
.faq-liste h1 { font-size: clamp(26px, 3.4vw, 34px); color: var(--navy); margin: 0 0 48px; }

.faq-item { margin-bottom: 30px; }
.faq-item__q {
  font-size: 19px; line-height: 1.4; color: var(--navy);
  margin: 0 0 8px; scroll-margin-top: 96px;
}
.faq-item__r { color: var(--gris); font-size: 15px; line-height: 1.7; }

.faq-liste__vide { color: var(--gris); }

.faq-liste__aide {
  margin: 56px 0 0; padding: 18px 26px; text-align: center;
  background: var(--violet-fond); border-radius: 40px;
  color: var(--gris); font-size: 15px;
}
.faq-liste__aide a { color: var(--theme); }

/* ── « À lire ensuite » : un seul article ────────────────────────────
   ⚠️  UNE CARTE SEULE NE S'ÉTIRE PAS.

       `grille--3` répartit en colonnes de 290 px minimum, mais `auto-fit`
       donne toute la largeur à l'unique carte : une vignette de 1 100 px
       pour un article, plus grande que l'illustration de celui qu'on vient
       de lire. On borne, et l'on passe en ligne. */
.suite-seule { max-width: 560px; }

.carte-fiche--ligne {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px; align-items: center;
}
/* Deux enfants seulement — la vignette et le bloc de texte : sans le
   conteneur, la pastille, le titre et l'extrait tomberaient chacun dans une
   cellule. Voir views/vitrine/blog_article.ejs. */
.carte-fiche__texte { min-width: 0; }
/* La vignette perd sa marge basse : en ligne, l'écart est horizontal. */
.carte-fiche--ligne .carte-fiche__visuel { margin-bottom: 0; }
.carte-fiche--ligne h3 { font-size: 17px; margin-bottom: 6px; }
.carte-fiche--ligne p { font-size: 14.5px; margin-bottom: 0; }
/* La pastille de catégorie passe au-dessus du titre, pas entre deux blocs
   de la grille — elle appartient à la colonne de texte. */
.carte-fiche--ligne .chip-theme { margin-bottom: 8px; }

@media (max-width: 480px) {
  /* Sous 480 px, 150 px de vignette ne laissent plus de place au titre :
     on revient à l'empilement. */
  .carte-fiche--ligne { grid-template-columns: 1fr; gap: 14px; }
  .carte-fiche--ligne .carte-fiche__visuel { margin-bottom: 4px; }
}

/* ── Raccourcis d'édition, réservés au backoffice ─────────────────────
   ⚠️  CE BLOC N'EST JAMAIS SERVI À UN VISITEUR.

       Le gabarit n'émet rien sans session d'administration : ces règles ne
       stylent donc rien pour le public. Elles vivent dans la feuille
       commune parce que la barre s'affiche par-dessus le site public, avec
       ses variables de thème — la feuille du backoffice n'y est pas chargée.

   ⚠️  ELLE FLOTTE EN BAS À DROITE, ET RESTE PETITE.

       Un bandeau en haut de page décalerait la mise en page et fausserait
       ce qu'on est venu vérifier : on regarde le site pour le voir tel
       qu'il est servi. Une pastille repliée ne recouvre qu'un coin.
*/
.barre-bo {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  font-size: 13px;
}
.barre-bo__bouton {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--encre); color: #fff;
  box-shadow: 0 6px 20px rgba(20, 16, 40, .22);
  list-style: none; user-select: none;
}
/* Safari dessine encore un triangle sur `summary` sans cette règle. */
.barre-bo__bouton::-webkit-details-marker { display: none; }
.barre-bo__bouton:hover { background: var(--theme); }
.barre-bo__point {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--theme); flex: none;
}
.barre-bo[open] .barre-bo__point { background: #fff; }

.barre-bo__panneau {
  position: absolute; right: 0; bottom: calc(100% + 8px);
  min-width: 210px; padding: 8px;
  background: #fff; border: 1px solid var(--trait); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 16, 40, .18);
  display: flex; flex-direction: column; gap: 2px;
}
.barre-bo__lien {
  display: block; padding: 8px 10px; border-radius: 8px;
  color: var(--encre); text-decoration: none; white-space: nowrap;
}
.barre-bo__lien:hover { background: var(--blanc-400); color: var(--theme); }
.barre-bo__lien--discret { color: var(--gris-clair); }
.barre-bo__note {
  margin: 6px 10px 2px; font-size: 11px; line-height: 1.4;
  color: var(--gris-clair); white-space: normal; max-width: 220px;
}

/* ⚠️  ELLE NE S'IMPRIME PAS, ET NE SORT PAS EN CAPTURE D'ÉCRAN PROPRE.
       Une capture de page envoyée à un client ne doit pas montrer les
       adresses internes du backoffice. */
@media print { .barre-bo { display: none; } }

/* ── Plan du site ───────────────────────────────────────────────────
   ⚠️  DES COLONNES QUI SE REPLIENT, PAS UNE GRILLE FIGÉE.
       Trois colonnes sur un écran large, une seule sur un téléphone : les
       listes sont longues, et une colonne de 200 px y couperait chaque
       titre en trois lignes. */
.plan__intro { color: var(--gris-clair); margin: 6px 0 26px; }
.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; align-items: start; }
.plan__col { border: 1px solid var(--trait); border-radius: var(--r-12); padding: 18px; background: #fff; }
.plan__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan__tete h2 { font-size: 17px; margin: 0; }
.plan__total { font-size: 12px; color: var(--gris-clair); font-variant-numeric: tabular-nums; }
.plan__recherche {
  width: 100%; box-sizing: border-box; margin: 12px 0 4px;
  border: 1px solid var(--trait); border-radius: var(--r-08); padding: 8px 11px; font-size: 14px;
}
.plan__compte, .plan__vide { margin: 6px 0 0; font-size: 12.5px; color: var(--gris-clair); }
/* ⚠️  LA LISTE DÉFILE DANS SA COLONNE.
       Sans hauteur, une colonne de 3 000 fiches ferait descendre les deux
       autres de vingt écrans — et l'on perdrait leurs champs de recherche
       en cours de route. */
.plan__liste {
  list-style: none; margin: 12px 0 0; padding: 0;
  max-height: 460px; overflow-y: auto;
  display: grid; gap: 4px;
}
.plan__liste a { font-size: 13.5px; line-height: 1.45; word-break: break-word; }
.plan__plus { margin-top: 14px; width: 100%; }

/* ── Déconnexion depuis le bandeau vitrine ──────────────────────────
   ⚠️  UN BOUTON DÉGUISÉ EN LIEN, PARCE QUE C'EST UN `POST`.

       `/deconnexion` n'existe qu'en POST — en GET, un préchargeur ou un
       antivirus qui suit les liens déconnecterait tout seul. Il faut donc
       un vrai `<button>` dans un `<form>`, mais il doit se lire comme le
       lien discret voisin : deux boutons pleins côte à côte feraient
       hésiter entre « Tableau de bord » et « Déconnexion », et un clic de
       travers coûte une reconnexion complète. */
.entete__sortie { display: flex; margin: 0; }

.entete__deconnexion {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500;
  color: var(--gris); white-space: nowrap;
  transition: color .18s ease;
}
.entete__deconnexion:hover { color: var(--theme); }
.entete__deconnexion:focus-visible { outline: 2px solid var(--theme); outline-offset: 3px; border-radius: 3px; }

/* Dans le panneau mobile, il reprend l'apparence des autres actions :
   `.btn--bloc` les met déjà toutes en pleine largeur, et le formulaire ne
   doit pas casser cette colonne. */
.nav__actions .entete__sortie { display: block; }
.nav__actions .entete__sortie .btn { width: 100%; }

/*
  ⚠️  `.cookies` HABILLE L'ENSEMBLE : bandeau ET panneau.

      Le panneau doit exister même quand le bandeau a disparu — c'est lui
      que rouvre le lien « Préférences des cookies » du pied de page. Le
      conteneur ne porte donc aucun style propre, juste la portée du script.
*/
.cookies { display: contents; }

/* ── Bandeau de cookies ─────────────────────────────────────────────
   ⚠️  IL NE BLOQUE PAS LA PAGE.

       Pas de voile opaque sur le bandeau : on doit pouvoir lire le site et
       sa politique de confidentialité AVANT de décider. Un mur qui force le
       clic ne recueille pas un consentement libre — et pousse à cliquer
       « accepter » pour s'en débarrasser, ce qui est exactement ce qu'on
       veut éviter. */
.cookies__bandeau {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 400;
  max-width: 960px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 20px 24px; border-radius: 18px;
  background: #fff; border: 1px solid var(--violet-gris, #E6E1F2);
  box-shadow: 0 16px 44px rgba(34, 34, 59, .18);
}
.cookies__texte { flex: 1 1 340px; min-width: 0; }
.cookies__texte strong { display: block; font-size: 16px; color: var(--navy); margin-bottom: 4px; }
.cookies__texte p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gris); }

/*
  ⚠️  LES TROIS BOUTONS ONT LA MÊME TAILLE.

      « Refuser » plus petit ou plus pâle que « Accepter » est la faute la
      plus sanctionnée par la CNIL, et elle se commet sans mauvaise
      intention — simplement en suivant l'habitude des maquettes. La règle
      est ici, en un seul endroit, pour qu'on ne puisse pas la défaire sans
      le voir.
*/
.cookies__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies__actions .btn { flex: 0 0 auto; font-size: 14px; padding: 11px 20px; }

/* ── Panneau de préférences ─────────────────────────────────────── */
.cookies__panneau { position: fixed; inset: 0; z-index: 410; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cookies__panneau[hidden] { display: none; }
.cookies__voile { position: absolute; inset: 0; background: rgba(34, 34, 59, .45); }

.cookies__boite {
  position: relative; z-index: 1; width: min(560px, 100%);
  max-height: min(80vh, 720px); overflow: auto;
  background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(34, 34, 59, .3);
}
.cookies__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 24px 12px;
}
.cookies__tete h2 { margin: 0; font-size: 19px; color: var(--navy); }
.cookies__croix {
  border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--gris); padding: 0 4px;
}
.cookies__croix:hover { color: var(--navy); }

.cookies__corps { padding: 0 24px; }
.cookies__ligne {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 16px 0; border-top: 1px solid var(--violet-gris, #E6E1F2);
}
.cookies__ligne-texte strong { display: block; font-size: 14.5px; color: var(--navy); margin-bottom: 3px; }
.cookies__ligne-texte p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gris); }

/*
  ⚠️  « TOUJOURS ACTIF » EST UNE MENTION, PAS UN INTERRUPTEUR GRISÉ.

      Un interrupteur désactivé invite à cliquer et ne répond pas : on croit
      à une panne, et l'on cherche pourquoi.
*/
.cookies__toujours {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--gris);
  background: var(--blanc-400, #F4F4F9); border-radius: 20px; padding: 5px 12px;
}

.cookies__bascule { flex: 0 0 auto; position: relative; display: inline-flex; cursor: pointer; }
.cookies__bascule input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookies__bascule-piste {
  /* ⚠️  UN JETON DE LA PALETTE, PAS UN GRIS CHOISI À L'ŒIL.
         Le gris posé ici au jugé n'existait nulle part ailleurs :
         `test:design` l'a refusé, et il a eu raison — la piste éteinte doit
         se raccorder aux traits du reste du site.

         Il lit aussi les commentaires : citer la valeur écartée la ferait
         ressortir comme si elle était encore employée. */
  width: 46px; height: 26px; border-radius: 20px; background: var(--trait);
  position: relative; transition: background .16s ease;
}
.cookies__bascule-piste::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform .16s ease;
}
.cookies__bascule input:checked + .cookies__bascule-piste { background: var(--theme); }
.cookies__bascule input:checked + .cookies__bascule-piste::after { transform: translateX(20px); }
.cookies__bascule input:focus-visible + .cookies__bascule-piste { outline: 2px solid var(--theme); outline-offset: 3px; }

.cookies__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 24px 22px; border-top: 1px solid var(--violet-gris, #E6E1F2);
}
.cookies__lien { font-size: 13.5px; }
.cookies__pied-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies__pied-actions .btn { font-size: 14px; padding: 11px 20px; }

@media (max-width: 640px) {
  .cookies__bandeau { padding: 18px; gap: 14px; }
  .cookies__actions { width: 100%; }
  .cookies__actions .btn { flex: 1 1 auto; }
  .cookies__pied-actions { width: 100%; }
  .cookies__pied-actions .btn { flex: 1 1 auto; }
}

/* ── Encart communauté WhatsApp (pied de page) ──────────────────────
   ⚠️  UN BLOC AVEC DU TEXTE, PAS UNE SIXIÈME ICÔNE.

       Glissé dans la rangée des réseaux, il aurait été un pictogramme de
       plus, indistinct des autres. Or c'est le seul qui promet quelque
       chose de précis — des offres publiées régulièrement, gratuitement — et
       cette promesse a besoin de mots pour exister.

   ⚠️  CENTRÉ, ENTRE LES COLONNES ET LE COPYRIGHT.

       Rangé dans la dernière colonne, il était comprimé sur quatre lignes et
       se lisait comme une note en marge. Seul sur sa ligne, il devient ce
       qu'il est : la seule invitation du pied de page. */
.pied__communaute {
  display: flex; justify-content: center;
  margin: 8px auto 26px; padding: 0 20px;
}

.pied__whatsapp {
  display: inline-flex; align-items: center; gap: 14px;
  max-width: 560px; padding: 15px 22px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
  text-align: left;
  transition: background .16s ease, border-color .16s ease;
}
.pied__whatsapp:hover {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32);
  text-decoration: none;
}

/*
  ⚠️  LE BLANC EST IMPOSÉ, PAS HÉRITÉ.

      Le pied colore ses liens en rose : l'encart en héritait, titre compris,
      et se lisait comme un lien parmi les autres — à la limite du lisible
      pour la ligne de description. Le blanc le sort de la liste des liens.
      Le survol change le fond, pas la couleur du texte : un lien dont le
      texte change de teinte au passage attire l'œil sur la couleur plutôt
      que sur ce qu'il propose.
*/
.pied__whatsapp,
.pied__whatsapp:hover,
.pied__whatsapp strong,
.pied__whatsapp .pied__whatsapp-desc { color: #fff; }

.pied__whatsapp-ico { flex: 0 0 auto; display: inline-flex; color: #fff; }
.pied__whatsapp-ico svg { width: 24px; height: 24px; }

.pied__whatsapp-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pied__whatsapp-txt strong {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-size: 15px; line-height: 1.3;
}

/* ⚠️  LA DESCRIPTION RESTE BLANCHE, JUSTE MOINS APPUYÉE.
       Un gris franc la ferait disparaître sur ce fond sombre : c'est
       l'opacité qui crée la hiérarchie, pas un changement de couleur. */
.pied__whatsapp-desc { font-size: 13px; line-height: 1.5; opacity: .78; }

/*
  ⚠️  L'ÉTIQUETTE « GRATUIT » SE DÉTACHE DU TITRE.

      Noyée dans la phrase, elle se lit comme un argument de vente parmi
      d'autres. Détachée, elle répond à la question qu'on se pose devant
      tout lien d'invitation — et qui retient de cliquer.
*/
.pied__whatsapp-tag {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
  background: rgba(255, 255, 255, .2); color: #fff;
}

@media (max-width: 560px) {
  .pied__whatsapp { align-items: flex-start; }
}