/* ============================================================
   LE NOM DE LA MAISON.

   « Blottoir » ne s'écrit jamais en toutes lettres nues : il s'écrit
   TOUJOURS en encre vert forêt sur une pastille néon. C'est le logo, et
   c'est aussi la façon dont le nom apparaît dans une phrase — même en
   haut à gauche, où la pastille EST la marque.

   6,72:1, la seule paire que la doctrine autorise sur du néon. Écrire le
   nom EN néon sur du clair donnerait 1,32:1.
   ============================================================ */
/* LE NOM NE CHANGE JAMAIS DE COULEUR. Une famille de thème repeint --neon avec
   sa propre teinte d'accent : sous Boisé le nom devenait ocre, sous Floral
   rose. Or le nom EST le logo — un logo qui suit la peau choisie par le client
   n'est plus une marque, c'est une décoration. Les deux valeurs sont donc
   écrites en dur ici et ne dépendent d'aucune variable : vert néon #39FF14,
   encre vert forêt #0C3A1E, 6,72:1 — le même couple dans les onze thèmes et
   dans les deux modes. C'est la seule chose de tout le logiciel qui ne se
   thème pas, et c'est voulu. */
.nomB{font-style:normal;white-space:nowrap;
  color:#0C3A1E!important;background:#39FF14!important;
  padding:0 .16em;border-radius:6px;
  box-shadow:0 2px 10px rgba(57,255,20,.3)}

/* ============================================================
   LA PALETTE BLOTTOIR — vert forêt sur presque blanc,
   néon vert pour ce qui compte.

   Deux verts, deux emplois, jamais l'inverse :

   — LE VERT FORÊT porte le TEXTE. Titres, filets, chiffres,
     contours. Il fait 12:1 sur le fond, il peut tout écrire.

   — LE NÉON ne porte JAMAIS de texte. Il REMPLIT. Sur du presque
     blanc il donne 1,3:1 : illisible, et c'est exactement pour ça
     qu'il ne sert qu'en fond. Avec du vert forêt posé dessus il
     donne 6,7:1. C'est la mécanique du jaune de Higgsfield : un
     surligneur, pas une encre.

   La règle qui découle des deux : si quelque chose est important,
   on le pose SUR du néon. On ne l'écrit pas EN néon.

   Chargé après themes.css, il remplace le cuivre partout.
   ============================================================ */

/* Les COULEURS ne sont plus ici : elles sont devenues le thème par
   défaut de la maison, dans themes.css (:root et :root[data-mode="sombre"]).
   Elles y étaient un calque posé par-dessus, et un calque perd contre le
   thème du compte — le vert disparaissait dès qu'on entrait dans le
   logiciel. Ce fichier ne garde que les RÈGLES D'EMPLOI, qui valent pour
   toutes les familles puisqu'elles s'écrivent contre var(--neon). */

/* ---- ce qui compte est POSÉ sur le néon ---- */
.cta.plein{
  background:var(--neon);
  color:var(--surNeon);
  border:none;
  box-shadow:0 2px 0 color-mix(in srgb,var(--or) 34%,transparent),
    0 8px 22px color-mix(in srgb,var(--neon) 40%,transparent);
}
.cta.plein:hover{
  background:color-mix(in srgb,var(--neon) 82%,#ffffff);
  box-shadow:0 2px 0 color-mix(in srgb,var(--or) 44%,transparent),
    0 10px 30px color-mix(in srgb,var(--neon) 62%,transparent);
}

/* ============================================================
   LE DOUBLE VERT — encre vert forêt sur aplat néon.

   C'est le geste le plus fort de la maison : celui de « your shelf »
   et de « keeps growing ». Il ne se met QUE sur le mot qui porte
   l'écran, et une seule fois par hauteur d'écran — deux aplats dans
   un regard se mangent l'un l'autre.

   On le pose avec un <em>, jamais avec une classe : le mot reste du
   texte, il se sélectionne, se lit à voix haute par un lecteur
   d'écran, et survit à une traduction automatique.

   6,72:1 entre #0C3A1E et #39FF14 — au-dessus du seuil AA, y compris
   pour du petit texte.
   ============================================================ */
h1 em, h2 em, .haut .marque em {
  font-style: normal;
  color: var(--surNeon);
  background: var(--neon);
  padding: 0 .14em;
  border-radius: 8px;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--neon) 26%, transparent);
  /* Sans ça, un titre qui passe à la ligne perd le rembourrage et l'arrondi
     sur la coupure : le premier morceau finit à ras du texte et le second
     commence collé. `clone` redonne ses quatre côtés à chaque fragment. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Dans un bandeau de page le mot est petit et très interlettré : le fort
   espacement creuse un vide à droite de la dernière lettre, on le rattrape
   pour que l'aplat reste centré sous le mot. */
.haut .marque em { padding: 2px .1em 2px .26em; border-radius: 6px }

/* le surligneur : un mot qu'on veut faire lire avant les autres */
.surligne{
  background:linear-gradient(180deg,transparent 56%,var(--neon) 56%);
  padding:0 .12em;
}

/* le trait néon sous un élément choisi */
.souligne-neon{box-shadow:inset 0 -3px 0 var(--neon)}

/* ============================================================
   LE DOSAGE — ce qui doit être vu passe SUR du néon.

   Sans cette section, le vert forêt finit par tout porter : les
   titres, les filets, les chiffres, les rubans, les badges. Une page
   entière du même vert, et plus rien ne ressort. Le néon reprend
   les cinq ou six choses qui doivent arrêter l'œil, et le vert
   forêt redevient ce qu'il est : une encre.
   ============================================================ */

/* CETTE RÈGLE A ÉTÉ RETIRÉE le 10/08/2026, et il faut savoir pourquoi avant de
   la remettre. Elle rendait `h1 em` en trait de vert forêt plutôt qu'en aplat
   néon, pour qu'il ne se batte pas avec le ruban du plan phare sur la page des
   prix. Mais elle était écrite APRÈS le double vert, dans le même fichier et à
   la même spécificité : elle l'annulait donc PARTOUT pour régler un problème
   d'UN écran. Résultat mesuré ce jour : sous Boisé sombre, l'encre et l'aplat
   du mot surligné tombaient sur la même couleur, exactement — le mot était
   invisible. Le conflit de la page des prix se règle sur la page des prix,
   qui redéfinit déjà `h1 em` chez elle.
   Il ne reste que `.titre em`, qui ne sert qu'à l'accueil public. */
.titre em{font-style:normal;color:var(--or);
  box-shadow:inset 0 -.34em 0 color-mix(in srgb,var(--or) 14%,transparent);
  padding:0 .1em}

/* Les pastilles qui annoncent quelque chose. Relevé sur les 15 plus gros
   éditeurs : Atlassian tient une page de 19 248 px avec DEUX boutons pleins
   (0,12 % de la surface), Stripe 0,38 %, Adobe 0,29 %, Shopify 0,03 %. Le
   néon plein reste donc pour ce qui n'existe qu'une fois par écran — le
   lancement, le ruban du plan phare, le bouton qui engage. */
/* Sur un ecran de 900 px, la page des prix alignait SIX taches de la meme
   famille : « LAUNCH PRICING » vers y 195, « UP TO −43 % » vers y 250, le
   ruban vers y 345, et trois pastilles « −43 % » vers y 420. Un seul garde
   l'aplat de neon — le ruban du plan phare. Les autres se distinguent par
   la forme et l'encre, pas par un second neon.

   Attention : on REECRIT .feu et .promo ici au lieu de rendre la main au
   local. abonnement.html pose background:var(--or);color:var(--sombre) sur
   les deux, soit 2,02:1. */
.ruban{background:var(--neon)!important;color:var(--surNeon)!important;
  border-color:transparent!important;
  box-shadow:0 6px 18px color-mix(in srgb,var(--neon) 45%,transparent)}
.feu{background:var(--or)!important;color:var(--fond)!important;
  border-color:transparent!important}
.promo{background:var(--fond)!important;color:var(--or)!important;
  border:1px solid color-mix(in srgb,var(--or) 45%,transparent)!important}

/* Le bouton principal des formulaires (connexion) : themes.css le peint
   en --sombre sur un aplat de --or, soit 2,0:1 — et c'est un aplat de vert
   forêt portant du texte, ce que la doctrine interdit. Cette règle avait
   été retirée par erreur avec l'ancienne bascule ; sans elle, le bouton
   « Sign in » redevient illisible. */
button.ok, .cta.ok, .cta.flux{background:var(--neon);color:var(--surNeon);
  border-color:transparent}
button.ok:hover, .cta.ok:hover, .cta.flux:hover{
  background:color-mix(in srgb,var(--neon) 82%,#ffffff);color:var(--surNeon)}

/* La bascule annuel / mensuel a changé de dessin : ce n'est plus deux
   boutons dont l'un est rempli, mais un curseur néon qui glisse sous le
   texte (abonnement.html). Les anciennes règles remplissaient le bouton
   par-dessus le curseur avec !important, et le curseur ne se voyait
   plus. Mais `.bascule` n'appartient pas à la page des prix : orgue.html
   s'en sert pour Materials / Accords. La règle revient donc, et c'est la
   page des prix qui porte son propre nom, `.bascule.glissante`. */
/* Le segment retenu portait un blanc littéral (#f2faf3) sur var(--or) :
   dans les neuf modes sombres --or EST une teinte claire, donc du
   presque-blanc sur du presque-blanc — 1,3 à 2,0:1. Même traitement que
   `.unites button.on` seize lignes plus bas : l'encre du texte sur le fond
   de page, qui tient de 13,6 à 18,3:1 dans les dix-huit variantes. */
.bascule:not(.glissante) button.on{background:var(--texte)!important;color:var(--fond)!important;
  border-color:transparent!important}
.bascule2 button.on{
  background:var(--neon)!important;color:var(--surNeon)!important;
  border-color:transparent!important}

/* Le segment retenu des petits sélecteurs — unités, échelles, paliers.
   Le motif hérité posait la couleur de marque SUR un lavis de la même
   couleur : #14532d sur 14 % de #14532d donne 2,3:1, illisible. Le
   retenu se lit par un aplat d'encre, pas par une teinte sur sa teinte.
   Il n'est pas en néon : un seul aplat de néon par barre, et c'est le
   bouton d'action qui le porte. */
.unites button.on, .echelle button.on, .haut .unites button.on,
.droite .unites button.on{
  background:var(--texte)!important;color:var(--fond)!important;
  border-color:transparent!important}

/* les chiffres d'une grille sont des DONNÉES, pas des accents :
   vingt-trois nombres en vert forêt font un mur, pas une hiérarchie */
.num{color:var(--texte)}
.places{color:var(--doux)}

/* ============================================================
   LE SCEAU — 13/08/2026, demande de Jimmy.

   Un écran qui porte une formule le dit : liseré néon en haut et
   à droite, un cadenas au coin, et sous la souris la phrase qui
   dit CE QUI EST VRAI de cet espace-là.

   LA RÈGLE QUI TIENT TOUT : le texte du cadenas est l'ÉTAT, il ne
   le décrit pas. Il vient de data-sceau, qui vient du serveur.
   Le jour où le coffre existe, l'état change et la phrase change
   avec lui — il n'y a aucun endroit où quelqu'un puisse écrire
   une promesse plus forte que ce que le code fait vraiment.
   C'est la faute qui a tué deux versions de la page About :
   une phrase de sécurité qu'on écrit à la main dérive du code
   dans la semaine, et personne ne s'en aperçoit.

   Le néon REMPLIT, il n'écrit pas : le liseré est un aplat, le
   cadenas est un pictogramme posé dessus en vert forêt.
   ============================================================ */
/* NOM DE CLASSE : deux collisions payées ici en dix minutes. `.sceau` est
   déjà le filigrane des thèmes exclusifs (themes.css) — mon cadenas héritait
   de son `left:50%;transform:translateX(-50%)` et se posait au milieu de
   l'écran au lieu du coin. Et `.scelle` est déjà l'état d'une modale qui
   attend une réponse (jeux.html, #voile). Un fichier de style partagé par
   onze pages n'a pas de noms courts disponibles : on vérifie avant. */
.zoneScellee{position:relative}
/* le liseré : haut et droite seulement, comme un coin de coffre */
/* LA MÊME EXCEPTION QUE LE NOM : le sceau ne se thème pas. Une famille
   repeint --neon avec sa teinte d'accent — sous Boisé le cadenas passait
   ocre, sous Floral rose. Un signal de sécurité qui change de couleur selon
   la peau choisie n'est plus un signal, c'est une décoration : on ne le
   reconnaît plus d'un écran à l'autre. Vert néon #39FF14 et encre vert forêt
   #0C3A1E, en dur, dans les onze thèmes et les deux modes. */
/* 1 px au lieu de 3 (Jimmy, 25/08) : le liseré signale, il ne souligne pas */
.zoneScellee::before{
  content:'';position:absolute;top:0;right:0;left:0;height:1px;
  background:linear-gradient(90deg,rgba(57,255,20,.12),#39FF14);
  pointer-events:none;z-index:4}
.zoneScellee::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:1px;
  background:linear-gradient(180deg,#39FF14,rgba(57,255,20,.08));
  pointer-events:none;z-index:4}

/* moitié de sa taille d'origine (Jimmy, 25/08) : un sceau, pas un bandeau */
.cadenas{position:absolute;top:0;right:0;z-index:5;
  display:flex;align-items:center;gap:4px;
  padding:4px 7px 3px;border-radius:0 0 0 8px;
  background:#39FF14;color:#0C3A1E;
  font:600 8px/1 ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.12em;
  text-transform:uppercase;border:0;cursor:help}
.cadenas svg{width:8px;height:8px;display:block;flex:none}
.cadenas:focus-visible{outline:2px solid #0C3A1E;outline-offset:-4px}
/* Le BOUCLIER (v2 — Jimmy : « pas assez shield, nid d'abeille, un dégradé
   sinon on dirait un truc posé ») : un maillage HEXAGONAL né du cadenas,
   dense à son coin, qui se dissout vers le reste de la zone — un champ,
   pas un calque. À la pose du sceau et à chaque clic sur le cadenas.
   Même exception que le sceau : couleurs en dur, un signal de sécurité ne
   se thème pas. */
.grilleScellee{position:absolute;inset:0;pointer-events:none;z-index:4;
  border-radius:inherit;
  background:
    radial-gradient(130% 130% at 100% 0,rgba(57,255,20,.28) 0,
      rgba(57,255,20,.10) 45%,transparent 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cg fill='none' stroke='%2339FF14' stroke-width='2'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 100%,40px 71px;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 0,#000 18%,
    rgba(0,0,0,.45) 42%,transparent 70%);
  mask-image:radial-gradient(120% 120% at 100% 0,#000 18%,
    rgba(0,0,0,.45) 42%,transparent 70%);
  animation:grilleScellee .9s ease-out forwards}
@keyframes grilleScellee{0%{opacity:0}12%{opacity:1}55%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.grilleScellee{display:none}}

/* la phrase. Elle sort au survol ET au clavier — un cadenas qu'on ne
   peut lire qu'à la souris ne rassure que ceux qui ont une souris. */
.cadenas-mot{position:absolute;top:34px;right:0;z-index:6;width:min(320px,80vw);
  padding:13px 15px;border-radius:12px 0 12px 12px;
  background:var(--sombre,#0C3A1E);color:#EAF7EC;
  font:12px/1.6 var(--sans,system-ui);letter-spacing:0;text-transform:none;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
  pointer-events:none}
/* Le gras du tooltip reprend l'encre claire du tooltip lui-même : le néon
   n'écrit jamais (audit du 15/08, n°16) — il reste au remplissage. */
.cadenas-mot b{color:#EAF7EC;font-weight:700}
.cadenas:hover + .cadenas-mot,
.cadenas:focus-visible + .cadenas-mot,
.cadenas-mot:hover{opacity:1;visibility:visible;transform:translateY(0);
  pointer-events:auto}
@media (max-width:640px){
  .cadenas-mot{width:min(280px,92vw)}
  .cadenas{font-size:9px;padding:6px 9px 5px}
}

/* ============================================================
   L'ATTENTE DES CINQ GESTES IA (motif 5, audit du 17/08).

   Posée par `ouvrirAttenteIA`/`fermerAttenteIA` de commun.js. Elle reprend
   `.voile.glass` et `.modale` de themes.css — même verre dépoli, mêmes
   proportions de boîte que toutes les autres modales de la maison — et
   n'ajoute que ce qui manquait : un rond qui tourne, et les secondes qui
   passent. Elle ne se ferme ni au clic dehors ni à Échap : ce n'est pas une
   question qu'on écarte, c'est un geste qui coûte, en train de se faire.

   `z-index` posé PLUS HAUT que la bannière de reprise (9996) et que le
   bandeau de la boîte d'envoi (9999) : posée sans lui, la bannière de
   reprise restait cliquable PAR-DESSUS ce voile — « Review it » ouvrait la
   relecture d'une facture pendant qu'une étiquette était encore en train de
   se lire, deux gestes en vol en même temps (relevé au banc du 17/08). Le
   geste qui coûte doit rester le seul qu'on puisse toucher tant qu'il
   tourne. */
.voileAttenteIA{z-index:10000}
.boiteAttenteIA{display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center;padding:38px 30px}
.rondAttenteIA{width:34px;height:34px;border-radius:50%;
  border:3px solid color-mix(in srgb,var(--neon) 30%,transparent);
  border-top-color:var(--neon);animation:tourneAttenteIA .85s linear infinite}
@keyframes tourneAttenteIA{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rondAttenteIA{animation:none}}
.quoiAttenteIA{font:15px/1.5 var(--sans);color:var(--texte);margin:0}
.ouAttenteIA{font:12px var(--mono);color:var(--doux);margin:0;
  font-variant-numeric:tabular-nums}