/* =====================================================================
   L'Homme de la situation · commun.css (20/10/2026, page de garde « Sur les quais »)
   ---------------------------------------------------------------------
   En-tête, menu mobile (☰ sous 900 px), pied de page, bandeau de page en
   noir et blanc, boutons et typographie communs à TOUTES les pages.
   Relié APRÈS le <style> de chaque page (il l'emporte sur les anciens styles).
   Classes préfixées « hs- » pour ne pas heurter les anciens nav/footer.
   HTML exact à copier : _entete-pied-commun.html. Comportement : commun.js.
   ===================================================================== */
:root{--foret:#2a2f45;--sapin:#454c6b;--ocre:#f08a6c;--ocre-fonce:#c9583c;--brume:#eceaf2;--blanc:#fbfaf6;--encre:#1b1e2c;--doux:#5b5e70;--c1:#fde7da;--c2:#eeb7b9;--c3:#8486ab;--m1:#6a6d93;--trait:#dcd9e4;
  --hs-nb:grayscale(1) contrast(1.08)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* ---------- boutons (langage commun) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ocre);color:var(--encre);font:600 16px/1.2 Archivo,system-ui,sans-serif;text-decoration:none;padding:14px 24px;border-radius:8px;border:0;cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.06)}
.btn.ligne{background:transparent;border:1.5px solid currentColor;color:var(--foret)}
.bandeau .btn.ligne{color:#fff;border-color:rgba(255,255,255,.55)}

/* ---------- logo signature ---------- */
.hs-logo{display:inline-flex;flex-direction:column;align-items:flex-start;text-decoration:none;line-height:1;color:#fff}
.hs-logo .a{font:italic 600 26px/1 Bitter,Georgia,serif}
.hs-logo .b{font:500 9.5px/1 Archivo,sans-serif;letter-spacing:.42em;margin-top:5px;opacity:.88}
.hs-logo svg{margin-top:5px;display:block}

/* ---------- en-tête : posé sur la photo, puis blanc et collant au défilement ---------- */
.hs-top{position:absolute;top:0;left:0;right:0;z-index:60;margin:0;padding:0;background:transparent;border:0;font-family:Archivo,system-ui,sans-serif}
.hs-in{max-width:1180px;margin:0 auto;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hs-nav{display:block;margin:0;padding:0}
.hs-menu{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center;font:600 14px/1.3 Archivo,system-ui,sans-serif}
.hs-menu li{margin:0;padding:0;list-style:none}
.hs-menu li::before{content:none}
.hs-menu a{text-decoration:none;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55);border:0;background:none;padding:0;font:inherit}
.hs-menu a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--ocre);text-decoration-thickness:2px;text-underline-offset:6px}
.hs-menu a.hs-cad{border:1.5px solid var(--ocre);border-radius:30px;padding:7px 14px;text-shadow:none;background:rgba(0,0,0,.18)}
.hs-burger{display:none;background:rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.55);color:#fff;font:600 20px/1 Archivo,sans-serif;border-radius:8px;width:46px;height:42px;padding:0;cursor:pointer;margin:0}
.hs-top.hs-colle{position:fixed;background:rgba(255,255,255,.96);border-bottom:1px solid var(--trait);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:hs-descend .25s ease}
.hs-top.hs-colle .hs-in{padding-top:12px;padding-bottom:12px}
.hs-top.hs-colle .hs-logo{color:var(--foret)}
.hs-top.hs-colle .hs-menu a{color:var(--foret);text-shadow:none}
.hs-top.hs-colle .hs-menu a.hs-cad{background:transparent;color:var(--ocre-fonce)}
.bandeau.bandeau.hs-dessus,.garde.hs-dessus{z-index:50}
@keyframes hs-descend{from{transform:translateY(-100%)}to{transform:none}}
@media(max-width:1100px){.hs-menu{gap:16px}}

/* ---------- bandeau de page : photo en noir et blanc, voile indigo ---------- */
/* Sur l'élément d'en-tête de chaque page : class="… bandeau", et en 1er enfant <img class="hs-photo" …> (voir _entete-pied-commun.html) */
.bandeau.bandeau{background:linear-gradient(120deg,#1b1e2c 0%,#2a2f45 60%,#454c6b 100%);position:relative;z-index:auto;isolation:isolate;overflow:visible;color:#fff;padding-top:104px;padding-bottom:72px;min-height:0}
.bandeau.bandeau::before{content:none;display:none}
/* photo du bandeau : une vraie image (srcset ordinateur / téléphone), en noir et blanc, calée à droite avec un fondu */
.bandeau .hs-photo{position:absolute;top:0;right:0;left:auto;bottom:auto;width:62%;height:100%;max-width:none;object-fit:cover;z-index:-2;filter:var(--hs-nb);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%);pointer-events:none;margin:0;border:0;border-radius:0}
.bandeau.bandeau::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(27,30,44,.55) 0%,rgba(27,30,44,.35) 45%,rgba(27,30,44,.12) 100%),linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 30%)}
.bandeau .mont,.bandeau .visuel,.bandeau .credit,.bandeau>.fond{display:none!important}
.bandeau h1{color:#fff;text-wrap:balance}
.bandeau h1 span{text-decoration:underline;text-decoration-color:var(--ocre);text-decoration-thickness:5px;text-underline-offset:8px;text-decoration-skip-ink:none}
.bandeau .ariane,.bandeau .ariane a{color:#d8d6e4}
/* textes du bandeau toujours clairs (certaines pages avaient un fond clair) ; les cartes blanches (formulaires) gardent leurs couleurs */
.bandeau.bandeau .lead,.bandeau.bandeau .chapo,.bandeau.bandeau .txt,.bandeau.bandeau .meta{color:#eeeaf2}
.bandeau.bandeau .sur{background:rgba(255,255,255,.12);color:var(--c1)}

/* ---------- pied de page commun ---------- */
.hs-pied{background:#0f1015;color:#a9abbb;font:400 14px/1.6 Archivo,system-ui,sans-serif;padding:34px 0;margin:0}
.hs-pied .hs-pin{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px 24px}
.hs-pied .hs-sig{color:#d6d4e2}
.hs-pied .hs-liens{display:flex;flex-wrap:wrap;gap:6px 18px;max-width:760px}
.hs-pied a{color:#a9abbb;text-decoration:none;margin:0}
.hs-pied a:hover{color:#fff;text-decoration:underline}

/* ---------- téléphone et tablette : menu repliable ---------- */
@media(max-width:899px){
  .hs-burger{display:block}
  .hs-nav{width:100%}
  .hs-menu{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-radius:12px;padding:6px 0;box-shadow:0 14px 34px rgba(0,0,0,.25)}
  .hs-menu.hs-ouvert{display:flex}
  .hs-menu a,.hs-top.hs-colle .hs-menu a{display:block;padding:12px 18px;color:var(--foret);text-shadow:none;font-size:16px}
  .hs-menu li+li{border-top:1px solid var(--trait)}
  .hs-menu a.hs-cad{border:0;border-radius:0;background:transparent;color:var(--ocre-fonce)}
  .bandeau.bandeau{padding-top:96px;padding-bottom:56px}
  .bandeau .hs-photo{width:100%;-webkit-mask-image:none;mask-image:none}
  .bandeau.bandeau::after{background:linear-gradient(180deg,rgba(20,22,33,.58) 0%,rgba(27,30,44,.78) 45%,rgba(27,30,44,.93) 100%)}
}
@media(max-width:560px){
  .hs-in,.hs-pied .hs-pin{padding-left:16px;padding-right:16px}
  .hs-logo .a{font-size:23px}
}

/* colonnes et sommaires collants : sous l en-tete collant */
@media(min-width:900px){.somm{top:100px}aside.cote .colle{top:100px}}


/* #####################################################################
   STYLE V2 « page claire » · validé par Julien le 29/10/2026 (accent Vermillon)
   ---------------------------------------------------------------------
   Activé page par page par <body class="v2">. Les pages sans « v2 » gardent
   l'ancien habillage (tout ce qui suit est limité à .v2).
   Dans une page v2 : commun.css est lié AVANT le <style> de la page
   (la page peut ainsi retoucher un composant sans !important).
   Guide complet : _style-v2.md
   ##################################################################### */

/* ---------- 1. Jetons (variables) ---------- */
:root{
  --ink:#1d2033;--indigo:#2a2f45;--indigo-2:#3a4060;
  --peche:#fff4ee;--peche-2:#fde7da;
  --acc:#e0482a;--acc-f:#b23519;--acc-2:#f08a6c;--on-acc:#fff;     /* Vermillon (figé le 29/10) */
  --ombre:0 18px 50px rgba(42,47,69,.12);--ombre-p:0 6px 22px rgba(42,47,69,.08);
  --nb:grayscale(1) contrast(1.08);
  --f-titre:Archivo,system-ui,sans-serif;--f-texte:Bitter,Georgia,serif}
.v2{--fond:#fff;--doux:#5d6072;--trait:#efe4df;
  /* anciens noms des pages (Aube d'hiver, club.css) → couleurs v2 : les styles propres aux pages suivent seuls */
  --foret:var(--indigo);--sapin:var(--indigo-2);--encre:var(--ink);--blanc:#fff;--brume:var(--peche);
  --ocre:var(--acc);--ocre-fonce:var(--acc-f);--c1:var(--peche-2);--c2:var(--acc-2);--m1:var(--indigo-2);
  --primaire:var(--indigo);--primaire-2:var(--indigo-2);--accent:var(--acc);--accent-fonce:var(--acc-f);--sur-accent:var(--on-acc);--pale:var(--peche-2);
  --titre:var(--f-titre);--texte:var(--f-texte);
  background:var(--fond);color:var(--ink);font:17px/1.65 var(--f-texte);-webkit-font-smoothing:antialiased;margin:0}

/* ---------- 2. Base ---------- */
:where(.v2) *{box-sizing:border-box;margin:0}
:where(.v2) a{color:inherit}
:where(.v2) img{max-width:100%}
:where(.v2) [hidden]{display:none!important}
:where(.v2) h1,:where(.v2) h2,:where(.v2) h3,:where(.v2) h4{font-family:var(--f-titre)}
:where(.v2) h3{font-weight:700;color:var(--ink)}
:where(.v2) mark{background:#fff3c4;color:var(--ink);padding:0 4px;border-radius:3px}
:where(.v2) .wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative}
:where(.v2) .etroit{max-width:880px}
:where(.v2) section.s{padding:96px 0}
:where(.v2) .teinte,:where(.v2) .claire{background:var(--peche)}
:where(.v2) .centre{text-align:center}
:where(.v2) .centre .intro{margin-left:auto;margin-right:auto}
:where(.v2) .maq{background:var(--ink);color:#fff;text-align:center;font:600 13px/1.4 var(--f-titre);padding:7px 12px;position:relative;z-index:70}

/* ---------- 3. Titres : sur-titre à pastille, titre Archivo 800 bicolore (<em> = accent) ---------- */
:where(.v2) .k,:where(.v2) .sur{display:inline-block;font:700 12.5px/1.5 var(--f-titre);text-transform:uppercase;letter-spacing:.16em;color:var(--acc-f);background:none;padding:0;border-radius:0}
:where(.v2) .k::before,:where(.v2) .sur::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:.12em}
:where(.v2) h2.t{font:800 clamp(30px,4vw,46px)/1.08 var(--f-titre);letter-spacing:-.025em;color:var(--ink);margin:10px 0 14px;text-wrap:balance}
:where(.v2) h2.t em{font-style:normal;color:var(--acc)}
:where(.v2) .intro{max-width:700px;color:var(--doux);font-size:18px}
:where(.v2) .lien-suite{display:inline-block;margin-top:22px;font:700 15px var(--f-titre);color:var(--acc-f);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
:where(.v2) .lien-suite:hover{color:var(--ink)}
:where(.v2) .note{font-size:14px;color:var(--doux);margin-top:16px}

/* ---------- 4. Boutons : pleins, arrondis, ombre colorée ---------- */
:where(.v2) .btn{display:inline-block;vertical-align:middle;background:var(--acc);color:var(--on-acc);font:700 16px/1.2 var(--f-titre);text-decoration:none;padding:16px 28px;border-radius:999px;border:0;cursor:pointer;text-align:center;box-shadow:0 10px 26px color-mix(in srgb,var(--acc) 38%,transparent);transition:transform .15s,filter .15s}
:where(.v2) .btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
:where(.v2) .btn .px{white-space:nowrap;margin-left:12px;padding-left:12px;border-left:1.5px solid color-mix(in srgb,var(--on-acc) 45%,transparent)}
:where(.v2) .btn.ligne{background:#fff;color:var(--ink);border:1.5px solid var(--trait);box-shadow:var(--ombre-p)}
:where(.v2) .actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:24px}
:where(.v2) .inactif{font-size:12.5px;color:var(--doux);margin-top:8px}

/* ---------- 5. Cartes et listes ---------- */
:where(.v2) .cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px}
:where(.v2) .bloc{background:#fff;border-radius:20px;padding:26px 24px;box-shadow:var(--ombre-p);border:1px solid var(--trait)}
:where(.v2) .bloc h3{font-size:19px;margin-bottom:8px}
:where(.v2) .bloc p{font-size:15.5px;color:var(--doux)}
:where(.v2) .bloc .n,:where(.v2) .pastille{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 19px/1 var(--f-titre);color:var(--on-acc);background:linear-gradient(135deg,var(--acc-2),var(--acc));margin-bottom:14px}
:where(.v2) .ok{list-style:none;padding:0}
:where(.v2) .ok li{padding:8px 0 8px 32px;position:relative}
:where(.v2) .ok li::before{content:"✓";position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 var(--f-titre);background:var(--peche-2);color:var(--acc-f)}
:where(.v2) .encart{background:var(--peche);border:1.5px solid var(--peche-2);border-radius:24px;padding:28px 30px;margin-top:34px;display:flex;gap:18px 30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
:where(.v2) .teinte .encart,:where(.v2) .claire .encart{background:#fff}
:where(.v2) .encart h3{font-size:22px;margin-bottom:4px}
:where(.v2) .encart p{color:var(--doux);max-width:620px}
:where(.v2) .franc{font:italic 400 21px/1.5 var(--f-texte);color:var(--ink);max-width:820px;margin-top:28px;padding:4px 0 4px 22px;border-left:3px solid var(--acc)}
:where(.v2) .franc b{font-style:normal;font-weight:600;color:var(--acc)}
:where(.v2) .tag{display:inline-block;font:700 11.5px var(--f-titre);letter-spacing:.08em;text-transform:uppercase;background:var(--peche-2);color:var(--acc-f);border-radius:20px;padding:4px 10px}
/* photo en noir et blanc dans un cadre arrondi : <div class="nbph" style="--img:url('photos/x.jpg');--pos:50% 30%" role="img" aria-label="…"> */
:where(.v2) .nbph{position:relative;overflow:hidden;background:#2b2b2b;border-radius:24px;box-shadow:var(--ombre)}
:where(.v2) .nbph::before{content:"";position:absolute;inset:0;background:var(--img) var(--pos,50% 30%)/cover no-repeat;filter:var(--nb)}

/* ---------- 6. Étapes numérotées (4 cartes) ---------- */
:where(.v2) .etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;text-align:left}
:where(.v2) .etapes>div{background:#fff;border-radius:20px;padding:26px 24px;box-shadow:var(--ombre-p)}
:where(.v2) .etapes .n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:800 20px/1 var(--f-titre);color:var(--on-acc);background:linear-gradient(135deg,var(--acc-2),var(--acc))}
:where(.v2) .etapes h3{font-weight:700;font-size:18px;color:var(--ink);margin:16px 0 6px}
:where(.v2) .etapes p{font-size:15px;color:var(--doux)}

/* ---------- 7. Questions (cartes dépliables) ---------- */
:where(.v2) .faq{display:grid;gap:10px;max-width:860px;margin:26px auto 0}
:where(.v2) .faq details{background:#fff;border-radius:16px;padding:16px 20px;box-shadow:var(--ombre-p);border:1px solid var(--trait)}
:where(.v2) .faq summary{cursor:pointer;font:700 17.5px var(--f-titre);color:var(--ink);list-style:none;display:block;position:relative;padding-right:28px}
:where(.v2) .faq summary::-webkit-details-marker{display:none}
:where(.v2) .faq summary::after{content:"+";color:var(--acc-f);font-weight:800;position:absolute;right:0;top:0}
:where(.v2) .faq details[open] summary::after{content:"−"}
:where(.v2) .faq p{margin-top:10px;color:var(--doux)}

/* ---------- 8. Le seul bloc sombre de la page (extrait, outils…) : panneau indigo arrondi ---------- */
:where(.v2) .sombre,:where(.v2) .extrait{background:var(--indigo);color:#e9e7f1;border-radius:32px;margin:0 16px}
:where(.v2) .sombre h2.t,:where(.v2) .extrait h2.t,:where(.v2) .sombre h3,:where(.v2) .extrait h3{color:#fff}
:where(.v2) .sombre .k,:where(.v2) .extrait .k{color:var(--acc-2)}
:where(.v2) .sombre .k::before,:where(.v2) .extrait .k::before{background:var(--acc-2)}
:where(.v2) .sombre .intro,:where(.v2) .extrait .intro{color:#d6d4e2}
:where(.v2) .sombre .franc,:where(.v2) .extrait .franc{color:#fff;border-color:var(--acc-2)}
:where(.v2) .sombre .franc b,:where(.v2) .extrait .franc b{color:var(--acc-2)}
:where(.v2) .sombre .ok li::before{background:var(--acc);color:#fff}
:where(.v2) .sombre .btn.ligne,:where(.v2) .extrait .btn.ligne{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none}
:where(.v2) .sombre a:not(.btn){color:var(--peche-2)}
/* extrait minuté (accueil, page cadeau) */
:where(.v2) .ex{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
:where(.v2) .chrono{background:var(--indigo-2);border-radius:22px;padding:26px 28px}
:where(.v2) .chrono .h{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15.5px}
:where(.v2) .chrono .h b{font:700 15px var(--f-titre);color:var(--acc-2)}
:where(.v2) .chrono .q{font-style:italic;padding-top:14px;color:#fff}

/* ---------- 9. Dernier appel : photo N&B plein cadre (hs-etreinte) ---------- */
:where(.v2) .fin{position:relative;isolation:isolate;color:#fff;text-align:center;padding:150px 0;overflow:hidden;margin-top:96px;background:#1d2033}
:where(.v2) .fin::before{content:"";position:absolute;inset:0;z-index:-2;background:url('photos/hs-etreinte.jpg') 60% 35%/cover no-repeat;filter:var(--nb)}
:where(.v2) .fin::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(29,32,51,.35),rgba(29,32,51,.72))}
:where(.v2) .fin h2.t{color:#fff;font-size:clamp(34px,5vw,58px)}
:where(.v2) .fin h2.t em,:where(.v2) .sombre h2.t em,:where(.v2) .extrait h2.t em{color:var(--acc-2)}
:where(.v2) .fin p{max-width:620px;margin:0 auto 28px;font-size:18px}
:where(.v2) .fin .actions,:where(.v2) .fin .liens{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
:where(.v2) .fin .btn.ligne{background:#fff;color:var(--ink);border-color:#fff}
:where(.v2) .fin .inactif,:where(.v2) .fin small{color:#e3e1ec}
:where(.v2) .fin a:not(.btn){color:#fff}

/* ---------- 10. En-tête (sur la photo) : accents v2 ---------- */
.v2 .hs-logo svg path{stroke:var(--acc)}
.v2 .hs-menu a.hs-cad{border-color:var(--acc)}
.v2 .hs-menu a[aria-current="page"]{text-decoration-color:var(--acc)}
.v2 .hs-top.hs-colle .hs-menu a.hs-cad{color:var(--acc-f)}

/* ---------- 11. Titre de page : photo N&B en bandeau + carte blanche posée dessus ----------
   <section class="bandeau"> <img class="hs-photo" …> <header class="hs-top">…</header>
     <div class="wrap"><div> sur-titre .sur, <h1>… <span>accent</span></h1>, .lead, .prixh, .actions </div></div>
   </section>  → la 1re <div> du .wrap devient la carte. */
.v2 .bandeau.bandeau{--ph-h:clamp(400px,58vh,540px);background:var(--fond);color:var(--ink);padding:calc(var(--ph-h) - 160px) 16px 0;isolation:isolate;overflow:visible;min-height:0}
.v2 .bandeau.bandeau .hs-photo{top:0;left:0;right:0;width:100%;height:var(--ph-h);-webkit-mask-image:none;mask-image:none}
.v2 .bandeau.bandeau::after{inset:0 0 auto 0;height:var(--ph-h);background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 32%)}
.v2 .bandeau.bandeau>.wrap{padding:0}
.v2 .bandeau.bandeau>.wrap>div{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:46px 56px 40px;background:#fff;border-radius:28px;box-shadow:var(--ombre);text-align:center}
.v2 .bandeau.bandeau .sur{background:none;padding:0;color:var(--acc-f);font-size:12.5px;letter-spacing:.16em}
.v2 .bandeau.bandeau h1{font:800 clamp(38px,5.4vw,66px)/1.02 var(--f-titre);letter-spacing:-.035em;color:var(--ink);margin:16px 0 18px;text-wrap:balance}
.v2 .bandeau.bandeau h1 span{color:var(--acc);text-decoration:none}
.v2 .bandeau.bandeau .lead{font-size:19px;line-height:1.55;color:var(--ink);max-width:36em;margin:0 auto}
.v2 .bandeau.bandeau .txt,.v2 .bandeau.bandeau .chapo,.v2 .bandeau.bandeau .meta{color:var(--doux)}
.v2 .bandeau.bandeau .prixh{font:800 54px/1 var(--f-titre);letter-spacing:-.03em;color:var(--ink);margin-top:24px}
.v2 .bandeau.bandeau .prixh small{font:400 15px var(--f-texte);color:var(--doux);letter-spacing:0}
.v2 .bandeau.bandeau .actions{justify-content:center}
.v2 .bandeau.bandeau .btn.ligne{background:#fff;color:var(--ink);border-color:var(--trait)}
.v2 .bandeau.bandeau .inactif,.v2 .bandeau.bandeau .inactif a{color:var(--doux)}
.v2 .bandeau.bandeau .ariane,.v2 .bandeau.bandeau .ariane a{color:var(--doux)}

/* 11 bis (29/10, pages secondaires) : fil d'Ariane et chapeau dans la carte ; bandeau SOBRE sans photo
   (pages légales, plan du site, 404, redirections) : <section class="tete bandeau sobre">, sans <img class="hs-photo">. */
.v2 .bandeau.bandeau .ariane{font:500 13px/1.4 var(--f-titre);margin:0 0 14px}
.v2 .bandeau.bandeau .ariane a{text-decoration:none}
.v2 .bandeau.bandeau .ariane a:hover{text-decoration:underline;color:var(--acc-f)}
.v2 .bandeau.bandeau p.chapo{font-size:19px;line-height:1.55;max-width:36em;margin:0 auto}
.v2 .bandeau.bandeau.sobre{--ph-h:300px}
.v2 .bandeau.bandeau.sobre h1{font-size:clamp(34px,4.4vw,54px)}
.v2 .bandeau.bandeau.sobre::after{background:radial-gradient(ellipse at 85% 120%,rgba(240,138,108,.28),transparent 55%),linear-gradient(120deg,#1d2033 0%,var(--indigo) 60%,var(--indigo-2) 100%)}
@media(max-width:899px){.v2 .bandeau.bandeau.sobre{--ph-h:250px}.v2 .bandeau.bandeau p.chapo{font-size:17.5px}}

/* ---------- 12. Barre de navigation fixe en bas (téléphone) : créée par commun.js sur les pages v2 ---------- */
.hs-bas{display:none}
@media(max-width:899px){
  .v2 .hs-bas{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--trait);box-shadow:0 -8px 26px rgba(42,47,69,.10);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .v2 .hs-bas a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;min-height:50px;text-decoration:none;font:700 11.5px/1.2 var(--f-titre);color:var(--ink);border-radius:14px}
  .v2 .hs-bas svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .v2 .hs-bas a[aria-current="page"]{color:var(--acc-f);background:var(--peche)}
  .v2 .hs-bas a.hs-bas-cad{background:var(--acc);color:var(--on-acc)}
  .v2.hs-a-barre{padding-bottom:72px}
}

/* ---------- 13. Tablette / téléphone ---------- */
@media(max-width:899px){
  :where(.v2) .etapes{grid-template-columns:1fr 1fr}
  :where(.v2) .ex{grid-template-columns:1fr}
  .v2 .hs-menu a.hs-cad{color:var(--acc-f)}
  .v2 .bandeau.bandeau{--ph-h:min(62vh,440px);padding:calc(var(--ph-h) - 110px) 16px 0}
  .v2 .bandeau.bandeau::after{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 42%)}
  .v2 .bandeau.bandeau>.wrap>div{padding:34px 22px 28px;border-radius:24px}
  :where(.v2) .fin::before{background-image:url('photos/hs-etreinte-m.jpg')}
}
@media(max-width:560px){
  :where(.v2) .wrap{padding:0 16px}
  :where(.v2) section.s{padding:64px 0}
  :where(.v2) .etapes{grid-template-columns:1fr}
  :where(.v2) .sombre,:where(.v2) .extrait{margin:0;border-radius:0}
  :where(.v2) .actions .btn{width:100%}
  :where(.v2) .franc{font-size:19px;padding-left:16px}
  :where(.v2) .encart{padding:22px 20px}
  :where(.v2) .fin{padding:110px 0;margin-top:64px}
  :where(.v2) .chrono{padding:20px 18px}
  :where(.v2) .chrono .h{grid-template-columns:62px 1fr}
  .v2 .bandeau.bandeau>.wrap{padding:0}
  .v2 .bandeau.bandeau h1{font-size:clamp(34px,10vw,46px)}
  .v2 .bandeau.bandeau .lead{font-size:17.5px}
  .v2 .bandeau.bandeau .prixh{font-size:46px}
}