/* Le Fer Rouge, Colmar — feuille de style */

:root{
  --cream:#F4F0E7;
  --cream-2:#ECE6D9;
  --paper:#FBF8F2;
  --ink:#191510;
  --ink-soft:#5C5446;
  --ink-mute:#8A8172;
  --red:#A31B22;
  --red-deep:#7A1016;
  --dark:#14110C;
  --line:rgba(25,21,16,.16);
  --line-strong:rgba(25,21,16,.28);
  --serif:"Playfair Display", "Times New Roman", serif;
  --sans:"Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --nav:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--red); color:#fff}

.wrap{width:min(1280px,100% - 64px); margin-inline:auto}
@media (max-width:720px){.wrap{width:calc(100% - 40px)}}

/* ---------- typographie ---------- */
.surtitre{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 22px;
  display:flex; align-items:center; gap:14px;
}
.surtitre .num{
  font-family:var(--serif); font-size:13px; letter-spacing:.06em; color:var(--red);
  border:1px solid var(--red); border-radius:50%; width:34px; height:34px;
  display:grid; place-items:center; flex:0 0 auto;
}
.surtitre.light{color:rgba(255,255,255,.62)}
.surtitre.light .num{color:#E9C9A8; border-color:rgba(233,201,168,.5)}

h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.015em}
h2{font-size:clamp(34px,4.6vw,68px); line-height:1.06}
h3{font-size:clamp(23px,2.1vw,31px); line-height:1.14}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(19px,1.5vw,22px); line-height:1.6; font-weight:300}
.small{font-size:14px; color:var(--ink-soft); letter-spacing:.01em}
em.italic{font-style:italic}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
  font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red); border-color:var(--red); color:#fff}
.btn-red:hover{background:var(--red-deep); border-color:var(--red-deep)}
.btn-ghost{border-color:rgba(255,255,255,.55); color:#fff}
.btn-ghost:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn-outline{border-color:var(--line-strong)}
.btn-outline:hover{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.btn-light{background:var(--paper); border-color:var(--paper); color:var(--ink)}
.btn-light:hover{background:#fff; border-color:#fff}
.btn small{font-size:10px; letter-spacing:.12em; opacity:.7}

/* ---------- barre de progression + nav ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--red),#C9A227); z-index:120}

.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav); z-index:100;
  background:rgba(244,240,231,.92); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color .4s, box-shadow .4s;
}
.nav.is-scrolled{border-bottom-color:var(--line); box-shadow:0 12px 30px -26px rgba(0,0,0,.5)}
.nav-in{height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand-mark{
  width:34px; height:34px; border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center; font-family:var(--serif); font-size:15px; letter-spacing:.02em;
  padding-top:2px;
}
.brand-txt{font-family:var(--serif); font-size:19px; letter-spacing:.01em; line-height:1}
.brand-txt span{color:var(--red)}
.brand-sub{display:block; font-family:var(--sans); font-size:8.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-top:5px; font-weight:500}

.nav-links{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0}
.nav-links a{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ink-soft); position:relative; padding:6px 0; white-space:nowrap}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.nav-links a:hover,.nav-links a.is-active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-links .cond a{border:1px solid var(--line-strong); padding:8px 14px; color:var(--ink)}
.nav-links .cond a::after{display:none}
.nav-links .cond a:hover{border-color:var(--red); color:var(--red)}
.nav-cta{display:flex; align-items:center; gap:10px}
.nav-tel{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  background:var(--red); color:#fff; padding:12px 18px; transition:background .3s;
}
.nav-tel:hover{background:var(--red-deep)}
.burger{display:none; width:40px; height:40px; position:relative}
.burger span{position:absolute; left:8px; right:8px; height:1px; background:var(--ink); transition:transform .3s, opacity .3s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:29px}

@media (max-width:1080px){
  .nav-links{gap:18px}
  .nav-links li:not(.cond){display:none}
  .nav-tel{display:none}
  .burger{display:block}
}
@media (max-width:760px){
  .brand-txt{font-size:16px}
  .brand-sub{display:none}
  .nav-links{display:none}
  .nav-in{gap:12px}
}

/* menu mobile */
.mob{
  position:fixed; inset:var(--nav) 0 0; background:var(--cream); z-index:99;
  padding:40px 32px; display:flex; flex-direction:column; gap:6px;
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .35s, transform .35s;
  overflow-y:auto;
}
.mob.is-open{opacity:1; transform:none; pointer-events:auto}
.mob a{font-family:var(--serif); font-size:32px; padding:12px 0; border-bottom:1px solid var(--line)}
.mob .mob-tel{margin-top:26px; font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; border:0; background:var(--red); color:#fff; text-align:center; padding:16px}
.mob .mob-cond{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; border:0; padding:16px; text-align:center; border:1px solid var(--line-strong)}

/* ---------- ouverture ---------- */
.hero{position:relative; min-height:calc(100vh - var(--nav)); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; color:#fff; padding-top:calc(var(--nav) + 150px)}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease}
.hero-slide.is-on{opacity:1}
.hero-slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); animation:ken 26s ease-in-out infinite alternate}
.hero-slide:nth-child(2) img{animation-duration:30s}
.hero-slide:nth-child(3) img{animation-duration:28s}
@keyframes ken{from{transform:scale(1.02)} to{transform:scale(1.12)}}
.hero-veil{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(12,10,8,.40) 0%, rgba(12,10,8,.16) 30%, rgba(12,10,8,.55) 68%, rgba(12,10,8,.88) 100%),
  linear-gradient(90deg, rgba(12,10,8,.62) 0%, rgba(12,10,8,.28) 45%, rgba(12,10,8,.05) 75%);}
.hero-in{position:relative; z-index:2; margin-top:auto; padding-bottom:clamp(30px,5vh,54px)}
.hero .surtitre{color:rgba(255,255,255,.78); margin-bottom:26px}
.hero .surtitre::before{content:""; width:52px; height:1px; background:rgba(255,255,255,.5)}
.hero h1{
  font-size:clamp(56px,10.5vw,158px); line-height:.92; letter-spacing:-.03em;
  margin:0 0 26px; text-shadow:0 2px 24px rgba(0,0,0,.42), 0 24px 70px rgba(0,0,0,.35);
}
.hero h1 em{font-style:italic; color:#F1CFAC; text-shadow:0 18px 50px rgba(0,0,0,.35)}
.hero-line{
  font-family:var(--serif); font-size:clamp(20px,2.4vw,34px); line-height:1.28;
  max-width:22ch; margin:0 0 34px; color:rgba(255,255,255,.95); font-weight:400;
}
.hero-act{display:flex; gap:12px; flex-wrap:wrap}
.hero-foot{
  position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; gap:34px; padding:18px 0; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hero-foot .sep{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6}
.hero-foot .grow{flex:1}
.hero-pause{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); display:inline-flex; align-items:center; gap:8px}
.hero-pause:hover{color:#fff}
.hero-scroll{display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.8)}
.hero-scroll i{display:block; width:1px; height:26px; background:rgba(255,255,255,.5); animation:drop 2.4s infinite}
@keyframes drop{0%,100%{transform:scaleY(.4); opacity:.4}50%{transform:scaleY(1); opacity:1}}
@media (max-height:820px) and (min-width:721px){
  .hero h1{font-size:clamp(52px,7.4vw,104px); margin-bottom:20px}
  .hero-line{font-size:clamp(18px,1.9vw,26px); margin-bottom:26px; max-width:24ch}
  .hero-in{padding-bottom:28px}
  .hero .surtitre{margin-bottom:18px}
}
@media (max-width:720px){
  .hero{padding-top:calc(var(--nav) + 120px)}
  .hero-in{padding-bottom:26px}
  .hero h1{font-size:clamp(52px,15vw,76px)}
  .hero-line{font-size:20px; max-width:26ch}
  .hero-foot{gap:16px; font-size:9px}
  .hero-foot .grow{display:none}
}

/* ---------- sections ---------- */
.chap{padding:clamp(84px,9vw,148px) 0; position:relative}
.chap + .chap{border-top:1px solid var(--line)}
.chap-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:clamp(44px,5vw,74px)}
.chap-head h2{max-width:16ch}
.chap-head .aside{max-width:34ch; font-size:15px; color:var(--ink-soft); padding-bottom:8px}
@media (max-width:900px){.chap-head{flex-direction:column; align-items:flex-start; gap:24px}}

.duo{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,6vw,96px); align-items:start}
.duo.rev{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
@media (max-width:900px){.duo,.duo.rev{grid-template-columns:1fr; gap:38px}}

.prose{display:flex; flex-direction:column}
.prose p{color:var(--ink); font-size:17.5px; line-height:1.8}
.prose p + p{margin-top:1.05em}
.prose .drop{font-size:19px; line-height:1.7}

/* images avec cadre papier */
.figure{position:relative; margin:0}
.figure img{width:100%; height:auto}
.framed{background:var(--paper); padding:12px; box-shadow:0 28px 60px -42px rgba(25,21,16,.55)}
.framed figcaption{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); padding:12px 4px 2px}
.tilt{transform:rotate(-1.4deg)}
.tilt-r{transform:rotate(1.2deg)}

/* frise */
.frise{margin-top:clamp(48px,6vw,80px); position:relative; padding-top:28px}
.frise-line{position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); overflow:hidden}
.frise-line::after{content:""; position:absolute; inset:0; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform 1.6s var(--ease)}
.frise.is-in .frise-line::after{transform:scaleX(1)}
.frise-items{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px}
.frise-item{position:relative; padding-top:18px}
.frise-item::before{content:""; position:absolute; top:-6px; left:0; width:1px; height:12px; background:var(--line-strong)}
.frise-item b{font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; display:block; font-family:var(--serif); font-size:22px; font-weight:400; letter-spacing:0; margin-bottom:4px}
.frise-item span{display:block; font-size:12px; line-height:1.45; color:var(--ink-soft)}
@media (max-width:900px){
  .frise-items{grid-template-columns:repeat(3,1fr); gap:26px 16px}
}
@media (max-width:560px){.frise-items{grid-template-columns:repeat(2,1fr)}}

.citation{
  margin-top:auto; border-left:2px solid var(--red); padding:4px 0 4px 26px; margin:clamp(34px,4vw,52px) 0 0;
  font-family:var(--serif); font-size:clamp(20px,2vw,26px); line-height:1.4; font-style:italic;
}
.citation cite{display:block; font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:14px}

/* chiffres */
.chiffres{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:clamp(56px,6vw,90px); border:1px solid var(--line)}
.chiffre{background:var(--cream); padding:clamp(24px,3vw,38px) clamp(18px,2vw,28px)}
.chiffre b{font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; display:block; font-family:var(--serif); font-size:clamp(34px,3.6vw,54px); font-weight:400; line-height:1; letter-spacing:-.02em}
.chiffre b i{font-style:normal; color:var(--red)}
.chiffre span{display:block; margin-top:12px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
@media (max-width:760px){.chiffres{grid-template-columns:repeat(2,1fr)}}

/* ---------- la coupe ---------- */
.coupe-sect{background:var(--cream-2)}
.coupe{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(34px,5vw,70px); align-items:start}
@media (max-width:960px){.coupe{grid-template-columns:1fr}}

.coupe-fig{position:relative; display:flex; flex-direction:column; justify-content:flex-start}
.batiment{position:relative; display:flex; flex-direction:column}
.toit{
  height:78px; background:var(--ink); opacity:.93;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  position:relative;
}
.toit small{position:absolute; left:50%; top:58%; transform:translate(-50%,0); color:rgba(244,240,231,.78); font-size:9px; letter-spacing:.26em; text-transform:uppercase; z-index:2}
.etage{
  position:relative; display:grid; gap:1px; background:var(--line-strong);
  border-left:1px solid var(--line-strong); border-right:1px solid var(--line-strong);
}
.etage + .etage{border-top:1px solid var(--line-strong)}
.etage.rdc{grid-template-columns:1fr 1fr}
.etage .piece{
  position:relative; background:var(--cream-2); padding:22px 20px 24px; text-align:left;
  display:flex; flex-direction:column; gap:4px; min-height:112px;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.etage .piece:hover{background:#E3DBCB}
.piece .p-num{font-family:var(--serif); font-size:12px; color:var(--red); letter-spacing:.08em}
.piece .p-name{font-family:var(--serif); font-size:clamp(18px,1.6vw,24px); line-height:1.1}
.piece .p-was{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:auto; padding-top:10px}
.piece::after{content:""; position:absolute; left:20px; width:26px; bottom:0; height:1px; background:currentColor; opacity:.22; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.piece:hover::after,.piece[aria-selected="true"]::after{transform:scaleX(1)}
.piece[aria-selected="true"]{background:var(--ink); color:var(--cream)}
.piece[aria-selected="true"] .p-num{color:#E0B48C}
.piece[aria-selected="true"] .p-was{color:rgba(244,240,231,.58)}
.sol{
  border:1px solid var(--line-strong); border-top:0; padding:11px 20px; display:flex; justify-content:space-between; gap:14px;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
  background:repeating-linear-gradient(135deg, rgba(25,21,16,.05) 0 6px, transparent 6px 12px), var(--cream-2);
}
@media (max-width:520px){.sol span:last-child{display:none}}

.coupe-cap{margin:16px 0 0; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute)}
.coupe-panel{background:var(--paper); padding:clamp(18px,2.2vw,26px); display:flex; flex-direction:column; gap:18px; border:1px solid var(--line)}
.coupe-photo{position:relative; overflow:hidden; background:#DED6C6; flex:1 1 auto; min-height:240px}
.coupe-photo img{width:100%; height:100%; min-height:240px; object-fit:cover; transition:opacity .5s ease, transform 8s linear}
.coupe-photo.swap img{opacity:.2; transform:scale(1.03)}
.coupe-meta{padding:0 4px}
.coupe-meta .p-was{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:8px; display:block}
.coupe-meta h3{margin-bottom:10px; font-size:clamp(22px,2vw,28px)}
.coupe-meta p{font-size:14.5px; line-height:1.65; color:var(--ink-soft)}
.coupe-hint{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); border-top:1px solid var(--line); padding-top:12px; margin:0}

/* ---------- salles ---------- */
.salle-bloc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:center; padding:clamp(34px,4vw,56px) 0; border-top:1px solid var(--line)}
.salle-bloc:first-of-type{border-top:0}
.salle-bloc .txt h3{margin-bottom:14px}
.salle-bloc .txt .kicker{font-family:var(--serif); font-size:13px; color:var(--red); display:block; margin-bottom:10px; letter-spacing:.04em}
.salle-bloc.inv .figure{order:-1}
@media (max-width:900px){
  .salle-bloc{grid-template-columns:1fr; gap:26px}
  .salle-bloc.inv .figure{order:0}
}
.details{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(34px,4vw,54px)}
.details figure{margin:0}
.details img{aspect-ratio:1/1; object-fit:cover}
.details figcaption{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-top:10px}
@media (max-width:760px){.details{grid-template-columns:1fr 1fr}.details figure:last-child{grid-column:span 2}}

/* tableau des espaces */
.espaces{margin-top:clamp(50px,6vw,84px); border-top:1px solid var(--line-strong)}
.espaces-h,.espaces-r{display:grid; grid-template-columns:.9fr .7fr 1.9fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline}
.espaces-h{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute)}
.espaces-r b{font-family:var(--serif); font-size:21px; font-weight:400}
.espaces-r .niv{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.espaces-r p{font-size:15px; color:var(--ink-soft); margin:0}
@media (max-width:760px){
  .espaces-h{display:none}
  .espaces-r{grid-template-columns:1fr; gap:4px; padding:20px 0}
}

/* ---------- la carte ---------- */
.carte-sect{background:var(--ink); color:var(--cream)}
.carte-sect .rv-img{--curtain:var(--ink)}
.carte-sect .surtitre{color:rgba(255,255,255,.6)}
.carte-sect .surtitre .num{color:#E0B48C; border-color:rgba(224,180,140,.55)}
.carte-sect h2{color:var(--cream)}
.carte-sect .chap-head .aside{color:rgba(244,240,231,.65)}
.portes{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14)}
.porte{background:var(--ink); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column}
.porte h3{color:var(--cream); margin-bottom:6px}
.porte .p-desc{font-size:13.5px; color:rgba(244,240,231,.55); margin:0 0 24px; letter-spacing:.02em}
.porte ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.porte li{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid rgba(255,255,255,.12); font-size:15px; line-height:1.4}
.porte li b{font-weight:400}
.porte li span{font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; font-family:var(--serif); font-size:15px; color:#E0B48C; white-space:nowrap}
.porte li small{display:block; font-size:11.5px; color:rgba(244,240,231,.45); letter-spacing:.04em; margin-top:4px}
@media (max-width:900px){.portes{grid-template-columns:1fr}}
.carte-note{margin-top:34px; display:flex; gap:36px; flex-wrap:wrap; font-size:12px; letter-spacing:.06em; color:rgba(244,240,231,.6)}
.carte-note b{color:var(--cream); font-weight:500}

.carte-photos{display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:14px; margin-top:clamp(44px,5vw,64px)}
.carte-photos figure{margin:0; overflow:hidden}
.carte-photos img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/3.6}
.carte-photos figure:nth-child(1) img{aspect-ratio:3/3.6}
@media (max-width:760px){.carte-photos{grid-template-columns:1fr 1fr}.carte-photos figure:first-child{grid-column:span 2}}

/* bande défilante */
.band{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--cream); padding:16px 0}
.band-in{display:flex; gap:0; width:max-content; animation:slide 46s linear infinite}
.band:hover .band-in{animation-play-state:paused}
.band span{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); padding:0 26px; white-space:nowrap; display:inline-flex; align-items:center; gap:26px}
.band span::after{content:"✕"; font-size:9px; color:var(--red); letter-spacing:0}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- décembre ---------- */
.decembre{position:relative; overflow:hidden; color:var(--cream); padding:clamp(90px,10vw,150px) 0; background:var(--dark)}
.dec-bg{position:absolute; inset:-12% 0; z-index:0; will-change:transform}
.dec-bg img{width:100%; height:100%; object-fit:cover; object-position:center 42%}
.dec-veil{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,9,7,.82), rgba(10,9,7,.62) 42%, rgba(10,9,7,.94)),
  linear-gradient(90deg, rgba(10,9,7,.55), rgba(10,9,7,.15) 60%);}
.dec-in{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:clamp(30px,6vw,90px); align-items:center}
.dec-in h2{color:var(--cream); max-width:18ch; text-shadow:0 2px 26px rgba(0,0,0,.55)}
.dec-txt{background:rgba(14,12,9,.62); border:1px solid rgba(255,255,255,.14); padding:clamp(22px,2.6vw,34px); backdrop-filter:blur(3px)}
.dec-txt p{color:rgba(244,240,231,.86); font-size:17px}
.dec-list{list-style:none; margin:30px 0 0; padding:0; border-top:1px solid rgba(255,255,255,.18)}
.dec-list li{display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.22); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,240,231,.68)}
.dec-list li b{color:var(--cream); font-weight:500}
.dec-cap{position:relative; z-index:2; margin-top:40px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,240,231,.42)}
@media (max-width:900px){.dec-in{grid-template-columns:1fr; align-items:start}}

/* ---------- pratique ---------- */
.pratique-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:start}
@media (max-width:900px){.pratique-grid{grid-template-columns:1fr}}
.bloc{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:22px 0; border-top:1px solid var(--line)}
.bloc:first-child{border-top:0}
.bloc dt{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); padding-top:4px}
.bloc dd{margin:0; font-family:var(--serif); font-size:clamp(19px,1.8vw,25px); line-height:1.35}
.bloc dd a{border-bottom:1px solid var(--line-strong)}
.bloc dd a:hover{border-color:var(--red); color:var(--red)}
.bloc dd small{display:block; font-family:var(--sans); font-size:13px; letter-spacing:.02em; color:var(--ink-soft); margin-top:8px; line-height:1.6}
@media (max-width:560px){.bloc{grid-template-columns:1fr; gap:6px}}

.plan{background:var(--paper); border:1px solid var(--line); padding:clamp(22px,3vw,34px)}
.plan .adr{font-family:var(--serif); font-size:clamp(24px,2.4vw,34px); line-height:1.2; margin:0 0 6px}
.plan .ville{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.plan ul{list-style:none; margin:24px 0 0; padding:0; font-size:14px; color:var(--ink-soft)}
.plan ul li{padding:12px 0; border-top:1px solid var(--line); display:flex; gap:12px}
.plan ul li b{font-weight:500; color:var(--ink); min-width:74px; display:inline-block}
.plan .plan-link{margin-top:22px; display:inline-flex; font-size:11px; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid var(--red); padding-bottom:4px; color:var(--red)}

/* ---------- à propos ---------- */
.apropre{background:var(--dark); color:var(--cream); padding:clamp(60px,7vw,96px) 0}
.aprop-in{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(30px,5vw,70px); align-items:center}
.aprop-in h2{color:var(--cream); font-size:clamp(30px,3.6vw,52px); margin-bottom:20px; max-width:20ch}
.aprop-in p{color:rgba(244,240,231,.72); font-size:16px; max-width:52ch}
.aprop-line{font-size:11px !important; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,240,231,.5) !important; margin-top:18px}
.aprop-act{display:flex; justify-content:flex-end}
@media (max-width:900px){.aprop-in{grid-template-columns:1fr}.aprop-act{justify-content:flex-start}}

/* ---------- final ---------- */
.final{padding:clamp(96px,11vw,170px) 0 clamp(80px,9vw,130px); position:relative}
.final .wrap{position:relative}
.final .sur-t{font-family:var(--sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--red); margin-bottom:34px; display:block}
.final h2{font-size:clamp(34px,5.4vw,82px); line-height:1.03; max-width:20ch; margin-bottom:clamp(34px,4vw,52px)}
.final h2 em{font-style:italic; color:var(--red)}
.final-txt{max-width:62ch; font-size:clamp(17px,1.5vw,20px); line-height:1.78; color:var(--ink)}
.final-txt p + p{margin-top:1.2em}
.final-sign{margin-top:clamp(44px,5vw,66px); display:flex; align-items:center; gap:18px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute)}
.final-sign i{display:block; width:60px; height:1px; background:var(--red)}

/* ---------- pied ---------- */
.foot{background:var(--ink); color:rgba(244,240,231,.7); padding:clamp(60px,7vw,90px) 0 30px; font-size:14px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.foot h4{font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(244,240,231,.45); margin:0 0 18px; font-weight:600}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot a:hover{color:#fff}
.foot-brand .brand-txt{color:var(--cream); font-size:26px}
.foot-brand .brand-mark{width:40px;height:40px}
.foot-brand p{font-size:13.5px; color:rgba(244,240,231,.55); max-width:30ch; margin-top:16px}
.foot-base{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(44px,5vw,70px); padding-top:24px; border-top:1px solid rgba(255,255,255,.14); font-size:11px; letter-spacing:.08em; color:rgba(244,240,231,.45)}
.foot-base a{text-decoration:underline; text-underline-offset:3px}
.mentions{margin-top:26px; font-size:11px; line-height:1.7; color:rgba(244,240,231,.4); max-width:100ch}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr; gap:34px}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- révélations ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.is-in{opacity:1; transform:none}
.rv-img{position:relative; overflow:hidden; --curtain:var(--cream)}
.rv-img::after{
  content:""; position:absolute; inset:0; background:var(--curtain); z-index:2;
  transform:scaleY(1); transform-origin:bottom; transition:transform 1.1s var(--ease);
}
.rv-img.is-in::after{transform:scaleY(0)}
.rv-img img{transform:scale(1.06); transition:transform 1.6s var(--ease)}
.rv-img.is-in img{transform:scale(1)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.32s}.d4{transition-delay:.44s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv,.rv-img{opacity:1; transform:none}
  .rv-img::after{display:none}
  .hero-slide img{animation:none}
  .band-in{animation:none}
}