/* Le BANDEAU du site — carte flottante collée en haut : ancien logo à gauche,
   trois liens centrés, « Essayer » à droite. Repris du bandeau de l'accueil
   (`.bandeau`, bloc `accueil-style` de site/index.html) : mêmes cotes, même
   carte, même règle de téléphone (sous 900 px il RETIRE la navigation au lieu
   de la rétrécir, sauf « Tarifs » depuis le 26/09).

   ⚠️ UN SEUL ENDROIT. Chaque page a ses propres jetons (--ink, --txt, --carte…,
   hérités d'époques différentes) : le bandeau n'en lit AUCUN, il porte les
   siens (--b-*), sinon il changerait d'allure d'une page à l'autre. Seul le
   fond de la bande qui masque le défilement vient de la page (`inherit` sur
   <body>), pour se confondre avec elle.

   L'onglet de la page où l'on est : `aria-current="page"` et une pastille
   CONTOUR — jamais le vert plein (l'action) ni l'ocre (le grand titre). Le
   trait --b-trait tient ≥ 3:1 sur la carte ET sur le fond de la pastille,
   dans les deux thèmes. Tous les liens ont le même rembourrage et une bordure
   transparente : ni l'état actif ni le survol ne décalent rien. */
.bandeau-zone{
  --b-card:#ffffff; --b-line:#dedcd4; --b-txt:#1a1f1b; --b-dim:#5b635d;
  --b-vert:#2f6d4f; --b-vert-survol:#285f44; --b-vert-texte:#2f6d4f;
  --b-pastille:#f7f6f2; --b-trait:#7a817c;
  --b-ombre:0 10px 30px -18px rgba(23,32,27,.55);
  position:sticky;top:0;z-index:60;padding:20px 24px 0;background:inherit;
  margin:0;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bandeau-zone{
  --b-card:#161d18; --b-line:#27312b; --b-txt:#e7ece7; --b-dim:#9aa59d;
  --b-vert-texte:#7cc39a; --b-pastille:#0f1411; --b-trait:#6b776f;
  --b-ombre:0 10px 30px -14px rgba(0,0,0,.7);
}}
:root[data-theme="dark"] .bandeau-zone{
  --b-card:#161d18; --b-line:#27312b; --b-txt:#e7ece7; --b-dim:#9aa59d;
  --b-vert-texte:#7cc39a; --b-pastille:#0f1411; --b-trait:#6b776f;
  --b-ombre:0 10px 30px -14px rgba(0,0,0,.7);
}
/* Une ancre (#retractation, #mediation…) ne se pose pas SOUS la carte. */
html{scroll-padding-top:96px}

header.bandeau{box-sizing:border-box;height:52px;margin:0;padding:0 20px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  background:var(--b-card);border:1px solid var(--b-line);border-radius:14px;
  box-shadow:var(--b-ombre);font:400 14px/1 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--b-txt)}
.bandeau .logo{justify-self:start;display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--b-txt);font:600 19px/1 "Fraunces",Georgia,"Times New Roman",serif;
  letter-spacing:-.01em;white-space:nowrap}
.bandeau .logo img{width:1.32em;height:1.32em;display:block}
.bandeau .logo b{font-weight:inherit;color:var(--b-vert-texte)}
.bandeau nav{justify-self:center;display:flex;gap:6px;margin:0;padding:0;white-space:nowrap}
.bandeau nav a{padding:7px 12px;border:1px solid transparent;border-radius:999px;
  color:var(--b-dim);text-decoration:none;font-size:14px;line-height:1;font-weight:400}
.bandeau nav a:hover{color:var(--b-txt)}
.bandeau nav a[aria-current="page"]{color:var(--b-txt);font-weight:600;
  background:var(--b-pastille);border-color:var(--b-trait)}
/* ⚠️ `margin`, `border`, `gap` remis à zéro : les guides ont leur propre `.cta`
   (encadré d'essai) dont les marges fuiraient sur ce bouton. */
.bandeau .cta{justify-self:end;display:inline-flex;align-items:center;margin:0;gap:0;padding:9px 14px;
  border:0;box-shadow:none;
  border-radius:9px;background:var(--b-vert);color:#fff;text-decoration:none;
  font-size:13px;line-height:1;font-weight:600;white-space:nowrap;
  transition:background-color .2s}
.bandeau .cta:hover{background:var(--b-vert-survol)}
.bandeau a:focus-visible{outline:2px solid var(--b-vert-texte);outline-offset:3px}

/* Téléphone : comme l'accueil, la carte se resserre et la navigation part —
   sauf « Tarifs » (26/09, variante V1 retenue par l'utilisateur) : sans lui,
   la page des prix n'était atteignable que par le pied. Il se range entre la
   marque et « Essayer », avec sa pastille d'onglet actif sur /tarifs.
   Choisi par son ADRESSE (`tarifs`, `pricing`), pas par sa place : le test
   vérifie que c'est bien lui qui reste. */
@media (max-width:900px){
  .bandeau-zone{padding:12px 12px 0}
  header.bandeau{height:46px;padding:0 14px;gap:10px;grid-template-columns:1fr auto auto}
  .bandeau nav{justify-self:end;gap:0}
  .bandeau nav a:not([href*="tarifs"]):not([href*="pricing"]){display:none}
  .bandeau nav a{position:relative;padding:7px 10px}
  .bandeau .logo{font-size:17px}
  html{scroll-padding-top:74px}
  /* Cibles tactiles (26/09, audit out/vitrine_mobile/AUDIT.md) : « Essayer »
     faisait 31 px de haut et le logo 22. La ZONE s'étend à 44 px par un
     pseudo-élément transparent ; le dessin ne bouge pas d'un pixel. */
  .bandeau .logo,.bandeau .cta{position:relative}
  .bandeau .logo::after,.bandeau .cta::after{content:"";position:absolute;inset:-11px -6px}
  .bandeau .cta::after{inset:-7px -6px}
  /* « Tarifs » : 30 px de haut, 44 de zone ; 4 px de chaque côté, sans
     empiéter sur celle d'« Essayer » (10 px d'écart, 6 + 4 de zone). */
  .bandeau nav a::after{content:"";position:absolute;inset:-7px -4px}
}