/* ==========================================================
   KEYA GROUP SAMUI
   Palette éclaircie — les images doivent rester lisibles.
   ========================================================== */
:root{
  --ink:#0B0908;
  --ink-2:#16120C;
  --ink-3:#1E1811;
  --ocean:#0A2733;
  --ocean-2:#061А22;
  --gold:#D4AF37;
  --gold-lt:#F2DDA4;
  --gold-dp:#A0801F;
  --cream:#F5F0E7;
  --muted:#B6AB9B;
  --line:rgba(212,175,55,.32);
  --line-soft:rgba(245,240,231,.16);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,5vw,80px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);
  font-weight:300;font-size:16px;line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* L'attribut hidden doit gagner : sans cette règle, tout élément ayant
   une propriété display déclarée (les .btn, par exemple) reste visible
   malgré hidden — la règle du navigateur a la même force et perd. */
[hidden]{display:none!important}

/* ---------- typo ---------- */
.display{font-family:var(--serif);font-weight:300;line-height:1.08;letter-spacing:.005em}
h1.display{font-size:clamp(2.9rem,7.2vw,6rem)}
h2.display{font-size:clamp(2.1rem,4.4vw,3.7rem)}
h3.display{font-size:clamp(1.45rem,2.4vw,2rem)}
.gold-text{background:linear-gradient(96deg,#A0801F 0%,#D4AF37 22%,#FBEEC4 48%,#D4AF37 72%,#A0801F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;font-weight:500;
  color:var(--gold);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow.centered{justify-content:center}
.eyebrow.centered::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.lede{font-size:clamp(1.02rem,1.2vw,1.16rem);color:var(--muted);max-width:64ch;line-height:1.82}
.note{font-size:.88rem;color:var(--muted);line-height:1.75}

/* ---------- layout ---------- */
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:1060px;margin:0 auto;padding-inline:var(--pad)}
.pad-y{padding-block:clamp(70px,9vw,140px)}
.stack>*+*{margin-top:20px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding-block:18px;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),backdrop-filter .45s,border-color .45s,padding .45s var(--ease)}
header.solid{background:rgba(11,9,8,.92);backdrop-filter:blur(18px);
  border-bottom-color:var(--line-soft);padding-block:11px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:40px;height:40px;flex-shrink:0}
.brand-txt b{display:block;font-family:var(--serif);font-weight:500;font-size:1.16rem;letter-spacing:.11em;line-height:1}
.brand-txt span{display:block;font-size:.53rem;letter-spacing:.46em;color:var(--gold);margin-top:4px}
.menu{display:flex;align-items:center;gap:clamp(15px,1.9vw,30px)}
.menu a{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  color:rgba(245,240,231,.82);position:relative;padding-block:6px;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .38s var(--ease)}
.menu a:hover,.menu a.on{color:var(--cream)}
.menu a.on::after,.menu a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
/* Le sélecteur est plus précis que .btn, sinon la règle display de .btn,
   définie plus bas, réafficherait le bouton sur grand écran. */
.menu a.menu-cta{display:none}
.lang{display:flex;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.14em}
/* Les deux langues sont deux jeux de pages : le sélecteur est fait de
   vrais liens, pas de boutons. Les deux sélecteurs sont conservés pour
   que le style tienne dans les deux cas. */
.lang button,.lang a{color:var(--muted);transition:color .3s;padding:4px 2px}
.lang button.on,.lang a.on{color:var(--gold);font-weight:500}
.lang i{color:var(--line);font-style:normal}
.burger{display:none;width:26px;height:14px;position:relative}
.burger i{position:absolute;left:0;width:100%;height:1px;background:var(--cream);transition:transform .4s var(--ease),opacity .3s}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:50%}.burger i:nth-child(3){bottom:0}
body.menu-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:.73rem;letter-spacing:.19em;text-transform:uppercase;font-weight:500;
  padding:14px 28px;border:1px solid var(--gold);color:var(--gold);
  position:relative;overflow:hidden;transition:color .42s var(--ease);white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateY(101%);transition:transform .42s var(--ease);z-index:0}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn>span{position:relative;z-index:1}
.btn.filled{background:var(--gold);color:#160F02;border-color:var(--gold);font-weight:600}
.btn.filled::before{background:var(--gold-lt)}
.btn.ghost{border-color:rgba(245,240,231,.3);color:var(--cream)}
.btn.ghost::before{background:var(--cream)}
.btn.ghost:hover{color:var(--ink)}

/* ---------- views ---------- */
.view{display:none;animation:fadeUp .6s var(--ease)}
.view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;
  overflow:hidden;text-align:center;padding:120px var(--pad) 90px}
.hero-bg{position:absolute;inset:0;z-index:0}

@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.14)}}
/* Voile volontairement léger : on doit voir la villa et la piscine. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 94% 76% at 50% 46%,rgba(11,9,8,0) 0%,rgba(11,9,8,.24) 64%,rgba(11,9,8,.70) 100%),
             linear-gradient(180deg,rgba(11,9,8,.62) 0%,rgba(11,9,8,0) 34%,rgba(11,9,8,.66) 100%)}
.hero-inner,.mh-in{position:relative;z-index:2;max-width:960px}
/* Scrim doux derrière le texte : garde le titre lisible même sur une
   image claire, sans assombrir toute la photo. */
.hero-inner::before,.mh-in::before{content:"";position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:135%;height:190%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(8,6,4,.74) 0%,rgba(8,6,4,.46) 44%,rgba(8,6,4,0) 72%)}
.hero-mark{width:clamp(210px,26vw,330px);margin:0 auto clamp(18px,2.4vw,28px);
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.75))}
.hero-mark img{width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero h1{margin-bottom:20px;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.hero .baseline{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.2rem,2.2vw,1.85rem);color:var(--gold-lt);margin-bottom:16px;
  text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hero .sub{font-size:.76rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(245,240,231,.88);font-weight:400;text-shadow:0 2px 18px rgba(0,0,0,.8)}
.hero .sub em{font-style:normal;color:var(--gold);padding-inline:9px}
/* Phrase qui explique la promesse, sous les trois mots. Volontairement
   en corps courant : la baseline porte l'idée, celle-ci la traduit. */
.hero .hero-sub{font-size:clamp(.86rem,1.5vw,1rem);color:rgba(245,240,231,.9);
  max-width:46ch;margin:2px auto 0;line-height:1.7;
  text-shadow:0 2px 20px rgba(0,0,0,.85)}

/* Bande de promesse, sous la bannière d'accueil. Uniquement à partir de
   761 px : en dessous, le héro affiche déjà ces mots en clair. */
.claim{display:none}
@media(min-width:761px){
  .claim{display:block;padding-block:clamp(46px,5.5vw,78px);text-align:center;
    border-bottom:1px solid var(--line-soft)}
  .claim-l{font-family:var(--serif);font-style:italic;font-weight:300;
    font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.15;
    background:linear-gradient(96deg,#A0801F 0%,#D4AF37 22%,#FBEEC4 48%,#D4AF37 72%,#A0801F 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .claim-w{margin-top:18px;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
    color:var(--cream);display:flex;justify-content:center;align-items:center;gap:16px}
  .claim-w i{color:var(--gold);font-style:normal}
  .claim-w em{font-style:normal}
  .claim-d{margin:20px auto 0;max-width:56ch;font-size:.95rem;color:var(--muted);line-height:1.75}
}

/* ---------- bannière d'accueil ----------
   Le visuel fourni porte déjà le logo, le nom et la baseline en dur.
   Sur grand écran on l'affiche tel quel et le bloc titre passe en
   lecture seule (présent pour Google et les lecteurs d'écran, invisible
   à l'œil) : rien n'est écrit deux fois.
   Sous 760 px le visuel horizontal deviendrait illisible — on bascule
   sur un cadrage vertical sans texte incrusté, et le bloc titre reprend
   la main en HTML : net à toutes les tailles et traduisible FR/EN. */
.hero-banner img{opacity:1;animation:none}
.hero-banner::after{background:
  radial-gradient(ellipse 90% 80% at 50% 50%,rgba(11,9,8,0) 0%,rgba(11,9,8,.10) 62%,rgba(11,9,8,.52) 100%),
  linear-gradient(180deg,rgba(11,9,8,.34) 0%,rgba(11,9,8,0) 26%,rgba(11,9,8,0) 62%,rgba(11,9,8,.72) 100%)}
@media(min-width:761px){
  /* hauteur calée sur le format du visuel : on en voit la quasi-totalité
     sans le recadrer sauvagement, tout en gardant un héro plein écran. */
  /* 41.6vw = le format exact du visuel (1983/793) : à n'importe quelle
     largeur la bannière tient entière, sans recadrage. */
  /* Héro plein écran, mais la bannière n'est pas recadrée : elle est posée
     en entier (contain), centrée, avec du noir au-dessus et en dessous.
     Ses bords sont déjà sombres, un fondu les fait fondre dans le fond —
     on ne voit pas de bande, juste de l'air autour du visuel. */
  .hero{min-height:100svh;padding-block:0}
  .hero-banner img{object-fit:contain!important;object-position:center 47%;transform:none!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 93%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 93%,transparent 100%)}
  /* le visuel ne touche plus le bas du cadre : l'indicateur de défilement
     retrouve sa place et sépare le héro du bloc suivant. */
  .hero-banner ~ .scroll-cue{display:flex}
  .hero-inner{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
}
.hero h1 small{display:block;font-size:.30em;letter-spacing:.52em;
  margin-top:10px;padding-left:.52em;color:var(--gold-lt);font-weight:400}
.hero-acts{list-style:none;display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(14px,5vw,30px);margin:22px 0 20px;padding:0}
.hero-acts li{flex:1 1 0;max-width:110px;display:flex;flex-direction:column;
  align-items:center;gap:9px;color:var(--gold);
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;line-height:1.35}
.hero-acts li span{color:rgba(245,240,231,.9);text-shadow:0 2px 14px rgba(0,0,0,.85)}
.hero-acts svg{width:clamp(34px,10vw,46px);height:auto;aspect-ratio:80/62;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.8))}
.hero-acts li+li{position:relative}
.hero-acts li+li::before{content:"";position:absolute;left:calc(-1 * clamp(7px,2.5vw,15px));
  top:6px;bottom:14px;width:1px;background:linear-gradient(180deg,transparent,rgba(212,175,55,.42),transparent)}
@media(max-width:760px){
  .hero-mark{width:clamp(96px,27vw,150px);margin-bottom:16px}
  .hero h1{font-size:clamp(2.2rem,11vw,3.2rem);margin-bottom:0}
}
.scroll-cue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,231,.7)}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--gold),transparent);
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- routeur ---------- */
/* Quatre univers depuis que « Ride » a rejoint l'accueil : deux par
   deux sur écran moyen, empilés sur téléphone (règle plus bas). */
.router{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  background:var(--line-soft);border-block:1px solid var(--line-soft)}
.rc{position:relative;isolation:isolate;background:var(--ink);cursor:pointer;text-align:center;
  padding:clamp(230px,24vw,320px) clamp(22px,2.6vw,42px) clamp(34px,3.6vw,52px);
  overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
/* Le cadre des cartes suivait la marge haute, donc la largeur de
   l'écran : à quatre colonnes il devenait deux fois plus haut que large
   et les photos y étaient réduites à une bande verticale. On lui impose
   désormais le format des images elles-mêmes (5:6) : quelle que soit la
   largeur, le rognage reste marginal. La hauteur minimale garde le texte
   au large si le cadre devient très étroit. */
@media(min-width:881px){
  /* 3:4 plutôt que le 5:6 des photos : à format strictement égal, la
     carte devenait si courte que le texte occupait la moitié du cadre et
     que le pictogramme touchait le titre. Ce léger surplus de hauteur
     rend l'image respirable et ne rogne qu'un dixième de sa largeur. */
  /* La hauteur minimale ne doit jamais dépasser celle que donne le
     format : sinon le navigateur la reporte sur la largeur (470 × 3/4 =
     352 px), la grille refuse de comprimer la carte, et les quatre
     cartes dépassaient la fenêtre entre 1150 et 1400 px — un MacBook 13
     pouces avait une barre de défilement horizontale sur l'accueil.
     33vw reste juste en dessous de la hauteur naturelle de la carte à
     ces largeurs, le plancher de 470 px ne s'applique donc que sur les
     très grands écrans. min-width:0 lève au passage la largeur
     minimale que la grille hérite du contenu. */
  .rc{aspect-ratio:3/4;min-height:min(470px,33vw);min-width:0;
      padding-top:clamp(40px,5vw,90px)}
}
.rc-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* opacité haute : l'image doit se voir, pas se deviner */
/* V4 — la photographie porte la carte : plus de voile général,
   seulement un dégradé confiné au bas, derrière le texte. */
.rc-bg img{width:100%;height:100%;object-fit:cover;opacity:1;transform:scale(1.02);
  transition:transform 1.2s var(--ease),filter .7s var(--ease);filter:saturate(1.04)}
.rc:hover .rc-bg img{transform:scale(1.09);filter:saturate(1.1) brightness(1.05)}
.rc-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,9,8,.06) 0%,rgba(11,9,8,.10) 34%,
             rgba(11,9,8,.62) 68%,rgba(11,9,8,.92) 100%)}
.rc-ico{width:58px;height:46px;margin:0 auto 20px;position:relative;z-index:1;transition:transform .6s var(--ease);
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.85))}
.rc:hover .rc-ico{transform:translateY(-5px)}
.rc-ico svg{width:100%;height:100%;overflow:visible}
.rc h3{position:relative;z-index:1;margin-bottom:12px;text-shadow:0 2px 22px rgba(0,0,0,.95),0 1px 5px rgba(0,0,0,.85)}
.rc p{position:relative;z-index:1;color:rgba(245,240,231,.9);font-size:.92rem;margin-bottom:22px;min-height:3.4em;
  text-shadow:0 1px 16px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.8)}
.rc-go{position:relative;z-index:1;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:10px}
.rc-go i{display:block;width:20px;height:1px;background:var(--gold);transition:width .42s var(--ease)}
.rc:hover .rc-go i{width:38px}

/* ---------- trust ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line-soft);background:var(--ink-2)}
.trust div{padding:clamp(26px,3vw,42px) 18px;text-align:center;border-left:1px solid var(--line-soft)}
.trust div:first-child{border-left:0}
.trust b{display:block;font-family:var(--serif);font-size:clamp(1.8rem,2.7vw,2.5rem);font-weight:400;margin-bottom:5px}
.trust span{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---------- page head ---------- */
.phead{padding:clamp(140px,15vw,200px) 0 clamp(44px,5vw,72px);position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1200px,92vw);height:420px;
  background:radial-gradient(ellipse at top,rgba(212,175,55,.14),transparent 68%);pointer-events:none}

/* ---------- hero média (page interne) ---------- */
.media-hero{position:relative;min-height:84svh;display:grid;place-items:center;
  overflow:hidden;text-align:center;padding:130px var(--pad) 80px}
@media(max-width:820px){
  /* La vidéo mobile est en 9:16 : on donne à la bannière la même
     proportion pour qu'elle s'affiche en entier, sans recadrage du navigateur. */
  .media-hero{min-height:100svh;padding:104px var(--pad) 60px}
  .mh-bg video{object-fit:cover}
  .mh-in{padding-block:8px}
}
@media(max-width:640px){
  /* Les photos de l'hôtel sont horizontales. Les forcer dans un cadre
     vertical plein écran revenait à n'en montrer qu'une bande étroite :
     un bout de mur, un coin de lit. On arrête de les découper.
     La photo devient un bandeau 4:3 en haut du héro — on en voit 75 à
     100 % selon la source — et le titre passe dessous.
     Bénéfice au passage : 1200 px de fichier pour 1170 px d'écran, donc
     plus d'agrandissement, et le zoom lent est coupé. */
  /* Les sections respirent moins : à 70 px de marge haute et basse sur
     douze sections, on ajoutait un écran et demi de vide pur. */
  .pad-y{padding-block:clamp(46px,8vw,70px)}
  .media-hero{min-height:0!important;display:flex!important;flex-direction:column;
    place-items:stretch;padding:76px 0 clamp(34px,7vw,52px)!important;text-align:center}
  .mh-bg{position:relative!important;inset:auto!important;width:100%;aspect-ratio:4/3;order:1;flex:none}
  .mh-bg img,.mh-bg img.on{animation:none!important}
  .mh-bg::after{background:linear-gradient(180deg,rgba(11,9,8,.42) 0%,rgba(11,9,8,0) 22%,
                rgba(11,9,8,0) 68%,rgba(11,9,8,.82) 100%)}
  .media-hero .mh-dots{position:static;order:2;margin:16px auto 0}
  .mh-in{order:3;padding:clamp(20px,5vw,30px) var(--pad) 0;max-width:none}
  .mh-in::before{display:none}
}
@media(max-width:520px){
  .mh-in h1{font-size:clamp(2.1rem,10vw,3rem)!important}
  .mh-in .lede{font-size:.95rem}
  .mh-in .btn{width:100%;max-width:320px}
  .mh-in .btn+.btn{margin-top:4px}
}
.mh-bg{position:absolute;inset:0;z-index:0}
.mh-bg img{width:100%;height:100%;object-fit:cover;animation:kb 34s var(--ease) infinite alternate}
.mh-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 96% 80% at 50% 48%,rgba(4,14,20,0) 0%,rgba(4,14,20,.26) 62%,rgba(4,14,20,.78) 100%),
             linear-gradient(180deg,rgba(4,14,20,.62) 0%,rgba(4,14,20,0) 32%,rgba(4,14,20,.74) 100%)}
/* Voile allégé, pour une bannière où la photo est l'argument de vente.
   Le texte reste lisible grâce au halo de .mh-in::before, qui n'assombrit
   que la zone du titre au lieu de toute l'image. */
.mh-bg.clair::after{
  background:radial-gradient(ellipse 92% 74% at 50% 46%,rgba(4,14,20,0) 0%,rgba(4,14,20,.10) 62%,rgba(4,14,20,.46) 100%),
             linear-gradient(180deg,rgba(4,14,20,.46) 0%,rgba(4,14,20,0) 30%,rgba(4,14,20,.38) 100%)}
/* Le sujet de la bannière partenaires se tient en bas à droite du cadre,
   le scooter touchant le bord droit. Sur écran large la bannière est plus
   allongée que la photo (recadrage vertical), sur téléphone elle est plus
   carrée (recadrage horizontal) : on décale l'ancrage vers le bas-droite
   pour que la nageuse et l'appareil restent entiers dans les deux cas. */
.mh-bg.clair img{object-position:70% 62%}

/* Bannière véhicules : les scooters sont posés en bas du cadre. Sur
   écran large la bannière est plus allongée que la photo, donc le haut
   et le bas sont rognés — on ancre vers le bas pour que les scooters
   restent entiers plutôt que le ciel. */
.mh-bg.route img{object-position:56% 74%}

/* Bannière partenaires : texte à gauche.
   La nageuse et le scooter occupent la moitié droite du cadre. Avec un
   titre centré, la ligne de texte tombait pile sur son visage — or c'est
   le visage qui vend l'idée à un exploitant. On pousse donc le bloc de
   texte à gauche sur grand écran ; sous 900 px la photo redevient un
   bandeau et le titre repasse dessous, centré comme ailleurs. */
@media(min-width:901px){
  .media-hero.gauche{place-items:center start;text-align:left;
    padding-inline:clamp(var(--pad),7vw,110px)}
  .media-hero.gauche .mh-in{max-width:min(620px,52%)}
  .media-hero.gauche .mh-in::before{left:38%;width:170%}
  .media-hero.gauche .eyebrow.centered{justify-content:flex-start}
  .media-hero.gauche .eyebrow.centered::after{display:none}
  .media-hero.gauche .lede{margin-inline:0!important}
  .media-hero.gauche .btns{justify-content:flex-start!important}
}
/* Entre 641 et 900 px (tablette en portrait), le cadre plein écran est
   presque carré : la photo y est recadrée de moitié en largeur et le
   titre retombe sur le visage. On applique donc à cette bannière, dès
   900 px, le même traitement que sur téléphone — bandeau 16:10 puis
   texte dessous. */
@media(min-width:641px) and (max-width:900px){
  .media-hero.gauche{min-height:0!important;display:flex!important;flex-direction:column;
    place-items:stretch;padding:88px 0 clamp(34px,6vw,52px)!important;text-align:center}
  .media-hero.gauche .mh-bg{position:relative!important;inset:auto!important;
    width:100%;aspect-ratio:16/10;order:1;flex:none}
  .media-hero.gauche .mh-bg img,.media-hero.gauche .mh-bg img.on{animation:none!important}
  .media-hero.gauche .mh-bg::after{background:linear-gradient(180deg,rgba(11,9,8,.42) 0%,
    rgba(11,9,8,0) 22%,rgba(11,9,8,0) 68%,rgba(11,9,8,.82) 100%)}
  .media-hero.gauche .mh-in{order:3;padding:clamp(22px,4vw,32px) var(--pad) 0;max-width:none}
  .media-hero.gauche .mh-in::before{display:none}
}

.mh-bg.warm::after{
  background:radial-gradient(ellipse 96% 80% at 50% 48%,rgba(11,9,8,0) 0%,rgba(11,9,8,.22) 62%,rgba(11,9,8,.74) 100%),
             linear-gradient(180deg,rgba(11,9,8,.60) 0%,rgba(11,9,8,0) 32%,rgba(11,9,8,.68) 100%)}

.mh-in h1{text-shadow:0 4px 40px rgba(0,0,0,.55)}
.mh-in .lede{text-shadow:0 2px 20px rgba(0,0,0,.7)}

/* ---------- diaporama de bannière ----------
   Chaque .mh-bg peut contenir plusieurs <img> (fondu enchaîné + léger zoom)
   ou une <video muted loop playsinline> — le JS gère les deux. */
.mh-bg picture,.hero-bg picture,.rc-bg picture{display:contents}
.mh-bg img,.mh-bg video,.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.5s var(--ease)}
.mh-bg img.on,.hero-bg img.on{opacity:1;animation:kb 13s linear forwards}
.mh-bg video,.hero-bg video{opacity:1;z-index:1}
.has-video img{opacity:0!important;animation:none!important}
.has-video .mh-dots{display:none}
.mh-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:9px}
.mh-dots button{width:26px;height:2px;background:rgba(245,240,231,.35);transition:background .4s}
.mh-dots button.on{background:var(--gold)}

/* ---------- cartes ---------- */
.grid{display:grid;gap:clamp(18px,2.2vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--ink-2);border:1px solid var(--line-soft);overflow:hidden;position:relative;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.card:hover{border-color:var(--line);transform:translateY(-4px)}
.card-img{overflow:hidden;aspect-ratio:4/3;background:var(--ink-3)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:clamp(20px,2.2vw,32px)}
.card-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line-soft)}

/* ---------- chambres illustrées ---------- */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.room{background:var(--ink-2);border:1px solid var(--line-soft);overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.room:hover{border-color:var(--line);transform:translateY(-4px)}
.room .ph{aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.room .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.room:hover .ph img{transform:scale(1.06)}
.room .bd{padding:22px 24px 26px}
.room h4{font-family:var(--serif);font-weight:400;font-size:1.36rem;margin-bottom:6px}
.room .cfg{font-size:.86rem;color:var(--muted);margin-bottom:14px}
.room .tags{display:flex;gap:8px;flex-wrap:wrap}
.room .tags span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border:1px solid var(--line-soft);color:var(--gold-lt)}

/* ---------- chips / distances ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-size:.72rem;letter-spacing:.08em;padding:9px 16px;border:1px solid var(--line-soft);
  color:rgba(245,240,231,.9);transition:border-color .4s,color .4s}
.chip:hover{border-color:var(--line);color:var(--gold-lt)}
.dist div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:.94rem}
.dist div span:last-child{color:var(--gold-lt);font-size:.8rem;letter-spacing:.08em;white-space:nowrap}

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);counter-reset:s}
/* Quatre étapes plutôt que trois, sur la page partenaires. */
.steps.quatre{grid-template-columns:repeat(4,1fr)}
.step{position:relative;padding-top:28px;border-top:1px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-.78em;left:0;
  background:var(--bgstep,var(--ink));padding-right:14px;font-family:var(--serif);font-size:1.3rem;color:var(--gold)}
.step h4{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-bottom:8px}
.step p{font-size:.92rem;color:var(--muted)}

/* ---------- océan ---------- */
.ocean{background:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(16,96,124,.55) 0%,transparent 60%),
  linear-gradient(180deg,var(--ocean) 0%,#04141C 100%);position:relative;overflow:hidden}
.ocean .eyebrow{color:#7FD4EE}
.ocean .eyebrow::before,.ocean .eyebrow::after{background:linear-gradient(90deg,transparent,#7FD4EE)}
.ocean .lede,.ocean .note{color:#A9CDDC}

.product-shot{position:relative;width:min(100%,880px);margin-inline:auto}
.ps-stage{position:relative;aspect-ratio:16/10;overflow:hidden}
.ps-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .7s var(--ease);
  filter:drop-shadow(0 30px 45px rgba(0,0,0,.55))}
.ps-stage img.on{opacity:1;animation:float 9s ease-in-out infinite}
.ps-stage img.lifestyle{object-fit:cover;filter:none;animation:none}
.ps-stage img.lifestyle.on{animation:none}
.ps-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;display:grid;place-items:center;font-size:1.7rem;
  color:rgba(215,240,250,.7);border:1px solid rgba(127,212,238,.28);
  background:rgba(4,20,28,.5);backdrop-filter:blur(4px);transition:.35s}
.ps-nav:hover{color:#D7F0FA;border-color:rgba(127,212,238,.7);background:rgba(8,40,55,.8)}
.ps-prev{left:0}.ps-next{right:0}
.ps-dots{display:flex;gap:9px;justify-content:center;margin-top:20px}
.ps-dots button{width:30px;height:2px;background:rgba(127,212,238,.28);transition:background .4s}
.ps-dots button.on{background:#7FD4EE}
.ps-cap{text-align:center;margin-top:14px;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8CB2C2;min-height:1.4em}
@media(max-width:700px){.ps-nav{width:38px;height:38px;font-size:1.4rem}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(140,220,255,.18);position:relative;z-index:1}
.specs div{background:#08222E;padding:clamp(22px,2.4vw,32px) 16px;text-align:center}
.specs b{display:block;font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:400;color:#D7F0FA;margin-bottom:4px}
.specs span{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:#8CB2C2}

/* ---------- tarifs ---------- */
.pcard{border:1px solid var(--line-soft);padding:clamp(26px,3vw,42px);position:relative;overflow:hidden;
  background:rgba(8,34,46,.7);transition:border-color .5s var(--ease),transform .5s var(--ease)}
.pcard:hover{border-color:rgba(127,212,238,.5);transform:translateY(-4px)}
.pcard.feature{border-color:var(--line);background:rgba(30,24,17,.72)}
.pcard .tag{position:absolute;top:0;right:0;background:var(--gold);color:#160F02;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 15px;font-weight:600}
.pcard .dur{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.pcard .amt{font-family:var(--serif);font-size:clamp(2.5rem,4.4vw,3.5rem);font-weight:400;line-height:1;margin-bottom:24px}
.pcard .amt small{font-size:.3em;letter-spacing:.14em;color:var(--muted);margin-left:8px}
.pcard ul{list-style:none;display:grid;gap:12px;margin-bottom:28px}
.pcard li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:rgba(245,240,231,.9)}
.pcard li::before{content:"";width:5px;height:5px;border:1px solid var(--gold);transform:rotate(45deg);margin-top:9px;flex-shrink:0}

/* ---------- mosaïque ---------- */
.mosaic{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(172px,auto);gap:8px}
.mosaic a{position:relative;overflow:hidden;background:#08222E;display:block}
.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mosaic a:hover img{transform:scale(1.07)}
.mosaic a::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
.mosaic .big{grid-column:span 2;grid-row:span 2}
.mosaic .wide{grid-column:span 2}
.mosaic a.hid{display:none}
.more-wrap{text-align:center;margin-top:clamp(24px,3vw,40px)}
.more-count{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8CB2C2;margin-top:14px}

/* ---------- vidéos : clic pour lire ---------- */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.vcard{border:1px solid rgba(127,212,238,.2);background:rgba(8,34,46,.6);overflow:hidden}
.vcard .fr{position:relative;width:100%;aspect-ratio:9/15;background:#04141C;cursor:pointer}
.vcard.land .fr{aspect-ratio:16/9}
.vcard .fr img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.vcard .fr:hover img{transform:scale(1.05);filter:brightness(1.08)}
.vcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.play i{width:66px;height:66px;border-radius:50%;background:rgba(11,9,8,.55);
  border:1.5px solid rgba(255,255,255,.85);display:grid;place-items:center;
  backdrop-filter:blur(4px);transition:transform .4s var(--ease),background .4s}
.vcard .fr:hover .play i{transform:scale(1.1);background:rgba(212,175,55,.9)}
.play i::after{content:"";border-left:17px solid #fff;border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:5px}
.vcard .fr:hover .play i::after{border-left-color:#160F02}
.vcard .cap{padding:15px 18px;font-size:.75rem;letter-spacing:.1em;color:#B7D6E3;line-height:1.5}

/* ---------- bande image ---------- */

/* ---------- galerie ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
/* Première photo d'une galerie villa : deux fois plus grande. */
.gal a.big{grid-column:span 2;grid-row:span 2}
.gal a{display:block;overflow:hidden;aspect-ratio:1;background:var(--ink-3);position:relative;
  border:1px solid var(--line-soft)}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal a:hover img{transform:scale(1.06)}

/* ---------- calendrier ---------- */
.cal-wrap{border:1px solid var(--line-soft);padding:clamp(22px,2.6vw,38px);background:var(--ink-2)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.cal-sel{display:flex;gap:8px;flex-wrap:wrap}
.cal-sel button{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 17px;
  border:1px solid var(--line-soft);color:var(--muted);transition:.35s}
.cal-sel button.on{border-color:var(--gold);color:var(--gold)}
.cal-nav{display:flex;align-items:center;gap:12px}
.cal-nav button{width:34px;height:34px;border:1px solid var(--line-soft);color:var(--muted);
  transition:.35s;display:grid;place-items:center;font-size:1.1rem}
.cal-nav button:hover{border-color:var(--gold);color:var(--gold)}
.cal-months{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px)}
.cal-m h4{font-family:var(--serif);font-size:1.24rem;font-weight:400;text-align:center;margin-bottom:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-grid .dow{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:8px}
.cal-d{aspect-ratio:1;display:grid;place-items:center;font-size:.78rem;color:rgba(245,240,231,.9);
  position:relative;border:1px solid transparent;transition:.3s}
.cal-d.free{border-color:rgba(212,175,55,.3)}
.cal-d.free:hover{border-color:var(--gold);color:var(--gold-lt)}
.cal-d.busy{color:rgba(245,240,231,.22);background:rgba(245,240,231,.045)}
.cal-d.busy::after{content:"";position:absolute;width:58%;height:1px;background:rgba(245,240,231,.24);transform:rotate(-38deg)}
.cal-d.pastd{color:rgba(245,240,231,.15)}
.cal-d.empty{visibility:hidden}
.cal-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.cal-legend>span{display:flex;align-items:center;gap:9px;font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.cal-legend i{width:13px;height:13px;display:block}
.cal-legend i.f{border:1px solid rgba(212,175,55,.6)}
.cal-legend i.b{background:rgba(245,240,231,.07);border:1px solid rgba(245,240,231,.16)}
.cal-note{margin-top:18px;font-size:.78rem;color:var(--muted);display:flex;gap:10px;align-items:flex-start;line-height:1.7}
.cal-note svg{flex-shrink:0;margin-top:3px}

/* ---------- sélection de dates ---------- */
.cal-d.free{cursor:pointer}
.cal-d.sel{background:var(--gold);color:#160F02;border-color:var(--gold);font-weight:600}
.cal-d.inr{background:rgba(212,175,55,.20);border-color:rgba(212,175,55,.34);color:var(--gold-lt)}
.cal-d.free:hover{border-color:var(--gold);color:var(--gold-lt)}
.cal-d.sel:hover{color:#160F02}
.cal-sum{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cal-sum .txt{font-size:.95rem}
.cal-sum .txt b{font-family:var(--serif);font-size:1.28rem;font-weight:400;color:var(--gold-lt);display:block;margin-top:2px}
.cal-sum .txt em{font-style:normal;color:var(--muted);font-size:.82rem}
.cal-sum .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cal-clear{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-soft);padding-bottom:2px;transition:color .3s,border-color .3s}
.cal-clear:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- pack ---------- */
.pkg{border:1px solid var(--line);padding:clamp(30px,4vw,64px);position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(212,175,55,.09),transparent 55%),var(--ink-2);--bgstep:var(--ink-2)}
.pkg::after{content:"";position:absolute;top:-60%;right:-14%;width:52%;height:220%;
  background:radial-gradient(circle,rgba(212,175,55,.12),transparent 66%);pointer-events:none}

/* ---------- contact ---------- */
.ct-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,4vw,70px)}
.ct-item{padding:22px 0;border-bottom:1px solid var(--line-soft)}
.ct-item .lbl{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.ct-item .val{font-family:var(--serif);font-size:1.3rem;font-weight:400;line-height:1.5}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);padding-block:clamp(46px,5vw,76px) 30px;background:var(--ink-2)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(26px,3vw,50px);margin-bottom:44px}
.f-grid h5{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.f-grid ul{list-style:none;display:grid;gap:11px}
.f-grid a,.f-grid li{font-size:.88rem;color:var(--muted);transition:color .35s}
.f-grid a:hover{color:var(--cream)}
.f-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line-soft);font-size:.72rem;color:var(--muted)}

/* ---------- fab ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:12px;
  background:#22B85A;color:#fff;padding:14px 22px 14px 18px;border-radius:999px;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  box-shadow:0 12px 34px rgba(0,0,0,.5);transition:transform .42s var(--ease),box-shadow .42s}
.fab:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(34,184,90,.4)}
.fab svg{width:21px;height:21px;flex-shrink:0}

/* ---------- lightbox ---------- */
/* ---------- panneau « composez votre expérience » ----------
   Volet latéral sur écran large, feuille remontante sur téléphone.
   Il passe au-dessus de tout, en-tête compris. */
#cx{position:fixed;inset:0;z-index:400;visibility:hidden;pointer-events:none}
#cx.on{visibility:visible;pointer-events:auto}
.cx-bd{position:absolute;inset:0;background:rgba(6,5,4,.78);opacity:0;
  transition:opacity .38s var(--ease);backdrop-filter:blur(3px)}
#cx.on .cx-bd{opacity:1}
.cx-panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);
  background:var(--ink-2);border-left:1px solid var(--line-soft);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .42s var(--ease);box-shadow:-30px 0 70px rgba(0,0,0,.6)}
#cx.on .cx-panel{transform:none}
.cx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:26px clamp(20px,3vw,34px) 18px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.cx-x{font-size:2rem;color:var(--gold);line-height:1;padding:0 4px;flex-shrink:0}
.cx-body{padding:clamp(22px,3vw,32px);overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
body.cx-open{overflow:hidden}
/* Dans le panneau, les champs passent sur une colonne : c'est étroit. */
.cx-body .fgrid{grid-template-columns:1fr}
.cx-body .picks{grid-template-columns:1fr}
.cx-q{font-family:var(--serif);font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:300;
  line-height:1.2;margin-bottom:10px;color:var(--cream)}
/* Une phrase d'aide sous chaque question : le visiteur ne doit jamais
   avoir à deviner ce qu'on attend de lui. */
/* Emplacement d'image en attente : un aplat neutre et un mot, jamais
   une photo d'autre chose. Utilisé sur la carte e-surf de la page
   partenaires et sur les véhicules sans photo. */
/* Questions-réponses de la page partenaires. Réponses toujours visibles :
   un exploitant survole la page, une objection repliée derrière un clic
   reste une objection. Le filet dégradé à gauche remplace l'accordéon. */
.faq{gap:clamp(24px,3vw,42px) clamp(30px,4vw,64px)}
.faq>div{padding-left:clamp(14px,1.4vw,20px);
  border-left:1px solid var(--line-soft)}
.faq h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.2rem);
  line-height:1.3;margin:0 0 9px;color:var(--gold-lt)}

/* Les valeurs d'une liste étiquette/valeur ne passent pas à la ligne, ce
   qui convient à « 2 490 THB ». Une caractéristique technique est plus
   longue : cette variante l'autorise à se replier au lieu de déborder. */
.loc-list.souple div{align-items:baseline}
@media(max-width:380px){
  /* En dessous de cette largeur seulement : au-dessus, « 486 × 327 ×
     177 mm » tient à droite de son étiquette et empiler doublait la
     hauteur de la fiche technique. */
  .loc-list.souple div{flex-direction:column;gap:3px}
  .loc-list.souple div span:last-child{text-align:left}
}

/* Sur téléphone, quatre cartes illustrées empilées font quatre écrans
   à elles seules. La photo passe à gauche, le texte à droite : la
   section tient en un écran et demi, et l'image reste lisible. */
@media(max-width:560px){
  .lieux .card{display:grid;grid-template-columns:36% 1fr;align-items:stretch}
  .lieux .card-img{aspect-ratio:auto;height:100%;min-height:118px}
  .lieux .card-body{padding:clamp(14px,4vw,20px)}
  .lieux .card-body h3{font-size:1.05rem!important;margin-bottom:6px!important}
  .lieux .card-body .note{font-size:.8rem;line-height:1.6}
}

.card-img.ph{display:grid;place-items:center;background:linear-gradient(140deg,#132a34,#0a1a22)}
.card-img.ph span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.f-links{display:flex;gap:18px;flex-wrap:wrap}
.f-links a{transition:color .3s}
.f-links a:hover{color:var(--gold)}

.cx-aide{font-size:.8rem;line-height:1.6;color:var(--muted);
  margin-bottom:clamp(16px,2vw,22px);max-width:52ch}
.cx-alerte{font-size:.8rem;line-height:1.6;color:var(--gold-lt);
  border:1px solid var(--gold-dp);padding:11px 14px;margin-top:18px;
  background:rgba(212,175,55,.07)}
/* Coche sur le choix retenu : la bordure dorée seule ne suffit pas
   à tout le monde, notamment en plein soleil sur un téléphone. */
.pickp{position:relative}
.pickp.on::after{content:"";position:absolute;top:9px;right:9px;width:17px;height:17px;
  border-radius:50%;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' d='M5 12.5l4.6 4.6L19 7.4'/%3E%3C/svg%3E") center/12px no-repeat,linear-gradient(#000,#000);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' d='M5 12.5l4.6 4.6L19 7.4'/%3E%3C/svg%3E") center/12px no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude}

/* Fil d'étapes. Une étape déjà franchie reste cliquable : revenir en
   arrière ne doit rien faire perdre. */
.cx-steps{display:flex;gap:4px;padding:14px clamp(20px,3vw,34px);
  border-bottom:1px solid var(--line-soft);flex-shrink:0;overflow-x:auto}
.cx-steps button{display:flex;align-items:center;gap:7px;padding:6px 10px;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;transition:color .3s;cursor:default}
.cx-steps button.fait{cursor:pointer}
.cx-steps button.fait:hover{color:var(--cream)}
.cx-steps button i{display:grid;place-items:center;width:21px;height:21px;flex-shrink:0;
  border:1px solid var(--line-soft);border-radius:50%;font-style:normal;font-size:.66rem}
.cx-steps button.on{color:var(--gold)}
.cx-steps button.on i{border-color:var(--gold);background:rgba(212,175,55,.14)}
.cx-steps button.fait i{border-color:var(--gold-dp);color:var(--gold-lt)}

/* Choix illustré : la photo à gauche, le libellé à droite. Une image
   dit en un coup d'œil ce qu'un intitulé met trois lignes à expliquer. */
.pickp{display:flex;align-items:stretch;gap:0;text-align:left;width:100%;
  border:1px solid var(--line-soft);background:transparent;cursor:pointer;overflow:hidden;
  transition:border-color .3s,background .3s}
.pickp:hover{border-color:var(--line)}
.pickp.on{border-color:var(--gold);background:rgba(212,175,55,.09)}
.pickp-img{width:104px;flex-shrink:0;position:relative;background:var(--ink-3);
  align-self:stretch;min-height:74px}
.pickp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pickp-img.vide{background:linear-gradient(140deg,#132a34,#0a1a22)}
.pickp-txt{padding:13px 15px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.pickp-txt b{font-weight:400;font-size:.9rem;line-height:1.25}
.pickp.on .pickp-txt b{color:var(--gold-lt)}
.pickp-txt small{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Vignettes du récapitulatif : chacune ramène à son étape. */
.cx-choix{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cx-choix button{border:1px solid var(--line-soft);overflow:hidden;text-align:left;
  cursor:pointer;transition:border-color .3s;display:flex;flex-direction:column}
.cx-choix button:hover{border-color:var(--gold)}
.cx-choix .v-img{position:relative;aspect-ratio:4/3;background:linear-gradient(140deg,#132a34,#0a1a22)}
.cx-choix .v-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx-choix .v-txt{padding:9px 10px 11px;flex:1;display:flex;flex-direction:column;gap:3px}
.cx-choix .v-txt em{font-style:normal;font-size:.54rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dp)}
.cx-choix .v-txt b{font-weight:400;font-size:.76rem;line-height:1.25;color:var(--cream)}
.cx-choix .v-txt s{text-decoration:none;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:5px}

.cx-foot{display:flex;gap:10px;padding:clamp(16px,2vw,22px) clamp(20px,3vw,34px);
  border-top:1px solid var(--line-soft);flex-shrink:0;background:var(--ink-2)}
/* Les libellés doivent tenir : on autorise le retour à la ligne et on
   donne au bouton principal plus de place qu'au bouton Retour. */
.cx-foot .btn{flex:1;white-space:normal;line-height:1.25;
  padding:13px 14px;letter-spacing:.13em;font-size:.68rem;min-height:48px}
.cx-foot .btn.filled{flex:1.7}
.cx-foot .btn.ghost{flex:.9}
@media(max-width:760px){
  .cx-panel{top:auto;left:0;width:100%;height:92svh;border-left:0;
    border-top:1px solid var(--line);transform:translateY(100%)}
  /* Le fil des quatre étapes doit tenir sans défilement horizontal. */
  .cx-steps{padding-inline:14px;gap:0;justify-content:space-between}
  .cx-steps button{padding:6px 4px;font-size:.55rem;letter-spacing:.08em;gap:5px}
  .cx-steps button i{width:19px;height:19px;font-size:.6rem}
  .cx-foot{padding-inline:16px;gap:8px}
  .cx-foot .btn{font-size:.64rem;letter-spacing:.1em;padding-inline:10px}
  .cx-choix{grid-template-columns:1fr;gap:6px}
  .cx-choix button{flex-direction:row;align-items:stretch}
  .cx-choix .v-img{width:82px;flex-shrink:0;aspect-ratio:auto}
  .cx-choix .v-txt{justify-content:center}
  .cx-choix .v-txt s{margin-top:2px;padding-top:0}
}

#lb{position:fixed;inset:0;z-index:300;background:rgba(6,5,4,.97);display:none;place-items:center;padding:6vh 6vw}
#lb.on{display:grid}
#lb img{max-width:100%;max-height:88vh;object-fit:contain}
#lb .x{position:absolute;top:20px;right:26px;font-size:2.1rem;color:var(--gold);line-height:1}
#lb .ar{position:absolute;top:50%;transform:translateY(-50%);font-size:2.4rem;color:rgba(245,240,231,.75);
  padding:20px;transition:color .3s}
#lb .ar:hover{color:var(--gold)}
#lb .prev{left:10px}#lb .next{right:10px}
#lb .cnt{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.2em;color:var(--muted)}
#lb{touch-action:none}
#lb img{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
@media(max-width:760px){
  /* Sur téléphone la photo se change au doigt. Les flèches restent, plus
     grosses et posées en bas de part et d'autre du compteur, pour ne plus
     masquer l'image et rester atteignables au pouce. */
  #lb{padding:8vh 4vw}
  #lb img{max-height:74vh}
  #lb .ar{top:auto;bottom:8px;transform:none;font-size:2rem;padding:12px 22px;
    background:rgba(11,9,8,.55);border:1px solid var(--line-soft);border-radius:2px}
  #lb .prev{left:16px}#lb .next{right:16px}
  #lb .cnt{bottom:26px}
  #lb .x{top:14px;right:16px;padding:6px 10px}
}


/* ============================================================
   V3 — formulaires, cartes, avis
   Repris strictement de la charte : fond sombre, filets fins,
   or, beaucoup d'air. Aucun style générique.
   ============================================================ */
.form-wrap{border:1px solid var(--line-soft);background:var(--ink-2);
  padding:clamp(24px,3.2vw,48px);position:relative;overflow:hidden}
.ocean .form-wrap{background:rgba(8,34,46,.7);border-color:rgba(127,212,238,.2)}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.fgrid .full{grid-column:1/-1}
.field{position:relative;display:block}
.field>span{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.ocean .field>span{color:#7FD4EE}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-soft);
  color:var(--cream);font-family:var(--sans);font-size:.98rem;font-weight:300;
  padding:11px 2px;transition:border-color .35s var(--ease);
  border-radius:0;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:96px;line-height:1.7}
.field select{cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.ocean .field select{background-image:linear-gradient(45deg,transparent 50%,#7FD4EE 50%),linear-gradient(135deg,#7FD4EE 50%,transparent 50%)}
.field select option{background:var(--ink-2);color:var(--cream)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.ocean .field input:focus,.ocean .field select:focus,.ocean .field textarea:focus{border-bottom-color:#7FD4EE}
.field input::placeholder,.field textarea::placeholder{color:rgba(182,171,155,.5)}
.field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(78%) sepia(38%) saturate(600%) hue-rotate(3deg);cursor:pointer}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;overflow:hidden}

/* choix visuel (intention Sublue, objet du contact) */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pick{border:1px solid var(--line-soft);padding:16px 14px;text-align:center;cursor:pointer;
  transition:border-color .35s,background .35s,color .35s;font-size:.78rem;letter-spacing:.08em;
  color:rgba(245,240,231,.82);background:transparent}
.pick:hover{border-color:var(--line)}
.pick.on{border-color:var(--gold);color:var(--gold-lt);background:rgba(212,175,55,.09)}
.ocean .pick.on{border-color:#7FD4EE;color:#D7F0FA;background:rgba(127,212,238,.11)}
.pick small{display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.cond{display:none}
.cond.on{display:grid}

.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px);align-items:center}
.form-actions .btn{flex:1 1 auto;min-width:210px}
.form-note{font-size:.74rem;color:var(--muted);margin-top:16px;line-height:1.65}

/* confirmation après envoi */
.form-done{display:none;text-align:center;padding:clamp(30px,4vw,54px) 10px}
.form-done.on{display:block;animation:fadeUp .6s var(--ease)}
.form-done .tick{width:56px;height:56px;margin:0 auto 22px;border:1px solid var(--gold);
  border-radius:50%;display:grid;place-items:center}
.form-done .tick svg{width:22px;height:22px}
.form-done h4{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin-bottom:10px}
.form-done p{color:var(--muted);font-size:.94rem;max-width:46ch;margin:0 auto}
.form-body.hidden{display:none}

/* ---------- localisation ---------- */
.loc{display:grid;grid-template-columns:1fr 1.15fr;gap:0;border:1px solid var(--line-soft);overflow:hidden}
.ocean .loc{border-color:rgba(127,212,238,.2)}
.loc-info{padding:clamp(26px,3vw,44px);background:var(--ink-2)}
.ocean .loc-info{background:rgba(8,34,46,.7)}
.loc-map{position:relative;min-height:340px;background:var(--ink-3)}
.loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}
.loc-map .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;
  color:var(--muted);font-size:.84rem;line-height:1.7}
.loc-addr{font-family:var(--serif);font-size:1.18rem;line-height:1.6;margin-bottom:8px}
.loc-list{margin-top:22px}
.loc-list div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);font-size:.9rem}
/* La valeur ne se coupe plus au forceps : nowrap faisait déborder la page
   de quelques pixels sur téléphone dès qu'un libellé dépassait, sans que
   rien ne le montre — overflow-x:hidden sur body masquait le symptôme. */
.loc-list div span:last-child{color:var(--gold-lt);font-size:.78rem;letter-spacing:.08em;
  white-space:normal;text-align:right}
.ocean .loc-list div span:last-child{color:#9FD8EC}

/* ---------- avis ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.rev{border:1px solid var(--line-soft);padding:clamp(24px,2.6vw,34px);background:var(--ink-2);
  display:flex;flex-direction:column;transition:border-color .5s var(--ease)}
.rev:hover{border-color:var(--line)}
.ocean .rev{background:rgba(8,34,46,.6);border-color:rgba(127,212,238,.18)}
.rev .stars{color:var(--gold);letter-spacing:.22em;font-size:.82rem;margin-bottom:16px}
.ocean .rev .stars{color:#7FD4EE}
.rev blockquote{font-family:var(--serif);font-size:1.12rem;line-height:1.65;font-style:italic;
  color:var(--cream);margin-bottom:18px;flex:1}
.rev .who{font-size:.76rem;letter-spacing:.1em;color:var(--muted)}
.rev .who b{display:block;color:var(--cream);font-weight:400;letter-spacing:.04em;margin-bottom:3px;font-size:.88rem}
.rev .src{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);margin-top:12px}
.rev.empty{border-style:dashed;justify-content:center;text-align:center;color:var(--muted);font-size:.86rem;min-height:200px}
.rev.empty code{color:var(--gold);font-size:.8rem;display:block;margin-top:8px;letter-spacing:.04em}

/* ---------- piliers éditoriaux ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft)}
.pillar{background:var(--ink);position:relative;overflow:hidden;display:flex;flex-direction:column}
.pillar-img{height:clamp(230px,26vw,340px);overflow:hidden;position:relative;background:var(--ink-3)}
.pillar-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.pillar:hover .pillar-img img{transform:scale(1.07)}
.pillar-body{padding:clamp(24px,2.6vw,38px);flex:1;display:flex;flex-direction:column}
.pillar .kicker{font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.pillar h3{margin-bottom:12px}
.pillar p{font-size:.92rem;color:var(--muted);flex:1;margin-bottom:20px}

/* ---------- étapes écosystème ---------- */
/* Quatre étapes depuis que le véhicule a rejoint le parcours : séjour,
   véhicule, expérience, interlocuteur unique. */
.eco{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,42px);counter-reset:e}
@media(max-width:1080px){ .eco{grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,44px)} }
@media(max-width:560px){ .eco{grid-template-columns:1fr} }
.eco-step{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.eco-step .n{position:absolute;top:-.8em;left:0;background:var(--ink);padding-right:14px;
  font-family:var(--serif);font-size:1.35rem;color:var(--gold)}
.eco-step h4{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-bottom:8px}
.eco-step p{font-size:.92rem;color:var(--muted)}

/* ---------- CTA final ---------- */
.final-cta{position:relative;overflow:hidden;text-align:center;
  padding:clamp(70px,9vw,130px) var(--pad);
  background:linear-gradient(160deg,rgba(212,175,55,.10),transparent 58%),var(--ink-2);
  border-top:1px solid var(--line-soft)}
.final-cta::after{content:"";position:absolute;top:-50%;left:50%;transform:translateX(-50%);
  width:70%;height:200%;background:radial-gradient(circle,rgba(212,175,55,.10),transparent 65%);pointer-events:none}
.final-cta>*{position:relative;z-index:1}
.final-cta.vsec{background:var(--ink)}
.final-cta.vsec>.vsec-bg{z-index:0}
.final-cta.vsec::after{z-index:1}
.final-cta.vsec>.wrap-narrow{position:relative;z-index:2}

@media(max-width:900px){
  .loc{grid-template-columns:1fr}
  .loc-map{min-height:280px;order:-1}
  .revs,.pillars,.eco{grid-template-columns:1fr}
  .pillars{gap:1px}
}
@media(max-width:680px){
  .fgrid{grid-template-columns:1fr}
  .picks{grid-template-columns:1fr}
  .form-actions .btn{flex:1 1 100%;min-width:0}
  .field input,.field select,.field textarea{font-size:16px;padding:13px 2px}
  .loc-map{min-height:240px}
}

/* ---------- V4 : respirations photographiques ---------- */
.band{position:relative;overflow:hidden;height:clamp(340px,46vw,620px)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.6s var(--ease)}
.band:hover img{transform:scale(1.06)}
/* voile minimal : uniquement en bas, là où se pose l'accroche */
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,8,.26) 0%,rgba(11,9,8,0) 30%,
             rgba(11,9,8,0) 52%,rgba(11,9,8,.66) 100%)}
.band-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 var(--pad) clamp(30px,4vw,58px);text-align:center}
.band-cap .eyebrow{justify-content:center;color:var(--gold-lt)}
.band-cap .eyebrow::before,.band-cap .eyebrow::after{background:linear-gradient(90deg,transparent,var(--gold-lt))}
.band-cap p.line{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.4rem,3.2vw,2.6rem);line-height:1.2;margin-top:14px;
  text-shadow:0 3px 26px rgba(0,0,0,.9),0 1px 6px rgba(0,0,0,.7)}
@media(max-width:680px){ .band{height:clamp(300px,72vw,420px)} }

/* ---------- section avec vidéo de fond ----------
   La vidéo ne se charge que sur grand écran et si l'utilisateur n'a pas
   demandé de réduire les animations : sur mobile on garde l'image fixe,
   pas de 3,6 Mo consommés sur le forfait de quelqu'un qui scrolle. */
.vsec{position:relative;overflow:hidden;isolation:isolate}
.vsec-bg{position:absolute;inset:0;z-index:0}
.vsec-bg picture{display:contents}
.vsec-bg img,.vsec-bg video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.vsec-bg video{opacity:0;transition:opacity 1.1s var(--ease)}
.vsec-bg video.on{opacity:1}
.vsec-bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 78% 62% at 50% 50%,rgba(8,6,4,.62) 0%,rgba(8,6,4,.18) 70%,rgba(8,6,4,0) 100%),
             linear-gradient(180deg,rgba(11,9,8,.92) 0%,rgba(11,9,8,.50) 26%,
             rgba(11,9,8,.46) 64%,rgba(11,9,8,.92) 100%)}
.vsec > .wrap,.vsec > .wrap-narrow{position:relative;z-index:2}
/* même mécanique dans un bandeau : la légende est déjà posée sur un
   dégradé bas, on ne rajoute qu'un voile léger pour tenir le contraste. */
.band-video{position:relative;overflow:hidden}
/* le bandeau a déjà son propre voile : on ne le double pas */
.band-video::after{display:none}
.band-video .vsec-bg::after{
  background:linear-gradient(180deg,rgba(11,9,8,.28) 0%,rgba(11,9,8,.06) 34%,
             rgba(11,9,8,.20) 56%,rgba(11,9,8,.72) 100%)}
.band-video .band-cap{z-index:3}
.vsec .lede{text-shadow:0 2px 18px rgba(0,0,0,.85)}
@media(min-width:761px){ .vsec{padding-block:clamp(96px,11vw,160px)} }
/* Sur mobile la vidéo reste un fond, texte par-dessus : un seul bloc.
   Le voile est allégé au centre et la lisibilité passe par l'ombre portée
   du texte plutôt que par un assombrissement de toute l'image. */
@media(max-width:760px){
  .vsec-bg::after{background:
    radial-gradient(ellipse 96% 52% at 50% 52%,rgba(8,6,4,.52) 0%,rgba(8,6,4,.22) 66%,rgba(8,6,4,0) 100%),
    linear-gradient(180deg,rgba(11,9,8,.86) 0%,rgba(11,9,8,.30) 22%,
                    rgba(11,9,8,.30) 74%,rgba(11,9,8,.88) 100%)}
  .vsec h2,.vsec .lede,.vsec .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.85)}
}
}

/* mention unique, discrète, sous un bloc d'avis non encore vérifiés.
   Elle disparaît d'elle-même dès qu'aucun avis affiché n'a temp:true. */
.rev-note{grid-column:1/-1;margin:6px 0 0;text-align:center;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.62}
.rev .cats{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px;font-size:.7rem;color:var(--muted)}
.rev .cats span{display:flex;justify-content:space-between;gap:10px}
.rev .cats b{color:var(--gold-lt);font-weight:400}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv][data-d="1"]{transition-delay:.09s}
[data-rv][data-d="2"]{transition-delay:.18s}
[data-rv][data-d="3"]{transition-delay:.27s}
[data-rv][data-d="4"]{transition-delay:.36s}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  /* Quatre colonnes sous 1080 px donnaient des cartes de 220 px : la
     photo n'y tenait plus. Deux colonnes, plus lisibles. */
  .router{grid-template-columns:repeat(2,1fr)}
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .rooms{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
}
/* La barre de navigation bascule en menu plein écran plus tôt que le
   reste de la mise en page. Avec l'entrée Partenaires, huit libellés
   plus le sélecteur de langue ne tiennent plus en dessous de 980 px :
   le « FR » se faisait couper par le bord de l'écran. Les grilles,
   elles, gardent leur seuil de 880 px. */
@media(max-width:980px){
  .menu{position:fixed;inset:0;background:rgba(11,9,8,.985);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;gap:26px;opacity:0;visibility:hidden;
    transition:opacity .45s var(--ease),visibility .45s}
  body.menu-open .menu{opacity:1;visibility:visible}
  /* Un élément qui porte backdrop-filter devient le bloc conteneur de
     ses descendants en position fixed. Une fois la page défilée, le
     header prend la classe .solid — donc un backdrop-filter — et le
     menu, pourtant en position:fixed;inset:0, se calait sur la boîte du
     header : 62 px de haut au lieu de la fenêtre entière. Le voile du
     menu couvre déjà tout l'écran, le flou du header n'a donc rien à
     filtrer tant qu'il est ouvert : on le retire pendant ce temps. */
  body.menu-open header.solid{backdrop-filter:none;-webkit-backdrop-filter:none}
  .menu a{font-size:1.05rem;letter-spacing:.22em}
  .burger{display:block;z-index:101}
  .nav-right .btn{display:none}
  .menu a.menu-cta{display:inline-flex;margin-top:26px}
}

@media(max-width:880px){
  .router,.g3,.g2,.g4,.steps,.steps.quatre,.split,.ct-grid,.cal-months,.rooms{grid-template-columns:1fr}
  .router{grid-template-columns:repeat(2,1fr)}   /* voir aussi 1080 px */
  /* Quatre cartes illustrées empilées font un défilement interminable sur
     tablette : on repasse en deux colonnes tant qu'il y a la place. */
  .g4{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust div:nth-child(3){border-left:0}
  .trust div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic .big,.mosaic .wide{grid-column:span 2;grid-row:auto}
  .gal{grid-template-columns:repeat(2,1fr)}
  .fab span{display:none}
  .fab{padding:16px;border-radius:50%}
  #lb .ar{font-size:1.8rem;padding:12px}
}
@media(max-width:560px){
  /* les libellés longs peuvent revenir à la ligne : évite qu'un CTA
     dépasse la largeur de l'écran */
  .btn{white-space:normal;text-align:center;padding-inline:20px;line-height:1.4;max-width:100%}
  .hero .sub{letter-spacing:.18em;font-size:.68rem}
  .router{grid-template-columns:1fr}
  /* Deux colonnes de cartes illustrées deviennent illisibles ici : une
     seule. Cette règle doit rester après celle de 880 px, qui remet
     .g4 sur deux colonnes. Les quatre chiffres, eux, restent côte à
     côte : empilés, ils poussaient tout le reste hors de l'écran. */
  .g4{grid-template-columns:1fr}
  .g4.chiffres{grid-template-columns:repeat(2,1fr);row-gap:clamp(26px,7vw,36px)}
  .vgrid{grid-template-columns:1fr}
  /* deux colonnes maintenues sur téléphone : la mosaïque reste parcourable */
  .gal,.mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic{grid-auto-rows:minmax(140px,auto);gap:6px}
  .mosaic .big{grid-column:span 2;grid-row:span 2}
  .mosaic .wide{grid-column:span 2;grid-row:auto}
  .specs{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
}
/* ============================================================
   CONFORT TACTILE ET LISIBILITÉ SUR TÉLÉPHONE
   Mesuré page par page : le bouton du menu ne faisait que 26 × 14 px,
   le sélecteur de langue 22 × 27, et les liens du pied de page 16 px de
   haut — bien en dessous des 44 px recommandés par Apple et des 48 dp
   de Google. Les libellés de formulaire tombaient à 9,9 px, ce qui est
   trop petit pour être lu confortablement au soleil.

   On n'agrandit rien visuellement : on ajoute de la zone cliquable
   autour des éléments et on remonte les tailles de texte les plus
   basses. Le rendu sur ordinateur n'est pas touché.
   ============================================================ */
@media(max-width:980px){
  /* Le trait du burger garde ses 26 × 14 px, mais la zone qui répond au
     doigt en fait 44. */
  .burger{width:44px;height:44px;display:flex;flex-direction:column;
    justify-content:center;align-items:center;gap:5.5px;margin-right:-8px}
  .burger i{position:static;width:26px}
  .burger i:nth-child(2){top:auto}

  .lang button,.lang a{padding:12px 8px}
  .btn{min-height:44px}

  /* Liens du pied de page : ils se suivaient à 16 px de haut, on se
     trompait de ligne une fois sur trois. */
  footer li a,.f-links a,.f-bot a{display:inline-block;padding-block:10px}
  footer li{margin:0}

  /* Croix de fermeture du configurateur, fil des étapes, et les points
     du carrousel de la page hôtel — ces derniers ne faisaient que 2 px
     de haut : on les vise au pixel près, ou on ne les vise pas. */
  .cx-x{width:44px;height:44px}
  .cx-steps button{min-height:40px}
  .mh-dots button{padding-block:14px;background-clip:content-box}

  /* Textes d'information trop petits. On ne touche pas aux libellés
     décoratifs très espacés, qui restent lisibles à leur taille. */
  .field>span{font-size:.7rem}
  .ct-item .lbl{font-size:.68rem}
  .room .tags span{font-size:.68rem}
  .btn span{font-size:.7rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-rv]{opacity:1;transform:none}
}