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