/* ============================================================
   Renard Malin – jetons de design
   Un monde en papier découpé (dehors) + la feuille Seyès (dedans).
   ============================================================ */

@font-face {
  font-family: "Bricolage";
  src: url("../assets/fonts/BricolageGrotesque-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage";
  src: url("../assets/fonts/BricolageGrotesque-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument";
  src: url("../assets/fonts/InstrumentSans-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument";
  src: url("../assets/fonts/InstrumentSans-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument";
  src: url("../assets/fonts/InstrumentSans-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* — Encre et papier — */
  --encre:   #1B1838;
  --encre-2: #47436A;   /* texte secondaire, 8,9 : 1 sur blanc */
  --encre-3: #67638A;   /* texte discret,    5,6 : 1 sur blanc */
  --feuille: #FFFFFF;
  --feuille-2: #F6F4FB;
  --trait:   color-mix(in oklab, var(--encre) 14%, transparent);

  /* — Ciel (accueil) — */
  --ciel:    #CBE6FF;
  --aube:    #FFEFC7;

  /* — Les trois pays (un par niveau) — */
  --prairie-bg:   #E7F4B8;
  --prairie:      #8CCB2B;
  --prairie-deep: #3F7A0B;
  --foret-bg:     #C2EDE5;
  --foret:        #17A998;
  --foret-deep:   #0B6F63;
  --cime-bg:      #DDD5FF;
  --cime:         #7357F2;
  --cime-deep:    #4E34C9;

  /* — Les matières : une couleur de papier chacune — */
  --maths:       #2D5BFF;  --maths-deep:   #1F43CC;  --maths-on:   #FFFFFF;
  --francais:    #D93823;  --francais-deep:#B8260F;  --francais-on:#FFFFFF;
  --sciences:    #0C8555;  --sciences-deep:#0A6E48;  --sciences-on:#FFFFFF;
  --histoire:    #F5A20B;  --histoire-deep:#8A5600;  --histoire-on:#1B1838;
  --langues:     #9A42D8;  --langues-deep: #7A22B8;  --langues-on: #FFFFFF;
  --physique:    #07B1C8;  --physique-deep:#06788A;  --physique-on:#1B1838;
  --philo:       #FF7AA8;  --philo-deep:   #B01E5A;  --philo-on:   #1B1838;

  /* — Retours — */
  --juste:       #0F9D58;
  --juste-wash:  #DDF5E6;
  --juste-deep:  #0A6B3B;
  --faux:        #E5483A;
  --faux-wash:   #FFE3DF;
  --faux-deep:   #A8281C;
  --astuce:      #FFD84D;

  /* — Typographie — */
  --f-titre: "Bricolage", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --f-texte: "Instrument", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-base:1.0625rem;
  --t-md:  1.25rem;
  --t-lg:  1.5625rem;
  --t-xl:  clamp(1.9rem, 1.4rem + 1.6vw, 2.45rem);
  --t-2xl: clamp(2.3rem, 1.5rem + 3vw, 3.6rem);
  --t-hero:clamp(2.7rem, 1.3rem + 5.6vw, 5.4rem);

  /* — Espacement (base 4) — */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6.5rem;

  /* — Formes : angles de papier, pas de « pilule » universelle — */
  --r-ctrl: 10px;
  --r-feuille: 22px;
  --r-coupe: 34px 34px 34px 8px;
  --pli: 26px;

  /* — Ombres de papier : un contact net + une ambiance diffuse — */
  --ombre-1: 0 1px 0 rgb(27 24 56 / .08), 0 3px 8px -2px rgb(27 24 56 / .16);
  --ombre-2: 0 1px 0 rgb(27 24 56 / .08), 0 10px 22px -6px rgb(27 24 56 / .24);
  --ombre-3: 0 2px 0 rgb(27 24 56 / .06), 0 22px 40px -14px rgb(27 24 56 / .34);

  /* — Mouvement — */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-rebond: cubic-bezier(.3, 1.5, .5, 1);
  --d-rapide: 140ms;
  --d-moyen: 280ms;

  --largeur: 74rem;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);

  /* contexte par défaut */
  --pays-bg: var(--ciel);
  --pays: var(--cime);
  --pays-deep: var(--cime-deep);
}

/* Le fond de page raconte où l'on est. */
[data-niveau="primaire"] { --pays-bg: var(--prairie-bg); --pays: var(--prairie); --pays-deep: var(--prairie-deep); }
[data-niveau="college"]  { --pays-bg: var(--foret-bg);   --pays: var(--foret);   --pays-deep: var(--foret-deep); }
[data-niveau="lycee"]    { --pays-bg: var(--cime-bg);    --pays: var(--cime);    --pays-deep: var(--cime-deep); }

/* Chaque matière expose --c, --c-deep, --c-on, --c-wash. */
[data-matiere="maths"]    { --c: var(--maths);    --c-deep: var(--maths-deep);    --c-on: var(--maths-on); }
[data-matiere="francais"] { --c: var(--francais); --c-deep: var(--francais-deep); --c-on: var(--francais-on); }
[data-matiere="sciences"] { --c: var(--sciences); --c-deep: var(--sciences-deep); --c-on: var(--sciences-on); }
[data-matiere="histoire"] { --c: var(--histoire); --c-deep: var(--histoire-deep); --c-on: var(--histoire-on); }
[data-matiere="langues"]  { --c: var(--langues);  --c-deep: var(--langues-deep);  --c-on: var(--langues-on); }
[data-matiere="physique"] { --c: var(--physique); --c-deep: var(--physique-deep); --c-on: var(--physique-on); }
[data-matiere="philo"]    { --c: var(--philo);    --c-deep: var(--philo-deep);    --c-on: var(--philo-on); }
[data-matiere] { --c-wash: color-mix(in oklab, var(--c) 14%, white); }

/* Confort de lecture : plus grand, plus aéré, sans quadrillage ni animation. */
[data-confort="lecture"] {
  --t-base: 1.1875rem;
  --t-sm: 1.0625rem;
}