/* ════════════════════════════════════════════════════════════
The Lys Spa — Correctifs mobile & composants partagés
Chargé EN DERNIER dans le : gagne par ordre de cascade
à spécificité égale. 80% des clientes sont sur téléphone.
════════════════════════════════════════════════════════════ */
/* ── GLOBAL (tous écrans) ───────────────────────────────────── */
/* Empêche iOS d'agrandir/rétrécir le texte de façon imprévisible */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Éléments mobiles injectés par i18n.js : masqués par défaut (desktop).
La media query ≤640px les rallume. */
.m-nav,
.m-menu,
.m-menu-overlay { display: none; }
/* Curseur custom actif (classe posée sur par le JS, desktop non
tactile uniquement) : masquer le curseur natif sur TOUS les éléments,
sinon les liens/boutons réaffichent la main (cursor:pointer). */
html.cur-none, html.cur-none * { cursor: none !important; }
/* ── ACCESSIBILITÉ ──────────────────────────────────────────── */
/* Navigation clavier : contour doré visible sur l'élément focusé.
:focus-visible ne s'affiche qu'au clavier (pas au clic souris). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--gold, #B8965A) !important;
outline-offset: 3px;
}
/* Réduction des animations (réglage système des personnes sensibles
au mouvement) : tout passe en quasi-instantané. Les animations
`forwards` sautent à leur état final, les `infinite` (marquee,
particules) s'arrêtent après 1 itération. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001s !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001s !important;
transition-delay: 0s !important;
}
html { scroll-behavior: auto !important; }
/* Pas de curseur custom (l'anneau qui suit la souris = mouvement) */
.cur-dot, .cur-ring, .cursor-dot, .cursor-ring { display: none !important; }
body { cursor: auto !important; }
html.cur-none, html.cur-none * { cursor: auto !important; }
}
/* Curseur custom (dot + ring) : JAMAIS sur mobile/tactile.
Corrige aussi un bug des pages apropos/contact/tarifs dont la règle
≤640px masquait .cursor-dot/.cursor-ring alors que les éléments
s'appellent .cur-dot/.cur-ring. */
@media (max-width: 640px), (hover: none), (pointer: coarse) {
.cur-dot, .cur-ring, .cursor-dot, .cursor-ring { display: none !important; }
body { cursor: auto !important; }
}
/* Sélecteur de langue dans le pied de page (visible sur tous les écrans) */
.f-lang {
display: flex; align-items: center; gap: 10px;
margin-top: 18px;
}
.f-lang-label {
font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
color: var(--muted, #8a7c6a); font-family: 'Jost', sans-serif;
}
/* Lien « Conditions générales » dans la ligne de copyright du pied de page */
.f-copy a {
color: var(--gold, #B8965A); text-decoration: none; transition: color .2s;
}
.f-copy a:hover { color: var(--beige, #E8D4B0); }
/* Emplacement photo réutilisable : cadre vide élégant aux couleurs
de la DA, en attendant les vraies photos de la cliente.
Usage :
Variantes de ratio : .photo-slot--wide / --portrait / --square */
.photo-slot {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background:
radial-gradient(120% 120% at 50% 35%, rgba(184,150,90,.06), transparent 60%),
linear-gradient(135deg, #0d0a0b 0%, #14100f 100%);
border: 1px solid rgba(184,150,90,.22);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.photo-slot--wide { aspect-ratio: 16 / 9; }
.photo-slot--portrait { aspect-ratio: 3 / 4; }
.photo-slot--square { aspect-ratio: 1 / 1; }
/* Coins dorés discrets : signale un cadre « en attente d'image » */
.photo-slot::before,
.photo-slot::after {
content: "";
position: absolute;
width: 22px; height: 22px;
border: 1px solid rgba(184,150,90,.45);
}
.photo-slot::before { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.photo-slot::after { bottom: 14px; right: 14px; border-left: none; border-top: none; }
/* Libellé central (icône + texte data-photo) */
.photo-slot > .photo-slot-label,
.photo-slot[data-photo]::placeholder { display: none; }
.photo-slot-inner {
text-align: center;
color: rgba(184,150,90,.55);
font-family: 'Jost', sans-serif;
font-size: 11px;
letter-spacing: .28em;
text-transform: uppercase;
pointer-events: none;
padding: 0 16px;
}
.photo-slot-inner svg { display: block; margin: 0 auto 10px; opacity: .6; }
/* Quand une vraie est posée dans le slot, elle remplit le cadre
et masque la décoration d'attente. */
.photo-slot > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.photo-slot:has(> img)::before,
.photo-slot:has(> img)::after,
.photo-slot:has(> img) .photo-slot-inner { display: none; }
/* Section galerie « Nos espaces » : grille d'emplacements photo */
.sec-gallery { padding: 120px 64px; }
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 56px;
}
@media (max-width: 980px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── MOBILE ≤ 640px ─────────────────────────────────────────── */
@media (max-width: 640px) {
.sec-gallery { padding: 80px 20px; }
.gallery-grid { grid-template-columns: 1fr; gap: 14px; }
/* Hero : en plein écran (100vh) il laisse de grands vides haut/bas.
On le ramène à la hauteur de son contenu + marges confortables. */
.hero {
height: auto !important;
min-height: 0 !important;
padding: 96px 0 72px;
}
/* 1. CIBLES TACTILES ≥ 44px (recommandation Apple/WCAG) ─────── */
/* Sélecteur de langue (injecté par i18n.js APRÈS ce fichier →
on force avec !important pour gagner la cascade) */
.lang-switch { gap: 2px !important; }
.lang-btn {
min-width: 44px !important;
min-height: 44px !important;
font-size: 13px !important;
padding: 0 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.lang-sep { font-size: 13px !important; }
/* Steppers du tunnel de réservation (−/+ personnes & enfants) :
34px → 44px. C'est le chemin qui rapporte de l'argent. */
.s1b-btn {
width: 44px !important;
height: 44px !important;
font-size: 22px !important;
}
/* Liens & boutons de pied de page : zone tactile confortable.
(La nav mobile est gérée par .m-nav ci-dessous.) */
.f-col a, .f-social a, .back-link {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.f-col li { margin-bottom: 4px; }
/* ── NAV MOBILE : Réserver (gauche) · logo (centre) · ☰ (droite) ──
On masque la nav desktop et on affiche la barre injectée .m-nav. */
nav > .nav-links,
nav > .nav-logo,
nav > .nav-right { display: none !important; }
/* La barre reste épinglée en haut pendant tout le scroll.
La page met nav en `sticky`, mais body{overflow-x:hidden} casse
le sticky (body devient conteneur de défilement) → on force `fixed`,
qui se positionne par rapport au viewport quoi qu'il arrive.
:not(.m-menu-links) → ne pas arracher le