/* ============================================================================
ALESIA · COUCHE COMPOSANTS
----------------------------------------------------------------------------
Consolidation de ui-kit.html + va_control_plane.html.
Dépend de tokens.css — à charger APRÈS lui, jamais seul.
Les blocs marqués [FIX] corrigent un défaut présent dans les maquettes
d'origine ; le détail et la reproduction sont dans design/FIXES.md.
========================================================================== */
/* ==========================================================================
0 · RESET & BASE
========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scrollbar-gutter:stable;scroll-behavior:smooth}
body{
background:var(--bg);
color:var(--tx);
font-family:var(--sans);
font-size:var(--fs-body);
line-height:var(--lh);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
/* Signature du produit : deux halos froids décentrés + trame de points. */
background-image:var(--page-halo-1),var(--page-halo-2),var(--page-dots);
background-size:auto,auto,var(--page-dots-size) var(--page-dots-size);
background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-dim);color:var(--sel-tx)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:var(--r);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-h)}
::-webkit-scrollbar-track{background:transparent}
/* Toute donnée numérique comparable passe par .mono → chiffres tabulaires. */
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1}
.muted{color:var(--tx3)}
.up{color:var(--ok)}
.down{color:var(--err)}
/* ==========================================================================
1 · CHÂSSIS — sidebar 244 / topbar 56 / contenu
========================================================================== */
/* La barre est EN FLUX : `flex` et non `grid`, pour que sa largeur pousse le
contenu au lieu de le recouvrir, et que la transition de largeur soit sûre. */
.app{display:flex;min-height:100vh}
main{flex:1;min-width:0}
.wrap{padding:var(--pad-page);max-width:var(--w-max);margin:0 auto}
/* Séquence de démarrage — trois temps décalés, jamais plus. */
@keyframes boot{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.side{animation:boot var(--t-enter) var(--ease) both}
.top {animation:boot var(--t-enter) var(--ease) .08s both}
.wrap{animation:boot .55s var(--ease) .16s both}
/* ============================================================================
ATELIER DE GÉNÉRATION — barre ancrée, galerie, pastilles
Ajouté le 1er août 2026. Reprend la disposition de la maquette d'origine et
la rejoue sur les tokens d'ici : rien n'est en valeur brute, tout suit les
surfaces, les rayons et les rythmes du système.
Le parti pris tient en une phrase : la barre de saisie est FIXE en bas, la
production défile derrière elle. On écrit toujours au même endroit, et ce
qu'on vient de produire monte dans le champ de vision — c'est la boucle d'un
atelier, pas celle d'un formulaire qu'on remplit puis qu'on soumet.
========================================================================= */
/* `.push` n'existait que dans trois conteneurs. On lui ajoute ceux d'ici, plutôt
que de poser une marge à la main dans chaque vue — c'est exactement le genre
de valeur brute que la charte proscrit. */
.studio-head .push,.tools .push,.chips .push,.dd-item .push{margin-left:auto}
/* La barre d'outils de la galerie : filtres et compteur, au-dessus du flot.
C'est une SURFACE du système, pas une rangée posée sur le fond : même rayon,
même bandeau teinté et même halo que les cartes de lot qui la suivent. Une
ligne de contrôles gris en tête d'écran n'annonce rien ; teintée, elle donne
à la page sa couleur d'entrée.
L'écart entre contrôles y est plus large qu'ailleurs (`--sp-5` et non
`--sp-3`) : ce sont six groupes de sens différent — deux segmentés, trois
filtres, un compteur — et non les six pastilles d'un même réglage. Serrés,
ils se lisent comme une seule rangée indistincte. `flex-wrap` reste : au-delà
d'un certain rétrécissement, mieux vaut une seconde ligne qu'un débordement. */
.studio-head{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
padding:var(--sp-4);margin-bottom:var(--sp-4);
background:var(--panel);border:var(--bw) solid var(--cy-line);
border-radius:var(--r)}
/* Les filtres portent la teinte de la barre sur leur icône seule. `.t-c`
complet dessinerait une tuile — ici on n'en veut que la couleur. */
.studio-head .dd > .chip > .ico{color:var(--tile-c)}
/* Le rembourrage bas n'est pas décoratif : sans lui, la barre ancrée masque les
dernières images, et rien n'indique qu'il en reste. */
.studio-gal{padding-bottom:var(--h-dock)}
/* Un lot est une `.card` du système, pas un conteneur propre au module : même
en-tête en dégradé, même tuile d'icône, même relief que partout ailleurs.
Il ne lui manque que le rythme entre deux cartes successives. */
.studio-gal > .card + .card{margin-top:var(--sp-4)}
.studio-gal > .kpi-row{margin-bottom:var(--sp-5)}
/* Grille de variantes. Les vignettes d'un même lot partagent leur format, donc
une grille ne laisse ici aucun trou — contrairement au mur, où les formats se
mélangent. */
.gal{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.shot{position:relative;border-radius:var(--r-sm);overflow:hidden;
border:var(--bw) solid var(--hair);background:var(--panel2);
aspect-ratio:var(--ar,1);cursor:zoom-in}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform var(--t-panel) var(--ease)}
.shot:hover img{transform:scale(1.04)}
.shot > .tools{position:absolute;top:var(--sp-2);right:var(--sp-2);
display:flex;gap:var(--sp-1);opacity:0;transition:opacity var(--t-ui) var(--ease)}
.shot:hover > .tools,.shot:focus-within > .tools{opacity:1}
.shot > .fav{position:absolute;top:var(--sp-2);left:var(--sp-2);
color:var(--warn);font-size:var(--fs-sm);pointer-events:none}
/* Ratios déclarés en classes plutôt qu'en style sur l'élément : une vue ne porte
aucune valeur brute, c'est la première loi de la charte. */
.ar-9-16{--ar:9/16} .ar-4-5{--ar:4/5} .ar-1-1{--ar:1}
.ar-16-9{--ar:16/9} .ar-3-2{--ar:3/2} .ar-2-3{--ar:2/3}
/* ---- Le mur : images jointives ----
Une GRILLE de cellules carrées, et non `columns`.
[FIX] `columns:210px` ne remplissait pas la largeur. Le multi-colonnes
ÉQUILIBRE par défaut : il cherche la hauteur totale la plus courte, pas la
largeur la mieux occupée. Avec six images insécables (`break-inside:avoid`)
dans un cadre qui en accepte cinq de front, il concluait que trois colonnes
de deux étaient plus courtes — et laissait 40 % du mur vide. Rien ne le
signalait : le CSS était valide et faisait exactement ce qu'on lui demandait.
Une grille `auto-fill` n'équilibre rien : elle pose autant de colonnes que la
largeur en contient, et remplit dans l'ordre. Les cellules sont carrées et
recadrent — c'est le prix pour qu'aucune rangée ne laisse de trou quand les
formats se mélangent. Le cadrage complet reste à un clic, dans la
visionneuse. `gap:0` : c'est tout l'objet de la vue, voir la production comme
une matière et non comme un tableau. */
.mur{display:grid;gap:0;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
margin-top:var(--sp-4)}
/* `width:100%` explicite, et non l'étirement par défaut d'un élément de grille :
`aspect-ratio` posé sur une cellule dont les DEUX axes sont automatiques fait
retomber le navigateur sur la taille intrinsèque de l'image. La cellule se
dessinait alors plus étroite que sa piste et s'y centrait — la grille
occupait bien toute la largeur, les images non. */
.mur > .shot{width:100%;margin:0}
/* `nu` : ni bordure, ni arrondi, ni fond — les images se touchent réellement. */
.shot.nu{border:0;border-radius:0;background:transparent;aspect-ratio:1;cursor:zoom-in}
.shot.nu img{width:100%;height:100%;object-fit:cover}
/* ---- File d'attente ----
Ce qui est en cours de production, au-dessus de ce qui est produit. Une série
de dix générations prend plusieurs minutes : sans cette liste, l'écran reste
muet et on ne sait pas si quelque chose avance, ni ce qui a échoué. */
.file{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.file-item{display:flex;align-items:center;gap:var(--sp-3);
padding:var(--sp-3) var(--sp-4);border:var(--bw) solid var(--hair);
border-radius:var(--r-sm);background:var(--panel);font-size:var(--fs-sm)}
.file-item > .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item > .meta{color:var(--tx3);font-family:var(--mono);
font-size:var(--fs-meta);white-space:nowrap}
/* ---- Visionneuse ----
En mosaïque, le clic est le SEUL moyen de lire un prompt en entier : le survol
le tronque. Le prompt est donc sélectionnable — on vient souvent y recopier
celui qui a marché. */
.viewer{position:fixed;inset:0;z-index:var(--z-toast);background:var(--backdrop);
backdrop-filter:blur(var(--backdrop-blur));-webkit-backdrop-filter:blur(var(--backdrop-blur));
display:flex;align-items:center;justify-content:center;padding:var(--sp-7);cursor:zoom-out}
.viewer[hidden]{display:none}
.viewer img{max-width:100%;max-height:100%;border-radius:var(--r);cursor:default}
.viewer > .vprompt{position:fixed;bottom:78px;left:50%;transform:translateX(-50%);
max-width:min(880px,calc(100vw - 64px));max-height:22vh;overflow-y:auto;
cursor:text;user-select:text;background:var(--panel);
border:var(--bw) solid var(--line);border-radius:var(--r-sm);
padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);line-height:1.55;color:var(--tx)}
.viewer > .vbar{position:fixed;bottom:var(--sp-5);left:50%;transform:translateX(-50%);
display:flex;align-items:center;gap:var(--sp-3);cursor:default;
background:var(--panel);border:var(--bw) solid var(--line);
border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3)}
/* Le prompt d'une image du mur, au survol. Rien ne doit couper le mur tant qu'on
ne demande rien : c'est tout l'intérêt de cette vue. */
.shot > .mos-prompt{position:absolute;inset:auto 0 0 0;padding:var(--sp-3);
font-size:var(--fs-note);line-height:1.4;color:var(--tx);
background:var(--panel);border-top:var(--bw) solid var(--hair);
opacity:0;transition:opacity var(--t-ui) var(--ease);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shot:hover > .mos-prompt{opacity:1}
/* ---- La barre ancrée ----
`.ancrage` est un emplacement VIDE, posé dans `main` à côté de `.wrap` et non
dedans. Ce n'est pas une préférence de rangement : `.wrap` porte une animation
d'entrée en `both`, donc un `transform` — fût-il l'identité — qui subsiste une
fois l'animation finie. Un ancêtre transformé devient le bloc conteneur de
tout `position:fixed` qu'il abrite : la barre se serait ancrée au bas de la
VUE au lieu du bas de l'écran, et elle aurait défilé avec le contenu.
Le symptôme est déroutant — une barre « fixe » qui bouge — et la cause est
invisible dans la règle fautive. D'où cet emplacement dédié. */
Cet emplacement accueille aussi les MODALES d'une vue, pour la même raison
poussée d'un cran : `.wrap` transformée n'est pas seulement un bloc conteneur,
c'est un contexte d'empilement. Le voile, lui, est ajouté au `body`. Une
modale restée dans `.wrap` passait donc SOUS le voile quel que soit son
z-index — on voyait l'écran flouté par-dessus la modale. */
.ancrage[hidden]{display:none}
.dock{position:fixed;bottom:var(--sp-4);z-index:var(--z-topbar);
left:calc(var(--w-rail) + var(--bw) + var(--pad-page-x));right:var(--pad-page-x);
transition:left var(--t-panel) var(--ease-panel)}
/* La barre suit le dépliement de la navigation. `position:fixed` l'exclut du
flux, donc rien ne le ferait tout seul : elle passerait sous la barre de
gauche déployée. Le sélecteur de frère atteint `main` depuis `.side`. */
.side.open ~ main .dock{left:calc(var(--w-side) + var(--bw) + var(--pad-page-x))}
.dock-box{background:var(--panel);border:var(--bw) solid var(--line);
border-radius:var(--r);padding:var(--sp-4);box-shadow:var(--shadow-2)}
.dock-box:focus-within{border-color:var(--accent)}
.dock-row{display:flex;align-items:flex-end;gap:var(--sp-4)}
.dock-row > .saisie{flex:1;min-width:0}
/* Le champ n'a ni cadre ni fond : c'est la barre entière qui fait le contenant.
Un input dessiné à l'intérieur d'un panneau dessiné, ce sont deux cadres pour
une seule idée. */
.dock-row textarea{width:100%;border:0;background:transparent;resize:none;
padding:var(--sp-2);font-family:var(--sans);font-size:var(--fs-body);
line-height:1.55;color:var(--tx);min-height:52px;max-height:200px}
.dock-row textarea:focus{outline:none;box-shadow:none}
/* Le compte sur le bouton : le nombre de variantes se lit avant de cliquer, et
quatre images se facturent.
Le fond est un VOILE de la lumière du bouton, pas une surface du thème : le
bouton primaire porte le même bleu dans les deux thèmes, donc `--sunken` y
posait un pavé noir en sombre et blanc en clair — un corps étranger, et
d'une couleur différente selon l'heure. La couleur du texte est héritée. */
.dock-box .cnt{font-family:var(--mono);font-size:var(--fs-meta);
font-weight:var(--fw-semibold);background:var(--btn-p-cnt);color:inherit;
border-radius:var(--r-xs);padding:1px var(--sp-2);margin-left:var(--sp-1)}
/* Zone de dépôt : la barre ENTIÈRE est la cible, pas seulement le champ. Viser
une zone d'une ligne avec un fichier au curseur est pénible ; la barre est une
cible large et évidente. L'overlay ne capte pas les événements — sinon il
volerait le `drop` à la barre qu'il recouvre. */
.dock-box.depot{border-color:var(--accent)}
.dock-box > .depot-voile{position:absolute;inset:0;display:grid;place-items:center;
border-radius:var(--r);background:var(--backdrop);pointer-events:none;
font-size:var(--fs-sm);color:var(--tx);z-index:var(--z-float)}
.dock-box{position:relative}
/* TOUT composant qui déclare son `display` doit déclarer son état caché.
La règle du navigateur pour `[hidden]` est `display:none` à spécificité de
type ; une règle de classe la bat systématiquement. Un élément marqué caché
reste alors visible, sans erreur, sans avertissement — on cherche ailleurs.
Le cas s'est présenté trois fois de suite ici : `.toggle`, `.fld`, `.refs`.
La liste est donc traitée d'un bloc, et tout composant ajouté plus tard qui
pose un `display` doit s'y inscrire.
`.btn` Y MANQUAIT, et c'était un trou du système entier : tout bouton marqué
caché restait affiché. Vu sur le dépôt de fichier, dont la croix de retrait
n'apparaît que lorsqu'un fichier est choisi — elle était là en permanence, et
cliquer dessus ne faisait rien puisqu'il n'y avait rien à retirer. */
.fld[hidden],.refs[hidden],.file[hidden],.opts[hidden],.chips[hidden],
.btn[hidden],.fichier[hidden]{display:none}
/* ---- Rythme vertical d'un corps de modale ----
Un compositeur enchaîne trois sections, six champs et une rangée de réglages.
Sans rythme déclaré, chaque élément se colle au précédent et l'ensemble se lit
comme un bloc unique : on ne voit plus où commence une section.
Le titre de section respire davantage AU-DESSUS qu'en dessous — il appartient
à ce qui suit, pas à ce qui précède. C'est ce qui fait la coupure. */
.modal-body.stack > * + *{margin-top:var(--sp-5)}
.modal-body.stack > .eyebrow{margin-top:var(--sp-7)}
.modal-body.stack > .eyebrow:first-child{margin-top:0}
.modal-body.stack > .eyebrow + *{margin-top:var(--sp-3)}
/* Une note commente le champ juste au-dessus : elle lui reste attachée. */
.modal-body.stack > .note{margin-top:var(--sp-2)}
/* ---- Choix de mode : trois boutons DÉTACHÉS ----
`.opts` et non `.seg`. Le segment accolé convient à un choix binaire —
Tout/Favoris — où les deux termes s'opposent. Ici, chaque bouton change TOUT
le contenu en dessous : ce sont trois modes, pas deux faces d'une bascule, et
l'aplat plein d'un segment ne le disait pas assez fort. */
.opts{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.opts button{height:var(--h-ctrl);padding:0 var(--sp-4);border-radius:var(--r-sm);
border:var(--bw) solid var(--hair);background:var(--sunken);color:var(--tx2);
font-family:var(--sans);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;
transition:border-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease)}
.opts button:hover{color:var(--tx);border-color:var(--accent)}
.opts button.on{color:var(--tx);border-color:var(--accent);background:var(--elev);
box-shadow:inset 0 0 14px -6px var(--accent-glow)}
/* ---- Vignettes de référence ----
Petites, carrées, recadrées : ce qu'on vérifie ici est « quelle image ai-je
jointe », pas son cadrage. Le bouton de retrait est en surimpression et
toujours visible — une référence jointe par erreur doit se retirer sans avoir
à deviner où survoler. */
.refs{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.ref-thumb{position:relative;width:56px;height:56px;border-radius:var(--r-sm);
overflow:hidden;border:var(--bw) solid var(--hair);background:var(--panel2)}
.ref-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ref-thumb > .rm{position:absolute;top:2px;right:2px;width:18px;height:18px;
border:0;border-radius:var(--r-xs);background:var(--elev);color:var(--tx2);
cursor:pointer;font-size:var(--fs-meta);line-height:1;display:grid;place-items:center}
.ref-thumb > .rm:hover{color:var(--tx)}
/* Choisir dans la galerie : les vignettes sont cliquables et la sélection se
marque par un liseré intérieur — un liseré extérieur décalerait la grille. */
.gal.choix .shot{cursor:pointer}
.gal.choix .shot.pris{outline:2px solid var(--accent);outline-offset:-2px}
/* ---- Les pastilles de réglage ---- */
.chips{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.chip{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);
cursor:pointer;height:var(--h-ctrl);padding:0 var(--sp-3);
background:var(--sunken);border:var(--bw) solid var(--hair);border-radius:var(--r-sm);
font-family:var(--sans);font-size:var(--fs-sm);color:var(--tx2);white-space:nowrap;
transition:border-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--tx)}
.chip > .val{color:var(--tx);font-weight:var(--fw-semibold)}
.chip > .ico{display:inline-flex;color:var(--tx3)}
.chip > .ico svg{width:var(--ico-sz);height:var(--ico-sz);
stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chip.on{border-color:var(--accent);color:var(--accent)}
/* `.lumineux` — la pastille qui ouvre un OUTIL, pas un réglage.
Halo interne plutôt qu'aplat plein : la barre porte déjà un bouton primaire,
et un second aplat créerait deux points d'attention en concurrence. */
.chip.lumineux{color:var(--accent);border-color:var(--accent);
background:linear-gradient(180deg,var(--accent-dim),transparent);
box-shadow:inset 0 0 14px -2px var(--accent-glow),var(--inset-hi)}
.chip.lumineux > .ico{color:var(--accent)}
.chip.lumineux:hover{box-shadow:inset 0 0 22px -2px var(--accent-glow),var(--inset-hi)}
/* Le compteur de variantes : deux boutons et un nombre, dans la même pastille.
Une largeur fixe sur le nombre empêche la rangée de tressauter de 1 à 10. */
.chip > .pas{display:inline-flex;align-items:center;gap:var(--sp-1)}
.chip > .pas button{border:0;background:transparent;color:var(--tx3);cursor:pointer;
font:inherit;font-size:var(--fs-body);line-height:1;padding:0 var(--sp-2)}
.chip > .pas button:hover{color:var(--tx)}
.chip > .pas .n{font-family:var(--mono);font-weight:var(--fw-bold);color:var(--tx);
min-width:30px;text-align:center}
/* Menu de pastille : il s'ouvre VERS LE HAUT. Dans une barre collée en bas, un
menu qui descend sort de l'écran. */
/* Ouverture vers le haut — barre ancrée en bas d'écran. L'origine du déroulé
passe en BAS : le panneau doit se dérouler depuis son déclencheur, qui est
alors sous lui. Gardée en haut, l'animation partirait du bord opposé. */
.dd.haut > .dd-menu{top:auto;bottom:calc(100% + 6px);
transform-origin:bottom center;transform:translateY(4px) scaleY(.92)}
.dd.haut.open > .dd-menu{transform:none}
.dd > .chip .caret{width:0;height:0;flex:0 0 auto;margin-left:2px;
border-left:4px solid transparent;border-right:4px solid transparent;
border-top:4px solid currentColor;opacity:.6;
transition:transform var(--t-ui) var(--ease)}
.dd.open > .chip .caret{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
/* Le contrat : rien ne bouge, et rien n'est vide. Les outils d'une vignette
deviennent donc visibles d'emblée au lieu d'apparaître sans transition. */
.shot > .tools{opacity:1;transition:none}
.shot:hover img{transform:none}
}
/* ---------- Sidebar rétractable ----------
Rail (64px, icônes seules) ↔ panneau (244px, icônes + libellés).
Elle se déploie au survol après un délai d'intention, ou reste ouverte si
elle est épinglée. Voir alesia.js → mountSidebar().
INVARIANT : l'icône ne bouge jamais. Elle vit dans un slot de --slot-ico
décalé de --rail-pad, donc son centre tombe au même x dans les deux états
(8 + 48/2 = 32 = 64/2). Seul le libellé s'anime, en opacité.
Sans ça, chaque ouverture ferait glisser toute la colonne d'icônes. */
.side{
/* La bordure s'AJOUTE au rail, elle ne s'y prélève pas — corrigé le 1er août
2026. Avec `box-sizing:border-box`, les 64 px incluaient le trait : la zone
utile tombait à 63, l'item à 47, et le créneau d'icône de 48 dépassait d'un
pixel. Le halo de l'item actif se centrait alors sur 31,5 au lieu de 32,
l'axe que la charte donne pourtant comme invariant. */
width:calc(var(--w-rail) + var(--bw));flex:0 0 auto;overflow:hidden;
border-right:var(--bw) solid var(--hair);
background:var(--side-grad);
display:flex;flex-direction:column;
position:sticky;top:0;height:100vh;
transition:width var(--t-panel) var(--ease-panel);
}
.side.open{width:calc(var(--w-side) + var(--bw))}
/* Tout ce qui n'est pas l'icône disparaît en opacité, sans reflow. */
.side .lbl{white-space:nowrap;opacity:0;
transition:opacity var(--t-panel) var(--ease-panel)}
.side.open .lbl{opacity:1}
/* Slot d'icône — la pièce maîtresse : largeur fixe, centre invariant. */
.slot{display:grid;place-items:center;width:var(--slot-ico);flex:0 0 auto;
margin-left:var(--rail-pad)}
.brand{display:flex;align-items:center;height:var(--h-top);flex:0 0 auto;
border-bottom:var(--bw) solid var(--hair)}
.brand .lbl{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand b{font-weight:var(--fw-semibold);font-size:var(--fs-title);letter-spacing:var(--ls-title)}
.brand span{display:block;font-size:var(--fs-caption);color:var(--tx3);letter-spacing:.3px}
.logo{width:26px;height:26px;border-radius:var(--r-sm);flex:0 0 auto;
background:var(--logo-grad);
border:var(--bw) solid var(--logo-line);display:grid;place-items:center;position:relative;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.logo::before{content:"";width:9px;height:9px;border-radius:var(--r-dot);background:var(--accent);
box-shadow:0 0 12px 1px var(--accent-glow);animation:logoGlow 4s ease-in-out infinite}
@keyframes logoGlow{
0%,100%{box-shadow:0 0 12px 1px rgba(61,214,195,.5)}
50% {box-shadow:0 0 16px 2px rgba(61,214,195,.75)}
}
/* Bascule 2 positions — segmenté pleine largeur de la sidebar */
.toggle{display:flex;gap:var(--sp-1);margin:12px;padding:3px;
background:var(--sunken);border:var(--bw) solid var(--hair);border-radius:var(--r-sm);position:relative}
/* Une bascule posée dans le bandeau du haut n'appartient qu'à une vue : elle
se masque sur les autres. `display:flex` ci-dessus l'emporterait sur le
`[hidden]` du navigateur — il faut donc le dire ici, comme pour `.subnav`. */
.toggle[hidden]{display:none}
/* Dans le bandeau, la bascule s'aligne sur la hauteur des autres contrôles et
perd sa marge : c'est la rangée du bandeau qui espace, pas elle. */
.top-right .toggle{margin:0;align-self:center}
/* `white-space:nowrap` n'est pas une précaution : c'est ce qui donne à chaque
bouton une largeur minimale égale à son libellé entier. Sans lui, un
segmenté serré coupe « Vue A » en deux lignes, la rangée gagne 18 px et
tout ce qui l'entoure se décale. Une bascule à deux positions reste sur
une ligne, ou elle déborde — jamais elle ne se replie. */
.toggle button{flex:1;display:inline-flex;align-items:center;justify-content:center;
border:0;background:transparent;color:var(--tx2);font-family:var(--sans);
font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:6px 8px;border-radius:var(--r-xs);cursor:pointer;
white-space:nowrap;
transition:color var(--t-ui) var(--ease),background var(--t-ui) var(--ease)}
.toggle button:hover{color:var(--tx)}
.toggle button.on{background:var(--elev);color:var(--tx);
box-shadow:var(--inset-hi),var(--shadow-1),inset 0 0 14px -8px var(--accent-glow)}
/* Navigation */
/* `overflow:clip` et non `auto` — modifié le 1er août 2026.
Le livrable laissait la barre défiler. Six pixels de dépassement suffisaient
à faire apparaître l'ascenseur, qui prélève alors 10 px de largeur : les
rangées passaient de 48 à 38 px et le halo de l'item actif se retrouvait
décentré, 16 px de marge à gauche du tracé contre 5 à droite. Le défaut se
lisait comme un mauvais réglage de padding, alors que c'était l'ascenseur.
`clip` ne crée pas de conteneur de défilement : ni barre, ni scroll, ni
largeur prélevée. Le rembourrage vertical passe de 6 à 2 px pour absorber le
dépassement. Contrepartie assumée : au-delà d'une quinzaine d'entrées sur un
petit écran, les dernières seraient rognées. */
nav{padding:2px 0;overflow:clip;flex:1;position:relative}
/* Le libellé de groupe s'aligne sur la colonne des ICÔNES — modifié le 1er août
2026. Le livrable le posait sur la verticale des libellés (56 px).
Il démarre sur `--axe-ico`, là où commence le TRACÉ de l'icône, et non sur
`--rail-pad`, qui est le bord de son slot : le tracé est centré dans les
48 px du slot, donc les deux verticales sont distantes de 16 px. Aligné sur
le bord du slot, le titre paraît collé au bord de la barre.
Il disparaît avec le rail : au format replié il n'aurait aucun sens. */
.nav-lbl{font-size:10px;text-transform:uppercase;letter-spacing:var(--ls-nav);color:var(--tx3);
padding:var(--sp-4) var(--sp-3) 6px var(--axe-ico);
font-weight:var(--fw-semibold);white-space:nowrap;margin-left:0;
opacity:0;transition:opacity var(--t-panel) var(--ease-panel)}
.side.open .nav-lbl{opacity:1}
.nav-item{display:flex;align-items:center;overflow:hidden;
margin:1px var(--rail-pad);padding:var(--sp-2) 0;
border-radius:var(--r-sm);color:var(--tx2);font-size:var(--fs-base);cursor:pointer;
position:relative;
transition:background var(--t-quick) var(--ease),color var(--t-quick) var(--ease)}
.nav-item:hover{background:var(--hover-nav);color:var(--tx)}
.nav-item:hover .ico{color:var(--tx2)}
.nav-item:active{background:var(--hover-nav-on)}
.nav-item.active{background:var(--hover-nav-on);color:var(--tx);
box-shadow:inset 0 0 16px -8px var(--accent-glow)}
/* L'icône reprend le slot invariant, décalé de la marge de l'item. */
.nav-item .ico{display:grid;place-items:center;flex:0 0 auto;
width:var(--slot-ico);
color:var(--tx3);transition:color var(--t-quick) var(--ease)}
.nav-item .ico svg{width:var(--ico-sz);height:var(--ico-sz);stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.nav-item.active .ico{color:var(--accent)}
.nav-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-item .tag{margin-left:auto;margin-right:var(--sp-3);font-size:10px;font-family:var(--mono);
color:var(--tx3);border:var(--bw) solid var(--hair);border-radius:var(--r-xs);padding:0 5px;
background:var(--sunken);white-space:nowrap;
opacity:0;transition:opacity var(--t-panel) var(--ease-panel)}
.side.open .nav-item .tag{opacity:1}
/* Bouton d'épinglage — même gabarit qu'un item de nav. */
.pin{display:flex;align-items:center;overflow:hidden;width:calc(100% - 2 * var(--rail-pad));
margin:0 var(--rail-pad) 6px;padding:var(--sp-2) 0;
border:0;border-radius:var(--r-sm);background:none;color:var(--tx3);
font-family:var(--sans);font-size:var(--fs-sm);cursor:pointer;text-align:left;
transition:background var(--t-quick) var(--ease),color var(--t-quick) var(--ease)}
.pin:hover{background:var(--hover-nav);color:var(--tx)}
.pin.on{color:var(--accent)}
.pin .ico{display:grid;place-items:center;flex:0 0 auto;
width:var(--slot-ico)}
.pin .ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
/* [FIX] `top:0` explicite. Sans lui l'indicateur part de sa position statique
(après les groupes de nav) et le translateY se cumule → rail décalé. */
.nav-ind{position:absolute;top:0;left:0;width:var(--rail);height:15px;border-radius:var(--rail);
background:var(--accent);box-shadow:0 0 8px var(--accent-glow);opacity:0;pointer-events:none;
transition:transform var(--t-slide) var(--ease),opacity var(--t-ui) var(--ease)}
.nav-ind.on{opacity:1}
.side-foot{margin-top:auto;flex:0 0 auto;border-top:var(--bw) solid var(--hair);
padding:var(--sp-2) 0 var(--sp-2)}
.side-status{display:flex;align-items:center;overflow:hidden;
padding:var(--sp-2) 0;font-size:var(--fs-meta);color:var(--tx3)}
.side-status .ico{display:grid;place-items:center;flex:0 0 auto;
width:var(--slot-ico);margin-left:var(--rail-pad)}
/* Pastille vivante — le seul élément en boucle infinie avec le logo. */
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);
box-shadow:0 0 0 0 var(--pulse-halo);animation:pulse 2.4s infinite}
@keyframes pulse{
0% {box-shadow:0 0 0 0 var(--pulse-halo)}
70% {box-shadow:0 0 0 6px transparent}
100%{box-shadow:0 0 0 0 transparent}
}
/* ---------- Topbar ----------
Le padding horizontal est celui de `.wrap` : le titre de page tombe sur la
même verticale que le contenu de la vue. Ne pas les désolidariser. */
.top{height:var(--h-top);border-bottom:var(--bw) solid var(--hair);
display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-page-x);
position:sticky;top:0;z-index:var(--z-topbar);
background:var(--glass);
backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2)}
/* Identité de la vue : icône + titre, toujours dans cet ordre, toujours dans
le bandeau du haut. L'icône est la MÊME que celle de l'item de nav qui mène
à la vue — c'est ce qui relie la barre à la page. */
.top-left{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.top-ico{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
border-radius:var(--r-sm);border:var(--bw) solid var(--hair);
background:var(--panel2);color:var(--accent);box-shadow:var(--inset-hi)}
.top-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.top h1{font-size:var(--fs-title);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);
text-transform:uppercase;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .crumb{font-size:var(--fs-note);color:var(--tx3);font-family:var(--mono);white-space:nowrap}
.top-right{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-code);color:var(--tx2)}
@media(max-width:900px){.top .crumb{display:none}}
/* ---------- Ouverture de vue ----------
Structure imposée de toute section : le titre vit dans le bandeau du haut,
et la vue s'ouvre — quand c'est pertinent — sur son toggle multipage, calé
en haut à GAUCHE. `.view-head` porte ce toggle et ses actions.
Le toggle n'est PAS systématique : une vue à page unique n'en a pas, et on
n'en fabrique pas un pour faire symétrie. Voir la charte §6. */
.view-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
min-height:var(--h-ctrl);margin:0 0 var(--sp-5)}
.view-head .push{margin-left:auto}
.chip-env{display:flex;align-items:center;gap:var(--sp-2);border:var(--bw) solid var(--hair);
border-radius:var(--r-sm);padding:4px 9px;font-size:var(--fs-meta);font-family:var(--mono);
color:var(--tx2);background:var(--glass-chip)}
/* ---------- Zone hors charte ----------
L'échappatoire, et elle est délibérée.
Quand on greffe le châssis sur une interface qui existe déjà, on ne peut pas
tout reprendre le premier jour. Le reset de la section 0 pose sur `body` la
police, la couleur et le fond du produit : une page étrangère déposée telle
quelle dans une vue serait à moitié restylée — ni son ancien aspect, ni le
nouveau. Le pire des deux.
`.hors-charte` coupe cet héritage. Ce qui est dedans redevient du HTML nu,
libre de porter sa propre feuille de style.
C'est une DETTE, pas une porte de sortie. Elle se déclare, elle se date, et
elle se referme page par page. Une zone hors charte qui dure est une zone
dont personne n'a fixé l'échéance. */
.hors-charte{
/* Les propriétés héritées, remises à zéro. Une par une : `all:revert` ne
suffit pas, il rendrait la main à l'agent utilisateur dont la valeur par
défaut est justement « hérite du parent ».
`Canvas` / `CanvasText` sont les couleurs SYSTÈME du navigateur — le fond
et le texte qu'aurait une page sans aucune feuille de style. C'est plus
juste qu'un blanc écrit à la main : on ne remplace pas notre décision par
une autre, on rend la main. */
color:CanvasText; background:Canvas;
font-family:initial; font-size:initial; font-weight:initial;
line-height:initial; letter-spacing:initial; text-align:initial;
-webkit-font-smoothing:auto;
/* Le contenu étranger garde ses dimensions : il ne subit pas la grille. */
display:block; isolation:isolate;
border-radius:var(--r); overflow:hidden;
}
.hors-charte a{color:revert;text-decoration:revert}
.hors-charte ::selection{background:revert;color:revert}
/* Isolation totale — le cas « on ne touche à rien ».
Un cadre embarqué ne partage ni CSS, ni scripts, ni sélecteurs : l'interface
d'origine s'exécute exactement comme avant. C'est le seul moyen de le
GARANTIR. En échange : sa hauteur ne s'ajuste pas seule, le thème ne la
traverse pas, et le routeur ne la connaît pas. */
.frame{display:block;width:100%;border:0;border-radius:var(--r);
background:Canvas;min-height:var(--frame-h,70vh)}
/* `.frame.plein` — une APPLICATION embarquée, pas un extrait. Elle a sa propre
navigation, son propre défilement, ses propres marges : tout rembourrage
qu'on ajoute autour vient s'additionner aux siens et la fait passer pour une
vignette au milieu d'une page. Elle se pose donc de bord à bord, sous le
bandeau et contre la barre de gauche — comme une vraie page.
Les marges négatives annulent, dans l'ordre, le rembourrage haut du
`.tab-panel` (--sp-5), puis les trois côtés du `.wrap` (--sp-6, --pad-page-x,
--sp-9).
La largeur se calcule, elle ne se déduit pas : une iframe est un élément
REMPLACÉ, donc `width:auto` lui rend sa largeur intrinsèque de 300 px au lieu
de suivre les marges négatives. On lui rend donc explicitement les deux
rembourrages latéraux qu'on vient de retirer.
Le rayon tombe à zéro — un coin arrondi contre un bord se voit.
Ajouté le 1er août 2026. */
.frame.plein{height:var(--frame-h-plein);min-height:var(--frame-h-plein);
width:calc(100% + 2 * var(--pad-page-x));border-radius:0;
background:var(--frame-bg);
margin:calc(-1 * (var(--sp-5) + var(--sp-6))) calc(-1 * var(--pad-page-x)) calc(-1 * var(--sp-9))}
/* Bandeau d'échéance — une dette qui ne se voit pas ne se rembourse pas.
Réservé au cas où l'original n'est PAS conservé (cf. §4.6) : dès qu'il y a
une bascule d'origine, la comparaison remplace avantageusement la date. */
.dette{display:flex;align-items:center;gap:var(--sp-2);
font-size:var(--fs-meta);font-family:var(--mono);color:var(--warn);
border:var(--bw) solid var(--warn-line);background:var(--warn-bg);
border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
/* Marque d'origine — ce qu'on regarde n'est PAS la refonte.
Sans elle, quelqu'un relit l'ancien écran et signale des défauts de design
déjà corrigés à côté. Elle ne colore pas seule : elle porte un mot. */
.origine{display:inline-flex;align-items:center;gap:var(--sp-2);
height:var(--h-badge);padding:0 var(--sp-3);border-radius:var(--r-pill);
font-size:var(--fs-meta);font-family:var(--mono);white-space:nowrap;
color:var(--tx3);background:var(--panel2);border:var(--bw) solid var(--hair)}
/* Le cadre d'origine se signale aussi par son pourtour, discrètement. */
.tab-panel.origine-vue .frame{outline:var(--bw) dashed var(--line);outline-offset:2px}
/* ---------- Sous-navigation ----------
Le second niveau de navigation. La barre de gauche mène à une SECTION ;
cette bande mène à une de ses PAGES. « IG API » est une section ; « Comptes »,
« Planning », « Santé » en sont les pages.
Trois choses la distinguent d'onglets (`.tabs`), et ce sont ces trois-là qui
justifient un composant de plus :
· elle est adressable — `#ig-api/planning` se partage et survit au rechargement,
· elle figure au fil d'ariane, donc on sait toujours où l'on est,
· elle vit dans le châssis, sous le bandeau, jamais dans le contenu.
Des onglets découpent une carte ou un panneau. Celle-ci découpe l'application.
Elle colle sous la topbar : en descendant dans un long tableau, on garde le
moyen de changer de page sans remonter. */
.subnav{position:sticky;top:var(--h-top);z-index:var(--z-topbar);
height:var(--h-sub);padding:0 var(--pad-page-x);
border-bottom:var(--bw) solid var(--hair);
background:var(--glass);
backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav[hidden]{display:none}
/* La piste porte l'indicateur : il lui faut un parent positionné qui ne défile
pas indépendamment des items. `max-content` empêche les libellés de se
tasser — une bande trop étroite défile, elle ne comprime pas. */
.subnav-track{position:relative;display:flex;align-items:center;gap:var(--sp-1);
height:100%;min-width:max-content}
.subnav-item{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
height:100%;padding:0 var(--sp-4);border:0;background:transparent;cursor:pointer;
font-family:var(--sans);font-size:var(--fs-base);font-weight:var(--fw-medium);
color:var(--tx2);white-space:nowrap;position:relative;
transition:color var(--t-quick) var(--ease)}
.subnav-item:hover{color:var(--tx)}
.subnav-item[aria-current="page"]{color:var(--tx);font-weight:var(--fw-semibold)}
.subnav-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
/* Le compteur d'une page reste lisible sans devenir l'objet du regard. */
.subnav-item .tag{font-size:var(--fs-micro)}
/* Un seul trait qui glisse, plutôt qu'un soulignement qui apparaît et
disparaît : le déplacement dit d'où l'on vient. */
.subnav-ind{position:absolute;bottom:0;left:0;height:2px;width:0;
border-radius:var(--r-dot);background:var(--accent);opacity:0;
transition:transform var(--t-ui) var(--ease),width var(--t-ui) var(--ease),
opacity var(--t-quick) var(--ease)}
.subnav-ind.on{opacity:1}
/* Sous 760px la topbar n'est plus collée en haut (la barre passe en bandeau) :
la sous-navigation se cale donc sur 0, sinon elle flotterait dans le vide. */
@media(max-width:760px){.subnav{top:0}}
/* ---------- Vues ---------- */
.section{display:none}
.section.show{display:block;animation:fade .3s var(--ease)}
/* Une page de section. Même mécanique que .section, un cran plus bas. */
.subview{display:none}
.subview.show{display:block}
/* RYTHME VERTICAL — deux blocs empilés ne se touchent jamais.
Sans cela, l'espacement dépend de ce que chaque composant a bien voulu
déclarer en `margin-bottom` : un `.row` n'en a aucune — c'est un outil
d'alignement horizontal, pas un bloc de mise en page — donc ce qui le suit
vient se coller dessous. On ne peut pas demander à chaque écran d'y penser.
`.stack` est POSÉ, pas universel, et c'est délibéré : certaines paires
doivent rester serrées — un titre et sa description se lisent d'un bloc, les
écarter les sépare. Le gabarit le porte, donc tout écran qui en est issu
l'a d'office ; un document qui règle lui-même son rythme ne le prend pas.
Les marges adjacentes fusionnent en flux normal : un composant qui déclare
déjà plus que `--flow` garde sa valeur au lieu de s'additionner. C'est donc
un plancher, jamais une couche de plus. */
.stack > * + *{margin-top:var(--stack)}
/* Ce qui est déjà rythmé par sa gouttière garde la sienne. */
.stack > .grid + .grid{margin-top:var(--gap)}
/* Un bloc de prose se borne lui-même. Le conteneur, lui, prend toute la
largeur : c'est le texte qui a une mesure de lecture, pas la page. */
.read{max-width:var(--w-read)}
.wrap{transition:opacity .18s var(--ease),transform .18s var(--ease)}
.wrap.swap{opacity:0;transform:translateY(6px)}
/* ==========================================================================
2 · RÉVÉLATION EN CASCADE
Chaque enfant direct d'une section entre décalé de --stagger, plafonné à 7.
========================================================================== */
.rv{opacity:0;transform:translateY(10px)}
.rv.in{opacity:1;transform:none;
transition:opacity var(--t-enter) var(--ease),transform var(--t-enter) var(--ease);
transition-delay:calc(var(--d,0) * var(--stagger))}
/* [FIX] Une fois l'entrée jouée, le delay doit tomber — sinon toute
transition ultérieure d'opacity/transform sur ce bloc traîne de N×55ms. */
.rv.settled{transition-delay:0s}
/* ==========================================================================
3 · TYPOGRAPHIE DE CONTENU
========================================================================== */
/* Eyebrow — surtitre de section, terminé par un filet qui s'évanouit. */
.eyebrow{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
color:var(--accent);font-weight:var(--fw-bold);margin-bottom:12px;
display:flex;align-items:center;gap:9px}
/* Cas asymétrique de la famille des séparateurs à dégradé : le filet part du
titre et s'éteint vers la droite. Réservé aux en-têtes de section. */
.eyebrow::after{content:"";flex:1 1 auto;height:1px;min-width:16px;
background:linear-gradient(90deg,var(--sep-accent) 0%,
rgba(61,214,195,.04) 60%,transparent 100%)}
/* Bandeau d'information — le seul bleu du produit.
STATIQUE et PLEINE LARGEUR : il ne se déplie pas, ne se clique pas, ne se
tronque pas. Son contenu est visible d'emblée ou il n'a pas lieu d'être.
Un bandeau replié est un bandeau que personne ne lit.
POSOLOGIE — c'est une règle, pas une suggestion :
au plus UN par écran, et seulement quand il porte une information sans
laquelle l'écran serait mal interprété (clé de jointure, unité de mesure,
périmètre des données). Jamais en décoration ni en reformulation du titre.
Un écran sans piège n'a pas de bandeau. */
.lead{display:block;width:100%;
color:var(--lead-tx);font-size:var(--fs-sm);margin:0 0 var(--sp-6);position:relative;
background:linear-gradient(180deg,var(--navy-bg),var(--lead-bg2));
border:var(--bw) solid var(--navy);border-left:var(--rail) solid var(--cyan);
border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-5) var(--sp-3) 40px;
box-shadow:var(--inset-hi),var(--shadow-1),inset 10px 0 26px -20px rgba(67,211,222,.55)}
.lead::before{content:"i";position:absolute;left:12px;top:var(--sp-3);width:18px;height:18px;
border-radius:50%;border:var(--bw) solid var(--lead-line);color:var(--cyan);
font-size:var(--fs-meta);font-weight:var(--fw-bold);font-family:var(--mono);
display:grid;place-items:center;line-height:1}
.lead b{color:var(--tx);font-weight:var(--fw-semibold)}
.lead .code{background:var(--lead-code-bg);border-color:var(--navy);color:var(--cy-tx)}
/* --------------------------------------------------------------------------
SÉPARATEURS À DÉGRADÉ
Un filet plein s'arrête net et durcit la mise en page. Ceux-ci s'éteignent
sur leurs extrémités : la ligne existe là où elle sépare, et disparaît là
où elle toucherait un bord.
Trois déclinaisons, une par géométrie — ne pas en inventer une quatrième :
.rule-fade horizontal, s'éteint aux DEUX bords
.rule-fade-neutral idem, teinte neutre pour une séparation ordinaire
.cols > .col vertical entre colonnes, s'éteint en haut et en bas
Le filet de l'`.eyebrow` (qui s'éteint vers la droite) appartient à la même
famille : c'est le cas asymétrique, réservé aux en-têtes de section.
-------------------------------------------------------------------------- */
.rule-fade,.rule-fade-neutral{height:1px;border:0;width:100%;margin:var(--sp-4) 0}
.rule-fade{background:linear-gradient(90deg,
transparent 0%,var(--sep-accent) 25%,var(--sep-accent) 75%,transparent 100%)}
.rule-fade-neutral{background:linear-gradient(90deg,
transparent 0%,var(--sep-neutral) 25%,var(--sep-neutral) 75%,transparent 100%)}
.cols{display:flex;align-items:stretch}
.cols > .col{position:relative;flex:1;min-width:0;padding:var(--sp-1) var(--sp-5);
font-size:var(--fs-base);color:var(--tx2)}
.cols > .col:first-child{padding-left:0}
.cols > .col:last-child{padding-right:0}
.cols > .col:not(:last-child)::after{content:"";position:absolute;top:0;right:0;
width:1px;height:100%;pointer-events:none;
background:linear-gradient(180deg,
transparent 0%,var(--sep-accent) 25%,var(--sep-accent) 75%,transparent 100%)}
.cols > .col.neutral:not(:last-child)::after{
background:linear-gradient(180deg,
transparent 0%,var(--sep-neutral) 25%,var(--sep-neutral) 75%,transparent 100%)}
@media(max-width:760px){
.cols{flex-direction:column;gap:var(--sp-4)}
.cols > .col{padding:0}
.cols > .col:not(:last-child)::after{display:none}
}
/* Note technique — liseré cyan sourd, toujours en fin de bloc. */
.note{font-size:var(--fs-note);color:var(--tx3);border-left:2px solid var(--cy-line);
padding:2px 0 2px var(--sp-3);margin:var(--sp-4) 0 0}
.code{font-family:var(--mono);font-size:var(--fs-code);background:var(--sunken);
border:var(--bw) solid var(--hair);border-radius:var(--r-xs);padding:2px 6px;color:var(--tx2)}
/* Titre de bloc — carré teal + capitales espacées. */
.head-row{display:flex;align-items:center;justify-content:space-between;
margin-bottom:12px;gap:12px;flex-wrap:wrap}
.head-row h3{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;
letter-spacing:var(--ls-caps);display:flex;align-items:center;gap:9px}
.head-row h3::before{content:"";width:8px;height:8px;border-radius:var(--r-dot);background:var(--accent);
box-shadow:0 0 8px var(--accent-glow);flex:0 0 auto}
/* ==========================================================================
4 · CARTES
========================================================================== */
.card{background:var(--panel);border:var(--bw) solid var(--hair);border-radius:var(--r);
box-shadow:var(--inset-hi),var(--shadow-1);position:relative;
transition:border-color var(--t-ui) var(--ease)}
.card:hover{border-color:var(--hover-border)}
.card.pad{padding:var(--pad-card)}
/* 🔴 UNE CARTE PEUT ÊTRE UN BOUTON, et sans ces trois reprises elle est
illisible. C'est le cas d'un choix qu'on fait dans une grille de vignettes —
quel iPhone, quelle créatrice.
`.card` ne déclare AUCUNE couleur de texte : elle compte sur l'héritage
depuis `body`. Or un `