/* APLOMB : socle commun, chargé après le style de chaque page.
   Trois niveaux de titre, la gravité comme mouvement (tout tombe et se pose), des angles tirés au cordeau. */

:root{
  --f-titre:'Cabinet Grotesk','Familjen Grotesk',system-ui,sans-serif;
  --f-texte:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-cote:'DM Mono',ui-monospace,monospace;
  --copper:#b25a34;            /* 4,8:1 sous du texte blanc (l'ancien #c96f47 restait à 3,6:1) */
  --cuivre-texte:#9a4c2b;      /* 5:1 sur les fonds clairs, y compris le dégradé de la coupe */
  --copper-deep:#9a4c2b;
  --soft:#6f6e74;              /* texte discret sur fond clair, 4,9:1 */
  --soft-sombre:#a3a1a8;       /* le même rôle sur fond sombre */
  --r:6px;
  --pose:cubic-bezier(.2,.8,.2,1);
  --chute:cubic-bezier(.3,1.3,.5,1);
}
/* une chute : accélération, contact, léger rebond, repos */
@supports (transition-timing-function:linear(0,1)){
  :root{--chute:linear(0,.05 8%,.2 17%,.46 26%,.83 35%,1 39%,1.035 45%,1.045 50%,1.03 57%,1 66%,.993 76%,1 100%)}
}

html{scrollbar-color:#a5532f #e9e5de;scrollbar-width:thin}
body{font-family:var(--f-texte);line-height:1.55;font-synthesis:none;caret-color:var(--cuivre-texte)}
:focus-visible{outline:2px solid var(--cuivre-texte);outline-offset:3px;border-radius:3px}
header.top :focus-visible,.hero :focus-visible,.bl :focus-visible,.ta :focus-visible,#realisations :focus-visible,
.cta-band :focus-visible,footer :focus-visible,.temoin :focus-visible,.side :focus-visible,#mobileMenu :focus-visible{outline-color:#f0b08a}

/* ---------- typographie : affiche, énoncé, intertitre, cote ---------- */
h1,h2,h3,h4,.h-display,.bl-h{font-family:var(--f-titre)}
.h-display,.bl-h{font-weight:800;letter-spacing:-.035em;line-height:.95;text-transform:none}
.intro h2,.projets h2,.engage h2,.temoin h2,.side h2{font-weight:500;letter-spacing:-.028em;line-height:1.03}
.intro h2 em{font-style:normal;font-weight:800;color:var(--cuivre-texte)}
.ta-a h3,.proj h2,.p-card .cap b,.lx-fiche h3{font-family:var(--f-titre);font-weight:700;letter-spacing:-.015em;text-transform:none}
.mono,.hero .plomb-read{font-family:var(--f-cote);font-size:12px;letter-spacing:.09em}
.lx-read span,.ta-read span{font-family:var(--f-titre);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bl-read b{font-family:var(--f-cote)}

.btn{font-family:var(--f-texte);border-radius:var(--r);letter-spacing:0;transition:background .25s,border-color .25s,transform .35s var(--chute),box-shadow .3s}
.btn:hover{background:#96492a;border-color:#96492a}
.btn-ghost:hover{background:rgba(29,29,33,.06);border-color:rgba(29,29,33,.5)}
.btn-dark-ghost:hover{background:rgba(243,241,236,.1);border-color:rgba(243,241,236,.6)}
.btn:active{transform:translateY(2px)}

.img-slot figcaption{color:#4f463e;letter-spacing:.02em}
/* un fil de cuivre ne luit pas : seule la ligne laser du calepinage garde son halo */
.bl-wire,.ta-cursor{box-shadow:none}
.lx-svg polyline{filter:none}

/* ---------- menu : il s'efface en descendant, revient en remontant ---------- */
header.top{transition:transform .55s var(--pose)}
header.top .bar{transition:none}
header.top.scrolled .bar{max-width:1360px}
header.top.cachee{transform:translateY(calc(-100% - 24px))}
header.top nav{height:60px;border-radius:var(--r);background:rgba(29,29,33,.9)}
.navlinks a{position:relative;color:#d4d2d7;padding:6px 0}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#e89a6e;transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--pose)}
.navlinks a:hover::after,.navlinks a[aria-current]::after{transform:scaleX(1)}
#mobileMenu{top:84px;border-radius:var(--r)}

/* ---------- apparitions : on tombe d'en haut et on se pose ---------- */
.js .rv{transform:translateY(-22px);transition:opacity .45s ease-out,transform .95s var(--chute)}
.tombe .mo{display:inline-block;overflow:clip;vertical-align:top;padding:.14em 0 .2em;margin:-.14em 0 -.2em}
.tombe .mo>span{display:inline-block;transform:translateY(-120%);transition:transform 1.05s var(--chute);transition-delay:calc(var(--l,0)*85ms)}
.tombe.in .mo>span{transform:none}
@media(prefers-reduced-motion:reduce){.tombe .mo>span{transform:none}}

/* ---------- le fil du chantier, dans la marge : il descend avec la page et balance quand on défile ---------- */
.fil{position:fixed;left:24px;top:0;z-index:55;width:0;height:var(--h,110px);transform-origin:50% 0;transform:rotate(var(--a,0deg));pointer-events:none;opacity:0;transition:opacity .5s}
.fil.vu{opacity:1}
.fil i{position:absolute;left:-.5px;top:0;width:1px;height:100%;background:linear-gradient(rgba(201,111,71,0),#c96f47 90px)}
.fil svg{position:absolute;left:-7px;top:100%;width:14px;height:30px;filter:drop-shadow(0 6px 8px rgba(29,29,33,.25))}
@media(max-width:1099px){.fil{display:none}}

/* ---------- accueil ---------- */
.hero h1{font-size:clamp(2.7rem,11.5vw,6rem);max-width:9ch;line-height:.92}
.hero h1 .w{padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.hero h1 .w>span{transform:translateY(-122%)}
.js.words-in .hero h1 .w>span{transition:transform 1.15s var(--chute)}
.hero p.lead{max-width:46ch;line-height:1.5}
.hero .scroll-cue{font-family:var(--f-cote)}

.intro h2{font-size:clamp(2rem,4.6vw,3.7rem);max-width:20ch}
.intro p{line-height:1.6}

/* les scènes épinglées : plus courtes, le titre en affiche */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  .bl{height:250vh}.cp{height:185vh}.lx{height:390vh}.ta{height:290vh}
}
.bl-h{font-size:clamp(2.2rem,4.8vw,4.3rem)}
.bl-copy{max-width:min(640px,86vw)}
.bl-p{line-height:1.5}
.bl-tag{border-radius:var(--r);background:rgba(29,29,33,.78)}

/* la coupe de l'appartement porte les quatre lots : une fiche par lot, qui tombe à son tour */
.lx-copy{max-width:min(470px,86vw)}
.lx-copy .bl-h{font-size:clamp(1.9rem,3.3vw,3.1rem)}
.lx-zone{display:grid;gap:22px;margin-top:20px}
.lx-p{margin-top:0;line-height:1.5}
.lx-fiche{display:grid;grid-template-columns:112px 1fr;gap:18px;align-items:start}
.lx-fiche figure{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#e3ded6;box-shadow:0 18px 30px -22px rgba(29,29,33,.5)}
.lx-fiche img{width:100%;height:100%;object-fit:cover}
.lx-fiche h3{font-size:1.5rem;line-height:1.05}
.lx-fiche p{margin-top:6px;color:var(--muted);font-size:.95rem;line-height:1.5}
.lx-fin{grid-template-columns:1fr}
.lx-anime .lx-zone>*{grid-area:1/1;opacity:0;transform:translateY(-18px);pointer-events:none;transition:opacity .22s ease,transform .01s linear .22s}
.lx-anime .lx-zone>.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .35s ease .14s,transform .85s var(--chute) .14s}
.lx-pin span{border-radius:var(--r);background:rgba(255,255,255,.9)}
.lx-read span{font-size:clamp(2.6rem,5.4vw,4.6rem);min-width:3.1ch}
.lx-read b{font-family:var(--f-cote)}
@media(prefers-reduced-motion:reduce){
  /* sans mouvement : la scène devient une page, les quatre fiches se lisent d'un trait */
  .lx-stage{display:flex;flex-direction:column;height:auto;overflow:visible;padding:110px 0 60px}
  .lx-copy{position:relative;left:auto;top:auto;max-width:none;padding:0 clamp(20px,4vw,56px)}
  .lx-zone{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:1100px}
  .lx-frame{position:relative;right:auto;top:auto;transform:none;width:100%;margin-top:30px}
  .lx-read{position:relative;left:auto;bottom:auto;padding:0 clamp(20px,4vw,56px)}
}

@media(prefers-reduced-motion:reduce){
  /* même principe pour la méthode : les trois temps puis le planning, sans superposition */
  .ta-stage{display:flex;flex-direction:column;gap:36px;padding:120px clamp(20px,4vw,56px) 70px;overflow:visible}
  .ta-copy,.ta-read,.ta-chart{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}
  .ta-read{justify-items:start;text-align:left}
  .ta-chart{height:320px}
}

/* la méthode */
.ta-copy h2{font-size:clamp(2rem,4vw,3.6rem)}
.ta-a .num{display:none}
.ta-a h3{margin-top:0}
.ta-a p{line-height:1.5}
.ta-read b{font-family:var(--f-cote);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.ta-scale span,.ta-bar em{font-size:12px}
.ta-scale span,.ta-lane{font-family:var(--f-cote)}
.ta-lane{letter-spacing:.02em}
.cp-foot .mono{text-transform:none;letter-spacing:.02em;font-size:13px}
.ta-bar{border-radius:3px}

/* les réalisations : pleine largeur, dans la continuité sombre de la méthode */
#realisations{background:var(--dark-2);padding:clamp(60px,9vh,120px) 0 clamp(80px,11vh,140px)!important}
#realisations>.wrap{max-width:none;padding:0}
.projets{background:none;border-radius:0;padding:0;overflow:visible}
.projets h2{font-size:clamp(2rem,4.4vw,3.6rem);max-width:17ch}
.projets .ctrl button{transition:background .25s,border-color .25s,transform .35s var(--chute)}
.projets .ctrl button:active{transform:translateY(2px)}
.p-card{border-radius:var(--r);clip-path:inset(0 0 0 0 round 6px)}
.p-card .cap b{font-size:1.5rem}
.p-card .cap span{font-size:.9rem;color:rgba(255,255,255,.86)}

/* l'engagement */
.engage h2{font-size:clamp(2rem,4.2vw,3.4rem);max-width:15ch}
.engage .checks{gap:0;margin-top:30px}
.engage .checks li{padding:14px 0;border-top:1px solid var(--line);font-size:1rem}
.engage .checks li:last-child{border-bottom:1px solid var(--line)}
.engage .checks svg{color:var(--cuivre-texte)}
.engage .pour{margin-top:22px;color:var(--muted);font-size:.95rem;max-width:54ch}

/* la fin : le fil se pose sur l'invitation */
.cta-band{border-radius:var(--r)}
.cta-band .inner{flex-direction:column;align-items:flex-start;gap:30px;position:relative;z-index:1}
.cta-band .jalons{right:clamp(18px,6vw,96px)}
.cta-band h2{font-size:clamp(2.4rem,6vw,5rem);max-width:11ch}
.cta-band p{color:#fff;max-width:40ch}
.cta-band .btn{border-radius:var(--r)}
.cta-band .btn:hover{background:#ffe9db;border-color:#ffe9db}

footer .foot-cols h3{font-family:var(--f-cote);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--soft-sombre);margin-bottom:14px}
footer .foot-base{color:var(--soft-sombre);font-size:.82rem}
.foot-mark text{font-family:var(--f-titre);font-weight:800;letter-spacing:-.02em}
.foot-cols a{text-underline-offset:4px}
.foot-cols a:hover{text-decoration:underline;text-decoration-color:#e89a6e}

/* ---------- pages intérieures ---------- */
.page-head h1{font-size:clamp(2.8rem,8vw,6rem);max-width:11ch}
.filters button{border-radius:var(--r);font-family:var(--f-texte);color:var(--ink)}
.proj h2{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.proj .meta{color:rgba(255,255,255,.9)}
.proj .lots span{border-radius:3px;font-family:var(--f-cote);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.temoin h2{font-size:clamp(1.9rem,3.8vw,3.1rem)}
.temoin blockquote{font-family:var(--f-titre);font-weight:700;letter-spacing:-.02em;line-height:1.22;font-size:clamp(1.4rem,2.4vw,2.1rem)}
input,select,textarea{border-radius:var(--r);font-family:var(--f-texte)}
input:focus,select:focus,textarea:focus{border-color:var(--cuivre-texte);box-shadow:0 0 0 3px rgba(165,83,47,.2)}
label{font-weight:600}
.ok{border-radius:var(--r)}
.side h2{font-size:clamp(1.7rem,2.8vw,2.4rem)}
.side .jalons{display:none}
.side-photo{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;margin-bottom:26px}
.side-photo img{width:100%;height:100%;object-fit:cover}
.side .rows b{font-family:var(--f-cote);font-size:12px;letter-spacing:.14em;font-weight:500;color:var(--soft-sombre)}

/* ---------- téléphone ---------- */
@media(max-width:760px){
  /* le plomb s'arrête au-dessus du titre : sa cote ne recouvre plus le texte */
  /* film vertical : le fil descend jusqu'au toit de la tour, sa cote se lit dans le ciel */
  .hero .plomb{height:27.5%}
  .hero .plomb-read{top:17%;left:calc(50% + 14px);white-space:normal;width:9.5em;line-height:1.5}
  .hero .veil{background:linear-gradient(0deg,rgba(14,16,18,.86),rgba(14,16,18,.5) 30%,rgba(14,16,18,0) 52%)}
  .hero .scroll-cue{display:none}
  .hero .actions{width:100%}
  .hero .actions .btn{flex:1 1 auto}
  .bl-read{bottom:auto;top:130px;right:20px;background:rgba(29,29,33,.78);padding:8px 12px;border-radius:var(--r)}
  .bl-read b{font-size:1rem}
  .lx-copy{top:80px}
  .lx-copy .bl-h{font-size:1.75rem}
  .lx-zone{margin-top:14px}
  .lx-p{display:block;font-size:.92rem}
  .lx-fiche{grid-template-columns:72px 1fr;gap:14px}
  .lx-fiche.lx-fin{grid-template-columns:1fr}
  .lx-fiche h3{font-size:1.2rem}
  .lx-fiche p{font-size:.86rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .lx-frame{bottom:7svh}
  .lx-read{top:auto;bottom:16px}
  .lx-read span{font-size:2.2rem}
  .ta-copy h2{font-size:1.9rem}
  .engage h2,.projets h2,.intro h2{font-size:2rem}
  .cta-band h2{font-size:2.4rem}
}