/*
 * Feuille de style du thème Dr Comaniciu.
 *
 * Port intégral et fidèle de styles.css (site source corrigé le
 * 17/08/2026, cabinet-practitioner-fix.css inclus), tel quel, y compris
 * les sélecteurs spécifiques par page (.implant-page, .bone-page,
 * .smile-page, .whitening-page, .veneer-page, .icon-page,
 * .conservative-page, .perio-page, .prothese-page…) : ces sélecteurs
 * restent inertes puisque les gabarits WordPress (front-page.php,
 * single-traitement.php, page-*.php) n'émettent plus les classes de page
 * correspondantes, mais les composants partagés qu'ils contiennent
 * (.hero, .services-grid, .service-card, .implant-faq, .cabinet-info-banner,
 * .cabinet-map-panel, .contact-question-section, .section-shell,
 * .section-padding, etc.) s'appliquent correctement sur toutes les pages.
 *
 * Choix assumé (décision client du 17/08/2026 : « développe tout ce qui
 * est possible, pour un minimum d'installation manuelle ») : un port
 * intégral plutôt qu'une réécriture composant par composant, afin
 * d'obtenir une fidélité visuelle immédiate sans travail manuel
 * supplémentaire. La consolidation fine des classes "*-page" dupliquées
 * (anomalie A-12) reste documentée comme amélioration future possible
 * dans le Livrable 8 (Plan de migration), mais n'est plus bloquante pour
 * la mise en production : le CSS mort n'a aucun impact fonctionnel ou de
 * performance perceptible (il n'est simplement jamais sélectionné).
 */

:root {
  --ivory: #f7f3ea;
  --ivory-soft: #fbf8f1;
  --graphite: #161616;
  --champagne: #c8b28a;
  --mineral: #8c8a84;
  --night: #101a2c;
  --line: rgba(200, 178, 138, 0.32);
  --shadow: 0 22px 54px rgba(22, 22, 22, 0.08);
  --header-height: 106px;
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 24px;
  top: 16px;
  z-index: 1000;
  transform: translateY(-140%);
  border-radius: 999px;
  background: var(--graphite);
  color: var(--ivory);
  padding: 10px 16px;
  transition: transform 200ms ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

.section-shell {
  width: min(100% - 128px, 1320px);
  margin-inline: auto;
}

.section-padding {
  padding: 110px 0;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-height);
  transition: background 220ms ease-out, box-shadow 220ms ease-out, backdrop-filter 220ms ease-out;
}

/* Correctif 19/08/2026 (retour de test LocalWP) : quand un administrateur
   connecté visite le site, WordPress affiche sa barre d'admin fixe de 32px
   en haut de l'écran — le site source (sans WordPress) n'avait pas ce cas
   à gérer, donc rien dans le CSS porté ne décalait le bandeau fixe en
   conséquence, ce qui pouvait donner une impression de bandeau mal
   positionné uniquement en étant connecté (jamais pour un visiteur normal,
   déconnecté). */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px; /* La barre d'admin passe à 46px de haut sous 783px de large. */
  }
}

/* Correctif 19/08/2026 : the_custom_logo() (WordPress) ajoute un lien
   <a class="custom-logo-link"> autour de l'image, une balise que le CSS
   porté depuis le site statique (qui n'avait jamais ce lien) ne prévoyait
   pas. Cette règle garantit que le logo reste contenu dans son cadre quel
   que soit le poids/format de l'image importée, indépendamment de tout
   autre style plus haut dans ce fichier. */
.site-header .brand,
.site-header .brand-mark {
  overflow: hidden;
}

.site-header .brand-mark .custom-logo-link,
.site-header .brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Correctif 19/08/2026 (retour de test LocalWP, suite) : les pages
   "Le cabinet", "Contact", "Honoraires", "FAQ" (intro), "Mentions
   légales" et les 9 pages de traitement affichent leur contenu principal
   via the_content(), dans une simple section (.cabinet-content,
   .contact-content, .honoraires-content, .faq-intro, .legal-content,
   .treatment-content). Le CSS porté depuis le site source contient bien
   une mise en forme pour ce type de contenu, mais uniquement sous les
   anciens noms de classe propres à chaque page HTML d'origine
   (.cabinet-shell, .contact-shell, .honoraires-shell, .faq-shell,
   .consult-shell, .implant-page, .prothese-page, etc.) — des classes que
   les nouveaux gabarits WordPress, volontairement génériques pour
   remplacer ces 16 pages quasi dupliquées par un nombre réduit de
   gabarits communs (cf. Livrable 1, risque n°3), n'utilisent plus. Le
   contenu s'affichait donc avec la seule mise en forme par défaut du
   navigateur (aucune limite de largeur de lecture, pas d'espacement
   entre les titres/paragraphes/listes, images non cadrées). Ce bloc
   fournit une mise en forme de "contenu éditorial" unique et cohérente
   avec le reste de la charte graphique, appliquée à toutes ces sections
   d'un coup, ce qui règle le problème pour les 9 pages de traitement en
   une seule fois plutôt que de raccrocher chacune à son ancien bloc CSS
   spécifique (qui aurait recréé la duplication que la migration visait
   justement à éliminer). */
.cabinet-content,
.contact-content,
.honoraires-content,
.faq-intro,
.legal-content,
.treatment-content {
  max-width: 760px;
}

.cabinet-content h2,
.contact-content h2,
.honoraires-content h2,
.faq-intro h2,
.legal-content h2,
.treatment-content h2 {
  margin: 48px 0 18px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.15;
}

.cabinet-content h2:first-child,
.contact-content h2:first-child,
.honoraires-content h2:first-child,
.faq-intro h2:first-child,
.legal-content h2:first-child,
.treatment-content h2:first-child {
  margin-top: 0;
}

.cabinet-content h3,
.contact-content h3,
.honoraires-content h3,
.faq-intro h3,
.legal-content h3,
.treatment-content h3 {
  margin: 32px 0 12px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.25;
}

.cabinet-content p,
.contact-content p,
.honoraires-content p,
.faq-intro p,
.legal-content p,
.treatment-content p {
  margin: 0 0 18px;
  color: var(--mineral);
  font-size: 16px;
  line-height: 1.75;
}

.cabinet-content ul,
.cabinet-content ol,
.contact-content ul,
.contact-content ol,
.honoraires-content ul,
.honoraires-content ol,
.faq-intro ul,
.faq-intro ol,
.legal-content ul,
.legal-content ol,
.treatment-content ul,
.treatment-content ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--mineral);
  font-size: 16px;
  line-height: 1.75;
}

.cabinet-content li,
.contact-content li,
.honoraires-content li,
.faq-intro li,
.legal-content li,
.treatment-content li {
  margin-bottom: 8px;
}

.cabinet-content img,
.contact-content img,
.honoraires-content img,
.faq-intro img,
.legal-content img,
.treatment-content img {
  display: block;
  width: 100%;
  height: auto;
  margin: 12px 0 28px;
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.cabinet-content a:not([class]),
.contact-content a:not([class]),
.honoraires-content a:not([class]),
.faq-intro a:not([class]),
.legal-content a:not([class]),
.treatment-content a:not([class]) {
  color: var(--graphite);
  text-decoration: underline;
  text-decoration-color: var(--champagne);
  text-underline-offset: 3px;
}

.site-header.is-scrolled,
.site-header.menu-active {
  background: rgba(247, 243, 234, 0.86);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.05);
  backdrop-filter: blur(18px);
}

/* Correctif 19/08/2026 (suite 14) : sur mobile, le panneau de menu
   (.mobile-menu) est un descendant de .site-header et se positionne en
   "position: fixed" avec un décalage de var(--header-height) depuis le
   haut de l'écran, pour couvrir tout l'écran sous le bandeau d'en-tête.
   Un élément avec un "backdrop-filter" actif (ici .site-header dès qu'il
   porte la classe "is-scrolled" ou "menu-active") devient cependant, dans
   tous les navigateurs testés, le nouveau "conteneur de référence" pour
   ses descendants en position fixe — au lieu de la fenêtre du navigateur.
   Or .site-header ne mesure que var(--header-height) de haut (~86-92px) :
   .mobile-menu se retrouvait donc positionné et redimensionné par rapport
   à ce bandeau minuscule plutôt que par rapport à l'écran, avec une
   hauteur ramenée à 0px — d'où un menu quasiment invisible ("transparent")
   et impossible à utiliser ("figé") au clic sur ses liens, qui se
   retrouvaient hors de la zone réellement cliquable. Cette anomalie était
   déjà présente dans le CSS du site source, invisible pour un visiteur
   ordinaire sur ordinateur (le menu mobile n'y est jamais ouvert). Corrigé
   en désactivant le flou uniquement lorsque le menu est ouvert (l'effet de
   flou du bandeau n'a de toute façon plus d'utilité une fois le panneau,
   quasiment opaque, affiché par-dessus) : le bandeau reste alors un simple
   repère visuel, sans devenir le conteneur de positionnement du menu.

   Complément (suite 16) : ce correctif ne suffisait pourtant que sur la
   page d'accueil. Sur chaque autre page, un bloc de styles propre à cette
   page réapplique inconditionnellement le même flou au bandeau, par ex.
   ".implant-page .site-header { backdrop-filter: blur(18px); }" (repris à
   l'identique pour .prothese-page, .bone-page, .smile-page, .whitening-page,
   .veneer-page, .icon-page, .conservative-page, .perio-page, .cabinet-page,
   .honoraires-page, .faq-page, .contact-page, .consultation-page et
   .legal-page — ce même bloc dupliqué existe déjà dans le CSS du site
   source, une page par une). Cette règle a exactement la même spécificité
   que le correctif ci-dessus (deux classes) mais apparaît plus loin dans la
   feuille de style : à spécificité égale, c'est la règle la plus tardive
   dans le fichier qui l'emporte, donc ce flou réapparaissait dès qu'on
   rouvrait le menu mobile sur n'importe quelle page autre que l'accueil.
   C'est précisément ce que montraient les captures d'écran : une fois un
   traitement sélectionné (donc après avoir quitté l'accueil), le menu
   mobile retombait dans son ancien état "transparent". Un "!important"
   garantit que ce correctif l'emporte quel que soit l'ordre des blocs de
   styles propres à chaque page, présents ou futurs. */
.site-header.menu-active {
  backdrop-filter: none !important;
}

.header-inner {
  width: min(100% - 96px, 1440px);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 204px 1fr auto;
  align-items: center;
  gap: 34px;
}

.brand {
  width: 184px;
  height: 102px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-mark {
  width: 184px;
  height: 102px;
  display: block;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.desktop-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 18px 0;
  margin: -18px 0;
}

.nav-dropdown::after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 100%;
  height: 26px;
}

.desktop-nav a {
  position: relative;
  color: rgba(22, 22, 22, 0.76);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 180ms ease-out;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease-out;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--graphite);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
}

.desktop-nav .nav-sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 8;
  min-width: 300px;
  width: max-content;
  max-width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - var(--header-height) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 0;
  border: 1px solid rgba(200, 178, 138, 0.3);
  border-radius: 6px;
  background: rgba(247, 243, 234, 0.96);
  box-shadow: 0 18px 44px rgba(22, 22, 22, 0.1);
  padding: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.treatments-menu-group,
.treatments-menu-group-list,
.treatments-menu-consultation {
  display: grid;
}

.treatments-menu-group + .treatments-menu-group {
  margin-top: 1.15rem;
}

.treatments-menu-heading {
  display: block;
  margin: 0 0 0.55rem;
  color: var(--mineral);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.treatments-menu-separator {
  display: block;
  width: 100%;
  height: 1px;
  margin: 1.15rem 0 0.9rem;
  background: rgba(200, 178, 138, 0.42);
}

.desktop-nav .nav-sub-link {
  display: block;
  border-radius: 4px;
  padding: 7px 12px;
  white-space: nowrap;
}

.desktop-nav .treatments-menu-consultation .nav-sub-link {
  font-weight: 700;
}

.desktop-nav .nav-sub-link:hover,
.desktop-nav .nav-sub-link:focus-visible {
  background: rgba(200, 178, 138, 0.14);
}

.desktop-nav .nav-sub-link::after {
  display: none;
}

.nav-dropdown:hover .nav-sub-menu,
.nav-dropdown:focus-within .nav-sub-menu,
.nav-dropdown.is-open .nav-sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out, border-color 200ms ease-out;
}

.button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-primary {
  background: var(--champagne);
  color: var(--graphite);
  box-shadow: 0 14px 30px rgba(200, 178, 138, 0.2);
}

.button-primary:hover,
.button-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(200, 178, 138, 0.28);
}

.button-secondary {
  border-color: rgba(22, 22, 22, 0.18);
  background: rgba(255, 255, 255, 0.26);
  color: var(--graphite);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: rgba(200, 178, 138, 0.76);
  transform: translateY(-2px);
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: 50%;
  background: rgba(247, 243, 234, 0.58);
  cursor: pointer;
}

.menu-toggle span {
  width: 18px;
  height: 1px;
  display: block;
  margin: 0 auto;
  background: var(--graphite);
  transition: transform 220ms ease-out;
}

.menu-toggle span + span {
  margin-top: 6px;
}

.menu-toggle.is-active span:first-child {
  transform: translateY(3.5px) rotate(38deg);
}

.menu-toggle.is-active span:last-child {
  transform: translateY(-3.5px) rotate(-38deg);
}

.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0;
  display: none;
  background: rgba(247, 243, 234, 0.98);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
  /* Correctif 19/08/2026 (suite 15) : ce panneau n'avait jamais de défilement
     propre. Avec le sous-menu "Soins et traitements" déplié (9 traitements
     répartis en 4 groupes, plus le lien de première consultation), son
     contenu dépasse largement la hauteur d'un écran de téléphone. Comme il
     s'agit d'un panneau "position: fixed" retiré du flux normal de la page,
     ce dépassement restait invisible et impossible à atteindre par un
     défilement de page classique — d'où l'impression de menu figé, incapable
     d'atteindre FAQ/Le cabinet/Contact ou le bouton d'appel une fois le
     sous-menu déplié. Cette anomalie était déjà présente dans le CSS du site
     source (jamais remarquée faute d'y avoir testé un sous-menu déplié sur
     un écran de téléphone réel). Un défilement propre au panneau la corrige.
  */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-menu nav {
  width: min(100% - 48px, 520px);
  margin: 34px auto 0;
  display: grid;
  gap: 8px;
}

.mobile-menu nav a,
.mobile-submenu-toggle {
  border-bottom: 1px solid rgba(200, 178, 138, 0.25);
  padding: 18px 0;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.05;
}

.mobile-submenu-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  color: inherit;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  cursor: pointer;
  text-align: left;
}

.mobile-submenu-toggle::after {
  content: "+";
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  transition: transform 180ms ease-out;
}

.mobile-submenu-toggle[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.mobile-submenu-link {
  display: none;
  min-height: 44px;
  padding: 12px 0 12px 18px !important;
  color: rgba(22, 22, 22, 0.72);
  font-size: 24px !important;
}

.mobile-submenu-panel {
  display: none;
  padding: 8px 0 10px;
}

.mobile-submenu-panel .treatments-menu-heading {
  margin: 16px 0 4px 18px;
}

.mobile-submenu-panel .treatments-menu-group + .treatments-menu-group {
  margin-top: 0.55rem;
}

.mobile-submenu-panel .treatments-menu-separator {
  margin: 1rem 0 0.5rem 18px;
  width: calc(100% - 18px);
}

.mobile-submenu-panel .treatments-menu-consultation .mobile-submenu-link {
  font-weight: 600;
}

.mobile-menu.is-submenu-open .mobile-submenu-panel {
  display: grid;
}

.mobile-menu.is-submenu-open .mobile-submenu-link {
  display: block;
}

.mobile-menu-cta {
  width: min(100% - 48px, 520px);
  margin: 34px auto 0;
}

.hero {
  min-height: 720px;
  padding-top: var(--header-height);
  overflow: hidden;
}

.hero-inner {
  min-height: calc(720px - var(--header-height));
  display: grid;
  grid-template-columns: minmax(540px, 0.95fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: 64px;
}

.hero-copy {
  padding: 58px 0 72px;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--champagne);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 28px;
  font-size: clamp(72px, 6vw, 88px);
  line-height: 0.94;
}

.hero-text {
  max-width: 630px;
  margin-bottom: 36px;
  color: var(--mineral);
  font-size: 18px;
  line-height: 1.8;
}

.hero-actions {
  width: 100%;
  max-width: 630px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
}

.hero-actions .button {
  white-space: nowrap;
}

.hero-visual {
  position: relative;
  min-height: 560px;
  height: min(62vw, 650px);
  margin-right: calc((100vw - min(100vw - 128px, 1320px)) / -2);
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -1px;
  z-index: 1;
  width: 34%;
  background: linear-gradient(90deg, var(--ivory), rgba(247, 243, 234, 0));
  pointer-events: none;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.services {
  background: var(--ivory-soft);
}

.section-heading {
  margin-bottom: 54px;
}

.section-heading.centered {
  text-align: center;
}

.section-heading h2 {
  margin-bottom: 0;
  color: var(--graphite);
  font-size: clamp(44px, 4vw, 62px);
  line-height: 1;
}

.ornament {
  width: 160px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
}

.ornament::before,
.ornament::after {
  content: "";
  width: 68px;
  height: 1px;
  background: rgba(200, 178, 138, 0.7);
}

.ornament::after {
  margin-left: 22px;
}

.ornament::before {
  margin-right: 22px;
}

.ornament {
  background: radial-gradient(circle at center, var(--champagne) 0 4px, transparent 5px);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.service-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.72);
  padding: 34px 30px 28px;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out, background 220ms ease-out;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.72);
  background: rgba(255, 252, 246, 0.96);
  box-shadow: var(--shadow);
}

.service-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 34px;
  color: var(--champagne);
}

.service-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3 {
  margin-bottom: 16px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.05;
}

.service-card p {
  margin-bottom: 28px;
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.7;
}

.card-arrow {
  margin-top: auto;
  color: var(--champagne);
  font-size: 22px;
  line-height: 1;
}

.home-intro {
  background: rgba(255, 252, 246, 0.48);
  border-top: 1px solid rgba(200, 178, 138, 0.18);
}

.home-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(42px, 7vw, 120px);
}

.home-intro__content {
  width: 100%;
  max-width: none;
}

.home-intro__content h2,
.home-journey h2,
.home-reassurance h2,
.home-faq h2 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.05;
}

.home-intro__content h2 {
  margin: 0 0 24px;
  font-size: clamp(42px, 5vw, 68px);
}

.home-intro__content p {
  max-width: none;
  color: var(--mineral);
  font-size: 17px;
  line-height: 1.8;
}

.home-intro__lead {
  color: rgba(22, 22, 22, 0.78);
}

.home-intro__content .button {
  margin-top: 22px;
}

.home-journey {
  border-top: 1px solid rgba(200, 178, 138, 0.18);
}

.home-journey .section-heading p,
.home-reassurance .section-heading p,
.home-faq .section-heading p {
  max-width: 680px;
  margin: 16px auto 0;
  color: var(--mineral);
  font-size: 16px;
  line-height: 1.7;
}

.home-journey__list {
  counter-reset: home-journey;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: rgba(255, 252, 246, 0.62);
}

.home-journey__item {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border-right: 1px solid var(--line);
}

.home-journey__item:last-child {
  border-right: 0;
}

.home-journey__number {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 34px;
  border: 1px solid rgba(200, 178, 138, 0.56);
  border-radius: 50%;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
}

.home-journey__item h3,
.home-reassurance__card h3 {
  margin: 0 0 14px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.08;
}

.home-journey__item p,
.home-reassurance__card p,
.home-faq__answer p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.75;
}

.home-journey__item a,
.home-faq__answer a,
.home-faq__more {
  color: var(--graphite);
  text-decoration-color: rgba(200, 178, 138, 0.72);
  text-underline-offset: 4px;
}

.home-journey__item a:hover,
.home-journey__item a:focus-visible,
.home-faq__answer a:hover,
.home-faq__answer a:focus-visible,
.home-faq__more:hover,
.home-faq__more:focus-visible {
  color: var(--champagne);
}

.home-journey__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-reassurance {
  background: rgba(255, 252, 246, 0.48);
  border-top: 1px solid rgba(200, 178, 138, 0.18);
}

.home-reassurance__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.home-reassurance__card {
  min-height: 250px;
  padding: 34px 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.74);
  transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out;
}

.home-reassurance__card::before {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-bottom: 30px;
  background: var(--champagne);
}

@media (hover: hover) {
  .home-reassurance__card:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 178, 138, 0.64);
    box-shadow: 0 18px 44px rgba(16, 26, 44, 0.06);
  }
}

.home-faq {
  border-top: 1px solid rgba(200, 178, 138, 0.18);
}

.home-faq__inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.44fr) minmax(0, 0.76fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: start;
}

.home-faq .section-heading {
  margin-bottom: 0;
}

.home-faq .section-heading p {
  margin-left: 0;
}

.home-faq__list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.72);
  overflow: hidden;
}

.home-faq__list details {
  border-bottom: 1px solid var(--line);
}

.home-faq__list details:last-child {
  border-bottom: 0;
}

.home-faq__list summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  padding: 20px 24px;
  color: var(--graphite);
  font-weight: 600;
  cursor: pointer;
}

.home-faq__list summary::-webkit-details-marker {
  display: none;
}

.home-faq__list summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--champagne);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.home-faq__list details[open] summary::after {
  content: "−";
}

.home-faq__answer {
  padding: 0 24px 24px;
}

.home-faq__answer p {
  margin: 0 0 12px;
}

.home-faq__answer p:last-child {
  margin-bottom: 0;
}

.home-faq__more {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1200px) {
  .home-intro__grid,
  .home-faq__inner {
    grid-template-columns: 1fr;
  }

  .home-journey__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-journey__item {
    border-bottom: 1px solid var(--line);
  }

  .home-journey__item:nth-child(even) {
    border-right: 0;
  }

  .home-journey__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .home-reassurance__grid {
    grid-template-columns: 1fr;
  }

  .home-faq__more {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .home-intro__content h2 {
    font-size: 42px;
  }

  .home-intro__content p {
    font-size: 16px;
  }

  .home-journey__list {
    grid-template-columns: 1fr;
  }

  .home-journey__item {
    min-height: auto;
    padding: 28px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .home-journey__item:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .home-journey__item:last-child {
    border-bottom: 0;
  }

  .home-journey__number {
    margin-bottom: 24px;
  }

  .home-journey__item h3,
  .home-reassurance__card h3 {
    font-size: 25px;
  }

  .home-reassurance__card {
    min-height: auto;
    padding: 28px 24px;
  }

  .home-faq__list summary {
    min-height: 62px;
    padding: 18px 20px;
    font-size: 15px;
  }

  .home-faq__answer {
    padding: 0 20px 22px;
  }

  .home-faq__more {
    width: 100%;
  }
}

.cabinet-info-banner {
  width: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--ivory);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 28px 4vw calc(28px + env(safe-area-inset-bottom));
}

.cabinet-info-grid {
  min-height: 84px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.78fr) minmax(0, 1.72fr) minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: stretch;
  max-width: 1440px;
  margin-inline: auto;
}

.cabinet-info-item,
.cabinet-map-card {
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 84px;
}

.cabinet-info-item {
  position: relative;
  gap: 10px;
  border-right: 0;
  padding: 0 clamp(10px, 1vw, 16px);
  font-style: normal;
}

.cabinet-info-item:first-child {
  padding-left: 0;
}

.cabinet-info-item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: rgba(247, 243, 234, 0.16);
}

.cabinet-info-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--champagne);
}

.cabinet-info-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cabinet-info-text {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: rgba(247, 243, 234, 0.9);
  font-size: 14px;
  line-height: 1.5;
}

.cabinet-address-lines {
  min-width: 0;
}

.cabinet-phone-line a,
.cabinet-hours-lines span:first-child,
.cabinet-status-lines span {
  white-space: nowrap;
}

.cabinet-hours-lines {
  font-size: 13px;
}

.cabinet-info-text a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ivory);
  font-weight: 600;
}

.cabinet-info-text a:hover,
.cabinet-info-text a:focus-visible,
.cabinet-map-external:hover,
.cabinet-map-external:focus-visible {
  color: var(--champagne);
}

.cabinet-map-card {
  padding-left: clamp(10px, 1vw, 16px);
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
}

.cabinet-map-compact {
  display: block;
  margin-bottom: 10px;
}

.cabinet-map-summary {
  min-width: 0;
}

.cabinet-map-summary p {
  display: grid;
  gap: 2px;
  margin-bottom: 6px;
  color: rgba(247, 243, 234, 0.88);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-map-panel {
  width: 100%;
}

.cabinet-map-panel iframe {
  width: 100%;
  height: 82px;
  border: 0;
  border-radius: 6px;
}

/* Correctif 19/08/2026 (suite 6) : la page Contact utilisait ici
   temporairement le petit widget .cabinet-map-panel (conçu pour le pied
   de page, 82 px de haut) comme carte principale, avec une règle dédiée
   pour l'agrandir. Elle affiche désormais la vraie carte "aperçu" du
   site source (.contact-map-preview, 260 px, cf. règles plus bas et
   page-contact.php) directement intégrée à la fiche "Adresse", donc
   cette règle spécifique à .contact-map-section n'est plus nécessaire
   et a été retirée. */

.cabinet-map-external {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  margin-top: 8px;
  color: rgba(247, 243, 234, 0.84);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.implant-page {
  background: var(--ivory);
  --header-height: 92px;
}

.implant-hero {
  padding: calc(var(--header-height) + 74px) 0 96px;
  background: var(--ivory);
  overflow: hidden;
}

.implant-hero-grid,
.implant-two-column,
.implant-comfort-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: clamp(56px, 7vw, 112px);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 28px;
  color: var(--mineral);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.breadcrumb a {
  color: rgba(22, 22, 22, 0.72);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--champagne);
}

.implant-hero-copy h1 {
  margin-bottom: 26px;
}

.implant-hero-copy p:not(.implant-lead),
.implant-copy-block p,
.implant-final-card p {
  color: var(--mineral);
  font-size: 17px;
  line-height: 1.82;
}

.implant-lead {
  max-width: 620px;
  margin-bottom: 24px;
  color: var(--graphite);
  font-size: 24px;
  line-height: 1.45;
}

.implant-hero-visual,
.implant-figure {
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.78);
  box-shadow: 0 24px 70px rgba(22, 22, 22, 0.08);
}

.implant-hero-visual img,
.implant-figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.implant-hero-visual {
  min-height: 560px;
}

.implant-section {
  padding: 112px 0;
  background: var(--ivory);
}

.implant-understand {
  background: var(--ivory-soft);
}

.implant-soft-band {
  background: #fbf8f1;
}

.implant-night {
  background: var(--night);
  color: var(--ivory);
}

.implant-night .implant-copy-block p,
.implant-night .implant-copy-block h2 {
  color: var(--ivory);
}

.implant-night .implant-copy-block p {
  color: rgba(247, 243, 234, 0.78);
}

.implant-copy-block h2,
.implant-faq h2,
.implant-final-card h2 {
  margin-bottom: 28px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 500;
  line-height: 1;
}

.implant-copy-block.wide {
  max-width: 860px;
  margin-bottom: 44px;
}

.implant-list,
.implant-check-list {
  margin: 26px 0;
  padding: 0;
  list-style: none;
  color: var(--graphite);
}

.implant-list li,
.implant-check-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: rgba(22, 22, 22, 0.78);
}

.implant-list li::before,
.implant-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--champagne);
  transform: rotate(45deg);
}

.implant-figure {
  min-height: 460px;
}

.implant-figure.muted img {
  object-position: center 58%;
}

.implant-figure.dark {
  background: rgba(247, 243, 234, 0.04);
  box-shadow: none;
}

.implant-planning {
  margin-top: 96px;
}

.implant-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.implant-feature-grid article {
  min-height: 238px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.72);
  padding: 30px;
}

.implant-feature-grid h3,
.implant-timeline h3 {
  margin-bottom: 14px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.08;
}

.implant-feature-grid p,
.implant-timeline p,
.implant-faq p {
  margin-bottom: 0;
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.72;
}

.implant-note {
  margin-top: 30px;
  border: 1px solid rgba(200, 178, 138, 0.42);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.74);
  padding: 24px 26px;
  color: rgba(22, 22, 22, 0.76);
  font-size: 15px;
  line-height: 1.72;
}

.implant-note strong,
.implant-note span {
  display: block;
}

.implant-note strong {
  margin-bottom: 8px;
  color: var(--champagne);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.implant-note.dark {
  background: rgba(247, 243, 234, 0.06);
  color: rgba(247, 243, 234, 0.82);
}

.implant-two-column.reverse {
  grid-template-columns: minmax(420px, 1.05fr) minmax(0, 0.95fr);
}

.implant-steps {
  background: var(--ivory-soft);
}

.implant-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.implant-timeline li {
  position: relative;
  min-height: 260px;
  border-top: 1px solid rgba(200, 178, 138, 0.58);
  padding: 34px 22px 0;
}

.implant-timeline li::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--champagne);
}

.implant-timeline span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 22px;
  border: 1px solid rgba(200, 178, 138, 0.55);
  border-radius: 50%;
  color: var(--champagne);
  font-size: 13px;
  font-weight: 600;
}

.implant-comfort-grid {
  align-items: start;
}

.implant-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
}

.implant-faq {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.72);
  padding: clamp(28px, 4vw, 46px);
}

.implant-faq h2 {
  font-size: clamp(34px, 3vw, 48px);
}

.implant-faq details {
  border-top: 1px solid rgba(200, 178, 138, 0.32);
}

.implant-faq details:last-child {
  border-bottom: 1px solid rgba(200, 178, 138, 0.32);
}

.implant-faq summary {
  cursor: pointer;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--graphite);
  font-weight: 600;
  line-height: 1.35;
}

.implant-faq summary::after {
  content: "+";
  color: var(--champagne);
  font-size: 24px;
  font-weight: 400;
}

.implant-faq details[open] summary::after {
  /* Correctif 19/08/2026 (suite 12) : cette valeur contenait un signe moins
     Unicode (U+2212) mal encodé lors d'une édition précédente du fichier,
     produisant les caractères mojibake "−" (illisibles pour le
     navigateur) plutôt qu'un simple tiret. Toutes les surcharges par page
     ajoutées depuis (icon-faq-grid, veneer-faq-section, conservative-faq,
     perio-faq) utilisent déjà un tiret simple ; harmonisé ici pour les
     pages qui n'ont pas de surcharge dédiée (Implants dentaires, Prothèses
     sur implants, Augmentation osseuse préimplantaire, Esthétique du
     sourire, Éclaircissement dentaire, Première consultation). */
  content: "-";
}

.implant-faq details p {
  padding: 0 34px 22px 0;
}

.implant-final {
  padding-top: 92px;
}

.implant-final-card {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.implant-page .section-shell {
  width: min(100% - 80px, 1280px);
}

.implant-page .site-header {
  background: rgba(247, 243, 234, 0.92);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.implant-page .brand,
.implant-page .brand-mark {
  width: 168px;
  height: 88px;
}

.implant-page .button-primary {
  color: var(--ivory);
}

.implant-page .button-primary:hover,
.implant-page .button-primary:focus-visible {
  color: var(--ivory);
}

.implant-page .implant-hero {
  min-height: 620px;
  padding: var(--header-height) 0 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.implant-page .implant-hero-grid {
  width: 100%;
  max-width: none;
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.35fr);
  gap: 0;
}

.implant-page .implant-hero-copy {
  width: min(100% - 80px, 600px);
  justify-self: end;
  padding: 56px 54px 52px 0;
}

.implant-page .breadcrumb {
  margin-bottom: 30px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.implant-page .implant-hero-copy h1 {
  max-width: 560px;
  margin-bottom: 20px;
  font-size: clamp(58px, 5vw, 82px);
  line-height: 0.96;
  color: var(--graphite);
}

.implant-page .implant-hero-copy h1 span {
  color: var(--champagne);
}

.implant-page .implant-lead {
  margin-bottom: 20px;
  color: var(--graphite);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
}

.implant-page .implant-hero-copy p:not(.implant-lead) {
  max-width: 520px;
  font-size: 14px;
  line-height: 1.75;
}

.implant-page .implant-hero-visual {
  min-height: 620px;
  border-radius: 0;
  box-shadow: none;
}

.implant-page .implant-hero-visual img {
  object-position: center right;
}

.implant-page .implant-section {
  padding: 88px 40px;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.implant-page .implant-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(240px, 0.62fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(34px, 4.8vw, 74px);
}

.section-number {
  display: inline-flex;
  margin: 0 0 12px;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
}

.implant-page .implant-copy-block h2,
.implant-page .implant-faq h2,
.implant-page .implant-final-card h2 {
  margin-bottom: 20px;
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1.02;
}

.implant-page .implant-copy-block p,
.implant-page .implant-final-card p,
.implant-page .implant-feature-grid p,
.implant-page .implant-timeline p,
.implant-page .implant-faq p {
  font-size: 14px;
  line-height: 1.72;
}

.implant-page .implant-list {
  margin: 20px 0;
  font-size: 14px;
}

.implant-page .implant-list li,
.implant-page .implant-check-list li {
  padding-left: 24px;
}

.implant-page .implant-figure {
  min-height: 0;
  border-radius: 12px;
  box-shadow: none;
}

.implant-page .implant-overview-grid .implant-figure {
  align-self: start;
  height: min(420px, 42vw);
  min-height: 360px;
}

.implant-page .implant-overview-grid .implant-figure img {
  max-height: 420px;
}

.implant-page .implant-planning {
  margin-top: 0;
}

.implant-page .implant-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 24px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 7px;
  overflow: hidden;
}

.implant-page .implant-feature-grid article {
  min-height: 210px;
  border: 0;
  border-right: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 0;
  background: rgba(255, 252, 246, 0.58);
  padding: 24px;
}

.implant-page .implant-feature-grid article:last-child {
  border-right: 0;
}

.implant-page .implant-feature-grid h3,
.implant-page .implant-timeline h3 {
  font-size: 19px;
  line-height: 1.1;
}

.implant-page .implant-soft-band .implant-two-column {
  grid-template-columns: minmax(300px, 0.62fr) minmax(560px, 1.38fr);
  gap: 48px;
}

.implant-page .implant-soft-band .implant-figure {
  min-height: 300px;
  max-height: 360px;
}

.implant-page .implant-soft-band .implant-figure img {
  object-fit: cover;
}

.implant-page .implant-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 20px 22px;
  font-size: 13px;
}

.implant-page .implant-note::before {
  content: "i";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 18px;
}

.implant-page .implant-note strong,
.implant-page .implant-note span {
  grid-column: 2;
}

.implant-page .implant-night {
  background: var(--ivory);
  color: var(--graphite);
}

.implant-page .implant-night .implant-copy-block h2 {
  color: var(--graphite);
}

.implant-page .implant-night .implant-copy-block p {
  color: var(--mineral);
}

.implant-page .implant-note.dark {
  background: rgba(255, 252, 246, 0.74);
  color: rgba(22, 22, 22, 0.76);
}

.implant-page .implant-steps {
  padding-top: 42px;
  background: var(--ivory);
}

.implant-page .implant-steps .section-heading {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 42px;
}

.implant-page .implant-steps .section-heading h2 {
  font-size: clamp(30px, 3vw, 44px);
}

.implant-page .implant-timeline {
  align-items: start;
}

.implant-page .implant-timeline li {
  min-height: 0;
  text-align: center;
  border-top-color: rgba(200, 178, 138, 0.7);
  padding: 30px 16px 0;
}

.implant-page .implant-timeline li::before {
  left: 50%;
  transform: translateX(-50%);
}

.implant-page .implant-timeline span {
  width: 70px;
  height: 70px;
  margin: -66px auto 18px;
  background: var(--ivory);
  font-family: var(--serif);
  font-size: 18px;
}

.implant-page .implant-comfort-faq {
  padding: 0;
}

.implant-page .implant-comfort-grid {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.95fr);
  gap: 0;
}

.implant-page .implant-comfort-panel,
.implant-page .implant-faq {
  border-right: 1px solid rgba(200, 178, 138, 0.22);
  padding: 54px 6vw;
}

.implant-comfort-panel {
  display: grid;
  grid-template-columns: minmax(180px, 0.46fr) minmax(0, 1fr);
  align-items: center;
  gap: 36px;
}

.implant-comfort-visual {
  min-height: 300px;
  overflow: hidden;
  border-radius: 12px;
  margin: 0;
}

.implant-comfort-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.implant-page .implant-faq {
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
}

.implant-page .implant-faq h2 {
  font-size: clamp(28px, 2.5vw, 38px);
}

.implant-page .implant-faq summary {
  min-height: 50px;
  font-size: 14px;
}

.implant-page .implant-final {
  padding: 32px 0;
  background: #fbf8f1;
}

.implant-page .implant-final-card {
  max-width: 880px;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 34px;
  text-align: left;
}

.implant-page .implant-final-card::before {
  content: "";
  width: 58px;
  height: 58px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  align-self: center;
  justify-self: center;
  background: radial-gradient(circle at center, transparent 0 45%, var(--champagne) 46% 48%, transparent 49%);
}

.implant-page .implant-final-card .eyebrow {
  display: none;
}

.implant-page .implant-hero,
.implant-page .implant-section,
.implant-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.implant-page .implant-hero.is-visible,
.implant-page .implant-section.is-visible,
.implant-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .header-inner {
    width: min(100% - 56px, 1320px);
    grid-template-columns: auto 1fr auto;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: block;
    justify-self: end;
  }

  .mobile-menu {
    display: block;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .implant-hero-grid,
  .implant-overview-grid,
  .implant-two-column,
  .implant-two-column.reverse,
  .implant-comfort-grid {
    grid-template-columns: 1fr;
  }

  .implant-page .implant-hero-grid {
    grid-template-columns: 1fr;
  }

  .implant-page .implant-hero-copy {
    width: min(100% - 72px, 760px);
    justify-self: start;
    padding: 56px 0 36px 36px;
  }

  .implant-page .implant-hero-visual {
    min-height: 430px;
  }

  .implant-page .implant-overview-grid,
  .implant-page .implant-soft-band .implant-two-column,
  .implant-page .implant-comfort-grid {
    width: min(100% - 72px, 1280px);
    max-width: 1280px;
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .implant-page .implant-section {
    padding: 72px 36px;
  }

  .implant-page .implant-overview-grid .implant-figure {
    height: auto;
    min-height: 0;
  }

  .implant-page .implant-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .implant-page .implant-comfort-panel,
  .implant-page .implant-faq {
    border-right: 0;
    padding: 54px 0;
  }

  .implant-comfort-panel {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .implant-hero {
    padding-bottom: 80px;
  }

  .implant-hero-visual,
  .implant-figure {
    min-height: 420px;
  }

  .implant-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .implant-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }

  .implant-timeline li {
    min-height: 220px;
    border: 1px solid rgba(200, 178, 138, 0.34);
    border-radius: 8px;
    background: rgba(255, 252, 246, 0.58);
    padding: 30px;
  }

  .implant-timeline li::before {
    display: none;
  }

  .cabinet-info-banner {
    padding: 34px 6vw calc(34px + env(safe-area-inset-bottom));
  }

  .cabinet-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabinet-info-item,
  .cabinet-map-card {
    min-height: 104px;
    border-right: 0;
    border-bottom: 1px solid rgba(247, 243, 234, 0.16);
    padding: 22px 0;
  }

  .cabinet-info-item::after {
    display: none;
  }

  .cabinet-info-item:nth-child(odd) {
    padding-right: 24px;
  }

  .cabinet-info-item:nth-child(even) {
    padding-left: 24px;
  }

  .cabinet-map-card {
    grid-column: 1 / -1;
    padding-left: 0;
    border-bottom: 0;
  }

  .cabinet-map-panel iframe {
    height: 220px;
  }

  .cabinet-phone-line a,
  .cabinet-hours-lines span:first-child,
  .cabinet-status-lines span {
    white-space: normal;
  }
}

@media (max-width: 980px) {
  .section-shell {
    width: min(100% - 56px, 1320px);
  }

  .section-padding {
    padding: 88px 0;
  }

  .hero {
    min-height: auto;
  }

  .hero-inner {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-copy {
    padding: 74px 0 20px;
  }

  h1 {
    font-size: 56px;
  }

  .hero-visual {
    min-height: 420px;
    height: 48vw;
    margin: 0 -28px;
  }

  .implant-section {
    padding: 88px 0;
  }

}

@media (max-width: 640px) {
  :root {
    --header-height: 86px;
  }

  .section-shell {
    width: min(100% - 36px, 1320px);
  }

  .section-padding {
    padding: 72px 0;
  }

  .header-inner {
    width: min(100% - 32px, 1320px);
  }

  .brand,
  .brand-mark {
    width: 136px;
    height: 78px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .mobile-menu nav a {
    font-size: 29px;
  }

  .hero-copy {
    padding: 54px 0 10px;
  }

  .eyebrow {
    margin-bottom: 16px;
  }

  h1 {
    margin-bottom: 22px;
    font-size: 42px;
    line-height: 0.98;
  }

  .hero-text {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 1.72;
  }

  .hero-actions,
  .hero-actions .button {
    width: 100%;
  }

  .hero-visual {
    min-height: 330px;
    height: 76vw;
    margin: 0 -18px;
  }

  .implant-hero {
    padding: calc(var(--header-height) + 48px) 0 64px;
  }

  .implant-page .implant-hero {
    padding-top: var(--header-height);
  }

  .implant-page .implant-hero-copy {
    width: min(100% - 36px, 760px);
    padding: 42px 0 30px 18px;
  }

  .implant-hero-copy h1 {
    font-size: 42px;
  }

  .implant-page .implant-hero-copy h1 {
    font-size: 42px;
  }

  .implant-page .implant-hero-copy h1 br {
    display: block;
  }

  .implant-lead {
    font-size: 20px;
  }

  .breadcrumb {
    font-size: 10.5px;
    line-height: 1.5;
  }

  .implant-hero-visual,
  .implant-figure {
    min-height: 300px;
  }

  .implant-page .implant-hero-visual {
    min-height: 300px;
  }

  .implant-section {
    padding: 72px 0;
  }

  .implant-page .implant-section {
    padding: 56px 22px;
  }

  .implant-page .implant-overview-grid,
  .implant-page .implant-soft-band .implant-two-column,
  .implant-page .implant-comfort-grid {
    width: 100%;
  }

  .implant-copy-block h2,
  .implant-faq h2,
  .implant-final-card h2 {
    font-size: 36px;
  }

  .implant-feature-grid,
  .implant-timeline,
  .implant-check-list {
    grid-template-columns: 1fr;
  }

  .implant-page .implant-feature-grid {
    grid-template-columns: 1fr;
  }

  .implant-page .implant-feature-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(200, 178, 138, 0.28);
  }

  .implant-page .implant-feature-grid article:last-child {
    border-bottom: 0;
  }

  .implant-page .implant-timeline li {
    text-align: left;
    padding: 26px;
  }

  .implant-page .implant-timeline span {
    margin: 0 0 18px;
    width: 48px;
    height: 48px;
  }

  .implant-page .implant-final-card {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .implant-comfort-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .implant-comfort-visual {
    min-height: 260px;
  }

  .implant-feature-grid article,
  .implant-timeline li {
    min-height: auto;
    padding: 26px;
  }

  .implant-faq {
    padding: 24px;
  }

  .implant-faq summary {
    min-height: 58px;
    font-size: 15px;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .section-heading h2 {
    font-size: 38px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 280px;
    padding: 30px 26px 26px;
  }

  .cabinet-info-banner {
    padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  }

  .cabinet-info-grid {
    grid-template-columns: 1fr;
  }

  .cabinet-info-item,
  .cabinet-map-card {
    min-height: auto;
    padding: 22px 0;
  }

  .cabinet-info-item:nth-child(odd),
  .cabinet-info-item:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
  }

  .cabinet-info-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .cabinet-info-icon svg {
    width: 38px;
    height: 38px;
  }

  .cabinet-map-panel iframe {
    height: 260px;
  }

}

/* Implants page: final proportions aligned with the validated editorial mockup. */
.implant-page .section-shell {
  width: min(100% - 76px, 1440px);
}

.implant-page .implant-hero {
  min-height: 620px;
}

.implant-page .implant-hero-grid {
  min-height: 620px;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

.implant-page .implant-hero-copy {
  width: min(100% - 72px, 560px);
  padding: 44px 56px 44px 0;
}

.implant-page .implant-hero-copy h1 {
  font-size: clamp(62px, 5.2vw, 86px);
  line-height: 0.94;
}

.implant-page .implant-hero-visual,
.implant-page .implant-hero-visual img {
  height: 100%;
}

.implant-page .implant-section {
  padding: 58px 40px;
}

.implant-page .implant-overview-grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(260px, 0.68fr) minmax(0, 1.12fr);
  gap: clamp(34px, 4.2vw, 66px);
}

.implant-page .implant-copy-block h2,
.implant-page .implant-faq h2,
.implant-page .implant-final-card h2 {
  font-size: clamp(31px, 2.45vw, 43px);
  letter-spacing: 0;
}

.implant-page .implant-copy-block p,
.implant-page .implant-final-card p,
.implant-page .implant-feature-grid p,
.implant-page .implant-timeline p,
.implant-page .implant-faq p,
.implant-page .implant-list {
  font-size: 13.5px;
}

.implant-page .implant-overview-grid .implant-figure {
  height: clamp(360px, 31vw, 430px);
}

.implant-page .implant-feature-grid article {
  min-height: 190px;
  padding: 22px;
}

.implant-page .implant-soft-band .implant-two-column {
  grid-template-columns: minmax(300px, 0.54fr) minmax(600px, 1.46fr);
  gap: 56px;
}

.implant-page .implant-soft-band .implant-figure {
  min-height: 280px;
  max-height: 330px;
}

.implant-page .implant-guide-xguide {
  background: var(--ivory);
}

.implant-page .implant-duo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(52px, 6vw, 96px);
  align-items: start;
}

.implant-page .implant-duo-card {
  min-width: 0;
}

.implant-page .implant-duo-card .implant-figure {
  width: 100%;
  min-height: 260px;
  height: clamp(280px, 23vw, 360px);
  margin: 26px 0 0;
}

.implant-page .implant-duo-card .implant-figure.dark {
  background: transparent;
}

.implant-page .implant-duo-card .implant-note {
  margin-top: 18px;
}

.implant-page .implant-steps {
  padding-top: 52px;
  padding-bottom: 68px;
}

.implant-page .implant-timeline {
  gap: 0;
}

.implant-page .implant-timeline li {
  padding: 28px 18px 0;
}

.implant-page .implant-timeline span {
  width: 66px;
  height: 66px;
  margin-top: -62px;
}

.implant-page .implant-comfort-panel,
.implant-page .implant-faq {
  padding-top: 48px;
  padding-bottom: 48px;
}

.implant-page .implant-comfort-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
}

.implant-page .implant-comfort-visual {
  min-height: 280px;
}

.implant-page .implant-faq details {
  background: rgba(255, 252, 246, 0.42);
}

.implant-page .implant-final {
  padding: 30px 0;
}

.implant-page .implant-final-card {
  max-width: 920px;
}

@media (max-width: 1180px) {
  .implant-page .implant-duo-grid {
    gap: 48px;
  }

  .implant-page .implant-feature-grid {
    grid-template-columns: 1fr;
  }

  .implant-page .implant-feature-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(200, 178, 138, 0.28);
  }

  .implant-page .implant-feature-grid article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 1024px) {
  .implant-page .section-shell,
  .implant-page .implant-overview-grid,
  .implant-page .implant-soft-band .implant-two-column,
  .implant-page .implant-comfort-grid {
    width: min(100% - 64px, 1440px);
  }

  .implant-page .implant-hero-grid,
  .implant-page .implant-overview-grid,
  .implant-page .implant-soft-band .implant-two-column,
  .implant-page .implant-duo-grid,
  .implant-page .implant-comfort-grid {
    grid-template-columns: 1fr;
  }

  .implant-page .implant-hero-copy {
    width: min(100% - 64px, 720px);
    padding: 52px 0 36px;
    justify-self: center;
  }

  .implant-page .implant-section {
    padding: 64px 32px;
  }

  .implant-page .implant-duo-card .implant-figure {
    height: auto;
    min-height: 300px;
  }

  .implant-page .implant-comfort-panel,
  .implant-page .implant-faq {
    padding: 48px 0;
  }
}

@media (max-width: 640px) {
  .implant-page .section-shell,
  .implant-page .implant-overview-grid,
  .implant-page .implant-soft-band .implant-two-column,
  .implant-page .implant-comfort-grid {
    width: 100%;
  }

  .implant-page .implant-hero-copy {
    width: min(100% - 36px, 720px);
  }

  .implant-page .implant-hero-copy h1 {
    font-size: 44px;
  }

  .implant-page .implant-section {
    padding: 54px 22px;
  }

  .implant-page .implant-overview-grid .implant-figure,
  .implant-page .implant-duo-card .implant-figure {
    min-height: 260px;
    height: auto;
  }

  .implant-page .implant-timeline {
    grid-template-columns: 1fr;
  }

  .implant-page .implant-timeline li {
    padding: 24px;
  }
}

/* Targeted correction: softer implants hero and readable final step block. */
.implant-page .implant-hero {
  position: relative;
  min-height: 680px;
  padding: var(--header-height) 0 0;
  background: var(--ivory);
  overflow: hidden;
}

.implant-page .implant-hero::before {
  content: "";
  position: absolute;
  inset: var(--header-height) 0 0;
  z-index: 0;
  background-image:
    linear-gradient(
      90deg,
      #f7f3ea 0%,
      rgba(247, 243, 234, 0.99) 17%,
      rgba(247, 243, 234, 0.9) 36%,
      rgba(247, 243, 234, 0.52) 53%,
      rgba(247, 243, 234, 0.12) 70%,
      rgba(247, 243, 234, 0) 100%
    ),
    var(--dr-hero-image, none);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.implant-page .implant-hero-grid {
  position: relative;
  z-index: 1;
  width: min(100% - 76px, 1440px);
  min-height: 680px;
  display: flex;
  align-items: center;
}

.implant-page .implant-hero-copy {
  width: min(100%, 560px);
  justify-self: auto;
  padding: 52px 0 64px;
}

.implant-page .implant-hero-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.implant-page .implant-final {
  padding: 56px 40px;
  background: var(--ivory);
  border-top: 1px solid rgba(200, 178, 138, 0.22);
}

.implant-page .implant-final .section-shell {
  width: min(100%, 1280px);
}

.implant-page .implant-final-card {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 120px minmax(0, 980px);
  align-items: center;
  column-gap: 48px;
  text-align: left;
}

.implant-page .implant-final-card::before {
  width: 72px;
  height: 72px;
  align-self: center;
  justify-self: center;
  grid-row: 1 / span 2;
  background:
    radial-gradient(circle at 50% 62%, transparent 0 32%, rgba(200, 178, 138, 0.95) 33% 35%, transparent 36%),
    radial-gradient(circle at 38% 42%, transparent 0 17%, rgba(200, 178, 138, 0.95) 18% 20%, transparent 21%),
    radial-gradient(circle at 62% 42%, transparent 0 17%, rgba(200, 178, 138, 0.95) 18% 20%, transparent 21%);
}

.implant-page .implant-final-card h2 {
  grid-column: 2;
  margin: 0 0 18px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
}

.implant-page .implant-final-card p:not(.eyebrow) {
  grid-column: 2;
  max-width: 980px;
  margin: 0;
  color: #6f6b63;
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 1024px) {
  .implant-page .implant-hero {
    min-height: 620px;
  }

  .implant-page .implant-hero::before {
    background-image:
      linear-gradient(
        180deg,
        #f7f3ea 0%,
        rgba(247, 243, 234, 0.98) 38%,
        rgba(247, 243, 234, 0.74) 62%,
        rgba(247, 243, 234, 0.26) 100%
      ),
      var(--dr-hero-image, none);
    background-position: center bottom;
  }

  .implant-page .implant-hero-grid {
    width: min(100% - 64px, 1440px);
    min-height: 620px;
  }

  .implant-page .implant-hero-copy {
    width: min(100%, 680px);
    padding: 52px 0 260px;
  }
}

@media (max-width: 640px) {
  .implant-page .implant-hero {
    min-height: 680px;
  }

  .implant-page .implant-hero::before {
    background-image:
      linear-gradient(
        180deg,
        #f7f3ea 0%,
        rgba(247, 243, 234, 1) 42%,
        rgba(247, 243, 234, 0.82) 62%,
        rgba(247, 243, 234, 0.22) 100%
      ),
      var(--dr-hero-image, none);
    background-size: cover, cover;
    background-position: center bottom;
  }

  .implant-page .implant-hero-grid {
    width: min(100% - 36px, 1440px);
    min-height: 680px;
    align-items: start;
  }

  .implant-page .implant-hero-copy {
    padding: 42px 0 250px;
  }

  .implant-page .implant-final {
    padding: 44px 24px;
  }

  .implant-page .implant-final-card {
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: left;
  }

  .implant-page .implant-final-card::before {
    width: 56px;
    height: 56px;
    justify-self: start;
  }

  .implant-page .implant-final-card p:not(.eyebrow) {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (scripting: none) {
  .implant-page .implant-hero,
  .implant-page .implant-section,
  .implant-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Protheses sur implants page */
.prothese-page {
  background: var(--ivory);
  color: var(--graphite);
}

.prothese-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.prothese-page .brand,
.prothese-page .brand-mark {
  width: 168px;
  height: 88px;
}

.prothese-page .button-primary {
  color: var(--ivory);
}

.prothese-shell {
  width: min(100% - 76px, 1240px);
  margin-inline: auto;
}

.prothese-hero {
  padding-top: var(--header-height);
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
  background: linear-gradient(90deg, var(--ivory) 0%, #fbf8f1 100%);
}

.prothese-hero-grid {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(480px, 1.14fr);
  align-items: center;
  gap: clamp(38px, 5vw, 74px);
}

.prothese-hero-copy {
  padding: 56px 0;
}

.prothese-hero-copy h1,
.prothese-copy h2,
.prothese-faq-section h2,
.prothese-cta-card h2 {
  color: var(--graphite);
  font-family: var(--serif);
  letter-spacing: 0;
}

.prothese-hero-copy h1 {
  max-width: 680px;
  margin: 14px 0 22px;
  font-size: clamp(54px, 5vw, 82px);
  line-height: 0.96;
}

.prothese-lead {
  color: var(--graphite);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.55;
}

.prothese-hero-copy p:not(.eyebrow):not(.prothese-lead) {
  max-width: 620px;
  margin-bottom: 28px;
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.8;
}

.prothese-hero-visual {
  min-height: 500px;
  height: min(48vw, 580px);
  margin: 0 calc((100vw - min(100vw - 76px, 1240px)) / -2) 0 0;
  overflow: hidden;
  border-radius: 0;
}

.prothese-hero-visual img,
.prothese-image img,
.solution-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.prothese-section {
  padding: 86px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.prothese-benefits {
  padding: 46px 0;
  background: rgba(255, 252, 246, 0.58);
}

.prothese-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.prothese-benefit-grid article,
.prothese-note,
.prothese-cta-card,
.prothese-table {
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.66);
}

.prothese-benefit-grid article {
  min-height: 210px;
  padding: 28px 24px;
}

.prothese-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne);
}

.prothese-icon svg,
.solution-number svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prothese-benefit-grid h2,
.solution-card h3,
.prothese-note h3,
.prothese-timeline h3 {
  color: var(--graphite);
  font-family: var(--serif);
  line-height: 1.05;
}

.prothese-benefit-grid h2 {
  margin: 24px 0 12px;
  font-size: 29px;
}

.prothese-benefit-grid p,
.prothese-copy p,
.solution-card p,
.solution-card aside,
.prothese-note p,
.prothese-table,
.prothese-faq-section p,
.prothese-cta-card p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.76;
}

.prothese-foundation-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(42px, 5vw, 78px);
  align-items: start;
}

.prothese-copy h2 {
  margin-bottom: 24px;
  font-size: clamp(36px, 3.5vw, 56px);
  line-height: 1.02;
}

.prothese-inline-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--champagne);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prothese-solutions {
  display: grid;
  gap: 18px;
}

.solution-card {
  display: grid;
  grid-template-columns: 150px 52px minmax(0, 1fr) minmax(210px, 0.58fr);
  gap: 22px;
  align-items: center;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 252, 246, 0.56);
}

.solution-card img {
  height: 128px;
  border-radius: 6px;
}

.solution-number {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(200, 178, 138, 0.7);
  border-radius: 50%;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 18px;
}

.solution-card h3 {
  margin-bottom: 10px;
  font-size: 31px;
}

.solution-card aside {
  padding: 16px;
  border-left: 1px solid rgba(200, 178, 138, 0.28);
}

.solution-card aside strong,
.solution-card aside span {
  display: block;
}

.solution-card aside strong {
  margin-bottom: 5px;
  color: var(--champagne);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-card aside span + strong {
  margin-top: 14px;
}

.prothese-note {
  padding: 24px 28px;
}

.prothese-note h3 {
  margin-bottom: 10px;
  font-size: 30px;
}

.prothese-situation {
  background: #fbf8f1;
}

.prothese-two,
.prothese-durable-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 5vw, 76px);
  align-items: center;
}

.prothese-table {
  overflow: hidden;
}

.prothese-table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
}

.prothese-table > div:last-child {
  border-bottom: 0;
}

.prothese-table strong,
.prothese-table span {
  padding: 18px 20px;
}

.prothese-table strong:first-child,
.prothese-table span:first-child {
  border-right: 1px solid rgba(200, 178, 138, 0.24);
}

.prothese-table strong {
  color: var(--graphite);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prothese-timeline-section {
  background: var(--ivory);
}

.prothese-timeline {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.prothese-timeline li {
  position: relative;
  padding: 34px 12px 0;
  text-align: center;
  border-top: 1px solid rgba(200, 178, 138, 0.72);
}

.prothese-timeline span {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  margin: -64px auto 18px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--champagne);
  font-family: var(--serif);
}

.prothese-timeline h3 {
  font-size: 17px;
}

.prothese-image {
  min-height: 430px;
  overflow: hidden;
  border-radius: 8px;
  margin: 0;
}

.prothese-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.prothese-check-list li {
  position: relative;
  padding-left: 24px;
  color: var(--mineral);
  font-size: 15px;
}

.prothese-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
}

.prothese-faq-section .implant-faq {
  max-width: 980px;
}

.prothese-cta {
  background: #fbf8f1;
}

.prothese-cta-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 34px 38px;
}

.prothese-cta-card h2 {
  margin-bottom: 12px;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.05;
}

.prothese-page .prothese-hero,
.prothese-page .prothese-section,
.prothese-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.prothese-page .prothese-hero.is-visible,
.prothese-page .prothese-section.is-visible,
.prothese-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.implant-related-link {
  max-width: 760px;
  display: grid;
  gap: 6px;
  margin: 0 auto 34px;
  border: 1px solid rgba(200, 178, 138, 0.32);
  border-radius: 8px;
  padding: 20px 24px;
  background: rgba(255, 252, 246, 0.62);
  color: var(--graphite);
}

.implant-related-link span {
  color: var(--champagne);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .solution-card {
    grid-template-columns: 130px 44px minmax(0, 1fr);
  }

  .solution-card aside {
    grid-column: 3;
    border-left: 0;
    border-top: 1px solid rgba(200, 178, 138, 0.28);
    padding: 14px 0 0;
  }

  .prothese-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prothese-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 0;
  }
}

@media (max-width: 980px) {
  .prothese-shell {
    width: min(100% - 56px, 1240px);
  }

  .prothese-hero-grid,
  .prothese-foundation-grid,
  .prothese-two,
  .prothese-durable-grid,
  .prothese-cta-card {
    grid-template-columns: 1fr;
  }

  .prothese-hero-copy {
    padding-bottom: 10px;
  }

  .prothese-hero-visual {
    min-height: 360px;
    height: 52vw;
    margin: 0 -28px;
  }

  .solution-card {
    grid-template-columns: 140px 44px minmax(0, 1fr);
  }

  .prothese-cta-card .button {
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .prothese-shell {
    width: min(100% - 36px, 1240px);
  }

  .prothese-section {
    padding: 62px 0;
  }

  .prothese-hero-copy h1 {
    font-size: 46px;
  }

  .prothese-hero-visual {
    min-height: 300px;
    height: 78vw;
    margin: 0 -18px;
  }

  .prothese-benefit-grid,
  .prothese-check-list,
  .prothese-table > div,
  .prothese-timeline {
    grid-template-columns: 1fr;
  }

  .solution-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .solution-card img {
    height: 210px;
  }

  .solution-card aside {
    grid-column: auto;
  }

  .prothese-table strong:first-child,
  .prothese-table span:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(200, 178, 138, 0.18);
  }

  .prothese-timeline {
    gap: 16px;
    margin-top: 36px;
  }

  .prothese-timeline li {
    border: 1px solid rgba(200, 178, 138, 0.3);
    border-radius: 8px;
    padding: 22px;
    text-align: left;
  }

  .prothese-timeline span {
    width: 46px;
    height: 46px;
    margin: 0 0 14px;
  }

  .prothese-cta-card {
    padding: 28px 24px;
  }

  .prothese-cta-card .button {
    width: 100%;
  }
}

@media (scripting: none) {
  .prothese-page .prothese-hero,
  .prothese-page .prothese-section,
  .prothese-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Correctif 07/10/2026 (suite 27) : la photo de fond des heros « Implants
   dentaires » et « Prothèses sur implants » était désignée ici par un
   chemin relatif hérité du site statique (url("assets/images/…")), qui
   pointait vers un fichier inexistant une fois la feuille de style placée
   dans assets/css/ du thème : le hero s'affichait sans sa photo. Elle est
   désormais fournie par le gabarit (image mise en avant de la page,
   variable --dr-hero-image posée sur la section), comme sur les autres
   pages, et reste donc modifiable depuis l'administration. */
/* Targeted correction: protheses hero as one continuous faded composition. */
.prothese-page .prothese-hero {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  background: #f7f3ea;
}

.prothese-page .prothese-hero::before {
  content: "";
  position: absolute;
  inset: var(--header-height) 0 0;
  z-index: 1;
  background-image:
    linear-gradient(
      90deg,
      #f7f3ea 0%,
      rgba(247, 243, 234, 0.98) 10%,
      rgba(247, 243, 234, 0.84) 24%,
      rgba(247, 243, 234, 0.46) 42%,
      rgba(247, 243, 234, 0.12) 58%,
      rgba(247, 243, 234, 0) 100%
    ),
    var(--dr-hero-image, none);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

.prothese-page .prothese-hero-grid {
  position: relative;
  z-index: 2;
  min-height: 680px;
  display: flex;
  align-items: center;
}

.prothese-page .prothese-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 560px;
  padding: 72px 0;
}

.prothese-page .prothese-hero-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .prothese-page .prothese-hero {
    min-height: auto;
  }

  .prothese-page .prothese-hero::before {
    display: none;
  }

  .prothese-page .prothese-hero-grid {
    width: min(100% - 48px, 1240px);
    min-height: auto;
    display: block;
    padding: 48px 0 0;
  }

  .prothese-page .prothese-hero-copy {
    max-width: none;
    padding: 0;
  }

  .prothese-page .prothese-hero-visual {
    position: relative;
    width: calc(100% + 48px);
    height: 360px;
    min-height: 0;
    margin: 32px -24px 0;
    opacity: 1;
    pointer-events: auto;
  }

  .prothese-page .prothese-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0) 22%);
  }
}

@media (max-width: 640px) {
  .prothese-page .prothese-hero-grid {
    width: min(100% - 36px, 1240px);
    padding-top: 42px;
  }

  .prothese-page .prothese-hero-visual {
    width: calc(100% + 36px);
    height: 330px;
    margin: 30px -18px 0;
  }
}

/* Augmentation osseuse preimplantaire page */
.bone-page {
  background: var(--ivory);
  color: var(--graphite);
}

.bone-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.bone-page .brand,
.bone-page .brand-mark {
  width: 168px;
  height: 88px;
}

.bone-page .button-primary {
  color: var(--ivory);
}

.bone-shell {
  width: min(100% - 76px, 1180px);
  margin-inline: auto;
}

.bone-hero {
  padding-top: var(--header-height);
  background: #f7f3ea;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
  overflow: hidden;
}

.bone-hero-grid {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: clamp(38px, 5vw, 70px);
}

.bone-hero-copy {
  padding: 58px 0;
}

.bone-hero h1,
.bone-copy h2,
.bone-benefits h2,
.bone-faq-section h2,
.bone-cta-card h2 {
  color: var(--graphite);
  font-family: var(--serif);
  letter-spacing: 0;
}

.bone-hero h1 {
  margin: 14px 0 22px;
  font-size: clamp(54px, 5vw, 82px);
  line-height: 0.96;
}

.bone-lead {
  max-width: 600px;
  color: var(--graphite);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.55;
}

.bone-hero-copy p:not(.eyebrow):not(.bone-lead),
.bone-copy p,
.bone-image-card p,
.bone-benefit-grid p,
.bone-callout,
.bone-note-text,
.bone-cta-card p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.76;
}

.bone-hero-copy p:not(.eyebrow):not(.bone-lead) {
  max-width: 610px;
  margin-bottom: 28px;
}

.bone-hero-visual {
  min-height: 500px;
  height: min(48vw, 580px);
  margin: 0 calc((100vw - min(100vw - 76px, 1180px)) / -2) 0 0;
  overflow: hidden;
}

.bone-hero-visual img,
.bone-image-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.bone-section {
  padding: 84px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.bone-quick {
  padding: 46px 0;
  background: rgba(255, 252, 246, 0.58);
}

.bone-quick-grid,
.bone-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.bone-quick-grid article,
.bone-image-card,
.bone-benefit-grid article,
.bone-callout,
.bone-cta-card {
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.66);
}

.bone-quick-grid article,
.bone-benefit-grid article {
  min-height: 205px;
  padding: 28px 24px;
}

.bone-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne);
}

.bone-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bone-quick-grid h2,
.bone-image-card h3,
.bone-benefit-grid h3,
.bone-timeline h3 {
  color: var(--graphite);
  font-family: var(--serif);
  line-height: 1.05;
}

.bone-quick-grid h2,
.bone-benefit-grid h3 {
  margin: 24px 0 12px;
  font-size: 29px;
}

.bone-why-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

.bone-copy h2,
.bone-benefits h2 {
  margin-bottom: 24px;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.02;
}

.bone-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.bone-image-card {
  overflow: hidden;
}

.bone-image-card img {
  height: 190px;
}

.bone-image-card h3,
.bone-image-card p {
  padding-inline: 22px;
}

.bone-image-card h3 {
  margin: 22px 0 10px;
  font-size: 28px;
}

.bone-image-card p {
  padding-bottom: 24px;
}

.bone-steps-section {
  background: #fbf8f1;
}

.bone-timeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.bone-timeline li {
  position: relative;
  padding: 34px 12px 0;
  text-align: center;
  border-top: 1px solid rgba(200, 178, 138, 0.72);
}

.bone-timeline span {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  margin: -64px auto 18px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  background: #fbf8f1;
  color: var(--champagne);
  font-family: var(--serif);
}

.bone-timeline h3 {
  font-size: 17px;
}

.bone-note-text {
  max-width: 660px;
  margin: 38px auto 0;
  text-align: center;
}

.bone-comfort-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.bone-comfort-grid .bone-image-card img {
  height: 150px;
}

.bone-comfort-grid .bone-image-card h3 {
  font-size: 24px;
}

.bone-callout {
  max-width: 900px;
  margin: 32px auto 0;
  padding: 24px 28px;
  text-align: center;
}

.bone-benefits {
  background: rgba(255, 252, 246, 0.48);
}

.bone-benefits h2 {
  text-align: center;
}

.bone-faq-section .implant-faq {
  max-width: 980px;
}

.bone-cta {
  background: #fbf8f1;
}

.bone-cta-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 34px 38px;
}

.bone-cta-card h2 {
  margin-bottom: 12px;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.05;
}

.bone-page .bone-hero,
.bone-page .bone-section,
.bone-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.bone-page .bone-hero.is-visible,
.bone-page .bone-section.is-visible,
.bone-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .bone-quick-grid,
  .bone-benefit-grid,
  .bone-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bone-comfort-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bone-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 0;
  }
}

@media (max-width: 980px) {
  .bone-shell {
    width: min(100% - 56px, 1180px);
  }

  .bone-hero-grid,
  .bone-why-grid,
  .bone-cta-card {
    grid-template-columns: 1fr;
  }

  .bone-hero-copy {
    padding-bottom: 10px;
  }

  .bone-hero-visual {
    min-height: 360px;
    height: 52vw;
    margin: 0 -28px;
  }

  .bone-cta-card .button {
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .bone-shell {
    width: min(100% - 36px, 1180px);
  }

  .bone-section {
    padding: 62px 0;
  }

  .bone-hero h1 {
    font-size: 44px;
  }

  .bone-hero-visual {
    min-height: 310px;
    height: 78vw;
    margin: 0 -18px;
  }

  .bone-quick-grid,
  .bone-benefit-grid,
  .bone-card-grid,
  .bone-comfort-grid,
  .bone-timeline {
    grid-template-columns: 1fr;
  }

  .bone-timeline {
    gap: 16px;
    margin-top: 36px;
  }

  .bone-timeline li {
    border: 1px solid rgba(200, 178, 138, 0.3);
    border-radius: 8px;
    padding: 22px;
    text-align: left;
  }

  .bone-timeline span {
    width: 46px;
    height: 46px;
    margin: 0 0 14px;
  }

  .bone-cta-card {
    padding: 28px 24px;
  }

  .bone-cta-card .button {
    width: 100%;
  }
}

@media (scripting: none) {
  .bone-page .bone-hero,
  .bone-page .bone-section,
  .bone-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Targeted correction: fused hero for augmentation osseuse page. */
.bone-page .bone-hero {
  position: relative;
  background: #f7f3ea;
  overflow: hidden;
}

.bone-page .bone-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 42%) 1fr;
  align-items: stretch;
  gap: 0;
  min-height: 640px;
}

.bone-page .bone-hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 72px 48px 72px 0;
  background: transparent;
}

.bone-page .bone-hero-visual {
  position: relative;
  z-index: 1;
  min-height: 640px;
  height: auto;
  margin: 0 calc((100vw - min(100vw - 76px, 1180px)) / -2) 0 0;
  overflow: hidden;
}

.bone-page .bone-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.96) 16%,
    rgba(247, 243, 234, 0.72) 36%,
    rgba(247, 243, 234, 0.32) 56%,
    rgba(247, 243, 234, 0) 78%
  );
}

.bone-page .bone-hero-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center right;
}

@media (max-width: 900px) {
  .bone-page .bone-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .bone-page .bone-hero-copy {
    padding: 48px 24px 32px;
  }

  .bone-page .bone-hero-visual {
    min-height: 360px;
    height: 360px;
    margin: 0 -24px;
  }

  .bone-page .bone-hero-visual::before {
    background: linear-gradient(
      180deg,
      #f7f3ea 0%,
      rgba(247, 243, 234, 0.75) 22%,
      rgba(247, 243, 234, 0) 55%
    );
  }
}

@media (max-width: 640px) {
  .bone-page .bone-hero-copy {
    padding: 44px 18px 30px;
  }

  .bone-page .bone-hero-visual {
    height: 330px;
    min-height: 330px;
    margin: 0 -18px;
  }
}

/* Esthetique du sourire page */
.smile-page {
  background: var(--ivory);
  color: var(--graphite);
}

.smile-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.smile-page .brand,
.smile-page .brand-mark {
  width: 168px;
  height: 88px;
}

.smile-page .button-primary {
  color: var(--ivory);
}

.smile-shell {
  width: min(100% - 76px, 1240px);
  margin-inline: auto;
}

.smile-hero {
  padding-top: var(--header-height);
  background: #f7f3ea;
  overflow: hidden;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.smile-hero-grid {
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(420px, 42%) 1fr;
  align-items: stretch;
  gap: 0;
}

.smile-hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 72px 48px 72px 0;
}

.smile-hero h1,
.smile-copy h2,
.smile-faq-section h2 {
  color: var(--graphite);
  font-family: var(--serif);
  letter-spacing: 0;
}

.smile-hero h1 {
  margin: 14px 0 18px;
  font-size: clamp(58px, 5vw, 88px);
  line-height: 0.94;
}

.smile-lead {
  color: var(--champagne);
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
}

.smile-hero-copy p:not(.eyebrow):not(.smile-lead),
.smile-copy p,
.smile-pillars p,
.smile-card p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.78;
}

.smile-hero-copy p:not(.eyebrow):not(.smile-lead) {
  max-width: 590px;
}

.smile-hero-visual {
  position: relative;
  min-height: 640px;
  margin: 0 calc((100vw - min(100vw - 76px, 1240px)) / -2) 0 0;
  overflow: hidden;
}

.smile-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.96) 16%,
    rgba(247, 243, 234, 0.72) 36%,
    rgba(247, 243, 234, 0.28) 56%,
    rgba(247, 243, 234, 0) 78%
  );
}

.smile-hero-visual img,
.smile-image img,
.smile-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.smile-hero-visual img {
  object-position: center right;
}

.smile-section {
  padding: 86px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.smile-approach {
  background: rgba(255, 252, 246, 0.46);
}

.smile-approach .section-heading p {
  max-width: 720px;
  margin: 16px auto 0;
  color: var(--mineral);
  font-size: 16px;
  line-height: 1.75;
}

.smile-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.smile-pillars article,
.smile-card,
.smile-note {
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.66);
}

.smile-pillars article {
  min-height: 220px;
  padding: 28px 24px;
}

.smile-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne);
}

.smile-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smile-pillars h3,
.smile-card h3 {
  color: var(--graphite);
  font-family: var(--serif);
  line-height: 1.05;
}

.smile-pillars h3 {
  margin: 22px 0 12px;
  font-size: 28px;
}

.smile-intro-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(42px, 6vw, 82px);
  align-items: center;
}

.smile-image {
  min-height: 480px;
  overflow: hidden;
  border-radius: 8px;
  margin: 0;
}

.smile-copy h2 {
  margin-bottom: 24px;
  font-size: clamp(36px, 3.6vw, 58px);
  line-height: 1.02;
}

.smile-note {
  margin: 26px 0;
  padding: 22px 24px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
}

.smile-solutions {
  background: #fbf8f1;
}

.smile-solution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.smile-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out;
}

.smile-card:hover,
.smile-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.72);
  background: rgba(255, 252, 246, 0.96);
  box-shadow: var(--shadow);
}

.smile-card:focus-visible {
  outline: 2px solid rgba(200, 178, 138, 0.72);
  outline-offset: 4px;
}

.smile-card img {
  height: 260px;
}

.smile-card .smile-icon,
.smile-card h3,
.smile-card p,
.smile-card-link {
  margin-left: 26px;
  margin-right: 26px;
}

.smile-card .smile-icon {
  margin-top: 26px;
}

.smile-card h3 {
  margin-top: 18px;
  margin-bottom: 12px;
  font-size: 32px;
}

.smile-card p {
  flex: 1;
}

.smile-card-link {
  width: fit-content;
  margin-top: 22px;
  margin-bottom: 28px;
  color: var(--champagne);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.smile-faq-section .implant-faq {
  max-width: 980px;
}

.smile-page .smile-hero,
.smile-page .smile-section,
.smile-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.smile-page .smile-hero.is-visible,
.smile-page .smile-section.is-visible,
.smile-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .smile-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smile-solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .smile-shell {
    width: min(100% - 56px, 1240px);
  }

  .smile-hero-grid,
  .smile-intro-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .smile-hero-copy {
    padding: 48px 24px 32px;
  }

  .smile-hero-visual {
    min-height: 360px;
    height: 360px;
    margin: 0 -24px;
  }

  .smile-hero-visual::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0.76) 22%, rgba(247, 243, 234, 0) 55%);
  }
}

@media (max-width: 640px) {
  .smile-shell {
    width: min(100% - 36px, 1240px);
  }

  .smile-section {
    padding: 62px 0;
  }

  .smile-hero h1 {
    font-size: 46px;
  }

  .smile-hero-copy {
    padding: 44px 18px 30px;
  }

  .smile-hero-visual {
    height: 330px;
    min-height: 330px;
    margin: 0 -18px;
  }

  .smile-pillars,
  .smile-solution-grid {
    grid-template-columns: 1fr;
  }

  .smile-image {
    min-height: 320px;
  }
}

@media (scripting: none) {
  .smile-page .smile-hero,
  .smile-page .smile-section,
  .smile-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Page Éclaircissement dentaire */
.whitening-page {
  background: var(--ivory);
  color: var(--graphite);
}

.whitening-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.whitening-page .brand,
.whitening-page .brand-mark {
  width: 168px;
  height: 88px;
}

.whitening-page .button-primary {
  color: var(--ivory);
}

.whitening-shell {
  width: min(100% - 76px, 1240px);
  margin-inline: auto;
}

.whitening-hero {
  position: relative;
  min-height: 680px;
  padding-top: var(--header-height);
  overflow: hidden;
  background: var(--ivory);
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
}

.whitening-hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(620px, 1.4fr);
  align-items: center;
  min-height: 680px;
  padding: 72px 0;
}

.whitening-hero-content {
  max-width: 620px;
}

.whitening-hero h1,
.whitening-section h2,
.whitening-step h3 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0;
}

.whitening-hero h1 {
  margin: 14px 0 18px;
  font-size: clamp(58px, 5.4vw, 88px);
}

.whitening-hero-content p:not(.eyebrow),
.whitening-step p,
.whitening-cta-card p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.85;
}

.whitening-hero-content p:not(.eyebrow) {
  max-width: 560px;
  margin: 0 0 30px;
}

.whitening-ornament {
  position: relative;
  display: block;
  width: 156px;
  height: 18px;
  margin: 0 0 24px;
}

.whitening-ornament::before,
.whitening-ornament::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 64px;
  height: 1px;
  background: rgba(200, 178, 138, 0.72);
}

.whitening-ornament::before {
  left: 0;
}

.whitening-ornament::after {
  right: 0;
}

.whitening-ornament {
  background:
    linear-gradient(45deg, transparent 41%, var(--champagne) 42% 58%, transparent 59%) center / 16px 16px no-repeat;
}

.whitening-hero-media {
  position: absolute;
  inset: var(--header-height) 0 0 auto;
  z-index: 1;
  width: 62%;
  min-height: 680px;
  overflow: hidden;
}

.whitening-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.96) 10%,
    rgba(247, 243, 234, 0.78) 24%,
    rgba(247, 243, 234, 0.34) 42%,
    rgba(247, 243, 234, 0) 68%
  );
}

.whitening-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: center right;
}

.whitening-section {
  padding: 86px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.whitening-path {
  background: rgba(255, 252, 246, 0.48);
}

.whitening-section .section-heading h2 {
  margin: 18px 0 0;
  font-size: clamp(38px, 4vw, 62px);
}

.whitening-steps {
  display: grid;
  gap: 0;
  max-width: 1040px;
  margin: 56px auto 0;
  border-top: 1px solid rgba(200, 178, 138, 0.28);
}

.whitening-step {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.28);
}

.whitening-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(200, 178, 138, 0.58);
  border-radius: 50%;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
}

.whitening-step-icon {
  width: 52px;
  height: 52px;
  color: var(--champagne);
}

.whitening-step-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.whitening-step h3 {
  margin: 0 0 14px;
  font-size: clamp(32px, 3vw, 46px);
}

.whitening-step p {
  max-width: 720px;
  margin: 0;
}

.whitening-faq-section {
  background: var(--ivory);
}

.whitening-faq-section .implant-faq {
  max-width: 980px;
  margin: 46px auto 0;
}

.whitening-cta {
  background: #fbf8f1;
}

.whitening-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding: 46px 52px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.72);
}

.whitening-cta-card h2 {
  max-width: 760px;
  margin: 8px 0 14px;
  font-size: clamp(38px, 3.8vw, 58px);
}

.whitening-cta-card p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
}

.whitening-page .whitening-hero,
.whitening-page .whitening-section,
.whitening-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.whitening-page .whitening-hero.is-visible,
.whitening-page .whitening-section.is-visible,
.whitening-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .whitening-hero-inner {
    grid-template-columns: minmax(360px, 0.9fr) minmax(500px, 1.1fr);
  }

  .whitening-cta-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .whitening-shell {
    width: min(100% - 56px, 1240px);
  }

  .whitening-hero {
    min-height: auto;
  }

  .whitening-hero-inner {
    display: block;
    min-height: auto;
    padding: 48px 24px 0;
  }

  .whitening-hero-content {
    max-width: none;
  }

  .whitening-hero-media {
    position: relative;
    inset: auto;
    width: calc(100% + 48px);
    min-height: 380px;
    height: 380px;
    margin: 36px -24px 0;
  }

  .whitening-hero-media img {
    min-height: 380px;
  }

  .whitening-hero-media::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0.75) 22%, rgba(247, 243, 234, 0) 55%);
  }

  .whitening-step {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 20px;
  }

  .whitening-step-icon {
    grid-column: 1;
    width: 44px;
    height: 44px;
  }

  .whitening-step > div {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 640px) {
  .whitening-shell {
    width: min(100% - 36px, 1240px);
  }

  .whitening-section {
    padding: 62px 0;
  }

  .whitening-hero h1 {
    font-size: 44px;
  }

  .whitening-hero-inner {
    padding: 44px 18px 0;
  }

  .whitening-hero-media {
    width: calc(100% + 36px);
    height: 330px;
    min-height: 330px;
    margin: 32px -18px 0;
  }

  .whitening-hero-media img {
    min-height: 330px;
  }

  .whitening-step {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 30px 0;
  }

  .whitening-step > div,
  .whitening-step-icon {
    grid-column: auto;
    grid-row: auto;
  }

  .whitening-step-number {
    width: 44px;
    height: 44px;
  }

  .whitening-step h3 {
    font-size: 32px;
  }

  .whitening-cta-card {
    padding: 32px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whitening-page .whitening-hero,
  .whitening-page .whitening-section,
  .whitening-page footer {
    transition: none;
  }
}

@media (scripting: none) {
  .whitening-page .whitening-hero,
  .whitening-page .whitening-section,
  .whitening-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Page facettes dentaires */
.veneer-page {
  background: var(--ivory);
  color: var(--graphite);
}

.veneer-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.veneer-page .brand,
.veneer-page .brand-mark {
  width: 168px;
  height: 88px;
}

.veneer-page .button-primary {
  color: var(--ivory);
}

.veneer-shell {
  width: min(100% - 76px, 1180px);
  margin-inline: auto;
}

.veneer-hero {
  position: relative;
  min-height: 660px;
  padding-top: var(--header-height);
  overflow: hidden;
  background: var(--ivory);
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
}

.veneer-hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(410px, 0.92fr) minmax(590px, 1.35fr);
  align-items: center;
  min-height: 660px;
  padding: 70px 0;
}

.veneer-hero-content {
  max-width: 590px;
}

.veneer-hero h1,
.veneer-section h2,
.veneer-copy h2,
.veneer-card-grid h3,
.veneer-cta-card h2 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
}

.veneer-hero h1 {
  margin: 14px 0 22px;
  font-size: clamp(58px, 5.4vw, 88px);
  line-height: 0.95;
}

.veneer-hero h1 span {
  color: var(--champagne);
}

.veneer-hero-content p:not(.eyebrow),
.veneer-copy p,
.veneer-card-grid p,
.veneer-timeline p,
.veneer-practical-card dd,
.veneer-cta-card p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.85;
}

.veneer-hero-content p:not(.eyebrow) {
  max-width: 560px;
  margin: 0 0 30px;
}

.veneer-hero-media {
  position: absolute;
  inset: var(--header-height) 0 0 auto;
  z-index: 1;
  width: 62%;
  min-height: 660px;
  overflow: hidden;
}

.veneer-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.96) 10%,
    rgba(247, 243, 234, 0.76) 25%,
    rgba(247, 243, 234, 0.34) 44%,
    rgba(247, 243, 234, 0) 70%
  );
}

.veneer-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 660px;
  object-fit: cover;
  object-position: center right;
}

.veneer-section {
  padding: 88px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.veneer-intro {
  background: rgba(255, 252, 246, 0.48);
}

.veneer-intro-grid,
.veneer-materials-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 74px;
  align-items: center;
}

.veneer-intro-image {
  min-height: 540px;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(200, 178, 138, 0.24);
}

.veneer-intro-image img {
  width: 100%;
  height: 100%;
  min-height: 540px;
  object-fit: cover;
}

.veneer-copy h2 {
  margin: 14px 0 24px;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1;
}

.veneer-copy p {
  max-width: 640px;
  margin: 0 0 18px;
}

.veneer-section .section-heading h2 {
  max-width: 840px;
  margin: 18px auto 0;
  font-size: clamp(36px, 3.8vw, 58px);
  line-height: 1.02;
}

.veneer-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 54px;
}

.veneer-card-grid article {
  min-height: 260px;
  padding: 28px 22px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.56);
  transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.veneer-card-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.62);
  box-shadow: 0 18px 42px rgba(22, 22, 22, 0.06);
}

.veneer-card-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  color: var(--champagne);
}

.veneer-card-icon svg,
.veneer-timeline-icon svg,
.veneer-cta-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.veneer-card-grid h3 {
  margin: 24px 0 12px;
  font-size: 28px;
  line-height: 1;
}

.veneer-card-grid p {
  margin: 0;
}

.veneer-approach {
  background: var(--ivory);
}

.veneer-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.veneer-timeline::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 36px;
  height: 1px;
  background: rgba(200, 178, 138, 0.44);
}

.veneer-timeline li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 0 14px;
  text-align: center;
}

.veneer-timeline-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border: 1px solid rgba(200, 178, 138, 0.62);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--champagne);
}

.veneer-timeline-icon svg {
  width: 34px;
  height: 34px;
}

.veneer-timeline strong {
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.35;
}

.veneer-timeline p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.65;
}

.veneer-materials {
  background: #fbf8f1;
}

.veneer-practical-card {
  padding: 38px;
  border: 1px solid rgba(200, 178, 138, 0.3);
  border-radius: 8px;
  background: rgba(247, 243, 234, 0.74);
}

.veneer-practical-card h2 {
  margin: 10px 0 26px;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1;
}

.veneer-practical-card dl {
  margin: 0;
}

.veneer-practical-card div {
  padding: 20px 0;
  border-top: 1px solid rgba(200, 178, 138, 0.24);
}

.veneer-practical-card dt {
  margin-bottom: 6px;
  color: var(--graphite);
  font-weight: 600;
}

.veneer-practical-card dd {
  margin: 0;
}

.veneer-check-list {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.veneer-check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--graphite);
}

.veneer-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 13px;
  height: 13px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
}

.veneer-check-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.55em + 4px);
  width: 5px;
  height: 3px;
  border-left: 1px solid var(--champagne);
  border-bottom: 1px solid var(--champagne);
  transform: rotate(-45deg);
}

.veneer-faq-section {
  background: var(--ivory);
}

.veneer-faq-section .implant-faq {
  max-width: 980px;
  margin: 46px auto 0;
}

.veneer-faq-section .implant-faq details[open] summary::after {
  content: "-";
}

.veneer-cta {
  background: #fbf8f1;
}

.veneer-cta-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 44px 50px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.72);
}

.veneer-cta-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(200, 178, 138, 0.54);
  border-radius: 50%;
  color: var(--champagne);
}

.veneer-cta-icon svg {
  width: 36px;
  height: 36px;
}

.veneer-cta-card h2 {
  margin: 0 0 12px;
  font-size: clamp(36px, 3.6vw, 54px);
  line-height: 1;
}

.veneer-cta-card p {
  max-width: 680px;
  margin: 0;
}

.veneer-page .veneer-hero,
.veneer-page .veneer-section,
.veneer-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.veneer-page .veneer-hero.is-visible,
.veneer-page .veneer-section.is-visible,
.veneer-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .veneer-hero-inner {
    grid-template-columns: minmax(350px, 0.9fr) minmax(480px, 1.1fr);
  }

  .veneer-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .veneer-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 0;
  }

  .veneer-timeline::before {
    display: none;
  }

  .veneer-cta-card {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .veneer-cta-card .button {
    grid-column: 2;
    width: fit-content;
  }
}

@media (max-width: 900px) {
  .veneer-shell {
    width: min(100% - 56px, 1180px);
  }

  .veneer-hero {
    min-height: auto;
  }

  .veneer-hero-inner {
    display: block;
    min-height: auto;
    padding: 48px 24px 0;
  }

  .veneer-hero-content {
    max-width: none;
  }

  .veneer-hero-media {
    position: relative;
    inset: auto;
    width: calc(100% + 48px);
    height: 380px;
    min-height: 380px;
    margin: 36px -24px 0;
  }

  .veneer-hero-media img {
    min-height: 380px;
  }

  .veneer-hero-media::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0.75) 22%, rgba(247, 243, 234, 0) 55%);
  }

  .veneer-intro-grid,
  .veneer-materials-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .veneer-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .veneer-timeline {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-inline: auto;
  }

  .veneer-timeline li {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 20px;
    justify-items: start;
    text-align: left;
    padding: 0;
  }

  .veneer-timeline-icon {
    grid-row: span 2;
  }

  .veneer-timeline p {
    margin-top: 6px;
  }
}

@media (max-width: 640px) {
  .veneer-shell {
    width: min(100% - 36px, 1180px);
  }

  .veneer-section {
    padding: 62px 0;
  }

  .veneer-hero h1 {
    font-size: 44px;
  }

  .veneer-hero-inner {
    padding: 44px 18px 0;
  }

  .veneer-hero-media {
    width: calc(100% + 36px);
    height: 330px;
    min-height: 330px;
    margin: 32px -18px 0;
  }

  .veneer-hero-media img {
    min-height: 330px;
  }

  .veneer-intro-image,
  .veneer-intro-image img {
    min-height: 360px;
  }

  .veneer-card-grid {
    grid-template-columns: 1fr;
  }

  .veneer-card-grid article {
    min-height: auto;
  }

  .veneer-practical-card {
    padding: 30px 24px;
  }

  .veneer-cta-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }

  .veneer-cta-card .button {
    grid-column: auto;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .veneer-page .veneer-hero,
  .veneer-page .veneer-section,
  .veneer-page footer {
    transition: none;
  }
}

@media (scripting: none) {
  .veneer-page .veneer-hero,
  .veneer-page .veneer-section,
  .veneer-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Page taches blanches ICON */
.icon-page {
  background: var(--ivory);
  color: var(--graphite);
}

.icon-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.icon-page .brand,
.icon-page .brand-mark {
  width: 168px;
  height: 88px;
}

.icon-page .button-primary {
  color: var(--ivory);
}

.icon-shell {
  width: min(100% - 76px, 1240px);
  margin-inline: auto;
}

.icon-hero {
  position: relative;
  min-height: 680px;
  padding-top: var(--header-height);
  overflow: hidden;
  background: var(--ivory);
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
}

.icon-hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(430px, 0.94fr) minmax(600px, 1.32fr);
  align-items: center;
  min-height: 680px;
  padding: 68px 0;
}

.icon-hero-content {
  max-width: 640px;
}

.icon-hero-mark {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border: 1px solid rgba(200, 178, 138, 0.46);
  border-radius: 50%;
  color: var(--champagne);
}

.icon-hero-mark svg,
.icon-card-mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-hero-mark svg {
  width: 30px;
  height: 30px;
}

.icon-hero h1,
.icon-section h2,
.icon-copy h2,
.icon-card-grid h3,
.icon-cta-card h2 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
}

.icon-hero h1 {
  margin: 14px 0 24px;
  font-size: clamp(54px, 5vw, 82px);
  line-height: 0.96;
}

.icon-hero h1 span {
  color: var(--champagne);
}

.icon-hero-content p:not(.eyebrow),
.icon-copy p,
.icon-card-grid p,
.icon-benefit-list p,
.icon-practical-grid p,
.icon-cta-card p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.85;
}

.icon-hero-content p:not(.eyebrow) {
  max-width: 590px;
  margin: 0 0 18px;
}

.icon-hero-content .button {
  margin-top: 12px;
}

.icon-hero-media {
  position: absolute;
  inset: var(--header-height) 0 0 auto;
  z-index: 1;
  width: 62%;
  min-height: 680px;
  overflow: hidden;
}

.icon-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.96) 11%,
    rgba(247, 243, 234, 0.76) 27%,
    rgba(247, 243, 234, 0.34) 46%,
    rgba(247, 243, 234, 0) 72%
  );
}

.icon-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: center right;
}

.icon-section {
  padding: 88px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.icon-intro,
.icon-benefits,
.icon-cta {
  background: rgba(255, 252, 246, 0.48);
}

.icon-split-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 74px;
  align-items: center;
}

.icon-image {
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(200, 178, 138, 0.24);
  border-radius: 8px;
  background: #fbf8f1;
}

.icon-image img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.icon-copy h2 {
  margin: 14px 0 24px;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1;
}

.icon-copy p {
  max-width: 660px;
  margin: 0 0 18px;
}

.icon-section .section-heading h2 {
  max-width: 840px;
  margin: 18px auto 0;
  font-size: clamp(36px, 3.8vw, 58px);
  line-height: 1.02;
}

.icon-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 54px;
}

.icon-card-grid article {
  min-height: 270px;
  padding: 28px 22px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.56);
  transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.icon-card-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.62);
  box-shadow: 0 18px 42px rgba(22, 22, 22, 0.06);
}

.icon-card-mark {
  display: inline-flex;
  width: 46px;
  height: 46px;
  color: var(--champagne);
}

.icon-card-grid h3 {
  margin: 24px 0 12px;
  font-size: 27px;
  line-height: 1;
}

.icon-card-grid p {
  margin: 0;
}

.icon-benefit-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 54px;
}

.icon-benefit-list article {
  min-height: 190px;
  padding: 28px 22px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.54);
  transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.icon-benefit-list article:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.62);
  box-shadow: 0 18px 42px rgba(22, 22, 22, 0.06);
}

.icon-benefit-list span {
  display: block;
  margin-bottom: 18px;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
}

.icon-benefit-list p {
  margin: 0;
  color: var(--graphite);
}

.icon-practical {
  background: var(--ivory);
}

.icon-practical-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 54px;
}

.icon-practical-grid article {
  min-height: 190px;
  padding: 28px 22px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.58);
  transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.icon-practical-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.62);
  box-shadow: 0 18px 42px rgba(22, 22, 22, 0.06);
}

.icon-practical-grid strong {
  display: block;
  margin-bottom: 10px;
  color: var(--graphite);
  font-size: 15px;
}

.icon-practical-grid p {
  margin: 0;
}

.icon-faq-section {
  background: #fbf8f1;
}

.icon-faq-section .implant-faq {
  max-width: none;
  margin: 46px auto 0;
}

.icon-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.icon-faq-grid details {
  margin: 0;
}

.icon-faq-grid details[open] summary::after {
  content: "-";
}

.icon-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding: 46px 52px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.72);
}

.icon-cta-card h2 {
  max-width: 760px;
  margin: 8px 0 14px;
  font-size: clamp(38px, 3.8vw, 58px);
  line-height: 1;
}

.icon-cta-card p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
}

.icon-page .icon-hero,
.icon-page .icon-section,
.icon-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.icon-page .icon-hero.is-visible,
.icon-page .icon-section.is-visible,
.icon-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .icon-hero-inner {
    grid-template-columns: minmax(360px, 0.9fr) minmax(500px, 1.1fr);
  }

  .icon-card-grid,
  .icon-practical-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .icon-benefit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .icon-cta-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .icon-shell {
    width: min(100% - 56px, 1240px);
  }

  .icon-hero {
    min-height: auto;
  }

  .icon-hero-inner {
    display: block;
    min-height: auto;
    padding: 48px 24px 0;
  }

  .icon-hero-content {
    max-width: none;
  }

  .icon-hero-media {
    position: relative;
    inset: auto;
    width: calc(100% + 48px);
    height: 380px;
    min-height: 380px;
    margin: 36px -24px 0;
  }

  .icon-hero-media img {
    min-height: 380px;
  }

  .icon-hero-media::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0.75) 22%, rgba(247, 243, 234, 0) 55%);
  }

  .icon-split-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .icon-card-grid,
  .icon-practical-grid,
  .icon-benefit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .icon-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .icon-shell {
    width: min(100% - 36px, 1240px);
  }

  .icon-section {
    padding: 62px 0;
  }

  .icon-hero h1 {
    font-size: 41px;
  }

  .icon-hero-inner {
    padding: 44px 18px 0;
  }

  .icon-hero-media {
    width: calc(100% + 36px);
    height: 330px;
    min-height: 330px;
    margin: 32px -18px 0;
  }

  .icon-hero-media img {
    min-height: 330px;
  }

  .icon-image,
  .icon-image img {
    min-height: 340px;
  }

  .icon-card-grid,
  .icon-practical-grid,
  .icon-benefit-list {
    grid-template-columns: 1fr;
  }

  .icon-cta-card {
    padding: 32px 24px;
  }

  .icon-cta-card .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-page .icon-hero,
  .icon-page .icon-section,
  .icon-page footer {
    transition: none;
  }
}

@media (scripting: none) {
  .icon-page .icon-hero,
  .icon-page .icon-section,
  .icon-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Page soins conservateurs */
.conservative-page {
  background: var(--ivory);
  color: var(--graphite);
}

.conservative-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.conservative-page .brand,
.conservative-page .brand-mark {
  width: 168px;
  height: 88px;
}

.conservative-page .button-primary {
  color: var(--ivory);
}

.conservative-shell {
  width: min(100% - 76px, 1240px);
  margin-inline: auto;
}

.conservative-hero {
  position: relative;
  min-height: 700px;
  padding-top: var(--header-height);
  overflow: hidden;
  background: var(--ivory);
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
}

.conservative-hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(440px, 0.98fr) minmax(600px, 1.25fr);
  align-items: center;
  min-height: 700px;
  padding: 68px 0;
}

.conservative-hero-content {
  max-width: 650px;
}

.conservative-hero h1,
.conservative-section h2,
.conservative-copy h2,
.conservative-card-grid h3,
.conservative-cta-card h2 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
}

.conservative-hero h1 {
  margin: 14px 0 18px;
  font-size: clamp(58px, 5.4vw, 88px);
  line-height: 0.95;
}

.conservative-hero h1 span {
  color: var(--champagne);
}

.conservative-hero-content p:not(.eyebrow),
.conservative-copy p,
.conservative-list,
.conservative-card-grid p,
.conservative-cta-card p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.85;
}

.conservative-hero-content p:not(.eyebrow) {
  max-width: 610px;
  margin: 0 0 18px;
}

.conservative-hero-content .button {
  margin-top: 12px;
}

.conservative-ornament {
  position: relative;
  display: block;
  width: 156px;
  height: 18px;
  margin: 0 0 24px;
  background: linear-gradient(45deg, transparent 41%, var(--champagne) 42% 58%, transparent 59%) center / 16px 16px no-repeat;
}

.conservative-ornament::before,
.conservative-ornament::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 64px;
  height: 1px;
  background: rgba(200, 178, 138, 0.72);
}

.conservative-ornament::before {
  left: 0;
}

.conservative-ornament::after {
  right: 0;
}

.conservative-hero-media {
  position: absolute;
  inset: var(--header-height) 0 0 auto;
  z-index: 1;
  width: 62%;
  min-height: 700px;
  overflow: hidden;
}

.conservative-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.96) 10%,
    rgba(247, 243, 234, 0.78) 25%,
    rgba(247, 243, 234, 0.36) 45%,
    rgba(247, 243, 234, 0) 72%
  );
}

.conservative-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 700px;
  object-fit: cover;
  object-position: center right;
}

.conservative-section {
  padding: 88px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.conservative-preserve,
.conservative-benefits,
.conservative-cta {
  background: rgba(255, 252, 246, 0.48);
}

.conservative-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, 0.97fr);
  gap: 74px;
  align-items: center;
}

.conservative-copy h2 {
  margin: 14px 0 24px;
  font-size: clamp(40px, 4.1vw, 64px);
  line-height: 1;
}

.conservative-copy p {
  max-width: 660px;
  margin: 0 0 18px;
}

.conservative-list {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.conservative-list li {
  position: relative;
  padding-left: 28px;
}

.conservative-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--champagne);
  transform: rotate(45deg);
}

.conservative-image {
  min-height: 540px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(200, 178, 138, 0.24);
  border-radius: 30px;
  background: #fbf8f1;
  box-shadow: 0 18px 44px rgba(22, 22, 22, 0.035);
}

.conservative-image img {
  width: 100%;
  height: 100%;
  min-height: 540px;
  object-fit: cover;
}

.conservative-section .section-heading h2 {
  max-width: 840px;
  margin: 18px auto 0;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1.02;
}

.conservative-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 54px;
}

.conservative-card-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.conservative-card-grid article {
  min-height: 260px;
  padding: 30px 24px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 30px;
  background: rgba(255, 252, 246, 0.62);
  box-shadow: 0 18px 44px rgba(22, 22, 22, 0.035);
  transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.conservative-card-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.62);
  box-shadow: 0 22px 48px rgba(22, 22, 22, 0.055);
}

.conservative-card-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  color: var(--champagne);
}

.conservative-card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conservative-card-index {
  display: block;
  margin-bottom: 22px;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
}

.conservative-card-grid h3 {
  margin: 24px 0 12px;
  font-size: 28px;
  line-height: 1;
}

.conservative-card-grid p {
  margin: 0;
}

.conservative-faq-section {
  background: var(--ivory);
}

.conservative-faq {
  max-width: 980px;
  margin: 46px auto 0;
}

.conservative-faq details[open] summary::after {
  content: "-";
}

.conservative-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.45fr);
  gap: 42px;
  align-items: center;
  padding: 46px 52px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 30px;
  background: rgba(255, 252, 246, 0.72);
  box-shadow: 0 18px 44px rgba(22, 22, 22, 0.035);
}

.conservative-cta-card h2 {
  max-width: 760px;
  margin: 8px 0 14px;
  font-size: clamp(38px, 3.8vw, 58px);
  line-height: 1;
}

.conservative-cta-card p:not(.eyebrow) {
  max-width: 720px;
  margin: 0 0 26px;
}

.conservative-cta-image {
  min-height: 300px;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
}

.conservative-cta-image img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.conservative-page .conservative-hero,
.conservative-page .conservative-section,
.conservative-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.conservative-page .conservative-hero.is-visible,
.conservative-page .conservative-section.is-visible,
.conservative-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .conservative-hero-inner {
    grid-template-columns: minmax(360px, 0.95fr) minmax(500px, 1.05fr);
  }

  .conservative-card-grid,
  .conservative-card-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .conservative-shell {
    width: min(100% - 56px, 1240px);
  }

  .conservative-hero {
    min-height: auto;
  }

  .conservative-hero-inner {
    display: block;
    min-height: auto;
    padding: 48px 24px 0;
  }

  .conservative-hero-content {
    max-width: none;
  }

  .conservative-hero-media {
    position: relative;
    inset: auto;
    width: calc(100% + 48px);
    height: 380px;
    min-height: 380px;
    margin: 36px -24px 0;
  }

  .conservative-hero-media img {
    min-height: 380px;
  }

  .conservative-hero-media::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0.75) 22%, rgba(247, 243, 234, 0) 55%);
  }

  .conservative-split-grid,
  .conservative-cta-card {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .conservative-cta-image {
    order: -1;
  }
}

@media (max-width: 640px) {
  .conservative-shell {
    width: min(100% - 36px, 1240px);
  }

  .conservative-section {
    padding: 62px 0;
  }

  .conservative-hero h1 {
    font-size: 43px;
  }

  .conservative-hero-inner {
    padding: 44px 18px 0;
  }

  .conservative-hero-media {
    width: calc(100% + 36px);
    height: 330px;
    min-height: 330px;
    margin: 32px -18px 0;
  }

  .conservative-hero-media img {
    min-height: 330px;
  }

  .conservative-image,
  .conservative-image img {
    min-height: 340px;
  }

  .conservative-card-grid,
  .conservative-card-grid-four {
    grid-template-columns: 1fr;
  }

  .conservative-card-grid article {
    min-height: auto;
  }

  .conservative-cta-card {
    padding: 32px 24px;
  }

  .conservative-cta-card .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conservative-page .conservative-hero,
  .conservative-page .conservative-section,
  .conservative-page footer {
    transition: none;
  }
}

@media (scripting: none) {
  .conservative-page .conservative-hero,
  .conservative-page .conservative-section,
  .conservative-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Implants: comfort and FAQ stacked as full-width blocks */
.implant-page .implant-comfort-grid {
  width: min(100% - 76px, 1280px);
  max-width: 1280px;
  grid-template-columns: 1fr;
  gap: 54px;
}

.implant-page .implant-comfort-panel,
.implant-page .implant-comfort-grid > .implant-faq {
  border-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.implant-page .implant-comfort-panel {
  width: 100%;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.58fr);
  padding-bottom: 0;
}

.implant-page .implant-comfort-grid > .implant-faq {
  width: min(100%, 980px);
  margin: 0 auto;
  padding-top: 0;
}

@media (max-width: 900px) {
  .implant-page .implant-comfort-grid {
    width: min(100% - 56px, 1280px);
  }

  .implant-page .implant-comfort-panel {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }
}

@media (max-width: 640px) {
  .implant-page .implant-comfort-grid {
    width: min(100% - 36px, 1280px);
  }
}

/* Page parodontologie */
.perio-page {
  background: var(--ivory);
  color: var(--graphite);
}

.perio-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.perio-page .brand,
.perio-page .brand-mark {
  width: 168px;
  height: 88px;
}

.perio-page .button-primary {
  color: var(--ivory);
}

.perio-shell {
  width: min(100% - 76px, 1240px);
  margin-inline: auto;
}

.perio-hero {
  position: relative;
  min-height: 680px;
  padding-top: var(--header-height);
  overflow: hidden;
  background: var(--ivory);
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
}

.perio-hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(600px, 1.35fr);
  align-items: center;
  min-height: 680px;
  padding: 70px 0;
}

.perio-hero-content {
  max-width: 620px;
}

.perio-hero h1,
.perio-section h2,
.perio-copy h2,
.perio-treatment-grid h3,
.perio-cta-card h2 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
}

.perio-hero h1 {
  margin: 14px 0 20px;
  font-size: clamp(58px, 5.4vw, 88px);
  line-height: 0.95;
}

.perio-hero h1 span,
.perio-lead {
  color: var(--champagne);
}

.perio-lead {
  margin: 0 0 30px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.08;
}

.perio-hero-media {
  position: absolute;
  inset: var(--header-height) 0 0 auto;
  z-index: 1;
  width: 62%;
  min-height: 680px;
  overflow: hidden;
}

.perio-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.96) 10%,
    rgba(247, 243, 234, 0.78) 25%,
    rgba(247, 243, 234, 0.34) 44%,
    rgba(247, 243, 234, 0) 70%
  );
}

.perio-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: center right;
}

.perio-section {
  padding: 88px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.perio-intro,
.perio-assessment,
.perio-faq-section {
  background: rgba(255, 252, 246, 0.48);
}

.perio-section .section-heading h2 {
  max-width: 860px;
  margin: 18px auto 0;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1.02;
}

.perio-section .section-heading p {
  max-width: 620px;
  margin: 16px auto 0;
  color: var(--mineral);
}

.perio-intro-grid,
.perio-three-grid,
.perio-treatment-grid {
  display: grid;
  gap: 22px;
  margin-top: 54px;
}

.perio-intro-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.perio-three-grid,
.perio-treatment-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.perio-intro-grid article,
.perio-three-grid article,
.perio-soft-card,
.perio-treatment-grid article,
.perio-philosophy,
.perio-cta-card {
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.62);
}

.perio-intro-grid article,
.perio-three-grid article,
.perio-soft-card,
.perio-treatment-grid article {
  padding: 32px 28px;
}

.perio-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  color: var(--champagne);
}

.perio-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perio-intro-grid p,
.perio-three-grid p,
.perio-copy p,
.perio-treatment-grid p,
.perio-philosophy p,
.perio-cta-card p,
.perio-list {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.85;
}

.perio-intro-grid p,
.perio-three-grid p,
.perio-treatment-grid p,
.perio-philosophy p,
.perio-cta-card p {
  margin: 0 0 16px;
}

.perio-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.perio-list li {
  position: relative;
  padding-left: 28px;
}

.perio-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--champagne);
  transform: rotate(45deg);
}

.perio-soft-card {
  background: rgba(247, 243, 234, 0.78);
}

.perio-assessment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.62fr);
  gap: 54px;
  align-items: center;
}

.perio-copy h2 {
  margin: 12px 0 22px;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1;
}

.perio-copy p {
  max-width: 700px;
}

.perio-treatment-grid h3 {
  margin: 0 0 18px;
  font-size: 31px;
  line-height: 1;
}

.perio-philosophy {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 28px;
  margin-top: 80px;
  padding: 48px;
  background: #fbf8f1;
}

.perio-philosophy .perio-icon {
  margin: 0;
}

.perio-faq {
  max-width: 980px;
  margin: 46px auto 0;
}

.perio-faq details[open] summary::after {
  content: "-";
}

.perio-cta {
  background: #fbf8f1;
}

.perio-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding: 46px 52px;
}

.perio-cta-card h2 {
  max-width: 760px;
  margin: 8px 0 14px;
  font-size: clamp(38px, 3.8vw, 58px);
  line-height: 1;
}

.perio-cta-card p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
}

.perio-page .perio-hero,
.perio-page .perio-section,
.perio-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.perio-page .perio-hero.is-visible,
.perio-page .perio-section.is-visible,
.perio-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .perio-hero-inner {
    grid-template-columns: minmax(360px, 0.9fr) minmax(500px, 1.1fr);
  }

  .perio-three-grid,
  .perio-treatment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .perio-shell {
    width: min(100% - 56px, 1240px);
  }

  .perio-hero {
    min-height: auto;
  }

  .perio-hero-inner {
    display: block;
    min-height: auto;
    padding: 48px 24px 0;
  }

  .perio-hero-content {
    max-width: none;
  }

  .perio-hero-media {
    position: relative;
    inset: auto;
    width: calc(100% + 48px);
    height: 380px;
    min-height: 380px;
    margin: 36px -24px 0;
  }

  .perio-hero-media img {
    min-height: 380px;
  }

  .perio-hero-media::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0.75) 22%, rgba(247, 243, 234, 0) 55%);
  }

  .perio-intro-grid,
  .perio-assessment-grid,
  .perio-cta-card {
    grid-template-columns: 1fr;
  }

  .perio-philosophy {
    margin-top: 56px;
  }
}

@media (max-width: 640px) {
  .perio-shell {
    width: min(100% - 36px, 1240px);
  }

  .perio-section {
    padding: 62px 0;
  }

  .perio-hero h1 {
    font-size: 44px;
  }

  .perio-lead {
    font-size: 28px;
  }

  .perio-hero-inner {
    padding: 44px 18px 0;
  }

  .perio-hero-media {
    width: calc(100% + 36px);
    height: 330px;
    min-height: 330px;
    margin: 32px -18px 0;
  }

  .perio-hero-media img {
    min-height: 330px;
  }

  .perio-three-grid,
  .perio-treatment-grid {
    grid-template-columns: 1fr;
  }

  .perio-philosophy {
    grid-template-columns: 1fr;
    margin-top: 40px;
    padding: 32px 24px;
  }

  .perio-cta-card {
    padding: 32px 24px;
  }

  .perio-cta-card .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .perio-page .perio-hero,
  .perio-page .perio-section,
  .perio-page footer {
    transition: none;
  }
}

@media (scripting: none) {
  .perio-page .perio-hero,
  .perio-page .perio-section,
  .perio-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Le cabinet */
.cabinet-page .site-header {
  background: rgba(247, 243, 234, 0.88);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.05);
  backdrop-filter: blur(18px);
}

.cabinet-page main {
  width: 100%;
  overflow-x: hidden;
  background: var(--ivory);
}

.cabinet-shell {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 96px);
}

.cabinet-hero .cabinet-shell {
  max-width: none;
  padding-left: clamp(24px, 5vw, 96px);
  padding-right: 0;
}

.cabinet-hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding-top: var(--header-height);
  background:
    radial-gradient(circle at 75% 45%, rgba(200, 178, 138, 0.1), transparent 42%),
    linear-gradient(to bottom, #f7f3ea 0%, #f7f3ea 86%, rgba(247, 243, 234, 0) 100%);
  mask-image: none;
}

.cabinet-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 4;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247, 243, 234, 0), #f7f3ea);
}

.cabinet-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(48px, 6vw, 120px);
  min-height: 650px;
  padding: 74px 0 118px;
}

.cabinet-hero-copy {
  max-width: 610px;
}

.cabinet-hero-copy h1,
.cabinet-section h2,
.cabinet-section h3 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
}

.cabinet-hero-copy h1 {
  margin: 18px 0 28px;
  font-size: clamp(52px, 6vw, 84px);
}

.cabinet-hero-copy p:not(.eyebrow) {
  max-width: 560px;
  margin: 0 0 30px;
  color: var(--mineral);
  font-size: 18px;
  line-height: 1.82;
}

.cabinet-hero-copy .button {
  min-width: 218px;
}

.cabinet-hero-points {
  display: grid;
  gap: 14px;
  margin-top: 34px;
  color: rgba(22, 22, 22, 0.72);
  font-size: 14px;
  font-weight: 500;
}

.cabinet-hero-points span {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cabinet-hero-points svg,
.cabinet-icon svg,
.cabinet-tech-tags::before {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--champagne);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cabinet-hero-media {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 620px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cabinet-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  object-position: center right;
  border-radius: 0;
  box-shadow: none;
  mask-image: linear-gradient(to left, black 65%, rgba(0, 0, 0, 0.75) 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 65%, rgba(0, 0, 0, 0.75) 82%, transparent 100%);
}

.cabinet-section {
  width: 100%;
  padding: 104px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
  background: var(--ivory);
}

.cabinet-section .section-heading h2 {
  max-width: 900px;
  margin: 18px auto 0;
  font-size: clamp(40px, 4.8vw, 68px);
}

/* Correctif 14/09/2026 : texte d'introduction ajouté sous le titre de la
   section "technologies" (page-le-cabinet.php), sur le même principe que
   les autres sections du site qui centrent un court texte d'intro sous
   leur titre (cf. ".perio-section .section-heading p",
   ".smile-approach .section-heading p", etc.) — sans cette règle, le
   paragraphe s'affiche en pleine largeur sans mise en forme, puisque
   ".section-heading p" n'a pas de style générique. */
.cabinet-tech .section-heading p {
  max-width: 680px;
  margin: 16px auto 0;
  color: var(--mineral);
  font-size: 16px;
  line-height: 1.75;
}

.cabinet-tech .section-heading p + p {
  margin-top: 12px;
}

.practitioner-section {
  padding-block: clamp(80px, 8vw, 132px);
}

.practitioner-section__inner {
  display: grid;
  grid-template-areas:
    "identity content"
    "languages content";
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 34px clamp(56px, 8vw, 128px);
}

.practitioner-section__identity {
  grid-area: identity;
}

.practitioner-section__portrait {
  width: min(100%, 250px);
  aspect-ratio: 4 / 5;
  margin: 24px 0 32px;
  overflow: hidden;
  border-radius: 3px;
  background: #ece7dc;
}

.practitioner-section__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.practitioner-section__identity h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(32px, 3vw, 54px);
  line-height: 1.02;
}

.practitioner-section__role {
  margin: 24px 0 0;
  color: var(--mineral);
  font-size: 16px;
  line-height: 1.55;
}

.practitioner-section__divider {
  width: 80px;
  height: 1px;
  margin-top: 32px;
  background: var(--champagne);
}

.practitioner-section__content {
  grid-area: content;
  max-width: 760px;
}

.practitioner-section__content p {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.85;
}

.practitioner-section__content p + p {
  margin-top: 28px;
}

.practitioner-section__content .practitioner-section__lead {
  color: var(--graphite);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.72;
}

.practitioner-section__languages {
  grid-area: languages;
}

.practitioner-section__languages-label {
  margin: 0 0 10px;
  color: var(--champagne);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.practitioner-section__languages p:last-child {
  margin: 0;
  color: var(--graphite);
  font-size: 16px;
  line-height: 1.65;
}

.cabinet-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 58px;
}

.cabinet-card {
  min-height: 250px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.66);
  padding: 34px 30px;
  box-shadow: 0 12px 42px rgba(22, 22, 22, 0.035);
  transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out, background 220ms ease-out;
}

.cabinet-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.72);
  background: rgba(255, 252, 246, 0.96);
  box-shadow: var(--shadow);
}

.cabinet-card h3 {
  margin: 28px 0 0;
  font-size: clamp(28px, 2.4vw, 38px);
}

.cabinet-benefits .cabinet-card h3 {
  margin-top: 0;
}

.cabinet-card p {
  margin: 18px 0 0;
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.78;
}

.cabinet-icon {
  display: inline-flex;
}

.cabinet-icon svg {
  width: 42px;
  height: 42px;
  stroke-width: 1.35;
}

.cabinet-tech-list {
  display: grid;
  gap: 28px;
  margin-top: 62px;
}

.cabinet-tech-row {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: clamp(36px, 6vw, 86px);
  min-height: 360px;
  border-top: 1px solid rgba(200, 178, 138, 0.24);
  padding: 42px 0;
}

.cabinet-tech-row:last-child {
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
}

.cabinet-tech-row img {
  width: 100%;
  height: 320px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}

.cabinet-tech-row h3 {
  margin: 10px 0 18px;
  font-size: clamp(38px, 4.2vw, 58px);
}

.cabinet-tech-row p:not(.eyebrow) {
  max-width: 610px;
  margin: 0;
  color: var(--mineral);
  font-size: 16px;
  line-height: 1.85;
}

.cabinet-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.cabinet-tech-tags span {
  border: 1px solid rgba(200, 178, 138, 0.36);
  border-radius: 999px;
  padding: 8px 12px;
  color: rgba(22, 22, 22, 0.68);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cabinet-quote {
  padding: 136px 0 150px;
  text-align: center;
}

.cabinet-quote h2 {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(46px, 5.4vw, 82px);
}

.cabinet-quote p {
  margin: 28px 0 0;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.05;
}

.cabinet-page .cabinet-hero,
.cabinet-page .cabinet-section,
.cabinet-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}

.cabinet-page .cabinet-hero.is-visible,
.cabinet-page .cabinet-section.is-visible,
.cabinet-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .cabinet-shell {
    width: 100%;
    max-width: 1680px;
    padding-inline: clamp(28px, 5vw, 72px);
  }

  .cabinet-hero .cabinet-shell {
    padding-left: clamp(28px, 5vw, 72px);
    padding-right: 0;
  }

  .cabinet-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .cabinet-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practitioner-section__inner {
    grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
    gap: 30px clamp(40px, 6vw, 72px);
  }

  .practitioner-section__portrait {
    width: min(100%, 230px);
  }
}

@media (max-width: 900px) {
  .cabinet-shell {
    width: 100%;
    max-width: 760px;
    padding-inline: 28px;
  }

  .cabinet-hero .cabinet-shell {
    max-width: 760px;
    padding-inline: 28px;
  }

  .cabinet-hero {
    min-height: auto;
    mask-image: none;
  }

  .cabinet-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: 54px 0 70px;
  }

  .cabinet-hero-copy h1 {
    font-size: 48px;
  }

  .cabinet-hero-media img {
    height: 380px;
    min-height: 0;
    mask-image: linear-gradient(to bottom, black 72%, rgba(0, 0, 0, 0.78) 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 72%, rgba(0, 0, 0, 0.78) 88%, transparent 100%);
  }

  .cabinet-hero-media {
    margin: 0 -28px;
  }

  .cabinet-section {
    padding: 74px 0;
  }

  .practitioner-section__inner {
    grid-template-areas:
      "identity"
      "content"
      "languages";
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .practitioner-section__identity h2 {
    max-width: 12ch;
  }

  .practitioner-section__portrait {
    width: min(82vw, 320px);
    margin: 22px 0 30px;
  }

  .practitioner-section__content {
    max-width: none;
  }

  .cabinet-tech-row {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: auto;
  }

  .cabinet-tech-row img {
    height: 300px;
  }
}

@media (max-width: 640px) {
  .cabinet-shell {
    width: 100%;
    max-width: 520px;
    padding-inline: 24px;
  }

  .cabinet-hero .cabinet-shell {
    max-width: 520px;
    padding-inline: 24px;
  }

  .cabinet-hero-copy h1 {
    font-size: 42px;
  }

  .cabinet-hero-copy p:not(.eyebrow) {
    font-size: 16px;
  }

  .cabinet-hero-copy .button {
    width: 100%;
  }

  .cabinet-hero-media {
    border-radius: 0;
    margin: 0 -24px;
  }

  .cabinet-hero-media img {
    height: 330px;
  }

  .cabinet-card-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cabinet-card {
    min-height: auto;
    padding: 30px 26px;
  }

  .cabinet-section .section-heading h2,
  .cabinet-quote h2 {
    font-size: 38px;
  }

  .practitioner-section__identity h2 {
    font-size: clamp(32px, 10vw, 48px);
  }

  .practitioner-section__content p,
  .practitioner-section__languages p:last-child {
    font-size: 15px;
  }

  .practitioner-section__content .practitioner-section__lead {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabinet-page .cabinet-hero,
  .cabinet-page .cabinet-section,
  .cabinet-page footer {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

/* Honoraires */
.honoraires-page .site-header {
  background: rgba(247, 243, 234, 0.9);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.05);
  backdrop-filter: blur(18px);
}

.honoraires-page main {
  overflow-x: hidden;
  background: var(--ivory);
}

.honoraires-shell {
  width: min(100% - 128px, 1320px);
  margin-inline: auto;
}

.honoraires-hero {
  position: relative;
  overflow: hidden;
  min-height: 690px;
  padding-top: var(--header-height);
  background: var(--ivory);
}

.honoraires-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 0.88fr) minmax(620px, 1.22fr);
  align-items: center;
  min-height: 584px;
  padding-block: 74px 92px;
}

.honoraires-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 610px;
}

.honoraires-hero h1,
.honoraires-section h2,
.honoraires-card h3,
.honoraires-accordion h3 {
  margin: 0;
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.honoraires-hero h1 {
  margin-top: 18px;
  font-size: clamp(54px, 6vw, 88px);
  max-width: 10ch;
}

.honoraires-hero-copy p:not(.eyebrow) {
  max-width: 590px;
  margin: 30px 0 0;
  color: var(--mineral);
  font-size: 18px;
  line-height: 1.82;
}

.honoraires-hero-media {
  position: absolute;
  inset: var(--header-height) 0 0 auto;
  z-index: 1;
  width: 61vw;
  height: calc(100% - var(--header-height));
  margin: 0;
  overflow: hidden;
}

.honoraires-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ivory) 0%, rgba(247, 243, 234, 0.94) 14%, rgba(247, 243, 234, 0.56) 34%, rgba(247, 243, 234, 0) 58%);
}

.honoraires-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.honoraires-section {
  padding: 104px 0;
  border-top: 1px solid rgba(200, 178, 138, 0.22);
  background: var(--ivory);
}

.honoraires-reassurance {
  padding-block: 72px;
}

.honoraires-reassurance-card,
.honoraires-cta-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 34px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.62);
  padding: clamp(30px, 4vw, 54px);
}

.honoraires-icon,
.honoraires-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(200, 178, 138, 0.44);
  border-radius: 999px;
  color: var(--champagne);
  background: rgba(247, 243, 234, 0.78);
}

.honoraires-icon svg,
.honoraires-card-icon svg,
.honoraires-payment-list svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.honoraires-reassurance h2,
.honoraires-cta-card h2 {
  font-size: clamp(34px, 3.5vw, 54px);
}

.honoraires-reassurance p,
.honoraires-cta-card p,
.honoraires-card p,
.honoraires-card li,
.honoraires-accordion p {
  color: var(--mineral);
  font-size: 16px;
  line-height: 1.78;
}

.honoraires-reassurance p,
.honoraires-cta-card p {
  max-width: 860px;
  margin: 18px 0 0;
}

.honoraires-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 58px;
  align-items: stretch;
}

.honoraires-card {
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.66);
  padding: clamp(30px, 3vw, 42px);
}

.honoraires-card h3 {
  margin-top: 28px;
  font-size: clamp(30px, 2.6vw, 42px);
}

.honoraires-card p {
  margin: 18px 0 0;
}

.honoraires-card ul {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.honoraires-card li {
  position: relative;
  padding-left: 18px;
}

.honoraires-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border: 1px solid var(--champagne);
  transform: rotate(45deg);
}

.honoraires-soft-band {
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.54), var(--ivory));
}

.honoraires-practical-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  gap: 24px;
  align-items: stretch;
}

.honoraires-payment-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.honoraires-payment-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid rgba(200, 178, 138, 0.24);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--graphite);
}

.honoraires-payment-list li::before {
  display: none;
}

.honoraires-payment-list span {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  color: var(--champagne);
}

.honoraires-payment-list svg {
  width: 26px;
  height: 26px;
}

.honoraires-cta-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.honoraires-cta-card .button {
  min-width: 220px;
}

.honoraires-accordion {
  max-width: 980px;
  margin: 54px auto 0;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.62);
  overflow: hidden;
}

.honoraires-accordion-item + .honoraires-accordion-item {
  border-top: 1px solid rgba(200, 178, 138, 0.22);
}

.honoraires-accordion h3 {
  font-family: var(--sans);
}

.honoraires-accordion button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 68px;
  border: 0;
  background: transparent;
  color: var(--graphite);
  padding: 20px 64px 20px 26px;
  font: inherit;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.honoraires-accordion button::after {
  content: "+";
  position: absolute;
  right: 28px;
  top: 50%;
  color: var(--champagne);
  font-size: 28px;
  font-weight: 400;
  transform: translateY(-50%);
}

.honoraires-accordion button[aria-expanded="true"]::after {
  content: "\00d7";
}

.honoraires-accordion [role="region"] {
  padding: 0 26px 24px;
}

.honoraires-accordion p {
  max-width: 820px;
  margin: 0;
}

.honoraires-page .honoraires-hero,
.honoraires-page .honoraires-section,
.honoraires-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}

.honoraires-page .honoraires-hero.is-visible,
.honoraires-page .honoraires-section.is-visible,
.honoraires-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .honoraires-shell {
    width: min(100% - 72px, 1120px);
  }

  .honoraires-hero-grid {
    grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  }

  .honoraires-card-grid,
  .honoraires-practical-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .honoraires-shell {
    width: min(100% - 56px, 760px);
  }

  .honoraires-hero {
    min-height: auto;
  }

  .honoraires-hero-grid {
    display: block;
    min-height: auto;
    padding-block: 56px 0;
  }

  .honoraires-hero h1 {
    font-size: 52px;
    max-width: 11ch;
  }

  .honoraires-hero-media {
    position: relative;
    inset: auto;
    width: calc(100% + 56px);
    height: 380px;
    margin: 38px -28px 0;
  }

  .honoraires-hero-media::before {
    background: linear-gradient(180deg, var(--ivory) 0%, rgba(247, 243, 234, 0.68) 18%, rgba(247, 243, 234, 0) 42%);
  }

  .honoraires-section {
    padding: 78px 0;
  }

  .honoraires-card-grid,
  .honoraires-practical-grid,
  .honoraires-reassurance-card,
  .honoraires-cta-card {
    grid-template-columns: 1fr;
  }

  .honoraires-cta-card .button {
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .honoraires-shell {
    width: min(100% - 40px, 520px);
  }

  .honoraires-hero h1 {
    font-size: 42px;
  }

  .honoraires-hero-copy p:not(.eyebrow),
  .honoraires-reassurance p,
  .honoraires-cta-card p,
  .honoraires-card p,
  .honoraires-card li,
  .honoraires-accordion p {
    font-size: 15px;
  }

  .honoraires-hero-media {
    width: calc(100% + 40px);
    height: 310px;
    margin-inline: -20px;
  }

  .honoraires-reassurance-card,
  .honoraires-cta-card,
  .honoraires-card {
    padding: 28px 24px;
  }

  .honoraires-payment-list {
    grid-template-columns: 1fr;
  }

  .honoraires-cta-card .button {
    width: 100%;
  }

  .honoraires-accordion button {
    padding: 18px 52px 18px 20px;
  }

  .honoraires-accordion button::after {
    right: 20px;
  }

  .honoraires-accordion [role="region"] {
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .honoraires-page .honoraires-hero,
  .honoraires-page .honoraires-section,
  .honoraires-page footer {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* FAQ */
.faq-page .site-header {
  background: rgba(247, 243, 234, 0.88);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.05);
  backdrop-filter: blur(18px);
}

.faq-shell {
  width: min(100% - 128px, 1200px);
  margin-inline: auto;
}

.faq-hero {
  padding-top: var(--header-height);
  background: var(--ivory);
  overflow: hidden;
}

.faq-hero-grid {
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(420px, 42%) 1fr;
  align-items: stretch;
}

.faq-hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 70px 48px 70px 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
  color: rgba(22, 22, 22, 0.48);
  font-size: 12px;
}

.breadcrumb a {
  transition: color 180ms ease-out;
}

.breadcrumb a:hover {
  color: var(--champagne);
}

.faq-hero h1,
.faq-section h2,
.faq-item-heading span,
.faq-panel h3 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
}

.faq-hero h1 {
  margin: 14px 0 24px;
  font-size: clamp(56px, 5.4vw, 88px);
  line-height: 0.94;
}

.faq-hero-copy p:not(.eyebrow) {
  max-width: 610px;
  margin: 0;
  color: var(--mineral);
  font-size: 17px;
  line-height: 1.82;
}

.faq-hero-visual {
  position: relative;
  min-height: 640px;
  margin: 0 calc((100vw - min(100vw - 128px, 1200px)) / -2) 0 0;
  overflow: hidden;
}

.faq-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, #f7f3ea 0%, rgba(247, 243, 234, 0.96) 16%, rgba(247, 243, 234, 0.72) 36%, rgba(247, 243, 234, 0.32) 56%, rgba(247, 243, 234, 0) 78%);
}

.faq-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 640px;
  object-fit: cover;
  object-position: center right;
}

.faq-section {
  padding: 88px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
  background: var(--ivory);
}

.faq-info-card,
.faq-cta-card {
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.72);
  box-shadow: 0 12px 42px rgba(22, 22, 22, 0.035);
}

.faq-info-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding: clamp(34px, 5vw, 56px);
}

.faq-info-icon,
.faq-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne);
}

.faq-info-icon {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(200, 178, 138, 0.5);
  border-radius: 50%;
}

.faq-info-icon svg,
.faq-item-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-info-card h2 {
  margin: 0 0 12px;
  font-size: clamp(34px, 3.5vw, 52px);
}

.faq-info-card p,
.faq-cta-card p,
.faq-panel p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.82;
}

.faq-info-card p,
.faq-cta-card p {
  max-width: 820px;
  margin: 0;
}

.faq-accordion-section .section-heading h2 {
  margin-top: 18px;
  font-size: clamp(42px, 4.8vw, 68px);
}

.faq-accordion {
  display: grid;
  gap: 24px;
  max-width: 1200px;
  margin: 58px auto 0;
}

.faq-accordion details {
  overflow: hidden;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.72);
  box-shadow: 0 12px 42px rgba(22, 22, 22, 0.035);
  transition: border-color 220ms ease-out, box-shadow 220ms ease-out, background 220ms ease-out;
}

.faq-accordion details[open],
.faq-accordion details:hover {
  border-color: rgba(200, 178, 138, 0.56);
  background: rgba(255, 252, 246, 0.94);
  box-shadow: var(--shadow);
}

.faq-accordion summary {
  cursor: pointer;
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 26px 30px;
  list-style: none;
}

.faq-accordion summary::-webkit-details-marker {
  display: none;
}

.faq-item-number {
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 24px;
}

.faq-item-heading {
  display: grid;
  gap: 6px;
}

.faq-item-heading span {
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1;
}

.faq-item-heading small {
  color: var(--mineral);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.faq-chevron {
  width: 28px;
  height: 28px;
  position: relative;
  border: 1px solid rgba(200, 178, 138, 0.4);
  border-radius: 50%;
  transition: transform 220ms ease-out, border-color 220ms ease-out;
}

.faq-chevron::before,
.faq-chevron::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px;
  height: 1px;
  background: var(--champagne);
  transform: translate(-50%, -50%);
}

.faq-chevron::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-accordion details[open] .faq-chevron {
  transform: rotate(45deg);
  border-color: rgba(200, 178, 138, 0.75);
}

.faq-panel {
  display: grid;
  grid-template-rows: 1fr;
  gap: 10px;
  padding: 0 30px 30px 140px;
  animation: faqPanel 300ms ease-out;
}

.faq-panel h3 {
  margin: 16px 0 0;
  font-size: 25px;
  line-height: 1.08;
}

.faq-panel p {
  max-width: 820px;
  margin: 0 0 4px;
}

.faq-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding: clamp(34px, 5vw, 56px);
}

.faq-cta-card h2 {
  margin: 8px 0 14px;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
}

.faq-page .faq-hero,
.faq-page .faq-section,
.faq-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}

.faq-page .faq-hero.is-visible,
.faq-page .faq-section.is-visible,
.faq-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes faqPanel {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .faq-shell {
    width: min(100% - 56px, 760px);
  }

  .faq-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .faq-hero-copy {
    padding: 48px 24px 32px;
  }

  .faq-hero-visual {
    min-height: 360px;
    height: 360px;
    margin: 0 -28px;
  }

  .faq-hero-visual::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0.76) 22%, rgba(247, 243, 234, 0) 55%);
  }

  .faq-hero-visual img {
    min-height: 360px;
  }

  .faq-info-card,
  .faq-cta-card {
    grid-template-columns: 1fr;
  }

  .faq-accordion summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .faq-item-number {
    display: none;
  }

  .faq-panel {
    padding-left: 30px;
  }

  .faq-cta-card .button {
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .faq-shell {
    width: min(100% - 48px, 520px);
  }

  .faq-hero h1 {
    font-size: 44px;
  }

  .faq-hero-copy {
    padding: 44px 0 30px;
  }

  .faq-hero-visual {
    height: 320px;
    min-height: 320px;
    margin: 0 -24px;
  }

  .faq-section {
    padding: 62px 0;
  }

  .faq-info-card,
  .faq-cta-card {
    padding: 30px 24px;
  }

  .faq-accordion {
    gap: 16px;
    margin-top: 42px;
  }

  .faq-accordion summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 92px;
    padding: 22px 18px;
  }

  .faq-item-icon svg {
    width: 24px;
    height: 24px;
  }

  .faq-item-heading span {
    font-size: 26px;
  }

  .faq-panel {
    padding: 0 20px 24px 20px;
  }

  .faq-cta-card .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-page .faq-hero,
  .faq-page .faq-section,
  .faq-page footer {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .faq-panel {
    animation: none;
  }
}

/* Contact */
.contact-page .site-header {
  background: rgba(247, 243, 234, 0.9);
  box-shadow: 0 1px 0 rgba(200, 178, 138, 0.22);
  backdrop-filter: blur(18px);
}

.contact-page main {
  width: 100%;
  overflow-x: hidden;
  background: var(--ivory);
}

.contact-shell {
  width: min(100% - 128px, 1320px);
  margin-inline: auto;
}

.contact-hero {
  padding-top: var(--header-height);
  overflow: hidden;
  background: var(--ivory);
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(420px, 42%) 1fr;
  align-items: stretch;
  min-height: 640px;
}

.contact-hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 72px 48px 72px 0;
}

.contact-hero h1 {
  max-width: 640px;
  margin: 0;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: clamp(58px, 5vw, 86px);
  font-weight: 500;
  line-height: 0.96;
}

.contact-title-line {
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 0 28px;
  background: var(--champagne);
}

.contact-hero-copy p:not(.eyebrow) {
  max-width: 610px;
  margin: 28px 0 30px;
  color: var(--mineral);
  font-size: 17px;
  line-height: 1.82;
}

.contact-hero-visual {
  position: relative;
  min-height: 640px;
  margin: 0 calc((100vw - min(100vw - 76px, 1320px)) / -2) 0 0;
  overflow: hidden;
}

.contact-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.96) 16%,
    rgba(247, 243, 234, 0.72) 36%,
    rgba(247, 243, 234, 0.32) 56%,
    rgba(247, 243, 234, 0) 78%
  );
}

.contact-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 640px;
  object-fit: cover;
  object-position: center right;
}

.contact-section {
  padding: 88px 0;
  background: var(--ivory);
  border-bottom: 1px solid rgba(200, 178, 138, 0.18);
}

.contact-card,
.contact-access-card,
.contact-question-card,
.contact-faq-list {
  border: 1px solid rgba(200, 178, 138, 0.28);
  background: rgba(255, 252, 246, 0.72);
  box-shadow: 0 26px 70px rgba(22, 22, 22, 0.04);
}

.contact-card,
.contact-access-card,
.contact-question-card,
.contact-faq-list {
  border-radius: 10px;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
  gap: 28px;
  margin-top: 56px;
}

.contact-map-preview {
  height: 260px;
  overflow: hidden;
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
  border-radius: 10px 10px 0 0;
}

.contact-map-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.72) contrast(0.96);
}

.contact-detail-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 26px 28px;
  border-top: 1px solid rgba(200, 178, 138, 0.2);
}

.contact-map-preview + .contact-detail-row {
  border-top: 0;
}

.contact-detail-row h3,
.contact-access-card h3 {
  margin: 0 0 8px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.04;
}

.contact-detail-row p,
.contact-access-card p,
.contact-hours-card p,
.contact-faq-list p {
  margin: 0;
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.7;
}

.contact-detail-row a,
.contact-hours-card a {
  color: inherit;
}

.contact-icon,
.contact-access-card > span {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--champagne);
  border: 1px solid rgba(200, 178, 138, 0.35);
  border-radius: 50%;
}

.contact-icon svg,
.contact-access-card svg,
.contact-outline-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-link-button {
  display: inline-flex;
  margin-top: 12px;
  color: var(--champagne);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-hours-card {
  padding: 34px;
}

.contact-hours-card h3 {
  margin: 0 0 22px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: clamp(34px, 3vw, 48px);
  font-weight: 500;
  line-height: 1;
}

.contact-hours-list {
  display: grid;
  margin: 26px 0;
}

.contact-hours-list div {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 14px;
  padding: 16px 0;
  color: var(--mineral);
  border-top: 1px solid rgba(200, 178, 138, 0.24);
}

.contact-hours-list div span:first-child {
  color: var(--graphite);
  font-weight: 600;
}

.contact-note {
  padding-top: 22px;
  border-top: 1px solid rgba(200, 178, 138, 0.24);
}

.contact-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 52px;
}

.contact-access-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 22px;
  min-height: 260px;
  padding: 32px;
  transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out;
}

.contact-access-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.62);
  box-shadow: 0 34px 90px rgba(22, 22, 22, 0.07);
}

.access-intro {
  max-width: 620px;
  margin: 16px auto 0;
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.7;
}

.contact-access-card h3::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-top: 16px;
  background: var(--champagne);
}

.contact-access-card ul {
  display: grid;
  gap: 10px;
  align-self: end;
  margin: 0;
  padding: 0;
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.55;
  list-style: none;
}

.contact-access-card li {
  position: relative;
  padding-left: 18px;
}

.contact-access-card li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 5px;
  height: 5px;
  border: 1px solid var(--champagne);
  transform: rotate(45deg);
}

.access-route-action {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.contact-question-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.55fr);
  align-items: stretch;
  overflow: hidden;
}

.contact-question-card > div {
  position: relative;
  z-index: 2;
  padding: clamp(34px, 5vw, 58px);
}

.contact-question-card h2 {
  margin: 8px 0 16px;
  color: var(--graphite);
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 500;
  line-height: 1;
}

.contact-question-card p {
  max-width: 640px;
  margin: 0 0 28px;
  color: var(--mineral);
  font-size: 16px;
  line-height: 1.75;
}

.contact-question-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
  mask-image: linear-gradient(to left, black 70%, transparent 100%);
}

.contact-outline-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  color: var(--champagne);
  border: 1px solid rgba(200, 178, 138, 0.58);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 200ms ease-out, border-color 200ms ease-out, background 200ms ease-out;
}

.contact-outline-button:hover,
.contact-outline-button:focus-visible {
  color: var(--graphite);
  background: rgba(200, 178, 138, 0.16);
  border-color: rgba(200, 178, 138, 0.84);
}

.contact-faq-list {
  max-width: 980px;
  margin: 50px auto 0;
  overflow: hidden;
}

.contact-faq-list details {
  border-top: 1px solid rgba(200, 178, 138, 0.2);
}

.contact-faq-list details:first-child {
  border-top: 0;
}

.contact-faq-list summary {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 24px;
  color: var(--graphite);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.contact-faq-list summary::-webkit-details-marker {
  display: none;
}

.contact-faq-list summary::after {
  content: "+";
  color: var(--champagne);
  font-size: 24px;
  font-weight: 300;
  transition: transform 200ms ease-out;
}

.contact-faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.contact-faq-list p {
  padding: 0 24px 24px;
}

.contact-page .contact-hero,
.contact-page .contact-section,
.contact-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}

.contact-page .contact-hero.is-visible,
.contact-page .contact-section.is-visible,
.contact-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .contact-shell {
    width: min(100% - 56px, 760px);
  }

  .contact-hero-grid,
  .contact-info-grid,
  .contact-question-card {
    grid-template-columns: 1fr;
  }

  .contact-hero-grid {
    min-height: auto;
  }

  .contact-hero-copy {
    padding: 48px 24px 32px;
  }

  .contact-hero-visual {
    height: 360px;
    min-height: 360px;
    margin: 0 -28px;
  }

  .contact-hero-visual::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0.76) 22%, rgba(247, 243, 234, 0) 55%);
  }

  .contact-hero-visual img {
    min-height: 360px;
  }

  .contact-hours-list div {
    grid-template-columns: 1fr;
  }

  .contact-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-hours-list div {
    gap: 4px;
  }

  .contact-question-card img {
    height: 320px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
  }
}

@media (max-width: 640px) {
  .contact-shell {
    width: min(100% - 48px, 520px);
  }

  .contact-hero h1 {
    font-size: 44px;
  }

  .contact-hero-copy {
    padding: 44px 0 30px;
  }

  .contact-hero-visual {
    height: 320px;
    min-height: 320px;
    margin: 0 -24px;
  }

  .contact-section {
    padding: 62px 0;
  }

  .contact-detail-row {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 24px;
  }

  .contact-hours-card,
  .contact-access-card,
  .contact-question-card > div {
    padding: 28px 24px;
  }

  .contact-access-grid {
    grid-template-columns: 1fr;
  }

  .contact-question-card .contact-outline-button,
  .contact-hero .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page .contact-hero,
  .contact-page .contact-section,
  .contact-page footer {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Premiere consultation */
.consultation-page .site-header {
  background: rgba(247, 243, 234, 0.9);
  box-shadow: 0 1px 0 rgba(200, 178, 138, 0.22);
  backdrop-filter: blur(18px);
}

.consultation-page main {
  width: 100%;
  overflow-x: hidden;
  background: var(--ivory);
}

.consult-shell {
  width: min(100% - 128px, 1320px);
  margin-inline: auto;
}

.consult-hero {
  position: relative;
  padding-top: var(--header-height);
  overflow: hidden;
  background: linear-gradient(180deg, #f7f3ea 0%, #fffaf2 100%);
}

.consult-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 243, 234, 0), #fff 92%);
}

.consult-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(380px, 0.82fr) minmax(560px, 1.18fr);
  align-items: center;
  min-height: 620px;
  gap: clamp(42px, 5vw, 88px);
}

.consult-hero-copy {
  max-width: 540px;
  padding: 72px 0;
}

.consult-hero h1 {
  margin: 0;
  color: var(--night);
  font-family: var(--serif);
  font-size: clamp(64px, 6.2vw, 96px);
  font-weight: 500;
  line-height: 0.9;
}

.consult-title-line,
.consult-small-line {
  display: block;
  width: 58px;
  height: 2px;
  margin: 28px 0;
  background: var(--champagne);
}

.consult-hero p,
.consult-copy p,
.consult-section-intro,
.consult-card p,
.consult-faq-list p {
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.82;
}

.consult-hero p {
  margin: 0 0 32px;
}

.consult-hero-media {
  position: relative;
  align-self: stretch;
  min-height: 620px;
  margin-right: calc((100vw - min(100vw - 128px, 1320px)) / -2);
  overflow: hidden;
}

.consult-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, #f7f3ea 0%, rgba(247, 243, 234, 0.8) 16%, rgba(247, 243, 234, 0.25) 36%, rgba(247, 243, 234, 0) 58%);
}

.consult-hero-media img,
.consult-split-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.consult-section {
  padding: 88px 0;
  background: #fff;
  border-bottom: 1px solid rgba(200, 178, 138, 0.18);
}

.consult-bring,
.consult-after,
.consult-faq-section {
  background: linear-gradient(180deg, #fff 0%, #fbf8f0 100%);
}

.consult-split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}

.consult-copy h2,
.consult-card h3,
.consult-faq-section h2 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 500;
}

.consult-copy h2 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
}

.consult-copy p {
  margin: 0 0 18px;
}

.consult-split-image {
  aspect-ratio: 1.55 / 1;
  border-radius: 2px;
  box-shadow: 0 30px 90px rgba(22, 22, 22, 0.08);
}

.consult-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  margin: 58px 0 0;
  padding: 0;
  list-style: none;
}

.consult-timeline::before {
  content: "";
  position: absolute;
  top: 86px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: rgba(200, 178, 138, 0.62);
}

.consult-timeline li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.consult-step-icon,
.consult-card > span {
  display: inline-grid;
  width: 78px;
  height: 78px;
  place-items: center;
  color: #bd7b2f;
  background: rgba(200, 178, 138, 0.12);
  border: 1px solid rgba(200, 178, 138, 0.32);
  border-radius: 50%;
}

.consult-step-icon svg,
.consult-card svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.consult-step-number {
  position: relative;
  z-index: 2;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  background: #bd7b2f;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.consult-timeline h3 {
  margin: 4px 0 0;
  color: var(--graphite);
  font-size: 15px;
  font-weight: 700;
}

.consult-timeline p {
  max-width: 190px;
  margin: 0;
  color: var(--graphite);
  font-size: 13px;
  line-height: 1.7;
}

.consult-card-grid {
  display: grid;
  gap: 24px;
  margin-top: 54px;
}

.consult-card-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.consult-card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.consult-card {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 230px;
  padding: 34px 28px;
  text-align: center;
  background: rgba(255, 252, 246, 0.86);
  border: 1px solid rgba(200, 178, 138, 0.24);
  border-radius: 10px;
  box-shadow: 0 28px 80px rgba(22, 22, 22, 0.045);
  transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out;
}

.consult-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 178, 138, 0.6);
  box-shadow: 0 34px 90px rgba(22, 22, 22, 0.07);
}

.consult-card h3 {
  margin: 24px 0 10px;
  font-size: 20px;
  line-height: 1.12;
}

.consult-card p,
.consult-section-intro {
  margin: 0;
  color: var(--graphite);
  font-size: 14px;
  line-height: 1.65;
}

.consult-section-intro {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--mineral);
}

.consult-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 48px;
}

.consult-horizontal-card {
  grid-template-columns: 84px minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  min-height: 140px;
  text-align: left;
}

.consult-horizontal-card h3 {
  margin-top: 0;
}

.consult-faq-list {
  max-width: 1060px;
  margin: 52px auto 0;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 10px;
  background: rgba(255, 252, 246, 0.76);
  overflow: hidden;
}

.consult-faq-list details {
  border-top: 1px solid rgba(200, 178, 138, 0.22);
}

.consult-faq-list details:first-child {
  border-top: 0;
}

.consult-faq-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  padding: 0 24px;
  color: var(--graphite);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}

.consult-faq-list summary::-webkit-details-marker {
  display: none;
}

.consult-faq-list summary span[aria-hidden] {
  position: relative;
  width: 22px;
  height: 22px;
}

.consult-faq-list summary span[aria-hidden]::before,
.consult-faq-list summary span[aria-hidden]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: var(--champagne);
  transform: translate(-50%, -50%);
}

.consult-faq-list summary span[aria-hidden]::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.consult-faq-list details[open] summary span[aria-hidden]::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.consult-faq-list p {
  margin: 0;
  padding: 0 24px 24px;
  color: var(--mineral);
}

.consultation-page .consult-hero,
.consultation-page .consult-section,
.consultation-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}

.consultation-page .consult-hero.is-visible,
.consultation-page .consult-section.is-visible,
.consultation-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .consult-shell {
    width: min(100% - 72px, 980px);
  }

  .consult-hero-grid,
  .consult-split {
    grid-template-columns: 1fr;
  }

  .consult-hero-media {
    min-height: 420px;
    margin: 0 -36px;
  }

  .consult-hero-media::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0) 38%);
  }

  .consult-card-grid-4,
  .consult-card-grid-3,
  .consult-after-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consult-timeline {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .consult-timeline::before {
    top: 0;
    bottom: 0;
    left: 38px;
    width: 1px;
    height: auto;
  }

  .consult-timeline li {
    grid-template-columns: 78px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .consult-step-number {
    position: absolute;
    top: 58px;
    left: 50px;
  }

  .consult-timeline h3,
  .consult-timeline p {
    grid-column: 2;
  }

  .consult-timeline p {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .consult-shell {
    width: min(100% - 48px, 520px);
  }

  .consult-hero-copy {
    padding: 50px 0 34px;
  }

  .consult-hero h1 {
    font-size: 56px;
  }

  .consult-hero-media {
    min-height: 330px;
    margin: 0 -24px;
  }

  .consult-section {
    padding: 64px 0;
  }

  .consult-card-grid-4,
  .consult-card-grid-3,
  .consult-after-grid {
    grid-template-columns: 1fr;
  }

  .consult-card {
    min-height: auto;
    padding: 30px 24px;
  }

  .consult-horizontal-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .consult-faq-list summary {
    min-height: 76px;
    padding: 0 18px;
  }

  .consult-faq-list p {
    padding: 0 18px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consultation-page .consult-hero,
  .consultation-page .consult-section,
  .consultation-page footer {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mentions legales */
.legal-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
  box-shadow: 0 18px 55px rgba(16, 26, 44, 0.04);
}

.legal-page main {
  width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 24%, rgba(200, 178, 138, 0.08), transparent 34%),
    linear-gradient(180deg, #f7f3ea 0%, #fffdf8 22%, #fffdf8 100%);
}

.legal-hero {
  position: relative;
  overflow: hidden;
  background: #f7f3ea;
  border-bottom: 1px solid rgba(200, 178, 138, 0.18);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.legal-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 120px;
  background: linear-gradient(180deg, rgba(247, 243, 234, 0), #fffdf8 88%);
  pointer-events: none;
}

.legal-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1680px;
  min-height: 520px;
  margin-inline: auto;
  padding: 118px clamp(24px, 5vw, 96px) 74px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr);
  align-items: center;
  gap: clamp(44px, 6vw, 112px);
}

.legal-hero__content {
  max-width: 650px;
}

.legal-hero h1 {
  margin: 0;
  color: #101a2c;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: clamp(64px, 7vw, 112px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
}

.legal-title-line {
  display: block;
  width: 74px;
  height: 1px;
  margin: 30px 0 30px;
  background: #c8b28a;
}

.legal-hero p {
  max-width: 520px;
  margin: 0;
  color: #161616;
  font-size: 16px;
  line-height: 1.9;
}

.legal-hero strong {
  color: #101a2c;
  font-weight: 700;
}

.legal-hero__media {
  position: relative;
  min-height: 430px;
  align-self: stretch;
  margin-right: calc(clamp(24px, 5vw, 96px) * -1);
  overflow: hidden;
}

.legal-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.88) 16%,
    rgba(247, 243, 234, 0.44) 38%,
    rgba(247, 243, 234, 0) 66%
  );
}

.legal-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: block;
  object-fit: cover;
  object-position: center right;
}

.legal-content {
  width: min(100% - 48px, 1320px);
  margin: 0 auto;
  padding: 34px 0 70px;
}

.legal-updated {
  margin: 0 0 28px;
  color: #8c8a84;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-section {
  padding: 28px 0;
  border-top: 1px solid rgba(16, 26, 44, 0.18);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.legal-section:first-of-type {
  border-top: 0;
}

.legal-section__title {
  margin: 0 0 16px;
  color: #101a2c;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
  line-height: 1;
}

.legal-section p {
  max-width: 980px;
  margin: 0 0 12px;
  color: #161616;
  font-size: 15px;
  line-height: 1.75;
}

.legal-section a {
  color: #b27a35;
  text-decoration: none;
}

.legal-section a:hover,
.legal-section a:focus-visible {
  text-decoration: underline;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid rgba(200, 178, 138, 0.32);
  background: rgba(255, 253, 248, 0.82);
}

.legal-table th,
.legal-table td {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
  color: #161616;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  width: 30%;
  color: #101a2c;
  font-weight: 700;
  background: rgba(247, 243, 234, 0.78);
}

.legal-data-list {
  display: grid;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid rgba(200, 178, 138, 0.24);
}

.legal-data-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
}

.legal-data-icon,
.legal-contact-icon {
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(200, 178, 138, 0.55);
  border-radius: 50%;
  color: #c08a47;
  background: rgba(247, 243, 234, 0.64);
}

.legal-data-icon svg,
.legal-contact-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-data-item h3 {
  margin: 0 0 6px;
  color: #101a2c;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.05;
}

.legal-data-item p {
  margin-bottom: 0;
}

.legal-section ul {
  margin: 8px 0 0 20px;
  padding: 0;
  color: #161616;
  line-height: 1.75;
}

.legal-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.legal-contact-card {
  min-height: 100px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(200, 178, 138, 0.26);
  background: rgba(255, 253, 248, 0.82);
  color: #161616;
  text-decoration: none;
}

.legal-contact-card strong,
.legal-contact-card span span {
  display: block;
}

.legal-contact-card strong {
  margin-bottom: 3px;
  color: #101a2c;
}

.legal-contact-card .legal-contact-value {
  display: inline;
}

.legal-contact-card:hover,
.legal-contact-card:focus-visible {
  border-color: rgba(200, 178, 138, 0.72);
  transform: translateY(-2px);
  transition: transform 200ms ease-out, border-color 200ms ease-out;
}

.legal-page .legal-hero.is-visible,
.legal-page .legal-section.is-visible,
.legal-page footer.is-visible {
  opacity: 1;
  transform: none;
}

.site-footer__legal {
  padding: 18px clamp(24px, 5vw, 96px) calc(18px + env(safe-area-inset-bottom));
  background: #101a2c;
  color: rgba(247, 243, 234, 0.72);
  border-top: 1px solid rgba(247, 243, 234, 0.12);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.site-footer__legal a {
  color: #f7f3ea;
  text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible,
.site-footer__legal a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 980px) {
  .legal-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 104px 24px 0;
    gap: 34px;
  }

  .legal-hero__content {
    max-width: none;
  }

  .legal-hero__media {
    min-height: 340px;
    margin: 0 -24px;
  }

  .legal-hero__media::before {
    background: linear-gradient(
      180deg,
      #f7f3ea 0%,
      rgba(247, 243, 234, 0.68) 22%,
      rgba(247, 243, 234, 0) 55%
    );
  }

  .legal-contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .legal-content {
    width: min(100% - 40px, 620px);
    padding-bottom: 54px;
  }

  .legal-hero h1 {
    font-size: 58px;
  }

  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
    width: 100%;
  }

  .legal-table tr {
    border-bottom: 1px solid rgba(200, 178, 138, 0.22);
  }

  .legal-table th,
  .legal-table td {
    border-bottom: 0;
  }

  .legal-table td {
    padding-top: 0;
  }

  .legal-data-item {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-page .legal-hero,
  .legal-page .legal-section,
  .legal-page footer {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* ---------------------------------------------------------------
 * Bloc consolidé depuis cabinet-practitioner-fix.css (anomalie A-11).
 * Ancien correctif isolé chargé uniquement sur le-cabinet.html ;
 * intégré ici pour éviter une feuille de style séparée.
 * ------------------------------------------------------------- */
@media (min-width: 901px) {
  .practitioner-section__inner > .practitioner-section__content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------
 * Page « Détartrage et prévention » (ajout du 01/10/2026, suite 24).
 * Gabarit : single-traitement-detartrage.php. Toutes les règles sont
 * préfixées .detartrage-* (ou portées par la classe de corps
 * .detartrage-page) : aucun composant existant n'est modifié. Mêmes
 * conventions que les pages de soins voisines (.conservative-*,
 * .perio-*) : largeur de conteneur, palette, typographie, cartes
 * arrondies, apparition au défilement.
 * ------------------------------------------------------------- */
.detartrage-page {
  background: var(--ivory);
  color: var(--graphite);
}

.detartrage-page .site-header {
  background: rgba(247, 243, 234, 0.94);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.07);
  backdrop-filter: blur(18px);
}

.detartrage-page .brand,
.detartrage-page .brand-mark {
  width: 168px;
  height: 88px;
}

.detartrage-page .button-primary {
  color: var(--ivory);
}

.detartrage-shell {
  width: min(100% - 76px, 1240px);
  margin-inline: auto;
}

.detartrage-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 16px;
}

.detartrage-eyebrow::before {
  content: "";
  flex: 0 0 56px;
  height: 1px;
  background: rgba(200, 178, 138, 0.72);
}

.detartrage-hero h1,
.detartrage-section h2,
.detartrage-section h3 {
  color: var(--graphite);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
}

/* Hero */
.detartrage-hero {
  position: relative;
  min-height: 640px;
  padding-top: var(--header-height);
  overflow: hidden;
  background: var(--ivory);
  border-bottom: 1px solid rgba(200, 178, 138, 0.24);
}

.detartrage-hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: 640px;
  padding: 64px 0;
}

.detartrage-hero-content {
  max-width: 560px;
}

.detartrage-hero h1 {
  max-width: 560px;
  margin: 0 0 18px;
  font-size: clamp(52px, 5vw, 80px);
  line-height: 0.98;
}

.detartrage-hero-subtitle {
  max-width: 540px;
  margin: 0 0 18px;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: clamp(24px, 2.3vw, 34px);
  font-style: italic;
  line-height: 1.12;
}

.detartrage-hero-text {
  max-width: 520px;
  margin: 0;
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.85;
}

.detartrage-hero-media {
  position: absolute;
  inset: var(--header-height) 0 0 auto;
  z-index: 1;
  width: 62%;
  overflow: hidden;
}

.detartrage-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f7f3ea 0%,
    rgba(247, 243, 234, 0.92) 12%,
    rgba(247, 243, 234, 0.6) 28%,
    rgba(247, 243, 234, 0.18) 48%,
    rgba(247, 243, 234, 0) 70%
  );
}

.detartrage-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

/* Sections communes */
.detartrage-section {
  padding: 88px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.22);
}

.detartrage-why,
.detartrage-prevention,
.detartrage-more {
  background: rgba(255, 252, 246, 0.48);
}

.detartrage-section h2 {
  max-width: 980px;
  margin: 0 0 24px;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.04;
}

.detartrage-section p {
  color: var(--mineral);
  font-size: 15px;
  line-height: 1.85;
}

.detartrage-intro {
  max-width: 980px;
}

.detartrage-intro p,
.detartrage-section-lead {
  max-width: 980px;
  margin: 0 0 12px;
}

/* « Le détartrage » : 3 objectifs */
.detartrage-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.detartrage-goal-card,
.detartrage-prevention-card {
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 24px;
  background: rgba(255, 252, 246, 0.72);
  box-shadow: 0 18px 44px rgba(22, 22, 22, 0.035);
}

.detartrage-goal-card {
  padding: 30px 28px;
}

.detartrage-goal-icon,
.detartrage-note-icon,
.detartrage-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
}

.detartrage-goal-icon {
  width: 54px;
  height: 54px;
  color: var(--ivory);
  background: var(--champagne);
}

.detartrage-goal-icon svg,
.detartrage-note-icon svg,
.detartrage-more-icon svg,
.detartrage-sign-icon svg,
.detartrage-notice-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detartrage-goal-card h3 {
  margin: 22px 0 10px;
  font-size: 26px;
  line-height: 1.05;
}

.detartrage-goal-card p {
  margin: 0;
}

/* « Le déroulement » : frise en 4 étapes */
.detartrage-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.detartrage-step {
  position: relative;
  display: flex;
  flex-direction: column;
}

.detartrage-step::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 64px;
  right: -14px;
  height: 1px;
  background: rgba(200, 178, 138, 0.42);
}

.detartrage-step:last-child::before {
  right: 0;
}

.detartrage-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.detartrage-step h3 {
  margin: 20px 0 10px;
  font-size: 25px;
  line-height: 1.05;
}

.detartrage-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
}

.detartrage-step-image {
  margin: auto 0 0;
  padding-top: 22px;
}

.detartrage-step-image img,
.detartrage-prevention-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detartrage-step-image img {
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 18px;
}

/* « Prévention personnalisée » : 3 cartes illustrées */
.detartrage-prevention-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.detartrage-prevention-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detartrage-prevention-image {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fbf8f1;
}

.detartrage-prevention-body {
  padding: 26px 28px 30px;
}

.detartrage-prevention-body h3 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.05;
}

.detartrage-prevention-body p {
  margin: 0 0 12px;
}

.detartrage-prevention-body p:last-child {
  margin-bottom: 0;
}

.detartrage-section .detartrage-callout {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 2px solid var(--champagne);
  border-radius: 12px;
  background: rgba(200, 178, 138, 0.14);
  color: rgba(22, 22, 22, 0.76);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.4;
}

/* « Santé des gencives » : texte + illustration */
.detartrage-gums {
  background: #efe8dc;
}

.detartrage-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 64px;
  align-items: center;
}

.detartrage-split-copy p {
  max-width: 640px;
  margin: 0 0 12px;
}

.detartrage-note {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 640px;
  margin: 26px 0 22px;
  padding: 22px 24px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.82);
}

.detartrage-note-icon {
  width: 52px;
  height: 52px;
  border: 1px solid var(--champagne);
  color: var(--champagne);
}

.detartrage-note h3 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.15;
}

.detartrage-split-copy .detartrage-note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
}

.detartrage-text-link {
  display: inline-flex;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--champagne);
  color: var(--graphite);
  font-size: 14px;
  font-weight: 600;
  transition: color 180ms ease-out;
}

.detartrage-text-link:hover,
.detartrage-text-link:focus-visible {
  color: var(--champagne);
}

.detartrage-gums-figure {
  margin: 0;
}

.detartrage-gums-figure img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.detartrage-gums-figure figcaption {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
  color: rgba(22, 22, 22, 0.72);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

/* « Signes à ne pas négliger » */
.detartrage-signs-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}

.detartrage-signs-copy h2 {
  font-size: clamp(34px, 3.4vw, 48px);
}

.detartrage-signs-copy p {
  max-width: 520px;
  margin: 0;
}

.detartrage-signs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.detartrage-signs li {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(200, 178, 138, 0.3);
  color: var(--mineral);
  font-size: 14.5px;
  line-height: 1.5;
}

.detartrage-signs li:first-child {
  border-top: 1px solid rgba(200, 178, 138, 0.3);
}

.detartrage-signs strong {
  color: var(--graphite);
  font-weight: 600;
}

.detartrage-sign-icon,
.detartrage-notice-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--champagne);
}

.detartrage-section .detartrage-notice {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 36px 0 0;
  padding: 16px 22px;
  border-radius: 14px;
  background: rgba(200, 178, 138, 0.14);
  color: rgba(22, 22, 22, 0.72);
  font-size: 13.5px;
  line-height: 1.6;
}

/* FAQ : composant partagé .implant-faq, simplement mis à la largeur de la page */
.detartrage-faq {
  margin-top: 34px;
}

.detartrage-faq details[open] summary::after {
  content: "-";
}

/* « Pour aller plus loin » */
/* Le sur-titre garde le style .eyebrow du site malgré la règle générique
   ".detartrage-section p" (plus spécifique) et, pour « Pour aller plus
   loin », malgré la règle des titres h2 (ce sur-titre y est un h2 pour
   donner un intitulé accessible à la liste de liens). */
.detartrage-section .detartrage-eyebrow {
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.65;
  text-transform: uppercase;
}

.detartrage-more .detartrage-eyebrow {
  max-width: none;
  margin-bottom: 22px;
}

.detartrage-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detartrage-more-card {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: center;
  height: 100%;
  padding: 16px 52px 16px 16px;
  border: 1px solid rgba(200, 178, 138, 0.28);
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.72);
  color: var(--mineral);
  font-size: 14.5px;
  line-height: 1.5;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.detartrage-more-card::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 22px;
  color: var(--champagne);
  font-size: 22px;
  line-height: 1;
  transform: translateY(-50%);
}

.detartrage-more-card:hover,
.detartrage-more-card:focus-visible {
  border-color: rgba(200, 178, 138, 0.62);
  box-shadow: 0 18px 40px rgba(22, 22, 22, 0.05);
  transform: translateY(-2px);
}

.detartrage-more-card:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

.detartrage-more-icon {
  width: 58px;
  height: 58px;
  background: #fff;
  color: var(--champagne);
}

.detartrage-more-card strong {
  color: var(--graphite);
  font-weight: 600;
}

/* Apparition au défilement (cf. assets/js/theme.js) */
.detartrage-page .detartrage-hero,
.detartrage-page .detartrage-section,
.detartrage-page footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.detartrage-page .detartrage-hero.is-visible,
.detartrage-page .detartrage-section.is-visible,
.detartrage-page footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .detartrage-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 44px;
  }

  .detartrage-step::before {
    display: none;
  }

  .detartrage-hero-media {
    width: 58%;
  }
}

@media (max-width: 1024px) {
  .detartrage-shell {
    width: min(100% - 56px, 1240px);
  }

  /* Sur tablette et mobile, le texte (et donc le H1) passe avant la photo. */
  .detartrage-hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .detartrage-hero-media {
    order: 2;
  }

  .detartrage-hero-inner {
    display: block;
    min-height: auto;
    padding: 48px 0 0;
  }

  .detartrage-hero-content,
  .detartrage-hero h1 {
    max-width: 680px;
  }

  .detartrage-hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 400px;
    margin-top: 36px;
  }

  .detartrage-hero-media::before {
    background: linear-gradient(180deg, #f7f3ea 0%, rgba(247, 243, 234, 0.6) 18%, rgba(247, 243, 234, 0) 45%);
  }

  .detartrage-split,
  .detartrage-signs-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .detartrage-gums-figure {
    max-width: 620px;
  }

  .detartrage-prevention-grid,
  .detartrage-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .detartrage-section {
    padding: 64px 0;
  }

  .detartrage-goal-grid,
  .detartrage-prevention-grid,
  .detartrage-more-grid {
    grid-template-columns: 1fr;
  }

  .detartrage-prevention-image {
    aspect-ratio: 16 / 8;
  }
}

@media (max-width: 640px) {
  .detartrage-shell {
    width: min(100% - 36px, 1240px);
  }

  .detartrage-hero-inner {
    padding-top: 40px;
  }

  .detartrage-hero h1 {
    font-size: 42px;
  }

  .detartrage-hero-media {
    height: 320px;
  }

  .detartrage-section h2 {
    font-size: 34px;
  }

  .detartrage-goal-card,
  .detartrage-prevention-body {
    padding: 24px 22px;
  }

  .detartrage-note {
    flex-direction: column;
    gap: 14px;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .detartrage-timeline {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .detartrage-eyebrow::before {
    flex-basis: 32px;
  }

  .detartrage-signs li {
    align-items: flex-start;
  }

  .detartrage-section .detartrage-notice {
    align-items: flex-start;
    padding: 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detartrage-page .detartrage-hero,
  .detartrage-page .detartrage-section,
  .detartrage-page footer {
    transition: none;
  }

  .detartrage-more-card {
    transition: none;
  }
}

@media (scripting: none) {
  .detartrage-page .detartrage-hero,
  .detartrage-page .detartrage-section,
  .detartrage-page footer {
    opacity: 1;
    transform: none;
  }
}

/* Liens croisés ajoutés vers la page « Détartrage et prévention » depuis
   les pages Soins conservateurs et Parodontologie (suite 24). */
.treatment-crosslink {
  margin: 34px 0 0;
  text-align: center;
}

.treatment-crosslink a,
.treatment-inline-link {
  border-bottom: 1px solid var(--champagne);
  color: var(--graphite);
  transition: color 180ms ease-out;
}

.treatment-crosslink a {
  display: inline-flex;
  gap: 8px;
  padding-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.treatment-crosslink a:hover,
.treatment-crosslink a:focus-visible,
.treatment-inline-link:hover,
.treatment-inline-link:focus-visible {
  color: var(--champagne);
}

/* ---------------------------------------------------------------
 * Cartes Google Maps chargées à la demande (suite 28, RGPD).
 * Encart affiché à la place de l'iframe tant que le visiteur n'a pas
 * cliqué sur « Afficher la carte » (template-parts/map-consent.php,
 * assets/js/theme.js). Mêmes dimensions que la carte qu'il remplace :
 * pied de page (82 px, 220 px sous 1024 px, 260 px sous 640 px) et fiche
 * Adresse de la page Contact (260 px).
 * ------------------------------------------------------------- */
.map-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 6px;
  text-align: center;
}

.map-consent__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}

.map-consent__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--champagne);
}

.map-consent__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-consent__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Sans JavaScript, le bouton ne servirait à rien : seul le lien
   « Ouvrir dans Google Maps » / « Voir l'itinéraire » reste proposé. */
.map-consent__button {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 9px 16px;
  border: 1px solid var(--champagne);
  border-radius: 6px;
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.map-consent-ready .map-consent__button {
  display: inline-flex;
}

.map-consent__button:hover,
.map-consent__button:focus-visible {
  background: var(--champagne);
  color: var(--graphite);
}

.map-consent__button:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

/* Pied de page (bandeau sombre) */
.map-consent--footer {
  min-height: 82px;
  padding: 8px 10px;
  border: 1px solid rgba(247, 243, 234, 0.18);
  background: rgba(247, 243, 234, 0.05);
  color: rgba(247, 243, 234, 0.82);
}

.map-consent--footer .map-consent__inner {
  gap: 6px;
}

.map-consent--footer .map-consent__icon {
  display: none;
}

.map-consent--footer .map-consent__text {
  font-size: 10.5px;
  line-height: 1.35;
}

.map-consent--footer .map-consent__button {
  min-height: 30px;
  padding: 7px 12px;
  color: var(--ivory);
  font-size: 10px;
}

/* Page Contact (fiche Adresse, fond clair) */
.map-consent--contact {
  height: 100%;
  padding: 24px;
  border-radius: 10px 10px 0 0;
  background: rgba(200, 178, 138, 0.12);
  color: rgba(22, 22, 22, 0.7);
}

.map-consent--contact .map-consent__button {
  color: var(--graphite);
}

@media (max-width: 1024px) {
  .map-consent--footer {
    min-height: 220px;
  }

  .map-consent--footer .map-consent__icon {
    display: inline-flex;
  }

  .map-consent--footer .map-consent__text {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .map-consent--footer {
    min-height: 260px;
  }
}