/* Summit Luxury - feuille de style unique.
   Assemblage de style.css, v6, v7, v8 et v9, dans l'ordre de la cascade. */


/* ==================== style.css ==================== */

/* Summit Luxury - charte : blanc, beige #E8C8A8, brun #A27E5D, noir en appoint */

:root{
  --blanc:#fff;
  --creme:#faf7f3;
  --creme-2:#f3ece4;
  --beige:#e8c8a8;
  --beige-clair:#f4e5d4;
  --brun:#a27e5d;
  --brun-fonce:#7a5c42;
  --brun-profond:#54402e;
  --encre:#1b1714;
  --encre-doux:#574d43;

  --serif:"Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
  --hairline:rgba(162,126,93,.24);
  --ease:cubic-bezier(.16,.84,.34,1);
  --marge:clamp(1.15rem,4vw,4rem);
  --arche:clamp(56px,9vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1rem,.95rem + .3vw,1.1rem);
  line-height:1.6;
  color:var(--encre);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.micro{
  font-size:clamp(.7rem,.58rem + .17vw,.72rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:500;
}

/* ---------- Barre ---------- */

.barre{
  position:absolute;inset:0 0 auto 0;z-index:5;
  display:flex;align-items:center;gap:clamp(.6rem,2vw,2rem);
  padding:clamp(.9rem,2.2vh,1.6rem) var(--marge);
}
.barre::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(250,247,243,.92),rgba(250,247,243,0));
  pointer-events:none;
}
.marque img{width:clamp(40px,3.6vw,54px);height:auto}

.nav{
  flex:1;display:flex;justify-content:center;
  gap:clamp(.9rem,2.6vw,2.6rem);
  color:var(--encre-doux);
}
.nav a{position:relative;padding-bottom:5px;transition:color .4s var(--ease)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brun);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.nav a:hover{color:var(--brun-fonce)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--brun-fonce)}

.actions{display:flex;align-items:center;gap:.55rem;margin-left:auto}
.btn{
  display:inline-block;
  padding:.55rem 1.4rem;
  border:1px solid var(--brun);
  border-radius:999px;
  color:var(--brun-fonce);
  background:transparent;
  transition:background .5s var(--ease),color .5s var(--ease);
}
.btn:hover{background:var(--brun-fonce);border-color:var(--brun-fonce);color:var(--blanc)}
.social{
  display:grid;place-items:center;width:33px;height:33px;
  border:1px solid var(--hairline);border-radius:50%;color:var(--brun-fonce);
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.social svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.social:hover{border-color:var(--brun);background:rgba(232,200,168,.35)}

.burger{
  display:none;width:36px;height:36px;border:0;background:transparent;
  padding:0;cursor:pointer;color:var(--encre);
}
.burger span{display:block;height:1px;background:currentColor;margin:6px auto;width:20px;transition:transform .4s var(--ease),opacity .3s}
.menu-ouvert .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-ouvert .burger span:nth-child(2){opacity:0}
.menu-ouvert .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Écran d'accueil ---------- */

.hub{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(4.75rem,10.5vh,7rem) var(--marge) clamp(1.5rem,4vh,2.75rem);
  overflow:hidden;
}
.hub__fond{
  position:absolute;inset:-2%;
  background-position:center 62%;background-size:cover;background-repeat:no-repeat;background-image:url("../assets/img/salon-1440.jpg?v=e0ee6429");
  animation:derive 26s var(--ease) infinite alternate;
}
@keyframes derive{from{transform:scale(1.02)}to{transform:scale(1.09)}}
/* Le monogramme en filigrane : posé sur la photo, sous les écritures,
   seul et centré derrière la signature et l'accroche. Le SVG sert de
   masque plutôt que d'image, ce qui permet de le teinter au brun de la
   charte et d'en régler la présence d'une seule valeur. */
.hero__blason{
  position:absolute;
  left:50%;top:41%;
  width:clamp(200px,44vh,480px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background-color:var(--brun);
  /* Le filigrane ne prend que la montagne du logo : le monogramme SL et
     les traits du lac alourdissaient le fond derriere la signature. Le
     dessin garde la zone du logo complet, donc la montagne ne bouge pas
     d un pixel. */
  -webkit-mask:url("../assets/logo/filigrane-montagne.svg?v=085499fa") center/contain no-repeat;
  mask:url("../assets/logo/filigrane-montagne.svg?v=085499fa") center/contain no-repeat;
  opacity:.14;
  pointer-events:none;
}

.hub__voile{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(250,247,243,.60) 0%, rgba(250,247,243,.88) 58%, rgba(250,247,243,.97) 100%),
    linear-gradient(180deg, rgba(250,247,243,.55), rgba(250,247,243,.18) 40%, rgba(250,247,243,.9)),
    radial-gradient(95% 75% at 50% 44%, rgba(162,126,93,0) 42%, rgba(162,126,93,.13) 100%);
}

.hub__inner{
  position:relative;z-index:2;
  width:min(100%,78rem);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.5rem,1.5vh,1.05rem);
  text-align:center;
}

.signature{height:clamp(73px,17.5vh,188px);width:auto;max-width:90vw}

.filet{width:1px;height:clamp(10px,2vh,22px);background:linear-gradient(180deg,transparent,var(--brun) 45%,transparent);opacity:.7;border:0;margin:0}

.accroche{
  margin:0;font-weight:300;
  font-size:clamp(1.2rem,1rem + 1.05vw,2rem);
  line-height:1.32;letter-spacing:.005em;max-width:26ch;
  color:var(--encre);
}
.accroche em{font-style:italic;color:var(--brun-fonce)}

/* ---------- Les univers ---------- */

.univers-piste{width:100%;min-width:0;margin-top:clamp(.85rem,3vh,2.3rem)}

.univers{
  display:grid;
  grid-template-columns:3fr 1px 1fr;
  grid-template-rows:auto auto;
  column-gap:clamp(1.75rem,5vw,5rem);
  min-width:0;
  row-gap:clamp(.65rem,1.7vh,1.1rem);
  align-items:end;
}
.univers__bloc{display:contents}

.bloc--prestige > .univers__titre{grid-column:1;grid-row:1}
.bloc--prestige > .tuiles        {grid-column:1;grid-row:2}
.bloc--locative > .univers__titre{grid-column:3;grid-row:1}
.bloc--locative > .tuiles        {grid-column:3;grid-row:2}

.univers__sep{
  grid-column:2;grid-row:1 / 3;
  background:linear-gradient(180deg,transparent,rgba(162,126,93,.42) 20%,rgba(162,126,93,.42) 80%,transparent);
}

.univers__titre{
  margin:0;
  align-self:end;
  text-wrap:balance;
  color:var(--brun-fonce);
  display:flex;align-items:center;gap:.9rem;
  text-align:left;
  min-width:0;
  line-height:1.35;
}
.univers__titre::after{
  content:"";height:1px;flex:1;min-width:1.5rem;
  background:linear-gradient(90deg,var(--hairline),rgba(162,126,93,0));
}

.tuiles{display:grid;gap:clamp(.55rem,1.1vw,1rem);min-width:0}
.bloc--prestige > .tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.bloc--locative > .tuiles{grid-template-columns:minmax(0,1fr)}

.tuile{
  position:relative;display:block;overflow:hidden;
  width:100%;
  height:clamp(8.5rem,25vh,16rem);
  border-radius:var(--arche) var(--arche) 3px 3px;
  isolation:isolate;
}
/* diaporama : les vues se fondent l'une dans l'autre */
.tuile__diapo{
  position:absolute;inset:0;z-index:0;
  transform:scale(1.01);
  transition:transform 1.2s var(--ease);
}
.vue{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
}
.vue:first-child{opacity:1}

/* seule la gestion locative fait défiler ses vues */
.tuile--locative .vue{animation:diapo var(--cycle,16.5s) linear infinite, objectif var(--cycle,16.5s) linear infinite}
.tuile--locative .vue:nth-child(2){animation-delay:calc(var(--cycle,16.5s) / -3)}
.tuile--locative .vue:nth-child(3){animation-delay:calc(var(--cycle,16.5s) / -1.5)}
@keyframes objectif{from{transform:scale(1)}to{transform:scale(1.11)}}
@keyframes diapo{
  0%     {opacity:1}
  28%    {opacity:1}
  33.34% {opacity:0}
  94.4%  {opacity:0}
  100%   {opacity:1}
}

.v-salon     {background-image:url("../assets/img/salon-1440.jpg?v=e0ee6429")}
.v-salon-b   {background-image:url("../assets/img/salon-1440.jpg?v=e0ee6429");background-position:78% 50%}
.v-terrasse  {background-image:url("../assets/img/terrasse-1440.jpg?v=4f429369")}
.v-piscine   {background-image:url("../assets/img/piscine-1440.jpg?v=c26e471e")}
.v-piscine-b {background-image:url("../assets/img/piscine-1440.jpg?v=c26e471e");background-position:20% 60%}
.v-salonext  {background-image:url("../assets/img/salon-exterieur-1440.jpg?v=63fa3399")}
.v-salonext-b{background-image:url("../assets/img/salon-exterieur-1440.jpg?v=63fa3399");background-position:82% 50%}

.tuile--locative {--cycle:15s}

.tuile__voile{
  position:absolute;inset:0;z-index:1;
  /* Le nom de la tuile se lit entre 14 et 26 % de la hauteur : mesuré le
     21/10/2026, le voile n'y valait que .44 à .60, soit 1,7:1 sur les
     zones claires d'une photo. Le dégradé est redressé pour couvrir cette
     bande-là, sans assombrir le haut de l'image. */
  background:linear-gradient(to top,
    rgba(46,33,23,.88) 0%, rgba(46,33,23,.74) 30%,
    rgba(46,33,23,.20) 55%, rgba(46,33,23,.03) 78%, rgba(46,33,23,0) 100%);
  transition:background .7s var(--ease);
}
.tuile__contenu{
  position:absolute;inset:auto 0 0 0;z-index:3;
  padding:0 clamp(.75rem,1.5vw,1.15rem) clamp(.8rem,2vh,1.2rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  color:var(--blanc);
  transition:transform .6s var(--ease);
}
.tuile::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(232,200,168,.26);
  pointer-events:none;
  transition:box-shadow .6s var(--ease);
}
.tuile__nom{
  font-size:clamp(.79rem,.74rem + .3vw,1.05rem);
  line-height:1.22;letter-spacing:.015em;text-align:left;
  text-shadow:0 1px 14px rgba(40,28,20,.45);
}
.tuile__trait{
  width:14px;height:1px;background:var(--beige);
  transition:width .7s var(--ease);
}
.tuile:hover .tuile__diapo,.tuile:focus-visible .tuile__diapo{transform:scale(1.08)}
.tuile:hover .tuile__voile{background:linear-gradient(to top,
    rgba(46,33,23,.84) 0%, rgba(46,33,23,.50) 22%,
    rgba(46,33,23,.12) 50%, rgba(46,33,23,0) 78%)}
.tuile:hover .tuile__trait,.tuile:focus-visible .tuile__trait{width:40px}
.tuile:hover .tuile__contenu{transform:translateY(-4px)}
.tuile:hover::after{box-shadow:inset 0 0 0 1px rgba(232,200,168,.5)}
.tuile:focus-visible{outline:2px solid var(--brun);outline-offset:3px}

/* ---------- Apparition ---------- */

.apparait{opacity:0;transform:translateY(14px);animation:monte .95s var(--ease) forwards}
@keyframes monte{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}

/* ---------- Pied de page ---------- */

.pied{
  background:var(--blanc);border-top:1px solid var(--hairline);
  padding:clamp(2.5rem,6vw,4.5rem) var(--marge) 2rem;
  font-size:.9rem;color:var(--encre-doux);
}
/* Menu du site, en haut du pied de page. Le site n'ayant volontairement
   aucune barre de navigation, c'est ici que l'on retrouve toutes les
   grandes entrées, une fois la page parcourue. */
.pied__menu{
  width:min(100%,78rem);
  margin:0 auto clamp(2rem,4.5vw,3rem);
  padding-bottom:clamp(1.25rem,3vw,1.75rem);
  border-bottom:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1rem clamp(1.25rem,3vw,2.5rem);
}
.pied__marque{display:inline-flex;flex:none;opacity:.8;transition:opacity .35s var(--ease)}
.pied__marque:hover{opacity:1}
.pied__marque img{display:block;width:clamp(34px,3.4vw,48px);height:auto}
/* Le menu n'est plus collé au bord droit : il se centre dans la place qui
   reste à droite du logo. Comme le logo occupe la gauche, le menu se pose
   donc un peu à droite du milieu de la rangée - d'autant plus que le logo
   est grand. */
.pied__menu ul.enfilade{margin-inline:auto}
.pied__menu a{
  position:relative;display:inline-block;
  color:var(--brun-fonce);padding-block:.2rem;
}
.pied__menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brun);
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.pied__menu a:hover::after,
.pied__menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.pied__menu a[aria-current="page"]{color:var(--brun-profond)}
@media (max-width:600px){
  .pied__menu{justify-content:center}
  .pied__menu ul.enfilade{margin-inline:0;justify-content:center;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .pied__menu a::after{transition:none}
}

.pied__grille{
  width:min(100%,78rem);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:2.25rem clamp(1.5rem,4vw,3.5rem);
}
.pied h2{margin:0 0 1rem;color:var(--brun-fonce)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.pied a{transition:color .35s var(--ease)}
.pied a:hover{color:var(--brun-profond)}
.pied__zones{
  width:min(100%,78rem);margin:clamp(1.75rem,4vw,2.75rem) auto 0;
  padding-top:clamp(1.25rem,3vw,1.75rem);
  border-top:1px solid var(--hairline);
}
.pied__zones h2{margin:0 0 .85rem}
.pied ul.enfilade{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:0;row-gap:.45rem;
}
.enfilade li{display:flex;align-items:center}
.enfilade li + li::before{
  content:"";
  width:1px;height:.85em;
  background:var(--hairline);
  margin:0 clamp(.65rem,1.4vw,1.05rem);
}
.enfilade a{transition:color .35s var(--ease)}
.enfilade a:hover{color:var(--brun-profond)}

.pied__bas{
  width:min(100%,78rem);margin:2.75rem auto 0;padding-top:1.35rem;
  border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.78rem;opacity:.7;
}
/* Le crédit de réalisation, sur sa propre ligne : glissé dans la rangée du
   dessus il aurait disputé la place à la liste des villes, déjà longue. */
.pied__signature{
  width:min(100%,78rem);margin:.9rem auto 0;
  text-align:center;font-size:.78rem;opacity:.7;
}
.pied__signature a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.pied__signature a:hover{opacity:1}

/* ---------- Menu mobile ---------- */

.menu{
  position:fixed;inset:0;z-index:4;
  background:var(--creme);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1rem,3vh,1.75rem);
  font-size:1.4rem;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.menu-ouvert .menu{opacity:1;visibility:visible}

/* ---------- Responsive ---------- */

@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .actions .btn{display:none}
  .tuile{height:clamp(9rem,26vw,15rem)}
}

/* En dessous de 700 px : la bande reste sur une ligne et se fait glisser. */
@media (max-width:700px){
  .univers-piste{
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding-bottom:.4rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,rgba(0,0,0,.15));
          mask-image:linear-gradient(90deg,#000 90%,rgba(0,0,0,.15));
  }
  .univers-piste::-webkit-scrollbar{display:none}
  .univers{min-width:37rem;column-gap:1.9rem}
  .tuile{height:clamp(8.5rem,34vw,12rem);scroll-snap-align:center}
}
@media (max-width:560px){
  .hub{padding-top:5rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .apparait{opacity:1;transform:none}
  .vue:first-child{opacity:1}
}

/* ==================== v6.css ==================== */

/* Version 06 - la variante empilée, avec la gestion locative en bande éditoriale.
   Les trois services prestige ne changent pas. Surcharge style.css. */

.page-v6{
  min-height:100svh;display:flex;flex-direction:column;
  --bas-hero:clamp(.6rem,1.5vh,1.1rem);
  --haut-bande:clamp(.55rem,1.2vh,1rem);
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  /* Deux parts de l'espace libre pour le hero, une pour la bande. Le hero
     centre son contenu ; la bande centre le sien aussi, depuis le
     22/10/2026 - voir « Respiration verticale de l'accueil » en fin de
     feuille, qui remplace l'ancien calage en haut. */
  flex:2 1 auto;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(4.25rem,8.5vh,6rem) var(--marge) var(--bas-hero);
  overflow:hidden;
}
.hero__inner{
  position:relative;z-index:2;
  width:min(100%,78rem);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.4rem,1vh,.8rem);
  text-align:center;
}
.hero .filet{height:clamp(8px,1.2vh,14px)}
.hero .signature{height:clamp(84px,20vh,216px)}
.hero .accroche{font-size:clamp(1.05rem,.9rem + .85vw,1.7rem)}

/* ---------- Les trois services (inchangés) ---------- */

.services{width:100%;margin-top:clamp(.25rem,.6vh,.55rem)}
.services .univers__titre{margin:0 0 clamp(.35rem,.7vh,.6rem)}

/* Étiquettes de section un cran au-dessus des autres petites capitales */
.services .univers__titre,
.bande__oeil{font-size:clamp(.82rem,.76rem + .29vw,1rem)}
.services .tuiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.7vw,1.5rem)}
.services .tuile{height:clamp(7.7rem,20.9vh,13.75rem)}

/* Pas de plaque : un dégradé diffus qui naît au-dessus du texte et se densifie
   jusqu'au pied de l'image. Identique au repos et au survol : il est fixe. */
.services .tuile__voile{
  background:linear-gradient(to bottom,
    rgba(40,28,20,0)    40%,
    rgba(40,28,20,.20)  56%,
    rgba(40,28,20,.46)  72%,
    rgba(40,28,20,.70)  86%,
    rgba(40,28,20,.90) 100%);
}
.services .tuile:hover .tuile__voile{
  background:linear-gradient(to bottom,
    rgba(40,28,20,0)    40%,
    rgba(40,28,20,.20)  56%,
    rgba(40,28,20,.46)  72%,
    rgba(40,28,20,.70)  86%,
    rgba(40,28,20,.90) 100%);
}
.services .tuile__nom{text-shadow:0 1px 14px rgba(28,19,13,.55), 0 0 30px rgba(28,19,13,.35)}

/* ---------- Bande Gestion locative ---------- */

.bande{
  flex:0 0 auto;
  background:var(--creme-2);
  border-top:1px solid rgba(162,126,93,.16);
  padding:clamp(.85rem,1.8vh,1.5rem) var(--marge);
}
.bande__grille{
  width:min(100%,78rem);margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:stretch;
}
.bande__texte{align-self:center}
.bande__oeil{
  margin:0 0 clamp(.4rem,1vh,.7rem);
  display:flex;align-items:center;gap:.9rem;
  color:var(--brun-fonce);
}
.bande__oeil::after{content:"";height:1px;flex:1;max-width:5rem;background:var(--hairline)}

.bande h2{
  margin:0 0 clamp(.45rem,1.3vh,.8rem);
  font-weight:300;
  font-size:clamp(1.35rem,1.05rem + 1.15vw,2.15rem);
  line-height:1.2;
  letter-spacing:-.005em;
}
.bande__p{
  margin:0 0 clamp(.8rem,2vh,1.3rem);
  max-width:44ch;
  color:var(--encre-doux);
  font-size:clamp(.9rem,.86rem + .22vw,1.02rem);
  line-height:1.6;
}
.btn--fleche{display:inline-flex;align-items:center;gap:.8rem}
.btn--fleche span{transition:transform .5s var(--ease)}
.btn--fleche:hover span{transform:translateX(4px)}

.bande__visuel{
  position:relative;overflow:hidden;
  align-self:stretch;
  min-height:clamp(7rem,17vh,12rem);
  border-radius:12px;
  isolation:isolate;
}
.bande__visuel .vue{
  border-radius:inherit;
  animation:diapo 15s linear infinite, objectif 15s linear infinite;
}
.bande__visuel .vue:nth-child(2){animation-delay:-5s}
.bande__visuel .vue:nth-child(3){animation-delay:-10s}
.bande__visuel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(162,126,93,.18);
  pointer-events:none;
}

/* ---------- Responsive ---------- */

@media (max-width:900px){
  .bande__grille{grid-template-columns:1fr;gap:1rem}
  .bande__visuel{height:clamp(6.5rem,15vh,10rem);align-self:auto;order:-1}
  .services .tuile{height:clamp(7.15rem,16.5vh,11rem)}
  .bande h2{font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
  .bande__p{font-size:.92rem;margin-bottom:.9rem}
}
@media (max-width:600px){
  .services .tuiles{gap:.6rem}
  .hero .signature{height:clamp(53px,11.5vh,106px)}
  .services .tuile{height:clamp(6.05rem,16.5vh,9.35rem)}
  .bande{padding:clamp(.85rem,2vh,1.4rem) var(--marge)}
  .bande__visuel{height:clamp(5.5rem,19vw,8.5rem)}
  .bande h2{font-size:clamp(1.1rem,.95rem + .8vw,1.45rem)}
  .bande__p{font-size:.86rem;line-height:1.5;margin-bottom:.75rem}
  .bande__grille{gap:.85rem}
}
@media (max-height:840px){
  .hero .signature{height:clamp(67px,14.9vh,161px)}
  .services .tuile{height:clamp(6.9rem,17.6vh,11.55rem)}
  .bande__visuel{min-height:clamp(6.25rem,16vh,10.5rem)}
  .bande{padding:clamp(.9rem,2.2vh,1.7rem) var(--marge)}
  .bande h2{font-size:clamp(1.2rem,.95rem + .85vw,1.7rem)}
  .bande__p{font-size:.93rem;margin-bottom:clamp(.7rem,1.8vh,1rem)}
}
@media (max-height:700px){
  .hero .signature{height:clamp(60px,13.2vh,126px)}
  .hero .accroche{font-size:clamp(.92rem,.82rem + .45vw,1.18rem)}
  .services .tuile{height:clamp(5.5rem,14.3vh,8.8rem)}
  .bande__visuel{min-height:clamp(5rem,13vh,8rem)}
  .bande h2{font-size:clamp(1.1rem,.9rem + .7vw,1.45rem)}
  .bande__p{font-size:.86rem;line-height:1.5;margin-bottom:.7rem}
  .bande__grille{gap:.8rem}
  .bande{padding:clamp(.75rem,1.8vh,1.3rem) var(--marge)}
  .services{margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .bande__visuel .vue:first-child{opacity:1}
}

/* ==================== v7.css ==================== */

/* Version 07 - sans aucun menu. L'accueil EST le menu : on entre par les images.
   Sur les pages internes, un seul bouton : le retour à l'accueil.
   Surcharge style.css. */

.page-v6{
  min-height:100svh;display:flex;flex-direction:column;
  --bas-hero:clamp(.6rem,1.5vh,1.1rem);
  --haut-bande:clamp(.55rem,1.2vh,1rem);
}

/* Pas de barre de navigation : le hero part vraiment du haut de l'écran */
.hero{
  padding-top:clamp(.9rem,2.2vh,1.6rem)!important;
  padding-bottom:var(--bas-hero)!important;
}
@media (max-height:700px){.hero{padding-top:clamp(.7rem,1.8vh,1.2rem)!important}}

/* Bouton Contact, sous l'accroche */
.btn--hero{
  margin-top:0;
  /* Même taille, même forme : on ne joue que sur le contraste */
  color:var(--encre);
  font-weight:600;
  border-color:var(--brun-profond);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  box-shadow:0 1px 14px rgba(80,58,40,.10);
}
.btn--hero:hover{background:var(--brun-fonce);border-color:var(--brun-fonce);color:var(--blanc)}

/* Bouton de la bande locative : traitement identique au bouton Contact */
.bande .btn--fleche{
  color:var(--encre);
  font-weight:600;
  border-color:var(--brun-profond);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  box-shadow:0 1px 14px rgba(80,58,40,.10);
}
.bande .btn--fleche:hover{background:var(--brun-fonce);border-color:var(--brun-fonce);color:var(--blanc)}
.actions-hero{
  margin-top:clamp(.15rem,.5vh,.45rem);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.9rem,2vw,1.75rem);
  flex-wrap:wrap;
}
.tel{
  color:var(--encre);
  font-weight:600;
  padding-bottom:3px;
  border-bottom:1px solid var(--brun);
  transition:color .45s var(--ease),border-color .45s var(--ease);
  text-shadow:0 1px 10px rgba(250,247,243,.9);
}
.tel:hover{color:var(--brun-profond);border-color:var(--brun-profond)}

/* Dans le hero : le numéro devient une pastille pleine, à la même hauteur
   que le bouton Contact. Appeler est l'action la plus rapide, elle passe devant. */
.actions-hero .tel{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1.3rem;
  /* les chiffres n'ont pas besoin du même interlettrage que les capitales */
  letter-spacing:.13em;
  border:1px solid var(--brun-fonce);
  border-bottom:1px solid var(--brun-fonce);
  border-radius:999px;
  background:var(--brun-fonce);
  color:var(--blanc);
  text-shadow:none;
  box-shadow:0 1px 14px rgba(80,58,40,.16);
  transition:background .45s var(--ease),color .45s var(--ease);
}
/* l'interlettrage ajoute une espace après le dernier chiffre : on la reprend
   pour que le texte soit optiquement centré dans la pastille */
.tel__num{margin-right:-.13em}
.actions-hero .tel svg{
  width:14px;height:14px;flex:0 0 auto;
  stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.actions-hero .tel:hover{background:var(--brun-profond);border-color:var(--brun-profond);color:var(--blanc)}

.interne__tel{margin:-1.5rem 0 clamp(1.75rem,5vh,3rem)}

/* ---------- Bouton retour, sur les pages internes ---------- */

.retour{
  position:fixed;
  top:clamp(1rem,2.4vh,1.75rem);
  left:var(--marge);
  z-index:10;
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.5rem 1.15rem .5rem .8rem;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  border:1px solid var(--hairline);
  border-radius:999px;
  color:var(--brun-fonce);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
}
.retour img{width:26px;height:26px;opacity:.9}
.retour__fleche{
  display:inline-block;
  transition:transform .5s var(--ease);
}
.retour:hover{background:var(--blanc);border-color:var(--brun);transform:translateX(-3px)}
.retour:hover .retour__fleche{transform:translateX(-4px)}
.retour:focus-visible{outline:2px solid var(--brun);outline-offset:3px}

@media (max-width:600px){
  .retour{padding:.42rem .95rem .42rem .65rem;gap:.55rem}
  .retour img{width:22px;height:22px}
  .retour span:last-child{display:none}
}

/* ---------- Contact flottant : accessible à tout moment au défilement ---------- */

.contact-flottant{
  position:fixed;
  right:var(--marge);
  bottom:clamp(1rem,2.4vh,1.75rem);
  z-index:10;
  display:flex;align-items:center;gap:.5rem;
}
.flottant{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  border:1px solid var(--hairline);
  border-radius:999px;
  color:var(--brun-fonce);
  box-shadow:0 2px 18px rgba(80,58,40,.10);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
}
.flottant:hover{background:var(--blanc);border-color:var(--brun);transform:translateY(-2px)}
.flottant:focus-visible{outline:2px solid var(--brun);outline-offset:3px}

.flottant--tel{width:44px;height:44px}
.flottant--tel svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.flottant--contact{padding:.62rem 1.4rem;gap:.6rem}

@media (max-width:600px){
  .flottant--tel{width:40px;height:40px}
  .flottant--contact{padding:.55rem 1.1rem}
}

/* ---------- Page interne ---------- */

.interne{
  min-height:100svh;
  padding:clamp(5.5rem,12vh,8rem) var(--marge) clamp(3rem,8vh,5rem);
  background:var(--creme);
}
.interne__inner{width:min(100%,72rem);margin:0 auto}
.interne__oeil{margin:0 0 clamp(.5rem,1.4vh,.9rem);display:flex;align-items:center;gap:.9rem;color:var(--brun-fonce)}
.interne__oeil::after{content:"";height:1px;flex:1;max-width:5rem;background:var(--hairline)}
.interne h1{
  margin:0 0 clamp(1.75rem,5vh,3rem);
  font-weight:300;
  font-size:clamp(1.8rem,1.3rem + 1.9vw,3.1rem);
  line-height:1.15;
}
.interne h1 em{font-style:italic;color:var(--brun)}

.fiche{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  padding:clamp(1.75rem,4vh,2.75rem) 0;
  border-top:1px solid var(--hairline);
  scroll-margin-top:6rem;
}
.fiche:last-child{border-bottom:1px solid var(--hairline)}
.fiche:nth-child(even) .fiche__visuel{order:-1}
.fiche h2{
  margin:0 0 .65rem;
  font-weight:300;
  font-size:clamp(1.3rem,1.05rem + 1vw,1.95rem);
  line-height:1.2;
}
.fiche p{margin:0;max-width:46ch;color:var(--encre-doux);line-height:1.65}
.fiche__visuel{
  opacity:1;
  position:relative;overflow:hidden;
  height:clamp(9rem,26vh,16rem);
  border-radius:12px;
  background-size:cover;background-position:center;
}
@media (max-width:800px){
  .fiche{grid-template-columns:1fr;gap:1.1rem}
  .fiche:nth-child(even) .fiche__visuel{order:0}
  .fiche__visuel{height:clamp(8rem,34vw,12rem)}
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  /* Deux parts de l'espace libre pour le hero, une pour la bande. Le hero
     centre son contenu ; la bande centre le sien aussi, depuis le
     22/10/2026 - voir « Respiration verticale de l'accueil » en fin de
     feuille, qui remplace l'ancien calage en haut. */
  flex:2 1 auto;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(4.25rem,8.5vh,6rem) var(--marge) var(--bas-hero);
  overflow:hidden;
}
.hero__inner{
  position:relative;z-index:2;
  width:min(100%,78rem);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.4rem,1vh,.8rem);
  text-align:center;
}
.hero .filet{height:clamp(8px,1.2vh,14px)}
.hero .signature{height:clamp(84px,20vh,216px)}
.hero .accroche{font-size:clamp(1.05rem,.9rem + .85vw,1.7rem)}

/* ---------- Les trois services (inchangés) ---------- */

.services{width:100%;margin-top:clamp(.25rem,.6vh,.55rem)}
.services .univers__titre{margin:0 0 clamp(.35rem,.7vh,.6rem)}

/* Étiquettes de section un cran au-dessus des autres petites capitales */
.services .univers__titre,
.bande__oeil{font-size:clamp(.82rem,.76rem + .29vw,1rem)}
.services .tuiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.7vw,1.5rem)}
.services .tuile{height:clamp(7.7rem,20.9vh,13.75rem)}

/* Pas de plaque : un dégradé diffus qui naît au-dessus du texte et se densifie
   jusqu'au pied de l'image. Identique au repos et au survol : il est fixe. */
.services .tuile__voile{
  background:linear-gradient(to bottom,
    rgba(40,28,20,0)    40%,
    rgba(40,28,20,.20)  56%,
    rgba(40,28,20,.46)  72%,
    rgba(40,28,20,.70)  86%,
    rgba(40,28,20,.90) 100%);
}
.services .tuile:hover .tuile__voile{
  background:linear-gradient(to bottom,
    rgba(40,28,20,0)    40%,
    rgba(40,28,20,.20)  56%,
    rgba(40,28,20,.46)  72%,
    rgba(40,28,20,.70)  86%,
    rgba(40,28,20,.90) 100%);
}
.services .tuile__nom{text-shadow:0 1px 14px rgba(28,19,13,.55), 0 0 30px rgba(28,19,13,.35)}

/* ---------- Bande Gestion locative ---------- */

.bande{
  flex:0 0 auto;
  background:var(--creme-2);
  border-top:1px solid rgba(162,126,93,.16);
  padding:clamp(.85rem,1.8vh,1.5rem) var(--marge);
}
.bande__grille{
  width:min(100%,78rem);margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:stretch;
}
.bande__texte{align-self:center}
.bande__oeil{
  margin:0 0 clamp(.4rem,1vh,.7rem);
  display:flex;align-items:center;gap:.9rem;
  color:var(--brun-fonce);
}
.bande__oeil::after{content:"";height:1px;flex:1;max-width:5rem;background:var(--hairline)}

.bande h2{
  margin:0 0 clamp(.45rem,1.3vh,.8rem);
  font-weight:300;
  font-size:clamp(1.35rem,1.05rem + 1.15vw,2.15rem);
  line-height:1.2;
  letter-spacing:-.005em;
}
.bande__p{
  margin:0 0 clamp(.8rem,2vh,1.3rem);
  max-width:44ch;
  color:var(--encre-doux);
  font-size:clamp(.9rem,.86rem + .22vw,1.02rem);
  line-height:1.6;
}
.btn--fleche{display:inline-flex;align-items:center;gap:.8rem}
.btn--fleche span{transition:transform .5s var(--ease)}
.btn--fleche:hover span{transform:translateX(4px)}

.bande__visuel{
  position:relative;overflow:hidden;
  align-self:stretch;
  min-height:clamp(7rem,17vh,12rem);
  border-radius:12px;
  isolation:isolate;
}
.bande__visuel .vue{
  border-radius:inherit;
  animation:diapo 15s linear infinite, objectif 15s linear infinite;
}
.bande__visuel .vue:nth-child(2){animation-delay:-5s}
.bande__visuel .vue:nth-child(3){animation-delay:-10s}
.bande__visuel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(162,126,93,.18);
  pointer-events:none;
}

/* ---------- Responsive ---------- */

@media (max-width:900px){
  .bande__grille{grid-template-columns:1fr;gap:1rem}
  .bande__visuel{height:clamp(6.5rem,15vh,10rem);align-self:auto;order:-1}
  .services .tuile{height:clamp(7.15rem,16.5vh,11rem)}
  .bande h2{font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
  .bande__p{font-size:.92rem;margin-bottom:.9rem}
}
@media (max-width:600px){
  .services .tuiles{gap:.6rem}
  .hero .signature{height:clamp(53px,11.5vh,106px)}
  .services .tuile{height:clamp(6.05rem,16.5vh,9.35rem)}
  .bande{padding:clamp(.85rem,2vh,1.4rem) var(--marge)}
  .bande__visuel{height:clamp(5.5rem,19vw,8.5rem)}
  .bande h2{font-size:clamp(1.1rem,.95rem + .8vw,1.45rem)}
  .bande__p{font-size:.86rem;line-height:1.5;margin-bottom:.75rem}
  .bande__grille{gap:.85rem}
}
@media (max-height:840px){
  .hero .signature{height:clamp(67px,14.9vh,161px)}
  .services .tuile{height:clamp(6.9rem,17.6vh,11.55rem)}
  .bande__visuel{min-height:clamp(6.25rem,16vh,10.5rem)}
  .bande{padding:clamp(.9rem,2.2vh,1.7rem) var(--marge)}
  .bande h2{font-size:clamp(1.2rem,.95rem + .85vw,1.7rem)}
  .bande__p{font-size:.93rem;margin-bottom:clamp(.7rem,1.8vh,1rem)}
}
@media (max-height:700px){
  .hero .signature{height:clamp(60px,13.2vh,126px)}
  .hero .accroche{font-size:clamp(.92rem,.82rem + .45vw,1.18rem)}
  .services .tuile{height:clamp(5.5rem,14.3vh,8.8rem)}
  .bande__visuel{min-height:clamp(5rem,13vh,8rem)}
  .bande h2{font-size:clamp(1.1rem,.9rem + .7vw,1.45rem)}
  .bande__p{font-size:.86rem;line-height:1.5;margin-bottom:.7rem}
  .bande__grille{gap:.8rem}
  .bande{padding:clamp(.75rem,1.8vh,1.3rem) var(--marge)}
  .services{margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .bande__visuel .vue:first-child{opacity:1}
}

/* Tablette : la bande passe dessous, il faut resserrer un peu pour rester sur un écran */
@media (min-width:601px) and (max-width:900px){
  .services .tuile{height:clamp(6rem,13.5vh,9rem)}
  .bande__visuel{height:clamp(6rem,13.5vh,9rem)}
  .bande__p{margin-bottom:.7rem}
  .bande__grille{gap:.8rem}
}

/* Contact flottant : mêmes dimensions, texte plus affirmé */
.flottant{color:var(--encre);font-weight:600;border-color:rgba(84,64,46,.42)}

/* ==================== v8.css ==================== */

/* Version 08 - la bande Gestion locative devient une image pleine largeur,
   le texte s'y intègre à gauche. Surcharge v7.css. */

.bande{
  position:relative;
  overflow:hidden;
  background:none;
  border-top:0;
  padding:0;
  isolation:isolate;
}

/* L'image occupe toute la bande, d'un bord à l'autre */
.bande__fond{position:absolute;inset:0;z-index:0}
.bande__fond .vue{border-radius:0}
.bande__fond .vue:nth-child(2){animation-delay:-5s}
.bande__fond .vue:nth-child(3){animation-delay:-10s}

/* Voile crème depuis la gauche : le texte se pose sans masquer la photo */
.bande__voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to right,
      rgba(250,247,243,.97) 0%,
      rgba(250,247,243,.93) 26%,
      rgba(250,247,243,.68) 46%,
      rgba(250,247,243,.28) 68%,
      rgba(250,247,243,.06) 88%,
      rgba(250,247,243,0) 100%),
    linear-gradient(to bottom,
      rgba(250,247,243,.30) 0%,
      rgba(250,247,243,0) 22%,
      rgba(250,247,243,0) 78%,
      rgba(250,247,243,.30) 100%);
}

.bande__grille{
  position:relative;z-index:2;
  display:block;
  width:min(100%,78rem);
  margin:0 auto;
  padding:clamp(1.1rem,2.45vh,1.95rem) var(--marge);
}
.bande__texte{
  align-self:auto;
  max-width:min(46%,30rem);
}
.bande__oeil::after{max-width:3.5rem}
.bande__p{max-width:38ch}

/* Le bouton n'a plus de fond uni derrière lui : on garde son voile translucide */
.bande .btn--fleche{
  background:rgba(255,255,255,.72);
  border-color:var(--brun-profond);
}

@media (max-width:900px){
  .bande__texte{max-width:none}
  .bande__voile{
    background:linear-gradient(to bottom,
      rgba(250,247,243,.20) 0%,
      rgba(250,247,243,.62) 30%,
      rgba(250,247,243,.93) 62%,
      rgba(250,247,243,.97) 100%);
  }
  .bande__grille{padding-top:clamp(5rem,16vh,8rem)}
}

/* ==================== v9.css ==================== */

/* Version 09 - la bande Gestion locative redevient un cadre, mais alignée
   exactement sur les trois services du dessus. Le voile crème s'arrête au tiers.
   Surcharge v7.css et v8.css. */

.bande{
  position:static;
  flex:1 1 auto;
  overflow:visible;
  background:var(--creme);
  border-top:0;
  /* Le blanc sous l'image reprend l'écart qui sépare les tuiles de services
     de cette même image : bas du hero plus haut de la bande. Les deux
     respirations sont ainsi égales, à toute hauteur d'écran. */
  padding:var(--haut-bande) var(--marge) calc(var(--bas-hero) + var(--haut-bande));
  isolation:auto;
}

/* Le cadre : même largeur que la rangée de services, mêmes bords */
.bande__cadre{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:min(100%,78rem);
  margin:0 auto;
  border-radius:12px;
  min-height:clamp(8rem,19vh,12.5rem);
  display:flex;
  align-items:center;
}
.bande__cadre::after{
  content:"";position:absolute;inset:0;z-index:3;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(162,126,93,.20);
  pointer-events:none;
}

.bande__fond{position:absolute;inset:0;z-index:0}
.bande__fond .vue{border-radius:0}

/* Voile crème : dense à gauche, terminé à 40 % de la largeur */
/* Le voile reprend exactement celui des bandes d'appel des pages
   intérieures : mêmes opacités, mêmes points d'arrêt. */
.bande__voile{
  position:absolute;inset:0;z-index:1;
  /* Le voile tient fort jusqu'à 32 % - le texte le plus long s'arrête à
     31 % sur une fenêtre étroite - puis tombe d'un coup. Avant, il
     mourait doucement jusqu'à 44 % et noyait le bord de l'enveloppe, qui
     commence à 41 %. Mesuré le 22/10/2026 : derrière la dernière lettre
     du texte, le contraste reste de 6,7:1 au pire. */
  background:linear-gradient(to right,
    rgba(250,247,243,.97)  0%,
    rgba(250,247,243,.95) 22%,
    rgba(250,247,243,.86) 32%,
    rgba(250,247,243,.42) 36%,
    rgba(250,247,243,0)   40%);
}

.bande__grille{
  position:relative;z-index:2;
  display:block;
  width:100%;
  margin:0;
  padding:clamp(.8rem,1.7vh,1.35rem) clamp(1.25rem,2.6vw,2.5rem);
}
.bande__texte{
  align-self:auto;
  max-width:min(38%,26rem);
}
.bande__oeil::after{max-width:2.5rem}
.bande__oeil{margin-bottom:clamp(.3rem,.8vh,.55rem)}
.bande h2{margin-bottom:clamp(.35rem,1vh,.6rem)}
.bande__p{margin-bottom:clamp(.6rem,1.5vh,1rem)}
.bande__p{max-width:34ch}

.bande .btn--fleche{
  background:rgba(255,255,255,.74);
  border-color:var(--brun-profond);
}

@media (max-width:900px){
  .bande__cadre{min-height:0;display:block}
  .bande__texte{max-width:none}
  .bande__voile{
    background:linear-gradient(to bottom,
      rgba(250,247,243,.22)  0%,
      rgba(250,247,243,.66) 32%,
      rgba(250,247,243,.94) 66%,
      rgba(250,247,243,.97) 100%);
  }
  /* Sur téléphone la photo passe derrière le texte, et le haut du voile
     est volontairement léger pour qu'on la voie. Mesuré le 22/10/2026 :
     40 % des pixels y sont sombres (l'ombre du rameau d'olivier), et
     l'intitulé en brun n'y tenait que 2,3:1. En encre il tient 6,3:1,
     sans qu'il faille épaissir le voile et effacer la photo. */
  .bande__oeil{color:var(--encre)}
  .bande__grille{padding-top:clamp(4.5rem,15vh,7rem)}
}

/* La signature renvoie à l'accueil */
.signature-lien{display:block;line-height:0;transition:opacity .5s var(--ease)}
.signature-lien:hover{opacity:.82}
.signature-lien:focus-visible{outline:2px solid var(--brun);outline-offset:8px;border-radius:4px}


/* ==================== v10.css ==================== */

/* Version 10 - l'accroche tient sur une seule ligne, la signature grandit d'autant.
   Surcharge summit.css. */

.hero .accroche{max-width:none}

/* Au-dessus de 820 px, l'accroche tient sur une ligne : la hauteur libérée
   profite à la signature. En dessous elle se replie, on ne change donc rien. */
@media (min-width:820px){
  .hero .accroche{white-space:nowrap}
  .hero .signature{height:clamp(84px,23.5vh,250px)}
}
@media (min-width:820px) and (max-height:840px){
  .hero .signature{height:clamp(70px,19.5vh,190px)}
}
@media (min-width:820px) and (max-height:700px){
  .hero .signature{height:clamp(60px,16.5vh,150px)}
}

/* Égalisation des espaces du bloc de tête.
   L'image de la signature porte 5 % de vide transparent sous le dernier trait :
   on le reprend, et on retire le filet qui creusait l'écart. */
.hero .filet{display:none}
.hero .signature{margin-bottom:-2px}
.actions-hero{margin-top:9px}

/* Bande Gestion locative : tous les textes ramenés à 16 px */
.bande__oeil{font-size:16px}
.bande h2{font-size:16px;line-height:1.35}
.bande__p{font-size:16px}
.bande .btn--fleche{
  font-size:13px;
  letter-spacing:.14em;
  font-weight:500;
  padding:.48rem 1.15rem;
}

/* Ajustements de tailles et de graisses */
.hero .accroche{font-size:26px}
.btn--hero,
.actions-hero .tel{font-size:12px}

/* Intitulés de section : 18 px, graisse normale */
.services .univers__titre,
.bande__oeil{font-size:18px;font-weight:400}

/* Les noms de services : 18 px, graisse normale */
.tuile__nom{font-size:18px;font-weight:400}

/* Plus de liseré autour du cadre de la gestion locative */
.bande__cadre::after{display:none}


/* ==================== corrections et finitions ==================== */

/* 1. Très petits écrans (360 x 640) : l'accueil débordait de 82 px.
      On resserre signature, tuiles et bande pour rester sur un seul écran. */
@media (max-width:420px) and (max-height:700px){
  .hero{padding-top:clamp(.6rem,1.6vh,1rem)!important}
  .hero__inner{gap:clamp(.3rem,.9vh,.6rem)}
  .hero .signature{height:clamp(40px,9vh,72px)}
  .hero .accroche{font-size:clamp(.86rem,.8rem + .4vw,1rem)}
  .services{margin-top:.2rem}
  .services .univers__titre{font-size:13px;margin-bottom:.3rem}
  .services .tuile{height:clamp(4.75rem,13.5vh,7rem)}
  .tuile__nom{font-size:13px}
  .page-v6{--bas-hero:.5rem;--haut-bande:.45rem}
  .bande__grille{padding:.75rem 1rem}
  .bande__oeil{font-size:13px;margin-bottom:.25rem}
  .bande h2{font-size:14px;margin-bottom:.3rem}
  .bande__p{font-size:13px;line-height:1.45;margin-bottom:.55rem}
  .bande .btn--fleche{font-size:11px;padding:.4rem .9rem}
  .bande__cadre{min-height:0}
}

/* 2. Cibles tactiles : 44 px minimum au doigt (recommandation WCAG).
      Les boutons frôlaient 38 px, les liens de pied de page 18 px. */
@media (pointer:coarse){
  .btn,.btn--hero,.actions-hero .tel,.flottant--contact,.form button{
    min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .flottant--tel{width:44px;height:44px}
  .retour{min-height:44px}
  /* 44 px au doigt, hauteur de la zone cliquable comprise. Les liens du
     pied de page plafonnaient à 28-35 px : le texte reste de la même
     taille, c'est la zone tactile qui s'agrandit. */
  .pied ul a,.enfilade a,.plan__bloc a{
    display:inline-flex;align-items:center;
    min-height:44px;
  }
  .pied__marque{min-height:44px;min-width:44px;align-items:center;justify-content:center}
  .pied ul{gap:0}
  /* Mesuré le 21/10/2026 sur un écran de 375 px : ces liens-là ne
     faisaient que 19 à 26 px de haut, sous le minimum de 24 px exigé
     pour une cible tactile isolée. */
  .lien-fiche,.fiche h2 a,.plan__xml a,.zone--texte,.legal__ligne a{
    display:inline-flex;align-items:center;min-height:44px;
  }
}

/* 3. Confort de lecture et détails d'interface */
::selection{background:var(--beige);color:var(--encre)}
:focus-visible{outline:2px solid var(--brun);outline-offset:3px;border-radius:2px}
img{-webkit-user-drag:none}
.tuile,.flottant,.btn,.retour{-webkit-tap-highlight-color:rgba(162,126,93,.15)}

/* 4. Le défilement latéral ne doit jamais apparaître par accident */
html,body{overflow-x:hidden}


/* Images allégées pour les petits écrans */
@media (max-width:820px){
  .v-salon,.v-salon-b,.hub__fond{background-image:url("../assets/img/salon-800.jpg?v=1b4f9305")}
  .v-salonext,.v-salonext-b{background-image:url("../assets/img/salon-exterieur-800.jpg?v=1ad998cf")}
  .v-piscine,.v-piscine-b{background-image:url("../assets/img/piscine-800.jpg?v=6846cf8a")}
  .v-terrasse{background-image:url("../assets/img/terrasse-800.jpg?v=a3aebda5")}
}

/* Lien d'évitement : invisible jusqu'à la tabulation */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:.7rem 1.2rem;
  background:var(--brun-profond);color:var(--blanc);
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  border-radius:0 0 6px 0;
}
.evitement:focus{left:0}

/* Sur mobile, « NOS SERVICES PRESTIGE » passait sur deux lignes */
@media (max-width:600px){
  .services .univers__titre,
  .bande__oeil{font-size:14px}
  .tuile__nom{font-size:16px}
  .page-v6{--haut-bande:.6rem}
  .bande__grille{padding-top:.9rem;padding-bottom:.9rem}
  .bande__p{margin-bottom:.7rem}
}

/* Très petits téléphones (320 px) : le titre passait sur deux lignes */
@media (max-width:340px){
  .services .univers__titre,
  .bande__oeil{font-size:12px;letter-spacing:.22em}
  .tuile__nom{font-size:14px}
  .hero .accroche{font-size:15px}
  .bande h2{font-size:13px}
  .bande__p{font-size:12px;line-height:1.45}
}

/* Fond de secours : pendant le décodage d'une image, on voit du beige, jamais du noir */
.bande__cadre,.tuile,.fiche__visuel,.bande__visuel,.hub__fond{background-color:var(--creme-2)}
.vue{background-color:var(--creme-2)}

/* La bande locative utilise des visuels panoramiques dédiés.
   L'image carrée d'origine était trois fois trop lourde pour une bande de 250 px
   de haut, et son décodage provoquait un bref aplat noir au chargement. */
.bande__cadre{isolation:auto;min-height:clamp(9rem,22vh,13rem)}
.bande__fond .vue{
  background-position:center;
  background-size:cover;
}
/* La bande de l'accueil reprend l'enveloppe des bandes d'appel du site.
   Une seule vue : plus de diaporama, donc pas d'animation à caler. */
.bande__fond .v-enveloppe{
  background-image:url("../assets/img/bande-commune.jpg?v=80d803c6");
  /* Même cadrage que les bandes d'appel des pages intérieures : l'image
     remplit le cadre, centrée. La bande de l'accueil étant plus large,
     elle est un peu plus haute pour que la scène reste entière. */
  /* Le cadre ne montre que 40 % de la hauteur de la photo : on descend
     la fenêtre pour qu'elle tombe sur le corps de l'enveloppe et le
     cachet, plutôt que sur le marbre du haut. */
  background-position:center 57%;
  background-size:cover;
  /* L'enveloppe est crème sur un marbre crème : sans ce léger coup de
     contraste, elle se confond avec le fond et on ne voit plus le
     courrier. Rien n'est inventé, le relief existant ressort. */
  filter:contrast(1.12) saturate(1.15) brightness(.98);
  animation:none;
  opacity:1;
}

.bande__fond .v-piscine{
  background-image:url("../assets/img/piscine-bande-1440.jpg?v=9a47c6ca");
  
  
}
.bande__fond .v-terrasse{
  background-image:url("../assets/img/terrasse-bande-1440.jpg?v=495c574d");
  
  
}
.bande__fond .v-salon{
  background-image:url("../assets/img/salon-bande-1440.jpg?v=78239942");
  
  
}
@media (max-width:820px){
  .bande__fond .v-piscine{
    background-image:url("../assets/img/piscine-bande-800.jpg?v=51839c2d");
    
  }
  .bande__fond .v-terrasse{
    background-image:url("../assets/img/terrasse-bande-800.jpg?v=0b80350d");
    
  }
  .bande__fond .v-salon{
    background-image:url("../assets/img/salon-bande-800.jpg?v=5bdb9014");
    
  }
}

/* Le mouvement d'objectif sur la bande créait une couche composite lourde,
   qui pouvait s'afficher en noir le temps du rendu. Le fondu suffit. */
/* Une seule image dans la bande : ni diaporama, ni zoom. */
.bande__fond .vue{animation:none;opacity:1}
.bande__fond .vue:nth-child(2){animation-delay:-5s}
.bande__fond .vue:nth-child(3){animation-delay:-10s}

/* Les tuiles ne dépassent jamais 430 px de large : la version 800 px suffit,
   même sur écran Retina. Inutile d'y charger des images de 1440 px. */
.tuile .v-salon,.tuile .v-salon-b{background-image:url("../assets/img/salon-800.jpg?v=1b4f9305")}
.tuile .v-salonext,.tuile .v-salonext-b{background-image:url("../assets/img/salon-exterieur-800.jpg?v=1ad998cf")}
.tuile .v-piscine,.tuile .v-piscine-b{background-image:url("../assets/img/piscine-800.jpg?v=6846cf8a")}
.tuile .v-terrasse{background-image:url("../assets/img/terrasse-800.jpg?v=a3aebda5")}

/* ==================== La bande Gestion locative sur téléphone ====================
   Le client ne voyait plus le courrier. Mesuré le 22/10/2026 : sous 900 px, le
   texte prenait 94 % de la largeur du cadre et le voile passait en dégradé
   vertical, qui atteignait .86 juste sur le cachet de cire - son rouge y
   devenait rgb(239,230,225), c'est-à-dire du crème. Pire, ce voile dégageait
   le haut de la photo, qui n'est que du marbre vide, et recouvrait le bas, où
   se trouvent l'enveloppe et le cachet.

   On reprend donc la mise en page de l'ordinateur, comme demandé : texte plus
   petit, calé à gauche sur une colonne étroite, voile latéral qui s'arrête
   avant l'enveloppe. La hauteur du cadre ne bouge pas - l'accueil tient sur un
   seul écran à toutes les largeurs, du 320 au 1920. */
@media (max-width:900px){
  /* Le cadre redevient une boîte flexible : la colonne de texte est centrée
     en hauteur au lieu d'être poussée vers le bas sur la photo. */
  .bande__cadre{display:flex;align-items:center}
  .bande__grille{padding:clamp(.75rem,2.2vh,1.25rem) clamp(1rem,3.4vw,1.6rem)}
  .bande__texte{max-width:46%}
  .bande__p{max-width:28ch}

  /* Voile latéral : dense sous le texte, éteint avant le bord de l'enveloppe.
     La descente s'étale du côté du texte, de 20 à 52 % au lieu de tomber
     d'un coup entre 44 et 52 : le passage du crème à la photo se fait en
     fondu, sans la ligne nette qu'on voyait avant. Le point d'extinction,
     lui, ne bouge pas : on n'empiète pas davantage sur l'image. */
  .bande__voile{
    background:linear-gradient(to right,
      rgba(250,247,243,.97)  0%,
      rgba(250,247,243,.96) 20%,
      rgba(250,247,243,.92) 32%,
      rgba(250,247,243,.82) 40%,
      rgba(250,247,243,.60) 46%,
      rgba(250,247,243,.30) 49%,
      rgba(250,247,243,0)   52%);
  }

  /* L'intitulé retrouve le brun foncé de l'ordinateur : il repose désormais
     sur la partie dense du voile, où il tient 6,1:1. */
  .bande__oeil{color:var(--brun-fonce)}

  /* Texte réduit, pour laisser la place à la photo. */
  .bande h2{font-size:15px;line-height:1.3;margin-bottom:.35rem}
  .bande__p{font-size:14px;line-height:1.5;margin-bottom:.6rem}
}

@media (max-width:620px){
  .bande__texte{max-width:54%}
  .bande__p{max-width:24ch}
  .bande__voile{
    background:linear-gradient(to right,
      rgba(250,247,243,.97)  0%,
      rgba(250,247,243,.96) 26%,
      rgba(250,247,243,.92) 38%,
      rgba(250,247,243,.82) 46%,
      rgba(250,247,243,.60) 53%,
      rgba(250,247,243,.30) 57%,
      rgba(250,247,243,0)   60%);
  }
}

@media (max-width:480px){
  .bande__texte{max-width:58%}
  .bande__p{max-width:22ch}
  .bande__voile{
    background:linear-gradient(to right,
      rgba(250,247,243,.97)  0%,
      rgba(250,247,243,.96) 26%,
      rgba(250,247,243,.92) 37%,
      rgba(250,247,243,.82) 45%,
      rgba(250,247,243,.60) 51%,
      rgba(250,247,243,.30) 56%,
      rgba(250,247,243,0)   60%);
  }
  /* La fenêtre glisse encore un peu vers la droite de la photo : on y gagne
     du stylo plume, qui occupe le dernier quart de l'image. */
  .bande__fond .v-enveloppe{background-position:65% 50%}
  .bande__oeil{font-size:12px;letter-spacing:.2em;gap:.5rem;margin-bottom:.3rem}
  .bande__oeil::after{max-width:1.5rem}
  .bande h2{font-size:14px;margin-bottom:.3rem}
  .bande__p{font-size:12.5px;line-height:1.45;margin-bottom:.5rem}
  .bande .btn--fleche{font-size:11px;letter-spacing:.12em;padding:.42rem .95rem}
}

/* Sur les très petits écrans, le cadre devient presque carré : la photo y
   déborde de 241 px au lieu de 128, si bien qu'un même pourcentage la
   déplace deux fois plus. À 98 % le cachet de cire passait derrière le
   texte et disparaissait ; à 53 % il revient à 70 % de la largeur, au
   clair. Vérifié à 320 et à 360 px. */
@media (max-width:360px){
  .bande__fond .v-enveloppe{background-position:56% 50%}
}

/* ---------- Les chiffres ----------
   Cormorant Garamond livre par défaut des chiffres dits anciens, hérités
   des Garamond du XVIe siècle : le 1 et le 0 montent à la hauteur d'un x,
   le 6 et le 8 dépassent la hauteur des capitales, le 3, le 4, le 5, le 7
   et le 9 descendent sous la ligne. Mesuré sur un corps de 100 px : le 1
   fait 39 px de haut, le 6 en fait 66 - plus qu'une capitale, qui en fait
   63. C'est voulu par le dessinateur de la police, et très bien dans un
   paragraphe ; dans un numéro de téléphone, les chiffres dansent.
   La police contient aussi le jeu aligné : on le demande partout, et on
   ajoute la chasse fixe là où des chiffres doivent s'aligner entre eux. */
body{font-variant-numeric:lining-nums}
.tel,.tel__num,.voie__valeur,.flottant--tel,.legal__ligne,.etape__num{
  font-variant-numeric:lining-nums tabular-nums;
}

/* ---------- Respiration verticale de l'accueil ----------
   Deux défauts relevés par Ahmet sur son téléphone, mesurés sur un écran
   de 430 x 932 px :
   - le libellé « Nos services prestige » n'avait que 15 px au-dessus de
     lui, collé aux deux boutons, alors que 89 px dormaient sous les
     tuiles ;
   - le cadre de la bande était calé en haut de sa section, 10 px au-dessus
     et 98 px en dessous.
   On déplace de l'espace, on n'en ajoute pas : l'accueil doit continuer à
   tenir sur un seul écran. */
.services{margin-top:clamp(1.3rem,3.2vh,2.4rem)}
/* Le cadre est centré dans la bande. Le remplissage du bas portait en plus
   la valeur qui séparait le hero des tuiles : il décalait le centre vers le
   haut. On le rend symétrique, le centrage devient exact. */
.bande{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--haut-bande) var(--marge);
}

/* ---------- Un seul rythme vertical pour l'accueil ----------
   Mesuré le 22/10/2026 sur un écran de 430 x 932 : 134 px séparaient la
   rangée de tuiles du cadre de la bande, et seulement 46 px séparaient ce
   cadre du pied de page. Le vide venait du hero, qui prenait deux parts de
   l'espace libre sur trois et en laissait la moitié sous ses tuiles.

   Désormais le hero ne prend que la place de son contenu, la bande reçoit
   tout l'espace libre, et c'est l'image qui le consomme en grandissant.
   Les deux respirations qui encadrent la bande valent la même chose, par
   construction, à toute hauteur d'écran. */
/* --bas-hero ne servait plus qu'au remplissage bas du hero, posé ailleurs
   avec un !important. On le met à zéro plutôt que de surenchérir : la
   respiration sous les tuiles vient maintenant de la bande, et d'elle
   seule, pour qu'elle égale celle du dessous. */
.page-v6{--respiration:clamp(1.5rem,3.4vh,2.6rem);--bas-hero:0px}
/* Le hero garde sa part de l'espace libre, mais la pose au-dessus de son
   contenu au lieu de la partager : plus rien ne dort sous les tuiles. */
.hero{align-items:flex-end}
/* La bande garde la sienne et la partage également autour de l'image, qui
   conserve sa hauteur. Les deux respirations qui l'encadrent sont donc
   égales par construction, quelle que soit la hauteur d'écran. */
.bande{padding:var(--respiration) var(--marge)}