/* Bring4You /transport/ · tokens (Jalon B)
   Valeurs relevées sur bring4you.com le 2026-10-28 (03-design/reference/styles-app.json).
   Deux écarts volontaires pour le contraste AA, notés dans maquette-audit.md :
   bouton bleu au repos = bleu de survol de l'app (#2563eb), texte du bouton orange en bleu nuit (#0a2037) au lieu du blanc (2,85:1). */
:root {
  /* Couleurs de marque */
  --b4yt-navy: #001a72;          /* accroche du bandeau, titres de marque */
  --b4yt-primary: #2563eb;       /* boutons et liens (app : #3b82f6 au repos, #2563eb au survol) */
  --b4yt-primary-hover: #1d4ed8;
  --b4yt-primary-ink: #ffffff;
  --b4yt-accent: #e67e22;        /* bouton d'action orange de l'app */
  --b4yt-accent-hover: #f39c12;
  --b4yt-accent-ink: #0a2037;    /* 5,8:1 sur l'orange (le blanc de l'app fait 2,85:1) */
  --b4yt-accent-soft: #f39c12;   /* titres du footer, chevrons */
  --b4yt-star: #f59e0b;
  --b4yt-ok: #22c55e;            /* puces de réassurance */

  /* Texte */
  --b4yt-ink: #000000;           /* corps de texte de l'app */
  --b4yt-ink-strong: #111827;    /* H1 */
  --b4yt-ink-soft: #1f2937;      /* navigation, auteur */
  --b4yt-muted: #6b7280;         /* fil d'Ariane, métadonnées */
  --b4yt-muted-2: #4b5563;       /* réassurance */
  --b4yt-link-menu: #2b6cb0;     /* liens des sous-menus */

  /* Surfaces */
  --b4yt-surface: #ffffff;
  --b4yt-surface-alt: #eff6ff;   /* bandeau devis (blue-50) */
  --b4yt-surface-form: #b3d4ff;  /* cadre du formulaire du bandeau */
  --b4yt-surface-zebra: #f8fafc;
  --b4yt-footer: #0a2037;
  --b4yt-line: #e5e7eb;
  --b4yt-line-input: #d1d5db;

  /* Typographie : une seule famille, celle de l'app */
  --b4yt-font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --b4yt-fs-body: 1rem;          /* 16/24 */
  --b4yt-lh-body: 1.5;
  --b4yt-fs-h1: clamp(1.625rem, 1.2rem + 1.4vw, 1.875rem);   /* 30/36 desktop */
  --b4yt-fs-h2: 1.5rem;          /* 24/36 */
  --b4yt-fs-h3: 1.125rem;
  --b4yt-fs-banner: clamp(1.875rem, 1.4rem + 1.6vw, 2.25rem); /* 36/40 desktop, 30 mobile */
  --b4yt-fs-small: .875rem;
  --b4yt-fs-xs: .75rem;

  /* Formes */
  --b4yt-radius-xs: 5px;
  --b4yt-radius-sm: 6px;
  --b4yt-radius-md: 8px;
  --b4yt-radius-lg: 12px;
  --b4yt-radius-xl: 16px;
  --b4yt-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --b4yt-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --b4yt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  /* Gabarit */
  --b4yt-wrap: 80rem;            /* max-w-7xl */
  --b4yt-wrap-banner: 72rem;     /* max-w-6xl */
  --b4yt-content: 47.5rem;       /* 760 px : colonne de lecture (l'app est à 1 120 px) */
  --b4yt-gutter: 1rem;           /* px-4, md:px-16 au-delà de 768 px */
  --b4yt-header-h: 80px;
}
/* ==========================================================================
   B4Y Transport · composants. Une classe = un motif, préfixe b4yt-.
   Construit par 04-build/theme/build-css.sh : tokens.css + ce fichier → css/components.css
   ========================================================================== */

/* Base (surcharge le reset de Hello) ------------------------------------- */
body {
  font-family: var(--b4yt-font);
  font-size: var(--b4yt-fs-body);
  line-height: var(--b4yt-lh-body);
  color: var(--b4yt-ink);
  background: var(--b4yt-surface);
}
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin: 0; }
p { margin: 0; }
a { color: var(--b4yt-primary); }
a:hover, a:active { color: var(--b4yt-primary-hover); }
:focus-visible { outline: 3px solid #f97316; outline-offset: 2px; box-shadow: none; }
img { display: block; max-width: 100%; height: auto; }
.b4yt-icon { width: 1.25em; height: 1.25em; flex: none; }
.b4yt-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.b4yt-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; background: var(--b4yt-navy); color: #fff; border-radius: var(--b4yt-radius-sm);
}
.b4yt-skip:focus { top: 1rem; color: #fff; }
.b4yt-noscroll { overflow: hidden; }
.b4yt-wrap {
  max-width: var(--b4yt-wrap);
  margin-inline: auto;
  padding-inline: var(--b4yt-gutter);
}
@media (min-width: 768px) { .b4yt-wrap { padding-inline: 4rem; } }

/* Boutons --------------------------------------------------------------- */
.b4yt-btn,
button.b4yt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .75rem 1.5rem;
  font: 700 1rem/1.2 var(--b4yt-font);
  text-align: center; text-decoration: none; white-space: normal;
  border: 1px solid transparent; border-radius: var(--b4yt-radius-sm);
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.b4yt-btn--primary, button.b4yt-btn--primary { background: var(--b4yt-primary); color: var(--b4yt-primary-ink); box-shadow: var(--b4yt-shadow-md); }
.b4yt-btn--primary:hover, .b4yt-btn--primary:focus-visible, button.b4yt-btn--primary:hover { background: var(--b4yt-primary-hover); color: var(--b4yt-primary-ink); }
.b4yt-btn--primary:active { background: var(--b4yt-navy); }
.b4yt-btn--accent { background: var(--b4yt-accent); color: var(--b4yt-accent-ink); border-radius: var(--b4yt-radius-xs); min-height: 48px; }
.b4yt-btn--accent:hover, .b4yt-btn--accent:focus-visible { background: var(--b4yt-accent-hover); color: var(--b4yt-accent-ink); }
.b4yt-btn--accent:active { background: #d35400; color: #fff; }
.b4yt-btn--ghost { background: var(--b4yt-surface); color: var(--b4yt-primary); border-color: var(--b4yt-primary); }
.b4yt-btn--ghost:hover, .b4yt-btn--ghost:focus-visible { background: var(--b4yt-primary); color: var(--b4yt-primary-ink); }
.b4yt-btn--block { width: 100%; }

/* Header de l'app ------------------------------------------------------- */
.b4yt-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--b4yt-surface);
  box-shadow: var(--b4yt-shadow-sm);
  border-bottom: 1px solid #f3f4f6;
}
.admin-bar .b4yt-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .b4yt-header { top: 46px; } }
.b4yt-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: var(--b4yt-header-h); padding-inline: 1rem;
}
.b4yt-header__logo { flex: none; }
.b4yt-header__logo img { width: 160px; height: auto; }
@media (min-width: 1024px) { .b4yt-header__logo img { width: 207px; } }

.b4yt-header__burger,
button.b4yt-header__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  color: var(--b4yt-ink-soft); background: none; border: 0; border-radius: var(--b4yt-radius-sm);
}
.b4yt-header__burger:hover, .b4yt-header__burger:focus { background: var(--b4yt-surface-alt); color: var(--b4yt-ink-soft); }
.b4yt-header__burger .b4yt-icon { width: 28px; height: 28px; }
.b4yt-header__burger-close { display: none; }
.b4yt-header.is-open .b4yt-header__burger-open { display: none; }
.b4yt-header.is-open .b4yt-header__burger-close { display: block; }

.b4yt-nav__list { list-style: none; margin: 0; padding: 0; }
.b4yt-nav__toggle,
button.b4yt-nav__toggle,
.b4yt-nav__link {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem 0;
  font: 500 .875rem/1.25 var(--b4yt-font);
  color: var(--b4yt-ink-soft); background: none; border: 0; border-radius: 0;
  text-decoration: none; white-space: nowrap;
}
.b4yt-nav__toggle:hover, .b4yt-nav__toggle:focus, .b4yt-nav__link:hover,
.b4yt-nav__item.is-open > .b4yt-nav__toggle { color: var(--b4yt-primary); background: none; }
.b4yt-nav__chevron { width: 16px; height: 16px; transition: transform .15s; }
.b4yt-nav__item.is-open .b4yt-nav__chevron { transform: rotate(180deg); }
.b4yt-nav__auth { display: flex; gap: 1.25rem; }
.b4yt-nav__auth-link { font-weight: 700; font-size: .875rem; color: var(--b4yt-ink-soft); text-decoration: none; }
.b4yt-nav__auth-link:hover { color: var(--b4yt-primary); }

.b4yt-mega__title { font-size: 1.125rem; font-weight: 600; color: #1e3a5f; margin-bottom: 1rem; }
.b4yt-mega__title a { color: inherit; text-decoration: none; }
.b4yt-mega__title a:hover { color: var(--b4yt-primary); }
.b4yt-mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem 1.5rem; }
.b4yt-mega__links a { font-size: .875rem; color: var(--b4yt-link-menu); text-decoration: none; }
.b4yt-mega__links a:hover { color: var(--b4yt-primary-hover); text-decoration: underline; }

/* Navigation mobile (< 1024 px) */
@media (max-width: 1023px) {
  .b4yt-nav {
    display: none;
    position: fixed; inset: var(--b4yt-header-h) 0 0 0; z-index: 49;
    overflow-y: auto; padding: .5rem 1rem 2rem;
    background: var(--b4yt-surface); border-top: 1px solid var(--b4yt-line);
  }
  .admin-bar .b4yt-nav { top: calc(var(--b4yt-header-h) + 46px); }
  .b4yt-header.is-open .b4yt-nav { display: block; }
  .b4yt-nav__item { border-bottom: 1px solid var(--b4yt-line); }
  .b4yt-nav__toggle, button.b4yt-nav__toggle, .b4yt-nav__link {
    width: 100%; justify-content: space-between; padding: 1rem 0; font-size: 1rem;
  }
  .b4yt-mega { display: none; padding: 0 0 1.25rem; }
  .b4yt-nav__item.is-open .b4yt-mega { display: grid; gap: 1.5rem; }
  .b4yt-mega__title { font-size: 1rem; margin-bottom: .75rem; }
  .b4yt-mega__col--grid .b4yt-mega__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b4yt-nav__auth { padding-top: 1.25rem; }
  .b4yt-nav__auth-link { flex: 1; text-align: center; padding: .75rem; border: 1px solid var(--b4yt-line); border-radius: var(--b4yt-radius-sm); font-size: 1rem; }
}

/* Navigation desktop (≥ 1024 px) */
@media (min-width: 1024px) {
  .b4yt-header__burger, button.b4yt-header__burger { display: none; }
  .b4yt-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 2rem; }
  .b4yt-nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); }
  .b4yt-nav__item { position: relative; }
  .b4yt-mega {
    display: none;
    position: absolute; top: calc(100% + 14px); left: -1rem;
    grid-auto-flow: column; gap: 2.5rem; width: max-content;
    padding: 1.25rem 1rem 1.5rem;
    background: var(--b4yt-surface);
    border: 1px solid var(--b4yt-line); border-radius: var(--b4yt-radius-sm);
    box-shadow: var(--b4yt-shadow-lg);
  }
  .b4yt-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .b4yt-nav__item--sub:hover .b4yt-mega,
  .b4yt-nav__item--sub:focus-within .b4yt-mega,
  .b4yt-nav__item.is-open .b4yt-mega { display: grid; }
  .b4yt-mega__col { min-width: 15rem; }
  .b4yt-mega__links { gap: 1.25rem; }
  .b4yt-mega__col--grid .b4yt-mega__links { grid-template-columns: repeat(3, 8.5rem); gap: 1rem 1.5rem; }
}

/* Bandeau devis --------------------------------------------------------- */
.b4yt-banner { background: var(--b4yt-surface-alt); padding: 1.5rem; }
@media (min-width: 768px) { .b4yt-banner { padding: 3rem; } }
.b4yt-banner__inner {
  max-width: var(--b4yt-wrap-banner); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2rem;
}
@media (min-width: 768px) { .b4yt-banner__inner { flex-direction: row; } }
.b4yt-banner__main { flex: 1; width: 100%; }
.b4yt-banner__title { font-size: var(--b4yt-fs-banner); line-height: 1.12; font-weight: 700; color: var(--b4yt-navy); margin-bottom: .5rem; }
.b4yt-banner__lead { font-size: 1.125rem; color: var(--b4yt-ink-soft); margin-bottom: 1.5rem; }
.b4yt-banner__illus { display: none; width: 384px; max-width: 34%; border-radius: var(--b4yt-radius-xl); }
@media (min-width: 900px) { .b4yt-banner__illus { display: block; } }
.b4yt-banner__proof { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1rem; padding-left: .5rem; }

.b4yt-quote {
  display: grid; gap: .625rem;
  padding: .75rem; background: var(--b4yt-surface-form); border-radius: var(--b4yt-radius-lg);
  box-shadow: var(--b4yt-shadow-sm);
}
@media (min-width: 640px) { .b4yt-quote { grid-template-columns: 1fr 1fr auto; } }
.b4yt-quote__field { position: relative; display: block; line-height: 1.5; }
.b4yt-quote__icon { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #9ca3af; pointer-events: none; }
.b4yt-quote__input,
input[type=text].b4yt-quote__input {
  width: 100%; height: 50px; padding: 0 1rem 0 2.75rem;
  font: 400 1rem var(--b4yt-font); color: var(--b4yt-ink-soft);
  background: #fff; border: 1px solid var(--b4yt-line-input); border-radius: var(--b4yt-radius-sm);
}
.b4yt-quote__input::placeholder { color: #6b7280; }
.b4yt-quote__input:focus, input[type=text].b4yt-quote__input:focus { outline: 2px solid #f97316; outline-offset: 0; border-color: #f97316; }
.b4yt-quote__submit { height: 50px; white-space: nowrap; }

.b4yt-reassure { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; margin: 0; padding: 0; }
.b4yt-reassure li { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--b4yt-muted-2); }
.b4yt-reassure li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--b4yt-ok); }

/* Note Trustpilot ------------------------------------------------------- */
.b4yt-rating { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--b4yt-muted-2); text-decoration: none; }
a.b4yt-rating:hover { color: var(--b4yt-ink-soft); text-decoration: underline; }
.b4yt-rating--block { margin-top: 1rem; font-size: .8125rem; }
.b4yt-stars { width: 80px; height: 16px; flex: none; }
.b4yt-stars__empty { fill: #d1d5db; }
.b4yt-stars__full { fill: var(--b4yt-star); }
@media (min-width: 640px) {
  .b4yt-banner__proof .b4yt-rating { padding-left: 1.25rem; border-left: 1px solid #9ca3af; }
}

/* Fil d'Ariane ---------------------------------------------------------- */
.b4yt-crumbs { margin-top: 2rem; }
.b4yt-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; font-size: .75rem; color: var(--b4yt-muted); }
.b4yt-crumbs__item { display: inline-flex; align-items: center; }
.b4yt-crumbs__item + .b4yt-crumbs__item::before { content: ">"; margin-right: .375rem; }
.b4yt-crumbs a { display: inline-flex; align-items: center; color: var(--b4yt-muted); text-decoration: none; padding: .25rem 0; }
.b4yt-crumbs a:hover { color: var(--b4yt-primary); text-decoration: underline; }
.b4yt-crumbs__home { width: 16px; height: 16px; }

/* Titre de l'article ---------------------------------------------------- */
.b4yt-intro { display: block; margin: 0 0 3rem; }
@media (min-width: 768px) { .b4yt-intro { margin-bottom: 4rem; } }
.b4yt-intro__text { max-width: 48rem; }
.b4yt-intro__title { font-size: var(--b4yt-fs-h1); line-height: 1.2; font-weight: 700; color: var(--b4yt-ink-strong); }
.b4yt-intro__lead { margin-top: 1.25rem; font-style: italic; color: var(--b4yt-ink); }
/* Visuel à la Une sous le titre, à la largeur de lecture (48 rem) ; le recadrage garde le haut du visuel (visages) */
.b4yt-intro__img { display: block; width: 100%; max-width: 48rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; margin-top: 1.75rem; border-radius: var(--b4yt-radius-md); box-shadow: var(--b4yt-shadow-md); }

/* Auteur ---------------------------------------------------------------- */
.b4yt-byline { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.b4yt-byline__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--b4yt-surface-alt); }
.b4yt-byline__text { display: flex; flex-direction: column; }
.b4yt-byline__name { font-weight: 600; color: var(--b4yt-ink-soft); }
.b4yt-byline__date { font-size: .8125rem; color: var(--b4yt-muted); }

.b4yt-author {
  display: grid; gap: 1.25rem; max-width: var(--b4yt-content);
  margin: 3rem 0; padding: 1.5rem;
  background: var(--b4yt-surface); border-radius: var(--b4yt-radius-md); box-shadow: var(--b4yt-shadow-lg);
}
@media (min-width: 640px) { .b4yt-author { grid-template-columns: 96px 1fr; align-items: start; } }
.b4yt-author__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid #60a5fa; background: var(--b4yt-surface-alt); }
.b4yt-author__name { font-size: 1.125rem; font-weight: 600; color: var(--b4yt-ink-soft); margin-bottom: .5rem; }
.b4yt-author__bio { color: var(--b4yt-muted-2); margin-bottom: .75rem; }
.b4yt-author__row { color: var(--b4yt-ink-soft); margin-top: .5rem; }
.b4yt-author__row a { text-decoration: none; }
.b4yt-author__row a:hover { text-decoration: underline; }

/* Corps de l'article ---------------------------------------------------- */
.b4yt-article { display: grid; gap: 3rem; margin-top: 1.5rem; }
.b4yt-article__main { min-width: 0; } /* titre, visuel, auteur et corps : l'encart latéral démarre à hauteur du titre */
@media (min-width: 1100px) {
  .b4yt-article { grid-template-columns: minmax(0, var(--b4yt-content)) 18.5rem; justify-content: space-between; }
}
.b4yt-prose { min-width: 0; }
.b4yt-prose > * + * { margin-top: 1rem; }
.b4yt-prose h2 { font-size: var(--b4yt-fs-h2); line-height: 1.5; color: var(--b4yt-ink); margin-top: 2.25rem; scroll-margin-top: 100px; }
.b4yt-prose h2:first-child { margin-top: 0; }
.b4yt-prose h3 { font-size: var(--b4yt-fs-h3); line-height: 1.4; color: var(--b4yt-ink); margin-top: 1.75rem; }
.b4yt-prose h2 + *, .b4yt-prose h3 + * { margin-top: .625rem; }
.b4yt-prose ul, .b4yt-prose ol { padding-left: 1.5rem; }
.b4yt-prose ul { list-style: disc; }
.b4yt-prose ol { list-style: decimal; }
.b4yt-prose li + li { margin-top: .375rem; }
.b4yt-prose li::marker { color: var(--b4yt-primary); }
.b4yt-prose strong { font-weight: 700; color: var(--b4yt-ink); }
.b4yt-prose a { text-decoration: underline; text-underline-offset: 2px; }
.b4yt-prose figure { margin: 1.5rem 0; }
.b4yt-prose figure img { border-radius: var(--b4yt-radius-md); }
.b4yt-prose figcaption { margin-top: .5rem; font-size: .8125rem; font-style: normal; color: var(--b4yt-muted); }
.b4yt-prose blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 4px solid var(--b4yt-line); color: var(--b4yt-ink-soft); }

/* Tableau : défilement horizontal sur mobile, lignes zébrées */
.b4yt-prose .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--b4yt-line); border-radius: var(--b4yt-radius-md); }
.b4yt-prose table { width: 100%; min-width: 34rem; margin: 0; font-size: .9375rem; border-collapse: collapse; }
.b4yt-prose th, .b4yt-prose td { padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--b4yt-line); text-align: left; vertical-align: top; line-height: 1.45; }
.b4yt-prose thead th { background: var(--b4yt-surface-alt); color: var(--b4yt-navy); font-weight: 700; font-size: .875rem; }
.b4yt-prose tbody > tr:nth-child(odd) > td, .b4yt-prose tbody > tr:nth-child(odd) > th { background: var(--b4yt-surface); }
.b4yt-prose tbody > tr:nth-child(even) > td, .b4yt-prose tbody > tr:nth-child(even) > th { background: var(--b4yt-surface-zebra); }
.b4yt-prose tbody tr:hover > td { background: var(--b4yt-surface-alt); }
.b4yt-prose tbody tr:last-child > td { border-bottom: 0; }
.b4yt-prose .wp-block-table figcaption { padding: .5rem 1rem; margin: 0; border-top: 1px solid var(--b4yt-line); }

/* Encadré « À retenir » (bloc Groupe, classe additionnelle b4yt-retenir) */
.b4yt-prose .b4yt-retenir {
  margin: 1.75rem 0; padding: 1.25rem 1.5rem;
  background: var(--b4yt-surface-alt); border-left: 4px solid var(--b4yt-primary); border-radius: 0 var(--b4yt-radius-md) var(--b4yt-radius-md) 0;
}
.b4yt-prose .b4yt-retenir > * + * { margin-top: .5rem; }
.b4yt-prose .b4yt-retenir > :first-child { font-weight: 700; color: var(--b4yt-navy); }
.b4yt-prose .b4yt-retenir ul { margin-top: .5rem; }

/* FAQ (bloc FAQ de Rank Math) */
.b4yt-prose :is(.rank-math-list-item, .rank-math-faq-item) { padding: 1.25rem 0; border-bottom: 1px solid var(--b4yt-line); }
.b4yt-prose :is(.rank-math-list-item, .rank-math-faq-item):first-child { border-top: 1px solid var(--b4yt-line); }
.b4yt-prose .rank-math-question { font-size: var(--b4yt-fs-h3); line-height: 1.4; margin: 0; }
.b4yt-prose .rank-math-answer { margin-top: .5rem; }
.b4yt-prose .rank-math-answer > * + * { margin-top: .75rem; }
.b4yt-faq__toggle,
button.b4yt-faq__toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0; font: inherit; color: inherit; text-align: left; white-space: normal;
  background: none; border: 0; border-radius: 0; cursor: default;
}
.b4yt-faq__toggle:hover, .b4yt-faq__toggle:focus { background: none; color: inherit; }
:is(.rank-math-list-item, .rank-math-faq-item).is-collapsible .b4yt-faq__toggle { cursor: pointer; }
:is(.rank-math-list-item, .rank-math-faq-item).is-collapsible .b4yt-faq__toggle::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--b4yt-primary); border-bottom: 2px solid var(--b4yt-primary);
  transform: rotate(45deg); transition: transform .15s;
}
:is(.rank-math-list-item, .rank-math-faq-item).is-collapsible.is-open .b4yt-faq__toggle::after { transform: rotate(-135deg); }
:is(.rank-math-list-item, .rank-math-faq-item).is-collapsible:not(.is-open) .rank-math-answer { display: none; }

/* CTA ------------------------------------------------------------------- */
.b4yt-cta { margin: 2rem 0; }
.b4yt-cta--inline { padding: 1.5rem; background: var(--b4yt-surface-alt); border: 1px solid #bfdbfe; border-radius: var(--b4yt-radius-lg); }
.b4yt-cta--end { padding-top: 2rem; margin-top: 2.5rem; border-top: 1px solid var(--b4yt-line); }
.b4yt-cta__title { font-weight: 700; font-size: 1.125rem; color: var(--b4yt-navy); }
.b4yt-cta--end .b4yt-cta__title { color: var(--b4yt-ink); font-size: 1rem; }
.b4yt-cta__text { margin-top: .375rem; color: var(--b4yt-ink-soft); }
.b4yt-cta .b4yt-btn { margin-top: 1rem; }
.b4yt-prose .b4yt-cta .b4yt-btn { text-decoration: none; }

/* Encart latéral (desktop) ---------------------------------------------- */
.b4yt-aside { display: none; }
@media (min-width: 1100px) {
  .b4yt-aside { display: block; }
  .b4yt-aside__sticky { position: sticky; top: calc(var(--b4yt-header-h) + 1.5rem); }
}
.b4yt-toc { padding: 1.25rem; border: 1px solid var(--b4yt-line); border-radius: var(--b4yt-radius-md); }
.b4yt-toc__title { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--b4yt-muted); margin-bottom: .75rem; }
.b4yt-toc__list { list-style: none; margin: 0; padding: 0; }
.b4yt-toc__list li + li { margin-top: .625rem; }
.b4yt-toc__list a { display: block; font-size: .875rem; line-height: 1.4; color: var(--b4yt-ink-soft); text-decoration: none; }
.b4yt-toc__list a:hover { color: var(--b4yt-primary); text-decoration: underline; }
.b4yt-aside__cta { margin-top: 1rem; padding: 1.25rem; background: var(--b4yt-surface-alt); border-radius: var(--b4yt-radius-md); }
.b4yt-aside__cta-title { font-weight: 700; color: var(--b4yt-navy); margin-bottom: 1rem; line-height: 1.35; }

/* Cartes ---------------------------------------------------------------- */
.b4yt-cards { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .b4yt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .b4yt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.b4yt-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--b4yt-surface); border: 1px solid var(--b4yt-line); border-radius: var(--b4yt-radius-lg);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.b4yt-card:hover, .b4yt-card:focus-within { box-shadow: var(--b4yt-shadow-lg); border-color: #bfdbfe; }
.b4yt-card:active { transform: translateY(1px); }
.b4yt-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.b4yt-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.b4yt-card__title { font-size: 1.125rem; line-height: 1.35; color: var(--b4yt-ink-strong); }
.b4yt-card__title a { color: inherit; text-decoration: none; }
.b4yt-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.b4yt-card__title a:focus-visible { outline: none; }
.b4yt-card:focus-within { outline: 3px solid #f97316; outline-offset: 2px; }
.b4yt-card__text { margin-top: .5rem; font-size: .9375rem; color: var(--b4yt-muted-2); flex: 1; }
.b4yt-card__more { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1rem; font-size: .875rem; font-weight: 600; color: var(--b4yt-primary); }
.b4yt-card__more .b4yt-icon { width: 16px; height: 16px; transition: transform .15s; }
.b4yt-card:hover .b4yt-card__more .b4yt-icon { transform: translateX(3px); }

.b4yt-related { margin: 3.5rem 0 4rem; }
.b4yt-related__title { font-size: var(--b4yt-fs-h2); margin-bottom: 1.25rem; color: var(--b4yt-ink-strong); }

/* Hub ------------------------------------------------------------------- */
.b4yt-hub-hero { background: var(--b4yt-surface-alt); padding: 0 1rem 2.5rem; }
@media (min-width: 768px) { .b4yt-hub-hero { padding: 0 3rem 3.5rem; } }
.b4yt-hub-hero__inner { max-width: var(--b4yt-wrap-banner); margin-inline: auto; }
.b4yt-hub-hero .b4yt-crumbs { margin: 0; padding-top: 1.5rem; }
.b4yt-hub-hero__title { max-width: 21em; margin-top: 1.25rem; font-size: var(--b4yt-fs-banner); line-height: 1.15; color: var(--b4yt-navy); }
.b4yt-hub-hero__lead { max-width: 44rem; margin-top: 1rem; font-size: 1.125rem; color: var(--b4yt-ink-soft); }
.b4yt-hub-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1rem; }

.b4yt-hub-group { margin-top: 3.5rem; }
.b4yt-hub-group__head { margin-bottom: 1.25rem; }
.b4yt-hub-group__title { font-size: var(--b4yt-fs-h2); color: var(--b4yt-ink-strong); }
.b4yt-hub-group__text { margin-top: .25rem; color: var(--b4yt-muted-2); }

.b4yt-how { margin: 4rem 0; padding: 2rem 1.5rem; border: 1px solid var(--b4yt-line); border-radius: var(--b4yt-radius-xl); }
@media (min-width: 768px) { .b4yt-how { padding: 2.5rem; } }
.b4yt-how__title { font-size: var(--b4yt-fs-h2); color: var(--b4yt-ink-strong); }
.b4yt-how__steps { display: grid; gap: 1.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
@media (min-width: 768px) { .b4yt-how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.b4yt-how__icon { width: 48px; height: 48px; padding: 12px; color: var(--b4yt-primary); background: var(--b4yt-surface-alt); border-radius: 50%; }
.b4yt-how__step-title { margin: 1rem 0 .375rem; font-size: 1.125rem; color: var(--b4yt-ink-strong); }
.b4yt-how__step p { color: var(--b4yt-muted-2); }
.b4yt-how__cta { margin-top: 2rem; }
.b4yt-hub-blog { margin: 0 0 4rem; color: var(--b4yt-muted-2); }

.b4yt-404 { padding-bottom: 4rem; }
.b4yt-404 .b4yt-intro__title { margin: 1.5rem 0 1rem; }
.b4yt-404__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Footer de l'app ------------------------------------------------------- */
.b4yt-footer { background: var(--b4yt-footer); color: #fff; padding: 3rem 1rem 0; font-size: .875rem; }
@media (min-width: 768px) { .b4yt-footer { padding-inline: 4rem; } }
.b4yt-footer__inner { max-width: 76rem; margin-inline: auto; display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .b4yt-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .b4yt-footer__inner { grid-template-columns: 1.15fr 1fr 1.1fr .85fr; gap: 3rem; } }
.b4yt-footer__about p { max-width: 17.5rem; margin-top: 1.25rem; line-height: 1.45; font-size: .875rem; }
.b4yt-footer__logo img { width: 190px; }
.b4yt-footer__col { display: flex; flex-direction: column; gap: 2.5rem; }
.b4yt-footer__title {
  display: inline-block; align-self: flex-start;
  padding-bottom: .25rem; margin-bottom: 1rem;
  font-size: .875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--b4yt-accent-soft); border-bottom: 1px solid rgb(255 255 255 / .85);
}
.b4yt-footer__title--plain { color: #fff; border-bottom: 0; padding-bottom: 0; margin-bottom: .75rem; }
.b4yt-footer__col > .b4yt-footer__title--plain ~ .b4yt-footer__title--plain { margin-top: -1rem; }
.b4yt-footer__group { display: flex; flex-direction: column; }
.b4yt-footer__links { list-style: none; margin: 0; padding: 0; }
.b4yt-footer__links li + li { margin-top: .5rem; }
.b4yt-footer__links a { display: inline-flex; align-items: baseline; gap: .625rem; color: #fff; text-decoration: none; font-size: .875rem; }
.b4yt-footer__links a::before { content: "›"; color: var(--b4yt-accent-soft); }
.b4yt-footer__links a:hover { color: var(--b4yt-accent-soft); }
.b4yt-footer__social, .b4yt-footer__stores { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.b4yt-footer__stores { flex-direction: column; gap: .75rem; }
.b4yt-footer__social img { width: 24px; height: 24px; }
.b4yt-footer__stores img { width: 130px; height: auto; }
.b4yt-footer a:focus-visible { outline-color: var(--b4yt-accent-soft); }
.b4yt-footer__bottom {
  max-width: 76rem; margin: 3rem auto 0; padding: 1.5rem 0 2rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  border-top: 1px solid rgb(255 255 255 / .25);
}
.b4yt-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.b4yt-footer__legal a { color: #fff; text-decoration: none; }
.b4yt-footer__legal a:hover { color: var(--b4yt-accent-soft); }

/* Barre fixe mobile ------------------------------------------------------ */
.b4yt-mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--b4yt-surface); box-shadow: 0 -4px 12px rgb(0 0 0 / .08);
  transform: translateY(110%); transition: transform .2s ease-out;
}
.b4yt-mobilebar.is-visible { transform: translateY(0); }
.b4yt-mobilebar__btn { width: 100%; }
@media (min-width: 768px) { .b4yt-mobilebar { display: none; } }
@media (max-width: 767px) { .single-post .b4yt-footer { padding-bottom: 5rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}