/* IDeal Evolution Studio — Copyright © 2026 Resonance IA — Par Stéphane HAYAT — Tous droits réservés. */ /* ================================================================================================= LANGAGE D'INTERACTION (#353, SL1) — feuille COMMUNE du socle, mutualisée entre les deux mondes. RÉFÉRENCE CONTRACTUELLE : docs/references-design/reference-langage-interaction-v1.0.html C'est ELLE qui fait foi. Toute valeur ci-dessous en vient ; tout écart est consigné au compte rendu du lot, jamais réconcilié en silence. ⚠️ RÈGLE DE COHABITATION, NON NÉGOCIABLE — TOUT sélecteur de cette feuille descend de [data-li]. Aucune déclaration sur :root, html, body, *, ni sur une classe du produit. Raison mesurée : les attributs data-theme et data-accent sont DÉJÀ pris sur par le design system en place (data-theme = dark|light, posé par l'anti-flash d'App.razor et ideale-theme.js ; data-accent = sarcelle|creme|azur, consommé par app-saas.css et app-locataire.css). Réutiliser ces attributs, ou déclarer ces tokens sur :root, ne casserait pas « un écran » : ça casserait l'application entière. D'où des attributs NAMESPACÉS (data-li-theme, data-li-accent) portés par la racine du socle. Les NOMS et VALEURS des tokens restent ceux du contrat §C1 et de la référence — seul leur POINT D'APPLICATION diffère (racine du socle au lieu de :root). Le point d'application produit-entier est l'affaire de SL4. Cette feuille ne référence AUCUN token --ds-*, AUCUNE classe .mud-*, AUCUN sélecteur de monde ou de layout : le socle n'attend rien de l'UI existante, et l'UI existante ne voit rien de lui. ================================================================================================= */ /* ================================================================================================= 1 · TOKENS — apparence CLAIRE (base) ================================================================================================= */ [data-li] { /* Pile de polices DÉCLARATIVE, type système (aucune ressource embarquée) : chaque poste rend avec la police de son système. Les noms cités ne sont que des familles demandées au système. */ --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif; /* Surfaces et encres */ --fond: #F4F4F5; --carte: #FFFFFF; --carte-2: #FAFAFB; --encre: #1B1C1E; --encre-2: #6B6C70; --encre-3: #9A9AA1; --bord: #E4E4E7; --bord-2: #D5D5D9; /* Rouge = destructif et erreur UNIQUEMENT. Il ne fait jamais partie du nuancier d'accent. */ --rouge: #C6402F; --rouge-doux: rgba(198, 64, 47, .14); /* Statuts : couleurs de SENS, indépendantes de l'accent choisi par l'utilisateur. */ --st-info: #4A6DA7; --st-info-doux: rgba(74, 109, 167, .13); --st-ok: #1E7A34; --st-ok-doux: rgba(30, 122, 52, .13); --st-att: #B45309; --st-att-doux: rgba(180, 83, 9, .13); /* Voile des modales et matériau translucide des barres */ --voile: rgba(15, 16, 20, .24); --verre: rgba(255, 255, 255, .75); /* Ombres : posée, flottante, projetée */ --ombre-1: 0 1px 3px rgba(0, 0, 0, .08); --ombre-2: 0 12px 36px rgba(0, 0, 0, .15); --ombre-3: 0 26px 70px rgba(0, 0, 0, .26); /* Mouvements — durées canoniques (§C1) */ --mvt-entree: 350ms; /* entrée des feuilles */ --mvt-sortie: 250ms; /* sorties */ --mvt-secousse: 450ms; /* secousse de refus */ --mvt-micro: 150ms; /* focus, survols, interrupteurs */ /* Mouvements — courbes canoniques (§C1) */ --c-feuille: cubic-bezier(0.32, 0.72, 0, 1); /* feuilles, toasts */ --c-std: cubic-bezier(0.25, 0.1, 0.25, 1); /* dialogues, micro-transitions */ --c-sortie: cubic-bezier(0.4, 0, 1, 1); /* sorties */ /* Paliers de largeur des boîtes (§C1). ⚠️ L'alerte de la référence se rend à 430 px et non au palier S de 420 px : la RÉFÉRENCE fait foi (§C4), l'écart est consigné au compte rendu et matérialisé — visiblement — sur .li-dialogue--s. --palier-s / --palier-l servent SL2+. */ --palier-s: 420px; --palier-m: 560px; --palier-l: 760px; --palier-etendue: 92vw; /* Empilement (§C1) — mesuré dans la référence, du plus bas au plus haut. */ --z-infobulle: 50; --z-menu: 600; /* menus, popovers, suggestions */ --z-ctx: 900; /* menu contextuel */ --z-modale: 1000; --z-alerte: 1100; --z-apercu: 1150; --z-toast: 1200; } /* ================================================================================================= 2 · TOKENS — apparence SOMBRE Même spécificité que le bloc clair au sens de la référence, mais ancrée sur [data-li] : la surcharge est explicite plutôt que dépendante du seul ordre de déclaration. ================================================================================================= */ [data-li][data-li-theme="sombre"] { --fond: #151518; --carte: #1F1F23; --carte-2: #27272C; --encre: #F2F2F4; --encre-2: #A6A6AE; --encre-3: #77777F; --bord: #32323A; --bord-2: #41414A; --rouge: #E5604C; --rouge-doux: rgba(229, 96, 76, .20); --st-info: #7FA6E0; --st-info-doux: rgba(127, 166, 224, .18); --st-ok: #4CC38A; --st-ok-doux: rgba(76, 195, 138, .16); --st-att: #E8A13C; --st-att-doux: rgba(232, 161, 60, .16); --voile: rgba(0, 0, 0, .52); --verre: rgba(30, 30, 35, .72); --ombre-1: 0 1px 3px rgba(0, 0, 0, .5); --ombre-2: 0 12px 36px rgba(0, 0, 0, .5); --ombre-3: 0 26px 70px rgba(0, 0, 0, .65); } /* ================================================================================================= 3 · NUANCIER D'ACCENT — neuf teintes, réglage du profil utilisateur. L'accent colore les boutons principaux, interrupteurs, sélections, liens d'action et halos de focus. Il ne touche NI les surfaces, NI les encres, NI les couleurs de sens (rouge, statuts). Anthracite est le défaut : l'interface telle qu'elle est aujourd'hui. ================================================================================================= */ /* --- Anthracite (défaut) --- */ [data-li][data-li-accent="anthracite"] { --accent: #1B1C1E; --accent-fg: #FFFFFF; --accent-doux: rgba(27, 28, 30, .10); } [data-li][data-li-theme="sombre"][data-li-accent="anthracite"] { --accent: #F2F2F4; --accent-fg: #151518; --accent-doux: rgba(242, 242, 244, .14); } /* --- Argent --- */ [data-li][data-li-accent="argent"] { --accent: #6E7278; --accent-fg: #FFFFFF; --accent-doux: rgba(110, 114, 120, .14); } [data-li][data-li-theme="sombre"][data-li-accent="argent"] { --accent: #C6C9CE; --accent-fg: #16171A; --accent-doux: rgba(198, 201, 206, .18); } /* --- Bleu --- */ [data-li][data-li-accent="bleu"] { --accent: #0A66E8; --accent-fg: #FFFFFF; --accent-doux: rgba(10, 102, 232, .13); } [data-li][data-li-theme="sombre"][data-li-accent="bleu"] { --accent: #3D8BFF; --accent-fg: #FFFFFF; --accent-doux: rgba(61, 139, 255, .20); } /* --- Bleu profond --- */ [data-li][data-li-accent="bleuprofond"] { --accent: #1D4E9E; --accent-fg: #FFFFFF; --accent-doux: rgba(29, 78, 158, .13); } [data-li][data-li-theme="sombre"][data-li-accent="bleuprofond"] { --accent: #5B8AE0; --accent-fg: #FFFFFF; --accent-doux: rgba(91, 138, 224, .20); } /* --- Vert --- */ [data-li][data-li-accent="vert"] { --accent: #1E7A34; --accent-fg: #FFFFFF; --accent-doux: rgba(30, 122, 52, .13); } [data-li][data-li-theme="sombre"][data-li-accent="vert"] { --accent: #2FA365; --accent-fg: #FFFFFF; --accent-doux: rgba(47, 163, 101, .20); } /* --- Violet --- */ [data-li][data-li-accent="violet"] { --accent: #6D5BD0; --accent-fg: #FFFFFF; --accent-doux: rgba(109, 91, 208, .14); } [data-li][data-li-theme="sombre"][data-li-accent="violet"] { --accent: #8E7BFF; --accent-fg: #FFFFFF; --accent-doux: rgba(142, 123, 255, .20); } /* --- Ambre --- */ [data-li][data-li-accent="ambre"] { --accent: #B45309; --accent-fg: #FFFFFF; --accent-doux: rgba(180, 83, 9, .14); } [data-li][data-li-theme="sombre"][data-li-accent="ambre"] { --accent: #E8A13C; --accent-fg: #1B1C1E; --accent-doux: rgba(232, 161, 60, .20); } /* --- Or --- */ [data-li][data-li-accent="or"] { --accent: #A8811C; --accent-fg: #FFFFFF; --accent-doux: rgba(168, 129, 28, .15); } [data-li][data-li-theme="sombre"][data-li-accent="or"] { --accent: #EDC85A; --accent-fg: #1B1C1E; --accent-doux: rgba(237, 200, 90, .20); } /* --- Terracotta --- */ [data-li][data-li-accent="terracotta"] { --accent: #A85B38; --accent-fg: #FFFFFF; --accent-doux: rgba(168, 91, 56, .14); } [data-li][data-li-theme="sombre"][data-li-accent="terracotta"] { --accent: #E08A63; --accent-fg: #1B1C1E; --accent-doux: rgba(224, 138, 99, .20); } /* ================================================================================================= 4 · BASE — la racine du socle et ce qu'elle impose à ses descendants (à eux SEULS) ================================================================================================= */ /* box-sizing SCOPÉ : la référence l'applique à « * », ce qui, ici, redéfinirait la boîte de toute l'application. Il ne descend que de la racine du socle. */ [data-li], [data-li] *, [data-li] *::before, [data-li] *::after { box-sizing: border-box; } .li-racine { background: var(--fond); color: var(--encre); font-family: var(--font); line-height: 1.55; transition: background var(--mvt-micro), color var(--mvt-micro); } /* Anneau de focus (§C1) : 3 px sur base --accent-doux, teinte de l'accent à 45 %, décalage 2 px. */ [data-li] :focus-visible { outline: 3px solid var(--accent-doux); outline-color: color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; border-radius: 6px; } /* ⚠️ …SAUF ce que seul le PROGRAMME peut atteindre (tabindex="-1"). Sans cette exception, le titre de la page s'entoure d'un cadre à la simple arrivée : le routeur y pose le focus (FocusOnNavigate Selector="h1") pour les lecteurs d'écran, et l'anneau se dessine sur un élément que l'utilisateur n'a jamais visé. Un anneau de focus dit « vous êtes ici au clavier » ; le poser ailleurs, c'est lui faire dire n'importe quoi. L'accessibilité n'y perd rien : le focus programmatique reste posé, il cesse seulement d'être peint. */ [data-li] [tabindex="-1"]:focus-visible { outline: none; } /* ================================================================================================= 5 · BOUTONS — standard / principal / destructif / désactivé / envoi verrouillé ================================================================================================= */ [data-li] .li-btn { font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--encre); background: var(--carte); border: 1px solid var(--bord-2); border-radius: 9px; padding: 7px 15px; cursor: pointer; transition: background var(--mvt-micro), border-color var(--mvt-micro), transform var(--mvt-micro), opacity var(--mvt-micro); } [data-li] .li-btn:hover { background: var(--carte-2); } [data-li] .li-btn:active { transform: scale(.97); } [data-li] .li-btn--principal { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } [data-li] .li-btn--principal:hover { opacity: .88; background: var(--accent); } [data-li] .li-btn--destructif { background: var(--rouge); border-color: var(--rouge); color: #FFFFFF; } [data-li] .li-btn--destructif:hover { opacity: .88; } [data-li] .li-btn:disabled { opacity: .5; cursor: default; } /* L'attente honnête : le bouton montre son travail pendant qu'il est verrouillé. */ [data-li] .li-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid color-mix(in srgb, var(--accent-fg) 40%, transparent); border-top-color: var(--accent-fg); border-radius: 50%; vertical-align: -2px; margin-right: 7px; animation: li-rot .8s linear infinite; } @keyframes li-rot { to { transform: rotate(360deg); } } /* ================================================================================================= 6 · CHAMPS — libellé, aide, état fautif ================================================================================================= */ [data-li] .li-champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; } [data-li] .li-champ > label { font-size: 12.5px; font-weight: 600; color: var(--encre-2); } [data-li] .li-champ input[type=text], [data-li] .li-champ input[type=email], [data-li] .li-champ input[type=password], [data-li] .li-champ input[type=search], [data-li] .li-champ textarea { font-family: var(--font); font-size: 13.5px; color: var(--encre); background: var(--carte); border: 1px solid var(--bord-2); border-radius: 9px; padding: 8px 11px; width: 100%; transition: border-color var(--mvt-micro), box-shadow var(--mvt-micro); } [data-li] .li-champ input:focus, [data-li] .li-champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); } [data-li] .li-champ--fautif input { border-color: var(--rouge); box-shadow: 0 0 0 3px var(--rouge-doux); } [data-li] .li-aide { font-size: 12px; color: var(--encre-3); } /* ================================================================================================= 7 · VOILE, DIALOGUE, ALERTE ================================================================================================= */ [data-li] .li-voile { position: fixed; inset: 0; background: var(--voile); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: none; align-items: flex-start; justify-content: center; z-index: var(--z-modale); } [data-li] .li-voile--ouvert { display: flex; } [data-li] .li-voile--niveau2 { z-index: var(--z-alerte); } [data-li] .li-dialogue { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; box-shadow: var(--ombre-3); margin-top: 10vh; display: flex; flex-direction: column; max-height: 85vh; overflow: hidden; width: var(--palier-m); max-width: var(--palier-etendue); animation: li-dlg 220ms var(--c-std); } /* ⚠️ ÉCART §C4 ASSUMÉ, CONSIGNÉ AU COMPTE RENDU : le palier S du contrat vaut 420 px (--palier-s), mais l'alerte de la RÉFÉRENCE se rend à 430 px. La référence fait foi pour le rendu — la valeur est donc en dur ici, VISIBLE, plutôt que réconciliée en silence derrière le token. */ [data-li] .li-dialogue--s { width: 430px; } [data-li] .li-dialogue--l { width: var(--palier-l); } /* Corps d'une alerte destructive : la conséquence, dite franchement, en second plan visuel — c'est le TITRE qui pose la question, le message n'en donne que le prix. */ [data-li] .li-alerte-message { margin: 2px 0 0; font-size: 13.5px; color: var(--encre-2); } @keyframes li-dlg { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } } [data-li] .li-dlg-tete { padding: 20px 24px 6px; flex: none; } [data-li] .li-dlg-tete h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.2px; } /* Seul le CORPS défile — en-tête et pied restent visibles, jamais poussés hors cadre. Et jamais horizontalement : c'est ce qui tient « zéro ascenseur parasite ». */ [data-li] .li-dlg-corps { padding: 10px 24px 20px; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; } [data-li] .li-dlg-pied { padding: 14px 24px; border-top: 1px solid var(--bord); display: flex; justify-content: flex-end; gap: 10px; flex: none; background: var(--carte-2); } /* Message d'erreur en TÊTE de corps. ⚠️ ÉCART D'IMPLÉMENTATION CONSIGNÉ : la référence le laisse en place à opacity:0 et le révèle par transition. Ici il est MONTÉ À LA DEMANDE. Un élément présent mais transparent reste « visible » pour les outils d'accessibilité ET pour Playwright : le laisser en place rendrait vert un test qui vérifie qu'un message d'erreur s'affiche, même quand il n'y en a aucun. Le fondu est conservé à l'apparition. */ [data-li] .li-dlg-err { font-size: 12.5px; color: var(--rouge); animation: li-fondu 200ms var(--c-std); } /* ================================================================================================= 8 · FEUILLE — elle glisse depuis la barre de la fenêtre ================================================================================================= */ [data-li] .li-f-voile { position: absolute; inset: 46px 0 0 0; background: var(--voile); display: none; justify-content: center; align-items: flex-start; z-index: 5; } [data-li] .li-f-voile--ouvert { display: flex; } /* La feuille d'un ÉCRAN DE PRODUCTION est attachée à la fenêtre du NAVIGATEUR (#354, SL2), là où celle du bac-à-sable l'est à une mini-fenêtre dessinée dans la page. Trois écarts, tous mesurés : · « fixed » et non « absolute » — sans ancêtre positionné à portée, « absolute » s'accroche au premier venu et le voile atterrit n'importe où (le même défaut silencieux que la racine [data-li] manquante) ; · palier MODALE et non 5 — l'ouverture d'une boîte abaisse le châssis à 900 ; une feuille à 5 s'ouvrirait DERRIÈRE la barre et le tiroir, ce qui est précisément ce que l'abaissement voulait éviter ; · « overflow: hidden » — c'est la mini-fenêtre qui CLIPPAIT la feuille pendant son glissement ; sans cadre, la feuille passerait par-dessus la barre pendant les 350 ms de son entrée. Tout le reste de la feuille est INCHANGÉ : même largeur, même glissement, même sortie. */ [data-li] .li-f-voile--fenetre { position: fixed; inset: 0; z-index: var(--z-modale); overflow: hidden; } [data-li] .li-feuille { background: var(--carte); width: min(400px, 92%); border: 1px solid var(--bord); border-top: 0; border-radius: 0 0 15px 15px; box-shadow: var(--ombre-2); display: flex; flex-direction: column; max-height: 88%; overflow: hidden; animation: li-feuille-entree var(--mvt-entree) var(--c-feuille); } @keyframes li-feuille-entree { from { transform: translateY(-104%); } to { transform: none; } } [data-li] .li-feuille--sortie { animation: li-feuille-sortie var(--mvt-sortie) var(--c-sortie) forwards; } @keyframes li-feuille-sortie { to { transform: translateY(-104%); } } /* ================================================================================================= 9 · TOASTS — empilés en haut à droite, avec leur action « Annuler » ================================================================================================= */ [data-li] .li-toasts { position: fixed; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 10px; z-index: var(--z-toast); } [data-li] .li-toast { display: flex; align-items: center; gap: 14px; background: var(--encre); color: var(--fond); font-size: 13px; border-radius: 11px; padding: 11px 16px; box-shadow: var(--ombre-2); animation: li-toast-entree 320ms var(--c-feuille); } [data-li] .li-toast button { border: 0; background: transparent; color: inherit; text-decoration: underline; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; } @keyframes li-toast-entree { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } } /* ================================================================================================= 10 · LA SECOUSSE DE REFUS Déclarée APRÈS les boîtes : à spécificité égale, c'est l'ordre qui décide, et le refus doit l'emporter sur l'animation d'entrée de la boîte qu'il secoue. ================================================================================================= */ @keyframes li-secousse { 0% { transform: translateX(0); } 15% { transform: translateX(-12px); } 30% { transform: translateX(10px); } 45% { transform: translateX(-8px); } 60% { transform: translateX(6px); } 75% { transform: translateX(-3px); } 100% { transform: translateX(0); } } [data-li] .li-refuse { animation: li-secousse var(--mvt-secousse) ease-out; } /* Fondus — utilisés à l'apparition des messages, et en remplacement des mouvements en apparence réduite. */ @keyframes li-fondu { from { opacity: 0; } to { opacity: 1; } } @keyframes li-fondu-sortie { to { opacity: 0; } } /* ================================================================================================= 11 · MOUVEMENT RÉDUIT — plus rien ne bouge, mais tout reste lisible Va plus loin que la référence, qui se contente de ramener les durées à 1 ms : une translation de 1 ms reste une translation. Ici les entrées deviennent de VRAIS fondus (aucune transformation dans les keyframes), l'enfoncement des boutons ne réduit plus l'échelle, et la secousse cède la place à un halo rouge. Surensemble assumé du contrat §C5, consigné au compte rendu. ================================================================================================= */ @media (prefers-reduced-motion: reduce) { [data-li] .li-dialogue { animation-name: li-fondu; } [data-li] .li-feuille { animation-name: li-fondu; } [data-li] .li-feuille--sortie { animation-name: li-fondu-sortie; } [data-li] .li-toast { animation-name: li-fondu; } [data-li] .li-btn:active { transform: none; } /* Déclaré en dernier : à spécificité égale, le refus l'emporte sur l'entrée de la boîte. */ [data-li] .li-refuse { animation: none; outline: 3px solid var(--rouge); outline-offset: 2px; } } /* ================================================================================================= 12 · DÉCOR DU BAC-À-SABLE Ce qui suit n'est PAS le socle : c'est la mise en scène de la galerie (page, cartes, contrôle segmenté, nuancier, mini-fenêtre). On le garde ici plutôt que dans un CSS isolé de composant pour que la galerie consomme exactement les mêmes tokens que les primitives — un décor qui dériverait de la palette rendrait la comparaison à la référence trompeuse. ================================================================================================= */ /* Hôte du bac-à-sable : colonne pleine hauteur, le pied de page ancré en bas (règle immuable du dépôt), la galerie prenant tout le reste. Le pied vit HORS de la racine du socle et n'en consomme aucun token. */ .li-hote-bac { display: flex; flex-direction: column; min-height: 100vh; } .li-hote-pied { margin-top: auto; } .li-page { flex: 1 0 auto; } .li-contenu { max-width: 1080px; margin: 0 auto; padding: 44px 32px 120px; } [data-li] .li-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--bord); padding-bottom: 24px; margin-bottom: 8px; } [data-li] .li-titre { font-size: 27px; font-weight: 600; margin: 0; letter-spacing: -.4px; } [data-li] .li-sous { font-size: 13.5px; color: var(--encre-2); margin: 6px 0 0; } [data-li] .li-section { font-size: 20px; font-weight: 600; margin: 58px 0 4px; letter-spacing: -.3px; } [data-li] .li-section small { font-weight: 400; font-size: 13px; color: var(--encre-3); letter-spacing: 0; } [data-li] .li-intro { font-size: 14px; color: var(--encre-2); max-width: 78ch; margin: 0 0 18px; } [data-li] .li-carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 18px; padding: 24px; margin: 0 0 16px; box-shadow: var(--ombre-1); } [data-li] .li-etq { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; color: var(--encre-3); margin: 0 0 14px; } [data-li] .li-rang { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } [data-li] .li-compteurs { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; font-size: 12.5px; color: var(--encre-2); } [data-li] .li-compteurs b { font-variant-numeric: tabular-nums; color: var(--encre); } [data-li] .li-ligne-ctrl { display: flex; align-items: center; gap: 11px; font-size: 13.5px; padding: 7px 0; } /* Contrôle segmenté — la bascule clair / sombre. */ [data-li] .li-seg { display: inline-flex; background: var(--carte-2); border: 1px solid var(--bord); border-radius: 10px; padding: 3px; gap: 2px; } [data-li] .li-seg button { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--encre-2); border: 0; background: transparent; border-radius: 7px; padding: 5px 14px; cursor: pointer; transition: all var(--mvt-micro); } [data-li] .li-seg button.li-on { background: var(--carte); color: var(--encre); box-shadow: var(--ombre-1); } /* Nuancier — les neuf teintes, appliquées en direct. */ [data-li] .li-nuancier { display: flex; gap: 18px; flex-wrap: wrap; } [data-li] .li-teinte { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; border: 0; background: transparent; font-family: var(--font); padding: 2px; } [data-li] .li-teinte i { width: 30px; height: 30px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform var(--mvt-micro); } [data-li] .li-teinte:hover i { transform: scale(1.1); } [data-li] .li-teinte span { font-size: 11.5px; color: var(--encre-2); } [data-li] .li-teinte.li-on i { box-shadow: 0 0 0 2px var(--carte), 0 0 0 4.5px var(--accent); } [data-li] .li-teinte.li-on span { color: var(--encre); font-weight: 600; } /* Pastilles du nuancier : chaque teinte montre SA couleur, pas l'accent courant. */ [data-li] .li-sw-anthracite i { background: #1B1C1E; } [data-li][data-li-theme="sombre"] .li-sw-anthracite i { background: #F2F2F4; } [data-li] .li-sw-argent i { background: #6E7278; } [data-li][data-li-theme="sombre"] .li-sw-argent i { background: #C6C9CE; } [data-li] .li-sw-bleu i { background: #0A66E8; } [data-li][data-li-theme="sombre"] .li-sw-bleu i { background: #3D8BFF; } [data-li] .li-sw-bleuprofond i { background: #1D4E9E; } [data-li][data-li-theme="sombre"] .li-sw-bleuprofond i { background: #5B8AE0; } [data-li] .li-sw-vert i { background: #1E7A34; } [data-li][data-li-theme="sombre"] .li-sw-vert i { background: #2FA365; } [data-li] .li-sw-violet i { background: #6D5BD0; } [data-li][data-li-theme="sombre"] .li-sw-violet i { background: #8E7BFF; } [data-li] .li-sw-ambre i { background: #B45309; } [data-li][data-li-theme="sombre"] .li-sw-ambre i { background: #E8A13C; } [data-li] .li-sw-or i { background: #A8811C; } [data-li][data-li-theme="sombre"] .li-sw-or i { background: #EDC85A; } [data-li] .li-sw-terracotta i { background: #A85B38; } [data-li][data-li-theme="sombre"] .li-sw-terracotta i { background: #E08A63; } /* Mini-fenêtre — le cadre d'où glisse la feuille. Position relative : c'est elle que le voile de la feuille recouvre, et personne d'autre. */ [data-li] .li-fenetre { border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; background: var(--fond); position: relative; box-shadow: var(--ombre-1); } [data-li] .li-f-barre { display: flex; align-items: center; gap: 12px; background: var(--verre); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bord); height: 46px; padding: 0 14px; } [data-li] .li-feux { display: flex; gap: 7px; } [data-li] .li-feux i { width: 12px; height: 12px; border-radius: 50%; } [data-li] .li-feux i:nth-child(1) { background: #FF5F57; } [data-li] .li-feux i:nth-child(2) { background: #FEBC2E; } [data-li] .li-feux i:nth-child(3) { background: #28C840; } [data-li] .li-f-titre { font-size: 13px; font-weight: 600; } [data-li] .li-f-corps { display: flex; min-height: 230px; } [data-li] .li-f-lat { width: 168px; background: var(--verre); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 1px solid var(--bord); padding: 12px 8px; flex: none; } [data-li] .li-f-lat button { display: block; width: 100%; text-align: left; border: 0; background: transparent; font-family: var(--font); font-size: 13px; color: var(--encre); border-radius: 8px; padding: 7px 11px; cursor: pointer; margin-bottom: 2px; } [data-li] .li-f-lat button.li-on { background: var(--accent-doux); color: var(--encre); font-weight: 600; } [data-li] .li-f-zone { flex: 1; padding: 16px; font-size: 13px; color: var(--encre-2); } @media (max-width: 720px) { [data-li] .li-f-lat { display: none; } .li-contenu { padding: 28px 16px 90px; } } /* ============================================================================================== GARDE DE DÉVELOPPEMENT — la boîte rendue SANS ancêtre [data-li]. ⚠️ CETTE RÈGLE EST LA SEULE DE TOUTE LA FEUILLE À NE PAS DESCENDRE DE « [data-li] », et c'est NÉCESSAIRE : elle doit précisément atteindre les éléments qui n'ont PAS cet ancêtre. Ne pas la « corriger » en la préfixant — ce serait la rendre inopérante par construction. Elle n'est posée que par « verifierRacine » en développement (classe ajoutée depuis le JS) ; en production, la classe n'apparaît jamais. Le défaut qu'elle rend visible est autrement SILENCIEUX : la boîte s'ouvre et fonctionne, mais son voile reste dans le flux au lieu de couvrir la fenêtre. ============================================================================================== */ .li-sans-racine { outline: 3px dashed #E5484D; outline-offset: 2px; position: relative; } .li-sans-racine::before { content: "⚠ Boîte du langage sans racine [data-li] — voir la console"; position: absolute; inset-inline: 0; top: -1.6em; font: 600 12px/1.4 system-ui, sans-serif; color: #E5484D; text-align: center; }