/* ============================================================
   Normandie Laser — feuille de style principale
   Design épuré, moderne, orienté bien-être professionnel.
   ============================================================ */

:root {
  /* Bleu ciel — --brand est assez soutenu pour rester lisible sur blanc
     (contraste 4.9:1, conforme WCAG AA). --brand-vivid, plus clair, sert
     uniquement aux aplats et dégradés, jamais au texte. */
  --brand: #1878ab;
  --brand-vivid: #3aa9e0;
  /* Borne claire des dégradés qui portent du texte blanc. #3aa9e0 est
     trop clair pour cela : mesuré sur le rendu réel, le texte tombait à
     3,1:1 dans le coin lumineux de la bande, sous le seuil WCAG AA.
     #14688f donne 6,2:1 partout, en gardant un vrai dégradé. La teinte
     vive reste utilisée là où elle ne porte pas de texte. */
  --brand-gradient-end: #14688f;
  --brand-dark: #115f88;
  --brand-deep: #0a3d5a;
  --brand-light: #8ed4f5;
  --mist: #e4f2fb;
  --mist-soft: #f2f9fd;
  --gold: #c69a60;        /* décoratif uniquement : filets, bordures */
  --gold-text: #976d36;   /* 4.5:1 sur blanc, et blanc lisible dessus */
  /* Doré pour texte posé sur les fonds bleus foncés. --gold-text est
     calibré pour le blanc : sur le dégradé il tombait à 1,7:1, donc
     illisible. Cette teinte pâle donne 5:1 à 9:1 sur toute l'étendue
     du dégradé, en gardant l'accent chaud. */
  --gold-clair: #f6e6cc;

  --ink: #0f1c24;
  --ink-700: #33454f;
  --ink-500: #5b6a74;
  --ink-400: #6a7882;   /* 4.5:1 sur blanc — WCAG AA */

  --bg: #ffffff;
  --bg-soft: #f7fbfd;
  --border: #e0ecf3;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(10, 61, 90, 0.04), 0 2px 8px rgba(10, 61, 90, 0.04);
  --shadow: 0 4px 12px rgba(10, 61, 90, 0.06), 0 12px 32px rgba(10, 61, 90, 0.06);
  --shadow-lg: 0 20px 60px rgba(17, 95, 136, 0.16);

  --max: 1200px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Aucun débordement horizontal, quel que soit l'écran. `clip` plutôt que
   `hidden` : `hidden` créerait un conteneur de défilement et neutraliserait
   le `position: sticky` de l'en-tête. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-700);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* height:auto — sans cela, l'attribut height du HTML fige la hauteur
   et neutralise les règles aspect-ratio. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { padding: 0; margin: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); letter-spacing: -0.03em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1.1em; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section-tight { padding: 60px 0; }
.bg-soft { background: var(--bg-soft); }
.bg-mist { background: var(--mist-soft); }
.bg-deep { background: var(--brand-deep); color: rgba(255, 255, 255, 0.82); }
.bg-deep h2, .bg-deep h3 { color: #fff; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-lg { margin-top: 36px; }

/* Cadres externes (agenda Bookings, plan Google). Les styles étaient
   auparavant en attribut `style` : les sortir du HTML permet une politique
   de sécurité du contenu stricte, sans « unsafe-inline ». */
.booking-embed iframe, .map-embed iframe { border: 0; display: block; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1em;
}
.lead { font-size: 1.16rem; color: var(--ink-500); max-width: 620px; }
.section-head { max-width: 660px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-bottom: 0; color: var(--ink-500); font-size: 1.08rem; }

/* ---------------------------------------------------- Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(24, 120, 171, 0.26); }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(24, 120, 171, 0.32); }
.btn-ghost { border-color: var(--border); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.btn-light { background: #fff; color: var(--brand-dark); }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
.btn-outline-light { border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.btn-lg { padding: 16px 34px; font-size: 1.02rem; }

.link-arrow { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow:hover { gap: 10px; transition: gap .18s ease; }

/* ---------------------------------------------------- Disponibilité
   Mentions « à partir de début octobre » pour l'Acu-lift. Pilotées par
   site.acuLiftDispo* dans content.js : vider ces champs fait disparaître
   toutes les mentions d'un coup. */
.dispo-banner {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--mist); border: 1px solid var(--brand-light);
  border-radius: var(--radius); padding: 14px 20px;
  color: var(--brand-dark); font-size: 1rem; margin: 4px 0 8px;
  max-width: 660px;
}
.dispo-banner strong { color: var(--brand-deep); }

.highlight-dispo {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px; padding: 8px 16px;
  font-size: 0.92rem; color: #fff; margin: 0 0 22px;
}

.price-dispo {
  font-size: 0.88rem; color: var(--brand-dark); background: var(--mist-soft);
  border-radius: var(--radius-sm); padding: 9px 12px; margin: 0 0 18px;
}

/* Second badge : information de calendrier, pas une seconde revendication —
   il est donc bleu et non doré, pour ne pas concurrencer l'exclusivité. */
.badge-dispo { margin-left: 8px; }
.page-hero .highlight-badge.badge-dispo,
.soin-featured .highlight-badge.badge-dispo {
  background: var(--brand); color: #fff; border-color: transparent;
}

/* ---------------------------------------------------- Plan d'accès (Contact)
   Quatre blocs courts plutôt qu'un paragraphe unique : un visiteur qui cherche
   « où me garer » doit trouver la réponse sans lire le reste. */
.acces-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px 34px;
}
.acces-bloc h3 {
  margin: 10px 0 8px;
  font-size: 1.08rem;
}
.acces-bloc p {
  margin: 0;
  color: var(--ink-500);
  line-height: 1.7;
}
.acces-icone { font-size: 1.5rem; line-height: 1; }
.acces-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 44px 0 0;
}

/* ---------------------------------------------------- Articles de conseils
   Colonne de lecture étroite : au-delà d'environ 70 signes par ligne, l'œil
   perd le début de la ligne suivante. C'est le réglage le plus rentable du
   confort de lecture. */
.article-corps { max-width: 720px; }
.article-corps h2 { margin-top: 1.9em; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.article-corps h2:first-child { margin-top: 0; }
.article-corps p { font-size: 1.06rem; line-height: 1.75; }
.article-corps strong { color: var(--ink); }
.article-corps .faq { margin-top: 1.4em; }
.article-maj { margin-top: 2.6em; padding-top: 1.1em; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--ink-500); }

.fil-ariane { font-size: 0.86rem; margin-bottom: 0.8em; }
.fil-ariane a { color: var(--brand); font-weight: 600; }

.article-suite {
  margin-top: 2.4em; padding: 26px 28px;
  background: var(--mist-soft); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.article-suite h2 { margin-top: 0; font-size: 1.1rem; }
.article-suite ul { display: grid; gap: 10px; }

.card-article { display: block; }
.card-article h2 { font-size: 1.2rem; margin-bottom: 0.5em; }
.card-article p { color: var(--ink-500); font-size: 0.98rem; }

/* ---------------------------------------------------- Header */
.skip-link { position: absolute; left: -9999px; }
/* Piège à robots. `display: none` serait détecté par les robots un peu
   sérieux : on sort le champ du cadre visible sans le retirer du DOM. */
.pot-de-miel {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { left: 12px; top: 12px; background: var(--brand-deep); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 300; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.logo { height: 42px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav ul { display: flex; gap: 4px; }
.site-nav a {
  font-size: 0.94rem; font-weight: 500; color: var(--ink-500);
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.site-nav a:hover { color: var(--ink); background: var(--mist-soft); }
.site-nav a.active { color: var(--brand); font-weight: 600; }
/* Le CTA du menu est un bouton, pas un lien de navigation : sans ces deux
   règles il héritait de `.site-nav a` — spécificité (0,1,1), qui l'emporte
   sur `.btn-primary` (0,1,0). Le libellé s'affichait en gris sur fond bleu
   (1,15:1, illisible) et le survol effaçait le fond du bouton. */
.site-nav a.btn { color: #fff; }
.site-nav a.btn:hover { color: #fff; background: var(--brand-dark); }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  /* 44 × 44 px : la cible tactile confortable au pouce. Le bouton ne
     faisait que 36 px de haut, ce qui suffit à la norme mais rate
     souvent au premier appui sur un grand téléphone. */
  width: 44px; height: 44px; padding: 0;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------- Hero */
.hero { padding: 72px 0 88px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.hero h1 { margin-bottom: 0.4em; }
.hero .lead { font-size: 1.2rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 32px 0 28px; }
.hero-media { position: relative; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; object-fit: cover; object-position: center 30%; width: 100%; }
.hero-badge {
  position: absolute; bottom: 26px; left: -22px;
  background: #fff; border-radius: var(--radius); padding: 16px 20px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; max-width: 260px;
}
.hero-badge strong { display: block; color: var(--ink); font-size: 0.95rem; }
.hero-badge span { font-size: 0.84rem; color: var(--ink-400); }
.hero-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16); }

.trust-row { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--border); }
.trust-row li { font-size: 0.9rem; font-weight: 500; color: var(--ink-500); display: flex; align-items: center; gap: 7px; }
.trust-row li::before { content: "✓"; color: var(--brand); font-weight: 700; }

/* ---------------------------------------------------- Page hero */
.page-hero { padding: 64px 0 8px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--mist-soft), #fff); }
.page-hero .lead { margin-bottom: 2em; }

/* ---------------------------------------------------- Chiffres */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; padding: 8px; }
.stat-value { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: var(--brand-light); letter-spacing: -0.04em; line-height: 1; margin-bottom: 10px; }
.stat-label { font-size: 0.92rem; color: rgba(255,255,255,0.72); line-height: 1.45; }

/* ---------------------------------------------------- Grilles & cartes */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; font-size: 0.96rem; color: var(--ink-500); }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--mist); font-size: 1.4rem; margin-bottom: 18px;
}
.card-soin { display: block; }
.card-soin .card-more { margin-top: 16px; font-size: 0.9rem; font-weight: 600; color: var(--brand); display: inline-block; }

/* ---------------------------------------------------- Mise en avant Acu-lift */
.highlight {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-gradient-end));
  border-radius: var(--radius-lg); overflow: hidden; color: #fff;
  box-shadow: var(--shadow-lg);
}
.highlight-copy { padding: 56px 48px; align-self: center; }
.highlight-copy h2 { color: #fff; margin-bottom: 14px; }
.highlight-copy p { color: rgba(255, 255, 255, 0.84); }
.highlight-claim {
  font-weight: 600; color: var(--gold-clair) !important;
  display: flex; align-items: center; gap: 8px;
}
.highlight-claim::before { content: "★"; font-size: 1.1rem; }
.highlight-media { position: relative; min-height: 320px; }
.highlight-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.highlight-badge {
  display: inline-block; margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.page-hero .highlight-badge, .soin-featured .highlight-badge {
  background: var(--gold-text); color: #fff; border-color: transparent;
}
.acu-hero { background: linear-gradient(180deg, #fdf8f1, #fff); }

.card-featured { border-color: var(--gold); position: relative; }
.card-featured:hover { border-color: var(--gold); }
.card-badge {
  position: absolute; top: -11px; left: 24px;
  background: var(--gold-text); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.soin-featured { border-color: var(--gold); background: #fffdf9; }

/* ---------------------------------------------------- La presse en parle */
.presse-titre {
  text-align: center; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-400); margin-bottom: 28px;
}
.presse-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; max-width: 1000px; margin: 0 auto;
}
.presse-liste a {
  display: block; height: 100%; padding: 20px 22px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.presse-liste a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.presse-media {
  display: block; font-size: 1.05rem; font-weight: 800;
  letter-spacing: 0.02em; color: var(--ink); margin-bottom: 4px;
}
.presse-detail { display: block; font-size: 0.82rem; color: var(--ink-400); margin-bottom: 10px; }
.presse-sujet { display: block; font-size: 0.94rem; color: var(--ink-700); margin-bottom: 12px; }
.presse-mention {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--brand); background: var(--mist);
  padding: 4px 10px; border-radius: 999px;
}

/* ---------------------------------------------------- Certification CE */
.certif-ce {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px; padding: 14px 18px;
  background: var(--mist-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 500; color: var(--ink) !important;
}
.ce-mark {
  flex-shrink: 0; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em;
  color: var(--brand-dark); background: #fff;
  border: 2px solid var(--brand-dark); border-radius: 6px;
  padding: 4px 9px; line-height: 1;
}

/* ---------------------------------------------------- Bio & citation */
.bio p { color: var(--ink-500); }
.pull-quote {
  margin: 28px 0; padding: 20px 26px;
  border-left: 3px solid var(--gold);
  background: var(--mist-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.12rem; font-weight: 600; color: var(--ink);
  font-style: italic;
}
.bio-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.protocole-note {
  display: flex; align-items: center; gap: 28px;
  background: var(--mist-soft); border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg); padding: 32px 36px;
}
.protocole-value {
  font-size: 3.4rem; font-weight: 800; color: var(--gold-text);
  letter-spacing: -0.04em; line-height: 1; flex-shrink: 0;
}
.protocole-note h3 { margin-bottom: 6px; }
.protocole-note p { margin: 0; color: var(--ink-500); font-size: 0.98rem; }

/* ---------------------------------------------------- Fenêtre modale */
.formateur-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--brand); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(24, 120, 171, 0.35);
}
.formateur-link:hover { text-decoration-color: var(--brand); }

.dialog {
  border: none; padding: 0; background: transparent;
  max-width: 620px; width: calc(100% - 32px); max-height: 88vh;
  margin: auto; color: var(--ink-700); overflow: visible;
}
.dialog::backdrop { background: rgba(10, 61, 90, 0.55); backdrop-filter: blur(3px); }
.dialog-inner {
  background: #fff; border-radius: var(--radius-lg);
  padding: 40px; box-shadow: var(--shadow-lg);
  max-height: 88vh; overflow-y: auto; position: relative;
}
.dialog-inner h2 { font-size: 1.6rem; margin-bottom: 6px; }
.dialog-inner p { font-size: 0.97rem; color: var(--ink-500); }
.dialog-titres { font-weight: 600; color: var(--ink) !important; margin-bottom: 1.4em; }
.dialog-close {
  position: absolute; top: 16px; right: 18px;
  background: var(--bg-soft); border: 1px solid var(--border); cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.dialog-close:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.diplomes-titre {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand);
  margin: 32px 0 16px; padding-top: 24px; border-top: 1px solid var(--border);
}
.diplomes { display: flex; flex-direction: column; gap: 2px; }
.diplomes li {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px;
  align-items: baseline; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 0.9rem; line-height: 1.45;
}
.diplome-annee { font-weight: 700; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.diplome-texte { color: var(--ink-700); }
.diplome-organisme { color: var(--ink-400); }
.diplome-cle { background: #fdf7ef; }
.diplome-cle .diplome-annee { color: var(--gold-text); }
.diplome-cle .diplome-texte { font-weight: 600; color: var(--ink); }

.qualiopi {
  display: flex; align-items: center; gap: 20px; margin-top: 28px;
  padding: 20px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.qualiopi img { width: 88px; height: 88px; flex-shrink: 0; }
.qualiopi strong { display: block; color: var(--ink); font-size: 0.95rem; margin-bottom: 4px; }
.qualiopi p { margin: 0; font-size: 0.86rem; }
.qualiopi-num { color: var(--ink-400); font-size: 0.8rem; }

.footer-qualiopi { display: flex; align-items: center; gap: 14px; font-size: 0.88rem; }
.footer-qualiopi img {
  width: 58px; height: 58px; flex-shrink: 0;
  background: #fff; border-radius: 50%; padding: 2px;
}

/* ---------------------------------------------------- Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split-media.portrait img { aspect-ratio: 4/5; }
.checklist { margin: 24px 0; }
.checklist li { position: relative; padding-left: 32px; margin-bottom: 12px; color: var(--ink-500); }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--mist); color: var(--brand);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------- Étapes */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; padding-top: 20px; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 1.05rem;
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: 0.95rem; color: var(--ink-500); margin: 0; }

/* ---------------------------------------------------- Tarifs */
/* Flex plutôt que grid : avec un nombre impair de formules, la dernière
   rangée se centre d'elle-même au lieu de laisser un orphelin à gauche. */
.pricing { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; align-items: stretch; }
.price-card { flex: 1 1 320px; max-width: 372px; }
.price-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 26px; position: relative; transition: transform .2s ease, box-shadow .2s ease;
  /* Colonne + marge auto sur le bouton : les « Réserver » restent alignés
     entre eux même quand une carte porte une mention de disponibilité. */
  display: flex; flex-direction: column;
}
.price-card > p:last-of-type { margin-bottom: 22px; }
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.price-card.featured { border-color: var(--brand); box-shadow: var(--shadow); }
.price-tag {
  position: absolute; top: -12px; left: 30px;
  background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.price-card h3 { margin-bottom: 4px; }
.price-sous {
  display: block; font-size: 0.9rem; font-weight: 500;
  color: var(--brand); margin-bottom: 6px;
}
.price-duree { display: block; font-size: 0.88rem; color: var(--ink-400); }
.price-value { font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; margin: 18px 0 14px; }
.price-note { font-size: 0.9rem; font-weight: 500; color: var(--ink-400); letter-spacing: 0; margin-left: 7px; }
.price-card p { font-size: 0.95rem; color: var(--ink-500); }
/* margin-top: auto — les boutons « Réserver » restent alignés en bas de
   chaque carte, même lorsqu'une carte porte une mention de disponibilité. */
.price-card .btn { width: 100%; margin-top: auto; padding-top: 14px; }
.paiement-note {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 640px; margin: 36px auto 0; padding: 18px 28px;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-gradient-end));
  color: #fff; border-radius: 999px;
  font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em;
  text-align: center; box-shadow: 0 8px 24px rgba(24, 120, 171, 0.28);
}
.paiement-icone { font-size: 1.3rem; line-height: 1; }

.tarifs-note {
  max-width: 640px; margin: 20px auto 0; text-align: center;
  font-size: 0.95rem; color: var(--ink-500);
  padding: 18px 24px; background: var(--mist-soft);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.tarifs-note a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------- Soins détaillés */
.soins-list { display: flex; flex-direction: column; gap: 28px; }
.soin-block {
  display: grid; grid-template-columns: 88px 1fr; gap: 28px; align-items: start;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px; scroll-margin-top: 100px;
}
.soin-block .card-icon { width: 64px; height: 64px; font-size: 1.8rem; margin: 0; }
/* Bloc illustré : la photo remplace l'icône et occupe une vraie colonne. */
.soin-illustre { grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }
.soin-image { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 4/3; }
.soin-block h2 { font-size: 1.4rem; margin-bottom: 12px; }
.soin-block p { color: var(--ink-500); }

/* ---------------------------------------------------- FAQ */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .2s ease; }
.faq-item[open] { border-color: var(--brand-light); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-weight: 600; color: var(--ink); font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--brand); font-size: 1.5rem; font-weight: 400; line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 24px 22px; margin: 0; color: var(--ink-500); font-size: 0.98rem; }

/* ---------------------------------------------------- Avis */
.testimonial {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; margin: 0; display: flex; flex-direction: column; gap: 4px;
}
.stars { color: var(--gold-text); letter-spacing: 3px; font-size: 0.95rem; margin: 0 0 12px; }
.testimonial p { color: var(--ink-700); font-size: 1rem; margin-bottom: 16px; }
.testimonial footer {
  margin-top: auto; font-size: 0.9rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--mist);
  color: var(--brand-dark); font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar + span { font-weight: 500; color: var(--ink-500); }
/* État vide de la page Avis : affiché tant qu'aucun témoignage réel n'a été
   ajouté dans content.js. */
.avis-vide {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--mist-soft); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 48px 32px;
}
.avis-vide p { color: var(--ink-500); }
.avis-vide p strong { color: var(--ink); }
.avis-vide .btn { margin-top: 12px; }

.google-reviews-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--mist-soft); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px; margin-bottom: 40px;
}
.google-reviews-cta p { margin: 0; flex: 1 1 260px; font-weight: 500; color: var(--ink); }

/* ---------------------------------------------------- Villes */
.villes-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ville-chip {
  background: #fff; border: 1px solid var(--border); padding: 7px 15px;
  border-radius: 999px; font-size: 0.87rem; color: var(--ink-500);
}
.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.map-embed + .map-embed, .split-media + .map-embed { margin-top: 20px; }

/* ---------------------------------------------------- Formulaires */
.form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-row label { font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.form-row input, .form-row select, .form-row textarea {
  padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(24, 120, 171, 0.14);
}
.form-status { font-size: 0.92rem; color: var(--brand-dark); min-height: 1.3em; margin: 0; }
.form .btn { align-self: flex-start; }

.contact-infos address { font-style: normal; color: var(--ink-500); margin-bottom: 24px; line-height: 1.9; }
/* Photo de la salle de soin, entre l'adresse et le plan. */
.cabinet-photo { margin: 0 0 20px; }
.cabinet-photo img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.cabinet-photo figcaption { margin-top: 8px; font-size: 0.86rem; color: var(--ink-500); }
.contact-infos address a { color: var(--brand); font-weight: 500; }

/* ---------------------------------------------------- Rendez-vous */
.booking-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); background: #fff; }
.booking-fallback { text-align: center; margin-top: 24px; color: var(--ink-500); font-size: 0.95rem; }
.booking-fallback a { color: var(--brand); font-weight: 600; }

/* ---------------------------------------------------- CTA final */
.cta-band {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-gradient-end));
  border-radius: var(--radius-lg); padding: 64px 40px; text-align: center; color: #fff;
}
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: rgba(255, 255, 255, 0.94); max-width: 480px; margin: 0 auto 28px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------- Contenu légal */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h2 { font-size: 1.3rem; margin-top: 2em; }
.legal-content em { color: var(--ink-400); }
.legal-content ul { list-style: disc; padding-left: 22px; margin: 0 0 1.1em; }
.legal-content li { margin-bottom: 6px; }
.legal-maj { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 0.9rem; }

/* ---------------------------------------------------- Footer */
.site-footer { background: var(--brand-deep); color: rgba(255, 255, 255, 0.65); padding: 72px 0 28px; font-size: 0.94rem; }
.site-footer h3 { color: #fff; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer p, .site-footer address { color: rgba(255, 255, 255, 0.65); font-style: normal; line-height: 1.8; }
.site-footer a { color: rgba(255, 255, 255, 0.8); transition: color .15s ease; }
.site-footer a:hover { color: #fff; }
.site-footer .logo { height: 44px; margin-bottom: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 0.9fr 1fr 1.1fr 1.1fr; gap: 36px; }
.footer-grid ul li { margin-bottom: 10px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: background .18s ease, transform .18s ease;
}
.socials a:hover { background: var(--brand); transform: translateY(-2px); }
.socials svg { display: block; }
.socials-lg { margin-top: 24px; flex-wrap: wrap; }
.socials-lg a {
  width: auto; gap: 9px; padding: 0 18px; height: 42px; border-radius: 999px;
  background: #fff; color: var(--brand-dark); border: 1px solid var(--border);
  font-size: 0.9rem; font-weight: 600;
}
.socials-lg a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Note technique sur le laser — bande claire, juste au-dessus du pied de page.
   Elle referme le contenu ; le pied de page reste réservé à la navigation et
   aux mentions légales. */
.note-laser {
  background: var(--mist-soft);
  border-top: 1px solid var(--border);
  padding: 14px 0 20px;
  /* Remonte la bande contre le contenu qui la précède : la marge basse de la
     dernière section laissait un blanc trop large au-dessus. */
  margin-top: -24px;
}
.note-laser p {
  margin: 0 auto; max-width: 820px; text-align: center;
  font-size: 0.86rem; line-height: 1.65; color: var(--ink-500);
}
.note-marque { color: var(--brand); font-weight: 700; }

/* Renvoi vers la note technique du pied de page */
.aster {
  color: var(--brand); font-weight: 700; text-decoration: none;
  font-size: 0.85em; vertical-align: super; line-height: 0;
  padding: 0 1px;
}
.aster:hover { text-decoration: underline; }
.highlight .aster, .cta-band .aster { color: var(--gold-clair); } /* sur fond sombre */

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.87rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------------------------------------------------- Responsive */
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 64px; }
  .hero-grid, .split { grid-template-columns: 1fr; gap: 40px; }
  .hero-media img { aspect-ratio: 4/3; }
  .hero-badge { left: 16px; bottom: 16px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* .pricing garde son auto-fit : il se réorganise seul selon la largeur */
  .highlight { grid-template-columns: 1fr; }
  .highlight-copy { padding: 36px 26px; order: 2; }
  .highlight-media { min-height: 220px; order: 1; }
  .protocole-note { flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 24px; }
  .soin-block, .soin-illustre { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .cta-band { padding: 48px 24px; }

  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; top: 67px; left: 0; right: 0;
    height: calc(100vh - 67px); width: 100%;
    background: #fff; flex-direction: column; align-items: stretch;
    padding: 24px; gap: 0; overflow-y: auto; z-index: 90;
    transform: translateX(100%); transition: transform .25s ease, visibility 0s .25s;
    border-top: 1px solid var(--border);
    /* Menu fermé : masqué au clavier et aux lecteurs d'écran, et surtout
       exclu du calcul de largeur de la page. Sans cela, le tiroir décalé
       hors écran doublait la largeur défilable en mobile (780px au lieu de
       390px) : la page se balayait latéralement sur du vide. */
    visibility: hidden;
  }
  .site-nav.open { transform: translateX(0); visibility: visible; transition: transform .25s ease, visibility 0s; }
  .site-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .site-nav a { display: block; padding: 16px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav-cta { margin-top: 24px; width: 100%; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .google-reviews-cta { flex-direction: column; align-items: stretch; }
  .google-reviews-cta .btn { width: 100%; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}