/* ═══════════════════════════════════════════════════════════════════════
   SAVOIRS — kit commun des modules culturels et d'apprentissage d'Assan
   (LEMI · MORY · Fily · K0R0CH3 · DABALI)

   SOURCE UNIQUE : shared/savoirs/  —  les copies dans <service>/public/savoirs/
   sont produites par scripts/synchroniser-savoirs.sh et contrôlées par
   tests/test_savoirs_kit.py (empreintes identiques). Ne pas éditer les copies.

   Ce fichier apporte :
     1. deux polices SIL embarquées (hors-ligne, aucune requête externe) :
        · Andika — conçue par SIL pour les lecteurs débutants, couvre ɛ ɔ ɲ ŋ
        · Gentium Book Plus — serif de lecture, mêmes alphabets africains
        Le sous-ensemble « afrique » n'est téléchargé QUE si la page contient
        une de ces lettres (unicode-range) : ~18 Ko, jamais pour rien.
     2. la barre Savoirs (retour à Assan + passage d'un module à l'autre),
     3. un socle d'accessibilité : focus visible, lien d'évitement,
        mouvement réduit, cibles tactiles.
   Tout est préfixé « sv- » pour ne jamais heurter le CSS d'un module.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Polices ─────────────────────────────────────────────────────── */
@font-face{font-family:"Savoirs Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(polices/andika-latin-400-normal.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:"Savoirs Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(polices/andika-latin-700-normal.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:"Savoirs Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(polices/andika-afrique-400-normal.woff2) format("woff2");
  unicode-range:U+0100-017F,U+0181,U+0186,U+0189-018A,U+018E-0190,U+0192,U+0194,U+0198-0199,U+019D,U+01B2-01B4,U+01B7,U+01CD-01DD,U+0253-0254,U+0256-0257,U+0259,U+025B,U+0263,U+0272,U+028B,U+0292,U+0294,U+0300-0304,U+030C,U+0323,U+0331,U+1E00-1EFF,U+2C6D,U+A78B-A78C}
@font-face{font-family:"Savoirs Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(polices/andika-afrique-700-normal.woff2) format("woff2");
  unicode-range:U+0100-017F,U+0181,U+0186,U+0189-018A,U+018E-0190,U+0192,U+0194,U+0198-0199,U+019D,U+01B2-01B4,U+01B7,U+01CD-01DD,U+0253-0254,U+0256-0257,U+0259,U+025B,U+0263,U+0272,U+028B,U+0292,U+0294,U+0300-0304,U+030C,U+0323,U+0331,U+1E00-1EFF,U+2C6D,U+A78B-A78C}
@font-face{font-family:"Savoirs Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(polices/gentium-book-plus-latin-400-normal.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:"Savoirs Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url(polices/gentium-book-plus-latin-700-normal.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:"Savoirs Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(polices/gentium-book-plus-latin-400-italic.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:"Savoirs Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(polices/gentium-book-plus-afrique-400-normal.woff2) format("woff2");
  unicode-range:U+0100-017F,U+0181,U+0186,U+0189-018A,U+018E-0190,U+0192,U+0194,U+0198-0199,U+019D,U+01B2-01B4,U+01B7,U+01CD-01DD,U+0253-0254,U+0256-0257,U+0259,U+025B,U+0263,U+0272,U+028B,U+0292,U+0294,U+0300-0304,U+030C,U+0323,U+0331,U+1E00-1EFF,U+2C6D,U+A78B-A78C}
@font-face{font-family:"Savoirs Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url(polices/gentium-book-plus-afrique-700-normal.woff2) format("woff2");
  unicode-range:U+0100-017F,U+0181,U+0186,U+0189-018A,U+018E-0190,U+0192,U+0194,U+0198-0199,U+019D,U+01B2-01B4,U+01B7,U+01CD-01DD,U+0253-0254,U+0256-0257,U+0259,U+025B,U+0263,U+0272,U+028B,U+0292,U+0294,U+0300-0304,U+030C,U+0323,U+0331,U+1E00-1EFF,U+2C6D,U+A78B-A78C}
@font-face{font-family:"Savoirs Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(polices/gentium-book-plus-afrique-400-italic.woff2) format("woff2");
  unicode-range:U+0100-017F,U+0181,U+0186,U+0189-018A,U+018E-0190,U+0192,U+0194,U+0198-0199,U+019D,U+01B2-01B4,U+01B7,U+01CD-01DD,U+0253-0254,U+0256-0257,U+0259,U+025B,U+0263,U+0272,U+028B,U+0292,U+0294,U+0300-0304,U+030C,U+0323,U+0331,U+1E00-1EFF,U+2C6D,U+A78B-A78C}

/* ── 2. Jetons de la famille ────────────────────────────────────────── */
:root{
  --sv-sans:"Savoirs Sans","Andika",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --sv-serif:"Savoirs Serif","Gentium Book Plus","Gentium Plus",Georgia,"Noto Serif",serif;
  --sv-mono:ui-monospace,"SFMono-Regular","Cascadia Mono","DejaVu Sans Mono",Consolas,monospace;

  /* Une couleur par module — elles composent la bande de la barre. */
  --sv-c-lemi:#E0A93B;      /* ocre — histoire, manuscrits */
  --sv-c-mory:#7E9CFF;      /* indigo — sciences */
  --sv-c-fily:#3FBF8E;      /* vert — la loi, la République */
  --sv-c-passeport:#E07A5A; /* terre — langues */
  --sv-c-dabali:#B99AF0;    /* violet — code */

  --sv-bar-bg:#0B0F1A;
  --sv-bar-fg:#F4EEDC;
  --sv-bar-fg-2:#A9A493;
  --sv-bar-line:rgba(255,255,255,.08);
  --sv-focus:#F0C876;
}

/* ── 3. Barre Savoirs ───────────────────────────────────────────────── */
.sv-bar{
  position:relative; z-index:60;
  display:flex; align-items:center; gap:4px;
  min-height:44px; padding:0 12px;
  background:var(--sv-bar-bg); color:var(--sv-bar-fg);
  font:500 14px/1.2 var(--sv-sans);
  border-bottom:1px solid var(--sv-bar-line);
  -webkit-font-smoothing:antialiased;
}
.sv-bar *{box-sizing:border-box}
.sv-bar a{color:inherit;text-decoration:none}
.sv-home{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px 6px 6px; margin-right:6px; border-radius:8px;
  color:var(--sv-bar-fg-2); white-space:nowrap;
}
.sv-home:hover{color:var(--sv-bar-fg);background:rgba(255,255,255,.05)}
.sv-home svg{flex:none}
.sv-home b{color:var(--sv-bar-fg);font-weight:700;letter-spacing:.01em}
.sv-sep{width:1px;height:20px;background:var(--sv-bar-line);margin:0 6px 0 0;flex:none}

.sv-mods{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.sv-mods::-webkit-scrollbar{display:none}
.sv-mod{
  position:relative; display:inline-flex; align-items:baseline; gap:7px;
  padding:9px 11px; border-radius:8px; white-space:nowrap;
  color:var(--sv-bar-fg-2);
}
.sv-mod::before{ /* marque du module (logos/<module>.svg), pastille à défaut */
  content:""; width:18px; height:18px; border-radius:5px;
  background:var(--sv-mod-c) center/contain no-repeat; align-self:center; flex:none; opacity:.8;
}
.sv-mod[data-m="lemi"]::before,.sv-sheet a[data-m="lemi"]::before{background-image:url(logos/lemi.svg)}
.sv-mod[data-m="mory"]::before,.sv-sheet a[data-m="mory"]::before{background-image:url(logos/mory.svg)}
.sv-mod[data-m="fily"]::before,.sv-sheet a[data-m="fily"]::before{background-image:url(logos/fily.svg)}
.sv-mod[data-m="passeport"]::before,.sv-sheet a[data-m="passeport"]::before{background-image:url(logos/passeport.svg)}
.sv-mod[data-m="dabali"]::before,.sv-sheet a[data-m="dabali"]::before{background-image:url(logos/dabali.svg)}
.sv-sheet a[data-m="assan"]::before{background-image:url(logos/assan.svg)}
.sv-mod:hover::before{opacity:1}
.sv-home-mark{width:20px;height:20px;border-radius:5px;flex:none;background:url(logos/assan.svg) center/contain no-repeat}
.sv-mod small{font-size:12.5px;font-weight:400;color:inherit;opacity:.75}
.sv-mod:hover{color:var(--sv-bar-fg);background:rgba(255,255,255,.05)}
.sv-mod[aria-current="page"]{color:var(--sv-bar-fg);background:rgba(255,255,255,.07)}
.sv-mod[aria-current="page"]::before{opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--sv-mod-c) 45%,transparent)}
.sv-mod[aria-current="page"]::after{ /* soulignement à la couleur du module */
  content:""; position:absolute; left:11px; right:11px; bottom:-1px; height:2px;
  border-radius:2px; background:var(--sv-mod-c);
}
.sv-sub{display:inline-flex;gap:2px;margin-left:2px;padding-left:6px;border-left:1px solid var(--sv-bar-line)}
.sv-sub a{padding:6px 9px;border-radius:6px;color:var(--sv-bar-fg-2);font-size:13px}
.sv-sub a:hover{color:var(--sv-bar-fg);background:rgba(255,255,255,.05)}
.sv-sub a[aria-current="page"]{color:var(--sv-bar-fg);background:rgba(126,156,255,.16)}

/* Bande de famille : un segment par module, celui du module courant ressort. */
.sv-band{display:flex;height:3px;background:var(--sv-bar-bg)}
.sv-band i{flex:1;background:var(--sv-mod-c);opacity:.28}
.sv-band i.on{flex:2.4;opacity:1}

/* Bouton « Modules » (petits écrans) */
.sv-menu{display:none;margin-left:auto;align-items:center;gap:6px;
  padding:8px 12px;border-radius:8px;border:1px solid var(--sv-bar-line);
  background:transparent;color:var(--sv-bar-fg);font:inherit;cursor:pointer;min-height:36px}
.sv-menu:hover{background:rgba(255,255,255,.05)}
.sv-cur{display:none;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-cur::before{content:"";display:inline-block;width:18px;height:18px;border-radius:5px;
  background:var(--sv-mod-c) center/contain no-repeat;margin-right:8px;vertical-align:-4px}
.sv-cur[data-m="lemi"]::before{background-image:url(logos/lemi.svg)}
.sv-cur[data-m="mory"]::before{background-image:url(logos/mory.svg)}
.sv-cur[data-m="fily"]::before{background-image:url(logos/fily.svg)}
.sv-cur[data-m="passeport"]::before{background-image:url(logos/passeport.svg)}
.sv-cur[data-m="dabali"]::before{background-image:url(logos/dabali.svg)}

.sv-sheet{position:fixed;inset:0;z-index:2000;display:none}
.sv-sheet.open{display:block}
.sv-sheet-bg{position:absolute;inset:0;background:rgba(5,7,12,.6)}
.sv-sheet-panel{
  position:absolute;left:0;right:0;top:0;
  background:var(--sv-bar-bg);color:var(--sv-bar-fg);
  border-bottom:1px solid var(--sv-bar-line);
  padding:10px 12px 16px;font:500 15px/1.3 var(--sv-sans);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.sv-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px;color:var(--sv-bar-fg-2);font-size:13.5px}
.sv-sheet-head button{background:none;border:0;color:var(--sv-bar-fg);font:inherit;font-size:22px;line-height:1;padding:6px 10px;cursor:pointer;border-radius:8px;min-width:44px;min-height:44px}
.sv-sheet ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sv-sheet a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;color:var(--sv-bar-fg);text-decoration:none;min-height:48px}
.sv-sheet a:hover,.sv-sheet a[aria-current="page"]{background:rgba(255,255,255,.06)}
.sv-sheet a::before{content:"";width:28px;height:28px;border-radius:7px;background:var(--sv-mod-c) center/contain no-repeat;flex:none}
.sv-sheet a span{display:flex;flex-direction:column;gap:2px}
.sv-sheet a small{color:var(--sv-bar-fg-2);font-weight:400;font-size:13px}
.sv-sheet .sv-sheet-sub{padding-left:34px}
.sv-sheet .sv-sheet-sub a{min-height:40px;padding:8px 12px;font-size:14px}
.sv-sheet .sv-sheet-sub a::before{width:6px;height:6px}

@media (max-width:860px){
  .sv-mods,.sv-sep{display:none}
  .sv-cur{display:block;min-width:0}
  .sv-menu{display:inline-flex}
  .sv-home span{display:none}
}

/* ── 4. Socle d'accessibilité ───────────────────────────────────────── */
.sv-skip{position:absolute;left:12px;top:-60px;z-index:3000;
  padding:10px 14px;border-radius:8px;background:var(--sv-focus);color:#1A1408;
  font:700 14px/1 var(--sv-sans);text-decoration:none}
.sv-skip:focus{top:8px}
/* Contrôles : la police du module partout — certains boutons (audio, thème,
   affichage du mot de passe) retombaient en Arial, police du navigateur. */
:where(button,input,select,textarea){font-family:inherit}
/* Aucun texte sous 12 px : <small> réduit à 83 % tombait à 11 px. */
small,sub,sup{font-size:max(12px,.85em)}
/* Focus clavier : DOUBLE anneau, sombre contre l'élément puis or autour.
   Un anneau or seul n'atteignait pas 3:1 sur les fonds clairs (WCAG 1.4.11),
   un anneau sombre seul disparaissait sur les fonds sombres. !important :
   plusieurs modules écrivaient « input:focus{outline:none} », qui l'emportait. */
:is(a,button,input,select,textarea,summary,[tabindex],[role=button],[role=tab],[contenteditable]):focus-visible{
  outline:2px solid #14110A !important;outline-offset:0 !important;
  box-shadow:0 0 0 4px var(--sv-focus) !important;
}
.sv-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

@media print{.sv-bar,.sv-band,.sv-sheet,.sv-skip{display:none!important}}