/* ============================================================ */
/* PAGE HÉBERGEMENTS — thème jour (jaune soleil)                */
/* Styles propres à la page : hero, intro séjour, types de      */
/* couchages, confort, répertoire des 37 hébergements (filtres) */
/* Réutilise au maximum les composants partagés de styles.css.  */
/* ============================================================ */

/* ===== HERO — titre à gauche, image à droite ; les 37 noms (MAJUSCULES, plus petits)
   défilent en fond, estompés et masqués côté titre pour qu'il reste lisible. ===== */
.h-hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;padding:clamp(48px,8vh,84px) 0}
/* Fond : rangées de noms (MAJUSCULES) qui défilent, masquées à gauche (zone du titre) */
.hh-bg{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.8vh,22px);pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 28%,#000 60%,#000 100%);
  mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 28%,#000 60%,#000 100%)}
.hh-row{display:flex;white-space:nowrap;will-change:transform}
.hh-row--a{animation:hh-scroll 55s linear infinite}
.hh-row--b{animation:hh-scroll 55s linear infinite reverse}
.hh-row > span{display:inline-flex;flex:0 0 auto;align-items:center}          /* groupe de noms */
.hh-row > span > span{font-family:'Londrina Solid',serif;font-weight:400;font-size:clamp(22px,2.7vw,42px);line-height:1.1;color:var(--fg);opacity:.14;letter-spacing:.03em;text-transform:uppercase;display:inline-flex;align-items:center}
.hh-row > span > span::after{content:"·";margin:0 .5em;opacity:.6}
@keyframes hh-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Grille : titre à gauche, image à droite */
.hh-inner{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,72px);align-items:center}
.hh-title{font-family:'Londrina Solid',serif;font-weight:400;font-size:clamp(40px,5.8vw,90px);line-height:.95;letter-spacing:-.005em;color:var(--fg);margin:0;
  opacity:0;transform:translateY(16px);animation:hh-in 1s cubic-bezier(.2,.7,.2,1) .1s forwards}
.hh-title .brand{font-size:1em}
.hh-title-tail{display:block;font-family:'Parkinsans',sans-serif;font-weight:700;font-size:clamp(14px,1.4vw,20px);letter-spacing:.05em;text-transform:uppercase;opacity:.66;margin-top:.85em}
@keyframes hh-in{to{opacity:1;transform:translateY(0)}}
/* Image (forme distincte du hero Mariage : grand rectangle arrondi, pas l'arche) */
.hh-media{margin:0;justify-self:end;height:clamp(330px,58vh,540px);aspect-ratio:4/5;width:auto;border-radius:26px;overflow:hidden;box-shadow:0 44px 100px -52px rgba(60,40,0,.62);
  opacity:0;transform:translateY(22px);animation:hh-in 1.1s cubic-bezier(.2,.7,.2,1) .22s forwards}
.hh-media img{width:100%;height:100%;object-fit:cover;display:block;animation:hh-zoom 24s ease-in-out infinite alternate}
@keyframes hh-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@media(max-width:860px){
  .hh-inner{grid-template-columns:1fr;gap:clamp(26px,5vh,44px);text-align:center}
  .hh-media{justify-self:center;height:auto;width:min(360px,82%);aspect-ratio:4/5}
  .hh-title-tail{margin-top:.7em}
  /* Mobile : les noms occupent la MOITIÉ BASSE (à partir du milieu du hero), sur TOUTE la
     largeur, en arrière-plan de l'image (titre en haut → masque vertical, plus horizontal).
     Mots AGRANDIS (≈ taille du H1) et resserrés (vertical + séparateur) pour une texture dense. */
  .hh-bg{inset:46% 0 0 0;justify-content:center;gap:clamp(4px,1.1vh,12px);
    -webkit-mask:linear-gradient(180deg,transparent 0%,#000 20%,#000 100%);
            mask:linear-gradient(180deg,transparent 0%,#000 20%,#000 100%)}
  .hh-row > span > span{font-size:clamp(30px,9vw,44px)}
  .hh-row > span > span::after{margin:0 .3em}
}
@media(max-width:760px){.h-hero{min-height:100svh}}
@media(prefers-reduced-motion:reduce){
  .hh-row--a,.hh-row--b,.hh-media img{animation:none}
  .hh-title,.hh-media{animation:none;opacity:1;transform:none}
}

/* ===== Lead éditorial sous le hero (intro « dormir sur place ») ===== */
.h-intro{padding:clamp(70px,10vh,120px) 0 clamp(50px,7vh,90px)}
/* Image à gauche (colonne étroite), texte à droite (colonne large) ; le texte reste en
   premier dans le DOM (SEO/a11y), l'image est replacée à gauche via order:-1. */
.h-intro-grid{display:grid;grid-template-columns:.95fr 1.25fr;gap:clamp(40px,5vw,84px);align-items:center}
.h-intro .h-lead{font-family:'Parkinsans',sans-serif;font-weight:300;font-size:clamp(20px,1.8vw,30px);line-height:1.42;margin:0 0 24px}
.h-intro .s-body{max-width:56ch}
.h-intro .s-body p + p{margin-top:14px}
/* width:100% → l'image remplit sa colonne ; order:-1 la place dans la colonne de gauche */
.h-intro-media{order:-1;position:relative;margin:0;width:100%;height:clamp(420px,54vh,580px);border-radius:220px 220px 24px 24px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(60,40,0,.55)}
.h-intro-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.h-intro-media:hover img{transform:scale(1.04)}
/* Mobile : empilé, on rétablit l'ordre du DOM (texte d'abord, image ensuite). */
@media(max-width:880px){.h-intro-grid{grid-template-columns:1fr;gap:34px}.h-intro-media{order:0}}

/* ===== Stats : 6 chiffres clés (grille 3 colonnes) ===== */
.h-stats{padding:0 0 clamp(80px,11vh,130px)}
.h-stats .stats-grid{grid-template-columns:repeat(3,1fr)}
/* libellés longs (« chambres doubles ou triples »…) : on autorise le retour à la ligne sous le chiffre */
.h-stats .stat-num{align-items:flex-end}
.h-stats .stat-num .unit{white-space:normal;max-width:11ch;line-height:1.25}
@media(max-width:880px){.h-stats .stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.h-stats .stats-grid{grid-template-columns:1fr}}

/* ===== Répertoire des hébergements (filtres + grille de cards) ===== */
.h-repertoire{padding:clamp(80px,11vh,140px) 0}
.h-repertoire .m-head{margin-bottom:34px}

/* ===== Suite nuptiale MISE EN AVANT — image pleine + texte incrusté (version chic) ===== */
.h-suite{position:relative;overflow:hidden;border-radius:26px;margin:0 auto clamp(38px,5vh,58px);max-width:1040px;box-shadow:0 54px 120px -56px rgba(40,26,0,.6)}
.h-suite.is-zoomable{cursor:pointer}
/* Slider : images empilées en fondu */
.h-suite-slider{position:relative;height:clamp(360px,54vh,540px)}
.h-suite-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease, transform 1.6s cubic-bezier(.2,.6,.2,1)}
.h-suite-img.is-active{opacity:1}
.h-suite:hover .h-suite-img.is-active{transform:scale(1.045)}
/* Puces du slider en haut à droite (le tag est en haut à gauche, le texte en bas) */
.h-suite-slider .h-dots{top:clamp(16px,2vw,26px);bottom:auto;left:auto;right:clamp(16px,2vw,26px);justify-content:flex-end;z-index:4}
/* Indice « voir les photos » au survol */
.h-zoom-hint{position:absolute;z-index:4;bottom:clamp(24px,4vw,50px);right:clamp(24px,4vw,50px);
  font-family:'Parkinsans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);padding:8px 16px;border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.h-suite:hover .h-zoom-hint,.h-suite:focus-visible .h-zoom-hint{opacity:1;transform:translateY(0)}
@media(max-width:600px){.h-zoom-hint{display:none}}
.h-suite::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,11,3,0) 28%,rgba(18,11,3,.28) 56%,rgba(18,11,3,.84) 100%)}
/* Tag « glass » élégant (≠ pastille pleine des autres cartes) */
.h-suite-tag{position:absolute;top:clamp(16px,2vw,26px);left:clamp(16px,2vw,26px);z-index:3;
  font-family:'Parkinsans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.55);padding:9px 18px;border-radius:999px;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.h-suite-content{position:absolute;left:0;right:0;bottom:0;z-index:3;color:#fff;padding:clamp(26px,4vw,52px)}
.h-suite-content h3{font-family:'Londrina Solid',serif;font-weight:400;font-size:clamp(34px,4.8vw,66px);line-height:.98;margin:0;text-shadow:0 6px 32px rgba(0,0,0,.45)}
.h-suite-sub{font-family:'Parkinsans',sans-serif;font-style:italic;font-size:clamp(15px,1.4vw,20px);opacity:.92;margin:6px 0 0;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.h-suite-meta{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.65em;margin:clamp(14px,2vh,20px) 0 0;padding:0;
  font-family:'Parkinsans',sans-serif;font-weight:500;font-size:clamp(12px,1.05vw,14px);letter-spacing:.1em;text-transform:uppercase;opacity:.94}
.h-suite-meta li{display:flex;align-items:center}
.h-suite-meta li:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;margin-left:.65em;opacity:.7}
@media(max-width:720px){.h-suite-slider{height:clamp(320px,62vh,440px)}}

/* Barre de filtres — fond transparent, contour fin (uniformisé avec les filtres Galerie, plus léger) */
.h-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto clamp(34px,4.5vh,52px)}
.h-filter{font-family:'Parkinsans',sans-serif;font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--fg);background:transparent;border:1.5px solid color-mix(in srgb,var(--fg) 26%,transparent);border-radius:999px;padding:10px 20px;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.h-filter:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fg) 50%,transparent)}
.h-filter.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* Grille de cards — MAÇONNERIE (colonnes) : gère les hauteurs variables (cartes avec carrousel
   plus hautes, cartes sans photo réduites au texte) sans laisser de trous. */
.h-lodgings{columns:4;column-gap:14px}
.h-lodging{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 14px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,opacity .4s ease}
.h-lodging:hover{transform:translateY(-3px);box-shadow:0 22px 48px -32px rgba(60,40,0,.5)}
.h-lodging.is-hidden{display:none}
/* Zone visuelle : soit un mini-carrousel de photos ([data-carousel]), soit un emplacement
   réservé (placeholder) pour les hébergements sans photo. À terme : 0, 1 ou N photos via Notion. */
.h-lodging-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,#fff),color-mix(in srgb,var(--accent) 7%,#fff));display:grid;place-items:center}
.h-lodging-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.h-lodging:hover .h-lodging-visual img{transform:scale(1.05)}
/* Mini-carrousel : images empilées en fondu, puces de navigation */
.h-lodging-visual[data-carousel] img{opacity:0;transition:opacity .9s ease, transform 1.2s cubic-bezier(.2,.6,.2,1)}
.h-lodging-visual[data-carousel] img.is-active{opacity:1}
.h-dots{position:absolute;left:0;right:0;bottom:10px;z-index:3;display:flex;justify-content:center;gap:6px}
.h-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:width .3s ease,background .3s ease;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.h-dots button.is-on{width:18px;border-radius:99px;background:#fff}
/* Badge des cartes : même style « glass » que le tag de la suite (cohérence) */
.h-lodging-visual .h-badge{position:absolute;top:12px;left:12px;z-index:4;font-family:'Parkinsans',sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);padding:6px 12px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 6px rgba(0,0,0,.35)}
/* Carte cliquable (avec photos) → curseur main + léger overlay au survol */
.h-lodging.is-zoomable{cursor:pointer}
.h-lodging.is-zoomable .h-lodging-visual::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(18,11,3,0);transition:background .3s ease}
.h-lodging.is-zoomable:hover .h-lodging-visual::after{background:rgba(18,11,3,.14)}
.h-lodging-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.h-lodging-body h3{font-family:'Londrina Solid',serif;font-weight:400;font-size:21px;line-height:1.05;margin:0}
.h-lodging-meta{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13px;opacity:.82}
.h-lodging-meta li{display:flex;gap:8px;align-items:baseline}
.h-lodging-meta .lbl{flex:0 0 auto;font-weight:600;letter-spacing:.02em;opacity:.7}
.h-empty{display:none;text-align:center;font-size:15px;opacity:.7;padding:40px 0}
.h-empty.is-shown{display:block}
@media(max-width:980px){.h-lodgings{columns:3}}
@media(max-width:680px){.h-lodgings{columns:2}}
@media(max-width:420px){.h-lodgings{columns:1}}

/* ===== Bloc « confort pour votre mariage » : statement centré + CTA ===== */
/* Statement — sans fond blanc : texte à gauche, illustration lavande animée à droite */
.h-statement{padding:clamp(80px,11vh,140px) 0}
.h-statement-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,6vw,90px);align-items:center}
.h-statement-copy .s-title{margin:0 0 22px}
.h-statement-copy .s-body{max-width:54ch}
.h-statement-copy .btn-line{margin-top:30px}
/* Lavande GLOBALE du site (lavande-rangee.svg + animation illuWind, comme home/Mariage) */
.h-statement-illu{justify-self:center;width:min(420px,92%)}
.h-statement-illu .lavfield{width:100%;height:auto;display:block;transform-box:fill-box;transform-origin:50% 100%;animation:illuWind 4.8s ease-in-out infinite}
@media(max-width:820px){
  .h-statement-grid{grid-template-columns:1fr;text-align:center}
  .h-statement-copy .s-body{max-width:60ch;margin-left:auto;margin-right:auto}
  .h-statement-illu{grid-row:1;width:min(300px,70%)}
}
@media(prefers-reduced-motion:reduce){.h-statement-illu .lavfield{animation:none}}

/* ===== Lightbox (galerie photos d'un hébergement / de la suite) — repris de galerie.css ===== */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);background:rgba(13,2,30,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.lb.is-open{opacity:1;visibility:visible}
.lb-stage{position:relative;max-width:1180px;width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.lb-figure{margin:0;max-width:100%;max-height:80vh;display:flex;align-items:center;justify-content:center}
.lb-figure img{max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:14px;object-fit:contain;box-shadow:0 40px 120px -40px rgba(0,0,0,.7)}
.lb-caption{color:#f3eede;font-family:'Parkinsans',sans-serif;font-weight:400;font-size:14px;letter-spacing:.02em;text-align:center;opacity:.92;min-height:1.2em}
.lb-caption .lb-count{opacity:.55;margin-left:10px;font-size:12px;letter-spacing:.1em}
.lb-btn{position:absolute;z-index:3;width:54px;height:54px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);transition:background .25s ease,transform .25s ease}
.lb-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.lb-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-close{top:clamp(-4px,2vh,8px);right:0}
.lb-prev{left:clamp(2px,1vw,12px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(2px,1vw,12px);top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06)}
@media(max-width:680px){.lb-prev{left:6px}.lb-next{right:6px}.lb-btn{width:46px;height:46px}}