/* ==========================================================================
   NYB Consulting · feuille unique du site
   ------------------------------------------------------------------------
   Le monde : un rapport d'audit imprimé. Encre profonde, papier chaud, filets
   d'un cheveu, chiffres tabulaires, et un seul rouge qui ne sert qu'à marquer
   ce qui compte.

   Architecture reprise du Hub CTP (Tariqa Pro), sans sa palette :
     · une couleur = un rôle, défini une fois ;
     · l'accent en trois rôles (remplissage / texte / encre posée dessus), sans
       quoi la couleur qui fait un beau bouton devient illisible en texte ;
     · une échelle typographique à crans NOMMÉS PAR RÔLE, avec de vrais écarts.
       Sans écart, l'œil n'a aucun point d'accroche : il lit tout, et la page
       paraît chargée même quand elle est courte ;
     · l'alignement plutôt que les boîtes. Quand tout est une carte, plus rien
       n'en est une ;
     · le mouvement sert l'attention, jamais la décoration, et se coupe
       entièrement pour qui préfère moins de mouvement.
   ========================================================================== */

/* --------------------------------------------------------------- jetons */
:root{
  /* surfaces */
  --ink:#0F1216;
  --ink-2:#171C22;
  --paper:#FBF9F5;
  --paper-2:#F4F1EA;

  /* texte, en trois niveaux, teinté de la surface et jamais neutre */
  --quiet:#5B564E;          /* 7.0:1 sur papier */
  --quiet-ink:#A8A29A;      /* 7.4:1 sur encre  */

  /* L'ACCENT EN TROIS RÔLES. Un jeton unique pour les trois est exactement
     ce qui casse une palette : le rouge qui fait un bouton franc devient
     illisible en texte sur du papier crème. */
  --accent:#D6431C;         /* le remplissage : aplats, filets, marques */
  --accent-text:#B0330D;    /* 6.1:1 : l'accent DEVENU TEXTE, sur papier   */
  --accent-ink:#F0714A;     /* 6.4:1 : l'accent devenu texte, sur encre    */
  --accent-btn:#C0380F;     /* 6.0:1 avec du blanc posé dessus            */
  --accent-btn-h:#96290A;

  --rule:rgba(15,18,22,.13);
  --rule-2:rgba(15,18,22,.26);
  --rule-ink:rgba(251,249,245,.17);
  --rule-ink-2:rgba(251,249,245,.32);

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ─── L'ÉCHELLE, en six crans, nommés par RÔLE et non par taille ────────
     Les écarts comptent plus que les valeurs : ce sont eux qui donnent les
     points d'accroche. 12 → 13.5 → 17 → 25 → 34 → 64. */
  --t-etiquette:12px;                    /* capitales espacées : la grammaire */
  --t-meta:13.5px;                       /* la ligne secondaire               */
  --t-corps:17px;                        /* la lecture                        */
  --t-nom:clamp(20px,2.1vw,25px);        /* l'objet qu'on regarde             */
  --t-titre:clamp(26px,3.1vw,34px);      /* le titre d'une section            */
  --t-affiche:clamp(36px,4.7vw,56px);    /* LE titre de la page               */

  /* échelle d'espacement : une seule suite, pas de valeurs au jugé */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;

  --shell:1180px;
  --gut:clamp(26px, 5.4vw, 60px);
  --nav-h:68px;

  /* sortie exponentielle : part vite, s'installe. Une seule courbe partout. */
  --ease:cubic-bezier(.16,1,.3,1);
}

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

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-corps);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
p{margin:0 0 1.05em;max-width:66ch}
p:last-child{margin-bottom:0}
a{color:inherit}
strong{font-weight:600}
img,svg{max-width:100%}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
.dark :focus-visible,.nav :focus-visible,.foot :focus-visible{outline-color:var(--accent-ink)}

.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
/* ATTENTION : un élément qui porte `.shell` ne doit JAMAIS déclarer le raccourci
   `padding`. Le raccourci remet le gauche et le droite à zéro et colle le texte
   aux deux bords de l'écran. Toujours `padding-top` / `padding-bottom`. */
.section{padding:clamp(64px,8.5vw,124px) 0}
.dark{background:var(--ink);color:var(--paper)}
.dark .quiet{color:var(--quiet-ink)}
.quiet{color:var(--quiet)}
.centre{text-align:center;margin-left:auto;margin-right:auto}
.centre p,.centre .lede{margin-left:auto;margin-right:auto}

.skip{
  position:absolute;left:var(--s4);top:calc(-1 * var(--s9));z-index:100;
  background:var(--paper);color:var(--ink);font-size:15px;font-weight:600;
  padding:var(--s3) var(--s5);border:1px solid var(--ink);border-radius:2px;
  text-decoration:none;transition:top .18s var(--ease);
}
.skip:focus{top:var(--s3)}

/* ------------------------------------------------------------ typographie */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;line-height:1.06;margin:0}
h1{font-size:var(--t-affiche);line-height:1.05;max-width:19ch;text-wrap:balance}
h2{font-size:var(--t-titre);line-height:1.12;font-weight:400;letter-spacing:-.016em;
   max-width:24ch;text-wrap:balance}
h3{font-family:var(--serif);font-size:var(--t-nom);line-height:1.2;font-weight:500;
   letter-spacing:-.012em}
.h-sans{font-family:var(--sans);font-size:17.5px;font-weight:600;letter-spacing:-.006em;line-height:1.3}

.lede{font-size:clamp(17.5px,1.9vw,20.5px);line-height:1.6;color:var(--quiet);max-width:56ch;
      text-wrap:pretty}
.dark .lede{color:var(--quiet-ink)}
.eyebrow{font-size:var(--t-etiquette);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
         color:var(--accent-text);margin:0 0 var(--s5);display:flex;align-items:center;gap:var(--s2)}
.dark .eyebrow,.doc-head .eyebrow,.hero .eyebrow{color:var(--accent-ink)}
.centre .eyebrow{justify-content:center}
.em{color:var(--accent-text);font-style:italic}
.dark .em{color:var(--accent-ink)}
.meta{font-size:var(--t-meta);color:var(--quiet);margin-top:var(--s5);
      display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.dark .meta{color:var(--quiet-ink)}
.centre .meta{justify-content:center}
.meta span:not(:last-child)::after{content:"·";margin-left:var(--s3);opacity:.55}

/* le trait de correction sous un mot : la marque de la maison */
.strike{background-image:linear-gradient(var(--accent),var(--accent));
        background-repeat:no-repeat;background-position:0 88%;background-size:100% 4px;
        padding-bottom:3px}

/* ----------------------------------------------------------------- icônes */
/* Des traits, jamais des vignettes. Un rapport se dessine à la main. */
.ico{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;
     stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:26px;height:26px;flex-basis:26px;stroke-width:1.35}
.ico--xl{width:34px;height:34px;flex-basis:34px;stroke-width:1.2}
.ico--fill{fill:currentColor;stroke:none}

/* --------------------------------------------------------------- mouvement */
/* Le mouvement sert l'attention. Une seule courbe, une seule idée : les
   choses arrivent d'en bas et s'installent ; les traits se dessinent. */
@keyframes ax-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ax-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ax-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ENTRÉE. Règle absolue : le contenu ne dépend JAMAIS de l'animation pour
   exister. Un élément n'est masqué que TANT QU'IL N'EST PAS ENTRÉ ; dès que
   la classe tombe, son état naturel est « visible », et l'animation ne fait
   qu'ajouter le mouvement par-dessus.

   C'est pour ça qu'il n'y a ni `animation-delay` ni `fill-mode` ici : les deux
   figent l'élément dans son état de départ, donc invisible, tant que la
   minuterie du navigateur n'avance pas. Onglet ouvert en arrière-plan, mode
   économie d'énergie, page rouverte depuis le cache : la minuterie peut rester
   à zéro, et la page reste blanche. L'échelonnement est fait en JavaScript,
   qui pose la classe élément par élément.

   Tout est conditionné à `.js`, posé dans le <head> avant le premier rendu :
   sans JavaScript, rien n'est masqué et la page s'affiche entière. */
.js [data-ax]:not(.is-in){opacity:0}
.js [data-ax].is-in{animation:ax-fade-up .62s var(--ease)}
/* L'état de repos, posé dès que l'animation est finie et par le filet de
   sécurité. Une animation DÉMARRÉE mais figée garde la main sur l'opacité :
   reposer la classe ne suffit pas, il faut couper l'animation elle-même. */
.js [data-ax].ax-fini{animation:none !important;opacity:1 !important}
.js [data-ax].ax-fini .ico--draw *{animation:none !important;stroke-dashoffset:0 !important}

/* Un tracé qui se dessine, comme une marque portée à la main sur un rapport.
   `pathLength="1"` normalise n'importe quel chemin : la même règle vaut pour
   toutes les icônes, sans avoir à les mesurer une par une. Même principe que
   ci-dessus : l'état naturel du tracé est « dessiné ». */
.js .ico--draw *{stroke-dasharray:1;stroke-dashoffset:0}
.js [data-ax]:not(.is-in) .ico--draw *{stroke-dashoffset:1}
.js [data-ax].is-in .ico--draw *{animation:ax-draw 1.1s var(--ease)}

/* un filet qui se tire de gauche à droite, même règle : son état naturel est
   « tiré », l'animation ne fait que le dessiner */
.js [data-ax].is-in .ax-rule{animation:ax-rule .8s var(--ease)}

/* le grain du papier : ce qui empêche un aplat d'avoir l'air d'un écran */
.grain{position:relative;isolation:isolate}
.grain::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  font-size:16px;font-weight:600;letter-spacing:-.005em;
  min-height:50px;padding:14px 28px;border:1px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),
             color .2s var(--ease),transform .2s var(--ease);
}
.btn--primary{background:var(--accent-btn);color:#fff}
.btn--primary:hover{background:var(--accent-btn-h);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0)}
.btn--line{border-color:var(--rule-ink);color:var(--paper)}
.btn--line:hover{background:rgba(251,249,245,.09);border-color:var(--rule-ink-2)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--ink-2);transform:translateY(-1px)}
.btn i{font-style:normal;transition:transform .2s var(--ease)}
.btn:hover i{transform:translateX(4px)}
/* un balayage discret au survol : le trait de lumière sur un papier glacé */
.btn--primary::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16),transparent 70%);
  background-size:220% 100%;background-position:180% 0}
.btn--primary:hover::after{transition:background-position .8s var(--ease);background-position:-60% 0}

/* ----------------------------------------------------------- barre du haut */
.nav{position:sticky;top:0;z-index:60;background:rgba(15,18,22,.93);
     backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--rule-ink)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:var(--nav-h)}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--paper)}
.mark__n{font-family:var(--serif);font-weight:500;font-size:25px;letter-spacing:.02em;line-height:1}
.mark__r{width:26px;height:3px;background:var(--accent)}
.mark__s{font-size:var(--t-etiquette);letter-spacing:.13em;text-transform:uppercase;color:var(--quiet-ink)}
@media (max-width:600px){.mark__s,.mark__r{display:none}}
.nav .btn{min-height:40px;padding:9px 18px;font-size:14px}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;
          background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left center}

/* ============================================================ PAGE DE VENTE */
.hero{background:var(--ink);color:var(--paper)}
.hero__in{padding-top:clamp(48px,6vw,86px);padding-bottom:clamp(52px,7vw,96px)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,6vw,76px);align-items:center}
/* Le titre du hero porte ses propres <br> : c'est la colonne qui lui donne sa
   mesure, pas une largeur en `ch`, et l'équilibrage automatique n'a rien à
   arbitrer puisque les coupures sont écrites. */
.hero h1{max-width:none;text-wrap:pretty}
.hero .lede{color:var(--quiet-ink);margin:var(--s5) 0 var(--s6)}

/* le relevé : le seul « graphique » du site, et il dit la thèse */
.releve{border-top:1px solid var(--rule-ink);border-bottom:1px solid var(--rule-ink);
        padding:var(--s2) 0;margin:0}
.releve__h{display:flex;justify-content:space-between;align-items:baseline;
           padding:var(--s3) 0 var(--s3);border-bottom:1px solid var(--rule-ink);
           font-size:var(--t-etiquette);letter-spacing:.13em;text-transform:uppercase;color:var(--quiet-ink)}
.row{display:grid;gap:7px;padding:var(--s4) 0;border-bottom:1px solid var(--rule-ink)}
.row:last-of-type{border-bottom:0}
.row__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)}
.row__l{font-size:15px;color:var(--paper)}
.row__v{font-size:14px;color:var(--quiet-ink);white-space:nowrap}
.row__track{height:5px;background:rgba(251,249,245,.1)}
.row__bar{height:100%;width:var(--w);background:var(--paper);
          transform:scaleX(0);transform-origin:left center;
          transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 130ms)}
.go .row__bar,.is-in .row__bar{transform:scaleX(1)}
.row--leak .row__l,.row--leak .row__v{color:var(--accent-ink)}
.row--leak .row__bar{background:var(--accent)}
.releve__n{font-size:var(--t-meta);color:var(--quiet-ink);line-height:1.5;
           padding:var(--s4) 0 var(--s1);max-width:44ch}

.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,76px)}
.fuites{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.fuites li{position:relative;padding:var(--s5) 0 var(--s5) 34px;border-bottom:1px solid var(--rule);
           font-size:clamp(16px,1.75vw,18.5px);line-height:1.5}
.fuites li::before{content:"";position:absolute;left:0;top:34px;width:16px;height:2px;background:var(--accent)}
.verdict{margin-top:clamp(32px,4vw,46px);font-family:var(--serif);
         font-size:clamp(21px,2.6vw,29px);line-height:1.28;max-width:26ch}

.temps{margin-top:clamp(40px,6vw,70px)}
.temp{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,54px);
      padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--rule)}
.temp:last-child{border-bottom:1px solid var(--rule)}
.temp__k{font-size:var(--t-etiquette);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
         color:var(--accent-text);white-space:nowrap;padding-top:var(--s2)}
.temp h3{margin-bottom:var(--s3)}
.temp p{color:var(--quiet);max-width:60ch}

/* trois leviers : l'alignement fait le travail, pas des cartes */
.leviers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,6vw,68px)}
.levier{padding:var(--s6) clamp(20px,2.4vw,34px) var(--s1);
        border-top:1px solid var(--rule-ink);border-left:1px solid var(--rule-ink)}
.levier:first-child{border-left:0;padding-left:0}
.levier__i{color:var(--accent-ink);margin-bottom:var(--s4);display:block}
.levier h3{color:var(--paper);margin-bottom:var(--s3)}
.levier p{color:var(--quiet-ink);font-size:16px;margin:0}

.args{list-style:none;margin:clamp(38px,5vw,58px) 0 0;padding:0;
      display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px) clamp(32px,5vw,72px)}
.args li{border-top:1px solid var(--rule);padding-top:var(--s5);display:grid;
         grid-template-columns:auto 1fr;gap:var(--s4);align-items:start}
.args .ico{color:var(--accent-text);margin-top:2px}
.args b{display:block;font-weight:600;font-size:17.5px;margin-bottom:var(--s1)}
.args span{color:var(--quiet);font-size:16px}

.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,34px);
      margin-top:clamp(40px,5vw,62px)}
.etape{position:relative;padding-top:var(--s6);border-top:1px solid var(--rule)}
.etape::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
               border-radius:50%;background:var(--accent)}
.etape__i{color:var(--accent-text);margin-bottom:var(--s4);display:block}
.etape__k{font-size:var(--t-etiquette);letter-spacing:.13em;text-transform:uppercase;
          color:var(--quiet);margin-bottom:var(--s2)}
.etape h3{font-size:clamp(19px,1.9vw,22px);margin-bottom:var(--s2)}
.etape p{color:var(--quiet);font-size:15.5px;margin:0}

/* ---------------------------------------------------- prendre contact */
/* Deux canaux, rien d'autre. Pas de formulaire : personne derrière pour le
   relever, et un formulaire qui ne répond pas coûte plus qu'il ne rapporte. */
.canaux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px);
        margin-top:clamp(38px,5vw,58px);text-align:left}
.canal{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  padding:clamp(24px,3vw,32px);border:1px solid var(--rule-ink);border-radius:2px;
  text-decoration:none;color:var(--paper);background:rgba(251,249,245,.02);
  transition:border-color .22s var(--ease),background-color .22s var(--ease),transform .22s var(--ease);
}
.canal:hover{border-color:var(--accent);background:rgba(214,67,28,.07);transform:translateY(-2px)}
.canal__i{color:var(--accent-ink);margin-top:2px;transition:transform .22s var(--ease)}
.canal:hover .canal__i{transform:scale(1.06)}
.canal__k{font-size:var(--t-etiquette);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
          color:var(--quiet-ink);margin:0 0 var(--s2)}
.canal__v{font-family:var(--serif);font-size:var(--t-nom);line-height:1.2;letter-spacing:-.012em;
          color:var(--paper);margin:0 0 var(--s2);word-break:break-word}
.canal__n{font-size:var(--t-meta);color:var(--quiet-ink);margin:0;line-height:1.5}
.canal__go{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s3);
           font-size:14px;font-weight:600;color:var(--accent-ink)}
.canal__go i{font-style:normal;transition:transform .22s var(--ease)}
.canal:hover .canal__go i{transform:translateX(4px)}

/* =========================================================== PAGES DOCUMENT */
.doc-head{background:var(--ink);color:var(--paper);
          padding:clamp(44px,6vw,80px) 0 clamp(36px,4.5vw,56px);overflow:hidden}
.doc-head h1{color:var(--paper)}
.doc-head .lede{margin-top:var(--s5)}
.stamp{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);max-width:none;position:relative;
       margin-top:var(--s6);padding-top:var(--s5);
       border-top:1px solid transparent;font-size:var(--t-meta);color:var(--quiet-ink)}
.stamp::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule-ink);
               transform-origin:left center}
.js [data-ax].is-in.stamp::before{animation:ax-rule .9s var(--ease)}
.stamp b{color:var(--paper);font-weight:600}

.doc{padding:clamp(44px,5.5vw,80px) 0 clamp(64px,8vw,112px)}
.doc__grid{display:grid;grid-template-columns:236px 1fr;gap:clamp(32px,5vw,80px);align-items:start}

.toc{position:sticky;top:calc(var(--nav-h) + var(--s5));max-height:calc(100vh - var(--nav-h) - var(--s8));
     overflow-y:auto;overscroll-behavior:contain}
.toc>summary{font-size:var(--t-etiquette);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 var(--s3);padding-bottom:var(--s3);
  border-bottom:1px solid var(--rule);list-style:none;cursor:default}
.toc>summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:grid;grid-template-columns:24px 1fr;gap:var(--s2);
  padding:7px 0 7px 10px;margin-left:-11px;border-left:1px solid transparent;
  font-size:14.5px;line-height:1.4;color:var(--quiet);text-decoration:none;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.toc a::before{content:counter(toc);font-size:12.5px;color:var(--quiet);padding-top:2px;
               transition:color .16s var(--ease)}
.toc a:hover{color:var(--ink)}
.toc a:hover::before{color:var(--accent-text)}
.toc a[aria-current]{color:var(--ink);border-left-color:var(--accent)}
.toc a[aria-current]::before{color:var(--accent-text)}

.art{border-top:1px solid var(--rule);padding:clamp(28px,3.2vw,40px) 0;
     scroll-margin-top:calc(var(--nav-h) + var(--s5))}
.art:first-of-type{border-top:0;padding-top:0}
.art:last-of-type{border-bottom:1px solid var(--rule)}
.art__k{font-size:var(--t-etiquette);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
        color:var(--accent-text);margin:0 0 var(--s3)}
.art__k a{text-decoration:none;color:inherit}
.art__k a::after{content:" ¶";opacity:0;transition:opacity .16s var(--ease)}
.art:hover .art__k a::after,.art__k a:focus-visible::after{opacity:.5}
.art h2{margin-bottom:var(--s4);font-size:clamp(23px,2.6vw,30px);font-weight:500;max-width:26ch}
.art h3{font-family:var(--sans);font-size:17.5px;font-weight:600;margin:var(--s5) 0 var(--s3)}
.art p{color:var(--quiet)}
.art p strong,.art li strong{color:var(--ink)}

.al{list-style:none;margin:0 0 1.05em;padding:0;counter-reset:al}
.al>li{counter-increment:al;position:relative;padding-left:46px;margin-bottom:var(--s3);
       color:var(--quiet);max-width:calc(66ch + 46px)}
.al>li:last-child{margin-bottom:0}
.al>li::before{content:var(--n) "." counter(al);position:absolute;left:0;top:0;
               font-size:var(--t-meta);color:var(--accent-text);padding-top:3px}

.tirets{list-style:none;margin:0 0 1.05em;padding:0}
.tirets li{position:relative;padding:0 0 var(--s3) 30px;color:var(--quiet);max-width:66ch}
.tirets li:last-child{padding-bottom:0}
.tirets li::before{content:"";position:absolute;left:0;top:13px;width:15px;height:2px;background:var(--accent)}

.note{background:var(--paper-2);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
      padding:var(--s5) 0;margin:var(--s6) 0}
.note__in{padding:0 clamp(18px,2.2vw,28px)}
.note__k{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
         color:var(--accent-text);margin:0 0 var(--s2)}
.note p{color:var(--quiet);font-size:16.5px;max-width:62ch}
.note b{color:var(--ink);font-weight:600}

.fiche{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.fiche li{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:var(--s1) var(--s6);
          padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.fiche .k{font-size:var(--t-meta);font-weight:600;color:var(--quiet);padding-top:3px}
.fiche .v{color:var(--ink);max-width:64ch}
.fiche .v a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2)}
.fiche .v a:hover{border-bottom-color:var(--accent)}

.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) clamp(24px,3vw,40px);
        margin-top:var(--s7)}
.carte{border-top:1px solid var(--rule-2);padding-top:var(--s5)}
.carte__h{display:flex;align-items:center;gap:var(--s2);color:var(--accent-text);margin-bottom:var(--s3)}
.carte__h span{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.carte p{font-size:16px;color:var(--quiet);margin:0 0 var(--s2)}
.carte p:last-child{margin-bottom:0}
.carte strong{color:var(--ink)}
.carte a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.carte a:hover{border-bottom-color:var(--accent)}

.offres{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);margin-top:var(--s7)}
.offre{border-top:2px solid var(--ink);padding-top:var(--s5)}
.offre__k{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
          color:var(--accent-text);margin:0 0 var(--s3)}
.offre h2{margin-bottom:var(--s3);max-width:18ch;font-size:var(--t-nom);font-weight:500}
.offre h3{font-family:var(--sans);font-size:17.5px;font-weight:600;
          margin:var(--s6) 0 var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.offre>p{max-width:46ch}
@media (min-width:821px){.offre h2{min-height:2.3em}.offre>p{min-height:4.9em}}
.modele{margin:var(--s5) 0 0;padding:var(--s4) 0;border-top:1px solid var(--rule);
        border-bottom:1px solid var(--rule)}
.modele dt{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
           color:var(--quiet);margin-bottom:var(--s2)}
.modele dd{margin:0;font-family:var(--serif);font-size:clamp(21px,2.2vw,25px);line-height:1.24;
           letter-spacing:-.014em;color:var(--ink)}
.modele dd small{display:block;margin-top:var(--s2);font-family:var(--sans);font-size:14.5px;
                 font-weight:400;line-height:1.5;letter-spacing:0;color:var(--quiet);max-width:40ch}

.tbd{color:var(--accent-text);font-weight:600;white-space:nowrap;border-bottom:1px dotted currentColor}

/* ------------------------------------------------------------------ pied */
.foot{background:var(--ink);color:var(--quiet-ink);font-size:14px;border-top:1px solid var(--rule-ink)}
.foot__in{padding-top:var(--s6);padding-bottom:var(--s6)}
.foot__top{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;align-items:baseline}
.foot__nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s5) 0 0;
           padding:var(--s5) 0 0;border-top:1px solid var(--rule-ink);list-style:none}
.foot a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule-ink)}
.foot a:hover{border-bottom-color:var(--accent)}
.foot__legal{margin:var(--s5) 0 0;font-size:13px;line-height:1.55;max-width:80ch;color:var(--quiet-ink)}


/* ================================================== mobile : tout se centre */
/* Sur un écran de téléphone, une colonne unique alignée à gauche laisse une
   marge morte à droite et donne l'impression d'un texte collé au bord. Tout
   ce qui est titre, accroche, icône ou appel à l'action se centre.

   Ce qui ne se centre PAS, et c'est délibéré : les listes à puces, les
   tableaux d'identité, le relevé, et le corps des articles contractuels. Un
   paragraphe long centré se lit mal, parce que l'oeil perd le bord gauche à
   chaque retour à la ligne. La règle vaut pour tout le monde, y compris ici. */
@media (max-width:700px){
  .hero__in > .hero__grid > div:first-child,
  .doc-head .shell,
  .split > h2, .split > .lede,
  .section > .shell > h2,
  .levier, .etape, .carte, .offre > .offre__k, .offre > h2, .offre > p,
  .verdict, .canal > div{
    text-align:center;
  }
  .hero h1,.doc-head h1,.split > h2,.section > .shell > h2,.verdict,
  .lede,.levier p,.etape p,.carte p,.offre > p{
    margin-left:auto;margin-right:auto;
  }
  h1,h2{max-width:22ch}
  .meta,.stamp,.carte__h,.levier__i,.etape__i,.canal__i{justify-content:center}
  /* l'étiquette redevient un bloc : quand elle passe sur deux lignes, le texte
     se centre proprement au lieu de se caler derrière l'icône */
  .eyebrow{display:block;font-size:11.5px;letter-spacing:.12em}
  .eyebrow .ico{display:inline-block;vertical-align:-4px;margin-right:7px}
  .levier__i,.etape__i,.canal__i{margin-left:auto;margin-right:auto}
  .meta span:not(:last-child)::after{margin-left:var(--s2)}
  .stamp{gap:var(--s1) var(--s4)}

  /* les icônes des atouts passent au-dessus du texte, tout centré */
  .args li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s3)}

  /* les canaux de contact : icône au-dessus, valeur centrée */
  .canal{grid-template-columns:1fr;justify-items:center;gap:var(--s3);text-align:center}
  .canal__go{justify-content:center}

  /* le sommaire d'un document reste aligné : c'est une table des matières */
  .toc,.fiche,.tirets,.fuites,.al,.art,.note,.releve{text-align:left}
}

/* ============================================================== responsive */
@media (max-width:1000px){
  .doc__grid{grid-template-columns:1fr;gap:var(--s6)}
  .toc{position:static;max-height:none;overflow:visible;
       border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);padding:var(--s4) 0}
  .toc>summary{margin:0;padding:0;border-bottom:0;cursor:pointer;
               display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
               min-height:34px;color:var(--ink)}
  .toc>summary::after{content:"";width:9px;height:9px;flex:none;
                      border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
                      transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
  .toc[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
  .toc[open] ol{margin-top:var(--s4)}
  .toc a{padding:11px 0 11px 10px}
}
@media (max-width:940px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero h1{max-width:20ch}
}
@media (max-width:880px){
  .leviers{grid-template-columns:1fr}
  .levier{border-left:0;padding-left:0;padding-right:0}
  .levier:first-child{padding-top:var(--s6)}
  .flow{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:var(--s6)}
  .args{grid-template-columns:1fr}
}
@media (max-width:820px){
  .cartes{grid-template-columns:1fr 1fr}
  .offres{grid-template-columns:1fr;gap:var(--s7)}
  .offre h2{max-width:none}
  .canaux{grid-template-columns:1fr}
}
@media (max-width:640px){
  .temp{grid-template-columns:1fr;gap:var(--s3)}
  .temp__k{padding-top:0}
  .flow{grid-template-columns:1fr}
  .btn{width:100%}
  .nav .btn{width:auto}
}
@media (max-width:620px){
  :root{--t-corps:16.5px}
  .cartes{grid-template-columns:1fr;gap:var(--s5)}
  .fiche li{grid-template-columns:1fr;gap:var(--s1);padding:var(--s3) 0}
  .al>li{padding-left:0}
  .al>li::before{position:static;display:block;margin-bottom:2px}
  .note__in{padding:0 var(--s4)}
  .stamp{gap:var(--s1) var(--s5)}
  .releve__h{font-size:11px}
  .canal{grid-template-columns:1fr;gap:var(--s3)}
}

/* Qui a demandé moins d'animation n'en reçoit aucune. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;
                       animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js [data-ax]:not(.is-in){opacity:1}
  .js [data-ax]:not(.is-in) .ico--draw *{stroke-dashoffset:0}
  .row__bar{transform:scaleX(1)}
  .btn:hover,.btn:hover i,.canal:hover{transform:none}
}

/* ============================================================== impression */
@media print{
  @page{margin:18mm 16mm}
  html{scroll-behavior:auto}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.5;overflow:visible}
  .nav,.foot__nav,.skip,.progress,.btn,.toc,.foot__top,.canal__go,.grain::after{display:none !important}
  [data-ax],.ico--draw *{opacity:1 !important;stroke-dashoffset:0 !important}

  .shell{max-width:none;padding:0}
  .doc-head,.hero{background:#fff;color:#000;padding:0 0 8mm;border-bottom:1pt solid #000}
  .doc-head h1,.hero h1{color:#000;font-size:22pt;max-width:none}
  .lede{color:#333;font-size:11pt;max-width:none}
  .eyebrow{color:#000}
  .stamp{color:#333;margin-top:5mm;padding-top:3mm;font-size:9pt}
  .stamp::before{background:#999}
  .stamp b{color:#000}

  .doc,.section{padding:6mm 0}
  .doc__grid,.split,.leviers,.flow,.args,.cartes,.offres,.canaux{display:block}
  .dark{background:#fff !important;color:#000 !important}
  .levier,.canal{border:0;border-top:.5pt solid #999;padding:4mm 0;color:#000}
  .levier h3,.canal__v{color:#000}
  .levier p,.canal__n,.row__l,.row__v,.releve__n,.quiet{color:#333 !important}
  .row__bar{transform:scaleX(1)}
  .art{border-top:.5pt solid #bbb;padding:5mm 0;break-inside:avoid}
  .art h2{color:#000;font-size:14pt;break-after:avoid}
  .art h3,.offre h3{break-after:avoid}
  .art p,.al>li,.tirets li,.fiche .v{color:#222}
  .art__k,.al>li::before,.note__k,.fiche .k{color:#000}
  .art__k a::after{content:"" !important}
  .tirets li::before,.fuites li::before{background:#000}
  .note{background:#f4f4f4;border-top:.5pt solid #999;border-bottom:.5pt solid #999;break-inside:avoid}
  .fiche{border-top:.5pt solid #bbb}
  .fiche li{border-bottom:.5pt solid #bbb;break-inside:avoid}
  .carte,.offre,.temp,.etape{break-inside:avoid;border-top:.5pt solid #999;margin-bottom:5mm;padding-top:4mm}
  .tbd{color:#000;border-bottom:1pt dotted #000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555;word-break:break-all}
  .foot{background:#fff;color:#333;border-top:.5pt solid #999}
  .foot__legal{color:#333;font-size:8.5pt;margin:0;padding-top:3mm}
}