/* #########################################################################
   ALCHMIST · SYSTÈME COMMUN (alchmist.css)
   Direction « Précision » : la home (index.html) fait foi.
   Référence des composants, balisage et règles d'usage : _systeme.html

   NE PAS MODIFIER depuis une page : le CSS propre à une page va dans son
   <style>. Un composant utile ailleurs se signale dans les notes de page.

   Partie 1 : extraite de la home au caractère près (aucune valeur réinventée).
   Partie 2 : composants que les autres pages exigent, dans la même langue.
   Partie 3 : composants nés dans les pages et promus à la passe R2 (01/10),
              chacun remplaçant ses doublons locaux.
   ######################################################################### */

/* =========================================================================
   JETONS
   ========================================================================= */
:root{
  --paper:#F5F4F1; --paper-2:#EDECE7; --sheet:#FAF9F6;
  --ink:#16181C; --ink-2:#2A2D33; --ink-soft:#5B5E66;
  --rule:#D7D5CE; --rule-2:#B9B6AD; --rule-soft:#E4E2DC;
  --signal:#2547D0; --signal-deep:#1B36A0; --signal-wash:#ECEFFB; --signal-dark:#7E97FF;
  --ok:#1F7A52;
  --d-paper:#F5F4F1; --d-soft:#A9ACB3; --d-rule:rgba(245,244,241,.16);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-text:"Switzer","Inter","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(16px,4.17vw,60px);
  --cg:clamp(14px,1.67vw,24px);
  --strip-h:34px;
  --bar-h:66px;
  --r-ctl:4px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-draw:cubic-bezier(.65,0,.35,1);

  /* Ajouts du système (absents de la home) */
  --ok-wash:#E6EFE9;          /* fond du statut vert (déjà utilisé en dur dans .status.ok) */
  --field:#FCFBF9;            /* fond des champs de formulaire */
  --ctl-line:#808288;         /* bord des champs : 3,5:1 sur papier, 3,7:1 sur feuille */
  --err:#A8321F; --err-wash:#F6E9E4;  /* erreur de formulaire : 6,1:1 sur papier */

  /* Espacements : les valeurs récurrentes de la home */
  --sec-pad:clamp(84px,9.4vw,140px);     /* haut de section */
  --block-gap:clamp(44px,5vw,72px);      /* tête de section → objet */
  --block-gap-s:clamp(40px,4.6vw,64px);
  --block-gap-l:clamp(52px,6vw,88px);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --measure:64ch;                         /* mesure du texte long */

  /* Couches */
  --z-hdr:40; --z-menu:60; --z-skip:80; --z-grain:90;

  /* Pont de compatibilité : noms lus par assets/cmp.css et par des styles en ligne du texte juridique */
  --bg:var(--paper); --bg-raised:var(--sheet); --tx-0:var(--ink); --tx-1:var(--ink-2); --tx-2:var(--ink-soft);
  --accent:var(--signal); --accent-bg:var(--signal-wash); --rule-hard:var(--rule-2);
  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem;
}

/* =========================================================================
   BASE ET TYPOGRAPHIE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 24px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-text);font-kerning:normal;font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
strong{font-weight:600}
button{font:inherit;color:inherit}
::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.num{font-variant-numeric:tabular-nums lining-nums}
.nb{white-space:nowrap}
/* Ajouts sans effet sur la home (éléments qu'elle n'emploie pas) */
h4,h5,h6,dl,dd{margin:0}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse}

/* Lien d'évitement (« Aller au contenu ») */
.skip{position:absolute;left:var(--gut);top:-80px;z-index:var(--z-skip);background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:var(--r-ctl);font-weight:500;transition:transform .2s var(--ease-out)}
.skip:focus{top:12px}

/* Grain papier : couche fixe, statique, jamais animée */
.grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.045;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0 0.11 0 0 0 1.1 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* =========================================================================
   GRILLE
   12 colonnes ; .main-col = colonnes 3 à 12 (la 1-2 est la marge des N°)
   ========================================================================= */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}
.main-col{grid-column:3/-1}

/* =========================================================================
   MICRO-RÉFÉRENCES
   .mono : IBM Plex Mono, réservé aux N° et aux références. .lbl : étiquettes en Switzer.
   ========================================================================= */
.mono{font-family:var(--f-mono);font-weight:500;font-size:.75rem;line-height:1.35;letter-spacing:.08em;text-transform:uppercase}
.lbl{font-family:var(--f-text);font-weight:500;font-size:.8125rem;line-height:1.35;letter-spacing:0;color:var(--ink-soft)}
.dark .lbl{color:var(--d-soft)}

/* =========================================================================
   LIENS ET BOUTONS
   ========================================================================= */
.btn{--cm:var(--signal);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 26px;border-radius:var(--r-ctl);background:var(--signal);color:#fff;font:600 1.0625rem/1 var(--f-text);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:transform .16s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--signal-deep);opacity:0;transition:opacity .2s ease}
/* Traits de coupe : les crochets d'imprimerie qui encadrent le bouton au survol */
.btn::after{content:"";position:absolute;inset:-7px;pointer-events:none;opacity:0;transform:scale(1.035);transition:opacity .2s ease,transform .3s var(--ease-out);
  background:
    linear-gradient(var(--cm),var(--cm)) left top/9px 1.5px no-repeat,
    linear-gradient(var(--cm),var(--cm)) left top/1.5px 9px no-repeat,
    linear-gradient(var(--cm),var(--cm)) right top/9px 1.5px no-repeat,
    linear-gradient(var(--cm),var(--cm)) right top/1.5px 9px no-repeat,
    linear-gradient(var(--cm),var(--cm)) left bottom/9px 1.5px no-repeat,
    linear-gradient(var(--cm),var(--cm)) left bottom/1.5px 9px no-repeat,
    linear-gradient(var(--cm),var(--cm)) right bottom/9px 1.5px no-repeat,
    linear-gradient(var(--cm),var(--cm)) right bottom/1.5px 9px no-repeat}
.btn .arr{display:inline-block;transition:transform .3s var(--ease-out)}
.btn:active{transform:scale(.98)}
.btn-sm{height:42px;padding:0 18px;font-size:.9375rem}
.btn-sm::after{inset:-6px}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{opacity:1}
  .btn:hover::after{opacity:1;transform:scale(1)}
  .btn:hover .arr{transform:translateX(4px)}
}

.lnk{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--ink);padding:10px 0}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:currentColor;opacity:.35}
.lnk::before{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out);z-index:1}
.lnk .arr{display:inline-block;transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .lnk:hover::before{transform:scaleX(1);transform-origin:left}
  .lnk:hover .arr{transform:translateX(3px)}
}

/* =========================================================================
   FEUILLES ET TRAITS DE COUPE
   ========================================================================= */
.sheet{position:relative;background:var(--sheet);border:1px solid var(--rule)}
.crop{position:absolute;inset:-15px;pointer-events:none;
  --c:var(--rule-2);
  background:
    linear-gradient(var(--c),var(--c)) left 0 top 14px/9px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 14px top 0/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 top 14px/9px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 14px top 0/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) left 0 bottom 14px/9px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left 14px bottom 0/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) right 0 bottom 14px/9px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right 14px bottom 0/1px 9px no-repeat}

/* =========================================================================
   EN-TÊTE
   Bandeau de statut, barre, navigation, bouton, menu mobile plein écran.
   ========================================================================= */
.hdr{position:sticky;top:0;z-index:var(--z-hdr);background:var(--paper);transform:translateZ(0);transition:transform .5s var(--ease-out)}
html.scrolled .hdr{transform:translateY(calc(-1 * var(--strip-h)))}
.strip{height:var(--strip-h);border-bottom:1px solid var(--rule-soft)}
.strip-in{height:100%;display:flex;align-items:center;gap:0;font-family:var(--f-text);font-size:.8125rem;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.stat{display:flex;align-items:center;gap:9px}
.stat + .stat{margin-left:18px;padding-left:18px;border-left:1px solid var(--rule)}
.stat strong{color:var(--ink);font-weight:500}
.live{position:relative;width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ok);opacity:0}
html.motion .strip .live::after{animation:livePulse 2.8s var(--ease-out) 1.2s infinite}
html.scrolled .strip .live::after{animation:none}
@keyframes livePulse{0%{opacity:.55;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.5)}}

.bar{height:var(--bar-h);position:relative}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);opacity:0;transition:opacity .3s ease}
html.scrolled .bar::after{opacity:1}
.bar-in{height:100%;display:flex;align-items:center;gap:24px}
.logo{display:block;flex:none;padding:8px 0}
.logo img{height:19px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{position:relative;font-size:.9375rem;font-weight:500;color:var(--ink-soft);padding:10px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:var(--signal);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--ink)}
  .nav a:not([aria-current]):hover::after{transform:scaleX(1);transform-origin:left}
}
.bar .btn-sm{margin-left:10px}
.menu-btn{display:none;align-items:center;gap:10px;height:44px;padding:0 4px 0 12px;margin-right:-4px;background:none;border:0;cursor:pointer;font-weight:500;font-size:.9375rem}
.menu-ic{position:relative;width:18px;height:10px}
.menu-ic::before,.menu-ic::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink)}
.menu-ic::before{top:0}.menu-ic::after{bottom:0}

/* Menu mobile : feuille plein écran */
.mnav{position:fixed;inset:0;z-index:var(--z-menu);background:var(--paper);display:flex;flex-direction:column;overflow-y:auto}
.mnav[hidden]{display:none}
html.motion .mnav{animation:sheetIn .28s var(--ease-out)}
@keyframes sheetIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav-top{height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}
.mnav-top img{height:18px;width:auto}
.mnav-close{height:44px;padding:0 4px 0 12px;background:none;border:0;cursor:pointer;font-weight:500;font-size:.9375rem;display:flex;align-items:center;gap:10px}
.x-ic{position:relative;width:16px;height:16px}
.x-ic::before,.x-ic::after{content:"";position:absolute;left:0;right:0;top:7.25px;height:1.5px;background:var(--ink);transform:rotate(45deg)}
.x-ic::after{transform:rotate(-45deg)}
.mnav-links{display:flex;flex-direction:column;padding-top:12px;padding-bottom:32px}
.mnav-links a:not(.btn){font:500 2rem/1.1 var(--f-display);letter-spacing:-.025em;padding:18px 0;border-bottom:1px solid var(--rule-soft);display:flex;justify-content:space-between;align-items:baseline}
.mnav-links a:not(.btn) span{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;color:var(--ink-soft)}
.mnav-links .btn{margin-top:28px;width:100%}

/* =========================================================================
   TRAIT DE REPÈRE
   Filet de 1 px et sa marque d'encre de 48 × 3 px (sous un titre de page).
   ========================================================================= */
.rule-mark{position:relative;height:1px;background:var(--rule)}
.rule-mark::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:3px;background:var(--ink);transform-origin:left}

/* =========================================================================
   SCHÉMA TRACÉ
   Puces, nœuds et traits SVG tracés une fois (voir MOUVEMENT plus bas).
   ========================================================================= */
.sch{width:100%;height:auto;overflow:visible}
.sch text{font-family:var(--f-text);font-size:14px;font-weight:500;fill:var(--ink)}
.sch .t-h{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;fill:var(--ink-soft)}
.sch .t-h tspan.k{fill:var(--signal)}
.sch .hr{stroke:var(--rule);stroke-width:1}
.sch .guide{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 4}
.sch .chip rect{fill:var(--sheet);stroke:var(--rule-2);stroke-width:1}
.sch .chip .ic{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sch .chip.out rect{stroke:var(--rule-2)}
.sch .chip.hold rect{fill:var(--paper);stroke:var(--ink-soft);stroke-dasharray:3 3}
.sch .p{fill:none;stroke:var(--ink);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.sch .p.cob{stroke:var(--signal);stroke-width:1.6}
.sch .p.branch{stroke:var(--ink-soft);stroke-width:1.2;stroke-dasharray:3 4}
.sch .n-read .ring{fill:var(--sheet);stroke:var(--ink);stroke-width:1.5}
.sch .n-read .core{fill:var(--ink)}
.sch .n-ok circle{fill:var(--ok)}
.sch .n-ok path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sch .n-end .core{fill:var(--signal)}
.sch .n-end .ring{fill:none;stroke:var(--signal);stroke-width:1}
.sch .tick path{fill:none;stroke:var(--ok);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sch .pop,.sch .chip,.sch .tick{transform-box:fill-box;transform-origin:center}
/* Note sous une puce de schéma (« vous tranchez ») */
.sch .t-note{font-family:var(--f-text);font-size:12.5px;font-weight:400;fill:var(--ink-soft)}
.sch .n-rel circle{fill:var(--sheet);stroke:var(--signal);stroke-width:1.5}
.sch .n-rel path{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   TÊTE DE SECTION « N° »
   Colonne de marge numérotée, filet et marque d'encre qui se trace.
   ========================================================================= */
.sec{padding-top:var(--sec-pad)}
.sh{position:relative;padding-top:clamp(20px,1.9vw,26px);row-gap:16px}
.sh::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.sh::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:3px;background:var(--ink);transform-origin:left;z-index:1}
.sh-num{grid-column:1/span 2;display:flex;flex-direction:column;gap:7px;padding-top:.7em;color:var(--ink-soft)}
.sh-num .n{color:var(--signal)}
.h2{grid-column:3/span 8;font:500 clamp(2.05rem,3.85vw,3.45rem)/1.02 var(--f-display);letter-spacing:-.034em;color:var(--ink);text-wrap:balance}
.h2.wide{grid-column:3/span 9}
.sec-lead{grid-column:3/span 6;margin-top:22px;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.55;color:var(--ink-soft);max-width:52ch;text-wrap:pretty}
.sec-lead strong{color:var(--ink)}

/* =========================================================================
   OBJETS D'IMPRIMÉ
   Fiche technique, statuts, chiffres clés, ligne de statut.
   ========================================================================= */
.fiche{padding:26px 28px 28px;display:flex;flex-direction:column}
.f-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.f-top .mono{color:var(--ink-soft)}
.status{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:var(--r-ctl);font-size:.8125rem;font-weight:500;white-space:nowrap}
.status.ok{color:var(--ok);background:var(--ok-wash)}
.status.ok .live{width:6px;height:6px}
.status.nda{color:var(--ink-2);border:1px solid var(--rule-2)}
.status.nda svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4}
.f-name{margin-top:26px;font:500 clamp(2.6rem,4.2vw,3.7rem)/.95 var(--f-display);letter-spacing:-.045em;color:var(--ink)}
.f-kind{display:block;margin-top:10px;font:400 1.0625rem/1.4 var(--f-text);letter-spacing:0;color:var(--ink-soft)}
.f-url{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--ink);padding-top:16px;font:500 clamp(1.5rem,2.2vw,1.95rem)/1.1 var(--f-display);letter-spacing:-.03em;color:var(--ink);position:relative}
.f-url .arr{font-family:var(--f-text);font-weight:400;transition:transform .3s var(--ease-out)}
.f-url::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .f-url:hover::after{transform:scaleX(1);transform-origin:left}
  .f-url:hover .arr{transform:translate(3px,-3px)}
}

.figs{margin-top:clamp(34px,4vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.fig{padding:18px 18px 0 0}
.fig + .fig{padding-left:18px;border-left:1px solid var(--rule)}
.fig .v{font:500 clamp(2.1rem,3.5vw,3.1rem)/1 var(--f-display);letter-spacing:-.045em;color:var(--ink)}
.fig .v small{font-size:.5em;letter-spacing:-.02em;margin-left:.06em}
.fig p{margin-top:8px;font-size:.9375rem;line-height:1.4;color:var(--ink-soft)}
/* Ligne de statut : point vert + texte, sans bordure */
.statline{display:flex;align-items:center;gap:10px;font-size:.9375rem;line-height:1.4;color:var(--ink-2)}
.statline .live{width:7px;height:7px}

/* =========================================================================
   FAQ EN DEUX COLONNES
   ========================================================================= */
.faq{margin-top:clamp(40px,4.6vw,64px)}
.qa{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:var(--cg);padding:30px 0 34px;border-top:1px solid var(--rule)}
.qa:first-child{border-top:1px solid var(--ink)}
.qa-q{grid-column:1/span 4;font:500 clamp(1.25rem,1.75vw,1.55rem)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;padding-right:12px}
.qa-a{grid-column:5/span 6;font-size:1.0625rem;line-height:1.62;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.qa-a .lnk{margin-top:12px}

/* =========================================================================
   PLANCHES ENCRE (sections sombres)
   ========================================================================= */
.dark{background:var(--ink);color:var(--d-paper)}
.sec.dark{margin-top:clamp(96px,10vw,150px);padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(80px,8vw,120px)}
.dark .sh::after{background:var(--d-rule)}
.dark .sh::before{background:var(--d-paper)}
.dark .sh-num{color:var(--d-soft)}
.dark .sh-num .n{color:var(--signal-dark)}
.dark .h2{color:var(--d-paper);grid-column:3/span 9}
.dark .sec-lead{color:var(--d-soft)}

/* =========================================================================
   BLOC DIAGNOSTIC (dos de couverture : texte, contact, bon « Votre plan »)
   ========================================================================= */
.dg-body{margin-top:clamp(40px,4.6vw,64px);align-items:start}
.dg-text{grid-column:3/span 4;display:flex;flex-direction:column}
.dg-lede{font-size:clamp(1.15rem,1.5vw,1.375rem);line-height:1.5;color:var(--d-paper);max-width:32ch}
.dg-meta{margin-top:18px;font-size:1rem;line-height:1.55;color:var(--d-soft);max-width:36ch}
/* La personne joignable du bloc : composant .who (partie 3), sur encre, 88 px */
.dg-text .who{margin-top:40px}
.plan{grid-column:8/-1;color:var(--ink);padding:26px 28px 28px;border-color:transparent}
.plan .crop{--c:rgba(245,244,241,.4)}
.plan-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.plan-t{font:500 1.9rem/1 var(--f-display);letter-spacing:-.035em}
.plan-top .lbl{color:var(--ink-soft)}
.plan-list li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;padding:18px 0;border-bottom:1px solid var(--rule)}
.box{width:16px;height:16px;margin-top:4px;border:1.5px solid var(--ink);border-radius:2px}
.pl-h{font:500 1.2rem/1.2 var(--f-display);letter-spacing:-.018em;color:var(--ink)}
.pl-d{margin-top:4px;font-size:.9375rem;color:var(--ink-soft)}
.plan-cta{margin-top:24px;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.plan-cta .btn{width:100%}
.plan-note{font-size:.9375rem;line-height:1.45;color:var(--ink-soft)}

/* =========================================================================
   PIED DE PAGE (encre, suite du dos de couverture)
   ========================================================================= */
.ftr{background:var(--ink);color:var(--d-soft);padding:0 0 36px;font-size:.9375rem}
.ftr-top{padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--d-rule);row-gap:36px}
.ftr-brand{grid-column:1/span 4}
.ftr-brand img{height:18px;width:auto}
.ftr-sig{margin-top:18px;font:500 1.35rem/1.15 var(--f-display);letter-spacing:-.02em;color:var(--d-paper)}
.ftr-brand p.d{margin-top:10px;max-width:34ch;line-height:1.55}
.ftr-mail{display:inline-block;margin-top:10px;color:var(--d-paper);padding:10px 0 8px;border-bottom:1px solid var(--d-rule)}
.ftr-cols{grid-column:6/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--cg)}
.ftr-h.lbl{color:var(--d-paper);margin-bottom:4px}
/* 12 px de part et d'autre : 45 px de cible sur 21 px de ligne (seuil de 44 tenu, R2 · S2) */
.ftr-cols a{display:block;padding:12px 0;line-height:1.4}
@media (hover:hover) and (pointer:fine){.ftr-cols a:hover,.ftr-mail:hover{color:#fff}}
.ftr-bot{margin-top:clamp(40px,4vw,56px);padding-top:20px;border-top:1px solid var(--d-rule);display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;font-size:.8125rem}
/* Lien au fil de la ligne du bas (Prighter vers la politique) : souligné, il se distingue sans la couleur */
.ftr-bot a{color:inherit;text-decoration:underline;text-decoration-color:var(--d-rule);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .2s ease,color .2s ease}
@media (hover:hover) and (pointer:fine){.ftr-bot a:hover{color:#fff;text-decoration-color:currentColor}}

/* =========================================================================
   MOUVEMENT
   Sous html.motion uniquement : sans JS ou en mouvement réduit, tout est visible.
   On n'anime que transform, opacity, clip-path et les traits SVG.
   ========================================================================= */
html.motion .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out) var(--dl,0s),transform .8s var(--ease-out) var(--dl,0s)}
html.motion .rv.in{opacity:1;transform:none}
html.motion .sh::before{transform:scaleX(0);transition:transform .7s var(--ease-draw) .1s}
html.motion .sh.in::before{transform:scaleX(1)}

/* Courbes partagées */
@keyframes lineUp{from{transform:translateY(104%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes scaleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Schéma tracé */
html.motion .sch .p{stroke-dasharray:1}
html.motion .sch .p.branch{stroke-dasharray:3 4}
html.motion .sch:not(.on) .p{stroke-dashoffset:1}
html.motion .sch:not(.on) .p.branch,html.motion .sch:not(.on) .chip,html.motion .sch:not(.on) .fade,html.motion .sch:not(.on) .pop,html.motion .sch:not(.on) .tick{opacity:0}
html.motion .sch.on .p{animation:draw var(--d,.5s) var(--ease-draw) var(--t,0s) both}
html.motion .sch.on .p.branch{animation:fade .5s ease var(--t,0s) both}
html.motion .sch.on .chip,html.motion .sch.on .fade{animation:chipIn .55s var(--ease-out) var(--t,0s) both}
html.motion .sch.on .pop{animation:pop .5s var(--ease-out) var(--t,0s) both}
html.motion .sch.on .tick{animation:pop .4s var(--ease-out) var(--t,0s) both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Une fois joué, le tracé devient statique : plus aucune animation qui puisse se relancer. */
html.motion .sch.done .p,html.motion .sch.done .p.branch,html.motion .sch.done .chip,html.motion .sch.done .fade,html.motion .sch.done .pop,html.motion .sch.done .tick{animation:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes chipIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}

/* Mouvement réduit */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .live::after{display:none}
}

/* =========================================================================
   RESPONSIVE · partie 1
   ========================================================================= */
@media (max-width:1180px){
  .nav{gap:22px}
  .sh-num{grid-column:1/-1;flex-direction:row;gap:14px;padding-top:0}
  .h2,.h2.wide,.dark .h2{grid-column:1/span 11}
  .sec-lead{grid-column:1/span 9}
  .main-col{grid-column:1/-1}
  .dg-text{grid-column:1/span 5}
  .plan{grid-column:7/-1}
  .ftr-brand{grid-column:1/span 5}
  .ftr-cols{grid-column:6/-1}
}
@media (max-width:980px){
  .nav a:not([aria-current]){display:none}
  .nav{display:none}
  .bar .btn-sm{margin-left:auto}
  .menu-btn{display:inline-flex}
  .dg-text{grid-column:1/-1}
  .plan{grid-column:1/-1;margin-top:40px;max-width:640px}
  .ftr-brand,.ftr-cols{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--strip-h:34px;--bar-h:62px}
  body{font-size:1rem}
  .stat + .stat{display:none}
  .crop{display:none}
  .bar-in{gap:10px}
  .logo img{height:17px}
  .bar .btn-sm{height:44px;padding:0 14px;font-size:.875rem}
  .menu-btn{padding-left:6px}
  .menu-btn .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  .sec{padding-top:80px}
  .h2,.h2.wide,.dark .h2{grid-column:1/-1;font-size:clamp(1.8rem,8.4vw,2.35rem);line-height:1.06}
  .sec-lead{grid-column:1/-1}
  .fiche{padding:22px 20px 24px}
  .figs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fig{padding-right:10px}
  .fig + .fig{padding-left:12px}
  .fig .v{font-size:1.9rem}
  .fig p{font-size:.8125rem}
  .qa{grid-template-columns:1fr;row-gap:12px;padding:24px 0 26px}
  .qa-q,.qa-a{grid-column:1/-1}
  .plan{padding:22px 18px 22px}
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .ftr-bot{flex-direction:column}
}
@media (max-width:400px){
  .bar .btn-sm{padding:0 12px;font-size:.8125rem}
}

/* #########################################################################
   PARTIE 2 · COMPOSANTS AJOUTÉS POUR LES AUTRES PAGES
   Absents de la home, dessinés dans sa langue : mêmes jetons, mêmes filets,
   même marque d'encre de 48 × 3 px en tête de bloc, cobalt en trait de crayon,
   angles vifs sur les surfaces, 4 px sur les contrôles.
   ######################################################################### */

/* =========================================================================
   UTILITAIRES
   ========================================================================= */
/* Masqué à l'écran, lu par les lecteurs d'écran */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Feuille avec son rembourrage standard (formulaire, encadré posé sur la page) */
.sheet-pad{padding:clamp(22px,2.4vw,34px)}

/* =========================================================================
   LIENS ET BOUTONS · compléments
   ========================================================================= */
/* Lien dans le texte courant : encre, souligné d'un trait de crayon cobalt */
.u{color:inherit;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .2s ease}
@media (hover:hover) and (pointer:fine){.u:hover{text-decoration-thickness:2px}}
.dark .u{text-decoration-color:var(--signal-dark)}
.dark .lnk{color:var(--d-paper)}

/* Le bouton posé sur un <button> (formulaire) : on retire la bordure native */
button.btn{border:0;-webkit-appearance:none;appearance:none}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:default;pointer-events:none}

/* Bouton secondaire : filet d'encre, mêmes traits de coupe au survol (en encre) */
.btn-line{--cm:var(--ink);background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-line::before{background:var(--paper-2)}
.dark .btn-line{--cm:var(--d-paper);color:var(--d-paper);box-shadow:inset 0 0 0 1px var(--d-paper)}
.dark .btn-line::before{background:rgba(245,244,241,.08)}

/* Statut « à valider » : le pointillé des puces en attente du schéma */
.status.hold{color:var(--ink-2);border:1px dashed var(--ink-soft)}
.dark .statline{color:var(--d-soft)}

/* =========================================================================
   HERO DE PAGE INTÉRIEURE (plus bas que la home : N°, titre, chapô)
   <section class="phero"> … <p class="phero-num">, <h1 class="phero-t">,
   <div class="rule-mark">, <div class="grid phero-row"> (chapô, méta).
   ========================================================================= */
.phero{position:relative;padding:clamp(28px,3.4vw,46px) 0 clamp(40px,4.4vw,64px)}
.phero-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;color:var(--ink-soft)}
.phero-num .n{color:var(--signal)}
/* Trois paliers de titre, et trois seulement (R2 · S1), calculés à 1 440 px :
   .phero-t          107 px · titre court (une à deux lignes) · .wide lève la limite de 15 caractères
   .phero-t.mid       86 px · titre de deux à trois lignes (diagnostic, exemples)
   .phero-t.compact   75 px · documents et page-outil (le texte reste au-dessus de la ligne de flottaison) */
.phero-t{margin:clamp(14px,1.5vw,22px) 0 0 -.06em;max-width:15ch;font:600 clamp(2.75rem,7.4vw,6.75rem)/.92 var(--f-display);letter-spacing:-.048em;color:var(--ink);text-wrap:balance}
.phero-t.wide{max-width:none}
.phero-t.mid{max-width:none;font-size:clamp(2.5rem,5.6vw,5.35rem);line-height:.95}
.phero-t.compact{max-width:22ch;font-size:clamp(2.4rem,5.2vw,4.75rem);line-height:.96;letter-spacing:-.042em}
.phero-t .dot{color:var(--signal)}
/* Montée depuis un masque, comme le H1 de la home : un seul .ln autour de tout le titre,
   ou un .ln par ligne quand le titre validé se coupe en lignes (elles montent en cascade) */
.phero-t .ln{display:block;overflow:hidden;padding:0 .04em .1em;margin-bottom:-.1em}
.phero-t .ln>span{display:inline-block}
.phero .rule-mark{margin:clamp(24px,2.7vw,38px) 0 clamp(22px,2.4vw,32px)}
.phero-row{align-items:end;row-gap:18px}
.phero-lede{grid-column:1/span 7;font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.5;color:var(--ink-2);max-width:50ch;text-wrap:pretty}
/* Deux classes : une page la règle d'une seule ligne, sans redoubler le sélecteur (R2 · S3) */
.phero .phero-meta{grid-column:9/-1;justify-self:end;text-align:right;font:500 .875rem/1.5 var(--f-text);color:var(--ink-soft)}
.phero + .sec{padding-top:clamp(56px,6vw,96px)}
/* Dernière section sur papier avant le pied de page : elle garde un bas (la planche encre a déjà le sien) */
main > .sec:last-child:not(.dark){padding-bottom:var(--sec-pad)}
html.motion .phero:not(.in) .rule-mark::before{transform:scaleX(0)}
html.motion .phero .rule-mark::before{transition:transform .8s var(--ease-draw) .3s}
html.motion .phero:not(.in) .phero-t .ln>span{transform:translateY(104%)}
html.motion .phero .phero-t .ln>span{transition:transform 1s var(--ease-out) .05s}
html.motion .phero .phero-t .ln:nth-child(2)>span{transition-delay:.12s}
html.motion .phero .phero-t .ln:nth-child(3)>span{transition-delay:.19s}
/* Le fil de navigation a été retiré (R2 · E3) : le site n'a qu'un niveau, la navigation marque la page courante. */

/* =========================================================================
   FORMULAIRE
   Ordre dans un .field : libellé, aide, erreur, contrôle (l'erreur reste
   visible au-dessus du champ quand le clavier du téléphone s'ouvre).
   ========================================================================= */
.form{display:grid;row-gap:22px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:22px}
.field{position:relative;display:grid;row-gap:8px;min-width:0;align-content:start}
.field > label,.f-lbl{font:500 .9375rem/1.4 var(--f-text);color:var(--ink)}
.field label .opt,.f-opt{font-weight:400;color:var(--ink-soft)}
.f-help{margin-top:-2px;font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
.f-err{font:500 .875rem/1.45 var(--f-text);color:var(--err)}
.f-err:empty{display:none}
/* Sélecteur de base à faible poids (:where) : les états ci-dessous l'emportent sans surenchère */
.field :where(input:not([type="checkbox"],[type="radio"],[type="hidden"]),select,textarea){
  width:100%;min-height:50px;margin:0;padding:12px 14px;background-color:var(--field);border:1px solid var(--ctl-line);border-radius:var(--r-ctl);
  font:400 1rem/1.4 var(--f-text);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{min-height:132px;line-height:1.55;resize:vertical}
.field select{padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316181C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.field ::placeholder{color:var(--ink-soft);opacity:1}
@media (hover:hover) and (pointer:fine){
  .field :where(input:not([type="checkbox"],[type="radio"]),select,textarea):hover{border-color:var(--ink-soft)}
}
.field :where(input:not([type="checkbox"],[type="radio"]),select,textarea):focus{border-color:var(--ink)}
.field :where(input,select,textarea):focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:var(--r-ctl)}
.field :where(input,select,textarea):disabled{background-color:var(--paper-2);border-color:var(--rule-2);color:var(--ink-soft);cursor:not-allowed}
/* État d'erreur : classe .is-err sur le .field, ou aria-invalid="true" sur le contrôle */
.field.is-err,.field:has(> [aria-invalid="true"]){padding-left:15px;border-left:3px solid var(--err)}
.field.is-err :where(input,select,textarea),.field [aria-invalid="true"]{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}

/* Case à cocher : le libellé entier est cliquable, 44 px de haut au moins */
.check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;font-size:.9375rem;line-height:1.5;color:var(--ink-2);cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:1px 0 0;-webkit-appearance:none;appearance:none;background:var(--field) center/12px 9px no-repeat;border:1.5px solid var(--ink);border-radius:var(--r-ctl);cursor:pointer;transition:background-color .15s ease}
.check input:checked{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6l3.2 3.1L11 1' fill='none' stroke='%23F5F4F1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.check input:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.check input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}

/* Champ piège : hors écran, jamais display:none (contrat du diagnostic) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Messages de formulaire : succès (statut vert) et échec. Vides, ils disparaissent. */
.notice{display:block;padding:14px 16px 14px 18px;border-left:3px solid var(--ink);background:var(--sheet);font:500 .9375rem/1.5 var(--f-text);color:var(--ink)}
.notice:empty{display:none}
.notice.ok{border-left-color:var(--ok);background:var(--ok-wash)}
.notice.ok::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;background:var(--ok);vertical-align:.08em}
.notice.err{border-left-color:var(--err);background:var(--err-wash)}
.notice a{text-decoration:underline;text-underline-offset:3px}

/* =========================================================================
   TEXTE LONG (pages juridiques, vos données)
   <div class="wrap doc-layout"><nav class="toc">…</nav><article class="doc">…</article></div>
   Le texte juridique se reprend tel quel : seuls les nœuds sont habillés.
   ========================================================================= */
.doc-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start;padding-bottom:clamp(72px,8vw,120px)}
.doc-layout + .cta-band{margin-top:0}
.doc{grid-column:3/span 6;grid-row:1;min-width:0;max-width:var(--measure);font-size:1.0625rem;line-height:1.65;color:var(--ink-2)}
.doc > :first-child{margin-top:0}
.doc > :last-child{margin-bottom:0}
.doc p{margin:0 0 1em}
.doc .lead{margin-bottom:1.2em;font-size:clamp(1.125rem,1.4vw,1.3125rem);line-height:1.55;color:var(--ink)}
.doc strong{font-weight:600;color:var(--ink)}
.doc a:not([class]){color:inherit;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:1px;text-underline-offset:.22em}
@media (hover:hover) and (pointer:fine){.doc a:not([class]):hover{text-decoration-thickness:2px}}
/* Titres : filet et marque d'encre comme les têtes de section ; le numéro peut pendre dans la marge */
.doc h2{--fs:clamp(1.55rem,2.2vw,2rem);position:relative;margin:clamp(56px,6vw,84px) 0 18px;padding-top:22px;font:500 var(--fs)/1.12 var(--f-display);letter-spacing:-.026em;color:var(--ink);text-wrap:balance}
.doc h2::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.doc h2::after{content:"";position:absolute;left:0;top:-1px;width:48px;height:3px;background:var(--ink)}
.doc hr{position:relative;height:1px;margin:clamp(56px,6vw,84px) 0 0;border:0;background:var(--rule);overflow:visible}
.doc hr::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:3px;background:var(--ink)}
.doc hr + h2{margin-top:22px;padding-top:0}
.doc hr + h2::before,.doc hr + h2::after{content:none}
.doc h3{--fs:clamp(1.2rem,1.5vw,1.35rem);position:relative;margin:36px 0 12px;font:500 var(--fs)/1.2 var(--f-display);letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.doc h2 + h3{margin-top:22px}
.doc h4{margin:26px 0 8px;font:600 1rem/1.4 var(--f-text);color:var(--ink)}
.doc h2 .n,.doc h3 .n{display:block;margin-bottom:8px;font-family:var(--f-mono);font-weight:500;font-size:.75rem;line-height:1.35;letter-spacing:.06em;color:var(--signal)}
.doc h3 .n{color:var(--ink-soft)}
@media (min-width:1181px){
  .doc h2 .n,.doc h3 .n{position:absolute;right:calc(100% + var(--cg));top:calc(var(--fs) * .56 - 8px);margin:0;white-space:nowrap;text-align:right}
  .doc h2 .n{top:calc(22px + var(--fs) * .56 - 8px)}
  .doc hr + h2 .n{top:calc(var(--fs) * .56 - 8px)}
}
/* Listes : carré d'encre pour les puces, chiffres tabulaires pour les listes ordonnées */
.doc ul,.doc ol{margin:0 0 1.1em}
.doc li{position:relative;margin:.45em 0}
.doc ul > li{padding-left:1.3em}
.doc ul > li::before{content:"";position:absolute;left:.2em;top:calc(.825em - 2.5px);width:5px;height:5px;background:var(--ink-soft)}
.doc ol{counter-reset:li}
.doc ol > li{counter-increment:li;padding-left:2em}
.doc ol > li::before{content:counter(li) ".";position:absolute;left:0;top:0;font-weight:500;font-variant-numeric:tabular-nums lining-nums;color:var(--ink-soft)}
.doc li > ul,.doc li > ol{margin:.45em 0 0}
/* Liste de définitions : terme et définition côte à côte, un filet par ligne */
.doc dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);margin:24px 0 28px;border-top:1px solid var(--ink)}
.doc dt{grid-column:1;padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);font-weight:600;color:var(--ink)}
.doc dd{grid-column:2;margin:0;padding:14px 0;border-bottom:1px solid var(--rule)}
.doc code,.code{padding:.08em .38em;background:var(--paper-2);font-family:var(--f-mono);font-weight:500;font-size:.84em;letter-spacing:0;color:var(--ink)}
.doc img{max-width:100%;height:auto}
/* Une image dans un lien du texte repris (badge Prighter) reste en ligne : le <br> qui la suit n'ajoute pas de ligne vide */
.doc a > img{display:inline-block;vertical-align:bottom}
/* Un bouton au fil du texte (« Gérer les cookies » des CGU) a l'allure d'un lien .u */
button.u{margin:0;padding:0;background:none;border:0;cursor:pointer}
/* Date de mise à jour */
.updated,.doc-date{font:500 .875rem/1.5 var(--f-text);color:var(--ink-soft)}

/* Encadré de note (aussi appliqué aux <blockquote> du texte juridique) */
.note,.doc blockquote{position:relative;margin:28px 0 32px;padding:22px 26px 22px 24px;background:var(--sheet);border:1px solid var(--rule);font-size:1rem;line-height:1.6;color:var(--ink-2)}
.note::before,.doc blockquote::before{content:"";position:absolute;left:-1px;top:-1px;width:48px;height:3px;background:var(--ink)}
.note.key::before{background:var(--signal)}
.note > :last-child,.doc blockquote > :last-child{margin-bottom:0}
.note-t{display:block;margin-bottom:8px;font:500 .8125rem/1.35 var(--f-text);color:var(--ink-soft)}

/* Tableaux : double filet de grand livre en tête, défilement horizontal en mobile
   (ombre de bord visible seulement s'il reste du contenu à faire défiler) */
.tbl{--tbl-bg:var(--paper);margin:28px 0 32px;overflow-x:auto;overscroll-behavior-x:contain;
  background:
    linear-gradient(to right,var(--tbl-bg) 40%,transparent) left center/48px 100% no-repeat local,
    linear-gradient(to left,var(--tbl-bg) 40%,transparent) right center/48px 100% no-repeat local,
    linear-gradient(to right,rgba(22,24,28,.14),transparent) left center/14px 100% no-repeat scroll,
    linear-gradient(to left,rgba(22,24,28,.14),transparent) right center/14px 100% no-repeat scroll;
  background-color:var(--tbl-bg)}
.sheet .tbl{--tbl-bg:var(--sheet)}
.tbl:focus-visible{outline-offset:4px}
.tbl table,.doc table{width:100%;border-collapse:collapse;border-top:3px double var(--ink);font-size:.9375rem;line-height:1.5}
.tbl caption{caption-side:top;padding-bottom:10px;text-align:left;font:500 .8125rem/1.35 var(--f-text);color:var(--ink-soft)}
.tbl th,.doc th{min-width:8rem;padding:14px 18px 10px 0;border-bottom:1px solid var(--ink);text-align:left;vertical-align:bottom;font:500 .8125rem/1.35 var(--f-text);color:var(--ink-soft)}
.tbl td,.doc td{min-width:8rem;padding:13px 18px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.tbl td:first-child,.doc td:first-child{font-weight:500;color:var(--ink)}
.tbl tr > :last-child,.doc tr > :last-child{padding-right:0}
/* Au-delà du téléphone, 6rem par colonne : le tableau à 5 colonnes des cookies tient dans la mesure (8rem le faisait défiler pour 13 px) */
@media (min-width:761px){.doc .tbl th,.doc .tbl td{min-width:6rem}}
/* Un identifiant technique (nom de cookie) ne se coupe pas à son trait d'union */
.tbl code{white-space:nowrap}
/* Repli si un tableau n'a pas été enveloppé dans .tbl : il défile quand même */
.doc :not(.tbl) > table{display:block;overflow-x:auto}

/* Sommaire à ancres : rail à droite en grand écran, dépliant en tête du texte ailleurs.
   <nav class="toc" aria-label="Sommaire"><details open><summary class="toc-h">…</summary><ol class="toc-l">…</ol></details></nav> */
.toc{grid-column:10/-1;grid-row:1;align-self:start;position:sticky;top:calc(var(--bar-h) + 32px);max-height:calc(100vh - var(--bar-h) - 64px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px}
.toc summary{list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-bottom:10px;border-bottom:1px solid var(--ink);font:500 .8125rem/1.35 var(--f-text);color:var(--ink);cursor:default}
.toc-ic{display:none;position:relative;width:16px;height:16px;flex:none}
.toc-ic::before,.toc-ic::after{content:"";position:absolute;left:0;right:0;top:7.25px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease-out)}
.toc-ic::after{transform:rotate(90deg)}
.toc details[open] .toc-ic::after{transform:rotate(0deg)}
.toc-l{padding-top:6px}
.toc-l a{position:relative;display:flex;align-items:baseline;gap:10px;min-height:44px;padding:11px 4px 11px 16px;border-bottom:1px solid var(--rule-soft);font-size:.875rem;line-height:1.4;color:var(--ink-soft);transition:color .2s ease}
.toc-l a::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;background:var(--signal);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease-out)}
.toc-l a[aria-current="true"]{color:var(--ink)}
.toc-l a[aria-current="true"]::before{transform:scaleY(1)}
/* Colonne de numéros de largeur fixe (3 glyphes mono et leur interlettrage) : les titres restent alignés de 1. à 17. */
.toc-l .n{flex:none;min-width:calc(3ch + .12em);font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.04em;color:var(--ink-soft)}
.toc-l a[aria-current="true"] .n{color:var(--signal)}
@media (hover:hover) and (pointer:fine){.toc-l a:hover{color:var(--ink)}}

/* =========================================================================
   BANDE D'APPEL AU DIAGNOSTIC (planche encre, version compacte)
   Pour la version complète avec le bon « Votre plan », reprendre le bloc
   diagnostic (.sec.dark + .sh + .dg-body), déjà dans la partie 1.
   Page longue : une seule bande finale, avec chapô, signature et capacité
   (.cta-band-main > .h2 + .cta-band-lead + .who.sm, capacité dans la note).
   ========================================================================= */
.cta-band{margin-top:clamp(96px,10vw,150px);padding:clamp(64px,7vw,104px) 0 clamp(72px,7.4vw,112px)}
/* Le N° s'aligne sur la première ligne du titre, comme partout ; l'action se pose en bas (R2 · A1) */
.cta-band .sh{align-items:start}
.cta-band .h2{grid-column:3/span 6}
.cta-band-main{grid-column:3/span 6}
.cta-band-main .h2{grid-column:auto}
.cta-band-lead{margin-top:22px;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.55;color:var(--d-soft);max-width:48ch;text-wrap:pretty}
.cta-band-main .who{margin-top:36px}
.cta-band-act{grid-column:9/-1;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cta-band-note{font-size:.9375rem;line-height:1.45;color:var(--d-soft)}

/* =========================================================================
   PAGE D'ERREUR
   ========================================================================= */
.errpage{padding:clamp(28px,3.4vw,46px) 0 clamp(88px,9.4vw,140px)}
.err-code{margin:clamp(8px,1vw,16px) 0 0 -.045em;font:600 clamp(8rem,31vw,27rem)/.78 var(--f-display);letter-spacing:-.07em;font-variant-numeric:lining-nums;color:var(--ink)}
.errpage .rule-mark{margin:clamp(20px,2.4vw,34px) 0 clamp(24px,2.6vw,36px)}
.err-row{align-items:start;row-gap:20px}
.err-t{grid-column:1/span 5;font:500 clamp(2.05rem,3.85vw,3.45rem)/1.02 var(--f-display);letter-spacing:-.034em;color:var(--ink);text-wrap:balance}
.err-txt{grid-column:7/span 5;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.55;color:var(--ink-soft);max-width:44ch}
.err-txt .lnk{margin-top:14px}
/* Les deux sorties côte à côte, retour à la ligne si la place manque */
.err-act{display:flex;flex-wrap:wrap;column-gap:32px;margin-top:14px}
.err-txt .err-act .lnk{margin-top:0}

/* =========================================================================
   PIED DE PAGE · « Gérer les cookies », dernier de la colonne « Légal »
   Pages qui chargent le bandeau : <button class="ftr-cmp" data-cmp-open>, qui le rouvre.
   Pages sans bandeau (parcours sans traceur) : <a class="ftr-cmp" href="cookies.html#section-4">,
   qui mène aux réglages sans charger cmp.js. Même libellé, même place, même allure.
   ========================================================================= */
.ftr-cmp{display:block;width:100%;margin:0;padding:12px 0;background:none;border:0;font:inherit;line-height:1.4;color:inherit;text-align:left;cursor:pointer}
@media (hover:hover) and (pointer:fine){.ftr-cmp:hover{color:#fff}}

/* =========================================================================
   PONT · BANDEAU COOKIES (assets/cmp.css, inchangé)
   cmp.css lit --accent, --tx-*, --bg-raised, --rule-hard (définis plus haut
   dans :root). On ne touche qu'à la typographie et au contraste : le texte du
   bouton principal était sombre sur cobalt (2,3:1), il passe en blanc (7,3:1).
   Le préfixe html garantit la priorité quel que soit l'ordre des feuilles.
   ========================================================================= */
html .cmp-text,html .cmp-btn,html .cmp-link,html .cmp-row h4{font-family:var(--f-text)}
html .cmp-btn{min-height:44px;border-radius:var(--r-ctl);font-weight:600;font-size:.9375rem;letter-spacing:0;text-transform:none}
html .cmp-btn--primary,html .cmp-btn--primary:hover{color:#fff}
html .cmp-btn--primary:hover{filter:none;background:var(--signal-deep);border-color:var(--signal-deep)}
html .cmp-link{min-height:44px}

/* =========================================================================
   RESPONSIVE · composants ajoutés
   ========================================================================= */
@media (max-width:1180px){
  .doc-layout{display:block}
  .toc{position:static;max-height:none;overflow:visible;max-width:var(--measure);margin-bottom:var(--block-gap-s);padding-bottom:0}
  .toc-h{min-height:52px;padding:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);font-size:.9375rem;cursor:pointer}
  .toc details[open] .toc-h{border-bottom-color:var(--ink)}
  .toc-ic{display:block}
  .cta-band .h2,.cta-band-main{grid-column:1/span 8}
  .cta-band-main .h2{grid-column:auto}
}
@media (max-width:980px){
  .phero-lede{grid-column:1/span 11}
  .phero .phero-meta{grid-column:1/-1;justify-self:start;text-align:left}
  .cta-band .h2,.cta-band-main{grid-column:1/-1}
  .cta-band-main .h2{grid-column:auto}
  .cta-band-act{grid-column:1/-1;margin-top:20px}
  .err-t{grid-column:1/-1}
  .err-txt{grid-column:1/span 10}
}
@media (max-width:760px){
  .phero{padding-top:22px}
  .phero-t{margin-top:14px;font-size:clamp(2.4rem,11.4vw,3.6rem);line-height:.95;letter-spacing:-.045em}
  .phero-t.mid{font-size:clamp(2.3rem,10.4vw,3.4rem)}
  .phero-t.compact{font-size:clamp(2.1rem,9.4vw,3rem)}
  .phero-lede{grid-column:1/-1;font-size:1.0625rem}
  .sheet-pad{padding:22px 18px}
  .field-row{grid-template-columns:1fr}
  .doc{font-size:1rem}
  .doc dl{grid-template-columns:1fr}
  .doc dt{padding-bottom:2px;border-bottom:0}
  .doc dd{grid-column:1;padding-top:2px}
  .note,.doc blockquote{padding:20px 18px}
  .cta-band-act{align-items:stretch}
  .cta-band-act .btn{width:100%}
  .err-txt{grid-column:1/-1}
}

/* #########################################################################
   PARTIE 3 · COMPOSANTS PROMUS À LA PASSE R2 (01/10)
   Nés dans une page, utiles à plusieurs : ils remplacent leurs doublons
   locaux. Référence et balisage : _systeme.html, N° 17 à N° 25.
   ######################################################################### */

/* =========================================================================
   RÈGLE GRADUÉE (la méthode de la home) · .rule > .rule-ticks + .st
   Papier par défaut, encre sous .dark. Quatre étapes ; --n pour un autre nombre
   (style="--n:3"). La dernière étape est la restituée : cobalt.
   Contenu d'une étape : .st-n (étiquette) ou .st-v (grand chiffre), puis h3 ou
   .st-t (titre sans rôle de titre), puis <p> sans classe.
   Classes .st, .st-n… scopées sous .rule : une page peut garder un .st à elle.
   ========================================================================= */
.rule{margin-top:clamp(52px,6vw,88px);display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));column-gap:0;position:relative}
.rule-ticks{position:absolute;left:0;right:calc(-1 * var(--gut));top:0;height:9px;background:repeating-linear-gradient(to right,var(--rule-2) 0 1px,transparent 1px 100%);background-size:22px 100%;
  -webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
.rule .st{position:relative;padding:34px 28px 0 0}
.rule .st::before{content:"";position:absolute;left:0;top:-4px;width:1.5px;height:22px;background:var(--ink)}
.rule .st::after{content:"";position:absolute;left:0;right:0;top:9px;height:1.5px;background:var(--ink);transform-origin:left}
.rule .st:last-child::before{background:var(--signal)}
.rule .st:last-child::after{background:linear-gradient(to right,var(--signal) 55%,rgba(37,71,208,0));right:calc(-1 * var(--gut));height:2px}
.rule .st-n{display:flex;align-items:center;gap:10px;color:var(--ink-soft)}
.rule .st:last-child .st-n{color:var(--signal)}
.rule .st:last-child .st-n .live{width:6px;height:6px}
.rule .st-v{font:500 clamp(3.3rem,6vw,5.5rem)/.9 var(--f-display);letter-spacing:-.05em;color:var(--ink)}
.rule .st:last-child .st-v{font-weight:400;color:var(--signal)}
.rule .st h3,.rule .st-t{margin-top:16px;font:500 clamp(1.3rem,1.9vw,1.7rem)/1.12 var(--f-display);letter-spacing:-.024em;color:var(--ink);text-wrap:balance;max-width:14ch}
.rule .st-v + .st-t{margin-top:20px}
.rule .st > p:not([class]){margin-top:12px;font-size:1rem;line-height:1.55;color:var(--ink-soft);max-width:26ch;text-wrap:pretty}
html.motion .rule:not(.on) .st::after{transform:scaleX(0)}
html.motion .rule:not(.on) .rule-ticks{clip-path:inset(0 100% 0 0)}
html.motion .rule:not(.on) .st > *{opacity:0;transform:translateY(10px)}
html.motion .rule.on .rule-ticks{transition:clip-path 1.6s var(--ease-draw)}
html.motion .rule.on .st::after{transition:transform .5s var(--ease-draw) calc(var(--i) * .42s)}
html.motion .rule.on .st > *{transition:opacity .6s var(--ease-out) calc(var(--i) * .42s + .12s),transform .6s var(--ease-out) calc(var(--i) * .42s + .12s)}
/* Sur encre */
.dark .rule-ticks{background-image:repeating-linear-gradient(to right,rgba(245,244,241,.3) 0 1px,transparent 1px 100%)}
.dark .rule .st::before,.dark .rule .st::after{background:var(--d-paper)}
.dark .rule .st:last-child::before{background:var(--signal-dark)}
.dark .rule .st:last-child::after{background:linear-gradient(to right,var(--signal-dark) 55%,rgba(126,151,255,0))}
.dark .rule .st-n{color:var(--d-soft)}
.dark .rule .st:last-child .st-n{color:var(--signal-dark)}
.dark .rule .st-v{color:var(--d-paper)}
.dark .rule .st:last-child .st-v{color:var(--signal-dark)}
.dark .rule .st h3,.dark .rule .st-t{color:var(--d-paper)}
.dark .rule .st > p:not([class]){color:var(--d-soft)}

/* =========================================================================
   SIGNATURE D'UNE PERSONNE · .who
   Vignette carrée en niveaux de gris, nom, ligne facultative, adresse facultative.
   Papier par défaut, encre sous .dark ; 88 px, ou 52 px avec .sm.
   <div class="who"><img …><p><strong>Nom</strong><span class="who-l">Ligne</span><a href="mailto:…">adresse</a></p></div>
   ========================================================================= */
.who{display:flex;align-items:center;gap:16px;padding-top:22px;border-top:1px solid var(--rule)}
.who img{width:88px;height:88px;flex:none;object-fit:cover;object-position:50% 50%;filter:grayscale(1) contrast(1.04)}
.who p{line-height:1.35;color:var(--ink-soft)}
.who strong{display:block;font-weight:500;color:var(--ink)}
.who .who-l{display:block;margin-top:2px;font-size:.9375rem;line-height:1.4}
/* L'adresse : 42 px de boîte, cible portée à 46 px par une zone de toucher qui ne bouge pas la mise en page */
.who a{position:relative;display:inline-block;padding:10px 0 8px;border-bottom:1px solid var(--rule-2);color:var(--ink-2);transition:color .2s ease,border-color .2s ease}
.who a::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
@media (hover:hover) and (pointer:fine){.who a:hover{color:var(--ink);border-bottom-color:var(--signal)}}
.who.sm{gap:14px;padding-top:18px}
.who.sm img{width:52px;height:52px}
.dark .who{border-top-color:var(--d-rule)}
.dark .who p{color:var(--d-soft)}
.dark .who strong{color:var(--d-paper)}
.dark .who a{color:var(--d-soft);border-bottom-color:var(--d-rule)}
@media (hover:hover) and (pointer:fine){.dark .who a:hover{color:var(--d-paper);border-bottom-color:var(--d-rule)}}

/* =========================================================================
   HERO INTÉRIEUR À FIGURE · .phero-split > .ps-main + .ps-fig
   Le texte d'un côté, la figure (planche photo, bon, récépissé) de l'autre ;
   le titre se place au-dessus de la grille (à propos) ou dans .ps-main
   (diagnostic, merci). Colonnes par défaut 1 à 5 et 7 à 12 ; une page ne
   règle que ses colonnes. Sous 980 px, la figure passe sous le texte.
   ========================================================================= */
.phero-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);row-gap:40px;align-items:start}
.ps-main{grid-column:1/span 5;min-width:0}
.ps-fig{grid-column:7/-1;min-width:0;margin:0}

/* =========================================================================
   PLANCHE PHOTO · .plate (dans une figure) + figcaption .plate-cap
   Angle vif, niveaux de gris, traits de coupe, découverte une fois par clip-path.
   Cadrage (aspect-ratio, object-position) réglé par la page selon la photo.
   <figure><div class="plate"><span class="crop"></span><div class="ph"><img …></div></div><figcaption class="plate-cap">…</figcaption></figure>
   ========================================================================= */
.plate{position:relative}
.plate .ph{position:relative;overflow:hidden;background:var(--paper-2)}
.plate img{width:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.plate-cap{display:flex;justify-content:space-between;align-items:baseline;gap:6px 18px;flex-wrap:wrap;margin-top:14px;font-size:.875rem;line-height:1.45;color:var(--ink-soft)}
.plate-cap strong{color:var(--ink);font-weight:600}
html.motion .plate:not(.in) .ph{clip-path:inset(0 0 100% 0)}
html.motion .plate:not(.in) img{transform:scale(1.04)}
html.motion .plate .ph{transition:clip-path 1.1s var(--ease-draw) .35s}
html.motion .plate img{transition:transform 1.6s var(--ease-out) .35s}

/* =========================================================================
   BON · .bon.sheet : feuille à remplir ou récépissé
   Titre et référence sur un filet d'encre, talon détaché en pointillé.
   Famille du bon « Votre plan » (.plan), posé ici sur le papier.
   ========================================================================= */
.bon{padding:clamp(22px,2.3vw,34px)}
.bon-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.bon-t{font:500 clamp(1.45rem,1.9vw,1.75rem)/1.05 var(--f-display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.bon-ref{flex:none;color:var(--ink-soft)}
.bon-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:18px;padding-top:6px;border-top:1px dashed var(--rule-2);font-size:.875rem;line-height:1.45;color:var(--ink-soft)}
.bon-foot span{padding:8px 0}
.bon-foot .lnk{font-size:.875rem;color:var(--ink)}

/* =========================================================================
   CHIFFRES CLÉS EN GRAND · .figs.l (variante de .figs)
   Le relevé d'un calcul : double filet de grand livre en tête, valeurs plus
   grandes. Même balisage que .figs.
   ========================================================================= */
.figs.l{border-top:3px double var(--ink)}
.figs.l .fig{padding-top:20px}
.figs.l .v{font-size:clamp(2.5rem,4.4vw,4.2rem);line-height:.95;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* =========================================================================
   CHIFFRE EN VEDETTE · .vfig : un seul chiffre et sa légende (le chiffre de Velox)
   Une seule taille sur tout le site, celle de la fiche Velox de la home (N° 03).
   La page ne règle que la mise en page autour (filet, colonne, alignement).
   <div class="vfig"><p class="big num">~100<small>&#8239;h/mois</small></p><p>légende</p></div>
   ========================================================================= */
.vfig .big{font:500 clamp(2.9rem,4.6vw,4.1rem)/.9 var(--f-display);letter-spacing:-.05em;color:var(--ink);white-space:nowrap}
.vfig .big small{font-size:.42em;letter-spacing:-.02em;font-weight:500;margin-left:.08em}
/* Comme la home : la règle des <p> touche aussi le chiffre (marge de 10 px), le chiffre garde sa police et son encre */
.vfig p{margin-top:10px;font-size:.9375rem;line-height:1.45;color:var(--ink-soft);max-width:24ch}

/* =========================================================================
   STATUT VÉRIFIÉ · .status.ok.ck : une coche à la place du point animé
   <span class="status ok ck"><svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2.2 6.3l2.4 2.4 5-5.2"/></svg>Libellé</span>
   ========================================================================= */
.status.ck svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   MESSAGE REMPLI PAR SCRIPT : vide il ne prend aucune place, rempli il monte
   ========================================================================= */
html.motion .notice:not(:empty){animation:fadeUp .5s var(--ease-out) both}

/* =========================================================================
   SECTION DE RESPIRATION · .breath > .wrap > .breath-in
   Une phrase entre deux sections, sans N° : une seule par page au plus.
   Filet pleine largeur et marque d'encre de 48 px qui se trace, comme une
   tête de section ; le contenu se place librement (grille facultative).
   ========================================================================= */
.breath{padding-top:var(--sec-pad)}
.breath-in{position:relative;padding-top:clamp(20px,1.9vw,26px)}
.breath-in::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.breath-in::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:3px;background:var(--ink);transform-origin:left;z-index:1}
html.motion .breath-in::before{transform:scaleX(0);transition:transform .7s var(--ease-draw) .1s}
html.motion .breath-in.in::before{transform:scaleX(1)}

/* =========================================================================
   RESPONSIVE · composants promus
   ========================================================================= */
@media (max-width:980px){
  .phero-split{display:block}
  .ps-fig{margin-top:clamp(36px,6vw,56px);max-width:680px}
}
@media (max-width:760px){
  .rule{grid-template-columns:1fr;padding-left:34px}
  .rule-ticks{left:0;right:auto;top:0;bottom:calc(-1 * 60px);width:9px;height:auto;background:repeating-linear-gradient(to bottom,var(--rule-2) 0 1px,transparent 1px 100%);background-size:100% 18px;
    -webkit-mask-image:linear-gradient(to bottom,#000 85%,transparent);mask-image:linear-gradient(to bottom,#000 85%,transparent)}
  .rule .st{padding:0 0 36px 0}
  .rule .st::before{left:-34px;top:9px;width:22px;height:1.5px}
  .rule .st::after{left:-26px;right:auto;top:10px;bottom:-10px;width:1.5px;height:auto;transform-origin:top}
  .rule .st:last-child::after{right:auto;bottom:-60px;width:2px;height:auto;background:linear-gradient(to bottom,var(--signal) 45%,rgba(37,71,208,0))}
  .rule .st-v{font-size:3.4rem}
  .rule .st h3,.rule .st-t{margin-top:8px;max-width:none}
  .rule .st-v + .st-t{margin-top:12px}
  .rule .st > p:not([class]){max-width:none}
  html.motion .rule:not(.on) .st::after{transform:scaleY(0)}
  .dark .rule-ticks{background-image:repeating-linear-gradient(to bottom,rgba(245,244,241,.3) 0 1px,transparent 1px 100%)}
  .dark .rule .st:last-child::after{background:linear-gradient(to bottom,var(--signal-dark) 45%,rgba(126,151,255,0))}
  html.motion .rule:not(.on) .rule-ticks{clip-path:inset(0 0 100% 0)}
  .bon{padding:20px 18px}
  .bon-t{font-size:1.4rem}
  .bon-foot{flex-direction:column;align-items:flex-start;padding-top:8px}
  .bon-foot span{padding:6px 0 0}
  .figs.l .v{font-size:2.3rem}
}