/* ═══════════════════════════════════════════════════════════════════════════ Giri Thérapia — THÈMES Chaque thème ne fait QUE surcharger les variables déclarées dans therapia.css. Aucune règle de mise en page ici : si une couleur doit changer, c'est qu'il manque une variable — on l'ajoute à la palette, on ne l'écrit jamais en dur. Appliqué par , posé avant le premier rendu (anti-flash). ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. MARBRE & OR (défaut) — marbre clair, or chaud. L'identité Giri. ── */ html[data-theme="marbre"] { /* = :root, rien à surcharger */ } /* ── 2. NUIT D'OR — noir chaud et or vif. Le grand soir. ── */ html[data-theme="nuit"] { --clair:#100d09; --or:#d9a72a; --or-vif:#f0c956; --or-lum:#f7e3a4; --or-profond:#f2d98a; --or-texte:#e8c76a; --encre:#fdf6e4; --texte:#e4dbc8; --doux:#a89c85; --carte:#1a1611; --carte-2:#1f1a14; --tiede:#241e15; --tiede-2:#2c2418; --survol:#2a2318; --nav-1:#151109; --nav-2:#1c1710; --bord:#3a3122; --bord-doux:#2a2419; --bord-or:rgba(217,167,42,.22); --bord-or-fort:rgba(217,167,42,.42); --lueur-1:rgba(240,201,86,.13); --lueur-2:rgba(217,167,42,.09); --sur-or:#1a1408; --puce:#332a1a; --halo:rgba(217,167,42,.40); --ombre:0 16px 50px rgba(0,0,0,.55); --ok-f:#1d2a1b; --ok-t:#8fd07f; --err-f:#2e1a18; --err-t:#f0968c; --att-f:#2b2416; --att-t:#e0bd6a; --run-f:#2b2416; --rubis:#d4685c; --focus:rgba(240,201,86,.26); } /* ── 3. SAUGE & LAITON — vert apaisant, laiton doux. Pour les cabinets calmes. ── */ html[data-theme="sauge"] { --clair:#f3f6f1; --or:#9a8348; --or-vif:#bda468; --or-lum:#e2d9bd; --or-profond:#6e5c2e; --or-texte:#6a5c33; --encre:#1e2620; --texte:#3b463d; --doux:#6d7a6f; --carte:#ffffff; --carte-2:#fafcf8; --tiede:#f4f7ef; --tiede-2:#eaf0e3; --survol:#eef3e8; --nav-1:#f8fbf6; --nav-2:#eef3e9; --bord:#d9e0d4; --bord-doux:#e6ebe1; --bord-or:rgba(122,140,116,.20); --bord-or-fort:rgba(122,140,116,.36); --lueur-1:rgba(154,169,140,.16); --lueur-2:rgba(189,164,104,.10); --sur-or:#2a2413; --puce:#e6ecdd; --halo:rgba(122,140,116,.28); --ombre:0 12px 40px rgba(58,74,56,.11); --ok-f:#e6f1e4; --ok-t:#3c7a42; --err-f:#f7e9e6; --err-t:#a8503f; --att-f:#f1eddc; --att-t:#7d6b34; --run-f:#eef0e2; --rubis:#b2604f; --focus:rgba(154,131,72,.20); } /* ── 4. GRÈS ROSÉ — terre rosée et cuivre. Chaleureux, enveloppant. ── */ html[data-theme="gres"] { --clair:#fbf3ee; --or:#b0714c; --or-vif:#cf9169; --or-lum:#f0d3bd; --or-profond:#844f31; --or-texte:#8a5335; --encre:#2b1d16; --texte:#4d3a30; --doux:#8a7167; --carte:#ffffff; --carte-2:#fefaf7; --tiede:#fdf3ec; --tiede-2:#f8e6da; --survol:#faece2; --nav-1:#fdf7f3; --nav-2:#f9ebe2; --bord:#ecdacd; --bord-doux:#f4e6dc; --bord-or:rgba(176,113,76,.18); --bord-or-fort:rgba(176,113,76,.34); --lueur-1:rgba(207,145,105,.16); --lueur-2:rgba(176,113,76,.10); --sur-or:#3a1f10; --puce:#f6e2d4; --halo:rgba(176,113,76,.30); --ombre:0 12px 42px rgba(132,79,49,.12); --ok-f:#eaf2e6; --ok-t:#4a7a3e; --err-f:#fae7e3; --err-t:#b04a38; --att-f:#fbeadc; --att-t:#96602f; --run-f:#f8e7da; --rubis:#c05a48; --focus:rgba(207,145,105,.22); } /* ── 5. ENCRE & PLATINE — bleu nuit profond, argent froid. Sobre, clinique. ── */ html[data-theme="encre"] { --clair:#0d1119; --or:#9db4d0; --or-vif:#c3d5ea; --or-lum:#dde8f4; --or-profond:#dbe6f2; --or-texte:#b6c9de; --encre:#eef3f9; --texte:#d3dce7; --doux:#8b98a9; --carte:#161c27; --carte-2:#1a2130; --tiede:#1e2634; --tiede-2:#243044; --survol:#212b3b; --nav-1:#111620; --nav-2:#171e2a; --bord:#2c3648; --bord-doux:#222b3a; --bord-or:rgba(157,180,208,.20); --bord-or-fort:rgba(157,180,208,.38); --lueur-1:rgba(157,180,208,.11); --lueur-2:rgba(120,150,190,.08); --sur-or:#0f1520; --puce:#283345; --halo:rgba(157,180,208,.30); --ombre:0 16px 50px rgba(0,0,0,.5); --ok-f:#18291f; --ok-t:#83cf9a; --err-f:#2a1a1e; --err-t:#f09a9a; --att-f:#232b3a; --att-t:#c3d0e0; --run-f:#212a39; --rubis:#c86a68; --focus:rgba(157,180,208,.26); } /* ── Sélecteur de thème (aperçus cliquables) ── */ .themes { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:6px; } .theme-c { border:2px solid var(--bord); border-radius:16px; padding:0; cursor:pointer; overflow:hidden; background:var(--carte); text-align:left; transition:transform .14s, border-color .14s, box-shadow .14s; font-family:inherit; } .theme-c:hover { transform:translateY(-3px); box-shadow:var(--ombre); } .theme-c.actif { border-color:var(--or); box-shadow:0 0 0 3px var(--focus); } /* L'aperçu se peint avec les couleurs DU thème présenté, pas du thème courant */ .theme-apercu { height:96px; padding:12px; position:relative; } .theme-apercu .ap-carte { height:34px; border-radius:9px; display:flex; align-items:center; padding:0 10px; gap:7px; } .theme-apercu .ap-rond { width:18px; height:18px; border-radius:50%; } .theme-apercu .ap-trait { height:5px; border-radius:99px; flex:1; opacity:.6; } .theme-apercu .ap-btn { height:22px; width:78px; border-radius:7px; margin-top:10px; } .theme-nom { padding:11px 13px; border-top:1px solid var(--bord-doux); } .theme-nom b { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.06rem; color:var(--encre); display:block; } .theme-nom span { font-size:.79rem; color:var(--doux); }