/* ==========================================================================
   D&L IMMOBILIER — maquette V2 — direction « Éditorial de luxe »
   Références : kononenkogroup.com (structure, animations) + kretzrealestate.com
   --------------------------------------------------------------------------
   UGO : TOUT SE REGLE ICI, dans le bloc :root. Change une valeur, tout suit.
   ========================================================================== */

:root{

  /* --- COULEURS ---------------------------------------------------------
     Plus de bleu azur. Encre presque noire, craie chaude, laiton discret. */
  --encre:        #0e0e0d;   /* texte et fonds sombres */
  --encre-2:      #1c1b19;   /* sections sombres, legerement plus clair */
  --craie:        #f4f2ee;   /* blanc casse chaud (le « papier ») */
  --blanc:        #ffffff;
  --gris:         #6b6862;   /* texte secondaire — 4,7:1 sur craie, lisible */
  --gris-clair:   #a8a49c;   /* sur fond sombre uniquement */
  --trait:        #dedbd4;   /* filets sur fond clair */
  --trait-sombre: #2e2c28;   /* filets sur fond sombre */
  --laiton:       #9a7f52;   /* accent metallique, a doser tres finement */

  /* --- TYPOGRAPHIES -----------------------------------------------------
     Display = Jost en graisse legere (le « moderne » de Kononenko).
     Serif   = Cormorant Garamond, uniquement pour les moments editoriaux. */
  --display: "Jost", "Futura", "Century Gothic", -apple-system, "Segoe UI", sans-serif;
  --serif:   "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --texte:   "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --geant:    clamp(2.9rem, 7.4vw, 7.4rem);   /* titre du heros */
  --display1: clamp(2.2rem, 5.2vw, 4.6rem);   /* titres de section */
  --display2: clamp(1.5rem, 2.6vw, 2.2rem);
  --corps:    1.0rem;
  --petit:    0.875rem;
  --mini:     0.6875rem;                      /* capitales espacees */

  --interlettre-titre: -.035em;   /* le display serre, comme Kononenko */
  --interlettre-caps:  .22em;     /* les capitales tres espacees, comme Kretz */

  /* --- RYTHME ----------------------------------------------------------- */
  --section:    clamp(92px, 13vw, 190px);
  --large:      1440px;   /* largeur du contenu large */
  --lecture:    1180px;   /* largeur du contenu de lecture */
  --gouttiere:  clamp(20px, 4vw, 56px);

  /* --- ANIMATIONS ------------------------------------------------------- */
  --duree:      .9s;      /* duree des revelations */
  --duree-court:.45s;
  --courbe:     cubic-bezier(.22,1,.36,1);   /* sortie douce, sans rebond */

  /* --- HEROS ------------------------------------------------------------ */
  --hauteur-heros: 100svh;
  --ombrage-heros: .34;   /* voile SOMBRE en bas du heros (lisibilite du titre) */
}

/* ==========================================================================
   SOCLE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--craie);
  color:var(--encre);
  font-family:var(--texte);
  font-size:var(--corps);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ margin:0; font-weight:300; line-height:1.03; letter-spacing:var(--interlettre-titre) }
p{ margin:0 0 1.1em }
ul{ margin:0; padding:0; list-style:none }
:focus-visible{ outline:1px solid var(--laiton); outline-offset:4px }
::selection{ background:var(--encre); color:var(--craie) }

.large{ max-width:var(--large); margin:0 auto; padding:0 var(--gouttiere) }
.lecture{ max-width:var(--lecture); margin:0 auto; padding:0 var(--gouttiere) }
.section{ padding:var(--section) 0; position:relative }
.sombre{ background:var(--encre); color:var(--craie) }
.sombre h1,.sombre h2,.sombre h3{ color:var(--craie) }

/* capitales espacees — la signature « luxe » */
.caps{
  font-family:var(--texte);
  font-size:var(--mini);
  letter-spacing:var(--interlettre-caps);
  text-transform:uppercase;
  font-weight:500;
  color:var(--gris);
  margin:0 0 26px;
}
.sombre .caps{ color:var(--gris-clair) }
.caps--laiton{ color:var(--laiton) }

.titre{ font-family:var(--display); font-size:var(--display1) }
.titre--serif{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em }
.chapo{ color:var(--gris); max-width:60ch; font-size:1.05rem; font-weight:300 }
.sombre .chapo{ color:var(--gris-clair) }

/* lien texte avec soulignement qui se trace — remplace les boutons */
.lien{
  display:inline-flex; align-items:center; gap:12px;
  font-size:var(--mini); letter-spacing:var(--interlettre-caps);
  text-transform:uppercase; font-weight:500;
  padding-bottom:7px; position:relative; color:inherit;
}
.lien::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:left;
  transition:transform var(--duree-court) var(--courbe);
}
.lien:hover::after{ transform:scaleX(0); transform-origin:right }
.lien svg{ width:15px; height:15px; transition:transform var(--duree-court) var(--courbe) }
.lien:hover svg{ transform:translateX(6px) }

/* ==========================================================================
   ANIMATIONS — revelation au defilement
   ========================================================================== */

/* 1. masque ligne par ligne (comme Kononenko) : le texte monte derriere un masque */
.masque{ display:block; overflow:hidden }
.masque > span{
  display:block;
  transform:translateY(105%);
  transition:transform var(--duree) var(--courbe);
}
.vu .masque > span{ transform:translateY(0) }
.masque:nth-child(2) > span{ transition-delay:.09s }
.masque:nth-child(3) > span{ transition-delay:.18s }
.masque:nth-child(4) > span{ transition-delay:.27s }

/* 2. apparition simple : fondu + montee */
.apparait{
  opacity:0; transform:translateY(28px);
  transition:opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.vu.apparait,.vu .apparait{ opacity:1; transform:none }
.apparait--d1{ transition-delay:.1s }
.apparait--d2{ transition-delay:.2s }
.apparait--d3{ transition-delay:.3s }

/* 3. filet qui se trace */
.filet{
  height:1px; background:var(--trait); transform:scaleX(0); transform-origin:left;
  transition:transform 1.3s var(--courbe);
}
.sombre .filet{ background:var(--trait-sombre) }
.vu .filet,.vu.filet{ transform:scaleX(1) }

/* ==========================================================================
   ECRAN D'OUVERTURE — le logo se construit
   --------------------------------------------------------------------------
   Trois temps : (1) la skyline monte du bas, comme un immeuble qui se batit ;
   (2) « D&L » apparait ; (3) « IMMOBILIER » est balaye de gauche a droite.
   Puis le rideau se retire vers le haut.
   Reglages : --ouv-* ci-dessous.
   ========================================================================== */
:root{
  --ouv-skyline:   .78s;   /* duree de la montee de la skyline */
  --ouv-dl:        .62s;
  --ouv-mot:       .58s;
  --ouv-sortie:    .92s;   /* duree du retrait du rideau */
  --ouv-logo:      clamp(148px, 20vw, 232px);   /* taille du logo a l'ouverture */
}

.ouverture{
  position:fixed; inset:0; z-index:400;
  background:var(--encre);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:38px;
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--ouv-sortie) var(--courbe);
  will-change:clip-path;
}
.ouverture__logo{
  position:relative;
  width:var(--ouv-logo);
  aspect-ratio:687.13 / 731.38;
  transition:transform var(--ouv-sortie) var(--courbe),
             opacity calc(var(--ouv-sortie) * .6) var(--courbe);
}
.ouverture__logo img{ position:absolute; inset:0; width:100%; height:100% }

/* 1. la skyline monte */
.ouverture__logo .part-skyline{
  clip-path:inset(100% 0 0 0);
  transition:clip-path var(--ouv-skyline) var(--courbe) .14s;
}
/* 2. « D&L » apparait */
.ouverture__logo .part-dl{
  opacity:0; transform:scale(.94);
  transition:opacity var(--ouv-dl) var(--courbe) .52s,
             transform var(--ouv-dl) var(--courbe) .52s;
}
/* 3. « IMMOBILIER » est balaye */
.ouverture__logo .part-mot{
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--ouv-mot) var(--courbe) .94s;
}

.ouverture.est-lancee .part-skyline{ clip-path:inset(0 0 0 0) }
.ouverture.est-lancee .part-dl{ opacity:1; transform:none }
.ouverture.est-lancee .part-mot{ clip-path:inset(0 0 0 0) }

/* le filet laiton qui se remplit pendant le chargement */
.ouverture__jauge{
  width:clamp(140px, 18vw, 214px); height:1px;
  background:rgba(255,255,255,.16); position:relative; overflow:hidden
}
.ouverture__jauge::after{
  content:""; position:absolute; inset:0; background:var(--laiton);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.75s cubic-bezier(.3,.7,.3,1) .2s;
}
.ouverture.est-lancee .ouverture__jauge::after{ transform:scaleX(1) }

/* le rideau se retire vers le haut */
.ouverture.est-sortie{ clip-path:inset(0 0 100% 0) }
.ouverture.est-sortie .ouverture__logo{ transform:translateY(-26px); opacity:0 }
.ouverture.est-partie{ display:none }

/* pendant l'ouverture, on bloque le defilement */
body.est-verrouille{ overflow:hidden }

/* animations reduites : un simple fondu tres court */
@media (prefers-reduced-motion:reduce){
  .ouverture{ transition:opacity .2s linear }
  .ouverture__logo .part-skyline,
  .ouverture__logo .part-dl,
  .ouverture__logo .part-mot{ clip-path:none; opacity:1; transform:none; transition:none }
  .ouverture.est-sortie{ opacity:0; clip-path:inset(0 0 0 0) }
}

/* ==========================================================================
   EN-TETE
   ========================================================================== */
.entete{
  position:fixed; top:31px; left:0; right:0; z-index:100;  /* 31px = hauteur du bandeau maquette */
  padding:26px 0;
  transition:transform .5s var(--courbe), background .4s, padding .4s;
  mix-blend-mode:normal;
}
.entete--cachee{ transform:translateY(-100%) }
.entete--posee{
  background:rgba(244,242,238,.94);
  backdrop-filter:blur(14px);
  padding:18px 0;
  border-bottom:1px solid var(--trait);
}
.entete__interieur{ display:flex; align-items:center; gap:34px }

/* --- la marque : le vrai logo vectoriel -------------------------------------
   Deux fichiers superposes (blanc / encre). Sur le heros c'est le blanc qui
   s'affiche ; des que l'en-tete se pose sur fond craie, on bascule sur l'encre.
   Reglage de la taille : --logo-entete. */
:root{ --logo-entete:66px }   /* en dessous de ~60px, « IMMOBILIER » devient illisible */

.marque{
  display:block; flex-shrink:0; position:relative;
  height:var(--logo-entete); aspect-ratio:687.13 / 731.38;
  transition:height .4s var(--courbe)
}
.marque img{
  position:absolute; inset:0; width:100%; height:100%;
  transition:opacity .4s var(--courbe)
}
.marque .logo-encre{ opacity:0 }
.entete--posee .marque .logo-encre{ opacity:1 }
.entete--posee .marque .logo-blanc{ opacity:0 }
.entete--posee .marque{ height:calc(var(--logo-entete) - 8px) }
/* pages interieures : fond craie des le depart, donc logo encre d'emblee */
.entete:not(.entete--sur-image) .marque .logo-encre{ opacity:1 }
.entete:not(.entete--sur-image) .marque .logo-blanc{ opacity:0 }

.menu{ margin-left:auto; display:flex; align-items:center; gap:30px }
.menu a{
  font-size:var(--mini); letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; position:relative; padding-bottom:4px
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--duree-court) var(--courbe);
}
.menu a:hover::after,.menu a[aria-current="page"]::after{ transform:scaleX(1) }
.menu__tel{ opacity:.72 }

/* en-tete claire posee sur le heros sombre */
.entete--sur-image{ color:var(--blanc) }
.entete--sur-image.entete--posee{ color:var(--encre) }

.declic{
  display:none; margin-left:auto; background:none; border:none; cursor:pointer;
  width:34px; height:22px; position:relative; padding:0; color:inherit
}
.declic span{
  position:absolute; left:0; right:0; height:1px; background:currentColor;
  transition:transform .35s var(--courbe), opacity .25s
}
.declic span:nth-child(1){ top:4px }
.declic span:nth-child(2){ bottom:4px }
.declic[aria-expanded="true"] span:nth-child(1){ top:11px; transform:rotate(45deg) }
.declic[aria-expanded="true"] span:nth-child(2){ bottom:10px; transform:rotate(-45deg) }

/* ==========================================================================
   HEROS
   ========================================================================== */
.heros{
  position:relative; height:var(--hauteur-heros);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:var(--encre); color:var(--blanc);
}
.heros__media{ position:absolute; inset:0; z-index:0 }
.heros__media video,.heros__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); animation:respire 26s ease-in-out infinite alternate;
}
@keyframes respire{ from{ transform:scale(1.06) } to{ transform:scale(1.16) } }
.heros__ombre{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,
      rgba(14,14,13,.46) 0%,
      rgba(14,14,13,.20) 30%,
      rgba(14,14,13,calc(var(--ombrage-heros) + .44)) 100%),
    rgba(14,14,13,.05);   /* voile uniforme leger : le degrade du bas suffit a
                             porter le titre, on garde la lumiere chaude du plan */
}
.heros__bas{ position:relative; z-index:2; padding-bottom:clamp(38px,5vw,64px) }
.heros h1{
  font-family:var(--display); font-size:var(--geant); font-weight:200;
  max-width:19ch; margin:0 0 28px;
}
.heros__meta{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:26px 54px;
  border-top:1px solid rgba(255,255,255,.24); padding-top:26px;
}
.heros__meta p{ margin:0; max-width:44ch; color:rgba(255,255,255,.82); font-weight:300 }
.heros__villes{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps); text-transform:uppercase;
  color:rgba(255,255,255,.66); margin-left:auto
}

/* barre de recherche : une seule ligne, angles droits, translucide */
.barre{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.22);
  background:rgba(14,14,13,.28);
  backdrop-filter:blur(10px);
}
.barre__interieur{ display:flex; align-items:stretch }
.barre__champ{ flex:1; display:flex; flex-direction:column; gap:4px; padding:18px 26px; min-width:0;
  border-right:1px solid rgba(255,255,255,.18) }
.barre__champ label{
  font-size:var(--mini); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.6); font-weight:500
}
.barre__champ select,.barre__champ input{
  font-family:inherit; font-size:var(--petit); font-weight:300;
  background:none; border:none; color:#fff; padding:0; width:100%;
  appearance:none; -webkit-appearance:none;
}
.barre__champ select option{ color:var(--encre) }
.barre__champ input::placeholder{ color:rgba(255,255,255,.5) }
.barre__envoi{
  background:var(--craie); color:var(--encre); border:none; cursor:pointer;
  font-family:inherit; font-size:var(--mini); letter-spacing:var(--interlettre-caps);
  text-transform:uppercase; font-weight:500; padding:0 46px;
  display:flex; align-items:center; gap:12px;
  transition:background var(--duree-court) var(--courbe);
}
.barre__envoi:hover{ background:var(--blanc) }

/* RETIRE le 30/07 a la demande d'Ugo : les filigranes du logo poses sur les
   visuels (skyline en bas a droite du heros + gravure geante sur la bande
   sombre) n'apportaient rien. Le logo reste dans l'en-tete et le pied de page.
   La parallaxe qui les animait a ete retiree de app.js en meme temps. */

/* le logo dans le pied de page */
.pied__logo{
  width:clamp(120px,14vw,178px); margin:0 0 clamp(42px,5vw,64px);
  opacity:0; transform:translateY(20px);
  transition:opacity 1s var(--courbe), transform 1s var(--courbe);
}
.vu .pied__logo{ opacity:.92; transform:none }

.defile{
  position:absolute; left:50%; bottom:118px; transform:translateX(-50%);
  z-index:2; font-size:var(--mini); letter-spacing:var(--interlettre-caps);
  text-transform:uppercase; color:rgba(255,255,255,.6);
  display:flex; flex-direction:column; align-items:center; gap:10px
}
.defile i{ display:block; width:1px; height:44px; background:rgba(255,255,255,.4); position:relative; overflow:hidden }
.defile i::after{
  content:""; position:absolute; inset:0; background:#fff;
  animation:glisse 2.4s var(--courbe) infinite
}
@keyframes glisse{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* ==========================================================================
   DECLARATION (grande phrase + deux colonnes)
   ========================================================================== */
.declaration h2{
  font-family:var(--display); font-size:var(--display1); font-weight:200;
  max-width:20ch; margin:0 0 clamp(40px,5vw,72px)
}
.declaration__colonnes{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,5vw,86px); max-width:920px; margin-left:auto
}
.declaration__colonnes p{ color:var(--gris); font-weight:300; margin:0 }

/* ==========================================================================
   LA SELECTION — liste numerotee editoriale (le geste anti-Airbnb)
   ========================================================================== */
.selection{ position:relative }
.selection__entete{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; margin-bottom:14px; flex-wrap:wrap
}
.selection__entete h2{ font-family:var(--display); font-size:var(--display1); font-weight:200 }

.liste{ border-top:1px solid var(--trait) }
.ligne{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 128px 150px 88px;
  align-items:center; gap:26px;
  padding:30px 4px; border-bottom:1px solid var(--trait);
  /* z-index:0 cree le contexte d'empilement : sans lui, le fond sombre du survol
     (::before en z-index:-1) passerait DERRIERE le fond de la page et serait invisible */
  position:relative; z-index:0; isolation:isolate;
  transition:padding var(--duree-court) var(--courbe), color var(--duree-court) var(--courbe);
}
.ligne::before{
  content:""; position:absolute; inset:0 -24px; background:var(--encre);
  transform:scaleY(0); transform-origin:bottom; z-index:-1;
  transition:transform var(--duree-court) var(--courbe);
}
.ligne:hover::before{ transform:scaleY(1) }
.ligne:hover{ padding-left:24px }
.ligne:hover,.ligne:hover .ligne__ville,.ligne:hover .ligne__detail{ color:var(--craie) }
.ligne:hover .ligne__numero{ color:var(--laiton) }

.ligne__numero{
  font-family:var(--display); font-size:var(--petit); font-weight:400;
  color:var(--gris); font-variant-numeric:tabular-nums;
  transition:color var(--duree-court) var(--courbe)
}
.ligne__nom{ min-width:0 }
.ligne__ville{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps); text-transform:uppercase;
  color:var(--gris); display:block; margin-bottom:7px;
  transition:color var(--duree-court) var(--courbe)
}
.ligne__titre{
  font-family:var(--display); font-size:var(--display2); font-weight:300;
  letter-spacing:-.02em; line-height:1.14
}
.ligne__detail{
  font-size:var(--petit); font-weight:300; color:var(--gris);
  font-variant-numeric:tabular-nums;
  transition:color var(--duree-court) var(--courbe)
}
.ligne__prix{
  font-family:var(--display); font-size:1.16rem; font-weight:400;
  font-variant-numeric:tabular-nums; white-space:nowrap
}
.ligne__voir{
  font-size:var(--mini); letter-spacing:.16em; text-transform:uppercase;
  text-align:right; opacity:0; transform:translateX(-8px);
  transition:opacity var(--duree-court) var(--courbe), transform var(--duree-court) var(--courbe)
}
.ligne:hover .ligne__voir{ opacity:1; transform:none }
.ligne__marque{
  font-size:var(--mini); letter-spacing:.14em; text-transform:uppercase;
  color:var(--laiton); margin-left:12px
}

/* apercu qui apparait au survol d'une ligne */
.apercu{
  position:fixed; top:50%; right:clamp(20px,5vw,86px); transform:translateY(-50%) scale(.96);
  width:clamp(240px,26vw,380px); aspect-ratio:4/5; z-index:60;
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--courbe), transform .55s var(--courbe);
}
.apercu.est-visible{ opacity:1; transform:translateY(-50%) scale(1) }
.apercu__cadre{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(150deg,#26251f,#3a3830 60%,#22211c);
  color:rgba(255,255,255,.62); text-align:center; padding:26px;
}
.apercu__cadre span{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps); text-transform:uppercase
}
@media (max-width:1180px){ .apercu{ display:none } }

/* ==========================================================================
   BANDE IMAGE PLEIN CADRE
   ========================================================================== */
.bande{
  position:relative; min-height:clamp(420px,68vh,760px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--encre); color:var(--blanc); text-align:center
}
.bande__media{ position:absolute; inset:0 }
.bande__media img{ width:100%; height:100%; object-fit:cover; opacity:.72 }
.bande__media--vide{
  position:absolute; inset:0;
  background:linear-gradient(140deg,#1d1c17,#39362d 52%,#1a1915)
}
.bande__contenu{ position:relative; z-index:2; padding:clamp(60px,9vw,120px) var(--gouttiere); max-width:1000px }
.bande h2{
  font-family:var(--serif); font-size:clamp(1.9rem,4.2vw,3.6rem); font-weight:300;
  letter-spacing:-.01em; line-height:1.14; color:var(--blanc)
}
.bande h2 em{ font-style:italic }

/* ==========================================================================
   METIERS — liste, pas de cartes
   ========================================================================== */
.metiers{ border-top:1px solid var(--trait) }
.metier{
  display:grid; grid-template-columns:70px minmax(0,340px) minmax(0,1fr) 100px;
  gap:26px; align-items:start;
  padding:38px 4px; border-bottom:1px solid var(--trait);
  position:relative; transition:padding var(--duree-court) var(--courbe)
}
.metier:hover{ padding-left:20px }
.metier__num{
  font-family:var(--display); font-size:var(--petit); color:var(--gris);
  font-variant-numeric:tabular-nums
}
.metier h3{ font-family:var(--display); font-size:var(--display2); font-weight:300 }
.metier p{ color:var(--gris); font-weight:300; font-size:var(--petit); margin:0; max-width:52ch }
.metier__fleche{ text-align:right; color:var(--gris); transition:transform var(--duree-court) var(--courbe) }
.metier:hover .metier__fleche{ transform:translateX(8px); color:var(--encre) }

/* ==========================================================================
   TERRITOIRES — reprend leur propre systeme : les monogrammes de villes
   (M / N / C / ST) des stories a la une de leur Instagram.
   ========================================================================== */
.territoires{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--trait-sombre)
}
.territoire{
  background:var(--encre); color:var(--craie);
  padding:clamp(34px,4vw,54px) clamp(18px,2vw,28px) clamp(28px,3vw,40px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px; position:relative; overflow:hidden;
  transition:background var(--duree-court) var(--courbe)
}
.territoire:hover{ background:#191814 }
.territoire__mono{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.2rem,5.4vw,5rem); line-height:.9;
  letter-spacing:.02em; color:var(--craie);
  transition:color var(--duree-court) var(--courbe), transform .6s var(--courbe)
}
.territoire:hover .territoire__mono{ color:var(--laiton); transform:translateY(-4px) }
.territoire__nom{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps); text-transform:uppercase;
  font-weight:500; color:var(--gris-clair)
}
.territoire__note{
  font-size:var(--mini); letter-spacing:.06em; color:#6f6b64; line-height:1.6;
  max-width:20ch
}
.territoire::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:1px;
  background:var(--laiton); transform:translateX(-50%);
  transition:width var(--duree-court) var(--courbe)
}
.territoire:hover::after{ width:46px }

@media (max-width:1024px){ .territoires{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:620px){  .territoires{ grid-template-columns:repeat(2,1fr) } }

/* ==========================================================================
   CHIFFRES
   ========================================================================== */
.chiffres{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--trait-sombre)
}
.chiffre{ background:var(--encre); padding:clamp(30px,4vw,54px) 26px }
.chiffre__val{
  font-family:var(--display); font-size:clamp(2rem,4vw,3.2rem); font-weight:200;
  letter-spacing:-.03em; color:var(--craie); font-variant-numeric:tabular-nums; line-height:1
}
.chiffre__lib{
  font-size:var(--mini); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-clair); margin-top:14px; font-weight:500
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); align-items:start }
.formulaire{ display:grid; gap:30px }
.champ-fin{ position:relative }
.champ-fin label{
  display:block; font-size:var(--mini); letter-spacing:var(--interlettre-caps);
  text-transform:uppercase; color:var(--gris); font-weight:500; margin-bottom:10px
}
.champ-fin input,.champ-fin select,.champ-fin textarea{
  font-family:inherit; font-size:var(--corps); font-weight:300; color:var(--encre);
  width:100%; background:none; border:none; border-bottom:1px solid var(--trait);
  padding:9px 0; appearance:none; -webkit-appearance:none; border-radius:0;
  transition:border-color var(--duree-court) var(--courbe)
}
.champ-fin textarea{ min-height:104px; resize:vertical }
.champ-fin input:focus,.champ-fin select:focus,.champ-fin textarea:focus{
  outline:none; border-bottom-color:var(--encre)
}
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:30px }
.rgpd{ font-size:var(--mini); color:var(--gris); line-height:1.6; letter-spacing:.02em }

.infos li{ padding:22px 0; border-bottom:1px solid var(--trait); display:grid;
  grid-template-columns:130px 1fr; gap:20px; align-items:baseline }
.infos li:first-child{ border-top:1px solid var(--trait) }
.infos dt,.infos strong{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps); text-transform:uppercase;
  color:var(--gris); font-weight:500
}
.infos span{ font-weight:300 }

/* ==========================================================================
   ENCARTS « A FOURNIR » (garde-fous de la maquette)
   ========================================================================== */
.manquant{
  border:1px solid var(--trait); border-left:2px solid var(--laiton);
  padding:26px 30px; margin:38px 0
}
.sombre .manquant{ border-color:var(--trait-sombre); border-left-color:var(--laiton) }
.manquant__titre{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps); text-transform:uppercase;
  color:var(--laiton); font-weight:500; margin-bottom:14px
}
.manquant li{ font-size:var(--petit); font-weight:300; padding-left:16px; position:relative; margin-bottom:7px }
.manquant li::before{ content:"—"; position:absolute; left:0; color:var(--laiton) }

.avertissement{
  background:var(--encre); color:var(--craie);
  font-size:var(--mini); letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:9px 20px;
  position:fixed; top:0; left:0; right:0; z-index:130
}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.pied{ background:var(--encre); color:var(--gris-clair); padding:var(--section) 0 40px }
.pied__geant{
  font-family:var(--display); font-size:clamp(2rem,6.4vw,5.6rem); font-weight:200;
  color:var(--craie); letter-spacing:var(--interlettre-titre); line-height:1.02;
  max-width:22ch; margin:0 0 clamp(60px,8vw,110px)
}
.pied__grille{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:44px }
.pied h4{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps); text-transform:uppercase;
  color:var(--craie); font-weight:500; margin:0 0 22px
}
.pied li{ margin-bottom:11px; font-size:var(--petit); font-weight:300 }
.pied a:hover{ color:var(--craie) }
.pied__legal{
  margin-top:clamp(50px,7vw,86px); padding-top:26px; border-top:1px solid var(--trait-sombre);
  display:flex; flex-wrap:wrap; gap:12px 34px;
  font-size:var(--mini); letter-spacing:.1em; color:#6f6b64
}

/* ==========================================================================
   PAGES INTERIEURES
   ========================================================================== */
.tete-page{ padding:calc(var(--section) + 60px) 0 var(--section) }
.tete-page h1{ font-family:var(--display); font-size:var(--display1); font-weight:200; max-width:22ch }
.ariane{ font-size:var(--mini); letter-spacing:.14em; text-transform:uppercase; color:var(--gris); margin-bottom:34px }

.tris{ display:flex; flex-wrap:wrap; gap:0; align-items:center; border-top:1px solid var(--trait);
  border-bottom:1px solid var(--trait); margin-bottom:8px }
.tri{
  font-family:inherit; font-size:var(--mini); letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; background:none; border:none; cursor:pointer; color:var(--gris);
  padding:20px 24px 20px 0; transition:color var(--duree-court) var(--courbe)
}
.tri:hover{ color:var(--encre) }
.tri[aria-pressed="true"]{ color:var(--encre) }
.tri[aria-pressed="true"]::after{ content:" ●"; font-size:.5em; vertical-align:middle; color:var(--laiton) }
.decompte{ margin-left:auto; font-size:var(--mini); letter-spacing:.14em; text-transform:uppercase; color:var(--gris) }
.ligne.est-masquee{ display:none }

/* fiche bien */
.fiche-tete{ padding:calc(var(--section) + 50px) 0 0 }
.fiche-visuel{
  margin-top:44px; height:clamp(320px,66vh,720px);
  background:linear-gradient(140deg,#1d1c17,#3a382f 55%,#1a1915);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color:rgba(255,255,255,.6); text-align:center; padding:34px
}
.fiche-visuel span{ font-size:var(--mini); letter-spacing:var(--interlettre-caps); text-transform:uppercase }
.fiche-vignettes{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px }
.fiche-vignettes div{
  aspect-ratio:3/2; background:linear-gradient(150deg,#e6e3dc,#f0eee8);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--mini); letter-spacing:.14em; text-transform:uppercase; color:var(--gris)
}
.fiche-corps{ display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(40px,7vw,100px); align-items:start }
.fiche-prix{
  font-family:var(--display); font-size:clamp(2rem,4.4vw,3.2rem); font-weight:200;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums
}
.fiche-corps h2{ font-family:var(--display); font-size:var(--display2); font-weight:300; margin:52px 0 18px }
.fiche-corps p{ color:var(--gris); font-weight:300 }
.caracteristiques{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--trait); margin:40px 0 }
.carac{ background:var(--craie); padding:26px 22px }
.carac__val{ font-family:var(--display); font-size:1.5rem; font-weight:300; letter-spacing:-.02em }
.carac__lib{ font-size:var(--mini); letter-spacing:.14em; text-transform:uppercase; color:var(--gris); margin-top:8px }
.encart-cote{ border:1px solid var(--trait); padding:34px; position:sticky; top:120px }
.encart-cote h3{ font-family:var(--display); font-size:var(--display2); font-weight:300; margin-bottom:10px }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .ligne{ grid-template-columns:44px minmax(0,1fr) 118px 130px; }
  .ligne__voir{ display:none }
  .metier{ grid-template-columns:56px minmax(0,1fr) 60px }
  .metier p{ grid-column:2; max-width:none }
  .fiche-corps{ grid-template-columns:1fr }
  .encart-cote{ position:static }
  .declaration__colonnes{ margin-left:0 }
}
@media (max-width:900px){
  .menu{
    position:fixed; inset:0; background:var(--encre); color:var(--craie);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:22px; padding:0 var(--gouttiere); margin:0;
    clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--courbe)
  }
  .menu.est-ouvert{ clip-path:inset(0 0 0 0) }
  .menu a{ font-size:1.32rem; letter-spacing:.04em; text-transform:none; font-weight:300 }
  .declic{ display:block; z-index:110; position:relative }
  .chiffres{ grid-template-columns:repeat(2,1fr) }
  .contact{ grid-template-columns:1fr }
  .pied__grille{ grid-template-columns:1fr 1fr; gap:36px }
  .caracteristiques{ grid-template-columns:repeat(2,1fr) }
  .barre__interieur{ flex-wrap:wrap }
  .barre__champ{ flex:1 1 50%; border-bottom:1px solid rgba(255,255,255,.18) }
  .barre__envoi{ flex:1 1 100%; padding:20px; justify-content:center }
  .defile{ display:none }
}
@media (max-width:620px){
  .ligne{ grid-template-columns:34px minmax(0,1fr); gap:14px; padding:24px 2px }
  .ligne__detail{ grid-column:2 }
  .ligne__prix{ grid-column:2; font-size:1.05rem }
  .declaration__colonnes{ grid-template-columns:1fr }
  .fiche-vignettes{ grid-template-columns:1fr 1fr }
  .pied__grille{ grid-template-columns:1fr }
  .metier{ grid-template-columns:34px minmax(0,1fr); gap:16px }
  .metier__fleche{ display:none }
  .infos li{ grid-template-columns:1fr; gap:6px }
}

/* mobile : pas de video (poids, batterie) */
@media (max-width:760px){
  .heros__media video{ display:none }
  .heros__media img{ display:block }
}
@media (min-width:761px){ .heros__media img{ display:none } }

/* ==========================================================================
   ANIMATIONS REDUITES — on respecte le reglage systeme
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .masque > span{ transform:none }
  .apparait{ opacity:1; transform:none }
  .filet{ transform:scaleX(1) }
  .heros__media video{ display:none }
  .heros__media img{ display:block }
}