/* Composants — cf. maquette Claude Design (planches 1a→1j, 2a/2b) */

/* ===== En-tête ===== */
.site-header{
  border-bottom:2px solid var(--ink);
  background:var(--surface);
}
.site-header__bar{
  display:flex;align-items:center;gap:24px;padding-top:16px;padding-bottom:16px;
}
.logo{
  font:800 22px var(--font-head);letter-spacing:-.03em;
  display:inline-flex;align-items:baseline;text-decoration:none;color:var(--ink);
}
.logo__dot{display:inline-block;width:7px;height:7px;background:var(--marker);margin:0 2px;border-radius:2px}
.site-header__cycles{display:flex;gap:18px;font-size:14px;font-weight:600;margin-right:auto}
.site-header__cycles a{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-2)}
.site-header__cycles a[aria-current]{color:var(--ink)}
.site-header__cycles .dot{width:8px;height:8px;border-radius:50%}
.site-header__search{
  flex:none;width:260px;max-width:40vw;
  border:1.5px solid var(--line);border-radius:var(--radius-m);
  padding:9px 12px;font:14px var(--font-text);background:var(--white);color:var(--ink-2)
}
.site-header__icon-btn{
  display:none;flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--white);align-items:center;justify-content:center;color:var(--ink);cursor:pointer;list-style:none
}
.site-header__icon-btn::-webkit-details-marker{ display:none }
.site-header__menu{ position:relative }
.site-header__menu-panel{
  display:none;position:absolute;right:0;top:46px;z-index:20;min-width:180px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-card);
  flex-direction:column;padding:8px
}
.site-header__menu[open] .site-header__menu-panel{ display:flex }
.site-header__menu-panel a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.site-header__menu-panel a:hover{background:var(--key-bg)}
.site-header__menu-panel .dot{width:8px;height:8px;border-radius:50%}
@media (max-width:760px){
  .site-header__cycles, .site-header__search{ display:none }
  .site-header__icon-btn{ display:flex }
}

/* ===== Fil d'Ariane ===== */
.breadcrumb{padding-top:14px;padding-bottom:14px;font-size:13px;color:var(--ink-2)}
.breadcrumb a{text-decoration:none;color:var(--ink-2)}
.breadcrumb a:hover{color:var(--accent-dark)}
.breadcrumb__sep{margin:0 6px;opacity:.6}
.breadcrumb__current{color:var(--ink);font-weight:600}

/* ===== Badge matière (façon tableau périodique) ===== */
.badge-matiere{
  display:grid;place-items:center;width:56px;height:56px;flex:none;
  border-radius:var(--radius-m);border:1.5px solid var(--cycle,var(--line));
  background:var(--cycle-tint,var(--surface));
  font:700 22px var(--font-head);color:var(--cycle-dark,var(--ink))
}
.badge-matiere--s{width:40px;height:40px;font-size:16px;border-radius:8px}

/* ===== Badge cycle/niveau (ex: "6e", "Tle") ===== */
.badge-niveau{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:var(--radius-m);
  background:var(--cycle-tint);color:var(--cycle-dark);border:1.5px solid var(--cycle);
  font:800 20px var(--font-head);line-height:1;flex:none
}
.badge-niveau small{font:600 9px var(--font-mono);text-transform:uppercase;margin-bottom:2px}

#accueil, .bloc-parents{ }
@media (max-width:900px){
  #accueil{ grid-template-columns:1fr !important }
  .bloc-parents{ grid-template-columns:1fr !important;gap:20px !important }
}
@media (min-width:901px) and (max-width:1150px){
  .bloc-parents{ grid-template-columns:1fr 1fr !important }
}

/* ===== Hero (accueil) ===== */
.hero{ width:100%; padding-top:56px; padding-bottom:64px; display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center }
.hero__eyebrow{ font:700 12px var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2) }
.hero h1{ font-size:44px; line-height:1.1; margin-top:14px }
.hero__sub{ font-size:17px; color:var(--ink-2); margin-top:18px; max-width:46ch }
.hero__ctas{ display:flex; align-items:center; gap:20px; margin-top:26px; flex-wrap:wrap }
.hero__cta-primary{
  display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 26px; border-radius:99px;
  background:var(--ink); color:#fff; font-weight:700; font-size:15.5px; text-decoration:none
}
.hero__cta-secondary{ font-weight:700; font-size:15px; text-decoration-thickness:1.5px }
.hero__trust{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:22px; font-size:13px; color:var(--ink-2) }
.hero__trust span:not(:last-child)::after{ content:"·"; margin-left:10px; color:var(--line-2) }

.hero-visual{ display:flex; justify-content:center; overflow:visible }
.hero-visual img{
  width:100%; height:auto; max-width:574px;
  transform:translateX(-32px);
  transition:transform .35s ease, filter .35s ease;
  will-change:transform;
}
.hero-visual img:hover{
  transform:translateX(-32px) translateY(-6px) scale(1.015);
  filter:drop-shadow(0 18px 28px rgba(22,32,43,.14));
}
@media (max-width:1000px){
  .hero{ grid-template-columns:1fr; padding-top:40px; gap:32px }
  .hero-visual{ display:none }
}

/* ===== Trouve ton niveau (accueil) ===== */
.cycles-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.cycle-card{ border-radius:var(--radius-l); padding:24px; display:flex; flex-direction:column; gap:18px; border:1px solid var(--line) }
.cycle-card__tete{ display:flex; gap:16px; align-items:flex-start }
.cycle-card__icone{ width:52px; height:52px; flex:none; border-radius:50%; display:grid; place-items:center }
.cycle-card__titre{ font-size:19px; color:var(--ink) }
.cycle-card__texte{ font-size:13.5px; color:var(--ink-2); margin-top:4px; line-height:1.45 }
.cycle-card__pills{ display:flex; flex-wrap:wrap; gap:6px }
.cycle-card__pills a{ padding:6px 8px; border-radius:8px; font-weight:700; font-size:12px; text-decoration:none; white-space:nowrap }
.cycle-card--primaire{ background:var(--primaire-pale) }
.cycle-card--primaire .cycle-card__icone{ background:var(--primaire-tint); color:var(--primaire-dark) }
.cycle-card--primaire .cycle-card__pills a{ background:var(--primaire-tint); color:var(--primaire-dark) }
.cycle-card--college{ background:var(--college-pale) }
.cycle-card--college .cycle-card__icone{ background:var(--college-tint); color:var(--college-dark) }
.cycle-card--college .cycle-card__pills a{ background:var(--college-tint); color:var(--college-dark) }
.cycle-card--lycee{ background:var(--lycee-pale) }
.cycle-card--lycee .cycle-card__icone{ background:var(--lycee-tint); color:var(--lycee-dark) }
.cycle-card--lycee .cycle-card__pills a{ background:var(--lycee-tint); color:var(--lycee-dark) }
@media (max-width:900px){ .cycles-3{ grid-template-columns:1fr } }

/* ===== Apprendre / comprendre / vérifier (accueil) ===== */
.features-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 }
.feature{ display:flex; gap:14px; align-items:flex-start; padding:4px 24px }
.feature:first-child{ padding-left:0 }
.feature:not(:last-child){ border-right:1px solid var(--line) }
.feature__icone{ width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center }
.feature__titre{ font-size:15px; display:block; margin-bottom:3px }
.feature__texte{ font-size:13.5px; color:var(--ink-2); line-height:1.4 }
@media (max-width:900px){
  .features-3{ grid-template-columns:1fr }
  .feature{ border-right:none !important; border-top:1px solid var(--line); padding:16px 0 }
  .feature:first-child{ border-top:none; padding-top:0 }
}

/* ===== Sélecteur de niveau (accueil) ===== */
.selecteur-niveau{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:28px;box-shadow:var(--shadow-card)
}
.selecteur-niveau h2{font-size:19px;margin-bottom:18px}
.selecteur-niveau__groupe + .selecteur-niveau__groupe{margin-top:16px}
.selecteur-niveau__label{display:flex;align-items:center;gap:8px;font:600 13px var(--font-text);color:var(--ink-2);margin-bottom:10px}
.selecteur-niveau__label .dot{width:8px;height:8px;border-radius:50%}
.selecteur-niveau__grid{display:flex;flex-wrap:wrap;gap:8px}
.selecteur-niveau__grid a{
  min-width:52px;padding:10px 14px;text-align:center;border-radius:var(--radius-m);
  background:var(--cycle-tint);color:var(--cycle-dark);font-weight:700;text-decoration:none;
  border:1.5px solid transparent;
}
.selecteur-niveau__grid a:hover{border-color:var(--cycle)}

/* ===== Cartes matière / notion (pages hub) ===== */
.grille-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* !important nécessaire : plusieurs gabarits fixent le nombre de colonnes en style
   inline (repeat(3,1fr), repeat(4,1fr)...) pour varier la densité par section ;
   sans ça, cette règle ne pourrait jamais l'emporter sur l'inline en mobile. */
@media (max-width:900px){
  .grille-cartes{grid-template-columns:1fr !important}
  .matiere-entete{grid-template-columns:1fr !important}
}
@media (min-width:901px) and (max-width:1100px){ .grille-cartes{grid-template-columns:repeat(2,1fr) !important} }

.carte-matiere{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:20px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink)
}
.carte-matiere__tete{display:flex;gap:14px;align-items:center}
.carte-matiere__titre{font-size:18px}
.carte-matiere__meta{font-size:13px;color:var(--ink-2)}
.carte-matiere__notions{display:flex;flex-direction:column;gap:8px;font-size:14px}
.carte-matiere__notions li{display:flex;justify-content:space-between;gap:8px;color:var(--ink-2)}
.carte-matiere__voir{margin-top:auto;font-weight:700;font-size:14px;color:var(--accent-dark);text-decoration:underline}

.carte-notion{
  display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:16px 18px;text-decoration:none;color:var(--ink);border-top:3px solid var(--cycle,var(--line))
}
.carte-notion__meta{font:600 11px var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--cycle-dark,var(--ink-2))}
.carte-notion__titre{font-size:17px;margin:6px 0 4px;font-family:var(--font-head)}
.carte-notion__desc{font-size:13.5px;color:var(--ink-2)}
.carte-notion__statut{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 12px var(--font-text)}
.carte-notion__statut--validee{color:var(--ok)}
.carte-notion__statut--encours{color:var(--accent-dark)}
.carte-notion__statut--adecouvrir{color:var(--ink-2)}
.carte-notion--a-venir{cursor:default;opacity:.55;border-top-color:var(--line)}

/* ===== Bandeau de progression ===== */
.progression{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:18px 22px;display:flex;flex-direction:column;gap:8px
}
.progression__ligne{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.progression__pct{font:700 14px var(--font-mono);color:var(--cycle-dark,var(--accent-dark))}
.progression__barre{height:8px;border-radius:99px;background:var(--key-bg);overflow:hidden}
.progression__barre > span{display:block;height:100%;background:var(--cycle,var(--accent));border-radius:99px}

/* ===== Corps de cours ===== */
.cours{max-width:var(--measure);font-size:17px;line-height:1.65;color:var(--ink-2)}
.cours > * + *{margin-top:20px}
.cours h2{font-size:26px;color:var(--ink);display:flex;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1.5px solid var(--ink);margin-top:44px}
.cours h2 .num{font:600 13px var(--font-mono);color:var(--accent-dark)}
.cours strong{color:var(--ink)}
.cours mark{background:var(--highlight);color:var(--ink);padding:0 2px;border-radius:2px}

.encadre-def{
  border:1.5px solid var(--line);border-left:4px solid var(--ko);border-radius:var(--radius-m);
  background:var(--white);padding:16px 20px;font-size:15.5px
}
.encadre-def__titre{font:700 12px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ko-dark);margin-bottom:10px;display:block}
.encadre-def dl{display:flex;flex-direction:column;gap:8px}
.encadre-def dt{display:inline;font-weight:700}
.encadre-def dd{display:inline;margin:0}

.citation{border-left:3px solid var(--ink);padding-left:18px;font-style:italic;font-size:16px}
.citation__texte{font-weight:600}
.citation__source{display:block;margin-top:6px;font:600 13px var(--font-text);font-style:normal;color:var(--ink-2)}
.citation__source i{font-style:italic;font-weight:400}

.tableau-comparatif{width:100%;border-collapse:collapse;font-size:14.5px}
.tableau-comparatif th,.tableau-comparatif td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.tableau-comparatif th{background:var(--key-bg);font-family:var(--font-head);font-weight:700}
@media (max-width:640px){
  .tableau-comparatif, .tableau-comparatif tbody, .tableau-comparatif tr, .tableau-comparatif td{display:block;width:100%}
  .tableau-comparatif thead{display:none}
  .tableau-comparatif tr{border:1px solid var(--line);border-radius:var(--radius-m);margin-bottom:10px;overflow:hidden}
  .tableau-comparatif td{border:none;border-bottom:1px solid var(--line)}
  .tableau-comparatif td:before{content:attr(data-label);display:block;font:700 11px var(--font-mono);text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
}

.encadre-sujet{border-radius:var(--radius-m);overflow:hidden;border:1.5px solid var(--ink)}
.encadre-sujet__tete{display:flex;justify-content:space-between;background:var(--ink);color:#fff;padding:10px 16px;font:700 11px var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.encadre-sujet__corps{padding:18px 20px;background:var(--white)}
.encadre-sujet__titre{font:700 19px var(--font-head);margin-bottom:8px}
.encadre-sujet__label{font:700 11px var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;display:block}
.encadre-sujet ol{display:flex;flex-direction:column;gap:10px;font-size:15px}
.encadre-sujet ol li{display:grid;grid-template-columns:20px 1fr;gap:8px}
.encadre-sujet ol li b{font:700 13px var(--font-mono);color:var(--accent-dark)}

.liste-erreurs{display:flex;flex-direction:column;gap:10px}
.liste-erreurs li{position:relative;padding-left:26px;font-size:15px}
.liste-erreurs .x{position:absolute;left:0;top:0;color:var(--ko);font-weight:700}

.liste-distinctions{display:flex;flex-direction:column;gap:12px;font-size:15px}
.liste-distinctions li{padding:2px 0}
.liste-distinctions .signe{display:inline-block;background:var(--highlight);padding:0 6px;border-radius:3px;margin:0 4px;font-weight:700}

.methode{counter-reset:etape;display:flex;flex-direction:column;gap:10px}
.methode li{counter-increment:etape;position:relative;padding-left:34px}
.methode li::before{content:counter(etape);position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:700 13px var(--font-text)}

/* ===== Astuce = surligneur ===== */
.astuce{background:var(--highlight);padding:2px 6px;border-radius:3px;box-decoration-break:clone}

/* ===== Sommaire (page Notion) ===== */
.sommaire{display:flex;flex-direction:column;gap:2px;font-size:14px}
.sommaire__titre{font:700 12px var(--font-mono);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2);margin-bottom:8px}
.sommaire a{display:flex;gap:8px;padding:7px 8px;border-radius:8px;text-decoration:none;color:var(--ink-2)}
.sommaire a:hover{background:var(--key-bg)}
.sommaire a[aria-current]{background:var(--cycle-tint);color:var(--ink);font-weight:700}
.sommaire .num{font:600 11px var(--font-mono);flex:none;padding-top:1px}
.sommaire__quiz{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* Puces de sommaire mobile */
.sommaire-mobile{
  background:var(--paper);
  display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);
}
.sommaire-mobile a{
  font:600 13px var(--font-text);color:var(--ink-2);
  padding:7px 12px;border-radius:99px;background:var(--white);border:1px solid var(--line);text-decoration:none
}
.sommaire-mobile a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ===== Rail droit (notions liées + pub) ===== */
.rail-droit{display:flex;flex-direction:column;gap:28px}
.rail-droit__titre{font:700 12px var(--font-mono);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2);margin-bottom:10px}
.rail-droit__liens{display:flex;flex-direction:column;gap:12px}
.rail-droit__liens a{display:block;text-decoration:none;color:var(--ink)}
.rail-droit__liens a strong{display:block;font-size:14.5px}
.rail-droit__liens a span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}

/* Emplacement publicitaire — présent dans le DOM, masqué tant que la régie
   n'est pas branchée (cf. base.css [data-ad-slot]). Ne pas supprimer : la maquette
   (planche 2a) prévoit un rail 300x600 sticky en desktop et des pavés 300x250
   dans le corps du cours en mobile. */
/* Invisible tant qu'aucune régie publicitaire n'est réellement connectée (pas de faux encart en prod). */
.pub{display:none;border:1px dashed var(--line-2);border-radius:var(--radius-m);padding:10px;text-align:center}
.pub__label{font:600 10px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px;display:block}
.pub__zone{background:var(--key-bg);border-radius:8px;display:grid;place-items:center;color:var(--ink-2);font-size:12px}
.pub--300x600{position:sticky;top:20px}
.pub--300x600 .pub__zone{width:300px;height:600px;max-width:100%}
.pub--300x250 .pub__zone{width:300px;height:250px;max-width:100%;margin:0 auto}

/* ===== Quiz ===== */
.quiz{background:var(--white);border:2px solid var(--ink);border-radius:var(--radius-l);padding:22px 24px}
.quiz__tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.quiz__titre{font-size:18px}
.quiz__compte{font:600 13px var(--font-mono);color:var(--ink-2)}
.quiz__barre{display:flex;gap:6px;margin-bottom:20px}
.quiz__barre span{flex:1;height:6px;border-radius:99px;background:var(--key-bg)}
.quiz__barre span.fait-ok{background:var(--ok)}
.quiz__barre span.fait-ko{background:var(--ko)}
.quiz__type{font:700 11px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:8px;display:block}
.quiz__enonce{font-size:19px;font-family:var(--font-head);margin-bottom:16px}
.quiz__options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz__options[data-n="2"]{grid-template-columns:1fr 1fr}
@media (max-width:520px){ .quiz__options{grid-template-columns:1fr} }
.quiz__option{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;
  border:2px solid var(--line);border-radius:var(--radius-m);background:#fff;
  font-size:15.5px;font-weight:500;text-align:left;color:var(--ink)
}
.quiz__option:hover{border-color:var(--accent-dark)}
.quiz__option .lettre{width:24px;height:24px;flex:none;border-radius:7px;background:var(--key-bg);color:var(--ink-2);display:grid;place-items:center;font:700 12px var(--font-text)}
.quiz__option.est-select{border-color:var(--accent-dark);background:var(--accent-tint)}
.quiz__option.est-select .lettre{background:var(--accent-dark);color:#fff}
.quiz__option.est-correcte{border-color:var(--ok);background:var(--ok-tint)}
.quiz__option.est-correcte .lettre{background:var(--ok);color:#fff}
.quiz__option.est-fausse{border-color:var(--ko);background:var(--ko-tint)}
.quiz__option.est-fausse .lettre{background:var(--ko);color:#fff}
.quiz__option .marque{margin-left:auto;font:600 12px var(--font-text)}

.quiz__blank{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:19px;font-family:var(--font-head)}
.quiz__blank input{
  width:80px;height:50px;text-align:center;border-radius:var(--radius-m);border:2px solid var(--ink);
  font:700 21px var(--font-head);color:var(--ink)
}

.quiz__feedback{margin-top:16px;border-radius:12px;padding:14px 18px}
.quiz__feedback--ok{background:var(--ok-tint)}
.quiz__feedback--ko{background:var(--ko-tint)}
.quiz__feedback__titre{font:700 16px var(--font-head)}
.quiz__feedback--ok .quiz__feedback__titre{color:var(--ok)}
.quiz__feedback--ko .quiz__feedback__titre{color:var(--ko-dark)}
.quiz__feedback p{font-size:14.5px;color:var(--ink-2);margin-top:4px}

.quiz__pied{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.quiz__valider{
  height:48px;padding:0 22px;border:none;border-radius:var(--radius-m);
  background:var(--ink);color:#fff;font-weight:700;font-size:15px
}
.quiz__valider:disabled{opacity:.4;cursor:not-allowed}
.quiz__aide{font-size:12.5px;color:var(--ink-2)}

/* ===== Résultat de quiz ===== */
.resultat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);padding:24px;display:flex;gap:18px;align-items:flex-start}
.resultat__score{
  width:96px;height:96px;flex:none;border-radius:18px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;border:2.5px solid var(--ok);background:var(--ok-tint);color:var(--ok)
}
.resultat__score--insuffisant{border-color:var(--warn-dark);background:var(--warn-tint);color:var(--warn-dark)}
.resultat__score b{font:800 30px var(--font-head)}
.resultat__score span{font:600 11px var(--font-text);text-transform:uppercase}
.resultat__titre{font-size:22px;margin-bottom:6px}
.resultat__corrections{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.resultat__correction{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.resultat__badge{width:22px;height:22px;flex:none;border-radius:6px;display:grid;place-items:center;font:700 12px var(--font-text);color:#fff}
.resultat__badge--ok{background:var(--ok)}
.resultat__badge--ko{background:var(--ko)}

/* ===== Navigation précédent/suivant ===== */
.nav-notion{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.nav-notion a{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:14px 16px;text-decoration:none;color:var(--ink)}
.nav-notion__eyebrow{font:600 11px var(--font-mono);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2);display:block;margin-bottom:4px}
.nav-notion__suivant{text-align:right}
@media (max-width:640px){ .nav-notion{grid-template-columns:1fr} }

/* ===== Page Notion — mise en page responsive ===== */
[data-notion-page]{ }
@media (max-width:1100px){
  [data-notion-page]{ grid-template-columns:1fr !important; }
  [data-sommaire-desktop]{ display:none !important }
  .rail-droit{ flex-direction:row;flex-wrap:wrap }
  .pub--300x600{ display:none }
}
@media (min-width:1101px){
  [data-sommaire-mobile]{ display:none !important }
}
.pub--mobile{ margin:28px 0 }

/* ===== Pied de page ===== */
.site-footer{border-top:1px solid var(--line);margin-top:64px;padding:32px 0;font-size:13px;color:var(--ink-2)}
.site-footer__grille{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
.site-footer a{color:var(--ink-2);text-decoration:none}
.site-footer a:hover{color:var(--accent-dark)}
.site-footer__liens{display:flex;gap:18px;flex-wrap:wrap}

/* ===== Pastille "réassurance"/notes sources ===== */
.sources{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.sources b{color:var(--ink)}

/* ===== Accueil — bandeau de section (eyebrow) ===== */
.section-eyebrow{ display:inline-flex; align-items:center; gap:10px; font:700 12px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--primaire); margin-bottom:12px }
.section-eyebrow::before{ content:""; display:block; width:22px; height:5px; border-radius:99px; background:var(--primaire) }
.section-titre{ font-size:28px; line-height:1.2 }
.section-sous-titre{ color:var(--ink-2); font-size:15.5px; margin-top:8px }

/* ===== Explore les matières (accueil) ===== */
.matieres-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px }
.matiere-card{
  display:flex; gap:16px; padding:22px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-l);
  text-decoration:none; color:var(--ink)
}
.matiere-card__icone{ width:52px; height:52px; flex:none; border-radius:50%; display:grid; place-items:center }
.matiere-card__titre{ font-size:16px; font-weight:700 }
.matiere-card__texte{ font-size:13px; color:var(--ink-2); margin-top:4px; line-height:1.4 }
.matiere-card__lien{ display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:13px; font-weight:700; color:var(--primaire) }
.matieres-note{ font-size:12.5px; color:var(--ink-2); margin-top:16px }
@media (max-width:900px){ .matieres-grid{ grid-template-columns:1fr } }

/* ===== Comment ça marche (accueil) ===== */
.demo-section{ background:var(--primaire-pale); padding:56px 0 }
.demo-inner{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
.demo-steps{ display:flex; margin-top:32px }
.demo-step{ flex:1; position:relative; padding-right:18px }
.demo-step__num{
  width:40px; height:40px; border-radius:50%;
  font:800 16px var(--font-head); display:grid; place-items:center; position:relative; z-index:1
}
.demo-step:nth-child(1) .demo-step__num{ background:var(--primaire-tint); color:var(--primaire) }
.demo-step:nth-child(1) .demo-step__ligne{ background:var(--primaire) }
.demo-step:nth-child(2) .demo-step__num{ background:var(--college-tint); color:var(--college-dark) }
.demo-step:nth-child(2) .demo-step__ligne{ background:var(--college) }
.demo-step:nth-child(3) .demo-step__num{ background:#DDDEFE; color:#2A1E99 }
.demo-step__ligne{ position:absolute; top:20px; left:40px; right:-18px; height:1.5px }
.demo-step:last-child .demo-step__ligne{ display:none }
.demo-step__titre{ display:block; font-size:15px; margin:14px 0 4px }
.demo-step__texte{ font-size:13px; color:var(--ink-2); line-height:1.4 }
.demo-visual{ position:relative; min-height:360px }
.demo-visual__blob{ position:absolute; top:6%; left:14%; width:150px; height:150px; border-radius:50%; background:var(--primaire-tint); opacity:.7; z-index:0 }
.demo-visual__dot{ position:absolute; border-radius:50%; z-index:2 }
.demo-visual__griffe{ position:absolute; top:-4%; right:4%; z-index:2 }
.demo-card{
  position:absolute; width:270px; background:var(--white); border-radius:16px; box-shadow:0 18px 34px -14px rgba(22,32,43,.22);
  padding:18px; border:1px solid var(--line)
}
.demo-card--cours{ top:0; left:0; transform:rotate(-3deg) }
.demo-card--quiz{ bottom:0; right:0; transform:rotate(3deg); width:230px }
.demo-card__tag{ display:inline-flex; align-items:center; gap:6px; font:700 10.5px var(--font-mono); text-transform:uppercase; letter-spacing:.03em; color:var(--primaire-dark); background:var(--primaire-tint); padding:4px 8px; border-radius:99px }
.demo-card__titre{ font-size:17px; font-family:var(--font-head); margin:10px 0 6px }
.demo-card__texte{ font-size:12.5px; color:var(--ink-2); line-height:1.45 }
.demo-card__exemple{ margin-top:12px; padding:12px; background:var(--key-bg); border-radius:10px; font-size:13px }
.demo-card__exemple b{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-2); margin-bottom:6px; font-weight:700 }
.demo-card__frac{ display:inline-flex; align-items:center; gap:8px; font:800 20px var(--font-head); color:var(--ko-dark) }
.demo-card__progres{ height:5px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:12px }
.demo-card__progres span{ display:block; height:100%; width:60%; background:var(--primaire) }
.demo-card__q{ font-size:13.5px; font-weight:700; margin:8px 0 10px }
.demo-card__opt{ display:block; padding:8px 10px; border-radius:8px; border:1.5px solid var(--line); font-size:12.5px; margin-bottom:6px; background:#fff }
.demo-card__opt--ok{ border-color:var(--ok); background:var(--ok-tint); color:var(--ok); font-weight:700 }
.demo-card__feedback{ display:flex; gap:8px; align-items:flex-start; margin-top:8px; padding:10px; background:var(--ok-tint); border-radius:8px }
.demo-card__feedback b{ color:var(--ok) }
.demo-card__feedback p{ font-size:12px; color:var(--ink-2); margin:0 }
@media (max-width:1000px){
  .demo-inner{ grid-template-columns:1fr }
  .demo-visual{ display:none }
}

/* ===== Pour tous (accueil) ===== */
.pour-tous-question{ display:flex; align-items:center; gap:12px; margin-top:18px; font-size:15px; font-weight:700; color:var(--ink) }
.pour-tous-question label{ cursor:pointer }
.pour-tous-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:16px }
.pour-tous-card{ border-radius:var(--radius-l); padding:26px; display:flex; flex-direction:column; gap:18px }
.pour-tous-card--eleves{ background:#EFFBFC }
.pour-tous-card--parents{ background:#FFFAEE }
.pour-tous-card__tete{ display:flex; gap:18px; align-items:flex-start }
.pour-tous-card__icone{ width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center }
.pour-tous-card--eleves .pour-tous-card__icone{ background:#D0F1F6; color:var(--college-dark) }
.pour-tous-card--parents .pour-tous-card__icone{ background:#FDEBAE; color:var(--primaire-dark) }
.pour-tous-card__titre{ font-size:18px }
.pour-tous-card__texte{ font-size:13.5px; color:var(--ink-2); margin-top:4px }
.mockup{ background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:12.5px; display:flex; min-height:150px }
.mockup__sidebar{ width:40%; background:var(--white); padding:8px; display:flex; flex-direction:column; gap:3px }
.mockup__sidebar a{ display:flex; align-items:center; gap:8px; padding:6px 7px; border-radius:8px; color:var(--ink-2); text-decoration:none; font-size:12px }
.mockup__sidebar a[data-actif]{ background:var(--college-tint); color:var(--ink); font-weight:700 }
.mockup__panel{ flex:1; padding:8px 12px }
.mockup__panel-titre{ font-weight:700; font-size:12.5px; margin-bottom:4px }
.mockup__panel a{ display:flex; align-items:center; gap:8px; padding:7px 0; color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line); font-size:12px }
.mockup__panel a span:last-child:not(.mockup-badge){ margin-left:auto; flex:none; color:var(--ink-2) }
.mockup__panel a:last-child{ border-bottom:none }
.mockup-icon{ flex:none; color:var(--ink); width:15px; height:15px }
/* Badge carré coloré devant chaque ligne de mini-maquette (icône de matière ou de document). */
.mockup-badge{ flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center }
.mockup-badge--teal{ background:var(--college-tint); color:var(--college-dark) }
.mockup-badge--peach{ background:var(--primaire-tint); color:var(--primaire-dark) }
.mockup-badge--doc{ background:var(--lycee-tint); color:var(--lycee-dark) }
.mockup-badge--play{ background:var(--lycee-tint); color:var(--lycee-dark) }
.mockup-select{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:700; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:8px; width:fit-content;
  position:relative
}
.mockup-select svg{ pointer-events:none; flex:none; position:absolute; right:10px; top:50%; transform:translateY(-50%) }
.mockup-select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; border:none; background:none;
  font:inherit; font-weight:700; color:inherit; cursor:pointer; margin:0; padding:7px 28px 7px 10px; width:100%
}
.pour-tous-question .mockup-select{ font-size:13.5px }
.pour-tous-question .mockup-select select{ padding:8px 30px 8px 12px }
@media (max-width:900px){ .pour-tous-grid{ grid-template-columns:1fr } }

/* ===== Bandeau final (accueil) ===== */
.cta-bandeau{ background:var(--ink); width:100%; padding:56px 32px; text-align:center; position:relative; overflow:hidden }
.cta-bandeau__etoile{ position:absolute; left:10%; bottom:28%; transform:rotate(-12deg) }
.cta-bandeau__griffe{ position:absolute; right:10%; bottom:30% }
.cta-bandeau h2{ color:#fff; font-size:26px }
.cta-bandeau p{ color:rgba(255,255,255,.7); margin-top:8px; font-size:14.5px }
.cta-bandeau__bouton{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px; height:50px; padding:0 26px; border-radius:99px;
  background:var(--white); color:var(--primaire); font-weight:700; font-size:15px; text-decoration:none
}

/* ===== Pied de page ===== */
.site-footer-v2{ border-top:1px solid var(--line); margin-top:64px; padding:40px 0 28px }
.site-footer-v2__haut{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap }
.site-footer-v2__tagline{ font-size:13.5px; color:var(--ink-2); margin-top:8px; max-width:32ch }
.site-footer-v2__colonnes{ display:flex; gap:56px; flex-wrap:wrap }
.site-footer-v2__colonne strong{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-2); margin-bottom:10px }
.site-footer-v2__colonne a{ display:block; font-size:13.5px; color:var(--ink); text-decoration:none; margin-bottom:8px }
.site-footer-v2__colonne a:hover{ color:var(--accent-dark) }
.site-footer-v2__bas{ border-top:1px solid var(--line); margin-top:28px; padding-top:18px; font-size:12.5px; color:var(--ink-2) }
@media (max-width:700px){ .site-footer-v2__colonnes{ gap:32px } }