/* =========================================================
   Cabinet de Chirurgie Esthétique — Feuille de style
   Système de design (copie fidèle de la structure de référence)
   ========================================================= */

/* ---------- Variables ---------- */
/* Toutes les couleurs du site passent par ces variables. Palette « Rose poudré et
   ivoire », choisie par le client parmi les thèmes proposés. Le logo suit aussi,
   via --logo-f / --logo-b (couleurs du F et du B). */
:root {
  --accent:        #9f5c59; /* vieux rose */
  --accent-dark:   #7f4744;
  --accent-light:  #d6a9a3; /* rose poudré */
  --accent-pale:   #f4e7e1;
  --accent-pale-2: #faf5ef;

  --ink:     #3b3330;
  --ink-2:   #57504b;
  --muted:   #877d77;
  --line:    #ece2d9;
  --bg:      #fbf8f3; /* ivoire */
  --bg-alt:  #f5eee6;
  --surface: #ffffff; /* cartes, menus, champs */

  /* Textes clairs posés sur les aplats --accent (bandeaux, encarts) */
  --on-accent-soft:  #fbefec;
  --on-accent-muted: #f0d3ce;

  --footer-bg:   #5c3c39;
  --footer-text: #ecdcd6;

  --logo-f: var(--accent-light);
  --logo-b: var(--accent-dark);

  --font-head: "Raleway", "Montserrat", sans-serif;
  --font-sub:  "Montserrat", sans-serif;
  --font-body: "Poppins", "ABeeZee", sans-serif;
  --font-script: "Alex Brush", cursive;

  --maxw: 1180px;
  --radius: 14px;
  --shadow: 0 18px 40px -20px color-mix(in srgb, var(--accent-dark) 35%, transparent);
  --shadow-sm: 0 8px 24px -16px color-mix(in srgb, var(--ink) 40%, transparent);
  --t: .28s cubic-bezier(.4, 0, .2, 1);
}


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink-2);
  line-height: 1.7;
  background: var(--bg);
  font-size: 1rem;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; font-weight: 900; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.section { padding: 84px 0; }
/* Retour à la ligne voulu dans un titre ou un paragraphe, appliqué seulement au-delà
   du mobile : sur petit écran, il laisserait des lignes trop courtes */
@media (max-width: 760px) { br.br-lg { display: none; } }
/* Accueil : blocs élargis ou titre réduit pour que chaque partie d'un texte coupé
   (br.br-lg) tienne sur sa ligne, sans mot isolé */
.lead.lead--wide { max-width: none; }
.section-head.section-head--wide { max-width: 1000px; }
h2.h2-fit { font-size: clamp(1.7rem, 3.1vw, 2.4rem); }
/* Accueil, section qui suit le bandeau : sans la photo (masquée sous 980 px), l'espace
   entre le bandeau et « Nos interventions » est réduit */
@media (max-width: 980px) {
  /* sélecteurs renforcés : passent devant .hero .container et .section définis plus loin */
  body .hero .container { padding-bottom: 40px; }
  .section.section--after-hero { padding-top: 0; }
}
.section--alt { background: var(--bg-alt); }
.section--teal { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }
.section--teal h2, .section--teal h3 { color: #fff; }

.eyebrow {
  font-family: var(--font-sub);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 14px;
}
.section--teal .eyebrow { color: var(--on-accent-muted); }

.script { font-family: var(--font-script); color: var(--accent); font-weight: 400; }

.lead { font-size: 1.08rem; color: var(--ink-2); max-width: 62ch; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.muted { color: var(--muted); }

.section-head { margin-bottom: 52px; }
.section-head--center { text-align: center; max-width: 720px; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sub); font-weight: 600; font-size: .92rem;
  letter-spacing: .02em;
  padding: 14px 28px; border-radius: 50px;
  transition: var(--t); cursor: pointer; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn--ghost { border: 2px solid var(--accent); color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color: #fff; }
.btn--white { background: #fff; color: var(--accent-dark); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.4); }
.btn--lg { padding: 17px 38px; font-size: 1rem; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--accent-dark); color: var(--on-accent-soft);
  font-size: .82rem; font-family: var(--font-sub);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: var(--t); }
.topbar a:hover { color: #fff; }
.topbar-left { display: flex; gap: 26px; }
.topbar-right { display: flex; gap: 20px; }
.topbar svg { width: 15px; height: 15px; }

/* ---------- Header / Nav ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: var(--t);
}
.header.scrolled { box-shadow: 0 6px 24px -18px color-mix(in srgb, var(--ink) 50%, transparent); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 20px; }

.brand { display: flex; align-items: center; gap: 12px; }
/* Logo FB vectoriel (lib/render.js : LOGO), peint aux couleurs du thème :
   --logo-f pour le F, --logo-b pour le B (blanc dans le pied de page). */
.brand-logo { height: 48px; width: auto; aspect-ratio: 178.1 / 132.5; flex: none; overflow: visible; }
.brand-logo-f { fill: var(--logo-f); }
.brand-logo-b { fill: var(--logo-b); }
/* En contraste élevé Windows, les couleurs sont imposées : on garde celles du logo */
@media (forced-colors: active) { .brand-logo { forced-color-adjust: none; } }
.brand-text strong { font-family: var(--font-head); font-weight: 900; color: var(--ink); font-size: 1.05rem; display: block; line-height: 1.1; }
.brand-text span { font-family: var(--font-sub); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 4px; }
.menu > li > a {
  font-family: var(--font-sub); font-weight: 500; font-size: .92rem;
  padding: 10px 13px; border-radius: 8px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px; transition: var(--t); white-space: nowrap;
}
.menu > li > a:hover, .menu > li.active > a { color: var(--accent); }
.menu .caret { width: 11px; height: 11px; transition: var(--t); }
/* Entre la tablette et le grand écran, le menu complet et le sous-titre de la marque
   (« Chirurgie plastique & esthétique ») ne tiennent qu'avec des espacements resserrés */
@media (min-width: 1061px) and (max-width: 1240px) {
  .nav { gap: 12px; }
  .menu > li > a { padding: 10px 7px; font-size: .88rem; }
}
.has-mega { position: relative; }

/* Pont invisible : couvre l'espace entre l'onglet et le panneau
   pour que le survol ne soit pas perdu en descendant la souris */
.has-mega::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 22px;
  display: none;
}
.has-mega:hover::after { display: block; }

/* Mega menu */
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(10px);
  width: min(1040px, 94vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--ink) 45%, transparent);
  padding: 28px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: var(--t); transition-delay: .25s; /* grâce avant fermeture */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; /* ouverture immédiate */ }
.has-mega:hover .caret { transform: rotate(180deg); }
.mega-col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); font-family: var(--font-sub); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mega-col a { display: block; padding: 7px 0; font-size: .92rem; color: var(--ink-2); transition: var(--t); }
.mega-col a:hover { color: var(--accent); padding-left: 6px; }
.mega-col a.mega-viewall { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-sub); font-weight: 600; font-size: .84rem; color: var(--accent); }
.mega-col a.mega-viewall svg { width: 14px; height: 14px; transition: var(--t); }
.mega-col a.mega-viewall:hover { padding-left: 0; gap: 9px; }

/* Mini dropdown (Le cabinet) */
.mega--mini { width: 230px; grid-template-columns: 1fr; gap: 2px; padding: 14px; }
.mega--mini a { display: block; padding: 9px 12px; border-radius: 8px; font-size: .92rem; color: var(--ink-2); transition: var(--t); }
.mega--mini a:hover { background: var(--accent-pale); color: var(--accent); padding-left: 12px; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 10px; background: var(--accent-pale); }
.burger span { display: block; width: 22px; height: 2px; background: var(--accent-dark); margin: 4px auto; transition: var(--t); }

/* ---------- Recherche ---------- */
.search-trigger {
  width: 44px; height: 44px; border-radius: 10px; background: var(--accent-pale); color: var(--accent-dark);
  display: grid; place-items: center; flex: none; transition: var(--t);
}
.search-trigger:hover { background: var(--accent); color: #fff; }
.search-trigger svg { width: 19px; height: 19px; }

.search-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px;
}
.search-modal[hidden] { display: none; }
.search-modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(2px); }
.search-modal-panel {
  position: relative; width: min(560px, 100%); max-height: 70vh;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.search-modal-field { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); color: var(--muted); }
.search-modal-field svg { width: 19px; height: 19px; flex: none; }
.search-modal-input { flex: 1; border: none; outline: none; font: inherit; font-size: 1.02rem; color: var(--ink); background: transparent; }
.search-modal-close { color: var(--muted); flex: none; display: grid; place-items: center; transition: var(--t); }
.search-modal-close:hover { color: var(--ink); }
.search-modal-results { overflow-y: auto; padding: 8px; }
.search-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; transition: var(--t); }
.search-result:hover { background: var(--accent-pale); }
.search-result-name { font-family: var(--font-sub); font-weight: 500; color: var(--ink); font-size: .95rem; }
.search-result-cat { font-size: .78rem; color: var(--muted); flex: none; }
.search-modal-empty { padding: 18px 14px; color: var(--muted); font-size: .92rem; }

/* ---------- Hero ---------- */
.hero { position: relative; background: linear-gradient(120deg, var(--accent-pale-2) 0%, var(--bg) 55%); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-light) 22%, transparent), transparent 70%);
}
.hero .container { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; padding-block: 84px; }
.hero h1 span.script { display: block; font-size: 1.25em; margin-top: -6px; }
.hero p.lead { margin: 22px 0 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Chiffres clés : petit libellé au-dessus, texte en grand dessous (sur plusieurs lignes) */
.hero-trust { display: flex; gap: 34px; margin-top: 40px; flex-wrap: wrap; align-items: flex-start; }
.hero-trust div span { display: block; margin-bottom: 4px; font-size: .82rem; color: var(--muted); }
.hero-trust div strong { display: block; font-family: var(--font-head); font-size: 1.55rem; line-height: 1.15; color: var(--accent); }
.hero-visual { position: relative; }
.hero-visual .photo {
  aspect-ratio: 4/5; border-radius: 26px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  box-shadow: var(--shadow); display: grid; place-items: center; color: #fff; overflow: hidden;
}
.hero-visual .photo svg { width: 38%; opacity: .9; }
/* Image d'accueil : dessin au trait sur fond transparent, posé sans cadre sur le bandeau */
.hero-visual .photo--dessin { background: none; box-shadow: none; border-radius: 0; }
/* Le trait du dessin (canal alpha de l'image) sert de masque, peint en dégradé
   d'accent : il suit le thème de couleurs, comme le logo et les images de catégorie */
.hero-dessin {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(var(--accent), var(--accent-dark));
  -webkit-mask: url(../assets/img/accueil-silhouette.webp) center / contain no-repeat;
          mask: url(../assets/img/accueil-silhouette.webp) center / contain no-repeat;
}
@media (forced-colors: active) { .hero-dessin { forced-color-adjust: none; } }
.hero-badge {
  position: absolute; bottom: -22px; left: -22px;
  background: var(--surface); border-radius: 16px; padding: 16px 20px;
  box-shadow: var(--shadow-sm); display: flex; gap: 12px; align-items: center;
}
.hero-badge .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-pale); display: grid; place-items: center; color: var(--accent); flex: none; }
.hero-badge strong { display: block; font-family: var(--font-head); color: var(--ink); }
.hero-badge span { font-size: .8rem; color: var(--muted); }

/* ---------- Page banner (interior pages) ---------- */
.pagehead { background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff; padding: 70px 0 64px; position: relative; overflow: hidden; }
.pagehead::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% -10%, rgba(255,255,255,.16), transparent 50%); }
.pagehead .container { position: relative; }
.pagehead h1 { color: #fff; }
/* Pages catégories : image de la catégorie devant le titre */
.pagehead h1 .cat-img--title { display: inline-block; width: 1.5em; margin-right: .35em; vertical-align: middle; }
.breadcrumb { font-family: var(--font-sub); font-size: .82rem; color: var(--on-accent-muted); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.pagehead p { color: var(--on-accent-soft); max-width: 60ch; margin-top: 12px; }
/* Appellations alternatives sous le H1 (cf. docs sources des praticiens).
   Scopé avec .pagehead pour passer devant `.pagehead p` ci-dessus. */
.pagehead .pagehead-alt { font-family: var(--font-sub); font-size: .95rem; font-style: italic; color: var(--on-accent-muted); margin-top: 6px; }

/* ---------- Cards grid ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; transition: var(--t); height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card .ico { width: 56px; height: 56px; border-radius: 14px; background: var(--accent-pale); display: grid; place-items: center; color: var(--accent); margin-bottom: 20px; }
.card .ico svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 10px; font-size: 1.22rem; }
.card p { font-size: .95rem; color: var(--ink-2); }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--accent); font-family: var(--font-sub); font-weight: 600; font-size: .88rem; }
.more svg { width: 16px; height: 16px; flex: none; transition: var(--t); }
.card:hover .more svg { transform: translateX(4px); }
/* Carte entièrement cliquable : la zone du lien « En savoir plus » est étirée sur
   toute la carte. Le lien reste unique (un seul arrêt au clavier, un seul lien lu
   par les lecteurs d'écran). Suppose une carte à un seul lien, en .more. */
.card { position: relative; }
.card .more::after { content: ""; position: absolute; inset: 0; }
.card .more:focus-visible { outline: none; }
.card:has(.more:focus-visible) { outline: 2px solid; outline-offset: 3px; }

/* Procedure list cards (with photo block) */
.proc-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.proc-card .thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--accent-light), var(--accent-dark)); display: grid; place-items: center; color: #fff; overflow: hidden; }
.proc-card .thumb svg { width: 34%; opacity: .85; }
.proc-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Image d'intervention : montrée en entier sur blanc (fond des images du client).
   Positionnée en absolu : dans une boîte dimensionnée par aspect-ratio, height: 100%
   ne se résout pas et l'image débordait. */
.proc-card .thumb--photo { position: relative; background: #fff; }
.proc-card .thumb--photo img { position: absolute; inset: 0; object-fit: contain; transition: var(--t); }
.proc-card:hover .thumb--photo img { transform: scale(1.04); }
.proc-card .thumb--cat .cat-img { width: 46%; }

/* Image de catégorie (build.js : catImg) : disque pâle, trait peint en dégradé
   d'accent à travers un masque PNG, touches de couleur d'origine par-dessus */
.cat-img { position: relative; display: block; width: 112px; aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--accent-pale); }
.cat-img > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.cat-img-trait {
  background: linear-gradient(var(--accent), var(--accent-dark));
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.cat-img--sm { width: 72px; }
.card > .cat-img { margin: 0 auto 20px; }
/* Accueil : trois textes de présentation (seins, visage, silhouette), titres longs :
   une seule colonne tant que trois colonnes les tasseraient */
.home-pitch .card h3 { font-size: 1.15rem; }
@media (max-width: 980px) { .home-pitch { grid-template-columns: 1fr; } }
/* Carte de catégorie avec image en filigrane (build.js : catFiligrane) */
.card--filigrane { background-repeat: no-repeat; background-position: center 82%; background-size: 108% auto; }
@media (forced-colors: active) { .cat-img, .cat-img > * { forced-color-adjust: none; } }

/* Article de blog (page /actualites, rendue par server/) */
.article-body { max-width: 720px; margin-inline: auto; }
.article-body img { border-radius: var(--radius); margin: 12px 0; }
.article-body h2 { margin: 32px 0 14px; }
.article-body p { margin-bottom: 16px; }
.article-meta { color: var(--muted); font-size: .88rem; margin-bottom: 8px; }
.proc-card .body { padding: 26px 24px; flex: 1; display: flex; flex-direction: column; }
.proc-card h3 { font-size: 1.12rem; }
.proc-card p { font-size: .92rem; flex: 1; }

/* ---------- Feature / Why us ---------- */
.feature { display: flex; gap: 18px; align-items: flex-start; }
.feature .ico { width: 52px; height: 52px; border-radius: 14px; flex: none; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.feature .ico svg { width: 26px; height: 26px; }
.section--teal .feature .ico { background: rgba(255,255,255,.16); color:#fff; }
.feature h3 { font-size: 1.12rem; margin-bottom: 6px; }
.feature p { font-size: .94rem; opacity: .92; }

/* ---------- Split (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media { aspect-ratio: 5/4; border-radius: 22px; background: linear-gradient(135deg, var(--accent-light), var(--accent-dark)); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow); overflow: hidden; }
.split-media svg { width: 34%; opacity: .9; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
/* Tarifs : image de catégorie centrée sur l'aplat, dimensionnée sur le plus petit
   côté du cadre (portrait sur ordinateur, bandeau sur mobile) pour rester ronde */
.split-media--cat { container-type: size; }
.split-media--cat .cat-img { width: min(84cqw, 76cqh); }
.split-media--portrait { aspect-ratio: 4/5; }
.split-media--portrait img { object-position: center 15%; }
/* La clinique : bureau du cabinet, et la vue depuis ses fenêtres en médaillon */
.cabinet-photos { position: relative; padding: 0 0 120px 0; }
.cabinet-photos-main { width: 88%; height: auto; aspect-ratio: 1171/960; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); }
.cabinet-photos-inset {
  position: absolute; right: 0; bottom: 0; width: 38%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 55%;
  border-radius: 18px; border: 6px solid var(--surface); box-shadow: var(--shadow-sm);
}
@media (min-width: 981px) {
  .split--sticky-media .split-media { position: sticky; top: 100px; align-self: start; }
}
.split ul.checks { margin-top: 22px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; }
.checks li svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 2px; }

/* ---------- Practitioners ---------- */
.doc-card { text-align: center; }
.doc-photo { width: 100%; aspect-ratio: 1; border-radius: 20px; background: linear-gradient(135deg, var(--accent-light), var(--accent-dark)); display: grid; place-items: center; color: #fff; margin-bottom: 20px; overflow: hidden; }
.doc-photo svg { width: 40%; opacity: .9; }
.doc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
a.doc-card:hover h3 { color: var(--accent); }
.doc-card h3 { font-size: 1.3rem; }
.doc-card .role { color: var(--accent); font-family: var(--font-sub); font-weight: 600; font-size: .9rem; margin: 4px 0 14px; }
.doc-card .tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.tag { font-size: .76rem; background: var(--accent-pale); color: var(--accent-dark); padding: 5px 12px; border-radius: 50px; font-family: var(--font-sub); }

/* Équipe : présentation du Dr Bousquet et de la collaboration */
/* Équipe : présentation des deux chirurgiens côte à côte (le Dr Boissière d'abord) */
.team-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 64px; }
.team-partner { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 40px; background: var(--accent-pale-2); border: 1px solid var(--line); border-radius: var(--radius); }
.team-partner h2 { font-size: 1.5rem; margin-bottom: 14px; }
.team-partner p { margin-bottom: 14px; }
/* Boutons alignés en bas des deux blocs, quelle que soit la longueur du texte */
.team-partner .btn { margin-top: auto; }
@media (max-width: 980px) { .team-partners { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .team-partner { padding: 26px 22px; } .team-partner h2 { font-size: 1.3rem; } }
/* Cartes de l'équipe : le nom tient sur une ligne, sa taille s'adapte à la largeur de la carte.
   9.4cqi : le nom le plus long (« Dr Philippe Bousquet ») mesure 10,4 fois sa taille de police. */
.doc-card { container-type: inline-size; }
.doc-card h3 { white-space: nowrap; font-size: min(1.3rem, 9.4cqi); }

/* ---------- Steps (accompagnement) ---------- */
.steps { counter-reset: step; display: grid; gap: 22px; }
.step { display: flex; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.step::before { counter-increment: step; content: counter(step); flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 900; font-size: 1.3rem; display: grid; place-items: center; }
.step h3 { font-size: 1.12rem; margin-bottom: 6px; }
.step p { font-size: .94rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
.faq-cat { max-width: 820px; margin: 40px auto 16px; font-size: 1.35rem; }
.faq-cat:first-of-type { margin-top: 0; }
.faq-a a { color: var(--accent); text-decoration: underline; }
.faq-a a:hover { color: var(--accent-dark); }
.faq-item { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.faq-q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-family: var(--font-sub); font-weight: 600; color: var(--ink); font-size: 1rem; }
.faq-q .pm { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-pale); color: var(--accent); display: grid; place-items: center; flex: none; transition: var(--t); font-size: 1.2rem; }
.faq-item.open .faq-q .pm { background: var(--accent); color: #fff; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 24px 22px; font-size: .95rem; }

/* ---------- Pricing ---------- */
.price-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 18px 26px; border-bottom: 1px solid var(--line); align-items: center; }
.price-row:last-child { border-bottom: none; }
.price-row:nth-child(odd) { background: var(--accent-pale-2); }
.price-row strong { font-family: var(--font-sub); color: var(--ink); font-weight: 600; }
.price-row .from { font-family: var(--font-head); font-weight: 900; color: var(--accent); white-space: nowrap; }
@media (max-width: 620px) { .price-row .from { white-space: normal; text-align: right; } }
.price-cat { font-family: var(--font-head); font-weight: 900; color: var(--ink); font-size: 1.3rem; margin: 36px 0 14px; }

/* Grille tarifaire (esthétique / réparatrice) */
.split--tarif { gap: 48px; align-items: start; }
.split--tarif > * { min-width: 0; } /* évite que la table ne force l'agrandissement de sa colonne grid */
.split--tarif .split-media a { display: contents; color: inherit; }
/* Colonnes asymétriques (image étroite + tableau large) réservées au desktop : en dessous de
   981px, on laisse la règle générale ".split { grid-template-columns: 1fr }" (cf. Responsive
   plus bas) s'appliquer sans qu'une règle plus spécifique ici ne l'empêche de collapser. */
@media (min-width: 981px) {
  .split--tarif { grid-template-columns: 280px 1fr; }
  .split--tarif.split--reverse { grid-template-columns: 1fr 280px; }
  .split--tarif .split-media { aspect-ratio: 4/5; position: sticky; top: 100px; }
}
@media (max-width: 980px) {
  /* width explicite : centré par margin auto, le cadre prendrait sinon la largeur de son
     contenu, nulle avec container-type: size (.split-media--cat) : l’image disparaissait */
  .split--tarif .split-media { aspect-ratio: 21/9; width: 100%; max-width: 480px; margin-inline: auto; }
}
.tarif-section { margin-bottom: 64px; }
.tarif-section:last-child { margin-bottom: 0; }
.tarif-num { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.tarif-num .n { font-family: var(--font-head); font-weight: 900; color: var(--accent); font-size: 1.05rem; letter-spacing: .04em; }
.tarif-num .line { flex: 1; height: 1px; background: var(--line); }
.tarif-section h2 { margin-bottom: 20px; }
.tarif-section h2 a { color: inherit; }
.tarif-section h2 a:hover { color: var(--accent); }

.tarif-table-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.tarif-table { width: 100%; border-collapse: collapse; min-width: 540px; }
.tarif-table th { background: transparent; color: var(--muted); font-family: var(--font-sub); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; padding: 22px 22px 14px; text-align: left; white-space: nowrap; border-bottom: 2px solid var(--accent-pale); }
.tarif-table th:not(:first-child), .tarif-table td:not(:first-child) { text-align: center; }
.tarif-table td { padding: 16px 22px; border-top: 1px solid var(--accent-pale); font-size: .92rem; white-space: nowrap; }
.tarif-table tbody tr:first-child td { border-top: none; }
.tarif-table td:first-child { white-space: normal; font-family: var(--font-sub); }
.tarif-table td:first-child a { color: var(--ink); font-weight: 500; transition: var(--t); }
.tarif-table td:first-child a:hover { color: var(--accent); }
.tarif-table tbody tr { transition: var(--t); }
.tarif-table tbody tr:hover { background: var(--accent-pale-2); }
.price-pill { display: inline-block; padding: 7px 16px; border-radius: 50px; background: var(--accent-pale); color: var(--accent-dark); font-family: var(--font-sub); font-weight: 600; font-size: .84rem; white-space: nowrap; }
.tarif-table tbody tr:hover .price-pill { background: var(--surface); }
.tarif-table td.na { color: var(--line); font-weight: 400; font-size: 1.1rem; }
/* Sur mobile, le tableau à trois colonnes devient une liste de cartes : le nom de
   l'intervention en titre, puis chaque tarif précédé de son type (data-label) ;
   les types non proposés (—) sont masqués. */
@media (max-width: 620px) {
  .tarif-table-wrap { overflow: visible; background: none; box-shadow: none; }
  .tarif-table { min-width: 0; }
  .tarif-table thead { display: none; }
  .tarif-table, .tarif-table tbody, .tarif-table tr, .tarif-table td { display: block; }
  .tarif-table { width: 100%; }
  .tarif-table tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tarif-table tr { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
  .tarif-table tbody tr:hover { background: var(--surface); }
  .tarif-table td { border: none; padding: 0; white-space: normal; text-align: left !important; }
  .tarif-table td:first-child { margin-bottom: 10px; font-size: 1rem; }
  .tarif-table td + td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0 0; }
  .tarif-table td + td::before { content: attr(data-label); flex: 1; min-width: 0; font-size: .82rem; color: var(--muted); font-family: var(--font-sub); }
  .tarif-table td.na { display: none; }
}

/* ---------- Testimonial ---------- */
.quote { max-width: 800px; margin-inline: auto; text-align: center; }
.quote .mark { font-family: var(--font-script); font-size: 5rem; color: var(--accent-light); line-height: .5; }
.quote blockquote { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--ink); line-height: 1.5; font-style: italic; }
.quote cite { display: block; margin-top: 22px; font-style: normal; color: var(--accent); font-family: var(--font-sub); font-weight: 600; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border-radius: 24px; padding: 56px; text-align: center; box-shadow: var(--shadow); }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: var(--on-accent-soft); max-width: 56ch; margin: 0 auto 28px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.info-item { display: flex; gap: 16px; margin-bottom: 26px; }
.info-item .ico { width: 50px; height: 50px; border-radius: 14px; background: var(--accent-pale); color: var(--accent); display: grid; place-items: center; flex: none; }
.info-item h4 { font-size: 1.05rem; margin-bottom: 2px; }
.info-item p, .info-item a { color: var(--ink-2); font-size: .95rem; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-family: var(--font-sub); font-weight: 600; font-size: .85rem; color: var(--ink); margin-bottom: 7px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--surface); transition: var(--t);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-field--consent { display: flex; align-items: flex-start; gap: 10px; }
.form-field--consent input { width: auto; margin-top: 3px; }
.form-field--consent label { font-weight: 400; font-size: .85rem; color: var(--ink-2); margin-bottom: 0; }
.form-field--consent a { color: var(--accent); }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/9; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--footer-bg); color: var(--footer-text); padding: 64px 0 26px; font-size: .92rem; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 44px; }
.footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; font-family: var(--font-sub); margin-bottom: 18px; }
.footer ul li { margin-bottom: 10px; }
.footer .brand-text strong { color: #fff; }
.footer .brand-logo { --logo-b: #fff; }
.footer .brand-text span { color: var(--accent-light); }
.footer p { margin-bottom: 14px; }
.foot-contact li { display: flex; gap: 10px; margin-bottom: 12px; }
.foot-contact svg { width: 17px; flex: none; color: var(--accent-light); margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; }
.social { display: flex; gap: 10px; }
.social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: var(--t); }
.social a:hover { background: var(--accent); }
.social svg { width: 18px; }

/* ---------- Fiche intervention (2 colonnes) ---------- */
.proc-layout { display: grid; grid-template-columns: 1fr 330px; gap: 50px; align-items: start; }
/* Une colonne de grille s'élargit par défaut jusqu'au plus long contenu insécable
   (bouton, image) : sans min-width: 0, toute la page déborde en largeur. */
.proc-layout > *, .proc-aside > *, .split > *, .contact-grid > * { min-width: 0; }
.proc-body h2 { font-size: 1.45rem; margin: 36px 0 14px; }
.proc-body > h2:first-child { margin-top: 0; }
.proc-body p { margin-bottom: 16px; }
.proc-body .checks { margin: 22px 0 8px; }
/* Image d'intervention en tête de fiche (avant / après et étapes) */
.proc-illus { margin: 0 0 34px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.proc-illus img { width: 100%; height: auto; max-height: 560px; object-fit: contain; }
/* Schémas techniques de la fiche (build.js : procSchemas) : lignes de deux à
   hauteur égale, la largeur de chaque schéma étant proportionnelle à son format
   (--r = largeur / hauteur) ; un schéma seul est centré (--w = largeur maximale).
   Un clic ouvre le schéma en grand (légendes fines). */
.proc-photos { display: grid; gap: 16px; margin: 18px 0 26px; }
.proc-photos-row { display: flex; gap: 16px; }
.proc-photos-row > a { flex: var(--r) 1 0; min-width: 0; }
.proc-photos-row--solo { justify-content: center; }
.proc-photos-row--solo > a { flex: none; width: min(100%, var(--w)); }
.proc-photos a { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #fff; transition: var(--t); }
.proc-photos a:hover { transform: translateY(-3px); }
.proc-photos img { width: 100%; height: auto; }
/* Sur mobile, deux schémas côte à côte seraient trop petits : un par ligne */
@media (max-width: 560px) {
  .proc-photos-row { flex-direction: column; }
  .proc-photos-row > a { flex: none; width: 100%; }
  .proc-photos-row--solo > a { width: min(100%, var(--w)); align-self: center; }
}

.pratique-list { display: grid; gap: 11px; }
.pratique-item { display: flex; justify-content: space-between; gap: 14px; font-size: .88rem; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.pratique-item:last-child { border-bottom: none; padding-bottom: 0; }
.pratique-item span:first-child { color: var(--muted); }
.pratique-item span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.aside-card .doc-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; transition: var(--t); }
.aside-card .doc-link:hover { border-color: var(--accent); background: var(--surface); }
.aside-card .doc-link .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--surface); color: var(--accent); display: grid; place-items: center; flex: none; }
.aside-card .doc-link .ico svg { width: 20px; height: 20px; }
.aside-card .doc-link strong { display: block; font-size: .88rem; color: var(--ink); }
.aside-card .doc-link span.hint { font-size: .78rem; color: var(--muted); }
.proc-aside { position: sticky; top: 100px; display: grid; gap: 22px; }
.aside-card { background: var(--accent-pale); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.aside-card.dark { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border: none; }
.aside-card.dark h3 { color: #fff; }
.aside-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.aside-card p { font-size: .9rem; margin-bottom: 16px; }
.aside-card.dark p { color: var(--on-accent-soft); }
/* Colonne étroite : les libellés longs (« Prendre RDV avec le Dr … sur Doctolib »)
   passent à la ligne au lieu de dépasser de l'encart. */
.aside-card .btn { width: 100%; justify-content: center; margin-bottom: 10px; white-space: normal; text-align: center; }
.aside-card .btn:last-child { margin-bottom: 0; }
.related-list a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; transition: var(--t); }
.related-list a:last-child { border-bottom: none; }
.related-list a:hover { color: var(--accent); padding-left: 6px; }
@media (max-width: 980px) {
  .proc-layout { grid-template-columns: 1fr; }
  .proc-aside { position: static; }
}


/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .container, .split, .contact-grid { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Photo d'accueil réservée à l'ordinateur : empilée sous le texte, elle repoussait trop le contenu */
  .hero-visual { display: none; }
}
/* Menu « burger » jusqu'à 1060 px : en dessous, le menu complet et le sous-titre
   de la marque ne tiennent plus côte à côte (seuil repris dans js/main.js) */
@media (max-width: 1060px) {
  .menu, .topbar-left .hide-sm { display: none; }
  .burger { display: block; }
  .menu.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); padding: 16px; gap: 4px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm);
    max-height: 80vh; overflow-y: auto;
  }
  .menu.open > li > a { padding: 14px; border-radius: 10px; }
  .menu.open .mega { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: none; width: auto; grid-template-columns: 1fr; gap: 14px; padding: 8px 0 8px 14px; display: none; }
  .menu.open .has-mega.open .mega { display: grid; }
  .nav-cta .btn--ghost { padding: 10px 18px; font-size: .86rem; }
}
@media (max-width: 620px) {
  .section { padding: 60px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 26px; }
  .btn { white-space: normal; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar-left { gap: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; white-space: normal; text-align: center; }
}
@media (max-width: 480px) {
  .nav { gap: 10px; }
  .brand-text span { display: none; }
  .nav-cta { gap: 8px; }
  /* Le nom reste affiché à côté du logo, sur deux lignes (« Dr Florian » / « Boissière »)
     et en plus petit ; le sous-titre est masqué. Boutons de l'en-tête compactés. */
  .header .brand { gap: 8px; }
  .header .brand-text strong { font-size: .84rem; line-height: 1.15; max-width: 7.2em; }
  .search-trigger { width: 40px; height: 40px; }
}

/* ---------- Mobile : échelle réduite ----------
   Mêmes dispositions, éléments un peu moins gros : taille de base 15 px au lieu de 16
   (tout ce qui est en rem suit), titres, espacements, boutons et cartes resserrés.
   Placé en fin de feuille pour passer devant les règles mobiles précédentes. */
@media (max-width: 620px) {
  html { font-size: 90.625%; } /* 14,5 px */
  h1 { font-size: clamp(1.55rem, 6.4vw, 1.9rem); }
  h2, h2.h2-fit { font-size: clamp(1.25rem, 5.1vw, 1.5rem); }
  h3 { font-size: 1.08rem; }
  .lead { font-size: 1rem; }
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 32px; }
  .eyebrow { font-size: .7rem; letter-spacing: .16em; margin-bottom: 10px; }

  .nav { min-height: 64px; }
  .brand-logo { height: 38px; }
  .search-trigger, .burger { width: 36px; height: 36px; }
  .nav-cta .btn--ghost { padding: 7px 13px; font-size: .82rem; }
  .nav-cta { gap: 6px; }

  body .hero .container { padding-top: 44px; }
  .hero p.lead { margin: 16px 0 24px; }
  .hero-trust { gap: 22px; margin-top: 30px; }
  .hero-trust div strong { font-size: 1.25rem; }

  .pagehead { padding: 44px 0 40px; }
  /* boutons souvent en pleine largeur sur mobile : contenu (icône + texte) centré */
  .btn { padding: 12px 22px; justify-content: center; text-align: center; }
  .btn--lg { padding: 14px 26px; font-size: .95rem; }
  .card { padding: 24px 20px; }
  .card .ico { width: 48px; height: 48px; margin-bottom: 16px; }
  .card > .cat-img { width: 96px; }
  .proc-body h2 { font-size: 1.2rem; margin: 28px 0 12px; }
  .cta-band { padding: 32px 22px; }
  .faq-q { padding: 16px 18px; font-size: .95rem; }
}

/* Très petits écrans : le bouton « Contact » de l'en-tête cède sa place au nom
   (la page contact reste accessible par « Prendre rendez-vous », dans la barre du haut) */
@media (max-width: 359px) {
  .nav-cta .btn--ghost { display: none; }
}