/* =================================================================
   ClassFlow — styles communs des trois espaces
   Palette corail + papier chaud, Fraunces (titres) / Inter (texte).
   ================================================================= */

:root{--coral:#F0552B;--coral-50:#FFF5F0;--coral-100:#FFE4D6;--coral-700:#A82E0F;--paper:#FBF8F3;--paper-2:#F4EFE6;--ink:#1F1A14;--ink-2:#4A4238;--ink-3:#8A8278;--line:#E6DFCF;--good:#10B981;--largeur:1480px}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper);margin:0;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}

/* ---------- Composants des pages (tarifs, fonctionnalités, téléchargement) ---------- */
.page{max-width:var(--largeur);margin:0 auto;padding:24px 26px 28px}
.nav{display:flex;align-items:center;gap:20px;height:56px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--ink);display:flex;gap:8px;align-items:center}
.dot{width:18px;height:18px;border-radius:5px;background:var(--coral)}
.pill{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;font-weight:600;color:var(--ink);font-size:12.5px}
.sp{flex:1}.cur{color:var(--coral);font-weight:600}
.btn{background:var(--coral);color:#fff;border-radius:99px;padding:8px 16px;font-weight:600;font-size:13px;border:0;cursor:pointer;box-sizing:border-box}
a.btn{display:inline-block;text-align:center}
.btn.ghost{background:#fff;color:var(--coral);border:1.5px solid var(--coral)}
h1.t,h2.t{font-family:Fraunces,serif;font-size:32px;text-align:center;margin:0 0 6px;font-weight:600}
.lead{text-align:center;color:var(--ink-2);margin:0 0 20px}
.controls{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.seg{display:inline-flex;background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:3px}
.seg button{border:0;background:none;border-radius:99px;padding:7px 15px;font:600 13px Inter;color:var(--ink-2);cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
/* sélecteur de durée : deux pastilles, la meilleure porte un tag */
.dur{display:inline-flex;gap:8px;padding-top:12px}
.dur button{position:relative;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:10px 16px;font:600 13.5px Inter;color:var(--ink-2);cursor:pointer;transition:.15s}
.dur button:hover{border-color:var(--coral-100)}
.dur button.on{border-color:var(--coral);background:var(--coral-50);color:var(--ink);box-shadow:0 6px 18px rgba(240,85,43,.14)}
.dur button .sub{display:block;font:500 11.5px Inter;color:var(--ink-3);margin-top:2px}
.best{position:absolute;top:-11px;right:10px;background:var(--good);color:#fff;font:700 10.5px Inter;letter-spacing:.02em;border-radius:99px;padding:3px 8px;box-shadow:0 3px 8px rgba(16,185,129,.35);white-space:nowrap}
.cards{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:16px;align-items:stretch}
.card{display:flex;flex-direction:column}.card>.badge{align-self:flex-start}.card .grow{flex:1}
.quota{display:inline-block;align-self:flex-start;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--paper-2);border-radius:99px;padding:4px 10px}.quota i{font-style:normal;color:var(--coral)}
.card{background:#fff;border-radius:20px;padding:20px;box-shadow:0 10px 28px rgba(31,26,20,.07);border:1.5px solid transparent}
.card.hl{border-color:var(--coral)}
.badge{display:inline-block;font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 9px;background:var(--coral-100);color:var(--coral-700)}
.badge.vert{background:#E7F8F1;color:#047857}
.card h3{margin:10px 0 2px;font-size:18px}
.card .d{color:var(--ink-3);font-size:13px;margin:0 0 12px}
.old{color:var(--ink-3);text-decoration:line-through;font-size:14px;min-height:18px}
.price{font-family:Fraunces,serif;font-size:44px;font-weight:600;line-height:1}
.price small{font:500 15px Inter;color:var(--ink-2)}
.fine{font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:10px;min-height:52px}
.card .btn{width:100%;margin-top:12px;padding:11px}
.feat{margin:14px 0 0;padding:0;list-style:none;font-size:13px;color:var(--ink-2)}
.feat li{padding:3px 0}.feat li:before{content:"✓ ";color:var(--good);font-weight:700}
.band{margin-top:20px;display:flex;align-items:center;gap:16px;background:#fff;border:1.5px dashed var(--coral);border-radius:18px;padding:16px 20px}
.band b{font-family:Fraunces,serif;font-size:18px}
.band p{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
/* école, façon Hostinger */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:22px;background:#fff;border-radius:22px;padding:22px;box-shadow:0 14px 34px rgba(31,26,20,.07)}
.offer{border:1.5px solid var(--coral);border-radius:18px;padding:20px;background:#fff;position:relative}
.offer .badge{margin-bottom:10px}
.offer .old{font-size:15px}
.offer .price{font-size:52px}
.offer .btn{width:100%;margin-top:14px;padding:12px;font-size:14px}
.offer .fine{margin-top:12px}
.lines{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;font-size:13px;color:var(--ink-2)}
.lines div{display:flex;justify-content:space-between;padding:3px 0}
.lab{font-weight:600;font-size:14px;margin:0 0 8px;display:flex;align-items:center;gap:10px}
.n{background:var(--ink);color:#fff;border-radius:99px;min-width:34px;height:34px;display:inline-grid;place-items:center;font-weight:700}
input[type=range]{width:100%;accent-color:var(--coral)}
.ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}
.paliers{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}
.pal{font-size:11.5px;border-radius:99px;padding:3px 9px;background:var(--paper-2);color:var(--ink-3)}
.pal.on{background:var(--coral-100);color:var(--coral-700);font-weight:600}
.f{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.f .full{grid-column:1/-1}
.in{border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;font-size:13px;color:var(--ink-3);background:var(--paper)}
.cta{width:100%;margin-top:10px;padding:12px;font-size:14px}

/* ---------- Barre du haut ---------- */
.header{position:sticky;top:0;z-index:40;background:var(--paper);padding:0 26px}
.header .nav{max-width:var(--largeur);margin:0 auto}
.brand{font-size:13px}
.espace-choix,.navrel{position:relative}
.espace-choix .pill{cursor:pointer}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-link{color:var(--ink-2);font-size:13px}
.nav-link.cur{color:var(--coral);font-weight:600}
.mega-bouton{border:0;background:none;padding:0;font:inherit;color:var(--ink-2);cursor:pointer}
.mega-bouton[aria-expanded=true]{color:var(--ink);font-weight:600;background:var(--paper-2);border-radius:8px;padding:5px 9px;margin:0 -9px}
.mega-bouton.cur{color:var(--coral);font-weight:600}
.mega-bouton[aria-expanded=true]::after{content:" ▴"}
.espace-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:6;min-width:230px;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(31,26,20,.16),0 8px 20px rgba(31,26,20,.08);padding:6px;display:flex;flex-direction:column}
.espace-menu a{padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--ink)}
.espace-menu a:hover{background:var(--paper)}
.nav-burger{display:none;flex-direction:column;justify-content:center;width:42px;height:42px;border-radius:10px;border:1.5px solid var(--line);background:#fff;cursor:pointer;padding:0}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);margin:2px auto;border-radius:2px}
.mobile-menu{max-width:var(--largeur);margin:0 auto;display:flex;flex-direction:column;padding:6px 0 14px;border-bottom:1px solid var(--line)}
.mobile-menu a{padding:12px 2px;border-bottom:1px solid var(--line);font-weight:600;font-size:15px;color:var(--ink)}
.mobile-menu a:last-child{border-bottom:0}

/* ---------- Pied de page ---------- */
.footer{border-top:1px solid var(--line);background:var(--paper-2);padding:0 26px}
.footer-inner{max-width:var(--largeur);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:22px 0;font-size:13px;color:var(--ink-3)}
.footer-inner span{margin-right:auto}
.footer-inner a{color:var(--ink-2)}
.footer-inner a:hover{color:var(--coral-700)}

/* ---------- Tarifs Parents / Enfants ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.card{overflow:visible}
.card>.quota{align-self:flex-start}
.cards3{padding-top:8px}
.free .price{color:var(--ink)}
.card.hl{position:relative}
.pop{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font:700 11px Inter;border-radius:99px;padding:4px 10px;white-space:nowrap;box-shadow:0 4px 12px rgba(240,85,43,.3);z-index:2}
.reassure{display:flex;justify-content:center;gap:26px;margin-top:18px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}

/* ---------- Formulaires ---------- */
sup.astre{font-size:22px}
.f label{font-size:0;display:block;position:relative}
.f .in{width:100%;box-sizing:border-box;font:400 13px Inter,system-ui,sans-serif;color:var(--ink);margin:0;height:calc(13px * 1.21 + 21px)}
/* hauteur des boutons des cartes, identique à celle d’un <button> natif */
.card .btn,.offer .btn,.f .cta{line-height:1.15}
.in::placeholder{color:var(--ink-3);opacity:1}
select.in{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;text-overflow:ellipsis}
select.in:invalid{color:var(--ink-3)}
.f label.sel::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--ink-3);pointer-events:none}
.f .form-erreur,.f .form-rgpd,.f .cta{grid-column:1/-1}
.f .cta{margin-top:2px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-erreur{color:var(--coral-700);font-size:13px;margin:6px 0 0}
.form-rgpd{font-size:11.5px;color:var(--ink-3);margin:8px 0 0}
.form-merci{background:#E7F8F1;color:#047857;border-radius:14px;padding:16px;margin-top:12px}
.plus40{font-size:12px;color:var(--coral-700);margin:-6px 0 12px}

/* ---------- Méga-menu « Fonctionnalités » ---------- */
.mega{position:absolute;left:-170px;top:37px;width:760px;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(31,26,20,.16),0 8px 20px rgba(31,26,20,.08);padding:18px 20px;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 18px;font-size:16px;color:var(--ink);font-weight:400;text-align:left}
.mega::before{content:"";position:absolute;left:150px;width:220px;top:-24px;height:24px}
.mega.court{width:340px;grid-template-columns:1fr}
.mega h6{margin:0 0 6px;font:700 10.5px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mi{display:flex;gap:10px;padding:8px;border-radius:12px}
.mi:hover,.mi:focus-visible{background:var(--paper)}
.ico{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;background:var(--paper-2)}
.mi b{font-size:13.5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mi span.t{display:block;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.tg{font:700 10px Inter;border-radius:99px;padding:2px 7px;white-space:nowrap}
.tg.free{background:#E7F8F1;color:#047857}
.tg.pay{background:var(--coral-100);color:var(--coral-700)}
.megafoot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-size:12.5px;color:var(--ink-2)}
.megafoot a{color:var(--coral);font-weight:600;text-decoration:none}
.mega.court .megafoot{flex-direction:column;align-items:flex-start;gap:4px}

/* ---------- Page « Fonctionnalités » ---------- */
.filters{display:flex;justify-content:center;gap:8px;margin:0 0 22px}
.filters button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font:600 13px Inter;color:var(--ink-2);cursor:pointer}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.theme{margin:0 0 22px}
.theme h3{font-family:Fraunces,serif;font-size:22px;font-weight:600;margin:0 0 4px}
.theme p.s{margin:0 0 12px;color:var(--ink-3);font-size:13.5px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid.deux{grid-template-columns:repeat(2,1fr)}
.fc{background:#fff;border-radius:16px;padding:16px;box-shadow:0 6px 18px rgba(31,26,20,.06);display:flex;flex-direction:column;gap:6px}
.fc .top{display:flex;justify-content:space-between;align-items:flex-start}
.fc .ico{width:38px;height:38px;font-size:19px}
.fc b{font-size:15px}
.fc span.t{font-size:13px;color:var(--ink-2);line-height:1.45}
.ribbon{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ink);color:#F4EFE6;border-radius:18px;padding:18px 22px;margin-top:6px}
.ribbon b{font-family:Fraunces,serif;font-size:19px;color:#fff}
.ribbon p{margin:3px 0 0;font-size:13px;color:#CFC6B8}

/* ---------- Écran d'entrée ---------- */
.entree{position:fixed;inset:0;z-index:50;display:grid;place-items:center}
.entree[hidden]{display:none}
body.avec-entree>header,body.avec-entree>main,body.avec-entree>footer{filter:blur(6px);pointer-events:none;user-select:none}
body.avec-entree{overflow:hidden}
.veil{position:absolute;inset:0;background:rgba(31,26,20,.28)}
.modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100% - 84px));background:#fff;border-radius:22px;padding:26px 26px 20px;box-shadow:0 24px 60px rgba(31,26,20,.28);max-height:calc(100vh - 32px);overflow:auto}
.modal h2{font-family:Fraunces,serif;font-size:26px;margin:0 0 4px;font-weight:600;text-align:center}
.modal .sub{color:var(--ink-3);text-align:center;font-size:14px;margin:0 0 18px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ch{border:1.5px solid var(--line);border-radius:16px;padding:16px 12px;text-align:center;background:var(--paper);transition:.15s}
.ch:first-child{border-color:var(--coral);background:var(--coral-50);box-shadow:0 8px 24px rgba(240,85,43,.18)}
.ch:hover{border-color:var(--coral)}
.ic{font-size:30px;line-height:1}
.ch b{display:block;margin:8px 0 4px;font-size:15px}
.ch span{font-size:12px;color:var(--ink-3);line-height:1.35;display:block}
.modal .foot{margin-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.modal .foot label{display:flex;gap:6px;align-items:center;cursor:pointer}
.modal .foot input{margin:0;width:12px;height:12px;accent-color:var(--coral)}

/* =================================================================
   Pages d'accueil : sections reprises de l'ancienne page unique
   (classes renommées là où elles croisent les composants ci-dessus :
   .lbtn, .llede, .how-steps, .final). Enveloppe : .acc
   ================================================================= */
:root{--coral-200:#FFC7AA;--coral-300:#FFA17A;--coral-400:#FF7A4D;--coral-500:#F0552B;--coral-600:#D43F18;--amber-50:#FFF8EA;--amber-100:#FCEAC4;--amber-700:#A8650F;--paper-3:#E9E2D3;--line-2:#D6CCB6;--t-dys:#6366F1;--t-tdah:#06B6D4;--t-tsa:#10B981;--t-eana:#8B5CF6;--t-dyspraxie:#EC4899;--t-visuel:#F59E0B;--serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Inter",-apple-system,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:26px;--sh-soft:0 1px 2px rgba(31,26,20,.04),0 6px 16px rgba(31,26,20,.05);--sh-card:0 1px 3px rgba(31,26,20,.06),0 14px 34px rgba(31,26,20,.07);--sh-pop:0 24px 60px rgba(31,26,20,.16),0 8px 20px rgba(31,26,20,.08);--sh-coral:0 8px 24px rgba(240,85,43,.28);--maxw:1160px}
html{scroll-padding-top:72px}
.acc{line-height:1.6;-webkit-font-smoothing:antialiased}
.acc *,.acc *::before,.acc *::after{box-sizing:border-box}
.acc :where(h1,h2,h3,h4):not(:where(.apercu *)){margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-0.02em;line-height:1.1;color:var(--ink)}
.acc :where(p):not(:where(.apercu *)){margin:0}
.acc svg{display:block;max-width:100%}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.apercu{line-height:normal}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-600)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--coral-500)}
.eyebrow.center::before{display:none}
.h-display{font-size:clamp(38px,6.2vw,68px);line-height:1.04;letter-spacing:-0.025em}
.h-section{font-size:clamp(30px,4.4vw,46px)}
.llede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);line-height:1.6}
.text-coral{color:var(--coral-600)}
.serif-em{font-family:var(--serif);font-style:italic;font-weight:500}

/* Boutons des sections reprises */
.lbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:100px;font-family:var(--sans);font-size:15px;font-weight:600;border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s}
.lbtn svg{width:17px;height:17px}
.lbtn-primary{background:var(--coral-500);color:#fff;box-shadow:var(--sh-coral)}
.lbtn-primary:hover{background:var(--coral-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(240,85,43,.34)}
.lbtn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-soft)}
.lbtn-ghost:hover{background:var(--paper-2);border-color:var(--ink-3);transform:translateY(-1px)}
.lbtn-lg{padding:16px 28px;font-size:16px}
.lbtn-block{width:100%}

/* Hero */
.hero{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,80px);position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-10% 0 auto 0;height:620px;z-index:-1;background:radial-gradient(60% 70% at 78% 10%,rgba(240,85,43,.10),transparent 60%),radial-gradient(50% 60% at 8% 0%,rgba(232,154,44,.08),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,4vw,64px);align-items:center}
.hero-seul{max-width:820px;margin:0 auto;text-align:center}
.hero-seul .llede{margin-left:auto!important;margin-right:auto!important}
.hero-seul .hero-actions,.hero-seul .hero-reassure{justify-content:center}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-soft);padding:7px 7px 7px 14px;border-radius:100px;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:24px}
.hero-badge b{color:var(--coral-700);font-weight:600}
.hero-badge .pill{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--coral-50);color:var(--coral-600);border:1px solid var(--coral-200);padding:3px 8px;border-radius:100px}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--coral-600);position:relative;white-space:nowrap}
.hero .llede{max-width:36ch;margin-bottom:32px}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-reassure{display:flex;align-items:center;gap:18px;margin-top:26px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}
.hero-reassure span{display:inline-flex;align-items:center;gap:7px}
.hero-reassure svg{color:var(--good);width:16px;height:16px}

/* Exemple avant / après */
.demo{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-pop);padding:16px;transform:rotate(.4deg)}
.demo-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 11px;margin-bottom:14px}
.demo-select{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-2);border-radius:100px;padding:5px 10px;font-size:12.5px;font-weight:500}
.demo-select .dot{width:8px;height:8px;border-radius:3px}
.demo-select .chev{color:var(--ink-3);margin-left:2px}
.demo-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:var(--coral-500);color:#fff;border:none;padding:6px 13px;border-radius:100px;font-size:12.5px;font-weight:600;box-shadow:0 4px 12px rgba(240,85,43,.3)}
.demo-panes{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative}
.doc{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;background:#fff;min-height:230px;position:relative;overflow:hidden}
.doc-tag{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:6px;margin-bottom:12px}
.doc-tag.ref{background:var(--paper-2);color:var(--ink-3)}
.doc-tag.adapt{background:var(--coral-50);color:var(--coral-700);border:1px solid var(--coral-200)}
.acc .doc h5{font-family:var(--serif);font-size:13.5px;font-weight:600;margin-bottom:9px}
.doc.is-adapt{background:linear-gradient(180deg,#fff,var(--coral-50));border-color:var(--coral-200)}
.acc .doc.is-adapt h5{font-size:16px;letter-spacing:.01em}
.tline{height:7px;border-radius:4px;background:var(--paper-3);margin-bottom:7px}
.tline.s{width:60%}.tline.m{width:85%}.tline.l{width:100%}
.doc.is-adapt .aline{font-size:12.5px;line-height:2;letter-spacing:.04em;word-spacing:.14em;color:var(--ink);font-weight:500;margin-bottom:4px}
.doc.is-adapt .syll{color:var(--coral-600)}
.doc-q{margin-top:10px;padding:9px 11px;border-radius:8px;background:var(--paper);font-size:11.5px;color:var(--ink-2)}
.doc.is-adapt .doc-q{background:#fff;border:1px dashed var(--coral-200);font-weight:500}
.doc-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--coral-200);display:grid;place-items:center;box-shadow:var(--sh-soft);z-index:3;color:var(--coral-500)}
.demo-pin{position:absolute;font-family:var(--serif);font-style:italic;font-size:14px;font-weight:500;color:var(--coral-700);line-height:1.2;z-index:5}
.demo-pin--br{right:-6px;bottom:-30px}
.exemple .demo{max-width:760px;margin:0 auto;transform:none}

/* Visuel avant / après du header (curseur piloté par assets/js/comparateur.js) */
.ba{position:relative;container-type:inline-size}
.ba-feuille{position:relative;aspect-ratio:4/3.15;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 1px 0 rgba(31,26,20,.04),0 30px 60px -20px rgba(31,26,20,.28),0 12px 24px -12px rgba(31,26,20,.12)}
.ba-couche{position:absolute;inset:0;padding:0 5.4cqi}
/* Sans JavaScript : curseur au milieu. assets/js/comparateur.js écrit ensuite clip-path et transform. */
.ba-adap{clip-path:inset(0 0 0 50%);will-change:clip-path;background:#FFFCF6;font-family:Lexend,var(--sans)}
.ba-meta{display:flex;justify-content:space-between;padding:8.5cqi 0 1.2cqi;font-size:max(9px,2.1cqi)}
.ba-orig .ba-meta{font-family:"Times New Roman",serif;color:#555;border-bottom:1px solid #ccc}
.ba-adap .ba-meta{color:var(--ink-3)}
.acc .ba h6{margin:2.6cqi 0 1.2cqi;font-family:"Times New Roman",serif;font-size:max(11px,3.1cqi);font-weight:700;color:var(--ink)}
.ba-orig p{font-family:"Times New Roman",serif;font-size:max(8px,2.35cqi);line-height:1.3;color:#222;margin:0 0 1.3cqi;text-align:justify}
.ba-orig .ba-ex{font-weight:700}
.ba-orig .ba-figs{display:flex;gap:2.5cqi;margin:1.4cqi 0 1.8cqi}
.ba-orig .ba-figs svg{width:9.4cqi;height:9.4cqi}
.ba-lignes i{display:block;border-bottom:1px dotted #aaa;height:3cqi}
.acc .ba-adap h6{font-family:Lexend,var(--sans);font-size:max(13px,3.8cqi);font-weight:600;margin:1.2cqi 0 2.6cqi}
.ba-etape{display:flex;gap:2.2cqi;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:2.5cqi;padding:2.2cqi 2.5cqi;margin-bottom:1.8cqi}
.ba-etape b{flex:none;width:4.7cqi;height:4.7cqi;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:max(9px,2.3cqi)}
.ba-etape p{margin:0;font-size:max(11px,2.8cqi);line-height:1.7;letter-spacing:.03em;word-spacing:.12em;color:var(--ink)}
.ba .s1{color:#2D6BDF}.ba .s2{color:#D9431C}
.ba-adap .ba-figs{margin:.8cqi 0 1.8cqi 6.9cqi}
.ba-adap .ba-figs svg{width:10.5cqi;height:10.5cqi}
.ba-astuce{margin:2.2cqi 0 0;font-size:max(10px,2.35cqi);color:var(--ink-2)}
.ba-etiq{position:absolute;top:2.5cqi;z-index:2;font:600 max(10px,2.1cqi)/1 var(--sans);padding:.9cqi 1.8cqi;border-radius:99px;transition:opacity .25s;pointer-events:none}
.ba-etiq-o{left:2.5cqi;background:var(--paper-2);color:var(--ink-2)}
.ba-etiq-a{right:2.5cqi;background:var(--coral);color:#fff}
.ba-fin .ba-etiq-o,.ba-debut .ba-etiq-a{opacity:0}
.ba-poignee{position:absolute;top:0;bottom:0;left:50%;z-index:3;pointer-events:none;will-change:transform}
.ba-actif .ba-poignee{left:0}
.ba-poignee::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--coral);box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.ba-poignee span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(240,85,43,.45);border:3px solid #fff}
.ba-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba:has(.ba-range:focus-visible) .ba-poignee span{outline:3px solid var(--ink);outline-offset:2px}
.ba-aide{text-align:right;margin-top:10px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--coral-700)}
.ba-manuel .ba-aide{visibility:hidden}

/* Extraits de l'app en tête des cartes « Pour qui » (espace Écoles) */
.persona.avec-extrait{padding:0;overflow:hidden}
.persona.avec-extrait>:not(.extrait){margin-left:28px;margin-right:28px}
.persona.avec-extrait h3{margin-top:24px}
.persona.avec-extrait .persona-foot{margin-bottom:24px}
.extrait{background:var(--paper-2);border-bottom:1px solid var(--line);padding:22px;display:flex;align-items:center;height:190px;box-sizing:border-box;margin-bottom:0}
.mini{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px -12px rgba(31,26,20,.22);width:100%;padding:14px;font-size:12px;color:var(--ink)}
.mini-t{font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:7px;margin-bottom:10px}
.mini-t i{width:9px;height:9px;border-radius:3px;background:var(--coral)}
.mini-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-kpi div{background:var(--paper);border-radius:10px;padding:8px 10px}
.mini-kpi b{display:block;font-family:var(--serif);font-size:22px;font-weight:600}
.mini-kpi span,.mini-note{color:var(--ink-3);font-size:11px}
.mini-barre{height:7px;border-radius:9px;background:var(--paper-2);margin-top:9px;overflow:hidden}
.mini-barre i{display:block;height:100%;width:72%;background:var(--good);border-radius:9px}
.mini-classes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mini-classes div{border:1px solid var(--line);border-radius:9px;padding:6px 7px;font-weight:600;font-size:11px}
.mini-classes em{display:flex;gap:3px;margin-top:5px}
.mini-classes em i{width:8px;height:8px;border-radius:3px}
.mini-note{margin-top:9px}
.mini-modules div{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.mini-modules div:last-child{border:0}
.mini-modules b{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;background:var(--good)}
.mini-modules b.a-faire{background:var(--line);color:var(--ink-3)}

/* Bande des troubles */
.troubles{padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.troubles-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;justify-content:center}
.troubles-lead{font-size:13.5px;color:var(--ink-3);margin-right:6px;font-weight:500}
.tchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:6px 13px;font-size:13.5px;font-weight:500;color:var(--ink-2);box-shadow:var(--sh-soft)}
.tchip .dot{width:8px;height:8px;border-radius:3px}

/* Le constat */
.problem{background:var(--paper)}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.pain-list{display:flex;flex-direction:column;gap:14px}
.pain{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--sh-soft)}
.pain-ic{width:38px;height:38px;flex-shrink:0;border-radius:10px;background:var(--coral-50);color:var(--coral-600);display:grid;place-items:center}
.pain-ic svg{width:20px;height:20px}
.acc .pain h4{font-size:16px;margin-bottom:3px}
.pain p{font-size:14px;color:var(--ink-2)}

/* Titres de section */
.sec-head{max-width:660px;margin-bottom:clamp(36px,4vw,56px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .eyebrow{margin-bottom:16px}
.acc .sec-head h2{margin-bottom:16px}

/* Comment ça marche */
.how{background:var(--ink);color:var(--paper)}
.acc .how h2{color:#fff}
.how .eyebrow{color:var(--coral-300)}
.how .eyebrow::before{background:var(--coral-400)}
.how .llede{color:rgba(251,248,243,.7)}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px}
.step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:28px;position:relative}
.step-n{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--coral-300);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.step-n b{width:34px;height:34px;border-radius:50%;border:1px solid var(--coral-400);display:grid;place-items:center;font-size:15px;color:#fff}
.acc .step h3{color:#fff;font-size:21px;margin-bottom:10px}
.step p{font-size:14.5px;color:rgba(251,248,243,.66)}
.step-arrow{position:absolute;top:40px;right:-16px;color:rgba(255,255,255,.2);z-index:2}

/* Pour qui, Ce que votre école obtient */
.who{background:var(--paper)}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.who-grid.quatre{grid-template-columns:repeat(4,1fr)}
.persona{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-soft);display:flex;flex-direction:column}
.persona-ic{width:48px;height:48px;border-radius:14px;background:var(--paper-2);color:var(--coral-600);display:grid;place-items:center;margin-bottom:18px}
.persona-ic svg{width:24px;height:24px}
.acc .persona h3{font-size:19px;margin-bottom:9px}
.persona p{font-size:14.5px;color:var(--ink-2);flex:1}
.persona-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--coral-700);font-weight:500;display:flex;align-items:center;gap:7px}
.persona-foot svg{width:16px;height:16px;flex-shrink:0}

/* Confiance */
.trust{background:var(--coral-50);border-top:1px solid var(--coral-100);border-bottom:1px solid var(--coral-100)}
.trust-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:8px}
.trust-card{background:#fff;border:1px solid var(--coral-100);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-soft)}
.trust-ic{width:46px;height:46px;border-radius:12px;background:var(--coral-50);color:var(--coral-600);display:grid;place-items:center;margin-bottom:16px}
.trust-ic svg{width:23px;height:23px}
.acc .trust-card h3{font-size:18px;margin-bottom:8px}
.trust-card p{font-size:14px;color:var(--ink-2)}
.trust-note{margin-top:26px;text-align:center;font-size:13px;color:var(--ink-3)}

/* Aperçu des fonctionnalités */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.theme-carte{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-soft)}
.acc .theme-carte h3{font-size:21px;margin-bottom:6px}
.theme-carte>p{font-size:14px;color:var(--ink-3);margin-bottom:14px}
.theme-carte ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.theme-carte li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:500}
.lien-suite{display:inline-block;margin-top:28px;font-weight:600;color:var(--coral-700)}
.lien-suite:hover{color:var(--coral)}
.centre{text-align:center}

/* Aperçus des tarifs et bandeaux (composants des pages Tarifs) */
.apercu .cards.deux{grid-template-columns:1fr 1fr;max-width:760px;margin:0 auto}
.apercu .cards3{max-width:1060px;margin:0 auto}
.apercu .renvoi{text-align:center;font-size:12.5px;color:var(--ink-3);margin:16px 0 0}
.apercu .offer{max-width:520px;margin:0 auto;text-align:center}
.apercu .offer .price{font-size:40px}
.apercu .band{max-width:1060px;margin:0 auto}
.apercu .cards.deux + .band{max-width:760px;margin-top:22px}
.section.bandeau{padding:clamp(40px,5vw,56px) 0}

/* Appel final et formulaire de contact */
.final{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 80% 0%,rgba(240,85,43,.22),transparent 60%);z-index:0}
.final .wrap{position:relative;z-index:1}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.acc .final h2{color:#fff;font-size:clamp(32px,4.4vw,50px);margin-bottom:18px}
.final .llede{color:rgba(251,248,243,.72);margin-bottom:26px}
.final-points{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:12px}
.final-points li{display:flex;gap:11px;align-items:center;font-size:15px;color:rgba(251,248,243,.85)}
.final-points svg{width:20px;height:20px;color:var(--coral-400);flex-shrink:0}
.form{background:var(--paper);color:var(--ink);border-radius:var(--r-xl);padding:clamp(24px,3vw,34px);box-shadow:var(--sh-pop);display:flex;flex-direction:column;gap:12px}
.acc .form h3{font-size:22px}
.form .form-sub{font-size:14px;color:var(--ink-2);margin-top:-8px}
.form .in{width:100%;padding:12px 14px;font:inherit;font-size:14.5px;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.form textarea.in{resize:vertical;min-height:110px}
.form .in:focus{outline:none;border-color:var(--coral-500);box-shadow:0 0 0 3px rgba(240,85,43,.14)}
.form .form-erreur,.form .form-rgpd{margin:0}
.final .form-merci{margin-top:0}

/* Questions fréquentes */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;box-shadow:var(--sh-soft)}
.faq summary{cursor:pointer;font-weight:600;font-size:16px}
.faq details p{margin-top:8px;color:var(--ink-2);font-size:15px}
.faq a{color:var(--coral-700);text-decoration:underline;text-underline-offset:2px}

@media (prefers-reduced-motion: reduce){.demo{transform:none!important}}
@media (max-width: 980px){
  .hero-grid,.problem-grid,.final-grid{grid-template-columns:1fr}
  .hero .llede{max-width:48ch}
  .demo{transform:none;margin-top:8px}
  .who-grid,.who-grid.quatre,.trust-grid,.how-steps,.themes{grid-template-columns:1fr}
  .step-arrow{display:none}
}
@media (max-width: 720px){
  .hero-badge{flex-wrap:wrap}
  .apercu .cards.deux{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .demo-panes{grid-template-columns:1fr}
  .doc-arrow{left:50%;top:auto;bottom:-10px;transform:translate(-50%,0) rotate(90deg)}
}
@media (max-width: 560px){
  .br-md{display:none}
  .hero h1 em{white-space:normal}
  .demo-pin--br{right:2px;bottom:-16px;font-size:13px}
  .band{flex-wrap:wrap}
}
@media (max-width: 480px){
  .wrap{padding:0 16px}
  .troubles-row{gap:8px}
  .lbtn{white-space:normal;text-align:center}
}

/* ---------- Page « Télécharger » ---------- */
.dl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:4px 0 22px}
.os{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 14px 16px;text-align:center;cursor:pointer;transition:.15s;font:inherit;color:inherit;width:100%;display:flex;flex-direction:column}
.os:hover{border-color:var(--coral-100)}
.os.on{border-color:var(--coral);background:var(--coral-50);box-shadow:0 8px 24px rgba(240,85,43,.16)}
.os .lg{height:40px;display:flex;justify-content:center}
.os b{display:block;margin-top:8px;font-size:16px}
.os small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.os .btn{display:inline-block;align-self:center;margin-top:12px;font-size:12.5px;padding:7px 14px}
.os:not(.on) .btn{background:#fff;color:var(--coral);border:1.5px solid var(--coral)}
.you{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--good);color:#fff;font:700 10.5px Inter;border-radius:99px;padding:3px 9px;white-space:nowrap;box-shadow:0 3px 8px rgba(16,185,129,.35)}
.steps{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;background:#fff;border-radius:22px;padding:22px;box-shadow:0 14px 34px rgba(31,26,20,.07)}
.steps h3{font-family:Fraunces,serif;font-size:22px;font-weight:600;margin:0 0 4px}
.steps .s{color:var(--ink-3);font-size:13px;margin:0 0 14px}
.st{display:flex;gap:12px;margin-bottom:14px}
.num{flex:none;width:30px;height:30px;border-radius:99px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.st b{font-size:14.5px}
.st > div > span{display:block;font-size:13px;color:var(--ink-2);line-height:1.45}
.kbd{display:inline-block;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:7px;padding:0 6px;font:600 12px Inter;background:var(--paper);color:var(--ink)}
.phone{border-radius:26px;background:var(--ink);padding:10px;max-width:230px;margin:0 auto;box-shadow:0 18px 40px rgba(31,26,20,.2)}
.scr{border-radius:18px;background:var(--paper);height:330px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.sheet{background:#fff;border-radius:16px 16px 0 0;padding:12px;font-size:12.5px}
.sheet div{padding:7px 4px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.sheet div.hl{color:var(--coral);font-weight:700;background:var(--coral-50);border-radius:8px;border:0}

/* ---------- Mascottes castor (SVG carrés : ~12 % de vide en haut et en bas) ---------- */
.castor{display:block;pointer-events:none;user-select:none}
.ch .castor{height:120px;width:auto;margin:-9px auto 0}
.hero-demo{position:relative}
/* Debout en bas à gauche de la feuille avant / après, au premier plan : devant la ligne
   et la poignée du curseur (z-index 3 et 4) ; pointer-events:none laisse le curseur utilisable. */
.castor-hero{position:absolute;height:230px;width:auto;left:-150px;bottom:-30px;z-index:5;filter:drop-shadow(0 10px 14px rgba(31,26,20,.12));will-change:transform}
.card.avec-castor{position:relative}
.castor-carte{position:absolute;right:-18px;top:-92px;height:120px;width:auto;z-index:1}
.castor-carte.gauche{right:auto;left:-18px}
.castor-bande{flex:none;height:88px;width:auto;margin:-24px -8px -24px -11px}

/* @@responsive : garder en fin de fichier */
@media (max-width: 900px){
  .cards,.cards3,.calc,.steps,.grid,.grid.deux{grid-template-columns:1fr}
  .ribbon{flex-direction:column;align-items:flex-start}
  .dl{grid-template-columns:1fr 1fr}
  .nav .nav-links,.nav .pill{display:none}
  .nav-burger{display:flex}
  .nav{gap:10px}
}
@media (max-width: 600px){
  .choices{grid-template-columns:1fr}
  .ch{display:grid;grid-template-columns:auto 1fr;column-gap:12px;text-align:left;align-items:center}
  .ch .ic{grid-row:span 2}
  .ch b{margin:0 0 2px}
}
@media (max-width: 480px){
  .dl{grid-template-columns:1fr}
  .price{font-size:38px}
  .offer .price{font-size:44px}
  .offer .price small{display:block;margin-top:6px}
  .page{padding:24px 16px 24px}
  .header,.footer{padding:0 16px}
  .header .nav>.btn{white-space:nowrap;padding:7px 12px;font-size:12px}
}
/* Mascottes sur petits écrans */
@media (min-width: 901px) and (max-width: 1100px){
  /* cartes étroites : le castor élève ne doit pas toucher l’étiquette « Le plus choisi » */
  .castor-carte.gauche{height:96px;top:-72px;left:-24px}
}
@media (max-width: 1199px){
  .castor-hero{height:170px;left:-72px;bottom:-26px}
}
@media (max-width: 980px){
  .castor-hero{height:120px;left:-8px;bottom:-44px}
}
@media (max-width: 900px){
  .card.avec-castor{margin-top:72px}
}
@media (max-width: 600px){
  .ch .castor{height:64px;margin:-6px 0}
  .castor-bande{height:72px;margin:-16px -6px -16px -9px}
  .castor-carte{right:-4px}
  .castor-carte.gauche{right:auto;left:-4px}
}
@media (max-width: 480px){
  .castor-hero{display:none}
}