/* ══════════════════════════════════════════════════════════════════════════════
   PLATEFORME — la couche visuelle partagée des 30 outils.            07/08/2026

   ⭐ POURQUOI UN SEUL FICHIER, ET PAS 30 FEUILLES RETOUCHÉES
   Les 30 outils ont chacun leur CSS sur mesure (5 à 18 Ko, un préfixe commun
   d'UN caractère). Les retoucher un par un aurait coûté 30 modifications par
   itération — et la troisième aurait divergé. Ici, un retour de Tobias sur le
   visuel se corrige à UN endroit, et les 30 changent.
   C'est la règle 2 du produit appliquée au CSS : une information vit à un seul
   endroit, les autres y pointent.

   ⚠️ CE FICHIER SE CHARGE **APRÈS** LE `<style>` DE CHAQUE OUTIL, ET C'EST TOUT
   LE MÉCANISME. À spécificité égale, la dernière règle gagne. Donc :
     · redéfinir `:root` ici suffit à re-skinner les 30 (ils partagent le même
       vocabulaire de 9 jetons — c'est ce qui rend l'opération possible) ;
     · ⛔ NE PAS utiliser `@layer` : une feuille en couche PERD contre une
       feuille sans couche, et celles des outils n'en ont pas. Le réflexe
       « mets ça dans un layer » aurait produit un fichier qui ne fait rien.

   ⛔ TOUTES LES CLASSES QUE J'AJOUTE SONT PRÉFIXÉES `absp-`.
   Quatre outils (blueprint-agent, faire-travailler-ia, publier-sans-se-vider,
   vendre-sans-audience) masquent déjà `.hd` à l'impression. Un nom générique
   aurait fait disparaître ma barre sur ces quatre-là, et seulement ceux-là.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. LES JETONS — remappés sur le design system « Tobias Collignon » ──────
   Les outils définissaient leur propre nuancier, dérivé de la page de vente.
   On le remplace par les valeurs du design system.

   ⭐⭐ 09/08 — L'ACCENT DE MARQUE EST **#F97316**, ET IL EST RESTAURÉ.
   Ce fichier a porté `--orange:#E96A2B` pendant deux jours, plus `#F5883F` sur
   les zones sombres. Comme les propriétés personnalisées HÉRITENT, redéfinir le
   jeton a repeint les 111 fonds et 74 textes des 30 outils d'un seul geste —
   la puissance du mécanisme est exactement ce qui l'a rendu dangereux. Tobias
   l'a vu en une phrase : « t'as changé le orange, t'as changé les boutons CTA,
   je les préfère avant ». Il avait raison, et la mesure lui donne raison DEUX
   FOIS — restaurer la charte AMÉLIORE le contraste au lieu de le dégrader :

     bouton de conversion   #E96A2B + encre  5,77:1  →  #F97316 + encre  6,58:1
     pastille CTA de barre  #AF4B19 + blanc  5,46:1  →  #F97316 + encre  6,58:1
     orange en texte/crème  #AF4B19          5,12:1  →  inchangé (--o-encre)
   (reproductible : `python3 scripts/content/audit_contraste_servi.py`, qui mesure
    la PAGE SERVIE en HTTP et refuse tout verdict si ses deux canaris tombent.)

   ⛔ LA LEÇON, ET ELLE EST PLUS LARGE QUE CETTE COULEUR. Le raisonnement
      d'origine était juste sur UN point — `#F97316` en `color:` sur crème vaut
      2,62:1, très en dessous d'AA — et il a été étendu, sans mesure, à un cas
      où il ne s'appliquait pas : les SURFACES. Or une surface ne se juge pas sur
      son propre contraste avec la page, mais sur celui du texte POSÉ DESSUS, et
      là l'orange vif gagne (l'encre noire y est plus lisible que sur un orange
      sombre). Le remède du texte a été administré à la surface, qui n'était pas
      malade. ⇒ Un seuil ne se transporte jamais d'un rôle à l'autre sans être
      recalculé pour ce rôle.
   ⛔ Et la valeur d'une charte lockée ne se change pas sous couvert d'un motif
      technique : le motif se prouve d'abord, et la décision reste à Tobias.
      Écrire « ⛔ --orange valait #F97316, la valeur que la doctrine impose » en
      commentaire au-dessus du contournement ne légitime pas le contournement —
      ça le documente. Réparer le fichier, jamais ajouter la clause qui le décrit.

   ⇒ RÈGLE DE PARTAGE, la seule à retenir : `--orange` (#F97316) est une
     **SURFACE** — on pose de l'encre sombre dessus. `--o-encre` (#AF4B19) est
     du **TEXTE** — sur fond clair uniquement. Un jeton ne peut pas être les
     deux ; c'est pour ça qu'ils sont deux. */
:root{
 --creme:#FBF7F0;   /* paper    */
 --blanc:#FFFFFF;   /* card     */
 --noir:#14131A;    /* night — moins absolu que #0A0A0F, et plus chaud */
 /* ⭐ LE JETON EST L'ACCENT DE MARQUE, EXACTEMENT.
    Première tentative : `--orange:#AF4B19` pour rendre AA les 74 `color:
    var(--orange)`. Effet de bord non prévu : les 111 `background:var(--orange)`
    se sont assombris eux aussi, et les outils avaient choisi un texte
    QUASI-NOIR dessus (juste sur du vif, 5,46:1 — faux sur de l'encre, 3,38:1).
    Le bouton de conversion de 29 pages est passé sous le seuil.
    Deuxième tentative : #E96A2B — conforme, mais ce n'était plus la marque.
    ⇒ On rend au jeton la valeur que ses auteurs supposaient, ET C'EST LA VALEUR
      DE LA CHARTE : #F97316. On corrige les usages TEXTE là où ils sont — par
      substitution vers `--o-encre`, ci-dessous. Un jeton ne peut pas servir de
      fond ET de texte : la seule issue est de séparer les deux, jamais de
      chercher une valeur moyenne — la moyenne trahit les deux rôles à la fois. */
 --orange:#F97316;  /* SURFACE — encre sombre dessus : 6,58:1. La charte, telle quelle. */
 /* TEXTE orange. #AF4B19 (5,12:1) était mesuré sur la crème CLAIRE — et tombait à
    4,45:1 sur la crème FONCÉE des blocs `<code>`. Exactement le défaut de `--gris-c`
    douze lignes plus haut, deux jetons différents, une seule cause : UN SEUL FOND
    TESTÉ. #A34415 tient les QUATRE fonds clairs du système : 5,79 / 5,04 / 6,19 / 5,51
    (crème claire · crème foncée · blanc · crème des landings). */
 --o-encre:#A34415;
 --gris:#4D463E;    /* ink-2 */
 /* ink-3. Corrigé DEUX fois, et la 2e correction dit tout : #8B8276 plafonnait à
    3,78:1 → #726B61, mesuré 4,93:1… contre la crème CLAIRE (#FBF7F0). Or il sert
    surtout dans les `<th>`, dont le fond est la crème FONCÉE (#EFE7DA) : 4,29:1,
    sous AA, sur 28 en-têtes de tableau. Le chiffre publié était vrai et mesuré
    contre le mauvais fond. ⇒ #655F55 tient les TROIS fonds clairs du système
    (5,92 / 5,15 / 6,32) — on ne valide plus une encre contre un seul fond. */
 --gris-c:#655F55;
 --trait:#E9E1D3;   /* hairline */

 /* Les 30 LANDINGS et les 30 pages MERCI ont un vocabulaire voisin mais pas
    identique (elles séparent déjà le fond du texte, ce que les outils ne
    faisaient pas). On le remappe ici, avec les mêmes valeurs mesurées :
    ⛔ `--orange-txt` valait #C2410C → 4,35:1 sur crème, sous le seuil AA.
    ⛔ `--gris` valait #5A5450 ; conservé plus foncé pour la même raison. */
 --orange-txt:#A34415;
 --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;

 /* Ajouts de la plateforme (aucun outil ne les définit — zéro collision) */
 --absp-paper2:#F4EDE1;
 --absp-tint:#FDFAF4;
 --absp-line2:#DED4C2;
 --o-vif:#F97316;              /* décor uniquement — jamais sous du texte */
 --absp-vert:#2FA36B;
 --absp-rouge:#CE4A3A;
 --absp-edge:inset 0 0 0 1px var(--trait);
 --absp-lift:inset 0 1px 0 rgba(255,255,255,.85);
 --absp-sh:0 4px 10px -3px rgba(58,42,22,.08),0 10px 24px -8px rgba(58,42,22,.10);
 --absp-sh-lg:0 8px 20px -8px rgba(58,42,22,.10),0 28px 56px -20px rgba(58,42,22,.16);
 --absp-ease:cubic-bezier(.2,.8,.2,1);
 --absp-spring:cubic-bezier(.34,1.56,.64,1);
 --absp-fast:140ms;--absp-mid:260ms;--absp-slow:560ms;
 --absp-bar:56px;               /* hauteur de la barre d'application */
}

/* ⭐ L'ORANGE EST CONTEXTUEL, et c'est ce qui évite de choisir entre lisible et
   vivant. Sur fond sombre, l'ENCRE orange (#AF4B19) devient illisible (3,2:1) ;
   on y substitue… l'accent de marque lui-même, qui y vaut 6,58:1 sur #14131A et
   7,05:1 sur #0A0A0F. Comme les propriétés personnalisées HÉRITENT, redéfinir
   `--o-encre` sur la console suffit : les `color:var(--o-encre)` des outils
   s'adaptent d'eux-mêmes, sans toucher une ligne de leur code.
   ⭐ 09/08 — CE BLOC POSAIT AUSSI `--orange:#F5883F`, un TROISIÈME orange. Il
      n'a jamais eu de raison d'être : le fond sombre ne change rien au contraste
      d'une SURFACE orange, qui se juge sur l'encre posée dessus, pas sur ce
      qu'il y a derrière. On ne redéfinit donc plus que l'ENCRE — le seul jeton
      dont la valeur dépende réellement du fond. */
/* ⚠️ CETTE LISTE EST NOMINATIVE, DONC ELLE SERA INCOMPLÈTE À NOUVEAU — et il faut
   le dire ici plutôt que de le découvrir en production. `.out` et `.pont` (deux
   blocs `background:var(--noir)` écrits par les outils eux-mêmes) en manquaient :
   5 libellés en encre orange sur fond noir, à 3,38:1. Aucune valeur unique ne peut
   sauver les deux côtés — il faudrait ≥4,5:1 sur crème (donc sombre) ET sur noir
   (donc clair) : les deux contraintes s'excluent, c'est démontrable. Le jeton DOIT
   donc être contextuel, et une liste de sélecteurs est le seul mécanisme dont CSS
   dispose. ⇒ La défense n'est pas une meilleure liste, c'est une MESURE QUI TOURNE :
   `python3 scripts/content/audit_contraste_servi.py` sur les 30 ressources. Elle a
   trouvé ces 5-là ; elle trouvera les suivants. */
.machine,.cta-bas,.absp-bar,.absp-foot,.absp-dark,.out,.pont{--o-encre:#F97316}

/* ── DOCTRINE : L'ORANGE PORTE DE L'ENCRE SOMBRE. TOUJOURS. ───────────────────
   `background:var(--orange)` + `color:var(--blanc)` = 2,80:1. Avec de l'encre
   sombre : 6,58:1 — et c'est le motif de TOUT le reste du système
   (`.btn--primary`, `.lmform button`, la pastille « TU REÇOIS », `.absp-cta`,
   `.machine .go`, la coche du rond de la page merci).
   ⛔ Aucune règle n'est posée ICI pour l'imposer, et c'est délibéré : la mesure du
      09/08 sur les 30 ressources n'a trouvé le blanc-sur-orange que sur UNE page
      (`choisir-son-modele`, `.step__num` ×6 + `.btn` ×1), corrigée chez elle. Une
      règle de coque qui nomme deux classes vivant sur une seule page n'est pas une
      doctrine, c'est un correctif rangé au mauvais étage — et elle aurait au
      passage repeint les 4 `.btn{background:none}` des pages de lecture, qui,
      elles, vont bien. Un correctif se pose là où est le défaut. */

/* ── 2. LA PAGE — texture, et de l'air pour la barre ─────────────────────── */
html{scroll-behavior:smooth}
body{
 background:var(--creme);color:var(--noir);
 /* Deux couches gratuites : une lueur en haut qui donne un « haut » à la page,
    et une trame de points FIXE — c'est elle qui fait qu'on lit « une surface
    sur laquelle des cartes glissent » plutôt que « un fond à motif ». */
 background-image:
   radial-gradient(1100px 520px at 50% -280px,rgba(249,115,22,.07),transparent 70%);
 background-attachment:fixed}
body::before{
 content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
 background-image:radial-gradient(rgba(30,27,24,.055) 1px,transparent 1px);
 background-size:22px 22px;
 -webkit-mask-image:linear-gradient(180deg,#000,#000 40%,transparent 92%);
 mask-image:linear-gradient(180deg,#000,#000 40%,transparent 92%)}
/* ⚠️ LE DÉGAGEMENT VA SUR `body`, PAS SUR `.wrap` — et ce n'est pas un détail
   de goût. Quatre outils n'ont AUCUN `.wrap` (blueprint-agent,
   faire-travailler-ia, publier-sans-se-vider, vendre-sans-audience) : posé sur
   `.wrap`, le dégagement les aurait laissés sans, et la barre aurait recouvert
   leur titre — sur ces quatre-là seulement, donc invisible tant qu'on regarde
   les autres. Une règle qui suppose une structure ne protège que les pages qui
   l'ont ; `body` est le seul conteneur dont on soit sûr. */
/* ⛔ LE DÉGAGEMENT N'EST PAS ICI, ET C'EST VOULU. Cette feuille est chargée
   aussi par les 30 landings et les 30 pages merci, qui n'ont PAS de barre
   d'application. Un `padding-top` en CSS leur aurait ajouté un trou de 56 px
   en haut — visible seulement sur les pages qu'on ne regarde pas en refaisant
   les outils. C'est le script qui le pose, au moment où il pose la barre :
   la cause et l'effet au même endroit. */
.wrap{position:relative;z-index:1;max-width:860px}

/* Le grain : SVG inline injecté par le script, en surimpression très faible. */
.absp-grain{position:fixed;inset:0;width:100%;height:100%;z-index:2;
 pointer-events:none;opacity:.05}

/* ── 3. LA BARRE D'APPLICATION — ce qui fait passer de « document » à « outil »
   Un document commence par un titre. Une application commence par une barre qui
   dit où l'on est et ce qu'il reste à faire. C'est le changement de perception
   le moins cher de tout ce fichier, et le plus efficace. */
.absp-bar{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--noir);
 color:#FBF7F0;height:var(--absp-bar);
 transition:box-shadow var(--absp-mid) var(--absp-ease)}
.absp-bar::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(620px 160px at 88% -70%,rgba(249,115,22,.30),transparent 72%)}
.absp-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:linear-gradient(90deg,transparent,var(--o-vif) 22%,var(--o-vif) 78%,transparent);
 opacity:.5}
.absp-bar.sc{box-shadow:0 14px 34px -18px rgba(10,9,14,.7)}
.absp-bar__in{position:relative;z-index:1;max-width:1180px;margin:0 auto;height:100%;
 padding:0 20px;display:flex;align-items:center;gap:14px}
.absp-mk{width:30px;height:30px;flex:none;border-radius:9px;
 background:linear-gradient(150deg,#2A2833,#100F16);color:#FBF7F0;display:flex;
 align-items:center;justify-content:center;font-weight:800;font-size:11.5px;
 letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(251,247,240,.14);
 text-decoration:none}
.absp-mk i{color:var(--o-vif);font-style:normal}
/* ⭐ LE SCEAU — la seule chose qui change d'un outil à l'autre, et elle est
   dérivée de son nom : matrice 4×4 dont les cases pleines viennent d'un hachage
   du slug. Déterministe (le même outil a toujours la même figure, donc c'est
   une marque et pas une décoration), unique (les 30 sont distincts, vérifié),
   et surtout : cette forme RIME avec le HUD, dont la grille de la semaine et
   les grilles d'habitudes sont exactement des matrices de cellules.
   La personnalisation naît ainsi de la charte au lieu de s'y ajouter — ce qui
   est la seule façon d'en faire 30 sans que la trentième détonne. */
.absp-sc{flex:none;display:flex;align-items:center;color:var(--o-vif);
 width:26px;height:26px;padding:3px;border-radius:8px;
 background:rgba(251,247,240,.05);box-shadow:inset 0 0 0 1px rgba(251,247,240,.1)}
.absp-sceau{width:100%;height:100%;display:block}
.absp-sceau__p{animation:absp-pose .5s var(--absp-spring) both}
@keyframes absp-pose{from{opacity:0;transform:scale(.3)}}
/* Quand tous les champs sont remplis, le sceau s'allume : le seul moment de
   récompense que la barre puisse offrir sans dire un mot. */
.absp-bar.plein .absp-sc{color:#F7A768;background:rgba(249,115,22,.16);
 box-shadow:inset 0 0 0 1px rgba(249,115,22,.4)}
.absp-bar.plein .absp-rail i{background:linear-gradient(90deg,#2FA36B,#3DBE80)}

.absp-id{display:flex;flex-direction:column;line-height:1;min-width:0;flex:1 1 auto}
.absp-id b{font-size:12.5px;font-weight:800;letter-spacing:-.022em;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.absp-id s{text-decoration:none;font-size:8px;font-weight:700;letter-spacing:.16em;
 color:rgba(251,247,240,.58);margin-top:4px;text-transform:uppercase}
/* La progression : elle rend le remplissage FINI, ce qu'un formulaire nu ne fait
   jamais. Un champ vide devant soi est une corvée ; « 3 sur 6 » est une partie
   commencée. Le compte est calculé par le script sur les champs réels. */
.absp-prog{display:flex;align-items:center;gap:10px;flex:none}
.absp-prog em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;
 text-transform:uppercase;color:rgba(251,247,240,.58);white-space:nowrap}
.absp-rail{width:104px;height:6px;border-radius:999px;background:rgba(251,247,240,.13);
 overflow:hidden}
.absp-rail i{display:block;height:100%;width:0;border-radius:999px;
 background:linear-gradient(90deg,#C1531C,var(--o-vif) 60%,#F7A768);
 transition:width var(--absp-slow) var(--absp-ease)}
.absp-bar .absp-cta{flex:none;display:inline-flex;align-items:center;gap:7px;
 padding:8px 14px;border-radius:999px;background:#F97316;color:#14131A;
 font-size:12px;font-weight:800;letter-spacing:-.01em;text-decoration:none;
 box-shadow:inset 0 0 0 1px rgba(10,10,15,.14);
 transition:transform var(--absp-fast) var(--absp-spring),background var(--absp-fast) var(--absp-ease)}
/* 09/08 — orange de marque + encre sombre (6,58:1), au lieu d'encre orange +
   blanc (5,46:1). Le hover est celui de `.btn--primary` sur la page de vente :
   #FB923C. Un même geste doit avoir la même couleur partout — c'est ce que
   Tobias appelle « garde le même branding ». */
.absp-bar .absp-cta:hover{background:#FB923C;transform:translateY(-1px)}
.absp-bar .absp-cta:active{transform:scale(.96)}

/* ── 4. LE HAUT DE PAGE ──────────────────────────────────────────────────── */
.wrap>h1{letter-spacing:-.03em}
.absp-eb{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:9.5px;
 font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gris-c)}
.absp-eb u{text-decoration:none;width:16px;height:1px;background:#F3C09A;display:block}
.lede{color:var(--gris);font-size:16px;line-height:1.6}
/* Les repères du haut : durée, ce qu'on obtient, où ça vit. Trois chips qui
   répondent aux trois questions qu'on se pose avant de commencer à taper. */
.absp-meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.absp-meta span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
 border-radius:999px;background:var(--blanc);box-shadow:var(--absp-edge);
 font-size:11.5px;font-weight:700;color:var(--gris)}
.absp-meta span i{width:5px;height:5px;border-radius:999px;background:var(--o-vif);flex:none}

/* ── 5. LA CONSOLE — l'ancien gros bloc noir, élevé au rang de panneau ────
   ⚠️ ON LA GARDE SOMBRE, ET C'EST UN CHOIX CONTRAINT, PAS UNE PRÉFÉRENCE.
   La passer en clair allégerait la page — mais les 30 outils ont stylé leur
   intérieur EN SUPPOSANT un fond noir (textes clairs, bordures pâles). La
   retourner rendrait leur contenu invisible, sur 30 pages, d'un coup.
   On l'élève donc là où elle est : coiffe, anneau intérieur, lueur qui respire. */
.machine{position:relative;overflow:hidden;border-radius:22px;
 background:var(--noir);
 box-shadow:0 8px 20px -8px rgba(20,19,26,.4),0 34px 70px -30px rgba(20,19,26,.55);
 padding-top:0;margin-top:26px}
.machine::before{content:"";position:absolute;inset:-25% -10% auto auto;
 width:75%;height:75%;pointer-events:none;
 background:radial-gradient(closest-side,rgba(249,115,22,.26),transparent 72%);
 animation:absp-bloom 10s var(--absp-ease) infinite alternate}
.machine::after{content:"";position:absolute;inset:0;pointer-events:none;
 border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(251,247,240,.08),
 inset 0 1px 0 rgba(251,247,240,.11)}
.machine>*{position:relative;z-index:1}
/* La coiffe : trois pastilles et un libellé. Deux lignes de CSS, et le bloc
   cesse de ressembler à un formulaire pour ressembler à une fenêtre d'outil. */
/* ⛔⛔ 12/08 — CE BANDEAU DÉBORDAIT À 320 px, SUR LES 30 OUTILS, DEPUIS LE 07/08.
   Mesuré par `gate_responsive.py` le jour où la page ressource est entrée dans son
   périmètre : `<s>` sortait de 28 px. Trois enfants sur une rangée `flex` sans
   `flex-wrap`, dont un `white-space:nowrap` de 34 caractères — à 320 px ça ne rentre
   pas, et un flex qui ne peut pas passer à la ligne pousse dehors au lieu de plier.
   ⭐ CE QUI REND CE DÉFAUT INTÉRESSANT : il n'était pas caché, il n'était pas MESURÉ.
     La gate rendait un vert honnête sur quatre pages de low-ticket et deux pages de
     capture — aucune page d'OUTIL n'y figurait, alors que le bandeau ne vit que là.
     L'instrument était exact et hors sujet, ce qui est pire qu'un instrument faux :
     son « 0 débordement » se lit comme un verdict sur ce qu'il n'a jamais regardé.
   ⚠️ On PLIE, on ne masque pas. `<s>` porte « tout se calcule dans ton navigateur » —
     c'est l'argument central de ces outils, et le masquer sous 380 px l'aurait retiré
     précisément aux téléphones, c'est-à-dire à la majorité des lecteurs. */
.absp-hd{position:relative;z-index:1;display:flex;align-items:center;gap:10px;
 flex-wrap:wrap;
 padding:13px 22px;border-bottom:1px solid rgba(251,247,240,.1);
 background:rgba(251,247,240,.03);margin:0 0 22px}
.absp-hd u{display:flex;gap:5px;flex:none}
.absp-hd u b{width:9px;height:9px;border-radius:999px;background:rgba(251,247,240,.16);
 display:block}
.absp-hd u b:first-child{background:rgba(249,115,22,.65)}
.absp-hd em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.13em;
 text-transform:uppercase;color:rgba(251,247,240,.6)}
.absp-hd s{text-decoration:none;margin-left:auto;font-size:10.5px;font-weight:700;
 color:rgba(251,247,240,.62);white-space:nowrap}

/* Les champs — un état de focus qui se voit, et une cible tactile honnête. */
.machine input[type=text],.machine input[type=number],.machine input:not([type]),
.machine textarea,.machine select{
 background:rgba(251,247,240,.05);color:#F4EFE6;
 border:1px solid rgba(251,247,240,.14);border-radius:12px;
 min-height:46px;font-size:15px;
 transition:border-color var(--absp-fast) var(--absp-ease),
            background var(--absp-fast) var(--absp-ease),
            box-shadow var(--absp-fast) var(--absp-ease)}
.machine input::placeholder,.machine textarea::placeholder{color:rgba(251,247,240,.34)}
.machine input:hover,.machine textarea:hover,.machine select:hover{
 border-color:rgba(251,247,240,.26)}
.machine input:focus,.machine textarea:focus,.machine select:focus{
 outline:none;border-color:var(--o-vif);background:rgba(251,247,240,.08);
 box-shadow:0 0 0 3px rgba(249,115,22,.22)}
.machine label{transition:color var(--absp-fast) var(--absp-ease)}
.machine input[type=radio],.machine input[type=checkbox]{accent-color:var(--o-vif);
 width:18px;height:18px;min-height:0}

/* Le bouton principal : repeint EXPLICITEMENT parce qu'un jeton ne peut pas
   servir à la fois de texte sur fond noir et de fond sous du texte blanc. */
.machine .go,.machine button.go,#go,.absp-go{
 background:#F97316;color:#14131A;border:0;border-radius:12px;
 min-height:48px;padding:0 22px;font-size:15px;font-weight:800;letter-spacing:-.01em;
 /* ⛔ Ombre NEUTRE, pas teintée orange : une ombre orange large sur fond sombre
    se rend visuellement comme un glow, et le glow est interdit sans exception. */
 cursor:pointer;box-shadow:0 6px 18px -8px rgba(10,10,15,.7),
 inset 0 0 0 1px rgba(10,10,15,.16);
 transition:transform var(--absp-fast) var(--absp-spring),
            background var(--absp-fast) var(--absp-ease),
            box-shadow var(--absp-fast) var(--absp-ease)}
.machine .go:hover,#go:hover{background:#FB923C;transform:translateY(-1px);
 box-shadow:0 10px 26px -10px rgba(193,83,28,.9),inset 0 0 0 1px rgba(255,255,255,.2)}
.machine .go:active,#go:active{transform:scale(.975)}
.machine .go:focus-visible,#go:focus-visible{outline:2px solid var(--o-vif);outline-offset:3px}


/* ══════════════════════════════════════════════════════════════════════════
   ⛔⛔ LA RÈGLE APPRISE LE 07/08, ET ELLE A COÛTÉ 29 PAGES CASSÉES
   Cette couche posait `background:var(--blanc)` sur `.pont`, `.card`, `.k`,
   `.tw` — des conteneurs écrits par les outils, pas par elle. Or `.pont` (la
   section passerelle vers l'offre) était SOMBRE dans leur design, avec du
   texte blanc. Résultat : blanc sur blanc, sur 29 pages, mesuré à 1,00:1.
   Aucune erreur nulle part — juste du texte devenu invisible.

   ⭐ REMAPPER UN JETON EST SÛR : ça préserve le rapport clair/sombre voulu par
      l'auteur, quel que soit l'endroit.
   ⛔ REPEINDRE UN CONTENEUR NE L'EST JAMAIS : on ne contrôle qu'un côté du
      couple texte/fond, et l'autre côté vit dans 30 feuilles qu'on n'a pas
      lues. Cette couche pose désormais la GÉOMÉTRIE (rayons, rembourrage,
      relief) et le MOUVEMENT — jamais un fond ni une couleur de texte sur un
      élément qu'elle n'a pas créé. Ses propres éléments (`absp-*`) restent
      libres : là, elle contrôle les deux côtés.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 6. LE RÉSULTAT — un panneau, avec sa propre identité ─────────────────
   C'est le moment qui décide de tout : la personne vient de voir son texte
   apparaître. S'il tombe dans le flux comme un paragraphe de plus, la valeur
   perçue s'évapore. Il lui faut un cadre, une coiffe, et une arrivée. */
.out{position:relative;margin-top:30px}
.out>*{animation:absp-monte .5s var(--absp-ease) both}
/* ⚠️ Aucune couleur absolue ici : cette coiffe est insérée devant `#out`, et
   `#out` vit DANS la console sombre sur certains outils et hors d'elle sur
   d'autres. Elle hérite donc, et ne module que l'opacité — la seule façon
   d'être juste des deux côtés sans savoir de quel côté on est. */
.absp-rhd{display:flex;align-items:center;gap:10px;margin:0 0 12px;
 padding-bottom:11px;border-bottom:1px solid currentColor;
 border-bottom-color:color-mix(in srgb,currentColor 22%,transparent)}
.absp-rhd em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.13em;
 text-transform:uppercase;color:currentColor;opacity:.78}
.absp-rhd i{width:6px;height:6px;border-radius:999px;background:var(--absp-vert);
 flex:none;box-shadow:0 0 0 0 rgba(47,163,107,.55);animation:absp-beat 3s var(--absp-ease) infinite}
.absp-rhd s{text-decoration:none;margin-left:auto;font-size:10.5px;font-weight:700;
 color:currentColor;opacity:.7}
.card,.k,.tw{border-radius:16px;
 transition:transform var(--absp-mid) var(--absp-ease),
            box-shadow var(--absp-mid) var(--absp-ease)}
.card:hover,.k:hover{transform:translateY(-2px)}
.wait{font-size:13px;line-height:1.6;padding:16px 18px;border-radius:16px;margin:0;
 opacity:.82}   /* la couleur vient de son conteneur — voir la règle ci-dessus */

/* ── 7. LA BARRE D'ACTIONS ───────────────────────────────────────────────── */
.barre{gap:8px}
.barre button,#copier,#exporter,#effacer{
 border-radius:999px;padding:9px 16px;min-height:38px;cursor:pointer;
 transition:transform var(--absp-fast) var(--absp-spring),
            box-shadow var(--absp-fast) var(--absp-ease)}
.barre button:hover,#copier:hover,#exporter:hover,#effacer:hover{transform:translateY(-1px)}
.barre button:active{transform:scale(.96)}

/* ── 8. LA BARRE DE CONVERSION — deux déclencheurs, déjà câblés par les outils
   (retour Tobias du 04/08 : dès que la réponse est là, OU dès que le carré du
   formulaire quitte l'écran). On ne touche PAS à sa logique — uniquement à sa
   peau, pour qu'elle appartienne à la même famille que la barre du haut. */
.cta-bas{background:rgba(20,19,26,.94);
 -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
 border-top:1px solid rgba(251,247,240,.12);
 box-shadow:0 -18px 44px -22px rgba(10,9,14,.8)}
.cta-bas::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
 background:linear-gradient(90deg,transparent,var(--o-vif) 25%,var(--o-vif) 75%,transparent);
 opacity:.55}
.cta-bas__t{color:rgba(251,247,240,.92)}
/* ⭐ LE BOUTON DE CONVERSION GARDE L'ORANGE VIF, ET C'EST UN CALCUL.
   Les outils écrivent `.cta{color:var(--noir)}` : ils ont choisi un texte
   quasi-noir parce que l'orange d'origine était VIF. En remappant le jeton vers
   l'encre orange (#AF4B19), ce couple est tombé à 3,38:1 — sur le bouton le
   plus important de 29 pages.
   ⛔ Imposer du texte blanc aurait cassé les boutons SECONDAIRES, qui partagent
      la même classe avec un fond clair. Aucune couleur n'atteint 4,5:1 contre
      le blanc ET le noir : changer un fond oblige à rouvrir la question du
      texte posé dessus, et ici c'est le FOND qu'il faut rendre.
   ⇒ Fond vif + texte #14131A. La doctrine l'autorise : l'orange vif est licite
     en SURFACE dès lors que le texte dessus tient le seuil — c'est en TEXTE
     qu'il est banni. Reste à choisir QUEL vif :
       #E96A2B (posé le 07/08)  →  5,77:1
       #F97316 (la charte)      →  6,58:1   ⇐ retenu le 09/08
     La charte gagnait sur le seul critère qui servait à l'écarter. On avait
     inventé une couleur pour résoudre un problème que la couleur d'origine
     résolvait mieux. */
.cta-bas .cta,.cta-bas a.cta{background:var(--o-vif);color:var(--noir);border-radius:999px;
 padding:12px 22px;min-height:46px;display:inline-flex;align-items:center;gap:8px;
 font-weight:800;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
 transition:transform var(--absp-fast) var(--absp-spring),background var(--absp-fast) var(--absp-ease)}
.cta,a.cta{transition:background var(--absp-fast) var(--absp-ease),
 transform var(--absp-fast) var(--absp-spring)}
.cta:hover,.cta-bas .cta:hover{background:#F7A768;transform:translateY(-1px)}
.cta-bas .cta:active{transform:scale(.97)}
/* La flèche avance au survol — un détail, mais c'est ce genre de détail qui
   fait la différence entre « un bouton » et « un produit ». */
.cta-bas .cta::after{content:"→";display:inline-block;
 transition:transform var(--absp-fast) var(--absp-ease)}
.cta-bas .cta:hover::after{transform:translateX(3px)}

/* ── 9. LE PONT ET LE PIED ───────────────────────────────────────────────── */
.pont{border-radius:22px;margin-top:34px}
.absp-foot{position:relative;z-index:1;margin-top:40px;background:var(--noir);
 color:#FBF7F0;overflow:hidden}
.absp-foot::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(560px 160px at 18% 130%,rgba(249,115,22,.22),transparent 70%)}
.absp-foot__in{position:relative;z-index:1;max-width:1180px;margin:0 auto;
 padding:22px 20px;display:flex;align-items:center;justify-content:space-between;
 gap:14px;flex-wrap:wrap;font-size:11px}
.absp-foot b{font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.absp-foot span{color:rgba(251,247,240,.6);display:inline-flex;align-items:center;gap:8px}
.absp-foot a{color:#F97316;text-decoration:none;font-weight:700}
.absp-foot a:hover{text-decoration:underline}

/* ── 10. LES MARQUEURS — les emoji sortis du rôle d'icône ─────────────────
   ⛔ « Emoji utilisés comme icônes » est le tell IA n°6 de la doctrine, et il
   était présent sur les 30 pages (⚠ 30/30 · ⭐ 30/30 · ✅ 12/30 · ❌ 10/30).
   On ne les SUPPRIME pas — ici ils portent du sens (bon exemple / contre-exemple),
   et l'effacer coûterait de l'information. Le script les enveloppe et le CSS
   les rend en pastilles typographiques : le sens reste, le tell disparaît. */
.absp-mq{display:inline-flex;align-items:center;justify-content:center;
 width:17px;height:17px;border-radius:6px;font-size:10px;font-weight:900;
 font-style:normal;line-height:1;vertical-align:-3px;margin-right:3px;
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.absp-mq--ok{background:rgba(47,163,107,.16);color:#1E7A4E;
 box-shadow:inset 0 0 0 1px rgba(47,163,107,.34)}
.absp-mq--non{background:rgba(206,74,58,.14);color:#A5372A;
 box-shadow:inset 0 0 0 1px rgba(206,74,58,.3)}
.absp-mq--att{background:rgba(244,203,92,.22);color:#7A5A0B;
 box-shadow:inset 0 0 0 1px rgba(244,203,92,.45)}
.absp-mq--eto{background:rgba(249,115,22,.14);color:#A34415;
 box-shadow:inset 0 0 0 1px rgba(249,115,22,.3)}
/* Sur fond sombre, les mêmes pastilles en clair : mêmes seuils, autre côté. */
.machine .absp-mq--ok,.cta-bas .absp-mq--ok{background:rgba(61,190,128,.2);color:#79E0AC;
 box-shadow:inset 0 0 0 1px rgba(61,190,128,.36)}
.machine .absp-mq--non{background:rgba(240,128,109,.18);color:#FFA394;
 box-shadow:inset 0 0 0 1px rgba(240,128,109,.34)}
.machine .absp-mq--att{background:rgba(244,203,92,.2);color:#F6D98A;
 box-shadow:inset 0 0 0 1px rgba(244,203,92,.36)}
.machine .absp-mq--eto{background:rgba(249,115,22,.22);color:#F9B384;
 box-shadow:inset 0 0 0 1px rgba(249,115,22,.4)}

/* ── 11. LE MOUVEMENT ────────────────────────────────────────────────────
   transform/opacity uniquement : composé par le GPU, donc jamais de recalcul
   de mise en page et jamais de saccade. */
@keyframes absp-monte{from{opacity:0;transform:translateY(10px)}}
@keyframes absp-bloom{from{transform:translate3d(0,0,0) scale(1);opacity:.78}
                      to{transform:translate3d(-5%,4%,0) scale(1.16);opacity:1}}
@keyframes absp-beat{0%,100%{box-shadow:0 0 0 0 rgba(47,163,107,.5)}
                     70%{box-shadow:0 0 0 7px rgba(47,163,107,0)}}
/* ⭐ La classe qui MASQUE est posée par le script, jamais présente dans le HTML.
   Si le script ne tourne pas, `.absp-rv` n'existe pas et tout reste visible.
   L'inverse — masquer en CSS puis révéler en JS — rend la page vide au moindre
   incident de script, sans une seule erreur en console. */
.absp-rv{opacity:0;transform:translateY(16px)}
.absp-rv.vu{opacity:1;transform:none;
 transition:opacity .6s var(--absp-ease),transform .6s var(--absp-ease)}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .absp-rv{opacity:1!important;transform:none!important}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important}}

/* ── 12. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width:820px){
 .absp-bar__in{padding:0 14px;gap:11px}
 .absp-prog em{display:none}
 .absp-rail{width:64px}
 .wrap{padding-top:calc(var(--absp-bar) + 20px)}
 .absp-hd{padding:12px 18px}
 .pont{padding:22px 18px}}
@media (max-width:560px){
 .absp-id s{display:none}
 .absp-bar .absp-cta{padding:8px 12px;font-size:11.5px}
 .absp-prog{display:none}   /* la place manque : la barre garde marque + action */
 .absp-meta span{font-size:11px;padding:5px 10px}
 .absp-foot__in{padding:18px 14px;font-size:10.5px}}

@media print{
 .absp-bar,.absp-grain,.absp-foot,.cta-bas,body::before{display:none!important}
 .wrap{padding-top:0}
 .machine{box-shadow:none}
 .absp-rv{opacity:1!important;transform:none!important}}