/* ============================================================
   La maison du bien-être — Ludivine Ragueneau
   Étables-sur-Mer (22). Charte sobre et moderne :
   blanc, beige, anthracite + rappel moutarde (enseigne).
   Typographie serif élégante, espaces généreux.
   ============================================================ */

:root {
  --bg: #ffffff;            /* blanc */
  --bg-alt: #f4efe7;        /* beige doux */
  --ink: #2a2825;           /* anthracite */
  --ink-soft: #5c5950;
  /* Moutarde de l'enseigne. Trois valeurs, parce qu'une seule ne peut pas
     à la fois rester fidèle à l'enseigne ET être lisible sur fond clair :
     #c79a2e ne donne que 2,60:1 sur blanc, très loin du 4,5:1 exigé.
     Les trois gardent exactement la même teinte, seule la luminosité change.
       --accent        décoration seule (traits, pastilles, bordures, focus)
       --accent-titre  grands textes ≥ 24 px   → 3,45:1 sur blanc  (seuil 3)
       --accent-dark   textes courants         → 5,17:1 sur blanc,
                                                 4,51:1 sur beige  (seuil 4,5) */
  --accent: #c79a2e;        /* moutarde de l'enseigne — décoration */
  --accent-titre: #ab8428;  /* moutarde — grands textes */
  --accent-dark: #87691f;   /* moutarde — textes courants */
  --line: #e7e0d3;
  --white: #ffffff;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --radius: 4px;
  --maxw: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--ink); }

.container {
  width: min(var(--maxw), 92%);
  margin-inline: auto;
}

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

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1.2rem; }
h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 1rem;
}

.lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 46ch;
}

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

.btn {
  display: inline-block;
  padding: 0.95rem 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--ink);
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

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

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
/* Le flou est porté par un pseudo-élément : un backdrop-filter posé
   directement sur le header créerait un containing block qui casserait
   le position:fixed de l'overlay du menu mobile. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding-block: 0.6rem;
}

.logo {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3vw, 2.3rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--ink);
}
.logo span { color: var(--accent-titre); }

.main-nav ul {
  display: flex;
  gap: 0.85rem;
  list-style: none;
}

.main-nav a {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.main-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.6rem;
  z-index: 110;
}
.nav-toggle .bar {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  margin: 6px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

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

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 72px;
}

.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -12%;
  width: 55vw;
  height: 55vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 154, 46, 0.16), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -25%;
  left: -10%;
  width: 40vw;
  height: 40vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 168, 125, 0.18), transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.hero-text { min-width: 0; }

.hero-media { margin: 0; position: relative; }
.hero-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 32%;
  border-radius: 20px;
  /* Fondu doux du bord gauche vers le crème, pour que la photo se fonde dans le fond */
  -webkit-mask-image: linear-gradient(102deg, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(102deg, transparent 0%, #000 24%, #000 100%);
}

.hero h1 { max-width: 14ch; }

.hero .roles {
  margin-top: 1.6rem;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  max-width: 60ch;
}
.hero .roles strong { font-weight: 500; color: var(--ink); }

.hero-cta {
  margin-top: 2.6rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-quote {
  margin-top: 4.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--ink-soft);
  max-width: 52ch;
  border-left: 2px solid var(--accent);
  padding-left: 1.4rem;
}
.hero-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Sections ---------- */

.section { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--ink); color: var(--bg); }
.section-dark h2 { color: var(--bg); }
.section-dark .eyebrow { color: #e0c578; }

/* Le bloc de contact a été dessiné pour un fond clair, mais il est posé sur
   la section sombre : sans ces quatre règles, les coordonnées s'affichent en
   anthracite sur anthracite (rapport 1,00:1 — donc invisibles) et le titre de
   l'encart en blanc sur blanc. Défaut hérité du gabarit, mesuré puis corrigé. */
.section-dark .lead { color: #cfc9bd; }                    /* 8,92:1 */
.section-dark .contact-list .value { color: #f6f3ee; }     /* 13,28:1 */
.section-dark .contact-aside { color: var(--ink); }        /* carte claire */
.section-dark .contact-aside h3 { color: var(--ink); }

.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(33, 32, 28, 0.08);
}

.card h3 { font-size: 1.3rem; }
.card p { font-size: 0.97rem; color: var(--ink-soft); }

.note {
  margin-top: 2rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-style: italic;
}
@media (max-width: 700px) {
  .chemin-portrait { float: none; width: 100%; margin: 0 0 1.6rem; }
}

.testimonial {
  break-inside: avoid;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  margin-bottom: 1.4rem;
}

.testimonial p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
}

.testimonial cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

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

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-list { list-style: none; display: grid; gap: 1.5rem; }

.contact-list .label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}
.contact-list .value {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--ink);
}

.contact-aside {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem;
}
.contact-aside p { color: var(--ink-soft); font-size: 0.97rem; }
/* Adresse cliquable, liens vers les applis de navigation, et plan d'accès
   (image fixe : aucune ressource tierce tant qu'on ne clique pas). */
.contact-list a.value { text-decoration: underline; text-decoration-color: rgba(224,197,120,.55); text-underline-offset: .2em; }
.itineraire { display: block; margin-top: .45rem; font-size: .92rem; color: #cfc9bd; }
.itineraire a { color: #e0c578; text-decoration: underline; text-underline-offset: .15em; }
.carte-cabinet { margin: 1.1rem 0 0; }
.carte-cabinet img {
  display: block; width: 100%; height: auto; aspect-ratio: 1120 / 700;
  border-radius: var(--radius); border: 1px solid rgba(224,197,120,.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.carte-cabinet a:hover img, .carte-cabinet a:focus-visible img { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.carte-cabinet figcaption { margin-top: .5rem; font-size: .78rem; color: #cfc9bd; }
.carte-cabinet figcaption a { color: #cfc9bd; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .carte-cabinet img { transition: none; } }
.contact-aside .btn { margin-top: 1.6rem; }

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

.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: 3rem 0 2.2rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
}

.site-footer p, .site-footer a {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.site-footer a:hover { color: var(--ink); }

.footer-links { display: flex; gap: 1.8rem; list-style: none; }

/* ---------- Animations d'apparition ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 600px) {
  .stage-info li { grid-template-columns: 1fr; gap: 0.2rem; }
}
@media (max-width: 600px) {
  .modules li { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ============================================================
   Responsive — mobile
   ============================================================ */

@media (max-width: 900px) {
  .two-col, .contact-grid { grid-template-columns: 1fr; }
  .testimonial-grid { columns: 2; }

  .hero-content { grid-template-columns: 1fr; gap: 2rem; }
  .hero-media { order: -1; }
  .hero-media img {
    aspect-ratio: 4 / 3;
    max-height: 50vh;
    border-radius: 16px;
    object-position: 50% 28%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  }
}

@media (max-width: 1200px) {
  .nav-toggle { display: block; }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .main-nav.open { opacity: 1; pointer-events: auto; }

  .main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }
  .main-nav a { font-size: 1.05rem; }

  .nav-toggle.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.open .bar:nth-child(2) { opacity: 0; }
  .nav-toggle.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .atelier {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .atelier .index { display: none; }
  .atelier .tarif { white-space: normal; }
  .atelier .tarif small { text-align: left; }

  .testimonial-grid { columns: 1; }

  .hero-quote { margin-top: 3rem; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   ESPACE ADMINISTRATION (tarifs & dates)
   ============================================================ */
body.sa-editing [data-edit] {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
  cursor: text;
  transition: background 0.15s ease;
}
body.sa-editing [data-edit]:hover {
  background: rgba(199, 154, 46, 0.12);
}
body.sa-editing [data-edit]:focus {
  outline: 2px solid var(--accent-dark);
  background: rgba(199, 154, 46, 0.16);
}

.sa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(33, 32, 28, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.sa-login-box {
  background: var(--bg);
  padding: 2.2rem;
  border-radius: 14px;
  width: min(360px, 90vw);
  box-shadow: 0 24px 60px rgba(33, 32, 28, 0.25);
}
.sa-login-box h2 {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.sa-login-box p {
  margin: 0 0 1.2rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.sa-login-box input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.sa-login-box input:focus {
  outline: none;
  border-color: var(--accent);
}
.sa-err {
  display: none;
  color: #a8443a !important;
  font-size: 0.85rem !important;
  margin: 0 0 0.7rem !important;
}
.sa-login-actions {
  display: flex;
  gap: 0.6rem;
}
.sa-btn-dark,
.sa-btn-light {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  border-radius: 40px;
  cursor: pointer;
  border: 1px solid var(--ink);
}
.sa-btn-dark {
  flex: 1;
  background: var(--ink);
  color: var(--bg);
}
.sa-btn-dark:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.sa-btn-light {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.sa-btn-light:hover { background: var(--bg-alt); }

.sa-admin-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.4rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
}
.sa-admin-bar strong { color: #fff; font-weight: 500; }
.sa-admin-bar .sa-btn-light {
  margin-left: auto;
  color: var(--bg);
  border-color: rgba(250, 247, 242, 0.4);
  padding: 0.5rem 1rem;
}
.sa-admin-bar .sa-btn-light:hover { background: rgba(250, 247, 242, 0.1); }
.sa-state { font-size: 0.85rem; opacity: 0.9; }
.sa-state-ok { color: #aeb99f; }
.sa-state-err { color: #e7a79b; }

/* ============================================================
   TÉMOIGNAGES — repli « … Lire la suite »
   ============================================================ */
.testimonial p.temo-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.testimonial.expanded p.temo-clamp {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.temo-more {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
}
.temo-more:hover { text-decoration: underline; }

/* ============================================================
   TÉMOIGNAGES EN VIDÉO (YouTube)
   ============================================================ */
.temo-videos-wrap {
  margin-top: 4rem;
}
.temo-videos-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  text-align: center;
  color: var(--ink);
  margin: 0 0 2rem;
}
.temo-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}
.temo-videos .video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 16px 40px rgba(33, 32, 28, 0.18);
}
.temo-videos .video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Façade vidéo : vignette affichée en permanence + bouton lecture.
   Le lecteur YouTube ne se charge qu'au clic (voir js/admin.js). */
.temo-videos .video-facade {
  cursor: pointer;
  padding: 0;
}
.temo-videos .video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.temo-videos .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(33, 32, 28, 0.55);
  transition: background 0.2s ease, transform 0.2s ease;
}
.temo-videos .video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}
.temo-videos .video-facade:hover .video-play,
.temo-videos .video-facade:focus-visible .video-play {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.06);
}
.temo-videos .video-facade:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
/* Repli pour les navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .temo-videos .video { height: 0; padding-bottom: 56.25%; }
}

/* ----- Gestion des vidéos en mode admin ----- */
.sa-video-admin {
  margin-top: 2.5rem;
  padding: 1.6rem;
  border: 2px dashed var(--accent);
  border-radius: 14px;
  background: rgba(199, 154, 46, 0.06);
}
.sa-video-admin h4 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.sa-video-admin .sa-help {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}
.sa-video-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.7rem;
}
.sa-video-row input {
  flex: 1;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--ink);
}
.sa-video-row input:focus { outline: none; border-color: var(--accent); }
.sa-video-row input.sa-invalid { border-color: #a8443a; background: #fbeeec; }
.sa-video-del {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
  cursor: pointer;
}
.sa-video-del:hover { background: #fbeeec; color: #a8443a; border-color: #e0b4ac; }
.sa-video-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ============================================================
   COMPOSANTS — La maison du bien-être (ajouts)
   ============================================================ */

/* ---- Emplacements photos (placeholders gris v1) ---- */
.ph {
  display: block;
  width: 100%;
  background: #d6d6d6;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
}
.ph-portrait { aspect-ratio: 3 / 4; }
.ph-wide     { aspect-ratio: 16 / 9; }
.ph-square   { aspect-ratio: 1 / 1; }
.ph-hero     { aspect-ratio: 3 / 4; min-height: 420px; }

/* ---- Signature de marque ---- */
.signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  color: var(--accent-dark);
  line-height: 1.4;
}

/* ---- Bandeau d'introduction (mise en avant prothèse capillaire) ---- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature-split.reverse .feature-media { order: 2; }
.feature-media .ph { height: 100%; }
/* Portrait : la photo fournie est plus élancée (≈ 3:5) que l'emplacement
   prévu (3:4). On recadre sans déformer, en gardant le visage, placé dans
   le tiers haut de l'image. */
.feature-media img.portrait {
  width: 100%;
  height: auto;              /* sinon l'attribut height du HTML étire l'image */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 14%;
  border-radius: var(--radius);
}
@media (max-width: 820px) {
  .feature-split { grid-template-columns: 1fr; }
  .feature-split.reverse .feature-media { order: 0; }
}

/* ---- Grille de cartes (prestations + boutique) ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(42, 40, 37, 0.10); }
.card .ph { border-radius: 0; }
.card-body { padding: 1.6rem 1.5rem 1.8rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-body h3 { margin-bottom: 0.2rem; }
.card-meta {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.card-price {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--ink);
}

/* ---- Détail prestation (page soins) ---- */
.prestation {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.prestation:last-child { border-bottom: 0; }
.prestation .meta-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; color: var(--ink-soft); }
.prestation .meta-list strong { color: var(--ink); }
@media (max-width: 700px) {
  .prestation { grid-template-columns: 1fr; }
}

/* ---- Logo image dans le header ---- */
.logo img { height: 40px; width: auto; }

/* ---- Logo (marque maison + wordmark) ---- */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.logo-mark { width: 34px; height: 34px; flex-shrink: 0; }
.logo-word {
  display: flex; flex-direction: column; line-height: 1;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem); white-space: nowrap;
}
.logo-word small {
  font-family: var(--font-sans); font-size: 0.46em; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-dark);
  margin-top: 0.25em;
}

/* ---- Pages intérieures : décaler sous le header fixe ---- */
.page-intro { padding-top: calc(72px + clamp(3rem, 6vw, 5rem)); padding-bottom: clamp(2rem, 4vw, 3rem); }
.page-intro .lead { max-width: 60ch; }
.breadcrumb { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1rem; }
.breadcrumb a { color: var(--accent-dark); }
.prose p { margin-bottom: 1.1rem; max-width: 70ch; }
.prose h2 { margin-top: 2.4rem; }

/* ---- Intégration moutarde (dosage validé) ---- */
.btn-ghost { border-color: var(--accent); }
.btn-ghost:hover { border-color: var(--ink); }
.section-head h2::after,
.page-intro h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
  margin-top: 1rem;
}
.section-dark .section-head h2::after { background: var(--accent); }

/* ---- Wordmark affiné (lettres plus fines) ---- */
.logo-word { font-weight: 400; letter-spacing: 0.06em; }

/* ---- Logo agrandi (en-tête) ---- */
.logo-mark { width: 44px; height: 44px; }
.logo-word { font-size: clamp(1.45rem, 2.8vw, 1.85rem); }
.header-inner { min-height: 80px; }

/* ============================================================
   AJOUTS — « Tous ceux qui brillent »
   ------------------------------------------------------------
   1. Bandeau « site en construction »
   2. En-tête : passage de fixed à sticky (pour loger le bandeau)
   3. Classes utilitaires — elles remplacent les styles qui étaient
      écrits dans le HTML. Les retirer du HTML est ce qui permet
      d'interdire tout style injecté (style-src 'self').
   4. Emplacements photo en attente
   ============================================================ */

/* ---------- 1. Bandeau « site en construction » ---------- */

/* Le bandeau doit s'imposer : il est la seule mention permanente de l'état
   du site. D'où l'inversion — la moutarde de l'enseigne passe en fond, le
   texte en anthracite. Le rapport de contraste y est de 5,66:1 (seuil AA
   4,5:1), très au-dessus de ce qu'un texte clair sur moutarde permettrait
   (2,60:1, non conforme). L'étiquette en pastille reprend l'anthracite en
   fond pour que la mention « Site en construction » se lise d'un coup d'œil,
   avant même le reste de la phrase. */
.bandeau-chantier {
  background: var(--accent);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
  border-bottom: 3px solid var(--ink);
}
.bandeau-chantier-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  padding-block: 0.85rem;
  text-align: center;
}
.bandeau-chantier-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  background: var(--ink);
  color: #f6f3ee;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}
.bandeau-chantier-pastille {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.bandeau-chantier-texte { margin: 0; }
.bandeau-chantier strong { font-weight: 500; }
.bandeau-chantier a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}
.bandeau-chantier a:hover { text-decoration-thickness: 3px; }

/* La pastille respire, mais jamais pour qui a demandé moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .bandeau-chantier-pastille { animation: pulsation-chantier 2.4s ease-in-out infinite; }
  @keyframes pulsation-chantier {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.8); }
  }
}

/* ---------- 2. En-tête sticky ---------- */
/* Le bandeau se place AVANT l'en-tête dans la page. Avec un en-tête
   « fixed », il passerait dessous. En « sticky », l'en-tête occupe sa
   place dans le flux, se laisse dépasser par le bandeau au défilement,
   puis se fige en haut. Les décalages de 72 px qui compensaient le
   « fixed » n'ont donc plus lieu d'être : ils sont annulés ci-dessous. */

.site-header { position: sticky; }
.hero { padding-top: 0; min-height: calc(100svh - 80px); }
.page-intro { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- 3. Classes utilitaires ---------- */

.section--sans-haut { padding-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 1.6rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; }
.prose--etroit { max-width: 760px; }
.est-masque { display: none; }
.boutons-ligne { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.testimonial { padding: 1.8rem 1.6rem; }
.note-fine { font-size: 0.85rem; color: var(--ink-soft); }
.note-encadree {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin-top: 1.2rem;
}
/* Le menu mobile ouvert bloque le défilement de la page derrière lui.
   Posé par une classe plutôt que par un style écrit depuis JavaScript. */
body.menu-ouvert { overflow: hidden; }

/* Toute zone cliquable atteint le seuil WCAG 2.2 (critère 2.5.8 : 24 px). */
.footer-links a, .breadcrumb a, .main-nav a { display: inline-block; min-height: 24px; }

/* ---------- 4. Emplacements photo en attente ---------- */
/* Les photos de Ludivine ne sont pas encore fournies. Plutôt qu'un
   rectangle gris qui donne l'impression d'une image cassée, on pose une
   surface beige à fine trame, dans la charte : on voit qu'une photo est
   attendue là, sans que le site paraisse en panne. */

.ph {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.75), transparent 62%),
    repeating-linear-gradient(135deg,
      transparent 0 15px,
      rgba(199, 154, 46, 0.09) 15px 16px);
}

/* ---------- Réglages fins de la marque ---------- */
/* « Tous ceux qui brillent » est un nom long : il lui faut un corps un peu
   plus mesuré que le précédent pour tenir à côté du menu sur petit écran. */
.logo-word { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.logo-mark { width: 38px; height: 38px; }
/* ============================================================
   PANNEAU DE FRÉQUENTATION (espace administration)
   ------------------------------------------------------------
   Une seule grandeur est dessinée : les pages vues. Une barre par
   période, toutes à la même échelle, chiffre écrit au bout —
   l'information n'est donc jamais portée par la couleur seule.

   Couleur des barres : #ab8428, la moutarde de l'enseigne
   assombrie jusqu'à 3,45:1 sur blanc. La moutarde d'origine
   (#c79a2e) ne donne que 2,60:1, sous le seuil de 3:1 exigé pour
   un élément graphique porteur de sens (WCAG 1.4.11).
   ============================================================ */

.sa-freq-boite {
  background: var(--white);
  border-radius: 8px;
  width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.sa-freq-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid var(--line);
}
.sa-freq-entete h2 { font-size: 1.5rem; margin: 0; }
.sa-freq-corps { padding: 1.6rem 1.8rem 2rem; overflow-y: auto; }

/* ---- Chiffres de tête ---- */
.sa-freq-paves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  margin-bottom: 2.2rem;
}
.sa-freq-pave {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.9rem 1rem;
}
.sa-freq-pave-titre {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sa-freq-pave-valeur {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.1;
  margin: 0.25rem 0 0.2rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sa-freq-pave-precision { display: block; font-size: 0.78rem; color: var(--ink-soft); }

/* ---- Séries de barres ---- */
.sa-freq-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 2rem;
}
.sa-freq-bloc { margin-bottom: 1.6rem; }
.sa-freq-bloc h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.8rem;
}
.sa-freq-table { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
.sa-freq-table th, .sa-freq-table td { padding: 0; vertical-align: middle; }

.sa-freq-periode {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: left;
  white-space: nowrap;
  padding-right: 0.9rem !important;
  width: 1%;
}
.sa-freq-cellule { width: 100%; }
.sa-freq-piste { background: #f0ece4; border-radius: 3px; height: 14px; }
.sa-freq-barre {
  height: 14px;
  background: #ab8428;
  border-radius: 3px;   /* extrémité arrondie, ancrée à gauche */
  min-width: 3px;
}
.sa-freq-valeur {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  padding-left: 0.9rem !important;
  font-variant-numeric: tabular-nums;
  width: 1%;
}
.sa-freq-secondaire, .sa-freq-robots {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: right;
  white-space: nowrap;
  padding-left: 0.7rem !important;
  font-variant-numeric: tabular-nums;
  width: 1%;
}
/* Période en cours : marquée par l'encre, pas par une nuance de moutarde —
   une différence de teinte resterait ambiguë pour un daltonien. */
.sa-freq-courant .sa-freq-barre { background: var(--ink); }
.sa-freq-courant .sa-freq-periode { color: var(--ink); font-weight: 500; }

.sa-freq-vide { color: var(--ink-soft); font-size: 0.9rem; }
.sa-freq-note {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .sa-freq-grille { grid-template-columns: 1fr; }
  .sa-freq-robots { display: none; }
}

/* ---------- Le sceau de la marque, dans le héros ---------- */
/* Le logo est un carré plein doré. Arrondi en disque, il redevient ce
   qu'il est vraiment — un sceau — et fait écho au cercle qui y est
   dessiné.

   ⚠️ Sélecteur volontairement aussi précis que « .hero-media img » :
   cette règle du gabarit a été écrite pour une PHOTO qui se fond dans
   le fond (coin arrondi de 20 px, fondu du bord gauche par un masque).
   Appliquée à un logo, elle le ronge. On annule donc explicitement le
   masque plutôt que d'espérer gagner sur la spécificité. */
.hero-media img.sceau {
  width: 100%;
  max-width: 430px;
  /* Indispensable : les attributs width/height du HTML — posés pour réserver
     la place et éviter tout saut de mise en page au chargement — agissent
     comme une hauteur imposée tant qu'aucune règle CSS n'en déclare une.
     Sans « height: auto », le disque s'étire en ellipse. */
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
  margin-inline: auto;
  display: block;
  -webkit-mask-image: none;
  mask-image: none;
  /* Une ombre très basse : le sceau se pose sur la page, il n'y flotte pas. */
  box-shadow: 0 18px 40px -24px rgba(42, 40, 37, 0.45);
}

/* Le logo remplace l'emplacement photo vide qui, lui, était retiré sur
   téléphone faute de contenu. Un vrai visuel mérite d'y rester — plus
   petit, et sous le texte plutôt qu'avant lui. */
@media (max-width: 900px) {
  .hero-media:has(.sceau) { display: block; order: 1; }
  .hero-media img.sceau {
    max-width: 210px;
    aspect-ratio: 1;
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ============================================================
   CARTE DE VISITE
   ------------------------------------------------------------
   Les deux faces, en entier, dans leur format carré d'origine.
   Elles sont posées sur la section sombre du contact : le recto
   moutarde et le verso crème s'y détachent sans avoir besoin de
   cadre. Une bordure claire très fine suffit à marquer le bord
   du carton, que le crème ne donne pas seul.
   ============================================================ */
.carte-visite {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(246, 243, 238, 0.14);
}
.carte-visite-legende {
  max-width: 640px;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.carte-visite-legende .eyebrow { color: #e0c578; }
.carte-visite-legende p {
  margin: 0.4rem 0 0;
  color: #cfc9bd;                 /* 8,92:1 sur l'anthracite */
  font-size: 1.02rem;
}
.carte-visite-faces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
  max-width: 820px;
}
.carte-visite-face {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid rgba(246, 243, 238, 0.18);
  box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.75);
}
.carte-visite-note {
  margin: clamp(1.2rem, 3vw, 1.8rem) 0 0;
  max-width: 820px;
  font-size: 0.95rem;
  color: #cfc9bd;
}
.carte-visite-note a {
  color: #f6f3ee;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  white-space: nowrap;
}
.carte-visite-note a:hover { color: var(--accent); }

@media (max-width: 780px) {
  /* Deux carrés côte à côte sur un téléphone deviennent deux vignettes
     illisibles : on les empile pour que chaque face garde sa taille. */
  .carte-visite-faces { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

/* ============================================================
   ANNONCE D'OUVERTURE « SITE EN CONSTRUCTION »
   ------------------------------------------------------------
   Un <dialog> natif : le navigateur se charge lui-même d'enfermer
   le clavier dans la fenêtre, de fermer sur Échap et de rendre le
   reste de la page inerte. Sans JavaScript, il reste simplement
   invisible — la page se lit alors normalement.
   ============================================================ */
.modale-chantier {
  width: min(94vw, 34rem);
  max-height: 88vh;
  /* Le « * { margin: 0 } » du haut de cette feuille écrase la marge « auto »
     que le navigateur pose lui-même sur <dialog> : sans cette ligne, la
     fenêtre se colle en haut à gauche de l'écran au lieu d'être centrée. */
  margin: auto;
  padding: 0;
  border: none;
  border-top: 6px solid var(--accent);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(20, 19, 17, 0.6);
  overflow: auto;
}
.modale-chantier::backdrop {
  background: rgba(24, 23, 21, 0.72);
  backdrop-filter: blur(3px);
}
.modale-chantier-corps {
  padding: clamp(1.8rem, 5vw, 2.8rem) clamp(1.4rem, 5vw, 2.8rem) clamp(1.8rem, 4vw, 2.4rem);
  text-align: center;
}
.modale-chantier-sceau {
  width: clamp(92px, 24vw, 132px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto clamp(1rem, 3vw, 1.4rem);
}
.modale-chantier-etiquette {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);              /* 5,66:1 */
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.modale-chantier-titre {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  line-height: 1.2;
  margin: 0 0 0.9rem;
  color: var(--ink);
}
.modale-chantier-texte {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);         /* 6,58:1 sur blanc */
}
.modale-chantier-texte strong { font-weight: 500; color: var(--ink); }
.modale-chantier-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(1.2rem, 3vw, 1.7rem);
}
.modale-chantier-actions .btn {
  padding: 0.85rem 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}
/* Le fond de page ne défile pas derrière la fenêtre. */
body.modale-ouverte { overflow: hidden; }

/* L'apparition est une politesse, pas une information : elle disparaît
   pour qui a demandé moins de mouvement (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
  .modale-chantier[open] { animation: entree-modale 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
  .modale-chantier[open]::backdrop { animation: entree-voile 0.34s ease; }
  @keyframes entree-modale {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes entree-voile { from { opacity: 0; } to { opacity: 1; } }
}

/* ============================================================
   COUPE ÉNERGÉTIQUE — protocole et bénéfices (page Soins)
   ------------------------------------------------------------
   Trois étapes numérotées : une liste ordonnée réelle (<ol>), pour
   que l'ordre soit annoncé par les lecteurs d'écran ; le grand
   chiffre moutarde n'est qu'une décoration (aria-hidden).
   ============================================================ */
.prestation-sous-titre {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--accent-dark);          /* 5,17:1 sur blanc */
  margin: -0.6rem 0 1.2rem;
}
.prestation-intertitre {
  margin: 2.4rem 0 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.protocole { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.3rem; }
.protocole li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  align-items: start;
}
.protocole-num {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent-titre);         /* grand texte : 3,45:1, seuil 3 */
  font-variant-numeric: lining-nums;  /* le « 1 » elzévirien de Cormorant se lit « I » */
  text-align: center;
  padding-top: 0.1rem;
}
.protocole h4,
.benefices h4 {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.protocole p { margin-bottom: 0; }
.benefices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem clamp(1.2rem, 3vw, 2.4rem);
}
.benefices > div {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
}
.benefices ul { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.benefices li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
  color: var(--ink-soft);             /* 6,58:1 sur blanc, plus de 5,5:1 sur beige */
}
.benefices li::before {
  /* l'étincelle de la marque, en guise de puce */
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--accent);
  font-size: 0.8em;
}
@media (max-width: 700px) {
  .benefices { grid-template-columns: 1fr; }
}

/* ============================================================
   HAUT DE PAGE — portrait de Ludivine + sceau en médaillon
   ------------------------------------------------------------
   Le portrait reprend la règle « .hero-media img » du gabarit,
   écrite pour une photo (coin arrondi, fondu du bord gauche) ; on
   ne règle que le cadrage. Le sceau, lui, garde sa propre règle
   (.sceau) qui annule le fondu, et se pose dans l'angle.
   ============================================================ */
.hero-media img.hero-portrait {
  height: auto;
  aspect-ratio: 4 / 5;
  object-position: 50% 14%;
}
.hero-media img.sceau.sceau--medaillon {
  position: absolute;
  left: clamp(-1.4rem, -2vw, -0.6rem);
  bottom: clamp(-1.4rem, -2vw, -0.6rem);
  width: clamp(110px, 12vw, 160px);
  max-width: none;
  margin: 0;
  border: 5px solid var(--bg);
  box-shadow: 0 14px 30px -14px rgba(42, 40, 37, 0.5);
}
@media (max-width: 900px) {
  /* Sur téléphone, la photo passe avant le texte : c'est le « tout en
     haut » demandé. */
  .hero-media.hero-media--portrait { order: -1; }
  .hero-media img.hero-portrait {
    aspect-ratio: 1 / 1;
    max-height: 62vh;
    object-position: 50% 18%;
  }
  .hero-media img.sceau.sceau--medaillon {
    width: 96px;
    max-width: none;
    left: 0.8rem;
    bottom: 0.8rem;
    border-width: 4px;
  }
}

/* ============================================================
   PHOTOS D'ILLUSTRATION (Unsplash, 12/10/2026)
   ------------------------------------------------------------
   Des matières et des lumières, jamais un geste de praticien :
   on ne doit pas croire voir Ludivine réaliser la prestation.
   Crédits : docs/06-credits.md. Les attributs width/height du
   HTML réservent la place ; « height: auto » + aspect-ratio
   fixent le cadre, object-fit recadre sans déformer.
   ============================================================ */
.photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.photo--carre    { aspect-ratio: 1 / 1; }
.photo--large    { aspect-ratio: 16 / 9; }
.photo--portrait { aspect-ratio: 3 / 4; }
.photo.cadrage-haut { object-position: 50% 15%; }
.card .photo { border-radius: 0; }

/* Photo détourée (le tantō de Jill Andrieu sur son set rond) : fond
   transparent, donc ni cadre, ni coin arrondi, ni fond beige derrière.
   Une ombre portée suit la forme réelle du disque et du manche qui en
   dépasse — box-shadow, lui, dessinerait un carré. */
.photo.photo--detouree {
  /* Proportion réelle de l'image (1200 × 1184) : « auto » laissait l'image
     sans hauteur tant qu'elle n'était pas chargée, et son arrivée faisait
     sauter toute la suite de la page. */
  aspect-ratio: 1200 / 1184;
  object-fit: contain;
  background: none;
  border-radius: 0;
  filter: drop-shadow(0 16px 22px rgba(42, 40, 37, 0.20));
}

/* ============================================================
   SOINS À L'ARGILE TERRE DE COULEUR (page Soins, 19/10/2026)
   ------------------------------------------------------------
   Prestation plus riche que les autres : un en-tête pleine
   largeur, puis deux « duos » photo + texte qui alternent de
   côté. Chaque photo est voisine du texte qu'elle illustre.
   ============================================================ */
.prestation-riche {
  /* le trait de séparation vient déjà de la prestation précédente */
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.prestation-riche-entete { max-width: 760px; }
.prestation-riche-intro { max-width: 760px; }
.duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.duo--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.duo--inverse .duo-media { order: 2; }
.duo-media { position: sticky; top: 7rem; }
.photo.cadrage-visage { object-position: 55% 35%; }
.photo.cadrage-masque { object-position: 50% 12%; }
.duo-titre { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; margin: 0.2rem 0 0.8rem; }
.duo-chapo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--accent-dark);
}
.duo-question {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 1.6rem 0 0.3rem;
}
.piliers { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.1rem; }
.piliers li, .liste-etoiles li { position: relative; padding-left: 1.5rem; }
.piliers li::before, .liste-etoiles li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.15em;
  color: var(--accent);
  font-size: 0.85em;
}
.piliers strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.liste-etoiles { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: 0.6rem; max-width: 70ch; }
.prestation-riche-pied { margin-top: 2rem; }
.adresse-cabinet {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--accent-dark);
}
.benefices li strong { color: var(--ink); font-weight: 500; }
@media (max-width: 820px) {
  .duo, .duo--inverse { grid-template-columns: minmax(0, 1fr); }
  .duo--inverse .duo-media { order: 0; }
  .duo-media { position: static; }
}
/* Quatre cartes de prestation à l'accueil : une seule rangée sur grand écran. */
.cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.duo .protocole { margin-bottom: 1.4rem; }
/* À propos : texte long à côté du portrait — la photo s'aligne en haut et
   reste visible pendant la lecture. */
.feature-split.feature-split--haut { align-items: start; }
.feature-split--haut .feature-media { position: sticky; top: 7rem; }
@media (max-width: 820px) { .feature-split--haut .feature-media { position: static; } }

/* L'en-tête est fixé en haut de l'écran (position: fixed) : sans cette marge,
   un lien vers une ancre (#pendant-apres-traitements, #contact…) fait arriver
   le titre visé sous l'en-tête, donc caché. */
html { scroll-padding-top: 6.5rem; }

/* Accueil, section Coupe énergétique : durée et tarif, comme sur les cartes. */
.feature-tarif {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0.6rem 0 0;
}

/* Page dédiée aux soins à l'argile : pas d'espace en haut, l'intro de page suit. */
.prestation-riche--page { padding-top: 0; }