/* * =========================================================================== * ORIQ : COUCHE COULEUR « ECRAN LARGE + NOIR OLED + HALOS ». * --------------------------------------------------------------------------- * Chargee sur TOUTES les pages (accueil Vite + pages statiques), apres les * tokens. Les selecteurs sont ecrits en `html:root` (et non `:root`) pour * l'emporter quel que soit l'ordre des feuilles : Vite injecte le bundle de * l'accueil en fin de , apres ce fichier. * * 1. GAMUT. Sur un ecran Display P3 (Mac, iPhone, iPad), les aplats de marque * sortent du sRGB : bleu Oriq, corail, emeraude, ambre, violet. Les ENCRES * DE TEXTE (--brand-ink, --brand-ink-strong, --amber-ink, --emerald-ink) * ne bougent pas en mode clair : le contraste AA est conserve tel quel. * Sur ecran sRGB, rien ne change : l'hexa des tokens reste le repli. * 2. NOIR OLED. Tout fond sombre passe au noir pur #000 : sur OLED le pixel * s'eteint, l'accent flotte dans le vide. Fini le bleu nuit #070D1F. * 3. HALOS. Lueur dans la teinte (jamais grise) derriere les CTA et les * accents, et une « aurore » : trois nappes de couleur qui derivent * lentement derriere le hero et l'acte final. Transform uniquement, * coupee avec prefers-reduced-motion. * =========================================================================== */ /* ------ Tokens communs a tous les ecrans : noir OLED + halos sRGB ------ */ html:root { --oled: #000000; --oled-2: #05070f; /* second plan a peine plus clair */ --halo-brand: rgba(0, 102, 255, 0.34); --halo-brand-strong: rgba(0, 102, 255, 0.55); --halo-coral: rgba(255, 81, 64, 0.15); --halo-violet: rgba(108, 43, 255, 0.18); --halo-amber: rgba(255, 179, 0, 0.14); } /* ------ Ecran large : les aplats sortent du sRGB ------ */ @media (color-gamut: p3) { html:root { --brand: color(display-p3 0 0.42 1); --cta: color(display-p3 0 0.42 1); --cta-hover: color(display-p3 0.1 0.5 1); --brand-glow: color(display-p3 0 0.42 1 / 0.55); --shadow-cta: 0 18px 40px -10px color(display-p3 0 0.42 1 / 0.55); --shadow-cta-hover: 0 24px 56px -12px color(display-p3 0 0.42 1 / 0.7); --sec-coral: color(display-p3 1 0.34 0.24); --sec-emerald: color(display-p3 0 0.8 0.56); --sec-amber: color(display-p3 1 0.72 0); --sec-violet: color(display-p3 0.42 0.18 1); /* Slots d'accent de l'accueil (aplats, filets, moities de titres) */ --accent-hero: color(display-p3 0 0.42 1); --accent-dialogue: color(display-p3 0 0.42 1); --accent-manifest: color(display-p3 1 0.34 0.24); --accent-demarche: color(display-p3 0 0.42 1); --accent-approches: color(display-p3 0 0.42 1); --accent-real: color(display-p3 0 0.42 1); --accent-methode: color(display-p3 0 0.42 1); --accent-consult: color(display-p3 0 0.42 1); /* Accent lisible sur noir et degrade du module RAG, interpole en oklch (pas de gris boueux au milieu) */ --on-ink-accent: color(display-p3 0.5 0.72 1); --mod-rag-grad: linear-gradient(135deg in oklch, color(display-p3 0 0.42 1) 0%, color(display-p3 0 0.3 0.74) 55%, color(display-p3 0 0.15 0.4) 100%); --halo-brand: color(display-p3 0 0.42 1 / 0.4); --halo-brand-strong: color(display-p3 0 0.42 1 / 0.62); --halo-coral: color(display-p3 1 0.34 0.24 / 0.18); --halo-violet: color(display-p3 0.42 0.18 1 / 0.22); --halo-amber: color(display-p3 1 0.72 0 / 0.16); } /* Sur noir, les encres de texte repassent en bleu clair P3 */ html:root[data-mode="dark"] { --brand-ink: color(display-p3 0.5 0.72 1); --brand-ink-strong: color(display-p3 0.62 0.8 1); } } /* ------ Noir OLED : l'acte final et le pied de page ------ */ html:root[data-mode="dark"] { --bg: var(--oled); --bg-2: var(--oled-2); --shadow-card-hover: 0 2px 8px var(--halo-brand), 0 18px 44px -16px var(--halo-brand-strong); } footer.site-footer { background: var(--oled); } footer.site-footer { --bg-2: var(--oled); } /* ------ Halos : la lueur dans la teinte ------ */ html:root[data-mode="dark"] .btn--primary, .theme-dark .btn--primary { box-shadow: 0 0 0 1px color-mix(in oklab, var(--cta) 40%, transparent), 0 12px 36px -8px var(--halo-brand-strong), 0 0 90px -12px var(--halo-brand-strong); } html:root[data-mode="dark"] .btn--primary:hover, .theme-dark .btn--primary:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--cta) 60%, transparent), 0 16px 44px -8px var(--halo-brand-strong), 0 0 120px -8px var(--halo-brand-strong); } /* ------ Aurore : trois nappes qui derivent (transform seulement) ------ */ .aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; } .aurora__b { position: absolute; border-radius: 50%; width: 70vmax; height: 70vmax; will-change: transform; animation: auroraDrift var(--aurora-dur, 28s) ease-in-out infinite alternate; } /* Le bord flou vient du degrade lui-meme : aucun filter, rien a rasteriser */ .aurora__b--1 { left: -22%; top: -38%; background: radial-gradient(closest-side, var(--halo-brand), transparent); --aurora-dur: 26s; } .aurora__b--2 { right: -28%; top: -22%; background: radial-gradient(closest-side, var(--halo-coral), transparent); --aurora-dur: 33s; animation-delay: -9s; } .aurora__b--3 { left: 18%; bottom: -55%; background: radial-gradient(closest-side, var(--halo-violet), transparent); --aurora-dur: 39s; animation-delay: -17s; } @keyframes auroraDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(11vw, 7vh, 0) scale(1.18); } } /* Sur noir, l'aurore est plus dense : la lumiere n'a rien pour la diluer */ .aurora--dark .aurora__b--1 { background: radial-gradient(closest-side, var(--halo-brand-strong), transparent); } .aurora--dark .aurora__b--2 { background: radial-gradient(closest-side, var(--halo-violet), transparent); } .aurora--dark .aurora__b--3 { background: radial-gradient(closest-side, var(--halo-amber), transparent); } /* Un parent qui porte une aurore doit etre positionne ; son contenu passe devant */ .has-aurora { position: relative; } .has-aurora > :not(.aurora) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .aurora__b { animation: none; } }