/* ===========================================================================
   Mon Tunnel de Vente — feuille unique, partagée par les 26 pages.
   Grammaire : voir DESIGN.md, validée par Guy le 2026-07-25.

   Deux règles portent tout le système et ne doivent jamais être assouplies :
   - le bleu de marque ne colore QUE ce qui engage (bouton, signe de marque) ;
   - l'ambre ne colore QUE la position (page courante, jalon d'étape).
   Aucun dégradé nulle part, y compris sur le logo.

   Les noms de classes sont ceux du site existant : la refonte tient entièrement
   dans cette feuille, le HTML des pages n'a pas été restructuré.
   =========================================================================== */

:root{
  --encre:#0A1A34; --encre-2:#112544; --encre-3:#1A3358;
  --marque:#2D6CDF; --marque-clair:#4180EE;
  /* Le bleu clair passe à 4,0:1 sur une carte encre-2, sous le seuil de 4,5.
     Cette variante ne sert qu'au petit texte bleu posé sur carte : 4,9:1. */
  --marque-texte:#5A90F0;
  /* Sur bande papier, ni le bleu de marque (3,9:1) ni le bleu clair (3,1:1)
     ne passent : ce bleu sombre est réservé aux liens posés sur du papier. */
  --marque-papier:#2559B8;
  --ambre:#E9A13C;
  --craie:#F6F3EC; --estompe:#8FA0B8; --doux:#C6D0DE;
  --papier:#EDE6D9; --papier-encre:#12202F; --papier-doux:#4A5A6C;
  --rail:330px; --gouttiere:38px; --container:1120px;
  --fil-w:46px;
  --r:12px; --r-carte:16px; --r-bande:26px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  position:relative; /* origine des coordonnées du fil de page */
  background:var(--encre);color:var(--craie);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
  /* La marge de gauche réserve la bande où passe le fil de la page : il court
     à gauche de TOUT le contenu, y compris des bandes papier pleine largeur. */
  padding:24px 24px 0 calc(var(--rail) + var(--gouttiere) + 24px + var(--fil-w));
}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}
img{height:auto}
:focus-visible{outline:2px solid var(--marque);outline-offset:1px;border-radius:4px}

/* --- Affichage : deux registres, rien entre les deux ---------------------- */
h1,h2,.h2{
  font-family:"Bricolage Grotesque",Archivo,system-ui,sans-serif;
  font-weight:800;letter-spacing:-.03em;line-height:.98;margin:0 0 16px;
}
h1{font-size:clamp(38px,5.2vw,80px);line-height:.93;letter-spacing:-.035em;max-width:17ch}
h2,.h2{font-size:clamp(26px,3.2vw,46px);max-width:21ch}
h3{font-family:Archivo;font-weight:600;font-size:17px;margin:0 0 6px}
h4{font-family:Archivo;font-weight:600;font-size:15px;margin:0 0 4px}
p{margin:0 0 14px}
.lead{font-size:16.5px;color:var(--doux);max-width:58ch;line-height:1.68;margin:0 0 26px}
.eyebrow{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--estompe);margin:0 0 10px;
}
/* Anciennement un dégradé bleu-cyan. À plat : c'est le dégradé qui signait
   l'interface générée, pas le bleu. */
.grad-text{background:none;color:var(--marque-clair);-webkit-text-fill-color:currentColor}

/* --- Le rail : le <header> existant, repositionné sans toucher au HTML ----- */
header{
  position:fixed;left:24px;top:24px;width:var(--rail);z-index:20;
  background:var(--encre-2);border-radius:var(--r-carte);
  box-shadow:inset 0 0 0 1px rgba(246,243,236,.06);
  backdrop-filter:none;border-bottom:0;
  /* Le rail est fixe : sur un portable court, une ligne de plus suffirait à
     rejeter le bouton hors de l'écran sans aucun moyen d'y accéder. */
  max-height:calc(100vh - 48px);overflow:hidden auto;overscroll-behavior:contain;
}
header .nav,header .container{display:block;height:auto;max-width:none;padding:0;margin:0}
.brand{display:flex;gap:11px;align-items:center;padding:18px 18px 16px}
.brand svg{flex:none;width:34px;height:34px}
.brand .word{
  font-family:"Bricolage Grotesque",Archivo,sans-serif;font-weight:800;
  font-size:19px;line-height:1.08;letter-spacing:-.02em;color:var(--craie);
}
.menu{display:grid;gap:1px;padding:8px;border-top:1px solid rgba(246,243,236,.08)}
.menu a{
  display:block;font-size:14.5px;color:var(--doux);
  padding:10px 13px;border-radius:9px;position:relative;
}
.menu a:hover{background:var(--encre-3);color:var(--craie)}
/* La page courante ne change pas de fond : elle porte un jalon ambre, comme
   les étapes d'un tunnel. Un seul signe pour « vous êtes ici ». */
.menu a.active{color:var(--craie);font-weight:600}
.menu a.active:before{
  content:"";position:absolute;left:-8px;top:50%;width:3px;height:17px;
  border-radius:0 3px 3px 0;background:var(--ambre);transform:translateY(-50%);
}
header .btn{display:block;margin:8px 14px 16px;width:calc(100% - 28px)}

/* --- Contrôles ------------------------------------------------------------ */
.btn{
  display:inline-block;text-align:center;background:var(--marque);color:#fff;
  padding:13px 24px;border-radius:var(--r);
  font-family:Archivo;font-weight:600;font-size:14.5px;border:0;cursor:pointer;
  white-space:nowrap;box-shadow:none;
}
.btn:hover{background:var(--marque-clair)}
.btn.ghost{background:transparent;color:var(--craie);box-shadow:inset 0 0 0 1.5px var(--encre-3);border:0}
.btn.ghost:hover{background:none;box-shadow:inset 0 0 0 1.5px var(--ambre);color:var(--ambre)}
.btn.white{background:#fff;color:var(--marque)}
.btn.white:hover{background:#EAF1FE}
.pill{
  display:inline-block;background:transparent;color:var(--estompe);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--encre-3);border-radius:999px;padding:5px 12px;
}
input[type=email],input[type=text],input[type=tel],textarea,select{
  width:100%;padding:13px 16px;border:0;border-radius:var(--r);
  background:var(--encre-2);color:var(--craie);font:inherit;font-size:16px;
}
input::placeholder,textarea::placeholder{color:var(--estompe)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--marque);outline-offset:1px}
label{display:block;font-size:12.5px;color:var(--estompe);margin:0 0 6px}

/* --- Mise en page --------------------------------------------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0}
.section{padding:74px 0;position:relative}
.section.soft{
  background:var(--papier);color:var(--papier-encre);
  border-radius:var(--r-bande);padding:64px 46px;margin:74px 0;
}
.section.soft h1,.section.soft h2,.section.soft .h2,
.section.soft h3,.section.soft h4{color:var(--papier-encre)}
.section.soft .eyebrow{color:var(--papier-doux)}
.section.soft .lead,.section.soft p{color:var(--papier-doux)}
.section.soft .btn.ghost{color:var(--papier-encre);box-shadow:inset 0 0 0 1.5px rgba(18,32,47,.25)}
.hero{padding:26px 0 62px;position:relative}
.hero-grid{display:grid;gap:44px;grid-template-columns:1.05fr .95fr;align-items:center}
.page-head{padding:26px 0 40px;border-bottom:1px solid var(--encre-3);margin:0 0 44px}
.article-hero{padding:26px 0 32px}

/* --- Cartes et grilles ---------------------------------------------------- */
.features,.personas,.plans,.posts,.reco{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.feat,.persona,.plan,.post,.reco-card,.form-card,.callout,.dash,.dash-wrap{
  background:var(--encre-2);border-radius:var(--r-carte);padding:22px;
}
.section.soft .feat,.section.soft .persona,.section.soft .plan,
.section.soft .post,.section.soft .reco-card,.section.soft .callout{background:rgba(18,32,47,.055)}
.feat p,.persona p,.plan p,.post p,.reco-card p{color:var(--estompe);font-size:14px;margin:0}
.section.soft .feat p,.section.soft .persona p,
.section.soft .post p,.section.soft .plan p{color:var(--papier-doux)}
.post img{border-radius:10px;margin:0 0 14px}
/* La bordure gauche épaisse et colorée est le marqueur d'interface générée le
   plus reconnaissable : remplacée par un filet ambre de 3px, en signe d'étape. */
.callout{box-shadow:inset 3px 0 0 var(--ambre)}
.plan.hp{box-shadow:inset 0 0 0 1.5px var(--marque)}

/* --- Listes de preuve ----------------------------------------------------- */
.ticks,.checks{list-style:none;margin:0 0 22px}
.ticks li,.checks li{padding:11px 0 11px 26px;position:relative;border-bottom:1px solid var(--encre-3)}
.ticks li:before,.checks li:before{
  content:"";position:absolute;left:0;top:19px;width:10px;height:10px;background:var(--ambre);
}
.section.soft .ticks li,.section.soft .checks li{border-bottom-color:rgba(18,32,47,.12)}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--estompe);margin:0 0 20px}
.trust li+li:before{content:"·";margin-right:14px;opacity:.55}

/* --- Tableaux ------------------------------------------------------------- */
.table{width:100%;border-collapse:collapse;font-size:14.5px;
  font-variant-numeric:tabular-nums;margin:0 0 22px}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--encre-3)}
.table th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--estompe);font-weight:600}
.section.soft .table th,.section.soft .table td{border-bottom-color:rgba(18,32,47,.12)}
/* Tableau large : tient dans la colonne sur ordinateur, defile dans son cadre sur mobile */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px}
.table-wrap .table{margin-bottom:0}
.table-wrap .table{font-size:13px}
.table-wrap .table th,.table-wrap .table td{padding:9px 7px}
.table-wrap .table th{letter-spacing:.06em}
@media (max-width:760px){.table-wrap .table{min-width:640px}}

/* --- Prose des articles --------------------------------------------------- */
.prose{max-width:70ch;font-size:16px;line-height:1.78}
.prose h2{font-size:clamp(24px,2.6vw,34px);margin:44px 0 14px;max-width:none}
.prose h3{font-size:19px;margin:30px 0 8px}
.prose ul,.prose ol{padding-left:20px;margin:0 0 16px}
.prose li{margin:0 0 7px}
/* Le bleu clair passe sous 4,5:1 dès que le lien est posé sur une carte
   encre-2 (encadré, recommandation) : on prend partout la variante lisible. */
.prose a{color:var(--marque-texte);text-decoration:underline;text-underline-offset:3px}
.feat a:not(.btn),.callout a:not(.btn),.reco-card a:not(.btn),.plan a:not(.btn){color:var(--marque-texte)}
.section.soft a:not(.btn){color:var(--marque-papier)}
.prose img{border-radius:var(--r-carte);margin:22px 0}
.prose blockquote{margin:22px 0;padding:2px 0 2px 20px;
  box-shadow:inset 3px 0 0 var(--ambre);color:var(--doux);font-size:17px}

/* --- Capture d'email ------------------------------------------------------ */
section.capture,div.capture,.cta-band{
  background:var(--marque);color:#fff;border-radius:var(--r-bande);
  padding:54px 46px;margin:74px 0;text-align:center;
}
section.capture h2,div.capture h2,.cta-band h2{color:#fff;margin-left:auto;margin-right:auto}
section.capture .eyebrow,div.capture .eyebrow,.cta-band .eyebrow{color:#fff;opacity:.7}
section.capture .lead,div.capture .lead,.cta-band .lead{color:#fff;margin-left:auto;margin-right:auto}
section.capture form,div.capture form,.cta-band form{display:flex;gap:9px;max-width:520px;margin:0 auto}
section.capture input,div.capture input,.cta-band input{background:rgba(255,255,255,.16);color:#fff}
section.capture input::placeholder,div.capture input::placeholder,.cta-band input::placeholder{color:#B9CEF6}
section.capture .btn,div.capture .btn,.cta-band .btn{background:#fff;color:var(--marque)}
section.capture .btn:hover,div.capture .btn:hover,.cta-band .btn:hover{background:#EAF1FE}
.legal-mini{font-size:12.5px;color:var(--estompe);margin:14px 0 0}
/* Sur le bleu de marque, un texte pâle plafonne à 3,3:1 : c'est la taille,
   pas la couleur, qui distingue la mention du reste. */
section.capture .legal-mini,div.capture .legal-mini,.cta-band .legal-mini,
section.capture .consent,div.capture .consent,.cta-band .consent{color:#fff;opacity:.92}
.form-ok{color:#7FD6A8;font-size:14px;margin:10px 0 0}
.form-ko{color:var(--ambre);font-size:14px;margin:10px 0 0}

/* --- Divers --------------------------------------------------------------- */
.founder-photo{border-radius:var(--r-carte)}
.founder-sign{font-size:14px;color:var(--estompe);margin:12px 0 0}
.live-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ambre)}
.live-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ambre)}
.copy{font-size:13px;color:var(--estompe)}
.social{display:flex;gap:12px;font-size:13.5px}
.social a{color:var(--estompe)}
.social a:hover{color:var(--craie)}

/* --- Pied de page --------------------------------------------------------- */
footer{margin:74px 0 0;padding:26px 0 34px;border-top:1px solid var(--encre-3);
  font-size:13.5px;color:var(--estompe);background:none}
footer .foot{display:flex;gap:34px;flex-wrap:wrap;align-items:center;margin:0 0 20px}
/* Le bloc de marque hérite du calage du rail : sans ça il descend de 18px et
   la ligne de liens paraît décrochée. */
footer .brand{padding:0}
footer .links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--doux)}
footer a:hover{color:var(--craie)}
.credit{font-size:12.5px;line-height:1.55;max-width:78ch}

/* --- Bandeau de consentement ---------------------------------------------- */
.cookie-banner{
  position:fixed;right:24px;bottom:24px;z-index:40;max-width:420px;
  background:var(--encre-2);border-radius:var(--r-carte);padding:20px;
  box-shadow:inset 0 0 0 1px rgba(246,243,236,.08),0 18px 40px rgba(0,0,0,.35);
  font-size:13.5px;color:var(--doux);
}
.cookie-actions{display:flex;gap:9px;margin:14px 0 0}
.cookie-actions .btn{padding:10px 18px;font-size:13.5px}
.consent{font-size:12.5px;color:var(--estompe)}
.toast{position:fixed;right:24px;bottom:24px;z-index:50;background:var(--encre-2);
  border-radius:var(--r);padding:13px 18px;font-size:13.5px;
  box-shadow:inset 0 0 0 1px rgba(246,243,236,.08)}

/* --- Adaptation ----------------------------------------------------------- */
@media (max-width:1080px){
  body{padding:16px} /* pas de fil sous 1080px, donc pas de bande réservée */
  header{position:static;width:auto;margin:0 0 24px}
  .menu{grid-template-columns:repeat(3,1fr)}
  .menu a.active:before{left:0}
  .hero-grid{grid-template-columns:1fr}
  .section{padding:52px 0}
  .section.soft,section.capture,div.capture,.cta-band{padding:44px 24px;margin:48px 0}
  .cookie-banner{left:16px;right:16px;bottom:16px;max-width:none}
}
@media (max-width:560px){
  .menu{grid-template-columns:repeat(2,1fr)}
  section.capture form,div.capture form,.cta-band form,form.capture{flex-wrap:wrap}
  h1{font-size:clamp(32px,9vw,44px)}
}

/* Rien ne bouge si l'utilisateur a demandé moins de mouvement. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ===========================================================================
   Le tunnel du hero : objet dessiné, pas photo ni capture inventée.
   Géométrie calculée (voir DESIGN.md) : parois droites, chaque anneau prend le
   rayon exact de la paroi à sa hauteur, jalons posés à (cx - rx).
   =========================================================================== */
.tunnel{width:min(100%,470px);margin:0 auto;pointer-events:none}
.tunnel svg{width:100%;height:auto;overflow:visible}
.tunnel .tr{fill:none;stroke:rgba(198,208,222,.5);stroke-width:1.6;stroke-linecap:round;
  --len:1400;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s cubic-bezier(.25,.6,.3,1);transition-delay:var(--d,0s)}
.tunnel.trace-ok .tr{stroke-dashoffset:0}
.tunnel .jal{fill:var(--encre);stroke:var(--ambre);stroke-width:2}
.tunnel .sortie{fill:var(--marque);stroke:none}
.tunnel .jal,.tunnel .sortie{opacity:0;transition:opacity .55s ease}
.tunnel.trace-ok .jal{opacity:1;transition-delay:1.5s}
.tunnel.trace-ok .sortie{opacity:1;transition-delay:2.1s}
/* Ce qui traverse : entre large et dispersé, ressort au centre. Ne démarre
   qu'une fois le tunnel dessiné, sinon les billes tombent dans le vide. */
.chute{fill:rgba(198,208,222,.62);opacity:0;
  offset-path:path('M32.0 -40.0 L32.0 84.0 L34.6 81.6 L39.8 79.2 L47.5 77.1 L57.7 75.2 L70.2 73.6 L84.8 72.3 L101.3 71.4 L119.5 71.0 L139.1 71.1 L160.0 71.6 L181.8 72.7 L204.3 74.3 L227.2 76.4 L250.3 79.1 L273.2 82.4 L295.6 86.2 L317.4 90.5 L338.3 95.4 L358.0 100.7 L376.3 106.4 L393.0 112.6 L407.9 119.1 L420.9 125.9 L431.8 133.0 L440.6 140.3 L447.1 147.8 L451.3 155.3 L453.2 162.9 L452.8 170.6 L450.1 178.1 L445.2 185.5 L438.1 192.8 L429.1 199.8 L418.1 206.5 L405.4 213.0 L391.2 219.1 L375.5 224.8 L358.7 230.2 L341.0 235.1 L322.6 239.5 L303.6 243.5 L284.4 247.0 L265.2 250.1 L246.1 252.7 L227.5 254.8 L209.5 256.5 L192.4 257.8 L176.4 258.7 L161.5 259.3 L148.0 259.5 L136.1 259.4 L125.8 259.1 L117.2 258.6 L110.5 257.9 L105.6 257.1 L102.7 256.3 L101.6 255.4 L102.5 254.5 L105.2 253.7 L109.7 253.0 L115.9 252.5 L123.7 252.2 L133.1 252.1 L143.8 252.3 L155.7 252.8 L168.6 253.5 L182.4 254.7 L197.0 256.2 L212.0 258.0 L227.3 260.2 L242.8 262.9 L258.2 265.8 L273.4 269.2 L288.2 272.9 L302.3 277.0 L315.7 281.4 L328.3 286.1 L339.7 291.1 L350.1 296.3 L359.1 301.7 L366.8 307.3 L373.1 313.1 L378.0 319.0 L381.3 325.0 L383.1 330.9 L383.4 336.9 L382.3 342.9 L379.7 348.8 L375.7 354.6 L370.5 360.2 L364.0 365.7 L356.4 370.9 L347.8 376.0 L338.3 380.8 L328.2 385.4 L317.4 389.6 L306.1 393.6 L294.6 397.3 L282.9 400.7 L271.1 403.9 L259.6 406.7 L248.2 409.2 L237.3 411.5 L226.9 413.6 L217.2 415.3 L208.2 416.9 L200.0 418.3 L192.7 419.5 L186.5 420.5 L181.3 421.4 L177.1 422.3 L174.1 423.0 L172.2 423.8 L171.3 424.5 L171.6 425.2 L172.9 426.0 L175.3 426.9 L178.6 427.9 L182.8 428.9 L187.8 430.1 L193.5 431.5 L199.9 433.1 L206.8 434.8 L214.2 436.7 L221.8 438.8 L229.7 441.2 L237.8 443.7 L245.8 446.5 L253.7 449.4 L261.5 452.6 L268.9 456.0 L276.0 459.5 L282.7 463.2 L288.8 467.0 L294.4 471.0 L299.3 475.1 L303.6 479.3 L307.1 483.6 L310.0 488.0 L312.1 492.4 L313.4 496.8 L314.1 501.2 L314.0 505.6 L313.3 509.9 L311.9 514.2 L309.9 518.5 L307.4 522.6 L304.4 526.7 L301.0 530.6 L297.2 534.5 L260.0 560.0 L260.0 596.0');offset-rotate:0deg;offset-distance:0%}
.tunnel.livre .chute{animation:roule 6.4s linear var(--dl,0s) infinite}
@keyframes roule{
  0%{offset-distance:0%;opacity:0;r:4.5px}
  4%{opacity:.85} 92%{opacity:.85}
  97%,100%{offset-distance:100%;opacity:0;r:3px}
}
@media (prefers-reduced-motion:reduce){
  .tunnel .tr{stroke-dashoffset:0}
  .tunnel .jal,.tunnel .sortie{opacity:1}
  .tunnel.livre .chute{animation:none;opacity:0}
}

/* Le formulaire posé directement dans un hero : pas de bandeau, juste un champ
   et son action côte à côte. Le champ pipeau anti-robot reste hors écran. */
form.capture{display:flex;gap:9px;max-width:520px;margin:0 0 14px;background:none;padding:0}
form.capture input[type=email]{flex:1;min-width:200px}
form.capture .btn{flex:none}
/* Dans un callout, le fond du champ (encre-2) se confond avec celui de la carte :
   on le repose sur l'encre de la page pour qu'il se voie. */
.callout form.capture input[type=email]{background:var(--encre)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.trust{margin:0 0 26px}

/* --- Le rail enrichi : quatre registres dans une seule carte ---------------
   Trois rectangles identiques empilés faisaient « document Word ». Ici
   identité, présentation, chiffres sur filets et navigation à icônes se
   distinguent par leur traitement, pas par leur boîte. */
.brand{flex-wrap:wrap;padding:18px 18px 14px}
.rail-sous{display:block;width:100%;margin-top:4px;font-family:Archivo;font-weight:500;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--estompe)}
.rail-pitch{margin:0;padding:0 18px 16px;font-size:13px;line-height:1.5;color:var(--estompe)}
.rail-duo{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(246,243,236,.08)}
.rail-duo div{padding:14px 18px}
.rail-duo div+div{border-left:1px solid rgba(246,243,236,.08)}
.rail-duo b{display:block;font-family:"Bricolage Grotesque",Archivo,sans-serif;font-weight:800;
  font-size:24px;line-height:1;color:var(--craie)}
.rail-duo small{display:block;margin-top:3px;font-size:10.5px;line-height:1.3;color:var(--estompe)}
.menu a{display:flex;align-items:center;gap:10px}
.menu a svg{flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.menu a.active svg{opacity:1;color:var(--ambre)}
/* Le prix du pack est une information, pas un signal : ni bleu (ce qui engage)
   ni ambre (la position), sinon les deux couleurs ne voudraient plus rien dire. */
.menu a .tarif{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--craie);background:var(--encre-3);border-radius:6px;padding:2px 7px;flex:none}
.menu a:hover .tarif{background:var(--encre)}
.rail-note{margin:0;padding:0 18px 16px;font-size:11px;text-align:center;color:var(--estompe)}

/* --- Le mot fantôme : du relief sans jamais gêner la lecture ---------------
   La silhouette du tunnel découpe des lettres qui ne portent aucune
   information, donc les plans se lisent sans perdre un mot utile. */
.hero{overflow:hidden}
.fantome{position:absolute;z-index:0;right:2%;top:50%;transform:translateY(-56%);
  font-family:"Bricolage Grotesque",Archivo,sans-serif;font-weight:800;
  font-size:clamp(150px,19vw,300px);line-height:.78;letter-spacing:-.055em;
  color:rgba(246,243,236,.055);white-space:nowrap;pointer-events:none;user-select:none}
.hero .intro,.hero .tunnel{position:relative;z-index:1}
.hero .tunnel{z-index:2}
/* L'accroche du hero est une étiquette suivie, pas une pastille bordée. */
.hero .pill{border:0;padding:0;background:none;color:var(--estompe);
  font-size:11.5px;letter-spacing:.16em;margin:0 0 12px}

/* --- Un bouton reste un bouton, même dans un article ----------------------
   .prose a (spécificité 0-1-1) écrasait .btn (0-1-0) : le libellé passait en
   bleu clair sur fond bleu de marque, soit un contraste de 1,3:1. */
.prose .btn,.prose a.btn{color:#fff;text-decoration:none}
.prose .btn.ghost{color:var(--craie)}
.section.soft .prose .btn.ghost{color:var(--papier-encre)}

/* --- Tarifs : une hiérarchie, pas quatre cartes plates --------------------
   Le nom recule au registre étiquette, le prix prend la taille d'affiche, les
   lignes deviennent des preuves à jalon, et une seule carte est mise en avant. */
.plans{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));align-items:start}
.plan{background:var(--encre-2);border-radius:var(--r-carte);padding:26px 22px;
  display:flex;flex-direction:column;height:100%;position:relative}
.plan h3{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--estompe);margin:0 0 10px}
.price{font-family:"Bricolage Grotesque",Archivo,sans-serif;font-weight:800;
  font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--craie);margin:0 0 20px}
.price span{font-family:Archivo;font-weight:500;font-size:13px;letter-spacing:0;
  color:var(--estompe);margin-left:5px}
.plan ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.plan li{position:relative;padding:9px 0 9px 010px;padding-left:20px;font-size:14px;
  color:var(--doux);border-bottom:1px solid var(--encre-3)}
.plan li:last-child{border-bottom:0}
.plan li:before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;background:var(--ambre)}
.plan .btn{width:100%;margin-top:auto}
/* La carte mise en avant : cerclée du bleu qui engage, jamais remplie. */
.plan.featured{box-shadow:inset 0 0 0 1.5px var(--marque)}
.badge{display:inline-block;align-self:flex-start;background:var(--ambre);color:var(--encre);
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:4px 11px;margin:0 0 12px}
.section.soft .plan{background:rgba(18,32,47,.055)}
.section.soft .plan li{color:var(--papier-doux);border-bottom-color:rgba(18,32,47,.12)}
.section.soft .price,.section.soft .plan h3{color:var(--papier-encre)}

/* --- Le rail remonte d'un cran ---------------------------------------------
   Élargi à 330px, mais surtout son texte grossit : à 13,5px face à un titrage
   de 80px, il se lisait comme une note de bas de page. */
.brand .word{font-size:19px}
.rail-sous{font-size:10.5px}
.rail-pitch{font-size:13px;padding:0 20px 16px}
.brand{padding:20px 20px 15px}
.rail-duo div{padding:15px 20px}
.rail-duo b{font-size:24px}
.rail-duo small{font-size:11px}
.menu{padding:9px}
.menu a{font-size:14.5px;padding:10px 13px;gap:11px}
.menu a svg{width:17px;height:17px}
.menu a.active:before{height:19px;width:3px}
header .btn{margin:10px 16px 14px;width:calc(100% - 32px);padding:14px 24px;font-size:15px}
.rail-note{font-size:11.5px;padding:0 20px 18px}

/* ===========================================================================
   LE FIL DE LA PAGE
   Première version : un dessin décoratif par page, posé entre le titre et le
   contenu. Il ne se rattachait à rien, donc il se lisait comme « un truc qui
   bouge ». Remplacé par un objet qui a une fonction.

   Le fil est le tunnel vu de profil : deux parois qui se resserrent du haut de
   la page jusqu'à l'action, dans la marge de gauche. Il se dessine à mesure
   qu'on descend, porte un jalon ambre par section réelle de la page, et se
   ferme sur un point bleu, l'action. Même vocabulaire que le rail : ambre pour
   la position, bleu pour ce qui engage.

   Sa géométrie n'est pas décidée ici : elle vient du contenu de la page
   (nombre de sections, hauteur réelle), donc chaque page a son propre fil sans
   qu'aucune ne sorte de la grammaire.
   =========================================================================== */
.fil{position:absolute;width:var(--fil-w);z-index:2;pointer-events:none}
.fil svg{display:block;width:100%;height:100%;overflow:visible}
.fil .paroi{fill:none;stroke:rgba(198,208,222,.38);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:var(--len,2600);stroke-dashoffset:var(--off,2600)}

/* Les jalons sont du HTML, pas du SVG : ce sont de vrais liens, donc au clavier
   et au lecteur d'écran le fil est un sommaire, pas une image. */
.fil .jal{position:absolute;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  pointer-events:auto;display:block;border-radius:50%;text-decoration:none}
.fil .jal:before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--encre);
  box-shadow:inset 0 0 0 1.5px rgba(198,208,222,.32);
  transition:box-shadow .35s ease,background .35s ease,transform .35s ease}
.fil .jal.passe:before{box-shadow:inset 0 0 0 1.5px var(--ambre)}
.fil .jal.ici:before{background:var(--ambre);box-shadow:inset 0 0 0 1.5px var(--ambre);transform:scale(1.25)}
.fil .jal.fin:before{background:var(--marque);box-shadow:inset 0 0 0 1.5px var(--marque)}
.fil .jal:focus-visible{outline:2px solid var(--marque);outline-offset:1px}
.fil .paroi.sombre{stroke:rgba(18,32,47,.34)}
/* Sur une bande papier, la pastille inverse son fond et garde un contour foncé :
   l'ambre seul sur du crème ne se verrait pas. */
.fil .jal.sur-papier:before{background:var(--papier);box-shadow:inset 0 0 0 1.5px rgba(18,32,47,.3)}
.fil .jal.sur-papier.passe:before{box-shadow:inset 0 0 0 1.5px var(--ambre),0 0 0 1px rgba(18,32,47,.35)}
.fil .jal.sur-papier.ici:before{background:var(--ambre);box-shadow:inset 0 0 0 1.5px rgba(18,32,47,.5)}
.fil .jal.sur-papier.fin:before{background:var(--marque);box-shadow:inset 0 0 0 1.5px var(--marque)}
/* L'étiquette ne se montre qu'à la demande : le fil doit rester une ligne. */
.fil .jal span{position:absolute;left:26px;top:50%;transform:translateY(-50%) translateX(-4px);
  white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  color:var(--craie);background:var(--encre-2);border-radius:7px;padding:5px 10px;
  box-shadow:inset 0 0 0 1px var(--encre-3);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.fil .jal:hover span,.fil .jal:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}
/* Quand la marge de gauche est assez large, l'étiquette part de ce côté :
   à droite elle recouvrirait le titre qu'elle nomme. */
.fil.etq-gauche .jal span{left:auto;right:26px;transform:translateY(-50%) translateX(4px)}
.fil.etq-gauche .jal:hover span,
.fil.etq-gauche .jal:focus-visible span{transform:translateY(-50%) translateX(0)}

@media (max-width:1080px){ .fil{display:none} }
@media (prefers-reduced-motion:reduce){
  .fil .paroi{stroke-dashoffset:0}
  .fil .jal:before,.fil .jal span{transition:none}
}

/* ===========================================================================
   LA PAGE DU PACK
   Elle portait sa propre feuille en ligne, qui contredisait la grammaire sur
   tous les points : tout centré, une échelle continue de tailles en rem (donc
   plus de deux registres), des fonds clairs #f6f9fe avec du texte craie par
   dessus (illisible), un dégradé bleu sur le bloc final, une ombre bleue sous
   le bouton, des pilules, et des pastilles bleues numérotées pour des étapes.
   Tout est repris ici, avec les composants déjà utilisés par les 26 autres
   pages. Il ne reste que trois blocs propres à cette page.
   =========================================================================== */
h1 em,h2 em{font-style:normal;color:var(--marque-clair)}

/* Le numéro d'étape est un jalon : ambre, comme partout ailleurs. En bleu il
   aurait annoncé une action alors qu'il ne se passe rien au clic. */
.feat .num{display:block;font-family:"Bricolage Grotesque",Archivo,sans-serif;
  font-weight:800;font-size:26px;line-height:1;color:var(--ambre);margin:0 0 12px}

/* Les cinq métiers : cinq portes vers le même produit. La carte ne prend le
   bleu qu'au survol, parce que c'est là qu'elle engage. */
.metiers{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* Cinq cartes tombent en 4 + 1 sur une grille auto : une orpheline seule sur sa
   ligne. On force donc 3 dès que les cinq ne tiennent plus de front. */
@media (max-width:1520px){ .metiers{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1080px){ .metiers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .metiers{grid-template-columns:1fr} }
.metier{display:flex;flex-direction:column;background:var(--encre-2);
  border-radius:var(--r-carte);padding:22px;box-shadow:inset 0 0 0 1px var(--encre-3)}
.metier:hover{box-shadow:inset 0 0 0 1.5px var(--marque)}
.metier h3{color:var(--craie);margin:0 0 8px}
.metier p{color:var(--estompe);font-size:14px;line-height:1.55;margin:0 0 20px;flex:1}
.metier .aller{display:flex;align-items:center;gap:8px;font-size:13.5px;
  font-weight:600;color:var(--marque-texte)}
.metier .aller svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.metier:hover .aller svg{transform:translateX(3px)}

/* La planche du pack reprend la mécanique du tunnel : mêmes classes, même
   tracé qui se dessine. Elle est seulement plus haute que large. */
.planche{width:min(100%,470px);margin:0 auto}
/* Une pile de feuilles en trait seul n'a pas de relief : les arêtes de celles
   du dessous traversent les lignes de celle du dessus. Chaque feuille reçoit
   donc un fond couleur de page, qui n'existe que pour masquer, et un trait
   d'autant plus pâle qu'elle est loin. */
.planche .fond{fill:var(--encre);stroke:none}
.planche .loin1{stroke:rgba(198,208,222,.36)}
.planche .loin2{stroke:rgba(198,208,222,.28)}
.planche .loin3{stroke:rgba(198,208,222,.2)}
@media (max-width:1080px){ .planche{margin:26px auto 0} }

/* ===========================================================================
   LE RAYON DU BLOG
   La page blog n'a que deux titres de section : pas de fil, et un grand vide
   à droite de son titre. Elle reçoit donc son propre objet, dans le même
   trait mais d'une autre nature : les guides rangés comme des dos de livres.

   Ce n'est pas un ornement. C'est un index : une seule vue donne l'étendue des
   sujets (que la grille de cartes plus bas oblige à parcourir), le dernier
   paru est marqué, chaque dos mène à son article, et le survol affiche le
   titre. Sa géométrie vient des articles réels de la page, donc il reste juste
   quand la liste change.
   =========================================================================== */
.tete-blog{display:grid;grid-template-columns:1fr 570px;gap:44px;align-items:center}
/* Sous 1500px la colonne de titre tomberait à 130px : le rayon passe dessous,
   à sa largeur propre, plutôt que d'écraser le titre. */
@media (max-width:1500px){
  .tete-blog{grid-template-columns:1fr}
  .rayon{max-width:570px;margin:30px 0 0}
}
.tete-blog h1{max-width:none}
.rayon{position:relative}
.rayon svg{display:block;width:100%;height:auto;overflow:visible}
.rayon .tr{fill:none;stroke:rgba(198,208,222,.38);stroke-width:1.5;stroke-linecap:round;
  stroke-linejoin:round;--len:900;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.1s cubic-bezier(.25,.6,.3,1);transition-delay:var(--d,0s)}
.rayon.vu .tr{stroke-dashoffset:0}
.rayon text{fill:var(--estompe);font-family:Archivo,sans-serif;font-size:10.5px;
  font-weight:600;letter-spacing:.1em;opacity:0;
  transition:opacity .4s ease;transition-delay:var(--d,0s)}
.rayon.vu text{opacity:1}
/* Le dernier paru se repère au jalon ambre, comme partout ailleurs. */
.rayon .jal{fill:var(--encre);stroke:var(--ambre);stroke-width:2;opacity:0;
  transition:opacity .5s ease;transition-delay:1.25s}
.rayon.vu .jal{opacity:1}
.rayon .dos{cursor:pointer}
.rayon .dos:hover .tr,.rayon .dos:focus-visible .tr{stroke:var(--craie)}
.rayon .dos:hover text,.rayon .dos:focus-visible text{fill:var(--craie)}
.rayon .dos:focus-visible{outline:2px solid var(--marque);outline-offset:3px}
/* Une seule tête de lecture au-dessus du rayon, plutôt que dix infobulles. */
.rayon-titre{min-height:56px;margin:0 0 16px}
.rayon-titre .lab{display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--estompe);margin:0 0 5px}
.rayon-titre strong{font-family:Archivo;font-weight:600;font-size:15.5px;
  color:var(--craie);line-height:1.42}
@media (max-width:1080px){
  .rayon{display:none}   /* dix dos sur 340px : les étiquettes ne se lisent plus */
}
@media (prefers-reduced-motion:reduce){
  .rayon .tr{stroke-dashoffset:0}
  .rayon text,.rayon .jal{opacity:1}
}

/* Libellé d'encadré : même rendu qu'un ancien <h4>, sans casser la hiérarchie
   des titres (un encadré n'est pas une section du document). */
.ctitle{font-family:Archivo;font-weight:600;font-size:15px;margin:0 0 4px}
.section.soft .ctitle{color:var(--papier-encre)}