/* =========================================================================
   SYSTÈME FLY — design de base (décliné par niche)
   -------------------------------------------------------------------------
   Empreinte unique du réseau : toutes les classes posées par nos passes sont
   préfixées « lrdj- » (empreinte unique de la niche). Les classes « fly-* » qui restent
   ici ne ciblent QUE les briques rendues par le plugin fly-blocks (collection,
   bulles, onglets, boutons /go/…) — on les thème, on ne les possède pas.
   Les jetons de design restent en --zude-* (tokens partagés, jamais rendus
   comme classes dans le DOM).
   Palette : les valeurs du :root sont POSÉES PAR NICHE (brand.json) par site_gabarits.py.
   ========================================================================= */

/* Polices : SANS-SERIF locales uniquement (RGPD, doctrine Jon) — @font-face posés
   à l'étape fondations ; JAMAIS d'appel Google Fonts distant, jamais de serif. */

:root {
  --zude-primary:  #14432E;
  --zude-primary-600: #1C5A3D;
  --zude-primary-400: #2E7D57;
  --zude-accent:   #74C043;
  --zude-accent-600: #5AA630;
  --zude-warm:     #E7A43A;
  /* Fond BLANC dominant (règle Jon 2026-07-19, niveau quel-canapé). Les bandes
     de respiration passent en gris-crème TRÈS pâle ; le beige lourd est retiré. */
  --zude-bg:       #F5F2E9;
  --zude-surface:  #FFFFFF;
  --zude-surface-alt: #ECE7DA;
  /* Cartouche des images (cartes/bulles), découplé du fond de page. */
  --zude-tile:     #F4F5F2;
  --zude-text:     #12271C;
  --zude-muted:    #5F6B63;
  --zude-border:   #DEDACB;
  --zude-success:  #2E7D4F;
  --zude-radius:   14px;
  --zude-radius-lg: 20px;
  --zude-pill:     999px;
  --zude-shadow:   0 2px 14px rgba(20,67,46,.10);
  --zude-shadow-lg: 0 14px 40px rgba(18,48,42,.13);
  --zude-serif: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --zude-sans:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --zude-container: 1200px;
  --zude-bande: 1080px; /* contenu utile des bandes de l'accueil (retour Jon : pas pleine page) */
  /* z-index : le header et ses menus déroulants dominent tout le contenu. */
  --lrdj-z-header: 100;
}

/* =========================================================================
   1. FONDATIONS
   ========================================================================= */

body {
  background: var(--zude-bg);
  color: var(--zude-text);
  font-family: var(--zude-sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--zude-serif);
  color: var(--zude-primary);
  letter-spacing: -.011em;
  line-height: 1.18;
  font-weight: 600;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.35rem); margin: 0 0 .55em; letter-spacing: -.021em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem); margin: 2.4em 0 .6em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.42rem); margin: 1.9em 0 .5em; font-weight: 700; }
h2 + h3 { margin-top: 1.1em; }

p { margin: 0 0 1.15em; }
/* Une seule largeur pour TOUT le contenu (règle Jon 2026-08-05) : les 
   ne sont plus capés à 74ch — textes, tableaux et encadrés partagent le
   même conteneur, aucune impression de double colonne. */

a { color: var(--zude-primary-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--zude-accent-600); }

strong { font-weight: 600; color: var(--zude-primary); }

/* =========================================================================
   3. BOUTONS  (pills pleines)
   Nos CTA = .lrdj-push ; les boutons de blocs natifs = .wp-block-button__link.
   Les boutons /go/ du plugin (.zude-btn) sont thémés en section 12.
   ========================================================================= */

.wp-block-button__link,
.lrdj-push {
  background: var(--zude-primary);
  color: #fff !important;
  border: 0;
  border-radius: var(--zude-pill);
  padding: .85em 1.9em;
  font-family: var(--zude-sans);
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: .005em;
  text-decoration: none;
  display: inline-block;
  transition: transform .18s cubic-bezier(.2,.75,.5,1), box-shadow .18s, background .18s;
}
.wp-block-button__link:hover,
.lrdj-push:hover {
  background: var(--zude-primary-600);
  transform: translateY(-2px);
  box-shadow: var(--zude-shadow-lg);
}
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--zude-primary) !important;
  border: 1.5px solid var(--zude-primary);
}
.is-style-outline .wp-block-button__link:hover { background: var(--zude-primary); color: #fff !important; }

/* Variante accent : réservée à UN CTA par page (l'accent clair ne porte jamais
   de texte blanc — contraste insuffisant — donc texte en couleur primaire). */
.lrdj-action--fort {
  background: var(--zude-accent);
  color: var(--zude-primary) !important;
}
.lrdj-action--fort:hover { background: var(--zude-accent-600); color: var(--zude-primary) !important; }

/* =========================================================================
   4. ENCADRÉS ÉDITORIAUX  (« L'essentiel », « À lire ensuite », chapô, avis)
   ========================================================================= */

/* L'encadré « L'essentiel à retenir » */
.lrdj-essentiel {
  background: var(--zude-surface);
  border: 1px solid var(--zude-border);
  border-left: 4px solid var(--zude-accent);
  border-radius: var(--zude-radius);
  padding: 1.7rem 1.9rem 1.4rem;
  margin: 2.4rem 0;
  box-shadow: var(--zude-shadow);
}
.lrdj-essentiel h2 {
  margin: 0 0 .85rem;
  font-size: 1.16rem;
  font-family: var(--zude-sans);
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--zude-primary-400);
}
.lrdj-essentiel ul { list-style: none; margin: 0; padding: 0; }
.lrdj-essentiel li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .6rem;
  line-height: 1.6;
}
.lrdj-essentiel li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 1.05rem; height: .55rem;
  border-left: 2.5px solid var(--zude-accent-600);
  border-bottom: 2.5px solid var(--zude-accent-600);
  transform: rotate(-45deg);
}

/* Le bloc « À lire ensuite » */
.lrdj-explorer {
  background: var(--zude-surface-alt);
  border-radius: var(--zude-radius);
  padding: 1.7rem 1.9rem 1.5rem;
  margin: 3rem 0 1rem;
}
.lrdj-explorer h2 {
  margin: 0 0 .9rem;
  font-size: 1.16rem;
  font-family: var(--zude-sans);
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--zude-primary-400);
}
.lrdj-explorer ul { list-style: none; margin: 0; padding: 0; }
.lrdj-explorer li { padding: .55rem 0; border-bottom: 1px solid var(--zude-border); line-height: 1.55; }
.lrdj-explorer li:last-child { border-bottom: 0; }
.lrdj-explorer a { font-weight: 600; text-decoration: none; }
.lrdj-explorer a:hover { text-decoration: underline; }

/* Chapô d'introduction (pages légales, à-propos) */
.lrdj-primo {
  font-size: 1.14rem;
  line-height: 1.65;
  color: var(--zude-muted);
  max-width: 70ch;
  margin-bottom: 1.6rem;
}

/* Encadré d'information / avertissement (pages légales) */
.lrdj-memo {
  background: var(--zude-surface-alt);
  border-left: 4px solid var(--zude-primary-400);
  border-radius: var(--zude-radius);
  padding: 1.1rem 1.4rem;
  margin: 1.8rem 0;
  font-size: .96rem;
  color: var(--zude-text);
}
.lrdj-memo p:last-child { margin-bottom: 0; }

.lrdj-hero {
  background: var(--zude-primary);
  color: #fff;
  /* compact (retour Jon 2026-08-06 : le hero ne prend jamais tout l'écran) */
  padding-top: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
  padding-bottom: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
  text-align: center;
}

/* Le titre de la page est déjà porté par le H1 du hero : ne pas le doubler. */
.home .wp-block-post-title { display: none; }
.lrdj-hero h1 { color: #fff; max-width: 26ch; margin-inline: auto;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
.lrdj-hero p {
  color: rgba(255,255,255,.86);
  font-size: 1.06rem;
  max-width: 58ch;
  margin: 0 auto 1.5rem;
}
.lrdj-hero .lrdj-push { margin: 0 .4rem .6rem; }

/* Sur le hero sombre, le CTA secondaire passe en contour clair (sinon
   primaire sur primaire = invisible). */
.lrdj-hero .lrdj-push:not(.lrdj-action--fort) {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .5);
}
.lrdj-hero .lrdj-push:not(.lrdj-action--fort):hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
}

.lrdj-zone { padding: clamp(2.6rem, 1.5rem + 3.5vw, 4.4rem) 0; }
.lrdj-partie--b { background: var(--zude-surface-alt); }
.lrdj-tranche--sombre { background: var(--zude-primary); color: rgba(255,255,255,.88); }
.lrdj-tranche--sombre h2, .lrdj-tranche--sombre h3 { color: #fff; }
.lrdj-tranche--sombre a { color: var(--zude-accent); }

.lrdj-zone > h2 { margin-top: 0; }
.lrdj-lede { font-size: 1.08rem; color: var(--zude-muted); max-width: 68ch; }

/* =========================================================================
   6. CARTES  (grille d'orientation, marques, entretien)
   ========================================================================= */

.lrdj-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.35rem;
  margin: 2rem 0 0;
  list-style: none;
  padding: 0;
}
.lrdj-carte2 {
  background: var(--zude-surface);
  border: 1px solid var(--zude-border);
  border-radius: var(--zude-radius-lg);
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: var(--zude-shadow);
  transition: transform .22s cubic-bezier(.2,.75,.5,1), box-shadow .22s, border-color .22s;
  max-width: none;
}
.lrdj-carte2:has(a):hover { transform: translateY(-4px); box-shadow: var(--zude-shadow-lg); border-color: transparent; }
.lrdj-carte2:has(a) { cursor: pointer; }
.lrdj-carte2 h3 { margin: 0 0 .45rem; font-size: 1.14rem; }
.lrdj-carte2 p { color: var(--zude-muted); font-size: .96rem; margin: 0 0 .9rem; max-width: none; }
.lrdj-carte2 a { font-weight: 600; text-decoration: none; }
.lrdj-carte2 a::after { content: " \2192"; }
.lrdj-carte2__count {
  display: inline-block;
  background: var(--zude-surface-alt);
  color: var(--zude-primary-400);
  border-radius: var(--zude-pill);
  padding: .18em .8em;
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: .7rem;
}
.lrdj-tranche--sombre .lrdj-carte2 { background: rgba(255,255,255,.055); }
.lrdj-tranche--sombre .lrdj-carte2 p { color: rgba(255,255,255,.72); }

/* Cartes à média en tête + label flottant (mosaïque éditoriale) */
.lrdj-bloc--illustre { padding-top: 0; overflow: hidden; }
.lrdj-carte2__media {
  position: relative;
  margin: 0 -1.5rem 1.2rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--zude-surface-alt);
}
.lrdj-carte2__media img {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.2,.75,.5,1);
}
.lrdj-bloc--illustre:has(a):hover .lrdj-carte2__media img { transform: scale(1.045); }
.lrdj-carte2__label {
  position: absolute;
  left: .85rem; bottom: .8rem;
  background: rgba(255,255,255,.94);
  color: var(--zude-primary);
  font-family: var(--zude-sans);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1;
  padding: .42em .95em;
  border-radius: var(--zude-pill);
  box-shadow: 0 3px 12px rgba(18,48,42,.20);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* =========================================================================
   7. HERO PHOTO + BANDE PHOTO  (visuels d'ambiance de l'accueil)
   ========================================================================= */

.lrdj-une--photo { position: relative; overflow: hidden; }
/* GeneratePress/Gutenberg glisse un inner-container position:relative dans le
   groupe : il volait le rôle de bloc conteneur (photo encadrée 1200 px au lieu du
   plein-cadre, voile à côté). On le neutralise et on ancre tout sur le groupe. */
/* !important requis : une couche de cascade invisible (styles de layout WP)
   gagne sinon — vérifié par injection en page le 2026-08-05. */
.lrdj-une--photo > .wp-block-group__inner-container { position: static !important; }
/* Accueil : le hero colle au header — pas de cadre blanc d'article autour. */
body.home .inside-article { padding: 0; }
/* gouttière des sections claires : DESKTOP seulement (sur mobile elle
   s'additionnait à celle de grid-container → 37px, vécu) */
@media (min-width: 769px) {
  body.home .inside-article { padding: 0 clamp(1.15rem, 4vw, 3.25rem); }
}
body.home .site-main, body.home .inside-article > .entry-content { margin-top: 0; }
.lrdj-une--photo .wp-block-group__inner-container > :not(img),
.lrdj-une--photo > :not(img):not(.wp-block-group__inner-container) {
  position: relative; z-index: 2;
}
.lrdj-une--photo .lrdj-hero__bg {
  position: absolute; inset: 0 !important; z-index: 0;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  margin: 0 !important;
  object-fit: cover;
}
.lrdj-une--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--zude-primary) 74%, transparent) 0%,
    color-mix(in srgb, var(--zude-primary) 58%, transparent) 45%,
    color-mix(in srgb, var(--zude-primary) 84%, transparent) 100%);
}
.lrdj-une--photo > :not(.lrdj-hero__bg) { position: relative; z-index: 2; }

/* Bande photo large sous un titre de section (guide d'achat) */
.lrdj-strip {
  margin: 1.7rem 0 .5rem;
  border-radius: var(--zude-radius-lg);
  overflow: hidden;
  box-shadow: var(--zude-shadow);
  aspect-ratio: 21 / 9;
  max-width: none;
}
.lrdj-strip img {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* =========================================================================
   8. RÉASSURANCE + SIGNATURE AUTEUR
   ========================================================================= */

.lrdj-gages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.lrdj-gages li { text-align: center; max-width: none; }
.lrdj-gages b {
  display: block;
  font-family: var(--zude-serif);
  font-size: 2.05rem;
  color: var(--zude-accent);
  line-height: 1.1;
  margin-bottom: .25rem;
}
.lrdj-gages span { font-size: .95rem; }

.lrdj-auteur {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--zude-surface);
  border: 1px solid var(--zude-border);
  border-radius: var(--zude-radius);
  padding: 1.1rem 1.4rem;
  margin: 2.5rem 0;
}
.lrdj-auteur img { width: 54px; height: 54px; border-radius: 50%; flex: none; }
.lrdj-auteur p { margin: 0; font-size: .95rem; color: var(--zude-muted); max-width: none; }
.lrdj-auteur strong { display: block; color: var(--zude-primary); font-size: 1.02rem; }

/* =========================================================================
   10. TABLEAUX, CITATIONS, SÉPARATEURS
   ========================================================================= */

.wp-block-post-title { margin-bottom: .5em; }
.wp-block-separator { border-color: var(--zude-border); opacity: 1; }

table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: .7rem .85rem; border-bottom: 1px solid var(--zude-border); text-align: left; }
th { background: var(--zude-surface-alt); font-weight: 600; color: var(--zude-primary); }

blockquote {
  border-left: 3px solid var(--zude-accent);
  padding-left: 1.2rem;
  margin-left: 0;
  font-style: normal;
  color: var(--zude-muted);
}

/* =========================================================================
   12. HABILLAGE DES BRIQUES DU PLUGIN fly-blocks
   (classes « fly-* » = sorties du plugin, on les thème sans les renommer)
   ========================================================================= */

.zude-collection__card,
.zude-box, .zude-pod, .zude-grille__item, .zude-carousel__item {
  border-radius: var(--zude-radius-lg);
  box-shadow: var(--zude-shadow);
  /* Hairline discret : sur fond blanc, une carte blanche a besoin d'un contour
     très léger pour se détacher (comme la référence). */
  border: 1px solid var(--zude-border);
}
.zude-collection__card:hover,
.zude-grille__item:hover,
.zude-carousel__item:hover { box-shadow: var(--zude-shadow-lg); border-color: transparent; }
.zude-chip {
  border-radius: var(--zude-pill);
  border: 1px solid var(--zude-border);
  background: var(--zude-surface);
  padding: .38em 1em;
  font-size: .89rem;
  font-weight: 500;
  transition: all .16s;
}
.zude-chip.is-active {
  background: var(--zude-primary);
  border-color: var(--zude-primary);
  color: #fff;
}
.zude-collection__facets {
  background: var(--zude-surface);
  border-radius: var(--zude-radius-lg);
  padding: 1.4rem;
  box-shadow: var(--zude-shadow);
}
.zude-facet__legend {
  font-family: var(--zude-sans);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--zude-primary-400);
}
.zude-bulles__circle {
  border-radius: 50%;
  box-shadow: var(--zude-shadow);
  border: 2px solid transparent;
  transition: border-color .18s, transform .18s;
}
.zude-bulles__item:hover .zude-bulles__circle {
  border-color: var(--zude-accent);
  transform: translateY(-3px);
}
.zude-onglets__tab { border-radius: var(--zude-pill); font-weight: 600; }
.zude-onglets__tab:not(.zude-onglets__tab--card)[aria-selected="true"] { background: var(--zude-primary); color: #fff; }
.zude-onglets__tab.is-active:not(.zude-onglets__tab--card)[aria-selected="true"] { background: var(--zude-primary); color: #fff; border-bottom-color: var(--zude-primary); }

/* =========================================================================
   13. MOBILE  +  GARDE-FOUS OVERFLOW
   ========================================================================= */

@media (max-width: 782px) {
  body { font-size: 16.5px; }
  .lrdj-essentiel, .lrdj-explorer { padding: 1.3rem 1.25rem; }
  .lrdj-cards { gap: 1rem; }
  .lrdj-hero { padding-left: 1.2rem; padding-right: 1.2rem; }
  .lrdj-auteur { flex-direction: column; text-align: center; }
  h2 { margin-top: 1.9em; }
  .lrdj-carte2__media { margin: 0 -1.25rem 1.1rem; aspect-ratio: 16 / 9; }
  .lrdj-strip { aspect-ratio: 16 / 9; }
}

/* Sur l'accueil, le hero doit toucher l'en-tête (pas de bande blanche). */
.home main.wp-block-group { margin-top: 0 !important; }
.home main > .wp-block-group.alignfull { padding-top: 0 !important; }

/* 100vw inclut la barre de défilement : sans ce garde-fou, les bandes
   full-bleed créeraient un scroll horizontal parasite. */
html { overflow-x: hidden; }
body { overflow-x: clip; }

/* =========================================================================
   14. FICHE PRODUIT (single fly_produit) — nettoyage de l'artefact thème
   Le template single du thème de blocs injecte une ligne de méta « Écrit par
   … dans … » : sur le CPT fly_produit, l'auteur et la catégorie sont vides,
   d'où l'artefact « Écrit par  dans ». Le CPT n'affiche jamais de méta
   auteur/date : on masque proprement ce groupe (unique sur ces pages).
   ========================================================================= */

body.single-fly_produit .wp-block-group.has-small-font-size {
  display: none !important;
}

/* La buy box arrive en tête : pas de titre d'article dupliqué au-dessus. */
body.single-fly_produit .wp-block-post-title + .zude-avis__buybox { margin-top: 0; }

/* =========================================================================
   15. CARTOUCHES D'IMAGE — fond neutre découplé (fond blanc dominant)
   ========================================================================= */

.zude-collection__card .zude-grille__media,
.zude-grille__media,
.zude-carousel__media,
.zude-bulles__circle,
.zude-avis__buybox-media,
.zude-box__media { background: var(--zude-tile); }

/* =========================================================================
   15. PAGES DE CONFIANCE + TABLEAUX — MOBILE (constats Jon, v1.7.6)
   ========================================================================= */
/* Tableaux natifs : la figure scrolle horizontalement, jamais coupée. */
.wp-block-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  /* La figure .zude-table impose min-width:520px (lisibilité desktop) : sur mobile
     on la libère pour qu'elle tienne dans le viewport et scrolle en interne. */
  .wp-block-table, .wp-block-table.zude-table { min-width: 0 !important; max-width: 100% !important; }
  .wp-block-table > table { font-size: .88rem; }
  /* Marges latérales raisonnables sur les pages de confiance (fini les couloirs vides). */
  .page-id-7 .has-global-padding, .page-id-8 .has-global-padding, .page-id-9 .has-global-padding,
  .page-id-10 .has-global-padding, .page-id-11 .has-global-padding, .page-id-12 .has-global-padding {
    padding-left: 1.1rem !important; padding-right: 1.1rem !important;
  }
}

/* =========================================================================
   GUIDES — index /guides/ : images d'index contraintes 3:2 + carte cliquable
   (ajout 2026-07-19 — fix debordement images featured des cards query loop)
   ========================================================================= */
.lrdj-guides-grid { gap: 1.5rem; }
.lrdj-carte--dossier { position: relative; overflow: hidden; }
.lrdj-carte--dossier .wp-block-post-featured-image {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 10px; margin: 0 0 .25rem;
  background: var(--zude-surface-alt);
}
.lrdj-carte--dossier .wp-block-post-featured-image img {
  width: 100%; height: 100%;
  max-width: none; object-fit: cover; display: block; border-radius: 10px;
  transition: transform .5s cubic-bezier(.2,.75,.5,1);
}
.lrdj-carte--dossier:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.lrdj-carte--dossier .wp-block-post-title { margin: .1rem 0 .35rem; }
.lrdj-carte--dossier .wp-block-read-more {
  display: inline-block; font-weight: 600; text-decoration: none;
  color: var(--zude-primary-400);
}
.lrdj-carte--dossier .wp-block-read-more:hover { text-decoration: underline; }
.lrdj-carte--dossier .wp-block-read-more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wp-block-query-pagination { justify-content: center; gap: .35rem; margin-top: 2.2rem; flex-wrap: wrap; }
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current { font-weight: 700; color: var(--zude-primary); }

/* En-tête : fond primaire, propre contexte d'empilement (fix z-index hero).
   v2.8.7 (revue Jon 2026-08-07) : le header fait TOUTE la largeur de l'écran sur
   desktop — le fond s'étend, le contenu (logo + menu) reste dans le conteneur. */
body .site-header {
  position: relative;
  z-index: var(--lrdj-z-header);
  background: var(--zude-primary);
  color: #fff;
  max-width: none !important;
}
body .site-header .inside-header {
  max-width: var(--zude-container);
  margin-left: auto;
  margin-right: auto;
}
body .site-header a { color: #fff; text-decoration: none; }
body .site-header a:hover { color: var(--zude-accent); }
body .main-title { font-family: var(--zude-serif); font-weight: 600; font-size: 1.35rem; margin: 0; }
body .main-title a { color: #fff; }
body .site-description { display: none; }

/* Menu principal (classique GP) : mêmes couleurs que l'en-tête de blocs. */
body .main-navigation {
  background: transparent;
  font-family: var(--zude-sans);
  font-size: .95rem;
  font-weight: 500;
}
body .main-navigation .main-nav ul li a { color: #fff; padding-top: .35em; padding-bottom: .35em; }
body .main-navigation .main-nav ul li a:hover,
body .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--zude-accent); }

/* Sous-menus déroulants : au-dessus du contenu, fond crème lisible. */
body .main-navigation ul ul {
  z-index: calc(var(--lrdj-z-header) + 1);
  background: var(--zude-surface);
  border: 1px solid var(--zude-border);
  border-radius: var(--zude-radius);
  box-shadow: var(--zude-shadow-lg);
  padding: .35rem;
  width: 240px;
}
body .main-navigation ul ul li a { color: var(--zude-text); border-radius: 8px; }
/* Sous-menus : deux mondes (vécu sur téléphone réel, retour Jon 2026-08-06).
   DESKTOP = panneau BLANC flottant → texte sombre (!important : le customizer
   GP sort après nous et l'écrasait — blanc sur blanc). Le panneau du DERNIER
   item s'aligne à DROITE (le menu touche le bord : il sortait de l'écran).
   MOBILE = tiroir SOMBRE → texte clair, retour à la ligne libre. */
@media (min-width: 769px) {
  body .main-navigation .main-nav ul ul li a,
  body .main-navigation ul ul li a {
    color: var(--zude-text) !important;
    max-width: min(340px, calc(100vw - 24px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body .main-navigation .main-nav > ul > li:last-child > ul {
    left: auto;
    right: 0;
  }
}
@media (max-width: 768px) {
  body .main-navigation .main-nav ul ul li a {
    color: rgba(255, 255, 255, .88) !important;
    white-space: normal;
    max-width: none;
  }
}
body .main-navigation ul ul li a:hover { background: var(--zude-surface-alt); color: var(--zude-primary); }

/* Menu mobile GP : bouton et panneau aux couleurs de l'en-tête. */
body .menu-toggle,
body .main-navigation .menu-toggle:hover,
body .main-navigation .menu-toggle:focus { background: transparent; color: #fff; }
body .main-navigation .main-nav ul.toggled-on li a { color: #fff; }

/* Bandes pleine largeur : même technique que le pilote, scope GP (#page est
   le conteneur — les bandes en sortent par marges négatives). */
.site .lrdj-hero,
.site .lrdj-partie--b,
.site .lrdj-tranche--sombre {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(clamp(1.5rem, 4vw, 3.25rem), calc(50vw - var(--zude-bande) / 2));
  padding-right: max(clamp(1.5rem, 4vw, 3.25rem), calc(50vw - var(--zude-bande) / 2));
}

/* Le H1 du hero porte déjà le titre : ne pas le doubler sur l'accueil. */
body .home .entry-title { display: none; }

/* Contenu : respiration sous l'en-tête (GP colle le contenu par défaut). */
body .site-content { padding-top: 2rem; padding-bottom: 3rem; }

/* Footer GP : mêmes couleurs que le footer de blocs du pilote. */
body .site-footer {
  background: var(--zude-primary);
  color: rgba(255,255,255,.86);
  margin-top: 4rem;
}
body .site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
body .site-footer a:hover { color: var(--zude-accent); }
body .site-footer h2, body .site-footer h3 { color: #fff; font-size: 1.05rem; }
body .site-info { background: transparent; }
body .inside-site-info { padding: 1.2rem 0; font-size: .85rem; }

/* Logo d'en-tête : compact (jamais la bannière pleine largeur), et le titre
   TEXTE s'efface quand un logo est posé (sinon doublon logo + nom). */
/* !important assumés : GeneratePress force width:100% sur le logo mobile —
   vu en réel chez Jon (bannière pleine largeur). Couche d'override thème. */
/* GP rend le logo en `.header-image.is-logo-image` (vécu : les sélecteurs
   .site-logo/.custom-logo ne matchaient PAS — règle inerte, logo géant chez Jon).
   On couvre TOUTES les variantes de markup logo de GeneratePress. */
body .site-header .header-image,
body .site-header .is-logo-image,
body .site-header .site-logo img,
body .site-header img.custom-logo,
body .site-header .site-branding img,
body .site-header .custom-logo {
  max-height: 44px !important;
  height: 44px !important;
  width: auto !important;
  max-width: 80vw !important;
  border-radius: 10px;
}
body .site-header .site-logo,
body .site-header .site-branding { line-height: 0; }
body .site-header .inside-header { padding-top: .9rem !important; padding-bottom: .9rem !important; }

/* Header mobile GP : logo à gauche, burger à droite, UNE ligne compacte
   (règle Jon 2026-08-05 — fini le header trop haut au logo centré). */
@media (max-width: 768px) {
  body .site-header .inside-header {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;   /* space-between créait un écart de 41 px après
                                      le conteneur-fantôme de largeur nulle */
    flex-wrap: nowrap;
    padding: .55rem 1rem !important;
  }
  body .site-header .main-navigation { margin-left: auto !important; }
  body .site-header .site-branding,
  body .site-header .site-logo { margin: 0; }
  body .site-header .header-image,
  body .site-header .is-logo-image,
  body .site-header img.custom-logo,
  body .site-header .site-logo img { max-height: 36px !important; height: 36px !important; }
  /* le wrapper interne de GP décalait le bouton (QC : centres à 10 px) */
  body .site-header .inside-navigation {
    padding: 0 !important;
    margin: 0;
    display: flex;
    align-items: center;
  }
  body .site-header .main-navigation,
  body .site-header #site-navigation {
    background: transparent;
    margin: 0;
    width: auto;
  }
  body .main-navigation .menu-toggle {
    padding: .45rem .6rem;
    background: transparent;
    color: #fff;
  }
  /* le panneau du menu ouvert passe SOUS le header, pleine largeur */
  body .main-navigation .main-nav { width: 100%; }
}

/* Tiroir de menu mobile (portage GP du comportement validé sur le pilote) :
   glisse depuis la DROITE, fond primaire, liens clairs, pleine hauteur. */
@media (max-width: 768px) {
  body .main-navigation .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.2,.75,.5,1);
    width: min(78vw, 320px);
    height: 100dvh;
    background: var(--zude-primary);
    z-index: calc(var(--lrdj-z-header) + 10);
    padding: 4.2rem 1.4rem 2rem;
    overflow: auto;
    display: block !important;
  }
  body .main-navigation.toggled .main-nav {
    transform: none;
    box-shadow: -10px 0 32px rgba(0,0,0,.35);
  }
  body .main-navigation .main-nav ul {
    flex-direction: column;
    display: block;
  }
  body .main-navigation .main-nav ul li {
    float: none;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  body .main-navigation .main-nav ul li a {
    color: #fff;
    padding: .8em 0;
    display: block;
  }
  /* le bouton reste accessible AU-DESSUS du tiroir pour refermer */
  body .main-navigation .menu-toggle {
    position: relative;
    z-index: calc(var(--lrdj-z-header) + 11);
  }
  /* sous-menus : à plat dans le tiroir, indentés */
  body .main-navigation .main-nav ul ul {
    position: static;
    width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: .9rem;
  }
  body .main-navigation .main-nav ul ul li a { color: rgba(255,255,255,.85); }
}

/* Bouton menu mobile : l'icône seule (le libellé « Menu » cassait la hauteur
   du header et flottait dans le tiroir ouvert). */
@media (max-width: 768px) {
  body .main-navigation .menu-toggle .mobile-menu { display: none; }
  body .main-navigation .menu-toggle { line-height: 1; }
  /* premier lien du tiroir sous la rangée du bouton de fermeture */
  body .main-navigation.toggled .main-nav > ul { padding-top: .6rem; }
}

/* =========================================================================
   PASSE DE RYTHME & SYMÉTRIE (retour Jon 2026-08-05 : « pas assez pro,
   pas 100 % centré/symétrique »).
   Principe : UNE colonne de lecture centrée — la même largeur pour tout
   (textes, tableaux, encadrés, images) ; des marges régulières ; des angles
   et espacements constants (les tokens --zude-*).
   ========================================================================= */

/* La colonne : centrée, largeur unique, sur article ET pages. */
/* TOUS les enfants directs de l'article partagent la colonne (l'image à la
   une débordait : le conteneur GP porte un autre nom selon la mise en page —
   la règle générique est la seule symétrie garantie). */
body .site-main .inside-article > *,
body .site-main .entry-content,
body .site-main .page-header {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
body .site-main { padding-top: .4rem; }

/* Image à la une : pleine largeur de LA colonne, angles du design system. */
body .site-main img.wp-post-image {
  width: 100%;
  height: auto;
  border-radius: var(--zude-radius);
  margin: 0 0 1.6rem;
  display: block;
}

/* En-tête d'article : titre serré sur sa méta, méta discrète et régulière. */
body .entry-title { margin: 0 0 .45em; }
body .entry-meta {
  color: var(--zude-text-muted);
  font-size: .85rem;
  letter-spacing: .01em;
  margin-bottom: 1.9rem;
}

/* Tableaux et figures : mêmes angles, jamais collés aux blocs voisins. */
body .entry-content figure.wp-block-table { margin: 1.4rem 0 1.8rem; }
body .entry-content figure.wp-block-table table { border-radius: var(--zude-radius); overflow: hidden; }

/* Mobile : gouttières régulières et titres calibrés. */
@media (max-width: 768px) {
  body .grid-container { padding-left: 1.15rem; padding-right: 1.15rem; }
  body .entry-title { font-size: 1.7rem; }
  body .site-main { padding-top: 0; }
}

/* Le bouton burger : zone tactile carrée centrée face au logo — MOBILE
   SEULEMENT (display global écrasait le display:none desktop de GP : le
   burger apparaissait à côté du menu desktop — vécu). */
@media (max-width: 768px) {
  body .main-navigation .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;   /* standard tactile Apple/Google : ≥ 44px */
    height: 44px;
    border-radius: 10px;
    transition: background .15s;
  }
  body .main-navigation .menu-toggle:hover { background: rgba(255,255,255,.08); }
}

/* Sobriété du header (retour Jon 2026-08-05) : logo 44px desktop / 36px mobile,
   et le menu ne touche JAMAIS le bord droit. */
body .site-header .inside-header { padding-left: 1.25rem; padding-right: 1.25rem; }
body .main-navigation .main-nav ul li:last-child a { padding-right: 0; }

/* Alignement vertical strict logo/bouton (QC header : centres à ≤ 8 px —
   l'élément nav de GP portait ses propres marges). */
@media (max-width: 768px) {
  body .site-header .main-navigation,
  body .site-header #site-navigation {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    min-height: 0;
  }
  body .main-navigation .menu-toggle { margin: 0; }
}

/* Le conteneur GP du logo portait un padding (boîte 56 px pour une image 36) :
   son centre n'était pas celui de l'image — QC 10 px. Boîte = image, point. */
@media (max-width: 768px) {
  body .site-header .site-logo,
  body .site-header .site-branding,
  body .site-header .site-logo a,
  body .site-header .site-branding a {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    line-height: 0;
  }
}

/* Header desktop (retour Jon 2026-08-05) : logo à gauche et menu à droite sur
   UNE ligne aux centres alignés (GP posait le menu au float, baselines
   décalées) ; liens du menu plus COMPACTS (marges latérales réduites). */
@media (min-width: 769px) {
  body .site-header .inside-header {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;   /* le fantôme .site-branding vide ne décale plus rien */
    flex-wrap: nowrap;
    padding-top: .7rem;
    padding-bottom: .7rem;
  }
  body .site-header .main-navigation { margin-left: auto !important; }
  body .site-header .site-branding,
  body .site-header .site-logo,
  body .site-header .site-logo a,
  body .site-header .site-branding a {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 0;
  }
  body .site-header .main-navigation,
  body .site-header #site-navigation,
  body .site-header .inside-navigation {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
  }
  body .main-navigation .main-nav ul li a {
    padding-left: .8rem;
    padding-right: .8rem;
    line-height: 1.2;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
  body .main-navigation .main-nav ul li:last-child a { padding-right: 0; }
}

/* Mobile : les grid-containers IMBRIQUÉS du header (GP + unsemantic) empilaient
   leurs gouttières (63 px mesurés au lieu de 16). UNE seule gouttière fait foi :
   celle de .inside-header — tout le reste à zéro. */
@media (max-width: 768px) {
  body .site-header,
  body .site-header .site-branding,
  body .site-header .site-logo,
  body .site-header .main-navigation,
  body .site-header .inside-navigation {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
  }
  body .site-header .inside-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Le conteneur titre-texte de GP (.site-branding) : SUPPRIMÉ partout — nos sites
   ont TOUJOURS un logo (fondations l'exige, le QC refuse sans lui) et ce fantôme
   de 41 px décalait le logo (:has s'est montré non fiable ici). */
body .site-header .site-branding { display: none !important; }

/* Mobile : le bouton menu TOUT à droite de l'écran (l'aplatissement des
   gouttières avait aussi écrasé le margin-left:auto du nav — il collait au
   logo). Déclaré APRÈS, il reprend la main. */
@media (max-width: 768px) {
  body .site-header .main-navigation,
  body .site-header #site-navigation {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Audit ergonomie header (2026-08-05) — verrous d'accessibilité :
   zones tactiles ≥ 44px dans le tiroir, focus clavier visible partout. */
@media (max-width: 768px) {
  body .main-navigation .main-nav ul li a { padding: .9em 0; min-height: 44px; }
}
body .site-header a:focus-visible,
body .main-navigation .menu-toggle:focus-visible {
  outline: 2px solid var(--zude-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* UNE largeur pour tout, définitif (retour Jon x2 — une règle fantôme limitait
   encore les  d'article à ~660 px face aux tableaux à 900) : dans le contenu
   d'article, AUCUN enfant ne rétrécit sous la colonne. */
body .entry-content > p,
body .entry-content > ul,
body .entry-content > ol,
body .entry-content > h2,
body .entry-content > h3 {
  max-width: none !important;
}

/* Accueil : le gabarit porte son H1 (hero) — le titre de page GP est masqué
   (vécu : 2 × h1 sur la home). */
body.home h1.entry-title,
body.home .entry-header { display: none !important; }

/* Sections SOMBRES : strong héritait de l'encre primaire → invisible sur fond
   primaire (vécu : mots « troués » dans la bande confiance). */
.lrdj-tranche--sombre strong,
.lrdj-hero strong { color: #fff; }
.lrdj-tranche--sombre a { color: var(--zude-accent); }

/* Fond du site : BLANC, toujours, quelle que soit la niche (décision Jon
   2026-08-06) — le rythme visuel vient des bandes, jamais d'un fond teinté. */
/* html body : coiffe le CSS customizer GP émis après le nôtre */
html body, body .site, body .site-content { background: #fff; }

/* =========================================================================
   CONTENEUR ACCUEIL + CARTES CLIQUABLES (retours Jon 2026-08-06)
   « un conteneur pas trop petit sur desktop, là ça prend toute la page » :
   bandes limitées à --zude-bande de CONTENU, texte courant à 46rem lisible,
   marges mobile HOMOGÈNES (l'inner-container Gutenberg ajoutait ~30px
   variables selon la section — neutralisé, le padding de section fait foi).
   ========================================================================= */
.lrdj-zone > .wp-block-group__inner-container,
.lrdj-hero > .wp-block-group__inner-container {
  padding-left: 0 !important; padding-right: 0 !important;
  max-width: none !important;
}
body.home .site-main .inside-article > * { max-width: var(--zude-bande); }
.lrdj-zone p { max-width: 46rem; }
.lrdj-zone .lrdj-cards,
.lrdj-zone .lrdj-strip,
.lrdj-zone .lrdj-gages { max-width: none; }

/* Carte entière cliquable : le lien enveloppe le contenu, hérite tout,
   la flèche et l'élévation au survol signalent l'action. Vers une page
   encore en brouillon, le plugin retire le  (zude-bientot) : la carte
   redevient simple texte — dégradé prévu de la révélation progressive. */
.lrdj-carte2__lien {
  display: block; color: inherit; text-decoration: none;
  font-weight: inherit;
}
.lrdj-carte2__corps { display: flex; flex-direction: column; gap: .55rem; height: 100%; }
.lrdj-carte2__titre {
  display: block;
  font-family: var(--zude-sans);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--zude-primary);
}
.lrdj-tranche--sombre .lrdj-carte2__titre { color: #fff; }
.lrdj-carte2__texte { display: block; color: var(--zude-muted); font-size: .95rem; line-height: 1.55; }
.lrdj-tranche--sombre .lrdj-carte2__texte { color: rgba(255,255,255,.72); }
.lrdj-carte2__aller {
  display: block;
  margin-top: auto;
  padding-top: .35rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--zude-accent);
}
.lrdj-carte2__aller::after { content: " →"; }
/* cible pas encore publiée : la carte redevient simple, sans promesse de clic */
.zude-bientot .lrdj-carte2__aller { display: none; }
.lrdj-carte2:has(a.lrdj-carte2__lien) { display: flex; }
.lrdj-carte2:has(a.lrdj-carte2__lien) > a { flex: 1; display: flex; flex-direction: column; }
.lrdj-carte2__media { display: block; }
.lrdj-carte2 .zude-bientot { display: block; color: inherit; }
.lrdj-carte2 a.lrdj-carte2__lien { font-weight: inherit; }
.lrdj-tranche--sombre .lrdj-carte2 a.lrdj-carte2__lien,
.lrdj-tranche--sombre .lrdj-carte2__lien { color: inherit; }
.lrdj-carte2 a.lrdj-carte2__lien::after { content: none; }
.lrdj-carte2:has(.lrdj-carte2__lien):hover { border-color: var(--zude-accent); }

/* Bandeau bas : bande image courte sous le chapo d'une section (marques,
   entretien) — moins haute que le bandeau du guide. */
.lrdj-bande--basse { aspect-ratio: 21 / 7; }
@media (max-width: 640px) {
  .lrdj-bande--basse { aspect-ratio: 16 / 7; }
}

/* Recette « teintée » des sections d'axes : cartes blanches au filet accent
   (le contraste entre sections se génère — retour Jon 2026-08-06). */
.lrdj-fiche--liser { border-left: 3px solid var(--zude-accent); }
.lrdj-fiche--liser:has(a):hover { border-left-color: var(--zude-primary); }

/* Variante PLEINE PAGE du bloc auteur (à-propos, C29) : grand avatar + texte,
   sans le cadre de la signature d'article. */
.lrdj-author--page {
  background: transparent;
  border: 0;
  padding: 0;
  align-items: flex-start;
  gap: 1.9rem;
  margin: 1.4rem 0 2.2rem;
}
.lrdj-author--page .lrdj-auteur__avatar {
  width: clamp(130px, 16vw, 190px);
  height: auto;
  border-radius: 50%;
  border: 4px solid var(--zude-surface-alt);
  box-shadow: var(--zude-shadow);
  flex: 0 0 auto;
}
.lrdj-author--page .lrdj-auteur__texte { flex: 1; }
.lrdj-author--page p {
  font-size: 1.04rem;
  color: var(--zude-text);
  margin: 0 0 .95em;
}
@media (max-width: 640px) {
  .lrdj-author--page { align-items: center; }
}

/* Avis produit MOBILE : l'empilement inside-article(30) + carte(18) + corps(14)
   poussait le texte à 81px du bord (vécu, retour Jon). L'article ne rajoute
   presque rien — les cartes gardent leur petit cadre. */
@media (max-width: 640px) {
  body.single-fly_produit .inside-article { padding: 8px 4px 24px; }
  /* Même respiration pour TOUTES les pages et articles (revue Jon 2026-08-06 : marges
     latérales trop lourdes sur mobile — comparatif, catégories, guides) */
  body.page .inside-article,
  body.single-post .inside-article { padding: 8px 4px 24px; }
}

/* ================================================================== *
 * v2.8.3 — revue Jon 2026-08-07 (correctifs SYSTÈME, toutes niches)  *
 * ================================================================== */
/* Cible non publiée = élément INERTE : plus jamais un bouton qui « ne fait rien »
   (le span .zude-bientot hérite des classes du lien d'origine, CTA compris). */
.zude-bientot { opacity: .5; pointer-events: none; cursor: default; filter: saturate(.4); }
.zude-bientot:hover { transform: none; box-shadow: none; }

/* Gouttières mobiles resserrées sur les contenus (texte à 53 px du bord, vécu) */
@media (max-width: 640px) {
  .single-fly_produit .grid-container, .single-post .grid-container,
  .page .grid-container { padding-left: 10px; padding-right: 10px; }
  .zude-avis { --zude-avis-gutter: 8px; }
}

/* ================================================================== *
 * v2.8.4 — revue Jon 2026-08-07 : hero article pleine largeur         *
 * + index Guides/Versus en grille de cartes (toutes niches)           *
 * ================================================================== */
/* v2.8.7 (revue Jon 2026-08-07) : sur DESKTOP le hero d'article reste DANS le
   conteneur (centré, coins arrondis) — seul le HEADER est pleine largeur. Sur
   mobile le conteneur = l'écran, rien ne change. */
.zude-article-hero { width: 100%; max-width: var(--zude-container); margin: 0 auto 14px; }
.zude-article-hero__frame { border-radius: var(--zude-radius); overflow: hidden; }

/* v2.8.5 — revue Jon 2026-08-07 : respiration verticale MAÎTRISÉE. Mesuré au
   navigateur : 132 px s'empilaient entre header et contenu (site-content 32 +
   site-main 20+6 + inside-article 40 + entry-content 34). On garde UNE seule
   respiration (site-content) et on éteint le reste — fiches produit et articles. */
/* body + !important : GeneratePress (.separate-containers …) gagnait le bras de
   fer de spécificité sur 3 des 4 règles — cette couche est le dernier mot design. */
body.single-post .site-content, body.single-fly_produit .site-content { padding-top: 24px !important; }
body.single-post .site-main, body.single-fly_produit .site-main { margin-top: 0 !important; padding-top: 0 !important; }
body.single-post .inside-article, body.single-fly_produit .inside-article { padding-top: 0 !important; }
body.single-post .entry-content, body.single-fly_produit .entry-content { margin-top: 0 !important; }
/* L'article a déjà le hero + son fil d'Ariane au-dessus : respiration réduite. */
body.single-post .site-content { padding-top: 10px !important; }
/* GP imprime un div .featured-image VIDE (l'image vit dans le hero/la box avis)
   qui traîne 34 px de marge fantôme — mesuré au navigateur. On l'éteint. */
body.single-post .inside-article > .featured-image,
body.single-fly_produit .inside-article > .featured-image { display: none !important; margin: 0 !important; }

/* Index des articles (page Guides = liste des posts) : grille de cartes élégante */
.blog .site-main, .archive .site-main {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 26px; align-items: stretch;
}
.blog .site-main > *:not(article), .archive .site-main > *:not(article) { grid-column: 1 / -1; }
.blog .site-main article.post, .archive .site-main article.post {
  background: var(--zude-surface); border: 1px solid var(--zude-border);
  border-radius: var(--zude-radius-lg); overflow: hidden; box-shadow: var(--zude-shadow);
  display: flex; flex-direction: column; margin: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog .site-main article.post:hover, .archive .site-main article.post:hover {
  transform: translateY(-4px); box-shadow: var(--zude-shadow-lg);
}
.blog article.post .post-image, .archive article.post .post-image { margin: 0; }
.blog article.post .post-image img, .archive article.post .post-image img {
  width: 100%; height: 190px; object-fit: cover; display: block;
}
.blog article.post .inside-article, .archive article.post .inside-article {
  padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1;
}
.blog article.post .entry-header h2, .archive article.post .entry-header h2 {
  margin: 0 0 .45em; font-size: 1.18rem; line-height: 1.35;
}
.blog article.post .entry-header h2 a, .archive article.post .entry-header h2 a {
  color: var(--zude-primary); text-decoration: none;
}
.blog article.post .entry-header h2 a:hover { color: var(--zude-accent-600); }
.blog article.post .entry-meta, .archive article.post .entry-meta {
  font-size: .82rem; color: var(--zude-muted);
}
.blog article.post .entry-summary, .archive article.post .entry-summary {
  font-size: .95rem; color: var(--zude-text); flex: 1;
}
.blog article.post .read-more, .archive article.post .read-more {
  font-weight: 600; color: var(--zude-primary-600); text-decoration: none; margin-top: 10px;
}

/* ============================================================= *
 * Bandeau quiz (audit conversion 2026-08-09) — comparatif + catégories *
 * ============================================================= */
.lrdj-quiz-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  justify-content: space-between; background: var(--zude-bande, #f4f5f6);
  border-radius: var(--zude-radius, 14px); padding: 20px 22px; margin: 26px 0; }
.lrdj-quiz-bandeau__txt { margin: 0; font-size: 15.5px; line-height: 1.5; }
@media (max-width: 640px) { .lrdj-quiz-bandeau { flex-direction: column;
  align-items: flex-start; } }