/* ==========================================================
   Lumière & Énergies – feuille de style
   Tout ce qui se règle (couleurs, polices, tailles) est
   regroupé dans le bloc :root ci-dessous.
   ========================================================== */

:root {
  color-scheme: light;

  /* --- Couleurs --- */
  --plum:      #4a2f63;   /* violet principal (boutons, bloc soins) */
  --plum-deep: #35214a;   /* violet foncé (barre du bas) */
  --gold:      #b08a4a;   /* doré (détails) */
  --gold-soft: #e4cb97;   /* doré clair (prix, nom) */
  --sand:      #f3eadc;   /* fond section rendez-vous */
  --cream:     #faf6ef;   /* fond de page */
  --text:      #4a3d44;   /* texte courant */
  --head:      #4a2f63;   /* titres */

  /* --- Polices --- */
  --font-title:  'Marcellus', Georgia, serif;
  --font-body:   'Mulish', system-ui, sans-serif;
  --font-script: 'Pinyon Script', cursive;

  /* --- Tailles de texte --- */
  --fs-body:   1.05rem;
  --fs-lead:   1.1rem;
  --fs-h1:     clamp(1.9rem, 9vw, 2.8rem);
  --fs-h2:     1.4rem;
  --fs-h3:     1.15rem;
  --fs-name:   2.8rem;
  --fs-role:   1.1rem;
  --fs-price:  1.6rem;
  --fs-small:  .95rem;
  --fs-kicker: 1.5rem;

  /* --- Carrousel --- */
  --photo-height: 380px;
  --photo-width:  340px;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--text);
  font: 300 var(--fs-body)/1.75 var(--font-body);
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 { font-family: var(--font-title); font-weight: 400; color: var(--head); margin: 0; line-height: 1.2; }
h2 { font-size: var(--fs-h2); margin-bottom: 1.2rem; }
p  { margin: 0 0 1rem; }

.wrap { max-width: 640px; margin: 0 auto; }
section { padding: 3.5rem 1.5rem; }

.kicker { font-size: var(--fs-kicker); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem; }
.lead   { font-family: var(--font-title); font-size: var(--fs-lead); line-height: 1.5; color: var(--head); }
.texte-violet { color: var(--head); }

/* ---------- Bandeau d'accueil ---------- */
/* L'image est définie dans index.php (style="background-image:...") */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--plum) center / cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(53,33,74,.35) 0%, rgba(53,33,74,.55) 45%, rgba(53,33,74,.95) 100%);
}
.hero { background-position: center top; }
.hero { min-height: 70vh; background-position: center 75%; }
.logo-hero { display: block; width: 92px; height: 92px; padding: 10px; margin: 0 0 1.2rem; background: rgba(250,246,239,.94); border-radius: 50%; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.hero .wrap { position: relative; width: 100%; padding: 2rem 1.5rem 3rem; }
.hero h1 { color: #fff; font-size: var(--fs-h1); letter-spacing: .1em; text-transform: uppercase; }
.name   { font-family: var(--font-script); font-size: var(--fs-name); color: var(--gold-soft); margin: .6rem 0 0; line-height: 1.2; }
.role   { margin: 0 0 1rem; font-size: var(--fs-role); }
.values { font-size: var(--fs-kicker); letter-spacing: .0em; text-transform: uppercase; opacity: .85; margin: 0; }

/* ---------- Carrousel photos ---------- */
.gallery { position: relative; }

.snap {
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.5rem;
  padding: 0 1.5rem 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.snap::-webkit-scrollbar { display: none; }

.snap img {
  flex: 0 0 78%;
  max-width: var(--photo-width);
  height: var(--photo-height);
  object-fit: cover;
  border-radius: 6px;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-drag: none;
}

/* Si toutes les photos tiennent à l'écran, elles sont centrées ; sinon les marges « auto » tombent à 0
   et la 1re photo reste bien accrochée à gauche (justify-content:center la rendait inaccessible) */
.snap img:first-child { margin-left: auto; }
.snap img:last-child  { margin-right: auto; }

/* Texte « Faites glisser » : écrans tactiles uniquement, et seulement s'il y a du défilement */
.hint {
  display: none;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 1rem;
}
@media (hover: none) and (pointer: coarse) {
  .gallery.is-overflowing .hint { display: block; }
}

/* Flèches : uniquement à la souris (PC) et seulement s'il y a du défilement */
.arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gallery.is-overflowing .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(var(--photo-height) / 2 - 22px);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(53,33,74,.85);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }
  .gallery.is-overflowing .arrow:hover    { background: var(--plum); }
  .gallery.is-overflowing .arrow:disabled { opacity: .3; cursor: default; }
  .arrow-prev { left: .8rem; }
  .arrow-next { right: .8rem; }

  .snap.is-overflowing { cursor: grab; }
  .snap.is-dragging    { cursor: grabbing; scroll-snap-type: none; }
}

/* ---------- Bloc soins ---------- */
.soins { background: var(--plum); color: #fff; }
.soins h2 { color: #fff; }
.card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 1.2rem; margin-bottom: .8rem; }
.card h3 { color: #fff; font-size: var(--fs-h3); margin-bottom: .5rem; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; min-height: 48px; }
.row + .row { border-top: 1px solid rgba(255,255,255,.15); }
.row span { font-size: var(--fs-small); opacity: .85; }
.row b { font-family: var(--font-title); font-weight: 400; font-size: var(--fs-price); color: var(--gold-soft); background: rgba(0,0,0,.18); padding: .1rem .8rem; border-radius: 999px; white-space: nowrap; }

/* ---------- « En savoir plus » (accordéon dans les soins) ---------- */
.more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 44px;
  margin-top: .4rem;
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.15);
  color: var(--gold-soft);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.more:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

/* La flèche pivote d'un demi-tour quand le panneau est ouvert */
.chevron { transition: transform .3s ease; }
.more[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* Panneau : sa hauteur passe de 0 à sa taille réelle (astuce grid 0fr → 1fr) */
.more-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.more-panel.is-open { grid-template-rows: 1fr; }
.more-inner { overflow: hidden; visibility: hidden; transition: visibility 0s .35s; }
.more-panel.is-open .more-inner { visibility: visible; transition-delay: 0s; }
/* Repliage instantané d'un panneau quand on en ouvre un autre (évite les sursauts) */
.more-panel.sans-anim, .more-panel.sans-anim .more-inner { transition: none; }
.more-inner h4 { margin: 0; padding-top: .8rem; font-family: var(--font-title); font-weight: 400; font-size: 1.05rem; color: var(--gold-soft); }
.more-inner p  { margin: 0; padding-top: .7rem; font-size: var(--fs-small); opacity: .9; }
.more-inner > :last-child { padding-bottom: .3rem; }
.more-conclusion { font-style: italic; color: var(--gold-soft); opacity: 1; }
.more-conclusion::before { content: "✨​ "; }

@media (prefers-reduced-motion: reduce) {
  .chevron, .more-panel { transition: none; }
}

/* ---------- Rendez-vous ---------- */
.rdv { background: var(--sand); text-align: center; }
.place { margin-top: 1.4rem; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
.place span::before {  content: "";  display: block;  width: 45px;  height: 1px;  margin: .2rem auto;  background: currentColor;}
.place span { font-size: .75rem; letter-spacing: .04em; text-transform: none; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  background: var(--plum);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 1.6rem;
}

footer { text-align: center; padding: 1.8rem 1.5rem; font-size: .85rem; color: #000; }
.logo-footer { display: block; width: 110px; height: 110px; margin: 0 auto 1rem; }
footer p { margin: 0; }
.copyright { margin-top: .4rem; font-size: .75rem; }

/* ---------- Barre fixe en bas ---------- */
.bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--plum-deep) 94%, transparent);
  backdrop-filter: blur(8px);
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
}
.bar .btn { max-width: 420px; margin: 0 auto; background: var(--gold); color: #2b1c3a; }

/* ---------- Effets sur les boutons (survol, clic, clavier) ---------- */
.btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }

/* Survol : uniquement à la souris, pour ne pas rester « collé » après un toucher sur mobile */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(53,33,74,.3); }
  .rdv .btn:hover { background: var(--plum-deep); }          /* bouton violet : un cran plus foncé */
  .bar .btn:hover { background: var(--gold-soft); box-shadow: 0 8px 20px rgba(0,0,0,.35); }  /* bouton doré : plus clair */
}

/* Appui (souris ou doigt) : le bouton s'enfonce légèrement */
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }

/* Navigation au clavier */
.btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}