/* QELI - thème clair (par défaut) et sombre · v2
   À charger APRÈS qeli.css et qeli-app.css : remplace jetons et composants modifiés.
   Choix de l'utilisateur : <html data-theme="clair|sombre|auto"> (auto = réglage du téléphone).
   Aucun cadratin ni demi-cadratin : trait d'union uniquement. */

/* ---------- Jetons : clair ---------- */
:root,[data-theme="clair"]{
  color-scheme:light;
  --fond:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F4F6; --bord:#E5E7EB; --bord-champ:#7A8191;
  --texte:#141A26; --texte-2:#535B6B;
  --primaire:#1B2A4A; --sur-primaire:#FFFFFF; --primaire-survol:#2A3D66; --primaire-fond:#E9EFFB; --secondaire-survol:#E9EFFB;
  --accent:#F5C343; --accent-fond:#FFF4D3; --accent-survol:#EDB52C;
  --succes:#1F7346; --succes-fond:#E3F3E9;
  --alerte:#875800; --alerte-fond:#FDF1D8;
  --erreur:#B42318; --erreur-fond:#FDECEA;
  --info:#2B5797; --info-fond:#E8EFFA;
  --ouvert:#6E5100; --neutre-fond:#F0F3F9;
  --desactive-fond:#ECEFF4; --desactive-texte:#6B7280; --rangee:#FAFBFD;
  --verre:rgba(255,255,255,.82); --verre-bord:rgba(255,255,255,.9);
  --degrade-cours:#FFFFFF;  /* thème clair : fond blanc, sans dégradé */
  --ombre:0 1px 2px rgba(20,26,38,.05),0 6px 20px rgba(27,42,74,.07);
  --ombre-haute:0 2px 4px rgba(20,26,38,.06),0 12px 32px rgba(27,42,74,.12);
  --r-petit:8px; --r-champ:16px; --r-bouton:14px; --r-carte:20px; --r-grande:24px; --r-pastille:999px;
  --focus:0 0 0 3px var(--accent),0 0 0 5px var(--primaire);
}
/* ---------- Jetons : sombre ---------- */
[data-theme="sombre"]{
  color-scheme:dark;
  --fond:#0E131C; --surface:#171E2B; --surface-2:#1F2837; --bord:#2B3546; --bord-champ:#8A93A5;
  --texte:#EEF1F6; --texte-2:#A8B0C0;
  --primaire:#C9D6F2; --sur-primaire:#0E131C; --primaire-survol:#E0E8F8; --primaire-fond:#1C2740; --secondaire-survol:#1C2740;
  --accent:#F5C343; --accent-fond:#2E2812; --accent-survol:#FFD36A;
  --succes:#6CC596; --succes-fond:#16291F;
  --alerte:#EDB64E; --alerte-fond:#2C2414;
  --erreur:#FF8A80; --erreur-fond:#331B1B;
  --info:#93B3EC; --info-fond:#17243B;
  --ouvert:#F5C343; --neutre-fond:#1F2837;
  --desactive-fond:#252D3B; --desactive-texte:#7F8899; --rangee:#141A25;
  --verre:rgba(23,30,43,.82); --verre-bord:rgba(255,255,255,.06);
  --degrade-cours:linear-gradient(135deg,#2E2812 0%,#1F2433 50%,#1C2740 100%);
  --ombre:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --ombre-haute:0 12px 32px rgba(0,0,0,.4);
  --focus:0 0 0 3px var(--accent),0 0 0 5px var(--fond);
}
@media (prefers-color-scheme:dark){
  [data-theme="auto"]{
    color-scheme:dark;
    --fond:#0E131C; --surface:#171E2B; --surface-2:#1F2837; --bord:#2B3546; --bord-champ:#8A93A5;
    --texte:#EEF1F6; --texte-2:#A8B0C0;
    --primaire:#C9D6F2; --sur-primaire:#0E131C; --primaire-survol:#E0E8F8; --primaire-fond:#1C2740; --secondaire-survol:#1C2740;
    --accent-fond:#2E2812; --accent-survol:#FFD36A;
    --succes:#6CC596; --succes-fond:#16291F; --alerte:#EDB64E; --alerte-fond:#2C2414;
    --erreur:#FF8A80; --erreur-fond:#331B1B; --info:#93B3EC; --info-fond:#17243B;
    --ouvert:#F5C343; --neutre-fond:#1F2837; --desactive-fond:#252D3B; --desactive-texte:#7F8899; --rangee:#141A25;
    --verre:rgba(23,30,43,.82); --verre-bord:rgba(255,255,255,.06);
    --degrade-cours:linear-gradient(135deg,#2E2812 0%,#1F2433 50%,#1C2740 100%);
    --ombre:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); --ombre-haute:0 12px 32px rgba(0,0,0,.4);
    --focus:0 0 0 3px var(--accent),0 0 0 5px var(--fond);
  }
}
/* Les anciennes règles « prefers-color-scheme » de qeli.css s'appliquent seulement si data-theme est absent. */

/* ---------- Titres : bleu nuit en clair, texte en sombre ---------- */
h1,h2,h3,h4{color:var(--primaire)}
[data-theme="sombre"] :is(h1,h2,h3,h4){color:var(--texte)}

/* ---------- Bandeau de test, plus léger ---------- */

/* ---------- Boutons ---------- */
.bouton{min-height:50px;border:0;border-radius:var(--r-bouton);padding:0 20px}
.bouton:hover{background:var(--primaire-survol)}
.bouton.secondaire{background:var(--surface);color:var(--primaire);border:1.5px solid var(--bord);box-shadow:var(--ombre)}
.bouton.secondaire:hover{background:var(--surface);box-shadow:var(--ombre-haute)}
.bouton.petit{min-height:44px;background:var(--surface-2);color:var(--primaire);border:0}
.bouton.petit:hover{background:var(--primaire-fond)}
.bouton.destructif{background:var(--erreur-fond);color:var(--erreur);border:0}
.bouton.craie{background:var(--accent);color:#141A26;border:0}
.bouton.craie:hover{background:var(--accent-survol)}
.bouton[disabled],.bouton[aria-disabled="true"]{background:var(--desactive-fond);color:var(--desactive-texte);border:0}

/* ---------- Cartes ---------- */
.carte,.tuile-app,.chiffre,.indicateur{background:var(--surface);border:0;border-radius:var(--r-carte);box-shadow:var(--ombre)}
.encadre{background:var(--primaire-fond);border-radius:var(--r-carte)}
.ligne{border:0;border-radius:18px;min-height:68px;box-shadow:var(--ombre)}
.ligne:hover{background:var(--surface);box-shadow:var(--ombre-haute)}
.ligne .pictogramme{width:44px;height:44px;border-radius:14px;background:var(--primaire-fond)}

/* ---------- Champs ---------- */
.champ :is(input,select,textarea):not([type=checkbox]):not([type=radio]){border-radius:var(--r-champ)}
.tuile{border:0;border-radius:16px;background:var(--surface);box-shadow:var(--ombre)}
.tuile:has(input:checked){background:var(--primaire-fond);box-shadow:inset 0 0 0 2px var(--primaire)}

/* ---------- Carte « Prochain cours » ---------- */
.prochain{position:relative;overflow:hidden;background:var(--degrade-cours);color:var(--texte);border-radius:var(--r-grande);box-shadow:var(--ombre)}
.prochain::before{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:999px;background:rgba(245,195,67,.22);pointer-events:none}
.prochain::after{content:"";position:absolute;right:28px;top:36px;width:70px;height:6px;border-radius:999px;background:var(--accent);transform:rotate(-6deg);pointer-events:none}
.prochain > *{position:relative}
.prochain h2{color:var(--primaire)}
[data-theme="sombre"] .prochain h2{color:var(--texte)}
.prochain .meta{color:var(--texte)}
.prochain .meta svg{color:var(--texte-2)}
.prochain .attente{border:0;background:rgba(255,255,255,.7);color:var(--texte);border-radius:16px}
.prochain .bouton.rejoindre{width:100%;min-height:56px;font-size:1.125rem;border-radius:16px;background:var(--primaire);color:var(--sur-primaire)}
@media (min-width:1024px){.prochain .bouton.rejoindre{width:auto;padding:0 36px}}

/* ---------- Pastilles d'état ---------- */
.etat{font-size:.875rem;padding:6px 11px 6px 9px}

/* ---------- Barre d'onglets flottante ---------- */
.onglets{left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:2px;padding:6px;border:1px solid var(--verre-bord);border-top:1px solid var(--verre-bord);border-radius:26px;background:var(--verre);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--ombre-haute)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.onglets{background:var(--surface)}}
.onglets a{flex:1;min-width:44px;min-height:48px;gap:2px;font-size:.6875rem;border-radius:18px;color:var(--texte-2)}
.onglets .icone{padding:0}
.onglets a[aria-current="page"]{flex:none;flex-direction:row;gap:8px;padding:0 16px 0 14px;border-radius:20px;background:var(--primaire);color:var(--sur-primaire);font-size:.9375rem}
.onglets a[aria-current="page"] .icone{background:none;box-shadow:none}
.app-contenu{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
.pastille-direct{top:-2px;right:-4px;width:11px;height:11px;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.pastille-direct::after{border-color:rgba(245,195,67,.6)}
@media (min-width:1024px){
  .onglets{position:sticky;top:0;left:auto;right:auto;bottom:auto;height:100svh;width:232px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;padding:20px 14px;border:0;border-right:1px solid var(--bord);border-radius:0;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .onglets .logo{align-self:flex-start;margin:0 8px 22px}
  .onglets a,.onglets a[aria-current="page"]{flex:none;width:auto;flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:0 14px;border-radius:14px;font-size:1rem}
  .onglets a:hover{background:var(--surface-2)}
  .onglets a[aria-current="page"]::before{display:none}
  .onglets .profil{flex-direction:row;gap:10px;padding:12px;border-radius:16px;background:var(--surface-2);font-size:.875rem}
}

/* ---------- Segments (Liste / Semaine…) ---------- */
.segments{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:16px}
.segments a{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-weight:700;font-size:.9375rem;color:var(--texte-2);text-decoration:none}
.segments a[aria-selected="true"],.segments a[aria-current]{background:var(--surface);color:var(--primaire);box-shadow:var(--ombre)}

/* ---------- Réglage d'apparence ---------- */
.apparence{display:flex;gap:6px;padding:4px;background:var(--surface-2);border-radius:18px;border:0;margin:0}
.apparence label{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:16px;font-weight:700;font-size:.9375rem;color:var(--texte-2);cursor:pointer}
.apparence input{position:absolute;opacity:0;width:1px;height:1px}
.apparence label:has(input:checked){background:var(--surface);color:var(--primaire);box-shadow:var(--ombre),inset 0 0 0 2px var(--primaire)}
.apparence label:has(input:focus-visible){box-shadow:var(--focus)}
.apparence .apercu{width:56px;height:40px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--bord)}

/* ---------- Messagerie ---------- */
.fil{display:flex;flex-direction:column;gap:12px;padding:16px 16px 96px}
.bulle{max-width:82%;display:flex;flex-direction:column;gap:4px}
.bulle > div{padding:12px 14px;font-size:1rem;line-height:1.45}
.bulle.recue{align-self:flex-start}
.bulle.recue > div{background:var(--surface);color:var(--texte);border-radius:20px 20px 20px 6px;box-shadow:var(--ombre)}
.bulle.envoyee{align-self:flex-end;align-items:flex-end}
.bulle.envoyee > div{background:var(--primaire-fond);color:var(--texte);border-radius:20px 20px 6px 20px}
.bulle small{font-size:.8125rem;color:var(--texte-2);padding:0 6px}
.bulle .lu{color:var(--succes)}
.bulle-auto{align-self:center;max-width:90%;display:flex;gap:8px;padding:10px 12px;border-radius:14px;background:var(--surface-2);color:var(--texte-2);font-size:.875rem;line-height:1.4}
.jour{align-self:center;font-size:.8125rem;font-weight:700;color:var(--texte-2);background:var(--surface-2);border-radius:999px;padding:4px 10px}
.vocal{display:flex;align-items:center;gap:10px;min-width:240px}
.vocal .lire{flex:none;width:44px;height:44px;border-radius:999px;background:var(--primaire);color:var(--sur-primaire);display:flex;align-items:center;justify-content:center;border:0}
/* Onde des notes vocales : courbe lisse ; partie écoutée en couleur, tête de lecture */
.vocal{--onde-fond:color-mix(in srgb,var(--primaire) 28%,transparent);--onde-jouee:var(--primaire);--onde-tete:var(--primaire)}
.vocal .onde{position:relative;flex:1;min-width:96px;height:34px;display:block}
.vocal .onde svg{display:block;width:100%;height:100%;overflow:visible}
.vocal .onde-fond{fill:var(--onde-fond);transition:d .5s ease}
.vocal .onde-jouee{fill:var(--onde-jouee);transition:d .5s ease}
.vocal .onde-tete{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--onde-tete);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--onde-tete) 25%,transparent);opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s}
.vocal .onde.entamee .onde-tete,.vocal.en-lecture .onde-tete{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  @keyframes qeli-onde-vit{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}
  .vocal.en-lecture .onde svg{animation:qeli-onde-vit 1.1s ease-in-out infinite;transform-origin:50% 50%}
}
.vocal time{flex:none;white-space:nowrap;font-family:var(--police-mono);font-size:.8125rem;color:var(--texte-2)}
.saisie{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));margin:0 12px;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:26px;background:var(--surface);box-shadow:var(--ombre-haute)}
.saisie textarea{flex:1;min-height:44px;max-height:120px;border:0;background:none;resize:none;font:inherit;color:var(--texte);padding:10px 0}
.saisie textarea:focus-visible{box-shadow:none;outline:none}
.saisie:focus-within{box-shadow:var(--ombre-haute),0 0 0 3px var(--accent)}
.saisie .micro{flex:none;width:48px;height:48px;border-radius:999px;background:var(--accent-fond);color:var(--primaire);border:0;display:flex;align-items:center;justify-content:center}
.saisie .envoyer{flex:none;width:48px;height:48px;border-radius:999px;background:var(--primaire);color:var(--sur-primaire);border:0;display:flex;align-items:center;justify-content:center}
.saisie.enregistre{padding-left:8px}
.saisie .annuler{flex:none;width:44px;height:44px;border-radius:999px;background:var(--erreur-fond);color:var(--erreur);border:0}
.point-rec{flex:none;width:10px;height:10px;border-radius:999px;background:var(--erreur)}
@media (prefers-reduced-motion:no-preference){.point-rec{animation:qeli-rec 1.2s ease-in-out infinite}}
@keyframes qeli-rec{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Bulle « Une question ? » (page de présentation) ---------- */
.question-flottante{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:40}
.question-flottante > summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 20px 0 14px;border-radius:999px;background:var(--primaire);color:var(--sur-primaire);font-weight:700;cursor:pointer;box-shadow:var(--ombre-haute)}
.question-flottante > summary::-webkit-details-marker{display:none}
.question-flottante > summary svg{color:var(--accent)}
.question-flottante[open] > summary{display:none}
.question-flottante .panneau{position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));background:var(--surface);border-radius:26px;box-shadow:0 16px 48px rgba(27,42,74,.22);overflow:hidden}
.question-flottante .panneau header{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;background:var(--degrade-cours)}
.question-flottante .suggestions{display:flex;flex-wrap:wrap;gap:6px}
.question-flottante .suggestions button{min-height:40px;padding:0 12px;border-radius:999px;border:0;background:var(--primaire-fond);color:var(--primaire);font:700 .875rem var(--police-texte)}
@media (min-width:1024px){.question-flottante{right:32px;bottom:32px}.question-flottante .panneau{left:auto;right:32px;bottom:32px;width:380px}}

/* ---------- Salle d'attente, salle, examen blanc ---------- */
.attente-salle{background:var(--degrade-cours);color:var(--texte)}
.attente-salle h1{color:var(--primaire)}
.compte-a-rebours{width:220px;height:220px;margin:0 auto;border-radius:999px;background:conic-gradient(var(--accent) 0 var(--avance,72%),var(--surface) var(--avance,72%) 100%);padding:18px;box-shadow:var(--ombre)}
.compte-a-rebours > span{width:100%;height:100%;border-radius:999px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:700 3.25rem/1 var(--police-titre);letter-spacing:-.03em;color:var(--primaire)}
.salle{background:var(--fond);color:var(--texte)}
.salle-barre{position:absolute;left:12px;right:12px;top:12px;z-index:2;border:0;border-radius:20px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:var(--ombre)}
.salle-barre .chrono{color:var(--texte-2)}
.salle-panneau{border-radius:26px}
@media (max-width:1023px){.salle-panneau{left:8px;right:8px;bottom:8px;box-shadow:var(--ombre-haute)}}
@media (min-width:1024px){.salle-corps{gap:16px;padding:16px}.salle-video{border-radius:24px;overflow:hidden}.salle-panneau{box-shadow:var(--ombre)}}
.chrono-examen{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:14px;background:var(--accent-fond);font:700 1rem var(--police-mono);color:var(--texte)}
.chrono-examen.fin{background:var(--erreur-fond);color:var(--erreur)}
.progression-examen{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.progression-examen span{display:block;height:100%;border-radius:999px;background:var(--primaire)}
.reponse{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:16px;background:var(--surface);box-shadow:var(--ombre);cursor:pointer}
.reponse input{position:absolute;opacity:0;width:1px;height:1px}
.reponse .lettre{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--surface-2);color:var(--texte-2)}
.reponse:has(input:checked){background:var(--primaire-fond);box-shadow:inset 0 0 0 2px var(--primaire)}
.reponse:has(input:checked) .lettre{background:var(--primaire);color:var(--sur-primaire)}
.reponse:has(input:focus-visible){box-shadow:var(--focus)}
.grille-questions{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.grille-questions a{height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;background:var(--surface-2);color:var(--texte-2);text-decoration:none}
.grille-questions a.repondu{background:var(--primaire-fond);color:var(--primaire)}
.grille-questions a[aria-current]{background:var(--primaire);color:var(--sur-primaire)}
.grille-questions a.marquee{box-shadow:inset 0 0 0 2px var(--accent)}
.jauge{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.jauge span{display:block;height:100%;border-radius:999px;background:var(--primaire)}
.jauge.faible span{background:var(--alerte)}

/* ---------- Console claire ---------- */
.console{background:var(--fond)}
.console-nav{background:var(--surface-2);color:var(--texte);border-right:1px solid var(--bord)}
.console-nav .libelle{color:var(--ouvert);background:var(--accent-fond);border:0;border-radius:6px;padding:4px 8px;margin:0 8px 20px;align-self:flex-start}
.console-nav a{color:var(--texte-2);border-radius:14px}
.console-nav a:hover{background:var(--surface);color:var(--primaire)}
.console-nav a[aria-current="page"]{background:var(--surface);color:var(--primaire);box-shadow:var(--ombre)}
.console-nav a[aria-current="page"] svg{color:var(--primaire)}
.console-zone > header{background:none;border:0;padding:22px 32px 10px}
.compteurs a{border:0;border-radius:18px;box-shadow:var(--ombre)}
.compteurs a.alerte,.compteurs a.erreur{border-top:0}
.compteurs a.alerte strong::after,.compteurs a.erreur strong::after{content:"";display:inline-block;width:10px;height:10px;border-radius:999px;margin-left:10px;vertical-align:middle;background:var(--alerte)}
.compteurs a.erreur strong::after{background:var(--erreur)}