:root{
  --bg:#0f1115; --panel:#171a21; --text:#e6e6e6; --muted:#9aa0a6;
  --accent:#4fc3f7; --danger:#ef5350; --ok:#66bb6a; --border:#272b33; --grid:#1a1f27;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  ); color:var(--text)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
   1px, transparent 1px),
                   linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:40px 40px; opacity:.3}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
nav{border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;padding:10px 16px;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;line-height:1.1}
.brand .title{display:flex;flex-direction:column}
.brand .title span:first-child{font-size:16px}
.brand .title span:last-child{font-size:14px;opacity:.85}
.brand .pi{width:22px;height:22px;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:6px;color:var(--accent)}
.menu{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.badge{color:#a9d5ff;padding:2px 6px;border-radius:6px;font-size:12px}
.wrap{max-width:1100px;margin:24px auto;padding:0 16px}
.panel{border:1px solid var(--border);border-radius:12px;padding:18px}
h1,h2,h3{margin:8px 0 12px}
input,select,button{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;color:var(--text);outline:none}
input:focus,select:focus{border-color:#2d95d6;box-shadow:0 0 0 3px rgba(79,195,247,.15)}
button{cursor:pointer;border:none}
button:hover{filter:brightness(1.05)}
.btn-secondary{border-collapse:collapse;margin-top:10px}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
.grid{display:grid;gap:14px} .grid-2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.row{display:flex;align-items:center;gap:8px}

/* banner and overlay */
.banner{position:relative;height:230px;border-bottom:1px solid var(--border)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;,rgba(0,0,0,.55))}
.banner .banner-text{position:relative;z-index:1;height:100%;display:flex;align-items:center;max-width:1100px;margin:0 auto;padding:0 16px}
/* title card */
.banner-card{display:inline-block;border:1px solid var(--border);border-radius:18px;padding:16px 18px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.banner-card h1{margin:0 0 4px 0;font-size:28px}
.banner-card p{margin:0;color:#cfd8dc}

/* user dropdown */
.user{position:relative}
.user-btn{display:flex;align-items:center;gap:8px}
.caret{display:inline-block;transform:translateY(1px)}
.dropdown{position:absolute;right:0;top:36px;min-width:180px;border:1px solid var(--border);border-radius:10px;padding:8px;display:none}
.user.open .dropdown{display:block}
.dropdown a{display:block;padding:8px;border-radius:8px} .dropdown a:hover{font-size:.95rem}
.err{color:var(--danger)} .ok{color:var(--ok)}
.eye{width:20px;height:20px;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:6px;cursor:pointer;margin-left:8px}
footer{opacity:.6;text-align:center;padding:20px}
.hidden{display:none}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
.quick-grid a{display:block;padding:14px;border:1px solid var(--border);border-radius:12px;text-decoration:none}


/* Admin chapters UI compact */
.chapters{list-style:none;padding-left:0}
.chapters li{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}
.chapters li a{flex:1 1 auto;text-decoration:none}
.admin-actions.compact{display:flex;gap:.35rem;align-items:center}
.admin-actions.compact .toggle{display:flex;align-items:center;gap:.25rem;font-size:.85rem}
.admin-actions.compact button{font-size:.75rem;padding:.2rem .45rem;border:1px solid #ccc;border-radius:.4rem;cursor:pointer}
.admin-actions.compact button:hover{opacity:.7;margin-right:.1rem}

/* ensure small toggles */
.toggle input{transform:scale(.9)}


/* NAV droite */
nav.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 1rem;
}
nav.top .brand { display:flex; align-items:center; gap:.6rem; }
nav.top .brand .pi { font-size:1.6rem; color: var(--accent); font-weight:700; }
nav.top .brand .title { display:flex; flex-direction:column; line-height:1.1; }
nav.top .menu { display:flex; gap:1rem; margin-left:auto; }
nav.top .menu a { padding:8px 12px; color:var(--text); }
nav.top .menu a:hover { color: var(--accent); }


.locked-link{opacity:0.6;pointer-events:auto;cursor:not-allowed}
.chapters li .lock{margin-left:6px}


/* Compact chapter thumbnail */
.chap-thumb{ display:block; margin:12px auto; width:180px; height:120px; background:transparent !important; }
.chap-thumb{ display:block; margin:12px auto; width:180px; height:120px; background:transparent !important; }
/* Admin-only controls hidden by default */
.admin-only{ display:none; gap:8px; margin-top:8px; }
body.is-admin .admin-only{ display:flex; }
#btn-edit-image, #btn-remove-image{ color:#000 !important; font-weight:600; }

.chap-thumb img{ display:block; margin:0 auto; max-width:100%; max-height:100%; object-fit:contain; }

#userMenu, #userDropdown .dropdown { background:#f3f4f6 !important; }


/* === Genially validation UI === */
.genially-admin-box{background:#f6f8fc;border:1px solid #ccd;border-radius:10px;padding:10px;margin-top:8px}
.genially-admin-box label{display:block;font-size:.9rem;margin:.35rem 0 .2rem}
.genially-admin-box input, .genially-admin-box textarea{border:1px solid #ccd;border-radius:8px;padding:.45rem}
.genially-admin-box button{margin-top:.5rem}
.genially-validate{margin-top:8px;background:#183947;color:#fff;border:0;border-radius:6px;padding:12px 16px;font-weight:600}


/* === Genially buttons refined === */
.genially-validate{
  margin-top:8px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  background:#183947;
  color:#fff;
  border:0;
  border-radius:6px;
  padding:12px 16px;
  font-weight:600;
  text-align:center;
}
.genially-validate.validated{
  background:#16a34a !important; /* green */
  font-size:0.9rem;
  padding:6px 10px;
}


/* === Genially validate buttons redesign === */
.genially-validate{
  margin-top:8px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  background:#16a34a; /* green */
  color:#fff;
  border:0;
  border-radius:6px;
  padding:12px 16px;
  font-weight:600;
  text-align:center;
}
.genially-validate.validated{
  background:#16a34a !important; /* stay green */
  font-size:0.9rem;
  padding:6px 10px;
}
#geniallyDialog form button[value="cancel"]{
  background:#dc2626; /* red */
  color:#fff;
  border:0;
  border-radius:6px;
  padding:6px 12px;
}
#geniallyDialog form button#geniallySubmit{
  background:#16a34a; /* green */
  color:#fff;
  border:0;
  border-radius:6px;
  padding:6px 12px;
}

/* ===== Chapitre styles (migrated from chapitre.html) ===== */
:root{ --content-w:820px; }

  body{ background:#fff; }

  .admin-only{ display:none !important; }
  .is-admin .admin-only{ display:flex !important; }

  button, .btn, a.btn, .btn-primary { color:#000 !important; text-decoration:none; }
  .btn { background:#f3f4f6; border:1px solid #9ca3af; padding:6px 12px; border-radius:12px; display:inline-block; text-align:center; }
  .btn-primary { background:#e5e7eb; border-color:#6b7280; }
  a.btn[disabled], .btn[disabled] { opacity:.6; pointer-events:none; }

  .btn-ico{ width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0; }
  .btn-mini{ padding:2px 6px; font-size:12px; line-height:1.1; }

  .container{ max-width:1100px; margin:0 auto; padding:16px; }
  .topbar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .topbar h1{ color:#d10000; margin:0; }
  .topbar img{ width:120px; height:120px; object-fit:cover; border-radius:12px; border:1px solid #ddd; }

  .section{ padding:16px; margin-top:12px; border:1px solid #eee; border-radius:12px; background:#fff; }
  .section h2{ font-size:20px; font-weight:700; margin:0 0 8px 0; }
  .actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .row{ display:flex; gap:8px; align-items:center; }
  #cours .row { justify-content:center; }

  .section-inner{ width:100%; max-width:var(--content-w); margin:0 auto; }

  #sf-container { display:flex; flex-direction:column; align-items:center; }
  .sf-card{ border:1px solid #eee; border-radius:12px; padding:12px; margin:10px 0; width:100%; max-width:var(--content-w); }
  .sf-head{ display:flex; align-items:center; justify-content:space-between; }
  .sf-head > div:first-child{ display:flex; align-items:baseline; gap:6px; }
  .sf-head h3{ margin:0; font-size:20px; font-weight:700; }
  .sf-head h3::after{ content:" -"; margin-left:4px; }
  .sf-head .muted{ display:inline; margin:0; font-size:20px; font-weight:700; color:#000; }
  .sf-col{ margin-top:12px; text-align:center; }
  .sf-col ul{ display:flex; flex-direction:column; gap:8px; padding:0; margin:0; list-style:none; }
  .sf-col ul li{ display:flex; flex-direction:column; align-items:center; gap:8px; }
  .sf-col a{ display:inline-block; }
  .sf-col {margin-bottom: 16px; }
  .sf-col h4{ display:inline-block; font-size:16px; font-weight:700; margin:0 0 6px 0; padding:2px 10px; border-radius:999px; background:#eef; }
  .sf-col { margin-bottom: 40px; }

  /* S'entraîner */
  /* S'amuser */
  /* Comprendre */

  #bilan h2{ text-align:left; }
  #bilan .grid{ display:flex; flex-direction:column; align-items:center; gap:16px; }
  .bilan-col{ width:100%; max-width:var(--content-w); text-align:center; }
  .bilan-col .row{ justify-content:center; }
  .bilan-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
  .bilan-col ul li{ display:flex; flex-direction:column; align-items:center; gap:8px; }

  .tag{ display:inline-block; padding:2px 10px; border-radius:999px; background:#eef; font-size:16px; font-weight:700; margin-bottom:6px; }

  #cours h2{ text-align:left; }

  /* Harmonisation finale */
  .section h2 { font-size:20px; font-weight:700; }
  .sf-head { margin:0 0 8px 0; }
  .sf-head > div:first-child { font-size:20px; font-weight:700; line-height:1.2; color:#000; text-align:left; display:flex; gap:6px; align-items:baseline; }
  .sf-head h3, .sf-head .muted { font:inherit; margin:0; color:inherit; }
  .sf-head h3::after { content:" -"; }

  /* Inline editor for genially meta */
  .genially-editor { border:1px dashed #bbb; padding:8px; border-radius:8px; width:100%; max-width:600px; }
  .genially-editor textarea { width:100%; min-height:60px; }
  .genially-editor input[type="text"] { width:100%; }
  .genially-editor .row { justify-content:flex-end; }
  .validate-row { display:flex; gap:8px; align-items:center; }

/* === Correctifs communs (cohérence SF/Bilan + icônes) === */
.sf-col h4 { display:inline-block; padding:6px 14px; border-radius:999px; background:#eef; font-size:16px; font-weight:700; margin:0 0 6px 0; }
.sf-card .sf-col:nth-of-type(1) h4::before{ content:"🔎 "; }  /* S'entraîner */
/* S'amuser */
/* Comprendre */
.section h2 { font-size:20px; font-weight:700; }
.sf-head > div:first-child { font-size:20px; font-weight:700; line-height:1.2; color:#000; display:flex; gap:6px; align-items:baseline; }
.sf-head h3, .sf-head .muted { font:inherit; margin:0; color:inherit; }
.sf-head h3::after { content:" -"; }
#cours, #bilan { max-width: var(--content-w); margin-left:auto; margin-right:auto; }
.section-inner { max-width: var(--content-w); margin:0 auto; }
.sf-col ul, .bilan-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.sf-col ul li, .bilan-col ul li { display:flex; justify-content:center; align-items:center; gap:8px; }

/* === VARIANTE C : Pastel BD === */
:root{ --p1:#FF6B6B; --p2:#FFD93D; --p3:#6BCB77; --p4:#4D96FF; }
body { background: linear-gradient(120deg, #fff, #f9fbff 60%); font-family:"Bangers", system-ui, cursive; }
.section { background:#fff; border:4px solid #000; border-radius:16px; box-shadow:5px 5px 0 #000; }
.section h2, .sf-head h3, .sf-head .muted { color: #222; text-transform: uppercase; letter-spacing:.5px; }
.btn { background:#fff; border:3px solid #000; border-radius:12px; box-shadow:3px 3px 0 #000; }
.btn-primary { background:var(--p4); color:#fff !important; border:3px solid #000; }
.tag, .sf-col h4 { color:#000; border:3px solid #000; }
.bilan-col[data-id="surpasser"] .tag { background: var(--p1); }
.bilan-col[data-id="amuser"] .tag { background: var(--p3); }
.bilan-col[data-id="reviser"] .tag { background: var(--p2); }


/* === Encart de titre === */
.chap-header { display:flex; max-width:var(--content-w); margin:0 auto 16px auto; gap:16px; align-items:center; background:#fff; border:4px solid #000; border-radius:16px; box-shadow:4px 4px 0 #000; padding:16px; }
.chap-title-area { flex:4; }
.chap-title-area h1 { margin:0; font-size:24px; color:#000; }
.chap-image-area { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.chap-image-area img { width:100%; max-width:140px; height:auto; border-radius:12px; border:2px solid #000; }


/* Corrections encart titre v2 */
.chap-title-area h1 { font-size:36px !important; font-weight:900 !important; color:#000; }
.chap-image-area img { border:none !important; }
/* === Center SF admin action buttons === */
.sf-card .actions.compact{
  width:100%;
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:8px;
}

/* === SF icon mapping normalized === */
.sf-card .sf-col:nth-of-type(1) h4::before{ content:"🔎 "; }  /* S'entraîner */
.sf-card .sf-col:nth-of-type(2) h4::before{ content:"🎲 "; }  /* S'amuser */
.sf-card .sf-col:nth-of-type(3) h4::before{ content:"💡 "; }  /* Comprendre */

/* ===== Overrides 2025-09-21 (nav + mini buttons) ===== */
/* 1) Bandeau menu opaque + textes noirs */
nav.top{ background:#fff !important; }
nav.top .brand .title span{ color:#000 !important; }
nav.top .menu a{ color:#000 !important; }

/* 2) Boutons +pdf / +génially / +vidéo plus étroits */
.btn, a.btn{ width:auto !important; }          /* annule le width:100% global */
.btn-mini{ 
  width:auto !important;
  padding:2px 4px !important;
  font-size:11px !important;
  line-height:1.1;
}
/* garantir que le groupe de boutons reste centré */
.sf-card .actions.compact{ 
  width:100%;
  display:flex;
  justify-content:center;
  gap:8px;
}

/* ===== Overrides 2025-09-21 (btn-mini + bilan centering) ===== */
.btn-mini{
  padding:4px 8px !important;
  font-size:12px !important;
  line-height:1.2;
  min-width:28px;
  text-align:center;
}
.bilan-col .actions.compact{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:8px;
}

/* === Boutons petits caractères élargis === */
.btn-ico,
.btn-mini {
  min-width: 32px;   /* largeur minimale carrée */
  min-height: 32px;  /* assure la hauteur */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ===== Overrides 2025-09-21 (align resources + poubelle) ===== */
.sf-col ul li,
.bilan-col ul li {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px;
}
.sf-col ul li a.btn,
.bilan-col ul li a.btn {
  flex:1 1 auto;
}
.sf-col ul li .validate-row,
.bilan-col ul li .validate-row {
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}

/* ===== Overrides 2025-09-21 (resource buttons auto-width) ===== */
.sf-col ul li a.btn,
.bilan-col ul li a.btn {
  flex:0 0 auto !important; /* ne pas forcer à prendre toute la largeur */
}
.btn-mini, .btn-ico {
  min-width:32px;
  min-height:32px;
  padding:4px 8px;
  font-size:12px;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ===== Overrides 2025-09-21 (center resource buttons in li) ===== */
.sf-col ul li,
.bilan-col ul li {
  justify-content:center !important; /* centre horizontalement */
}
.sf-col ul li .validate-row,
.bilan-col ul li .validate-row {
  margin-left:8px; /* petit espace entre le bouton ressource et la poubelle */
}

/* === Icônes PDF pour les boutons === */
a#btn-cours-eleve::before,
a#btn-cours-complete::before,
a.btn.pdf::before {
  content: "📄";
  margin-right:6px;
}

/* === Icônes pour ressources === */
/* PDF auto pour listes (SF/Bilan) */
.sf-col ul li a.btn[href$=".pdf"]::before,
.bilan-col ul li a.btn[href$=".pdf"]::before {
  content: "📄";
  margin-right:6px;
}

/* Genially dans les listes (SF 'amuser' et Bilan 'amuser') */
.sf-col ul li a.btn[href*="genially"]::before,
.sf-col ul li a.btn[href*="genial.ly"]::before,
.bilan-col ul li a.btn[href*="genially"]::before,
.bilan-col ul li a.btn[href*="genial.ly"]::before {
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  margin-right:6px;
  background:url('/assets/genially.png') no-repeat center/contain;
  vertical-align:middle;
}

/* Rappel: icônes PDF pour Cours élève / Cours complété */
a#btn-cours-eleve::before,
a#btn-cours-complete::before {
  content: "📄";
  margin-right:6px;
}

/* ===== Fix global light theme text + remove dim overlays (2025-09-21) ===== */
:root{ --text:#111 !important; }      /* texte noir par défaut */
body{ color:var(--text) !important; background:#fff !important; }

/* Désactive le voile/grille global sous le bandeau */
body::before{ opacity:0 !important; background:none !important; }

/* Supprime l'assombrissement du bandeau */
.banner::after{ background:none !important; }

/* === Savoirs-faire : bordures colorées === */
#sf-container .sf-card{
  border-width:4px !important;
  border-style:solid !important;
  box-shadow:5px 5px 0 #000;
}
#sf-container .sf-card:nth-of-type(4n+1){ border-color: var(--p1) !important; }
#sf-container .sf-card:nth-of-type(4n+2){ border-color: var(--p2) !important; }
#sf-container .sf-card:nth-of-type(4n+3){ border-color: var(--p3) !important; }
#sf-container .sf-card:nth-of-type(4n+4){ border-color: var(--p4) !important; }

/* Centrer π dans son carré et l’aligner au milieu des 2 lignes */
nav.top .brand { align-items:center; }           /* déjà présent, on confirme */
nav.top .brand .pi{
  display:flex !important;                       /* au lieu de inline-grid */
  align-items:center;
  justify-content:center;
  width:28px;                                    /* un peu plus grand si besoin */
  height:28px;
  line-height:28px;                              /* fallback pour certaines fontes */
}

/* === Cours.html : bordure noire sur le bloc principal === */
.panel:has(#chaptersWrap){
  border:4px solid #000 !important;
  border-radius:16px;
  box-shadow:5px 5px 0 #000;
  background:#fff;
}

/* === MathsCoins: petits boutons carrés === */
.coins-cell .plus-btn,
.coins-cell .minus-btn{
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
  border:1px solid #ccc;
  border-radius:6px;
  background:#f3f4f6;
  margin-left:6px;
}

/* --- Médailles profil --- */
.medals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-top:8px; }
.medal{ text-align:center; position:relative; }
.medal-disc{
  width:72px; height:72px; margin:0 auto 6px;
  border:3px solid #000; border-radius:50%;
  background:var(--medal,#eee); box-shadow:3px 3px 0 #000;
}
.medal.won .medal-disc{ filter:none; }
.medal:not(.won) .medal-disc{ filter:grayscale(0.9) contrast(0.8) brightness(0.95); }
.medal-check{
  position:absolute; top:6px; right:calc(50% - 36px + 6px);
  width:22px; height:22px; border-radius:50%;
  background:#16a34a; color:#fff; border:2px solid #000;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.medal:not(.won) .medal-check{ display:none; }
.medal-label{ font-size:12px; line-height:1.2; }

/* Commentaires élèves en blanc */
.student-note {
  background:#fff !important;
  border:1px dashed #ccc !important; /* bordure plus légère si tu veux */
  color:#000 !important;             /* texte noir pour contraste */
}