@property --orbe-teinte {
  syntax: '<angle>';
  inherits: true;
  initial-value: 25deg;
}

:root {

  --orbe-teinte: 25deg;

  
  

  --color-bg: #ADB1B7;

  

  --aurore-froid: oklch(0.63 0.13 189);
  --aurore-chaud: oklch(0.73 0.15 32);

  --degrade-bleu:   oklch(from var(--aurore-froid) 0.72 0.10 h);
  --degrade-gris:   oklch(from var(--aurore-froid) 0.80 0.015 h);
  --degrade-peche:  oklch(from var(--aurore-chaud) 0.88 0.06 h);
  --degrade-orange: var(--aurore-chaud);
  
  --degrade-abysse: oklch(from var(--aurore-froid) 0.46 0.09 calc(h + 15));
  --degrade-socle:  oklch(from var(--aurore-chaud) 0.93 0.05 calc(h + 12));

  
  
  /* FOND MOBILE (17/09/2026) : bleu nuit profond et deux taches bleu-vert discretes qui derivent seules
     --nuit pilote la base du degrade mobile (ciel.css, hero-eau.css), --nuit-accent
     les deux taches (ciel.css, animees par ciel-vivant.js) ; la palette de l'eau suit (graphen-blobs.js lit
     les --fond-* au demarrage). Le bureau garde ses couleurs ecrites en dur.
     centre #172137, base #020a28, bords #00000b, taches #003b40 */
  --nuit: oklch(0.16 0.065 265);
  --nuit-accent: oklch(0.32 0.058 204);
  --fond-craie:  oklch(from var(--nuit) calc(l + 0.09) calc(c * 0.7) h);
  --fond-bleu:   var(--nuit);
  --fond-abysse: oklch(from var(--nuit) calc(l - 0.10) calc(c * 0.8) calc(h + 4));
  --fond-chaud:  var(--nuit-accent);

  

  --champ-taille: 200vmax;
  --champ-balancement: 8deg;
  --aurore-duree: 89s;
  --aurore-opacite: 0.45;

  

  

  --socle-hauteur: 42%;

  

  --voile-flou: var(--f-34);
  --voile-saturation: 1.21;
  

  --champ-saturation: 1.18;

  

  --champ-duree: 47s;

  

  --scrim-force: 0.30;
  --scrim-etendue: 55%;

  

  --figure-hauteur: 89vh;
  --figure-droite: 5vw;
  --figure-ombre: rgba(15, 19, 26, 0.38);
  --figure-lumiere: rgba(255, 255, 255, 0.55);

  

  --cube3-taille: 76vmin;
  

  --cube3-x: 69%;
  --cube3-y: 52%;
  
  --cube3-verre: var(--f-21);
  

  --nappe-densite: 55%;

  

  --col-densite: 100%;
  

  --defilement: 0;
  

  --degrade-craie: oklch(0.955 0.005 195);

  

  --grain-opacite: 0.25;
  --grain-taille: 200px;
  --color-text: #FFFFFF;
  

  --color-brand-studio: #545450;
  

  --color-cube: #1B1B1B;

  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-line: #BDBDB9;
  

  --carte-fond: oklch(from var(--color-bg) 0.74 0.008 h);
  

  
  --font-main: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-medium: 500;
  --fw-extrabold: 800;

  
  --f-1: 1px;
  --f-2: 2px;
  --f-3: 3px;
  --f-5: 5px;
  --f-8: 8px;
  --f-13: 13px;
  --f-21: 21px;
  --f-34: 34px;
  --f-55: 55px;
  --f-89: 89px;
  --f-144: 144px;
  --f-233: 233px;
  --f-377: 377px;
  --f-610: 610px;
  --f-987: 987px;
  --f-1597: 1597px;

  
  --l-4: 4px;
  --l-7: 7px;
  --l-11: 11px;
  --l-18: 18px;
  --l-29: 29px;
  --l-47: 47px;
  --l-76: 76px;
  --l-123: 123px;
  --l-199: 199px;
  --l-322: 322px;
  --l-521: 521px;
  --l-843: 843px;
  --l-1364: 1364px;

  
  --text-display: var(--l-123);
  --text-h1: var(--f-34);
  --text-h2: var(--l-47);
  --text-h3: var(--l-29);
  --text-h4: var(--f-21);
  --text-body-lg: var(--f-21);
  --text-body: var(--l-18);
  --text-sm: var(--f-13);
  --text-caption: var(--l-11);

  
  --lh-display: var(--f-144);
  --lh-h1: var(--l-47);
  --lh-h2: var(--f-55);
  --lh-h3: var(--f-34);
  --lh-h4: var(--f-34);
  --lh-body-lg: var(--f-34);
  --lh-body: var(--l-29);
  --lh-sm: var(--f-21);
  --lh-caption: var(--l-18);

  
  --ls-tight: -0.021em;
  --ls-snug: -0.013em;
  --ls-normal: 0;
  --ls-wide: 0.034em;
  --ls-caps: 0.055em;

  --rail-gap: var(--f-55);
  

  --titre-largeur: var(--f-377);

  

  --titre-lignes: 2;

  
  --grid-columns: 13;
  --grid-gap: var(--f-21);
  --container-max: var(--l-1364);
  --container-pad: var(--f-34);

  
  --brand-inset: var(--l-123);
  --canvas-inset: var(--f-89);
  --brand-size: var(--f-21);
  --brand-gap: var(--f-13);

  

  --menu-inset: var(--f-34);

  

  --panneau-largeur: 38.2vw;
  --hero-haut: var(--l-123);                 
  --hero-bas: calc(var(--barre-bas) + var(--barre-hauteur) + var(--f-34));  
  --hero-titre: 38.2vh;                      
  --logo-encre: #000000;

  

  --etiquette-fond: #000000;
  --etiquette-encre: #FFFFFF;
  --etiquette-actif-fond: var(--degrade-craie);
  --etiquette-actif-encre: #000000;
  
  --etiquette-min: var(--l-123);

  

  --cube-rotation: 610ms;
  --cube-repos: 5210ms;
  --cube-derive: 11;

  

  --cube-glisse: 0.21;

  

  --barre-hauteur: var(--f-34);
  --barre-fermee: var(--l-199);
  --barre-largeur: var(--f-377);
  --barre-bas: var(--f-34);
  --barre-cubelet: var(--f-8);

  

  --etagere-butee: calc(var(--f-89) + var(--text-display) + var(--f-55));
  --etagere-cadence: 100vh;
  

  --etagere-tenue: 100vh;
  

  --etagere-card: 61.8%;
  --etagere-pas: 19.1%;

  

  --barre-cube-teinte: var(--color-text);
  --barre-cube-haut: 0.42;
  --barre-cube-droite: 0.26;
  --barre-cube-gauche: 0.14;

  

  --barre-cube-joint: rgba(0, 0, 0, 0.55);
  --barre-cube-trait: 0.7;
  --barre-cube-arete: 1.1;

  

  --barre-verre: rgba(0, 0, 0, 0.28);
  --barre-flou: var(--f-13);

  
  --radius-xs: var(--f-3);
  --radius-sm: var(--f-5);
  --radius-md: var(--f-8);
  --radius-lg: var(--f-13);
  --radius-xl: var(--f-21);

  --border-hair: var(--f-1);
  --border-thin: var(--f-2);
  --border-thick: var(--f-3);
}

@media (max-width: 987px) {
  :root {
    --text-display: var(--l-76);
    --text-h1: var(--l-29);
    --text-h2: var(--l-29);
    --text-h3: var(--f-21);

    --lh-display: var(--f-89);
    --lh-h1: var(--f-34);
    --lh-h2: var(--f-34);
    --lh-h3: var(--f-34);

    --grid-columns: 8;

    --brand-inset: var(--l-76);
    --canvas-inset: var(--f-55);
    --rail-gap: var(--f-34);
    

    --titre-largeur: var(--f-233);
    

    --titre-lignes: 3;
  }
}

@media (max-width: 610px) {
  :root {
    --figure-hauteur: 55vh;
    --figure-droite: 0vw;
    --text-display: var(--l-47);
    --text-h1: var(--l-29);
    --text-h2: var(--f-21);
    --text-h3: var(--l-18);

    --lh-display: var(--f-55);
    --lh-h1: var(--f-34);
    --lh-h2: var(--f-34);
    --lh-h3: var(--l-29);

    --grid-columns: 5;
    --grid-gap: var(--f-13);
    --container-pad: var(--f-21);

    --brand-inset: var(--l-47);
    --canvas-inset: var(--l-47);

    --rail-gap: var(--f-21);
    --brand-size: var(--f-13);
    --brand-gap: var(--f-8);
    --menu-inset: var(--f-21);

    --barre-bas: var(--f-21);

  }
}