/* =========================================================
OH BABY SPA — NEW DESIGN (DS public site)
Consolidé depuis new_pages/*.html (tokens + composants).
Chargé uniquement sur les pages publiques (accueil, soins,
apropos, contact, boncadeau, n_reservation1, mentions-legales).
Les pages /compte ne le chargent pas (design préservé).
========================================================= */
/* ---------- Design tokens ---------- */
:root {
--bg-hero: linear-gradient(180deg,#163F58 0%,#1A4E70 60%,#1F5E83 100%);
/* Sky */
--sky-50:#F2F8FC; --sky-100:#DCEBF6; --sky-200:#BCD9EC; --sky-300:#93C5E2;
--sky-400:#6DAFD3; --sky-500:#4E97C0; --sky-600:#2F7CA5; --sky-700:#1F5E83;
--sky-800:#163F58; --sky-900:#0E2B3E;
/* Honey */
--honey-100:#FFF1CF; --honey-200:#FCE2A3; --honey-300:#F8CE74;
--honey-400:#F2B945; --honey-500:#E5A52F; --honey-600:#C68A1E; --honey-700:#9E6E16;
/* Cream */
--cream-50:#FEFCF6; --cream-100:#FAF5E8; --cream-200:#F2EAD4;
/* Ink */
--ink-100:#D8DEE5; --ink-300:#97A1AE; --ink-500:#5A6878; --ink-700:#2B3A4A; --ink-900:#0F1B27;
/* Status */
--color-success:#4E9A6B; --color-warning:#D89234; --color-error:#C45A4E;
}
/* ---------- Reset/base limité aux pages "new design" ---------- */
.nd-page * , .nd-page *::before, .nd-page *::after { box-sizing: border-box; }
.nd-page { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* On laisse le body global tel quel (legacy style.css) mais on neutralise
sur .nd-page (classe ajoutée au sur les pages publiques). */
body.nd-page {
margin: 0;
font-family: 'Manrope', sans-serif;
color: #0F1B27;
background: #FEFCF6;
/* Empêche le scroll horizontal qui apparaît parfois sur mobile quand un
enfant déborde (image, ligne de SVG, grille avec une cellule trop large). */
overflow-x: hidden;
}
/* Filet de sécurité : aucune image / iframe / vidéo ne doit dépasser sa colonne. */
body.nd-page img, body.nd-page iframe, body.nd-page video { max-width: 100%; }
/* Neutralisation des règles legacy qui pourraient déborder.
On override quelques sélecteurs globaux du style.css existant
uniquement quand on est sur une page nouveau design. */
body.nd-page a { text-decoration: none; }
body.nd-page img { max-width: 100%; height: auto; display: block; }
body.nd-page h1, body.nd-page h2, body.nd-page h3,
body.nd-page h4, body.nd-page h5, body.nd-page h6 { margin: 0; }
body.nd-page p { margin: 0 0 1em; }
body.nd-page ul, body.nd-page ol { margin: 0; padding: 0; }
body.nd-page section { padding: 50px 0; }
body.nd-page button { font-family: inherit; }
/* On masque le loader legacy sur les pages nouveau design (pas utilisé). */
body.nd-page > span.loader { display: none !important; }
/* =========================================================
HEADER (variante "on-hero" et variante crème)
========================================================= */
.obs-topbar {
background: #163F58;
color: rgba(255,255,255,.8);
font-family: 'Manrope', sans-serif;
font-size: 12px;
letter-spacing: 0.04em;
}
.obs-topbar a {
color: rgba(255,255,255,.85);
text-decoration: none;
/* Tap target ≥ 44px sur les liens du bandeau supérieur (mobile) */
display: inline-flex; align-items: center; min-height: 36px;
padding: 4px 2px;
transition: color .22s cubic-bezier(.22,.61,.36,1);
}
@media (max-width: 640px) {
.obs-topbar a { min-height: 44px; padding: 8px 4px; }
}
.obs-topbar a:hover { color: #FCE2A3; }
.obs-topbar a:focus-visible { outline: 2px solid #FCE2A3; outline-offset: 2px; border-radius: 4px; }
.obs-header { position: relative; z-index: 30; font-family: 'Manrope', sans-serif; }
/* Header : dégradé très foncé en haut → légèrement plus clair en bas.
Le bas du header (#163F58) matche le TOP du hero pour un fondu invisible. */
.obs-header--on-hero { background: linear-gradient(180deg, #0E2638 0%, #163F58 100%); }
.obs-header:not(.obs-header--on-hero) {
background: #FEFCF6;
border-bottom: 1px solid #ECE6D5;
}
.obs-logo-mark { font-family: 'Caveat', cursive; font-size: 26px; line-height: 1; }
.obs-logo-mark__sub {
font-family: 'Manrope', sans-serif; font-weight: 600;
font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
margin-top: 2px;
}
.obs-header--on-hero .obs-logo-mark { color: #fff; }
.obs-header--on-hero .obs-logo-mark__sub { color: rgba(255,255,255,.9); }
.obs-header:not(.obs-header--on-hero) .obs-logo-mark { color: #1F5E83; }
.obs-header:not(.obs-header--on-hero) .obs-logo-mark__sub { color: #5A6878; }
.obs-nav-link {
text-decoration: none;
font-weight: 600; font-size: 12px;
letter-spacing: 0.16em; text-transform: uppercase;
/* Tap target ≥ 44px (WCAG 2.5.5) */
padding: 12px 8px; min-height: 44px;
display: inline-flex; align-items: center;
border-bottom: 2px solid transparent;
transition: color .22s cubic-bezier(.22,.61,.36,1),
border-color .22s cubic-bezier(.22,.61,.36,1);
}
.obs-nav-link:focus-visible { outline: 2px solid #FCE2A3; outline-offset: 2px; border-radius: 4px; }
.obs-header--on-hero .obs-nav-link { color: #fff; }
.obs-header--on-hero .obs-nav-link:hover,
.obs-header--on-hero .obs-nav-link.is-active {
color: #FCE2A3; border-bottom-color: #F2B945;
}
.obs-header:not(.obs-header--on-hero) .obs-nav-link { color: #0F1B27; }
.obs-header:not(.obs-header--on-hero) .obs-nav-link:hover,
.obs-header:not(.obs-header--on-hero) .obs-nav-link.is-active {
color: #1F5E83; border-bottom-color: #F2B945;
}
.obs-btn-cta {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: 12px 22px;
/* Tap target ≥ 44px */
min-height: 44px;
font-family: 'Manrope', sans-serif;
font-weight: 600; font-size: 13px;
letter-spacing: 0.04em;
border-radius: 999px;
background: #F2B945; color: #0F1B27;
box-shadow: 0 8px 24px rgba(229,165,47,.32);
text-decoration: none;
transition: transform .14s cubic-bezier(.22,.61,.36,1),
background .22s cubic-bezier(.22,.61,.36,1);
}
.obs-btn-cta:hover { background: #E5A52F; transform: translateY(-1px); }
.obs-btn-cta:focus-visible { outline: 2px solid #4E97C0; outline-offset: 3px; }
.obs-btn-cta--mini {
padding: 10px 16px;
font-size: 12px;
min-height: 44px;
box-shadow: 0 4px 12px rgba(229,165,47,.28);
}
.obs-burger {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
padding: 8px; border: 0; background: transparent; cursor: pointer;
}
.obs-burger:focus-visible { outline: 2px solid #FCE2A3; outline-offset: 2px; border-radius: 6px; }
.obs-header--on-hero .obs-burger { color: #fff; }
.obs-header:not(.obs-header--on-hero) .obs-burger { color: #0F1B27; }
.obs-logo-circle {
width: 56px; height: 56px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.obs-header--on-hero .obs-logo-circle {
background: rgba(255,255,255,.15);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,.3);
color: #fff;
}
.obs-header:not(.obs-header--on-hero) .obs-logo-circle {
background: #DCEBF6; color: #1F5E83;
}
.obs-mobile-menu { display: none; }
.obs-mobile-menu.is-open { display: block; }
.obs-mobile-menu__panel {
border-radius: 16px; padding: 25px;
display: flex; flex-direction: column; gap: 12px;
list-style: none; margin: 0;
}
.obs-header--on-hero .obs-mobile-menu__panel {
background: rgba(255,255,255,.10);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.obs-header:not(.obs-header--on-hero) .obs-mobile-menu__panel {
background: #FAF5E8; border: 1px solid #ECE6D5;
}
/* =========================================================
FOOTER
========================================================= */
.obs-footer {
position: relative;
padding: 64px 0 32px;
color: #fff;
font-family: 'Manrope', sans-serif;
background: linear-gradient(180deg,#163F58 0%,#1F5E83 100%);
overflow: hidden;
}
.obs-footer-logo { font-family: 'Caveat', cursive; font-size: 28px; line-height: 1; color: #fff; }
.obs-footer-logo__sub {
font-family: 'Manrope', sans-serif; font-weight: 600;
font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
color: rgba(255,255,255,.9); margin-top: 4px;
}
.obs-footer-h4 {
font-family: 'Manrope', sans-serif; font-weight: 600;
font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: #FCE2A3; margin: 0 0 10px;
}
.obs-footer-link {
color: rgba(255,255,255,.8); text-decoration: none;
transition: color .22s cubic-bezier(.22,.61,.36,1);
}
.obs-footer-link:hover { color: #FCE2A3; }
.obs-footer-social {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,.10); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
transition: background .22s cubic-bezier(.22,.61,.36,1),
color .22s cubic-bezier(.22,.61,.36,1),
transform .14s cubic-bezier(.22,.61,.36,1);
}
.obs-footer-social:hover {
background: #F2B945; color: #0F1B27; transform: translateY(-1px);
}
/* =========================================================
DIVIDERS
========================================================= */
.cloud-divider { display: block; width: 100%; line-height: 0; }
.cloud-divider svg { display: block; width: 100%; height: 90px; }
@media (max-width: 768px) { .cloud-divider svg { height: 55px; } }
.wave-divider { display: block; width: 100%; line-height: 0; }
.wave-divider svg { display: block; width: 100%; height: 50px; }
@media (max-width: 768px) { .wave-divider svg { height: 32px; } }
/* =========================================================
SPARKLES (signature animée)
========================================================= */
.sparkle {
position: absolute; width: 14px; height: 14px;
background: #F2B945;
clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
pointer-events: none;
animation: twinkle 4s ease-in-out infinite;
}
.sparkle.sm { width: 8px; height: 8px; }
.sparkle.lg { width: 18px; height: 18px; }
@keyframes twinkle {
0%, 100% { opacity: .55; transform: scale(1) rotate(0deg); }
50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}
.obs-footer .sparkle { opacity: .55; animation: obs-twinkle 4s ease-in-out infinite; }
.obs-footer .sparkle.sm { width: 8px; height: 8px; }
@keyframes obs-twinkle {
0%, 100% { opacity: .55; transform: scale(1) rotate(0deg); }
50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}
/* =========================================================
BUTTONS
========================================================= */
.nd-page .btn,
body.nd-page .btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: 14px 26px;
font-family: 'Manrope', sans-serif;
font-weight: 600; font-size: 15px;
letter-spacing: 0.04em;
border-radius: 999px; border: 1px solid transparent;
transition: transform 140ms cubic-bezier(.22,.61,.36,1),
box-shadow 220ms cubic-bezier(.22,.61,.36,1),
background 220ms cubic-bezier(.22,.61,.36,1),
color 220ms cubic-bezier(.22,.61,.36,1);
cursor: pointer; text-decoration: none; white-space: nowrap;
/* On annule les overrides legacy de style.css : */
background-color: transparent;
}
body.nd-page .btn:hover { transform: translateY(-1px); }
body.nd-page .btn:focus-visible { outline: 2px solid #4E97C0; outline-offset: 3px; }
body.nd-page .btn--primary { background: #F2B945; color: #0F1B27; box-shadow: 0 8px 24px rgba(229,165,47,.32); }
body.nd-page .btn--primary:hover { background: #E5A52F; }
body.nd-page .btn--secondary { background: #2F7CA5; color: #fff; box-shadow: 0 2px 6px rgba(15,27,39,.06); }
body.nd-page .btn--secondary:hover { background: #1F5E83; }
body.nd-page .btn--ghost { background: transparent; color: #0F1B27; border-color: #D8DEE5; }
body.nd-page .btn--ghost:hover { background: #FAF5E8; border-color: #DDD3BB; }
body.nd-page .btn--link {
background: transparent; padding: 6px 0; border-radius: 0;
color: #1F5E83; border-bottom: 1px solid currentColor;
box-shadow: none;
}
body.nd-page .btn--link:hover { color: #C68A1E; }
body.nd-page .btn--sm { padding: 9px 18px; font-size: 13px; }
body.nd-page .btn--lg { padding: 18px 32px; font-size: 16px; }
body.nd-page .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
/* =========================================================
TYPOGRAPHY
========================================================= */
.logo-mark { font-family: 'Caveat', cursive; font-size: 22px; line-height: 1; color: #fff; }
.logo-mark__sub {
font-family: 'Manrope', sans-serif; font-weight: 600;
font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
color: rgba(255,255,255,.9); margin-top: 2px;
}
.eyebrow { font-family: 'Caveat', cursive; font-weight: 400; line-height: 1; color: #C68A1E; font-size: 26px; }
.eyebrow--light { color: #FCE2A3; }
body.nd-page .t-display { font-family: 'Cormorant Garamond', serif; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; font-size: clamp(36px, 5.6vw, 64px); }
body.nd-page .t-h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; font-size: clamp(28px, 3.4vw, 40px); }
body.nd-page .t-h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; line-height: 1.2; font-size: clamp(24px, 2.5vw, 32px); }
body.nd-page .t-h4 { font-family: 'Cormorant Garamond', serif; font-weight: 600; line-height: 1.25; font-size: 22px; }
/* =========================================================
HERO / WATERMARK
========================================================= */
.hero { background: var(--bg-hero); position: relative; overflow: hidden; }
.hero-light { background: var(--bg-hero); position: relative; overflow: hidden; }
.hero-img-wrap { position: relative; }
.hero-img-wrap::before {
content: ""; position: absolute; inset: -28px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(252,226,163,.4), transparent 70%);
filter: blur(12px); z-index: 0; pointer-events: none;
}
.hero-img-wrap > * { position: relative; z-index: 1; }
/* Slider de l'image ronde du hero — fondu enchaîné */
.hero-slider { position: relative; }
.hero-slider__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1100ms ease-in-out;
}
.hero-slider__img.is-active { opacity: 1; }
.watermark {
font-family: 'Caveat', cursive;
font-size: 200px; line-height: 1;
color: rgba(255,255,255,.16);
pointer-events: none; user-select: none;
}
@media (max-width: 768px) { .watermark { font-size: 110px; } }
/* =========================================================
MOBILE MENU + STICKY CTA
========================================================= */
.mobile-menu { display: none; }
.mobile-menu.is-open { display: block; }
.sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
padding: 12px 16px;
/* env(safe-area-inset-bottom) gère le home-indicator iPhone */
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
background: rgba(254,252,246,.92);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-top: 1px solid #ECE6D5; display: none;
}
.sticky-cta .btn { width: 100%; justify-content: center; }
/* Le CTA fixe en bas est réservé au tunnel de réservation (où le récap mobile
en a besoin). Sur les autres pages publiques, le bouton "Réserver" du header
suffit et on évite ainsi un bandeau qui masque le contenu. */
@media (max-width: 1023px) {
body.nd-page.nd-reservation { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
body.nd-page.nd-reservation .sticky-cta { display: block; }
}
/* Variante enrichie du sticky CTA pour le tunnel de réservation :
mini-récap collapsible à gauche + actions à droite. */
.sticky-cta--resa { padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.sticky-cta--resa .resa-sticky-summary { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.sticky-cta--resa .resa-sticky-summary__toggle {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
background: transparent; border: 0; padding: 4px 0; cursor: pointer;
font-family: 'Manrope', sans-serif; color: #0F1B27; min-height: 44px;
}
.sticky-cta--resa .resa-sticky-summary__total { display: flex; flex-direction: column; align-items: flex-start; }
.sticky-cta--resa .resa-sticky-summary__label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #5A6878; }
.sticky-cta--resa .resa-sticky-summary__price { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; line-height: 1; }
.sticky-cta--resa .resa-sticky-summary__caret { display: inline-flex; transition: transform .2s; color: #5A6878; }
.sticky-cta--resa .resa-sticky-summary__toggle[aria-expanded="true"] .resa-sticky-summary__caret { transform: rotate(180deg); }
.sticky-cta--resa .resa-sticky-details { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 8px; border-top: 1px solid #ECE6D5; font-size: 12px; color: #2B3A4A; }
.sticky-cta--resa .resa-sticky-details__row { display: flex; justify-content: space-between; gap: 12px; }
.sticky-cta--resa .resa-sticky-details__row > span:first-child { color: #5A6878; }
.sticky-cta--resa .resa-sticky-details__row > span:last-child { font-weight: 600; text-align: right; }
.sticky-cta--resa .resa-sticky-actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.sticky-cta--resa .resa-sticky-actions .btn { flex: 1 1 0; min-height: 44px; padding: 10px 14px; font-size: 14px; }
.sticky-cta--resa .resa-sticky-actions .btn--ghost { flex: 0 0 auto; }
/* Bornée à 1023px : au-delà le récap desktop (aside sticky) prend le relais
et la barre doit rester masquée (display:none de .sticky-cta). */
@media (min-width: 640px) and (max-width: 1023px) {
body.nd-page.nd-reservation .sticky-cta--resa { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.sticky-cta--resa .resa-sticky-actions { padding-top: 0; }
}
/* =========================================================
FORMS
========================================================= */
.field-input, .field-textarea, .field-select {
width: 100%;
font-family: 'Manrope', sans-serif; font-size: 16px;
padding: 14px 16px;
background: #fff;
border: 1px solid #DDD3BB;
border-radius: 14px;
color: #0F1B27;
transition: border-color 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms cubic-bezier(.22,.61,.36,1);
}
.field-input:hover, .field-textarea:hover, .field-select:hover { border-color: #97A1AE; }
.field-input:focus, .field-textarea:focus, .field-select:focus {
outline: none; border-color: #4E97C0;
box-shadow: 0 0 0 4px rgba(78,151,192,.16);
}
.field-textarea { min-height: 140px; resize: vertical; }
.field-select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
}
.field-input::placeholder, .field-textarea::placeholder { color: #97A1AE; }
.field-label { font-size: 13px; font-weight: 500; color: #2B3A4A; margin-bottom: 6px; display: block; }
/* =========================================================
BADGES
========================================================= */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px; font-size: 11px; font-weight: 600;
border-radius: 999px;
letter-spacing: 0.12em; text-transform: uppercase;
}
.badge--honey { background: #FCE2A3; color: #9E6E16; }
.badge--sky { background: #DCEBF6; color: #1F5E83; }
.badge--cream { background: #FAF5E8; color: #2B3A4A; border: 1px solid #ECE6D5; }
.badge--white { background: #FFFFFF; color: #1F5E83; border: 1px solid #DCEBF6; }
/* =========================================================
COUNTER CHIPS (1-2-4-6 personnes)
========================================================= */
.counter-chip {
width: 96px; height: 96px; border-radius: 50%;
background: #FAF5E8; border: 1px solid #ECE6D5;
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
cursor: pointer;
transition: all 220ms cubic-bezier(.22,.61,.36,1);
flex-shrink: 0;
}
.counter-chip:hover { background: #FFF1CF; border-color: #F8CE74; transform: translateY(-2px); }
.counter-chip.is-active {
background: #F2B945; border-color: #E5A52F; color: #0F1B27;
}
.counter-chip__num { font: 600 36px/1 'Cormorant Garamond', serif; }
.counter-chip__label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #2B3A4A; margin-top: 4px; }
@media (max-width: 480px) {
/* Mobile : pastilles compactes (≤ 60px) pour éviter tout débordement
horizontal de la rangée "nombre de personnes" sur petits écrans. */
.counter-chip { width: 60px; height: 60px; }
.counter-chip__num { font-size: 22px; }
.counter-chip__label { font-size: 9px; }
}
/* =========================================================
LIST CHECK
========================================================= */
.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li { padding-left: 28px; position: relative; margin-bottom: 8px; line-height: 1.65; }
.list-check li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 14px; height: 14px; border-radius: 50%;
background: #F2B945; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px #E5A52F;
}
/* =========================================================
SOINS PAGE
========================================================= */
.jump-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
border-radius: 999px;
background: #FFFFFF;
border: 1px solid #ECE6D5;
color: #0F1B27;
font-weight: 600; font-size: 13px;
letter-spacing: 0.04em;
text-decoration: none;
transition: all 220ms cubic-bezier(.22,.61,.36,1);
}
.jump-pill:hover { border-color: #F2B945; background: #FFF1CF; transform: translateY(-1px); }
/* Promo spotlight — cadre flottant à droite, sous le 1er cloud-divider.
Plus large, avec bouton "Réserver" par créneau. */
.promo-spotlight-mini {
position: relative;
z-index: 50;
top: -100px;
width: 420px;
max-width: calc(100vw - 32px);
margin-left: auto;
margin-right: 24px;
margin-top: -36px;
margin-bottom: 16px;
background: linear-gradient(180deg, #FFB300 0%, #DBAA06 100%);
border: 2px solid #fff;
border-radius: 18px;
padding: 14px 16px 16px;
box-shadow: 0 12px 32px rgba(219, 170, 6, .38), 0 4px 12px rgba(15, 27, 39, .14);
font: 500 13px/1.4 'Helvetica Neue', system-ui, sans-serif;
color: #1F5E83;
}
@media (max-width: 768px) {
.promo-spotlight-mini {
width: auto;
margin-left: 12px; margin-right: 12px;
margin-top: -20px;
top: -100px;
}
}
.promo-spotlight-mini__head {
display: flex; align-items: center; gap: 6px;
font: 700 11px/1 'Helvetica Neue', system-ui, sans-serif;
text-transform: uppercase; letter-spacing: .08em;
color: #1F5E83;
border-bottom: 1px solid rgba(31, 94, 131, .25);
padding-bottom: 8px; margin-bottom: 8px;
}
.promo-spotlight-mini__icon { font-size: 13px; }
.promo-spotlight-mini__title { flex: 1; }
.promo-spotlight-mini__close {
background: rgba(31,94,131,.18); border: none;
color: #1F5E83; font-size: 14px; line-height: 1;
cursor: pointer; width: 20px; height: 20px;
border-radius: 50%;
opacity: .85; transition: opacity .15s, background .15s;
}
.promo-spotlight-mini__close:hover { opacity: 1; background: rgba(31,94,131,.3); }
.promo-spotlight-mini__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
}
.promo-spotlight-mini__list li { display: block; }
.promo-spotlight-mini__row {
display: flex; align-items: center; gap: 12px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255, 255, 255, .12);
transition: background .15s;
}
.promo-spotlight-mini__row:hover { background: rgba(255, 255, 255, .20); }
.promo-spotlight-mini__pct {
font: 900 34px/1 'Cormorant Garamond', serif;
color: #1F5E83;
background: #fff;
padding: 6px 12px;
border-radius: 12px;
flex-shrink: 0;
min-width: 78px;
text-align: center;
text-shadow: none;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.promo-spotlight-mini__when {
flex: 1;
font-weight: 700;
font-size: 14px;
color: #1F5E83;
text-transform: capitalize;
line-height: 1.25;
}
.promo-spotlight-mini__when small {
display: block;
font-weight: 500;
font-size: 12px;
color: #1F5E83;
opacity: 0.85;
text-transform: none;
margin-top: 2px;
}
.promo-spotlight-mini__cta {
background: #fff;
color: #1F5E83;
padding: 7px 14px;
border-radius: 999px;
font: 700 12px/1 'Helvetica Neue', system-ui, sans-serif;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
transition: transform .15s, box-shadow .15s, background .15s;
flex-shrink: 0;
}
.promo-spotlight-mini__cta:hover {
background: #1F5E83;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
/* Quicknav fin sur la page /soins — remplace les anciens filtres */
.soins-quicknav {
background: #FAF4EA;
border-bottom: 1px solid #ECE6D5;
padding: 8px 0;
}
.soins-quicknav ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: nowrap;
gap: 6px; overflow-x: auto;
scrollbar-width: thin;
}
.soins-quicknav li { flex-shrink: 0; }
.soins-quicknav a {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 12px;
border-radius: 999px;
background: transparent;
color: #5A6878;
font: 600 12px/1 'Helvetica Neue', system-ui, sans-serif;
text-decoration: none;
white-space: nowrap;
transition: background .15s, color .15s;
}
.soins-quicknav a:hover {
background: #fff;
color: #1F5E83;
box-shadow: 0 1px 4px rgba(15, 27, 39, .08);
}
/* Bouton "Suivant" inline juste sous la carte sélectionnée (réservation + bon cadeau) */
.service-card__next-inline,
.soin-choice__next-inline {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
margin-top: -4px;
margin-bottom: 6px;
animation: fadeUp .25s cubic-bezier(.22,.61,.36,1) both;
}
.service-card__next-inline__msg {
font: 600 13px/1.3 'Helvetica Neue', system-ui, sans-serif;
color: #1F5E83;
background: #DCEBF6;
padding: 8px 14px;
border-radius: 999px;
}
.service-card__next-inline__msg a { color: #DBAA06; text-decoration: underline; }
.jump-pill__num {
width: 22px; height: 22px; border-radius: 50%;
background: #F2B945; color: #0F1B27;
display: inline-flex; align-items: center; justify-content: center;
font: 700 12px/1 'Manrope', sans-serif;
}
.choose-card {
background: #FFFFFF;
border: 1px solid #ECE6D5;
border-radius: 20px;
padding: 28px 24px;
transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms;
height: 100%;
display: flex; flex-direction: column;
}
.choose-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,27,39,.08); }
.choose-card__icon {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, #DCEBF6, #BCD9EC);
color: #1F5E83;
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.variant-card {
background: #FFFFFF;
border: 1px solid #ECE6D5;
border-radius: 20px;
padding: 26px;
display: flex; flex-direction: column;
transition: transform 220ms cubic-bezier(.22,.61,.36,1),
box-shadow 220ms cubic-bezier(.22,.61,.36,1),
border-color 220ms;
height: 100%;
}
.variant-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(15,27,39,.08), 0 2px 6px rgba(15,27,39,.04);
border-color: #F8CE74;
}
.variant-card__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; margin-bottom: 12px;
}
.variant-card__price {
font-family: 'Cormorant Garamond', serif;
font-weight: 600; font-size: 32px; line-height: 1;
color: #C68A1E; white-space: nowrap;
}
.variant-card__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 600; font-size: 24px; line-height: 1.2;
margin: 0 0 4px;
}
.variant-card__duration {
font-family: 'Manrope', sans-serif;
font-size: 12px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: #2F7CA5;
margin-bottom: 14px;
display: inline-flex; align-items: center; gap: 6px;
}
.variant-card__desc {
color: #5A6878; font-size: 14px; line-height: 1.65;
margin-bottom: 18px; flex: 1;
}
.variant-card__incl {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.variant-card__incl li {
position: relative;
padding-left: 22px;
font-size: 13.5px;
line-height: 1.4;
color: #2B3A4A;
}
.variant-card__incl li::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #FCE2A3;
/* check mark drawn via background image */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239E6E16' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.soin-section--hydro .variant-card__incl li::before { background-color: #DCEBF6; }
.soin-section--packs .variant-card__incl li::before { background-color: #FCE2A3; }
.variant-card__formats {
margin: 14px 0 !important;
display: inline-block;
background: linear-gradient(180deg, #F2B945 0%, #DBAA06 100%);
color: #fff !important;
font-weight: 700;
font-size: 13px !important;
line-height: 1.4;
padding: 8px 12px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(219, 170, 6, .25);
border: 1px solid #C68A1E;
}
.variant-card__cta {
display: inline-flex; align-items: center; gap: 6px;
color: #1F5E83; font-weight: 600; font-size: 13px;
letter-spacing: 0.04em;
border-bottom: 1px solid currentColor;
align-self: flex-start;
padding-bottom: 2px;
transition: color 220ms;
text-decoration: none;
}
.variant-card__cta:hover { color: #C68A1E; }
.variant-card--featured {
background: #FFFCF1;
border: 1px solid #F8CE74;
box-shadow: 0 8px 24px rgba(229,165,47,.18);
}
.format-card {
background: rgba(255,255,255,.08);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
border-radius: 24px;
padding: 36px 28px;
color: #fff;
transition: transform 220ms cubic-bezier(.22,.61,.36,1), background 220ms;
position: relative;
}
.format-card:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.format-card__num {
font-family: 'Cormorant Garamond', serif;
font-size: 64px; line-height: 1; font-weight: 500;
color: #FCE2A3; margin-bottom: 8px;
}
.format-card__label {
font-family: 'Caveat', cursive; font-size: 22px; color: #FCE2A3; margin-bottom: 14px;
}
.faq-item {
background: #FFFFFF;
border: 1px solid #ECE6D5;
border-radius: 16px;
overflow: hidden;
transition: border-color 220ms;
}
.faq-item[open] { border-color: #F8CE74; }
.faq-item summary {
cursor: pointer; list-style: none;
padding: 22px 28px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 20px;
color: #0F1B27;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: ""; width: 28px; height: 28px;
border-radius: 50%;
background: #FAF5E8;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center;
flex-shrink: 0;
transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.faq-item[open] summary::after { transform: rotate(180deg); background-color: #FFF1CF; }
.faq-item__body { padding: 0 28px 24px; color: #5A6878; line-height: 1.7; font-size: 15px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto; }
.section-head__num {
font-family: 'Cormorant Garamond', serif;
font-weight: 600; font-size: 64px; line-height: 1;
color: rgba(242, 185, 69, .35);
letter-spacing: -0.04em;
margin-bottom: -10px;
}
@media (max-width: 768px) { .section-head__num { font-size: 48px; } }
/* Section-head avec photo (soins page) */
.section-head--withimg {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: center;
text-align: left;
max-width: 1080px;
}
@media (min-width: 768px) {
.section-head--withimg {
grid-template-columns: 360px 1fr;
gap: 40px;
}
}
.section-head__media {
aspect-ratio: 4 / 3;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(15, 27, 39, .12), 0 4px 10px rgba(15, 27, 39, .06);
position: relative;
}
.section-head__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(15, 27, 39, .15) 100%);
pointer-events: none;
}
.section-head__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.section-head--withimg:hover .section-head__media img { transform: scale(1.04); }
.section-head__text { text-align: left; }
.section-head--withimg .section-head__num { margin-bottom: -4px; }
/* Couleur d'accent par univers de soin */
.soin-section { position: relative; }
.soin-section .variant-card {
border-top: 3px solid transparent;
}
.soin-section--massages .variant-card { border-top-color: #E5A187; }
.soin-section--hydro .variant-card { border-top-color: #6DAFD3; }
.soin-section--packs .variant-card { border-top-color: #F2B945; }
.soin-section--anniv .variant-card { border-top-color: #E5938B; }
.soin-section--massages .variant-card__duration { color: #B85B3A; }
.soin-section--hydro .variant-card__duration { color: #2F7CA5; }
.soin-section--packs .variant-card__duration { color: #C68A1E; }
.soin-section--anniv .variant-card__duration { color: #B83A4E; }
.soin-section--massages .variant-card:hover { border-top-color: #B85B3A; box-shadow: 0 8px 24px rgba(184, 91, 58, .15); }
.soin-section--hydro .variant-card:hover { border-top-color: #2F7CA5; box-shadow: 0 8px 24px rgba(47, 124, 165, .15); }
.soin-section--packs .variant-card:hover { border-top-color: #DBAA06; box-shadow: 0 8px 24px rgba(219, 170, 6, .18); }
.soin-section--anniv .variant-card:hover { border-top-color: #B83A4E; box-shadow: 0 8px 24px rgba(184, 58, 78, .15); }
/* Petits cercles photo en arrière-plan des sections (touche de couleur) */
.soin-section::before {
content: "";
position: absolute;
top: 60px; right: -80px;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(242, 185, 69, .14) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.soin-section--hydro::before { background: radial-gradient(circle, rgba(109, 175, 211, .18) 0%, transparent 70%); }
.soin-section--anniv::before { background: radial-gradient(circle, rgba(229, 147, 139, .15) 0%, transparent 70%); }
.soin-section > * { position: relative; z-index: 1; }
.photo-strip { position: relative; padding: 30px 0; overflow: hidden; }
.photo-strip__row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: nowrap; }
.photo-strip__dot {
width: 110px; height: 110px;
border-radius: 50%; overflow: hidden;
background: #DCEBF6;
border: 3px solid #FFFFFF;
box-shadow: 0 8px 20px rgba(15,27,39,.08), 0 2px 6px rgba(15,27,39,.04);
flex-shrink: 0;
}
.photo-strip__dot img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.photo-strip__dot:hover img { transform: scale(1.08); }
.photo-strip__dot:nth-child(1),
.photo-strip__dot:nth-child(5) { width: 86px; height: 86px; }
.photo-strip__dot:nth-child(3) { width: 132px; height: 132px; }
@media (max-width: 768px) {
.photo-strip__row { gap: 10px; }
.photo-strip__dot { width: 68px; height: 68px; border-width: 2px; }
.photo-strip__dot:nth-child(1),
.photo-strip__dot:nth-child(5) { width: 54px; height: 54px; }
.photo-strip__dot:nth-child(3) { width: 84px; height: 84px; }
}
@media (max-width: 480px) {
.photo-strip__dot:nth-child(5) { display: none; }
}
/* Variante "feature" — bandeau bleu dégradé, grandes pastilles rondes,
gros liseré blanc. Utilisée sur l'accueil et la page à propos. */
.photo-strip--feature {
background: linear-gradient(180deg, #1F5E83 0%, #1A4E70 55%, #163F58 100%);
padding: 10px 0 46px;
}
.photo-strip--feature .photo-strip__row { gap: 24px; }
.photo-strip--feature .photo-strip__dot {
width: 138px; height: 138px;
border: 5px solid #FFFFFF;
background: #DCEBF6;
box-shadow: 0 16px 34px rgba(8, 20, 33, .38), 0 4px 10px rgba(8, 20, 33, .22);
}
.photo-strip--feature .photo-strip__dot:nth-child(1),
.photo-strip--feature .photo-strip__dot:nth-child(7) { width: 104px; height: 104px; }
.photo-strip--feature .photo-strip__dot:nth-child(4) { width: 176px; height: 176px; }
.photo-strip--feature .photo-strip__dot:hover img { transform: scale(1.1); }
@media (max-width: 1024px) {
.photo-strip--feature .photo-strip__row { gap: 16px; }
.photo-strip--feature .photo-strip__dot { width: 104px; height: 104px; border-width: 4px; }
.photo-strip--feature .photo-strip__dot:nth-child(1),
.photo-strip--feature .photo-strip__dot:nth-child(7) { width: 82px; height: 82px; }
.photo-strip--feature .photo-strip__dot:nth-child(4) { width: 128px; height: 128px; }
}
@media (max-width: 768px) {
.photo-strip--feature { padding: 8px 0 30px; }
.photo-strip--feature .photo-strip__row { gap: 12px; flex-wrap: wrap; }
.photo-strip--feature .photo-strip__dot,
.photo-strip--feature .photo-strip__dot:nth-child(1),
.photo-strip--feature .photo-strip__dot:nth-child(7),
.photo-strip--feature .photo-strip__dot:nth-child(4) { width: 76px; height: 76px; border-width: 3px; }
}
/* Mobile : 3 photos maximum dans la bande, centrées et sur une seule ligne
(s'applique à la bande standard ET à la variante "feature"). */
@media (max-width: 768px) {
.photo-strip__row,
.photo-strip--feature .photo-strip__row { flex-wrap: nowrap; justify-content: center; }
.photo-strip__dot:nth-child(n+4) { display: none; }
}
.info-note {
margin: 14px 0 !important;
background: rgba(255, 241, 207, 0.55);
border: 1px solid #F8CE74;
border-radius: 14px;
padding: 14px 18px;
font-size: 13px;
color: #2B3A4A;
display: flex; align-items: flex-start; gap: 10px;
line-height: 1.55;
}
.info-note__icon {
width: 22px; height: 22px; border-radius: 50%;
background: #F2B945; color: #0F1B27;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
font: 700 13px/1 'Cormorant Garamond', serif;
margin-top: 1px;
}
.info-note--phone { background: rgba(220, 235, 246, 0.55); border-color: #93C5E2; }
.info-note--phone .info-note__icon { background: #2F7CA5; color: #fff; }
/* =========================================================
CONTACT PAGE
========================================================= */
.info-card {
background: #FFFFFF;
border: 1px solid #ECE6D5;
border-radius: 20px;
padding: 28px 24px;
box-shadow: 0 2px 6px rgba(15,27,39,.04);
transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms, border-color 220ms;
display: flex; flex-direction: column;
height: 100%;
}
.info-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(15,27,39,.10), 0 4px 10px rgba(15,27,39,.05);
border-color: #F8CE74;
}
.info-card__icon {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, #FFF1CF, #FCE2A3);
color: #9E6E16;
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.info-card__label {
font-family: 'Caveat', cursive;
font-size: 22px; line-height: 1;
color: #C68A1E; margin-bottom: 4px;
}
.info-card__value {
font-family: 'Cormorant Garamond', serif;
font-weight: 600; font-size: 20px;
color: #0F1B27; line-height: 1.3;
}
.info-card__detail { font-size: 14px; color: #5A6878; margin-top: 8px; line-height: 1.55; }
.info-card__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 20px; margin-bottom: 6px; }
.channel-card {
background: #FFFFFF;
border: 1px solid #ECE6D5;
border-radius: 18px;
padding: 22px;
display: flex; align-items: center; gap: 16px;
text-decoration: none; color: inherit;
transition: all 220ms cubic-bezier(.22,.61,.36,1);
}
.channel-card:hover {
border-color: #F8CE74;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15,27,39,.08);
}
.channel-card__icon {
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.channel-card__icon--phone { background: #DCEBF6; color: #1F5E83; }
.channel-card__icon--mail { background: #FFF1CF; color: #9E6E16; }
.channel-card__icon--wa { background: #D6F2DD; color: #1B7A3A; }
.channel-card__icon--insta { background: #FCE0E9; color: #A4366C; }
.channel-card__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 18px; color: #0F1B27; }
.channel-card__sub { font-size: 13px; color: #5A6878; margin-top: 2px; }
.schedule-row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0;
border-bottom: 1px dashed #ECE6D5;
font-size: 15px;
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row__day { color: #2B3A4A; font-weight: 500; }
.schedule-row__hours { color: #5A6878; font-variant-numeric: tabular-nums; }
.schedule-row--closed .schedule-row__hours { color: #C45A4E; font-style: italic; }
.schedule-row--today {
background: rgba(255,241,207,.5);
padding: 10px 14px;
margin: 0 -14px;
border-radius: 12px;
border: 1px solid #F8CE74;
}
.schedule-row--today .schedule-row__day { color: #0F1B27; font-weight: 700; }
.schedule-row--today .schedule-row__hours { color: #9E6E16; font-weight: 600; }
.map-frame {
position: relative; border-radius: 24px; overflow: hidden;
border: 1px solid #ECE6D5;
box-shadow: 0 8px 20px rgba(15,27,39,.08);
aspect-ratio: 4 / 3;
background:
radial-gradient(closest-side, rgba(220,235,246,.6), transparent 70%),
linear-gradient(135deg, #F2F8FC 0%, #DCEBF6 100%);
}
.map-frame__overlay {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 24px;
}
.map-frame__pin {
width: 64px; height: 64px; border-radius: 50%;
background: #F2B945; color: #0F1B27;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(229,165,47,.32);
margin-bottom: 16px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.map-frame__pin svg { width: 28px; height: 28px; }
.access-item {
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 0;
border-bottom: 1px solid #F2EAD4;
}
.access-item:last-child { border-bottom: none; }
.access-item__icon {
width: 40px; height: 40px; border-radius: 50%;
background: #F2F8FC; color: #2F7CA5;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.access-item__title { font-weight: 600; font-size: 15px; color: #0F1B27; margin-bottom: 2px; }
.access-item__desc { font-size: 14px; color: #5A6878; line-height: 1.55; }
/* =========================================================
BON CADEAU PAGE
========================================================= */
.tab-pill {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 18px 22px;
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 18px;
cursor: pointer;
transition: all 220ms cubic-bezier(.22,.61,.36,1);
font-family: 'Cormorant Garamond', serif;
font-weight: 600; font-size: 18px;
color: #2B3A4A;
text-align: left;
}
.tab-pill:hover { border-color: #F8CE74; transform: translateY(-1px); }
.tab-pill.is-active {
background: #FFFCF1;
border-color: #F2B945;
box-shadow: 0 8px 24px rgba(229,165,47,.18);
color: #0F1B27;
}
.tab-pill__icon {
width: 44px; height: 44px; border-radius: 50%;
background: #DCEBF6; color: #1F5E83;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all 220ms;
}
.tab-pill.is-active .tab-pill__icon { background: #F2B945; color: #0F1B27; }
.tab-pill__sub {
display: block;
font-family: 'Manrope', sans-serif;
font-weight: 500; font-size: 12px; letter-spacing: 0.04em;
color: #5A6878; margin-top: 2px;
}
.amount-chip {
width: 100%;
padding: 22px 14px;
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 16px;
cursor: pointer;
text-align: center;
transition: all 220ms cubic-bezier(.22,.61,.36,1);
font-family: 'Cormorant Garamond', serif;
}
.amount-chip:hover { border-color: #F8CE74; transform: translateY(-1px); }
.amount-chip.is-active { background: #FFFCF1; border-color: #F2B945; box-shadow: 0 8px 20px rgba(229,165,47,.16); }
/* Mise en avant de la formule "Le plus offert" (150€) */
.amount-chip--featured {
position: relative;
border-color: #F2B945 !important;
background: linear-gradient(180deg, #FFF8E1 0%, #FFFCF1 100%);
box-shadow: 0 6px 18px rgba(229, 165, 47, .25);
}
.amount-chip--featured:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(229, 165, 47, .32); }
.amount-chip--featured.is-active { background: linear-gradient(180deg, #FFF1CF 0%, #FFFCF1 100%); }
.amount-chip__badge {
position: absolute;
top: -10px; left: 50%;
transform: translateX(-50%);
background: #DBAA06;
color: #fff;
font: 700 9.5px/1 'Helvetica Neue', system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
padding: 4px 9px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 4px 10px rgba(219, 170, 6, .35);
}
.amount-chip__num { font-weight: 600; font-size: 32px; line-height: 1; color: #C68A1E; }
.amount-chip__label {
display: block;
font-family: 'Manrope', sans-serif;
font-size: 11px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: #5A6878; margin-top: 6px;
}
.soin-choice {
width: 100%; text-align: left;
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 18px;
padding: 18px 18px;
cursor: pointer;
transition: all 220ms cubic-bezier(.22,.61,.36,1);
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.soin-choice:hover { border-color: #F8CE74; transform: translateY(-1px); }
.soin-choice.is-active { background: #FFFCF1; border-color: #F2B945; box-shadow: 0 8px 20px rgba(229,165,47,.16); }
.soin-choice__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 20px; line-height: 1.2; margin: 0 0 4px; }
.soin-choice__meta { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5A6878; }
.soin-choice__desc { font-size: 11.5px; color: #6B7280; margin-top: 6px; line-height: 1.5; }
.soin-choice__price {
font-family: 'Cormorant Garamond', serif;
font-weight: 600; font-size: 26px; line-height: 1;
color: #C68A1E; white-space: nowrap; flex-shrink: 0;
}
.delivery-opt {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 14px;
cursor: pointer;
transition: all 220ms;
}
.delivery-opt:hover { border-color: #93C5E2; }
.delivery-opt.is-active { background: #F2F8FC; border-color: #4E97C0; }
.delivery-opt__radio {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid #97A1AE;
flex-shrink: 0; position: relative;
transition: all 220ms;
}
.delivery-opt.is-active .delivery-opt__radio { border-color: #2F7CA5; }
.delivery-opt.is-active .delivery-opt__radio::after {
content: ""; position: absolute;
inset: 3px; border-radius: 50%;
background: #2F7CA5;
}
/* Gift card : palette dorée/honey pour bien contraster avec le fond bleu foncé */
.gift-card {
position: relative;
background: linear-gradient(135deg, #F2B945 0%, #DBAA06 55%, #C68A1E 100%);
color: #fff;
border: 1px solid rgba(255,255,255,.4);
border-radius: 28px;
padding: 36px 32px;
overflow: hidden;
box-shadow:
0 24px 60px -12px rgba(219, 170, 6, .55),
0 12px 24px -10px rgba(15, 27, 39, .35);
aspect-ratio: 1.6 / 1;
display: flex; flex-direction: column; justify-content: space-between;
min-height: 280px;
}
.gift-card::before {
content: ""; position: absolute;
top: -45%; right: -20%;
width: 75%; aspect-ratio: 1;
background: radial-gradient(closest-side, rgba(255, 255, 255, .35), transparent 70%);
pointer-events: none;
}
.gift-card::after {
content: ""; position: absolute;
bottom: -35%; left: -10%;
width: 55%; aspect-ratio: 1;
background: radial-gradient(closest-side, rgba(255, 255, 255, .20), transparent 70%);
pointer-events: none;
}
.gift-card__brand,
.gift-card__brand-sub,
.gift-card__eyebrow,
.gift-card__title,
.gift-card__sub,
.gift-card__footer { color: #fff; }
.gift-card__eyebrow { color: rgba(255,255,255,.92); }
.gift-card__inner { position: relative; z-index: 1; }
.gift-card__brand { font-family: 'Caveat', cursive; font-size: 26px; line-height: 1; color: rgba(255,255,255,.95); }
.gift-card__brand-sub {
font-family: 'Manrope', sans-serif;
font-weight: 600; font-size: 9px; letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255,255,255,.85); margin-top: 4px;
}
.gift-card__eyebrow { font-family: 'Caveat', cursive; color: #FCE2A3; font-size: 24px; line-height: 1; }
.gift-card__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 500; font-size: 38px; line-height: 1.05;
letter-spacing: -0.01em;
margin: 6px 0 4px;
}
.gift-card__title--money { font-size: 54px; font-weight: 600; color: #fff; }
.gift-card__title--money small { font-size: 26px; font-weight: 500; opacity: .9; margin-left: 2px; }
.gift-card__sub { font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: 0.04em; }
.gift-card__name {
font-family: 'Caveat', cursive;
font-size: 28px; line-height: 1.1;
color: #FCE2A3; margin-top: 2px; word-break: break-word;
}
.gift-card__msg {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 14px; line-height: 1.45;
color: rgba(255,255,255,.95);
margin-top: 10px;
max-height: 60px; overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.gift-card__footer {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
font-size: 11px; color: rgba(255,255,255,.75); letter-spacing: 0.04em;
}
.gift-card__footer strong { color: #fff; font-weight: 600; }
@media (max-width: 640px) {
/* Mobile : la carte cadeau ne dépasse pas 360px et reste centrée. */
.gift-card { padding: 28px 22px; min-height: 240px; max-width: 360px !important; margin-left: auto; margin-right: auto; }
.gift-card__title { font-size: 28px; }
.gift-card__title--money { font-size: 42px; }
.gift-card__title--money small { font-size: 20px; }
}
.why-card {
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 20px;
padding: 26px 22px;
transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms;
height: 100%;
display: flex; flex-direction: column;
}
.why-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,27,39,.06); }
.why-card__icon {
width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(135deg, #DCEBF6, #BCD9EC);
color: #1F5E83;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.step-num {
width: 44px; height: 44px; border-radius: 50%;
background: #F2B945; color: #0F1B27;
display: inline-flex; align-items: center; justify-content: center;
font: 600 22px/1 'Cormorant Garamond', serif;
box-shadow: 0 6px 18px rgba(229,165,47,.28);
margin-bottom: 14px;
}
.recap-row {
display: flex; justify-content: space-between; gap: 12px;
padding: 12px 0;
border-bottom: 1px dashed #DDD3BB;
font-size: 14px;
}
.recap-row:last-of-type { border-bottom: none; }
.recap-row__lbl { color: #5A6878; }
.recap-row__val { color: #0F1B27; font-weight: 600; text-align: right; max-width: 60%; }
.recap-total {
display: flex; justify-content: space-between; gap: 12px;
padding: 16px 0 4px;
border-top: 1px solid #F2B945;
margin-top: 8px;
}
.recap-total__lbl { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 20px; color: #2B3A4A; }
.recap-total__val { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 32px; line-height: 1; color: #C68A1E; }
.panel { display: none; }
.panel.is-active { display: block; animation: fadeUp .5s cubic-bezier(.22,.61,.36,1); }
@media (min-width: 1024px) {
.preview-sticky { position: sticky; top: 24px; }
}
/* =========================================================
RESERVATION PAGE
========================================================= */
/* ---------- Progress bar (wizard) ---------- */
.resa-progress {
background: #FFFFFF;
border: 1px solid #ECE6D5;
border-radius: 20px;
padding: 16px 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(15,27,39,.04);
}
.resa-progress__track {
position: relative;
height: 6px;
background: #FAF5E8;
border-radius: 999px;
overflow: hidden;
margin-bottom: 14px;
}
.resa-progress__bar {
position: absolute; left: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, #F2B945, #E5A52F);
border-radius: 999px;
transition: width 400ms cubic-bezier(.22,.61,.36,1);
}
.resa-progress__steps {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
}
.resa-progress__step {
width: 28px; height: 28px;
border-radius: 50%;
background: #FAF5E8;
border: 1px solid #ECE6D5;
color: #97A1AE;
font: 600 13px/1 'Cormorant Garamond', serif;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all 250ms cubic-bezier(.22,.61,.36,1);
}
.resa-progress__step.is-active {
background: #F2B945;
border-color: #E5A52F;
color: #0F1B27;
box-shadow: 0 0 0 4px rgba(242,185,69,.18);
}
.resa-progress__step.is-done {
background: #4E9A6B;
border-color: #4E9A6B;
color: #fff;
}
.resa-progress__step.is-done::before {
content: "✓";
font-family: 'Manrope', sans-serif;
font-weight: 700; font-size: 14px;
line-height: 1;
}
.resa-progress__step.is-done { font-size: 0; }
.resa-progress__sep {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, #ECE6D5, transparent);
min-width: 8px;
}
.resa-progress__label {
margin: 0;
font-size: 13px;
color: #2B3A4A;
font-weight: 600;
letter-spacing: 0.02em;
}
/* ---------- Step cards (collapsible wizard) ---------- */
.step-card {
background: #FFFFFF;
border: 1px solid #ECE6D5;
border-radius: 24px;
padding: 24px 28px;
margin-bottom: 14px;
transition: border-color 300ms cubic-bezier(.22,.61,.36,1),
box-shadow 300ms,
padding 300ms cubic-bezier(.22,.61,.36,1);
position: relative;
}
.step-card.is-active {
padding: 28px 28px;
border-color: #F8CE74;
box-shadow: 0 12px 30px rgba(229,165,47,.10), 0 2px 8px rgba(15,27,39,.04);
}
/* Step locked : opacity réduite, body collapsé, non cliquable */
.step-card.is-locked {
opacity: .55;
pointer-events: none;
padding: 16px 20px;
}
.step-card.is-locked .step-body {
max-height: 0 !important;
opacity: 0 !important;
margin: 0 !important;
padding: 0 !important;
visibility: hidden;
}
/* Step done : body collapsé mais header cliquable pour rouvrir */
.step-card.is-done {
background: #FEFCF6;
padding: 14px 22px;
cursor: pointer;
}
.step-card.is-done .step-head { margin-bottom: 0; cursor: pointer; }
.step-card.is-done:hover {
border-color: #F8CE74;
background: #FFFCF1;
}
.step-card.is-done .step-body {
max-height: 0 !important;
opacity: 0 !important;
margin: 0 !important;
padding: 0 !important;
visibility: hidden;
}
/* Step active → body visible */
.step-card.is-active .step-body {
max-height: 4000px;
opacity: 1;
visibility: visible;
padding: 10px 0;
}
/* Chevron indicateur sur les steps non-actifs */
.step-card.is-done .step-head::after,
.step-card.is-locked .step-head::after {
content: "";
width: 18px; height: 18px;
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
margin-left: auto;
}
.step-card.is-done .step-head::after {
background-image: url("data:image/svg+xml;utf8,");
transform: rotate(-90deg);
}
@media (max-width: 640px) {
.step-card { padding: 18px 18px; border-radius: 20px; }
.step-card.is-active { padding: 22px 20px; }
.step-card.is-locked { padding: 14px 16px; }
.step-card.is-done { padding: 12px 18px; }
}
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-num-r {
width: 38px; height: 38px; flex-shrink: 0;
border-radius: 50%;
background: #FAF5E8;
border: 1px solid #ECE6D5;
color: #C68A1E;
display: flex; align-items: center; justify-content: center;
font: 600 18px/1 'Cormorant Garamond', serif;
transition: all 300ms;
}
.step-card.is-active .step-num-r { background: #F2B945; border-color: #E5A52F; color: #0F1B27; }
.step-card.is-done .step-num-r { background: #4E9A6B; border-color: #4E9A6B; color: #fff; }
.step-card.is-done .step-num-r::before { content: "✓"; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px; }
.step-card.is-done .step-num-r span { display: none; }
.step-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.2; margin: 0; flex: 1; }
.step-meta { font-size: 11.5px; color: #6B7280; letter-spacing: 0.02em; margin-top: 2px; line-height: 1.4; }
.step-card .text-ink-500,
.step-card .text-xs,
.step-card p:not(.text-base):not(.text-sm) { font-size: 11px; line-height: 1.3; }
.step-card { padding: 22px 24px; }
.step-card.is-active { padding: 24px 24px; }
.step-edit {
font-size: 12px; font-weight: 600;
color: #2F7CA5;
letter-spacing: 0.04em;
cursor: pointer;
border: none; background: transparent;
padding: 4px 0;
border-bottom: 1px solid currentColor;
display: none;
}
.step-card.is-done .step-edit { display: inline-block; }
.step-edit:hover { color: #C68A1E; }
.step-body { transition: max-height 400ms cubic-bezier(.22,.61,.36,1), opacity 300ms; overflow: hidden; }
.service-card {
background: #FEFCF6;
border: 1.5px solid #ECE6D5;
border-radius: 18px;
padding: 18px 20px;
cursor: pointer;
display: flex; flex-direction: column;
transition: all 220ms cubic-bezier(.22,.61,.36,1);
text-align: left;
width: 100%;
position: relative;
}
.service-card:hover { transform: translateY(-2px); border-color: #F8CE74; box-shadow: 0 8px 20px rgba(15,27,39,.08); }
.service-card.is-active { background: #FFFCF1; border-color: #F2B945; box-shadow: 0 8px 24px rgba(229,165,47,.18); }
.service-card.is-active::before {
content: "✓"; position: absolute;
top: 16px; right: 16px;
width: 26px; height: 26px;
border-radius: 50%;
background: #F2B945; color: #0F1B27;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
box-shadow: 0 4px 10px rgba(229,165,47,.32);
}
.service-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.service-card__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 18px; line-height: 1.2; margin: 0; padding-right: 0; }
.service-card__price { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; line-height: 1; color: #C68A1E; white-space: nowrap; flex-shrink: 0; }
.service-card__meta svg {
display: inline-block;
top: -1px;
position: relative;
}
.service-card__meta {
display: flex; align-items: center; flex-wrap: wrap;
gap: 8px;
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: #1F5E83;
margin-bottom: 8px;
}
.service-card__desc { font-size: 12.5px; line-height: 1.5; color: #5A6878; margin-top: 8px; }
/* Toggle "Détails ▾" : masque la description par défaut, l'affiche en .is-expanded */
.service-card__toggle {
margin-left: auto;
background: transparent;
border: 1px solid #ECE6D5;
border-radius: 999px;
padding: 3px 9px;
font: 600 10.5px/1 'Helvetica Neue', system-ui, sans-serif;
color: #6B7280;
cursor: pointer;
transition: all .15s;
}
.service-card__toggle:hover { border-color: #2F7CA5; color: #114a50; }
.service-card .service-card__desc,
.soin-choice .soin-choice__desc { display: none; }
.service-card.is-expanded .service-card__desc,
.soin-choice.is-expanded .soin-choice__desc { display: block; }
@media (min-width: 769px) {
/* Sur desktop : descriptions visibles par défaut, le toggle disparaît */
.service-card .service-card__desc,
.soin-choice .soin-choice__desc { display: block; }
.service-card__toggle { display: none; }
}
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-month { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; color: #0F1B27; text-transform: capitalize; }
.cal-nav-btn {
width: 38px; height: 38px;
border-radius: 50%;
background: #FAF5E8;
border: 1px solid #ECE6D5;
color: #2B3A4A;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 200ms;
}
.cal-nav-btn:hover { background: #FFF1CF; border-color: #F8CE74; }
.cal-nav-btn[disabled] { opacity: .35; cursor: not-allowed; }
.cal-weekdays {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 4px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: #97A1AE;
text-align: center;
margin-bottom: 6px;
}
.cal-weekdays span { padding: 6px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day {
aspect-ratio: 1; min-height: 42px;
background: transparent;
border: 1px solid transparent;
border-radius: 12px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
font-family: 'Manrope', sans-serif;
font-weight: 600; font-size: 14px;
color: #2B3A4A;
cursor: pointer;
transition: all 200ms cubic-bezier(.22,.61,.36,1);
position: relative;
overflow: visible;
}
.cal-day:hover:not(.is-disabled):not(.is-full) { background: #FFF1CF; border-color: #F8CE74; }
.cal-day.is-empty { cursor: default; }
.cal-day.is-disabled { color: #D8DEE5; cursor: not-allowed; }
.cal-day.is-full { color: #97A1AE; cursor: not-allowed; }
.cal-day.is-full::after { content: ""; position: absolute; width: 18px; height: 1px; background: #D8DEE5; transform: rotate(-25deg); }
.cal-day__dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
/* Disponible → fond vert clair, bordure verte (état unique) */
.cal-day.has-spots {
background: rgba(78, 154, 107, 0.11);
border-color: rgba(78, 154, 107, 0.35);
color: #2C5F3F;
font-weight: 700;
}
.cal-day.has-spots .cal-day__dot { background: #4E9A6B; width: 7px; height: 7px; }
.cal-day.has-spots:hover:not(.is-disabled):not(.is-full) {
background: rgba(78, 154, 107, 0.22);
border-color: #4E9A6B;
transform: scale(1.04);
}
.cal-day { transition: transform .12s cubic-bezier(.22,.61,.36,1), background .15s, border-color .15s; }
.cal-day.is-today { background: #DCEBF6; border-color: #93C5E2; color: #1F5E83; }
.cal-day.is-active { background: #F2B945 !important; border-color: #E5A52F !important; color: #0F1B27 !important; box-shadow: 0 6px 14px rgba(229,165,47,.32); }
.cal-day.is-active .cal-day__dot { background: #0F1B27; }
.cal-legend {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 14px; padding-top: 14px;
border-top: 1px dashed #ECE6D5;
font-size: 11px; color: #5A6878;
}
.cal-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.slot-btn {
padding: 11px 8px;
font-family: 'Manrope', sans-serif;
font-weight: 600; font-size: 14px;
color: #2B3A4A;
background: #FEFCF6;
border: 1px solid #ECE6D5;
border-radius: 12px;
cursor: pointer;
transition: all 200ms cubic-bezier(.22,.61,.36,1);
}
.slot-btn:hover:not([disabled]) { background: #FFF1CF; border-color: #F8CE74; transform: translateY(-1px); }
.slot-btn[disabled] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.slot-btn.is-active { background: #F2B945; border-color: #E5A52F; color: #0F1B27; box-shadow: 0 6px 14px rgba(229,165,47,.32); }
.recap {
background: #FFFFFF;
border: 1.5px solid #ECE6D5;
border-radius: 24px;
padding: 28px;
box-shadow: 0 8px 20px rgba(15,27,39,.06), 0 1px 2px rgba(15,27,39,.04);
}
@media (min-width: 1024px) { .recap-wrap { position: sticky; top: 24px; } }
.recap-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #ECE6D5; font-size: 14px; }
.recap-row__label { color: #5A6878; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; flex-shrink: 0; }
.recap-row__val { text-align: right; color: #0F1B27; font-weight: 500; }
.recap-row__val.empty { color: #97A1AE; font-style: italic; font-weight: 400; }
.recap-total {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px;
margin-top: 14px; padding: 16px 18px;
background: #FAF5E8;
border-radius: 16px;
border: 1px solid #F8CE74;
}
.recap-total__label { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #2B3A4A; }
.recap-total__val { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 36px; line-height: 1; color: #C68A1E; }
.recap-deposit { font-size: 12px; color: #5A6878; line-height: 1.55; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ECE6D5; text-align: center; }
.recap-deposit strong { color: #2B3A4A; }
.filter-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px;
background: #DCEBF6;
color: #1F5E83;
border-radius: 999px;
font-size: 12px; font-weight: 600;
letter-spacing: 0.04em;
}
.empty-state {
text-align: center;
padding: 32px 16px;
color: #5A6878;
background: #FEFCF6;
border-radius: 14px;
border: 1px dashed #DDD3BB;
}
.check-row { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.55; color: #5A6878; cursor: pointer; }
.check-row input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; accent-color: #E5A52F; }
.modal-backdrop {
position: fixed; inset: 0; z-index: 100;
background: rgba(15,27,39,.55);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
display: none;
align-items: center; justify-content: center;
padding: 24px;
}
.modal-backdrop.is-open { display: flex; }
.modal-card {
background: #FEFCF6;
border-radius: 28px;
padding: 40px 32px;
max-width: 480px; width: 100%;
box-shadow: 0 32px 64px rgba(15,27,39,.14);
text-align: center;
position: relative;
}
.modal-check {
width: 72px; height: 72px;
margin: 0 auto 18px;
border-radius: 50%;
background: linear-gradient(135deg, #FCE2A3, #F2B945);
color: #0F1B27;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(229,165,47,.32);
}
/* =========================================================
À PROPOS PAGE
========================================================= */
.value-card {
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 24px;
padding: 32px 28px;
transition: transform 220ms cubic-bezier(.22,.61,.36,1),
box-shadow 220ms cubic-bezier(.22,.61,.36,1),
border-color 220ms;
}
.value-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15,27,39,.10), 0 4px 10px rgba(15,27,39,.05);
border-color: #F8CE74;
}
.value-card__icon {
width: 56px; height: 56px; border-radius: 50%;
background: #FFF1CF;
display: flex; align-items: center; justify-content: center;
color: #9E6E16; margin-bottom: 18px;
}
.team-card { text-align: center; }
.team-card__photo {
width: 100%; max-width: 260px; aspect-ratio: 1/1;
margin: 0 auto 18px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 8px 20px rgba(15,27,39,.08), 0 2px 6px rgba(15,27,39,.04);
position: relative;
}
.num-bullet {
width: 44px; height: 44px; border-radius: 50%;
background: #F2B945; color: #0F1B27;
font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 22px;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(229,165,47,.32);
flex-shrink: 0;
}
.quote-mark {
font-family: 'Cormorant Garamond', serif;
font-size: 140px; line-height: 1;
color: #FCE2A3;
font-weight: 600;
}
/* =========================================================
MENTIONS LÉGALES PAGE
========================================================= */
.legal-card {
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 20px;
padding: 28px;
transition: box-shadow 220ms cubic-bezier(.22,.61,.36,1);
}
.legal-card:hover { box-shadow: 0 8px 20px rgba(15,27,39,.05); }
@media (min-width: 768px) { .legal-card { padding: 40px; } }
.legal-section { scroll-margin-top: 100px; }
/* Évite que les ancres de section #foo ne soient masquées par le header sticky.
Applique un offset par défaut à toutes les sections cibles d'ancres et aux
articles internes (variant-card, faq-item) couramment liés depuis les jump-pills. */
section[id], article[id], .soin-section, #horaires-detail { scroll-margin-top: 100px; }
.legal-section + .legal-section { margin-top: 24px; }
.legal-num {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: #FFF1CF; color: #9E6E16;
font: 600 14px/1 'Cormorant Garamond', serif;
flex-shrink: 0;
}
.legal-body { color: #2B3A4A; line-height: 1.7; font-size: 15.5px; }
.legal-body p { margin-bottom: 14px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body strong { color: #0F1B27; font-weight: 600; }
.legal-body a {
color: #1F5E83; text-decoration: none;
border-bottom: 1px solid rgba(31,94,131,.3);
transition: color 220ms, border-color 220ms;
}
.legal-body a:hover { color: #C68A1E; border-bottom-color: #C68A1E; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
display: grid; grid-template-columns: 1fr; gap: 4px;
padding: 12px 0;
border-bottom: 1px dashed #ECE6D5;
}
.info-list li:last-child { border-bottom: 0; }
@media (min-width: 640px) {
.info-list li { grid-template-columns: 200px 1fr; gap: 16px; align-items: baseline; }
}
.info-list .label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #5A6878; font-weight: 600; }
.info-list .value { color: #0F1B27; font-size: 15.5px; line-height: 1.6; }
.toc {
background: #F2F8FC;
border: 1px solid #DCEBF6;
border-radius: 20px;
padding: 24px;
}
.toc__title {
font: 600 11px/1 'Manrope', sans-serif;
letter-spacing: 0.16em; text-transform: uppercase;
color: #1F5E83; margin-bottom: 14px;
}
.toc a {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; margin: 0 -10px;
border-radius: 10px;
color: #0F1B27; text-decoration: none;
font-size: 14px;
transition: background 220ms, color 220ms;
}
.toc a:hover { background: #fff; color: #1F5E83; }
.toc a .toc__num {
width: 22px; height: 22px; border-radius: 50%;
background: #fff; color: #9E6E16; border: 1px solid #FCE2A3;
font: 600 11px/1 'Cormorant Garamond', serif;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: scale(1); }
}
.fade-up { animation: fadeUp .9s cubic-bezier(.22,.61,.36,1) both; }
.fade-up.d1 { animation-delay: .1s; }
.fade-up.d2 { animation-delay: .25s; }
.fade-up.d3 { animation-delay: .4s; }
.fade-in { animation: fadeIn 1s cubic-bezier(.22,.61,.36,1) both; }
.reveal {
opacity: 0; transform: translateY(24px);
transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.fade-up, .fade-in { animation: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.sparkle { animation: none; }
.map-frame__pin { animation: none; }
.obs-footer .sparkle { animation: none; }
.hero-slider__img { transition: none; }
}
/* =========================================================
STICKY HEADER COMPACT (au scroll)
========================================================= */
.obs-header {
position: sticky;
top: 0;
transition: background .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s cubic-bezier(.22,.61,.36,1),
padding .25s cubic-bezier(.22,.61,.36,1);
}
/* Quand on défile : header compact, fond bleu foncé + ombre,
topbar masquée, padding nav réduit. Le texte/logo passent en blanc pour
garder le contraste. */
.obs-header.is-scrolled {
z-index: 60;
background: linear-gradient(180deg, #0E2638 0%, #163F58 100%) !important;
-webkit-backdrop-filter: saturate(160%) blur(10px);
backdrop-filter: saturate(160%) blur(10px);
box-shadow: 0 2px 14px rgba(15, 27, 39, .18);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.obs-header.is-scrolled .obs-topbar {
max-height: 0;
padding: 0;
overflow: hidden;
border: 0;
opacity: 0;
}
.obs-header .obs-topbar {
transition: max-height .35s cubic-bezier(.22,.61,.36,1), opacity .25s, padding .25s;
max-height: 60px;
overflow: hidden;
}
.obs-header.is-scrolled nav {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.obs-header.is-scrolled .obs-logo-circle {
width: 40px; height: 40px;
}
.obs-header.is-scrolled .obs-logo-circle svg {
width: 20px; height: 20px;
}
.obs-header.is-scrolled .obs-logo-mark { font-size: 20px; }
.obs-header.is-scrolled .obs-logo-mark__sub { display: none; }
/* En variante on-hero compact : on garde texte blanc + accents honey
(le fond reste foncé donc pas de basculement sombre nécessaire) */
.obs-header.is-scrolled .obs-logo-mark { color: #fff; }
.obs-header.is-scrolled .obs-logo-mark__sub { color: rgba(255,255,255,.85); }
.obs-header.is-scrolled .obs-nav-link { color: rgba(255,255,255,.92); }
.obs-header.is-scrolled .obs-nav-link:hover,
.obs-header.is-scrolled .obs-nav-link.is-active {
color: #F2B945; border-bottom-color: #F2B945;
}
.obs-header.is-scrolled .obs-logo-circle {
background: rgba(255,255,255,.10);
color: #fff;
border: 1px solid rgba(255,255,255,.18);
-webkit-backdrop-filter: saturate(180%) blur(8px);
backdrop-filter: saturate(180%) blur(8px);
}
.obs-header.is-scrolled .obs-burger { color: #fff; }
/* Sur mobile, l'effet sticky est moins agressif */
@media (max-width: 768px) {
.obs-header.is-scrolled nav { padding-top: 6px !important; padding-bottom: 6px !important; }
.obs-header.is-scrolled .obs-logo-circle { width: 36px; height: 36px; }
}
/* =========================================================
HERO TITLE — centrage h1 + p sur toutes les pages publiques
========================================================= */
body.nd-page .hero,
body.nd-page .hero-light {
text-align: center;
}
body.nd-page .hero .t-display,
body.nd-page .hero-light .t-display,
body.nd-page .hero h1,
body.nd-page .hero-light h1,
body.nd-page .hero h2,
body.nd-page .hero-light h2 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.nd-page .hero .t-display + p,
body.nd-page .hero-light .t-display + p,
body.nd-page .hero h1 + p,
body.nd-page .hero-light h1 + p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.nd-page .hero .eyebrow,
body.nd-page .hero-light .eyebrow {
text-align: center;
}
/* Mais on garde l'image, le formulaire, ou le bloc image+texte 2 cols
non centré si présent dans le hero (grille à 2 colonnes). */
body.nd-page .hero .grid,
body.nd-page .hero-light .grid {
text-align: left;
padding-top: 0;
}
/* Hero de l'accueil garde son layout 2 colonnes texte+image */
body#page_accueil.nd-page .hero { text-align: left; }
body#page_accueil.nd-page .hero h1 { text-align: left; margin-left: 0; margin-right: 0; margin-bottom: 25px; }
body#page_accueil.nd-page .hero p { text-align: left; margin-left: 0; margin-right: 0; }
body#page_accueil.nd-page .hero .eyebrow { text-align: left; }
/* =========================================================
PROMO ZONES (créneaux/jours promotionnels — back/availability.php → spa_promos)
========================================================= */
.cal-day.has-promo {
position: relative;
background: linear-gradient(180deg, rgba(242, 185, 69, .22), rgba(219, 170, 6, .28)) !important;
border-color: #DBAA06 !important;
color: #5C3A00 !important;
font-weight: 700;
}
.cal-day.has-promo:hover {
background: linear-gradient(180deg, rgba(242, 185, 69, .42), rgba(219, 170, 6, .50)) !important;
border-color: #C68A1E !important;
}
.cal-day__promo {
position: absolute;
top: 1px; left: 50%;
transform: translateX(-50%);
font-size: 8.5px;
font-weight: 900;
background: transparent;
color: #d62828;
padding: 0;
border-radius: 0;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
box-shadow: none;
pointer-events: none;
z-index: 2;
}
.cal-day.has-promo > span:first-child { margin-top: 7px; }
.cal-day.has-promo .cal-day__dot { display: none; }
/* Bandeau global affiché au-dessus du calendrier quand AUCUNE dispo possible
dans les "delai_reservation_max" prochains jours (règles "soin"). */
.cal-global-reason {
background: rgba(214, 40, 40, 0.08);
border: 1px solid rgba(214, 40, 40, 0.25);
color: #b21f1f;
font-size: 0.85em;
font-weight: 600;
text-align: center;
padding: 8px 12px;
border-radius: 8px;
margin: 0 0 10px;
}
.cal-global-reason.hidden { display: none; }
/* Slot button promo */
.slot-btn.has-promo {
position: relative;
border-color: #C45A4E !important;
background: rgba(196, 90, 78, .06);
color: #C45A4E;
font-weight: 700;
}
.slot-btn.has-promo:hover:not([disabled]) {
background: rgba(196, 90, 78, .12);
border-color: #C45A4E;
color: #841616;
}
.slot-btn.has-promo.is-active {
background: #C45A4E !important;
border-color: #C45A4E !important;
color: #fff !important;
}
.slot-btn__promo {
display: block;
font-size: 9px;
font-weight: 700;
background: #C45A4E;
color: #fff;
border-radius: 999px;
padding: 1px 4px;
margin-top: 2px;
line-height: 1;
letter-spacing: 0.02em;
}
.slot-btn.has-promo.is-active .slot-btn__promo {
background: #fff;
color: #C45A4E;
}
/* =========================================================
AVIS GOOGLE — Marquee infini (carrousel 2 rangées sens opposés)
========================================================= */
.reviews-marquee {
position: relative;
overflow: hidden;
padding: 8px 0;
/* Fond gradient pour les bords pour estomper la coupure */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.reviews-marquee__row {
display: flex;
gap: 16px;
width: max-content;
padding: 8px 0;
will-change: transform;
}
.reviews-marquee__row--ltr {
animation: review-marquee-ltr 60s linear infinite;
}
.reviews-marquee__row--rtl {
animation: review-marquee-rtl 70s linear infinite;
margin-top: 8px;
}
.reviews-marquee:hover .reviews-marquee__row {
animation-play-state: paused;
}
/* Réduit la charge CPU/GPU quand la section sort du viewport */
.reviews-marquee { content-visibility: auto; contain-intrinsic-size: 1px 320px; }
/* Désactive l'animation pour les utilisateurs sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
.reviews-marquee__row--ltr,
.reviews-marquee__row--rtl { animation: none; }
}
@keyframes review-marquee-ltr {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes review-marquee-rtl {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.reviews-marquee__row { animation: none; }
}
/* Cartes avis dans le marquee */
.review-card {
flex-shrink: 0;
width: 320px;
background: #fff;
color: #0F1B27;
border-radius: 20px;
padding: 22px 22px 20px;
box-shadow: 0 10px 30px rgba(15,27,39,.10), 0 2px 6px rgba(15,27,39,.04);
display: flex;
flex-direction: column;
}
.review-card__stars {
display: flex;
gap: 2px;
color: #F2B945;
margin-bottom: 10px;
}
.review-card__text {
color: #2B3A4A;
font-size: 14px;
line-height: 1.55;
margin: 0 0 16px;
flex: 1;
}
.review-card__author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px dashed #ECE6D5;
padding-top: 12px;
}
.review-card__avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: #DCEBF6;
color: #1F5E83;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 13px;
flex-shrink: 0;
}
.review-card__name { font-size: 13px; font-weight: 600; color: #0F1B27; }
.review-card__source { font-size: 11px; color: #97A1AE; }
/* =========================================================
SOINS SLIDER (accueil) — scroll-snap horizontal + nav buttons
========================================================= */
.soins-slider { position: relative; }
.soins-slider__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 88%;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 8px 4px 16px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.soins-slider__track::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .soins-slider__track { grid-auto-columns: 46%; } }
@media (min-width: 1024px){ .soins-slider__track { grid-auto-columns: 31%; } }
.soin-slide {
scroll-snap-align: start;
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 22px;
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 4px 14px rgba(15,27,39,.04);
transition: transform .22s, box-shadow .22s, border-color .22s;
}
.soin-slide:hover {
transform: translateY(-3px);
border-color: #F8CE74;
box-shadow: 0 12px 28px rgba(15,27,39,.08);
}
.soin-slide__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.soin-slide__price {
font-family: 'Cormorant Garamond', serif;
font-weight: 600; font-size: 22px;
color: #C68A1E;
white-space: nowrap;
}
.soin-slide__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 600; font-size: 19px;
line-height: 1.2;
margin: 0;
color: #0F1B27;
}
.soin-slide__meta {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: #5A6878;
}
.soin-slide__meta li { display: flex; align-items: center; gap: 6px; }
.soin-slide__meta li svg { flex-shrink: 0; color: #97A1AE; }
.soin-slide__desc {
font-size: 13px; line-height: 1.55;
color: #5A6878;
flex: 1;
margin: 0;
}
.soins-slider__nav {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid #ECE6D5;
color: #2B3A4A;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(15,27,39,.08);
z-index: 5;
transition: all .15s;
}
.soins-slider__nav:hover { background: #FFF1CF; border-color: #F8CE74; }
.soins-slider__nav--prev { left: -10px; }
.soins-slider__nav--next { right: -10px; }
@media (max-width: 640px) {
.soins-slider__nav { display: none; }
}
/* =========================================================
LOGO HEADER (image, remplace l'icône SVG par défaut)
========================================================= */
.obs-logo-link { display: inline-flex; align-items: center; }
.obs-logo-img {
height: 60px;
max-height: 60px;
width: auto;
display: block;
transition: height .25s cubic-bezier(.22,.61,.36,1), filter .25s;
}
/* En mode sticky compact, le logo réduit */
.obs-header.is-scrolled .obs-logo-img { height: 40px; max-height: 40px; }
/* En variante on-hero (fond bleu), on inverse en blanc */
.obs-header--on-hero:not(.is-scrolled) .obs-logo-img {
filter: brightness(0) invert(1);
}
/* =========================================================
reCAPTCHA v3 — masquage du badge visible (mention obligatoire
transférée dans la politique de protection des données)
========================================================= */
.grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; }
/* =========================================================
CHAT WIDGET FLOTTANT (FAQ rapide)
========================================================= */
.chat-fab {
position: fixed;
right: 20px; bottom: 20px;
width: 56px; height: 56px;
border-radius: 50%;
background: #F2B945;
color: #0F1B27;
border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 10px 30px rgba(229,165,47,.36), 0 2px 6px rgba(15,27,39,.10);
z-index: 9990;
transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 36px rgba(229,165,47,.5); }
.chat-fab svg { width: 24px; height: 24px; }
@media (max-width: 768px) {
/* Chat accessible sur mobile : le bouton est remonté au-dessus de la barre
"Réserver" (sticky-cta), et le panneau occupe la quasi-totalité de l'écran. */
.chat-fab { bottom: 84px; right: 16px; }
.chat-panel,
.chat-panel.is-large {
left: 10px; right: 10px; width: auto;
top: 14px; bottom: 150px; height: auto; max-height: none;
}
.chat-panel__expand { display: none; }
body.nd-page { padding-bottom: 80px; }
/* Compaction mobile générale : moins d'espace perdu dans les box */
body.nd-page section { padding: 26px 0 !important; }
.variant-card { padding: 16px !important; border-radius: 16px; }
.variant-card__head { margin-bottom: 8px; gap: 8px; }
.variant-card__price { font-size: 22px; }
.variant-card__title { font-size: 18px; }
.variant-card__desc { font-size: 12px; line-height: 1.4; margin-bottom: 10px; }
.variant-card__duration { font-size: 11px; margin-bottom: 8px; }
.step-card { padding: 14px 14px !important; border-radius: 16px; }
.step-card.is-active { padding: 18px 16px !important; }
.step-card.is-locked { padding: 12px 14px !important; }
.step-card.is-done { padding: 10px 14px !important; }
.step-head { margin-bottom: 8px; gap: 10px; }
.step-title { font-size: 16px; }
.step-meta { font-size: 11px; }
.soin-card { padding: 12px !important; border-radius: 12px; }
.soin-card__title { font-size: 14px; min-height: 32px; }
.choose-card, .faq-item { padding: 14px !important; border-radius: 14px; }
.info-note { padding: 10px 12px; border-radius: 12px; font-size: 12px; }
.promo-spotlight__inner { padding: 14px !important; border-radius: 16px; }
.promo-spotlight { padding: 12px 0; }
.promo-spotlight__card { padding: 10px 12px; }
.gift-card { padding: 20px !important; }
/* Slider mini-soin plus compact */
.soin-mini { flex-basis: 200px !important; padding: 10px 12px 12px !important; }
.soin-mini__title { min-height: 32px; }
/* Headings réduits */
body.nd-page .t-h2 { font-size: clamp(22px, 6vw, 28px) !important; }
body.nd-page .t-h3 { font-size: clamp(18px, 5vw, 22px) !important; }
body.nd-page .t-h4 { font-size: 16px !important; }
/* Anniv toggles compactes */
.anniv-toggles { padding: 10px 12px; gap: 8px; }
}
.chat-panel {
position: fixed;
right: 20px; bottom: 92px;
width: 350px;
height: 70vh;
max-width: calc(100vw - 28px);
max-height: calc(100vh - 110px);
background: #fff;
border-radius: 22px;
box-shadow: 0 24px 60px rgba(15,27,39,.22), 0 4px 12px rgba(15,27,39,.06);
z-index: 9989;
display: none;
flex-direction: column;
overflow: hidden;
font-family: 'Manrope', sans-serif;
border: 1px solid #ECE6D5;
transition: width .25s cubic-bezier(.22,.61,.36,1), height .25s cubic-bezier(.22,.61,.36,1);
}
.chat-panel.is-open { display: flex; animation: chat-pop .25s cubic-bezier(.22,.61,.36,1); }
/* Mode plein écran : toggle via bouton dans le head */
.chat-panel.is-large {
width: 80vw;
height: 80vh;
max-width: 80vw;
max-height: 80vh;
right: 10vw;
bottom: 10vh;
}
.chat-panel__expand {
background: none; border: none;
color: #FCE2A3; cursor: pointer;
font-size: 16px; line-height: 1;
padding: 4px 6px; margin-right: 4px;
opacity: .8; transition: opacity .15s;
}
.chat-panel__expand:hover { opacity: 1; }
@keyframes chat-pop {
from { opacity: 0; transform: translateY(8px) scale(.95); transform-origin: bottom right; }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel__head {
background: linear-gradient(180deg,#2F7CA5 0%,#1F5E83 100%);
color: #fff;
padding: 14px 18px;
display: flex; align-items: center; gap: 10px;
}
.chat-panel__head h4 { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 18px; }
.chat-panel__head__sub { font-size: 11px; color: #FCE2A3; }
.chat-panel__close {
margin-left: auto; background: transparent; border: 0; color: rgba(255,255,255,.85);
cursor: pointer; padding: 4px; line-height: 1;
}
.chat-panel__body {
flex: 1;
overflow-y: auto;
padding: 14px 14px 4px;
background: #FEFCF6;
}
.chat-msg {
background: #fff;
border-radius: 14px;
padding: 10px 13px;
margin-bottom: 8px;
font-size: 13.5px;
line-height: 1.5;
color: #2B3A4A;
border: 1px solid #ECE6D5;
max-width: 90%;
word-wrap: break-word;
}
.chat-msg.is-user,
.chat-msg--user {
background: var(--sky-100);
border-color: var(--sky-200);
color: #0F1B27;
margin-left: auto;
}
.chat-msg--bot { background: #fff; }
.chat-msg a { color: #2F7CA5; text-decoration: underline; }
.chat-msg--typing {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 12px 14px;
max-width: 70px;
}
.chat-msg--typing span {
width: 6px; height: 6px;
border-radius: 50%;
background: #97A1AE;
animation: chat-bounce 1s infinite ease-in-out;
}
.chat-msg--typing span:nth-child(2) { animation-delay: .15s; }
.chat-msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: .4; }
40% { transform: translateY(-4px); opacity: 1; }
}
/* Input du chat */
.chat-panel__input {
display: flex;
gap: 6px;
padding: 10px 12px;
border-top: 1px solid #ECE6D5;
background: #fff;
}
.chat-panel__input input {
flex: 1;
border: 1px solid #ECE6D5;
border-radius: 999px;
padding: 9px 14px;
font: 400 13.5px/1.3 'Helvetica Neue', system-ui, sans-serif;
color: #0F1B27;
background: #FEFCF6;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.chat-panel__input input:focus {
border-color: #2F7CA5;
box-shadow: 0 0 0 3px rgba(47, 124, 165, .1);
}
.chat-panel__input input:disabled {
background: #F5F0E1;
cursor: not-allowed;
}
.chat-panel__input button {
width: 38px; height: 38px;
flex-shrink: 0;
border: none;
background: #DBAA06;
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .15s, transform .15s;
}
.chat-panel__input button:hover { background: #C68A1E; transform: scale(1.05); }
.chat-panel__input button:disabled { background: #97A1AE; cursor: not-allowed; transform: none; }
.chat-panel__input button svg { transform: translateX(-1px); }
.chat-panel__foot {
padding: 10px 14px 14px;
border-top: 1px solid #ECE6D5;
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
background: #fff;
font-size: 10px;
}
.chat-panel__foot a {
display: inline-flex; align-items: center; gap: 4px;
color: #2F7CA5;
text-decoration: none;
font-size: 10px;
font-weight: 600;
padding: 6px 10px;
border-radius: 8px;
background: var(--sky-50);
}
.chat-panel__foot a:hover { background: var(--sky-100); }
/* =========================================================
BON CADEAU — Chips "nombre de personnes" (dans card soin)
========================================================= */
.soin-choice__people {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.soin-choice__people__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: #5A6878;
margin-right: 4px;
}
.people-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
padding: 5px 12px;
background: #FAF5E8;
color: #2B3A4A;
border: 1px solid #ECE6D5;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .15s cubic-bezier(.22,.61,.36,1);
}
.people-chip:hover { background: #FFF1CF; border-color: #F8CE74; }
.people-chip.is-active {
background: #F2B945;
border-color: #E5A52F;
color: #0F1B27;
box-shadow: 0 2px 6px rgba(229,165,47,.28);
}
/* =========================================================
SOINS GRID (accueil) — onglets catégorie + cartes compactes
========================================================= */
.soins-cat-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 0 0 28px;
}
.soins-cat-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #fff;
border: 1px solid #ECE6D5;
color: #2B3A4A;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .18s cubic-bezier(.22,.61,.36,1);
}
.soins-cat-tab small {
background: #FAF5E8;
border-radius: 999px;
padding: 1px 7px;
font-size: 10px;
font-weight: 700;
color: #97A1AE;
line-height: 1.4;
}
.soins-cat-tab:hover {
background: #FFF1CF;
border-color: #F8CE74;
}
.soins-cat-tab.is-active {
background: #F2B945;
border-color: #E5A52F;
color: #0F1B27;
box-shadow: 0 4px 12px rgba(229,165,47,.28);
}
.soins-cat-tab.is-active small {
background: rgba(15,27,39,.12);
color: #0F1B27;
}
/* Grille compacte : 2 colonnes sm, 3 md, 4 xl */
.soins-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (min-width: 768px) { .soins-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1200px) { .soins-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.soin-card {
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 16px;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
gap: 6px;
transition: transform .18s cubic-bezier(.22,.61,.36,1),
box-shadow .18s,
border-color .18s;
position: relative;
}
.soin-card:hover {
transform: translateY(-3px);
border-color: #F8CE74;
box-shadow: 0 10px 22px rgba(15,27,39,.08);
}
/* Carte cliquable dans son ensemble */
a.soin-card,
.soin-card--linked {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.soin-card:hover .soin-card__cta,
.soin-card--linked:hover .soin-card__cta {
color: #DBAA06;
border-color: #DBAA06;
}
/* ── Macro-catégories cliquables (accueil) ───────────────────────────── */
.macro-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 22px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, border-color .25s;
position: relative;
}
.macro-card:hover {
transform: translateY(-4px);
border-color: #F2B945;
box-shadow: 0 18px 40px rgba(15, 27, 39, .12);
}
.macro-card__img-wrap {
aspect-ratio: 4 / 3;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #DCEBF6 0%, #6DAFD3 100%);
}
.macro-card__img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.macro-card:hover .macro-card__img-wrap img { transform: scale(1.06); }
.macro-card__emoji {
position: absolute;
top: 12px; left: 12px;
width: 36px; height: 36px;
background: rgba(255,255,255,.92);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
backdrop-filter: blur(4px);
box-shadow: 0 4px 10px rgba(15, 27, 39, .12);
}
.macro-card__body {
padding: 16px 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.macro-card__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: clamp(17px, 1.8vw, 21px);
color: #114a50;
margin: 0;
line-height: 1.2;
}
.macro-card__desc {
font-size: 13px;
line-height: 1.5;
color: #5A6878;
margin: 0;
flex: 1;
}
.macro-card__count {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
color: #DBAA06;
margin-top: 8px;
}
.macro-card__count svg { transition: transform .2s; }
.macro-card:hover .macro-card__count svg { transform: translateX(4px); }
/* Variantes de teinte */
.macro-card--sky .macro-card__img-wrap { background: linear-gradient(135deg, #DCEBF6 0%, #6DAFD3 100%); }
.macro-card--honey .macro-card__img-wrap { background: linear-gradient(135deg, #FFF1CF 0%, #F2B945 100%); }
.macro-card--cream .macro-card__img-wrap { background: linear-gradient(135deg, #FEFCF6 0%, #ECE6D5 100%); }
.macro-card--rose .macro-card__img-wrap { background: linear-gradient(135deg, #FCE4EC 0%, #E5938B 100%); }
/* Sections par macro-cat */
.macro-section { margin-bottom: 36px; }
.macro-section:last-child { margin-bottom: 0; }
/* ── Slider compact des soins (accueil) ──────────────────────────────── */
.soins-slider-wrap { margin-top: 8px; }
.soins-slider__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 14px;
}
.soins-slider__chips {
display: inline-flex;
gap: 6px;
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 999px;
padding: 4px;
}
.soins-chip {
border: none;
background: transparent;
padding: 7px 14px;
border-radius: 999px;
font: 600 12px/1 'Helvetica Neue', system-ui, sans-serif;
color: #5A6878;
cursor: pointer;
transition: background .15s, color .15s;
white-space: nowrap;
}
.soins-chip:hover { color: #114a50; }
.soins-chip.is-active {
background: #114a50;
color: #fff;
}
.soins-slider {
position: relative;
}
.soins-slider__track {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 4px;
padding: 4px 4px 14px;
scrollbar-width: thin;
scrollbar-color: #ECE6D5 transparent;
-webkit-overflow-scrolling: touch;
}
.soins-slider__track::-webkit-scrollbar { height: 6px; }
.soins-slider__track::-webkit-scrollbar-thumb { background: #ECE6D5; border-radius: 3px; }
.soins-slider__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid #ECE6D5;
background: #fff;
color: #114a50;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(15, 27, 39, .1);
z-index: 2;
transition: opacity .15s, transform .15s, background .15s;
}
.soins-slider__nav:hover { background: #FAF4EA; transform: translateY(-50%) scale(1.05); }
.soins-slider__nav.is-disabled { opacity: 0; pointer-events: none; }
.soins-slider__nav--prev { left: -10px; }
.soins-slider__nav--next { right: -10px; }
@media (max-width: 640px) {
.soins-slider__nav { display: none; }
}
.soin-mini {
flex: 0 0 220px;
scroll-snap-align: start;
background: #fff;
border: 1px solid #ECE6D5;
border-radius: 14px;
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none;
color: inherit;
transition: transform .18s, border-color .18s, box-shadow .18s;
position: relative;
}
@media (min-width: 768px) { .soin-mini { flex-basis: 240px; } }
.soin-mini:hover {
transform: translateY(-2px);
border-color: #F2B945;
box-shadow: 0 8px 18px rgba(15, 27, 39, .08);
}
.soin-mini__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
}
.soin-mini__cat {
font: 600 9.5px/1 'Helvetica Neue', system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 7px;
border-radius: 999px;
background: #FAF4EA;
color: #6B7280;
}
.soin-mini__cat--massages { background: rgba(229, 161, 135, .15); color: #B85B3A; }
.soin-mini__cat--packs { background: rgba(242, 185, 69, .15); color: #C68A1E; }
.soin-mini__cat--beaute { background: rgba(109, 175, 211, .15); color: #2F7CA5; }
.soin-mini__cat--anniv { background: rgba(229, 147, 139, .15); color: #B83A4E; }
.soin-mini__price {
font: 600 14px/1 'Cormorant Garamond', serif;
color: #114a50;
white-space: nowrap;
}
.soin-mini__title {
font: 600 15px/1.25 'Cormorant Garamond', serif;
color: #0F1B27;
margin: 2px 0 4px;
min-height: 36px;
}
.soin-mini__meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font: 500 11px/1.3 'Helvetica Neue', system-ui, sans-serif;
color: #6B7280;
}
.soin-mini__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.soin-mini__meta-item svg { color: #97A1AE; }
/* Filtre nb personnes dans le bon cadeau (style réservation) */
.bc-people-filter {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
padding: 8px 10px;
background: #FAF4EA;
border: 1px solid #ECE6D5;
border-radius: 12px;
}
.bc-people-filter__label {
font: 600 11px/1 'Helvetica Neue', system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
color: #6B7280;
margin-right: 4px;
}
/* Anniv/Soirée cards : toggles nb personnes + jacuzzi */
.anniv-toggles {
background: #FAF4EA;
border: 1px solid #ECE6D5;
border-radius: 12px;
padding: 12px 14px;
margin: 14px 0 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.anniv-toggles__row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.anniv-toggles__label {
font: 600 11px/1 'Helvetica Neue', system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
color: #6B7280;
}
.anniv-toggles__chips {
display: inline-flex;
gap: 6px;
}
.anniv-toggles__jacuzzi {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #2B3A4A;
cursor: pointer;
}
.anniv-toggles__jacuzzi input {
width: 16px; height: 16px;
accent-color: #DBAA06;
cursor: pointer;
}
.soin-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.soin-card__head .badge {
font-size: 9px;
padding: 3px 8px;
letter-spacing: 0.08em;
}
.soin-card__price {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 17px;
color: #C68A1E;
white-space: nowrap;
}
.soin-card__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 16px;
line-height: 1.2;
margin: 0;
color: #0F1B27;
min-height: 38px;
}
.soin-card__meta {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 3px;
font-size: 11.5px;
color: #5A6878;
}
.soin-card__meta li {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.soin-card__meta svg { flex-shrink: 0; color: #97A1AE; }
.soin-card__variants {
color: #97A1AE;
font-size: 10px;
}
.soin-card__cta {
margin-top: auto;
padding-top: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
color: #1F5E83;
font-weight: 600;
font-size: 12px;
text-decoration: none;
border-bottom: 1px solid currentColor;
align-self: flex-start;
padding-bottom: 2px;
transition: color .15s;
}
.soin-card__cta:hover { color: #C68A1E; }
/* =========================================================
RESPONSIVE — correctifs mobile (07/2026)
========================================================= */
/* Panier : la ligne d'article (image · nom · prix unitaire · quantité ·
total · supprimer) est un flex à colonnes fixes ≈ 394px — impossible
sur un écran de 375px. On passe en 2 lignes : image + nom, puis
quantité / total / supprimer. Le prix unitaire (redondant avec le
total) est masqué. Markup généré par back/panier_load_page.php. */
@media (max-width: 560px) {
/* !important : le markup AJAX pose ses styles en inline. */
#ul_panier li[data-idproduit] { flex-wrap: wrap !important; gap: 8px 10px !important; }
#ul_panier li[data-idproduit] > span:nth-of-type(2) { flex: 1 1 calc(100% - 76px) !important; }
#ul_panier li[data-idproduit] > span:nth-of-type(3) { display: none !important; }
#ul_panier li[data-idproduit] > span:nth-of-type(5) { margin-left: auto !important; width: auto !important; }
}
/* Tunnel de réservation : très petits écrans (≤ 360px), on resserre le
calendrier et les créneaux pour garder 7 colonnes lisibles. */
@media (max-width: 360px) {
.cal-day { min-height: 38px; font-size: 13px; }
.cal-grid { gap: 3px; }
.slot-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
/* =====================================================================
Cadrage des photos (série 2026) — point focal par image.
Tous les conteneurs (hero rond, photo-strip, section-head, cercles)
recadrent en object-fit: cover ; on positionne ici le sujet de chaque
photo pour éviter les visages coupés, où que la photo soit utilisée.
===================================================================== */
img[src*="ohbabyspa_soin_visage_masque"] { object-position: 40% 30%; }
img[src*="ohbabyspa_soin_visage_duo"] { object-position: 35% 58%; }
img[src*="ohbabyspa_soin_visage_parent_enfant"] { object-position: 15% 85%; }
img[src*="ohbabyspa_massage_enfant."] { object-position: 58% 66%; }
img[src*="ohbabyspa_massage_enfant_sourire"] { object-position: 44% 55%; }
img[src*="ohbabyspa_hydrotherapie_nouveaune"] { object-position: 50% 45%; }
img[src*="ohbabyspa_hydrotherapie_bebe"] { object-position: 58% 68%; }
img[src*="ohbabyspa_hydrotherapie_jouets"] { object-position: 60% 48%; }
img[src*="ohbabyspa_accueil_boutique"] { object-position: 50% 60%; }
img[src*="ohbabyspa_jacuzzi_ambiance"] { object-position: 50% 60%; }
img[src*="ohbabyspa_espace_jacuzzi"] { object-position: 50% 55%; }
img[src*="ohbabyspa_jacuzzi_duo"] { object-position: 58% 52%; }
img[src*="ohbabyspa_jacuzzi_famille"] { object-position: 50% 50%; }
img[src*="ohbabyspa_anniversaire_groupe"] { object-position: 50% 35%; }
img[src*="ohbabyspa_moment_boisson"] { object-position: 50% 45%; }
img[src*="ohbabyspa_duo_parent_enfant"] { object-position: 42% 50%; }
img[src*="ohbabyspa_atelier_beaute"] { object-position: 35% 78%; }
/* =====================================================================
Remplissage garanti des cadres photo à ratio fixe.
Les images de ces conteneurs comptent sur les utilitaires Tailwind
(w-full h-full object-cover) fournis par le CDN : si le script tarde
ou est bloqué, l'image ne couvre pas tout le cadre (bandes vides,
hauteur partielle). On fixe ici le comportement en dur, plus les
ratios en secours.
===================================================================== */
.aspect-square { aspect-ratio: 1 / 1; }
[class*="aspect-[3/4]"] { aspect-ratio: 3 / 4; }
.aspect-square,
[class*="aspect-["] { position: relative; }
.aspect-square > img,
[class*="aspect-["] > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}