/* Marrakech Residences — composants communs à toutes les pages. */

.enveloppe{max-width:1180px;margin:0 auto;padding:0 var(--espace)}

/* En-tête */
.entete{position:sticky;top:0;z-index:20;background:rgba(244,245,243,.90);backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.entete .enveloppe{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--titre)}
.marque .sceau{width:30px;height:30px}
.marque span{font-family:var(--serif);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;gap:22px;font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--texte);opacity:.85}
.nav a:hover,.nav a:focus-visible{opacity:1;text-decoration:underline}
@media (max-width:720px){.nav{display:none}}

/* ── Le menu de téléphone ────────────────────────────────────────────────────
   Sous 720 px, `.nav` disparaît. Avant le 17/09/2026 rien ne la remplaçait :
   /le-domaine et /experiences n'étaient atteignables que par le pied de page.
   Direction retenue par Walid sur maquette (« le rideau habité ») : les deux
   villas y sont MONTRÉES, pas listées — c'est ce que le hub doit faire
   comprendre en premier.
   ⚠️ Le panneau ne peut pas vivre DANS `.entete` : le `backdrop-filter` de la
   barre y crée un bloc conteneur, et un `position:fixed` s'y retrouverait
   enfermé dans les 68 px de l'en-tête. Il est donc son frère — et les jetons
   ivoire de la marque lui sont redéclarés avec ceux de l'en-tête (univers de
   villa), sans quoi il prendrait le sable ou le crème de la page. */
.menu-bouton{display:none}
@media (min-width:721px){.menu-mobile{display:none}}
@media (max-width:720px){
  .menu-bouton{position:relative;display:inline-flex;align-items:center;background:none;
    border:0;padding:10px 0;color:var(--contraste);cursor:pointer}
  /* Les trois filets ne font que 22 px de large : élargir le bouton lui-même
     ferait déborder l'en-tête (il ne reste que 17 px). La cible tactile est donc
     étendue à 48 px par un pseudo-élément, qui déborde sur la marge de
     l'enveloppe — une zone vide. Sans cela, la cible tombait à 22 × 33 px. */
  .menu-bouton::after{content:"";position:absolute;top:50%;left:50%;
    width:48px;height:48px;transform:translate(-50%,-50%)}
  .menu-barres{display:inline-flex;flex-direction:column;gap:5px;width:22px}
  .menu-barres i{display:block;height:1px;background:var(--contraste)}
  .menu-barres i:nth-child(2){width:15px}

  /* L'en-tête d'un téléphone de 360 px n'offre que 320 px utiles. Le nom de
     marque en taille de bureau en réclame 278 : avec un bouton portant le mot
     « Menu » (73 px), le contenu demandait 367 px et débordait. Le mot part
     donc — les trois filets restent, avec « Menu » en nom accessible — et le
     nom de marque descend d'un cran. Il reste alors 17 px de marge à 360 px.
     Mesuré dans le navigateur, pas estimé. */
  .entete .marque{gap:10px}
  .entete .marque span{font-size:.92rem;letter-spacing:.11em}
  .menu-bouton .menu-mot{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}

  /* Le panneau couvre tout l'écran : il n'a pas besoin d'un voile derrière lui. */
  .menu-mobile{position:fixed;inset:0;z-index:30;background:var(--fond);
    display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;
    padding:22px var(--espace) calc(30px + env(safe-area-inset-bottom,0px));
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .26s ease,transform .26s ease,visibility .26s}
  body[data-menu="ouvert"]{overflow:hidden}
  body[data-menu="ouvert"] .menu-mobile{visibility:visible;opacity:1;transform:none}
  .menu-mobile a{text-decoration:none;color:var(--contraste)}
  .menu-mobile a:focus-visible,.menu-mobile button:focus-visible{
    outline:1px solid var(--contraste);outline-offset:5px}

  .menu-tete{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .menu-marque{display:inline-flex;align-items:center;gap:11px;font-family:var(--serif);
    font-size:1.02rem;color:var(--titre);letter-spacing:.02em}
  .menu-fermer{background:none;border:0;color:var(--contraste);font-family:var(--sans);
    font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
    padding:10px 0}

  .menu-liens{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column}
  .menu-liens a{display:block;padding:15px 2px;font-size:var(--t-sm);letter-spacing:.14em;
    text-transform:uppercase;border-bottom:1px solid var(--ligne)}
  /* La page courante ne peut pas se distinguer par la couleur : ici tout est
     ivoire sur bleu. Elle se distingue donc par le soulignement. */
  .menu-liens a[aria-current]{color:var(--titre);text-decoration:underline;
    text-underline-offset:6px;text-decoration-thickness:1px}
  /* Les deux villas : une vignette, et leur nom en Garamond comme sur leur page. */
  .menu-villa a{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:16px;
    padding:14px 2px}
  .menu-vignette{display:block;overflow:hidden;border-radius:var(--rayon);
    aspect-ratio:4/3;background:var(--fond-creux)}
  .menu-vignette img{width:100%;height:100%;object-fit:cover}
  .menu-villa .menu-nom{font-family:var(--serif);font-size:1.3rem;letter-spacing:.01em;
    text-transform:none;color:var(--titre)}

  .menu-pied{margin-top:auto;padding-top:26px}
  .menu-mobile .btn-menu{display:block;text-align:center;background:var(--contraste);
    color:var(--fond);font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;
    padding:16px 20px;border-radius:var(--rayon)}
  .menu-note{margin:12px 0 0;text-align:center;font-size:var(--t-xs);
    color:var(--texte-doux);letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){.menu-mobile{transition:none}}

/* Boutons */
.btn,.btn-ligne{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;
  padding:14px 26px;border-radius:var(--rayon);border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s}
.btn{background:var(--contraste);color:var(--fond-creux)}
.btn:hover,.btn:focus-visible{background:var(--titre)}
.btn-ligne{background:transparent;color:var(--contraste);border-color:var(--ligne)}
.btn-ligne:hover,.btn-ligne:focus-visible{border-color:var(--contraste)}
:focus-visible{outline:2px solid var(--contraste);outline-offset:3px}

/* Champs */
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-doux)}
.champ input,.champ select,.champ textarea{
  font-family:var(--sans);font-size:var(--t-md);color:var(--titre);
  background:var(--fond-relief);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:12px 14px;min-height:48px;width:100%}
.champ textarea{min-height:120px;resize:vertical}

/* Cartes villa — l'accent est porté par la villa, jamais par la marque */
/* Page résultats : le titre porte les dates en lettres, le verdict suit immédiatement */
.titre-dates{font-family:var(--sans);font-weight:400;font-size:clamp(1.15rem,3.6vw,1.6rem);letter-spacing:.16em;
  text-transform:uppercase;line-height:1.5;max-width:none;margin-bottom:.4em}
.verdict{display:flex;gap:12px;align-items:flex-start;margin:18px 0 clamp(24px,4vw,40px);padding:14px 18px;
  border-left:2px solid var(--contraste);background:var(--fond-relief);border-radius:var(--rayon);
  font-size:var(--t-md);font-weight:400;color:var(--titre);line-height:1.45;max-width:640px}
.verdict[hidden]{display:none}
.verdict small{display:block;font-weight:300;color:var(--texte-doux);font-size:var(--t-sm);margin-top:2px}
.verdict .point{flex:none;width:8px;height:8px;border-radius:50%;background:var(--contraste);margin-top:.5em}
.verdict[data-etat="occupee"] .point{background:transparent;border:1.5px solid var(--texte-doux)}
.verdict[data-etat="inconnue"] .point{background:var(--texte-doux)}
.cartes-villa{display:grid;gap:clamp(16px,3vw,28px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.carte-villa{position:relative;background:var(--fond-relief);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;display:flex;flex-direction:column}
/* 17/09/2026 : la carte est blanche (marque claire) — l'accent y passe à sa
   variante profonde. En clair sur blanc, l'or tombait à 1,9:1. */
.carte-villa[data-villa="camelia"]{--accent:var(--or-camelia);--accent-texte:var(--or-camelia-profond)}
.carte-villa[data-villa="aron"]{--accent:var(--terracotta-aron);--accent-texte:var(--terracotta-aron-profond)}
.carte-villa::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent)}
.carte-villa .corps{padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:12px;flex:1}
.carte-villa h3{margin:0}
.carte-villa .etiquette{align-self:flex-start;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--accent);color:var(--accent-texte);padding:4px 10px;border-radius:var(--rayon)}
/* La villa occupée est mise en retrait — mais l'opacité vaut désormais sur du
   blanc : à 62 % le bouton tombait à 4,4:1, sous le seuil AA. À 78 % il tient 8:1
   et la carte reste visiblement en retrait. */
.carte-villa[data-etat="occupee"]{opacity:.78}
.carte-villa .actions{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap}

/* Pied de page */
.pied{border-top:1px solid var(--ligne);background:var(--fond-creux);
  margin-top:clamp(48px,8vw,96px);padding:36px 0;font-size:var(--t-sm);color:var(--texte-doux)}
.pied .enveloppe{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.pied a{color:var(--texte-doux)}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero — diptyque des deux villas, à poids strictement égal.
   Remplace le hero « la matière » : la cible est aspirationnelle, elle doit voir avant de croire.
   Le principe d'équité tient toujours : aucune villa n'est mise en avant sur l'autre.
   17/09/2026 — chaque moitié est devenue un LIEN vers sa villa. La section
   « Les deux villas » qui la répétait juste dessous a disparu (Khalid : « ça fait
   doublon ») : on entre dans une villa par sa photo, pas par une carte qui la
   redit en plus petit.
   La marque est passée au clair, mais PAS le hero : il vit sur des photos, donc
   il redéclare les jetons de nuit. Sur mobile, le bloc de marque descend sur la
   pierre et reprend l'encre (plus bas). */
.hero{position:relative;isolation:isolate;
  --titre:var(--ivoire-titre);--texte:var(--ivoire-texte);
  --texte-doux:var(--ivoire-doux);--contraste:var(--ivoire)}
.hero .duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--fond);
  height:clamp(420px,66vh,660px)}
.duo-figure{position:relative;overflow:hidden;background:var(--nuit-relief);margin:0;
  display:block;text-decoration:none;color:inherit}
.duo-figure img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);
  transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.duo-figure[data-villa="aron"] img{object-position:50% 62%}
.duo-figure:hover img,.duo-figure:focus-visible img{transform:scale(1.04);filter:saturate(1)}
.duo-figure:focus-visible{outline:2px solid var(--ivoire);outline-offset:-7px}
.duo-figure::after{content:"";position:absolute;inset:0;z-index:1;transition:opacity .45s ease;
  background:linear-gradient(to bottom,rgba(13,23,38,.52) 0%,rgba(13,23,38,.34) 40%,rgba(13,23,38,.70) 100%)}
.duo-figure:hover::after{opacity:.78}
/* Les noms sont en HAUT des deux photos : en bas, la barre de recherche couvrait celui
   de droite et rompait l'égalité entre les deux villas.
   L'invite est TOUJOURS visible, jamais réservée au survol : sur un téléphone il
   n'y a pas de survol, et rien ne dirait que la photo est cliquable. */
.duo-tete{position:absolute;left:0;right:0;top:0;z-index:2;
  padding:14px clamp(14px,2.4vw,26px) 30px;
  background:linear-gradient(to bottom,rgba(13,23,38,.80) 0%,rgba(13,23,38,0) 100%)}
.duo-nom{display:block;
  font-family:var(--serif);font-size:var(--t-sm);letter-spacing:.24em;text-transform:uppercase;
  color:#F6F8FB;text-shadow:0 1px 10px rgba(13,23,38,.75)}
.duo-nom::before{content:"";display:inline-block;width:22px;height:1px;background:var(--accent);
  vertical-align:middle;margin-right:12px;margin-bottom:3px}
.duo-invite{display:inline-flex;align-items:center;gap:9px;margin:10px 0 0 34px;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:#E9EEF5;
  text-shadow:0 1px 10px rgba(13,23,38,.85);
  border-bottom:1px solid rgba(233,238,245,.38);padding-bottom:4px;
  transition:border-color .3s ease}
.duo-invite .fleche{display:inline-block;transition:transform .3s ease}
.duo-figure:hover .duo-invite,.duo-figure:focus-visible .duo-invite{border-bottom-color:#E9EEF5}
.duo-figure:hover .duo-invite .fleche{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){
  .duo-figure img,.duo-invite .fleche{transition:none}
  .duo-figure:hover img{transform:none}}
.duo-figure[data-villa="aron"]{--accent:var(--terracotta-aron)}
.duo-figure[data-villa="camelia"]{--accent:var(--or-camelia)}

/* Le bloc de marque, à cheval sur la couture */
.hero-marque{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  text-align:center;padding:0 var(--espace);pointer-events:none}
.hero-marque::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(52% 46% at 50% 52%,rgba(13,23,38,.62) 0%,rgba(13,23,38,0) 100%)}
.hero-marque-inner{max-width:760px}
.hero .sceau-hero{width:clamp(52px,7vw,74px);height:auto;margin:0 auto clamp(14px,2.4vw,22px);
  filter:drop-shadow(0 2px 14px rgba(13,23,38,.9))}
.hero .nom{font-family:var(--serif);font-size:var(--t-sm);letter-spacing:.34em;text-transform:uppercase;
  color:var(--contraste);margin:0 0 14px;text-shadow:0 1px 12px rgba(13,23,38,.9)}
.hero h1{margin:0 auto;max-width:17ch;text-shadow:0 2px 26px rgba(13,23,38,.85)}

/* Mobile : les photos s'empilent et le bloc de marque passe SOUS elles, sur la
   pierre claire. En surimpression, la couture entre les deux photos traversait
   le titre. Comme il quitte la photo, il reprend l'encre de la marque. */
@media (max-width:720px){
  .hero .duo{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:clamp(380px,56vh,460px)}
  .duo-figure::after{background:linear-gradient(to bottom,rgba(13,23,38,.58) 0%,rgba(13,23,38,.30) 42%,rgba(13,23,38,.50) 100%)}
  .hero-marque{position:static;padding:clamp(26px,6vw,40px) var(--espace) 0;pointer-events:auto;
    --titre:#152238;--texte:#33404F;--texte-doux:#55626F;--contraste:#152238}
  .hero-marque::before{display:none}
  .hero h1,.hero .nom,.hero .sceau-hero{text-shadow:none;filter:none}
  .hero h1{font-size:clamp(1.95rem,8.2vw,2.5rem);max-width:14ch}
}

/* La barre chevauche le bas du hero : elle reste au-dessus du pli (variante A validée le 16/09) */
.hero + .barre{margin-top:clamp(-38px,-2.4vw,-28px);position:relative;z-index:4;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  box-shadow:0 26px 60px -34px rgba(21,34,56,.55)}
@media (max-width:720px){.hero + .barre{margin-top:clamp(18px,4vw,28px);backdrop-filter:none}}

/* Barre de recherche — un seul bandeau, trois blocs, un calendrier maison.
   Les champs date natifs (« jj/mm/aaaa ») étaient illisibles et pénibles à remplir. */
.barre{max-width:1020px;margin:clamp(28px,5vw,48px) auto 0;
  display:flex;align-items:stretch;
  background:var(--fond-relief);border:1px solid var(--ligne);border-radius:var(--rayon);
  box-shadow:0 22px 50px -34px rgba(21,34,56,.45);
  padding:0;text-align:left}
.hero + .barre{margin-top:clamp(-38px,-2.4vw,-28px);position:relative;z-index:4;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  box-shadow:0 26px 60px -34px rgba(21,34,56,.55)}
.barre-champs{flex:1;display:grid;grid-template-columns:1fr 1.5fr .85fr;min-width:0}
.bloc{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:13px clamp(14px,1.6vw,22px)}
.bloc + .bloc::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--ligne)}
.bloc > label,.bloc .intitule{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-doux);line-height:1}
.bloc select{appearance:none;-webkit-appearance:none;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2355626F' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right center/11px 7px;
  border:0;border-radius:0;padding:0 18px 0 0;min-height:0;width:100%;
  font-family:var(--sans);font-size:var(--t-md);color:var(--titre);line-height:1.3;cursor:pointer}
.bloc select:focus-visible{outline:2px solid var(--contraste);outline-offset:4px}
.barre .btn{border-radius:0;align-self:stretch;padding-inline:clamp(20px,2.6vw,34px);white-space:nowrap}

/* Le bloc « dates » : un seul déclencheur, deux valeurs */
.declencheur-dates{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:100%;min-width:0;background:transparent;border:0;padding:0;margin:0;
  font-family:var(--sans);color:var(--titre);text-align:left;cursor:pointer}
.declencheur-dates .valeur{font-size:var(--t-md);line-height:1.3;color:var(--titre);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.declencheur-dates[data-vide="oui"] .valeur{color:var(--texte-doux)}
.declencheur-dates .nuits{color:var(--texte-doux)}
.declencheur-dates:focus-visible{outline:2px solid var(--contraste);outline-offset:4px}
.bloc-dates{position:relative}

/* Le calendrier */
/* Le calendrier est une surface CLAIRE posée dans la barre, qui est SOMBRE sur les
   pages de villa et y retourne les jetons pour ses propres libellés. Sans cette
   remise d'aplomb, le panneau héritait du texte clair et se peignait clair sur clair :
   les dates disponibles tombaient à 1,09:1, invisibles. Repéré par Walid sur son
   téléphone le 21/09/2026 (« on n'a pas accès au calendrier »). Les valeurs viennent
   du corps de page, donc elles suivent l'univers de la villa. */
.calendrier{--titre:var(--clair-titre);--texte:var(--clair-texte);
  --texte-doux:var(--clair-texte-doux);--contraste:var(--clair-contraste);
  --ligne:var(--clair-ligne);
  position:absolute;z-index:40;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  min-width:min(660px,92vw);background:var(--fond-relief);
  border:1px solid var(--ligne);border-radius:var(--rayon);
  box-shadow:0 26px 60px -30px rgba(21,34,56,.55);padding:clamp(16px,2vw,22px);cursor:default}
.calendrier[hidden]{display:none}
.cal-mois{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px)}
.cal-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.cal-titre{font-family:var(--serif);font-size:1.06rem;color:var(--titre);text-align:center;flex:1;
  letter-spacing:.02em}
/* Les flèches de mois : Walid ne les voyait pas (21/09/2026, « pas assez visible,
   qu'on sache où appuyer »). Elles étaient transparentes, filet à 16 % d'opacité, et
   32x32 — sous les 44 px de cible tactile. Elles deviennent une surface pleine, sur le
   creux de l'univers, avec un chevron en contraste plein. Rien que des jetons de rôle. */
.cal-fleche{background:var(--fond-creux);border:1px solid var(--ligne);border-radius:var(--rayon);
  color:var(--contraste);width:44px;height:44px;cursor:pointer;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;line-height:1;
  transition:background-color .15s ease,border-color .15s ease}
.cal-fleche:hover:not(:disabled),.cal-fleche:focus-visible{background:var(--contraste);
  color:var(--fond-relief);border-color:var(--contraste)}
/* Désactivée = visible mais clairement inactive. À .28 elle disparaissait. */
.cal-fleche:disabled{opacity:.42;cursor:default;background:transparent}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-jour-nom{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--texte-doux);text-align:center;padding-bottom:6px}
.cal-case{position:relative;background:transparent;border:0;border-radius:var(--rayon);
  font-family:var(--sans);font-size:.94rem;color:var(--texte);
  aspect-ratio:1;min-height:38px;cursor:pointer;padding:0}
.cal-case:hover:not(:disabled){background:var(--fond-relief)}
.cal-case:disabled{color:var(--texte-doux);opacity:.34;cursor:default}
.cal-case[data-prise="oui"]:disabled{opacity:.42}
.cal-case[data-prise="oui"]::after{content:"";position:absolute;left:24%;right:24%;top:50%;height:1px;
  background:var(--texte-doux);opacity:.75}
.cal-case[data-dans-plage="oui"]{background:var(--fond-relief)}
.cal-case[data-bord]{background:var(--contraste);color:var(--fond-creux);font-weight:500}
.cal-case[data-bord="debut"]{border-radius:var(--rayon) 0 0 var(--rayon)}
.cal-case[data-bord="fin"]{border-radius:0 var(--rayon) var(--rayon) 0}
.cal-case[data-bord="seul"]{border-radius:var(--rayon)}
.cal-case[data-aujourdhui="oui"]:not([data-bord])::before{content:"";position:absolute;
  left:50%;transform:translateX(-50%);bottom:6px;width:3px;height:3px;border-radius:50%;background:var(--texte-doux)}
.cal-case.vide{visibility:hidden;cursor:default}
.cal-pied{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--ligne)}
.cal-etat{font-size:var(--t-sm);color:var(--texte-doux);min-width:0}
.cal-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.cal-lien{background:transparent;border:0;color:var(--texte-doux);cursor:pointer;
  font-family:var(--sans);font-size:var(--t-sm);text-decoration:underline;padding:6px 2px}
.cal-lien:hover{color:var(--contraste)}
.cal-valider{padding:10px 20px;font-size:var(--t-xs)}

@media (max-width:860px){
  .barre{flex-direction:column;padding:6px}
  .barre-champs{grid-template-columns:1fr 1fr}
  .bloc-dates{grid-column:1 / -1;order:-1}
  .bloc + .bloc::before{display:none}
  .bloc{border-bottom:1px solid var(--ligne);padding-inline:14px}
  .bloc-dates{border-bottom:1px solid var(--ligne)}
  .barre .btn{margin:10px 8px 8px;align-self:auto;border-radius:var(--rayon);height:50px}
  .calendrier{position:fixed;top:auto;left:8px;right:8px;bottom:8px;transform:none;
    min-width:0;max-height:82vh;overflow-y:auto;padding-bottom:0}
  .cal-mois{grid-template-columns:1fr}
  .cal-case{min-height:42px}
  /* le pied reste sous la main, même si la grille défile */
  .cal-pied{position:sticky;bottom:0;background:var(--fond-creux);margin-top:12px;
    padding-bottom:clamp(12px,3vw,16px)}
}
@media (max-width:720px){
  .hero + .barre{margin-top:clamp(18px,4vw,28px);backdrop-filter:none}
}

/* Sans JavaScript : les deux champs natifs restent utilisables.
   Le sélecteur les masque en posant [hidden] — d'où la règle explicite. */
.dates-natives{display:flex;gap:12px}
.dates-natives[hidden]{display:none}
.dates-natives .champ{flex:1;min-width:0}

/* ─── L'accueil, sous la barre de recherche ──────────────────────────────────
   Ce qui reste des cartes « Les deux villas » : les seuls faits que les photos
   ne disent pas. Trois colonnes, un filet, aucun aplat.
   ⚠️ La classe s'appelle `faits-accueil`, et celle des villas `faits-villa` :
   une classe `.faits` nue aurait attrapé les deux d'un coup. */
.reassurance{padding-block:clamp(38px,6.5vw,82px)}
.faits-accueil{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(18px,3vw,36px);grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.faits-accueil li{display:flex;flex-direction:column;gap:7px;
  padding-top:18px;border-top:1px solid var(--ligne)}
.faits-accueil b{font-family:var(--serif);font-weight:400;font-size:1.34rem;
  color:var(--titre);letter-spacing:.01em;line-height:1.25}
.faits-accueil span{color:var(--texte-doux);font-size:var(--t-sm);line-height:1.62}

/* ─── Pages de texte : confidentialité, mentions légales, conditions, cookies ─── */
.texte{max-width:760px;padding-block:clamp(28px,5vw,64px);font-size:1.02rem;line-height:1.72}
.texte h1{margin-bottom:.25em}
.texte h2{font-size:var(--t-xl);margin:clamp(30px,4.5vw,46px) 0 .5em}
.texte p,.texte li{color:var(--texte)}
.texte a{color:var(--contraste)}
.texte ul{padding-left:1.15em;display:grid;gap:8px}
.texte li::marker{color:var(--texte-doux)}
.texte .maj{color:var(--texte-doux);font-size:var(--t-sm);margin:0 0 clamp(20px,3vw,32px)}
.texte .chapo{font-size:1.1rem;color:var(--titre);border-left:2px solid var(--ligne);
  padding-left:18px;margin-bottom:clamp(20px,3vw,30px)}
.texte b{font-weight:500;color:var(--titre)}

/* Les tableaux ne débordent jamais : ils défilent dans leur propre cadre */
.tableau{width:100%;border-collapse:collapse;display:block;overflow-x:auto;
  margin:18px 0;font-size:var(--t-sm)}
.tableau th,.tableau td{border:1px solid var(--ligne);padding:11px 13px;text-align:left;
  vertical-align:top;min-width:150px}
.tableau th{color:var(--titre);font-weight:500;letter-spacing:.04em;background:var(--fond-relief)}

/* Ce qui manque encore au propriétaire — visible, jamais discret */
.a-completer{display:inline-block;font-weight:500;color:#8A4530;
  background:rgba(190,107,78,.12);border:1px dashed #C08A6A;border-radius:var(--rayon);
  padding:2px 9px;font-size:.94em}

/* Pied de page : les liens obligatoires */
.liens-pied{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-end}
.liens-pied a{color:var(--texte-doux);text-decoration:none;border-bottom:1px solid transparent}
.liens-pied a:hover,.liens-pied a:focus-visible{color:var(--contraste);border-bottom-color:var(--ligne)}
@media (max-width:620px){.liens-pied{justify-content:flex-start}}

/* Page introuvable */
.page-404{min-height:62vh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(40px,8vw,90px)}
.page-404 .sceau-404{width:clamp(54px,8vw,76px);height:auto;margin:0 auto clamp(18px,3vw,26px);opacity:.9}
.page-404 p{color:var(--texte-doux);max-width:46ch;margin-inline:auto}
.page-404 .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}

/* ─── « Les espaces » : ce qu'on voit vraiment en arrivant dans la villa ───
   Cette section vit sur la page d'une villa, jamais sur l'accueil : l'accueil
   sert à choisir une villa et des dates, la page villa sert à tout montrer. */
.espaces{padding-block:clamp(40px,7vw,88px)}
.espaces .intro{max-width:56ch;color:var(--texte-doux);margin:0 0 clamp(24px,4vw,40px)}

.espaces-grille{display:grid;gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.espace{position:relative;display:flex;flex-direction:column;
  background:var(--fond-relief);border:1px solid var(--ligne);border-radius:var(--rayon);
  overflow:hidden}
.espace::before{content:"";position:absolute;inset:0 0 auto;height:3px;z-index:2;background:var(--accent)}
.espace figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--fond-creux)}
.espace img{width:100%;height:100%;object-fit:cover}
.espace .corps{padding:clamp(16px,2.2vw,22px);display:flex;flex-direction:column;gap:8px}
.espace h3{margin:0;font-size:1.28rem}
.espace p{margin:0;color:var(--texte-doux);font-size:var(--t-sm);line-height:1.62}

/* ═══ Le jeu de photos d'une suite (18/09/2026, direction B validée par Walid) ═══
   La photo de tête ouvre la visionneuse sur les SEULES photos de cette suite ;
   la bande montre la suite du jeu — chambre, salle de bain, dressing — sans clic,
   parce que c'est cette preuve-là que la cible vient chercher. Au-delà de quatre
   vignettes, la dernière porte le reste (« +3 ») et les photos sans vignette
   restent dans le DOM sans image : la visionneuse les connaît, le navigateur ne
   les télécharge pas. */
.espace figure{position:relative}
.declencheur{position:absolute;inset:0;z-index:4;border:0;background:none;cursor:pointer}
.declencheur:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.bande{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:6px 6px 0}
.bande button{position:relative;padding:0;border:0;background:var(--fond-creux);cursor:pointer;
  height:clamp(58px,7.2vw,78px);overflow:hidden;border-radius:calc(var(--rayon) / 2)}
.bande img{width:100%;height:100%;object-fit:cover;display:block}
.bande button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bande .reste{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(20,18,16,.58);color:#fff;font-size:.86rem;letter-spacing:.03em}
@media (hover:hover){.bande button:hover img{transform:scale(1.06)}
  .bande img{transition:transform .35s}}

/* ═══ Les photos d'un espace (21/09/2026, demande de Walid) ═══
   Chaque carte de « Les espaces » ouvre la visionneuse sur les SEULES photos de
   ce lieu. Pas de bande de vignettes ici, contrairement aux suites : la carte
   doit rester légère. Un repère chiffré suffit à dire que la photo est une porte.
   Scopé à #espaces : les cartes des suites ont déjà leur propre langage. */
#espaces .compte-photos{position:absolute;z-index:3;right:10px;bottom:10px;
  padding:5px 11px;border-radius:calc(var(--rayon) / 2);
  background:rgba(20,18,16,.62);color:#fff;font-size:.78rem;letter-spacing:.04em;
  pointer-events:none}
@media (hover:hover){
  #espaces .espace figure img{transition:transform .5s}
  #espaces .espace figure:hover img{transform:scale(1.04)}
  #espaces .espace figure:hover .compte-photos{background:rgba(20,18,16,.82)}
}
@media (prefers-reduced-motion:reduce){
  #espaces .espace figure img,#espaces .espace figure:hover img{transition:none;transform:none}
}

/* La barre d'une page de villa est restée sombre (terre) : son chevron garde donc
   la teinte claire, pendant que celui de la marque est passé à l'encre. */
.page-villa[data-univers] .barre .bloc select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23E2D3BC' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")}

/* ═══ Page villa (lot 2) — le patron : Villa Aron ═══
   L'accent de la villa colore les filets et les étiquettes, jamais la marque. */
/* Chaque villa déclare son accent en TROIS états : la teinte pleine (filets),
   la variante claire (lisible sur fond sombre) et la variante profonde (lisible
   sur fond clair). --accent-texte désigne celle qui convient au fond du moment. */
.page-villa[data-villa="aron"]{--accent:var(--terracotta-aron);
  --accent-clair:var(--terracotta-aron-texte);--accent-profond:var(--terracotta-aron-profond);
  --accent-texte:var(--accent-clair)}
.page-villa[data-villa="camelia"]{--accent:var(--terre-camelia);
  --accent-clair:var(--terre-camelia-texte);--accent-profond:var(--terre-camelia-profond);
  --accent-texte:var(--accent-clair)}

/* ═══ Univers de villa (décision de Walid, 16/09/2026) ═══════════════════════
   Le bleu profond reste la MARQUE : en-tête, pied de page, accueil, recherche,
   pages légales. Mais la page d'une villa habite dans SON univers, parce que le
   bleu refroidissait les photos terracotta d'Aron. Un univers ne redéfinit que
   les jetons de rôle de tokens.css — jamais un composant.
   Ce bloc vient APRÈS celui des accents : à spécificité égale, il gagne, et
   l'accent passe donc à sa variante profonde, lisible sur fond clair. */
.page-villa[data-univers="sable"]{
  --fond:#F4ECDB; --fond-creux:#EADCC2; --fond-relief:#FBF6EA;
  --contraste:#34281F; --texte-doux:#6A5647; --texte:#4A3A2E; --titre:#34281F;
  --ligne:rgba(52,40,31,.16);
  --clair-titre:#34281F; --clair-texte:#4A3A2E; --clair-texte-doux:#6A5647;
  --clair-contraste:#34281F; --clair-ligne:rgba(52,40,31,.16);
  --accent-texte:var(--accent-profond);
  background-color:#F4ECDB;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='132' height='132'%3E%3Cpath fill='none' stroke='%2334281F' stroke-opacity='0.07' stroke-width='1' d='M17 17L36.331 17L50 3.331L63.669 17L83 17L83 36.331L96.669 50L83 63.669L83 83L63.669 83L50 96.669L36.331 83L17 83L17 63.669L3.331 50L17 36.331Z'/%3E%3Cpath fill='none' stroke='%2334281F' stroke-opacity='0.07' stroke-width='1' d='M50 30.201L69.799 50L50 69.799L30.201 50Z'/%3E%3C/svg%3E")}

/* Le cadre de la marque ne suit PAS l'univers de la villa — mais depuis le
   17/09/2026 la marque est claire, donc le cadre est en pierre, plus en bleu. */
.page-villa[data-univers="sable"] .entete,.page-villa[data-univers="sable"] .pied,
.page-villa[data-univers="sable"] .menu-mobile{
  --fond:#F4F5F3; --fond-creux:#E8EAE7; --fond-relief:#FFFFFF;
  --contraste:#152238; --texte-doux:#55626F; --texte:#33404F; --titre:#152238;
  --ligne:rgba(21,34,56,.14);
  /* le cadre est clair : l'accent y reprend sa variante profonde */
  --accent-texte:var(--accent-profond)}
.page-villa[data-univers="sable"] .entete{background:rgba(244,245,243,.94)}
.page-villa[data-univers="sable"] .pied{background:var(--fond-creux);margin-top:0;padding-top:36px}

/* Le hero garde son texte clair : il est posé sur la photo, pas sur le sable. */
.page-villa[data-univers="sable"] .hero-villa{--titre:#F4ECDB;--texte:#F4ECDB;--texte-doux:#EADCC2}
.page-villa[data-univers="sable"] .hero-villa::after{
  background:linear-gradient(to bottom,rgba(52,40,31,.38) 0%,rgba(52,40,31,.06) 40%,rgba(52,40,31,.70) 84%,rgba(52,40,31,.76) 100%)}
.page-villa[data-univers="sable"] .hero-villa h1 em{color:#F6DCC6}
.page-villa[data-univers="sable"] .hero-villa .btn-ligne{color:#F4ECDB;border-color:rgba(244,236,219,.5)}

/* Bouton plein : l'ivoire disparaîtrait sur le sable, l'accent prend sa place. */
.page-villa[data-univers="sable"] .btn{background:#A2543A;color:#fff}
.page-villa[data-univers="sable"] .btn:hover,.page-villa[data-univers="sable"] .btn:focus-visible{background:#8A4530}

/* La barre de recherche reste sombre : elle appartient au moteur, pas à la page. */
.page-villa[data-univers="sable"] .barre{background:rgba(52,40,31,.94);
  --titre:#F4ECDB;--texte:#F4ECDB;--texte-doux:#D9C7A8;--contraste:#F4ECDB;--ligne:rgba(244,236,219,.18)}

/* Cartes CLAIRES sur le sable — jamais de carte sombre sur fond beige. */
.page-villa[data-univers="sable"] .espace,.page-villa[data-univers="sable"] .carte-villa{
  background:#FBF6EA;border-color:rgba(52,40,31,.12);box-shadow:0 18px 40px -30px rgba(52,40,31,.35)}
.page-villa[data-univers="sable"] .relance{background:#EADCC2}
.page-villa[data-univers="sable"] .visionneuse{background:rgba(31,23,18,.97);
  --contraste:#F4ECDB;--texte-doux:#CDB99C;--titre:#FBF4E6;--ligne:rgba(244,236,219,.22)}

/* ── Univers CRÈME — Villa Camélia (maquette 1 retenue par Walid, 16/09/2026) ──
   Crème & terre rose : la couleur de ses murs et de son lin, mesurée sur ses
   photos. Distinct du sable d'Aron, qui est plus jaune (40°) là où Camélia est
   rosée (24°). Mêmes règles que l'univers sable : rien que des jetons de rôle. */
.page-villa[data-univers="creme"]{
  --fond:#F7EFE7; --fond-creux:#ECDFD2; --fond-relief:#FDF8F2;
  --contraste:#3A2A22; --texte-doux:#6E5346; --texte:#4C382E; --titre:#3A2A22;
  --ligne:rgba(58,42,34,.16);
  --clair-titre:#3A2A22; --clair-texte:#4C382E; --clair-texte-doux:#6E5346;
  --clair-contraste:#3A2A22; --clair-ligne:rgba(58,42,34,.16);
  --accent-texte:var(--accent-profond);
  background-color:#F7EFE7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='132' height='132'%3E%3Cpath fill='none' stroke='%233A2A22' stroke-opacity='0.07' stroke-width='1' d='M17 17L36.331 17L50 3.331L63.669 17L83 17L83 36.331L96.669 50L83 63.669L83 83L63.669 83L50 96.669L36.331 83L17 83L17 63.669L3.331 50L17 36.331Z'/%3E%3Cpath fill='none' stroke='%233A2A22' stroke-opacity='0.07' stroke-width='1' d='M50 30.201L69.799 50L50 69.799L30.201 50Z'/%3E%3C/svg%3E")}

/* Le cadre de la marque, en pierre claire (voir l'univers sable). */
.page-villa[data-univers="creme"] .entete,.page-villa[data-univers="creme"] .pied,
.page-villa[data-univers="creme"] .menu-mobile{
  --fond:#F4F5F3; --fond-creux:#E8EAE7; --fond-relief:#FFFFFF;
  --contraste:#152238; --texte-doux:#55626F; --texte:#33404F; --titre:#152238;
  --ligne:rgba(21,34,56,.14);
  /* le cadre est clair : l'accent y reprend sa variante profonde */
  --accent-texte:var(--accent-profond)}
.page-villa[data-univers="creme"] .entete{background:rgba(244,245,243,.94)}
.page-villa[data-univers="creme"] .pied{background:var(--fond-creux);margin-top:0;padding-top:36px}

/* Le hero de Camélia est BEAUCOUP plus clair que celui d'Aron : sans un voile
   renforcé, le nom de la villa et le titre deviennent illisibles. Mesuré. */
.page-villa[data-univers="creme"] .hero-villa{--titre:#F7EFE7;--texte:#F7EFE7;--texte-doux:#ECDFD2}
.page-villa[data-univers="creme"] .hero-villa::after{
  background:linear-gradient(to bottom,rgba(58,42,34,.58) 0%,rgba(58,42,34,.26) 34%,rgba(58,42,34,.62) 66%,rgba(58,42,34,.86) 88%,rgba(58,42,34,.90) 100%)}
.page-villa[data-univers="creme"] .hero-villa .nom{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.page-villa[data-univers="creme"] .hero-villa h1 em{color:#F3D6C5}
.page-villa[data-univers="creme"] .hero-villa .btn-ligne{color:#F7EFE7;border-color:rgba(247,239,231,.5)}

/* Bouton plein : le crème disparaîtrait sur le crème, l'accent prend sa place. */
.page-villa[data-univers="creme"] .btn{background:#8E4F3A;color:#fff}
.page-villa[data-univers="creme"] .btn:hover,.page-villa[data-univers="creme"] .btn:focus-visible{background:#743E2D}

/* La barre de recherche reste sombre : elle appartient au moteur, pas à la page. */
.page-villa[data-univers="creme"] .barre{background:rgba(58,42,34,.94);
  --titre:#F7EFE7;--texte:#F7EFE7;--texte-doux:#DFC9B8;--contraste:#F7EFE7;--ligne:rgba(247,239,231,.18)}

/* Cartes CLAIRES sur le crème — jamais de carte sombre sur fond beige. */
.page-villa[data-univers="creme"] .espace,.page-villa[data-univers="creme"] .carte-villa{
  background:#FDF8F2;border-color:rgba(58,42,34,.12);box-shadow:0 18px 40px -30px rgba(58,42,34,.35)}
.page-villa[data-univers="creme"] .relance{background:#ECDFD2}
.page-villa[data-univers="creme"] .visionneuse{background:rgba(32,22,17,.97);
  --contraste:#F7EFE7;--texte-doux:#D3BBA8;--titre:#FDF6EE;--ligne:rgba(247,239,231,.22)}
.page-villa .nav a[aria-current]{color:var(--accent-texte)}
.arche{border-radius:999px 999px var(--rayon) var(--rayon);overflow:hidden}

/* ═══ La vidéo de « l'adresse » (18/09/2026, demande de Khalid) ═══════════════
   Elle prend la place de la photo, dans la même arche et à la même proportion
   (2:3) pour que la section ne bouge pas d'un pixel. Le bouton n'apparaît que
   si le navigateur a REFUSÉ de lancer la vidéo — sur iPhone, c'est le mode
   Économie d'énergie, et il ne se contourne pas. */
.video-arche{position:relative;margin:0;background:var(--fond-creux)}
.video-arche video{display:block;width:100%;height:auto}
.video-lecture{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(20,18,16,.62);color:#fff;border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:9px 18px;font:inherit;font-size:.84rem;letter-spacing:.03em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.video-lecture::before{content:"";width:0;height:0;border-style:solid;
  border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
/* ⚠️ `display:inline-flex` ci-dessus écrase la règle [hidden]{display:none} du
   navigateur : sans cette ligne, le bouton reste affiché sur une vidéo qui tourne.
   Défaut trouvé en capture le 18/09/2026. */
.video-lecture[hidden]{display:none}
.video-lecture:hover{background:rgba(20,18,16,.84)}
.video-lecture:focus-visible{outline:2px solid #fff;outline-offset:2px}
.surtitre{display:block;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-texte);margin:0 0 12px}
.surtitre::before{content:"";display:inline-block;width:22px;height:1px;background:var(--accent);vertical-align:middle;margin-right:10px}
.section-villa{padding-block:clamp(40px,7vw,88px)}
.section-villa h2{max-width:20ch}
.section-villa .intro{max-width:56ch;color:var(--texte-doux);margin:0 0 clamp(24px,4vw,40px)}
.filet{border:0;border-top:1px solid var(--ligne);margin:0}

/* Hero de villa : la photo pleine largeur, le nom, le titre, les faits */
.hero-villa{position:relative;isolation:isolate;min-height:clamp(520px,82vh,780px);display:flex;align-items:flex-end;overflow:hidden}
.hero-villa picture,.hero-villa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-villa img{filter:saturate(.94)}
.hero-villa::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(13,23,38,.42) 0%,rgba(13,23,38,.10) 38%,rgba(13,23,38,.78) 82%,var(--fond) 100%)}
.hero-villa .enveloppe{width:100%;padding-block:clamp(28px,5vw,56px)}
.hero-villa .nom{font-family:var(--serif);font-size:var(--t-sm);letter-spacing:.34em;text-transform:uppercase;color:var(--titre);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.hero-villa .nom::before{content:"";display:inline-block;width:26px;height:1px;background:var(--accent)}
.hero-villa h1{max-width:14ch;margin:0;text-shadow:0 2px 26px rgba(13,23,38,.85)}
.hero-villa h1 em{font-style:italic;color:var(--texte-doux)}
/* 17/09/2026 — Walid : « trop de texte sur les images ». L'accroche, les trois
   faits et les deux boutons ont quitté la photo pour `.entree-villa`, juste sous
   la barre de recherche. Sur un téléphone, ces cinq blocs couvraient la villa
   entière et se lisaient mal, malgré le voile.
   21/09/2026 — L'ACCROCHE EST SUPPRIMÉE des deux pages (Khalid : « trop chargé »).
   Il ne reste que les trois faits. Rien n'est perdu : « une résidence privée,
   fermée et gardée » vit toujours dans la metadescription et dans « L'adresse »,
   et les trois chiffres de l'accroche étaient déjà dans les faits juste dessous.
   La règle .accroche est retirée avec elle : plus personne ne la porte. */
.entree-villa{padding-block:clamp(26px,4.6vw,46px)}
.faits-villa{display:flex;flex-wrap:wrap;gap:10px 28px;margin:20px 0 0;padding:0;list-style:none;
  font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--texte-doux)}
.faits-villa li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-right:10px;vertical-align:middle}
/* Les faits sont désormais seuls dans le bloc : leur marge haute n'a plus de
   paragraphe à décoller, elle ne ferait qu'ouvrir un vide sous la barre. */
.faits-villa:first-child{margin-top:0}
@media (max-width:720px){
  .hero-villa{min-height:clamp(480px,78vh,640px)}
  .hero-villa h1{font-size:clamp(2rem,9vw,2.6rem);max-width:12ch}
}

/* Barre de recherche sur une page villa : la villa est déjà choisie */
.page-villa .barre{margin-top:clamp(-38px,-2.4vw,-28px);position:relative;z-index:4;background:rgba(13,23,38,.90);backdrop-filter:blur(8px)}
@media (max-width:720px){.page-villa .barre{margin-top:clamp(18px,4vw,28px);backdrop-filter:none}}

/* L'adresse : texte + faits + photo en arche */
.deux-colonnes{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.deux-colonnes > figure{margin:0;aspect-ratio:4/5;background:var(--fond-creux)}
.deux-colonnes > figure img{width:100%;height:100%;object-fit:cover;display:block}
.deux-colonnes .lead{color:var(--texte);max-width:52ch}
.faits-cles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;margin:clamp(22px,3vw,32px) 0 0;padding:0;list-style:none}
.faits-cles li{border-top:1px solid var(--ligne);padding-top:12px}
.faits-cles b{display:block;font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.1;color:var(--titre)}
.faits-cles span{font-size:var(--t-sm);color:var(--texte-doux)}
@media (max-width:820px){.deux-colonnes{grid-template-columns:1fr}.deux-colonnes > figure{max-width:420px;margin-inline:auto;width:100%}}

/* Cinq suites : la même carte que « les espaces », plus une étiquette */
.suite .etiquette{align-self:flex-start;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-texte);border:1px solid var(--accent);padding:4px 9px;border-radius:var(--rayon)}
.suite figure{aspect-ratio:3/2}
/* Le nom de la suite annonce ses photos (19/09/2026, direction B validée par Walid) :
   étiquette puis nom, posés sur un filet, AVANT la photo — la section « Les suites »
   manquait de distinction (demande de Khalid). Même retrait que le corps de la carte. */
.suite .tete{display:flex;flex-direction:column;gap:6px;
  padding:clamp(16px,2.2vw,22px) clamp(16px,2.2vw,22px) 11px;
  margin:0 0 clamp(12px,1.6vw,16px);border-bottom:1px solid var(--ligne)}
.suite .tete h3{margin:0;font-size:clamp(1.32rem,2vw,1.62rem);line-height:1.15}
.suite .tete .etiquette{margin:0}
.suites-note{color:var(--texte-doux);font-size:var(--t-sm);max-width:60ch;margin:clamp(18px,3vw,26px) 0 0}

/* Pièce signature : la table de zellige */
.signature-tete{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:end;margin-bottom:clamp(22px,3vw,34px)}
.signature-tete blockquote,.signature-tete .manifeste{margin:0;padding-left:18px;border-left:2px solid var(--accent);font-family:var(--serif);font-size:1.15rem;line-height:1.5;color:var(--titre)}
.signature-tete cite{display:block;font-style:normal;font-size:var(--t-sm);color:var(--texte-doux);margin-top:10px}
.signature-grande{margin:0;aspect-ratio:16/8;overflow:hidden;background:var(--fond-creux);border-radius:var(--rayon)}
.signature-grande img{width:100%;height:100%;object-fit:cover;display:block}
.signature-grande figcaption{font-size:var(--t-sm);color:var(--texte-doux);padding:10px 0 0}
.signature-details{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(16px,2.4vw,26px);margin-top:clamp(16px,2.4vw,26px);align-items:stretch}
.signature-details figure{margin:0;overflow:hidden;background:var(--fond-creux);border-radius:var(--rayon)}
.signature-details figure:first-child{aspect-ratio:3/2}
.signature-details figure:last-child{aspect-ratio:auto;height:100%;min-height:0}
.signature-details img{width:100%;height:100%;object-fit:cover;display:block}
.signature-faits{display:flex;flex-wrap:wrap;gap:10px 26px;margin:clamp(18px,3vw,26px) 0 0;padding:0;list-style:none;font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--texte-doux)}
.signature-faits li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle}
@media (max-width:820px){.signature-tete{grid-template-columns:1fr}.signature-grande{aspect-ratio:4/3}.signature-details{grid-template-columns:1fr 1fr}.signature-details figure:last-child{aspect-ratio:3/2;height:auto}}

/* Le séjour : six services numérotés */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,3vw,36px) clamp(18px,3vw,40px)}
.service{border-top:1px solid var(--ligne);padding-top:16px}
.service .n{font-family:var(--serif);font-size:var(--t-sm);letter-spacing:.2em;color:var(--accent-texte);margin:0 0 10px}
.service h3{font-size:1.15rem;margin:0 0 8px}
.service p{margin:0;color:var(--texte-doux);font-size:var(--t-sm);line-height:1.62}

/* Situation : distances */
.distances{margin:clamp(20px,3vw,28px) 0 0;padding:0;list-style:none;max-width:520px}
.distances li{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--ligne);padding:12px 0}
.distances li:last-child{border-bottom:1px solid var(--ligne)}
.distances .v{font-family:var(--serif);color:var(--titre);white-space:nowrap}

/* Galerie : grille dense, huit photos d'abord, le reste au clic */
/* ═══ Pages de MARQUE (lot 4) — /le-domaine, /experiences, /journal ══════════
   Elles parlent des DEUX villas : elles ne peuvent donc emprunter l'accent
   d'aucune des deux. L'accent y est l'encre de la marque — pierre + encre,
   sans métal (spec D11). Sans cette déclaration, --accent serait indéfini et
   les filets des surtitres disparaîtraient purement et simplement. */
.page-marque{--accent:var(--contraste);--accent-clair:var(--contraste);
  --accent-profond:var(--contraste);--accent-texte:var(--contraste)}
/* Le lien de nav de la page courante : sur une page de villa c'est l'accent qui
   le distingue, mais ici l'accent EST l'ivoire du texte — il faut donc autre
   chose que la couleur, sinon la page courante ne se voit pas du tout. */
/* L'en-tête est masquée sous 720 px (`.nav{display:none}`) et rien ne la remplace :
   le pied de page est donc la SEULE navigation d'un visiteur mobile. Sans cette
   rangée, /le-domaine et /experiences seraient tout simplement injoignables. */
/* Le pied passe en colonne : la marque, puis les pages du site, puis le légal.
   En ligne, les deux rangées de liens se retrouvaient côte à côte et la rangée
   de contenu se perdait au milieu du légal. */
.pied .enveloppe{flex-direction:column;align-items:flex-start;gap:18px}
.pied .liens-pied{justify-content:flex-start}
.pied .liens-pied-site a{color:var(--titre)}
.pied .liens-pied-site{padding-bottom:16px;border-bottom:1px solid var(--ligne);width:100%}

.page-marque .nav a[aria-current]{color:var(--titre);border-bottom:1px solid var(--contraste);padding-bottom:3px}

/* Le diptyque des deux villas, à poids strictement égal. */
.duo-villas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,20px)}
.duo-villas figure{margin:0;position:relative;overflow:hidden;border-radius:var(--rayon);
  aspect-ratio:4/3;background:var(--fond-creux)}
.duo-villas img{width:100%;height:100%;object-fit:cover;display:block}
.duo-villas figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-family:var(--serif);font-size:1.05rem;color:#F6F8FB;
  background:linear-gradient(to top,rgba(13,23,38,.82),rgba(13,23,38,0))}
@media (max-width:640px){.duo-villas{grid-template-columns:1fr}}

/* Les expériences : aucune photo d'activité n'existe dans les sources des deux
   villas — les cartes sont donc typographiques. Le jour où Khalid en fournit,
   il suffira d'ajouter une <figure> en tête de carte. */
.cartes-exp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2.4vw,26px)}
.carte-exp{position:relative;padding:clamp(22px,2.8vw,30px);background:var(--fond-relief);
  border:1px solid var(--ligne);border-radius:var(--rayon);display:flex;flex-direction:column;gap:12px}
.carte-exp .cat{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-texte);margin:0}
.carte-exp h2,.carte-exp h3{margin:0;font-size:1.3rem;max-width:none}
.carte-exp p{margin:0;color:var(--texte-doux);font-size:var(--t-sm);line-height:1.62}
.carte-exp--sur-mesure{background:transparent;border-style:dashed}

/* Le rappel des conditions, sobre, sous la grille. */
.note-exp{margin:clamp(22px,3vw,32px) 0 0;padding:16px 18px;border-left:2px solid var(--accent);
  color:var(--texte-doux);font-size:var(--t-sm);line-height:1.62;max-width:72ch}

/* Le compteur du domaine : les chiffres qu'aucune villa ne peut afficher seule. */
.compte-domaine{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(18px,2.6vw,30px);margin:clamp(26px,4vw,40px) 0 0;padding:0;list-style:none}
.compte-domaine li{border-top:1px solid var(--ligne);padding-top:14px}
.compte-domaine b{display:block;font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.05;color:var(--titre);font-weight:400}
.compte-domaine span{display:block;font-size:var(--t-sm);color:var(--texte-doux);margin-top:6px}

/* ═══ Équipements, avis, questions fréquentes ═══════════════════════════════
   21/09/2026 — LES ÉQUIPEMENTS PASSENT EN ONGLETS (demande de Walid, qui a vu
   un composant équivalent ailleurs et le trouve plus professionnel).
   La réserve écrite ici le 13/09 (« Google n'ouvre pas les onglets ») était
   excessive : les panneaux masqués restent DANS LE HTML, donc indexés. Ce qui
   serait perdu, c'est du contenu injecté par JS — ce n'est pas le cas ici.

   Sans JavaScript, la barre d'onglets n'apparaît pas et les cinq groupes
   restent affichés côte à côte, exactement comme avant : le masquage n'est
   autorisé que sous html[data-onglets="oui"], posé par onglets-init.js. */
.equipements{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,3vw,40px)}

/* ── Barre d'onglets ── */
.onglets{display:none}
html[data-onglets="oui"] .equipements{display:block}
html[data-onglets="oui"] .onglets{display:flex;gap:4px;margin-bottom:clamp(26px,3.5vw,38px);
  padding-bottom:0;border-bottom:1px solid var(--ligne);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html[data-onglets="oui"] .onglets::-webkit-scrollbar{display:none}
.onglet{flex:0 0 auto;appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-doux);padding:12px clamp(12px,1.6vw,20px);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .2s ease,border-color .2s ease;white-space:nowrap}
.onglet:hover{color:var(--titre)}
.onglet[aria-selected="true"]{color:var(--accent-texte);border-bottom-color:var(--accent)}
.onglet:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:2px}

/* ── Panneaux ── */
html[data-onglets="oui"] .equip-groupe{display:none}
html[data-onglets="oui"] .equip-groupe[data-actif]{display:block;animation:onglet-entre .28s ease both}
html[data-onglets="oui"] .equip-groupe h3{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Colonnes ÉQUILIBRÉES (columns, pas grid) : un groupe de sept lignes remplit
   trois colonnes courtes au lieu de deux rangées trouées sur quatre colonnes.
   La garde-hauteur évite que la page saute d'un onglet à l'autre. */
html[data-onglets="oui"] .equip-groupe ul{columns:238px;column-gap:clamp(22px,3vw,40px)}
html[data-onglets="oui"] .equip-groupe li{break-inside:avoid}
html[data-onglets="oui"] .equip-groupe{min-height:10.5em}
html[data-onglets="oui"] .equip-groupe:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--rayon)}
@keyframes onglet-entre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html[data-onglets="oui"] .equip-groupe[data-actif]{animation:none}}
.equip-groupe h3{font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-texte);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--ligne)}
.equip-groupe ul{margin:0;padding:0;list-style:none}
.equip-groupe li{position:relative;padding:5px 0 5px 20px;font-size:var(--t-sm);color:var(--texte-doux);line-height:1.5}
.equip-groupe li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:7px;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}

.note-bloc{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(22px,3vw,34px);background:var(--fond-relief);
  border:1px solid var(--ligne);border-radius:var(--rayon);margin-bottom:clamp(24px,4vw,40px)}
.note-chiffre b{display:block;font-family:var(--serif);font-size:clamp(3rem,7vw,4.2rem);line-height:1;color:var(--titre)}
.note-chiffre span{display:block;font-size:var(--t-sm);letter-spacing:.06em;color:var(--accent-texte);margin-top:8px}
.note-chiffre p{margin:14px 0 0;font-size:var(--t-sm);color:var(--texte-doux);line-height:1.55;max-width:34ch}
.note-detail{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 28px}
.note-detail li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--ligne);padding:9px 0}
.note-detail .k{font-size:var(--t-sm);color:var(--texte-doux)}
.note-detail .v{font-family:var(--serif);color:var(--titre)}

.avis-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.6vw,28px)}
.avis{margin:0;padding:clamp(20px,2.6vw,28px);background:var(--fond-relief);
  border:1px solid var(--ligne);border-radius:var(--rayon);display:flex;flex-direction:column}
.avis blockquote{margin:0 0 18px;font-size:var(--t-sm);line-height:1.68;color:var(--texte)}
.avis blockquote::before{content:"«\00a0"}
.avis blockquote::after{content:"\00a0»"}
.avis figcaption{margin-top:auto;padding-top:14px;border-top:1px solid var(--ligne);
  display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.avis .qui{font-family:var(--serif);font-size:1.05rem;color:var(--titre)}
.avis .quand{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--texte-doux)}

.faq details{border-top:1px solid var(--ligne)}
.faq details:last-of-type{border-bottom:1px solid var(--ligne)}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-family:var(--serif);font-size:1.12rem;color:var(--titre);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.faq details p{margin:0 0 20px;padding-right:34px;color:var(--texte-doux);font-size:var(--t-sm);line-height:1.68;max-width:74ch}

/* Le lien vers le site propre de la villa. UN SEUL endroit : le jour de la bascule
   301, cette section part, sinon le visiteur reviendrait en boucle sur cette page. */
.lien-site{text-align:center;padding:0 0 clamp(34px,5vw,58px)}
.lien-site p{color:var(--texte-doux);font-size:var(--t-sm);max-width:46ch;margin:0 auto 16px}
.lien-site a{color:var(--accent-texte);text-decoration:none;font-size:var(--t-sm);
  letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--accent);padding-bottom:6px}
.lien-site a:hover,.lien-site a:focus-visible{color:var(--titre);border-bottom-color:var(--titre)}

@media (max-width:820px){
  .note-bloc{grid-template-columns:1fr;gap:24px}
}

.galerie{display:grid;gap:clamp(8px,1.2vw,14px);grid-template-columns:repeat(4,1fr)}
.galerie figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--fond-creux);border-radius:var(--rayon);position:relative}
.galerie figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.galerie figure:hover img,.galerie figure:focus-visible img{transform:scale(1.03)}
.galerie figure[hidden]{display:none}
.galerie .ouvrir{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;cursor:zoom-in;padding:0;margin:0}
.galerie-pied{display:flex;justify-content:center;margin-top:clamp(18px,3vw,26px)}
@media (max-width:820px){.galerie{grid-template-columns:repeat(2,1fr)}}

/* Visionneuse */
.visionneuse{position:fixed;inset:0;z-index:50;background:rgba(13,23,38,.96);display:flex;align-items:center;justify-content:center;padding:clamp(52px,8vw,72px) clamp(12px,4vw,72px)}
.visionneuse[hidden]{display:none}
.visionneuse figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.visionneuse img{max-width:100%;max-height:calc(100vh - clamp(120px,18vw,170px));object-fit:contain;border-radius:var(--rayon)}
.visionneuse figcaption{font-size:var(--t-sm);color:var(--texte-doux);display:flex;gap:16px;align-items:center}
.visionneuse figcaption .compte{font-family:var(--serif);color:var(--titre)}
.vis-btn{position:absolute;background:transparent;border:1px solid var(--ligne);color:var(--contraste);width:46px;height:46px;border-radius:50%;
  font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vis-btn:hover,.vis-btn:focus-visible{border-color:var(--contraste)}
.vis-fermer{top:14px;right:14px}
.vis-prec{left:12px;top:50%;transform:translateY(-50%)}
.vis-suiv{right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:720px){.vis-prec,.vis-suiv{top:auto;bottom:14px;transform:none}.vis-prec{left:14px}.vis-suiv{right:14px}}

/* Relance de fin de page */
.relance{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);padding-block:clamp(36px,6vw,64px);text-align:center}
.relance h2{margin:0 auto 10px;max-width:none}
.relance p{color:var(--texte-doux);margin:0 auto 22px;max-width:48ch}
.relance .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ── Les tarifs de la Villa Camélia (17/09/2026) ─────────────────────────────
   Repris TELS QUELS du site de Khalid, qui les publie déjà publiquement sur
   le site propre de la villa (250 / 362 / 500). Afficher un autre
   chiffre aurait contredit, de deux cents euros, le site du même propriétaire
   encore en ligne et indexé. Rien pour la Villa Aron : aucun tarif n'existe
   nulle part pour elle, et on n'en invente pas.
   Règle de charte (Walid) : jamais de carte sombre sur un fond clair. Les trois
   saisons se distinguent par la TYPOGRAPHIE et des filets, jamais par un aplat ;
   l'accent ne sert qu'au symbole de la devise. */
.tarifs{display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--fond-relief);
  margin:0 0 clamp(20px,3vw,28px);overflow:hidden}
.tarif{padding:clamp(24px,3vw,34px) clamp(16px,2vw,26px);text-align:center;
  border-left:1px solid var(--ligne)}
.tarif:first-child{border-left:0}
.tarif .montant{font-family:var(--serif);font-size:clamp(2.1rem,5vw,2.9rem);line-height:1;
  color:var(--titre);margin:0}
.tarif .devise{font-size:.5em;color:var(--accent-texte);margin-left:.14em;vertical-align:.52em}
.tarif .par{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-doux);margin:10px 0 0}
.tarif .saison{font-family:var(--serif);font-size:1.05rem;color:var(--titre);
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--ligne)}
.tarif .mois{font-size:var(--t-sm);color:var(--texte-doux);margin:4px 0 0}
.tarifs-note{color:var(--texte-doux);font-size:var(--t-sm);max-width:64ch;margin:0}
@media (max-width:720px){
  /* Sur un téléphone, trois colonnes rendraient les nombres minuscules : chaque
     saison devient une rangée, le nombre à gauche, la saison à droite. */
  .tarifs{grid-template-columns:1fr}
  .tarif{border-left:0;border-top:1px solid var(--ligne);text-align:left;
    display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center;
    padding:20px clamp(16px,4vw,24px)}
  .tarif:first-child{border-top:0}
  .tarif .montant{grid-row:1;grid-column:1}
  .tarif .par{grid-row:2;grid-column:1;margin:4px 0 0}
  .tarif .saison{grid-row:1;grid-column:2;border-top:0;padding-top:0;margin:0}
  .tarif .mois{grid-row:2;grid-column:2;margin:4px 0 0}
}

/* ── Le mouvement ───────────────────────────────────────────────────────────
   RÈGLE D'OR : rien n'est masqué hors de html[data-motion="oui"], attribut que
   seul motion-init.js pose. Pas de JS, un JS en erreur, ou un mouvement réduit
   demandé → la page s'affiche entière. Une page vide, c'est une demande perdue.
   La courbe cubic-bezier(.2,.7,.2,1) est déjà celle du diptyque (ligne 171). */
html[data-motion="oui"] [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html[data-motion="oui"] [data-reveal][data-vu="oui"]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html[data-motion="oui"] [data-reveal]{opacity:1;transform:none;transition:none}}

/* Le geste signature : l'image se dévoile du bas vers le haut À TRAVERS la courbe
   de l'arche. 900 ms — plus lent que le socle, parce que c'est ce qu'on doit
   remarquer. L'arche remplace le fondu du socle, elle ne s'y ajoute pas. */
html[data-motion="oui"] .arche[data-reveal]{opacity:1;transform:none}
html[data-motion="oui"] .arche[data-reveal] img{
  clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.2,.7,.2,1)}
html[data-motion="oui"] .arche[data-reveal][data-vu="oui"] img{clip-path:inset(0 0 0 0)}
/* La vidéo de « L'adresse » (Camélia, livrée le 18/09) garde son comportement. */
html[data-motion="oui"] .video-arche[data-reveal] img,
html[data-motion="oui"] .video-arche[data-reveal] video{clip-path:none;transition:none}

/* Le filet du surtitre se trace de gauche à droite. */
.surtitre{position:relative;padding-bottom:10px}
.surtitre::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:1px;
  background:var(--accent);transform-origin:left center}
html[data-motion="oui"] [data-reveal] .surtitre::after,
html[data-motion="oui"] .surtitre[data-reveal]::after{
  transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.7,.2,1) .15s}
html[data-motion="oui"] [data-reveal][data-vu="oui"] .surtitre::after,
html[data-motion="oui"] .surtitre[data-reveal][data-vu="oui"]::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  html[data-motion="oui"] .arche[data-reveal] img{clip-path:none;transition:none}
  html[data-motion="oui"] [data-reveal] .surtitre::after,
  html[data-motion="oui"] .surtitre[data-reveal]::after{transform:none;transition:none}}

/* ── Le rythme ──────────────────────────────────────────────────────────────
   Les 13 sections d'une page villa partagent aujourd'hui une seule largeur
   (.enveloppe, max-width:1180px) : c'est ça, l'« empilement ». On introduit
   trois temps qui alternent. Le temps 1 (texte + image côte à côte) est l'état
   actuel : il n'a pas de classe, puisqu'il ne change rien.
   Rien ne bouge tant que <body> ne porte pas data-rythme.
   .enveloppe et la classe de rythme sont posées sur le MÊME élément (une
   <section class="enveloppe … rythme-etroit">, jamais un parent et son
   enfant) : les sélecteurs ci-dessous sont donc composés (.enveloppe.rythme-*),
   sans combinateur, pour cibler cet unique élément. */
body[data-rythme] .enveloppe.rythme-large{max-width:none}
body[data-rythme] .enveloppe.rythme-etroit{margin-left:auto;margin-right:auto}

/* max() en plancher : sans lui, min(88vw,1440px) et min(96vw,1680px)
   rétrécissent la section en dessous de la largeur par défaut de .enveloppe
   (max-width:1180px, ligne 3) tant que la fenêtre n'a pas dépassé
   respectivement 1341px et 1230px — l'inverse exact de l'intention du temps
   « large ». Le plancher (1180px) doit rester identique au max-width de
   .enveloppe ci-dessus. */
body[data-rythme="douce"] .enveloppe.rythme-large{width:max(1180px, min(88vw,1440px))}
body[data-rythme="douce"] .enveloppe.rythme-etroit{
  max-width:756px;transform:translateX(8%)}

body[data-rythme="franche"] .enveloppe.rythme-large{width:max(1180px, min(96vw,1680px))}
body[data-rythme="franche"] .enveloppe.rythme-etroit{
  max-width:614px;transform:translateX(18%)}
body[data-rythme="franche"] .rythme-etroit .arche{
  width:calc(100% + 16%);max-width:none}

/* Sous 1180 px, tout revient dans l'axe : un désaxage sur un écran de téléphone
   ne se lit pas comme une intention, il se lit comme un bug de marge. Le seuil
   est celui du plancher ci-dessus (1180px), pas 900px : entre les deux, le
   plancher forçait une largeur de 1180px dans une fenêtre plus étroite — la
   page débordait horizontalement pour quiconque entre 901 et 1179px (iPad en
   paysage, petits portables, fenêtre non maximisée). Sous 1180px, le rythme
   n'a de toute façon pas la place de s'exprimer : autant revenir dans l'axe,
   exactement comme avant ce chantier. */
@media (max-width:1179px){
  body[data-rythme] .enveloppe.rythme-large,
  body[data-rythme] .enveloppe.rythme-etroit{
    width:auto;max-width:1180px;transform:none}
  body[data-rythme="franche"] .rythme-etroit .arche{width:100%}}

/* La mention de traitement des données, au point de collecte : le pied de page
   ne suffit pas, l'information doit être sous les yeux au moment où on saisit. */
.note-collecte{margin:0;font-size:var(--t-xs);line-height:1.6;color:var(--texte-doux)}
/* Le lien porte un soulignement : sur cette page la couleur d'accent retombe sur
   celle du texte, un lien coloré seul serait invisible. */
.note-collecte a{color:inherit;text-decoration:underline;text-underline-offset:.2em}