/* =========================================================================
   DR GHALI — CHARTE GRAPHIQUE
   Socle commun : jetons, typographie, boutons, formulaires, composants.
   Ne pas éditer depuis l'éditeur WordPress. Ce fichier fait foi.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. JETONS
   Toute couleur, toute taille du site sort d'ici. Si une valeur en dur
   apparaît ailleurs dans le CSS, c'est un oubli à corriger.
   ------------------------------------------------------------------------- */
:root {
  /* Encre — noir bleuté, jamais #000 pur (trop dur à l'écran) */
  --dg-ink:        #0E0F12;
  --dg-ink-2:      #15171C;   /* surface surélevée sur fond sombre */
  --dg-ink-3:      #1E2127;

  /* Papier — blanc cassé chaud, pierre des Alpilles */
  --dg-paper:      #F4F2ED;
  --dg-paper-2:    #E6E3DB;

  /* Accent — laiton. Le seul endroit où le site hausse la voix. */
  --dg-brass:      #B08D4F;
  --dg-brass-hi:   #D8BE8A;   /* variante lisible sur fond sombre */
  /* Variante lisible sur fond papier. Le laiton de base n'y atteint que
     2,77:1 — sous le minimum de 4,5:1 —, et les intertitres qu'il colore
     font 10 px en capitales espacées : c'est précisément la taille où un
     contraste faible se paie. Même teinte, 25 % de clarté en moins,
     4,57:1. Mesuré le 11 septembre 2026 sur le bandeau rendez-vous. */
  --dg-brass-dk:   #846A3B;

  /* Gris — biaisés vers l'accent, jamais neutres purs */
  --dg-mute-d:     #8B8E96;   /* texte secondaire sur fond sombre */
  --dg-mute-l:     #6B665C;   /* texte secondaire sur fond clair */

  /* Filets */
  --dg-line-d:     rgba(255,255,255,.14);
  --dg-line-l:     rgba(14,15,18,.16);

  /* Familles */
  --dg-sans:  "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --dg-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Échelle typographique — fluide, pas de paliers brutaux */
  --dg-t-h1:  clamp(2.5rem, 6.2vw, 5.25rem);
  --dg-t-h2:  clamp(1.85rem, 3.5vw, 3rem);
  --dg-t-h3:  clamp(1.25rem, 1.8vw, 1.5rem);
  --dg-t-h4:  1.1875rem;
  --dg-t-body: 1rem;
  --dg-t-lede: clamp(1.1875rem, 1.7vw, 1.4375rem);   /* 19 → 23 px */
  --dg-t-small: .9375rem;   /* 15 px, plus 14 */
  --dg-t-label: .6875rem;

  /* Rythme vertical et gouttières */
  --dg-gut:   clamp(20px, 4.4vw, 64px);
  --dg-max:   1440px;
  --dg-sec:   clamp(72px, 9vw, 132px);  /* respiration entre sections */

  /* Mouvement */
  --dg-ease:  cubic-bezier(.2,.7,.25,1);
  --dg-fast:  .28s;
  --dg-slow:  .55s;
}

/* -------------------------------------------------------------------------
   2. TYPOGRAPHIE
   ------------------------------------------------------------------------- */
/* Fond du document en encre, pas body : les pages pas encore refondues
   gardent leur zone de contenu blanche, et la bande sous le pied de page
   cesse d'être blanche. Un seul endroit à changer le jour où tout est refait. */
html { background: var(--dg-ink); }

/* Le menu Header & Footer Builder laisse déborder ses flèches de sous-menu
   de 44 px sous 1080 px : toute la page glisse alors latéralement. Défaut
   préexistant, présent aussi sur les anciennes pages. On contient au niveau
   du document plutôt que de bricoler le balisage du plugin. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  font-family: var(--dg-sans);
  font-size: var(--dg-t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--dg-sans);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-wrap: balance;
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: var(--dg-t-h1); letter-spacing: -.042em; line-height: 1.02; }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: var(--dg-t-h2); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: var(--dg-t-h3); letter-spacing: -.02em; line-height: 1.2; }
h4, .elementor-widget-heading h4.elementor-heading-title { font-size: var(--dg-t-h4); letter-spacing: -.02em; }

/* Corps éditorial : le serif ne sert QUE aux passages de lecture longue.
   Jamais pour l'interface, jamais pour les listes techniques. */
.dg-prose {
  font-family: var(--dg-serif);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 65ch;
}
.dg-prose > * + * { margin-top: 1.05rem; }
.dg-prose strong { font-weight: 400; }

/* Chapeau d'introduction */
.dg-lede {
  font-family: var(--dg-serif);
  font-weight: 300;
  font-size: var(--dg-t-lede);
  line-height: 1.62;
  max-width: 52ch;
}

/* Sur-titre : petite capitale espacée, toujours en laiton */
.dg-eyebrow {
  font-size: var(--dg-t-label);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dg-brass);
  margin: 0;
}
.dg-on-dark .dg-eyebrow { color: var(--dg-brass-hi); }

/* -------------------------------------------------------------------------
   3. BOUTONS — rectangulaires, sans exception.
   Le `!important` sur le rayon est délibéré : Elementor écrit une règle
   par widget avec une spécificité qu'on ne peut pas battre autrement.
   C'est le seul endroit du fichier où il est autorisé.
   ------------------------------------------------------------------------- */
.elementor-button,
.wp-block-button__link,
.button,
button,
input[type="submit"],
.dg-btn {
  display: inline-flex;
  align-items: center;
  gap: .85em;
  padding: 1.0625rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 0 !important;
  font-family: var(--dg-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dg-fast) ease,
              color var(--dg-fast) ease,
              border-color var(--dg-fast) ease;
}

/* Flèche : glisse au survol. Ajouter <span class="dg-ar">&#8594;</span> */
.dg-ar { transition: transform var(--dg-fast) ease; }
.elementor-button:hover .dg-ar,
.dg-btn:hover .dg-ar { transform: translateX(5px); }

/* Variantes.
   Deux sélecteurs par variante, et c'est nécessaire : dans Elementor la
   classe atterrit sur le CONTENEUR du widget, pas sur le lien. Sans la
   version descendante, la couleur ne touche jamais le bouton.

   Chaque variante redéclare aussi l'épaisseur du trait. Le réglage global
   du site (`.elementor-kit-308 .elementor-button`) pose `border-width: 0`
   avec une spécificité que la règle de base, elle, n'a pas : les boutons
   fantômes n'avaient donc AUCUN contour, et « 04 12 37 74 00 » passait
   pour du texte brut au lieu d'un bouton. Constaté le 11 septembre 2026
   sur la page contact. */
/* Le conteneur du widget est exclu : lui poser un trait dessinait un
   deuxième rectangle vide à côté du bouton. Seul le lien porte le contour. */
.dg-btn--brass .elementor-button,
.dg-btn--ghost .elementor-button,
.dg-btn--ink .elementor-button {
  border-style: solid;
  border-width: 1px;
}
.dg-btn--brass,
.dg-btn--brass .elementor-button {
  background: var(--dg-brass); color: var(--dg-ink); border-color: var(--dg-brass);
}
.dg-btn--brass:hover,
.dg-btn--brass .elementor-button:hover {
  background: var(--dg-brass-hi); color: var(--dg-ink); border-color: var(--dg-brass-hi);
}

.dg-btn--ghost,
.dg-btn--ghost .elementor-button {
  background: transparent; border-color: rgba(255,255,255,.42); color: #fff;
}
.dg-btn--ghost:hover,
.dg-btn--ghost .elementor-button:hover {
  background: #fff; color: var(--dg-ink); border-color: #fff;
}

.dg-btn--ink,
.dg-btn--ink .elementor-button {
  background: transparent; border-color: var(--dg-line-l); color: var(--dg-ink);
}
.dg-btn--ink:hover,
.dg-btn--ink .elementor-button:hover {
  background: var(--dg-ink); color: var(--dg-paper); border-color: var(--dg-ink);
}

/* Boutons côte à côte. Dans Elementor, chaque widget est un élément flex
   d'une colonne en `flex-direction: column` : sans cette règle, deux
   boutons s'empilent sur toute la largeur au lieu de s'aligner. */
.dg-cta-el {
  width: auto !important;
  flex: 0 0 auto !important;
  margin-right: 14px;
  margin-top: 1.6rem;
}
.dg-cta-el .elementor-button-wrapper { display: inline-flex; }

/* -------------------------------------------------------------------------
   4. LIENS ET ACCESSIBILITÉ
   ------------------------------------------------------------------------- */
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }

:focus-visible {
  outline: 2px solid var(--dg-brass-hi);
  outline-offset: 3px;
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   5. FORMULAIRES
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  border-radius: 0;
  border: 1px solid var(--dg-line-l);
  padding: .95rem 1rem;
  font-family: var(--dg-sans);
  font-size: .9375rem;
  background: transparent;
  transition: border-color var(--dg-fast) ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--dg-brass); }

/* -------------------------------------------------------------------------
   6. COMPOSANTS
   Classes réutilisées par les gabarits Elementor. Les nommer ici plutôt
   que de styler dans chaque widget évite la dérive : une tuile se
   comporte pareil partout, et une correction se fait en un seul endroit.
   ------------------------------------------------------------------------- */

/* --- Surfaces --- */
.dg-on-dark  { background: var(--dg-ink);   color: #fff; }
.dg-on-light { background: var(--dg-paper); color: var(--dg-ink); }

/* --- Grille de tuiles : filets 1px, aucun arrondi, aucune ombre --- */
.dg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--dg-line-d);
  border-left: 1px solid var(--dg-line-d);
}

.dg-tile {
  display: flex;
  flex-direction: column;
  background: var(--dg-ink);
  border-right: 1px solid var(--dg-line-d);
  border-bottom: 1px solid var(--dg-line-d);
  transition: background .3s ease;
}
.dg-tile:hover { background: var(--dg-ink-2); }

.dg-tile__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.dg-tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Désaturé au repos, couleur au survol : cadre le regard sur le texte
     tant qu'on parcourt, récompense l'intention quand on s'arrête. */
  filter: saturate(.6) contrast(1.08) brightness(.9);
  transition: filter var(--dg-slow) ease, transform .75s var(--dg-ease);
}
.dg-tile:hover .dg-tile__media img {
  filter: saturate(1) contrast(1.02) brightness(1);
  transform: scale(1.045);
}

.dg-tile__body {
  padding: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;
}
.dg-tile__body p { font-size: var(--dg-t-small); line-height: 1.55; color: var(--dg-mute-d); }

.dg-tile__more {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: var(--dg-t-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dg-brass-hi);
  display: flex;
  align-items: center;
  gap: .6em;
}

/* --- Liste à filets : remplace les puces, plus net et plus lisible --- */
.dg-list { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--dg-line-d); }
.dg-list li {
  position: relative;
  padding: .95rem 0 .95rem 1.6rem;
  border-bottom: 1px solid var(--dg-line-d);
  font-size: .9375rem;
  line-height: 1.55;
}
.dg-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.42rem;
  width: 8px; height: 1px;
  background: var(--dg-brass);
}
.dg-on-light .dg-list,
.dg-on-light .dg-list li { border-color: var(--dg-line-l); }

/* --- Fiche technique (pages soin) ---
   Ciblée par classes et non par balises : Elementor n'émet que des <div>,
   jamais de <dl>/<dt>/<dd>. Un composant stylé sur les balises casserait
   dès qu'il est construit dans l'éditeur. Règle valable partout ici. */
.dg-spec {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--dg-ink-2);
}
.dg-spec > * {
  padding: clamp(22px,2.6vw,34px) clamp(16px,2vw,30px);
  border-left: 1px solid var(--dg-line-d);
}
.dg-spec > *:first-child { border-left: 0; padding-left: 0; }

.dg-spec__label {
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dg-brass);
  margin: 0 0 .7rem;
}
.dg-spec__value {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.4;
  color: #fff;
}

/* Variante Elementor : à poser sur une SECTION dont chaque colonne est
   une cellule. On ne met pas de grid ici — les colonnes Elementor sont
   déjà en flex, et un grid sur la section écraserait tout dans une seule
   cellule (le seul enfant direct est .elementor-container). */
.dg-spec-el { background: var(--dg-ink-2); }
.dg-spec-el .elementor-column > .elementor-widget-wrap {
  padding: clamp(22px,2.6vw,34px) clamp(16px,2vw,30px);
  border-left: 1px solid var(--dg-line-d);
}
.dg-spec-el .elementor-column:first-child > .elementor-widget-wrap {
  border-left: 0;
  padding-left: 0;
}
.dg-spec-el .dg-spec__label { margin-bottom: .2rem; }

/* --- Chiffres alignés : tarifs, dates, pourcentages --- */
.dg-num { font-variant-numeric: tabular-nums; }

/* --- Débordement : aucun tableau ne doit élargir la page --- */
/* Ancien tarif barré : gris, plus petit, jamais confondu avec le prix en vigueur. */
.dg-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -------------------------------------------------------------------------
   6 bis. SECTIONS DE PAGE — variantes Elementor
   Suffixe -el = à poser sur une SECTION Elementor. On ne met jamais de
   `display:grid` sur la section : son unique enfant direct est
   .elementor-container, et tout finirait dans une seule cellule.
   ------------------------------------------------------------------------- */

/* --- Bandeau sombre générique --- */
.dg-sec-el { background: var(--dg-ink); color: #fff; }
.dg-sec-el h1, .dg-sec-el h2, .dg-sec-el h3,
.dg-sec-el .elementor-heading-title { color: #fff; }

/* --- Section claire --- */
.dg-sec-light-el { background: var(--dg-paper); color: var(--dg-ink); }
.dg-sec-light-el .elementor-heading-title { color: var(--dg-ink); }

/* --- Sur-titre --- */
.dg-eyebrow-el .elementor-heading-title {
  font-size: var(--dg-t-label);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dg-brass-hi);
}
.dg-sec-light-el .dg-eyebrow-el .elementor-heading-title { color: var(--dg-brass-dk); }

/* --- Titres de section --- */
.dg-h1-el .elementor-heading-title { font-size: var(--dg-t-h1); letter-spacing: -.042em; line-height: 1.02; }
.dg-h2-el .elementor-heading-title { font-size: var(--dg-t-h2); letter-spacing: -.03em; line-height: 1.05; }

/* --- Chapeau éditorial --- */
.dg-lede-el, .dg-lede-el p {
  font-family: var(--dg-serif);
  font-weight: 300;
  font-size: var(--dg-t-lede);
  line-height: 1.62;
  max-width: 56ch;
}

/* Corps de lecture.
   `max-width` est la règle la plus importante du fichier : sans elle, la
   ligne courait sur 1090 px, soit 134 signes. L'œil décroche au-delà de
   ~75 signes — il ne retrouve plus le début de la ligne suivante. */
/* Newsreader a une hauteur d'x basse : à taille égale il paraît plus
   petit qu'un sans-serif. 18 px donnait une lecture « pattes de mouche ».
   19 à 21 px selon la largeur d'écran remet le texte à sa juste échelle. */
.dg-prose-el, .dg-prose-el p {
  font-family: var(--dg-serif);
  font-size: clamp(1.1875rem, .55vw + .95rem, 1.4375rem);   /* 19 → 23 px */
  line-height: 1.72;
  /* 62ch ≈ 74 signes avec ce serif : dans la plage 65-75 où l'œil
     retrouve la ligne suivante sans effort. Mesuré, pas estimé. */
  max-width: 62ch;
}
.dg-prose-el p + p { margin-top: 1.05rem; }

/* Sur fond sombre, un serif maigre « fond » : les déliés disparaissent
   (effet d'irradiation). D'où une graisse et un contraste supérieurs
   à ce qu'on utilise sur fond clair, où le 300 tient très bien. */
.dg-sec-el .dg-prose-el,
.dg-sec-el .dg-prose-el p       { color: rgba(255,255,255,.92); font-weight: 400; }
.dg-sec-light-el .dg-prose-el,
.dg-sec-light-el .dg-prose-el p { color: #2A2822; font-weight: 300; }

/* --- Respiration des sections : par classe, jamais widget par widget --- */
.dg-pad-el    { padding-block: var(--dg-sec); }
.dg-pad-sm-el { padding-block: clamp(34px,4vw,54px); }
.dg-pad-0-el  { padding-block: 0; }
/* En-tête de section : respire au-dessus, se resserre au-dessus du contenu
   qu'elle introduit (grille de soins, cartes du journal). */
.dg-pad-head-el { padding-block: var(--dg-sec) clamp(30px,4vw,52px); }

/* --- Héros : image de fond + voile --- */
.dg-hero-el {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: min(88vh, 880px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(48px,9vw,110px) clamp(38px,5vw,64px);
}
.dg-hero-el::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,15,18,.72) 0%, rgba(14,15,18,.18) 34%, rgba(14,15,18,.55) 66%, rgba(14,15,18,.94) 100%),
    linear-gradient(96deg, rgba(14,15,18,.78) 0%, rgba(14,15,18,.1) 62%);
  pointer-events: none;
}
.dg-hero-el > .elementor-container { position: relative; z-index: 2; }
.dg-hero-el .elementor-heading-title,
.dg-hero-el .dg-lede-el { color: #fff; }

/* --- Bandeau de trois informations pratiques --- */
.dg-strip-el { background: var(--dg-ink); border-top: 1px solid var(--dg-line-d); }
.dg-strip-el .elementor-column > .elementor-widget-wrap {
  padding: clamp(26px,3.4vw,42px) clamp(20px,3vw,48px);
  border-left: 1px solid var(--dg-line-d);
}
.dg-strip-el .elementor-column:first-child > .elementor-widget-wrap { border-left: 0; padding-left: 0; }
.dg-strip__label .elementor-heading-title {
  font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dg-brass);
}
/* La couleur ne peut PAS être figée ici : ce composant sert aussi bien
   sur fond encre (bandeau d'accueil) que sur fond papier (bloc rendez-vous).
   Un `color:#fff` en dur donnait du blanc sur crème, illisible. */
.dg-strip__value .elementor-heading-title {
  font-size: clamp(1rem,1.5vw,1.25rem); font-weight: 500; letter-spacing: -.018em; line-height: 1.35;
}
.dg-sec-el .dg-strip__value .elementor-heading-title       { color: #fff; }
.dg-sec-light-el .dg-strip__value .elementor-heading-title { color: var(--dg-ink); }
.dg-sec-light-el .dg-strip__label .elementor-heading-title { color: var(--dg-brass-dk); }
.dg-sec-light-el .dg-strip__note,
.dg-sec-light-el .dg-strip__note p                          { color: var(--dg-mute-l); }
.dg-strip__note, .dg-strip__note p { font-size: .8125rem; color: var(--dg-mute-d); }

/* --- Grille de soins : 8 colonnes qui passent à la ligne --- */
.dg-soins-el { background: var(--dg-ink); }
.dg-soins-el > .elementor-container {
  flex-wrap: wrap;
  border-top: 1px solid var(--dg-line-d);
  border-left: 1px solid var(--dg-line-d);
}
.dg-soins-el .elementor-column { border-right: 1px solid var(--dg-line-d); border-bottom: 1px solid var(--dg-line-d); }
.dg-soins-el .elementor-column > .elementor-widget-wrap { padding: 0; transition: background .3s ease; }
.dg-soins-el .elementor-column:hover > .elementor-widget-wrap { background: var(--dg-ink-2); }

.dg-soins-el .elementor-widget-image { margin: 0 !important; }
.dg-soins-el .elementor-widget-image img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  filter: saturate(.6) contrast(1.08) brightness(.9);
  transition: filter var(--dg-slow) ease, transform .75s var(--dg-ease);
}
.dg-soins-el .elementor-column:hover .elementor-widget-image img {
  filter: saturate(1) contrast(1.02) brightness(1);
  transform: scale(1.045);
}
/* --- Plan d'accès ---
   Google Maps ne se laisse pas habiller : le fond clair de la carte est
   dans l'iframe. On se contente de l'encadrer du même filet que les
   photos, pour qu'il se lise comme un élément posé sur la page et non
   comme un trou dedans. */
.dg-map-el iframe,
.dg-map-el .elementor-custom-embed { border: 1px solid var(--dg-line-d); }

/* --- Titres dont la casse doit survivre ---
   Le réglage global d'Elementor (kit 308) force `text-transform: lowercase`
   sur tous les h1–h4 et rend une majuscule à la première lettre. Sur une
   phrase française l'effet est nul, et sur les titres saisis EN CAPITALES
   dans le contenu d'origine il est même utile : il les empêche de crier.
   Mais il détruit les noms propres — « Laser CO2 » devenait « Laser co2 »,
   « Radiesse » devenait « radiesse », « Dr Othman Ghali » devenait
   « Dr othman ghali ». Plutôt que de désactiver le réglage partout, on pose
   cette exception sur les seuls titres concernés (voir casse_titres.py).
   `::first-letter` doit être neutralisé lui aussi : c'est lui qui rendait
   la majuscule initiale, et il forcerait « CO2 » sur un titre commençant
   par une minuscule. */
.dg-nom .elementor-heading-title,
.dg-nom.elementor-heading-title { text-transform: none !important; }
.dg-nom .elementor-heading-title::first-letter,
.dg-nom.elementor-heading-title::first-letter { text-transform: none !important; }

/* `text-transform: lowercase` traîne ailleurs dans le site et écrasait la
   casse : « Dr Othman Ghali » s'affichait « Dr othman ghali ». Nos titres
   sont déjà écrits dans la bonne casse, on rend la main au contenu. */
.dg-tile-title .elementor-heading-title {
  font-size: 1.1875rem; letter-spacing: -.02em; line-height: 1.2; color: #fff;
  text-transform: none;
  padding: clamp(18px,2vw,26px) clamp(18px,2vw,26px) .5rem;
}
.dg-tile-text, .dg-tile-text p {
  font-size: .9375rem; line-height: 1.6; color: var(--dg-mute-d);
}
.dg-tile-text { padding: 0 clamp(18px,2vw,26px) clamp(20px,2vw,28px); }

/* Tuile sans photo.
   L'aplat reprend EXACTEMENT le rapport 4/3 de l'image qu'il remplace :
   sans ça, les tuiles sans photo sont plus courtes et les titres ne
   s'alignent plus d'une colonne à l'autre — le rythme de la grille casse. */
.dg-tile-plain .elementor-widget-wrap { background: var(--dg-ink-2); }
.dg-tile-rule .elementor-heading-title {
  display: block;
  aspect-ratio: 4/3;
  background: var(--dg-ink-3);
  font-size: 0;
  position: relative;
  overflow: hidden;
}
.dg-tile-rule .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: clamp(18px,2vw,26px);
  bottom: clamp(18px,2vw,26px);
  width: 56px; height: 2px;
  background: var(--dg-brass);
}

/* --- Page de soin : héros plus court que celui de l'accueil --- */
.dg-phero-el {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: min(58vh, 560px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(90px,11vw,150px) clamp(30px,4vw,52px);
}
.dg-phero-el::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,15,18,.8) 0%, rgba(14,15,18,.3) 38%, rgba(14,15,18,.92) 100%),
    linear-gradient(94deg, rgba(14,15,18,.8) 0%, rgba(14,15,18,.06) 68%);
  pointer-events: none;
}
.dg-phero-el > .elementor-container { position: relative; z-index: 2; }
.dg-phero-el .elementor-heading-title { color: #fff; }

/* Fil d'Ariane */
.dg-crumb .elementor-heading-title {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dg-mute-d);
  font-weight: 500;
}

/* --- Corps rédactionnel d'une page de soin --- */
/* Sur un écran de 2000 px, une colonne de texte calée à gauche laisse la
   moitié droite vide : la page paraît cassée. La colonne devient la mesure
   et se centre ; titres et paragraphes s'alignent alors sur le même axe. */
/* Largeur de la colonne ET taille du texte progressent ensemble.
   Élargir seul rallongerait les lignes ; grossir seul serrerait le texte.
   En faisant varier les deux, le nombre de signes par ligne reste stable
   de 390 px à 2560 px. Sur mobile, la colonne prend toute la largeur
   disponible moins la gouttière : comportement standard, inchangé. */
.dg-article-el {
  max-width: clamp(700px, 58vw, 880px);
  margin-inline: auto;
}
.dg-article-el .dg-prose-el,
.dg-article-el .dg-prose-el p { max-width: 100%; }

.dg-article-el .elementor-widget-heading + .elementor-widget-text-editor { margin-top: .4rem; }
.dg-article-el .dg-h2-el { margin-top: clamp(28px,3.4vw,46px); }
.dg-article-el .dg-h2-el:first-child { margin-top: 0; }

/* --- Intertitres de troisième niveau ---
   Le contenu d'origine énumérait « 1. Résultats visibles », « 2. Sécurité
   et confort »… en simples paragraphes : ces sous-titres se noyaient dans
   la prose. Le générateur leur rend leur rôle ; ici on leur donne leur
   allure. 23 sur l'ensemble des pages. --- */
.dg-prose-el .dg-sous-titre {
  font-family: var(--dg-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: none;
  margin: 2.2em 0 .55em;
}
.dg-prose-el .dg-sous-titre:first-child { margin-top: 0; }
.dg-sec-light-el .dg-prose-el .dg-sous-titre { color: var(--dg-ink); }

/* --- Questions fréquentes (accordéon Elementor) --- */
.dg-faq-el { max-width: clamp(760px, 60vw, 940px); margin-inline: auto; }
.dg-faq-el .elementor-tab-content { max-width: 100%; }
.dg-faq-el .elementor-accordion .elementor-accordion-item {
  border: 0;
  border-top: 1px solid var(--dg-line-d);
  background: transparent;
}
.dg-faq-el .elementor-accordion .elementor-accordion-item:last-child {
  border-bottom: 1px solid var(--dg-line-d);
}
.dg-faq-el .elementor-tab-title {
  background: transparent !important;
  border: 0 !important;
  padding: 1.35rem 2.5rem 1.35rem 0;
}
.dg-faq-el .elementor-tab-title a,
.dg-faq-el .elementor-tab-title .elementor-accordion-title {
  color: #fff !important;
  font-family: var(--dg-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.4;
}
.dg-faq-el .elementor-accordion-icon { color: var(--dg-brass) !important; }
.dg-faq-el .elementor-tab-content {
  background: transparent !important;
  border: 0 !important;
  padding: 0 2.5rem 1.6rem 0;
  color: rgba(255,255,255,.82);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 68ch;
}

/* --- Vidéo : cadre net, aucun arrondi, filet fin --- */
.dg-video-el .elementor-wrapper,
.dg-video-el video,
.dg-video-el iframe {
  border-radius: 0 !important;
  border: 1px solid var(--dg-line-d);
  max-width: 900px;
}
.dg-video-el { margin-top: 1.4rem; max-width: clamp(760px, 60vw, 940px); margin-inline: auto; }

/* --- Cadrage des vidéos verticales ---
   Les vidéos du cabinet sont tournées au téléphone, à la verticale, avec
   titre et légendes incrustés en haut et en bas. Elementor les affichait
   dans un cadre 16:9 (et carré sur la page équipe anglaise) en
   `object-fit: cover` : la vidéo remplissait bien le cadre, mais on n'en
   voyait qu'une bande centrale de **32 %**. Tout le texte incrusté passait
   à la trappe — mesuré : titre entre 1 et 13 % de la hauteur, légendes
   entre 79 et 99 %.

   Essais successifs : 4:5 puis 9:16 (le format natif, qui montre tout).
   **Othy tranche pour le 16:9 d'origine** — le paysage, comme avant. Il
   assume que la bande centrale ne montre que 32 % de l'image verticale et
   que les textes incrustés restent hors cadre : ces mentions ne servent que
   sur Instagram, et l'allure de la page prime.
   Pour changer d'avis : 0.5625 = vertical intégral, 0.8 = 4:5.

   Le ratio vient d'une variable Elementor. Elle est posée par une feuille
   écrite PAR PAGE (`post-11628.css`) avec un sélecteur du type
   `.elementor-11628 .elementor-element.elementor-element-60d93f1d`, plus
   spécifique que tout ce qu'on peut écrire sans viser ces identifiants —
   qui changent à chaque enregistrement. D'où le `!important`, comme pour
   l'en-tête et le journal.

   Pas de bride de largeur en 16:9 : le lecteur reprend toute la colonne,
   comme avant. C'est le format vertical qui imposait de la brider, faute de
   quoi le bloc dépassait la hauteur d'un écran. */
.elementor-widget-video .e-hosted-video,
.elementor-widget-video .elementor-wrapper {
  --video-aspect-ratio: 1.77777 !important;
  aspect-ratio: 16 / 9 !important;
  margin-inline: auto;
  border: 1px solid var(--dg-line-d);
}
.elementor-widget-video .e-hosted-video video { width: 100%; height: 100%; }

/* --- Plein écran : l'image entière, pas la bande centrale ---
   Dans la page, le cadre 16:9 rogne la vidéo verticale — c'est le choix
   assumé. Mais en plein écran il n'y a plus de contrainte de mise en page :
   le `cover` n'a plus aucune raison d'être et priverait le visiteur des
   titres et légendes incrustés. On repasse en `contain`, l'image entière
   s'affiche, avec des bandes noires sur les côtés. Le bouton plein écran
   du lecteur devient ainsi le moyen de tout voir. */
video:fullscreen,
video:-webkit-full-screen {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* --- Signature médicale (E-E-A-T + déontologie) ---
   Portrait à gauche, identité à droite. Les widgets d'une colonne Elementor
   s'empilent par défaut : d'où le passage en ligne et la largeur figée de
   l'image, sinon le portrait prendrait toute la largeur du bloc. */
/* Grille plutôt que ligne : en flex, le portrait, le nom et la mention
   se partageaient la largeur et « Dr Othman Ghali » passait sur deux lignes.
   Ici le portrait occupe la colonne de gauche sur toute la hauteur, le nom
   et la mention s'empilent à droite. */
.dg-author-el .elementor-widget-wrap {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-areas: "photo nom" "photo mention";
  column-gap: 1.3rem;
  row-gap: .35rem;
  align-content: center;
}
.dg-author-el .elementor-widget-image {
  grid-area: photo;
  align-self: center;
  width: 88px;
  margin: 0 !important;
}
.dg-author-el .elementor-widget-heading { grid-area: nom; align-self: end; }
.dg-author-el .elementor-widget-text-editor { grid-area: mention; align-self: start; }
.dg-author-el .elementor-widget-heading .elementor-heading-title { white-space: nowrap; }
.dg-author-el .elementor-widget-image img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(.85) contrast(1.03);
}
.dg-author-el .elementor-widget-heading,
.dg-author-el .elementor-widget-text-editor { flex: 1 1 auto; width: auto; }

@media (max-width: 620px) {
  /* Sur mobile la colonne de texte devient trop étroite : le portrait
     passe au-dessus et le bloc se lit en une seule colonne. */
  .dg-author-el .elementor-widget-wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "nom" "mention";
    row-gap: .8rem;
  }
}

/* --- Portraits d'équipe : la légende reste lisible, pas de survol coloré --- */
.dg-equipe-el .elementor-widget-image img { aspect-ratio: 4/5; }

/* Portrait au fil du texte (page équipe, sections « Votre médecin » et
   « Votre infirmière »). Sans contrainte, la photo garde son 3/2 d'origine
   et cadre le visage à ras bord en laissant un grand vide sous elle, à
   côté d'une colonne de texte deux fois plus haute. Même rapport 4/5 que
   les vignettes de la grille, et un cadrage remonté : sur ces prises de
   vue le visage est dans le tiers supérieur. */
.dg-portrait img {
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 22%;
  width: 100%;
  border: 1px solid var(--dg-line-d);
}
.dg-equipe-el .elementor-column:hover .elementor-widget-image img { transform: none; }
.dg-equipe-el .dg-tile-text, .dg-equipe-el .dg-tile-text p { color: var(--dg-brass-hi); }

.dg-author-el {
  max-width: clamp(760px, 60vw, 940px);
  margin-inline: auto;
  border: 1px solid var(--dg-line-d);
  padding: clamp(22px,2.4vw,30px);
  margin-top: clamp(32px,4vw,52px);
}
.dg-author-el .elementor-heading-title { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.dg-author-el .elementor-widget-text-editor,
.dg-author-el .elementor-widget-text-editor p { font-size: .8125rem; color: var(--dg-mute-d); line-height: 1.55; }

/* --- Mise en évidence des données chiffrées ---
   Un jaune franc sur fond encre serait criard. Un lavis de laiton avec un
   trait plein dessous donne le même repère à l'œil, dans la charte.
   Ne surlignent que des FAITS mesurables — durées, nombres de séances,
   pourcentages, prix — jamais une promesse de résultat. */
.dg-cle {
  background: rgba(216,190,138,.15);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--dg-brass);
  padding: .06em .28em;
  border-radius: 0;
  font-weight: 500;
  white-space: nowrap;
}
.dg-sec-light-el .dg-cle {
  background: rgba(176,141,79,.18);
  color: var(--dg-ink);
  box-shadow: inset 0 -2px 0 var(--dg-brass);
}

/* --- Variante « phrase » ---
   Une donnée chiffrée ne doit jamais se couper en fin de ligne : « 30 à 45 »
   d'un côté, « minutes » de l'autre, on perd l'information d'un coup d'œil.
   D'où le `nowrap` ci-dessus. Mais une contre-indication fait une ligne
   entière : la garder insécable la ferait déborder de la colonne. Elle
   revient donc au retour à la ligne normal, et le filet laiton se poursuit
   d'une ligne à l'autre. */
.dg-cle--phrase {
  white-space: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Sur un lecteur d'écran, <mark> annonce déjà l'emphase : rien à ajouter. */

/* --- Grille tarifaire ---
   Reconstruite en HTML simple pour remplacer le widget « liste de prix »
   d'Elementor Pro, dont l'abonnement est expiré : le jour où Pro sera
   retiré, ces grilles continueront de fonctionner. */
.dg-prices {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--dg-line-d);
}
.dg-prices li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--dg-line-d);
  font-size: 1rem;
  line-height: 1.4;
}
.dg-prices li > span { color: rgba(255,255,255,.88); }
.dg-prices li > b {
  font-weight: 500;
  color: var(--dg-brass-hi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Le filet pointillé relie l'acte à son prix sans alourdir la ligne. */
.dg-prices li::before {
  content: "";
  flex: 1 1 auto;
  order: 1;
  border-bottom: 1px dotted var(--dg-line-d);
  transform: translateY(-.3em);
}
.dg-prices li > b { order: 2; }

.dg-prices-el { max-width: clamp(760px, 60vw, 940px); margin-inline: auto; }
.dg-prices-zone .elementor-heading-title {
  font-size: 1.25rem;
  letter-spacing: -.02em;
  color: #fff;
  margin-top: clamp(28px,3vw,44px);
}

/* --- Tableau (forfaits, comparatifs) ---
   Enveloppé dans .dg-scroll-x : un tableau large ne doit jamais faire
   glisser la page entière, il défile dans sa propre boîte. */
.dg-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.dg-table th,
.dg-table td {
  padding: .8rem 1rem .8rem 0;
  border-bottom: 1px solid var(--dg-line-d);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}
.dg-table th {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dg-brass);
  font-weight: 500;
  border-bottom-color: var(--dg-brass);
}
.dg-table td { color: rgba(255,255,255,.88); }

/* Colonnes de montants.
   La première colonne nomme l'acte, TOUTES les suivantes portent des prix :
   on les aligne à droite, en-tête comprise. Seule la dernière l'était, si
   bien que sur la page épilation laser femmes — deux colonnes — le titre
   « PRIX PAR SÉANCE » restait à gauche pendant que les montants filaient à
   droite. Les chiffres tabulaires alignent les unités entre les lignes. */
.dg-table th:not(:first-child),
.dg-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dg-table th:last-child,
.dg-table td:last-child { padding-right: 0; }
.dg-table td:not(:first-child) { color: var(--dg-brass-hi); }
/* Ancien tarif barré : gris, plus petit, jamais confondu avec le prix en vigueur. */
/* Ancien prix.
   `color` doit l'emporter sur celle de la colonne, sinon l'ancien prix
   s'affiche en laiton comme le nouveau et rien ne les distingue à part une
   fine rature. `text-decoration-thickness` : à cette taille, le trait par
   défaut est presque invisible sur fond sombre. */
.dg-table del, .dg-prices del {
  color: var(--dg-mute-d) !important;
  text-decoration: line-through;
  text-decoration-thickness: .09em;
  font-size: .875em;
  font-style: normal;
  margin-right: .45em;
}
.dg-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Bandeau presse --- */
.dg-press-el { background: var(--dg-ink); border-top: 1px solid var(--dg-line-d); border-bottom: 1px solid var(--dg-line-d); }
.dg-press__label .elementor-heading-title { font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dg-mute-d); }
.dg-press__name .elementor-heading-title { font-size: clamp(1.0625rem,2vw,1.5rem); font-weight: 500; letter-spacing: -.02em; color: rgba(255,255,255,.72); }

/* --- Cartes du journal --- */
.dg-journal-el > .elementor-container { border: 1px solid var(--dg-line-d); }
.dg-journal-el .elementor-column { border-left: 1px solid var(--dg-line-d); }
.dg-journal-el .elementor-column:first-child { border-left: 0; }
.dg-journal-el .elementor-column > .elementor-widget-wrap { padding: clamp(24px,2.6vw,38px); }
.dg-date .elementor-heading-title { font-size: .6875rem; letter-spacing: .16em; color: var(--dg-brass); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   6 ter. EN-TÊTE ET PIED DE PAGE
   Construits avec Header & Footer Builder, donc pas régénérables depuis
   nos gabarits : on les habille par CSS plutôt que de les reconstruire,
   ce qui préserve le menu, les sous-menus et le sélecteur Polylang.

   Les identifiants ci-dessous sont ceux des modèles HFE en place.
   Si l'en-tête ou le pied de page est un jour reconstruit, ils changent
   et ce bloc est à remettre à jour — c'est la contrepartie assumée.
     f6d25ff = barre du haut (téléphone / Doctolib)
     c9438eb = barre de navigation
     7cb0588 = widget logo
     74768b2 = pied de page
   ------------------------------------------------------------------------- */

/* --- Barre du haut ---
   `f6d25ff` est la barre française, `5046dd98` la barre anglaise :
   deux modèles distincts dans Header & Footer Builder. --- */
.elementor-element-f6d25ff,
.elementor-element-5046dd98 {
  background: var(--dg-ink) !important;
  border-bottom: 1px solid var(--dg-line-d);
}
.elementor-element-5046dd98 .elementor-heading-title,
.elementor-element-5046dd98 a { color: var(--dg-brass-hi) !important; }
.elementor-element-f6d25ff .elementor-heading-title,
.elementor-element-f6d25ff a {
  color: var(--dg-brass-hi) !important;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.elementor-element-f6d25ff a:hover { color: #fff !important; }

/* --- Barre de navigation ---
   `c9438eb` en français, `9e98cc1` en anglais.

   DÉFAUT GRAVE ET ANTÉRIEUR, corrigé ici (2026-09-10, constaté à l'œil et
   vérifié feuille désactivée) : la barre anglaise n'avait AUCUN fond, alors
   que ses liens sont blancs. Le menu anglais était donc **entièrement
   invisible** — blanc sur blanc — sur les 34 pages du site anglais. Seul le
   soulignement laiton de l'onglet actif trahissait sa présence. */
.elementor-element-c9438eb,
.elementor-element-9e98cc1 {
  background: var(--dg-ink) !important;
  border-bottom: 1px solid var(--dg-line-d);
}

/* Logo : la version en médiathèque est sombre, illisible sur l'encre.
   On masque l'image et on affiche la version blanche déjà utilisée dans
   le pied de page. Pas de nouveau fichier, pas de doublon à maintenir. */
.elementor-element-7cb0588 .elementor-widget-container {
  background: url("/wp-content/uploads/2023/03/5-300x300.png") left center / contain no-repeat;
}
.elementor-element-7cb0588 img { opacity: 0; }

/* --- Menu --- */
.hfe-nav-menu .menu-item a.hfe-menu-item,
.hfe-nav-menu .menu-item a.hfe-sub-menu-item {
  color: rgba(255,255,255,.88) !important;
  font-family: var(--dg-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item {
  color: #fff !important;
  border-bottom-color: var(--dg-brass);
}

/* --- EN-TÊTE DE BUREAU : plus bas, menu lisible, toujours à portée -------
   Refait le 15 septembre 2026 sur trois griefs d'Othy, tous exacts :
   « le header prend toute la place », « les écritures sont riquiqui », et
   « l'image d'accueil est mangée par le header ».

   MESURES AVANT : en-tête 169 px (bandeau 41 + barre 128), menu à 11 px,
   H1 à 563 px du haut. APRÈS : 124 px au repos, 92 px une fois qu'on fait
   défiler, menu à 13 px, H1 à 518 px — et l'en-tête reste visible.

   OÙ SONT PASSÉS LES PIXELS DU MENU. Il n'y avait pas de place pour
   agrandir le texte : les huit entrées demandaient déjà 889 px dans une
   colonne de 836. Mais les deux colonnes voisines — logo et sélecteur de
   langue — faisaient 127 px chacune pour un contenu de 70. Les 114 px
   qu'on leur reprend sont exactement ce qui manquait.

   TOUT EST BORNÉ À `min-width: 1081px`. Le menu mobile vient d'être réparé
   (fond blanc sur blanc, thème 1.8.0) et Othy l'a validé sur son téléphone ;
   je ne peux pas émuler un vrai viewport mobile depuis ici, donc je n'y
   touche pas. Ce qui marche, on n'y revient pas sans pouvoir le vérifier. */
@media (min-width: 1081px) {
  .elementor-element-5f30ada,
  .elementor-element-5bbef70 { width: 70px !important; }
  .elementor-element-524483d { width: calc(100% - 150px) !important; }
  .elementor-element-524483d .elementor-widget-container {
    padding-inline: 0 !important;
  }

  .hfe-nav-menu__layout-horizontal .hfe-nav-menu { flex-wrap: nowrap !important; }
  /* Fluide plutôt que fixe : 11 px à 1081 px de large, 13 px sur un écran
     de portable courant, 14 px au-delà. Une taille fixe à 13 px tenait sur
     l'écran d'Othy et débordait sur un 1100 px. */
  .hfe-nav-menu .menu-item a.hfe-menu-item {
    font-size: clamp(.6875rem, 1.02vw, .875rem) !important;
    letter-spacing: clamp(.03em, .05vw, .05em) !important;
    padding-inline: clamp(.34rem, .4vw, .5rem) !important;
    padding-block: .5rem !important;
    white-space: nowrap;
  }

  .elementor-element-f6d25ff { padding-block: 4px !important; }
  .elementor-element-c9438eb { padding-block: 10px !important; }

  /* CE QUI EMPÊCHAIT `sticky` DE FONCTIONNER, et c'est instructif.
     GeneratePress pose `overflow-x: hidden` sur `html` et sur `body`. Or
     `hidden` crée un CONTENEUR DE DÉFILEMENT : un élément collant s'y
     accroche au lieu de s'accrocher à la fenêtre, et comme ce conteneur-là
     ne défile pas, l'en-tête ne bougeait tout simplement pas — il
     disparaissait vers le haut comme avant, sans le moindre message
     d'erreur. `clip` clippe exactement pareil SANS créer de conteneur.
     Il faut poser `overflow-y: visible` avec, sinon la règle de calcul de
     CSS retransforme `clip` en `hidden` dès que l'autre axe défile. */
  html, body { overflow-x: clip; overflow-y: visible; }

  /* L'en-tête suit le défilement. Sans ça, sur les pages longues — une
     fiche de soin fait 3 000 px — il faut remonter tout en haut pour
     changer de page. `z-index: 99` passe sous la barre d'administration
     de WordPress (99 999) et au-dessus du contenu. */
  .ehf-header #masthead {
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--dg-ink);
  }
  /* `.ehf-header` est une classe posée SUR le <body>, pas un conteneur :
     `body.admin-bar .ehf-header` ne désigne donc rien. Vu en mesurant —
     l'en-tête se glissait sous la barre d'administration. */
  body.admin-bar #masthead { top: 32px; }

  /* Rétracté, il ne CACHE rien : ni le téléphone, ni le bouton Doctolib.
     Tout se resserre. Sur un site de cabinet, escamoter le numéro pour
     gagner trente pixels serait un mauvais échange. */
  .elementor-element-f6d25ff,
  .elementor-element-c9438eb { transition: padding .25s ease; }
  .elementor-element-7cb0588,
  .elementor-element-7cb0588 img { transition: height .25s ease; }

  html.dg-entete-compacte .elementor-element-f6d25ff { padding-block: 2px !important; }
  html.dg-entete-compacte .elementor-element-c9438eb { padding-block: 5px !important; }
  html.dg-entete-compacte .elementor-element-7cb0588,
  html.dg-entete-compacte .elementor-element-7cb0588 img { height: 46px !important; }

  /* Une ancre ne doit pas se caler sous l'en-tête devenu fixe. */
  html { scroll-padding-top: 140px; }
}

/* Sous-menus : même encre, filet fin, aucun arrondi */
.hfe-nav-menu ul.sub-menu {
  background: var(--dg-ink-2) !important;
  border: 1px solid var(--dg-line-d);
  border-radius: 0 !important;
  box-shadow: none !important;
}
.hfe-nav-menu ul.sub-menu li a.hfe-sub-menu-item {
  letter-spacing: .06em;
  text-transform: none;
  font-size: .8125rem;
  border-bottom: 0;
  padding-block: .7rem;
}
.hfe-nav-menu ul.sub-menu li a.hfe-sub-menu-item:hover {
  background: var(--dg-ink-3) !important;
  color: var(--dg-brass-hi) !important;
}

/* Bouton hamburger sur mobile */
.hfe-nav-menu__toggle .hfe-nav-menu-icon svg,
.hfe-nav-menu__toggle { color: #fff !important; fill: #fff !important; }

/* --- Pied de page --- */
.elementor-element-74768b2 {
  background: var(--dg-ink) !important;
  border-top: 1px solid var(--dg-line-d);
  /* Le modèle d'origine réservait beaucoup de vide sous la carte. */
  padding-block: clamp(30px,3.6vw,48px) !important;
}
.elementor-element-74768b2 .elementor-widget-wrap { align-content: flex-start; }
.elementor-element-74768b2 .elementor-widget:last-child { margin-bottom: 0; }
.elementor-element-74768b2 .elementor-heading-title { color: #fff; }
.elementor-element-74768b2,
.elementor-element-74768b2 p,
.elementor-element-74768b2 .elementor-icon-list-text {
  color: var(--dg-mute-d);
  font-size: .875rem;
  line-height: 1.6;
}
.elementor-element-74768b2 a { color: rgba(255,255,255,.76); transition: color .2s ease; }
.elementor-element-74768b2 a:hover { color: var(--dg-brass-hi); }

/* --- Rattrapage : une ligne du pied était invisible ---
   « Tenues médicales premium : vestiairemedical.fr » sortait en
   RVB 16-14-37 sur un fond 24-22-43 : contraste 1,07, illisible, et cela
   sur TOUTES les pages du site. La couleur venait d'un réglage posé par
   Elementor sur ce widget précis, plus spécifique que le bloc ci-dessus.
   On s'accroche donc au pied de page du thème (`footer#colophon`), qui ne
   dépend d'aucun identifiant de modèle, et on force. --- */
footer#colophon .elementor-icon-list-text {
  color: var(--dg-mute-d) !important;
}
footer#colophon a .elementor-icon-list-text {
  color: rgba(255,255,255,.76) !important;
}
footer#colophon a:hover .elementor-icon-list-text {
  color: var(--dg-brass-hi) !important;
}

/* La carte est un bloc lourd et coloré au milieu d'une charte sobre :
   on la désature au repos, elle reprend ses couleurs au survol. */
.elementor-element-74768b2 .elementor-widget-google_maps iframe {
  filter: saturate(.25) contrast(1.05) brightness(.85);
  transition: filter var(--dg-slow) ease;
  border: 1px solid var(--dg-line-d);
}
.elementor-element-74768b2 .elementor-widget-google_maps:hover iframe {
  filter: saturate(1) contrast(1) brightness(1);
}

/* -------------------------------------------------------------------------
   7. LE JOURNAL — 477 articles

   Les articles ne passent pas par le thème : ils sont rendus par un modèle
   « single » du constructeur de thème Elementor (n° 761). On ne le
   reconstruit pas — il porte le fil des commentaires, les articles liés et
   le partage, qui fonctionnent. On l'habille.

   Trois défauts constatés le 2026-09-09, antérieurs à cette charte
   (mesurés feuille désactivée, donc pas de mon fait) :
     · le titre H1 est NOIR sur une bande NOIRE — invisible sur les 477 ;
     · le corps mélange quatre polices (Prata, DM Sans, Lato, Heebo) de 16
       à 36 px, sur toute la largeur : environ 150 signes par ligne ;
     · le bandeau « Prenez rendez-vous » est en blanc sur fond blanc.

   Le `!important` est ici la règle et non l'exception : Elementor écrit une
   feuille par élément, du type `.elementor-761 .elementor-element-abc123`,
   plus spécifique que tout ce qu'on peut écrire sans cibler des
   identifiants qui changent à chaque enregistrement du modèle.
   ------------------------------------------------------------------------- */

/* --- Le fond redevient l'encre du site, y compris la bande blanche du
       corps d'article, qui coupait la page en deux.

       Les fonds gris clair (#f5f5f5) ne sont pas tous portés par la section :
       le modèle en pose aussi sur des colonnes et sur le cadre des
       commentaires. Ils formaient des îlots blancs au milieu de l'encre, et
       le titre « Postez un commentaire », blanc, y devenait invisible. --- */
body.single-post,
body.single-post .elementor-location-single > .elementor-section,
body.single-post .elementor-location-single > .elementor-section > .elementor-container,
body.single-post .elementor-location-single .elementor-widget-wrap.elementor-element-populated,
body.single-post .elementor-widget-post-comments > .elementor-widget-container,
body.single-post .elementor-widget-share-buttons > .elementor-widget-container {
  background-color: var(--dg-ink) !important;
}

/* --- Titre --- */
body.single-post .elementor-widget-theme-post-title .elementor-heading-title {
  font-family: var(--dg-sans) !important;
  font-weight: 600 !important;
  font-size: clamp(2.125rem, 3.4vw, 3.5rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
  color: #fff !important;
  text-transform: none !important;
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
}
body.single-post .elementor-widget-theme-post-title { padding-block: clamp(2.5rem, 5vw, 5rem) .5rem; }

/* --- Image à la une : cadrage constant, désaturée au repos comme partout
       ailleurs sur le site. Sans rapport fixe, les articles sans image
       laissaient une bande noire de 550 px. --- */
body.single-post .elementor-widget-theme-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter .5s ease;
  border-radius: 0 !important;
}
body.single-post .elementor-widget-theme-post-featured-image img:hover { filter: none; }

/* --- Date et signature --- */
body.single-post .elementor-widget-post-info .elementor-icon-list-text,
body.single-post .elementor-widget-post-info a {
  font-family: var(--dg-sans) !important;
  font-size: .75rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--dg-mute-d) !important;
}
body.single-post .elementor-widget-post-info { padding-block: 1.5rem 2.5rem; }
body.single-post .elementor-widget-post-info .elementor-icon-list-icon svg,
body.single-post .elementor-widget-post-info .elementor-icon-list-icon i { color: var(--dg-brass) !important; }

/* --- Corps de l'article ---
       La colonne mesurée : 62 signes, centrée. C'est le seul réglage qui
       change vraiment la lisibilité des 477 articles. --- */
body.single-post .elementor-widget-theme-post-content .elementor-widget-container {
  max-width: 62ch;
  margin-inline: auto;
}
body.single-post .elementor-widget-theme-post-content p,
body.single-post .elementor-widget-theme-post-content li {
  font-family: var(--dg-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.1875rem, .55vw + .95rem, 1.4375rem) !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,.92) !important;
  margin-block: 0 1.1em;
}
body.single-post .elementor-widget-theme-post-content h2,
body.single-post .elementor-widget-theme-post-content h3,
body.single-post .elementor-widget-theme-post-content h4 {
  font-family: var(--dg-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
  text-transform: none !important;
  margin-block: 2.4em .6em;
}
body.single-post .elementor-widget-theme-post-content h2 { font-size: clamp(1.5rem, 2.1vw, 2.125rem) !important; line-height: 1.14 !important; }
body.single-post .elementor-widget-theme-post-content h3 { font-size: clamp(1.1875rem, 1.3vw, 1.375rem) !important; line-height: 1.2 !important; }
body.single-post .elementor-widget-theme-post-content h4 { font-size: 1.0625rem !important; }
body.single-post .elementor-widget-theme-post-content strong { color: #fff !important; font-weight: 600 !important; }
body.single-post .elementor-widget-theme-post-content a {
  color: var(--dg-brass-hi) !important;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(216,190,138,.45);
}
body.single-post .elementor-widget-theme-post-content a:hover { text-decoration-color: var(--dg-brass-hi); }

/* --- Le bouton « Prenez rendez-vous » des articles ---
       C'est un lien habillé en ligne (fond #537dd0, texte blanc, coins
       arrondis de 5 px). Ma règle de couleur de lien lui prenait son blanc
       et le laissait en laiton sur bleu : illisible. Plutôt que de
       l'exclure, on le remet dans la charte. Le sélecteur vise l'attribut
       `style` : ces liens n'ont aucune classe. --- */
body.single-post .elementor-widget-theme-post-content a[style*="background-color"] {
  background: var(--dg-brass) !important;
  color: var(--dg-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--dg-sans) !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: .95em 1.6em !important;
  max-width: none !important;
  width: fit-content;
  margin-inline: auto !important;
  transition: background-color .3s ease;
}
body.single-post .elementor-widget-theme-post-content a[style*="background-color"]:hover {
  background: var(--dg-brass-hi) !important;
}
body.single-post .elementor-widget-theme-post-content ul,
body.single-post .elementor-widget-theme-post-content ol { padding-left: 1.15em; margin-block: 0 1.4em; }
body.single-post .elementor-widget-theme-post-content li::marker { color: var(--dg-brass); }
/* Les puces héritent de l'interligne des paragraphes : sans ce rappel, une
   liste de cinq points occupe un écran entier. */
body.single-post .elementor-widget-theme-post-content li { margin-block: 0 .45em; }

/* `width: 100%` sur les images gonflait aussi les logos posés au fil du
   texte — le bouton Doctolib du bandeau de rendez-vous, notamment.
   `max-width` laisse les petites images à leur taille. */
body.single-post .elementor-widget-theme-post-content img {
  max-width: 100%; height: auto; border-radius: 0 !important;
}
body.single-post .elementor-widget-theme-post-content p > img,
body.single-post .elementor-widget-theme-post-content figure img { margin-block: 1.6em; }
body.single-post .elementor-widget-theme-post-content blockquote {
  border-left: 2px solid var(--dg-brass);
  padding-left: 1.2em; margin: 2em 0; font-style: normal;
}

/* --- Tableaux dans les articles ---
       Ils arrivent avec des styles en ligne pensés pour un fond blanc
       (filets #e5e7eb) : sur l'encre, ils disparaissaient. --- */
body.single-post .elementor-widget-theme-post-content table {
  width: 100% !important;
  border-collapse: collapse;
  font-family: var(--dg-sans);
  font-size: .9375rem;
  margin-block: 2em;
  display: block;
  overflow-x: auto;
}
body.single-post .elementor-widget-theme-post-content th,
body.single-post .elementor-widget-theme-post-content td {
  border-bottom: 1px solid var(--dg-line-d) !important;
  color: rgba(255,255,255,.9) !important;
  padding: 12px 14px !important;
  text-align: left;
}
body.single-post .elementor-widget-theme-post-content th {
  color: var(--dg-brass-hi) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .1em;
}

/* --- Bandeau « Prenez rendez-vous » ---
       Bloc maison présent dans les articles, écrit en blanc : il attendait
       un fond sombre et se retrouvait sur du blanc. --- */
body.single-post .appointment-banner {
  background: var(--dg-ink-2);
  border: 1px solid var(--dg-line-d);
  border-left: 2px solid var(--dg-brass);
  padding: 1.4rem 1.6rem;
  margin-block: 2em;
  /* Le bloc héritait du centrage de la colonne : la phrase se cassait de
     part et d'autre du bouton Doctolib posé au milieu. */
  text-align: left !important;
}
body.single-post .appointment-banner p {
  font-family: var(--dg-sans) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.92) !important;
  margin: 0;
  text-align: left !important;
}
body.single-post .appointment-banner img {
  display: inline-block;
  vertical-align: middle;
  max-height: 1.6em;
  width: auto;
  margin: 0 .3em;
}

/* --- Boutons de partage : ils étaient posés en noir sur le gris clair du
       modèle. Le fond repassant à l'encre, il faut aussi les repeindre. --- */
body.single-post .elementor-share-buttons .elementor-share-btn,
body.single-post .elementor-share-buttons .elementor-share-btn__title,
body.single-post .elementor-share-buttons .elementor-share-btn__icon {
  color: rgba(255,255,255,.85) !important;
  border-radius: 0 !important;
}
body.single-post .elementor-share-buttons .elementor-share-btn:hover,
body.single-post .elementor-share-buttons .elementor-share-btn:hover .elementor-share-btn__icon {
  color: var(--dg-brass-hi) !important;
}

/* --- Sur-titres des blocs de bas de page (Blog / Articles liés /
       Commentaire) : même hiérarchie que sur les pages de soin. --- */
body.single-post .elementor-widget-heading .elementor-heading-title {
  font-family: var(--dg-sans) !important;
  color: #fff !important;
  text-transform: none !important;
}

/* --- Articles liés et grille du journal (widget « posts » et « loop grid »,
       ce dernier sert aussi la page /rubriques/) --- */
.elementor-widget-posts .elementor-post,
.elementor-widget-loop-grid .elementor-post {
  background: transparent;
  border: 1px solid var(--dg-line-d);
  border-radius: 0 !important;
  padding: 1.4rem 1.5rem 1.6rem;
  transition: border-color .3s ease, background-color .3s ease;
}
.elementor-widget-posts .elementor-post:hover,
.elementor-widget-loop-grid .elementor-post:hover {
  border-color: var(--dg-brass);
  background: var(--dg-ink-2);
}
.elementor-widget-posts .elementor-post__title,
.elementor-widget-posts .elementor-post__title a,
.elementor-widget-loop-grid .elementor-post__title,
.elementor-widget-loop-grid .elementor-post__title a {
  font-family: var(--dg-sans) !important;
  font-weight: 600 !important;
  font-size: 1.0625rem !important;
  line-height: 1.24 !important;
  letter-spacing: -.02em !important;
  color: #fff !important;
  text-transform: none !important;
}
.elementor-widget-posts .elementor-post__meta-data,
.elementor-widget-loop-grid .elementor-post__meta-data {
  font-family: var(--dg-sans) !important;
  font-size: .6875rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--dg-mute-d) !important;
}
.elementor-widget-posts .elementor-post__thumbnail img,
.elementor-widget-loop-grid .elementor-post__thumbnail img {
  border-radius: 0 !important;
  filter: grayscale(1);
  transition: filter .5s ease;
}
.elementor-widget-posts .elementor-post:hover .elementor-post__thumbnail img,
.elementor-widget-loop-grid .elementor-post:hover .elementor-post__thumbnail img { filter: none; }

/* --- La seconde famille d'articles ---
       Sur un échantillon de 45 articles : 41 passent par le modèle « single »
       traité ci-dessus, 4 sont composés directement dans Elementor en mode
       « canvas » (le corps vit dans des widgets « éditeur de texte », il n'y
       a pas de widget de contenu d'article). Environ un article sur dix.
       Mêmes symptômes : titre noir sur fond encre, texte sur toute la largeur.

       Ces pages portent leur propre en-tête et pied de page : on écarte les
       sections qui contiennent la carte, le menu, un formulaire ou une liste
       à icônes, sinon le pied de page passerait lui aussi en Newsreader.
       `:has()` n'est pas compris par les très vieux navigateurs — la règle y
       est simplement ignorée, l'article reste tel qu'il est aujourd'hui. --- */
body.single-post.elementor-template-canvas h1,
body.single-post.elementor-template-canvas h2,
body.single-post.elementor-template-canvas h3 {
  font-family: var(--dg-sans) !important;
  color: #fff !important;
  letter-spacing: -.03em !important;
  text-transform: none !important;
}

body.single-post.elementor-template-canvas
  .elementor-section:not(:has(.elementor-widget-google_maps)):not(:has(.hfe-nav-menu)):not(:has(.elementor-widget-form)):not(:has(.elementor-widget-icon-list))
  .elementor-widget-text-editor > .elementor-widget-container {
  max-width: 62ch;
  margin-inline: auto;
}
body.single-post.elementor-template-canvas
  .elementor-section:not(:has(.elementor-widget-google_maps)):not(:has(.hfe-nav-menu)):not(:has(.elementor-widget-form)):not(:has(.elementor-widget-icon-list))
  .elementor-widget-text-editor :is(p, li) {
  font-family: var(--dg-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.1875rem, .55vw + .95rem, 1.4375rem) !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,.92) !important;
}

/* --- La troisième famille : les articles rendus par le thème ---
       Quelques articles ne passent par aucun modèle Elementor : c'est
       GeneratePress qui les affiche (`.inside-article` / `.entry-content`),
       avec un titre `.entry-title` noir — invisible sur l'encre, comme les
       deux autres familles. Ces sélecteurs ne dépendent d'aucun
       identifiant : ce sont ceux du thème, ils ne bougeront pas. --- */
body.single-post .inside-article,
body.single-post .content-area,
body.single-post .site-content { background: transparent; }
body.single-post .entry-title,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4 {
  font-family: var(--dg-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
  text-transform: none !important;
}
body.single-post .entry-title { font-size: clamp(2.125rem, 3.4vw, 3.5rem) !important; line-height: 1.06 !important; }
body.single-post .entry-content { max-width: 62ch; margin-inline: auto; }
body.single-post .entry-content :is(p, li) {
  font-family: var(--dg-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.1875rem, .55vw + .95rem, 1.4375rem) !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,.92) !important;
}
body.single-post .entry-content a { color: var(--dg-brass-hi) !important; }
body.single-post .entry-meta,
body.single-post .entry-meta a {
  font-family: var(--dg-sans) !important;
  font-size: .75rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--dg-mute-d) !important;
}

/* --- Encadré « biographie de l'auteur » (extension awac) ---
       Posé en noir : il attendait le fond blanc d'origine. --- */
body.single-post .author-bio,
body.single-post .author-bio :is(p, li, span, a, h2, h3, h4) {
  color: rgba(255,255,255,.9) !important;
}
body.single-post .author-bio a { color: var(--dg-brass-hi) !important; }
body.single-post .author-bio {
  border: 1px solid var(--dg-line-d);
  border-left: 2px solid var(--dg-brass);
  padding: 1.4rem 1.6rem;
  margin-block: 2.5em;
}

/* --- La liste du journal : /rubriques/ ---
       C'est la page que vise le lien « Blog » du menu. Elle n'utilise pas
       les cartes `.elementor-post` mais une grille de boucle : chaque
       vignette est un mini-modèle Elementor (`e-loop-item`) dont le titre
       est un H6. Le fond de la page était resté blanc, les deux titres
       gris très clair dessus — à peine lisibles.
       Le sélecteur porte l'identifiant de la page, comme pour l'en-tête :
       si la page est refaite, ce bloc est à reprendre. --- */
body.page-id-2434,
body.page-id-2434 .elementor-section,
body.page-id-2434 .elementor-widget-wrap.elementor-element-populated,
body.page-id-6277,
body.page-id-6277 .elementor-section,
body.page-id-6277 .elementor-widget-wrap.elementor-element-populated {
  background-color: var(--dg-ink) !important;
}
body.page-id-2434 .elementor-widget-heading .elementor-heading-title,
body.page-id-6277 .elementor-widget-heading .elementor-heading-title {
  font-family: var(--dg-sans) !important;
  color: #fff !important;
}

/* La vignette porte son propre fond encre. Sans cela, elle dépend de la
   couleur de la page qui l'accueille : sur /en/our-sections/ — la liste du
   journal en anglais, que j'avais oubliée — les titres blancs se
   retrouvaient sur du blanc. Un fond propre rend la carte lisible partout
   où on la pose, sans dépendre d'un identifiant de page. */
.e-loop-item {
  background: var(--dg-ink);
  border: 1px solid var(--dg-line-d);
  padding: 1.5rem 1.5rem 1.7rem;
  transition: border-color .3s ease, background-color .3s ease;
}
.e-loop-item:hover { border-color: var(--dg-brass); background: var(--dg-ink-2); }
.e-loop-item .elementor-heading-title {
  font-family: var(--dg-sans) !important;
  font-weight: 600 !important;
  font-size: 1.0625rem !important;
  line-height: 1.26 !important;
  letter-spacing: -.02em !important;
  color: #fff !important;
  text-transform: none !important;
  text-align: left !important;
}
.e-loop-item .elementor-icon-list-item,
.e-loop-item .elementor-icon-list-text,
.e-loop-item .elementor-icon-list-item a {
  font-family: var(--dg-sans) !important;
  font-size: .6875rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--dg-mute-d) !important;
}
.e-loop-item .elementor-icon-list-icon svg,
.e-loop-item .elementor-icon-list-icon i { color: var(--dg-brass) !important; }
.e-loop-item .elementor-widget-wrap { align-content: start; }

/* Pagination du journal */
.elementor-pagination .page-numbers {
  font-family: var(--dg-sans);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--dg-mute-d);
  padding: .4em .7em;
  border-radius: 0 !important;
}
.elementor-pagination .page-numbers.current,
.elementor-pagination .page-numbers:hover { color: var(--dg-brass-hi); }

/* --- Commentaires : on les laisse fonctionner, on les calme. --- */
body.single-post .elementor-widget-post-comments,
body.single-post .elementor-widget-post-comments p,
body.single-post .elementor-widget-post-comments label { color: rgba(255,255,255,.85) !important; }
body.single-post .elementor-widget-post-comments input[type=text],
body.single-post .elementor-widget-post-comments input[type=email],
body.single-post .elementor-widget-post-comments input[type=url],
body.single-post .elementor-widget-post-comments textarea {
  background: var(--dg-ink-2) !important;
  border: 1px solid var(--dg-line-d) !important;
  color: #fff !important;
  border-radius: 0 !important;
}
body.single-post .elementor-widget-post-comments .comment-reply-title,
body.single-post .elementor-widget-post-comments .comments-title {
  font-family: var(--dg-sans) !important; color: #fff !important;
}

/* -------------------------------------------------------------------------
   8. RUPTURES
   Alignées sur les points de rupture Elementor (voir la fiche de réglages).
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .dg-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-spec { grid-template-columns: repeat(2, 1fr); }
  .dg-spec > div { border-left: 0; border-top: 1px solid var(--dg-line-d); padding-left: 0; }
}

@media (max-width: 1080px) {

  /* ---- Gouttière latérale ----
     Elementor ne met aucun rembourrage horizontal sur ses conteneurs :
     sous 1080 px le texte venait toucher le bord de l'écran. La grille
     de soins reste volontairement de bord à bord. */
  .dg-sec-el > .elementor-container,
  .dg-sec-light-el > .elementor-container { padding-inline: var(--dg-gut); }
  .dg-soins-el > .elementor-container     { padding-inline: 0; }

  /* ---- Menu déroulant mobile ----
     Le panneau ouvert par le bouton hamburger a un fond BLANC imposé par
     Header & Footer Builder. Nos liens étant blancs (corrects sur la barre
     encre du bureau), le menu s'ouvrait blanc sur blanc : invisible.
     On repeint le panneau en encre plutôt que d'assombrir les liens.

     CORRECTIF DU 15 SEPTEMBRE 2026, signalé par Othy sur son téléphone.
     Ma première version repeignait le panneau, les entrées de premier
     niveau et le conteneur `ul.sub-menu` — mais PAS les liens à l'intérieur
     des sous-menus, qui portent une autre classe (`a.hfe-sub-menu-item`).
     HFE leur applique son fond blanc, posé PAR-DESSUS le panneau assombri :
     au bureau on ne voyait rien, puisque les sous-menus s'y ouvrent en
     survol avec un autre habillage. Sur mobile, déplier « Vos besoins »
     donnait cinq lignes blanches vides.
     Leçon : repeindre un conteneur ne suffit jamais, il faut descendre
     jusqu'à l'élément qui porte réellement la couleur. */
  .hfe-nav-menu,
  .hfe-nav-menu .menu-item,
  .hfe-nav-menu .menu-item a.hfe-menu-item,
  .hfe-nav-menu ul.sub-menu,
  .hfe-nav-menu ul.sub-menu li,
  .hfe-nav-menu ul.sub-menu li a.hfe-sub-menu-item { background: var(--dg-ink) !important; }

  /* La couleur du texte, explicitement : ne jamais compter sur l'héritage
     quand une extension pose ses propres règles au même endroit. */
  .hfe-nav-menu .menu-item a.hfe-menu-item,
  .hfe-nav-menu ul.sub-menu li a.hfe-sub-menu-item { color: #fff !important; }

  .hfe-nav-menu .menu-item { border-bottom: 1px solid var(--dg-line-d); }
  .hfe-nav-menu .menu-item a.hfe-menu-item {
    padding: 1rem 1.25rem !important;
    font-size: .8125rem !important;
    letter-spacing: .1em !important;
    border-bottom: 0;
  }

  /* Un sous-menu doit se lire comme un sous-menu : légèrement plus clair,
     décalé vers la droite, et en casse normale — pas en capitales comme
     les entrées de premier niveau. */
  .hfe-nav-menu ul.sub-menu li a.hfe-sub-menu-item {
    background: var(--dg-ink-2) !important;
    padding: .85rem 1.25rem .85rem 2.5rem !important;
    font-size: .8125rem !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
  }
  .hfe-nav-menu ul.sub-menu li { border-bottom: 1px solid var(--dg-line-d); }
  .hfe-nav-menu ul.sub-menu li:last-child { border-bottom: 0; }

  /* Colonnes empilées : le filet passe de la gauche au-dessus, sinon on
     obtient un trait vertical orphelin le long de chaque cellule. */
  .dg-strip-el .elementor-column > .elementor-widget-wrap,
  .dg-spec-el  .elementor-column > .elementor-widget-wrap {
    border-left: 0;
    border-top: 1px solid var(--dg-line-d);
    padding-left: 0;
  }
  .dg-strip-el .elementor-column:first-child > .elementor-widget-wrap,
  .dg-spec-el  .elementor-column:first-child > .elementor-widget-wrap {
    border-top: 0;
  }
  .dg-journal-el .elementor-column { border-left: 0; border-top: 1px solid var(--dg-line-d); }
  .dg-journal-el .elementor-column:first-child { border-top: 0; }
}

@media (max-width: 1080px) {
  /* Journal : Elementor ne met pas de gouttière ici non plus. */
  body.single-post .elementor-location-single > .elementor-section > .elementor-container {
    padding-inline: var(--dg-gut);
  }
  body.single-post .elementor-widget-theme-post-title .elementor-heading-title { max-width: none; }
}

@media (max-width: 620px) {
  /* Journal sur mobile : la gouttière générale laissait 303 px de colonne
     sur un écran de 390, soit 32 signes par ligne — trop court, la lecture
     hache. La section porte déjà 16 px de rembourrage propres à Elementor :
     on n'en rajoute donc quasiment pas, et on retrouve 36 à 38 signes. */
  body.single-post .elementor-location-single > .elementor-section > .elementor-container {
    padding-inline: 4px;
  }
  body.single-post .entry-content { max-width: none; }
  .e-loop-item { padding: 1.2rem 1.2rem 1.4rem; }

  /* Soins sur mobile : cadrage portrait, titre seul.
     Les colonnes passent à 50 % via les réglages responsives du gabarit
     (_inline_size_mobile), pas ici — Elementor écrit ses propres largeurs. */
  .dg-soins-el .elementor-widget-image img,
  .dg-tile-rule .elementor-heading-title { aspect-ratio: 3/4; }
  .dg-tile-title .elementor-heading-title { font-size: .9375rem; padding: 14px 14px 18px; }
  .dg-tile-text { display: none; }

  /* Soins sur mobile : 2 colonnes, cadrage portrait, titre seul.
     Mesuré sur iPhone 390x844 — 8 tuiles passent de 4,0 à 1,4 écran.
     Ne pas repasser en 1 colonne : la section redevient interminable. */
  .dg-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-tile__media { aspect-ratio: 3/4; }
  .dg-tile__body { padding: 14px 14px 18px; gap: 0; }
  .dg-tile__body h3 { font-size: .9375rem; }
  .dg-tile__body p,
  .dg-tile__more { display: none; }

  .dg-spec { grid-template-columns: 1fr; }
}