/*
Theme Name: Panneau Publicitaire
Author: CM
Description: Publicite exterieure, enseignes et reglementation de l'affichage. Charte v1.0 (bleu nuit + rouge affiche, Poppins + Inter). Accueil editorial TSA + vue article CM Media.
Version: 1.0.2-ppub
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: template-site-actu
*/

/* ─────────────────────────────────────────────────────────────────────────────
 * Palette « Garçonne » (dérivée du logo : magenta + bleu nuit + turquoise)
 *   Magenta    #E6006E - couleur de marque, CTA, kickers (coral-500)
 *   Turquoise  #16A9C6 - accent, liens, icones (forest-400)
 *   Turquoise foncé #1390A8 - liens/boutons (forest-500)
 *   Bleu nuit  #14142A - titres, hero, footer, texte (forest-700 / ink)
 *   Turquoise pale #E8F6F9 - fonds, cartes
 *   Gris moyen  #6B7177 - texte secondaire
 *   Gris clair  #F7F8FA - fond global
 *   Bordures   #E2E5E9
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* forest = turquoise (accent froid) -> bleu nuit (structure, titres, hero) */
  --color-forest-50:  #e8f6f9;
  --color-forest-100: #c5e9f0;
  --color-forest-200: #93d6e3;
  --color-forest-300: #57bdd2;
  --color-forest-400: #16a9c6;
  --color-forest-500: #1390a8;
  --color-forest-600: #107387;
  --color-forest-700: #14142a;
  --color-forest-800: #0d0d1c;
  --color-forest-900: #070710;

  /* coral = magenta (marque, CTA, kickers, halos) */
  --color-coral-50:  #fde6f1;
  --color-coral-100: #fbc0dc;
  --color-coral-200: #f78ec0;
  --color-coral-300: #f25aa3;
  --color-coral-400: #ed2f8b;
  --color-coral-500: #e6006e;
  --color-coral-600: #c80060;
  --color-coral-700: #a3014f;
  --color-coral-800: #7d0a40;
  --color-coral-900: #520a2c;

  --color-trust-50:  #e8f6f9;
  --color-trust-500: #1390a8;
  --color-trust-700: #14142a;

  --color-sand-50:  #f7f8fa;
  --color-sand-100: #eef0f2;
  --color-sand-200: #e2e5e9;
  --color-sand-300: #c2c7cd;

  --color-ink:    #14142a;
  --color-muted:  #6b7177;

  --color-amber-50: #fff7e6;
  --color-amber-200:#f8c976;
  --color-amber-700:#a4691a;
  --color-amber-900:#5c3608;

  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 0.5rem;
  --radius:    0.875rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;

  --shadow-soft: 0 1px 2px rgba(20,20,42, 0.04), 0 8px 24px -8px rgba(20,20,42, 0.12);
  --shadow-lift: 0 2px 4px rgba(20,20,42, 0.06), 0 18px 40px -12px rgba(20,20,42, 0.22);
}

/* ─── Reset minimal ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-sand-50);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Empeche un eventuel pseudo-element decoratif (halo hero-og,
     dropdown mega-menu) d'elargir le body au-dela du viewport et
     decentrer .container (le header transparent absolute parait
     alors non-aligne avec le contenu de la page). */
  overflow-x: hidden;
}
html { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-forest-600); text-decoration: none; }
a:hover { color: var(--color-forest-500); }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-forest-700);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* ─── Layout containers ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 80rem; /* max-w-7xl */
  margin: 0 auto;
  padding: 0 1.5rem; /* 24px - confort mobile (standard Apple/Stripe) */
}
@media (min-width: 640px) {
  .container { padding: 0 1.75rem; } /* 28px tablette */
}
@media (min-width: 1024px) {
  .container { padding: 0 2rem; } /* 32px desktop */
}

/* ─── Header / nav ──────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(241, 239, 232, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-sand-200);
}
.site-header--transparent {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  border: 0;
  /* Sinon le blur+saturate herite cree une bande blanchatre/floue en
     haut du hero (la "fade-to-white" signalee par l'utilisateur). */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.site-header__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 68px;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--color-forest-700);
}
.site-header--transparent .site-header__logo { color: #fff; }
.site-header__logo span { color: var(--color-coral-500); }
.site-header__nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-left: 1rem;
  font-size: 14px;
  font-weight: 500;
}
.site-header__nav a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  color: rgba(44, 44, 42, 0.8);
}
.site-header__nav a:hover { background: var(--color-sand-100); }
.site-header--transparent .site-header__nav a { color: rgba(255,255,255,0.9); }
.site-header--transparent .site-header__nav a:hover { background: rgba(255,255,255,0.1); }
.site-header__spacer { flex: 1; }
.site-header__cta {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  font-size: 14px;
}
.site-header--transparent .site-header__cta { color: #fff; }
.site-header--transparent .site-header__cta:hover { background: rgba(255,255,255,0.1); }

/* ─── Burger button (mobile only) ─────────────────────────────────────── */
.site-header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  margin-left: .25rem;
}
.site-header__burger:hover { background: var(--color-sand-100); }
.site-header__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform .2s, opacity .15s;
  transform-origin: center;
}
.site-header--transparent .site-header__burger:hover { background: rgba(255,255,255,.1); }
.site-header--transparent .site-header__burger span { background: #fff; }
.site-header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__burger.is-open span:nth-child(2) { opacity: 0; }
.site-header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mega menu et CTA Newsletter : caches sur mobile, burger affiche */
@media (max-width: 1023.98px) {
  .mega-menu-wrap { display: none !important; }
  .site-header__cta { display: none; }
}
@media (min-width: 1024px) {
  .site-header__nav { display: inline-flex; }
  .mega-menu-wrap { display: inline-flex; }
  .site-header__burger { display: none; }
}

/* ─── Panel mobile (slide-down full-width) ───────────────────────────── */
.site-mobile-menu {
  position: fixed;
  inset: 68px 0 0 0; /* sous le header de 68px */
  background: #fff;
  z-index: 39;
  overflow-y: auto;
  animation: flmFadeIn .2s ease;
}
@keyframes flmFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.site-mobile-menu__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.site-mobile-menu section { display: flex; flex-direction: column; }
.site-mobile-menu__title {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-coral-600);
  margin: 0 0 .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-sand-200);
}
.site-mobile-menu a {
  display: block;
  padding: .85rem .5rem;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s;
}
.site-mobile-menu a:hover, .site-mobile-menu a:focus {
  background: var(--color-sand-100);
  color: var(--color-trust-600);
}

/* ─── Mega menu Outils ───────────────────────────────────────────────────── */
.mega-menu-wrap { position: relative; }
.mega-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  background: transparent;
  border: 0;
  color: inherit;
}
.mega-menu-trigger:hover { background: var(--color-sand-100); }
.site-header--transparent .mega-menu-trigger { color: rgba(255,255,255,0.9); }
.site-header--transparent .mega-menu-trigger:hover { background: rgba(255,255,255,0.1); color: #fff; }
.mega-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: min(960px, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--color-sand-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 50px -12px rgba(20,20,42, 0.25);
  display: none;
  z-index: 50;
  /* Decale visuellement la dropdown de 8px sous le trigger sans creer
     de trou pour le pointeur : ::before remplit cet espace de maniere
     invisible et reste dans la zone hover du wrap. */
  margin-top: 8px;
  overflow: hidden;
}
.mega-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0; right: 0;
  height: 8px;
}
/* Petite marge de tolerance sous le trigger pour absorber le saut de
   pointeur en diagonal entre 'Nos outils' et la dropdown. */
.mega-menu-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 8px;
}
.mega-menu-wrap:hover .mega-menu,
.mega-menu-wrap:focus-within .mega-menu { display: grid; grid-template-columns: 1fr 1.6fr; }
.mega-menu__col { padding: 1.25rem; }
.mega-menu__col--aide {
  background: rgba(232,246,249, 0.4);
  border-right: 1px solid var(--color-sand-200);
}
/* Liste des simulateurs en 2 colonnes (col 'Simulateurs' contient
   1 lien 'multi-aides' + 14 simulations -> 15 items, 2 cols = ~8
   lignes par colonne, plus aere). */
.mega-menu__col--sim .mega-menu__sim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem .5rem;
}
.mega-menu__col--sim .mega-menu__sim-grid > a:first-child {
  grid-column: 1 / -1;
}
.mega-menu__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  margin-bottom: 0.75rem;
}
.mega-menu__col--aide .mega-menu__title { color: var(--color-forest-700); }
.mega-menu__col--sim .mega-menu__title { color: var(--color-coral-500); }
.mega-menu__link {
  display: flex;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  color: var(--color-ink);
  font-size: 13px;
  text-decoration: none;
}
.mega-menu__link:hover { background: var(--color-sand-100); color: var(--color-forest-700); }
.mega-menu__link strong { display: block; font-weight: 600; font-size: 14px; }
.mega-menu__link span { color: var(--color-muted); font-size: 11px; }

/* ─── Hero OG (reprend la palette de l'image de partage) ─────────────────── */
.hero-og {
  background: linear-gradient(135deg, var(--color-forest-700) 0%, var(--color-forest-500) 60%, var(--color-forest-600) 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.hero-og::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -160px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(230, 0, 110, 0.42) 0%, rgba(230, 0, 110, 0) 70%);
  pointer-events: none;
  z-index: -1;
}
.hero-og::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}
/* Padding vertical seulement - sinon le shorthand padding: V 0 V ecrase
   le padding horizontal du .container parent (collait bord a bord). */
.hero-og__inner { padding-top: 5rem; padding-bottom: 2rem; position: relative; }
@media (min-width: 1024px) { .hero-og__inner { padding-top: 6rem; padding-bottom: 2.5rem; } }
.hero-og__breadcrumb { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 0.75rem; }
.hero-og__breadcrumb a { color: inherit; }
.hero-og__breadcrumb a:hover { color: var(--color-coral-300); }
.hero-og__kicker {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--color-coral-400);
  margin-bottom: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.hero-og__title {
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero-og__lead {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  margin-top: 0.75rem;
  max-width: 40rem;
}
.hero-og__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-coral-500);
  color: #fff;
  font-weight: 600;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius);
  margin-top: 1.5rem;
  text-decoration: none;
}
.hero-og__cta:hover { background: var(--color-coral-600); color: #fff; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 0;
}
.btn--primary {
  background: var(--color-forest-500);
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(19,144,168, 0.55);
}
.btn--primary:hover { background: var(--color-forest-600); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(19,144,168, 0.7); }
.btn--accent { background: var(--color-coral-500); color: #fff; }
.btn--accent:hover { background: var(--color-coral-600); color: #fff; }
.btn--ghost { background: #fff; border: 1px solid var(--color-sand-200); color: var(--color-ink); padding: 0.75rem 1.125rem; }
.btn--ghost:hover { border-color: var(--color-forest-500); }

/* ─── Card ──────────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--color-sand-200);
  border-radius: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* ─── Mise en forme prose pour simulation, article ───────────────────────── */
.prose-simulation { color: rgba(44, 44, 42, 0.85); font-size: 16px; line-height: 1.75; }
.prose-simulation > * + * { margin-top: 1.1rem; }
.prose-simulation h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-sand-200);
  scroll-margin-top: 5rem;
  color: var(--color-forest-700);
}
.prose-simulation h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-forest-700);
  scroll-margin-top: 5rem;
}
.prose-simulation strong { font-weight: 700; color: inherit; }
.prose-simulation a {
  color: var(--color-forest-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-simulation ul, .prose-simulation ol { margin-left: 1.2rem; list-style-position: outside; }
.prose-simulation ul { list-style-type: disc; }
.prose-simulation ol { list-style-type: decimal; }
.prose-simulation li { padding-left: 0.25rem; margin-top: 0.4rem; }

/* ─── Prose universelle (pages legales, single article body) ────────────── */
.flm-prose { font-size: 16px; line-height: 1.7; color: var(--color-ink); }
.flm-prose > * + * { margin-top: 1rem; }
.flm-prose p { margin: 0.75rem 0; }
.flm-prose strong { color: var(--color-ink); font-weight: 700; }
.flm-prose em { color: var(--color-muted); font-style: italic; }
.flm-prose a { color: var(--color-trust-600); text-decoration: underline; text-underline-offset: 2px; }
.flm-prose a:hover { color: var(--color-trust-700); }
.flm-prose h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-ink);
  margin: 2.5rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-sand-200);
  scroll-margin-top: 5rem;
}
.flm-prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-ink);
  margin: 1.5rem 0 .5rem;
  scroll-margin-top: 5rem;
}
.flm-prose ul, .flm-prose ol { margin: .75rem 0; padding-left: 1.5rem; }
.flm-prose ul { list-style: disc; }
.flm-prose ol { list-style: decimal; }
.flm-prose li { margin: .35rem 0; }
.flm-prose li::marker { color: var(--color-coral-500); }
.flm-prose code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .85em;
  background: var(--color-sand-100);
  border: 1px solid var(--color-sand-200);
  border-radius: 4px;
  padding: .1rem .35rem;
  color: var(--color-trust-700);
}
.flm-prose table {
  width: 100%;
  margin: 1.25rem 0;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-sand-200);
  border-radius: 14px;
  overflow: hidden;
  font-size: 14px;
}
.flm-prose thead { background: var(--color-sand-100); }
.flm-prose th {
  text-align: left;
  padding: .65rem 1rem;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
}
.flm-prose td {
  padding: .75rem 1rem;
  border-top: 1px solid var(--color-sand-200);
  vertical-align: top;
}
.flm-prose blockquote {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  background: rgba(232,246,249, .5);
  border-left: 4px solid var(--color-trust-500);
  border-radius: 8px;
  color: var(--color-muted);
  font-style: italic;
}
.flm-prose figure { margin: 1.5rem 0; }
.flm-prose figure img { width: 100%; height: auto; border-radius: 14px; }
.flm-prose figcaption { font-size: 13px; color: var(--color-muted); text-align: center; margin-top: .5rem; }
.flm-prose img { max-width: 100%; height: auto; border-radius: 14px; }
.flm-prose hr { border: 0; border-top: 1px solid var(--color-sand-200); margin: 2rem 0; }

/* ─── Pagination (listings) ─────────────────────────────────────────────── */
.pagination, .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 0;
}
.pagination .page-numbers,
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .75rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-sand-200);
  border-radius: 12px;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
  background: var(--color-sand-100);
  border-color: var(--color-sand-200);
  color: var(--color-trust-700);
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
  background: var(--color-trust-500);
  border-color: var(--color-trust-500);
  color: #fff;
}
.pagination .page-numbers.dots,
.nav-links .page-numbers.dots {
  background: transparent;
  border-color: transparent;
  color: var(--color-muted);
  min-width: 20px;
  padding: 0;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next,
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next {
  padding: 0 1rem;
  background: #fff;
}
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover,
.nav-links .page-numbers.prev:hover,
.nav-links .page-numbers.next:hover {
  background: var(--color-trust-500);
  border-color: var(--color-trust-500);
  color: #fff;
}
/* WP enveloppe la pagination dans <h2 class="screen-reader-text"> + ul */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.prose-resume { color: var(--color-ink); font-size: 0.95rem; line-height: 1.55; }
.prose-resume ul { list-style: none; margin: 0; padding: 0; }
.prose-resume li { position: relative; padding-left: 1.5rem; margin-top: 0.6rem; }
.prose-resume li:first-child { margin-top: 0; }
.prose-resume li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--color-coral-500);
}
.prose-resume strong { font-weight: 700; color: inherit; }

.prose-bon-a-savoir p { color: var(--color-amber-900); margin-bottom: 0.5rem; }
.prose-bon-a-savoir ul { margin-left: 1.2rem; list-style-type: disc; }
.prose-bon-a-savoir li { margin-top: 0.4rem; color: rgba(120, 53, 15, 0.92); line-height: 1.65; }

/* ─── Footer (OG palette) ────────────────────────────────────────────────── */
.site-footer { padding: 4rem 0 2rem; color: #fff; }

/* ─── 1. Bande newsletter en haut ───────────────────────────────────── */
.site-footer-newsletter {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 1024px) {
  .site-footer-newsletter {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 2rem;
  }
}
.site-footer-nl-form {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.site-footer-nl-form input[type="email"] {
  flex: 1; min-width: 200px;
  padding: .75rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.site-footer-nl-form input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.site-footer-nl-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-coral-400);
  background: rgba(255,255,255,0.12);
}
.site-footer-nl-form button {
  padding: .75rem 1.5rem;
  border: 0; border-radius: 12px;
  background: var(--color-coral-500);
  color: #fff; font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background .15s;
}
.site-footer-nl-form button:hover { background: var(--color-coral-600); }
.site-footer-nl-msg { font-size: 13px; margin: .5rem 0 0; min-height: 1em; }

/* ─── 2. Grid 2/5 cols + brand col + socials ────────────────────────── */
.site-footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 3rem; }
@media (min-width: 768px) { .site-footer-grid { grid-template-columns: repeat(5, 1fr); } }
.site-footer__brand-col { grid-column: span 2; }
.site-footer__brand-col a:hover { opacity: .85; }

.site-footer-socials {
  display: flex; gap: .5rem; margin-top: 1.25rem;
}
.site-footer-socials a {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background .15s;
}
.site-footer-socials a:hover { background: var(--color-coral-500); }

.site-footer__col-title { font-weight: 600; margin-bottom: 0.75rem; color: #fff; font-size: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0.5rem 0; }
.site-footer a { color: rgba(255,255,255,0.7); font-size: 14px; text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--color-coral-300); }

/* ─── 3. Bottom bar ─────────────────────────────────────────────────── */
.site-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.site-footer-bottom a { color: inherit; font-size: 12px; }
.site-footer-bottom a:hover { color: #fff; }

/* ─── Utility ───────────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--color-coral-500);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.muted { color: var(--color-muted); }
.text-amber { color: var(--color-coral-500); }
.text-blue { color: var(--color-forest-500); }
/* Padding vertical seulement (cf .hero-og__inner). */
.section { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .section { padding-top: 4rem; padding-bottom: 4rem; } }

/* ═══════════════════════════════════════════════════════════════════════════
 * Classes extraites des anciens styles inline (refactor propreté).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Commun ─────────────────────────────────────────────────────────────── */
.hero-og__breadcrumb strong { color: #fff; }
.hero-og__title--sm { font-size: clamp(28px, 4vw, 48px); }
.hero-og__title--xs { font-size: clamp(28px, 3vw, 40px); }

/* ─── Header / footer : logo ─────────────────────────────────────────────── */
.site-header__logo img { height: 56px; width: auto; display: block; }
.site-footer__logo { display: inline-block; text-decoration: none; transition: opacity .15s; }
.site-footer__logo img { height: 64px; width: auto; display: block; }
.site-footer__desc { margin-top: .75rem; color: rgba(255,255,255,.6); font-size: 14px; max-width: 30rem; line-height: 1.5; }

/* ─── Footer : bandeau newsletter + bottom ───────────────────────────────── */
.site-footer-newsletter .kicker { color: var(--color-coral-300); }
.site-footer-nl__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; margin: .25rem 0 .5rem; color: #fff; }
.site-footer-nl__text { color: rgba(255,255,255,.7); max-width: 28rem; font-size: 14px; line-height: 1.55; margin: 0; }
.site-footer-bottom__links { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ─── Commentaires ───────────────────────────────────────────────────────── */
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.comments-closed { font-size: 13px; color: var(--color-muted); margin-top: 1rem; }
.flm-comment-reply-title { font-size: 1.05rem; margin: 0 0 1rem; color: var(--color-ink); }
.flm-label-note { font-weight: 400; text-transform: none; letter-spacing: 0; }
.flm-cform-extra { margin-top: .5rem; }
.flm-cform-extra a { font-size: 12px; color: var(--color-trust-600); font-weight: 600; text-decoration: none; }

/* ─── Listings (archive / category / author) ─────────────────────────────── */
.flm-link-strong { color: var(--color-trust-600); font-weight: 600; text-decoration: none; }

.flm-chip-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.flm-chip {
    padding: .4rem .9rem;
    border: 1px solid var(--color-sand-200);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: #fff;
    color: var(--color-ink);
}
.flm-chip.is-active {
    background: var(--color-forest-500);
    border-color: var(--color-forest-500);
    color: #fff;
}

.flm-grid-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.flm-post-card { padding: 1.5rem; }
.flm-post-card__thumb { display: block; margin: -1.5rem -1.5rem 1rem; border-radius: 20px 20px 0 0; overflow: hidden; }
.flm-post-card__thumb img { width: 100%; height: auto; display: block; }
.flm-post-card__title { font-size: 1.125rem; margin: .25rem 0 .5rem; }
.flm-post-card__title a { color: inherit; }
.flm-post-card__excerpt { font-size: 14px; line-height: 1.55; }
.flm-post-card__meta { margin-top: .75rem; font-size: 12px; color: var(--color-muted); }

.flm-pagination-center { margin-top: 2.5rem; display: flex; justify-content: center; }
.flm-empty { color: var(--color-muted); }

/* ─── Page auteur ────────────────────────────────────────────────────────── */
.flm-cat-meta { font-size: 14px; color: var(--color-muted); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.flm-author-head { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 1rem; }
.flm-author-photo { width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); flex-shrink: 0; }
.flm-author-socials { display: flex; gap: .75rem; margin-top: .75rem; font-size: 14px; }
.flm-author-socials a { color: #fff; }
.flm-author-h2 { margin-bottom: 1rem; }
.flm-count-note { font-weight: 400; color: var(--color-muted); font-family: var(--font-body); font-size: .75em; }

/* ═══════════════════════════════════════════════════════════════════════
 * Sous-menus déroulants (menu principal 2 niveaux) + bouton CTA
 * Ajout greffe — structure d'arborescence assurance.
 * ═══════════════════════════════════════════════════════════════════════ */
.site-header__nav .nav-item { position: relative; display: inline-flex; align-items: center; }
.site-header__nav .nav-item > a { padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); white-space: nowrap; color: rgba(44,44,42,0.8); }
.site-header__nav .nav-item > a:hover { background: var(--color-sand-100); }
.site-header--transparent .site-header__nav .nav-item > a { color: rgba(255,255,255,0.9); }
.site-header--transparent .site-header__nav .nav-item > a:hover { background: rgba(255,255,255,0.1); }
.site-header__nav .nav-item--has-children > a::after { content: "\25BE"; margin-left: 0.3rem; font-size: 0.7em; opacity: 0.85; }
.site-header__nav .nav-dropdown {
	position: absolute; top: calc(100% + 4px); left: 0; min-width: 224px;
	display: none; flex-direction: column;
	background: #fff; border: 1px solid var(--color-border, #E2E5E9); border-radius: 12px;
	box-shadow: 0 14px 34px rgba(20,20,42,0.14); padding: 0.4rem; z-index: 60;
}
.site-header__nav .nav-item--has-children:hover .nav-dropdown,
.site-header__nav .nav-item--has-children:focus-within .nav-dropdown { display: flex; }
.site-header__nav .nav-dropdown a { padding: 0.55rem 0.7rem; border-radius: 8px; white-space: nowrap; color: var(--color-forest-700, #14142A); font-weight: 500; }
.site-header__nav .nav-dropdown a:hover { background: var(--color-sand-100, #F7F8FA); color: var(--color-coral-500, #E6006E); }

/* Bouton CTA (Comparer / Devis rapide) */
.site-header__cta--accent { background: var(--color-coral-500, #E6006E); color: #fff !important; border-radius: 999px; }
.site-header__cta--accent:hover { background: #c00060; color: #fff !important; }
.site-header--transparent .site-header__cta--accent,
.site-header--transparent .site-header__cta--accent:hover { color: #fff !important; }

/* Panneau mobile : CTA visible + sous-menus dépliés (statiques) */
.site-mobile-menu .site-header__cta { display: inline-flex !important; margin-bottom: 0.75rem; }
.site-mobile-menu .nav-item, .site-mobile-menu .nav-item > a { display: block; }
.site-mobile-menu .nav-dropdown { display: flex !important; flex-direction: column; position: static; box-shadow: none; border: 0; padding: 0.15rem 0 0.5rem 0.85rem; min-width: 0; background: transparent; }
.site-mobile-menu .nav-item--has-children > a::after { content: ""; }
.site-mobile-menu .nav-dropdown a { color: inherit; padding: 0.35rem 0; }

/* ═══ Squelette Éditorial — blocs sur les pages et archives (chrome TSA) ═══
   Mêmes blocs que sur la page article, exprimés avec les tokens du thème
   d'accueil pour rester dans la charte de chaque site. */

.flm-prose .se-chapo{
  font-size:1.16em; line-height:1.6; font-weight:500;
  color:var(--color-muted); margin-bottom:1.6em;
}

.flm-prose .se-essentiel{
  background:var(--color-sand-100);
  border:1px solid var(--color-sand-200);
  border-left:3px solid var(--color-coral-500);
  border-radius:var(--radius-sm);
  padding:1.25em 1.5em; margin:1.8em 0 2em;
}
.flm-prose .se-essentiel .se-essentiel-titre{
  margin:0 0 .7em; font-size:1.15em; color:var(--color-ink);
  font-family:var(--font-display);
}
.flm-prose .se-essentiel .se-essentiel-liste{ margin:0; padding-left:1.2em; }
.flm-prose .se-essentiel .se-essentiel-liste li{ margin-bottom:.5em; line-height:1.55; }
.flm-prose .se-essentiel .se-essentiel-liste li:last-child{ margin-bottom:0; }

.flm-prose h2.se-faq{
  margin-top:2.2em; padding-top:1.1em;
  border-top:1px solid var(--color-sand-200);
}

.flm-prose .se-maillage{
  background:var(--color-sand-100);
  border:1px solid var(--color-sand-200);
  border-left:3px solid var(--color-coral-500);
  border-radius:var(--radius-sm);
  padding:1.1em 1.4em; margin:2.2em 0 1em;
}
.flm-prose .se-maillage .se-maillage-titre{
  margin:0 0 .6em; font-size:1.05em; color:var(--color-ink);
  font-family:var(--font-display);
}
.flm-prose .se-maillage ul{ margin:0; padding-left:1.2em; }
.flm-prose .se-maillage li{ margin-bottom:.4em; }
.flm-prose .se-maillage li:last-child{ margin-bottom:0; }

/* Intro SEO des pages de rubrique (fournie par le plugin) */
.se-cat-intro{ color:var(--color-muted); line-height:1.65; }
.se-cat-intro-toggle{ color:var(--color-coral-500); }


/* ═══ Fix trou de survol du menu déroulant (2026-07-30) ═══
   Le déroulant est posé à top:calc(100% + 4px) : l'espace de 4px sous
   l'entrée parente n'est survolable par rien, donc le menu se referme
   avant qu'on l'atteigne. Ce pont invisible prolonge la zone de survol
   sur tout l'espace (il fait partie de .nav-dropdown, lui-même enfant de
   .nav-item--has-children, donc le parent reste :hover). */
.site-header__nav .nav-item--has-children > .nav-dropdown::before {
	content: ""; position: absolute; top: -8px; left: 0; right: 0;
	height: 8px; background: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════
 * CHARTE « PANNEAU PUBLICITAIRE » v1.0 — publicité extérieure et enseignes
 * Bleu Nuit #141B34 (structure) · Rouge Affiche #E4322B (accent unique)
 * Poppins (display) + Inter (corps). Angles 12px.
 * ═══════════════════════════════════════════════════════════════════════ */
:root {
  --pb-nuit:#141B34; --pb-nuit-fonce:#0E1327; --pb-nuit-profond:#090C1B;
  --pb-rouge:#E4322B; --pb-rouge-fonce:#B92019; --pb-rouge-clair:#FF8A84;
  --pb-fond:#F6F6F9; --pb-surface:#FFFFFF; --pb-encre:#15172A;
  --pb-muted:#63677F; --pb-ligne:#E1E2EC;

  /* forest = structure (header, héro, footer, titres) */
  --color-forest-50:#EDEEF4; --color-forest-100:#D4D6E4; --color-forest-200:#A9ADC8;
  --color-forest-300:#767C9F; --color-forest-400:#4B5178; --color-forest-500:#252C4F;
  --color-forest-600:#1A2140; --color-forest-700:#141B34;
  --color-forest-800:#0E1327; --color-forest-900:#090C1B;

  /* coral = accent rouge affiche (liens, CTA, kickers, filets) */
  --color-coral-50:#FDECEB; --color-coral-100:#FBD0CE; --color-coral-200:#F7A9A5;
  --color-coral-300:#FF8A84; --color-coral-400:#EE564F; --color-coral-500:#E4322B;
  --color-coral-600:#C7261F; --color-coral-700:#B92019; --color-coral-800:#8C1712;
  --color-coral-900:#5F0F0C;

  --color-trust-50:#EDEEF4; --color-trust-500:#252C4F; --color-trust-700:#141B34;

  --color-sand-50:#F6F6F9; --color-sand-100:#EEEFF5;
  --color-sand-200:#E1E2EC; --color-sand-300:#C6C8D8;

  --color-ink:#15172A; --color-muted:#63677F;

  --font-display:"Poppins","Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
}

/* Héro : bleu nuit plein, sans dégradé ni pois */
.hero-og { background:var(--pb-nuit) !important; }
.hero-og::before, .hero-og::after { display:none !important; }

/* Titres et liens : la structure sert de fond ET de texte dans le thème de
   base, on explicite donc les cas où le bleu nuit doit rester lisible. */
.hero-og, .hero-og h1, .hero-og h2, .hero-og p, .hero-og a { color:#fff; }
.hero-og .kicker { color:var(--pb-rouge-clair); }

body { background:var(--pb-fond); color:var(--pb-encre); }
h1, h2, h3, h4 { font-family:var(--font-display); font-weight:700; letter-spacing:-0.015em; }
a { color:var(--pb-rouge-fonce); }
a:hover { color:var(--pb-nuit); }
.kicker { color:var(--pb-rouge-fonce); font-weight:700; letter-spacing:0.07em; text-transform:uppercase; }

/* Cartes : filet rouge en tête, angles généreux */
.flm-post-card {
  background:var(--pb-surface); border:1px solid var(--pb-ligne);
  border-top:3px solid var(--pb-rouge); border-radius:12px;
  box-shadow:0 2px 12px rgba(20,27,52,.07);
}
.flm-post-card:hover { box-shadow:0 10px 28px rgba(20,27,52,.15); }

/* Boutons / CTA : rouge affiche */
.site-header__cta--accent,
.site-header__cta--accent:hover {
  background:var(--pb-rouge); color:#fff !important; border-radius:12px;
}
.site-header__cta--accent:hover { background:var(--pb-rouge-fonce); }
.button, .btn, input[type="submit"], button[type="submit"] {
  border-radius:12px; background:var(--pb-rouge); color:#fff;
}
.button:hover, .btn:hover { background:var(--pb-rouge-fonce); }

/* Chrome — NE PAS toucher au fond de .site-header : il est toujours
   transparent (posé au-dessus du héro), une règle de fond le casserait. */
.site-footer { background:var(--pb-nuit-profond); color:#E8E9F1; }
.site-footer a { color:#C9CBDD; }
.site-footer a:hover { color:#fff; }
.site-header__nav .nav-dropdown a:hover { background:var(--color-sand-100); color:var(--pb-rouge-fonce); }

/* ═══ CORRECTIF CHROME 2026-08-06 — logo du header + nav ═══
   .site-header__row est un conteneur flex ; le lien .site-header__logo hérite
   de flex-shrink:1 et min-width:auto. Dès que la nav occupe la ligne, le logo
   est comprimé — l'image se charge bien (HTTP 200, naturalWidth correct) mais
   se retrouve déformée ou réduite à rien. Diagnostic : getComputedStyle(img)
   .width très inférieur à naturalWidth/naturalHeight × hauteur. */
.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { height: 48px; width: auto; }
.site-footer__logo img { height: 56px; width: auto; }
.site-header__row { gap: 0.75rem; }
.site-header__nav { font-size: 13px; gap: 0.125rem; margin-left: 0.75rem; }
.site-header__nav a { padding: 0.5rem 0.4rem; }

/* Le thème affiche la nav dès 1024 px, alors qu'avec le logo et le CTA elle a
   besoin de ~1200 px : entre les deux, le header débordait du conteneur.
   On garde le menu burger — qui contient déjà tout le menu — jusqu'à 1280 px. */
@media (max-width: 1279.98px) {
  .site-header__nav, .mega-menu-wrap { display: none !important; }
  .site-header__burger { display: inline-flex !important; }
}