@font-face{font-family:"Archivo";src:url(/assets/archivo.woff2?v=510b8100) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/newsreader.woff2?v=662a6e2a) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/plexmono.woff2?v=2c9bacf0) format("woff2");font-weight:400;font-display:swap}
:root{--noir:#0d0d0d;--blanc:#f3f1ec;--anth:#2a2c2e;--pierre:#6b6862;--pierre-s:#a9a59e;--laiton:#b0894f;--laiton-f:#85662f;
  --ease:cubic-bezier(.22,1,.36,1);--ease-masque:cubic-bezier(.16,1,.3,1);--ease-bascule:cubic-bezier(.65,0,.35,1);--ease-sortie:cubic-bezier(.55,0,1,.45);
  --tempo:7s;--plan:6s;--pad:clamp(16px,4vw,56px);--vh:100vh}
@supports(height:100svh){:root{--vh:100svh}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;scrollbar-gutter:stable}
body{background:var(--blanc);color:var(--noir);font:400 14px/1.55 "Archivo",system-ui,sans-serif;font-stretch:100%;overflow-x:clip}
main{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a,button,.card,.gal-b{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.skip{position:fixed;left:8px;top:-100px;z-index:99;min-height:44px;min-width:44px;display:inline-flex;align-items:center;padding:0 14px;background:var(--blanc);color:var(--noir)}.skip:focus{top:8px}
.it{font-family:"Newsreader",serif;font-style:italic;font-weight:300}
/* filets verticaux de la grille */
.grid{position:fixed;inset:0;z-index:0;pointer-events:none;display:flex;justify-content:space-between;padding:0 var(--pad);background:radial-gradient(120% 80% at 0% 0%,rgba(255,252,245,.9) 0%,rgba(255,252,245,0) 55%),radial-gradient(90% 70% at 100% 100%,rgba(176,137,79,.08) 0%,rgba(176,137,79,0) 60%)}
.grid i{width:1px;background:rgba(13,13,13,.08)}
main,.foot{position:relative;z-index:1}
/* en-tête */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px var(--pad);color:var(--blanc);transition:color .4s var(--ease)}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(243,241,236,.99) 0%,rgba(243,241,236,.99) 72%,rgba(243,241,236,0) 100%);opacity:0;transition:opacity .4s var(--ease)}
body.light .bar::before{opacity:1}
body.menu-open .bar::before{opacity:0}
/* sur photo ou section sombre : fondu sombre sous l'en-tête, pour que le texte qui défile ne passe plus derrière « Menu » et le logo */
.bar::after{content:"";position:absolute;inset:0 0 -28px 0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(32,33,35,.97) 0%,rgba(32,33,35,.92) 64%,rgba(32,33,35,0) 100%);transition:opacity .4s var(--ease)}
body.light .bar::after,body.menu-open .bar::after{opacity:0}
.bar-l,.bar-r{display:flex;gap:6px;align-items:center}.bar-r{justify-content:flex-end}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:rgba(13,13,13,.5);font-size:13px;font-weight:500;letter-spacing:.01em;transition:background-color .4s var(--ease),color .2s,transform .15s}
@media(hover:hover){.pill:hover{background:rgba(13,13,13,.7);transition-duration:.2s}}
.logo{display:flex;align-items:center;min-height:44px;width:120px;color:inherit}.logo svg{width:100%;height:auto;display:block}
.cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;background:var(--laiton);color:var(--noir);font-size:13px;font-weight:600}
.menu-btn{display:none;min-height:44px;min-width:88px;text-align:left;padding:0 16px;background:rgba(13,13,13,.5);border:0;color:inherit;font:500 14px "Archivo";cursor:pointer}
body.light .bar{color:var(--noir)}
body.light .pill,body.light .menu-btn{background:rgba(243,241,236,.92);box-shadow:inset 0 0 0 1px rgba(13,13,13,.12)}
@media(hover:hover){body.light .pill:hover{background:rgba(13,13,13,.1)}}
.menu{overflow-y:auto;overscroll-behavior:contain;position:fixed;inset:0;z-index:40;background:var(--noir);color:var(--blanc);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:160px var(--pad) 40px}
.menu a{font:400 44px/1.15 "Archivo";font-stretch:75%;text-transform:uppercase;min-height:56px}
/* le menu glisse depuis le haut (fermé : hors écran et invisible) ; les liens montent l'un après l'autre */
.menu{transform:translateY(-100%);visibility:hidden;transition:transform .35s var(--ease-sortie),visibility 0s .35s}
.menu.open{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s}
.menu a{translate:0 28px}
.menu.open a{translate:0 0;transition:translate .6s var(--ease);transition-delay:calc(.12s + var(--i,0)*45ms)}
body.menu-open .bar{color:var(--blanc)}
body.menu-open .menu-btn{background:rgba(243,241,236,.14);box-shadow:none}
.lang-m{position:absolute;top:96px;left:var(--pad);right:var(--pad);display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--pierre-s);font:400 16px/1.3 "Plex Mono"}
.lang-m .lang-l{margin-right:8px}
.lang-m>span[aria-hidden]{display:none}
.tab{position:fixed;right:0;top:50%;z-index:45;transform:translate(100%,-50%);writing-mode:vertical-rl;background:var(--laiton);color:var(--noir);padding:22px 0;width:44px;text-align:center;font-weight:600;font-size:13px;transition:transform .6s var(--ease)}
body.light .tab{transform:translate(0,-50%)}
/* héros */
.hero{height:calc(var(--vh)*2.2);position:relative}
.hero-pin{position:sticky;top:0;height:var(--vh);overflow:hidden;background:var(--noir);color:var(--blanc)}
.slides,.slides img{position:absolute;inset:0;width:100%;height:100%}
.slides img{object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 1.4s var(--ease-bascule),transform 0s 1.4s}
.slides img.on{opacity:1;transform:scale(1.1);transition:opacity 1.4s var(--ease-bascule),transform calc(var(--plan) + 1.4s) linear}
.hero-pin.cache .slides img{transition:none}
@starting-style{.slides img.on{transform:scale(1.02)}}
.shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,13,13,.5),rgba(13,13,13,.1) 30%,rgba(13,13,13,.14) 52%,rgba(13,13,13,.5) 76%,rgba(13,13,13,.72)),radial-gradient(ellipse 46% 36% at 50% 42%,rgba(13,13,13,.5),rgba(13,13,13,.28) 60%,rgba(13,13,13,0))}
.tag{position:absolute;left:var(--pad);bottom:calc(var(--vh)*.05 + 28px);text-shadow:0 1px 4px rgba(13,13,13,.7);max-width:260px;font:italic 400 16px/1.4 "Newsreader",serif}
.film{position:absolute;right:var(--pad);bottom:calc(var(--vh)*.05 + 28px);text-shadow:0 1px 3px rgba(13,13,13,.55);display:flex;gap:40px;align-items:center;min-height:44px;width:min(190px,40vw);justify-content:space-between;border-top:1px solid rgba(243,241,236,.5);padding:0 12px;box-sizing:border-box;font-size:13px;font-weight:500;padding-top:6px;font-size:13px}
.giant{position:absolute;left:0;right:0;top:0;height:calc(100% - var(--vh)*.05 - 28px - 118px);padding-top:76px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vh,24px);margin:0;font-weight:400;color:var(--blanc)}
.g-logo{display:block;width:min(40vw,50vh)}.g-logo svg{display:block;width:100%;height:auto}
/* villes en laiton clair sur halo sombre doux, réglé à la mesure sur le rendu (09/11/2026 : laiton #b0894f seul = 2,61:1 au pire sur photo claire, 1,86:1 au téléphone) */
.g-villes{display:block;font:italic 400 clamp(24px,2.3vw,34px)/1.15 "Newsreader",serif;color:#d6b680;text-align:center;text-shadow:0 1px 3px rgba(13,13,13,.6);padding:.35em 1.1em;background:radial-gradient(closest-side,rgba(13,13,13,.72),rgba(13,13,13,.43) 55%,rgba(13,13,13,0))}
@media(max-width:800px){.g-villes{padding:.4em 1.4em;background:radial-gradient(closest-side,rgba(13,13,13,.85),rgba(13,13,13,.72) 72%,rgba(13,13,13,0))}}
.giant{animation:monte 1.3s var(--ease-masque) .2s both}
.tag,.film{animation:monte16 .9s var(--ease) .55s both}
@keyframes monte{from{translate:0 110%}}
@keyframes monte16{from{translate:0 16px}}
.fog{position:absolute;left:0;right:0;top:0;height:150%;transform:translateY(100%);background:linear-gradient(to bottom,rgba(243,241,236,0),rgba(243,241,236,.7) 14%,var(--blanc) 30%);will-change:transform}
/* intro */
.intro{position:relative;padding:calc(var(--vh)*.25) var(--pad) 0}
/* L1 : l'intro remonte sous le pied du héros pour qu'aucun écran ne soit vide ; en mouvement réduit le héros fait 1 écran, rien ne remonte */
html:not(.reduit) .intro{margin-top:calc(var(--vh)*-.95);z-index:2}
.label{font-size:15px;color:var(--pierre);padding-left:calc(100%/3)}
.h3{font:400 clamp(22px,2.7vw,44px)/1.12 "Newsreader",serif;text-transform:uppercase;letter-spacing:.005em}
.indent{margin:18px 0 0 calc(100%/3);max-width:calc(200%/3);text-indent:12vw}
.intro-col{width:min(300px,100%);margin-top:calc(var(--vh)*.4)}
.mini{font:600 13px "Archivo";letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.intro-col p{font-size:15px;max-width:300px}
.intro-col .mini{font-size:13px}
.pic-tall{margin:calc(var(--vh)*.1) calc(var(--pad)*-1) 0;height:calc(var(--vh)*1.05);overflow:hidden;position:relative;will-change:transform}
.pic-tall img{width:100%;height:120%;object-fit:cover;position:absolute;inset:0;will-change:transform}
/* appartements */
.trips{padding:calc(var(--vh)*.22) var(--pad) 0;text-align:center}
.section-title{font:400 clamp(26px,3.2vw,48px)/1 "Newsreader",serif;text-transform:uppercase;letter-spacing:.02em}
.flick{display:flex;gap:8px;height:calc(var(--vh)*.78);min-height:520px;margin:calc(var(--vh)*.12) calc(var(--pad)*-1) 0;padding:0 8px;text-align:left}
.card{position:relative;flex:1 1 0;min-width:0;overflow:hidden;contain:layout paint;color:#f3f1ec;background:var(--anth);cursor:pointer}
@media(hover:hover){.card{transition:flex-grow .6s var(--ease)}}
.card.on{flex-grow:7}
/* la photo garde la largeur de la carte OUVERTE (jamais recalculée) : l'ouverture la découvre au lieu de la recadrer */
.card img{position:absolute;inset:0 auto 0 50%;width:calc((100vw - 16px - 8px*(var(--n,4) - 1))*7/(6 + var(--n,4)));height:100%;object-fit:cover;translate:-50% 0;scale:1.15;transition:scale 1.2s var(--ease)}
.card.on img{scale:1}
.card::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(42,44,46,.55);opacity:1;transition:opacity .6s}
.card.on::before{opacity:0}
.card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(13,13,13,.86),rgba(13,13,13,.3) 55%,rgba(13,13,13,.1))}
.card-in{position:absolute;z-index:2;left:0;bottom:0;width:min(560px,56vw);padding:28px;visibility:hidden;translate:0 16px;transition:translate .6s var(--ease),visibility 0s .9s}
.card.on .card-in{visibility:visible;translate:0 0;transition-delay:0s}
.card-t{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:var(--laiton);transform:scaleX(0);transform-origin:0 50%}
.card.on .card-t{animation:fil var(--tempo) linear forwards}
.flick.pause .card.on .card-t{animation-play-state:paused}
@keyframes fil{to{transform:scaleX(1)}}
.card-k{position:absolute;z-index:2;top:20px;left:0;right:0;text-align:center;font:italic 300 22px "Newsreader",serif}
.card.on .card-k{display:none}
.card h3{font:italic 300 clamp(28px,3vw,42px)/1.1 "Newsreader",serif;margin:8px 0 10px}
.card .ct{line-height:1.45;font:500 13px/1.45 "Archivo";letter-spacing:.04em;text-transform:uppercase;color:#f3f1ec}
.card .pr{font:400 14px "Plex Mono";color:#f3f1ec;margin:6px 0 8px}
.card p{font-size:15px;max-width:420px}
.card a{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;border-bottom:1px solid var(--laiton);font-weight:600;font-size:14px}
.note{font-size:13px;color:var(--pierre);margin-top:18px;max-width:640px;margin-left:auto;margin-right:auto}
/* citation */
.quote{padding:calc(var(--vh)*.3) var(--pad) 0;text-align:center}
.q{font-size:clamp(20px,2.3vw,34px);line-height:1.35;max-width:820px;margin:0 auto}
.sign{font-size:clamp(34px,4vw,56px);margin-top:48px;color:var(--noir)}
.who{font-size:13px;color:var(--pierre)}
/* région */
.camps{height:calc(var(--vh)*3);margin-top:calc(var(--vh)*.3);position:relative}
.camps-pin{position:sticky;top:0;height:var(--vh);overflow:hidden;background:var(--anth);color:var(--blanc);will-change:transform}
.camps-bg{position:absolute;inset:0}.camps-bg img{width:100%;height:100%;object-fit:cover}
.camps-bg::after{content:"";position:absolute;inset:0;background:rgba(42,30,18,.55)}
.camps-title{display:none}
.camps-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:6vw;padding:0 8vw;will-change:transform}
.ct-title{font:400 clamp(40px,7vw,110px)/1 "Newsreader",serif;text-transform:uppercase;white-space:nowrap;flex:none}
.ct-text{flex:none;width:min(380px,76vw);font-size:14px}
.pan{flex:none;width:min(420px,78vw)}
.pan img{width:100%;height:min(38vh,320px);object-fit:cover;margin-bottom:20px}
.pan h3{font:400 clamp(26px,2.6vw,38px)/1.1 "Newsreader",serif;text-transform:uppercase;margin-bottom:8px}
.pan p{font-size:15px}
/* chiffres */
.stats{padding:calc(var(--vh)*.16) var(--pad) 0;text-align:center;background:radial-gradient(90% 70% at 0% 0%,rgba(176,137,79,.12) 0%,rgba(176,137,79,0) 60%)}
.title-fade{font:300 clamp(48px,13vw,210px)/.9 "Archivo";font-stretch:62%;text-transform:uppercase;white-space:nowrap}
.end{margin-top:28px}
.stat-row{display:grid;gap:24px;margin:calc(var(--vh)*.14) auto 0;max-width:1100px}
.stat-row.n1{grid-template-columns:repeat(1,1fr)}.stat-row.n2{grid-template-columns:repeat(2,1fr)}.stat-row.n3{grid-template-columns:repeat(3,1fr)}
.stat b{display:block;font:300 clamp(30px,4.2vw,64px)/1.1 "Archivo";font-stretch:100%}
.stat span{font:400 13px "Plex Mono";text-transform:uppercase;letter-spacing:.04em;color:var(--pierre)}
/* réserver */
.plan{padding:calc(var(--vh)*.3) var(--pad) calc(var(--vh)*.25);text-align:center}
.plan-t{margin-bottom:48px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;max-width:860px;margin:0 auto;text-align:left}
.form label{display:flex;flex-direction:column;gap:4px;font:500 13px "Archivo";letter-spacing:.04em;text-transform:uppercase;color:var(--pierre)}
.form .full,.btns,.form .note{grid-column:1/-1}
.form input,.form select,.form textarea{font:400 16px "Archivo";min-height:48px;-webkit-appearance:none;appearance:none;padding:10px 0;border:0;border-bottom:1px solid rgba(13,13,13,.4);background:transparent;color:var(--noir);border-radius:0;text-transform:none;letter-spacing:0}
.form textarea{min-height:90px;resize:none}
.form input[type=date]::-webkit-date-and-time-value{text-align:left}.form input[type=date]::-webkit-datetime-edit{padding:0}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--noir);font-weight:600;font-size:14px}
button.btn{-webkit-appearance:none;appearance:none;background:transparent;color:inherit;font-family:inherit;border-radius:0;cursor:pointer}
.btn.solid{background:var(--laiton);border-color:var(--laiton);color:var(--noir)}
.form .note{margin:0;max-width:none}
.form a:not(.btn){text-decoration:underline;text-underline-offset:3px}
.ferr{grid-column:1/-1;margin:0;font-size:15px;color:var(--noir)}
.ferr:not(:empty){padding:10px 0 10px 14px;border-left:4px solid var(--laiton);font-weight:600}
.form [aria-invalid=true]{border-bottom:2px solid var(--noir)}
/* pied */
.foot{background:var(--noir);color:var(--blanc);padding:90px var(--pad) 40px}
.foot-logo{width:min(320px,70vw);margin-bottom:56px}.foot-logo svg{width:100%;height:auto}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;font-size:14px;line-height:1.7;color:var(--pierre-s)}
.foot-cols>div{display:grid;gap:4px;align-content:start;justify-items:start}
.foot-cols .foot-h{font:500 13px/1.7 "Plex Mono";letter-spacing:.06em;text-transform:uppercase;color:var(--blanc);margin-bottom:6px}
.foot-cols a{display:inline-flex;align-items:center;min-height:44px}
.foot-class{margin-top:56px;padding-top:20px;border-top:1px solid rgba(243,241,236,.2);font:400 13px "Plex Mono";color:var(--pierre-s)}
/* apparitions */
/* apparitions : trois familles seulement (le texte courant, les notes, le formulaire et le pied sont présents tout de suite) */
/* a) titres : mots qui montent depuis un masque (jamais d'opacité) ; la réserve .14em garde les accents des capitales */
.mk{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .06em;margin:-.14em 0 -.06em}
.mw{display:inline-block}
.rv .tt .mw{translate:0 105%;transition:translate 1s var(--ease-masque);transition-delay:calc(min(var(--i),8)*40ms)}
.rv .tt.in .mw{translate:0 0}
/* b) longs énoncés : les mots passent de la pierre au noir quand la ligne de lecture les dépasse (lisibles à tout instant) */
.mt{color:var(--pierre);transition:color .3s var(--ease)}
.mt.lit{color:var(--noir)}
/* c) photos et cadres : le cadre se pose (fondu sur la photo seule), la photo se détend */
.rv .ph-c{opacity:0;scale:.94;transition:opacity .5s var(--ease),scale .5s var(--ease)}
.rv .ph-c img{scale:1.14}
.rv .ph-c.in{opacity:1;scale:1}
.rv .ph-c.in img{scale:1;transition:transform 1.2s var(--ease),scale 1.4s var(--ease)}
/* traits tracés */
.trait{position:absolute;pointer-events:none;overflow:visible;color:var(--laiton-f)}
.trait path{stroke-dasharray:1;stroke-dashoffset:0}
.rv .trait path{stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-bascule) .2s}
.rv .trait.in path{stroke-dashoffset:0}
.lb{position:relative;display:inline-block}
.lb .trait{left:-14px;right:-14px;top:-9px;bottom:-9px;width:calc(100% + 28px);height:calc(100% + 18px)}
@media(max-width:800px){.lb .trait{display:none}}
.trait-u{position:relative;display:block;margin:10px auto 0;width:min(240px,50vw);height:14px}
/* téléphone */
@media(max-width:800px){
  .bar{grid-template-columns:auto 1fr auto}
  .bar-l .pill,.bar-r .lang{display:none}.menu-btn{display:block}
  .logo{width:104px;justify-self:center;text-shadow:0 1px 3px rgba(13,13,13,.5)}
  .menu-btn{background:rgba(13,13,13,.62);text-shadow:0 1px 3px rgba(13,13,13,.5)}
  .bar::after{inset:0 0 -12px 0;background:linear-gradient(180deg,rgba(32,33,35,.55) 0%,rgba(32,33,35,.35) 64%,rgba(32,33,35,0) 100%)}
  .tab{display:none}
  .tag{bottom:calc(var(--vh)*.05 + 84px);max-width:300px}
  .film{bottom:calc(var(--vh)*.05 + 24px);left:var(--pad);width:auto}
  .giant{height:calc(100% - var(--vh)*.05 - 84px - 100px);padding-top:70px}
  .g-logo{width:min(62vw,40vh)}
  .label{padding-left:0}.indent{margin-left:0;max-width:none;text-indent:0}
  .intro-col{margin-top:60px}
  .flick{flex-direction:column;height:auto;min-height:0;padding:0 var(--pad);margin:60px 0 0;gap:10px}
  .card,.card.on{flex:none;height:min(90vw,460px)}
  .card[data-num="1"],.card.on[data-num="1"]{height:min(120vw,600px)}
  .card .card-in{visibility:visible;translate:none;width:100%;padding:20px}.card .card-k{display:none}
  .card::before,.card.on::before{opacity:0}
  .card::after{background:linear-gradient(to top,rgba(13,13,13,.88),rgba(13,13,13,.25) 60%,rgba(13,13,13,.1))}
  .card img{inset:0;width:100%;translate:none;scale:1}
  .card-t{display:none}
  .stat-row.stat-row{grid-template-columns:minmax(0,1fr);gap:28px}
  .form{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .camps{margin-top:calc(var(--vh)*.2)}
  .title-fade{white-space:normal;font-size:clamp(40px,12vw,100px);overflow-wrap:break-word}
  .btns .btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slides img,.card,.card img,.card-in,.fog,.gal-b img,.oc-img img,.tab,.pill,.cta,.btn,.menu,.menu a,.vw::before,.vw figcaption,.vw button{transition:none}
  .slides img.on{transform:scale(1.02)}
}
.form select{height:48px;background:linear-gradient(45deg,transparent 50%,var(--noir) 50%) calc(100% - 14px) 21px/6px 6px no-repeat,linear-gradient(135deg,var(--noir) 50%,transparent 50%) calc(100% - 8px) 21px/6px 6px no-repeat;padding-right:28px}
.form input[type=date]{height:48px;min-width:0;width:100%}
/* pages intérieures */
.ph-wrap{--ph-h:max(calc(var(--vh)*.92),520px);height:calc(var(--ph-h) + var(--vh)*.6);position:relative}
.ph{position:sticky;top:0;height:var(--ph-h);overflow:hidden;background:var(--noir);color:var(--blanc);transform-origin:50% 0}
html:not(.js) .ph-wrap,html.reduit .ph-wrap{height:auto}
html:not(.js) .ph,html.reduit .ph{position:relative}
.ph-img,.ph-img img{position:absolute;inset:0;width:100%;height:100%}
.ph-img img{object-fit:cover;animation:phs 1.8s var(--ease-masque) both;will-change:transform}
@keyframes phs{from{scale:1.12}}
.ph-k{animation:monte14 .8s var(--ease-masque) .35s both}
.ph-m{animation:monte14 .8s var(--ease-masque) .5s both}
@keyframes monte14{from{translate:0 14px}}
.vt .ph-img img{animation:none}
.vt .ph-shade{animation:voile .4s .8s both}
@keyframes voile{from{opacity:0}}
/* le titre du haut : mots masqués, 90 ms entre les mots, départ 0,25 s ; masqué avant que le script ne l'ait découpé (repli : visible après 1,5 s) */
.rv .ph-h.tt .mw{transition-delay:calc(.25s + min(var(--i),6)*70ms)}
html.js:not(.mots) .ph-h{visibility:hidden;animation:revele 0s 1.5s forwards}
@keyframes revele{to{visibility:visible}}
.ph-shade{position:absolute;inset:0;background:linear-gradient(to right,rgba(13,13,13,.5),rgba(13,13,13,0) 70%),linear-gradient(to bottom,rgba(13,13,13,.55),rgba(13,13,13,.15) 25%,rgba(13,13,13,.5) 45%,rgba(13,13,13,.86))}
.ph-in{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--vh)*.05)}
.ph-k{font-size:clamp(17px,1.6vw,22px);margin-bottom:10px}
.ph-h{font:700 clamp(54px,12vw,190px)/.88 "Archivo";font-stretch:62%;text-transform:uppercase;letter-spacing:-.005em;overflow-wrap:break-word}
@media(min-width:801px){.ph-h.ph-h-n1{font-size:clamp(48px,6.5vw,110px)}}
.ph-n{color:#e2c88f}
.ph-m{font:400 14px/1.5 "Plex Mono";margin-top:18px;text-transform:uppercase;letter-spacing:.03em}
.ap-intro{position:relative;padding:calc(var(--vh)*.2) var(--pad) 0}
.ap-intro .intro-col{margin-top:calc(var(--vh)*.16)}
.gal{padding:calc(var(--vh)*.22) var(--pad) 0;text-align:center}
.gal-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin:calc(var(--vh)*.1) calc(var(--pad)*-1) 0;padding:0 8px}
.gal-b{grid-column:span 4;aspect-ratio:4/3;overflow:hidden;position:relative;border:0;background:var(--anth);cursor:pointer;min-height:44px}
.gal-b:nth-child(5n+1){grid-column:span 8;aspect-ratio:16/10}
@media(min-width:801px){
  .gal-grid{grid-auto-rows:calc((100vw - 104px)/4)}
  .gal-b,.gal-b:nth-child(5n+1){aspect-ratio:auto;grid-column:span 4}
  .gal-b:nth-child(3n+1){grid-column:span 8;grid-row:span 2}
  .gal-b:nth-child(3n+1):nth-last-child(2){grid-row:span 1}
  .gal-b:nth-child(3n+1):last-child{grid-column:span 12}
}
.gal-b img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),scale 1.4s var(--ease)}
@media(hover:hover){.gal-b:hover img{transform:scale(1.06)}}
.eq{padding:calc(var(--vh)*.22) var(--pad) 0;text-align:center}
.eq-l{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0 40px;max-width:900px;margin:calc(var(--vh)*.08) auto 0}
.eq-l li{position:relative;font:italic 300 clamp(22px,2.4vw,34px)/1.5 "Newsreader",serif;padding:6px 0;min-width:200px}
.eq-l li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(13,13,13,.15);transform-origin:0 50%}
.rv .eq-l li::after{transform:scaleX(0);transition:transform .7s var(--ease);transition-delay:calc(var(--i,0)*50ms)}
.rv .eq-l.in li::after{transform:scaleX(1)}
.mais{padding:calc(var(--vh)*.22) var(--pad) 0;text-align:center}
.mais-t p{font-size:15px;color:var(--pierre);margin-top:14px}
.mais-p{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:calc(var(--vh)*.1) calc(var(--pad)*-1) 0;padding:0 8px}
.mais-p figure{aspect-ratio:4/3;overflow:hidden}.mais-p img{width:100%;height:100%;object-fit:cover}
.adr{padding:calc(var(--vh)*.1) var(--pad) 0;text-align:center}
.adr p{font-size:15px;margin-bottom:18px}
.others{padding:calc(var(--vh)*.2) var(--pad) calc(var(--vh)*.2);text-align:center}
.oc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:calc(var(--vh)*.1) calc(var(--pad)*-1) 0;padding:0 8px;text-align:left}
.oc-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--anth)}.oc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),scale 1.4s var(--ease)}
@media(hover:hover){.oc:hover .oc-img img{transform:scale(1.06)}}
.oc-in{padding:20px 0}.oc .ct{font:500 13px/1.45 "Archivo";letter-spacing:.04em;text-transform:uppercase;color:var(--pierre)}
.oc h3{font:italic 300 clamp(26px,2.4vw,34px)/1.1 "Newsreader",serif;margin:6px 0}
.oc .pr{font:400 14px "Plex Mono"}
.oc-l{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;border-bottom:1px solid var(--laiton-f);font-weight:600;font-size:14px}
/* quatre volets sombres collés : la suivante monte par-dessus la précédente (CSS seul) ; le recul de la photo est posé par le script */
.idees{margin-top:calc(var(--vh)*.2)}
.idee{position:sticky;top:0;height:var(--vh);background:var(--anth);color:var(--blanc);display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;overflow:hidden}
.idee img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transform-origin:50% 50%}
.idee-t{align-self:center;padding:0 clamp(24px,5vw,80px)}
.idee-n{display:block;font:400 13px "Plex Mono";letter-spacing:.06em;color:var(--pierre-s);margin-bottom:18px}
.idee h3{font:400 clamp(28px,2.8vw,40px)/1.1 "Newsreader",serif;text-transform:uppercase;margin-bottom:10px}
.idee p{font-size:15px;max-width:420px}
html.reduit .idee{position:relative}
.adrs{padding:calc(var(--vh)*.22) var(--pad) 0;text-align:center}
.adrs-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:860px;margin:calc(var(--vh)*.08) auto 0}
.adrs-c h3{font:italic 300 clamp(26px,2.6vw,36px)/1.1 "Newsreader",serif;margin-bottom:10px}
.adrs-c p{font-size:15px;margin-bottom:8px}
.appel{padding:calc(var(--vh)*.22) var(--pad) calc(var(--vh)*.22);text-align:center}
.appel .btn{margin-top:36px}
.ct-box{padding:calc(var(--vh)*.2) var(--pad) 0;display:grid;grid-template-columns:1fr 2fr;gap:48px}
.ct-l p{font-size:15px}.ct-l .ct-nom{font-size:clamp(22px,2.7vw,44px)}.ct-l a{display:inline-block;padding:11px 0;margin:-11px 0}.ct-l .h3{margin-bottom:14px}
.ct-f.plan{padding:0;text-align:left}
.plan .form{margin-top:0}
.vw{position:fixed;inset:0;z-index:100;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--blanc);overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.vw[hidden]{display:none}
.vw::before{content:"";position:absolute;inset:0;background:var(--noir);opacity:0;transition:opacity .3s var(--ease)}
.vw.open::before{opacity:1}
.vw figure{position:relative;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.vw-st{display:grid;max-width:92vw}
.vw-st img{grid-area:1/1;width:auto;height:auto;max-width:92vw;max-height:78vh;object-fit:contain;justify-self:center}
.vw-st img.vw-off{opacity:0;pointer-events:none}
.vw figcaption{font-size:13px;color:var(--pierre-s);text-align:center;max-width:70ch;translate:0 8px;transition:translate .5s .3s var(--ease);font-variant-numeric:tabular-nums lining-nums}
.vw.open figcaption{translate:0 0}
.vw.ferme button,.vw.ferme figcaption{visibility:hidden}
.vw button{position:absolute;display:grid;place-items:center;min-width:48px;min-height:48px;background:rgba(243,241,236,.12);color:var(--blanc);border:0;cursor:pointer;transition:background-color .2s,transform .15s}
.vw button svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vw button:active{transform:scale(.94)}
@media(hover:hover){.vw button:hover{background:rgba(243,241,236,.24)}}
@supports(height:100dvh){.vw figure{max-height:calc(100dvh - 140px)}.vw-st img{max-height:calc(100dvh - 190px)}}
.vw-x{top:14px;right:14px}.vw-p{left:14px;top:50%}.vw-n{right:14px;top:50%}
html.noscroll,html.noscroll body{overflow:hidden}
@media(max-width:800px){
  .ph-h{font-size:clamp(40px,12.5vw,100px)}
  .ap-intro{padding-top:calc(var(--vh)*.12)}
  .gal-grid{grid-template-columns:1fr 1fr;padding:0 var(--pad);margin-left:0;margin-right:0}
  .gal-b,.gal-b:nth-child(5n+1){grid-column:span 1;aspect-ratio:4/3}.gal-b:nth-child(3n+1){grid-column:span 2}
  .mais-p{grid-template-columns:1fr;padding:0 var(--pad);margin-left:0;margin-right:0}
  .oc-row{grid-template-columns:1fr;padding:0 var(--pad);margin-left:0;margin-right:0;gap:28px}
  .idee{grid-template-columns:1fr;grid-template-rows:62% 1fr}.idee-t{padding:24px var(--pad) 0;align-self:start}.idee-n{margin-bottom:10px}
  .adrs-row{grid-template-columns:1fr}.ct-box{grid-template-columns:1fr;gap:28px}
  .vw-p{left:8px}.vw-n{right:8px}.vw-p,.vw-n{top:auto;bottom:max(28px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.ph-img img,.ph-k,.ph-m,.giant,.tag,.film{animation:none}.card-t{animation:none}}
.form label{min-width:0}.form select{width:100%;min-width:0;text-overflow:ellipsis}
.ct-f .form,.plan .form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:800px){.ct-f .form,.plan .form{grid-template-columns:minmax(0,1fr)}}

/* ===== ajouts de la version statique ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* sélecteur de langue : deux vrais liens, cibles de 44 px */
.pill.lang{padding:0 6px;gap:0}
.lang a,.lang b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px;font-weight:500}
.lang b{font-weight:700}
.lang i{font-style:normal}
.lang-m a,.lang-m b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;font:500 16px "Plex Mono";box-shadow:inset 0 0 0 1px rgba(243,241,236,.45);color:var(--blanc)}
.lang-m b{background:var(--blanc);color:var(--noir);box-shadow:none}
.gal-b{display:block}
/* sans JavaScript : la région n'est plus épinglée, les panneaux passent à la ligne */
html:not(.js) .camps,html.reduit .camps{height:auto}
html:not(.js) .camps-pin,html.reduit .camps-pin{position:relative;height:auto;overflow:visible;padding:90px 0}
html:not(.js) .camps-track,html.reduit .camps-track{position:relative;height:auto;flex-wrap:wrap}
html.reduit .hero{height:var(--vh)}
/* page 404 */
.nf{min-height:var(--vh);background:var(--noir);color:var(--blanc);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:120px var(--pad) 60px}
.nf h1{font:700 clamp(54px,14vw,200px)/.88 "Archivo";font-stretch:62%;text-transform:uppercase}
.nf p{font-size:15px;color:var(--pierre-s);max-width:520px}
.nf .btn{align-self:flex-start;border-color:var(--blanc);color:var(--blanc);margin-top:6px}
.nf hr{border:0;border-top:1px solid rgba(243,241,236,.2);width:100%;margin:18px 0}
.nf h2{font:700 clamp(32px,7vw,64px)/.95 "Archivo";font-stretch:62%;text-transform:uppercase}
.nf .nf-l{display:flex;flex-wrap:wrap;gap:0 22px;margin:0}
.nf .nf-l a{display:inline-flex;align-items:center;min-height:44px;color:var(--blanc);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(243,241,236,.45);transition:text-decoration-color .2s}
@media(hover:hover){.nf .nf-l a:hover{text-decoration-color:var(--blanc)}}

/* ===== accessibilité : UN seul style de focus, états survol et appui ===== */
main:focus,main:focus-visible{outline:none;box-shadow:none}
:focus-visible{outline:2px solid var(--noir);outline-offset:3px;box-shadow:0 0 0 3px var(--blanc)}
.bar :focus-visible,.menu :focus-visible,.hero :focus-visible,.card :focus-visible,.vw :focus-visible,.foot :focus-visible,.ph :focus-visible,.nf :focus-visible,.camps :focus-visible{outline-color:var(--blanc);box-shadow:0 0 0 3px var(--noir)}
body.light .bar :focus-visible{outline-color:var(--noir);box-shadow:0 0 0 3px var(--blanc)}
body.menu-open .bar :focus-visible{outline-color:var(--blanc);box-shadow:0 0 0 3px var(--noir)}
.form :is(input,select,textarea):focus-visible{outline:0;box-shadow:none;border-bottom-width:2px;padding-bottom:9px;border-bottom-color:var(--noir);background-color:rgba(13,13,13,.06)}
.btn,.cta{transition:background-color .2s,color .2s,border-color .2s,transform .15s}
.btn:active,.cta:active,.pill:active{transform:scale(.97)}
@media(hover:hover) and (pointer:coarse){
  .btn:hover{background:var(--noir);color:var(--blanc)}
  .btn.solid:hover{background:var(--noir);border-color:var(--noir);color:var(--laiton)}
  .nf .btn:hover{background:var(--blanc);color:var(--noir)}
}
@media(hover:hover){
  .cta:hover{background:var(--blanc)}
  .foot-cols a:hover{color:var(--laiton)}
  .ct-l a:hover{color:var(--laiton-f)}
  .card a:hover{border-bottom-color:var(--blanc)}
  .oc-l:hover{border-bottom-color:var(--noir)}
}
/* cartes de l'accueil (ordinateur) : le lien d'une carte fermée reste atteignable au clavier mais invisible ; il rouvre la carte au focus */
@media(min-width:801px){
  .card:not(.on) .card-in a{visibility:visible;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ===== lumière et temps sombre de la page d'un appartement ===== */
.plan-sombre{background:radial-gradient(70% 60% at 15% 0%,rgba(176,137,79,.22),rgba(176,137,79,0) 70%),var(--anth);color:var(--blanc)}
.plan-sombre .form label{color:var(--pierre-s)}
.plan-sombre .form input,.plan-sombre .form select,.plan-sombre .form textarea{color:var(--blanc);border-bottom-color:rgba(243,241,236,.4)}
.plan-sombre .form select{background:linear-gradient(45deg,transparent 50%,var(--blanc) 50%) calc(100% - 14px) 21px/6px 6px no-repeat,linear-gradient(135deg,var(--blanc) 50%,transparent 50%) calc(100% - 8px) 21px/6px 6px no-repeat}
.plan-sombre .form option{color:var(--noir);background:var(--blanc)}
.plan-sombre .form input{color-scheme:dark;-webkit-text-fill-color:var(--blanc)}
html.js .form input[type=date].vide:not(:focus){-webkit-text-fill-color:var(--pierre)}
/* date vide : WebKit y dessine la date du jour ; en blanc plein elle ressemblerait à une date déjà choisie, donc on la garde plus discrète (contraste conservé) tant que le champ est vide et sans focus */
html.js .plan-sombre .form input[type=date].vide:not(:focus){-webkit-text-fill-color:var(--pierre-s)}
.plan-sombre .note{color:var(--pierre-s)}
.plan-sombre .ferr{color:var(--blanc)}
.plan-sombre .form [aria-invalid=true]{border-bottom-color:var(--blanc)}
.plan-sombre .form :is(input,select,textarea):focus-visible{box-shadow:none;border-bottom-color:var(--blanc);background-color:rgba(243,241,236,.10)}
.plan-sombre :focus-visible{outline-color:var(--blanc);box-shadow:0 0 0 3px var(--anth)}
.plan-sombre .btn{border-color:var(--blanc);color:var(--blanc)}
.plan-sombre .btn.solid{background:var(--laiton);border-color:var(--laiton);color:var(--noir)}
@media(hover:hover) and (pointer:coarse){.plan-sombre .btn:hover{background:var(--blanc);color:var(--noir)}.plan-sombre .btn.solid:hover{background:var(--blanc);border-color:var(--blanc);color:var(--noir)}}
/* N°1 : le titre « Morlaix » seul est réuni avec le bloc adresse qui suit */
.mais-seul{padding-bottom:0}
.mais-seul + .adr{padding-top:24px}

/* ===== autres appartements : la carte survolée s'élargit (ordinateur à souris) ===== */
@media(hover:hover) and (min-width:801px){
  .oc-row{display:flex}
  .oc{flex:1 1 0;min-width:0;transition:flex-grow .8s var(--ease)}
  .oc:hover,.oc:focus-within{flex-grow:1.5}
  .oc-img{aspect-ratio:auto;height:clamp(240px,22vw,340px);position:relative}
  .oc-img img{position:absolute;inset:0 auto 0 50%;width:calc((100vw - 16px - 8px*(var(--n,3) - 1))*1.5/(var(--n,3) + .5));height:100%;translate:-50% 0}
  .oc-in{min-height:200px}
}
@media(prefers-reduced-motion:reduce){.oc{transition:none}}

/* ===== passage d'une page à l'autre (Safari 18.2+, Chrome 126+ ; ailleurs : navigation normale) =====
   Si le passage saccade sur le Mac de Will : supprimer SEULEMENT les deux règles root ci-dessous, la photo nommée reste. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-sortie .5s var(--ease-bascule) both;mix-blend-mode:normal}
  ::view-transition-new(root){animation:vt-entree .5s var(--ease-bascule) both;mix-blend-mode:normal}
  @keyframes vt-sortie{to{transform:translateY(-8vh)}}
  @keyframes vt-entree{from{transform:translateY(40%)}}
}

/* ===== téléphone : entre sections intérieures, 0,1 écran ===== */
@media(max-width:800px){
  .ap-intro,.gal,.eq,.mais,.adr,.others,.adrs,.appel,.ct-box{padding-top:calc(var(--vh)*.1)}
  .others,.appel{padding-bottom:calc(var(--vh)*.1)}
  .idees{margin-top:calc(var(--vh)*.1)}
}

/* ===== détail : texte accroché aux filets, équilibre des lignes, chiffres alignés, flèche du film ===== */
@media(max-width:800px){.grid i:nth-child(2),.grid i:nth-child(3){display:none}}
.h3,.section-title,.ct-title,.pan h3,.idee h3,.card h3,.oc h3,.title-fade,.ph-h{text-wrap:balance}
p,.eq-l li,.vw figcaption,.note,.q{text-wrap:pretty}
.stat b,.vw figcaption,.ph-m,.pr{font-variant-numeric:tabular-nums lining-nums}
.film b{display:inline-flex;align-items:center}
.film svg{width:10px;height:10px;display:block}

/* ===== mix 1a : arche d'ouverture de l'accueil (une fois par visite ; la classe « arche » est posée par le script du head) ===== */
.arche{display:none}
@media(prefers-reduced-motion:no-preference){
  html.arche-on .arche{display:block;position:fixed;inset:0;z-index:90;background:var(--anth);pointer-events:none;animation:arche-fin .01s linear 1.25s forwards}
  html.arche-on .arche-ph{position:absolute;inset:0;clip-path:inset(24% 42% 24% 42% round 999px 999px 0 0);animation:arche-ouvre 1.2s var(--ease-bascule) both}
  html.arche-on .arche-ph img{display:block;width:100%;height:100%;object-fit:cover;animation:arche-photo 1.2s var(--ease-bascule) both}
  html.arche-on .giant{animation-delay:.85s}
  html.arche-on .tag,html.arche-on .film{animation-delay:1.1s}
  html.arche-on .emblem{animation-delay:1.3s}
}
@media(max-width:800px){html.arche-on .arche-ph{clip-path:inset(18% 24% 18% 24% round 999px 999px 0 0)}}
@keyframes arche-ouvre{to{clip-path:inset(0 0 0 0 round 0 0 0 0)}}
@keyframes arche-photo{from{transform:scale(1.25)}to{transform:scale(1.02)}}
@keyframes arche-fin{to{visibility:hidden}}

/* ===== mix 1b : emblème, le logo N°9 dans un anneau de texte (ordinateur seulement, un tour en 40 s) ===== */
.emblem{display:none}
@media(min-width:1001px){
  .emblem{display:block;position:absolute;right:var(--pad);top:clamp(96px,15vh,150px);width:170px;height:170px;color:var(--blanc);pointer-events:none;animation:monte16 .9s var(--ease) 1s both}
  .emblem::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(13,13,13,.5) 0%,rgba(13,13,13,.4) 62%,rgba(13,13,13,0) 72%)}
  .emb-ring{position:absolute;inset:0;width:100%;height:100%;animation:emb-tour 40s linear infinite}
  html.hors-heros .emb-ring{animation-play-state:paused}
  .emb-ring text{fill:currentColor;font:500 8px "Archivo";font-stretch:75%;text-transform:uppercase}
  .emb-m{position:absolute;left:50%;top:50%;display:block;width:62px;translate:-50% -50%}
  .emb-m svg{display:block;width:100%;height:auto}
}
@keyframes emb-tour{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.emb-ring,.emblem{animation:none}}

/* ===== mix 2 : séquence « Le N°1 » (4 paliers). Repli par défaut = sans script / mouvement réduit : l'en-tête, puis les 4 photos l'une sous l'autre, légendes visibles ===== */
.seq{position:relative;margin-top:calc(var(--vh)*.12);background:var(--noir);color:var(--blanc)}
.seq-pin{display:flex;flex-direction:column}
.seq-ui{order:-1;padding:calc(var(--vh)*.12) var(--pad) 40px}
.seq-slides{display:flex;flex-direction:column;gap:8px;padding:0 8px 8px}
.seq-s{margin:0}
.seq-ph img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.seq-s figcaption{padding:12px var(--pad) 18px;font:400 13px/1.5 "Plex Mono";letter-spacing:.03em;color:var(--pierre-s)}
.seq-shade,.seq-count,.seq-fil,.seq-caps{display:none}
.seq-top{display:flex;align-items:center;gap:18px}
.seq-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 14px;background:var(--laiton);color:var(--noir);font:600 13px "Archivo"}
.seq-h{font:700 clamp(36px,5vw,80px)/.88 "Archivo";font-stretch:62%;text-transform:uppercase;margin:18px 0 22px;text-wrap:balance}
.seq-chiffres{font:400 14px/1.5 "Plex Mono";text-transform:uppercase;letter-spacing:.03em;color:var(--pierre-s)}
.seq-btn{display:inline-flex;align-items:center;min-height:48px;margin-top:22px;padding:0 24px;background:var(--laiton);border:1px solid var(--laiton);color:var(--noir);font:600 14px "Archivo"}
@media(hover:hover) and (pointer:coarse){.seq-btn:hover{background:var(--blanc);border-color:var(--blanc)}}
.seq :focus-visible{outline-color:var(--blanc);box-shadow:0 0 0 3px var(--noir)}
@media(max-width:800px){.seq-ph img{aspect-ratio:3/4}}
/* épinglée : la classe « seqp » est posée par le script (jamais en mouvement réduit) */
html.seqp .seq{height:calc(var(--vh)*(var(--n) + 1))}
html.seqp .seq-pin{position:sticky;top:0;height:var(--vh);display:block;overflow:hidden}
html.seqp .seq-slides{position:absolute;inset:0;display:block;padding:0}
html.seqp .seq-s{position:absolute;inset:0}
html.seqp .seq-s figcaption{display:none}
html.seqp .seq-ph{position:absolute;inset:0;transition:opacity .01s linear .65s}
html.seqp .seq-s .seq-ph{opacity:0}
html.seqp .seq-s.on .seq-ph{opacity:1;z-index:1;transition:opacity .65s var(--ease-bascule)}
html.seqp .seq-ph img{height:100%;aspect-ratio:auto;transform:scale(1.08);transition:transform 1.4s var(--ease)}
html.seqp .seq-s.on .seq-ph img{transform:scale(1)}
html.seqp .seq-shade{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(13,13,13,.84),rgba(13,13,13,.6) 34%,rgba(13,13,13,.1) 64%,rgba(13,13,13,.35))}
html.seqp .seq-ui{position:absolute;inset:0;z-index:2;order:0;padding:0 var(--pad) clamp(28px,6vh,64px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
html.seqp .seq-top{width:100%;margin-bottom:22px}
html.seqp .seq-count{display:grid;overflow:clip;min-width:7ch;font:400 13px/1.6 "Plex Mono";letter-spacing:.06em}
html.seqp .seq-count span{grid-area:1/1;visibility:hidden;translate:0 110%;transition:translate .6s var(--ease-masque),visibility 0s .6s}
html.seqp .seq-count span.on{visibility:visible;translate:0 0;transition-delay:.15s,.15s}
html.seqp .seq-fil{display:block;position:relative;flex:0 1 min(340px,45vw);height:2px;background:rgba(243,241,236,.38)}
html.seqp .seq-fil i{position:absolute;inset:0;background:var(--laiton);transform:scaleX(0);transform-origin:0 50%}
html.seqp .seq-h{margin:0 0 20px}
html.seqp .seq-caps{display:grid;overflow:clip;max-width:min(640px,100%);margin-bottom:18px;padding-bottom:.15em}
html.seqp .seq-caps p{grid-area:1/1;font:italic 300 clamp(20px,2vw,30px)/1.3 "Newsreader",serif;visibility:hidden;translate:0 110%;transition:translate .7s var(--ease-masque),visibility 0s .7s}
html.seqp .seq-caps p.on{visibility:visible;translate:0 0;transition-delay:.2s,.2s}
html.seqp .seq-chiffres{color:var(--blanc)}
@media(prefers-reduced-motion:reduce){html.seqp .seq-ph,html.seqp .seq-ph img,.seq-count span,.seq-caps p{transition:none}}

/* ===== mix 3 : index vertical des chapitres (ordinateur seulement) ===== */
.idx{display:none}
@media(min-width:1101px){
  /* index vertical de la 5 (Kinoria) : texte fin le long du bord gauche, sans fond ; lu de bas en haut */
  .idx{display:flex;flex-direction:row;gap:26px;writing-mode:vertical-rl;rotate:180deg;position:fixed;left:clamp(4px,.9vw,14px);top:50%;z-index:45;translate:-160% -50%;visibility:hidden;transition:translate .5s var(--ease-sortie),visibility 0s .5s}
  .idx.on,html:not(.js) .idx{translate:0 -50%;visibility:visible;transition:translate .6s var(--ease),visibility 0s}
  .idx a{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:44px;font:400 13px "Plex Mono";letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--pierre-s);transition:color .3s}
  .idx a b{font-weight:400}
  /* sur photo ou section sombre : tout en blanc, ombre légère pour les photos claires ; chapitre en cours souligné de laiton */
  .idx a:not(.c){color:var(--blanc);text-shadow:0 0 8px rgba(13,13,13,.75),0 0 2px rgba(13,13,13,.6)}
  .idx a[aria-current]{text-decoration:underline;text-decoration-color:var(--laiton);text-decoration-thickness:1px;text-underline-offset:7px}
  .idx a[aria-current] b{color:var(--laiton)}
  .idx a.c{color:var(--pierre)}
  .idx a.c[aria-current]{color:var(--noir);text-decoration-color:var(--laiton-f)}
  .idx a.c[aria-current] b{color:var(--laiton-f)}
  .idx :focus-visible{outline-color:var(--blanc);box-shadow:0 0 0 3px var(--noir)}
}
@media(min-width:1101px) and (hover:hover){.idx a:not(.c):hover{color:var(--blanc)}.idx a.c:hover{color:var(--noir)}}
@media(prefers-reduced-motion:reduce){.idx,.idx a{transition:none}}

/* ===== mix 4 : N°1, première photo de la galerie en pleine largeur et haute, avant la mosaïque ===== */
.gal-b.gal-une{display:block;height:min(92vh,1000px);aspect-ratio:auto;margin:calc(var(--vh)*.1) calc(var(--pad)*-1 + 8px) 0}
.gal-une + .gal-grid{margin-top:8px}
@media(max-width:800px){.gal-b.gal-fin{grid-column:span 2}}
@media(max-width:800px){.gal-b.gal-une{height:auto;aspect-ratio:3/4}}

/* accueil : le petit logo de l'en-tête fait doublon avec le grand tant que la barre n'est pas passée en clair */
html.js body[data-page="accueil"]:not(.light) .logo{visibility:hidden}

/* ===== système de boutons (09/11/2026) : principal = laiton plein, secondaire = contour ; flèche fine qui glisse au survol ===== */
.btn{gap:10px;min-height:48px;font-size:14px;transition:background-color .2s,color .2s,border-color .2s,transform .12s var(--ease)}
.btn .ico{flex:none;width:18px;height:18px;display:block;transition:transform .25s var(--ease)}
@media(hover:hover){.btn:hover .ico{transform:translateX(4px)}.btn.map:hover .ico,.film:hover .ico{transform:none}.film:hover .ico{transform:translateY(3px)}}
.btn:active,.film:active{transform:scale(.97)}
.btn.map .ico{width:18px}
.btn.clair{border-color:rgba(243,241,236,.85);color:var(--blanc);background:rgba(13,13,13,.28)}
@media(hover:hover) and (pointer:coarse){.btn.clair:hover{background:var(--blanc);border-color:var(--blanc);color:var(--noir)}}
.card a.btn{margin-top:10px;border:1px solid rgba(243,241,236,.85);padding:0 22px;font-size:14px}
@media(hover:hover){.card a.btn:hover{border-color:var(--blanc)}}
.seq-btn{gap:10px;margin-top:22px}
.seq-btn.btn.solid{color:var(--noir)}
@media(hover:hover) and (pointer:coarse){.seq-btn.btn.solid:hover{background:var(--blanc);border-color:var(--blanc);color:var(--noir)}}
/* héros : « Découvrir les appartements » en bouton secondaire clair */
.film{width:auto;gap:12px;justify-content:center;padding:0 22px;border:1px solid rgba(243,241,236,.85);background:rgba(13,13,13,.32);min-height:48px;font-size:14px;font-weight:600;transition:background-color .2s,color .2s,transform .12s var(--ease)}
.film svg{width:18px;height:18px}
@media(hover:hover) and (pointer:coarse){.film:hover{background:var(--blanc);color:var(--noir);text-shadow:none}}
/* cartes repliées (ordinateur) : repère « + » dans un cercle fin */
.card-k{display:flex;flex-direction:column;align-items:center;gap:10px}
.card-plus{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(243,241,236,.75);border-radius:50%;background:rgba(13,13,13,.3)}
.card-plus .ico{width:16px;height:16px}
.card.on .card-k{display:none}
@media(max-width:800px){.card-k{display:none}}
/* autres appartements : carte entière cliquable, bouton secondaire noir */
.oc{position:relative;cursor:pointer}
.oc-b{margin-top:10px;padding:0 22px}
.oc-b::after{content:"";position:absolute;inset:0;z-index:2}
/* voir sur la carte */
.btn.map{padding:0 22px}
/* galerie : icône « agrandir » visible sans survol */
.gal-i{position:absolute;right:10px;bottom:10px;z-index:2;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(13,13,13,.72);border:1px solid rgba(243,241,236,.55);color:var(--blanc);pointer-events:none}
.gal-i .ico{width:16px;height:16px}
.gal-hint{margin-top:14px;font-size:15px;color:var(--pierre)}
.gal-hint .gh-m{display:none}
@media(hover:hover) and (pointer:fine){.gal-hint .gh-t{display:none}.gal-hint .gh-m{display:inline}}
.gal-une + .gal-grid,.gal-hint + .gal-b{margin-top:0}
/* l'index vertical (bord gauche) ne recouvre plus le texte de la carte ouverte */
@media(min-width:1101px){.card .card-in{padding-left:84px}}
/* L3 contact : le formulaire est avant les coordonnées dans le HTML (téléphone) ; sur grand écran les coordonnées restent à gauche */
@media(min-width:801px){.ct-box .ct-l{order:-1}}
@media(max-width:800px){body.light .logo,body.light .menu-btn{text-shadow:none}}

/* ===== lot L5 : réserver ===== */
/* champ nombre : plus de flèches natives */
.form input[type=number]::-webkit-inner-spin-button,.form input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.form input[type=number]{-moz-appearance:textfield}
/* petits textes de service du formulaire : 14 px, couleur explicite */
.form .note{font-size:14px;color:var(--pierre)}
.plan-sombre .form .note{color:var(--pierre-s)}
/* bouton « Réserver le N°X » après la présentation */
.ap-book{margin-top:28px}
/* « Ou : par SMS · appeler Katy · copier ma demande » : seulement sur ordinateur */
.btns-alt{display:contents}.btns-ou,.t-lien{display:none}
@media(hover:hover) and (pointer:fine){
  .btns-alt{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin-left:10px}
  .btns-ou{display:inline;font-size:14px;color:var(--pierre)}
  .plan-sombre .btns-ou{color:var(--pierre-s)}
  .t-btn{display:none}.t-lien{display:inline}
  .form .btns-alt .btn,.plan-sombre .form .btns-alt .btn{flex:none;min-height:44px;padding:0 6px;border:0;background:transparent;color:inherit;font-weight:500;font-size:14px}
  .t-lien{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .btns-alt .btn+.btn::before{content:"\00b7";margin-right:12px;text-decoration:none;display:inline-block}
  .form .btns-alt .btn:hover,.plan-sombre .form .btns-alt .btn:hover{background:transparent;color:inherit}
  .btns-alt .btn:hover .t-lien{text-decoration-thickness:2px}
}
/* à partir de 1024 px, « Réserver » ne figure plus à gauche : le bouton laiton à droite et l'onglet restent */
@media(min-width:1024px){.bar-l .pill-book{display:none}}

/* ===== finition : survol des boutons (souris seulement) — un remplissage monte du bas, le texte ne change jamais de couleur ===== */
@media(hover:hover) and (pointer:fine){
  .btn:not(.btns-alt .btn),.seq-btn,.film{isolation:isolate;overflow:hidden}
  .btn:not(.btns-alt .btn),.seq-btn{position:relative}
  .btn,.seq-btn,.film{--rempl:#d6b680}
  .btn.solid{--rempl:#e8d5ad}
  .plan-sombre .btn,.nf .btn,.btn.clair,.film{--rempl:#7a5c2a}
  .plan-sombre .btn.solid,.seq-btn,.seq-btn.btn.solid{--rempl:var(--blanc)}
  .btn:not(.btns-alt .btn)::before,.seq-btn::before,.film::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rempl);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.76,0,.24,1);pointer-events:none}
  .btn:not(.btns-alt .btn):hover::before,.seq-btn:hover::before,.film:hover::before{transform:scaleY(1)}
  .film:hover{text-shadow:0 1px 3px rgba(13,13,13,.55)}
}
@media(prefers-reduced-motion:reduce){.btn::before,.btn:not(.btns-alt .btn)::before,.seq-btn::before,.film::before{transition:none}}

/* ===== lot L8 : lumière, matière et finitions ===== */
/* chiffres : filets laiton fins entre les colonnes (ordinateur) ou petit trait au-dessus (téléphone) */
.stat{position:relative}
@media(min-width:801px){.stat+.stat::before{content:"";position:absolute;left:-12px;top:10%;bottom:10%;width:1px;background:linear-gradient(to bottom,rgba(176,137,79,0),rgba(176,137,79,.7) 30%,rgba(176,137,79,.7) 70%,rgba(176,137,79,0))}}
@media(max-width:800px){.stat+.stat::before{content:"";position:absolute;left:50%;top:-14px;width:28px;height:1px;translate:-50% 0;background:rgba(176,137,79,.7)}}
/* aperçu de réservation sombre : chaleur laiton derrière le titre, par-dessus la lueur d'angle */
.plan-sombre{background:radial-gradient(min(520px,92%) 100px at 50% calc(var(--vh)*.3 + 14px),rgba(176,137,79,.12) 0%,rgba(176,137,79,0) 100%),radial-gradient(70% 60% at 15% 0%,rgba(176,137,79,.22),rgba(176,137,79,0) 70%),var(--anth)}
/* pied de page : filet laiton en haut, lueur douce à droite du logo */
.foot{border-top:1px solid var(--laiton);background:radial-gradient(60% 80% at 88% 14%,rgba(176,137,79,.09) 0%,rgba(176,137,79,0) 70%),var(--noir)}
/* même police fine, mêmes lignes de texte plus équilibrées */
.indent,.q,.h3{text-wrap:balance;hyphens:manual}
/* étiquette ovale : taille et graisse explicites */
.label,.label .lb{font-size:15px;font-weight:400}
/* fine bordure intérieure sur les photos claires */
.gal-b img,.oc-img img,.mais-p img{outline:1px solid rgba(13,13,13,.08);outline-offset:-1px}
/* boutons : mêmes propriétés animées, même durée (pas de transition en mouvement réduit) */
@media(prefers-reduced-motion:no-preference){.btn,.cta,.pill,.film,.seq-btn{transition-property:background-color,color,border-color,transform;transition-duration:.2s}}
/* retour du doigt sur les photos des cartes et de la galerie */
@media(hover:none) and (prefers-reduced-motion:no-preference){:is(.rv,body) .oc:active .oc-img img,:is(.rv,body) .gal-b:active img{transform:scale(1.04);transition-duration:.2s}}

/* ===== lot L9 : lisibilité sur photos et accessibilité ===== */
/* index vertical : voile sombre étroit au bord gauche (sans flou), plus ombre renforcée ; visible seulement quand le texte est blanc */
@media(min-width:1101px){
  .idx a{position:relative}
  .idx a::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-24px;bottom:-24px;left:-40px;right:calc(-1*clamp(4px,.9vw,14px));background:linear-gradient(to left,rgba(13,13,13,.64) 0,rgba(13,13,13,.64) 55%,rgba(13,13,13,0) 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);opacity:1;transition:opacity .4s}
  .idx a.c::before{opacity:0}
  .idx a:not(.c){text-shadow:0 0 8px rgba(13,13,13,.9),0 0 2px rgba(13,13,13,.85),0 1px 1px rgba(13,13,13,.7)}
}
@media(prefers-reduced-motion:reduce){.idx a::before{transition:none}}
/* région (accueil) : voile chaud, trait laiton sous chaque titre, dégradé sombre en pied de chaque panneau pour les paragraphes */
.pan{position:relative;isolation:isolate}
.pan::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-28px;right:-28px;bottom:-40px;height:calc(40% + 40px);background:linear-gradient(to bottom,rgba(13,13,13,0) 0,rgba(13,13,13,.6) 42%,rgba(13,13,13,.6) 80%,rgba(13,13,13,0) 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.pan h3::after{content:"";display:block;width:36px;height:1px;margin-top:8px;background:var(--laiton)}
/* ordinateur : les trois derniers panneaux tiennent à droite de l'index vertical (plus de ROSCOFF dessous en fin de course) */
@media(min-width:1101px){
  .camps-track{gap:4vw;padding:0 4vw 0 8vw}
  .pan{width:min(420px,26vw)}
}
/* rotation des cartes arrêtée après un tour : plus de fil de progression */
.flick.fini .card-t{display:none}
/* focus clavier : la carte entière est cernée (le lien d'une carte fermée est invisible) */
/* (le contour est dessiné sur le voile ::after, au-dessus de la photo : sur la carte elle-même, la photo le recouvrait) */
@media(min-width:801px){
  .card:focus-within::after{outline:2px solid var(--blanc);outline-offset:-8px}
  @supports selector(:has(*)){.card:focus-within::after{outline:0}.card:has(:focus-visible)::after{outline:2px solid var(--blanc);outline-offset:-8px}}
}

/* ===== lot du matin (10/11/2026) : au doigt (téléphone, tablette), rien n'est plus retenu ni déplacé image par image au défilement =====
   Condition (pointer:coarse) : la saccade vient du lancer du doigt, pas de la largeur ; elle couvre aussi le téléphone tourné (844 px)
   et la tablette, et laisse l'ordinateur tel quel à toutes les largeurs de fenêtre. */
/* séquence « Le N°1 » : galerie qu'on fait glisser, défilement du navigateur aimanté photo par photo, un bord de la suivante visible.
   La classe « seqc » est posée par le script (qui fait suivre compteur, filet et légende) ; sans script : photos empilées. */
html.seqc .seq{--peek:34px}
html.seqc .seq-pin{position:relative;display:block;height:var(--vh);min-height:520px;overflow:hidden}
html.seqc .seq-slides{position:absolute;inset:0;display:flex;flex-direction:row;gap:6px;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
html.seqc .seq-slides::-webkit-scrollbar{display:none}
html.seqc .seq-slides::after{content:"";flex:0 0 calc(var(--peek) - 6px)}
html.seqc .seq-s{position:relative;flex:0 0 calc(100% - var(--peek));scroll-snap-align:start;scroll-snap-stop:always}
html.seqc .seq-ph{position:absolute;inset:0}
html.seqc .seq-ph img{height:100%;aspect-ratio:auto}
html.seqc .seq-s figcaption{display:none}
html.seqc .seq-shade{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(13,13,13,.84),rgba(13,13,13,.6) 34%,rgba(13,13,13,.1) 64%,rgba(13,13,13,.35))}
html.seqc .seq-ui{position:absolute;inset:0;z-index:2;order:0;pointer-events:none;padding:0 var(--pad) clamp(28px,6vh,64px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
html.seqc .seq-btn{pointer-events:auto}
html.seqc .seq-top{width:100%;margin-bottom:22px}
html.seqc .seq-count{display:grid;min-width:7ch;font:400 13px/1.6 "Plex Mono";letter-spacing:.06em;white-space:nowrap}
html.seqc .seq-count span,html.seqc .seq-caps p{grid-area:1/1;visibility:hidden}
html.seqc .seq-count span.on,html.seqc .seq-caps p.on{visibility:visible}
html.seqc .seq-fil{display:block;position:relative;flex:0 1 min(340px,45vw);height:2px;background:rgba(243,241,236,.38)}
html.seqc .seq-fil i{position:absolute;inset:0;background:var(--laiton);transform:scaleX(calc(var(--k,1)/var(--n)));transform-origin:0 50%;transition:transform .35s var(--ease)}
html.seqc .seq-h{margin:0 0 20px}
html.seqc .seq-caps{display:grid;max-width:min(640px,100%);margin-bottom:18px;padding-bottom:.15em}
html.seqc .seq-caps p{font:italic 300 clamp(20px,2vw,30px)/1.3 "Newsreader",serif}
html.seqc .seq-chiffres{color:var(--blanc)}
html.seqc .seq-slides:focus-visible{outline-offset:-4px}
@media(prefers-reduced-motion:reduce){html.seqc .seq-fil i{transition:none}}
/* région : la piste devient une galerie qu'on fait glisser (CSS seul, avec ou sans script) ; plus de section retenue sur 3 écrans */
@media(pointer:coarse){
  .camps,html:not(.js) .camps,html.reduit .camps{height:auto}
  .camps-pin,html:not(.js) .camps-pin,html.reduit .camps-pin{position:relative;height:auto;min-height:var(--vh);overflow:hidden;padding:0;display:flex;flex-direction:column;justify-content:center;will-change:auto}
  .camps-track,html:not(.js) .camps-track,html.reduit .camps-track{position:relative;height:auto;flex-wrap:nowrap;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:calc(var(--vh)*.1) var(--pad);scroll-padding-inline:var(--pad);will-change:auto}
  .camps-track::-webkit-scrollbar{display:none}
  .camps-track::after{content:"";flex:0 0 1px}
  .camps-track>*{scroll-snap-align:start}
  .camps-track .ct-title{align-self:center}
  /* héros, haut des pages intérieures, volets de la région : l'effet reste (fonction du défilement, dans un bloc collé), mais ce que
     le script déplace a sa propre couche, pour que le téléphone ne redessine pas tout le bloc à chaque image */
  .giant,.ph,.ph-in,.idee img{will-change:transform}
}
/* ===== R1 (ordinateur) : index vertical en deux couches. L'index lui-même reste gris (le crème) ; sa copie blanche, avec le voile sombre
   du lot L9, est posée par-dessus et découpée par le script à la forme exacte des zones sombres : le voile ne déborde plus sur le crème ===== */
.idx-voile{position:fixed;inset:0;z-index:45;pointer-events:none;clip-path:inset(50%)}
.idx-voile .idx{position:absolute}
.idx-voile .idx a.f{outline:2px solid var(--blanc);outline-offset:3px;box-shadow:0 0 0 3px var(--noir)}
/* ===== téléphone (revue de 5 h) : sur le pied de page et sur le bloc « Réserver » sombre, la barre prend un fond plein de leur couleur.
   Ce qui défile dessous disparaît sous la barre : plus d'étoiles du pied mêlées au logo, plus de champ ni de bouton sous « Menu ». ===== */
@media(max-width:800px){
  body.bar-noir .bar::after{background:linear-gradient(180deg,var(--noir) 0%,var(--noir) calc(100% - 12px),rgba(13,13,13,0) 100%)}
  body.bar-anth .bar::after{background:linear-gradient(180deg,var(--anth) 0%,var(--anth) calc(100% - 12px),rgba(42,44,46,0) 100%)}
  /* vérificateur du 10/11 midi : sur le crème, le fondu commençait à 72 % de la barre (52 px) : le texte passait en clair sous le logo
     et le bas des boutons. Fond plein sur toute la hauteur de la barre, fondu court (16 px) en dessous ; bouton « Menu » opaque. */
  body.light .bar::before{inset:0 0 -16px 0;background:linear-gradient(180deg,var(--blanc) 0%,var(--blanc) calc(100% - 16px),rgba(243,241,236,0) 100%)}
  body.light:not(.menu-open) .menu-btn{background:var(--blanc)}
}

/* mentions légales : page de texte simple */
.legal{padding:150px var(--pad) 90px;max-width:62rem}
.legal-t{margin-bottom:56px}.legal-t .label{padding-left:0;margin-bottom:18px}
.legal-h{font:700 clamp(44px,9vw,110px)/1.02 "Archivo";font-stretch:62%;text-transform:uppercase;text-wrap:balance}
.legal-s{padding:30px 0;border-top:1px solid rgba(13,13,13,.14)}
.legal-s h2{font:400 clamp(24px,2.6vw,32px)/1.2 "Newsreader",serif;margin-bottom:14px}
.legal-s p,.legal-d dd{font-size:17px;line-height:1.65;max-width:46rem}.legal-s p+p{margin-top:12px}
.legal-d{display:grid;gap:10px;margin-top:16px}
.legal-d>div{display:grid;grid-template-columns:minmax(150px,14rem) 1fr;gap:4px 24px}
.legal-d dt{font:400 14px/1.6 "Plex Mono";letter-spacing:.04em;color:var(--pierre)}
.legal a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(13,13,13,.4)}
.legal-maj{margin-top:12px;padding-top:24px;border-top:1px solid rgba(13,13,13,.14);font:400 14px/1.6 "Plex Mono";color:var(--pierre)}
@media(max-width:800px){.legal{padding-top:120px}.legal-d>div{grid-template-columns:1fr}}
/* pied : lien « Mentions légales » sur la ligne du classement */
.foot-class{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px}
.foot-legal{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(243,241,236,.45)}
@media(hover:hover){.foot-legal:hover{color:var(--laiton)}}

/* transitions entre pages (générées) */
@media(prefers-reduced-motion:no-preference){
::view-transition-group(ap-1){animation-duration:.8s;animation-timing-function:var(--ease)}
::view-transition-old(ap-1){display:none}
::view-transition-new(ap-1){animation:none;height:100%;object-fit:cover}
::view-transition-group(ap-2){animation-duration:.8s;animation-timing-function:var(--ease)}
::view-transition-old(ap-2){display:none}
::view-transition-new(ap-2){animation:none;height:100%;object-fit:cover}
::view-transition-group(ap-3){animation-duration:.8s;animation-timing-function:var(--ease)}
::view-transition-old(ap-3){display:none}
::view-transition-new(ap-3){animation:none;height:100%;object-fit:cover}
::view-transition-group(ap-4){animation-duration:.8s;animation-timing-function:var(--ease)}
::view-transition-old(ap-4){display:none}
::view-transition-new(ap-4){animation:none;height:100%;object-fit:cover}
}