/* ==========================================================================
   Maeutik — pages publiques (accueil, connexion, paiement de test, textes légaux).
   S'appuie sur maeutik.css : uniquement des jetons de couleur, aucune teinte en dur
   sauf l'encre du stylo de l'élève (--pen), définie ici pour les deux thèmes.
   ========================================================================== */
:root { --pen: #1f4fb8; --hl: #fff6a8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pen: #9dbcff; --hl: #4a4413; } }
:root[data-theme="dark"] { --pen: #9dbcff; --hl: #4a4413; }

html { scroll-behavior: smooth; }
/* En sombre, le violet est clair : texte foncé sur les boutons principaux pour garder le contraste. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #12142b; } :root:not([data-theme="light"]) .btn-primary:hover { background: var(--violet-ink); } }
:root[data-theme="dark"] .btn-primary { color: #12142b; }
:root[data-theme="dark"] .btn-primary:hover { background: var(--violet-ink); }
body { overflow-x: hidden; }
section[id], [id].anchor { scroll-margin-top: 72px; }

/* ---- en-tête ---- */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.site-nav { display: none; gap: 4px; margin-left: 20px; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: var(--fs-sm); padding: 8px 10px; border-radius: var(--r-sm); }
.site-nav a:hover { color: var(--ink); background: var(--violet-soft); }
.head-student { display: none; }
@media (min-width: 880px) { .site-nav { display: flex; } }
@media (min-width: 560px) { .head-student { display: inline-flex; } }

/* ---- sections ---- */
.section { padding: 56px 0; }
.section-alt { background: var(--sheet); border-block: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 28px; }
.section-head h2 { margin-bottom: 10px; }
.section-head p { color: var(--ink-2); font-size: var(--fs-md); margin: 0; }
.lead { font-size: var(--fs-md); color: var(--ink-2); }
@media (min-width: 900px) { .section { padding: 80px 0; } h2 { font-size: var(--fs-2xl); } }

/* ---- accroche ---- */
.hero { display: grid; gap: 36px; padding-block: 36px 56px; align-items: center; }
.hero h1 { font-size: var(--fs-3xl); margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--violet); }
.hero .lead { max-width: 34em; margin-bottom: 24px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.hero-note { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }
@media (min-width: 940px) { .hero { grid-template-columns: 1fr 1fr; gap: 56px; padding-block: 64px 88px; } }
@media (max-width: 400px) { .hero-cta .btn { width: 100%; } }

/* ---- le cahier : un échange aligné sur les lignes Seyès (32 px) ---- */
.notebook { border-radius: 6px var(--r-lg) var(--r-lg) 6px; box-shadow: var(--shadow-2); border: 1px solid var(--line); padding: 14px 14px 18px 58px; line-height: 32px; background-position: 0 6px; overflow: hidden; }
.nb-date { text-align: right; color: var(--pen); font-style: italic; font-size: var(--fs-sm); margin: 0; }
.nb-title { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.nb-title span { text-decoration: underline; text-decoration-color: var(--margin); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nb-line { position: relative; margin: 0; overflow-wrap: anywhere; }
.nb-line .who-mark { position: absolute; left: -50px; top: 2px; width: 28px; height: 28px; display: grid; place-items: center; font-size: 1.15rem; line-height: 1; border-radius: 8px; }
.nb-me { color: var(--pen); font-style: italic; font-size: 1.06rem; }
.nb-tutor { color: var(--ink); background: var(--violet-soft); border-left: 3px solid var(--violet); padding: 0 10px; border-radius: 0 6px 6px 0; }
.nb-tutor .who-mark { background: var(--violet); color: #fff; font: 800 .9rem var(--font-display); }
.nb-tutor b { color: var(--violet-ink); }
.nb-strike { text-decoration: line-through; text-decoration-color: var(--margin); color: var(--ink-3); }
.reward-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; vertical-align: middle; padding: 0 10px; border-radius: var(--r-pill); background: var(--mango); color: #3b2500; font: 800 var(--fs-sm) var(--font-display); }
.reward-chip.soft { background: var(--mango-soft); color: var(--mango-ink); }
.nb-caption { font-size: var(--fs-sm); color: var(--ink-3); margin: 12px 4px 0; }
@media (min-width: 940px) { .notebook { transform: rotate(-.8deg); } }
@keyframes write { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.nb-anim .nb-line { animation: write .5s var(--d, 0s) ease both; }
.nb-anim .reward-chip { animation: pop .5s calc(var(--d, 0s) + .3s) cubic-bezier(.2,.8,.2,1) both; }

/* ---- étapes ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding-left: 60px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -4px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 800 1.25rem var(--font-display); background: var(--sheet); }
.steps h3 { font-size: var(--fs-md); margin-bottom: 6px; }
.steps p { color: var(--ink-2); margin-bottom: 12px; }
.step-demo { display: inline-block; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--sheet); font-size: var(--fs-sm); }
.code-chip { font: 800 1.05rem var(--font-display); letter-spacing: .08em; color: var(--ink); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .steps > li { padding: 60px 0 0; }
  .steps > li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 56px; right: -18px; border-top: 2px dashed var(--line-strong); }
}

/* ---- élèves ---- */
.split { display: grid; gap: 36px; align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } .split-rev > :first-child { order: 2; } }
.demo-sheet { padding: 12px 14px 16px 58px; line-height: 32px; background-position: 0 4px; border-radius: var(--r-lg); border: 1px solid var(--line); min-height: 226px; }
.demo-tabs { margin-bottom: 14px; }
.demo-sheet .nb-line + .nb-line { margin-top: 0; }
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.feature-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.feature-list h3 { font-size: var(--fs-md); margin: 2px 0 4px; }
.feature-list p { margin: 0; color: var(--ink-2); }
.feature-list .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: var(--violet-soft); }
.exam-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.progress-card { margin-top: 28px; display: grid; gap: 12px; }
.progress-card .lvl { display: flex; align-items: center; gap: 12px; }
.progress-card .lvl b { font-family: var(--font-display); }
.badges-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.badges-row .badge-tile { font-size: var(--fs-xs); font-weight: 700; min-width: 0; overflow-wrap: anywhere; hyphens: auto; line-height: 1.25; }

/* ---- parents : aperçu du tableau de bord ---- */
.mock { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px; }
.mock-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.mock-head h3 { font-size: var(--fs-md); }
.mock-head .streak { flex: none; }
.bars { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.bars .track { height: 10px; background: var(--paper); border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--line); }
.bars .track i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.report { border-top: 1px solid var(--line); padding-top: 14px; font-size: var(--fs-sm); }
.report p { margin: 0 0 6px; }
.report .who { margin-bottom: 6px; }
.alert-mock { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; background: var(--margin-soft); border-radius: var(--r-md); font-size: var(--fs-sm); }

/* ---- classes ---- */
.classes { display: grid; gap: 28px; }
@media (min-width: 860px) { .classes { grid-template-columns: 1fr 1fr; gap: 40px; } }
.classes h3 { font-size: var(--fs-md); margin-bottom: 8px; color: var(--ink-2); }
.class-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.class-list li { display: grid; grid-template-columns: 112px 1fr; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.class-list .cl { font: 700 var(--fs-base) var(--font-display); }
.class-list .subj { color: var(--ink-2); font-size: var(--fs-sm); }
.class-list .pill { grid-column: 2; justify-self: start; }
@media (max-width: 420px) { .class-list li { grid-template-columns: 1fr; } .class-list .pill { grid-column: 1; } }

/* ---- tarifs ---- */
.pricing { display: grid; gap: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.pricing > div { padding: 22px 18px; }
.pricing .calc { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .pricing { grid-template-columns: 1.1fr 1fr; } .pricing > div { padding: 32px; } .pricing .calc { border-bottom: 0; border-right: 1px solid var(--line); } }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.seg button { font: 700 var(--fs-sm) var(--font-display); min-height: 40px; min-width: 44px; padding: 6px 14px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-1); outline: 2px solid var(--violet); outline-offset: -2px; }
.seg button small { font: 400 var(--fs-xs) var(--font-body); color: var(--leaf); margin-left: 4px; }
.calc-group { margin-bottom: 20px; }
.calc-group > .lbl { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 8px; }
.total { margin: 6px 0 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.total b { font: 800 clamp(2rem, 7vw, 2.8rem) var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.total span { color: var(--ink-2); }
.breakdown { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line-strong); font-size: var(--fs-sm); color: var(--ink-2); }
.breakdown li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.breakdown li span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.checks li::before { content: ""; width: 14px; height: 8px; border-left: 3px solid var(--leaf); border-bottom: 3px solid var(--leaf); transform: rotate(-45deg); margin: 6px 0 0 3px; }
.methods { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.method { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; background: var(--sheet); }
.method svg { width: 18px; height: 18px; }
.fine { font-size: var(--fs-sm); color: var(--ink-2); }
.fine p { margin-bottom: 6px; }

/* ---- confiance ---- */
.rules { margin: 0; border-top: 2px solid var(--ink); }
.rules > div { display: grid; gap: 4px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rules dt { font: 700 var(--fs-md) var(--font-display); }
.rules dd { margin: 0; color: var(--ink-2); }
@media (min-width: 860px) { .rules > div { grid-template-columns: 300px 1fr; } }

/* ---- questions ---- */
.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; position: relative; font: 700 var(--fs-md) var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 22px; width: 10px; height: 10px; border-right: 2.5px solid var(--violet); border-bottom: 2.5px solid var(--violet); transform: rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 27px; }
.faq details > div { padding: 0 0 18px; color: var(--ink-2); }

/* ---- bandeau final ---- */
.closing { padding: 28px 18px 28px 60px; border-radius: var(--r-lg); border: 1px solid var(--line); line-height: 32px; background-position: 0 20px; }
.closing h2 { font-size: var(--fs-xl); line-height: 32px; margin-bottom: 0; }
.closing p { margin: 0 0 32px; color: var(--ink-2); }
.closing .hero-cta { margin: 0; }

/* ---- pied de page ---- */
.site-foot { border-top: 1px solid var(--line); padding: 36px 0 28px; font-size: var(--fs-sm); color: var(--ink-2); }
.foot-grid { display: grid; gap: 24px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-foot h2 { font-size: var(--fs-sm); color: var(--ink); margin-bottom: 10px; }
.site-foot a { color: var(--ink-2); }
.site-foot a:hover { color: var(--violet); }
.site-foot .logo { color: var(--ink); }
.foot-bottom { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); }

/* ---- connexion ---- */
.auth-main { padding-block: 28px 56px; }
.auth-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 940px) { .auth-grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 56px; padding-top: 24px; } }
.auth-card { padding: 22px 18px; box-shadow: var(--shadow-1); }
@media (min-width: 480px) { .auth-card { padding: 28px; } }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.auth-tabs a { text-align: center; text-decoration: none; font: 700 var(--fs-sm) var(--font-display); color: var(--ink-2); padding: 10px 8px; border-radius: var(--r-sm); }
.auth-tabs a[aria-current="page"] { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-1); outline: 2px solid var(--violet); outline-offset: -2px; }
.auth-card h1 { font-size: var(--fs-xl); margin-bottom: 6px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 92px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 36px; font-size: var(--fs-sm); }
.field .hint.ok { color: var(--leaf); }
.auth-card .form-error:empty { display: none; }
.form-ok { background: var(--leaf-soft); color: var(--ink); padding: 12px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); }
.auth-aside { padding: 18px 18px 18px 60px; line-height: 32px; background-position: 0 11px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.auth-aside h2 { font-size: 1.2rem; line-height: 32px; margin: 0; }
.auth-aside ul { margin: 0; padding: 0; list-style: none; }
.auth-aside li { position: relative; }
.auth-aside li .who-mark { position: absolute; left: -45px; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 800 .8rem/1 var(--font-display); background: var(--sheet); }
.auth-aside p { margin: 0; }
.auth-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); }

/* ---- paiement de test ---- */
.pay-main { max-width: 560px; margin: 0 auto; padding: 20px 16px 56px; display: flex; flex-direction: column; gap: 18px; }
.banner-test strong { font: 800 var(--fs-md) var(--font-display); letter-spacing: .01em; }
.banner-test p { margin: 2px 0 0; font-size: var(--fs-sm); }
.pay-amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }
.pay-amount b { font: 800 clamp(1.9rem, 8vw, 2.5rem) var(--font-display); font-variant-numeric: tabular-nums; }
.pay-mock { border: 2px dashed var(--line-strong); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pay-mock .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input[readonly] { background: var(--paper); color: var(--ink-2); }
.op-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-choice label { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px; border: 2px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; font-weight: 700; }
.op-choice label:has(input:checked) { border-color: var(--violet); background: var(--violet-soft); }
.op-choice input { accent-color: var(--violet); width: 18px; height: 18px; }
.pp-look { display: grid; place-items: center; min-height: 52px; border-radius: var(--r-pill); background: var(--sky-soft); border: 2px solid var(--sky); color: var(--ink); font: 800 1.15rem var(--font-display); font-style: italic; }
.pay-actions { display: grid; gap: 10px; }
#pay-msg:empty { display: none; }
@media (min-width: 480px) { .pay-actions { grid-template-columns: 1fr 1fr; } }

/* ---- textes légaux ---- */
.legal-main { padding-block: 28px 64px; }
.legal { max-width: 800px; margin: 0 auto; }
.legal-doc { padding: 22px 18px; }
@media (min-width: 640px) { .legal-doc { padding: 36px 44px; } }
.legal h1 { font-size: clamp(1.6rem, 6vw, 2.25rem); margin-bottom: 8px; }
.legal h2 { font-size: var(--fs-lg); margin: 34px 0 10px; padding-top: 4px; }
.legal h3 { font-size: var(--fs-md); margin: 20px 0 8px; }
.legal p, .legal li { color: var(--ink); }
.legal ul, .legal ol { padding-left: 1.3em; margin: 0 0 .75em; }
.legal li { margin-bottom: 4px; }
.legal .toc { margin: 22px 0 6px; padding: 14px 18px; background: var(--paper); border-radius: var(--r-md); border: 1px solid var(--line); }
.legal .toc ol { margin: 6px 0 0; columns: 2 220px; column-gap: 28px; }
.legal .toc a { text-decoration: none; }
.legal .toc a:hover { text-decoration: underline; }
.draft-note { margin-bottom: 18px; }
.draft-note strong { font-family: var(--font-display); }
.ph { background: var(--hl); padding: 0 4px; border-radius: 4px; font-weight: 700; }
.legal table.table { margin: 8px 0 16px; }

/* Trois formules */
.tiers { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 18px; }
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; background: var(--sheet); border: 1.5px solid var(--line); border-radius: var(--r-lg); cursor: pointer; min-width: 0; }
.tier:hover { border-color: var(--line-strong); }
.tier.on { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.tier h3 { font-size: var(--fs-lg); }
.tier-pitch { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.tier-price { margin: 4px 0 2px; display: flex; align-items: baseline; gap: 6px; }
.tier-price b { font: 800 var(--fs-xl) var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.tier-price span { color: var(--ink-3); font-size: var(--fs-sm); }
.tier ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--ink-2); }
.tier-flag { position: absolute; top: -11px; left: 16px; background: var(--mango); color: #3a2400; font: 700 var(--fs-xs) var(--font-body); letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill); }