/* =============================================================
   MASTER BLOG — BASE.CSS
   Commun à toutes les pages : reset, layout, header, nav,
   hero (homepage + archives), boutons, cards, breadcrumb,
   tags, footer, utilitaires, bannière CMP, print, sitemap, WPForms.
   ============================================================= */

/* ── RESET · BASE · LAYOUT · HEADER · NAV ──────────────── */
/* =============================================================
   MASTER BLOG — STYLES PRINCIPAUX
   Fond clair forcé, dégradés CSS, typo Lora (serif, titres + texte)
   ============================================================= */

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── ANTI-SCROLL LATÉRAL ──────────────────────────────────── */
/* Une URL brute ou un mot très long est insécable par défaut : sa
   largeur devient la largeur minimale du bloc, qui dépasse alors le
   viewport et déclenche un scroll horizontal sur mobile. On autorise
   la césure interne partout où il y a du texte de contenu.
   Pas d'`overflow-x: hidden` sur html/body : ça casserait le
   `position: sticky` du header. */
:where(p, li, dd, dt, td, th, figcaption, blockquote, cite,
       h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

/* ── BASE ─────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg, #ffffff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titres : la serif porte déjà l'emphase, on garde des graisses nettes.
   Lora plafonne à 700 — un font-weight: 800 est ramené à 700 par le
   navigateur, sans graisse synthétique. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
}

/* ── SURLIGNAGE MARQUEUR ──────────────────────────────────── */
/* Bande de couleur derrière la fin d'un mot, façon feutre.
   Un dégradé plutôt qu'un ::after : ça suit les retours à la ligne
   et ça n'introduit aucun contexte d'empilement.
   Usages : <mark> (bouton « surligner » de l'éditeur WP) ou .hl. */
/* !important : l'outil « Surligner » de l'éditeur écrit un
   style="background-color:…" inline sur le <mark> (cf. WP
   format-library, format core/text-color). Sans cette surcharge, la
   couleur choisie dans l'éditeur peindrait un pavé plein derrière le
   texte et la bande se dessinerait par-dessus. On force donc la teinte
   de la palette, quelle que soit la couleur choisie en rédaction. */
mark,
.hl {
  color: inherit;
  background-color: transparent !important;
  background-image: linear-gradient(
    to top,
    var(--color-highlight) 0,
    var(--color-highlight) var(--highlight-height),
    transparent var(--highlight-height)
  );
  padding-inline: .08em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main    { flex: 1; }

/* Article sans sidebar — colonne centrée */
.content-single-wrap {
  max-width: 760px;
  margin-inline: auto;
  padding-block: 2.5rem;
}

/* Sans sidebar (homepage, archive, page) */
.content-full-wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-block: 2.5rem;
}

/* ── HEADER ───────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 1rem;
}

/* ── LOGO AVEC PICTO SVG ──────────────────────────────────── */
.site-logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text);
}

.logo-mark {
  width: 38px;
  height: 38px;
  background: var(--gradient-primary);
  border-radius: var(--logo-border-radius);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: transform var(--transition), box-shadow var(--transition);
}
.site-logo:hover .logo-mark {
  transform: rotate(-4deg) scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

/* Picto SVG injecté via PHP */
.logo-mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Picto Emoji */
.logo-mark .logo-emoji {
  font-size: 1.25rem;
  line-height: 1;
  display: block;
}

.logo-text {
  display: inline-block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: .15em;
}

/* ── NAV ──────────────────────────────────────────────────── */
.main-nav { display: flex; align-items: center; gap: .25rem; }
.main-nav li { list-style: none; list-style-type: none; }
.main-nav li::marker { content: none !important; }
.main-nav li::before { display: none !important; }

.main-nav a {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: .375rem .875rem;
  border-radius: 999px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.main-nav a:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
.main-nav a.current-menu-item,
.main-nav a.current-menu-ancestor {
  color: #fff;
  background: var(--gradient-primary);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.nav-toggle-icon span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  width: 20px;
}
.nav-toggle-icon span + span { margin-top: 5px; }


/* ── HERO BLOG (homepage + archives) ────────────────────── */
/* ── HERO BLOG ────────────────────────────────────────────── */
.site-hero {
  background:
    radial-gradient(ellipse 80% 60% at 15% 110%, var(--color-primary-border) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90%  -5%, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 55%),
    var(--gradient-hero);
  border-bottom: 1px solid var(--color-primary-border);
  position: relative;
  overflow: hidden;
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Blobs décoratifs */
.site-hero::before,
.site-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.site-hero::before {
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 60%);
  opacity: .18;
  top: -280px; right: -160px;
}
.site-hero::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--color-primary-dark) 0%, transparent 60%);
  opacity: .14;
  bottom: -200px; left: -100px;
}

/* Variante bannière homepage */
.site-hero--banner {
  border-bottom: none;
}
.site-hero--banner::before { content: none !important; display: none !important; opacity: 0 !important; background: none !important; }
.site-hero--banner .site-hero-inner {
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(1.5rem, 8vw, 8rem);
  background: none;
}
.site-hero--banner .site-hero-tagline { color: #fff !important; }
.site-hero--banner .site-hero-welcome { color: #fff !important; }
/* Sur photo, l'emoji peut se fondre dans le décor : une ombre portée le
   décolle du fond sans lui ajouter de contour. */
.site-hero--banner .site-hero-emoji { filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
.site-hero--banner .site-hero-name {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
/* Sur bannière le texte passe en blanc : la bande pastel du surlignage
   deviendrait illisible. On la remplace par un aplat translucide de la
   couleur de marque, assez sombre pour garder le contraste du blanc. */
.site-hero--banner .site-hero-name .hl {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-primary-dark) 75%, transparent) 0,
    color-mix(in srgb, var(--color-primary-dark) 75%, transparent) var(--highlight-height),
    transparent var(--highlight-height)
  );
}
.site-hero--banner .logo-mark { box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.site-hero--banner .site-hero-title em {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* Variante archive — hauteur réduite */
.site-hero--archive {
  min-height: 42vh;
}
.site-hero--archive .site-hero-inner {
  padding: 3.75rem 2rem 3.25rem;
}


.site-hero-title--archive {
  flex-direction: row;
}
.site-hero-title--archive em {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
}


/* Contenu centré */
.site-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  padding: 6rem 2rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.375rem;
}

.site-hero-title {
  display: flex;
  flex-direction: column;
  gap: .2em;
  margin: 0;
  animation: hero-in .4s ease both .15s;
}
/* Hero homepage : sur-titre manuscrit + nom du blog surligné, le tout centré.
   Pas de picto ici — le logo complet reste dans le header collant. */
.site-hero-title--home {
  align-items: center;
  text-align: center;
  gap: .5rem;
}

/* Caveat tranche volontairement avec la serif du nom. La famille n'est
   chargée que sur la homepage, sous-ensemblée aux seuls glyphes du mot
   (cf. master_blog_script_font()). line-height figé : si la police arrive
   en retard (display=swap), la ligne garde sa hauteur — pas de CLS. */
.site-hero-welcome {
  font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--color-primary);
}

/* Emoji du hero : fond transparent, aucune pastille — contrairement au
   .logo-mark du header. Placé sous le nom du blog, il garde une marge haute
   suffisante pour ne pas toucher la bande de surlignage (.52em de haut,
   qui déborde sous la ligne de base). line-height figé : pas de CLS. */
.site-hero-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1;
  display: block;
  margin: .15em 0 0;
}

.site-hero-name {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  padding-bottom: .12em;
  color: var(--color-text);
}
/* Bande plus haute qu'en courant : à cette taille, la valeur globale
   (.36em) tombe sous la ligne de base à cause de la descendante de Lora et
   la bande se lit comme un soulignement. .52em la fait mordre sur le bas
   des lettres, comme au feutre. */
.site-hero-name .hl {
  --highlight-height: .52em;
}
/* Titre de hero (archives) : texte plein, l'accent est porté par le
   surlignage marqueur du .hl interne (cf. archive.php) plutôt que par un
   dégradé détouré — la serif garde ainsi tout son contraste.
   Pour revenir au dégradé : rétablir le bloc background-clip: text. */
.site-hero-title em {
  font-style: normal;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  padding-bottom: .12em;
  color: var(--color-text);
}

.site-hero-tagline {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
  animation: hero-in .4s ease both .25s;
}
.site-hero-tagline p {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  margin: 0 0 .75rem;
}
.site-hero-tagline p:last-child { margin-bottom: 0; }

.site-hero-inner .btn-primary {
  margin-top: 2rem;
  animation: hero-in .4s ease both .35s;
}

/* ── BOUTONS ─────────────────────────────────────────────── */
/* Boutons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--gradient-primary);
  color: #fff;
  padding: .75rem 1.625rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  transition: transform var(--transition), box-shadow var(--transition);
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.24);
}

/* Blocs Gutenberg Button — identiques à .btn-primary */
.wp-block-button__link,
.wp-element-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: var(--gradient-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  padding: .75rem 1.625rem !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  text-decoration: none !important;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.24) !important;
  color: #fff !important;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-primary);
  padding: .75rem 1.625rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--color-primary-border);
  background: rgba(255,255,255,.6);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  cursor: pointer;
}
.btn-secondary:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateY(-2px);
}

/* Indicateur de scroll */
.site-hero-scroll {
  position: absolute;
  bottom: 1.625rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--color-primary-border);
  color: var(--color-text-muted);
  text-decoration: none;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  animation: hero-scroll-pulse 2.4s ease-in-out infinite;
  transition: color var(--transition), background var(--transition);
}
.site-hero-scroll:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
@keyframes hero-scroll-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  55%       { transform: translateX(-50%) translateY(7px); }
}

/* Animations d'entrée */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stats hero (legacy, conservé pour compatibilité) */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 3rem;
  position: relative;
}
.hero-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.hero-stat-label { font-size: .8125rem; color: var(--color-text-muted); }


/* ── CARDS D'ARTICLES ─────────────────────────────────────── */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-card);
  margin-bottom: var(--gap-section);
}
.articles-grid--2col { grid-template-columns: repeat(2, 1fr); }
.articles-grid--3col { grid-template-columns: repeat(3, 1fr); }

.article-card {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.card-thumbnail {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--gradient-hero);
  position: relative;
  display: block;
}
.card-thumbnail img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.article-card:hover .card-thumbnail img { transform: scale(1.06); }

/* Placeholder avec dégradé palette si pas d'image */
.card-thumbnail-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary-dark) 60%, var(--color-primary) 100%);
  display: grid;
  place-items: center;
}
.card-thumbnail-placeholder svg {
  display: none;
}

.card-body { padding: 1.125rem; flex: 1; display: flex; flex-direction: column; container-type: inline-size; }

.card-category {
  display: inline-flex;
  align-items: center;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: .2rem .625rem;
  border-radius: 999px;
  margin-bottom: .5rem;
  border: 1px solid var(--color-primary-border);
}

.card-title {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  color: var(--color-text);
  margin-bottom: auto;
  padding-bottom: .875rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title a { color: inherit; transition: color var(--transition); }
.card-title a:hover { color: var(--color-primary); }

.card-excerpt {
  font-size: .8125rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  color: var(--color-text-light);
  border-top: 1px solid var(--color-border-light);
  padding-top: .75rem;
  margin-top: auto;
}
@container (max-width: 200px) {
  .card-meta-avatar,
  .card-meta-author,
  .card-meta-author + .card-meta-sep {
    display: none;
  }
}

.card-meta-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--color-primary-border);
}
.card-meta-author {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.card-meta-sep {
  opacity: .35;
  flex-shrink: 0;
}

.reading-time {
  background: var(--color-bg-secondary);
  padding: .15rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.card-read-more {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-top: .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: gap var(--transition), color var(--transition);
  user-select: none;
}
.card-read-more:hover {
  color: var(--color-primary-dark);
  gap: .5em;
}
.card-read-more svg {
  flex-shrink: 0;
  transition: transform var(--transition);
}
.card-read-more:hover svg {
  transform: translateX(3px);
}


/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: var(--color-text-light);
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-primary); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--color-primary-dark); }
.breadcrumb-sep { color: var(--color-border); }


/* ── TAGS ─────────────────────────────────────────────────── */
/* ── TAGS ─────────────────────────────────────────────────── */
.tags-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.tag-item {
  font-size: .75rem;
  font-weight: 600;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .3rem .875rem;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.tag-item:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  background: var(--color-dark);
  color: #94a3b8;
  padding: 3.5rem 1.5rem 2rem;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1rem;
  text-decoration: none;
}
.footer-col .footer-logo { display: flex; }
.footer-logo-mark {
  width: 36px; height: 36px;
  background: var(--gradient-primary);
  border-radius: var(--logo-border-radius);
  display: grid;
  place-items: center;
}
.footer-logo-mark svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.footer-site-name { font-size: 1rem; font-weight: 700; color: #f1f5f9; }

.footer-col .footer-col-title { font-size: .875rem; font-weight: 700; color: #f1f5f9; margin-bottom: .875rem; }
.footer-greeting { font-size: .8125rem; color: #64748b; margin-top: .5rem; }

.footer-col p, .footer-col a {
  font-size: .8125rem;
  color: #94a3b8;
  line-height: 1.9;
  display: block;
  transition: color var(--transition);
}
.footer-col a:hover { color: #fff; }
.footer-col li { list-style: none; }
.footer-col li::marker { content: none; }

.footer-social { margin-top: 1.25rem; }
.footer-social-label { font-size: .9375rem; font-weight: 700; color: #f1f5f9; margin-bottom: .75rem; }
.footer-social-links { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Sélecteur à 2 classes : « .footer-col p, .footer-col a » impose display:block
   et l'emporterait sinon, ce qui décale l'icône en haut à gauche du cercle. */
.footer-social-links .footer-social-link {
  display: grid;
  place-items: center;
  line-height: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #cbd5e1;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.footer-social-links .footer-social-link:hover {
  background: var(--gradient-primary);
  color: #fff;
  transform: translateY(-2px);
}
.footer-social-link svg { display: block; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .75rem;
  color: #94a3b8;
  flex-wrap: wrap;
  gap: .5rem;
}


/* ── UTILITAIRES ──────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── RESPONSIVE — base ────────────────────────────────────── */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 1.5rem;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    z-index: 50;
  }
  .main-nav.is-open { display: flex; }
  .nav-toggle { display: flex; }
  .header-inner { position: relative; }

  .articles-grid, .articles-grid--2col, .articles-grid--3col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  /* Hero mobile */
  .site-hero { min-height: unset; }
  .site-hero-inner { padding: 4rem 1.25rem 5rem; }
  .hero-stats { gap: 1.5rem; }
}

@media (max-width: 480px) {
  .hero-stats { flex-direction: column; align-items: center; }
  .site-hero-inner .btn-primary { width: 100%; justify-content: center; }
}

/* ── FOCUS VISIBLE ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ── BANNIÈRE CMP ─────────────────────────────────────────── */
.master-cmp {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 3rem);
  max-width: 720px;
  background: var(--color-dark);
  color: #e2e8f0;
  border-radius: .875rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  z-index: 9999;
  padding: 1.25rem 1.5rem;
  border-top: 3px solid var(--color-primary);
}
.master-cmp[hidden] { display: none; }
.master-cmp-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.master-cmp-text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: #cbd5e1;
}
.master-cmp-link {
  color: var(--color-primary);
  text-decoration: underline;
  white-space: nowrap;
  margin-left: .25rem;
}
.master-cmp-link:hover { color: var(--color-primary-dark); }
.master-cmp-services {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: .875rem 1rem;
  background: rgba(255,255,255,.05);
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.1);
}
.master-cmp-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.master-cmp-service-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.master-cmp-service-info strong {
  font-size: .875rem;
  color: #e2e8f0;
}
.master-cmp-service-info span {
  font-size: .75rem;
  color: #94a3b8;
}
.master-cmp-switch {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  flex-shrink: 0;
  cursor: pointer;
}
.master-cmp-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.master-cmp-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  transition: background .2s;
}
.master-cmp-switch-track::before {
  content: '';
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  top: .1875rem;
  left: .1875rem;
  transition: transform .2s;
}
.master-cmp-switch input:checked + .master-cmp-switch-track { background: var(--color-primary); }
.master-cmp-switch input:checked + .master-cmp-switch-track::before { transform: translateX(1.25rem); }
.master-cmp-switch input:focus-visible + .master-cmp-switch-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.master-cmp-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.master-cmp-btn {
  padding: .5rem 1.25rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity .2s;
}
.master-cmp-btn:hover { opacity: .85; }
.master-cmp-btn--accept {
  background: var(--color-primary);
  color: #fff;
}
.master-cmp-btn--refuse {
  background: rgba(255,255,255,.1);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,.15);
}
.master-cmp-btn--save {
  background: transparent;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.35);
}
@media (max-width: 540px) {
  .master-cmp-actions { justify-content: stretch; }
  .master-cmp-btn { flex: 1; text-align: center; }
}
.master-cmp-trigger {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-dark);
  border: 2px solid var(--color-primary);
  font-size: 1.625rem;
  line-height: 1;
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.master-cmp-trigger[hidden] { display: none; }
.master-cmp-trigger:hover { transform: scale(1.12); box-shadow: 0 4px 20px rgba(0,0,0,.35); }


/* ── PRINT ────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .sidebar, .related-articles,
  .schema-indicators, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}

/* ── PLAN DU SITE ─────────────────────────────────────────── */
.sitemap { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2rem; }

.sitemap-section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary-border);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.sitemap-section-title a { color: var(--color-primary); text-decoration: none; }
.sitemap-section-title a:hover { color: var(--color-primary-dark); }
.sitemap-count { font-size: .8125rem; font-weight: 500; color: var(--color-text-muted); }

.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sitemap-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .375rem .625rem;
  border-radius: var(--radius-sm, 6px);
  transition: background var(--transition);
}
.sitemap-list li:hover { background: var(--color-primary-light); }
.sitemap-list a { color: var(--color-text); text-decoration: none; font-size: .9375rem; flex: 1; }
.sitemap-list a:hover { color: var(--color-primary); }
.sitemap-date { font-size: .8125rem; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── WPFORMS — charte graphique ───────────────────────────── */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--color-primary-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field select:focus,
.wpforms-container .wpforms-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.wpforms-container .wpforms-field label {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .375rem;
  display: block;
}

.wpforms-container .wpforms-submit-container {
  margin-top: 1.25rem;
}

.wpforms-container button[type="submit"],
.wpforms-container input[type="submit"],
.wpforms-container .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  background: var(--gradient-primary) !important;
  color: #fff !important;
  padding: .75rem 1.875rem !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  text-decoration: none !important;
  width: auto !important;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container input[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.24) !important;
  background: var(--gradient-primary) !important;
}

.wpforms-container .wpforms-error-container,
.wpforms-container .wpforms-field-error {
  color: #dc2626;
  font-size: .8125rem;
  margin-top: .25rem;
  font-family: var(--font-sans);
}

.wpforms-confirmation-container-full {
  padding: 1.5rem 2rem;
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
}