/* =========================
   CSS général du site (simplifié)
   ========================= */
:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --accent:#c50000;
  --border:#0a0a0a;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); }
body{ font-family: Arial, Helvetica, sans-serif; }

/* Fond global en filigrane */
.bg-overlay{
  position:fixed; inset:0; z-index:-1; opacity:0.06; pointer-events:none;
  background-image:url('/assets/svg/math-bg.svg');
  background-size: 1000px auto; background-repeat:repeat;
}

/* ===== Header / Brand ===== */
.site-header{ padding:16px 24px; border-bottom:3px solid var(--border); background:#fff; }
.brand .title{ font-family:'Coda',system-ui,sans-serif; font-weight:800; font-size:24px; letter-spacing:0.5px }
.brand .subtitle{ font-family:'Coda',system-ui,sans-serif; font-weight:400; color:#444 }

/* ===== Boutons ===== */
.btn{
  display:inline-block; padding:10px 14px; background:#fff; color:var(--fg); text-decoration:none;
  border:2px solid var(--border); border-radius:10px; font-family:'Coda',system-ui,sans-serif;
  cursor:pointer; transition:transform .05s ease, background .2s ease, color .2s ease; line-height:1.1;
}
.btn:hover{ transform:translateY(-1px); background:var(--accent); color:#fff; }

/* Tailles demandées */
.btn--lg{ padding:1.05rem 1.5rem; font-size:1.5rem; }  /* Progression + Chapitres (x1.5) */
.btn--xs{ padding:.25rem .45rem; font-size:.66rem; }   /* LaTeX (÷3) */
.btn--sm{ padding:.45rem .7rem;  font-size:.85rem; }   /* Se déconnecter (÷1.5) */

/* Flèche ▾ très visible pour "Chapitres" */
.has-caret::after{
  content:" ▾"; font-size:2.2rem; line-height:0; vertical-align:baseline; margin-left:.35rem;
}

/* ===== Layout contenu ===== */
.container{ max-width:1100px; margin:32px auto; padding:0 20px }
.card{ background:#fff; border:2px solid var(--border); border-radius:16px; padding:18px 20px; margin:18px 0 }
.card h1,.card h2,.card h3{ font-family:'Coda',system-ui,sans-serif }
.table{ width:100%; border-collapse:collapse }
.table th,.table td{ border:2px solid var(--border); padding:8px }
.notice{ background:#fff4f4; border-left:6px solid var(--accent); padding:12px; border-radius:8px }

/* ===== NAV DESKTOP ===== */
.site-header, nav.main-nav { position: relative; z-index: 9999; }  /* au-dessus du contenu */
.main-nav { display:block; }
.top-level{
  display:flex; align-items:center; gap:12px; list-style:none;
  margin:12px 0 0; padding:0; flex-wrap:nowrap;
}
.top-level > li { position:relative; }
.right{ margin-left:auto; display:flex; gap:10px; align-items:center; }

/* === Menu "Chapitres" (niveau 1) — deux modes possibles === */
/* 1) Mode JS : <li id="chapRoot" class="open"> ... .menu ... */
/* 2) Mode checkbox : <input id="chapToggle"> + <label> + <ul id="chaptersMenu"> */

nav.main-nav .dropdown-root{ position:relative; overflow:visible; }

/* Caché par défaut */
nav.main-nav .dropdown-root > .menu{
  position:absolute; top:100%; left:0;
  display:none;
  background:#fff; border:2px solid var(--border); border-radius:12px;
  min-width:320px; padding:6px;
  z-index: 10000;
}

/* OUVERT si .open (mode JS) */
nav.main-nav .dropdown-root.open > .menu{ display:block; }

/* OUVERT si checkbox cochée (mode sans JS) */
#chapRoot #chapToggle:checked ~ #chaptersMenu{ display:block; }

/* IMPORTANT : neutralise tout hover hérité (on ne veut pas d'ouverture au survol) */
nav.main-nav .dropdown-root:hover > .menu,
nav.main-nav .dropdown-root:focus-within > .menu,
nav.main-nav .dropdown-root > .menu:hover{
  /* ne rien faire : on ne force pas l’ouverture/fermeture ici */
}

/* Lignes du menu de niveau 1 */
.menu{ list-style:none; margin:0; padding:0; }
.menu.level-1 > li{ position:relative; }
.menu.level-1 > li > a{
  display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--fg); white-space:nowrap;
}
.menu.level-1 > li > a:hover{ background:#ffecec; border:1px dashed var(--accent); }
.caret-right{ float:right; opacity:.7; margin-left:10px }

/* Sous-menu niveau 2 (affiché au survol du chapitre) */
.menu.level-2{
  position:absolute; top:0; left:100%;
  display:none; background:#fff; border:2px solid var(--border); border-radius:12px;
  min-width:260px; padding:6px; z-index:11000;
}
.has-sub:hover > .menu.level-2,
.has-sub:focus-within > .menu.level-2,
.menu.level-2:hover{ display:block; }

/* ===== NAV MOBILE ===== */
.mobile-toggle{ display:none; margin-top:12px; }
.mobile-nav[hidden]{ display:none; }

.mobile-nav{
  border:2px solid var(--border); border-radius:12px; background:#fff; margin-top:12px; padding:10px;
}
.mobile-level-1, .mobile-level-2, .mobile-level-3{ list-style:none; margin:0; padding:0; }
.mobile-level-1 > li{ margin:6px 0; }
.mobile-chap-btn{
  display:block; width:100%; text-align:left;
  padding:10px 12px; background:#fff; border:2px solid var(--border); border-radius:10px;
  font-family:'Coda',system-ui,sans-serif; cursor:pointer;
}
.mobile-level-2, .mobile-level-3{
  margin-top:6px; padding-left:10px; border-left:2px solid var(--border);
}
.mobile-level-2 a, .mobile-level-2 .muted span,
.mobile-level-3 a, .mobile-level-3 .muted span{
  display:block; padding:8px 8px; text-decoration:none; color:var(--fg);
}
.mobile-level-2 a:hover, .mobile-level-3 a:hover{ background:#ffecec; border-radius:6px; }

/* Breakpoint */
@media (max-width: 900px){
  .main-nav{ display:none; }    /* cache la nav desktop */
  .mobile-toggle{ display:inline-block; }
}