@font-face{font-family:"Instrument Serif";src:url(media/polices/instrument-serif-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Instrument Serif";font-style:italic;src:url(media/polices/instrument-serif-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Hanken Grotesk";font-weight:100 900;src:url(media/polices/hanken-grotesk.woff2) format("woff2");font-display:swap}

:root,:root[data-p=sauge]{--fond:#F6F3EC;--carte:#ECE7DB;--ligne:#D8D1C1;--accent:#5F6645;--doux:#BCC0A3;--encre:#23261F;--mute:#5E5F54;--voile:246,243,236}
:root[data-p=nuit]{--fond:#191B18;--carte:#23261F;--ligne:#3B3F36;--accent:#CDD1B4;--doux:#4C5240;--encre:#F2EFE6;--mute:#B6B4A8;--voile:25,27,24}
:root[data-p=argile]{--fond:#F8F4EE;--carte:#F0E6DB;--ligne:#E1D3C4;--accent:#8F5039;--doux:#E0C4AF;--encre:#2B211C;--mute:#6A5A50;--voile:248,244,238}
:root[data-p=brume]{--fond:#F4F4F0;--carte:#E6E8E4;--ligne:#D2D6D2;--accent:#4F6470;--doux:#B7C3C6;--encre:#1F272B;--mute:#566066;--voile:244,244,240}
:root{--marge:clamp(16px,5vw,72px);--serif:"Instrument Serif",Georgia,serif;--doux-ease:cubic-bezier(.2,.8,.2,1)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{background:var(--fond);color:var(--encre);font:400 1.0625rem/1.6 "Hanken Grotesk",system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased;transition:background-color .6s,color .6s}
a{color:inherit}
img,video,canvas{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(3rem,13vw,6.6rem)}
h2{font-size:clamp(2.5rem,7.4vw,4.6rem);margin-bottom:.4em}
h3{font-size:clamp(1.6rem,4vw,2.1rem)}
p{max-width:36em}
main{position:relative;z-index:1}
.page{padding-inline:var(--marge)}
.bloc{position:relative;padding-block:clamp(72px,11vw,144px)}
.carte-fond{background:var(--carte);transition:background-color .6s}
.surtitre{display:block;margin-bottom:10px;font-size:.875rem;letter-spacing:.02em;color:var(--mute)}
.intro-texte{font-size:1.1875rem;color:var(--mute);margin-bottom:28px}
.acf{display:inline-block;padding:1px 9px;border:1px solid var(--ligne);border-radius:99px;font-size:.8125rem;color:var(--mute);white-space:nowrap}
.btn{display:inline-block;padding:13px 24px;border:0;border-radius:99px;background:var(--accent);color:var(--fond);font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;transition:background-color .6s,color .6s,transform .3s var(--doux-ease)}
.btn:hover{transform:translateY(-2px)}
.btn.vide{background:none;color:var(--encre);box-shadow:inset 0 0 0 1px var(--ligne)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lien{color:var(--accent);font-weight:600;text-underline-offset:4px}
.sauter{position:fixed;z-index:120;left:12px;top:-60px;padding:10px 14px;background:var(--encre);color:var(--fond);border-radius:8px}
.sauter:focus{top:12px}

/* Fond vivant, discret */
.lueur{position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.22;background:radial-gradient(38% 34% at 22% 26%,var(--doux),transparent 70%),radial-gradient(30% 30% at 82% 70%,var(--doux),transparent 70%)}
.motion .lueur{animation:derive 24s ease-in-out infinite alternate}
@keyframes derive{to{transform:translate(6%,-5%) scale(1.14)}}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#fil{position:absolute;left:0;top:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
#fil path{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.26;transition:stroke .6s}

/* En-tête */
.tete{position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--marge);transition:background-color .4s,box-shadow .4s}
.tete.colle{background:rgba(var(--voile),.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--ligne)}
.marque{display:inline-flex;align-items:center;gap:9px;font:400 1.4375rem/1 var(--serif);text-decoration:none;white-space:nowrap}
.marque svg{width:38px;height:38px;color:var(--accent);fill:currentColor;transition:transform .8s var(--doux-ease)}
.marque:hover svg{transform:rotate(-8deg)}
symbol .b path,symbol .r path,.b path,.r path{fill:none;stroke:currentColor;stroke-linecap:round}.b path{stroke-width:1.5}.r path{stroke-width:1.7}
.tete nav ul{display:none;gap:28px;font-size:.9375rem}
.tete nav a{text-decoration:none;padding-block:6px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--doux-ease)}
.tete nav a:hover,.tete nav a[aria-current]{background-size:100% 1px}
.tete .droite{display:flex;align-items:center;gap:10px}
.ouvert .tete{background:none;box-shadow:none}
.tete .btn{display:none;padding:10px 18px;font-size:.9375rem}
@media(min-width:1000px){.tete .btn{display:inline-block}}
.burger{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;cursor:pointer;box-shadow:inset 0 0 0 1px var(--ligne)}
.burger i,.burger i::after{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .35s var(--doux-ease)}
.burger i::after{content:"";transform:translateY(6px)}
.burger i{transform:translateY(-3px)}
.ouvert .burger i{transform:rotate(45deg)}
.ouvert .burger i::after{transform:rotate(-90deg)}
@media(min-width:1000px){.tete nav ul{display:flex}}

/* Grand menu */
.menu{position:fixed;inset:0;z-index:45;display:grid;align-content:start;gap:24px;padding:84px var(--marge) 28px;background:var(--fond);overflow:auto;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--doux-ease),visibility 0s .6s}
.ouvert .menu{visibility:visible;clip-path:inset(0);transition:clip-path .6s var(--doux-ease)}
.menu .groupe>a{display:block;font:400 clamp(2.1rem,8vw,3.2rem)/1.15 var(--serif);text-decoration:none}
.menu .groupe{border-bottom:1px solid var(--ligne);padding-bottom:12px}
.menu .groupe ul{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:.9375rem;color:var(--mute)}
.menu .groupe ul a{text-decoration:none}
.menu .groupe ul a:hover{color:var(--accent)}
.motion .menu .groupe{opacity:0;transform:translateY(18px)}
.motion.ouvert .menu .groupe{opacity:1;transform:none;transition:opacity .6s calc(.12s + var(--i)*.06s),transform .7s calc(.12s + var(--i)*.06s) var(--doux-ease)}
.menu .apercu{display:none}
@media(min-width:1000px){.menu{grid-template-columns:1.3fr 1fr;column-gap:64px;align-content:center}.menu .liste{display:grid;gap:12px}.menu .apercu{display:block;position:relative;aspect-ratio:4/5;max-height:72svh;justify-self:end;width:100%;max-width:440px;overflow:hidden;border-radius:50vw 50vw 0 0;background:var(--doux)}.menu .apercu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .5s,transform 1s var(--doux-ease)}.menu .apercu img.la{opacity:1;transform:none}}
.menu .liste{display:grid;gap:12px}

/* Rideau entre les pages */
.rideau{position:fixed;inset:0;z-index:100;background:var(--accent);pointer-events:none;clip-path:ellipse(0 0 at 50% 100%)}
.rideau.monte{transition:clip-path .46s var(--doux-ease);clip-path:ellipse(95% 135% at 50% 100%)}
.rideau.part{clip-path:ellipse(95% 135% at 50% 0%)}
.rideau.part.fin{transition:clip-path .55s var(--doux-ease);clip-path:ellipse(0 0 at 50% 0%)}

/* Choix des couleurs */
.couleurs{position:relative;display:flex;align-items:center}
.couleurs>button{all:unset;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ligne)}
.couleurs>button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.couleurs .ouvrir i{width:20px;height:20px;border-radius:50%;background:conic-gradient(#5F6645 0 25%,#191B18 0 50%,#8F5039 0 75%,#4F6470 0);box-shadow:0 0 0 1px #fff6}
.couleurs .choix{display:none;position:absolute;right:0;top:52px;gap:6px;padding:8px;border-radius:99px;background:var(--fond);box-shadow:0 0 0 1px var(--ligne),0 10px 28px #0003}
.couleurs.ouverte .choix{display:flex}
.couleurs .choix button{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002}
.couleurs .choix button:focus-visible{outline:2px solid var(--accent)}
.couleurs .choix button[aria-pressed=true]{box-shadow:0 0 0 2px var(--fond),0 0 0 3.5px var(--encre)}

/* Barre Réserver sur mobile */
.barre{position:fixed;z-index:40;right:12px;bottom:12px;transition:transform .4s var(--doux-ease),opacity .4s}
.pied{padding-bottom:110px}
.barre .btn{box-shadow:0 8px 26px #0003;padding:12px 22px}
.barre.cachee{transform:translateY(90px);opacity:0}
@media(min-width:1000px){.barre{display:none}}

/* Scènes épinglées */
.scene{position:relative}
.stage{position:relative;overflow:hidden}
.motion .scene{height:var(--h,300svh)}
.motion .stage{position:sticky;top:0;height:100svh}

/* Ouverture */
.ouv .stage{min-height:100svh}
.ouv .intro{position:relative;z-index:4;padding:96px var(--marge) 24px}
.motion .ouv .intro{position:absolute;left:0;right:0;top:0;opacity:calc(1 - var(--p,0)*3.2);transform:translateY(calc(var(--p,0)*-40px))}
.ouv h1{font-size:min(13vw,8.2svh);line-height:1.02}
.ouv h1 span{display:block;overflow:hidden;padding-bottom:.08em}
.ouv h1 span i{display:block;font-style:normal}
.ouv h1 span:nth-child(2) i{font-style:italic;color:var(--accent)}
.motion .ouv h1 span i{animation:monte 1.1s var(--doux-ease) backwards}
.motion .ouv h1 span:nth-child(2) i{animation-delay:.12s}
@keyframes monte{from{transform:translateY(110%)}}
.ouv .intro p{margin-top:10px;max-width:27em;color:var(--mute)}
.ouv .arche{display:none}
.motion .ouv .arche{--q:clamp(0,calc((var(--p,0) - .12)/.62),1);display:block;position:absolute;inset:0;z-index:2;background:var(--doux);clip-path:inset(calc((1 - var(--q))*58svh) calc((1 - var(--q))*16vw) 0 calc((1 - var(--q))*16vw) round calc((1 - var(--q))*50vw) calc((1 - var(--q))*50vw) 0 0);transition:background-color .6s}
.ouv .arche video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:47% 40%;opacity:clamp(0,calc((var(--p,0) - .1)*5),1)}
.ouv .jade{position:relative;display:block;margin:auto;width:auto;max-width:none;height:56svh}
.motion .ouv .jade{position:absolute;z-index:3;left:50%;bottom:0;height:50svh;margin:0;transform:translate(calc(-50% + var(--tx,0px)),calc(var(--p,0)*190svh));animation:apparait 1.2s .25s ease-out backwards}
@keyframes apparait{from{opacity:0;translate:0 24px}}
.ouv .fin{display:none}
.motion .ouv .fin{display:block;position:absolute;z-index:5;left:var(--marge);right:var(--marge);bottom:13svh;max-width:none;font:400 min(13vw,12svh)/1.02 var(--serif);color:#fff;text-shadow:0 2px 34px #0007;opacity:clamp(0,calc((var(--p,0) - .74)*6),1)}
.ouv .fin em{display:block}
.motion .ouv .arche::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#000b);opacity:clamp(0,calc((var(--p,0) - .6)*5),1)}
.indice{display:none}
.motion .indice{display:block;position:absolute;z-index:5;left:50%;bottom:16px;width:1px;height:44px;background:var(--ligne);opacity:calc(1 - var(--p,0)*8);overflow:hidden}
.motion .indice::after{content:"";position:absolute;inset:0;background:var(--accent);animation:coule 2.2s var(--doux-ease) infinite}
@keyframes coule{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@media(min-width:900px){
.motion .ouv .intro{right:auto;width:54vw;top:24svh}
.ouv .intro{padding-top:24svh;max-width:54vw}
.ouv h1{font-size:min(6vw,11svh)}
.motion .ouv .arche{clip-path:inset(calc((1 - var(--q))*20svh) calc((1 - var(--q))*7vw) 0 calc((1 - var(--q))*57vw) round calc((1 - var(--q))*20vw) calc((1 - var(--q))*20vw) 0 0)}
.motion .ouv .jade{left:71vw;height:88svh}
}

/* Bandeau de ses mots */
.file{overflow:hidden;padding-block:20px;border-block:1px solid var(--ligne);white-space:nowrap}
.file div{display:inline-block;font:italic 400 clamp(1.5rem,4vw,2.25rem)/1.2 var(--serif);color:var(--mute);will-change:transform}
.file span{padding-inline:26px}

/* Liste de cours */
.cours-liste{border-top:1px solid var(--ligne)}
.cours-liste li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--ligne);transition:padding .35s var(--doux-ease)}
.cours-liste li:hover{padding-inline:10px}
.cours-liste b{font:400 1.625rem/1.1 var(--serif)}
.cours-liste span{grid-row:2;font-size:.9375rem;color:var(--mute)}
.cours-liste a{grid-row:1/3;grid-column:2;color:var(--accent);font-weight:600;text-underline-offset:4px}

/* La danse au défilement */
.danse .stage{display:grid;align-content:end;min-height:80svh;background:var(--encre)}
.danse canvas{position:absolute;inset:0 0 auto;width:100%;height:100%}
.danse .repli{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.danse .illus{right:var(--marge);bottom:auto;top:84px}
.motion .ouv .illus{z-index:6;right:var(--marge);bottom:auto;top:84px;opacity:clamp(0,calc((var(--p,0) - .15)*5),1)}
.ouv .illus{display:none}
.motion .ouv .illus{display:block}
.motion .danse .repli{display:none}
.danse .voile{position:absolute;inset:0;background:linear-gradient(transparent 42%,#0009)}
.danse .mots{position:relative;display:grid;padding:0 var(--marge) 14svh;min-height:34svh;align-items:end}
.danse .mots p{grid-area:1/1;max-width:none;font:400 clamp(2.5rem,10vw,6.6rem)/1.03 var(--serif);color:#fff;text-shadow:0 2px 34px #0006}
.danse .mots p em{display:block}
.motion .danse .mots p{opacity:0;transform:translateY(30px);transition:opacity .6s,transform .8s var(--doux-ease)}
.motion .danse .mots p.la{opacity:1;transform:none}
.danse .mots p:not(:first-child){display:none}
.motion .danse .mots p:not(:first-child){display:block}
@media(max-width:759px){.motion .danse canvas{height:74%}.motion .danse .voile{display:none}.motion .danse .stage{background:var(--encre)}.motion .danse .mots{padding-bottom:11svh;min-height:26svh}.motion .danse .mots p{text-shadow:none;color:var(--fond);font-size:clamp(2.1rem,9vw,3rem)}.motion .danse .barre-temps{bottom:4svh!important}}
.motion .danse .barre-temps{position:absolute;left:var(--marge);right:var(--marge);bottom:8svh;height:1px;background:#fff5}
.motion .danse .barre-temps i{display:block;height:100%;background:#fff;transform-origin:0 0;transform:scaleX(var(--p,0))}

/* Le poids ne raconte pas toute l'histoire */
.mesures{display:grid;gap:28px}
.mesures ol{counter-reset:m;border-top:1px solid var(--ligne)}
.mesures li{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--ligne);font:400 clamp(1.7rem,4.8vw,2.7rem)/1.12 var(--serif);counter-increment:m;color:var(--mute);transition:color .5s,padding .5s var(--doux-ease)}
.mesures li::before{content:counter(m);font:400 .875rem "Hanken Grotesk",sans-serif;color:var(--mute);min-width:1.4em}
.mesures li.la,html:not(.motion) .mesures li{color:var(--encre)}
.mesures li.la{padding-left:10px}
@media(min-width:900px){.mesures{grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}.mesures .col{position:sticky;top:18svh}}

/* Cartes de cours */
.cartes{display:grid;gap:28px}
.carte-cours{position:relative;text-decoration:none;display:block}
.carte-cours .img{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:50vw 50vw 0 0;background:var(--doux)}
.carte-cours img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--doux-ease)}
.carte-cours:hover img{transform:scale(1.05)}
.motion .carte-cours .img{clip-path:inset(100% 0 0 0 round 50vw 50vw 0 0);transition:clip-path 1.2s var(--doux-ease)}
.motion .carte-cours.vu .img{clip-path:inset(0 0 0 0 round 50vw 50vw 0 0)}
.carte-cours small,.fiche .img small,.illus{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.58);color:#fff;font-size:.75rem}
.carte-cours h3{margin-top:14px}
.carte-cours p{color:var(--mute);font-size:1rem}
@media(min-width:640px){.cartes{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cartes{grid-template-columns:repeat(4,1fr);gap:24px}.cartes .carte-cours:nth-child(even){margin-top:72px}}

/* Ici, on ne te demandera pas */
.sans-liste li{position:relative;display:block;padding:12px 0;font:400 clamp(2rem,6.6vw,4rem)/1.1 var(--serif)}
.motion .sans-liste li span{background:linear-gradient(var(--accent),var(--accent)) 0 58%/0 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1s calc(.5s + var(--i)*.34s) var(--doux-ease)}
.motion .sans-liste.vu li span{background-size:100% 2px}
.sans-liste{margin-bottom:22px}

/* La porte de garage se lève sur le vrai local */
.porte .stage{background:var(--encre);color:#fff;min-height:70svh}
.porte img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.porte .voile{position:absolute;inset:0;background:linear-gradient(90deg,#000a,#0005 60%,#0001)}
.porte .texte{position:relative;z-index:2;padding:22svh var(--marge) 10svh;max-width:760px}
.porte .texte h2{color:#fff}
.porte .texte p{color:#fff}
.motion .porte .texte{opacity:clamp(0,calc((var(--p,0) - .5)*4),1)}
.lames{display:none}
.motion .lames{--o:clamp(0,calc(var(--p,0)/.72),1);display:grid;grid-template-rows:repeat(9,1fr);position:absolute;inset:0;z-index:3;transform:translateY(calc(var(--o)*-101%))}
.lames i{background:linear-gradient(var(--carte),var(--ligne));border-bottom:1px solid var(--mute);transition:background-color .6s}
.lames b{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;padding:0 var(--marge);text-align:center;font:400 clamp(2.2rem,7vw,4.6rem)/1.05 var(--serif);color:var(--encre)}
.lames b svg{width:clamp(150px,30svh,260px);height:clamp(150px,30svh,260px);color:var(--accent);fill:currentColor}

/* Enfants : le cercle s'ouvre */
.enfants-scene .stage{background:var(--carte);transition:background-color .6s}
.enfants-scene img{width:100%;height:auto;object-fit:cover}
.enfants-scene .texte{padding:32px var(--marge) 56px}
.enfants-scene .texte a{color:inherit}
.motion .enfants-scene img{position:absolute;inset:0;height:100%;object-position:48% 40%;clip-path:circle(calc(16% + var(--p,0)*110%) at 50% 58%)}
.motion .enfants-scene .ombre{position:absolute;inset:0;background:linear-gradient(transparent 44%,#000b);opacity:clamp(0,calc((var(--p,0) - .42)*4),1)}
.motion .enfants-scene .avant{position:absolute;z-index:2;left:var(--marge);right:var(--marge);top:88px;text-align:center;opacity:calc(1 - var(--p,0)*7)}
.motion .enfants-scene .avant h2{margin:0}
.motion .enfants-scene .texte{position:absolute;z-index:2;left:0;right:0;bottom:0;color:#fff;padding-bottom:9svh;opacity:clamp(0,calc((var(--p,0) - .55)*5),1)}
.motion .enfants-scene .texte .citation{color:#fff}
.enfants-scene .avant{padding:0 var(--marge)}
.enfants-scene .illus{z-index:3;opacity:clamp(0,calc((var(--p,0) - .4)*5),1)}
html:not(.motion) .enfants-scene .illus{position:static;display:inline-block;margin:8px var(--marge) 0;opacity:1}

/* Vague de lettres */
.vague{text-align:center;padding-block:clamp(56px,10vw,120px);overflow:hidden}
.vague p{max-width:none;font:italic 400 clamp(3.4rem,16vw,12rem)/1 var(--serif);color:var(--accent);white-space:nowrap}
.vague span{display:inline-block;will-change:transform}
.vague small{display:block;margin-top:16px;color:var(--mute);font-size:1rem}

/* Deux colonnes */
.deux{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.deux{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}.deux.etroit{grid-template-columns:minmax(0,460px) 1fr}}
.photo{position:relative}
.photo.ouvre img{transition:clip-path 1.5s var(--doux-ease)}
.motion .photo.ouvre:not(.vu) img{clip-path:circle(18% at 52% 42%)}
.motion .photo.ouvre.vu img{clip-path:circle(100% at 52% 42%)}
.motion .photo.ouvre[data-vu]{opacity:1;transform:none}
.photo img{width:100%;border-radius:18px}
.photo.arche-img img{border-radius:50vw 50vw 0 0}
.photo figcaption{margin-top:8px;font-size:.8125rem;color:var(--mute)}
.citation{quotes:"« " " »";display:block;margin-bottom:16px;font:italic 400 clamp(1.6rem,3.6vw,2.2rem)/1.2 var(--serif);color:var(--accent);max-width:24em}
.signature{font-size:.9375rem;color:var(--mute)}

/* Jade et Josiane */
.duo{display:grid;gap:32px}
.portrait{position:relative;aspect-ratio:4/5;max-width:440px;clip-path:inset(-20% -10% 0 -10%)}
.portrait .fond{position:absolute;inset:14% 0 0;border-radius:50vw 50vw 0 0;background:var(--doux);transition:background-color .6s}
.portrait img{position:absolute;left:50%;bottom:0;width:auto;max-width:none;height:100%;transform:translateX(-50%) translateY(calc(var(--py,0)*1px))}
.mot-josiane{display:grid;align-content:center;align-self:center;gap:10px;padding:28px;border-radius:18px;background:var(--carte);transition:background-color .6s}
.mot-josiane q{quotes:"«\00a0" "\00a0»";font:italic 400 clamp(1.7rem,3.6vw,2.4rem)/1.18 var(--serif);color:var(--accent)}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr;gap:56px}}
.duo h3{margin-top:16px}
.duo p{color:var(--mute)}

/* Trois étapes */
.etapes{display:grid;gap:0;counter-reset:e;border-top:1px solid var(--ligne)}
.etapes li{counter-increment:e;display:grid;grid-template-columns:auto 1fr;gap:4px 20px;padding:22px 0;border-bottom:1px solid var(--ligne)}
.etapes li::before{content:counter(e);grid-row:1/3;font:400 3.2rem/1 var(--serif);color:var(--accent)}
.etapes h3{align-self:end}
.etapes p{color:var(--mute)}

/* FAQ */
.faq{border-top:1px solid var(--ligne)}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;font:400 1.5rem/1.2 var(--serif);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);transition:transform .35s var(--doux-ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:18px;color:var(--mute)}

/* Histoire à l'horizontale */
.hori .stage{display:block;padding-block:96px 48px}
.motion .hori .stage{display:flex;flex-direction:column;justify-content:center;padding-block:84px 24px}
.hori h2{padding-inline:var(--marge)}
.hori .piste{display:grid;gap:16px;padding-inline:var(--marge)}
.motion .hori .piste{display:flex;width:max-content;gap:20px;transform:translateX(calc(var(--p,0)*var(--dx,0px)*-1));will-change:transform}
.hori article{background:var(--carte);border-radius:50vw 50vw 18px 18px;padding:clamp(56px,9svh,84px) 26px 26px;text-align:center;transition:background-color .6s}
.hori article svg{width:72px;height:72px;margin:0 auto 12px;display:block;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.motion .hori article{width:min(76vw,340px);min-height:min(56svh,440px)}
.motion .hori article:nth-child(even){transform:translateY(22px)}
.hori article b{display:block;margin-bottom:8px;font:400 1.0625rem "Hanken Grotesk",sans-serif;color:var(--accent)}
.hori article h3{margin-bottom:8px}
.hori article p{color:var(--mute);font-size:1rem}

/* Quiz */
.quiz{background:var(--carte);border-radius:18px;padding:clamp(20px,4vw,40px);transition:background-color .6s}
.quiz h3{margin-bottom:14px}
.quiz .choix-q{display:grid;gap:10px}
.quiz button{all:unset;cursor:pointer;padding:14px 18px;border-radius:12px;background:var(--fond);box-shadow:inset 0 0 0 1px var(--ligne);transition:transform .3s var(--doux-ease),background-color .6s}
.quiz button:hover{transform:translateX(6px)}
.quiz button:focus-visible{outline:2px solid var(--accent)}
.quiz .pas{font-size:.875rem;color:var(--mute);margin-bottom:6px}
@media(min-width:640px){.quiz .choix-q{grid-template-columns:1fr 1fr}}

/* Détail d'un cours */
.fiche{display:grid;gap:18px;padding-block:32px;border-top:1px solid var(--ligne)}
.fiche .img{position:relative;overflow:hidden;aspect-ratio:3/2;border-radius:18px;background:var(--doux)}
.fiche img{width:100%;height:100%;object-fit:cover}
.fiche p{color:var(--mute);margin-bottom:10px}
.fiche .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px;font-size:.9375rem}
@media(min-width:900px){.fiche{grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}.fiche:nth-of-type(even) .img{order:2}}

/* Tarifs, pratique */
.grille{display:grid;gap:16px}
.grille>div{background:var(--carte);border-radius:18px;padding:22px;transition:background-color .6s}
.carte-fond .grille>div{background:var(--fond)}
.grille h3{margin-bottom:8px}
.grille p{color:var(--mute)}
@media(min-width:760px){.grille{grid-template-columns:repeat(3,1fr)}}

/* En-tête de page intérieure */
.haut{padding:clamp(120px,18vw,190px) var(--marge) clamp(36px,6vw,64px)}
.haut h1{max-width:13em}
.haut p{margin-top:16px;font-size:1.1875rem;color:var(--mute)}

/* Révélations */
.motion [data-mots] .m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.motion [data-mots] .m i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform .9s var(--doux-ease);transition-delay:calc(var(--i)*38ms)}
.motion [data-mots].vu .m i{transform:none}
.motion [data-vu]{opacity:0;transform:translateY(24px);transition:opacity .9s,transform 1s var(--doux-ease)}
.motion [data-vu].vu{opacity:1;transform:none}

/* Réservation */
.avis{display:flex;gap:10px;margin-bottom:24px;padding:14px 16px;border-radius:12px;background:var(--carte);font-size:.9375rem;transition:background-color .6s}
.avis b{font-weight:700}
.suivi{display:flex;gap:6px;margin-bottom:26px;font-size:.875rem;color:var(--mute)}
.suivi li{flex:1;padding-top:8px;border-top:2px solid var(--ligne);transition:border-color .4s,color .4s}
.suivi li.fait{border-color:var(--accent);color:var(--encre)}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filtres button,.jours button{all:unset;cursor:pointer}
.filtres button{padding:8px 14px;border-radius:99px;font-size:.9375rem;box-shadow:inset 0 0 0 1px var(--ligne)}
.filtres button[aria-pressed=true]{background:var(--accent);color:var(--fond);box-shadow:none}
.filtres button:focus-visible,.jours button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jours{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:12px;scrollbar-width:thin}
.jours button{flex:0 0 58px;display:grid;justify-items:center;gap:1px;padding:8px 0;border-radius:12px;font-size:.8125rem;color:var(--mute);box-shadow:inset 0 0 0 1px var(--ligne)}
.jours button b{font:400 1.5rem/1.1 var(--serif);color:var(--encre)}
.jours button.sans{opacity:.42}
.jours button[aria-pressed=true]{background:var(--accent);color:var(--fond);box-shadow:none}
.jours button[aria-pressed=true] b{color:var(--fond)}
.seances{border-top:1px solid var(--ligne)}
.seances li{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--ligne)}
.seances b{font:400 1.5rem/1.15 var(--serif)}
.seances span{grid-row:2;font-size:.9375rem;color:var(--mute)}
.seances .btn{grid-row:1/3;grid-column:2;padding:9px 16px;font-size:.9375rem}
.vide-msg{padding:22px 0;color:var(--mute)}
form.resa{display:grid;gap:16px;max-width:520px}
form.resa label{display:grid;gap:5px;font-size:.9375rem;font-weight:600}
form.resa input[type=text],form.resa input[type=email],form.resa input[type=tel],form.resa textarea{width:100%;padding:12px 14px;border:1px solid var(--ligne);border-radius:10px;background:var(--fond);font-weight:400;font-size:1rem}
form.resa .case{display:flex;gap:10px;align-items:center;font-weight:400}
form.resa .case input{width:20px;height:20px;accent-color:var(--accent)}
form.resa [hidden]{display:none}
form.resa .erreur{color:#B3261E;font-weight:500;font-size:.875rem}
:root[data-p=nuit] form.resa .erreur{color:#F2B8B5}
.resume{padding:16px 18px;border-radius:12px;background:var(--carte);margin-bottom:18px;transition:background-color .6s}
.resume b{display:block;font:400 1.5rem/1.15 var(--serif)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.mes{margin-top:44px}
.mes li{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ligne)}
.mes button{all:unset;cursor:pointer;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:4px;font-size:.9375rem}
.mes button:focus-visible{outline:2px solid var(--accent)}

/* Pied */
.pied{position:relative;z-index:1;padding:clamp(56px,9vw,104px) var(--marge) 96px;background:var(--carte);transition:background-color .6s}
.pied .logo{width:clamp(148px,20vw,190px);height:clamp(148px,20vw,190px);margin-bottom:22px;color:var(--accent);fill:currentColor}
.pied h2{max-width:11em}
.pied .cols{display:grid;gap:26px;margin-top:40px}
.pied h3{font:600 .9375rem "Hanken Grotesk",sans-serif;letter-spacing:0;margin-bottom:6px}
.pied a{text-underline-offset:3px}
.pied .cols p,.pied .cols li{font-size:.9375rem;color:var(--mute)}
.pied .note{margin-top:36px;font-size:.8125rem;color:var(--mute);max-width:60em}
@media(min-width:760px){.pied .cols{grid-template-columns:repeat(4,1fr)}}

.avis.alerte{background:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.pause-btn{all:unset;cursor:pointer;color:var(--encre);text-decoration:underline;text-underline-offset:3px;font-size:.9375rem}
.pause-btn:focus-visible{outline:2px solid var(--accent)}
.arrete .lueur,.arrete .indice::after{animation:none}