/* ============================================================================= GRAND CHAPITRE — Cnaturel — spa-relaxation.css Rôle : styles UNIQUEMENT pour /spa-relaxation/index.php Objectifs : - design moderne, lisible, cohérent avec les pages 2026 - compatible PC / mobile / tablette - SEO friendly (aucun contenu masqué) - accessibilité (focus visible, prefers-reduced-motion) Règle Cnaturel : - Tout chemin dans un CSS = chemin relatif au fichier CSS, jamais absolu /… ============================================================================= */ /* ============================================================================= GRAND CHAPITRE 1 — BASE PAGE ============================================================================= */ .spa-page-body{ /* cible le de la page spa */ background: #ffffff; /* fond blanc propre et neutre */ color: var(--ink, #2e2e2e); /* couleur de texte principale avec variable si dispo */ } /* ============================================================================= GRAND CHAPITRE 2 — CONTENEUR PAGE ============================================================================= */ .spa-page{ /* conteneur principal du contenu */ max-width: 1200px; /* largeur max confortable sur grand écran */ margin: 0 auto; /* centre horizontalement */ padding: 34px 16px 70px; /* espace haut / côtés / bas */ } @media (max-width: 700px){ /* adaptation mobile */ .spa-page{ padding: 22px 14px 54px; /* padding un peu réduit sur petit écran */ } } /* ============================================================================= GRAND CHAPITRE 3 — HERO (MEDIA + TEXTE) ============================================================================= */ .spa-hero{ /* bloc hero global : slider + texte */ display: grid; /* mise en page en grille */ grid-template-columns: 1.15fr 0.72fr; /* colonne image plus large que colonne texte */ gap: 18px; /* espace entre les deux colonnes */ align-items: stretch; /* force les deux colonnes à s’aligner en hauteur */ margin-top: 10px; /* petit espace après le header / intro */ } @media (max-width: 980px){ /* bascule tablette / mobile */ .spa-hero{ grid-template-columns: 1fr; /* empile image puis texte sur une seule colonne */ } } .spa-hero-media{ /* bloc qui contient le slider + la légende */ opacity: 0; /* départ invisible pour animation d’entrée */ transform: translateY(20px); /* départ légèrement décalé vers le bas */ animation: heroFade 0.9s ease forwards; /* animation douce à l’arrivée */ border-radius: 18px; /* coins arrondis du bloc */ overflow: hidden; /* coupe ce qui dépasse des coins arrondis */ border: 1px solid var(--border, #e6e6e6); /* bord discret */ box-shadow: 0 14px 20px rgba(0,0,0,.08); /* ombre douce */ background: #f7f7f7; /* fond de sécurité avant chargement image */ } .spa-hero-content{ /* colonne texte du hero */ opacity: 0; /* départ invisible pour animation d’entrée */ transform: translateY(20px); /* départ légèrement décalé vers le bas */ animation: heroFade 0.9s ease forwards; /* même animation que le média */ animation-delay: 0.35s; /* léger retard pour arriver après le slider */ border-radius: 18px; /* coins arrondis */ border: 1px solid var(--border, #e6e6e6); /* bord discret */ background: #ffffff; /* fond blanc */ box-shadow: 0 14px 32px rgba(0,0,0,.06); /* ombre plus diffuse côté texte */ padding: 18px 18px 16px; /* respiration interne */ } .spa-hero-content h1{ /* titre principal du hero */ margin: 0 0 5px; /* pas de marge en haut, petite marge en bas */ font-size: clamp(1.9rem, 3.6vw, 2.1rem); /* taille fluide, bornée min/max */ line-height: 1.12; /* interligne serré, élégant pour un H1 */ letter-spacing: -0.01em; /* léger resserrement des lettres */ } .spa-lead{ /* paragraphe d’introduction principal */ margin: 0 0 8px; /* espace sous le lead */ color: var(--muted, #555555); /* ton légèrement adouci */ line-height: 1.6; /* lecture confortable */ } .spa-hero-content p{ /* paragraphes généraux dans le bloc texte */ margin: 0 0 12px; /* espace entre paragraphes */ line-height: 1.65; /* lecture souple */ color: var(--ink, #2e2e2e); /* couleur texte principale */ } .spa-hero-content p:last-of-type{ /* dernier paragraphe du bloc texte */ margin-bottom: 14px; /* un peu d’air en bas */ } @keyframes heroFade{ /* animation d’apparition du hero */ to{ opacity: 1; /* fin visible */ transform: translateY(0); /* fin à sa position normale */ } } @media (prefers-reduced-motion: reduce){ /* respect des utilisateurs sensibles aux animations */ .spa-hero-media, .spa-hero-content{ animation: none; /* supprime l’animation */ opacity: 1; /* contenu visible immédiatement */ transform: none; /* pas de décalage */ } } /* ============================================================================= GRAND CHAPITRE 4 — DIAPORAMA (SLIDER) ============================================================================= */ .spa-slider{ /* conteneur global du slider */ position: relative; /* base de positionnement pour slides et dots */ aspect-ratio: 8 / 5; /* ratio desktop du diaporama */ width: 100%; /* prend toute la largeur disponible */ background: #f2f2f2; /* fond de secours avant chargement */ border-radius: 18px; /* coins arrondis */ overflow: hidden; /* masque ce qui dépasse */ } @media (max-width: 980px){ /* adaptation tablette */ .spa-slider{ min-height: 360px; /* garde une hauteur mini si le ratio devient insuffisant */ } } @media (max-width: 700px){ /* adaptation mobile */ .spa-slider{ min-height: 300px; /* hauteur mini un peu plus faible */ } } .spa-slide{ /* chaque slide est un calque plein écran */ position: absolute; /* empilé sur les autres */ inset: 0; /* prend toute la surface du slider */ opacity: 0; /* invisible par défaut */ transition: opacity 0.7s ease; /* fondu entre les slides */ margin: 0; /* neutralise marge figure éventuelle */ padding: 0; /* neutralise padding éventuel */ } .spa-slide.is-active{ /* slide actuellement visible */ opacity: 1; /* le slide actif apparaît */ } .spa-slide picture{ /* picture dans chaque slide */ display: block; /* évite les espaces inline */ width: 100%; /* occupe toute la largeur */ height: 100%; /* occupe toute la hauteur */ } .spa-slide img{ /* image dans chaque slide */ display: block; /* évite espace fantôme sous image */ width: 100%; /* remplit la largeur */ height: 100%; /* remplit la hauteur */ object-fit: cover; /* recadre joliment sans déformer */ object-position: center; /* recentre l’image */ } @media (prefers-reduced-motion: reduce){ /* accessibilité sur les transitions du slider */ .spa-slide{ transition: none; /* supprime le fondu */ } } /* ============================================================================= GRAND CHAPITRE 5 — DOTS (NAVIGATION DU DIAPORAMA) ============================================================================= */ .spa-dots{ /* conteneur des puces de navigation */ position: absolute; /* superposé sur le slider */ left: 12px; /* marge gauche */ right: 12px; /* marge droite */ bottom: 20px; /* placé en bas de l’image */ display: flex; /* aligne les dots horizontalement */ gap: 8px; /* espacement entre les dots */ justify-content: center; /* centre les dots */ pointer-events: auto; /* autorise le clic */ z-index: 60; /* passe au-dessus de l’image */ } .spa-dot{ /* chaque dot */ width: 10px; /* largeur du point */ height: 10px; /* hauteur du point */ border-radius: 999px; /* forme ronde */ border: 1px solid rgba(255,255,255,.8); /* contour clair */ background: rgba(0,0,0,.15); /* fond discret */ cursor: pointer; /* curseur cliquable */ padding: 0; /* évite tout décalage */ } .spa-dot.is-active{ /* dot actif */ background: rgba(0,0,0,.35); /* plus visible */ } .spa-dot:focus-visible{ /* focus clavier visible */ outline: none; /* retire l’outline par défaut */ box-shadow: 0 0 0 3px rgba(0,0,0,.18); /* remplace par un focus doux mais visible */ } /* ============================================================================= GRAND CHAPITRE 6 — CTA (BOUTONS) ============================================================================= */ .spa-cta{ /* groupe de boutons */ display: flex; /* alignement horizontal */ flex-wrap: wrap; /* retour à la ligne si besoin */ gap: 10px; /* espace entre boutons */ align-items: center; /* alignement vertical */ } .spa-btn{ /* base commune des boutons */ display: inline-flex; /* permet centrage horizontal et vertical */ align-items: center; /* centre verticalement */ justify-content: center; /* centre horizontalement */ padding: 10px 14px; /* zone cliquable confortable */ border-radius: 12px; /* coins arrondis */ text-decoration: none; /* retire soulignement des liens */ font-weight: 650; /* graisse soutenue mais pas lourde */ transition: filter .18s ease, background .18s ease, color .18s ease; /* transitions douces */ } .spa-btn:focus-visible{ /* focus visible au clavier */ outline: none; /* retire outline par défaut */ box-shadow: 0 0 0 3px rgba(0,0,0,.16); /* halo de focus discret */ } .spa-btn-primary{ /* variante principale */ background: #222222; /* fond foncé */ color: #ffffff; /* texte blanc */ border: 1px solid #222222; /* bord assorti */ } .spa-btn-primary:hover{ /* survol du bouton principal */ filter: brightness(1.06); /* très légère mise en avant */ } .spa-btn-ghost{ /* variante secondaire */ background: #ffffff; /* fond blanc */ color: var(--ink, #2e2e2e); /* texte principal */ border: 1px solid var(--border, #e6e6e6); /* bord discret */ } .spa-btn-ghost:hover{ /* survol du bouton ghost */ background: #f6f6f6; /* léger fond gris */ } /* ============================================================================= GRAND CHAPITRE 7 — BLOC INFO (CARTES) ============================================================================= */ .spa-info{ /* section des cartes d’information */ margin-top: 18px; /* espace sous le hero */ } .spa-info-grid{ /* grille des cartes */ display: grid; /* mise en page en grille */ grid-template-columns: repeat(3, 1fr); /* trois colonnes égales */ gap: 14px; /* espace entre les cartes */ } @media (max-width: 980px){ /* adaptation tablette / mobile */ .spa-info-grid{ grid-template-columns: 1fr; /* une seule colonne */ } } .spa-info-card{ /* carte d’information individuelle */ position: relative; /* base pour la barre haute décorative */ opacity: 0; /* départ invisible pour animation */ transform: translateY(20px); /* départ légèrement décalé vers le bas */ animation: cardFade 0.8s ease forwards; /* animation d’apparition */ background: #ffffff; /* fond blanc */ padding: 28px 26px; /* espace intérieur généreux */ border-radius: 12px; /* coins arrondis */ box-shadow: 0 6px 18px rgba(0,0,0,0.06); /* ombre douce */ transition: transform .25s ease, box-shadow .25s ease; /* survol fluide */ display: flex; /* structure interne souple */ flex-direction: column; /* empile titre puis texte */ justify-content: flex-start; /* contenu aligné en haut */ height: 100%; /* force une hauteur homogène dans la grille */ } .spa-info-card:nth-child(2){ /* deuxième carte */ animation-delay: 0.15s; /* arrivée légèrement décalée */ } .spa-info-card:nth-child(3){ /* troisième carte */ animation-delay: 0.3s; /* arrivée encore un peu plus tard */ } @keyframes cardFade{ /* animation d’entrée des cartes */ to{ opacity: 1; /* fin visible */ transform: translateY(0); /* revient à sa position normale */ } } .spa-info-card::before{ /* petite barre en haut de la carte */ content: ""; /* pseudo-élément décoratif */ position: absolute; /* positionné dans la carte */ top: 0; /* collé en haut */ left: 0; /* bord gauche */ right: 0; /* bord droit */ height: 4px; /* faible hauteur */ background: #d9d4c8; /* beige doux, cohérent avec l’univers */ border-top-left-radius: 12px; /* suit l’arrondi de la carte */ border-top-right-radius: 12px; /* suit l’arrondi de la carte */ } .spa-info-card:hover{ /* survol de la carte */ transform: translateY(-4px); /* léger soulèvement */ box-shadow: 0 12px 30px rgba(0,0,0,0.08); /* ombre un peu renforcée */ } .spa-info-card h2{ /* titre de carte */ position: relative; /* base pour le petit trait décoratif */ display: inline-block; /* permet un soulignement court */ margin-bottom: 14px; /* espace sous le titre */ padding-bottom: 6px; /* place pour le trait */ } .spa-info-card h2::after{ content:""; position:absolute; left:0; bottom:0; width:38px; height:3px; background:#cfcfcf; border-radius:2px; transition:background .4s ease, width .4s ease; } .spa-info-card:hover h2::after{ background:#a8a095; width:64px; } .spa-info-card p{ /* texte des cartes */ margin: 0; /* évite les écarts parasites */ color: var(--muted, #555555); /* ton légèrement adouci */ line-height: 1.6; /* lecture confortable */ } @media (prefers-reduced-motion: reduce){ /* accessibilité sur animation cartes */ .spa-info-card{ animation: none; /* pas d’animation */ opacity: 1; /* visible immédiatement */ transform: none; /* pas de décalage */ } .spa-info-card:hover{ transform: none; /* supprime le soulèvement au survol */ } } /* ============================================================================= GRAND CHAPITRE 8 — SECTION PRESTATIONS & TARIFS ============================================================================= */ .spa-tarifs{ /* conteneur de la section tarifs */ max-width: 900px; /* largeur de lecture confortable */ margin: 40px auto 20px; /* centre le bloc avec respirations haut/bas */ padding: 0 16px; /* sécurité latérale */ } .spa-tarifs h2{ /* titre de section tarifs */ margin-bottom: 20px; /* espace sous le titre */ font-size: 1.6rem; /* taille soutenue mais raisonnable */ } .spa-tarifs-grid{ /* liste / grille verticale des lignes tarifaires */ display: flex; /* disposition souple */ flex-direction: column; /* une ligne sous l’autre */ gap: 10px; /* espace entre lignes */ } .spa-tarif-row{ /* une ligne tarifaire */ display: flex; /* aligne gauche/droite */ justify-content: space-between; /* libellé à gauche, prix à droite */ align-items: baseline; /* aligne les textes sur leur ligne de base */ padding: 10px 0; /* respiration verticale */ border-bottom: 1px solid #e8e8e8; /* séparation discrète */ } .spa-tarif-name{ /* nom de prestation */ font-weight: 500; /* un peu renforcé */ } .spa-tarif-duration{ /* durée */ color: #6f8f79; /* vert doux */ font-weight: 600; /* un peu marqué */ margin-left: 4px; /* petit écart après le nom */ } .spa-tarif-price{ /* prix */ font-weight: 700; /* mise en avant claire */ color: #2f4f3f; /* vert foncé cohérent avec l’univers */ white-space: nowrap; /* évite retour à la ligne du prix */ } .spa-tarif-sep{ /* séparateur éventuel */ color: #999; /* gris discret */ margin: 0 4px; /* léger espace latéral */ } .spa-tarif-note{ /* note complémentaire */ font-size: 0.9rem; /* légèrement plus petit */ color: #777; /* ton adouci */ font-weight: 400; /* normal */ } /* ============================================================================= GRAND CHAPITRE 9 — LÉGENDE PHOTO — SOUS SLIDER (SEO VISIBLE) ============================================================================= */ .spa-caption{ /* légende affichée sous le diaporama */ padding: 12px 14px; /* respiration interne */ font-family: 'Allura', cursive; /* écriture plus sensible / signature */ font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height:1.25; font-weight:500; /* interligne doux */ letter-spacing: 0.02em; /* légère aération */ font-style: italic; /* style évocateur */ color: rgba(46,46,46,.92); /* texte légèrement adouci */ background: #f5f5f5; /* fond clair */ border-top: 1px solid #e8e8e8; /* séparation discrète avec le slider */ } /* ============================================================================= GRAND CHAPITRE 10 — CN — LOUPE + LIGHTBOX (DIAPORAMAS) ============================================================================= */ .cn-zoom-btn{ /* bouton loupe sur la photo */ position: absolute; /* ancré dans le slide */ right: 16px; /* à droite */ bottom: 16px; /* en bas */ z-index: 80; /* au-dessus de l’image */ width: 38px; /* taille du bouton */ height: 38px; /* taille du bouton */ display: inline-flex; /* centrage interne */ align-items: center; /* centre verticalement */ justify-content: center; /* centre horizontalement */ border-radius: 999px; /* bouton rond */ border: 1px solid rgba(255,255,255,.55); /* contour clair translucide */ background: rgba(140,140,140,.28); /* fond vitré discret */ color: #fff; /* icône blanche */ cursor: pointer; /* curseur interactif */ opacity: .92; /* légèrement transparent */ backdrop-filter: blur(6px); /* effet verre dépoli */ box-shadow: 0 10px 22px rgba(0,0,0,.14); /* ombre douce */ } .cn-zoom-btn:hover{ /* survol du bouton loupe */ background: rgba(140,140,140,.38); /* fond un peu plus visible */ opacity: 1; /* pleine visibilité */ } .cn-zoom-btn:focus{ /* focus standard */ outline: none; /* on neutralise l’outline brut */ } .cn-zoom-btn:focus-visible{ /* focus clavier visible */ box-shadow: 0 0 0 3px rgba(0,0,0,.18), 0 10px 22px rgba(0,0,0,.14); /* halo + ombre */ } .cn-zoom-ic{ /* icône SVG de loupe */ width: 18px; /* largeur icône */ height: 18px; /* hauteur icône */ display: block; /* évite comportement inline */ } .cn-lightbox{ /* fond plein écran de la lightbox */ position: fixed; /* fixé à la fenêtre */ inset: 0; /* couvre tout l’écran */ z-index: 5000; /* très au-dessus du reste */ display: none; /* caché par défaut */ align-items: center; /* centrage vertical */ justify-content: center; /* centrage horizontal */ background: rgba(90,90,90,.92); /* voile sombre doux */ padding: 18px; /* marge intérieure de sécurité */ } .cn-lightbox.is-open{ /* état ouvert de la lightbox */ display: flex; /* affiche et centre le contenu */ } .cn-lb-img{ /* image affichée dans la lightbox */ max-width: min(1200px, 92vw); /* limite largeur selon écran */ max-height: 86vh; /* limite hauteur selon écran */ border-radius: 14px; /* coins arrondis */ box-shadow: 0 24px 70px rgba(0,0,0,.55); /* ombre forte pour détacher l’image */ } .cn-lb-close{ /* bouton de fermeture */ position: absolute; /* placé sur la lightbox */ top: 16px; /* marge haute */ right: 18px; /* marge droite */ width: 44px; /* taille confortable */ height: 44px; /* taille confortable */ border: 0; /* pas de bord natif */ border-radius: 999px; /* rond */ background: rgba(0,0,0,.25); /* fond discret */ color: #fff; /* croix blanche */ font-size: 28px; /* taille de la croix */ line-height: 1; /* évite décalage vertical */ cursor: pointer; /* interactif */ } .cn-lb-close:hover{ /* survol du bouton fermer */ background: rgba(0,0,0,.35); /* fond un peu plus marqué */ } .cn-lb-lock{ /* classe appliquée à quand lightbox ouverte */ overflow: hidden; /* bloque le scroll de fond */ } /* ===================================================== LIENS DANS LES BULLES — STYLE DISCRET ===================================================== */ .spa-info-card a{ color: inherit; text-decoration: none; font-weight: 500; transition: opacity .2s ease; } .spa-info-card a:hover{ opacity: .85; } /* ===================================================== Témoignages – La Grange ===================================================== */ .spa-info-card-testimonials .testimonial-intro { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.5; opacity: 0.85; } .spa-info-card-testimonials .testimonial-item + .testimonial-item { margin-top: 0.9rem; } .spa-info-card-testimonials .testimonial-item { border-top: 1px solid rgba(0,0,0,.08); padding-top: 0.9rem; } .spa-info-card-testimonials .testimonial-item:first-of-type { border-top: 0; padding-top: 0; } .spa-info-card-testimonials summary { position: relative; cursor: pointer; list-style: none; padding-right: 2rem; line-height: 1.45; } .spa-info-card-testimonials summary::-webkit-details-marker { display: none; } .spa-info-card-testimonials summary::after { content: "+"; position: absolute; right: 0; top: 0.1rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.06); font-weight: 700; } .spa-info-card-testimonials details[open] summary::after { content: "–"; } .spa-info-card-testimonials .testimonial-rating { display: block; font-size: 0.95rem; letter-spacing: .08em; } .spa-info-card-testimonials .testimonial-excerpt { display: block; opacity: .9; } .spa-info-card-testimonials .testimonial-hint { display: inline-block; margin-top: .35rem; font-size: .82rem; opacity: .65; } .spa-info-card-testimonials .testimonial-meta { font-size: .88rem; opacity: .7; } .spa-info-card-testimonials .testimonial-link-wrap { margin-top: 1rem; } .spa-info-card-testimonials .testimonial-link { font-weight: 600; text-decoration: none; } .spa-info-card-testimonials .testimonial-link:hover { text-decoration: underline; } .spa-info-card-testimonials .testimonial-rating { display: block; font-size: 0.95rem; letter-spacing: .08em; background: linear-gradient(#f7d774, #d4a017); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }