/* ==========================================================================
   Espace Équilibre — design system
   Couleurs relevées dans le logo : bleus du E, ors du Ǝ et de l'arc.
   Cormorant Garamond (titres) + Montserrat (texte et capitales).
   ========================================================================== */

:root {
  /* Fonds */
  --paper: #fbf8f3;        /* Ivoire — fond principal */
  --cream: #f4ece0;        /* Or voile — section alternée */
  --sand: #f1eae0;         /* Sable — seconde teinte */
  --white: #fff;

  /* Bleus (le E du logo) */
  --copper: #0d7f9c;       /* Bleu Équilibre — accent principal */
  --copper-deep: #0b5a70;  /* Bleu Profond — texte et titres */
  --blue-light: #2a97b7;   /* Bleu Clair — survols, puces */
  --rose-soft: #e6f2f5;    /* Bleu Voile — encadrés */
  --teal: #0b5a70;
  --teal-deep: #0b5a70;    /* Bandeaux foncés */

  /* Ors (le Ǝ et l'arc) */
  --gold: #c0a47c;
  --gold-deep: #7e6a4c;    /* Surtitres, accents de texte */
  --gold-light: #e0cbb0;
  --rose: #c0a47c;         /* alias historique : filets et cadres */

  /* Encres */
  --ink: #2a2622;
  --ink-soft: #5a534b;
  --muted: #5a534b;
  --line: rgba(42, 38, 34, 0.14);

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --text-lg: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --text-h3: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  --text-h2: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  --text-h1: clamp(2.7rem, 1.6rem + 4.6vw, 5.4rem);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --container: 1240px;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-arch: 999px 999px 22px 22px;   /* l'arche */

  --shadow-soft: 0 1px 2px rgba(42, 38, 34, 0.05), 0 12px 32px -12px rgba(11, 90, 112, 0.16);
  --shadow-lift: 0 2px 4px rgba(42, 38, 34, 0.06), 0 28px 60px -20px rgba(11, 90, 112, 0.28);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 700ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
.section--cream { background: var(--cream); }
.section--sand { background: var(--sand); }
.section--teal { background: var(--teal-deep); color: var(--paper); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section--teal .eyebrow { color: var(--gold-light); }

.h1 { font-size: var(--text-h1); font-weight: 500; }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); }
.h1 em, .h2 em, .h3 em { color: var(--copper); font-weight: 500; }
.section--teal .h2 em { color: var(--gold-light); }
.lead { font-size: var(--text-lg); color: var(--ink-soft); line-height: 1.65; max-width: 38em; }
.muted { color: var(--muted); }

.section-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); max-width: 44rem; }
.section-head--split {
  max-width: none; grid-template-columns: 1fr; align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 50px; padding: 0.8rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; text-decoration: none;
  cursor: pointer; transition: transform 250ms var(--ease-out), background-color 250ms, box-shadow 250ms, color 250ms;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 250ms var(--ease-out); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--copper { --btn-bg: var(--copper); }
.btn--copper:hover { --btn-bg: var(--copper-deep); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { --btn-bg: var(--white); }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--teal-deep); }
.btn--light:hover { --btn-bg: var(--white); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--paper); border-color: rgba(251, 248, 244, 0.35); }
.btn--outline-light:hover { --btn-bg: rgba(251, 248, 244, 0.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--copper-deep);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 350ms var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { width: 16px; height: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 244, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms, box-shadow 300ms;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(42, 33, 29, 0.35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 78px; }

.brand { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.brand-mark { width: 46px; height: 46px; color: var(--copper); flex: none; }
.brand-text { display: grid; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; }
.brand-sub { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.nav-list { display: flex; align-items: center; gap: 0.3rem; }
.nav-link {
  position: relative; display: block; padding: 0.55rem 0.9rem;
  font-size: 0.93rem; font-weight: 500; text-decoration: none; color: var(--ink-soft);
  border-radius: 999px; transition: color 200ms, background-color 200ms;
}
.nav-link:hover { color: var(--ink); background: var(--sand); }
.nav-link[aria-current="page"] { color: var(--copper-deep); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: currentColor;
}
.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-phone {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem;
  font-weight: 600; font-size: 0.92rem; text-decoration: none; color: var(--ink);
  border-radius: 999px; transition: background-color 200ms;
}
.header-phone:hover { background: var(--sand); }
.header-phone svg { width: 17px; height: 17px; color: var(--copper); }
.header-actions .btn { min-height: 44px; padding: 0.6rem 1.2rem; font-size: 0.9rem; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); cursor: pointer; align-items: center; justify-content: center; color: var(--ink);
}
.nav-toggle-bars { position: relative; width: 18px; height: 12px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 300ms var(--ease-out), opacity 200ms;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5.25px; }
.nav-toggle-bars span:nth-child(3) { bottom: 0; }
.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 1080px) {
  .header-phone span { display: none; }
}
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .header-actions .btn { display: none; }
  .site-nav {
    position: fixed; inset: 78px 0 auto 0; z-index: 40;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.6rem;
    box-shadow: 0 30px 40px -30px rgba(42, 33, 29, 0.35);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 450ms var(--ease-out), visibility 0s linear 450ms;
  }
  .nav-open .site-nav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 450ms var(--ease-out); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { padding: 1rem 0.2rem; font-family: var(--font-display); font-size: 1.6rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav-link:hover { background: none; }
  .nav-link[aria-current="page"]::after { display: none; }
  .nav-cta { display: block; margin-top: 1.2rem; }
  .nav-cta .btn { width: 100%; }
}
@media (min-width: 961px) { .nav-cta { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(4rem, 3rem + 4vw, 7rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto auto; width: 58%; height: 100%;
  background: radial-gradient(120% 90% at 100% 0%, var(--rose-soft) 0%, rgba(241, 226, 218, 0) 65%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.08fr 0.92fr; } }
.hero-copy { display: grid; gap: 1.6rem; }
.hero-copy .h1 { max-width: 11ch; }
/* Les trois praticiennes, dès le premier écran. Sans elles, il fallait
   descendre de six écrans sur un téléphone avant de lire un seul nom ;
   chaque pastille mène à la pratique concernée, pas à une page « équipe ». */
/* Trois colonnes égales plutôt qu'une rangée libre : en flux, « Christelle
   Nicola-Avanthay » débordait et la troisième pastille retombait seule à la
   ligne. À un tiers de la colonne chacune, le nom long passe sur deux lignes
   et la rangée reste d'un bloc. */
.hero-people { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: 0.5rem; }
.hero-person {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  background: var(--white); border-radius: 999px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-soft);
  transition: transform 320ms var(--ease-out), box-shadow 320ms;
}
.hero-person img {
  width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--gold-light);
  transition: box-shadow 320ms;
}
.hero-person span { display: grid; gap: 0.12rem; }
.hero-person strong {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  line-height: 1.1; white-space: nowrap; color: var(--ink);
}
.hero-person small {
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  white-space: nowrap; color: var(--copper-deep); font-weight: 600;
}
.hero-person:hover, .hero-person:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hero-person:hover img, .hero-person:focus-visible img {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--copper);
}
/* Sous 560 px, « Christelle Nicola-Avanthay » ne tient pas à côté d'une voisine :
   les pastilles passent alors en pleine largeur, une par ligne. */
@media (max-width: 760px) { .hero-people { grid-template-columns: 1fr; gap: 0.5rem; } }

.hero-trust { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 0.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.hero-trust li { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--text-sm); color: var(--ink-soft); font-weight: 500; }
.hero-trust svg { width: 18px; height: 18px; color: var(--copper); }

.hero-visual { position: relative; padding: 0 0 2.5rem 2.5rem; max-width: 560px; justify-self: center; width: 100%; }
.hero-main {
  border-radius: var(--radius-arch); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lift);
}
.hero-main img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.hero-inset {
  position: absolute; left: 0; bottom: 0; width: 44%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 6px solid var(--paper); box-shadow: var(--shadow-lift);
}
.hero-inset img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute; right: -0.4rem; top: 12%;
  display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%;
  background: var(--teal-deep); color: var(--paper); text-align: center; box-shadow: var(--shadow-lift);
}
.hero-badge strong { display: block; font-family: var(--font-display); font-size: 2.1rem; font-weight: 500; line-height: 1; }
.hero-badge span { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 520px) {
  .hero-visual { padding: 0 0 1.8rem 1.4rem; }
  .hero-badge { width: 92px; height: 92px; right: 0; }
  .hero-badge strong { font-size: 1.6rem; }
}

/* Page hero (inner pages) */
.page-hero { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3rem, 2rem + 3vw, 5rem); background: var(--cream); overflow: hidden; }
.page-hero-grid { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 900px) { .page-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
.page-hero-grid > :first-child { display: grid; gap: 1.4rem; justify-items: start; }
.page-hero .h1 { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.6rem); }
.page-hero-media { border-radius: var(--radius-arch); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow-lift); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.breadcrumb { display: flex; gap: 0.5rem; font-size: var(--text-sm); color: var(--muted); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--copper-deep); }

/* ---------- Split / media text ---------- */
.split { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.media-stack { position: relative; padding-bottom: 3rem; }
.media-stack .media-a { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; }
.media-stack .media-a img { width: 100%; height: 100%; object-fit: cover; }
.media-stack .media-b {
  position: absolute; right: -0.5rem; bottom: 0; width: 46%; border-radius: var(--radius); overflow: hidden;
  border: 6px solid var(--paper); box-shadow: var(--shadow-lift); aspect-ratio: 1; background: var(--white);
}
.section--cream .media-stack .media-b { border-color: var(--cream); }
.media-stack .media-b img { width: 100%; height: 100%; object-fit: cover; }

.prose { display: grid; gap: 1.3rem; }
.prose p { color: var(--ink-soft); }
.pullquote {
  margin: 0.6rem 0; padding: 0.3rem 0 0.3rem 1.4rem; border-left: 2px solid var(--copper);
  font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); font-style: italic; line-height: 1.3; color: var(--ink);
}

/* ---------- Motifs (bento) ---------- */
.motifs { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .motifs { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; } }
@media (min-width: 1100px) { .motifs { grid-auto-rows: 240px; } }
.motif {
  position: relative; display: flex; align-items: flex-end; min-height: 190px;
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--white); isolation: isolate;
  background: var(--ink);
}
.motif img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--ease-out); }
.motif::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(19, 14, 12, 0) 30%, rgba(19, 14, 12, 0.35) 60%, rgba(19, 14, 12, 0.82) 100%);
  transition: background-color 400ms;
}
.motif:hover img { transform: scale(1.06); }
.motif:hover::after { background-color: rgba(127, 69, 39, 0.18); }
.motif-body { padding: 1.1rem 1.2rem; display: grid; gap: 0.2rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.motif-num { font-size: 0.7rem; letter-spacing: 0.18em; opacity: 0.8; }
.motif-title { font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.55rem); font-weight: 500; line-height: 1.12; }
@media (min-width: 720px) {
  .motif--wide { grid-column: span 2; }
  .motif--tall { grid-row: span 2; }
}
@media (max-width: 719px) {
  .motif--feature { grid-column: span 2; min-height: 240px; }
}
.motif--cta { background: var(--copper); color: var(--paper); }
.motif--cta::after { display: none; }
.motif--cta .motif-num { font-family: var(--font-display); font-size: 2.4rem; letter-spacing: 0; line-height: 1; }
.motif-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; }
.motif-link svg { width: 16px; height: 16px; transition: transform 300ms var(--ease-out); }
.motif--cta:hover { background: var(--copper-deep); }
.motif--cta:hover .motif-link svg { transform: translateX(4px); }

/* ---------- Pillars / generations ---------- */
.pillars { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
.pillar { padding: 1.4rem 0.2rem; border-bottom: 1px solid var(--line); display: grid; gap: 0.35rem; }
@media (min-width: 640px) { .pillar:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid var(--line); } .pillar:nth-child(even) { padding-left: 1.5rem; } }
.pillar h3 { font-size: 1.35rem; display: flex; align-items: baseline; gap: 0.7rem; }
.pillar h3 span { font-family: var(--font-body); font-size: 0.72rem; color: var(--copper); letter-spacing: 0.12em; }
.pillar p { font-size: var(--text-sm); color: var(--muted); margin: 0; }

/* ---------- Team cards ---------- */
.team { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .team { grid-template-columns: repeat(3, 1fr); } }
.person {
  display: grid; grid-template-rows: auto 1fr; background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 400ms var(--ease-out), box-shadow 400ms;
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.person-photo { aspect-ratio: 4 / 4.2; overflow: hidden; background: var(--rose-soft); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.person-monogram {
  display: grid; place-items: center; height: 100%;
  background: radial-gradient(circle at 30% 20%, #eef6f8, var(--gold-light) 130%);
  color: var(--copper-deep);
}
.person-monogram svg { width: 58%; height: auto; }
.person-body { padding: 1.5rem 1.5rem 1.7rem; display: grid; gap: 0.5rem; align-content: start; }
.person-role { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper-deep); font-weight: 600; }
.person-name { font-size: 1.75rem; }
.person-body p { font-size: var(--text-sm); color: var(--muted); }
.person-body .link-arrow { margin-top: 0.4rem; }

/* ---------- Testimonials ---------- */
.testimonials { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .testimonials { grid-template-columns: 0.8fr 1.2fr; } }
.testimonials-media { border-radius: var(--radius-arch); overflow: hidden; aspect-ratio: 4 / 5; max-width: 440px; box-shadow: var(--shadow-lift); }
.testimonials-media img { width: 100%; height: 100%; object-fit: cover; }
.quotes { display: grid; gap: 1rem; }
.quote {
  margin: 0; padding: 1.6rem 1.7rem; border-radius: var(--radius);
  background: rgba(251, 248, 244, 0.06); border: 1px solid rgba(251, 248, 244, 0.14);
}
.quote blockquote { margin: 0 0 0.9rem; font-family: var(--font-display); font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); line-height: 1.4; font-style: italic; }
.quote figcaption { display: flex; align-items: center; gap: 0.7rem; font-size: var(--text-sm); color: var(--rose); font-weight: 600; letter-spacing: 0.04em; }
.quote figcaption::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.stars { display: flex; gap: 3px; margin-bottom: 0.8rem; color: #e2b77d; }
.stars svg { width: 15px; height: 15px; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 170px; } }
.gallery-item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.gallery-item button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gallery-item button:focus-visible { outline: 2px solid var(--copper); outline-offset: -4px; border-radius: var(--radius); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 900ms var(--ease-out); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption {
  position: absolute; left: 0.8rem; bottom: 0.8rem; padding: 0.35rem 0.8rem; border-radius: 999px;
  background: rgba(251, 248, 244, 0.92); font-size: 0.78rem; font-weight: 600; color: var(--ink); pointer-events: none;
}
@media (min-width: 820px) {
  .gallery-item img { aspect-ratio: auto; }
  .g-a { grid-column: span 4; grid-row: span 3; }
  .g-b { grid-column: span 2; grid-row: span 3; }
  .g-c { grid-column: span 2; grid-row: span 2; }
  .g-d { grid-column: span 2; grid-row: span 2; }
  .g-e { grid-column: span 2; grid-row: span 2; }
  .g-f { grid-column: span 3; grid-row: span 2; }
  .g-g { grid-column: span 3; grid-row: span 2; }
  .g-h { grid-column: span 6; grid-row: span 2; }
}
@media (max-width: 819px) { .g-a, .g-h { grid-column: span 2; } }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1400px); max-height: 92vh; }
.lightbox::backdrop { background: rgba(19, 14, 12, 0.88); backdrop-filter: blur(4px); }
.lightbox img { max-width: 100%; max-height: 84vh; border-radius: var(--radius-sm); margin-inline: auto; }
.lightbox p { color: var(--paper); text-align: center; margin: 0.8rem 0 0; font-size: var(--text-sm); }
.lightbox-close {
  position: fixed; top: 1rem; right: 1rem; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center;
}
.lightbox-close svg { width: 20px; height: 20px; }

/* ---------- Cabinet teaser strip ---------- */
.strip { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .strip { grid-template-columns: 1.4fr 1fr 1fr; } }
.strip img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4 / 3; }
@media (min-width: 720px) { .strip > :first-child img { aspect-ratio: auto; height: 100%; } .strip > * { min-height: 300px; } }

/* ---------- Numbered list (soins) ---------- */
.conditions { display: grid; gap: 0; counter-reset: cond; }
@media (min-width: 860px) { .conditions { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }
.condition {
  counter-increment: cond; display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.2rem 1rem;
  padding: 1.6rem 0; border-top: 1px solid var(--line);
}
.condition::before {
  content: counter(cond, decimal-leading-zero); grid-row: span 2;
  font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--copper);
}
.condition h3 { font-size: 1.45rem; }
.condition p { margin: 0; font-size: var(--text-sm); color: var(--muted); }

.techniques { display: grid; gap: 1rem; }
@media (min-width: 720px) { .techniques { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .techniques { grid-template-columns: repeat(4, 1fr); } }
.technique { padding: 1.7rem 1.5rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); display: grid; gap: 0.6rem; align-content: start; }
.technique-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--rose-soft); color: var(--copper-deep); }
.technique-icon svg { width: 22px; height: 22px; }
.technique h3 { font-size: 1.4rem; }
.technique p { margin: 0; font-size: var(--text-sm); color: var(--muted); }

/* ---------- Profile (équipe) ---------- */
.profile { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 900px) {
  .profile { grid-template-columns: 0.85fr 1.15fr; }
  /* Inverser l'ordre d'affichage déplace la photo dans la seconde colonne.
     On inverse donc aussi les largeurs, sinon la photo hérite de la colonne
     large et paraît plus grande que celle des autres praticiennes. */
  .profile--reverse { grid-template-columns: 1.15fr 0.85fr; }
  .profile--reverse > :first-child { order: 2; }
}
.profile-photo { border-radius: var(--radius-arch); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lift); background: var(--rose-soft); position: sticky; top: 110px; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.profile-photo .person-monogram svg { width: 52%; }
.profile-body { display: grid; gap: 1.4rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); }
.checklist { display: grid; gap: 0.75rem; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 0.8rem; color: var(--ink-soft); }
.checklist svg { width: 22px; height: 22px; color: var(--copper); margin-top: 2px; }
.info-box { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.info-box dl { margin: 0; display: grid; gap: 0.9rem; }
@media (min-width: 560px) { .info-box dl { grid-template-columns: 9rem 1fr; } }
.info-box dt { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-deep); font-weight: 600; padding-top: 0.25rem; }
.info-box dd { margin: 0; color: var(--ink-soft); }
.info-box a { text-decoration-color: rgba(162, 96, 58, 0.4); text-underline-offset: 3px; }
.info-box a:hover { color: var(--copper-deep); }
.note { font-size: var(--text-sm); color: var(--muted); padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--rose-soft); }

.synergy { display: grid; gap: 1rem; }
@media (min-width: 820px) { .synergy { grid-template-columns: repeat(3, 1fr); } }
.synergy-card { padding: 2rem 1.7rem; border-radius: var(--radius); background: rgba(251, 248, 244, 0.06); border: 1px solid rgba(251, 248, 244, 0.14); display: grid; gap: 0.6rem; align-content: start; }
.synergy-card .h3 { color: var(--paper); }
.synergy-card p { margin: 0; color: rgba(251, 248, 244, 0.78); font-size: var(--text-sm); }
.synergy-card small { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose); font-weight: 600; }

/* ---------- Timeline (cabinet) ---------- */
.timeline { display: grid; gap: 0; position: relative; }
/* 10rem : assez large pour « Aujourd'hui », qui débordait sur le titre voisin.
   Toutes les lignes retombent donc sur la même colonne, la frise reste alignée. */
.timeline-item { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: 1.5rem; padding: 1.8rem 0; border-top: 1px solid var(--line); }
.timeline-item .timeline-year { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1; color: var(--copper); white-space: nowrap; }
.timeline-item h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.timeline-item p { color: var(--muted); font-size: var(--text-sm); margin: 0; }
@media (max-width: 640px) { .timeline-item { grid-template-columns: 1fr; gap: 0.6rem; } .timeline-item .timeline-year { white-space: normal; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.4rem 0.2rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); font-weight: 500; line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--copper-deep); }
.faq-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform 350ms var(--ease-out), background-color 250ms; }
.faq-icon svg { width: 14px; height: 14px; }
.faq details[open] .faq-icon { transform: rotate(45deg); background: var(--copper); border-color: var(--copper); color: var(--white); }
.faq-answer { padding: 0 3.5rem 1.6rem 0.2rem; color: var(--ink-soft); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { padding: 2rem 1.7rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); display: grid; gap: 0.8rem; align-content: start; }
.contact-card .technique-icon { margin-bottom: 0.4rem; }
.contact-card h2 { font-size: 1.6rem; }
.contact-card p { margin: 0; color: var(--ink-soft); }
.contact-card a:not(.btn) { color: var(--ink); font-weight: 600; text-decoration-color: rgba(162, 96, 58, 0.4); text-underline-offset: 4px; }
.contact-card a:not(.btn):hover { color: var(--copper-deep); }
.hours { display: grid; gap: 0.35rem; font-size: var(--text-sm); }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.35rem; border-bottom: 1px dashed var(--line); }
.hours dt { color: var(--muted); }
.hours dd { margin: 0; font-weight: 600; }
.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 21 / 9; background: var(--sand); }
@media (max-width: 900px) { .map-wrap { aspect-ratio: 4 / 3; } }
@media (max-width: 640px) { .map-wrap { aspect-ratio: 4 / 5; } }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(216, 181, 166, 0.25); box-shadow: 0 0 0 60px rgba(216, 181, 166, 0.04), 0 0 0 120px rgba(216, 181, 166, 0.03);
  pointer-events: none;
}
.cta-grid { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: 1.2fr 0.8fr; } }
.cta-grid .lead { color: rgba(251, 248, 244, 0.78); }
.cta-facts { display: grid; gap: 1rem; }
.cta-fact { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: center; }
.cta-fact-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(251, 248, 244, 0.08); color: var(--rose); }
.cta-fact-icon svg { width: 20px; height: 20px; }
.cta-fact small { display: block; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(251, 248, 244, 0.6); }
.cta-fact a, .cta-fact span { color: var(--paper); font-weight: 600; text-decoration: none; }
.cta-fact a:hover { color: var(--rose); }

/* ---------- Footer ---------- */
.site-footer { background: #1b1513; color: rgba(251, 248, 244, 0.72); padding-top: clamp(3.5rem, 3rem + 3vw, 6rem); font-size: var(--text-sm); }
.footer-grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand { display: grid; gap: 1.2rem; align-content: start; }
.footer-logo { width: 150px; height: 150px; color: #c88a63; }
.footer-brand p { max-width: 30ch; }
.site-footer h2 { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); margin-bottom: 1.1rem; font-weight: 600; }
.site-footer ul { display: grid; gap: 0.55rem; }
.site-footer a { color: rgba(251, 248, 244, 0.8); text-decoration: none; transition: color 200ms; }
.site-footer a:hover { color: var(--rose); }
.footer-fso { display: inline-block; margin-top: 1rem; padding: 0.6rem 0.8rem; background: var(--white); border-radius: 8px; }
.footer-fso img { width: 170px; height: auto; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid rgba(251, 248, 244, 0.1); font-size: 0.82rem; }
.footer-credit a { color: var(--rose); }
/* Discret : visible pour qui le cherche, effacé pour les autres. */
.footer-admin { margin-left: 0.6rem; opacity: 0.62; font-size: var(--text-xs); }
.footer-admin:hover, .footer-admin:focus-visible { opacity: 1; }

/* ---------- Mobile booking bar ---------- */
.mobile-bar {
  position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 45;
  display: none; gap: 0.5rem; padding: 0.5rem; border-radius: 999px;
  background: rgba(27, 21, 19, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lift);
  transform: translateY(140%); transition: transform 450ms var(--ease-out);
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar .btn { flex: 1; min-height: 46px; padding: 0.6rem 1rem; font-size: 0.88rem; }
@media (max-width: 760px) { .mobile-bar { display: flex; } .site-footer { padding-bottom: 5rem; } }

/* ---------- Reveal motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); transition-delay: var(--delay, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}
.note svg { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; margin-right: 0.3rem; color: var(--copper-deep); }
@media (max-width: 480px) {
  .brand-sub { display: none; }
  .brand-name { font-size: 1.25rem; white-space: nowrap; }
  .brand-mark { width: 40px; height: 40px; }
  .header-inner { min-height: 68px; gap: 0.75rem; }
  .site-nav { inset: 68px 0 auto 0; }
}
@media (max-width: 719px) { .motif--cta { grid-column: span 2; min-height: 130px; } }

/* ==========================================================================
   Espace Équilibre — compléments
   ========================================================================== */

/* Logo en image (en-tête, pied de page) */
.brand-mark { width: 78px; height: auto; flex: none; }
.brand-name { font-size: 1.3rem; }
.brand-sub { letter-spacing: 0.26em; }
.footer-logo { width: 190px; height: auto; }
.site-footer p svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 0.3rem; color: var(--gold-light); }

/* L'arc du logo, en séparateur */
.arc { display: block; width: 190px; height: auto; color: var(--gold); margin: 0.2rem 0 0; }
.arc--center { margin-inline: auto; }
.section--teal .arc { color: var(--gold-light); }

/* Les trois portes d'entrée */
.doors { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .doors { grid-template-columns: repeat(3, 1fr); } }
.door {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 330px; padding: 1.6rem 1.7rem 1.8rem; border-radius: var(--radius);
  overflow: hidden; isolation: isolate; text-decoration: none; color: var(--white); background: var(--ink);
}
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--ease-out); }
.door::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 30, 36, 0.1) 25%, rgba(10, 30, 36, 0.52) 60%, rgba(8, 24, 30, 0.88) 100%);
  transition: background-color 400ms;
}
.door:hover img { transform: scale(1.05); }
.door:hover::after { background-color: rgba(11, 90, 112, 0.22); }
.door-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem); line-height: 1.15; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.door-text { margin: 0.5rem 0 0.9rem; font-size: var(--text-sm); line-height: 1.6; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.door-go { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; }
.door-go svg { width: 16px; height: 16px; transition: transform 300ms var(--ease-out); }
.door:hover .door-go svg { transform: translateX(4px); }

/* Bloc « consultation en duo » */
.duo { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 0.9fr 1.1fr; } }
.duo-media { border-radius: var(--radius-arch); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lift); max-width: 440px; }
.duo-media img { width: 100%; height: 100%; object-fit: cover; }
.duo-badge {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem;
  border-radius: 999px; background: var(--rose-soft); color: var(--copper-deep);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.duo-badge svg { width: 18px; height: 18px; }
.section--teal .duo-badge { background: rgba(251, 248, 243, 0.1); color: var(--gold-light); }

/* Portrait manquant : initiales dans une arche */
.person-initials {
  display: grid; place-items: center; height: 100%;
  background: radial-gradient(circle at 32% 22%, #eef6f8, var(--gold-light) 135%);
  font-family: var(--font-display); font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem);
  letter-spacing: 0.1em; color: var(--copper-deep);
}

/* Langues */
.lang-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--ink-soft); }
.lang-note svg { width: 18px; height: 18px; color: var(--copper); }

/* En-tête : 7 entrées + téléphone + bouton — on serre et on interdit les retours à la ligne */
.nav-link, .header-phone span, .header-actions .btn, .brand-name { white-space: nowrap; }
@media (min-width: 961px) {
  .nav-list { gap: 0.05rem; }
  .nav-link { padding: 0.5rem 0.62rem; font-size: 0.875rem; }
  .header-inner { gap: 1rem; }
  .header-actions { gap: 0.35rem; }
  .header-actions .btn { padding: 0.6rem 1rem; }
}
@media (min-width: 961px) and (max-width: 1240px) {
  .header-phone span { display: none; }
  .brand-sub { display: none; }
}

/* Information encore à confirmer — doit disparaître avant la mise en ligne */
.todo {
  background: var(--cream); border-bottom: 1px dashed var(--gold);
  padding: 0 0.25em; color: var(--gold-deep); font-style: italic;
}

/* La photo de profil ne se colle qu'en deux colonnes : en une seule, elle
   resterait fixe et passerait par-dessus le texte qui défile. */
@media (max-width: 899px) {
  .profile-photo {
    position: static; top: auto;
    width: min(62%, 280px); margin-inline: auto;
  }
}

/* En défilant, la photo s'efface et rapetisse pour laisser la place au texte.
   Animation pilotée par le défilement : aucun script, aucun calcul de position.
   Les navigateurs qui ne la gèrent pas affichent simplement la photo fixe. */
@supports (animation-timeline: view()) {
  @media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
    .profile-photo {
      animation: photo-sefface linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
      transform-origin: 50% 0;
      will-change: transform, opacity;
    }
    @keyframes photo-sefface {
      to { opacity: 0.15; transform: scale(0.72); }
    }
  }
}

/* ==========================================================================
   Agenda en ligne — médecine chinoise
   ========================================================================== */

.rdv-form { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .rdv-form { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }

.rdv-creneaux { border: 0; padding: 0; margin: 0; min-width: 0; }
.rdv-creneaux legend { padding: 0; margin-bottom: 1.2rem; }

.rdv-jour + .rdv-jour { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.rdv-jour-titre {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.04em; color: var(--copper-deep); margin: 0 0 0.75rem;
}
.rdv-heures { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Le bouton radio reste accessible au clavier, mais c'est la pastille qu'on voit. */
.rdv-heure input { position: absolute; opacity: 0; width: 0; height: 0; }
.rdv-heure span {
  display: inline-block; padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  cursor: pointer; transition: border-color 180ms, background 180ms, color 180ms;
}
.rdv-heure span:hover { border-color: var(--blue-light); color: var(--copper-deep); }
.rdv-heure input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: 2px; }
.rdv-heure input:checked + span { background: var(--copper-deep); border-color: var(--copper-deep); color: var(--paper); }

.rdv-coordonnees {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
}
.rdv-champs { display: grid; gap: 1rem; }
.rdv-champs p { margin: 0; }
.rdv-champs label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: 0.3rem; }
.rdv-champs input {
  width: 100%; padding: 0.7rem 0.9rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper);
  font: inherit; font-size: var(--text-sm); color: var(--ink);
}
.rdv-champs input:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; border-color: transparent; }
.rdv-coordonnees .btn { margin-top: 1.4rem; width: 100%; justify-content: center; }

/* Piège à robots : invisible pour une patiente, rempli par un script. */
.rdv-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }