/* ORÉE — design system. Lumière, ivoire, jaune soleil, laiton. */
[hidden]{display:none!important}   /* sinon .cookies (grid) et .loading (flex) restent affichés */
@font-face{font-family:"Jost";src:url(../assets/fonts/jost-latin.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../assets/fonts/instrument-serif-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../assets/fonts/instrument-serif-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#FFFCF5; --ivory:#FBF4E4; --sand:#F3E6C8; --sun:#F4B43A; --sun-2:#FFD36B;
  --gold:#B8892B; --gold-ink:#7E5A12; --ink:#1E1A13; --ink-2:#3F382C; --mute:#655A49;
  --line:rgba(30,26,19,.13); --glass:rgba(255,252,245,.68); --glass-edge:rgba(255,255,255,.85);
  --salmon:#CF6A68; --petrol:#1E6E8A;
  --f-display:"Instrument Serif","Cormorant Garamond",Georgia,serif;
  --f-sans:"Jost","Futura","Century Gothic","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px); --r:20px; --ease:cubic-bezier(.2,.7,.1,1);
  --shadow:0 30px 80px -30px rgba(126,90,18,.35),0 8px 24px -12px rgba(30,26,19,.18);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--f-sans);overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.02;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1 em,h2 em,h3 em{font-style:italic;color:var(--gold-ink)}
p{margin:0}
:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:var(--paper);padding:.8rem 1.1rem;border-radius:12px;text-decoration:none}
.skip:focus{top:12px}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.45s var(--ease) both vt-out}
::view-transition-new(root){animation:.55s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0;filter:blur(6px) brightness(1.2)}}
@keyframes vt-in{from{opacity:0;filter:brightness(1.6)}}

/* Kicker + tri-barre (signature reprise du logo) */
.kicker{display:flex;align-items:center;gap:.75rem;font:500 .78rem/1.2 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.kicker .no{font-variant-numeric:tabular-nums}
.tri{display:inline-flex;gap:5px}
.tri i{display:block;width:16px;height:3px;border-radius:2px;background:var(--sun)}
.tri i:nth-child(2){background:var(--salmon)}
.tri i:nth-child(3){background:var(--petrol)}

/* Boutons */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--h);padding:0 1.5rem;border-radius:999px;border:1px solid transparent;font:500 1rem/1 var(--f-sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.btn--sun{background:linear-gradient(180deg,#FFD978,var(--sun));color:var(--ink);box-shadow:0 0 0 0 rgba(244,180,58,.0),0 12px 30px -10px rgba(184,137,43,.65);position:relative;isolation:isolate}
.btn--sun::after{content:"";position:absolute;inset:-6px;border-radius:inherit;background:radial-gradient(closest-side,rgba(255,211,107,.75),transparent);z-index:-1;opacity:.55;animation:halo 3.2s ease-in-out infinite}
@keyframes halo{50%{opacity:1;transform:scale(1.08)}}
.btn--sun:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(184,137,43,.75)}
.btn--line{background:rgba(255,252,245,.55);border-color:rgba(30,26,19,.22);color:var(--ink);backdrop-filter:blur(10px)}
.btn--line:hover{background:#fff;transform:translateY(-2px)}
.btn svg{width:18px;height:18px}

/* En-tête + onglets */
.bar{position:fixed;inset:0 0 auto;z-index:50;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 14px;display:flex;align-items:center;gap:1.25rem;transition:background .4s,box-shadow .4s,padding .4s}
.bar.is-solid{background:rgba(255,252,245,.78);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 1px 0 var(--line);padding-block:10px}
.bar .logo{flex:none;display:flex;align-items:center;min-height:44px}
.bar .logo img{width:132px;height:auto}
.tabs{display:flex;gap:.2rem;margin-inline:auto;padding:.3rem;border-radius:999px;background:rgba(255,252,245,.5);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(14px)}
.tabs a{display:inline-flex;align-items:center;min-height:40px;padding:0 .95rem;border-radius:999px;font-size:.92rem;text-decoration:none;color:var(--ink-2);transition:background .3s,color .3s}
.tabs a:hover{background:rgba(255,255,255,.8)}
.tabs a[aria-current="true"],.tabs a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.bar .btn{--h:46px;flex:none}
.menu-btn{display:none;flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,252,245,.7);cursor:pointer;place-items:center}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--ink);box-shadow:0 6px 0 var(--ink),0 -6px 0 var(--ink)}
@media (max-width:1080px){
  .tabs{display:none}
  .menu-btn{display:grid;margin-left:auto}
  .bar .btn{display:none}
  .bar.is-open .tabs{display:flex;position:fixed;inset:76px 16px auto;flex-direction:column;gap:.25rem;padding:.8rem;border-radius:22px;background:rgba(255,252,245,.97);box-shadow:var(--shadow)}
  .bar.is-open .tabs a{min-height:52px;font-size:1.1rem;padding:0 1.1rem}
}

/* Scène fixe */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s var(--ease)}
.scene.is-live canvas{opacity:1}
.scene .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.scene::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 18% 40%,rgba(255,252,245,.72),rgba(255,252,245,0) 55%);pointer-events:none}
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 55%,#fff 0,#FFF6DC 45%,#FFE6A6 100%);opacity:0}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

/* Boussole d'architecte */
.compass{position:fixed;left:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:1;display:flex;align-items:center;gap:.9rem;pointer-events:none;color:var(--ink-2)}
.compass{opacity:0;transition:opacity .6s}.compass.is-on{opacity:1}
.compass svg{width:58px;height:58px}
.compass .needle{transform-origin:50% 50%;transition:transform .2s linear}
.compass b{display:block;font:500 .72rem/1.2 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.compass span{font-size:.9rem}
.compass .scale{display:flex;align-items:end;gap:0;margin-top:.35rem;font-size:.68rem;font-variant-numeric:tabular-nums}
.compass .scale i{display:block;width:22px;height:5px;border:1px solid currentColor;border-top:0}
.compass .scale i:nth-child(2n){background:currentColor}

main{position:relative;z-index:1}

/* Plateaux (façades) */
.stage{position:relative;display:grid;min-height:170vh;padding-inline:var(--gutter);align-items:start}
.stage--right .panel{justify-self:end}
.panel{position:sticky;top:max(104px,17vh);width:min(31rem,100%);padding:clamp(1.4rem,2.6vw,2.3rem);border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(20px) saturate(1.35);-webkit-backdrop-filter:blur(20px) saturate(1.35);box-shadow:var(--shadow);display:grid;gap:1.05rem;overflow:hidden;isolation:isolate}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,0) 38%),radial-gradient(90% 60% at 100% 0,rgba(255,211,107,.22),transparent 60%);pointer-events:none}
.panel h2{font-size:clamp(2.1rem,3.6vw,3.2rem)}
.panel p{color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0;list-style:none}
.chips li{padding:.35rem .8rem;border-radius:999px;border:1px solid rgba(184,137,43,.35);background:rgba(255,255,255,.6);font-size:.88rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.duo figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.duo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.duo figure:hover img{transform:scale(1.05)}
.textlink{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--gold);width:max-content}
.textlink:hover{color:var(--gold-ink)}

/* Accueil */
.hero{min-height:100svh;padding-top:clamp(120px,22vh,220px);align-content:start}
.hero .lead-wrap{max-width:40rem;display:grid;gap:1.4rem}
.hero h1{font-size:clamp(2.9rem,6.6vw,6.2rem);line-height:.98}
.hero .lead{font-size:clamp(1.08rem,1.4vw,1.25rem);max-width:33rem;color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.proof{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.92rem;color:var(--ink-2);padding:0;margin:0;list-style:none}
.proof li{display:flex;align-items:center;gap:.45rem}
.proof .star{color:var(--sun);letter-spacing:.05em}
.cue{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);translate:-50% 0;display:grid;justify-items:center;gap:.5rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.cue i{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Méthode */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.1rem;padding:0;margin:0;list-style:none}
.pillars li{display:grid;gap:.2rem;font-size:.93rem;color:var(--ink-2)}
.pillars b{font-weight:500;color:var(--ink);font-size:1rem}
.steps{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;align-items:center;gap:.4rem;font-size:.85rem;padding:.3rem .7rem .3rem .35rem;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sun);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}

/* Entrer */
.enter{min-height:240vh;align-items:start;justify-items:center;text-align:center}
.enter .door-title{position:sticky;top:30vh;display:grid;gap:1rem;justify-items:center}
.enter h2{font-size:clamp(3.2rem,10vw,9rem)}
.enter p{max-width:28rem;color:var(--ink-2)}

/* Pièces (fond opaque, à l'intérieur) */
.room{position:relative;background:var(--paper);padding:clamp(5rem,11vw,9rem) var(--gutter);overflow:hidden;isolation:isolate}
.room::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 35% at 15% 20%,rgba(255,211,107,.28),transparent 70%),radial-gradient(35% 30% at 85% 10%,rgba(244,180,58,.18),transparent 70%),radial-gradient(45% 40% at 70% 90%,rgba(255,232,170,.35),transparent 70%);animation:mesh 22s ease-in-out infinite alternate}
@keyframes mesh{50%{transform:translate(3%,-2%) rotate(2deg) scale(1.05)}100%{transform:translate(-2%,3%) rotate(-1deg)}}
.wrap{max-width:1240px;margin-inline:auto}
.room-head{display:grid;gap:1rem;max-width:44rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.room-head h2{font-size:clamp(2.4rem,5vw,4.4rem)}
.room-head p{color:var(--ink-2);font-size:1.1rem}

/* Réalisations */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2rem}
.filters button{min-height:44px;padding:0 1.1rem;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:.95rem;cursor:pointer;transition:.3s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.feature{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.2rem,3vw,2.6rem);align-items:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.ba{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);background:var(--sand);touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:#fff;box-shadow:0 0 18px rgba(255,211,107,.9);pointer-events:none}
.ba .handle::after{content:"⟷";position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--sun);color:var(--ink);font-size:1.2rem;box-shadow:var(--shadow)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .tag{position:absolute;top:14px;padding:.3rem .7rem;border-radius:999px;background:rgba(255,252,245,.85);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.ba .tag--l{left:14px}.ba .tag--r{right:14px}
.feature-text{display:grid;gap:1rem}
.feature-text h3{font-size:clamp(1.9rem,3vw,2.6rem)}
.feature-text p{color:var(--ink-2)}
.feature-text .thumb{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--sand)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.8rem,1.6vw,1.3rem)}
.work{grid-column:span 4;margin:0;display:grid;gap:.7rem}
.work.wide{grid-column:span 8}
.work[hidden]{display:none}
.work button{all:unset;cursor:zoom-in;display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--sand);position:relative}
.work.wide button{aspect-ratio:16/9}
.work button:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
.work img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.work button:hover img{transform:scale(1.045);filter:saturate(1.08) brightness(1.03)}
.work button::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 62%);transform:translateX(-120%);transition:transform 1.1s var(--ease)}
.work button:hover::after{transform:translateX(120%)}
.work figcaption{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.work figcaption b{font-weight:500}
.work figcaption span{flex:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.reveal-img{clip-path:inset(0 0 100% 0)}

dialog.lightbox{width:min(1200px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;border:0;border-radius:var(--r);background:var(--paper);box-shadow:0 40px 120px rgba(30,26,19,.45);overflow:hidden}
dialog.lightbox::backdrop{background:rgba(30,26,19,.55);backdrop-filter:blur(8px)}
.lightbox figure{margin:0;display:grid}
.lightbox img{width:100%;max-height:72vh;object-fit:contain;background:#F4EEDF;touch-action:pan-y}
.lightbox figcaption{padding:1rem 1.25rem;display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:space-between;align-items:center}
.lb-nav{display:flex;gap:.5rem}
.lb-nav button,.lb-close{min-width:48px;min-height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1.2rem}
.lb-close{position:absolute;top:12px;right:12px;z-index:2}

/* Avis */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.review{margin:0;padding:1.6rem;border-radius:var(--r);background:#fff;border:1px solid rgba(184,137,43,.18);display:grid;gap:1rem;align-content:space-between;box-shadow:0 20px 50px -35px rgba(126,90,18,.5)}
.review blockquote{margin:0;font-family:var(--f-display);font-size:1.32rem;line-height:1.3}
.review figcaption{display:flex;justify-content:space-between;align-items:center;font-size:.92rem;color:var(--mute)}
.review .star{color:var(--sun);letter-spacing:.08em}
.score{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.score strong{font-family:var(--f-display);font-weight:400;font-size:clamp(3.6rem,7vw,5.4rem);line-height:1}

/* FAQ */
.faq{display:grid;gap:.6rem;max-width:52rem}
.faq details{border-radius:16px;background:#fff;border:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:60px;padding:.9rem 1.2rem;font-size:1.08rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ivory);font-size:1.3rem;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--sun)}
.faq details p{padding:0 1.2rem 1.2rem;color:var(--ink-2);max-width:44rem}

/* Contact */
.contact{min-height:auto;padding-block:clamp(7rem,14vw,11rem) clamp(4rem,8vw,6rem)}
.contact .panel{position:relative;top:auto;width:min(36rem,100%)}
.coords{display:grid;gap:.4rem;padding:0;margin:0;list-style:none}
.coords a{font-size:1.35rem;font-family:var(--f-display);text-decoration:none;border-bottom:1px solid var(--gold)}
form{display:grid;gap:.9rem}
.field{display:grid;gap:.3rem}
.field label,.field legend{font-size:.9rem;font-weight:500}
.field .req{color:var(--salmon)}
input,select,textarea{font:inherit;color:var(--ink);background:rgba(255,255,255,.82);border:1px solid rgba(30,26,19,.25);border-radius:12px;padding:.75rem .9rem;min-height:48px;width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(30,110,138,.45);outline-offset:1px;border-color:var(--petrol)}
[aria-invalid="true"]{border-color:#B3261E;background:#FFF5F4}
.err{color:#9B1C15;font-size:.85rem;min-height:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
fieldset{border:0;margin:0;padding:0;display:grid;gap:.4rem}
.radios{display:flex;flex-wrap:wrap;gap:.5rem}
.radios label{display:flex;align-items:center;gap:.5rem;min-height:46px;padding:0 1rem;border-radius:999px;border:1px solid rgba(30,26,19,.25);background:rgba(255,255,255,.8);cursor:pointer;font-weight:400}
.radios input{width:18px;height:18px;min-height:0;accent-color:var(--gold-ink)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--ink-2)}
.consent input{width:20px;height:20px;min-height:0;margin-top:.2rem;flex:none;accent-color:var(--gold-ink)}
.form-ok{padding:1rem 1.2rem;border-radius:14px;background:#FFF4D6;border:1px solid var(--sun)}
.demo-note{font-size:.8rem;color:var(--mute)}

/* Pied de page */
.foot{position:relative;z-index:1;background:var(--ivory);border-top:1px solid var(--line);padding:3.2rem var(--gutter) calc(env(safe-area-inset-bottom,0px) + 2rem)}
.foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
.foot address{font-style:normal;color:var(--ink-2)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.foot a,.foot button.linkish{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink-2)}
.foot a:hover,.foot button.linkish:hover{color:var(--gold-ink)}
.foot small{display:block;margin-top:2rem;color:var(--mute)}
button.linkish{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
button.linkish:focus-visible{outline:3px solid var(--petrol)}

/* Bandeau cookies */
.cookies{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:90;max-width:30rem;margin-left:auto;padding:1.2rem 1.3rem;border-radius:var(--r);background:rgba(255,252,245,.96);backdrop-filter:blur(16px);box-shadow:var(--shadow);border:1px solid var(--glass-edge);display:grid;gap:.8rem;font-size:.93rem}
.cookies .actions .btn{--h:46px;flex:1 1 8rem}

/* Utilitaires flottants */
.dock{position:fixed;right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:3;display:flex;gap:.5rem;align-items:center}
.chip-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid var(--glass-edge);background:rgba(255,252,245,.7);backdrop-filter:blur(12px);font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink-2)}
.chip-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.loading{font-size:.8rem;color:var(--mute);display:flex;align-items:center;gap:.5rem}
.loading svg{width:22px;height:22px}
.loading .stair{stroke-dasharray:60;stroke-dashoffset:60;animation:draw 1.6s var(--ease) infinite}
@keyframes draw{60%,100%{stroke-dashoffset:0}}

/* Curseur */
.cursor,.cursor-dot{position:fixed;left:0;top:0;z-index:120;pointer-events:none;border-radius:50%;translate:-50% -50%}
.cursor{width:38px;height:38px;border:1px solid var(--gold);transition:width .35s var(--ease),height .35s var(--ease),background .35s}
.cursor.is-hover{width:64px;height:64px;background:rgba(255,211,107,.18)}
.cursor-dot{width:6px;height:6px;background:var(--gold-ink)}

/* Révélations (seulement si JS) */
.js .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.js .word>span{display:inline-block}

/* Pages secondaires */
.page{position:relative;z-index:1;padding:clamp(8rem,16vw,11rem) var(--gutter) 5rem;background:radial-gradient(60% 40% at 80% 0,rgba(255,211,107,.3),transparent 70%),var(--paper)}
.page .wrap{max-width:46rem}
.page h1{font-size:clamp(2.6rem,6vw,4.6rem);margin:1rem 0 1.5rem}
.page h2{font-size:1.9rem;margin:2.4rem 0 .8rem}
.page p,.page li{color:var(--ink-2);margin-bottom:.8rem}
.page .todo{background:#FFF1C7;padding:0 .25rem;border-radius:4px}
.crumbs{display:flex;gap:.5rem;font-size:.88rem;color:var(--mute);list-style:none;padding:0;margin:0}
.crumbs a{min-height:44px;display:inline-flex;align-items:center}

@media (max-width:820px){
  .stage{min-height:auto;padding-top:62svh;padding-bottom:12svh}
  .stage .panel{position:relative;top:auto;justify-self:stretch;width:100%}
  .hero{min-height:100svh;padding-top:46svh;padding-bottom:5rem;align-content:end}
  .hero h1{font-size:clamp(2.5rem,11vw,3.6rem)}
  .scene::after{background:linear-gradient(to top,rgba(255,252,245,.92) 22%,rgba(255,252,245,0) 55%)}
  .enter{min-height:200vh;padding-top:0}
  .feature,.foot .wrap{grid-template-columns:1fr}
  .work,.work.wide{grid-column:span 12}
  .row,.pillars{grid-template-columns:1fr}
  .compass{display:none}
  .cue{display:none}
  .dock{bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  .cookies{padding:.85rem 1rem;font-size:.84rem;gap:.55rem;left:12px;right:12px}
  .cookies .actions .btn{--h:44px}
}
@media (min-width:821px) and (max-width:1100px){.work{grid-column:span 6}.work.wide{grid-column:span 12}}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain,.cursor,.cursor-dot{display:none}
}
html.shot main{visibility:hidden}
html.shot .poster,html.shot .cursor,html.shot .cursor-dot,html.shot .bar,html.shot .dock,html.shot .compass,html.shot .cookies,html.shot .grain,html.shot .scene::after,html.shot .foot{display:none!important}