/* 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); }