/* ==========================================================================
   EXPAWORLD Glossaire
   - Hub /outils/glossaire : refonte « direction A » (hero outil centré,
     style docs/Algolia). Fond crème, recherche en héros, stat strip,
     index A-Z compact, grille de cartes.
   - Single terme + lead magnet : design aligné sur reader/astra-child,
     conservé tel quel.
   Scopé sous .exwg pour éviter toute collision avec le thème.
   ========================================================================== */

.exwg {
  --exwg-accent: #F26522;
  --exwg-accent-hover: #D85510;
  --exwg-accent-soft: #FFF7ED;
  --exwg-text: #1A1A1A;
  --exwg-text-dim: #555555;
  --exwg-text-muted: #6B7280;
  --exwg-text-soft: #888888;
  --exwg-bg: #FFFFFF;
  --exwg-bg-soft: #FAFAFA;
  --exwg-bg-cream: #FAFAF8;
  --exwg-border: #E5E7EB;
  --exwg-border-soft: #F0F0F0;
  /* Palette crème chaud du hub (refresh direction A). */
  --bg: #F8F4EC;
  --exwg-cream: #F8F4EC;
  --exwg-surface: #FBF8F1;
  --exwg-ink: #2B2620;
  --exwg-az-faint: #A99E8A;
  --exwg-az-hover-bg: #EAE1D1;
  --exwg-az-accent: #D2691E;
  --exwg-line2: rgba(43, 38, 32, 0.12);
  --exwg-hairline: rgba(0, 0, 0, 0.15);
  --exwg-hairline-faint: rgba(0, 0, 0, 0.08);
  --exwg-card-border: rgba(0, 0, 0, 0.1);
  --exwg-radius: 8px;
  --exwg-radius-lg: 12px;
  --exwg-radius-xl: 16px;
  --exwg-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --exwg-shadow-card: 0 6px 20px rgba(0,0,0,0.06);
  --exwg-content-max: 1080px;
  --exwg-reading-max: 740px;
  --exwg-hero-max: 720px;
  --exwg-field-max: 460px;
}

.exwg-wrap {
  max-width: var(--exwg-content-max);
  margin: 0 auto;
  padding: 28px 20px 80px;
  font-family: var(--ew-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--exwg-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Fond crème chaud commun à l'archive et au single : la fiche d'un terme
   reprend exactement la même teinte que l'archive (#F8F4EC), pour qu'on
   n'ait aucune rupture visuelle quand on clique sur une carte. */
body.exwg-archive,
body.exwg-single {
  background-color: var(--bg);
}

/* Header du thème transparent sur archive et single : pas de bande
   blanche entre le menu et le contenu, le crème circule de bout en
   bout. Le header reste superposé au contenu (position absolute) sur
   l'archive pour que le bandeau hero parte tout en haut ; sur le single,
   pas de hero, mais l'absence de fond crème évite la coupure blanche.
   #page / .site passe en position: relative pour caler le header
   absolu sous l'éventuelle barre d'admin WordPress. */
body.exwg-archive #page,
body.exwg-archive .site,
body.exwg-single #page,
body.exwg-single .site {
  position: relative;
}
body.exwg-archive #masthead,
body.exwg-archive .site-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 90;
}
body.exwg-archive #masthead,
body.exwg-archive .site-header,
body.exwg-archive .ast-primary-header-bar,
body.exwg-archive .main-header-bar,
body.exwg-archive .ast-above-header,
body.exwg-archive .ast-below-header,
body.exwg-single #masthead,
body.exwg-single .site-header,
body.exwg-single .ast-primary-header-bar,
body.exwg-single .main-header-bar,
body.exwg-single .ast-above-header,
body.exwg-single .ast-below-header {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* Le menu doit rester lisible sur l'overlay crème clair du bandeau. */
body.exwg-archive #masthead a,
body.exwg-archive .site-header a,
body.exwg-archive .main-header-menu a,
body.exwg-archive .site-title a,
body.exwg-archive .ast-site-identity a,
body.exwg-single #masthead a,
body.exwg-single .site-header a,
body.exwg-single .main-header-menu a,
body.exwg-single .site-title a,
body.exwg-single .ast-site-identity a {
  color: var(--exwg-text) !important;
}
/* Icônes du header global (compte, panier, recherche) en ink sur les
   pages glossaire. Astra peut poser fill="#FFFFFF" sur les <path> en
   inline, donc une règle sur <svg> ne suffit pas : on cible aussi
   svg path / circle pour écraser l'attribut. Tous les sélecteurs sont
   strictement scopés body.post-type-archive-glossaire_terme et
   body.single-glossaire_terme pour ne pas fuiter sur le reste du site. */
body.post-type-archive-glossaire_terme #masthead svg,
body.post-type-archive-glossaire_terme #masthead svg path,
body.post-type-archive-glossaire_terme #masthead svg circle,
body.post-type-archive-glossaire_terme .site-header svg,
body.post-type-archive-glossaire_terme .site-header svg path,
body.post-type-archive-glossaire_terme .site-header svg circle,
body.post-type-archive-glossaire_terme .ast-header-account-wrap svg,
body.post-type-archive-glossaire_terme .ast-header-account-wrap svg path,
body.post-type-archive-glossaire_terme .ast-cart-menu-wrap svg,
body.post-type-archive-glossaire_terme .ast-cart-menu-wrap svg path,
body.single-glossaire_terme #masthead svg,
body.single-glossaire_terme #masthead svg path,
body.single-glossaire_terme #masthead svg circle,
body.single-glossaire_terme .site-header svg,
body.single-glossaire_terme .site-header svg path,
body.single-glossaire_terme .site-header svg circle,
body.single-glossaire_terme .ast-header-account-wrap svg,
body.single-glossaire_terme .ast-header-account-wrap svg path,
body.single-glossaire_terme .ast-cart-menu-wrap svg,
body.single-glossaire_terme .ast-cart-menu-wrap svg path {
  fill: var(--exwg-ink) !important;
  stroke: var(--exwg-ink);
  color: var(--exwg-ink) !important;
}
/* Compteur du panier : pastille (background ink + texte crème) ET
   conteneurs texte associés (.count, .ast-woo-header-cart-info-wrap) */
body.post-type-archive-glossaire_terme .ast-cart-menu-wrap .ast-cart-count,
body.post-type-archive-glossaire_terme .ast-addon-cart-wrap .ast-cart-count,
body.single-glossaire_terme .ast-cart-menu-wrap .ast-cart-count,
body.single-glossaire_terme .ast-addon-cart-wrap .ast-cart-count {
  background-color: var(--exwg-ink) !important;
  color: var(--exwg-cream) !important;
  border-color: var(--exwg-ink) !important;
}
body.post-type-archive-glossaire_terme .ast-cart-menu-wrap .count,
body.post-type-archive-glossaire_terme .ast-cart-menu-wrap .ast-cart-menu-icon-count,
body.post-type-archive-glossaire_terme .ast-cart-menu-wrap .ast-woo-header-cart-info-wrap,
body.single-glossaire_terme .ast-cart-menu-wrap .count,
body.single-glossaire_terme .ast-cart-menu-wrap .ast-cart-menu-icon-count,
body.single-glossaire_terme .ast-cart-menu-wrap .ast-woo-header-cart-info-wrap {
  color: var(--exwg-ink) !important;
}
body.post-type-archive-glossaire_terme .ast-account-text,
body.post-type-archive-glossaire_terme .ast-header-account-wrap,
body.single-glossaire_terme .ast-account-text,
body.single-glossaire_terme .ast-header-account-wrap {
  color: var(--exwg-ink) !important;
}
/* Pastille compteur du panier Astra : c'est un pseudo-element ::after
   du <i class="astra-icon ast-icon-shopping-bag" data-cart-total="0"> qui
   utilise content: attr(data-cart-total). Astra le rend en blanc par
   defaut, invisible sur creme. On force ink + creme avec !important. */
body.post-type-archive-glossaire_terme .astra-icon.ast-icon-shopping-bag::after,
body.post-type-archive-glossaire_terme .astra-icon.ast-icon-shopping-bag::before,
body.single-glossaire_terme .astra-icon.ast-icon-shopping-bag::after,
body.single-glossaire_terme .astra-icon.ast-icon-shopping-bag::before {
  background: var(--exwg-ink) !important;
  background-color: var(--exwg-ink) !important;
  color: var(--exwg-cream) !important;
  border-color: var(--exwg-ink) !important;
}

/* Masquer le breadcrumb global (Astra / Yoast / Rank Math) sur les
   pages glossaire : le hub a son propre repérage (hero + index A-Z),
   le fil d'Ariane fait double emploi. Belt-and-suspenders : la fonction
   exwg_breadcrumb a déjà été retirée des templates ; cette règle couvre
   les autres breadcrumbs potentiellement injectés. */
body.post-type-archive-glossaire_terme .ast-breadcrumbs,
body.post-type-archive-glossaire_terme #ast-breadcrumbs,
body.post-type-archive-glossaire_terme .breadcrumb-trail,
body.post-type-archive-glossaire_terme .yoast-breadcrumb,
body.post-type-archive-glossaire_terme .rank-math-breadcrumb,
body.post-type-archive-glossaire_terme .exwg-breadcrumb,
body.single-glossaire_terme .ast-breadcrumbs,
body.single-glossaire_terme #ast-breadcrumbs,
body.single-glossaire_terme .breadcrumb-trail,
body.single-glossaire_terme .yoast-breadcrumb,
body.single-glossaire_terme .rank-math-breadcrumb,
body.single-glossaire_terme .exwg-breadcrumb {
  display: none !important;
}
/* Le header étant sorti du flux, on supprime l'espacement haut des
   conteneurs de contenu du thème pour que le bandeau parte du tout
   en haut de la page (scopé archive). */
body.exwg-archive .exwg-wrap,
body.exwg-archive #content,
body.exwg-archive .site-content,
body.exwg-archive #primary {
  padding-top: 0;
  margin-top: 0;
}

/* Conteneurs Astra : fond transparent pour que le crème du body soit
   continu (pas de bande blanche entre header et contenu, pas de blanc
   en bas de page sous l'article). Scopé archive + single. */
body.exwg-archive #content,
body.exwg-archive .site-content,
body.exwg-archive #primary,
body.exwg-archive .ast-container,
body.exwg-archive .entry-content,
body.exwg-single #content,
body.exwg-single .site-content,
body.exwg-single #primary,
body.exwg-single .ast-container,
body.exwg-single .entry-content {
  background-color: transparent !important;
}

.exwg-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Breadcrumb ---- */
.exwg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--exwg-text-muted);
  margin-bottom: 28px;
}
.exwg-breadcrumb a {
  color: var(--exwg-text-muted);
  text-decoration: none;
  transition: color .2s;
}
.exwg-breadcrumb a:hover { color: var(--exwg-accent); }
.exwg-bc-sep { color: var(--exwg-text-soft); font-size: 11px; }
.exwg-bc-current { color: var(--exwg-text); font-weight: 500; }

/* ==========================================================================
   Hub - Hero outil centré
   ========================================================================== */
/* Bandeau hero pleine largeur viewport (full-bleed), fond crème uni.
   La technique width:100vw + margin-left:calc(50% - 50vw) casse le
   conteneur centré .exwg-wrap et recale le bandeau bord à bord de la
   fenêtre. Padding-top généreux pour passer sous le header global. */
.exwg-hero {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 20px 48px;
  text-align: center;
  background-color: var(--exwg-surface);
}
.exwg-hero-inner {
  width: 100%;
  max-width: var(--exwg-hero-max);
  margin: 0 auto;
}
/* Le fil d'Ariane suit le bandeau : un peu d'air avant le contenu. */
.exwg-hero + .exwg-breadcrumb {
  margin-top: 28px;
}
.exwg-hero-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--exwg-accent);
}
.exwg-hero-title {
  font-family: var(--ew-font-title, 'Plus Jakarta Sans', sans-serif);
  font-weight: var(--ew-weight-title, 500);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--exwg-text);
}
/* "decode" en orange, exactement l'accent du comparateur (#E07A2F, soit
   var(--exwc-accent)). Valeur posee en dur : comparateur.css n'est pas charge
   sur les pages du glossaire. */
.exwg-hero-accent { color: #E07A2F; }
.exwg-hero-sub {
  max-width: var(--exwg-field-max);
  margin: 0 auto 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--exwg-text-dim);
}
.exwg-hero-meta {
  margin: 0 auto 26px;
  font-size: 12px;
  color: var(--exwg-text-muted);
  letter-spacing: 0.01em;
}

/* ---- Recherche (élément héros) ---- */
.exwg-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--exwg-field-max);
  margin: 0 auto;
}
.exwg-search-ico {
  position: absolute;
  left: 18px;
  color: var(--exwg-text-soft);
  pointer-events: none;
}
.exwg-search input {
  width: 100%;
  height: 56px;
  font: inherit;
  font-size: 15px;
  padding: 0 20px 0 50px;
  border: 0.5px solid var(--exwg-hairline);
  border-radius: var(--exwg-radius-lg);
  background: var(--exwg-bg);
  color: var(--exwg-text);
  transition: border-color .18s, box-shadow .18s;
}
.exwg-search input::placeholder { color: var(--exwg-text-soft); }
.exwg-search input:focus {
  outline: none;
  border-color: var(--exwg-accent);
  box-shadow: 0 0 0 4px rgba(242, 101, 34, 0.12);
}

/* ---- Chips filtres ----
   10 catégories + bouton Tout : tenir sur une ligne en desktop large,
   wrap autorisé si besoin. Chaque pill catégorie porte sa propre teinte
   via .exwg-chip--{slug}. Actif = fond ink, texte crème. */
.exwg-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.exwg-chip {
  flex: 0 0 auto;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  padding: 7px 15px;
  border: 1px solid var(--exwg-hairline);
  border-radius: 22px;
  background: #FFFFFF;
  color: var(--exwg-text-dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.exwg-chip:hover {
  filter: brightness(0.97);
}
.exwg-chip.is-active {
  background: var(--exwg-ink);
  border-color: var(--exwg-ink);
  color: var(--exwg-cream);
}

/* Tout : bouton de reset en première position, actif par défaut. */
.exwg-chip--all {
  background: var(--exwg-ink);
  border-color: var(--exwg-ink);
  color: var(--exwg-cream);
}
.exwg-chip--all .exwg-chip-count {
  margin-left: 6px;
  opacity: 0.5;
}

/* Mapping catégories : fond tinté + texte coloré + bordure 30% opacité.
   L'état actif (.is-active) écrase tout vers le noir/crème. */
.exwg-chip--fiscal   { background: #EEEDFE; color: #3C3489; border-color: rgba(60, 52, 137, 0.3); }
.exwg-chip--visa     { background: #E6F1FB; color: #0C447C; border-color: rgba(12, 68, 124, 0.3); }
.exwg-chip--logement { background: #FAEEDA; color: #633806; border-color: rgba(99, 56, 6, 0.3); }
.exwg-chip--sante    { background: #E1F5EE; color: #085041; border-color: rgba(8, 80, 65, 0.3); }
.exwg-chip--banque   { background: #FBEAF0; color: #72243E; border-color: rgba(114, 36, 62, 0.3); }
.exwg-chip--travail  { background: #EEEAFD; color: #5B21B6; border-color: rgba(91, 33, 182, 0.3); }
.exwg-chip--admin    { background: #E2E8F0; color: #1E293B; border-color: rgba(30, 41, 59, 0.3); }
.exwg-chip--famille  { background: #FCE7F3; color: #9D174D; border-color: rgba(157, 23, 77, 0.3); }
.exwg-chip--retraite { background: #FEF3C7; color: #854D0E; border-color: rgba(133, 77, 14, 0.3); }
.exwg-chip--mobilite { background: #CCFBF1; color: #115E59; border-color: rgba(17, 94, 89, 0.3); }

/* ==========================================================================
   Hub - Subrow : index A-Z à gauche, compteur + toggle vue à droite
   ========================================================================== */
.exwg-subrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 12px 0 18px;
  border-top: 0.5px solid var(--exwg-hairline-faint);
  border-bottom: 0.5px solid var(--exwg-hairline-faint);
}
.exwg-subrow-right {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--exwg-text-dim);
}
.exwg-count-label #exwg-count {
  font-weight: 600;
  color: var(--exwg-ink);
}

/* ==========================================================================
   Hub - Index A-Z compact (resserré)
   ========================================================================== */
.exwg-az {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
}
.exwg-az-link {
  padding: 3px 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--exwg-ink);
  text-decoration: none;
  border-radius: 4px;
  transition: color .15s, background-color .15s;
}
.exwg-az-link:hover,
.exwg-az-link:focus-visible {
  background-color: var(--exwg-az-hover-bg);
  color: var(--exwg-az-accent);
}
.exwg-az-link.is-empty {
  color: var(--exwg-az-faint);
  pointer-events: none;
}
.exwg-az-link.is-active {
  background: var(--exwg-ink);
  color: var(--exwg-cream);
}
.exwg-az-link.is-active:hover {
  background: var(--exwg-ink);
  color: var(--exwg-cream);
}

/* ==========================================================================
   Hub - Toggle grille / liste
   ========================================================================== */
.exwg-toggle {
  display: flex;
  border: 1px solid var(--exwg-line2);
  border-radius: 8px;
  overflow: hidden;
}
.exwg-toggle button {
  border: none;
  cursor: pointer;
  background: #FFFFFF;
  color: var(--exwg-text-muted);
  padding: 7px 11px;
  font-size: 16px;
  line-height: 1;
}
.exwg-toggle button.on {
  background: var(--exwg-ink);
  color: var(--exwg-cream);
}

/* ==========================================================================
   Hub - Grille de cartes
   ========================================================================== */
.exwg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
/* Vue liste : 1 colonne, cartes en row (badge | titre 260px | def flex). */
.exwg-grid.list { grid-template-columns: 1fr; }
.exwg-grid.list .exwg-card {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.exwg-grid.list .exwg-card-top {
  flex: 0 0 auto;
}
.exwg-grid.list .exwg-card-title {
  flex: 0 0 260px;
}
.exwg-grid.list .exwg-card-def {
  flex: 1;
}
@media (max-width: 767px) {
  .exwg-grid.list .exwg-card { flex-direction: column; align-items: flex-start; }
  .exwg-grid.list .exwg-card-title { flex: 0 0 auto; }
}
/* Titre de section lettre : pleine largeur, sert aussi d'ancre de scroll.
   La règle [hidden] doit primer sur display:block, sinon une ancre
   masquée laisse une rangée vide (fix round J1 à préserver). */
.exwg-anchor,
.exwg-letter-title {
  display: block;
  scroll-margin-top: 90px;
  grid-column: 1 / -1;
  font-family: var(--ew-font-title, 'Plus Jakarta Sans', sans-serif);
  font-weight: var(--ew-weight-title, 500);
  font-size: 26px;
  line-height: 1;
  color: var(--exwg-ink);
  margin: 16px 0 6px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--exwg-line2);
}
.exwg-anchor[hidden],
.exwg-letter-title[hidden] { display: none; }

.exwg-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 0.5px solid var(--exwg-card-border);
  border-radius: var(--exwg-radius-lg);
  background: var(--exwg-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.exwg-card:hover {
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: var(--exwg-shadow-card);
  transform: translateY(-1px);
}
.exwg-card[hidden] { display: none; }
.exwg-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.exwg-card-title {
  font-family: var(--ew-font-title, 'Plus Jakarta Sans', sans-serif);
  font-weight: var(--ew-weight-title, 500);
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 0;
  color: var(--exwg-text);
}
.exwg-card-def {
  font-size: 13px;
  color: #666666;
  line-height: 1.5;
}

/* ---- Badges ---- */
/* Base partagée avec le single (couleur via --badge inline, color-mix). */
.exwg-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--badge, var(--exwg-text-muted));
  background: color-mix(in srgb, var(--badge, #6B7280) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--badge, #6B7280) 22%, #fff);
}
.exwg-badge-pays {
  --badge: #6B7280;
  text-transform: none;
  letter-spacing: 0;
}

/* Badges des cartes du hub : compacts, code couleur par catégorie. */
.exwg-card .exwg-badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 0;
  border-radius: 4px;
  background: #EFEAE1;
  color: #5B5142;
}
.exwg-card .exwg-badge--fiscal   { background: #EEEDFE; color: #3C3489; }
.exwg-card .exwg-badge--visa     { background: #E6F1FB; color: #0C447C; }
.exwg-card .exwg-badge--sante    { background: #E1F5EE; color: #085041; }
.exwg-card .exwg-badge--logement { background: #FAEEDA; color: #633806; }
.exwg-card .exwg-badge--banque   { background: #FAECE7; color: #712B13; }
.exwg-card .exwg-badge-pays {
  background: #EFEAE1;
  color: #6B5B45;
  text-transform: none;
  letter-spacing: 0;
}

.exwg-empty {
  text-align: center;
  color: var(--exwg-text-muted);
  padding: 48px 0;
  font-size: 15px;
}

/* ---- Focus visible (accessibilité) ---- */
.exwg-card:focus-visible,
.exwg-chip:focus-visible,
.exwg-search input:focus-visible {
  outline: 2px solid var(--exwg-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Single terme - layout 2 colonnes (contenu + sidebar sticky)
   ========================================================================== */
/* Quand la fiche a une sidebar, on élargit le canevas et on bascule
   en grid 2 colonnes. Sans sidebar (terme sans synonymes/liens/sources),
   on conserve la largeur de lecture compacte. */
.exwg-single .exwg-article {
  max-width: var(--exwg-reading-max);
  margin: 0 auto;
}
.exwg-single .exwg-article--has-sidebar {
  max-width: 1180px;
}
.exwg-single .exwg-wrap {
  /* Le wrap parent reste centré, on relève simplement son plafond pour
     que le grid 2col respire au-delà de l'ancien max 1080px. */
  max-width: 1240px;
}
.exwg-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: flex-start;
}
.exwg-article--has-sidebar .exwg-2col {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.exwg-content {
  min-width: 0;
}
.exwg-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  /* Espace pour passer sous le header global (Astra ~70-90px) + air. */
  top: 110px;
}
.exwg-sidebar-block {
  background: var(--exwg-surface);
  border: 1px solid var(--exwg-az-hover-bg);
  border-radius: 14px;
  padding: 22px 22px 20px;
  margin: 0;
}
.exwg-sidebar-block + .exwg-sidebar-block { margin-top: 0; }
.exwg-sidebar-title {
  font-family: var(--ew-font-title, 'Plus Jakarta Sans', sans-serif);
  font-weight: var(--ew-weight-title, 500);
  font-size: 16px;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--exwg-line2);
  color: var(--exwg-ink);
}
/* Liste « Pour aller plus loin » : densité réduite en sidebar. */
.exwg-sidebar .exwg-links { gap: 4px; }
.exwg-sidebar .exwg-links li {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.exwg-sidebar .exwg-link-type {
  font-size: 11px;
}
.exwg-sidebar .exwg-syn {
  font-size: 14px;
  line-height: 1.55;
}
.exwg-sidebar .exwg-src-list { font-size: 13px; }
.exwg-sidebar .exwg-src-list li { padding: 6px 0; }

@media (max-width: 900px) {
  /* Mobile : sidebar passe sous le contenu, pas de sticky. */
  .exwg-article--has-sidebar .exwg-2col {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .exwg-sidebar {
    position: static;
    top: auto;
  }
}
.exwg-term-head { margin-bottom: 28px; }
.exwg-term-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.exwg-verif {
  font-size: 12px;
  color: var(--exwg-text-muted);
}
.exwg-h1 {
  font-family: var(--ew-font-title, 'Plus Jakarta Sans', sans-serif);
  font-weight: var(--ew-weight-title-strong, 600);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  color: var(--exwg-text);
}
.exwg-lede {
  font-size: 17px;
  color: var(--exwg-text-dim);
  margin: 0;
  max-width: 60ch;
}
.exwg-single .exwg-h1 { font-size: 34px; }
.exwg-single .exwg-lede {
  font-size: 18px;
  margin-top: 14px;
  color: var(--exwg-text-dim);
}

.exwg-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--exwg-text);
}
.exwg-body p { margin: 0 0 1.1em; }
.exwg-body a { color: var(--exwg-accent); text-decoration: underline; text-underline-offset: 2px; }
.exwg-body a:hover { color: var(--exwg-accent-hover); }

.exwg-section { margin-top: 44px; }
.exwg-h2 {
  font-family: var(--ew-font-title, 'Plus Jakarta Sans', sans-serif);
  font-weight: var(--ew-weight-title-strong, 600);
  font-size: 22px;
  letter-spacing: -0.012em;
  margin: 0 0 18px;
  color: var(--exwg-text);
}

.exwg-examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exwg-example {
  padding: 18px 20px;
  background: var(--exwg-bg-cream);
  border: 1px solid var(--exwg-border-soft);
  border-left: 3px solid var(--exwg-accent);
  border-radius: var(--exwg-radius);
  font-size: 15px;
  color: var(--exwg-text-dim);
}
.exwg-example p { margin: 0 0 .8em; }
.exwg-example p:last-child { margin-bottom: 0; }

.exwg-syn {
  font-size: 15px;
  color: var(--exwg-text-dim);
  margin: 0;
}

.exwg-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.exwg-links li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--exwg-border);
  border-radius: var(--exwg-radius);
  transition: border-color .15s;
}
.exwg-links li:hover { border-color: var(--exwg-accent); }
.exwg-links a {
  color: var(--exwg-text);
  text-decoration: none;
  font-weight: 500;
}
.exwg-links a:hover { color: var(--exwg-accent); }
.exwg-link-type {
  font-size: 12px;
  color: var(--exwg-text-soft);
  white-space: nowrap;
}

.exwg-sources .exwg-src-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.exwg-src-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--exwg-border-soft);
  color: var(--exwg-text-dim);
}
.exwg-src-list li:last-child { border-bottom: 0; }
.exwg-src-list a { color: var(--exwg-accent); text-decoration: none; }
.exwg-src-list a:hover { text-decoration: underline; }

.exwg-back {
  margin-top: 48px;
  font-size: 15px;
}
.exwg-back a {
  color: var(--exwg-accent);
  text-decoration: none;
  font-weight: 500;
}
.exwg-back a:hover { color: var(--exwg-accent-hover); }

/* ==========================================================================
   Lead magnet
   ========================================================================== */
.exwg-lead {
  margin: 64px auto 0;
  max-width: var(--exwg-reading-max);
  background: var(--exwg-bg-cream);
  border: 1px solid var(--exwg-border);
  border-radius: var(--exwg-radius-xl);
  padding: 36px 28px;
}
.exwg-lead-inner { max-width: 520px; margin: 0 auto; text-align: center; }
.exwg-lead-title {
  font-family: var(--ew-font-title, 'Plus Jakarta Sans', sans-serif);
  font-weight: var(--ew-weight-title-strong, 600);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--exwg-text);
}
.exwg-lead-sub {
  font-size: 15px;
  color: var(--exwg-text-dim);
  margin: 0 0 22px;
}
.exwg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.exwg-lead-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exwg-lead-row input[type="email"] {
  font: inherit;
  font-size: 16px;
  padding: 13px 16px;
  border: 1px solid var(--exwg-border);
  border-radius: var(--exwg-radius);
  background: var(--exwg-bg);
  color: var(--exwg-text);
}
.exwg-lead-row input[type="email"]:focus {
  outline: none;
  border-color: var(--exwg-accent);
  box-shadow: 0 0 0 3px var(--exwg-accent-soft);
}
.exwg-btn {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--exwg-radius);
  background: var(--exwg-accent);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease;
}
.exwg-btn:hover { background: var(--exwg-accent-hover); }
.exwg-btn:disabled { opacity: .6; cursor: progress; }
.exwg-lead-feedback {
  font-size: 14px;
  margin: 14px 0 0;
  min-height: 1em;
}
.exwg-lead-feedback.is-ok { color: #16A34A; }
.exwg-lead-feedback.is-err { color: #DC2626; }
.exwg-lead-rgpd {
  font-size: 12px;
  color: var(--exwg-text-muted);
  margin: 16px 0 0;
  line-height: 1.5;
}

/* ==========================================================================
   Responsive
   - Mobile  < 600px  : 1 colonne, bandeau hero 360px
   - Tablet  600-991  : 2 colonnes
   - Desktop >= 992px : 3 colonnes, bandeau hero 480px
   ========================================================================== */

/* Mobile : les chips défilent horizontalement sans scrollbar visible. */
@media (max-width: 599px) {
  .exwg-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
  }
  .exwg-chips::-webkit-scrollbar { display: none; }
}

@media (min-width: 600px) {
  .exwg-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .exwg-hero-title { font-size: 38px; }
}

@media (min-width: 768px) {
  .exwg-wrap { padding: 40px 32px 96px; }
  .exwg-single .exwg-h1 { font-size: 42px; }
  .exwg-lead-row { flex-direction: row; }
  .exwg-lead-row input[type="email"] { flex: 1; }
}

@media (min-width: 992px) {
  .exwg-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .exwg-hero-title { font-size: 48px; }
  .exwg-hero-sub { font-size: 16px; }

  /* Bandeau plus haut en desktop, padding-top accru pour dégager le
     contenu sous le header global superposé. */
  .exwg-hero {
    min-height: 480px;
    padding: 140px 24px 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exwg-card, .exwg-chip, .exwg-btn, .exwg-search input { transition: none; }
  .exwg-card:hover { transform: none; }
}