/* ═══ JETONS ═══════════════════════════════════════════════════════════════
   Tout ce qui se règle se règle ici. Une couleur n'est jamais écrite en dur
   dans un composant : elle passe par un jeton, sinon l'identité se délite. */
@font-face{font-family:"Sora";src:url("../polices/sora-latin.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";src:url("../polices/sora-latin-ext.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;
  /* fonds */
  --nuit:#080E1B; --nuit-2:#111C2B; --fond-rgb:8,14,27; --fond2-rgb:17,28,43;
  /* textes */
  --texte:#F5F7FA; --texte-2:#A9B8C8; --texte-3:#6F8196;
  /* accents : un seul sert à dire « choisi », l'autre à dire « information » */
  --accent:#7DDCD8; --accent-rgb:125,220,216; --accent-2:#89A8E8; --accent2-rgb:137,168,232;
  --bouton-a:#9BE7E3; --sur-accent:#080E1B;
  --craie:#F3F1E9; --craie-rgb:243,241,233; --perso-fond:#0D1626;
  --alerte:#F0A08C;
  /* la matière : « lueur » est la teinte des voiles et des bords, « reflet » celle des arêtes */
  --lueur:255,255,255; --reflet:255,255,255; --ombre-rgb:0,0,0;
  --verre-haut:rgba(255,255,255,.10); --verre-bas:rgba(255,255,255,.035);
  --verre-bord:rgba(255,255,255,.13); --verre-bord-vif:rgba(255,255,255,.26);
  --verre-reflet:inset 0 1px 0 rgba(255,255,255,.12);
  --ombre-verre:0 20px 60px rgba(0,0,0,.22);
  --panneau-a:rgba(30,44,64,.86); --panneau-b:rgba(14,22,36,.9); --voile:rgba(4,8,16,.6);
  --champ:rgba(8,14,27,.42); --champ-vif:rgba(8,14,27,.56);
  --flou:blur(20px) saturate(135%);
  /* rayons */
  --r-carte:24px; --r-option:18px; --r-champ:16px; --r-pilule:999px;
  /* mouvement — micro 150–250, entrées 350–550, scènes 450–800 */
  --t-micro:.2s; --t-entree:.46s; --t-scene:.62s;
  --doux:cubic-bezier(.33,0,.1,1); --ressort:cubic-bezier(.3,1.35,.4,1);
  /* marges sûres */
  --g:max(18px,env(safe-area-inset-left,0px)); --d:max(18px,env(safe-area-inset-right,0px));
  --haut:env(safe-area-inset-top,0px); --bas:env(safe-area-inset-bottom,0px);
}

/* ═══ MODE JOUR ═══ fond blanc pur ; la craie devient un fusain, l'accent fonce
   pour rester lisible. Seuls les jetons changent : aucun composant n'est réécrit. */
:root[data-theme="clair"]{
  color-scheme:light;
  --nuit:#FFFFFF; --nuit-2:#F3F5F8; --fond-rgb:255,255,255; --fond2-rgb:255,255,255;
  --texte:#0F1722; --texte-2:#465364; --texte-3:#7B8797;
  --accent:#0F8C86; --accent-rgb:15,140,134; --accent-2:#3F63BD; --accent2-rgb:63,99,189;
  --bouton-a:#19A39C; --sur-accent:#FFFFFF;
  --craie:#232830; --craie-rgb:35,40,48; --perso-fond:#FFFFFF;
  --alerte:#BF4127;
  --lueur:15,23,34; --reflet:255,255,255; --ombre-rgb:40,54,74;
  --verre-haut:rgba(255,255,255,.96); --verre-bas:rgba(255,255,255,.9);
  --verre-bord:rgba(15,23,34,.11); --verre-bord-vif:rgba(15,23,34,.28);
  --verre-reflet:inset 0 1px 0 rgba(255,255,255,1);
  --ombre-verre:0 18px 50px rgba(40,54,74,.10), 0 2px 6px rgba(40,54,74,.05);
  --panneau-a:rgba(255,255,255,.97); --panneau-b:rgba(250,251,253,.97); --voile:rgba(15,23,34,.34);
  --champ:rgba(243,245,248,.9); --champ-vif:#FFFFFF;
}