:root{
  --gabon-vert:#1B2A4A;
  --gabon-vert-d:#12213D;
  --gabon-jaune:#C9A24B;
  --gabon-bleu:#7A1F2B;
  --gabon-bleu-d:#5C1620;

  --c-grammaire:#1d4ed8;  --bg-grammaire:#eff4ff;
  --c-conjugaison:#15803d; --bg-conjugaison:#eefbf1;
  --c-production:#7c3aed;  --bg-production:#f5f0ff;
  --c-vocabulaire:#8a5a2b; --bg-vocabulaire:#f8f1e9;
  --c-orthographe:#be185d; --bg-orthographe:#fbeef4;

  --encre:#1a1a2e;
  --gris:#6b6450;
  --gris-clair:#f3eedf;
  --bord:#e7dec9;
  --fond:#fbf6e9;
  --carte:#fffdf6;

  --r:14px;
  --ombre:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --ombre-f:0 4px 16px rgba(0,0,0,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--fond);
  color:var(--encre);
  max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
.hidden{display:none !important}

/* ── Barre supérieure ── */
.topbar{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(135deg,var(--gabon-vert) 0%,var(--gabon-bleu) 100%);
  color:#fff;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--ombre-f);
}
.flag{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.flag i{display:block;width:26px;height:5px;border-radius:2px}
.flag i:nth-child(1){background:var(--gabon-vert)}
.flag i:nth-child(2){background:var(--gabon-jaune)}
.flag i:nth-child(3){background:var(--gabon-bleu)}
.flag{padding:5px;background:rgba(255,255,255,.18);border-radius:8px}
.topbar-text{flex:1;min-width:0}
.topbar h1{font-size:18px;font-weight:800;letter-spacing:-.2px}
.topbar p{font-size:12.5px;opacity:.92;margin-top:1px}
.icon-btn{
  background:rgba(255,255,255,.18);border:none;color:#fff;
  width:38px;height:38px;border-radius:10px;font-size:20px;cursor:pointer;
  display:grid;place-items:center;flex-shrink:0;
}
.icon-btn:active{background:rgba(255,255,255,.3)}

/* ── Recherche ── */
.recherche{
  position:sticky;top:0;z-index:25;background:var(--carte);
  padding:12px 16px;border-bottom:1px solid var(--bord);box-shadow:var(--ombre);
}
.recherche input{
  width:100%;padding:12px 14px;border:1.5px solid var(--bord);
  border-radius:10px;font-size:15px;outline:none;
}
.recherche input:focus{border-color:var(--gabon-bleu)}
.resultats{margin-top:8px;max-height:50vh;overflow-y:auto}
.resultat{
  padding:10px 12px;border-radius:9px;cursor:pointer;margin-bottom:6px;
  background:var(--gris-clair);
}
.resultat:active{background:#efe7d2}
.resultat .r-rub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.resultat .r-titre{font-size:14px;font-weight:600;margin:2px 0}
.resultat .r-loc{font-size:12px;color:var(--gris)}

/* ── Vue principale ── */
main{flex:1;padding:16px 16px 90px}

/* Accueil : grille de séquences */
.intro-accueil{margin-bottom:18px}
.intro-accueil h2{font-size:20px;font-weight:800;letter-spacing:-.3px}
.intro-accueil p{color:var(--gris);font-size:14px;margin-top:4px;line-height:1.5}

.seq-grille{display:grid;gap:12px}
.seq-carte{
  background:var(--carte);border-radius:var(--r);padding:16px;
  box-shadow:var(--ombre);cursor:pointer;border:1px solid var(--bord);
  display:flex;align-items:center;gap:14px;transition:transform .12s;
}
.seq-carte:active{transform:scale(.985)}
.seq-num{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;font-size:20px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--gabon-vert),var(--gabon-bleu));
}
.seq-info{flex:1;min-width:0}
.seq-info .seq-label{font-size:11px;font-weight:700;color:var(--gabon-bleu);text-transform:uppercase;letter-spacing:.4px}
.seq-info h3{font-size:15.5px;font-weight:700;line-height:1.3;margin:2px 0}
.seq-info .seq-meta{font-size:12.5px;color:var(--gris)}
.seq-fleche{color:var(--gris);font-size:20px;flex-shrink:0}

/* Fil d'ariane + retour */
.barre-retour{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.btn-retour{
  background:var(--carte);border:1px solid var(--bord);border-radius:10px;
  padding:8px 12px;font-size:14px;cursor:pointer;font-weight:600;color:var(--encre);
  display:flex;align-items:center;gap:6px;
}
.btn-retour:active{background:var(--gris-clair)}
.fil{font-size:13px;color:var(--gris);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Liste des semaines */
.sem-liste{display:grid;gap:10px}
.sem-carte{
  background:var(--carte);border-radius:12px;padding:14px 16px;
  box-shadow:var(--ombre);cursor:pointer;border:1px solid var(--bord);
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;
}
.sem-carte:active{background:var(--gris-clair)}
.sem-pastille{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#fff;background:var(--gabon-vert-d);
}
.sem-carte .sem-t{flex:1}
.sem-carte .sem-t b{font-size:14.5px;display:block}
.sem-carte .sem-t span{font-size:12px;color:var(--gris)}
.sem-puces{display:flex;gap:4px}
.sem-puces i{width:8px;height:8px;border-radius:50%;display:block}

/* Onglets rubriques dans une semaine */
.sem-entete{margin-bottom:14px}
.sem-entete .se-seq{font-size:12px;color:var(--gabon-bleu);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.sem-entete h2{font-size:19px;font-weight:800;margin-top:2px}

.onglets{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
.onglet{
  padding:8px 14px;border-radius:999px;border:1.5px solid var(--bord);
  background:var(--carte);font-size:13px;font-weight:600;cursor:pointer;
  white-space:nowrap;color:var(--gris);
}
.onglet.actif{color:#fff;border-color:transparent}
.onglet.actif[data-r="conjugaison"]{background:var(--c-conjugaison)}
.onglet.actif[data-r="grammaire"]{background:var(--c-grammaire)}
.onglet.actif[data-r="production"]{background:var(--c-production)}
.onglet.actif[data-r="vocabulaire"]{background:var(--c-vocabulaire)}
.onglet.actif[data-r="orthographe"]{background:var(--c-orthographe)}
.onglet.actif[data-r="texte"]{background:var(--gabon-vert-d)}
.onglet.actif[data-r="qcm"]{background:var(--gabon-jaune);color:#1a1a2e}

/* Carte de contenu */
.bloc{
  background:var(--carte);border-radius:var(--r);padding:16px;margin-bottom:14px;
  box-shadow:var(--ombre);border-left:5px solid var(--gris);
}
.bloc[data-r="conjugaison"]{border-left-color:var(--c-conjugaison)}
.bloc[data-r="grammaire"]{border-left-color:var(--c-grammaire)}
.bloc[data-r="production"]{border-left-color:var(--c-production)}
.bloc[data-r="vocabulaire"]{border-left-color:var(--c-vocabulaire)}
.bloc[data-r="orthographe"]{border-left-color:var(--c-orthographe)}
.bloc[data-r="texte"]{border-left-color:var(--gabon-vert-d)}

.tag{
  display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.3px;margin-bottom:8px;
}
.tag[data-r="conjugaison"]{color:var(--c-conjugaison);background:var(--bg-conjugaison)}
.tag[data-r="grammaire"]{color:var(--c-grammaire);background:var(--bg-grammaire)}
.tag[data-r="production"]{color:var(--c-production);background:var(--bg-production)}
.tag[data-r="vocabulaire"]{color:var(--c-vocabulaire);background:var(--bg-vocabulaire)}
.tag[data-r="orthographe"]{color:var(--c-orthographe);background:var(--bg-orthographe)}
.tag[data-r="texte"]{color:var(--gabon-vert-d);background:#eafaf0}

.bloc h3{font-size:16px;font-weight:700;margin-bottom:8px}
.sous-titre{font-size:13px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.3px;margin:14px 0 8px}
.bloc p{font-size:14.5px;line-height:1.6;color:#33384a;margin-bottom:8px}

/* Dialogue du texte support */
.dialog{margin-top:8px}
.replique{display:flex;gap:8px;margin-bottom:6px;font-size:14px;line-height:1.5}
.replique b{color:var(--gabon-bleu-d);flex-shrink:0;min-width:74px}
.replique i{color:#33384a;font-style:italic}

/* Légende sous l'illustration de la situation */
.sit-legende{font-size:12.5px;font-style:italic;color:var(--gris);
  text-align:center;margin:-4px 0 10px}

/* Questions / exercices */
ol.liste{margin:4px 0 0 0;padding-left:0;list-style:none;counter-reset:n}
ol.liste li{
  position:relative;padding:8px 0 8px 30px;font-size:14px;line-height:1.55;
  border-bottom:1px dashed var(--bord);counter-increment:n;
}
ol.liste li:last-child{border-bottom:none}
ol.liste li::before{
  content:counter(n);position:absolute;left:0;top:8px;
  width:21px;height:21px;border-radius:50%;background:var(--gris-clair);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--gris);
}

/* Tableau du retenu */
.tab-wrap{overflow-x:auto;margin:8px 0;border-radius:10px;border:1px solid var(--bord)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
thead th{background:var(--gabon-bleu);color:#fff;padding:9px 11px;text-align:left;font-weight:700}
tbody td{padding:9px 11px;border-top:1px solid var(--bord)}
tbody tr:nth-child(even){background:#fbf6e9}

/* QCM */
.qcm-q{margin-bottom:18px}
.qcm-q .q-txt{font-weight:600;font-size:14.5px;margin-bottom:8px}
.qcm-opts{display:grid;gap:7px}
.opt{
  text-align:left;padding:11px 14px;border-radius:10px;border:1.5px solid var(--bord);
  background:var(--carte);font-size:14.5px;cursor:pointer;color:var(--encre);
}
.opt:active{border-color:var(--gabon-bleu)}
.opt.choisi{border-color:var(--gabon-bleu);background:#f0f6ff}
.opt.juste{border-color:var(--gabon-vert);background:var(--bg-conjugaison);color:var(--gabon-vert-d);font-weight:600}
.opt.faux{border-color:#dc2626;background:#fef2f2;color:#b91c1c}
.opt:disabled{cursor:default}
.qcm-exp{font-size:13px;color:var(--gris);font-style:italic;margin-top:7px;padding-left:2px}

.qcm-actions{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}
.btn{
  border:none;border-radius:10px;padding:12px 22px;font-size:15px;font-weight:700;cursor:pointer;
}
.btn-vert{background:var(--gabon-vert);color:#fff}
.btn-vert:disabled{opacity:.45;cursor:default}
.btn-ghost{background:transparent;border:1.5px solid var(--gabon-bleu);color:var(--gabon-bleu)}
.score-pill{
  background:var(--gabon-jaune);color:#1a1a2e;font-weight:800;font-size:16px;
  padding:10px 18px;border-radius:10px;
}

/* Révision globale + progrès */
.carte-info{
  background:var(--carte);border-radius:var(--r);padding:18px;box-shadow:var(--ombre);
  text-align:center;margin-bottom:14px;border:1px solid var(--bord);
}
.carte-info .grand{font-size:34px;font-weight:800;color:var(--gabon-vert)}
.carte-info p{color:var(--gris);font-size:14px;margin-top:4px}
.choix-revision{display:grid;gap:10px}
.vide{text-align:center;color:var(--gris);padding:40px 20px;font-size:14.5px;line-height:1.6}

/* Barre d'onglets bas */
.tabbar{
  position:sticky;bottom:0;z-index:30;background:var(--carte);
  border-top:1px solid var(--bord);
  display:flex;padding:6px 6px max(6px,env(safe-area-inset-bottom));
}
.tab{
  flex:1;background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;color:var(--gris);padding:6px 0;font-weight:600;
}
.tab span{font-size:11px}
.tab.actif{color:var(--gabon-vert)}
.tab>:first-child{font-size:20px;filter:grayscale(1);opacity:.55}
.tab.actif>:first-child{filter:none;opacity:1}

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

/* ── Bouton niveau dans l'en-tête ── */
.niveau-btn{
  background:rgba(255,255,255,.22);border:none;color:#fff;
  padding:7px 12px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;
  flex-shrink:0;display:flex;align-items:center;gap:3px;
}
.niveau-btn:active{background:rgba(255,255,255,.34)}

/* ── Écran de sélection de niveau ── */
.choix-niveau{padding:8px 4px}
.choix-niveau .accroche{margin-bottom:22px;text-align:center}
.choix-niveau .accroche h2{font-size:23px;font-weight:800;letter-spacing:-.3px}
.choix-niveau .accroche p{color:var(--gris);font-size:14.5px;margin-top:6px;line-height:1.5}
.niv-grille{display:grid;gap:14px}
.niv-carte{
  position:relative;overflow:hidden;
  background:var(--carte);border:1px solid var(--bord);border-radius:18px;
  padding:22px 20px;cursor:pointer;box-shadow:var(--ombre);
  display:flex;align-items:center;gap:18px;transition:transform .12s;
}
.niv-carte:active{transform:scale(.98)}
.niv-badge{
  width:64px;height:64px;border-radius:16px;flex-shrink:0;
  display:grid;place-items:center;font-size:26px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--gabon-vert),var(--gabon-bleu));
}
.niv-carte .niv-info{flex:1}
.niv-carte .niv-info h3{font-size:19px;font-weight:800}
.niv-carte .niv-info p{font-size:13.5px;color:var(--gris);margin-top:3px}
.niv-carte .niv-fleche{font-size:24px;color:var(--gris)}
.niv-bandeau{position:absolute;left:0;top:0;bottom:0;width:6px}
.niv-bandeau.b6{background:var(--gabon-vert)}
.niv-bandeau.b5{background:var(--gabon-bleu)}
.niv-bandeau.b4{background:var(--gabon-jaune)}

/* feuille de choix rapide de niveau (depuis le bouton) */
.feuille-fond{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.feuille{background:var(--carte);width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:18px 16px max(18px,env(safe-area-inset-bottom))}
.feuille h4{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--gris);margin-bottom:12px;text-align:center}
.feuille .niv-opt{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;cursor:pointer;border:1.5px solid var(--bord);margin-bottom:8px}
.feuille .niv-opt.courant{border-color:var(--gabon-vert);background:var(--bg-conjugaison)}
.feuille .niv-opt b{font-size:16px}
.feuille .niv-opt span{font-size:13px;color:var(--gris);margin-left:auto}

/* ── Onglets de niveau (présentation A) ── */
.niv-onglets{display:flex;gap:8px;margin-bottom:18px}
.niv-onglet{
  flex:1;text-align:center;padding:11px 6px;border-radius:13px;
  font-weight:800;font-size:17px;cursor:pointer;
  border:2px solid var(--bord);background:var(--carte);color:var(--gris);
  transition:transform .1s;
}
.niv-onglet:active{transform:scale(.97)}
.niv-onglet.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--gabon-vert),var(--gabon-bleu))}
.niv-onglet small{display:block;font-size:10.5px;font-weight:600;opacity:.85;margin-top:2px}
.niv-onglet.bientot{opacity:.5;cursor:default}

/* ── En-tête de leçon coloré (change à chaque rubrique) ── */
.lecon-tete{
  border-radius:16px;padding:18px 18px 16px;margin-bottom:16px;color:#fff;
  box-shadow:var(--ombre-f);position:relative;overflow:hidden;
}
.lecon-tete[data-r="conjugaison"]{background:linear-gradient(135deg,#15803d,#0c5a2b)}
.lecon-tete[data-r="grammaire"]{background:linear-gradient(135deg,#1d4ed8,#143a9e)}
.lecon-tete[data-r="production"]{background:linear-gradient(135deg,#7c3aed,#591bb0)}
.lecon-tete[data-r="vocabulaire"]{background:linear-gradient(135deg,#8a5a2b,#653f1c)}
.lecon-tete[data-r="orthographe"]{background:linear-gradient(135deg,#be185d,#86124a)}
.lecon-tete .lt-rub{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;background:rgba(255,255,255,.22);
  padding:4px 11px;border-radius:999px;margin-bottom:10px;
}
.lecon-tete .lt-titre{font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.3px}
.lecon-tete .lt-obj{
  margin-top:12px;background:rgba(255,255,255,.16);border-radius:11px;
  padding:11px 13px;display:flex;gap:10px;align-items:flex-start;
}
.lecon-tete .lt-obj .lt-ico{font-size:18px;flex-shrink:0;line-height:1.2}
.lecon-tete .lt-obj .lt-txt b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;opacity:.92;margin-bottom:2px}
.lecon-tete .lt-obj .lt-txt span{font-size:14.5px;font-weight:600;line-height:1.35}
.lecon-tete .lt-capsule{
  margin-top:10px;background:rgba(255,255,255,.94);color:#1a1a1a;text-decoration:none;
  border-radius:11px;padding:11px 13px;display:flex;gap:10px;align-items:center;
  font-size:14.5px;font-weight:700;transition:transform .15s, box-shadow .15s;
}
.lecon-tete .lt-capsule:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.lecon-tete .lt-capsule .lt-ico{font-size:18px}

/* ════════════════════════════════════════════════════════════
   GRAND ÉCRAN (tablette / ordinateur) — mise en page adaptative
   Le mobile (< 760px) n'est pas affecté.
   ════════════════════════════════════════════════════════════ */
@media (min-width:760px){
  body{max-width:1040px}

  /* En-tête plus aéré */
  .topbar{padding:18px 28px}
  .topbar h1{font-size:22px}
  .topbar p{font-size:13.5px}

  main{padding:26px 28px 110px}

  /* Onglets de niveau : centrés, taille raisonnable */
  .niv-onglets{max-width:560px}

  /* Séquences en grille multi-colonnes */
  .seq-grille{grid-template-columns:repeat(2,1fr);gap:16px}
  .choix-revision{grid-template-columns:repeat(2,1fr);gap:16px}

  /* Liste des semaines en 2 colonnes */
  .sem-liste{grid-template-columns:repeat(2,1fr);gap:14px}

  /* Intro et titres un peu plus grands */
  .intro-accueil h2{font-size:24px}
  .intro-accueil p{font-size:15.5px}

  /* ── Vue d'une semaine : rubriques en 2 zones ──
     onglets en ligne (déjà le cas), contenu plus large et lisible */
  #contenu-onglet{max-width:820px}

  /* En-tête de leçon agrandi (idéal pour projeter en classe) */
  .lecon-tete{padding:26px 28px 24px}
  .lecon-tete .lt-titre{font-size:30px}
  .lecon-tete .lt-rub{font-size:13px}
  .lecon-tete .lt-obj .lt-txt span{font-size:16.5px}
  .lecon-tete .lt-obj .lt-txt b{font-size:12.5px}

  /* Texte support et contenu : caractères plus grands pour la lecture/projection */
  .bloc{padding:22px 24px}
  .bloc h3{font-size:19px}
  .bloc p{font-size:16px;line-height:1.7}
  .replique{font-size:15.5px}
  .replique b{min-width:90px}
  ol.liste li{font-size:15.5px;padding-left:34px}
  table{font-size:15px}
  thead th,tbody td{padding:11px 14px}

  /* QCM plus confortable */
  .opt{font-size:16px;padding:13px 16px}
  .qcm-q .q-txt{font-size:16px}

  /* Barre de navigation : largeur limitée, centrée, façon barre d'onglets */
  .tabbar{max-width:1040px;justify-content:center;gap:60px}
  .tab{flex:0 0 auto;flex-direction:row;gap:8px;padding:10px 18px}
  .tab>:first-child{font-size:18px}
  .tab span{font-size:14px}

  /* Recherche : panneau plus large */
  .recherche{padding:14px 28px}
  .resultats{max-height:60vh}
}

/* Très grand écran : on garde une largeur de lecture confortable */
@media (min-width:1200px){
  .seq-grille,.choix-revision{grid-template-columns:repeat(3,1fr)}
}

/* ── Bandeau d'accroche « cahier complet » (vitrine) ── */
.promo{
  border-radius:16px;padding:20px;margin-bottom:14px;
  border:2px dashed var(--bord);background:var(--carte);
  display:flex;gap:14px;align-items:flex-start;
  box-shadow:var(--ombre);
}
.promo[data-r="conjugaison"]{border-color:#15803d55;background:linear-gradient(160deg,#eefbf1,var(--carte))}
.promo[data-r="grammaire"]{border-color:#1d4ed855;background:linear-gradient(160deg,#eff4ff,var(--carte))}
.promo[data-r="production"]{border-color:#7c3aed55;background:linear-gradient(160deg,#f5f0ff,var(--carte))}
.promo[data-r="vocabulaire"]{border-color:#8a5a2b55;background:linear-gradient(160deg,#f8f1e9,var(--carte))}
.promo[data-r="orthographe"]{border-color:#be185d55;background:linear-gradient(160deg,#fbeef4,var(--carte))}
.promo-ico{font-size:30px;flex-shrink:0;line-height:1.1}
.promo-corps{flex:1;min-width:0}
.promo-corps h4{font-size:16px;font-weight:800;color:var(--encre);margin-bottom:6px;line-height:1.3}
.promo-corps p{font-size:14px;line-height:1.55;color:#4a4a52;margin-bottom:14px}
.promo-btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:14.5px;
  color:#fff;padding:11px 20px;border-radius:11px;
  background:linear-gradient(135deg,var(--gabon-vert),var(--gabon-bleu));
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.promo-btn:active{transform:scale(.98)}
@media (min-width:760px){
  .promo{padding:26px}
  .promo-corps h4{font-size:18px}
  .promo-corps p{font-size:15px}
}

/* ── Illustration de la situation d'apprentissage ── */
.sit-img{
  width:100%;height:auto;display:block;border-radius:12px;
  margin:4px 0 12px;box-shadow:var(--ombre);
  background:var(--gris-clair);
}
@media (min-width:760px){
  .sit-img{max-width:520px}
}

/* ── Filigrane de couverture en fond de page ── */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(251,246,233,0.82), rgba(251,246,233,0.82)),
    url("images/couverture-fond.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
  pointer-events:none;
}
/* le body lui-même devient transparent pour laisser voir le filigrane */
body{background:transparent}
/* sur grand écran, l'image reste centrée et nette */
@media (min-width:760px){
  body::before{background-position:center top, center top}
}

/* ── Écran d'inscription ── */
.inscription-fond{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:linear-gradient(135deg, var(--gabon-vert), var(--gabon-bleu));
  overflow-y:auto;
}
.inscription-carte{
  background:var(--carte);border-radius:20px;padding:26px 22px;
  width:100%;max-width:440px;box-shadow:0 12px 40px rgba(0,0,0,.25);
  margin:auto;
}
.insc-flag{width:fit-content;margin:0 auto 16px;background:var(--gris-clair);padding:6px;border-radius:9px;flex-direction:column;gap:3px}
.insc-flag i{width:34px;height:6px;border-radius:3px}
.insc-flag i:nth-child(1){background:var(--gabon-vert)}
.insc-flag i:nth-child(2){background:var(--gabon-jaune)}
.insc-flag i:nth-child(3){background:var(--gabon-bleu)}
.inscription-carte h2{font-size:21px;font-weight:800;text-align:center;color:var(--encre);line-height:1.25}
.insc-sous{text-align:center;color:var(--gris);font-size:14px;margin:8px 0 20px;line-height:1.5}
.insc-label{display:block;font-size:13px;font-weight:700;color:var(--encre);margin-bottom:13px}
.insc-label input,.insc-label select{
  display:block;width:100%;margin-top:5px;padding:12px 13px;
  border:1.5px solid var(--bord);border-radius:11px;font-size:15px;
  font-family:inherit;background:#fff;color:var(--encre);box-sizing:border-box;
}
.insc-label input:focus,.insc-label select:focus{outline:none;border-color:var(--gabon-vert)}
.insc-btn{
  width:100%;margin-top:8px;padding:14px;border:none;border-radius:12px;cursor:pointer;
  font-size:16px;font-weight:800;color:#fff;
  background:linear-gradient(135deg, var(--gabon-vert), var(--gabon-bleu));
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.insc-btn:active{transform:scale(.99)}
.cache{position:absolute;left:-9999px}

/* ═══════════════ PAGE VITRINE (accueil) ═══════════════ */
.vitrine{max-width:1100px;margin:0 auto;padding-bottom:40px}

/* — Hero — */
.v-hero{
  background:linear-gradient(135deg, #e8f4ef, #eaf1fb);
  border-radius:0 0 26px 26px;
  padding:48px 24px 54px;text-align:center;position:relative;overflow:hidden;
}
.v-hero-txt h1{font-size:34px;font-weight:800;color:var(--gabon-bleu);letter-spacing:-.5px}
.v-hero-txt h1 span{color:#e08a2b}
.v-hero-txt p{font-size:16px;color:var(--gris);margin:10px 0 22px;font-weight:500}
.v-hero-btn{
  background:var(--gabon-bleu);color:#fff;border:none;cursor:pointer;
  padding:14px 26px;border-radius:30px;font-size:15.5px;font-weight:700;
  box-shadow:0 6px 18px rgba(58,117,196,.35);
}
.v-hero-btn:active{transform:scale(.98)}

/* — Collection — */
.v-collection{padding:40px 20px 20px;text-align:center}
.v-collection h2{font-size:25px;font-weight:800;color:var(--encre)}
.v-soustitre{color:var(--gris);font-size:14.5px;margin-top:4px;margin-bottom:26px}

.v-nav{
  background:#fff;border-bottom:1px solid #EAEDF3;
  display:flex;padding:0 16px;position:relative;z-index:37;
}
.v-nav-item{
  font-family:inherit;font-size:14px;font-weight:700;color:var(--encre);
  background:none;border:none;border-bottom:3px solid transparent;
  padding:14px 6px;display:flex;align-items:center;gap:7px;cursor:pointer;
}
.v-nav-item:hover{color:#0d7a4c}
.v-nav-item.actif{color:#0d7a4c;border-bottom-color:#0d7a4c}
.v-nav-ico{font-size:15px}

.panneau-progressions-fond{
  position:fixed;inset:0;background:rgba(20,25,20,.45);z-index:35;
}
.panneau-progressions{
  position:relative;z-index:36;background:#fbf9f4;
  border-bottom:1px solid #EAEDF3;box-shadow:0 12px 24px rgba(0,0,0,.10);
  padding:18px 0 10px;max-height:78vh;overflow-y:auto;
}
.panneau-progressions-tete{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:0 20px 12px;gap:12px;
}
.panneau-progressions-tete h2{font-size:19px;font-weight:800;color:var(--encre)}
.panneau-fermer{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;border:none;
  background:#EAEDF3;color:var(--encre);font-size:15px;cursor:pointer;
}
.panneau-fermer:hover{background:#dfe5df}

.v-progressions{padding:20px 0 40px;text-align:center}
.v-progressions h2{font-size:25px;font-weight:800;color:var(--encre)}
#v-bandes-progressions{display:flex;flex-direction:column;gap:22px;margin-top:10px}
.vp-bande{text-align:left}
.vp-bande-tete{display:flex;align-items:center;gap:10px;padding:0 20px;margin-bottom:8px}
.vp-niv-pastille{font-weight:800;font-size:15px;color:#fff;padding:4px 14px;border-radius:20px}
.vp-bande-compte{font-size:12.5px;color:var(--gris)}
.vp-scroll{
  display:flex;gap:12px;overflow-x:auto;padding:4px 20px 14px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.vp-scroll::-webkit-scrollbar{height:6px}
.vp-scroll::-webkit-scrollbar-thumb{background:#dfe5df;border-radius:10px}
.vp-carte{
  flex:0 0 220px;scroll-snap-align:start;background:#fff;
  border:1px solid #EAEDF3;border-radius:12px;padding:14px 16px;
}
.vp-carte-lien{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.vp-carte-lien:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);border-color:#d5dbd6}
.vp-carte-entete{font-size:11px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.3px}
.vp-carte-titre{font-size:14.5px;font-weight:700;color:var(--encre);margin:4px 0 10px;line-height:1.3;min-height:38px}
.vp-carte-tags{display:flex;flex-direction:column;gap:5px}
.vp-tag{font-size:11.5px;color:#3b4a3f;background:#F2F6F2;border-radius:6px;padding:4px 8px;line-height:1.4;text-align:left}
.vp-tag b{color:#0d7a4c}
button.vp-tag{border:none;width:100%;margin:0;font-family:inherit;cursor:pointer;position:relative;-webkit-appearance:none}
button.vp-tag-lien{transition:background .15s}
button.vp-tag-lien:hover{background:#E2EEE3}
button.vp-tag-lien::after{content:"→";float:right;opacity:.5;font-weight:700}
/* Une couleur par niveau, dans l'ordre où les bandes sont générées (6e,5e,4e,3e) */
#v-bandes-progressions .vp-bande:nth-child(1) .vp-niv-pastille{background:#0d7a4c}
#v-bandes-progressions .vp-bande:nth-child(2) .vp-niv-pastille{background:#215fa3}
#v-bandes-progressions .vp-bande:nth-child(3) .vp-niv-pastille{background:#c25f18}
#v-bandes-progressions .vp-bande:nth-child(4) .vp-niv-pastille{background:#5f3b96}
#v-bandes-progressions .vp-bande:nth-child(1) .vp-tag b{color:#0d7a4c}
#v-bandes-progressions .vp-bande:nth-child(2) .vp-tag b{color:#215fa3}
#v-bandes-progressions .vp-bande:nth-child(3) .vp-tag b{color:#c25f18}
#v-bandes-progressions .vp-bande:nth-child(4) .vp-tag b{color:#5f3b96}

.v-grille{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  max-width:820px;margin:0 auto;
}
@media(min-width:820px){ .v-grille{grid-template-columns:repeat(4,1fr)} }

.v-carte{
  position:relative;border-radius:18px;padding:22px 16px 18px;cursor:pointer;
  color:#fff;text-align:left;overflow:hidden;min-height:190px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 6px 18px rgba(0,0,0,.14);transition:transform .12s;
}
.v-carte:active{transform:scale(.98)}
.v-carte[data-niv="6e"]{background:linear-gradient(160deg,#1aa06a,#0d7a4c)}
.v-carte[data-niv="5e"]{background:linear-gradient(160deg,#3a86d4,#215fa3)}
.v-carte[data-niv="4e"]{background:linear-gradient(160deg,#e8823a,#c25f18)}
.v-carte[data-niv="3e"]{background:linear-gradient(160deg,#8f5fc7,#5f3b96)}
.v-carte .v-niv-num{font-size:44px;font-weight:800;line-height:1}
.v-carte .v-niv-num sup{font-size:20px}
.v-carte .v-niv-desc{font-size:13px;opacity:.95;margin:6px 0 12px;font-weight:500}
.v-carte .v-niv-cta{
  background:rgba(255,255,255,.22);border-radius:9px;padding:9px;text-align:center;
  font-size:13.5px;font-weight:700;
}
.v-carte.bientot{opacity:.92}
.v-carte.bientot .v-niv-cta{background:rgba(255,255,255,.14);font-style:italic}
.v-carte .v-badge-soon{
  position:absolute;top:12px;right:12px;background:rgba(0,0,0,.25);
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px;
}

/* — Pourquoi — */
.v-pourquoi{padding:36px 20px 20px;text-align:center}
.v-pourquoi h2{font-size:22px;font-weight:800;color:var(--encre);margin-bottom:24px}
.v-args{display:grid;grid-template-columns:1fr;gap:14px;max-width:820px;margin:0 auto}
@media(min-width:680px){ .v-args{grid-template-columns:repeat(2,1fr)} }
.v-arg{
  background:var(--carte);border:1px solid var(--bord);border-radius:14px;
  padding:18px;text-align:left;box-shadow:var(--ombre);
}
.v-arg-ico{font-size:26px;display:block;margin-bottom:8px}
.v-arg b{font-size:15px;color:var(--encre);display:block;margin-bottom:4px}
.v-arg p{font-size:13.5px;color:var(--gris);line-height:1.5}

/* — Pied — */
.v-pied{
  margin:34px 16px 0;background:#0f5a52;color:#dbeeea;border-radius:18px;
  padding:26px 22px;display:grid;grid-template-columns:1fr;gap:22px;
}
@media(min-width:680px){ .v-pied{grid-template-columns:repeat(3,1fr)} }
.v-pied-col{display:flex;flex-direction:column;gap:7px}
.v-pied-col b{color:#fff;font-size:15px;margin-bottom:3px}
.v-pied-col a{color:#a9d9d0;text-decoration:none;font-size:13.5px}
.v-pied-col a:active{color:#fff}
.v-pied-col span{font-size:13px;opacity:.85}
.v-pied-flag{flex-direction:column;gap:3px;width:fit-content;background:rgba(255,255,255,.15);padding:5px;border-radius:7px;margin-bottom:4px}
.v-pied-flag i{width:28px;height:5px;border-radius:3px}
.v-pied-flag i:nth-child(1){background:var(--gabon-vert)}
.v-pied-flag i:nth-child(2){background:var(--gabon-jaune)}
.v-pied-flag i:nth-child(3){background:var(--gabon-bleu)}
.v-pied-site{color:#fff;font-weight:700}

/* ── Fenêtre de code d'accès ── */
.code-fond{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.code-carte{
  background:var(--carte);border-radius:18px;padding:24px 20px;
  width:100%;max-width:400px;box-shadow:0 14px 44px rgba(0,0,0,.3);
}
.code-carte h3{font-size:18px;font-weight:800;color:var(--encre);text-align:center}
.code-carte p{font-size:13.5px;color:var(--gris);text-align:center;margin:8px 0 16px;line-height:1.5}
.code-carte input{
  display:block;width:100%;box-sizing:border-box;padding:13px;text-align:center;
  border:1.5px solid var(--bord);border-radius:11px;font-size:17px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;background:#fff;color:var(--encre);
}
.code-carte input:focus{outline:none;border-color:var(--gabon-vert)}
.code-erreur{color:#c02626;font-size:13px;text-align:center;margin-top:9px;font-weight:600}
.code-actions{display:flex;gap:10px;margin-top:16px}
.code-btn,.code-btn-ghost{
  flex:1;padding:12px;border-radius:11px;font-size:15px;font-weight:700;cursor:pointer;border:none;
}
.code-btn{color:#fff;background:linear-gradient(135deg,var(--gabon-vert),var(--gabon-bleu))}
.code-btn-ghost{background:var(--gris-clair);color:var(--encre)}
.code-aide{margin-top:14px !important;font-size:12.5px !important}
.code-aide a{color:var(--gabon-bleu);font-weight:700}

/* ============================================================
   THÈME PAR NIVEAU — les couleurs de la vitrine suivent
   l'utilisateur à l'intérieur de chaque module.
   6e = vert · 5e = bleu · 4e = orange · 3e = violet
   ============================================================ */
body[data-niveau="6e"]{--niv-a:#1aa06a;--niv-b:#0d7a4c;--niv-fonce:#0d7a4c}
body[data-niveau="5e"]{--niv-a:#3a86d4;--niv-b:#215fa3;--niv-fonce:#215fa3}
body[data-niveau="4e"]{--niv-a:#e8823a;--niv-b:#c25f18;--niv-fonce:#c25f18}
body[data-niveau="3e"]{--niv-a:#8f5fc7;--niv-b:#5f3b96;--niv-fonce:#5f3b96}

/* Bandeau supérieur aux couleurs du niveau actif */
body[data-niveau] .topbar{background:linear-gradient(135deg,var(--niv-a) 0%,var(--niv-b) 100%)}

/* Accueil du module : pastilles de séquences et libellés */
body[data-niveau] .seq-num{background:linear-gradient(135deg,var(--niv-a),var(--niv-b))}
body[data-niveau] .seq-info .seq-label{color:var(--niv-fonce)}

/* Liste des semaines : pastilles numérotées */
body[data-niveau] .sem-pastille{background:var(--niv-fonce)}

/* Onglet du niveau actif dans le sélecteur de niveaux */
body[data-niveau] .niv-onglet.on{background:linear-gradient(135deg,var(--niv-a),var(--niv-b))}

/* Chaque onglet de niveau porte discrètement sa couleur d'identité */
.niv-onglet[data-niv="6e"]{border-bottom:3px solid #0d7a4c}
.niv-onglet[data-niv="5e"]{border-bottom:3px solid #215fa3}
.niv-onglet[data-niv="4e"]{border-bottom:3px solid #c25f18}
.niv-onglet[data-niv="3e"]{border-bottom:3px solid #5f3b96}

/* ============================================================
   PROFIL ÉLÈVE / ENSEIGNANT — sélecteur et mode interactif
   ============================================================ */
.profil-fond{
  position:fixed;inset:0;background:rgba(16,20,15,.55);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.profil-carte{
  background:#fff;border-radius:16px;padding:26px 22px;max-width:360px;width:100%;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.profil-carte h3{margin:0 0 4px;font-size:18px}
.profil-carte>p{margin:0 0 18px;font-size:13px;color:#6b6450}
.profil-choix{display:flex;gap:10px}
.profil-btn{
  flex:1;padding:18px 8px;border:2px solid #e7dec9;border-radius:12px;background:#fff;
  cursor:pointer;font-family:inherit;text-align:center;
}
.profil-btn:hover{border-color:var(--gabon-bleu,#7A1F2B)}
.profil-btn .pf-emoji{font-size:30px;display:block;margin-bottom:6px}
.profil-btn b{display:block;font-size:14px;margin-bottom:2px}
.profil-btn span:not(.pf-emoji){font-size:11px;color:#6b6450}

/* Mode interactif élève : questions et exercices */
.consigne-eleve{font-size:12.5px;color:#6b6450;font-style:italic;margin:4px 0 12px}
.q-ouverte{margin-bottom:14px}
.q-enonce{font-weight:600;font-size:14px;margin:0 0 6px;line-height:1.5}
.q-zone{
  width:100%;min-height:52px;padding:9px 11px;border:1px solid #e7dec9;border-radius:8px;
  font:inherit;font-size:13.5px;resize:vertical;background:#fff;box-sizing:border-box;
}
.q-zone:disabled{background:#f5f2e8;color:#555}
.bloc-validation{margin-top:14px;padding-top:14px;border-top:2px solid #e7dec9;text-align:center}
.q-progression{font-size:12.5px;color:#6b6450;margin:0 0 10px}
.q-btn-corriger:disabled{background:#c9d6cc;color:#7a8a7d;cursor:not-allowed}
.q-corrige{margin-top:16px;padding-top:14px;border-top:1px dashed #e7dec9}
.q-corrige.hidden{display:none}
.rappel-corrige{font-size:13.5px;color:#3a3a3a;line-height:1.5;background:#F7F0E1;
  padding:10px 14px;border-radius:0 8px 8px 0;border-left:4px solid #C9A24B}

/* Révélation individuelle par question (rappel de la leçon) */
.q-btn-reveler{
  margin-top:6px;padding:6px 14px;border:1px solid #C9A24B;background:#fff;color:#8a6c2f;
  border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
}
.q-btn-reveler:disabled{background:#F7F0E1;color:#8a6c2f;cursor:default;border-color:#e0cfa0}
.q-rappel{margin-top:8px;padding:9px 12px;background:#F7F0E1;border-left:4px solid #C9A24B;
  border-radius:0 8px 8px 0;font-size:13px;line-height:1.5}
.q-rappel.hidden{display:none}
.q-rappel p{margin:0 0 6px}
.q-rappel table{width:100%;border-collapse:collapse;margin:6px 0;font-size:12px}
.q-rappel th,.q-rappel td{border:1px solid #e6d9b8;padding:5px 7px;text-align:left}
.q-rappel th{background:#F0E4C8}

.liste-corrige{background:#F7F0E1;border-left:4px solid #C9A24B;border-radius:0 8px 8px 0;padding:12px 16px 12px 34px;margin:6px 0 16px}
.liste-corrige li{margin-bottom:8px;line-height:1.5}
.liste-corrige b{color:#8a6c2f}

.q-message{margin:8px 0 0;font-size:13px;min-height:1px}
.q-message.avertissement{color:#8a5a00;background:#fff8e1;border:1px solid #f0d68a;
  border-radius:8px;padding:8px 12px;display:inline-block}
.q-message.erreur-tech{color:#9b2c2c;background:#fdecec;border:1px solid #f3c0c0;
  border-radius:8px;padding:8px 12px;display:inline-block;font-family:monospace;font-size:12px}

.q-message.envoi-confirme{color:#1B2A4A;background:#EAEDF3;border:1px solid #c7d0dc;
  border-radius:8px;padding:8px 12px;display:inline-block;font-weight:600}

/* ── Résumé de cours à trous ("Ce que j'ai retenu" version élève) ───────── */
.retenu-trous{
  font-size:14.5px;line-height:2.1;color:#33384a;margin-bottom:8px;
}
.trou{
  font-family:inherit;font-size:14px;font-weight:600;
  color:#1B2A4A;background:#fff;
  border:none;border-bottom:2px solid #C9A24B;
  border-radius:4px 4px 0 0;padding:2px 6px;margin:0 2px;
  vertical-align:baseline;box-sizing:border-box;
}
.trou:focus{
  outline:none;background:#F7F0E1;border-bottom-color:#1B2A4A;
}
.trou-libre::placeholder{color:#b9ac8a;font-weight:400}
.trou-choix{
  cursor:pointer;padding-right:2px;
  max-width:100%;
}
/* Résultat de la correction */
.trou-juste{
  color:#1f5c3a;background:#EAF3ED;border-bottom-color:#4A6B4F;
}
.trou-faux{
  color:#9b2c2c;background:#FDECEC;border-bottom-color:#A13F3F;
}
.trou-solution{
  color:#1f5c3a;font-weight:700;font-size:13.5px;white-space:nowrap;
}
.dictee-niveaux{display:flex;gap:8px;margin:8px 0 14px}
.dictee-niv-btn{
  font-family:inherit;font-size:13.5px;font-weight:600;color:#5c6960;
  background:#fff;border:1px solid #dfe5df;border-radius:20px;
  padding:6px 16px;cursor:pointer;transition:background .15s,color .15s;
}
.dictee-niv-btn:hover{background:#F7F0E1}
.dictee-niv-btn.actif{background:#1B2A4A;color:#fff;border-color:#1B2A4A}
.dictee-texte{line-height:1.85;font-size:15.5px}

/* ── Section vitrine : Cours particuliers (suivi scolaire payant) ── */
.soutien{background:var(--carte)}
.soutien-form{max-width:520px;margin:22px auto 0;text-align:left}
.soutien-bloc{
  border:1px solid var(--bord);border-radius:var(--r);padding:16px;
  margin-bottom:14px;background:#fff;
}
.soutien-bloc legend{
  font-weight:800;color:var(--gabon-vert);font-size:13.5px;padding:0 6px;
}
.soutien-label{display:block;font-size:13px;font-weight:700;color:var(--encre);margin-bottom:12px}
.soutien-label:last-child{margin-bottom:0}
.soutien-label input,.soutien-label select,.soutien-label textarea{
  width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--bord);
  border-radius:10px;font-size:14px;font-family:inherit;background:var(--fond);color:var(--encre);
}
.soutien-label textarea{resize:vertical}
.soutien-label input:focus,.soutien-label select:focus,.soutien-label textarea:focus{
  outline:none;border-color:var(--gabon-vert);
}
.soutien-jours{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.soutien-jours label{
  display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  background:var(--fond);border:1px solid var(--bord);border-radius:20px;padding:6px 12px;
}
.soutien-jours input{width:auto;margin:0}
.soutien-note{font-size:12.5px;color:var(--gris);line-height:1.5;margin:6px 0 16px}
.soutien-submit{width:100%;border:none;cursor:pointer}
.soutien-message{
  max-width:520px;margin:0 auto 16px;padding:12px 16px;border-radius:10px;
  font-size:13.5px;font-weight:600;text-align:center;
}
.soutien-message.soutien-ok{background:#e3f5ea;color:#1f5c3a}
.soutien-message.soutien-erreur{background:#fdecec;color:#9b2c2c}
.soutien-avertissement{
  max-width:520px;margin:0 auto 16px;padding:10px 14px;border-radius:10px;
  background:#fdf6e3;color:#8a5a0b;font-size:12.5px;line-height:1.5;border:1px solid #f0dca0;
}


/* ═══════════════════════════════════════════════════════════
   LOGO TOPBAR + DRAWER — v8
   ═══════════════════════════════════════════════════════════ */

/* ── Logo dans la topbar ─────────────────────────────────── */
.topbar-logo {
  width: 36px; height: 36px;
  border-radius: 8px; object-fit: contain;
  flex-shrink: 0;
  background: rgba(255,255,255,.9);
  padding: 2px;
}

/* ── Onglets masqués visuellement (mais actifs pour app.js) ─ */
.tab-masque {
  display: none !important;
}

/* ── Bouton hamburger dans la tabbar ─────────────────────── */
.tab-hamburger {
  background: none; border: none;
  font-size: 1.3rem; line-height: 1;
  padding: 4px 10px; cursor: pointer;
  color: inherit; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.85;
}
.tab-hamburger:hover { opacity: 1; }

/* ── Overlay ──────────────────────────────────────────────── */
.apc-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1100;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.apc-overlay.ouvert { opacity: 1; pointer-events: auto; }

/* ── Drawer ───────────────────────────────────────────────── */
.apc-drawer {
  position: fixed; top: 0; left: 0;
  height: 100%; width: min(300px, 85vw);
  background: #fff; z-index: 1200;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}
.apc-drawer.ouvert { transform: translateX(0); }

.apc-drawer-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: #1A5276;
  flex-shrink: 0;
}
.apc-drawer-logo {
  width: 36px; height: 36px;
  border-radius: 8px; object-fit: contain;
  background: rgba(255,255,255,.9); padding: 2px;
  flex-shrink: 0;
}
.apc-drawer-titre { flex: 1; font-weight: 700; font-size: .95rem; color: #fff; }
.apc-drawer-close {
  background: none; border: none; color: #fff;
  font-size: 1.2rem; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  transition: background .15s; line-height: 1;
}
.apc-drawer-close:hover { background: rgba(255,255,255,.2); }

.apc-drawer-section {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #94a3b8; padding: 14px 18px 4px;
}
.apc-drawer-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 18px;
  background: none; border: none;
  border-bottom: 1px solid #f1f5f9;
  text-align: left; font-size: .93rem;
  color: #1c2833; cursor: pointer;
  transition: background .15s;
}
.apc-drawer-item:hover { background: #f8fafc; }
.apc-drawer-item span { flex: 1; }