/* ==========================================================
   Dr Isabelle Baste — Médecine Vasculaire & Esthétique
   Refonte v3 — inspiration centreclema.fr + rose signature
   ========================================================== */

:root {
  /* Palette */
  --white:       #ffffff;
  --ivory:       #fbf8f4;
  --cream:       #f5efe7;
  --sand:        #e8ddd0;
  --blush:       #f3e7e4;    /* rose poudré très clair */
  --rose:        #d8b7b0;    /* rose signature Isa */
  --rose-deep:   #b8928a;
  --gold:        #b89968;    /* accent précieux */
  --gold-soft:   #d4b98a;
  --greige:      #9a8f84;
  --ink:         #1f1c1a;    /* noir chaud */
  --ink-soft:    #3a3633;
  --muted:       #6a625b;
  --line:        rgba(31,28,26,.14);
  --line-soft:   rgba(31,28,26,.08);

  /* Type */
  --serif: "Cormorant Garamond", "Didot", Georgia, serif;
  --sans:  "Inter", "Montserrat", system-ui, -apple-system, sans-serif;

  --max:   1340px;
  --nav-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }

/* ---------- Type ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); line-height: 1.05; }
h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.15; }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.3; }
h4 { font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--sans); font-weight: 500; color: var(--muted); }
p  { margin: 0 0 1em; }
em { font-style: italic; color: var(--ink); }
strong { font-weight: 500; color: var(--ink); }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1.2rem;
  display: inline-block;
}
.lead { font-size: 1.15rem; line-height: 1.75; color: var(--ink-soft); }
.serif-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.section   { padding: clamp(70px, 9vw, 130px) 0; }
.section-sm{ padding: clamp(50px, 6vw, 90px) 0; }
.bg-ivory  { background: var(--ivory); }
.bg-cream  { background: var(--cream); }
.bg-sand   { background: var(--sand); }
.bg-blush  { background: var(--blush); }
.bg-white  { background: var(--white); }
.bg-ink    { background: var(--ink); color: #e8e4df; }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: #fff; }
.bg-ink .eyebrow { color: var(--gold-soft); }

.grid { display: grid; gap: clamp(30px, 4vw, 60px); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5-7 { grid-template-columns: 5fr 7fr; }
.grid-7-5 { grid-template-columns: 7fr 5fr; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4, .grid-5-7, .grid-7-5 { grid-template-columns: 1fr; }
}
/* Tablette paysage / petit laptop : 4 colonnes de texte (~180-240px) illisibles → 2x2 */
@media (min-width: 901px) and (max-width: 1199px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

.align-center { text-align: center; }
.max-700 { max-width: 700px; }
.max-780 { max-width: 780px; }
.max-860 { max-width: 860px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 1rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 38px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center; /* défensif : libellé centré quand le bouton wrappe ou est étiré */
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: all .35s ease;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--ivory); }
.btn-dark { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn-dark:hover { background: transparent; color: var(--ink); }
.btn-light { border-color: #fff; color: #fff; }
.btn-light:hover { background: #fff; color: var(--ink); }
.btn-gold { border-color: var(--gold); color: var(--gold); }
.btn-gold:hover { background: var(--gold); color: #fff; }
.btn-rose { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn-rose:hover { background: var(--rose-deep); border-color: var(--rose-deep); }

/* ==========================================================
   NAVIGATION  (refonte — dropdowns simples, fiables)
   ========================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 74px;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(251, 248, 244, .97);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .4s ease, border-color .4s ease, height .3s ease;
}
/* Variante "fondue" — uniquement sur la home avant scroll.
   Fond ivoire très légèrement translucide, texte en ink, effet Clema. */
.nav.transparent {
  background: rgba(251, 248, 244, .55);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom-color: rgba(214, 199, 180, .28);
}
/* 74px (et non 70) : page-head, hero-cover (margin-top:74px inline) et menu burger
   (top:74px) sont tous calés sur 74 — la nav réduite laissait un jour de 4px. */
.nav.solid { height: 74px; }

/* Logo */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink);
  transition: color .3s ease;
  flex-shrink: 0;
}
.nav-logo img { height: 40px; width: auto; transition: filter .3s ease; }
.nav-logo .subline {
  display: block;
  font-family: var(--sans);
  font-size: .56rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .7;
  font-weight: 400;
  color: var(--ink-soft);
}
/* Nav fondue : on garde le logo en ink, juste un poil plus opaque */
.nav.transparent .nav-logo { color: var(--ink); }

/* Menu principal */
.nav-menu {
  display: flex;
  align-items: stretch;
  gap: clamp(4px, 1.4vw, 22px);
  list-style: none;
  margin: 0; padding: 0;
  height: 100%;
}
.nav-menu > li {
  position: relative;
  display: flex;
  align-items: stretch;
}
.nav-menu > li > a,
.nav-menu > li > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 6px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav-menu > li > a:hover,
.nav-menu > li > button:hover { color: var(--rose-deep); }
/* Items menu : conservent la couleur ink même sur nav transparent */
.nav.transparent .nav-menu > li > a,
.nav.transparent .nav-menu > li > button { color: var(--ink); }
.nav.transparent .nav-menu > li > a:hover,
.nav.transparent .nav-menu > li > button:hover { color: var(--rose-deep); }

/* Chevron pour les items avec dropdown */
.has-dropdown > button::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .3s ease;
  margin-top: -3px;
}
.has-dropdown:hover > button::after,
.has-dropdown.open > button::after {
  transform: rotate(-135deg) translate(1px, 1px);
}

/* ─── Dropdown panel ─── */
.dropdown, .megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 18px 22px;
  list-style: none;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(30, 20, 10, .1);
  border-top: 2px solid var(--gold);
  min-width: 240px;
  z-index: 1100;
  display: none;
}
/* Bridge invisible pour ne pas perdre le hover entre bouton et panneau */
.dropdown::before, .megamenu::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
  background: transparent;
}
.dropdown li { list-style: none; margin: 0; }
.dropdown a {
  display: block;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 400;
  color: var(--ink);
  padding: 8px 4px;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color .2s ease, padding .2s ease;
  text-transform: none;
  border-bottom: 1px solid transparent;
}
.dropdown a:hover {
  color: var(--rose-deep);
  padding-left: 10px;
}

/* Megamenu — 3 colonnes */
.megamenu {
  display: none;
  /* 4 colonnes depuis batch6 : Phlébologie | Esthétique corps | Esthétique visage | Peau */
  grid-template-columns: repeat(4, minmax(155px, 1fr));
  gap: 24px;
  padding: 28px 32px;
  min-width: 820px;
  /* centré sous le bouton parent */
  left: 50%;
  transform: translateX(-50%);
}
/* Megamenu « Nos Traitements » (2ᵉ dropdown) : 3 colonnes réelles — la grille
   4 colonnes laissait une colonne vide et faisait déborder le panneau centré
   à droite du viewport entre 1200 et 1479px. */
.has-dropdown + .has-dropdown > .megamenu {
  grid-template-columns: repeat(3, minmax(165px, 1fr));
  min-width: 660px;
}
.megamenu .col { list-style: none; margin: 0; padding: 0; }
.megamenu .col > h5 {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 500;
}
.megamenu .col ul { list-style: none; margin: 0; padding: 0; }
.megamenu .col a {
  display: block;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink);
  padding: 7px 0;
  transition: color .2s ease, padding .2s ease;
  white-space: nowrap;
}
.megamenu .col a:hover { color: var(--rose-deep); padding-left: 6px; }

/* Ouverture — hover (desktop) ET classe .open (mobile/click) */
.has-dropdown:hover > .dropdown,
.has-dropdown.open > .dropdown { display: block; }
.has-dropdown:hover > .megamenu,
.has-dropdown.open > .megamenu { display: grid; }

/* CTA bouton RDV — compact, ne dépasse jamais */
.nav-cta {
  flex-shrink: 0;
  padding: 11px 22px;
  font-size: .68rem;
  letter-spacing: .18em;
  white-space: nowrap;
}
/* Cacher le bouton RDV dès que la nav devient serrée.
   1479px (et non 1320) : mesuré au pixel — avec le CTA visible, la nav débordait
   du viewport jusqu'à ~1620px (items Actualités/Contact coupés sur laptop 1366/1440). */
@media (max-width: 1479px) {
  .nav-cta { display: none; }
}

/* Laptops & petits desktops (1200-1699px) : menu compacté pour que les 8 items
   + logo tiennent sans déborder (letter-spacing .2em ne tenait qu'à partir de ~1420px). */
@media (min-width: 1200px) and (max-width: 1699px) {
  .nav-menu { gap: clamp(2px, .9vw, 14px); }
  .nav-menu > li > a,
  .nav-menu > li > button {
    font-size: .68rem;
    letter-spacing: .09em;
    padding: 0 4px;
  }
}

/* Hamburger */
.nav-toggle {
  display: none;
  width: 34px; height: 34px;
  flex-shrink: 0;
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 6px; right: 6px;
  height: 1.5px;
  background: var(--ink);
  transition: all .3s ease;
}
.nav-toggle span:nth-child(1) { top: 11px; }
.nav-toggle span:nth-child(2) { top: 16.5px; }
.nav-toggle span:nth-child(3) { top: 22px; }
.nav.transparent .nav-toggle span { background: var(--ink); }

/* ── Responsive ──
   Burger jusqu'à 1199px : entre 1100 et 1199px le menu desktop ne tenait pas
   (8 items nowrap + logo > viewport), le burger y est plus propre. */
@media (max-width: 1199px) {
  .nav-menu { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }

  .nav-menu.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 74px; left: 0; right: 0;
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px); /* mobile : suit la barre d'outils du navigateur */
    background: #fff;
    padding: 16px 24px 40px;
    gap: 0;
    overflow-y: auto;
    align-items: stretch;
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 20px 40px rgba(0,0,0,.06);
    z-index: 1050;
  }
  .nav-menu.open > li {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-menu.open > li > a,
  .nav-menu.open > li > button {
    color: var(--ink) !important;
    padding: 18px 4px;
    width: 100%;
    justify-content: space-between;
    height: auto;
  }
  .nav-menu.open .dropdown,
  .nav-menu.open .megamenu {
    position: static;
    left: auto; top: auto;
    transform: none;
    box-shadow: none;
    border-top: 0;
    padding: 0 0 14px 18px;
    min-width: 0;
    background: var(--ivory);
    margin: 0 -4px 8px;
    padding: 10px 18px 14px;
    border-radius: 4px;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .nav-menu.open .dropdown::before,
  .nav-menu.open .megamenu::before { display: none; }
  /* Sur mobile : on n'utilise QUE la classe .open pour montrer */
  .nav-menu.open .has-dropdown:hover > .dropdown,
  .nav-menu.open .has-dropdown:hover > .megamenu { display: none; }
  .nav-menu.open .has-dropdown.open > .dropdown { display: block; }
  .nav-menu.open .has-dropdown.open > .megamenu { display: grid; }
}

/* ==========================================================
   HERO — vidéo plein écran
   ========================================================== */
.hero-video {
  position: relative;
  height: 100vh;
  /* svh : stable face à la barre d'adresse iOS/Android (pas de saut ni de CTA masqué) */
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  color: #fff;
}
.hero-video video,
.hero-video .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(20px, 5vw, 80px) clamp(60px, 8vw, 120px);
}
.hero-content .eyebrow {
  color: #fff;
  opacity: .92;
  font-weight: 400;
}
.hero-content h1 {
  color: #fff;
  max-width: 18ch;
  margin-bottom: .4em;
  font-weight: 300;
}
/* Sur fond vidéo : tout le titre reste en blanc, l'italique signe l'accent */
.hero-content h1 em {
  color: inherit;
  font-style: italic;
  font-weight: 300;
}
.hero-content .hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  max-width: 52ch;
  opacity: .92;
  margin-bottom: 2.5rem;
  font-weight: 400;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 40px;
  background: rgba(255,255,255,.6);
  animation: scrollBar 2s ease-in-out infinite;
}
@keyframes scrollBar {
  0%,100% { transform: scaleY(.3); transform-origin: top; }
  50%     { transform: scaleY(1);  transform-origin: top; }
}

/* ==========================================================
   PAGE HEADERS (pages intérieures)
   ========================================================== */
.page-head {
  position: relative;
  padding: calc(74px + 36px) 0 44px;   /* hauteur nav + espace compact */
  background: var(--cream);
  overflow: hidden;
}
.page-head h1 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  margin: .4rem 0 0;
  line-height: 1.08;
}
.page-head .eyebrow { margin-bottom: .3rem; }
.page-head.with-image {
  color: #fff;
  padding: calc(74px + 70px) 0 70px;
}
.page-head.with-image h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
@media (max-width: 800px) {
  .page-head { padding: calc(74px + 28px) 0 36px; }
  .page-head.with-image { padding: calc(74px + 50px) 0 54px; }
}
.page-head.with-image::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.page-head.with-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.55));
  z-index: 1;
}
.page-head.with-image .container { position: relative; z-index: 2; }
.page-head.with-image h1 { color: #fff; }
/* Déscopé de .page-head : les pages hero-cover posent le breadcrumb dans une
   section ordinaire — il rendait en texte body brut, incohérent avec les autres pages. */
.breadcrumb {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.page-head.with-image .breadcrumb { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: var(--gold); }

/* ==========================================================
   Content blocks
   ========================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.pillar {
  padding: clamp(40px, 5vw, 70px) clamp(24px, 3vw, 44px);
  border-right: 1px solid var(--line-soft);
  text-align: left;
  transition: background .3s;
  /* ✅ POLISH (06-2026) — les liens « En savoir plus » s'alignent sur la même
     ligne de base quel que soit le nombre de lignes du paragraphe */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pillar .card-link { margin-top: auto; }
.pillar:last-child { border-right: 0; }
.pillar:hover { background: var(--cream); }
.pillar .pillar-num {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
  font-style: italic;
}
.pillar h3 { font-size: 1.5rem; }
.pillar .small { font-size: .88rem; color: var(--muted); }
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .pillar:last-child { border-bottom: 0; }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.card {
  background: #fff;
  padding: 0;
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(31,28,26,.08); }
.card .card-image {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
/* ✅ POLISH (06-2026) — zoom photo très léger au survol de la carte.
   Calque ::before héritant de l'image inline : le zoom reste clippé
   dans le cadre de l'image (jamais sur le texte de la carte). */
.card .card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.card:hover .card-image::before { transform: scale(1.045); }
.card .card-body { padding: 28px 26px 32px; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-size: 1.3rem; margin-bottom: .4em; }
.card .card-sub { font-size: .86rem; color: var(--muted); margin-bottom: 1rem; }
.card .card-link {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  transition: color .3s, gap .3s;
}
.card .card-link::after {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: currentColor;
}
.card:hover .card-link { color: var(--rose-deep); gap: 16px; }

.split-image {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  width: 100%;
}
.split-image.landscape { aspect-ratio: 16/10; }
/* L'image suit la hauteur de la colonne voisine (anti-décalage) */
.split-image.fill {
  aspect-ratio: auto;
  height: 100%;
  min-height: 480px;
}

/* Variantes de la grid 5-7/7-5 pour gérer l'alignement vertical proprement */
.grid-5-7.stretch, .grid-7-5.stretch { align-items: stretch; }
.grid-5-7.middle,  .grid-7-5.middle  { align-items: center; }

/* L'info-panel suit le scroll côté droit (effet Clema) — desktop only */
@media (min-width: 1200px) {
  .info-panel.sticky { position: sticky; top: 100px; }
}

/* Info panel — pages zones / actes */
.info-panel {
  background: var(--blush);
  padding: clamp(30px, 4vw, 48px);
  border-left: 2px solid var(--gold);
}
.info-panel .info-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(31,28,26,.1);
  font-size: .95rem;
}
.info-panel .info-row:last-child { border-bottom: 0; }
.info-panel .info-label {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 500;
  padding-top: 4px;
}
@media (max-width: 700px) {
  .info-panel .info-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}
/* iPad paysage / petit laptop : le panneau vit dans la colonne 5fr (~385-466px de large),
   le label fixe 180px écrasait la colonne valeur (mesuré 111-142px, plus étroite que le
   label) — on empile label/valeur comme en mobile sur cette plage. */
@media (min-width: 901px) and (max-width: 1280px) {
  .info-panel .info-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}
/* ≥1281px : les panneaux logés dans l'aside 5fr d'une grid-7-5/5-7 ne dépassent jamais
   ~390px utiles (container capé à 1340px) — le label 180px y reste intenable, on garde
   l'empilement à toutes les largeurs. Les panneaux en grid-2 (contact, tarifs) restent
   en 2 colonnes (colonne valeur ~300px, lisible). */
@media (min-width: 1281px) {
  .grid-7-5 .info-panel .info-row,
  .grid-5-7 .info-panel .info-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}

/* Steps (protocole médical) */
.steps-list {
  counter-reset: step;
  display: grid;
  gap: 44px;
}
.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 30px;
  align-items: start;
}
.step-num {
  counter-increment: step;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
}
.step-num::before { content: "0" counter(step); }
.step h3 { margin-bottom: .3em; }
@media (max-width: 600px) {
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step-num { font-size: 2.5rem; }
}

/* Video embed */
.video-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--ink);
  overflow: hidden;
}
.video-wrap video, .video-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.video-wrap.portrait { aspect-ratio: 9/16; max-width: 420px; }
/* Vidéo portrait centrée quand la grille parente est empilée (sinon bloc de 420px
   calé à gauche avec ~270px de vide à droite sur tablette) */
@media (max-width: 900px) {
  .video-wrap.portrait { margin-left: auto; margin-right: auto; }
}

/* Pull-quote */
.pullquote {
  text-align: center;
  padding: clamp(50px, 7vw, 90px) clamp(20px, 5vw, 60px);
  max-width: 900px;
  margin: 0 auto;
}
.pullquote::before {
  content: "“";
  font-family: var(--serif);
  font-size: 6rem;
  color: var(--gold);
  line-height: .3;
  display: block;
  margin-bottom: 10px;
}
.pullquote p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 24px;
}
/* Pullquote sur fond sombre : texte clair (sinon invisible) */
.bg-ink .pullquote p,
.section-dark .pullquote p { color: #f0ebe3; }

/* Strong / em sur fond sombre : couleur claire (sinon invisible — le strong global est ink) */
.section-dark strong,
.bg-ink strong,
.locate strong,
.footer strong { color: #f0ebe3; font-weight: 500; }
.section-dark em,
.bg-ink em { color: #ddd5c9; }
.pullquote cite {
  display: block;
  margin-top: 24px;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--gold);
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gallery-item {
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: opacity .3s;
}
.gallery-item:hover { opacity: .88; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* FAQ */
.faq-item {
  border-top: 1px solid var(--line-soft);
  padding: 24px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-q::after { content: "+"; color: var(--gold); font-size: 1.4rem; transition: transform .3s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease, margin .3s; color: var(--muted); }
/* 1400px (et non 600) : les déroulements batch7 (phlébologie) dépassent 600px
   de contenu sur petit mobile — le bas était tronqué. */
.faq-item.open .faq-a { max-height: 1400px; margin-top: 10px; }

/* Tags / bullets */
.bullet-list { list-style: none; padding: 0; margin: 0 0 1.2em; }
.bullet-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: .55em;
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 10px; height: 1px;
  background: var(--gold);
}
.bullet-list.check li::before {
  content: "✓";
  background: transparent;
  width: auto; height: auto;
  top: 0;
  color: var(--rose-deep);
  font-weight: 400;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  background: var(--ink);
  color: #cfc9c0;
  padding: clamp(60px, 7vw, 100px) 0 40px;
  font-size: .9rem;
}
.footer a { color: #cfc9c0; transition: color .3s; }
.footer a:hover { color: var(--rose); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 60px;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer h5 {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 20px;
}
.footer .brand {
  font-family: var(--serif);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: .3em;
}
.footer .brand-sub {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.5em;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; font-size: .88rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: .76rem;
  color: #888175;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================
   Reveal animations
   ========================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  /* ✦ SIGNATURE — pseudo-éléments et view-transitions inclus */
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Utilities */
.divider { width: 48px; height: 1px; background: var(--gold); margin: 24px 0; }
.divider.center { margin-left: auto; margin-right: auto; }
.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: var(--blush);
  color: var(--rose-deep);
  margin-right: 6px;
  margin-bottom: 6px;
}

/* ==========================================================
   COMPOSANTS V4 — inspirés des maquettes batch3
   ========================================================== */

/* ── Hero-cover : titre split noir/italique gold + ornement losange ── */
.hero-cover {
  background: var(--cream);
  padding: clamp(80px, 14vw, 160px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-cover::before {
  content: "";
  position: absolute; top: 18%; bottom: 18%;
  left: 50%;
  width: 1px;
  background: var(--gold);
  opacity: .22;
}
.hero-cover .eyebrow {
  font-size: .68rem;
  letter-spacing: .32em;
  margin-bottom: 2rem;
}
.hero-cover .title-split {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1.05;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 1rem;
}
.hero-cover .title-split em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.hero-cover .subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: var(--muted);
  margin: 0 auto 2.4rem;
  max-width: 540px;
}
.hero-cover .ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 1.6rem auto 2rem;
  max-width: 240px;
}
.hero-cover .ornament::before,
.hero-cover .ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: .55;
}
.hero-cover .ornament-diamond {
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .8;
}
.hero-cover .tag-bottom {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Section sombre profonde (alternance) ── */
.section-dark {
  background: #1a1614;
  color: #d6cfc6;
  padding: clamp(80px, 11vw, 140px) 0;
}
.section-dark .eyebrow { color: var(--gold-soft); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .lead { color: #c5beb4; }
.section-dark p { color: #a8a097; }

/* ── Atouts cards (bordure top gold + losange) ── */
.atouts-grid {
  display: grid;
  gap: 24px;
  margin-top: 2.4rem;
}
.atouts-card {
  position: relative;
  padding: 38px 38px 36px;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.atouts-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 2px;
  background: var(--gold);
}
.atouts-card .diamond-icon {
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink);
  background: var(--ivory);
  transform: rotate(45deg);
  display: inline-block;
  margin-bottom: 26px;
  position: relative;
}
.atouts-card .diamond-icon::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--ink);
}
.atouts-card h3 {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .8rem;
}
.atouts-card p {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0;
}
.atouts-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.06); }

.section-dark .atouts-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(184,153,104,.18);
}
.section-dark .atouts-card .diamond-icon {
  border-color: var(--gold-soft);
  background: transparent;
}
.section-dark .atouts-card .diamond-icon::after { background: var(--gold-soft); }
.section-dark .atouts-card h3 { color: var(--gold-soft); }
.section-dark .atouts-card p { color: #b3aca2; }

/* ── Timeline verticale (numéros dans cercles or) ── */
.timeline-vert {
  position: relative;
  padding-left: 0;
  margin: 3rem 0;
  list-style: none;
}
.timeline-vert::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--gold);
  opacity: .5;
}
.timeline-vert .step {
  position: relative;
  padding: 22px 0 22px 78px;
  border-bottom: 1px solid var(--line-soft);
  counter-increment: vstep;
}
.timeline-vert .step:last-child { border-bottom: 0; }
.timeline-vert .step::before {
  content: counter(vstep, decimal);
  position: absolute;
  left: 0;
  top: 22px;
  width: 54px; height: 54px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold);
  background: var(--ivory);
}
.timeline-vert { counter-reset: vstep; }
.timeline-vert .step h3 {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .6rem;
}
.timeline-vert .step p {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.7;
  margin: 0;
}

/* Variante en section dark */
.section-dark .timeline-vert::before { background: var(--gold-soft); opacity: .35; }
.section-dark .timeline-vert .step { border-bottom-color: rgba(184,153,104,.15); }
.section-dark .timeline-vert .step::before {
  background: #1a1614;
  border-color: var(--gold-soft);
  color: var(--gold-soft);
}
.section-dark .timeline-vert .step h3 { color: #fff; }
.section-dark .timeline-vert .step p { color: #b3aca2; }

/* ── Big numbered cards (01/02/03 italique gold) ── */
.numbered-card {
  position: relative;
  padding: 56px 44px 44px;
  border: 1px solid rgba(184,153,104,.25);
  margin-bottom: -1px;
  background: transparent;
}
.numbered-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--gold-soft);
  line-height: 1;
  margin-bottom: 1.6rem;
  display: block;
}
.numbered-card h4 {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.section-dark .numbered-card h4 { color: var(--gold-soft); }
.numbered-card p {
  color: var(--muted);
  margin: 0;
  font-size: .97rem;
  line-height: 1.7;
}
.section-dark .numbered-card { border-color: rgba(184,153,104,.18); }
.section-dark .numbered-card p { color: #b3aca2; }

/* ── Title split inline (.title-split avec em gold italique) ── */
.title-split em {
  font-style: italic;
  color: var(--gold);
}

/* ── Page stub (placeholder pages) ── */
.page-stub {
  text-align: center;
  /* fluide : le 80px fixe s'additionnait au padding de .section (~270px de vide cumulé à 360px) */
  padding: clamp(24px, 6vw, 80px) 0;
}
.page-stub .stub-tag {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.page-stub p { color: var(--muted); max-width: 600px; margin: 1rem auto 2rem; }

/* ── Responsive atouts grid ── */
@media (min-width: 720px) { .atouts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .atouts-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px){ .atouts-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================
   V5 — micro-interactions premium & dynamism
   ========================================================== */

/* Smooth scroll natif renforcé pour les nav anchors */
html { scroll-behavior: smooth; }

/* ── Reveal-on-scroll amélioré (avec blur qui se résout) ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1),
    filter .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform, filter;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Variantes pour des arrivées différentes */
.reveal.from-left  { transform: translate(-28px, 0); }
.reveal.from-right { transform: translate(28px, 0); }
.reveal.from-left.in,
.reveal.from-right.in { transform: translate(0, 0); }

/* ── Split text reveal — chaque mot apparaît en cascade ── */
.split-text .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(8px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1),
    filter .8s cubic-bezier(.22,.61,.36,1);
}
.split-text.in .word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Délais en cascade — applied via JS ou static via :nth-child */
.split-text .word:nth-child(1)  { transition-delay: .05s; }
.split-text .word:nth-child(2)  { transition-delay: .15s; }
.split-text .word:nth-child(3)  { transition-delay: .25s; }
.split-text .word:nth-child(4)  { transition-delay: .35s; }
.split-text .word:nth-child(5)  { transition-delay: .45s; }
.split-text .word:nth-child(6)  { transition-delay: .55s; }
.split-text .word:nth-child(7)  { transition-delay: .65s; }
.split-text .word:nth-child(8)  { transition-delay: .75s; }
.split-text .word:nth-child(9)  { transition-delay: .85s; }
.split-text .word:nth-child(10) { transition-delay: .95s; }

/* ── Number counters (animation des chiffres) ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(28px, 4vw, 60px);
  text-align: center;
  margin: 4rem 0 2rem;
}
.stat {
  border-left: 1px solid var(--line-soft);
  padding: 14px 22px;
}
.stat:first-child { border-left: 0; }
.stat-number {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  color: var(--gold);
  font-weight: 400;
  line-height: 1;
  display: inline-block;
}
.stat-suffix {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  color: var(--gold);
  font-style: italic;
  margin-left: 4px;
}
.stat-label {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .9rem;
}
@media (max-width: 700px) {
  .stat { border-left: 0; border-top: 1px solid var(--line-soft); padding-top: 26px; }
  .stat:first-child { border-top: 0; padding-top: 0; }
}

/* ── Hover premium sur cards (image zoom + texte slide) ── */
.card {
  overflow: hidden;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
}
.card .card-image {
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(31,28,26,.18);
}
.card:hover .card-image { transform: scale(1.06); }
.card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: gap .4s ease;
}
.card .card-link::after {
  content: "→";
  display: inline-block;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.card:hover .card-link { gap: 14px; }
.card:hover .card-link::after { transform: translateX(6px); }

/* Pillars : animation sur survol */
.pillar { transition: background .5s ease, transform .5s ease; }
.pillar:hover .pillar-num { transform: translateX(6px); transition: transform .4s ease; }

/* ── Boutons CTA avec fill animation en or ── */
.btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  z-index: -1;
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { color: #fff; border-color: var(--gold); }
.btn-dark:hover { color: #fff; border-color: var(--gold); background: transparent; }
.btn-light:hover { color: #fff; border-color: var(--gold); background: transparent; }
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold::before { background: var(--ink); }
.btn-gold:hover { color: #fff; border-color: var(--ink); }

/* ── Tag chips animés ── */
.tag {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 50px;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ink);
  background: transparent;
  transition: all .3s ease;
  cursor: pointer;
}
.tag:hover {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
  transform: translateY(-2px);
}

/* ── Pull-quote avec apparition élégante ── */
.pullquote {
  position: relative;
}
.pullquote.reveal::before {
  content: "";
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60px; height: 1px;
  background: var(--gold);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
  transition-delay: .3s;
}
.pullquote.reveal.in::before { transform: translateX(-50%) scaleX(1); }

/* ── View Transitions API (page transitions douces, natif moderne) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: fade-out .3s cubic-bezier(.22,.61,.36,1) both;
}
::view-transition-new(root) {
  animation: fade-in .35s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }

/* ── Hover sur images de gallery ── */
.gallery-item {
  overflow: hidden;
  position: relative;
  transition: transform .5s ease;
}
.gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.25));
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 1;
}
.gallery-item:hover::before { opacity: 1; }
.gallery-item:hover { transform: scale(1.02); }

/* ── Reduced motion : respect du choix utilisateur ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .split-text .word { opacity: 1; transform: none; filter: none; }
}

/* ==========================================================
   Refinements — responsive polish & a11y fixes
   ========================================================== */

/* A2 — Hero : indicateur SCROLL chevauchait les CTAs en mobile/tablet */
@media (max-width: 900px) {
  .hero-scroll { display: none; }
  .hero-content { padding-bottom: clamp(60px, 11vw, 120px); }
}
@media (max-width: 760px) {
  .hero-content .hero-sub { font-size: clamp(1rem, 4vw, 1.2rem); margin-bottom: 1.8rem; }
  .hero-content h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1.08; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { width: 100%; text-align: center; padding: 14px 28px; }
}

/* A3 fix — defensive : contrôles vidéo natifs masqués partout (déco only) */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
}
.hero-video video, .video-wrap video { pointer-events: none; }

/* B1 — WCAG : eyebrow gold sur blush passait à 2.22, on prend un ton plus profond (>4.5:1) */
.bg-blush .eyebrow { color: #7a5247; }

/* B3 — Heading-order : on style les "h3" du footer comme les anciens h5 */
.footer h3 {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 20px;
  font-weight: 500;
  line-height: 1.4;
}

/* B2 — WCAG : footer-bottom couleur trop sombre (#888175 → 4.39), remontée */
.footer-bottom { color: #b5ad9f; }

/* C — Polish responsive */

/* Container : un peu plus serré sur très petits écrans pour gagner du contenu */
@media (max-width: 500px) {
  .container { padding: 0 18px; }
  .section { padding: clamp(56px, 11vw, 90px) 0; }
}

/* Card-grid : 2 colonnes entre 540 et 900px (au lieu du saut 3→1).
   .grid-3 inclus : mêmes cards sur emotions/cabinet/cou/corps-varicosites/visage-injections. */
@media (min-width: 540px) and (max-width: 900px) {
  .card-grid, .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* Variante 2 colonnes des card-grids denses en texte (4 cards) : évite la rangée
   orpheline 3+1 entre ~1016 et ~1335px et les 4 colonnes étroites au-delà */
@media (min-width: 901px) {
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ✅ POLISH (06-2026) — variante 3 colonnes : 6 cards = 2 rangées pleines de 3
   (évite la rangée orpheline 4+2 de l'auto-fit à ~1366px) */
@media (min-width: 901px) {
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ✅ POLISH (06-2026) — figure d'intro en bandeau : l'image s'aligne sur toute la
   largeur de la colonne texte (fin des zones mortes à droite des portraits) */
.media-banner { margin: 0 0 1.8rem; }
.media-banner img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* Pillars : déjà 1-col en mobile, on resserre légèrement le padding */
@media (max-width: 600px) {
  .pillar { padding: clamp(34px, 7vw, 48px) clamp(20px, 5vw, 28px); }
  .pillar h3 { font-size: 1.35rem; }
}

/* Stats : compresser drastiquement sur mobile (4 stats x grand padding = ridicule) */
@media (max-width: 540px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px;
    margin: 2rem 0 1rem;
  }
  .stat {
    border-left: 0;
    border-top: 0;
    padding: 10px 4px;
    text-align: center;
  }
  .stat-number { font-size: clamp(1.9rem, 10vw, 2.4rem); }
  .stat-suffix { font-size: clamp(1.1rem, 6vw, 1.5rem); }
  .stat-label { font-size: .6rem; letter-spacing: .2em; margin-top: .5rem; }
}

/* Stats : 2x2 grid entre 540 et 900px (évite le 3+1 disgracieux) */
@media (min-width: 540px) and (max-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px);
  }
  .stat { border-left: 0; border-top: 1px solid var(--line-soft); padding: 26px 18px 8px; }
  .stat:nth-child(-n+2) { border-top: 0; padding-top: 0; }
}

/* Sur très petit écran, neutralise les <br> de titres forcés (wraps awkward) */
@media (max-width: 600px) {
  .bg-blush h2 br,
  .section h2 br,
  .grid h2 br,
  h2.max-780 br { display: none; }
}

/* CRITICAL : sur mobile, le subline "MÉDECINE VASCULAIRE & ESTHÉTIQUE" rendait le
   logo trop large (309px) ce qui poussait le burger HORS du viewport (411px sur 390).
   On masque le subline en dessous de 600px — l'icône IB + "Dr Isabelle Baste" suffisent. */
@media (max-width: 600px) {
  .nav-logo .subline { display: none; }
  .nav-logo { gap: 10px; }
  .nav-logo img { height: 36px; }
  .nav-logo > span { font-size: 1.05rem; line-height: 1.1; }
}
@media (max-width: 400px) {
  .nav-logo > span { font-size: .95rem; }
}

/* ── iOS Safari bullet-proof — burger menu mobile ───────────────
   Sur iPhone 13 réel, le burger sortait du cadre même avec flex-shrink fix.
   On force ici une contrainte de largeur absolue sur le logo pour qu'il ne
   pousse JAMAIS le burger hors cadre, quoi qu'il arrive (cache, font rendering,
   différences de calcul de largeur entre Chrome emulation et Safari iOS). */
@media (max-width: 1199px) {
  .nav-toggle {
    flex: 0 0 34px !important;
    flex-shrink: 0 !important;
    width: 34px !important;
    margin-left: auto;
  }
  .nav-logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 60px);
    overflow: hidden;
  }
  .nav-logo > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* Menu déroulant : !important pour battre toute cascade contraire */
  .nav-menu.open {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px); /* mobile : suit la barre d'outils du navigateur */
    overflow-y: auto;
    box-sizing: border-box;
  }
}

/* Safe-area-inset pour iPhone notch / Dynamic Island */
@supports (padding: env(safe-area-inset-left)) {
  .nav {
    padding-left: max(env(safe-area-inset-left), 20px);
    padding-right: max(env(safe-area-inset-right), 20px);
  }
}

/* Mega-menu mobile : les colonnes empilent avec un peu plus d'air et un séparateur */
@media (max-width: 1199px) {
  /* CRITICAL : .nav-menu base a "height: 100%" qui contraignait le menu ouvert à 74px,
     ne laissant qu'un seul item visible. On force height: auto pour laisser le menu
     prendre la place de son contenu (capé par max-height: calc(100vh - 74px)). */
  .nav-menu.open {
    height: auto;
    min-height: 0;
  }
  .nav-menu.open .megamenu .col + .col {
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
  }
  .nav-menu.open .megamenu .col > h5 {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }
  /* améliore la prise tactile sur les liens de dropdown */
  .nav-menu.open .megamenu .col a,
  .nav-menu.open .dropdown a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Buttons mobile : un poil moins de letter-spacing pour éviter la coupe */
@media (max-width: 420px) {
  .btn { padding: 13px 24px; font-size: .72rem; letter-spacing: .18em; }
}

/* Numbered-cards mobile : le padding horizontal fixe de 44px laissait ~235px
   de colonne de lecture sur un écran de 360px */
@media (max-width: 600px) {
  .numbered-card { padding: 36px 22px 30px; }
}

/* Footer mobile : alignement + spacing affiné */
@media (max-width: 560px) {
  .footer { padding: clamp(50px, 10vw, 80px) 0 32px; }
  .footer-grid { gap: 36px; margin-bottom: 44px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Page-head (pages intérieures) : titres légèrement plus compacts en mobile */
@media (max-width: 600px) {
  .page-head h1 { font-size: clamp(1.85rem, 7vw, 2.4rem); }
  .page-head.with-image h1 { font-size: clamp(2rem, 7.5vw, 2.6rem); }
  .page-head { padding: calc(74px + 26px) 0 32px; }
  .page-head.with-image { padding: calc(74px + 40px) 0 44px; }
}

/* Pull-quote mobile : moins de padding pour respirer */
@media (max-width: 600px) {
  .pullquote { padding: clamp(40px, 10vw, 60px) clamp(18px, 6vw, 40px); }
  .pullquote p { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
}

/* Split-image vertical : aspect moins étroit dès que la grille est empilée.
   900px (et non 700) : la grille .grid-5-7/.grid-7-5 collapse à 900px — entre 701
   et 900px l'image portrait 4/5 occupait quasi tout l'écran d'une tablette. */
@media (max-width: 900px) {
  .split-image { aspect-ratio: 4/3; }
  .split-image.fill { min-height: 320px; }
}

/* Tags : meilleur confort tactile (hauteur min ~44px Apple HIG) */
.tag { padding: 8px 16px; line-height: 1.7; }

/* Focus visible (a11y) : anneau gold subtil sur tout focus clavier */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On retire l'outline natif sur clic souris */
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================
   ✦ SIGNATURE (06-2026) — « édition couture »
   Direction artistique renforcée, 100 % CSS, contenu intact.
   Principes : aucune animation permanente (fluidité du scroll
   préservée), interactions courtes en opacity/transform,
   motifs récurrents : hairline or · losange · passe-partout.
   ========================================================== */

/* ── 0. Fondations ───────────────────────────────────────── */
::selection { background: var(--rose); color: #fff; }
h1, h2, h3, .title-split { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
h1, .title-split { letter-spacing: -.012em; }
h2 { letter-spacing: -.006em; }

/* ── 1. Le motif : losange or ────────────────────────────────
   Repris du hero — il précède désormais chaque eyebrow et
   structure le footer. Une signature, partout la même. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  margin-right: 11px;
  vertical-align: 2px;
  opacity: .85;
}
.hero-cover .eyebrow::before { display: none; } /* l'ornement y vit déjà */

/* ── 2. Passe-partout muséal ─────────────────────────────────
   Chaque photographie éditoriale est montée comme une œuvre :
   marie-louise blanche, filet or, ombre portée douce.
   (box-sizing border-box : la mise en page ne bouge pas d'1px) */
main figure > img {
  background: #fff;
  padding: clamp(6px, .8vw, 10px);
  border: 1px solid rgba(184, 153, 104, .42);
  box-shadow: 0 18px 44px rgba(31, 28, 26, .09);
}

/* Les images pleines (split / cartes / galerie) reçoivent le
   filet intérieur — gravure discrète plutôt que cadre. */
.split-image { position: relative; }
.split-image::after,
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .45);
  pointer-events: none;
}
.gallery-item { position: relative; }
.card .card-image::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0);
  transition: border-color .45s ease, inset .45s ease;
  pointer-events: none;
  z-index: 1;
}
.card:hover .card-image::after { border-color: rgba(255, 255, 255, .65); inset: 8px; }

/* ── 3. Hero d'accueil : cadre intérieur de couverture ────── */
@media (min-width: 700px) {
  .hero-video::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, .28);
    z-index: 2;
    pointer-events: none;
  }
}

/* ── 4. Typographie éditoriale ───────────────────────────── */
h2 { font-size: clamp(2.1rem, 3.9vw, 3.35rem); }
.lead { font-size: 1.18rem; }
.pullquote p { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.pullquote cite {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.pullquote cite::before,
.pullquote cite::after {
  content: "";
  width: 30px; height: 1px;
  background: var(--gold);
  opacity: .6;
}

/* ── 5. Grain photographique sur les sections sombres ─────── */
.bg-ink, .section-dark, .footer { position: relative; }
.bg-ink::before, .section-dark::before, .footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
  pointer-events: none;
}
.bg-ink > *, .section-dark > *, .footer > * { position: relative; }

/* ── 6. Boutons : balayage d'encre ───────────────────────────
   Le fond se remplit de gauche à droite — geste signature des
   maisons de couture. Court (.45s), purement GPU. */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .3s ease .08s, border-color .35s ease,
              transform .3s ease, box-shadow .35s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.btn:hover { background: transparent; color: var(--ivory); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(31, 28, 26, .14); }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(0); }

.btn-dark::before { background: var(--ivory); }
.btn-dark:hover { background: var(--ink); color: var(--ink); border-color: var(--ink); }

.btn-light::before { background: #fff; }
.btn-light:hover { background: transparent; color: var(--ink); }

.btn-gold::before { background: var(--gold); }
.btn-gold:hover { background: transparent; color: #fff; border-color: var(--gold); }

.btn-rose::before { background: var(--rose-deep); }
.btn-rose:hover { background: var(--rose); color: #fff; border-color: var(--rose-deep); }

/* ── 7. Transitions de pages (fondu bref) + entrées en scène ── */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .3s ease both; }
.nav { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation-duration: .22s; }

@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } }
.hero-cover .container > *,
.page-head .container > *,
.hero-content > * {
  animation: riseIn .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--stagger, 0) * 90ms);
}
.hero-cover .container > *:nth-child(2),
.page-head .container > *:nth-child(2),
.hero-content > *:nth-child(2) { --stagger: 1; }
.hero-cover .container > *:nth-child(3),
.page-head .container > *:nth-child(3),
.hero-content > *:nth-child(3) { --stagger: 2; }
.hero-cover .container > *:nth-child(4),
.page-head .container > *:nth-child(4),
.hero-content > *:nth-child(4) { --stagger: 3; }
.hero-cover .container > *:nth-child(n+5),
.page-head .container > *:nth-child(n+5),
.hero-content > *:nth-child(n+5) { --stagger: 4; }

/* ── 8. Reveals : plus brefs, cascade serrée (sensation vive) ── */
.reveal {
  transform: translateY(20px);
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}
:is(.grid, .card-grid, .pillars, .gallery, .steps-list) > .reveal:nth-child(2) { transition-delay: .07s; }
:is(.grid, .card-grid, .pillars, .gallery, .steps-list) > .reveal:nth-child(3) { transition-delay: .14s; }
:is(.grid, .card-grid, .pillars, .gallery, .steps-list) > .reveal:nth-child(4) { transition-delay: .21s; }
:is(.grid, .card-grid, .pillars, .gallery, .steps-list) > .reveal:nth-child(n+5) { transition-delay: .28s; }

/* ── 9. Navigation : souligné or, menus en fondu bref ──────── */
@media (min-width: 1200px) {
  .nav-menu > li > a { position: relative; }
  .nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: 5px; right: 5px; bottom: 23px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
  }
  .nav-menu > li > a:hover::after { transform: scaleX(1); transform-origin: left; }

  .dropdown, .megamenu {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear .22s;
  }
  .dropdown { display: block; transform: translateY(8px); }
  .megamenu { display: grid; transform: translateX(-50%) translateY(8px); }
  .has-dropdown:hover > .dropdown,
  .has-dropdown.open > .dropdown {
    pointer-events: auto; opacity: 1; visibility: visible;
    transform: translateY(0); transition-delay: 0s;
  }
  .has-dropdown:hover > .megamenu,
  .has-dropdown.open > .megamenu {
    pointer-events: auto; opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0); transition-delay: 0s;
  }
}

/* ── 10. Footer : colophon de maison ─────────────────────── */
.footer { border-top: 1px solid rgba(184, 153, 104, .5); }
.footer .brand { font-size: 1.9rem; font-style: italic; }
.footer h3 {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 18px;
}
.footer h3::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--gold-soft);
  transform: rotate(45deg);
  margin-right: 10px;
  vertical-align: 2px;
}
.footer ul a { display: inline-block; transition: color .3s ease, transform .3s ease; }
.footer ul a:hover { transform: translateX(4px); color: var(--gold-soft); }
.footer-bottom { letter-spacing: .04em; }

/* ── 11. Micro-interactions restantes ────────────────────── */
.card { transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
.card:hover { border-color: rgba(184, 153, 104, .5); }
.tag { transition: background .3s ease, color .3s ease; }
a.tag:hover { background: var(--rose-deep); color: #fff; }
.faq-q { transition: color .3s ease; }
.faq-item:not(.open) .faq-q:hover { color: var(--rose-deep); }
.breadcrumb a { transition: color .3s ease; }
.gallery-item { transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .4s ease; }
.gallery-item:hover { transform: scale(1.02); opacity: 1; }
.info-panel { box-shadow: 0 24px 60px rgba(184, 146, 138, .14); }