/* ═══════════════════════════════════════════════════════════════════════════════
   MODÈLE DE DOCUMENT — campagnes inbound · v2 · 03/09/2026
   ═══════════════════════════════════════════════════════════════════════════════

   CE QUE CETTE COUCHE COÛTE : rien de plus qu'une feuille de style. Aucun
   littéral de balisage n'est touché, donc aucune clé de dictionnaire n'est
   cassée, donc les six langues restent traduites. Les `!important` ne
   combattent que les `style=` en ligne du balisage existant — même raison.

   CE QU'ELLE DÉCIDE (les six points du brief) :

   a. UN SEUL REGISTRE, UNE SEULE VARIABLE. Les deux documents passent en note
      de conseil. Leur différence n'est plus un oubli : c'est `--montant`, une
      variable unique. Le plan la pose à 1 (les montants se lisent de loin, en
      salle) ; le diagnostic la laisse à 0 (le texte se lit assis). Même papier,
      mêmes filets, même rythme — seule l'échelle des nombres change, et elle
      change parce que l'usage change.

   b. L'APEX. Le document ne peut pas OUVRIR sur le business réel : il peut
      manquer. Il peut en revanche CULMINER dessus. La phrase forte du document
      — `.premiere .l`, quelle qu'elle soit — reçoit le plus gros corps de la
      page après le titre, et c'est le seul endroit qui reçoit un balayage
      d'encre. Le lecteur qui feuillette voit la phrase avant les blocages,
      sans que l'ouverture en dépende.

   c. L'ÉCHELLE À TROIS CRANS se lit désormais comme une échelle : le filet
      court depuis le premier cran jusqu'au cran retenu. La POSITION informe,
      plus seulement la marque. Toujours du texte : imprimable sans fond.

   d. LA LONGUEUR. Trois gestes gratuits : le rythme vertical du registre note
      (déjà deux fois plus serré que les cartes), un rail de progression qui dit
      où l'on en est, et `content-visibility` pour que le téléphone ne peine pas.
      Replier vraiment des sections demande du balisage → sept fichiers, à
      arbitrer séparément.

   e. TÉLÉPHONE D'ABORD. Colonne 41rem, corps en `clamp()`, cibles ≥ 44px,
      « Imprimer » ancré au pouce sous 700px.

   f. L'ÉCRAN, PUIS LE PAPIER. L'imprimé n'imite pas l'écran : marges de page,
      filets qui restent, aucune animation, aucune ombre, sections insécables,
      pas de veuve. Les coordonnées du pied ne se coupent jamais.

   L'ANIMATION est une couche d'attention, pas un décor : elle ne bouge que ce
   qui vient d'entrer dans l'œil, une seule fois, et disparaît entièrement sous
   `prefers-reduced-motion` et à l'impression. Propriétés logiques uniquement —
   l'arabe n'a rien à retourner.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · Les deux réglages du modèle ─────────────────────────────────────── */
body.ay-v2{
  --montant:0;              /* 0 = document de lecture · 1 = document de salle */
  --col:41rem;              /* la colonne de lecture, une seule pour les deux  */
  --filet:rgba(31,39,51,.12);
  --apex:clamp(1.35rem,3.4vw,1.75rem);
  --duree:.5s;
  --courbe:cubic-bezier(.2,.7,.3,1);
}
body.ay-v2.salle{--montant:1}

body.ay-v2 .tn-col{width:min(var(--col),calc(100% - 40px))}

/* ── 1 · LE REGISTRE — note de conseil, pour les deux documents ──────────── */
body.ay-v2 .oeil{color:var(--ink-faint);font-size:.72rem;letter-spacing:.1em}
body.ay-v2 .ecran h1{font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.035em;text-wrap:balance}
body.ay-v2 .ecran h2{
  font-size:1.25rem!important;margin-top:44px!important;padding-top:18px;
  border-top:1px solid var(--filet);letter-spacing:-.02em}
body.ay-v2 .chapo{font-size:1rem;line-height:1.6;max-width:none}
body.ay-v2 .aide{font-size:.95rem;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}

/* Le point de départ : une phrase en marge, plus une bannière teal. */
body.ay-v2 .plan-cap{
  background:none;border:none;border-radius:0;padding:4px 0;margin-top:26px;
  border-inline-start:3px solid var(--coral);padding-inline-start:18px}
body.ay-v2 .plan-cap .etiq{color:var(--ink-faint)}
body.ay-v2 .plan-cap .manque{color:var(--ink-soft)}

/* Les rangs (blocages, leviers) : un filet fin, des lignes serrées. */
body.ay-v2 .levier{margin-top:34px}
body.ay-v2 .levier-t{
  position:relative;color:var(--ink-faint);letter-spacing:.1em;font-size:.7rem;
  border-bottom:1px solid var(--filet)}
body.ay-v2 .levier-t .vaut{color:var(--ink-soft)}
body.ay-v2 .action{padding:8px 0;border-bottom:none;gap:12px}
body.ay-v2 .action-n{color:var(--coral)}
body.ay-v2 .action-l{font-weight:500;text-wrap:pretty}

/* Les personas, le récapitulatif : des paragraphes titrés, pas des cartes. */
body.ay-v2 .carte{
  background:none;border:none;border-radius:0;box-shadow:none;padding:0;margin-top:18px!important}
body.ay-v2 .carte-titre{font-size:1rem}
body.ay-v2 table.recap{margin-top:6px;font-size:.95rem}
body.ay-v2 table.recap td{padding:5px 0;border-bottom:none}
body.ay-v2 table.recap td:first-child{width:auto;color:var(--ink-faint);padding-inline-end:16px}
/* Le montant ne se coupe jamais — mais SEULEMENT quand la colonne porte un montant.
   Dans le diagnostic, cette même colonne porte les clients-types : de la prose, qui
   doit garder toute la largeur. La variable `.salle` décide, comme partout ailleurs. */
body.ay-v2.salle table.recap td:last-child{inline-size:1%;white-space:nowrap}
body.ay-v2.salle .tableau-large{overflow:visible}

/* Le carré de forces : quatre paragraphes à la suite, pas quatre cases. */
body.ay-v2 .controles{display:block!important;margin-top:8px}
body.ay-v2 .controle{
  background:none;border:none;border-radius:0;padding:10px 0;
  border-bottom:1px solid rgba(31,39,51,.06)}
body.ay-v2 .controle:last-child{border-bottom:none}
body.ay-v2 .controle .q{display:block;color:var(--plum-deep);font-size:.72rem}
body.ay-v2 .controle .d{display:block}
body.ay-v2 .controle .c{display:block}
body.ay-v2 .controle ul{font-size:.95rem!important;color:var(--ink-soft)!important;margin-top:4px!important}

/* Les notes : un filet, pas un panneau. */
body.ay-v2 .note{
  background:none;border:none;border-radius:0;padding:4px 0;font-size:.95rem;line-height:1.6;
  border-inline-start:3px solid rgba(64,29,69,.18);padding-inline-start:16px}
body.ay-v2 .note.marque{border-inline-start-color:var(--coral)}

/* Les limites : une section comme les autres, plus un pavé sombre en clôture. */
body.ay-v2 .limites{
  background:none;border-radius:0;box-shadow:none;padding:18px 0 0;margin-top:44px;
  border-top:1px solid var(--filet)}
body.ay-v2 .limites h3{color:var(--plum-deep);font-size:1.25rem}
body.ay-v2 .limites p,body.ay-v2 .limites ul{color:var(--ink-soft)}
body.ay-v2 .limites ul{font-size:.95rem}
body.ay-v2 .limites li::marker{color:var(--coral)}

/* ── 2 · L'APEX — la phrase forte du document (point b) ──────────────────── */
body.ay-v2 .premiere{
  background:none;border:none;border-radius:0;box-shadow:none;
  padding:2px 0;margin-top:30px!important;
  border-inline-start:3px solid var(--coral);padding-inline-start:18px}
body.ay-v2 .premiere .etiq{color:var(--ink-faint)}
body.ay-v2 .premiere .l{
  font-size:var(--apex);font-weight:600;line-height:1.28;letter-spacing:-.02em;text-wrap:pretty}

/* ── 3 · LES MONTANTS — la seule variable entre les deux documents (point a) */
body.ay-v2 .plan-cap .gros{
  font-size:calc(1.35rem + var(--montant) * .95rem);
  line-height:1.16;letter-spacing:-.035em;text-wrap:balance}
body.ay-v2 .scenar-ca,body.ay-v2 .grand-nombre{letter-spacing:-.03em}
body.ay-v2 .levier-t .vaut{font-size:calc(.82rem + var(--montant) * .06rem)}
body.ay-v2 table.recap td:last-child{
  font-weight:calc(500 + var(--montant) * 200);
  font-size:calc(.95rem + var(--montant) * .08rem)}
/* Le diagnostic : les valeurs du récapitulatif sont du texte, alignées au texte. */
body.ay-v2:not(.salle) table.recap td:last-child{
  text-align:start!important;white-space:normal!important;inline-size:auto!important;
  font-weight:500!important;line-height:1.5}
body.ay-v2:not(.salle) table.recap td:first-child{width:9.5em;vertical-align:baseline}

/* ── 4 · L'ÉCHELLE À TROIS CRANS (point c) ───────────────────────────────── */
/* Avant : trois mots dont un souligné — on lisait la MARQUE, pas l'échelle.
   Maintenant : les trois crans reposent sur un axe continu, et le cran retenu
   en épaissit le segment. La POSITION informe. Tout est en encre : l'imprimé
   garde l'axe même sans fond coloré. */
body.ay-v2 .impact{
  position:relative;display:flex;flex-wrap:nowrap;gap:0;margin-top:12px;padding-bottom:9px;
  font-size:clamp(.86rem,2.6vw,.95rem);color:rgba(31,39,51,.42)}
body.ay-v2 .impact::after{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;block-size:1px;
  background:var(--filet)}
body.ay-v2 .impact-n{
  position:relative;flex:1 1 0;min-width:0;padding-bottom:9px;border-bottom:none;
  white-space:nowrap;padding-inline-end:14px}
body.ay-v2 .impact-n:last-child{padding-inline-end:0}
/* ⚠⚠ ADAPTATION À L'INTÉGRATION (03/09) — LA JAUGE NE SUIT PAS LE DOIGT.
   La feuille livrée accrochait le point ET le segment épaissi à `.actif`. Elle a été
   dessinée sur un document où `.actif` voulait dire « le niveau retenu ». Depuis, l'échelle
   se touche, et les deux sens ont été séparés dans le balisage :
     · `.retenu` = ce que le serveur conclut. C'est un FAIT : il ne bouge jamais.
     · `.actif`  = ce que le lecteur regarde. C'est un état d'écran : il suit le doigt.
   Laisser la jauge sur `.actif` ferait glisser le verdict à chaque exploration — le document
   dirait que le niveau a changé parce qu'on a lu un autre cran. Le segment et le point
   restent donc sur `.retenu` ; le cran LU se signale par l'encre du texte seule. */
body.ay-v2 .impact-n.retenu{color:var(--plum-deep);font-weight:700}
body.ay-v2 .impact-n.actif:not(.retenu){color:var(--ink-soft);font-weight:600}
body.ay-v2 .impact-n.retenu::before{
  content:"●";color:var(--coral);font-size:.7em;margin-inline-end:7px;vertical-align:middle}
body.ay-v2 .impact-n.retenu::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;inline-size:100%;
  block-size:2px;background:var(--coral);transform-origin:left center;z-index:1}
/* Le cran LU, quand ce n'est pas le retenu : un filet fin, qui ne peut pas se confondre
   avec le segment de la jauge — un pixel contre deux, l'encre du texte contre le corail. */
body.ay-v2 .impact-n.actif:not(.retenu)::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;inline-size:100%;
  block-size:1px;background:var(--ink-faint);z-index:1}
[dir="rtl"] body.ay-v2 .impact-n.retenu::after{transform-origin:right center}

/* ── 5 · LE RAIL DE PROGRESSION (point d) ────────────────────────────────── */
body.ay-v2::before{
  content:"";position:fixed;inset-block-start:0;inset-inline-start:0;z-index:60;
  block-size:2px;inline-size:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--coral),var(--gold));pointer-events:none}
[dir="rtl"] body.ay-v2::before{transform-origin:right center}

/* ESSAYÉ PUIS RETIRÉ — `content-visibility:auto` sur les sections basses.
   Le gain de calcul est réel, mais sur un document de 5 000 px le navigateur
   remesure en cours de défilement : le texte se décale sous le pouce pendant
   qu'on lit. Sur téléphone, du contenu qui bouge coûte plus cher qu'un
   millième de seconde de calcul. La longueur (point d) se traite par le
   rythme et par le rail, pas par un artifice de rendu. */

/* ── 6 · TÉLÉPHONE (point e) ─────────────────────────────────────────────── */
@media (max-width:700px){
  /* ⚠ ADAPTATION À L'INTÉGRATION (03/09) — LES CRANS SE TOUCHENT DU POUCE.
     L'échelle est devenue cliquable après la remise de cette feuille : ses trois crans
     faisaient 20 px de haut, mesurés à 390 px de large, quand la liste de vérification du
     designer exige 44. Le rembourrage grandit vers le HAUT : l'axe, le segment du cran
     retenu et le filet du cran lu sont tous posés sur le bord bas, ils restent donc
     alignés entre eux et sur la ligne de l'axe. */
  body.ay-v2 .impact-n{padding-block:15px 9px}
  body.ay-v2 .tn-col{width:calc(100% - 32px)}
  body.ay-v2 .ecran h2{margin-top:34px!important}
  body.ay-v2 .action{padding:10px 0}
  body.ay-v2 .bouton,body.ay-v2 .lien{min-height:44px}
  /* « Imprimer » descend sous le pouce et ne quitte plus l'écran. */
  body.ay-v2 .pied-actions{
    position:sticky;inset-block-end:0;z-index:50;margin-top:34px;
    padding:12px 0 calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(248,242,235,0),rgba(248,242,235,.96) 38%);
    backdrop-filter:blur(10px)}
}

/* ── 7 · L'ANIMATION — une couche d'attention ────────────────────────────── */
/* Entrée du document : les premiers blocs montent une fois, en cascade. */
@keyframes ayMonte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ayFilet{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ayEncre{
  0%{background-position:120% 0}
  100%{background-position:-20% 0}}
@keyframes ayPose{
  0%{opacity:0;transform:translateY(6px) scale(.985);filter:blur(3px)}
  100%{opacity:1;transform:none;filter:blur(0)}}

body.ay-v2 .ecran{animation:none}
body.ay-v2 .ecran>*{animation:ayMonte var(--duree) var(--courbe) both}
body.ay-v2 .ecran>:nth-child(1){animation-delay:.02s}
body.ay-v2 .ecran>:nth-child(2){animation-delay:.08s}
body.ay-v2 .ecran>:nth-child(3){animation-delay:.14s}
body.ay-v2 .ecran>:nth-child(4){animation-delay:.20s}
body.ay-v2 .ecran>:nth-child(5){animation-delay:.26s}
body.ay-v2 .ecran>:nth-child(6){animation-delay:.32s}
body.ay-v2 .ecran>:nth-child(n+7){animation-delay:.36s}

/* Le montant se pose : il ne compte pas, il ne clignote pas — il s'installe. */
body.ay-v2 .plan-cap .gros,body.ay-v2 .grand-nombre{
  animation:ayPose .7s var(--courbe) .34s both}

/* Les filets se tracent depuis le début de ligne. */
body.ay-v2 .levier-t::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline-start:0;inline-size:100%;
  block-size:1px;background:var(--coral);transform-origin:left center;
  animation:ayFilet .55s var(--courbe) .2s both}
[dir="rtl"] body.ay-v2 .levier-t::after{transform-origin:right center}
body.ay-v2 .impact-n.retenu::after{animation:ayFilet .6s var(--courbe) .3s both}

/* ⚠⚠ ADAPTATION À L'INTÉGRATION (03/09) — UN SEUL APEX, ET C'EST LE BUSINESS RÉEL.
   La liste de vérification du designer le dit : « un seul balayage d'encre dans tout le
   document ; si vous en voyez deux, un `.premiere` de trop est rendu ». Le diagnostic en
   rend deux — le business réel, puis la promesse — et ils partagent la même classe. Le
   second est donc RÉTROGRADÉ ici, sans toucher au balisage : il garde son bord corail et
   son étiquette, il perd le corps d'apex et le balayage. L'ordre porte le sens — la
   promesse DÉCOULE du business réel, elle ne le concurrence pas.
   `~` ne vise que des frères : les deux blocs sont écrits dans le même conteneur. */
body.ay-v2 .premiere~.premiere .l{
  font-size:1.12rem!important;line-height:1.4;font-weight:700;
  background:none!important;-webkit-text-fill-color:currentColor!important;
  color:var(--plum-deep)!important;animation:none!important}
body.ay-v2 .premiere~.premiere{padding-block:16px}

/* L'apex reçoit un seul balayage d'encre — le seul de tout le document. */
body.ay-v2 .premiere .l{
  background:linear-gradient(100deg,
    var(--plum-deep) 0 34%, var(--coral) 46%, var(--plum-deep) 58% 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ayEncre 1.5s var(--courbe) .5s both}

/* Ce qui arrive plus bas ne bouge qu'en entrant dans l'œil — là où c'est reconnu. */
@supports (animation-timeline:view()){
  body.ay-v2 .ecran>:nth-child(n+7){
    animation:ayMonte .6s var(--courbe) both;animation-delay:0s;
    animation-timeline:view();animation-range:entry 5% entry 55%}
  body.ay-v2 .action{
    animation:ayMonte .5s var(--courbe) both;
    animation-timeline:view();animation-range:entry 0% entry 42%}
  body.ay-v2::before{
    animation:ayFilet 1s linear both;animation-timeline:scroll(root)}
}
/* Sans scroll-timeline (iOS anciens) : le rail se remplit une fois, à l'ouverture. */
@supports not (animation-timeline:view()){
  body.ay-v2::before{animation:ayFilet 1.1s var(--courbe) .1s both}
}

/* Le survol reste un accusé de réception, jamais un effet. */
body.ay-v2 .bouton{transition:transform .2s var(--courbe),box-shadow .2s var(--courbe)}
body.ay-v2 .bouton:active{transform:translateY(0) scale(.985)}

/* ── 8 · CE QUI NE BOUGE PAS ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  body.ay-v2 .ecran>*,body.ay-v2 .action,body.ay-v2 .plan-cap .gros,
  body.ay-v2 .grand-nombre,body.ay-v2 .levier-t::after,
  body.ay-v2 .impact-n.retenu::after,body.ay-v2::before{animation:none!important;opacity:1;transform:none}
  body.ay-v2 .premiere .l{
    animation:none!important;-webkit-text-fill-color:var(--plum-deep);color:var(--plum-deep);
    background:none}
  body.ay-v2::before{transform:scaleX(1)}
}

/* ── 9 · LE PAPIER — une mise en page à lui (point f) ────────────────────── */
@media print{
  @page{margin:16mm 14mm 18mm}
  body.ay-v2{background:#fff!important}
  body.ay-v2::before{display:none}
  body.ay-v2 .ecran>*,body.ay-v2 .action,body.ay-v2 .plan-cap .gros,
  body.ay-v2 .levier-t::after,body.ay-v2 .impact-n.retenu::after{animation:none!important;opacity:1;transform:none}
  body.ay-v2 .premiere .l{
    animation:none!important;-webkit-text-fill-color:var(--plum-deep);color:var(--plum-deep);background:none}
  body.ay-v2 .tn-col{width:auto;max-width:none}
  body.ay-v2 .pied-actions{display:none!important}
  /* Le document circule : rien ne se coupe au mauvais endroit. */
  body.ay-v2 .ecran h1,body.ay-v2 .ecran h2,body.ay-v2 .levier-t,
  body.ay-v2 .carte-titre,body.ay-v2 .limites h3{break-after:avoid}
  body.ay-v2 .premiere,body.ay-v2 .plan-cap,body.ay-v2 .controle,
  body.ay-v2 .action,body.ay-v2 table.recap tr{break-inside:avoid}
  body.ay-v2 .tn-pied{break-inside:avoid;margin-top:24pt;padding-top:10pt}
  body.ay-v2 p,body.ay-v2 li{orphans:2;widows:2}
  /* L'échelle et les filets survivent sans fond coloré : ils sont en encre. */
  body.ay-v2 .impact-n.retenu::after{background:#000}
}


/* ═══════════════════════════════════════════════════════════════════════════════
   VARIANTE « GRAPHIQUE » — body.ay-v2.graphique
   ═══════════════════════════════════════════════════════════════════════════════
   Le fondateur, 02/09 : « trop comme un document PowerPoint ». Vous, 03/09 :
   « on dirait un Word mis en forme ». Les deux remarques disent la même chose
   par les deux bouts : PowerPoint DÉCORAIT LES CONTENANTS, Word NE DIFFÉRENCIE
   RIEN. Ce n'est pas un curseur entre les deux — c'est un troisième principe :

        LA DONNÉE DEVIENT LE GRAPHISME. Pas la boîte.

   Aucune bannière ne revient, aucune ombre, aucune carte. Ce qui devient
   graphique, c'est ce qui porte de l'information : les nombres prennent le
   corps d'affichage, les neuf actions se posent sur un rail daté, les sections
   se numérotent en marge, les notes passent en marginalia, l'écart au cap se
   mesure sur une règle. Tout est en encre : l'imprimé garde chaque graphique.

   TROIS GRAPHIQUES ONT BESOIN DE LEUR VALEUR. Ils la lisent dans une propriété
   personnalisée, pas dans le balisage : `--part` (part du cap déjà atteinte) et
   `--vaut` (poids d'un levier dans l'écart). Une ligne dans rendre(), zéro
   fichier de traduction. Sans la valeur, le graphique NE S'AFFICHE PAS — un
   document ne dessine pas une barre qu'il ne sait pas mesurer.
   ═══════════════════════════════════════════════════════════════════════════ */

body.ay-v2.graphique{--part:0;--vaut:0}

/* ── 1 · Le bloc de titre : une manchette, plus un paragraphe ────────────── */
body.ay-v2.graphique .oeil{
  display:inline-block;padding-bottom:7px;margin-bottom:16px;
  border-bottom:2px solid var(--coral);color:var(--plum-deep);font-size:.7rem;letter-spacing:.12em}
body.ay-v2.graphique .ecran h1{font-size:clamp(2.1rem,4.6vw,3rem);letter-spacing:-.045em}
body.ay-v2.graphique .chapo{
  font-family:'Poppins',sans-serif;font-size:1.02rem;font-weight:600;color:var(--plum);
  letter-spacing:-.01em;margin-top:10px}

/* ── 2 · Les sections se numérotent, gros, en marge ──────────────────────── */
body.ay-v2.graphique .ecran{counter-reset:sec}
body.ay-v2.graphique .ecran h2{
  position:relative;counter-increment:sec;border-top:2px solid var(--plum-deep);
  padding-top:14px;font-size:1.3rem!important}
body.ay-v2.graphique .ecran h2::before{
  content:counter(sec,decimal-leading-zero);
  font-family:'Poppins',sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.06em;
  color:var(--coral);display:block;margin-bottom:5px}

/* ── 3 · L'écart au cap se mesure sur une règle (lit --part) ─────────────── */
body.ay-v2.graphique .plan-cap{
  border-inline-start:none;padding-inline-start:0;padding-top:0;margin-top:30px}
body.ay-v2.graphique .plan-cap .etiq{color:var(--plum-deep)}
body.ay-v2.graphique .plan-cap .gros{
  font-size:calc(1.5rem + var(--montant) * 1.1rem);letter-spacing:-.04em}
body.ay-v2.graphique .plan-cap::after{
  content:"";display:block;margin-top:16px;block-size:10px;
  background:
    linear-gradient(to right, var(--plum-deep) 0 calc(var(--part) * 100%),
                              transparent calc(var(--part) * 100%)),
    repeating-linear-gradient(135deg, rgba(240,110,79,.55) 0 3px, transparent 3px 7px);
  border:1px solid var(--plum-deep);
  opacity:min(1, calc(var(--part) * 999))}
body.ay-v2.graphique .plan-cap .manque{
  display:flex;justify-content:space-between;gap:14px;margin-top:7px;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
[dir="rtl"] body.ay-v2.graphique .plan-cap::after{
  background:
    linear-gradient(to left, var(--plum-deep) 0 calc(var(--part) * 100%),
                             transparent calc(var(--part) * 100%)),
    repeating-linear-gradient(45deg, rgba(240,110,79,.55) 0 3px, transparent 3px 7px)}

/* ── 4 · Les trois nombres prennent le corps d'affichage ─────────────────── */
body.ay-v2.graphique table.recap td:first-child{
  font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);vertical-align:middle}
body.ay-v2.graphique.salle table.recap td{padding:9px 0;border-bottom:1px solid rgba(31,39,51,.06)}
body.ay-v2.graphique.salle table.recap td:last-child{
  font-family:'Poppins',sans-serif;font-size:1.55rem;font-weight:800;letter-spacing:-.035em;
  color:var(--plum-deep);line-height:1.1}
body.ay-v2.graphique.salle table.recap tr:last-child td{
  border-bottom:none;border-top:2px solid var(--plum-deep);padding-top:11px}
body.ay-v2.graphique.salle table.recap tr:last-child td:last-child{color:var(--coral)}

/* ── 5 · Les neuf actions se posent sur un rail daté ─────────────────────── */
body.ay-v2.graphique .levier{position:relative;margin-top:38px}
body.ay-v2.graphique .levier-t{
  border-bottom:none;color:var(--plum-deep);font-size:.72rem;letter-spacing:.11em}
body.ay-v2.graphique .levier-t .vaut{position:relative;color:var(--ink-soft)}
/* Le poids du levier dans l'écart, sous sa valeur (lit --vaut). */
body.ay-v2.graphique .levier-t .vaut::after{
  content:"";position:absolute;inset-block-end:-6px;inset-inline-end:0;
  block-size:3px;inline-size:calc(var(--vaut) * 100%);min-inline-size:2px;
  background:var(--coral);opacity:min(1, calc(var(--vaut) * 999))}
/* Le rail : une verticale continue, des pastilles numérotées dessus. */
body.ay-v2.graphique .levier::before{
  content:"";position:absolute;inset-block:2.6rem 1.1rem;inset-inline-start:.68rem;
  inline-size:1px;background:var(--filet)}
body.ay-v2.graphique .action{
  position:relative;align-items:flex-start;gap:0;padding:11px 0 11px 0;
  padding-inline-start:2.5rem}
body.ay-v2.graphique .action-n{
  position:absolute;inset-inline-start:0;inset-block-start:.62rem;
  inline-size:1.38rem;block-size:1.38rem;padding:0;
  display:grid;place-items:center;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--coral);color:var(--coral);
  font-size:.68rem;font-weight:800}
body.ay-v2.graphique .action-l{font-weight:500;font-size:1rem}
body.ay-v2.graphique .action-m{
  margin-top:6px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  gap:4px 12px}

/* ── 6 · L'apex : la seule phrase à pleine encre du document ─────────────── */
body.ay-v2.graphique .premiere{
  border-inline-start:none;padding-inline-start:0;
  border-top:2px solid var(--coral);border-bottom:1px solid var(--filet);
  padding-block:14px 16px;margin-top:34px!important}
body.ay-v2.graphique .premiere .etiq{color:var(--coral)}
body.ay-v2.graphique .premiere .l{font-size:calc(var(--apex) + .12rem);line-height:1.24}

/* ── 7 · L'échelle : un axe gradué ───────────────────────────────────────── */
/* Les graduations : tous les crans SAUF le retenu (qui porte le segment de la jauge) et
   sauf celui qu'on lit (qui porte son propre filet). */
body.ay-v2.graphique .impact-n:not(.retenu):not(.actif)::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  inline-size:1px;block-size:6px;background:var(--ink-faint)}
body.ay-v2.graphique .impact-n.retenu::before{
  content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--coral);
  display:inline-block;margin-inline-end:8px;vertical-align:baseline}

/* ── 8 · Le carré de forces redevient un carré ───────────────────────────── */
body.ay-v2.graphique .controles{
  display:grid!important;grid-template-columns:1fr 1fr;gap:0;margin-top:14px;
  border:1px solid var(--filet)}
body.ay-v2.graphique .controle{
  padding:15px 16px;border-bottom:1px solid var(--filet);border-inline-end:1px solid var(--filet)}
body.ay-v2.graphique .controle:nth-child(2n){border-inline-end:none}
body.ay-v2.graphique .controle:nth-last-child(-n+2){border-bottom:none}
body.ay-v2.graphique .controle .q{
  color:var(--coral);font-size:.68rem;letter-spacing:.09em;margin-bottom:3px}
@media (max-width:560px){
  body.ay-v2.graphique .controles{grid-template-columns:1fr}
  body.ay-v2.graphique .controle{border-inline-end:none}
  body.ay-v2.graphique .controle:nth-last-child(2){border-bottom:1px solid var(--filet)}
}

/* ── 9 · Les notes passent en marginalia, là où il y a la place ──────────── */
@media (min-width:1180px){
  body.ay-v2.graphique{--col:58rem}
  body.ay-v2.graphique .note,body.ay-v2.graphique .aide{
    float:inline-end;inline-size:15rem;margin:6px 0 18px;margin-inline-start:34px;
    padding:0;padding-inline-start:14px;font-size:.85rem;line-height:1.55;
    border-inline-start:1px solid var(--filet);background:none;clear:inline-end}
  body.ay-v2.graphique .ecran h1,body.ay-v2.graphique .ecran h2,
  body.ay-v2.graphique .premiere,body.ay-v2.graphique .plan-cap,
  body.ay-v2.graphique .controles,body.ay-v2.graphique .limites{clear:both}
  body.ay-v2.graphique .ecran h2::before{
    position:absolute;inset-inline-start:-3.4rem;inset-block-start:16px;
    font-size:1.6rem;color:rgba(64,29,69,.16);margin:0}
  body.ay-v2.graphique .ecran h2{padding-inline-start:0}
  body.ay-v2.graphique .action-l,body.ay-v2.graphique .chapo,
  body.ay-v2.graphique .premiere .l{max-width:38rem}
}

/* ── 10 · L'animation de la variante : ce qui se mesure, se remplit ──────── */
@keyframes ayRegle{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ayPastille{
  from{opacity:0;transform:scale(.4)}
  to{opacity:1;transform:none}}
body.ay-v2.graphique .plan-cap::after{animation:ayRegle .9s var(--courbe) .45s both}
body.ay-v2.graphique .levier-t .vaut::after{animation:ayRegle .7s var(--courbe) .5s both}
body.ay-v2.graphique .action-n{animation:ayPastille .4s var(--courbe) both}
[dir="rtl"] body.ay-v2.graphique .plan-cap::after,
[dir="rtl"] body.ay-v2.graphique .levier-t .vaut::after{
  animation-name:ayRegleRtl}
@keyframes ayRegleRtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}

@supports (animation-timeline:view()){
  body.ay-v2.graphique .action-n{
    animation:ayPastille .45s var(--courbe) both;
    animation-timeline:view();animation-range:entry 0% entry 40%}
}
@media (prefers-reduced-motion:reduce){
  body.ay-v2.graphique .plan-cap::after,body.ay-v2.graphique .levier-t .vaut::after,
  body.ay-v2.graphique .action-n{animation:none!important;clip-path:none;opacity:1;transform:none}
  body.ay-v2.graphique .plan-cap::after{opacity:min(1, calc(var(--part) * 999))}
}
@media print{
  body.ay-v2.graphique .plan-cap::after,body.ay-v2.graphique .levier-t .vaut::after,
  body.ay-v2.graphique .action-n{animation:none!important;clip-path:none;transform:none}
  body.ay-v2.graphique .note,body.ay-v2.graphique .aide{float:none;inline-size:auto;margin-inline-start:0}
  body.ay-v2.graphique .controles,body.ay-v2.graphique .controle{break-inside:avoid}
  body.ay-v2.graphique .action-n{background:#fff}
}