/* ═══════════════════════════════════════════════════════════
   PROJETS — Direction A "La Carte du Territoire"
   Namespace .proj-*
   Architecture : S1 MAST paper · ZONE B TABS PAYS · S2 PHARES paper (territory-driven)
                  STRIP DARK territoire (entre phare réel et lots) · S3 LOTS paper · S4 CLOSING photo BG
   ─────────────────────────────────────────────────────────── */

/* lerp via assets/js/smooth-scroll.js */

/* ── Pass 4.5 reveals ─────────────────────────────────────── */
[data-reveal-item]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
[data-reveal-item].is-revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  [data-reveal-item]{opacity:1;transform:none;transition:none}
}


/* ════════════════════════════════════════════════════════════
   S1 — MASTHEAD paper — Zone A : pattern .crc-mast monumental
   Grid asymétrique 1.3fr 1fr, H1 monumental serif, eyebrow structuré
   ════════════════════════════════════════════════════════════ */
/* Masthead : trame partagée .page-mast (style.css) */
.proj-mast{position:relative;padding-bottom:2rem}
.proj-mast__inner{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:5rem;
  /* Founder 2026-07-18 : sous-titre CENTRÉ verticalement sur le titre (au lieu de
     flotter en haut à droite) — « aligner sur le titre ». */
  align-items:center;
}

/* Eyebrow : trame partagée .page-mast__eyebrow (style.css) */
.proj-mast__eyebrow-label{
  letter-spacing:.26em;
}

.proj-mast__h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem,6.6vw,5.2rem);
  color:var(--dark);
  line-height:.98;
  letter-spacing:-.025em;
  margin:0;
  max-width:14ch;
}
/* Italiques copper sur em dans H1 */
.proj-mast__h1 em{
  font-style:italic;
  color:var(--copper);
  font-weight:400;
}

/* Col droite */
.proj-mast__col-right{
  display:flex;
  flex-direction:column;
  gap:0;
  padding-bottom:.4rem;
}
.proj-mast__sub{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  color:var(--mid);
  line-height:1.55;
  max-width:36ch;
  margin:0 0 2.2rem;
  letter-spacing:-.005em;
}
/* Tablette (601-900) : titre + sous-titre RESTENT côte à côte (Founder 2026-07-17)
   — le descriptif ne passe plus sous le titre. Gap resserré. */
@media(max-width:900px){
  .proj-mast__inner{gap:2.5rem}
  .proj-mast{padding-bottom:1.75rem}
}
/* Mobile (<600) : passage en colonne unique. Marge sub réduite (item E). */
@media(max-width:600px){
  .proj-mast__inner{grid-template-columns:1fr}
  .proj-mast__sub{margin-bottom:.5rem}
}
@media(max-width:480px){
  .proj-mast__h1{font-size:clamp(2.4rem,8vw,3.2rem)}
}


/* ════════════════════════════════════════════════════════════
   ZONE B — TABS PAYS IN-PAGE
   Typographie sobre Jost. Underline copper sur actif + hover.
   Jamais pill coloré, jamais border-radius full.
   ════════════════════════════════════════════════════════════ */
.proj-tabs{
  background:var(--paper);
  padding:0;
  overflow-x:auto;
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE */
}
.proj-tabs::-webkit-scrollbar{display:none}

.proj-tabs__inner{
  display:flex;
  gap:2.2rem;
  align-items:stretch;
}

.proj-tabs__tab{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mid);
  background:none;
  border:none;
  cursor:pointer;
  padding:.95rem 0;
  min-height:44px;
  white-space:nowrap;
  position:relative;
  transition:color .3s ease;
  flex-shrink:0;
}

/* Underline copper en bas — transition width 0→100% */
.proj-tabs__tab::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:var(--copper);
  transition:width .35s cubic-bezier(.16,1,.3,1);
}

.proj-tabs__tab[aria-pressed="true"]{
  color:var(--dark);
}
.proj-tabs__tab[aria-pressed="true"]::after{
  width:100%;
}

@media(hover:hover) and (pointer:fine){
  .proj-tabs__tab:hover{
    color:var(--dark);
    opacity:1;
  }
  .proj-tabs__tab:hover::after{
    width:100%;
  }
}

@media(max-width:768px){
  .proj-tabs__inner{gap:1.8rem}
}
@media(max-width:480px){
  .proj-tabs__inner{gap:1.4rem}
  .proj-tabs__tab{font-size:.72rem}
}


/* ════════════════════════════════════════════════════════════
   S2 — PHARES dark (territory-driven, 1 visible à la fois)
   ════════════════════════════════════════════════════════════ */

/* Masquage/affichage géré par l'attribut HTML hidden + IIFE JS */
.proj-phare[hidden]{ display:none !important }

/* ── PHARE réel — cartouche `.doss-mast__card` partagée avec les dossiers projet
   (assets/css/dossier.css, combo Founder 1-B·2-A·3-A : pied CTA + ourlet + card fermée).
   Le tronc commun (card/rule/info/meta/photo/cta/counter) vit dans dossier.css, PAS
   dupliqué ici — seul l'habillage section (fond, container, respiration) reste page-
   spécifique. Fin du panneau plein viewport 58/42 (contenance, pas full-bleed). ── */
.proj-phare:not(.proj-phare--placeholder),
.proj-lot--featured{
  background:var(--paper);
  max-width:1340px;
  margin:0 auto;
  padding:4rem 1.25rem;
}
/* ── PHARE mis en avant (Founder 2026-07-18) — le CRÈME est DANS la cartouche
   (pas derrière le bloc) : la carte du phare passe en --cream, celle du lot reste
   en --paper → c'est la cartouche elle-même qui se distingue. + eyebrow « À la une ».
   La STRUCTURE de la carte est inchangée (parité d'encart fiche ↔ cartouche). ── */
.proj-phare:not(.proj-phare--placeholder) .doss-mast__card{
  background:var(--cream);
}
.proj-phare__label{
  display:block;max-width:1120px;margin:0 auto .9rem;
}

@media(min-width:900px){
  /* Item « trop d'espace desktop » (Founder 2026-07-17) : padding-top réduit
     (6rem → 2.5rem) — l'écart masthead → 1ère cartouche était trop grand. */
  .proj-phare:not(.proj-phare--placeholder),
  .proj-lot--featured{padding:2.5rem 2.5rem 6rem}
}

/* ── CTA cartouche (Founder 2026-07-17) : « Lire le dossier » à DROITE du bouton
   principal, côte à côte sur UNE ligne À TOUTES LES LARGEURS (mobile inclus). La
   colonne étroite l'imposerait à wrapper → nowrap + tracking et taille CTA réduits
   (sans typo minuscule). space-between hérité : primary à gauche, lien à droite. ── */
.proj-phare:not(.proj-phare--placeholder) .doss-mast__cta,
.proj-lot--featured .doss-mast__cta{
  flex-wrap:nowrap;gap:.6rem 1rem;align-items:baseline
}
.proj-phare:not(.proj-phare--placeholder) .doss-mast__cta-primary,
.proj-phare:not(.proj-phare--placeholder) .doss-mast__cta-secondary,
.proj-lot--featured .doss-mast__cta-primary,
.proj-lot--featured .doss-mast__cta-secondary{
  white-space:nowrap;letter-spacing:.08em;font-size:.72rem
}

/* ── R-6 (2026-07-17, Founder — item A, à l'œil sur desktop) — la PHOTO occupe
   toute la hauteur de la carte à gauche ; TOUT le reste (titre + faits + CTA +
   ourlet intérêt) s'empile à DROITE, en face de la photo. RIEN sous la photo.
   « Lot complet ou à l'unité » a quitté l'ourlet pour rejoindre la liste des
   faits (dl, ligne « Vente »). Lot featured Saint-François = MIROIR (photo à
   droite, tout à gauche). Annule le R-5 « pleine largeur sous le CTA ». ── */
@media(min-width:900px){
  .proj-phare:not(.proj-phare--placeholder) .doss-mast__card{
    grid-template-areas:
      "rule  rule"
      "photo info"
      "photo cta"
      "photo counter"
  }
  .proj-lot--featured .doss-mast__card{
    grid-template-columns:1fr 1.6fr;
    grid-template-areas:
      "rule    rule"
      "info    photo"
      "cta     photo"
      "counter photo"
  }
  /* La photo carrée du phare a une hauteur naturelle ≈ celle de la colonne de
     droite → align-self:stretch s'engageait à peine, l'ourlet dépassait de ~24px
     sous la photo. height:100% force la photo à remplir sa zone (rangées info+
     cta+counter) : bas de photo aligné sur le bas de l'ourlet, rien qui dépasse.
     Le <picture> (inline par défaut) doit aussi remplir, sinon l'img se replie
     sur sa hauteur naturelle et le fond sombre du conteneur apparaît en noir. */
  .proj-phare:not(.proj-phare--placeholder) .doss-mast__photo,
  .proj-lot--featured .doss-mast__photo{height:100%}
  .proj-phare:not(.proj-phare--placeholder) .doss-mast__photo picture,
  .proj-lot--featured .doss-mast__photo picture{display:block;height:100%}
}

/* Mention lisible sur les études : ces images ne montrent rien de construit. */
.proj-lot__projection{
  font-family:var(--serif);font-style:italic;font-size:.94rem;color:var(--mid);
  margin:.9rem 0 0
}
@media(max-width:899px){
  .proj-lot--featured .doss-mast__card{
    grid-template-areas:"rule" "h1" "photo" "cap" "facts" "cta" "counter"
  }
  .proj-lot__projection{grid-area:cap;margin:-.8rem 0 0}
}

/* ── Étude close, en petit (Benjamin 02/11) : terrain vendu, jamais construit.
   Photo réduite à gauche, faits en ligne, seul le lien vers le dossier. ── */
.proj-lot--compact{padding-top:0}
.proj-lot--compact .doss-mast__card{row-gap:1rem;padding:1.3rem 1.2rem 1.4rem}
.proj-lot--compact .doss-mast__rule{margin-bottom:0}
.proj-lot--compact .doss-mast__title{font-size:clamp(1.5rem,5vw,1.8rem)}
.proj-lot--compact .doss-mast__hr{display:none}
.proj-lot--compact .doss-mast__photo{height:190px;min-height:0}
.proj-lot--compact .doss-mast__cta{justify-content:flex-start;padding-top:0;border:0}
@media(min-width:900px){
  .proj-lot--compact .doss-mast__card{
    grid-template-columns:260px 1fr auto;column-gap:2.4rem;row-gap:1.1rem;
    padding:1.4rem 1.8rem 1.6rem;
    grid-template-areas:
      "rule  rule rule"
      "photo info cta"
  }
  .proj-lot--compact .doss-mast__photo{height:175px;aspect-ratio:auto;align-self:center}
  .proj-lot--compact .doss-mast__info{justify-content:center}
  .proj-lot--compact .doss-mast__meta{
    flex-direction:row;flex-wrap:wrap;gap:.35rem 1.8rem;margin-top:.9rem
  }
  .proj-lot--compact .doss-mast__cta{align-self:center}
}
@media(max-width:899px){
  .proj-lot--compact .doss-mast__card{
    grid-template-areas:"rule" "h1" "photo" "cap" "facts" "cta"
  }
  .proj-lot--compact .proj-lot__projection{margin-top:-.3rem}
}

/* ── PHARE placeholder : typographie monumentale dark ────── */
.proj-phare--placeholder{
  background:var(--dark);
  color:var(--paper);
  position:relative;
}
.proj-phare__placeholder-inner{
  max-width:1100px;
  margin:0 auto;
  padding:8rem 2.5rem 8rem;
  display:flex;
  flex-direction:column;
  gap:2rem;
  align-items:flex-start;
}
.proj-phare__placeholder-h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3.5rem,10vw,8rem);
  color:var(--paper);
  line-height:.92;
  letter-spacing:-.04em;
  margin:0;
  opacity:.2;
}
/* Eyebrow shared across phare real + placeholder */
.proj-phare--placeholder .proj-phare__eyebrow{--eb:var(--copper-text-dark)}

/* Phare placeholder CTA */
.proj-phare--placeholder .proj-phare__cta--primary{
  margin-top:.5rem;
}

@media(max-width:900px){
  .proj-phare__placeholder-inner{padding:5rem 1.5rem 6rem}
  .proj-phare__placeholder-h2{font-size:clamp(2.8rem,8vw,5rem)}
}
@media(max-width:480px){
  /* Item E (Founder 2026-07-17, resserré ×2) : padding-top quasi nul — le vide
     entre le sub-masthead « Des terrains identifiés… » et la 1ère cartouche était
     encore jugé trop grand. Bas conservé (séparation avec les lots). */
  .proj-phare:not(.proj-phare--placeholder),
  .proj-lot--featured{padding:1rem 1.2rem 3rem}
  .proj-phare__placeholder-inner{padding:4rem 1.2rem 5rem}
  .proj-phare__placeholder-h2{font-size:clamp(2.4rem,12vw,3.8rem)}
}


/* ════════════════════════════════════════════════════════════
   Séparateur strip retiré — respiration paper assurée par margin-top
   du .proj-lot--featured. Le mirroir 58/42 vs 42/58 + l'eyebrow lot
   font la séparation visuelle.
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   S3 — LOTS paper : groupés par territoire
   Architecture simplifiée — header/filtres/compteur/status-headers supprimés
   ════════════════════════════════════════════════════════════ */
.proj-lots{
  background:var(--paper);
  padding:0;
}

/* Groupe territoire — invisible si vide */
.proj-lots__group{
  display:block;
}
.proj-lots__group:empty{
  display:none;
}

/* Ligne commune article — borders supprimés (trait copper fantôme visible
   top du lot featured, demande Benjamin). Si futur multi-lots demande
   séparation visuelle, ré-évaluer avec dispositif moins parasite. */
.proj-lot{
  position:relative;
}

/* ── Ligne Petit-Bourg WITH photo 4:3 gauche ──────────────── */
.proj-lot--pb{
  max-width:1340px;
  margin:0 auto;
  padding:0 2.5rem;
  display:grid;
  grid-template-columns:38fr 62fr;
  gap:0;
  align-items:center;
}
.proj-lot__photo{
  margin:0;
  overflow:hidden;
  position:relative;
  padding:2.5rem 3rem 2.5rem 0;
}
.proj-lot__photo picture,
.proj-lot__photo img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* Caption Pattern A — DESSOUS la photo */
.proj-lot__photo-caption{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.78rem;
  color:var(--mid);
  margin:.7rem 0 0;
  display:block;
}
.proj-lot__photo-caption-rule{
  display:inline-block;
  width:1.4rem;
  height:1px;
  background:var(--copper);
  opacity:.5;
  vertical-align:middle;
  margin-right:.5rem;
}

.proj-lot__body--pb{
  padding:3rem 0 3rem 3rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.proj-lot__eyebrow{margin:0 0 1.8rem;}
.proj-lot__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem,5vw,4.2rem);
  color:var(--dark);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 1rem;
}
.proj-lot__desc--pb{
  font-family:var(--sans);
  font-weight:300;
  font-size:.95rem;
  color:var(--mid);
  line-height:1.6;
  max-width:50ch;
  margin:0;
  padding:.5rem 0 0;
}



/* ── Lot featured — cartouche `.doss-mast__card` partagée (dossier.css), même
   grammaire que le phare ci-dessus (combo Founder 1-B·2-A·3-A). Le container
   (.proj-lot--featured : fond/max-width/padding) est mutualisé avec le phare
   au § S2 PHARES. Fin du diptyque mirroir 42/58 plein viewport. ── */

/* Lots standards compacts — latents (1 seul lot aujourd'hui, règles pré-câblées) */
.proj-lot:not(.proj-lot--featured){
  min-height:400px;
  max-height:560px;
  margin-block:1.5rem;
}
.proj-lots__group--multi{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
@media(min-width:900px){
  .proj-lots__group--multi{
    grid-template-columns:1fr 1fr;
  }
}

/* Zone D — CTAs lot — CTA-1 lead (bouton cadré cuivre) domine · CTA-2 dossier (lien encre) subordonné */
.proj-lot__cta{
  position:relative;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-block;
  align-self:flex-start;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  outline-offset:3px;
}
/* CTA-1 — lead, affordance cadrée cuivre plate (jamais fond plein/ombre/scale) */
.proj-lot__cta--primary{
  color:var(--copper-text-light);
  background:rgba(184,115,51,.06);
  border:1px solid var(--copper);
  border-radius:0;
  padding:.7rem 1.4rem;
  transition:background 400ms cubic-bezier(.16,1,.3,1),border-color 400ms cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) and (pointer:fine){
  .proj-lot__cta--primary:hover{background:rgba(184,115,51,.12)}
}
/* CTA-2 — dossier, lien encre subordonné, filet animé conservé */
.proj-lot__cta--secondary{
  color:var(--dark);
  background:none;
  border:none;
  padding:.4rem 0;
  border-bottom:1px solid rgba(44,44,40,.18);
}
.proj-lot__cta--secondary::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:var(--dark);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 600ms cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) and (pointer:fine){
  .proj-lot__cta--secondary:hover::after{transform:scaleX(1)}
}

@media(max-width:900px){
  .proj-lot--pb{
    grid-template-columns:1fr;
    gap:0;
  }
  .proj-lot__photo{padding:2rem 0 0}
  .proj-lot__body--pb{padding:2rem 0 3rem}
}
@media(max-width:480px){
  .proj-lots{padding:0}
  .proj-lot--pb{padding:0 1.2rem}
}


/* ════════════════════════════════════════════════════════════
   COMPTEURS — Direction A "Le Registre"
   Chiffre monumental serif (capte l'œil compteur) + libellé inline italic +
   total SIGNATURES uppercase + trait copper + meta italic mécanique business.
   Demandes NE PLAFONNENT PAS les SIGNATURES (sélection sur dossier).
   Vit désormais DANS l'ourlet `.doss-mast__counter` (dossier.css) — grid-area/
   bordure/padding partagés avec les dossiers, la colonne 2 lignes reste ici
   (disponibilité + intérêt — absente des dossiers, propre à projets.html).
   ════════════════════════════════════════════════════════════ */
.proj-phare__counter,
.proj-lot__counter{
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  margin:0;
  max-width:none;
}
/* Annexe intérêt (social proof) — demoted sous le trait (hiérarchie inversée Founder 2026-07-14) */
.proj-phare__counter-main,
.proj-lot__counter-main{
  display:flex;
  align-items:baseline;
  gap:.4rem;
  margin:0;
  line-height:1;
  position:relative;   /* ancre le "+1" flottant */
}
.proj-phare__counter-num,
.proj-lot__counter-num{
  font-family:var(--serif);
  font-weight:400;
  font-style:normal;
  font-size:1.05rem;
  color:var(--copper-text-light);
  line-height:1;
  letter-spacing:0;
}
/* Compteur +1 (joué à la fermeture de la modal, Founder 2026-07-03) :
   1) un "+1" cuivre s'élève au-dessus du chiffre  2) le total apparaît ensuite. */
.proj-counter-plusone{
  position:absolute;
  left:0;
  bottom:100%;
  margin-bottom:.15rem;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(.95rem,1.4vw,1.1rem);
  color:var(--copper);
  pointer-events:none;
  white-space:nowrap;
  animation:projPlusOne 1.15s cubic-bezier(.16,1,.3,1) both;
}
@keyframes projPlusOne{
  0%{   opacity:0; transform:translateY(10px) scale(.9) }
  18%{  opacity:1; transform:translateY(0)    scale(1) }
  60%{  opacity:1; transform:translateY(-9px) scale(1) }
  100%{ opacity:0; transform:translateY(-26px) scale(1) }
}
/* Le total qui apparaît après le "+1" — fondu + légère montée + flash cuivre */
.proj-counter-bump{
  display:inline-block;
  transform-origin:left center;
  animation:projCounterBump .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes projCounterBump{
  0%{   opacity:0; transform:translateY(7px) scale(1.12); color:var(--copper) }
  /* A11y : l'animation doit RETOMBER sur la couleur accessible du compteur,
     sinon elle réintroduit le 2,80:1 à la fin du bump. */
  100%{ opacity:1; transform:translateY(0)   scale(1);    color:var(--copper-text-light) }
}
@media(prefers-reduced-motion:reduce){
  .proj-counter-plusone{ animation:none; opacity:0 }
  .proj-counter-bump{ animation:none; display:inline-block }
}
.proj-phare__counter-label,
.proj-lot__counter-label{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.95rem;
  color:var(--mid);
  line-height:1.3;
}
/* Info PRINCIPALE : disponibilité à la vente — hero serif (hiérarchie inversée Founder 2026-07-14) */
.proj-phare__counter-total,
.proj-lot__counter-total{
  font-family:var(--serif);
  font-weight:400;
  font-style:normal;
  font-size:clamp(1.45rem,2.4vw,1.9rem);
  letter-spacing:-.01em;
  line-height:1.2;
  /* A11y (2026-07-18) : --copper-text-dark (#BA8D4A) est le token FOND SOMBRE.
     Ces compteurs vivent sur paper/cream → 2,57-2,80:1, échec AA sur l'info
     principale de disponibilité. --copper-text-light = 5,09:1. */
  color:var(--copper-text-light);
  margin:0 0 .55rem;
}
/* État COMPLET — projet entièrement réservé (signed >= total).
   Jamais grayed-out : copper plein, engagement persistant. */
.proj-counter-total--complete{
  color:var(--copper-text-light);
  font-weight:400;
}
.proj-phare__counter-rule,
.proj-lot__counter-rule{
  display:block;
  width:32px;
  height:1px;
  background:var(--copper);
  opacity:.45;
  margin:1.2rem 0 .9rem;
}
.proj-phare__counter-meta,
.proj-lot__counter-meta{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(.95rem,1.2vw,1.05rem);
  color:var(--mid);
  margin:0;
  line-height:1.4;
  max-width:36ch;
}

/* Badge complet — remplace .proj-phare__counter ou .proj-lot__counter par cette classe
   quand toutes SIGNATURES réservées (engouement préservé, pas grayed-out).
   Copy FR : "Toutes les SIGNATURES sont réservées."
   Copy EN : "All SIGNATURES are reserved." */
.proj-phare__counter--complete,
.proj-lot__counter--complete{
  color:var(--copper-text-light);
  font-weight:400;
}


/* ════════════════════════════════════════════════════════════
   VEILLE TERRAIN — encart capture résiduelle AVANT S4
   Background paper, pas de border (anti-pattern dashboard).
   Reprend le CTA uppercase tracking cohérent phare/lot.
   ════════════════════════════════════════════════════════════ */
.proj-watch{
  background:var(--paper);
  padding:6rem 2.5rem;
  position:relative;
}
.proj-watch__inner{
  max-width:1240px;
  margin:0 auto;
  padding:4rem 3rem;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  align-items:flex-start;
}
.proj-watch__eyebrow{}
.proj-watch__phrase{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  color:var(--dark);
  line-height:1.25;
  letter-spacing:-.015em;
  margin:0;
  max-width:42ch;
}
.proj-watch__cta{
  position:relative;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--copper-text-light);
  background:none;
  border:none;
  border-bottom:1px solid rgba(184,115,51,.25);
  padding:.4rem 0;
  margin-top:1.2rem;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  outline-offset:3px;
}
.proj-watch__cta::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:var(--copper);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 600ms cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) and (pointer:fine){
  .proj-watch__cta:hover::after{transform:scaleX(1)}
}
@media(max-width:768px){
  .proj-watch{padding:4rem 1.5rem}
  .proj-watch__inner{padding:3rem 1.5rem;gap:1.2rem}
}


/* ════════════════════════════════════════════════════════════
   S4 — CLOSING photo fond immersif
   Photo BG + overlay gradient → rupture nette avec footer dark
   ════════════════════════════════════════════════════════════ */
.proj-closing{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:60vh;
  display:flex;
  align-items:flex-end;
}

/* Photo BG — étendue pour parallax margin */
.proj-closing__bg{
  position:absolute;
  top:-12%; bottom:-12%; left:0; right:0;
  z-index:-1;
  pointer-events:none;
  will-change:transform;
}
.proj-closing__bg picture{
  display:block;
  width:100%;
  height:100%;
}
.proj-closing__bg img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
}

/* Zone D — Overlay allégé pour photo bardage bois (R-4 Supervisor) — photo contribue visuellement */
.proj-closing::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.78)
  );
}

.proj-closing__inner{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
  padding:6rem 2.5rem 7rem;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:2.4rem;
}

/* Closure rule discrète S4 — copper sobre 48px, signature closing page (cf. ADR-0009 quota 2/page : 1 paire diptyque mirroir phare+lot S2/S3 + 1 closing S4) */
.proj-closing__closure-rule{
  display:block;
  width:0;
  height:1px;
  background:var(--copper);
  opacity:.55;
  transition:width .9s cubic-bezier(.16,1,.3,1);
}
.proj-closing__closure-rule.is-revealed{width:48px}

.proj-closing__phrase{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.4rem);
  color:var(--paper);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0;
  max-width:28ch;
}

/* Reset button natif pour <button> CTA closing */
.proj-closing__cta[type="button"]{
  background:none;
  border:none;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  outline-offset:3px;
}

.proj-closing__cta{
  position:relative;
  font-family:var(--sans);
  font-size:.84rem;
  font-weight:300;
  letter-spacing:.2em;
  text-transform:uppercase;
  /* A11y (2026-07-18) : CTA lead-gen principal, sur fond clair — était à
     2,80:1. Un CTA sous le seuil AA est un CTA qu'on ne lit pas. */
  color:var(--copper-text-light);
  text-decoration:none;
  padding:.55rem 0;
  display:inline-block;
  align-self:flex-start;
  border-bottom:1px solid rgba(184,115,51,.3);
}
.proj-closing__cta::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:var(--copper);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 600ms cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) and (pointer:fine){
  .proj-closing__cta:hover::after{transform:scaleX(1)}
}

@media(max-width:768px){
  .proj-closing__inner{padding:5rem 1.5rem 6rem}
}
@media(max-width:480px){
  .proj-closing__inner{padding:4rem 1.2rem 5rem}
  .proj-closing__phrase{font-size:clamp(1.3rem,5.5vw,1.7rem)}
}


/* ════════════════════════════════════════════════════════════
   MODAL CALLBACK — "Être rappelé" friction zéro
   <dialog> natif HTML, champ téléphone seul
   ════════════════════════════════════════════════════════════ */

/* Modale de rappel .proj-modal → assets/css/modal.css (source unique partagée) */

/* ── ÉTUDES RÉALISÉES (2026-10-31, retouches ②③ de Benjamin) — Saint-François et
   Petit-Bourg descendus sous le projet en cours ; section masquée par le JS quand
   l'île choisie n'a pas d'étude. ── */
.proj-lots[hidden]{display:none !important}
.proj-clients[hidden]{display:none !important}
/* Tête d'ensemble (Benjamin 02/11) : projets de clients, lots ouverts, études closes. */
.proj-ens{max-width:1340px;margin:0 auto;padding:3.5rem 1.25rem 1.5rem}
.proj-ens__inner{
  max-width:1120px;margin:0 auto;padding-top:1.4rem;
  border-top:1px solid rgba(44,44,40,.28);
  display:flex;flex-direction:column;gap:.8rem;
}
.proj-ens__titres{display:flex;flex-direction:column;gap:.6rem}
.proj-ens__ey{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-text-light)}
.proj-ens__h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-.01em;color:var(--dark)}
.proj-ens__h2 em{color:var(--copper-text-light);font-style:italic}
.proj-ens__phrase{margin:0;font-size:1.0625rem;font-weight:300;line-height:1.6;color:var(--mid-dk);max-width:44ch}
@media (min-width:900px){
  .proj-ens{padding:5.5rem 2.5rem 2rem}
  .proj-ens__inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3rem;align-items:end;padding-top:1.9rem}
}

/* ── Sélecteur de nature (client ou investisseur) : domine le filtre par territoire ── */
.proj-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Titre, sélecteur, territoires et cartes sur le même aplomb de 1120 px */
.proj-mast .page-mast__inner,.proj-tabs__inner,.proj-vide .page-mast__inner{max-width:calc(1120px + 2 * var(--content-pad))}
.proj-mast__inner + .proj-nature{margin-top:2.6rem}
.proj-nature{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}
.proj-nature button{
  position:relative;background:none;border:0;cursor:pointer;text-align:left;color:var(--mid-dk);
  font-family:var(--sans);border-top:1px solid rgba(44,44,40,.28);border-bottom:1px solid rgba(44,44,40,.28);
  transition:color .3s ease;
}
.proj-nature button::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--copper);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.proj-nature button[aria-pressed="true"]::after{transform:scaleX(1)}
.proj-nature__tous{padding:0 2rem;font-size:.8rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.proj-nature__tous[aria-pressed="true"]{color:var(--dark)}
.proj-nature__porte{display:flex;flex-direction:column;justify-content:flex-start;gap:.4rem;padding:1.25rem 1.75rem 1.4rem}
.proj-nature__porte::before{content:'';position:absolute;left:0;top:1rem;bottom:1rem;width:1px;background:rgba(44,44,40,.14)}
.proj-nature__nom{font-family:var(--serif);font-size:1.7rem;line-height:1.1;color:var(--dark);transition:color .3s ease}
.proj-nature__porte[aria-pressed="true"] .proj-nature__nom{color:var(--copper-text-light)}
.proj-nature__pour{font-size:.95rem;font-weight:300;line-height:1.4}
@media(hover:hover) and (pointer:fine){
  .proj-nature button:hover::after{transform:scaleX(1)}
  .proj-nature__tous:hover{color:var(--dark)}
}
@media(max-width:600px){
  .proj-mast{padding-bottom:0}
  .proj-mast__inner + .proj-nature{margin-top:1.1rem}
  .proj-nature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .proj-nature__tous{grid-column:1 / -1;min-height:44px;padding:0;border-bottom-color:rgba(44,44,40,.14)}
  .proj-nature__porte{padding:.8rem .8rem .95rem 0;border-top:0}
  .proj-nature__porte + .proj-nature__porte{padding-left:.8rem}
  .proj-nature__porte:first-of-type::before{display:none}
  .proj-nature__tous + .proj-nature__porte::before{display:none}
  .proj-nature__nom{font-size:1.25rem}
  .proj-nature__pour{font-size:.86rem;line-height:1.35}
}
@media(prefers-reduced-motion:reduce){
  .proj-nature button,.proj-nature button::after,.proj-nature__nom{transition:none}
}

/* Combinaison sans résultat */
.proj-vide[hidden]{display:none}
.proj-vide{padding:3.5rem 0 1rem}
@media(max-width:600px){.proj-vide{padding-top:1.5rem}}
.proj-vide__msg{margin:0 0 1.5rem;font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;color:var(--dark);max-width:30ch}
.proj-vide__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.proj-vide__cta{min-height:44px;padding:0 1.4rem;background:none;border:1px solid var(--copper-text-light);cursor:pointer;font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-text-light);transition:background .3s ease,color .3s ease}
@media(hover:hover) and (pointer:fine){.proj-vide__cta:hover{background:var(--copper-text-light);color:var(--paper)}}
@media(prefers-reduced-motion:reduce){.proj-vide__cta{transition:none}}
.proj-vide__lien{background:none;border:0;padding:0;min-height:44px;text-decoration:underline;text-decoration-color:rgba(184,115,51,.6);text-underline-offset:5px;cursor:pointer;font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dark)}