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