/* ============================================================
   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; }
body.home .elementor-widget-text-editor { max-width: var(--mesure); }
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 0 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; }
.entry-content { max-width: var(--mesure); }
.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 { max-width: var(--mesure); margin: 44px 0; padding-top: 22px; 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 ────────────────────────────────────── */
.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; }