/* ============================================================
   Brainizy — habillage des pages « site » (hors jeu) :
   header + footer partagés, pages de présentation, ressources,
   mentions légales. Réutilise les jetons de style.css.
   ============================================================ */

/* ============================ Header ============================ */
/* Collant en haut de page, même habillage que le footer (fond sombre
   translucide + liseré) : le blur garde le texte lisible quand le
   contenu défile dessous. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(24, 14, 66, 0.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.site-nav {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px;
}
.site-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 23px; font-weight: 800; color: #fff; text-decoration: none;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.site-brand small { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.75); display: block; letter-spacing: 0.06em; }
/* Le logo-image remplace le texte « 🧠 Brainizy » : volontairement plus haut
   que la ligne du header, il déborde en haut et en bas et .site-brand (overflow
   hidden) le rogne. Les marges négatives absorbent le padding du .site-nav et
   la boîte (64px) est plus haute que la ligne (bouton CTA ≈ 42px, margin box
   64-24 = 40px) : gros logo coupé à ras des bords du header, hauteur inchangée. */
.site-brand { height: 64px; margin: -12px 0; overflow: hidden; }
.site-brand .brand-logo { display: block; height: 140px; width: auto; }
.site-links { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.site-links a {
  color: rgba(255, 255, 255, 0.92); font-weight: 700; text-decoration: none;
  padding: 9px 13px; border-radius: 12px; font-size: 15px;
  transition: background 0.15s, transform 0.12s;
}
.site-links a:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); }
.site-links a.active { background: rgba(255, 255, 255, 0.2); }

/* ---------- Sous-menu « Ressources pédagogiques » ---------- */
/* Le bouton déclencheur (js/site.js bascule .open sur .nav-drop) est
   habillé comme les liens : même pilule, même hover. Le menu s'affiche
   en panneau flottant sur desktop, et en sous-liste indentée dans le
   panneau burger sur mobile (media query plus bas). */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-btn {
  display: flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, 0.92); font-weight: 700; font-size: 15px;
  font-family: inherit; text-decoration: none; white-space: nowrap;
  padding: 9px 13px; border-radius: 12px; border: none; background: none; cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.nav-drop-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); }
.nav-drop.active .nav-drop-btn { background: rgba(255, 255, 255, 0.2); }
.nd-caret { font-size: 11px; transition: transform 0.15s; }
.nav-drop.open .nd-caret { transform: rotate(180deg); }
.nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  min-width: 250px; padding: 6px;
  background: rgba(24, 14, 66, 0.97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px;
  box-shadow: 0 22px 34px rgba(10, 5, 40, 0.35);
}
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu a {
  display: block; color: rgba(255, 255, 255, 0.92); font-weight: 700; font-size: 14.5px;
  text-decoration: none; white-space: nowrap;
  padding: 10px 12px; border-radius: 10px;
}
.nav-drop-menu a:hover { background: rgba(255, 255, 255, 0.14); }
.nav-drop-menu a.active { background: rgba(255, 255, 255, 0.2); }
/* La page courante « pop » à l'affichage — petit feel jeu vidéo */
@media (prefers-reduced-motion: no-preference) {
  .site-links a.active { animation: nav-pop 0.3s ease; }
}
@keyframes nav-pop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.site-cta {
  background: var(--accent); color: var(--ink);
  font-weight: 800; font-size: 15px; text-decoration: none;
  padding: 9px 16px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 4px 0 var(--accent-dark);
  transition: transform 0.12s, box-shadow 0.12s;
}
.site-cta:hover { transform: translateY(-1px); }
.site-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-dark); }

/* ---------- État de session, sans flash ---------- */
/* Le script inline du <head> lit le cache localStorage et pose html.s-in
   ou html.s-out AVANT le premier paint ; le CSS affiche alors le bon texte
   du CTA et les bons liens, sans jamais montrer l'état par défaut.
   js/site.js (B.navSession) bascule la même classe au login/logout. */
.ct-in, .ct-out, .nav-login, .nav-account { display: none; }
html.s-in .ct-d { display: none; }
html.s-in .ct-in { display: inline; }
html.s-out .ct-d { display: none; }
html.s-out .ct-out { display: inline; }
html.s-in .nav-account { display: inline-block; }
html.s-out .nav-login { display: inline-block; }

/* ---------- Burger (menu mobile/tablette) ---------- */
/* Masqué au-delà de 1149px ; en dessous, .site-links devient un panneau
   déroulant sous la barre (voir la media query) et ce bouton le bascule
   (js/site.js pose .menu-open sur .site-header). */
.nav-burger {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.14); border: none; border-radius: 12px;
  cursor: pointer; padding: 0;
  transition: background 0.15s;
}
.nav-burger:hover { background: rgba(255, 255, 255, 0.24); }
.nb-bar {
  display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #fff;
  transition: transform 0.2s, opacity 0.2s;
}

/* ---------- Lien d'évitement + focus clavier ---------- */
/* Premier élément du body : invisible, il glisse sous la barre au Tab. */
.skip-link {
  position: fixed; top: -60px; left: 14px; z-index: 100;
  background: var(--accent); color: var(--ink); font-weight: 800; font-size: 15px;
  padding: 12px 18px; border-radius: 0 0 14px 14px; text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus-visible { top: 0; }
.site-nav a:focus-visible,
.nav-drop-btn:focus-visible,
a.site-cta:focus-visible,
.nav-burger:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* En plein jeu (quiz, coffre) : le chrome du site s'efface */
body.in-game .site-header, body.in-game .site-footer { display: none; }

/* ============================ Footer ============================ */
.site-footer {
  position: relative; z-index: 20; margin-top: 46px;
  background: rgba(24, 14, 66, 0.62);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}
.footer-cols {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 26px;
  padding: 30px 18px 8px;
}
.footer-brand { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.footer-brand .footer-logo { display: block; height: 48px; width: auto; }
.footer-cols p { font-size: 14px; color: rgba(255, 255, 255, 0.72); line-height: 1.55; max-width: 340px; }
.footer-cols h3 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.55); margin-bottom: 8px;
}
.footer-cols a {
  display: block; color: rgba(255, 255, 255, 0.88); text-decoration: none;
  padding: 3px 0; font-size: 14.5px; font-weight: 600;
}
.footer-cols a:hover { color: var(--accent); }
.footer-bottom {
  max-width: 1080px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  padding: 14px 18px 24px; font-size: 13px; color: rgba(255, 255, 255, 0.55);
}
/* La mention « outils d'IA » : sa propre ligne, discrète */
.footer-note { flex-basis: 100%; line-height: 1.5; }
/* 5 colonnes dès que la place le permet ; en dessous, la marque prend
   toute la largeur et les 4 catégories s'installent sur 2 colonnes. */
@media (max-width: 960px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 20px 26px; }
  .footer-cols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; gap: 18px; }
}
/* ---------- Burger dès 1150px ---------- */
/* Le sous-menu « Ressources pédagogiques » a élargi la rangée de liens :
   en dessous de ~1150px, les liens + le CTA ne tiennent plus sur la ligne
   du header (le CTA « Jouer gratuitement » décollait à la ligne). On
   passe en menu burger, comme sur mobile. Footer non concerné. */
@media (max-width: 1149px) {
  /* header compact : marque + CTA + burger sur la ligne 1 — le menu passe
     dans un panneau déroulant sous la barre, la barre reste fine et collée */
  .site-nav { gap: 8px; padding: 8px 12px; }
  .site-brand { font-size: 20px; height: 44px; margin: -8px 0; }
  .site-brand .brand-logo { height: 96px; }
  .site-cta { margin-left: auto; padding: 10px 14px; font-size: 14px; }
  .nav-burger { display: flex; }
  /* Le menu : panneau plein largeur sous la barre, liens empilés larges
     (≥ 48px de haut, confort tactile). Fermé par défaut ; .menu-open l'ouvre. */
  .site-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; margin: 0; gap: 2px;
    padding: 10px 12px 14px;
    background: rgba(24, 14, 66, 0.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 22px 34px rgba(10, 5, 40, 0.35);
  }
  .menu-open .site-links { display: flex; }
  .site-links a { padding: 13px 14px; font-size: 16px; }
  .site-links a:hover { transform: none; }
  /* Le sous-menu Ressources : ligne pleine largeur comme les autres
     liens, et le menu devient une sous-liste indentée sous son bouton
     (pas de panneau flottant à l'intérieur du panneau burger). */
  .nav-drop { flex-direction: column; align-items: stretch; }
  .nav-drop-btn { justify-content: space-between; width: 100%; padding: 13px 14px; font-size: 16px; }
  .nav-drop-btn:hover { transform: none; }
  .nav-drop-menu {
    display: none; position: static; min-width: 0; padding: 0 0 2px 16px;
    background: none; border: none; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-drop.open .nav-drop-menu { display: block; }
  .nav-drop-menu a { padding: 11px 12px; font-size: 15px; }
  @media (prefers-reduced-motion: no-preference) {
    .menu-open .site-links { animation: menu-in 0.16s ease; }
  }
  /* Les trois barres deviennent une croix quand le menu est ouvert */
  .menu-open .nb-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-open .nb-bar:nth-child(2) { opacity: 0; }
  .menu-open .nb-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ancres du hub ressources (#cp, #ce1…, ciblées par la colonne « Ressources »
   du footer) : la section atterrit SOUS le header collé, jamais derrière. */
.art h2[id] { scroll-margin-top: 80px; }
@media (max-width: 760px) {
  .art h2[id] { scroll-margin-top: 110px; }
}

/* ============================ Pages de contenu ============================ */
.page { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 0 18px 26px; }

.crumbs { color: rgba(255, 255, 255, 0.75); font-size: 13.5px; font-weight: 600; padding: 16px 0 0; }
.crumbs a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs b { color: #fff; }

.page-hero { text-align: center; color: #fff; padding: 30px 0 26px; }
.page-hero .kicker {
  display: inline-block; background: rgba(255, 255, 255, 0.16);
  padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  margin-bottom: 14px; letter-spacing: 0.02em;
}
.page-hero h1 {
  font-size: clamp(29px, 6vw, 44px); font-weight: 800; line-height: 1.14;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18), 0 12px 30px rgba(0, 0, 0, 0.25);
}
.page-hero .sub { font-size: 17.5px; color: rgba(255, 255, 255, 0.92); max-width: 740px; margin: 14px auto 0; line-height: 1.55; }
.hero-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.hero-stats span {
  background: rgba(255, 255, 255, 0.14); border-radius: 999px;
  padding: 7px 15px; font-weight: 700; font-size: 14.5px;
}
.hero-cta { margin-top: 20px; display: inline-block; font-size: 17px; padding: 12px 22px; }

/* Un bloc de lecture (réutilise .card via sa propre classe) */
.art {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 28px 20px; margin: 18px 0;
}
.art > h2 { font-size: 24px; margin-bottom: 12px; line-height: 1.25; }
.art h3 { font-size: 18px; margin: 18px 0 6px; }
.art p { font-size: 16px; line-height: 1.68; color: #3f3c60; margin: 8px 0; }
.art p.lead { font-size: 17px; color: var(--ink); }
.art ul, .art ol { padding-left: 22px; margin: 8px 0 12px; }
.art li { font-size: 15.5px; line-height: 1.6; color: #3f3c60; margin: 5px 0; }
.art li::marker { color: var(--accent-dark); }
.art b { color: var(--ink); }
.art a { color: var(--blue-dark); font-weight: 700; }
.art a:hover { text-decoration: underline; }

/* L'illustration d'ouverture d'un article d'actu (16:9, même
   traitement que les visuels .art-shot) */
.art-cover {
  display: block; width: 100%; height: auto;
  border-radius: 18px; border: 3px solid #efeaff;
  box-shadow: 0 12px 26px rgba(45, 42, 74, 0.14);
  margin: 0 0 14px;
}

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.badge {
  background: #fff0c9; color: #7a5200; border-radius: 999px;
  padding: 6px 14px; font-weight: 800; font-size: 13.5px;
}
.badge.blue { background: #dbe9ff; color: #1d4e8f; }
.badge.green { background: #d6f5e3; color: #14532d; }

.note-box {
  background: #e8f7ef; border-left: 4px solid var(--green);
  border-radius: 12px; padding: 12px 16px; margin: 14px 0;
  font-size: 15px; line-height: 1.55; color: #22543d;
}
.note-box.warn { background: #fff6e0; border-color: var(--accent2); color: #6b4700; }
.note-box p { margin: 0; font-size: 15px; }

/* Étapes numérotées (comment ça marche) */
.steps { counter-reset: step; display: grid; gap: 14px; margin: 14px 0 6px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step-n {
  counter-increment: step; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--ink); font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 var(--accent-dark);
}
.step-n::before { content: counter(step); }
.step div b { font-size: 16.5px; display: block; margin-bottom: 2px; }
.step div { font-size: 15px; line-height: 1.55; color: #3f3c60; }

/* Cartes d'exercices (pages programme) */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; margin: 14px 0 8px; }
.ex-card {
  background: #fff; border: 3px solid #efeaff; border-radius: 18px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 4px 14px rgba(30, 20, 90, 0.08);
  transition: transform 0.15s, border-color 0.15s;
}
.ex-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.ex-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; line-height: 1.2; }
.ex-ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}
.ex-desc { font-size: 13.5px; color: var(--muted); line-height: 1.45; font-weight: 600; }
.ex-sample {
  background: #f6f4ff; border-radius: 12px; padding: 9px 12px;
  font-size: 13.5px; color: #4b4770; line-height: 1.5; font-weight: 600;
}
.ex-sample b { color: var(--accent-dark); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-bottom: 3px; }
/* Le cours lié au sujet (page programme → cours) : une ligne-lien,
   moins tapissière que le bouton « Jouer » du dessous */
.ex-cours { font-size: 13.5px; font-weight: 700; }
.ex-cours a { text-decoration: none; }
.ex-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.ex-count { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.btn-mini {
  display: inline-block; background: var(--green); color: #fff;
  font-weight: 800; text-decoration: none; padding: 8px 15px; border-radius: 12px;
  font-size: 14px; box-shadow: 0 3px 0 var(--green-dark);
  transition: transform 0.12s; white-space: nowrap;
}
.btn-mini:hover { transform: translateY(-1px); }
.btn-mini:active { transform: translateY(1px); }
/* dans un article, .art a colore les liens : les boutons reprennent la main */
.art a.btn-mini { color: #fff; }
.art a.site-cta { color: var(--ink); }

/* Cartes matières (hub ressources) */
.subject-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 13px; margin: 12px 0 6px; }
.subject-card {
  background: #fff; border-radius: 16px; padding: 15px 16px;
  border: 3px solid #efeaff; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: 0 4px 14px rgba(30, 20, 90, 0.08);
  transition: transform 0.15s, border-color 0.15s;
}
.subject-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.subject-card .sc-head { font-weight: 800; font-size: 16.5px; display: flex; gap: 9px; align-items: center; }
.subject-card .sc-meta { font-size: 13px; color: var(--muted); font-weight: 700; }
.subject-card.soon { opacity: 0.62; pointer-events: none; }
.subject-card.soon .sc-meta { color: #a89fc9; }

/* ==================== Blog Ressources ==================== */
/* Les 4 rubriques (accueil du blog) */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 13px; margin: 12px 0 6px; }
.cat-card {
  background: #fff; border-radius: 16px; padding: 16px;
  border: 3px solid #efeaff; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 4px 14px rgba(30, 20, 90, 0.08);
  transition: transform 0.15s, border-color 0.15s;
}
.cat-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.cat-card .cc-emoji { font-size: 26px; line-height: 1.1; }
.cat-card .cc-head { font-weight: 800; font-size: 16.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-card .cc-desc { font-size: 13.5px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.cat-card .cc-meta { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: auto; }

/* Le badge « réservé Max 🚀 » (cartes, rubriques, articles) */
.badge-max {
  background: linear-gradient(135deg, #ffd977, #ffb43d); color: #6b4700;
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800;
  white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}

/* Articles du blog */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; margin: 14px 0 8px; }
.post-card {
  background: #fff; border: 3px solid #efeaff; border-radius: 18px;
  padding: 15px 16px; display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: var(--ink);
  box-shadow: 0 4px 14px rgba(30, 20, 90, 0.08);
  transition: transform 0.15s, border-color 0.15s;
}
.post-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.post-card .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-cat { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pc-cat.c-actu { background: #dbe9ff; color: #1d4e8f; }
.pc-cat.c-programmes { background: #efeaff; color: #4b3a8f; }
.pc-cat.c-decouvrir { background: #d6f5e3; color: #14532d; }
.pc-cat.c-cours { background: #fff0c9; color: #7a5200; }
.post-card .pc-title { font-weight: 800; font-size: 16.5px; line-height: 1.3; }
.post-card .pc-desc { font-size: 13.5px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.post-card .pc-date { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: auto; }

/* ==================== Cours et fiches ==================== */
/* Le filtre classe × matière de l'accueil : des boutons, PAS des
   liens — le filtrage masque/affiche des groupes déjà dans la page,
   l'URL ne bouge jamais (aucune page de filtre à indexer). */
.cours-filters { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 4px; }
.cf-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cf-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); flex-shrink: 0; width: 62px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cf-chip {
  font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--ink);
  background: #fff; border: 2px solid #e4defa; border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.cf-chip:hover { transform: translateY(-1px); border-color: var(--accent); }
.cf-chip.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 0 var(--accent-dark); }

/* Les groupes de cours de l'accueil (une matière d'une classe) */
.cours-group h4 { margin: 14px 0 4px; font-size: 16.5px; }

/* L'état vide propre (filtre sans cours) : on dit où réviser pendant
   qu'on attend — le programme et ses quiz existent déjà. */
.cours-empty h2 { color: #7a5200; }

/* ---------- le corps d'un cours ---------- */
/* Formule mise en valeur : centrée, sur fond clair, lisible sur
   mobile — du texte simple (pas de MathJax, aucun JS de rendu). */
.cours-formule {
  background: #f6f4ff; border-radius: 14px; padding: 14px 18px; margin: 14px 0;
  font-size: 19px; font-weight: 800; text-align: center; color: var(--ink);
  letter-spacing: 0.02em; overflow-x: auto;
}
/* Exemple corrigé : énoncé, étapes numérotées, résultat encadré */
.cours-exemple {
  background: #fff; border: 3px solid #d6f5e3; border-radius: 16px;
  padding: 14px 18px; margin: 14px 0;
}
.ce-titre { font-weight: 800; color: #14532d; font-size: 15px; margin: 0 0 6px; }
.ce-enonce { font-weight: 700; margin: 0 0 8px; }
.ce-etapes { margin: 0 0 10px; padding-left: 22px; }
.ce-etapes li { margin: 5px 0; font-size: 15px; line-height: 1.5; color: #3f3c60; }
.ce-resultat {
  background: #d6f5e3; border-radius: 10px; padding: 8px 14px; margin: 0;
  font-weight: 800; font-size: 16.5px; color: #14532d; text-align: center;
}
/* Schéma inline (SVG du modèle de cours) : centré, sans déborder */
.cours-schema { margin: 14px 0; }
.cours-schema svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.cours-img { width: 100%; height: auto; border-radius: 14px; margin: 12px 0; }
/* L'essentiel à retenir : l'encadré qui se photographie */
.cours-essentiel {
  background: #f6f4ff; border: 2px dashed #d9d2f6; border-radius: 16px;
  padding: 14px 20px; margin: 8px 0;
}
.cours-essentiel ul { margin: 4px 0; padding-left: 22px; }
.cours-essentiel li { margin: 7px 0; font-weight: 600; line-height: 1.5; }
/* Exercices d'application : corrigé replié (comme la FAQ) */
.cours-rep { font-size: 15.5px; margin: 8px 0 2px; }
.cours-corrige { padding-left: 22px; }
.cours-corrige li { margin: 5px 0; font-size: 15px; line-height: 1.5; color: #3f3c60; }
/* Les erreurs fréquentes : la table a déjà son habillage (.art table) */
.art table td s, .art table td .faux { color: #b3261e; }

/* ---------- Le rideau Max 🚀 ---------- */
/* Le corps des articles « Cours » / « À découvrir » reste dans le HTML
   (indexable, aperçu flouté) : js/site.js pose html.plan-max quand
   GET /api/me confirme l'abonnement, et le CSS dévoile tout. Sans JS
   ou hors ligne, le rideau reste baissé — jamais de contenu « offert ». */
.mg-lock { position: relative; }
html:not(.plan-max) .mg-body {
  max-height: 430px; overflow: hidden;
  filter: blur(6px); opacity: 0.8;
  user-select: none; pointer-events: none;
}
.mg-cta { display: none; }
html:not(.plan-max) .mg-cta {
  display: block; position: absolute; left: 0; right: 0; bottom: -4px;
  padding-top: 80px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 52%);
}
html.plan-max .mg-cta { display: none; }
.mg-card {
  display: inline-block; background: #fff;
  border: 3px solid #f3e3b3; border-radius: 18px;
  padding: 18px 22px; max-width: 420px;
  box-shadow: 0 12px 34px rgba(30, 20, 90, 0.18);
}
.mg-card .mg-emoji { font-size: 30px; margin: 0 0 4px; }
.mg-card .mg-title { font-weight: 800; font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.mg-card .mg-sub { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 12px; }
.mg-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Variantes du bouton (le .btn-mini de base est vert) */
.btn-mini.gold { background: var(--accent); color: var(--ink); box-shadow: 0 3px 0 var(--accent-dark); }
.btn-mini.ghost { background: #efeaff; color: var(--ink); box-shadow: 0 3px 0 #d9d2f6; }
.art a.btn-mini.gold, .art a.btn-mini.ghost { color: var(--ink); }

/* FAQ */
.art details { background: #f6f4ff; border-radius: 14px; padding: 12px 16px; margin: 9px 0; }
.art details summary { font-weight: 800; cursor: pointer; font-size: 15.5px; color: var(--ink); }
/* l'or survolé (#e09a00) tombait à 2.2:1 sur le fond lavande : on souligne plutôt */
.art details summary:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.art details p { margin: 9px 0 2px; font-size: 15px; }

/* Visuels dans un article : 1 à 3 « captures » alignées, légendées */
.art-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 8px; }
.art-shot { margin: 0; text-align: center; }
.art-shot img {
  display: block; margin: 0 auto; width: min(230px, 100%); height: auto;
  aspect-ratio: 1 / 1; object-fit: contain;
  border-radius: 18px; background: #241d52;
  border: 3px solid #efeaff; box-shadow: 0 12px 26px rgba(45, 42, 74, 0.14);
}
.art-shot figcaption { color: #8b87a8; font-size: 13px; font-weight: 700; padding-top: 8px; }
@media (max-width: 640px) { .art-shots { grid-template-columns: 1fr; } }

/* Liens « voir aussi » */
.chip-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
a.chip-link {
  background: #fff; border-radius: 999px; padding: 8px 15px;
  font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none;
  box-shadow: 0 3px 10px rgba(30, 20, 90, 0.12);
  transition: transform 0.12s, background 0.12s;
}
a.chip-link:hover { transform: translateY(-2px); background: #fff0c9; }

/* Tableaux (mentions légales, comparatifs) */
.art table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 15px; }
.art th { text-align: left; background: #f1edff; color: var(--ink); }
.art th, .art td { padding: 10px 12px; border-bottom: 2px solid #f0eefc; vertical-align: top; line-height: 1.5; }
.art td { color: #3f3c60; }

.final-cta { text-align: center; margin: 26px 0 8px; color: #fff; }
.final-cta p { color: rgba(255, 255, 255, 0.92); font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.final-cta .fc-alt { font-size: 14.5px; margin: 16px 0 0; }
.final-cta a { color: var(--accent); font-weight: 800; }
.final-cta a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* le CTA du bandeau final ne prend pas la teinte « lien » */
.final-cta a.site-cta { color: var(--ink); }
.final-cta a.site-cta:hover { text-decoration: none; }
/* les gros boutons .land-btn non plus (texte encre sur fond or —
   sinon la règle « lien » ci-dessus les rend illisibles) */
.final-cta a.land-btn:not(.ghost) { color: var(--ink); }
.final-cta a.land-btn:hover { text-decoration: none; }

@media (max-width: 640px) {
  .art { padding: 20px 18px 16px; }
  .ex-grid { grid-template-columns: 1fr; }
}

/* ==================== Page Tarifs (Brainizy Max 🚀) ==================== */
/* L'encart adaptatif d'entête : il parle à celui qui arrive (sessions
   restantes, quota épuisé, ou déjà Max) — parent ou élève. */
.billing-banner {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border-radius: 16px; padding: 14px 18px;
  box-shadow: 0 6px 24px rgba(30, 20, 90, 0.14);
  margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--ink);
}
.billing-banner .bb-emoji { font-size: 26px; line-height: 1; }
.billing-banner.max { background: #2d2a4a; color: #ffc83d; }
.billing-banner small { display: block; font-weight: 600; font-size: 13px; color: var(--muted); }
.billing-banner.max small { color: rgba(255, 255, 255, 0.75); }

/* Les trois offres : gratuit / mensuel / annuel (l'annuel est mis en avant).
   Chaque carte est surmontée de sa mascotte (.plan-art). */
.plans-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 18px 0 8px; align-items: stretch;
}
.plan-card {
  background: #fff; border-radius: 18px; padding: 22px 20px;
  box-shadow: 0 6px 24px rgba(30, 20, 90, 0.10);
  display: flex; flex-direction: column; gap: 8px; position: relative;
}
.plan-card.featured {
  outline: 3px solid var(--accent); outline-offset: -3px;
  background: linear-gradient(180deg, #fff8e6 0%, #ffffff 42%);
}
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 800;
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
  box-shadow: 0 3px 0 var(--accent-dark);
}
/* la mascotte de l'offre (plan-gratuit / plan-max-mensuel / plan-max-annuel) */
.plan-art {
  display: block; width: 116px; height: 116px; object-fit: contain;
  margin: -6px auto 0;
}
.plan-card.featured .plan-art { width: 128px; height: 128px; }
.plan-name { font-size: 18px; font-weight: 800; color: var(--ink); }
.plan-price { font-size: 28px; font-weight: 800; color: var(--ink); }
.plan-price small { font-size: 14px; font-weight: 700; color: var(--muted); }
.plan-note { font-size: 13px; color: var(--muted); font-weight: 600; min-height: 18px; }
.plan-card ul { list-style: none; margin: 6px 0 10px; padding: 0; flex: 1; }
.plan-card li { font-size: 14px; padding: 5px 0 5px 26px; position: relative; color: #3f3c60; font-weight: 600; }
.plan-card li::before { content: "✅"; position: absolute; left: 0; font-size: 13px; }
.plan-card li.off { color: #9a97ad; }
.plan-card li.off::before { content: "—"; }
/* boutons « tactiles » comme dans le jeu : ombre dure qui s'écrase au clic */
.plan-cta {
  display: block; text-align: center; background: var(--ink); color: #fff;
  border-radius: 12px; padding: 12px 16px; font-weight: 800; font-size: 15.5px;
  text-decoration: none; border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 0 #17142e;
  transition: transform 0.12s, box-shadow 0.12s;
}
.plan-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #17142e; }
.plan-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 #17142e; }
.plan-cta.ghost { background: #efeaff; color: var(--ink); box-shadow: 0 4px 0 #d9d2f6; }
.plan-cta.ghost:hover { box-shadow: 0 5px 0 #d9d2f6; }
.plan-cta.ghost:active { box-shadow: 0 1px 0 #d9d2f6; }
.plan-cta.gold { background: var(--accent); color: var(--ink); box-shadow: 0 4px 0 var(--accent-dark); }
.plan-cta.gold:hover { box-shadow: 0 5px 0 var(--accent-dark); }
.plan-cta.gold:active { box-shadow: 0 1px 0 var(--accent-dark); }
.plan-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.plan-err { font-size: 13px; color: #b0243a; font-weight: 700; margin: 6px 0 0; min-height: 16px; }
/* la carte se soulève et la mascotte salue — seulement si le mouvement est bienvenu */
@media (prefers-reduced-motion: no-preference) {
  .plan-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .plan-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(30, 20, 90, 0.16); }
  .plan-art { transition: transform 0.25s ease; }
  .plan-card:hover .plan-art { transform: scale(1.07) rotate(-3deg); }
}
/* le petit formulaire email (parent qui paie sans se connecter) */
.plan-mail { display: none; gap: 6px; margin-top: 8px; }
.plan-mail.open { display: flex; }
.plan-mail input {
  flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid #e4e1f5;
  border-radius: 9px; font: inherit; font-size: 14px;
}
.plan-mail button { border: none; background: var(--ink); color: #fff; border-radius: 9px; padding: 9px 12px; font-weight: 800; cursor: pointer; font-family: inherit; }
.plan-mail button:hover { filter: brightness(1.2); }

/* Le bandeau final (page Tarifs) : « le gratuit ne s'arrête jamais »
   sur encre sombre, avec le CTA doré qui ressort. */
.cta-band {
  background: linear-gradient(135deg, #2d2a4a 0%, #443c74 100%);
  border-radius: 22px; padding: 30px 22px 32px; margin: 30px 0 10px;
  box-shadow: 0 12px 34px rgba(30, 20, 90, 0.35);
}
.cta-band h2 { font-size: 22px; color: #fff; margin-bottom: 8px; }
.cta-band p { color: rgba(255, 255, 255, 0.85); font-size: 16px; max-width: 560px; margin: 0 auto; }
.cta-band .hero-cta { margin-top: 16px; }

@media (max-width: 760px) { .plans-grid { grid-template-columns: 1fr; } }

/* ==================== Page d'accueil (vitrine) ==================== */
/* L'accueil public raconte Brainizy : le hero parle à l'élève (le rêve),
   les sections alternent ensuite élève / parents, et la dernière propose
   de partager ou soutenir le projet. Une section = 1 visuel + peu de mots. */
.land-hero {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: center;
  padding: 40px 18px 26px;
}
.land-kicker {
  display: inline-block; background: rgba(255, 255, 255, 0.16);
  padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  margin-bottom: 14px; color: #fff; letter-spacing: 0.02em;
}
.land-hero h1 {
  color: #fff; font-size: clamp(33px, 5.6vw, 54px); font-weight: 800; line-height: 1.1;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18), 0 12px 30px rgba(0, 0, 0, 0.25);
}
.land-hero h1 em {
  font-style: normal; color: var(--accent);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 12px 30px rgba(0, 0, 0, 0.35);
}
.land-sub {
  color: rgba(255, 255, 255, 0.94); font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.55; margin: 16px 0 0; max-width: 480px;
}
.land-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
/* Gros bouton d'action de la vitrine (le même « tactile » que le jeu) */
.land-btn {
  display: inline-block; background: var(--accent); color: var(--ink);
  font-weight: 800; font-size: 17px; text-decoration: none;
  padding: 14px 24px; border-radius: 16px; border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 5px 0 var(--accent-dark);
  transition: transform 0.12s, box-shadow 0.12s;
}
.land-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--accent-dark); }
.land-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dark); }
.land-btn.ghost {
  background: rgba(255, 255, 255, 0.14); color: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22);
}
.land-btn.ghost:hover { box-shadow: 0 7px 0 rgba(0, 0, 0, 0.22); background: rgba(255, 255, 255, 0.2); }
.land-btn.ghost:active { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22); }
.land-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.land-stats { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; margin-top: 20px; }
.land-stats span {
  background: rgba(255, 255, 255, 0.14); border-radius: 999px; color: #fff;
  padding: 7px 15px; font-weight: 700; font-size: 14px;
}
.land-hero-art { min-width: 0; }
.land-hero-art img {
  display: block; width: 100%; height: auto;
  border-radius: 26px; box-shadow: 0 24px 60px rgba(10, 5, 40, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
  .land-hero-art img { animation: land-float 5.5s ease-in-out infinite; }
  @keyframes land-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
  }
}

/* ---------- Sections de la vitrine ---------- */
.land-section { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 46px 18px 10px; }
.land-head { text-align: center; color: #fff; max-width: 660px; margin: 0 auto 26px; }
.land-head .kicker {
  display: inline-block; background: rgba(255, 255, 255, 0.16);
  padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  margin-bottom: 12px;
}
.land-head h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; line-height: 1.18; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18); }
.land-head p { color: rgba(255, 255, 255, 0.9); font-size: 16.5px; line-height: 1.55; margin-top: 10px; }

/* Les 3 cartes « joue / gagne / collectionne » */
.land-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.land-card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.land-card img { display: block; width: 100%; height: auto; }
.land-card-body { padding: 16px 18px 18px; }
.land-card-body h3 { font-size: 19px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.land-card-body p { font-size: 14.5px; line-height: 1.55; color: #3f3c60; margin-top: 6px; font-weight: 600; }
.land-cards-cta { text-align: center; margin-top: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .land-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .land-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(30, 20, 90, 0.3); }
}

/* Le bandeau des vrais lots (carte « Remporte ») : les cartes-cadeaux
   réelles de la semaine, en éventail centré */
.lot-strip {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 18px 14px 6px;
}
.lot-strip img {
  width: 31%; height: auto; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(30, 20, 90, 0.22);
}
.lot-strip img:nth-child(1) { transform: rotate(-4deg) translateY(4px); }
.lot-strip img:nth-child(2) { transform: translateY(-3px); z-index: 1; }
.lot-strip img:nth-child(3) { transform: rotate(4deg) translateY(4px); }

/* Actus Brainizy sur la home — contenu généré par scripts/ressources.js
   (bloc entre marqueurs ACTU:START/ACTU:END dans index.html) */
.news-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.news-card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
}
.news-card img, .news-card .nc-noimg {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.news-card .nc-noimg {
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; background: linear-gradient(135deg, #efeaff, #dbe9ff);
}
.news-card .nc-body { padding: 15px 18px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.news-card .nc-title { font-weight: 800; font-size: 17px; line-height: 1.3; }
.news-card .nc-resume { font-size: 13.5px; line-height: 1.55; color: #3f3c60; font-weight: 600; }
.news-card .nc-meta { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: auto; }
@media (prefers-reduced-motion: no-preference) {
  .news-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .news-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(30, 20, 90, 0.3); }
}

/* Les captures d'écran réelles, en « cadre d'appareil » — 4 vignettes
   en 2×2 : le lot de la semaine d'abord (l'appât), puis le parcours */
.land-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 940px; margin: 0 auto; }
.shot {
  background: rgba(24, 14, 66, 0.82); border-radius: 20px; padding: 9px 9px 12px;
  box-shadow: 0 16px 40px rgba(10, 5, 40, 0.4);
}
.shot img { display: block; width: 100%; height: auto; border-radius: 13px; }
.shot figcaption { color: rgba(255, 255, 255, 0.85); font-size: 13.5px; font-weight: 700; text-align: center; padding-top: 9px; }

/* Section parents : l'image et le texte se posent côte à côte */
.land-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.land-duo.rev .land-duo-art { order: 2; }
.land-duo-art img {
  display: block; width: 100%; height: auto;
  border-radius: 24px; box-shadow: 0 18px 46px rgba(10, 5, 40, 0.4);
}
.land-duo-txt { color: #fff; }
.land-duo-txt a { color: #fff; font-weight: 700; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.land-duo-txt a:hover { color: var(--accent); }
.land-duo-txt h2 { font-size: clamp(24px, 3.6vw, 33px); font-weight: 800; line-height: 1.2; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18); }
.land-duo-txt > p { color: rgba(255, 255, 255, 0.92); font-size: 16.5px; line-height: 1.6; margin-top: 10px; }
.land-duo ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.land-duo li {
  background: rgba(255, 255, 255, 0.12); border-radius: 14px;
  padding: 11px 15px; font-size: 15px; font-weight: 600; line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
}
.land-duo li b { color: #fff; }
.land-duo .land-ctas { margin-top: 20px; }

/* ---------- Soutenir : partager + don ---------- */
.land-support { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.support-card {
  background: var(--card); border-radius: var(--radius); padding: 22px 22px 20px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
}
.support-card h3 { font-size: 19px; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.support-card p { font-size: 14.5px; line-height: 1.55; color: #3f3c60; font-weight: 600; }
.support-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #efeaff; color: var(--ink); border: none; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: 14.5px; text-decoration: none;
  padding: 11px 16px; border-radius: 13px;
  box-shadow: 0 4px 0 #d9d2f6;
  transition: transform 0.12s, box-shadow 0.12s;
}
.share-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #d9d2f6; }
.share-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #d9d2f6; }
.share-btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
.share-btn.gold { background: var(--accent); box-shadow: 0 4px 0 var(--accent-dark); }
.share-btn.gold:hover { box-shadow: 0 5px 0 var(--accent-dark); }
.share-btn.gold:active { box-shadow: 0 1px 0 var(--accent-dark); }
.share-btn.ink { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #17142e; }
.share-btn.ink:hover { box-shadow: 0 5px 0 #17142e; }
.share-btn.ink:active { box-shadow: 0 1px 0 #17142e; }

/* ---------- Bandeau final ---------- */
.land-final { position: relative; z-index: 1; max-width: 1080px; margin: 46px auto 0; padding: 0 18px; }
.land-final .cta-band { text-align: center; }
.land-final h2 { font-size: clamp(23px, 3.4vw, 30px); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .land-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; text-align: center; }
  .land-sub { margin-left: auto; margin-right: auto; }
  .land-ctas, .land-stats { justify-content: center; }
  .land-hero-art { max-width: 620px; margin: 0 auto; }
  .land-cards, .land-shots, .news-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .land-duo { grid-template-columns: 1fr; gap: 20px; }
  .land-duo.rev .land-duo-art { order: 0; }
  .land-duo-art { max-width: 560px; margin: 0 auto; }
  .land-support { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

/* ==================== Page Parents (landing) ==================== */
/* La page Parents reprend les pièces de la vitrine : hero en deux
   colonnes quand le hero() reçoit une illustration (.split), bandeau
   des quatre bénéfices en un seul panneau, sections .art illustrées
   en vis-à-vis (l'image passe à gauche en .rev). */
.page-hero.split {
  text-align: left; display: grid;
  grid-template-columns: 1.08fr 1fr; gap: 34px; align-items: center;
  padding: 34px 0 28px;
}
.page-hero.split .hero-stats { justify-content: flex-start; }
.ph-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.ph-art img {
  display: block; width: 100%; height: auto;
  border-radius: 24px; box-shadow: 0 18px 46px rgba(10, 5, 40, 0.4);
}
/* Le bandeau des bénéfices : un seul panneau blanc, quatre piliers */
.ph-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 26px; }
.ph-point { padding: 6px 0; }
.ph-point .pi { font-size: 26px; line-height: 1; display: inline-block; margin-bottom: 6px; }
.ph-point b { display: block; font-size: 16px; margin-bottom: 3px; }
.ph-point p { font-size: 14.5px; line-height: 1.5; margin: 0; color: #3f3c60; }
/* Article illustré : texte + figure côte à côte */
.art.split { display: grid; grid-template-columns: 1.12fr 1fr; gap: 26px; align-items: center; }
.art.split > .art-txt { min-width: 0; }
.art.split > .art-fig { margin: 0; }
.art.split > .art-fig img {
  display: block; width: 100%; height: auto;
  border-radius: 18px; border: 3px solid #efeaff;
  box-shadow: 0 12px 26px rgba(45, 42, 74, 0.14);
}
/* Variante « détachée » pour une illustration à fond transparent
   (mascotte) : pas de cadre, l'image flotte sur la carte */
.art.split > .art-fig.bare img {
  border: none; box-shadow: none; border-radius: 24px;
  width: auto; max-width: min(320px, 100%); margin: 0 auto;
}
.art.split.rev > .art-fig { order: -1; }
@media (max-width: 820px) {
  .page-hero.split { grid-template-columns: 1fr; gap: 22px; padding-top: 28px; }
  .art.split { grid-template-columns: 1fr; gap: 14px; }
  .art.split.rev > .art-fig { order: 2; }
  .art.split > .art-fig { max-width: 560px; margin: 0 auto; width: 100%; }
  .ph-points { grid-template-columns: 1fr 1fr; gap: 8px 18px; }
}
@media (max-width: 460px) {
  .ph-points { grid-template-columns: 1fr; }
}

/* ==================== Page Comment ça marche (landing élèves) ==================== */
/* Le parcours Choisir → Répondre → Progresser → Gagner : cartes
   numérotées avec la capture réelle du jeu correspondante (toutes
   en 4:3, elles s'alignent). Desktop : grille 2×2 ; mobile : pile
   verticale, l'ordre de lecture 1 → 4 est conservé — l'image passe
   avant le texte (un enfant regarde d'abord l'écran, lit ensuite). */
.journey { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 4px; }
.j-step {
  background: #fff; border: 3px solid #efeaff; border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 4px 14px rgba(30, 20, 90, 0.08);
}
.j-head { display: flex; align-items: center; gap: 10px; }
.j-n {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--ink); font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 var(--accent-dark);
}
.j-head h3 { margin: 0; font-size: 17.5px; line-height: 1.2; }
.j-fig { margin: 0; border-radius: 12px; overflow: hidden; border: 2px solid #f0eefc; }
.j-fig img { display: block; width: 100%; height: auto; }
.j-step > p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3f3c60; }
/* Le CTA de fin de parcours, séparé par une bordure pointillée */
.j-cta {
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 2px dashed #efeaff;
}
.j-cta p { margin: 0; font-weight: 700; color: var(--ink); }
/* L'ancre d'une section est ciblée depuis le CTA du hero (#parcours) :
   même respiration que .art h2[id] */
.art[id] { scroll-margin-top: 80px; }
/* Le renvoi vers la page « Guide du jeu » (elle existe : vrai lien,
   plus de note « bientôt ») */
.guide-note { margin: 14px 0 2px; font-size: 15px; font-weight: 600; color: #3f3c60; }

/* ==================== Page Guide du jeu (/aide/guide-du-jeu/) ==================== */
/* La documentation de référence : un sommaire en cartes cliquables,
   des rubriques .art à ancre stable (extensibles via le tableau
   SECTIONS de buildGuide()), des détails repliables (le style
   .art details sert de base), des tableaux de valeurs exactes —
   lues dans le code du jeu au moment du run. */
.g-toc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.g-toc-item {
  background: #fff; border: 3px solid #efeaff; border-radius: 16px;
  padding: 12px 14px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 4px 14px rgba(30, 20, 90, 0.08);
  transition: transform 0.15s, border-color 0.15s;
}
.g-toc-item:hover { transform: translateY(-3px); border-color: var(--accent); }
.g-toc-item b { font-size: 15.5px; line-height: 1.25; }
.g-toc-item small { font-size: 13px; color: var(--muted); line-height: 1.45; font-weight: 600; }
/* Les tableaux de règles (le wrapper .g-scroll absorbe les petits écrans) */
.g-scroll { overflow-x: auto; margin: 12px 0; }
.g-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.g-table th, .g-table td { text-align: left; padding: 8px 12px; border-bottom: 2px solid #f0eefc; }
.g-table thead th { color: var(--accent-dark); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.g-table tbody b { color: var(--ink); }
/* Le tableau des chances de loot : colonnes centrées, 1ʳᵉ colonne à gauche */
.g-table-pct th, .g-table-pct td { text-align: center; }
.g-table-pct td:first-child, .g-table-pct th:first-child { text-align: left; }
/* Le duo de tableaux gains/dépenses des Neuronz */
.g-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.g-duo .g-scroll { margin: 0; }
/* La collection de reliques */
.g-relics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.g-relic {
  background: #f6f4ff; border-radius: 14px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 1px; font-size: 14.5px;
}
.g-relic small { color: var(--muted); font-weight: 700; font-size: 12px; }
/* Le retour au sommaire, discret, en pied de rubrique */
.g-top { margin: 16px 0 0; font-size: 13.5px; }
.g-top a { color: var(--muted); text-decoration: none; font-weight: 700; }
.g-top a:hover { text-decoration: underline; }
/* La mascotte « détachée » du hero (fond transparent, pas de cadre) */
.ph-art img.bare {
  border: none; box-shadow: none; border-radius: 24px;
  width: auto; max-width: min(400px, 100%); margin: 0 auto;
}
@media (max-width: 760px) {
  .g-toc { grid-template-columns: 1fr; }
  .g-duo { grid-template-columns: 1fr; gap: 10px; }
  .g-relics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .g-relics { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .journey { grid-template-columns: 1fr; }
  .j-cta { flex-direction: column; gap: 10px; }
}

/* ==================== Page Connexion / Inscription ==================== */
/* Deux colonnes : la promesse Brainizy (encart) + le formulaire. Sur
   mobile l'encart se compacte au-dessus du formulaire. */
.auth-main {
  position: relative; z-index: 1;
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px; align-items: start;
  padding: 34px 18px 14px;
}
.auth-pitch { color: #fff; padding-top: 10px; }
.auth-pitch img {
  display: block; width: 100%; max-width: 400px; height: auto;
  border-radius: 24px; box-shadow: 0 18px 46px rgba(10, 5, 40, 0.4);
  margin-bottom: 18px;
}
.auth-pitch h2 { font-size: clamp(22px, 3vw, 29px); font-weight: 800; line-height: 1.2; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18); }
.auth-pitch ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.auth-pitch li {
  background: rgba(255, 255, 255, 0.12); border-radius: 14px;
  padding: 10px 14px; font-size: 14.5px; font-weight: 600; line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
}
.auth-pitch .pitch-note { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
/* L'onglet actif du sélecteur connexion / inscription */
.auth-tabs {
  display: flex; gap: 6px; background: #f1edff;
  border-radius: 14px; padding: 5px; margin-bottom: 14px;
}
.auth-tabs button {
  flex: 1; border: none; background: transparent; font-family: inherit;
  font-weight: 800; font-size: 15px; color: var(--muted);
  padding: 10px 8px; border-radius: 10px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-tabs button[aria-selected="true"] {
  background: #fff; color: var(--ink);
  box-shadow: 0 2px 8px rgba(30, 20, 90, 0.14);
}
.auth-tabs button:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 1px; }
@media (max-width: 940px) {
  .auth-main { grid-template-columns: 1fr; gap: 20px; padding-top: 22px; }
  .auth-pitch { padding-top: 0; display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; }
  .auth-pitch img { width: 110px; margin-bottom: 0; }
  .auth-pitch ul { margin-top: 8px; }
  .auth-pitch .pitch-note { display: none; } /* reste dans le formulaire : la note « email d'un parent » */
}

/* ==================== Page Centre d'aide (/aide/) ==================== */
/* La recherche (js/aide.js filtre les FAQ au fil de la saisie) ne
   s'affiche que si le script tourne : sans JS, la page reste une
   FAQ complète navigable par rubriques — jamais de champ mort. */
html:not(.hc-js) .hc-searchbox,
html:not(.hc-js) .hc-hint,
html:not(.hc-js) .hc-count,
html:not(.hc-js) #hc-empty { display: none; }
.hc-searchbox { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; }
.hc-searchbox .hc-glass { font-size: 26px; flex-shrink: 0; }
.hc-searchbox input {
  flex: 1; min-width: 0; font: inherit; font-size: 17px; font-weight: 700;
  color: var(--ink); background: #fff;
  padding: 13px 16px; border: 3px solid #efeaff; border-radius: 14px;
}
.hc-searchbox input::placeholder { color: #a89fc9; font-weight: 600; }
.hc-searchbox input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hc-hint { font-size: 13.5px; color: var(--muted); font-weight: 600; margin: 8px 0 0; }
.hc-count { font-weight: 800; font-size: 15px; color: var(--ink); margin: 12px 0 0; min-height: 18px; }
/* Le filtrage masque questions et rubriques sans résultat (l'attribut
   [hidden] fait le travail ; la règle couvre les vieux UA) */
.hc-sec[hidden], .hc-sec details[hidden] { display: none; }
details summary mark {
  background: #ffe9a8; color: inherit; border-radius: 4px; padding: 0 2px;
}
/* L'exemple d'ancre dans l'intro des rubriques, sobre */
.art code {
  font-size: 13.5px; background: #f6f4ff; border-radius: 6px;
  padding: 2px 7px; color: #4b3a8f; word-break: break-all;
}

/* ============================================================
   Page « Presse & professeurs » (/testeurs.html)
   ============================================================ */
/* CTA selon le plan : par défaut (visiteur, gratuit, max) on propose
   de demander un accès testeur ; le testeur connecté voit « Donnez
   votre avis » + « Partagez Brainizy ». html.plan-tester est posé par
   js/site.js quand GET /api/me renvoie plan=tester — jamais par le
   client seul. Les deux blocs portent le même gabarit interne
   (.testeur-ctas) : seul l'affichage du conteneur bascule. */
.testeur-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.testeur-have { display: none; }
.plan-tester .testeur-need { display: none; }
.plan-tester .testeur-have { display: block; }
/* Le bouton « Partagez » copie le lien quand navigator.share manque :
   petit mot de confirmation, même esprit que les toasts du jeu */
.share-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; font-weight: 700; font-size: 14.5px;
  padding: 12px 22px; border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
  z-index: 60;
}
.share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* La ligne de courtoisie sous le CTA de la section avis */
.muted-line { font-size: 14px; color: var(--muted); font-weight: 600; margin-top: 14px; }