/* ==========================================================
   Wellness Rituals by Jules - wellnessrituals.mc
   Palette issue de la charte : terracotta / tons naturels
   ========================================================== */

:root {
  --ink: #211510;            /* texte sur fond clair : noir chaud, opacité 100 % */
  --cream-text: #F6EEE0;     /* texte sur fond sombre : crème plein */
  --page: #F7F2E9;           /* fond de page */
  --card: #FFFDF8;           /* surface carte, contraste franc sur le fond */
  --sand: #E4DCCE;           /* bordures, filets, fonds de pastille */
  --terracotta: #8F3C12;     /* accent unique */
  --terracotta-deep: #571B05;/* sections sombres */
  --terracotta-soft: #D59E7D;
  --terracotta-light: #C08A6E;
  --gold: #F49C42;           /* pastille ponctuelle */

  --font-display: "Marcellus", serif;
  --font-body: "Manrope", sans-serif;

  --radius-card: 24px;
  --radius-panel: 40px;
  --section-gap: clamp(6rem, 12vw, 10rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ---------- Typographie ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; }

h1 { font-size: clamp(2.9rem, 7vw, 5.2rem); letter-spacing: .01em; }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
h3 { font-size: 1.45rem; line-height: 1.25; }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1.4rem;
}

.dark .eyebrow { color: var(--gold); }

.lede { font-size: 1.25rem; max-width: 40ch; }
p { max-width: 64ch; }

.accent-i { font-style: italic; color: var(--terracotta); }

/* ---------- Structure ---------- */

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

section { padding: var(--section-gap) 0; }

.section-head { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { margin-top: 0; margin-bottom: 1rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--page);
  border-bottom: 1px solid var(--sand);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  max-width: 1160px; margin: 0 auto;
}

.brand { text-decoration: none; line-height: 1.05; }
.brand .b1 { font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; letter-spacing: .28em; text-transform: uppercase; display: block; }
.brand .b2 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .24em; text-transform: uppercase; display: block; }
.brand .b3 { font-size: .68rem; font-weight: 600; letter-spacing: .2em; display: block; text-align: right; color: var(--terracotta); }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: .98rem; }
.nav-links a:hover { color: var(--terracotta); }

.lang-switch {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .78rem; letter-spacing: .1em;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: .28rem .7rem; text-decoration: none;
}
.lang-switch .flag {
  width: 18px; height: 9px;
  display: block; border-radius: 1px;
  box-shadow: 0 0 0 .5px rgba(33, 15, 5, .25);
}
.lang-switch:hover { background: var(--ink); color: var(--cream-text); }

.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--ink);
  border-radius: 999px; padding: .45rem .9rem;
  font: 600 .85rem var(--font-body); letter-spacing: .1em; color: var(--ink);
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 1.25rem;
    background: var(--page); border-bottom: 1px solid var(--sand);
    padding: 1.5rem;
  }
  .nav-links.open { display: flex; }
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  font-weight: 600; font-size: 1rem; letter-spacing: .04em;
  text-decoration: none;
  border-radius: 999px;
  padding: .95rem 2.1rem;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--terracotta); color: var(--cream-text); }
.btn-primary:hover { background: var(--terracotta-deep); }

.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream-text); }

.dark .btn-primary { background: var(--gold); color: var(--ink); }
.dark .btn-primary:hover { background: var(--cream-text); }
.dark .btn-ghost { border-color: var(--cream-text); color: var(--cream-text); }
.dark .btn-ghost:hover { background: var(--cream-text); color: var(--terracotta-deep); }

.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* ---------- Hero ---------- */

.hero { padding: clamp(4rem, 9vw, 7.5rem) 0; }

.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}

.hero h1 { margin: 0 0 1.6rem; }
.hero .lede { font-size: 1.3rem; }

.hero-note {
  margin-top: 2.2rem; font-size: .875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}

/* Arche décorative, clin d'œil au moodboard terracotta */
.arch {
  position: relative;
  width: min(100%, 420px); aspect-ratio: 3 / 4;
  margin-left: auto;
  border-radius: 999px 999px var(--radius-panel) var(--radius-panel);
  background:
    radial-gradient(120% 90% at 50% 100%, var(--terracotta-deep) 0%, var(--terracotta) 46%, var(--terracotta-light) 78%, var(--terracotta-soft) 100%);
  overflow: hidden;
}
.arch img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.arch::after {
  content: "";
  position: absolute; inset: 7%;
  border: 1.5px solid rgba(246, 238, 224, .5);
  border-radius: 999px 999px calc(var(--radius-panel) - 8px) calc(var(--radius-panel) - 8px);
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .arch { margin: 0 auto; width: min(100%, 320px); }
}

/* ---------- Bandeau credentials ---------- */

.strip {
  background: var(--sand);
  padding: 1.6rem 0;
}
.strip p {
  margin: 0 auto; max-width: 70ch; text-align: center;
  font-weight: 500; font-size: 1.05rem;
}

/* ---------- Cartes (régime : contraste franc) ---------- */

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 2.2rem 2rem;
  box-shadow: 0 1px 1px rgba(20, 10, 4, .06);
}
.card h3 { margin-bottom: .8rem; }
.card .num {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sand);
  font-family: var(--font-display); font-size: 1.2rem;
  margin-bottom: 1.3rem;
}

/* ---------- Techniques ---------- */

.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tech-grid { grid-template-columns: 1fr; } }

/* régime : fondu + découpe, simple filet */
.tech {
  border: 2px solid rgba(87, 27, 5, .38);
  border-radius: var(--radius-card);
  padding: 1.8rem 1.7rem;
}
.tech h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; margin-bottom: .5rem; }
.tech p { font-size: .98rem; }

/* ---------- Section sombre : soins & tarifs ---------- */

.dark {
  background:
    linear-gradient(rgba(58, 17, 3, .62), rgba(58, 17, 3, .62)),
    url("/assets/img/texture-terracotta.jpg") center / cover var(--terracotta-deep);
  color: var(--cream-text);
  border-radius: var(--radius-panel);
  margin: 0 clamp(.6rem, 2vw, 1.5rem);
}

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }

.price {
  border: 2px solid rgba(246, 238, 224, .45);
  border-radius: var(--radius-card);
  padding: 2.2rem 2rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.price .duration { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .85rem; }
.price .amount { font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.price .amount-s { font-size: 2.1rem; padding-top: .4rem; }
.price .label { font-size: 1.05rem; font-weight: 500; }
.price p { font-size: .98rem; }

.price.featured { background: var(--cream-text); color: var(--ink); border-color: var(--cream-text); }

.tag {
  align-self: flex-start;
  background: var(--gold); color: var(--ink);
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: .3rem .8rem;
}

.dark .fine {
  margin-top: 2.4rem; font-size: .95rem; font-weight: 500; max-width: 70ch;
}

/* ---------- Bande photo pleine largeur ---------- */

.photo-band {
  margin: 0 clamp(.6rem, 2vw, 1.5rem);
  border-radius: var(--radius-panel);
  overflow: hidden;
  height: clamp(340px, 60vh, 600px);
}
.photo-band img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* ---------- Étapes ---------- */

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Citation ---------- */

.quote-section { text-align: center; }
blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.3;
  max-width: 24ch;
  margin: 0 auto 1.6rem;
}
.quote-source {
  font-size: .875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- À propos (teaser + page) ---------- */

.about-grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.portrait {
  position: relative;
  width: 100%; aspect-ratio: 3 / 4;
  border-radius: 999px 999px var(--radius-panel) var(--radius-panel);
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--terracotta-soft), var(--terracotta-light) 55%, var(--terracotta));
}
.portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.story p + p { margin-top: 1.3rem; }

.training-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.5rem; margin-top: 1.5rem; }
@media (max-width: 640px) { .training-list { grid-template-columns: 1fr; } }
.training-list li {
  border: 2px solid rgba(87, 27, 5, .38);
  border-radius: 999px; padding: .55rem 1.3rem;
  font-weight: 500; font-size: .98rem;
}

.values { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.values span {
  background: var(--sand); border-radius: 999px;
  padding: .55rem 1.4rem; font-weight: 600; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Contact ---------- */

.contact { text-align: center; }
.contact h2 { max-width: 22ch; margin: 0 auto 1rem; }
.contact .lede { margin: 0 auto; }
.contact .cta-row { justify-content: center; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--terracotta-deep); color: var(--cream-text);
  margin-top: var(--section-gap);
  padding: 3.5rem 0 2.5rem;
}
.footer-grid {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 2rem; align-items: flex-start;
}
.site-footer a { color: var(--cream-text); text-decoration: none; font-weight: 500; }
.site-footer a:hover { color: var(--gold); }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer-note {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 238, 224, .35);
  font-size: .9rem; font-weight: 500;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* Voir home.css : même bouton, les pages À propos ont leur propre feuille. */
.cookie-btn {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
}
.nav-cta {
  background: var(--terracotta);
  color: var(--cream-text) !important;
  border-radius: 999px;
  padding: .5rem 1.25rem;
  letter-spacing: .14em;
}
.nav-cta:hover { background: var(--terracotta-deep); }


/* ----------------------------------------------------------------------
   Bouton WhatsApp flottant. Terracotta de la charte plutôt que le vert de
   WhatsApp, avec un liseré crème : le bouton doit rester lisible aussi bien
   sur le fond crème des pages que sur le pied de page terracotta.

   Il n'apparaît qu'au premier défilement. En haut de page il masquerait le
   mot WELLNESS RITUALS du héros, très visible sur mobile, et il ferait
   doublon avec le bouton Réserver déjà présent sous le titre.
   ---------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  /* Le bandeau cookies occupe le même coin. Plutôt que de masquer le bouton,
     on le fait remonter juste au-dessus : il reste joignable en permanence,
     y compris pour un visiteur qui ignore le bandeau. La hauteur réelle du
     bandeau est mesurée par consent.js et posée dans --wr-consent-h. */
  bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + var(--wr-consent-h, 0px));
  z-index: 80;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #8F3C12;
  color: #F6EEE0;
  box-shadow: 0 0 0 2px rgba(246, 238, 224, .85), 0 10px 26px rgba(33, 21, 16, .22);

  /* État par défaut : absent tant qu'on n'a pas défilé. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;

  transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1),
              bottom .4s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}

/* Classe posée par wa-float.js dès le premier défilement. Légèrement
   transparent pour ne pas écraser la photo, opaque au survol. */
.wa-float.wa-on {
  opacity: .82;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.wa-float.wa-on:hover { opacity: 1; background: #571B05; transform: translateY(-3px); }
.wa-float:focus-visible { outline: 2px solid #F49C42; outline-offset: 4px; opacity: 1; }

.wa-float svg { width: 27px; height: 27px; fill: currentColor; display: block; }

/* Infobulle au survol, masquée au doigt */
.wa-float::after {
  content: attr(data-libelle);
  position: absolute; right: calc(100% + .7rem);
  white-space: nowrap;
  background: #211510; color: #F6EEE0;
  font: 500 .74rem/1 "Manrope", system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem .8rem; border-radius: 999px;
  opacity: 0; transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-float.wa-on:hover::after { opacity: 1; transform: none; }
@media (hover: none) { .wa-float::after { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float::after { transition: none; }
}