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