/* tokens.css */
/* ==========================================================================
   Geneva Dental Clinic — jetons de design
   Source : maquette XD du 29/07/2026, artboard 1920 px, grille 12 colonnes,
   marges latérales 140 px, gouttière 16 px.
   Les tailles fluides sont calées pour retomber exactement sur les valeurs
   du XD à 1920 px de large, et se compresser proprement en dessous.
   ========================================================================== */

/* --- Polices, servies en local --- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Couleurs (relevées au pixel dans le XD) --- */
  --gdc-noir:   #14120E;
  --gdc-or:     #A07236;
  /* Aplat or portant du texte blanc. Le #A07236 du XD ne donne que 4,24:1
     contre le blanc, sous le seuil AA de 4,5:1 : ce ton, plus sombre de neuf
     unités, monte à 4,82:1 et reste indiscernable du doré de la marque.
     L'or du XD demeure la couleur des titres et des filets. */
  --gdc-or-fond: #96692F;
  --gdc-creme:  #EBE3D6;
  --gdc-blanc:  #FFFFFF;

  /* Dérivées, pour les états et les fonds */
  --gdc-or-clair:   #B98C52;
  --gdc-or-sombre:  #855C28;
  --gdc-noir-80:    rgba(20, 18, 14, .80);
  --gdc-noir-45:    rgba(20, 18, 14, .45);
  --gdc-texte:      var(--gdc-noir);
  --gdc-texte-inv:  var(--gdc-blanc);

  /* --- Typographie --- */
  --gdc-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Échelle fluide : la borne haute = valeur exacte du XD à 1920 px */
  --fs-hero:  clamp(2.25rem,  4.1667vw, 5rem);      /*  36 →  80 */
  --fs-h1:    clamp(2rem,     3.1250vw, 3.75rem);   /*  32 →  60 */
  --fs-h2:    clamp(1.75rem,  2.6042vw, 3.125rem);  /*  28 →  50 */
  --fs-h3:    clamp(1.375rem, 2.0833vw, 2.5rem);    /*  22 →  40 */
  --fs-body:  clamp(1.0625rem,1.5625vw, 1.875rem);  /*  17 →  30 */
  --fs-small: clamp(0.9375rem,1.3021vw, 1.5625rem); /*  15 →  25 */

  /* Interlignes relevés dans le XD : titres ~1.22, corps 1.23 à 1.67 */
  --lh-titre: 1.22;
  --lh-corps: 1.55;
  --lh-serre: 1.25;

  /* --- Rythme et gabarit --- */
  --gdc-max:      1920px;
  --gdc-marge:    clamp(1.25rem, 7.2917vw, 8.75rem); /* 20 → 140 */
  --gdc-gouttiere: clamp(1rem, 0.8333vw, 1rem);

  --esp-xs: clamp(0.5rem,  0.52vw, 0.625rem);
  --esp-s:  clamp(1rem,    1.04vw, 1.25rem);
  --esp-m:  clamp(1.5rem,  2.08vw, 2.5rem);
  --esp-l:  clamp(2.5rem,  4.17vw, 5rem);
  --esp-xl: clamp(4rem,    7.29vw, 8.75rem);

  /* --- Composants --- */
  --btn-h:      clamp(3.25rem, 6.30vw, 7.5625rem);   /* 52 → 121 (XD) */
  --btn-radius: 999px;
  --btn-px:     clamp(1.5rem, 2.6vw, 3.125rem);

  /* --- Mouvement : 0,3 s ease-out, valeur exacte du prototype XD --- */
  --gdc-transition: .3s ease-out;
}

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

body {
  font-family: var(--gdc-font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-corps);
  color: var(--gdc-texte);
  background: var(--gdc-blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-titre);
  margin: 0 0 var(--esp-m);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); color: var(--gdc-or); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--esp-s); }

a { color: inherit; transition: color var(--gdc-transition); }

strong, b { font-weight: 700; color: var(--gdc-or); }

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

/* --- Conteneur calé sur la grille du XD --- */
.gdc-conteneur {
  width: 100%;
  max-width: var(--gdc-max);
  margin-inline: auto;
  padding-inline: var(--gdc-marge);
}

/* --- Bouton : rectangle arrondi bordé blanc, inversion au survol --- */
.gdc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-s);
  min-height: var(--btn-h);
  padding-inline: var(--btn-px);
  border: 2px solid currentColor;
  border-radius: var(--btn-radius);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: background-color var(--gdc-transition),
              color var(--gdc-transition),
              border-color var(--gdc-transition);
}
.gdc-btn--clair { color: var(--gdc-blanc); }
.gdc-btn--clair:hover,
.gdc-btn--clair:focus-visible { background: var(--gdc-blanc); color: var(--gdc-noir); }

.gdc-btn--sombre { color: var(--gdc-noir); }
.gdc-btn--sombre:hover,
.gdc-btn--sombre:focus-visible { background: var(--gdc-noir); color: var(--gdc-blanc); }

.gdc-btn--or { color: var(--gdc-blanc); background: var(--gdc-or-fond); border-color: var(--gdc-or-fond); }
.gdc-btn--or:hover,
.gdc-btn--or:focus-visible { background: var(--gdc-or-sombre); border-color: var(--gdc-or-sombre); }

/* --- Hello Elementor peint tout button:hover/:focus en #c36 (magenta).
       Sa spécificité bat nos classes : on neutralise sur nos composants. --- */
.gdc-burger,
.gdc-burger:hover,
.gdc-burger:focus,
.gdc-burger:focus-visible,
.gdc-burger:active { background: transparent; }

.gdc-temoignage__puce:hover,
.gdc-temoignage__puce:focus,
.gdc-temoignage__puce:focus-visible { background: var(--gdc-or-clair); }
.gdc-temoignage__puce[aria-current="true"]:hover,
.gdc-temoignage__puce[aria-current="true"]:focus { background: var(--gdc-or); }

button.gdc-btn:hover,
button.gdc-btn:focus { background-color: inherit; }

/* --- Accessibilité : focus toujours visible --- */
:focus-visible {
  outline: 3px solid var(--gdc-or);
  outline-offset: 3px;
}

/* --- Respect des préférences de mouvement --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* layout.css */
/* ==========================================================================
   Geneva Dental Clinic — en-tête, pied de page, navigation.
   Toutes les valeurs sont dérivées du XD 1920 et exprimées en fluide.
   ========================================================================== */

/* --- Lien d'évitement --- */
.gdc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--esp-s) var(--esp-m);
  background: var(--gdc-or-fond);
  color: var(--gdc-blanc);
  font-weight: 700;
}
.gdc-skip:focus { left: 0; }

/* ==========================================================================
   EN-TÊTE
   XD : barre pleine #14120E, hauteur 150, logo 320×80 à x=100
   ========================================================================== */
.gdc-entete {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--gdc-noir);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.gdc-entete__inner {
  display: flex;
  align-items: center;
  gap: var(--esp-m);
  width: 100%;
  max-width: var(--gdc-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5.2083vw, 6.25rem); /* 20 → 100 (x du logo) */
  min-height: clamp(4.375rem, 7.8125vw, 9.375rem);   /* 70 → 150 */
}

.gdc-entete__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.gdc-entete__logo img {
  width: clamp(9.375rem, 16.6667vw, 20rem); /* 150 → 320 */
  height: auto;
}

/* --- Navigation --- */
.gdc-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2.6vw, 3.125rem);
}

.gdc-menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 3.125rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gdc-menu li { position: relative; }

.gdc-menu a {
  display: block;
  padding-block: var(--esp-xs);
  color: var(--gdc-blanc);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--gdc-transition);
}
/* L'or du XD ne donne que 4,41:1 sur le noir de l'en-tête. Entre 1100 et
   1536 px la police du menu tombe sous 24 px sans être grasse : le seuil est
   alors 4,5 et il n'est pas atteint. L'or clair du jeu de jetons monte à
   6,18:1 et reste le même doré à l'œil. */
.gdc-menu a:hover,
.gdc-menu a:focus-visible,
.gdc-menu .current-menu-item > a,
.gdc-menu .current-menu-ancestor > a { color: var(--gdc-or-clair); }

/* Sous-menus : ouverture au survol, 0,3 s ease-out comme le prototype */
.gdc-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: max(16rem, 100%);
  margin: 0;
  padding: var(--esp-s) 0;
  list-style: none;
  background: var(--gdc-noir);
  border: 1px solid rgba(255, 255, 255, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity var(--gdc-transition),
              transform var(--gdc-transition),
              visibility var(--gdc-transition);
}
.gdc-menu li:hover > .sub-menu,
.gdc-menu li.sous-menu-ouvert > .sub-menu,
.gdc-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.gdc-menu .sub-menu a {
  padding: var(--esp-xs) var(--esp-m);
  font-size: var(--fs-small);
  white-space: normal;
}

/* --- Bouton d'en-tête : XD 304×80, bordé blanc --- */
.gdc-entete__cta {
  flex: 0 0 auto;
  min-height: clamp(2.75rem, 4.1667vw, 5rem);   /* 44 → 80 */
  padding-inline: clamp(1rem, 2.0833vw, 2.5rem);
  font-size: var(--fs-body);
  font-weight: 500;
}

/* --- Bouton hamburger, mobile seulement --- */
.gdc-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.gdc-burger__trait {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--gdc-blanc);
  transition: transform var(--gdc-transition), opacity var(--gdc-transition);
}
.gdc-burger[aria-expanded="true"] .gdc-burger__trait:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gdc-burger[aria-expanded="true"] .gdc-burger__trait:nth-child(2) { opacity: 0; }
.gdc-burger[aria-expanded="true"] .gdc-burger__trait:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   PIED DE PAGE
   XD : bloc #14120E, logo centré 600×133, accroche centrée, 2 colonnes
   ========================================================================== */
.gdc-pied {
  background: var(--gdc-noir);
  color: var(--gdc-blanc);
  padding-block: var(--esp-xl);
}

.gdc-pied__inner {
  width: 100%;
  max-width: var(--gdc-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 10.4167vw, 12.5rem); /* 20 → 200 (x du XD) */
}

.gdc-pied a {
  color: var(--gdc-blanc);
  text-decoration: none;
}
.gdc-pied a:hover,
.gdc-pied a:focus-visible { color: var(--gdc-or); }

.gdc-pied__marque { text-align: center; }

.gdc-pied__logo {
  width: clamp(13.75rem, 31.25vw, 37.5rem); /* 220 → 600 */
  height: auto;
  margin-inline: auto;
}

.gdc-pied__titre {
  margin-top: var(--esp-l);
  font-weight: 700;
  font-size: var(--fs-body);
}

.gdc-pied__accroche {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--fs-body);
}

.gdc-pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--esp-l);
  margin-top: var(--esp-xl);
}

.gdc-pied__soustitre {
  margin: 0 0 var(--esp-m);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--gdc-blanc);
}

.gdc-pied__col p,
.gdc-pied__adresses,
.gdc-pied__horaires {
  font-size: var(--fs-body);
  font-style: normal;
  line-height: 1.6;
}

.gdc-pied__urgence strong { color: var(--gdc-blanc); }

.gdc-pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-s);
  margin-top: var(--esp-xl);
  padding-top: var(--esp-m);
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: var(--fs-small);
}
.gdc-pied__mentions { margin: 0; }
.gdc-pied__menu {
  display: flex;
  gap: var(--esp-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   BASCULE MOBILE
   Le menu horizontal ne tient plus sous 1100 px : panneau déroulant.
   ========================================================================== */
@media (max-width: 1100px) {
  .gdc-burger { display: flex; }

  .gdc-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--esp-m) clamp(1.25rem, 5.2083vw, 6.25rem) var(--esp-l);
    background: var(--gdc-noir);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    display: none;
  }
  .gdc-nav.est-ouvert { display: flex; }

  .gdc-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .gdc-menu > li { border-bottom: 1px solid rgba(255, 255, 255, .10); }
  .gdc-menu > li > [role="button"] { cursor: pointer; }
  .gdc-menu > li:not(.sous-menu-ouvert) > .sub-menu { display: none; }
  .gdc-menu a {
    padding-block: var(--esp-s);
    font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
  }

  /* En mobile le sous-menu se déplie dans le flux, pas en survol */
  .gdc-menu .sub-menu {
    position: static;
    translate: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0 0 var(--esp-s) var(--esp-m);
    border: 0;
    background: transparent;
  }
  .gdc-menu .sub-menu a { padding-block: var(--esp-xs); }

  .gdc-entete__cta {
    margin-top: var(--esp-m);
    align-self: flex-start;
  }
}

/* Appel d'urgence toujours atteignable au pouce sur petit écran.
   Au-dessus de 640 px la barre n'a pas lieu d'être : sans cette règle, le lien
   restait dans le flux et s'affichait comme une ligne de texte orpheline au bas
   de chaque page, à toutes les largeurs de bureau. */
.gdc-urgence-flottante { display: none; }

@media (max-width: 640px) {
  .gdc-urgence-flottante {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-s);
    padding: .9rem;
    background: var(--gdc-or-fond);
    color: var(--gdc-blanc);
    font-weight: 700;
    text-decoration: none;
  }
  body { padding-bottom: 3.75rem; }
}

/* ==========================================================================
   PAGE INTROUVABLE
   ========================================================================== */
.gdc-404 { padding-block: var(--esp-xl); }
.gdc-404__inner {
  max-width: var(--gdc-contenu, 1520px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2vw, 2.5rem);
  text-align: center;
}
.gdc-404__titre {
  font-size: var(--fs-h1);
  color: var(--gdc-or);
  margin: 0 0 var(--esp-m);
}
.gdc-404__texte {
  max-width: 60ch;
  margin: 0 auto var(--esp-l);
}
.gdc-404__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-s);
  justify-content: center;
  margin-bottom: var(--esp-l);
}
.gdc-404__lien {
  padding: var(--esp-s) var(--esp-m);
  border: 1px solid var(--gdc-or);
  border-radius: 999px;
  text-decoration: none;
  color: var(--gdc-noir);
  transition: background var(--gdc-transition), color var(--gdc-transition);
}
.gdc-404__lien:hover,
.gdc-404__lien:focus-visible {
  background: var(--gdc-or-fond);
  color: var(--gdc-blanc);
}
.gdc-404__urgence { font-weight: 700; }
.gdc-404__urgence a { color: var(--gdc-or); }

/* ==========================================================================
   CIBLES TACTILES — 44 px minimum
   Relevé au navigateur : entrées de sous-menu 34 px, liens du pied 20 px,
   mentions légales 42,3 px, logo d'en-tête 33,3 px. Sous le pouce, une cible
   trop courte se manque, et la manquer sur un numéro d'urgence coûte cher.
   ========================================================================== */
.gdc-menu .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}
.gdc-pied__col p a,
.gdc-pied__adresses a,
.gdc-pied__menu a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.gdc-entete__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* pages.css */
/* Largeur de contenu du XD : les blocs de texte vont de x=200 à x=1720,
   soit 1520 px. Elementor retombe sur son défaut de 1140 quel que soit le
   réglage du kit : on impose la valeur ici, c'est déterministe. */
:root { --gdc-contenu: 1520px; }
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--gdc-contenu);
  padding-inline: clamp(1.25rem, 2vw, 2.5rem);
}

/* ==========================================================================
   Sections de contenu — valeurs dérivées du XD 1920.
   Elementor fournit la structure ; l'apparence vit ici.
   ========================================================================== */

/* --- Rythme vertical commun --- */
.gdc-section { padding-block: var(--esp-xl); }
.gdc-section--centree { text-align: center; }
.gdc-section--centree .elementor-widget-container > * { margin-inline: auto; }

.gdc-titre-or .elementor-heading-title {
  font-size: var(--fs-h1);
  color: var(--gdc-or);
  font-weight: 700;
  line-height: var(--lh-titre);
  margin: 0 0 var(--esp-l);
}

.gdc-intro { max-width: 78ch; margin-inline: auto; }
.gdc-intro p:first-child { font-size: var(--fs-h3); font-weight: 700; }
.gdc-intro strong { color: var(--gdc-noir); }

/* ==========================================================================
   HERO — XD : image plein cadre, titre 80, sous-titre 50, 2 CTA
   ========================================================================== */
.gdc-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(28rem, calc(100svh - 9.375rem), 60rem);
  padding-block: var(--esp-xl);
  text-align: center;
  color: var(--gdc-blanc);
}
/* Le voile du héros n'est pas un effet de style : c'est lui qui rend le titre
   blanc lisible sur la photo. Mesuré au pixel sur les fonds réellement peints,
   le voile d'origine (.28 → .45) laissait les titres entre 2,17:1 et 2,78:1,
   sous le seuil AA de 3:1 pour un grand texte, sur l'accueil, le blog, le
   détartrage, la dentisterie préventive et « À propos ». Le lot D avait déjà dû
   le renforcer pour ses propres photos. On remonte donc partout à .46 → .60,
   valeur qui ramène le pire cas au-dessus de 4,7:1 sans noyer le visuel. */
.gdc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,14,.46) 0%, rgba(20,18,14,.60) 100%);
}
.gdc-hero > .elementor-container { position: relative; z-index: 1; }

.gdc-hero h1.elementor-heading-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gdc-blanc);
  margin: 0 0 var(--esp-m);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.gdc-hero h2.elementor-heading-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--gdc-blanc);
  margin: 0 0 var(--esp-l);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.gdc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-m);
  justify-content: center;
}
.gdc-hero__actions img { width: clamp(1.5rem, 2.6vw, 3.125rem); height: auto; }

/* ==========================================================================
   LES 4 RAISONS — XD : icône 100×100 centrée, texte 30 px
   ========================================================================== */
.gdc-raisons {
  padding-inline: var(--gdc-marge);
  padding-bottom: var(--esp-xl);
}
.gdc-raisons > .elementor-container { gap: var(--esp-l); }
.gdc-raison { text-align: center; }
.gdc-raison__icone img {
  width: clamp(3.5rem, 5.2vw, 6.25rem);
  height: auto;
  margin-inline: auto;
}
.gdc-raison__texte { margin-top: var(--esp-m); }
.gdc-raison__texte p { margin: 0; }

/* Elementor impose une largeur de conteneur : on la lève pour le bord à bord */
.gdc-section--pleine > .elementor-container { max-width: 100%; }
.gdc-section--pleine .elementor-widget-wrap { padding: 0; }
.gdc-section--pleine .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* ==========================================================================
   4 CARTES DE SOINS — XD : 480×720, label blanc 40 px en bas, voile sombre
   ========================================================================== */
.gdc-cartes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.gdc-carte {
  position: relative;
  display: block;
  aspect-ratio: 480 / 720;
  overflow: hidden;
  text-decoration: none;
}
.gdc-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* XD, spec/interactions.md « Composant 1-4 » : auto-animate 0,3 s ease-out. */
  transition: transform var(--gdc-transition);
}
.gdc-carte::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,14,0) 35%, rgba(20,18,14,.82) 100%);
  transition: background var(--gdc-transition);
}
.gdc-carte__label {
  position: absolute;
  z-index: 2;
  left: var(--esp-m);
  right: var(--esp-m);
  bottom: var(--esp-l);
  color: var(--gdc-blanc);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.gdc-carte:hover img,
.gdc-carte:focus-visible img { transform: scale(1.06); }
.gdc-carte:hover::after,
.gdc-carte:focus-visible::after {
  background: linear-gradient(180deg, rgba(160,114,54,.25) 0%, rgba(20,18,14,.88) 100%);
}

@media (max-width: 1100px) { .gdc-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .gdc-cartes { grid-template-columns: 1fr; } }

/* ==========================================================================
   TÉMOIGNAGE — XD : étoiles, bloc crème #EBE3D6, auteur en gras
   ========================================================================== */
/* XD : le bloc crème va de x=100 à x=1820, soit 1720 px, plus large que la
   colonne de texte de 1520 (spec/Accueil.md SHAPE y=3394 x=100, et les trois
   hubs à l'identique). La section qui porte la brique passe donc en pleine
   largeur et rend elle-même la marge de 100 px. */
.gdc-temoin { padding-inline: clamp(1.25rem, 5.2083vw, 6.25rem); }
.gdc-temoin > .elementor-container { max-width: 100%; }

.gdc-temoignage__etoiles {
  width: clamp(11rem, 20.8vw, 25rem);
  /* Le fichier de la médiathèque était un canevas carré de 200×200 dont les
     étoiles n'occupaient qu'une bande centrale : « height: auto » rendait un
     carré de 400 px et injectait ~330 px de vide. Le fichier est recadré à sa
     bande utile (800×142) ; le rapport est verrouillé ici pour que la ligne ne
     bouge plus pendant le chargement. */
  aspect-ratio: 400 / 71;
  height: auto;
  object-fit: contain;
  margin: 0 auto var(--esp-l);
}
.gdc-temoignage__bloc {
  max-width: min(1720px, 100%);
  margin: 0 auto;
  padding: var(--esp-l) var(--esp-l) var(--esp-m);
  background: var(--gdc-creme);
  border: 0;
}
.gdc-temoignage__bloc { border-radius: 1.25rem; }
.gdc-temoignage__bloc p { margin: 0 0 var(--esp-m); }
.gdc-temoignage__bloc cite { font-style: normal; font-weight: 700; display: block; }

.gdc-temoignage__puces {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: var(--esp-m);
}
.gdc-temoignage__puce {
  width: .95rem;
  height: .95rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* .18 rendait ~1,5:1 sur le fond blanc de la section : sous le seuil non
     textuel AA de 3:1 (WCAG 1.4.11). .55 mesure ~4:1. */
  background: rgba(20, 18, 14, .55);
  cursor: pointer;
  transition: background var(--gdc-transition);
}
.gdc-temoignage__puce[aria-selected="true"] { background: var(--gdc-or); }
.gdc-temoignage__puce:hover { background: var(--gdc-or-clair); }

/* Panneaux du carrousel : un seul visible, bascule en fondu de 0,3 s
   (XD : tap → state-transition, auto-animate ease-out). Le bloc global de
   tokens.css annule la transition quand le visiteur préfère un mouvement
   réduit. */
.gdc-temoignage__panneau { transition: opacity var(--gdc-transition); }
.gdc-temoignage__panneau.est-entrant { opacity: 0; transition: none; }
.gdc-temoignage__panneau[hidden] { display: none; }

/* Libellé réservé aux lecteurs d'écran (les puces n'ont pas de texte visible). */
.gdc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   BLOCS IMAGE RONDE — XD : cercle bordé or, texte à côté, alternance
   ========================================================================== */
.gdc-bloc { padding: var(--esp-xl) var(--gdc-marge); }
.gdc-bloc > .elementor-container {
  align-items: center;
  gap: var(--esp-xl);
}
.gdc-bloc--inverse > .elementor-container { flex-direction: row-reverse; }

.gdc-rond img {
  width: min(100%, 34rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gdc-or);
  margin-inline: auto;
}
.gdc-bloc__titre .elementor-heading-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 0 0 var(--esp-m);
}
.gdc-bloc__texte strong { color: var(--gdc-or-fond); }

@media (max-width: 900px) {
  .gdc-bloc > .elementor-container,
  .gdc-bloc--inverse > .elementor-container { flex-direction: column; }
  .gdc-bloc { text-align: center; }
}

/* ==========================================================================
   ACCÈS — XD : carte à gauche, panneau or à droite
   ========================================================================== */
.gdc-acces > .elementor-container { align-items: stretch; gap: 0; }
.gdc-acces__carte { display: flex; }
.gdc-acces__carte > .elementor-widget-wrap { width: 100%; }

/* La chaîne de height:100% se rompt dans l'imbrication Elementor : on ancre
   l'image en absolu dans un conteneur qui, lui, occupe toute la colonne. */
.gdc-carte-lieu {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.gdc-acces__carte > .elementor-widget-wrap > .elementor-element { position: static; }
.gdc-acces__carte { position: relative; min-height: 22rem; }
.gdc-carte-lieu img { width: 100%; height: 100%; object-fit: cover; }

.gdc-horaires {
  height: 100%;
  padding: var(--esp-xl) var(--esp-l);
  background: var(--gdc-or-fond);
  color: var(--gdc-blanc);
}
.gdc-horaires h3 {
  font-size: var(--fs-h3);
  color: var(--gdc-blanc);
  margin: 0 0 var(--esp-l);
}
.gdc-horaires dl { margin: 0 0 var(--esp-l); }
.gdc-horaires dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-m);
  padding-block: .35em;
}
.gdc-horaires dt, .gdc-horaires dd { margin: 0; }
.gdc-horaires dd { text-align: right; }

.gdc-itineraires {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-s);
  padding: var(--esp-m) var(--gdc-marge);
  background: var(--gdc-creme);
}
.gdc-itineraires a {
  flex: 1 1 18rem;
  padding: var(--esp-s) var(--esp-m);
  background: var(--gdc-blanc);
  border: 1px solid rgba(20,18,14,.15);
  border-radius: .5rem;
  text-decoration: none;
  font-size: var(--fs-small);
  transition: border-color var(--gdc-transition), background var(--gdc-transition);
}
.gdc-itineraires a:hover { border-color: var(--gdc-or); background: var(--gdc-blanc); }
.gdc-itineraires strong { display: block; color: var(--gdc-or-fond); }

@media (max-width: 900px) {
  .gdc-carte-lieu img { min-height: 16rem; }
}

/* ==========================================================================
   BANDE URGENCE — XD : bandeau noir pleine largeur
   ========================================================================== */
.gdc-bande-urgence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-m);
  padding: var(--esp-l) var(--gdc-marge);
  background: var(--gdc-noir);
  color: var(--gdc-blanc);
}
.gdc-bande-urgence h2 {
  color: var(--gdc-blanc);
  font-size: var(--fs-h3);
  margin: 0 0 var(--esp-xs);
}
.gdc-bande-urgence p { margin: 0; max-width: 46ch; }
.gdc-bande-urgence strong { color: var(--gdc-blanc); }
.gdc-bande-urgence__tel {
  font-size: var(--fs-h3);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--gdc-transition);
}
.gdc-bande-urgence__tel:hover { color: var(--gdc-or); }

/* ==========================================================================
   FAQ — XD : question 40 px, séparateur, +/− à droite
   ========================================================================== */
.gdc-faq { max-width: 100%; text-align: left; }
.gdc-faq__item { border-bottom: 1px solid rgba(20,18,14,.18); }
.gdc-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-m);
  padding: var(--esp-m) 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.gdc-faq__q::-webkit-details-marker { display: none; }
.gdc-faq__q::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1em;
  line-height: 1;
  transition: transform var(--gdc-transition);
}
.gdc-faq__item[open] .gdc-faq__q::after { content: '−'; }
.gdc-faq__r { padding-bottom: var(--esp-m); }
.gdc-faq__r p { margin: 0; }
.gdc-faq__r a { color: var(--gdc-or-fond); text-decoration: underline; }

/* ==========================================================================
   CONTRASTE DES LIENS OR DANS LE CORPS DE TEXTE
   L'or du XD (#A07236) ne donne que 4,24:1 contre le blanc : sous le seuil AA
   de 4,5 dès que le texte descend sous 24 px, donc partout sauf à 1920.
   --gdc-or-fond (#96692F) mesure 4,82:1 et reste dans la palette du XD.
   ========================================================================== */
.elementor-widget-text-editor a,
.gdc-bloc__texte a,
.gdc-intro a,
.gdc-chapeau a { color: var(--gdc-or-fond); }

/* Même mesure pour les passages en gras, que tokens.css peint en or : sur
   l'Accueil, « clinique dentaire à Genève », « suivis des adultes » ou les noms
   de cabinets tombaient à 4,24:1 dès que la typographie fluide descendait le
   corps sous 24 px, soit toutes les largeurs sauf 1920. */
strong, b { color: var(--gdc-or-fond); }

/* ==========================================================================
   BURGER — Hello Elementor peint tout button:hover/:focus en #c36 magenta.
   tokens.css neutralise déjà le fond ; la couleur héritée restait magenta et
   colorerait tout glyphe ou texte ajouté plus tard dans le bouton.
   ========================================================================== */
.gdc-burger,
.gdc-burger:hover,
.gdc-burger:focus,
.gdc-burger:focus-visible,
.gdc-burger:active { color: var(--gdc-blanc); }

/* lot-a.css */
/* ==========================================================================
   LOT A — les trois hubs de soins
   /hygiene-et-prevention/  ·  /medecine-et-chirurgie-dentaire/  ·  /soins-esthetiques/

   Valeurs relevées sur le XD 1920 et sur les rendus de référence
   xd/artboards/*.png. Chargé après pages.css par le glob de functions.php.
   ========================================================================== */

:root {
  /* Marge de contenu des hubs : le XD cale titres, chapeaux et lignes de soin
     sur x=200, alors que --gdc-marge vaut 140. Même clamp que le pied de page. */
  --hub-marge: clamp(1.25rem, 10.4167vw, 12.5rem); /* 20 → 200 */

  /* Ligne de soin : visuel rond de 600, gouttière 100, texte 820 (total 1520). */
  --soin-visuel: clamp(11rem, 31.25vw, 37.5rem);   /* 176 → 600 */

  /* Le bloc témoignage déborde la colonne de texte : le XD le pose de x=100 à
     x=1820. Sa marge propre vaut donc 100, pas 200. */
  --temoin-marge: clamp(1.25rem, 5.2083vw, 6.25rem); /* 20 → 100 */
}

/* --- Utilitaire : texte réservé aux lecteurs d'écran --- */
.gdc-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   HÉROS DE HUB
   XD : image plein cadre 1920×1080, H1 Bold 80 en capitales, sous-titre
   Bold 50, un seul CTA blanc. Tout est centré sur les trois artboards.
   ========================================================================== */
.gdc-hero--hub h1.elementor-heading-title { text-transform: uppercase; }

/* .gdc-hero ne pose qu'un padding vertical, et son conteneur est un item flex
   dimensionné par son contenu : la marge latérale n'était que le reliquat de
   la dernière ligne de titre, donc nulle dès que le texte remplissait la
   largeur. Mesuré à 0,2 px de chaque côté du H1 de Soins esthétiques en
   390 px. On rend la marge explicite et on fixe la largeur du conteneur. */
.gdc-hero--hub { padding-inline: var(--hub-marge); }
.gdc-hero--hub > .elementor-container {
  width: 100%;
  max-width: var(--gdc-contenu);
  margin-inline: auto;
}

/* Le voile d'origine (.28 → .45) suffit sur les deux héros sombres, pas sur
   la photo de dents blanches de Soins esthétiques : près d'un tiers de la
   surface du titre y passait sous le seuil AA du grand texte. Le voile est
   renforcé sur les trois hubs, la mesure valant pour le pire des trois. */
.gdc-hero--hub::before {
  background: linear-gradient(180deg, rgba(20, 18, 14, .46) 0%, rgba(20, 18, 14, .64) 100%);
}

/* Le XD donne le libellé du CTA à 30 px, comme celui de l'en-tête, et le
   bouton à 474 px de large. .gdc-btn hérite de --fs-h3 (40 px) : on le
   dissocie ici sans toucher au jeton partagé avec l'Accueil et le lot B. */
.gdc-hero--hub .gdc-hero__actions .gdc-btn {
  font-size: var(--fs-body);
  min-width: clamp(16rem, 24.6875vw, 29.625rem); /* 256 → 474 */
}

/* Le sous-titre du hub Soins esthétiques tient sur deux lignes au XD, ceux
   des deux autres sur une seule : la mesure est bornée juste au-dessus du
   plus long des deux sous-titres courts (54 signes). */
.gdc-hero--hub h2.elementor-heading-title {
  max-width: 58ch;
  margin-inline: auto;
}

/* ==========================================================================
   TITRE OR + CHAPEAU
   XD : titre Bold 60 or, chapeau 30 px sur toute la largeur de contenu.
   Hygiène et Soins esthétiques en Regular, Médecine en Bold.
   ========================================================================== */
.gdc-hub-intro { padding-inline: var(--hub-marge); }

/* Filet : les deux sections sont générées en « layout: full_width », donc sans
   .elementor-section-boxed. Si l'une repassait en boxed dans l'éditeur, le
   contenu retomberait de 1520 à 1140 px. */
.gdc-hub-intro > .elementor-container,
.gdc-soin > .elementor-container { max-width: 100%; }

.gdc-chapeau {
  max-width: 100ch;
  margin-inline: auto;
}
.gdc-chapeau p { font-size: var(--fs-body); }
.gdc-chapeau p:last-child { margin-bottom: 0; }
.gdc-chapeau--gras p { font-weight: 700; }

/* ==========================================================================
   LIGNE DE SOIN
   XD : visuel rond de 600 px à x=200, texte à x=900 (largeur 820),
   pas régulier de 800 px par ligne. Titre Bold 40 en capitales, corps 30,
   lien « En savoir plus » Bold 30 souligné.

   Le pas de 800 px est un cadrage de maquette : il est reproduit par le
   rythme vertical, jamais par une hauteur fixe, sinon les textes longs
   (Implants et prothèses, Orthodontie) débordent.
   ========================================================================== */
.gdc-soin {
  /* 100 px en haut et en bas : avec le cercle de 600 le pas retombe sur les
     800 px du XD, sans hauteur fixe, donc sans risque pour les textes longs.
     À 80 px le rythme mesurait 760, soit 40 px de moins onze fois de suite. */
  padding-block: clamp(2.5rem, 5.2083vw, 6.25rem); /* 40 → 100 */
  padding-inline: var(--hub-marge);
}

.gdc-soin > .elementor-container {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 820fr);
  column-gap: clamp(1.5rem, 5.2083vw, 6.25rem); /* 24 → 100 */
  align-items: center;
}
/* Hygiène : le XD aligne le titre de soin sur le haut du cercle (image et
   texte à la même ordonnée sur les trois lignes). Les deux autres hubs
   décalent le texte de 114 et 89 px, le centrage y est la bonne lecture. */
.gdc-soin--haut > .elementor-container { align-items: start; }
/* Elementor pose « width: 40% » sur la colonne dans le CSS généré par page
   (post-NN.css), chargé APRÈS le thème et de spécificité (0,3,0). Dans une
   grille, ce pourcentage se résout sur la piste : la colonne retombait à 40 %
   de 439 px, soit 176 px. La classe est doublée pour passer à (0,4,0).
   Constat fait au navigateur, pas sur une capture. */
.gdc-soin > .elementor-container > .elementor-column.elementor-column {
  width: auto;
  max-width: 100%;
}

.gdc-soin__visuel img {
  width: var(--soin-visuel);
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin-inline: auto;
  transition: transform var(--gdc-transition);
}
/* .elementor-widget-image a pose « inline-block » et gagne à égalité de
   spécificité par l'ordre de chargement : classe doublée. */
.gdc-soin__visuel.gdc-soin__visuel a { display: block; }
.gdc-soin__visuel a:hover img,
.gdc-soin__visuel a:focus-visible img { transform: scale(1.03); }

.gdc-soin__titre .elementor-heading-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--gdc-noir);
  text-transform: uppercase;
  line-height: var(--lh-titre);
  margin: 0 0 var(--esp-m);
}

.gdc-soin__texte p { margin: 0; }

/* Le thème parent pose « text-decoration: none » sur .elementor a : le
   sélecteur est doublé pour rendre au lien le souligné du XD. */
/* Cible tactile : le lien mesurait 26,3 px de haut en 390 px, contre les 44 px
   que le thème tient déjà sur le burger et sur le CTA du menu. La hauteur
   minimale est portée par le lien lui-même, sans toucher au rythme de la
   section (piloté par le cercle de 600 px et le padding, pas par le texte). */
.gdc-soin__texte a.gdc-soin__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--esp-m);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--gdc-noir);
  text-decoration: underline;
  text-underline-offset: .25em;
  transition: color var(--gdc-transition);
}
.gdc-soin__texte a.gdc-soin__lien:hover,
.gdc-soin__texte a.gdc-soin__lien:focus-visible { color: var(--gdc-or); }

/* Le widget HTML du lien est un frère du texte : on annule la marge que
   Elementor pose entre widgets pour garder l'écart du XD (60 px). */
.gdc-soin__texte .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* --- Colonne unique : le visuel passe au-dessus du texte --- */
@media (max-width: 900px) {
  .gdc-soin > .elementor-container {
    grid-template-columns: 1fr;
    row-gap: var(--esp-m);
    justify-items: center;
  }
  .gdc-soin { text-align: center; padding-block: var(--esp-m); }
  .gdc-soin__visuel img { width: min(100%, 22rem); }
}

/* ==========================================================================
   TÉMOIGNAGE — largeur du XD
   XD : bloc crème de x=100 à x=1820 (1720 px), citation à x=200, bande
   d'étoiles 400×71 centrée à x=760. La brique vient de l'Accueil ; elle est
   ici corrigée sous la classe .gdc-temoin, propre au lot A, pour ne pas
   modifier l'Accueil ni le lot B pendant qu'ils sont ouverts.
   ========================================================================== */
.gdc-temoin { padding-inline: var(--temoin-marge); }
.gdc-temoin > .elementor-container { max-width: 100%; }

.gdc-temoin .gdc-temoignage__bloc {
  max-width: 1720px;
  padding-inline: var(--temoin-marge);
}

/* Le fichier de la médiathèque était un canevas carré de 200×200 dont les
   étoiles n'occupaient qu'une bande centrale : « height: auto » rendait donc
   un carré de 400 et injectait ~330 px de vide. Le fichier est désormais
   recadré en 800×142 ; le rapport est verrouillé ici pour que la ligne ne
   bouge plus au chargement. */
.gdc-temoin .gdc-temoignage__etoiles {
  aspect-ratio: 400 / 71;
  height: auto;
  object-fit: contain;
}

/* lot-b.css */
/* ==========================================================================
   LOT B — pages de soin d'Hygiène et prévention
   Check-up dentaire · Détartrage · Dentisterie préventive

   Chargé après pages.css. Ne contient que les briques propres à ce lot :
   le héros, les 4 raisons, la FAQ, le bandeau d'accès et les boutons viennent
   du tronc commun et ne sont pas redéfinis ici.
   ========================================================================== */

/* ==========================================================================
   LARGEUR DE CONTENU — conformité XD
   XD : tout le contenu centré est calé de x=200 à x=1720, soit 1520 px, et la
   marge de page vaut donc 200 px à 1920.
   pages.css borne déjà `.elementor-container` à 1520 px, mais Elementor lui
   ajoute une gouttière interne de 2vw (38,4 px à 1920) : le contenu retombe à
   1443 px et démarre à x=238. On rend cette gouttière au conteneur, sans
   discontinuité : au-dessus de 1520 px de fenêtre elle vaut 0, en dessous elle
   remonte progressivement jusqu'à la marge du thème. Aucun palier, donc aucun
   saut de largeur au redimensionnement.
   (Correctif de même nature que lot-a.css:56, tenu dans le fichier du lot.)
   ========================================================================== */
.gdc-lotb.gdc-section > .elementor-container {
  padding-inline: max(0px, min(var(--gdc-marge), 1520px - 100vw));
}

/* ==========================================================================
   CTA ISOLÉ AU CENTRE
   XD : bouton seul après le chapeau, x=723 largeur 474, donc centré.
   ========================================================================== */
.gdc-cta-centre {
  display: flex;
  justify-content: center;
  padding-block: var(--esp-l) 0;
}

/* ==========================================================================
   DUO IMAGE / TEXTE
   XD : visuel rond bordé or de 600 px, texte aligné en haut, alternance
   gauche/droite. Vérifié sur xd/artboards : c'est bien un cercle, pas un
   rectangle débordant — la spec annote « 0x0 » parce que le calque est groupé.
   Aucune hauteur fixe : le pas de 800 px du XD est un cadrage de maquette,
   reproduit par le rythme vertical. Les textes longs commandent.
   La section est en pleine largeur : sans cela Elementor la bride à 1140 px et
   le duo se recroqueville au milieu de la page. Les marges viennent d'ici.
   L'ordre visuel suit l'ordre du DOM ; pas de row-reverse, qui inverserait
   l'ordre de lecture sans changer le rendu.
   ========================================================================== */
.gdc-duo { padding: var(--esp-xl) var(--gdc-marge); }
.gdc-duo > .elementor-container {
  max-width: 100%;
  align-items: flex-start;
  gap: var(--esp-l);
}

/* Elementor pose deux colonnes à 50 %. Le XD donne 600 px au visuel et tout le
   reste au texte : le rond se retrouverait sinon flottant au milieu de sa
   moitié, et le texte décalé de 200 px vers la droite. */
.gdc-duo__media {
  flex: 0 0 min(100%, 37.5rem);
  max-width: min(100%, 37.5rem);
}
.gdc-duo__texte {
  flex: 1 1 auto;
  max-width: none;
}

.gdc-duo__rond img {
  width: min(100%, 37.5rem);   /* 600 px au XD */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gdc-or);
  margin-inline: auto;
}

.gdc-duo__titre .elementor-heading-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--gdc-noir);
  line-height: var(--lh-titre);
  margin: 0 0 var(--esp-m);
}

/* Dans le XD de ces pages, les passages en gras restent noirs : ils marquent
   le terme, ils ne colorent pas la ligne. tokens.css met strong en or. */
.gdc-duo__texte strong { color: var(--gdc-noir); }

.gdc-duo__texte ul {
  margin: 0 0 var(--esp-s);
  padding-left: 1.15em;
}
.gdc-duo__texte li { margin-bottom: var(--esp-xs); }

/* Sous 900 px, une seule colonne, et l'image passe toujours devant le texte —
   y compris sur les blocs inversés, où le DOM la place en second. */
@media (max-width: 900px) {
  .gdc-duo > .elementor-container { flex-direction: column; }
  .gdc-duo--inverse > .elementor-container { flex-direction: column-reverse; }
  .gdc-duo__media { margin-bottom: var(--esp-l); }
  .gdc-duo--inverse .gdc-duo__media { margin: 0 0 var(--esp-l); }
}

/* ==========================================================================
   LISTE À COCHES — Détartrage uniquement
   XD : bandes de 1470 px démarrant à x=250, coche à x=181. La coche déborde
   donc de 69 px à gauche de la bande. En flux normal elle décalerait toute la
   grille : elle sort du flux et se superpose au bord de la bande.
   Le rendu de l'artboard donne des bandes CRÈME très arrondies, pas des
   rectangles or à angles vifs comme le laisse croire le « fill » de la spec.
   ========================================================================== */
.gdc-etapes { padding: 0 var(--gdc-marge) var(--esp-xl); }

.gdc-etapes__liste {
  /* la coche déborde à gauche : on lui réserve la place hors de la bande,
     sinon elle sort du cadre et déclenche un défilement horizontal */
  --debord: clamp(1.75rem, 3.6vw, 4.3125rem);
  list-style: none;
  margin: 0 auto;
  padding: 0 0 0 var(--debord);
  max-width: calc(1470px + var(--debord));  /* la bande fait bien 1470 px */
}

.gdc-etape {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(5.5rem, 10.36vw, 12.4375rem); /* 88 → 199 px du XD */
  /* XD : bandes de 199 px posées tous les 249 px, donc 50 px de gouttière.
     --esp-s plafonne à 20 px et comprimait le rythme de 60 %. */
  margin-bottom: clamp(0.75rem, 2.6vw, 3.125rem);
  padding: var(--esp-m) var(--esp-l);
  background: var(--gdc-creme);
  border-radius: 999px;
}

.gdc-etape__coche {
  position: absolute;
  left: 0;
  top: 50%;
  translate: -50% -50%;
  width: clamp(3.5rem, 4.79vw, 5.75rem);   /* 56 → 92 px */
  height: auto;
  flex: 0 0 auto;
}

.gdc-etape__texte {
  display: block;
  padding-left: clamp(1rem, 2.6vw, 3.125rem);
}
.gdc-etape__titre {
  display: block;
  font-weight: 700;
  color: var(--gdc-noir);
  line-height: var(--lh-serre);
}
.gdc-etape__detail {
  display: block;
  line-height: var(--lh-serre);
}

/* Sous 700 px la coche ne tient plus à cheval sur le bord : elle passe
   au-dessus du texte et la bande redevient un simple bloc arrondi. */
@media (max-width: 700px) {
  .gdc-etapes__liste { padding-left: 0; }
  .gdc-etape {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: var(--esp-m);
    border-radius: 1.25rem;
  }
  .gdc-etape__coche {
    position: static;
    translate: none;
    margin-bottom: var(--esp-s);
  }
  .gdc-etape__texte { padding-left: 0; }
}

/* ==========================================================================
   BANDEAU D'ACCÈS — variante « soin »
   XD : « Nos horaires » passe de 40 à 50 px, et un CTA blanc s'ajoute sous la
   liste. Les jours et les heures sont sur deux colonnes calées, pas rejetés
   aux deux bords comme sur l'Accueil.
   ========================================================================== */
/* Le panneau du XD fait 891 px pour 643 px de contenu : il respire moins que
   celui de l'Accueil, qui n'a pas de bouton à loger. On resserre le rythme
   plutôt que de figer une hauteur. */
.gdc-acces--soin .gdc-horaires { padding-block: var(--esp-l); }

.gdc-acces--soin .gdc-horaires h3 {
  font-size: var(--fs-h2);
  color: var(--gdc-blanc);
  margin: 0 0 var(--esp-m);
}

.gdc-acces--soin .gdc-horaires dl > div {
  display: grid;
  grid-template-columns: minmax(0, 9em) 1fr;
  gap: var(--esp-m);
  justify-content: start;
  padding-block: .2em;
}
.gdc-acces--soin .gdc-horaires dd { text-align: left; }

.gdc-acces--soin .gdc-horaires .gdc-btn { margin-top: var(--esp-s); }
.gdc-acces--soin .gdc-horaires .gdc-btn img {
  width: clamp(1.5rem, 2.6vw, 3.125rem);
  height: auto;
}

/* ==========================================================================
   AJUSTEMENTS DE TRONC COMMUN, portée lot B seulement

   Règle d'équipe : un fichier de lot ne définit JAMAIS un sélecteur nu
   partagé. `.gdc-chapeau`, `.gdc-intro` et `.gdc-btn` vivent aussi sur
   l'Accueil et sur les hubs du lot A ; comme functions.php charge les lots par
   ordre alphabétique, une règle nue d'ici piloterait leurs pages. Tout est
   donc préfixé `.gdc-lotb`.
   ========================================================================== */

/* Chapeau centré sans première ligne en gras : le XD réserve le gras au seul
   chapeau d'introduction, pas aux textes de conversion ni au préambule des
   étapes. `.gdc-intro` ne convient donc pas pour ceux-là. */
.gdc-lotb .gdc-chapeau { max-width: 88ch; margin-inline: auto; }
.gdc-lotb .gdc-chapeau p:last-child { margin-bottom: 0; }

/* Le texte de conversion touche le bandeau d'accès dans le XD : la bande or
   fait elle-même la coupure, inutile d'ajouter un blanc avant. */
.gdc-avant-acces { padding-bottom: var(--esp-l); }

/* Titre intercalaire : le duo suivant porte sa propre marge haute. */
.gdc-titre-inter { padding-bottom: var(--esp-s); }
.gdc-titre-inter .gdc-titre-or .elementor-heading-title { margin-bottom: 0; }

/* Le chapeau de ces pages est centré comme sur l'Accueil, mais il porte aussi
   des listes : elles doivent rester lisibles, donc alignées à gauche. */
.gdc-lotb .gdc-section--centree .gdc-intro ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 var(--esp-s);
  padding-left: 1.15em;
}

/* Le picto du bouton suit la taille du bouton, comme dans le héros. */
.gdc-lotb .gdc-cta-centre .gdc-btn img {
  width: clamp(1.5rem, 2.6vw, 3.125rem);
  height: auto;
}

/* ==========================================================================
   BANDEAU DES 4 ARGUMENTS — gouttière du XD
   XD : pictos centrés à x=337, 752, 1168, 1583, soit un pas de 415 px sur une
   largeur de contenu de 1520. Quatre colonnes et trois gouttières donnent donc
   275 px de colonne et 140 px de gouttière. Avec --esp-l (80 px) la colonne
   montait à 301 px et le premier argument passait sur 4 lignes au lieu de 3.
   La section porte déjà la marge de page : ici on ne retire que la gouttière
   interne d'Elementor, sinon le contenu ne ferait plus 1520 px.
   ========================================================================== */
.gdc-lotb.gdc-raisons > .elementor-container {
  padding-inline: 0;
  gap: var(--gdc-marge);
}


/* lot-conversion.css */
/* ==========================================================================
   LOT CONVERSION — /contact/ · /contact/merci/ · /urgence-dentaire/

   Ce lot rend « Prendre RDV » fonctionnel sur tout le site : il habille les
   trois pages qui reçoivent les CTA des autres lots.

   Valeurs relevées sur le XD 1920 et sur les rendus de référence
   xd/artboards/{Contact, Contact – Merci, Urgence dentaire}.png.
   Chargé après pages.css, lot-a.css et lot-b.css par le glob de functions.php :
   ce fichier peut donc surcharger les règles communes, mais ne définit JAMAIS
   un sélecteur nu qui déborderait sur les pages des autres lots. Tout ce qui
   touche une brique partagée est préfixé `.gdc-lotc`.
   ========================================================================== */

/* ==========================================================================
   LARGEUR DE CONTENU
   Même correctif que lot-a.css et lot-b.css : pages.css borne déjà
   `.elementor-container` à 1520 px, mais Elementor lui ajoute une gouttière
   interne de 2vw (38,4 px à 1920). Le contenu retombait à 1443 px et démarrait
   à x=238 au lieu de x=200. On rend la gouttière au conteneur sans palier.
   ========================================================================== */
.gdc-lotc.gdc-section > .elementor-container {
  padding-inline: max(0px, min(var(--gdc-marge), 1520px - 100vw));
}

/* ==========================================================================
   HÉROS DE CONVERSION
   XD : image plein cadre 1920×1080, H1 Bold 80, sous-titre Bold 50, un seul
   CTA blanc. Tout est centré sur les deux artboards (Contact, Urgence).
   Le voile de pages.css suffit pour Contact ; l'artboard Urgence est nettement
   plus sombre (photo aérienne désaturée), on l'assombrit d'un cran de plus.
   ========================================================================== */
.gdc-hero--conversion > .elementor-container { max-width: 1520px; }
.gdc-hero--conversion::before {
  background: linear-gradient(180deg, rgba(20,18,14,.34) 0%, rgba(20,18,14,.56) 100%);
}
.gdc-hero--conversion h2.elementor-heading-title {
  /* Mesuré : à 24ch le sous-titre passait sur 3 lignes contre 2 au XD sur
     Contact, et sur 2 contre 1 sur Urgence. 42ch retombe sur le découpage
     de l'artboard aux deux endroits. */
  max-width: 42ch;
  margin-inline: auto;
}

/* ==========================================================================
   CTA TÉLÉPHONE
   XD : même gabarit que le CTA calendrier. Le picto n'apparaît que sur le
   héros de Contact ; ailleurs le bouton est nu (« Appeler maintenant »).
   ========================================================================== */
.gdc-btn--tel .gdc-btn__picto-tel {
  width: clamp(1.5rem, 2.6vw, 3.125rem);
  height: auto;
}
/* Sur fond clair le picto est blanc sur blanc : on l'assombrit par filtre
   plutôt que d'embarquer un second fichier. */
.gdc-btn--sombre.gdc-btn--tel .gdc-btn__picto-tel { filter: invert(1); }
.gdc-btn--sombre.gdc-btn--tel:hover .gdc-btn__picto-tel,
.gdc-btn--sombre.gdc-btn--tel:focus-visible .gdc-btn__picto-tel { filter: none; }

/* Le bouton « Envoyer » du XD est blanc bordé or, texte or. Aucune autre page
   ne porte cette variante : elle vit ici. */
.gdc-lotc .gdc-btn--or-contour {
  color: var(--gdc-or);
  background: var(--gdc-blanc);
  border-color: var(--gdc-or);
}
.gdc-lotc .gdc-btn--or-contour:hover,
.gdc-lotc .gdc-btn--or-contour:focus-visible {
  background: var(--gdc-or-fond);
  color: var(--gdc-blanc);
}

/* Lien téléphone en ligne : le XD le pose en Regular, même taille que le
   texte, souligné au survol seulement. */
.gdc-lien-tel {
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.gdc-lien-tel:hover,
.gdc-lien-tel:focus-visible { color: var(--gdc-or); text-decoration: underline; }

/* ==========================================================================
   PAGE CONTACT — chapeau
   XD : texte aligné à gauche à x=200, deux lignes de 30 px.
   ========================================================================== */
.gdc-contact__intro { padding-block: var(--esp-xl) var(--esp-l); }
.gdc-contact__chapeau { text-align: left; }
.gdc-contact__chapeau p { margin-bottom: var(--esp-xs); }
.gdc-contact__chapeau p:last-child { margin-bottom: 0; }

/* ==========================================================================
   PAGE CONTACT — FORMULAIRE FLUENT FORMS
   XD : champs en gélule crème #EBE3D6 de 105 px de haut, libellé en gras
   sombre POSÉ DANS le champ (donc placeholder, pas étiquette au-dessus), et
   trois intertitres en capitales grasses au-dessus des groupes.
   Le zone de message fait 285 px.

   Fluent Forms sert son propre CSS ; toutes les règles sont donc écrites au
   niveau de spécificité de `.gdc-formulaire .fluentform`, jamais en !important.
   ========================================================================== */
/* Le formulaire est plus large que la colonne de texte : le XD pose les
   champs de x=100 à x=1820, soit 1720 px, alors que le chapeau est calé à
   x=200. Mesuré sur les rectangles de la spec, confirmé sur l'artboard. */
.gdc-contact__formulaire { padding-block: 0 var(--esp-xl); }

/* Retrait intérieur commun aux champs et aux intertitres : x=200 au XD pour
   une gélule qui démarre à x=100. */
.gdc-formulaire { --champ-retrait: clamp(1.25rem, 5.2vw, 6.25rem); }
/* pages.css borne `.elementor-section.elementor-section-boxed > .elementor-container`
   à 1520 px : il faut au moins autant de spécificité pour la relever. */
.elementor-section.gdc-contact__formulaire > .elementor-container {
  max-width: 1720px;
  padding-inline: max(0px, min(var(--temoin-marge, 6.25rem), 1720px - 100vw));
}
.gdc-formulaire { max-width: 100%; }

.gdc-formulaire .fluentform .ff-el-group { margin-bottom: var(--esp-m); }

/* Les intertitres du XD (« Vos coordonnées », « Votre demande », « Votre
   message ») sont rendus par les séparateurs de section de Fluent Forms.
   Markup réel relevé sur la page servie :
     .ff-el-section-break > h3.ff-el-section-title + .ff-section_break_desk + hr
   Le filet et le bloc de description ne sont pas au XD : on les retire. */
.gdc-formulaire .ff-el-group.ff-el-section-break {
  border: 0;
  padding: 0;
  margin: var(--esp-l) 0 var(--esp-s);
}
.gdc-formulaire .ff-el-group.ff-el-section-break:first-child { margin-top: 0; }
.gdc-formulaire .ff-el-section-title {
  padding-left: var(--champ-retrait);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--gdc-noir);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: var(--lh-serre);
  margin: 0;
}
.gdc-formulaire .ff-el-section-break hr,
.gdc-formulaire .ff-section_break_desk { display: none; }

/* Les étiquettes sont dans le champ au XD : on les retire du flux sans les
   retirer de l'accessibilité — le lecteur d'écran doit continuer à les lire. */
.gdc-formulaire .fluentform .ff-el-input--label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Le champ lui-même : gélule crème, 105 px au XD --- */
.gdc-formulaire .fluentform .ff-el-form-control {
  width: 100%;
  min-height: clamp(3.25rem, 5.47vw, 6.5625rem);   /* 52 → 105 px */
  /* XD : la gélule démarre à x=100, son libellé à x=200 → 100 px de retrait,
     et non 50. Les intertitres se calent sur la même verticale. */
  padding: var(--esp-s) var(--champ-retrait);
  background: var(--gdc-creme);
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--gdc-font);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--gdc-noir);
  box-shadow: none;
  transition: border-color var(--gdc-transition), background var(--gdc-transition);
}
.gdc-formulaire .fluentform .ff-el-form-control::placeholder {
  color: var(--gdc-noir);
  font-weight: 700;
  opacity: 1;
}
.gdc-formulaire .fluentform .ff-el-form-control:hover { background: #E3D9C8; }
.gdc-formulaire .fluentform .ff-el-form-control:focus {
  background: var(--gdc-creme);
  border-color: var(--gdc-or);
  outline: none;
}

/* La zone de message : 285 px au XD, donc pas une gélule mais un bloc très
   arrondi. Le rayon de 999px la déformerait. */
.gdc-formulaire .fluentform textarea.ff-el-form-control {
  min-height: clamp(9rem, 14.84vw, 17.8125rem);    /* 144 → 285 px */
  border-radius: clamp(1.5rem, 2.6vw, 3.125rem);
  resize: vertical;
}

/* Le select : Fluent Forms garde la flèche native, invisible sur le crème.
   On la redessine, et on réserve la place à droite. */
.gdc-formulaire .fluentform select.ff-el-form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: clamp(2.5rem, 5vw, 5rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%2314120E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right clamp(1rem, 2.1vw, 2.5rem) center;
  background-size: clamp(.75rem, 1.05vw, 1.25rem) auto;
  cursor: pointer;
}

/* --- Téléphone : le XD pose « +41 » dans le champ, séparé d'un filet vertical.
   Fluent Forms rend le préfixe hors du champ, dans
     .ff_input-group > .ff_input-group-prepend > .ff_input-group-text
   On refait du groupe entier la gélule, et le champ perd son propre fond.
   Markup relevé sur la page servie, pas supposé. --- */
.gdc-formulaire .fluentform .ff_input-group {
  display: flex;
  align-items: stretch;
  min-height: clamp(3.25rem, 5.47vw, 6.5625rem);
  background: var(--gdc-creme);
  border: 2px solid transparent;
  border-radius: 999px;
  transition: border-color var(--gdc-transition);
}
.gdc-formulaire .fluentform .ff_input-group:focus-within { border-color: var(--gdc-or); }
.gdc-formulaire .fluentform .ff_input-group-prepend { display: flex; }
.gdc-formulaire .fluentform .ff_input-group-text {
  display: flex;
  align-items: center;
  padding: 0 clamp(.75rem, 1.6vw, 1.875rem) 0 var(--champ-retrait);
  border: 0;
  border-right: 2px solid rgba(20, 18, 14, .35);
  margin-block: clamp(.6rem, 1.2vw, 1.4rem);
  background: transparent;
  font-family: var(--gdc-font);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--gdc-noir);
  line-height: 1;
}
.gdc-formulaire .fluentform .ff_input-group .ff-el-form-control {
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0 999px 999px 0;
  padding-left: clamp(.75rem, 1.6vw, 1.875rem);
}
.gdc-formulaire .fluentform .ff_input-group .ff-el-form-control:hover,
.gdc-formulaire .fluentform .ff_input-group .ff-el-form-control:focus {
  background: transparent;
  border: 0;
}

/* --- Nom / Prénom sur une ligne, comme au XD ---
   Fluent Forms écrit `flex-basis: 50%` EN STYLE EN LIGNE sur chaque cellule :
   aucune feuille ne peut le battre. Une gouttière posée par `gap` faisait donc
   50 % + 50 % + 20 px > 100 %, et les deux champs se retrouvaient l'un sous
   l'autre. Mesuré au navigateur (cell width = 1520 sur un conteneur de 1520).
   La gouttière passe donc à l'intérieur des cellules, compensée sur le
   conteneur : la somme reste à 100 %. */
.gdc-formulaire .fluentform .ff-t-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-inline: 0;
}
/* La gouttière se pose à droite de chaque cellule sauf la dernière : le bord
   gauche de « Nom » reste donc aligné sur celui des champs pleine largeur.
   Une marge négative sur le conteneur décalait la ligne de dix pixels vers la
   gauche par rapport au reste du formulaire. La largeur de 50 % imposée en
   ligne par le plugin est préservée : `box-sizing: border-box` place la
   gouttière à l'intérieur de la cellule. */
.gdc-formulaire .fluentform .ff-t-cell {
  box-sizing: border-box;
  padding-inline: 0 var(--esp-s);
}
.gdc-formulaire .fluentform .ff-t-cell:last-child { padding-inline: 0; }

/* Sous 700 px, deux champs de 50 % deviennent illisibles : le conteneur
   redevient un bloc, ce qui neutralise le flex-basis en ligne. */
@media (max-width: 700px) {
  .gdc-formulaire .fluentform .ff-t-container { display: block; margin-inline: 0; }
  .gdc-formulaire .fluentform .ff-t-cell,
  .gdc-formulaire .fluentform .ff-t-cell:last-child { padding-inline: 0; }
}

/* L'en-tête est collant : sans cette réserve, l'ancre « Prendre RDV » dépose
   le haut du formulaire sous la barre de navigation. */
#gdc-formulaire { scroll-margin-top: clamp(5.375rem, 8.8vw, 10.375rem); }

/* --- Bouton d'envoi : blanc bordé or, centré, 474×121 au XD --- */
.gdc-formulaire .fluentform .ff-el-group.ff_submit_btn_wrapper {
  margin-top: var(--esp-l);
  text-align: center;
}
.gdc-formulaire .fluentform .ff-el-group.ff_submit_btn_wrapper.ff-text-left,
.gdc-formulaire .fluentform .ff-el-group.ff_submit_btn_wrapper.ff-text-right {
  text-align: center;
}
.gdc-formulaire .fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  min-width: min(100%, 29.625rem);          /* 474 px au XD */
  padding-inline: var(--btn-px);
  border: 2px solid var(--gdc-or);
  border-radius: var(--btn-radius);
  background: var(--gdc-blanc);
  color: var(--gdc-or);
  font-family: var(--gdc-font);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--gdc-transition), color var(--gdc-transition);
}
/* Hello Elementor peint tout button:hover/:focus en #c36. Sa spécificité bat
   la nôtre : on neutralise explicitement, comme pour .gdc-burger. */
.gdc-formulaire .fluentform .ff-btn-submit:hover,
.gdc-formulaire .fluentform .ff-btn-submit:focus,
.gdc-formulaire .fluentform .ff-btn-submit:focus-visible,
.gdc-formulaire .fluentform .ff-btn-submit:active {
  background-color: var(--gdc-or-fond);
  color: var(--gdc-blanc);
  border-color: var(--gdc-or-fond);
}

/* --- Messages d'erreur et de succès --- */
.gdc-formulaire .fluentform .error,
.gdc-formulaire .fluentform .text-danger {
  color: #A2231D;
  font-size: var(--fs-small);
  font-weight: 700;
  padding-left: var(--champ-retrait);
}
.gdc-formulaire .ff-message-success {
  padding: var(--esp-m);
  border: 2px solid var(--gdc-or);
  border-radius: 1.25rem;
  background: var(--gdc-creme);
  color: var(--gdc-noir);
  font-weight: 700;
}

/* ==========================================================================
   PAGE CONTACT — panneau or
   XD : le CTA « Prendre RDV » du panneau descend vers le formulaire de la
   page, pas vers /contact/ (voir l'écart n° 3 de build_conversion.py).
   Le défilement doit être doux et l'ancre ne doit pas passer sous l'en-tête
   collant : header.php pose ~150 px de haut au XD.
   ========================================================================== */
html { scroll-behavior: smooth; }
#gdc-formulaire { scroll-margin-top: clamp(4.5rem, 7.8vw, 9.375rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   PAGE MERCI
   XD : pas de héros image. Titre or 80, sous-titre noir 50, quatre lignes
   centrées, puis le bandeau d'accès. Fond blanc.
   ========================================================================== */
/* XD : le titre démarre à y=350 sous un en-tête de 150, soit 200 px de blanc.
   Mesuré à 11,875rem la page dépassait le XD de 8,5 % ; à 200 px elle rentre
   dans la tolérance de ±8 %. */
.gdc-merci { padding-block: clamp(2.5rem, 7.29vw, 8.75rem) var(--esp-l); }
.gdc-merci__titre .elementor-heading-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  color: var(--gdc-or);
  line-height: 1.1;
  margin: 0 0 var(--esp-m);
}
.gdc-merci__soustitre .elementor-heading-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--gdc-noir);
  line-height: var(--lh-titre);
  margin: 0 0 var(--esp-xl);
}
.gdc-merci__corps p { margin-bottom: var(--esp-m); }
.gdc-merci__corps p:last-child { margin-bottom: 0; }
.gdc-merci__corps strong { color: var(--gdc-noir); }

/* ==========================================================================
   PAGE URGENCE — bandeau noir sous le héros
   XD : bande pleine largeur de 398 px. Titre 50 à gauche, numéro 50 à droite,
   phrase 30 sous le titre, picto téléphone 87×87 sous le numéro.
   `.gdc-bande-urgence` vient de pages.css : on n'en modifie que la variante.
   ========================================================================== */
.gdc-bande-urgence--large {
  align-items: flex-start;
  padding-block: clamp(2.5rem, 6.4vw, 7.75rem);
}
.gdc-bande-urgence--large .gdc-bande-urgence__texte { flex: 1 1 28rem; }
.gdc-bande-urgence--large h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--esp-m);
}
.gdc-bande-urgence--large p { max-width: 42ch; }
.gdc-bande-urgence--large .gdc-bande-urgence__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--esp-m);
}
.gdc-bande-urgence--large .gdc-bande-urgence__tel { font-size: var(--fs-h2); }
.gdc-bande-urgence--large .gdc-bande-urgence__contact img {
  width: clamp(2.75rem, 4.53vw, 5.4375rem);       /* 44 → 87 px */
  height: auto;
}

@media (max-width: 760px) {
  .gdc-bande-urgence--large { flex-direction: column; }
  .gdc-bande-urgence--large .gdc-bande-urgence__contact {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--esp-s) var(--esp-m);
  }
}

/* Mesuré à 320 px : le picto téléphone débordait de 7 px, ce qui ouvrait un
   défilement horizontal sur toute la page. Le numéro et son picto tiennent la
   ligne à eux deux ; sous 360 px on les laisse se replier et on rend le picto
   compressible. */
@media (max-width: 400px) {
  .gdc-bande-urgence--large .gdc-bande-urgence__contact img {
    width: 2.25rem;
    flex: 0 0 auto;
  }
  .gdc-bande-urgence--large .gdc-bande-urgence__tel {
    font-size: var(--fs-h3);
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   PAGE URGENCE — listes
   XD : deux colonnes de puces à x=200 et x=985, texte Bold 30, puce « • »
   posée dans le texte. On rend la puce au CSS et on garde une vraie <ul>.
   ========================================================================== */
.gdc-liste-double {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-m) var(--esp-l);
  text-align: left;
  margin-top: var(--esp-l);
}
.gdc-liste-double ul { margin: 0; padding: 0; list-style: none; }
.gdc-liste-double li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: var(--esp-s);
  font-weight: 700;
  line-height: var(--lh-serre);
}
.gdc-liste-double li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--gdc-noir);
}

@media (max-width: 700px) {
  .gdc-liste-double { grid-template-columns: 1fr; gap: 0; }
}

/* Le duo « Vous hésitez… » porte un CTA sous son texte : le XD laisse
   257 px entre la dernière ligne et le bouton. */
.gdc-lotc .gdc-duo__texte-corps { margin-bottom: var(--esp-m); }
.gdc-lotc .gdc-duo__texte .elementor-widget-html { margin-top: var(--esp-m); }

/* Titre or juste avant les bandes à coche : le bloc suivant apporte sa marge
   haute, le XD ne laisse que 237 px. */
.gdc-avant-etapes { padding-bottom: var(--esp-l); }

/* ==========================================================================
   PAGE URGENCE — panneau or final
   XD : même gabarit demi-écran que le bandeau d'accès, mais le panneau porte
   le numéro de permanence à la place des horaires. Le CSS de `.gdc-acces`
   (pages.css) fournit déjà la carte à gauche et l'étirement des colonnes.
   ========================================================================== */
.gdc-panneau-urgence {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--esp-m);
  padding: var(--esp-xl) var(--esp-l);
  background: var(--gdc-or-fond);
  color: var(--gdc-blanc);
}
.gdc-panneau-urgence h2 {
  font-size: var(--fs-h2);
  color: var(--gdc-blanc);
  margin: 0;
}
.gdc-panneau-urgence__tel {
  font-size: var(--fs-h2);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--gdc-transition);
}
.gdc-panneau-urgence__tel:hover,
.gdc-panneau-urgence__tel:focus-visible { color: var(--gdc-noir); }
.gdc-panneau-urgence p { margin: 0; max-width: 40ch; }
.gdc-panneau-urgence strong { color: var(--gdc-blanc); }
.gdc-panneau-urgence__picto {
  width: clamp(2.75rem, 4.53vw, 5.4375rem);       /* 44 → 87 px */
  height: auto;
}

/* Sous 900 px la carte et le panneau s'empilent : la carte garde une hauteur
   utile, sinon elle se réduit à un filet. Même seuil que pages.css. */
@media (max-width: 900px) {
  .gdc-acces--urgence .gdc-carte-lieu img { min-height: 16rem; }
  .gdc-panneau-urgence { padding: var(--esp-l) var(--gdc-marge); }
}

/* ==========================================================================
   MOBILE — les trois pages
   Le XD n'a pas d'écran mobile. Règle du projet : aucun débordement
   horizontal, aucun texte tronqué, l'appel d'urgence atteignable au pouce.
   ========================================================================== */
@media (max-width: 760px) {
  .gdc-lotc .gdc-hero__actions { width: 100%; }
  .gdc-lotc .gdc-hero__actions .gdc-btn { width: 100%; }
  .gdc-lotc .gdc-cta-centre .gdc-btn { width: 100%; }
  .gdc-formulaire .fluentform .ff-btn-submit { width: 100%; min-width: 0; }
  .gdc-contact__chapeau { text-align: center; }
}

/* lot-d.css */
/* ==========================================================================
   LOT D — les huit pages de soin restantes
   Dentisterie pédiatrique · Endodontie · Dents de sagesse · Implants et
   prothèses · Orthodontie · Soin des gencives · Smile Concept · Blanchiment

   Chargé après pages.css, avec les autres feuilles de lot, par ordre
   alphabétique. Deux règles d'hygiène tenues sans exception ici :

   1. AUCUN sélecteur nu partagé. Tout est préfixé `.gdc-lotd` ou porte un nom
      propre au lot (`gdc-lotd-*`). La feuille est servie sur tout le site :
      une règle nue piloterait les pages des autres intervenants, c'est le
      défaut B9 relevé sur le lot B.
   2. AUCUNE dépendance à lot-a.css ni à lot-b.css. Les briques visuellement
      voisines (duo image/texte, bandes à coches) y sont déclarées sans
      préfixe de lot et sont en cours de correction : le lot D redéclare les
      siennes plutôt que de s'y accrocher.

   Le tronc commun réellement partagé et stable reste emprunté à pages.css :
   héros, bandeau des 4 arguments, bandeau d'accès, FAQ, boutons.
   ========================================================================== */

/* ==========================================================================
   LARGEUR DE CONTENU — conformité XD (défauts A1 et B1)
   XD : tout le contenu centré est calé de x=200 à x=1720, soit 1520 px.
   pages.css borne déjà `.elementor-container` à 1520 px, mais Elementor lui
   ajoute une gouttière interne de 2vw (38,4 px à 1920) : le contenu retombe à
   1443 px et démarre à x=238. On rend cette gouttière au conteneur, sans
   discontinuité : au-dessus de 1520 px de fenêtre elle vaut 0, en dessous elle
   remonte progressivement jusqu'à la marge du thème. Aucun palier, donc aucun
   saut de largeur au redimensionnement.
   ========================================================================== */
.gdc-lotd.gdc-section > .elementor-container {
  padding-inline: max(0px, min(var(--gdc-marge), 1520px - 100vw));
}

/* ==========================================================================
   HÉROS
   ========================================================================== */

/* Défaut A4 : `.gdc-hero` ne déclare que padding-block, et son conteneur est
   un item flex en largeur adaptée au contenu. La marge latérale n'est alors
   que le reliquat de la dernière ligne de texte : sous 430 px le titre venait
   toucher le bord de l'écran. On la déclare, une bonne fois. */
.gdc-lotd.gdc-hero > .elementor-container {
  width: 100%;
  max-width: var(--gdc-contenu);
  padding-inline: clamp(1.25rem, 5vw, 8.75rem);
}

/* Défaut A11 : le XD donne au bouton du héros 474 x 121 px et un libellé de
   30 px, comme celui de l'en-tête. Sans cela il héritait de --fs-h3 (40 px). */
.gdc-lotd .gdc-hero__actions .gdc-btn {
  font-size: var(--fs-body);
  min-width: min(100%, 29.625rem);   /* 474 px au XD */
}

/* Voile du héros — contraste AA sur une photo (défaut A7)
   pages.css pose un voile de rgba(20,18,14,.28) à .45. Mesuré au pixel sur mes
   huit photos, il ne suffit pas : sur Dents de sagesse à 1440 px, le fond sous
   le H1 tombe à 3,09:1 médian et 49 % des pixels passent sous le seuil AA de
   3:1 applicable au grand texte. Les dents blanches et les blouses claires du
   cadrage médical sont plus lumineuses que les photos d'ambiance des autres
   lots. On renforce le voile sur les seules pages du lot D : la photo reste
   lisible, le titre devient lisible partout.
   Un voile plus dense est aussi ce que voit un patient au soleil, sur son
   téléphone, quand il cherche à joindre la clinique. */
.gdc-lotd.gdc-hero::before {
  background: linear-gradient(180deg, rgba(20, 18, 14, .46) 0%,
                                      rgba(20, 18, 14, .60) 100%);
}

/* Dentisterie pédiatrique : le XD capitalise le H1. La capitale est
   décorative, elle se pose en CSS et non dans le texte, pour que l'arbre
   d'accessibilité et le référencement reçoivent la casse normale. */
.gdc-lotd-hero--maj h1.elementor-heading-title { text-transform: uppercase; }

/* ==========================================================================
   BANDEAU DES 4 ARGUMENTS — gouttière du XD
   XD : pictos centrés à x=337, 752, 1168, 1583, soit un pas de 415 px sur une
   largeur de contenu de 1520. Quatre colonnes et trois gouttières donnent donc
   275 px de colonne et 140 px de gouttière. La section porte déjà la marge de
   page : ici on ne retire que la gouttière interne d'Elementor, sinon le
   contenu ne ferait plus 1520 px.
   ========================================================================== */
.gdc-lotd.gdc-raisons > .elementor-container {
  padding-inline: 0;
  gap: var(--gdc-marge);
}
/* Les cellules de prix du XD tiennent sur deux lignes (« Dès CHF 120.- » puis
   sa précision). Le <br> vient du contenu, l'interligne serré vient d'ici. */
.gdc-lotd .gdc-raison__texte p { line-height: var(--lh-serre); }

/* ==========================================================================
   CTA ISOLÉ AU CENTRE
   XD : bouton seul après le chapeau, x=723 largeur 474, donc centré.
   ========================================================================== */
.gdc-lotd-cta {
  display: flex;
  justify-content: center;
  padding-block: var(--esp-l) 0;
}
.gdc-lotd-cta .gdc-btn img {
  width: clamp(1.5rem, 2.6vw, 3.125rem);
  height: auto;
}

/* ==========================================================================
   DUO IMAGE / TEXTE
   XD : visuel rond bordé or de 600 px, texte aligné en haut, le côté du
   visuel donné par son x (100 à gauche, 1220 à droite). Vérifié sur
   xd/artboards : c'est bien un cercle, pas un rectangle débordant — la spec
   annote « 0x0 » parce que le calque est groupé.
   La section est en pleine largeur : sans cela Elementor la bride à 1140 px.
   L'ordre visuel suit l'ordre du DOM ; pas de row-reverse, qui inverserait
   l'ordre de lecture sans changer le rendu.
   ========================================================================== */

/* XD : visuel de 600 px posé tous les 800 px, soit 100 px au-dessus et
   au-dessous. --esp-xl (140 px) aurait donné un pas de 880 (défaut A9 en
   sens inverse) : on cale la valeur du XD. */
.gdc-lotd-duo { padding: clamp(2.5rem, 5.2vw, 6.25rem) var(--gdc-marge); }
.gdc-lotd-duo > .elementor-container {
  max-width: 100%;
  align-items: flex-start;
  gap: var(--esp-l);
}

/* Elementor pose deux colonnes à 50 %. Le XD donne 600 px au visuel et tout le
   reste au texte : le rond se retrouverait sinon flottant au milieu de sa
   moitié, et le texte décalé vers la droite. */
.gdc-lotd-duo__media {
  flex: 0 0 min(100%, 37.5rem);
  max-width: min(100%, 37.5rem);
}
.gdc-lotd-duo__texte-col {
  flex: 1 1 auto;
  max-width: none;
}

.gdc-lotd-duo__rond img {
  width: min(100%, 37.5rem);   /* 600 px au XD */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gdc-or);
  margin-inline: auto;
}

.gdc-lotd-duo__titre .elementor-heading-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--gdc-noir);
  line-height: var(--lh-titre);
  margin: 0 0 var(--esp-m);
}

.gdc-lotd-duo__texte ul {
  margin: 0 0 var(--esp-s);
  padding-left: 1.15em;
}
.gdc-lotd-duo__texte li { margin-bottom: var(--esp-xs); }
.gdc-lotd-duo__texte p:last-child,
.gdc-lotd-duo__texte ul:last-child { margin-bottom: 0; }

/* Smile Concept : la bande de 1920x800 du XD. La spec annonce « rect
   fill=#A07236 » mais l'artboard est crème au pixel (236, 227, 214) — même
   écart que les bandes à coches. Le crème passe en outre le contraste AA avec
   le texte noir, ce que l'or du XD ne fait pas (4,44:1). */
.gdc-lotd-duo--creme { background: var(--gdc-creme); }

/* Sous 900 px, une seule colonne, et l'image passe toujours devant le texte —
   y compris sur les blocs inversés, où le DOM la place en second. */
@media (max-width: 900px) {
  .gdc-lotd-duo > .elementor-container { flex-direction: column; }
  .gdc-lotd-duo--inverse > .elementor-container { flex-direction: column-reverse; }
  .gdc-lotd-duo__media { margin-bottom: var(--esp-l); }
  .gdc-lotd-duo--inverse .gdc-lotd-duo__media { margin: 0 0 var(--esp-l); }
}

/* ==========================================================================
   BANDES À COCHES — Endodontie, Implants et prothèses, Orthodontie
   XD : bandes de 1470 px démarrant à x=250, coche à x=181. La coche déborde
   donc de 69 px à gauche de la bande. En flux normal elle décalerait toute la
   grille : elle sort du flux et se superpose au bord de la bande.
   Le rendu des trois artboards donne des bandes CRÈME très arrondies, pas des
   rectangles or à angles vifs comme le laisse croire le « fill » de la spec.
   Hauteur : 199 px sur Endodontie, 249 px sur les deux autres (modificateur
   `--haute`). Gouttière : 50 px dans les trois cas (défaut B6).
   ========================================================================== */
.gdc-lotd-etapes { padding: 0 var(--gdc-marge) var(--esp-xl); }

.gdc-lotd-etapes__liste {
  /* la coche déborde à gauche : on lui réserve la place hors de la bande,
     sinon elle sort du cadre et déclenche un défilement horizontal */
  --debord: clamp(1.75rem, 3.6vw, 4.3125rem);
  --bande-h: clamp(5.5rem, 10.36vw, 12.4375rem);   /* 88 → 199 px */
  list-style: none;
  margin: 0 auto;
  padding: 0 0 0 var(--debord);
  max-width: calc(1470px + var(--debord));  /* la bande fait bien 1470 px */
}
.gdc-lotd-etapes--haute .gdc-lotd-etapes__liste {
  --bande-h: clamp(6.5rem, 12.97vw, 15.5625rem); /* 104 → 249 px */
}

.gdc-lotd-etape {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--bande-h);
  /* XD : 50 px de gouttière entre deux bandes. --esp-s plafonne à 20 px et
     comprimait le rythme de 60 % (défaut B6). */
  margin-bottom: clamp(0.75rem, 2.6vw, 3.125rem);
  padding: var(--esp-m) var(--esp-l);
  background: var(--gdc-creme);
  border-radius: 999px;
}
.gdc-lotd-etape:last-child { margin-bottom: 0; }

.gdc-lotd-etape__coche {
  position: absolute;
  left: 0;
  top: 50%;
  translate: -50% -50%;
  width: clamp(3.5rem, 4.79vw, 5.75rem);   /* 56 → 92 px */
  height: auto;
  flex: 0 0 auto;
}

.gdc-lotd-etape__texte {
  display: block;
  padding-left: clamp(1rem, 2.6vw, 3.125rem);
}
.gdc-lotd-etape__titre {
  display: block;
  font-weight: 700;
  color: var(--gdc-noir);
  line-height: var(--lh-serre);
}
.gdc-lotd-etape__detail {
  display: block;
  line-height: var(--lh-serre);
}

/* Sous 700 px la coche ne tient plus à cheval sur le bord : elle passe
   au-dessus du texte et la bande redevient un simple bloc arrondi. */
@media (max-width: 700px) {
  .gdc-lotd-etapes__liste { padding-left: 0; }
  .gdc-lotd-etape {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: var(--esp-m);
    border-radius: 1.25rem;
  }
  .gdc-lotd-etape__coche {
    position: static;
    translate: none;
    margin-bottom: var(--esp-s);
  }
  .gdc-lotd-etape__texte { padding-left: 0; }
}

/* Le préambule qui précède les bandes ne doit pas laisser un blanc de section
   entière : le XD ne pose que 187 px entre le chapeau et la première bande. */
.gdc-lotd-avant-bandes { padding-bottom: var(--esp-l); }

/* ==========================================================================
   DEUX COLONNES DE TEXTE
   XD Implants : x=200 et x=985, donc deux moitiés de la largeur de contenu.
   XD Smile Concept : deux colonnes de puces au même gabarit.
   ========================================================================== */
.gdc-lotd-2col { padding: 0 0 var(--esp-xl); }
/* Cette section ne porte pas `.gdc-section` : la règle de largeur du haut de
   fichier ne l'atteint pas, et sa gouttière retombait à 28,8 px à 1440 alors
   que tout le reste de la page est à 80 px. Même calcul, appliqué ici.
   Le sélecteur reprend DEUX classes de la section : pages.css pose
   `.elementor-section.elementor-section-boxed > .elementor-container` à trois
   classes, et une règle à deux classes perd malgré l'ordre de chargement. */
.gdc-lotd.gdc-lotd-2col > .elementor-container {
  gap: var(--esp-l);
  align-items: flex-start;
  padding-inline: max(0px, min(var(--gdc-marge), 1520px - 100vw));
}
.gdc-lotd-2col__col { text-align: left; }
.gdc-lotd-2col__col p:last-child { margin-bottom: 0; }

/* Le XD colore en or les deux termes de tête des colonnes d'Implants. L'or de
   la marque ne donne que 4,24:1 contre le blanc : sous 24 px le texte échoue
   au seuil AA (défaut B3). --gdc-or-fond monte à 4,82:1 et reste
   indiscernable du doré. */
.gdc-lotd-2col strong { color: var(--gdc-or-fond); }

/* Listes d'atouts de Smile Concept : le XD les écrit en gras, puce « • »
   collée au texte, alignées à gauche dans une section centrée. */
.gdc-lotd-atouts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gdc-lotd-atouts li {
  margin-bottom: var(--esp-s);
  line-height: var(--lh-serre);
}
.gdc-lotd-atouts li::before { content: '• '; }
.gdc-lotd-atouts li:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .gdc-lotd-2col > .elementor-container { flex-direction: column; }
}

/* ==========================================================================
   VISUELS NON RONDS — Smile Concept
   XD : une image de 1280x840 et deux de 1305x514 centrées dans la largeur de
   contenu, plus un bandeau de 1920x423 en bord à bord.
   ========================================================================== */
.gdc-lotd-visuel { padding: 0 var(--gdc-marge) var(--esp-xl); }
.gdc-lotd.gdc-lotd-visuel > .elementor-container { max-width: 100%; }
.gdc-lotd-visuel__img img {
  width: 100%;
  max-width: 81.5625rem;   /* 1305 px au XD */
  margin-inline: auto;
}
.gdc-lotd-visuel--pleine { padding-inline: 0; }
.gdc-lotd-visuel--pleine .gdc-lotd-visuel__img img {
  max-width: 100%;
  /* XD : 1920 x 423. Le fichier source ne fait que 1200 px de large ; on
     conserve le rapport plutôt que d'imposer une hauteur. */
  aspect-ratio: 1920 / 423;
  object-fit: cover;
}

/* ==========================================================================
   ÉTAPES NUMÉROTÉES — Smile Concept
   XD : titre de 40 px centré, texte centré sur toute la largeur de contenu,
   sans visuel en regard.
   ========================================================================== */
.gdc-lotd-rdv { padding-block: var(--esp-l); }
.gdc-lotd-rdv__titre .elementor-heading-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--gdc-noir);
  margin: 0 0 var(--esp-m);
}
.gdc-lotd-rdv__texte { max-width: 88ch; margin-inline: auto; }
.gdc-lotd-rdv__texte p:last-child { margin-bottom: 0; }

/* ==========================================================================
   AJUSTEMENTS DE TRONC COMMUN, portée lot D seulement
   ========================================================================== */

/* Chapeau centré sans première ligne en gras : le XD réserve le gras au seul
   chapeau d'introduction de cinq pages sur huit. */
.gdc-lotd .gdc-chapeau { max-width: 88ch; margin-inline: auto; }
.gdc-lotd .gdc-chapeau p:last-child { margin-bottom: 0; }

/* Le chapeau et l'introduction portent aussi des listes : elles doivent
   rester lisibles, donc alignées à gauche dans une section centrée. */
.gdc-lotd .gdc-section--centree .gdc-intro ul,
.gdc-lotd .gdc-section--centree .gdc-chapeau ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 var(--esp-s);
  padding-left: 1.15em;
}

/* Le texte de conversion touche le bandeau d'accès dans le XD : la bande or
   fait elle-même la coupure, inutile d'ajouter un blanc avant. */
.gdc-lotd-avant-acces { padding-bottom: var(--esp-l); }

/* Titre intercalaire : le duo suivant porte sa propre marge haute. */
.gdc-lotd-titre-inter { padding-bottom: var(--esp-s); }
.gdc-lotd-titre-inter .gdc-titre-or .elementor-heading-title { margin-bottom: 0; }

/* Dans le XD de ces pages, les passages en gras du corps restent NOIRS : ils
   marquent le terme, ils ne colorent pas la ligne (vérifié sur les artboards
   d'Orthodontie, de Blanchiment et de Smile Concept). tokens.css met strong
   en or ; on le ramène au noir, sauf dans le bloc à deux colonnes ci-dessus,
   où le XD le veut bien en or. */
.gdc-lotd .gdc-lotd-duo__texte strong,
.gdc-lotd .gdc-intro strong,
.gdc-lotd .gdc-chapeau strong,
.gdc-lotd .gdc-lotd-rdv__texte strong,
.gdc-lotd .gdc-faq__r strong { color: var(--gdc-noir); }

/* Les liens en or dans le corps de texte échouent au seuil AA sous 24 px
   (défaut B3) : 4,24:1 contre 4,5 requis. On sert le ton de fond, à 4,82:1. */
.gdc-lotd .gdc-faq__r a,
.gdc-lotd .gdc-lotd-duo__texte a,
.gdc-lotd .gdc-chapeau a,
.gdc-lotd .gdc-intro a { color: var(--gdc-or-fond); text-decoration: underline; }
.gdc-lotd .gdc-faq__r a:hover,
.gdc-lotd .gdc-lotd-duo__texte a:hover,
.gdc-lotd .gdc-chapeau a:hover,
.gdc-lotd .gdc-intro a:hover { color: var(--gdc-or-sombre); }

/* Le panneau d'horaires du bandeau d'accès : « Nos horaires » passe de 40 à
   50 px, un CTA blanc s'ajoute sous la liste, et les jours et les heures sont
   sur deux colonnes calées plutôt que rejetés aux deux bords. */
.gdc-lotd-acces .gdc-horaires { padding-block: var(--esp-l); }
.gdc-lotd-acces .gdc-horaires h3 {
  font-size: var(--fs-h2);
  color: var(--gdc-blanc);
  margin: 0 0 var(--esp-m);
}
.gdc-lotd-acces .gdc-horaires dl > div {
  display: grid;
  grid-template-columns: minmax(0, 9em) 1fr;
  gap: var(--esp-m);
  justify-content: start;
  padding-block: .2em;
}
.gdc-lotd-acces .gdc-horaires dd { text-align: left; }
.gdc-lotd-acces .gdc-horaires .gdc-btn { margin-top: var(--esp-s); }
.gdc-lotd-acces .gdc-horaires .gdc-btn img {
  width: clamp(1.5rem, 2.6vw, 3.125rem);
  height: auto;
}

/* La FAQ est alignée à gauche dans une section centrée ; le titre or reste
   centré, comme au XD. */
.gdc-lotd-faq .gdc-faq { text-align: left; }
.gdc-lotd-faq .gdc-faq__r p:last-child,
.gdc-lotd-faq .gdc-faq__r ul:last-child { margin-bottom: 0; }
.gdc-lotd-faq .gdc-faq__r p { margin-bottom: var(--esp-s); }
.gdc-lotd-faq .gdc-faq__r ul {
  margin: 0 0 var(--esp-s);
  padding-left: 1.15em;
}

/* Hello Elementor peint tout button:hover/:focus en #c36 magenta, avec une
   spécificité qui bat les classes du thème. Les CTA de ce lot sont des liens,
   pas des <button>, donc hors de portée de cette règle — mais on redéclare
   l'inversion du XD à une spécificité supérieure, pour que rien ne puisse la
   reprendre depuis une feuille chargée plus tard.
   Aucun composant du lot D n'utilise <button>. */
.gdc-lotd .gdc-btn--clair:hover,
.gdc-lotd .gdc-btn--clair:focus-visible {
  background-color: var(--gdc-blanc);
  color: var(--gdc-noir);
}
.gdc-lotd .gdc-btn--sombre:hover,
.gdc-lotd .gdc-btn--sombre:focus-visible {
  background-color: var(--gdc-noir);
  color: var(--gdc-blanc);
}

/* lot-e.css */
/* ==========================================================================
   LOT E — éditorial et légal
   /a-propos/  ·  /blog/  ·  /mentions-legales/  ·  /politique-de-confidentialite/
   plus le gabarit d'article (single.php) et les archives (archive.php).

   Valeurs relevées sur le XD 1920 et sur les rendus de référence
   xd/artboards/A propos.png, Blog.png et Blog - Article.png (960 px = 1920 / 2).
   Chargée après pages.css par le glob de functions.php.

   Les sections Elementor du lot portent toutes `gdc-lote`. Les gabarits PHP du
   lot portent des classes préfixées `gdc-e-`. Rien ici ne sort de ce périmètre,
   à une exception documentée : `.gdc-e-faq .gdc-faq__r a` et
   `.gdc-e-article__contenu a` relèvent la couleur des liens de `--gdc-or`
   (4,24:1 sur blanc, sous le seuil AA) à `--gdc-or-sombre` (5,90:1). La règle
   de pages.css qui pose l'or reste en place pour les autres lots ; le besoin
   est signalé au rapport de lot.
   ========================================================================== */

:root {
  /* Marge de contenu du lot : le XD cale titres, textes et cartes sur x=200,
     alors que --gdc-marge vaut 140. Même clamp que le lot A. */
  --e-marge: clamp(1.25rem, 10.4167vw, 12.5rem);   /*  20 → 200 */

  /* Grille du blog : deux cartes de 735, gouttière 50, total 1520. */
  --e-gouttiere: clamp(1.25rem, 2.6042vw, 3.125rem); /* 20 →  50 */
  --e-rang:      clamp(2rem,    5.2083vw, 6.25rem);  /* 32 → 100 */

  /* Rayon des cartes crème, relevé au rendu de référence. */
  --e-radius: clamp(0.75rem, 1.0417vw, 1.25rem);     /* 12 →  20 */

  /* Date d'article : Regular 20 au XD, seule taille sous --fs-small. */
  --e-fs-date: clamp(0.875rem, 1.0417vw, 1.25rem);   /* 14 →  20 */
}

/* Utilitaire propre au lot : texte réservé aux lecteurs d'écran. */
.gdc-e-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   A PROPOS — page Elementor
   ========================================================================== */

/* Le XD ne pose ni sous-titre ni CTA sur ce héros : un seul titre, centré.
   Le héros est en `layout: full_width`, donc la règle de pages.css qui donne
   sa gouttière à `.elementor-section-boxed` ne s'y applique pas : sans marge
   propre, le H1 vient toucher le bord de l'écran à 320 px. Mesuré. */
.gdc-lote.gdc-hero--e { padding-inline: var(--gdc-marge); }
.gdc-lote.gdc-hero--e h1.elementor-heading-title { margin-bottom: 0; }

/* Corps de page : le XD centre les paragraphes dans la colonne de 1520. */
.gdc-lote.gdc-e-intro,
.gdc-lote.gdc-e-bio {
  padding-inline: var(--e-marge);
}
.gdc-lote .gdc-e-prose { overflow-wrap: anywhere; }
.gdc-lote .gdc-e-prose p { margin: 0 0 var(--esp-m); }
.gdc-lote .gdc-e-prose p:last-child { margin-bottom: 0; }
.gdc-lote.gdc-e-intro { padding-block: var(--esp-l) var(--esp-l); }
.gdc-lote.gdc-e-bio { padding-block: var(--esp-l) var(--esp-xl); }

/* --- Le praticien : portrait rond bordé d'or à gauche, titre or à droite --- */
.gdc-lote.gdc-e-praticien { padding-inline: var(--e-marge); }
.gdc-lote.gdc-e-praticien > .elementor-container {
  align-items: center;
  gap: var(--esp-xl);
}
.gdc-lote .gdc-e-portrait img {
  width: min(100%, 37.5rem);   /* 600 px au XD */
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  border: 3px solid var(--gdc-or);
  margin-inline: auto;
}
.gdc-lote .gdc-e-praticien__titre .elementor-heading-title {
  margin: 0;
  text-align: left;
}

/* --- FAQ : composant de pages.css, contraste des liens relevé --- */
.gdc-lote.gdc-e-faq { padding-inline: var(--e-marge); }
.gdc-lote.gdc-e-faq .gdc-faq__r a { color: var(--gdc-or-sombre); }

/* ==========================================================================
   HÉROS DES GABARITS PHP — /blog/, archives
   Le héros Elementor vit dans pages.css ; les gabarits codés ont le leur,
   même géométrie, même voile.
   ========================================================================== */
.gdc-e-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(20rem, calc(100svh - 9.375rem), 60rem);
  padding: var(--esp-xl) var(--e-marge);
  text-align: center;
  color: var(--gdc-blanc);
  background: var(--gdc-noir) center center / cover no-repeat;
}
.gdc-e-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Mesuré au pixel : le voile d'origine laissait le titre du blog à 2,22:1 et
     son sous-titre à 2,41:1, sous le seuil AA de 3:1 pour un grand texte. Même
     valeur que le héros commun de pages.css, remonté pour la même raison. */
  background: linear-gradient(180deg, rgba(20, 18, 14, .46) 0%,
                                      rgba(20, 18, 14, .60) 100%);
}
.gdc-e-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--gdc-contenu);
  margin-inline: auto;
}
.gdc-e-hero__titre {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gdc-blanc);
  margin: 0 0 var(--esp-m);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.gdc-e-hero__soustitre {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-titre);
  color: var(--gdc-blanc);
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* Le visuel du XD, servi dans sa coupe 1920×1080 puis dans sa coupe 1024. */
.gdc-e-hero--blog {
  background-image: url('/wp-content/uploads/2026/08/blog-1920x1080.webp');
}
@media (max-width: 1024px) {
  .gdc-e-hero--blog {
    background-image: url('/wp-content/uploads/2026/08/blog-1024x640.webp');
  }
}
/* Une archive n'a pas de visuel dédié au XD : aplat noir de la marque. */
.gdc-e-hero--archive { background-image: none; }
.gdc-e-hero--archive::before { background: none; }

/* ==========================================================================
   LISTE D'ARTICLES — grille de deux cartes crème
   XD : carte 735×1000, visuel 735×400, gouttière 50, rang 100.
   ========================================================================== */
.gdc-e-liste { padding: var(--esp-xl) var(--e-marge); }
.gdc-e-liste__inner {
  width: 100%;
  max-width: var(--gdc-contenu);
  margin-inline: auto;
}

.gdc-e-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--e-gouttiere);
  row-gap: var(--e-rang);
}

.gdc-e-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gdc-creme);
  border-radius: var(--e-radius);
  overflow: hidden;
  transition: transform var(--gdc-transition), box-shadow var(--gdc-transition);
}
.gdc-e-carte__visuel { aspect-ratio: 735 / 400; overflow: hidden; }
.gdc-e-carte__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* XD : auto-animate 0,3 s ease-out, comme les cartes de soins de l'accueil. */
  transition: transform var(--gdc-transition);
}
.gdc-e-carte__visuel--vide {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #efe9df 0%, #ddd2be 100%);
}

.gdc-e-carte__corps {
  display: flex;
  flex-direction: column;
  gap: var(--esp-m);
  padding: var(--esp-l) var(--esp-m) var(--esp-l);
  padding-inline: clamp(1.25rem, 2.6042vw, 3.125rem); /* 20 → 50 (x=250 au XD) */
  flex: 1 1 auto;
}
.gdc-e-carte__titre {
  overflow-wrap: anywhere;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-titre);
  margin: 0;
  /* Or du XD sur crème : 3,33:1, au-dessus du seuil AA des grands textes
     (3:1), le titre restant gras et jamais sous 22 px. */
  color: var(--gdc-or);
}
.gdc-e-carte__lien {
  color: inherit;
  text-decoration: none;
}
/* Un seul lien par carte, étendu à toute sa surface. */
.gdc-e-carte__lien::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--e-radius);
}
.gdc-e-carte__chapeau {
  margin: 0;
  color: var(--gdc-noir);
  overflow-wrap: anywhere;
}
.gdc-e-carte__suite {
  margin-top: auto;
  font-weight: 700;
  /* Or plus sombre : 4,63:1 sur le crème, le texte n'étant pas « grand » à
     partir de 17 px sur petit écran. */
  color: var(--gdc-or-sombre);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.gdc-e-carte:hover,
.gdc-e-carte:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(20, 18, 14, .16);
}
.gdc-e-carte:hover .gdc-e-carte__visuel img,
.gdc-e-carte:focus-within .gdc-e-carte__visuel img { transform: scale(1.06); }
.gdc-e-carte__lien:focus-visible { outline: none; }
.gdc-e-carte:focus-within { outline: 3px solid var(--gdc-or-sombre); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .gdc-e-carte,
  .gdc-e-carte__visuel img { transition: none; }
  .gdc-e-carte:hover { transform: none; }
}

/* --- État vide : le XD suppose des articles, la page doit tenir sans --- */
.gdc-e-vide {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  padding: var(--esp-xl) 0;
}
.gdc-e-vide p { margin: 0 0 var(--esp-m); }

/* --- Pagination --- */
.gdc-e-pagination { margin-top: var(--esp-xl); }
.gdc-e-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gdc-e-pagination a,
.gdc-e-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  padding-inline: var(--esp-s);
  border: 2px solid var(--gdc-or-sombre);
  border-radius: var(--btn-radius);
  color: var(--gdc-or-sombre);
  font-weight: 700;
  font-size: var(--fs-small);
  text-decoration: none;
  transition: background-color var(--gdc-transition), color var(--gdc-transition);
}
.gdc-e-pagination .current,
.gdc-e-pagination a:hover,
.gdc-e-pagination a:focus-visible {
  background: var(--gdc-or-sombre);
  color: var(--gdc-blanc);
}
.gdc-e-pagination .dots { border-color: transparent; }

/* ==========================================================================
   ARTICLE — single.php
   XD : titre Bold 80 noir, date Regular 20, visuel 1520×800, corps 30.
   ========================================================================== */
.gdc-e-article {
  padding: var(--esp-xl) var(--e-marge) var(--esp-l);
}
.gdc-e-article > * {
  width: 100%;
  max-width: var(--gdc-contenu);
  margin-inline: auto;
}
.gdc-e-article__titre {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gdc-noir);
  margin: 0 0 var(--esp-m);
}
.gdc-e-article__date {
  font-size: var(--e-fs-date);
  color: var(--gdc-noir);
  margin: 0 0 var(--esp-l);
}
.gdc-e-article__visuel { margin: 0 auto var(--esp-l); }
.gdc-e-article__visuel img {
  width: 100%;
  aspect-ratio: 1520 / 800;
  object-fit: cover;
  /* Angles vifs : le XD arrondit les cartes du blog, pas le visuel d'article.
     Vérifié au grossissement du coin supérieur gauche de l'artboard. */
  border-radius: 0;
}

.gdc-e-article__contenu { overflow-wrap: anywhere; }
.gdc-e-article__contenu > *:first-child { margin-top: 0; }
.gdc-e-article__contenu p { margin: 0 0 var(--esp-m); }
.gdc-e-article__contenu h2 {
  font-size: var(--fs-h3);
  color: var(--gdc-noir);
  margin: var(--esp-l) 0 var(--esp-m);
}
.gdc-e-article__contenu h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--gdc-noir);
  margin: var(--esp-m) 0 var(--esp-s);
}
.gdc-e-article__contenu ul,
.gdc-e-article__contenu ol { margin: 0 0 var(--esp-m); padding-left: 1.5em; }
.gdc-e-article__contenu li { margin-bottom: var(--esp-xs); }
.gdc-e-article__contenu a {
  color: var(--gdc-or-sombre);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.gdc-e-article__contenu a:hover,
.gdc-e-article__contenu a:focus-visible { color: var(--gdc-noir); }
.gdc-e-article__contenu img { border-radius: var(--e-radius); margin-block: var(--esp-m); }
.gdc-e-article__contenu blockquote {
  margin: var(--esp-l) 0;
  padding: var(--esp-m) var(--esp-l);
  background: var(--gdc-creme);
  border-radius: var(--e-radius);
}
/* Les gras du corps d'article sont noirs : l'or de tokens.css sur du texte
   courant tomberait à 4,24:1 sur blanc. */
.gdc-e-article__contenu strong,
.gdc-e-article__contenu b { color: var(--gdc-noir); }

/* --- « Plus de conseils » : filet, titre or 60, deux cartes --- */
.gdc-e-suite {
  padding: 0 var(--e-marge) var(--esp-xl);
}
.gdc-e-suite__inner {
  width: 100%;
  max-width: var(--gdc-contenu);
  margin-inline: auto;
  border-top: 1px solid rgba(20, 18, 14, .18);
  padding-top: var(--esp-xl);
}
.gdc-e-suite__titre {
  font-size: var(--fs-h1);
  color: var(--gdc-or);
  text-align: center;
  margin: 0 0 var(--esp-l);
}

/* ==========================================================================
   PAGES LÉGALES — mentions légales, politique de confidentialité
   Aucun écran au XD : gabarit de lecture, aligné à gauche, colonne courte.
   ========================================================================== */
.gdc-lote.gdc-e-legal { padding-inline: var(--e-marge); }
.gdc-lote.gdc-e-legal .elementor-widget-container > * { margin-inline: 0; }
.gdc-lote .gdc-e-legal__titre .elementor-heading-title {
  font-size: var(--fs-h1);
  color: var(--gdc-or);
  margin: 0 0 var(--esp-m);
}
.gdc-lote .gdc-e-legal__chapeau { max-width: 70ch; margin-bottom: var(--esp-l); }
.gdc-lote .gdc-e-legal__h2 .elementor-heading-title {
  font-size: var(--fs-h3);
  color: var(--gdc-noir);
  margin: var(--esp-l) 0 var(--esp-m);
}
.gdc-lote.gdc-e-legal .gdc-e-prose {
  max-width: 70ch;
}
.gdc-lote.gdc-e-legal .gdc-e-prose ul {
  margin: 0 0 var(--esp-m);
  padding-left: 1.5em;
}
.gdc-lote.gdc-e-legal .gdc-e-prose li { margin-bottom: var(--esp-xs); }
.gdc-lote.gdc-e-legal .gdc-e-prose a {
  color: var(--gdc-or-sombre);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.gdc-lote.gdc-e-legal .gdc-e-prose a:hover,
.gdc-lote.gdc-e-legal .gdc-e-prose a:focus-visible { color: var(--gdc-noir); }
.gdc-lote.gdc-e-legal .gdc-e-prose strong { color: var(--gdc-noir); }

/* Champ que seul le client peut remplir. Volontairement visible : une mention
   légale incomplète ne doit pas passer inaperçue à la relecture. */
.gdc-lote .gdc-e-acompleter {
  padding: var(--esp-s) var(--esp-m);
  border-left: 4px solid var(--gdc-or-sombre);
  background: var(--gdc-creme);
  font-size: var(--fs-small);
}

/* ==========================================================================
   ADAPTATION AUX PETITS ÉCRANS
   Le XD ne comporte aucun écran mobile : les seuils sont dérivés de la grille.
   ========================================================================== */
@media (max-width: 900px) {
  .gdc-e-grille { grid-template-columns: 1fr; }

  .gdc-lote.gdc-e-praticien > .elementor-container { flex-direction: column; }
  .gdc-lote .gdc-e-praticien__titre .elementor-heading-title { text-align: center; }
  .gdc-lote .gdc-e-portrait img { width: min(100%, 20rem); }

  .gdc-e-article__titre { text-align: left; }
}

@media (max-width: 640px) {
  .gdc-e-carte__corps { gap: var(--esp-s); }
  .gdc-e-pagination a,
  .gdc-e-pagination span { min-width: 2.75rem; min-height: 2.75rem; }
}

/* lot-f-maillage.css */
/* ==========================================================================
   LOT F : maillage interne, bloc « Conseils et actualités » au bas des pages
   de soins.

   Le bloc réutilise la grille et la carte du lot E sans les redéfinir : seuls
   son titre, son séparateur et son lien de bas de bloc sont propres au lot.
   Chargé après lot-e.css par l'ordre alphabétique du glob de functions.php.
   ========================================================================== */

.gdc-maillage {
  border-top: 1px solid rgba(160, 114, 54, 0.25);
}

.gdc-maillage__titre {
  margin: 0 0 var(--esp-l);
  text-align: center;
}

/* Deux cartes au plus par rangée sur cette page : à trois articles, la
   troisième passe seule à la ligne. La grille du lot E reste la référence,
   on n'en change pas les colonnes. */

.gdc-maillage__tous {
  margin: var(--esp-l) 0 0;
  text-align: center;
}

.gdc-maillage__tous a {
  font-weight: 700;
  color: var(--gdc-or);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.gdc-maillage__tous a:hover,
.gdc-maillage__tous a:focus-visible {
  color: var(--gdc-or-sombre);
}

@media (max-width: 767px) {
  .gdc-maillage__titre { margin-bottom: var(--esp-m); }
  .gdc-maillage__tous  { margin-top: var(--esp-m); }
}

/* lot-g-menu-soins.css */
/* Lot G : menu des soins, une entrée par soin (30/09/2026).
   Le sous-menu « Santé Dentaire » passe de 3 à 9 entrées. En mobile, le
   panneau est ancré sous un en-tête collant et la page ne défile pas tant
   qu'il est ouvert : sans défilement propre, la fin du menu et le bouton de
   rendez-vous sortaient de l'écran, hors d'atteinte. Le panneau défile donc
   lui-même, et garde une marge sous la barre d'urgence fixée en bas. */
@media (max-width: 1100px) {
  .gdc-nav {
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--esp-l) + 4.5rem);
  }
}

/* lot-h-lien-categorie.css */
/* Lien retour d'une page de soin vers sa page catégorie, posé juste avant le
   bloc « Actualités » par inc/maillage.php. */
.gdc-maillage__retour {
  margin: 0;
  padding: var(--esp-l) clamp(1.25rem, 5.2083vw, 6.25rem);
  text-align: center;
}
.gdc-maillage__retour a {
  font-weight: 700;
  /* --gdc-or ne donne que 4,24:1 sur blanc, sous le seuil AA à 17 px :
     le ton d'aplat, indiscernable à l'œil, atteint 4,82:1. */
  color: var(--gdc-or-fond);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.gdc-maillage__retour a:hover,
.gdc-maillage__retour a:focus-visible {
  color: var(--gdc-or-sombre);
}

/* lot-i-contraste-actualites.css */
/* Lot I : contraste du lien « Toutes nos actualités » (30/09/2026).
   --gdc-or ne donne que 4,24:1 sur blanc, sous le seuil AA à cette taille.
   Le ton d'aplat, indiscernable à l'œil, atteint 4,82:1. Fichier séparé du
   lot F : les lots sont versionnés par GDC_VERSION, une modification de
   lot-f-maillage.css resterait masquée par le cache des visiteurs. */
.gdc-maillage__tous a,
.gdc-maillage__retour a {
  color: var(--gdc-or-fond);
}
.gdc-maillage__tous a:hover,
.gdc-maillage__tous a:focus-visible,
.gdc-maillage__retour a:hover,
.gdc-maillage__retour a:focus-visible {
  color: var(--gdc-or-sombre);
}

/* lot-j-pied-v5.css */
/* ==========================================================================
   LOT J : pied de page compact en quatre colonnes (30/09/2026).

   Remplace la mise en page du XD : même largeur utile que l'en-tête, pour que
   le logo du pied tombe à l'aplomb du logo du haut, hiérarchie par taille
   (téléphone et rendez-vous dominants), environ 40 % de hauteur en moins.
   Balisage : footer.php, classes gdc-pf. La classe gdc-pied reste portée pour
   le fond et la couleur de base de layout.css.

   Contrastes sur #14120E : texte à 82 % de blanc 13,9:1, intitulés en or clair
   #B98C52 6,18:1, bas de page à 65 % de blanc 8,6:1.
   ========================================================================== */

.gdc-pf {
  padding-block: clamp(3rem, 5vw, 5.5rem) 0;
  font-size: clamp(0.9375rem, 0.9vw, 1.0625rem);
  line-height: 1.6;
}

.gdc-pf__inner {
  width: 100%;
  max-width: var(--gdc-max);
  margin-inline: auto;
  /* Mêmes valeurs que .gdc-entete__inner après lot-zz : --gdc-max de
     largeur maximale et 40 / 24 / 20 px de marge, les deux logos s'alignent. */
  padding-inline: 40px;
}

.gdc-pf__grille {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  gap: clamp(2rem, 3.6vw, 4.5rem);
  align-items: start;
}

.gdc-pf__col > :first-child { margin-top: 0; }

/* --- Marque ------------------------------------------------------------- */
.gdc-pf__logo-lien { display: inline-block; }
.gdc-pf__logo {
  display: block;
  width: 200px; /* largeur du logo de l'en-tête */
  height: auto;
}
.gdc-pf__accroche {
  max-width: 30ch;
  margin: 1.25rem 0 0;
  color: rgba(255, 255, 255, .82);
}

/* --- Intitulés de colonne ---------------------------------------------- */
.gdc-pf__titre {
  margin: 0 0 1.125rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gdc-or-clair);
}

/* --- Liens ---------------------------------------------------------------- */
.gdc-pf a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color var(--gdc-transition);
}
.gdc-pf a:hover,
.gdc-pf a:focus-visible { color: var(--gdc-or-clair); }

.gdc-pf__liste {
  display: grid;
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Cabinets ------------------------------------------------------------- */
.gdc-pf__adresses {
  display: grid;
  gap: .875rem;
  margin: 0;
  font-style: normal;
  color: rgba(255, 255, 255, .82);
}
.gdc-pf__horaires {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
}
.gdc-pf__horaires-jour {
  display: block;
  color: var(--gdc-blanc);
  font-weight: 600;
}

/* --- Contact -------------------------------------------------------------- */
.gdc-pf__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.gdc-pf .gdc-pf__tel {
  font-size: clamp(1.375rem, 1.75vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gdc-blanc);
}
.gdc-pf__mail {
  margin-top: .375rem;
  /* Toujours sur une ligne : une adresse coupée ne se lit plus d'un bloc. */
  white-space: nowrap;
}
.gdc-pf__urgence {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, .82);
}
.gdc-pf__urgence span {
  display: block;
  color: var(--gdc-blanc);
  font-weight: 600;
}
.gdc-pf .gdc-pf__rdv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin-top: 1.5rem;
  padding: .75rem 1.75rem;
  border: 1px solid var(--gdc-or-clair);
  border-radius: 999px;
  font-weight: 700;
  color: var(--gdc-blanc);
  transition: background-color var(--gdc-transition), border-color var(--gdc-transition);
}
.gdc-pf .gdc-pf__rdv:hover,
.gdc-pf .gdc-pf__rdv:focus-visible {
  background: var(--gdc-or-fond);
  border-color: var(--gdc-or-fond);
  color: var(--gdc-blanc);
}

/* --- Bas de page ---------------------------------------------------------- */
.gdc-pf__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, .65);
}
.gdc-pf__mentions { margin: 0; }
.gdc-pf__liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.5rem;
}
.gdc-pf__menu {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gdc-pf__bas a,
.gdc-pf__cookies {
  color: rgba(255, 255, 255, .65);
}
.gdc-pf__cookies {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.gdc-pf__cookies:hover,
.gdc-pf__cookies:focus-visible { color: var(--gdc-or-clair); }

/* --- Tablette : deux colonnes -------------------------------------------- */
@media (max-width: 1100px) {
  .gdc-pf__inner { padding-inline: 24px; }
  .gdc-pf__grille { grid-template-columns: 1fr 1fr; }
  .gdc-pf__logo { width: 180px; }
}

/* --- Mobile : une colonne, cibles tactiles de 44 px ----------------------- */
@media (max-width: 640px) {
  .gdc-pf__inner { padding-inline: 20px; }
  .gdc-pf__logo { width: 160px; }
  .gdc-pf__grille {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  /* Soins sur deux colonnes : une seule rallongeait le pied de 300 px. */
  .gdc-pf__liste {
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }
  .gdc-pf__marque .gdc-pf__accroche { max-width: none; }
  .gdc-pf__tel,
  .gdc-pf__liste a,
  .gdc-pf__mail,
  .gdc-pf__urgence a,
  .gdc-pf__bas a,
  .gdc-pf__cookies {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .gdc-pf__bas {
    flex-direction: column;
    align-items: flex-start;
    /* Garde le bas de page au-dessus de la barre d'urgence fixée en bas. */
    padding-bottom: calc(1.25rem + 4.5rem);
  }
}

/* lot-z-relecture.css */
/* Relecture Charlène, 9 septembre 2026 : espacements et cadrages validés. */
:root { --gdc-espace-apres-hero: clamp(2rem, 3.3333vw, 4rem); }
.gdc-hero + .gdc-raisons { padding-top: var(--gdc-espace-apres-hero); }
/* L'image doit remplir toute la colonne, sans espace de ligne sous la carte. */
.gdc-carte-lieu { line-height: 0; }
.gdc-carte-lieu img { display: block; height: 100%; max-height: none; }
/* Utilise les images complètes ; le recadrage reste responsive et réversible. */
.gdc-orthodontie-recadree img { object-position: left center; }
.gdc-implant-recadre img { object-position: 90% center; }
/* Le panneau garde le bouton d'appel accessible au-dessus de lui sur mobile. */
.gdc-consent[hidden] { display: none; }
.gdc-consent { position: fixed; z-index: 1000; bottom: 0; inset-inline: 0; display: flex; align-items: center; gap: 24px; padding: 20px 32px; background: #fff; color: #14120e; border-top: 2px solid var(--gdc-or); box-shadow: 0 -4px 24px #0002; font-size: 16px; line-height: 1.5; }
.gdc-consent h2 { margin: 0 0 6px; font-size: 20px; color: #14120e; }
.gdc-consent p { margin: 0; font-size: 16px; }
.gdc-consent a { color: #725020; text-decoration: underline; }
.gdc-consent__actions { display: flex; gap: 12px; flex-shrink: 0; }
.gdc-consent button { padding: 12px 20px; min-height: 44px; border: 1px solid #725020; border-radius: 6px; color: #14120e; background: #fff; font: inherit; cursor: pointer; }
.gdc-consent button:hover { background: #f1eadf; }
.gdc-consent button:focus-visible, [data-gdc-cookie-settings]:focus-visible { outline: 3px solid #725020; outline-offset: 3px; }
[data-gdc-cookie-settings] { background: transparent; color: inherit; border: 0; padding: 8px 0; text-decoration: underline; font: inherit; cursor: pointer; }
@media(max-width: 700px) { .gdc-consent { flex-direction: column; align-items: stretch; padding: 16px; gap: 12px; max-height: 70vh; overflow-y: auto; } .gdc-consent__actions button { flex: 1; } }

/* lot-zz-proportions-20260917c.css */
/* GDC — proportions revues visuellement, 17 septembre 2026.
   Identité et composition XD conservées ; aucune mise à l'échelle globale. */
:root {
  --fs-hero: clamp(2.125rem, 3.35vw, 3.75rem);
  --fs-h1: clamp(1.875rem, 2.8vw, 2.75rem);
  --fs-h2: clamp(1.625rem, 2.4vw, 2.375rem);
  --fs-h3: clamp(1.25rem, 1.75vw, 1.625rem);
  --fs-body: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --fs-small: clamp(.9375rem, 1.1vw, 1rem);
  --esp-m: clamp(1.5rem, 2vw, 2rem);
  --esp-l: clamp(2rem, 3.3vw, 3.5rem);
  --esp-xl: clamp(3rem, 5vw, 5rem);
  --btn-h: 3.5rem;
  --btn-px: 1.75rem;
  --gdc-contenu: 1280px;
  --gdc-max: 1440px;
}
.gdc-btn { font-size: 1.125rem; gap: .75rem; line-height: 1.25; padding-block: .75rem; }
.gdc-entete__inner { min-height: 88px; padding-inline: 40px; }
.gdc-entete__logo img { width: 220px; }
.gdc-menu a { font-size: 17px; }
.gdc-nav, .gdc-menu { gap: 32px; }
.gdc-entete__cta { min-height: 46px; font-size: 17px; padding-inline: 24px; }
.gdc-hero { min-height: clamp(480px, 66svh, 660px); padding-block: 64px; }
.gdc-hero h1.elementor-heading-title { margin-bottom: 24px; }
.gdc-hero h2.elementor-heading-title { font-size: clamp(1.375rem, 2vw, 1.875rem); font-weight: 500; margin-bottom: 36px; }
.gdc-hero__actions { gap: 20px; }
.gdc-hero__actions img { width: 26px; }
.gdc-pied__logo { width: 280px; }
.gdc-raison__icone img { width: 64px; }
@media (max-width: 1100px) {
  .gdc-entete__inner { min-height: 76px; padding-inline: 24px; }
  .gdc-entete__logo img { width: 180px; }
  .gdc-nav { gap: 24px; }
}
@media (max-width: 640px) {
  .gdc-entete__inner { min-height: 70px; padding-inline: 20px; }
  .gdc-entete__logo img { width: 160px; }
  .gdc-hero { min-height: 520px; padding-block: 48px; }
  .gdc-hero h1.elementor-heading-title { line-height: 1.15; }
  .gdc-hero h2.elementor-heading-title { font-size: 21px; line-height: 1.4; margin-bottom: 28px; }
  .gdc-hero__actions { gap: 14px; }
  .gdc-hero__actions .gdc-btn { min-height: 52px; font-size: 17px; }
}
/* Les lots de soins imposaient encore des boutons de 474 px de large. */
.gdc-hero .gdc-hero__actions .gdc-btn { min-width: 0; }
.gdc-btn img { width: 26px; height: auto; }
@media (min-width: 1101px) {
  .home .elementor .elementor-section.gdc-hero { background-position: center 62% !important; }
}
/* Formulaire : même langage visuel, champs à taille de lecture. */
.elementor-section.gdc-contact__formulaire > .elementor-container { max-width: 1040px; padding-inline: 24px; }
.gdc-formulaire { --champ-retrait: 24px; }
.gdc-formulaire .fluentform .ff-el-form-control { min-height: 56px; padding-block: 14px; font-size: 17px; }
.gdc-formulaire .fluentform .ff_input-group { min-height: 56px; }
.gdc-formulaire .fluentform textarea.ff-el-form-control { min-height: 160px; }
.gdc-formulaire .fluentform .ff-btn-submit { min-width: 220px; font-size: 18px; }
#gdc-formulaire { scroll-margin-top: 110px; }
@media (max-width: 640px) {
  .elementor-section.gdc-contact__formulaire > .elementor-container { padding-inline: 20px; }
  #gdc-formulaire { scroll-margin-top: 90px; }
}

/* Seconde passe : échelle de l’ensemble du contenu, après capture Cem 12h53. */
:root {
  --gdc-contenu: 1120px;
  --gdc-max: 1280px;
  --fs-hero: clamp(2.125rem, 3vw, 3.25rem);
  --fs-h1: clamp(1.75rem, 2.3vw, 2.125rem);
  --fs-h2: clamp(1.625rem, 2vw, 2rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-body: 1.0625rem;
  --esp-m: 24px;
  --esp-l: clamp(28px, 2.5vw, 40px);
  --esp-xl: clamp(36px, 3.5vw, 56px);
  --btn-h: 50px;
}
.gdc-entete__inner { min-height: 80px; }
.gdc-entete__logo img { width: 200px; }
.gdc-hero { min-height: clamp(420px, 58svh, 560px); padding-block: 48px; }
.gdc-hero h2.elementor-heading-title { font-size: clamp(21px, 1.6vw, 26px); }
.gdc-btn { font-size: 17px; }
.gdc-bloc { padding-block: 36px; }
.gdc-bloc > .elementor-container { max-width: 1080px; gap: 56px; }
.gdc-rond img { width: min(100%, 360px); border-width: 2px; }
.gdc-bloc__titre .elementor-heading-title { margin-bottom: 20px; }
.gdc-carte { aspect-ratio: auto; height: clamp(260px, 24vw, 420px); }
.gdc-carte__label { font-size: 22px; bottom: 28px; }
.gdc-temoignage__etoiles { width: 220px; }
.gdc-temoignage__bloc { max-width: 1040px; }
.gdc-pied__logo { width: 220px; }
@media (max-width: 900px) {
  .gdc-bloc > .elementor-container { gap: 24px; }
  .gdc-rond img { width: min(100%, 300px); }
}
@media (max-width: 640px) {
  .gdc-entete__inner { min-height: 70px; }
  .gdc-entete__logo img { width: 160px; }
  .gdc-hero { min-height: 480px; }
  .gdc-bloc { padding-block: 28px; }
  .gdc-rond img { width: min(100%, 260px); }
  .gdc-carte { height: 270px; }
  .gdc-carte__label { font-size: 22px; }
}
/* Même échelle sur les hubs, fiches de soins et portrait du praticien. */
:root { --soin-visuel: 360px; }
.gdc-soin, .gdc-duo, .gdc-lotd-duo { padding-block: 36px; }
.gdc-soin > .elementor-container,
.gdc-duo > .elementor-container,
.gdc-lotd-duo > .elementor-container { max-width: 1120px; gap: 56px; align-items: center; }
.gdc-soin > .elementor-container { grid-template-columns: minmax(0,360px) minmax(0,1fr); }
.gdc-duo__media, .gdc-lotd-duo__media { flex: 0 0 360px; max-width: 360px; }
.gdc-duo__rond img, .gdc-lotd-duo__rond img,
.gdc-lote .gdc-e-portrait img { width: min(100%,360px); border-width: 2px; }
.gdc-bloc__titre .elementor-heading-title { font-size: 22px; }
.gdc-e-hero { min-height: clamp(360px,58svh,560px); }
.gdc-lotd.gdc-raisons > .elementor-container { gap: 32px; }
.gdc-lotd-cta .gdc-btn img, .gdc-btn--tel .gdc-btn__picto-tel { width: 26px; }
@media (max-width: 900px) {
  .gdc-soin > .elementor-container { grid-template-columns: minmax(0,1fr); }
  .gdc-soin > .elementor-container,
  .gdc-duo > .elementor-container,
  .gdc-lotd-duo > .elementor-container { gap: 24px; }
  .gdc-duo__media, .gdc-lotd-duo__media { flex: 0 0 auto; max-width: 100%; width: 100%; margin: 0; }
  .gdc-duo__rond img, .gdc-lotd-duo__rond img,
  .gdc-lote .gdc-e-portrait img { width: min(100%,300px); }
}
@media (max-width: 640px) {
  :root { --soin-visuel: 260px; }
  .gdc-soin, .gdc-duo, .gdc-lotd-duo { padding-block: 28px; }
  .gdc-duo__rond img, .gdc-lotd-duo__rond img,
  .gdc-lote .gdc-e-portrait img { width: min(100%,260px); }
  .gdc-lotd.gdc-raisons > .elementor-container { gap: 24px; }
}
.gdc-soin__visuel img { width: min(100%, var(--soin-visuel)); }
.gdc-temoin .gdc-temoignage__bloc { max-width: 1040px; padding-inline: var(--esp-l); }
.gdc-btn.gdc-btn img { width: 24px; height: auto; }

/* style.css */
/*
Theme Name:   Geneva Dental Clinic
Theme URI:    https://geneva-dental-clinic.ch
Description:  Thème enfant Hello Elementor pour Geneva Dental Clinic. Header, footer et gabarits blog codés ; corps des pages éditable dans Elementor. Tokens issus de la maquette XD de juillet 2026 (artboard 1920, grille 12 colonnes, marges 140).
Author:       Kairos Agency
Author URI:   https://kairos-agency.ch
Template:     hello-elementor
Version:      1.0.0
Text Domain:  gdc
*/