/* =========================================================================
   Villa Alizéa — feuille commune
   =========================================================================
   Système visuel repris de la démonstration Villa Damencourt : sa palette
   (crème chaud, ocre brûlée, sable), son couple Marcellus / Jost, et ses
   animations — montée des blocs à l'entrée dans le champ, révélation des
   images par volet, compteurs.
   ========================================================================= */

:root{
  --fond:#FFF8EF;   --fond2:#F5EBDC;  --voile:#EFE5D7;
  --encre:#2B241E;  --encre2:#6B6055; --sourdine:#70665A;
  --trait:#DCD1BF;  --trait2:#E4DACA;
  --accent:#B3552F; --accent2:#8B3F21; --accent-pale:#E9C9B5;
  /* Le terracotta de marque tient l'aplat mais pas le texte : 3,96:1 sur le
     voile, 3,42:1 sur les sections sombres. Deux déclinaisons, l'une
     assombrie l'autre éclaircie, passent 4,5:1 sans changer la teinte. */
  --lien:#A54E2B; --lien-sombre:#D26437;
  --noir:#221C17;
  --serif:Marcellus, "Iowan Old Style", Palatino, Georgia, serif;
  --sans:Jost, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --page:min(1180px, 100% - clamp(2.5rem, 8vw, 9rem));
  --bandeau:clamp(26px,3.2vw,30px);
  --tete:calc(82px + var(--bandeau));
  --courbe:cubic-bezier(0.16, 0.84, 0.24, 1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.66;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--lien); text-decoration:none}
a:hover{color:var(--accent2)}
::selection{background:var(--accent-pale)}
input,textarea,select,button{font-size:16px}   /* évite le zoom auto sur iOS */
button{min-height:44px; font:inherit; color:inherit}

/* ---- utilitaires -------------------------------------------------------- */
.page{width:var(--page); margin-inline:auto}
/* L'en-tête est fixe : sans cette marge, tout lien vers une ancre place la
   cible sous la barre et le titre visé reste invisible. */
[id]{scroll-margin-top:calc(var(--tete) + 1.5rem)}
.vh{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.evitement{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--encre); color:var(--fond); padding:14px 22px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.evitement:focus{left:12px; top:12px; color:var(--fond)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
a,button,input,textarea,select{-webkit-tap-highlight-color:transparent}
@media (hover:hover){
  a,button{transition:color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease}
}

/* ---- titres et texte ---------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.14; margin:0 0 .5em}
/* Titre de bloc : un h2 pour la hiérarchie du document, à la taille d'un h3
   pour la hiérarchie visuelle. Les deux ne se confondent pas. */
.titre-bloc{font-size:clamp(1.25rem, 1.9vw, 1.55rem)}
h1{font-size:clamp(2.4rem, 5.4vw, 4rem)}
h2{font-size:clamp(1.9rem, 3.6vw, 2.7rem)}
h3{font-size:clamp(1.25rem, 1.9vw, 1.55rem)}
.oeil{
  font-family:var(--sans); font-size:10.5px; font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sourdine); margin:0 0 1.1rem;
}
.chapo{font-size:1.1rem; color:var(--encre2); max-width:64ch; line-height:1.72}
.mince{color:var(--encre2)}
.section{padding:clamp(3.5rem, 8vw, 6.5rem) 0}
.section--voile{background:var(--voile)}
.section--sombre{background:var(--noir); color:var(--fond2)}
.section--sombre .oeil{color:var(--accent-pale)}
.section--sombre .chapo,.section--sombre .mince{color:color-mix(in srgb, var(--fond2) 76%, transparent)}
.section--sombre a{color:var(--lien-sombre)}
.filet{border:0; border-top:1px solid var(--trait); margin:0}

/* ---- boutons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.8rem; border:1px solid var(--accent); background:var(--accent);
  color:var(--fond); cursor:pointer; font-size:11.5px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; min-height:48px;
}
.btn:hover{background:var(--accent2); border-color:var(--accent2); color:var(--fond)}
.btn--vide{background:transparent; color:var(--lien)}
.btn--vide:hover{background:var(--accent); color:var(--fond)}
.btn--clair{background:transparent; border-color:currentColor; color:inherit}
.btn--clair:hover{background:var(--fond); border-color:var(--fond); color:var(--encre)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.lien-fleche{
  display:inline-block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding:2px 0 3px;
}

/* ---- en-tête ------------------------------------------------------------ */
.tete{
  position:fixed; inset:0 0 auto; z-index:40; height:var(--tete);
  display:flex; flex-direction:column;
  border-bottom:1px solid transparent; backdrop-filter:blur(8px);
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease, color .5s ease;
  color:var(--fond);
}
.tete__barre{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; gap:clamp(10px,1.4vw,24px);
  padding-inline:clamp(18px,4vw,56px);
}
/* Le site est une démonstration : on le dit avant tout le reste, et le
   bandeau garde son propre fond pour rester lisible au-dessus du hero. */
.bandeau{
  flex:0 0 var(--bandeau);
  display:flex; align-items:center; justify-content:center;
  padding-inline:clamp(12px,4vw,56px);
  background:var(--encre); color:var(--fond) !important;
  font-size:clamp(9px,1.05vw,10px); letter-spacing:.13em; text-transform:uppercase;
  text-align:center; line-height:1; white-space:nowrap;
}
.bandeau__court{display:none}
@media (max-width:760px){
  .bandeau__long{display:none}
  .bandeau__court{display:inline}
}
@media (hover:hover){ .bandeau:hover{text-decoration:underline; text-underline-offset:3px} }
.tete.est-posee{
  background:color-mix(in srgb, var(--fond) 92%, transparent);
  border-bottom-color:var(--trait); color:var(--encre);
  box-shadow:0 1px 30px rgba(43,36,30,.06);
}
.tete a{color:inherit}
/* « .tete a » est plus spécifique que « .btn » : sans cette ligne, l'appel
   à l'action principal héritait de l'encre de l'en-tête posée, soit 3,1:1
   sur son aplat terracotta. */
.tete .btn{color:var(--fond)}
.marque{
  font-family:var(--serif); font-size:clamp(16px,1.6vw,22px); letter-spacing:.14em;
  text-transform:uppercase; margin-right:auto; white-space:nowrap;
}
.menu{display:flex; gap:clamp(14px,2vw,30px); align-items:center}

/* Sélecteur de langue. Il affiche la langue vers laquelle on va, pas celle où
   l'on est : « EN » sur le site français. C'est ce que le lecteur cherche. */
.langue{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:2px;
  padding:7px 10px; line-height:1; opacity:.75;
  min-height:24px; display:inline-flex; align-items:center;
}
.langue:hover{opacity:1}
/* Sur mobile la navigation passe dans le tiroir — mais pas le choix de langue.
   Il y était caché derrière le burger : un anglophone tombant sur le site
   français devait deviner qu'un menu contenait de quoi en sortir. Il reste
   donc dans la barre, resserré pour laisser la marque respirer, et sa cible
   tactile passe à 34 px de haut. Il figure aussi dans le tiroir : qui ouvre
   le menu pour chercher la langue l'y trouve. */
@media (max-width:900px){
  .langue{
    padding:8px 10px; font-size:10.5px; letter-spacing:.12em; min-height:34px;
  }
}
.tiroir__langue{
  margin-top:1.4rem; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lien) !important;
}
.menu a{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; position:relative;
  padding:6px 0; opacity:.86;
}
.menu a:hover{opacity:1}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .4s var(--courbe);
}
.menu a:hover::after,.menu a[aria-current]::after{right:0}
.tete .btn{padding:.7rem 1.25rem; min-height:40px}
.burger{display:none; width:44px; height:44px; border:0; background:none; cursor:pointer;
        align-items:center; justify-content:center}
.burger i{display:block; width:22px; height:1px; background:currentColor; position:relative}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:22px;
  height:1px; background:currentColor}
.burger i::before{top:-7px} .burger i::after{top:7px}
@media (max-width:900px){
  .menu{display:none}
  .burger{display:flex}
  .tete .btn{display:none}
}

.tiroir{
  position:fixed; inset:0; z-index:60; background:var(--fond); color:var(--encre);
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  padding-inline:clamp(24px,8vw,80px);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
}
.tiroir[data-ouvert]{opacity:1; visibility:visible}
.tiroir a{font-family:var(--serif); font-size:clamp(1.8rem,6.5vw,2.6rem); color:var(--encre);
          padding:.28rem 0; letter-spacing:.02em}
.tiroir a:hover{color:var(--lien)}
.tiroir__x{position:absolute; top:20px; right:clamp(18px,4vw,50px); width:44px; height:44px;
  border:0; background:none; font-size:1.7rem; cursor:pointer; color:var(--encre)}
body.bloque{overflow:hidden}

/* ---- animations (reprises de Villa Damencourt) -------------------------- */
@keyframes monte{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
@keyframes parait{from{opacity:0} to{opacity:1}}
@keyframes volet{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes entrepage{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.anime [data-anim]{opacity:0}
.anime [data-anim].vu{animation:monte 1000ms both var(--courbe)}
.anime [data-anim="volet"].vu{animation:volet 1100ms both var(--courbe), parait 600ms both}
.anime main{animation:entrepage 520ms both var(--courbe)}
@media (prefers-reduced-motion:reduce){
  .anime [data-anim]{opacity:1; animation:none!important}
  .anime main{animation:none!important}
  *{animation-duration:.001ms!important}
}

/* ---- grilles et blocs --------------------------------------------------- */
.duo{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
     gap:clamp(1.8rem,4vw,4.5rem); align-items:center}
.duo--inverse > *:first-child{order:2}
@media (max-width:820px){
  .duo,.duo--inverse{grid-template-columns:1fr}
  .duo--inverse > *:first-child{order:0}
}

.cadre{overflow:hidden; background:var(--trait2)}
.cadre img{width:100%; display:block}
.cadre--4-3 img{aspect-ratio:4/3; object-fit:cover}
.cadre--3-4 img{aspect-ratio:3/4; object-fit:cover}
.cadre--21-9 img{aspect-ratio:21/9; object-fit:cover}
.cadre--1-1 img{aspect-ratio:1/1; object-fit:cover}

/* ---- compteurs ---------------------------------------------------------- */
.compteurs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
           gap:2.2rem 1.5rem; padding:2.6rem 0; border-top:1px solid var(--trait);
           border-bottom:1px solid var(--trait)}
.compteur b{display:block; font-family:var(--serif); font-weight:400;
            font-size:clamp(2.2rem,3.6vw,3rem); line-height:1; letter-spacing:-.01em;
            font-variant-numeric:tabular-nums}
.compteur span{display:block; margin-top:.55rem; font-size:10.5px; letter-spacing:.17em;
               text-transform:uppercase; color:var(--sourdine)}
.section--sombre .compteurs{border-color:rgba(255,255,255,.15)}
.section--sombre .compteur span{color:var(--accent-pale)}

/* ---- listes de prestations ---------------------------------------------- */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
          gap:2.6rem clamp(1.6rem,3vw,3rem); list-style:none; padding:0; margin:0}
.service b{display:block; font-family:var(--serif); font-size:1.15rem; font-weight:400;
           margin-bottom:.4rem}
.service em{display:block; font-style:normal; font-size:10.5px; letter-spacing:.18em;
            text-transform:uppercase; color:var(--lien); margin-bottom:.7rem}
.service p{margin:0; font-size:.95rem; color:var(--encre2)}

/* ---- pied de page ------------------------------------------------------- */
.pied{background:var(--noir); color:var(--fond2); padding:clamp(3rem,6vw,5rem) 0 2rem;
      font-size:.92rem}
.pied a{color:var(--fond2)} .pied a:hover{color:var(--accent-pale)}
.pied h2{font-family:var(--sans); font-size:10.5px; font-weight:400; letter-spacing:.18em;
         text-transform:uppercase; color:var(--accent-pale); margin-bottom:1.1rem}
.pied ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.pied__grille{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem}
.pied__marque{font-family:var(--serif); font-size:1.5rem; letter-spacing:.12em;
              text-transform:uppercase; margin:0 0 1rem}
.pied__bas{border-top:1px solid rgba(255,255,255,.13); margin-top:3rem; padding-top:1.5rem;
  display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap; font-size:.8rem;
  color:color-mix(in srgb, var(--fond2) 62%, transparent)}
.fictif{background:rgba(255,255,255,.06); padding:1rem 1.2rem; margin-top:1.8rem;
  font-size:.82rem; color:color-mix(in srgb, var(--fond2) 80%, transparent); line-height:1.6}
@media (max-width:800px){ .pied__grille{grid-template-columns:1fr} }

/* ---- avertissements ----------------------------------------------------- */
.note{
  font-size:.85rem; color:var(--encre2); background:var(--voile);
  border-left:2px solid var(--accent); padding:.9rem 1.15rem; line-height:1.6;
}
.section--sombre .note{background:rgba(255,255,255,.06); color:inherit}

/* ---- tableaux ----------------------------------------------------------- */
.table{width:100%; border-collapse:collapse; font-size:.94rem}
.table th,.table td{text-align:left; padding:.9rem .5rem; border-bottom:1px solid var(--trait);
                    overflow-wrap:anywhere}
.table th{font-size:10.5px; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
          color:var(--sourdine)}
.table td:last-child,.table th:last-child{text-align:right}

/* ---- formulaires -------------------------------------------------------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem}
.champ{display:flex; flex-direction:column}
.champ--large{grid-column:1/-1}
.champ label{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
             color:var(--sourdine); margin-bottom:9px}
.champ input,.champ select,.champ textarea{
  font-family:var(--sans); font-size:16px; font-weight:300; color:var(--encre);
  background:transparent; border:0; border-bottom:1px solid var(--trait);
  padding:8px 0; width:100%; transition:border-color .3s ease;
}
.champ textarea{resize:vertical; min-height:96px}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--accent)}
.champ small{margin-top:6px; font-size:12px; color:var(--lien)}
@media (max-width:640px){ .form{grid-template-columns:1fr} }

/* ---- en-tête de page intérieure ----------------------------------------- */
.entree{padding:calc(var(--tete) + clamp(3rem,7vw,5.5rem)) 0 clamp(2rem,4vw,3rem)}
.entree h1{margin-bottom:.35em}

/* =========================================================================
   Le hero piloté au défilement
   ========================================================================= */
.hero{position:relative; background:var(--noir)}
/* La hauteur de course est la « pellicule » : le cadre reste collé pendant
   qu'on la parcourt. Sans JS, pas de course — une hauteur d'écran suffit. */
.hero__course{height:100svh}
.anime .hero__course{height:var(--course, 340vh)}
.hero__cadre{position:sticky; top:0; height:100svh; overflow:hidden}
.hero__pile{position:absolute; inset:0}

/* Affiche fixe : visible immédiatement, puis relayée par la séquence en
   fondu. Comme c'est la toute première image du plan, le relais ne se voit
   pas — le même cadrage, le même rapprochement. */
.hero__affiche{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:center; will-change:transform;
}
/* La toile est peinte un poil plus large que le cadre : la marge sert au
   glissement lie a la souris, qui ne doit jamais decouvrir un bord. */
.hero__toile{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 900ms ease;
  transform:scale(1.035) translateX(var(--par, 0%));
}
.anime .hero--prete .hero__toile{opacity:1}

.hero__voile{
  position:absolute; inset:0; pointer-events:none; will-change:opacity;
  background:
    linear-gradient(180deg, rgba(20,17,14,.34) 0%, rgba(20,17,14,.10) 24%, rgba(20,17,14,0) 46%),
    linear-gradient(0deg,  rgba(20,17,14,.26) 0%, rgba(20,17,14,.06) 30%, rgba(20,17,14,0) 55%);
}

/* Écran de lisibilité, calculé et non estimé.
   Mesuré sur les 70 images : la bande où se pose le texte a une luminance
   moyenne de 146 et monte à 201 sur les zones claires — le blanc n'y tenait
   que 2,5:1, alors qu'il en faut 4,5. Le masque confine l'assombrissement à
   la gauche, là où se trouve le texte : la droite de l'image reste intacte.
   `python3 src/lisibilite.py` recontrôle le résultat image par image. */
.hero__ecran{
  position:absolute; inset:0; pointer-events:none; will-change:opacity;
  /* Profil vérifié par src/lisibilite.py sur toutes les images de la
     séquence. Il a été renforcé quand le plan est passé à l'écume : sur du
     blanc, le sur-titre en petites capitales tombait à 4,3:1 là où il en faut
     4,5. Toute modification du plan impose de relancer la mesure. */
  background:linear-gradient(0deg,
    rgba(16,13,11,.70) 0%,  rgba(16,13,11,.66) 26%,
    rgba(16,13,11,.57) 46%, rgba(16,13,11,.33) 62%,
    rgba(16,13,11,.09) 74%, transparent 84%);
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 52%, transparent 86%);
          mask-image:linear-gradient(90deg, #000 0%, #000 52%, transparent 86%);
}
@media (max-width:700px){
  /* En portrait le texte occupe toute la largeur : le masque n'a plus lieu d'être. */
  .hero__ecran{-webkit-mask-image:none; mask-image:none}
}
/* Voile de sortie : le hero se dissout dans la couleur de la page plutôt
   que de la heurter. */
.hero__sortie{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(0deg, var(--fond) 0%, color-mix(in srgb, var(--fond) 55%, transparent) 45%, transparent 85%);
}

.hero__texte{
  position:absolute; inset:auto 0 0; padding-bottom:clamp(5rem,13vh,9rem);
  color:#fff; will-change:opacity, transform;
  text-shadow:0 2px 44px rgba(15,12,10,.5), 0 1px 3px rgba(15,12,10,.35);
}
.hero__lieu{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  margin:0 0 1.1rem; opacity:.9;
}
.hero h1{margin:0; max-width:13ch; font-size:clamp(2.7rem,7.2vw,5.2rem); line-height:1.04}
.hero__phrase{max-width:38ch; font-size:1.05rem; margin:1rem 0 1.9rem; opacity:.94}
/* Le bloc de texte est ancré en bas et grandit vers le haut. Sur un téléphone
   tenu en paysage — 390 px de haut — il remontait jusque sous la barre de
   navigation : le « Villa Alizéa » du hero passait derrière celui de l'en-tête,
   au même endroit. On resserre l'échelle tant que l'écran est court. */
@media (max-height:520px){
  .hero__texte{padding-bottom:clamp(1.6rem,6vh,3rem)}
  .hero__lieu{margin-bottom:.6rem}
  .hero h1{font-size:clamp(1.9rem,4.6vw,3rem)}
  .hero__phrase{font-size:.95rem; margin:.7rem 0 1.1rem}
}

.hero .btn{border-color:#fff; background:transparent; color:#fff}
.hero .btn:hover{background:#fff; color:var(--encre); border-color:#fff}

/* Indicateur de pilotage */
.hero__pilote{
  position:absolute; right:clamp(18px,4vw,56px); bottom:clamp(5rem,13vh,9rem);
  display:flex; flex-direction:column; align-items:center; gap:.9rem; color:#fff;
  pointer-events:none;
}
.hero__piste{width:1px; height:84px; background:rgba(255,255,255,.34); position:relative}
.hero__curseur{position:absolute; left:-2px; width:5px; height:5px; border-radius:50%;
  background:#fff; top:0; will-change:transform}
.hero__pilote span{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  writing-mode:vertical-rl; opacity:.8}
@media (max-width:900px){ .hero__pilote{display:none} }

/* Indicateur de préchargement : discret, en bas à gauche, il disparaît dès
   que la séquence est complète et que l'effet s'active. */
.hero__jauge{
  position:absolute; left:clamp(18px,4vw,56px); bottom:clamp(1.6rem,4vh,2.4rem);
  display:flex; align-items:center; gap:.7rem; color:#fff; pointer-events:none;
}
.hero__jauge[hidden]{display:none}
.hero__jauge span{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.62}
.hero__jauge i{display:block; width:78px; height:1px; background:rgba(255,255,255,.28);
               position:relative; overflow:hidden}
.hero__jauge i::after{
  content:""; position:absolute; inset:0 auto 0 0; width:var(--part,0%);
  background:#fff; transition:width .35s ease;
}

/* Repli actif : la séquence n'est pas chargée. On revient à l'affiche et
   le hero cesse d'être long. */
.hero--fixe .hero__toile,.hero--fixe .hero__pilote,.hero--fixe .hero__jauge{display:none}
/* Tant que la séquence n'est pas complète, le hero garde une hauteur
   d'écran : le visiteur ne défile pas dans une image immobile. */
.anime .hero__course{height:100svh}
.anime .hero--prete .hero__course{height:var(--course, 340vh)}
.hero--prete .hero__pilote{opacity:1}
.hero__pilote{opacity:0; transition:opacity .6s ease}
.anime .hero--fixe .hero__course{height:100svh}

/* ---- étiquettes de prestations ------------------------------------------ */
.etiquettes{list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem}
.etiquettes li{font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:.4rem .85rem; border:1px solid var(--trait); color:var(--encre2)}

/* ---- aperçu de la galerie sur l'accueil --------------------------------- */
.apercu{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1.2vw,16px)}
.apercu__item{display:block; overflow:hidden; background:var(--trait2); line-height:0}
.apercu__item img{width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .7s var(--courbe)}
.apercu__item:hover img{transform:scale(1.06)}
@media (max-width:820px){ .apercu{grid-template-columns:repeat(3,1fr)} }

/* ---- galerie ------------------------------------------------------------ */
.onglets{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2.5rem}
.onglet{
  border:1px solid var(--trait); background:transparent; color:var(--encre2);
  padding:.55rem 1.15rem; min-height:auto; cursor:pointer;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
}
.onglet:hover{border-color:var(--accent); color:var(--lien)}
.onglet.est-actif{background:var(--accent); border-color:var(--accent); color:var(--fond)}

.mosaique{columns:3 280px; column-gap:clamp(8px,1.2vw,16px)}
.mosaique figure{margin:0 0 clamp(8px,1.2vw,16px); break-inside:avoid; position:relative}
.mosaique figure[hidden]{display:none}
.mosaique a{display:block; overflow:hidden; background:var(--trait2); line-height:0;
            position:relative; cursor:zoom-in}
.mosaique img{width:100%; transition:transform .7s var(--courbe)}
.mosaique a:hover img{transform:scale(1.04)}
.mosaique figcaption{
  position:absolute; inset:auto 0 0; padding:2.6rem 1rem .85rem; color:#fff;
  font-size:.82rem; line-height:1.4; opacity:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(20,17,14,.66), transparent);
  transition:opacity .3s ease;
}
.mosaique a:hover figcaption,.mosaique a:focus-visible figcaption{opacity:1}
@media (max-width:560px){ .mosaique{columns:2 140px} }

/* visionneuse */
.visio{position:fixed; inset:0; z-index:80; background:rgba(24,20,17,.97);
  display:flex; flex-direction:column; opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s}
.visio[data-ouvert]{opacity:1; visibility:visible}
.visio__scene{flex:1; display:flex; align-items:center; justify-content:center;
  padding:4rem 1rem 1rem; min-height:0; touch-action:pan-y pinch-zoom}
.visio__scene img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.visio__bas{padding:.9rem 1.2rem 1.6rem; color:var(--fond2); display:flex; gap:1rem;
  align-items:center; justify-content:center; flex-wrap:wrap; text-align:center}
.visio__compte{font-size:10.5px; letter-spacing:.18em; opacity:.55}
.visio__legende{font-family:var(--serif); font-size:1.05rem}
.visio__credit{width:100%; font-size:10.5px; letter-spacing:.1em; opacity:.42}
.visio__x,.visio__fl{position:absolute; background:rgba(255,255,255,.09); border:0;
  color:#fff; cursor:pointer; width:48px; height:48px; display:grid; place-items:center;
  font-size:1.2rem; transition:background .2s ease}
.visio__x:hover,.visio__fl:hover{background:rgba(255,255,255,.2)}
.visio__x{top:1.1rem; right:1.1rem}
.visio__fl--p{left:1.1rem; top:50%; transform:translateY(-50%)}
.visio__fl--s{right:1.1rem; top:50%; transform:translateY(-50%)}
@media (max-width:620px){ .visio__fl{display:none} }

/* ---- page de l'île ------------------------------------------------------ */
.lieu{margin-bottom:clamp(3rem,7vw,5.5rem)}
.trajets{display:flex; flex-wrap:wrap; gap:2rem; margin:1.6rem 0 0; padding:1.2rem 0 0;
         border-top:1px solid var(--trait)}
.trajets div{min-width:88px}
.trajets dt{font-size:10px; letter-spacing:.18em; text-transform:uppercase;
            color:var(--sourdine); margin-bottom:.35rem}
.trajets dd{margin:0; font-family:var(--serif); font-size:1.15rem}

/* ---- tarifs ------------------------------------------------------------- */
.tarifs{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:clamp(1rem,2vw,1.6rem)}
.tarif{border:1px solid var(--trait); padding:1.9rem 1.6rem; background:var(--fond)}
.tarif--fort{background:var(--noir); color:var(--fond2); border-color:var(--noir)}
.tarif--fort .oeil{color:var(--accent-pale)}
.tarif__prix{font-family:var(--serif); font-size:clamp(1.9rem,3vw,2.4rem); line-height:1.1;
             margin:.4rem 0 .5rem}
.tarif__prix small{font-family:var(--sans); font-size:.72rem; letter-spacing:.1em;
                   text-transform:uppercase; opacity:.62; margin-left:.4rem}
.tarif__nom{margin:0; font-size:.95rem}
.tarif__mini{margin:.3rem 0 0; font-size:.82rem; opacity:.68}

/* ---- avis --------------------------------------------------------------- */
.avis-tete{display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap;
           padding-bottom:2.2rem; margin-bottom:2.5rem; border-bottom:1px solid var(--trait)}
.avis-note{display:flex; align-items:baseline; gap:.5rem; margin:0}
.avis-note b{font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,5vw,3.6rem);
             line-height:1}
.avis-note span{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
                color:var(--sourdine)}
.pf-liste{display:flex; gap:clamp(1rem,3vw,2.4rem); flex-wrap:wrap}
.pf{display:flex; align-items:center; gap:.65rem; font-size:.95rem}
.pf b{font-family:var(--serif); font-size:1.25rem; font-weight:400}
.pf small{display:block; font-size:10.5px; letter-spacing:.1em; color:var(--sourdine)}
.marque-pf{
  width:26px; height:26px; flex:none; border-radius:50%; background:var(--pf,#999);
  color:#fff; display:grid; place-items:center; font-weight:500; font-size:14px;
  font-family:var(--sans); line-height:1;
}
.avis-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
             gap:clamp(1rem,2vw,1.8rem)}
.avis{border:1px solid var(--trait); padding:1.7rem 1.6rem; background:var(--fond)}
.section--voile .avis{background:var(--fond)}
.avis__tete{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem}
.avis__source{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:400}
.avis__date{margin-left:auto; font-size:11px; color:var(--sourdine)}
.avis__note{margin:0 0 .8rem; display:flex; align-items:center; gap:.6rem}
.avis__note b{font-family:var(--serif); font-weight:400; font-size:1rem}
.etoiles{color:#D6952F; letter-spacing:.12em; font-size:.95rem}
.avis__texte{margin:0 0 1rem; font-size:.95rem; color:var(--encre2)}
.avis__auteur{margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
              color:var(--sourdine)}

/* =========================================================================
   Le seuil — la charnière entre le paysage et la maison
   =========================================================================
   Le hero montre la mer, jamais la villa. Sans marque nette, rien ne relie
   le survol aux photographies qui suivent. Ce bloc annonce le passage et le
   rend visible : une phrase, puis la première image de l'intérieur.
   ========================================================================= */
.seuil{padding:clamp(3.5rem,9vw,7rem) 0 0; text-align:center}
.seuil__mot{
  font-family:var(--serif); font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1.18;
  margin:0 0 clamp(2.2rem,5vw,3.4rem); color:var(--encre);
}
.seuil__vue{
  width:min(1180px, 100% - clamp(2.5rem,8vw,9rem)); margin-inline:auto;
  overflow:hidden; background:var(--trait2);
}
.seuil__vue img{width:100%; aspect-ratio:21/9; object-fit:cover}
@media (max-width:700px){ .seuil__vue img{aspect-ratio:4/3} }

/* Signature de l'éditeur : discrète, mais cliquable — c'est par là qu'un
   propriétaire séduit par la démonstration prend contact. */
.pied__signature{
  margin:2rem 0 0; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.13);
  font-size:.84rem; color:color-mix(in srgb, var(--fond2) 78%, transparent);
}
.pied__signature a{border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:1px}
.pied__signature a:hover{border-bottom-color:var(--accent-pale)}
.pied__signature + .pied__bas{border-top:0; margin-top:1.4rem; padding-top:0}