/* =========================================================================
   Grande Pharmacie Terre de Seine — site.css
   Styles applicatifs étendant theme.css. Reprend la grammaire visuelle du
   cabinet dentaire de Pacy-sur-Eure (Phase 1), remappée en émeraude.
   ========================================================================= */

/* ---------- Reset & base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--hero-bg);
  overflow-x: hidden;
  scroll-behavior: auto;
  scroll-padding-top: var(--anchor-offset);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html.anchor-scroll-ready { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #ffffff 0, var(--bg) 260px, var(--bg-soft) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

body.modal-open { overflow: hidden; }

main, header, footer { position: relative; }
main { background-color: var(--bg); }

img, picture { display: block; }
img { max-width: 100%; height: auto; }

iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
input, select, textarea, button { -webkit-appearance: none; appearance: none; }

::selection { background: rgba(6, 78, 59, 0.16); color: var(--ink); }

[hidden] { display: none !important; }
[id] { scroll-margin-top: var(--anchor-offset); }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}
p, li, address, label { overflow-wrap: break-word; }
strong, b { font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Layout & sections ------------------------------------------- */
.container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  margin-inline: auto;
}
.narrow {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container-narrow));
  margin-inline: auto;
}
.section {
  padding: var(--section-space) 0;
  background-color: var(--bg);
}
.section + .section { border-top: 1px solid var(--line); }

.section-tint  { background-color: var(--surface-muted); }
.section-dark  { background-color: var(--hero-bg); }
.section-dark *,
.section-dark .section-kicker,
.section-dark .display-title,
.section-dark .section-title,
.section-dark .section-intro,
.section-dark h2, .section-dark h3, .section-dark p { color: var(--inverse); }

/* Titres et eyebrows */
.eyebrow,
.section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-title {
  max-width: 720px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-bottom: 0;
}
.display-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 0;
}
.section-intro {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.7;
}
.section-dark .section-intro { color: rgba(255, 255, 255, 0.80); }

.section-dark .button-primary,
.section-dark .button-primary *,
.section-dark .button-secondary,
.section-dark .button-secondary * { color: var(--ink); }

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .split-heading {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 32px;
  }
}

/* ---------- Boutons ------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 0.86rem 1.40rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
  cursor: pointer;
}
.button:hover, .button:focus-visible { transform: translateY(-1px); }
.button[disabled], .button[aria-busy="true"] { cursor: wait; transform: none; opacity: 0.82; }

.button-primary {
  color: var(--inverse);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 10px 22px rgba(6, 78, 59, 0.22);
}
.button-primary:hover, .button-primary:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.button-secondary {
  color: var(--ink);
  background: #ffffff;
  border-color: rgba(6, 78, 59, 0.22);
}
.button-secondary:hover, .button-secondary:focus-visible {
  border-color: var(--ink);
  box-shadow: 0 10px 22px rgba(6, 78, 59, 0.10);
}

.button-ghost {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  padding-inline: 0.6rem;
}
.button-ghost:hover { background: var(--surface-tint); }

.button-small {
  min-height: 42px;
  padding: 0.62rem 1rem;
  font-size: 0.92rem;
}

/* Sur le hero (fond sombre) */
.hero .button-primary {
  background: var(--inverse);
  color: var(--ink);
  border-color: var(--inverse);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20);
}
.hero .button-primary:hover, .hero .button-primary:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--ink);
}
.hero .button-secondary {
  color: var(--inverse);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.34);
}
.hero .button-secondary:hover, .hero .button-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.60);
}

/* Icônes */
.icon {
  display: block;
  width: var(--icon-size, 1.2rem);
  height: var(--icon-size, 1.2rem);
  flex: 0 0 auto;
}

/* Liens */
.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  font-weight: 600;
}
.text-link:hover { color: var(--accent-strong); }

/* Focus visible accessible */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.button:focus-visible { outline-offset: 4px; }

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--header-height);
  padding-top: var(--safe-area-top);
  background-color: rgba(248, 250, 249, 0.92);
  border-bottom: 1px solid rgba(6, 78, 59, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}

/* Hero overlap : on tire le hero sous le header pour l'effet d'image plein cadre.
   On compense aussi le 1px de border-bottom du header (box-sizing border-box) pour
   éviter une fine bande du fond <body> visible tout en haut. */
.js .home-page .site-header {
  margin-bottom: calc((var(--header-height) + 1px) * -1);
}

/* Header transparent par défaut sur la home tant que le hero est visible.
   Le hero étant sur fond cream/clair, on garde les couleurs sombres habituelles
   et on retire seulement le fond / bordure / ombre du header. */
.js .home-page:not(.header-solid):not(.nav-open) .site-header {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header-inner {
  min-height: var(--header-content-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ink);
}
.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  color: var(--ink);
  border-radius: 50%;
  object-fit: cover;
  background: #f5f1e6;
  box-shadow: 0 1px 2px rgba(6, 78, 59, 0.10);
}
.brand-text {
  display: grid;
  gap: 1px;
  line-height: 1.1;
}
.brand-text .brand-line-1 {
  color: var(--accent);
  font-family: "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand-text .brand-line-2 {
  color: var(--ink);
  font-family: "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Cursive brand prefix ("la") + script first letter ("P") */
.brand-prefix {
  font-family: "Italianno", "Snell Roundhand", "Apple Chancery", cursive;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
  display: inline-block;
  vertical-align: baseline;
}
.brand-script-letter {
  font-family: "Italianno", "Snell Roundhand", "Apple Chancery", cursive;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
  display: inline-block;
  vertical-align: baseline;
}

/* Header brand : prefix small + cursive P proportional to the kicker */
.brand-text .brand-line-1 .brand-prefix {
  font-size: 1.6em;
  line-height: 1;
  margin-right: 0.15em;
  color: var(--ink);
  vertical-align: baseline;
  transform: none;
}
.brand-text .brand-line-1 .brand-script-letter {
  font-size: 1.7em;
  line-height: 1;
  margin-right: -0.05em;
  color: var(--ink);
  vertical-align: baseline;
  transform: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition: color 160ms ease, background-color 160ms ease;
}
.site-nav a:not(.button):hover,
.site-nav a:not(.button):focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--surface-tint);
}
.site-nav .nav-cta {
  margin-left: 6px;
}

/* Groupe de liens icône-seule (horaires, contact, instagram, e-mail) */
.site-nav .nav-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Liens icône-seule dans la nav (ex. Instagram) */
.site-nav a.icon-link {
  width: 40px;
  padding: 0;
  justify-content: center;
}
.site-nav a.icon-link .icon {
  width: 20px;
  height: 20px;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.nav-toggle:focus-visible { outline-offset: 2px; }
.nav-toggle .icon-bar {
  display: block;
  width: 22px; height: 2px;
  margin: 4px auto;
  background: currentColor;
  border-radius: 1px;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 20px;
    background: rgba(248, 250, 249, 0.98);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease, visibility 180ms ease;
  }
  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .site-nav a:not(.button) {
    width: 100%;
    min-height: 48px;
    padding: 8px 14px;
  }
  .site-nav .nav-icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 10px 0 4px;
    border-top: 1px solid var(--line);
    margin-top: 8px;
  }
  .site-nav .nav-icons a.icon-link {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .site-nav .nav-cta {
    margin: 8px 0 0;
    width: 100%;
  }
}

/* ---------- Hero --------------------------------------------------------- */
.hero {
  position: relative;
  padding: 0;
  isolation: isolate;
  background: var(--hero-bg);
  overflow: hidden;
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 620px;
  min-height: max(620px, calc(100svh - var(--header-height)));
  padding:
    clamp(48px, 7vh, 80px)
    max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)))
    clamp(96px, 12vh, 140px);
  text-align: center;
}

/* Sur la home, le header recouvre le hero — on compense par du padding-top */
.js .home-page .hero-grid {
  padding-top: calc(var(--header-content-height) + clamp(48px, 7vh, 80px));
  padding-top: calc(var(--header-content-height) + clamp(48px, 7svh, 80px));
  margin-top: var(--safe-area-top);
}

/* ---- Hero warm cream + sprigs d'olivier en coins ---------------------- */
.hero.hero-warm {
  background:
    radial-gradient(120% 80% at 50% 0%, #fbf6ea 0%, #f5efe0 55%, #ebe2cf 100%);
}
/* Subtil voile bas pour transition avec la section info-banner */
.hero.hero-warm .hero-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(235, 226, 207, 0.85) 0%, rgba(235, 226, 207, 0) 18%) bottom / 100% 60px no-repeat;
  pointer-events: none;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Quatre brins d'olivier aux coins, chacun orienté vers le centre */
.hero-corner {
  position: absolute;
  width: clamp(140px, 22vw, 280px);
  height: auto;
  opacity: 0.85;
}
.hero-corner-tl { top: clamp(8px, 1.5vh, 24px); left: clamp(8px, 1.5vw, 24px); transform: scaleY(-1); }
.hero-corner-tr { top: clamp(8px, 1.5vh, 24px); right: clamp(8px, 1.5vw, 24px); transform: scale(-1, -1); }
.hero-corner-bl { bottom: clamp(8px, 1.5vh, 24px); left: clamp(8px, 1.5vw, 24px); transform: none; }
.hero-corner-br { bottom: clamp(8px, 1.5vh, 24px); right: clamp(8px, 1.5vw, 24px); transform: scaleX(-1); }

/* Texte sombre sur fond clair */
.hero.hero-warm .hero-copy { color: var(--accent-strong); }
.hero.hero-warm .eyebrow {
  background: rgba(6, 78, 59, 0.06);
  border-color: rgba(6, 78, 59, 0.18);
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Wordmark horizontal : badge logo + bloc texte */
.hero.hero-warm .hero-wordmark {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
}
.hero.hero-warm .hero-wordmark-text {
  display: grid;
  gap: 6px;
  justify-items: stretch;
  text-align: left;
}
.hero.hero-warm .hero-badge {
  width: clamp(72px, 9vw, 96px);
  height: clamp(72px, 9vw, 96px);
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: #f5f1e6;
  box-shadow:
    0 6px 18px rgba(2, 44, 34, 0.14),
    0 0 0 4px #ffffff,
    0 0 0 5px rgba(6, 78, 59, 0.14);
  image-rendering: -webkit-optimize-contrast;
}
/* Brand-name : typo du logo (Cinzel) avec ses deux poids et son tracking,
   sauf le "la" et le "P" qui restent en cursive Italianno */
.hero.hero-warm .hero-wordmark .brand-name {
  display: grid;
  gap: 4px;
  font-family: "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
  color: var(--accent-strong);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero.hero-warm .hero-wordmark .brand-name .brand-line-a {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.hero.hero-warm .hero-wordmark .brand-name .brand-line-b {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
}
.hero.hero-warm .hero-wordmark .brand-name .brand-prefix,
.hero.hero-warm .hero-wordmark .brand-name .brand-script-letter {
  color: var(--accent);
  font-family: "Italianno", "Snell Roundhand", "Apple Chancery", cursive;
  text-transform: none;
  letter-spacing: 0;
}
/* Le P cursif garde sa présence : multiplicateur relatif au line-a */
.hero.hero-warm .hero-wordmark .brand-name .brand-script-letter {
  font-size: 2.6em;
  line-height: 1;
  margin-right: -0.02em;
  transform: none;
  vertical-align: baseline;
}
.hero.hero-warm .hero-wordmark .brand-name .brand-prefix {
  font-size: 1.5em;
  line-height: 1;
  margin-right: 0.1em;
  transform: none;
  vertical-align: baseline;
}
.hero.hero-warm .hero-wordmark .baseline {
  color: var(--accent);
  font-family: "Italianno", "Snell Roundhand", "Apple Chancery", cursive;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  text-align: center;
}

/* Lead + trust list adaptés au fond clair */
.hero.hero-warm .hero-lead {
  color: var(--text-muted);
}
.hero.hero-warm .hero-trust-list li {
  background: rgba(6, 78, 59, 0.06);
  border-color: rgba(6, 78, 59, 0.16);
  color: var(--accent);
}

/* Boutons : on revient aux versions standard (plein vert + outlined vert) */
.hero.hero-warm .button-primary {
  color: var(--inverse);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 10px 22px rgba(6, 78, 59, 0.22);
}
.hero.hero-warm .button-primary:hover,
.hero.hero-warm .button-primary:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--inverse);
}
.hero.hero-warm .button-secondary {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.hero.hero-warm .button-secondary:hover,
.hero.hero-warm .button-secondary:focus-visible {
  background: var(--surface-tint);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

/* ---- Hero photo : photo de l'officine + filtre vert ---------------------- *
 * Surcharge ciblée de .hero-warm pour rester lisible sur fond foncé/verdi.
 * On garde toute la grammaire typographique de hero-warm, on inverse juste
 * les couleurs portées par le texte et les chips.                            */
.hero.hero-warm.hero-photo {
  background: #022C22;
}
.hero.hero-warm.hero-photo .hero-grid::after { display: none; }

.hero.hero-warm.hero-photo .hero-copy,
.hero.hero-warm.hero-photo .hero-wordmark .brand-name,
.hero.hero-warm.hero-photo .hero-wordmark .brand-name .brand-line-a,
.hero.hero-warm.hero-photo .hero-wordmark .brand-name .brand-line-b,
.hero.hero-warm.hero-photo .hero-wordmark .brand-name .brand-prefix,
.hero.hero-warm.hero-photo .hero-wordmark .brand-name .brand-script-letter,
.hero.hero-warm.hero-photo .hero-wordmark .baseline {
  color: var(--inverse);
  text-shadow:
    0 2px 6px rgba(2, 44, 34, 0.75),
    0 0 18px rgba(2, 44, 34, 0.55);
}
.hero.hero-warm.hero-photo .hero-lead {
  color: #eaf3ee;
  text-shadow:
    0 2px 6px rgba(2, 44, 34, 0.8),
    0 0 16px rgba(2, 44, 34, 0.6);
}
.hero.hero-warm.hero-photo .eyebrow {
  background: rgba(253, 246, 227, 0.12);
  border-color: rgba(253, 246, 227, 0.28);
  color: #fdf6e3;
}
.hero.hero-warm.hero-photo .hero-trust-list li {
  background: rgba(253, 246, 227, 0.10);
  border-color: rgba(253, 246, 227, 0.24);
  color: #fdf6e3;
}
/* Boutons : version claire pour contraster avec le fond photo verdi */
.hero.hero-warm.hero-photo .button-primary {
  background: #fdf6e3;
  border-color: #fdf6e3;
  color: var(--accent-strong);
  box-shadow: 0 12px 28px rgba(2, 44, 34, 0.35);
}
.hero.hero-warm.hero-photo .button-primary:hover,
.hero.hero-warm.hero-photo .button-primary:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--accent-strong);
}
.hero.hero-warm.hero-photo .button-secondary {
  background: transparent;
  border-color: rgba(253, 246, 227, 0.65);
  color: #fdf6e3;
}
.hero.hero-warm.hero-photo .button-secondary:hover,
.hero.hero-warm.hero-photo .button-secondary:focus-visible {
  background: rgba(253, 246, 227, 0.10);
  border-color: #fdf6e3;
  color: #fdf6e3;
}
/* Badge logo : anneau lumineux pour le détacher de la photo */
.hero.hero-warm.hero-photo .hero-badge {
  background: #ffffff;
  box-shadow:
    0 10px 24px rgba(2, 44, 34, 0.45),
    0 0 0 4px #ffffff,
    0 0 0 5px rgba(253, 246, 227, 0.35);
}

/* Empilage vertical sur mobile pour le wordmark */
@media (max-width: 540px) {
  .hero.hero-warm .hero-wordmark {
    flex-direction: column;
    gap: 14px;
  }
  .hero.hero-warm .hero-wordmark-text {
    justify-items: center;
    text-align: center;
  }
  .hero-corner { width: clamp(90px, 30vw, 140px); }
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  max-width: 900px;
  color: rgba(255, 255, 255, 0.92);
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--inverse);
}
.hero-wordmark { display: grid; gap: 8px; justify-items: center; margin-top: 28px; }
.hero-wordmark .brand-name {
  color: var(--inverse);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.hero-wordmark .brand-name .brand-prefix {
  font-size: 0.85em;
  line-height: 0.9;
  margin-right: 0.05em;
  color: var(--inverse);
  transform: translateY(0.05em);
}
.hero-wordmark .brand-name .brand-script-letter {
  font-size: 2.1em;
  line-height: 0.78;
  margin-right: -0.04em;
  color: var(--inverse);
  transform: translateY(0.22em);
}
.hero-wordmark .baseline {
  color: rgba(255, 255, 255, 0.80);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-lead {
  margin: 22px auto 0;
  max-width: 680px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.08rem;
  line-height: 1.7;
  text-wrap: balance;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.hero-trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 26px 0 0;
  list-style: none;
}
.hero-trust-list li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- Info banner -------------------------------------------------- */
.info-banner-wrap {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background-color: var(--bg);
}
.info-banner-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -72px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, transparent 100%);
  transform: translateX(-50%);
}
.info-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.info-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-tint);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.info-banner-message {
  color: var(--text);
  font-size: 0.96rem;
}
@media (max-width: 600px) {
  .info-banner {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------- Services rapides (pictos en grille) -------------------------- */
.quick-services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 900px) { .quick-services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .quick-services { grid-template-columns: 1fr; } }

.quick-service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  text-decoration: none;
  color: inherit;
}
.quick-service:hover {
  transform: translateY(-3px);
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-card);
}
.quick-service .pictogram {
  display: inline-flex;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--surface-tint);
  border-radius: 12px;
  color: var(--ink);
}
.quick-service .pictogram svg { width: 24px; height: 24px; }
.quick-service h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}
.quick-service p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* ---------- Cartes équipe ------------------------------------------------ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.team-card .silhouette {
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.team-card .silhouette svg { width: 56px; height: 56px; }
.team-card .role {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px 10px;
  background: var(--surface-tint);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: center;
  text-align: center;
}
.team-card .name {
  margin: 18px 0 16px;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  align-self: stretch;
}
.team-card .summary {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.96rem;
  text-align: center;
}

/* ---------- Spécialités (liste de domaines) ----------------------------- */
.specialty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}
@media (max-width: 900px) { .specialty-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .specialty-grid { grid-template-columns: 1fr; } }

.specialty-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.specialty-card:hover {
  border-color: var(--accent-soft);
  background: var(--surface-tint);
  transform: translateY(-2px);
}
.specialty-card .bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--ink);
  flex: 0 0 auto;
}
.specialty-card .bullet svg { width: 20px; height: 20px; }
.specialty-card h3 {
  margin: 0 0 2px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}
.specialty-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ---------- Schedule / Hours -------------------------------------------- */
.schedule-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 900px) { .schedule-grid { grid-template-columns: 1fr; } }

.schedule-card,
.access-card {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.schedule-card h3,
.access-card h3 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
}
.schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.schedule-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
}
.schedule-list li:last-child { border-bottom: 0; }
.schedule-list .day { color: var(--text); font-weight: 600; }
.schedule-list .hours { color: var(--text-muted); }
.schedule-list .closed { color: var(--text-soft); font-style: italic; }
.schedule-list li.today {
  background: var(--surface-tint);
  margin: 0 -10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border-bottom-color: transparent;
}
.schedule-list li.today + li { border-top: 1px solid var(--line); }

.access-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 12px;
}
.access-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text);
  font-size: 0.96rem;
}
.access-list svg {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent);
}
.access-list strong { display: block; color: var(--ink); margin-bottom: 2px; font-size: 0.95rem; }

.map-card {
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  background: var(--surface);
}
.map-card iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 360px;
  filter: grayscale(0.18) saturate(0.86) contrast(1.02);
}
.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  min-height: 360px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.06), rgba(16, 185, 129, 0.10)),
    var(--surface-muted);
  color: var(--text-muted);
  text-align: center;
}
.map-placeholder svg { width: 40px; height: 40px; color: var(--accent); }

/* ---------- Garde / urgences -------------------------------------------- */
.duty-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  background: var(--surface-tint);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
}
.duty-callout h3 { margin: 0 0 6px; color: var(--ink); font-size: 1.25rem; }
.duty-callout p { margin: 0; color: var(--text-muted); }
.duty-callout .actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 700px) { .duty-callout { grid-template-columns: 1fr; } }

.emergency-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
@media (max-width: 700px) { .emergency-grid { grid-template-columns: repeat(2, 1fr); } }

.emergency-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.emergency-tile .num {
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.emergency-tile .label {
  color: var(--text-muted);
  font-size: 0.86rem;
}

/* ---------- Contact (section dark) -------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.contact-grid > .contact-card:nth-child(1),
.contact-grid > .contact-card:nth-child(2) { grid-column: span 3; }
.contact-grid > .contact-card:nth-child(n+3) { grid-column: span 2; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid > .contact-card,
  .contact-grid > .contact-card:nth-child(1),
  .contact-grid > .contact-card:nth-child(2),
  .contact-grid > .contact-card:nth-child(n+3) { grid-column: auto; }
  .contact-grid > .contact-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid > .contact-card:last-child { grid-column: auto; }
}

.contact-card {
  padding: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  text-align: center;
}
.contact-card h3 {
  margin: 0 0 10px;
  color: var(--inverse);
  font-size: 1.15rem;
  font-weight: 700;
}
.contact-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.96rem;
}
.contact-card p + p { margin-top: 6px; }
.contact-card a {
  color: var(--inverse);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.contact-card a[href^="mailto:"],
.contact-card a[href^="tel:"] {
  white-space: nowrap;
}

/* ---------- Footer ------------------------------------------------------- */
.site-footer {
  padding: 48px 0 32px;
  background: #ffffff;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.footer-brand .footer-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #f5f1e6;
  box-shadow: 0 1px 2px rgba(6, 78, 59, 0.10);
  margin-bottom: 4px;
}
.footer-brand .footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.footer-brand .footer-social svg {
  width: 18px;
  height: 18px;
}
.footer-brand .footer-social:hover,
.footer-brand .footer-social:focus-visible {
  color: var(--accent);
  background: var(--surface-tint);
  border-color: var(--accent-soft);
}
.footer-brand .brand-line-1 {
  color: var(--accent);
  font-family: "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-brand .brand-line-1 .brand-prefix {
  font-size: 1.6em;
  line-height: 1;
  margin-right: 0.15em;
  color: var(--ink);
  vertical-align: baseline;
  transform: none;
}
.footer-brand .brand-line-1 .brand-script-letter {
  font-size: 1.7em;
  line-height: 1;
  margin-right: -0.05em;
  color: var(--ink);
  vertical-align: baseline;
  transform: none;
}
.footer-brand .brand-line-2 {
  color: var(--ink);
  font-family: "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-brand address {
  font-style: normal;
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.footer-brand .order-number {
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.footer-col h4 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.footer-col a {
  color: var(--text-muted);
  font-size: 0.94rem;
  font-weight: 500;
  transition: color 160ms ease;
}
.footer-col a:hover, .footer-col a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.footer-institutions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.footer-institutions a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
}
.footer-institutions a:hover {
  background: var(--surface-tint);
  border-color: var(--accent-soft);
  color: var(--ink);
}

.footer-bottom {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: var(--text-soft);
  font-size: 0.86rem;
}
.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom nav a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Cookie banner (RGPD, parité visuelle) ----------------------- */
.cookie-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: min(calc(100% - 36px), 460px);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-card);
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease;
}
.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.cookie-banner p {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}
.cookie-actions {
  display: flex;
  gap: 8px;
}
.cookie-actions .button { flex: 1; }

/* ---------- Page intérieure (services, etc.) ---------------------------- */
.page-hero {
  position: relative;
  padding: 84px 0 56px;
  background: var(--hero-bg);
  color: var(--inverse);
  isolation: isolate;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.96), rgba(6, 78, 59, 0.78)),
    var(--hero-bg);
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(2, 44, 34, 0.55) 0%,
    rgba(2, 44, 34, 0.20) 60%,
    rgba(2, 44, 34, 0.04) 100%);
}
.page-hero .eyebrow {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--inverse);
}
.page-hero h1 {
  margin-top: 18px;
  color: var(--inverse);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  text-wrap: balance;
}
.page-hero p {
  margin-top: 16px;
  max-width: 680px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.48);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.88); text-decoration: underline; text-underline-offset: 0.22em; }
.breadcrumb a:hover { color: var(--inverse); }

/* Service category section */
.service-category {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 36px;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.service-category:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .service-category { grid-template-columns: 1fr; gap: 18px; padding: 40px 0; }
}
.service-category h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
}
.service-category .lead {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}
.service-list {
  display: grid;
  gap: 14px;
}
.service-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.service-item .pictogram {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-item .pictogram svg { width: 22px; height: 22px; }
.service-item h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}
.service-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}
.service-item .note {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Reveal animations ------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Hero full-screen photo (override hero-warm) ----------------- */
/* Le hero occupe désormais 100 % de la hauteur visible. Le header est
   transparent par-dessus tant que le hero est visible (logique JS existante
   via .header-solid sur <body>), puis redevient solide après défilement. */
.js .home-page .hero-grid {
  min-height: 100vh; /* repli pour les navigateurs sans unité svh */
  min-height: 100svh;
  padding-top: calc(var(--header-content-height) + clamp(48px, 7vh, 80px));
  padding-top: calc(var(--header-content-height) + clamp(48px, 7svh, 80px));
}

/* Illustration florale plein cadre (SVG inline) */
.hero .hero-flora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  background-color: var(--hero-bg);
}

/* Photo affichée nette, sans filtre coloré. */
.hero .hero-flora image {
  filter: none;
}

/* Voile dégradé neutre pour la lisibilité du texte clair sur la photo. */
.hero .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.25) 30%,
      rgba(0, 0, 0, 0.25) 60%,
      rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* Le contenu doit passer au-dessus de la photo + du voile */
.hero .hero-grid { z-index: 2; }

/* Sur photo, le fond crème et les brins d'olivier coin sont superflus */
.hero.hero-warm { background: var(--hero-bg); }
.hero.hero-warm .hero-grid::after { content: none; }
.hero.hero-warm .hero-corner { display: none; }

/* Inversion des couleurs du texte du hero pour rester lisible sur la photo */
.hero.hero-warm .hero-copy { color: var(--inverse); }
.hero.hero-warm .eyebrow {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--inverse);
}
.hero.hero-warm .hero-wordmark .brand-name { color: var(--inverse); }
.hero.hero-warm .hero-wordmark .brand-name .brand-line-a { color: rgba(255, 255, 255, 0.92); }
.hero.hero-warm .hero-wordmark .brand-name .brand-line-b { color: var(--inverse); }
.hero.hero-warm .hero-wordmark .brand-name .brand-prefix,
.hero.hero-warm .hero-wordmark .brand-name .brand-script-letter { color: rgba(255, 255, 255, 0.95); }
.hero.hero-warm .hero-wordmark .baseline { color: rgba(255, 255, 255, 0.88); }
.hero.hero-warm .hero-lead { color: rgba(255, 255, 255, 0.92); }
.hero.hero-warm .hero-trust-list li {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.30);
  color: var(--inverse);
}

/* Bouton secondaire : variante claire sur photo sombre */
.hero.hero-warm .button-secondary {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--inverse);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero.hero-warm .button-secondary:hover,
.hero.hero-warm .button-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--inverse);
  color: var(--inverse);
}

/* Bouton primaire : conserve le vert sombre, lisible sur la photo */
.hero.hero-warm .button-primary {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* ---------- Navbar transparente sur hero (avant défilement) ------------- */
/* Style aligné sur cabinetdentairepacysureure.fr : header complètement
   transparent tant que le hero est visible, textes et icônes en blanc,
   CTA téléphone en pill blanc plein avec texte sombre pour bien ressortir.
   Dès que JS pose .header-solid sur <body>, les couleurs d'origine reviennent. */

/* Logo + marque dans la navbar : masqués tant qu'on est sur le hero,
   apparaissent en fondu une fois passé le hero (.header-solid posée par JS).
   Le hero affiche déjà la grande version wordmark de la marque, donc inutile
   de la répéter dans la barre tant qu'elle est visible. */
.site-header .brand {
  transition: opacity 240ms ease, transform 240ms ease;
}
.js .home-page:not(.header-solid):not(.nav-open) .site-header .brand {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
}
.js .home-page:not(.header-solid):not(.nav-open) .site-header,
.js .home-page:not(.header-solid):not(.nav-open) .site-header .brand,
.js .home-page:not(.header-solid):not(.nav-open) .site-header .brand-text .brand-line-1,
.js .home-page:not(.header-solid):not(.nav-open) .site-header .brand-text .brand-line-2,
.js .home-page:not(.header-solid):not(.nav-open) .site-header .brand-text .brand-line-1 .brand-prefix,
.js .home-page:not(.header-solid):not(.nav-open) .site-header .brand-text .brand-line-1 .brand-script-letter {
  color: var(--inverse);
}
.js .home-page:not(.header-solid):not(.nav-open) .site-nav a:not(.button) {
  color: rgba(255, 255, 255, 0.84);
}
.js .home-page:not(.header-solid):not(.nav-open) .site-nav a:not(.button):hover,
.js .home-page:not(.header-solid):not(.nav-open) .site-nav a:not(.button):focus-visible,
.js .home-page:not(.header-solid):not(.nav-open) .site-nav a[aria-current="page"] {
  color: var(--inverse);
  background: rgba(255, 255, 255, 0.14);
}
/* Icône Instagram dans la nav : hover plus subtil sur fond sombre */
.js .home-page:not(.header-solid):not(.nav-open) .site-nav a.icon-link:hover,
.js .home-page:not(.header-solid):not(.nav-open) .site-nav a.icon-link:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}
/* CTA téléphone : pill blanc plein, texte vert sombre — pour ressortir
   nettement sur le hero, comme sur le site de référence. */
.js .home-page:not(.header-solid):not(.nav-open) .site-nav .nav-cta.button-primary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.js .home-page:not(.header-solid):not(.nav-open) .site-nav .nav-cta.button-primary:hover,
.js .home-page:not(.header-solid):not(.nav-open) .site-nav .nav-cta.button-primary:focus-visible {
  color: var(--ink);
  background: var(--inverse);
  border-color: var(--inverse);
}
/* Bouton burger mobile : variante claire en surimpression sur le hero */
.js .home-page:not(.header-solid):not(.nav-open) .nav-toggle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.36);
  color: var(--inverse);
}
.js .home-page:not(.header-solid):not(.nav-open) .nav-toggle .icon-bar {
  background: var(--inverse);
}

/* ---------- Section Instagram (aperçu / mock) ---------------------------- */
.instagram-mock-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
  padding: 12px 16px;
  background: var(--surface-tint);
  border: 1px dashed var(--accent-soft);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.instagram-mock-notice svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.instagram-mock-notice strong { color: var(--ink); }

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 900px) { .instagram-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.instagram-post {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-tint);
  color: var(--ink);
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  isolation: isolate;
}
.instagram-post:hover,
.instagram-post:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-card);
}

.instagram-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.instagram-media svg {
  width: 38%;
  height: 38%;
  opacity: 0.72;
  transition: transform 320ms ease, opacity 220ms ease;
}
.instagram-post:hover .instagram-media svg,
.instagram-post:focus-visible .instagram-media svg {
  transform: scale(1.06);
  opacity: 0.9;
}

.instagram-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Variantes de fonds des publications fictives — palette cohérente avec
   l'identité de l'officine (émeraude / sauge / crème). */
.instagram-media-emerald { background: linear-gradient(135deg, #065F46 0%, #022C22 100%); color: #ECFDF5; }
.instagram-media-emerald .instagram-tag { background: rgba(236, 253, 245, 0.92); color: var(--accent-strong); }
.instagram-media-tint    { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); }
.instagram-media-sage    { background: linear-gradient(135deg, #BDD1A8 0%, #7A9070 100%); color: #022C22; }
.instagram-media-cream   { background: linear-gradient(135deg, #FDF6E3 0%, #F4D8C0 100%); color: #92400E; }
.instagram-media-rose    { background: linear-gradient(135deg, #FCE7E4 0%, #F1B7AE 100%); color: #9B2C2C; }
.instagram-media-gold    { background: linear-gradient(135deg, #FBE6C2 0%, #E9B14A 100%); color: #92400E; }

.instagram-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 14px 12px;
  background: linear-gradient(to top, rgba(2, 44, 34, 0.92) 0%, rgba(2, 44, 34, 0.55) 60%, rgba(2, 44, 34, 0) 100%);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.instagram-post:hover .instagram-overlay,
.instagram-post:focus-visible .instagram-overlay {
  opacity: 1;
  transform: translateY(0);
}
.instagram-overlay .caption {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  font-weight: 600;
}
.instagram-overlay .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.76rem;
  opacity: 0.92;
}
.instagram-overlay .meta span { white-space: nowrap; }

/* Sur tactile (pas de :hover fiable), on affiche l'overlay en permanence
   mais en version plus discrète, pour garder le contenu accessible. */
@media (hover: none) {
  .instagram-overlay {
    opacity: 1;
    transform: none;
    background: linear-gradient(to top, rgba(2, 44, 34, 0.88) 0%, rgba(2, 44, 34, 0.35) 55%, rgba(2, 44, 34, 0) 100%);
  }
  .instagram-overlay .meta { display: none; }
}

/* ---------- Utilitaires ------------------------------------------------- */
.text-center { text-align: center; }
.mt-32 { margin-top: 32px; }