/* oddra.css : la direction artistique commune de tous les sites d'oddra.me (hors jeux).
   Style « lui » depuis le 11/11/2026 (vote Étale, oddra.me/exemple/etale/lui) : titres Gloock, texte Schibsted Grotesk,
   marine, crème et orange, rayons généreux, ombres en couches teintées, grain léger ; thème qui suit l'appareil.
   Sombre en anthracite neutre, pas en bleu (« met pas un bleu partout », 11/11).
   L'ancienne DA forêt et crème du 10/11 est gardée dans oddra-foret-2026-11-10.css pour revenir en arrière.
   Une page la charge APRÈS son propre <style> :
   <link rel="stylesheet" href="https://oddra.me/commun/oddra.css">
   Les noms des variables restent ceux des QCM d'origine ; une page peut garder ses propres noms
   à condition de n'en faire que des alias (ex. --fond: var(--paper)), jamais de couleur en dur. */

/* polices auto-hébergées (SIL OFL), servies aussi aux sous-domaines */
@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(https://oddra.me/commun/polices/gloock-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(https://oddra.me/commun/polices/gloock-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(https://oddra.me/commun/polices/schibsted-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(https://oddra.me/commun/polices/schibsted-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root, :root[data-theme="light"]{
  color-scheme: light;
  /* fonds : crème, carte plus claire que le fond, bandeau un ton plus sombre */
  --paper:#EFE7DA; --surface:#F8F4EC; --surface-2:#E5DCCC;
  /* textes : marine et deux gris teintés de marine (4,5:1 au moins sur les trois fonds) */
  --ink:#070C29; --ink-2:#4E5269; --ink-3:#565A6F;
  /* traits */
  --rule:#D9D1C4; --rule-strong:#B9B2A6;
  /* accent : orange brûlé lisible en texte (liens, bouton principal) */
  --accent:#9A4A00; --accent-soft:#F3DEC6; --accent-ink:#F8F4EC;
  /* marque : l'orange vif, en aplat seulement (bouton phare, surlignage, pastille), texte marine dessus */
  --mark:#FF9E0D; --mark-soft:#FBE3BF; --mark-ink:#070C29;
  /* états */
  --keep:#2F6B45; --keep-soft:#DCE8DA;
  --drop:#A4321B; --drop-soft:#F6DCD5;
  --hold:#805400; --hold-soft:#F5E3C4;
  --sauge:#47725A;      /* sauge foncée, couleur froide secondaire */
  --code:#E5DCCC;
  /* polices */
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:"Gloock",Georgia,serif;   /* titres ; une seule graisse, jamais en gras */
  --titre:var(--serif);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  /* formes : rayon intérieur = rayon extérieur moins la marge */
  --radius:16px; --radius-sm:10px; --radius-lg:24px;
  /* relief : ombres en couches teintées par le crème, liseré clair en haut */
  --ombre:0 1px 1px rgb(74 52 20 / .05),0 3px 6px rgb(74 52 20 / .06),0 12px 24px rgb(74 52 20 / .07),0 32px 64px rgb(74 52 20 / .08),inset 0 1px 0 rgb(255 255 255 / .8);
  --ombre-case:0 1px 1px rgb(74 52 20 / .06),0 2px 6px rgb(74 52 20 / .06),inset 0 1px 0 rgb(255 255 255 / .9);
  --verre:rgb(248 244 236 / .62); --verre-bord:rgb(255 255 255 / .6);
  /* mouvement */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme: dark;
  --paper:#0F1012; --surface:#18191C; --surface-2:#202125;
  --ink:#EFE7DA; --ink-2:#B1ABA0; --ink-3:#979187;
  --rule:#26272B; --rule-strong:#3B3C40;
  --accent:#FF9E0D; --accent-soft:#2B2216; --accent-ink:#0F1012;
  --mark:#FFC266; --mark-soft:#29231A; --mark-ink:#0F1012;
  --keep:#7DC495; --keep-soft:#12291F;
  --drop:#FF8A70; --drop-soft:#3A2220;
  --hold:#FFB547; --hold-soft:#2E2414;
  --sauge:#8FB59A; --code:#0A0B0C;
  --ombre:0 0 0 1px rgb(255 255 255 / .08),inset 0 1px 0 rgb(255 255 255 / .12),0 24px 48px rgb(0 0 0 / .35);
  --ombre-case:0 0 0 1px rgb(255 255 255 / .08),inset 0 1px 0 rgb(255 255 255 / .1);
  --verre:rgb(24 25 28 / .6); --verre-bord:rgb(255 255 255 / .08);
}}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0F1012; --surface:#18191C; --surface-2:#202125;
  --ink:#EFE7DA; --ink-2:#B1ABA0; --ink-3:#979187;
  --rule:#26272B; --rule-strong:#3B3C40;
  --accent:#FF9E0D; --accent-soft:#2B2216; --accent-ink:#0F1012;
  --mark:#FFC266; --mark-soft:#29231A; --mark-ink:#0F1012;
  --keep:#7DC495; --keep-soft:#12291F;
  --drop:#FF8A70; --drop-soft:#3A2220;
  --hold:#FFB547; --hold-soft:#2E2414;
  --sauge:#8FB59A; --code:#0A0B0C;
  --ombre:0 0 0 1px rgb(255 255 255 / .08),inset 0 1px 0 rgb(255 255 255 / .12),0 24px 48px rgb(0 0 0 / .35);
  --ombre-case:0 0 0 1px rgb(255 255 255 / .08),inset 0 1px 0 rgb(255 255 255 / .1);
  --verre:rgb(24 25 28 / .6); --verre-bord:rgb(255 255 255 / .08);
}

/* socle commun */
:root{font-synthesis-weight:none}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* grain de papier très léger sous le contenu (fond seulement) */
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])::before{mix-blend-mode:screen;opacity:.04}}
:root[data-theme="dark"]::before{mix-blend-mode:screen;opacity:.04}
:where(a){color:var(--accent)}   /* lien sans règle propre : l'accent plutôt que le bleu du navigateur */
code,kbd,pre,samp{font-family:var(--mono)}
::selection{background:var(--mark-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* finitions : titres équilibrés, pas de mot seul en fin de paragraphe, chiffres alignés */
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
table,input,output,time,progress,meter{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important;scroll-behavior:auto !important}}