, comme l'écran Modèles, coûterait le clavier, les lecteurs d'écran et la capture du pointeur — trois choses qu'un input natif donne gratuitement et qu'on rate en les réécrivant. */ .tai-cur { margin-top: var(--e-16); } .tai-cur input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; cursor: pointer; margin: 0; display: block; } .tai-cur input[type="range"]::-webkit-slider-runnable-track { height: var(--e-6); border-radius: var(--r-pilule); background: var(--surface-3); } .tai-cur input[type="range"]::-moz-range-track { height: var(--e-6); border-radius: var(--r-pilule); background: var(--surface-3); } .tai-cur input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--e-16); height: var(--e-16); border-radius: 50%; background: var(--cok-accent); border: var(--e-2) solid var(--cok-card); margin-top: calc((var(--e-16) - var(--e-6)) / -2); transition: transform var(--t-bref) var(--c-pose); } .tai-cur input[type="range"]::-moz-range-thumb { width: var(--e-16); height: var(--e-16); border-radius: 50%; box-sizing: border-box; background: var(--cok-accent); border: var(--e-2) solid var(--cok-card); transition: transform var(--t-bref) var(--c-pose); } .tai-cur input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.14); } .tai-cur input[type="range"]:hover::-moz-range-thumb { transform: scale(1.14); } .tai-cur input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 var(--e-4) var(--cok-accent-bg); } .tai-cur input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 var(--e-4) var(--cok-accent-bg); } .tai-cur input[type="range"]:focus { outline: none; } .tai-cur-l { display: flex; align-items: baseline; gap: var(--e-8); margin-top: var(--e-8); font-size: var(--t-meta); color: var(--cok-text-3); } .tai-cur-f { margin-left: auto; } /* ⚠️ LE NOMBRE SE TAPE, et c'est ça la réponse à « je dois pouvoir monter à l'infini » : un curseur a forcément une fin, un champ non. Il ne s'ajoute à rien — il REMPLACE le nombre qui était déjà écrit là, donc l'écran ne gagne aucun objet. */ .tai-cur-q { display: inline-flex; align-items: baseline; gap: var(--e-6); cursor: text; } /* ⚠️ Largeur unique, calée sur le pire cas : six chiffres en tabulaire à --t-base tiennent tout juste dans --e-48. Pas de `field-sizing`, que Chrome connaît seul. */ .tai-cur-n { width: var(--e-48); padding: var(--e-2) var(--e-6); text-align: right; font-family: inherit; font-size: var(--t-base); font-weight: var(--fw-fort); font-variant-numeric: tabular-nums; color: var(--cok-text); background: var(--surface-3); border: var(--e-1) solid transparent; border-radius: var(--r-xs); transition: var(--transi); } .tai-cur-n:hover { border-color: var(--cok-border-2); } .tai-cur-n:focus { outline: none; border-color: var(--cok-accent); background: var(--cok-accent-bg); } /* ⚠️ Le mouvement réduit coupe TOUT : c'est un réglage système, pas une préférence qu'on négocie. Les valeurs se posent d'un coup, elles ne disparaissent pas. */ @media (prefers-reduced-motion: reduce) { .tai-b i, .tai-b b, .tai-b u, .tai-cur input[type="range"]::-webkit-slider-thumb { transition: none; } } /* Sous le bouton de création : pas de carte dans la carte — un simple bloc séparé d'un filet, avec la conclusion en tête et le détail dessous. */ /* ══ LA RÉPARTITION EN FRISE ══════════════════════════════════════════════════ Amadou (20/08) : « je veux qu'elle soit indiquée sous forme de frise pareil ». Cinq colonnes côte à côte au lieu de cinq lignes empilées : la répartition se lit d'un coup d'œil, à la même place et à la même largeur que le chemin des étapes juste dessous. On ne change QUE la mise en page — les mêmes cellules, les mêmes barres, les mêmes chiffres. */ .tai-bande { margin-bottom: var(--e-16); } /* Le formulaire de branchement d'une sortie : deux champs côte à côte, qui s'empilent quand la carte se resserre. On emprunte les encadrés de l'écran Créer — même dessin, rien de neuf à apprendre. */ /* Le bouton d'ajout, en tête du parc — un geste rare mérite un bouton, pas un formulaire posé en permanence. */ .mac-ajout { display: flex; justify-content: flex-end; margin-bottom: var(--e-12); } /* ══ LES SORTIES SONT DES CARTES ══════════════════════════════════════════════ Amadou (20/08) : « au niveau de ses sorties, ça doit être sous forme de card, et quand j'appuie dessus ça ouvre l'espace du proxy ». Une sortie est un objet qu'on ouvre — comme une machine. Deux choses de même nature se lisent et se manipulent pareil, sinon on hésite à chaque fois. */ .mac-sectete { display: flex; align-items: baseline; gap: var(--e-12); margin-bottom: var(--e-12); } .mac-sectete .cok-launch-title { flex: 0 0 auto; } .mac-seccpt { flex: 1 1 auto; font-size: var(--t-meta); color: var(--cok-text-3); } .mac-sgrille { display: grid; gap: var(--e-12); grid-template-columns: repeat(auto-fit, minmax(calc(var(--e-48) * 4), 1fr)); } .mac-scarte { display: flex; flex-direction: column; gap: var(--e-6); padding: var(--e-14); border: 1px solid var(--border); border-radius: var(--r-carte); background: var(--cok-bg); text-align: left; color: inherit; font: inherit; cursor: pointer; transition: border-color var(--t-bref) var(--c-pose); } .mac-scarte:hover { border-color: var(--violet-mid); } .mac-scarte .sn { font-size: var(--t-mini); color: var(--cok-text-3); letter-spacing: var(--ls-large); text-transform: uppercase; } .mac-scarte .sadr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠️ ON ÉTEND LE SÉLECTEUR, ON NE RECOPIE PAS LA RÈGLE. La rangée « valeur · libellé · pourcentage » existait déjà, mais scopée à la carte du niveau 2 ; l'écran d'une sortie en a besoin du même. Recopier aurait donné deux rangées qui divergent au premier ajustement — c'est la faute la plus répétée du projet. Même geste que `.danger`, dont les quatre noms ont été réunis en une règle. */ .mac-scarte .srow, .mac-tu .srow { display: flex; align-items: baseline; gap: var(--e-8); } .mac-scarte .srow b, .mac-tu .srow b { font-size: var(--t-lead); font-weight: var(--fw-moyen); } .mac-scarte .srow .u, .mac-tu .srow .u { flex: 1 1 auto; font-size: var(--t-mini); color: var(--cok-text-3); } .mac-scarte .srow .pc, .mac-tu .srow .pc { font-size: var(--t-mini); color: var(--cok-text-2); } .mac-scarte .srow .pc.am, .mac-tu .srow .pc.am { color: var(--cok-amber); } .mac-scarte .jauge { height: var(--e-6); border-radius: var(--r-pilule); background: var(--bg-elevated); overflow: hidden; } .mac-scarte .jauge i { display: block; height: 100%; background: var(--cok-green); transition: width var(--t-long) var(--c-pose); } .mac-scarte .jauge i.am { background: var(--cok-amber); } /* ⭐⭐ L'ÉTAT D'UNE SORTIE. Il se lit à la FORME autant qu'à la teinte : la pastille `.mac-pt` porte déjà les trois tons du site, on l'emprunte au lieu d'en refaire une. ⚠️ L'âge du verdict est en retrait — il ne doit pas concurrencer l'état lui-même, mais il doit être là : « elle répond » sans depuis-quand, c'est ce qui a laissé une sortie morte passer pour saine pendant six jours. */ .mac-scarte .setat { display: flex; align-items: center; gap: var(--e-6); font-size: var(--t-mini); color: var(--cok-text-2); } .mac-scarte .setat b { font-weight: var(--fw-moyen); } .mac-scarte .setat u { text-decoration: none; color: var(--cok-text-3); margin-left: auto; white-space: nowrap; } .mac-scarte .setat.no b { color: var(--cok-red, var(--red)); } .mac-scarte .setat.am b { color: var(--cok-amber); } /* La place libre : un pointillé, parce que ce n'est pas encore une sortie. */ .mac-scarte.neuve { border-style: dashed; align-items: center; justify-content: center; color: var(--cok-text-3); font-size: var(--t-meta); } .mac-scarte.neuve:hover { color: var(--th-accent-clair); } /* ══ UNE CAPACITÉ SE RÈGLE SUR PLACE ══════════════════════════════════════════ Amadou (20/08) : « je dois pouvoir en temps réel changer le nombre de comptes par proxy — la même chose pour le VDS ». Rouvrir un panneau pour changer un nombre qu'on a sous les yeux, c'est trois gestes pour un chiffre. Le champ vit là où le chiffre se lit ; il s'enregistre quand la main s'arrête. */ /* ⚠️⚠️ UN NOMBRE DE DEUX CHIFFRES SE LIT DANS LA PHRASE. Amadou (20/08) : « ces boutons pour sélectionner le nombre de comptes, c'est trop grand pour rien et ce n'est pas esthétique » — puis « tu peux le caler au-dessus, franchement c'est tout petit ». Le champ vit maintenant DANS la ligne de titre (« peut tenir [12] comptes ») : il ne prend que sa largeur, il n'a plus de flèches (voir `data-sans-pas` côté script), et il se lit comme le reste de la phrase. */ .mac-cap { display: inline-flex; align-items: baseline; gap: var(--e-4); } .mac-cap .lb { font-size: var(--t-meta); color: var(--cok-text-3); } .mac-cap input { width: calc(var(--e-20) * 2); text-align: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-xs); padding: var(--e-1) var(--e-4); color: var(--cok-text); font: inherit; font-size: var(--t-meta); font-variant-numeric: tabular-nums; transition: border-color var(--t-bref) var(--c-pose); } .mac-cap input:hover { border-color: var(--border-strong); } .mac-cap input:focus { outline: none; border-color: var(--violet-mid); } .mac-cap-dit { font-size: var(--t-mini); color: var(--cok-text-3); } /* Poser une sortie : le geste et sa consequence, cote a cote. */ /* La barre d'actions d'une sortie : une ligne, des libellés courts, et un seul mot d'explication dessous. Avant : quatre paragraphes éparpillés entre les boutons. */ .mac-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8); margin-top: var(--e-20); padding-top: var(--e-16); border-top: 1px solid var(--border); } /* ⚠️ « Poussé à droite » devient « étiré » sur un écran large : mesuré, 363 px de vide entre le dernier bouton et « Retirer ». C'est le reproche déjà fait sur la bande d'une commande. Un écart FRANC vaut mieux qu'un rejet au bord. */ .mac-actions .danger { margin-left: var(--e-24); } .mac-actions-mot { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-12); margin-top: var(--e-10); } /* Les retours de bouton ne gardent pas de place tant qu'ils n'ont rien à dire. */ .mac-actions-mot .mac-k:empty { display: none; } /* ⚠️⚠️ PAS DE QUATRIÈME NOM POUR « BOUTON ROUGE ». J'avais écrit `.dang` — le site en connaissait déjà trois (`.danger`, `.src-px-danger`, `.v-btn--danger`), et la règle de survol (ligne 1855) ne protège que les deux premiers. Mon bouton perdait donc son rouge AU MOMENT PRÉCIS où on met la souris dessus, mesuré : texte blanc, liseré violet — l'apparence d'un bouton ordinaire. Le rouge est un SENS, pas une décoration. On emprunte `.danger`, qui existe et qui est déjà protégé. */ /* ══ CINQUANTE COMPTES SANS DÉFILER ═══════════════════════════════════════════ Amadou (20/08) : « on part du principe qu'il y en a vingt-cinq, cinquante — je vais devoir scroller pendant dix mille minutes ». Une ligne fait trente pixels : cinquante comptes, c'est un écran et demi pour trouver celui qui cloche. Une case en fait vingt-six — cinquante tiennent en trois rangées. La couleur porte l'information, le survol donne le pseudo, et seule la liste des comptes À TRAITER reste écrite. */ .mac-puces { display: flex; flex-wrap: wrap; gap: var(--e-4); margin: var(--e-6) 0 var(--e-10); } /* ⚠️ MÊME FAMILLE QUE LA PASTILLE : mêmes couples fond-doux / texte-vif, même arrondi de pilule. Une case est une pastille carrée — pas un objet d'une autre planète. */ .mac-puce { width: var(--e-28); height: var(--e-28); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--t-micro); font-weight: var(--fw-moyen); line-height: var(--lh-un); background: var(--bg-elevated); color: var(--cok-text-3); } /* ⚠️⚠️ FOND DOUX, TEXTE VIF — PAS L'INVERSE. J'avais posé la couleur pleine avec `--th-sur-accent` par-dessus : le vérificateur a signalé les trois cases sur-le-champ. `--sur-accent` veut dire « ce qui s'écrit sur L'ACCENT », pas « du blanc » — sur un fond vert ou ambre il ne garantit rien, et il change de sens d'un thème à l'autre. Le couple fond-doux / texte-vif est celui que le site utilise déjà partout (les pastilles d'état) : il est mesuré sur les seize thèmes. On l'emprunte. */ /* Un contour, pas un fond plein : la case se lit d'un coup d'œil sans hurler. */ .mac-puce { border: 1px solid var(--border); background: var(--cok-bg); } .mac-puce.ok { border-color: var(--cok-green); color: var(--cok-green); background: var(--cok-green-bg); } .mac-puce.am { border-color: var(--cok-amber); color: var(--cok-amber); background: var(--cok-warn-bg); } .mac-puce.rd { border-color: var(--cok-red); color: var(--cok-red); background: var(--cok-red-bg); } /* ⚠️ LA MARGE HAUTE EST À ELLE, PAS À SON VOISIN. Elle n'était espacée que par le `margin-bottom` de `.mac-puces` : le jour où la grille ne s'affiche pas (une sortie sans compte), la légende venait se coller à la barre du dessus. Un espacement qui dépend de la présence d'un autre bloc casse dès que ce bloc disparaît. */ .mac-legende { display: flex; flex-wrap: wrap; gap: var(--e-14); font-size: var(--t-mini); color: var(--cok-text-3); margin-top: var(--e-12); margin-bottom: var(--e-16); } .mac-legende i { display: inline-block; width: var(--e-8); height: var(--e-8); border-radius: var(--r-micro); margin-right: var(--e-4); background: var(--bg-elevated); vertical-align: -1px; } /* La légende, elle, n'a pas de texte dessus : la couleur pleine y est juste. */ .mac-legende i.ok { background: var(--cok-green); } .mac-legende i.am { background: var(--cok-amber); } .mac-legende i.rd { background: var(--cok-red); } /* Le panneau : ses champs, son message, ses deux boutons. */ /* Panneau Machines : assez large pour qu'une ligne de proxy tienne d'un seul tenant. On reprend la largeur de la fenêtre Paramètres — deux panneaux de même nature se lisent pareil — sans sa hauteur fixe : ce panneau n'a que deux champs. */ .modal-card--mac { width: 680px; max-width: 94vw; } /* ⚠️ LE VIDE VENAIT D'ICI. `.pa-body` impose 540 px de haut — c'est juste pour la fenêtre Paramètres, dont les volets sont longs. Ce panneau-ci fait trois quarts de ça : le reste était du vide sous les boutons. Il prend la hauteur de son contenu. */ #modal-mac .pa-body { display: flex; flex-direction: column; gap: var(--e-20); height: auto; max-height: 82vh; padding: var(--e-8) var(--e-22) var(--e-20); } /* Un sous-titre absent ne doit pas garder sa place : sinon il pousse tout d'un cran. */ #modal-mac #mac-pan-sous:empty, #modal-mac #mac-pan-dit:empty { display: none; } /* ⚠️ L'ÉCART DU PANNEAU NE SÉPARAIT RIEN. Le compte, l'avertissement et les choix vivent dans UN seul bloc (`#mac-pan-champs`, écrit d'un coup en innerHTML) : le `gap` du corps ne joue qu'ENTRE les blocs, jamais à l'intérieur. Les trois idées se touchaient donc, quel que soit l'air donné au-dessus. */ #modal-mac #mac-pan-champs { display: flex; flex-direction: column; gap: var(--e-16); } #modal-mac #mac-pan-champs > p { margin: 0; } #modal-mac .cok-raf-champ { flex: 1 1 auto; } .mac-pan-dit { font-size: var(--t-meta); color: var(--cok-text-3); } .mac-pan-pied { display: flex; justify-content: flex-end; gap: var(--e-8); margin-top: var(--e-4); padding-top: var(--e-16); border-top: 1px solid var(--border); } /* ══ LA RÉPARTITION SE REPLIE ═════════════════════════════════════════════════ Amadou (20/08) : « elle prend trop de place. Le mieux serait de la condenser, d'avoir la possibilité de la dérouler. » Repliée, elle tient sur UNE ligne : une barre où les cinq tailles se partagent la largeur au prorata, et la phrase qui dit ce que cette création va faire. Le détail est à un clic, et le pli se souvient. */ .tai-pli { display: flex; align-items: center; gap: var(--e-12); width: 100%; padding: var(--e-8) var(--e-10); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--cok-bg); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: border-color var(--t-bref) var(--c-pose), background var(--t-bref) var(--c-pose); } .tai-pli:hover { border-color: var(--violet-mid); } .tai-pli .tai-suite { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La barre condensée : cinq parts d'un même trait. On la distingue du détail par sa finesse — c'est un résumé, pas une mesure qu'on lit au chiffre près. */ .tai-mini { flex: 0 0 34%; display: flex; height: var(--e-8); border-radius: var(--r-pilule); overflow: hidden; background: var(--bg-elevated); } .tai-mini i { display: block; height: 100%; background: var(--cok-text-3); border-right: var(--e-1) solid var(--cok-bg); transition: width var(--t-long) var(--c-pose); } .tai-mini i:last-child { border-right: 0; } /* La taille que CETTE création va prendre : la seule qui porte l'accent. */ .tai-mini i.vise { background: var(--th-accent-clair); } .tai-chev { flex: 0 0 auto; color: var(--cok-text-3); transition: transform var(--t-moyen) var(--c-pose); } .tai-pli.ouvert .tai-chev { transform: rotate(180deg); } .tai-detail[hidden] { display: none; } .tai-crea .tai-detail { margin-top: var(--e-12); } @media (prefers-reduced-motion: reduce) { .tai-mini i, .tai-chev { transition: none; } } .tai-crea { margin-top: 0; padding-top: 0; border-top: 0; } .tai-crea .tai-suite { margin-top: var(--e-10); } .tai-crea .tai-liste { display: flex; gap: var(--e-10); margin-top: 0; align-items: stretch; } /* ⚠️ `display: contents` sert à faire vivre les 25 cellules dans UNE grille commune, pour que les cinq barres s'arrêtent à la même abscisse. En frise, chaque taille est au contraire une colonne à elle : on redonne donc une boîte à la ligne. */ .tai-crea .tai-l { display: flex; flex-direction: column; align-items: center; gap: var(--e-4); flex: 1 1 0; min-width: 0; } .tai-crea .tai-b { width: 100%; } .tai-crea .tai-ct, .tai-crea .tai-pc, .tai-crea .tai-d { text-align: center; } .tai-crea .tai-n { font-size: var(--t-mini); letter-spacing: var(--ls-large); } .tai-crea .tai-ct { font-size: var(--t-small); } /* La taille visée par CETTE création se distingue par un trait sous sa colonne — la couleur seule ne suffit pas : sur seize thèmes, deux accents voisins se confondent. */ .tai-crea .tai-l.vise { border-bottom: var(--e-2) solid var(--th-accent-clair); padding-bottom: var(--e-6); } .tai-crea /* ══════════════════════════════════════════════════════════════════════════════ MACHINES — la machine d'abord, ses comptes au clic. ⚠️ Aucune couleur ne porte seule un sens : « annoncé, muet » est écrit en toutes lettres à côté du chiffre. Un écran de diagnostic qu'il faut décoder n'en est pas un. ══════════════════════════════════════════════════════════════════════════════ */ .mac-liste { display: flex; flex-direction: column; gap: var(--e-12); } /* ── UNE CARTE PAR MACHINE, ET AUCUN RANG ───────────────────────────────────── Amadou (15/08) : « oubliez l'histoire de parc principal ou de second parc, ils sont tous égaux » et « plus tard j'en aurai vraiment beaucoup ». Les cartes sont donc IDENTIQUES — rien dans le dessin ne dit que l'une compte plus qu'une autre — et la grille se remplit toute seule. ⚠️ Les comptes ne s'ouvrent PAS dans la carte : ils s'affichent sous la grille. Vingt cartes qui se déplient font vingt écrans, et on ne retrouve plus celle qu'on regardait. */ /* ── LA BARRE DES SOUS-ONGLETS ──────────────────────────────────────────────── Amadou (15/08) : « l'overlay doit être arrondie… je sais que pour le thème volcanique ce n'est pas arrondi, sauf que là ça doit être arrondi. » ⚠️ C'est pour ça qu'elle prend `--r-pilule` et PAS `--r-lg`. Les onze thèmes redéfinissent le rayon — l'un d'eux descend à 4 px — et cette barre-là doit rester ronde partout. Un jeton de rayon aurait suivi le thème et l'aurait carrée. */ /* ⚠️⚠️⚠️ CETTE BARRE AVAIT SA PROPRE FORME, ET C'ÉTAIT LA FAUTE (27/08/2026). Amadou : « ils sont arrondis alors que normalement — regarde les Commandes, les Comptes, la Bibliothèque — c'est des boutons comme ça ». Il a raison : l'écran des Machines était le SEUL à porter une pilule, dans un site où tous les onglets sont des rectangles à `--r-md`. Un écran qui invente sa propre forme se remarque, et pas pour la bonne raison. ⚠️ « Emprunter, jamais inventer » est déjà une règle de ce projet, reprise quatre fois. La barre reprend donc exactement celle des Commandes : `.cok-cmd-stab` telle qu'elle est définie pour tout le monde, sans un seul réglage à elle. */ /* ══ LE RAIL DU PARCOURS ═════════════════════════════════════════════════════ Amadou : « le parcours de suivi n'est pas agréable à utiliser, il y a trop de boutons, tout en évitant de déborder ». ⚠️⚠️ LES NEUF ÉTAPES ÉTAIENT NEUF PASTILLES CÔTE À CÔTE. À 1280 px elles s'enroulaient sur DEUX rangées — et l'ordre, qui est toute l'information d'un parcours, disparaissait au moment du retour à la ligne. Treize boutons s'affichaient avant la première commande. ⭐ Un rail répond aux trois demandes d'un coup : l'ordre se lit, il tient sur UNE ligne à toute largeur (les étapes se partagent l'espace, elles ne le réclament pas), et il n'y a plus de boutons — il y a un chemin. */ /* ⚠️ LE PAS EST PASSÉ DE 140 À 184 px. Amadou : « pour l'Entrepôt, augmente l'espace entre les étapes ». Ses libellés sont longs — « Expéditions entrantes », « Expéditions sortantes » — et à 140 px ils remplissaient leur place jusqu'au bord : deux libellés voisins se touchaient, sans être coupés pour autant (la mesure disait « 0 coupé », et elle avait raison — ce n'était pas une troncature, c'était une collision). ⚠️ Suivi ne bouge pas : ses neuf étapes dépassent déjà la barre, le plafond à 100 % les ramène. Élargir le pas ne joue donc que sur les rails COURTS, ceux qui avaient de la place à revendre. */ .cok-cmd-subtabs.cok-cmd-rail { --cmd-pas: 184px; /* la largeur d'une étape */ display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; padding: var(--e-10) 0 var(--e-4); margin-bottom: var(--e-8); } /* ⚠️ La barre N'EST PLUS un conteneur de requête : plus rien ne l'interroge depuis que le seuil est passé sur l'étape. Un conteneur déclaré que personne ne lit ne coûte rien à l'écran, mais il ment au prochain qui lira — il laisse croire que la barre décide quelque chose, alors que la décision a changé d'échelle. */ /* ⚠️⚠️ LE CHEMIN ET SES ANNEXES SONT DEUX BLOCS, PAS UNE SEULE RANGÉE. L'Entrepôt est un parcours à quatre étapes (bon → entrante → stock → sortante) PLUS deux branches (Retours, Factures). Collées au bout du rail, elles se liraient comme une cinquième et une sixième étape — le rail leur inventerait une progression qui n'existe pas. */ /* ⚠️⚠️ LE CHEMIN NE S ÉTIRE PLUS POUR REMPLIR. Amadou : « mets la frise à gauche, là c'est trop centré ». Chaque étape prenait une part ÉGALE de toute la largeur : à neuf c'est juste, à quatre ça les écarte de 280 px et le chemin se lit comme une guirlande tendue d'un bord à l'autre. `flex: 0 1 auto` : le rail fait la largeur de ce qu'il porte, et se cale à gauche. Les annexes le suivent au lieu d'être renvoyées au loin — c'est ce grand vide au milieu qui donnait l'impression de centrage. */ .cmd-rail-fil { position: relative; flex: 0 1 auto; min-width: 0; display: flex; align-items: flex-start; /* ⚠️⚠️ LA LARGEUR EST CALCULÉE, PAS DEVINÉE. Laissée à `auto`, le parent se dimensionne sur le contenu AVANT que les bases des étapes s'appliquent : mesuré, 94 px par étape au lieu de 140, et les libellés se coupaient. On connaît déjà le nombre d'étapes (`--cmd-n`, posé par app.js) — la largeur du chemin en découle, et le plafond à 100 % le laisse se serrer quand la place manque. */ width: calc(var(--cmd-n, 9) * var(--cmd-pas)); max-width: 100%; } /* Le trait qui relie les étapes. Il s'arrête au centre des deux extrêmes : un rail qui dépasse de la première et de la dernière donnerait un chemin qui vient d'ailleurs et continue nulle part. ⚠️ La marge dépend du NOMBRE d'étapes : elle vaut une demi-place. `100%/18` valait pour neuf étapes ; à deux, elle laissait le trait sortir loin devant. On la calcule donc sur la largeur d'une étape, que le navigateur connaît déjà. */ .cmd-rail-fil::before { content: ''; position: absolute; top: 4px; height: 1px; left: 0; right: 0; background: var(--cok-border-2); transform: scaleX(calc(1 - 1 / var(--cmd-n, 9))); } /* Les annexes, après un filet : elles appartiennent à la filière, pas au chemin. */ .cmd-rail-a { flex: 0 0 auto; display: flex; align-items: center; gap: var(--e-4); margin-left: var(--e-16); padding-left: var(--e-16); border-left: 1px solid var(--cok-border); } .cmd-annexe { align-self: center; } /* ⚠️⚠️ UNE LARGEUR DE BASE, PAS UN PLAFOND SUR UNE BASE NULLE. Premier essai : `flex: 1 1 0` + `max-width`. Mais dans un parent qui s'ajuste à son contenu, une base nulle fait s'EFFONDRER les enfants sur leur plus petite largeur — mesuré : 62 px par étape au lieu de 140, et les libellés n'avaient plus la place d'exister. `flex: 0 1 140px` donne à chaque étape sa largeur, et l'autorise à se serrer quand la place manque : à neuf elles remplissent presque tout, à deux le chemin reste court. */ .cmd-e { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--e-6); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--cok-text-3); transition: color var(--t-bref); } /* ⚠️ La pastille porte le FOND de l'écran, pas `transparent` : c'est elle qui doit masquer le trait derrière elle, sinon la ligne traverse le point. */ .cmd-e-pt { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; background: var(--cok-card); border: 1.5px solid var(--cok-border-2); transition: background var(--t-bref), border-color var(--t-bref), box-shadow var(--t-bref); } /* ⚠️ Une étape VIDE reste visible, elle ne disparaît pas : c'est ce qui permet de lire le parcours en entier et de savoir que rien n'attend là. Elle est juste plus sourde. */ .cmd-e-pt.plein { background: var(--cok-text-3); border-color: var(--cok-text-3); } .cmd-e-pt.urgent { background: var(--cok-red); border-color: var(--cok-red); } /* ⚠️⚠️ LA FRISE SAUTAIT, ET LA CAUSE EST QU'ELLE NAÎT VIDE. `.cmd-e-n` est écrit sans contenu (``), les chiffres n'arrivent qu'une requête plus tard. Or un élément VIDE n'a pas de ligne, donc pas de hauteur : la frise se dessinait tassée, puis les chiffres la faisaient GRANDIR d'un coup et poussaient les neuf libellés vers le bas. Amadou, 23/08 : « les chiffres mettent du temps à s'afficher, ce qui fait que ça fait moche ». La place d'une ligne est donc tenue dès le premier dessin, chiffre ou pas — et le chiffre se pose en fondu au lieu d'apparaître d'un coup. */ .cmd-e-n { font-size: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--cok-text-2); line-height: var(--lh-un); min-height: 1em; /* une ligne, toujours : `1em` = sa propre taille */ transition: opacity var(--t-moyen) var(--c-pose), transform var(--t-moyen) var(--c-pose); } /* Tant qu'il n'a pas son chiffre, il tient la place sans rien montrer. Le chiffre monte de deux pixels en se révélant : il se POSE, il ne clignote pas. */ .cmd-e-n:empty { opacity: 0; transform: translateY(var(--e-2)); } /* ⚠️ Une étape à zéro reste visible, mais plus sourde : c'est ce qui permet de lire le parcours en entier et de savoir que rien n'attend là. */ .cmd-e-n.vide { color: var(--cok-text-3); opacity: .5; } /* Même chose pour les pastilles des annexes, qui se remplissent au même moment. */ .cok-cmd-stab-n { transition: opacity var(--t-moyen) var(--c-pose); } .cok-cmd-stab-n:empty { opacity: 0; } @media (prefers-reduced-motion: reduce) { .cmd-e-n, .cok-cmd-stab-n { transition: none; } .cmd-e-n:empty { transform: none; } } [data-anim="off"] .cmd-e-n, [data-anim="off"] .cok-cmd-stab-n { transition: none; } [data-anim="off"] .cmd-e-n:empty { transform: none; } /* ⚠️ Le libellé garde SA marge, quelle que soit la largeur de l'étape : c'est elle qui garantit que deux voisins ne se touchent jamais, même le jour où le pas rétrécit. */ /* ⚠️ ET QUAND ÇA DÉPASSE D'UN CHEVEU, ON ÉLIDE — on ne coupe pas au milieu d'une lettre. Mesuré sur l'Entrepôt à 129 px par étape : « Expéditions entrantes » déborde de 2 px. Deux pixels ne justifient pas de faire disparaître le nom, mais un mot tranché net se lit comme un défaut. Trois points le disent proprement, et aucun seuil n'a à connaître la longueur des libellés. */ .cmd-e-l { font-size: var(--t-meta); line-height: var(--lh-serre); text-align: center; max-width: 100%; padding: 0 var(--e-8); overflow: hidden; text-overflow: ellipsis; } .cmd-e:hover { color: var(--cok-text-2); } .cmd-e:hover .cmd-e-pt { border-color: var(--cok-border); } /* L'étape ouverte : son point s'allume et rayonne. Le libellé passe en clair — c'est le seul de la ligne, donc il se trouve sans le chercher. */ .cmd-e.on { color: var(--cok-text); } .cmd-e.on .cmd-e-pt { background: var(--cok-accent); border-color: var(--cok-accent); box-shadow: 0 0 10px rgba(var(--th-accent-rgb), .55); } .cmd-e.on .cmd-e-n { color: var(--cok-text); font-weight: var(--fw-fort); } .cmd-e.on .cmd-e-l { font-weight: var(--fw-fort); } /* ⚠️⚠️ LA MESURE PORTE SUR LE RAIL, PAS SUR LA FENÊTRE. Première écriture : une media query à 620 px de FENÊTRE. Mesuré à 820 px — le canevas ne fait que 516 px de large, soit 57 px par étape, et CINQ libellés sur neuf étaient coupés alors que la règle ne s'était pas déclenchée. Ce qui manque de place, c'est le rail ; c'est donc lui qu'il faut interroger. Neuf libellés demandent environ 72 px chacun. ⭐ En dessous, on garde le point et le chiffre — ils suffisent à naviguer — et le nom de l'étape ouverte reste, puisque c'est le seul qu'on cherche. */ /* ⚠️⚠️⚠️ ET LE SEUIL PORTE SUR L'ÉTAPE, PAS SUR LE RAIL. Deuxième correction, même défaut d'un cran plus haut : 660 px était le seuil JUSTE pour NEUF étapes (660/9 ≈ 73 px par libellé) et FAUX pour toutes les autres. Mesuré sur les trois étapes de Litiges : à 596 px de barre, chaque étape faisait encore 184 px — largement de quoi écrire « Retour demandé » — et les libellés disparaissaient quand même. Un seuil réglé sur un seul cas se trompe sur tous les autres : SHEIN (2), Litiges (3) et l'Entrepôt (4) perdaient leurs noms plus de cent pixels trop tôt. L'étape devient donc son propre conteneur : la question posée est « ai-je la place d'écrire MON nom ? », qui ne dépend plus du nombre d'étapes. 108 px = le plus long libellé du site (« Bon à déposer ») plus sa marge. ⚠️ Le conteneur se pose sur `.cmd-e` et la règle vise `.cmd-e-l` : un élément ne peut PAS interroger sa propre largeur — c'est le piège déjà payé sur `.rp-corps`. ⭐ En dessous, on garde le point et le chiffre — ils suffisent à naviguer — et le nom de l'étape ouverte reste, puisque c'est le seul qu'on cherche. */ .cmd-e { container-type: inline-size; container-name: etape; } @container etape (max-width: 108px) { .cmd-e-l { display: none; } .cmd-e.on .cmd-e-l { display: block; } } .mac-grille { margin-top: var(--e-20); display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--e-14); } /* ── LA CARTE : UN CARRÉ, TROIS CHOSES ─────────────────────────────────────── Elle sert à REPÉRER parmi vingt, pas à lire. Son numéro, ce qu'elle est, et son signe vital en grand : combien de ses comptes parlent. Tout le reste est derrière le clic. ⚠️ Le même dessin sert aux machines ET aux sorties : deux cartes pour la même idée finiraient par diverger. */ /* ⚠️⚠️ `aspect-ratio: 1 / .82` CREUSAIT 117 px DE VIDE. Mesuré le 18/08 : la carte faisait 259 px de haut pour quatre lignes courtes, et `margin-top: auto` poussait le chiffre tout en bas — 45 % de la carte ne portait rien. Le carré se défendait par « repérer parmi vingt » ; il y en a DEUX, et elles tiennent le même ordinateur. Une carte doit faire la hauteur de ce qu'elle a à dire. */ .mac-c { display: flex; flex-direction: column; gap: var(--e-10); text-align: left; font: inherit; cursor: pointer; padding: var(--e-16); border: 1px solid var(--cok-border); border-radius: var(--r-lg); background: var(--cok-card); transition: border-color var(--t-bref); } .mac-c:hover { border-color: var(--cok-border-2); } .mac-c-num { font-size: var(--t-meta); color: var(--cok-text-3); } .mac-c-hd { display: flex; align-items: center; gap: var(--e-8); min-width: 0; } .mac-pt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--cok-green); } .mac-pt.wa { background: var(--cok-amber); } .mac-pt.no { background: var(--cok-red); } /* Vide : ni bien ni mal, personne n'habite là. Le vert est une récompense. */ .mac-pt.vi { background: var(--cok-text-3); } .mac-c-ad { font-size: var(--t-base); color: var(--cok-text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mac-c-big { margin-top: auto; display: flex; align-items: baseline; gap: var(--e-6); } .mac-c-big b { font-size: var(--t-display); font-weight: var(--fw-moyen); color: var(--cok-text); line-height: var(--lh-un); } .mac-c-big i { font-style: normal; font-size: var(--t-lead); color: var(--cok-text-3); } .mac-c-lg { font-size: var(--t-base); color: var(--cok-text-3); } .mac-c-lg.wa { color: var(--cok-amber); } .mac-c-lg.no { color: var(--cok-red); } .mac-c-lg.vi { color: var(--cok-text-3); } .mac-c-big.vi b { color: var(--cok-text-3); } /* La note explique un chiffre que le calcul ne peut pas expliquer : « remise le 15/08 à la demande de Kristo » dit pourquoi c'est zéro, mieux que n'importe quel verdict. */ .mac-c-note { font-size: var(--t-meta); color: var(--cok-text-3); line-height: var(--lh-serre); border-top: 1px solid var(--cok-border); padding-top: var(--e-10); } /* L'EN-TÊTE QUAND TOUT TIENT SUR UN SEUL ORDINATEUR. Il dit l'hôte et l'adresse UNE fois, pour que les cartes en dessous n'aient plus à les répéter. */ .mac-uneseule { margin-top: var(--e-20); padding-bottom: var(--e-14); border-bottom: 1px solid var(--cok-border); } .mac-uneseule-t { font-size: var(--t-lead); color: var(--cok-text); } .mac-uneseule-s { margin-top: var(--e-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-6) var(--e-14); font-size: var(--t-base); color: var(--cok-text-3); } .mac-uneseule + .mac-grille { margin-top: var(--e-14); } .mac-ko { color: var(--cok-red); } /* ⚠️⚠️ LE FIL D'ARIANE A ETE RETIRE (27/08/2026). Il inventait « Les machines › la machine › sortie 1 », avec des chevrons qu'on ne trouve nulle part ailleurs sur le site. Le retour se fait maintenant par `.cok-back` — la flèche du site, déjà stylée, déjà comprise. Amadou : « inspire-toi de ce qu'il y a sur le site, ça fait un décalage avec la DA ». Un écran qui invente son propre geste de retour oblige à l'apprendre. ⚠️ Ses règles partent avec lui : une classe CSS que plus personne n'écrit est un piège pour le prochain qui la lira en croyant qu'elle sert. */ /* Les deux vues d'une machine. ⚠️ MÊME FORME QUE LES ONGLETS DU SITE, plus une pilule à moi : c'était la même faute que la barre du haut, au même écran, deux fois. */ .mac-vues { display: inline-flex; width: fit-content; gap: var(--e-4); margin-bottom: var(--e-14); } .mac-vues button { font: inherit; font-size: var(--t-base); line-height: var(--lh-un); height: 34px; padding: 0 var(--e-16); border-radius: var(--r-md); border: 1px solid var(--border); background: rgba(var(--th-voile),0.04); color: var(--text-2); cursor: pointer; } .mac-vues button.on { background: var(--cok-accent-bg); color: var(--cok-accent); border-color: transparent; } .mac-sec { font-size: var(--t-meta); color: var(--cok-text-3); margin: var(--e-24) 0 var(--e-10); } /* ── L'ESPACE D'UNE MACHINE ─────────────────────────────────────────────────── ⚠️⚠️ CE BLOC AVAIT DISPARU. En réécrivant les cartes j'ai supprimé `.mac-fiche` et `.mac-f-l` sans les remettre : l'écran affichait « hôteVMI3454088 », étiquette collée à sa valeur, sur dix-huit lignes. Amadou : « visuellement c'est moche et ce n'est pas parlant ». Une règle supprimée ne lève aucune erreur — elle laisse juste du HTML nu. ⚠️ Et le fond du problème n'était pas que l'espacement : DIX pastilles « à brancher » identiques criaient plus fort que les vraies mesures. Ce qui se mesure passe en TUILES, ce qui manque tient en UNE phrase, en bas, discrète. */ .mac-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-16); flex-wrap: wrap; } .mac-h1 { font-size: var(--t-lead); font-weight: var(--fw-fort); letter-spacing: -.2px; } .mac-h2 { font-size: var(--t-base); color: var(--cok-text-3); margin-top: var(--e-4); } /* Le verdict : la première chose à lire — cette machine a-t-elle un problème ? */ /* ══ UN ÉTAT SE DIT PAR UN POINT ET DU TEXTE ══════════════════════════════════ Amadou (20/08) : « en aucun cas il y a des bulles rondes comme ça — regarde comment le site est fait ». Il a raison, et je m'étais trompé de composant : `.v-pastille` sert aux étiquettes de CONTENU (un coloris, une taille, un code robe). Un ÉTAT, sur cet écran comme sur Santé, se dit par `.cok-bs-dot` — un point de 9 px avec son halo — suivi du texte dans la même couleur. Deux composants, deux usages ; j'avais pris le mauvais, et ça se voyait à l'œil avant de se voir dans le code. */ .mac-verdict { display: inline-flex; align-items: center; gap: var(--e-8); font-size: var(--t-base); font-weight: var(--fw-moyen); white-space: nowrap; background: none; padding: 0; border-radius: 0; color: var(--cok-text-3); } .mac-verdict::before { content: ''; flex: none; width: var(--e-8); height: var(--e-8); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 var(--e-2) transparent; } .mac-verdict.v-pastille--ok { color: var(--cok-green); } .mac-verdict.v-pastille--ok::before { box-shadow: 0 0 0 var(--e-2) var(--cok-green-bg); } .mac-verdict.v-pastille--attente { color: var(--cok-amber); } .mac-verdict.v-pastille--attente::before { box-shadow: 0 0 0 var(--e-2) var(--cok-warn-bg); } .mac-verdict.v-pastille--alerte { color: var(--cok-red); } .mac-verdict.v-pastille--alerte::before { box-shadow: 0 0 0 var(--e-2) var(--cok-red-bg); } /* ⚠️ ELLE N'AVAIT DE MARGE QU'EN HAUT : ce qui la suivait venait s'y coller. Un bloc qui ne réserve d'air que d'un côté oblige chacun de ses voisins à s'en occuper. */ .mac-tuiles2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: var(--e-12); margin-top: var(--e-20); margin-bottom: var(--e-20); } .mac-tu { padding: var(--e-14) var(--e-16); border-radius: var(--r-md); background: var(--cok-bg-2); border: 1px solid var(--cok-line); } .mac-tu .lb { font-size: var(--t-meta); color: var(--cok-text-3); } .mac-tu .vl { font-size: var(--t-title); font-weight: var(--fw-moyen); line-height: var(--lh-titre); margin-top: var(--e-4); color: var(--cok-text); } .mac-tu .vl.ok { color: var(--cok-green); } .mac-tu .vl.rd { color: var(--cok-red); } .mac-tu .vl.am { color: var(--cok-amber); } .mac-tu .nt { font-size: var(--t-meta); color: var(--cok-text-3); margin-top: var(--e-2); } /* ⚠️ `.mac-fiche` / `.mac-f-l` RETIRÉES (15/08). Les grilles étiquette-valeur ne servaient qu'à répéter le sous-titre — l'hôte, l'adresse, l'espace y étaient déjà. Amadou : « le système d'intitulé avec à droite le nom, ça fait trop brouillon ». Le défaut n'était pas leur dessin : c'est qu'elles disaient une deuxième fois ce qu'on venait de lire. Du CSS qui met en forme une redondance reste une redondance. */ /* Ce qui n'est pas mesuré se dit UNE fois, en creux — jamais en dix pastilles. */ .mac-attente { margin-top: var(--e-22); padding: var(--e-14) var(--e-16); border-radius: var(--r-md); border: 1px dashed var(--cok-border-2); color: var(--cok-text-3); font-size: var(--t-base); line-height: var(--lh-normal); } .mac-attente b { color: var(--cok-text-2); font-weight: var(--fw-moyen); } .mac-detail { margin-top: var(--e-18); } .mac-k { font-size: var(--t-meta); color: var(--cok-text-3); } .mac-faux { color: var(--cok-red); } /* Le corps ne se dessine que si la machine est ouverte : un bloc masqué qu'on garde dans la page, c'est du contenu qui s'imprime et se lit à l'aveugle. */ .mac-corps { display: none; padding: 0 var(--e-16) var(--e-14); border-top: 1px solid var(--cok-line); } .mac-vds.ouverte .mac-corps { display: block; } .mac-ln { display: grid; grid-template-columns: 56px minmax(0,1.6fr) auto; gap: var(--e-14); align-items: center; padding: var(--e-14) 0; border-bottom: 1px solid var(--cok-line); } .mac-ln:last-child { border-bottom: none; } /* ── LE SOUS-PARC : une sortie mobile, et les comptes qui la partagent ──────── Amadou (15/08) : « un parc de VDS avec des sous-parcs — dans un VDS, un sous-parc avec une IP mobile contenant vingt-cinq comptes ». C'est la maille qui compte : si cette sortie grille, tous ces comptes grillent ensemble. */ .mac-sp { margin-top: var(--e-14); } .mac-sp:first-child { margin-top: var(--e-4); } .mac-sp-tete { display: flex; align-items: center; gap: var(--e-8); padding: var(--e-8) 0 var(--e-6); color: var(--cok-text-3); } .mac-sp-nom { font-size: var(--t-base); color: var(--cok-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mac-entete, .mac-entete span { font-size: var(--t-meta); color: var(--cok-text-3); } .mac-pro { font-size: var(--t-base); font-weight: var(--fw-fort); color: var(--cok-text-2); } .mac-cpt { font-size: var(--t-base); color: var(--cok-text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; } .mac-cpt i { display: block; font-style: normal; margin-top: var(--e-2); } .mac-et { display: flex; gap: var(--e-6); flex-wrap: wrap; } .mac-flux { margin-top: var(--e-18); } .mac-fl-tete { display: flex; gap: var(--e-10); margin-top: var(--e-12); } .mac-fl-liste { margin-top: var(--e-12); display: flex; flex-direction: column; } .mac-fl { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: var(--e-12); align-items: center; padding: var(--e-8) 0; border-bottom: 1px solid var(--cok-line); font-size: var(--t-base); color: var(--cok-text-2); } .mac-fl:last-child { border-bottom: none; } /* ── LE FLUX ────────────────────────────────────────────────────────────────── ⚠️ Le débit d'abord, et en gros : c'est la seule chose qui explique pourquoi une création traîne. Le détail (qui consomme, qui est lent) vient après. */ .mac-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--e-10); margin-top: var(--e-14); } .mac-t { padding: var(--e-12) var(--e-14); border-radius: var(--r-md); background: var(--cok-bg-2); border: 1px solid var(--cok-line); } .mac-t b { display: block; font-size: var(--t-title); font-weight: var(--fw-moyen); color: var(--cok-text); line-height: var(--lh-titre); } .mac-t span { font-size: var(--t-meta); color: var(--cok-text-3); } .mac-fams { margin-top: var(--e-14); } .mac-fam { display: grid; grid-template-columns: 120px minmax(0,1fr) 44px; gap: var(--e-10); align-items: center; padding: var(--e-6) 0; font-size: var(--t-base); color: var(--cok-text-2); } /* ⚠️⚠️⚠️ SANS `display`, ELLE N'EXISTAIT PAS (27/08/2026). `.mac-bar` est posée sur un `` : inline par défaut, donc `height` est IGNORÉ et la barre ne se voit pas. Elle s'affichait quand même à un endroit — par accident, parce que son parent était flex et la « blockifiait ». Ailleurs, rien. Une règle qui dépend du parent pour exister n'est pas une règle, c'est une coïncidence. */ .mac-bar { display: block; height: 8px; border-radius: var(--r-pilule); background: var(--cok-bg-2); } .mac-bar i { display: block; height: 100%; border-radius: var(--r-pilule); background: var(--cok-accent); } .mac-fam .mac-k { text-align: right; } .mac-nat { display: flex; gap: var(--e-6); flex-wrap: wrap; margin-top: var(--e-12); padding-top: var(--e-12); border-top: 1px solid var(--cok-line); } @media (max-width: 620px) { .mac-fam { grid-template-columns: 88px minmax(0,1fr) 38px; } } @media (max-width: 760px) { .mac-ln { grid-template-columns: 44px minmax(0,1fr); } .mac-et { grid-column: 1 / -1; } .mac-hote { width: 100%; } } @media (max-width: 700px) { } /* L'étiquette qui porte ce que SHEIN nous dit du colis : l'arrivée estimée et le transporteur. ⚠️ Un ton à part, ni violet (le logiciel) ni ambre (l'alerte) : c'est une information venue de l'extérieur, et la confondre avec un état de Velbo ferait croire qu'on la maîtrise. Quand l'arrivée est proche, l'étiquette passe en ambre — elle devient alors une échéance, pas un renseignement. */ .cmd-tag--shein { color: var(--green); background: rgba(127,212,193,0.10); border-color: rgba(127,212,193,0.32); } /* « En attente de l'expédition » : une étape sans geste doit le DIRE, sinon on cherche le bouton qui manque. */ .cmd-attend { font-size: var(--t-meta); color: var(--cok-text-3, rgba(var(--th-voile),0.42)); white-space: nowrap; padding: 0 var(--e-4); } /* ── L'écran de lancement d'une création ───────────────────────────────────── Validé par Amadou (09/08) : elle à gauche — son visage, sa ville, ses photos, sa description — et le lancement à droite. On met une personne au monde, pas un enregistrement : c'est elle qui prend la place, pas le formulaire. */ /* Sa fiche vit dans un logement nommé pour être prêtée au parcours pendant une création, puis rendue. Elle garde sa colonne de droite au repos. */ /* ⚠️⚠️ L'ESPACE SE POSE SUR LE PARENT, PAS SUR LES ENFANTS. Mesuré dans le navigateur le 20/08 : entre le bas des réglages et le haut du bouton « Créer le compte », il y avait **0 pixel**, à 1440 comme à 1100 de large. Le bouton, écrit après, peignait son fond plein par-dessus le trait des encadrés : « ça mord dedans ». Les 16 px qui séparaient les deux appartenaient à l'ANCIEN bouton « Lancer la rafale » (`.cok-raf-go`, plus aucun utilisateur depuis le 18/08). Le HTML a déménagé, la feuille de style n'a pas suivi — la marge est restée écrite sur une règle morte, si bien qu'en relisant le CSS on croyait l'espace géré. Un `gap` sur le parent ne peut pas déménager avec un bloc. C'est déjà le motif de la maison : `.cok-horlo-g` juste au-dessus fait exactement ça. */ .cpl-lancer { display: flex; flex-direction: column; gap: var(--e-20); margin-top: var(--e-18); } /* ⚠️ UN ENFANT VIDE PREND QUAND MÊME SON `gap`. `#cp-rafale-corps` et `#cp-tailles-crea` sont vides au repos (mesuré : deux div à hauteur 0) : sans ça, ils ajoutaient 40 px de blanc sous le bouton pour ne rien dire. */ .cpl-lancer > :empty { display: none; } /* la marge basse est passée au `gap` du parent (voir .cpl-lancer) */ .cpl-pret { display: flex; flex-direction: column; gap: var(--e-10); margin: 0; } .cpl-p { display: flex; align-items: center; gap: var(--e-10); font-size: var(--t-base); color: var(--cok-text-2); } .cpl-p i { width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto; font-style: normal; font-size: var(--t-micro); display: flex; align-items: center; justify-content: center; } .cpl-p i.ok { background: var(--cok-green-bg); color: var(--cok-green); } /* ⚠️ Ce qui reste à SA charge se distingue de ce qui est déjà prêt : sans cette différence, la liste laisserait croire que tout est automatique. */ .cpl-p i.toi { background: var(--cok-accent-bg); color: var(--cok-accent); font-weight: var(--fw-gras); } @media (max-width: 760px) { .cpl-grid { grid-template-columns: 1fr; gap: var(--e-22); } } /* ── Pendant une création : équilibrer les deux colonnes ───────────────────── ⚠️ Amadou (09/08) : « c'est hyper mal agencé ». Sa carte fait trois grandes photos plus une description entière — elle écrasait une frise de sept lignes, et repoussait l'écran en direct tout en bas de la page. On la compacte : ce n'est pas une fiche à lire ici, c'est un repère pour savoir QUI se crée. */ #cpf-fiche .cok-horlo-vues { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); } #cpf-fiche .cok-horlo-vues img, #cpf-fiche .cok-horlo-vues > * { aspect-ratio: 3/4; height: auto; max-height: 190px; object-fit: cover; border-radius: var(--r-sm); } /* La description se lit en entier dans sa fiche vendeuse, pas ici : quelques lignes suffisent à reconnaître le ton, le reste défile. */ #cpf-fiche .cok-horlo-bio { max-height: 108px; overflow: auto; } #cpf-fiche .cok-launch { margin-top: 0 !important; } /* La colonne de droite ne doit pas s'étirer plus haut que son contenu utile : l'écran vient juste sous la fiche, pas après un mur de texte. */ .cpf-cote { position: sticky; top: 12px; align-self: start; } /* La frise et l'écran forment une seule colonne : l'un dit où on en est, l'autre le montre. Les séparer obligeait à regarder à deux endroits. */ .cpf-suite { display: flex; flex-direction: column; gap: var(--e-20); min-width: 0; } .cpf-suite .cpf-ecran { margin-top: 0; } /* ══════════════════════════════════════════════════════════════════════════════ UN ONGLET NE CHANGE PAS DE TAILLE QUAND ON LE CHOISIT Amadou (09/08) : « les boutons quand on appuie dessus s'allongent, c'est gênant ». ⚠️⚠️ CAUSE : l'état actif passe la graisse de 500 à 600. Avec Inter chargée, le texte gras est plus large — donc le bouton s'élargit, et tous ses voisins de droite se décalent. Sur une barre de huit onglets, chaque clic fait bouger la barre entière. ⚠️ Invisible en essai : le navigateur d'épreuve n'a pas Inter, il dessine 500 et 600 à l'identique. Padding et bordure, eux, sont mesurés IDENTIQUES dans les deux états — la graisse est donc la seule différence capable de changer la largeur. ⭐ On garde la graisse normale : le fond en dégradé et le texte foncé disent déjà, sans la moindre ambiguïté, quel onglet est choisi. On ne perd aucun repère, on gagne une barre qui ne bouge plus. ⚠️ Ne concerne QUE les onglets. Une puce d'état ou un compteur peuvent grossir sans gêner : ils ne sont pas dans une rangée dont l'alignement compte. ════════════════════════════════════════════════════════════════════════════ */ .an-so.on, .an-so.active, .cokmsg-tab.on, .cokmsg-tab.active, .msg-tab.on, .msg-tab.active, .ctrl-esc-subtab.on, .ctrl-esc-subtab.active, .gen-tab.on, .gen-tab.active, .gen-subtab.on, .gen-subtab.active, .src-stab.on, .src-stab.active, .cok-cmd-stab.on, .cok-cmd-stab.active, .drafts-tab.on, .drafts-tab.active, .pa-tab.on, .pa-tab.active, .model-tab.on, .model-tab.active, .cok-wtab.on, .cok-wtab.active, .lib-vend-onglet.on, .lib-vend-onglet.active, .lib-tier-tab.on, .lib-tier-tab.active, .dress-coloris-tab.on, .dress-coloris-tab.active, /* ⚠️⚠️ VINGT FAMILLES MANQUAIENT, ET AMADOU L'A REDIT LE 11/08 : « c'est le CLIC qui crée le décalage ». La première liste ne couvrait que les barres d'onglets ; or le même défaut vit dans les rangées de PUCES et de SEGMENTS, et surtout dans `.cok-cmd-grp` — les boutons Suivi / SHEIN / Entrepôt, c'est-à-dire la rangée qu'on clique le plus. ⚠️ Recensé en listant TOUTES les règles `.on`/`.active` qui touchent une propriété capable de changer une largeur (graisse, chasse, marge intérieure, corps, bordure) sur un sélecteur de bouton — pas en cherchant à l'œil. C'est le comptage qui a trouvé les vingt, la lecture n'en avait vu qu'une. ⚠️⚠️ ET ÇA NE SE VOIT PAS À L'ESSAI : le navigateur d'épreuve n'a pas Inter, il dessine 500 et 600 à l'identique. Toute vérification ici doit lire la GRAISSE CALCULÉE, jamais comparer deux largeurs à l'écran — c'est ce qui m'avait fait conclure « corrigé » à tort. */ .cok-cmd-grp.on, .cok-cmd-grp.active, .cok-cmd-grp.on-vinted, .cok-cmd-grp.on-shein, .cok-cmd-grp.on-wh, .cok-chip.on, .cok-chip.active, .ctrl-esc-cat-chip.on, .ctrl-esc-cat-chip.active, .lib-fchip.on, .lib-fchip.active, .ds-pill.on, .ds-pill.active, .dem-pill.on, .dem-pill.active, .src-gab.on, .src-gab.active, .msg-vue.on, .msg-vue.active, .lib-marque-chip.on, .lib-marque-chip.active, .prod-view-chip.on, .prod-view-chip.active, .cok-prof-f.on, .cok-prof-f.active, .pg-seg-b.on, .pg-seg-b.active, .lib-filter.on, .lib-filter.active, .batch-mode-btn.on, .batch-mode-btn.active, .fin-period-btn.on, .fin-period-btn.active, .lib-picker-tier-tab.on, .lib-picker-tier-tab.active, .atelier-param-btn.on, .atelier-param-btn.active, .cok-vend-onglet.on, .cok-vend-onglet.active, .el-segb.on, .el-segb.active, .cok-master span.on { font-weight: var(--fw-moyen); } /* ⚠️⚠️ ET DEUX ENFONCEMENTS QUI SE CONTREDISAIENT. `scale(.975)` était écrit ligne ~240, `translateY(1px)` ligne ~17993 : à poids égal, le second gagnait, mais les deux prétendaient décrire « l'appui » et personne ne pouvait le deviner en lisant l'un des deux. Un seul geste, énoncé une fois — et c'est l'enfoncement, pas le rétrécissement : un bouton qui rapetisse sous le doigt donne l'impression de reculer. */ .an-so:active, .cokmsg-tab:active, .msg-tab:active, .ctrl-esc-subtab:active, .gen-tab:active, .gen-subtab:active, .src-stab:active, .cok-cmd-stab:active, .drafts-tab:active, .pa-tab:active, .model-tab:active, .cok-wtab:active, .lib-vend-onglet:active, .dress-coloris-tab:active, .lib-tier-tab:active, .cok-chip:active, .cok-cmd-grp:active, .nav-item:active { transform: translateY(1px); } /* ══════════════════════════════════════════════════════════════════════════════ TOUS LES COMPTEURS D'ONGLET RÉSERVENT LEUR PLACE Amadou (09/08) : « ce n'est pas que pour le bouton "En retard", c'est pour tous les autres aussi ». Il a raison : j'avais protégé UNE famille sur sept. ⚠️⚠️ Le défaut est le même partout : un compteur qui passe de 9 à 10, ou qui arrive après le premier rendu, s'élargit — et pousse tous ses voisins de droite. Sur une rangée d'onglets, toute la barre se décale sous le doigt. ⚠️ `font-variant-numeric: tabular-nums` était déjà posé sur plusieurs d'entre eux et ne suffit pas : il égalise les chiffres ENTRE EUX, pas le NOMBRE de chiffres. ⚠️ `box-sizing: content-box` est indispensable : ces compteurs sont des pastilles avec du rembourrage, et en `border-box` (le réglage global du site) la largeur minimale engloberait le rembourrage — il resterait treize pixels pour écrire « 148 ». ⚠️⚠️ LA RÉSERVE ÉTAIT EN `ch`, ET C'ÉTAIT LA FAUTE (corrigé le 11/08, Amadou : « le même bug qu'au niveau des sous-boutons »). `ch` vaut la largeur du zéro DANS LA POLICE COURANTE — donc elle change deux fois toute seule : · quand Inter finit de charger, `2.4ch` ne mesure plus la même chose qu'au premier rendu en police de repli. La réserve elle-même se met à bouger. · et quand la graisse change (voir `.vide` plus bas), `ch` change AVEC elle. Autrement dit, une réserve censée figer la largeur variait pour deux raisons. En pixels, elle ne bouge plus jamais, quelle que soit la police. ⭐ Et le compte est plafonné à « 99+ » côté JS : au-delà, aucune réserve ne tiendrait. ════════════════════════════════════════════════════════════════════════════ */ .cok-cmd-stab-n, .an-so-n, .lib-tier-tab-count, .lib-marque-chip-count, .src-stab .n, .src-gab .n, .src-usage-b .n, .cok-cmd-grp .n, .drafts-tab-n, .cok-wtab-n { display: inline-block; box-sizing: content-box; font-variant-numeric: tabular-nums; /* ⚠️ DEUX CHIFFRES, pas trois. Réserver trois donnait des pastilles de 37 px pour afficher « 7 » : on remplaçait un décalage par un vide. Au-delà de 99, le JS écrit « 99+ », qui tient dans la même place. */ min-width: 17px; text-align: center; /* ⚠️⚠️ ET LA GRAISSE NE CHANGE PLUS. `.vide` la passait de 700 à 500 : un compteur qui recevait son premier chiffre devenait plus GRAS, donc plus large, et poussait ses voisins — le décalage exact qu'Amadou décrit. Un zéro se distingue très bien par sa seule transparence. */ font-weight: var(--fw-gras); } /* ── La bascule lancement → parcours ───────────────────────────────────────── Amadou (09/08) : « c'est brusque ». L'ancien écran s'efface en fondu pendant que le nouveau monte. 150 ms : assez pour que l'œil suive, trop court pour attendre. ⚠️ Ces classes sont posées UNE FOIS, au moment du clic, et retirées juste après. Les laisser ferait rejouer l'entrée à chaque rafraîchissement de la frise — soit un clignotement toutes les dix secondes, le défaut qu'on a déjà payé avec `velbo-entree`. */ .cp-sort { animation: cpSort .15s ease forwards; } @keyframes cpSort { to { opacity: 0; transform: translateY(-6px); } } .cp-entre { animation: cpEntre .34s cubic-bezier(.22,.61,.36,1) both; } @keyframes cpEntre { from { opacity: 0; transform: translateY(10px); } } /* Les étapes se posent l'une après l'autre — un décalage court, jamais rejoué. */ .cp-entre .cpf-e { animation: cpPas .3s ease both; } .cp-entre .cpf-e:nth-child(2) { animation-delay: .04s; } .cp-entre .cpf-e:nth-child(3) { animation-delay: .08s; } .cp-entre .cpf-e:nth-child(4) { animation-delay: .12s; } .cp-entre .cpf-e:nth-child(5) { animation-delay: .16s; } .cp-entre .cpf-e:nth-child(6) { animation-delay: .2s; } .cp-entre .cpf-e:nth-child(7) { animation-delay: .24s; } @keyframes cpPas { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .cp-sort, .cp-entre, .cp-entre .cpf-e { animation: none; } } /* La fiche et l'écran arrivent en douceur avec le parcours, sans se déplacer. */ .cp-entre .cpf-fiche, .cp-entre .cpf-ecran { animation: cpPas .32s ease both; } .cp-entre .cpf-ecran { animation-delay: .1s; } .cp-entre .cpf-fiche { animation-delay: .14s; } /* ── Le parcours vit AU-DESSUS des deux colonnes ───────────────────────────── ⚠️ Sa fiche ne change plus jamais de place ni d'état : seule la colonne de gauche échange son contenu (la carte de lancement, puis l'écran en direct). C'est ce qui règle les disparitions décalées — un seul élément bouge. */ .cok-horlo-g { min-width: 0; display: flex; flex-direction: column; gap: var(--e-18); } .cok-horlo-g > * { margin-top: 0 !important; } .cpf-droite { display: flex; align-items: center; gap: var(--e-10); flex-wrap: wrap; } /* Les boutons rejoignent la pastille : les gestes du parcours au même endroit que son état, au lieu d'être relégués tout en bas de la page. */ .cpf-droite .cpf-actions { display: flex; gap: var(--e-10); margin: 0; } /* ── Les deux colonnes se calent sur la plus courte ────────────────────────── Choix d'Amadou (09/08) : c'est l'ÉCRAN qui décide de la hauteur — c'est lui qu'on regarde — et sa carte s'y adapte. Sa description défile à l'intérieur plutôt que d'allonger la colonne. Sans ça, les deux pavés finissaient à des hauteurs différentes et le bloc paraissait bancal. */ .cok-horlo { align-items: stretch; } .cok-horlo > * { min-height: 0; } #cp-fiche-place { display: flex; min-height: 0; } #cp-fiche-place > * { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* La description prend ce qui reste, et défile si sa carte est plus haute que l'écran. */ #cp-fiche-place .cok-horlo-bio { flex: 1; min-height: 0; overflow: auto; } /* ── L'écran d'attente a la taille de l'écran final ────────────────────────── Amadou (09/08). Le bloc « Son navigateur travaille » faisait 235 px de haut, l'image reçue en fait le double : la colonne changeait donc de hauteur au moment où la première photo arrivait, et sa fiche sautait avec elle. Les deux états partagent maintenant le même format — celui d'une fenêtre Brave. */ #cp-compte-etat .mdl-ecran-corps { aspect-ratio: 16 / 10; min-height: 0; } #cp-compte-etat .mdl-ecran-corps.direct { display: flex; align-items: center; justify-content: center; overflow: hidden; } #cp-compte-etat .mdl-ecran-corps.direct img { width: 100%; height: 100%; object-fit: contain; } /* ⚠️⚠️ LE CADRE PREND LA FORME DE L'IMAGE, IL NE LA LUI IMPOSE PAS. Amadou (15/08) : « l'affichage de l'écran ne rentre pas entièrement dans l'écran, c'est moche. » Le 16/10 était une réservation de place — il évite que la colonne saute quand la première photo arrive (Amadou, 09/08) — mais une fenêtre Brave n'est PAS en 16/10 : la sienne est presque carrée. Résultat, deux bandes vides sur les côtés et une image rétrécie au milieu. Dès que l'image est là, le JS écrit sa vraie proportion dans `--ecran-forme` (voir `_cpEcranSuivre`) et le cadre s'y ajuste : plus de bandes, et toujours rien de coupé. Le plafond garde la colonne raisonnable — au-delà, `contain` reprend la main et l'image se contente d'être plus petite, jamais rognée. ⚠️ La proportion par défaut reste le 16/10 : `var()` sur une variable absente ne lève AUCUNE erreur dans ce projet, elle rend la déclaration muette. Le repli est donc écrit ici, dans le var() lui-même. */ #cp-compte-etat .mdl-ecran-corps.direct { aspect-ratio: var(--ecran-forme, 16 / 10); max-height: 58vh; } /* ══════════════════════════════════════════════════════════════════════════════ ⚠️⚠️ CE BLOC EST EN FIN DE FICHIER, ET CE N'EST PAS UN HASARD. Écrit d'abord au milieu, il était ÉCRASÉ par une règle de survol plus ancienne, de MÊME FORCE, située plus bas : `.cok-cmd-stab:not(.on):not(.active):hover` posait à nouveau le fond pâle. À force égale, c'est le dernier qui gagne — c'est la troisième fois aujourd'hui que ce détail change tout (l'écart des onglets, la graisse, et maintenant le survol). ⚠️ Mesuré dans le CSSOM, pas à l'œil : `getComputedStyle` ne recalcule pas sur un élément déjà en place, il m'aurait répondu que tout allait bien. ════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════════ LE SURVOL D'UN ONGLET TIRE VERS LE VIOLET, PAS VERS LE BLANC ══════════════════════════════════════════════════════════════════════════════ Amadou, pour la troisième fois : « lorsque je survole les boutons, ça se met en gris ». Le fond de survol EST violet (`--survol-fond`), et pourtant il a raison. ⚠️⚠️ MESURÉ, PAS SUPPOSÉ. Fond de page rgb(16,19,31) ; onglet au repos rgb(26,28,40) ; au survol rgb(41,41,68). L'écart est de quinze points sur trois canaux : trop faible et trop sombre pour se lire comme une couleur. ET SURTOUT le survol force `color: var(--sur-accent)` — du blanc sur du presque-noir écrase la teinte, c'est le défaut déjà corrigé sur 115 règles le 10/08. Le texte blanchit, le fond bouge à peine : l'œil ne voit qu'un gris. ⭐ On inverse : au survol, le TEXTE prend le violet clair — la même teinte que l'onglet actif, en plus léger. Un onglet survolé annonce ainsi ce qu'il deviendra au clic, au lieu de se décolorer. C'est le changement le plus lisible et c'est le moins coûteux : la couleur du texte se voit toujours, un fond à 13 % non. ⚠️ `:not(.on):not(.active)` — un onglet DÉJÀ choisi ne doit pas bouger au survol. */ .cok-cmd-stab:not(.on):not(.active):hover, .cok-cmd-grp:hover:not(.on):not([class*="on-"]), .an-so:not(.on):not(.active):hover, .cok-chip:not(.on):not(.active):hover, .lib-filter:not(.active):not(.on):hover, .src-stab:not(.on):not(.active):hover, .drafts-tab:not(.active):not(.on):hover, .cok-wtab:not(.on):not(.active):hover, .lib-tier-tab:not(.active):not(.on):hover { /* ⚠️⚠️ CE SURVOL POSAIT LA COULEUR DE L'ÉTAT CHOISI (`--cok-accent-bg`, exactement ce qu'écrit `.on`). Sur huit familles d'onglets et de pastilles, frôler celui qu'on n'a PAS choisi le faisait passer pour choisi. Amadou (02/09), à l'étape Source : « lorsque je sélectionne une option et que je survole l'autre, ce n'est pas intuitif ». Le doigt reste neutre — `--survol-fond` — et l'accent appartient à ce qui est retenu. C'est déjà la règle des deux autres survols groupés de cette feuille. */ background: var(--survol-fond); color: var(--text); } /* ── L'ESPACE PERSONNEL D'UNE VENDEUSE EN FORMATION ───────────────────────── Il répond à deux questions : qui est-elle, et est-ce qu'elle chauffe vraiment ? Les classes prolongent `form-*` de la liste — on n'invente pas un second dialecte. */ .form-carte-ecourt{font-size:var(--t-mini);color:var(--amber);margin-top:var(--e-4);line-height:var(--lh-normal)} /* ⚠️ Le retour appartient à la FICHE, pas à l'en-tête de l'onglet. Il s'encastrait sous le sous-titre « Un compte migré chauffe… » et empiétait dessus. Il respire. */ .form-retour{margin:var(--e-2) 0 var(--e-18);font-size:var(--t-meta)} .form-fiche-tete{display:flex;align-items:center;gap:var(--e-12);margin-bottom:var(--e-12)} .form-fiche-qui{min-width:0} .form-fiche-nom{font-size:var(--t-lead);font-weight:var(--fw-fort);letter-spacing:-.2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .form-fiche-sous{font-size:var(--t-meta);color:var(--text-muted,var(--text-2));margin-top:var(--e-2)} .form-fiche-lien{margin-left:auto;flex:0 0 auto;font-size:var(--t-meta);text-decoration:none} /* ⚠️ L'ESSENTIEL EN UNE PHRASE, avant tout bloc. La fiche ouvrait sur quatre tuiles de chiffres qui répétaient ce que la frise montre déjà — « 1/5 séances » et « prochaine dans 1 min » se lisent sur la frise, à leur vraie place dans la journée. */ .form-verdict{font-size:var(--t-body);font-weight:var(--fw-fort);color:var(--cok-text)} .form-verdict-s{font-size:var(--t-meta);color:var(--cok-text-3);margin-top:var(--e-2); margin-bottom:var(--e-14)} .form-jour-note{margin-top:var(--e-8);margin-bottom:0} .form-bloc{background:rgba(var(--th-voile),.025);border:1px solid var(--cok-border,rgba(var(--th-voile),.07)); border-radius:var(--r-lg);padding:var(--e-14) var(--e-16);margin-bottom:var(--e-10)} .form-bloc-tete{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-10); font-size:var(--t-base);color:var(--text-muted,var(--text-2));margin-bottom:var(--e-8)} .form-bloc-t{font-size:var(--t-base);font-weight:var(--fw-fort);margin-bottom:var(--e-4)} .form-bloc-s{font-size:var(--t-meta);color:var(--text-muted,var(--text-2));line-height:var(--lh-normal);margin-bottom:var(--e-12)} .form-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--e-10);margin-top:var(--e-12)} .form-chiffres b{display:block;font-size:var(--t-body);font-weight:var(--fw-fort);line-height:var(--lh-titre)} .form-chiffres span{display:block;font-size:var(--t-meta);color:var(--text-muted,var(--text-2));margin-top:var(--e-2)} /* La journée de 24 h : son sommeil en creux, ses séances en points. */ .form-jour{position:relative;height:28px;background:var(--bg-hover);border-radius:var(--r-xs);overflow:hidden} .form-nuit{position:absolute;top:0;height:100%;background:var(--cyan-tint);display:block} .form-pt{position:absolute;top:10px;width:8px;height:8px;border-radius:50%; background:var(--green);margin-left:calc(var(--e-4) * -1);display:block} .form-pt.rate{background:var(--red)} .form-jour-h{display:flex;justify-content:space-between;font-size:var(--t-micro); color:var(--text-muted,var(--text-2));margin-top:var(--e-6)} .form-seance{display:flex;gap:var(--e-12);padding:var(--e-10) 0;border-top:1px solid var(--cok-border,rgba(var(--th-voile),.07))} .form-seance:first-of-type{border-top:0;padding-top:var(--e-2)} .form-seance-h{flex:0 0 42px;font-size:var(--t-meta);color:var(--text-muted,var(--text-2)); font-variant-numeric:tabular-nums;padding-top:var(--e-1)} .form-seance-t{font-size:var(--t-base)} .form-seance-d{font-size:var(--t-meta);color:var(--text-muted,var(--text-2));margin-top:var(--e-2)} .form-seance-n{font-size:var(--t-mini);color:var(--amber);margin-top:var(--e-4);line-height:var(--lh-normal)} .form-ecran-place{margin-bottom:var(--e-10)} .form-actions{display:flex;gap:var(--e-8);flex-wrap:wrap} /* ── L'ENTRÉE : un bandeau discret, puis une ligne par vendeuse ───────────── Cinq cartes de 210 px écrasaient tout — noms tronqués, chiffres sur trois lignes. En ligne, chaque information a sa colonne et se compare d'un coup d'œil. */ /* ⚠️ TROIS NIVEAUX, TROIS RESPIRATIONS. Amadou (13/08) : « c'est trop serré, je vois trois couches, espace un minimum ». L'en-tête, le bandeau et la liste se touchaient : l'œil ne savait pas où commençait quoi. Chaque niveau a maintenant sa marge. */ .form-bandeau{display:flex;align-items:center;gap:26px;flex-wrap:wrap; padding:0 var(--e-2) var(--e-18);border-bottom:1px solid var(--cok-border,rgba(var(--th-voile),.07)); margin:var(--e-20) 0 var(--e-6)} .form-chip{background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:baseline; gap:var(--e-6);color:var(--text-muted,var(--text-2));font:inherit;transition:color .16s ease} .form-chip b{font-size:var(--t-lead);font-weight:var(--fw-fort);line-height:var(--lh-titre);color:var(--text,var(--text))} .form-chip span{font-size:var(--t-base)} .form-chip:hover{color:var(--text,var(--text))} .form-chip.on b,.form-chip.on span{color:var(--cyan,var(--cyan))} .form-chip.vert.on b,.form-chip.vert.on span{color:var(--green)} .form-chip.jaune.on b,.form-chip.jaune.on span{color:var(--amber)} .form-chip.rouge.on b,.form-chip.rouge.on span{color:var(--red)} .form-bandeau-alerte{margin-left:auto;font-size:var(--t-meta);color:var(--amber)} .form-liste{display:flex;flex-direction:column} .form-ligne{display:flex;align-items:center;gap:var(--e-20);padding:var(--e-20) var(--e-4); border-bottom:1px solid var(--cok-border,rgba(var(--th-voile),.07));transition:background .16s ease} .form-ligne:last-child{border-bottom:0} .form-ligne.cliquable{cursor:pointer} .form-ligne.cliquable:hover{background:var(--surface)} .form-pastille{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--green)} .form-ligne.jaune .form-pastille{background:var(--amber)} .form-ligne.rouge .form-pastille{background:var(--red)} .form-ligne.fini .form-pastille{background:rgba(var(--th-voile),.30)} /* ⚠️⚠️ UNE SEULE LIGNE POUR LE NOM ET SON PROFIL. Mesuré le 15/08 : le nom empilé au-dessus de son sous-titre fixait CHAQUE rangée à 82 px de haut — sept comptes remplissaient l'écran. Le profil (« C2 ») fait deux caractères ; il n'a jamais eu besoin d'une ligne à lui. Amadou : « c'est brouillon, les informations sont entassées ». */ .form-ligne-qui{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:var(--e-8)} .form-ligne-profil{flex:0 0 auto;font-size:var(--t-meta);color:var(--cok-text-3)} .form-ligne-nom{font-size:var(--t-small);font-weight:var(--fw-fort);line-height:var(--lh-serre);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .form-ligne-sous{font-size:var(--t-meta);color:var(--text-muted,var(--text-2));margin-top:var(--e-4); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .form-ligne-barre{flex:0 0 180px;min-width:0} .form-ligne-barre .form-barre{margin:0} .form-ligne-reste{font-size:var(--t-meta);color:var(--cok-text-3);margin-top:var(--e-6)} /* ⚠️⚠️ 172 px POUR UN TEXTE QUI EN DEMANDE 173. Mesuré le 15/08 sur la vraie donnée : « 1 séance · 13 pages · 11 favoris » réclame 173 px et la colonne en offrait 172. UN pixel — et « favoris » passait à la ligne, ce qui faisait monter CHAQUE rangée de la liste à 82 px de haut. C'est ça qu'Amadou voyait : « c'est brouillon, les informations sont entassées ». Pas un défaut de conception, une largeur figée à un cheveu près. ⚠️ D'où `nowrap` EN PLUS de la largeur : sans lui, le jour où un compte atteint 100 séances le même défaut revient en silence. Une largeur fixe sans interdiction de coupure est une bombe à retardement. */ .form-ligne-faits{flex:0 0 calc(var(--e-48) * 4);white-space:nowrap;font-size:var(--t-meta);color:var(--text-muted,var(--text-2));line-height:var(--lh-normal)} .form-ligne-ennui{flex:0 0 120px;font-size:var(--t-meta);color:var(--amber);line-height:var(--lh-normal)} /* ⚠️ UNE BARRE TOUJOURS PLEINE N'EST PAS UNE INFORMATION. Mesuré : six lignes sur sept affichaient une barre à 100 % — une formation finie EST à 100 %, par définition. Elle occupait la colonne la plus large de la rangée pour ne rien apprendre, pendant que le texte utile (« elle peut vendre », « profil disparu ») se serrait ailleurs. Sur une formation finie, la barre disparaît et son texte prend la place. */ .form-ligne.fini .form-barre, .form-ligne.finie .form-barre{display:none} .form-ligne.fini .form-ligne-reste, .form-ligne.finie .form-ligne-reste{margin-top:0} .form-ligne-fleche{flex:0 0 auto;color:var(--text-muted,var(--text-2));opacity:.55} .form-ligne.cliquable:hover .form-ligne-fleche{opacity:1} /* ⚠️ AUX DEUX LARGEURS. En dessous de 1100 px les colonnes se marchent dessus : le rendement et l'ennui passent sous le nom plutôt que d'être rognés. */ @media (max-width:1100px){ .form-ligne{flex-wrap:wrap;gap:var(--e-10) var(--e-18);padding:var(--e-18) var(--e-4)} .form-ligne-qui{flex:1 1 100%} .form-ligne-barre{flex:1 1 140px} .form-ligne-faits,.form-ligne-ennui{flex:0 0 auto} .form-ligne-fleche{margin-left:auto} } /* ⚠️ LA PASTILLE SEULE NE DIT RIEN. Un point vert à côté d'un nom ne s'interprète pas : on écrit le mot à côté. Il vit dans l'en-tête de l'écran, discret, entre le nom et la pastille — même bloc partout (Bibliothèque, Formation, création). */ .mdl-ecran-etat{margin-left:auto;font-size:var(--t-micro);letter-spacing:var(--ls-leger); color:var(--text-muted,var(--text-2));font-family:var(--font-sans,inherit)} /* La pastille portait `margin-left:auto` : avec le mot devant elle, les deux marges se disputaient l'espace libre et la pastille partait se coller au bord. */ .mdl-ecran-tete .mdl-ecran-etat + .mdl-ecran-pt{margin-left:0} /* ══════════════════════════════════════════════════════════════════════════════ T. PRODUITS — QUATRE EMPLACEMENTS, ET CE QUI MANQUE SE VOIT ══════════════════════════════════════════════════════════════════════════════ ⚠️⚠️ ÉCRIT EN MÊME TEMPS QUE LE JS, ET C'EST LE POINT. Trois fois aujourd'hui une classe a été nommée dans app.js sans jamais être stylée ici : le prix d'une commande, le panneau de détail, les tuiles du Sourcing. Rien ne prévient — le rendu ne plante pas, il s'affiche nu. On écrit donc les deux d'un seul geste. ⚠️ Bloc en fin de fichier : à force égale, c'est le dernier qui gagne. */ .dress-prod-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-12); flex-wrap: wrap; margin-bottom: var(--e-12); } .dress-prod-qui { display: flex; align-items: center; gap: var(--e-8); min-width: 0; } .dress-prod-nom { font-size: var(--t-small); font-weight: var(--fw-fort); color: var(--text); } .dress-prod-sub { font-size: var(--t-mini); color: var(--text-3); } /* ⚠️ La phrase dit une CONSÉQUENCE, pas un compte — elle mérite donc d'être lue : teinte pleine, jamais grise. */ .dress-prod-etat { font-size: var(--t-meta); padding: var(--e-4) var(--e-10); border-radius: var(--r-md); background: var(--bg-hover); color: var(--text-2); } .dress-prod-etat.ok { background: rgba(74,222,128,0.13); color: var(--green); } .dress-prod-etat.moyen { background: rgba(240,176,85,0.14); color: var(--amber); } .dress-prod-etat.vide { background: rgba(var(--th-danger-rgb),0.13); color: var(--red); } .dress-prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-10); } .dress-prod-case { min-width: 0; } .dress-prod-case > .model-view-cell, .dress-prod-case > .dress-prod-vide { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; } /* L'emplacement VIDE reste dessiné : c'est tout l'objet de la refonte. Une grille qui n'affiche que l'existant ne dit jamais ce qui manque. */ .dress-prod-vide { display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px dashed rgba(var(--th-voile),0.16); color: var(--text-3); background: var(--cok-bg-2); transition: border-color var(--t-bref) var(--c-pose), color var(--t-bref) var(--c-pose); } .dress-prod-vide:hover { border-color: var(--violet-glow); color: var(--violet-light, #B9AEFF); } .dress-prod-lbl { font-size: var(--t-meta); color: var(--text-2); margin-top: var(--e-6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dress-prod-st { font-size: var(--t-micro); color: var(--amber); margin-top: var(--e-1); } .dress-prod-st.ok { color: var(--green); } .dress-prod-autres { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-6); margin-top: var(--e-16); } .dress-prod-autres-l { font-size: var(--t-mini); font-weight: var(--fw-fort); letter-spacing: var(--ls-large); text-transform: uppercase; color: var(--text-3); margin-right: var(--e-4); } .dress-prod-chip { display: inline-flex; align-items: center; gap: var(--e-8); font: inherit; font-size: var(--t-meta); cursor: pointer; color: var(--text-2); background: rgba(var(--th-voile),0.04); border: 1px solid transparent; border-radius: var(--r-md); padding: var(--e-6) var(--e-10); } .dress-prod-chip:hover { background: var(--violet-tint); color: var(--violet-light, #B9AEFF); border-color: var(--tier-premium-glow); } .dress-prod-chip b { font-weight: var(--fw-fort); color: var(--green); } .dress-prod-chip b.zero { color: var(--text-3); } /* Sous 1100 px la colonne de droite se resserre : deux emplacements par rangée plutôt que quatre écrasés. */ @media (max-width: 1100px) { .dress-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── QUI CONDUIT QUOI ──────────────────────────────────────────────────────── Même dialecte que la liste de Formation : une ligne par vendeuse, chaque information dans sa colonne, et les doutes en haut. */ /* ══ LIENS — LE VERDICT D'ABORD ══════════════════════════════════════════════ Amadou (15/08) : « la partie lien, c'est vraiment mal fait, l'interface n'est pas pertinente ». Mesuré sur le serveur : 21 liens, 21 sûrs, ZÉRO à relire. L'écran dont le métier est de faire relire les liens devinés n'avait rien à faire relire — et déroulait quand même 21 rangées. Un écran de sécurité rassure en une phrase ; il ne fait pas lire une liste. */ /* ⚠️ CE VERDICT N'APPARTIENT PLUS AUX LIENS. La Vigie s'en sert aussi : deux écrans qui répondent à la même sorte de question — « est-ce que ça tient ? » — doivent se lire pareil. Un deuxième dessin pour la même idée finirait par diverger, comme `.mac-c` a failli le faire. */ .v-verdict { font-size: var(--t-body); font-weight: var(--fw-fort); color: var(--cok-text); margin-top: var(--e-4); } .v-verdict-s { font-size: var(--t-meta); color: var(--cok-text-3); margin-top: var(--e-2); } /* ⚠️ CETTE ALERTE EXISTAIT DÉJÀ DANS LA DONNÉE, noyée en petit gris dans un sous-titre : `etat: "inconnu du serveur"`. C'est pourtant la seule chose actionnable de l'écran — un lien qui tient sur un compte que la machine ne voit plus. */ .v-alerte { margin-top: var(--e-14); padding: var(--e-10) var(--e-12); border-radius: var(--r-md); background: var(--moy-bg); color: var(--cok-amber); font-size: var(--t-base); line-height: var(--lh-normal); } .v-alerte b { font-weight: var(--fw-fort); } /* ⚠️⚠️ « UNE CLASSE NOMMÉE N'EST PAS UNE CLASSE STYLÉE » — repris deux fois déjà. La liste de la vigie vient après un verdict : sans cette règle, elle se collerait dessus et le verdict se lirait comme la première ligne de la liste. */ .vig-liste { margin-top: var(--e-16); } /* ══ LE CENTRE DE CONTRÔLE DU DÉMASQUAGE ═════════════════════════════════════ Remplace un écran qui portait un scan manuel, un choix de motif, un dépôt de photos et un bouton « Démasquer l'annonce ». ⚠️⚠️ LE CHIFFRE DE TÊTE EST LE TRAVAIL, PAS LE STOCK. Amadou : « les annonces masquées sont censées être démasquées dans les minutes qui suivent, donc pourquoi mettre le nombre de masquées ? ». Un stock ne raconte rien quand la machine tourne — il reste à zéro. On met donc en tête ce que ça COÛTE : les favoris qui dorment. ⚠️ Et UN SEUL grand chiffre : trois nombres nus alignés ne se hiérarchisent pas, l'œil ne sait pas lequel lire. Le reste passe dans la phrase. */ /* ⚠️ LE CONTENEUR EST LA BOÎTE, PAS LA GRILLE. Première écriture : `container-type` posé sur `.rp-corps`, et la requête `@container` visait `.rp-corps` — un élément ne peut PAS répondre à sa propre largeur, sinon la mesure changerait ce qu'elle mesure. Résultat : une seule colonne à 1600 px, sans erreur ni avertissement. Le conteneur se met sur le PARENT de ce qu'on veut styler. */ .rp-box { border: 1px solid var(--cok-border); border-radius: var(--r-xl); background: var(--cok-card); overflow: hidden; container-type: inline-size; container-name: dmq; } .rp-tete { padding: var(--e-20) var(--e-24) var(--e-18); border-bottom: 1px solid var(--cok-border); } /* L'état tient dans une pastille. Il tenait dans un pavé orange qui écrasait l'écran : un état se signale, il ne se crie pas. */ .rp-pil { display: inline-flex; align-items: center; gap: var(--e-6); font-size: var(--t-mini); letter-spacing: .06em; text-transform: uppercase; color: var(--cok-amber); background: var(--moy-bg); border: 1px solid var(--cok-border-2); padding: var(--e-4) var(--e-12); border-radius: var(--r-pilule); } .rp-pt { width: 5px; height: 5px; border-radius: 50%; background: var(--cok-amber); } .rp-pil.ok { color: var(--cok-green); background: var(--cok-green-bg); } .rp-pil.ok .rp-pt { background: var(--cok-green); } .rp-hero { display: flex; align-items: baseline; gap: var(--e-10); margin-top: var(--e-12); } .rp-hn { font-size: var(--t-display); font-weight: var(--fw-moyen); color: var(--cok-text); line-height: var(--lh-un); font-variant-numeric: tabular-nums; } .rp-hl { font-size: var(--t-lead); color: var(--cok-text-2); } .rp-sub { font-size: var(--t-base); color: var(--cok-text-3); margin-top: var(--e-6); line-height: var(--lh-normal); max-width: 62ch; } /* ⚠️⚠️ LA JAUGE DIT CE QU'AUCUN CHIFFRE NE DISAIT : la concentration. Trois annonces pèsent 180 des 312 favoris — savoir qu'il y en a dix-neuf n'aide pas, savoir que trois valent plus que les seize autres réunies, si. */ .rp-jauge { display: flex; gap: var(--e-2); margin-top: var(--e-14); height: 6px; border-radius: var(--r-sm); overflow: hidden; } .rp-jauge i { display: block; height: 100%; } .rp-ja { background: var(--cok-amber); } .rp-jb { background: var(--cok-accent); } .rp-jc { background: var(--cok-border-2); } .rp-leg { display: flex; gap: var(--e-16); margin-top: var(--e-8); flex-wrap: wrap; font-size: var(--t-mini); color: var(--cok-text-3); } .rp-leg span { display: inline-flex; align-items: center; gap: var(--e-6); } .rp-leg b { width: 7px; height: 7px; border-radius: 2px; } /* ⚠️ DEUX COLONNES, PARCE QU'IL Y A DEUX HISTOIRES : ce qui attend, ce qui a été fait. Élargir une liste unique n'aurait fait que rallonger ses lignes. ⚠️ La mesure porte sur la BOÎTE, pas sur la fenêtre : le canevas fait 1322 px pour une fenêtre de 1600, et c'est la boîte qui manque de place, pas l'écran. */ .rp-corps { display: grid; grid-template-columns: 1fr; } .rp-col { padding: var(--e-16) var(--e-24) var(--e-20); min-width: 0; } .rp-col + .rp-col { border-top: 1px solid var(--cok-border); } @container dmq (min-width: 860px) { .rp-corps { grid-template-columns: 1fr 1fr; } .rp-col + .rp-col { border-top: 0; border-left: 1px solid var(--cok-border); } } .rp-ct { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-10); margin-bottom: var(--e-6); } .rp-cl { font-size: var(--t-mini); letter-spacing: .07em; text-transform: uppercase; color: var(--cok-text-3); } .rp-cn { font-size: var(--t-base); color: var(--cok-text-2); font-variant-numeric: tabular-nums; } /* Les filtres vivent SOUS le titre de la colonne qu'ils filtrent — flottants au-dessus, on ne savait pas ce qu'ils commandaient. */ .rp-f { display: flex; gap: var(--e-4); margin: var(--e-2) 0 var(--e-8); flex-wrap: wrap; } .rp-f button { font: inherit; font-size: var(--t-mini); padding: var(--e-4) var(--e-10); border-radius: var(--r-pilule); border: 1px solid var(--cok-border); background: none; color: var(--cok-text-3); cursor: pointer; transition: border-color var(--t-bref), color var(--t-bref), background var(--t-bref); } .rp-f button:hover { border-color: var(--cok-border-2); color: var(--cok-text-2); } .rp-f button.on { background: var(--cok-accent-bg); border-color: var(--cok-accent); color: var(--cok-accent); } .rp-l { display: flex; align-items: center; gap: var(--e-12); padding: var(--e-8) 0; border-top: 1px solid var(--cok-border); } .rp-l:first-of-type { border-top: 0; } .rp-v { width: 28px; height: 36px; border-radius: var(--r-sm); background: var(--surface-3); flex: 0 0 auto; } .rp-t { flex: 1 1 auto; min-width: 0; } .rp-ti { font-size: var(--t-base); color: var(--cok-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-cp { font-size: var(--t-mini); color: var(--cok-text-3); margin-top: var(--e-2); } .rp-q { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; } .rp-qn { font-size: var(--t-base); color: var(--cok-text-2); line-height: var(--lh-serre); } .rp-qn.ok { color: var(--cok-green); } .rp-ql { font-size: var(--t-mini); color: var(--cok-text-3); letter-spacing: .03em; } /* Au-delà de 30 favoris, l'annonce coûte assez cher pour se voir sans être cherchée. */ .rp-l.top .rp-qn { color: var(--cok-amber); font-weight: var(--fw-fort); } .rp-l.top .rp-ti { color: var(--cok-text); } /* ⚠️ LE VIDE SE DESSINE. Une phrase grise abandonnée dans un coin donne un écran qui a l'air cassé ; un bloc centré donne un écran qui attend. */ .rp-vide { padding: var(--e-24) 0 var(--e-8); text-align: center; } .rp-vi { width: 34px; height: 34px; margin: 0 auto var(--e-10); border-radius: 50%; border: 1px dashed var(--cok-border-2); display: flex; align-items: center; justify-content: center; } .rp-vi::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--cok-border-2); } .rp-vt { font-size: var(--t-base); color: var(--cok-text-3); line-height: var(--lh-normal); max-width: 34ch; margin: 0 auto; } /* ══ LA SALLE DES OUVRIERS ═══════════════════════════════════════════════════ Amadou : « c'est l'endroit où on gère nos salariés, il faut quelque chose de spécial — une table de réunion avec à chaque chaise un bouton ». ⚠️⚠️ TROIS FORMES ONT ÉTÉ JETÉES AVANT CELLE-CI : une liste de cinq lignes, une grille de cartes, un tableau d'interrupteurs. Trois fois « c'est moche », et trois fois il avait raison. Le défaut n'était pas le dessin : on affichait un RÉGLAGE là où il fallait montrer une ÉQUIPE. Une chaise vide dit « personne ne fait ce travail » mieux qu'un interrupteur sur « arrêt » — on voit le manque au lieu de lire un état. */ .sal { padding: var(--e-8) 0 var(--e-16); } /* ⚠️ LA PIÈCE PREND LA LARGEUR QU'ON LUI DONNE. Amadou : « l'écran au final sera plus large que ça ». À 680 px tout se marche dessus ; à 1100 chaque place respire. Le plafond est là pour que la salle ne devienne pas une banderole sur un écran 4K. */ /* ⚠️⚠️ LA PIÈCE SUIT L'ÉCRAN, MAIS RESTE UNE PIÈCE. Amadou : « l'onglet doit être responsive en largeur selon la taille de l'écran ». Une largeur figée laissait un grand écran à moitié vide ; une hauteur figée transformait un grand écran en BANDEROLE. La hauteur suit donc la largeur — bornée aux deux bouts, pour qu'on ne descende jamais sous une salle lisible ni ne monte jusqu'à une salle de cinéma. */ .sal-piece { position: relative; width: 100%; height: clamp(320px, 30vw, 520px); margin: 0 auto; border-radius: var(--r-xl); overflow: hidden; container-type: inline-size; container-name: salle; } /* ── LE DÉCOR ───────────────────────────────────────────────────────────────── Ce qui peut s'étirer est en CSS ; ce qui doit garder ses proportions (fenêtres, suspension, plante) est un SVG à taille fixe, posé par-dessus. Un décor entier en `preserveAspectRatio="none"` s'aplatit dès qu'on élargit la pièce. */ .sal-mur, .sal-lampe { pointer-events: none; } /* ⚠️ LES RÈGLES DES FENÊTRES PARTENT AVEC ELLES. Une classe qui ne s'applique plus à rien n'est pas neutre : c'est la prochaine personne qui la croit vivante et cherche pourquoi elle ne fait rien. */ .sal-mur { position: absolute; inset: 0; background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); } .sal-lampe { position: absolute; left: 50%; top: 0; width: 104px; height: 54px; transform: translateX(-50%); } .sal-fil { fill: var(--cok-border-2); } .sal-abat { fill: var(--surface-3); stroke: var(--cok-accent); stroke-opacity: .45; } .sal-ampoule { fill: var(--cok-accent); opacity: .32; } /* LA TABLE, vue de dessus. Ses proportions sont celles que le calcul des places utilise (`_SAL_RX/_SAL_RY/_SAL_CX/_SAL_CY` dans app.js) : les changer ici sans les changer là-bas décrocherait les chaises du plateau. */ /* LA TABLE, éclairée par la suspension : le plateau est plus clair au point que le cône touche, et non uniformément — c'est ce qui la fait exister dans la pièce. */ .sal-table { position: absolute; left: 8%; top: 50%; width: 84%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse at 50% 34%, rgba(var(--th-accent-rgb), .26), rgba(var(--th-accent-rgb), .09) 55%, var(--surface-2)); border: 1px solid var(--cok-border-2); box-shadow: inset 0 1px 0 rgba(var(--th-voile), .16); } .sal-centre { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: var(--e-2); text-align: center; pointer-events: none; } .sal-compte { font-size: var(--t-display); font-weight: var(--fw-moyen); color: var(--cok-text); line-height: var(--lh-un); } .sal-compte i { font-style: normal; font-size: var(--t-lead); color: var(--cok-text-3); margin-left: var(--e-4); } .sal-l { font-size: var(--t-base); color: var(--cok-text-3); } .sal-s { font-size: var(--t-meta); color: var(--cok-text-3); margin-top: var(--e-4); } /* UNE PLACE. Elle est ancrée sur le bord de l'ellipse : la chaise est DERRIÈRE ce point, la plaque de nom devant — donc posée sur le plateau. */ /* ⚠️ LA PLAQUE DOIT TOMBER SUR LE PLATEAU, pas flotter au-dessus. On pousse donc la station sous son point d'ancrage : le point est le bord de l'ellipse, la chaise reste derrière, la plaque passe devant — donc sur la table. */ /* ⚠️⚠️ UNE LARGEUR EN DUR NE PEUT PAS MARCHER. Mesuré à 820 px de fenêtre : la salle tombe à 516 px, l'écart entre deux places passe à 104 px, et des stations de 128 px se chevauchaient de 33. L'écart vaut toujours `2·ÉTAL·RX/(n−1)` de la largeur, soit 20 % ; une place doit donc se mesurer en POURCENTAGE de la pièce, jamais en pixels. */ .sal-p { position: absolute; /* la transform est calculée par station, dans app.js */ /* 20 % est l'écart exact entre deux places ; la rentrée vers le centre en mange encore ~9 px. 17,5 % laisse le jeu qu'il faut à toutes les largeurs. */ /* ⚠️ Le plafond doit suivre la pièce : à 1100 px, 17,5 % font 192 — un plafond à 140 laissait 84 px de trou entre les places du milieu et 3 px entre celles du bord. Un maximum trop bas ne serre pas, il DÉSÉQUILIBRE. */ width: 17.5%; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: var(--e-2); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: center; } /* ⚠️⚠️ LA CHAISE EXISTE VRAIMENT MAINTENANT. Elle n'était qu'un trait de 13 px sous les pieds : à l'écran on ne voyait personne assis, on voyait une silhouette qui flotte. Dossier arrondi derrière les épaules, assise en travers — et le buste par-dessus, pour qu'on lise « quelqu'un est assis là » et non « une forme et un meuble ». */ /* ⚠️ UNE SILHOUETTE QUI PREND TOUTE LA PLACE N'EST PLUS UNE PERSONNE, C'EST UNE AFFICHE. `width: 100%` d'une station de 17,5 % donnait 171 px de large à 976 px de pièce : les cinq écrasaient la table et le compte central. Une personne assise se mesure en dizaines de pixels, pas en fraction de l'écran. */ .sal-fig { display: block; width: 100%; max-width: 92px; height: auto; margin: 0 auto; transition: filter var(--t-moyen), transform var(--t-bref); } .sal-dos, .sal-assise { fill: none; stroke: var(--cok-border-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: stroke var(--t-bref); } .sal-corps { fill: var(--cok-inactif); transition: fill var(--t-moyen); } /* ⚠️⚠️ L'EMBLÈME EST RETIRÉ DE LA MATIÈRE PAR UN MASQUE SVG, il n'est pas peint par-dessus. Peint, il fallait lui choisir une couleur qui tienne sur seize thèmes ET sur un corps qui change de teinte (éteint, allumé, survolé) — impossible. Retiré, ce qu'on voit à travers est la pièce : le contraste est celui de la silhouette elle-même, donc il ne peut pas se tromper. */ /* ⚠️ LE SURVOL NE PEUT PAS ÊTRE POSÉ SUR `.sal-p` : sa `transform` porte la POSITION de la place, calculée station par station dans app.js — la remplacer déplacerait la chaise à travers la pièce. Et un simple éclaircissement ne se voyait pas : ce qui se lit, c'est le MOUVEMENT — l'ouvrier se redresse, comme quelqu'un à qui on s'adresse. */ .sal-p:hover:not([disabled]) .sal-fig { transform: translateY(-4px); filter: drop-shadow(0 0 8px rgba(var(--th-accent-rgb), .26)); } .sal-p:hover:not([disabled]) .sal-corps { fill: var(--cok-text-2); } .sal-p:hover:not([disabled]) .sal-dos, .sal-p:hover:not([disabled]) .sal-assise { stroke: var(--cok-border); } /* Au travail : le corps s'allume et rayonne, et sa chaise avec lui. */ .sal-p.on .sal-corps { fill: var(--cok-accent); } .sal-p.on .sal-dos, .sal-p.on .sal-assise { stroke: var(--cok-accent); stroke-opacity: .6; } .sal-p.on .sal-fig { filter: drop-shadow(0 0 9px rgba(var(--th-accent-rgb), .55)); } .sal-p.on:hover:not([disabled]) .sal-fig { filter: drop-shadow(0 0 14px rgba(var(--th-accent-rgb), .75)); } /* LA PLAQUE, posée sur le plateau devant sa chaise. */ .sal-nom { font-size: var(--t-base); color: var(--cok-text-3); white-space: nowrap; transition: color var(--t-bref); } .sal-p.on .sal-nom { color: var(--cok-text); font-weight: var(--fw-fort); } /* ⚠️ HAUTEUR FIXE. Sans elle, une plaque d'une ligne et une plaque de deux ne s'alignent pas, et les cinq chaises se retrouvent à cinq hauteurs — l'arc de la table disparaît. C'est le même défaut que les plaques en dents de scie de la version bande. */ .sal-q { font-size: var(--t-meta); color: var(--cok-text-3); line-height: var(--lh-serre); min-height: calc(var(--t-meta) * var(--lh-serre) * 2); } .sal-p.on .sal-q { color: var(--cok-accent); } /* La place choisie : son corps s'éclaircit et sa chaise se marque, sans prendre la couleur du travail — « je te regarde » n'est pas « tu bosses ». */ .sal-p.choisi .sal-corps { fill: var(--cok-text-2); } .sal-p.choisi .sal-dos, .sal-p.choisi .sal-assise { stroke: var(--cok-border); } .sal-p.choisi.on .sal-corps { fill: var(--cok-accent); } /* ══ L'ESPACE D'UN OUVRIER ═══════════════════════════════════════════════════ Amadou : « quand on appuie sur les ouvriers, on doit avoir un espace à eux qui s'ouvre », et « en bas, vu qu'il y a de l'espace ». ⚠️ Il se pose SOUS la salle, dans la place qui était vide : l'écran ne s'allonge pas d'un panneau, il remplit ce qu'il laissait perdre. */ .sal-esp { max-width: 560px; margin: var(--e-16) auto 0; border: 1px solid var(--cok-border); border-radius: var(--r-lg); background: var(--cok-card); padding: var(--e-16) var(--e-18) var(--e-18); } .sal-esp-tete { display: flex; align-items: flex-start; gap: var(--e-12); } .sal-esp-nom { font-size: var(--t-lead); color: var(--cok-text); } .sal-esp-quoi { font-size: var(--t-base); color: var(--cok-text-3); margin-top: var(--e-2); line-height: var(--lh-serre); } .sal-esp-x { margin-left: auto; flex: 0 0 auto; background: none; border: 0; font: inherit; font-size: var(--t-lead); line-height: var(--lh-un); color: var(--cok-text-3); cursor: pointer; padding: 0 var(--e-2); } .sal-esp-x:hover { color: var(--cok-text); } .sal-esp-faits { display: flex; gap: var(--e-32); margin: var(--e-16) 0; } .sal-esp-f { display: flex; flex-direction: column; gap: var(--e-2); } .sal-esp-f .l { font-size: var(--t-meta); color: var(--cok-text-3); } .sal-esp-f .v { font-size: var(--t-base); color: var(--cok-text-2); } .sal-esp-f .v.on { color: var(--cok-accent); } .sal-esp-btn { width: 100%; } .sal-esp-note { font-size: var(--t-meta); color: var(--cok-text-3); line-height: var(--lh-normal); } /* ⚠️ Un ouvrier forcé depuis le serveur ne se commande PAS d'ici : sa chaise doit se voir inerte, sinon c'est un bouton mort — le défaut que ce projet traque. */ .sal-p.fige { cursor: not-allowed; } .sal-p.fige .sal-dos, .sal-p.fige .sal-assise { stroke-dasharray: 3 3; } /* ⚠️ SOUS 640 px, LA PLAQUE PERD SA LIGNE DE TÂCHE. En dessous, une place fait moins de 120 px : la tâche y tombe sur trois lignes, la plaque grandit, et les cinq chaises ne sont plus sur le même arc — le cercle disparaît. Le nom suffit à ce format ; ce que fait l'ouvrier se lit dès qu'on élargit. Mieux vaut en montrer moins que casser la seule chose que cet écran raconte. */ @container salle (max-width: 640px) { .sal-q { display: none; } } /* Le profil devant le compte : c'est par LUI qu'on va le chercher sur le VDS, et c'est lui que nomme l'alerte (« C3, C10 : rien ne renouvelle ces sessions »). En retrait, parce qu'il situe — il ne remplace pas le nom du compte. ⚠️ « Une classe nommée n'est pas une classe stylée » : sans cette règle, `ses-profil` n'aurait RIEN fait et le profil se serait collé au pseudo, sans erreur nulle part. */ .ses-profil { display: inline-block; min-width: var(--e-32); margin-right: var(--e-8); color: var(--cok-text-3); font-variant-numeric: tabular-nums; } /* ── LA FICHE D'UN LIEN — ce qui SOUTIENT le lien, point par point ── */ /* ⚠️ Une réserve n'est pas une faute : elle se dit en gris, pas en rouge. Peindre en rouge « son nom porte le compte » ferait croire à une anomalie alors que c'est le cas le plus courant du parc. */ /* ══ LES COMPTES D'UN LIEN ═══════════════════════════════════════════════════ Amadou (15/08) : « le compte ou les comptes concernés, même avant validation ». ⚠️ Mesuré : 25 fiches sur 58 portent d'anciens comptes, et plusieurs n'ont QUE ça. Le serveur les sautait (`if not uid: continue`) : leur compte a vécu, et personne ne pouvait plus le retrouver ici. On n'attend pas qu'un lien soit confirmé pour dire de quels comptes il parle. */ /* Une vendeuse libre n'est pas en faute : elle est disponible. Gris, jamais rouge. */ @media (max-width:1000px){ } /* ── TON ESPACE : une ligne d'état, plus un menu ────────────────────────────── ⚠️ Elle prend la place du sélecteur retiré le 13/08 et calque `.api-status`, sa voisine immédiate : même retrait, même gap, même discrétion. Elle ne se clique pas — c'est voulu. Un espace privé qu'on change en frôlant le bas de la barre n'est pas un espace privé ; le choix est dans Paramètres › Sécurité. ⚠️ On NE touche PAS à `.identite-btn` / `.identite-menu` / `.identite-opt` : le sélecteur de compte de l'écran Commandes les réutilise, et les retirer le casserait. */ .identite-ligne { display: flex; align-items: center; gap: var(--e-8); padding: var(--e-6) var(--e-10); color: var(--text-3); font-size: var(--t-mini); overflow: hidden; min-width: 0; } .identite-ligne svg { flex: 0 0 auto; } .identite-ligne span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .identite-ligne b { color: var(--text-2); font-weight: var(--fw-fort); } .sidebar.collapsed .identite-ligne span { display: none; } /* ══ LE JOURNAL ══════════════════════════════════════════════════════════════ ⚠️⚠️ RIEN N'EST INVENTÉ ICI, ET LA PREMIÈRE VERSION L'AVAIT OUBLIÉ. La cloche est un `nav-item` avec `.nav-ic` + `.nav-badge` — les classes que Vendeuses utilise déjà. La modale est `modal-card--settings`, la carte des Paramètres, telle quelle : Amadou (13/08) « le journal doit prendre la même place que la partie paramètres ». Ma première carte, à 470 px, « ressemblait » aux Paramètres ; elle faisait la moitié. Ne restent ici que les trois choses qui n'existaient nulle part : la bande de filtres, la carte d'un fait, et la ligne d'un fait mineur. */ /* Le corps calque `.pa-body` — même hauteur, même respiration, même défilement. */ .jr-corps { padding: var(--e-20) var(--e-22); overflow-y: auto; height: 540px; max-height: 66vh; } /* La bande de filtres calque `.pa-tabs` : elle tient la place des onglets Paramètres. */ .jr-filtres { display: flex; gap: var(--e-6); flex-wrap: wrap; padding: 0 var(--e-22) var(--e-14); flex-shrink: 0; border-bottom: 1px solid var(--border); } .jr-f { font-size: var(--t-meta); padding: var(--e-4) var(--e-12); border-radius: var(--r-pilule); border: 1px solid var(--border-mid); background: transparent; color: var(--text-2); cursor: pointer; font-family: inherit; transition: color var(--t-moyen), border-color var(--t-moyen); } .jr-f:hover { color: var(--text); border-color: var(--border-strong); } .jr-f.on { background: var(--violet-tint-strong); border-color: transparent; color: var(--violet-light); } .jr-groupe { font-size: var(--t-micro); letter-spacing: var(--ls-ample); color: var(--text-3); padding: var(--e-14) var(--e-2) var(--e-8); text-transform: uppercase; font-weight: var(--fw-gras); } .jr-groupe:first-child { padding-top: 0; } .jr-main { margin-bottom: var(--e-10); padding: var(--e-12) var(--e-14); border-radius: var(--r-lg); background: var(--bg-card-solid); border: 1px solid var(--border-mid); display: flex; gap: var(--e-12); align-items: flex-start; } .jr-main.g-ban { border-color: rgba(236,160,160,0.35); } .jr-main.g-flotte { border-color: rgba(229,194,138,0.30); } .jr-main .jr-ic { flex-shrink: 0; margin-top: var(--e-1); color: var(--text-2); } .jr-main.g-ban .jr-ic { color: var(--red); } .jr-main.g-flotte .jr-ic { color: var(--amber); } .jr-t { font-size: var(--t-base); color: var(--text); margin-bottom: var(--e-6); } .jr-d { font-size: var(--t-small); color: var(--text-2); line-height: var(--lh-normal); white-space: pre-line; } .jr-quand { font-size: var(--t-meta); color: var(--text-3); white-space: nowrap; flex-shrink: 0; } .jr-actions { display: flex; gap: var(--e-8); margin-top: var(--e-12); flex-wrap: wrap; } .jr-a { font-size: var(--t-small); padding: var(--e-6) var(--e-12); border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--border-mid); background: transparent; color: var(--text-2); font-family: inherit; transition: color var(--t-moyen), border-color var(--t-moyen); } .jr-a:hover { color: var(--text); border-color: var(--border-strong); } .jr-a.fort { background: var(--violet-tint-strong); border-color: transparent; color: var(--violet-light); } /* Un fait d'information : UNE ligne. Il ne mérite pas une carte. */ .jr-info { display: flex; gap: var(--e-12); align-items: center; padding: var(--e-8) var(--e-2); position: relative; } .jr-info .jr-ic { color: var(--text-3); flex-shrink: 0; } .jr-info.ok .jr-ic { color: var(--green); } .jr-info .jr-t { font-size: var(--t-small); color: var(--text-2); margin: 0; flex: 1; min-width: 0; } /* Une alerte LEVÉE : ce qui l'a fait taire en titre, ce qui avait crié en dessous. Le détail passe d'un cran en dessous du titre, sinon les deux se valent et on ne sait plus lequel est la nouvelle. */ .jr-leve { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); } .jr-leve .jr-d { font-size: var(--t-meta); color: var(--text-3); } /* Non lu : un point, pas un fond coloré — il signale, il ne hurle pas. */ .jr-neuf { position: relative; } .jr-neuf::before { content: ''; position: absolute; left: -10px; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); } .jr-info.jr-neuf::before { top: 50%; transform: translateY(-50%); } .jr-vide { font-size: var(--t-small); color: var(--text-3); padding: var(--e-40) var(--e-2); text-align: center; } /* ══ LES PARCS ════════════════════════════════════════════════════════════════ Amadou (14/08) : « il est vraiment très moche […] prends en compte qu'il y aura plusieurs parcs, plus je scale plus j'aurai de VDS ». D'où la forme : UN PARC = UNE CARTE. Avec un seul VDS c'est une carte, avec cinq c'est cinq cartes dans la même grille — la mise en page ne change pas, seul leur nombre change. L'ancienne liste plate mélangeait tout : à deux machines, on n'aurait plus su à qui appartenait quelle ligne. ⚠️ Formes EMPRUNTÉES, pas inventées : la jauge et sa légende viennent de l'écran Annonces (.an-jauge / .an-leg), la double densité — une carte quand il faut agir, une ligne quand on informe — vient du Journal. */ /* Amadou (14/08) : « espace plus entre la partie Les parcs et les cartes d'en dessous ». L'espacement vit ICI et nulle part ailleurs : le bandeau d'alerte portait une marge en dur, si bien que l'écart changeait selon qu'il y avait une alerte ou non. */ .pc-grille { display: grid; gap: var(--e-14); margin-top: var(--e-32); grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); } .pc-carte { background: var(--surface-2); border: var(--e-1) solid var(--border); border-radius: var(--r-carte); padding: var(--e-14) var(--e-16) var(--e-12); display: flex; flex-direction: column; gap: var(--e-12); } .pc-carte.muet { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); } .pc-tete { display: flex; align-items: flex-start; gap: var(--e-10); } .pc-ic { color: var(--text-3); flex-shrink: 0; margin-top: var(--e-2); } .pc-nom { font-size: var(--t-small); color: var(--text); font-weight: var(--fw-fort); line-height: var(--lh-serre); } /* Deux parcs peuvent partager une machine (deux sessions Windows sur un serveur) : le nom de session les départage, en retrait — il précise, il ne titre pas. */ .pc-sess { font-size: var(--t-mini); font-weight: var(--fw-normal); color: var(--text-3); margin-left: var(--e-6); } .pc-adr { font-size: var(--t-mini); color: var(--text-3); margin-top: var(--e-2); font-variant-numeric: tabular-nums; } /* Le verdict : un chiffre et un mot, jamais une phrase. Il se lit à un mètre. */ .pc-verdict { margin-left: auto; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-4); } .pc-chiffre { font-size: var(--t-lead); font-weight: var(--fw-fort); color: var(--text); line-height: var(--lh-un); font-variant-numeric: tabular-nums; } .pc-chiffre.ok { color: var(--green); } .pc-chiffre.tiede { color: var(--amber); } .pc-chiffre.mort { color: var(--red); } .pc-mot { font-size: var(--t-micro); color: var(--text-3); letter-spacing: var(--ls-caps); text-transform: uppercase; } /* La jauge porte les TROIS COUCHES que le projet nomme déjà : le profil existe, sa fenêtre est ouverte, son compte parle. Une barre, trois segments, et la légende chiffre chacun — un chiffre sans sa couleur ne se relie à rien. */ .pc-jauge { display: flex; height: var(--e-6); border-radius: var(--r-pilule); overflow: hidden; background: var(--surface); } .pc-jauge i { display: block; } .pc-leg { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-12); font-size: var(--t-mini); color: var(--text-3); } .pc-leg span { display: inline-flex; align-items: center; gap: var(--e-6); } .pc-leg i { width: var(--e-6); height: var(--e-6); border-radius: 50%; flex-shrink: 0; } .pc-leg b { color: var(--text-2); font-weight: var(--fw-moyen); font-variant-numeric: tabular-nums; } .pc-filet { height: var(--e-1); background: var(--border); } /* Le pied se colle en bas : sans ça, deux cartes côte à côte n'alignent pas leurs pieds dès qu'elles n'ont pas le même nombre de comptes. */ .pc-filet.bas { margin-top: auto; } .pc-comptes { display: flex; flex-direction: column; gap: var(--e-2); } .pc-l { display: flex; align-items: center; gap: var(--e-8); padding: var(--e-6) var(--e-8); border-radius: var(--r-sm); cursor: pointer; } .pc-l:hover { background: var(--surface); } .pc-pion { width: var(--e-8); height: var(--e-8); border-radius: 50%; flex-shrink: 0; background: var(--text-3); } .pc-pion.ok { background: var(--green); } .pc-pion.tiede { background: var(--amber); } .pc-cn { font-size: var(--t-base); color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ⚠️ On teinte le CHIFFRE, pas la ligne. Une ligne colorée au milieu de dix attire l'œil plus fort que l'alerte elle-même — et c'est l'alerte qu'on veut lire. */ .pc-cq { font-size: var(--t-mini); color: var(--text-3); flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; } .pc-cq.tiede { color: var(--amber); } /* Un parc à trente comptes ne doit pas faire une carte à rallonge : on montre les premiers — muets en tête — et on dit combien restent. */ .pc-plus { font-size: var(--t-mini); color: var(--text-3); padding: var(--e-6) var(--e-8); border-radius: var(--r-sm); cursor: pointer; } .pc-plus:hover { background: var(--surface); color: var(--text-2); } .pc-vide { font-size: var(--t-mini); color: var(--text-3); padding: var(--e-8); } .pc-pied { margin-top: auto; display: flex; align-items: center; gap: var(--e-8); font-size: var(--t-mini); color: var(--text-3); } .pc-pied b { color: var(--text-2); font-weight: var(--fw-moyen); font-variant-numeric: tabular-nums; } .pc-pied .sep { margin-left: auto; } .pc-alerte { display: flex; gap: var(--e-8); align-items: flex-start; background: color-mix(in srgb, var(--red) 10%, transparent); border: var(--e-1) solid color-mix(in srgb, var(--red) 35%, transparent); border-radius: var(--r-sm); padding: var(--e-8) var(--e-10); font-size: var(--t-mini); color: var(--text-2); line-height: var(--lh-serre); } .pc-alerte svg { color: var(--red); flex-shrink: 0; margin-top: var(--e-1); } /* Une carte qui s'ouvre doit AVOIR L'AIR de s'ouvrir. Le filet se réveille au survol — pas de déplacement : à quatorze pixels d'écart, deux cartes qui bougent se touchent. */ .pc-carte[data-parc] { cursor: pointer; transition: border-color var(--t-moyen) var(--c-pose); } .pc-carte[data-parc]:hover { border-color: var(--violet-soft); } /* ── L'ESPACE D'UN PARC (la modale) ───────────────────────────────────────── La carte montre, le panneau explique : ici vivent les détails qui n'ont pas leur place dans six lignes — port de pilotage, sous-profil, par quel signal le compte a parlé. Formes reprises du Journal, dont ce panneau partage la carte. */ .pcd-bloc { display: flex; flex-direction: column; gap: var(--e-2); } .pcd-l { display: flex; align-items: baseline; gap: var(--e-12); padding: var(--e-4) 0; } .pcd-e { font-size: var(--t-mini); color: var(--text-3); flex: 0 0 42%; } .pcd-v { font-size: var(--t-base); color: var(--text-2); flex: 1; min-width: 0; word-break: break-word; } .pcd-c { border-top: var(--e-1) solid var(--border); padding-top: var(--e-14); margin-top: var(--e-14); display: flex; flex-direction: column; gap: var(--e-8); } .pcd-t { display: flex; align-items: center; gap: var(--e-8); } .pcd-n { font-size: var(--t-small); color: var(--text); font-weight: var(--fw-fort); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcd-etat { font-size: var(--t-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); flex-shrink: 0; } .pcd-etat.parle { color: var(--green); } .pcd-etat.muet { color: var(--amber); } .pcd-actions { display: flex; flex-wrap: wrap; gap: var(--e-8); } /* ══ LES THÈMES ═══════════════════════════════════════════════════════════════ ⚠️⚠️ UN THÈME N'ÉCRIT QUE DES VARIABLES DU SOCLE. Jamais un sélecteur, jamais une règle de mise en page. Si un thème a besoin de déplacer quelque chose pour être joli, c'est le SOCLE qui est incomplet — on répare le socle, pas le thème. C'est ce qui permet d'en tenir onze sans que le site devienne ingérable, et c'est vérifié automatiquement par outils/verifier-themes.py. Nuit violette n'a pas de bloc : c'est le socle lui-même, la référence. */ [data-theme="abysse"] { --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2312586A%22%2F%3E%3Cstop%20offset%3D%22.38%22%20stop-color%3D%22%230A3542%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2303161E%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22r%22%20cx%3D%22.5%22%20cy%3D%220%22%20r%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23A8ECF4%22%20stop-opacity%3D%22.22%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23A8ECF4%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.12%22%3E%3Cg%20fill%3D%22url%28%23r%29%22%3E%3Cpath%20d%3D%22M784-40q-56%20240-176%20368t-208%20248l160%2032q104-160%20200-312t104-336z%22%2F%3E%3Cpath%20d%3D%22M848-40q40%20224%20152%20352t184%20232l-144%2032q-96-152-184-296t-88-320z%22%2F%3E%3Cpath%20d%3D%22M600-40q-88%20208-224%20328t-232%20216l120%2040q128-144%20240-280t176-304z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%20690q208-64%20416-16t416%200%20384-40%20384%2032v234H0z%22%20fill%3D%22%230C3B47%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M0%20770q256-48%20504-8t496-16%20600%2024v130H0z%22%20fill%3D%22%23155866%22%20opacity%3D%22.7%22%2F%3E%3Cg%20stroke%3D%22%239FEAF2%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20opacity%3D%22.26%22%3E%3Cpath%20d%3D%22M72%20812q88-48%20176-8t184-16%20160%2032%20176-24%20184%2024%20160-32%20176%2024%20184-16%22%2F%3E%3Cpath%20d%3D%22M32%20866q104-40%20200%200t176-24%20168%2032%20184-24%20176%2024%20168-32%20176%2024%22%2F%3E%3Cpath%20d%3D%22M176%20796v88M448%20780v104M728%20804v88M1008%20792v104M1280%20812v88%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%232A7C86%22%20opacity%3D%22.45%22%3E%3Cpath%20d%3D%22M248%20800c-16-64%2016-104%208-144%2028%2032%2040%2080%2040%20120%2020-40%2048-60%2072-88-8%2052-28%2092-52%20120z%22%2F%3E%3Cpath%20d%3D%22M1312%20824c-20-72%2012-108%204-148%2032%2032%2044%2084%2044%20124%2024-44%2052-64%2076-96-8%2056-32%20100-60%20128z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(162,198,205,.42), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(207,234,238,.38), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(162,198,205,.34), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(207,234,238,.36), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(162,198,205,.30), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(143,211,220,.32), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(162,198,205,.28), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(207,234,238,.26), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(162,198,205,.30), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(99,183,195,.15) 0%, rgba(3,9,12,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(120,220,230,.16), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(99,183,195,.12), transparent 70%),repeating-linear-gradient(96deg, rgba(160,225,235,.05) 0 3px, transparent 3px 26px); --th-fond-rgb: 3,9,12; --th-panneau-rgb: 14,38,48; --th-sur-plein: #111111; --th-ambiance: 0.55; /* Abysse */ --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #03090C; --th-panneau: #0E2630; --th-carte: #1A3C46; --th-texte: #E4F1F2; --th-texte-2: #A8C4CA; --th-texte-3: #9BB2B8; --th-trait: 103,141,153; --th-accent: #63B7C3; --th-accent-clair: #BFE4E9; --th-accent-doux: #A2C6CD; --th-accent-fort: #7FCAD5; --th-accent-rgb: 99,183,195; --th-sur-accent: #03090C; --th-second: #67C188; --th-second-clair: #A8DEBC; --th-second-rgb: 103,193,136; --th-succes: #67C188; --th-alerte: #E3BD63; --th-danger: #F18F96; --th-danger-rgb: 240,138,145; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; } [data-theme="basalte"] { --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2314100D%22%2F%3E%3Cstop%20offset%3D%22.58%22%20stop-color%3D%22%2320160F%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2333200F%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22h%22%20cx%3D%22.5%22%20cy%3D%221%22%20r%3D%22.7%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFA23C%22%20stop-opacity%3D%22.24%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FFA23C%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.13%22%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cpath%20d%3D%22M0%20704l232-280%2088%2096%2064-64%20184%20248z%22%20fill%3D%22%230B0906%22%20opacity%3D%22.9%22%2F%3E%3Cpath%20d%3D%22M472%20728l344-416%20120%20136%2080-80%20240%20360z%22%20fill%3D%22%23100C08%22%20opacity%3D%22.92%22%2F%3E%3Cpath%20d%3D%22M1200%20736l208-248%20192%20248z%22%20fill%3D%22%230B0906%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M784%20320l64-8%2032%2048-56%2016z%22%20fill%3D%22%23FF8A3C%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M816%20368q24%2072-8%20136t8%20160%22%20stroke%3D%22%23FF7A2E%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M224%20432l48-8%2024%2036-40%2012z%22%20fill%3D%22%23FF8A3C%22%20opacity%3D%22.36%22%2F%3E%3Cpath%20d%3D%22M0%20744q240-32%20472%200t560-16%20568%2024v148H0z%22%20fill%3D%22%233A2412%22%20opacity%3D%22.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 30% 74%, rgba(255,201,138,.34), transparent 60%),radial-gradient(2px 2px at 58% 60%, rgba(255,176,92,.30), transparent 60%),radial-gradient(1.5px 1.5px at 76% 78%, rgba(255,201,138,.28), transparent 60%),radial-gradient(2px 2px at 16% 58%, rgba(255,158,74,.26), transparent 60%),radial-gradient(1.5px 1.5px at 45% 40%, rgba(255,201,138,.22), transparent 60%),radial-gradient(2px 2px at 88% 46%, rgba(255,176,92,.20), transparent 60%); --th-decor-pres: radial-gradient(120% 44% at 50% 108%, rgba(238,155,63,.20), transparent 62%),radial-gradient(50% 22% at 18% 104%, rgba(242,88,60,.15), transparent 66%),linear-gradient(72deg, transparent 26%, rgba(238,155,63,.07) 27%, transparent 28%),linear-gradient(-64deg, transparent 54%, rgba(242,120,60,.06) 55%, transparent 56%),linear-gradient(84deg, transparent 72%, rgba(238,155,63,.05) 73%, transparent 74%); --th-fond-rgb: 20,16,13; --th-panneau-rgb: 32,25,20; --th-sur-plein: #111111; --th-ambiance: 0.38; /* Basalte */ --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #14100D; --th-panneau: #201914; --th-carte: #2A211B; --th-texte: #EDE4DB; --th-texte-2: #D3C3B5; --th-texte-3: #B0A093; --th-trait: 87,70,54; --th-accent: #EE9B3F; --th-accent-clair: #F8D3A8; --th-accent-doux: #F5C68C; --th-accent-fort: #F2AC5C; --th-accent-rgb: 238,155,63; --th-sur-accent: #14100D; --th-second: #8FD07E; --th-second-clair: #C2E7B8; --th-second-rgb: 143,208,126; --th-succes: #8FD07E; --th-alerte: #E4D45F; --th-danger: #F36376; --th-danger-rgb: 242,88,108; --th-rayon-pilule: 4px; --th-rayon-micro: 2px; --th-rayon-xs: 3px; --th-rayon-sm: 3px; --th-rayon-md: 3px; --th-rayon-lg: 4px; --th-rayon-carte: 4px; --th-rayon-panneau: 6px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; } [data-theme="sylve"] { --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231D4029%22%2F%3E%3Cstop%20offset%3D%22.46%22%20stop-color%3D%22%230F2417%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23050D08%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23E4F5C0%22%20stop-opacity%3D%22.20%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23E4F5C0%22%20stop-opacity%3D%22.06%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E4F5C0%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.17%22%3E%3Cg%20fill%3D%22url%28%23r%29%22%3E%3Cpath%20d%3D%22M280%200h36l-96%20600h-36z%22%2F%3E%3Cpath%20d%3D%22M368%200h20l-88%20488h-20z%22%2F%3E%3Cpath%20d%3D%22M672%200h44l-112%20648h-44z%22%2F%3E%3Cpath%20d%3D%22M776%200h16l-96%20472h-16z%22%2F%3E%3Cpath%20d%3D%22M1128%200h32l-104%20584h-32z%22%2F%3E%3Cpath%20d%3D%22M1208%200h20l-88%20432h-20z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230A1A0F%22%20opacity%3D%22.85%22%3E%3Cpath%20d%3D%22M208%20144h1200v28H208z%22%20transform%3D%22rotate%28-4%20800%20158%29%22%2F%3E%3Cpath%20d%3D%22M160%20368h1320v20H160z%22%20transform%3D%22rotate%283%20800%20378%29%22%2F%3E%3Cpath%20d%3D%22M256%20560h1200v16H256z%22%20transform%3D%22rotate%28-2%20800%20568%29%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%2309170D%22%20opacity%3D%22.75%22%3E%3Cpath%20d%3D%22M88%20900V408l-40-44%2040%2012v-44l44%2052-28-80%2044%2072V320l40%2088%2028-60v80l40-44-36%2072%2044-20-48%2052v412z%22%2F%3E%3Cpath%20d%3D%22M512%20900V464l-36-40%2036%2012v-36l40%2048-24-72%2040%2064V384l36%2080%2024-56v72l36-40-32%2064%2040-16-44%2048v304z%22%2F%3E%3Cpath%20d%3D%22M976%20900V432l-40-44%2040%2012v-44l44%2052-28-80%2044%2072V336l40%2088%2028-60v80l40-44-36%2072%2044-20-48%2052v384z%22%2F%3E%3Cpath%20d%3D%22M1416%20900V496l-32-36%2032%208v-32l36%2044-20-64%2036%2056v-64l32%2072%2024-48v64l32-36-28%2056%2036-16-40%2044v352z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23EAF7CE%22%20opacity%3D%22.5%22%3E%3Ccircle%20cx%3D%22304%22%20cy%3D%22264%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22392%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%22696%22%20cy%3D%22216%22%20r%3D%224.5%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%22416%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%221152%22%20cy%3D%22288%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%221176%22%20cy%3D%22472%22%20r%3D%223.5%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%20672q280-32%20528%2016t536-8%20536%2024v196H0z%22%20fill%3D%22%23071108%22%20opacity%3D%22.55%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(2px 2px at 22% 48%, rgba(216,233,188,.34), transparent 60%),radial-gradient(1.5px 1.5px at 66% 36%, rgba(198,222,164,.30), transparent 60%),radial-gradient(2px 2px at 44% 70%, rgba(216,233,188,.28), transparent 60%),radial-gradient(1.5px 1.5px at 84% 62%, rgba(198,222,164,.26), transparent 60%),radial-gradient(2px 2px at 14% 24%, rgba(216,233,188,.24), transparent 60%),radial-gradient(1.5px 1.5px at 55% 88%, rgba(198,222,164,.22), transparent 60%); --th-decor-pres: linear-gradient(104deg, transparent 12%, rgba(190,225,145,.09) 15%, transparent 19%),linear-gradient(101deg, transparent 34%, rgba(190,225,145,.07) 36%, transparent 41%),linear-gradient(106deg, transparent 58%, rgba(190,225,145,.08) 61%, transparent 65%),linear-gradient(168deg, rgba(180,215,140,.13) 0%, rgba(10,20,14,0) 46%),linear-gradient(0deg, rgba(10,20,14,.55) 0%, transparent 26%); --th-fond-rgb: 10,20,14; --th-panneau-rgb: 21,33,24; --th-sur-plein: #111111; --th-ambiance: 0.42; /* Sylve */ --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #0A140E; --th-panneau: #152118; --th-carte: #213024; --th-texte: #DDE8E0; --th-texte-2: #AFC2B3; --th-texte-3: #93A796; --th-trait: 55,76,62; --th-accent: #9CBE6C; --th-accent-clair: #CFE2B4; --th-accent-doux: #B4CE8E; --th-accent-fort: #AECB80; --th-accent-rgb: 156,190,108; --th-sur-accent: #0A140E; --th-second: #5AC9BC; --th-second-clair: #A6E2DA; --th-second-rgb: 90,201,188; --th-succes: #5AC9BC; --th-alerte: #E2913A; --th-danger: #EE7B84; --th-danger-rgb: 238,123,132; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 10px; --th-rayon-lg: 12px; --th-rayon-carte: 12px; --th-rayon-panneau: 18px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; } /* ══ LES TROIS CRANS ═══════════════════════════════════════════════════════════ ⚠️ Trois crans, pas un curseur : un curseur continu casse toujours une mise en page quelque part, et on ne peut pas tester l'infini. Ces trois-là se vérifient. Seules les NEUF tailles de texte changent — 1 636 usages passent déjà par elles, donc tout le site suit sans qu'une règle ne bouge. */ [data-densite="compact"] { --t-display: 25px; --t-title: 20px; --t-lead: 17px; --t-body: 14px; --t-small: 13px; --t-base: 12px; --t-meta: 11px; --t-mini: 10px; --t-micro: 9px; } [data-densite="confortable"] { --t-display: 31px; --t-title: 25px; --t-lead: 21px; --t-body: 18px; --t-small: 16px; --t-base: 15px; --t-meta: 14px; --t-mini: 13px; --t-micro: 12px; } /* ⚠️⚠️ LA BARRE DE GAUCHE NE SUIT PAS LE CRAN CONFORTABLE — 15/08. Amadou : « diminue uniquement pour la partie confortable, et uniquement dans la barre d'onglets à gauche, parce que là il y a un ascenseur qui me dérange ». MESURÉ, hauteur du contenu de la barre : 630 px en normal, 648 px en confortable. Ces 18 px sont exactement ce qui fait apparaître l'ascenseur à ce cran-là et pas aux autres. En rendant à la barre ses tailles normales, elle retombe à 630 : le confortable ne lui coûte plus rien. ⚠️ Ce n'est PAS un contournement du cran, c'est une exception assumée : la barre est une LISTE FIXE de onze entrées, sa hauteur est bornée par le nombre d'onglets, pas par le confort de lecture. Tout le reste du site suit le cran, comme prévu. ⚠️ Et la police seule ne suffirait pas si les onglets n'avaient pas déjà une hauteur fixe (36 px) : c'est parce qu'elle est fixe que seuls les intitulés de groupe et les interlignes grandissent — donc que 18 px se récupèrent en touchant au seul texte. */ [data-densite="confortable"] .sidebar { --t-small: 14px; --t-base: 13px; --t-meta: 12px; --t-mini: 11px; --t-micro: 10px; } /* La police du thème s'applique à la racine ; tout en hérite. */ body { font-family: var(--th-police); } h1, h2, h3, .cok-launch-title { font-family: var(--th-police-titre); } .nav-item > span:not(.nav-ic) { text-transform: var(--th-casse-nav); } /* ══ LES COMMANDES SHEIN : la fiche et son détail ════════════════════════════ Amadou (15/08) : « l'interface c'est vraiment moche, il n'y a pas l'image du produit. Quand j'appuie dessus, il doit y avoir un écran qui s'affiche en plus grand avec les détails ». ⚠️ L'image ne vient PAS de SHEIN — les mails stockés n'en contiennent aucune. Elle est retrouvée dans la Bibliothèque par le SKU du coloris, qui est le même des deux côtés. Voir `_sheinSkuIndex` dans app.js. Rien d'inventé ici : la fiche reprend la forme des cartes du site, la fenêtre emprunte celle du parc. */ .shc-liste { display: flex; flex-direction: column; gap: var(--e-8); } .shc-fiche { display: grid; grid-template-columns: 62px 1fr; gap: var(--e-12); padding: var(--e-10); width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font-family: inherit; transition: border-color var(--t-moyen), background var(--t-moyen); } .shc-fiche:hover { border-color: var(--border-strong); background: var(--surface-2); } .shc-vue { width: 62px; aspect-ratio: 3/4; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-3); } .shc-vue img { width: 100%; height: 100%; object-fit: cover; display: block; } .shc-vue svg { width: 22px; height: 22px; } .shc-corps { min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); } /* Deux lignes maximum : un titre SHEIN fait couramment cent caractères, et une fiche qui grandit avec son titre casse le rythme de la liste. */ .shc-nom { font-size: var(--t-base); font-weight: var(--fw-fort); color: var(--text); line-height: var(--lh-serre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .shc-meta { font-size: var(--t-mini); color: var(--text-3); } .shc-bas { display: flex; align-items: center; gap: var(--e-6); margin-top: var(--e-6); flex-wrap: wrap; } .shc-prix { margin-left: auto; font-size: var(--t-mini); color: var(--text-2); } .shc-pil { font-size: var(--t-micro); font-weight: var(--fw-fort); line-height: var(--lh-un); padding: var(--e-4) var(--e-8); border-radius: var(--r-pilule); } /* Les trois états prennent les jetons d'état du thème — donc ils suivent les seize. */ .shc-pil--confirmee { background: var(--moy-bg); color: var(--moy-text); } .shc-pil--expediee { background: var(--cyan-tint); color: var(--cyan); } .shc-pil--livree { background: var(--safe-bg); color: var(--safe-text); } /* ── Le détail ──────────────────────────────────────────────────────────────── ⚠️⚠️ REPRIS le 15/08 — Amadou : « visuellement ce n'est pas beau, c'est trop brouillon ». La cause était une seule ligne : les faits étaient posés dans une grille `repeat(auto-fit, minmax(120px,1fr))`. Une grille auto-fit REPLACE ses cellules selon la largeur disponible — donc rien n'est jamais en face de rien, le numéro de suivi (18 caractères) se coupait en deux et l'adresse sur quatre lignes poussait tout le reste. ⭐ Une liste libellé / valeur à DEUX colonnes fixes s'aligne toujours, quelle que soit la largeur. C'est moins malin et c'est bien mieux. */ /* ⚠️⚠️ LES DEUX BLOCS PARTAGENT LA LARGEUR — 15/08. Empilés, l'article et la livraison faisaient à eux deux ~640 px de haut : la frise passait sous la ligne de flottaison, et il fallait défiler pour voir OÙ EN EST la commande, c'est-à-dire la seule chose qu'on vient chercher en l'ouvrant. Amadou : « côte à côte, que ça m'évite de scroller ». Mesuré après : ~430 px, tout tient. */ /* ⚠️ `stretch` et pas `start` : sans ça, chaque colonne s'arrête à SON contenu, et le filet entre les deux ne descendrait que jusqu'au bas de la plus courte — un trait qui s'interrompt en l'air. Étirées, les deux font la hauteur de la plus haute et le filet va d'un bord à l'autre. */ .shc-d-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-20); align-items: stretch; } /* Le filet de séparation. Il n'est pas décoratif : deux blocs côte à côte sans rien entre eux se lisent comme un seul tableau à quatre colonnes, et l'œil cherche des correspondances de ligne à ligne qui n'existent pas. */ .shc-d-duo > .shc-d-bloc { border-left: 1px solid var(--border); padding-left: var(--e-20); } /* ⚠️ En dessous de 620 px, deux colonnes ne libèrent plus rien — elles serrent. On les remet l'une sous l'autre : c'est la largeur qui décide, pas l'appareil. Et le filet passe alors de la GAUCHE au DESSUS : il sépare toujours les deux blocs, mais dans l'autre sens. Oublier ce basculement laisserait un trait vertical orphelin au-dessus d'une liste. */ @media (max-width: 620px) { .shc-d-duo { grid-template-columns: 1fr; gap: var(--e-16); } .shc-d-duo > .shc-d-bloc { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: var(--e-14); } } .shc-d-art { display: grid; grid-template-columns: 60px 1fr; gap: var(--e-12); align-items: start; } .shc-d-vue { width: 60px; aspect-ratio: 3/4; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-3); } .shc-d-vue img { width: 100%; height: 100%; object-fit: cover; display: block; } .shc-d-vue svg { width: 22px; height: 22px; } .shc-d-info { min-width: 0; } .shc-d-nom { font-size: var(--t-small); font-weight: var(--fw-fort); color: var(--text); line-height: var(--lh-serre); } .shc-d-sous { font-size: var(--t-base); color: var(--text-2); margin-top: var(--e-4); } /* ⚠️ Le message sort du cadre photo pour venir SOUS LE NOM : tassé dans 68 px de large, il ne se lisait pas — et c'est la seule chose qui explique l'image absente. */ .shc-d-sansphoto { font-size: var(--t-mini); color: var(--text-2); margin-top: var(--e-6); line-height: var(--lh-serre); } /* Le prix avait sa case dans la grille des faits, au même poids qu'un SKU. C'est le seul chiffre de cet écran qui coûte de l'argent : il mérite d'être vu. */ .shc-d-prix { font-size: var(--t-lead); font-weight: var(--fw-fort); color: var(--text); white-space: nowrap; margin-top: var(--e-10); } /* ⚠️ « l'étiquette statut en haut est trop collée au num » — et c'est un vrai défaut de lecture : sans écart, « Livrée GSO1RT01200MML1 » se parcourt comme un seul bloc. L'écart les sépare en DEUX informations, qui n'ont ni le même rôle ni le même poids. */ .shc-d-tete { display: flex; align-items: center; } .shc-d-tete .shc-pil { margin-right: var(--e-14); } .shc-d-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-base); font-weight: var(--fw-normal); color: var(--text-2); } /* Plus de marge haute : le bloc n'est plus SOUS l'article, il est À CÔTÉ. */ .shc-d-ligne { display: grid; grid-template-columns: 96px 1fr; gap: var(--e-10); align-items: baseline; padding: var(--e-8) 0; border-top: 1px solid var(--border); } .shc-d-ligne:first-child { border-top: none; } .shc-d-k { font-size: var(--t-mini); color: var(--text-3); } .shc-d-v { font-size: var(--t-base); color: var(--text); min-width: 0; overflow-wrap: anywhere; } /* ⚠️ `flex-wrap` : dans une colonne moitié moins large, le bouton « Copier » n'a plus toujours la place à côté du code. Sans lui il déborderait au lieu de passer dessous. */ .shc-d-v.mono { display: flex; align-items: center; gap: var(--e-8); flex-wrap: wrap; } .shc-d-v.mono .shc-d-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-mini); } .shc-d-adr { line-height: var(--lh-normal); } /* Un code de vingt caractères n'est pas fait pour être lu, mais RECOPIÉ. */ .shc-d-copie { flex: none; font-size: var(--t-micro); font-family: inherit; color: var(--text-3); background: transparent; border: 1px solid var(--border); border-radius: var(--r-micro); padding: var(--e-1) var(--e-6); cursor: pointer; transition: var(--transi); } .shc-d-copie:hover { color: var(--text); border-color: var(--border-strong); } /* ── La frise. Chaque étape porte le SUJET du mail dont elle vient : sans source, une frise ne se vérifie pas — et c'est précisément une frise sans source qui a laissé une commande livrée s'afficher « confirmée » pendant trois jours. */ .shc-d-frise { margin-top: var(--e-20); padding-top: var(--e-16); border-top: 1px solid var(--border); } .shc-d-lab { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3); margin-bottom: var(--e-12); } .shc-d-et { display: grid; grid-template-columns: 13px 1fr; gap: var(--e-12); } .shc-d-pt { display: flex; flex-direction: column; align-items: center; } .shc-d-rond { width: 9px; height: 9px; border-radius: 50%; margin-top: var(--e-4); flex: none; background: var(--safe-text); } .shc-d-trait { width: var(--e-1); flex: 1; min-height: var(--e-14); background: var(--border-strong); } .shc-d-trait.fin { display: none; } .shc-d-txt { padding-bottom: var(--e-14); } /* ⚠️ La DERNIÈRE étape n'a rien en dessous d'elle : sa marge basse ne sépare de rien et coûtait les 5 px qui obligeaient encore à défiler. Mesuré : contenu à 502 px pour 497 px disponibles — il ne manquait que ça. */ .shc-d-et:last-child .shc-d-txt { padding-bottom: 0; } .shc-d-t1 { font-size: var(--t-base); font-weight: var(--fw-fort); color: var(--text); } .shc-d-t2 { font-size: var(--t-mini); color: var(--text-2); margin-top: var(--e-2); } .shc-d-src { font-size: var(--t-micro); color: var(--text-3); margin-top: var(--e-2); } .shc-d-vide { font-size: var(--t-base); color: var(--text-3); } /* ══ L'ONGLET APPARENCE ══════════════════════════════════════════════════════ Rien d'inventé : la grille reprend `.pa-conn-grid`, les crans reprennent la forme d'un groupe de boutons segmentés, l'aperçu est une carte comme les autres. */ /* ⚠️⚠️ SEIZE THÈMES NE SE LISENT PAS COMME HUIT — 15/08. En passant de 8 à 16, une liste de NOMS devient un mur : « Abysse », « Basalte », « Sylve »… on clique au hasard. Amadou : « grille de vignettes, mais diminue la taille des cards pour que toutes les vignettes rentrent ». Donc : le décor remplace les trois bandes de couleur (on voit ce qu'on choisit AVANT de cliquer), la carte rétrécit de 126 à 94 px, et la seconde ligne de texte part dans l'infobulle. Seize tiennent alors en quatre rangées dans la fenêtre. */ .ap-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: var(--e-6); } .ap-vignette { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--e-4); background: transparent; cursor: pointer; text-align: center; font-family: inherit; transition: border-color var(--t-moyen); } .ap-vignette:hover { border-color: var(--border-strong); } .ap-vignette.on { border-color: var(--violet); background: var(--violet-tint); } /* Le décor lui-même, au format de l'écran. `--th-fond-scene` se résout ici parce que le bouton porte `data-theme` (voir `_apRendre` dans app.js) : aucune image n'est dupliquée, chaque vignette va chercher la sienne dans la feuille. */ .ap-vue { display: block; aspect-ratio: 16/10; border-radius: var(--r-micro); overflow: hidden; margin-bottom: var(--e-4); background: var(--th-fond) var(--th-fond-scene); box-shadow: 0 0 0 1px rgba(var(--th-voile),0.12) inset; } /* La vignette du socle : elle n'a pas de `data-theme` à porter, donc elle lit les deux valeurs qu'aucun thème ne réécrit. Sans ça, elle affiche le décor du thème actif — voir la note dans `:root`. */ .ap-vignette[data-th=""] .ap-vue { background: var(--socle-fond) var(--socle-scene); } /* ── VOIR UN THÈME EN GRAND ───────────────────────────────────────────────── Une vignette de 90 px dit la couleur d'un thème, pas son dessin — et ces décors sont des paysages. Il s'ouvre au CLIC DROIT, comme tous les menus du site. ⚠️ REFAIT le 24/08 : « lorsque j'agrandis c'est vraiment moche ». La première version posait un bandeau pleine largeur sous l'image — il coupait le décor en deux et alignait cinq boutons sans hiérarchie. Ici le décor prend TOUT, et ce qui le commande flotte par-dessus : les flèches sur les côtés, une seule carte en bas, la fermeture en haut. */ .ap-grand { position: fixed; inset: 0; z-index: 300; background: var(--th-fond); animation: apGrandVient var(--t-moyen) var(--c-pose); } @keyframes apGrandVient { from { opacity: 0; } to { opacity: 1; } } .ap-grand.hidden { display: none; } /* ⚠️ `cover`, PAS `contain`. `contain` laissait deux bandes vides au-dessus et en dessous — c'est ce qui faisait « vide » à l'agrandissement. Ces décors sont dessinés en 16/9 pour être des FONDS : les voir remplir l'écran, c'est justement les voir tels qu'ils seront. */ .ap-grand-scene { position: absolute; inset: 0; background: var(--th-fond) var(--th-fond-scene); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ⚠️⚠️ LE SOCLE N'A PAS DE `data-theme` À PORTER — il EST l'absence de thème. Posé sur la fenêtre, `.socle` remet donc les valeurs d'origine à la place de celles du thème actif : tout ce qui est dedans (décor, carte, bouton, flèches) les hérite d'un coup. On ne redéclare que ce que l'aperçu emploie ; les autres jetons n'y servent à rien. */ .ap-grand.socle { --th-fond: var(--socle-fond); --th-fond-scene: var(--socle-scene); --th-texte: var(--socle-texte); --th-accent: var(--socle-accent); --th-sur-accent: var(--socle-sur-accent); --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-panneau-rgb: 20,18,31; --th-texte-2: #B3B8C9; --th-texte-3: #888CA1; --th-trait: 148,150,172; } /* La carte du bas : posée SUR le décor, détachée du bord, en verre dépoli. ⚠️⚠️ LARGEUR FIXE. Amadou (24/08) : « je veux que ce soit la même taille partout ». Elle se dimensionnait sur son contenu : « un champ au crépuscule » la rendait plus large que « un champ à midi », donc elle changeait de taille à chaque thème — un sautillement à chaque flèche, sur l'élément qu'on regarde. ⚠️ Centrée par `margin: auto` et non par `transform`, pour la même raison que les flèches : rien qui puisse être écrasé par un état de bouton. */ .ap-grand-carte { position: absolute; left: 0; right: 0; bottom: var(--e-32); margin: 0 auto; width: 320px; max-width: calc(100vw - var(--e-32) * 2); display: flex; flex-direction: column; align-items: stretch; gap: var(--e-4); padding: var(--e-18) var(--e-20); text-align: center; border-radius: var(--r-carte); /* ⚠️⚠️⚠️ LA SURFACE DU THÈME, PAS UN NOIR FIXE. Amadou (24/08) : « certains blocs sont dans l'obscurité, on voit mal — et ça ne doit pas se reproduire pour les prochains thèmes ». J'avais écrit `rgba(--th-ombre, .72)` : un noir semi-transparent QUOI QU'IL ARRIVE. Sur les six thèmes clairs (Colza, Dune, Cyclades, Hanami, Nimbe, Médina) le texte, lui, suit le thème et devient SOMBRE — texte sombre sur fond sombre. `--th-panneau-rgb` est la surface du thème : claire sur un thème clair, sombre sur un thème sombre. Un thème créé demain sera juste sans qu'on y touche, parce que la règle ne décide plus de la couleur — elle la demande au thème. */ background: rgba(var(--th-panneau-rgb), .86); border: 1px solid rgba(var(--th-trait), .22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 var(--e-16) var(--e-40) rgba(var(--th-ombre), .28); } /* Le rang d'abord : il dit OÙ l'on est avant de dire ce qu'on regarde. */ .ap-grand-rang { font-size: var(--t-micro); color: var(--th-texte-3); font-variant-numeric: tabular-nums; margin-bottom: var(--e-2); } .ap-grand-titres { min-width: 0; } /* ⚠️ Le nom peut être long (« Nuit violette ») : il tient sur une ligne et se coupe proprement plutôt que de faire grandir une carte dont toute la valeur est d'être fixe. */ .ap-grand-nom { font-size: var(--t-titre); font-weight: var(--fw-fort); color: var(--th-texte); line-height: var(--lh-serre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-grand-pol { font-size: var(--t-meta); color: var(--th-texte-2); } .ap-grand-poser { margin-top: var(--e-12); font: inherit; font-size: var(--t-meta); font-weight: var(--fw-moyen); background: var(--th-accent); color: var(--sur-accent); border: 0; border-radius: var(--r-pilule); padding: var(--e-10) var(--e-16); cursor: pointer; white-space: nowrap; } /* ⚠️ « Déjà choisi » ne doit pas paraître cliquable : sinon on appuie, rien ne se passe, et on croit le bouton cassé. */ .ap-grand-poser:disabled { background: rgba(var(--th-voile), .1); color: rgba(var(--th-voile), .45); cursor: default; } /* Les flèches vivent sur les CÔTÉS, là où va la main — pas alignées dans une barre avec tout le reste. Elles s'effacent tant qu'on ne les approche pas. ⚠️⚠️⚠️ ELLES NE SE CENTRENT PLUS AVEC `transform`. Amadou (24/08) : « quand j'appuie dessus le bouton va vers le bas, et celui de droite, une chance sur deux, ça quitte ». UN SEUL DÉFAUT expliquait les deux : le site applique `transform: scale(…)` à tout bouton pressé. Ce transform REMPLACE le `translateY(-50%)` qui centrait la flèche — elle plongeait donc d'une demi-hauteur au moment du clic. Et comme elle se dérobait sous le curseur, le relâchement tombait à côté : le clic était attribué au fond, qui ferme. « Une chance sur deux » selon qu'on avait bougé ou non. `top/bottom: 0` + `margin: auto 0` centre sans transform : rien à écraser. */ .ap-grand-cote { position: absolute; top: 0; bottom: 0; margin: auto 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-pilule); /* Même raison que la carte : la surface vient du THÈME. Un rond noir sur un décor de plein midi, c'est une tache ; un rond blanc sur une nuit, c'est un phare. */ background: rgba(var(--th-panneau-rgb), .78); border: 1px solid rgba(var(--th-trait), .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--th-texte); cursor: pointer; opacity: .35; transition: opacity var(--t-moyen) var(--c-pose), background var(--t-bref) var(--c-pose); } .ap-grand:hover .ap-grand-cote { opacity: .8; } .ap-grand-cote:hover { opacity: 1; background: rgba(var(--th-panneau-rgb), .95); } .ap-grand-cote.gauche { left: var(--e-24); } .ap-grand-cote.droite { right: var(--e-24); } .ap-grand-x { position: absolute; top: var(--e-20); right: var(--e-24); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-pilule); background: rgba(var(--th-panneau-rgb), .78); border: 1px solid rgba(var(--th-trait), .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--th-texte); cursor: pointer; opacity: .55; transition: opacity var(--t-bref) var(--c-pose); } .ap-grand-x:hover { opacity: 1; } @media (max-width: 700px) { .ap-grand-carte { bottom: var(--e-20); } .ap-grand-cote { width: 38px; height: 38px; } } .ap-nom { font-size: var(--t-micro); color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-crans { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .ap-cran { border: 0; background: transparent; color: var(--text-2); font-family: inherit; font-size: var(--t-meta); padding: var(--e-6) var(--e-16); cursor: pointer; border-right: 1px solid var(--border); transition: color var(--t-moyen); } .ap-cran:last-child { border-right: 0; } .ap-cran:hover { color: var(--text); } .ap-cran.on { background: var(--violet-tint-strong); color: var(--violet-light); } .ap-apercu { margin-top: var(--e-10); background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--e-10) var(--e-12); } .ap-apercu-t { font-size: var(--t-base); color: var(--text); margin-bottom: var(--e-2); } .ap-apercu-d { font-size: var(--t-small); color: var(--text-2); line-height: var(--lh-normal); } [data-theme="aurore"] { --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230C1626%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23070D18%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2303060C%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.20%22%3E%3Cpath%20d%3D%22M-80%20136q320-104%20640%2016t1040-32v184q-360%2088-760-8T-80%20312z%22%20fill%3D%22%235AE0B4%22%20opacity%3D%22.08%22%2F%3E%3Cpath%20d%3D%22M-80%20208q400-80%20720%2032t960-24v136q-400%2072-800-16T-80%20360z%22%20fill%3D%22%238FA2FF%22%20opacity%3D%22.055%22%2F%3E%3Cg%20stroke%3D%22%23BFD8E6%22%20stroke-width%3D%221.8%22%20opacity%3D%22.17%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M208%20512l120-88%20136%2056%20104-120%20128%2040%22%2F%3E%3Cpath%20d%3D%22M928%20384l112%2088%20144-40%20120%2080%22%2F%3E%3Cpath%20d%3D%22M384%20672l152-56%20120%2080%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23E8F1F5%22%20opacity%3D%22.55%22%3E%3Ccircle%20cx%3D%22208%22%20cy%3D%22512%22%20r%3D%225.2%22%2F%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22424%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22464%22%20cy%3D%22480%22%20r%3D%224.4%22%2F%3E%3Ccircle%20cx%3D%22568%22%20cy%3D%22360%22%20r%3D%224.4%22%2F%3E%3Ccircle%20cx%3D%22696%22%20cy%3D%22400%22%20r%3D%223.6%22%2F%3E%3Ccircle%20cx%3D%22928%22%20cy%3D%22384%22%20r%3D%224.8%22%2F%3E%3Ccircle%20cx%3D%221040%22%20cy%3D%22472%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%221184%22%20cy%3D%22432%22%20r%3D%225.6%22%2F%3E%3Ccircle%20cx%3D%221304%22%20cy%3D%22512%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22384%22%20cy%3D%22672%22%20r%3D%224.4%22%2F%3E%3Ccircle%20cx%3D%22536%22%20cy%3D%22616%22%20r%3D%225.2%22%2F%3E%3Ccircle%20cx%3D%22656%22%20cy%3D%22696%22%20r%3D%223.6%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23A9BECB%22%20opacity%3D%22.34%22%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22280%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22784%22%20cy%3D%22208%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%221408%22%20cy%3D%22256%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%221152%22%20cy%3D%22704%22%20r%3D%222.8%22%2F%3E%3Ccircle%20cx%3D%22264%22%20cy%3D%22768%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%221512%22%20cy%3D%22600%22%20r%3D%222.8%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; /* Aurore */ --th-ambiance: 0.55; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #070C14; --th-panneau: #0D1420; --th-carte: #121B29; --th-fond-rgb: 7,12,20; --th-panneau-rgb: 13,20,32; --th-texte: #E8F1F5; --th-texte-2: #A9BECB; --th-texte-3: #7E93A2; --th-trait: 92,114,134; --th-accent: #5AE0B4; --th-accent-clair: #C8F7E4; --th-accent-doux: #6FE6C0; --th-accent-fort: #7DEDC8; --th-accent-rgb: 90,224,180; --th-sur-accent: #070C14; --th-sur-plein: #111111; --th-second: #8FA2FF; --th-second-clair: #C3CEFF; --th-second-rgb: 143,162,255; --th-succes: #9BE77E; --th-alerte: #F2B85C; --th-danger: #FF8E90; --th-danger-rgb: 255,142,144; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 10px; --th-rayon-lg: 12px; --th-rayon-carte: 12px; --th-rayon-panneau: 16px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-decor-loin: radial-gradient(2.4px 2.4px at 6% 12%, rgba(232,241,245,0.20), transparent 62%), radial-gradient(2.2px 2.2px at 23% 5%, rgba(232,241,245,0.18), transparent 64%), radial-gradient(2.6px 2.6px at 41% 19%, rgba(232,241,245,0.19), transparent 62%), radial-gradient(2.2px 2.2px at 68% 9%, rgba(232,241,245,0.17), transparent 64%), radial-gradient(2.4px 2.4px at 87% 23%, rgba(232,241,245,0.20), transparent 62%), radial-gradient(2.2px 2.2px at 13% 31%, rgba(232,241,245,0.16), transparent 64%), radial-gradient(2.5px 2.5px at 55% 33%, rgba(232,241,245,0.18), transparent 62%), radial-gradient(2.2px 2.2px at 79% 54%, rgba(232,241,245,0.15), transparent 64%), radial-gradient(1.8px 1.8px at 30% 8%, rgba(90,224,180,0.13), transparent 66%), radial-gradient(1.8px 1.8px at 77% 20%, rgba(143,162,255,0.12), transparent 66%), radial-gradient(1.8px 1.8px at 3% 44%, rgba(232,241,245,0.19), transparent 66%), radial-gradient(1.6px 1.6px at 17% 17%, rgba(232,241,245,0.17), transparent 68%), radial-gradient(2px 2px at 31% 27%, rgba(232,241,245,0.20), transparent 66%), radial-gradient(1.8px 1.8px at 47% 7%, rgba(232,241,245,0.18), transparent 66%), radial-gradient(1.6px 1.6px at 61% 21%, rgba(232,241,245,0.16), transparent 68%), radial-gradient(2px 2px at 74% 36%, rgba(232,241,245,0.20), transparent 66%), radial-gradient(1.8px 1.8px at 91% 8%, rgba(232,241,245,0.18), transparent 66%), radial-gradient(1.6px 1.6px at 96% 41%, rgba(232,241,245,0.15), transparent 68%), radial-gradient(1.8px 1.8px at 36% 48%, rgba(232,241,245,0.17), transparent 66%), radial-gradient(1.6px 1.6px at 8% 62%, rgba(232,241,245,0.14), transparent 68%), radial-gradient(1.8px 1.8px at 27% 57%, rgba(232,241,245,0.15), transparent 66%), radial-gradient(1.6px 1.6px at 64% 44%, rgba(232,241,245,0.14), transparent 68%), radial-gradient(1.2px 1.2px at 11% 24%, rgba(169,190,203,0.16), transparent 70%), radial-gradient(1px 1px at 21% 39%, rgba(169,190,203,0.14), transparent 72%), radial-gradient(1.3px 1.3px at 34% 11%, rgba(169,190,203,0.17), transparent 70%), radial-gradient(1px 1px at 44% 30%, rgba(169,190,203,0.13), transparent 72%), radial-gradient(1.2px 1.2px at 52% 15%, rgba(169,190,203,0.15), transparent 70%), radial-gradient(1px 1px at 58% 45%, rgba(169,190,203,0.12), transparent 72%), radial-gradient(1.3px 1.3px at 66% 29%, rgba(169,190,203,0.14), transparent 70%), radial-gradient(1px 1px at 71% 14%, rgba(169,190,203,0.13), transparent 72%), radial-gradient(1.2px 1.2px at 83% 33%, rgba(169,190,203,0.16), transparent 70%), radial-gradient(1px 1px at 89% 47%, rgba(169,190,203,0.11), transparent 72%), radial-gradient(1.3px 1.3px at 94% 26%, rgba(169,190,203,0.14), transparent 70%), radial-gradient(1px 1px at 15% 51%, rgba(169,190,203,0.11), transparent 72%), radial-gradient(1.2px 1.2px at 39% 63%, rgba(126,147,162,0.13), transparent 72%), radial-gradient(1px 1px at 49% 71%, rgba(126,147,162,0.10), transparent 74%), radial-gradient(1.2px 1.2px at 63% 66%, rgba(126,147,162,0.12), transparent 72%), radial-gradient(1px 1px at 76% 76%, rgba(126,147,162,0.09), transparent 74%), radial-gradient(1.3px 1.3px at 85% 68%, rgba(126,147,162,0.12), transparent 72%), radial-gradient(1px 1px at 92% 84%, rgba(126,147,162,0.07), transparent 74%), radial-gradient(1.2px 1.2px at 5% 79%, rgba(126,147,162,0.11), transparent 72%), radial-gradient(1px 1px at 29% 88%, rgba(126,147,162,0.08), transparent 74%), radial-gradient(1.1px 1.1px at 43% 82%, rgba(126,147,162,0.09), transparent 74%), radial-gradient(1px 1px at 57% 93%, rgba(126,147,162,0.06), transparent 74%), radial-gradient(1.2px 1.2px at 69% 89%, rgba(126,147,162,0.08), transparent 72%), radial-gradient(1px 1px at 19% 72%, rgba(126,147,162,0.10), transparent 74%), radial-gradient(1px 1px at 81% 96%, rgba(126,147,162,0.06), transparent 74%); --th-decor-pres: radial-gradient(2.5% 15% at 21% 10%, rgba(90,224,180,0.060), transparent 72%), radial-gradient(2% 12% at 27% 8%, rgba(96,217,190,0.050), transparent 74%), radial-gradient(3% 17% at 34% 12%, rgba(103,209,199,0.055), transparent 70%), radial-gradient(2% 13% at 41% 7%, rgba(110,201,208,0.045), transparent 74%), radial-gradient(2.5% 16% at 49% 11%, rgba(117,193,218,0.050), transparent 72%), radial-gradient(2% 12% at 56% 9%, rgba(123,186,227,0.045), transparent 74%), radial-gradient(3% 15% at 63% 13%, rgba(130,178,236,0.050), transparent 70%), radial-gradient(2% 11% at 70% 8%, rgba(136,170,246,0.045), transparent 74%), radial-gradient(2.5% 14% at 77% 12%, rgba(143,162,255,0.045), transparent 72%), linear-gradient(174deg, transparent 2%, rgba(90,224,180,0.060) 7%, rgba(103,209,199,0.050) 11%, transparent 18%), linear-gradient(177deg, transparent 5%, rgba(117,193,218,0.050) 12%, transparent 21%), linear-gradient(185deg, transparent 1%, rgba(143,162,255,0.045) 9%, transparent 19%), linear-gradient(171deg, transparent 8%, rgba(96,217,190,0.035) 14%, transparent 23%), linear-gradient(188deg, transparent 10%, rgba(130,178,236,0.030) 16%, transparent 24%), radial-gradient(62% 30% at 22% 2%, rgba(90,224,180,0.090), transparent 66%), radial-gradient(54% 26% at 47% -1%, rgba(117,193,218,0.075), transparent 68%), radial-gradient(58% 28% at 75% 1%, rgba(143,162,255,0.080), transparent 66%), radial-gradient(90% 20% at 55% 9%, rgba(110,201,208,0.040), transparent 74%), radial-gradient(130% 52% at 50% -14%, rgba(103,209,199,0.045), transparent 72%); } [data-theme="dune"] { --th-logo-coeur: #C98A34; --th-logo-halo: var(--th-accent); --th-surface-force: 2.4; --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FAF2E4%22%2F%3E%3Cstop%20offset%3D%22.44%22%20stop-color%3D%22%23F4E8D2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23EADCC0%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.30%22%3E%3Ccircle%20cx%3D%22344%22%20cy%3D%22264%22%20r%3D%2284%22%20fill%3D%22%23FFE9B8%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M0%20512q256-120%20512-32t552-24%20536%2080v364H0z%22%20fill%3D%22%23EFDDBC%22%2F%3E%3Cpath%20d%3D%22M0%20600q288-104%20560-16t520-40%20520%2088v268H0z%22%20fill%3D%22%23E4CFA6%22%2F%3E%3Cpath%20d%3D%22M0%20696q320-88%20608%200t480-56%20512%2072v188H0z%22%20fill%3D%22%23D6BC8C%22%2F%3E%3Cpath%20d%3D%22M0%20784q360-56%20672%208t592-32%20336%2032v108H0z%22%20fill%3D%22%23C7A874%22%2F%3E%3Cg%20stroke%3D%22%23FFF6E2%22%20stroke-width%3D%224%22%20fill%3D%22none%22%20opacity%3D%22.45%22%3E%3Cpath%20d%3D%22M32%20528q248-112%20496-24%22%2F%3E%3Cpath%20d%3D%22M592%20608q240-88%20472-16%22%2F%3E%3Cpath%20d%3D%22M88%20712q304-80%20576%208%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; /* Dune */ --th-ambiance: 0.45; --th-voile: 0,0,0; --th-ombre: 0,0,0; --th-fond: #F3E7D6; --th-panneau: #FBF4EA; --th-carte: #FFFAF2; --th-fond-rgb: 243,231,214; --th-panneau-rgb: 251,244,234; --th-texte: #2A1C12; --th-texte-2: #5C3E26; --th-texte-3: #5C3D26; --th-trait: 166,140,111; --th-accent: #8E2C0E; --th-accent-clair: #6B1F08; --th-accent-doux: #7A4A0B; --th-accent-fort: #7A2409; --th-accent-rgb: 142,44,14; --th-sur-accent: #FFFFFF; --th-sur-plein: #FFFFFF; --th-second: #6B3D63; --th-second-clair: #4C2A47; --th-second-rgb: 107,61,99; --th-succes: #2A6234; --th-alerte: #6F4800; --th-danger: #96241C; --th-danger-rgb: 150,36,28; --th-rayon-micro: 4px; --th-rayon-xs: 8px; --th-rayon-sm: 10px; --th-rayon-md: 12px; --th-rayon-lg: 14px; --th-rayon-carte: 16px; --th-rayon-panneau: 22px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-decor-loin: radial-gradient(2px 2px at 8% 14%, rgba(255,252,243,0.92), rgba(255,252,243,0) 62%), radial-gradient(1.5px 1.5px at 21% 31%, rgba(255,249,236,0.78), rgba(255,249,236,0) 62%), radial-gradient(2.5px 2.5px at 34% 9%, rgba(255,252,243,0.85), rgba(255,252,243,0) 62%), radial-gradient(1.5px 1.5px at 46% 27%, rgba(255,250,238,0.70), rgba(255,250,238,0) 62%), radial-gradient(2px 2px at 57% 15%, rgba(255,252,243,0.88), rgba(255,252,243,0) 62%), radial-gradient(1.5px 1.5px at 68% 36%, rgba(255,249,236,0.72), rgba(255,249,236,0) 62%), radial-gradient(2.5px 2.5px at 79% 11%, rgba(255,252,243,0.85), rgba(255,252,243,0) 62%), radial-gradient(2px 2px at 91% 29%, rgba(255,250,238,0.80), rgba(255,250,238,0) 62%), radial-gradient(1.5px 1.5px at 14% 48%, rgba(255,252,243,0.74), rgba(255,252,243,0) 62%), radial-gradient(2px 2px at 29% 57%, rgba(255,249,236,0.82), rgba(255,249,236,0) 62%), radial-gradient(2.5px 2.5px at 41% 44%, rgba(255,252,243,0.80), rgba(255,252,243,0) 62%), radial-gradient(1.5px 1.5px at 63% 52%, rgba(255,250,238,0.70), rgba(255,250,238,0) 62%), radial-gradient(2px 2px at 74% 61%, rgba(255,252,243,0.84), rgba(255,252,243,0) 62%), radial-gradient(1.5px 1.5px at 86% 47%, rgba(255,249,236,0.72), rgba(255,249,236,0) 62%), radial-gradient(2px 2px at 5% 68%, rgba(255,252,243,0.78), rgba(255,252,243,0) 62%), radial-gradient(2.5px 2.5px at 95% 66%, rgba(255,250,238,0.76), rgba(255,250,238,0) 62%), radial-gradient(2px 2px at 18% 22%, rgba(190,150,102,0.070), rgba(190,150,102,0) 60%), radial-gradient(2px 2px at 52% 38%, rgba(190,150,102,0.060), rgba(190,150,102,0) 60%), radial-gradient(2.5px 2.5px at 83% 24%, rgba(190,150,102,0.065), rgba(190,150,102,0) 60%), repeating-linear-gradient(180deg, rgba(255,253,247,0.42) 0 1px, rgba(255,253,247,0) 1px 8px), repeating-linear-gradient(179.6deg, rgba(255,247,232,0.34) 0 1px, rgba(255,247,232,0) 1px 13px), repeating-linear-gradient(180.4deg, rgba(255,250,238,0.26) 0 1px, rgba(255,250,238,0) 1px 21px), repeating-linear-gradient(180deg, rgba(184,143,96,0.030) 0 1px, rgba(184,143,96,0) 1px 34px); --th-decor-pres: radial-gradient(152% 46% at 38% 139%, rgba(168,126,80,0.070) 0 98.5%, rgba(168,126,80,0) 100%), radial-gradient(134% 44% at 73% 132%, rgba(186,146,99,0.055) 0 98.6%, rgba(186,146,99,0) 100%), radial-gradient(120% 45% at 24% 127%, rgba(203,167,121,0.040) 0 98.7%, rgba(203,167,121,0) 100%), radial-gradient(circle 72px at 22% 78%, rgba(255,243,211,0.80) 0 58%, rgba(255,231,178,0.38) 80%, rgba(255,228,175,0) 100%), radial-gradient(760px 520px at 21% 79%, rgba(255,214,146,0.24) 0%, rgba(255,206,142,0.12) 42%, rgba(255,202,140,0) 72%), linear-gradient(101deg, rgba(255,243,216,0) 18%, rgba(255,243,216,0.15) 21%, rgba(255,243,216,0) 26%), linear-gradient(95deg, rgba(255,239,208,0) 33%, rgba(255,239,208,0.12) 36%, rgba(255,239,208,0) 41%), linear-gradient(110deg, rgba(255,246,224,0) 46%, rgba(255,246,224,0.10) 49%, rgba(255,246,224,0) 54%), linear-gradient(180deg, rgba(232,178,120,0) 58%, rgba(232,178,120,0.050) 74%, rgba(232,178,120,0.030) 84%, rgba(232,178,120,0) 92%), linear-gradient(180deg, rgba(255,252,245,0.55) 0%, rgba(255,246,231,0.22) 34%, rgba(255,244,226,0) 62%); } [data-theme="orage"] { --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230D121A%22%2F%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%23121924%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231B2430%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.18%22%3E%3Cellipse%20cx%3D%22480%22%20cy%3D%2272%22%20rx%3D%22600%22%20ry%3D%22208%22%20fill%3D%22%2305080D%22%20opacity%3D%22.5%22%2F%3E%3Cellipse%20cx%3D%221240%22%20cy%3D%2240%22%20rx%3D%22520%22%20ry%3D%22176%22%20fill%3D%22%23070B12%22%20opacity%3D%22.45%22%2F%3E%3Cellipse%20cx%3D%22848%22%20cy%3D%22184%22%20rx%3D%22480%22%20ry%3D%22104%22%20fill%3D%22%23A3BED6%22%20opacity%3D%22.04%22%2F%3E%3Cg%20stroke%3D%22%23BED0E2%22%20stroke-width%3D%222%22%20opacity%3D%22.11%22%3E%3Cpath%20d%3D%22M160%20240l-64%20360%22%2F%3E%3Cpath%20d%3D%22M384%20176l-64%20424%22%2F%3E%3Cpath%20d%3D%22M608%20264l-64%20360%22%2F%3E%3Cpath%20d%3D%22M832%20160l-64%20464%22%2F%3E%3Cpath%20d%3D%22M1056%20248l-64%20368%22%2F%3E%3Cpath%20d%3D%22M1280%20184l-64%20432%22%2F%3E%3Cpath%20d%3D%22M1488%20280l-64%20344%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M824%20136l-40%20120h48l-40%20136%22%20stroke%3D%22%23E7F0FF%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20opacity%3D%22.22%22%2F%3E%3Cpath%20d%3D%22M0%20760q400-40%20800%208t800-24v156H0z%22%20fill%3D%22%23212B38%22%20opacity%3D%22.45%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; /* Orage */ --th-ambiance: 0.55; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #0F141A; --th-panneau: #151B23; --th-carte: #1B222B; --th-fond-rgb: 15,20,26; --th-panneau-rgb: 21,27,35; --th-texte: #E9EEF3; --th-texte-2: #B2BDC9; --th-texte-3: #8A98A6; --th-trait: 101,113,128; --th-accent: #8FB3D4; --th-accent-clair: #CFE0EF; --th-accent-doux: #9DBEDB; --th-accent-fort: #A8C6E0; --th-accent-rgb: 143,179,212; --th-sur-accent: #0F141A; --th-sur-plein: #111111; --th-second: #93A7C4; --th-second-clair: #C3D0E2; --th-second-rgb: 147,167,196; --th-succes: #7FC2A6; --th-alerte: #DCB271; --th-danger: #E38B8B; --th-danger-rgb: 227,139,139; --th-rayon-micro: 2px; --th-rayon-xs: 4px; --th-rayon-sm: 6px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-decor-loin: repeating-linear-gradient(74deg, rgba(190,208,226,0.030) 0 1px, transparent 1px 11px), repeating-linear-gradient(78deg, rgba(168,188,210,0.022) 0 1px, transparent 1px 17px), repeating-linear-gradient(71deg, rgba(206,222,238,0.017) 0 1px, transparent 1px 29px), repeating-linear-gradient(82deg, rgba(150,172,194,0.013) 0 2px, transparent 2px 43px), repeating-linear-gradient(76deg, rgba(198,216,234,0.010) 0 1px, transparent 1px 67px), radial-gradient(1.5px 1.5px at 17% 24%, rgba(214,230,244,0.18), transparent 70%), radial-gradient(2px 2px at 57% 12%, rgba(214,230,244,0.16), transparent 70%), radial-gradient(1.5px 1.5px at 68% 46%, rgba(214,230,244,0.14), transparent 70%), radial-gradient(1.5px 1.5px at 31% 79%, rgba(214,230,244,0.12), transparent 70%); --th-decor-pres: radial-gradient(1240px 640px at 24% -16%, rgba(3,5,9,0.22), transparent 68%), radial-gradient(1120px 580px at 79% -12%, rgba(4,7,11,0.20), transparent 66%), radial-gradient(880px 420px at 52% 4%, rgba(163,190,214,0.026), transparent 72%), radial-gradient(420px 230px at 55% 0%, rgba(198,220,238,0.018), transparent 74%), linear-gradient(101deg, transparent 33%, rgba(170,195,218,0.014) 41%, transparent 48%), radial-gradient(1500px 520px at 50% 116%, rgba(2,4,7,0.18), transparent 70%); } [data-theme="nimbe"] { --th-logo-coeur: #C99B3F; --th-logo-halo: var(--th-accent); /* Nimbe */ --th-ambiance: 0.30; --th-surface-force: 2.0; --th-voile: 0,0,0; --th-ombre: 0,0,0; --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201000%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FDFDFC%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23FAFAF8%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23F4F3EF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23EEEDE7%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22s%22%20cx%3D%22.5%22%20cy%3D%22.5%22%20r%3D%22.5%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFF6DF%22%20stop-opacity%3D%22.9%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23F2D9A2%22%20stop-opacity%3D%22.34%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E8C87F%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23F0DCAE%22%20stop-opacity%3D%22.4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F0DCAE%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%221000%22%20fill%3D%22url%28%23b%29%22%2F%3E%3Cg%20opacity%3D%220.34%22%3E%3Ccircle%20cx%3D%221200%22%20cy%3D%22240%22%20r%3D%22232%22%20fill%3D%22url%28%23s%29%22%2F%3E%3Ccircle%20cx%3D%221200%22%20cy%3D%22240%22%20r%3D%2248%22%20fill%3D%22%23FFFAEC%22%2F%3E%3Cg%20fill%3D%22url%28%23r%29%22%3E%3Cpath%20d%3D%22M1176%20280L808%201000h128l272-704z%22%2F%3E%3Cpath%20d%3D%22M1232%20284l232%20716h-104l-176-696z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M-40%20584q120-96%20248-40%2048-112%20184-88%2080-104%20216-40%2096-72%20184%2016%20112-88%20224%208%20104-56%20184%2032%2096-24%20176%2056v480H-40z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M-40%20640q120-80%20248-32%2048-96%20184-72l-8%2040q-120-24-168%2064-120-48-256%2024z%22%20fill%3D%22%23E4E3DE%22%2F%3E%3Cpath%20d%3D%22M592%20592q96-72%20184%2016%20112-88%20224%208l-16%2040q-96-80-200%200-80-80-184-16z%22%20fill%3D%22%23E4E3DE%22%2F%3E%3Cg%20fill%3D%22%23FFFFFF%22%20opacity%3D%22.97%22%3E%3Cpath%20d%3D%22M-40%20736q136-80%20272-24%2064-88%20208-48%2088-72%20216%208%20104-56%20208%2032%20112-48%20208%2040%2080-16%20144%2040v216H-40z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M-40%20784q136-72%20272-16%2064-80%20208-40l-8%2036q-128-32-184%2048-128-48-288%2020z%22%20fill%3D%22%23EBEAE4%22%2F%3E%3Cg%20fill%3D%22%23EFEBE0%22%3E%3Cpath%20d%3D%22M-40%20880q168-56%20328-8%2080-56%20232-16%20104-40%20224%2024%20120-32%20224%2032%2080-8%20152%2032v56H-40z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23E2C384%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20opacity%3D%22.8%22%3E%3Cpath%20d%3D%22M-24%20608q128-88%20264-40%2048-104%20192-80%22%2F%3E%3Cpath%20d%3D%22M600%20600q96-64%20184%2016%20112-80%20224%208%22%2F%3E%3Cpath%20d%3D%22M-24%20760q136-64%20272-12%2064-72%20208-36%22%2F%3E%3Cpath%20d%3D%22M1080%20744q112-40%20208%2040%2080-16%20144%2040%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-fond: #FAFAF8; --th-panneau: #FDFDFC; --th-carte: #FFFFFF; --th-fond-rgb: 250,250,248; --th-panneau-rgb: 253,253,252; --th-texte: #26231C; --th-texte-2: #5A564A; --th-texte-3: #5A574D; --th-trait: 152,147,133; --th-accent: #6C5317; --th-accent-clair: #4A3708; --th-accent-doux: #6F5518; --th-accent-fort: #6D5417; --th-accent-rgb: 108,83,23; --th-sur-accent: #FFFFFF; --th-sur-plein: #FFFFFF; --th-second: #4F5862; --th-second-clair: #464E58; --th-second-rgb: 79,88,98; --th-succes: #386230; --th-alerte: #794F0B; --th-danger: #9E3428; --th-danger-rgb: 158,52,40; --th-rayon-micro: 5px; --th-rayon-xs: 8px; --th-rayon-sm: 10px; --th-rayon-md: 12px; --th-rayon-lg: 16px; --th-rayon-carte: 18px; --th-rayon-panneau: 24px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-decor-loin: none; --th-decor-pres: none; } /* ▼▼ DÉCORS GÉNÉRÉS — ne pas éditer à la main ▼▼ */ /* ══════════════════════════════════════════════════════════════════════════ HUIT DÉCORS DE PLUS — 15/08/2026 Amadou : « on a plutôt fait des paysages, mais j'aimerais aussi des décors ». La différence : un paysage, c'est « une forêt » ; un décor, c'est un LIEU qu'on nomme. Les sept premiers sont des milieux, ces huit-là sont des endroits — et Velours n'est même pas un extérieur, c'est un salon. Dubaï est dessiné d'après une photo qu'il a fournie : on garde l'heure bleue, la flèche seule au centre, l'or aux fenêtres et l'eau devant. ⚠️ Pas la photo elle-même — elle appartient à quelqu'un, et deux méga-octets dans la feuille ralentiraient CHAQUE chargement de page. Le dessin fait deux kilo-octets. ⚠️⚠️ CES BLOCS SONT GÉNÉRÉS. Ne pas les modifier à la main : la source est outils/decors.py + outils/gen_themes.py, et le générateur REFUSE d'écrire s'il manque un seul des 38 jetons obligatoires. Un thème incomplet retombe en silence sur les valeurs de Nuit violette — un seul mauvais gris au milieu d'un thème clair, on ne le voit qu'en le cherchant. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dubai"] { /* Dubaï */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2305081A%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%230A1230%22%2F%3E%3Cstop%20offset%3D%22.56%22%20stop-color%3D%22%23121F44%22%2F%3E%3Cstop%20offset%3D%22.76%22%20stop-color%3D%22%23252C4E%22%2F%3E%3Cstop%20offset%3D%22.9%22%20stop-color%3D%22%234A3A46%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236B4436%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22h%22%20cx%3D%22.34%22%20cy%3D%221.04%22%20r%3D%22.8%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23C2825A%22%20stop-opacity%3D%22.3%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%239A6448%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239A6448%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22tw%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237E96CE%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%234A5F98%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%231E2A56%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23070C22%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22w%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23182548%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23070B1C%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Cg%20opacity%3D%220.42%22%3E%3Cg%20fill%3D%22%23CBD8F2%22%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%2270%22%20r%3D%222%22%20opacity%3D%22.45%22%2F%3E%3Ccircle%20cx%3D%22430%22%20cy%3D%2242%22%20r%3D%221.6%22%20opacity%3D%22.35%22%2F%3E%3Ccircle%20cx%3D%22700%22%20cy%3D%2296%22%20r%3D%221.8%22%20opacity%3D%22.4%22%2F%3E%3Ccircle%20cx%3D%221050%22%20cy%3D%2254%22%20r%3D%221.6%22%20opacity%3D%22.32%22%2F%3E%3Ccircle%20cx%3D%221320%22%20cy%3D%2288%22%20r%3D%222%22%20opacity%3D%22.4%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%2240%22%20r%3D%221.5%22%20opacity%3D%22.3%22%2F%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22140%22%20r%3D%221.5%22%20opacity%3D%22.26%22%2F%3E%3Ccircle%20cx%3D%22900%22%20cy%3D%22150%22%20r%3D%221.5%22%20opacity%3D%22.24%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.1%22%3E%3Cg%20fill%3D%22%23C08A64%22%3E%3Cpath%20d%3D%22M120%20612q180-24%20360%206t300-9%20420%2013%20380-8v17q-190%2015-380%204t-420-13-300%209-360-6z%22%2F%3E%3Cpath%20d%3D%22M40%20662q140-17%20280%204t240-8%20320%2010%20300-6v13q-150%2012-300%204t-320-10-240%208-280-4z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.11%22%3E%3Cg%20fill%3D%22%2393A9D6%22%3E%3Cpath%20d%3D%22M0%20704h58l6-80h30l6%2080h72l8-116h26l8%20116h96l6-66h24l6%2066h1254v36H0z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.15%22%3E%3Cg%20fill%3D%22%230C1430%22%3E%3Cpath%20d%3D%22M22%20660h70l4-40h14l4%2040h64v240H22zM196%20636h52l6-46h12l6%2046h56v264H196zM342%20674h84v226h-84zM452%20618h44l5-52h12l5%2052h50v282H452zM1082%20646h60l5-44h12l5%2044h56v254h-138zM1256%20610h74l6-56h14l6%2056h64v290h-164zM1444%20664h56l5-38h12l5%2038h56v236h-134z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23070C24%22%3E%3Cpath%20d%3D%22M0%20720h120v180H0zM150%20700h96v200h-96zM276%20742h84v158h-84zM392%20690h70v210h-70zM1130%20706h78v194h-78zM1240%20736h96v164h-96zM1366%20688h74v212h-74zM1470%20730h130v170h-130z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.3%22%3E%3Cpath%20d%3D%22M800%2026l4%2038%208%206%204%2074%2022%2014%206%2092%2026%2016%208%20110%2030%2020%2010%20148%2034%2022%2012%20296H636l12-296%2034-22%2010-148%2030-20%208-110%2026-16%206-92%2022-14%204-74%208-6z%22%20fill%3D%22url%28%23tw%29%22%2F%3E%3Cpath%20d%3D%22M800%200l5%2030-5%208-5-8z%22%20fill%3D%22%23DCE7FF%22%20opacity%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%2216%22%20r%3D%229%22%20fill%3D%22%23FFF3D0%22%20opacity%3D%22.35%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.2%22%3E%3Cg%20fill%3D%22%23F7CE84%22%3E%3Cpath%20d%3D%22M772%20300h7v10h-7zM812%20344h7v10h-7zM784%20402h7v10h-7zM820%20452h7v10h-7zM766%20496h7v10h-7zM806%20560h7v10h-7zM776%20620h7v10h-7zM830%20654h7v10h-7zM758%20700h7v10h-7zM812%20748h7v10h-7zM782%20800h7v10h-7z%22%2F%3E%3Cpath%20d%3D%22M40%20700h7v10h-7zM86%20676h7v10h-7zM214%20726h7v10h-7zM300%20766h7v10h-7zM410%20716h7v10h-7zM466%20660h7v10h-7zM1148%20730h7v10h-7zM1272%20764h7v10h-7zM1388%20712h7v10h-7zM1290%20646h7v10h-7zM1496%20754h7v10h-7zM1548%20780h7v10h-7zM60%20780h7v10h-7zM330%20820h7v10h-7zM1180%20812h7v10h-7zM1420%20800h7v10h-7z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.16%22%3E%3Cpath%20d%3D%22M0%20838h1600v62H0z%22%20fill%3D%22url%28%23w%29%22%2F%3E%3Cpath%20d%3D%22M540%20836q130-30%20260-30t260%2030v10H540z%22%20fill%3D%22%230E1938%22%20opacity%3D%22.6%22%2F%3E%3Cg%20fill%3D%22%23F3B457%22%20opacity%3D%22.3%22%3E%3Cpath%20d%3D%22M796%20840h7v54h-7zM596%20846h5v38h-5zM986%20846h5v38h-5zM296%20852h4v32h-4zM1276%20852h4v32h-4zM176%20856h4v26h-4zM1436%20856h4v26h-4zM416%20850h4v36h-4zM1146%20850h4v36h-4z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23F7D9A8%22%20stroke-width%3D%223%22%20opacity%3D%22.18%22%3E%3Cpath%20d%3D%22M120%20862h1360M60%20884h1480%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(243,215,154,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(166,193,230,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(243,215,154,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(166,193,230,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(243,215,154,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(166,193,230,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(243,215,154,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(166,193,230,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(243,215,154,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(224,178,92,.13) 0%, rgba(5,11,36,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(94,134,196,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(224,178,92,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(224,178,92,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.5; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #050B24; --th-panneau: #0E1C3E; --th-carte: #17294F; --th-fond-rgb: 5,11,36; --th-panneau-rgb: 14,28,62; --th-texte: #EDE4D2; --th-texte-2: #C3B79C; --th-texte-3: #A99C82; --th-trait: 150,136,110; --th-accent: #E0B25C; --th-accent-clair: #F3D79A; --th-accent-doux: #C9A468; --th-accent-fort: #EFC97C; --th-accent-rgb: 224,178,92; --th-sur-accent: #050B24; --th-sur-plein: #111111; --th-second: #5E86C4; --th-second-clair: #A6C1E6; --th-second-rgb: 94,134,196; --th-succes: #5FC79A; --th-alerte: #E8BC63; --th-danger: #EF8A82; --th-danger-rgb: 239,138,130; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #E0B25C; --th-logo-halo: var(--th-accent); } [data-theme="hanami"] { /* Hanami */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FDF6F8%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23F7E2E9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23EFCFD9%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.5%22%3E%3Ccircle%20cx%3D%221240%22%20cy%3D%22200%22%20r%3D%2296%22%20fill%3D%22%23FFF7F8%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M430%20760l370-380%20370%20380z%22%20fill%3D%22%23C6AFC2%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M690%20490l110-116%20110%20116-74-30-36%2040-38-26z%22%20fill%3D%22%23FFFDFE%22%2F%3E%3Cpath%20d%3D%22M0%20748q300-48%20600%2012t1000-32v172H0z%22%20fill%3D%22%23BCA5B9%22%20opacity%3D%22.38%22%2F%3E%3Cpath%20d%3D%22M0%20812q400-40%20800%2016t800-26v98H0z%22%20fill%3D%22%238E7288%22%20opacity%3D%22.32%22%2F%3E%3Cg%20stroke%3D%22%236B4152%22%20stroke-width%3D%2215%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%3E%3Cpath%20d%3D%22M-30%2070q200%2050%20310%20160t230%20130%22%2F%3E%3Cpath%20d%3D%22M150%20116q30%20100%2010%20170%22%2F%3E%3Cpath%20d%3D%22M380%20220q70%2060%2070%20150%22%2F%3E%3Cpath%20d%3D%22M520%20310q90%2010%20150-40%22%2F%3E%3Cpath%20d%3D%22M60%2040q40%2070%2030%20130%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F0A9C0%22%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2296%22%20r%3D%2230%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22150%22%20r%3D%2235%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%22256%22%20r%3D%2230%22%2F%3E%3Ccircle%20cx%3D%22286%22%20cy%3D%22188%22%20r%3D%2230%22%2F%3E%3Ccircle%20cx%3D%22376%22%20cy%3D%22240%22%20r%3D%2235%22%2F%3E%3Ccircle%20cx%3D%22456%22%20cy%3D%22308%22%20r%3D%2230%22%2F%3E%3Ccircle%20cx%3D%22346%22%20cy%3D%22348%22%20r%3D%2225%22%2F%3E%3Ccircle%20cx%3D%22536%22%20cy%3D%22278%22%20r%3D%2230%22%2F%3E%3Ccircle%20cx%3D%22626%22%20cy%3D%22258%22%20r%3D%2235%22%2F%3E%3Ccircle%20cx%3D%22246%22%20cy%3D%2266%22%20r%3D%2225%22%2F%3E%3Ccircle%20cx%3D%22556%22%20cy%3D%22378%22%20r%3D%2225%22%2F%3E%3Ccircle%20cx%3D%22676%22%20cy%3D%22330%22%20r%3D%2228%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23FBD3DF%22%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%22168%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22238%22%20cy%3D%22228%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22416%22%20cy%3D%22168%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22496%22%20cy%3D%22220%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22586%22%20cy%3D%22330%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22306%22%20cy%3D%22288%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22646%22%20cy%3D%22196%22%20r%3D%2218%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F3B8CB%22%20opacity%3D%22.75%22%3E%3Ccircle%20cx%3D%22740%22%20cy%3D%22480%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%22920%22%20cy%3D%22614%22%20r%3D%2212%22%2F%3E%3Ccircle%20cx%3D%221050%22%20cy%3D%22420%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%221250%22%20cy%3D%22590%22%20r%3D%2212%22%2F%3E%3Ccircle%20cx%3D%221420%22%20cy%3D%22490%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%22830%22%20cy%3D%22716%22%20r%3D%2211%22%2F%3E%3Ccircle%20cx%3D%221150%22%20cy%3D%22700%22%20r%3D%2212%22%2F%3E%3Ccircle%20cx%3D%221360%22%20cy%3D%22300%22%20r%3D%2211%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%238C3550%22%20stroke-width%3D%2219%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M1270%20780V638M1460%20780V638M1240%20632h250M1258%20588h214%22%2F%3E%3Cpath%20d%3D%22M1232%20588q126-24%20256%200%22%20stroke-width%3D%2214%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(106,32,57,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(58,70,103,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(106,32,57,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(58,70,103,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(106,32,57,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(58,70,103,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(106,32,57,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(58,70,103,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(106,32,57,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(140,53,80,.13) 0%, rgba(251,241,244,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(78,94,134,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(140,53,80,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(140,53,80,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.42; --th-surface-force: 2.2; --th-voile: 0,0,0; --th-ombre: 0,0,0; --th-fond: #FBF1F4; --th-panneau: #FEF8FA; --th-carte: #FFFCFD; --th-fond-rgb: 251,241,244; --th-panneau-rgb: 254,248,250; --th-texte: #3A1B29; --th-texte-2: #633446; --th-texte-3: #6A3B4C; --th-trait: 168,132,148; --th-accent: #8C3550; --th-accent-clair: #6A2039; --th-accent-doux: #A35168; --th-accent-fort: #77293F; --th-accent-rgb: 140,53,80; --th-sur-accent: #FFFFFF; --th-sur-plein: #FFFFFF; --th-second: #4E5E86; --th-second-clair: #3A4667; --th-second-rgb: 78,94,134; --th-succes: #2E6140; --th-alerte: #7A4A08; --th-danger: #9B2530; --th-danger-rgb: 155,37,48; --th-rayon-micro: 4px; --th-rayon-xs: 8px; --th-rayon-sm: 10px; --th-rayon-md: 12px; --th-rayon-lg: 14px; --th-rayon-carte: 16px; --th-rayon-panneau: 22px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #8C3550; --th-logo-halo: var(--th-accent); } [data-theme="miroir"] { /* Miroir */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230C1826%22%2F%3E%3Cstop%20offset%3D%22.58%22%20stop-color%3D%22%2322405A%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237E9BA8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22e%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%236A879A%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2312202F%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.19%22%3E%3Ccircle%20cx%3D%221190%22%20cy%3D%22180%22%20r%3D%2262%22%20fill%3D%22%23E9F2F0%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M0%20470l260-224%20200%20166%20170-118%20230%20196%20280-244%20460%20302v70H0z%22%20fill%3D%22%2312202F%22%2F%3E%3Cpath%20d%3D%22M630%20294l230%20196-230-40z%22%20fill%3D%22%2331536B%22%20opacity%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M1090%20250l120%2078-230%2030z%22%20fill%3D%22%2331536B%22%20opacity%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M0%20470h1600v430H0z%22%20fill%3D%22url%28%23e%29%22%2F%3E%3Cpath%20d%3D%22M0%20470l260%20224%20200-166%20170%20118%20230-196%20280%20244%20460-302v-52H0z%22%20fill%3D%22%230E1B27%22%20opacity%3D%22.72%22%2F%3E%3Cg%20stroke%3D%22%23BBD3DC%22%20stroke-width%3D%225%22%20opacity%3D%22.22%22%3E%3Cpath%20d%3D%22M70%20570h360M630%20610h480M160%20690h290M910%20720h520M350%20790h600M1130%20830h360%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23D8E6EA%22%20stroke-width%3D%224%22%20opacity%3D%22.16%22%3E%3Cpath%20d%3D%22M0%20500h1600M0%20528h1600%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M660%20730h150l-20%2034h-110z%22%20fill%3D%22%23080F16%22%2F%3E%3Cpath%20d%3D%22M735%20730v-56%22%20stroke%3D%22%23080F16%22%20stroke-width%3D%228%22%2F%3E%3Cg%20fill%3D%22%23CFE2E6%22%20opacity%3D%22.5%22%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22110%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22480%22%20cy%3D%2270%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%22760%22%20cy%3D%22132%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%221430%22%20cy%3D%2296%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%22980%22%20cy%3D%2256%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%221310%22%20cy%3D%22200%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(196,224,232,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(190,207,226,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(196,224,232,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(190,207,226,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(196,224,232,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(190,207,226,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(196,224,232,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(190,207,226,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(196,224,232,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(127,176,190,.13) 0%, rgba(11,22,34,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(143,169,198,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(127,176,190,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(127,176,190,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.5; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #0B1622; --th-panneau: #152A3A; --th-carte: #1F3C50; --th-fond-rgb: 11,22,34; --th-panneau-rgb: 21,42,58; --th-texte: #E3EFF2; --th-texte-2: #A9C2CC; --th-texte-3: #93AAB6; --th-trait: 108,142,158; --th-accent: #7FB0BE; --th-accent-clair: #C4E0E8; --th-accent-doux: #A6C8D2; --th-accent-fort: #94C4D2; --th-accent-rgb: 127,176,190; --th-sur-accent: #0B1622; --th-sur-plein: #111111; --th-second: #8FA9C6; --th-second-clair: #BECFE2; --th-second-rgb: 143,169,198; --th-succes: #6BC49C; --th-alerte: #DEBB6E; --th-danger: #EE9098; --th-danger-rgb: 238,144,152; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #7FB0BE; --th-logo-halo: var(--th-accent); } [data-theme="lanternes"] { /* Lanternes */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230A0810%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%231E1420%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232C1C26%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22l%22%20cx%3D%22.5%22%20cy%3D%22.5%22%20r%3D%22.5%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFBE7E%22%20stop-opacity%3D%22.6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FFBE7E%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.16%22%3E%3Cpath%20d%3D%22M0%200h430l180%20560v340H0z%22%20fill%3D%22%231A1119%22%2F%3E%3Cpath%20d%3D%22M1600%200h-430l-180%20560v340h610z%22%20fill%3D%22%231A1119%22%2F%3E%3Cpath%20d%3D%22M0%2090q150-70%20320-34l150%2032-10%2058-160-34q-170-34-300%2042z%22%20fill%3D%22%2331202A%22%2F%3E%3Cpath%20d%3D%22M1600%2090q-150-70-320-34l-150%2032%2010%2058%20160-34q170-34%20300%2042z%22%20fill%3D%22%2331202A%22%2F%3E%3Cpath%20d%3D%22M60%20300q120-50%20250-26l130%2026-8%2048-140-26q-134-24-232%2034z%22%20fill%3D%22%2331202A%22%2F%3E%3Cpath%20d%3D%22M1540%20300q-120-50-250-26l-130%2026%208%2048%20140-26q134-24%20232%2034z%22%20fill%3D%22%2331202A%22%2F%3E%3Cpath%20d%3D%22M180%20520q90-38%20190-18l100%2020-6%2038-108-20q-102-18-176%2026z%22%20fill%3D%22%2331202A%22%2F%3E%3Cpath%20d%3D%22M1420%20520q-90-38-190-18l-100%2020%206%2038%20108-20q102-18%20176%2026z%22%20fill%3D%22%2331202A%22%2F%3E%3Cg%20fill%3D%22%233E2A34%22%3E%3Cpath%20d%3D%22M40%20160h140v190H40zM220%20190h100v160H220zM1280%20190h100v160h-100zM1420%20160h140v190h-140zM120%20400h120v170H120zM1360%20400h120v170h-120zM60%20620h150v200H60zM1390%20620h150v200h-150zM250%20600h110v180H250zM1240%20600h110v180h-110z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23E8B95E%22%20opacity%3D%22.42%22%3E%3Cpath%20d%3D%22M50%20170h120v170H50zM230%20200h80v140h-80zM1290%20200h80v140h-80zM1430%20170h120v170h-120zM130%20410h100v150H130zM1370%20410h100v150h-100zM70%20630h130v180H70zM1400%20630h130v180h-130zM260%20610h90v160h-90zM1250%20610h90v160h-90z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23241820%22%20stroke-width%3D%226%22%20opacity%3D%22.85%22%3E%3Cpath%20d%3D%22M90%20170v170M130%20170v170M50%20240h120M50%20290h120M262%20200v140M1332%20200v140M1470%20170v170M1510%20170v170M170%20410v150M1418%20410v150M110%20630v180M155%20630v180M70%20720h130M1445%20630v180M1490%20630v180M1400%20720h130M300%20610v160M1290%20610v160%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23B8323C%22%20opacity%3D%22.85%22%3E%3Cpath%20d%3D%22M50%20372h120q10%200%208%2012l-14%2054q-2%2010-14%2010H70q-12%200-14-10l-14-54q-2-12%208-12z%22%2F%3E%3Cpath%20d%3D%22M1430%20372h120q10%200%208%2012l-14%2054q-2%2010-14%2010h-92q-12%200-14-10l-14-54q-2-12%208-12z%22%2F%3E%3Cpath%20d%3D%22M130%20590h100q9%200%207%2011l-12%2044q-2%209-12%209h-66q-10%200-12-9l-12-44q-2-11%207-11z%22%2F%3E%3Cpath%20d%3D%22M1370%20590h100q9%200%207%2011l-12%2044q-2%209-12%209h-66q-10%200-12-9l-12-44q-2-11%207-11z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%233A2830%22%20stroke-width%3D%224%22%20opacity%3D%22.8%22%3E%3Cpath%20d%3D%22M180%20120q620-40%201240%200M300%20330q500-30%201000%200M420%20520q380-24%20760%200%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%2266%22%20ry%3D%2284%22%20fill%3D%22url%28%23l%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%2240%22%20ry%3D%2254%22%20fill%3D%22%23D2453C%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%2226%22%20ry%3D%2240%22%20fill%3D%22%23F58C5A%22%2F%3E%3Cpath%20d%3D%22M178%20146h44v12h-44zM178%20242h44v12h-44z%22%20fill%3D%22%233A1418%22%2F%3E%3Cpath%20d%3D%22M200%20130v16M200%20254v30%22%20stroke%3D%22%233A1418%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M191%20284h18l-9%2028z%22%20fill%3D%22%23C9A24A%22%2F%3E%3Cellipse%20cx%3D%221400%22%20cy%3D%22200%22%20rx%3D%2266%22%20ry%3D%2284%22%20fill%3D%22url%28%23l%29%22%2F%3E%3Cellipse%20cx%3D%221400%22%20cy%3D%22200%22%20rx%3D%2240%22%20ry%3D%2254%22%20fill%3D%22%23D2453C%22%2F%3E%3Cellipse%20cx%3D%221400%22%20cy%3D%22200%22%20rx%3D%2226%22%20ry%3D%2240%22%20fill%3D%22%23F58C5A%22%2F%3E%3Cpath%20d%3D%22M1378%20146h44v12h-44zM1378%20242h44v12h-44z%22%20fill%3D%22%233A1418%22%2F%3E%3Cpath%20d%3D%22M1400%20130v16M1400%20254v30%22%20stroke%3D%22%233A1418%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M1391%20284h18l-9%2028z%22%20fill%3D%22%23C9A24A%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22400%22%20rx%3D%2250%22%20ry%3D%2264%22%20fill%3D%22url%28%23l%29%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22400%22%20rx%3D%2230%22%20ry%3D%2241%22%20fill%3D%22%23D2453C%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22400%22%20rx%3D%2219%22%20ry%3D%2230%22%20fill%3D%22%23F58C5A%22%2F%3E%3Cpath%20d%3D%22M504%20359h32v9h-32zM504%20432h32v9h-32z%22%20fill%3D%22%233A1418%22%2F%3E%3Cpath%20d%3D%22M520%20345v14M520%20441v22%22%20stroke%3D%22%233A1418%22%20stroke-width%3D%225%22%2F%3E%3Cellipse%20cx%3D%221080%22%20cy%3D%22400%22%20rx%3D%2250%22%20ry%3D%2264%22%20fill%3D%22url%28%23l%29%22%2F%3E%3Cellipse%20cx%3D%221080%22%20cy%3D%22400%22%20rx%3D%2230%22%20ry%3D%2241%22%20fill%3D%22%23D2453C%22%2F%3E%3Cellipse%20cx%3D%221080%22%20cy%3D%22400%22%20rx%3D%2219%22%20ry%3D%2230%22%20fill%3D%22%23F58C5A%22%2F%3E%3Cpath%20d%3D%22M1064%20359h32v9h-32zM1064%20432h32v9h-32z%22%20fill%3D%22%233A1418%22%2F%3E%3Cpath%20d%3D%22M1080%20345v14M1080%20441v22%22%20stroke%3D%22%233A1418%22%20stroke-width%3D%225%22%2F%3E%3Cellipse%20cx%3D%22700%22%20cy%3D%22560%22%20rx%3D%2236%22%20ry%3D%2246%22%20fill%3D%22url%28%23l%29%22%2F%3E%3Cellipse%20cx%3D%22700%22%20cy%3D%22560%22%20rx%3D%2221%22%20ry%3D%2229%22%20fill%3D%22%23D2453C%22%2F%3E%3Cellipse%20cx%3D%22700%22%20cy%3D%22560%22%20rx%3D%2213%22%20ry%3D%2221%22%20fill%3D%22%23F58C5A%22%2F%3E%3Cpath%20d%3D%22M689%20531h22v7h-22zM689%20582h22v7h-22z%22%20fill%3D%22%233A1418%22%2F%3E%3Cpath%20d%3D%22M700%20522v9%22%20stroke%3D%22%233A1418%22%20stroke-width%3D%224%22%2F%3E%3Cellipse%20cx%3D%22900%22%20cy%3D%22560%22%20rx%3D%2236%22%20ry%3D%2246%22%20fill%3D%22url%28%23l%29%22%2F%3E%3Cellipse%20cx%3D%22900%22%20cy%3D%22560%22%20rx%3D%2221%22%20ry%3D%2229%22%20fill%3D%22%23D2453C%22%2F%3E%3Cellipse%20cx%3D%22900%22%20cy%3D%22560%22%20rx%3D%2213%22%20ry%3D%2221%22%20fill%3D%22%23F58C5A%22%2F%3E%3Cpath%20d%3D%22M889%20531h22v7h-22zM889%20582h22v7h-22z%22%20fill%3D%22%233A1418%22%2F%3E%3Cpath%20d%3D%22M900%20522v9%22%20stroke%3D%22%233A1418%22%20stroke-width%3D%224%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M610%20560h380l290%20340H320z%22%20fill%3D%22%23241A28%22%2F%3E%3Cpath%20d%3D%22M0%20620h1600v280H0z%22%20fill%3D%22%23150E18%22%2F%3E%3Cpath%20d%3D%22M610%20560h380l290%20340H320z%22%20fill%3D%22%232A1E2E%22%2F%3E%3Cg%20fill%3D%22%23F2764F%22%20opacity%3D%22.26%22%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22700%22%20rx%3D%22120%22%20ry%3D%2242%22%2F%3E%3Cellipse%20cx%3D%221400%22%20cy%3D%22700%22%20rx%3D%22120%22%20ry%3D%2242%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22660%22%20rx%3D%2286%22%20ry%3D%2230%22%2F%3E%3Cellipse%20cx%3D%221080%22%20cy%3D%22660%22%20rx%3D%2286%22%20ry%3D%2230%22%2F%3E%3Cellipse%20cx%3D%22700%22%20cy%3D%22628%22%20rx%3D%2258%22%20ry%3D%2220%22%2F%3E%3Cellipse%20cx%3D%22900%22%20cy%3D%22628%22%20rx%3D%2258%22%20ry%3D%2220%22%2F%3E%3Cellipse%20cx%3D%22800%22%20cy%3D%22830%22%20rx%3D%22200%22%20ry%3D%2248%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F2764F%22%20opacity%3D%22.18%22%3E%3Cpath%20d%3D%22M172%20700q28-110%2056%200-28%20190-56%200z%22%2F%3E%3Cpath%20d%3D%22M1372%20700q28-110%2056%200-28%20190-56%200z%22%2F%3E%3Cpath%20d%3D%22M498%20660q22-80%2044%200-22%20140-44%200z%22%2F%3E%3Cpath%20d%3D%22M1058%20660q22-80%2044%200-22%20140-44%200z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%233B2A32%22%20stroke-width%3D%225%22%20opacity%3D%22.5%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%20660q800-26%201600%200M0%20730q800-26%201600%200M0%20806q800-26%201600%200M0%20878q800-26%201600%200%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230E0A10%22%3E%3Cpath%20d%3D%22M776%20500q24-32%2048%200l12%2074h-72z%22%2F%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22486%22%20r%3D%2218%22%2F%3E%3Cpath%20d%3D%22M742%20500q58-46%20116%200z%22%20opacity%3D%22.85%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(245,168,148,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(240,204,148,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(245,168,148,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(240,204,148,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(245,168,148,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(240,204,148,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(245,168,148,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(240,204,148,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(245,168,148,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(228,103,90,.13) 0%, rgba(12,10,18,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(224,168,90,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(228,103,90,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(228,103,90,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.55; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #0C0A12; --th-panneau: #1F1620; --th-carte: #2E2130; --th-fond-rgb: 12,10,18; --th-panneau-rgb: 31,22,32; --th-texte: #F3E3DA; --th-texte-2: #C7ABA4; --th-texte-3: #AE948E; --th-trait: 140,112,110; --th-accent: #E4675A; --th-accent-clair: #F5A894; --th-accent-doux: #CE8478; --th-accent-fort: #F08172; --th-accent-rgb: 228,103,90; --th-sur-accent: #0C0A12; --th-sur-plein: #111111; --th-second: #E0A85A; --th-second-clair: #F0CC94; --th-second-rgb: 224,168,90; --th-succes: #6FC28E; --th-alerte: #E8B95E; --th-danger: #F0838C; --th-danger-rgb: 240,131,140; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #E4675A; --th-logo-halo: var(--th-accent); } [data-theme="shinjuku"] { /* Shinjuku */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22n1%22%20cx%3D%22.5%22%20cy%3D%22.5%22%20r%3D%22.5%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FF5FA8%22%20stop-opacity%3D%22.9%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%23E43D8C%22%20stop-opacity%3D%22.34%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E43D8C%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22n2%22%20cx%3D%22.5%22%20cy%3D%22.5%22%20r%3D%22.5%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237BF0F8%22%20stop-opacity%3D%22.85%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%232FD6E0%22%20stop-opacity%3D%22.3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232FD6E0%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22n3%22%20cx%3D%22.5%22%20cy%3D%22.5%22%20r%3D%22.5%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23B49BFF%22%20stop-opacity%3D%22.8%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%237B5CF0%22%20stop-opacity%3D%22.28%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237B5CF0%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22n4%22%20cx%3D%22.5%22%20cy%3D%22.5%22%20r%3D%22.5%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFE07A%22%20stop-opacity%3D%22.8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F2C94C%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22sk%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230A0718%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23150B24%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230C0716%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23sk%29%22%2F%3E%3Cg%20opacity%3D%220.17%22%3E%3Cellipse%20cx%3D%22170%22%20cy%3D%22190%22%20rx%3D%22190%22%20ry%3D%22210%22%20fill%3D%22url%28%23n1%29%22%2F%3E%3Cellipse%20cx%3D%22120%22%20cy%3D%22470%22%20rx%3D%22160%22%20ry%3D%22180%22%20fill%3D%22url%28%23n2%29%22%2F%3E%3Cellipse%20cx%3D%22230%22%20cy%3D%22700%22%20rx%3D%22150%22%20ry%3D%22150%22%20fill%3D%22url%28%23n3%29%22%2F%3E%3Cellipse%20cx%3D%221440%22%20cy%3D%22200%22%20rx%3D%22180%22%20ry%3D%22200%22%20fill%3D%22url%28%23n2%29%22%2F%3E%3Cellipse%20cx%3D%221500%22%20cy%3D%22490%22%20rx%3D%22160%22%20ry%3D%22180%22%20fill%3D%22url%28%23n1%29%22%2F%3E%3Cellipse%20cx%3D%221380%22%20cy%3D%22720%22%20rx%3D%22150%22%20ry%3D%22150%22%20fill%3D%22url%28%23n4%29%22%2F%3E%3Cellipse%20cx%3D%22620%22%20cy%3D%22230%22%20rx%3D%22150%22%20ry%3D%22160%22%20fill%3D%22url%28%23n3%29%22%2F%3E%3Cellipse%20cx%3D%22990%22%20cy%3D%22250%22%20rx%3D%22150%22%20ry%3D%22160%22%20fill%3D%22url%28%23n1%29%22%2F%3E%3Cellipse%20cx%3D%22800%22%20cy%3D%22430%22%20rx%3D%22180%22%20ry%3D%22140%22%20fill%3D%22url%28%23n4%29%22%2F%3E%3Cg%20fill%3D%22%2309061A%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M0%200h260v640H0zM300%2040h180v600H300zM1120%2040h180v600h-180zM1340%200h260v640h-260z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230C0820%22%20opacity%3D%22.45%22%3E%3Cpath%20d%3D%22M520%20120h240v520H520zM840%20120h240v520H840z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23FF7DBB%22%20stroke-width%3D%2210%22%20fill%3D%22none%22%20opacity%3D%22.55%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M60%20130q50-46%20100%200t100%200%22%2F%3E%3Cpath%20d%3D%22M50%20210h210M90%20270h140%22%2F%3E%3Cpath%20d%3D%22M60%20400q40%2050%200%20100M140%20400q60%2040%200%20100M220%20400q30%2060%200%20100%22%2F%3E%3Cpath%20d%3D%22M70%20620q60-40%20120%200t100-10%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%237BF0F8%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20opacity%3D%22.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M1360%20140q46%2054%200%20108t0%2096%22%2F%3E%3Cpath%20d%3D%22M1470%20150q-40%2066%200%20130%22%2F%3E%3Cpath%20d%3D%22M1350%20420h200M1380%20480h150M1400%20540h110%22%2F%3E%3Cpath%20d%3D%22M1330%20660q70-44%20140%200%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23C3AEFF%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20opacity%3D%22.45%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M560%20180q70-34%20140%200M580%20250q60%2034%20120%200M600%20320h100M920%20180q70-34%20140%200M940%20250q60%2034%20120%200M960%20320h100%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23FFE9A0%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20opacity%3D%22.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M700%20430q100-36%20200%200M730%20490h140%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23FFE9A0%22%20opacity%3D%22.45%22%3E%3Ccircle%20cx%3D%22380%22%20cy%3D%22120%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%22430%22%20cy%3D%22180%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%22360%22%20cy%3D%22250%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22330%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%22390%22%20cy%3D%22430%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22440%22%20cy%3D%22520%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%221150%22%20cy%3D%22130%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%221210%22%20cy%3D%22200%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%221140%22%20cy%3D%22290%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%221220%22%20cy%3D%22380%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%221160%22%20cy%3D%22480%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%221210%22%20cy%3D%22560%22%20r%3D%226%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%20640h1600v260H0z%22%20fill%3D%22%23090614%22%2F%3E%3Cg%20fill%3D%22%23E43D8C%22%20opacity%3D%22.2%22%3E%3Cellipse%20cx%3D%22170%22%20cy%3D%22700%22%20rx%3D%22200%22%20ry%3D%2246%22%2F%3E%3Cellipse%20cx%3D%221500%22%20cy%3D%22720%22%20rx%3D%22180%22%20ry%3D%2242%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%232FD6E0%22%20opacity%3D%22.18%22%3E%3Cellipse%20cx%3D%22120%22%20cy%3D%22800%22%20rx%3D%22180%22%20ry%3D%2242%22%2F%3E%3Cellipse%20cx%3D%221440%22%20cy%3D%22690%22%20rx%3D%22190%22%20ry%3D%2244%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237B5CF0%22%20opacity%3D%22.18%22%3E%3Cellipse%20cx%3D%22620%22%20cy%3D%22710%22%20rx%3D%22180%22%20ry%3D%2242%22%2F%3E%3Cellipse%20cx%3D%22230%22%20cy%3D%22870%22%20rx%3D%22160%22%20ry%3D%2236%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F2C94C%22%20opacity%3D%22.15%22%3E%3Cellipse%20cx%3D%22900%22%20cy%3D%22770%22%20rx%3D%22220%22%20ry%3D%2248%22%2F%3E%3Cellipse%20cx%3D%221300%22%20cy%3D%22860%22%20rx%3D%22180%22%20ry%3D%2238%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230F0C1E%22%20opacity%3D%22.9%22%3E%3Cpath%20d%3D%22M300%20690q-84-100%200-114t84%20114z%22%2F%3E%3Cpath%20d%3D%22M342%20694v104%22%20stroke%3D%22%230F0C1E%22%20stroke-width%3D%228%22%2F%3E%3Cpath%20d%3D%22M328%20798q16%2040%200%2070h30q-16-30%200-70z%22%2F%3E%3Cpath%20d%3D%22M560%20720q-70-84%200-96t70%2096z%22%2F%3E%3Cpath%20d%3D%22M595%20724v92%22%20stroke%3D%22%230F0C1E%22%20stroke-width%3D%227%22%2F%3E%3Cpath%20d%3D%22M583%20816q14%2034%200%2060h26q-14-26%200-60z%22%2F%3E%3Cpath%20d%3D%22M1020%20700q-76-92%200-104t76%20104z%22%2F%3E%3Cpath%20d%3D%22M1058%20704v100%22%20stroke%3D%22%230F0C1E%22%20stroke-width%3D%228%22%2F%3E%3Cpath%20d%3D%22M1045%20804q15%2036%200%2066h28q-15-28%200-66z%22%2F%3E%3Cpath%20d%3D%22M1260%20730q-62-74%200-86t62%2086z%22%2F%3E%3Cpath%20d%3D%22M1291%20734v84%22%20stroke%3D%22%230F0C1E%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M1280%20818q12%2030%200%2054h24q-12-24%200-54z%22%2F%3E%3Cpath%20d%3D%22M810%20748q-56-68%200-78t56%2078z%22%2F%3E%3Cpath%20d%3D%22M838%20752v76%22%20stroke%3D%22%230F0C1E%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M828%20828q11%2028%200%2048h22q-11-20%200-48z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23CFE3F2%22%20stroke-width%3D%222.5%22%20opacity%3D%22.17%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M60%200l-56%20900M180%200l-56%20900M300%200l-56%20900M420%200l-56%20900M540%200l-56%20900M660%200l-56%20900M780%200l-56%20900M900%200l-56%20900M1020%200l-56%20900M1140%200l-56%20900M1260%200l-56%20900M1380%200l-56%20900M1500%200l-56%20900M1620%200l-56%20900%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23CFE3F2%22%20stroke-width%3D%222%22%20opacity%3D%22.1%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M120%200l-40%20900M360%200l-40%20900M600%200l-40%20900M840%200l-40%20900M1080%200l-40%20900M1320%200l-40%20900M1560%200l-40%20900%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(251,168,206,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(162,236,242,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(251,168,206,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(162,236,242,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(251,168,206,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(162,236,242,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(251,168,206,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(162,236,242,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(251,168,206,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(240,98,166,.13) 0%, rgba(8,6,20,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(79,216,226,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(240,98,166,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(240,98,166,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.6; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #080614; --th-panneau: #150F28; --th-carte: #211838; --th-fond-rgb: 8,6,20; --th-panneau-rgb: 21,15,40; --th-texte: #EFE6F8; --th-texte-2: #B9A8CE; --th-texte-3: #9E8CB6; --th-trait: 128,110,158; --th-accent: #F062A6; --th-accent-clair: #FBA8CE; --th-accent-doux: #D287B0; --th-accent-fort: #FA80BA; --th-accent-rgb: 240,98,166; --th-sur-accent: #080614; --th-sur-plein: #111111; --th-second: #4FD8E2; --th-second-clair: #A2ECF2; --th-second-rgb: 79,216,226; --th-succes: #5ED8B0; --th-alerte: #F2C94C; --th-danger: #FF7C8E; --th-danger-rgb: 255,124,142; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #F062A6; --th-logo-halo: var(--th-accent); } [data-theme="cyclades"] { /* Cyclades */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23BEDBEF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23EEF6FA%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.24%22%3E%3Ccircle%20cx%3D%221350%22%20cy%3D%22160%22%20r%3D%2274%22%20fill%3D%22%23FBEFC9%22%2F%3E%3Cpath%20d%3D%22M0%20580h1600v320H0z%22%20fill%3D%22%232E7FB2%22%2F%3E%3Cpath%20d%3D%22M0%20580h1600v110H0z%22%20fill%3D%22%233F98C7%22%2F%3E%3Cg%20stroke%3D%22%23EAF4FA%22%20stroke-width%3D%225%22%20opacity%3D%22.45%22%3E%3Cpath%20d%3D%22M100%20640h200M480%20700h270M940%20660h240M1270%20760h250M300%20810h360M760%20850h420%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23FCFCFA%22%3E%3Cpath%20d%3D%22M60%20380h210v200H60zM290%20320h170v260H290zM480%20410h150v170H480zM660%20350h200v230H660zM890%20430h140v150H890zM1060%20360h190v220h-190zM1280%20440h170v140h-170z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23E2E7E2%22%3E%3Cpath%20d%3D%22M60%20380h210v18H60zM290%20320h170v18H290zM660%20350h200v18H660zM1060%20360h190v18h-190z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M290%20320a85%2062%200%2001170%200z%22%20fill%3D%22%231E6FA8%22%2F%3E%3Cpath%20d%3D%22M660%20350a100%2072%200%2001200%200z%22%20fill%3D%22%231E6FA8%22%2F%3E%3Cpath%20d%3D%22M1060%20360a95%2068%200%2001190%200z%22%20fill%3D%22%232A83BE%22%2F%3E%3Cg%20fill%3D%22%231E6FA8%22%3E%3Cpath%20d%3D%22M120%20460h36v52h-36zM200%20460h36v52h-36zM530%20470h36v52h-36zM930%20490h34v50h-34zM1330%20490h34v50h-34zM1390%20490h34v50h-34zM720%20470h36v52h-36zM800%20470h36v52h-36z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23C4CFC7%22%20stroke-width%3D%227%22%3E%3Cpath%20d%3D%22M480%20410v-90M556%20320h-152M518%20320v50%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23D8A0B4%22%20opacity%3D%22.8%22%3E%3Ccircle%20cx%3D%22352%22%20cy%3D%22530%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%22392%22%20cy%3D%22552%22%20r%3D%2217%22%2F%3E%3Ccircle%20cx%3D%22322%22%20cy%3D%22558%22%20r%3D%2215%22%2F%3E%3Ccircle%20cx%3D%221198%22%20cy%3D%22520%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%221236%22%20cy%3D%22546%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%221166%22%20cy%3D%22552%22%20r%3D%2214%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23FCFCFA%22%20opacity%3D%22.9%22%3E%3Cpath%20d%3D%22M0%20560h1600v22H0z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(11,68,104,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(122,52,80,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(11,68,104,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(122,52,80,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(11,68,104,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(122,52,80,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(11,68,104,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(122,52,80,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(11,68,104,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(18,96,143,.13) 0%, rgba(238,245,250,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(158,74,102,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(18,96,143,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(18,96,143,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.4; --th-surface-force: 2.0; --th-voile: 0,0,0; --th-ombre: 0,0,0; --th-fond: #EEF5FA; --th-panneau: #FAFCFE; --th-carte: #FFFFFF; --th-fond-rgb: 238,245,250; --th-panneau-rgb: 250,252,254; --th-texte: #12303F; --th-texte-2: #33505F; --th-texte-3: #405A6A; --th-trait: 120,148,166; --th-accent: #12608F; --th-accent-clair: #0B4468; --th-accent-doux: #3A7CA5; --th-accent-fort: #0E5480; --th-accent-rgb: 18,96,143; --th-sur-accent: #FFFFFF; --th-sur-plein: #FFFFFF; --th-second: #9E4A66; --th-second-clair: #7A3450; --th-second-rgb: 158,74,102; --th-succes: #1F6448; --th-alerte: #7A5008; --th-danger: #9C2C34; --th-danger-rgb: 156,44,52; --th-rayon-micro: 4px; --th-rayon-xs: 8px; --th-rayon-sm: 10px; --th-rayon-md: 12px; --th-rayon-lg: 14px; --th-rayon-carte: 16px; --th-rayon-panneau: 22px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #12608F; --th-logo-halo: var(--th-accent); } [data-theme="medina"] { /* Médina */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23E7B679%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F7E0BD%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.21%22%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22300%22%20r%3D%22130%22%20fill%3D%22%23F9DCA6%22%20opacity%3D%22.8%22%2F%3E%3Cg%20fill%3D%22%23B65A34%22%3E%3Cpath%20d%3D%22M60%20900V560a110%20110%200%2001220%200v340zM440%20900V520a120%20120%200%2001240%200v380zM880%20900V520a120%20120%200%2001240%200v380zM1300%20900V560a110%20110%200%2001220%200v340z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237C3A22%22%3E%3Cpath%20d%3D%22M100%20900V620a70%2070%200%2001140%200v280zM480%20900V590a80%2080%200%2001160%200v310zM920%20900V590a80%2080%200%2001160%200v310zM1340%20900V620a70%2070%200%2001140%200v280z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%20748h1600v40H0z%22%20fill%3D%22%238E4526%22%2F%3E%3Cg%20fill%3D%22%23E0A94E%22%3E%3Cpath%20d%3D%22M20%20768l30-30%2030%2030-30%2030zM140%20768l30-30%2030%2030-30%2030zM260%20768l30-30%2030%2030-30%2030zM380%20768l30-30%2030%2030-30%2030zM500%20768l30-30%2030%2030-30%2030zM620%20768l30-30%2030%2030-30%2030zM740%20768l30-30%2030%2030-30%2030zM860%20768l30-30%2030%2030-30%2030zM980%20768l30-30%2030%2030-30%2030zM1100%20768l30-30%2030%2030-30%2030zM1220%20768l30-30%2030%2030-30%2030zM1340%20768l30-30%2030%2030-30%2030zM1460%20768l30-30%2030%2030-30%2030zM1580%20768l30-30%2030%2030-30%2030z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%20788h1600v112H0z%22%20fill%3D%22%23A8552F%22%2F%3E%3Cg%20stroke%3D%22%233E5B34%22%20stroke-width%3D%2216%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M340%20900V620M1240%20900V660%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%233E5B34%22%3E%3Cpath%20d%3D%22M340%20620q-110-40-130-120%2090%2010%20130%2080zM340%20620q110-40%20130-120-90%2010-130%2080zM340%20640q-100%2010-150-40%2080-30%20150%2010zM340%20640q100%2010%20150-40-80-30-150%2010zM1240%20660q-90-30-110-100%2076%2010%20110%2066zM1240%20660q90-30%20110-100-76%2010-110%2066zM1240%20678q-80%2010-120-30%2066-24%20120%208zM1240%20678q80%2010%20120-30-66-24-120%208z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237C3A22%22%20opacity%3D%22.5%22%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%22700%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%22560%22%20cy%3D%22680%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%221000%22%20cy%3D%22680%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%221410%22%20cy%3D%22700%22%20r%3D%2216%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(94,38,16,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(58,76,40,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(94,38,16,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(58,76,40,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(94,38,16,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(58,76,40,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(94,38,16,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(58,76,40,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(94,38,16,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(166,75,36,.13) 0%, rgba(246,222,186,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(78,100,56,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(166,75,36,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(166,75,36,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.46; --th-surface-force: 2.3; --th-voile: 0,0,0; --th-ombre: 0,0,0; --th-fond: #F6DEBA; --th-panneau: #FCEFD8; --th-carte: #FFF8EA; --th-fond-rgb: 246,222,186; --th-panneau-rgb: 252,239,216; --th-texte: #3A1E10; --th-texte-2: #603520; --th-texte-3: #66391F; --th-trait: 170,134,98; --th-accent: #A64B24; --th-accent-clair: #5E2610; --th-accent-doux: #A85830; --th-accent-fort: #8E3C1A; --th-accent-rgb: 166,75,36; --th-sur-accent: #FFFFFF; --th-sur-plein: #FFFFFF; --th-second: #4E6438; --th-second-clair: #3A4C28; --th-second-rgb: 78,100,56; --th-succes: #3A6030; --th-alerte: #7A5006; --th-danger: #98281E; --th-danger-rgb: 152,40,30; --th-rayon-micro: 4px; --th-rayon-xs: 8px; --th-rayon-sm: 10px; --th-rayon-md: 12px; --th-rayon-lg: 14px; --th-rayon-carte: 16px; --th-rayon-panneau: 22px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #A64B24; --th-logo-halo: var(--th-accent); } [data-theme="velours"] { /* Velours */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22%2313251E%22%2F%3E%3Cg%20opacity%3D%220.20%22%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22%230D1A15%22%20opacity%3D%22.35%22%2F%3E%3Cg%20stroke%3D%22%231D362B%22%20stroke-width%3D%226%22%20opacity%3D%22.8%22%3E%3Cpath%20d%3D%22M200%200v900M400%200v900M600%200v900M1000%200v900M1200%200v900M1400%200v900%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M680%20840V350a120%20120%200%2001240%200v490z%22%20fill%3D%22%230A1626%22%2F%3E%3Cg%20fill%3D%22%23F0E0B0%22%20opacity%3D%22.75%22%3E%3Ccircle%20cx%3D%22750%22%20cy%3D%22300%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%22850%22%20cy%3D%22260%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22390%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%22730%22%20cy%3D%22480%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%22870%22%20cy%3D%22440%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22780%22%20cy%3D%22560%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22840%22%20cy%3D%22640%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%22710%22%20cy%3D%22620%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22862%22%20cy%3D%22330%22%20r%3D%2234%22%20fill%3D%22%23F3E6BC%22%20opacity%3D%22.62%22%2F%3E%3Cg%20stroke%3D%22%23B8913F%22%20stroke-width%3D%2213%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M680%20840V350a120%20120%200%2001240%200v490%22%2F%3E%3Cpath%20d%3D%22M800%20230v610M680%20540h240%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M480%20900V280q0-50%2050-50h30v670z%22%20fill%3D%22%233E2038%22%2F%3E%3Cpath%20d%3D%22M1120%20900V280q0-50-50-50h-30v670z%22%20fill%3D%22%233E2038%22%2F%3E%3Cpath%20d%3D%22M480%20900V280q0-50%2050-50h30v670z%22%20fill%3D%22%2354294A%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M1120%20900V280q0-50-50-50h-30v670z%22%20fill%3D%22%2354294A%22%20opacity%3D%22.5%22%2F%3E%3Cg%20stroke%3D%22%232C1728%22%20stroke-width%3D%225%22%20opacity%3D%22.65%22%3E%3Cpath%20d%3D%22M510%20230v670M534%20236v664M1090%20230v670M1066%20236v664%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%20840h1600v60H0z%22%20fill%3D%22%23091310%22%2F%3E%3Cg%20stroke%3D%22%23B8913F%22%20stroke-width%3D%228%22%20fill%3D%22none%22%20opacity%3D%22.5%22%3E%3Cpath%20d%3D%22M110%20660h220M110%20660v-40M330%20660v-40M220%20660V550%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22524%22%20r%3D%2226%22%2F%3E%3Cpath%20d%3D%22M1270%20660h220M1270%20660v-40M1490%20660v-40M1380%20660V550%22%2F%3E%3Ccircle%20cx%3D%221380%22%20cy%3D%22524%22%20r%3D%2226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F3E6BC%22%20opacity%3D%22.18%22%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22524%22%20r%3D%2270%22%2F%3E%3Ccircle%20cx%3D%221380%22%20cy%3D%22524%22%20r%3D%2270%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(232,206,146,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(199,154,190,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(232,206,146,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(199,154,190,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(232,206,146,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(199,154,190,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(232,206,146,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(199,154,190,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(232,206,146,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(201,161,85,.13) 0%, rgba(16,31,26,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(160,110,150,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(201,161,85,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(201,161,85,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.5; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #101F1A; --th-panneau: #1A3029; --th-carte: #244036; --th-fond-rgb: 16,31,26; --th-panneau-rgb: 26,48,41; --th-texte: #EDE6D2; --th-texte-2: #BDB49B; --th-texte-3: #A49B84; --th-trait: 140,138,112; --th-accent: #C9A155; --th-accent-clair: #E8CE92; --th-accent-doux: #B08F52; --th-accent-fort: #DCB86E; --th-accent-rgb: 201,161,85; --th-sur-accent: #101F1A; --th-sur-plein: #111111; --th-second: #A06E96; --th-second-clair: #C79ABE; --th-second-rgb: 160,110,150; --th-succes: #6FC095; --th-alerte: #DDB868; --th-danger: #E88C8C; --th-danger-rgb: 232,140,140; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #C9A155; --th-logo-halo: var(--th-accent); } [data-theme="marbre"] { /* Marbre */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2304050A%22%2F%3E%3Cstop%20offset%3D%22.46%22%20stop-color%3D%22%230B0D13%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%2314171E%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231E222A%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2323262D%22%2F%3E%3Cstop%20offset%3D%22.38%22%20stop-color%3D%22%237A818D%22%2F%3E%3Cstop%20offset%3D%22.64%22%20stop-color%3D%22%234E545E%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231E2128%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22s%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23161A21%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23070910%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22m%22%20cx%3D%22.5%22%20cy%3D%22.5%22%20r%3D%22.5%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23F5E3B4%22%20stop-opacity%3D%22.8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23D9B063%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.2%22%3E%3Cellipse%20cx%3D%22800%22%20cy%3D%22150%22%20rx%3D%22300%22%20ry%3D%22240%22%20fill%3D%22url%28%23m%29%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22146%22%20r%3D%2246%22%20fill%3D%22%23F2DDA8%22%20opacity%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22146%22%20r%3D%22104%22%20fill%3D%22%23F2DDA8%22%20opacity%3D%22.08%22%2F%3E%3Cg%20fill%3D%22%23C6CBD3%22%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22118%22%20r%3D%223%22%20opacity%3D%22.4%22%2F%3E%3Ccircle%20cx%3D%22520%22%20cy%3D%2280%22%20r%3D%222.4%22%20opacity%3D%22.3%22%2F%3E%3Ccircle%20cx%3D%221118%22%20cy%3D%22108%22%20r%3D%222.8%22%20opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%221372%22%20cy%3D%2270%22%20r%3D%222.4%22%20opacity%3D%22.3%22%2F%3E%3Ccircle%20cx%3D%22980%22%20cy%3D%22178%22%20r%3D%222%22%20opacity%3D%22.26%22%2F%3E%3Ccircle%20cx%3D%22380%22%20cy%3D%22222%22%20r%3D%222%22%20opacity%3D%22.24%22%2F%3E%3Ccircle%20cx%3D%22660%22%20cy%3D%22150%22%20r%3D%221.8%22%20opacity%3D%22.22%22%2F%3E%3Ccircle%20cx%3D%221240%22%20cy%3D%22240%22%20r%3D%221.8%22%20opacity%3D%22.22%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%20620h1600v280H0z%22%20fill%3D%22url%28%23s%29%22%2F%3E%3Cpath%20d%3D%22M800%20620L1600%20764v136H800z%22%20fill%3D%22%2312151C%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M800%20620L0%20764v136h800z%22%20fill%3D%22%230F1218%22%20opacity%3D%22.55%22%2F%3E%3Cg%20stroke%3D%22%23C6CBD3%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20opacity%3D%22.07%22%3E%3Cpath%20d%3D%22M800%20620L96%20900M800%20620L392%20900M800%20620L1208%20900M800%20620L1504%20900%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23C6CBD3%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20opacity%3D%22.12%22%3E%3Cpath%20d%3D%22M0%20686h1600M0%20754h1600M0%20838h1600%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M764%20620h72l46%20280h-164z%22%20fill%3D%22%23F2DDA8%22%20opacity%3D%22.1%22%2F%3E%3Cpath%20d%3D%22M0%20614h1600v10H0z%22%20fill%3D%22%23C6CBD3%22%20opacity%3D%22.1%22%2F%3E%3Cg%3E%3Crect%20x%3D%2246%22%20y%3D%22146%22%20width%3D%22120%22%20height%3D%22474%22%20fill%3D%22url%28%23c%29%22%2F%3E%3Crect%20x%3D%22232%22%20y%3D%22184%22%20width%3D%2298%22%20height%3D%22436%22%20fill%3D%22url%28%23c%29%22%20opacity%3D%22.88%22%2F%3E%3Crect%20x%3D%221270%22%20y%3D%22184%22%20width%3D%2298%22%20height%3D%22436%22%20fill%3D%22url%28%23c%29%22%20opacity%3D%22.88%22%2F%3E%3Crect%20x%3D%221434%22%20y%3D%22146%22%20width%3D%22120%22%20height%3D%22474%22%20fill%3D%22url%28%23c%29%22%2F%3E%3Cg%20fill%3D%22%23868D98%22%20opacity%3D%22.5%22%3E%3Crect%20x%3D%2230%22%20y%3D%22114%22%20width%3D%22152%22%20height%3D%2234%22%2F%3E%3Crect%20x%3D%22218%22%20y%3D%22156%22%20width%3D%22126%22%20height%3D%2230%22%2F%3E%3Crect%20x%3D%221256%22%20y%3D%22156%22%20width%3D%22126%22%20height%3D%2230%22%2F%3E%3Crect%20x%3D%221418%22%20y%3D%22114%22%20width%3D%22152%22%20height%3D%2234%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%235A606A%22%20opacity%3D%22.46%22%3E%3Crect%20x%3D%2230%22%20y%3D%22602%22%20width%3D%22152%22%20height%3D%2226%22%2F%3E%3Crect%20x%3D%22218%22%20y%3D%22600%22%20width%3D%22126%22%20height%3D%2222%22%2F%3E%3Crect%20x%3D%221256%22%20y%3D%22600%22%20width%3D%22126%22%20height%3D%2222%22%2F%3E%3Crect%20x%3D%221418%22%20y%3D%22602%22%20width%3D%22152%22%20height%3D%2226%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23EAEDF1%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%20opacity%3D%22.18%22%3E%3Cpath%20d%3D%22M84%20156q24%2092-4%20182t16%20200%22%2F%3E%3Cpath%20d%3D%22M132%20168q-18%20122%208%20222t-8%20198%22%2F%3E%3Cpath%20d%3D%22M266%20194q20%20100-6%20190t12%20190%22%2F%3E%3Cpath%20d%3D%22M310%20202q-12%20108%206%20198t-10%20186%22%2F%3E%3Cpath%20d%3D%22M1300%20194q-16%20110%206%20200t-8%20180%22%2F%3E%3Cpath%20d%3D%22M1344%20204q14%2096-8%20188t10%20192%22%2F%3E%3Cpath%20d%3D%22M1470%20156q22%2096-6%20186t14%20194%22%2F%3E%3Cpath%20d%3D%22M1518%20170q-16%20116%206%20214t-4%20194%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23C6CBD3%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%20opacity%3D%22.1%22%3E%3Cpath%20d%3D%22M108%20150v470M290%20188v432M1322%20188v432M1496%20150v470%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%236E7480%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20opacity%3D%22.3%22%3E%3Cpath%20d%3D%22M106%20150q112-92%20224%200%22%2F%3E%3Cpath%20d%3D%22M1322%20150q112-92%20224%200%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%2092h1600v26H0z%22%20fill%3D%22%23D9B063%22%20opacity%3D%22.26%22%2F%3E%3Cpath%20d%3D%22M0%20126h1600v5H0z%22%20fill%3D%22%23F2DDA8%22%20opacity%3D%22.2%22%2F%3E%3Cg%20fill%3D%22%23D9B063%22%20opacity%3D%22.22%22%3E%3Cpath%20d%3D%22M106%2054l26%2038H80zM1494%2054l26%2038h-52zM800%2038l32%2054h-64z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23D9B063%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20opacity%3D%22.16%22%3E%3Cpath%20d%3D%22M300%2078h1000M360%2062h880%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(242,221,168,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(199,205,214,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(242,221,168,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(199,205,214,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(242,221,168,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(199,205,214,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(242,221,168,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(199,205,214,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(242,221,168,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(217,176,99,.13) 0%, rgba(7,8,10,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(154,161,172,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(217,176,99,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(217,176,99,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.5; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #07080A; --th-panneau: #101318; --th-carte: #171B21; --th-fond-rgb: 7,8,10; --th-panneau-rgb: 16,19,24; --th-texte: #ECEAE5; --th-texte-2: #B9BEC7; --th-texte-3: #9AA1AC; --th-trait: 150,156,166; --th-accent: #D9B063; --th-accent-clair: #F2DDA8; --th-accent-doux: #B8934F; --th-accent-fort: #E8C87E; --th-accent-rgb: 217,176,99; --th-sur-accent: #07080A; --th-sur-plein: #111111; --th-second: #9AA1AC; --th-second-clair: #C7CDD6; --th-second-rgb: 154,161,172; --th-succes: #6BC49B; --th-alerte: #E0BE74; --th-danger: #E88F8A; --th-danger-rgb: 232,143,138; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #D9B063; --th-logo-halo: var(--th-accent); } [data-theme="brume"] { /* Brume */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23070809%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23111316%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2322262B%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22e%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231B1F24%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230A0C0E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.22%22%3E%3Cpath%20d%3D%22M0%20900V520h1600v380z%22%20fill%3D%22url%28%23e%29%22%2F%3E%3Cpath%20d%3D%22M0%20508h1600v14H0z%22%20fill%3D%22%237E858F%22%20opacity%3D%22.5%22%2F%3E%3Cg%20fill%3D%22%235B626B%22%20opacity%3D%22.55%22%3E%3Crect%20x%3D%22352%22%20y%3D%22150%22%20width%3D%2234%22%20height%3D%22360%22%2F%3E%3Crect%20x%3D%22416%22%20y%3D%22150%22%20width%3D%2234%22%20height%3D%22360%22%2F%3E%3Crect%20x%3D%221150%22%20y%3D%22150%22%20width%3D%2234%22%20height%3D%22360%22%2F%3E%3Crect%20x%3D%221214%22%20y%3D%22150%22%20width%3D%2234%22%20height%3D%22360%22%2F%3E%3Crect%20x%3D%22340%22%20y%3D%22236%22%20width%3D%22122%22%20height%3D%2216%22%2F%3E%3Crect%20x%3D%221138%22%20y%3D%22236%22%20width%3D%22122%22%20height%3D%2216%22%2F%3E%3Crect%20x%3D%22340%22%20y%3D%22150%22%20width%3D%22122%22%20height%3D%2218%22%2F%3E%3Crect%20x%3D%221138%22%20y%3D%22150%22%20width%3D%22122%22%20height%3D%2218%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%238A9199%22%20stroke-width%3D%225%22%20fill%3D%22none%22%20opacity%3D%22.42%22%3E%3Cpath%20d%3D%22M0%20300q200%2060%20402%20-132M402%20168q396%20300%20794%200M1196%20168q200%20192%20404%20132%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%238A9199%22%20stroke-width%3D%222%22%20opacity%3D%22.22%22%3E%3Cpath%20d%3D%22M120%20340v168M240%20372v136M540%20300v208M700%20400v108M900%20400v108M1060%20300v208M1360%20372v136M1480%20340v168%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23C6CBD3%22%3E%3Crect%20y%3D%22430%22%20width%3D%221600%22%20height%3D%2290%22%20opacity%3D%22.07%22%2F%3E%3Crect%20y%3D%22330%22%20width%3D%221600%22%20height%3D%2260%22%20opacity%3D%22.05%22%2F%3E%3Crect%20y%3D%22560%22%20width%3D%221600%22%20height%3D%22120%22%20opacity%3D%22.06%22%2F%3E%3Crect%20y%3D%22700%22%20width%3D%221600%22%20height%3D%22160%22%20opacity%3D%22.05%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23E4E7EB%22%20opacity%3D%22.05%22%3E%3Cellipse%20cx%3D%22300%22%20cy%3D%22470%22%20rx%3D%22420%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%221250%22%20cy%3D%22500%22%20rx%3D%22460%22%20ry%3D%2280%22%2F%3E%3Cellipse%20cx%3D%22800%22%20cy%3D%22620%22%20rx%3D%22560%22%20ry%3D%2290%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23C6CBD3%22%20stroke-width%3D%222%22%20opacity%3D%22.1%22%3E%3Cpath%20d%3D%22M0%20640h1600M0%20720h1600M0%20812h1600%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(228,231,235,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(170,177,186,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(228,231,235,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(170,177,186,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(228,231,235,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(170,177,186,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(228,231,235,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(170,177,186,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(228,231,235,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(194,199,206,.13) 0%, rgba(11,12,14,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(126,133,143,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(194,199,206,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(194,199,206,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.45; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #0B0C0E; --th-panneau: #14161A; --th-carte: #1B1E23; --th-fond-rgb: 11,12,14; --th-panneau-rgb: 20,22,26; --th-texte: #E9EBEE; --th-texte-2: #B5BAC1; --th-texte-3: #969CA5; --th-trait: 150,156,166; --th-accent: #C2C7CE; --th-accent-clair: #E4E7EB; --th-accent-doux: #989EA7; --th-accent-fort: #D6DAE0; --th-accent-rgb: 194,199,206; --th-sur-accent: #0B0C0E; --th-sur-plein: #111111; --th-second: #7E858F; --th-second-clair: #AAB1BA; --th-second-rgb: 126,133,143; --th-succes: #7FC0A0; --th-alerte: #D8C07E; --th-danger: #DE9490; --th-danger-rgb: 222,148,144; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #C2C7CE; --th-logo-halo: var(--th-accent); } [data-theme="lavande"] { /* Lavande */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230B0716%22%2F%3E%3Cstop%20offset%3D%22.38%22%20stop-color%3D%22%231A0E2E%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%232E1A46%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233C2450%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22s%22%20cx%3D%22.5%22%20cy%3D%22.5%22%20r%3D%22.5%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23F3C9A8%22%20stop-opacity%3D%22.7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23A472F0%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.26%22%3E%3Cellipse%20cx%3D%22800%22%20cy%3D%22470%22%20rx%3D%22420%22%20ry%3D%22200%22%20fill%3D%22url%28%23s%29%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22474%22%20r%3D%2240%22%20fill%3D%22%23F6D8B4%22%20opacity%3D%22.55%22%2F%3E%3Cg%20fill%3D%22%23D9C7F2%22%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22110%22%20r%3D%222.6%22%20opacity%3D%22.4%22%2F%3E%3Ccircle%20cx%3D%22560%22%20cy%3D%2270%22%20r%3D%222%22%20opacity%3D%22.3%22%2F%3E%3Ccircle%20cx%3D%221080%22%20cy%3D%22120%22%20r%3D%222.4%22%20opacity%3D%22.35%22%2F%3E%3Ccircle%20cx%3D%221400%22%20cy%3D%2280%22%20r%3D%222%22%20opacity%3D%22.3%22%2F%3E%3Ccircle%20cx%3D%22900%22%20cy%3D%22180%22%20r%3D%221.8%22%20opacity%3D%22.25%22%2F%3E%3Ccircle%20cx%3D%22380%22%20cy%3D%22200%22%20r%3D%221.8%22%20opacity%3D%22.25%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%20500h1600v400H0z%22%20fill%3D%22%23241338%22%20opacity%3D%22.8%22%2F%3E%3Cg%20fill%3D%22%237B4FC4%22%3E%3Cpath%20d%3D%22M0%20520q400-26%20800%200t800-16v34q-400%2022-800-2t-800%2018z%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M0%20578q400-30%20800%200t800-18v44q-400%2026-800-2t-800%2020z%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M0%20650q400-34%20800%200t800-20v54q-400%2030-800-2t-800%2022z%22%20opacity%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M0%20736q400-38%20800%200t800-22v64q-400%2034-800-2t-800%2024z%22%20opacity%3D%22.65%22%2F%3E%3Cpath%20d%3D%22M0%20838q400-42%20800%200t800-24v86H0z%22%20opacity%3D%22.7%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23C9A8FA%22%20opacity%3D%22.32%22%3E%3Cpath%20d%3D%22M0%20512q400-26%20800%200t800-16v8q-400%2020-800-2t-800%2016z%22%2F%3E%3Cpath%20d%3D%22M0%20570q400-30%20800%200t800-18v9q-400%2022-800-2t-800%2018z%22%2F%3E%3Cpath%20d%3D%22M0%20642q400-34%20800%200t800-20v10q-400%2026-800-2t-800%2020z%22%2F%3E%3Cpath%20d%3D%22M0%20728q400-38%20800%200t800-22v11q-400%2030-800-2t-800%2022z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%232A4038%22%20opacity%3D%22.7%22%3E%3Cpath%20d%3D%22M92%20500q-30-150%2026-250%2056%20100%2026%20250z%22%2F%3E%3Cpath%20d%3D%22M1490%20500q-26-134%2022-222%2048%2088%2022%20222z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%238FB39B%22%20stroke-width%3D%224%22%20opacity%3D%22.3%22%3E%3Cpath%20d%3D%22M118%20502V330M1512%20502V352%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(201,168,250,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(182,208,190,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(201,168,250,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(182,208,190,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(201,168,250,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(182,208,190,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(201,168,250,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(182,208,190,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(201,168,250,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(164,114,240,.13) 0%, rgba(16,10,26,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(143,179,155,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(164,114,240,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(164,114,240,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.5; --th-voile: 255,255,255; --th-ombre: 0,0,0; --th-fond: #100A1A; --th-panneau: #1C1230; --th-carte: #261A3E; --th-fond-rgb: 16,10,26; --th-panneau-rgb: 28,18,48; --th-texte: #EDE7F5; --th-texte-2: #C0B3D4; --th-texte-3: #A497BC; --th-trait: 150,132,180; --th-accent: #A472F0; --th-accent-clair: #C9A8FA; --th-accent-doux: #9264D7; --th-accent-fort: #B78BF5; --th-accent-rgb: 164,114,240; --th-sur-accent: #100A1A; --th-sur-plein: #111111; --th-second: #8FB39B; --th-second-clair: #B6D0BE; --th-second-rgb: 143,179,155; --th-succes: #6FC095; --th-alerte: #DDB868; --th-danger: #E88C8C; --th-danger-rgb: 232,140,140; --th-rayon-micro: 4px; --th-rayon-xs: 6px; --th-rayon-sm: 8px; --th-rayon-md: 8px; --th-rayon-lg: 10px; --th-rayon-carte: 10px; --th-rayon-panneau: 14px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #A472F0; --th-logo-halo: var(--th-accent); } [data-theme="colza"] { /* Colza */ --th-fond-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23DCEAF6%22%2F%3E%3Cstop%20offset%3D%22.52%22%20stop-color%3D%22%23F2F6F4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FBF6DE%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23E8DC7A%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C9A417%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20opacity%3D%220.34%22%3E%3Ccircle%20cx%3D%221290%22%20cy%3D%22150%22%20r%3D%2266%22%20fill%3D%22%23FBF3C0%22%20opacity%3D%22.8%22%2F%3E%3Cg%20fill%3D%22%23FFFFFF%22%20opacity%3D%22.7%22%3E%3Cellipse%20cx%3D%22300%22%20cy%3D%22170%22%20rx%3D%22150%22%20ry%3D%2242%22%2F%3E%3Cellipse%20cx%3D%22420%22%20cy%3D%22150%22%20rx%3D%22110%22%20ry%3D%2234%22%2F%3E%3Cellipse%20cx%3D%22980%22%20cy%3D%22130%22%20rx%3D%22130%22%20ry%3D%2236%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%20452h1600v448H0z%22%20fill%3D%22url%28%23c%29%22%20opacity%3D%22.75%22%2F%3E%3Cpath%20d%3D%22M0%20440q200-16%20400%200t400%204%20400-12%20400%206v20H0z%22%20fill%3D%22%23B9C48A%22%20opacity%3D%22.6%22%2F%3E%3Cg%20fill%3D%22%23C9A417%22%20opacity%3D%22.35%22%3E%3Cpath%20d%3D%22M0%20500q400-20%20800%204t800-12v26q-400%2020-800-4t-800%2014z%22%2F%3E%3Cpath%20d%3D%22M0%20592q400-24%20800%206t800-14v32q-400%2024-800-6t-800%2016z%22%2F%3E%3Cpath%20d%3D%22M0%20706q400-28%20800%208t800-16v40q-400%2028-800-8t-800%2018z%22%2F%3E%3Cpath%20d%3D%22M0%20838q400-32%20800%2010t800-18v70H0z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F0E48C%22%20opacity%3D%22.5%22%3E%3Cpath%20d%3D%22M0%20486q400-20%20800%204t800-12v10q-400%2018-800-4t-800%2012z%22%2F%3E%3Cpath%20d%3D%22M0%20578q400-24%20800%206t800-14v11q-400%2022-800-6t-800%2014z%22%2F%3E%3Cpath%20d%3D%22M0%20692q400-28%20800%208t800-16v12q-400%2026-800-8t-800%2016z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%235E7A4E%22%20opacity%3D%22.55%22%3E%3Cellipse%20cx%3D%22120%22%20cy%3D%22410%22%20rx%3D%2270%22%20ry%3D%2246%22%2F%3E%3Cellipse%20cx%3D%22230%22%20cy%3D%22424%22%20rx%3D%2252%22%20ry%3D%2232%22%2F%3E%3Cellipse%20cx%3D%221430%22%20cy%3D%22404%22%20rx%3D%2280%22%20ry%3D%2250%22%2F%3E%3Cellipse%20cx%3D%221320%22%20cy%3D%22424%22%20rx%3D%2254%22%20ry%3D%2232%22%2F%3E%3Cellipse%20cx%3D%221520%22%20cy%3D%22428%22%20rx%3D%2246%22%20ry%3D%2228%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%234A6140%22%20stroke-width%3D%227%22%20opacity%3D%22.5%22%3E%3Cpath%20d%3D%22M120%20452v-30M1430%20452v-34%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; --th-decor-loin: radial-gradient(1.5px 1.5px at 18% 34%, rgba(94,86,0,0.4), transparent 60%),radial-gradient(2px 2px at 61% 22%, rgba(46,81,62,0.36), transparent 60%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(94,86,0,0.32), transparent 60%),radial-gradient(2px 2px at 82% 54%, rgba(46,81,62,0.34), transparent 60%),radial-gradient(1.5px 1.5px at 12% 80%, rgba(94,86,0,0.28), transparent 60%),radial-gradient(2.5px 2.5px at 70% 84%, rgba(46,81,62,0.3), transparent 60%),radial-gradient(1.5px 1.5px at 47% 12%, rgba(94,86,0,0.26), transparent 60%),radial-gradient(2px 2px at 28% 52%, rgba(46,81,62,0.24), transparent 60%),radial-gradient(1.5px 1.5px at 90% 30%, rgba(94,86,0,0.28), transparent 60%); --th-decor-pres: linear-gradient(178deg, rgba(124,114,0,.13) 0%, rgba(250,247,232,0) 44%),radial-gradient(60% 30% at 24% -6%, rgba(63,107,84,.14), transparent 70%),radial-gradient(40% 24% at 72% -4%, rgba(124,114,0,.10), transparent 70%),repeating-linear-gradient(96deg, rgba(124,114,0,.04) 0 3px, transparent 3px 26px); --th-ambiance: 0.4; --th-surface-force: 2.1; --th-voile: 0,0,0; --th-ombre: 0,0,0; --th-fond: #FAF7E8; --th-panneau: #FEFDF6; --th-carte: #FFFFFC; --th-fond-rgb: 250,247,232; --th-panneau-rgb: 254,253,246; --th-texte: #241F08; --th-texte-2: #4A4114; --th-texte-3: #5A5020; --th-trait: 150,142,100; --th-accent: #7C7200; --th-accent-clair: #5E5600; --th-accent-doux: #82781A; --th-accent-fort: #6B6300; --th-accent-rgb: 124,114,0; --th-sur-accent: #FFFFFF; --th-sur-plein: #FFFFFF; --th-second: #3F6B54; --th-second-clair: #2E513E; --th-second-rgb: 63,107,84; --th-succes: #2F6B45; --th-alerte: #8A5A08; --th-danger: #A32620; --th-danger-rgb: 163,38,32; --th-rayon-micro: 4px; --th-rayon-xs: 8px; --th-rayon-sm: 10px; --th-rayon-md: 12px; --th-rayon-lg: 14px; --th-rayon-carte: 16px; --th-rayon-panneau: 22px; --th-police: system-ui, -apple-system, sans-serif; --th-police-titre: system-ui, -apple-system, sans-serif; --th-logo-coeur: #7C7200; --th-logo-halo: var(--th-accent); } /* ▲▲ FIN DES DÉCORS GÉNÉRÉS ▲▲ */ /* Réglages et serveur (Paramètres) : la pile de groupes. Une seule règle neuve pour ces deux volets — la respiration des volets Paramètres, réutilisée telle quelle. */ .rg-pile { display: flex; flex-direction: column; gap: var(--e-16); } /* Panneau Machines : la commande d'installation d'un VDS, prête à copier. */ .mac-cmd { display: flex; flex-direction: column; gap: var(--e-8); } /* Retirer un VDS : le geste vit au pied du détail, séparé du reste par un filet. */ .mac-retrait { display: flex; flex-direction: column; gap: var(--e-8); align-items: flex-start; margin-top: var(--e-20); padding-top: var(--e-16); border-top: 1px solid var(--border); } /* L'avertissement change le SENS des trois choix : il se lit avant eux, pas après. */ /* L'avertissement ne se met plus en boîte : une boîte pleine à côté de trois cartes encadrées, ça fait quatre blocs qui se disputent le regard. Un filet et du texte. */ .mac-avert { border-left: 2px solid var(--amber); padding: var(--e-2) 0 var(--e-2) var(--e-14); font-size: var(--t-meta); color: var(--text-3); line-height: var(--lh-normal); } .mac-choix { display: flex; flex-direction: column; gap: var(--e-8); } .mac-choix { gap: var(--e-6); } .mac-ch { display: flex; gap: var(--e-12); align-items: baseline; cursor: pointer; border: 1px solid transparent; border-radius: var(--r-sm); padding: var(--e-12) var(--e-14); transition: var(--transi); } .mac-ch:hover { background: var(--bg-hover); } .mac-ch.on { border-color: var(--accent); background: rgba(var(--th-accent-rgb), .05); } .mac-ch .ct { display: block; font-size: var(--t-small); font-weight: var(--fw-fort); color: var(--text); } .mac-ch .cs { display: block; font-size: var(--t-meta); color: var(--text-3); line-height: var(--lh-normal); margin-top: var(--e-4); } /* ⚠️ LES DESTINATIONS ÉTAIENT ENTASSÉES : nom, machine, charge et verdict sur une seule ligne, en quatre morceaux qui se disputaient la largeur. Deux lignes suffisent — le nom et son verdict en haut, ce qui la décrit en dessous, en gris. */ .mac-accs { display: flex; flex-direction: column; gap: var(--e-8); } .mac-acc { display: grid; grid-template-columns: 1fr auto; gap: var(--e-4) var(--e-16); align-items: baseline; text-align: left; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--e-14) var(--e-16); font-family: inherit; transition: var(--transi); } .mac-acc:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-hover); } .mac-acc.on { border-color: var(--accent); background: rgba(var(--th-accent-rgb), .05); } .mac-acc.no, .mac-acc:disabled { opacity: .45; cursor: not-allowed; } .mac-acc .an { font-size: var(--t-small); font-weight: var(--fw-fort); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .mac-acc .av { font-size: var(--t-meta); color: var(--text-3); text-align: right; white-space: nowrap; } .mac-acc .av.ok { color: var(--green); } .mac-acc .ac { grid-column: 1 / -1; font-size: var(--t-meta); color: var(--text-3); } /* Le compteur du haut : une ligne, et le bouton de remise à zéro dans son fil. */ .mac-mig-cpt { display: flex; align-items: center; gap: var(--e-12); margin: 0; font-size: var(--t-small); color: var(--text-2); } .mac-pre { margin: 0; padding: var(--e-12) var(--e-14); background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius-xs); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-meta); color: var(--text); line-height: var(--lh-normal); white-space: pre-wrap; word-break: break-all; overflow-x: auto; } /* ═══ LE RANG « LES VENDEUSES » — une LANGUETTE par compte ═══════════════════ Amadou (22/08) : « on ne va pas prendre un compte par ligne, on peut en entasser ; il faut que ça soit responsive, j'ai un grand écran et aussi un écran de PC portable ». ⚠️ MÊME MÉCANISME QUE LA BIBLIOTHÈQUE — `auto-fill` + `minmax`. Aucun palier à écrire, aucune largeur d'écran à deviner : la grille compte elle-même combien de languettes tiennent. Mesuré sur sa mise en page (barre latérale 232 px + 2 × 32 px de marge) : 3 par ligne sur un portable 1280, 6 sur un 1920, 9 sur un 2560. ⚠️ La largeur vient de `--cp-lg-w`, posée par le JS depuis `_CP_LANGUETTE`. Elle n'est PAS écrite ici : deux nombres pour une même mesure finissent toujours par diverger. ⚠️ Aucune valeur brute : tout vient de la bibliothèque de jetons (--e-*, --r-*, --t-*). */ .cok-cp-filter.on { border-color: var(--violet-mid); background: var(--violet-tint); color: var(--text-1); } .cp-vend-zone { display: block; } /* Le bandeau : cinq chiffres, et c'est aussi le filtre. ⚠️ Un résumé en haut et des filtres ailleurs finiraient par se contredire — la barre d'avant annonçait « Toutes 10 » au-dessus de « 0 + 5 + 0 ». Un seul objet, une seule vérité. */ .cp-vie-bandeau { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--e-40), 1fr)); gap: var(--e-1); background: var(--border); border: var(--e-1) solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin-bottom: var(--e-16); } .cp-vie-tuile { display: block; text-align: left; background: var(--surface); border: 0; border-top: var(--e-2) solid transparent; border-radius: 0; padding: var(--e-12) var(--e-14); font: inherit; color: var(--text); cursor: pointer; transition: var(--transi); } .cp-vie-tuile:hover { background: var(--surface-2); } .cp-vie-tuile.on { background: var(--surface-2); border-top-color: var(--cok-accent); } .cp-vie-tuile .n { display: block; font-size: var(--t-title); font-weight: var(--fw-fort); line-height: var(--lh-titre); font-variant-numeric: tabular-nums; } .cp-vie-tuile .l { display: block; font-size: var(--t-meta); color: var(--text-2); margin-top: var(--e-2); } /* ⚠️ La couleur du chiffre PORTE le sens, elle n'est pas décorative : ce qui attend est ambre, ce qui est sorti est rouge, ce qui travaille est vert. */ .cp-vie-tuile.ton-bloques .n { color: var(--amber); } .cp-vie-tuile.ton-sortis .n { color: var(--red); } .cp-vie-tuile.ton-travail .n { color: var(--green); } .cp-vie-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e-16); flex-wrap: wrap; padding: var(--e-14) var(--e-16) var(--e-8); font-size: var(--t-meta); color: var(--text-3); } /* ══ LE PARTAGE LOCAL / VDS ══════════════════════════════════════════════════ Empruntée telle quelle : la pilule de la bibliothèque (.v-btn--pilule). Rien de neuf à dessiner, donc rien de neuf à maintenir. ⚠️⚠️⚠️ LA SÉLECTION DOIT BATTRE LE SURVOL, ET ELLE NE LE FAIT PAS TOUTE SEULE. `.v-btn:hover:not(:disabled)` pèse TROIS classes ; `.cp-poste-f.on` n'en pèse que deux. Sans le `:hover` écrit ici, passer la souris sur le bouton choisi lui rendrait le fond du survol — la sélection s'éteindrait sous le doigt. C'est déjà arrivé sur cet écran (31 règles à reprendre), et c'est exactement le même piège. */ /* ⚠️ LE PANNEAU N'A PLUS DE COQUILLE (Amadou, 07/09 : « les boutons local et VDS ne doivent pas être dans la bulle »). Une bulle dans une bulle : les boutons vivaient dans le panneau qu'ils commandent, ce qui se lit « ceci appartient au VDS » alors qu'ils servent à en CHANGER. Ils sont remontés dans la barre ; le panneau ne porte plus que les cartes, et n'a donc plus besoin de se dessiner un cadre. */ .cp-poste-w { margin: 0; } /* Les deux hôtes de la barre du haut. */ .cp-barre-basc { display: flex; align-items: center; } .cp-barre-famz { display: flex; align-items: center; } /* Le bouton des familles se colle aux métriques : c'est un réglage de LECTURE, pas un élément du contenu — il appartient à la même rangée que les chiffres. */ .cp-barre-famz .cp-fam-zone { padding: 0; } .cp-poste-i { display: grid; place-items: center; flex: 0 0 auto; opacity: .75; } .cp-poste-i svg { display: block; } /* ══ CHOISIR UNE FAMILLE ═════════════════════════════════════════════════════ Le bouton est EMPRUNTÉ au « Trier » des Messages (`.cok-msg-search, .cok-msg-filtre`, plus haut dans ce fichier) : même taille, même fond, même liseré, icône à 60 %. Amadou (07/09) : « ça doit être juste un bouton avec le logo, là il est gros pour rien ». Au repos il n'a QUE son icône — « toutes les familles » est l'état par défaut, son libellé n'apprenait rien. */ .cp-fam-zone { position: relative; padding: 0 var(--e-12) var(--e-12); } .cp-fam-b { font: inherit; font-size: var(--t-meta); color: var(--cok-text); background: var(--surface-2); border: 1px solid var(--cok-border); border-radius: var(--r-sm); padding: var(--e-6) var(--e-10); display: inline-flex; align-items: center; gap: var(--e-6); cursor: pointer; white-space: nowrap; max-width: 100%; transition: border-color var(--t-bref) var(--c-pose), color var(--t-bref) var(--c-pose); } .cp-fam-b:hover { border-color: var(--border-strong); } .cp-fam-b:focus-visible { outline: none; border-color: var(--violet); } .cp-fam-b svg { flex: 0 0 auto; opacity: .6; } /* ⚠️⚠️ L'ÉTAT ACTIF EST UN LISERÉ, PAS UN APLAT. À cette taille un aplat violet redevient le gros bouton qu'on vient d'enlever — et l'aplat est déjà le langage des ONGLETS, un cran au-dessus. Un état se distingue par la FORME, pas par la teinte. */ .cp-fam-b.actif { border-color: var(--violet); color: var(--violet-light); } .cp-fam-b.actif svg { opacity: 1; } /* Icône seule : le bouton se resserre, il ne prend que sa place. */ .cp-fam-b.nu { padding: var(--e-6) var(--e-8); gap: 0; } .cp-fam-b-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cp-fam-b-n { font-variant-numeric: tabular-nums; color: var(--text-3); flex: 0 0 auto; } .cp-fam-b.actif .cp-fam-b-n { color: var(--violet-light); } .cp-fam-pop { position: absolute; z-index: 40; top: calc(100% - var(--e-8)); left: var(--e-12); width: min(22rem, calc(100% - var(--e-24))); background: var(--cok-card); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: 0 18px 44px rgba(var(--th-ombre), .55); overflow: hidden; } .cp-fam-pop[hidden] { display: none; } .cp-fam-rech { display: flex; align-items: center; gap: var(--e-8); padding: var(--e-10) var(--e-12); border-bottom: 1px solid var(--cok-border); } .cp-fam-rech svg { color: var(--text-3); flex: 0 0 auto; } .cp-fam-rech input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--cok-text); font: inherit; font-size: var(--t-base); } .cp-fam-rech input::placeholder { color: var(--text-3); } .cp-fam-liste { max-height: 17rem; overflow-y: auto; padding: var(--e-6); } .cp-fam-sec { font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); padding: var(--e-8) var(--e-8) var(--e-4); } .cp-fam-sec[hidden] { display: none; } .cp-fam-l { display: flex; align-items: center; gap: var(--e-10); width: 100%; font: inherit; text-align: left; cursor: pointer; padding: var(--e-6) var(--e-8); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); transition: background var(--t-bref) var(--c-pose), color var(--t-bref) var(--c-pose); } .cp-fam-l[hidden] { display: none; } .cp-fam-l:hover { background: var(--bg-elevated); color: var(--cok-text); } .cp-fam-l:focus-visible { outline: 2px solid var(--cok-accent); outline-offset: -2px; } .cp-fam-l-i { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; opacity: .7; } .cp-fam-l-i svg { width: 16px; height: 16px; } .cp-fam-l-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-base); } .cp-fam-l-n { font-variant-numeric: tabular-nums; font-size: var(--t-meta); color: var(--text-3); min-width: 1.2rem; text-align: right; } /* ⚠️ La sélection doit BATTRE le survol : `.cp-fam-l:hover` pèse deux classes, on écrit donc les deux, sinon la ligne choisie s'éteint sous le doigt. */ .cp-fam-l.on, .cp-fam-l.on:hover { background: var(--cok-accent-bg); color: var(--violet-light); font-weight: var(--fw-fort); } .cp-fam-l.on .cp-fam-l-i { opacity: 1; } .cp-fam-l.on .cp-fam-l-n { color: var(--violet-light); } /* Une famille vide reste ATTEIGNABLE : atténuée, jamais désactivée — on y range des comptes justement parce qu'elle est vide. */ .cp-fam-l.zero { opacity: .45; } .cp-fam-l.zero:hover { opacity: .8; } .cp-fam-rien { padding: var(--e-16) var(--e-10); color: var(--text-3); font-size: var(--t-base); text-align: center; } .cp-fam-rien[hidden] { display: none; } /* ══ LE CHOIX DE LA MACHINE, EN GRADUATION ═══════════════════════════════════ Amadou (07/09) : « les boutons local et VDS, fais mieux que ça, c'est vraiment moche… au pire tu mets les boutons en graduation comme il y a dans commande ». On emprunte donc `.cok-cmd-groups` / `.cok-cmd-grp` tels quels : un CADRE qui contient ses segments. Deux pilules côte à côte ne disaient pas qu'elles s'excluent ; le cadre le dit, et c'est déjà le langage du site pour « choisis-en un ». Ne restent ici que les écarts propres à cet emplacement. */ .cp-poste-grad { margin-bottom: 0; flex: 0 0 auto; } .cp-poste-g { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--e-8); padding: var(--e-6) var(--e-12); font-size: var(--t-meta); } /* ⚠️⚠️⚠️ L'ÉTAT CHOISI DOIT BATTRE LE SURVOL, ET ON NE COMPTE PAS SUR L'ORDRE. `.cok-cmd-grp:hover` (ligne ~22116) n'a AUCUNE garde `:not()` et pose un `background` — un raccourci, donc il efface aussi l'image de fond. C'est exactement ce qui éteignait le bouton « Litiges » au survol en août. Une règle postérieure suffirait aujourd'hui, mais elle casserait au prochain déplacement de bloc : on écrit donc le `:hover`, qui pèse une classe de plus et gagne où qu'il soit. */ .cp-poste-g.on, .cp-poste-g.on:hover { background: var(--cok-accent-bg); color: var(--cok-accent); } .cp-poste-g.on .cp-poste-i { opacity: 1; } .cp-poste-g.on .cp-poste-n, .cp-poste-g.on:hover .cp-poste-n { color: var(--cok-accent); } /* Un lieu vide reste ATTEIGNABLE : atténué, jamais désactivé — c'est en y entrant qu'on lit pourquoi il est vide. */ .cp-poste-g.vide { opacity: .55; } .cp-poste-g.vide.on { opacity: 1; } /* Le compte, collé au nom : c'est lui qu'on lit en premier. */ .cp-poste-n { font-variant-numeric: tabular-nums; font-weight: var(--fw-gras); font-size: var(--t-mini); color: var(--text-3); } /* ⚠️ Un espace VIDE reste cliquable : c'est en y entrant qu'on lit pourquoi il l'est. On l'atténue, on ne le désactive pas — un bouton mort ne s'explique jamais. */ /* ⚠️ LE VIDE SE DIT LÀ OÙ LE CONTENU AURAIT COMMENCÉ. Il était posé loin sous la barre, avec le retrait d'un gros bloc de texte : on lisait un paragraphe flottant au milieu de rien. Une ligne, à la place de la première carte. */ .cp-poste-vide { padding: var(--e-14) var(--e-16) var(--e-20); font-size: var(--t-small); color: var(--text-2); } /* La période, discrète, collée aux chiffres du pouls. */ .cp-pouls-per { font-size: var(--t-meta); color: var(--text-3); } .cp-vie-legende { display: flex; flex-wrap: wrap; gap: var(--e-20); padding: var(--e-4) var(--e-16) var(--e-16); font-size: var(--t-meta); color: var(--text-2); } .cp-vie-lg { display: inline-flex; align-items: center; gap: var(--e-6); } .cp-vie-lg .pt { width: var(--e-8); height: var(--e-8); border-radius: var(--r-micro); display: inline-block; } .cp-vie-lg.ok .pt { background: var(--green); } .cp-vie-lg.tiede .pt { background: var(--amber); } .cp-vie-lg.ko .pt { background: var(--red); } /* Où le compte va naître. ⚠️ Une ligne, pas une carte : c'est un fait qu'on lit en passant avant de cliquer, pas un panneau qu'on consulte. */ .cpl-ou { font-size: var(--t-meta); color: var(--text-2); line-height: var(--lh-serre); padding: var(--e-10) var(--e-14); margin-bottom: var(--e-12); background: var(--surface-2); border: var(--e-1) solid var(--border); border-radius: var(--r-sm); } .cpl-ou b { color: var(--text); font-weight: var(--fw-fort); } .cpl-ou .s { color: var(--text-3); } /* ⚠️ Le refus se voit AVANT le clic : c'est tout l'intérêt de cette ligne. */ .cpl-ou .ko { color: var(--amber); } /* ══ LA VIE D'UN COMPTE — UNE LIGNE, DEUX RÉPONSES ═══════════════════════════ Amadou (28/08) : « l'onglet Comptes, c'est l'aboutissement du travail. » Une ligne dit OÙ IL EN EST et CE QU'IL ATTEND. Le reste vit dans sa fiche. ⚠️ Zéro valeur brute : tout vient des jetons. La règle du 13/08 tient. */ .cp-vie-liste { display: flex; flex-direction: column; } /* ══ SES PACKS — UNE SECTION, DES PASTILLES (04/09) ═══════════════════════════ Amadou : « le bloc Ses packs est trop collé à la partie du haut et elle est trop brouillon ». ⚠️ LE COLLAGE : l'ancienne barre était une CARTE posée juste sous l'avatar, sans marge haute. Une carte dans une colonne qui n'en contient aucune autre se lit comme un corps étranger. C'est maintenant une SECTION, comme « Ses vues » juste en dessous : un filet, de l'air, un titre à gauche, le compte et l'action à droite. ⚠️⚠️ LE BROUILLON : les flèches sont parties. Sur un seul pack — le cas des cinq comptes tenus — elles étaient DEUX BOUTONS MORTS, et le « 1 / 1 » qu'elles servaient à parcourir ne disait rien. Des pastilles sur une ligne donnent la même compacité et vont droit au but. La rangée défile SUR LE CÔTÉ : la colonne ne descend jamais, ce qui était toute la raison des flèches. ⚠️ Aucune valeur brute : tout en jetons. */ /* ══ LE PACK ET SES VUES : UN SEUL CADRE (04/09) ═════════════════════════════ Amadou : « on dirait 2 blocs alors qu'ils sont liés ». Ils l'étaient au sens propre — le tiroir vivait DANS le bloc de l'avatar, dont le `border-bottom` passait juste au dessus des trois vues. L'œil voyait donc : [avatar + tiroir] | filet | [vues]. Le pack choisi et les vues qu'il porte sont maintenant dans le MÊME cadre : la tête dit lequel, le corps montre le sien. Changer de pack change ce qu'il y a dedans, et ça se voit sans qu'on l'explique. ⚠️⚠️ SURTOUT PAS D'`overflow: hidden` SUR CE CADRE. La liste du tiroir se pose en ABSOLU et déborde largement de la tête : un cadre qui coupe l'aurait rendue invisible — un menu déroulant qui ne se déroule pas, sans erreur, sans rien dire. Les coins du haut sont donc arrondis SUR LE BOUTON, pas par un recadrage du parent. */ .pk-bloc.a-pack { border: var(--e-1) solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); } /* ⚠️ La tête du cadre est maintenant la LISTE elle-même : plus de bouton en haut, donc plus de filet sous lui ni de coins arrondis à lui donner. Le cadre respire à la place. */ .pk-bloc.a-pack .pk-liste { padding: var(--e-10); } .pk-bloc.a-pack .model-slots { padding: var(--e-12); } /* Le titre vit AU-DESSUS du cadre, comme « Son avatar Vinted » au-dessus du sien : les deux sections de la colonne se présentent de la même façon. */ #model-pack-tete:empty { display: none; } .pk-sec-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-8); margin-bottom: var(--e-10); } .pk-sec-t { font-size: var(--t-base); font-weight: var(--fw-fort); color: var(--text); } .pk-sec-d { display: flex; align-items: baseline; gap: var(--e-8); flex: 0 0 auto; } .pk-sec-n { font-size: var(--t-meta); color: var(--text-3); } /* ══ SES PACKS — UNE LIGNE PAR PACK (04/09, piste choisie sur maquette) ══════ Le tiroir est retiré : sur ses comptes il n'y a qu'UN pack, et un menu déroulant qui ne mène qu'à lui-même n'est pas un choix. Les lignes montrent tous les packs à la fois, leurs trois vues en miniature suffisent à les reconnaître, et la colonne reste courte même à dix packs. ⚠️ Les règles du tiroir partent AVEC lui — `.pk-tir-*`, `.pk-tiroir`. Une classe que plus personne ne pose est du poids mort, et pire, une fausse piste : on la lit dans la feuille et on croit que l'écran déplie encore. */ .pk-liste { display: flex; flex-direction: column; gap: var(--e-6); } .pk-l { display: flex; align-items: center; gap: var(--e-10); padding: var(--e-8); border-radius: var(--r-md); border: var(--e-1) solid var(--border); background: var(--surface); transition: var(--transi); } .pk-l:hover { border-color: var(--border-strong); } /* ⚠️ Le pack OUVERT se marque par son FOND, pas par un cadre doré : sur ce thème l'accent et l'ambre sont deux dorés, et un cadre s'y lit « il manque quelque chose ». */ .pk-l.on { background: var(--cok-accent-bg); border-color: var(--cok-accent); } .pk-l-vues { display: flex; gap: var(--e-2); flex: 0 0 auto; } /* ⚠️ `--e-40`, pas `--e-44` : ce dernier n'existe pas dans l'échelle, et `var()` sur un jeton absent ne crie pas — il vide la propriété. La miniature aurait eu 0 de haut. */ .pk-l-v { display: block; width: var(--e-32); height: var(--e-40); padding: 0; border: 0; border-radius: var(--r-xs); overflow: hidden; background: var(--bg-hover); cursor: zoom-in; } .pk-l-v img { width: 100%; height: 100%; object-fit: cover; display: block; } .pk-l-v--vide { border: var(--e-1) dashed var(--border-strong); background: transparent; cursor: default; } /* ⚠️ LE NOM PREND TOUTE LA PLACE QUI RESTE. Le compteur « 3 vues sur 3 » a été retiré (Amadou : « ça sert à rien ») — et ses règles partent avec lui, sinon c'est une classe qu'on relit en croyant qu'elle sert encore. Le signal « pack incomplet » vit maintenant dans la FORME : un emplacement en pointillés dans la bande de miniatures. */ .pk-l-n { flex: 1; min-width: 0; font-size: var(--t-base); font-weight: var(--fw-moyen); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠️ CELUI-CI RESTE VISIBLE : ouvrir le pack est l'action PRINCIPALE de la languette, pas une action de bord. Ce qui se cache au survol, c'est ce qui défait — pas ce qu'on vient faire. */ .pk-l-ouv { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--e-20); height: var(--e-20); padding: 0; cursor: pointer; background: transparent; color: var(--text-3); border: 0; border-radius: var(--r-xs); transition: var(--transi); } .pk-l-ouv svg { width: var(--e-14); height: var(--e-14); } .pk-l-ouv:hover { color: var(--th-accent-clair); background: var(--cok-accent-bg); } /* ⚠️ Détacher se révèle au survol : une action qui défait ne s'offre pas. Elle reste atteignable au clavier, sinon ce serait la cacher pour de bon. */ .pk-l-det { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--e-20); height: var(--e-20); padding: 0; cursor: pointer; background: transparent; color: var(--text-3); border: 0; border-radius: var(--r-xs); opacity: 0; transition: var(--transi); } .pk-l-det svg { width: var(--e-12); height: var(--e-12); } .pk-l:hover .pk-l-det, .pk-l-det:focus-visible { opacity: 1; } .pk-l-det:hover { color: var(--red); background: var(--cok-red-bg); } .pk-liste .pk-add { width: 100%; text-align: center; padding: var(--e-8); border-radius: var(--r-md); border: var(--e-1) dashed var(--border-strong); } /* ⚠️ « + Ajouter » N'EST PLUS UNE BOÎTE EN POINTILLÉS. Dans une barre bourrée, le pointillé disait « ceci est un ajout » ; dans un en-tête de section, à côté du compte, la place suffit à le dire. Un mot en accent, et rien de plus. */ .pk-add { flex: 0 0 auto; font: inherit; font-size: var(--t-meta); cursor: pointer; padding: 0; background: transparent; border: 0; color: var(--th-accent-clair); transition: var(--transi); } .pk-add:hover:not(:disabled) { text-decoration: underline; } .pk-add:disabled { color: var(--text-3); cursor: default; text-decoration: none; } /* ══ LE PANNEAU D'AJOUT — IL COUVRE LA COLONNE (03/09) ════════════════════════ Amadou : « ça va ouvrir un panel sur la gauche, qui fait la taille de la partie Son avatar Vinted, et où je dois pouvoir scroller. Parce que là, c'est illisible. » ⚠️ L'ANCIEN ÉTAIT `position:absolute` SANS ANCRAGE : il retombait à sa position statique, donc PAR-DESSUS l'avatar, et ses pastilles se chevauchaient. Celui-ci se cale sur la colonne entière et défile à l'intérieur — il ne peut plus rien recouvrir d'autre, et l'écran ne s'allonge pas quand une famille a beaucoup de niches. */ .pk-hote { position: relative; } /* ⚠️⚠️⚠️ UN PANNEAU QUI SE POSE SUR QUELQUE CHOSE DOIT ÊTRE OPAQUE. Amadou : « trop transparent, beaucoup trop même ». Il avait raison, et c'est mesuré : `--surface` vaut `rgba(255,255,255,0.03)` — trois pour cent de blanc sur le fond de page. Parfait pour une carte POSÉE DANS le flux, désastreux pour un panneau qui en recouvre un autre : on lisait l'avatar et « Son espace modèle » au travers. `--bg-panel-solid` est le jeton du projet pour ça — celui des fenêtres modales. */ /* ⚠️ ÉCLAIRCI D'UN CRAN, SANS PERDRE L'OPACITÉ. Amadou : « c'est un peu trop foncé, mais légèrement ». Le voile de blanc est posé EN PREMIÈRE COUCHE au-dessus du fond solide : deux fonds empilés restent opaques, alors qu'un `rgba` seul redeviendrait translucide — c'est exactement le défaut qu'on vient de réparer. */ .pk-panneau { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)), var(--bg-panel-solid); border: var(--e-1) solid var(--border-strong); border-radius: var(--r-carte); } .pk-pan-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-8); padding: var(--e-12) var(--e-12) var(--e-4); flex: 0 0 auto; } .pk-pan-t { font-size: var(--t-base); font-weight: var(--fw-gras); color: var(--text); } .pk-pan-x { display: flex; align-items: center; justify-content: center; width: var(--e-24); height: var(--e-24); padding: 0; cursor: pointer; background: transparent; color: var(--text-3); border: 0; transition: var(--transi); } .pk-pan-x svg { width: var(--e-14); height: var(--e-14); } .pk-pan-x:hover { color: var(--text); } .pk-pan-s { font-size: var(--t-meta); color: var(--text-3); padding: 0 var(--e-12) var(--e-8); flex: 0 0 auto; } /* Des CARTES, pas des lignes — et ce sont celles de la Bibliothèque (`lib-niche`). Deux par rangée dans cette colonne ; elles défilent, le panneau ne grandit pas. */ .pk-pan-l { flex: 1; min-height: 0; overflow-y: auto; /* ⚠️⚠️ DEUX PAR RANGÉE, IMPOSÉES. Amadou : « il faudrait mes deux par ligne, parce que là on voit juste rien ». `auto-fill` avec un minimum de 10 rem tombait à UNE colonne : sa colonne fait ~360 px, et deux pistes de 160 px plus la gouttière et les marges n'y tenaient qu'au pixel près. Un calcul qui bascule sur un arrondi n'est pas une mise en page — on demande donc deux pistes, et `minmax(0,1fr)` les laisse se serrer sans jamais déborder. */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-10); align-content: start; padding: var(--e-12); border-top: var(--e-1) solid var(--border); } /* ⚠️⚠️ UNE HAUTEUR FIXE, PAS UN RATIO. Mesuré au banc : avec `aspect-ratio: 4/5` les cartes se dessinaient en 178 px de haut pendant que la grille ne réservait que 135 px à ses rangées — elles se CHEVAUCHAIENT de 43 px. Une grille dimensionne ses rangées sur le contenu, et un ratio n'est pas du contenu. On donne donc une hauteur définie : la rangée la connaît, plus de recouvrement. */ .pk-pan-l .lib-niche { aspect-ratio: auto; height: 9.5rem; } /* ══ LE MUR DES FAMILLES DANS LE PANNEAU (04/09) ══════════════════════════════ Amadou : « remets les familles de niches » — et, le 01/09 déjà, « ça doit être un panel comme la Bibliothèque ». On y pose donc `.lib-fam-carte`, la carte que la Bibliothèque et l'Atelier partagent, rétrécie comme l'Atelier la rétrécit déjà (`#atelier-step-1`). ⚠️⚠️ `aspect-ratio` EST RETIRÉ, ET CE N'EST PAS COSMÉTIQUE. `.lib-fam-carte` porte `4 / 5` ; une grille dimensionne ses rangées sur le CONTENU, pas sur un ratio — c'est ce qui a fait chevaucher les cartes de 43 px le 03/09, au même endroit. Hauteur définie. */ .pk-pan-l--fam .lib-fam-carte { aspect-ratio: auto; height: 8.5rem; padding: var(--e-10); border-radius: var(--r-md); } .pk-pan-l--fam .lib-fam-carte-logo { width: var(--e-32); height: var(--e-32); margin-bottom: var(--e-8); border-radius: var(--r-sm); } .pk-pan-l--fam .lib-fam-carte-nom { font-size: var(--t-mini); line-height: var(--lh-serre); } .pk-pan-l--fam .lib-fam-carte-n { font-size: var(--t-micro); } /* ⚠️ DEUX LIGNES PLUTÔT QU'UNE COUPURE. À 160 px de large, « Vestes pour femmes » ne tient pas sur une ligne : la couper au milieu d'un mot, c'est rendre la carte illisible pour gagner huit pixels. On lui en donne deux, et on ne coupe qu'au-delà. */ .pk-pan-l .lib-niche-nom { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: var(--lh-serre); } /* Le fil du second étage : « ‹ Vêtements · Robes ». Il remplace la phrase du pied — ⚠️ Amadou : « épure au niveau de son contenu ». Une phrase qui explique une règle coûte quatre lignes ; un fil qui dit où on est en coûte une, et il sert à revenir. */ .pk-pan-retour { font: inherit; font-size: var(--t-meta); color: var(--th-accent-clair); background: transparent; border: 0; padding: 0 var(--e-6) 0 0; cursor: pointer; } .pk-pan-retour:hover { text-decoration: underline; } .pk-pan-s { display: flex; align-items: baseline; gap: var(--e-4); } .pk-pan-sep { color: var(--text-3); } /* ⚠️ « JE NE SAIS PAS » N'EST PAS « IL N'Y A RIEN ». Sans pack libre, on dit quoi faire : un panneau vide sans phrase se lit comme une panne. */ .pk-pan-rien { grid-column: 1 / -1; font-size: var(--t-meta); color: var(--text-3); line-height: var(--lh-normal); padding: var(--e-8) var(--e-4); } /* Les packs sont plus hauts que les niches : on y lit un visage, pas une couverture. */ .pk-pan-l--packs .lib-niche { height: 11.5rem; } /* ══ LES COMPTES : UN MUR DE FAMILLES, PUIS UNE GRILLE DE CARTES (03/09) ══════ Amadou : « ça prend toute la longueur du site pour au final peu de choses ». Une bande pleine largeur par compte étalait trois informations sur 1 400 px. Les cartes se répartissent maintenant sur la largeur — deux, trois ou quatre par ligne selon l'écran. ⚠️ Aucune valeur brute : tout en jetons, comme le reste du fichier. */ .cp-mur { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--e-8); margin-bottom: var(--e-20); } .cp-vie-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--e-10); } .cp-carte { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); padding: var(--e-12) var(--e-14); background: var(--surface); border: var(--e-1) solid var(--border); border-radius: var(--r-carte); cursor: pointer; transition: var(--transi); } .cp-carte:hover { border-color: var(--cok-border-2); background: var(--surface-2); } .cp-carte:hover .cp-carte-chev { color: var(--th-accent-clair); } .cp-carte:focus-visible { outline: var(--e-2) solid var(--cok-accent); outline-offset: var(--e-2); } /* ⚠️⚠️⚠️ LE CADRE AMBRE EST RETIRÉ (Amadou, 04/09 : « le compte leanguyen est constamment sélectionné »). Ce n'était NI une sélection NI un focus — mesuré dans le navigateur : `focus: false`, `outline: none`. C'était `.sansfam`, qui peignait la bordure en rgb(224,190,116). Le défaut est que cette interface se sert du DORÉ pour dire « ceci est choisi » : l'onglet actif, la pastille de l'espace, le pack sélectionné dans le tiroir. L'ambre du « il manque quelque chose » est la même teinte. Deux sens pour une couleur, et c'est le sens le plus fréquent qui gagne dans l'œil. ⚠️ LE SIGNAL N'EST PAS PERDU, IL CHANGE DE PLACE : « Sans famille » devient une vraie pastille ambre sur la ligne du bas (voir `.cp-carte-fam.manque`). Il se voit autant, sans mentir sur l'état de la carte. Et à quarante comptes dont la plupart sans famille, quarante cadres ambre ne rangeaient plus rien de toute façon. */ .cp-carte.sorti { opacity: .55; } .cp-carte-haut { display: flex; align-items: center; gap: var(--e-10); } .cp-carte-txt { flex: 1; min-width: 0; } .cp-carte-p { font-size: var(--t-base); font-weight: var(--fw-gras); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-carte-m { font-size: var(--t-meta); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-carte-chev { flex: 0 0 auto; width: var(--e-16); height: var(--e-16); color: var(--text-3); transition: var(--transi); } .cp-carte-chev svg { width: 100%; height: 100%; display: block; } .cp-carte-bas { display: flex; align-items: center; gap: var(--e-8); margin-top: var(--e-10); font-size: var(--t-meta); flex-wrap: wrap; } .cp-carte-etat { color: var(--green); } .cp-carte-etat.attend { color: var(--amber); } .cp-carte-etat.sorti { color: var(--red); } .cp-carte-pk { color: var(--text-3); } .cp-carte-fam { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: auto; font-size: var(--t-micro); padding: var(--e-2) var(--e-8); border-radius: var(--r-pilule); background: var(--cok-accent-bg); color: var(--th-accent-clair); } /* ⚠️⚠️⚠️ ET SURTOUT PAS UNE PASTILLE PLEINE DE PLUS. Première tentative, mesurée dans le navigateur : « Vêtements » rgba(217,176,99,.16) sur rgb(242,221,168), « Sans famille » rgba(213,156,82,.13) sur rgb(224,190,116). Deux dorés à s'y méprendre — on ne distinguait plus « il a une famille » de « il lui en manque une ». Sur ce thème l'accent EST doré, et l'ambre aussi : distinguer par la TEINTE ne marche pas. On distingue donc par la FORME, qui tient sur les vingt thèmes : une famille est une pastille pleine (une catégorie), un manque est du texte nu suivi du point ambre — `.champ-manque`, le marqueur « case à renseigner » que la fiche pose déjà derrière IBAN et TÉLÉPHONE. Emprunté, pas inventé : aucune règle nouvelle. */ .cp-carte-fam.manque { background: transparent; color: var(--amber); padding: 0; } /* ⚠️ LA PHOTO A BESOIN DE PLACE (Amadou, 04/09 : « on doit voir la pfp des comptes »). À 28 px un visage n'est plus un visage, c'est une tache — et deux comptes se ressemblent. Le rond passe à 40 px SUR LA CARTE SEULEMENT : `.cp-lg-av` sert aussi aux languettes de 240 px, où 40 px mangerait la ligne. */ .cp-carte-haut .cp-lg-av { width: var(--e-40); height: var(--e-40); font-size: var(--t-meta); } /* ══ LA BARRE UNIQUE DE « LES COMPTES » (04/09) ══════════════════════════════ Amadou : « la partie au-dessus des cards des comptes est vraiment brouillon ». Quatre étages empilés — tuiles, phrase, recherche, pastille — remplacés par une ligne. ⚠️ `flex-wrap` N'EST PAS UN LUXE : en colonne étroite la ligne se replie au lieu de pousser le pouls hors de l'écran. Les deux largeurs sont vérifiées. */ .cp-barre { display: flex; align-items: center; gap: var(--e-10); flex-wrap: wrap; margin-bottom: var(--e-10); } .cp-barre .cp-vend-rech { margin-bottom: 0; flex: 1 1 calc(var(--e-20) * 9); min-width: calc(var(--e-20) * 7); max-width: calc(var(--e-20) * 16); } .cp-barre-fam { display: flex; flex: 0 0 auto; } .cp-barre-fam .cp-fam-bascule { margin-bottom: 0; } /* ⚠️ LE ZÉRO NE CRIE PAS. Une tuile de 152 px donnait le même poids à « 0 cœur » qu'à « 40 vivantes » ; ici un chiffre à zéro reste gris et le reste passe en clair. */ .cp-pouls { display: flex; align-items: center; gap: var(--e-14); flex: 0 0 auto; margin-left: auto; padding: var(--e-8) var(--e-12); border-radius: var(--r-md); background: var(--bg-panel); font-size: var(--t-meta); color: var(--text-2); white-space: nowrap; } .cp-pouls-m b { font-weight: var(--fw-fort); color: var(--text); } .cp-pouls-m.zero, .cp-pouls-m.zero b { color: var(--text-3); font-weight: var(--fw-moyen); } /* ⚠️ L'AIR ENTRE LE HAUT ET LES CARTES (Amadou, 04/09 : « espace un peu plus »). La barre et sa phrase forment UN groupe — 10 px entre elles — et c'est le groupe entier qui s'écarte des cartes. Poser la marge sur la phrase seule laisserait les cartes collées au jour où elle ne s'affiche pas. */ .cp-barre-sous { margin: 0; } #cp-vend-corps { margin-top: var(--e-24); } .cp-vie-qui { display: flex; align-items: center; gap: var(--e-10); min-width: 0; } .cp-vie-txt { min-width: 0; } .cp-vie-p { font-weight: var(--fw-fort); font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-vie-m { font-size: var(--t-meta); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-vie-mil { min-width: 0; } /* Les cinq temps : né · installé · vérifié · chauffé · au travail. */ .cp-vie-frise { display: flex; align-items: center; gap: var(--e-4); } .cp-vie-cran { height: var(--e-4); flex: 1; border-radius: var(--r-micro); background: var(--border); } .cp-vie-cran.fait { background: var(--green); } .cp-vie-cran.ici { background: var(--amber); } .cp-vie-mot { font-size: var(--t-meta); color: var(--text-2); margin-top: var(--e-6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-vie-mot.attend { color: var(--amber); } .cp-vie-mot.sorti { color: var(--red); } .cp-vie-ou { font-size: var(--t-mini); color: var(--text-2); line-height: var(--lh-serre); font-variant-numeric: tabular-nums; } .cp-vie-ou .s { color: var(--text-3); } .cp-vie-signal { text-align: right; font-size: var(--t-meta); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-vie-signal .pt { display: inline-block; width: var(--e-6); height: var(--e-6); border-radius: 50%; margin-right: var(--e-6); } .cp-vie-signal.ok { color: var(--green); } .cp-vie-signal.ok .pt { background: var(--green); } .cp-vie-signal.tiede { color: var(--amber); } .cp-vie-signal.tiede .pt { background: var(--amber); } .cp-vie-signal.ko { color: var(--text-3); } .cp-vie-signal.ko .pt { background: var(--red); } /* ⚠️ À l'étroit, la ligne s'empile au lieu de se serrer. Quatre colonnes sur un écran de portable donnent quatre colonnes illisibles — vérifié aux deux largeurs. */ @media (max-width: 60rem) { .cp-vie { grid-template-columns: 1fr; gap: var(--e-8); } .cp-vie-signal { text-align: left; } } .cp-lg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cp-lg-w, 240px), 1fr)); gap: var(--e-10); } .cp-lg { position: relative; display: flex; flex-direction: column; gap: var(--e-8); min-width: 0; padding: var(--e-10); text-align: left; font-family: inherit; cursor: pointer; border: 1px solid var(--border); border-radius: var(--r-md); /* ⚠️ UN FOND PLEIN, PAS UN VOILE. Amadou (22/08) : « les cards des comptes doivent être moins transparentes ». Le dégradé de voile montait à 0,042 d'opacité — sur les fonds très sombres, la languette se confondait avec la page. `--bg-card-solid` est le fond de carte du thème, opaque : la languette devient un objet posé, pas une zone teintée. Le voile reste PAR-DESSUS, très léger, pour garder le grain des cartes du site. */ background: linear-gradient(158deg, rgba(var(--th-voile),0.05) 0%, rgba(var(--th-voile),0.015) 55%), var(--bg-card-solid); box-shadow: 0 var(--e-4) var(--e-18) calc(var(--e-12) * -1) rgba(var(--th-ombre),0.55), inset 0 1px 0 var(--bg-sidebar); /* ⚠️ On énumère les PROPRIÉTÉS, pas des durées virgulées : chaque valeur virgulée d'un `transition` est une transition complète (leçon des « 82 virgules »). */ transition: border-color var(--d-fast) var(--c-pose), background var(--d-fast) var(--c-pose), transform var(--d-fast) var(--c-pose), box-shadow var(--d-fast) var(--c-pose); } /* ⚠️ LE SURVOL EST CELUI DE LA BIBLIOTHÈQUE, AU PIXEL PRÈS. Amadou : « quand on les survole il doit y avoir une animation comme dans la bibliothèque ». J'avais retiré le soulèvement en croyant calmer l'écran — mais un geste appris à un endroit doit se comporter pareil partout : trois pixels de montée, la même ombre projetée, le même liseré violet. On copie `.lib-card:hover`, on n'en invente pas une variante. ⚠️ `z-index` sur la languette survolée : sans lui, la bulle du point passerait SOUS la languette voisine, qui est elle aussi positionnée. */ .cp-lg:hover { border-color: var(--violet-mid); transform: translateY(-3px); /* 34 px de flou, comme `.lib-card:hover` — composé depuis l'échelle, jamais écrit brut. */ box-shadow: 0 var(--e-16) calc(var(--e-16) * 2 + var(--e-2)) calc(var(--e-14) * -1) rgba(var(--th-accent-rgb),0.5), inset 0 1px 0 var(--bg-elevated); z-index: 3; } .cp-lg-haut { display: flex; align-items: center; gap: var(--e-8); min-width: 0; } .cp-lg-av { width: var(--e-28); height: var(--e-28); flex: 0 0 auto; border-radius: var(--r-pilule); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--violet-tint); color: var(--text-2); font-size: var(--t-mini); font-weight: var(--fw-moyen); } .cp-lg-av img { width: 100%; height: 100%; object-fit: cover; } .cp-lg-txt { min-width: 0; } /* Le pseudo Vinted d'abord, et en grand : c'est le nom de l'objet regardé. */ .cp-lg-p { font-size: var(--t-meta); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* La modèle en dessous, en petit : elle n'est que l'habit que ce compte porte. */ .cp-lg-m { font-size: var(--t-mini); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-lg-bas { display: flex; align-items: center; gap: var(--e-4); min-width: 0; } /* ⚠️ LA LIGNE DU BAS EST MUETTE DE COULEUR. Amadou : « il y a trop de couleurs ». Le profil n'a plus de cadre : sur 240 px, un chip encadré se disputait l'œil avec le point d'état. La seule couleur de la languette, c'est le point. */ .cp-lg-c { font-size: var(--t-mini); color: var(--text-3); flex: 0 0 auto; } /* ═══ LE POINT SUR LA BORDURE ════════════════════════════════════════════════ Amadou : « juste un point sur la bordure à droite du compte pour remplacer les écriteaux muettes, endormies. Et quand je survole le point, ça met en plus grand muette. » ⚠️⚠️ LE MOT NE S'ÉCRIT JAMAIS SUR LA COULEUR. La bulle qui s'ouvre est NEUTRE et le point coloré reste à côté : les huit teintes d'état sont illisibles sur les cinq thèmes clairs (mesuré : 1,95 à 3,49 pour un seuil de 4,5). Poser le libellé dessus aurait ramené ce défaut ici. ⚠️⚠️⚠️ ET LE FOND DE LA BULLE EST OPAQUE (`--bg-card-solid`), PAS UN VOILE. `--bg-elevated` est un rgba à 0,06 : la bulle aurait laissé voir la languette d'à côté par transparence. C'est la leçon « les fonds mentent selon la clarté » — un voile n'est pas un fond, il ne fait que teinter ce qu'il y a dessous. */ /* ⚠️ EN HAUT À DROITE, SURÉLEVÉE — EXACTEMENT COMME CELLE DE LA BIBLIOTHÈQUE. Amadou (22/08) : « elle doit se surélever comme dans la bibliothèque ». J'avais fabriqué autre chose : un petit jeton à fond opaque, débordant des deux bords. Ça se détachait, mais ce n'était pas le même objet — et deux pastilles différentes pour la même idée, c'est deux choses à apprendre au lieu d'une. Le relief de la Bibliothèque, c'est un ANNEAU sombre autour du disque, plus une ombre portée : le point a l'air posé PAR-DESSUS. On le reprend tel quel, et du coup la pastille rentre DANS le coin (comme là-bas, à 6 px des bords) au lieu de déborder — c'est ce débordement qui m'interdisait l'anneau, puisque sa moitié extérieure aurait fait une tache sur le fond de la page. ⚠️ L'anneau de la Bibliothèque est écrit en dur (`rgba(6,8,12,0.45)`). Ici il passe par `--th-ombre` : même rendu sur les thèmes sombres, et il s'éclaircit sur les cinq thèmes clairs au lieu d'y poser une bague noire. */ .cp-lg-pt { position: absolute; top: var(--e-6); right: var(--e-6); display: flex; align-items: center; justify-content: flex-end; border-radius: var(--r-pilule); transition: background var(--d-fast) var(--c-pose), box-shadow var(--d-fast) var(--c-pose); } .cp-lg-pt-d { width: var(--e-10); height: var(--e-10); border-radius: var(--r-pilule); flex: 0 0 auto; box-shadow: 0 0 0 var(--e-2) rgba(var(--th-ombre),0.45), 0 var(--e-1) var(--e-4) rgba(var(--th-ombre),0.35); } .cp-lg-pt-l { max-width: 0; padding: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: var(--t-mini); color: var(--text-1); transition: max-width var(--d-fast) var(--c-pose), opacity var(--d-fast) var(--c-pose), padding var(--d-fast) var(--c-pose); } /* Au survol, le mot sort dans une bulle NEUTRE posée à gauche du point. Le point garde son anneau : c'est lui qu'on suit des yeux, il ne doit pas changer d'aspect. */ .cp-lg-pt:hover { background: var(--bg-card-solid); box-shadow: 0 var(--e-4) var(--e-12) calc(var(--e-4) * -1) rgba(var(--th-ombre),0.75); z-index: 6; } .cp-lg-pt:hover .cp-lg-pt-l { max-width: calc(var(--e-20) * 6); opacity: 1; padding: 0 var(--e-6) 0 var(--e-8); } .cp-lg-corps { display: block; } /* ⚠️ Le champ est celui de la Bibliothèque, repris tel quel : même dessin, même geste. */ .cp-vend-rech { margin-bottom: var(--e-12); max-width: calc(var(--e-20) * 18); } /* Le dernier signe de vie, aligné à droite et en chiffres de même chasse : c'est la colonne qu'on lit en diagonale pour repérer une session en train de mourir. */ .cp-lg-t { font-size: var(--t-mini); color: var(--text-3); margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; } .cp-lg-bande { display: flex; align-items: baseline; gap: var(--e-8); padding: var(--e-14) var(--e-2) var(--e-8); border-top: 1px solid var(--border); } .cp-lg-bande.premiere { border-top: none; padding-top: var(--e-4); } .cp-lg-bande-nom { font-size: var(--t-base); color: var(--text-1); } .cp-lg-bande-n { font-size: var(--t-mini); color: var(--text-3); } .cp-lg-pied { font-size: var(--t-mini); color: var(--text-3); margin-top: var(--e-14); } /* ⚠️ LE VISAGE D'UNE PANNE DE LECTURE. Amadou (22/08) : « dans la bibliothèque j'appuie sur vendeuse, rien ne s'affiche et rien ne semble se charger ». Une grille vide est le pire des messages : elle dit « il n'y en a pas » alors que le vrai sens est « je n'ai pas pu demander ». Ce bloc dit la panne, la nomme, et offre de recommencer. */ .lib-panne { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--e-10); padding: var(--e-32) var(--e-20); text-align: center; } .lib-panne-t { font-size: var(--t-body); color: var(--text-1); } .lib-panne-d { font-size: var(--t-base); color: var(--text-2); max-width: 46ch; line-height: var(--lh-normal); } /* ═══ LA RANGÉE ROBES / VENDEUSES : UNE SEULE HAUTEUR ════════════════════════ Amadou (22/08) : « la barre contenant Robes et Vendeuses ainsi que les boutons à droite doit faire la même taille, et les boutons sont trop collés au-dessus ». ⚠️ MESURÉ, TROIS HAUTEURS DIFFÉRENTES DANS LA MÊME RANGÉE : · le groupe Robes/Vendeuses ~40 px (4 px de cadre + 6+6 de bouton + le texte) · « Sélectionner » 38 px · le rangement et le chevron 34 et 32 px Aucune n'était fausse toute seule ; c'est leur voisinage qui l'était. ⚠️ 38 px N'EST PAS UN CHIFFRE CHOISI ICI : c'est la hauteur de commande déjà employée par le champ de recherche juste au-dessus, par les boutons de l'Atelier et par la bascule de la fiche robe. On s'aligne sur l'existant au lieu d'inventer un quatrième étalon — et « Sélectionner » n'a même pas besoin d'être touché, il l'avait déjà. */ .lib-filters { padding: var(--e-4); align-items: center; } .lib-filters .lib-filter { height: 30px; padding: 0 var(--e-12); } .lib-filters .lib-filter-add-btn { height: 30px; } /* (la seconde des deux règles retirées le 25/08 — voir plus haut) */ .lib-filters-row-right .lib-filters-collapse { width: 38px; height: 38px; } .lib-filters-row-right .identite-btn { height: 38px; } /* ⚠️ ET DE L'AIR AU-DESSUS. La rangée démarrait à 14 px du bord haut de sa barre — assez pour que les boutons semblent posés contre le titre. On passe à 22 px : le même écart que celui qui sépare déjà la barre du contenu en dessous, donc la rangée respire de la même façon des deux côtés au lieu d'être poussée vers le haut. */ .lib-sticky-bar { padding-top: var(--e-22); } /* ═══ L'ÉTIQUETTE « INCOMPLET » : PLUS PETITE, ET ELLE MÈNE QUELQUE PART ═════ Amadou (22/08) : « les robes incomplètes doivent avoir une étiquette plus petite et discrète, et quand on appuie dessus on doit voir une bulle de couleur dans la partie où il manque des infos ». ⚠️ ELLE ÉTAIT UN BLOC PLEIN D'ORANGE OPAQUE (0,88) posé sur la photo, en gras, avec un chiffre. Sur une grille de vingt-neuf robes dont la moitié est incomplète, ça faisait une rangée de pastilles criardes. Elle devient un simple rond : le triangle seul, sans chiffre — le compte exact se lit dans la fiche, où il est ACTIONNABLE. ⚠️ Et elle reprend `pointer-events` : c'est un bouton maintenant, plus une décoration. */ /* ⚠️ ELLES VIVENT DANS `.lib-card-coin`, la colonne des cartes de vendeuses — donc en flux, l'une SOUS l'autre. Elles se posaient toutes les deux dans le même coin en absolu (7 px et 8 px), et celle du dessus masquait l'autre : une robe à la fois incomplète et épuisée ne montrait jamais qu'elle était épuisée. */ .lib-card-coin .lib-card-incomplete-badge, .lib-card-coin .lib-card-stock-badge { position: static; top: auto; left: auto; } /* ⚠️ 14 px, et c'est le TROISIÈME essai. 18 px puis « toujours trop gros » : sur une vignette de 186 px de large, une pastille de 18 px pèse un dixième de la largeur de la photo. À 14 px elle se voit sans se regarder — et le glyphe descend à 8 px, mesuré dans le HTML puisqu'un `
`) : les astérisques du gras, les tirets des listes et les clôtures de blocs de code s'affichaient tels quels. Ça se voyait au premier coup d'œil à côté de ChatGPT — et ça poussait à demander des réponses plates, donc pauvres. ⚠️ TOUT PASSE PAR LES JETONS `--th-*` : ces règles doivent tenir sur les vingt thèmes, clairs compris. Un `#fff` ou un `rgba(0,0,0,.4)` écrit ici serait illisible sur la moitié d'entre eux. */ .studio-msg-text.md { line-height: var(--lh-aere); } .studio-msg-text.md > *:first-child { margin-top: 0; } .studio-msg-text.md > *:last-child { margin-bottom: 0; } .studio-msg-text.md p { margin: 0 0 var(--e-12); } .studio-msg-text.md .md-h { margin: var(--e-20) 0 var(--e-8); font-weight: var(--fw-moyen); line-height: var(--lh-titre); color: var(--th-texte); } .studio-msg-text.md h2.md-h { font-size: var(--t-lead); } .studio-msg-text.md h3.md-h { font-size: var(--t-base); } .studio-msg-text.md h4.md-h, .studio-msg-text.md h5.md-h { font-size: var(--t-small); color: var(--th-texte-2); } .studio-msg-text.md ul, .studio-msg-text.md ol { margin: 0 0 var(--e-12); padding-left: var(--e-20); } .studio-msg-text.md li { margin: var(--e-4) 0; } .studio-msg-text.md li::marker { color: var(--th-texte-3); } .studio-msg-text.md strong { font-weight: var(--fw-moyen); color: var(--th-texte); } .studio-msg-text.md em { font-style: italic; } .studio-msg-text.md del { opacity: .6; } .studio-msg-text.md a { color: var(--th-accent-clair); text-decoration: underline; text-underline-offset: var(--e-2); } .studio-msg-text.md a:hover { color: var(--th-accent); } .studio-msg-text.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-meta); background: rgba(var(--th-voile), .08); border: 1px solid var(--border); border-radius: var(--r-xs); padding: var(--e-1) var(--e-6); } /* Un bloc de code garde SA barre de défilement — sans ça une longue ligne élargit la bulle, qui élargit la colonne, qui pousse la page entière. */ .md-code { margin: 0 0 var(--e-12); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: rgba(var(--th-voile), .05); } .md-code-tete { display: flex; align-items: center; justify-content: space-between; padding: var(--e-6) var(--e-10); font-size: var(--t-micro); color: var(--th-texte-3); border-bottom: 1px solid var(--border); } /* ⚠️⚠️ IL ÉTAIT VISIBLE EN PERMANENCE, AVEC SON MOT. Amadou (26/08) : « le bouton copier, il n'est pas beau, il faut qu'il soit beaucoup plus discret ». Un libellé posé en haut de chaque bloc de code pèse autant que la première ligne du code. Il ne se montre qu'au survol du bloc — et reste visible au doigt, où le survol n'existe pas. */ .md-code-copier { background: none; border: 0; cursor: pointer; color: var(--th-texte-3); font-size: var(--t-nano); padding: var(--e-2) var(--e-6); border-radius: var(--r-xs); opacity: 0; transition: opacity var(--t-bref) var(--c-pose), color var(--t-bref) var(--c-pose); } .md-code:hover .md-code-copier, .md-code-copier:focus-visible { opacity: 1; } .md-code-copier:hover { color: var(--th-texte-2); } @media (hover: none) { .md-code-copier { opacity: 1; } } .md-code pre { margin: 0; padding: var(--e-10) var(--e-12); overflow-x: auto; } .md-code pre code { background: none; border: 0; padding: 0; font-size: var(--t-meta); } .md-table-boite { overflow-x: auto; margin: 0 0 var(--e-12); } /* ⚠️ `width: 100%` SEUL fait rétrécir les colonnes au lieu de faire défiler : en largeur étroite, « Taille » se coupait en « Taill / e ». Le plancher force le tableau à garder ses colonnes et à défiler dans sa boîte — qui est déjà en `overflow-x: auto` juste au-dessus. */ .md-table-boite table { border-collapse: collapse; width: 100%; min-width: 26rem; font-size: var(--t-small); } .md-table-boite th, .md-table-boite td { border: 1px solid var(--border); padding: var(--e-6) var(--e-10); text-align: left; } .md-table-boite th { background: rgba(var(--th-voile), .06); font-weight: var(--fw-moyen); } /* ⚠️ Bord d'un seul côté : donc PAS de rayon (règle du socle — un coin arrondi sur un filet unique laisse un angle vide qui se voit). */ .md-cite { margin: 0 0 var(--e-12); padding: var(--e-6) var(--e-14); border-left: 2px solid var(--th-accent-doux); border-radius: 0; color: var(--th-texte-2); } .md-hr { border: 0; border-top: 1px solid var(--border); margin: var(--e-18) 0; } /* ── Ce qu'il est en train de faire ───────────────────────────────────────── Une ligne par outil. Elle apparaît AVANT le texte : sans elle, chercher dans les données ressemble à un blanc de plusieurs secondes. */ .studio-outils { display: flex; flex-direction: column; gap: var(--e-4); margin-bottom: var(--e-10); } .studio-outil { display: flex; align-items: center; gap: var(--e-8); font-size: var(--t-meta); color: var(--th-texte-3); } .studio-outil-pt { width: var(--e-6); height: var(--e-6); border-radius: 50%; background: var(--th-accent); animation: studioOutilBat 1.1s var(--c-pose) infinite; flex: 0 0 auto; } .studio-outil.fini .studio-outil-pt { background: var(--th-succes); animation: none; } .studio-outil-det { color: var(--th-texte-3); opacity: .75; } @keyframes studioOutilBat { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .studio-outil-pt { animation: none; } } /* Son raisonnement : replié par défaut. Il est là pour qui veut vérifier, pas pour occuper l'écran. */ .studio-pense { margin-bottom: var(--e-10); } .studio-pense > summary { cursor: pointer; font-size: var(--t-meta); color: var(--th-texte-3); list-style: none; user-select: none; } .studio-pense > summary::-webkit-details-marker { display: none; } .studio-pense > summary::before { content: '▸ '; } .studio-pense[open] > summary::before { content: '▾ '; } .studio-pense > summary:hover { color: var(--th-texte-2); } .studio-pense-corps { margin-top: var(--e-6); padding-left: var(--e-10); border-left: 1px solid var(--border); border-radius: 0; font-size: var(--t-meta); color: var(--th-texte-3); white-space: pre-wrap; line-height: var(--lh-normal); max-height: var(--e-48); overflow-y: auto; } .studio-pense[open] .studio-pense-corps { max-height: none; } /* ══ STUDIO — LA RÉPONSE PREND SA PLACE ══════════════════════════════════════ ⚠️⚠️ MESURÉ : une réponse structurée s'affichait dans **249 px** alors que son emplacement en faisait 620. La bulle se calait sur son contenu, et un tableau en `width: 100%` dans un parent qui se cale sur son contenu tourne en rond — le tableau prend la largeur du texte, qui prend la largeur du tableau. Sur une réponse riche, ça donne une colonne de journal. ⭐ Une RÉPONSE n'est pas une bulle de conversation, c'est un document : elle occupe la largeur du fil, comme chez ChatGPT et Claude. Les messages d'Amadou, eux, restent des bulles à droite — c'est le contraste entre les deux qui fait lire « lui / moi » sans avoir besoin d'y penser. */ .studio-msg-velbo { max-width: 100%; width: 100%; } .studio-msg-velbo .studio-msg-bubble-text { max-width: none; width: 100%; background: transparent; border: 0; padding-left: 0; padding-right: 0; } /* La borne de lecture est posée sur le FIL, pas sur la bulle : ainsi les messages d'Amadou et les réponses partagent le même axe, sans décalage. */ .studio-chat-messages { --studio-lecture: 74ch; } .studio-msg-velbo .studio-msg-text.md { max-width: var(--studio-lecture); } .studio-msg-velbo .studio-msg-bubble-text > .studio-msg-actions { padding-left: 0; } /* ══ STUDIO — LA DISPOSITION, FUSION CLAUDE + CHATGPT ════════════════════════ Amadou (26/08) : « inspire-toi de l'interface de Claude et de ChatGPT, pour moi ce sont les meilleures, fusionne-les ». De CLAUDE : l'accueil. La salutation et la saisie AU CENTRE de l'écran tant que rien n'est écrit — c'est ce qui donne envie de commencer, au lieu de fixer un grand vide avec une barre collée en bas. De CHATGPT : la conversation. Dès le premier message la saisie descend, le fil prend toute la place ; plus la recherche en haut de l'historique. ⚠️ UN SEUL DRAPEAU commande les deux états (`.vide`, posé par `_studioVide`). Deux réglages séparés finiraient par se contredire — barre en bas sur un écran d'accueil, ou l'inverse. */ /* ⚠️⚠️ LA SAISIE EST REDESCENDUE EN BAS (Amadou, 26/08 : « du coup la barre des messages doit être en bas »). Elle avait été remontée au centre le matin même, à l'imitation de Claude — mais Claude peut le faire parce que son accueil ne porte rien d'autre. Ici, les cartes retirées, une barre au milieu d'un écran vide flotte sans rien pour l'ancrer. La salutation garde le centre de la zone au-dessus ; la barre reste là où on la cherche. */ .studio-chat.vide .studio-chat-welcome { justify-content: center; padding-top: var(--e-32); padding-bottom: var(--e-32); } /* ── La rangée de commandes, sous le texte ─────────────────────────────────── */ .studio-input-ops { display: flex; align-items: center; justify-content: space-between; gap: var(--e-8); margin-top: var(--e-6); } .studio-ops-gauche { display: flex; align-items: center; gap: var(--e-8); min-width: 0; } /* Micro + envoi : les deux façons de faire PARTIR un message, donc côte à côte. */ .studio-ops-droite { display: flex; align-items: center; gap: var(--e-6); flex: 0 0 auto; } /* ── Auto / Répondre / Image ───────────────────────────────────────────────── */ .studio-mode { display: flex; gap: var(--e-2); background: rgba(var(--th-voile), .05); border-radius: var(--r-md); padding: var(--e-2); } .studio-mode-b { background: none; border: 0; cursor: pointer; font-size: var(--t-micro); font-family: inherit; color: var(--th-texte-3); padding: var(--e-4) var(--e-10); border-radius: var(--r-xs); white-space: nowrap; } .studio-mode-b:hover { color: var(--th-texte-2); } .studio-mode-b.active { background: rgba(var(--th-accent-rgb), .16); color: var(--th-accent-clair); } /* Le bouton joindre reprend la taille des commandes de la rangée : à 38 px il dominait un segment de 26 px et déséquilibrait toute la ligne. */ .studio-input-ops .studio-attach-btn { width: 28px; height: 28px; border-radius: var(--r-sm); } .studio-input-ops .studio-attach-btn:hover { color: var(--th-texte); background: rgba(var(--th-voile), .08); } .studio-input-ops .studio-send-btn { width: 30px; height: 30px; border-radius: var(--r-md); } /* ── Chercher dans ses conversations ───────────────────────────────────────── */ .studio-rech { display: flex; align-items: center; gap: var(--e-6); margin-top: var(--e-8); padding: var(--e-6) var(--e-8); border-radius: var(--r-md); background: rgba(var(--th-voile), .05); color: var(--th-texte-3); } .studio-rech:focus-within { background: rgba(var(--th-voile), .09); } .studio-rech svg { flex: 0 0 auto; } .studio-rech input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--th-texte); font-family: inherit; font-size: var(--t-meta); } .studio-rech input::placeholder { color: var(--th-texte-3); } /* La croix native de `type="search"` est dessinée par le navigateur, en gris fixe : invisible sur les thèmes sombres, disgracieuse sur les clairs. */ .studio-rech input::-webkit-search-cancel-button { -webkit-appearance: none; } /* ── Le modèle en cours, dans la barre du haut ─────────────────────────────── */ .studio-modele { font-size: var(--t-meta); color: var(--th-texte-3); padding: var(--e-4) var(--e-10); border-radius: var(--r-pilule); border: 1px solid var(--border); white-space: nowrap; } /* ⚠️ LE CENTRAGE NE VAUT QU'À L'ACCUEIL. `.studio-chat-welcome` est en `text-align: left` parce qu'il servait aussi de bandeau au-dessus d'une grille de cartes ; centrer la règle de base décalerait ces cas-là. Le centre est donc posé sous `.vide`, avec le reste de la disposition d'accueil. */ .studio-chat.vide .studio-chat-welcome { text-align: center; } .studio-chat.vide .studio-welcome-inner { align-items: center; } /* ⚠️ DEUX ENFANTS SEULEMENT, sinon le `gap` s'insère ENTRE CHAQUE MOT. La phrase est découpée en blocs-mots (pour que la ligne ne se coupe pas au milieu d'un mot) : sans l'enveloppe `.studio-welcome-phrase`, chacun de ces blocs devient un item flex et reçoit 12 px d'écart en plus de son espace — « On génère, on écrit » s'étalait avec des trous. */ .studio-chat.vide .studio-chat-welcome-greeting { display: flex; align-items: center; justify-content: center; gap: var(--e-12); flex-wrap: wrap; } .studio-welcome-phrase { display: inline; } .studio-welcome-marque { display: inline-flex; flex: 0 0 auto; } .studio-chat.vide .studio-welcome-hint { text-align: center; } /* ══ STUDIO — L'ACCUEIL QUAND LA PLACE MANQUE ════════════════════════════════ ⚠️⚠️ `justify-content: center` DÉBORDE PAR LE HAUT. Mesuré en largeur tablette : la salutation et le logo passaient hors de l'écran, inatteignables même en défilant — un contenu centré plus haut que son conteneur dépasse des DEUX côtés, et le haut n'est pas rattrapable. `safe center` centre tant que ça tient et revient au début dès que ça ne tient plus ; c'est exactement le cas d'usage. */ /* ⚠️ `safe center` réglait le débordement d'un accueil CENTRÉ (salutation + barre + six cartes, plus hauts que l'écran). La barre est redescendue et les cartes sont parties : il n'y a plus de pile à centrer, donc plus rien à protéger ici. */ /* ⚠️ Le segment Auto/Répondre/Image RECOUVRAIT le bouton d'envoi en étroit : ses libellés sont en `nowrap`, donc il refusait de rétrécir et poussait la rangée au-delà de la barre. Il se resserre au lieu de pousser. */ @container studiochat (max-width: 480px) { .studio-mode-b { padding: var(--e-4) var(--e-6); font-size: var(--t-nano); } .studio-input-ops { gap: var(--e-4); } .studio-ops-gauche { gap: var(--e-4); } } /* Plus étroit encore : les cartes tiennent sur deux colonnes serrées plutôt que de s'empiler sur six rangs — six cartes en colonne font un accueil de deux écrans de haut, où la barre de saisie n'est plus visible avec la salutation. */ /* ══ STUDIO — LES ACTIONS, LA VOIX, LES MENTIONS ═════════════════════════════ ⚠️⚠️ L'ANCIEN BOUTON PORTAIT SON MOT (« Copier »), dans une pilule bordée, visible en permanence. Amadou (26/08) : « le bouton copier n'est pas beau, il doit être plus discret ». Un libellé sous chaque réponse pèse autant que la réponse ; ce sont des icônes, et elles n'apparaissent qu'au survol du message — comme chez ChatGPT et Claude, où seule la barre du message visé se montre. */ .studio-msg-actions { display: flex; gap: var(--e-2); margin-top: var(--e-6); opacity: 0; transition: opacity var(--t-bref) var(--c-pose); } .studio-msg:hover .studio-msg-actions, .studio-msg-actions:focus-within { opacity: 1; } /* ⚠️ Le survol n'existe pas au doigt : sur un écran tactile les actions doivent rester visibles, sinon elles sont inatteignables. */ @media (hover: none) { .studio-msg-actions { opacity: 1; } } .studio-msg-actions--user { justify-content: flex-end; } /* ⚠️ Plus petites et plus effacées : elles accompagnent la réponse, elles ne la commentent pas. Le fond au survol est retiré — sur une rangée de quatre icônes, quatre pastilles qui s'allument font une barre d'outils, pas une aide discrète. */ .studio-act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-sm); border: 0; background: none; color: var(--th-texte-3); opacity: .7; cursor: pointer; padding: 0; transition: opacity var(--t-bref) var(--c-pose), color var(--t-bref) var(--c-pose); } .studio-act:hover { color: var(--th-texte-2); opacity: 1; } .studio-act.parle { color: var(--th-accent-clair); background: rgba(var(--th-accent-rgb), .14); } /* ── Le micro ──────────────────────────────────────────────────────────────── */ .studio-mic-btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-md); border: 0; background: none; color: var(--th-texte-3); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .studio-mic-btn:hover { color: var(--th-texte); background: rgba(var(--th-voile), .08); } /* ⚠️⚠️ DEUX ÉTATS, PAS UN — et c'est tout le problème qu'Amadou décrit : « des fois ça m'arrivait de cliquer plein de fois parce que je pensais qu'il n'était pas enclenché ». Entre le clic et le vrai départ de l'écoute, le navigateur demande l'autorisation du micro et ouvre le flux : ça prend un temps VISIBLE, pendant lequel l'ancien bouton ne changeait pas d'aspect. On cliquait donc à nouveau — et le deuxième clic ARRÊTAIT ce qui venait de démarrer. « attente » se pose dès le clic (avant même d'appeler le moteur) ; « ecoute » quand le moteur confirme. Il se passe toujours quelque chose sous le doigt. */ .studio-mic-btn.attente { color: var(--th-accent-clair); background: rgba(var(--th-accent-rgb), .16); } /* ⚠️ LA COULEUR DU SITE, PAS DU ROUGE. J'avais pris `--th-danger` par réflexe « enregistrement ». Amadou : « mets-le dans la couleur de la DA du site en fonction du thème ». Le rouge dit « attention/erreur » dans tout le reste de l'interface — l'employer ici brouille les deux sens, et il ne suit aucun thème. ⚠️ Le fond est PLEIN pendant l'écoute : un simple halo se confond avec un survol. L'état actif doit se distinguer du survol, sinon on ne sait pas s'il est armé. */ .studio-mic-btn.ecoute { color: var(--sur-accent); background: var(--th-accent); animation: studioMicRespire 1.7s var(--c-pose) infinite; } .studio-mic-btn.ecoute:hover { background: var(--th-accent-fort); } @keyframes studioMicRespire { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--th-accent-rgb), .40); } 50% { box-shadow: 0 0 0 var(--e-6) rgba(var(--th-accent-rgb), 0); } } @media (prefers-reduced-motion: reduce) { .studio-mic-btn.ecoute { animation: none; } } /* ⚠️ LE CHAMP MARQUE QU'IL TRAVAILLE, SANS SE BLOQUER. Pendant la reprise de formulation, Amadou doit pouvoir continuer à écrire ou envoyer tout de suite s'il ne veut pas attendre — un champ verrouillé pendant un aller-retour réseau vaut moins qu'un texte non repris. Un liseré qui respire suffit à le dire. */ .studio-chat-inputbar.repare { border-color: rgba(var(--th-accent-rgb), .4); } .studio-chat-inputbar.repare .studio-prompt-input { opacity: .72; } /* ⚠️⚠️ LE BOUTON NE BOUGE PAS, IL S'ALLUME. Amadou (26/08) : « il ne doit pas… il doit juste être coloré, et les étoiles doivent briller ». Le halo qui respirait faisait grossir et rétrécir le bouton lui-même : sur un carré de 30 px posé à côté du bouton d'envoi, ce battement attire l'œil hors du texte qu'on est en train de relire — et c'est précisément le texte qu'il faut regarder pendant la reprise. Le bouton prend donc la couleur pleine et n'en bouge plus ; ce qui vit, ce sont les étoiles. ⚠️ Les trois scintillent EN DÉCALÉ. Ensemble, elles ne feraient qu'un clignotement du bouton entier — exactement ce qu'on vient de retirer. Décalées, l'œil lit trois étoiles qui brillent chacune leur tour. */ .studio-mic-btn.travaille { color: var(--sur-accent); background: var(--th-accent); animation: none; } .studio-mic-btn.travaille:hover { background: var(--th-accent-fort); } .studio-mic-btn.travaille svg path { animation: studioEtoileBrille 1.35s ease-in-out infinite; } .studio-mic-btn.travaille svg path:nth-child(2) { animation-delay: .28s; } .studio-mic-btn.travaille svg path:nth-child(3) { animation-delay: .62s; } @keyframes studioEtoileBrille { 0%, 100% { opacity: .45; } 45% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .studio-mic-btn.travaille svg path { animation: none; opacity: 1; } } /* ══ STUDIO — LE FLUX QUI FAIT LE TOUR ═══════════════════════════════════════ Amadou (26/08) : « le contour doit s'illuminer, mais comme si c'était du flux, un liquide qui fait le tout et après qu'il se rejoignait ». ⚠️⚠️ LE POINT DE DÉPART EST LE MILIEU DU BORD SUPÉRIEUR. Amadou (26/08, après deux essais) : « en haut, sur la ligne d'en haut au milieu, l'eau part, et au final ça remplit le rectangle arrondi ». J'avais d'abord lu « ça doit partir vers le haut » comme « ça monte », d'où une origine en bas — l'inverse. C'est le `from` du dégradé qui décide : 0deg place l'origine en haut, les deux fronts descendent chacun d'un côté et se rejoignent au milieu du bord inférieur. Une seule passe : ce n'est pas une attente qui tourne en boucle, c'est un accusé de réception. ⚠️ `@property` est indispensable : une variable CSS ordinaire ne s'anime PAS (le navigateur ne sait pas l'interpoler, elle saute d'une valeur à l'autre). Déclarée avec son type ``, elle devient animable. Deux autres animations du site s'appuient déjà dessus. ⚠️ L'anneau est un `conic-gradient` MASQUÉ, pas une bordure : une bordure ne peut pas être peinte en dégradé le long de son périmètre. Le masque garde le liseré et évide l'intérieur — d'où les deux couches et `mask-composite`. ⚠️ Là où `@property` manque (Firefox), l'arc reste à 0° : rien ne s'affiche, et la bordure violette du focus tient toute seule. Pas de dégradation visible. */ @property --studio-arc { syntax: ''; inherits: false; initial-value: 0deg; } /* ⚠️ TROIS RYTHMES QUI NE RETOMBENT JAMAIS ENSEMBLE. Une seule oscillation à cadence constante se lit comme un balancement mécanique : l'œil suit le va-et-vient. Trois ondes dont aucune n'est multiple des autres (0,78 s / 1,27 s / 0,61 s) ne coïncident qu'au bout de plusieurs minutes — c'est cette non-coïncidence qui donne l'agitation. ⚠️ UN ESSAI ÉCARTÉ, ET LA RAISON. J'avais tenté des VAGUES : un motif de crêtes (`repeating-conic-gradient`) défilant le long du contour, doublé d'une seconde houle en sens inverse. Techniquement plus proche de l'image d'une eau agitée, mais Amadou (26/08), après l'avoir vu : « on va rester sur le glissement ». Sur un liseré d'un pixel et demi, des crêtes deviennent un clignotement — le relief qu'on croit dessiner n'a pas la place d'exister. Au repos les trois valent leur neutre : l'eau est étale et rien ne tourne. */ @property --studio-clapot { syntax: ''; inherits: false; initial-value: 0deg; } /* L'angle de la seconde houle. */ @property --studio-remous { syntax: ''; inherits: false; initial-value: 0deg; } /* La chaleur : ce qui pulse, ce n'est pas la position mais la LUMIÈRE. Sans elle, l'eau bouge mais reste froide — et le mouvement seul se lit comme une hésitation plutôt que comme une activité. */ @property --studio-chaleur { syntax: ''; inherits: false; initial-value: 1; } .studio-chat-inputbar { position: relative; } .studio-chat-inputbar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; /* L'épaisseur du liseré : la même que la bordure qu'il double. */ padding: var(--e-1); /* ⚠️⚠️ LA TÊTE DU FRONT DOIT ÊTRE LA PARTIE LA PLUS VIVE. Première écriture : le clair était au DÉPART et la tête à 15 % d'opacité — on voyait donc une zone qui s'allume près de l'origine, pas un front qui avance. Amadou (26/08) : « tout se remplit en même temps, or ça doit vraiment faire le contour ». Ici : traîne posée derrière, tête vive, et surtout COUPURE NETTE à l'angle atteint. C'est ce bord franc qui fait lire « ça avance » plutôt que « ça s'allume ». */ background: conic-gradient(from calc(0deg + var(--studio-clapot) + var(--studio-remous)), rgba(var(--th-accent-rgb), .42) 0deg, rgba(var(--th-accent-rgb), .62) calc(var(--studio-arc) - 26deg), var(--th-accent-clair) var(--studio-arc), transparent var(--studio-arc), transparent calc(360deg - var(--studio-arc)), var(--th-accent-clair) calc(360deg - var(--studio-arc)), rgba(var(--th-accent-rgb), .62) calc(360deg - var(--studio-arc) + 26deg), rgba(var(--th-accent-rgb), .42) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; pointer-events: none; filter: brightness(var(--studio-chaleur)); transition: opacity var(--t-moyen) var(--c-sortie); } /* ⚠️⚠️ LA COURBE ÉTAIT LA VRAIE CAUSE DU « C'EST INSTANTANÉ ». `--c-pose` freine très tôt : mesuré, l'arc atteignait 173° sur 180 à la MOITIÉ du temps — 96 % du tour parcouru en 50 % de la durée. Quelle que soit la durée choisie, on ne voyait donc que la fin, immobile. Une eau qui coule garde une vitesse à peu près constante : la courbe ci-dessous démarre progressivement, tient son rythme, et ne se pose qu'à l'arrivée. Six courbes comparées sur la même durée, en relevant l'angle atteint à mi-temps (le régulier serait 90° sur 180) : --c-pose (l'ancienne) .... 173° ← 96 %, d'où « c'est instantané » .32,.06,.42,1 ............ 123° .35,.25,.5,1 ............. 122° .5,.2,.5,.9 .............. 97° .45,.15,.55,.9 ........... 93° ← retenue ⚠️ La DURÉE ne pouvait pas régler ce défaut : avec une courbe qui brûle le trajet, rallonger l'animation ne fait qu'allonger la partie où plus rien ne bouge. */ .studio-chat-inputbar:focus-within::before { opacity: 1; animation: studioFlux var(--studio-coule) cubic-bezier(.45, .15, .55, .9) forwards; transition: none; } /* ⚠️⚠️ UNE FOIS COULÉ, ÇA RESTE COULÉ. Amadou (26/08) : « une fois que l'animation est terminée… ça refait l'animation où ça part des deux côtés et ça coule. Il faut que le contour reste ». Le défaut : pendant la reprise du prompt, `.repare` REMPLACE l'animation par le frémissement. En la retirant, la règle du focus reprend la main — et une animation qu'on réattribue REDÉMARRE. Le contour se revidait donc pour se remplir à nouveau, alors qu'il n'avait aucune raison de bouger. `.a-coule` est posée par le JS à la fin du premier écoulement : elle fige l'arc à 180° sans animation. Elle est retirée à la sortie du champ, pour que le geste rejoue à la prochaine venue. */ .studio-chat-inputbar.a-coule:focus-within::before { opacity: 1; animation: none; --studio-arc: 180deg; } /* ⚠️⚠️ UN CHAMP QUI PORTE DU TEXTE GARDE SON CONTOUR. Amadou (26/08) : « à partir du moment où il y a quelque chose dans l'espace, le contour doit rester allumé ». Le focus disait « tu écris ici en ce moment » ; ce qu'il faut dire est autre chose : « il y a quelque chose ici qui n'est pas parti ». Un message à moitié écrit qu'on quitte des yeux ne doit pas s'éteindre comme un champ vide — sinon rien ne distingue les deux à un coup d'œil. ⚠️ Et l'écoulement ne rejoue PAS au retour : on remplit une rigole vide, pas une rigole déjà pleine. D'où l'arc figé plutôt qu'une animation relancée. */ .studio-chat-inputbar.rempli::before { opacity: 1; animation: none; --studio-arc: 180deg; } /* Le frémissement reste prioritaire : il est déclaré après, et sa règle porte la classe `.repare` en plus. */ @keyframes studioFlux { from { --studio-arc: 0deg; } to { --studio-arc: 180deg; } } /* ⚠️⚠️ L'EAU S'AGITE PENDANT LA REPRISE. Amadou : « quand j'appuie sur les étoiles, le cours d'eau doit s'agiter un peu ». Le bassin est déjà plein (l'arc est à 180°) : ce qui bouge, c'est l'ORIGINE du dégradé, qui va et vient de quelques degrés — la lumière clapote le long du contour sans que le niveau change. ⚠️ `.repare` seul, PAS `:focus-within .repare` : cliquer l'étoile donne le focus AU BOUTON, pas au champ. Conditionner le clapot au focus le rendrait invisible précisément quand il doit se voir. */ .studio-chat-inputbar.repare::before { opacity: 1; --studio-arc: 180deg; animation: studioClapot .78s ease-in-out infinite, studioRemous 1.27s ease-in-out infinite, studioChaleur .61s ease-in-out infinite; transition: none; } @keyframes studioClapot { 0% { --studio-clapot: -8deg; } 50% { --studio-clapot: 8deg; } 100% { --studio-clapot: -8deg; } } @keyframes studioRemous { 0% { --studio-remous: 4deg; } 50% { --studio-remous: -4deg; } 100% { --studio-remous: 4deg; } } @keyframes studioChaleur { 0% { --studio-chaleur: .9; } 50% { --studio-chaleur: 1.22; } 100% { --studio-chaleur: .9; } } @media (prefers-reduced-motion: reduce) { .studio-chat-inputbar:focus-within::before { animation: none; --studio-arc: 180deg; } .studio-chat-inputbar.repare::before { animation: none; } } /* ⚠️ LE TEXTE REPRIS DOIT SE VOIR CHANGER. Amadou : « quand j'appuie pour améliorer le prompt, le texte doit avoir une petite animation ». Sans elle, le champ se réécrit en silence : on ne sait pas si quelque chose s'est passé, et on reclique — le même défaut que le micro, une heure plus tôt. Le texte se recompose (flou qui se dissipe) plutôt que de clignoter : on doit POUVOIR LE LIRE pendant qu'il arrive, puisque c'est justement ce qu'on va vérifier. */ .studio-prompt-input.repris { animation: studioTexteRepris .52s var(--c-pose); } @keyframes studioTexteRepris { from { opacity: .3; filter: blur(3px); transform: translateY(3px); } to { opacity: 1; filter: blur(0); transform: none; } } @media (prefers-reduced-motion: reduce) { .studio-prompt-input.repris { animation: none; } } /* ⚠️ UNE IMAGE DANS UNE RÉPONSE EST UNE ILLUSTRATION, PAS UNE PIÈCE JOINTE. Amadou (26/08) : « il faut qu'il m'envoie des images pour que ce soit bien illustré ». Elle se pose donc dans le fil, bornée à la largeur de lecture, avec le même arrondi que les autres blocs — et jamais plus haute qu'un tiers d'écran, sinon une seule photo chasse le texte qu'elle illustre. ⚠️ Une image distante peut ne jamais arriver (lien mort, hébergeur qui refuse) : le filet et le fond restent visibles, donc le trou se lit comme un trou plutôt que comme une erreur d'affichage. */ .studio-msg-text.md .md-img { display: block; max-width: 100%; max-height: 34vh; width: auto; margin: var(--e-10) 0; border-radius: var(--r-md); border: 1px solid var(--border); background: rgba(var(--th-voile), .04); object-fit: contain; } /* ⚠️ Une image qui n'a pas chargé ne doit pas laisser un rectangle vide : sans dimension propre, elle retombe à zéro et disparaît de la mise en page — le texte se referme dessus au lieu de contourner un trou. */ .studio-msg-text.md .md-img:not([src]) { display: none; } /* Plusieurs images qui se suivent forment une planche, pas une colonne. */ .studio-msg-text.md p:has(> .md-img + .md-img) { display: flex; flex-wrap: wrap; gap: var(--e-8); } .studio-msg-text.md p:has(> .md-img + .md-img) .md-img { flex: 1 1 var(--e-48); max-height: 24vh; margin: 0; } /* ⚠️⚠️ L'ASCENSEUR DE LA CONVERSATION, MÊME DÉFAUT QUE CELUI DU CHAMP. Amadou (26/08) : « c'est exactement la même chose que je t'avais dit la dernière fois, mais pour la barre dans le chat : c'est vraiment trop imposant, ce n'est pas dans la DA du site, et c'est moche ». Le réglage global fait 8 px avec un pouce en `--bg-hover` — sur un fil de conversation qui occupe tout l'écran, ce trait clair longe la réponse sur toute sa hauteur et attire l'œil autant que le texte. Ici il s'efface : fin, en voile du thème, et il ne se révèle qu'au survol du fil. ⚠️ `scrollbar-color` (Firefox) ET `::-webkit-scrollbar` (Chrome/Brave) — les deux moteurs ne lisent pas le même, et n'en poser qu'un laisse l'autre au trait clair du système. */ .studio-chat-messages { scrollbar-width: thin; scrollbar-color: rgba(var(--th-voile), .06) transparent; } /* ⚠️⚠️ DEUXIÈME BAISSE — la première ne suffisait pas. Amadou (26/08) : « la barre est toujours trop lumineuse ». Elle était à 9 % au repos et montait à 11 % au survol du FIL. Mon erreur : raisonner en pourcentage. Sur un thème sombre, un voile BLANC à 9 % sur du presque-noir donne déjà un trait franc — ce qui compte n'est pas l'opacité mais l'ÉCART avec le fond, et il est maximal ici. Elle descend à 5 %, et surtout le survol du fil ne la révèle PLUS : seul le survol du pouce la marque, au moment où on va l'attraper. Le reste du temps, elle se devine. */ .studio-chat-messages::-webkit-scrollbar-thumb { background: rgba(var(--th-voile), .05); border-radius: var(--r-pilule); transition: background var(--t-moyen) var(--c-pose); } .studio-chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(var(--th-voile), .13); } /* ── Revenir en bas ────────────────────────────────────────────────────────── ⚠️⚠️ ELLE EST ACCROCHÉE À LA BARRE DE SAISIE, pas au fil. Amadou (27/08) : « le bouton pour descendre empiète sur la barre, et il change de position, droite, gauche ». Les deux défauts venaient du même endroit : • `bottom: 104px` était une distance FIXE depuis le bas du fil, alors que la barre grandit avec le texte (97 → 223 px mesurés), avec une photo jointe et avec l'étiquette « Modifier ». Passé un certain point, la barre montait sous la flèche et elles se recouvraient. • `left: 50%` se calculait sur toute la zone de chat, pas sur la barre — donc elle glissait de côté dès que la colonne des conversations se repliait. Posée dans la barre (qui est déjà `position: relative`), elle la suit en hauteur ET en largeur sans qu'aucun chiffre n'ait à être tenu à jour. */ /* ⚠️⚠️⚠️ ET SURTOUT : PLUS DE `translateX(-50%)` POUR CENTRER. C'était ÇA, le « il change de position, droite, gauche ». L'animation d'entrée `velbo-entree` anime `transform` (`translateY(4px)` → `none`) : tant qu'elle joue, elle REMPLACE le transform de la règle, donc le décalage de centrage disparaît et la flèche apparaît 16 px trop à droite avant de sauter à sa place. Mesuré en direct : centre 999 px pendant l'animation, 983 px après — et l'animation rejoue à CHAQUE fois que la flèche revient, puisqu'on la sort de `display: none`. Le centrage passe donc par `left: 0; right: 0; margin-inline: auto`, qui ne touche pas au transform : les deux ne se marchent plus dessus. */ .studio-descendre { position: absolute; left: 0; right: 0; margin-inline: auto; top: calc(-1 * (var(--e-32) + var(--e-10))); width: var(--e-32); height: var(--e-32); display: flex; align-items: center; justify-content: center; border-radius: var(--r-pilule); border: 1px solid var(--border-strong); background: var(--th-panneau); color: var(--th-texte-2); cursor: pointer; padding: 0; box-shadow: 0 var(--e-4) var(--e-14) rgba(var(--th-ombre), .3); z-index: 4; /* ⚠️⚠️ UNE TRANSITION, PAS UNE ANIMATION D'ENTRÉE. Amadou (27/08) : « elle doit disparaître avec un fondu, là c'est trop brusque ». Une `animation` ne joue qu'à l'apparition : le départ restait sec. Une transition, elle, marche dans les DEUX sens avec une seule écriture — et c'est le sens du départ qui manquait. */ opacity: 1; transform: none; transition: opacity var(--t-long) var(--c-pose), transform var(--t-long) var(--c-pose), color var(--t-bref), border-color var(--t-bref); } .studio-descendre:hover { color: var(--th-texte); border-color: rgba(var(--th-accent-rgb), .45); } /* ⚠️ ELLE RESTE DANS LE RENDU. `display: none` la ferait disparaître d'un coup — c'était le défaut. On la rend transparente, on la décale de quatre pixels vers le bas (elle s'en va par où elle est venue), et on coupe les clics. ⚠️ `visibility` est RETARDÉE de la durée du fondu : sans ce délai elle basculerait à la première image et emporterait le fondu avec elle. Et sans `visibility` du tout, un bouton transparent resterait attrapable au clavier. */ .studio-descendre.dehors { opacity: 0; transform: translateY(var(--e-4)); visibility: hidden; pointer-events: none; transition: opacity var(--t-long) var(--c-sortie), transform var(--t-long) var(--c-sortie), visibility 0s linear var(--t-long); } @media (prefers-reduced-motion: reduce) { .studio-descendre, .studio-descendre.dehors { transition: none; } } /* ══ STUDIO — LE BLOC D'ACTIVITÉ, PLIÉ UNE FOIS LE TRAVAIL FINI ══════════════ ⚠️ Déplié en permanence, il empile quatre ou cinq lignes au-dessus de CHAQUE réponse : utiles pendant que ça travaille, inutiles après, et un fil de dix échanges devient une suite de journaux techniques entrecoupés de texte. Replié, il ne laisse qu'une ligne, qu'on rouvre d'un clic. */ .studio-outil { font-size: var(--t-nano); } .studio-outils.replie .studio-outil { display: none; } .studio-outils.replie.ouvert .studio-outil { display: flex; } .studio-outils-resume { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: var(--t-nano); color: var(--th-texte-3); text-align: left; opacity: .75; transition: opacity var(--t-bref) var(--c-pose), color var(--t-bref) var(--c-pose); } .studio-outils-resume::before { content: '▸ '; } .studio-outils.ouvert .studio-outils-resume::before { content: '▾ '; } .studio-outils-resume:hover { color: var(--th-texte-2); opacity: 1; } /* Une seule ligne finie : la pastille verte n'a plus rien à signaler, elle n'est qu'un point de couleur de plus sur un fil qu'on veut calme. */ .studio-outils.replie:not(.ouvert) .studio-outil-pt { display: none; } /* ══ RAYON VINTED D'UNE NICHE ════════════════════════════════════════════════ Amadou (26/08) : « il faut que ça soit un véritable paramètre qui s'ouvre comme la partie journal ou paramètre. » ⚠️ ON EMPRUNTE : la carte est `modal-card--settings`, le champ de recherche est `.de-dd-q` (celui du déroulant maison), les pilules du fil reprennent `.jr-f`. Rien d'inventé, et AUCUNE valeur brute — tout passe par les jetons. ⚠️ `flex: 1 1 0` ET `min-height: 0` sur le corps : sans ça le pied est POUSSÉ DEHORS sur une fenêtre basse, exactement comme le bouton « Enregistrer » des Paramètres. */ .modal-card--rayon .ry-haut { padding: 0 var(--e-22) var(--e-14); border-bottom: 1px solid var(--border); flex-shrink: 0; } .ry-fil { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-4); margin-bottom: var(--e-10); min-height: var(--e-24); } /* Un cran du fil d'Ariane. Reprend la pilule de filtre du Journal (`.jr-f`). */ .ry-cran { font-size: var(--t-meta); padding: var(--e-4) var(--e-12); border-radius: var(--r-pilule); border: 1px solid var(--border-mid); background: transparent; color: var(--text-2); font-family: inherit; cursor: pointer; transition: color var(--t-moyen), border-color var(--t-moyen); } .ry-cran:hover { color: var(--text); border-color: var(--border-strong); } .ry-cran.ici { background: var(--violet-tint-strong); border-color: transparent; color: var(--violet-light); cursor: default; } .ry-sep { color: var(--text-3); font-size: var(--t-meta); } .ry-q { margin-bottom: 0; } /* ⚠️⚠️ PAS DE `flex: 1 1 0` ICI — MESURÉ : la liste s'écrasait à 24 px de haut alors qu'elle contenait ses 13 lignes. Avec une base flex à 0, le corps ne compte pour RIEN dans la hauteur intrinsèque de la carte : la carte ne grandit donc jamais, et il ne reste aucune place à distribuer. C'est le contraire du défaut des Paramètres (là, le corps refusait de rétrécir et poussait le pied dehors) — même famille, sens inverse. On copie le Journal (`.jr-corps`), qui n'a AUCUNE propriété flex : une hauteur, un plafond en vh, et le débordement qui défile. Il marche depuis des semaines. */ .ry-corps { overflow-y: auto; padding: var(--e-12) var(--e-16); height: 460px; max-height: 56vh; } /* Une ligne du catalogue. Reprend l'option du déroulant maison (`.de-dd-opt`), en deux colonnes : le nom, puis ce qu'il y a dessous. */ .ry-ligne { display: flex; align-items: center; gap: var(--e-12); padding: var(--e-10) var(--e-12); border-radius: var(--r-sm); cursor: pointer; font-size: var(--t-base); color: var(--text); } .ry-ligne:hover { background: var(--bg-hover); } .ry-ligne.sel { background: var(--violet-tint); color: var(--violet-light); } .ry-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Le chemin complet, montré seulement dans les résultats de recherche : sans lui, deux « Robes » — celle des femmes et celle des enfants — sont indiscernables. */ .ry-voie { display: block; font-size: var(--t-micro); color: var(--text-3); margin-top: var(--e-2); } /* ══ RÉGLAGES D'UN PACK — ce qu'il photographie ═════════════════════════════ ⚠️⚠️ TOUT EST EMPRUNTÉ AU PANNEAU « RAYON VINTED » juste au-dessus : même corps qui défile, même ligne, même état choisi (`.ry-ligne.sel`). Inventer une deuxième façon de présenter une liste de choix, c'est la faire diverger au premier changement — le projet a payé six fois « emprunter, jamais inventer ». ⚠️ L'ÉTAT CHOISI SE VOIT AUSSI À LA GRAISSE, pas seulement à la teinte : un état qui ne tient qu'à une couleur disparaît pour qui la distingue mal, et l'ambre du site est déjà le doré de l'accent. */ .pkreg-corps { overflow-y: auto; padding: var(--e-12) var(--e-16); max-height: 56vh; } .pkreg-quoi, .pkreg-vide { font-size: var(--t-meta); color: var(--text-2); line-height: var(--lh-normal); margin: 0 0 var(--e-12); padding: 0 var(--e-12); } .pkreg-ligne { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); width: 100%; text-align: left; padding: var(--e-10) var(--e-12); border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; font-family: inherit; font-size: var(--t-base); color: var(--text); cursor: pointer; transition: background var(--t-moyen), color var(--t-moyen); } .pkreg-ligne:hover { background: var(--bg-hover); } .pkreg-ligne.est-choisi { background: var(--violet-tint); color: var(--violet-light); font-weight: var(--fw-moyen); } .pkreg-noms { line-height: var(--lh-serre); } .pkreg-rayon { font-size: var(--t-micro); color: var(--text-3); } .pkreg-ligne.est-choisi .pkreg-rayon { color: var(--violet-light); } .pkreg-etat { flex: 1 1 auto; font-size: var(--t-meta); color: var(--text-3); } /* ══ CHOISIR UN PACK POUR LA GÉNÉRATION ════════════════════════════════════ ⚠️⚠️ RIEN N'EST DESSINÉ ICI : les cartes sont celles de l'écran Packs (`.pk-portes`, `.pk-porte`, `.lib-niches-grille`, `.lib-niche`) et le fil celui de la Bibliothèque (`.lib-fam-fil`). Cette feuille ne pose que le CADRE — la fenêtre et le corps qui défile. Redessiner une carte ici, ce serait deux apparences à tenir pour la même chose, et elles divergeraient au premier changement. */ .modal-card--pkchoix { width: min(980px, 92vw); } .pkx-haut { padding: 0 var(--e-22) var(--e-12); flex-shrink: 0; } /* ⚠️ IL DIT CE QUI REMONTE, ET QUE RIEN N'EST CACHÉ. Amadou : « il remonte, sans cacher » — un ordre qu'on ne nomme pas ressemble à un filtre qui a mangé le reste. */ .pkx-dit { font-size: var(--t-meta); color: var(--text-2); line-height: var(--lh-normal); margin-top: var(--e-8); } /* ⚠️⚠️⚠️ LE SCROLLER N'EST PAS LA GRILLE, et c'est la correction d'un défaut mesuré à 375 px. Quand `.pkx-corps` portait LUI-MÊME `.lib-niches-grille`, ses rangées tombaient à 2 px : une carte `.lib-niche` n'a que du contenu ABSOLU et tire sa hauteur d'un `aspect-ratio: 4/5`, ce qui ne se résout pas dans un conteneur à `max-height` + `overflow`. Les cinquante cartes se chevauchaient. Relevé côte à côte : 408 px de rangée sur l'écran Packs, 2 px ici. On reprend son imbrication — le scroller dehors, la grille dedans. */ .pkx-corps { overflow-y: auto; padding: var(--e-12) var(--e-22) var(--e-22); max-height: 62vh; } /* ⚠️ LA MARGE BASSE DE `.lib-niches-grille` (32 px) doublerait le pas du scroller : elle est déjà donnée par le `padding` du corps. */ #pkx-grille { margin-bottom: 0; } /* Un pack sans une seule photo ne peut rien donner au générateur : il se voit, il ne se choisit pas. ⚠️ ON L'ÉTEINT SANS LE CACHER — le faire disparaître laisserait croire qu'il n'existe pas, alors qu'il attend ses photos. */ .lib-niche--vide { opacity: .45; cursor: default; } /* ══ L'HISTORIQUE DES IMPORTS ══════════════════════════════════════════════ ⚠️ LA LIGNE EST CELLE DU JOURNAL, pas une nouvelle : vignette, corps, heure à droite. Deux listes qui se ressemblent sans être pareilles, c'est l'écart qu'on ne voit qu'en plaçant les deux écrans côte à côte. */ .imp-jour { display: flex; align-items: baseline; gap: var(--e-10); font-size: var(--t-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); padding: var(--e-20) var(--e-4) var(--e-8); } .imp-jour-note { text-transform: none; letter-spacing: var(--ls-zero); color: var(--text-3); } .imp-ligne { display: flex; align-items: flex-start; gap: var(--e-12); width: 100%; text-align: left; font-family: inherit; cursor: pointer; padding: var(--e-10) var(--e-12); border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--text); border-top: 1px solid var(--border); transition: background var(--t-moyen); } .imp-ligne:hover { background: var(--bg-hover); } .imp-vign { flex: none; width: var(--e-40); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--surface-2); } .imp-vign img { width: 100%; height: 100%; object-fit: cover; display: block; } .imp-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--e-4); } .imp-nom { font-size: var(--t-base); line-height: var(--lh-serre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-6); } .imp-puce { font-size: var(--t-micro); padding: var(--e-2) var(--e-8); border-radius: var(--r-pilule); border: 1px solid var(--border-mid); color: var(--text-2); } .imp-puce--ok { border-color: var(--violet-mid); color: var(--violet-light); } /* ⚠️ L'ABSENCE DE NICHE SE VOIT — c'est le fait qu'Amadou cherche : « je ne sais même pas où elle a été classée ». Et elle se distingue par sa FORME (un fond plein), pas seulement par sa teinte. */ /* ⚠️⚠️⚠️ `--red-tint` N'EXISTE PAS, ET JE L'AVAIS ÉCRIT. Un `var()` sur une variable non déclarée rend la déclaration invalide EN SILENCE — la pastille aurait été transparente, sans une erreur nulle part. Mesuré : déclaré 0 fois, utilisé 1 fois — par moi. ⚠️ ON EMPRUNTE LA PASTILLE ROUGE DU SITE (`.cok-badge.r`), qui existe et qui est tenue par les dix-sept thèmes. */ .imp-puce--sans { border-color: var(--cok-red); background: var(--cok-red-bg); color: var(--cok-red); } .imp-chiffres { font-size: var(--t-micro); color: var(--text-3); } .imp-heure { flex: none; font-size: var(--t-meta); color: var(--text-3); font-variant-numeric: tabular-nums; padding-top: var(--e-2); } .imp-manque { font-size: var(--t-meta); color: var(--text-2); border-left: var(--e-1) solid var(--border-mid); padding-left: var(--e-12); margin-bottom: var(--e-8); } .imp-vide { font-size: var(--t-meta); color: var(--text-3); padding: var(--e-20) var(--e-4); } .ry-sous { flex: 0 0 auto; font-size: var(--t-micro); color: var(--text-3); } .ry-chev { flex: 0 0 auto; color: var(--text-3); display: flex; } .ry-vide { padding: var(--e-24) var(--e-12); text-align: center; color: var(--text-3); font-size: var(--t-base); } /* Le pied : le choix courant à gauche, les boutons à droite. */ .ry-pied { padding: var(--e-14) var(--e-22); border-top: 1px solid var(--border); flex-shrink: 0; align-items: center; } .ry-choix { margin-right: auto; font-size: var(--t-meta); color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ry-choix b { color: var(--text); font-weight: var(--fw-fort); } /* ⚠️ AU FORMAT ÉTROIT, LE CHOIX DISPARAISSAIT. Mesuré à 390 px : « Rayon choisi : Maison › Outils et bricolage › Outils à main » était tronqué jusqu'à ne plus rien afficher, écrasé par les deux boutons. On perdait la seule chose qui dit ce qu'on s'apprête à valider. Il passe donc sur sa propre ligne, au-dessus des boutons. 760 px : le point de rupture déjà employé neuf fois dans cette feuille. */ @media (max-width: 760px) { .ry-pied { flex-wrap: wrap; } .ry-choix { flex: 1 0 100%; margin-right: 0; margin-bottom: var(--e-10); white-space: normal; overflow: visible; line-height: 1.4; } /* ⚠️ LES DEUX BOUTONS NE TIENNENT PAS SUR UNE LIGNE, MESURÉ : 128 + 122 + 10 = 260 px pour 247 disponibles à 390 px de large — et c'est déjà avec le libellé raccourci en « Tout le catalogue » (qui reprend au passage le premier cran du fil d'Ariane). Les comprimer faisait déborder le texte de sa boîte ; les laisser s'empiler alignés à droite donnait un pied en escalier. On les passe donc PLEINE LARGEUR, comme le projet le fait déjà pour `.hist-panel-actions .btn-ghost`. */ .ry-pied .btn-ghost, .ry-pied .btn-primary { width: 100%; justify-content: center; } } /* ══ AMÉLIORER UNE VUE ════════════════════════════════════════════════════════ Amadou (02/09) : un bouton à côté d'« Importer », et un panneau de degrés. Le champ d'instructions de « Régénérer » ne s'ouvre qu'à la demande — il occupait la place sous chaque vue en permanence. */ /* ⚠️ LA ZONE VIDE EST LE BOUTON. Amadou (02/09) : « supprime le bouton importer, il ne sert à rien, j'ai juste à appuyer sur la partie du dessus ». Mesuré avant de le retirer : la zone n'était PAS cliquable et son curseur ne disait rien — le supprimer sans ça aurait ôté le seul chemin pour déposer une photo. */ .atelier-img-zone--cliquable { cursor: pointer; } .atelier-img-zone--cliquable:hover { border-color: var(--violet); background: var(--bg-hover); } .atelier-img-zone--cliquable:hover .atelier-img-placeholder { color: var(--text-2); } .atelier-img-zone--cliquable:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } /* ⚠️ L'ÉTIQUETTE DU DEGRÉ (« décor rangé ») A ÉTÉ RETIRÉE LE 05/09. Amadou : « je ne vois pas l'utilité ». Elle nommait un travail DEMANDÉ, pas un résultat constaté — sur une photo dont la pièce n'avait pas bougé, elle décrivait une chose qui n'a pas eu lieu. Le pan est parti en entier : le dessinateur, cette règle et son garde-fou. */ .atelier-regen-box { display: flex; flex-direction: column; gap: var(--e-6); margin-top: var(--e-6); } .atelier-regen-go { width: 100%; } /* ⚠️ `.atelier-zone-travaille` A ÉTÉ RETIRÉE : c'était un simple estompage, alors que le site avait déjà un voile de travail — le balayage de la vérification. Amadou (02/09) : « il doit y avoir une animation comme la vérif de la conformité ». Un seul voile (`_atelierVoileTravail`) sert désormais l'amélioration ET le recadrage IA. */ /* ══ RÉGLAGES D'ATELIER D'UNE NICHE ═══════════════════════════════════════════ Amadou (02/09) : « clic droit sur niche […] un espace où je vais pouvoir configurer pour l'Atelier ». Trois réglages, une fenêtre, aucun style neuf : les cartes de choix reprennent celles de l'Atelier (`.atelier-choix`), la fenêtre reprend `--settings`. */ /* ⚠️⚠️ 560 px, C'ÉTAIT DEUX FOIS TROP PETIT — et c'est la MÊME leçon que le Journal, écrite en toutes lettres dans index.html : « ma carte à 470 px ressemblait ». Amadou (03/09) : « ça prend la taille du journal, qui a vraiment de la place ». On ne surcharge donc plus la largeur : `modal-card--settings` donne 760 px et 86vh, comme Paramètres, comme le Journal, comme le Rayon. `--nial` ne garde que ce qui lui est propre. */ .nial-onglets { padding-top: var(--e-2); } /* ⚠️⚠️ UNE HAUTEUR FIXE, PAS UN PLAFOND. Amadou (03/09) : « le panneau doit faire la même taille pour la partie génération et atelier ». Avec `max-height` seul, la carte se dimensionne sur son contenu : l'Atelier a trois sections et ses vues, la Génération deux — la fenêtre changeait donc de taille en cliquant un onglet, et le pied remontait sous la souris. C'est exactement ce que fait le Journal (`.jr-corps`), pour la même raison : on lui emprunte sa recette, `height` + `max-height`. */ .nial-corps { overflow-y: auto; padding: var(--e-12) var(--e-22) var(--e-20); height: 540px; max-height: 62vh; } .nial-chapeau { font-size: var(--t-meta); color: var(--text-3); line-height: var(--lh-serre); } .nial-titre { font-size: var(--t-mini); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); margin: var(--e-20) 0 var(--e-8); } /* ⚠️ TROIS CHOIX DEPUIS LE 02/09 (« porté et objet »). `auto-fit` plutôt que trois colonnes en dur : à l'étroit, les cartes passent à la ligne au lieu d'être écrasées. */ .nial-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--e-8); } .nial-carte { display: block; text-align: left; font-family: inherit; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e-10) var(--e-12); color: var(--text); transition: var(--transi); } .nial-carte:not(.nial-carte--on):hover { border-color: var(--border-mid); background: var(--bg-hover); } .nial-carte--on { border-color: var(--violet); background: var(--violet-tint); } .nial-carte b { display: block; font-size: var(--t-base); font-weight: var(--fw-moyen); } .nial-carte span { display: block; font-size: var(--t-mini); color: var(--text-3); margin-top: var(--e-2); } .nial-note { font-size: var(--t-mini); color: var(--text-3); margin-top: var(--e-8); line-height: var(--lh-serre); } /* Une vue : son rang, son nom, et de quoi la déplacer ou la retirer. */ .nial-vues { display: flex; flex-direction: column; gap: var(--e-6); } /* La consigne d'une vue, dans sa fenêtre. ⚠️ Amadou (02/09) : « quand j'appuie sur le prompt, ça doit ouvrir un mini panneau ». Dépliée sous la carte, elle se lisait dans une colonne de 190 px — six mots par ligne pour deux mille caractères. */ .atl-consigne-modal { position: fixed; inset: 0; z-index: 120; background: rgba(var(--th-ombre), 0.62); display: flex; align-items: center; justify-content: center; padding: var(--e-20); } .atl-consigne-carte { width: min(560px, 94vw); max-height: 76vh; display: flex; flex-direction: column; background: var(--th-panneau); border: 1px solid var(--border); border-radius: var(--r-panneau); overflow: hidden; } .atl-consigne-tete { display: flex; align-items: center; justify-content: space-between; padding: var(--e-16) var(--e-20); border-bottom: 1px solid var(--border); } .atl-consigne-tete h3 { margin: 0; font-size: var(--t-body); font-weight: var(--fw-moyen); } .atl-consigne-corps { overflow-y: auto; padding: var(--e-16) var(--e-20) var(--e-20); font-size: var(--t-meta); line-height: var(--lh-aere); color: var(--text-2); white-space: pre-wrap; } /* ⚠️ LA CONSIGNE DE PRISE DE VUE (02/09) : écrite une fois dans la niche, elle voyage jusqu'au générateur. Même dessin que les autres champs du site. */ .nial-consigne { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-family: inherit; font-size: var(--t-meta); padding: var(--e-8); resize: vertical; line-height: var(--lh-normal); } .nial-consigne:focus { outline: none; border-color: var(--violet); } .nial-consigne:disabled { opacity: 0.5; cursor: default; } .nial-consigne--vue { margin-top: var(--e-6); font-size: var(--t-mini); } /* La photo de départ d'une vue : une vignette qui EST le bouton. ⚠️ Un carré vide qui ne dit pas qu'il se clique ne se clique pas — d'où la bordure pointillée et l'icône quand rien n'est posé. */ .nial-tpl { width: 34px; height: 42px; flex: none; padding: 0; cursor: pointer; border: 1px dashed var(--border-strong); border-radius: var(--photo-rayon); background: transparent center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--text-3); transition: border-color var(--t-moyen); } .nial-tpl:hover { border-color: var(--violet-light); color: var(--text-2); } .nial-tpl--pleine { border-style: solid; border-color: var(--border-mid); } /* ⚠️ LES STYLES DU DIAGNOSTIC DES NICHES ONT ÉTÉ RETIRÉS AVEC LUI (04/09). Amadou : « tu pourras aussi supprimer le bouton diagnostic » — la gestion passe par la BIBLIOTHÈQUE DE PACKS, un sous-onglet à part entière. Du CSS qui ne style plus rien se fait recopier par le suivant qui cherche un motif, et surtout il garde des noms qui se remettent à gagner tout seuls le jour où quelqu'un les réutilise. */ /* ══ LA BIBLIOTHÈQUE DE PACKS ════════════════════════════════════════════════ Amadou (04/09) : « l'écran des réglages, ce sera la nouvelle bibliothèque de packs. C'est ici qu'on va gérer les packs. » Un pack se lit d'un coup d'œil : ses prises de vue en vignettes, son type, et les niches qu'il sert. ⚠️ AUCUNE VALEUR BRUTE — tout passe par les jetons. */ /* ⚠️ IL DIT CE QUI MANQUE, PAS CE QUI VA : 7 niches sur 9 n'ont aucun pack, et la Génération leur sert les vues d'origine sans qu'un seul écran le dise. */ .pk-manque { display: flex; align-items: flex-start; gap: var(--e-10); padding: var(--e-12) var(--e-14); margin-bottom: var(--e-16); border-radius: var(--r-lg); border: 1px solid var(--amber); background: var(--surface-2); font-size: var(--t-base); color: var(--text-2); line-height: var(--lh-normal); } .pk-manque svg { flex: none; color: var(--amber); margin-top: var(--e-2); } .pk-manque b { color: var(--text); font-weight: var(--fw-moyen); } /* ⚠️⚠️⚠️ DE LA PLACE POUR LE SURVOL, DANS L'ATELIER SEULEMENT. Amadou (05/09) : « quand je survole une des recettes, le haut se coupe ». La porte se lève de 2 px au survol, et `.atelier-step-body` est en `overflow: hidden` — il le doit, c'est lui qui anime le dépliage de l'étape. On ne peut pas lui rendre son débordement sans casser l'animation : on donne la place À L'INTÉRIEUR, exactement comme le 02/09 pour les cartes de niches. ⚠️ SCOPÉ À L'ATELIER : dans l'onglet Packs le canevas déborde librement, et y ajouter du creux décalerait les trois portes sans raison. */ #atelier-step-1 .pk-portes { padding-top: var(--e-6); } /* ══ LES TROIS PORTES — TRAITEMENT TYPOGRAPHIQUE ═══════════════════════════════ Amadou (05/09) a choisi cette mise en page après en avoir vu trois : le nom en grand calé EN BAS À GAUCHE, un numéro d'ordre au-dessus, un filet, le compte — et la silhouette de la recette en filigrane derrière. ⚠️⚠️ ELLE N'EMPRUNTE PLUS `.lib-fam-carte`, et c'est assumé : cette carte-là centre tout. Lui imposer ce plan demanderait de redire la moitié de ses propriétés, et le jour où la carte des Familles bouge, celle des recettes bougerait avec elle sans raison. ⚠️ TROIS PORTES, ÇA SE DIT `repeat(3, …)` — pas un `auto-fill` fait pour dix-sept familles, qui remplirait trois colonnes sur huit. ⚠️ `minmax(0, 1fr)` ET PAS `1fr` : le défaut d'une colonne de grille est `min-width: auto`, donc un nom long la pousse au-delà du conteneur. */ .pk-portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-16); } /* ⚠️⚠️⚠️ UNE HAUTEUR FIXE, ET C'EST LA TROISIÈME FOIS QU'ON LA RÈGLE. Étape 1 : trois cartes de 214 px perdues dans un canevas de 1098 — « il doit prendre toute la place ». Étape 2 : elles ont pris TOUTE la place, soit 550 × 850 px avec une icône de 96 px au milieu — « l'interface ne me plaît pas ». Trois portes larges, hauteur humaine. */ .pk-porte { position: relative; height: calc(var(--e-48) * 7); overflow: hidden; display: block; text-align: left; padding: var(--e-20); border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg-card-solid); font-family: inherit; cursor: pointer; transition: border-color var(--t-moyen), transform var(--t-moyen); animation: velbo-entree var(--t-long) var(--pose) backwards; animation-delay: calc(var(--rang, 0) * 55ms); } @media (prefers-reduced-motion: reduce) { .pk-porte { animation: none; } } .pk-porte:hover { border-color: var(--violet-mid); transform: translateY(calc(var(--e-2) * -1)); } /* ⚠️⚠️ UNE RECETTE SANS PACK RESTE AFFICHÉE — c'est justement là qu'il faut aller. Mais elle doit se VOIR : mesuré à 900 px, ses deux portes étaient peintes, à la bonne place, opacité 1 — et invisibles à l'œil, leur filet à 0,114 d'alpha se noyant sur ce fond. Une carte qu'on ne voit pas est une carte qu'on ne clique pas. Le projet avait déjà tranché la même question pour la carte « Nouvelle niche » : le filet MOYEN est le minimum ici. La différence se dit alors par le filigrane et le numéro, qui prennent l'accent. */ .pk-porte--vide { border-color: var(--border-mid); } /* La silhouette : GRANDE, à droite, et très pâle. Elle teinte la carte, elle ne se lit pas. ⚠️ `pointer-events: none` : sinon elle intercepte le clic destiné à la porte. */ .pk-porte-sil { position: absolute; right: calc(var(--e-12) * -1); top: var(--e-16); bottom: var(--e-48); display: block; pointer-events: none; color: var(--text-3); opacity: 0.14; } .pk-porte--vide .pk-porte-sil { opacity: 0.1; } .pk-porte-sil svg { height: 100%; width: auto; } .pk-porte:not(.pk-porte--vide) .pk-porte-sil { color: var(--violet-soft); opacity: 0.16; } /* Le bloc de texte, calé en bas à gauche. */ .pk-porte-bas { position: absolute; left: var(--e-20); right: var(--e-20); bottom: var(--e-18); display: block; } .pk-porte-num { display: block; margin-bottom: var(--e-6); font-size: var(--t-mini); letter-spacing: var(--ls-caps); color: var(--text-3); font-variant-numeric: tabular-nums; } .pk-porte:not(.pk-porte--vide) .pk-porte-num { color: var(--violet-light); } .pk-porte-nom { display: block; font-size: var(--t-title); font-weight: var(--fw-fort); line-height: var(--lh-titre); color: var(--text); } /* Le filet vit sur le compte : une ligne de moins dans le DOM, et il ne peut pas se retrouver seul si le compte disparaît. */ .pk-porte-n { display: block; margin-top: var(--e-10); padding-top: var(--e-10); border-top: 1px solid var(--border); font-size: var(--t-meta); color: var(--text-2); font-variant-numeric: tabular-nums; } .pk-porte--vide .pk-porte-n { color: var(--text-3); } /* ⚠️ EN DESSOUS DE 980 px, TROIS COLONNES DEVIENNENT TROIS COULOIRS : à 900 px de fenêtre et barre latérale dépliée, il reste 596 px pour trois portes, soit 188 de large. On raccourcit plutôt que d'empiler — trois cartes qui se voient d'un coup, c'est tout l'intérêt de n'en avoir que trois. */ @media (max-width: 980px) { .pk-porte { height: calc(var(--e-48) * 5); padding: var(--e-14); } .pk-porte-bas { left: var(--e-14); right: var(--e-14); bottom: var(--e-12); } .pk-porte-nom { font-size: var(--t-body); } .pk-porte-sil { bottom: var(--e-40); right: calc(var(--e-8) * -1); } } /* ⚠️⚠️ LA BARRE DE SOUS-ONGLETS, DÉNUDÉE. `an-souso` est une BANDE : dégradé, bordure basse, 32 px de marge — taillée pour vivre pleine largeur sous le bandeau. Au milieu d'une page elle dessine un rectangle qui n'a rien à faire là. On garde les pastilles, on retire la bande, et on les centre. */ .an-souso--nu { justify-content: center; padding: 0; background: none; border-bottom: 0; } /* ══ LA PAGE D'UN PACK — TROISIÈME ÉTAGE ═══════════════════════════════════════ Amadou (04/09) : « ça doit ouvrir une page entière maintenant, ça va fortement ressembler à un pack comme ça niveau interface ». Le modèle est la fiche d'une mannequin : un grand titre, un intitulé en petites capitales souligné, puis les photos en ligne avec leur nom dessous. ⚠️ TOUTES LES CLASSES SONT EN `pkp-` : une autre session travaille dans cette feuille au même moment, sur des `pk-l-*`. Un préfixe à part, c'est zéro croisement possible. */ .pkp { display: flex; flex-direction: column; gap: var(--e-18); } .pkp-tete h2 { margin: 0; font-size: var(--t-title); font-weight: var(--fw-fort); line-height: var(--lh-titre); color: var(--text); } .pkp-sous { margin-top: var(--e-4); font-size: var(--t-base); color: var(--text-2); } .pkp-vues { /* ⚠️⚠️ UNE RANGÉE CENTRÉE, PLUS UNE GRILLE ÉTALÉE. Amadou (04/09) : « diminue l'espace entre les vues et elles doivent être centrées ». Une grille de colonnes égales étale les vignettes sur toute la largeur quoi qu'on fasse — c'est son métier. Un `flex` centré les groupe, et l'écart devient vraiment l'écart entre deux photos. ⚠️ `flex-wrap` : une recette de six vues ne doit pas déborder de l'écran. */ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-10); } .pkp-v { display: flex; flex-direction: column; gap: var(--e-10); } /* ⚠️ LA PHOTO EST UN BOUTON PLEIN CADRE : c'est le geste principal de cette page. */ .pkp-ph { position: relative; /* ⚠️⚠️⚠️ 3:4, ET LA HAUTEUR COMMANDE. Amadou (04/09) : « les photos doivent être en format 3:4, pas carré ». Trois réglages ont précédé : le ratio seul faisait 735 px de haut pour 551 de large (trop haut), la hauteur seule faisait un cadre paysage qui rognait la photo (carré à l'œil). Ici la hauteur est fixe ET le ratio tenu : la LARGEUR s'en déduit, 288 px, et la vignette se centre dans sa colonne. ⚠️ La colonne, elle, reste à `1fr` — la RANGÉE tient toujours toute la largeur, ce sont les photos qui ne s'étirent plus. */ aspect-ratio: 3 / 4; height: calc(var(--e-48) * 8); width: auto; max-width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-6); padding: 0; cursor: pointer; font-family: inherit; font-size: var(--t-meta); color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); transition: var(--transi); } .pkp-ph:hover { border-color: var(--violet-soft); color: var(--text-2); } .pkp-ph svg { width: var(--e-24); height: var(--e-24); } /* ⚠️⚠️ `object-position: center top` — ET C'EST LE DÉTAIL QUI COMPTE. Les photos de départ sont des selfies en pied dans un miroir : un cadre plus large que haut les recoupe, et un recadrage centré coupe la tête. On garde le haut. */ .pkp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* ⚠️ « Remplacer » NE S'AFFICHE QU'AU SURVOL D'UNE VIGNETTE PLEINE : posé en permanence, il masque le coin de la photo qu'on vient justement regarder. */ .pkp-remp { position: absolute; right: var(--e-8); bottom: var(--e-8); z-index: 1; padding: var(--e-4) var(--e-10); border-radius: var(--r-pilule); background: rgba(var(--th-ombre), 0.72); color: var(--sur-sombre); font-size: var(--t-mini); opacity: 0; transition: var(--transi); } .pkp-ph--pleine:hover .pkp-remp { opacity: 1; } /* La légende — celle de la fiche d'une mannequin : centrée, petites capitales grises. ⚠️ Le mode se lit ICI, en clair, sans pastille : une pastille violette à côté d'un libellé n'existe nulle part ailleurs sur le site. */ .pkp-lg { text-align: center; font-size: var(--t-mini); letter-spacing: var(--ls-caps); color: var(--text-3); line-height: var(--lh-serre); } /* ⚠️ L'ENTÊTE D'UNE VUE, SA PASTILLE DE MODE ET SA CONSIGNE ONT ÉTÉ RETIRÉES (04/09). Amadou : « enlève le texte en dessous là, qui ne sert à rien — ce que cette vue doit montrer, on s'en fiche ». Une vue, c'est une photo et sa légende. La donnée `consigne`, elle, reste écrite : le champ a disparu, pas ce qui était déjà saisi. */ /* ══ LES COMPTES D'UN PACK — DEUX RANGÉES ══════════════════════════════════════ Amadou (05/09) : ceux en service en grand, ceux qu'on peut ajouter en petit dessous, et la recherche SOUS les bulles. Avant : deux listes empilées dont un mur de quatorze pastilles grises toutes pareilles — on ne voyait ni qui servait, ni ce qui manquait. ⚠️ CENTRÉ, comme la rangée des vues : les deux onglets d'une même page ne peuvent pas avoir deux alignements. */ .pkp-mur { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-22); } /* ⚠️⚠️ DE L'AIR AU-DESSUS. Amadou : « les icônes sont trop collées ». Les ronds venaient à 12 px sous les pastilles d'onglet : la barre et la première rangée se lisaient comme un seul bloc. */ .pkp-mur--grand { margin-top: var(--e-24); } .pkp-mur--petit { gap: var(--e-14); } .pkp-cpt { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding: 0; cursor: pointer; font-family: inherit; text-align: center; background: none; border: 0; color: inherit; transition: var(--transi); } .pkp-mur--grand .pkp-cpt { width: calc(var(--e-48) * 2 + var(--e-10)); } .pkp-mur--petit .pkp-cpt { width: calc(var(--e-48) + var(--e-20)); } .pkp-cpt:not(:disabled):hover .pkp-rond { border-color: var(--violet-soft); } .pkp-cpt:disabled { cursor: not-allowed; } /* Le rond. ⚠️ `overflow: hidden` ET l'image en `cover` : un avatar Vinted n'est pas carré, et sans ça il déborde du cercle par un coin. */ .pkp-rond { position: relative; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: var(--e-8); line-height: var(--lh-un); color: var(--text-3); background: var(--surface-2); border: 1.5px dashed var(--border-strong); transition: var(--transi); } .pkp-rond img { width: 100%; height: 100%; object-fit: cover; } .pkp-mur--grand .pkp-rond { width: calc(var(--e-48) * 2); height: calc(var(--e-48) * 2); font-size: var(--t-title); } .pkp-mur--petit .pkp-rond { width: var(--e-48); height: var(--e-48); font-size: var(--t-base); margin-bottom: var(--e-6); } /* ⚠️⚠️ EN SERVICE SE DIT PAR LE CERCLE, PAS PAR LA TEINTE DU FOND : l'ambre et l'accent sont le même doré sur certains thèmes, et un fond accentué se lirait « survolé ». Le trait plein contre le pointillé, lui, se voit dans les dix-sept. */ .pkp-cpt--on .pkp-rond { border-style: solid; border-color: var(--violet); } .pkp-cpt--bloque { opacity: 0.42; } /* ⚠️ Un compte disparu se dit par la couleur d'ALERTE, jamais par l'accent. */ .pkp-cpt--perdu .pkp-rond { border-style: solid; border-color: var(--amber); color: var(--amber); } .pkp-cpt--perdu .pkp-cpt-nom, .pkp-cpt--perdu .pkp-cpt-etat { color: var(--amber); } /* Le cadenas se pose PAR-DESSUS le visage : on veut savoir QUI est bloqué. */ .pkp-cadenas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--th-ombre), 0.55); color: var(--sur-sombre); } .pkp-cadenas svg { width: var(--e-18); height: var(--e-18); } .pkp-cpt-nom { font-size: var(--t-meta); color: var(--text-2); line-height: var(--lh-serre); } .pkp-mur--petit .pkp-cpt-nom { font-size: var(--t-mini); } .pkp-cpt-etat { font-size: var(--t-mini); color: var(--text-3); line-height: var(--lh-serre); } .pkp-bilan { text-align: center; margin-top: var(--e-16); font-size: var(--t-mini); letter-spacing: var(--ls-caps); color: var(--text-3); } /* Le second étage, sous son filet. */ .pkp-bas { margin-top: var(--e-22); padding-top: var(--e-20); border-top: 1px solid var(--border); } .pkp-bilan--titre { margin-top: 0; margin-bottom: var(--e-16); } /* ⚠️ LA RECHERCHE EST SOUS LES BULLES, et c'est demandé. L'usage la met au-dessus ; ici elle filtre ce qui est juste au-dessus d'elle, et on la trouve en descendant. */ .pkp-rech { display: flex; justify-content: center; margin-top: var(--e-18); } .pkp-rech-champ { width: calc(var(--e-48) * 5); max-width: 100%; padding: var(--e-8) var(--e-12); font-family: inherit; font-size: var(--t-base); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pilule); } .pkp-rech-champ:focus { outline: none; border-color: var(--violet-soft); } .pkp-vide { font-size: var(--t-base); color: var(--text-3); font-style: italic; } .pk-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: var(--e-14); } /* ⚠ LES TROIS RECETTES N’ONT PAS DE CARTE À ELLES : elles empruntent `.lib-fam-carte`, le mur des familles. Une carte maison (lettre, vues, ronds de comptes) a vécu ici le 04/09 — Amadou : « ça doit être comme l’onglet familles, même config ». Elle est partie avec ses onze règles ; il ne reste rien à tenir de ce côté. */ .pk-pack { display: block; text-align: left; font-family: inherit; cursor: pointer; padding: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-carte); overflow: hidden; color: inherit; transition: border-color var(--t-moyen), transform var(--t-moyen); } /* ⚠️ `:not(.pk-neuf)` : la carte « Nouveau pack » est en pointillé, la soulever la ferait passer pour une carte pleine. */ .pk-pack:not(.pk-neuf):hover { border-color: var(--violet-soft); transform: translateY(-3px); } /* Les prises de vue, en bande. ⚠️ UNE CASE VIDE EST MONTRÉE, et c'est voulu : un pack à deux vues sur trois se voit d'un coup d'œil. Sans elle, il faudrait compter. */ /* ⚠️ LE NOMBRE DE COLONNES VIENT DU CONTENU (`--pk-cols`, posé par le rendu). Figé à trois, un pack de trois vues renvoyait « + une vue » à la ligne suivante et creusait deux trous à côté d'elle. */ .pk-vues { display: grid; grid-template-columns: repeat(var(--pk-cols, 3), 1fr); gap: var(--e-1); background: var(--border); } .pk-vue { aspect-ratio: 3 / 4; position: relative; display: flex; align-items: flex-end; background: var(--surface) center/cover no-repeat; } .pk-vue span { font-size: var(--t-micro); color: var(--text-2); padding: var(--e-4) var(--e-6); line-height: var(--lh-serre); /* ⚠️ LE NOM SE LIT SUR N'IMPORTE QUELLE PHOTO : une plaque sombre, pas une couleur de texte. Les fonds mentent selon la clarté — même alpha, ×1,02 sur une nuit et ×2,78 sur du sable. */ background: rgba(var(--th-ombre), 0.55); width: 100%; } .pk-vue--nue { background: var(--surface-2); } .pk-vue--nue span { background: none; color: var(--text-3); } .pk-vue--plus { align-items: center; justify-content: center; border: 1px dashed var(--border-strong); background: transparent; } .pk-vue--plus span { background: none; color: var(--text-3); text-align: center; width: auto; } .pk-bas { padding: var(--e-10) var(--e-12) var(--e-12); } .pk-bas b { display: block; font-size: var(--t-base); font-weight: var(--fw-moyen); color: var(--text); } .pk-type { display: inline-block; margin-top: var(--e-4); font-size: var(--t-mini); padding: var(--e-1) var(--e-8); border-radius: var(--r-pilule); } .pk-type--porte { background: var(--violet-tint); color: var(--violet-light); } .pk-type--seul { background: var(--surface); color: var(--text-3); } .pk-sert { display: block; margin-top: var(--e-6); font-size: var(--t-mini); color: var(--text-3); line-height: var(--lh-serre); } .pk-sert i { font-style: italic; } /* ⚠️ Une niche disparue se signale par sa COULEUR D'ALERTE, pas par l'accent : l'ambre et l'accent sont le même doré ici, et un texte accentué se lirait « sélectionné ». */ .pk-perdu { color: var(--amber); } /* ⚠⚠ UN FILET EN POINTILLÉ A BESOIN DU FILET MOYEN. Mesuré le 04/09 : la carte héritait du `--border` de `.pk-pack` (alpha 0,114) et, en pointillé, elle DISPARAISSAIT — 192 px de carte invisible à côté d'une carte pleine. Le projet avait déjà tranché ailleurs : `.lib-niche--neuve`, la carte « Nouvelle niche », est en `--border-mid` (0,23). ⚠ ELLE N'EMPRUNTE PAS `_carteNouvelleNiche` pour autant : ce dessinateur rend une carte de 268 px, taillée pour le mur des niches. Dans cette grille-ci, la ligne s'étirerait à 268 et les cartes de packs s'étireraient avec elle, bande de vues en haut et vide en bas. On emprunte la DÉCISION, pas la brique. */ .pk-neuf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-6); min-height: calc(var(--e-48) * 4); border-style: dashed; border-color: var(--border-mid); background: transparent; color: var(--text-3); } .pk-neuf:hover { border-color: var(--violet); color: var(--violet-light); } /* ── L'ÉDITEUR ────────────────────────────────────────────────────────────── */ .pk-champ { margin-bottom: var(--e-16); } .pk-nom-pack, .pk-nom, .pk-consigne { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-family: inherit; font-size: var(--t-base); padding: var(--e-8); line-height: var(--lh-normal); } .pk-nom-pack:focus, .pk-nom:focus, .pk-consigne:focus { outline: none; border-color: var(--violet); } .pk-consigne { resize: vertical; font-size: var(--t-mini); margin-top: var(--e-4); } .pk-titre-sec { font-size: var(--t-mini); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); margin: var(--e-20) 0 var(--e-8); } .pk-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--e-8); } .pk-choix { display: block; text-align: left; font-family: inherit; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e-10) var(--e-12); color: var(--text); transition: var(--transi); } /* ⚠️ `:not(.active)` DEVANT `:hover` — la réparation retenue par le projet (`outils/verifier-survol-etat.py`) : sans elle, le doigt posé sur le choix RETENU lui enlève sa couleur, et on ne sait plus ce qu'on a choisi au moment où on le regarde. */ .pk-choix:not(.active):hover { border-color: var(--border-mid); background: var(--bg-hover); } .pk-choix.active { border-color: var(--violet); background: var(--violet-tint); } .pk-choix b { display: block; font-size: var(--t-base); font-weight: var(--fw-moyen); } .pk-choix.active b { color: var(--violet-light); } .pk-choix span { display: block; font-size: var(--t-mini); color: var(--text-3); margin-top: var(--e-2); } .pk-niches { display: flex; flex-wrap: wrap; gap: var(--e-6); } .pk-niche { font-family: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pilule); padding: var(--e-4) var(--e-12); color: var(--text-2); font-size: var(--t-base); transition: var(--transi); } .pk-niche:not(.active):hover { border-color: var(--border-mid); color: var(--text); } .pk-niche.active { border-color: var(--violet); background: var(--violet-tint); color: var(--violet-light); } /* ⚠ UN COMPTE DÉJÀ PRIS RESTE LISIBLE, JUSTE ÉTEINT : le masquer ferait croire que le compte n'existe pas, alors qu'il a simplement déjà sa variante dans cette recette. */ .pk-niche--pris { opacity: 0.55; } .pk-vide { font-size: var(--t-mini); color: var(--text-3); } .pk-aide { font-size: var(--t-mini); color: var(--text-3); margin: var(--e-8) 0 0; line-height: var(--lh-normal); } .pk-lignes { display: flex; flex-direction: column; gap: var(--e-8); } .pk-ligne { display: flex; align-items: flex-start; gap: var(--e-10); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e-10); } .pk-ligne-txt { flex: 1 1 auto; min-width: 0; } /* La photo de départ : une vignette QUI EST le bouton. ⚠️ Un carré vide qui ne dit pas qu'il se clique ne se clique pas — d'où le pointillé et l'icône. */ .pk-tpl { flex: none; width: calc(var(--e-48) + var(--e-8)); aspect-ratio: 3 / 4; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: transparent center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--text-3); cursor: pointer; transition: border-color var(--t-moyen); } .pk-tpl:hover { border-color: var(--violet-light); color: var(--text-2); } .pk-tpl--pleine { border-style: solid; border-color: var(--border-mid); } .pk-vue-x { flex: none; } .pk-ajout { width: 100%; margin-top: var(--e-10); } /* ⚠️ LA SUPPRESSION EST À GAUCHE, loin du geste qu'on fait vingt fois. */ .pk-suppr { margin-right: auto; color: var(--red); border-color: var(--red); } /* ══ L'ÉCRAN « PRODUIT SEUL » ════════════════════════════════════════════════ Amadou (04/09) : une SEULE carte, de haut en bas — le produit, ses vues, le prix et le bouton. Avant : deux colonnes côte à côte dont la gauche restait vide une fois le produit choisi. ⚠️ AUCUNE VALEUR BRUTE, tout passe par les jetons — c'est la règle du fichier. */ /* ══ UN SEUL ÉTAGE ═══════════════════════════════════════════════════════════ Amadou (04/09) : « ça peut tenir en un étage, pas deux — l'espace disponible est gaspillé ». Le produit à gauche, ses vues à droite, le pied en travers. ⚠️ LA DROITE EST PLUS LARGE, ET C'EST VOULU : chaque vue porte deux lignes de texte, les photos n'en portent aucune. À largeur égale, les consignes se coupaient. */ .pv-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--e-22); align-items: stretch; } /* ⚠️⚠️ LES DEUX COLONNES S'ÉTIRENT, ET C'EST TOUT L'OBJET DE LA REFONTE. En `start`, la gauche s'arrêtait sous ses deux boutons : 73 px de contenu pour 321 px de colonne, soit 248 px de vide — exactement « l'espace disponible est gaspillé » d'Amadou. En colonne flex, la porte d'entrée peut prendre la place qui reste. */ .pv-col { min-width: 0; display: flex; flex-direction: column; } /* ⚠️ SOUS 900 px LES DEUX COLONNES S'EMPILENT. Côte à côte sur un écran étroit, chaque moitié tombe sous 200 px et tout se coupe — le pire des deux mondes. */ @media (max-width: 900px) { .pv-deux { grid-template-columns: minmax(0, 1fr); } } /* ── LA PORTE D'ENTRÉE : SEULE À L'ÉCRAN TANT QU'IL N'Y A RIEN ──────────────── ⚠️⚠️ LA CLASSE MANQUAIT SUR L'ÉLÉMENT (04/09) : ces règles étaient écrites pour `.pv-vide`, mais le `div` ne portait que l'IDENTIFIANT `pv-vide`. Elles n'ont jamais rien stylé, et c'est `.upload-actions` (une grille 1,5fr / 1fr) qui rendait l'écran. Un sélecteur qui ne touche rien ne prévient pas : il faut regarder l'écran. ⚠️⚠️⚠️ DEUX FOIS REPRISE SUR CETTE SEULE ZONE, ET C'EST LA MÊME ERREUR DE HIÉRARCHIE. D'abord elle s'étirait à 238 px pour combler le vide d'une colonne : « beaucoup trop grande ». Puis, réduite à 132 px mais posée EN HAUT, elle accaparait encore l'œil : « le bouton Choisir un produit prime sur la drop zone ». Neuf fois sur dix le produit vient de la bibliothèque — c'est LUI le geste principal. Ordre définitif : la phrase, le bouton, puis la zone en bande fine. Elle reste large et déposable sur toute la ligne : on baisse son poids visuel, pas sa cible. */ .pv-vide { display: flex; flex-direction: column; align-items: center; padding: var(--e-24) 0 0; } /* ⚠️ LA PHRASE DIT CE QU'ON SE DEMANDE ICI : d'où viennent les vues. Un cadre vide ne l'apprend pas, et l'écran n'a rien d'autre à montrer à ce moment-là. */ .pv-vide-slog { margin: 0; font-size: var(--t-lead); color: var(--text); text-align: center; } .pv-vide-s { margin: var(--e-6) 0 0; max-width: calc(var(--e-48) * 10); font-size: var(--t-base); color: var(--text-3); text-align: center; } /* ⚠️ `.upload-pick` EST EN `width: 100%` PARTOUT AILLEURS — voulu dans une colonne étroite, absurde ici : le bouton barrait toute la carte. On lui rend sa largeur naturelle, avec un plancher pour qu'il reste le geste le plus visible de l'écran. */ .pv-vide .upload-pick { width: auto; min-width: calc(var(--e-48) * 5); margin-top: var(--e-20); } /* ⚠️⚠️ DEUX CLASSES DANS LE SÉLECTEUR, ET C'EST OBLIGATOIRE. `.upload-actions .dropzone` pose `min-height: 38px` et `padding: 0 14px` avec une force de (0,2,0) : écrite sur la seule classe `.pv-vide-zone` (0,1,0), ma règle perdait et la zone retombait à 84 px. Mesuré à l'écran, pas relu. */ .pv-vide .pv-vide-zone { width: 100%; margin-top: var(--e-16); display: flex; align-items: center; justify-content: center; gap: var(--e-6); min-height: var(--e-32); padding: var(--e-8) var(--e-16); font-size: var(--t-meta); } .pv-vide-ic { color: var(--text-3); flex: none; } /* ⚠️⚠️ LE SURVOL DE LA BRIQUE EST TAILLÉ POUR UNE GRANDE ZONE, PAS POUR UNE BANDE SECONDAIRE. `.dropzone:hover` remplit de `--violet-tint` (l'accent à 16 %) : la bande devenait un bandeau plein, PLUS voyant que le bouton juste au-dessus — l'inverse exact de la hiérarchie qu'on venait de poser. Amadou (04/09) : « la zone glisse tes photos ici s'éclaire trop, ça doit être plus discret ». Ici le survol ne fait qu'affermir le trait et poser un voile à peine perceptible. ⚠️ LE `dragover` GARDE TOUTE SA FORCE, et c'est voulu : c'est le seul instant où la zone doit dire « lâche ici », et à ce moment-là on ne regarde plus le bouton. */ /* ⚠️⚠️⚠️ `:not(.dragover)` DEVANT `:hover`, ET CE N'EST PAS DÉCORATIF. Sans lui, le survol discret (0,3,0) écrasait `.dropzone.dragover` (0,2,0) — et comme on survole forcément la zone au moment où on lâche, le signal « lâche ici » disparaissait pile quand il sert. Mesuré : le fond retombait à 3 % de voile au lieu de l'accent à 26 %. C'est la réparation que le projet a retenue (`outils/verifier-survol-etat.py`) : elle tient même si quelqu'un déplace les règles plus tard, là où l'ordre seul se casserait. */ .pv-vide .pv-vide-zone:not(.dragover):hover { border-color: var(--violet-tint-strong); background: rgba(var(--th-voile), 0.03); } /* Et le dépôt reprend toute sa force, écrit ICI pour ne dépendre d'aucun ordre. */ .pv-vide .pv-vide-zone.dragover { border-color: var(--violet-light); border-style: solid; background: var(--violet-tint-strong); } /* ── LE BANDEAU DU PRODUIT, AU-DESSUS DES DEUX COLONNES ────────────────────── ⚠️⚠️ IL ÉTAIT DANS LA COLONNE DE GAUCHE, et c'est LUI qui décalait tout : la gauche commençait par une ligne de 52 px que la droite n'avait pas, donc les deux contenus ne tombaient jamais sur la même ligne. Amadou (04/09) : « tout doit être aligné, donc la partie de gauche et droite ». En bandeau, les deux colonnes partent ensemble — et la niche n'est plus nommée deux fois. */ .pv-produit { display: flex; align-items: center; gap: var(--e-12); padding: var(--e-10) var(--e-12); margin-bottom: var(--e-16); background: var(--surface-2); border-radius: var(--r-lg); } .pv-produit-vign { width: 44px; height: 52px; flex: none; border-radius: var(--photo-rayon); background: var(--surface) center/cover no-repeat; } .pv-produit-txt { flex: 1 1 auto; min-width: 0; } /* ⚠️ `min-width:0` PLUS L'ELLIPSE : un nom SHEIN fait cent caractères et pousserait le bouton « Changer » hors de la carte. */ .pv-produit-nom, .pv-produit-niche { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-produit-nom { font-size: var(--t-body); color: var(--text); } .pv-produit-niche { font-size: var(--t-base); color: var(--text-3); flex: 0 1 auto; } .pv-produit-chg { flex: none; } /* La niche et le lien qui mène à ses réglages, sur la même ligne sous le nom. */ .pv-produit-bas { display: flex; align-items: baseline; gap: var(--e-6); min-width: 0; } .pv-produit-bas .pv-vues-sous { flex: none; } /* ⚠️ LE SÉPARATEUR EST EN CSS, PAS DANS LE TEXTE. Écrit en dur, il resterait quand la phrase de repli (« vues d'origine — range-le dans une niche ») remplace le lien. */ .pv-produit-bas .pv-vues-sous::before { content: '·'; margin-right: var(--e-6); } /* Les photos de référence, discrètes : ce ne sont pas elles qu'on regarde ici. */ /* ⚠️ La grille des photos est vide au départ : sans ça elle réserve une hauteur pour rien, et c'est exactement le vide qu'on vient de retirer. */ #pv-preview-dress:empty { display: none; } /* ── Les vues ─────────────────────────────────────────────────────────────── */ /* Le titre et le compte sur une ligne — `field-label` porte déjà le style du titre. */ /* ⚠️ PLUS DE `margin-top` NÉGATIF : la sous-ligne ne vit plus sous l'en-tête des vues, elle a déménagé dans le bandeau du produit (voir plus haut). */ .pv-vues-sous { font-size: var(--t-base); color: var(--text-3); } /* Le lien ressemble à un lien : souligné, pas un bouton de plus. */ .pv-vues-lien { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--text-2); border-bottom: 1px solid var(--border-strong); } .pv-vues-lien:hover { color: var(--text); border-bottom-color: var(--violet-light); } .pv-vues-compte { flex: none; font-size: var(--t-base); color: var(--text-3); } /* ⚠️ EN LISTE, PAS EN GRILLE. Trois cartes côte à côte dans une demi-largeur écrasent les consignes sur trois lignes ; empilées, chacune tient sur deux et la colonne se remplit au lieu de laisser du vide sous elles. */ /* ⚠️⚠️ AUCUN `margin-top` ICI, ET C'EST CE QUI ALIGNE LES DEUX COLONNES. `card-header` pose déjà `margin-bottom: var(--e-18)` des deux côtés : tout écart ajouté d'un seul côté décale ce contenu-là de sa valeur, et le décalage ne se voit qu'à l'écran. */ .pv-view-grid { display: flex; flex-direction: column; gap: var(--e-8); } /* ⚠️ UNE CARTE, PAS UNE PASTILLE. La vue porte son nom ET sa consigne : deux lignes de texte ne tiennent pas dans une pastille, et c'est la consigne qui aide à choisir. */ .pv-view-grid .pv-vue { /* ⚠️⚠️⚠️ QUATRE PROPRIÉTÉS REPRISES À LA FAMILLE DES PASTILLES, ET ELLES SONT VITALES. Ces cartes portent encore `.prod-view-chip` — sept lectures du code s'appuient dessus, dont le clic, le compte et le coût. Or cette famille (une liste de 17 sélecteurs, plus haut dans la feuille) impose `height: 30px`, `white-space: nowrap`, `line-height: 1` et `display: inline-flex`. Sans les reprendre ICI, la carte s'écrase à 30 px de haut, sur une seule ligne, et la consigne disparaît — c'est exactement ce qui vient de se reproduire en retirant l'ancien bloc. On ne peut pas quitter la famille (le ruban compact de l'en-tête mannequin s'en sert), donc on la surcharge, et on l'écrit. */ height: auto; white-space: normal; line-height: var(--lh-normal); display: flex; align-items: flex-start; gap: var(--e-10); padding: var(--e-12); text-align: left; cursor: pointer; background: transparent; border: 1px solid var(--border-mid); border-radius: var(--r-lg); color: inherit; font-family: inherit; transition: border-color var(--t-moyen), background var(--t-moyen); } /* ⚠️⚠️⚠️ L'ORDRE COMPTE, ET C'EST UN DÉFAUT DÉJÀ VÉCU. `:hover` et `.active` ont la même force : écrit après, le survol EFFAÇAIT la bordure de la vue sélectionnée — exactement ce qu'Amadou avait signalé sur les cartes de niche. `.active` passe donc en dernier, et son survol a sa propre règle. Trouvé par `outils/verifier-survol-etat.py`, pas à l'œil. */ /* ⚠️ `:not(.active)` DEVANT `:hover`, ET PAS UN SIMPLE ORDRE. C'est la réparation que le projet a retenue (`outils/verifier-survol-etat.py`) : elle tient même si quelqu'un déplace les règles plus tard, là où l'ordre seul se casserait au premier remaniement. */ .pv-view-grid .pv-vue:not(.active):hover { border-color: var(--border-strong); } .pv-view-grid .pv-vue.active { border-color: var(--violet); background: var(--violet-tint); } .pv-view-grid .pv-vue.active:hover { border-color: var(--violet-light); } .pv-vue-case { flex: none; width: 18px; height: 18px; margin-top: var(--e-1); border: 1px solid var(--border-strong); border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; color: transparent; } .pv-vue.active .pv-vue-case { border-color: var(--violet); color: var(--violet-light); } /* ⚠️ LA COCHE OCCUPE SA PLACE EN PERMANENCE, SEULE SA COULEUR CHANGE. Dans l'ancien écran elle était `display: none` puis affichée à la sélection : le texte sautait d'un cran à chaque clic. Ici la case hérite `color: transparent`, la coche est invisible sans bouger, et `.active` lui rend sa couleur. Rien ne se déplace. */ .pv-vue-coche { display: flex; } .pv-vue-txt { min-width: 0; } .pv-vue-n { display: block; font-size: var(--t-base); color: var(--text); } /* ⚠️⚠️ LA COUPE EST DANS LA MÊME RÈGLE QUE `display`, ET C'EST OBLIGATOIRE. Écrite dans une règle séparée plus haut, elle était annulée par le `display: block` d'ici — deux règles de même force, la dernière gagne. C'est la collision de cascade classique, et elle ne se voit pas à la lecture : il faut regarder l'écran. ⚠️ DEUX LIGNES AU PLUS : au-delà, les cartes grandissent sans fin et la rangée devient un pavé. Le nom et la première idée suffisent à choisir. */ .pv-vue-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-meta); color: var(--text-3); line-height: var(--lh-serre); } /* ⚠️ LE SCAN A DESCENDU DANS LE PIED (04/09) : c'est une option de GÉNÉRATION, comme le prix, pas une vue. Sous les vues il rallongeait la colonne de droite d'une quarantaine de pixels que la gauche n'avait pas. */ .pv-scan { display: flex; align-items: flex-start; gap: var(--e-8); cursor: pointer; flex: 0 1 auto; min-width: 0; font-size: var(--t-base); color: var(--text-2); } .pv-scan-txt { display: flex; flex-direction: column; min-width: 0; } .pv-scan-aide { font-size: var(--t-meta); color: var(--text-3); line-height: var(--lh-serre); } /* ── Le pied : le prix à gauche, le geste à droite ───────────────────────── ⚠️ On EMPRUNTE `generate-block` à « Mis en scène » ; on n'ajoute que le prix à sa gauche, sans toucher au bouton qui garde exactement le même aspect qu'ailleurs. */ /* ⚠️⚠️ `flex-direction: row` EST OBLIGATOIRE ICI. `generate-block`, la brique empruntée, est en COLONNE : sans le dire, le prix se posait AU-DESSUS du bouton et centré, à côté de rien. Même piège que la famille des pastilles — on emprunte, donc on reprend explicitement ce que la brique impose et qu'on ne veut pas. */ .pv-generate-block { display: flex; flex-direction: row; align-items: center; gap: var(--e-16); margin-top: var(--e-20); padding-top: var(--e-18); border-top: 1px solid var(--border); } /* ⚠️ C'EST LE PRIX QUI POUSSE, PAS LE BOUTON. Avec `margin-left: auto` sur le bouton, le prix restait collé au scan et le chiffre se lisait à côté d'une case à cocher. */ .pv-generate-block .pv-cout { margin-left: auto; } .pv-generate-block .pv-generate-cta { flex: 0 0 auto; width: auto; } .pv-cout { flex: none; display: flex; flex-direction: column; } .pv-cout-cle { font-size: var(--t-base); color: var(--text-3); } .pv-cout-val { font-size: var(--t-xl); color: var(--text); font-variant-numeric: tabular-nums; } /* ── Partie Génération : le rayon posé, puis les neuf champs du profil ────────── ⚠️ AUCUNE VALEUR BRUTE : tout passe par les jetons, comme le reste du fichier. */ /* ── Génération : le rayon en bandeau, puis les consignes repliées ───────────── ⚠️⚠️ NEUF ZONES DE TEXTE OUVERTES, C'ÉTAIT UN MUR (Amadou, 03/09 : « illisible, moche visuellement »). Une ligne par consigne, son début en aperçu sur UNE seule ligne, et une seule dépliée à la fois. ⚠️ Aucune valeur brute : tout passe par les jetons. */ .nial-rayon { display: flex; align-items: center; gap: var(--e-12); margin-top: var(--e-4); padding: var(--e-10) var(--e-14); border-radius: var(--r-moyen); background: var(--surface-2); } .nial-rayon-txt { flex: 1 1 auto; min-width: 0; } .nial-rayon-l { font-size: var(--t-mini); color: var(--text-3); } .nial-rayon-val { font-size: var(--t-corps); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nial-rayon-vide { color: var(--text-3); font-style: italic; } /* Le bouton « Affiner », aligné à droite sous le champ. */ .nial-affiner { display: flex; justify-content: flex-end; margin-top: var(--e-8); } /* ⚠️ LES SUGGESTIONS ONT ÉTÉ RETIRÉES (Amadou, 03/09) : « le fait d'avoir des suggestions fixes ne sert à rien ». Une liste écrite d'avance ne peut pas savoir ce que SES niches ont de particulier — sa capture le montrait : il tape « Le sac » dans une niche Robes et les quatre phrases sur les robes restent là. Il reste le champ, son exemple en gris et la phrase qui dit ce qui est déjà géré. Une aide qui n'aide pas est du bruit. */ /* ⚠️ Les styles du repli à neuf lignes ont été RETIRÉS avec lui (03/09) : la partie Génération ne porte plus que le rayon et une consigne. Du CSS qui ne style plus rien se fait recopier par le suivant qui cherche un motif — mieux vaut qu'il n'existe pas. */ /* L'ASSISTANCE : un bouton discret, et les propositions posées dessous. ⚠️ Elles se lisent comme du texte à choisir, pas comme des boutons d'action : ce sont des phrases, alignées à gauche, sur plusieurs lignes s'il le faut. */ .nial-vue-pied { display: flex; justify-content: flex-end; margin-top: var(--e-4); } .nial-proposer { background: transparent; border: 1px solid var(--border); border-radius: var(--r-pilule); color: var(--text-3); font-family: inherit; font-size: var(--t-micro); padding: var(--e-2) var(--e-10); cursor: pointer; transition: var(--transi); } .nial-proposer:hover { border-color: var(--violet); color: var(--violet-light); } .nial-proposer:disabled { opacity: 0.5; cursor: default; } .nial-props { display: flex; flex-direction: column; gap: var(--e-4); margin-top: var(--e-4); } .nial-prop { text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-2); font-family: inherit; font-size: var(--t-mini); line-height: var(--lh-serre); padding: var(--e-6) var(--e-8); cursor: pointer; transition: var(--transi); } .nial-prop:hover { border-color: var(--violet); background: var(--bg-hover); color: var(--text); } .nial-vue-haut { display: flex; align-items: center; gap: var(--e-8); } .nial-vue { display: flex; flex-direction: column; align-items: stretch; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--e-6) var(--e-8); } .nial-rang { flex: 0 0 var(--e-22); width: var(--e-22); height: var(--e-22); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--violet-tint); color: var(--violet-light); font-size: var(--t-mini); line-height: var(--lh-un); } .nial-nom { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid transparent; color: var(--text); font-family: inherit; font-size: var(--t-base); padding: var(--e-2); } .nial-nom:focus { outline: none; border-bottom-color: var(--violet); } /* ⚠️ L'ÉTIQUETTE DU MODE SE LIT, ELLE NE SE CLIQUE PAS. Amadou (02/09) : « ça doit être déduit par le logiciel ». Elle est donc en retrait — même graisse, couleur de note — et elle porte sa raison en infobulle. Ce qui vient du REPLI plutôt que du nom est en pointillé : une déduction devinée doit se distinguer d'une déduction lue. */ .nial-mode { flex: 0 0 auto; font-size: var(--t-mini); color: var(--text-3); padding: var(--e-2) var(--e-8); border-radius: var(--r-pilule); border: 1px solid transparent; line-height: var(--lh-un); white-space: nowrap; cursor: help; } .nial-mode--scene { color: var(--violet-light); background: var(--violet-tint); } .nial-mode--devine { border-style: dashed; border-color: var(--border-mid); } .nial-ico { background: transparent; border: 0; color: var(--text-3); cursor: pointer; padding: var(--e-4); border-radius: var(--r-micro); line-height: var(--lh-un); display: flex; transition: var(--transi-vif); } .nial-ico:hover { color: var(--text); background: var(--bg-hover); } /* ⚠️ LA CROIX EST ROUGE AU SURVOL, comme partout ailleurs dans le site : c'est le seul geste de cette fenêtre qui retire quelque chose. */ .nial-ico--x:hover { color: var(--red); } .nial-ico:disabled { opacity: 0.3; cursor: default; } .nial-ico:disabled:hover { color: var(--text-3); background: transparent; } .nial-plus { width: 100%; margin-top: var(--e-8); background: transparent; border: 1px dashed var(--border-mid); border-radius: var(--r-md); color: var(--text-2); font-family: inherit; font-size: var(--t-meta); padding: var(--e-8); cursor: pointer; transition: var(--transi); } .nial-plus:hover { border-color: var(--violet); color: var(--violet-light); } .nial-pied { padding: var(--e-14) var(--e-22); border-top: 1px solid var(--border); flex-shrink: 0; align-items: center; } .nial-etat { margin-right: auto; font-size: var(--t-meta); color: var(--text-3); } /* ══ LA POIGNÉE « … » D'UNE CARTE DE NICHE ════════════════════════════════════ Amadou (02/09) : « avec mon Mac […] je n'ai pas accès au clic droit ». Elle n'apparaît qu'au survol ou au clavier : une commande visible en permanence sur chaque carte redeviendrait le bouton permanent qu'on a retiré le 23/08. */ .lib-niche-poi { position: absolute; top: var(--e-8); right: var(--e-8); z-index: 2; width: var(--e-24); height: var(--e-24); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); cursor: pointer; opacity: 0; transition: opacity var(--t-bref) var(--c-pose), color var(--t-bref) var(--c-pose); } .lib-niche:not(.lib-niche--on):not(.selected):hover .lib-niche-poi, .lib-niche-poi:focus-visible { opacity: 1; } .lib-niche-poi:hover { color: var(--text); border-color: var(--border-mid); } /* En mode sélection on coche des cartes : une poignée qui ouvre un menu par-dessus n'aurait aucun sens, et elle recouvrirait la pastille. */ .lib-niche.select-mode .lib-niche-poi { display: none; } /* Le doigt n'a pas de survol : sur écran tactile, la poignée reste posée. */ @media (hover: none) { .lib-niche-poi { opacity: 1; } } /* ══ STUDIO — LES PROJETS ════════════════════════════════════════════════════ Amadou (26/08) : « je dois pouvoir faire des projets, comme sur ChatGPT ». Un projet se replie : dix projets ouverts rendraient la colonne illisible, et c'est le repli qui fait la différence entre un rangement et une liste de plus. */ .studio-projet-neuf { display: flex; align-items: center; gap: var(--e-8); width: 100%; height: 32px; margin-top: var(--e-6); padding: 0 var(--e-10); border-radius: var(--r-md); border: 1px solid var(--border); background: none; color: var(--th-texte-3); font-family: inherit; font-size: var(--t-meta); cursor: pointer; transition: color var(--t-bref) var(--c-pose), border-color var(--t-bref) var(--c-pose), transform var(--t-bref) var(--c-rebond); } .studio-projet-neuf:hover { color: var(--th-texte); border-color: var(--border-mid); } .studio-projet-tete { display: flex; align-items: center; gap: var(--e-6); padding: var(--e-6) var(--e-8); border-radius: var(--r-md); cursor: pointer; color: var(--th-texte-2); font-size: var(--t-meta); transition: background var(--t-bref) var(--c-pose), color var(--t-bref) var(--c-pose); } .studio-projet-tete:hover { background: rgba(var(--th-voile), .05); color: var(--th-texte); } .studio-projet-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Le compte des conversations : une information, pas une alerte — donc pas de pastille. */ .studio-projet-n { color: var(--th-texte-3); font-size: var(--t-nano); flex: 0 0 auto; } .studio-projet-chev { width: 0; height: 0; flex: 0 0 auto; border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; transition: transform var(--t-bref) var(--c-pose); } .studio-projet.ouvert .studio-projet-chev { transform: rotate(90deg); } /* ⚠️ `display: none` et non une hauteur animée : une liste de longueur inconnue ne peut pas s'animer proprement sans mesurer, et une mesure à chaque rendu coûterait plus cher que le pli lui-même. */ .studio-projet-corps { display: none; padding-left: var(--e-10); } .studio-projet.ouvert .studio-projet-corps { display: block; } /* ══ STUDIO — TOUS LES ASCENSEURS, UNE SEULE RÈGLE ═══════════════════════════ ⚠️⚠️ IL Y EN A QUATRE DANS CET ÉCRAN, et je les ai corrigés un par un, à trois reprises, à chaque fois qu'Amadou en voyait un : le fil, le champ de saisie, puis la liste des conversations — celui-là longeait toute la colonne de gauche avec le pouce clair du réglage global, soit un trait blanc franc du haut en bas. ⭐ Un défaut de style se répète sur TOUS les porteurs de la même propriété. La bonne réponse n'était pas de corriger celui qu'on a sous les yeux mais de chercher `overflow-y: auto` dans tout l'écran — d'où cette règle unique, qui couvre aussi le corps du raisonnement, que personne n'avait encore vu. ⚠️ Sur un thème sombre, ce qui compte n'est pas l'opacité mais l'ÉCART avec le fond : un voile blanc à 9 % sur du presque-noir donne déjà un trait franc. D'où 5 % au repos, et rien qui l'allume tant qu'on ne vise pas le pouce lui-même. ⚠️ `scrollbar-color` (Firefox) ET `::-webkit-scrollbar` (Chrome/Brave) : les deux moteurs ne lisent pas le même, et n'en poser qu'un laisse l'autre au trait clair du système. */ .studio-history-list, .studio-chat-messages, .studio-prompt-input, .studio-pense-corps { scrollbar-width: thin; scrollbar-color: rgba(var(--th-voile), .06) transparent; } .studio-history-list::-webkit-scrollbar, .studio-chat-messages::-webkit-scrollbar, .studio-prompt-input::-webkit-scrollbar, .studio-pense-corps::-webkit-scrollbar { width: var(--e-4); } .studio-history-list::-webkit-scrollbar-track, .studio-chat-messages::-webkit-scrollbar-track, .studio-prompt-input::-webkit-scrollbar-track, .studio-pense-corps::-webkit-scrollbar-track { background: transparent; } .studio-history-list::-webkit-scrollbar-thumb, .studio-chat-messages::-webkit-scrollbar-thumb, .studio-prompt-input::-webkit-scrollbar-thumb, .studio-pense-corps::-webkit-scrollbar-thumb { background: rgba(var(--th-voile), .05); border-radius: var(--r-pilule); transition: background var(--t-moyen) var(--c-pose); } .studio-history-list::-webkit-scrollbar-thumb:hover, .studio-chat-messages::-webkit-scrollbar-thumb:hover, .studio-prompt-input::-webkit-scrollbar-thumb:hover, .studio-pense-corps::-webkit-scrollbar-thumb:hover { background: rgba(var(--th-voile), .13); } /* ⚠️ LA CRÊTE DU TEXTE QUI S'ÉCRIT. Amadou (26/08) : « il faut que le texte soit doux lorsqu'il arrive, avec un petit effet de couleur au début, en fonction du thème ». Les derniers caractères portent l'accent puis reviennent au texte normal — c'est ce qui fait qu'on suit la ligne en train de s'écrire au lieu de relire le paragraphe entier à chaque image. ⚠️ La transition est sur la COULEUR seule : animer l'opacité ferait clignoter le texte déjà lu à chaque nouvelle image, puisque le markdown est refait en entier. ⚠️ L'accent CLAIR, pas l'accent plein : sur les thèmes sombres, l'accent plein sur un fond noir est moins lisible que le texte normal — la douceur se retourne contre la lecture. */ .studio-msg-text.md .md-crete { color: var(--th-accent-clair); animation: studioCrete .9s var(--c-pose) forwards; } @keyframes studioCrete { from { color: var(--th-accent-clair); } to { color: inherit; } } @media (prefers-reduced-motion: reduce) { .studio-msg-text.md .md-crete { animation: none; color: inherit; } } /* ══ L'AVIS DE VERSION ════════════════════════════════════════════════════════ ⚠️ EN BAS À GAUCHE, pas en haut au milieu : une page laissée ouverte n'est pas en panne, et une bannière qui barre l'écran pour dire « recharge quand tu veux » interrompt plus qu'elle n'aide. Discret, mais permanent tant qu'on ne l'a pas traité — c'est justement l'information qu'on ne doit pas rater. */ /* ══ LA BULLE « NOUVELLE VERSION », ACCROCHÉE AU LOGO ════════════════════════ Amadou (27/08) : « que ça soit une bulle qui sorte de l'onglet du logo à gauche, une bulle stylisée, et que l'on puisse recharger d'ici. Parce que là, ce n'est pas esthétique. » L'ancien bandeau flottait en bas à gauche, sans lien avec quoi que ce soit. Le logo EST déjà le bouton « recharger » du site : la bulle le désigne, et le geste devient évident. ⚠️ `position: absolute` sur un parent en `position: relative` — c'est `.sidebar-logo` qui devient le repère. Sans ça la bulle se placerait par rapport à la page et repartirait dans un coin, ce qu'on vient justement de corriger. */ /* ══ « NOUVELLE VERSION » : L'ÉTOILE BRILLE ══════════════════════════════════ Amadou (27/08), après trois essais de bulle : « on va arrêter tout ça. Lorsqu'il y a une mise à jour, l'étoile doit briller. » Le logo EST le bouton « recharger » du site. Un halo dessus dit à la fois « il y a du neuf » et « c'est ici qu'on appuie ». Le bandeau du coin, la bulle à pointe et le nuage de BD expliquaient tous un geste que l'objet désignait déjà. ⚠️ Il respire lentement : un halo FIXE se confond avec un état de survol, et le survol du logo porte déjà son propre effet (`.sidebar-logo:hover .brand-mark`). ⚠️ Rien à positionner, rien à mesurer, rien qui pousse la navigation : ça marche barre dépliée, barre repliée, et à tous les crans de police. */ /* ⚠️⚠️⚠️ LE HALO N'ÉTAIT PAS FAIBLE : IL ÉTAIT COUPÉ. Amadou (27/08) : « la lueur de l'étoile n'est pas assez forte et il n'y a pas assez de mouvement ». J'allais monter l'opacité — mesuré au navigateur, l'étoile n'avait que 4 px de place au-dessus et en dessous avant l'`overflow: hidden` de `.sidebar-logo` : un flou de 28 px était rogné à 4. Aucune opacité n'aurait rattrapé ça. C'est le même piège que la bulle de version, qui se dessinait entière (280 × 111, opacité 1) et disparaissait dans ce même `overflow`. On ouvre donc le cadre — mais SEULEMENT quand l'étoile brille, pour ne toucher à rien le reste du temps. L'état replié n'en souffre pas : `.sidebar.collapsed .brand-word` porte déjà son propre `overflow: hidden` et sa largeur nulle. ⚠️ Il reste 14 px au-dessus avant le bord de `.sidebar`, qui doit garder son découpage puisqu'il défile : la lueur porte donc surtout sur les côtés et vers le bas. */ .sidebar-logo--neuf { overflow: visible; } /* ⚠️⚠️⚠️ SACCADÉE PARCE QU'ELLE FAISAIT REPEINDRE À CHAQUE IMAGE. Amadou (27/08) : « l'animation de l'étoile est saccadée ». Relevé sur l'animation elle-même, les propriétés qu'elle faisait varier étaient `filter`, `transform` et `box-shadow`. Deux sont ruineuses : un `drop-shadow` est un FLOU GAUSSIEN, et il y en avait DEUX, recalculés soixante fois par seconde ; l'étalement d'un `box-shadow` repeint lui aussi. Le navigateur ne sait animer sans repeindre que DEUX propriétés : `transform` et `opacity`. Tout le reste passe par le fil principal, celui qui dessine aussi la page. On garde donc exactement le même geste — deux battements, deux ondes, puis le silence — mais chaque morceau ne bouge plus que par l'échelle et l'opacité : · l'étoile → `transform` seule · le halo → un disque en dégradé FIXE (`::before`), échelle + opacité · l'onde → un anneau FIXE (`::after`), échelle + opacité Le halo n'est plus un filtre : il est dessiné une fois, et on le fait respirer. */ .sidebar-logo--neuf .brand-mark { position: relative; z-index: 0; /* pour que les deux calques restent DERRIÈRE l'étoile et DEVANT le fond du bouton */ filter: none; /* ⚠️ le halo passe par ::before — plus aucun flou recalculé */ /* ⚠️⚠️ ET ON COUPE LES TRANSITIONS. `.brand-mark` transitionne `filter` : tant que la transition existe, le moindre changement d'état relance un double flou — et le passage à l'état « nouvelle version » en déclenchait un lui-même. Pendant que l'étoile brille, ce sont les images-clés qui commandent, rien d'autre. */ transition: none; animation: velboMajBat 2.4s var(--c-rebond) infinite; will-change: transform; } .sidebar-logo--neuf .brand-mark::before, .sidebar-logo--neuf .brand-mark::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; } /* Le halo. Le dégradé s'éteint à 70 % du rayon : ce qui déborde est déjà transparent, donc le bord de la barre le coupe sans que ça se voie — un flou se coupe invisiblement, un trait net non. */ .sidebar-logo--neuf .brand-mark::before { inset: -10px; background: radial-gradient(circle, rgba(var(--th-accent-rgb), .6) 0%, rgba(var(--th-accent-rgb), 0) 70%); animation: velboMajHalo 2.4s var(--c-rebond) infinite; will-change: opacity, transform; } /* L'onde. ⚠️ POUSSÉE DE 3 px VERS LE BAS ET BORNÉE À 1,6×, pour la même raison qu'avant : l'étoile n'a que 9 px de place au-dessus d'elle avant le bord de `.sidebar`, qui doit garder son découpage puisque la barre défile. À 1,6 elle monte de 17 × 0,6 − 3 = 7,2 px, plus le demi-trait : elle frôle le bord sans jamais le toucher. En bas elle a 287 px. */ .sidebar-logo--neuf .brand-mark::after { inset: 0; border: 2px solid rgba(var(--th-accent-rgb), .75); animation: velboMajOnde 2.4s var(--c-pose) infinite; will-change: transform, opacity; } /* Deux battements rapprochés, puis un repos : c'est le rythme qui se repère, pas l'intensité. Une respiration régulière se lit comme un état de survol et se fond dans le décor — c'était le défaut de la toute première version. */ @keyframes velboMajBat { 0%, 50%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(1); } 36% { transform: scale(1.12); } } @keyframes velboMajHalo { 0%, 50%, 100% { opacity: .42; transform: scale(1); } 12% { opacity: 1; transform: scale(1.3); } 24% { opacity: .55; transform: scale(1.04); } 36% { opacity: .85; transform: scale(1.18); } } /* ⚠️ Les remises à zéro à 22,01 % et 46,01 % sont instantanées exprès : sans elles, on verrait l'anneau RÉTRÉCIR pour revenir à son point de départ. */ @keyframes velboMajOnde { 0%, 7% { transform: translateY(3px) scale(1); opacity: .75; } 22% { transform: translateY(3px) scale(1.6); opacity: 0; } 22.01% { transform: translateY(3px) scale(1); opacity: 0; } 31% { transform: translateY(3px) scale(1); opacity: .6; } 46% { transform: translateY(3px) scale(1.5); opacity: 0; } 46.01%, 100% { transform: translateY(3px) scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sidebar-logo--neuf .brand-mark { animation: none; } .sidebar-logo--neuf .brand-mark::before { animation: none; opacity: .9; transform: scale(1.15); } .sidebar-logo--neuf .brand-mark::after { animation: none; opacity: 0; } } /* ══ STUDIO — LE PANNEAU DE CONSIGNES D'UN PROJET ════════════════════════════ ⚠️⚠️ C'ÉTAIT UNE BOÎTE À UNE LIGNE. Amadou (26/08) : « ça doit être beaucoup plus gros, là c'est vraiment tout petit ». J'avais réutilisé la boîte de saisie de nom du site — celle qui attend trois mots. On demande ici un paragraphe de contexte : dans un champ d'une ligne on ne voit jamais ce qu'on écrit, donc on n'écrit rien, et le projet reste un dossier. ⚠️ La largeur est bornée en `ch` et non en pixels : ce qui compte pour écrire un paragraphe est le nombre de caractères par ligne, pas la taille de l'écran. */ .studio-cons { width: min(72ch, 92vw); max-width: none; } .studio-cons .studio-cons-zone { width: 100%; min-height: var(--e-48); height: 30vh; max-height: 46vh; resize: vertical; padding: var(--e-12) var(--e-14); border-radius: var(--r-md); border: 1px solid var(--border-strong); background: rgba(var(--th-voile), .05); color: var(--th-texte); font-family: inherit; font-size: var(--t-small); line-height: var(--lh-aere); } .studio-cons .studio-cons-zone:focus { outline: none; border-color: rgba(var(--th-accent-rgb), .5); background: rgba(var(--th-voile), .07); } .studio-cons .studio-cons-zone::placeholder { color: var(--th-texte-3); } /* La proposition à gauche, les décisions à droite : on ne met pas « propose-moi un texte » à côté d'« Enregistrer », sinon on le clique en croyant valider. */ .studio-cons-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e-12); } .studio-cons-actions { display: flex; align-items: center; gap: var(--e-8); } .studio-cons .studio-cons-suggerer:disabled { opacity: .55; cursor: default; } /* ══════════════════════════════════════════════════════════════════════════════ LE WIDGET DE CRÉATION — posé le 02/09/2026 Amadou : « refais l'interface de la création de compte en faisant un widget. Je veux que tout soit épuré, tout soit propre, les transitions fluides et pas saccadées. » Trois moments : avant, pendant, après. ⚠️⚠️ ON N'ANIME QUE `transform` ET `opacity`. Tout le reste (filter, box-shadow, width, background) repeint à chaque image — c'est ce qui rendait les animations saccadées ([[velbo-fluidite-transitions]]). ⚠️ Entrée sur `--c-pose`, sortie sur `--c-sortie`. Les inverser fait « tomber » ce qui arrive et « flotter » ce qui part. ⚠️ AUCUNE VALEUR BRUTE : tout vient des échelles de la bibliothèque. ══════════════════════════════════════════════════════════════════════════════ */ /* ⚠️ `.crw` n'a plus aucun porteur : la carte de création a rendu sa coquille le 08/09. On retire la règle plutôt que de la laisser attendre — une classe morte au nom évident finit par être recopiée sur autre chose. Ses ENFANTS (`.crw-pile`, `.crw-vue`, `.crw-corps`, `.crw-e`…) restent : la frise de la création en cours les porte toujours. */ .crw-tete{display:flex;align-items:center;gap:var(--e-8);padding:var(--e-12) var(--e-12) var(--e-8)} .crw-tete h3{margin:0;font-size:var(--t-titre);font-weight:600;letter-spacing:-.01em;color:var(--cok-text)} .crw-tete p{margin:2px 0 0;font-size:var(--t-mini);color:var(--cok-text-3)} .crw-ico{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px; border-radius:var(--r-md);background:var(--cok-accent-bg);color:var(--cok-accent)} /* ⚠️ LA COQUILLE SUIT LE MOMENT AFFICHÉ. Empilés en grille, les trois moments imposaient à la carte la hauteur du PLUS GRAND : 93 px de vide sous le bouton au moment 1 (mesuré dans le navigateur). Ils sont donc superposés en absolu, et la hauteur est posée par `crwHauteur()`. */ /* ⚠️⚠️⚠️ LA VUE PORTE SA PROPRE HAUTEUR, ET C'EST VITAL (corrigé le 02/09/2026). Première écriture : les vues étaient en `position:absolute` et une fonction JS posait la hauteur de la coquille. Mesuré au banc d'essai : la hauteur n'arrive qu'APRÈS un `requestAnimationFrame` — or dans l'écran réel le widget est inséré par `innerHTML` et PERSONNE n'appelait cette fonction. La coquille serait restée à 0 px, en `overflow:hidden` : le widget entier invisible, sans la moindre erreur. Et le positionnement absolu ne servait à rien : on n'émet qu'UNE vue à la fois. La coquille prend donc naturellement la hauteur de son contenu — rien à calculer, rien à clipper le jour où un incident s'ajoute en cours de route. */ .crw-pile{position:relative} .crw-vue{padding:0 var(--e-12) var(--e-12); opacity:0;transform:translateY(6px); transition:opacity var(--d-base) var(--c-sortie),transform var(--d-base) var(--c-sortie)} .crw-vue[data-actif]{opacity:1;transform:none; transition:opacity var(--d-mid) var(--c-pose),transform var(--d-mid) var(--c-pose)} /* ── MOMENT 1 · PRÊT ? ────────────────────────────────────────────────────── */ /* 128 px : les cinq jauges tiennent sur UNE ligne. À 150 px elles passaient à 4 + 1, et la cinquième seule au bout d'une ligne se lit comme une erreur. */ .crw-jauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:var(--e-4);margin-bottom:var(--e-10)} .crw-j{display:flex;align-items:center;gap:var(--e-6);padding:var(--e-6) var(--e-8); background:var(--surface-2);border:1px solid var(--cok-border);border-radius:var(--r-md); transition:transform var(--d-fast) var(--c-pose)} .crw-j:hover{transform:translateY(-1px)} .crw-j .p{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:50%} .crw-j .t{min-width:0} .crw-j .t b{display:block;font-size:var(--t-base);font-weight:600;line-height:1.25;color:var(--cok-text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crw-j .t span{display:block;font-size:var(--t-micro);color:var(--cok-text-3);line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crw-j.ok .p{background:var(--cok-green-bg);color:var(--cok-green)} .crw-j.bas .p{background:var(--cok-warn-bg);color:var(--cok-amber)} .crw-j.non .p{background:var(--cok-red-bg);color:var(--cok-red)} .crw-j.non{border-color:color-mix(in srgb,var(--cok-red) 32%,transparent)} .crw-j.vide .p{background:var(--surface);color:var(--cok-text-3)} .crw-lancer{display:flex;align-items:center;gap:var(--e-8);flex-wrap:wrap} /* ⚠️ LE CHOIX DE LA MACHINE, DANS LA MÊME RANGÉE QUE LE BOUTON. Il change ce que « Créer le compte » va faire : le poser ailleurs, c'est laisser lancer une création sur la mauvaise machine sans avoir vu le réglage. On EMPRUNTE la graduation de Commandes (`.cok-cmd-groups` / `.cok-cmd-grp`), déjà habillée par `.cp-poste-grad` et `.cp-poste-g` — aucune valeur brute ici, seulement la place dans la rangée. */ .crw-poste{flex:0 0 auto;margin:0} .crw-nb{display:flex;align-items:center;background:var(--surface-2); border:1px solid var(--cok-border);border-radius:var(--r-pilule);overflow:hidden} .crw-nb button{appearance:none;border:0;background:transparent;color:var(--cok-text-2); cursor:pointer;width:34px;height:34px;font-size:var(--t-moyen);line-height:1; transition:transform var(--d-fast) var(--c-pose)} .crw-nb button:hover{transform:scale(1.14);color:var(--cok-text)} .crw-nb button:active{transform:scale(.94)} .crw-nb input{width:46px;border:0;background:transparent;color:var(--cok-text);text-align:center; font:600 var(--t-moyen)/1 inherit;-moz-appearance:textfield} .crw-nb input::-webkit-outer-spin-button, .crw-nb input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .crw-go{flex:1 1 190px;display:inline-flex;align-items:center;justify-content:center; gap:var(--e-6);min-height:38px;padding:0 var(--e-12);border:0;border-radius:var(--r-pilule); cursor:pointer;background:var(--cok-accent-solid);color:#fff;font:600 var(--t-body)/1 inherit; transition:transform var(--d-fast) var(--c-pose)} .crw-go:hover:not(:disabled){transform:translateY(-1px)} .crw-go:active:not(:disabled){transform:translateY(0) scale(.985)} .crw-go:disabled{background:var(--surface-2);color:var(--cok-text-3);cursor:not-allowed} .crw-frein{flex-basis:100%;margin:var(--e-4) 0 0;font-size:var(--t-mini);color:var(--cok-amber)} /* ── MOMENT 2 · EN COURS ──────────────────────────────────────────────────── */ .crw-frise{display:flex;align-items:flex-start;margin-bottom:var(--e-10)} .crw-e{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center; gap:var(--e-4);position:relative;text-align:center;cursor:pointer;background:none;border:0;padding:0} /* Le trait de liaison : un pseudo-élément, pas une bordure — il ne pousse rien. */ .crw-e::before{content:"";position:absolute;top:13px;left:calc(-50% + 14px); width:calc(100% - 28px);height:2px;background:var(--cok-border); transform-origin:left center;transform:scaleX(0); transition:transform var(--d-slow) var(--c-pose)} .crw-e:first-child::before{display:none} .crw-e.fait::before,.crw-e.encours::before,.crw-e.bloque::before{transform:scaleX(1)} .crw-e.fait::before,.crw-e.encours::before{background:var(--cok-green)} .crw-e.bloque::before{background:var(--cok-red)} .crw-e .r{display:grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--surface-2);border:2px solid var(--cok-border);color:var(--cok-text-3); position:relative;z-index:1;transition:transform var(--d-base) var(--c-rebond)} .crw-e .n{font-size:var(--t-micro);color:var(--cok-text-3);line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .crw-e.fait .r{background:var(--cok-green-bg);border-color:var(--cok-green);color:var(--cok-green)} .crw-e.fait .n{color:var(--cok-text-2)} .crw-e.encours .r{background:var(--cok-accent-bg);border-color:var(--cok-accent); color:var(--cok-accent);transform:scale(1.14)} .crw-e.encours .n{color:var(--cok-text);font-weight:600} .crw-e.bloque .r{background:var(--cok-red-bg);border-color:var(--cok-red);color:var(--cok-red)} .crw-e.bloque .n{color:var(--cok-red)} .crw-e.ouverte .n{color:var(--cok-text);font-weight:600} /* Le pouls — transform et opacity seuls, donc aucune repeinte. */ .crw-e.encours .r::after{content:"";position:absolute;inset:-2px;border-radius:50%; border:2px solid var(--cok-accent);animation:crwPouls 1.9s var(--c-pose) infinite} @keyframes crwPouls{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{opacity:0}} .crw-dit{display:flex;align-items:center;gap:var(--e-8);padding:var(--e-8) var(--e-10); background:var(--surface-2);border:1px solid var(--cok-border);border-radius:var(--r-lg)} .crw-dit.rate{border-color:color-mix(in srgb,var(--cok-red) 32%,transparent)} .crw-dit .b{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--cok-accent); animation:crwRespire 1.8s var(--c-pose) infinite} .crw-dit.rate .b{background:var(--cok-red);animation:none} .crw-dit.calme .b{animation:none;background:var(--cok-green)} @keyframes crwRespire{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}} .crw-dit p{margin:0;font-size:var(--t-base);color:var(--cok-text-2)} .crw-dit p b{color:var(--cok-text);font-weight:600} /* ⚠️ UN INCIDENT N'EST PAS UNE ÉTAPE. Le téléphone et le captcha arrivent quand Vinted le décide : les mettre dans la frise ferait croire à un parcours cassé (règle d'Amadou, 12/08). Ils vivent ici, à part. */ .crw-incidents{display:grid;gap:var(--e-4);margin-top:var(--e-8)} .crw-inc{display:flex;align-items:center;gap:var(--e-6);padding:var(--e-6) var(--e-8); border-radius:var(--r-md);font-size:var(--t-mini);color:var(--cok-text); background:var(--cok-warn-bg); border:1px solid color-mix(in srgb,var(--cok-amber) 30%,transparent)} .crw-inc.fait{background:var(--cok-green-bg); border-color:color-mix(in srgb,var(--cok-green) 30%,transparent)} .crw-inc .i{flex:0 0 auto;display:grid;place-items:center;color:var(--cok-amber)} .crw-inc.fait .i{color:var(--cok-green)} .crw-inc b{font-weight:600} .crw-inc .toi{margin-left:auto;flex:0 0 auto;padding:2px var(--e-6);border-radius:var(--r-pilule); background:var(--cok-amber);color:#1a1206;font-size:var(--t-nano);font-weight:700;letter-spacing:.03em} .crw-detail{display:flex;align-items:center;gap:var(--e-8);margin-top:var(--e-8); padding:var(--e-8) var(--e-10);background:var(--surface-2); border:1px solid var(--cok-border-2);border-radius:var(--r-lg)} .crw-detail .x{min-width:0;flex:1 1 auto} .crw-detail .x b{display:block;font-size:var(--t-base);color:var(--cok-text)} .crw-detail .x span{display:block;font-size:var(--t-mini);color:var(--cok-text-3)} .crw-detail .x i{display:block;font-size:var(--t-mini);color:var(--cok-text-2);font-style:normal;margin-top:2px} .crw-actions{display:flex;gap:var(--e-6);flex-wrap:wrap;margin-top:var(--e-8); align-items:flex-start} /* ⚠️⚠️⚠️ UN BOUTON NE GRANDIT PAS (corrigé le 03/09/2026). J'avais écrit `flex:1 1 140px`, pensé pour une RANGÉE horizontale. Mais « Voir son écran » atterrit SEUL dans une colonne (`.cok-horlo > * { flex-direction:column }` + `#cp-compte-etat { flex:1 }`) : il s'étirait alors sur toute la hauteur de la grille, fixée par la fiche d'identité d'à côté. Résultat vu par Amadou : un bouton pour agrandir l'écran PLUS GRAND que l'écran, et « Actualiser »/« Abandonner » à 380 px chacun. `flex:0 0 auto` + `align-self:flex-start` : il prend la taille de son texte, où qu'on le pose. `max-width` borne le cas d'une rangée très large. */ .crw-b{flex:0 0 auto;align-self:flex-start;max-width:100%; min-height:36px;height:36px;display:inline-flex;align-items:center;justify-content:center; gap:var(--e-4);padding:0 var(--e-12);border-radius:var(--r-pilule);cursor:pointer; background:var(--surface-2);border:1px solid var(--cok-border-2);color:var(--cok-text); font:600 var(--t-base)/1 inherit;white-space:nowrap; transition:transform var(--d-fast) var(--c-pose)} .crw-b:hover{transform:translateY(-1px)} .crw-b.pri{background:var(--cok-accent-solid);border-color:transparent;color:#fff} /* Le geste principal d'un moment peut, lui, prendre la largeur : il est seul et c'est la seule chose à faire. `.crw-actions--large` le dit explicitement, au lieu de le laisser dépendre du conteneur — c'est cette dépendance qui a produit le bouton géant. */ .crw-actions--large .crw-b{flex:1 1 auto} .crw-b.danger{color:var(--cok-red);border-color:color-mix(in srgb,var(--cok-red) 30%,transparent)} /* ── MOMENT 3 · NÉ ────────────────────────────────────────────────────────── */ .crw-ne{display:flex;align-items:center;gap:var(--e-10);padding:var(--e-10); background:var(--surface-2);border-radius:var(--r-lg);margin-bottom:var(--e-8); border:1px solid color-mix(in srgb,var(--cok-green) 26%,transparent)} .crw-ne.rate{border-color:color-mix(in srgb,var(--cok-red) 30%,transparent)} .crw-ne .v{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center; background:var(--cok-green-bg);color:var(--cok-green)} .crw-ne.rate .v{background:var(--cok-red-bg);color:var(--cok-red)} .crw-ne .q{min-width:0;flex:1 1 auto} .crw-ne .q b{display:block;font-size:var(--t-moyen);font-weight:600;color:var(--cok-text)} .crw-ne .q span{display:block;font-size:var(--t-mini);color:var(--cok-text-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crw-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:var(--e-4);margin-bottom:var(--e-10)} .crw-f{padding:var(--e-6) var(--e-8);background:var(--surface-2); border:1px solid var(--cok-border);border-radius:var(--r-md)} .crw-f .l{font-size:var(--t-nano);color:var(--cok-text-3);text-transform:uppercase;letter-spacing:.05em} .crw-f .v{font-size:var(--t-base);font-weight:600;margin-top:1px;color:var(--cok-text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── ÉTROIT ───────────────────────────────────────────────────────────────── */ @media (max-width:560px){ .crw-tete{padding:var(--e-10) var(--e-8) var(--e-6)} .crw-vue{padding:0 var(--e-8) var(--e-10)} /* Six pastilles côte à côte à 360 px, ce sont six libellés illisibles. */ /* ⚠️ L'ÉCART VAUT LA LONGUEUR DU TRAIT. Avec 4 px d'écart et un trait de 12 px, la liaison passait DERRIÈRE la pastille du dessus : on voyait des ronds empilés, pas un chemin. Les deux valeurs doivent être la même. */ .crw-frise{flex-direction:column;gap:var(--e-6)} .crw-e{flex-direction:row;align-items:center;gap:var(--e-8);text-align:left;width:100%} .crw-e::before{top:auto;left:12px;bottom:100%;width:2px;height:var(--e-6); transform-origin:center bottom;transform:scaleY(0)} .crw-e.fait::before,.crw-e.encours::before,.crw-e.bloque::before{transform:scaleY(1)} .crw-e .n{white-space:normal;max-width:none} .crw-ne{gap:var(--e-8)} .crw-go{flex-basis:100%} } @media (prefers-reduced-motion:reduce){ .crw-e.encours .r::after,.crw-dit .b{animation:none} .crw-vue,.crw-pile,.crw-e::before,.crw-e .r,.crw-j,.crw-go,.crw-b{transition:none} } /* ⚠️⚠️⚠️ LES BLOCS ARRIVENT ENSEMBLE, PAS EN CASCADE (02/09/2026). Amadou : « il y a plusieurs choses qui s'affichent, mais pas en même temps, ce qui fait un décalage visuellement. » La carte naissait avec deux emplacements en attente (les jauges, « où ce compte va naître »), et chacun se remplissait quand SA requête revenait : trois arrivées séparées, et la carte qui grandit à chaque fois. ⚠️ L'ÉTAT PAR DÉFAUT EST VISIBLE. C'est le JavaScript qui pose `data-attente`, et il programme sa levée DANS LE MÊME GESTE. Si le script ne tourne pas, ou tombe entre les deux, le corps reste visible — on ne refait pas la coquille invisible de ce matin. */ .crw-corps{transition:opacity var(--d-mid) var(--c-pose)} .crw-corps[data-attente]{opacity:0} @media (prefers-reduced-motion:reduce){ .crw-corps{transition:none} } /* La pastille « en direct » du bouton d'écran : elle ne s'allume que quand une image est réellement arrivée — un point qui clignote sur un écran vide serait un mensonge. */ .crw-direct{width:7px;height:7px;border-radius:50%;background:var(--cok-green); margin-left:var(--e-4);flex:0 0 7px;animation:crwRespire 1.8s var(--c-pose) infinite} @media (prefers-reduced-motion:reduce){ .crw-direct{animation:none} } /* Une jauge qui ouvre ce qu'elle mesure (le domaine). Elle reste une jauge : même fond, même taille — seul le curseur et un filet plus net disent qu'on peut cliquer. ⚠️ `appearance:none` et la police héritée : sans eux, un