/* ============================================================================
   vitrine.css — le style des pages COMMERCIALES de Mandaris (accueil, pages de
   fond). À ne pas confondre avec styles.css, qui habille le JOB BOARD et
   l'Observatoire : les deux définissent `body`, `.wrap`, `.btn` et `:root` avec
   des valeurs DIFFÉRENTES — charger les deux sur une même page donne un hybride.

   Extrait le 21/09/2026 du <style> en ligne d'index.html. Motif : /crm-recruteur/
   chargeait styles.css tout en utilisant les classes de l'accueil (.sec, .h1,
   .h2, .lg, .top, .menu…) qui n'y sont pas — la page sortait NUE en production,
   texte bord à bord, sans en-tête. C'est une page écrite pour être trouvée sur
   « CRM recruteur » : elle accueillait des acheteurs sur une page cassée.

   Toute nouvelle page de fond charge CE fichier, et lui seul.
   ============================================================================ */
/* ═════════════════════════════════════════════════════════
   Mandaris — page d'accueil
   Design : reconstruction du template « Whitepace » (Figma)
   avec le contenu Mandaris. Tokens extraits du fichier :
   marine #043873 · bleu #4F9CF9 · ciel #C4DEFD · jaune #FFE492
   texte #212529 · Inter · titres 72/56/36.
   Page autonome : ne dépend pas de styles.css (app.js suffit).
   ═════════════════════════════════════════════════════════ */
:root{
  --navy:#043873; --blue:#4F9CF9; --sky:#C4DEFD; --yellow:#FFE492;
  --ink:#212529; --white:#FFFFFF;
  --f:'Inter',system-ui,sans-serif;
  --barre:6.5rem;          /* hauteur de l'en-tête collant + une marge */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f);color:var(--ink);background:#fff;line-height:1.6;font-size:18px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:2rem}
img,svg{max-width:100%;height:auto}
a{text-decoration:none}

.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:.75rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}
:where(a,button):focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.h1{font-weight:700;font-size:clamp(2.6rem,5.5vw,4.5rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 1.5rem;font-optical-sizing:auto}
.h2{font-weight:700;font-size:clamp(2rem,4vw,3.4rem);line-height:1.1;letter-spacing:-.025em;margin:0 0 1.5rem;font-optical-sizing:auto}
p.lg{font-size:1.05rem;line-height:1.75;margin:0 0 2rem;max-width:58ch}

.uline{position:relative;display:inline-block}
.uline svg{position:absolute;left:0;right:0;bottom:-.18em;width:100%;height:.34em}

.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--blue);color:#fff;font-weight:500;font-size:1rem;
  border-radius:8px;padding:1rem 2.1rem;border:0;cursor:pointer;font-family:var(--f);
}
.btn:hover{filter:brightness(1.06)}
.btn,.lang,.bill__b,.calc__b{transition:transform 100ms cubic-bezier(.2,.8,.3,1),filter 140ms,background-color 140ms,border-color 140ms}
.btn:active,.lang:active,.bill__b:active,.calc__b:active{transform:scale(.92)}
@media (prefers-reduced-motion: reduce){
  .btn,.lang,.bill__b,.calc__b{transition:filter 140ms}
  .btn:active,.lang:active,.bill__b:active,.calc__b:active{transform:none}
}
.btn .ar{font-size:1.1rem;line-height:1}
.btn--y{background:var(--yellow);color:var(--navy);font-weight:600}

/* ── Header marine ── */
.top{
  position:sticky;top:0;z-index:50;color:#fff;
  background:rgba(4,56,115,.80);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
}
/* le contenu ne bute pas sur un filet de 1 px : il se fond sous la barre */
.top::after{
  content:'';position:absolute;inset:100% 0 auto;height:20px;pointer-events:none;
  background:linear-gradient(rgba(4,56,115,.30),rgba(4,56,115,0));
}
/* une ancre ne doit pas atterrir SOUS la barre collante */
:where([id]){scroll-margin-top:var(--barre)}
@media (prefers-reduced-transparency: reduce){
  .top{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.4rem}
.logo{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:700;font-size:1.45rem;letter-spacing:-.01em}
.logo i{width:14px;height:14px;background:var(--yellow);border-radius:3px;transform:rotate(45deg)}
.menu{display:flex;gap:2rem;align-items:center;font-size:.98rem;font-weight:500}
.menu a{color:#fff}
.top__cta{display:flex;gap:.8rem;align-items:center}
.top .btn{padding:.8rem 1.6rem}
.lang{
  font-family:var(--f);font-size:.85rem;letter-spacing:.04em;font-weight:600;
  background:none;border:1.5px solid #FFFFFF55;border-radius:999px;
  padding:.5rem .95rem;color:#FFFFFFB3;cursor:pointer;display:flex;gap:.3rem;
  align-items:center;min-height:44px;   /* cible tactile : 36 px était trop court */
}
.lang:hover{border-color:#fff;color:#fff}
.lang__on{color:#fff}
.lang__sep{opacity:.5}

/* ── Hero ── */

/* ── Sections duo ── */
.sec{padding-block:5.5rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.duo .art{display:flex;justify-content:center}
.kick{color:var(--blue);font-weight:600;font-size:.95rem;letter-spacing:.02em;margin:0 0 .8rem;text-transform:uppercase}
/* Le croisement des deux veilles : offres relevées × praticiens qui bougent.
   Ce que fait agent-vertical/candidats.mjs, montré à plat. */
.croix{background:var(--sky);border-radius:12px;padding:1.8rem;width:100%}
.croix__hd{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:.9rem}
.croix__hd span{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);opacity:.75;
}
.croix__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;position:relative}
.croix__cols::before{
  content:'';position:absolute;left:50%;top:.2rem;bottom:.2rem;
  border-left:2px dashed #93B8E8;
}
.croix__col{display:grid;gap:.6rem;align-content:start}
.mini{background:#fff;border-radius:9px;padding:.75rem .9rem;font-size:.84rem;font-weight:600;color:var(--navy)}
.mini small{display:block;font-weight:400;color:#5A6B84;font-size:.76rem;margin-top:.15rem}
.croix__out{
  margin-top:1.2rem;background:var(--navy);color:#fff;border-radius:10px;
  padding:1rem 1.15rem;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;font-size:.85rem;flex-wrap:wrap;
}
.croix__out b{color:var(--yellow);font-weight:600}

/* L'échelle de valeur d'un rapprochement */
.echelle{list-style:none;margin:0 0 2rem;padding:0;counter-reset:e;display:grid;gap:.8rem}
.echelle li{counter-increment:e;padding-left:2.4rem;position:relative;font-size:.96rem;color:#495057}
.echelle li::before{
  content:counter(e);position:absolute;left:0;top:.05rem;
  width:1.65rem;height:1.65rem;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.78rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.echelle b{color:var(--ink)}

.canaux{background:var(--sky);border-radius:12px;padding:2.4rem;display:grid;gap:1rem}
/* Les cartes portent le logo officiel du canal, sans mention technique : le
   « comment » (flux XML, API, JSON-LD) est de la plomberie, pas un argument. */
.canal{background:#fff;border-radius:10px;padding:1.15rem 1.6rem;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:64px}
.canal img{display:block;height:26px;width:auto;max-width:100%}
.canal img[src*="jooble"]{height:23px}
.canal img[src*="talent"]{height:22px}
.canal img[src*="google"]{height:21px}
.canal small{font-size:.72rem;font-weight:600;color:#5A6B84;letter-spacing:.06em}

/* ── Tarifs ── */
.pricing{padding-block:5.5rem;text-align:center}
.pricing .sub{max-width:60ch;margin:0 auto 3.5rem;color:#495057}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:left}
.plans--duo{grid-template-columns:repeat(2,1fr);max-width:860px;margin-inline:auto}
.plan{border:1px solid #FFE492;border-radius:10px;padding:2.5rem 2.75rem;background:#fff}
.plan--mid{background:var(--navy);color:#fff;transform:scale(1.04);box-shadow:0 24px 50px -24px rgba(4,56,115,.55);border:0}
.plan h3{margin:0 0 1.4rem;font-size:1.3rem;font-weight:600}
.plan .price{font-weight:700;font-size:2.3rem;margin:0 0 .4rem}
.plan--mid .price{color:var(--yellow)}
.plan .per{font-size:.95rem;margin:0 0 1.6rem;color:#495057}
.plan--mid .per{color:#FFFFFFB3}
.plan ul{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.9rem;font-size:.95rem}
.plan li{display:flex;gap:.7rem;align-items:baseline}
.plan li::before{content:'✓';font-weight:700;color:var(--ink);flex:none}
.plan--mid li::before{color:var(--yellow)}
.plan--std .btn{background:#fff;border:1px solid #FFE492;color:var(--ink);font-weight:500}
.pricing .note{font-size:.88rem;color:#868E96;max-width:64ch;margin:2.4rem auto 0}
.fine{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:860px;margin:3.2rem auto 0;padding:0;text-align:left}
.fine li{border-top:2px solid #FFE492;padding-top:.9rem}
.fine b{display:block;font-size:.95rem;color:var(--navy);margin-bottom:.35rem}
.fine span{font-size:.88rem;color:#868E96;line-height:1.55}
.partner{max-width:860px;margin:2.2rem auto 0;background:var(--sky);border-radius:12px;padding:1.6rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;text-align:left}
.partner__txt b{display:block;font-size:1.05rem;color:var(--navy);margin-bottom:.2rem}
.partner__txt span{font-size:.92rem;color:#5A6B84}
.partner .btn{flex:none}
.tiers-wrap{align-self:center;text-align:left}
.tiers{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tiers caption{text-align:left;font-weight:600;font-size:.95rem;color:#495057;padding-bottom:1rem}
.tiers th{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#868E96;font-weight:600;padding:0 0 .7rem;border-bottom:2px solid var(--navy);text-align:left}
.tiers th+th,.tiers td+td{text-align:right}
.tiers td{padding:.8rem 0;border-bottom:1px solid #EDF0F3;font-size:.95rem;color:#495057}
.tiers tbody tr:last-child td{border-bottom:0}
.tiers .p{font-weight:700;font-size:1.2rem;color:var(--navy)}
.tiers .a{color:#868E96;font-size:.88rem}
.bill{display:flex;justify-content:center;margin:0 0 2.6rem}
.bill__b{display:flex;align-items:center;gap:.5rem;border:1px solid #CED4DA;background:#fff;color:#495057;font:inherit;font-size:.95rem;font-weight:600;padding:.55rem 1.3rem;cursor:pointer}
.bill__b:first-child{border-radius:8px 0 0 8px}
.bill__b:last-child{border-radius:0 8px 8px 0;border-left:0}
.bill__b.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.bill__tag{background:var(--yellow);color:var(--ink);font-size:.72rem;font-weight:700;padding:.15rem .45rem;border-radius:99px}
.calc{border:1px solid #FFE492;border-radius:10px;background:#fff;padding:1.5rem 1.7rem;margin:0 0 1.8rem}
.calc__q{font-weight:600;font-size:.95rem;color:#495057;margin:0 0 .8rem}
.calc__step{display:flex;align-items:center;gap:.5rem;margin:0 0 1.3rem}
.calc__b{width:2.75rem;height:2.75rem;border:1px solid #CED4DA;background:#fff;border-radius:8px;font-size:1.25rem;line-height:1;color:var(--navy);cursor:pointer}
.calc__b:hover{border-color:var(--navy)}
.calc__b:disabled{opacity:.35;cursor:default}
.calc__step input{width:4.6rem;height:2.75rem;text-align:center;border:1px solid #CED4DA;border-radius:8px;font:inherit;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.calc__step input::-webkit-outer-spin-button,.calc__step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__tot{font-weight:700;font-size:1.9rem;color:var(--navy);margin:0 0 .35rem;font-variant-numeric:tabular-nums;line-height:1.15}
.calc__tot span{font-size:.95rem;font-weight:500;color:#868E96}
.calc__tot .calc__nb{font-size:inherit;font-weight:inherit;color:inherit;white-space:nowrap}
.calc .sh{display:none}
.calc__u{font-size:.9rem;color:#495057;margin:0 0 .45rem;font-variant-numeric:tabular-nums;min-height:1.45em}
.calc__an{font-size:.9rem;color:#868E96;margin:0;font-variant-numeric:tabular-nums;min-height:1.45em}
.calc__next{font-size:.85rem;color:#868E96;margin:.8rem 0 0;padding-top:.8rem;border-top:1px dashed #EDF0F3;font-variant-numeric:tabular-nums;min-height:1.45em}
.tiers tbody tr.on td{background:#FFE49226}
.tiers tbody tr.on td:first-child{font-weight:700;color:var(--navy)}
.tiers.an .a{font-weight:700;font-size:1.2rem;color:var(--navy)}
.tiers.an .p{font-weight:400;font-size:.88rem;color:#868E96}

/* ── Bande marine données ── */
.band{background:var(--navy);color:#fff;position:relative;overflow:hidden;text-align:center}
.band__waves{position:absolute;inset:0;opacity:.5;pointer-events:none;display:flex;align-items:center}
.band__in{position:relative;padding-block:5rem;max-width:760px;margin-inline:auto}
.band p.lg{color:#FFFFFFCC;margin-inline:auto}

/* ── Canaux wordmarks ── */
.marques{padding-block:4.5rem;text-align:center}
.marques .row{display:flex;gap:3.5rem;justify-content:center;flex-wrap:wrap;align-items:center;margin-top:2.5rem}
.marque{font-weight:700;font-size:1.5rem;color:#343A40}
.marque small{display:block;font-size:.72rem;font-weight:500;color:#868E96;letter-spacing:.06em}
/* Logos officiels des canaux : fichiers pris chez chaque partenaire, hauteur
   normalisée à l'œil (les hauteurs d'x diffèrent d'une marque à l'autre). */
.marque img{display:block;height:28px;width:auto;max-width:100%}
.marque img[src*="jooble"]{height:25px}
.marque img[src*="talent"]{height:24px}
.marque img[src*="google"]{height:23px}
.marque--sous{display:flex;flex-direction:column;align-items:center;gap:.35rem}

/* ── Sources marine ── */
.dark{background:var(--navy);color:#fff}
.dark .kick{color:var(--yellow)}
.dark p.lg{color:#FFFFFFCC}

/* ── Douleurs en cartes-citations ── */
.quotes{padding-block:5.5rem;text-align:center}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;text-align:left}
.q{border-radius:10px;padding:2.4rem;background:#fff;box-shadow:0 14px 30px -18px rgba(4,56,115,.25)}
.q--blue{background:var(--blue);color:#fff}
.q .mark{font-size:3.2rem;font-weight:700;line-height:.6;color:var(--navy);display:block;margin-bottom:1.4rem}
.q--blue .mark{color:#fff}
.q p{margin:0;font-size:1.02rem;line-height:1.7}
.q .who{display:block;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid #DEE2E6;font-size:.85rem;color:#868E96;font-weight:500}
.q--blue .who{border-color:#FFFFFF55;color:#FFFFFFCC}

/* ── FAQ ── */
.faq-sec{padding-block:5.5rem;background:#F5F9FF}
.faq{max-width:800px;margin:2.6rem auto 0;display:grid;gap:.9rem}
.faq details{background:#fff;border-radius:10px;box-shadow:0 6px 18px -12px rgba(4,56,115,.25)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.2rem 1.5rem;
  font-weight:600;font-size:1.05rem;color:var(--ink);
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--blue);font-weight:700;flex:none}
.faq details[open] summary::after{content:'–'}
.faq p{margin:0;padding:0 1.5rem 1.4rem;font-size:.96rem;color:#495057;max-width:66ch}

/* ── Contact ── */
.contact{text-align:center;padding-block:5.5rem}
.contact .sub{max-width:56ch;margin:0 auto 2.8rem;color:#495057}
.form{
  max-width:680px;margin:0 auto;text-align:left;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem 1.1rem;
}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1 / -1}
.field__lbl{font-size:.8rem;font-weight:600;color:var(--navy);letter-spacing:.02em}
.field__in{
  font-family:var(--f);font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid #D4DEEA;border-radius:8px;
  padding:.85rem 1rem;width:100%;transition:border-color .15s;
}
.field__in:hover{border-color:#A9C4EF}
.field__in:focus{outline:none;border-color:var(--blue)}
.field__in--area{resize:vertical;min-height:7rem;line-height:1.5}
.field__in[aria-invalid="true"]{border-color:#E2574C}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Le captcha n'occupe aucune place tant qu'il n'est pas activé (voir app.js). */
#captcha:empty{display:none}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:.4rem}
.form__note{margin:0;font-size:.85rem;color:#868E96;max-width:36ch;text-align:left}
.form__msg{grid-column:1 / -1;margin:.3rem 0 0;font-size:.95rem;min-height:1.3rem;font-weight:500}
.form__msg--ok{color:#12805C}
.form__msg--ko{color:#C0392B}
.btn[disabled]{opacity:.55;cursor:progress}

/* ── Footer marine ── */
.foot{background:var(--navy);color:#fff;padding-top:4.5rem}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem}
.fcols h4{margin:0 0 1.1rem;font-size:1rem;font-weight:700}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:.92rem}
.fcols a{color:#FFFFFFB3}
.fcols a:hover{color:#fff}
.fbase{border-top:1px solid #FFFFFF2E;padding-block:1.6rem;display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;color:#FFFFFF99;flex-wrap:wrap}

@media(max-width:920px){
  .hero__in,.duo{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan--mid{transform:none}
  .qgrid{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .fine{grid-template-columns:1fr;gap:1.4rem}
  .partner{flex-direction:column;align-items:flex-start}
  .menu{display:none}
}
@media(max-width:620px){
  .form{grid-template-columns:1fr}
  .top .btn{display:none}
  /* Étroit, la version longue de chaque ligne replierait et ferait sauter la
     carte : on passe aux libellés courts. */
  .calc .ln{display:none}
  .calc .sh{display:inline}
  .calc__tot{font-size:1.7rem}
}
@media(max-width:360px){
  /* Très étroit (iPhone SE) : un gros montant pousserait « par mois » à la
     ligne. On l'y met toujours — hauteur constante quel que soit le total. */
  .calc__tot span:not(.calc__nb){display:block}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ————— Journal des nouveautés (/nouveautes/) —————
   Un titre d'entrée, pas un titre de section. On NE style PAS `h3` globalement :
   l'accueil en utilise un dans sa carte tarifaire (« Tout compris »), qui n'a
   rien à voir. Sans règle, ces titres sortaient à 21 px contre 18 px de texte —
   trois pixels d'écart pour dix entrées, donc une page qui ne se survole pas. */
.jrn { font-size: 1.45rem; line-height: 1.3; font-weight: 700;
  color: var(--navy); margin: 3.2rem 0 .9rem; max-width: 34ch; }
.jrn:first-of-type { margin-top: 2rem; }


/* Paire d'appels à l'action du hero (22/09/2026) : « Entrer dans la démo »
   d'abord — le concurrent ouvre son produit sans formulaire, nous aussi
   désormais — et « Demander une démo » à côté, pour qui préfère parler. */

/* L'appel à l'action de l'EN-TÊTE ne se coupe jamais en mots : mesuré le
   22/09 à 960 px, « Demander une démo » y tenait déjà sur TROIS lignes (77 px
   de haut) — un défaut qui précédait « Entrer dans la démo », lequel montait
   à cinq lignes. Sans césure il tient sur une ligne, mais la barre déborde
   alors de 98 px : entre 620 et 1100 px il n'y a tout simplement pas la place
   à côté des six liens de navigation. On le masque donc — les deux boutons du
   hero sont juste en dessous, rien n'est perdu. (≤ 620 px : déjà masqué.) */
.top .btn{white-space:nowrap}
@media (max-width:1100px){ .top__cta .btn{display:none} }

/* ═══════════════════════════════════════════════════════════════════════════
   L'HISTOIRE AU SCROLL — l'ouverture de la page (22/09/2026)
   Remplace le héros statique + la grille de 101 cases. Le H1 vit dans le
   premier temps. Principe : le scroll EST le geste, tout est peint 1:1 sur
   sa position — remonter rejoue l'histoire à l'envers, exactement.
   Moteur : histoire.js + france.js (contour réel, projection Lambert).
   ═══════════════════════════════════════════════════════════════════════════ */
.story{background:var(--navy);color:#fff;position:relative}
.story__rail{height:440vh;position:relative}
.story__stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:center;
  max-width:1180px;margin-inline:auto;padding:var(--barre) 2rem 2rem;
}
.story__txt{position:relative;min-height:22rem}
.beat{position:absolute;inset:auto 0 auto 0;top:50%;translate:0 -50%;opacity:0;will-change:transform,opacity}
.beat[data-beat="0"]{opacity:1}          /* lisible avant que le script prenne la main */
.beat__k{color:var(--yellow);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .6rem}
.beat__h{font-weight:700;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.06;letter-spacing:-.03em;margin:0 0 .9rem}
.beat--une .beat__h1{
  font-weight:700;font-size:clamp(2.4rem,4.6vw,4rem);
  line-height:1.02;letter-spacing:-.035em;margin:0 0 1.1rem;font-optical-sizing:auto;
}
.beat__p{font-size:1rem;line-height:1.7;color:#FFFFFFC7;margin:0 0 1rem;max-width:42ch}
.beat--une .beat__p{font-size:1.05rem;max-width:46ch;margin-bottom:1.6rem}
.beat__n{font-size:.9rem;color:#FFFFFF99;margin:0}
.beat__n b{color:#fff;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.beat__cta{display:flex;gap:.9rem;flex-wrap:wrap}
.story__map{position:relative}
.carte{display:block;width:100%;height:auto}
.story__map .carte{width:min(100%,86vh);margin-inline:auto;overflow:visible}

/* La fiche est un matériau léger posé sur la carte, pas un encart plat. */
.fiche{
  position:absolute;left:4%;bottom:6%;display:grid;gap:.18rem;
  background:#FFFFFF21;backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  border:1px solid #FFFFFF38;border-radius:14px;
  padding:.9rem 1.1rem;font-size:.82rem;opacity:0;
  box-shadow:0 24px 44px -26px rgba(0,0,0,.8);will-change:transform,opacity;
}
.fiche b{font-size:.92rem;letter-spacing:-.01em}
.fiche span{color:#FFFFFFB8}
.fiche em{color:var(--yellow);font-style:normal;font-weight:600}

/* on dit une fois qu'il faut continuer, puis on se tait */
.indice{
  position:absolute;left:0;bottom:-3.2rem;margin:0;display:flex;align-items:center;gap:.6rem;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#FFFFFF73;
}
.indice i{width:1px;height:22px;background:linear-gradient(#FFFFFF00,#FFE492E6);display:block}

@media(min-width:901px) and (max-height:780px){
  .story__map .carte{width:min(100%,62vh)}
  .story__txt{min-height:14rem}
  .beat--une .beat__h1{font-size:clamp(1.9rem,3.4vw,2.5rem)}
  .beat--une .beat__p{font-size:.97rem;margin-bottom:1.1rem}
}

/* Sur étroit, la carte ne s'empile pas au-dessus du texte : elle passe
   DERRIÈRE, en fond plein cadre. Empilés, les deux ne tiennent pas dans un
   écran — et c'est le premier écran de la page. */
@media(max-width:900px){
  .story__rail{height:400vh}
  .story__stage{display:block;position:sticky;padding:var(--barre) 1.5rem 2rem}
  .story__stage::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(118% 58% at 50% 40%,rgba(4,56,115,.16),rgba(4,56,115,.80) 76%);
  }
  .story__map{position:absolute;inset:0;display:grid;place-items:center;opacity:.85}
  .story__map .carte{width:min(152%,86vh);max-width:none}   /* plein cadre : la carte porte l'écran */
  .story__txt{position:relative;z-index:1;height:100%;min-height:0}
  /* sur un fond qui bouge, pas de gris pâle : on remonte le contraste et on
     pose une ombre douce, sinon le texte se dissout dans les points */
  .beat{top:50%;text-shadow:0 1px 14px rgba(3,20,42,.9),0 0 3px rgba(3,20,42,.5)}
  .beat--une .beat__h1{font-size:clamp(2.1rem,8.4vw,3rem)}
  .beat__p{font-size:.97rem;color:#FFFFFFE6}
  .beat__n{color:#FFFFFFC7}
  .fiche{left:1rem;right:1rem;top:var(--barre);bottom:auto;font-size:.8rem}
  .indice{bottom:1rem}
}

/* Tablette en portrait : la carte reste en fond, mais le texte ne doit pas
   courir sur toute la largeur. Mesuré sur iPad 820 px : le titre s'étalait
   sur 772 px — une ligne aussi longue ne se lit plus, l'œil perd le début de
   la suivante. On borne la mesure et on desserre la gouttière. */
@media(min-width:600px) and (max-width:900px){
  .story__stage{padding-inline:2.5rem}
  .beat{max-width:32rem}
  .beat--une .beat__h1{font-size:clamp(2.6rem,5.2vw,3.4rem)}
  .beat__h{font-size:clamp(2rem,4.4vw,2.7rem)}
  .fiche{left:auto;right:2.5rem;width:min(22rem,60%)}
}

/* Une histoire au scroll est exactement ce qui gêne en mouvement réduit :
   on la pose à plat, sans détourner le défilement. */
@media (prefers-reduced-motion: reduce){
  .story__rail{height:auto}
  .story__stage{position:static;height:auto;display:block;padding-block:4rem}
  .story__stage::before{display:none}
  .story__map{position:static;opacity:1}
  .story__txt{position:static;min-height:0;display:grid;gap:2.4rem;height:auto}
  .beat{position:static;translate:none;opacity:1!important;transform:none!important}
  .indice{display:none}
  .fiche{position:static;opacity:1!important;transform:none!important;margin-top:1.2rem}
}
@media (prefers-reduced-transparency: reduce){
  .fiche{background:#0A2E5C;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Le nombre de sièges se tire à l'horizontale (voir initCalc dans app.js) :
   le curseur annonce le geste, et pendant le tirage on coupe la sélection de
   texte — sinon on surligne le chiffre au lieu de le faire varier. */
#calc-n{cursor:ew-resize;touch-action:pan-y}
#calc-n.is-tire{user-select:none;-webkit-user-select:none;cursor:ew-resize}
#calc-n.is-tire::selection{background:transparent}