/* =========================================================
   BABAJI WEB — Style « verre futuriste » aux couleurs Ederro
   Verre dépoli, lueurs douces, tuiles arrondies, boutons pilule.
   Pensé mobile d'abord, puis tablette et ordinateur.
   Thème bleu Babaji (bleu du logo) par défaut, thème clair au choix (bouton soleil).
   ========================================================= */
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --encre: #032B57;
  --bleu: #0E4E9C;
  --bleu-vif: #2F7DE1;
  --vert: #01A356;
  --vert-vif: #19C774;
  --rouge: #D9364F;
  --ambre: #E6A300;
  --fond-1: #F2F6FB;
  --fond-2: #E3ECF7;
  --verre: rgba(255, 255, 255, .58);
  --verre-fort: rgba(255, 255, 255, .8);
  --verre-bord: rgba(255, 255, 255, .9);
  --verre-ombre: 0 22px 44px -24px rgba(3, 43, 87, .32), 0 2px 6px -2px rgba(3, 43, 87, .08);
  --relief: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(3, 43, 87, .04);
  --texte: #0A1A33;
  --titre-c: #04254A;
  --gris: #5A6B88;
  --trait: rgba(3, 43, 87, .1);
  --champ: rgba(255, 255, 255, .72);
  --accent-pale: rgba(47, 125, 225, .12);
  --vert-pale: rgba(1, 163, 86, .13);
  --rouge-pale: rgba(217, 54, 79, .1);
  --ambre-pale: rgba(230, 163, 0, .14);
  --orbe-1: rgba(47, 125, 225, .28);
  --orbe-2: rgba(1, 163, 86, .18);
  --police: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r-xl: 30px; --r-l: 24px; --r-m: 18px;
  color-scheme: light;
}
:root[data-theme="sombre"] {
  /* Thème bleu Babaji (par défaut) : le bleu du logo #032B57 en fond */
  --encre: #0E4E9C;            /* les dégradés « bleu vif → encre » restent visibles sur le fond bleu */
  --fond-1: #0A3D78;
  --fond-2: #032B57;
  --verre: rgba(30, 96, 178, .26);
  --verre-fort: rgba(6, 50, 100, .95);
  --verre-bord: rgba(150, 195, 255, .2);
  --verre-ombre: 0 24px 48px -24px rgba(0, 10, 30, .75);
  --relief: inset 0 1px 0 rgba(255, 255, 255, .1);
  --texte: #EAF2FF;
  --titre-c: #FFFFFF;
  --gris: #A8BEDF;
  --trait: rgba(255, 255, 255, .12);
  --champ: rgba(1, 26, 56, .5);
  --accent-pale: rgba(47, 125, 225, .25);
  --vert-pale: rgba(25, 199, 116, .18);
  --rouge-pale: rgba(255, 99, 125, .18);
  --ambre-pale: rgba(255, 196, 61, .18);
  --orbe-1: rgba(47, 125, 225, .45);
  --orbe-2: rgba(1, 163, 86, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background-color: var(--fond-2); }
.fond { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(165deg, var(--fond-1) 0%, var(--fond-2) 100%); }
.vue:focus, .vue:focus-visible { outline: none; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow-x: hidden;
  font-family: var(--police); font-size: 16px; line-height: 1.5; color: var(--texte);
  background: transparent;
  transition: color .3s;
}
body::before, body::after { content: ''; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; }
body::before {
  width: 340px; height: 340px; top: -150px; left: -150px;
  background: radial-gradient(circle at 65% 65%, transparent 52%, var(--orbe-1) 53%, transparent 70%), radial-gradient(circle, var(--orbe-1), transparent 62%);
}
body::after {
  width: 420px; height: 420px; right: -190px; bottom: -170px;
  background: radial-gradient(circle at 35% 35%, transparent 50%, var(--orbe-2) 51%, transparent 66%), radial-gradient(circle, var(--orbe-2), transparent 60%);
}
.orbe { position: fixed; z-index: -1; pointer-events: none; width: 120px; height: 120px; right: -40px; top: 34%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), var(--orbe-1) 70%); opacity: .55; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--bleu-vif); }
img { max-width: 100%; }
.cache { display: none !important; }
.vue { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 6px 16px 28px; outline: none; }
h1, h2, h3 { color: var(--titre-c); margin: 0 0 8px; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: 1.9rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
.sous { color: var(--gris); margin: 0 0 16px; }
.pile > * + * { margin-top: 12px; }
.espace { letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; color: var(--gris); font-weight: 500; }

/* Surface de verre */
.tuile, .bloc-tb, .feuille-cours, .copie, .recuperer, .reponse-ia, .bravo, .prochain, .action, .derrick-bande, .lien-tb,
.choix-btn, .corr-q, .fiche-identite, .tete-page, .lecon-tete, .verdict, .hero, .dossier {
  background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre), var(--relief);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}

/* ---------- Barre du haut ---------- */
.barre {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--fond-1) 72%, transparent); border-bottom: 1px solid var(--trait);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.barre-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.barre-logo .badge-logo { display: block; padding: 7px 11px 5px; border-radius: 14px; background: #fff; box-shadow: var(--verre-ombre); border: 1px solid rgba(255,255,255,.9); }
.barre-logo img { height: 22px; width: auto; display: block; }
.barre-logo .by { color: var(--gris); font-size: .74rem; line-height: 1.15; }
.barre-logo .by b { color: var(--vert); font-weight: 600; }
.barre-droite { display: flex; align-items: center; gap: 8px; }
.barre-profil, .btn-theme {
  height: 40px; border-radius: 14px; border: 1px solid var(--verre-bord); background: var(--verre); color: var(--titre-c);
  box-shadow: var(--verre-ombre), var(--relief); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.barre-profil { padding: 0 12px; font-size: .86rem; font-weight: 500; max-width: 38vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-profil:empty { display: none; }
.btn-theme { width: 40px; display: grid; place-items: center; font-size: 1.05rem; }

/* ---------- Pied ---------- */
.pied { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); color: var(--gris); font-size: .78rem; line-height: 1.35; }
.pied img { width: 32px; height: 32px; border-radius: 10px; background: #fff; padding: 2px; }
.pied b { color: var(--vert); font-weight: 600; }

/* ---------- Boutons pilule ---------- */
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  border: 0; border-radius: 999px; padding: 14px 22px; text-decoration: none; text-align: center;
  font-weight: 600; font-size: 1.04rem; color: #fff;
  background: linear-gradient(135deg, var(--bleu-vif) 0%, var(--bleu) 55%, var(--encre) 100%);
  box-shadow: 0 14px 28px -12px rgba(14, 78, 156, .75), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12);
  transition: transform .12s, box-shadow .12s, opacity .2s;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.vert { background: linear-gradient(135deg, var(--vert-vif) 0%, var(--vert) 60%, #01804A 100%); box-shadow: 0 14px 28px -12px rgba(1, 163, 86, .75), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12); }
.btn.vert:not(.double):not(.petit) { padding-right: 62px; padding-left: 62px; }
.btn.vert:not(.double):not(.petit)::after {
  content: '→'; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.22); font-size: 1.15rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.clair { background: var(--verre-fort); color: var(--titre-c); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre), var(--relief); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn.petit { min-height: 44px; padding: 9px 16px; font-size: .93rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn .ic { flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; font-size: 1.2rem; background: rgba(255,255,255,.2); }
.btn .sous-ligne { display: block; font-weight: 300; font-size: .78rem; opacity: .9; }
.btn.double { justify-content: flex-start; text-align: left; border-radius: 24px; padding: 10px 16px 10px 10px; min-height: 66px; }
:focus-visible { outline: 3px solid var(--bleu-vif); outline-offset: 3px; }
.rangee { display: flex; gap: 10px; }
.rangee > * { flex: 1; }

.lien-retour {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 7px 14px 7px 10px; border-radius: 999px;
  color: var(--titre-c); font-weight: 500; font-size: .86rem; text-decoration: none;
  background: var(--verre-fort); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre), var(--relief);
}

/* ---------- Champs ---------- */
.champ {
  width: 100%; border: 1px solid var(--verre-bord); border-radius: 20px; background: var(--champ);
  padding: 16px 18px; font-size: 1rem; outline: none; color: var(--texte);
  box-shadow: inset 0 2px 6px rgba(3, 43, 87, .06), var(--verre-ombre); transition: border-color .15s, box-shadow .15s;
}
.champ::placeholder { color: var(--gris); opacity: .85; }
.champ:focus { border-color: var(--bleu-vif); box-shadow: 0 0 0 4px var(--accent-pale), var(--verre-ombre); }
textarea.champ { resize: vertical; min-height: 120px; }
.champ-ic { position: relative; }
.champ-ic .ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1.05rem; opacity: .75; pointer-events: none; }
.champ-ic .champ { padding-left: 50px; }
label.lbl { display: block; font-weight: 500; color: var(--titre-c); margin: 0 0 7px 4px; font-size: .9rem; }
.aide { display: block; font-size: .8rem; color: var(--gris); margin: 7px 0 0 4px; }
.erreur-champ { color: var(--rouge); font-size: .85rem; font-weight: 500; }
.erreur-champ:empty { display: none; }

.pastille {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 500;
  background: var(--verre-fort); color: var(--titre-c); border: 1px solid var(--verre-bord); text-decoration: none;
}
.pastille.ia { background: rgba(124, 92, 255, .14); color: #6B4BE0; border-color: transparent; }
:root[data-theme="sombre"] .pastille.ia { color: #B7A6FF; }

/* ---------- Tuile logo (squircle de verre) ---------- */
.tuile-logo {
  position: relative; width: 150px; height: 150px; margin: 14px auto 18px; border-radius: 44px; display: grid; place-items: center;
  background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: 0 30px 60px -26px rgba(14, 78, 156, .55), var(--relief);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.tuile-logo img { width: 112px; height: 112px; border-radius: 32px; display: block; box-shadow: 0 10px 24px -12px rgba(3,43,87,.5); }

/* ---------- Entrée ---------- */
.entree { text-align: center; padding-top: 4px; }
.entree h1 { font-size: 2.1rem; }
.entree p.espace { margin: 0 0 22px; }
.fiche-identite { border-radius: var(--r-xl); padding: 20px 16px; text-align: left; max-width: 520px; margin: 0 auto; }
.fiche-identite > * + * { margin-top: 14px; }
.indicatif { display: flex; gap: 8px; }
.indicatif > span { flex: none; display: grid; place-items: center; padding: 0 14px; border-radius: 20px; background: var(--champ); border: 1px solid var(--verre-bord); font-weight: 600; color: var(--titre-c); box-shadow: var(--verre-ombre); }
.slogan { margin-top: 22px; text-align: center; }

/* ---------- Accueil ---------- */
.hero { position: relative; border-radius: var(--r-xl); padding: 22px 18px; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 170px; }
.hero::before { content: ''; position: absolute; width: 220px; height: 220px; right: -70px; top: -70px; border-radius: 50%; background: radial-gradient(circle, var(--orbe-1), transparent 65%); }
.hero .salut { position: relative; flex: 1; min-width: 0; }
.hero h1 { font-size: 1.8rem; margin-bottom: 4px; }
.hero p { color: var(--gris); margin: 0 0 12px; }
.hero .stats { display: flex; gap: 6px; flex-wrap: wrap; }
.hero .detective {
  position: relative; flex: none; width: 104px; height: 104px; border-radius: 32px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 34px -16px rgba(14, 78, 156, .6), 0 0 0 6px var(--verre-fort);
}
.hero .detective img { width: 100%; height: 100%; display: block; }

.prochain { position: relative; display: block; margin-top: 14px; border-radius: var(--r-l); padding: 16px; text-decoration: none; color: var(--texte); }
.prochain::before { content: 'Ta leçon du jour'; display: block; letter-spacing: .24em; text-transform: uppercase; font-size: .66rem; color: var(--gris); margin-bottom: 6px; }
.prochain b { display: block; font-size: 1.12rem; color: var(--titre-c); line-height: 1.25; font-weight: 700; }
.prochain small { color: var(--gris); }
.prochain .ouvrir { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 7px 7px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--bleu-vif), var(--encre)); color: #fff; font-weight: 600; font-size: .88rem; box-shadow: 0 10px 20px -10px rgba(14,78,156,.7); }
.prochain .ouvrir::after { content: '→'; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.action { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 156px; padding: 16px; border-radius: var(--r-l); text-decoration: none; color: var(--texte); overflow: hidden; transition: transform .15s; }
.action:active { transform: scale(.98); }
.action b { font-size: 1.08rem; font-weight: 700; line-height: 1.2; color: var(--titre-c); margin-top: auto; position: relative; }
.action span.d { font-size: .8rem; color: var(--gris); position: relative; }
.action .picto {
  position: relative; width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); box-shadow: 0 10px 20px -10px rgba(3,43,87,.35), inset 0 1px 0 #fff;
}
:root[data-theme="sombre"] .action .picto { background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.action.reviser { grid-column: 1 / -1; min-height: 112px; flex-direction: row; align-items: center; gap: 14px; }
.action.reviser .txt { display: flex; flex-direction: column; gap: 3px; position: relative; }
.action.reviser b { margin-top: 0; }
.action::after { content: ''; position: absolute; width: 130px; height: 130px; right: -46px; bottom: -56px; border-radius: 50%; background: radial-gradient(circle, var(--orbe-1), transparent 65%); }
.action.tester::after { background: radial-gradient(circle, var(--orbe-2), transparent 65%); }
.action.probleme::after { background: radial-gradient(circle, rgba(230,163,0,.25), transparent 65%); }
.action .fl { position: absolute; right: 14px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--verre-fort); color: var(--titre-c); font-size: .9rem; border: 1px solid var(--verre-bord); }
.action.reviser .fl { top: 50%; transform: translateY(-50%); }

.derrick-bande, .lien-tb { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px; border-radius: var(--r-l); text-decoration: none; color: var(--texte); }
.derrick-bande .av { position: relative; flex: none; width: 56px; height: 56px; }
.derrick-bande .av img { width: 56px; height: 56px; border-radius: 18px; display: block; background: #fff; box-shadow: 0 10px 20px -10px rgba(3,43,87,.45); }
.derrick-bande .av::after { content: ''; position: absolute; right: -3px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--vert-vif); box-shadow: 0 0 0 3px var(--verre-fort), 0 0 12px var(--vert-vif); }
.derrick-bande b, .lien-tb b { display: block; font-size: 1.02rem; color: var(--titre-c); font-weight: 700; }
.derrick-bande small, .lien-tb small { color: var(--gris); display: block; font-size: .8rem; }
.derrick-bande .fl, .lien-tb .fl { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--bleu-vif), var(--encre)); font-size: .95rem; }
.lien-tb .mini-courbe { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-pale); }
.slogan-bas { text-align: center; margin: 22px 0 0; }

/* ---------- En-têtes de page ---------- */
.tete-page, .lecon-tete { border-radius: var(--r-xl); padding: 14px 16px 18px; margin-bottom: 14px; }
.tete-page h1, .lecon-tete h1 { margin-top: 2px; }
.tete-page p { color: var(--gris); margin: 0; }

/* ---------- Réviser ---------- */
.loupe-zone { position: relative; margin-top: 16px; }
.loupe-zone .champ { padding-left: 52px; }
.loupe-zone .loupe { position: absolute; left: 19px; top: 50%; transform: translateY(-62%); width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid var(--bleu-vif); pointer-events: none; }
.loupe-zone .loupe::after { content: ''; position: absolute; width: 2.5px; height: 8px; background: var(--bleu-vif); border-radius: 2px; right: -4px; bottom: -7px; transform: rotate(-45deg); }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 15; border-radius: 22px; overflow: hidden;
  background: var(--verre-fort); border: 1px solid var(--verre-bord); box-shadow: 0 26px 50px -18px rgba(3,43,87,.45);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.suggestions button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 18px; border-bottom: 1px solid var(--trait); color: var(--texte); }
.suggestions button:last-child { border-bottom: 0; }
.suggestions button:hover, .suggestions button.actif { background: var(--accent-pale); }
.suggestions b { color: var(--titre-c); display: block; font-weight: 600; }
.suggestions small { color: var(--gris); }
mark { background: linear-gradient(transparent 50%, rgba(1, 163, 86, .35) 50%); color: inherit; padding: 0 1px; border-radius: 2px; }

.filtres { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 0 -2px 4px; scrollbar-width: none; }
.filtres::-webkit-scrollbar { display: none; }
.filtre { flex: none; border: 1px solid var(--verre-bord); background: var(--verre); color: var(--titre-c); border-radius: 999px; padding: 8px 15px; font-weight: 500; font-size: .86rem; box-shadow: var(--relief); }
.filtre.actif { background: linear-gradient(135deg, var(--bleu-vif), var(--encre)); color: #fff; border-color: transparent; box-shadow: 0 10px 20px -10px rgba(14,78,156,.7); }

.tiroir { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 2px 10px; }
.tiroir h2 { margin: 0; font-size: 1.1rem; }
.tiroir small { color: var(--gris); white-space: nowrap; }
.dossiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dossier { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 160px; padding: 16px 14px 14px; border-radius: var(--r-l); text-decoration: none; color: var(--texte); overflow: hidden; }
.dossier::before { content: ''; position: absolute; left: 16px; width: 34px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--bleu-vif), var(--encre)); box-shadow: 0 0 10px rgba(47,125,225,.6); }
.dossier.inf::before { background: linear-gradient(90deg, var(--vert-vif), var(--vert)); box-shadow: 0 0 10px rgba(1,163,86,.6); }
.dossier .onglet { align-self: flex-start; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); margin-top: 4px; }
.dossier .t { font-weight: 700; font-size: .96rem; line-height: 1.25; color: var(--titre-c); }
.dossier .r { font-size: .78rem; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dossier .classe { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0; background: var(--vert); box-shadow: 0 0 0 3px var(--verre-fort), 0 6px 14px -4px rgba(1,163,86,.7); }
.dossier .classe::after { content: '✓'; font-size: .85rem; color: #fff; font-weight: 700; }
.vide { text-align: center; color: var(--gris); padding: 26px 10px; }

/* ---------- Leçon ---------- */
.lecon-tete .resume { color: var(--gris); margin: 0 0 14px; font-size: 1.02rem; }
.lecon-tete .outils-lecon { display: flex; gap: 8px; flex-wrap: wrap; }
.lecon-tete .btn-ecoute { border: 1px solid var(--verre-bord); background: var(--verre-fort); color: var(--titre-c); border-radius: 999px; padding: 8px 16px; font-weight: 500; font-size: .88rem; box-shadow: var(--verre-ombre); }
.feuille-cours { border-radius: var(--r-l); padding: 18px 18px 8px; margin-bottom: 12px; }
.feuille-cours h2 { font-size: 1.06rem; display: flex; align-items: center; gap: 8px; }
.points { list-style: none; margin: 8px 0 0; padding: 0; }
.points li { position: relative; padding: 0 0 12px 26px; }
.points li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--bleu-vif); box-shadow: 0 0 0 4px var(--accent-pale); }
.etapes-liste { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: e; }
.etapes-liste li { counter-increment: e; position: relative; padding: 4px 0 14px 46px; min-height: 36px; }
.etapes-liste li::before { content: counter(e); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 11px; background: linear-gradient(135deg, var(--bleu-vif), var(--encre)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .88rem; box-shadow: 0 8px 14px -8px rgba(14,78,156,.8); }
.etapes-liste li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 36px; bottom: 2px; width: 2px; background: var(--trait); }
.piege { position: relative; border-radius: var(--r-l); padding: 16px 18px 8px; margin-bottom: 12px; background: var(--rouge-pale); border: 1px solid rgba(217, 54, 79, .22); }
.piege .tampon-piege { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 700; color: var(--rouge); }
.piege .tampon-piege::before { content: '⚠'; }
.piege .points li::before { background: var(--rouge); box-shadow: 0 0 0 4px rgba(217,54,79,.15); }
.post-it { border-radius: var(--r-l); padding: 16px 18px; margin-bottom: 12px; background: var(--vert-pale); border: 1px solid rgba(1, 163, 86, .25); }
.post-it h2 { color: var(--vert); font-size: 1.02rem; }
:root[data-theme="sombre"] .post-it h2 { color: var(--vert-vif); }
.post-it p { margin: 0; }
.fin-lecon { margin-top: 18px; }
.bravo { text-align: center; border-radius: var(--r-xl); padding: 22px 18px; }
.bravo .classe-gros { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; margin-bottom: 10px; font-size: 0; background: linear-gradient(135deg, var(--vert-vif), var(--vert)); box-shadow: 0 14px 28px -12px rgba(1,163,86,.8); }
.bravo .classe-gros::after { content: '✓'; font-size: 1.8rem; color: #fff; font-weight: 700; }

/* ---------- Test : réglages ---------- */
.choix-grille { display: grid; gap: 10px; }
.choix-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border-radius: var(--r-m); padding: 14px 16px; color: var(--texte); transition: box-shadow .15s, border-color .15s; }
.choix-btn .n { font-size: 1.9rem; font-weight: 800; color: var(--titre-c); min-width: 52px; line-height: 1; }
.choix-btn .d b { display: block; color: var(--titre-c); font-weight: 600; }
.choix-btn .d small { color: var(--gris); }
.choix-btn.actif { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale), var(--verre-ombre); }
.choix-btn:disabled { opacity: .45; }
.etape-titre { display: flex; align-items: center; gap: 10px; margin: 20px 2px 10px; }
.etape-titre span { width: 28px; height: 28px; border-radius: 10px; background: linear-gradient(135deg, var(--bleu-vif), var(--encre)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.etape-titre h2 { margin: 0; font-size: 1.06rem; }

/* ---------- Test : l'épreuve ---------- */
.jeu-haut {
  position: sticky; top: 64px; z-index: 12; display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 10px; border-radius: 22px;
  background: var(--verre-fort); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.jeu-haut a { color: var(--titre-c) !important; }
.jeu-haut .compteur { font-weight: 700; color: var(--titre-c); }
.jeu-haut .compteur small { color: var(--gris); font-weight: 400; }
.jeu-haut .btn-grille { margin-left: auto; border: 1px solid var(--verre-bord); background: var(--verre); color: var(--titre-c); border-radius: 999px; padding: 6px 12px; font-size: .8rem; }
.anneau { position: relative; width: 50px; height: 50px; flex: none; }
.anneau svg { transform: rotate(-90deg); width: 50px; height: 50px; }
.anneau .fond { stroke: var(--trait); }
.anneau .val { stroke: var(--vert); transition: stroke-dashoffset .5s linear, stroke .3s; filter: drop-shadow(0 0 4px rgba(1,163,86,.6)); }
.anneau.urgent .val { stroke: var(--rouge); filter: drop-shadow(0 0 4px rgba(217,54,79,.6)); }
.anneau span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--titre-c); }
.progression-fil { height: 6px; background: var(--trait); border-radius: 99px; margin: 0 4px 14px; overflow: hidden; }
.progression-fil div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--vert-vif), var(--bleu-vif)); box-shadow: 0 0 10px rgba(47,125,225,.6); transition: width .3s; }
.copie { border-radius: var(--r-xl); padding: 20px 16px; }
.question-texte { font-size: 1.2rem; font-weight: 700; color: var(--titre-c); margin: 0 0 6px; line-height: 1.3; }
.consigne { font-size: .78rem; color: var(--gris); margin-bottom: 14px; }
.reponses { display: grid; gap: 10px; }
.reponse {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 60px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--verre-bord); background: var(--champ); border-radius: 20px; color: var(--texte);
  box-shadow: var(--verre-ombre); transition: border-color .12s, background .12s, box-shadow .12s;
}
.reponse .lettre { flex: none; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font-weight: 700; background: var(--accent-pale); color: var(--bleu-vif); }
.reponse.coche { border-color: var(--bleu-vif); box-shadow: 0 0 0 3px var(--accent-pale), var(--verre-ombre); }
.reponse.coche .lettre { background: linear-gradient(135deg, var(--bleu-vif), var(--encre)); color: #fff; }
.reponse.juste { border-color: var(--vert); background: var(--vert-pale); }
.reponse.juste .lettre { background: var(--vert); color: #fff; }
.reponse.faux { border-color: var(--rouge); background: var(--rouge-pale); }
.reponse.faux .lettre { background: var(--rouge); color: #fff; }
.nav-jeu { display: flex; gap: 10px; margin-top: 16px; }
.nav-jeu .btn { flex: 1; }
.valider-zone { margin-top: 12px; }

.grille-num { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.grille-num button { border: 1px solid var(--verre-bord); background: var(--champ); border-radius: 14px; height: 46px; font-weight: 600; color: var(--gris); }
.grille-num button.repondu { background: linear-gradient(135deg, var(--bleu-vif), var(--encre)); color: #fff; border-color: transparent; }
.grille-num button.courant { box-shadow: 0 0 0 3px var(--vert); }
.legende { display: flex; gap: 16px; font-size: .8rem; color: var(--gris); align-items: center; }
.legende i { display: inline-block; width: 14px; height: 14px; border-radius: 5px; border: 1px solid var(--trait); background: var(--champ); vertical-align: -2px; margin-right: 5px; }
.legende i.r { background: var(--bleu-vif); border-color: var(--bleu-vif); }
.feuille { position: fixed; inset: 0; z-index: 40; background: rgba(4, 20, 44, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; }
.feuille > div { width: 100%; max-width: 760px; max-height: 86vh; overflow: auto; background: linear-gradient(165deg, var(--fond-1), var(--fond-2)); border-radius: 30px 30px 0 0; padding: 22px 16px calc(18px + env(safe-area-inset-bottom)); border: 1px solid var(--verre-bord); }

/* ---------- Résultat ---------- */
.verdict { position: relative; border-radius: var(--r-xl); padding: 20px 18px 24px; text-align: center; overflow: hidden; }
.verdict::before { content: ''; position: absolute; width: 260px; height: 260px; left: 50%; top: -60px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, var(--orbe-1), transparent 65%); }
.verdict > * { position: relative; }
.verdict .titre-test { margin: 0 0 4px; }
.verdict .score { font-weight: 800; font-size: 4.8rem; line-height: 1; letter-spacing: -.04em; color: var(--titre-c); }
.verdict .score small { font-size: 1.6rem; color: var(--gris); font-weight: 600; }
.verdict .duree { color: var(--gris); font-size: .86rem; }
.tampon {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 20px; border-radius: 999px; font-weight: 700; font-size: 1.05rem; color: #fff;
  animation: apparait .55s cubic-bezier(.2, 1.4, .4, 1) .2s both;
}
.tampon.ok { background: linear-gradient(135deg, var(--vert-vif), var(--vert)); box-shadow: 0 14px 30px -10px rgba(1,163,86,.85); }
.tampon.moyen { background: linear-gradient(135deg, #F7C341, var(--ambre)); box-shadow: 0 14px 30px -10px rgba(230,163,0,.8); color: #3B2A00; }
.tampon.ko { background: linear-gradient(135deg, #FF6B82, var(--rouge)); box-shadow: 0 14px 30px -10px rgba(217,54,79,.8); }
@keyframes apparait { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.verdict .message { margin: 14px auto 0; max-width: 36ch; color: var(--gris); }
.recuperer { margin-top: 14px; border-radius: var(--r-xl); padding: 18px 16px; }
.recuperer h2 { font-size: 1.06rem; }
.note-dl { font-size: .8rem; color: var(--gris); margin: 4px 4px 0; }
.corr-q { border-radius: var(--r-m); padding: 14px 14px 12px 20px; margin-bottom: 10px; text-align: left; position: relative; overflow: hidden; }
.corr-q::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--vert); box-shadow: 0 0 10px var(--vert); }
.corr-q.faux::before { background: var(--rouge); box-shadow: 0 0 10px var(--rouge); }
.corr-q h4 { margin: 0 0 6px; font-size: .95rem; color: var(--titre-c); }
.corr-q .l { font-size: .9rem; margin: 3px 0; }
.corr-q .ok { color: var(--vert); font-weight: 600; }
.corr-q .ko { color: var(--rouge); font-weight: 600; }
.corr-q .ex { font-size: .84rem; background: var(--ambre-pale); border-radius: 12px; padding: 8px 10px; margin-top: 6px; }

/* ---------- Mini-quiz ---------- */
.retour-q { border-radius: 18px; padding: 12px 14px; margin-top: 12px; font-weight: 600; }
.retour-q.ok { background: var(--vert-pale); color: var(--vert); }
.retour-q.ko { background: var(--rouge-pale); color: var(--rouge); }
.retour-q .ex { font-weight: 400; color: var(--texte); margin-top: 4px; font-size: .9rem; }

/* ---------- Problème ---------- */
.saisie { position: relative; }
.saisie textarea { padding-right: 66px; }
.saisie .micro { position: absolute; right: 10px; bottom: 12px; width: 46px; height: 46px; border-radius: 16px; border: 1px solid var(--verre-bord); background: var(--verre-fort); font-size: 1.2rem; box-shadow: var(--verre-ombre); }
.micro.ecoute { background: var(--rouge) !important; color: #fff; box-shadow: 0 0 0 6px rgba(217,54,79,.2), 0 0 24px rgba(217,54,79,.6) !important; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .7; } }
.reponse-ia { border-radius: var(--r-xl); padding: 18px; margin-top: 14px; }
.reponse-ia .entete-r { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--titre-c); margin-bottom: 6px; }
.reponse-ia ul, .reponse-ia ol { margin: 4px 0 0; padding-left: 20px; }
.reponse-ia li { margin: 7px 0; }
.reponse-ia ul li::marker { color: var(--vert); }
.reponse-ia .source { font-size: .78rem; color: var(--gris); margin-top: 10px; }
.attente { display: flex; align-items: center; gap: 10px; color: var(--gris); margin-top: 14px; }
.trois-points span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu-vif); margin: 0 2px; animation: rebond 1.2s infinite; box-shadow: 0 0 8px var(--bleu-vif); }
.trois-points span:nth-child(2) { animation-delay: .15s; } .trois-points span:nth-child(3) { animation-delay: .3s; }
@keyframes rebond { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* ---------- Derrick ---------- */
.derrick-tete {
  position: sticky; top: 64px; z-index: 12; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border-radius: 22px;
  background: var(--verre-fort); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.derrick-tete a { color: var(--titre-c); text-decoration: none; font-size: 1.4rem; padding: 0 4px; }
.derrick-tete .av { position: relative; width: 44px; height: 44px; flex: none; }
.derrick-tete .av img { width: 44px; height: 44px; border-radius: 15px; display: block; background: #fff; }
.derrick-tete .av::after { content: ''; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--vert-vif); box-shadow: 0 0 0 2px var(--verre-fort), 0 0 10px var(--vert-vif); }
.derrick-tete b { display: block; font-size: 1rem; line-height: 1.15; color: var(--titre-c); }
.derrick-tete small { color: var(--gris); font-size: .74rem; }
.derrick-tete label { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--gris); }
.fil { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; min-height: 140px; }
.bulle { max-width: 86%; padding: 12px 15px; border-radius: 22px; font-size: .95rem; }
.bulle.moi { align-self: flex-end; color: #fff; border-bottom-right-radius: 6px; background: linear-gradient(135deg, var(--bleu-vif), var(--encre)); box-shadow: 0 12px 24px -12px rgba(14,78,156,.7); }
.bulle.lui { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--verre-fort); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bulle.lui ul, .bulle.lui ol { margin: 2px 0 0; padding-left: 18px; }
.bulle.lui li { margin: 4px 0; }
.bulle.lui ul li::marker { color: var(--vert); }
.bulle .outils-b { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bulle .outils-b button, .bulle .outils-b a { border: 1px solid var(--verre-bord); background: var(--verre); border-radius: 999px; padding: 4px 11px; font-size: .78rem; font-weight: 500; color: var(--titre-c); text-decoration: none; }
.chat-saisie { position: sticky; bottom: 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: flex-end; }
.chat-saisie textarea { min-height: 54px; max-height: 140px; flex: 1; resize: none; border-radius: 22px; }
.chat-saisie .rond { flex: none; width: 54px; height: 54px; border-radius: 18px; border: 1px solid var(--verre-bord); font-size: 1.2rem; }
.chat-saisie .envoyer { color: #fff; border: 0; background: linear-gradient(135deg, var(--vert-vif), var(--vert)); box-shadow: 0 12px 24px -10px rgba(1,163,86,.8); }
.chat-saisie .micro { background: var(--verre-fort); box-shadow: var(--verre-ombre); }
.suggestions-q { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.suggestions-q button { border: 1px solid var(--verre-bord); background: var(--verre); color: var(--titre-c); border-radius: 999px; padding: 7px 13px; font-size: .84rem; box-shadow: var(--relief); }
.mention-ia { font-size: .76rem; color: var(--gris); text-align: center; margin: 6px 0 0; }

/* ---------- Tableau de bord ---------- */
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tuile { border-radius: var(--r-l); padding: 14px; display: flex; flex-direction: column; gap: 2px; min-height: 122px; }
.tuile .lib { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.tuile .val { font-weight: 800; font-size: 2.2rem; line-height: 1.05; color: var(--titre-c); letter-spacing: -.03em; }
.tuile .val small { font-size: 1rem; color: var(--gris); font-weight: 600; }
.tuile .note { font-size: .76rem; color: var(--gris); margin-top: auto; }
.tuile .note.hausse { color: var(--vert); font-weight: 600; }
.tuile .note.baisse { color: var(--rouge); font-weight: 600; }
.tuile.feu { box-shadow: 0 0 0 2px rgba(230,163,0,.35), var(--verre-ombre); }
.jauge { display: block; height: 8px; border-radius: 99px; background: var(--trait); overflow: hidden; margin-top: auto; }
.jauge.grande { height: 10px; margin-top: 8px; }
.jauge i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--vert-vif), var(--vert)); box-shadow: 0 0 10px rgba(1,163,86,.5); }
.bloc-tb { border-radius: var(--r-xl); padding: 18px 16px; margin-top: 14px; }
.bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bloc-tete h2 { margin: 0; font-size: 1.06rem; }
.bloc-tete small { color: var(--gris); }
.courbe-zone { position: relative; margin-top: 6px; }
.courbe { width: 100%; height: auto; display: block; overflow: visible; }
.courbe .grille { stroke: var(--trait); stroke-width: 1; }
.courbe .seuil { stroke: var(--ambre); stroke-opacity: .75; stroke-width: 1.5; stroke-dasharray: 5 4; }
.courbe .axe { fill: var(--gris); font-size: 10.5px; font-family: var(--police); }
.courbe .seuil-txt { fill: #A87700; }
:root[data-theme="sombre"] .courbe .seuil-txt { fill: #F7C341; }
.courbe .trace { fill: none; stroke: var(--bleu-vif); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 4px 6px rgba(47,125,225,.4)); }
.courbe .point { fill: var(--bleu-vif); stroke: #fff; stroke-width: 2; }
:root[data-theme="sombre"] .courbe .point { stroke: #032B57; }
.courbe .point.dernier { fill: var(--vert); }
.courbe .cible { fill: transparent; cursor: pointer; }
.courbe .pt:focus { outline: none; }
.courbe .pt:focus .point, .courbe .pt:hover .point { stroke: var(--vert-vif); stroke-width: 3; }
.courbe .etiq { fill: var(--texte); font-size: 12px; font-weight: 600; font-family: var(--police); }
.infobulle { position: absolute; transform: translate(-50%, -100%); background: var(--encre); color: #fff; font-size: .78rem; line-height: 1.35; padding: 7px 11px; border-radius: 12px; pointer-events: none; white-space: nowrap; z-index: 5; box-shadow: 0 10px 20px -8px rgba(3,43,87,.6); }
.vide-tb { text-align: center; padding: 18px 10px; background: var(--champ); border-radius: 20px; }
.vide-tb p { margin: 0 0 12px; color: var(--gris); }
.vide-tb .btn { width: auto; display: inline-flex; }
.detail-tb { margin-top: 12px; font-size: .88rem; }
.detail-tb summary { cursor: pointer; color: var(--bleu-vif); font-weight: 500; padding: 4px 0; }
.detail-tb table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.detail-tb th { text-align: left; color: var(--gris); font-weight: 400; font-size: .78rem; padding: 6px 4px; border-bottom: 1px solid var(--trait); }
.detail-tb td { padding: 7px 4px; border-bottom: 1px solid var(--trait); }
.formation-ligne + .formation-ligne { margin-top: 16px; }
.fl-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fl-tete b { color: var(--titre-c); font-weight: 600; }
.fl-tete span { font-size: .82rem; color: var(--gris); }
.a-revoir { display: grid; gap: 8px; }
.a-revoir a { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--rouge-pale); border: 1px solid rgba(217,54,79,.18); text-decoration: none; color: var(--texte); }
.a-revoir b { display: block; color: var(--titre-c); font-weight: 600; line-height: 1.25; }
.a-revoir small { color: var(--rouge); }
.a-revoir .ouvrir { margin-left: auto; flex: none; font-size: .8rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--bleu-vif), var(--encre)); border-radius: 999px; padding: 7px 13px; }
.semaine-tete, .calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semaine-tete span { text-align: center; font-size: .72rem; color: var(--gris); }
.calendrier { margin-top: 6px; }
.jour { display: block; aspect-ratio: 1; border-radius: 9px; background: var(--trait); cursor: pointer; }
.jour.vide-j { background: transparent; cursor: default; }
.jour.n1 { background: #BDE8D1; } .jour.n2 { background: #6CCB9C; } .jour.n3 { background: var(--vert); } .jour.n4 { background: #01743F; }
.jour.n3, .jour.n4 { box-shadow: 0 0 10px rgba(1,163,86,.45); }
.jour.aujourdhui { outline: 2px solid var(--bleu-vif); outline-offset: 1px; }
.cal-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: .78rem; color: var(--gris); }
.cal-legende { display: inline-flex; align-items: center; gap: 4px; }
.cal-legende .jour { width: 14px; height: 14px; border-radius: 4px; display: inline-block; cursor: default; box-shadow: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; z-index: 60;
  background: var(--encre); color: #fff; padding: 12px 18px; border-radius: 18px; font-weight: 500; box-shadow: 0 16px 34px -12px rgba(3,43,87,.7);
  transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); text-align: center;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Derrick ANAGUE : portrait en haut, feuille blanche en bas ---------- */
.d-hero {
  position: relative; margin: -6px -16px 0; padding: 14px 18px 22px; overflow: hidden; color: #fff;
  border-radius: 0 0 40px 40px; min-height: 430px; display: flex; flex-direction: column;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(73, 160, 255, .55), transparent 70%), linear-gradient(170deg, #0E4E9C 0%, #06336B 55%, #032B57 100%);
  box-shadow: 0 30px 60px -30px rgba(3, 43, 87, .8); transition: min-height .35s ease;
}
.d-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(transparent, rgba(2, 24, 50, .75)); pointer-events: none; }
.d-haut { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.d-haut .pastille.ia { background: rgba(255,255,255,.16); color: #fff; }
.d-rond {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; text-decoration: none; font-size: 1.25rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.d-portrait { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; padding: 8px 0 0; }
.d-portrait .avatar-svg, .d-portrait img {
  width: 220px; height: 220px; border-radius: 64px; object-fit: cover;
  box-shadow: 0 0 0 10px rgba(255,255,255,.08), 0 0 0 22px rgba(255,255,255,.04), 0 30px 60px -20px rgba(0,0,0,.6);
  transition: width .35s, height .35s, border-radius .35s;
}
.d-bas { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.d-nom h1 { color: #fff; font-size: 1.6rem; margin: 0 0 2px; font-weight: 600; }
.d-nom span { color: rgba(255,255,255,.75); font-size: .86rem; }
.d-actions { display: flex; gap: 8px; flex: none; }
.d-act {
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); font-size: 1.15rem;
  background: rgba(255,255,255,.85); box-shadow: 0 10px 20px -10px rgba(0,0,0,.5);
}
.d-hero.compact { min-height: 0; padding-bottom: 16px; border-radius: 0 0 30px 30px; }
.d-hero.compact .d-portrait { position: absolute; left: 18px; bottom: 16px; padding: 0; }
.d-hero.compact .d-portrait .avatar-svg, .d-hero.compact .d-portrait img { width: 56px; height: 56px; border-radius: 18px; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.d-hero.compact .d-bas { padding-left: 68px; align-items: center; }
.d-hero.compact .d-nom h1 { font-size: 1.15rem; }
.d-hero.compact .d-nom span { font-size: .74rem; }
.d-hero.compact .d-act { width: 40px; height: 40px; font-size: .95rem; }
.d-hero.compact::after { height: 0; }

.d-feuille { position: relative; padding-top: 4px; }
.d-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: -26px 4px 0; position: relative; z-index: 3;
  padding: 16px 12px; border-radius: 26px; background: var(--verre-fort); border: 1px solid var(--verre-bord);
  box-shadow: var(--verre-ombre), var(--relief); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.d-stats > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.d-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-pale); font-size: 1rem; }
.d-stats b { display: block; color: var(--bleu-vif); font-weight: 600; font-size: .9rem; line-height: 1.15; white-space: nowrap; }
.d-stats small { color: var(--texte); font-size: .74rem; }
.d-titre { font-size: .98rem; font-weight: 500; color: var(--gris); margin: 22px 4px 10px; }
.d-sujets, .d-rapides { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.d-sujets::-webkit-scrollbar, .d-rapides::-webkit-scrollbar { display: none; }
.d-sujets button { flex: none; border: 0; background: transparent; color: var(--texte); border-radius: 999px; padding: 9px 16px; font-size: .9rem; }
.d-sujets button.actif { background: var(--accent-pale); color: var(--bleu-vif); font-weight: 600; }
.d-rapides { flex-wrap: wrap; }
.d-rapides button {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--verre-bord); background: var(--verre); color: var(--titre-c);
  border-radius: 999px; padding: 9px 14px; font-size: .86rem; text-align: left; box-shadow: var(--relief);
}
.d-feuille .fil { margin-top: 16px; }
.ligne-moi, .ligne-lui { display: flex; align-items: flex-end; gap: 8px; }
.ligne-moi { justify-content: flex-end; }
.ligne-moi .bulle, .ligne-lui .bulle { max-width: calc(100% - 46px); }
.mini-av { flex: none; width: 30px; height: 30px; }
.mini-av .avatar-svg { width: 30px; height: 30px; border-radius: 10px; display: block; }
.d-saisie {
  position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 6px 6px 6px 18px; border-radius: 999px; background: linear-gradient(135deg, var(--bleu) 0%, var(--encre) 100%);
  box-shadow: 0 18px 36px -14px rgba(3, 43, 87, .8);
}
.d-saisie textarea { flex: 1; border: 0; outline: none; background: transparent; color: #fff; resize: none; font-size: 1rem; padding: 12px 0; max-height: 120px; line-height: 1.35; }
.d-saisie textarea::placeholder { color: rgba(255,255,255,.7); }
.d-mic, .d-env { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; font-size: 1.15rem; }
.d-mic { background: rgba(255,255,255,.14); color: #fff; }
.d-env { background: linear-gradient(135deg, var(--vert-vif), var(--vert)); color: #fff; font-weight: 700; box-shadow: 0 8px 16px -8px rgba(1,163,86,.9); }
.d-mic.ecoute { background: var(--rouge) !important; animation: pulse 1s infinite; }

/* ---------- Choix de l'avatar ---------- */
.choix-avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.choix-avatars button { position: relative; padding: 0; border: 0; background: none; border-radius: 22px; aspect-ratio: 1; transition: transform .15s; }
.choix-avatars .avatar-svg { width: 100%; height: 100%; display: block; border-radius: 22px; box-shadow: 0 10px 20px -12px rgba(3,43,87,.5); }
.choix-avatars button.actif { transform: scale(1.04); }
.choix-avatars button.actif::after {
  content: '✓'; position: absolute; right: -5px; top: -5px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; color: #fff; background: var(--vert); box-shadow: 0 0 0 3px var(--verre-fort);
}
.choix-avatars button.actif .avatar-svg { box-shadow: 0 0 0 3px var(--vert), 0 14px 24px -12px rgba(1,163,86,.8); }
.btn-de { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; border: 1px solid var(--verre-bord); background: var(--verre-fort); color: var(--titre-c); border-radius: 999px; padding: 8px 14px; font-size: .86rem; box-shadow: var(--relief); }
.barre-profil { display: inline-flex; align-items: center; gap: 8px; padding-left: 4px; }
.barre-profil .avatar-svg { width: 32px; height: 32px; border-radius: 11px; display: block; flex: none; }
.hero .detective.avatar { background: transparent; }
.hero .detective.avatar .avatar-svg { width: 100%; height: 100%; display: block; }
/* Ajustements petits écrans : Derrick */
.d-nom { min-width: 0; }
.d-nom h1 { white-space: nowrap; font-size: clamp(1.15rem, 5.4vw, 1.6rem); }
.d-act { width: 44px; height: 44px; font-size: 1rem; }
.d-actions { gap: 6px; }
.d-stats > div { flex-direction: column; text-align: center; gap: 6px; }
.d-stats b { white-space: normal; }
.d-feuille { padding-bottom: 6px; }
.derrick-bande .av .avatar-svg { width: 56px; height: 56px; display: block; border-radius: 18px; box-shadow: 0 10px 20px -10px rgba(3,43,87,.45); }

/* =========================================================
   MOBILE FIRST, TOUJOURS EN PORTRAIT
   Sur tablette et ordinateur, l'appli garde son format téléphone :
   une colonne verticale centrée, comme sur un écran de smartphone.
   ========================================================= */
.vue, .vue.etroit { max-width: 480px; }
.barre { padding-left: max(16px, calc((100vw - 480px) / 2 + 16px)); padding-right: max(16px, calc((100vw - 480px) / 2 + 16px)); }
.feuille > div { max-width: 480px; }
@media (min-width: 560px) {
  body { padding-bottom: 12px; }
  .vue { border-left: 1px solid var(--trait); border-right: 1px solid var(--trait); background: color-mix(in srgb, var(--fond-1) 35%, transparent); }
}

/* ---------- Connexion ---------- */
.champ-mdp .champ { padding-right: 54px; }
.champ-mdp .oeil { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 14px; background: transparent; font-size: 1.05rem; }
.lien-bas { text-align: center; color: var(--gris); margin: 18px 0 0; font-size: .92rem; }
.lien-bas a, .lien-bas .lien { color: var(--bleu-vif); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font-size: inherit; }
.fiche-identite .rangee > div { min-width: 0; }
.tuile-logo .avatar-svg { width: 112px; height: 112px; border-radius: 32px; display: block; box-shadow: 0 10px 24px -12px rgba(3,43,87,.5); }

/* ---------- Espace formateur ---------- */
.tuile.alerte { box-shadow: 0 0 0 2px rgba(217,54,79,.35), var(--verre-ombre); }
.tuile.alerte .val { color: var(--rouge); }
.barres-f { width: 100%; height: auto; display: block; }
.barres-f rect { fill: var(--bleu-vif); opacity: .55; }
.barres-f rect.fort { fill: var(--vert); opacity: 1; }
.barres-f .axe { font-size: 9px; fill: var(--gris); }
.barres-f .grille { stroke: var(--trait); }
.liste-etu { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.etu { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--champ); color: var(--texte); text-decoration: none; border: 1px solid var(--trait); }
.etu .avatar-svg, .etu-tete .avatar-svg { flex: none; border-radius: 14px; }
.etu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.etu-txt b { color: var(--titre-c); }
.etu-txt small { color: var(--gris); font-size: .78rem; }
.etu .ouvrir { color: var(--gris); font-size: 1.4rem; }
.ok { color: var(--vert); } .ko { color: var(--rouge); }
.pastille.decroche { background: var(--rouge-pale); color: var(--rouge); border-color: transparent; margin-left: 4px; font-size: .68rem; }
.pastille.en-ligne { background: var(--vert-pale); color: var(--vert); border-color: transparent; font-size: .68rem; }
.etu-tete { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.etu-tete h1 { margin: 0; font-size: 1.3rem; }
.jour-f { padding: 10px 0; border-top: 1px solid var(--trait); }
.jour-f:first-of-type { border-top: 0; }
.seance { display: inline-flex; gap: 6px; align-items: baseline; margin: 6px 6px 0 0; padding: 5px 10px; border-radius: 999px; background: var(--accent-pale); font-size: .82rem; color: var(--titre-c); }
.seance small { color: var(--gris); }
.table-f { width: 100%; border-collapse: collapse; font-size: .84rem; }
.table-f th { text-align: left; color: var(--gris); font-weight: 500; font-size: .72rem; padding: 6px 4px; }
.table-f td { padding: 7px 4px; border-top: 1px solid var(--trait); }
.puces-l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.puces-l span { font-size: .74rem; padding: 4px 9px; border-radius: 999px; background: var(--champ); color: var(--gris); border: 1px solid var(--trait); }
.puces-l span.faite { background: var(--vert-pale); color: var(--vert); border-color: transparent; }
.lien-bas.petit { margin-top: 4px; font-size: .82rem; }
.champ.verrou { opacity: .7; }
.etu-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.etu-nom .pastille { margin: 0; padding: 2px 8px; }
.etu-txt b.ok { color: var(--vert); } .etu-txt b.ko { color: var(--rouge); }
.filiere-fixe { padding: 12px 14px; border-radius: var(--r-m); background: var(--champ); border: 1px solid var(--trait); font-weight: 600; color: var(--titre-c); }
select.champ { appearance: auto; }

/* Thème bleu : contrastes renforcés sur le fond bleu du logo */
:root[data-theme="sombre"] .barre-logo .by b { color: var(--vert-vif); }
:root[data-theme="sombre"] .d-stats b { color: #7DB8FF; }
:root[data-theme="sombre"] .lien-bas a, :root[data-theme="sombre"] .lien { color: #7DB8FF; }

/* ---------- Écran de lancement (3 secondes, logo qui pulse) ---------- */
.lancement {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 54px;
  background: radial-gradient(ellipse 70% 50% at 50% 42%, rgba(47,125,225,.45), transparent 70%), linear-gradient(170deg, #0A3D78 0%, #032B57 60%, #021F40 100%);
  transition: opacity .5s ease, visibility .5s; color: #fff;
}
.lancement.fini { opacity: 0; visibility: hidden; }
.l-logo { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.l-logo img { position: relative; width: 132px; height: 132px; border-radius: 38px; display: block; box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); animation: l-pulse 1s ease-in-out infinite; }
.l-onde { position: absolute; inset: 0; border-radius: 40px; border: 2px solid rgba(25,199,116,.8); box-shadow: 0 0 24px rgba(25,199,116,.45); animation: l-onde 1.5s ease-out infinite; }
.l-onde.o2 { animation-delay: .5s; border-color: rgba(125,184,255,.8); box-shadow: 0 0 24px rgba(47,125,225,.5); }
.l-onde.o3 { animation-delay: 1s; }
.l-mot { background: #fff; border-radius: 16px; padding: 8px 16px; display: flex; box-shadow: 0 12px 28px -12px rgba(0,0,0,.6); animation: l-monte .7s .2s ease-out both; }
.l-mot img { display: block; height: 40px; width: auto; }
.l-mot + .l-by { margin-top: -38px; }
.l-by { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: #A8BEDF; animation: l-monte .7s .45s ease-out both; }
.l-by b { color: #19C774; font-weight: 600; }
@keyframes l-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes l-onde { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes l-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .l-logo img, .l-onde, .l-mot, .l-by { animation: none; } .l-onde { display: none; } }
.apercu-wa { padding: 8px 12px; border-radius: 12px; background: var(--ambre-pale); }
.apercu-wa.ok { background: var(--vert-pale); }
.apercu-wa b { color: var(--titre-c); }