/* LANSON-BCC · page proposée · grammaire « typologie de maisons » */
:root{
  --paper:#f4f1ea; --paper-2:#ebe6db; --ink:#1f1c18; --muted:#6b655b; --line:#d8d1c3;
  --bordeaux:#842639; --bleu:#2d529a; --or:#b8955a; --nuit:#1b1716;
  --serif:"Headland One",Georgia,serif; --sans:"Work Sans",Arial,Helvetica,sans-serif;
  --gut:clamp(20px,4vw,56px); --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.caps{font:500 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.kicker{display:flex;align-items:center;gap:14px;color:var(--bordeaux)}
.kicker::before{content:"";width:34px;height:1px;background:currentColor}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;line-height:1.2}
h2{font-size:clamp(28px,3.6vw,46px);margin:18px 0 26px;max-width:22ch}
h3{font-size:22px}
.lead{font-size:19px;color:#3a352e;max-width:62ch}
p+p{margin-top:1em}
section{padding:clamp(84px,11vw,150px) 0;position:relative}

/* progression + nav */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--bordeaux),var(--or));z-index:60}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(244,241,234,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{max-width:1440px;margin:0 auto;padding:0 var(--gut);height:72px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.brand svg{width:20px;height:34px}
.brand b{font:400 17px/1 var(--serif);letter-spacing:.14em}
.nav ul{list-style:none;display:flex;gap:26px;margin-left:auto}
.nav ul a{text-decoration:none;font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#4a443b;padding:8px 0;position:relative;white-space:nowrap}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--bordeaux);transform:scaleX(0);transition:transform .35s}
.nav ul a:hover::after,.nav ul a.active::after{transform:scaleX(1)}
.nav ul a.active{color:var(--ink)}
.nav .cond{border:1px solid var(--bordeaux);border-radius:99px;padding:8px 14px;color:var(--bordeaux)}
.nav .cond::after{display:none}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:99px;padding:14px 24px;font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:transform .3s,background .3s,color .3s;white-space:nowrap;cursor:pointer;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--bordeaux)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-ghost{border-color:rgba(244,241,234,.7);color:var(--paper)}
.nav .btn{padding:11px 18px;font-size:11px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--ink);border-radius:99px;padding:10px 16px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
@media (max-width:1180px){
  .nav ul,.nav .btn{display:none}
  .menu-btn{display:inline-flex}
  .nav.open ul{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--paper);padding:18px var(--gut) 26px;gap:6px;border-bottom:1px solid var(--line)}
  .nav.open ul a{display:inline-block;padding:12px 0}
  .nav.open ul li.cta{display:block;margin-top:8px}
}
.nav ul li.cta{display:none}

/* ouverture : champ de vignettes */
.hero{min-height:100vh;padding:150px 0 90px;display:flex;align-items:center;overflow:hidden}
.field{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(18px,3vw,46px);padding:110px 4vw 40px;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 66% at 50% 54%,transparent 46%,rgba(0,0,0,.35) 62%,#000 82%);mask-image:radial-gradient(ellipse 60% 66% at 50% 54%,transparent 46%,rgba(0,0,0,.35) 62%,#000 82%)}
.field i{display:block;aspect-ratio:1;background-size:cover;background-position:center;opacity:0;transform:scale(.6);filter:saturate(.85);transition:opacity 1.2s,transform 1.2s cubic-bezier(.2,.7,.2,1);border-radius:2px}
.field i.t{background:var(--paper-2);display:grid;place-items:center;font:400 clamp(9px,1vw,13px)/1 var(--serif);color:var(--muted)}
.field.on i{opacity:.9;transform:scale(1)}
.field.on i:nth-child(3n){opacity:.55}
.field i{animation:float 14s ease-in-out infinite alternate}
@keyframes float{to{translate:0 -10px}}
.hero-in{position:relative;text-align:center;max-width:920px;margin:0 auto;padding:0 var(--gut)}
.hero-in::before{content:"";position:absolute;inset:-60px -40px;background:radial-gradient(closest-side,rgba(244,241,234,.96),rgba(244,241,234,.85) 70%,rgba(244,241,234,0));z-index:-1}
.hero .line{display:flex;justify-content:center;gap:clamp(18px,4vw,60px);flex-wrap:wrap;color:#3a352e}
.hero h1{font-size:clamp(28px,3.5vw,50px);margin:30px auto 24px;max-width:25ch}
.hero h1 em{font-style:normal;color:var(--bordeaux);background:linear-gradient(100deg,var(--bordeaux) 40%,var(--or) 50%,var(--bordeaux) 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,30%{background-position:100% 0}70%,100%{background-position:0 0}}
.hero .lead{margin:0 auto;text-align:center}
.hero .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.reperes{display:flex;justify-content:center;gap:clamp(18px,4vw,54px);flex-wrap:wrap;margin-top:46px;color:var(--muted)}
.reperes b{font:400 22px/1 var(--serif);color:var(--ink);display:block;margin-bottom:6px;letter-spacing:0;text-transform:none}
.seq>*{opacity:0;transform:translateY(16px);transition:opacity .9s,transform .9s}
.seq.on>*{opacity:1;transform:none}
.seq.on>*:nth-child(2){transition-delay:.15s}.seq.on>*:nth-child(3){transition-delay:.3s}.seq.on>*:nth-child(4){transition-delay:.45s}.seq.on>*:nth-child(5){transition-delay:.6s}
@media (max-height:820px){.hero h1{font-size:clamp(26px,3vw,42px);margin:22px auto 18px}.reperes{margin-top:26px}.hero .btns{margin-top:24px}}
@media (max-width:760px){.field{bottom:auto;grid-template-columns:repeat(5,1fr);gap:8px;padding:86px 16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.field i:nth-child(n+11){display:none}.hero{padding-top:250px;align-items:flex-start}.hero-in::before{display:none}}

/* bande photo */
.band{height:min(78vh,720px);overflow:hidden;position:relative;background:var(--nuit)}
.band img{width:100%;height:118%;object-fit:cover;animation:breathe 22s ease-in-out infinite alternate;will-change:transform}
@keyframes breathe{from{scale:1.02}to{scale:1.1}}
.band figcaption{position:absolute;left:var(--gut);bottom:28px;color:#f4f1ea;text-shadow:0 1px 12px rgba(0,0,0,.6)}

/* maisons */
.grid-maisons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px) clamp(20px,3vw,40px);margin-top:64px}
.maison{transition:transform .5s}
.maison .pic{aspect-ratio:1;overflow:hidden;background:var(--paper-2);border-radius:2px;position:relative}
.maison .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.9)}
.maison:hover{transform:translateY(-6px)}
.maison:hover .pic img{transform:scale(1.06);filter:saturate(1)}
.maison .typo{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:26px;background:linear-gradient(160deg,#efe9dd,#e4ddcf)}
.maison .typo span{font:400 clamp(54px,7vw,92px)/1 var(--serif);color:rgba(132,38,57,.18)}
.maison .typo strong{font:400 22px/1.25 var(--serif);font-weight:400}
.maison .meta{margin:18px 0 6px;color:var(--bordeaux);display:flex;gap:12px;flex-wrap:wrap}
.maison h3{margin-bottom:8px}
.maison p{font-size:15.5px;line-height:1.6;color:#3f3a33}
.maison .sig{margin-top:10px;font-size:13px;color:var(--muted)}
.maison.new .pic::after{content:"Entrée en 2026";position:absolute;top:14px;left:14px;font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;background:var(--bordeaux);color:#f4f1ea;padding:8px 10px;border-radius:99px}
.maison.lit{transform:translateY(-6px)}
.maison.dim{opacity:.32;filter:grayscale(1)}
.maison{transition:transform .5s,opacity .5s,filter .5s}

/* clientèles */
.clients{background:var(--paper-2)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 34px}
.chip{border:1px solid var(--ink);background:transparent;border-radius:99px;padding:11px 18px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink);transition:background .3s,color .3s}
.chip[aria-pressed="true"],.chip:hover{background:var(--ink);color:var(--paper)}
.assemblage{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.assemblage>*{min-width:0}
.cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cell{aspect-ratio:1.25;border:1px solid var(--line);background:var(--paper);padding:14px;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s,color .5s,border-color .5s,transform .5s}
.cell b{font:400 15px/1.25 var(--serif);font-weight:400;overflow-wrap:anywhere}
.cell small{font:500 10.5px/1 var(--sans);letter-spacing:.2em;color:var(--muted)}
.cell.on{background:var(--bordeaux);border-color:var(--bordeaux);color:#f6efe6;transform:translateY(-3px)}
.cell.on small{color:rgba(246,239,230,.75)}
.fiche{border-top:1px solid var(--ink);padding-top:22px}
.fiche h3{margin:10px 0 14px}
.fiche p{font-size:16px;color:#3a352e}
.fiche ul{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
.fiche li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.fiche li b{font-weight:500}
.split{margin-top:70px}
.split .bar{display:flex;height:46px;border-radius:2px;overflow:hidden;margin:16px 0 10px}
.split .bar span{display:flex;align-items:center;padding:0 16px;color:#f6efe6;font:500 12px/1 var(--sans);letter-spacing:.12em;width:0;transition:width 1.6s cubic-bezier(.2,.7,.2,1);white-space:nowrap;overflow:hidden}
.split .bar span:first-child{background:var(--bleu)}
.split .bar span:last-child{background:var(--bordeaux)}
.split .note{font-size:13.5px;color:var(--muted)}

/* histoire */
.frise{position:relative;margin-top:60px;padding-top:30px}
.frise .rail{position:relative;height:1px;background:var(--line)}
.frise .rail::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.frise.on .rail::after{transform:scaleX(1)}
.frise .dot{position:absolute;top:-6px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);transform:translateX(-50%) scale(0);transition:transform .6s}
.frise.on .dot{transform:translateX(-50%) scale(1)}
.frise .dot.b{background:var(--bordeaux);border-color:var(--bordeaux)}
.frise .lab{position:absolute;top:22px;transform:translateX(-50%);text-align:center;width:120px}
.frise .lab.up{top:auto;bottom:22px}
.frise .lab b{display:block;font:400 18px/1 var(--serif);font-weight:400}
.frise .lab span{font-size:12px;line-height:1.35;color:var(--muted);display:block;margin-top:5px}
.frise-maisons{height:270px}
.frise-maisons .rail{top:140px}
.frise .lab.up2{bottom:84px}
.frise .lab.up2::after{content:"";position:absolute;left:50%;bottom:-62px;height:58px;border-left:1px dotted var(--muted)}
.histoire-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);margin-top:90px;align-items:start}
.etapes{list-style:none;border-top:1px solid var(--ink)}
.etapes li{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-10px);transition:opacity .7s,transform .7s}
.etapes.on li{opacity:1;transform:none}
.etapes b{font:400 18px/1.3 var(--serif);font-weight:400;color:var(--bordeaux)}
.etapes span{font-size:15.5px}
.archive{position:sticky;top:110px}
.archive .frame{overflow:hidden;border-radius:2px}
.archive img{width:100%;filter:grayscale(.2) sepia(.15)}
.archive figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.frise-maisons{display:none}.frise-list{display:grid!important}}
.frise-list{display:none;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.frise-list div{border-top:1px solid var(--ink);padding-top:10px}
.frise-list b{font:400 20px/1 var(--serif);font-weight:400;display:block;color:var(--bordeaux)}
.frise-list span{font-size:13px;color:#3f3a33}

/* familles */
.familles .duo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3vw,36px);margin-top:60px;align-items:end}
.duo figure{overflow:hidden;border-radius:2px}
.duo figure:nth-child(2){transform:rotate(1.2deg);box-shadow:0 30px 60px -30px rgba(31,28,24,.45)}
.duo img{width:100%;height:100%;object-fit:cover}
.duo figcaption{font-size:12.5px;color:var(--muted);padding-top:8px}
.familles .txt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);margin-top:70px}
.capital{margin-top:12px}
.capital .bar{display:flex;height:22px;margin:18px 0 16px;background:var(--line)}
.capital .bar i{display:block;height:100%;width:0;transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.capital ul{list-style:none;font-size:14.5px}
.capital li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.capital li em{font-style:normal;display:inline-block;width:10px;height:10px;margin-right:10px;vertical-align:1px}
.capital .src{font-size:12.5px;color:var(--muted);margin-top:10px}

/* temps long */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:60px 0 70px}
.chiffres div{background:var(--paper);padding:30px 24px;position:relative;overflow:hidden}
.chiffres div::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(184,149,90,.18),transparent);animation:reflet 6s ease-in-out infinite}
.chiffres div:nth-child(2)::after{animation-delay:1.5s}.chiffres div:nth-child(3)::after{animation-delay:3s}.chiffres div:nth-child(4)::after{animation-delay:4.5s}
@keyframes reflet{0%,60%{left:-60%}100%{left:130%}}
.chiffres b{display:block;font:400 clamp(30px,3.4vw,44px)/1 var(--serif);font-weight:400;color:var(--ink)}
.chiffres span{display:block;margin-top:12px;font-size:14px;color:var(--muted);line-height:1.45}
.long{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px)}
blockquote{font:400 clamp(21px,2.2vw,27px)/1.45 var(--serif);border-left:2px solid var(--bordeaux);padding-left:24px}
blockquote cite{display:block;margin-top:14px;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.prix{list-style:none;border-top:1px solid var(--ink)}
.prix li{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.prix li b{font-weight:500;white-space:nowrap}

/* ce qui s'ouvre */
.ouvre{background:var(--nuit);color:#efe8dc}
.ouvre .kicker{color:var(--or)}
.ouvre h2{color:#f4f1ea}
.ouvre .txt{font:400 clamp(19px,1.9vw,23px)/1.7 var(--serif);max-width:44ch;color:#e6ddcf}
.ouvre .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:start}
.ouvre .q{margin-top:28px;padding-top:24px;border-top:1px solid rgba(239,232,220,.25);color:#f4f1ea}

/* à propos */
.apropos{background:#2a2321;color:#efe8dc;padding:clamp(64px,8vw,104px) 0}
.apropos .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.apropos h2{color:#f4f1ea;margin:14px 0 14px}
.apropos p{max-width:60ch;color:#d8cfc1}
.apropos .kicker{color:var(--or)}
.apropos small{display:block;margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a99c8b;text-align:center}

/* appel final */
.final{min-height:76vh;display:flex;align-items:center;color:#f4f1ea;overflow:hidden;padding:120px 0}
.final>img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;animation:breathe 24s ease-in-out infinite alternate}
.final::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,15,14,.82),rgba(20,15,14,.45) 70%,rgba(20,15,14,.25));z-index:1}
.final .wrap{position:relative;z-index:2;width:100%}
.final .panel{max-width:620px;background:rgba(27,23,22,.62);backdrop-filter:blur(6px);padding:clamp(28px,4vw,48px);border-radius:4px}
.final h2{color:#f4f1ea}
.final p{color:rgba(244,241,234,.88)}
.final .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.final .kicker{color:#e8d3a8}

/* pied */
footer{background:var(--paper);border-top:1px solid var(--line);padding:70px 0 40px;font-size:14.5px}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.foot h4{font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bordeaux);margin-bottom:16px}
.foot ul{list-style:none}
.foot li{padding:3px 0}
.foot a{text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{border-color:var(--bordeaux)}
.sante{margin-top:46px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.signe{margin-top:16px;font-size:13px;color:var(--muted)}
.signe a{color:var(--ink)}
.droits{margin-top:14px;font-size:12px;line-height:1.6;color:#8b8478;max-width:110ch}

/* apparitions */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
.reveal-img{clip-path:inset(12% 8% 12% 8%);transition:clip-path 1.4s cubic-bezier(.2,.7,.2,1)}
.reveal-img.on{clip-path:inset(0 0 0 0)}

.pause{opacity:0;pointer-events:none;transition:opacity .4s;position:fixed;right:18px;bottom:18px;z-index:55;background:rgba(244,241,234,.9);border:1px solid var(--line);border-radius:99px;padding:9px 14px;font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}

@media (max-width:1000px){
  .grid-maisons{grid-template-columns:repeat(2,1fr)}
  .assemblage,.histoire-grid,.familles .txt,.long,.ouvre .wrap,.apropos .wrap{grid-template-columns:1fr}
  .archive{position:static}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .grid-maisons{grid-template-columns:1fr}
  .familles .duo{grid-template-columns:1fr}
  .duo figure:nth-child(2){transform:none}
  .cells{grid-template-columns:repeat(3,1fr);gap:6px}
  .cell{padding:9px;aspect-ratio:1}
  .cell b{font-size:12.5px}
  .chiffres{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .frise-list{grid-template-columns:repeat(2,1fr)}
  .etapes li{grid-template-columns:70px 1fr}
  .hero .line{flex-direction:column;gap:6px}
  .band{height:56vh}
  .brand b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.seq>*,.field i,.etapes li{opacity:1!important;transform:none!important}
  .reveal-img{clip-path:none!important}
  .frise .rail::after,.frise .dot{transform:none!important}
  .frise .dot{transform:translateX(-50%)!important}
}

.past .pause{opacity:1;pointer-events:auto}