/* Les Portes de la Forêt — palette officielle */
:root{
  --van:#45220D; --sepia:#763B16; --tussock:#CA8E56;
  --milk:#FBF7F4;   --oat:#E5DED2;   --mocha:#685D54;   /* nuancier fourni */
  --page:var(--milk);         /* fond de tout le site */
  --glassy:rgba(115,105,105,.49);      /* panneau translucide sur photo (Figma) */
  --glassy-clair:rgba(255,253,249,.72); /* le même, posé sur le crème */
  --ombre-glassy:4px 9px 4px rgba(0,0,0,.13);
  /* le verre : translucide, flouté, avec un liseré clair qui capte la lumière.
     Il ne rend que posé sur le fond ambiant ci-dessous — sur un aplat il n'y a
     rien à réfracter. */
  --verre:color-mix(in srgb,var(--oat) 88%,transparent);
  --verre-bord:color-mix(in srgb,#fff 46%,transparent);
  --verre-ombre:0 22px 48px -30px color-mix(in srgb,var(--van) 52%,transparent);
  --marzipan:#F7D196; --givry:#F8E5CE; --ivory:#FFFDF9;
  --wrap:1180px; --narrow:970px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--page); color:var(--van);
  font:400 16px/1.6 "DM Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* « object-position » vaut 50% 50% par défaut : les dix-sept recadrages du site
   étaient donc centrés, mais par omission. Une seule déclaration ailleurs —
   « top » sur une bannière, « left » sur une vignette — et le reste du site
   partirait sans que rien ne le signale. On l'écrit, une fois, pour toutes :
   le centre est désormais une règle, pas un hasard. Toute exception devra se
   déclarer explicitement, et se verra. */
/* « height:auto » n'est pas cosmétique, il est structurel. Les attributs
   width/height que porte chaque balise — utiles au navigateur pour réserver la
   place et éviter les sauts de mise en page — sont appliqués comme hints de
   présentation. Nos règles redéfinissent la largeur, jamais la hauteur : le
   hint « height:720px » survivait donc, rendait la hauteur définie, et un
   « aspect-ratio » cesse d'agir dès que les deux dimensions le sont. Mesuré sur
   l'accueil : vignette de 355 × 720 au lieu de 355 × 222, soit 63 % de l'image
   rognée. Cette ligne rend la main aux rapports déclarés partout à la fois. */
img{display:block;max-width:100%;height:auto;object-position:50% 50%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em}
h1{font-size:clamp(40px,5.6vw,80px);line-height:1.02;letter-spacing:-.04em}
h2{font-size:clamp(30px,3.6vw,52px);line-height:1.1;letter-spacing:-.032em}
h3{font-size:21px;line-height:1.35}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--narrow);margin:0 auto;padding:0 24px}
.center{text-align:center}
.rule{border:0;border-top:1px solid color-mix(in srgb,var(--tussock) 45%,transparent);
  margin:0 auto}   /* auto, sinon le raccourci décentre le .wrap */

/* ---------- écran d'attente de l'accueil ----------
   Posé au-dessus de tout, y compris la barre de navigation (z-index 50) et la
   fenêtre de brochure (200), qui ne peut de toute façon pas être ouverte ici. */
/* Deux marques empilées : le programme, puis le groupe qui le signe. */
.loader{position:fixed;inset:0;z-index:300;display:grid;
  /* « align-content », pas « place-items » : le second centrait chaque logo
     dans sa propre moitié d'écran, ce qui les séparait de 347 px. Celui-ci
     groupe les deux rangées au milieu. */
  justify-items:center;align-content:center;gap:0;
  background:color-mix(in srgb,var(--oat) 34%,var(--milk));
  /* Filet de sécurité : si le script ne s'exécute pas — erreur en amont,
     JavaScript coupé —, l'écran se lève quand même. Personne ne doit rester
     devant un aplat crème. */
  animation:loader-secours .5s var(--ease) 6s forwards}
.loader__marque,.loader__groupe{display:block;height:auto}
/* le filet déborde le logo du groupe : posé à sa seule largeur, il l'étranglait */
.loader__groupe{box-sizing:content-box;
  padding-left:clamp(26px,3.4vw,48px);padding-right:clamp(26px,3.4vw,48px)}
/* Le logo complet — arche, nom, calligraphie — est en portrait : 0,58 de
   rapport. On le cale donc sur la HAUTEUR et non sur la largeur. Calé en
   largeur, il dépassait le bas de l'écran dès qu'on montait un peu. */
.loader__marque{height:clamp(190px,34vh,360px);width:auto;
  animation:loader-souffle 2.2s var(--ease) infinite}
/* Le groupe signe, il n'annonce pas : calé sur la hauteur lui aussi, pour que
   le rapport entre les deux marques tienne quel que soit l'écran. Un filet l'en
   sépare — sans lui, les deux logos se lisent comme un seul bloc graphique.

   Même durée, même courbe, AUCUN décalage : les deux marques respirent
   ensemble. Un retard de 0,25 s se voyait, et lisait comme un défaut.

   Sa pulsation lui est propre parce qu'une animation d'opacité écrase la valeur
   de base : avec « opacity:.6 » et les images-clés de la marque, le groupe
   montait quand même jusqu'à l'opacité pleine, et le retrait n'existait pas. */
.loader__groupe{height:clamp(52px,9vh,96px);width:auto;
  margin-top:clamp(26px,3.4vw,44px);padding-top:clamp(26px,3.4vw,44px);
  border-top:1px solid color-mix(in srgb,var(--van) 20%,transparent);
  animation:loader-souffle-discret 2.2s var(--ease) infinite}
/* la classe posée par le script prend la main sur l'animation de secours */
.loader.is-out{animation:none;opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility 0s .55s}
@keyframes loader-secours{to{opacity:0;visibility:hidden}}
@keyframes loader-souffle{0%,100%{opacity:.4}50%{opacity:1}}
/* la même respiration, mais dans une plage plus basse : le groupe reste à 60 %
   de la marque à chaque instant du cycle */
@keyframes loader-souffle-discret{0%,100%{opacity:.24}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){
  .loader__marque,.loader__groupe{animation:none}
  /* sans animation pour la porter, l'opacité du groupe se pose ici */
  .loader__groupe{opacity:.6}
  .loader.is-out{transition:none}
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;
  border-radius:6px;font-size:14px;line-height:1;white-space:nowrap;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- la flèche ----------
   C'était le caractère « → ». DM Sans n'a pas de glyphe flèche : chaque
   navigateur allait le chercher dans une police de repli, et le dessin comme la
   graisse changeaient d'une machine à l'autre — épais et court sur Windows, fin
   et long sur macOS. C'est un tracé, désormais : une flèche dans un cercle fin,
   de la graisse d'un filet, qui se lit comme un bouton même détachée de son
   libellé. Elle prend la couleur du texte qu'elle accompagne. */
.arw{flex:none;width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
/* le cercle porte le trait le plus fin : à 1 px plein il alourdissait le bouton */
.arw circle{stroke-width:.9;opacity:.55}
.arw--retour{transform:scaleX(-1)}
/* seule dans un rond de navigation, elle n'a plus besoin de son propre cercle */
.rnd .arw circle,.carr__fl .arw circle{display:none}
.rnd .arw,.carr__fl .arw{width:22px;height:22px;stroke-width:1.2}
.btn--light{background:var(--givry);color:var(--van)}
.btn--dark{background:var(--mocha);color:var(--milk)}
.btn--ghost{background:color-mix(in srgb,var(--givry) 12%,transparent);color:var(--givry);border:1px solid color-mix(in srgb,var(--givry) 40%,transparent)}
.btn--outline{border:1px solid var(--tussock);color:var(--van)}
/* Figma 194:19 : plein crème, filet tussock */
.btn--creme{background:var(--givry);border:1px solid var(--tussock);color:var(--van)}
.rnd{
  width:52px;height:52px;border-radius:6px;background:none;cursor:pointer;
  border:1px solid var(--tussock);color:var(--van);font-size:17px;
  /* le caractère se centrait tout seul, le tracé demande une grille */
  display:grid;place-items:center;
  transition:background .25s var(--ease)
}
.rnd:hover{background:color-mix(in srgb,var(--tussock) 18%,transparent)}

/* ---------- eyebrow ---------- */
.eyebrow{font-size:15px;color:var(--sepia);margin-bottom:14px}
.eyebrow--light{color:var(--givry)}
.eyebrow--gold{color:var(--marzipan)}
.eyebrow i{color:var(--tussock);font-style:normal;margin:0 6px}
.eyebrow--dash{display:flex;align-items:center;gap:14px}
.eyebrow--dash i{display:block;width:38px;height:1px;background:var(--tussock);margin:0}
/* plus d'ornement de part et d'autre des sur-titres */
.eyebrow--dia{letter-spacing:.02em}
.lede{max-width:640px;margin:0 auto;color:color-mix(in srgb,var(--van) 70%,transparent);font-size:16.5px;line-height:1.65}
.lede--left{margin:0;max-width:560px}
.fineprint{max-width:760px;margin:0 auto 28px;font-size:15px;line-height:1.6;color:color-mix(in srgb,var(--van) 60%,transparent)}
.todo{background:color-mix(in srgb,var(--marzipan) 70%,transparent);color:var(--van);padding:0 4px;border-radius:2px}

/* ---------- navbar ---------- */
.nav{
  position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:50;
  width:min(980px,calc(100% - 32px));height:64px;
  display:flex;align-items:center;gap:24px;padding:0 10px 0 20px;
  border-radius:8px;border:1px solid color-mix(in srgb,var(--givry) 28%,transparent);
  background:color-mix(in srgb,var(--givry) 14%,transparent);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  transition:background .4s var(--ease),border-color .4s var(--ease),top .4s var(--ease)
}
.nav.is-stuck{background:color-mix(in srgb,var(--mocha) 94%,transparent);border-color:color-mix(in srgb,var(--tussock) 30%,transparent);top:14px}
.nav__brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav__mark{width:35px;height:31px;flex:0 0 auto}
.nav__word{font-size:11px;line-height:1.2;color:var(--givry);white-space:nowrap}
.nav__links{display:flex;gap:26px;margin-left:auto}
/* le bouton du panneau mobile ne doit pas s'ajouter aux liens en ligne */
.nav__cta-mob{display:none}
.nav__links a{font-size:14px;color:var(--givry);opacity:.9;transition:opacity .25s;white-space:nowrap}
.nav__links a:hover{opacity:1}
.nav__cta{height:44px;font-size:13px}
@media (max-width:900px){.nav__links{display:none}}

/* ---------- hero ---------- */
/* place-items:end : le panneau est posé bas dans l'image, comme y=521 sur 1080 */
.hero{position:relative;min-height:100svh;display:grid;place-items:end center;
  overflow:hidden;background:var(--mocha)}
/* Exception assumée à la règle de centrage, et la seule du site : elle existe
   pour ne rien perdre.
   Le film porte deux marques incrustées, qu'on ne peut pas retoucher : le
   filigrane permanent du coin bas droit, et le carton d'ouverture centré. Le
   film est en 16/9 ; dès que la fenêtre a un autre rapport, « cover » rogne —
   haut et bas si elle est plus large, les côtés si elle est plus haute.
   Le film est donc ancré sur son coin bas droit : ce coin ne bouge plus, quel
   que soit l'écran, et le rognage se fait entièrement par le haut et par la
   gauche. Le filigrane est ainsi intouchable par construction, sans plus rien à
   recalculer si l'écran change — contrairement au réglage précédent, qui
   cherchait un compromis et finissait par lâcher sur les écrans très larges. */
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:100% 100%;
  border:0;display:block;background:var(--van)}
/* Sur un téléphone tenu droit, le film est bien plus large que la fenêtre : le
   recadrage ne garde qu'un tiers de sa largeur. Recentré, ce tiers est pris au
   milieu — donc le filigrane, qui vit entre 85,8 % et 96,1 % de la largeur,
   sort entièrement du cadre. Le logo n'est pas rogné : il n'est pas là.
   La condition d'orientation n'est pas un détail. En paysage, la fenêtre
   redevient plus large que haute, le recadrage se fait en hauteur et le
   filigrane ne peut plus être évacué — il serait coupé. Cette orientation garde
   donc l'ancrage au coin, qui le montre entier. Entier ou absent, jamais à
   moitié : c'est la règle. */
@media (max-width:900px) and (orientation:portrait){
  .hero__img{object-position:50% 50%}
}
/* mouvement réduit demandé par le système : on s'en tient à l'image d'attente */
@media (prefers-reduced-motion:reduce){
  #heroVid{display:none}
  .hero{background:var(--van) url("img/video/hero-poster.jpg") 100% 100%/cover no-repeat}
  @media (orientation:portrait){
    .hero{background-position:50% 50%}
  }
}
/* Figma 154:3 ramène les quatre arrêts du dégradé à zéro : c'est le panneau
   translucide qui porte désormais le contraste. On garde un voile très léger
   en haut et en bas, sinon la navbar et le bas de section perdent leur assise. */
.hero__veil{position:absolute;inset:0;background:
  linear-gradient(180deg,
   color-mix(in srgb,var(--mocha) 30%,transparent) 0%,
   transparent 26%,
   transparent 74%,
   color-mix(in srgb,var(--mocha) 40%,transparent) 100%)}
.hero__inner{position:relative;text-align:center;color:var(--givry);padding:0 24px;max-width:1100px}
/* Panneau translucide bordé — d'après Figma 193:2, mais resserré : à l'échelle
   d'origine (983 × 377 sur 1440) il mangeait presque tout l'écran et poussait le
   titre sur deux lignes déséquilibrées. Bord ramené de 5 px à 1, gris translucide
   remplacé par le brun de la marque pour ne pas ternir la photo. */
.hero__card{
  width:min(983px,calc(100% - 48px));max-width:none;
  margin-bottom:clamp(40px,16vh,180px);
  padding:30px 34px 34px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--givry) 55%,transparent);
  /* Voile allégé, et changé de teinte. Le gris d'origine à 49 % masquait la
     vidéo sans protéger le texte : mesuré sur l'image d'attente, le crème ne
     ressortait qu'à 3,43 pour 1. Le brun de la marque à 34 % laisse voir
     beaucoup plus de la vidéo ET monte la lisibilité à 4,42 — un voile sombre
     protège un texte clair, un voile gris ne fait que le noyer. */
  background:color-mix(in srgb,var(--van) 34%,transparent);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)
}
/* Le panneau recouvrait le coin du filigrane SAKKAN — mesuré, environ 10 % du
   logo à 1280 × 700. Ce n'était pas une affaire de flou : alléger le voile
   aurait rendu le logo terne, pas entier. Il fallait que le panneau cesse de
   passer dessus.
   Le filigrane est ancré au coin bas droit : son bord haut se trouve à 20 % de
   la hauteur du film affiché, soit 0,1125 × largeur quand la fenêtre est plus
   large que 16/9, et 0,2 × hauteur sinon. La marge basse du panneau doit
   dépasser ces deux valeurs — d'où 12,5vw et 22vh, qui laissent une quinzaine
   de pixels de dégagement plutôt que cinq : de quoi encaisser une police qui
   charge autrement ou une barre de navigateur d'une autre hauteur.
   Borné à 1400 px : au-delà, le panneau plafonne à 983 px et n'atteint jamais
   le filigrane, inutile de remonter la composition pour rien. */
@media (min-width:901px) and (max-width:1400px){
  .hero__card{margin-bottom:max(clamp(40px,16vh,180px),12.5vw,22vh)}
}
.hero__card .eyebrow{margin-bottom:0}
/* dimensionné pour tenir sur UNE ligne, comme dans la maquette : c'est la hauteur
   du panneau qu'il fallait réduire, pas sa largeur */
/* le plafond à 52px n'est pas esthétique mais géométrique : le panneau est borné
   à 983px, la police suivait la fenêtre, et le titre cassait en deux lignes
   au-delà de 1200px. 52px est la taille maximale qui tient sur une ligne. */
.hero__card h1{margin-top:16px;font-size:clamp(26px,4.6vw,52px);white-space:normal}
.hero__card .hero__sub{margin-top:20px;font-size:16.5px;max-width:720px}
.hero__card .hero__cta{margin-top:30px}
.hero h1{margin:0 auto}
.hero h1 em{font-style:normal;color:var(--marzipan)}
.hero__sub{max-width:720px;margin:26px auto 0;font-size:17px;line-height:1.65;opacity:.82}
/* Boutons du héros : pilule pleine et sombre, d'après la référence transmise.
   Ils ne suivent donc plus la forme rectangulaire des boutons du reste du site. */
.hero__cta{display:flex;gap:12px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.hero .hero__cta .btn{
  height:54px;padding:0 30px;border-radius:999px;font-size:14.5px;
  background:color-mix(in srgb,var(--mocha) 92%,transparent);
  color:var(--milk);border:1px solid color-mix(in srgb,var(--milk) 26%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.5)
}
.hero .hero__cta .btn:hover{
  background:var(--mocha);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6)
}

/* ---------- bandes ---------- */
.band{padding:96px 0}
/* un seul fond sur tout le site : l'alternance de bandes fatiguait l'œil */
/* alternance douce, dans le nuancier : Milk puis un lavis d'Oat */
.band--givry{background:var(--milk)}
.band--creme,.band--ivory{background:color-mix(in srgb,var(--oat) 34%,var(--milk))}
.sec-intervenants{padding-bottom:0}
/* Figma 193:3 : les intervenants passent dans une pilule translucide bordée */
/* Pilule en verre, sur le modèle de la navbar. Une réserve : la navbar est posée
   sur des photographies, où le flou a de la matière à travailler. Ici le fond est
   un dégradé lisse, le flou n'y change presque rien — ce sont la translucidité,
   le liseré clair et surtout le reflet en haut (ombre interne) qui font le verre. */
.firms{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px;
  list-style:none;margin:0 auto 22px;padding:16px 22px;width:max-content;max-width:100%;
  border-radius:999px;
  background:color-mix(in srgb,#fff 40%,transparent);
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid color-mix(in srgb,#fff 62%,transparent);
  box-shadow:0 14px 34px -20px color-mix(in srgb,var(--van) 48%,transparent),
             inset 0 1px 0 color-mix(in srgb,#fff 72%,transparent);
}
.firms li{font-size:16px;opacity:.55;white-space:nowrap}
@media (max-width:820px){
  /* sur plusieurs lignes, une pilule pleine deviendrait un ovale : on arrondit
     seulement, mais la règle ne doit pas déborder sur le grand écran */
  .firms{border-radius:24px;padding:16px 22px;gap:14px 20px;justify-content:center}
  .firms li{white-space:normal}
}
.sec-intervenants .rule{margin-top:56px}

/* ---------- split image/texte ---------- */
/* Figma 153:11 : la photo passe à droite et déborde le cadre, le texte vient à
   gauche dans un panneau translucide. Le débord est obtenu en sortant la figure
   de la gouttière : 957 de large pour une colonne de 862 dans la maquette. */
.split{overflow:hidden}
/* Le panneau vient au bord gauche (x=57 sur 1440 dans la maquette, soit 4 %),
   pas dans la gouttière centrée : c'est ce qui le laissait flotter au milieu. */
.split__grid{display:grid;grid-template-columns:510px 1fr;gap:54px;align-items:center;
  padding-left:clamp(24px,4vw,57px)}
.split__media{margin:0;grid-column:2;grid-row:1}
.split__media img{width:100%;aspect-ratio:957/620;object-fit:cover;border-radius:46px}
.split__body{grid-column:1;grid-row:1;position:relative;z-index:1;
  padding:30px 30px 32px;border-radius:14px;
  background:var(--verre);box-shadow:var(--verre-ombre);
  border:1px solid var(--verre-bord);
}
.split__body h2{margin:10px 0 22px;font-size:clamp(28px,3.2vw,46px);text-wrap:balance}
.split__body p{color:color-mix(in srgb,var(--van) 70%,transparent);font-size:17px;line-height:1.7}
.split__body .btn{margin-top:32px}
/* la photo dépasse le bord droit, comme les 957 px débordant le cadre de 1440 */
@media (min-width:961px){
  .split__media{margin-right:-6vw;max-width:none}
}
@media (max-width:960px){
  .split__grid{grid-template-columns:1fr;gap:28px;padding-left:24px;padding-right:24px}
  .split__media{grid-column:1;grid-row:1}
  .split__body{grid-column:1;grid-row:2}
  .split__media img{aspect-ratio:16/10;border-radius:24px}
}

/* la case à cocher des formulaires : alignée sur la première ligne du libellé,
   pas au milieu d'un texte qui peut passer sur deux lignes */
.form__case{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;
  cursor:pointer;line-height:1.45}
.form__case input{width:17px;height:17px;flex:0 0 auto;margin:2px 0 0;
  accent-color:var(--sepia);cursor:pointer}
.form__case span{display:block;font-size:13.5px;margin:0;
  color:color-mix(in srgb,var(--van) 78%,transparent)}

/* ---------- bouton WhatsApp flottant ----------
   z-index 45 : au-dessus de la page, mais SOUS la barre de navigation (50),
   la fenêtre de brochure (200), le lecteur du film (240) et l'écran d'attente
   (300). Un bouton flottant qui passe par-dessus une fenêtre ouverte est une
   gêne, pas un service. */
.wapp{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);
  z-index:45;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;background:#25D366;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wapp svg{width:31px;height:31px}
.wapp:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(0,0,0,.55)}
.wapp:focus-visible{outline:3px solid var(--van);outline-offset:3px}
@media (max-width:760px){.wapp{width:52px;height:52px}.wapp svg{width:28px;height:28px}}
/* le mouvement réduit demandé vaut aussi pour ce bouton */
@media (prefers-reduced-motion:reduce){.wapp,.wapp:hover{transition:none;transform:none}}

/* ---------- suivre le chantier ---------- */
.suivre h2{margin-top:10px;font-size:clamp(26px,3.2vw,40px)}
.suivre .lede{margin-top:16px}
.suivre__btn{margin-top:30px}
.suivre__i{width:17px;height:17px;flex:0 0 auto}

/* ---------- voir le film en entier ---------- */
/* Posé juste sous la barre de navigation : elle est fixe, haute de 64 px, à
   26 px du haut — donc 90 px, plus une respiration. Sur petit écran elle
   remonte à 14 px. */
/* Le bouton vit maintenant SOUS la hero, dans le flux. Il était posé dessus en
   position absolue : sur un écran court, la hero se resserre et le bouton
   retombait en plein milieu du titre. Rien en position absolue ne peut garantir
   qu'il ne recouvrira pas le texte à toutes les hauteurs d'écran ; dans le flux,
   la question ne se pose plus. */
.filmbar{display:flex;justify-content:center;padding:26px 24px 0;background:var(--page)}
.filmbtn{
  display:inline-flex;align-items:center;gap:9px;
  height:40px;padding:0 18px 0 14px;border-radius:999px;
  font:inherit;font-size:13px;letter-spacing:.01em;cursor:pointer;
  color:var(--van);
  background:color-mix(in srgb,var(--oat) 46%,transparent);
  border:1px solid color-mix(in srgb,var(--tussock) 42%,transparent);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.filmbtn:hover{background:color-mix(in srgb,var(--oat) 78%,transparent);
  transform:translateY(-1px)}
.filmbtn:focus-visible{outline:2px solid var(--marzipan);outline-offset:3px}
.filmbtn__i{width:19px;height:19px;flex:0 0 auto;fill:none;
  stroke:currentColor;stroke-width:1.3}
.filmbtn__i path{fill:currentColor;stroke:none}
@media (max-width:900px){:root{--nav-bas:78px}}
@media (max-width:760px){.filmbtn{font-size:12.5px;height:38px;padding:0 15px 0 12px}}

/* le lecteur : fond plein, film entier, rien d'autre */
.film{position:fixed;inset:0;z-index:240;background:#0E0906;
  display:grid;place-items:center}
.film[hidden]{display:none}
.film__v{width:100%;height:100%;object-fit:contain;background:#0E0906}
.film__x{position:absolute;top:18px;right:18px;z-index:2;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:24px;line-height:1;
  color:var(--givry);background:color-mix(in srgb,var(--van) 60%,transparent);
  border:1px solid color-mix(in srgb,var(--givry) 30%,transparent)}
.film__x:hover{background:var(--van)}
.film__x:focus-visible{outline:2px solid var(--marzipan);outline-offset:3px}

/* ---------- chiffres ---------- */
.stats{padding:80px 0}
.stats__row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{position:relative;padding-right:28px}
.stat+.stat{padding-left:28px}
.stat+.stat::before{content:"";position:absolute;left:0;top:6px;width:1px;height:74px;background:color-mix(in srgb,var(--tussock) 50%,transparent)}
.stat+.stat::after{content:"";position:absolute;left:-3px;top:39px;width:6px;height:6px;
  background:var(--tussock);border-radius:50%}
.stat__n{display:block;font-size:44px;line-height:1.15;letter-spacing:-.034em}
.stat__n--range{white-space:nowrap}
.stat__l{display:block;margin-top:12px;font-size:14.5px;line-height:1.4;opacity:.6}
@media (max-width:820px){.stats__row{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .stat:nth-child(3)::before,.stat:nth-child(3)::after{display:none}
  .stat:nth-child(3){padding-left:0}}

/* ---------- légende du plan d'architecte ---------- */
.legend{display:flex;justify-content:center;gap:32px;list-style:none;padding:0;margin:34px 0 0}
.legend li{display:flex;align-items:center;gap:10px;font-size:15px;opacity:.75}
.dot{width:9px;height:9px;border-radius:50%}
.dot--dispo{background:#6E7F52}.dot--option{background:var(--tussock)}.dot--reserve{background:#A89684}

/* ---------- cartes villa ---------- */
.head-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:6px 0 28px}
.head-row .eyebrow{margin:0}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 44px}
.filters button{
  padding:10px 19px;border-radius:999px;background:none;border:1px solid var(--tussock);
  color:var(--van);font:inherit;font-size:13.5px;cursor:pointer;transition:background .25s,color .25s
}
.filters button.is-on{background:var(--mocha);color:var(--milk);border-color:var(--mocha)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* de vraies cartes : sans conteneur elles flottaient sur le fond */
.card{display:flex;flex-direction:column;padding:18px 18px 22px;border-radius:14px;
  background:var(--verre);
  border:1px solid var(--verre-bord);box-shadow:var(--verre-ombre);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-4px);
  box-shadow:0 26px 54px -28px color-mix(in srgb,var(--van) 52%,transparent)}
.card__foot{margin-top:auto}
.card__media{position:relative;border-radius:8px;overflow:hidden}
.card__media img{width:100%;aspect-ratio:8/5;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__badge{position:absolute;right:16px;top:16px;font-size:12px;padding:6px 15px;border-radius:999px;background:color-mix(in srgb,var(--mocha) 70%,transparent);color:var(--milk)}
.card__row{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.card__chip{font-size:13px;padding:6px 15px;border-radius:999px;
  background:color-mix(in srgb,var(--milk) 80%,transparent)}
.card__loc{font-size:13.5px;opacity:.55}
.card h3{margin:18px 0 12px;font-size:24px}
.card__meta{font-size:14.5px;line-height:1.55;opacity:.7}
.card__rule{border:0;border-top:1px solid color-mix(in srgb,var(--tussock) 40%,transparent);margin:18px 0 14px}
.card__foot{display:flex;align-items:center;justify-content:space-between;font-size:16px}
.card__foot a{font-size:13.5px;color:var(--sepia)}
.cards+.center{margin-top:52px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* ---------- chantier ----------
   Plus aucune page n'emploie ces règles : la bande « Où en sont les travaux »
   a été retirée de l'accueil le 6 septembre. Conservées telles quelles le temps
   que le client tranche sur le sort de la page chantier ; à supprimer si elle
   part aussi. */
.chantier{position:relative;padding:96px 0;overflow:hidden;background:var(--mocha);color:var(--milk)}
.chantier__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chantier__veil{position:absolute;inset:0;background:linear-gradient(90deg,
  color-mix(in srgb,var(--mocha) 92%,transparent),color-mix(in srgb,var(--mocha) 55%,transparent))}
.chantier__inner{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:60px;flex-wrap:wrap}
.chantier__inner p{opacity:.76;max-width:430px;margin-top:14px}
.chantier__meta{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}
.chantier__meta span{display:block;font-size:13px;opacity:.6}
.chantier__meta b{display:block;font-weight:400;font-size:26px;letter-spacing:-.02em;margin-top:4px}
.chantier__meta .btn{margin-top:4px}

/* ---------- engagements ---------- */

/* ---------- carrousel ---------- */
/* défilement horizontal natif : on peut faire glisser au doigt, à la molette ou
   au pavé, et chaque carte s'aimante. Les flèches restent pour la souris. */
/* ---------- défilement horizontal épinglé (maison témoin) ----------
   La page s'immobilise, les trois cartes défilent latéralement, puis la page
   repart. Même principe que la section scindée, mais sur l'axe horizontal :
   un cadre collant à hauteur d'écran et un rail translaté par la progression. */
@media (max-width:900px){
  .tcard{grid-template-columns:1fr;gap:22px;padding:18px}
  .tcard__body{padding:0}
}
@media (prefers-reduced-motion:reduce){.tcard{opacity:1}}

@media (max-width:820px){.tcard{grid-template-columns:1fr;gap:24px}.tcard__body{padding:0}}

/* ---------- parcours ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.steps li{position:relative;padding:36px 23px 0}
.steps li:first-child{padding-left:0}
.steps li+li::before{content:"";position:absolute;left:0;top:36px;width:1px;height:120px;background:color-mix(in srgb,var(--tussock) 40%,transparent)}
.steps span{font-size:15px;letter-spacing:.06em;color:var(--tussock)}
.steps h3{margin:8px 0 12px}
.steps p{font-size:14.5px;line-height:1.65;opacity:.68}
@media (max-width:900px){.steps{grid-template-columns:1fr}.steps li{padding:28px 0 0}.steps li+li::before{display:none}}

/* ---------- actualités ---------- */
/* Deux colonnes, pas trois : l'accueil ne reprend que les deux derniers
   articles — journal.py n'en pose jamais d'autre nombre — et la troisième
   colonne restait vide. La paire se serrait à gauche avec un trou à droite,
   ce qui se lit comme un défaut d'alignement alors que c'est un défaut de
   compte. Deux colonnes remplissent la largeur et la rangée retombe juste. */
.news{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin-top:12px}
/* Les cartes du journal n'ont pas d'image — ce sont des articles, pas des
   photographies de chantier. Un filet en tête remplace la vignette et garde
   le rythme de la grille. */
.news article > a{display:block}
.news article img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;
  transition:transform .7s var(--ease)}
.news article > a:hover img{transform:scale(1.04)}
.news article > a:hover h3{opacity:.66}
.news h3{transition:opacity .3s var(--ease)}
.news time{margin-top:20px}
.news img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;transition:transform .7s var(--ease)}
.news article:hover img{transform:scale(1.04)}
.news time{display:block;margin-top:24px;font-size:13.5px;opacity:.55}
.news h3{margin:10px 0 12px;font-size:19px;line-height:1.45}
.news p{font-size:14.5px;line-height:1.6;opacity:.65}
@media (max-width:900px){.news{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta{position:relative;padding:130px 0;overflow:hidden;background:var(--mocha);color:var(--milk)}
.cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta__veil{position:absolute;inset:0;background:color-mix(in srgb,var(--mocha) 76%,transparent)}
.cta__inner{position:relative}
.cta__inner p{max-width:640px;margin:22px auto 0;opacity:.78;font-size:17px}

/* ---------- pied de page ---------- */
/* le pied reste posé, mais translucide : le fond ambiant continue dessous */
.foot{background:color-mix(in srgb,var(--oat) 55%,var(--milk));padding:96px 0 56px}
.foot__news{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:56px}
.foot__nl{font-size:21px;opacity:.78}
.foot__sub{font-size:15px;opacity:.55;margin-top:8px}
.field{display:flex;align-items:center;gap:6px;width:436px;max-width:100%;
  border:1px solid var(--tussock);border-radius:8px;padding:6px 6px 6px 20px}
.field input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--van);outline:none;min-width:0}
.field input::placeholder{color:color-mix(in srgb,var(--van) 45%,transparent)}
.field button{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px;border:0;
  border-radius:6px;background:var(--givry);color:var(--van);font:inherit;font-size:13.5px;cursor:pointer}
.foot__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:48px 0}
.foot__brand img{width:48px;margin-bottom:18px}
.foot__name{font-size:16px}
.foot__hours{font-size:14.5px;opacity:.55;margin-top:6px}
.foot__cols h4{font-size:14.5px;font-weight:400;opacity:.5;margin-bottom:20px}
.foot__cols a{display:block;font-size:15px;opacity:.78;margin-bottom:11px;transition:opacity .2s}
.foot__cols a:hover{opacity:1}
.foot__legal{display:flex;justify-content:space-between;gap:24px;padding-top:30px;font-size:14px;opacity:.5;flex-wrap:wrap}
/* Le « FR · EN » du pied de page était décoratif. C'est désormais le sélecteur
   de langue : la langue courante en gras, l'autre cliquable. */
.foot__lang i{color:var(--tussock);font-style:normal}
.foot__lang b{font-weight:400;opacity:1}
.foot__lang a{opacity:.62;text-decoration:underline;text-underline-offset:3px;
  transition:opacity .2s var(--ease)}
.foot__lang a:hover{opacity:1}
@media (max-width:900px){.foot__cols{grid-template-columns:1fr 1fr}}

/* ============ pages intérieures ============ */
.phero{position:relative;padding:210px 0 84px;background:var(--mocha);color:var(--milk);overflow:hidden}
.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.phero__veil{position:absolute;inset:0;background:linear-gradient(180deg,
  color-mix(in srgb,var(--mocha) 82%,transparent),color-mix(in srgb,var(--mocha) 94%,transparent))}
.phero__inner{position:relative}
.phero h1{font-size:clamp(34px,4.4vw,62px);max-width:900px}
.phero__lede{max-width:620px;margin-top:22px;font-size:17.5px;line-height:1.65;opacity:.8}
/* le fil d'Ariane est passé sous le titre et le chapô : la marge est donc au-dessus */
.crumb{font-size:14px;opacity:.6;margin:26px 0 0}
.crumb a{text-decoration:underline;text-underline-offset:3px}

/* blocs de texte en colonnes */
.prose{display:grid;grid-template-columns:300px 1fr;gap:60px;padding:44px 0;border-top:1px solid color-mix(in srgb,var(--tussock) 40%,transparent)}
/* Un élément de grille vaut « min-width:auto », c'est-à-dire « jamais plus
   étroit que mon contenu ». Le tableau des intervenants porte min-width:520px :
   sur un téléphone, la colonne refusait donc de descendre sous 520 et poussait
   toute la page à 538 px de large dans une fenêtre de 375. Rien n'était plus
   centré, et le .tbl-wrap ne pouvait pas servir de glissière puisque son
   parent avait déjà cédé. Mesuré après correction : page 375, tableau qui
   défile bien dans ses 339 px. */
.prose>*{min-width:0}
.prose h3{font-size:22px}
.prose p{max-width:620px;font-size:16.5px;line-height:1.7;opacity:.72}
.prose p+p{margin-top:14px}
@media (max-width:900px){.prose{grid-template-columns:1fr;gap:16px;padding:32px 0}}

/* fiches typologie */
.typo{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px}
.typo__card{background:var(--verre);border:1px solid var(--verre-bord);
  box-shadow:var(--verre-ombre);border-radius:14px;overflow:hidden}
.typo__card>img{width:100%;aspect-ratio:16/9;object-fit:cover}
.typo__body{padding:28px}
.typo__body h3{font-size:26px}
.typo__spec{margin:10px 0 16px;font-size:15px;opacity:.6}
.typo__body p{font-size:15.5px;line-height:1.65;opacity:.72}
.typo__lots{margin-top:18px;font-size:14.5px;opacity:.55}
.typo__body .btn{margin-top:22px}
.tbd{display:inline-block;background:color-mix(in srgb,var(--marzipan) 70%,transparent);padding:1px 6px;border-radius:3px;font-size:14px}
@media (max-width:900px){.typo{grid-template-columns:1fr}}

/* bandeau fixe fiche villa */
.lotbar{position:sticky;top:96px;z-index:20;background:color-mix(in srgb,var(--mocha) 94%,transparent);
border-radius:10px;color:var(--givry);padding:20px 24px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:44px}
.lotbar h2{font-size:28px}
.lotbar__specs{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;opacity:.85;margin-left:auto}
.lotbar .btn{height:44px;font-size:13px}
.statut{font-size:12.5px;padding:6px 14px;border-radius:999px}
.statut--dispo{background:#6E7F52;color:var(--givry)}
.statut--option{background:var(--tussock);color:#2B1408}
.statut--reserve{background:#A89684;color:#2B1408}

/* galerie */
.gal{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:20px}
.gal__side{display:grid;gap:20px}
.gal img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.gal>img{aspect-ratio:4/3;height:auto}
.gal__side img{aspect-ratio:16/11;height:auto}
@media (max-width:900px){.gal{grid-template-columns:1fr}.gal>img{aspect-ratio:16/10}}

/* tableau */
.tbl{width:100%;border-collapse:collapse;margin-top:28px;font-size:15.5px}
.tbl th,.tbl td{text-align:left;padding:16px 12px;border-bottom:1px solid color-mix(in srgb,var(--tussock) 35%,transparent)}
.tbl th{font-weight:400;opacity:.5;font-size:14px}
.tbl tr:hover td{background:color-mix(in srgb,var(--tussock) 8%,transparent)}

/* FAQ */
.faq{max-width:760px;margin:44px auto 0}
.faq__i{border-top:1px solid color-mix(in srgb,var(--tussock) 35%,transparent)}
.faq__i:last-child{border-bottom:1px solid color-mix(in srgb,var(--tussock) 35%,transparent)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;font:inherit;font-size:18px;color:var(--van);text-align:left;
  padding:26px 0;cursor:pointer}
.faq__q::after{content:"+";font-size:20px;opacity:.5;flex:0 0 auto}
.faq__i.is-open .faq__q::after{content:"–"}
.faq__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease);opacity:0}
.faq__i.is-open .faq__a{max-height:420px;opacity:1}
.faq__a p{padding-bottom:26px;font-size:16px;line-height:1.7;opacity:.7;max-width:660px}

/* formulaires */
.forms{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:44px;
  align-items:start}   /* sinon le formulaire court s'étire et laisse un vide */
.form{background:var(--verre);border:1px solid var(--verre-bord);
  box-shadow:var(--verre-ombre);border-radius:14px;padding:34px}
.form h3{font-size:24px;margin-bottom:10px}
.form>p{font-size:15.5px;line-height:1.6;opacity:.68;margin-bottom:26px}
.form label{display:block;margin-bottom:16px}
.form span{display:block;font-size:13.5px;opacity:.55;margin-bottom:7px}
.form input,.form select{width:100%;height:46px;padding:0 14px;border:1px solid color-mix(in srgb,var(--tussock) 60%,transparent);
  border-radius:6px;background:#fff;font:inherit;font-size:15px;color:var(--van);outline:none}
.form input:focus,.form select:focus{border-color:var(--sepia)}
.form .btn{align-self:flex-start;margin-top:10px}
@media (max-width:900px){.forms{grid-template-columns:1fr}}

/* entrées chantier */
.entry{padding:48px 0;border-top:1px solid color-mix(in srgb,var(--tussock) 40%,transparent)}
.entry__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.entry time{font-size:14px;opacity:.55}
.entry h3{font-size:24px}
.entry p{max-width:660px;margin-top:14px;font-size:16.5px;line-height:1.7;opacity:.72}
.entry__pics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.entry__pics img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
@media (max-width:900px){.entry__pics{grid-template-columns:1fr 1fr}}

/* bandeau d'état */
.statebar{display:flex;gap:44px;flex-wrap:wrap;padding:26px 0 0}
.statebar div span{display:block;font-size:13px;opacity:.55}
.statebar div b{display:block;font-weight:400;font-size:22px;margin-top:4px}

.nav__links a.is-here{opacity:1;text-decoration:underline;text-underline-offset:5px}
.accents{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}
.accents b{font-weight:400;font-size:14px;padding:8px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--tussock) 16%,transparent)}

/* ============ plan cadastral ============ */
.plancard{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;
  margin-top:44px;padding:28px;border-radius:16px;background:var(--verre);
  border:1px solid var(--verre-bord);box-shadow:var(--verre-ombre)}
.plancard__side{text-align:left;padding-top:6px}
.plancard__t{font-size:13px;letter-spacing:.04em;opacity:.5;margin-bottom:16px}
.plancard .legend{flex-direction:column;align-items:flex-start;gap:13px;margin:0 0 28px;
  justify-content:flex-start}
@media (max-width:900px){
  .plancard{grid-template-columns:1fr;gap:26px;padding:18px}
  .plancard .legend{flex-direction:row;flex-wrap:wrap;gap:12px 20px}
}
.cadastre{position:relative;max-width:560px;margin:44px auto 0}
.cadastre__img{width:100%;height:auto;display:block}
.cadastre__pins{position:absolute;inset:0}
.ppin{position:absolute;transform:translate(-50%,-50%) scale(.4);opacity:0;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;line-height:1;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ppin.is-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ppin.is-in:hover{transform:translate(-50%,-50%) scale(1.18);z-index:5}
.ppin--dispo{background:#6E7F52;color:var(--givry)}
.ppin--option{background:var(--tussock);color:#2B1408}
.ppin--reserve{background:#A89684;color:#2B1408}
.ppin--temoin{box-shadow:0 0 0 3px var(--marzipan),0 3px 10px rgba(0,0,0,.28)}
.ppin__n{pointer-events:none}

/* infobulle : c'est là que vivent les superficies, pas dans un tableau */
.ppin__tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px);
  width:190px;padding:14px 16px;border-radius:8px;pointer-events:none;
  background:color-mix(in srgb,var(--mocha) 96%,transparent);color:var(--milk);
  box-shadow:0 14px 34px rgba(0,0,0,.3);opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease);text-align:left;z-index:6}
.ppin:hover .ppin__tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ppin__tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:color-mix(in srgb,var(--mocha) 96%,transparent)}
.ppin__tip b{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-weight:400;font-size:16px;margin-bottom:10px}
.ppin__tip b em{font-style:normal;font-size:12px;opacity:.6}
.ppin__tip span{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;opacity:.75;margin-bottom:5px}
.ppin__tip span i{font-style:normal;opacity:1}
.ppin__tip u{display:block;margin-top:10px;padding-top:9px;text-decoration:none;font-size:11.5px;
  border-top:1px solid color-mix(in srgb,var(--givry) 22%,transparent)}
.tip--dispo{color:#A8BF83}.tip--option{color:var(--marzipan)}.tip--reserve{color:#C9BBAB}
.legend__temoin i{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:transparent;box-shadow:0 0 0 2px var(--marzipan)}
.cadastre__note{max-width:560px;margin:22px auto 0;text-align:center;font-size:14px;opacity:.55;line-height:1.6}
@media (max-width:620px){.ppin{width:28px;height:28px;font-size:11px}}

/* point des équipements communs : distinct des lots, pas de numéro */
.ppin__tip s{display:block;margin-top:6px;text-decoration:none;font-size:11px;opacity:.5}
.ppin--equip{background:var(--sepia);color:var(--marzipan);font-size:11px}
.ppin--equip .ppin__tip span{display:block;text-align:left;opacity:.75;margin:0}
.legend__equip i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sepia)}

/* ============ typologies ============ */
/* grid-auto-rows:1fr → toutes les fiches d'une rangée ont la même hauteur */
.types{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:30px}
.type{background:var(--verre);
  border:1px solid var(--verre-bord);box-shadow:var(--verre-ombre);border-radius:14px;padding:30px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.type:hover{transform:translateY(-4px);
  box-shadow:0 24px 50px -30px color-mix(in srgb,var(--van) 50%,transparent)}
.type__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.type__head h3{font-size:25px}
.type__lots{font-size:13.5px;opacity:.55}
.type__surf{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0;padding:18px 0;
  border-top:1px solid color-mix(in srgb,var(--tussock) 35%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--tussock) 35%,transparent)}
.type__surf dt{font-size:12.5px;opacity:.5;margin-bottom:5px}
.type__surf dd{margin:0;font-size:17px}
.type__cons{font-size:16px;line-height:1.5}
.type__cons b{font-weight:400}
.type__jour{margin-top:10px;font-size:15px;line-height:1.6;opacity:.68}
.type__lien{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:13.5px;color:var(--sepia)}
@media (max-width:900px){.types{grid-template-columns:1fr}.type__surf{grid-template-columns:1fr 1fr}}

/* plan par type : la pièce maîtresse de la fiche */
.type{display:flex;flex-direction:column}
.type__plan{position:relative;display:block;margin:-30px -30px 24px;background:#fff;
  border-bottom:1px solid color-mix(in srgb,var(--tussock) 35%,transparent);
  border-radius:10px 10px 0 0;overflow:hidden}
/* même cadre pour toutes les planches, quel que soit leur format d'origine */
.type__plan img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block}

.type__lien{margin-top:auto}

/* ============================================================
   RESPONSIVE — passe d'ensemble
   Trois seuils : 1024 (tablette), 760 (grand mobile), 480 (mobile).
   ============================================================ */

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap .tbl{min-width:520px}

/* la navigation mobile : bouton et panneau, absents jusqu'ici */
.nav__burger{display:none;width:44px;height:44px;margin-left:auto;background:none;border:0;
  cursor:pointer;position:relative;flex:0 0 auto}
.nav__burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--givry);
  transition:transform .35s var(--ease),opacity .25s var(--ease)}
.nav__burger i:nth-child(1){top:15px}
.nav__burger i:nth-child(2){top:21px}
.nav__burger i:nth-child(3){top:27px}
.nav.is-open .nav__burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav__burger i:nth-child(2){opacity:0}
.nav.is-open .nav__burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1024px){
  :root{--wrap:100%;--narrow:100%}
  .band{padding:72px 0}
  .split__grid{gap:36px}
  .stats__row{gap:0 20px}
  .types{gap:22px}
}

@media (max-width:900px){
  /* le menu remplace les liens en ligne */
  .nav{width:calc(100% - 24px);top:14px;padding:0 8px 0 16px;gap:10px}
  .nav__burger{display:block}
  .nav__cta{display:none}
  .nav__links{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;gap:0;margin:0;padding:8px;
    border-radius:10px;background:color-mix(in srgb,var(--mocha) 96%,transparent);
    backdrop-filter:blur(22px);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
    display:flex;
  }
  .nav.is-open .nav__links{opacity:1;visibility:visible;transform:none}
  .nav__links a{padding:15px 14px;font-size:16px;border-radius:6px}
  .nav__links a+a{border-top:1px solid color-mix(in srgb,var(--givry) 12%,transparent)}
  /* .nav__links a impose la couleur crème et l'emporte sur .btn--light :
     le bouton se retrouvait en crème sur crème, illisible. */
  /* .nav__links a impose la couleur crème et l'emporte sur .btn--light : le
     bouton se retrouvait en crème sur crème, illisible. Ses rembourrages
     s'additionnaient aussi à ceux de .btn, d'où 432 px de large dans une
     fenêtre de 375 : le bouton débordait du panneau. */
  .nav__links .nav__cta-mob{display:flex;margin-top:6px;justify-content:center;
    color:var(--van);opacity:1;width:100%;box-sizing:border-box;
    padding:0 16px;height:48px;font-size:15px}
}

@media (max-width:760px){
  .band{padding:56px 0}
  h1{font-size:clamp(30px,8.4vw,44px)}
  h2{font-size:clamp(25px,6.6vw,34px)}
  .lede,.lede--left{font-size:15.5px}
  .hero{min-height:auto;padding:150px 0 72px}
  .hero__sub{font-size:15.5px;margin-top:20px}
  .hero__cta{margin-top:28px;flex-direction:column;align-items:stretch}
  .hero .hero__cta .btn{justify-content:center}
  /* Les boutons du héros portent « white-space:nowrap » et 30 px de
     rembourrage de chaque côté : « Voir les lots disponibles » mesurait donc
     249 px de largeur minimale, dans un panneau qui n'en offre que 204 sur un
     écran de 320. Empilés en colonne et étirés, ils ne pouvaient pas rétrécir
     sous cette largeur : ils sortaient de 12 px à droite du panneau, que le
     « overflow:hidden » du héros coupait net — collés à gauche, rognés à
     droite. On autorise le libellé à se replier : la hauteur s'adapte et le
     bouton retrouve les deux bords du panneau. */
  .hero .hero__cta .btn{white-space:normal;text-align:center;line-height:1.3;
    min-width:0;height:auto;min-height:54px;padding:14px 20px}
  .phero{padding:132px 0 56px}
  .phero__lede{font-size:16px}

  /* chiffres : deux colonnes, corps réduit pour que « 178 → 253 » tienne */
  .stats{padding:56px 0}
  .stat__n{font-size:30px}
  .stat__n--range{font-size:25px}
  .stat,.stat+.stat{padding-right:14px;padding-left:14px}
  .stat+.stat::before{height:56px}
  .stat+.stat::after{top:30px}

  /* section épinglée : un seul panneau, la fiche reprend toute la largeur */
  .panels__p{flex-basis:100% !important}
  .panels__p+.panels__p{display:none}

  /* plan cadastral : cible tactile agrandie, infobulle contenue dans l'écran */
  .ppin{--x:0}
  .cadastre__pins .ppin{width:30px;height:30px;font-size:11.5px}
  .cadastre__pins .ppin::after{content:"";position:absolute;inset:-9px}
  .ppin__tip{width:min(180px,72vw)}
  .legend{gap:14px 18px;flex-wrap:wrap}
  .legend li{font-size:13.5px}

  /* fiche villa : le bandeau ne colle plus, il devient un bloc */
  .lotbar{position:static;padding:18px;gap:14px}
  .lotbar h2{font-size:24px}
  .lotbar__specs{margin-left:0;gap:10px 16px;font-size:13px}
  .lotbar .btn{width:100%;justify-content:center}

  .prose{gap:12px;padding:26px 0}
  .type{padding:22px}
  .type__plan{margin:-22px -22px 20px}
  .type__head h3{font-size:22px}
  .type__surf{grid-template-columns:1fr;gap:10px;padding:14px 0;margin:18px 0}
  .type__surf div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .type__surf dt{margin:0}
  .form{padding:24px}
  .tcard{flex-basis:92vw;padding:16px}
  .foot{padding:64px 0 40px}
  .foot__news{gap:22px}
  .statebar{gap:22px}
  .statebar div b{font-size:19px}
  .entry{padding:32px 0}
  .entry__pics{grid-template-columns:1fr 1fr;gap:12px}
}

@media (max-width:480px){
  .wrap,.wrap-narrow{padding:0 18px}
  .stats__row{grid-template-columns:1fr;row-gap:26px}
  .stat,.stat+.stat{padding:0}
  .stat+.stat::before,.stat+.stat::after{display:none}
  .stat+.stat{border-top:1px solid color-mix(in srgb,var(--tussock) 40%,transparent);padding-top:26px}
  .stat__n,.stat__n--range{font-size:34px}
  .foot__cols{grid-template-columns:1fr;gap:28px;padding:32px 0}
  .entry__pics{grid-template-columns:1fr}
  .cadastre__pins .ppin{width:26px;height:26px;font-size:10.5px}
  .btn{height:48px;padding:0 18px;font-size:13.5px}
  .rnd{width:46px;height:46px}
}

/* pas de survol sur écran tactile : les affordances qui en dépendaient deviennent visibles */
@media (hover:none){
  .btn:hover{transform:none}
  .card:hover .card__media img,.news article:hover img{transform:none}
}

/* ============ fiche de lot ============ */
.phero--lot{padding:190px 0 72px}
.phero--lot .phero__img{opacity:.6}
.lot__type{display:inline-block;margin-left:18px;font-size:.36em;letter-spacing:0;
  vertical-align:middle;padding:8px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--givry) 16%,transparent);border:1px solid color-mix(in srgb,var(--givry) 32%,transparent)}
.lot__st--dispo{color:#A8BF83}.lot__st--option{color:var(--marzipan)}.lot__st--reserve{color:#C9BBAB}

@media (max-width:760px){
  .phero--lot{padding:126px 0 48px}
  .lot__type{display:block;margin:14px 0 0;font-size:14px;width:max-content}
}

/* ============ choix du lot, sous le plan ============ */
.pick{position:relative;max-width:440px;margin:0;text-align:left;z-index:6}
.pick__t{display:block;font-size:14px;letter-spacing:.02em;opacity:.55;margin-bottom:10px}
.pick__b{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  font:inherit;font-size:15px;color:var(--van);cursor:pointer;text-align:left;
  padding:15px 18px;border-radius:10px;background:var(--verre);
  border:1px solid var(--verre-bord);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)
}
.pick__b:hover,.pick__b:focus-visible{border-color:var(--sepia);outline:none;
  box-shadow:0 8px 24px -12px color-mix(in srgb,var(--van) 50%,transparent)}
.pick__b i{width:8px;height:8px;flex:0 0 8px;border-right:1.5px solid var(--sepia);
  border-bottom:1.5px solid var(--sepia);transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease)}
.pick.is-open .pick__b i{transform:rotate(225deg) translateY(-2px)}
.pick.is-open .pick__b{border-color:var(--sepia)}

.pick__l{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:7;
  list-style:none;margin:0;padding:6px;max-height:340px;overflow-y:auto;
  border-radius:12px;background:color-mix(in srgb,var(--ivory) 88%,transparent);
  border:1px solid var(--verre-bord);
  box-shadow:0 26px 60px -24px color-mix(in srgb,var(--van) 55%,transparent);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s
}
.pick.is-open .pick__l{opacity:1;visibility:visible;transform:none}
.pick__l a{display:flex;align-items:baseline;gap:10px;padding:11px 14px;border-radius:6px;
  font-size:14.5px;transition:background .2s var(--ease)}
.pick__l a:hover,.pick__l a:focus-visible{background:color-mix(in srgb,var(--tussock) 16%,transparent);outline:none}
.pick__l b{font-weight:400;min-width:56px}
.pick__l span{opacity:.5;font-size:13px}
.pick__st{font-style:normal;font-size:12px;margin-left:auto;padding:3px 9px;border-radius:999px}
.pick__st--dispo{background:color-mix(in srgb,#6E7F52 20%,transparent);color:#4F5D3A}
.pick__st--option{background:color-mix(in srgb,var(--tussock) 28%,transparent);color:var(--sepia)}
.pick__st--reserve{background:color-mix(in srgb,#A89684 26%,transparent);color:#6B5B4B}
.pick__l u{text-decoration:none;font-size:11.5px;opacity:.45}

/* ============ carrousel ============ */
.carr{position:relative}
.carr__scene{position:relative;overflow:hidden;border-radius:16px;background:var(--fond);
  border:1px solid var(--verre-bord);box-shadow:var(--verre-ombre)}
.carr__piste{display:flex;transition:transform .72s var(--ease);will-change:transform}
.carr__vue{flex:0 0 100%;margin:0;aspect-ratio:var(--ratio);display:flex;align-items:center;
  justify-content:center;padding:10px;overflow:hidden}
/* planches d'orientations mêlées : hauteur imposée, le dessin s'y inscrit en entier */
.carr__scene--h .carr__vue{aspect-ratio:auto;height:var(--h)}
/* rendu détouré : le cadre n'encadrerait que du vide */
.carr__scene--nu{border:0;box-shadow:none;border-radius:0}
.carr__scene--nu .carr__vue{padding:0}
/* contain plutôt que des max-% : la planche entière tient, portrait comme paysage */
.carr__vue img{width:100%;height:100%;object-fit:contain;
  opacity:.34;transform:scale(.985);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.carr__vue.is-on img{opacity:1;transform:none}
/* les flèches : posées sur le média, discrètes, agrandies au survol */
.carr__fl{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;border:1px solid color-mix(in srgb,var(--van) 18%,transparent);
  background:color-mix(in srgb,var(--ivory) 88%,transparent);color:var(--van);
  display:grid;place-items:center;
  font-size:16px;cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.carr__fl:hover{transform:translateY(-50%) scale(1.1);background:var(--ivory)}
.carr__fl--p{left:16px}.carr__fl--s{right:16px}
.carr__bas{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.carr__leg{display:flex;align-items:baseline;gap:12px;font-size:14.5px}
.carr__leg b{font-weight:400}
.carr__leg span{font-size:12.5px;opacity:.45;font-variant-numeric:tabular-nums}
.carr__pts{display:flex;gap:7px}
.carr__pts button{width:22px;height:4px;border:0;border-radius:2px;padding:0;cursor:pointer;
  background:color-mix(in srgb,var(--van) 22%,transparent);transition:background .3s var(--ease)}
.carr__pts button.is-on{background:var(--sepia)}

/* en-tête de section : titre à gauche, texte à droite — moins plat qu'un bloc centré */
.lotsec__head{display:grid;grid-template-columns:minmax(280px,.9fr) 1fr;gap:20px 70px;
  align-items:end;margin-bottom:38px;text-align:left}
.lotsec__lede{color:color-mix(in srgb,var(--van) 68%,transparent);font-size:16.5px;line-height:1.7}
.lotsec__head .eyebrow{margin-bottom:10px}

/* les points de confort de la plaquette. Ils sont cinq, pas six : en trois
   colonnes la dernière case restait vide, un trou en bas à droite. Six colonnes,
   deux par carte sur la première rangée et trois sur la seconde : les deux
   rangées tombent juste. Même trame que .apports sur l'accueil. */
.confort{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;list-style:none;
  margin:44px 0 0;padding:0;text-align:left;
  background:color-mix(in srgb,var(--tussock) 32%,transparent);
  border:1px solid color-mix(in srgb,var(--tussock) 32%,transparent);border-radius:12px;overflow:hidden}
.confort li{grid-column:span 2;background:var(--verre);
  display:flex;align-items:flex-start;gap:11px;
  padding:20px 22px;font-size:14.5px;line-height:1.45}
.confort li:nth-child(4),.confort li:nth-child(5){grid-column:span 3}
/* la pastille précède le libellé, comme la légende du plan masse. Elle était
   posée au-dessus : rien ne rattachait le point à sa ligne. Le décalage la cale
   sur le milieu optique de la première ligne, pas sur son haut. */
.confort li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;
  background:var(--tussock);border-radius:50%}


@media (max-width:900px){
  .lotsec__head{grid-template-columns:1fr;gap:16px;align-items:start;margin-bottom:28px}
  /* deux colonnes : cinq cartes laissent la dernière seule, elle prend la ligne */
  .confort{grid-template-columns:repeat(2,1fr)}
  .confort li,.confort li:nth-child(4),.confort li:nth-child(5){grid-column:auto}
  .confort li:last-child{grid-column:1/-1}
}
@media (max-width:560px){
  .carr__fl{width:38px;height:38px;font-size:14px}
  .carr__fl--p{left:10px}.carr__fl--s{right:10px}
  .carr__bas{flex-direction:column;align-items:flex-start;gap:12px}
  .confort{grid-template-columns:1fr}
  .confort li:last-child{grid-column:auto}
}

/* ============ page « Les villas » : tri par modèle ============ */
.tri{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.tri button{
  display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:14px;cursor:pointer;
  padding:11px 18px;border-radius:999px;color:var(--van);background:var(--verre);
  border:1px solid var(--verre-bord);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)
}
.tri button i{font-style:normal;font-size:12px;opacity:.5;font-variant-numeric:tabular-nums}
.tri button:hover{border-color:var(--sepia)}
.tri button.is-on{background:var(--mocha);color:var(--milk);border-color:var(--mocha)}
.tri button.is-on i{opacity:.6}
.tri__compte{font-size:14px;letter-spacing:.02em;opacity:.55;margin-bottom:20px}

/* le modèle choisi, en tête des résultats */
.modele{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:44px;align-items:center;
  margin-bottom:46px;padding:26px;border-radius:16px;background:var(--verre);
  border:1px solid var(--verre-bord);box-shadow:var(--verre-ombre)}
.modele__plan{margin:0;background:#fff;border-radius:8px;overflow:hidden}
.modele__plan img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block}
.modele__corps h2{font-size:clamp(24px,2.4vw,32px);margin-bottom:14px}
.modele__jour{font-size:16px;line-height:1.65;color:color-mix(in srgb,var(--van) 70%,transparent)}
.modele__corps .type__surf{margin:22px 0 0}
.modele__note{margin-top:16px;font-size:14px;color:var(--sepia)}

/* les villas sans rendu ne montrent pas la photo d'une autre */
.card__vide{display:grid;place-items:center;aspect-ratio:8/5;font-size:13px;opacity:.45;
  background:color-mix(in srgb,var(--tussock) 14%,transparent)}
.card__temoin{display:block;font-style:normal;font-size:12.5px;color:var(--sepia);margin-top:4px}
.card__go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sepia)}

@media (max-width:900px){
  .modele{grid-template-columns:1fr;gap:24px;padding:18px}
  .tri{gap:8px;margin-bottom:30px}
  .tri button{padding:9px 14px;font-size:13px}
}

/* ============ les seize villas en arc 3D ============ */
/* le voile ne s'assombrit qu'aux extrémités : la carte centrale reste franche */

@media (max-width:760px){
}
@media (prefers-reduced-motion:reduce){
}

/* PF-14 : la villa témoin est achevée, l'information suit le bloc photos */
.visitable{margin-top:38px;font-size:16px;color:color-mix(in srgb,var(--van) 76%,transparent)}
.visitable a{margin-left:10px;color:var(--sepia);text-decoration:underline;text-underline-offset:4px}

/* ============ glissière horizontale (PF-20) ============
   Aucune capture du défilement vertical : ni section collante, ni hauteur
   gonflée, ni écouteur sur la molette. La page descend sans interruption. */
.gliss{margin-top:44px}
.gliss__cadre{overflow:hidden;border-radius:16px}
/* la section des lots va bord à bord : pas de coins arrondis */
#glissLots .gliss__cadre{border-radius:0}
.gliss__piste{display:flex;transition:transform .6s var(--ease)}
.gliss__v{flex:0 0 calc(100% / var(--par-page,1));min-width:0;padding-inline:0}
/* l'espace entre cartes ne s'applique que lorsqu'il y en a plusieurs de front */
.gliss__v{padding-inline:0}
.gliss__piste:not([style*="--par-page:1"]) .gliss__v{padding-inline:0 24px}
.gliss__nav{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:26px 0 0;flex-wrap:wrap;padding-inline:16px}
/* la glissière ne doit pas coller à ce qui la suit : les deux se touchaient */
.gliss + .center,.gliss ~ .center{margin-top:40px}
/* flèches allégées : 52 px de rond à côté d'un libellé de 20 px déséquilibrait */
.gliss__nav .rnd{width:44px;height:44px;font-size:15px;
  border-color:color-mix(in srgb,var(--tussock) 55%,transparent)}
.gliss__lu{font-size:13.5px;opacity:.6;min-width:170px;text-align:center;
  font-variant-numeric:tabular-nums;margin:0}
.gliss__pts{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  max-width:100%;min-width:0}
.gliss__pts button{width:22px;height:4px;border:0;border-radius:2px;padding:0;cursor:pointer;
  background:color-mix(in srgb,var(--mocha) 26%,transparent);transition:background .3s var(--ease)}
.gliss__pts button.is-on{background:var(--mocha)}
.gliss .rnd:disabled{opacity:.3;cursor:default}
.gliss .rnd:disabled:hover{background:none}

/* ---------- 05 · deux colonnes de photographies, épinglées ----------
   La page se fige le temps que les trois paires passent : colonne de gauche vers
   le bas, colonne de droite vers le haut. Épinglage demandé explicitement. */
/* hauteur de repli : le script la recalcule d'après la cadence souhaitée */
.pin{position:relative;height:490vh;background:var(--mocha)}
.pin__track{position:sticky;top:0;height:100svh;overflow:hidden}
.pin__stage{position:relative;height:100%}
.cols{position:absolute;inset:0;overflow:hidden}
.cols__c{position:absolute;top:0;left:0;width:50%;height:calc(var(--n,3) * 100%)}
.pin.is-live .cols__c{will-change:transform}
.cols__c--d{left:50%}
.cols__v{height:calc(100% / var(--n,3));overflow:hidden}
.cols__v img{width:100%;height:100%;object-fit:cover;display:block}
.pin__dots{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;gap:7px;z-index:3}
.pin__dots i{width:7px;height:4px;border-radius:2px;background:var(--milk);opacity:.4;
  transition:width .4s var(--ease),opacity .4s var(--ease)}
.pin__dots i.is-on{width:24px;opacity:1}

/* ---- sur petit écran : la même cinématique, couchée ----
   Deux colonnes de 187 px pour des photographies en 16/9 n'en montraient qu'un
   huitième : 87 % de la largeur perdue. La cause n'est pas la largeur de
   l'écran mais le FORMAT du cadre — une photo couchée dans une fenêtre debout
   se fait rogner, et aucun centrage n'y change rien.

   On garde donc l'effet, tourné d'un quart de tour. Sur grand écran, ce qui
   fait la cinématique, ce sont deux colonnes qui se croisent : la gauche
   descend pendant que la droite remonte. Couché, ce sont deux RANGÉES : les
   extérieurs filent vers la gauche, les intérieurs reviennent vers la droite.
   Même geste, même croisement, sur la largeur.

   Chaque vue est une bande en 4/3, 84 % de la largeur de l'écran, et les
   voisines dépassent de part et d'autre pour dire que ça glisse. Mesuré à
   375 px : 26 % de perte au lieu de 70 % si la bande occupait toute la
   hauteur. Deux rangées plutôt qu'une occupent la hauteur sans rien rogner
   de plus — c'est le format du cadre qui rogne, pas sa taille. */
/* Fond de page sous les photographies, et non le brun sombre : couché, le fond
   se voit — il ne se voyait pas sur grand écran, où les deux colonnes couvrent
   tout l'écran. Deux éléments étaient posés en clair POUR ce fond sombre, le
   crédit photo et les points de progression : sur le crème ils devenaient
   invisibles. Ils repassent donc à l'encre de la marque, ici seulement. */
.pin--rail{background:var(--page)}
.pin--rail .pin__track{overflow:hidden}
.pin--rail .pin__stage{overflow:hidden}
.pin--rail .pin__dots i{background:var(--van);opacity:.22}
.pin--rail .pin__dots i.is-on{opacity:.8}
.pin--rail .lotv__credit{color:var(--van);opacity:.5;text-shadow:none}
.pin--rail .cols{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:2vw;overflow:hidden}
/* deux RANGÉES, et non deux colonnes : extérieurs au-dessus, intérieurs en
   dessous, chacune plus large que l'écran et tirée en sens contraire. */
.pin--rail .cols__c{position:static;left:auto;width:max-content;height:auto;display:flex}
/* La hauteur d'abord, la largeur ensuite. En partant de la largeur — 84vw —
   les deux rangées ne remplissaient que 60 % de l'écran d'un téléphone et
   laissaient de larges bandes vides ; et sur une tablette, les mêmes 84vw
   dépassaient la hauteur disponible. En partant de 38svh, la composition garde
   les mêmes proportions partout. Le cadre reste couché — 16/10 — donc chaque
   vue est plus large que l'écran : on en voit la tranche centrale, ce qui
   montre PLUS de photographie qu'une vignette entière plus petite. */
.pin--rail .cols__v{flex:0 0 auto;width:auto;height:38svh;aspect-ratio:16/10;
  margin-inline:1vw;border-radius:12px;overflow:hidden}
.pin.pin--rail.is-live .cols__c{will-change:transform}

.pin--liste{height:auto!important;background:var(--mocha);padding:0}
.pin--liste .pin__track{position:static;height:auto;overflow:visible}
.pin--liste .pin__stage{height:auto}
.pin--liste .cols{position:static;display:flex;flex-direction:column}
.pin--liste .cols__c{position:static;width:100%;height:auto;transform:none!important;
  display:contents}
.pin--liste .cols__v{height:auto;aspect-ratio:4/3}
/* Entrelacées : extérieur, intérieur, extérieur… « display:contents » remet les
   six vues au même niveau, il ne suffit pas à les alterner — sans « order »,
   on verrait les trois extérieurs puis les trois intérieurs. */
.pin--liste .cols__c .cols__v:nth-child(1){order:1}
.pin--liste .cols__c .cols__v:nth-child(2){order:3}
.pin--liste .cols__c .cols__v:nth-child(3){order:5}
.pin--liste .cols__c--d .cols__v:nth-child(1){order:2}
.pin--liste .cols__c--d .cols__v:nth-child(2){order:4}
.pin--liste .cols__c--d .cols__v:nth-child(3){order:6}
.pin--liste .pin__dots{display:none}
.pin--liste .lotv__credit{position:static;padding:16px clamp(16px,5vw,24px)}

/* Le crédit photo. La vignette de lot qui l'accompagnait — .lotv__vignette et
   ses règles — a été retirée le 6 septembre : rien ne doit plus recouvrir les
   photographies de cette section. */
.lotv__credit{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,44px);z-index:3;
  font-size:11px;letter-spacing:.04em;color:var(--milk);opacity:.55;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* Puces d'état. La règle de base avait disparu avec l'ancienne fiche de lot :
   il ne restait que la couleur, sans écart ni forme. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips b{font-weight:400;font-size:12.5px;line-height:1;padding:8px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--mocha) 12%,transparent);color:var(--van);
  border:1px solid color-mix(in srgb,var(--mocha) 18%,transparent)}

/* la villa témoin dans la glissière */
.tcard{display:grid;grid-template-columns:330px 1fr;gap:52px;padding:26px;
  background:var(--verre);border:1px solid var(--verre-bord);
  box-shadow:var(--verre-ombre);border-radius:14px}
.tcard img{width:100%;height:100%;min-height:min(284px,52vw);object-fit:cover;border-radius:8px}
.tcard__body{display:flex;flex-direction:column;padding:6px 0}
.tcard__body p{font-size:17px;line-height:1.72;opacity:.75}
.tcard__body .rule{margin:auto 0 20px}

@media (max-width:900px){
  .lotv__photos{height:min(56vh,420px)}
  .tcard{grid-template-columns:1fr;gap:20px;padding:18px}
  .gliss__piste:not([style*="--par-page:1"]) .gliss__v{padding-inline:0 14px}
  .gliss__lu{min-width:0;font-size:12.5px}
}


/* Une seule planche sur la page : le plan de la villa. Les façades et les plans
   cotés partent dans la brochure. Quatre planches aux formats et aux densités de
   trait différents faisaient une grille en escalier, et leurs cartes blanches
   perçaient le crème de la page. */
/* les planches vont de 0,55 à 1,66 de rapport selon le lot : aucun cadre fixe ne
   les contient sans laisser du vide sur les côtés. C'est donc le cadre qui épouse
   le dessin, borné en hauteur pour que les portraits ne dévorent pas l'écran. */
/* colonne resserrée : le plan portrait et l'encart brochure dessous partagent
   la même largeur, au lieu d'une carte étroite sous un bandeau plein */
.planches{max-width:860px;margin:34px auto 0;text-align:left;min-height:420px}
.planche{margin:0 auto;width:fit-content;max-width:100%;border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--milk) 62%,#fff);
  border:1px solid color-mix(in srgb,var(--tussock) 26%,transparent)}
.planche img{display:block;width:auto;max-width:100%;max-height:min(76vh,780px);
  margin:0 auto;padding:20px;box-sizing:border-box}
.planche figcaption{padding:12px 18px 14px;font-size:13.5px;
  color:color-mix(in srgb,var(--van) 66%,transparent);
  border-top:1px solid color-mix(in srgb,var(--tussock) 20%,transparent)}
/* le renvoi vers la brochure, sous la planche */
.planche-suite{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:18px;margin-top:22px;padding:20px 24px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--tussock) 26%,transparent)}
.planche-suite p{margin:0;font-size:15px;line-height:1.6;opacity:.75;max-width:52ch}
@media (max-width:760px){
  .planches{min-height:280px}
  .planche img{max-height:62vh;padding:12px}
  .planche-suite{padding:18px 20px}
}

/* PF-24 : le formulaire court, une adresse et rien d'autre */
.form--court label{margin-bottom:6px}
.form__consent{margin-top:14px;font-size:12.5px;line-height:1.5;
  color:color-mix(in srgb,var(--van) 55%,transparent)}
.foot__consent{margin-top:12px;font-size:12px;line-height:1.5;
  color:color-mix(in srgb,var(--van) 52%,transparent);max-width:520px}

/* ============ fenêtre de demande de brochure ============ */
.modale{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.modale[hidden]{display:none}
.modale__fond{position:absolute;inset:0;background:color-mix(in srgb,var(--mocha) 62%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modale__boite{position:relative;width:min(440px,100%);padding:34px 32px 30px;border-radius:16px;
  background:var(--milk);border:1px solid var(--verre-bord);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55);max-height:90vh;overflow-y:auto}
.modale__x{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;background:none;
  font-size:24px;line-height:1;color:var(--van);opacity:.45;cursor:pointer}
.modale__x:hover{opacity:1}
.modale__boite h3{font-size:24px;letter-spacing:-.02em}
.modale__sous{margin-top:8px;font-size:14.5px;line-height:1.55;
  color:color-mix(in srgb,var(--van) 65%,transparent)}
.modale__form{display:grid;gap:14px;margin-top:22px}
.modale__form label{display:grid;gap:6px}
.modale__form span{font-size:12.5px;opacity:.6}
.modale__form input{width:100%;height:46px;padding:0 14px;border-radius:8px;font:inherit;font-size:15px;
  color:var(--van);background:#fff;outline:none;
  border:1px solid color-mix(in srgb,var(--tussock) 42%,transparent)}
.modale__form input:focus{border-color:var(--sepia)}
.modale__form .btn{margin-top:6px;justify-content:center}
.modale__consent{font-size:12px;line-height:1.5;color:color-mix(in srgb,var(--van) 55%,transparent)}
.modale__ok{margin-top:22px;font-size:16px;line-height:1.6}
/* l'échec d'envoi doit se voir : le visiteur croyait sa demande partie */
/* l'erreur d'un formulaire de la page Contact, posée au-dessus des deux formulaires */
.forms__erreur{max-width:760px;margin:34px auto 0;padding:16px 20px;border-radius:10px;
  font-size:15px;line-height:1.55;color:#8A3B22;
  background:color-mix(in srgb,#8A3B22 8%,var(--page));
  border:1px solid color-mix(in srgb,#8A3B22 30%,transparent)}
.modale__err{margin-top:16px;font-size:14px;line-height:1.55;color:#8A3B22;
  padding:12px 14px;border-radius:8px;
  background:color-mix(in srgb,#8A3B22 8%,transparent);
  border:1px solid color-mix(in srgb,#8A3B22 22%,transparent)}
@media (max-width:480px){ .modale__boite{padding:28px 20px 24px} }

/* titre des acteurs du projet, au-dessus de la pilule */
.acteurs__t{font-size:clamp(24px,2.6vw,34px);margin-bottom:26px}

/* les photographies ne sont pas celles du lot affiché : on le dit, discrètement */
.lotv__credit{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,36px);
  font-size:11px;letter-spacing:.04em;color:var(--milk);opacity:.55;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* espace propre entre une glissière et l'appel à l'action qui la suit */
.gliss__apres{margin-top:44px}

/* ---------- le dilemme, puis la réponse ---------- */
/* deux colonnes : la question à gauche, ce que le domaine y répond à droite,
   posé dans un cadre pour qu'on lise la réponse comme une réponse */
.dilemme{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.dilemme__q h2{max-width:15ch}
.dilemme__q p{margin-top:22px;font-size:16.5px;line-height:1.75;opacity:.72}
/* la colonne de gauche était courte : la photo occupe le vide sous le texte */
.dilemme__img{margin:26px 0 0;border-radius:12px;overflow:hidden}
.dilemme__img img{display:block;width:100%;height:auto}
.dilemme__r{padding:38px 40px;border-radius:14px;
  background:color-mix(in srgb,var(--milk) 72%,transparent);
  border:1px solid color-mix(in srgb,var(--tussock) 34%,transparent)}
.dilemme__r h3{font-size:23px;line-height:1.35}
.dilemme__r p{margin:18px 0 26px;font-size:16px;line-height:1.7;opacity:.75}
/* les distances : le chiffre porte la ligne, la destination l'accompagne.
   Même traitement que la bande de chiffres plus bas — nombre au corps du titre,
   unité en sourdine. Sans cette hiérarchie le bloc lisait comme un tableau. */
.acces{margin:26px 0 0}
.acces > div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0}
.acces > div + div{border-top:1px solid color-mix(in srgb,var(--tussock) 22%,transparent)}
.acces dt{font-size:14.5px;line-height:1.45;opacity:.62}
/* les trois premières se comptent en minutes, les deux dernières en heures :
   le filet plus marqué sépare ce qui est à côté de ce qui se conduit */
.acces__route{border-top-color:color-mix(in srgb,var(--tussock) 46%,transparent)!important}
.acces dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.acces dd b{font-weight:400;font-size:27px;line-height:1;letter-spacing:-.034em}
.acces dd span{font-size:14px;opacity:.5}
.acces__note{margin:22px 0 0;font-size:14px;line-height:1.6;opacity:.62}
@media (max-width:900px){.dilemme{grid-template-columns:1fr;gap:34px}
  .dilemme__q h2{max-width:none}.dilemme__r{padding:30px 26px}
  .acces dd b{font-size:24px}}

/* ---------- ce que chaque villa apporte ---------- */
.apports{list-style:none;margin:34px 0 0;padding:0;
  /* six colonnes plutôt que trois : les trois premières cartes tiennent sur deux
     colonnes, les deux dernières sur trois, ce qui remplit la seconde rangée
     au lieu de laisser un trou */
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:color-mix(in srgb,var(--tussock) 34%,transparent);
  border:1px solid color-mix(in srgb,var(--tussock) 34%,transparent);border-radius:12px;overflow:hidden}
.apports li{grid-column:span 2;background:var(--page);padding:30px 28px}
.apports li:nth-child(4),.apports li:nth-child(5){grid-column:span 3}
.apports b{display:block;font-weight:400;font-size:18.5px;line-height:1.35}
.apports span{display:block;margin-top:10px;font-size:14.5px;line-height:1.65;opacity:.68}
@media (max-width:900px){.apports{grid-template-columns:1fr}
  .apports li,.apports li:nth-child(4),.apports li:nth-child(5){grid-column:auto}}

/* les trois repères sous les boutons du héros */
.hero__reperes{margin-top:26px;font-size:13.5px;letter-spacing:.02em;
  color:color-mix(in srgb,var(--milk) 82%,transparent)}
.hero__reperes i{font-style:normal;opacity:.5;margin:0 8px}

/* ============ le journal ============
   Douze articles qui répondent aux questions que se pose un acheteur étranger.
   Ils remplacent la page chantier depuis le 7 septembre. Colonne étroite,
   mesure de lecture d'environ 68 signes : c'est du texte long, pas de la
   plaquette, et il se lit de haut en bas sans rien à survoler. */
.jrn{display:grid;gap:1px;background:color-mix(in srgb,var(--tussock) 30%,transparent);
  border:1px solid color-mix(in srgb,var(--tussock) 30%,transparent);
  border-radius:14px;overflow:hidden}
/* Deux colonnes franches : la vignette sur toute la hauteur, le texte à côté.
   Le texte est groupé dans un conteneur — sans lui, la grille répartit chaque
   paragraphe dans une cellule et la carte part en morceaux.

   La vignette est carrée à la source : la hauteur de la carte dépend du texte,
   et un format paysage y perdait jusqu'à 45 % de sa largeur au recadrage. */
.jrn__carte{display:grid;grid-template-columns:minmax(200px,30%) 1fr;
  background:var(--page);transition:background .3s var(--ease)}
.jrn__carte img{width:100%;height:100%;object-fit:cover;display:block}
.jrn__txt{padding:34px 38px;align-self:center}
.jrn__carte:hover{background:color-mix(in srgb,var(--oat) 26%,var(--milk))}
.jrn__carte time{display:block;font-size:13px;color:var(--sepia);letter-spacing:.03em}
.jrn__carte h2{margin-top:10px;font-size:clamp(21px,2.4vw,27px);line-height:1.25;max-width:26ch}
.jrn__carte p{margin-top:12px;font-size:15.5px;line-height:1.65;opacity:.72;max-width:62ch}
.jrn__lire{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-size:13.5px;color:var(--sepia)}
.jrn__carte:hover .arw{transform:translateX(4px)}
.jrn__lire .arw{transition:transform .3s var(--ease)}

/* la bannière de l'article, sous le titre plutôt qu'au-dessus : le lecteur
   arrive par une question, il doit la lire avant de voir une villa */
.art__banniere{margin:34px 0 0;border-radius:12px;overflow:hidden}
.art__banniere img{width:100%;height:auto;display:block}

/* ---------- un article ---------- */
.art{padding:clamp(40px,7vw,84px) 0}
.art h1{font-size:clamp(28px,4.2vw,46px);line-height:1.14;max-width:20ch;margin-top:18px}
.art__date{margin-top:18px;font-size:13.5px;color:var(--sepia)}
.art__corps{margin-top:40px;font-size:17px;line-height:1.75}
.art__corps > * + *{margin-top:22px}
/* le premier paragraphe est la réponse : elle se lit avant tout le reste */
.art__corps > p:first-child{font-size:19.5px;line-height:1.6;opacity:.92}
.art__corps h3{margin-top:44px;font-size:22px;line-height:1.3}
.art__corps h4{margin-top:34px;font-size:18px;line-height:1.35}
.art__corps ul,.art__corps ol{padding-left:22px}
.art__corps li + li{margin-top:10px}
.art__corps li::marker{color:var(--tussock)}
.art__corps b{font-weight:500}
.art__corps a{text-decoration:underline;text-underline-offset:3px;color:var(--sepia)}

/* le tableau des frais déborde sur un téléphone : il défile seul, la page non */
.art__tab{overflow-x:auto;margin-top:26px;
  border:1px solid color-mix(in srgb,var(--tussock) 30%,transparent);border-radius:10px}
.art__tab table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.art__tab th,.art__tab td{text-align:left;padding:13px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--tussock) 20%,transparent)}
.art__tab th{background:color-mix(in srgb,var(--oat) 40%,transparent);font-weight:400;
  color:var(--van)}
.art__tab tr:last-child td{border-bottom:0}

/* l'encadré du programme, en fin d'article */
.art__pdlf{margin-top:40px;padding:28px 30px;border-radius:12px;
  background:color-mix(in srgb,var(--oat) 34%,var(--milk));
  border:1px solid color-mix(in srgb,var(--tussock) 34%,transparent);
  font-size:16.5px;line-height:1.7}
.art__mention{margin-top:26px;font-size:13.5px;line-height:1.6;opacity:.55;font-style:italic}

.art__voisins{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:56px;
  background:color-mix(in srgb,var(--tussock) 30%,transparent);
  border:1px solid color-mix(in srgb,var(--tussock) 30%,transparent);
  border-radius:12px;overflow:hidden}
.art__voisin{background:var(--page);padding:24px 26px;font-size:16px;line-height:1.4;
  transition:background .3s var(--ease)}
.art__voisin:hover{background:color-mix(in srgb,var(--oat) 26%,var(--milk))}
.art__voisin span{display:block;font-size:12.5px;color:var(--sepia);margin-bottom:8px}
.art__voisin--s{text-align:right}
/* un seul voisin ne doit pas occuper la moitié de la largeur */
.art__voisins > :only-child{grid-column:1/-1}

.art__cta{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;margin-top:56px;padding-top:34px;
  border-top:1px solid color-mix(in srgb,var(--tussock) 34%,transparent)}
.art__cta p{font-size:16.5px;opacity:.75;max-width:44ch}

@media (max-width:820px){
  /* la vignette passe au-dessus : à 260 px de large elle écrase le titre */
  .jrn__carte{grid-template-columns:1fr}
  .jrn__carte img{aspect-ratio:16/9;height:auto}
  .jrn__txt{padding:26px 24px}
}
@media (max-width:700px){
  .art__voisins{grid-template-columns:1fr}
  .art__voisin--s{text-align:left}
}