/* ============================================================
   LEADHUBFLO — habillage d'un site remonté dont le CSS est perdu
   Cas : nutrition-pedagogie.fr (média nutrition)

   🚨 POURQUOI UN DESIGN ET PAS UNE RESTITUTION. Vérifié sur les 188 captures
      de `/wp-content/` : 37 feuilles CSS archivées, toutes des plugins ou le
      thème `healing-touch` — ZÉRO feuille d'Elementor, et aucun CSS « par
      page » (celui que l'éditeur génère et qui porte couleurs, espacements et
      typographies). Le design d'origine n'existe nulle part. Le thème
      `healing-touch`, lui, est complet — mais son époque ne couvre que 29 des
      109 URLs : rebâtir dessus perdrait 80 pages.

   🚨 ON HABILLE LE BALISAGE EXISTANT, ON NE LE RÉÉCRIT PAS. Toutes les règles
      s'accrochent à des classes réellement présentes (`elementor-location-header`,
      `entry-content`, `entry-title`, classes de <body>…). Aucune ne suppose une
      structure qu'on aurait souhaitée.

   ⚠ Dernier <link> du <head> : il passe APRÈS le thème Astra, qui reste
     maître de ce qu'il habille déjà correctement.
   ============================================================ */

:root {
  --feuille:   #5f8f4e;
  --feuille-f: #3c5c31;
  --ambre:     #c47f12;
  --encre:     #1c2a21;
  --gris:      #5f6f64;
  --trait:     #e2e8e0;
  --papier:    #ffffff;
  --lavis:     #f5f8f3;
  --mesure:    68ch;
  --pile: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ─── Fond et typographie de base ───────────────────────────── */
body { background: var(--papier); }
.elementor, .entry-content, .ast-container, .site-main {
  font-family: var(--pile);
  color: var(--encre);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.elementor h1, .elementor h2, .elementor h3, .elementor h4,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.entry-title, .elementor-heading-title {
  font-family: var(--pile);
  color: var(--encre);
  line-height: 1.22;
  letter-spacing: -.012em;
  font-weight: 700;
}
.entry-content p { margin: 0 0 1.15em; }
.entry-content a, .elementor a:not(.elementor-button):not(.elementor-item) {
  color: var(--feuille-f);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.entry-content a:hover { color: var(--ambre); }
.entry-content strong { color: var(--encre); }

/* ─── En-tête ───────────────────────────────────────────────── */
.elementor-location-header {
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
  position: relative;
  z-index: 40;
}
.elementor-location-header .elementor-container { padding: 14px 24px; align-items: center; }
/* 🚨 Le logo s'affichait à 48 px : la règle qui le dimensionne est générée par
      l'éditeur pour un point de rupture précis, et les autres largeurs
      vivaient dans le CSS par page, qui n'existe plus — c'est donc la plus
      petite valeur qui s'applique partout. Il faut `!important` : la règle
      orpheline est portée par un sélecteur d'élément, plus spécifique que le
      nôtre. */
.elementor-location-header img,
.elementor-location-header .elementor-widget-image img {
  width: auto !important; height: auto !important;
  max-height: 56px; max-width: 230px;
}

.elementor-nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 26px; list-style: none; margin: 0; padding: 0; }
.elementor-nav-menu li { position: relative; list-style: none; margin: 0; }
.elementor-nav-menu a {
  display: block; padding: 9px 0;
  font-size: .95rem; font-weight: 500;
  color: var(--encre); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.elementor-nav-menu a:hover,
.elementor-nav-menu .current-menu-item > a { color: var(--feuille-f); border-bottom-color: var(--ambre); }

/* Sous-menus : survol ET focus clavier — le JS d'Elementor n'est pas archivé. */
.elementor-nav-menu .sub-menu {
  position: absolute; top: 100%; left: -14px; z-index: 50;
  display: none; flex-direction: column; min-width: 250px;
  padding: 8px 0; margin: 0; list-style: none;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(28,42,33,.10);
}
.elementor-nav-menu > li:hover > .sub-menu,
.elementor-nav-menu > li:focus-within > .sub-menu { display: flex; }
.elementor-nav-menu .sub-menu a { padding: 8px 18px; white-space: nowrap; border: 0; font-weight: 400; }
.elementor-nav-menu .sub-menu a:hover { background: var(--lavis); }

/* 🚨 Le « burger » n'a aucun script pour s'ouvrir : masqué, et le menu mobile
      s'empile — moins élégant que l'original, mais NAVIGABLE. */
.elementor-menu-toggle { display: none !important; }
.elementor-nav-menu--dropdown { display: none; }

/* ─── Grille Elementor (le CSS du constructeur n'existe plus) ── */
.elementor-section { position: relative; }
.elementor-container {
  display: flex; flex-wrap: wrap; align-items: stretch;
  width: 100%; max-width: 1140px; margin: 0 auto; gap: 30px;
}
.elementor-section-full_width > .elementor-container { max-width: 100%; }
.elementor-section-content-middle > .elementor-container { align-items: center; }
.elementor-column { display: flex; position: relative; min-width: 0; }
.elementor-widget-wrap { display: flex; flex-direction: column; width: 100%; }
.elementor-widget { margin-bottom: 18px; }
.elementor-widget:last-child { margin-bottom: 0; }
.elementor-col-100 { width: 100%; }
.elementor-col-50  { width: calc(50% - 15px); }
.elementor-col-33  { width: calc(33.333% - 20px); }
.elementor-col-25  { width: calc(25% - 23px); }
.elementor-col-20  { width: calc(20% - 24px); }
.elementor-col-16  { width: calc(16.666% - 25px); }

/* 🚨 Une colonne restée SEULE garde sa part de grille : la rangée dont la
      voisine a été vidée laissait un grand blanc à droite. */
.elementor-container > .elementor-column:only-child { width: 100%; }
.elementor-column:has(.elementor-nav-menu) { flex: 1 1 auto; width: auto; }
.elementor-column:empty { display: none; }
@media (min-width: 768px) { .elementor-nav-menu--layout-horizontal { flex-wrap: nowrap; white-space: nowrap; } }

/* ─── Accueil ───────────────────────────────────────────────── */
body.home .elementor-location-header + div .elementor-top-section:first-of-type {
  background: linear-gradient(180deg, var(--lavis), var(--papier));
  border-bottom: 1px solid var(--trait);
}
body.home .elementor-top-section > .elementor-container { padding: 40px 24px; }
body.home .elementor-widget-heading .elementor-heading-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: .5em; }
/* 🚨 BRIDER UNE LARGEUR SANS RECENTRER, C'EST COLLER LE TEXTE À GAUCHE.
      Mesuré sur l'accueil : les blocs de texte faisaient 728 px dans une
      colonne de 1052, avec 438 px de vide à droite — les conteneurs étaient
      bien centrés, mais leur contenu non. Les titres, eux, s'étalaient sur
      toute la colonne : brider le texte seul aurait décalé les paragraphes
      par rapport à leurs titres. On borne et on centre la MÊME colonne de
      lecture pour tous les blocs.
   ⚠ On centre le BLOC, pas le texte : un paragraphe centré se lit mal, les
     retours à la ligne n'ont plus de bord fixe. */
/* ⚠ L'EN-TÊTE ET LE PIED SONT AUSSI SOUS `body.home`. Première version : la
   règle bornait et centrait aussi leurs widgets — le filet de l'en-tête s'est
   retrouvé tronqué au milieu de la page. Une règle de gabarit se scope à la
   ZONE de contenu, pas au type de page (même faute que la carte du blog). */
/* 🚨 LE CENTRAGE VAUT POUR TOUS LES GABARITS, PAS SEULEMENT L'ACCUEIL.
      Première version scopée à `body.home` : les 43 articles et les 22 pages
      gardaient leur colonne de lecture collée à gauche, avec le même vide à
      droite. Brider une largeur sans recentrer est un défaut de la règle, pas
      du gabarit — il se corrige donc à un seul endroit.
   ⚠ `:not(…header *)` / `:not(…footer *)` : l'en-tête et le pied vivent sous
     la même classe de <body>, et les borner tronquait leur filet. */
.elementor-widget-text-editor:not(.elementor-location-header *):not(.elementor-location-footer *),
.elementor-widget-heading:not(.elementor-location-header *):not(.elementor-location-footer *),
.elementor-widget-button:not(.elementor-location-header *):not(.elementor-location-footer *),
.elementor-widget-divider:not(.elementor-location-header *):not(.elementor-location-footer *) {
  max-width: var(--mesure); margin-left: auto; margin-right: auto; width: 100%;
}
/* ⚠ Dans une grille à plusieurs colonnes, chaque colonne est déjà étroite :
   y borner le widget le décalerait dans sa propre colonne. On ne centre la
   colonne de lecture que lorsque la rangée n'a qu'UNE colonne. */
.elementor-container:has(> .elementor-column:nth-child(2)) .elementor-widget-text-editor,
.elementor-container:has(> .elementor-column:nth-child(2)) .elementor-widget-heading,
.elementor-container:has(> .elementor-column:nth-child(2)) .elementor-widget-button {
  max-width: none;
}
body.home .elementor-widget-text-editor p { margin: 0 0 1.1em; }

/* ─── Article et pages de contenu ───────────────────────────── */
.site-main, .content-area { padding: 0 24px; }
.ast-container { max-width: 1140px; margin: 0 auto; }
.entry-header { margin: 44px auto 26px; }
.entry-title { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 .35em; }
.entry-meta { font-size: .88rem; color: var(--gris); }
.entry-meta a { color: var(--gris); text-decoration: none; }
/* 🚨 MÊME DÉFAUT SUR LES ARTICLES : `max-width` sans `margin: auto` colle le
      texte à gauche d'un conteneur de 1140 px. L'en-tête d'article, le corps
      et la navigation entre articles partagent la MÊME colonne centrée —
      sinon le titre et le texte ne sont pas alignés entre eux. */
.entry-content, .entry-header, .post-navigation { max-width: var(--mesure); margin-left: auto; margin-right: auto; }
.entry-content > h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 2em 0 .6em; }
.entry-content > h3 { font-size: 1.2rem; margin: 1.7em 0 .5em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.entry-content li { margin-bottom: .4em; }
.entry-content blockquote {
  margin: 1.6em 0; padding: .4em 0 .4em 1.2em;
  border-left: 3px solid var(--feuille);
  color: var(--gris); font-style: italic;
}
.entry-content img, .elementor img { max-width: 100%; height: auto; border-radius: 6px; }
.entry-content figure { margin: 1.6em 0; }

/* Navigation entre articles */
.post-navigation { padding-top: 22px; margin-top: 44px; margin-bottom: 44px; border-top: 1px solid var(--trait); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.post-navigation a { color: var(--feuille-f); text-decoration: none; font-weight: 500; }
.post-navigation a:hover { color: var(--ambre); }

/* ─── Index du blog : des cartes ────────────────────────────── */
body.blog .elementor-widget-image img,
body.blog .elementor-widget-theme-post-featured-image img { border-radius: 8px; }
/* ⚠ LA CARTE NE DOIT PAS ATTRAPER L'EN-TÊTE. Première version : la règle
   visait `body.blog .elementor-col-33` — or l'en-tête EST une grille de
   colonnes en tiers, et le logo comme le menu se sont retrouvés chacun dans
   un cadre arrondi. Une règle de gabarit se scope à la zone de contenu, pas
   au type de page. */
body.blog .site-main .elementor-col-33,
body.blog .site-main .elementor-col-25,
body.blog .ast-container .elementor-col-33,
body.blog .ast-container .elementor-col-25 {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 18px;
  transition: box-shadow .18s ease, transform .18s ease;
}
body.blog .site-main .elementor-col-33:hover,
body.blog .ast-container .elementor-col-33:hover {
  box-shadow: 0 10px 26px rgba(28,42,33,.08);
  transform: translateY(-2px);
}

/* Listes d'articles : titres lisibles, extraits sobres. */
body.blog .site-main h2 a, body.blog .ast-container h2 a,
body.blog article h2 a { text-decoration: none; }
body.blog article { padding: 22px 0; border-bottom: 1px solid var(--trait); max-width: var(--mesure); }

/* ─── Boutons ───────────────────────────────────────────────── */
.elementor-button, .wp-block-button__link {
  display: inline-block;
  padding: 12px 26px;
  background: var(--feuille);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  text-decoration: none !important;
  line-height: 1.2;
}
.elementor-button:hover, .wp-block-button__link:hover { background: var(--feuille-f); }
.elementor-button-wrapper, .wp-block-button { margin: 14px 0; }

/* ─── Titres de section, séparateurs, listes à icônes ───────── */
.elementor-heading-title { margin: 0 0 10px; }
.elementor-size-small { font-size: 1rem; } .elementor-size-medium { font-size: 1.15rem; }
.elementor-size-large { font-size: 1.45rem; } .elementor-size-xl { font-size: 1.9rem; }
.elementor-size-xxl { font-size: 2.3rem; }
.elementor-divider { display: flex; }
.elementor-divider-separator { width: 100%; border-top: 1px solid var(--trait); }
.elementor-widget-divider { margin: 18px 0; }
.elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.elementor-icon-list-item { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.elementor-icon-list-item a { text-decoration: none; color: inherit; }

/* ─── Pied de page ──────────────────────────────────────────── */
.elementor-location-footer {
  margin-top: 64px;
  background: var(--lavis);
  border-top: 1px solid var(--trait);
  color: var(--gris);
  font-size: .92rem;
}
.elementor-location-footer .elementor-container { padding: 34px 24px; }
.elementor-location-footer a { color: var(--feuille-f); text-decoration: none; }
.elementor-location-footer a:hover { text-decoration: underline; }
.elementor-location-footer .elementor-heading-title { font-size: 1rem; color: var(--encre); margin-bottom: 10px; }

/* ─── Polices d'icônes absentes des archives ────────────────── */
/* 🚨 Sans règle, ces éléments s'affichent en pastilles vides ou en carrés. Le
      LIBELLÉ reste : un lien sans icône reste cliquable. */
.elementor-icon i, .elementor-icon svg:empty,
i[class^="eicon-"], i[class*=" eicon-"],
.elementor-icon-list-icon:empty, .elementor-icon-list-icon i { display: none; }
.elementor-social-icons-wrapper { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.elementor-social-icon { display: inline-flex; align-items: center; width: auto; height: auto; padding: 0; background: none !important; border-radius: 0; }

/* 🚨 `elementor-screen-only` est la classe « lecteurs d'écran ». Sans le CSS du
      plugin elle n'a AUCUN effet : « Facebook » et « Twitter » s'affichaient en
      toutes lettres en haut de chaque page. */
.elementor-screen-only, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ─── Colonnes WordPress ────────────────────────────────────── */
/* 🚨 51 PX DE PADDING DÉCALAIENT LE CORPS PAR RAPPORT AU TITRE sur les 43
      articles. Le padding de bloc d'Astra n'a de sens que si le bloc dessine
      sa propre zone ; ici la colonne de lecture est déjà bornée par
      `entry-content`, et ce retrait ne faisait que désaligner le texte de son
      titre — visible sur toutes les pages, mesurable sur aucune seule. */
.entry-content .wp-block-columns,
.entry-content .wp-block-column,
article.post, article.page { padding-left: 0; padding-right: 0; }
.wp-block-columns { display: flex; gap: 30px; flex-wrap: wrap; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-columns > .wp-block-column:only-child { flex-basis: 100%; }

/* ─── Mobile ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .elementor-hidden-tablet { display: none !important; }
  .elementor-col-33 { width: calc(50% - 15px); }
}
@media (max-width: 767px) {
  .elementor-hidden-mobile { display: none !important; }
  .elementor-container { gap: 20px; padding-left: 18px; padding-right: 18px; }
  .elementor-col-50, .elementor-col-33, .elementor-col-25, .elementor-col-20, .elementor-col-16 { width: 100%; }
  .wp-block-columns { flex-direction: column; gap: 18px; }
  .site-main, .content-area { padding: 0 18px; }
  .entry-header { margin: 28px 0 20px; }
  /* Pas de survol sur un écran tactile : les sous-menus s'empilent. */
  .elementor-nav-menu { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .elementor-nav-menu a { padding: 11px 0; border-bottom: 1px solid var(--trait); width: 100%; }
  .elementor-nav-menu .sub-menu {
    position: static; display: flex; border: 0; box-shadow: none;
    padding: 0 0 0 16px; background: none; min-width: 0;
  }
  .elementor-location-header .elementor-container { padding: 12px 18px; }
}
@media (min-width: 1025px) { .elementor-hidden-desktop { display: none !important; } }

/* ⚠ Gabarit « blog-post » : son texte s'étalait sur 1044 px, soit près du
   double d'une largeur de lecture confortable. La mesure vaut pour TOUS les
   gabarits de contenu, pas seulement ceux où Astra la pose. */
body.page-template-blog-post .entry-content,
body.page-template-blog-post .ast-container > *:not(.elementor-location-header):not(.elementor-location-footer) { max-width: var(--mesure); }
body.page-template-blog-post .entry-content { margin-left: 0; }

/* ⚠ Le pied de page héritait des tailles de titre : la ligne de copyright,
   portée par un `elementor-size-xl`, s'affichait en 1,9 rem — plus gros que
   les titres d'article. Les échelles de titre ne valent pas dans le pied. */
.elementor-location-footer .elementor-heading-title,
.elementor-location-footer .elementor-size-xl,
.elementor-location-footer .elementor-size-xxl,
.elementor-location-footer .elementor-size-large { font-size: .92rem !important; font-weight: 500; line-height: 1.6; }
.elementor-location-footer h1, .elementor-location-footer h2,
.elementor-location-footer h3, .elementor-location-footer h4,
.elementor-location-footer h5, .elementor-location-footer h6 { font-size: 1rem; }

/* ─── Corrections mobile constatées au rendu (2026-11-05) ───── */
@media (max-width: 767px) {
  /* 🚨 TROIS NIVEAUX DE PADDING S'ADDITIONNAIENT : 18 px (`site-main`) +
        15,5 px (`article`) + 23 px (`wp-block-columns`), de chaque côté. Sur
        un écran de 390 px, le texte tombait à 260 px — 130 px de marges pour
        une colonne de lecture. Chaque padding est défendable seul ; c'est leur
        somme qui ne l'est pas, et elle ne se voit qu'en mesurant la chaîne. */
  .entry-content .wp-block-columns,
  .entry-content .wp-block-column { padding-left: 0; padding-right: 0; }
  .ast-separate-container .ast-article-post,
  article.post, article.page { padding-left: 0; padding-right: 0; }

  /* 🚨 LES SOUS-MENUS IMBRIQUÉS DÉBORDAIENT. Sur `/articles-categorie/` un
        troisième menu vit DANS le contenu (1 316 px de haut) : empilé et
        indenté de 16 px par niveau, il poussait la page à 643 px de large sur
        un écran de 390. L'indentation est conservée mais elle ne peut plus
        élargir : le conteneur borne, et les libellés longs passent à la ligne. */
  .elementor-nav-menu, .elementor-nav-menu .sub-menu { max-width: 100%; box-sizing: border-box; }
  .elementor-nav-menu li { max-width: 100%; box-sizing: border-box; }
  /* ⚠ `.elementor-sub-item` est visé NOMMÉMENT et en `!important` : une règle
     du balisage d'origine force `white-space: nowrap` avec une spécificité
     supérieure. Mesuré : deux liens de sous-menu aux libellés longs faisaient
     284 px de large pour 553 px de contenu, et poussaient toute la page à
     623 px sur un écran de 390. Aucun élément ne « dépassait » le cadre —
     c'est le CONTENU qui débordait à l'intérieur, invisible à un contrôle de
     position. */
  .elementor-nav-menu a,
  .elementor-nav-menu .elementor-item,
  .elementor-nav-menu .elementor-sub-item {
    white-space: normal !important;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    max-width: 100%;
  }
  .elementor-nav-menu .sub-menu { padding-left: 14px; }
  .elementor-nav-menu .sub-menu .sub-menu { padding-left: 10px; }
}

/* ─── Bouton de menu mobile (posé par menu-mobile.js) ───────── */
.lhf-menu-bouton { display: none; }
@media (max-width: 767px) {
  .lhf-menu-bouton {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 4px 0 2px; padding: 9px 16px;
    background: var(--lavis); color: var(--encre);
    border: 1px solid var(--trait); border-radius: 999px;
    font: 600 .95rem/1 var(--pile); cursor: pointer;
  }
  .lhf-menu-bouton::before { content: "☰"; font-size: 1.05rem; line-height: 1; }
  .lhf-menu-bouton[aria-expanded="true"]::before { content: "✕"; }
  /* Le menu est replié tant que le bouton n'a pas été pressé. */
  .elementor-widget-nav-menu .elementor-nav-menu__container.elementor-nav-menu--main { display: none; }
  .lhf-menu-ouvert .elementor-nav-menu__container.elementor-nav-menu--main { display: block; }
  /* ⚠ Sans JS (ou si le script échoue), le bouton n'apparaît pas et le menu
     reste VISIBLE : on ne peut pas se retrouver sans navigation. */
  .elementor-widget-nav-menu:not(:has(.lhf-menu-bouton)) .elementor-nav-menu__container.elementor-nav-menu--main { display: block; }
}