/* ============================================================
   Les fontes, servies depuis ce domaine.
   IBM Plex, sous licence SIL Open Font 1.1 (voir fontes/LICENCE.txt).
   Sans est une fonte variable : un seul fichier couvre 400 à 700, au lieu
   de quatre fichiers identiques. Sous-ensemble latin uniquement : il couvre
   le français, les guillemets et les tirets. Les flèches ↗ et → n'y sont pas, elles viennent de la
   fonte système, comme c'était déjà le cas via Google.
   ============================================================ */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fontes/plex-mono-400.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fontes/plex-mono-500.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fontes/plex-mono-600.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fontes/plex-sans.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: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fontes/plex-sans-italique.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;
}

/* ============================================================
   Le système partagé : rohanfosse.fr, les espaces de promo,
   le calendrier, la vue pilote et l'administration.

   Sombre d'abord. Trois états : le thème du système par défaut,
   ou un choix explicite posé sur <html data-theme="…"> par le
   bouton de commun.js.

   Les couleurs d'échéance sont Okabe-Ito, et chaque type porte
   aussi une forme : elles restent distinguables sans la couleur.

   Deux vocabulaires cohabitent, le long (--text-main) et le court
   (--ink). Le second est un alias du premier, gardé parce que le
   calendrier et l'administration l'utilisent partout.
   ============================================================ */

/* ---------- la palette, écrite une seule fois ----------
   light-dark() choisit selon color-scheme : « light dark » suit le système,
   et le bouton de thème n'a qu'à figer color-scheme sur l'une des deux
   valeurs. Les déclarations sombres qui précèdent servent de repli aux
   navigateurs qui ne connaissent pas encore la fonction : ils gardent le
   thème sombre, qui est celui d'origine. */
:root {
  --bg-color:     #1a1918;
  --bg-surface:   rgba(255, 255, 255, .03);
  --bg-hover:     rgba(255, 255, 255, .045);
  --bg-carte:     #211f1e;
  --bg-bande:     #201f1d;
  --bg-barre:     #2e2c2a;
  --bord-barre:   #45423f;
  --text-main:    #f0eeea;
  --text-muted:   #b8b6ac;
  --text-soft:    #9c9a91;
  --accent-color: #ff8fa3;
  --border-color: rgba(255, 255, 255, .11);
  --border-faible: rgba(255, 255, 255, .055);
  --border-fort:  rgba(255, 255, 255, .34);
  --ok:   #35bb95;
  --warn: #ff8fa3;
  --c-livrable:   #f0b32e;
  --c-soutenance: #e099bd;
  --c-cctl:       #4da6dd;
  --c-check:      #35bb95;
  --c-alternance: #f07d35;
  --c-neutral:    #a9a9a9;
  --p-a3: #B48A28;
  --p-a5: #C96A85;
  --p-fise3: #5E88C4;
}

:root {
  color-scheme: light dark;

  --bg-color:      light-dark(#ffffff, #1a1918);
  --bg-surface:    light-dark(#f7f6f3, rgba(255, 255, 255, .03));
  --bg-hover:      light-dark(#f2f1ed, rgba(255, 255, 255, .045));
  --bg-carte:      light-dark(#ffffff, #211f1e);
  --bg-bande:      light-dark(#f7f6f3, #201f1d);
  --bg-barre:      light-dark(#e8e6e2, #2e2c2a);
  --bord-barre:    light-dark(#d0cdc6, #45423f);
  --text-main:     light-dark(#26251f, #f0eeea);
  --text-muted:    light-dark(#46453c, #b8b6ac);
  --text-soft:     light-dark(#5b5a52, #9c9a91);
  --accent-color:  light-dark(#c20b2e, #ff8fa3);
  --border-color:  light-dark(rgba(0, 0, 0, .13), rgba(255, 255, 255, .11));
  --border-faible: light-dark(rgba(0, 0, 0, .07), rgba(255, 255, 255, .055));
  --border-fort:   light-dark(rgba(0, 0, 0, .58), rgba(255, 255, 255, .34));
  --ok:            light-dark(#009E73, #35bb95);
  --warn:          light-dark(#c20b2e, #ff8fa3);
  --c-livrable:    light-dark(#E69F00, #f0b32e);
  --c-soutenance:  light-dark(#CC79A7, #e099bd);
  --c-cctl:        light-dark(#0072B2, #4da6dd);
  --c-check:       light-dark(#009E73, #35bb95);
  --c-alternance:  light-dark(#D55E00, #f07d35);
  --c-neutral:     light-dark(#767676, #a9a9a9);
  --p-a3:          light-dark(#8F6910, #B48A28);
  --p-a5:          light-dark(#B04A6E, #C96A85);
  --p-fise3:       light-dark(#3D6DA8, #5E88C4);

  --ombre: light-dark(0 10px 30px rgba(51, 49, 44, .12), 0 10px 30px rgba(0, 0, 0, .45));

  /* alias courts, employés par le calendrier et l'administration */
  --paper: var(--bg-color);
  --card:  var(--bg-carte);
  --band:  var(--bg-bande);
  --bar:   var(--bg-barre);
  --bar-edge: var(--bord-barre);
  --ink:   var(--text-main);
  --muted: var(--text-muted);
  --soft:  var(--text-soft);
  --line:  var(--border-color);
  --shadow: var(--ombre);
}

/* le choix explicite du bouton : il suffit de figer color-scheme */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ---------- échelles ----------
   Sept tailles de texte et six espacements. On choisit dans cette liste
   plutôt que d'inventer une valeur : c'est ce qui tient le rythme des pages.
   Les échelles ne dépendent pas du thème, elles vivent hors des blocs de
   couleur. */
:root {
  /* Tailles fluides : elles glissent avec la largeur au lieu de sauter aux
     ruptures. Bornes calées sur 360 px et 1200 px de fenêtre. */
  --t-1: clamp(.7rem, .68rem + .09vw, .74rem);    /* étiquettes monospace */
  --t-2: clamp(.76rem, .73rem + .12vw, .82rem);   /* métadonnées, dates */
  --t-3: clamp(.87rem, .84rem + .15vw, .94rem);   /* descriptions, notes */
  --t-4: clamp(.96rem, .92rem + .17vw, 1.04rem);  /* intitulés, navigation */
  --t-5: clamp(1rem, .95rem + .24vw, 1.12rem);    /* texte courant */
  --t-6: clamp(1.18rem, 1.05rem + .55vw, 1.45rem);/* titre de section */
  --t-7: clamp(2.1rem, 1.55rem + 2.3vw, 3rem);    /* titre de page */

  --e-1: .3rem;
  --e-2: .55rem;
  --e-3: .9rem;
  --e-4: 1.4rem;
  --e-5: 2rem;
  --e-6: 3rem;

  --rayon: 14px;   /* le même arrondi partout : cartes, cadres, encadrés */
}

/* ---------- réglages de composition ----------
   text-box retire l'interligne invisible que la fonte ajoute au-dessus et
   sous les titres : leur alignement avec les filets devient exact. Les
   navigateurs qui l'ignorent gardent le rendu d'avant. */
h1, h2, h3 { text-box: trim-both cap alphabetic; }

/* ---------- passage d'une page à l'autre ----------
   Un fondu au lieu d'un rechargement sec, entre pages du même domaine.
   Rien à charger, et les navigateurs sans la fonctionnalité ne voient
   aucune différence. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- formes des types d'échéance ---------- */
.shape-livrable   { background: var(--c-livrable); border-radius: 2px; transform: rotate(45deg); }
.shape-soutenance { background: var(--c-soutenance); border-radius: 50%; }
.shape-cctl       { background: var(--c-cctl); border-radius: 2.5px; }
.shape-check      { background: transparent; border: 2px solid var(--c-check); border-radius: 50%; }
.shape-alternance { background: var(--c-alternance); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); border-radius: 0; }
.shape-toeic      { background: transparent; border: 1.5px dashed var(--c-neutral); border-radius: 3px; }
.shape-rattrapage { background: var(--c-neutral); opacity: .75; border-radius: 2px; transform: rotate(45deg); }

/* ---------- bouton de thème ---------- */
.theme {
  /* self-contained : les pages définissent leurs propres règles sur button,
     ce bouton ne doit rien en hériter */
  appearance: none;
  display: inline-block;
  width: auto; margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--border-color); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; line-height: 1.5;
}
.theme::before { content: "\25D0"; margin-right: .5em; font-size: 12px; }
.theme:hover { color: var(--text-main); border-color: var(--text-soft); }