/* Ajustements d'intégration VidaBela (2026-10-22), chargés après les
   feuilles livrées par Codex, sans modifier leur design :
   le premier écran tient entièrement dans la partie visible de l'écran,
   quelle que soit sa hauteur, avec de l'air au-dessus et en dessous. */

/* Ordinateur et tablette en largeur */
@media (min-width: 801px) {
  .hero{min-height:0;height:calc(100svh - var(--header-height));max-height:900px;display:flex;flex-direction:column;justify-content:center}
  .hero-content{padding-top:clamp(16px,4svh,48px);padding-bottom:clamp(64px,11svh,100px)}
  .hero-location{margin-bottom:clamp(10px,2.6svh,26px)}
  .hero h1{font-size:clamp(44px,min(5.7vw,10.2svh),82px)}
  .hero-description{font-size:clamp(16px,2.5svh,19px);margin-top:clamp(12px,2.6svh,26px)}
  .hero-detail{margin-top:clamp(8px,1.6svh,14px)}
  .hero-actions{margin-top:clamp(14px,3svh,28px)}
  .hero-note{margin-top:clamp(8px,1.6svh,16px)}
  .hero-footnote{bottom:clamp(18px,3.5svh,35px)}
}
@media (min-width: 801px) and (max-height: 700px){.hero-detail{display:none}}

/* Téléphone et tablette en hauteur : visuel, titre, accroche, bouton,
   prix, et le rappel des programmes, dans la hauteur de l'écran */
@media (max-width: 800px) {
  .hero-portrait{height:min(355px,40svh)}
  .hero-location{margin-bottom:calc(min(355px,40svh) - 100px)}
  .hero-content{padding-top:18px;padding-bottom:12px}
  .hero h1{font-size:clamp(38px,min(12vw,7.4svh),64px)}
  .hero-description{margin-top:14px;font-size:clamp(15px,2.4svh,16px)}
  .hero-detail{display:none}
  .hero-actions{margin-top:16px}
  .hero-actions .button{min-height:52px}
  .hero-actions .text-link{min-height:40px;padding-block:6px}
  .hero-note{margin-top:4px}
  .hero-footnote{padding-top:12px;padding-bottom:14px}
}
@media (max-width: 800px) and (max-height: 740px){.hero-actions .text-link{display:none}.hero-portrait{height:min(355px,34svh)}.hero-location{margin-bottom:calc(min(355px,34svh) - 100px)}}
@media (max-width: 800px) and (max-height: 600px){.hero-portrait{height:30svh}.hero-location{margin-bottom:calc(30svh - 92px)}.hero h1{font-size:clamp(36px,11vw,46px)}}

/* Téléphone : les commandes du carrousel quittent l'image (où elles
   couvraient les visages) pour une petite ligne sous le prix ; fit.js les
   y déplace et les remet en place au-delà de 800 px. */
@media (max-width: 800px) {
  .hero-content>.carousel-controls{position:static;align-self:center;display:flex;gap:2px;margin-top:6px;padding:0;background:none}
  .hero-content>.carousel-controls .carousel-pause{min-height:36px;min-width:36px;justify-content:center;pointer-events:auto}
  .hero-content>.carousel-controls .carousel-pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero-content>.carousel-controls .carousel-dot{height:36px;pointer-events:auto}
  .hero-footnote{padding-top:10px;padding-bottom:12px}
}
@media (max-width: 800px) and (max-height: 600px){.hero h1{font-size:clamp(34px,10vw,42px)}.hero-description{margin-top:10px}.hero-actions{margin-top:12px}.hero-footnote strong{font-size:20px}}

/* Espagnol et portugais, plus longs : premier écran resserré sur téléphone */
@media (max-width:420px){
  html[lang="es"] .hero h1,html[lang="pt"] .hero h1{font-size:clamp(34px,10.4vw,44px)}
  html[lang="es"] .hero-description,html[lang="pt"] .hero-description{font-size:15px;line-height:1.5}
  html[lang="es"] .hero-location,html[lang="pt"] .hero-location{font-size:10.5px}
}
@media (max-width:400px){
  html[lang="es"] .hero-location,html[lang="pt"] .hero-location{flex-wrap:nowrap;white-space:nowrap}
  html[lang="es"] .hero-location>span:last-child,html[lang="pt"] .hero-location>span:last-child{display:none}
  html[lang="es"] .hero-actions .button,html[lang="pt"] .hero-actions .button{font-size:12.5px}
  html[lang="es"] .header-cta,html[lang="pt"] .header-cta{font-size:11px;gap:6px}
}
@media (max-width:400px) and (max-height:600px){html[lang="pt"] .hero h1{font-size:clamp(32px,9.6vw,40px)}html[lang="pt"] .hero-description{font-size:14px}}
.site-header .header-cta{white-space:nowrap}

/* Note Google au-dessus du premier bouton (signe de confiance, comme sur
   l'accueil et les pages laser et cryo) : logo G, étoiles dorées, note */
.hero-rating{display:flex;align-items:center;gap:8px;margin-top:clamp(14px,3svh,26px);font:500 14px/1.2 'DM Sans',sans-serif;color:rgba(248,245,239,.8)}
.hero-rating-g{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;border-radius:50%;background:#fff}
.hero-rating-g svg{width:14px;height:14px}
.hero-rating-stars{color:var(--gold);letter-spacing:2px;font-size:14px}
.hero-rating + .hero-actions{margin-top:14px}
@media (max-width:800px){.hero-rating{margin-top:12px;font-size:13px}.hero-rating + .hero-actions{margin-top:10px}}
/* La ligne d'avis prend ~28 px : sur les téléphones à petit écran, le
   visuel rend cette place pour que le premier écran tienne toujours */
@media (max-width:800px) and (max-height:740px){.hero-portrait{height:calc(min(355px,34svh) - 30px)}.hero-location{margin-bottom:calc(min(355px,34svh) - 130px)}}
@media (max-width:800px) and (max-height:600px){.hero-portrait{height:calc(30svh - 32px)}.hero-location{margin-bottom:calc(30svh - 124px)}}

/* Le premier écran ne passe jamais sous le menu (2026-10-23) : sur les
   écrans d'ordinateur peu hauts (portable, zoom Windows à 125 %), le
   contenu centré débordait par le haut et était coupé sous l'en-tête.
   « safe center » le fait déborder vers le bas s'il manque de place, et
   le texte de détail se retire plus tôt pour que tout tienne. */
@media (min-width: 801px) {
  .hero{justify-content:safe center}
  .hero h1{font-size:clamp(40px,min(5.7vw,9svh),82px)}
}
@media (min-width: 801px) and (max-height: 860px){.hero-detail{display:none}}
@media (min-width: 801px) and (max-height: 600px){.hero{height:auto;min-height:calc(100svh - var(--header-height))}}