/* Page d’accueil du site et page des mascottes. Écrit par l’outil de la page d’accueil : ne pas retoucher à la main. */
:root{--bg:#fffefc;--surface:#ffffff;--menu:#f3e6f7;--primary:#A64AC9;--accent:#fddf5c;--mint:#ffeae0;--peach:#68f1eb;--lilac:#f9efde;--soft:#f6edfa;--text:#3a2b52;--muted:#6b607d;--border:#dfdce1;--onprimary:#ffffff;--onaccent:#3a2b52;--onmint:#3a2b52;--onpeach:#3a2b52;--onlilac:#3a2b52;--onsoft:#3a2b52;--menuink:#3a2b52;--menuactive:#A64AC9;--menuactiveink:#ffffff;--link:#A64AC9;--p1:#A64AC9;--p2:#FCCD04;--p3:#FFB48F;--p4:#F5E6CC;--p5:#17E9E0}
/* Cinq propositions de page d'accueil publique — la charte du site : Fraunces pour les titres, Nunito Sans pour le texte,
   couleurs de l'ambiance (les rôles sont écrits par le générateur, pris dans le fichier des palettes de l'application),
   bande de couleur sur le côté des cartes, formes animées. Les cartes d'offres reprennent celles de « Mon offre ». */
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('/assets/fonts/nunito-sans-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('/assets/fonts/nunito-sans-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
:root{--serif:'Fraunces',Georgia,serif;--sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--vert:#157a52;--page:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.012em;line-height:1.12}
p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
[hidden]{display:none!important}
main.v{overflow-x:clip}
svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* —— L'outil de choix (il ne fait pas partie de la page) —— */
.pick{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px clamp(12px,3vw,28px);background:#2b2440;color:#fff;font:400 13.5px/1.3 var(--sans)}
.pick>b{font-weight:600;margin-right:6px}
.pick button{appearance:none;border:1px solid rgb(255 255 255 / 30%);background:transparent;color:#fff;font:inherit;padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pick button:hover{border-color:#fff}
.pick button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#2b2440;font-weight:600}
.pick .why{flex:1 1 300px;min-width:0;padding-left:6px;color:rgb(255 255 255 / 84%)}

/* —— Le haut de page —— */
.top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:calc(var(--page) + 80px);margin:0 auto;padding:16px clamp(16px,5vw,40px) 6px}
.top .links{display:flex;align-items:center;gap:24px;font-size:14.5px}
.top .links a{text-decoration:none}
.top .links a:not(.btn):hover{color:var(--primary)}
.ox-logo{position:relative;display:block;width:138px;aspect-ratio:2172/724;flex:none;isolation:isolate}
.ox-logo .ox-ink,.ox-logo .ox-petal{position:absolute;inset:0;width:100%;height:100%;display:block}
.ox-logo .ox-ink{background:var(--text);-webkit-mask:url('/assets/original-37fca80c64474539.png') center/100% 100% no-repeat;mask:url('/assets/original-37fca80c64474539.png') center/100% 100% no-repeat}
.ox-logo .ox-petal{transform-origin:16.1% 48.3%;background:linear-gradient(135deg,color-mix(in srgb,var(--petal) 60%,#fff),var(--petal));-webkit-mask:var(--shape) center/contain no-repeat;mask:var(--shape) center/contain no-repeat;animation:petale 9s ease-in-out infinite;animation-delay:calc(var(--n) * .2s)}
.ox-logo .ox-petal:nth-of-type(2){--petal:var(--p3);--shape:url(/assets/ox-leaf-0.png);--n:0}
.ox-logo .ox-petal:nth-of-type(3){--petal:var(--p1);--shape:url(/assets/ox-leaf-1.png);--n:1}
.ox-logo .ox-petal:nth-of-type(4){--petal:var(--p5);--shape:url(/assets/ox-leaf-2.png);--n:2}
.ox-logo .ox-petal:nth-of-type(5){--petal:var(--p2);--shape:url(/assets/ox-leaf-3.png);--n:3}

/* —— Les commandes —— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border:1px solid var(--primary);border-radius:12px;background:var(--primary);color:var(--onprimary);font:600 15.5px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:translate .2s ease,box-shadow .2s ease}
.btn:hover{translate:0 -2px;box-shadow:0 10px 22px color-mix(in srgb,var(--primary) 26%,transparent)}
.btn.small{min-height:38px;padding:8px 16px;font-size:14px}
.btn.quiet{background:var(--surface);color:var(--text);border-color:color-mix(in srgb,var(--text) 22%,var(--surface));font-weight:400}
.btn.quiet:hover{box-shadow:0 8px 18px rgb(58 43 82 / 10%)}
.lnk{display:inline-flex;align-items:center;gap:8px;min-height:46px;font-size:15.5px;text-decoration:none;border-bottom:0}
.lnk>span{border-bottom:1.5px solid color-mix(in srgb,var(--primary) 45%,transparent)}
.lnk:hover>span{border-color:var(--primary)}
.lnk .play{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--onaccent)}
.lnk .play svg{width:12px;height:12px;fill:currentColor;margin-left:2px}

/* —— Les blocs —— */
.blk{position:relative;max-width:var(--page);margin:0 auto;padding:clamp(40px,6vw,76px) clamp(16px,5vw,32px)}
.over{margin-bottom:10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--primary)}
.blk>h2{font-size:clamp(26px,3vw,36px);max-width:22ch}
.blk>.lead{margin-top:12px;max-width:62ch;font-size:17px;color:var(--muted)}
.fine{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted)}
.tile .over,.band .over{color:color-mix(in srgb,var(--primary) 62%,var(--text))}
.band{max-width:none;background:color-mix(in srgb,var(--soft) 62%,var(--bg))}
.band>.in{max-width:var(--page);margin:0 auto}

/* —— Le haut : commun —— */
.hero{position:relative;max-width:calc(var(--page) + 80px);margin:0 auto;padding:clamp(22px,4vw,54px) clamp(16px,5vw,40px) clamp(36px,5vw,70px)}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(33px,4.6vw,59px);line-height:1.06}
.hero h1 em{font-style:italic;color:var(--primary);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c30-7 52 5 82 0s54-6 112 0' fill='none' stroke='%23FCCD04' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% .24em no-repeat;padding-bottom:.06em}
.hero .lead{margin-top:18px;max-width:56ch;font-size:clamp(16px,1.3vw,18.5px);color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:26px}
.shapes{position:absolute!important;inset:0;z-index:0!important;pointer-events:none}
.shapes>i{position:absolute;display:block;border-radius:50%}
.star{border-radius:0!important;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* —— La carte d'une séance, comme dans le cahier journal de l'application —— */
.jc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:11px 14px 11px 26px;border:1px solid var(--border);border-left:7px solid var(--sub);border-radius:14px;background:var(--surface);box-shadow:0 8px 20px rgb(58 43 82 / 6%)}
.jc .med{position:absolute;left:-18px;top:50%;translate:0 -50%;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--sub);color:var(--ink);box-shadow:0 0 0 3px var(--surface)}
.jc .med svg{width:16px;height:16px}
.jc .time{display:grid;justify-items:start;min-width:44px;line-height:1.2}
.jc .time b{font-weight:600;font-size:15px}
.jc .time small{font-size:11.5px;color:var(--muted)}
.jc .what{display:grid;min-width:0;line-height:1.3}
.jc .what b{font-family:var(--serif);font-weight:500;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc .what small{font-size:12.5px;color:var(--muted)}
.jc .state{padding:3px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--muted);white-space:nowrap}
.jc.done{background:color-mix(in srgb,var(--vert) 7%,var(--surface));border-color:color-mix(in srgb,var(--vert) 26%,var(--surface));border-left-color:var(--sub)}
.jc.done .state{border-color:transparent;background:color-mix(in srgb,var(--vert) 13%,var(--surface));color:#0e5c3d}

/* —— Les offres : les mêmes cartes que « Mon offre » dans l'application —— */
[data-offer=decouverte]{--offer:var(--mint)}
[data-offer=enseignant]{--offer:var(--accent)}
[data-offer=ecole]{--offer:var(--peach)}
[data-offer]{--offer-vif:var(--offer)}
@supports (color:oklch(from red l c h)){[data-offer]{--offer-vif:oklch(from var(--offer) calc(l - max(0,.11 - c)*1.5) max(c,.11) h)}}
.offer-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:26px}
.offer-card,.offer-hero{position:relative;overflow:hidden;margin:0;border:1px solid color-mix(in srgb,var(--offer-vif) 34%,var(--surface));border-left:7px solid var(--offer-vif);border-radius:14px;background:color-mix(in srgb,var(--offer-vif) 20%,var(--surface))}
.offer-hero{background:color-mix(in srgb,var(--offer-vif) 27%,var(--surface))}
.offer-card{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px}
.offer-card::after,.offer-hero::after{content:'';position:absolute;right:-56px;top:-70px;width:160px;height:160px;border-radius:50%;border:16px solid color-mix(in srgb,var(--offer-vif) 30%,transparent);pointer-events:none}
.offer-card>*,.offer-hero>*{position:relative;z-index:1}
.offer-art{display:block;width:62px;height:62px;flex:none}
.offer-art svg{display:block;width:100%;height:100%;overflow:visible}
.offer-art [data-fill]{fill:var(--offer-vif)}
.offer-art [data-soft]{fill:color-mix(in srgb,var(--offer-vif) 44%,var(--surface))}
.offer-art [data-paper]{fill:var(--surface)}
.offer-art [data-line]{fill:none;stroke:var(--text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.offer-art [data-sway]{transform-box:fill-box;transform-origin:50% 100%;animation:offer-sway 3.6s ease-in-out infinite}
.offer-art [data-flag]{transform-box:fill-box;transform-origin:0% 50%;animation:offer-sway 2.8s ease-in-out infinite}
.offer-art [data-bob]{animation:offer-bob 3.2s ease-in-out infinite}
.offer-tag{align-self:flex-start;display:inline-block;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--offer-vif) 46%,var(--surface));font-size:11.5px;line-height:1.5}
.offer-card h3{margin-top:2px;font-size:19px;line-height:1.2}
.offer-price{font-size:13.5px;line-height:1.3}
.offer-price b{margin-right:4px;font-size:30px;font-weight:600;letter-spacing:-.01em}
.offer-card ul{display:grid;gap:6px;margin:8px 0 14px;font-size:13.5px;line-height:1.4}
.offer-card li{position:relative;padding-left:20px}
.offer-card li::before{content:'';position:absolute;left:2px;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--offer-vif)}
.offer-card .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.offer-card .actions .btn{min-height:38px;padding:8px 14px;font-size:14px}
.offer-meter{--p:100%;display:grid;place-items:center;flex:none;width:98px;height:98px;border-radius:50%;background:conic-gradient(var(--offer-vif) var(--p),color-mix(in srgb,var(--offer-vif) 22%,var(--surface)) 0)}
.offer-meter>span{display:grid;place-content:center;width:76px;height:76px;border-radius:50%;background:var(--surface);font-size:11.5px;line-height:1.15;text-align:center}
.offer-meter b{display:block;font-size:27px;font-weight:600;line-height:1}
.offers .tiers{margin-top:14px;font-size:13px;color:var(--muted)}

/* —— Les trois promesses —— */
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 34px}
.promise{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45}
.promise>i{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--tone) 34%,var(--surface));color:var(--text);font-style:normal}
.promise:nth-child(1){--tone:var(--p1)}.promise:nth-child(2){--tone:var(--p5)}.promise:nth-child(3){--tone:var(--p2)}
.promises.strip{padding-top:22px;padding-bottom:22px}
.promises.rules .promise{display:block;padding-top:16px;border-top:2px solid color-mix(in srgb,var(--tone) 70%,var(--surface))}
.promises.rules .promise>i{margin-bottom:10px}

/* —— Les six outils —— */
.tools .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.tool{position:relative;padding:16px 18px 16px 26px;border:1px solid var(--border);border-left:7px solid var(--tone);border-radius:14px;background:var(--surface)}
.tool .med{position:absolute;left:-18px;top:16px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--tone);color:var(--ink,var(--text));box-shadow:0 0 0 3px var(--bg)}
.tool .med svg{width:16px;height:16px}
.tool h3{font-size:17px}
.tool p{margin-top:6px;font-size:14.5px;color:var(--muted)}
.tool:nth-child(6n+1){--tone:var(--p1);--ink:#fff}.tool:nth-child(6n+2){--tone:var(--p2)}.tool:nth-child(6n+3){--tone:var(--p5)}.tool:nth-child(6n+4){--tone:var(--p3)}.tool:nth-child(6n+5){--tone:var(--p1);--ink:#fff}.tool:nth-child(6n+6){--tone:var(--p2)}
.tools.rows .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.tools.rows .tool{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:18px 0;border:0;border-top:1px solid var(--border);border-radius:0;background:none}
.tools.rows .tool .med{position:static;grid-row:span 2;width:40px;height:40px;box-shadow:none;background:color-mix(in srgb,var(--tone) 30%,var(--surface));color:var(--text)}
.tools.rows .tool .med svg{width:20px;height:20px}
.tools.rows .tool p{margin:0}

/* —— Le chemin en quatre étapes —— */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px;counter-reset:none}
.step{position:relative;padding-top:54px}
.step::before{content:'';position:absolute;left:44px;right:-18px;top:21px;height:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--tone) 70%,var(--surface)) 0 6px,transparent 6px 12px)}
.step:last-child::before{display:none}
.step .num{position:absolute;left:0;top:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tone);color:var(--ink,var(--text));font:500 17px/1 var(--serif)}
.step small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.step h3{margin-top:2px;font-size:18px}
.step p{margin-top:6px;font-size:14.5px;color:var(--muted)}
.step:nth-child(1){--tone:var(--p1);--ink:#fff}.step:nth-child(2){--tone:var(--p2)}.step:nth-child(3){--tone:var(--p3)}.step:nth-child(4){--tone:var(--p5)}
/* le fil : une guirlande qui relie les quatre étapes */
.fil{position:relative;margin-top:34px}
.fil>svg{position:absolute;left:0;top:0;width:100%;height:120px;overflow:visible}
.fil>svg path{fill:none;stroke:color-mix(in srgb,var(--primary) 46%,var(--surface));stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:0}
.js .fil>svg path{stroke-dashoffset:1400}
.js .rv.in .fil>svg path{animation:trace 2.2s .2s ease-out forwards}
.fil .steps{margin-top:0}
.fil .step{padding-top:132px;text-align:center}
.fil .step::before{display:none}
.fil .step .num{left:50%;margin-left:-26px;width:52px;height:52px;font-size:20px;box-shadow:0 0 0 6px var(--bg)}
.js .rv.in .fil .step .num{animation:pop .5s both;animation-delay:calc(.3s + var(--n) * .4s)}
.fil .step:nth-child(odd) .num{top:8px}
.fil .step:nth-child(even) .num{top:60px}
.fil .step:nth-child(1){--n:0}.fil .step:nth-child(2){--n:1}.fil .step:nth-child(3){--n:2}.fil .step:nth-child(4){--n:3}

/* —— Ce qui nous distingue —— */
.edges .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 40px;margin-top:26px}
.edge{position:relative;padding-left:18px}
.edge::before{content:'';position:absolute;left:0;top:.4em;bottom:.3em;width:4px;border-radius:4px;background:var(--tone)}
.edge h3{font-size:17px}
.edge p{margin-top:5px;font-size:14.5px;color:var(--muted)}
.edge:nth-child(5n+1){--tone:var(--p1)}.edge:nth-child(5n+2){--tone:var(--p2)}.edge:nth-child(5n+3){--tone:var(--p5)}.edge:nth-child(5n+4){--tone:var(--p3)}.edge:nth-child(5n+5){--tone:var(--p1)}
.edges.tiles .grid{gap:14px}
.edges.tiles .edge{padding:18px;border-radius:16px;background:color-mix(in srgb,var(--tone) 16%,var(--surface))}
.edges.tiles .edge::before{display:none}

/* —— Pour qui —— */
.who .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.whocard{position:relative;padding:22px 22px 20px 28px;border:1px solid var(--border);border-left:7px solid var(--tone);border-radius:14px;background:var(--surface)}
.whocard:nth-child(1){--tone:var(--p1)}.whocard:nth-child(2){--tone:var(--p5)}
.whocard small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.whocard h3{margin-top:4px;font-size:21px}
.whocard>p{margin-top:8px;font-size:15px;color:var(--muted)}
.whocard ul{display:grid;gap:7px;margin:14px 0 18px;font-size:14.5px}
.whocard li{position:relative;padding-left:20px}
.whocard li::before{content:'';position:absolute;left:2px;top:.46em;width:9px;height:9px;border-radius:50%;background:var(--tone)}

/* —— La démonstration —— */
.demo .in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.demo h2{font-size:clamp(24px,2.6vw,32px)}
.demo p{margin-top:8px;max-width:58ch;color:var(--muted)}

/* —— Les questions —— */
.faq>h2{margin-bottom:18px}
.faq details{border-top:1px solid var(--border)}
.faq details:last-of-type{border-bottom:1px solid var(--border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;font-family:var(--serif);font-weight:500;font-size:17.5px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--p2) 55%,var(--surface));font:400 18px/1 var(--sans);transition:rotate .25s ease}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 44px 18px 2px;max-width:76ch;color:var(--muted)}

/* —— La fin —— */
.closing{text-align:center;padding-bottom:clamp(56px,8vw,96px)}
.closing h2{margin:0 auto;max-width:20ch;font-size:clamp(28px,3.6vw,44px)}
.closing p{margin:14px auto 24px;max-width:50ch;font-size:17px;color:var(--muted)}
.closing .shapes>i:nth-child(1){left:8%;top:30%;width:70px;height:70px;background:var(--p5);animation:goutte 10s ease-in-out infinite}
.closing .shapes>i:nth-child(2){right:9%;top:22%;width:96px;height:96px;background:color-mix(in srgb,var(--p3) 80%,#fff);animation:flotte 8s ease-in-out infinite}
.closing .shapes>i:nth-child(3){right:20%;bottom:16%;width:26px;height:26px;background:var(--p2);animation:scintille 3.4s ease-in-out infinite}
.closing .shapes>i:nth-child(4){left:20%;bottom:20%;width:22px;height:22px;background:var(--p1);animation:scintille 4s ease-in-out -1.4s infinite}
.foot{max-width:var(--page);margin:0 auto;padding:18px clamp(16px,5vw,32px) 36px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--muted)}

/* ═══ 1 · La journée ═══ */
.h-day{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,4vw,60px);align-items:center}
.daybox{position:relative;padding:18px 18px 20px 34px;border:1px solid var(--border);border-radius:26px;background:color-mix(in srgb,var(--soft) 58%,var(--surface));animation:balance 7s ease-in-out infinite}
.daybox>header{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px -14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.daybox .jc{margin-top:10px;animation:rise .7s both;animation-delay:calc(.15s + var(--n) * .13s)}
.h-day .shapes>i:nth-child(1){right:-40px;top:-10px;width:230px;height:230px;border:3px dashed color-mix(in srgb,var(--p1) 55%,transparent);animation:tourne 50s linear infinite}
.h-day .shapes>i:nth-child(2){right:36%;top:6%;width:22px;height:22px;background:var(--p2);animation:scintille 3.2s ease-in-out infinite}
.h-day .shapes>i:nth-child(3){right:2%;bottom:4%;width:90px;height:90px;background:var(--p5);animation:goutte 11s ease-in-out infinite}
.h-day .shapes>i:nth-child(4){left:44%;bottom:8%;width:44px;height:44px;background:var(--p3);animation:flotte 7s ease-in-out infinite}
.h-day .shapes>i:nth-child(5){left:-30px;top:40%;width:60px;height:60px;background:color-mix(in srgb,var(--p2) 70%,#fff);animation:flotte 9s ease-in-out -3s infinite}

/* ═══ 2 · Le calme ═══ */
.h-calm{overflow:clip;text-align:center;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(40px,6vw,84px)}
.h-calm h1{margin:0 auto;max-width:15ch;font-size:clamp(38px,6vw,78px)}
.h-calm .lead{margin-left:auto;margin-right:auto}
.h-calm .cta{justify-content:center}
.bigclover{position:absolute!important;z-index:0!important;left:calc(50% - 322px);top:50%;width:2000px;aspect-ratio:2172/724;translate:0 -52%;opacity:.15;pointer-events:none}
.bigclover>i{position:absolute;inset:0;transform-origin:16.1% 48.3%;background:var(--petal);-webkit-mask:var(--shape) center/contain no-repeat;mask:var(--shape) center/contain no-repeat;animation:respire 8s ease-in-out infinite;animation-delay:calc(var(--n) * -2s)}
.bigclover>i:nth-child(1){--petal:var(--p3);--shape:url(/assets/ox-leaf-0.png);--n:0}
.bigclover>i:nth-child(2){--petal:var(--p1);--shape:url(/assets/ox-leaf-1.png);--n:1}
.bigclover>i:nth-child(3){--petal:var(--p5);--shape:url(/assets/ox-leaf-2.png);--n:2}
.bigclover>i:nth-child(4){--petal:var(--p2);--shape:url(/assets/ox-leaf-3.png);--n:3}
.h-calm .shapes>i:nth-child(1){left:12%;top:18%;width:20px;height:20px;background:var(--p2);animation:scintille 3s ease-in-out infinite}
.h-calm .shapes>i:nth-child(2){right:14%;top:26%;width:16px;height:16px;background:var(--p1);animation:scintille 4s ease-in-out -1s infinite}
.h-calm .shapes>i:nth-child(3){right:20%;bottom:16%;width:38px;height:38px;background:var(--p5);animation:flotte 7s ease-in-out infinite}
.h-calm .shapes>i:nth-child(4){left:18%;bottom:20%;width:30px;height:30px;background:var(--p3);animation:flotte 8s ease-in-out -2s infinite}

/* ═══ 3 · Les pétales ═══ */
.h-clover{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,72px);align-items:center}
.cloverbox{display:grid;justify-items:center;gap:20px}
.clover{display:grid;grid-template-columns:repeat(2,var(--leaf));gap:10px;--leaf:clamp(140px,15.5vw,200px);animation:balance 8s ease-in-out infinite}
.petal{appearance:none;position:relative;display:grid;align-content:center;justify-items:center;gap:2px;width:var(--leaf);height:var(--leaf);padding:16px;border:0;background:color-mix(in srgb,var(--tone) 46%,var(--surface));color:var(--text);font:inherit;text-align:center;cursor:pointer;transition:scale .35s cubic-bezier(.2,.8,.3,1.2),background-color .3s ease,color .3s ease,box-shadow .3s ease}
.petal small{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.petal b{font:500 clamp(17px,1.7vw,22px)/1.15 var(--serif)}
.petal.p1{--tone:var(--p1);--ink:#fff;border-radius:50% 50% 14% 50%;transform-origin:100% 100%}
.petal.p2{--tone:var(--p2);border-radius:50% 50% 50% 14%;transform-origin:0 100%}
.petal.p3{--tone:var(--p3);border-radius:50% 14% 50% 50%;transform-origin:100% 0}
.petal.p4{--tone:var(--p5);border-radius:14% 50% 50% 50%;transform-origin:0 0}
.petal:hover{background:color-mix(in srgb,var(--tone) 70%,var(--surface))}
.petal[aria-pressed=true]{background:var(--tone);color:var(--ink,var(--text));scale:1.06;z-index:2}
.petal-detail{position:relative;width:100%;max-width:430px;min-height:128px;padding:14px 18px 14px 22px;border:1px solid var(--border);border-left:7px solid var(--tone,var(--p1));border-radius:14px;background:var(--surface);transition:border-color .3s ease}
.petal-detail h3{font-size:18px}
.petal-detail p{margin-top:4px;font-size:14.5px;color:var(--muted)}
.petal-detail .with{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13.5px}
.petal-detail .with span{position:relative;padding-left:15px}
.petal-detail .with span::before{content:'';position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--tone,var(--p1))}
.h-clover .shapes>i:nth-child(1){right:-30px;top:4%;width:120px;height:120px;border:3px dashed color-mix(in srgb,var(--p5) 70%,transparent);animation:tourne 40s linear infinite}
.h-clover .shapes>i:nth-child(2){left:46%;top:10%;width:20px;height:20px;background:var(--p2);animation:scintille 3.2s ease-in-out infinite}
.h-clover .shapes>i:nth-child(3){left:42%;bottom:10%;width:46px;height:46px;background:color-mix(in srgb,var(--p3) 75%,#fff);animation:flotte 7s ease-in-out infinite}

/* ═══ 4 · L'essai d'abord ═══ */
.h-trial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.ticket{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 22px;align-items:center;padding:24px 24px 22px 26px;border-radius:20px;box-shadow:0 22px 50px color-mix(in srgb,var(--offer-vif) 28%,transparent);animation:balance 7s ease-in-out infinite}
.ticket::after{right:-70px;top:-96px;width:240px;height:240px;border-width:24px}
.ticket .offer-meter{width:124px;height:124px;animation:compte 1.6s .3s cubic-bezier(.3,.7,.2,1) both}
.ticket .offer-meter>span{width:96px;height:96px;font-size:13px}
.ticket .offer-meter b{font-size:36px}
.ticket .offer-art{position:absolute;right:22px;top:20px;width:66px;height:66px}
.ticket h3{font-size:24px}
.ticket .offer-price b{font-size:34px}
.ticket ul{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;line-height:1.35}
.ticket li{position:relative;padding-left:18px}
.ticket li::before{content:'';position:absolute;left:1px;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--offer-vif)}
.others{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
.others .offer-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:start}
.others .offer-card .offer-art{grid-row:span 4}
.others .offer-card ul{margin:6px 0 0}
.others .offer-card .offer-tag{justify-self:start}
.others .offer-card>*:not(.offer-art){grid-column:2}
.h-trial .shapes>i:nth-child(1){left:42%;top:8%;width:20px;height:20px;background:var(--p2);animation:scintille 3s ease-in-out infinite}
.h-trial .shapes>i:nth-child(2){right:-20px;bottom:6%;width:74px;height:74px;background:var(--p5);animation:goutte 10s ease-in-out infinite}
.h-trial .shapes>i:nth-child(3){left:46%;bottom:14%;width:34px;height:34px;background:var(--p1);animation:flotte 7s ease-in-out infinite}

/* ═══ 5 · La mosaïque ═══ */
.h-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;padding-top:clamp(16px,3vw,34px)}
.tile{position:relative;overflow:hidden;padding:22px;border-radius:20px;background:color-mix(in srgb,var(--tone) 22%,var(--surface));transition:translate .25s ease,box-shadow .25s ease;animation:rise .7s both;animation-delay:calc(var(--n) * .08s)}
.tile>*{position:relative;z-index:1}
.tile:hover{translate:0 -3px;box-shadow:0 16px 34px color-mix(in srgb,var(--tone) 26%,transparent)}
.tile.t-title{grid-column:span 7;grid-row:span 2;--tone:var(--p1);--n:0;padding:clamp(22px,3vw,40px);background:color-mix(in srgb,var(--p1) 11%,var(--surface))}
.tile.t-title h1{font-size:clamp(31px,3.9vw,52px)}
.tile.t-price{grid-column:span 5;--n:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:center;border-left:7px solid var(--offer-vif);background:color-mix(in srgb,var(--offer-vif) 15%,var(--surface))}
.tile.t-price{--tone:var(--offer-vif)}
.tile.t-price .offer-art{grid-row:span 3;width:74px;height:74px}
.tile.t-price .offer-price b{font-size:40px}
.tile.t-price small{font-size:13.5px;color:var(--muted)}
.tile.t-day{grid-column:span 5;--tone:var(--p4);--n:2;padding:16px 16px 16px 32px;background:color-mix(in srgb,var(--p4) 46%,var(--surface))}
.tile.t-day>small{display:block;margin:0 0 4px -14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile.t-day .jc{margin-top:8px;box-shadow:none}
.tile.t-promise{grid-column:span 3;--n:3;display:grid;align-content:start;gap:12px;font-size:15px;line-height:1.4}
.tile.t-promise>i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);font-style:normal}
.tile.t-promise:nth-of-type(4){--tone:var(--p5)}.tile.t-promise:nth-of-type(5){--tone:var(--p2);--n:4}.tile.t-promise:nth-of-type(6){--tone:var(--p3);--n:5}
.tile.t-demo{grid-column:span 3;--tone:var(--p1);--n:6;display:grid;align-content:space-between;gap:12px;background:var(--p1);color:#fff}
.tile.t-demo h2{font-size:21px;color:#fff}
.tile.t-demo .lnk{color:#fff;min-height:36px}
.tile.t-demo .lnk>span{border-color:rgb(255 255 255 / 55%)}
.tile .deco{position:absolute;z-index:0;right:-26px;bottom:-26px;width:110px;height:110px;border-radius:50%;border:3px dashed color-mix(in srgb,var(--tone) 60%,transparent);animation:tourne 30s linear infinite;pointer-events:none}
.tile.t-demo .deco{right:-48px;bottom:-58px;border-color:rgb(255 255 255 / 40%)}
.tile.t-title .deco{right:-90px;bottom:-120px;width:240px;height:240px}
.tile.t-title .spark{position:absolute;z-index:0;right:13%;top:14%;width:24px;height:24px;background:var(--p2);animation:scintille 3.2s ease-in-out infinite}

/* —— L'apparition au défilement (seulement si le navigateur l'accepte) —— */
.js .rv{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .7s ease}
.js .rv.in{opacity:1;translate:none}

/* —— Téléphone —— */
@media (max-width:860px){
 .top .links a:not(.btn){display:none}
 .ox-logo{width:118px}
 .pick{gap:6px}
 .pick>b{display:none}
 .pick button{padding:6px 12px}
 .pick button .nm{display:none}
 .pick .why{flex-basis:100%;padding-left:2px;font-size:12.5px}
 .h-day,.h-clover,.h-trial{grid-template-columns:minmax(0,1fr)}
 .offer-cards,.promises,.tools .grid,.tools.rows .grid,.edges .grid,.who .duo,.others{grid-template-columns:minmax(0,1fr)}
 .promises{gap:14px}
 .steps{grid-template-columns:minmax(0,1fr);gap:22px}
 .step{padding:0 0 0 60px;min-height:44px}
 .step::before{left:21px;right:auto;top:48px;bottom:-22px;width:2px;height:auto;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--tone) 70%,var(--surface)) 0 6px,transparent 6px 12px)}
 .fil>svg{display:none}
 .fil .step{padding:0 0 0 68px;text-align:left;min-height:52px}
 .fil .step .num,.fil .step:nth-child(odd) .num,.fil .step:nth-child(even) .num{left:0;top:0;margin-left:0}
 .demo .in{grid-template-columns:minmax(0,1fr)}
 .faq details p{padding-right:8px}
 .cloverbox{justify-items:center}
 .clover{--leaf:min(42vw,170px)}
 .ticket{grid-template-columns:minmax(0,1fr);rotate:none;padding:20px 18px 18px 20px}
 .ticket ul{display:grid}
 .ticket .offer-art{right:16px;top:16px;width:54px;height:54px}
 .others .offer-card{grid-template-columns:minmax(0,1fr)}
 .others .offer-card>*:not(.offer-art){grid-column:1}
 .h-mosaic{grid-template-columns:minmax(0,1fr)}
 .tile.t-title,.tile.t-price,.tile.t-day,.tile.t-promise,.tile.t-demo{grid-column:1;grid-row:auto}
 .tile.t-promise{grid-template-columns:auto minmax(0,1fr);align-items:center}
 .jc{grid-template-columns:auto minmax(0,1fr);gap:10px}
 .jc .state{grid-column:2;justify-self:start}
 .jc .what b{white-space:normal}
 .bigclover{width:1300px;left:calc(50% - 209px)}
 .closing .shapes,.hero>.shapes{display:none}
 .daybox>header{flex-direction:column;gap:1px}
 .tile.t-title .deco{display:none}
 .cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js .fil>svg path{stroke-dashoffset:0}
 .js .rv{opacity:1;translate:none}
}

@keyframes petale{0%,78%,100%{transform:none}84%{transform:rotate(10deg) scale(1.09)}90%{transform:rotate(-6deg) scale(1.04)}95%{transform:rotate(3deg)}}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes goutte{0%,100%{border-radius:58% 42% 55% 45%/52% 48% 52% 48%;transform:translateY(0) rotate(0)}33%{border-radius:44% 56% 42% 58%/58% 44% 56% 42%;transform:translateY(-8px) rotate(8deg)}66%{border-radius:52% 48% 60% 40%/44% 56% 44% 56%;transform:translateY(4px) rotate(-6deg)}}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes scintille{0%,100%{transform:scale(.6) rotate(0);opacity:.55}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
@keyframes balance{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes respire{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(5deg) scale(1.05)}}
@keyframes compte{from{--p:0%}to{--p:100%}}
@keyframes offer-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes offer-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@property --p{syntax:'<percentage>';inherits:true;initial-value:100%}

/* Trois propositions « à récit » : la page raconte, au fil du défilement, le passage de la paperasse à la classe.
   S'ajoute à propositions-site.css (mêmes écritures, mêmes couleurs d'ambiance, mêmes cartes d'offres).
   --t va de 0 à 1 pendant qu'on fait défiler une histoire ; data-step dit à quelle étape on est. */
@property --t{syntax:'<number>';inherits:true;initial-value:0}

/* —— Une histoire : une haute section, et sa scène qui reste à l'écran —— */
.story{position:relative}
.js .story{height:calc(var(--steps) * 92vh + 100vh)}
.stage{--t:0;position:relative;max-width:calc(var(--page) + 80px);margin:0 auto;padding:0 clamp(16px,5vw,40px)}
.js .stage{position:sticky;top:var(--bar,44px);height:calc(100vh - var(--bar,44px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,4vw,56px);align-items:center}
.chapters{position:relative;min-height:420px}
.chapter{padding:8px 0}
.js .chapter{position:absolute;inset:0;display:grid;align-content:center;opacity:0;translate:0 22px;transition:opacity .45s ease,translate .45s ease;pointer-events:none}
.js .stage[data-step="0"] .chapter:nth-child(1),.js .stage[data-step="1"] .chapter:nth-child(2),.js .stage[data-step="2"] .chapter:nth-child(3),.js .stage[data-step="3"] .chapter:nth-child(4),.js .stage[data-step="4"] .chapter:nth-child(5),.js .stage[data-step="5"] .chapter:nth-child(6),.js .stage[data-step="6"] .chapter:nth-child(7){opacity:1;translate:none;pointer-events:auto}
.chapter h1{font-size:clamp(32px,4.3vw,56px);line-height:1.06}
.chapter h1 em{font-style:italic;color:var(--primary);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c30-7 52 5 82 0s54-6 112 0' fill='none' stroke='%23FCCD04' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% .24em no-repeat;padding-bottom:.06em}
.chapter h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;max-width:16ch}
.chapter .lead{margin-top:16px;max-width:52ch;font-size:clamp(16px,1.3vw,18.5px);color:var(--muted)}
.chapter .num{display:inline-grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:var(--tone);color:var(--ink,var(--text));font:500 19px/1 var(--serif)}
.chapter .word{display:block;margin-bottom:4px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.chapter .with{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font-size:14.5px}
.chapter .with span{position:relative;padding-left:16px}
.chapter .with span::before{content:'';position:absolute;left:0;top:.46em;width:9px;height:9px;border-radius:50%;background:var(--tone)}
.chapter:nth-child(2){--tone:var(--p1);--ink:#fff}.chapter:nth-child(3){--tone:var(--p2)}.chapter:nth-child(4){--tone:var(--p3)}.chapter:nth-child(5){--tone:var(--p5)}.chapter:nth-child(6){--tone:var(--p2)}
.dots{position:absolute;left:clamp(16px,5vw,40px);bottom:26px;display:flex;gap:7px}
.dots i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--text) 18%,var(--bg));transition:width .3s ease,background-color .3s ease}
.stage[data-step="0"] .dots i:nth-child(1),.stage[data-step="1"] .dots i:nth-child(2),.stage[data-step="2"] .dots i:nth-child(3),.stage[data-step="3"] .dots i:nth-child(4),.stage[data-step="4"] .dots i:nth-child(5),.stage[data-step="5"] .dots i:nth-child(6),.stage[data-step="6"] .dots i:nth-child(7){width:26px;border-radius:9px;background:var(--primary)}
.hint{position:absolute;right:clamp(16px,5vw,40px);bottom:22px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);opacity:calc(1 - var(--t) * 9)}
.hint i{width:18px;height:28px;border:2px solid var(--muted);border-radius:10px;position:relative}
.hint i::after{content:'';position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--muted);animation:molette 1.6s ease-in-out infinite}

/* ═══ Récit 1 · Du dimanche soir au lundi matin : la scène qui s'éclaire ═══ */
.scene{position:relative}
.scene svg{display:block;width:100%;height:auto;max-height:calc(100vh - 150px);overflow:visible}
:is(.scene,.peek) .wall{fill:color-mix(in oklch,var(--lilac) calc(var(--t) * 100%),#33285a)}
:is(.scene,.peek) .sky{fill:color-mix(in oklch,#bfeaff calc(var(--t) * 100%),#191434)}
:is(.scene,.peek) .frame{fill:none;stroke:color-mix(in srgb,#ffffff calc(var(--t) * 100%),#4a4170);stroke-width:5}
:is(.scene,.peek) .moon{fill:#fdf1c2;opacity:calc(1 - var(--t) * 2.2)}
:is(.scene,.peek) .stars circle{fill:#fff;opacity:calc(.9 - var(--t) * 2.4)}
:is(.scene,.peek) .sun{fill:var(--p2);transform:translateY(calc((1 - var(--t)) * 70px));opacity:calc(var(--t) * 1.6 - .3)}
:is(.scene,.peek) .clock-face{fill:color-mix(in srgb,#ffffff calc(40% + var(--t) * 60%),#4a4170);stroke:color-mix(in srgb,var(--text) calc(var(--t) * 100%),#857ba8);stroke-width:3}
:is(.scene,.peek) .hand{fill:none;stroke:color-mix(in srgb,var(--text) calc(var(--t) * 100%),#e9e4ff);stroke-width:3.4;stroke-linecap:round}
:is(.scene,.peek) .hand-h{transform:rotate(calc(285deg + var(--t) * 325deg))}
:is(.scene,.peek) .hand-m{transform:rotate(calc(180deg + var(--t) * 300deg))}
:is(.scene,.peek) .desk{fill:color-mix(in srgb,var(--p3) calc(55% + var(--t) * 45%),#5b4b78)}
:is(.scene,.peek) .desk-shadow{fill:rgb(0 0 0 / 10%)}
:is(.scene,.peek) .torso{fill:var(--primary)}
:is(.scene,.peek) .collar{fill:color-mix(in srgb,var(--primary) 60%,#fff)}
:is(.scene,.peek) .skin{fill:#eebd94}
:is(.scene,.peek) .hair{fill:#4b2f3a}
:is(.scene,.peek) .eye{fill:#2b2440}
:is(.scene,.peek) .line{fill:none;stroke:#2b2440;stroke-width:3;stroke-linecap:round}
:is(.scene,.peek) .teacher{transform:translateY(calc((1 - var(--t)) * 9px))}
:is(.scene,.peek) .head{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(calc((1 - var(--t)) * 7deg))}
:is(.scene,.peek) .lid{opacity:calc(1 - var(--t) * 2.4)}
:is(.scene,.peek) .eye{transform-box:fill-box;transform-origin:center;transform:scaleY(calc(.55 + var(--t) * .45))}
:is(.scene,.peek) .brow-l{transform-box:fill-box;transform-origin:100% 50%;transform:rotate(calc((1 - var(--t)) * 16deg)) translateY(calc(var(--t) * -3px))}
:is(.scene,.peek) .brow-r{transform-box:fill-box;transform-origin:0 50%;transform:rotate(calc((1 - var(--t)) * -16deg)) translateY(calc(var(--t) * -3px))}
:is(.scene,.peek) .mouth{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(calc(-.75 + var(--t) * 1.75))}
:is(.scene,.peek) .cheek{fill:#f58f7c;opacity:calc(var(--t) * .7 - .1)}
:is(.scene,.peek) .sheet{fill:#fff;stroke:#cfc8de;stroke-width:1.5;opacity:clamp(0,(var(--at) - var(--t)) * 16,1);transform:translate(calc(clamp(0,(var(--t) - var(--at) + .07) * 14,1) * 170px),calc(clamp(0,(var(--t) - var(--at) + .07) * 14,1) * -14px)) rotate(var(--tilt))}
:is(.scene,.peek) .sheet-line{stroke:#cfc8de;stroke-width:1.5;opacity:clamp(0,(var(--at) - var(--t)) * 16,1)}
:is(.scene,.peek) .laptop-lid{fill:#2b2440}
:is(.scene,.peek) .laptop-base{fill:#c9c2dc}
:is(.scene,.peek) .screen{fill:#fffefc}
:is(.scene,.peek) .mini rect:first-child{fill:#fff;stroke:#e4dfee;stroke-width:1}
:is(.scene,.peek) .mini{opacity:clamp(0,(var(--t) - var(--at)) * 16,1);transform:translateY(calc((1 - clamp(0,(var(--t) - var(--at)) * 16,1)) * 8px))}
:is(.scene,.peek) .mug{fill:#fff;stroke:#2b2440;stroke-width:2.6}
:is(.scene,.peek) .steam{fill:none;stroke:color-mix(in srgb,#ffffff calc((1 - var(--t)) * 100%),#b9b1cf);stroke-width:2.4;stroke-linecap:round;animation:vapeur 3s ease-in-out infinite}
:is(.scene,.peek) .pot{fill:var(--p3)}
:is(.scene,.peek) .stem{fill:none;stroke:#2b2440;stroke-width:2.8;stroke-linecap:round}
:is(.scene,.peek) .leaf{transform-box:fill-box;transform-origin:50% 100%;transform:scale(clamp(.15,var(--t) * 1.5 - var(--late,0),1))}
:is(.scene,.peek) .leaf.a{fill:var(--p5)}:is(.scene,.peek) .leaf.b{fill:var(--p1);--late:.25}:is(.scene,.peek) .leaf.c{fill:var(--p2);--late:.5}
.when{position:absolute;left:18px;top:16px;display:grid;font-size:13px}
.when span{grid-area:1/1;padding:5px 12px;border-radius:999px;white-space:nowrap}
.when .night{background:#191434;color:#fff;opacity:calc(1 - var(--t) * 2.5)}
.when .day{background:var(--accent);color:var(--onaccent);opacity:calc(var(--t) * 3 - 2)}

/* ═══ Récit 2 · La pile devient des cartes, la pousse devient un trèfle ═══ */
.melt{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(14px,2.4vw,30px);align-items:center;min-height:440px}
.heap{position:relative;height:470px;width:230px;justify-self:center}
.paper{position:absolute;z-index:1;left:0;bottom:calc(var(--k) * 34px);width:100%;padding:9px 14px;border:1px solid #d9d3e6;border-radius:6px;background:#fff;box-shadow:0 3px 8px rgb(58 43 82 / 8%);font-size:13.5px;color:var(--muted);rotate:var(--tilt);opacity:clamp(0,(var(--at) - var(--t)) * 18,1);translate:calc(clamp(0,(var(--t) - var(--at) + .06) * 16,1) * 120px) 0}
.paper::after{content:'';display:block;height:2px;margin-top:6px;border-radius:2px;background:repeating-linear-gradient(90deg,#e3deee 0 38px,transparent 38px 46px)}
.heap-label{position:absolute;left:-20px;right:-20px;bottom:-34px;text-align:center;font-size:13px;color:var(--muted);opacity:calc(1 - var(--t) * 1.4)}
.sprout{position:absolute;z-index:2;left:22px;width:186px;bottom:calc((1 - clamp(0,(var(--t) - .17) * 1.72,1)) * var(--pile,206px) + 10px)}
.sprout svg{display:block;width:100%;height:auto;overflow:visible}
.sprout .stem{fill:none;stroke:var(--text);stroke-width:3;stroke-linecap:round;stroke-dasharray:130;stroke-dashoffset:calc((1 - var(--t)) * 130)}
.sprout .leaf{transform-box:fill-box;transform-origin:50% 100%;transform:scale(clamp(0,(var(--t) - var(--at)) * 9,1))}
.sprout .pot{fill:var(--p3)}
.grown{display:grid;gap:9px}
.grown .tool{padding:11px 16px 11px 26px;opacity:clamp(.0,(var(--t) - var(--at) + .02) * 18,1);translate:calc((1 - clamp(0,(var(--t) - var(--at) + .02) * 18,1)) * -46px) 0}
.grown .tool .med{top:11px}
.grown .tool h3{font-size:16px}
.grown .tool p{margin-top:3px;font-size:13.5px;line-height:1.4}
.r2 .chapters{min-height:300px}

/* ═══ Récit 3 · Une journée avec Oxaleo : de vraies images, dans un ordinateur et un téléphone ═══ */
.device{position:relative}
.laptop{position:relative;margin:0 5% 0 0;padding:2.2% 2.2% 0;border-radius:18px 18px 0 0;background:#2b2440;box-shadow:0 30px 60px rgb(58 43 82 / 18%)}
.laptop::after{content:'';position:absolute;left:-6%;right:-6%;bottom:-3.4%;height:3.4%;border-radius:0 0 14px 14px;background:linear-gradient(#d9d3e6,#bdb5d0)}
.laptop .shots{position:relative;aspect-ratio:1280/800;border-radius:8px 8px 0 0;overflow:hidden;background:#fff}
.shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .5s ease}
.shots img:first-child{opacity:1}
.js .stage .shots img:first-child{opacity:0}
.js .stage[data-step="0"] .laptop img:nth-child(1),.js .stage[data-step="1"] .laptop img:nth-child(2),.js .stage[data-step="2"] .laptop img:nth-child(1),.js .stage[data-step="3"] .laptop img:nth-child(3),.js .stage[data-step="4"] .laptop img:nth-child(4),.js .stage[data-step="5"] .laptop img:nth-child(1),.js .stage .phone .shots img:first-child{opacity:1}
.phone{position:absolute;right:-1%;bottom:-9%;width:23%;padding:1.1%;border-radius:22px;background:#2b2440;box-shadow:0 22px 40px rgb(58 43 82 / 24%);animation:balance 7s ease-in-out infinite}
.phone .shots{aspect-ratio:390/780;border-radius:16px;overflow:hidden;background:#fff;position:relative}
.device .blob{position:absolute;z-index:-1;border-radius:50%}
.device .blob.a{left:-7%;top:-9%;width:38%;aspect-ratio:1;background:var(--p2);animation:goutte 12s ease-in-out infinite}
.device .blob.b{right:-4%;top:18%;width:24%;aspect-ratio:1;background:var(--p5);animation:flotte 8s ease-in-out infinite}
.device .blob.c{left:22%;bottom:-13%;width:17%;aspect-ratio:1;background:var(--p3);animation:flotte 9s ease-in-out -3s infinite}
.device .note{position:absolute;left:-5%;bottom:5%;display:flex;align-items:center;gap:10px;max-width:250px;padding:10px 14px;border:1px solid var(--border);border-left:7px solid var(--p1);border-radius:14px;background:var(--surface);box-shadow:0 12px 26px rgb(58 43 82 / 12%);font-size:13.5px;line-height:1.35;animation:balance 6s ease-in-out -2s infinite}
.sunline{position:relative;height:34px;margin:0 0 20px;max-width:430px}
.sunline::before{content:'';position:absolute;left:0;right:0;top:16px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--text) 26%,var(--bg)) 0 6px,transparent 6px 12px)}
.sunline i{position:absolute;top:2px;left:calc(var(--t) * (100% - 30px));width:30px;height:30px;border-radius:50%;background:var(--p2);box-shadow:0 0 0 6px color-mix(in srgb,var(--p2) 28%,transparent)}
.mood{display:inline-block;width:54px;height:54px;vertical-align:middle}

/* —— Sans défilement animé : tout se lit à la suite —— */
html:not(.js) .stage{display:grid;gap:26px;padding-top:30px;padding-bottom:30px}
html:not(.js) .chapter{margin-bottom:26px}
html:not(.js) .dots,html:not(.js) .hint{display:none}

@media (max-width:860px){
 .js .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px;align-items:start;top:var(--bar,74px);height:calc(100svh - var(--bar,74px));padding-top:10px}
 .js .stage>.scene,.js .stage>.device,.js .stage>.melt{order:-1}
 .scene svg{max-height:34svh;margin:0 auto;width:auto;max-width:100%}
 .chapters{min-height:0;height:100%}
 .js .chapter{align-content:start}
 .chapter h1{font-size:28px}
 .chapter h2{font-size:25px}
 .chapter .lead{margin-top:10px;font-size:15.5px}
 .chapter .num{width:38px;height:38px;margin-bottom:8px;font-size:16px}
 .chapter .cta{margin-top:14px}
 .dots{bottom:10px}
 .hint{display:none}
 .melt{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);min-height:0;gap:8px}
 .heap{height:230px;width:100%;--pile:128px}
 .paper{bottom:calc(var(--k) * 21px);padding:5px 8px;font-size:11px}
 .paper::after{display:none}
 .heap-label{display:none}
 .sprout{width:92px;left:8px}
 .grown{gap:5px}
 .grown .tool{padding:6px 8px 6px 18px}
 .grown .tool p{display:none}
 .grown .tool h3{font-size:13px}
 .grown .tool .med{left:-13px;top:5px;width:22px;height:22px;box-shadow:0 0 0 2px var(--bg)}
 .grown .tool .med svg{width:12px;height:12px}
 .r2 .chapters{min-height:0}
 .device{margin:6px 6% 8% 3%}
 .device .note{display:none}
 .sunline{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
 .js .chapter{transition:none}
}
@keyframes molette{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(8px);opacity:0}}
@keyframes vapeur{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-5px);opacity:.4}}

.pick .back{color:#fff;font-size:13px;margin-left:4px}
/* Proposition D : le modèle de la page actuelle, retravaillé. S'ajoute à propositions-site.css et recits-site.css.
   — l'enseignante sort la tête en haut, puis revient au fil de la descente (de plus en plus souriante) ;
   — la démonstration est une animation dans la page (de vraies images qui se suivent), sans accès à l'application ;
   — les étapes sont sur le fil animé ; les offres sont trois feuilles d'oxalis, aux couleurs d'avant. */
[id]{scroll-margin-top:72px}
.clipit{overflow:clip}

/* —— L'enseignante qui passe la tête —— */
.peek{position:absolute;display:block;width:150px;pointer-events:none}
.peek svg{display:block;width:100%;height:auto;overflow:visible}
.peek .eye{animation:cligne 5.5s ease-in-out infinite}
.peek .head{animation:regarde 7s ease-in-out infinite}
.peek .hand{transform-box:fill-box;transform-origin:50% 100%;animation:salut 1.5s ease-in-out infinite}
.p-hero{left:8%;top:-106px;z-index:-1;animation:sort 1.2s .7s cubic-bezier(.2,.8,.3,1.15) both}
.p-side{right:-44px;top:8px;rotate:-16deg}
.p-up{right:6%;bottom:-134px}
.p-leaf{left:50%;top:-104px;width:146px;margin-left:-73px;z-index:0}
.p-end{position:relative;width:190px;height:150px;margin:30px auto -76px;overflow:hidden}
.js .rv .peek{transition:translate 1s cubic-bezier(.2,.8,.3,1.15) .35s}
.js .rv:not(.in) .p-side{translate:150px 0}
.js .rv:not(.in) .p-up{translate:0 120px}
.js .rv:not(.in) .p-leaf{translate:0 110px}
.js .rv:not(.in) .p-end{translate:0 110px}

/* —— Le haut —— */
.h-d{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4vw,60px);align-items:center;padding-top:clamp(60px,8vw,120px)}
.h-d .device{margin-top:30px}

/* —— La démonstration : une animation, dans la page —— */
.demo3{position:relative}
.reel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:34px}
.reel .device{margin-bottom:6%}
.shots.cycle img,.shots.cycle img:first-child{opacity:0;animation:passe 16s linear infinite}
.shots.cycle img:nth-child(2){animation-delay:4s}.shots.cycle img:nth-child(3){animation-delay:8s}.shots.cycle img:nth-child(4){animation-delay:12s}
.reel-list{display:grid;gap:10px}
.reel-list li{position:relative;padding:12px 16px 12px 22px;border:1px solid var(--border);border-left:7px solid var(--tone);border-radius:14px;background:var(--surface);opacity:.5;animation:eclaire 16s linear infinite;animation-delay:calc(var(--i) * 4s)}
.reel-list li b{display:block;font:500 16.5px/1.25 var(--serif)}
.reel-list li span{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--muted)}
.reel-list li:nth-child(1){--tone:var(--p2)}.reel-list li:nth-child(2){--tone:var(--p5)}.reel-list li:nth-child(3){--tone:var(--p3)}.reel-list li:nth-child(4){--tone:var(--p1)}
.reel-bar{height:4px;margin-top:16px;border-radius:4px;background:color-mix(in srgb,var(--text) 10%,var(--bg));overflow:hidden}
.reel-bar i{display:block;height:100%;width:25%;border-radius:4px;background:var(--primary);animation:avance 16s steps(4,jump-none) infinite}

/* —— Les offres : trois feuilles d'oxalis, aux couleurs d'avant —— */
.oxa [data-offer=decouverte]{--offer:#a8d62c}
.oxa [data-offer=enseignant]{--offer:#f36b21}
.oxa [data-offer=ecole]{--offer:#2258d9}
.trefoil{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;margin-top:96px}
.leaf{position:relative;z-index:1;display:grid;justify-items:center;align-content:center;gap:5px;aspect-ratio:1/1.1;padding:12% 12% 11%;border:2px solid color-mix(in srgb,var(--offer) 58%,var(--surface));background:color-mix(in srgb,var(--offer) 22%,var(--surface));text-align:center;transform-origin:50% 100%;transition:translate .3s ease,box-shadow .3s ease}
.leaf.l1{border-radius:52% 48% 14% 52% / 46% 46% 14% 54%;--turn:-14deg}
.leaf.l2{border-radius:50% 50% 46% 46% / 44% 44% 20% 20%;margin-top:-40px;--turn:0deg}
.leaf.l3{border-radius:48% 52% 52% 14% / 46% 46% 54% 14%;--turn:14deg}
.leaf:hover{translate:0 -6px;box-shadow:0 20px 40px color-mix(in srgb,var(--offer) 30%,transparent)}
.leaf .offer-art{width:58px;height:58px}
.leaf .offer-art [data-fill]{fill:var(--offer)}
.leaf .offer-art [data-soft]{fill:color-mix(in srgb,var(--offer) 44%,var(--surface))}
.leaf .offer-tag{align-self:auto;background:color-mix(in srgb,var(--offer) 40%,var(--surface))}
.leaf h3{font-size:21px}
.leaf .offer-price b{display:block;margin:0;font-size:32px;line-height:1.1}
.leaf ul{display:grid;gap:4px;margin:6px 0 8px;font-size:13.5px;line-height:1.35}
.leaf li::before{content:'';display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--offer)}
.leaf .btn{min-height:40px;padding:8px 14px;border-color:#182435;background:#182435;color:#fff;font-size:13.5px;white-space:nowrap}
.js .rv .leaf{transition:scale .7s cubic-bezier(.2,.9,.3,1.25),rotate .7s ease,opacity .5s ease,translate .3s ease,box-shadow .3s ease;transition-delay:calc(var(--i) * .14s),calc(var(--i) * .14s),calc(var(--i) * .14s),0s,0s}
.js .rv:not(.in) .leaf{scale:.55;rotate:var(--turn);opacity:0}
.leaf-stem{position:absolute;left:50%;bottom:-46px;width:220px;height:70px;margin-left:-110px;z-index:0;fill:none;stroke:color-mix(in srgb,#5b8a1c 70%,var(--text));stroke-width:4;stroke-linecap:round}

@media (max-width:860px){
 .h-d{grid-template-columns:minmax(0,1fr);padding-top:26px}
 .h-d .device{margin:70px 6% 12% 3%}
 .p-hero{width:108px;top:-76px}
 .reel{grid-template-columns:minmax(0,1fr)}
 .reel .device{margin:0 6% 12% 3%}
 .p-side,.p-up{display:none}
 .trefoil{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:86px}
 .leaf{aspect-ratio:auto;padding:54px 30px 44px}
 .leaf.l2{margin-top:0}
 .leaf-stem{display:none}
 .p-leaf{width:120px;margin-left:-60px;top:-86px}
}
@media (prefers-reduced-motion:reduce){
 .shots.cycle img:first-child{opacity:1}
 .reel-list li{opacity:1}
}
@keyframes sort{from{translate:0 110px}to{translate:0 0}}
@keyframes cligne{0%,90%,100%{scale:1 1}94%{scale:1 .12}}
@keyframes regarde{0%,100%{rotate:-3deg}50%{rotate:4deg}}
@keyframes salut{0%,100%{rotate:-10deg}50%{rotate:16deg}}
@keyframes passe{0%{opacity:0}3%,25%{opacity:1}28%,100%{opacity:0}}
@keyframes eclaire{0%,25%{opacity:1;box-shadow:0 10px 22px rgb(58 43 82 / 10%)}28%,100%{opacity:.5;box-shadow:none}}
@keyframes avance{from{margin-left:0}to{margin-left:75%}}

/* Deux autres modèles pour la page d'accueil : (2) l'affiche centrée, avec un grand trèfle d'offres et un fil vertical ;
   (3) le cahier d'école : papier ligné, marge, feuilles perforées, intercalaires sur le côté. */

/* ═══ Modèle 2 · L'affiche ═══ */
.h-poster{overflow:clip;padding-top:clamp(46px,7vw,96px);padding-bottom:0;text-align:center}
.h-poster h1{margin:0 auto;max-width:15ch;font-size:clamp(38px,6vw,78px)}
.h-poster .lead{margin-left:auto;margin-right:auto}
.h-poster .cta{justify-content:center}
.h-poster .p-end{margin-top:34px;margin-bottom:0;width:230px;height:196px}
.h-poster .ring{position:absolute!important;z-index:0!important;left:50%;bottom:-240px;width:560px;height:560px;margin-left:-280px;border-radius:50%;border:3px dashed color-mix(in srgb,var(--p1) 45%,transparent);animation:tourne 60s linear infinite}
.h-poster .blobs{position:absolute!important;z-index:0!important;inset:0;pointer-events:none}
.h-poster .blobs i{position:absolute;border-radius:50%}
.h-poster .blobs i:nth-child(1){left:9%;top:22%;width:74px;height:74px;background:var(--p2);animation:goutte 11s ease-in-out infinite}
.h-poster .blobs i:nth-child(2){right:10%;top:16%;width:54px;height:54px;background:var(--p5);animation:flotte 8s ease-in-out infinite}
.h-poster .blobs i:nth-child(3){right:16%;bottom:24%;width:36px;height:36px;background:var(--p3);animation:flotte 7s ease-in-out -2s infinite}
.h-poster .blobs i:nth-child(4){left:17%;bottom:20%;width:26px;height:26px;background:var(--p1);animation:scintille 3.4s ease-in-out infinite}
.poster-band{max-width:none;background:color-mix(in srgb,var(--soft) 70%,var(--bg))}
.poster-band>*{max-width:var(--page);margin-left:auto;margin-right:auto}
.poster-band .over{color:color-mix(in srgb,var(--primary) 60%,var(--text))}
.center>.over,.center>h2,.center>.lead{text-align:center;margin-left:auto;margin-right:auto}
/* le grand trèfle : une feuille en haut, deux en bas, les pointes vers le cœur */
.trefoil.big{grid-template-columns:repeat(2,minmax(0,350px));justify-content:center;gap:14px 18px;margin-top:110px}
.trefoil.big .leaf{aspect-ratio:1/1.04}
.trefoil.big .l1{grid-column:1 / -1;justify-self:center;width:min(350px,100%);border-radius:50% 50% 46% 46% / 46% 46% 18% 18%;margin:0;--turn:0deg;transform-origin:50% 100%}
.trefoil.big .l2{border-radius:52% 14% 52% 48% / 54% 14% 46% 46%;margin-top:0;--turn:-18deg;transform-origin:100% 0}
.trefoil.big .l3{border-radius:14% 52% 48% 52% / 14% 54% 46% 46%;--turn:18deg;transform-origin:0 0}
.trefoil.big .p-leaf{top:-106px}
/* le fil vertical : les étapes de part et d'autre d'une ligne */
.vfil{position:relative;display:grid;gap:26px;max-width:860px;margin:40px auto 0}
.vfil::before{content:'';position:absolute;left:50%;top:10px;bottom:10px;width:3px;margin-left:-1.5px;border-radius:3px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--primary) 50%,var(--surface)) 0 8px,transparent 8px 16px)}
.vfil .step{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center;padding:0}
.vfil .step::before{display:none}
.vfil .step .num{position:static;grid-column:2;grid-row:1 / span 3;justify-self:center;width:54px;height:54px;font-size:20px;box-shadow:0 0 0 7px var(--bg)}
.vfil .step>:not(.num){grid-column:1;text-align:right}
.vfil .step:nth-child(even)>:not(.num){grid-column:3;text-align:left}
.vfil .step p{margin-top:4px}
.js .rv .vfil .step{transition:opacity .6s ease,translate .6s ease;transition-delay:calc(var(--n) * .16s)}
.js .rv:not(.in) .vfil .step{opacity:0;translate:0 24px}
.vfil .step:nth-child(1){--n:0}.vfil .step:nth-child(2){--n:1}.vfil .step:nth-child(3){--n:2}.vfil .step:nth-child(4){--n:3}

/* ═══ Modèle 3 · Le cahier ═══ */
.cahier{background:repeating-linear-gradient(180deg,transparent 0 35px,color-mix(in srgb,var(--p5) 22%,transparent) 35px 36px),var(--bg)}
.cahier::before{content:'';position:fixed;z-index:0;left:clamp(26px,6vw,92px);top:0;bottom:0;width:2px;background:color-mix(in srgb,var(--p3) 85%,#e0577a)}
.cahier>*{position:relative;z-index:1}
.cahier .top,.cahier .hero,.cahier .blk{padding-left:clamp(48px,9vw,150px);padding-right:clamp(48px,7vw,110px)}
.tabs{position:fixed;z-index:20;right:0;top:50%;display:grid;gap:6px;translate:0 -50%}
.tabs a{display:block;padding:9px 12px 9px 14px;border-radius:12px 0 0 12px;background:var(--tone);color:var(--ink,var(--text));font-size:13px;text-decoration:none;transition:padding .2s ease;box-shadow:-3px 4px 10px rgb(58 43 82 / 10%)}
.tabs a:hover{padding-right:22px}
.tabs a:nth-child(1){--tone:var(--p2)}.tabs a:nth-child(2){--tone:var(--p5)}.tabs a:nth-child(3){--tone:#a8d62c}.tabs a:nth-child(4){--tone:var(--p3)}.tabs a:nth-child(5){--tone:var(--p1);--ink:#fff}
.sheet{position:relative;margin:0 auto;padding:clamp(22px,3.4vw,44px) clamp(20px,3.4vw,44px) clamp(22px,3.4vw,44px) clamp(48px,5vw,76px);border:1px solid var(--border);border-radius:6px 18px 18px 6px;background:var(--surface);box-shadow:0 16px 36px rgb(58 43 82 / 9%)}
.sheet::before{content:'';position:absolute;left:16px;top:0;bottom:0;width:16px;background:radial-gradient(circle at 8px 8px,var(--bg) 0 6px,color-mix(in srgb,var(--text) 22%,var(--bg)) 6px 7px,transparent 7px) 0 26px/16px 64px repeat-y}
.sheet.tilt-a{rotate:-.6deg}.sheet.tilt-b{rotate:.5deg}
.sheet>.over{margin-bottom:8px}
.sheet>h2{font-size:clamp(25px,2.8vw,34px);max-width:24ch}
.sheet>.lead{margin-top:10px;max-width:62ch;font-size:16.5px;color:var(--muted)}
.cahier .blk{padding-top:clamp(26px,4vw,48px);padding-bottom:clamp(26px,4vw,48px)}
.cahier .h-d{padding-top:clamp(34px,5vw,70px)}
.cahier .h-d h1{font-size:clamp(32px,4.2vw,54px)}
.taped{position:relative;padding:12px;border:1px solid var(--border);background:var(--surface);rotate:1.4deg;box-shadow:0 18px 40px rgb(58 43 82 / 14%)}
.taped::before{content:'';position:absolute;left:50%;top:-14px;width:110px;height:28px;margin-left:-55px;background:color-mix(in srgb,var(--p2) 70%,transparent);rotate:-3deg}
.taped .laptop{margin:0;box-shadow:none}
.taped .phone{right:-6%;bottom:-8%}
.cahier .trefoil{margin-top:92px;gap:14px}
.cahier .leaf{aspect-ratio:1/1.16}
.cahier .steps{margin-top:26px}

@media (max-width:860px){
 .trefoil.big{grid-template-columns:minmax(0,1fr);margin-top:92px}
 .trefoil.big .leaf{aspect-ratio:auto}
 .vfil::before{left:27px}
 .vfil .step{grid-template-columns:54px minmax(0,1fr);gap:0 14px}
 .vfil .step .num{grid-column:1}
 .vfil .step>:not(.num),.vfil .step:nth-child(even)>:not(.num){grid-column:2;text-align:left}
 .h-poster .ring{width:340px;height:340px;margin-left:-170px;bottom:-150px}
 .h-poster .blobs{display:none}
 .cahier::before{left:14px}
 .cahier .top,.cahier .hero,.cahier .blk{padding-left:28px;padding-right:14px}
 .tabs{display:none}
 .sheet{padding:20px 14px 20px 34px}
 .sheet::before{left:8px}
 .sheet.tilt-a,.sheet.tilt-b,.taped{rotate:none}
 .cahier .leaf{aspect-ratio:auto}
}

/* Cinq propositions aux styles vraiment différents, sur la base du « modèle actuel retravaillé », sans personnage.
   Chacune a son effet d'entrée, piloté par le défilement (--t de 0 à 1) :
   1 l'écran qui se redresse · 2 le désordre qui se range · 3 le ruban qui défile de côté · 4 de la nuit au jour ·
   5 le tableau de classe (notes collées, traits dessinés, tampon). Les intercalaires de côté sont partout. */
.reel-stop{appearance:none;min-height:36px;margin-top:12px;padding:6px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:400 13px/1.3 var(--sans);cursor:pointer}
.reel.paused .cycle img,.reel.paused .reel-list li,.reel.paused .reel-bar i{animation-play-state:paused}
.js .story .stage .laptop .shots img:first-child,.js .story .stage .phone .shots img:first-child{opacity:1}

/* ═══ 1 · L'écran qui se redresse ═══ */
.js .zoom .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;align-items:start;gap:0;padding-top:clamp(14px,3vh,40px);overflow:clip}
.js .zoom .chapter{position:relative;inset:auto;z-index:2;display:block;max-width:880px;text-align:center;opacity:calc(1 - var(--t) * 2.6);translate:0 calc(var(--t) * -70px);pointer-events:auto}
.zoom .chapter .lead{margin-left:auto;margin-right:auto}
.zoom .chapter .cta{justify-content:center}
.zoom-device{position:relative;width:min(1060px,92%);margin-top:clamp(34px,6vh,64px);transform-origin:50% 0;transform:translateY(calc(var(--t) * -36vh)) perspective(1600px) rotateX(calc((1 - clamp(0,var(--t) * 1.7,1)) * 50deg)) scale(calc(.58 + clamp(0,var(--t) * 1.7,1) * .42))}
.zoom-device .laptop{margin:0}
.spot{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--text);color:#fff;font-size:13.5px;white-space:nowrap;box-shadow:0 10px 24px rgb(0 0 0 / 22%);opacity:clamp(0,(var(--t) - .6 - var(--i) * .07) * 14,1);translate:0 calc((1 - clamp(0,(var(--t) - .6 - var(--i) * .07) * 14,1)) * 16px)}
.spot i{width:10px;height:10px;border-radius:50%;background:var(--p2);box-shadow:0 0 0 5px rgb(252 205 4 / 32%)}
.spot.s1{left:-3%;top:20%}.spot.s2{right:-4%;top:32%}.spot.s3{left:-2%;top:60%}.spot.s4{right:-3%;top:72%}
.s-net .btn{border-radius:999px}
.s-net .blk>h2{font-weight:400;font-size:clamp(28px,3.4vw,44px)}

/* ═══ 2 · Le désordre qui se range ═══ */
.js .mess .stage{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.messy{--o:calc(1 - clamp(0,var(--t) * 1.45,1));--k:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:center;padding:0 54px 0 44px}
.messy .tool{padding:12px 14px 12px 24px;transform:translate(calc(var(--o) * var(--k) * var(--dx)),calc(var(--o) * var(--k) * var(--dy))) rotate(calc(var(--o) * var(--r)));box-shadow:0 calc(var(--o) * 18px) calc(var(--o) * 34px) rgb(58 43 82 / 16%)}
.messy .tool .med{top:12px}
.messy .tool h3{font-size:15.5px}
.messy .tool p{margin-top:3px;font-size:13px;line-height:1.4}
.s-bento .tile{margin-top:22px;margin-bottom:22px;border-radius:30px;background:color-mix(in srgb,var(--tone) 13%,var(--surface))}
.s-bento #demo{--tone:var(--p5)}.s-bento #offres{--tone:var(--p2)}.s-bento #parcours{--tone:var(--p3)}
.s-bento .tile .over{color:color-mix(in srgb,var(--primary) 60%,var(--text))}
.s-bento .fil .step .num{box-shadow:0 0 0 6px color-mix(in srgb,var(--p3) 13%,var(--surface))}

/* ═══ 3 · Le ruban qui défile de côté ═══ */
.js .ruban .stage{display:block;max-width:none;padding:0;overflow:clip}
.ruban-head{max-width:var(--page);margin:0 auto;padding:clamp(16px,3.4vh,40px) clamp(16px,5vw,32px) 0}
.ruban-head h2{font-size:clamp(25px,2.9vw,36px);font-style:italic}
.js .ruban .track{display:flex;width:400%;height:calc(100% - 170px);transition:transform .7s cubic-bezier(.3,.8,.2,1)}
.js .ruban .stage[data-step="1"] .track{transform:translateX(-25%)}
.js .ruban .stage[data-step="2"] .track{transform:translateX(-50%)}
.js .ruban .stage[data-step="3"] .track{transform:translateX(-75%)}
.ruban .panel{flex:0 0 25%;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(20px,4vw,60px);align-items:center;padding:0 max(clamp(16px,5vw,32px),calc((100vw - var(--page)) / 2))}
.ruban .big{display:block;font:300 clamp(72px,9vw,132px)/.9 var(--serif);color:color-mix(in srgb,var(--tone) 72%,var(--surface))}
.ruban .panel .word{display:block;margin-top:8px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ruban .panel h2{font-size:clamp(26px,3.2vw,42px);line-height:1.1}
.ruban .panel .lead{margin-top:10px;font-size:17px;color:var(--muted)}
.ruban .panel .with{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:14.5px}
.ruban .panel .with span{position:relative;padding-left:16px}
.ruban .panel .with span::before{content:'';position:absolute;left:0;top:.46em;width:9px;height:9px;border-radius:50%;background:var(--tone)}
.ruban .panel .laptop{margin:0}
.ruban .panel:nth-child(1){--tone:var(--p1)}.ruban .panel:nth-child(2){--tone:var(--p2)}.ruban .panel:nth-child(3){--tone:var(--p3)}.ruban .panel:nth-child(4){--tone:var(--p5)}
.rail{position:absolute;left:8%;right:8%;bottom:34px;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--primary) 45%,var(--surface)) 0 8px,transparent 8px 16px)}
.rail i{position:absolute;top:-12px;left:calc(var(--t) * (100% - 26px));width:26px;height:26px;border-radius:50% 50% 14% 50%;background:#a8d62c;rotate:45deg}
html:not(.js) .ruban .track{display:grid;gap:34px}
html:not(.js) .ruban .panel{padding-top:10px;padding-bottom:10px}
.s-edito .blk>h2{font-style:italic}

/* ═══ 4 · De la nuit au jour ═══ */
.nuit-top{position:relative;background:#1f1838;color:#fff}
.nuit-top .top .links a:not(.btn){color:#fff}
.nuit-top .ox-logo .ox-ink{background:#fff}
.nuit .stage{--lum:0;--flip:0;color:#fff}
.js .nuit .stage{--lum:clamp(0,(var(--t) - .36) * 7,1);--flip:clamp(0,(var(--lum) - .5) * 40,1);color:color-mix(in srgb,var(--text) calc(var(--flip) * 100%),#ffffff)}
.nuit .stage::before{content:'';position:absolute;z-index:-1;inset:0 -100vw;background:color-mix(in oklch,var(--bg) calc(var(--lum) * 100%),#1f1838)}
.nuit .chapter h1,.nuit .chapter h2{color:inherit}
.nuit .chapter .lead{color:color-mix(in srgb,var(--muted) calc(var(--flip) * 100%),#e4def5)}
.nuit .over,.nuit .chapter h1 em{color:color-mix(in srgb,var(--primary) calc(var(--flip) * 100%),#e6bdf8)}
.nuit .lnk{color:inherit}
.nuit .dots i{background:color-mix(in srgb,currentColor 30%,transparent)}
.nuit .hint{color:inherit}.nuit .hint i{border-color:currentColor}
.device.glow .laptop{box-shadow:0 0 calc((1 - var(--lum)) * 140px) color-mix(in srgb,var(--p1) 75%,transparent),0 30px 60px rgb(0 0 0 / 28%)}
.nuit .stars{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:calc(1 - var(--lum) * 1.6)}
.nuit .stars i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;animation:scintille 3s ease-in-out infinite}
.nuit .stars i:nth-child(1){left:6%;top:16%}.nuit .stars i:nth-child(2){left:38%;top:9%;animation-delay:-1s}.nuit .stars i:nth-child(3){left:52%;top:78%;animation-delay:-2s}.nuit .stars i:nth-child(4){left:92%;top:12%;animation-delay:-.5s}.nuit .stars i:nth-child(5){left:22%;top:84%;animation-delay:-1.6s}.nuit .stars i:nth-child(6){left:70%;top:6%;animation-delay:-2.4s}

/* ═══ 5 · Le tableau de classe ═══ */
.s-tableau .h-d .txt{position:relative}
.doodle{position:absolute;right:-84px;bottom:-22px;width:190px;height:104px;fill:none;stroke:var(--p1);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.doodle path{stroke-dasharray:420;stroke-dashoffset:420;animation:trace 1.4s 1s ease-out forwards}
.doodle path+path{animation-delay:2.1s}
.stickies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sticky{position:relative;padding:30px 20px 22px;background:var(--tone);font:500 17px/1.35 var(--serif);rotate:var(--r);box-shadow:0 14px 26px rgb(58 43 82 / 14%)}
.sticky::before{content:'';position:absolute;left:50%;top:-12px;width:84px;height:24px;margin-left:-42px;background:rgb(255 255 255 / 66%);border:1px solid rgb(58 43 82 / 8%);rotate:-3deg}
.sticky.k1{--tone:#fdf1a8;--r:-2.2deg;--i:0}.sticky.k2{--tone:#c9f5f2;--r:1.5deg;--i:1}.sticky.k3{--tone:#ffd9c7;--r:-1deg;--i:2}
.js .rv .sticky{transition:opacity .5s ease,translate .6s cubic-bezier(.2,.9,.3,1.3),rotate .6s ease;transition-delay:calc(var(--i) * .15s)}
.js .rv:not(.in) .sticky{opacity:0;translate:0 -46px;rotate:0deg}
.stamp{display:inline-block;margin:26px auto 0;padding:9px 22px;border:4px solid #c2410c;border-radius:10px;color:#c2410c;font:600 22px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;rotate:-8deg}
.js .rv .stamp{transition:scale .45s cubic-bezier(.2,.9,.3,1.2) .6s,opacity .3s ease .6s}
.js .rv:not(.in) .stamp{scale:2.6;opacity:0}

@media (max-width:860px){
 .zoom-device{width:96%;transform:translateY(calc(var(--t) * -30vh)) perspective(900px) rotateX(calc((1 - clamp(0,var(--t) * 1.7,1)) * 44deg)) scale(calc(.7 + clamp(0,var(--t) * 1.7,1) * .3))}
 .spot{padding:5px 9px;font-size:11px}
 .spot.s1,.spot.s3{left:0}.spot.s2,.spot.s4{right:0}
 .js .zoom .chapter h1{font-size:27px}
 .js .mess .stage{grid-template-columns:minmax(0,1fr)}
 .js .mess .stage>.messy{order:-1}
 .messy{gap:6px;--k:.3;padding:0 4px}
 .messy .tool{padding:6px 8px 6px 18px;--dx2:0}
 .messy .tool p{display:none}
 .messy .tool h3{font-size:12.5px}
 .messy .tool .med{left:-13px;top:5px;width:22px;height:22px;box-shadow:0 0 0 2px var(--bg)}
 .messy .tool .med svg{width:12px;height:12px}
 .js .ruban .track{height:calc(100% - 150px)}
 .ruban .panel{grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;padding:6px 16px 0}
 .ruban .big{font-size:58px}
 .ruban .panel h2{font-size:24px}
 .ruban .panel .lead{font-size:15px}
 .rail{bottom:16px}
 .stickies{grid-template-columns:minmax(0,1fr);gap:26px}
 .doodle{display:none}
}

/* La fusion : une seule page, un effet par partie. Le haut est en vraie 3D quand le navigateur le permet. */
.scene3d{position:relative;width:100%;aspect-ratio:1/.84}
.scene3d::before{content:'';position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--p1) 60%,transparent),transparent);opacity:calc(1 - var(--lum,0))}
.scene3d canvas{position:absolute;inset:-12% -18% -12% -14%;display:none;width:132%;height:124%}
.scene3d.on canvas{display:block}
.scene3d.on .device{display:none}
.scene3d .device{position:absolute;inset:14% 4% auto 0}
.s-fusion .stickies{padding-top:clamp(46px,7vw,84px)}
.s-fusion .story.mess{margin-top:clamp(10px,3vw,40px)}
@media (max-width:860px){
 .scene3d{aspect-ratio:auto;height:36svh}
 .scene3d canvas{inset:0;width:100%;height:100%}
 .js .nuit .stage>.scene3d{order:-1}
}

/* La fusion avec Oxa et Léo : la scène posée au sol, la lune et le soleil, la petite Oxa qui vole, le calcul de l'offre École. */
.s-oxa .scene3d{aspect-ratio:1/.9}
.s-oxa .scene3d canvas{z-index:1;inset:-10% -16% -8% -16%;width:132%;height:118%}
.s-oxa .scene3d::before{inset:10% 4% 14%}
@media (max-width:860px){
 .s-oxa .scene3d{aspect-ratio:auto;height:42svh}
 .s-oxa .scene3d canvas{inset:0;width:100%;height:100%}
}

/* —— Le ciel du haut de page : une petite lune le soir, au-dessus de la scène ; en descendant elle se couche, et le
      soleil monte à gauche, au-dessus du texte. Le jour prend une couleur de jour : un peu de jaune, comme un reflet. —— */
.s-oxa .stage>.sky{position:absolute;z-index:0;inset:0;pointer-events:none;--set:clamp(0,(var(--t) - .12) * 4.4,1);--rise:clamp(0,(var(--t) - .36) * 4.2,1)}
.s-oxa .stage>.chapters,.s-oxa .stage>.scene3d{z-index:1}
.s-oxa .stage>.chapters{position:relative}
.s-oxa .sky::before{content:'';position:absolute;inset:0 -100vw;background:linear-gradient(180deg,#ffefb5 0,#fff5cf 38%,#fffaea 70%,transparent 97%);opacity:calc(var(--rise) * .9)}
.s-oxa .sky::after{content:'';position:absolute;left:clamp(60px,13%,190px);top:calc(48% - var(--rise) * 33%);width:min(86vmin,760px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgb(255 214 92 / 46%),rgb(255 226 138 / 22%) 45%,transparent);opacity:var(--rise)}
.s-oxa .sky .moon{position:absolute;right:9%;top:calc(11% + var(--set) * 38%);width:clamp(40px,4.6vw,62px);aspect-ratio:1;opacity:calc(1 - var(--set) * 1.15);rotate:calc(-20deg + var(--set) * 46deg);filter:drop-shadow(0 0 14px rgb(255 233 168 / 55%))}
.s-oxa .sky .moon::before{content:'';position:absolute;inset:0;border-radius:50%;background:#ffe9a8;-webkit-mask:radial-gradient(circle at 74% 32%,transparent 54%,#000 56%);mask:radial-gradient(circle at 74% 32%,transparent 54%,#000 56%)}
.s-oxa .sky .sun{position:absolute;z-index:1;left:clamp(60px,13%,190px);top:calc(48% - var(--rise) * 33%);width:clamp(54px,6.2vw,88px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#fff0a6 0 30%,#ffd451 31% 100%);opacity:var(--rise);box-shadow:0 0 0 clamp(7px,.9vw,12px) rgb(255 207 74 / 26%),0 0 0 clamp(16px,2vw,26px) rgb(255 207 74 / 13%)}
.s-oxa .sky .sun::after{content:'';position:absolute;inset:-62%;border-radius:50%;background:repeating-conic-gradient(rgb(255 190 40 / 88%) 0 7deg,transparent 7deg 45deg);-webkit-mask:radial-gradient(circle,transparent 0 57%,#000 58% 68%,transparent 69%);mask:radial-gradient(circle,transparent 0 57%,#000 58% 68%,transparent 69%);rotate:calc(var(--t) * 150deg)}
@media (max-width:860px){
 .s-oxa .sky .moon{right:7%;top:calc(2% + var(--set) * 30%)}
 .s-oxa .sky .sun,.s-oxa .sky::after{left:23%;top:calc(34% - var(--rise) * 27%)}
}

/* —— La petite Oxa qui vole : elle accompagne la lecture, sa feuille tourne comme une hélice —— */
.oxa-fly{position:fixed;z-index:18;left:max(12px,calc(50vw - 590px - 128px));top:0;width:120px;aspect-ratio:1;pointer-events:none;opacity:0;scale:.3;translate:var(--x,0px) var(--y,40vh);rotate:var(--lean,0deg);transition:opacity .45s ease,scale .5s cubic-bezier(.2,.9,.3,1.3),translate .55s ease-out,rotate .4s ease-out}
.oxa-fly.on{opacity:1;scale:1}
.oxa-fly .fly-bob{position:absolute;inset:0;animation:fly-bob 2.6s ease-in-out infinite}
.oxa-fly .fly-body{position:absolute;inset:0;width:100%;height:100%}
.oxa-fly .fly-rotor{position:absolute;left:49%;top:30%;width:74%;aspect-ratio:1;translate:-50% -50%;transform:rotateX(67deg)}
.oxa-fly .fly-rotor img{display:block;width:100%;height:100%;animation:fly-spin var(--spin,.9s) linear infinite}
@keyframes fly-bob{50%{translate:0 -8px}}
@keyframes fly-spin{to{rotate:360deg}}
@media (max-width:1439px){.oxa-fly{left:auto;right:8px;top:auto;bottom:10px;width:88px;translate:none}}
@media (max-width:860px){.oxa-fly{right:4px;bottom:6px;width:68px}}
@media (prefers-reduced-motion:reduce){.oxa-fly .fly-bob,.oxa-fly .fly-rotor img{animation:none}.oxa-fly{transition:opacity .2s ease}}

/* —— Les offres : chaque bouton prend la couleur de sa feuille, en forme de galet —— */
.s-oxa .oxa [data-offer=decouverte]{--deep:#3f7d14}
.s-oxa .oxa [data-offer=enseignant]{--deep:#c2410c}
.s-oxa .oxa [data-offer=ecole],.school-wrap{--deep:#2258d9}
.s-oxa .leaf .btn,.s-oxa .leaf button.school-open{min-height:44px;margin-top:4px;padding:10px 22px;border:0;border-radius:999px;background:var(--deep);color:#fff;font:600 14.5px/1.2 var(--sans);white-space:nowrap;cursor:pointer;box-shadow:0 8px 18px color-mix(in srgb,var(--deep) 28%,transparent);transition:translate .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.s-oxa .leaf .btn:hover,.s-oxa .leaf button.school-open:hover{translate:0 -2px;box-shadow:0 12px 22px color-mix(in srgb,var(--deep) 34%,transparent)}
.leaf button.school-open[hidden]{display:none}
.s-oxa .leaf button.school-open[aria-expanded=true]{background:var(--surface);color:var(--deep);box-shadow:inset 0 0 0 2px var(--deep)}
.leaf button.school-open:focus-visible,.s-oxa .leaf .btn:focus-visible,.school-pick button:focus-visible{outline:3px solid color-mix(in srgb,var(--deep) 60%,#182435);outline-offset:3px}
.leaf.picked{box-shadow:0 0 0 5px color-mix(in srgb,var(--offer) 26%,transparent)}

/* —— Léo regarde les offres : il sort d'entre deux feuilles (derrière elles), en haut à gauche de la feuille du milieu —— */
.oxa-over{--w:clamp(120px,13vw,158px);position:absolute;z-index:0;left:calc((100% - 40px) / 3 + 10px);top:calc(var(--w) * -.1);width:var(--w);height:auto;translate:-50% 0;rotate:-5deg;pointer-events:none}
.js .rv .oxa-over{transition:translate .8s cubic-bezier(.2,.9,.3,1.25) .7s}
.js .rv:not(.in) .oxa-over{translate:-50% 62%}
@media (max-width:860px){.oxa-over{--w:118px;left:auto;right:8%;top:calc(var(--w) * -.68);translate:none;rotate:0deg}.js .rv:not(.in) .oxa-over{translate:0 62%}}

/* —— L'offre École : un petit calcul s'ouvre sous sa feuille —— */
.school-wrap{--offer:#2258d9;position:relative;max-width:540px;margin:26px 0 0 auto}
.school-wrap[hidden]{display:none}
.school-pick{position:relative;padding:20px 24px 18px;border:2px solid color-mix(in srgb,var(--offer) 42%,var(--surface));border-radius:24px;background:color-mix(in srgb,var(--offer) 9%,var(--surface));text-align:left}
.school-pick::before{content:'';position:absolute;top:-12px;right:calc(33% - 10px);width:20px;height:20px;border:solid color-mix(in srgb,var(--offer) 42%,var(--surface));border-width:2px 0 0 2px;background:inherit;rotate:45deg}
.js .school-wrap .school-pick{animation:school-in .45s cubic-bezier(.2,.9,.3,1.15)}
@keyframes school-in{from{opacity:0;translate:0 -14px;scale:.97}}
.school-pick .over{color:color-mix(in srgb,var(--offer) 78%,var(--text))}
.school-pick h3{margin:2px 0 12px;font-size:22px}
.school-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.school-step{display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--offer) 30%,var(--surface))}
.school-step button{width:40px;height:40px;border:0;border-radius:50%;background:var(--deep);color:#fff;font:600 22px/1 var(--sans);cursor:pointer;transition:scale .15s ease}
.school-step button:active{scale:.92}
.school-step button:disabled{background:color-mix(in srgb,var(--deep) 26%,var(--surface));cursor:default}
.school-step b{min-width:2.3ch;font:560 28px/1 var(--serif,'Fraunces',Georgia,serif);text-align:center;font-variant-numeric:tabular-nums}
.school-total{margin:0;font-size:15px;line-height:1.25;color:var(--muted)}
.school-total b{margin-right:6px;font:560 32px/1 var(--serif,'Fraunces',Georgia,serif);color:var(--text);font-variant-numeric:tabular-nums}
.school-total small{display:block;margin-top:3px;font-size:14px;color:color-mix(in srgb,var(--offer) 78%,var(--text))}
.school-hint{margin:10px 0 0;padding:7px 12px;border-radius:12px;background:color-mix(in srgb,#a8d62c 26%,var(--surface));font-size:14px}
.school-hint[hidden]{display:none}
.school-tiers{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.school-tiers button{display:grid;gap:1px;flex:1 1 0;padding:7px 12px;border:2px solid color-mix(in srgb,var(--offer) 34%,var(--surface));border-radius:16px;background:var(--surface);color:var(--text);font:400 13px/1.25 var(--sans);text-align:left;cursor:pointer;transition:background .2s ease,color .2s ease,translate .2s ease}
.school-tiers button b{font-size:16px;font-weight:600}
.school-tiers button:hover{translate:0 -2px}
.school-tiers button[aria-pressed=true]{border-color:var(--offer);background:var(--offer);color:#fff}
.school-pick .fine{margin:12px 0 0;text-align:left;font-size:13px}
@media (max-width:860px){
 .school-wrap{max-width:none;margin:18px 0 0}
 .school-pick{border-radius:22px}
 .school-pick::before{right:calc(50% - 10px)}
}

/* —— Léo aux questions (il sort de derrière la feuille), Oxa et Léo à la fin —— */
.oxa-ask{--w:clamp(114px,15vw,200px);position:absolute;z-index:-1;right:clamp(8px,4vw,56px);top:calc(var(--w) * -.79);width:var(--w);height:auto;pointer-events:none}
.oxa-mark{--w:clamp(114px,15vw,200px);position:absolute;right:calc(clamp(8px,4vw,56px) + var(--w) * .9);top:calc(var(--w) * -.72);display:grid;place-items:center;width:42px;height:42px;border-radius:50% 50% 50% 8px;background:var(--primary);color:#fff;font:600 24px/1 var(--serif,'Fraunces',Georgia,serif);rotate:-8deg}
.js .rv .oxa-ask{transition:translate .7s cubic-bezier(.2,.9,.3,1.2) .25s}
.js .rv:not(.in) .oxa-ask{translate:0 70%}
.js .rv .oxa-mark{transition:scale .4s cubic-bezier(.2,.9,.3,1.4) .8s}
.js .rv:not(.in) .oxa-mark{scale:0}
.s-oxa #questions{margin-top:clamp(110px,14vw,190px);isolation:isolate}
.s-oxa #questions .sheet{rotate:none}
.oxa-cheer{display:block;width:clamp(270px,34vw,440px);height:auto;margin:0 auto -1%}
.js .rv .oxa-cheer{transition:translate .6s cubic-bezier(.2,.9,.3,1.3) .15s,opacity .4s ease .15s}
.js .rv:not(.in) .oxa-cheer{translate:0 30px;opacity:0}
@media (prefers-reduced-motion:reduce){.js .school-wrap .school-pick{animation:none}.js .rv .oxa-ask,.js .rv .oxa-mark,.js .rv .oxa-cheer,.js .rv .oxa-over{transition:none}}

/* —— La fiche des mascottes (mascotte.html) —— */
.oxa-page{max-width:1080px;margin:0 auto;padding:clamp(24px,4vw,56px) 20px 80px}
.oxa-page h1{font-size:clamp(30px,4.2vw,50px);max-width:20ch}
.oxa-page h2{margin-top:clamp(40px,6vw,72px);font-size:clamp(24px,3vw,34px)}
.oxa-page h3.oxa-name{margin-top:26px;font-size:21px}
.oxa-page .lead{max-width:60ch;margin-top:14px}
.oxa-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(16px,4vw,48px);align-items:center}
.oxa-box{position:relative;border-radius:32px;background:color-mix(in srgb,var(--p1) 14%,var(--surface));overflow:hidden;transition:background .4s ease}
.oxa-box[data-fond=blanc]{background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.oxa-box[data-fond=nuit]{background:#1f1838}
.oxa-box canvas{display:block;width:100%;aspect-ratio:1/1;cursor:grab;touch-action:pan-y}
.oxa-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.oxa-pills button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:2px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:600 14.5px/1.2 var(--sans);cursor:pointer}
.oxa-pills button[aria-pressed=true]{border-color:var(--primary);background:var(--primary);color:#fff}
.oxa-pills .oxa-dots{display:inline-flex}
.oxa-pills .oxa-dots i{width:14px;height:14px;margin-left:-4px;border-radius:50%;box-shadow:0 0 0 1.5px #fff}
.oxa-pills .oxa-dots i:first-child{margin-left:0}
.oxa-poses{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:12px}
.oxa-poses figure{margin:0;padding:10px 10px 12px;border:1px solid var(--border);border-radius:20px;background:var(--surface);text-align:center}
.oxa-poses figure.wide{grid-column:span 3}
.oxa-poses img{display:block;width:100%;height:auto}
.oxa-poses figcaption{font-size:14px;color:var(--muted)}
.oxa-poses figcaption b{display:block;color:var(--text);font-size:15.5px}
.oxa-uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:20px}
.oxa-use{position:relative;display:grid;gap:8px;align-content:start;padding:18px;border:1px solid var(--border);border-radius:22px;background:var(--surface)}
.oxa-use>small{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.oxa-use .mock{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--bg)}
.oxa-use .mock img{width:92px;height:92px;object-fit:contain}
.oxa-use .mock p{margin:0;font-size:14.5px;line-height:1.35}
.oxa-use .mock b{display:block;font-size:15.5px}
.oxa-use .bubble{position:relative;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--surface);box-shadow:0 6px 16px rgb(58 43 82 / 10%)}
.oxa-swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.oxa-swatches span{display:grid;gap:4px;justify-items:center;font-size:12.5px;color:var(--muted)}
.oxa-swatches i{display:block;width:56px;height:56px;border-radius:50% 50% 50% 10px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 8%)}
.oxa-note{margin-top:18px;padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--p2) 16%,var(--surface));font-size:15px;max-width:70ch}
@media (max-width:760px){.oxa-top{grid-template-columns:minmax(0,1fr)}}


/* —— La vraie page du site (ajouts à la maquette) —— */
:root{--bar:0px}
.lp [id]{scroll-margin-top:0}
html{scroll-behavior:auto}
.lp .top .links a.lp-login{font-weight:600;white-space:nowrap}
.lp .top .links .btn{white-space:nowrap}
.lp .lp-short{display:none}
.lp .foot{align-items:center;justify-content:space-between;gap:12px 22px}
.lp .foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.lp .foot a{color:inherit;text-decoration:none}
.lp .foot nav a:hover{color:var(--primary);text-decoration:underline}
.lp .foot .brand{display:inline-flex}
.workspace[hidden]{display:none}
html:not(.js) .reel-stop{display:none}
@media (prefers-reduced-motion:reduce){.reel-stop{display:none}}
/* L'aube : entre la nuit et le jour, le fond passe par un rose orangé de lever de soleil (et non par un gris). */
.js .s-oxa .nuit .stage{--flip:clamp(0,(var(--lum) - .24) * 40,1)}
.s-oxa .nuit .stage::before{background:color-mix(in oklch,var(--bg) calc(clamp(0,var(--lum) * 2 - 1,1) * 100%),color-mix(in oklch,#f3b497 calc(clamp(0,var(--lum) * 2,1) * 100%),#1f1838))}
@media (max-width:860px){
 /* Sur téléphone, « Se connecter » reste à l'écran : c'est la porte des personnes qui ont déjà un compte. */
 .lp .top{gap:8px}
 .lp .top .links{gap:10px}
 .lp .top .links a.lp-login{display:inline-flex;align-items:center;min-height:38px;padding:0 6px;font-size:14px}
 .lp .lp-long{display:none}
 .lp .lp-short{display:inline}
 .lp .foot{justify-content:flex-start}
}
/* La page des mascottes : un simple retour en haut. */
.oxa-back{max-width:1080px;margin:0 auto;padding:18px 20px 0;font-size:14.5px}
.oxa-back a{color:var(--primary)}