/* ============================================================
   Les thèmes de l'atelier — CHAQUE famille existe en CLAIR et
   en SOMBRE (décision de Jimmy, 06/08) : la famille se pose en
   data-theme sur <html>, le mode en data-mode. Sans attribut :
   Classique clair, le défaut.
   Familles standards : Classique, Aquatique, Boisé, Floral,
   Gourmand. Exclusifs Grande Maison : Prune Velours, Mango,
   Ultra-Gourmand™ (qui s'essaie 3/7/30 jours).
   Forêt a été retiré le 10/08/2026 (décision de Jimmy) : les
   comptes qui le portaient retombent sur Classique.
   Répartition par plan (clé serveur = la famille) : Établi ->
   Classique · Établi Plus -> + Aquatique · dès Atelier -> les 5
   standards · Grande Maison -> + les 3 exclusifs.
   LE MODE SE VEND AUSSI depuis le 10/08 : sombre à partir
   d'Atelier Plus, et sombre EN BLOTTOIR à partir de Maison —
   c'est la peau de la maison, celle de l'écran MaquetteZero.
   Le clair reste ouvert à tous. Règle : comptes.mode_permis().
   Typographie n° 4 : Futura capitales espacées + Avenir Next.
   Source de vérité : comptes.py (THEMES).
   ============================================================ */

/* LES POLICES PARTENT AVEC LE PRODUIT (audit UI du 11/08). Avant, --titre
   Futura et --sans Avenir Next n'existaient que sur macOS : un abonné Windows
   — la majorité des parfumeurs indés — voyait Segoe UI et n'avait jamais le
   produit des captures. Deux variables libres (SIL OFL), auto-hébergées, sans
   requête vers un CDN : Jost pour le géométrique des titres (proche Futura),
   Nunito Sans pour l'humaniste du texte (proche Avenir). Le fallback système
   reste en tête d'affiche sur macOS, mais Jost/Nunito le portent partout
   ailleurs. font-display:swap : le texte s'affiche tout de suite, la police
   se substitue à l'arrivée — jamais d'écran blanc. */
@font-face{font-family:'Jost';src:url('/fonts/jost-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('/fonts/nunitosans-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* Ordre : la police macOS d'abord (les captures de Jimmy), puis la police
     EMBARQUÉE (contrôlée, partout — surtout Windows), puis les fallbacks. */
  --sans:'Avenir Next',Avenir,'Nunito Sans','Trebuchet MS','Segoe UI',sans-serif;
  --titre:Futura,'Jost','Century Gothic','Avenir Next','Trebuchet MS',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;

  /* BLOTTOIR CLAIR — LE DÉFAUT DE LA MAISON (07/08, révisé) :
     fond quasi blanc, VERT FORÊT pour l'encre, VERT NÉON pour ce qui
     doit être vu. Deux verts, deux emplois, jamais l'inverse.

     Le forêt écrit : titres, corps, filets. Il fait 12:1 sur le fond.
     Le néon ne porte JAMAIS de texte, il REMPLIT : sur du presque
     blanc il donne 1,3:1, illisible, et c'est pour ça qu'il ne sert
     qu'en fond. Avec du forêt posé dessus il donne 6,7:1.
     La règle qui en découle : ce qui est important est posé SUR du
     néon, jamais écrit EN néon. Un seul aplat par hauteur d'écran. */
  --fond:#fbfcfb; --carte1:#ffffff; --carte2:#f5f9f6;
  --carteV1:#f2faf3; --carteV2:#e8f5ea; --trait:#dfe7e1;
  /* --eteint porte les mentions tertiaires : « mass per family », les
     compteurs, les notes de bas de carte. À #93a398 il tombait à 2,65:1
     sur le fond, sous le seuil de 4,5:1 d'un texte. Assombri jusqu'à
     tenir, sans rejoindre --doux qui garde son rang au-dessus. */
  --texte:#0e1f16; --doux:#59695f; --or:#14532d; --orF:#0c3a1e;
  --prune:#2f7d4f; --sombre:#08170f; --bleu:#1d6fb8; --eteint:#5f7166;
  --glowA:rgba(20,83,45,.06); --glowB:rgba(57,255,20,.10);
  --neon:#39ff14; --neonS:#d6ffc7; --surNeon:#0c3a1e;
}

:root[data-mode="sombre"]{
  /* Blottoir sombre — le même néon, qui prend toute sa force sur le noir */
  --fond:#08120c; --carte1:#0f1c14; --carte2:#0b170f;
  --carteV1:#14261a; --carteV2:#0e1e13; --trait:#1c3324;
  --texte:#eaf4ed; --doux:#93ab9c; --or:#7ee06a; --orF:#5cbf4a;
  --prune:#5fbf87; --sombre:#050d08; --bleu:#6ea8ff; --eteint:#61856d;
  --glowA:rgba(40,120,70,.16); --glowB:rgba(57,255,20,.10);
  --neon:#39ff14; --neonS:#1c3d18; --surNeon:#08120c;
}

/* LES SEPT AUTRES FAMILLES SONT RETIRÉES (Jimmy, 21/08 : « supprime tous les
   thèmes sauf blottoir dark et blottoir light, il est light par défaut mais en
   cliquant on passe au dark »). Aquatique, Boisé, Floral, Gourmand, Prune
   Velours, Mango et Ultra-Gourmand™ vivaient ici en clair et en sombre : sept
   palettes, quatorze blocs, une grille de serrures dans le thémeur, un essai à
   minuter — pour choisir la couleur d'un outil de travail. Reste la peau de la
   MAISON, définie plus haut : le clair par défaut, le sombre d'un clic.
   Les comptes qui portaient une famille retombent sur `classique`
   (comptes._THEMES_ANCIENS), donc personne ne se réveille sans palette. */

/* ---- le socle partagé : fond, lueurs, titres, boutons ---- */

body{background:var(--fond);color:var(--texte)}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(1200px 600px at 50% -20%,var(--glowA),transparent 62%),
             radial-gradient(700px 500px at 90% 100%,var(--glowB),transparent 60%)}

/* La typo n° 4 : Futura en capitales espacées sur TOUS les titres du site.
   (!important assumé : c'est le décret du système de design, il gagne sur
   les shorthands `font:` locaux des pages.) */
h1,h2{font-family:var(--titre) !important;text-transform:uppercase;
  letter-spacing:.09em;font-weight:500 !important}

/* LE bouton du site — celui de la page abonnement, partout pareil. */
.cta{padding:12px 22px;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;font-weight:700;border-radius:12px;
  background:color-mix(in srgb,var(--or) 7%,var(--carte1));
  border:1px solid color-mix(in srgb,var(--or) 32%,transparent);color:var(--or);
  transition:background .18s;text-decoration:none;display:inline-block}
.cta:hover{background:color-mix(in srgb,var(--or) 15%,var(--carte1));
  border-color:color-mix(in srgb,var(--or) 55%,transparent)}
/* le geste principal : cuivre plein, blanc dessus, une ombre courte */
.cta.plein{background:linear-gradient(180deg,var(--or),var(--orF));border:none;
  color:#fff;box-shadow:0 5px 16px color-mix(in srgb,var(--or) 28%,transparent)}
.cta.plein:hover{background:linear-gradient(180deg,
  color-mix(in srgb,var(--or) 88%,#fff),var(--or));
  box-shadow:0 7px 22px color-mix(in srgb,var(--or) 36%,transparent)}
.cta.actuel{background:transparent;border-color:var(--trait);color:var(--doux);cursor:default}

/* Ce qui n'existe que sur le Mac de Jimmy (scraping, outils locaux). */
/* CE QUI N'A DE SENS QU'EN LOCAL est masqué par DÉFAUT et révélé une fois
   le mode connu. L'inverse — visible par défaut, masqué après le fetch —
   peignait « Local · 127.0.0.1 · no data leaves this Mac » sur l'écran de
   chaque abonné le temps d'un aller-retour réseau. Quand on ne sait pas
   encore, on ne montre pas. */
.locale-seulement{display:none !important}
:root[data-local="1"] .locale-seulement{display:revert !important}
/* et son miroir : ce qui n'a de sens QUE pour un abonné */
.saas-seulement{display:none}
:root[data-saas="1"] .saas-seulement{display:block}

/* La navigation de page fait doublon avec la barre du haut dès qu'elle
   existe (SaaS) : on la retire pour ne laisser QU'UN chemin. En local,
   sans barre, elle reste le seul moyen de circuler.
   Le LOGO part avec elle — la barre le porte déjà, en pastille.
   Le NOM DE SECTION, lui, revient : il ne sert plus à dire où l'on est,
   il porte le double vert, et une page sans son nom en grand n'a plus
   de premier mot. */
:root[data-saas="1"] .nav-page{display:none !important}
:root[data-saas="1"] .haut > img:first-of-type{display:none !important}

/* ============================================================
   LE DESIGN SYSTEM — l'ADN de la page abonnement, partagé.
   Jimmy, 06/08 : « les cartes sont arrondies, highlightées type
   néon ; je veux le même sur tout le site ». Ces classes SONT
   la page abonnement, extraites pour toutes les autres.
   ============================================================ */

/* --- LA CARTE : arrondie, dégradé, filet, et qui se soulève --- */
.carte{background:linear-gradient(180deg,var(--carte1),var(--carte2));
  border:1px solid var(--trait);border-radius:16px;position:relative;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.carte.souleve:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--prune) 40%,transparent);
  box-shadow:0 22px 60px color-mix(in srgb,var(--prune) 18%,transparent)}
/* la carte en vedette : bordure d'or + halo néon */
.carte.vedette{background:linear-gradient(180deg,var(--carteV1),var(--carteV2));
  border-color:color-mix(in srgb,var(--or) 50%,transparent);
  box-shadow:0 30px 90px color-mix(in srgb,var(--prune) 30%,transparent)}
/* la carte cliquable : le néon doré au survol */
.carte.vive{cursor:pointer}
.carte.vive:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--or) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--or) 22%,transparent),
    0 22px 60px color-mix(in srgb,var(--or) 14%,transparent)}
/* la carte sélectionnée : elle reste allumée */
.carte.active{border-color:color-mix(in srgb,var(--or) 70%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--or) 30%,transparent),
    0 24px 70px color-mix(in srgb,var(--or) 12%,transparent)}

/* --- LES PANNEAUX : même matière, coins plus doux --- */
.panneau{background:linear-gradient(180deg,var(--carte1),var(--carte2));
  border:1px solid var(--trait);border-radius:14px}
.bloc{background:color-mix(in srgb,var(--carte1) 70%,transparent);
  border:1px solid var(--trait);border-radius:12px}

/* --- LES BOUTONS : la famille .cta, déclinée --- */
.cta.petit{padding:8px 14px;font-size:9.5px;border-radius:10px}
.cta.large{width:100%}
.cta.discret{background:transparent;border-color:var(--trait);color:var(--doux)}
.cta.discret:hover{color:var(--or);border-color:color-mix(in srgb,var(--or) 45%,transparent);
  background:color-mix(in srgb,var(--or) 6%,transparent)}
/* le bouton qui coule d'or — pour l'action principale d'un écran */
.cta.flux{color:var(--sombre);border:none;
  background:linear-gradient(100deg,var(--orF) 0%,var(--or) 35%,
    color-mix(in srgb,var(--or) 55%,#fff) 50%,var(--or) 65%,var(--orF) 100%);
  background-size:200% 100%;animation:upgradeflux 2.4s linear infinite;
  box-shadow:0 0 18px color-mix(in srgb,var(--or) 40%,transparent)}
.cta.flux:hover{box-shadow:0 0 28px color-mix(in srgb,var(--or) 60%,transparent)}
/* le contour d'or qui glisse autour d'un appel à l'action */
.lisere{border-radius:12px;padding:1.5px;
  background:linear-gradient(110deg,
    color-mix(in srgb,var(--or) 18%,transparent) 0%,var(--or) 18%,
    color-mix(in srgb,var(--or) 18%,transparent) 36%,
    color-mix(in srgb,var(--or) 18%,transparent) 100%);
  background-size:300% 100%;animation:lisere 2.8s linear infinite}
.lisere > *{border-radius:10.5px;width:100%}
@keyframes lisere{to{background-position:300% 0}}

/* --- LES CHAMPS : arrondis, et qui s'allument au focus --- */
.champ,input[type=text],input[type=search],input[type=number],input[type=email],
input[type=password],select,textarea{
  background:color-mix(in srgb,var(--carte2) 88%,transparent);
  border:1px solid var(--trait);border-radius:11px;color:var(--texte);
  padding:9px 13px;font:13px var(--sans);transition:border-color .16s,box-shadow .16s}
.champ:focus,input:focus,select:focus,textarea:focus{outline:none;
  border-color:color-mix(in srgb,var(--or) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--or) 12%,transparent)}
input::placeholder,textarea::placeholder{color:var(--eteint)}

/* --- LES PASTILLES, RUBANS ET ÉTIQUETTES --- */
.pastille{display:inline-block;font:9px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;border-radius:9px;padding:3px 10px;
  background:color-mix(in srgb,var(--or) 12%,transparent);color:var(--or);
  border:1px solid color-mix(in srgb,var(--or) 30%,transparent)}
.pastille.douce{background:color-mix(in srgb,var(--prune) 12%,transparent);
  color:var(--prune);border-color:color-mix(in srgb,var(--prune) 32%,transparent)}
.pastille.pleine{background:var(--or);color:var(--sombre);border:none}
.ruban{position:absolute;top:14px;right:-34px;transform:rotate(38deg);font:8px var(--mono);
  letter-spacing:.2em;padding:5px 40px;font-weight:700;background:var(--or);
  color:var(--sombre);z-index:2}
.ruban.violet{background:var(--prune);color:var(--sombre)}

/* --- LES SECTIONS : le titre en capitales espacées + filet --- */
.section{font:400 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--doux);margin:38px 0 14px;display:flex;align-items:center;gap:14px}
.section::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--trait),transparent)}

/* --- LES TABLEAUX : lignes douces, survol allumé --- */
.tableau{width:100%;border-collapse:collapse;font-size:13px}
.tableau th{font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--doux);text-align:left;padding:10px 12px;font-weight:400;
  border-bottom:1px solid var(--trait)}
.tableau td{padding:10px 12px;
  border-bottom:1px solid color-mix(in srgb,var(--trait) 55%,transparent)}
.tableau tr:last-child td{border-bottom:none}
.tableau tbody tr{transition:background .14s}
.tableau tbody tr:hover{background:color-mix(in srgb,var(--or) 6%,transparent)}
.tableau .nombre{text-align:right;font-variant-numeric:tabular-nums;color:var(--texte)}

/* --- LES VOILES ET MODALES : le verre dépoli --- */
/* UNE MODALE PLUS HAUTE QUE L'ÉCRAN SE COUPAIT EN HAUT, SANS DÉFILEMENT
   (panel du 20/08, manche 3). Le sélecteur d'accords mesurait 1472 px dans
   une fenêtre de 860 : son titre était à y = -277, six coups de molette n'y
   changeaient rien, et les premiers accords de la liste — triée par ordre
   alphabétique — étaient définitivement hors d'atteinte. Le voile défile,
   et il aère par le haut et le bas au lieu de centrer à tout prix. */
.voile{position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;overflow-y:auto;
  padding:24px 0;overscroll-behavior:contain;
  background:color-mix(in srgb,var(--sombre) 78%,transparent);backdrop-filter:blur(5px)}
/* MODALE OUVERTE, PAGE IMMOBILE (Jimmy, 25/08 : « je ne veux pas pouvoir
   descendre avec ma souris, rien ne bouge derrière ») : le voile défile,
   le corps se fige. */
body:has(.voile.ouvert){overflow:hidden}
.voile.ouvert{align-items:safe center}
.voile > .modale{max-height:none;flex:0 0 auto}
.voile.glass{background:color-mix(in srgb,var(--fond) 45%,transparent);backdrop-filter:blur(16px)}
.voile.ouvert{display:flex}
/* Le fond vert des cartes quittait la modale (Jimmy, 25/08 : « change la
   couleur verte sur un quasi blanc ») : elle prend le fond de page — quasi
   blanc en clair, juste en sombre — et son trait sombre passe au néon. */
.modale{width:min(560px,94vw);margin:auto;
  background:var(--fond);
  border:1px solid var(--neon);border-radius:18px;
  padding:28px 26px;box-shadow:0 40px 120px color-mix(in srgb,var(--sombre) 60%,transparent)}

/* --- LA PERFORATION : le billet, quand une carte veut son étiquette --- */
.perfo{border-bottom:2px dashed color-mix(in srgb,var(--doux) 35%,transparent);
  position:relative}
.perfo::before,.perfo::after{content:'';position:absolute;bottom:-9px;width:18px;height:18px;
  border-radius:50%;background:var(--fond)}
.perfo::before{left:-10px}
.perfo::after{right:-10px}

/* --- LES CHIFFRES DE VITRINE --- */
.grandnb{font:600 40px var(--sans);letter-spacing:-.035em;color:var(--texte);line-height:1}
.doux{color:var(--doux)}
.or{color:var(--or)}

/* --- LE VIDE : un état vide qui reste élégant --- */
.vide{text-align:center;padding:48px 24px;color:var(--doux);
  border:1px dashed var(--trait);border-radius:16px;
  background:color-mix(in srgb,var(--carte1) 45%,transparent)}

/* ============================================================
   LA BARRE DE COMPTE.

   Elle était grise sur gris, avec un seul objet criard : un bouton
   « Upgrade » en filet doré, hérité du cuivre. C'est la première
   chose que voit un abonné à chaque écran — elle doit ressembler à
   la maison, pas à un bandeau d'ancienne version.

   Le dessin : mono en capitales espacées, une seule destination
   allumée, et le néon réservé à deux endroits — l'onglet courant et
   le geste qui fait payer. Rien d'autre ne brille.
   ============================================================ */
.barrehaut{position:fixed;top:0;left:0;right:0;height:54px;z-index:95;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid color-mix(in srgb,var(--trait) 80%,transparent);
  font:11px var(--mono)}
.barrehaut .gauche{display:flex;align-items:center;gap:22px;min-width:0}
.barrehaut .marque{text-decoration:none;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;font-size:11px;white-space:nowrap;
  display:flex;align-items:center;gap:9px}
/* Le nom porte sa pastille ici comme partout ailleurs : c'est le logo. Le
   fort interlettrage creuse un vide à droite du dernier caractère, on le
   rattrape pour que l'aplat reste centré sous le mot. */
.barrehaut .marque .nomB{padding:2px .16em 2px .3em;border-radius:7px}
/* LES SIX CUBES SONT LE LOGO (Jimmy, 19/08) : la pyramide 1-2-3 en
   néon dur %2339FF14 — le logo ne se thème jamais, comme la pastille. */
.barrehaut .marque::before{content:'';width:15px;height:15px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='%2339FF14'%3E%3Crect x='9.5' width='7' height='7' rx='2'/%3E%3Crect x='4.75' y='9.5' width='7' height='7' rx='2'/%3E%3Crect x='14.25' y='9.5' width='7' height='7' rx='2'/%3E%3Crect y='19' width='7' height='7' rx='2'/%3E%3Crect x='9.5' y='19' width='7' height='7' rx='2'/%3E%3Crect x='19' y='19' width='7' height='7' rx='2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 6px rgba(57,255,20,.5))}
.barrehaut .menu{display:flex;gap:3px}
.barrehaut .menu a sup{font-size:.62em;letter-spacing:0;vertical-align:.5em;opacity:.75}
/* La pastille NEW. Elle porte du néon en APLAT, avec l'encre dessus — jamais
   du texte néon sur le fond clair, où il tombe à 1,3:1. Elle est minuscule et
   ne s'allume qu'une fois dans la barre : c'est un signal, pas une décoration,
   et deux « New » à l'écran n'en font plus aucun. */
.barrehaut .menu a b.neuf{display:inline-block;margin-left:6px;vertical-align:1px;
  padding:2px 5px;border-radius:5px;font:700 7.5px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;
  background:#39FF14;color:#0C3A1E;
  box-shadow:0 0 12px rgba(57,255,20,.5)}
.barrehaut .menu a{color:var(--texte);opacity:.66;text-decoration:none;padding:8px 12px;border-radius:9px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  transition:color .16s,background .16s}
.barrehaut .menu a:hover{opacity:1;background:color-mix(in srgb,var(--or) 8%,transparent)}
/* La page où l'on est : remplie en néon, encre vert forêt. Une seule
   destination allumée à la fois, donc jamais deux aplats côte à côte. */
/* L'onglet courant se marque à l'encre, pas au néon : depuis que la marque
   porte sa pastille, deux aplats voisins se disputeraient l'œil et on ne
   saurait plus lequel est le logo. L'anneau tient l'identification. */
.barrehaut .menu a.actif{color:var(--orF);opacity:1;font-weight:700;
  background:color-mix(in srgb,var(--or) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or) 42%,transparent)}
/* Le menu quitte la barre du haut à 760 px, pas à 860 : entre les deux
   il tient encore, et sous 760 c'est mobile_app.css qui le reprend en
   barre du bas. À 860 il disparaissait sans que rien ne le remplace. */
@media(max-width:760px){.barrehaut .menu{display:none}}
@media(max-width:1080px){.barrehaut .menu a{padding:8px 9px;letter-spacing:.1em}}
.barrehaut .droite{display:flex;align-items:center;gap:12px}
/* --eteint n'a été assombri « jusqu'à tenir » que dans le bloc Blottoir :
   dans les huit autres familles il tombe à 1,6-1,9:1. L'adresse passe donc
   sur --texte, réduite en taille plutôt qu'en contraste. */
.barrehaut .email{color:var(--texte);opacity:.75;max-width:200px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.barrehaut #_dec{color:var(--texte);opacity:.66;text-decoration:none;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:9px}
.barrehaut #_dec:hover{opacity:1;background:color-mix(in srgb,var(--or) 8%,transparent)}
/* Le palier haut ne se vend plus : il se porte. Un contour, pas un aplat. */
.barrehaut .pillabo{color:var(--orF);text-decoration:none;font-weight:700;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border-radius:11px;
  white-space:nowrap;border:1px solid color-mix(in srgb,var(--or) 40%,transparent)}
.barrehaut .pillabo:hover{background:color-mix(in srgb,var(--or) 8%,transparent)}

/* LE bouton Upgrade : le filet qui coule, en néon. C'est le seul geste
   de la barre qui fait payer, donc le seul qui a le droit de bouger. */
@keyframes upgradeflux{to{background-position:200% 0}}
/* ---- la droite de la barre : ce qui n'est pas l'atelier ----
   « What Lands Next » regarde vers demain, « My Account » vers le compte,
   « Upgrade » vers la caisse. Trois registres, donc trois poids : un lien
   nu, un bouton discret qui ouvre un tiroir, et le seul néon de la barre. */
.barrehaut .lien{color:var(--texte);opacity:.66;text-decoration:none;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  padding:8px 12px;border-radius:9px}
.barrehaut .lien:hover{opacity:1;background:color-mix(in srgb,var(--or) 8%,transparent)}
.barrehaut .lien.actif{opacity:1;color:var(--orF);font-weight:700;
  background:color-mix(in srgb,var(--or) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or) 42%,transparent)}

.barrehaut .compte{position:relative}
.barrehaut .declic{background:none;border:1px solid color-mix(in srgb,var(--trait) 90%,transparent);
  color:var(--texte);opacity:.8;cursor:pointer;border-radius:9px;padding:8px 12px;
  font:9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;gap:6px}
.barrehaut .declic:hover{opacity:1;border-color:color-mix(in srgb,var(--or) 45%,transparent)}
.barrehaut .declic i{font-style:normal;font-size:8px;opacity:.7}
.barrehaut .declic[aria-expanded="true"] i{transform:rotate(180deg)}
/* Le tiroir sort SOUS la barre. Il porte un fond opaque et non un fond
   translucide : posé sur du contenu, un menu semi-transparent se lit en
   double et on clique à côté. */
.barrehaut .tiroir{position:absolute;top:calc(100% + 12px);right:0;min-width:230px;
  display:flex;flex-direction:column;padding:8px;border-radius:14px;z-index:3;
  background:var(--fond);border:1px solid var(--trait);
  box-shadow:0 22px 60px color-mix(in srgb,var(--sombre) 26%,transparent)}
.barrehaut .tiroir[hidden]{display:none}
/* le décompte des lectures photo : un témoin discret, pas un lien */
/* le mini-tableau d'usage du tiroir : une ligne par feature, le restant
   en chiffre — jamais un coût */
.barrehaut .tiroir .cout .ulab{display:block;font:8px var(--mono);
  letter-spacing:.18em;text-transform:uppercase;font-style:normal;
  color:var(--eteint);margin-bottom:5px}
.barrehaut .tiroir .cout .ul{display:flex;justify-content:space-between;
  gap:12px;padding:2.5px 0}
.barrehaut .tiroir .cout .ul i{font-style:normal;color:var(--doux)}
.barrehaut .tiroir .cout .ul b{color:var(--texte);
  font-variant-numeric:tabular-nums}
.barrehaut .tiroir .cout{display:block;padding:2px 11px 8px;font:9px var(--mono);
  letter-spacing:.04em;color:var(--eteint)}
.barrehaut .tiroir .qui{padding:9px 11px 11px;font:10px var(--mono);color:var(--doux);
  letter-spacing:.04em;text-transform:none;word-break:break-all;
  border-bottom:1px solid var(--trait);margin-bottom:6px}
/* le geste destructeur du tiroir : encre prune, jamais mis en avant */
.barrehaut .tiroir a.danger{color:var(--prune);font-size:11px;opacity:.85;
  border-top:1px solid color-mix(in srgb,var(--trait) 70%,transparent);
  margin-top:4px;padding-top:12px}
.barrehaut .tiroir a{display:block;padding:10px 11px;border-radius:9px;
  color:var(--texte);text-decoration:none;font:10px var(--mono);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.barrehaut .tiroir a:hover{background:color-mix(in srgb,var(--or) 10%,transparent);
  color:var(--orF)}
.barrehaut .tiroir a:last-child{margin-top:4px;
  border-top:1px solid var(--trait);border-radius:0 0 9px 9px}

/* Le bouton DÉBORDE de la barre, volontairement. C'est le seul geste payant
   du produit : rangé à la même hauteur que « sign out », il se lisait comme
   un lien de service. Il dépasse donc en bas, il porte une ombre portée qui
   le décolle, et la barre le laisse sortir (`overflow:visible` plus bas).
   C'est la seule chose de l'écran qui a le droit de casser l'alignement. */
.barrehaut .upgrade{color:var(--surNeon);text-decoration:none;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:11px;
  padding:13px 22px;border-radius:13px;white-space:nowrap;
  /* Il descend dans les 12 px d'air que `--horsecran` réserve sous la barre :
     il dépasse donc le filet du bas sans jamais recouvrir le contenu. Le
     `transform` plutôt qu'une marge — la marge décalerait ses voisins. */
  position:relative;z-index:2;transform:translateY(14px);
  box-shadow:0 10px 26px color-mix(in srgb,var(--neon) 42%,transparent),
    0 0 0 3px color-mix(in srgb,var(--fond) 92%,transparent);
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--neon) 78%,var(--surNeon)) 0%,
    var(--neon) 35%,
    color-mix(in srgb,var(--neon) 55%,#ffffff) 50%,
    var(--neon) 65%,
    color-mix(in srgb,var(--neon) 78%,var(--surNeon)) 100%);
  background-size:200% 100%;animation:upgradeflux 2.6s linear infinite;
  transition:transform .15s,box-shadow .15s}
/* Au survol il remonte d'un cheveu SANS revenir dans la barre : le hover
   redéclare la translation complète, sinon il annulait le débord. */
.barrehaut .upgrade:hover{transform:translateY(12px);
  box-shadow:0 12px 34px color-mix(in srgb,var(--neon) 65%,transparent),
    0 0 0 3px color-mix(in srgb,var(--fond) 92%,transparent)}
/* Sous 760 px la barre devient une nav du bas : plus rien à faire déborder. */
@media(max-width:760px){
  .barrehaut .upgrade,.barrehaut .upgrade:hover{transform:none;
    padding:9px 15px;font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){.barrehaut .upgrade{animation:none}}
.barrehaut .pillabo:hover{background:color-mix(in srgb,var(--or) 10%,transparent)}
/* `color` retiré : la règle plus haut pose --texte à 66 %, et repeindre
   ici en --doux sans lever l'opacité donnait 2,2 à 2,8:1 sur 17 thèmes. */
.barrehaut #_dec{text-decoration:none}
.barrehaut #_dec:hover{color:var(--or)}
/* La hauteur que la barre de compte prend au document. Elle est écrite
   ICI et nulle part ailleurs : les pages de l'atelier calculent leur
   plein écran avec `calc(100vh - var(--horsecran))`, donc changer la
   barre de 46 à 54 px ne laisse plus trois pages avec un bas coupé. */
:root{--horsecran:0px}
:root[data-barre="1"]{--horsecran:66px}  /* 54 px de barre + 12 d'air */
:root[data-barre="1"] body{padding-top:var(--horsecran)}

/* ============================================================
   LA TRANCHE — le rail vertical du Playground (M1, Jimmy 25/08).
   Sur l'écran de travail, la barre du haut n'existe pas : les
   sections s'écrivent à la verticale sur 44 px, comme la tranche
   d'un livre, et la barre de travail devient la SEULE barre
   horizontale. Une page le demande avec l'attribut statique
   `data-rail` sur <html> ; commun.js pose `data-railpose` quand
   le rail est réellement construit (SaaS connecté seulement) —
   c'est LUI qui décale le corps, jamais l'intention seule.
   Le néon garde sa discipline : la pastille-logo est le logo
   (jamais thémée), et le seul aplat néon de l'écran reste SAVE
   TRIAL — l'Upgrade du rail est un mot d'encre, pas un bouton
   qui brille. */
:root[data-railpose="1"] body{padding-left:44px}
/* z-index 10000 : le compte et l'upgrade vivent en BAS du rail, là où les
   bandeaux de panne et de reprise (z 9996-9999) se posent — sur les pages à
   barre le compte était en haut et ce conflit n'existait pas. Le rail passe
   au-dessus, et les bandeaux se décalent de sa largeur (plus bas). */
.railtranche{position:fixed;top:0;left:0;bottom:0;width:44px;z-index:10000;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0;
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-right:1px solid color-mix(in srgb,var(--trait) 80%,transparent);
  font:11px var(--mono)}
/* la pastille seule est le logo : les six cubes néon, sans le mot */
.railtranche .marque{width:28px;height:28px;flex:none;display:block;border-radius:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='%2339FF14'%3E%3Crect x='9.5' width='7' height='7' rx='2'/%3E%3Crect x='4.75' y='9.5' width='7' height='7' rx='2'/%3E%3Crect x='14.25' y='9.5' width='7' height='7' rx='2'/%3E%3Crect y='19' width='7' height='7' rx='2'/%3E%3Crect x='9.5' y='19' width='7' height='7' rx='2'/%3E%3Crect x='19' y='19' width='7' height='7' rx='2'/%3E%3C/g%3E%3C/svg%3E") center/20px no-repeat;
  filter:drop-shadow(0 0 6px rgba(57,255,20,.5))}
/* railsep / railfiche : noms PROPRES AU RAIL. « filet » et « fiche »
   existaient déjà nus sur Formulas et Batches — le séparateur du rail
   héritait d'un padding de carte et se peignait en pavé gris sous le logo
   (Jimmy, 25/08 : « c'est quoi cette tache grise »). Même leçon que la
   palette : un composant partagé par onze pages ne porte pas de nom court. */
.railtranche .railsep{width:22px;height:1px;flex:none;margin:7px 0;
  background:color-mix(in srgb,var(--trait) 90%,transparent)}
/* overflow : sur une fenêtre basse (<650 px), les mots défilent au lieu
   de s'écraser sur My Account — la molette suffit, pas de barre visible */
.railtranche .vnav{display:flex;flex-direction:column;align-items:center;gap:2px;
  flex:1;min-height:0;width:100%;overflow-y:auto;scrollbar-width:none}
.railtranche .vnav::-webkit-scrollbar{display:none}
.railtranche .vnav a{position:relative;width:100%;display:flex;align-items:center;
  justify-content:center;padding:11px 0;text-decoration:none;
  color:var(--texte);opacity:.6;transition:opacity .16s,background .16s}
.railtranche .vnav a:hover{opacity:1;
  background:color-mix(in srgb,var(--or) 8%,transparent)}
/* le mot, écrit de bas en haut comme sur la tranche d'un livre */
.railtranche .vmot{writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 8.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap}
/* la page où l'on est : encre pleine et filet à gauche, jamais de néon —
   même geste que l'onglet actif de la barre horizontale */
/* le liseré de la page courante est NÉON (Jimmy, 25/08 : « le liseré du
   menu tout à gauche n'est pas en vert néon ») : un petit aplat, le même
   geste que le liseré du sceau — le mot, lui, reste à l'encre */
.railtranche .vnav a.actif{opacity:1;color:var(--orF);font-weight:700;
  box-shadow:inset 2px 0 0 var(--neon);
  background:color-mix(in srgb,var(--or) 10%,transparent)}
/* LA FICHE DE SURVOL : le mot à l'horizontale, dans une carte qui sort à
   droite du rail. Une aide de lecture, pas un menu — elle ne se clique
   pas, elle n'a donc pas besoin d'exister au doigt (le mot vertical reste
   la vraie étiquette, lisible partout). */
.railtranche .railfiche{position:absolute;left:calc(100% + 10px);top:50%;
  transform:translateY(-50%);padding:8px 13px;border-radius:9px;z-index:3;
  background:var(--fond);border:1px solid var(--trait);
  box-shadow:0 14px 40px color-mix(in srgb,var(--sombre) 30%,transparent);
  font:700 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--texte);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .14s}
.railtranche a:hover .railfiche,.railtranche a:focus-visible .railfiche,
.railtranche button:hover .railfiche,.railtranche button:focus-visible .railfiche{opacity:1}
/* LE SERMENT EN HAUT (26/08 : « en haut, pas à gauche », puis « pas en
   vert forêt, je déteste cette couleur ») : un bandeau de PAPIER — le
   fond du thème, l'encre du thème, un filet dessous — ouvert par la
   pastille néon du nom (c'est le logo, hors budget néon), puis le
   positionnement, puis la paire. La carte d'état, elle, reste un signal
   de sécurité aux couleurs dures. */
/* SANS BULLE NI SURVOL (Jimmy, 01/09) : une ligne, pas un bouton —
   curseur normal, aucun état hover. */
.sermenthaut{position:fixed;top:0;left:44px;right:0;height:26px;z-index:94;
  display:flex;align-items:center;justify-content:center;
  border:0;border-bottom:1px solid color-mix(in srgb,var(--trait) 80%,transparent);
  background:var(--fond);color:var(--texte)}
.sermenthaut span{font:600 8.5px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;display:flex;align-items:center;gap:7px}
.sermenthaut .nomB{font-size:9px;padding:2px .3em}
:root[data-serment="1"]{--serment-h:26px}
:root[data-serment="1"] body{padding-top:26px}
/* les coquilles d'application (100dvh) soustraient le bandeau : sans ça,
   chaque écran de travail gardait 26 px de défilement fantôme — le pied
   glissait dessous et semblait coller (mesuré sur l'Orgue, 26/08) */
:root[data-serment="1"] .coquilleApp{height:calc(100vh - 26px);
  height:calc(100dvh - 26px)}
/* AU TELEPHONE LA COQUILLE SE DEPLIE (27/08). La regle ci-dessus est plus
   specifique que le « body .coquilleApp{height:auto} » de mobile_app.css :
   elle gagnait, la coquille restait haute comme l'ecran, la scene se
   trouvait ecrasee a 195 px et le milieu du Playground debordait de 353 px
   SOUS le pied. Le depliage se dit donc ici, ou il peut gagner. */
@media (max-width:760px){
  :root[data-serment="1"] .coquilleApp,
  :root .coquilleApp{height:auto;min-height:0;overflow:visible}
}
/* le rail passe DEVANT le bandeau et garde sa pleine hauteur */
/* (la carte #_sermentMot est retirée avec la bulle du serment, 01/09) */
/* sous 760 px le rail est en bas : le bandeau prend toute la largeur */
@media(max-width:760px){.sermenthaut{left:0}
  .sermenthaut span{letter-spacing:.08em;font-size:7.5px}}

/* le bas du rail : le compte puis l'upgrade, en mots d'encre */
.railtranche .compte{position:relative;width:100%}
.railtranche .declic{width:100%;background:none;border:0;cursor:pointer;
  padding:11px 0;display:flex;align-items:center;justify-content:center;
  color:var(--texte);opacity:.6;position:relative}
.railtranche .declic:hover,.railtranche .declic[aria-expanded="true"]{opacity:1;
  background:color-mix(in srgb,var(--or) 8%,transparent)}
.railtranche .declic .vmot{font-size:8px}
/* le tiroir du compte sort À DROITE du rail, ancré en bas — mêmes items
   que partout, plus Roadmap qui a suivi le déménagement de la barre */
.railtranche .tiroir{position:absolute;left:calc(100% + 12px);bottom:0;
  min-width:230px;display:flex;flex-direction:column;padding:8px;
  border-radius:14px;z-index:3;background:var(--fond);
  border:1px solid var(--trait);
  box-shadow:0 22px 60px color-mix(in srgb,var(--sombre) 26%,transparent)}
.railtranche .tiroir[hidden]{display:none}
.railtranche .tiroir .qui{padding:9px 11px 11px;font:10px var(--mono);
  color:var(--doux);letter-spacing:.04em;word-break:break-all;
  border-bottom:1px solid var(--trait);margin-bottom:6px}
.railtranche .tiroir a{display:block;padding:10px 11px;border-radius:9px;
  color:var(--texte);text-decoration:none;font:10px var(--mono);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.railtranche .tiroir a:hover{background:color-mix(in srgb,var(--or) 10%,transparent);
  color:var(--orF)}
.railtranche .tiroir a.danger{color:var(--prune);font-size:11px;opacity:.85;
  border-top:1px solid color-mix(in srgb,var(--trait) 70%,transparent);
  margin-top:4px;padding-top:12px}
/* position:relative : la fiche de survol s'ancre sur le lien, pas sur le
   rail entier (sans elle, la carte flottait au milieu du bord gauche) */
.railtranche .upgrade{width:100%;display:flex;align-items:center;justify-content:center;
  padding:11px 0 4px;text-decoration:none;color:var(--orF);opacity:.85;position:relative;
  border-top:1px solid color-mix(in srgb,var(--trait) 90%,transparent);margin-top:6px}
.railtranche .upgrade:hover{opacity:1}
.railtranche .upgrade .vmot{font-size:8px;font-weight:700}
/* Sous 760 px, le rail rend la navigation au pouce : son vnav devient la
   barre du bas, exactement comme le menu de la barre horizontale dans
   mobile_app.css. Le compte et l'upgrade se replient — ils restent à un
   tap, sur toutes les autres pages qui portent la barre de compte. */
/* ce qui vit collé au bord gauche ou au bas de l'écran fait place au rail */
/* !important : les bandeaux posent leur left:0 en style inline */
:root[data-railpose="1"] #_bandeauPanne,
:root[data-railpose="1"] #_bandeauReprise{left:44px !important}
:root[data-railpose="1"] .themeur{left:52px}
:root[data-railpose="1"] #tutoReprendre{left:62px}
:root[data-railpose="1"] #_invite{left:62px}
@media(max-width:760px){
  :root[data-railpose="1"] #_bandeauPanne,
  :root[data-railpose="1"] #_bandeauReprise{left:0 !important}
  :root[data-railpose="1"] .themeur{left:8px}
  :root[data-railpose="1"] #tutoReprendre{left:18px}
  :root[data-railpose="1"] #_invite{left:18px}
  .railtranche{position:static;width:auto;border:0;background:none;
    backdrop-filter:none;padding:0}
  .railtranche .marque,.railtranche .railsep,.railtranche .compte,
  .railtranche .upgrade,.railtranche .railfiche{display:none}
  .railtranche .vnav{flex-direction:row;position:fixed;left:0;right:0;bottom:0;
    top:auto;z-index:96;gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--fond) 92%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--trait)}
  /* overflow:hidden + interlettrage court (01/09) : « MaquetteZero™ »
     porte 13 caractères — à .06em les cinq onglets faisaient 383 px et
     le dernier mordait 8 px hors écran (sonde mobile) */
  .railtranche .vnav a{flex:1;padding:11px 2px;min-width:0;min-height:44px;
    overflow:hidden}
  .railtranche .vmot{writing-mode:horizontal-tb;transform:none;
    font-size:9.5px;letter-spacing:.02em;white-space:nowrap;max-width:100%}
  .railtranche .vnav a.actif{box-shadow:inset 0 0 0 1.5px
    color-mix(in srgb,var(--or) 45%,transparent)}
  :root[data-railpose="1"] body{padding-left:0;
    padding-bottom:calc(76px + env(safe-area-inset-bottom))}}

/* Le sceau des thèmes exclusifs : le nom du thème, petit, doré, centré en
   haut de chaque écran — discret mais senti. Injecté par commun.js,
   seulement pour Prune Velours, Mango et Ultra-Gourmand™. */
.sceau{position:fixed;bottom:13px;left:50%;transform:translateX(-50%);z-index:96;
  pointer-events:none;font:9px var(--mono);letter-spacing:.34em;text-transform:uppercase;
  color:var(--or);opacity:.55;text-shadow:0 0 18px color-mix(in srgb,var(--or) 45%,transparent)}
@media print{.sceau,.barrehaut{display:none}}
/* pour les captures de la vitrine : rien qui traverse l'écran */
:root[data-capture="1"] .sceau,:root[data-capture="1"] .themeur,
:root[data-capture="1"] .barrehaut .email,
:root[data-capture="1"] .barrehaut #_dec{display:none}

/* ---- le curseur des thèmes (injecté par commun.js) ---- */
/* 8px + 30px : le bord droit du bouton reste sous les 40px de gouttière des
   pages — mesuré sur /abonnement, à 14px+34px il recouvrait 5px du bouton
   « Compare with Plus! » de la première carte, inatteignables au clic. */
/* LE THÉMEUR EST UN INTERRUPTEUR (21/08). Son panneau — titre, deux modes,
   huit familles avec pastilles, serrures et compteurs d'essai — a disparu avec
   les sept peaux retirées. Il ne reste que le bouton rond. */
.themeur{position:fixed;bottom:12px;left:8px;z-index:90;font:11px var(--mono)}
.themeur .bouton{width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid var(--trait);background:linear-gradient(135deg,var(--carte1),var(--carte2));
  color:var(--or);font-size:15px;display:flex;align-items:center;justify-content:center}
.themeur .bouton:hover{border-color:var(--or)}
/* le thémeur est un vrai <button> depuis le 11/08 : il lui faut un anneau de
   focus VISIBLE, sinon l'ouvrir au clavier se fait à l'aveugle */
.themeur .bouton:focus-visible{outline:2px solid var(--or);outline-offset:3px}