/* Charte FSJP — maquette hybride (fsjp-maquette-hybride).
 |
 | Bleu pétrole et orange brûlé, typographie Readex Pro (titres),
 | IBM Plex Sans Arabic (texte courant) et IBM Plex Mono (chiffres, dates,
 | surtitres). Palette relevée dans la maquette livrée.
 |
 | Ce fichier ne contient que des variables : toute la mise en page est dans
 | public/themes/base.css, qui n'a aucune couleur en dur. Décliner la maquette
 | pour un autre établissement de l'UMI ne demande que de changer ces valeurs.
 |
 | Trois familles de jetons :
 |   — jour   (--brand, --accent, --surface, --line…) : sections claires ;
 |   — nuit   (--night*, --on-night*)                 : barre haute, héros,
 |                                                      rail, pied de page ;
 |   — dérivés (--on-brand*, --tile-*, gradients)     : littéraux de la
 |                                                      maquette, sortis du
 |                                                      CSS de structure.
 |
 | Le mode sombre est un choix explicite du visiteur (bouton lune du bandeau,
 | attribut data-theme sur <html>) : la page reste claire quel que soit le
 | réglage du système, comme la maquette (color-scheme:light sur :root).
 */
@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  color-scheme:light;

  /* --- Marque ------------------------------------------------------- */
  --brand:#0B5468;
  --brand-2:#13788F;
  --brand-soft:#E2EEF1;
  /* --accent habille les aplats et les tracés (barres, pastilles, filets) ;
     --accent-ink porte les TEXTES et les icônes en orange sur fond clair,
     où #C97A1C ne tient que 3,3:1. Voir le tableau de contraste du README. */
  --accent:#C97A1C;
  --accent-ink:#9A5D15;
  --accent-2:#9E5F14;
  --accent-soft:#FAEEDC;
  /* Le sable habille des icônes (seuil 3:1), jamais du texte : les numéros
     de l'explorateur de formations prennent --sand-ink. */
  --sand:#A38455;
  --sand-ink:#806742;

  /* --- Encre et fonds ----------------------------------------------- */
  --ink:#0A2630;
  --ink-2:#37535D;
  --muted:#546F78;
  --bg:#F1F5F6;
  --surface:#FFFFFF;
  --surface-2:#E8EFF1;
  --line:#D3E0E3;
  --line-strong:#B4C9CF;

  --shadow:0 1px 2px rgba(10,38,48,.05),0 14px 34px -20px rgba(10,38,48,.4);
  --shadow-lift:0 2px 5px rgba(10,38,48,.07),0 26px 50px -24px rgba(10,38,48,.5);

  /* --- Registre nuit (barre haute, héros, rail, pied de page) -------- */
  --night:#06222C;
  --night-2:#0A3140;
  --night-3:#0F4657;
  --on-night:#E6F1F4;
  --on-night-muted:#9DBAC3;
  --night-line:rgba(230,241,244,.15);
  --night-accent:#E59A3D;
  --night-veil:rgba(6,34,44,.8);

  /* --- Textes posés sur un aplat de couleur -------------------------- */
  /* Blanc sur #0B5468 vaut 8,9:1, sur #C97A1C 3,6:1 en gros corps ; les
     pastilles orange (date, bouton de recherche) portent donc de l'encre
     sombre plutôt que du blanc. */
  --on-brand:#FFFFFF;
  /* Du blanc sur #C97A1C ne vaut que 3,3:1 : l'accent ne porte jamais de
     texte blanc, mais de l'encre sombre (5,2:1). */
  --on-accent:#26160A;
  --on-night-accent:#16120A;

  /* Barre de navigation : aplat de marque le jour, nuit en mode sombre. */
  --nav-bg:var(--brand);
  --nav-fg:rgba(255,255,255,.88);
  --nav-fg-strong:#FFFFFF;
  --nav-hover:rgba(255,255,255,.08);
  --nav-active:rgba(255,255,255,.12);
  --nav-field:rgba(255,255,255,.1);
  --nav-field-line:rgba(255,255,255,.18);
  --nav-placeholder:rgba(255,255,255,.6);
  --nav-toggle-line:rgba(255,255,255,.25);

  /* --- Dégradés et reliefs ------------------------------------------ */
  --grad-crest:linear-gradient(150deg,var(--brand-2),var(--brand));
  --grad-mark:linear-gradient(150deg,var(--accent),#8F5411);
  --grad-night:linear-gradient(145deg,var(--night-3),var(--night));
  --grad-bar:linear-gradient(to var(--dir-to),var(--brand-2),var(--brand));
  --grad-bar-voted:linear-gradient(to var(--dir-to),var(--accent),var(--accent-2));
  --grad-aside:linear-gradient(160deg,var(--brand-soft),var(--surface-2));
  --mark-inset:inset 0 0 0 1px rgba(255,255,255,.18);
  --nav-shadow:0 10px 30px -22px rgba(0,0,0,.9);
  --veil:rgba(6,34,44,.92);

  /* Lueurs du héros et mosaïque géométrique */
  --hero-glow:
    radial-gradient(90% 120% at 88% -10%,rgba(19,120,143,.55),transparent 60%),
    radial-gradient(70% 100% at 8% 110%,rgba(201,122,28,.22),transparent 62%);
  --tile-1:linear-gradient(160deg,#0F4657,#06222C 70%);
  --tile-2:linear-gradient(200deg,rgba(201,122,28,.85),#7A4A12);
  --tile-3:linear-gradient(180deg,#123F4E,rgba(8,41,52,.25));
  --tile-4:linear-gradient(120deg,#0A3140,#13788F);
  --tile-stroke:rgba(230,241,244,.22);

  /* --- Typographie --------------------------------------------------- */
  --font-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --t-0:clamp(.95rem,.92rem + .14vw,1.02rem);
  --t-1:clamp(1.08rem,1.03rem + .25vw,1.25rem);
  --t-2:clamp(1.3rem,1.18rem + .55vw,1.7rem);
  --t-3:clamp(1.65rem,1.4rem + 1.1vw,2.35rem);
  --t-4:clamp(2rem,1.5rem + 2.3vw,3.35rem);

  /* --- Géométrie ------------------------------------------------------ */
  --r-s:6px;
  --r-m:12px;
  --r-l:20px;
  --wrap:1200px;
  --sec-pad:clamp(48px,6vw,86px);
}

/* ---------------------------------------------------------------------
 | Mode sombre — bouton lune du bandeau (data-theme="dark" sur <html>).
 | Seuls les jetons changent : aucune règle de structure n'est dupliquée.
 | Retirer ce bloc et le bouton #themeBtn suffit à supprimer le mode sombre.
 --------------------------------------------------------------------- */
:root[data-theme="dark"]{
  color-scheme:dark;

  --brand:#54B4CD;
  --brand-2:#83D0E2;
  --brand-soft:#0E3A47;
  --accent:#E5A04A;
  --accent-ink:#E5A04A;
  --accent-2:#C9863A;
  --accent-soft:#3A2A14;
  --sand:#C2A87F;
  --sand-ink:#C2A87F;

  --ink:#E8F1F3;
  --ink-2:#B9CED4;
  --muted:#8CA8B0;
  --bg:#061E26;
  --surface:#0A2C37;
  --surface-2:#0F3A47;
  --line:#1A4855;
  --line-strong:#29616F;

  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -20px rgba(0,0,0,.8);
  --shadow-lift:0 2px 5px rgba(0,0,0,.45),0 26px 50px -24px rgba(0,0,0,.9);

  /* Sur fond sombre, l'orange et la sarcelle clairs portent de l'encre. */
  --on-brand:#052430;
  --on-accent:#16120A;

  --nav-bg:var(--night-2);
  --nav-fg:rgba(230,241,244,.88);
  --nav-fg-strong:#E6F1F4;
  --nav-hover:rgba(230,241,244,.08);
  --nav-active:rgba(230,241,244,.12);
  --nav-field:rgba(230,241,244,.08);
  --nav-field-line:rgba(230,241,244,.16);
  --nav-placeholder:rgba(230,241,244,.55);
  --nav-toggle-line:rgba(230,241,244,.25);

  --grad-aside:linear-gradient(160deg,var(--brand-soft),var(--surface-2));
  --veil:rgba(0,0,0,.94);
  --tile-3:linear-gradient(180deg,#123F4E,rgba(8,41,52,.55));
}