/* Repère · soutien scolaire maths — feuille de style partagée */
:root{
  --bg:#f7f8fc; --ink:#13162a; --muted:#6a7290; --card:#fff;
  --accent:#6d5cff; --accent-2:#4d8bff; --mint:#00c2a8; --mint-bg:#e1f8f4;
  --warn:#ff9f43; --warn-bg:#fff2e2; --tint:#efeefe; --line:#ecedf5;
  --radius:22px; --maxw:920px;
  --grad:linear-gradient(120deg,#6d5cff,#4d8bff);
  --glow:0 18px 40px -16px rgba(109,92,255,.55);
  --shadow:0 1px 2px rgba(19,22,42,.04), 0 18px 40px -22px rgba(19,22,42,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; overflow-x:hidden}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
a{color:inherit}

/* aurora */
.aurora{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.aurora span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5}
.aurora .a{width:520px;height:520px; background:#cdd8ff; top:-180px; right:-120px; animation:float1 18s ease-in-out infinite}
.aurora .b{width:440px;height:440px; background:#e6dcff; top:240px; left:-160px; animation:float2 22s ease-in-out infinite}
.aurora .c{width:380px;height:380px; background:#d6fff6; bottom:-160px; right:10%; animation:float1 26s ease-in-out infinite}
@keyframes float1{50%{transform:translate(-30px,40px)}}
@keyframes float2{50%{transform:translate(40px,-30px)}}

/* top bar */
header.top{position:sticky; top:0; z-index:30; background:rgba(247,248,252,.72); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:14px; height:66px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:-.02em}
.logo{width:38px; height:38px; border-radius:12px; background:var(--grad); color:#fff; display:grid; place-items:center; font-size:18px; font-weight:800; box-shadow:var(--glow)}
.brand small{display:block; font-weight:600; font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.top nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.top nav a{text-decoration:none; color:var(--muted); font-weight:600; font-size:14px; padding:9px 13px; border-radius:11px; transition:.18s}
.top nav a:hover{color:var(--ink); background:#fff}

.crumb{font-size:13px; color:var(--muted); padding:22px 0 0}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb b{color:var(--ink)}

/* hero */
.hero{padding:18px 0 6px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:#fff; padding:7px 14px; border-radius:999px; box-shadow:var(--shadow)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--grad)}
h1{font-size:clamp(38px,6.4vw,62px); line-height:1.04; letter-spacing:-.035em; margin:18px 0 12px; font-weight:850}
h1 .em{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:20px; color:var(--muted); max-width:60ch; margin:0}

/* accueil : grille des domaines */
.grid-domains{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:30px 0}
@media(max-width:680px){ .grid-domains{grid-template-columns:1fr} }
.dcard{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; transition:transform .14s, box-shadow .18s}
.dcard:hover{transform:translateY(-3px); box-shadow:var(--glow)}
.dcard .idx{font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--accent)}
.dcard h3{margin:0; font-size:20px; letter-spacing:-.02em}
.dcard p{margin:0; color:var(--muted); font-size:14.5px}
.dcard .count{margin-top:auto; font-size:13px; font-weight:700; color:var(--muted)}
.dcard.soon{opacity:.72}
.dcard.soon .count{color:var(--warn)}

/* liste de notions d'un domaine */
.notion-list{display:grid; gap:12px; margin:26px 0}
.ncard{display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:18px 20px; transition:transform .12s, box-shadow .18s}
.ncard:hover{transform:translateX(3px); box-shadow:var(--glow)}
.ncard .n{flex:0 0 auto; width:34px; height:34px; border-radius:11px; background:var(--tint); color:var(--accent); display:grid; place-items:center; font-weight:850}
.ncard .t{font-weight:800; font-size:17px}
.ncard .d{color:var(--muted); font-size:14px}
.ncard .arrow{margin-left:auto; color:var(--muted)}
.ncard.soon{opacity:.7}
.badge-soon{margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--warn); background:var(--warn-bg); padding:5px 10px; border-radius:999px}

/* visualiseur interactif */
.viz{margin:30px 0 8px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; position:relative}
.viz::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad)}
.viz-head{display:flex; align-items:center; gap:10px; padding:22px 24px 0}
.viz-head h2{margin:0; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.viz-head .live{margin-left:auto; font-size:12px; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:6px}
.viz-head .live::before{content:""; width:8px;height:8px;border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(0,194,168,.6); animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(0,194,168,0)}}
.viz-body{display:grid; grid-template-columns:1fr 1fr; gap:10px 32px; padding:18px 24px 26px; align-items:center}
@media(max-width:640px){ .viz-body{grid-template-columns:1fr} }
.shapes{display:flex; gap:26px; align-items:center; justify-content:center; flex-wrap:wrap; min-height:180px}
.readout{display:flex; flex-direction:column; gap:18px}

.frac{display:inline-flex; flex-direction:column; align-items:center; line-height:1; vertical-align:middle}
.frac .num,.frac .den{padding:0 9px; font-weight:850}
.frac .bar{height:3px; align-self:stretch; background:currentColor; border-radius:2px; margin:4px 0}
.frac.big{font-size:46px; color:var(--accent)}
.frac.mid{font-size:22px}
.frac.sm{font-size:15px}

.equals{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:18px; color:var(--muted)}
.pill{background:var(--tint); color:var(--ink); font-weight:700; padding:7px 13px; border-radius:999px; font-size:16px}
.controls{display:flex; flex-direction:column; gap:16px; margin-top:4px}
.ctrl label{display:flex; justify-content:space-between; font-weight:600; font-size:14px; color:var(--muted); margin-bottom:5px}
.ctrl label b{color:var(--ink)}
input[type=range]{width:100%; accent-color:var(--accent); height:26px}
.hint{font-size:13.5px; color:var(--muted); margin:2px 0 0}

/* sections */
section.block{margin:46px 0}
.block h2.title{font-size:26px; letter-spacing:-.025em; margin:0 0 8px; display:flex; align-items:center; gap:11px}
.block h2.title .tag{font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#fff; background:var(--grad); padding:5px 11px; border-radius:999px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px}
.def{display:flex; gap:15px; align-items:flex-start}
.def + .def{margin-top:14px}
.def .mark{flex:0 0 auto; width:34px; height:34px; border-radius:11px; background:var(--tint); color:var(--accent); display:grid; place-items:center; font-weight:850; font-size:17px}
.term{font-weight:800}

/* explainer autonome */
.explainer{display:grid; grid-template-columns:1fr; gap:14px}
.stage{background:#fbfbff; border:1px solid var(--line); border-radius:16px; padding:22px; min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px}
.caption{font-weight:700; font-size:18px; text-align:center; min-height:28px; transition:opacity .35s}
.caption b{color:var(--accent)}
.replay{align-self:center; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:700; font-size:14px; padding:9px 16px; border-radius:11px; cursor:pointer; display:inline-flex; gap:8px; align-items:center}
.replay:hover{border-color:var(--accent); color:var(--accent)}

/* équivalences */
.seg-tabs{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px}
.tab{border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:800; padding:9px 15px; border-radius:12px; cursor:pointer; font-size:15px; transition:.16s}
.tab[aria-pressed=true]{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--glow)}
.tab:focus-visible{outline:3px solid rgba(109,92,255,.4); outline-offset:2px}
.equiv-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px}
.barwrap{flex:1 1 240px}
.seg-bar{display:flex; height:38px; border-radius:11px; overflow:hidden; border:1px solid var(--line)}
.seg{flex:1; border-right:2px solid #fff; transition:background .35s}
.seg:last-child{border-right:0}
.seg.on{background:var(--accent)}
.seg.off{background:var(--tint)}

/* exemple */
ol.steps{list-style:none; counter-reset:s; margin:0; padding:0}
ol.steps li{counter-increment:s; position:relative; padding:15px 0 15px 50px; border-bottom:1px dashed var(--line)}
ol.steps li:last-child{border-bottom:0}
ol.steps li::before{content:counter(s); position:absolute; left:0; top:13px; width:32px; height:32px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px}

/* exercices */
.progress{display:flex; align-items:center; gap:13px; margin-bottom:18px; font-size:14px; color:var(--muted); font-weight:700}
.pbar{flex:1; height:10px; background:var(--tint); border-radius:999px; overflow:hidden}
.pbar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--mint),#36d6be); transition:width .45s ease}
.q{margin:0 0 8px; font-weight:800; font-size:19px}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:14px 0 4px}
@media(max-width:520px){ .opts{grid-template-columns:1fr} }
.opt{border:1px solid var(--line); background:#fff; border-radius:14px; padding:15px; font-size:18px; font-weight:800; cursor:pointer; text-align:left; color:var(--ink); display:flex; align-items:center; gap:12px; transition:transform .08s, border-color .15s, box-shadow .15s}
.opt:hover{border-color:var(--accent); box-shadow:var(--glow)}
.opt:active{transform:scale(.98)}
.opt:focus-visible{outline:3px solid rgba(109,92,255,.4); outline-offset:2px}
.opt.correct{border-color:var(--mint); background:var(--mint-bg); color:#077a66; box-shadow:none}
.opt.wrong{border-color:var(--warn); background:var(--warn-bg); color:#9a5a09; box-shadow:none}
.opt[disabled]{cursor:default}
.feedback{margin-top:14px; font-weight:600; padding:13px 15px; border-radius:13px; display:none}
.feedback.show{display:block}
.feedback.ok{background:var(--mint-bg); color:#077a66}
.feedback.no{background:var(--warn-bg); color:#9a5a09}
.qnav{display:flex; gap:11px; margin-top:18px}
.btn{border:0; border-radius:13px; padding:13px 20px; font-weight:800; font-size:15px; cursor:pointer; transition:.16s; text-decoration:none; display:inline-block}
.btn.primary{background:var(--grad); color:#fff; box-shadow:var(--glow)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--tint); color:var(--ink)}
.btn:focus-visible{outline:3px solid rgba(109,92,255,.45); outline-offset:2px}
.done{text-align:center; padding:12px}
.done .big{font-size:46px}

/* coin parent dépliable */
details.parent{background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
details.parent summary{list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px}
details.parent summary::-webkit-details-marker{display:none}
details.parent summary .chev{margin-left:auto; transition:transform .25s; color:var(--muted)}
details.parent[open] summary .chev{transform:rotate(180deg)}
.parent-body{padding:0 22px 20px}
.parent-body p{margin:8px 0; color:var(--muted); font-size:15px}
.src{font-size:12.5px; color:var(--muted); margin-top:12px}
.src a{color:var(--accent)}

footer{border-top:1px solid var(--line); margin-top:54px; padding:28px 0; color:var(--muted); font-size:13px}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* tableau de numération */
.pv{border-collapse:collapse; width:100%; margin-top:10px; font-size:15px}
.pv th{font-size:11px; font-weight:700; color:var(--muted); padding:6px 4px; text-align:center; border-bottom:1px solid var(--line); line-height:1.2}
.pv td{font-size:24px; font-weight:850; color:var(--accent); text-align:center; padding:10px 4px; border:1px solid var(--line); background:#fbfbff}
.pv-grouped{font-size:34px; font-weight:850; letter-spacing:.01em}
.pv-decomp{font-size:16px; color:var(--muted); margin-top:6px}
.op-result{font-size:26px; font-weight:850; color:var(--accent); margin:6px 0}

/* menus déroulants (convertisseurs) */
select.usel{font:inherit; font-weight:700; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; cursor:pointer}
select.usel:focus-visible{outline:3px solid rgba(109,92,255,.4); outline-offset:2px}
.uc-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0}
.uc-row input[type=number]{font:inherit; font-weight:700; width:120px; border:1px solid var(--line); border-radius:10px; padding:8px 12px}

/* badges de résultats de recherche */
.rk{margin-left:auto; align-self:center; flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px}
.rk-d{color:#fff; background:var(--grad)}
.rk-n{color:var(--accent); background:var(--tint)}

/* navigation précédent / suivant entre notions */
.prevnext{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}
.pn{flex:1 1 0; min-width:150px; display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px 16px; font-weight:800; transition:transform .12s, box-shadow .18s}
.pn:hover{transform:translateY(-2px); box-shadow:var(--glow)}
.pn small{display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.pn .ar{font-size:20px; color:var(--accent); flex:0 0 auto}
.pn-next{justify-content:flex-end; text-align:right}
.pn-up{flex:0 0 auto; justify-content:center; color:var(--muted); font-weight:700}
.pn-empty{flex:1 1 0; min-width:150px}
@media(max-width:560px){ .pn-up{order:-1; flex:1 1 100%} }

/* sélecteur de niveau */
.levelnav{display:flex; gap:4px; align-items:center; margin-right:6px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px}
.levelnav a{text-decoration:none; font-size:13px; font-weight:800; color:var(--muted); padding:6px 12px; border-radius:999px}
.levelnav a.active{background:var(--grad); color:#fff}
.levelnav a.soon{color:var(--line); pointer-events:none}
@media(max-width:640px){ .levelnav{order:3; flex-basis:100%; justify-content:center; margin:8px 0 0} .top .wrap{flex-wrap:wrap} }

/* badge niveau dans les résultats de recherche */
.rk-l{margin-left:auto; align-self:center; flex:0 0 auto; font-size:11px; font-weight:800; padding:5px 9px; border-radius:999px; color:var(--ink); background:var(--tint); border:1px solid var(--line)}
.ncard{flex-wrap:wrap}
.rk-l + .rk{margin-left:0}

/* bloc de code (algorithmique) */
.codebox{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:15px; margin:0 0 10px}
.codeline{padding:8px 12px; border-radius:8px; border:1px solid var(--line); margin:4px 0; background:#fbfbff; color:var(--muted)}
.codeline.cur{border-color:var(--accent); background:var(--tint); color:var(--ink); font-weight:700}
.codeline.done{color:var(--ink); border-color:#d7f0ea; background:#f1fbf8}