/* ============================================================
   educfive — thème global.
   Chargé APRÈS tokens.css (ou, pour les pages qui redéfinissent :root
   dans un <style> inline, en dernier dans <head>) sur toutes les pages.

   Aligne l'ensemble du site sur la direction visuelle de
   /root/ref-design/login-educfive.html : fond papier chaud, accent bleu
   franc, rouge désaturé, filets 0,5 px, angles doux, ombres discrètes.

   PRINCIPE : ce fichier ne fait que REDÉFINIR DES VARIABLES et poser
   quelques réglages de composants passant par les classes de tokens.css.
   Aucun balisage n'est touché, aucune page n'est réécrite — la charte
   reste donc réversible en retirant la seule balise <link> qui la charge.
   tokens.css n'est PAS modifié.
   ============================================================ */

/* ---- Polices locales. Servies depuis /assets/fonts/ : aucun appel à
        fonts.googleapis.com ni fonts.gstatic.com sur tout le site. ---- */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/fraunces-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/fraunces-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:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/fraunces-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/fraunces-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibmplexsans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibmplexsans-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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/ibmplexsans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/ibmplexsans-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/ibmplexsans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/ibmplexsans-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;
}

/* IBM Plex Mono : demandé uniquement par dashboard.html (variable --font-mono
   et classe .mono de tokens.css). Rapatrié pour que le tableau de bord garde
   exactement sa fonte à chasse fixe après suppression de l'appel Google. */
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibmplexmono-latin-ext-400.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibmplexmono-latin-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/fonts/ibmplexmono-latin-ext-500.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/ibmplexmono-latin-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;
}

/* ============================================================
   1. Remappage de la palette
   Les NOMS de tokens.css sont conservés : toute page utilisant
   var(--bleu), var(--ink)… bascule sans être touchée.
   ============================================================ */
:root{
  /* Bleu → accent de la référence */
  --bleu:#185FA5;
  --bleu-700:#0C447C;
  --bleu-600:#185FA5;
  --bleu-100:#E6F1FB;
  --bleu-050:#F4F9FE;

  /* Rouge → rouge désaturé de la référence (moins d'alerte, plus institutionnel) */
  --rouge:#A32D2D;
  --rouge-700:#7E2222;
  --rouge-050:#FCEBEB;

  /* Or → laiton mat, accordé au fond papier */
  --or:#B08A2E;
  --or-050:#F7F1E2;

  /* Neutres → registre papier chaud de la référence */
  --canvas:#F7F6F2;
  --surface:#FFFFFF;
  --surface-2:#FBFAF7;
  --ink:#1A1A18;
  --ink-muted:#5F5E5A;
  --ink-subtle:#8A8880;
  --hairline:#E3E1DA;
  --hairline-strong:#CFCCC3;

  /* Sémantique */
  --ok:#2E6B4F;
  --ok-050:#E9F3ED;
  --warn:#8A6A1F;
  --warn-050:#F7F1E2;
  --danger:var(--rouge);
  --danger-050:var(--rouge-050);
  --info:var(--bleu-600);

  /* Angles : la référence est plus douce que tokens.css */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;

  /* Ombres : la référence n'en utilise pas, elle s'appuie sur des filets
     de 0,5 px. On les réduit fortement sans les supprimer, pour ne pas
     aplatir les éléments flottants du dashboard (modales, menus). */
  --sh-1:0 1px 2px rgba(26,26,24,.04);
  --sh-2:0 2px 8px rgba(26,26,24,.06);
  --sh-3:0 8px 28px rgba(26,26,24,.10);

  /* ---- Alias propres aux 3 pages autonomes (index, apropos,
     verifier-carte), qui définissent leur propre :root sans tokens.css.
     --rouge-fonce servait de fin de dégradé sur l'accueil : le basculer
     dans la famille bleue évite un dégradé bleu→bordeaux, étranger à la
     référence. Le nom est conservé pour ne pas toucher au balisage. ---- */
  --bleu-clair:#2C74BE;
  --rouge-fonce:#0C447C;
  --papier:#F7F6F2;
  --texte:#1A1A18;

  /* Familles typographiques. Redéclarées ici (et pas seulement dans
     tokens.css) car les 3 pages autonomes ne chargent pas tokens.css :
     sans cela var(--font-sans) y est vide et le navigateur retombe en
     Times New Roman. */
  --font-display:"Fraunces","Georgia",serif;
  --font-sans:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
}

/* ============================================================
   2. Typographie
   tokens.css l'applique déjà à ses 16 pages. Les 3 pages autonomes
   (index, apropos, verifier-carte) déclarent system-ui dans leur <style>
   inline ; comme le thème est chargé en dernier sur ces pages-là, ces
   deux règles suffisent à aligner tout le site sans les réécrire.
   ============================================================ */
body{font-family:var(--font-sans)}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}

/* ============================================================
   3. Réglages de composants (classes de tokens.css uniquement)
   ============================================================ */
.card{border-width:0.5px;box-shadow:var(--sh-1)}
.hairline{border-width:0.5px}

.btn{border-radius:var(--r-md);font-weight:500;transition:background .12s ease,border-color .12s ease,color .12s ease}
.btn-primary{background:var(--bleu)}
.btn-primary:hover{background:var(--bleu-700)}
.btn-ghost{border-width:0.5px}
.btn:focus-visible{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(24,95,165,.18)}

.input,select,textarea{border-width:0.5px;border-radius:var(--r-md)}
.input:hover,select:hover,textarea:hover{border-color:var(--hairline-strong)}
.input:focus,select:focus,textarea:focus{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(24,95,165,.18)}

.badge{border-width:0.5px;font-weight:500}

/* Écusson : le conique bleu/rouge d'origine devient trop contrasté avec le
   rouge désaturé. On le ramène à un aplat d'accent, comme la pastille .mark
   de la référence. Les pages qui l'affichent ne sont pas modifiées. */
.ecusson{background:var(--bleu);border-color:var(--or)}

.devise .sep{color:var(--or)}

/* Œil « afficher / masquer » de pw-eye.js : le script pose sa couleur en
   inline (#64748b, survol #0b2e6b, hérités de l'ancienne palette).
   !important est nécessaire pour l'emporter — le script n'est pas modifié. */
.pw-eye-btn{color:var(--ink-subtle) !important}
.pw-eye-btn:hover{color:var(--bleu) !important}
