/* Polices hébergées sur le site (Fraunces, Manrope — licence SIL OFL). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   L'Empreinte Dentaire — Design system
   Palette premium noir / or, inspirée d'un rendu "cabinet haut de gamme"
   ========================================================================== */

:root {
  --bg: #0b0c0e;
  --bg-alt: #141518;
  --bg-card: #17181c;
  --bg-card-hover: #1d1e23;
  --line: #2a2b30;
  --line-soft: #232428;

  --gold: #c2a15f;
  --gold-soft: #a68a4f;
  --gold-bright: #d9bd82;

  --text: #f4f1ea;
  --text-muted: #a9a49b;
  --text-faint: #6f6b64;

  --success: #6fae7a;
  --error: #d17b6b;

  --font-serif: "Fraunces", "Georgia", serif;
  --font-sans: "Manrope", "Segoe UI", Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1160px;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Taille de base relevée (16px -> 18px) pour une lecture confortable par
     un public senior, sur PC comme sur mobile : comme la quasi-totalité des
     tailles du site sont en rem/em, ce seul réglage relève proportionnellement
     tout le texte (titres, paragraphes, boutons, nav, formulaires...). */
  font-size: 18px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: 0.2px;
}

h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem); font-weight: 400; }
h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.5rem); font-weight: 400; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--text-muted); }

/* ---------- Arabe : texte en lecture RTL, mise en page inchangée ----------
   Demande du client : garder la structure/l'agencement du site identique
   (nav, header, grilles) mais que le TEXTE arabe se lise correctement de
   droite à gauche. Réglage volontairement placé tôt dans la cascade : les
   règles de composants plus spécifiques plus bas dans ce fichier (ex.
   `.cta-band { text-align:center }`) continuent à gagner sur ce défaut, donc
   les blocs délibérément centrés (bandeaux CTA, en-têtes de section .center)
   restent centrés — seul le texte "par défaut" bascule à droite. Le html
   racine garde `dir="ltr"` (voir build_i18n.py) : cette classe ne mirrore
   pas la mise en page, seulement le sens de lecture du texte. */
.lang-ar p,
.lang-ar li,
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4,
.lang-ar figcaption,
.lang-ar label,
.lang-ar .hint,
.lang-ar .legal-content,
.lang-ar .value-row h3,
.lang-ar .value-row p,
.lang-ar blockquote,
.lang-ar .eyebrow,
.lang-ar .treatment-tag,
.lang-ar .breadcrumb,
.lang-ar .pill-nav a,
.lang-ar .card .card-link {
  direction: rtl;
  text-align: right;
}
/* .eyebrow et .card-link sont en inline-flex (icône/tiret + texte) : le
   sens rtl inverse aussi l'ordre visuel de leurs enfants, donc le tiret
   décoratif de .eyebrow et la flèche "←" de .card-link passent après le
   texte plutôt qu'avant — cohérent avec une lecture de droite à gauche. */
/* "Photos et trucs numérotés" (demande explicite) : on inverse l'ordre
   visuel de gauche à droite pour que la séquence se lise naturellement de
   droite à gauche, sans toucher au reste de la mise en page. */
.lang-ar .photo-row,
.lang-ar .value-row,
.lang-ar .check-list li {
  direction: rtl;
}
.lang-ar .value-row .num { text-align: center; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-soft));
  color: #171207;
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-outline {
  /* Fond + bordure en blanc semi-transparent (plutôt qu'une couleur fixe
     var(--line), trop proche des fonds sombres du site — contraste mesuré
     ~1.3:1, sous le minimum WCAG de 3:1 pour les limites de composants
     d'interface) : se détache ainsi de façon fiable quel que soit le fond
     exact derrière (--bg/--bg-alt/--bg-card/bandeau CTA...), sans avoir
     à choisir une teinte différente par section. Corrigé le 18/08 suite
     à un retour client (boutons à fond noir prêtant à confusion). */
  background: rgba(244, 241, 234, 0.06);
  color: var(--text);
  border-color: rgba(244, 241, 234, 0.4);
}
.btn-outline:hover { background: rgba(244, 241, 234, 0.1); border-color: var(--gold); color: var(--gold-bright); }

.btn-block { width: 100%; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 12, 14, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .container {
  max-width: 1560px;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  /* Réduit de 1.15rem à 1.05rem (19/08, 6e lot) : ce texte complet
     "L'EMPREINTE DENTAIRE STUDIO" à lui seul pesait ~460px dans l'en-tête,
     la plus grosse part du budget de largeur — le réduire légèrement
     libère assez de place pour que la nav (Nos traitements, Prendre RDV...)
     reste visible sur des écrans nettement plus courants, sans changer le
     texte ni la mise en page du logo lui-même. */
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--text);
}
/* nowrap/flex-shrink:0 uniquement en nav desktop pleine largeur (au-dessus
   du seuil hamburger) : sur mobile le logo doit pouvoir repasser sur 2
   lignes / se compresser si besoin, comme avant (sinon il dépasse l'écran
   et provoque un scroll horizontal sur les petits écrans). */
@media (min-width: 1291px) {
  .brand { white-space: nowrap; flex-shrink: 0; }
}
.brand svg { width: 30px; height: 30px; flex-shrink: 0; }
.brand-icon { height: 28px; width: auto; flex-shrink: 0; }
.brand strong { color: var(--gold-bright); font-weight: 500; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.nav-links a {
  /* 0.92rem → 0.85rem (19/08, 6e lot) : léger resserrement pour libérer de
     la place, texte des liens ("Nos traitements", "Prendre RDV"...) reste
     bien lisible (0.85rem × 18px de base = 15,3px). */
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.link-hint { font-size: 0.8em; opacity: 0.65; font-weight: 400; }
.nav-links a.has-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  text-align: center;
}
.nav-links a.has-hint .link-hint { margin-top: 1px; white-space: nowrap; }
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  border-bottom-color: var(--gold);
}
.nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-cta .btn { padding: 10px 16px; font-size: 0.88rem; white-space: nowrap; }

/* Rappel discret des réseaux dans l'en-tête : traits fins, couleur sourde,
   qui s'illumine légèrement en or au survol — pas les badges colorés du
   footer, juste un clin d'œil épuré cohérent avec la nav.
   19/08 (6e lot) : élément décoratif de moindre priorité — masqué dès que
   l'espace se resserre un peu (1740px), nettement AVANT le seuil de bascule
   du menu hamburger (1220px), pour ne jamais lui faire concurrencer "Nos
   traitements"/"Prendre RDV" pour la place disponible. */
.header-social { display: flex; align-items: center; gap: 8px; padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--line-soft); flex-shrink: 0; }
.header-social a {
  display: flex;
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}
.header-social a:hover, .header-social a:focus-visible {
  color: var(--gold-bright);
  transform: translateY(-1px);
}
.header-social svg { width: 15px; height: 15px; }
@media (max-width: 1740px) {
  .header-social { display: none; }
}

/* ---------- Sélecteur de langue (drapeau + menu déroulant) ---------- */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lang-switch-toggle:hover, .lang-switch-toggle:focus-visible {
  border-color: var(--gold-soft);
  color: var(--text);
}
.lang-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.lang-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.lang-switch.is-open .lang-chevron { transform: rotate(180deg); }
.lang-switch-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 172px;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  margin: 0;
  list-style: none;
  display: none;
  z-index: 60;
}
.lang-switch.is-open .lang-switch-menu { display: block; }
.lang-switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.88rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switch-item:hover, .lang-switch-item:focus-visible {
  background: rgba(194, 161, 95, 0.12);
  color: var(--text);
}
.lang-switch-item.is-current { color: var(--gold-bright); font-weight: 600; }
@media (max-width: 480px) {
  .lang-switch-toggle { padding: 6px; }
  .lang-switch-toggle .lang-chevron { display: none; }
  .lang-switch-menu { right: -12px; min-width: 160px; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 42px;
  height: 42px;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1290px) {
  .nav-links { display: none; }
  .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: flex; }

  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line-soft);
    padding: 16px 24px 24px;
  }
  .nav-links.is-open a { width: 100%; padding: 10px 0; }
  .nav-links.is-open a.has-hint { align-items: flex-start; text-align: left; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 110px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(194, 161, 95, 0.14), transparent 60%),
    radial-gradient(50% 50% at 10% 100%, rgba(194, 161, 95, 0.08), transparent 60%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.brand-lockup {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 56px;
  position: relative;
  aspect-ratio: 900 / 522;
  overflow: hidden;
}
.logo-layer {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}
/* Le logo est découpé en 3 calques (texte "Cabinet dentaire", dessin des
   dents, wordmark "l'Empreinte Studio") pour pouvoir animer chacun
   indépendamment : les dents "se dessinent" en zoomant depuis un plan plus
   large, le texte apparaît en défilement (balayage gauche → droite), comme
   s'il s'écrivait. */
.logo-layer-eyebrow {
  top: 0%;
  animation: logo-text-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.logo-layer-icon {
  top: 10.536%;
  transform-origin: 50% 50%;
  animation: logo-icon-zoom 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.logo-layer-wordmark {
  top: 43.678%;
  animation: logo-text-reveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.85s both;
}
@keyframes logo-icon-zoom {
  from { opacity: 0; transform: scale(1.55); filter: blur(3px); }
  65% { opacity: 1; }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes logo-text-reveal {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-4%); }
  to { clip-path: inset(0 0% 0 0); transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-layer { animation: none; clip-path: none; }
}
.hero h1 { margin-bottom: 20px; }
.hero .lead { font-size: 1.1rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 46px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  color: var(--text-faint);
  font-size: 0.92rem;
}
.hero-trust strong { display: block; color: var(--gold-bright); font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; }

.hero-savoir-faire {
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
  max-width: 52ch;
}
.hero-savoir-faire h3 {
  color: var(--gold-bright);
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.hero-savoir-faire p { font-size: 0.92rem; margin-bottom: 0.9em; }
.hero-savoir-faire p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Sections ---------- */
.section { padding: 90px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.grid {
  display: grid;
  gap: 24px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 32px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
/* Quand .card est un <a> (carte entièrement cliquable, voir "Domaines
   d'expertise" sur l'accueil) : garder le même style au clavier que
   .illustration-link, pas de contour de lien classique. */
a.card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.card:hover { border-color: var(--gold-soft); background: var(--bg-card-hover); }
.card .icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(194, 161, 95, 0.12);
  color: var(--gold-bright);
  margin-bottom: 20px;
  overflow: hidden;
}
.card .icon img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.card h3 { margin-bottom: 10px; }
.card .card-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold-bright); font-size: 0.95rem; font-weight: 600; margin-top: 8px;
}

/* ---------- Photos d'illustration (en attendant les vraies photos) ---------- */
.illustration-figure { margin: 0; }
.figure-pair {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.figure-pair .illustration-figure { flex: 1; margin-bottom: 0; min-width: 0; }
@media (max-width: 480px) {
  .figure-pair { flex-direction: column; }
}

/* ---------- Curseur "avant / après" ---------- */
.before-after {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.ba-before-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
}
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--gold-bright);
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gold-bright);
  border: 3px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.ba-tag {
  position: absolute;
  top: 12px;
  background: rgba(11, 12, 14, 0.72);
  color: var(--text);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
}
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.before-after-figure { margin: 0 0 40px; }
.before-after-figure figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- Galerie photo agrandissable (clic → fenêtre + navigation) ---------- */
.gallery-item { cursor: zoom-in; }
.gallery-item img { transition: opacity 0.2s ease; }
.gallery-item:hover img { opacity: 0.88; }
.gallery-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: var(--radius);
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 7, 0.94);
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox-figure {
  margin: 0;
  max-width: min(90vw, 1100px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
.lightbox-caption {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}
.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-faint);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.lightbox-close,
.lightbox-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lightbox-close:hover,
.lightbox-arrow:hover {
  background: rgba(194, 161, 95, 0.14);
  border-color: var(--gold-soft);
  color: var(--gold-bright);
}
.lightbox-close svg,
.lightbox-arrow svg { width: 20px; height: 20px; }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-arrow { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 640px) {
  .lightbox-close, .lightbox-arrow { width: 38px; height: 38px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-img { max-height: 68vh; }
}

/* ---------- Rangée photo à colonnes fixes (ex : les 5 photos onlay) ----------
   Remplace l'auto-fit par un nombre de colonnes imposé : 5 sur PC/tablette
   (toutes sur la même ligne), 3 puis 2 sur petit écran. */
.photo-row-fixed5 {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (min-width: 641px) {
  .photo-row-fixed5 {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ---------- Séquence de photos numérotées avec légende complète ----------
   Utilisée pour les suites d'illustrations "étape par étape" (ex : les 4
   photos de la microchirurgie endodontique) : contrairement à .photo-row,
   la légende n'est pas un simple figcaption discret mais un texte pleine
   phrase, plus grand et plus contrasté (demande client : rester lisible),
   et chaque image porte un numéro d'étape. Images jamais recadrées (même
   traitement que .is-diagram : fond clair encadré) car ce sont des
   illustrations médicales à fond blanc, pas des photos plein cadre. */
.photo-sequence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  margin: 32px 0 40px;
}
.photo-sequence-item {
  display: flex;
  flex-direction: column;
}
.photo-sequence-img-wrap {
  position: relative;
}
.photo-sequence-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #f5f1ea;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  box-sizing: border-box;
  padding: 8px;
}
.photo-sequence-num {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: #171207;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
}
.photo-sequence-item figcaption {
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  text-align: left;
}
.lang-ar .photo-sequence { direction: rtl; }
.lang-ar .photo-sequence-num { left: auto; right: 10px; }
.lang-ar .photo-sequence-item figcaption { text-align: right; }

/* ---------- Vidéo courte en boucle (présentation épurée) ---------- */
.video-feature {
  margin: 0 auto 40px;
  max-width: 320px;
}
.video-feature .video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #000;
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.55);
}
.video-feature video,
.video-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-feature figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-faint);
  text-align: center;
}
.illustration-figure img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
/* Ratio constant plutôt qu'une hauteur fixe en pixels : une hauteur fixe
   combinée à une largeur fluide (grille responsive) fait varier le cadrage
   de façon très agressive selon la largeur d'écran — recadrage excessif sur
   mobile notamment, où la colonne s'élargit mais la hauteur restait figée.
   Le ratio, lui, reste proportionnel à toutes les tailles d'écran. */
.illustration-figure:not(.is-portrait) img {
  aspect-ratio: 4 / 3;
  height: auto;
}
.illustration-figure figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-faint);
  text-align: center;
}
/* Photo détourée (fond transparent) : on l'encadre plutôt que de la recadrer */
.illustration-figure.is-cutout img {
  object-fit: contain;
  background: var(--bg-card);
  box-sizing: border-box;
  padding: 18px;
}
/* Schéma / diagramme à fond blanc : on l'encadre pour ne rien recadrer (les
   légendes touchent souvent les bords de l'image). Marge intérieure réduite
   (22px -> 8px) pour que l'image occupe le maximum de l'encadré : moins de
   bordure beige plate visible, tout en gardant l'encadré (et son ratio 4/3,
   donc la même taille globale) inchangé — seule la marge se réduit. */
.illustration-figure.is-diagram img {
  object-fit: contain;
  background: #f5f1ea;
  box-sizing: border-box;
  padding: 8px;
}
/* Photo au format portrait : on la centre à taille contenue plutôt que de la
   recadrer en bandeau large (perdrait l'essentiel du sujet) */
.illustration-figure.is-portrait img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  display: block;
  margin: 0 auto;
}

/* Photo "Nos domaines en détail" cliquable -> renvoie vers la discipline
   correspondante (traitements.html#ancre). Le lien enrobe toute la figure
   (photo + légende) : pas de style de lien classique (pas de bleu/souligné),
   juste un léger indice visuel au survol/focus, cohérent avec la galerie. */
.illustration-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.illustration-link .illustration-figure img {
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.illustration-link:hover .illustration-figure img {
  opacity: 0.88;
  border-color: var(--gold-soft);
}
.illustration-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* ---------- Media placeholder (photos à venir) ---------- */
.media-placeholder {
  position: relative;
  border: 1px dashed var(--gold-soft);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(194,161,95,0.05) 0 2px, transparent 2px 14px),
    var(--bg-card);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 24px;
  color: var(--text-faint);
}
.media-placeholder svg { width: 40px; height: 40px; color: var(--gold-soft); }
.media-placeholder .mp-title { color: var(--text-muted); font-weight: 600; font-size: 0.95rem; }
.media-placeholder .mp-sub { font-size: 0.88rem; }

/* ---------- Timeline / values list ---------- */
.value-row {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}
.value-row:last-child { border-bottom: none; }
.value-row .num { font-family: var(--font-serif); color: var(--gold); font-size: 1.1rem; width: 34px; flex-shrink: 0; }

/* ---------- Avis Google ---------- */
.reviews-pending {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.92rem;
  padding: 30px 0;
}
.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.reviews-score { font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold-bright); }
.review-stars { color: var(--gold); letter-spacing: 2px; font-size: 1.05rem; }
.reviews-count { color: var(--text-faint); font-size: 0.88rem; }
.reviews-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.review-card {
  background: #ffffff;
  border: 1px solid #e9e3d6;
  border-radius: var(--radius);
  padding: 26px;
  flex: 1 1 300px;
  max-width: 380px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.review-card .review-stars { display: block; margin-bottom: 12px; }
.review-text {
  font-size: 0.92rem;
  color: #3c3a35;
  line-height: 1.6;
  margin: 0 0 16px;
}
.review-author { font-size: 0.92rem; color: #8a857a; }
.reviews-cta { text-align: center; margin-top: 34px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, #17181c, #0e0f11);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 56px;
  text-align: center;
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { max-width: 50ch; margin-left: auto; margin-right: auto; }
.cta-band .hero-actions { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 60px 0 30px;
  background: var(--bg-alt);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h4 { color: var(--text); font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a, .footer-grid p { color: var(--text-muted); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--gold-bright); }
.footer-hint-row { display: flex; align-items: baseline; flex-wrap: wrap; row-gap: 2px; }
.footer-hint-row .footer-link-label { flex: 0 0 auto; white-space: nowrap; }
.footer-hint-row .link-hint { flex: 1 1 auto; }
.footer-contact-row { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; }
.footer-contact-row svg { flex-shrink: 0; margin-top: 3px; color: var(--gold-bright); }
.footer-contact-row p { margin: 0; }

/* Horaires : alignement jour / heure en colonnes, plutôt qu'un bloc de texte
   avec des ":" qui ne tombent pas au même endroit selon la longueur du jour */
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  border-bottom: 1px dashed var(--line-soft);
}
.hours-list li:last-child { border-bottom: none; }
.hours-list .hours-day { color: var(--text); }
.hours-list .hours-closed { color: var(--text-faint); }

/* Widgets Instagram / localisation : icônes rondes aux couleurs de chaque
   application, interactives (survol), qui renvoient vers les liens externes */
.app-widgets { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.app-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.app-widget:hover, .app-widget:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
}
.app-widget svg { width: 24px; height: 24px; }
.app-widget-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.app-widget-maps { background: #ffffff; }

.footer-brand-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
  opacity: 0.9;
}
.footer-brand-mark img { height: 34px; width: auto; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint);
  font-size: 0.9rem;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Page header (sous-pages) ---------- */
.page-header {
  padding: 70px 0 50px;
  border-bottom: 1px solid var(--line-soft);
  background: radial-gradient(50% 80% at 90% 0%, rgba(194,161,95,0.10), transparent 60%);
}
.page-header p.lead { max-width: 60ch; }
.breadcrumb { font-size: 0.88rem; color: var(--text-faint); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--gold-bright); }

/* ---------- Anchor nav (traitements) ---------- */
.pill-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 30px 0 0;
}
.pill-nav a {
  padding: 9px 18px;
  background: rgba(244, 241, 234, 0.06);
  border: 1px solid rgba(244, 241, 234, 0.4);
  border-radius: 999px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.pill-nav a:hover { background: rgba(244, 241, 234, 0.1); border-color: var(--gold); color: var(--gold-bright); }
.pill-nav-sub { margin-top: 10px; }
.pill-nav-sub a { padding: 6px 14px; font-size: 0.85rem; opacity: 0.85; }

.treatment-block {
  padding: 70px 0;
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 100px;
}
.treatment-block:last-child { border-bottom: none; }
.treatment-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: start;
}
@media (max-width: 880px) {
  .treatment-grid { grid-template-columns: 1fr; }
}
.treatment-tag {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.check-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; gap: 10px; color: var(--text-muted); font-size: 0.95rem; }
.check-list a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
.check-list a:hover { color: var(--gold-bright); }
.check-list svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 40px;
}
@media (max-width: 600px) {
  .form-card { padding: 24px; }
}
.form-section-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--gold-bright);
  margin: 36px 0 18px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.field .hint { font-size: 0.88rem; color: var(--text-faint); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
}
textarea { min-height: 110px; resize: vertical; }

.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.radio-pill input { display: none; }
.radio-pill:has(input:checked) {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(194, 161, 95, 0.08);
}

.checkbox-row { display: flex; gap: 10px; align-items: flex-start; }
.checkbox-row input { margin-top: 4px; }
.checkbox-row label { font-size: 0.92rem; color: var(--text-muted); font-weight: 400; }
.checkbox-row a { color: var(--gold-bright); text-decoration: underline; }

.honeypot-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-alert {
  display: none;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.form-alert.show { display: block; }
.form-alert.success { background: rgba(111, 174, 122, 0.12); border: 1px solid var(--success); color: #bfe3c4; }
.form-alert.error { background: rgba(209, 123, 107, 0.12); border: 1px solid var(--error); color: #f0bcb0; }

.info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  /* Aligner le HAUT des 3 cartes (icône/titre alignés sur la même ligne),
     sans forcer les 3 cartes à la même hauteur : par défaut une grille
     étire ses items (align-items:stretch) pour occuper toute la hauteur
     de la ligne, ce qui gonflait artificiellement les cartes au texte
     court ("Par téléphone", "Par email") pour égaler la plus haute
     ("Délai de réponse") — chaque carte garde maintenant sa hauteur
     naturelle, seul le point de départ (le haut) reste symétrique. */
  align-items: start;
}
@media (max-width: 880px) { .info-strip { grid-template-columns: 1fr; } }
.info-strip .card { padding: 24px; }
.info-strip h3 { font-size: 1rem; margin-bottom: 6px; }
.info-strip p { margin: 0; font-size: 0.95rem; }

/* ---------- Legal pages ---------- */
.legal-content h2 { margin-top: 2.2em; scroll-margin-top: 100px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content ul { color: var(--text-muted); }
.placeholder-note {
  display: inline-block;
  background: rgba(194,161,95,0.12);
  color: var(--gold-bright);
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 0.9em;
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.section-narrow { max-width: 760px; margin: 0 auto; }

/* ==========================================================================
   Ajustements d'interface — 31/10/2026
   (bloc ajouté à la fin : il suffit de le supprimer pour revenir à l'état précédent)
   ========================================================================== */

/* En-tête : la règle .nav (padding: 16px 0) écrasait les marges latérales du
   .container, d'où un logo et un sélecteur de langue collés aux bords de l'écran. */
.site-header .container.nav { padding-left: 24px; padding-right: 24px; }
@media (max-width: 520px) {
  .brand { font-size: 0.9rem; gap: 8px; }
  .brand-icon { height: 20px; }
}
@media (max-width: 440px) {
  .brand-icon { display: none; }   /* le logo complet est affiché juste dessous, dans l'accueil */
}

/* Pages à colonne de texte étroite : le titre, le fil d'Ariane et le chapô
   prennent la même largeur centrée que la colonne (même bord gauche). */
body:has(.section-narrow) .page-header .container { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Boutons : pas de coupure au milieu de « rendez-vous », pas de bouton étroit. */
.btn { text-align: center; text-wrap: balance; }
@media (max-width: 560px) {
  .hero-actions .btn, .cta-band .btn { width: 100%; max-width: 360px; }
}

/* Schémas et illustrations encadrées : le cadre suit la proportion de l'image
   (plus de grand vide autour d'un schéma large). */
.illustration-figure.is-cutout img,
.illustration-figure.is-diagram img { aspect-ratio: auto; height: auto; max-height: 560px; }

/* Curseur avant/après sur des images verticales : cadre vertical, de taille raisonnable. */
.before-after.ba-tall { max-width: 520px; margin-left: auto; margin-right: auto; }

/* Formulaires */
.honeypot-field + .form-section-title { margin-top: 0; padding-top: 0; border-top: none; }
input[type="file"] { padding: 8px 10px; }
input[type="file"]::file-selector-button {
  background: var(--bg-card-hover);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  margin-right: 12px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--gold); color: var(--gold-bright); }
.checkbox-row input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; accent-color: var(--gold); }

/* Cartes de contact : une par ligne, icône à gauche (l'adresse email longue
   déformait les trois colonnes). */
.info-strip { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.info-strip .card { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px 24px; }
.info-strip .card svg { grid-row: 1 / span 2; margin-top: 4px; margin-bottom: 0 !important; }
.info-strip .card p { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .info-strip .card { display: block; }
  .info-strip .card svg { margin-top: 0; margin-bottom: 10px !important; }
}

/* Pied de page : sur très petit écran (320 px), l'adresse email dépassait de 8 px ;
   sur tablette, la 1re colonne est élargie pour que l'adresse tienne sur une ligne. */
@media (max-width: 380px) {
  .footer-contact-row { min-width: 0; overflow-wrap: anywhere; }
  .footer-contact-row > * { min-width: 0; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .footer-grid { grid-template-columns: minmax(320px, 1.6fr) 1fr 1fr; gap: 28px; }
}

/* Grilles de 3 cartes / 3 photos : 2 colonnes sur tablette (au lieu d'une seule colonne très large). */
@media (min-width: 561px) and (max-width: 880px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Case à cocher assortie au thème sombre */
.checkbox-row input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  display: grid; place-content: center;
  background: var(--bg); border: 1px solid rgba(244, 241, 234, 0.5); border-radius: 6px;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"]::before {
  content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform 0.12s ease;
  background: var(--gold-bright);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.checkbox-row input[type="checkbox"]:checked { border-color: var(--gold); }
.checkbox-row input[type="checkbox"]:checked::before { transform: scale(1); }
.checkbox-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Très petits écrans (320 px) : un mot ou une adresse trop long passe à la ligne au lieu de faire déborder la page. */
body { overflow-wrap: break-word; }

/* Les 5 photos onlay : 2 colonnes sur les plus petits écrans (3 colonnes de 77 px débordaient à 320 px). */
@media (max-width: 420px) {
  .photo-row-fixed5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}

/* ==========================================================================
   Design system — standards (31/10/2026, lot 15)
   Identité noir / or conservée. Bloc ajouté à la fin : réversible.
   Objectifs : WCAG 2.2 AA, cibles tactiles 44 px, zones sûres iPhone,
   mouvement réduit, typographie et espacements fluides.
   ========================================================================== */

:root {
  --text-faint: #948f87;                      /* était #6f6b64 (3,4 à 3,9:1) → 5,2:1 et plus sur tous les fonds */
  --field-border: #77777a;                    /* bordure des champs : 3:1 minimum (WCAG 1.4.11) */
  --space-section: clamp(56px, 8vw, 96px);
}

html {
  color-scheme: dark;                         /* sélecteur de date, barres de défilement, champs natifs en sombre */
  scroll-padding-top: 104px;                  /* une ancre ne passe plus sous l'en-tête fixe */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-bottom: env(safe-area-inset-bottom);
}
::selection { background: rgba(194, 161, 95, 0.35); color: var(--text); }
a, button, summary, label, input, select, textarea { -webkit-tap-highlight-color: rgba(217, 189, 130, 0.18); }
.btn, button, summary, .pill-nav a { touch-action: manipulation; }

/* Typographie : titres équilibrés, pas de mot isolé en fin de paragraphe */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
::placeholder { color: var(--text-faint); opacity: 1; }

/* Titres du pied de page et du bloc d'accroche : niveau h2 (hiérarchie correcte), même rendu qu'avant */
.hero-savoir-faire h2 { color: var(--gold-bright); font-size: 1.05rem; font-weight: 500; margin-bottom: 14px; }
.footer-grid h2.footer-title {
  color: var(--text); font-size: 0.88rem; font-weight: 500; line-height: 1.15;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px;
}

/* Espacements fluides : moins de vide sur mobile, même respiration sur grand écran */
.section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.hero { padding-top: clamp(72px, 9vw, 110px); padding-bottom: clamp(56px, 7vw, 90px); }
.page-header { padding-top: clamp(48px, 6vw, 70px); padding-bottom: clamp(36px, 4vw, 50px); }

/* Zones sûres (encoche, îlot dynamique, barre d'accueil iPhone, mode paysage) */
.container {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
.site-header { padding-top: env(safe-area-inset-top); }
.site-header .container.nav {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* Lien d'évitement (clavier, lecteurs d'écran) */
.skip-link {
  position: absolute; left: 16px; top: -72px; z-index: 300;
  padding: 12px 20px; border-radius: 999px;
  background: var(--gold-bright); color: #14110a; font-weight: 700; font-size: 0.95rem;
  transition: top 0.15s ease;
}
.skip-link:focus { top: max(16px, env(safe-area-inset-top)); }
main:focus { outline: none; }

/* Focus clavier visible partout (WCAG 2.4.7 / 2.4.11) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, .radio-pill:focus-within {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 2px; border-color: var(--gold-bright); }
.gallery-item img:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: var(--radius); }

/* Champs : bordure à 3:1, survol et saisie clairs */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="file"], select, textarea {
  border-color: var(--field-border);
}
input:hover, select:hover, textarea:hover { border-color: var(--gold-soft); }
input, select, textarea { caret-color: var(--gold-bright); }

/* Contrastes corrigés (4,5:1 minimum) */
.link-hint { opacity: 1; color: var(--text-faint); }
.review-author { color: #625d54; }

/* Survols uniquement sur appareils avec souris (pas de survol « collé » au doigt) */
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -14px rgba(217, 189, 130, 0.6); }
  .btn-outline:hover { transform: translateY(-1px); }
}

/* Écrans tactiles : cibles de 44 px minimum (WCAG 2.5.5, recommandation Apple et Google) */
@media (pointer: coarse) {
  .nav-toggle { width: 44px; height: 44px; }
  .lang-switch-toggle { min-width: 44px; min-height: 44px; }
  .lang-switch-item { min-height: 44px; }
  .btn { min-height: 48px; }
  .pill-nav a, .pill-nav-sub a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-grid ul { gap: 0; }
  .footer-grid li > a, .footer-grid .footer-hint-row { display: flex; align-items: center; min-height: 44px; }
  .footer-contact-row { min-height: 44px; align-items: center; }
  .app-widget, .header-social a { min-width: 44px; min-height: 44px; }
  .breadcrumb a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
  .nav-links.is-open a { min-height: 44px; display: flex; align-items: center; }
  .nav-links.is-open a.has-hint { align-items: flex-start; justify-content: center; flex-direction: column; }
  select, input[type="text"], input[type="email"], input[type="tel"], input[type="date"] { min-height: 48px; }
  .radio-pill { min-height: 44px; }
  .checkbox-row { gap: 14px; }
  .checkbox-row label { padding: 8px 0; }
  .faq-item summary { min-height: 48px; }
  .card-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Mouvement réduit : plus aucune animation ni défilement animé */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Contraste renforcé demandé par le système */
@media (prefers-contrast: more) {
  :root { --text-muted: #cfcac1; --text-faint: #b8b3aa; --line: #5a5b61; --line-soft: #4a4b51; --field-border: #a8a8ac; }
}

/* Impression : fond blanc, sans menus ni médias */
@media print {
  :root { --bg: #fff; --bg-alt: #fff; --bg-card: #fff; --bg-card-hover: #fff; --text: #000; --text-muted: #222; --text-faint: #444; --line: #bbb; --line-soft: #ddd; --gold: #5c4519; --gold-soft: #5c4519; --gold-bright: #5c4519; }
  .site-header, .nav-toggle, .skip-link, .lang-switch, .video-feature, .before-after, .app-widgets, .cta-band .btn { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .section, .hero, .page-header { padding-top: 24px; padding-bottom: 24px; }
}

/* Titres des cartes de contact (page « Adresser un patient ») : h2 pour une hiérarchie correcte, rendu identique */
.info-strip h2.card-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 500; line-height: 1.3; margin-bottom: 6px; }

/* Niveaux de titres corrigés sur 2 pages (le-cabinet, péri-implantite) : même taille qu'avant */
.as-h4 { font-size: 1em; }
.as-h3 { font-size: 1.3rem; }

/* Lien de marque de l'en-tête : zone cliquable de 44 px de haut */
.brand { min-height: 44px; }

/* ==========================================================================
   Lot 16 (01/11/2026) — navigation et parcours
   ========================================================================== */

/* En-tête : un seul bouton « Prendre RDV » visible à la fois.
   Grand écran : le bouton doré ; petit écran (menu hamburger) : la ligne du menu. */
@media (min-width: 1291px) { .nav-links .nav-rdv-item { display: none; } }
@media (max-width: 1290px) { .nav-cta .nav-rdv { display: none; } }

/* Bouton « Prendre RDV » de la barre du haut : doré en relief, avec un reflet discret */
.nav-cta .nav-rdv {
  position: relative; overflow: hidden; isolation: isolate;
  color: #1a1408; font-weight: 700;
  background: linear-gradient(180deg, #f1dca6 0%, #d9bd82 48%, #b48f4a 100%);
  border: 1px solid rgba(255, 238, 196, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(90, 62, 12, 0.28), 0 8px 20px -8px rgba(217, 189, 130, 0.65);
}
.nav-cta .nav-rdv::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg); animation: rdv-sheen 7s ease-in-out infinite;
}
@keyframes rdv-sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (hover: hover) { .nav-cta .nav-rdv:hover { transform: translateY(-1px); filter: brightness(1.05); } }
.nav-cta .nav-rdv:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(90, 62, 12, 0.35), 0 4px 10px -6px rgba(217, 189, 130, 0.6); }
/* Même mise en valeur dans le menu des petits écrans */
.nav-links.is-open .nav-rdv-item a {
  background: linear-gradient(180deg, #f1dca6 0%, #d9bd82 48%, #b48f4a 100%);
  color: #1a1408; border-radius: 999px; padding: 10px 20px; border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 20px -8px rgba(217, 189, 130, 0.6);
}
.nav-links.is-open .nav-rdv-item a .link-hint { color: #3b2d0f; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nav-cta .nav-rdv::after { animation: none; display: none; } }

/* Nos traitements : grands choix du haut, cartes de soins cliquables, fin de page de soin */
.pill-nav-big a { padding: 14px 24px; font-size: 1.02rem; min-height: 52px; display: inline-flex; align-items: center; }
.care-block { margin-top: 36px; }
.care-title { font-size: 1.25rem; margin: 0 0 4px; }
.care-help { margin: 0 0 18px; font-size: 0.95rem; }
.care-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .care-grid { grid-template-columns: minmax(0, 1fr); } }
.care-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 84px; padding: 18px 22px; color: var(--text);
  background: var(--bg-card); border: 1px solid rgba(244, 241, 234, 0.22); border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.care-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.care-card-title { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.3; color: var(--gold-bright); }
.care-card-desc { font-size: 0.95rem; line-height: 1.5; color: var(--text-muted); }
.care-card-arrow { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; color: var(--gold-bright); transition: transform 0.2s ease; }
@media (hover: hover) {
  .care-card:hover, .specialty-link:hover { border-color: var(--gold); background: var(--bg-card-hover); }
  .care-card:hover .care-card-arrow, .specialty-link:hover .care-card-arrow { transform: translateX(4px); }
  .lang-ar .care-card:hover .care-card-arrow, .lang-ar .specialty-link:hover .care-card-arrow { transform: translateX(-4px); }
}
.next-steps h2 { margin-bottom: 18px; }
.next-sub { font-size: 1.1rem; margin: 28px 0 14px; color: var(--text); }
.specialty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .specialty-grid { grid-template-columns: minmax(0, 1fr); } }
.specialty-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap;
  min-height: 72px; padding: 16px 22px; color: var(--text);
  background: rgba(244, 241, 234, 0.05); border: 1px solid rgba(244, 241, 234, 0.3); border-radius: 999px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.specialty-name { font-family: var(--font-serif); font-size: 1.1rem; }
.specialty-tag { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); text-align: right; }
.lang-ar .specialty-tag { margin-left: 0; margin-right: auto; text-align: left; }
.next-all { margin: 30px 0 0; }

/* Formulaire de rendez-vous en 2 étapes */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.form-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-step[hidden] { display: none; }
.form-progress { display: flex; gap: 8px; margin: 0 0 22px; }
.form-progress-step {
  flex: 1; padding: 10px 14px; font-size: 0.82rem; letter-spacing: 0.04em; text-align: center;
  color: var(--text-faint); border-bottom: 3px solid rgba(244, 241, 234, 0.18);
}
.form-progress-step.is-current { color: var(--gold-bright); border-bottom-color: var(--gold-bright); font-weight: 600; }
.form-actions { display: flex; gap: 12px; margin-top: 26px; }
.form-actions .btn-block { flex: 1; width: auto; }
.form-actions .btn-outline { flex: 0 0 auto; }
.label-note { font-weight: 400; font-size: 0.85em; color: var(--text-muted); }

/* Mentions de prudence : petites, discrètes, sans alourdir la page */
.legal-note { font-size: 0.76rem; line-height: 1.55; color: var(--text-faint); text-align: center; max-width: 54ch; margin: 18px auto 0; letter-spacing: 0.01em; }
.checkbox-row label { font-size: 0.84rem; line-height: 1.55; }

/* Ambiance : une lumière dorée très douce, comme un éclairage de cabinet, qui flotte lentement en arrière-plan.
   Discrète (12 % d'opacité au plus), sans effet sur la lisibilité ; immobile si le mouvement est réduit. */
body { position: relative; }
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, rgba(217, 189, 130, 0.12), transparent 62%),
    radial-gradient(34vmax 34vmax at 92% 32%, rgba(214, 160, 110, 0.08), transparent 60%),
    radial-gradient(42vmax 42vmax at 30% 95%, rgba(217, 189, 130, 0.08), transparent 62%);
  animation: glow-drift 45s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
@media print { body::before { display: none; } }
/* Les bandeaux et le pied de page laissent transparaître la lumière */
.section-alt { background: rgba(20, 21, 24, 0.6); }
.site-footer { background-color: rgba(14, 15, 17, 0.8); }

/* Curseur avant/après : poignée avec flèches (toujours visibles) et léger éclat pendant la démonstration */
.ba-divider::after {
  content: "\2039\00a0\203A"; display: flex; align-items: center; justify-content: center;
  color: #14110a; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: 0;
}
.before-after.ba-hint .ba-divider::after { box-shadow: 0 0 0 6px rgba(217, 189, 130, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4); }

/* Formulaire en 2 étapes : mobile */
@media (max-width: 560px) {
  .form-progress-step:not(.is-current) { display: none; }
  .form-progress-step { padding: 8px 4px; }
  .form-actions { flex-direction: column-reverse; gap: 10px; }
  .form-actions .btn, .form-actions .btn-block { width: 100%; flex: 0 0 auto; }
}

/* Fin de page de soin : liens des autres spécialités plus nets sur mobile */
.specialty-link { border-radius: 18px; }
@media (max-width: 560px) {
  .specialty-tag { display: none; }
  .cta-band .btn { padding-left: 20px; padding-right: 20px; }
}

/* ==========================================================================
   Lot 17 (01/11/2026) — pages de soins : texte et photos répartis sur toute la largeur
   Texte à gauche, photos à droite (qui restent visibles pendant la lecture) ;
   rangées de photos (couronne, onlay, étapes) pleine largeur et en grand.
   ========================================================================== */
.reading-layout { max-width: var(--container); }
.split {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 5vw, 72px); align-items: start; margin: 0 0 clamp(36px, 5vw, 64px);
}
.split-text { min-width: 0; max-width: 68ch; }
.split-text > :first-child { margin-top: 0; }
.split-media { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.split-media > * { margin-bottom: 0 !important; }
@media (min-width: 901px) { .split-media { position: sticky; top: 112px; } }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split-text { max-width: none; } }
.split-solo { display: block; }
.split-solo .split-text { max-width: 76ch; }
.split-media .illustration-figure.is-portrait img { width: 100%; max-height: 680px; object-fit: contain; }
.split-media .illustration-figure.is-portrait { max-width: 520px; }
@media (max-width: 900px) { .split-media .illustration-figure.is-portrait { max-width: 420px; } }

.wide-media { margin: 0 0 clamp(36px, 5vw, 64px); }
.wide-media .photo-row {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 28px) !important; margin: 0 !important;
}
@media (max-width: 700px) { .wide-media .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { .wide-media .photo-row { grid-template-columns: minmax(0, 1fr) !important; } }
.wide-media .photo-row .illustration-figure.is-portrait img { width: 100%; height: auto; max-width: none; }
.wide-media .photo-row figcaption { font-size: 0.92rem; color: var(--text-muted); }
.wide-media .photo-sequence { gap: clamp(16px, 2.4vw, 30px); }

/* ===== Lot 18 : parcours « Que recherchez-vous ? », barre mobile, blog / FAQ ===== */
.intent-nav{margin:0 0 28px;text-align:center}
.intent-title{font-family:var(--font-display,inherit);font-size:1.15rem;margin:0 0 14px}
.intent-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.intent-chip{display:inline-block;padding:11px 18px;border:1px solid rgba(201,169,110,.45);border-radius:999px;color:inherit;text-decoration:none;font-size:.95rem;line-height:1.3;background:rgba(255,255,255,.03)}
.intent-chip:hover,.intent-chip:focus-visible{border-color:#c9a96e;background:rgba(201,169,110,.12)}
.intent-sep{margin:16px 0 0;font-size:.9rem;opacity:.8}
.mobile-cta{display:none}
@media (max-width:760px){
  .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(11,12,14,.94);border-top:1px solid rgba(201,169,110,.3);backdrop-filter:blur(8px)}
  .mobile-cta .btn{display:block;width:100%;text-align:center}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
.narrow-faq{max-width:860px}
.faq-item{border-bottom:1px solid rgba(255,255,255,.12)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-weight:600;font-size:1.05rem;line-height:1.4;position:relative;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:1.5rem;color:#c9a96e}
.faq-item[open] summary::after{content:"–"}
.faq-a{padding:0 0 18px}
.faq-a p{margin:0;max-width:70ch;line-height:1.7}
.center-actions{text-align:center}
.lang-ar .faq-item summary{padding:18px 0 18px 36px}
.lang-ar .faq-item summary::after{right:auto;left:4px}

/* ===== Sous-menu « Nos traitements » ===== */
.nav-links .has-sub{position:relative}
.nav-links .subnav{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:-12px;min-width:240px;background:var(--bg-alt);border:1px solid var(--line-soft);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.nav-links .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.nav-links .has-sub:hover .subnav,.nav-links .has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:none}
.nav-links .subnav a{display:block;padding:10px 12px;border-radius:8px;border-bottom:0;white-space:nowrap;font-size:.9rem}
.nav-links .subnav a:hover,.nav-links .subnav a:focus-visible{background:rgba(201,169,110,.12);color:var(--text)}
.lang-ar .nav-links .subnav{left:auto;right:-12px}
@media (max-width:1290px){
  .nav-links.is-open .subnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 4px 14px;min-width:0}
  .nav-links.is-open .subnav a{padding:8px 0;font-size:.85rem;opacity:.85}
  .nav-links.is-open .has-sub::after{display:none}
}
@media (prefers-reduced-motion:reduce){.nav-links .subnav{transition:none}}

/* ===== Blog : photos d'illustration par thème ===== */
.faq-wrap{max-width:1080px}
.faq-wrap:not(.has-media) .faq-main{max-width:860px}
.faq-media{margin:0 0 24px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);align-self:start}
.faq-media img{display:block;width:100%;height:auto}
.faq-wrap.has-media{display:flex;flex-direction:column}
.faq-wrap.has-media .faq-media{order:-1}
@media (min-width:960px){
  .faq-wrap.has-media{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:44px;align-items:start}
  .faq-wrap.has-media .faq-media{order:0;position:sticky;top:100px;margin:56px 0 0}
}
@media (max-width:959px){.faq-media img{max-height:300px;object-fit:cover}}

/* ===== Le cabinet : trois photos plus grandes, sans cadre ===== */
.plateau-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;max-width:1280px;margin:0 auto}
.plateau-photo{margin:0 0 18px;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:#111}
.plateau-photo img{width:100%;height:100%;object-fit:cover;display:block}
.plateau-item h3{margin:0 0 8px}
.plateau-item p{margin:0;max-width:34ch}
.plateau-item:nth-child(1) .plateau-photo img{object-position:35% 50%}
.plateau-item:nth-child(3) .plateau-photo img{object-position:60% 50%}
@media (max-width:900px){.plateau-grid{grid-template-columns:1fr;gap:34px}.plateau-photo{aspect-ratio:4/3}.plateau-item:nth-child(2) .plateau-photo{aspect-ratio:4/5}}
.container.container-wide{max-width:1320px}

/* ===== Lot 19 : pages de spécialité, traitements allégé ===== */
.treat-title-link{color:inherit;text-decoration:none}
.treat-title-link:hover,.treat-title-link:focus-visible{color:var(--gold-bright,#d9b878)}
.treat-photo-link{display:block;border-radius:18px;transition:transform .25s ease}
.treat-photo-link:hover{transform:translateY(-3px)}
.treat-more{display:inline-flex;gap:8px;align-items:center;margin-top:10px;color:var(--gold-bright,#d9b878);text-decoration:none;font-weight:600;min-height:44px}
.treat-more:hover{text-decoration:underline}
.care-grid.names-only .care-card{min-height:0;padding:16px 20px}
.care-grid.names-only .care-card-title{font-size:1.02rem}
.detail-lead{font-size:1.08rem;line-height:1.75;max-width:62ch}
.consult-wide{grid-template-columns:1fr !important;max-width:1100px}
.consult-wide .illustration-figure{max-width:none}
.consult-wide .illustration-figure img{width:100%;height:auto;border-radius:18px}
.consult-wide .detail-lead{font-size:1.18rem;max-width:72ch}
@media (min-width:901px){.consult-wide{display:flex;flex-direction:column-reverse}}
.faq-main > h2{color:var(--gold-bright);font-weight:700}
.treat-title-link{color:var(--gold-bright)}
.treat-title-link:hover,.treat-title-link:focus-visible{color:#f0d9a3;text-decoration:underline;text-underline-offset:6px}
.plateau-photo{aspect-ratio:4/5}
.plateau-cap{margin:0;font-size:1rem;font-weight:600;letter-spacing:.01em;color:var(--text)}
.plateau-item{display:block}
@media (max-width:900px){.plateau-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.plateau-photo,.plateau-item:nth-child(2) .plateau-photo{aspect-ratio:4/5}}
@media (max-width:480px){.plateau-grid{gap:14px}.plateau-cap{font-size:.92rem}}

/* ===== Lot 21 : pages de soin — texte sur toute la largeur, photos centrées et plus grandes ===== */
.reading-layout{max-width:1200px}
@media (min-width:901px){
  .split{display:block}
  .split-text{max-width:1040px}
  .split-text p{font-size:1.06rem;line-height:1.75}
  .split-text > p{orphans:3;widows:3}
  .split-media{position:static;margin:clamp(36px,4vw,56px) auto 0;max-width:900px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,36px);align-items:start}
  .split-media > *{margin:0 !important}
  .split-media > :only-child{grid-column:1 / -1;justify-self:center;width:min(100%,560px)}
  .split-media > :first-child:nth-last-child(3){grid-column:1 / -1;justify-self:center;width:min(100%,440px)}
  .split-media .illustration-figure.is-portrait{max-width:440px;justify-self:center}
  .split-solo .split-text{max-width:1040px}
}

@media (min-width:901px){.wide-media{max-width:1000px;margin-left:auto;margin-right:auto}}

/* ===== Lot 22 : grille commune, rythme vertical, légendes homogènes (pages de soin) ===== */
@media (min-width:901px){
  .reading-layout{max-width:1080px}
  .split-text{max-width:980px;margin-left:auto;margin-right:auto}
  .split-media{max-width:980px;margin-top:52px}
  .wide-media{max-width:980px;margin:56px auto clamp(40px,5vw,64px)}
  .wide-media .photo-sequence{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:24px}
  .wide-media .photo-sequence:not(:has(> :nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .wide-media .photo-row-fixed5{display:flex !important;flex-wrap:wrap;justify-content:center;gap:24px !important}
  .wide-media .photo-row-fixed5 > *{flex:0 0 calc((100% - 48px)/3);min-width:0}
}
.split-media figcaption,.wide-media .photo-row figcaption,.wide-media figcaption:not(.photo-sequence-cap){text-align:center;font-size:.9rem;line-height:1.5;margin:12px auto 0;max-width:46ch;color:var(--text-muted)}
.wide-media + .wide-media{margin-top:0}
.photo-sequence-item{margin:0}
.wide-media .photo-sequence-item figcaption{text-align:left;max-width:none;margin:14px 0 0;font-size:.95rem;color:var(--text)}
.lang-ar .wide-media .photo-sequence-item figcaption{text-align:right}

/* ===== Lot 23 : chaque photo placée sous le paragraphe qu'elle illustre ===== */
.split-flow{max-width:980px;margin:0 auto}
.split-flow .split-text{max-width:none}
.media-inline{margin:clamp(26px,3vw,40px) auto;display:flex;justify-content:center}
.media-inline > figure{margin:0 !important;width:min(100%,600px)}
.media-inline > figure:has(img[style*="aspect-ratio:0."]){width:min(100%,420px)}
.media-inline > figure.before-after-figure{width:min(100%,640px)}
.media-inline figcaption{text-align:center;font-size:.9rem;line-height:1.5;margin:12px auto 0;max-width:46ch;color:var(--text-muted)}
.split-flow .wide-media{max-width:none;margin:clamp(26px,3vw,40px) 0}
.split-flow .wide-media .photo-sequence{margin:0}
@media (max-width:900px){.media-inline{margin:24px auto}.media-inline > figure{width:100%}.media-inline > figure:has(img[style*="aspect-ratio:0."]){width:min(100%,360px)}}