/* ==========================================================================
   LA FARIGOULETTE — Système de design
   Couleurs relevées directement sur les photographies de la maison :
   le vert des volets, l'enduit ocre, la pierre calcaire du Haut-Var.
   ========================================================================== */

:root{
  /* --- Palette (échantillonnée sur la façade) --- */
  --volet:        #7FA98A;   /* vert des volets, couleur signature */
  --volet-fonce:  #4F7A5D;   /* même vert, assombri : textes et boutons (contraste AA) */
  --volet-clair:  #A9D3B2;   /* vert amande, lumière du matin */
  --sauge-fonce:  #33463A;   /* vert profond, textes sur clair */
  --charbon:      #191C17;   /* noir charbon légèrement vert */
  --creme:        #EFE7D6;   /* calcaire chaud */
  --ivoire:       #FAF5E9;
  --pierre:       #CBC1A7;   /* pierre relevée sur les linteaux */
  --terre:        #A95F3C;   /* terracotta */
  --or:           #B8A170;   /* filets dorés très discrets */

  --encre:        var(--sauge-fonce);
  --encre-douce:  #59665A;
  --sable:        #E3D9C3;

  /* --- Typographie --- */
  --display: "Marcellus", "Optima", "Palatino Linotype", Georgia, serif;
  --texte:   "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --citation: "EB Garamond", "Garamond", "Palatino Linotype", Georgia, serif;

  --t-xs:  clamp(.66rem, .62rem + .12vw, .74rem);
  --t-sm:  clamp(.82rem, .78rem + .14vw, .92rem);
  --t-md:  clamp(.98rem, .93rem + .22vw, 1.08rem);
  --t-lg:  clamp(1.15rem, 1.02rem + .5vw, 1.4rem);
  --t-xl:  clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  --t-2xl: clamp(2.1rem, 1.4rem + 3vw, 4rem);
  --t-3xl: clamp(2.8rem, 1.5rem + 5.4vw, 6.4rem);
  --t-4xl: clamp(3.2rem, 1.2rem + 8.4vw, 9rem);

  /* --- Rythme --- */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --max: 1320px;
  --lisible: 34rem;
  --sect: clamp(4.5rem, 9vw, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --lent: 1.1s var(--ease);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ivoire); color:var(--encre);
  font-family:var(--texte); font-weight:300; font-size:var(--t-md);
  line-height:1.7; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; margin:0; line-height:1.08; letter-spacing:.005em; }
p{ margin:0 0 1.15em; }
::selection{ background:var(--volet); color:var(--ivoire); }
:focus-visible{ outline:2px solid var(--volet); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-etroit{ width:100%; max-width:52rem; margin-inline:auto; padding-inline:var(--gutter); }
.lisible{ max-width:var(--lisible); }
.centre{ text-align:center; margin-inline:auto; }
.sr-only:focus{ position:fixed; top:1rem; left:1rem; width:auto; height:auto; clip:auto; margin:0;
  padding:.9rem 1.4rem; background:var(--charbon); color:var(--ivoire); z-index:99;
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ==========================================================================
   Éléments de titre
   ========================================================================== */
.eyebrow{
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.34em;
  color:var(--encre-douce); font-weight:400; margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{ content:""; width:2.2rem; height:1px; background:var(--volet); flex:none; }
.eyebrow.centre{ justify-content:center; }
.titre{ font-size:var(--t-2xl); }
.titre-xl{ font-size:var(--t-3xl); }
.chapeau{ font-size:var(--t-lg); line-height:1.6; color:var(--encre); font-weight:300; }
.legende{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.22em; color:var(--encre-douce); }

/* La ligne d'horizon : élément signature, rappel du panorama */
.horizon{
  display:flex; align-items:center; gap:1rem; width:100%;
  color:var(--encre-douce); font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.3em; margin:0;
}
.horizon::before,.horizon::after{ content:""; height:1px; background:linear-gradient(90deg,transparent,var(--pierre),transparent); flex:1; }
.horizon span{ flex:none; white-space:nowrap; }
.horizon-simple{ height:1px; background:linear-gradient(90deg,transparent,var(--pierre) 18%,var(--pierre) 82%,transparent); border:0; margin:0; }

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn{
  --bg:var(--volet-fonce); --fg:var(--ivoire); --bd:var(--volet-fonce);
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1.05em 2.3em; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.24em; font-weight:400;
  cursor:pointer; position:relative; overflow:hidden; border-radius:0;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.btn:hover{ --bg:var(--sauge-fonce); --bd:var(--sauge-fonce); transform:translateY(-1px); }
.btn-ghost{ --bg:transparent; --fg:var(--encre); --bd:var(--pierre); }
.btn-ghost:hover{ --bg:var(--sauge-fonce); --fg:var(--ivoire); --bd:var(--sauge-fonce); }
.btn-clair{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.55); }
.btn-clair:hover{ --bg:#fff; --fg:var(--charbon); --bd:#fff; }
.btn-plein-clair{ --bg:var(--ivoire); --fg:var(--charbon); --bd:var(--ivoire); }
.btn-plein-clair:hover{ --bg:var(--volet); --fg:#fff; --bd:var(--volet); }
.btn-large{ padding:1.2em 3em; }
.btns{ display:flex; flex-wrap:wrap; gap:.9rem; }

.lien-souligne{
  display:inline-block; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.24em;
  padding-bottom:.35rem; border-bottom:1px solid var(--pierre); transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lien-souligne:hover{ border-color:var(--volet-fonce); color:var(--volet-fonce); }

/* ==========================================================================
   Média
   ========================================================================== */
.media{ position:relative; overflow:hidden; background:var(--pierre); }
.media img{ width:100%; height:100%; object-fit:cover; }
.media-ratio-4-5{ aspect-ratio:4/5; }
.media-ratio-3-4{ aspect-ratio:3/4; }
.media-ratio-1-1{ aspect-ratio:1/1; }
.media-ratio-3-2{ aspect-ratio:3/2; }
.media-ratio-16-9{ aspect-ratio:16/9; }
.media-ratio-pano{ aspect-ratio:21/9; }
.media-zoom img{ transition:transform 6s var(--ease); }
.media-zoom:hover img{ transform:scale(1.045); }
.media::after{ /* grain de lumière très discret */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(28,32,27,.05),transparent 30%,transparent 70%,rgba(28,32,27,.12));
}
figure{ margin:0; }
figcaption{ margin-top:.9rem; font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--encre-douce); }

/* ==========================================================================
   En-tête
   ========================================================================== */
.entete{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.4rem var(--gutter);
  color:#fff; transition:background .6s var(--ease), color .6s var(--ease), padding .6s var(--ease), box-shadow .6s var(--ease);
}
.entete::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:1;
  background:linear-gradient(180deg,rgba(20,24,20,.55),transparent);
  transition:opacity .6s var(--ease);
}
.entete.est-fixe{
  background:rgba(251,248,241,.94); backdrop-filter:saturate(1.2) blur(12px);
  color:var(--encre); padding-block:.85rem; box-shadow:0 1px 0 rgba(28,32,27,.08);
}
.entete.est-fixe::before{ opacity:0; }
body.page-claire .entete{ color:var(--encre); }
body.page-claire .entete::before{ background:linear-gradient(180deg,rgba(251,248,241,.9),rgba(251,248,241,0)); }

.marque{ display:flex; flex-direction:column; line-height:1; gap:.32rem; }
.marque b{ font-family:var(--display); font-weight:400; font-size:clamp(1rem,.85rem+.5vw,1.3rem); letter-spacing:.16em; text-transform:uppercase; }
.marque small{ font-size:.55rem; letter-spacing:.32em; text-transform:uppercase; opacity:.75; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,2.1rem); }
.nav a{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.2em; position:relative; padding-block:.3rem; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:currentColor; transition:width .5s var(--ease); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ width:100%; }
.entete .btn{ padding:.85em 1.7em; }

.burger{ display:none; background:none; border:0; padding:.6rem; cursor:pointer; }
.burger span{ display:block; width:24px; height:1px; background:currentColor; margin:5px 0; transition:transform .4s var(--ease), opacity .3s; }
.est-ouvert .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.est-ouvert .burger span:nth-child(2){ opacity:0; }
.est-ouvert .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.menu-mobile{
  position:fixed; inset:0; z-index:55; background:var(--creme); color:var(--encre);
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  padding:6rem var(--gutter) 4rem;
  transform:translateY(-100%); transition:transform .7s var(--ease); visibility:hidden;
}
.est-ouvert .menu-mobile{ transform:translateY(0); visibility:visible; }
.menu-mobile a{ font-family:var(--display); font-size:clamp(1.7rem,7vw,2.4rem); padding:.35rem 0; border-bottom:1px solid rgba(203,193,167,.5); }
.menu-mobile .contact-rapide{ margin-top:2rem; font-size:var(--t-sm); letter-spacing:.1em; }

/* Barre d'action mobile */
.barre-mobile{
  position:fixed; left:0; right:0; bottom:0; z-index:58; display:none;
  grid-template-columns:1fr 1fr; background:var(--charbon); color:var(--ivoire);
  box-shadow:0 -8px 30px rgba(28,32,27,.18);
}
.barre-mobile a{
  padding:1.05rem .5rem; text-align:center; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.22em;
}
.barre-mobile a+a{ background:var(--volet); color:#fff; }

/* Rail vertical (desktop) : coordonnées du village */
.rail{
  position:fixed; right:.9rem; top:50%; transform:translateY(-50%) ; z-index:40;
  writing-mode:vertical-rl; font-size:.6rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--encre-douce); opacity:.6; pointer-events:none;
  display:flex; align-items:center; gap:1.2rem;
}
.rail::after{ content:""; height:5rem; width:1px; background:var(--pierre); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:respire 26s var(--ease) forwards; }
@keyframes respire{ from{ transform:scale(1.12); } to{ transform:scale(1.0); } }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,24,20,.42) 0%,rgba(20,24,20,.05) 32%,rgba(20,24,20,.30) 62%,rgba(20,24,20,.80) 100%);
}
.hero-contenu{ position:relative; z-index:2; width:100%; padding-block:clamp(3rem,9vh,7rem) clamp(4.5rem,11vh,7.5rem); }
.hero .eyebrow{ color:rgba(255,255,255,.85); }
.hero .eyebrow::before{ background:rgba(255,255,255,.75); }
.hero h1{
  font-size:var(--t-4xl); letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 .35em; text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero-accroche{
  font-family:var(--display); font-size:var(--t-xl); line-height:1.35;
  max-width:24ch; margin:0 0 2.2rem; color:rgba(255,255,255,.94);
}
.hero-pied{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:1.5rem; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:var(--t-xs); letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hero-pied .horizon{ color:rgba(255,255,255,.72); }
.hero-pied .horizon::before,.hero-pied .horizon::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); }
.defile{ display:inline-flex; align-items:center; gap:.6rem; }
.defile i{ display:block; width:1px; height:2.4rem; background:rgba(255,255,255,.5); position:relative; overflow:hidden; }
.defile i::after{ content:""; position:absolute; inset:0; background:#fff; animation:goutte 2.8s var(--ease) infinite; }
@keyframes goutte{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); } }

/* Bandeau de page (pages intérieures) */
.bandeau{ position:relative; min-height:clamp(46svh,52vh,64svh); display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.bandeau .hero-media::after{ background:linear-gradient(180deg,rgba(20,24,20,.5),rgba(20,24,20,.15) 45%,rgba(20,24,20,.72)); }
.bandeau-contenu{ position:relative; z-index:2; width:100%; padding-block:0 clamp(3rem,7vh,5rem); }
.bandeau h1{ font-size:var(--t-3xl); text-transform:uppercase; letter-spacing:.05em; }
.bandeau .eyebrow{ color:rgba(255,255,255,.85); }
.bandeau .eyebrow::before{ background:rgba(255,255,255,.7); }
.bandeau p{ max-width:38ch; color:rgba(255,255,255,.9); font-size:var(--t-lg); font-family:var(--display); margin-top:.6rem; }

/* ==========================================================================
   Sections
   ========================================================================== */
.sect{ padding-block:var(--sect); position:relative; }
.sect-creme{ background:var(--creme); }
.sect-pierre{ background:linear-gradient(180deg,var(--creme),var(--ivoire)); }
.sect-sombre{ background:var(--charbon); color:rgba(251,248,241,.86); }
.sect-sombre h2,.sect-sombre h3{ color:var(--ivoire); }
.sect-sombre .eyebrow{ color:rgba(251,248,241,.6); }
.sect-sombre .eyebrow::before{ background:var(--volet); }
.sect-sombre .trio .num,.sect-sombre .manifeste .signature{ color:var(--volet-clair); }
.sect-serre{ padding-block:clamp(3rem,6vw,5rem); }

/* Manifeste : texte centré, très aéré */
.manifeste{ max-width:44rem; margin-inline:auto; text-align:center; }
.manifeste h2{ font-size:var(--t-2xl); margin-bottom:1.2rem; }
.manifeste p{ font-size:var(--t-lg); line-height:1.75; color:var(--encre-douce); }
.manifeste .signature{ font-family:var(--display); font-size:var(--t-md); letter-spacing:.24em; text-transform:uppercase; color:var(--volet-fonce); }

/* Composition éditoriale */
.duo{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.duo-media{ grid-column:1 / span 7; }
.duo-texte{ grid-column:8 / span 5; }
.duo-inverse .duo-media{ grid-column:6 / span 7; grid-row:1; }
.duo-inverse .duo-texte{ grid-column:1 / span 5; grid-row:1; }
.duo-texte h2{ font-size:var(--t-2xl); margin-bottom:1.2rem; }
.duo-bleed{ margin-left:calc(-1 * var(--gutter)); }
.duo-inverse .duo-bleed{ margin-left:0; margin-right:calc(-1 * var(--gutter)); }

/* Colonnes utilitaires (grille de 12) */
/* Les colonnes suivent l'ordre du HTML : le premier bloc se place à gauche.
   Spécificité volontairement supérieure à .duo-media / .duo-texte. */
.duo > .col-5{ grid-column:span 5; }
.duo > .col-6{ grid-column:span 6; }
.duo > .col-7{ grid-column:span 7; }
.duo > .col-8{ grid-column:span 8; }

/* Trois colonnes */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3.5vw,3.5rem); }
.trio h3{ font-size:var(--t-lg); margin-bottom:.6rem; }
.trio p{ color:var(--encre-douce); font-size:var(--t-sm); }
.trio .num{ font-family:var(--display); color:var(--volet-fonce); font-size:var(--t-md); letter-spacing:.2em; display:block; margin-bottom:1rem; }

/* Grille galerie */
.galerie{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.6rem,1.4vw,1.2rem); }
.galerie figure{ position:relative; }
.g-1{ grid-column:span 4; } .g-2{ grid-column:span 2; }
.g-3{ grid-column:span 2; } .g-4{ grid-column:span 2; } .g-5{ grid-column:span 2; }
.g-6{ grid-column:span 3; } .g-7{ grid-column:span 3; }
.galerie .media{ cursor:zoom-in; }

/* Cartes plats */
.plats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2.4rem); }
.plat{ background:var(--ivoire); border:1px solid rgba(203,193,167,.55); }
.plat .media{ background:var(--pierre); }
.plat-corps{ padding:1.6rem 1.5rem 1.9rem; }
.plat h3{ font-size:var(--t-lg); margin-bottom:.45rem; }
.plat p{ font-size:var(--t-sm); color:var(--encre-douce); margin-bottom:0; }

/* Placeholders à compléter */
.tbc{
  display:inline-block; font-family:var(--texte); font-size:.68rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.16em; color:#7B6A3E;
  background:rgba(184,161,112,.13); border:1px dashed rgba(184,161,112,.75);
  padding:.28em .7em; border-radius:2px; line-height:1.5; white-space:normal;
}
.bloc-tbc{ display:block; padding:1.1rem 1.2rem; }
.sect-sombre .tbc{ color:#DCC894; background:rgba(184,161,112,.16); border-color:rgba(184,161,112,.6); }

/* Carte / menu */
.menu-cat{ margin-bottom:clamp(3rem,6vw,5rem); }
.menu-cat h2{ font-size:var(--t-xl); text-transform:uppercase; letter-spacing:.22em; margin-bottom:.4rem; }
.menu-cat .horizon{ margin-bottom:2.4rem; }
.plat-ligne{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.6rem; padding:1.15rem 0; border-bottom:1px solid rgba(203,193,167,.45); }
.plat-ligne:last-child{ border-bottom:0; }
.plat-ligne h3{ font-family:var(--display); font-size:var(--t-lg); }
.plat-ligne .desc{ grid-column:1 / -1; font-size:var(--t-sm); color:var(--encre-douce); margin:.35rem 0 0; max-width:52ch; }
.plat-ligne .prix{ font-family:var(--display); font-size:var(--t-lg); color:var(--volet-fonce); white-space:nowrap; }
.mention{ font-size:var(--t-sm); color:var(--encre-douce); }

/* Formules */
.formules{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.5rem; }
.formule{ border:1px solid rgba(203,193,167,.6); padding:2rem 1.7rem; background:var(--ivoire); text-align:center; }
.formule h3{ font-size:var(--t-lg); margin-bottom:.5rem; }
.formule .prix{ font-family:var(--display); font-size:var(--t-xl); color:var(--volet-fonce); display:block; margin:.8rem 0; }

/* Vins */
.vins-intro{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.5rem; }
.vin-ligne{ display:grid; grid-template-columns:1fr auto auto; gap:1.2rem; align-items:baseline; padding:.95rem 0; border-bottom:1px solid rgba(203,193,167,.45); }
.vin-ligne .app{ font-family:var(--display); font-size:var(--t-md); }
.vin-ligne .dom{ display:block; font-size:var(--t-sm); color:var(--encre-douce); }
.vin-ligne .verre,.vin-ligne .bouteille{ font-family:var(--display); font-size:var(--t-md); color:var(--volet-fonce); min-width:4.5rem; text-align:right; }
.vins-entete{ display:grid; grid-template-columns:1fr auto auto; gap:1.2rem; padding-bottom:.7rem; border-bottom:1px solid var(--pierre); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.2em; color:var(--encre-douce); }
.vins-entete span:not(:first-child){ min-width:4.5rem; text-align:right; }

/* Avis */
.avis{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2.2rem); }
.avis-carte{ border:1px solid rgba(203,193,167,.6); padding:2rem 1.8rem; background:var(--ivoire); }
.avis-carte .etoiles{ color:#8F7838; letter-spacing:.3em; font-size:var(--t-sm); margin-bottom:1rem; display:block; }
.avis-carte blockquote{ margin:0 0 1.2rem; font-family:var(--display); font-size:var(--t-lg); line-height:1.5; }
.avis-carte cite{ font-style:normal; font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--encre-douce); }

/* Formulaire */
.form{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1.6rem; }
.champ{ display:flex; flex-direction:column; gap:.55rem; }
.champ-large{ grid-column:1 / -1; }
.champ label{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.2em; color:var(--encre-douce); }
.champ input,.champ select,.champ textarea{
  font-family:var(--texte); font-size:var(--t-md); font-weight:300; color:var(--encre);
  background:transparent; border:0; border-bottom:1px solid var(--pierre); padding:.65rem 0;
  border-radius:0; transition:border-color .4s var(--ease);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{ outline:none; border-bottom-color:var(--volet); }
.champ textarea{ resize:vertical; min-height:5.5rem; }
.form-note{ grid-column:1 / -1; font-size:var(--t-sm); color:var(--encre-douce); }
.form-retour{ grid-column:1 / -1; border:1px solid var(--volet); background:rgba(127,169,138,.1); padding:1.3rem 1.4rem; font-size:var(--t-sm); display:none; }
.form-retour.est-visible{ display:block; }

/* Blocs contact */
.infos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:2.4rem 2rem; }
.infos h3{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.24em; color:var(--encre-douce); font-family:var(--texte); margin-bottom:.7rem; }
.infos p{ font-family:var(--display); font-size:var(--t-lg); line-height:1.45; margin:0; }
.infos a{ border-bottom:1px solid var(--pierre); }

.carte-lieu{ position:relative; aspect-ratio:16/9; background:var(--pierre); overflow:hidden; }
.carte-lieu iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.carte-voile{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:var(--creme); text-align:center; padding:2rem; z-index:2;
}
.carte-voile p{ max-width:30rem; font-size:var(--t-sm); color:var(--encre-douce); margin:0; }

/* Texte légal */
.legal{ max-width:48rem; }
.legal h2{ font-size:var(--t-xl); margin:2.8rem 0 1rem; }
.legal h3{ font-size:var(--t-lg); margin:1.8rem 0 .6rem; }
.legal ul{ padding-left:1.1rem; margin:0 0 1.2rem; }
.legal li{ margin-bottom:.5rem; color:var(--encre-douce); }
.legal p{ color:var(--encre-douce); }

/* CTA final */
.cta-final{ position:relative; overflow:hidden; color:#fff; text-align:center; }
.cta-final .hero-media{ top:-7%; bottom:-7%; height:114%; }
.cta-final .hero-media::after{ background:linear-gradient(180deg,rgba(20,24,20,.62),rgba(20,24,20,.72)); }
.cta-final .wrap{ position:relative; z-index:2; padding-block:clamp(5rem,11vw,9rem); }
.cta-final h2{ font-size:var(--t-3xl); text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
.cta-final p{ font-family:var(--display); font-size:var(--t-lg); max-width:34ch; margin-inline:auto; color:rgba(255,255,255,.9); }
.cta-final .btns{ justify-content:center; margin-top:2.4rem; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied{ background:var(--charbon); color:rgba(251,248,241,.72); padding-block:clamp(3.5rem,7vw,5.5rem) 2rem; }
.pied-haut{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(251,248,241,.14); }
.pied .marque b{ color:var(--ivoire); font-size:1.25rem; }
.pied .marque small{ color:rgba(251,248,241,.55); }
.pied h4{ font-family:var(--texte); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.24em; color:rgba(251,248,241,.5); margin-bottom:1.1rem; }
.pied ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.pied a:hover{ color:var(--volet-clair); }
.pied-bas{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; padding-top:1.8rem; font-size:var(--t-xs); letter-spacing:.14em; color:rgba(251,248,241,.45); }
.pied-devise{ font-family:var(--display); color:var(--volet-clair); letter-spacing:.2em; text-transform:uppercase; font-size:var(--t-xs); margin-top:1.4rem; display:block; }

/* ==========================================================================
   Animations d'apparition
   ========================================================================== */
/* Principe : rien n'est caché par défaut. L'état masqué n'est appliqué que si
   la classe .anim est présente sur <html> — c'est-à-dire uniquement quand le
   JavaScript d'animation a réellement démarré. Si le script ne se charge pas,
   le site s'affiche normalement, sans animation. */
.reveal{ opacity:1; transform:none; transition:opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.anim .reveal:not(.est-visible){ opacity:0; transform:translateY(22px); }
.reveal.est-visible{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.12s; } .reveal-d2{ transition-delay:.24s; } .reveal-d3{ transition-delay:.36s; }
.parallaxe{ will-change:transform; }

/* Visionneuse */
.visionneuse{
  position:fixed; inset:0; z-index:90; background:rgba(18,21,18,.94);
  display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.visionneuse.est-ouverte{ opacity:1; visibility:visible; }
.visionneuse img{ max-width:100%; max-height:84vh; object-fit:contain; }
.visionneuse button{ position:absolute; background:none; border:0; color:#fff; cursor:pointer; padding:1rem; font-size:1.5rem; line-height:1; }
.v-fermer{ top:1rem; right:1rem; }
.v-prec{ left:.5rem; top:50%; transform:translateY(-50%); }
.v-suiv{ right:.5rem; top:50%; transform:translateY(-50%); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px){
  .duo{ grid-template-columns:1fr; }
  .duo-media,.duo-texte,.duo-inverse .duo-media,.duo-inverse .duo-texte{ grid-column:1 / -1; grid-row:auto; }
  .duo-inverse .duo-media{ order:-1; }
  .duo > .col-5,.duo > .col-6,.duo > .col-7,.duo > .col-8{ grid-column:1 / -1; }
  .duo-bleed{ margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); }
  .duo-inverse .duo-bleed{ margin-left:calc(-1 * var(--gutter)); }
  .trio{ grid-template-columns:1fr; gap:2.2rem; }
  .plats{ grid-template-columns:1fr; }
  .avis{ grid-template-columns:1fr; }
  .rail{ display:none; }
}
@media (max-width:860px){
  .nav{ display:none; }
  .burger{ display:block; }
  .entete .btn{ display:none; }
  .barre-mobile{ display:grid; }
  body{ padding-bottom:3.4rem; }
  .hero-pied{ bottom:4.4rem; }
  .hero-pied .horizon{ display:none; }
  .galerie{ grid-template-columns:repeat(2,1fr); }
  .g-1,.g-2,.g-3,.g-4,.g-5,.g-6,.g-7{ grid-column:span 1; }
  .g-1{ grid-column:span 2; }
  .form{ grid-template-columns:1fr; }
  .pied-haut{ grid-template-columns:1fr; gap:2.2rem; }
  .vin-ligne{ grid-template-columns:1fr auto; }
  .vin-ligne .verre{ display:none; }
  .vins-entete{ grid-template-columns:1fr auto; }
  .vins-entete span:nth-child(2){ display:none; }
}
@media (max-width:560px){
  .hero h1{ letter-spacing:.03em; }
  .hero-accroche{ font-size:var(--t-lg); }
  .btns .btn{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-media img{ transform:none; }
}

@media print{
  .entete,.barre-mobile,.rail,.menu-mobile,.visionneuse,.cta-final{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ==========================================================================
   V2 — Corrections après revue critique
   Objectif : plus de contraste, plus de désir, moins de « template ».
   ========================================================================== */

/* Texture d'enduit : très légère, elle enlève l'aspect « écran plat » */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.entete,.menu-mobile,.barre-mobile,.visionneuse,.barre-fixe{ z-index:60; }

/* --- Hero : composition d'affiche, entrée en scène ------------------------- */
.hero{ min-height:100svh; }
.hero-media::after{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(20,24,20,.42),transparent 55%),
    linear-gradient(180deg,rgba(20,24,20,.30) 0%,rgba(20,24,20,0) 30%,rgba(20,24,20,.30) 58%,rgba(16,20,16,.88) 100%);
}
.hero h1{
  font-size:var(--t-4xl); letter-spacing:.09em; line-height:.92;
  text-shadow:0 4px 60px rgba(0,0,0,.45);
}
.hero-accroche{
  font-family:var(--citation); font-style:italic; font-weight:400;
  font-size:clamp(1.35rem,.9rem+1.8vw,2.35rem); line-height:1.3; max-width:20ch;
  color:#fff; margin-top:.2em;
}
.hero-contenu{ padding-bottom:clamp(5.5rem,13vh,9rem); }
.hero .btns{ margin-top:2.6rem; }

/* Entrée : lignes de titre qui montent sous un masque */
.leve{ display:block; overflow:hidden; }
.leve > *{ display:block; }
.anim .leve > *{ transform:translateY(132%); animation:leve 1.5s var(--ease) forwards; }
.leve-1 > *{ animation-delay:.15s } .leve-2 > *{ animation-delay:.35s }
.leve-3 > *{ animation-delay:.55s } .leve-4 > *{ animation-delay:.8s }
@keyframes leve{ to{ transform:translateY(0); } }
.trait-horizon{ height:1px; background:rgba(255,255,255,.5); transform-origin:left; margin-bottom:1.6rem; max-width:9rem; }
.anim .trait-horizon{ transform:scaleX(0); animation:trace 1.8s var(--ease) .5s forwards; }
@keyframes trace{ to{ transform:scaleX(1); } }

/* --- Barre de réservation persistante (desktop) ---------------------------- */
.barre-fixe{
  position:fixed; left:0; right:0; bottom:0; z-index:59;
  display:flex; align-items:center; justify-content:center; gap:clamp(1rem,3vw,2.6rem);
  padding:.85rem var(--gutter); background:rgba(25,28,23,.93); backdrop-filter:blur(10px);
  color:var(--ivoire); transform:translateY(110%); transition:transform .7s var(--ease);
  font-size:var(--t-xs); letter-spacing:.22em; text-transform:uppercase;
}
.barre-fixe.est-visible{ transform:none; }
.barre-fixe strong{ font-family:var(--display); font-weight:400; letter-spacing:.18em; }
.barre-fixe .btn{ padding:.7em 1.8em; }
.barre-fixe span.sep{ opacity:.4; }
@media (max-width:860px){ .barre-fixe{ display:none; } }

/* --- Révélation des images : rideau ---------------------------------------- */
.reveal-media{ clip-path:none; transition:clip-path 1.4s var(--ease); }
.anim .reveal-media:not(.est-visible){ clip-path:inset(0 0 100% 0); }
.reveal-media.est-visible{ clip-path:inset(0 0 0 0); }
.reveal-media img{ transform:none; transition:transform 2.2s var(--ease); }
.anim .reveal-media:not(.est-visible) img{ transform:scale(1.08); }
.reveal-media.est-visible img{ transform:scale(1); }

/* --- Citation éditoriale ---------------------------------------------------- */
.citation{
  font-family:var(--citation); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,1rem+2.4vw,3.1rem); line-height:1.28; letter-spacing:-.005em;
  max-width:20ch; margin:0;
}
.citation-large{ max-width:26ch; }
.citation em{ font-style:normal; }
.mot{
  font-family:var(--citation); font-style:italic; font-size:var(--t-lg); line-height:1.75;
  max-width:36rem;
}
.mot .paraphe{ font-style:normal; font-family:var(--display); letter-spacing:.24em;
  text-transform:uppercase; font-size:var(--t-xs); color:var(--encre-douce); display:block; margin-top:1.6rem; }

/* --- Section immersive plein écran ------------------------------------------ */
.immersif{ position:relative; min-height:92svh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.immersif .hero-media{ top:-6%; bottom:-6%; height:112%; }
.immersif .hero-media::after{ background:linear-gradient(90deg,rgba(16,20,16,.82) 0%,rgba(16,20,16,.34) 52%,rgba(16,20,16,.55) 100%); }
.immersif .wrap{ position:relative; z-index:2; padding-block:clamp(4rem,10vw,7rem); }
.immersif .citation{ color:#fff; }
.immersif .eyebrow{ color:rgba(255,255,255,.8); }
.immersif .eyebrow::before{ background:rgba(255,255,255,.65); }
.immersif p:not(.eyebrow):not(.citation){ color:rgba(255,255,255,.86); max-width:34ch; }

/* --- Triptyque des heures --------------------------------------------------- */
.triptyque{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.5rem,1.4vw,1.4rem); }
.triptyque figure{ margin:0; }
.triptyque .media{ aspect-ratio:3/4; }
.triptyque figcaption{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.triptyque figcaption b{ font-family:var(--display); font-weight:400; letter-spacing:.14em; color:var(--encre); }
@media (max-width:760px){
  .triptyque{ grid-template-columns:1fr; gap:1.6rem; }
  .triptyque .media{ aspect-ratio:16/10; }
}

/* --- Cartes : suppression des contours (effet « template ») ------------------ */
.plat,.avis-carte,.formule{ background:transparent; border:0; padding:0; }
.plat-corps{ padding:1.3rem 0 0; }
.avis-carte{ border-top:1px solid var(--sable); padding-top:1.6rem; }
.formule{ border-top:1px solid var(--sable); padding:1.6rem 0 0; text-align:left; }
.formule .prix{ margin:.4rem 0 .6rem; }

/* --- Placeholders : discrets, ils ne doivent plus voler la vedette ----------- */
.tbc{
  background:transparent; border:0; border-bottom:1px dotted rgba(120,105,66,.55);
  color:#8A7A50; padding:0 0 .1em; font-size:.72em; letter-spacing:.06em;
  text-transform:none; font-style:italic;
}
.bloc-tbc{ display:inline-block; padding:0; }
.sect-sombre .tbc{ background:transparent; border-bottom-color:rgba(220,200,148,.5); color:#C9B98D; }

/* --- Chiffres / repères ------------------------------------------------------ */
.reperes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); }
.repere b{ display:block; font-family:var(--display); font-size:clamp(2.2rem,1.4rem+3vw,3.6rem); line-height:1; color:var(--encre); }
.repere span{ display:block; margin-top:.7rem; font-size:var(--t-xs); letter-spacing:.24em; text-transform:uppercase; color:var(--encre-douce); }
@media (max-width:760px){ .reperes{ grid-template-columns:1fr; gap:1.8rem; text-align:left; } }

/* --- FAQ ---------------------------------------------------------------------- */
.faq{ max-width:46rem; }
.faq details{ border-bottom:1px solid var(--sable); padding:1.3rem 0; }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:2rem;
  font-family:var(--display); font-size:var(--t-lg); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--texte); font-weight:300; color:var(--volet-fonce); transition:transform .4s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:.9rem 0 0; color:var(--encre-douce); max-width:52ch; font-size:var(--t-sm); }

/* --- En-tête : téléphone visible -------------------------------------------- */
.entete-tel{ font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }
@media (max-width:1200px){ .entete-tel{ display:none; } }

/* --- Logotype : un soleil posé sur la ligne d'horizon -------------------------- */
.marque{ flex-direction:row; align-items:center; gap:.75rem; }
.marque-mark{ flex:none; display:block; }
.marque-mark svg{ width:2.1rem; height:2.1rem; display:block; }
.marque-mots{ display:flex; flex-direction:column; gap:.3rem; line-height:1; }
.pied .marque-mark svg{ width:2.6rem; height:2.6rem; }
.hero-media + .hero-contenu .marque-mark{ color:#fff; }

/* --- Détails premium ---------------------------------------------------------- */
.sect-creme{ background:var(--creme); }
.sect-sable{ background:linear-gradient(180deg,var(--ivoire),var(--creme)); }
.duo-texte h2,.manifeste h2{ letter-spacing:-.01em; }
.eyebrow{ letter-spacing:.38em; }
figcaption{ letter-spacing:.24em; }
.legende{ letter-spacing:.26em; }

/* Mobile : respiration et lisibilité */
@media (max-width:560px){
  :root{ --sect:clamp(3.6rem,12vw,5rem); }
  .hero h1{ font-size:clamp(2.9rem,13vw,4.4rem); letter-spacing:.04em; }
  .hero-accroche{ font-size:1.35rem; max-width:16ch; }
  .hero-contenu{ padding-bottom:6.5rem; }
  .citation{ font-size:1.6rem; max-width:100%; }
  .barre-mobile a{ padding:1.15rem .5rem; }
  .galerie{ gap:.5rem; }
}
@supports (padding:max(0px)){
  .barre-mobile a{ padding-bottom:max(1.05rem,env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce){
  .leve > *{ transform:none; animation:none; }
  .trait-horizon{ transform:none; animation:none; }
  .reveal-media{ clip-path:none; }
  .reveal-media img{ transform:none; }
  .barre-fixe{ transition:none; }
}

/* ==========================================================================
   V3 — La carte : lisible, aérée, épurée
   ========================================================================== */
.menu-cat{ margin-bottom:clamp(3.5rem,7vw,6rem); }
.menu-cat h2{
  font-family:var(--texte); font-weight:300;
  font-size:var(--t-sm); text-transform:uppercase; letter-spacing:.42em;
  color:var(--encre-douce); margin-bottom:1.4rem;
}
.menu-cat .horizon{ margin-bottom:2.8rem; }
.plat-ligne{
  grid-template-columns:1fr auto; gap:.4rem 1.6rem;
  padding:1.5rem 0; border-bottom:1px solid rgba(203,193,167,.35);
}
.plat-ligne h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.12rem,1rem+.35vw,1.32rem); letter-spacing:.012em; line-height:1.3;
}
.plat-ligne .prix{
  font-family:var(--texte); font-weight:300; color:var(--encre);
  font-size:clamp(1rem,.95rem+.2vw,1.15rem); letter-spacing:.06em;
}
.plat-ligne .desc{
  font-size:var(--t-sm); line-height:1.65; color:var(--encre-douce);
  margin-top:.45rem; max-width:46ch;
}
.formule{ border-top:1px solid var(--sable); padding-top:1.8rem; }
.formule h3{ font-family:var(--display); font-size:var(--t-lg); }
.formule .prix{ font-family:var(--texte); font-weight:300; color:var(--encre);
  font-size:var(--t-lg); letter-spacing:.06em; }
.vin-ligne{ padding:1.15rem 0; border-bottom:1px solid rgba(203,193,167,.35); }
.vin-ligne .app{ font-family:var(--display); font-size:clamp(1.05rem,1rem+.3vw,1.2rem); }
.vin-ligne .dom{ margin-top:.25rem; }
.vin-ligne .verre,.vin-ligne .bouteille{
  font-family:var(--texte); font-weight:300; color:var(--encre); letter-spacing:.06em;
}
.vins-entete{ letter-spacing:.28em; border-bottom-color:var(--sable); }


/* ==========================================================================
   V4 — Le nom de la maison
   Marcellus pour le nom : sobre, lisible, sans effet d'écriture.
   ========================================================================== */
/* Le nom de la maison : Marcellus, capitales romaines dessinées d'après la pierre.
   Sobre, lisible, sans effet calligraphique. */
.nom-maison{
  font-family:var(--display); font-weight:400; text-transform:none;
  letter-spacing:.035em; line-height:1.05;
}
.hero h1.nom-maison{
  font-size:min(9vw, 6.8rem); text-transform:none; letter-spacing:.035em;
  text-shadow:0 3px 44px rgba(0,0,0,.45);
  margin-bottom:.14em;
}
.bandeau h1.nom-maison{ font-size:min(9vw, 5rem); letter-spacing:.035em; text-transform:none; }
.menu-titre{ font-family:var(--display); font-size:clamp(2.2rem,1.5rem+2.6vw,3.6rem);
  line-height:1.05; text-transform:none; letter-spacing:.05em; }

/* Le masque d'apparition ne doit jamais rogner une lettre */
.leve{ padding:.06em .04em .18em; margin:-.06em -.04em -.18em; }
.leve > *{ padding-right:.04em; }

/* Filet décoratif sous les titres de la carte */
.carte-filet{ display:flex; align-items:center; justify-content:center; gap:.9rem;
  color:var(--volet-fonce); font-size:.7rem; margin:.6rem 0 2.6rem; }
.carte-filet::before,.carte-filet::after{ content:""; height:1px; width:clamp(2rem,8vw,5rem);
  background:linear-gradient(90deg,transparent,var(--pierre),transparent); }
.menu-note{ font-size:var(--t-xs); letter-spacing:.24em; text-transform:uppercase;
  color:var(--encre-douce); text-align:center; }
.menu-devise{ font-family:var(--citation); font-style:italic; font-size:var(--t-lg);
  text-align:center; max-width:22ch; margin-inline:auto; color:var(--encre); }

/* ==========================================================================
   V5 — SEO : fil d'Ariane, H1 composite, lisibilité éditoriale
   ========================================================================== */
.h1-sous{
  display:block; font-family:var(--texte); font-weight:300;
  font-size:clamp(.62rem,.5rem+.5vw,.86rem); letter-spacing:.34em; text-transform:uppercase;
  margin-top:1.1rem; opacity:.9;
}
.hero h1.nom-maison .h1-sous{ text-shadow:0 2px 20px rgba(0,0,0,.5); }

.fil{
  padding-top:clamp(6rem,11vh,8rem); padding-bottom:0;
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--encre-douce);
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
}
.fil a{ border-bottom:1px solid transparent; }
.fil a:hover{ border-bottom-color:var(--pierre); }
.fil .sep{ opacity:.45; }
.fil [aria-current]{ color:var(--encre); }
.bandeau + .fil{ padding-top:2.2rem; padding-bottom:0; }
main > .fil:first-child{ padding-top:clamp(6.5rem,12vh,9rem); }
main > .fil:first-child + .sect{ padding-top:2.5rem; }

/* Articles du carnet */
article.sect h2{ font-size:var(--t-xl); margin:2.6rem 0 .9rem; }
article.sect p{ max-width:38rem; }
article.sect .chapeau{ margin-bottom:2.4rem; }

/* Performance mobile : le grain fixe coûte cher au défilement */
@media (max-width:860px){ body::before{ display:none; } }

/* ==========================================================================
   V6 — Densité, rythme vertical, finition mobile
   Objectif : respirant mais jamais vide. On resserre partout où l'espace
   ne portait aucun contenu.
   ========================================================================== */
:root{
  --sect: clamp(3.4rem, 6.2vw, 6.4rem);   /* était jusqu'à 9rem */
  --gutter: clamp(1.15rem, 4.4vw, 4rem);
}
.sect{ padding-block:var(--sect); }
.sect-serre{ padding-block:clamp(2.6rem,4.6vw,4.4rem); }
.cta-final .wrap{ padding-block:clamp(3.6rem,8vw,6.4rem); }

/* Sections immersives : plus courtes, elles portent peu de texte */
.immersif{ min-height:auto; padding-block:0; }
.immersif .wrap{ padding-block:clamp(4rem,9vw,6.5rem); min-height:58svh; display:flex;
  flex-direction:column; justify-content:center; }
.immersif .citation{ margin-bottom:0; }

/* Bandeaux de page : moins hauts, le contenu arrive plus vite */
.bandeau{ min-height:clamp(38svh,44vh,52svh); }

/* Compositions : les colonnes se resserrent */
.duo{ gap:clamp(1.4rem,3.2vw,3.2rem); }
.trio{ gap:clamp(1.4rem,2.8vw,2.8rem); }
.trio h2,.trio h3{ margin-bottom:.5rem; }
.trio h2{ font-family:var(--display); font-weight:400; line-height:1.25; }
.trio p{ margin-bottom:0; }
.trio .num{ margin-bottom:.7rem; font-size:var(--t-sm); }

/* Blocs d'information (contact) */
.infos{ gap:2rem 2rem; }
.infos h2{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.24em;
  color:var(--encre-douce); font-family:var(--texte); font-weight:400; margin-bottom:.6rem; }
.infos p{ font-family:var(--display); font-size:var(--t-lg); line-height:1.45; margin:0; }
.infos p + p{ margin-top:.4rem; }

/* Titres de section : moins d'air en dessous */
.titre{ line-height:1.1; }
.eyebrow{ margin-bottom:1rem; }
.manifeste p:last-child{ margin-bottom:0; }
section > .wrap > .reveal:last-child p:last-child{ margin-bottom:0; }

/* Galerie un peu plus dense */
.galerie{ gap:clamp(.5rem,1.1vw,1rem); }

/* Barre mobile : deux actions, la principale en vert */
.barre-mobile{ grid-template-columns:1fr 1fr; box-shadow:0 -6px 24px rgba(25,28,23,.22); }
.barre-mobile a{ padding:1rem .5rem; font-size:.7rem; letter-spacing:.22em; }
.barre-mobile a + a{ background:var(--charbon); color:var(--ivoire); }
.barre-mobile .bm-principal{ background:var(--volet-fonce); color:#fff; }
.barre-mobile .bm-principal + a{ border-left:1px solid rgba(251,248,241,.14); }

@media (max-width:860px){
  body{ padding-bottom:3.2rem; }
  .hero-pied{ bottom:4rem; }
  .bandeau{ min-height:clamp(34svh,40vh,46svh); }
  .immersif .wrap{ min-height:auto; padding-block:clamp(3.2rem,10vw,5rem); }
  .duo-bleed{ margin-inline:calc(-1 * var(--gutter)); }
  .btns .btn{ flex:1 1 auto; }
}

@media (max-width:560px){
  :root{ --sect:clamp(2.8rem,9vw,4rem); }
  .hero h1.nom-maison{ font-size:min(10vw,3.5rem); }
  .h1-sous{ letter-spacing:.24em; margin-top:.8rem; }
  .hero-accroche{ font-size:1.25rem; margin-bottom:1.6rem; }
  .hero .btns{ margin-top:1.8rem; }
  .btn{ padding:.95em 1.6em; font-size:.66rem; letter-spacing:.18em; }
  .btn-large{ padding:1.05em 1.8em; }
  .citation{ font-size:1.5rem; line-height:1.3; }
  .bandeau h1{ font-size:clamp(2.1rem,10vw,3rem); }
  .bandeau h1.nom-maison{ font-size:min(10vw,3.2rem); }
  .bandeau p{ font-size:var(--t-md); }
  .media-ratio-4-5,.media-ratio-3-4{ aspect-ratio:4/5; }
  .reperes{ gap:1.2rem; }
  .repere b{ font-size:2rem; }
  .fil{ font-size:.6rem; letter-spacing:.14em; }
}

/* Les pages légales : colonne lisible, moins d'air */
.legal h2{ font-size:var(--t-lg); margin:2rem 0 .7rem; }
.legal li{ margin-bottom:.35rem; }


/* ==========================================================================
   V7 — Robustesse d'affichage
   ========================================================================== */
/* Si un fichier image manque, le conteneur garde sa place et sa couleur de
   pierre plutôt que d'afficher une icône de fichier cassé. */
.media, .hero-media{ background-color:var(--pierre); }
.media img, .hero-media img{ min-height:1px; }

/* Aucune règle ne masque une image au-delà d'une certaine largeur d'écran :
   toutes les media queries du site sont en max-width et ne concernent que la
   navigation, la barre fixe et le rail décoratif. */

/* Replis pour les unités et propriétés récentes.
   Un navigateur de bureau un peu ancien ignorait « svh » (hauteur nulle du hero)
   et « aspect-ratio » (conteneurs d'images aplatis à zéro). */
.hero{ min-height:100vh; min-height:100svh; }
.bandeau{ min-height:44vh; min-height:clamp(38svh,44vh,52svh); }
.immersif .wrap{ min-height:58vh; min-height:58svh; }
@supports not (aspect-ratio: 1 / 1){
  .media{ min-height:18rem; }
  .media-ratio-4-5,.media-ratio-3-4{ min-height:26rem; }
  .media-ratio-pano{ min-height:12rem; }
  .triptyque .media{ min-height:24rem; }
}