/*
Theme Name:  Hello Elementor Child — Bring4You
Description: Child theme for Bring4You blog — design system + article styles
Template:    hello-elementor
Version:     1.0.0
Text Domain: hello-child
*/
/* ═══════════════════════════════════════════
   HEADER — Glass effect, nav & megamenu
   ═══════════════════════════════════════════ */

/* Section — glass + stacking context (non-sticky) */
.elementor-section.b4y-header-main {
  background-color: rgba(255,255,255,.88) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  border-bottom: 1px solid transparent !important;
  transition: border-bottom-color .15s ease, background-color .15s ease !important;
}
/* En mode normal (non-sticky) : créer un contexte d'empilement au-dessus du contenu */
.elementor-section.b4y-header-main:not(.elementor-sticky--active) {
  position: relative !important;
  z-index: 100 !important;
}
/* En mode sticky : garder le z-index, laisser Elementor gérer position:fixed */
.elementor-section.b4y-header-main.elementor-sticky--active {
  z-index: 100 !important;
}
.elementor-section.b4y-header-main.b4y-scrolled {
  border-bottom-color: var(--border) !important;
  background-color: rgba(255,255,255,.95) !important;
}

/* Container : seul contexte de positionnement du megamenu */
.elementor-section.b4y-header-main > .elementor-container {
  position: relative !important;
  overflow: visible !important;
}

/* Neutraliser position:relative sur colonnes / wraps / nav (Elementor l'ajoute par défaut)
   pour que le sub-menu soit positionné par rapport au container et non à la colonne */
.b4y-header-main .elementor-column,
.b4y-header-main .elementor-widget-wrap,
.b4y-header-main .elementor-widget.elementor-widget-nav-menu,
.b4y-header-main .elementor-widget-container,
.b4y-header-main nav.elementor-nav-menu--main,
.b4y-header-main ul.elementor-nav-menu {
  position: static !important;
}

/* Items de navigation */
.b4y-header-main .elementor-nav-menu .elementor-item {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  padding: 7px 10px !important;
  border-radius: 8px;
  transition: background .1s, color .1s;
}
.b4y-header-main .elementor-nav-menu .elementor-item:hover,
.b4y-header-main .elementor-nav-menu .elementor-item.elementor-item-active {
  background: var(--ink-50) !important;
  color: var(--ink-900) !important;
}

/* ── Megamenu ─────────────────────────────── */

/* Le li ne doit PAS être le contexte de positionnement du dropdown */
.b4y-header-main .elementor-nav-menu > li.menu-item-has-children {
  position: static !important;
}

/* Props visuelles du dropdown (toujours présentes, visibilité gérée par Elementor) */
.b4y-header-main .menu-item-has-children > ul.sub-menu {
  position: absolute !important;
  z-index: 9999 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  top: 100% !important;
  padding: 24px 28px !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  box-shadow: var(--shadow-2) !important;
  list-style: none !important;
  /* Grid activé uniquement au hover ci-dessous */
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(5, auto) !important;
  gap: 0 24px !important;
  align-items: start;
}

/* display:grid UNIQUEMENT au survol — Elementor cache via display:none sinon */
.b4y-header-main .elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu {
  display: grid !important;
}

/* Pont transparent au-dessus du sub-menu : maintient le :hover du li pendant
   que le curseur descend du lien nav vers le contenu du dropdown */
.b4y-header-main .menu-item-has-children > ul.sub-menu::before {
  content: '';
  display: block;
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

/* Reset des styles Elementor sur les li du dropdown */
.b4y-header-main .sub-menu > li {
  float: none !important;
  width: auto !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

/* Placement explicite dans la grille 4×5 */
.b4y-header-main .sub-menu > li:nth-child(1)  { grid-column:1; grid-row:1; }
.b4y-header-main .sub-menu > li:nth-child(2)  { grid-column:1; grid-row:2; }
.b4y-header-main .sub-menu > li:nth-child(3)  { grid-column:1; grid-row:3; }
.b4y-header-main .sub-menu > li:nth-child(4)  { grid-column:1; grid-row:4; }
.b4y-header-main .sub-menu > li:nth-child(5)  { grid-column:1; grid-row:5; }
.b4y-header-main .sub-menu > li:nth-child(6)  { grid-column:2; grid-row:1; }
.b4y-header-main .sub-menu > li:nth-child(7)  { grid-column:2; grid-row:2; }
.b4y-header-main .sub-menu > li:nth-child(8)  { grid-column:2; grid-row:3; }
.b4y-header-main .sub-menu > li:nth-child(9)  { grid-column:2; grid-row:4; }
.b4y-header-main .sub-menu > li:nth-child(10) { grid-column:2; grid-row:5; }
.b4y-header-main .sub-menu > li:nth-child(11) { grid-column:3; grid-row:1; }
.b4y-header-main .sub-menu > li:nth-child(12) { grid-column:3; grid-row:2; }
.b4y-header-main .sub-menu > li:nth-child(13) { grid-column:3; grid-row:3; }
.b4y-header-main .sub-menu > li:nth-child(14) { grid-column:3; grid-row:4; }
.b4y-header-main .sub-menu > li:nth-child(15) { grid-column:3; grid-row:5; }
.b4y-header-main .sub-menu > li:nth-child(16) { grid-column:4; grid-row:1; }
.b4y-header-main .sub-menu > li:nth-child(17) { grid-column:4; grid-row:2; }
.b4y-header-main .sub-menu > li:nth-child(18) { grid-column:4; grid-row:3; }
.b4y-header-main .sub-menu > li:nth-child(19) { grid-column:4; grid-row:4; }
.b4y-header-main .sub-menu > li:nth-child(20) { grid-column:4; grid-row:5; }

/* Séparateurs verticaux entre colonnes 2/3/4 */
.b4y-header-main .sub-menu > li:nth-child(n+6) {
  border-left: 1px solid var(--border);
  padding-left: 20px !important;
}

/* En-têtes de colonne */
.b4y-header-main .sub-menu > li.megamenu-col-h > a {
  font: 600 11px/1 'Montserrat', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--text-muted) !important;
  padding: 0 0 10px !important;
  cursor: default !important;
  pointer-events: none !important;
  display: block !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 6px !important;
  background: none !important;
}

/* Items du sous-menu */
.b4y-header-main .sub-menu > li:not(.megamenu-col-h) > a {
  display: block !important;
  padding: 5px 0 !important;
  font-size: 13px !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
  background: transparent !important;
  border: 0 !important;
  transition: color .1s;
}
.b4y-header-main .sub-menu > li:not(.megamenu-col-h) > a:hover {
  color: var(--b4y-blue-600) !important;
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Barre d'annonce hdr10001 : masquer les liens FAQ / app, garder l'annonce */
  .elementor-element-hdr10003 .elementor-widget-container > div > span:last-child {
    display: none !important;
  }
  .elementor-element-hdr10003 .elementor-widget-container > div {
    padding: 0 16px !important;
    max-width: none !important;
    justify-content: flex-start !important;
  }

  /* Empêcher l'empilement vertical des colonnes du header principal */
  .b4y-header-main > .elementor-container {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  /* Colonne logo : largeur auto */
  .b4y-header-main .elementor-element-hdr20002 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Colonne nav : prend l'espace restant, burger aligné à droite */
  .b4y-header-main .elementor-element-hdr20004 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  .b4y-header-main .elementor-element-hdr20004 > .elementor-widget-wrap {
    justify-content: flex-end !important;
    align-items: center !important;
  }
  /* Colonne boutons CTA : masquée (remplacée par le bouton flottant) */
  .b4y-header-main .elementor-element-hdr20006 {
    display: none !important;
  }

  /* Dropdown mobile : toujours masqué, révélé via classe JS b4y-dd-open */
  .b4y-header-main .elementor-nav-menu--dropdown {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    background: #fff !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 8px 24px rgba(20,30,50,.14) !important;
    z-index: 9999 !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    padding: 8px 0 !important;
  }
  .b4y-header-main .elementor-nav-menu--dropdown.b4y-dd-open {
    display: block !important;
  }

  /* Liens de premier niveau dans le dropdown mobile */
  .b4y-header-main .elementor-nav-menu--dropdown > ul > li > a {
    display: block !important;
    padding: 13px 20px !important;
    font: 500 15px/1 'Montserrat', sans-serif !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
  }
  .b4y-header-main .elementor-nav-menu--dropdown > ul > li:last-child > a {
    border-bottom: none !important;
  }

  /* Sous-menus mobiles : repliés, liste plate (pas grid) */
  .b4y-header-main .elementor-nav-menu--dropdown .sub-menu {
    position: static !important;
    display: none !important;
    width: auto !important;
    padding: 4px 0 8px 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    grid-template-columns: 1fr !important;
  }
  /* Ouverts via JS (classe b4y-mobile-open sur le li) */
  .b4y-header-main .elementor-nav-menu--dropdown li.b4y-mobile-open > ul.sub-menu {
    display: block !important;
    border-left: 2px solid var(--border) !important;
    margin-left: 20px !important;
    padding-left: 12px !important;
  }
  /* Reset grid-column/grid-row et séparateurs sur mobile */
  .b4y-header-main .elementor-nav-menu--dropdown .sub-menu > li {
    grid-column: auto !important;
    grid-row: auto !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
  /* En-têtes de colonne dans le sous-menu mobile : petits labels */
  .b4y-header-main .elementor-nav-menu--dropdown .sub-menu > li.megamenu-col-h > a {
    pointer-events: auto !important;
    cursor: default !important;
    padding: 8px 0 2px !important;
    font-size: 10px !important;
  }
  /* Liens sub-menu */
  .b4y-header-main .elementor-nav-menu--dropdown .sub-menu > li:not(.megamenu-col-h) > a {
    padding: 5px 0 !important;
    font-size: 13px !important;
  }

  /* Espace en bas de page pour le bouton flottant */
  body { padding-bottom: 56px !important; }
}

/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */

/* Bring4You blog — design tokens */
:root {
  /* Brand blue — Bring4You #1f4063, refined scale */
  --b4y-blue-50:  #f1f4f9;
  --b4y-blue-100: #dde4ee;
  --b4y-blue-200: #b8c5d8;
  --b4y-blue-400: #4a6286;
  --b4y-blue-500: #2f5078;
  --b4y-blue-600: #1f4063;  /* primary brand */
  --b4y-blue-700: #173352;
  --b4y-blue-900: #0e2138;

  /* Brand amber accent — #e7a03c */
  --b4y-amber-50:  #fdf5e8;
  --b4y-amber-100: #faead0;
  --b4y-amber-400: #efbe6f;
  --b4y-amber-500: #e7a03c;  /* accent */
  --b4y-amber-600: #c98425;
  --b4y-amber-700: #9a6418;

  /* Neutrals — cool, near-white */
  --ink-0:   oklch(99% 0.003 250);
  --ink-50:  oklch(97% 0.005 250);
  --ink-100: oklch(94% 0.006 250);
  --ink-200: oklch(89% 0.008 250);
  --ink-300: oklch(80% 0.010 250);
  --ink-400: oklch(65% 0.012 250);
  --ink-500: oklch(50% 0.014 250);
  --ink-600: oklch(40% 0.014 250);
  --ink-700: oklch(30% 0.014 250);
  --ink-800: oklch(22% 0.012 250);
  --ink-900: oklch(15% 0.010 250);

  /* Cocon (editorial pillar) accents — muted, low chroma */
  --cocon-france-bg:  #e7eef7;
  --cocon-france-fg:  #1f4063;
  --cocon-france-dot: #2f5078;

  --cocon-intl-bg:    oklch(94% 0.025 195);
  --cocon-intl-fg:    oklch(42% 0.07 195);
  --cocon-intl-dot:   oklch(55% 0.08 195);

  --cocon-colis-bg:   #fdf2dd;
  --cocon-colis-fg:   #9a6418;
  --cocon-colis-dot:  #e7a03c;

  --cocon-pro-bg:     oklch(94% 0.005 250);
  --cocon-pro-fg:     oklch(35% 0.008 250);
  --cocon-pro-dot:    oklch(55% 0.008 250);

  /* Surfaces */
  --surface:        var(--ink-0);
  --surface-muted:  var(--ink-50);
  --surface-sunken: var(--ink-100);

  --text:          var(--ink-900);
  --text-muted:    var(--ink-600);
  --text-subtle:   var(--ink-500);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);

  /* Type scale (modern French clean) */
  --font-ui: 'Montserrat', 'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Montserrat', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-prose: 'Montserrat', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* Shadows — flat, no decorative */
  --shadow-1: 0 1px 0 rgba(20,30,50,.04), 0 1px 2px rgba(20,30,50,.06);
  --shadow-2: 0 1px 0 rgba(20,30,50,.04), 0 4px 16px rgba(20,30,50,.06);

  --max-w: 1240px;
  --prose-w: 720px;
}

/* Type pairing variants — toggled by data-pairing on root */
[data-pairing="sans"] {
  --font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-prose: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}
[data-pairing="serif-display"] {
  --font-display: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  --font-prose: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}
[data-pairing="serif-prose"] {
  --font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-prose: 'Source Serif 4', Georgia, serif;
}

/* Color direction variants */
[data-color="default"] {}
[data-color="warm"] {
  --b4y-blue-50:  oklch(97% 0.012 235);
  --b4y-blue-100: oklch(93% 0.025 235);
  --b4y-blue-600: oklch(40% 0.11 235);
  --cocon-france-bg: oklch(94% 0.03 235);
  --cocon-france-fg: oklch(40% 0.11 235);
}
[data-color="cool"] {
  --b4y-blue-50:  oklch(97% 0.012 255);
  --b4y-blue-100: oklch(93% 0.025 255);
  --b4y-blue-600: oklch(40% 0.11 255);
  --cocon-france-bg: oklch(94% 0.03 255);
  --cocon-france-fg: oklch(40% 0.11 255);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { font-size: 16px; line-height: 1.5; }
@media (min-width: 720px) { body { font-size: 17px; } }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: 999px;
  font: 500 15px/1 var(--font-ui);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-primary { background: var(--b4y-blue-600); color: #fff; }
.btn-primary:hover { background: var(--b4y-blue-700); }
.btn-outline { background: transparent; border-color: var(--ink-300); color: var(--text); }
.btn-outline:hover { border-color: var(--text); background: var(--ink-50); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--ink-100); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 22px; font-size: 16px; }

/* Cocon badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font: 500 11px/1 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.badge-france { background: var(--cocon-france-bg); color: var(--cocon-france-fg); }
.badge-france .dot { background: var(--cocon-france-dot); }
.badge-intl   { background: var(--cocon-intl-bg);   color: var(--cocon-intl-fg); }
.badge-intl .dot   { background: var(--cocon-intl-dot); }
.badge-colis  { background: var(--cocon-colis-bg);  color: var(--cocon-colis-fg); }
.badge-colis .dot  { background: var(--cocon-colis-dot); }
.badge-pro    { background: var(--cocon-pro-bg);    color: var(--cocon-pro-fg); }
.badge-pro .dot    { background: var(--cocon-pro-dot); }

/* Striped placeholder */
.placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(20,30,50,.06) 0 1px, transparent 1px 14px),
    var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-500);
  font: 500 11px/1.3 ui-monospace, 'JetBrains Mono', Menlo, monospace;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center; padding: 12px;
}
.placeholder[data-tone="france"] {
  background:
    repeating-linear-gradient(135deg, color-mix(in oklch, var(--cocon-france-fg) 15%, transparent) 0 1px, transparent 1px 14px),
    var(--cocon-france-bg);
  color: var(--cocon-france-fg);
}
.placeholder[data-tone="intl"] {
  background:
    repeating-linear-gradient(135deg, color-mix(in oklch, var(--cocon-intl-fg) 15%, transparent) 0 1px, transparent 1px 14px),
    var(--cocon-intl-bg);
  color: var(--cocon-intl-fg);
}
.placeholder[data-tone="colis"] {
  background:
    repeating-linear-gradient(135deg, color-mix(in oklch, var(--cocon-colis-fg) 15%, transparent) 0 1px, transparent 1px 14px),
    var(--cocon-colis-bg);
  color: var(--cocon-colis-fg);
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .container { padding: 0 32px; } }

.eyebrow {
  font: 500 12px/1 var(--font-ui);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Hairline divider */
.hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--b4y-blue-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sticky reading progress */
.read-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--b4y-blue-500);
  z-index: 100; transition: width .1s linear;
}

/* Mobile sticky CTA bar */
.mobile-sticky-cta {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; gap: 8px; z-index: 50;
}


/* ═══════════════════════════════════════════
   COMPONENTS — Header, Footer, Cards, Home
   ═══════════════════════════════════════════ */

/* Header & Footer & shared component styles */

/* ── HEADER ─────────────────────────────────── */
.b4y-header {
  position: sticky; top: 0; left: 0; right: 0; z-index: 80;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.b4y-header.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(255,255,255,.94);
}
.b4y-topbar {
  background: var(--b4y-blue-900);
  color: rgba(255,255,255,.9);
  font-size: 13px;
}
.b4y-topbar-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 24px;
}
.b4y-topbar-promise { display:flex; align-items:center; gap: 10px; }
.b4y-topbar-promise strong { color: #fff; }
.b4y-topbar-leaf { color: oklch(80% 0.07 195); }
.b4y-topbar-links { display: flex; gap: 18px; }
.b4y-topbar-links a:hover { color: #fff; }

.b4y-header-inner {
  display: flex; align-items: center; gap: 24px;
  padding-top: 14px; padding-bottom: 14px;
  transition: padding .15s;
}
.b4y-header.is-scrolled .b4y-header-inner { padding-top: 10px; padding-bottom: 10px; }

.b4y-logo { display:inline-flex; align-items: center; flex-shrink: 0; }

.b4y-nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: 8px;
}
.b4y-nav-item {
  display: inline-flex; align-items: center;
  padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-muted);
  position: relative;
}
.b4y-nav-item:hover { color: var(--text); background: var(--ink-50); }
.b4y-nav-item.is-active { color: var(--text); }
.b4y-nav-item.is-active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; background: var(--b4y-blue-600); border-radius: 2px;
}

.b4y-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.b4y-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.b4y-icon-btn:hover { background: var(--ink-100); }

.b4y-burger {
  display: none; width: 36px; height: 36px; border-radius: 8px; border: 0;
  background: transparent; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center;
}
.b4y-burger span { width: 18px; height: 2px; background: var(--text); border-radius: 1px; }

@media (max-width: 1023px) {
  .b4y-nav, .b4y-cta-calc { display: none; }
  .b4y-burger { display: inline-flex; }
}
@media (max-width: 600px) {
  .b4y-actions .btn-primary { padding: 0 14px; height: 36px; font-size: 13px; }
}

/* Search */
.b4y-search { border-top: 1px solid var(--border); background: #fff; }
.b4y-search-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
}
.b4y-search-input {
  flex: 1; border: 0; outline: 0; font: 16px/1 var(--font-ui);
  background: transparent; color: var(--text);
}

/* Megamenu */
.megamenu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
.megamenu-inner { padding: 28px 24px 22px; }
.megamenu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.megamenu-col-h {
  font: 500 11px/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
  margin-bottom: 12px;
}
.megamenu-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.megamenu-col a {
  display: block; padding: 4px 0; font-size: 14px; color: var(--text);
  line-height: 1.4;
}
.megamenu-col a:hover { color: var(--b4y-blue-600); }
.megamenu-footer {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}

/* Mobile menu */
.b4y-mobile-menu {
  position: fixed; inset: 0; background: #fff; z-index: 100;
  display: flex; flex-direction: column;
}
.b4y-mobile-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.b4y-mobile-nav {
  display: flex; flex-direction: column; padding: 8px 20px; flex: 1;
}
.b4y-mobile-nav a {
  padding: 16px 0; font-size: 18px; font-weight: 500;
  border-bottom: 1px solid var(--border);
}

/* ── FOOTER ─────────────────────────────────── */
.b4y-footer {
  background: var(--b4y-blue-900);
  color: rgba(255,255,255,.78);
  padding: 60px 0 24px;
  margin-top: 80px;
  font-size: 14px;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 2.6fr;
  gap: 56px;
}
.foot-brand p.foot-tagline {
  margin: 14px 0 22px; color: rgba(255,255,255,.7); font-size: 15px; max-width: 320px; line-height: 1.5;
}
.foot-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.foot-stats > div { display: flex; flex-direction: column; gap: 2px; }
.foot-stats strong { color: #fff; font-size: 22px; font-family: var(--font-display); letter-spacing: -0.02em; }
.foot-stats span { font-size: 12px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 0.06em; }

.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.foot-col { display: flex; flex-direction: column; }
.foot-col-h {
  background: transparent; border: 0; color: #fff;
  font: 600 13px/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0 0 14px; display: flex; justify-content: space-between; align-items: center;
  cursor: default;
}
.foot-col-chev { color: rgba(255,255,255,.6); transition: transform .2s; display: none; }
.foot-col-body { display: flex; flex-direction: column; gap: 10px; }
.foot-col-body a { color: rgba(255,255,255,.7); font-size: 14px; }
.foot-col-body a:hover { color: #fff; }
@media (max-width: 720px) {
  .foot-top { grid-template-columns: 1fr; gap: 36px; }
  .foot-cols { grid-template-columns: 1fr; gap: 0; }
  .foot-col { border-bottom: 1px solid rgba(255,255,255,.1); padding: 16px 0; }
  .foot-col-h { padding: 0; cursor: pointer; }
  .foot-col-chev { display: inline; }
  .foot-col-chev[data-open="1"] { transform: rotate(180deg); }
  .foot-col-body { max-height: 0; overflow: hidden; transition: max-height .25s, padding .25s; padding-top: 0; }
  .foot-col-body[data-open="1"] { max-height: 600px; padding-top: 12px; }
}

.foot-hr { margin: 40px 0 20px; border-top-color: rgba(255,255,255,.1); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.foot-copy { color: rgba(255,255,255,.55); font-size: 13px; }
.foot-social { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foot-social-link {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.foot-social-link:hover { background: rgba(255,255,255,.16); }
.foot-store { display: flex; gap: 6px; margin-left: 12px; }
.foot-store-btn {
  display: inline-flex; align-items: center; padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  font-size: 12px; color: rgba(255,255,255,.85);
}
.foot-store-btn:hover { border-color: rgba(255,255,255,.35); }

/* ── CARDS / Articles ───────────────────────── */
.article-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: transform .15s;
}
.article-card:hover { transform: translateY(-2px); }
.article-card .placeholder {
  height: 200px; border-radius: var(--r-md);
}
.article-card h3 {
  margin: 0; font: 600 18px/1.3 var(--font-display);
  letter-spacing: -0.02em; color: var(--text);
}
.article-card .meta {
  display: flex; gap: 8px; font-size: 13px; color: var(--text-muted);
  align-items: center;
}
.article-card .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }

/* ── HOME — common ──────────────────────────── */
.home-section { padding: 64px 0; }
.home-section.tight { padding: 40px 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; gap: 24px; flex-wrap: wrap; }
.section-head h2 {
  margin: 0; font: 600 28px/1.15 var(--font-display);
  letter-spacing: -0.02em;
}
.section-head .section-link {
  font-size: 14px; color: var(--b4y-blue-600); font-weight: 500;
}

/* Hero D1 */
.hero {
  position: relative; padding: 80px 0 64px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 400px at 80% 0%, var(--b4y-blue-50) 0%, transparent 60%),
    var(--surface);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center;
}
.hero-eyebrow { margin-bottom: 18px; }
.hero h1 {
  margin: 0 0 18px; font: 600 56px/1.05 var(--font-display);
  letter-spacing: -0.035em; color: var(--text);
  text-wrap: balance;
}
.hero p {
  margin: 0 0 26px; font-size: 19px; line-height: 1.5; color: var(--text-muted);
  max-width: 540px;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 18px; margin-top: 24px; font-size: 13px; color: var(--text-subtle); }
.hero-meta strong { color: var(--text); font-weight: 600; }
.hero-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.hero-visual .hero-photo {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 50%, rgba(255,255,255,.08) 50%),
    linear-gradient(180deg, oklch(60% 0.10 245 / .12) 0%, oklch(40% 0.11 245 / .25) 100%),
    repeating-linear-gradient(135deg, rgba(20,30,50,.06) 0 1px, transparent 1px 18px),
    var(--cocon-france-bg);
}
.hero-visual .photo-label {
  position: absolute; left: 16px; bottom: 16px;
  font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cocon-france-fg);
  background: rgba(255,255,255,.85); padding: 6px 10px; border-radius: 999px;
}
.hero-visual .hero-tag {
  position: absolute; right: 16px; top: 16px;
  background: rgba(255,255,255,.95); border-radius: 12px;
  padding: 12px 14px; min-width: 200px;
  box-shadow: var(--shadow-2);
}
.hero-visual .hero-tag .num { font: 600 22px/1 var(--font-display); color: var(--b4y-blue-700); letter-spacing: -0.02em; }
.hero-visual .hero-tag .lbl { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

@media (max-width: 900px) {
  .hero { padding: 48px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 17px; }
  .hero-visual { aspect-ratio: 4 / 3; }
}

/* Cocons grid */
.cocon-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px;
}
.cocon-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: inherit;
  background: #fff;
  transition: border-color .15s, transform .15s;
  position: relative; overflow: hidden;
  min-height: 220px;
}
.cocon-card:hover { border-color: var(--text); transform: translateY(-2px); }
.cocon-card.is-primary {
  background: var(--cocon-france-bg);
  border-color: transparent;
}
.cocon-card .cocon-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cocon-france-fg);
  background: rgba(255,255,255,.7);
  font: 600 14px/1 var(--font-display);
  letter-spacing: -0.02em;
}
.cocon-card.is-primary .cocon-icon { background: rgba(255,255,255,.6); }
.cocon-card[data-cocon="intl"] .cocon-icon  { background: var(--cocon-intl-bg); color: var(--cocon-intl-fg); }
.cocon-card[data-cocon="colis"] .cocon-icon { background: var(--cocon-colis-bg); color: var(--cocon-colis-fg); }
.cocon-card[data-cocon="pro"] .cocon-icon   { background: var(--cocon-pro-bg); color: var(--cocon-pro-fg); }
.cocon-card h3 {
  margin: 0; font: 600 22px/1.2 var(--font-display); letter-spacing: -0.02em;
}
.cocon-card.is-primary h3 { font-size: 28px; }
.cocon-card p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.cocon-card .cocon-link {
  margin-top: auto; padding-top: 8px;
  font-size: 14px; color: var(--b4y-blue-600); font-weight: 500;
}
.cocon-card.is-primary .cocon-link { color: var(--cocon-france-fg); }
.cocon-card .cocon-count {
  position: absolute; right: 20px; top: 20px;
  font: 500 12px/1 ui-monospace, monospace; color: var(--text-muted);
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .cocon-grid { grid-template-columns: 1fr 1fr; }
  .cocon-card.is-primary { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .cocon-grid { grid-template-columns: 1fr; }
}

/* Featured pillar */
.featured {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px;
  align-items: stretch;
}
.featured-main {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: #fff;
}
.featured-main .placeholder { height: 100%; min-height: 320px; border-radius: 0; }
.featured-main-body { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.featured-main-body h3 {
  margin: 0; font: 600 28px/1.18 var(--font-display); letter-spacing: -0.02em;
  text-wrap: balance;
}
.featured-main-body p { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.55; }
.featured-pill-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--text); color: #fff;
  font: 500 11px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase;
  width: fit-content;
}

.subpillars { display: flex; flex-direction: column; gap: 12px; }
.subpillar {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px 20px; display: flex; align-items: center; gap: 18px;
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color .15s;
}
.subpillar:hover { border-color: var(--text); }
.subpillar .num {
  font: 500 13px/1 ui-monospace, monospace; color: var(--text-subtle);
  letter-spacing: 0.04em;
}
.subpillar h4 { margin: 0; font: 600 16px/1.3 var(--font-ui); letter-spacing: -0.01em; flex: 1; }
.subpillar .read { font-size: 13px; color: var(--text-subtle); white-space: nowrap; }
@media (max-width: 900px) {
  .featured { grid-template-columns: 1fr; }
  .featured-main { grid-template-columns: 1fr; }
  .featured-main .placeholder { min-height: 220px; }
}

/* Calculator banner */
.calc-banner {
  background: var(--b4y-blue-50);
  border-radius: var(--r-xl);
  padding: 40px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
  position: relative; overflow: hidden;
}
.calc-banner h3 { margin: 0 0 8px; font: 600 32px/1.15 var(--font-display); letter-spacing: -0.025em; color: var(--b4y-blue-900); }
.calc-banner p { margin: 0 0 22px; color: var(--b4y-blue-700); font-size: 16px; }
.calc-banner-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.calc-visual {
  aspect-ratio: 1.2 / 1; border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg, rgba(20,40,80,.08) 0 1px, transparent 1px 16px),
    rgba(255,255,255,.6);
  position: relative;
}
.calc-visual::before {
  content: '2 min · gratuit'; position: absolute; left: 16px; top: 16px;
  font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--b4y-blue-700); background: #fff; padding: 6px 10px; border-radius: 999px;
}
.calc-visual::after {
  content: 'm³'; position: absolute; right: 28px; bottom: 24px;
  font: 600 90px/1 var(--font-display); color: var(--b4y-blue-200); letter-spacing: -0.05em;
}
@media (max-width: 720px) {
  .calc-banner { grid-template-columns: 1fr; padding: 28px; }
  .calc-banner h3 { font-size: 26px; }
  .calc-visual { display: none; }
}

/* Recent articles */
.recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .recent-grid { grid-template-columns: 1fr; } }

/* City chips */
.cities {
  background: var(--ink-50);
  border-radius: var(--r-xl); padding: 40px;
}
.cities h3 { margin: 0 0 8px; font: 600 28px/1.15 var(--font-display); letter-spacing: -0.025em; }
.cities p { margin: 0 0 22px; color: var(--text-muted); font-size: 16px; max-width: 520px; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  font-size: 14px; font-weight: 500; color: var(--text);
  transition: border-color .15s, background .15s;
}
.chip:hover { border-color: var(--b4y-blue-400); background: var(--b4y-blue-50); color: var(--b4y-blue-700); }
.chip.is-all { background: var(--text); color: #fff; border-color: transparent; }

/* Newsletter */
.newsletter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: center; padding: 40px 0;
  border-top: 1px solid var(--border);
}
.newsletter h3 { margin: 0 0 8px; font: 600 22px/1.2 var(--font-display); letter-spacing: -0.02em; }
.newsletter p { margin: 0; color: var(--text-muted); font-size: 15px; }
.newsletter-form {
  display: flex; gap: 8px;
  background: #fff; padding: 6px; border-radius: 999px;
  border: 1px solid var(--border);
}
.newsletter-form input {
  flex: 1; border: 0; outline: 0; padding: 0 16px;
  font: 15px/1 var(--font-ui); background: transparent;
}
@media (max-width: 720px) {
  .newsletter { grid-template-columns: 1fr; gap: 16px; }
}


/* ═══════════════════════════════════════════
   ARTICLES — Template A & B
   ═══════════════════════════════════════════ */

/* Article styles — A and B */

.breadcrumb {
  display: block;
  padding: 20px 24px;
  font-size: 13px; color: var(--text-muted);
  line-height: 1.5;
}
.breadcrumb a, .breadcrumb span { display: inline; }
.breadcrumb span { margin: 0 6px; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .current { color: var(--text); font-weight: 500; }
.breadcrumb span { opacity: .5; }

/* Article A — title block */
.art-a-head {
  max-width: 880px; margin: 0 auto 28px;
  text-align: left;
}
.art-a-head .badge { width: fit-content; }
.art-a-head h1 {
  margin: 14px 0 22px;
  font: 600 48px/1.1 var(--font-display);
  letter-spacing: -0.03em; text-wrap: balance;
}
@media (max-width: 720px) { .art-a-head h1 { font-size: 30px; } }
.art-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-muted); flex-wrap: wrap;
}
.art-meta strong { color: var(--text); font-weight: 600; }
.art-meta .dot-sep { opacity: .4; }
.art-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cocon-france-bg); color: var(--cocon-france-fg);
  font: 600 11px/1 var(--font-ui); margin-right: 4px;
}
.art-avatar.dark { background: rgba(255,255,255,.95); color: var(--cocon-intl-fg); }
.art-read { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; }

.art-cover {
  height: 480px; border-radius: var(--r-lg);
  margin: 0 0 8px;
}
@media (max-width: 720px) { .art-cover { height: 240px; } }
.art-cover-cap { font: italic 13px/1.4 var(--font-prose); color: var(--text-muted); margin-bottom: 40px; }

/* 2-col grid for Template A */
.art-a-grid {
  display: grid;
  grid-template-columns: 56px 1fr 320px;
  gap: 32px;
  margin-top: 32px;
}
.art-a-share {
  position: sticky; top: 100px;
  align-self: start;
  display: flex; flex-direction: column; gap: 8px;
}
.art-share-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-muted);
}
.art-share-btn:hover { border-color: var(--text); color: var(--text); }

.art-a-side {
  position: sticky; top: 100px;
  align-self: start;
  display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.art-side-block {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 20px;
}
.art-side-h {
  font: 500 11px/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px;
}
.toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.toc li a {
  display: block; padding: 8px 10px; font-size: 14px;
  color: var(--text-muted); border-radius: 6px; line-height: 1.4;
  border-left: 2px solid transparent;
}
.toc li a:hover { color: var(--text); background: var(--ink-50); }
.toc li.is-active a {
  color: var(--text); background: var(--b4y-blue-50);
  border-left-color: var(--b4y-blue-500);
  font-weight: 500;
}
.art-side-calc { background: var(--b4y-blue-50); border-color: transparent; }
.art-side-calc strong { display: block; font-size: 16px; margin-bottom: 4px; color: var(--b4y-blue-900); }
.art-side-calc p { margin: 0 0 14px; font-size: 13px; color: var(--b4y-blue-700); }
.art-related { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.art-related a {
  display: flex; flex-direction: column; gap: 6px; font-size: 14px;
  line-height: 1.4;
}
.art-related a:hover { color: var(--b4y-blue-600); }
.art-related .badge { width: fit-content; }

@media (max-width: 1023px) {
  .art-a-grid { grid-template-columns: 1fr; gap: 24px; }
  .art-a-share { display: none; }
  .art-a-side { position: static; max-height: none; }
}

/* PROSE */
.prose {
  max-width: 720px;
  font: 17px/1.65 var(--font-prose);
  color: var(--text);
}
.prose .chapo {
  font-size: 21px; line-height: 1.5; color: var(--text);
  margin: 0 0 32px;
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: -0.01em;
}
[data-pairing="serif-prose"] .prose .chapo { font-family: var(--font-prose); font-style: italic; font-size: 22px; }
.prose p { margin: 0 0 22px; }
.prose h2 {
  margin: 56px 0 16px;
  font: 600 30px/1.2 var(--font-display); letter-spacing: -0.02em;
  scroll-margin-top: 100px;
}
.prose h3 {
  margin: 32px 0 12px;
  font: 600 22px/1.25 var(--font-display); letter-spacing: -0.015em;
}
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }
.prose ul li, .prose ol li { margin-bottom: 8px; }
.prose blockquote {
  margin: 32px 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--b4y-blue-500);
  font: 500 19px/1.5 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text);
}
.prose blockquote cite { display: block; font-size: 14px; color: var(--text-muted); font-style: normal; margin-top: 12px; font-weight: 400; }
.prose a { color: var(--b4y-blue-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.callout {
  margin: 28px 0; padding: 18px 22px; border-radius: var(--r-md);
  border-left: 3px solid var(--b4y-blue-500);
  background: var(--b4y-blue-50);
  font-size: 16px; line-height: 1.55;
}
.callout strong { color: var(--b4y-blue-700); margin-right: 6px; }
.callout-warn { background: var(--cocon-colis-bg); border-left-color: var(--cocon-colis-dot); }
.callout-warn strong { color: var(--cocon-colis-fg); }
.callout-info {}

.art-table {
  width: 100%; margin: 28px 0;
  border-collapse: collapse;
  font-size: 15px;
}
.art-table th, .art-table td {
  text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.art-table th {
  font: 500 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--ink-50);
}
.art-table tr:hover td { background: var(--ink-50); }

.art-cta-box {
  margin: 36px 0; padding: 22px 24px;
  background: var(--b4y-blue-50);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.art-cta-box strong { color: var(--b4y-blue-900); }

.art-author {
  display: flex; gap: 20px; padding: 28px;
  background: var(--ink-50); border-radius: var(--r-lg);
  margin: 56px 0 32px;
}
.art-author-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--cocon-france-bg); color: var(--cocon-france-fg);
  display: flex; align-items: center; justify-content: center;
  font: 600 22px/1 var(--font-display); flex-shrink: 0;
}
.art-author strong { display: block; font-size: 18px; margin-bottom: 6px; }
.art-author p { margin: 0 0 8px; font-size: 15px; color: var(--text-muted); line-height: 1.5; }
.art-author a { color: var(--b4y-blue-600); font-size: 14px; font-weight: 500; }

.art-end-cta {
  margin: 40px 0 0; padding: 36px 32px;
  background: var(--text); color: #fff;
  border-radius: var(--r-lg);
}
.art-end-cta h3 { margin: 0 0 8px; font: 600 28px/1.15 var(--font-display); letter-spacing: -0.025em; }
.art-end-cta p { margin: 0; color: rgba(255,255,255,.75); }
.art-end-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,.3); }
.art-end-cta .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.art-end-cta .btn-primary { background: #fff; color: var(--text); }
.art-end-cta .btn-primary:hover { background: var(--ink-100); }

/* ── ARTICLE B (conversion) ─────────────── */
.art-b-hero {
  position: relative;
  min-height: 520px;
  color: #fff;
  overflow: hidden;
}
.art-b-hero-bg { position: absolute; inset: 0; }
.art-b-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,30,50,.6) 0%, rgba(20,30,50,.85) 100%);
}
.art-b-hero-content {
  position: relative;
  padding: 60px 24px 80px;
  display: flex; flex-direction: column; gap: 18px;
  align-items: flex-start;
}
.art-b-hero-content .badge { width: fit-content; }
.art-b-hero-cta { align-self: stretch; }
.art-b-hero-content h1 {
  margin: 8px 0 6px;
  font: 600 56px/1.05 var(--font-display); letter-spacing: -0.03em;
  text-wrap: balance; max-width: 880px;
}
@media (max-width: 720px) { .art-b-hero-content h1 { font-size: 32px; } .art-b-hero { min-height: 420px; } }
.art-b-hero-content p {
  margin: 0; font-size: 19px; line-height: 1.5;
  color: rgba(255,255,255,.85); max-width: 720px;
}
.art-b-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.75); align-items: center; }
.art-b-meta strong { color: #fff; }
.art-b-hero-cta { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.art-b-light-outline { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.art-b-light-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Estimation card */
.art-b-estim { margin-top: -40px; position: relative; z-index: 5; }
.estim-card {
  background: #fff; border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 32px;
  border: 1px solid var(--border);
}
.estim-head h2 {
  margin: 0 0 6px;
  font: 600 28px/1.15 var(--font-display); letter-spacing: -0.025em;
}
.estim-head p { margin: 0 0 22px; color: var(--text-muted); }
.estim-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.estim-field { display: flex; flex-direction: column; gap: 6px; }
.estim-field label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.estim-field input, .estim-field select {
  height: 48px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  font: 15px/1 var(--font-ui); background: #fff; color: var(--text);
  outline: 0;
}
.estim-field input:focus, .estim-field select:focus { border-color: var(--b4y-blue-500); }
.estim-submit { height: 48px; }
@media (max-width: 720px) {
  .estim-form { grid-template-columns: 1fr; }
  .estim-card { padding: 24px; }
  .estim-head h2 { font-size: 22px; }
}

/* Sommaire B */
.art-b-toc {
  margin: 56px auto;
  background: var(--ink-50);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  max-width: 880px;
}
.art-b-toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; }
.art-b-toc li { break-inside: avoid; margin-bottom: 8px; }
.art-b-toc a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0; font-size: 15px; color: var(--text);
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}
.art-b-toc a:hover { color: var(--b4y-blue-600); }
.art-b-toc-num { font: 500 12px/1 ui-monospace, monospace; color: var(--text-subtle); }
@media (max-width: 720px) { .art-b-toc ol { columns: 1; } .art-b-toc { padding: 20px; } }

.art-b-prose-wrap { padding: 0 24px; }
.art-b-prose { margin: 0 auto; }

.art-b-cta-inline {
  margin: 32px 0; padding: 22px 26px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--ink-50);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.art-b-cta-inline.blue { background: var(--b4y-blue-50); border-color: transparent; }
.art-b-cta-inline strong { display: block; font-size: 17px; color: var(--text); }
.art-b-cta-inline p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }
@media (max-width: 720px) {
  .art-b-cta-inline { flex-direction: column; align-items: flex-start; }
}

.art-b-table thead { background: var(--text); }
.art-b-table thead th { color: rgba(255,255,255,.85); background: transparent; }
.art-b-table tbody tr:nth-child(odd) td { background: var(--ink-50); }
.art-table-note { font-size: 13px; color: var(--text-subtle); font-style: italic; margin-top: -10px; }

.art-b-compare {
  margin: 32px 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.art-b-compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.art-b-compare th, .art-b-compare td {
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.art-b-compare thead th {
  background: var(--ink-50);
  font: 500 13px/1.3 var(--font-ui); color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}
.art-b-compare thead th.featured-col { background: var(--b4y-blue-600); color: #fff; }
.art-b-compare .featured-col { background: var(--b4y-blue-50); }
.art-b-compare .featured-col strong { color: var(--b4y-blue-700); font-size: 16px; }
.art-b-compare .featured-tag {
  display: inline-block; margin-left: 6px;
  padding: 2px 6px; background: rgba(255,255,255,.2); border-radius: 4px;
  font-size: 11px; letter-spacing: 0.04em;
}

.art-b-quote {
  margin: 32px 0; padding: 24px 28px;
  background: var(--ink-50); border-radius: var(--r-md);
  display: flex; gap: 18px; border-left: 0;
}
.art-b-quote-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--cocon-intl-bg); color: var(--cocon-intl-fg);
  display: flex; align-items: center; justify-content: center;
  font: 600 16px/1 var(--font-display); flex-shrink: 0;
}
.art-b-quote p { margin: 0 0 8px; font-size: 17px; line-height: 1.5; font-style: italic; }
.art-b-quote cite { font-size: 14px; color: var(--text-muted); font-style: normal; }

.art-b-faq { display: flex; flex-direction: column; gap: 0; margin: 24px 0; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; appearance: none; border: 0; background: transparent;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; font: 500 17px/1.4 var(--font-display); color: var(--text);
  text-align: left; letter-spacing: -0.01em;
}
.faq-chev {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink-100); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .2s, background .2s;
  font-size: 16px;
}
.faq-item.is-open .faq-chev { transform: rotate(45deg); background: var(--b4y-blue-500); color: #fff; }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .25s, padding .25s;
}
.faq-item.is-open .faq-a { max-height: 600px; padding-bottom: 18px; }
.faq-a p { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.6; }

.art-b-end {
  margin: 64px 0 0;
}
.art-b-end-card {
  background: var(--b4y-blue-700); color: #fff;
  border-radius: var(--r-xl);
  padding: 56px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.art-b-end-card h2 { margin: 0 0 8px; font: 600 36px/1.1 var(--font-display); letter-spacing: -0.025em; }
.art-b-end-card p { margin: 0; color: rgba(255,255,255,.8); font-size: 17px; }
.art-b-end-cta { display: flex; flex-direction: column; gap: 12px; }
.art-b-end-cta .btn-primary { background: #fff; color: var(--text); justify-self: stretch; }
.art-b-end-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,.4); }
.art-b-end-cta .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.art-b-end-link { color: rgba(255,255,255,.85); font-size: 14px; text-align: center; padding: 8px; }
@media (max-width: 720px) {
  .art-b-end-card { grid-template-columns: 1fr; padding: 32px 24px; }
  .art-b-end-card h2 { font-size: 26px; }
}

/* mobile-only sticky */
.mobile-only { display: none; }
@media (max-width: 720px) {
  .mobile-only { display: flex; }
}