/* ==========================================================
   Azur Stay — theme.css · couche design v3.5
   Raffinement typographique, boutons, cartes, réservation.
   Chargée après les styles de page : gagne à spécificité égale.
   ========================================================== */

/* --- Échelle typographique modulaire (ratio 1.25) + clamp() --- */
h1{font-size:clamp(2.1rem,4.6vw + .8rem,3.55rem);line-height:1.08;letter-spacing:-.015em}
h2{font-size:clamp(1.55rem,2.4vw + .6rem,2.3rem);line-height:1.16;letter-spacing:-.01em}
h3{font-size:clamp(1.18rem,1.1vw + .7rem,1.45rem);line-height:1.3}
.lead{font-size:clamp(1.02rem,.5vw + .85rem,1.16rem);line-height:1.72}
p{line-height:1.7}

/* --- Boutons : états, focus, cohérence --- */
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:focus-visible{outline:3px solid var(--gold,#C9A84C);outline-offset:2px}
a:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:2px;border-radius:4px}
.btn-primary{background:linear-gradient(135deg,var(--azure,#1273a3),var(--sea,#0d4a63));color:#fff;border:0;box-shadow:0 10px 24px -12px rgba(13,74,99,.55)}
.btn-primary:hover{box-shadow:0 14px 30px -12px rgba(13,74,99,.6);color:#fff}

/* --- Cartes logements : relief doux, survol discret --- */
.card{transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 55px -24px rgba(10,55,68,.5)}
.card-media img{transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.04)}
.card-tag{backdrop-filter:blur(4px)}
.card-ls .card-media{background:linear-gradient(150deg,var(--sea,#0d4a63),var(--azure,#1273a3))}

/* --- Sidebar réservation (fiches) --- */
.bk-perks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.bk-perks li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink-soft,#4C5C61);line-height:1.45}
.bk-perks svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--azure,#1273a3)}
.bk-notice{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:rgba(201,168,76,.14);border:1px solid rgba(201,168,76,.4);color:var(--ink,#15282E);font-size:.9rem;line-height:1.5}
.bk-unavail{display:inline-block;margin:0 0 10px;padding:4px 10px;border-radius:999px;background:rgba(201,168,76,.16);border:1px solid rgba(201,168,76,.45);color:var(--gold-deep,#A8862F);font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}

/* --- Module Smoobu : réserve d'espace anti-CLS --- */
.smoobu-shell{min-height:820px}
@media (max-width:720px){.smoobu-shell{min-height:1050px}}

/* --- Micro-interactions douces --- */
.reveal{will-change:transform,opacity}
.chip{transition:background .18s ease}

/* --- Accessibilité : skip-link --- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink,#15282E);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}

/* --- Respect de prefers-reduced-motion --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .card:hover,.btn:hover{transform:none}
  .card:hover .card-media img{transform:none}
}

/* --- Réseaux sociaux (footer) --- */
.foot-social{display:flex;gap:12px;margin-top:14px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:currentColor;transition:background .18s ease,transform .18s ease,border-color .18s ease}
.foot-social a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.foot-social svg{width:19px;height:19px}
[dir="rtl"] .foot-social{justify-content:flex-start}

/* --- Galeries fiches : mosaïque robuste pour N photos (portrait ou paysage) ---
   Corrige le chevauchement : l'ancienne grille avait une hauteur FIGÉE (440px)
   prévue pour 3 photos exactement. Ici : rangées automatiques, cellules à ratio
   fixe 4/3 + object-fit:cover — fonctionne pour 3, 6, 7 photos ou plus. */
.gallery{grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:auto;grid-auto-flow:row;height:auto;align-items:stretch}
.gallery .g{position:relative;overflow:hidden;aspect-ratio:4/3;min-height:0}
.gallery .g:first-child{grid-column:1/3;grid-row:1/3;aspect-ratio:auto}
.gallery .g img{position:static;display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:760px){
  .gallery{grid-template-columns:1fr;height:auto}
  .gallery .g{aspect-ratio:4/3}
  .gallery .g:first-child{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  /* ré-afficher les photos que l'ancienne mosaïque masquait en mobile */
  .gallery .g:nth-child(4),.gallery .g:nth-child(5){display:block}
}

/* --- Widget Smoobu : iframe toujours visible + lien de secours --- */
.smoobu-shell iframe{display:block;width:100%;min-height:780px;border:0}
@media (max-width:720px){.smoobu-shell iframe{min-height:1000px}}
.smoobu-fallback{text-align:center;margin-top:14px;color:var(--ink-soft,#4C5C61);font-size:.95rem}
.smoobu-fallback .btn{margin-left:8px}
[dir="rtl"] .smoobu-fallback .btn{margin-left:0;margin-right:8px}