:root {
  color-scheme: light;
  --page:      #eae4fd;   
  --hero-fond: #e8e1fc;   
  --panel:     #f3f5fe;   
  --panel-2:   #f5f4ff;
  --soutenu:   #ded5fb;   
  --nuage:     #dfe4fb;
  --carte:     #ffffff;   
  --surface-neutre: #eceef5;  
  --verre:     rgba(255,255,255,.72);
  --verre-fort: rgba(255,255,255,.86);
  --ink:   #292b31;
  --ink-2: #595d6c;
  --ink-3: #626775;       
  --ink-4: #b2b6ca;       
  --ligne:       rgba(41,43,49,.10);
  --ligne-forte: rgba(41,43,49,.18);
  --acc:       #8560ec;   
  --acc-fort:  #6544c7;   
  --acc-clair: #d6c9fe;
  --acc-voile: rgba(133,96,236,.10);
  --acc-trait: rgba(101,68,199,.28);
  --btn1: #8a63ef;
  --btn2: #6544c7;
  --sur-btn: #ffffff;     
  --sur-acc: #ffffff;     
  --trait: rgba(101,68,199,.30);
  --trait-nuit: rgba(192,166,255,.42);  
  --g1: #6f6bff;
  --g2: #ff7ab8;
  --g3: #a97bff;
  --lueur: #c0a6ff;
  --voile-aurore: rgba(255,255,255,.34);  
  --nuit-fond:  #2a1a63;
  --nuit-fond-2:#1d1247;
  --ink-nuit:   #a9a6c8;
  --ink-nuit-2: #8e8bb0;  
  --gain:        #0f8f70;
  --gain-voile:  #dff2ec;
  --gain-nuit:   #4fc7a5;   
  --perte:       #c8474b;
  --perte-voile: #fbe6e6;
  --perte-nuit:  #f0888b;
  --perte-texte: #b03a3e;   
  --alerte:      #96671c;
  --alerte-voile:#faeedb;
  --sur-sem:     #ffffff;   
  --om-1: 0 1px 2px rgba(58,50,99,.08), 0 0 0 1px rgba(41,43,49,.04);
  --om-2: 0 2px 4px rgba(58,50,99,.06), 0 16px 40px -18px rgba(58,50,99,.30), 0 0 0 1px rgba(41,43,49,.04);
  --om-3: 0 4px 10px rgba(58,50,99,.08), 0 40px 90px -36px rgba(58,50,99,.42), 0 0 0 1px rgba(41,43,49,.04);
  --om-btn: 0 10px 28px -10px rgba(101,68,199,.55), inset 0 1px 0 rgba(255,255,255,.22);
  --verre-bord: inset 0 0 0 1px rgba(255,255,255,.75);
  --police: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-hero:   clamp(2.6rem, 1.45rem + 4.4vw, 5rem);
  --t-sect:   clamp(1.75rem, 1.35rem + 2.4vw, 3.25rem);
  --t-titre:  clamp(1.25rem, 1.1rem + .45vw, 1.5rem);
  --t-geant:  clamp(3.5rem, 2rem + 5.6vw, 6.5rem);
  --t-lead:   clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-corps:  1rem;
  --t-donnee: .875rem;
  --t-label:  .75rem;
  --suivi-titre: -.035em;
  --suivi-label: .14em;
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px;
  --e8: 32px; --e10: 40px; --e12: 48px; --e16: 64px; --e20: 80px; --e24: 96px; --e32: 128px;
  --gouttiere: clamp(20px, 5vw, 64px);
  --large: 1240px;
  --lecture: 62ch;
  --zone-y: clamp(56px, 6.4vw, 96px);
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px;
  --pill: 999px;
  --entree:  cubic-bezier(.16, 1, .3, 1);
  --doux:    cubic-bezier(.4, 0, .2, 1);
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
  --tr: 180ms;
}
:root[data-theme="nuit"] {
  color-scheme: dark;
  --page:      #0a0b13;
  --hero-fond: #0c0d1b;
  --panel:     #10121f;
  --panel-2:   #151729;
  --soutenu:   #17152e;
  --nuage:     #25273d;
  --carte:     #181a2e;
  --surface-neutre: #2a2c44;
  --verre:     rgba(22,24,43,.74);
  --verre-fort: rgba(22,24,43,.86);
  --ink:   #eceafa;
  --ink-2: #aeabcb;
  --ink-3: #a19ebf;
  --ink-4: #6b698a;
  --ligne:       rgba(255,255,255,.08);
  --ligne-forte: rgba(255,255,255,.15);
  --acc:       #a496ff;
  --acc-fort:  #b1a4ff;
  --acc-clair: #2e2764;
  --acc-voile: rgba(164,150,255,.12);
  --acc-trait: rgba(177,164,255,.30);
  --btn1: #b3a5ff;
  --btn2: #8878f0;
  --sur-btn: #16122e;
  --sur-acc: #16122e;
  --trait: rgba(177,164,255,.34);
  --voile-aurore: rgba(10,11,19,.52);
  --gain:        #4fc7a5;
  --gain-voile:  rgba(79,199,165,.14);
  --perte:       #f0888b;
  --perte-voile: rgba(240,136,139,.14);
  --alerte:      #ffc266;
  --alerte-voile:rgba(255,194,102,.13);
  --sur-sem:     #0b0d16;
  --om-1: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
  --om-2: 0 1px 2px rgba(0,0,0,.4), 0 18px 44px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  --om-3: 0 2px 6px rgba(0,0,0,.45), 0 44px 96px -36px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.07);
  --om-btn: 0 12px 32px -12px rgba(164,150,255,.55), inset 0 1px 0 rgba(255,255,255,.35);
  --verre-bord: inset 0 0 0 1px rgba(255,255,255,.10);
}
@media (orientation: landscape) and (max-height: 500px) {
  :root { --zone-y: 40px; --t-sect: clamp(1.75rem, 9.5vh, 2.25rem); }
}