/* Atelier Caba — site v2 (base : fancy-navigation-block de Nat Davydova, réécrit en CSS simple)
   Palette minérale : terre, ardoise, bronze, prune, vert-de-gris — un ton par rubrique.
   Typo : Jost (géométrique), en écho au logotype ATELIER / CABA / ARCHITECTE. */

 /* Police Jost hébergée sur le site (pas d'appel à Google : plus rapide et conforme RGPD) */
@font-face{ font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/jost-latin-wght-normal.woff2) format('woff2'); }
@font-face{ font-family: 'Jost'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/jost-latin-wght-italic.woff2) format('woff2'); }

:root{
  --c-particuliers: #7b4a36;  /* terre cuite sourde */
  --c-coproprietes: #3d4850;  /* ardoise */
  --c-galerie:      #5b5639;  /* bronze olive */
  --c-bibliotheque: #4d4352;  /* prune ardoisée */
  --c-contact:      #3e5750;  /* vert-de-gris */

  /* Fonds des rubriques — 5 essais, un par rubrique (à choisir) */
  --noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* grain allégé (~1/3) pour les photos de l'accueil */
  --noise-light-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-dark-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* A. Particuliers — dégradé « lumière rasante » */
  --bg-particuliers:
    radial-gradient(110% 80% at 12% 0%, rgba(176,112,82,.85) 0%, rgba(176,112,82,0) 62%),
    radial-gradient(90% 70% at 100% 100%, rgba(74,40,27,.7) 0%, rgba(74,40,27,0) 70%),
    linear-gradient(165deg, #8a5440 0%, #6a3c2a 100%);
  /* B. Copropriétés — grain minéral (ardoise / béton) */
  --bg-coproprietes:
    var(--noise-light), var(--noise-dark),
    linear-gradient(180deg, #46525b 0%, #323b42 100%);
  /* C. Galerie — papier millimétré (trame fine + trame forte) */
  --bg-galerie:
    repeating-linear-gradient(0deg, rgba(251,250,247,.11) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(251,250,247,.11) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(251,250,247,.05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(251,250,247,.05) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #5f5b3d 0%, #4b482f 100%);
  /* D. Bibliothèque — hachures de coupe (poché) */
  --bg-bibliotheque:
    repeating-linear-gradient(45deg, rgba(251,250,247,.07) 0 1px, transparent 1px 10px),
    linear-gradient(200deg, #594b5f 0%, #3f3547 100%);
  /* E. L'atelier — patine / aquarelle (taches douces + grain) */
  --bg-contact:
    var(--noise-light),
    radial-gradient(55% 45% at 18% 18%, rgba(126,166,150,.55) 0%, rgba(126,166,150,0) 70%),
    radial-gradient(45% 55% at 88% 28%, rgba(32,58,51,.85) 0%, rgba(32,58,51,0) 70%),
    radial-gradient(65% 55% at 55% 100%, rgba(98,135,118,.6) 0%, rgba(98,135,118,0) 70%),
    #3e5750;

  --paper: #f5f2ec;
  --paper-2: #ebe6dc;
  --ink: #1d1b18;
  --ink-soft: #5d5850;
  --rule: #d6cfc2;
  --white: #fbfaf7;

  --serif: 'Jost', 'Futura', 'Century Gothic', sans-serif;  /* géométrique, proche du Futura du logo */
  --sans: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --line: 1px solid rgba(251,250,247,.55);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin: 0; height: 100%; }
body{
  background: var(--ink);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.tab-open{ overflow: hidden; }
img{ display: block; max-width: 100%; }
::selection{ background: var(--ink); color: var(--paper); }
:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; }
[tabindex="-1"]:focus{ outline: none; }

/* ---------- Logotype (grand, en ouverture) ---------- */
.brandbar{
  position: fixed; inset: 0 0 auto 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 16px 0;
  color: var(--white);
  pointer-events: none;
}
.brandbar a{ pointer-events: auto; color: inherit; text-decoration: none; }
.wordmark{ margin: 0; display: flex; flex-direction: column; align-items: center; font: inherit; }
.wordmark a{ display: block; }
.logo{ display: block; width: min(68vw, 360px); aspect-ratio: 2320 / 690; overflow: visible; filter: drop-shadow(0 2px 18px rgba(20,18,15,.35)); }
/* Logotype en texte Jost (même dessin que le logo : ATELIER / CABA / ARCHITECTE, A superposés) */
.logo-text{ font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif; font-weight: 350; font-size: 300px; fill: currentColor; }

/* Animation d'arrivée : ATELIER depuis la gauche, CABA depuis la droite, ARCHITECTE depuis la gauche */
@keyframes from-left  { from { transform: translateX(-320px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes from-right { from { transform: translateX(320px);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-up    { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: .9; } }
.logo .w{ animation: 1.3s cubic-bezier(.16,1,.3,1) both paused; }
/* l'animation attend que la police Jost soit chargée (sinon les A ne tomberaient pas pile) */
.fonts-ready .logo .w, .fonts-ready .wordmark__tagline{ animation-play-state: running; }
.logo .w--atelier{ animation-name: from-left; animation-delay: .15s; }
.logo .w--caba{ animation-name: from-right; animation-delay: .35s; }
.logo .w--architecte{ animation-name: from-left; animation-delay: .55s; }
.wordmark__tagline{ animation: fade-up .9s cubic-bezier(.16,1,.3,1) 1.2s both paused; }
@media (prefers-reduced-motion: reduce){
  .logo .w, .wordmark__tagline{ animation: none; }
  .fancy-nav__tab-img img, .fancy-nav__tab-img .fancy-nav__tab-title, .fancy-nav__tab-description{ translate: none !important; }
}

.wordmark__tagline{
  margin-top: 14px;
  font: 400 .6rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  text-align: center; opacity: .9;
}
.brandbar__contact{
  margin-top: 14px; padding: 11px 18px 10px;
  font: 500 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid rgba(251,250,247,.75);
  background: rgba(20,18,15,.12);
  backdrop-filter: blur(2px);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.brandbar__contact:hover, .brandbar__contact:focus-visible{ background: var(--white); color: var(--ink); border-color: var(--white); }
body.tab-open .brandbar{ visibility: hidden; }

@media (min-width: 750px){
  .brandbar{ padding-top: clamp(40px, 8vh, 88px); }
  .logo{ width: clamp(340px, 36vw, 620px); }
  .wordmark__tagline{ margin-top: clamp(16px, 2.2vh, 26px); font-size: .74rem; letter-spacing: .34em; }
  .brandbar__contact{ position: absolute; top: 24px; right: 36px; margin: 0; }
}

/* ---------- Bloc principal ---------- */
.fancy-nav{
  position: relative;
  width: 100%;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.fancy-nav::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(20,18,15,.62) 0, rgba(20,18,15,.25) 30%, rgba(20,18,15,0) 48%),
    linear-gradient(to top, rgba(20,18,15,.6) 0, rgba(20,18,15,.25) 55%, rgba(20,18,15,.3) 100%);
  pointer-events: none;
}
.fancy-nav__imgs, .fancy-nav__img{ position: absolute; inset: 0; }
.fancy-nav__img{ opacity: 0; transition: opacity .7s var(--ease); }
.fancy-nav__img.is-current{ opacity: 1; }
.fancy-nav__img img{ width: 100%; height: 100%; object-fit: cover; }
/* Grain (le même que Copropriétés) posé sur les photos de l'accueil : unifie et masque le manque de définition */
.fancy-nav__imgs::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--noise-light-soft), var(--noise-dark-soft);
  pointer-events: none;
}

.fancy-nav__list{
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap;
  height: 100%;
}
.fancy-nav__item{
  --tone: var(--ink);
  position: relative;
  display: flex; align-items: flex-end;
  width: 100%; height: 20%;
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
}
.fancy-nav__item[data-tab="particuliers"]{ --tone: var(--c-particuliers); --tone-bg: var(--bg-particuliers); }
.fancy-nav__item[data-tab="coproprietes"]{ --tone: var(--c-coproprietes); --tone-bg: var(--bg-coproprietes); }
.fancy-nav__item[data-tab="galerie"]{ --tone: var(--c-galerie); --tone-bg: var(--bg-galerie); }
.fancy-nav__item[data-tab="bibliotheque"]{ --tone: var(--c-bibliotheque); --tone-bg: var(--bg-bibliotheque); }
.fancy-nav__item[data-tab="contact"]{ --tone: var(--c-contact); --tone-bg: var(--bg-contact); }
.fancy-nav__item:not(:last-child){ border-bottom: var(--line); }
.fancy-nav__item:focus-visible{ outline-offset: -6px; }
/* Titres et textes des panneaux centrés dans leur colonne */
.fancy-nav__item-details{ text-align: center; }
.fancy-nav__title{ transform-origin: center bottom !important; text-indent: .14em; }  /* compense l'espacement après la dernière lettre */
.fancy-nav__description{ margin-left: auto; margin-right: auto; }
.fancy-nav__more{ padding-left: 40px; }  /* équilibre le trait qui suit le mot */
/* Trait vertical entre panneaux : il apparaît en fondu sous le logo, sans le couper */
.fancy-nav__item::before{
  position: absolute; top: 0; right: 0; bottom: 0; width: 1px; z-index: 1;
  background: linear-gradient(to bottom, rgba(251,250,247,0) 0, rgba(251,250,247,0) 34%, rgba(251,250,247,.55) 62%);
  pointer-events: none;
}

.fancy-nav__item-details{
  width: 100%;
  padding: 14px 24px;
  transition: background-color .45s var(--ease);
}
.fancy-nav__title{
  margin: 0;
  font: 400 clamp(1.4rem, 6.2vw, 1.8rem)/1.1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  transform-origin: left bottom;
  transition: transform .6s var(--ease), letter-spacing .6s var(--ease);
}
/* Bloc qui se déplie au survol (hauteur réelle du texte, quelle que soit sa longueur) */
.fancy-nav__reveal{ display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease); }
.fancy-nav__reveal > div{ min-height: 0; overflow: hidden; }
.fancy-nav__description{
  margin: .45em 0 0;
  max-width: 34ch;
  font-size: .95rem; line-height: 1.5;
  color: rgba(251,250,247,.9);
}
.fancy-nav__more{
  display: none;
  margin-top: 20px;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.fancy-nav__more::after{
  content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px;
  vertical-align: middle; background: currentColor;
  transition: width .4s var(--ease);
}

/* Mobile : 5 bandes empilées, titre + une ligne */
@media (max-width: 749px){
  .fancy-nav__list{ padding-top: calc(min(68vw, 360px) * .27 + 110px); }
  .fancy-nav__item{ height: 20%; }
  .fancy-nav__description{
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* Tablette : 3 en haut, 2 en bas */
@media (min-width: 750px){
  .brandbar{ padding: 28px 36px; }
  .fancy-nav__item{ height: 50%; width: 50%; }
  .fancy-nav__item:nth-child(-n+3){ width: calc(100% / 3); }
  .fancy-nav__item:nth-child(-n+3){ border-bottom: var(--line); }
  .fancy-nav__item:nth-child(n+4){ border-bottom: none; }
  .fancy-nav__item{ border-right: none !important; }
  .fancy-nav__item:nth-child(1)::before, .fancy-nav__item:nth-child(2)::before, .fancy-nav__item:nth-child(4)::before{ content: ""; }
  .fancy-nav__item:nth-child(n+4)::before{ background: rgba(251,250,247,.55); }
  .fancy-nav__item-details{ padding: 28px 30px 32px; }
  .fancy-nav__title{ font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
  .fancy-nav__more{ display: inline-block; }
}

/* Le tiers haut de l'écran (zone du logo) n'est ni cliquable ni survolable :
   seule une « zone active » sous ce tiers réagit (tablette et ordinateur) */
@media (min-width: 750px){
  .fancy-nav__item{ pointer-events: none; }
  .fancy-nav__item::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0;
    pointer-events: auto;
  }
  .fancy-nav__item-details{ position: relative; z-index: 1; pointer-events: auto; }
  .fancy-nav__item:nth-child(-n+3)::after{ top: 66.667%; }  /* rangée du haut (50 % de hauteur) : 1/3 de l'écran = 2/3 de la case */
}
@media (min-width: 1200px){
  .fancy-nav__item:nth-child(n)::after{ top: 33.333%; }
}

/* Grand écran : 5 colonnes */
@media (min-width: 1200px){
  .fancy-nav__item, .fancy-nav__item:nth-child(-n+3){ width: 20%; height: 100%; border-bottom: none; }
  .fancy-nav__item:not(:last-child)::before{ content: ""; }
  .fancy-nav__item:nth-child(n+4)::before{ background: linear-gradient(to bottom, rgba(251,250,247,0) 0, rgba(251,250,247,0) 34%, rgba(251,250,247,.55) 62%); }
  .fancy-nav__item-details{ padding: 36px 28px 40px; }
  .fancy-nav__title{ font-size: clamp(1.2rem, 1.55vw, 1.75rem); letter-spacing: .14em; }
}

/* Survol (écrans avec souris) : le bandeau de couleur remonte et se déplie */
@media (hover: hover) and (min-width: 750px){
  .fancy-nav__reveal{ grid-template-rows: 0fr; }
  .fancy-nav__description, .fancy-nav__more{
    opacity: 0; transform: translateY(12px);
    transition: opacity .35s var(--ease), transform .5s var(--ease);
  }
  .fancy-nav__item-details::before{
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--tone-bg); background-color: var(--tone);
    opacity: 0; transition: opacity .45s var(--ease);
  }
  .fancy-nav__item:hover .fancy-nav__item-details::before,
  .fancy-nav__item:focus-visible .fancy-nav__item-details::before{ opacity: 1; }
  /* Onglet tiré : son bandeau passe en aplat, de la même teinte que le drap qu'il entraîne */
  .fancy-nav__item.is-pulled .fancy-nav__item-details{ background-color: var(--tone); }
  .fancy-nav__item.is-pulled .fancy-nav__item-details::before{ opacity: 0 !important; transition-duration: .25s; }
  .fancy-nav__item:hover .fancy-nav__reveal,
  .fancy-nav__item:focus-visible .fancy-nav__reveal{ grid-template-rows: 1fr; }
  .fancy-nav__item:hover .fancy-nav__description,
  .fancy-nav__item:hover .fancy-nav__more,
  .fancy-nav__item:focus-visible .fancy-nav__description,
  .fancy-nav__item:focus-visible .fancy-nav__more{
    opacity: 1; transform: none; transition-delay: .1s;
  }
  .fancy-nav__item:hover .fancy-nav__more::after{ width: 48px; }
  /* Grossissement du titre au survol */
  .fancy-nav__item:hover .fancy-nav__title,
  .fancy-nav__item:focus-visible .fancy-nav__title{ transform: scale(1.1); }
  /* Profondeur : le titre et le texte suivent légèrement la souris, à des vitesses différentes */
  .fancy-nav__title{ translate: calc(var(--mx, 0) * .05px) calc(var(--my, 0) * .03px); }
  .fancy-nav__reveal{ translate: calc(var(--mx, 0) * .03px) calc(var(--my, 0) * .015px); }
  .fancy-nav__title, .fancy-nav__reveal{ transition-property: transform, letter-spacing, grid-template-rows, translate; transition-duration: .6s, .6s, .55s, 1s; transition-timing-function: var(--ease); }
}

/* ---------- Volets plein écran ---------- */
.fancy-nav__tabs{ position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.fancy-nav__tabs.is-visible{ pointer-events: auto; }

.fancy-nav__tab{
  position: absolute; inset: 0;
  padding: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
  scrollbar-color: rgba(251,250,247,.4) transparent;
}
.fancy-nav__tab.is-visible{ opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
/* Ouverture animée (rideau) : le volet apparaît sans fondu, c'est le mouvement qui fait la transition */
.fancy-nav__tab.no-fade{ transition: none; }
.fancy-nav__tab.no-fade.is-visible{ opacity: 1; visibility: visible; }

/* Rideau de couleur qui balaie l'écran du bas vers le haut */
.curtain{
  position: fixed; inset: 0; z-index: 6;
  transform: translateY(100%);
  pointer-events: none;
}

/* Pendant l'animation, chaque colonne porte son morceau de photo */
.fancy-nav.is-sliced .fancy-nav__imgs{ visibility: hidden; }
.fancy-nav.is-sliced::after{ display: none; }
.fancy-nav__item.is-pulled .fancy-nav__item-details{ background-color: var(--tone); }
.fancy-nav.is-sliced .fancy-nav__item{ background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat; }
#tab-particuliers{ background: var(--bg-particuliers); background-color: var(--c-particuliers); }
#tab-coproprietes{ background: var(--bg-coproprietes); background-color: var(--c-coproprietes); }
#tab-galerie{ background: var(--bg-galerie); background-color: var(--c-galerie); }
#tab-bibliotheque{ background: var(--bg-bibliotheque); background-color: var(--c-bibliotheque); }
#tab-contact{ background: var(--bg-contact); background-color: var(--c-contact); }
/* E bis. L'atelier — photo de fond en noir et blanc, fondue dans le vert-de-gris */
#tab-contact{ background: var(--c-contact); }
.tab-photo-bg{
  position: fixed; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.05) brightness(.95);
  mix-blend-mode: luminosity;
  opacity: .32;
  pointer-events: none;
}
.tab-photo-bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(40,58,52,.55) 0, rgba(40,58,52,0) 22%, rgba(40,58,52,0) 70%, rgba(40,58,52,.5) 100%);
}
#tab-contact .fancy-nav__tab-container{ z-index: 1; }
/* Bloc de texte à 80 % : le croquis de fond transparaît, le texte reste net */
#tab-contact .fancy-nav__tab-description{ background: rgba(245,242,236,.95); }
/* Le croquis est très atténué en fond : à travers un bloc à 80 % il deviendrait invisible.
   On le « redessine » donc dans le bloc, calé exactement sur celui du fond, à 20 % d'intensité. */
#tab-contact .fancy-nav__tab-description::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--sketch, none);
  background-size: var(--sk-size, cover); background-position: var(--sk-pos, center); background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  opacity: .06;
  pointer-events: none;
}

/* Bibliothèque : petites images de projets qui s'envolent pendant l'ouverture */
.flyer{
  position: fixed; left: 0; top: 0; z-index: 7;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(20,18,15,.35);
  pointer-events: none;
  will-change: transform, opacity;
}

.fancy-nav__tab-container{ position: relative; width: 100%; max-width: 1180px; margin: 0 auto; }
.tab-logo{ position: absolute; top: 0; left: 0; display: flex; align-items: center; height: 44px; color: var(--white); }
.tab-logo svg{ height: 40px; width: auto; aspect-ratio: 2320 / 690; }
.tab-logo:hover{ opacity: .8; }

/* Barre des rubriques (générée par v2.js) */
.tab-rubrics{
  display: flex; gap: 22px;
  margin: -4px -16px 14px; padding: 0 16px;
  overflow-x: auto; scrollbar-width: none;
}
.tab-rubrics::-webkit-scrollbar{ display: none; }
@media (max-width: 749px){
  .tab-rubrics{ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
.tab-rubrics a{
  flex: none; padding: 8px 0 6px;
  font: 500 .68rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: rgba(251,250,247,.72); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.tab-rubrics a:hover{ color: var(--white); }
.tab-rubrics a[aria-current]{ color: var(--white); border-bottom-color: currentColor; }
@media (min-width: 750px){
  .tab-rubrics{ justify-content: center; gap: 30px; margin: -6px 0 22px; padding: 0; }
  .tab-rubrics a{ font-size: .72rem; }
}
@media (min-width: 1100px){
  .tab-rubrics{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 44px; align-items: center; margin: 0; gap: clamp(24px, 2.6vw, 40px); }
}

.fancy-nav__close-btn{
  position: relative; display: block;
  width: 44px; height: 44px; margin: 0 0 12px auto;
  color: var(--white);
}
.fancy-nav__close-btn::before, .fancy-nav__close-btn::after{
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%;
  height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease);
}
.fancy-nav__close-btn::before{ transform: rotate(45deg); }
.fancy-nav__close-btn::after{ transform: rotate(-45deg); }
.fancy-nav__close-btn:hover::before{ transform: rotate(135deg); }
.fancy-nav__close-btn:hover::after{ transform: rotate(45deg); }

.fancy-nav__tab-img{ position: relative; height: 300px; overflow: hidden; }
.fancy-nav__tab-img img{
  position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover;
  /* parallaxe : la photo défile plus lentement que la page */
  translate: 0 calc(var(--sy, 0) * .3px);
  will-change: translate;
}
/* Titre du volet posé sur la photo d'en-tête */
.fancy-nav__tab-img::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(20,18,15,.72) 0%, rgba(20,18,15,.35) 40%, rgba(20,18,15,0) 72%),
    linear-gradient(to right, rgba(20,18,15,.35) 0%, rgba(20,18,15,0) 60%);
  pointer-events: none;
}
/* Titre du volet : grand, sur la photo d'en-tête */
.fancy-nav__tab-img .fancy-nav__tab-title{
  position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px;
  margin: 0; max-width: 13ch;
  font-weight: 300; font-size: clamp(2.6rem, 11vw, 6.4rem); line-height: .98; letter-spacing: -.025em;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(20,18,15,.35);
  /* parallaxe : le titre remonte plus vite que la page et s'efface */
  translate: 0 calc(var(--sy, 0) * -.22px);
  opacity: calc(1 - var(--sy, 0) / 520);
  will-change: translate, opacity;
}
.fancy-nav__tab-img .fancy-nav__tab-title::before{
  content: ""; display: block; width: 56px; height: 1px; margin-bottom: .32em;
  background: currentColor; opacity: .8;
}

.fancy-nav__tab-description{
  translate: 0 calc(var(--sy, 0) * -.06px);
  position: relative; z-index: 2;
  margin: 0 auto 40px;
  padding: 28px 22px 36px;
  background: var(--paper);
}

.fancy-nav__tab-title{
  margin: 0 0 .5em;
  max-width: 20ch;
  font: 300 clamp(1.9rem, 4.6vw, 3.2rem)/1.08 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.fancy-nav__tab-title--second{ margin-top: 1.6em; padding-top: .9em; border-top: 1px solid var(--rule); max-width: none; }

.card-heading{
  margin: 0 0 .5em; max-width: 22ch;
  font: 300 clamp(1.7rem, 3.4vw, 2.5rem)/1.12 var(--serif); letter-spacing: -.01em;
  text-wrap: balance;
}
.lede{
  max-width: 58ch; margin: 0 0 1.6em;
  font: 300 clamp(1.1rem, 2vw, 1.25rem)/1.5 var(--serif);
  color: var(--ink);
}
.prose{ max-width: 68ch; color: var(--ink); }
.prose p{ margin: 0 0 1.1em; }
.prose h3{
  margin: 1.8em 0 .5em;
  font: 400 1.35rem/1.25 var(--serif);
}
.prose blockquote{
  margin: 1.4em 0; padding: 0;
  font: italic 300 1.15rem/1.55 var(--serif);
  color: var(--ink-soft);
}
.quote{ margin: 2.4em 0 0; padding-top: 1.6em; border-top: 1px solid var(--rule); max-width: 60ch; }
.quote blockquote{ margin: 0; font: italic 300 1.3rem/1.5 var(--serif); }
.quote figcaption{ margin-top: .9em; font-size: .85rem; letter-spacing: .04em; color: var(--ink-soft); }

.cta{
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 1.8em;
  padding: 14px 0;
  font: 600 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border: 0; background: none; cursor: pointer;
  border-bottom: 1px solid var(--ink);
}
.cta::after{ content: ""; width: 28px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.cta:hover::after{ width: 48px; }
.cta--solid{ padding: 16px 24px; background: var(--ink); color: var(--paper); border: 0; margin-top: 0; }
.cta--solid:disabled{ opacity: .5; cursor: progress; }

.legal{ margin: 3em 0 0; font-size: .8rem; color: var(--ink-soft); }

/* ---------- Étapes dépliables (Particuliers, Copro, Bibliothèque) ---------- */
.section-title{
  margin: 2.4em 0 .6em; padding-top: 1em;
  border-top: 1px solid var(--rule);
  font: 400 clamp(.95rem, 1.6vw, 1.05rem)/1.2 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
}
.steps{ max-width: 72ch; border-bottom: 1px solid var(--rule); }
.step{ border-top: 1px solid var(--rule); }
.step:first-child{ border-top: 0; }
.step summary{
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 2.4rem 1fr 28px; column-gap: 12px; align-items: baseline;
  padding: 18px 0;
}
.step summary::-webkit-details-marker{ display: none; }
.step summary::after{
  content: ""; grid-column: 3; grid-row: 1; align-self: center; justify-self: end;
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform .4s var(--ease);
}
.step[open] summary::after{ transform: rotate(45deg); }
.step__n{ grid-row: 1 / span 2; font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.step__t{ font: 400 1.25rem/1.25 var(--serif); }
.step__s{ grid-column: 2; margin-top: 4px; font-size: .92rem; color: var(--ink-soft); }
.step summary:hover .step__t{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.step__body{ padding: 0 0 24px calc(2.4rem + 12px); }
.step__body p{ margin: 0 0 1em; }
.step__body ul{ margin: 0 0 1em; padding-left: 1.1em; }
.step__body li{ margin-bottom: .3em; }
.step__lead{ font: italic 300 1.2rem/1.45 var(--serif); }
.note{
  margin: 1.4em 0 .4em !important; padding: 16px 20px;
  background: var(--paper-2);
  font: italic 300 1.05rem/1.55 var(--serif);
}
.note a{ color: inherit; text-underline-offset: 3px; }
.price{ display: inline-block; margin-left: .4em; font: 600 .8rem/1 var(--sans); font-style: normal; letter-spacing: .06em; white-space: nowrap; }
.lede-prose p{ font: 300 1.15rem/1.55 var(--serif); }

.budget{ width: 100%; max-width: 480px; margin: .4em 0 1.4em; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.budget caption{ text-align: left; padding-bottom: .6em; font: 500 1rem/1.2 var(--serif); }
.budget th, .budget td{ padding: 8px 0; border-bottom: 1px solid var(--rule); font-weight: 400; text-align: left; }
.budget td{ text-align: right; white-space: nowrap; padding-left: 16px; }
.budget .sub th, .budget .sub td{ font-weight: 600; }
.budget .total th, .budget .total td{ font-weight: 600; border-bottom: 1.5px solid var(--ink); }

@media (max-width: 749px){
  .step summary{ grid-template-columns: 1.8rem 1fr 20px; }
  .step__body{ padding-left: 0; }
}

/* ---------- Galerie ---------- */
.projects{
  list-style: none; margin: 1.2em 0 0; padding: 0;
  display: grid; gap: 36px 24px;
  grid-template-columns: 1fr;
}
.projects__empty{ color: var(--ink-soft); }
.project{ color: inherit; text-decoration: none; display: block; }
.project__img{ aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.project__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.project:hover .project__img img{ transform: scale(1.04); }
.project__title{ margin: .8em 0 .15em; font: 400 1.15rem/1.2 var(--serif); letter-spacing: .08em; text-transform: uppercase; }
.project__meta{ margin: 0; font-size: .85rem; color: var(--ink-soft); }
.project__status{ white-space: nowrap; }

/* ---------- Contact ---------- */
.contact{ display: grid; gap: 36px; grid-template-columns: 1fr; }
.contact__info{ margin: 0; display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; }
.contact__info dt{ margin-top: 14px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.contact__info dt:first-child{ margin-top: 0; }
.contact__info dd{ margin: 0; font: 300 1.2rem/1.45 var(--serif); }
.contact__info a{ color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.contact__form{ display: grid; gap: 18px 20px; grid-template-columns: 1fr; }
.contact__form label{ display: flex; flex-direction: column; gap: 6px; font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-soft); }
.contact__form input, .contact__form textarea{
  font: 400 1rem/1.4 var(--sans); color: var(--ink);
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink-soft); border-radius: 0;
  background: transparent; resize: vertical;
}
.contact__form input:focus, .contact__form textarea:focus{ outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.contact__form input[aria-invalid="true"]{ border-bottom-color: #8c2f1d; }
.contact__actions{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.form-status{ margin: 0; font-size: .9rem; }
.form-status.ok{ color: var(--c-contact); }
.form-status.err{ color: #8c2f1d; }

@media (min-width: 750px){
  .fancy-nav__tab{ padding: 28px; }
  .fancy-nav__tab-img{ height: 58vh; min-height: 400px; transform: scale(.94); opacity: 0; }
  .fancy-nav__tab-description{ width: 88%; margin-top: -72px; padding: 48px 56px 56px; transform: translateY(52px); opacity: 0; }
  .fancy-nav__tab-img .fancy-nav__tab-title{ left: calc(6% + 56px); right: calc(6% + 56px); bottom: calc(72px + 32px); font-size: clamp(3.4rem, 7.4vw, 6.8rem); }
  .fancy-nav__close-btn{ opacity: 0; transform: translateY(-12px); }
  .is-visible .fancy-nav__tab-img{ transform: none; opacity: 1; transition: transform .8s var(--ease) .1s, opacity .6s var(--ease) .1s; }
  .is-visible .fancy-nav__tab-description{ transform: none; opacity: 1; transition: transform .8s var(--ease) .25s, opacity .6s var(--ease) .25s; }
  .is-visible .fancy-nav__close-btn{ opacity: 1; transform: none; transition: all .5s var(--ease) .2s; }
  .projects{ grid-template-columns: repeat(2, 1fr); }
  .contact__form{ grid-template-columns: 1fr 1fr; }
  .contact__form .full{ grid-column: 1 / -1; }
}
@media (min-width: 1100px){
  .fancy-nav__tab{ padding: 40px; }
  .fancy-nav__tab-description{ padding: 64px 80px 72px; }
  .fancy-nav__tab-img .fancy-nav__tab-title{ left: calc(6% + 80px); right: calc(6% + 80px); bottom: calc(72px + 40px); }
  .projects{ grid-template-columns: repeat(3, 1fr); }
  .contact{ grid-template-columns: 1fr 2fr; gap: 64px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration: .01ms !important; transition-delay: 0s !important; }
}


/* =====================================================================
   Volet L'atelier, citations, pied de volet, fiches projet, mentions légales
   ===================================================================== */
#tab-projet{ background: var(--bg-galerie); background-color: var(--c-galerie); }
#tab-mentions{ background: var(--bg-coproprietes); background-color: #3a3632; }
.fancy-nav__tab--projet{ z-index: 2; }
.fancy-nav__tab--legal{ z-index: 3; }
.fancy-nav__tab--legal .fancy-nav__tab-description{ margin-top: 24px; }
@media (min-width: 750px){
  .fancy-nav__tab--legal .fancy-nav__tab-description{ margin-top: 12px; transform: none; }
}

/* Citations mises en exergue */
.pullquote{
  margin: 0 0 1.6em; padding: 0 0 0 0; max-width: 34ch;
  font: 300 clamp(1.3rem, 2.4vw, 1.7rem)/1.4 var(--serif);
  color: var(--ink);
  text-wrap: pretty;
}
.pullquote::before{ content: "« "; }
.pullquote::after{ content: " »"; }
#tab-coproprietes .pullquote{ margin-top: 2.4em; }

/* Duo photo + texte (L'atelier) */
.lede--small{ font-size: clamp(1.02rem, 1.7vw, 1.15rem); }
.duo{ display: grid; gap: 28px; margin: 2em 0 .5em; }
.duo__photo{ margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.duo__photo img{ width: 100%; height: 100%; object-fit: cover; }
.duo__text p{ margin: 0 0 1.2em; max-width: 52ch; }
.mini-title{ margin: 1.6em 0 .8em; font: 500 .75rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.chips{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li{ padding: 7px 12px; border: 1px solid var(--rule); font-size: .88rem; line-height: 1.2; }
@media (min-width: 750px){
  .duo{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: start; }
}
.map-link{ display: inline-block; margin-top: 6px; font: 500 .72rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.form-privacy{ margin: 4px 0 0; font-size: .8rem; color: var(--ink-soft); }
.form-privacy a{ color: inherit; }

/* Pied de volet */
.tab-footer{ margin-top: 3.5em; padding-top: 1.6em; border-top: 1px solid var(--rule); }
.next-rubric{ display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.next-rubric__label{ font: 500 .72rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.next-rubric__title{ display: inline-flex; align-items: baseline; gap: .4em; font: 300 clamp(2rem, 5vw, 3.4rem)/1.05 var(--serif); letter-spacing: -.01em; }
.next-rubric__title::after{ content: "→"; font-weight: 300; transition: transform .5s var(--ease); }
.next-rubric:hover .next-rubric__title::after{ transform: translateX(10px); }
.tab-footer__meta{ display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 2.2em; font-size: .8rem; color: var(--ink-soft); }
.tab-footer__meta a{ color: inherit; text-underline-offset: 3px; }

/* Fiche projet */
.back-link{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.6em; font: 500 .72rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.back-link::before{ content: "←"; font-size: 1rem; letter-spacing: 0; transition: transform .4s var(--ease); }
.back-link:hover{ color: var(--ink); }
.back-link:hover::before{ transform: translateX(-6px); }
.facts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0 0 2em; padding-bottom: 1.6em; border-bottom: 1px solid var(--rule); }
.facts:empty{ display: none; }
.facts dt{ font: 500 .7rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd{ margin: 4px 0 0; font: 300 1.15rem/1.35 var(--serif); }
@media (min-width: 900px){ .facts{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#projetDesc{ max-width: 68ch; }
.projet-photos{ list-style: none; margin: 2em 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projet-photos:empty{ display: none; }
.projet-photos li:first-child{ grid-column: 1 / -1; }
.projet-photos button{ display: block; width: 100%; padding: 0; border: 0; background: var(--paper-2); cursor: zoom-in; aspect-ratio: 3 / 2; overflow: hidden; }
.projet-photos li:first-child button{ aspect-ratio: 16 / 9; }
.projet-photos img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.projet-photos button:hover img{ transform: scale(1.03); }
@media (min-width: 900px){ .projet-photos{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.projet-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 3em; }
.projet-nav:empty{ display: none; }
.projet-nav__link{ display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; color: var(--ink); text-decoration: none; }
.projet-nav__link.is-next{ grid-template-columns: 1fr 72px; text-align: right; }
.projet-nav__link.is-next .projet-nav__img{ grid-column: 2; grid-row: 1 / span 2; }
.projet-nav__img{ grid-row: 1 / span 2; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.projet-nav__img img{ width: 100%; height: 100%; object-fit: cover; }
.projet-nav__label{ align-self: end; font: 500 .68rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.projet-nav__title{ align-self: start; font: 400 1rem/1.25 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.projet-nav__link:hover .projet-nav__title{ text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 520px){
  .projet-nav{ grid-template-columns: 1fr; }
  .projet-nav__link.is-next{ grid-template-columns: 72px 1fr; text-align: left; }
  .projet-nav__link.is-next .projet-nav__img{ grid-column: 1; }
}

/* Visionneuse */
.lightbox{ position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(20,18,15,.94); }
.lightbox[hidden]{ display: none; }
.lightbox__img{ max-width: min(92vw, 1600px); max-height: 84vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.lightbox button{ position: absolute; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; color: var(--white); }
.lightbox button::before, .lightbox button::after{ content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; }
.lightbox__close{ top: 16px; right: 16px; }
.lightbox__close::before, .lightbox__close::after{ width: 26px; height: 1.5px; margin: -.75px 0 0 -13px; }
.lightbox__close::before{ transform: rotate(45deg); } .lightbox__close::after{ transform: rotate(-45deg); }
.lightbox__prev{ left: 12px; top: 50%; margin-top: -24px; }
.lightbox__next{ right: 12px; top: 50%; margin-top: -24px; }
.lightbox .lightbox__prev::before, .lightbox .lightbox__next::before{ width: 16px; height: 16px; margin: -8px 0 0 -8px; background: none; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.lightbox .lightbox__prev::before{ transform: rotate(45deg); margin-left: -4px; } .lightbox .lightbox__next::before{ transform: rotate(-135deg); margin-left: -12px; }
.lightbox__prev::after, .lightbox__next::after{ display: none; }
.lightbox__count{ position: absolute; bottom: 18px; left: 0; right: 0; margin: 0; text-align: center; font-size: .8rem; letter-spacing: .12em; color: rgba(251,250,247,.75); }

/* Mentions légales */
.legal-page .prose h3{ margin-top: 1.8em; font: 500 .78rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.legal-page .prose p{ font-size: .95rem; }
.legal-page mark{ background: #efe0a8; color: var(--ink); padding: 0 .2em; }

/* =====================================================================
   ESSAI « PLEINE PAGE » (Copropriétés, L'atelier) — retirer la classe tab--full
   sur le volet dans index.html pour revenir à la mise en page avec bloc central
   ===================================================================== */
.fancy-nav__tab.tab--full{ padding: 0; }
.tab--full .fancy-nav__tab-container{ max-width: none; }

/* Barre du haut posée sur la photo */
.tab--full .tab-logo{ top: 20px; left: 20px; z-index: 5; }
.tab--full .fancy-nav__close-btn{ position: absolute; top: 20px; right: 16px; margin: 0; z-index: 5; }
.tab--full .tab-rubrics{ position: absolute; top: 72px; left: 0; right: 0; z-index: 5; margin: 0; padding: 0 20px; }
@media (min-width: 750px){
  .tab--full .tab-logo{ top: 28px; left: 36px; }
  .tab--full .fancy-nav__close-btn{ top: 28px; right: 32px; }
  .tab--full .tab-rubrics{ top: 84px; padding: 0; }
}
@media (min-width: 1100px){
  .tab--full .tab-rubrics{ top: 28px; left: 50%; right: auto; }
}

/* Photo d'en-tête plein écran */
.tab--full .fancy-nav__tab-img{ height: 100vh; height: 100svh; min-height: 520px; transform: none !important; }
.tab--full .fancy-nav__tab-img::after{
  background:
    linear-gradient(to bottom, rgba(20,18,15,.55) 0, rgba(20,18,15,0) 26%),
    linear-gradient(to top, rgba(20,18,15,.7) 0%, rgba(20,18,15,.25) 40%, rgba(20,18,15,0) 70%),
    linear-gradient(to right, rgba(20,18,15,.3) 0%, rgba(20,18,15,0) 60%);
}
.tab--full .fancy-nav__tab-img .fancy-nav__tab-title{
  left: 24px; right: 24px; bottom: 56px; max-width: 12ch;
  font-size: clamp(3rem, 12vw, 9.5rem);
}
@media (min-width: 750px){
  .tab--full .fancy-nav__tab-img .fancy-nav__tab-title{ left: 6vw; right: 6vw; bottom: 12vh; font-size: clamp(4rem, 9vw, 9.5rem); }
}

/* Corps : bandes pleine largeur au lieu du bloc central */
.tab--full .fancy-nav__tab-description.full{
  width: 100%; margin: 0 !important; padding: 0; background: transparent;
  transform: none !important; opacity: 1 !important; translate: none;
}
#tab-contact.tab--full .fancy-nav__tab-description{ background: transparent; }
#tab-contact.tab--full .fancy-nav__tab-description::before{ display: none; }
.band{ padding: clamp(56px, 9vw, 140px) clamp(24px, 6vw, 96px); background: var(--paper); }
.band__heading{ margin: 0 0 .5em; font: 300 clamp(2.2rem, 5vw, 4.4rem)/1.02 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.band .section-title{ margin-top: 0; }
@media (min-width: 900px){
  .band__grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .band__grid .band__heading{ grid-column: 1 / span 5; }
  .band__grid .band__side{ grid-column: 7 / span 6; padding-top: .6em; }
}
.band--intro .lede{ font-size: clamp(1.2rem, 2vw, 1.55rem); max-width: 40ch; }

/* Étapes en 3 colonnes */
.band--steps{ padding-top: 0; }
.steps--cols{ max-width: none; border-bottom: 0; }
.steps--cols .step{ border-top: 1.5px solid var(--ink); }
.steps--cols .step:first-child{ border-top: 1.5px solid var(--ink); }
.steps--cols .step summary{ grid-template-columns: 1fr 28px; row-gap: 6px; padding: 22px 0 26px; }
.steps--cols .step__n{ grid-row: 1; grid-column: 1; font: 300 3.2rem/1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.steps--cols .step summary::after{ grid-row: 1; grid-column: 2; align-self: start; margin-top: 10px; }
.steps--cols .step__t{ grid-column: 1 / -1; font-size: 1.45rem; }
.steps--cols .step__s{ grid-column: 1 / -1; margin-top: 0; }
.steps--cols .step__body{ padding: 0 0 28px; }
@media (min-width: 1000px){
  .steps--cols{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; align-items: start; }
}

/* Bande de couleur avec la citation */
.band--tone{ background: var(--bg-coproprietes); background-color: var(--c-coproprietes); color: var(--white); }
.pullquote--xl{ margin: 0; max-width: 26ch; color: var(--white); font: 300 clamp(1.8rem, 4.2vw, 3.6rem)/1.2 var(--serif); letter-spacing: -.01em; }
.band--testimonial .quote--xl{ margin: 0; padding: 0; border: 0; max-width: 980px; }
.quote--xl blockquote{ font: italic 300 clamp(1.4rem, 2.8vw, 2.3rem)/1.35 var(--serif); }
.quote--xl figcaption{ margin-top: 1.4em; }
.band--testimonial .cta{ margin-top: 2.4em; }

/* L'atelier : moitié photo / moitié texte */
.band--split{ padding: 0; display: grid; }
.split__photo{ margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.split__photo img{ width: 100%; height: 100%; object-fit: cover; }
.split__text{ padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 96px); }
.split__text p{ max-width: 52ch; }
@media (min-width: 900px){
  .band--split{ grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .split__photo{ aspect-ratio: auto; height: 100%; }
  .split__text{ align-self: center; }
}

/* L'atelier : contact en blanc sur le croquis */
.band--contact{ background: rgba(30,46,41,.38); color: var(--white); }
.band--contact .lede{ color: rgba(251,250,247,.9); max-width: 42ch; }
.contact-head{ margin-bottom: 2.4em; }
@media (min-width: 1100px){
  .band--contact{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
  .band--contact .contact{ grid-template-columns: 1fr 2fr; }
}
.band--contact .contact__info dt{ color: rgba(251,250,247,.7); }
.band--contact .contact__info dd, .band--contact .contact__info a{ color: var(--white); }
.band--contact .contact__form label{ color: rgba(251,250,247,.78); }
.band--contact .contact__form input, .band--contact .contact__form textarea{ color: var(--white); border-bottom-color: rgba(251,250,247,.55); }
.band--contact .contact__form input:focus, .band--contact .contact__form textarea:focus{ border-bottom-color: var(--white); box-shadow: 0 1px 0 var(--white); }
.band--contact .cta--solid{ background: var(--white); color: var(--ink); }
.band--contact .form-status.ok{ color: #cfe6d9; }
.band--contact .form-status.err{ color: #ffc9b8; }
.band--contact .form-privacy, .band--contact .form-privacy a{ color: rgba(251,250,247,.7); }
.band--contact .map-link{ color: var(--white); }

/* Pied de page pleine largeur */
.full > .tab-footer{ margin: 0; padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 96px) 40px; border: 0; background: var(--ink); color: var(--paper); }
.full > .tab-footer .next-rubric{ color: var(--paper); }
.full > .tab-footer .next-rubric__label, .full > .tab-footer .tab-footer__meta{ color: rgba(245,242,236,.65); }
.full > .tab-footer .next-rubric__title{ font-size: clamp(2.6rem, 7vw, 6rem); }

/* --- Pleine page, version resserrée : on entre plus vite dans le contenu --- */
.tab--full .fancy-nav__tab-img{ height: 60vh; height: 60svh; min-height: 400px; max-height: 640px; }
.tab--full .fancy-nav__tab-img .fancy-nav__tab-title{ bottom: 36px; font-size: clamp(2.6rem, 10vw, 4rem); max-width: 14ch; }
@media (min-width: 750px){
  .tab--full .fancy-nav__tab-img .fancy-nav__tab-title{ left: clamp(24px, 5vw, 80px); bottom: 48px; font-size: clamp(3.2rem, 6vw, 5.6rem); }
}
.band{ padding: clamp(40px, 5.5vw, 84px) clamp(24px, 5vw, 80px); }
.band__heading{ font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.06; }
.band--intro{ padding-bottom: clamp(28px, 3.5vw, 48px); }
.band--intro .lede{ font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.steps--cols .step__n{ font-size: 2.4rem; }
.steps--cols .step__t{ font-size: 1.3rem; }
.pullquote--xl{ font-size: clamp(1.5rem, 2.8vw, 2.4rem); max-width: 34ch; }
.quote--xl blockquote{ font-size: clamp(1.25rem, 2vw, 1.75rem); }
.band--testimonial .quote--xl{ max-width: 860px; }
.band--split{ min-height: 0 !important; }
@media (min-width: 900px){
  .band--split{ grid-template-columns: 5fr 7fr; align-items: stretch; }
  .split__photo{ max-height: 78vh; }
}
.split__text{ padding: clamp(40px, 5vw, 80px) clamp(24px, 5vw, 80px); }
.contact-head{ margin-bottom: 1.6em; }
.full > .tab-footer{ padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 80px) 32px; }
.full > .tab-footer .next-rubric__title{ font-size: clamp(2.2rem, 5vw, 4.2rem); }
.band.band--split{ padding: 0; }
@media (min-width: 900px){ .band--split .split__photo{ height: auto; min-height: 100%; } }

/* --- Page « Nous contacter » --- */
#tab-nouscontacter{ background: var(--c-contact); }
#tab-nouscontacter .fancy-nav__tab-container{ position: relative; z-index: 1; }
.tab--full .fancy-nav__tab-img--short{ height: 42vh; height: 42svh; min-height: 300px; max-height: 440px; }
#tab-nouscontacter .band--contact{ padding-top: clamp(48px, 6vw, 96px); }
#tab-nouscontacter .full > .tab-footer{ background: rgba(20,18,15,.82); }

/* L'atelier : bande d'appel vers la page contact */
.band--cta{ background: var(--ink); color: var(--paper); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.band--cta__text{ margin: 0; font: 300 clamp(1.4rem, 2.6vw, 2.2rem)/1.2 var(--serif); max-width: 30ch; }
.cta--light{ margin-top: 0; color: var(--paper); border-bottom-color: var(--paper); }

/* Bouton « Nous contacter » dans les volets : à gauche de la croix */
.tab-contact-btn{
  position: absolute; top: 4px; right: 58px; z-index: 5; margin: 0;
  padding: 9px 12px 8px; font-size: .6rem; letter-spacing: .14em;
  color: var(--white); text-decoration: none;
}
.tab--full .tab-contact-btn{ top: 24px; right: 70px; }
@media (min-width: 750px){
  .tab-contact-btn{ right: 64px; padding: 11px 18px 10px; font-size: .7rem; letter-spacing: .18em; }
  .tab--full .tab-contact-btn{ top: 32px; right: 86px; }
}

/* =====================================================================
   Toutes les sous-pages en pleine page
   ===================================================================== */
/* Étapes en liste, titre de section collé à gauche */
.band--list .steps{ max-width: none; }
@media (min-width: 1000px){
  .band--list{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .band--list > .section-title{ grid-column: 1 / span 4; position: sticky; top: 110px; margin: 0; padding-top: 22px; border-top: 1.5px solid var(--ink); }
  .band--list > .steps{ grid-column: 5 / span 8; border-top: 1.5px solid var(--ink); }
  .band--list .step:first-child{ border-top: 0; }
}
.band--alt{ background: var(--paper-2); }
.band--tone-particuliers{ background: var(--bg-particuliers); background-color: var(--c-particuliers); }
.band--text .prose{ max-width: 68ch; }
@media (min-width: 1000px){
  .prose--cols{ max-width: none !important; column-count: 2; column-gap: 56px; }
  .prose--cols p{ break-inside: avoid; }
}
.band--text .cta{ margin-top: 1.6em; }

/* Bibliothèque : intro */
.band--intro-prose .lede-prose{ max-width: 60ch; }
.band--intro-prose .lede-prose p{ font-size: clamp(1.1rem, 1.7vw, 1.35rem); }

/* Galerie pleine largeur */
.band--projects .projects{ margin-top: 0; }
@media (min-width: 1300px){ .band--projects .projects{ grid-template-columns: repeat(4, 1fr); } }

/* Fiche projet */
.band--projet .back-link{ margin-bottom: 2em; }
@media (min-width: 1000px){
  .projet-grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .projet-grid .facts{ grid-column: 1 / span 4; grid-template-columns: 1fr 1fr; border-bottom: 0; padding-bottom: 0; }
  .projet-grid #projetDesc{ grid-column: 6 / span 7; }
}
.band--photos{ padding-top: 0; }
.band--photos .projet-photos{ margin-top: 0; }

/* Mentions légales (pas de photo d'en-tête) */
#tab-mentions .fancy-nav__tab-description.full{ padding-top: 130px; }
.band--legal .prose{ max-width: 76ch; }
/* Bandes de l'effet accordéon (copies temporaires d'un volet) */
.tab-slices{ position: fixed; inset: 0; pointer-events: none; }
.tab-slices .fancy-nav__tab{ position: absolute; inset: 0; }
.tab-slice, .tab-slice *{ transition: none !important; }
/* Bouton « Nous contacter » et croix toujours visibles quand on fait défiler une sous-page */
.tab--full .tab-contact-btn, .tab--full .fancy-nav__close-btn{ position: fixed; }
.tab--full .tab-contact-btn{ background: rgba(20,18,15,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tab--full .tab-contact-btn:hover{ background: var(--white); }
.tab--full .fancy-nav__close-btn{ border-radius: 50%; background: rgba(20,18,15,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tab--full .fancy-nav__close-btn::before, .tab--full .fancy-nav__close-btn::after{ left: 12px; right: 12px; }

/* Vague entre la photo d'en-tête et la partie blanche (canvas dessiné par v2.js) */
.hero-wave{ position: absolute; left: 0; bottom: -1px; width: 100%; height: 80px; z-index: 2; pointer-events: none; display: block; }
.tab--full .fancy-nav__tab-img .fancy-nav__tab-title{ z-index: 3; }
/* Chaque volet forme son propre calque : un élément d'un volet ne peut pas passer au-dessus d'un autre volet */
.fancy-nav__tab{ isolation: isolate; }
/* Séparation photo / texte à 2/5 de la hauteur de l'écran (la vague est dessinée 26 px au-dessus du bas de la photo) */
.tab--full .fancy-nav__tab-img,
.tab--full .fancy-nav__tab-img--short{ height: calc(40vh + 26px); height: calc(40svh + 26px); min-height: 300px; max-height: none; }
.tab--full .fancy-nav__tab-img .fancy-nav__tab-title{ font-size: clamp(2.4rem, 9vw, 3.6rem); bottom: 44px; }
@media (min-width: 750px){
  .tab--full .fancy-nav__tab-img .fancy-nav__tab-title{ font-size: clamp(3rem, 5vw, 4.8rem); bottom: 50px; }
}

/* =====================================================================
   Particuliers — deux portes d'entrée : « confort » (rénovation) / « espace » (extension)
   État piloté en JS : .choice[data-open], chaque côté [data-state=base|open|collapsed],
   chaque titre [data-pos=center|corner] (+ .is-snap pour réapparaître sans glisser).
   ===================================================================== */
.choice{ --pad-y: clamp(28px, 4vw, 56px); --pad-x: clamp(24px, 5vw, 80px);
  display: flex; height: 33.333vh; height: 33.333svh; min-height: 300px; color: var(--white); }
.choice__side{
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  transition: flex-grow .8s cubic-bezier(.7, 0, .25, 1);
}
.choice__side--confort{ background: var(--bg-particuliers); background-color: var(--c-particuliers); }
.choice__side--espace{ background: var(--noise-light-soft), var(--noise-dark-soft), linear-gradient(200deg, #5d4a3b 0%, #3f322a 100%); background-color: #4a3b30; }
.choice__side[data-state="open"]{ flex-grow: 9; }

/* Toute la surface du côté est cliquable (tactile) */
.choice__head{ position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
.choice__side[data-state="open"] .choice__head{ cursor: default; }
.choice__side[data-state="collapsed"] .choice__head:hover{ background: rgba(251,250,247,.06); }
.choice__head:focus-visible{ outline: 2px solid var(--white); outline-offset: -8px; }

/* Titre : glisse du centre (grand) vers le coin haut gauche (plus petit) */
.choice__title{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; text-align: left;
  font: 300 clamp(1.8rem, 3.6vw, 3.2rem)/1.05 var(--serif); letter-spacing: -.01em;
  transition: left .8s cubic-bezier(.7, 0, .25, 1), top .8s cubic-bezier(.7, 0, .25, 1),
              transform .8s cubic-bezier(.7, 0, .25, 1), font-size .8s cubic-bezier(.7, 0, .25, 1),
              opacity .25s var(--ease);
}
.choice__title[data-pos="corner"]{ left: var(--pad-x); top: var(--pad-y); transform: translate(0, 0); font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.choice__side[data-state="collapsed"] .choice__title{ opacity: 0; }
/* Retour d'un côté réduit : saute à sa place pendant qu'il est invisible, puis apparaît en fondu */
.choice__title.is-snap{ transition: opacity .45s var(--ease) .4s; }

/* Petite phrase du côté réduit */
.choice__alt{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px 14px;
  font: italic 300 clamp(.85rem, 1.1vw, 1rem)/1.35 var(--serif); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.choice__side[data-state="collapsed"] .choice__alt{ opacity: 1; transition: opacity .45s var(--ease) .45s; }

/* Contenu du côté ouvert */
.choice__body{
  position: absolute; z-index: 2; top: var(--pad-y); left: 42%; right: var(--pad-x); max-width: 680px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .4s var(--ease), visibility 0s .25s;
}
.choice__body p{ margin: 0 0 .8em; color: rgba(251,250,247,.9); }
.choice__body ul{ margin: 0; padding-left: 1.1em; color: rgba(251,250,247,.9); }
.choice__body .cta{ margin-top: 1.1em; }
.choice__side[data-state="open"] .choice__body{ opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .5s, transform .7s var(--ease) .5s, visibility 0s 0s; }
@media (max-width: 999px){ .choice__body{ left: var(--pad-x); top: calc(var(--pad-y) + 3.2rem); } }

/* Mobile : les deux côtés l'un sous l'autre ; le côté réduit devient une bande */
@media (max-width: 749px){
  .choice{ flex-direction: column; height: auto; min-height: 0; }
  .choice__side{ flex: none; min-height: 150px; transition: min-height .6s var(--ease); }
  .choice__side[data-state="collapsed"]{ min-height: 76px; }
  .choice__title{ font-size: 1.7rem; }
  .choice__title[data-pos="corner"]{ font-size: 1.5rem; }
  .choice__body{ position: relative; top: auto; left: auto; right: auto; max-height: 0; overflow: hidden; padding: 0 var(--pad-x); }
  .choice__side[data-state="open"] .choice__body{ max-height: 1200px; padding: calc(var(--pad-y) + 2.6rem) var(--pad-x) 28px; }
}

/* Petit personnage ratatiné par l'espace réduit (bande « Mais j'ai aussi besoin d'espace ») */
.choice__alt{ flex-direction: column; gap: 14px; }
.squish{ width: 58px; height: 48px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.squish .dot{ fill: currentColor; stroke: none; }
.squish__wall, .squish__face, .squish__eyes, .squish__squint{ animation: 2.8s cubic-bezier(.6, 0, .3, 1) infinite paused; }
.squish__wall--l{ animation-name: squish-wall-l; }
.squish__wall--r{ animation-name: squish-wall-r; }
.squish__face{ transform-box: fill-box; transform-origin: center; animation-name: squish-face; }
.squish__eyes{ animation-name: squish-hide; }
.squish__squint{ opacity: 0; animation-name: squish-show; }
.choice__side[data-state="collapsed"] .squish *{ animation-play-state: running; }
@keyframes squish-wall-l{ 0%, 12%{ transform: none; } 45%, 72%{ transform: translateX(9px); } 90%, 100%{ transform: none; } }
@keyframes squish-wall-r{ 0%, 12%{ transform: none; } 45%, 72%{ transform: translateX(-9px); } 90%, 100%{ transform: none; } }
@keyframes squish-face{
  0%, 22%{ transform: none; }
  45%{ transform: scale(.6, 1.2); } 52%{ transform: scale(.66, 1.14); } 58%, 72%{ transform: scale(.6, 1.2); }
  86%{ transform: scale(1.08, .94); } 94%, 100%{ transform: none; }
}
@keyframes squish-show{ 0%, 34%{ opacity: 0; } 40%, 78%{ opacity: 1; } 84%, 100%{ opacity: 0; } }
@keyframes squish-hide{ 0%, 34%{ opacity: 1; } 40%, 78%{ opacity: 0; } 84%, 100%{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .squish *{ animation: none !important; } }
@media (max-width: 749px){ .choice__alt{ flex-direction: row; } .squish{ width: 36px; height: 30px; } }

/* Petit personnage qui grelotte (bande « On n'oublie pas le confort… ») : courant d'air, frissons, claquements de dents */
.shiver__wind, .shiver__body, .shiver__face, .shiver__mouth{ animation: 2.8s linear infinite paused; }
.shiver__wind{ animation-name: shiver-wind; opacity: 0; }
.shiver__body{ animation-name: shiver-shake; }
.shiver__face{ animation-name: shiver-huddle; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
.shiver .squish__eyes{ animation-name: squish-hide; }
.shiver .squish__squint{ animation-name: squish-show; }
.shiver__mouth--calm{ animation-name: squish-hide; }
.shiver__mouth--teeth{ opacity: 0; animation-name: squish-show; }
.choice__side[data-state="collapsed"] .shiver *{ animation-play-state: running; }
@keyframes shiver-wind{ 0%, 20%{ opacity: 0; transform: translateX(-6px); } 30%{ opacity: 1; } 46%{ opacity: 0; transform: translateX(8px); }
  52%{ opacity: 0; transform: translateX(-6px); } 60%{ opacity: .8; } 74%, 100%{ opacity: 0; transform: translateX(8px); } }
@keyframes shiver-huddle{ 0%, 30%{ transform: none; } 40%, 76%{ transform: scale(.9, .93) translateY(1px); } 88%, 100%{ transform: none; } }
@keyframes shiver-shake{
  0%, 36%{ transform: none; }
  38%{ transform: translateX(-1.2px); } 40%{ transform: translateX(1.2px); } 42%{ transform: translateX(-1.2px); } 44%{ transform: translateX(1px); }
  46%{ transform: translateX(-1.2px); } 48%{ transform: translateX(1.2px); } 50%{ transform: translateX(-1px); } 52%{ transform: translateX(1.2px); }
  54%{ transform: translateX(-1.2px); } 56%{ transform: translateX(1px); } 58%{ transform: translateX(-1.2px); } 60%{ transform: translateX(1.2px); }
  62%{ transform: translateX(-1px); } 64%{ transform: translateX(1.2px); } 66%{ transform: translateX(-1.2px); } 68%{ transform: translateX(1px); }
  70%{ transform: translateX(-.8px); } 72%{ transform: translateX(.6px); } 74%, 100%{ transform: none; }
}

/* ---- Variantes 2 et 3 (empilées pour comparer) ---- */
.choice__alt{ gap: 10px; }
.choice__icons{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.choice__icons .squish{ width: 50px; height: 42px; }
.push *, .cold *{ vector-effect: non-scaling-stroke; }
.cold *{ animation-duration: 2.8s; animation-iteration-count: infinite; animation-play-state: paused; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
.choice__side[data-state="collapsed"] .squish *{ animation-play-state: running; }
@media (max-width: 749px){ .choice__icons .squish:not(:first-child){ display: none; } .choice__icons .squish{ width: 36px; height: 30px; } }

/* Confort v2 : il neige dedans, écharpe, buée, thermomètre qui chute */
.cold__face{ transform-box: fill-box; transform-origin: center; animation-name: shiver-huddle; }
.cold__body{ animation-name: shiver-shake; animation-timing-function: linear; }
.cold__eyes{ animation-name: squish-hide; }
.cold__shut{ opacity: 0; animation-name: squish-show; }
.cold__flake{ opacity: 0; animation-name: cold-snow; animation-timing-function: linear; }
.cold__flake--2{ animation-delay: -.95s; }
.cold__flake--3{ animation-delay: -1.9s; }
.cold__breath{ opacity: 0; transform-box: fill-box; transform-origin: left bottom; animation-name: cold-breath; animation-timing-function: ease-out; }
.cold__mercury{ stroke-width: 1.6; transform-box: fill-box; transform-origin: 50% 100%; animation-name: cold-mercury; }
@keyframes cold-snow{ 0%{ opacity: 0; transform: none; } 15%{ opacity: 1; } 80%{ opacity: 1; } 100%{ opacity: 0; transform: translate(3px, 40px); } }
@keyframes cold-breath{ 0%, 42%{ opacity: 0; transform: scale(.6); } 48%{ opacity: 1; } 72%, 100%{ opacity: 0; transform: translate(4px, -4px) scale(1.25); } }
@keyframes cold-mercury{ 0%{ transform: scaleY(.85); } 40%, 80%{ transform: scaleY(.18); } 100%{ transform: scaleY(.85); } }


/* Espace : il retient les murs (animation SMIL, lancée/arrêtée en JS quand la bande est réduite) */
.push .dot{ fill: currentColor; stroke: none; }
.push__arm, .push__hand{ fill: none; }

/* La section passe sous la photo (remontée de 100 px) : son bord haut suit la vague (clip-path posé en JS) */
.choice{ --off: 75px; position: relative; z-index: 4; margin-top: -100px;
  height: calc(23.333vh + var(--off)); height: calc(23.333svh + var(--off)); min-height: calc(210px + var(--off));
  clip-path: inset(var(--off) 0 0 0); }
.choice__head{ top: var(--off); }
.choice__body{ top: calc(var(--pad-y) + var(--off)); }
@media (max-width: 999px){ .choice__body{ top: calc(var(--pad-y) + 3.2rem + var(--off)); } }
.has-wave-clip .hero-wave{ visibility: hidden; }
@media (max-width: 749px){
  .choice{ height: auto; min-height: 0; }
  .choice__side:first-child{ padding-top: var(--off); min-height: calc(150px + var(--off)); }
  .choice__side:first-child[data-state="collapsed"]{ min-height: calc(76px + var(--off)); }
  .choice__side:last-child .choice__head{ top: 0; }
  .choice__body{ top: auto; }
}

/* Hauteur réduite (-30 %) : marges resserrées, texte et puces côte à côte sur grand écran */
.choice{ --pad-y: clamp(20px, 2.6vw, 36px); }
@media (min-width: 1000px){
  .choice__body{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); max-width: 860px; }
  .choice__body p{ margin: 0; font-size: .95rem; line-height: 1.55; }
  .choice__body ul{ margin: 0; font-size: .95rem; line-height: 1.7; }
  .choice__body .cta{ grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
}

/* Confort : texte réel en 3 colonnes (constat / expertise / conclusion) */
.choice__body--cols .choice__lead{ margin: 0 0 .4em; color: var(--white); font-weight: 400; }
.choice__body--cols ul{ margin: 0; }
.choice__body--cols .cta{ margin-top: 12px; }
@media (min-width: 1200px){
  .choice__body.choice__body--cols{ left: 33%; max-width: none; grid-template-columns: 1fr 1.1fr .9fr; column-gap: clamp(18px, 2.4vw, 40px); }
  .choice__body--cols p, .choice__body--cols ul{ font-size: .88rem; line-height: 1.5; }
  .choice__body--cols ul{ line-height: 1.55; }
}
.choice__body--cols .cta{ white-space: nowrap; }
@media (min-width: 1000px){ .choice{ min-height: calc(240px + var(--off)); } }
/* Écrans moyens : le bloc ouvert s'allonge pour laisser tenir le texte */
@media (min-width: 750px) and (max-width: 1199px){
  .choice{ height: auto; }
  .choice__body.choice__body--cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; max-width: none; }
  .choice__body--cols .choice__col:last-child{ grid-column: 1 / -1; }
  .choice__side[data-state="open"] .choice__body--cols{ position: relative; top: auto; left: auto; right: auto; padding: calc(var(--off) + var(--pad-y) + 3.4rem) var(--pad-x) var(--pad-y); }
  .choice__body--cols p, .choice__body--cols ul{ font-size: .9rem; line-height: 1.5; margin: 0; }
}
/* Grand écran : si le texte dépasse, le bloc ouvert s'allonge au lieu de couper */
@media (min-width: 1200px){
  .choice{ height: auto; }
  .choice__side[data-state="open"] .choice__body--cols{ position: relative; top: auto; left: auto; right: auto; margin-left: 33%; padding: calc(var(--off) + var(--pad-y)) var(--pad-x) var(--pad-y) 0; }
}

/* Confort / espace : hiérarchie du texte (Si… / Alors… / Parce que…) */
.choice__body--cols .choice__eyebrow{ margin: 0 0 10px; font: 500 .62rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(251,250,247,.6); }
.choice__body--cols .choice__situations{ list-style: none; padding: 0; margin: 0; }
.choice__body--cols .choice__situations li{ padding: 7px 0 8px; border-top: 1px solid rgba(251,250,247,.22); font: 300 1rem/1.35 var(--serif); color: var(--white); }
.choice__body--cols .choice__situations li:last-child{ border-bottom: 1px solid rgba(251,250,247,.22); }
.choice__body--cols .choice__lead{ margin: 0 0 12px; font: 300 .84rem/1.5 var(--sans); color: rgba(251,250,247,.72); }
.choice__punch{ display: block; margin-bottom: 6px; font: 300 clamp(1.25rem, 1.7vw, 1.6rem)/1.15 var(--serif); color: var(--white); letter-spacing: -.01em; }
.choice__punch::first-letter{ text-transform: uppercase; }
.choice__body--cols .choice__skills{ list-style: none; padding: 0; margin: 0; }
.choice__body--cols .choice__skills li{ position: relative; padding: 3px 0 3px 18px; font: 500 .86rem/1.4 var(--sans); color: var(--white); }
.choice__body--cols .choice__skills li::before{ content: '+'; position: absolute; left: 0; top: 2px; font-weight: 300; color: rgba(251,250,247,.6); }
.choice__aside{ display: block; font: italic 300 .78rem/1.35 var(--sans); color: rgba(251,250,247,.6); }
.choice__body--cols .choice__close{ margin: 0; padding-left: 14px; border-left: 1px solid rgba(251,250,247,.45); font: italic 300 .95rem/1.55 var(--serif); color: rgba(251,250,247,.9); }
.choice__body--cols .choice__close + .cta{ margin-top: 18px; }
@media (max-width: 1199px){ .choice__body--cols .choice__col + .choice__col{ margin-top: 22px; } .choice__body--cols{ row-gap: 26px !important; } }
@media (max-width: 749px){ .choice__body--cols .choice__col:first-child{ margin-top: 10px; } }
/* Pendant l'ouverture, le côté s'élargit progressivement : le texte prend tout de suite sa largeur finale
   (90 % de la section) pour ne pas s'écraser dans une colonne étroite et faire gonfler la hauteur. */
.choice{ container-type: inline-size; }
@media (min-width: 1200px){
  .choice__side[data-state="open"] .choice__body--cols{ box-sizing: border-box; flex: none; width: calc(90cqw * .67); margin-left: calc(90cqw * .33); }
}
@media (min-width: 750px) and (max-width: 1199px){
  .choice__side[data-state="open"] .choice__body--cols{ box-sizing: border-box; width: 90cqw; }
}

/* Titre confort / espace : petit surtitre « Je veux plus » + grand mot */
.choice__kicker{ display: flex; align-items: center; gap: 10px; margin-bottom: .45em; font: 500 max(.3em, .62rem)/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(251,250,247,.75); }
.choice__kicker::before{ content: ''; width: 2.4em; height: 1px; background: currentColor; transition: width .6s var(--ease); }
.choice__head:hover .choice__kicker::before{ width: 4em; }
.choice__word{ display: block; font-size: 1.3em; line-height: 1; letter-spacing: -.02em; }
.choice__word i{ font-style: italic; font-weight: 200; opacity: .8; margin-right: .08em; }
.choice__title[data-pos="corner"] .choice__kicker::before{ width: 1.6em; }
@media (min-width: 750px) and (max-width: 1199px){
  .choice__side[data-state="open"] .choice__body--cols{ padding-top: calc(var(--off) + var(--pad-y) + 5rem); }
}
@media (max-width: 749px){
  .choice__side[data-state="open"] .choice__body{ padding-top: calc(var(--pad-y) + 4.4rem); }
  .choice__side:first-child[data-state="open"] .choice__body{ padding-top: calc(var(--pad-y) + 4.4rem); }
}

/* =====================================================================
   L'atelier — portrait, mission en 3 temps, réseau & domaines
   ===================================================================== */
.atl-eyebrow{ margin: 0 0 14px; font: 500 .66rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; }
.atl-eyebrow::before{ content: ''; width: 28px; height: 1px; background: currentColor; }
.atl-small{ margin: 1.2em 0 0; font: 300 .95rem/1.6 var(--sans); color: var(--ink-soft); max-width: 56ch; }

.atl-intro{ display: grid; gap: clamp(28px, 5vw, 80px); align-items: start; }
.atl-portrait{ position: relative; margin: 0; }
.atl-portrait img{ display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); filter: grayscale(.15) contrast(1.02); }
.atl-portrait::after{ content: ''; position: absolute; left: 18px; top: 18px; right: -18px; bottom: 38px; border: 1px solid var(--rule); z-index: -1; }
.atl-portrait figcaption{ margin-top: 12px; font: 400 .8rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.atl-portrait figcaption b{ font-weight: 500; color: var(--ink); margin-right: 8px; }
.atl-intro__h{ margin: 0; font: 300 clamp(1.6rem, 2.8vw, 2.5rem)/1.18 var(--serif); letter-spacing: -.015em; max-width: 26ch; text-wrap: balance; }
.atl-pairs{ list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.atl-pairs li{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); font: 400 1.05rem/1.2 var(--serif); }
.atl-pairs li span:last-child{ text-align: right; }
.atl-pairs i{ font: italic 200 1.3rem/1 var(--serif); color: var(--ink-soft); }
.atl-quote{ position: relative; margin: 34px 0 0; padding: 4px 0 0 28px; border-left: 1px solid var(--ink); }
.atl-quote::before{ content: '“'; position: absolute; left: 14px; top: -26px; font: 300 4.6rem/1 var(--serif); color: var(--c-contact); opacity: .5; }
.atl-quote p{ margin: 0; font: italic 300 clamp(1.02rem, 1.4vw, 1.18rem)/1.6 var(--serif); }
.atl-quote em{ font-style: normal; font-weight: 400; }
@media (min-width: 900px){ .atl-intro{ grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .atl-portrait{ position: sticky; top: 40px; } }

.atl-mission{ background: var(--c-contact); background: var(--bg-contact); color: var(--white); }
.atl-mission .atl-eyebrow{ color: rgba(251,250,247,.7); }
.atl-hook{ margin: 0; font: 300 clamp(2.2rem, 5vw, 4.4rem)/1.02 var(--serif); letter-spacing: -.025em; max-width: 18ch; text-wrap: balance; }
.atl-context{ margin: 24px 0 0; max-width: 62ch; font: 300 1.02rem/1.65 var(--sans); color: rgba(251,250,247,.82); }
.atl-roles{ list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.atl-roles li{ position: relative; padding: 22px 0 26px; border-top: 1px solid rgba(251,250,247,.3); }
.atl-roles__n{ display: block; font: 200 2.6rem/1 var(--serif); color: rgba(251,250,247,.55); letter-spacing: -.03em; }
.atl-roles h4{ margin: 10px 0 10px; font: 500 .78rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.atl-roles p{ margin: 0; font: 300 .95rem/1.62 var(--sans); color: rgba(251,250,247,.88); }
.atl-roles .atl-aside{ margin-top: 12px; padding-left: 12px; border-left: 1px solid rgba(251,250,247,.45); font: italic 300 .92rem/1.5 var(--serif); color: var(--white); }
@media (min-width: 900px){ .atl-roles{ grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); } }

.atl-network{ display: grid; gap: clamp(36px, 5vw, 72px); }
.atl-network__lead{ margin: 0; font: 300 clamp(1.2rem, 1.8vw, 1.5rem)/1.4 var(--serif); max-width: 34ch; }
.atl-team{ list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atl-team li{ padding: 14px 0; border-top: 1px solid var(--rule); font: 300 1.5rem/1.1 var(--serif); letter-spacing: -.01em; }
.atl-team li:nth-child(odd){ padding-right: 12px; }
.atl-domains{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.atl-domains li{ padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px; font: 400 .9rem/1.2 var(--sans); transition: background .25s, color .25s, border-color .25s; }
.atl-domains li:hover{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (min-width: 900px){ .atl-network{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* L'atelier : portrait discret en signature de la citation, sans tableau */
.atl-intro{ display: block; }
.atl-intro__text{ max-width: 860px; }
.atl-intro__h{ max-width: 30ch; }
.atl-intro__sub{ margin: 18px 0 0; font: 300 1.05rem/1.6 var(--sans); color: var(--ink-soft); max-width: 60ch; }
.atl-sign{ display: flex; align-items: center; gap: 14px; margin: 18px 0 0 28px; }
.atl-sign img{ width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 25%; background: var(--paper-2); filter: grayscale(.3); }
.atl-sign figcaption{ display: flex; flex-direction: column; gap: 3px; font: 400 .72rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.atl-sign figcaption b{ font: 400 1rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }

.atl-intro__text{ max-width: none; }
@media (min-width: 1000px){
  .atl-intro__text{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
  .atl-intro__right{ padding-top: 34px; }
  .atl-intro__right .atl-quote{ margin-top: 0; }
}

/* L'atelier réorganisé : qui → pourquoi → quoi + contact */
.atl-net{ margin-top: clamp(32px, 4vw, 48px); }
.atl-net .atl-network__lead{ font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 40ch; }
.atl-net .atl-team li{ font-size: 1.25rem; }
.atl-what{ background: var(--ink); color: var(--paper); display: grid; gap: clamp(36px, 5vw, 64px); }
.atl-what .atl-eyebrow{ color: rgba(245,242,236,.6); }
.atl-what .atl-domains li{ border-color: rgba(245,242,236,.25); color: var(--paper); }
.atl-what .atl-domains li:hover{ background: var(--paper); border-color: var(--paper); color: var(--ink); }
.atl-what .atl-small{ color: rgba(245,242,236,.6); }
.atl-what__cta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(245,242,236,.2); }

/* L'atelier : bascule 3 sections / 2 sections (mission + domaines + contact sur un seul fond vert) */
.atl-layout{ position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(29,27,24,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: .55; transition: opacity .3s; }
.atl-layout:hover, .atl-layout:focus-within{ opacity: 1; }
.atl-layout button{ padding: 7px 11px; border: 0; border-radius: 999px; background: none; color: var(--white); font: 500 .6rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; opacity: .65; }
.atl-layout button[aria-pressed="true"]{ background: rgba(251,250,247,.16); opacity: 1; }
#tab-contact[data-atl="2"] .atl-duo{ background: var(--bg-contact); background-color: var(--c-contact); }
#tab-contact[data-atl="2"] .atl-duo > .band{ background: transparent; }
#tab-contact[data-atl="2"] .atl-mission{ padding-bottom: clamp(20px, 3vw, 40px); }
#tab-contact[data-atl="2"] .atl-what{ color: var(--white); padding-top: clamp(20px, 3vw, 40px); }
#tab-contact[data-atl="2"] .atl-what__dom{ padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(251,250,247,.3); }
#tab-contact[data-atl="2"] .atl-what .atl-eyebrow, #tab-contact[data-atl="2"] .atl-what .atl-small{ color: rgba(251,250,247,.7); }
#tab-contact[data-atl="2"] .atl-what .atl-domains li{ border-color: rgba(251,250,247,.35); color: var(--white); }
#tab-contact[data-atl="2"] .atl-what .atl-domains li:hover{ background: var(--white); color: var(--c-contact); }
#tab-contact[data-atl="2"] .atl-what__cta{ border-top-color: rgba(251,250,247,.3); }

.choice.is-resizing{ overflow: hidden; }

/* Copropriétés : intro + « En trois temps » resserrés */
#tab-coproprietes .band--intro{ padding-top: clamp(28px, 3vw, 48px); padding-bottom: 0; display: flow-root; }
#tab-coproprietes .band--intro .lede{ margin-bottom: 0; }
#tab-coproprietes .band--intro .band__heading{ margin-bottom: 0; }
#tab-coproprietes .band--steps{ padding-top: clamp(28px, 3vw, 44px); }
#tab-coproprietes .band--steps{ padding-bottom: clamp(36px, 4vw, 60px); }
@media (min-width: 900px){ #tab-coproprietes .band__grid .band__side{ padding-top: .35em; } }
@media (max-width: 899px){ #tab-coproprietes .band--intro .band__heading{ margin-bottom: .45em; } }
#tab-coproprietes .band--intro .lede{ max-width: 48ch; }
/* Copropriétés : le crédo en titre */
.copro-motto{ font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1; }
.copro-motto em{ font-style: italic; font-weight: 200; color: var(--c-particuliers); }
#tab-coproprietes .band--intro .lede{ border-left: 1px solid var(--rule); padding-left: clamp(16px, 2vw, 28px); }

/* Copropriétés — « En trois temps » : un seul temps ouvert à la fois, il s'élargit ; hiérarchie du texte */
#tab-coproprietes .steps--cols{ column-gap: clamp(32px, 4vw, 64px); transition: grid-template-columns .6s var(--ease); }
@media (min-width: 900px){
  #tab-coproprietes .steps--cols:has(.step:nth-child(1).is-open){ grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr); }
  #tab-coproprietes .steps--cols:has(.step:nth-child(2).is-open){ grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr); }
  #tab-coproprietes .steps--cols:has(.step:nth-child(3).is-open){ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.6fr); }
  #tab-coproprietes .steps--cols:has(.step.is-open) .step:not(.is-open) .step__s{ display: none; }
}
#tab-coproprietes .step__body{ max-width: 68ch; padding-top: 6px; padding-bottom: 44px; }
#tab-coproprietes .step__body .step__lead{ margin: 0 0 1.1em; font: italic 300 clamp(1.25rem, 1.7vw, 1.55rem)/1.4 var(--serif); color: var(--ink); }
#tab-coproprietes .step__body > p:not(.step__lead):not(.note){ margin: 0 0 1.05em; font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
#tab-coproprietes .step__body ul{ list-style: none; margin: 1.6em 0 1.4em; padding: 0; display: grid; gap: 14px; }
#tab-coproprietes .step__body li{ margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--c-coproprietes); font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
#tab-coproprietes .step__body li strong{ display: block; margin-bottom: 3px; font: 500 .74rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
#tab-coproprietes .step__body .note{ margin-top: 1.8em !important; padding: 18px 22px; border-left: 3px solid var(--c-particuliers); font-size: 1rem; }
#tab-coproprietes .step__body .note strong{ display: block; margin-bottom: 4px; font: 500 .72rem/1.3 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
/* Base explicite (3 pistes) pour que la largeur des colonnes s'anime aussi à l'ouverture du 1er temps et à la fermeture */
@media (min-width: 900px){ #tab-coproprietes .steps--cols{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
/* Citation (Copropriétés, temps 02) */
.step__quote{ position: relative; margin: 14px 0 1.4em; padding: 34px 0 6px 34px; border-left: 2px solid var(--ink); }
.step__quote::before{ content: '“'; position: absolute; left: 30px; top: -4px; font: 400 4.4rem/1 Georgia, 'Times New Roman', serif; color: var(--c-particuliers); opacity: .55; }
.step__quote p{ margin: 0; font: italic 300 clamp(1.25rem, 1.7vw, 1.55rem)/1.4 var(--serif); color: var(--ink); }
/* Pas de cadre de focus au clic souris sur les titres d'étapes (gardé au clavier) */
.step summary:focus:not(:focus-visible){ outline: none; }

/* Appels au contact */
.cta-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 26px; }
.cta-row .cta{ margin-top: 0; }
.cta--solid::after{ display: none; }
.cta--solid{ transition: background .25s, color .25s, transform .25s var(--ease); }
.cta--solid:hover{ transform: translateY(-2px); }
.cta-tel{ font: 400 .95rem/1 var(--sans); letter-spacing: .06em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.cta-tel:hover{ border-color: var(--ink); }
.step__cta{ margin-top: 1.6em; }
#tab-coproprietes .band--intro .cta-row{ padding-left: clamp(16px, 2vw, 28px); }
.cta-strip{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 48px;
  background: var(--noise-light-soft), var(--c-coproprietes); color: var(--white); padding-top: clamp(36px, 4vw, 60px); padding-bottom: clamp(36px, 4vw, 60px); }
.cta-strip--particuliers{ background: var(--noise-light-soft), var(--c-particuliers); }
.cta-strip__text{ margin: 0; font: 300 clamp(1.3rem, 2.2vw, 2rem)/1.3 var(--serif); max-width: 34ch; }
.cta-strip__text em{ font-weight: 400; }
.cta-strip .cta-row{ margin-top: 0; }
.cta--on-dark{ background: var(--white); color: var(--ink); }
.cta-tel--on-dark{ color: var(--white); border-color: rgba(251,250,247,.4); }
.cta-tel--on-dark:hover{ border-color: var(--white); }
.cta-strip, .cta-strip--particuliers{ background: var(--noise-light-soft), var(--ink); }
/* Texte des temps un peu plus large (moins de lignes) */
#tab-coproprietes .step__body{ max-width: 90ch; }
#tab-coproprietes .step__quote{ padding-top: 28px; margin-bottom: 1.1em; }
/* Citation compacte : guillemet aligné sur la première ligne, à gauche du texte */
#tab-coproprietes .step__quote{ margin: 0 0 1em; padding: 2px 0 2px 44px; }
#tab-coproprietes .step__quote::before{ left: 14px; top: 2px; font-size: 3rem; line-height: 1; }

/* =====================================================================
   Bibliothèque : étagère de livres (un livre = une section)
   ===================================================================== */
@media (min-width: 900px){
  .biblio-intro{ display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 90px); align-items: start; }
  .biblio-intro .shelf{ margin-top: 0; }
}
.shelf{ position: relative; justify-self: end; width: min(100%, 460px); margin-top: 28px; }
.shelf__books{ display: flex; align-items: flex-end; gap: 6px; padding: 0 18px; height: 300px; }
.book{ position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: 64px; padding: 14px 0 12px; color: var(--white); text-decoration: none; border-radius: 3px 3px 1px 1px;
  background: var(--noise-light-soft), var(--noise-dark-soft), var(--c-particuliers);
  box-shadow: inset 6px 0 10px -6px rgba(255,255,255,.35), inset -8px 0 12px -6px rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.2);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.book::before, .book::after{ content: ''; position: absolute; left: 8px; right: 8px; height: 1px; background: rgba(251,250,247,.55); box-shadow: 0 4px 0 rgba(251,250,247,.35); }
.book::before{ top: 44px; } .book::after{ bottom: 44px; }
.book--1{ height: 272px; }
.book--2{ height: 246px; width: 70px; background-color: var(--c-coproprietes); background-image: var(--noise-light-soft), var(--noise-dark-soft); }
.book--3{ height: 226px; width: 52px; }
.book--4{ height: 258px; width: 46px; }
.book__n{ font: 400 .8rem/1 var(--serif); letter-spacing: .12em; opacity: .85; }
.book__t{ writing-mode: vertical-rl; transform: rotate(180deg); font: 400 1.05rem/1 var(--serif); letter-spacing: .04em; white-space: nowrap; }
.book__c{ font: 500 .55rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
a.book:hover, a.book:focus-visible{ transform: translateY(-18px); box-shadow: inset 6px 0 10px -6px rgba(255,255,255,.35), inset -8px 0 12px -6px rgba(0,0,0,.45), 0 18px 24px -12px rgba(0,0,0,.45); }
a.book.is-pulled{ transform: translateY(-70px) rotate(-3deg); }
a.book:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.book--soon{ background: var(--paper-2); color: var(--ink-soft); box-shadow: inset 6px 0 10px -6px rgba(255,255,255,.6), inset -8px 0 12px -6px rgba(0,0,0,.12); justify-content: center; }
.book--soon::before, .book--soon::after{ background: rgba(29,27,24,.15); box-shadow: 0 4px 0 rgba(29,27,24,.08); }
.book--soon .book__t{ font-size: .7rem; font-family: var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.book--lean{ width: 40px; height: 230px; transform-origin: bottom left; transform: rotate(14deg); margin-left: 4px; }
.shelf__plank{ height: 12px; margin: 0 -4px; background: linear-gradient(180deg, #8a7867 0%, #6c5c4e 100%); border-radius: 1px; box-shadow: 0 10px 18px -10px rgba(0,0,0,.4); }
.shelf__hint{ margin: 12px 0 0; text-align: center; font: 500 .62rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
@keyframes book-target{ 0%{ box-shadow: inset 0 0 0 0 rgba(123,74,54,0); } 30%{ box-shadow: inset 4px 0 0 0 var(--c-particuliers); } 100%{ box-shadow: inset 4px 0 0 0 rgba(123,74,54,0); } }
.band.is-target{ animation: book-target 2.2s ease .4s; }
@media (max-width: 899px){ .shelf{ justify-self: center; } .shelf__books{ height: 240px; justify-content: center; } .book{ transform: scale(.85); transform-origin: bottom; } a.book:hover{ transform: scale(.85) translateY(-14px); } }
/* Étagère : plus grande, centrée dans sa colonne */
.shelf{ justify-self: center; width: min(100%, 620px); }
.shelf__books{ justify-content: center; height: 400px; gap: 8px; }
.book{ width: 86px; padding: 18px 0 16px; }
.book::before{ top: 58px; } .book::after{ bottom: 58px; }
.book--1{ height: 372px; }
.book--2{ height: 336px; width: 94px; }
.book--3{ height: 304px; width: 68px; }
.book--4{ height: 350px; width: 60px; }
.book--lean{ width: 54px; height: 310px; }
.book__n{ font-size: 1rem; }
.book__t{ font-size: 1.4rem; }
.book__c{ font-size: .62rem; }
.book--soon .book__t{ font-size: .78rem; }
.shelf__plank{ height: 14px; }
@media (min-width: 900px){ .biblio-intro{ align-items: center; } }
@media (max-width: 899px){ .shelf__books{ height: 300px; } .book{ transform: scale(.72); } a.book:hover{ transform: scale(.72) translateY(-14px); } }
@media (max-width: 899px){
  .shelf__books{ height: 280px; gap: 5px; padding: 0 8px; }
  .book, a.book:hover{ transform: none; }
  a.book:hover{ transform: translateY(-12px); }
  .book{ width: 58px; padding: 12px 0 10px; } .book::before{ top: 40px; } .book::after{ bottom: 40px; }
  .book--1{ height: 262px; } .book--2{ height: 236px; width: 62px; } .book--3{ height: 214px; width: 46px; } .book--4{ height: 246px; width: 40px; } .book--lean{ width: 36px; height: 218px; }
  .book__t{ font-size: 1.05rem; } .book--soon .book__t{ font-size: .6rem; }
}
@media (max-width: 899px){ .book--lean{ transform: rotate(14deg); } .book__t{ font-size: .92rem; } }
/* Étagère sur toute la largeur, sous le texte d'intro, avec une plante */
.biblio-intro{ display: block !important; }
.biblio-intro .shelf{ width: auto; margin: clamp(36px, 5vw, 64px) 0 0; justify-self: auto; }
.biblio-intro .shelf__books{ position: relative; justify-content: center; }
.biblio-intro .shelf__plank{ margin: 0; }
.shelf__plant{ position: absolute; right: clamp(4%, 9vw, 14%); bottom: 0; width: 230px; height: auto; overflow: visible; }
.plant__pot{ fill: #b0694c; }
.plant__rim{ fill: #9a5a40; }
.leaf{ fill: #4f6f4e; stroke: #3d5a3d; stroke-width: 1; }
.leaf--b, .leaf--e, .leaf--g{ fill: #5f8160; }
.leaf--c{ fill: #6b8f69; }
.plant__leaves{ transform-origin: 80px 150px; animation: plant-sway 6s ease-in-out infinite alternate; }
@keyframes plant-sway{ from{ transform: rotate(-1.6deg); } to{ transform: rotate(1.6deg); } }
@media (prefers-reduced-motion: reduce){ .plant__leaves{ animation: none; } }
@media (max-width: 899px){ .shelf__plant{ position: static; width: 70px; margin-left: 4px; flex: none; } .biblio-intro .shelf__books{ justify-content: flex-start; } }
/* Étagère au niveau du texte (colonne de droite), planche sur toute la largeur */
@media (min-width: 900px){
  .biblio-intro{ display: grid !important; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 90px); align-items: end; }
  .biblio-intro > .prose{ grid-column: 1; grid-row: 1; align-self: center; padding-bottom: 24px; }
  .biblio-intro .shelf{ display: contents; }
  .biblio-intro .shelf__books{ grid-column: 2; grid-row: 1; position: relative; justify-content: flex-start; padding-left: 4%; }
  .biblio-intro .shelf__plank{ grid-column: 1 / -1; grid-row: 2; }
  .biblio-intro .shelf__hint{ grid-column: 2; grid-row: 3; text-align: left; padding-left: 4%; }
  .biblio-intro .shelf__plant{ right: 2%; }
}
/* Étagère + livres remontés de 200 px (l'espace libéré en dessous est récupéré) */
@media (min-width: 900px){
  .biblio-intro .shelf__books, .biblio-intro .shelf__plank, .biblio-intro .shelf__hint{ position: relative; top: -200px; }

}
@media (min-width: 900px){ .biblio-intro .shelf__books, .biblio-intro .shelf__plank, .biblio-intro .shelf__hint{ top: -150px; } }
/* Plante : eucalyptus dans un pot en terrazzo */
.shelf__plant{ width: 210px; }
.shelf__plant .stem{ fill: none; stroke: #6d7b63; stroke-width: 1.6; stroke-linecap: round; }
.shelf__plant .plant__leaves{ transform-origin: 100px 236px; }
@media (max-width: 899px){ .shelf__plant{ width: 80px; } }
/* Livre penché : appuyé sur le livre à sa gauche */
.book--lean{ transform-origin: bottom left; transform: rotate(-12deg); margin-left: 66px; }
@media (max-width: 899px){ .book--lean{ transform: rotate(-12deg); margin-left: 46px; } }
.book--lean{ transform-origin: bottom right; margin-left: 70px; }
@media (max-width: 899px){ .book--lean{ margin-left: 48px; } .book--4{ display: none; } .shelf__plant{ width: 64px; } }
@media (min-width: 900px){ .book--lean{ margin-left: 54px; } }
/* Bibliothèque : texte d'intro plus petit, au-dessus de l'étagère ; planche d'un bord à l'autre de l'écran */
@media (min-width: 900px){
  .biblio-intro .shelf__books, .biblio-intro .shelf__plank, .biblio-intro .shelf__hint{ top: 0; }
  .biblio-intro > .prose{ align-self: end; padding-bottom: 28px; }
  .biblio-intro .lede-prose p{ font-size: clamp(.92rem, 1vw, 1.02rem); line-height: 1.6; margin-bottom: .8em; }
}
.biblio-intro{ overflow-x: clip; }
.biblio-intro .shelf__plank{ width: 100vw; justify-self: center; margin: 0; }
@media (max-width: 899px){ .biblio-intro .shelf__plank{ margin-left: calc(50% - 50vw); } }
@media (min-width: 900px) and (max-width: 1599px){ .biblio-intro .shelf__plant{ width: 150px; right: 0; } .biblio-intro .shelf__books{ padding-left: 0; } }
@media (max-width: 899px){ .biblio-intro .shelf__plank{ justify-self: start; width: 100vw; margin-left: calc(50% - 50vw); } }
@media (min-width: 900px){ .biblio-intro .lede-prose p{ font-size: clamp(.92rem, 1.1vw, 1.15rem); } }
/* Citation dans la Bibliothèque : même format compact que Copropriétés */
#tab-bibliotheque .step__quote{ margin: 1.4em 0 1em; padding: 2px 0 2px 44px; }
#tab-bibliotheque .step__quote::before{ left: 14px; top: 2px; font-size: 3rem; line-height: 1; }
#tab-bibliotheque .step__quote p{ font-size: clamp(1.1rem, 1.4vw, 1.3rem); }
/* L'atelier : portrait un peu plus grand ; guillemet de la citation dessiné en Georgia (celui de Jost ressemble à « // ») */
.atl-sign{ gap: 18px; margin-top: 22px; }
.atl-sign img{ width: 96px; height: 96px; }
.atl-sign figcaption b{ font-size: 1.15rem; }
.atl-quote::before{ font-family: Georgia, 'Times New Roman', serif; font-weight: 400; top: -18px; }
.atl-sign{ gap: 26px; margin-top: 28px; }
.atl-sign img{ width: 200px; height: 200px; }
.atl-sign figcaption b{ font-size: 1.35rem; }
@media (max-width: 600px){ .atl-sign img{ width: 140px; height: 140px; } }
/* Qui sommes-nous : phrase « dit moins prétentieusement » + mots clés de la mission */
.atl-quote .atl-quote__plain{ margin-top: 14px; font-style: normal; font-size: .92em; opacity: .8; }
.atl-quote .atl-quote__plain::before{ content: none; }
.atl-context strong, .atl-roles p strong{ font-weight: 500; color: #fbfaf7; }
/* Portrait encore agrandi */
.atl-sign{ gap: 32px; margin-top: 32px; }
.atl-sign img{ width: 300px; height: 300px; }
.atl-sign figcaption b{ font-size: 1.6rem; }
@media (max-width: 600px){ .atl-sign{ flex-direction: column; align-items: flex-start; gap: 16px; margin-left: 0; } .atl-sign img{ width: min(260px, 70vw); height: min(260px, 70vw); } }
/* Particuliers : accroche intégrée en bas de « Comment ça se passe » */
.steps-cta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 48px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--rule); }
.steps-cta__text{ margin: 0; font: 300 clamp(1.3rem, 2.2vw, 2rem)/1.3 var(--serif); max-width: 34ch; }
.steps-cta__text em{ font-weight: 400; }
.steps-cta .cta-row{ margin-top: 0; }
@media (min-width: 900px){ .band--list > .steps-cta{ grid-column: 1 / -1; } }
/* Nous contacter : en-tête esquisse / projet 3D */
#tab-nouscontacter .dual-head{ touch-action: pan-y; cursor: ew-resize; }
.dual-head > img, .dual-head__3d img{ object-position: center 42%; }
.dual-head__3d{ position: absolute; inset: 0; z-index: 0; clip-path: inset(0 0 0 var(--x)); pointer-events: none; }
.dual-head::after{ background: linear-gradient(to top, rgba(20,18,15,.6) 0%, rgba(20,18,15,.2) 38%, rgba(20,18,15,0) 65%) !important; }
.dual-head__line{ position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 2; width: 0; border-left: 1.5px solid rgba(251,250,247,.9); pointer-events: none; transition: opacity .3s; }
.dual-head__line i{ position: absolute; top: 50%; left: -19px; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: rgba(251,250,247,.92); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.dual-head__line i::before, .dual-head__line i::after{ content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid var(--ink); border-width: 1.5px 1.5px 0 0; }
.dual-head__line i::before{ left: 9px; transform: rotate(-135deg); }
.dual-head__line i::after{ right: 9px; transform: rotate(45deg); }
.dual-head[style*="--x:100%"] .dual-head__line, .dual-head[style*="--x: 100.00%"] .dual-head__line{ opacity: 0; }
.dual-head__lab{ position: absolute; top: 96px; z-index: 2; padding: 6px 10px; font: 500 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: rgba(251,250,247,.82); pointer-events: none; }
.dual-head__lab--l{ left: clamp(16px, 4vw, 48px); }
.dual-head__lab--r{ right: clamp(16px, 4vw, 48px); color: var(--white); background: rgba(20,18,15,.45); }
.tab--full .fancy-nav__tab-img--short.dual-head{ height: 74vh; height: 74svh; min-height: 420px; max-height: 860px; }
@media (max-width: 700px){ .tab--full .fancy-nav__tab-img--short.dual-head{ height: 58vh; height: 58svh; min-height: 360px; } }
.dual-head::after{ background:
  linear-gradient(to bottom, rgba(20,18,15,.55) 0%, rgba(20,18,15,0) 22%),
  linear-gradient(to top, rgba(20,18,15,.6) 0%, rgba(20,18,15,.2) 30%, rgba(20,18,15,0) 55%) !important; }
.dual-head__lab{ top: auto; bottom: 22px; }
.dual-head__lab--l{ left: auto; right: calc(100% - var(--x) + 14px); }
.dual-head__lab--r{ right: auto; left: calc(var(--x) + 14px); }
.dual-head > img, .dual-head__3d img{ object-position: center 30%; }
@media (max-width: 700px){ .dual-head__lab{ display: none; } }
/* Nous contacter : menu lisible sur l'esquisse claire */
.dual-head::after{ background:
  linear-gradient(to bottom, rgba(20,18,15,.78) 0, rgba(20,18,15,.5) 130px, rgba(20,18,15,0) 240px),
  linear-gradient(to top, rgba(20,18,15,.6) 0%, rgba(20,18,15,.2) 30%, rgba(20,18,15,0) 55%) !important; }
body:has(#tab-nouscontacter.is-visible) .fancy-nav__list .fancy-nav__title, #tab-nouscontacter .tab-logo{ text-shadow: 0 1px 10px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.35); }
/* Formulaire : champ piège à robots, invisible pour les visiteurs */
.contact__form .hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Particuliers : bouton « visite conseil » + téléphone sous le titre « Comment ça se passe » */
.list-head .cta-row{ flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 22px; }
@media (min-width: 900px){
  .band--list > .list-head{ grid-column: 1 / span 4; position: sticky; top: 110px; align-self: start; padding-right: 24px; }
  .band--list > .list-head > .section-title{ margin: 0; padding-top: 22px; border-top: 1.5px solid var(--ink); }
}
.steps-cta{ justify-content: flex-start; }
@media (max-width: 899px){ .band--list > .list-head{ margin-bottom: 28px; } }
.list-head .section-title{ white-space: nowrap; }
.list-head .cta{ max-width: 100%; text-align: center; }
/* Copropriétés : avis clients défilants */
.reviews__eyebrow{ margin: 0 0 22px; font: 500 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 14px; }
.reviews__eyebrow::before{ content: ""; width: 34px; height: 1px; background: currentColor; }
.reviews{ max-width: 980px; }
.reviews__track{ display: grid; }
.reviews__track > .review{ grid-area: 1 / 1; margin: 0; padding: 0; border: 0; max-width: 860px; opacity: 0; visibility: hidden; transform: translateX(28px);
  transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease), visibility 0s .7s; }
.reviews__track > .review.is-on{ opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease, ease) .15s, transform .7s var(--ease, ease) .15s, visibility 0s; }
.reviews__track > .review.is-out{ transform: translateX(-28px); }
.reviews__ctrl{ display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.reviews__ctrl[hidden]{ display: none; }
.reviews__arrow{ width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; font-size: 1rem; transition: border-color .25s, background .25s, color .25s; }
.reviews__arrow:hover{ border-color: var(--ink); background: var(--ink); color: var(--paper); }
.reviews__count{ font: 400 .85rem/1 var(--sans); letter-spacing: .08em; color: var(--ink-soft); min-width: 64px; text-align: center; }
.reviews__count b{ font-weight: 500; color: var(--ink); }
.reviews__bar{ flex: 1; max-width: 220px; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.reviews__bar i{ position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.reviews.is-playing .reviews__bar i{ animation: reviewsBar var(--reviews-delay, 7s) linear forwards; }
.reviews.is-paused .reviews__bar i{ animation-play-state: paused; }
@keyframes reviewsBar{ to{ transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){ .reviews__track > .review{ transition: none; transform: none; } }
/* Avis clients (v2) : centrés, un à la fois, défilement horizontal + points */
.band--testimonial{ text-align: center; }
.band--testimonial .reviews__eyebrow{ justify-content: center; }
.band--testimonial .reviews__eyebrow::after{ content: ""; width: 34px; height: 1px; background: currentColor; }
.reviews__mark{ display: block; margin: 6px 0 -.25em; font: 400 5.5rem/1 Georgia, 'Times New Roman', serif; color: var(--ink); opacity: .75; }
.reviews{ max-width: 920px; margin: 0 auto; overflow: hidden; }
.reviews__track{ display: flex; align-items: flex-start; transition: transform .8s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.reviews__track > .review, .reviews__track > .review.is-on, .reviews__track > .review.is-out{ flex: 0 0 100%; grid-area: auto; max-width: none; margin: 0; padding: 0 clamp(8px, 4vw, 48px); border: 0;
  opacity: 1; visibility: visible; transform: none; transition: none; }
.reviews__track > .review[hidden]{ display: none; }
.reviews__track > .review blockquote::before{ content: "« "; } .reviews__track > .review blockquote::after{ content: " »"; }
.reviews__track > .review figcaption{ margin-top: 1.3em; }
.reviews__dots{ display: flex; justify-content: center; gap: 12px; margin-top: 30px; min-height: 10px; }
.reviews__dots button{ width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--ink); cursor: pointer; transition: background .3s, transform .3s; }
.reviews__dots button[aria-selected="true"]{ background: transparent; transform: scale(1.15); }
.reviews__dots button:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.band--testimonial .cta{ margin-top: 2em; }
/* Nous contacter (v3) : rendu 3D fixe en fond, le dessin apparaît sur la zone verte qui remonte */
#tab-nouscontacter .tab-photo-bg{ display: none; }
.cx-bg{ position: fixed; inset: 0; z-index: 0; pointer-events: none; --cx-top: 100%; --cx-bot: 0px; }
.cx-bg img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.cx-bg__draw{ position: absolute; inset: 0; background: var(--c-contact); clip-path: inset(var(--cx-top) 0 var(--cx-bot) 0); }
.cx-bg__draw img{ filter: grayscale(1) invert(1) contrast(1.15); mix-blend-mode: screen; opacity: .5; }
#tab-nouscontacter .cx-head{ background: transparent; }
#tab-nouscontacter .cx-head::after{ background:
  linear-gradient(to bottom, rgba(20,18,15,.6) 0, rgba(20,18,15,.25) 130px, rgba(20,18,15,0) 240px),
  linear-gradient(to top, rgba(20,18,15,.55) 0%, rgba(20,18,15,0) 40%) !important; }
.tab--full .fancy-nav__tab-img--short.cx-head{ height: 78vh; height: 78svh; min-height: 420px; max-height: 900px; }
#tab-nouscontacter .band--contact{ background: transparent; }
#tab-nouscontacter .full > .tab-footer{ background: #1d1b18; position: relative; }
#tab-nouscontacter .fancy-nav__tab-description{ background: transparent; }
.cx-bg__draw img{ opacity: .36; }
/* Nous contacter : la zone verte fait au moins la hauteur de l'écran → elle peut recouvrir toute la photo ;
   dessin en traits sombres (comme l'original), fondu dans le vert, pour garder le texte lisible */
/* hauteur mini de la zone verte : calculée en JS (écran − pied de page), pour qu'en bas de page elle arrive pile en haut */
.cx-bg__draw img{ filter: grayscale(1) contrast(1.25) brightness(1.08); mix-blend-mode: multiply; opacity: .55; }
/* Nous contacter : pied de page compact */
#tab-nouscontacter .full > .tab-footer{ padding: 16px clamp(24px, 5vw, 80px); background: #1d1b18; }
#tab-nouscontacter .full > .tab-footer .tab-footer__meta{ margin-top: 0; }
/* Barre des rubriques figée pendant les changements de page (voir v2.js) */
body.bar-frozen .fancy-nav__tab :is(.tab-logo, .tab-rubrics, .tab-contact-btn, .fancy-nav__close-btn),
body.bar-frozen .tab-slices :is(.tab-logo, .tab-rubrics, .tab-contact-btn, .fancy-nav__close-btn){ visibility: hidden !important; opacity: 0 !important; transition: none !important; }
.bar-frozen-copy{ pointer-events: none; }
/* Nous contacter : coordonnées sous « Écrivez-nous », formulaire seul à droite, champs grisés */
#tab-nouscontacter .contact-head .contact__info{ margin-top: 34px; }
#tab-nouscontacter .band--contact .contact{ display: block; }
#tab-nouscontacter .contact__form input, #tab-nouscontacter .contact__form textarea{
  background: rgba(235,232,226,.16); border: 0; border-bottom: 1px solid rgba(251,250,247,.55); border-radius: 3px 3px 0 0;
  padding: 10px 12px; margin-top: 6px; transition: background .25s;
}
#tab-nouscontacter .contact__form input:focus, #tab-nouscontacter .contact__form textarea:focus{ background: rgba(235,232,226,.26); outline: none; }
.cx-bg__draw img{ opacity: .3; }
/* Nous contacter : contenu centré verticalement dans la zone verte, plus aéré, typographie unifiée */
#tab-nouscontacter .band--contact{ align-content: center; padding-top: clamp(56px, 7vw, 110px); padding-bottom: clamp(56px, 7vw, 110px); row-gap: 48px; }
@media (min-width: 900px){ #tab-nouscontacter .band--contact{ align-items: start; column-gap: clamp(64px, 7vw, 120px); } }
/* une seule famille de styles : petites capitales espacées pour toutes les étiquettes */
#tab-nouscontacter .contact__info dt,
#tab-nouscontacter .contact__form label,
#tab-nouscontacter .map-link{ font: 500 .7rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(251,250,247,.72); }
#tab-nouscontacter .contact__info dt{ margin-top: 26px; }
#tab-nouscontacter .contact__info dt:first-child{ margin-top: 0; }
#tab-nouscontacter .contact__info dd{ margin-top: 6px; font: 300 1.1rem/1.5 var(--sans); }
#tab-nouscontacter .map-link{ display: inline-block; margin-top: 8px; color: var(--white); }
#tab-nouscontacter .contact-head .lede{ font: 300 1.08rem/1.6 var(--sans); }
#tab-nouscontacter .contact-head .contact__info{ margin-top: 44px; }
#tab-nouscontacter .contact__form{ gap: 30px 28px; }
#tab-nouscontacter .contact__form label{ gap: 0; }
#tab-nouscontacter .contact__form input, #tab-nouscontacter .contact__form textarea{ font: 300 1.05rem/1.5 var(--sans); margin-top: 10px; }
#tab-nouscontacter .contact__actions{ margin-top: 8px; }
#tab-nouscontacter .form-privacy{ font: 300 .82rem/1.5 var(--sans); }
/* Nous contacter : en haut, le contenu de la zone verte est masqué et une flèche « C'est ici » invite à descendre */
#tab-nouscontacter{ --cx-p: 0; }
#tab-nouscontacter .band--contact{ position: relative; }
#tab-nouscontacter .band--contact > :not(.cx-hint){ opacity: clamp(0, (var(--cx-p) - .3) * 2.2, 1); }
.cx-hint{
  position: absolute; left: 50%; top: clamp(18px, 3vh, 34px); transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 14px; border: 0; background: none; cursor: pointer; color: var(--white);
  font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  opacity: clamp(0, 1 - var(--cx-p) * 4, 1);
  pointer-events: auto;
}
.cx-hint svg{ width: 22px; height: 22px; animation: cxHint 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes cxHint{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .cx-hint svg{ animation: none; } }
.cx-hint{ font-size: .95rem; gap: 10px; letter-spacing: .22em; }
.cx-hint svg{ width: 34px; height: 34px; }
/* Logo : barre oblique dans le prolongement des jambages droits des trois A (dépasse en haut et en bas) */
.tab-logo svg{ overflow: visible; }
.logo .w--bar{ animation-name: logo-bar; animation-delay: .75s; }
@keyframes logo-bar{ from{ opacity: 0; clip-path: inset(0 0 100% 0); } to{ opacity: 1; clip-path: inset(0 0 0 0); } }
/* Mise en ligne : boutons de comparaison de versions masqués (versions retenues : 2 parties / Planche) */
.atl-layout, .pv-toggle{ display: none !important; }