/*
 * Mise en page structurelle — grilles/flex de positionnement propres à
 * chaque page/composant de layout (header, footer, hero...). Ne définit
 * AUCUNE valeur de design (couleur, radius, ombre) : uniquement des
 * dimensions/espacements, toujours via var(--space-*) de tokens.css.
 * tokens.css et base.css restent la seule source de vérité pour la DA.
 */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
}

.site-header__logo img {
  display: block;
  height: 47px;
  width: auto;
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-lg);
}

/* Item de nav (lien plein ou déclencheur de sous-menu) — fond gris au survol */
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  font: inherit;
  font-size: 14px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.site-nav__link:hover {
  background: var(--color-background-alt);
}

.site-nav__chevron {
  transition: transform 0.15s ease;
}

.site-nav__dropdown:hover .site-nav__chevron,
.site-nav__dropdown:focus-within .site-nav__chevron {
  transform: rotate(180deg);
}

.site-nav__dropdown {
  position: relative;
}

/* Sous-menu : apparaît au survol (ou au focus clavier), pas au clic */
.site-nav__dropdown ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.site-nav__dropdown:hover ul,
.site-nav__dropdown:focus-within ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__dropdown ul a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: inherit;
  text-decoration: none;
}

.site-nav__dropdown ul a:hover {
  background: var(--color-background-alt);
}

.site-nav__dropdown li + li {
  margin-top: var(--space-2xs);
}

.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-md);
}

/* .site-header__mobile-toggle — panneau plein écran (pas un simple
   dropdown inline) : un ancien essai en <details> ouvert dans le flux
   normal du header (lui-même sticky) débordait horizontalement dès que le
   contenu du menu dépassait la largeur restante à côté du logo — le menu
   se retrouvait coupé sur le bord droit de l'écran. Un panneau fixed
   pleine largeur/hauteur ne dépend plus de la largeur du logo à côté de
   lui : plus de conflit possible. z-index élevé pour rester cliquable
   au-dessus du panneau une fois ouvert (fermeture en re-cliquant dessus). */
.site-header__mobile-toggle {
  position: relative;
  z-index: 110;
}

/* .site-header__mobile-right — regroupe le CTA "Vous êtes pro ?" (mobile) et
   le bouton hamburger, avec leur propre petit gap indépendant du gap
   logo↔bouton de .site-header__inner (demande explicite d'Elena,
   2026-10-08). C'est ce conteneur qui porte margin-left:auto (reprend le
   rôle que tenait .site-header__mobile-toggle seul) : à l'intérieur, le
   gap du groupe n'est plus parasité par l'absorption d'espace de
   l'auto-margin. */
.site-header__mobile-right {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: auto;
}

/* Zone cliquable ~44px (icône 20px + marge négative en bleed, même
   technique que .card-faq > summary). */
.site-header__mobile-toggle summary {
  position: relative;
  /* Doit dépasser le z-index de <nav> (100) : sans z-index propre ici, un
     enfant positionné plus tard dans le DOM (nav) passe devant même si le
     parent .site-header__mobile-toggle a lui-même un z-index élevé — le
     z-index du parent ne règle que l'ordre entre .mobile-toggle et le
     reste de la page, pas l'ordre entre ses propres enfants. Sans ça, le
     panneau ouvert recouvre le bouton et on ne peut plus recliquer pour
     fermer. */
  z-index: 101;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px 0;
}

.site-header__mobile-toggle summary::-webkit-details-marker {
  display: none;
}

/* Icône hamburger (3 barres) qui se transforme en croix quand ouvert —
   seul signal qu'il faut au panneau plein écran pour se fermer (pas de
   texte "Fermer" séparé). */
.site-header__mobile-icon {
  position: relative;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
}

.site-header__mobile-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease;
}

.site-header__mobile-icon span:nth-child(1) {
  top: 0;
}

.site-header__mobile-icon span:nth-child(2) {
  top: 6px;
}

.site-header__mobile-icon span:nth-child(3) {
  top: 12px;
}

.site-header__mobile-toggle[open] .site-header__mobile-icon span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.site-header__mobile-toggle[open] .site-header__mobile-icon span:nth-child(2) {
  opacity: 0;
}

.site-header__mobile-toggle[open] .site-header__mobile-icon span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* Filet de sécurité : le comportement natif de <details> (masquer le
   contenu autre que <summary> quand fermé) ne s'applique pas de façon
   fiable partout — sans cette règle, le panneau resterait présent en mise
   en page même fermé (bug déjà identifié et corrigé, audit responsive du
   2026-09-18). Sert aussi de repli sans JS : le panneau apparaît/disparaît
   instantanément, juste sans transition (voir @media (scripting: enabled)
   dans base.css). */
.site-header__mobile-toggle:not([open]) nav {
  display: none;
}

.site-header__mobile-toggle nav {
  position: fixed;
  inset: 0;
  /* Hauteur explicite plutôt que de dépendre seulement de `inset:0`
     (demande explicite d'Elena, 2026-10-08 : "vraiment adapter le menu à
     l'interface mobile") : sur mobile, la barre d'adresse qui se
     rétracte/réapparaît fait varier la hauteur du viewport "layout" utilisé
     par défaut — 100dvh (hauteur de viewport dynamique) suit la zone
     réellement visible à l'instant présent, 100vh en repli pour les
     navigateurs qui ne la supportent pas encore. */
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Empêche le "rebond" iOS (scroll élastique au-delà du haut/bas du menu)
     et la propagation du scroll à la page derrière une fois arrivé en bout
     de liste — demande explicite d'Elena : "une fois le menu déroulé, il
     ne faut pas pouvoir aller plus bas". */
  overscroll-behavior-y: contain;
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
}

.site-header__mobile-nav-logo {
  margin-bottom: var(--space-xl);
}

/* Mobile paysage (ou tout viewport bas, type iPhone SE en paysage ~375x667
   devenant ~667x375) : le padding-top de 88px + la marge du logo
   mangeaient à eux seuls plus de la moitié d'un viewport de 375px de haut,
   ne laissant que 2-3 liens visibles avant de devoir scroller — resserré
   le 2026-10-08, demande explicite d'Elena ("améliore le responsive du
   menu mobile"). Placé après les règles de base ci-dessus : même
   spécificité, doit venir plus tard dans la cascade pour les surcharger. */
@media (max-height: 500px) {
  .site-header__mobile-toggle nav {
    padding-top: var(--space-lg);
  }

  .site-header__mobile-nav-logo {
    margin-bottom: var(--space-sm);
  }
}

/* Libellés de groupe "Services"/"Ressources" (ajoutés le 2026-10-08,
   demande explicite d'Elena) : la liste mobile aplatissait les 15 liens
   (dont les 4 sous-items Services + les 4 sous-items Ressources, groupés en
   dropdowns sur desktop) en un seul bloc sans hiérarchie — ces libellés
   reprennent le regroupement du desktop pour rendre la liste scannable. */
.site-header__mobile-toggle-group {
  margin-top: var(--space-md);
  padding: var(--space-xs) 0 var(--space-2xs);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}

.site-header__mobile-toggle ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* :not(.btn) — sans l'exclusion, ces règles (display:block, padding
   recalculé) gagnent sur .btn par spécificité et cassent son propre
   centrage flex interne (justify-content:center) : le texte des boutons
   "Démarrer"/"Vous êtes un pro ?" se retrouvait collé en haut à gauche de
   la pilule au lieu d'être centré. */
.site-header__mobile-toggle li a:not(.btn) {
  display: block;
  padding: var(--space-sm) 0;
  font-size: 18px;
}

.site-header__mobile-toggle li:has(.btn) {
  margin-top: var(--space-md);
}

.site-header__mobile-toggle li .btn {
  width: 100%;
  /* Même taille que "Se connecter" (18px, voir li a:not(.btn) ci-dessus) —
     .btn hérite sinon de --font-size-body (16px), un léger décalage entre
     les 3 actions de ce groupe. Scopé au menu mobile, ne touche pas .btn
     ailleurs sur le site. */
  font-size: 18px;
}

/* "Se connecter" est coincé entre deux boutons pleine largeur ("Vous êtes
   un pro ?" / "Démarrer") — signalé par Elena 2026-10-08 ("problèmes sur
   le bouton Se connecter") : sans ce correctif, son <li> n'a pas la même
   margin-top que ses voisins (:has(.btn) ne s'applique qu'aux deux
   boutons) et il garde le filet de séparation `li a:not(.btn)` hérité de
   la liste de nav classique — rendu incohérent au milieu d'un groupe de
   boutons. Centré et sans filet pour s'intégrer au groupe, même espacement
   que les boutons autour. */
.site-header__mobile-toggle li:has(.site-header__mobile-toggle-account-link) {
  margin-top: var(--space-md);
}

.site-header__mobile-toggle li a.site-header__mobile-toggle-account-link {
  text-align: center;
  border-bottom: none;
}

/* Bloque le scroll de la page derrière le panneau plein écran tant qu'il
   est ouvert (posé par mobile-menu.js). */
body.has-mobile-nav-open {
  overflow: hidden;
}

/* Bascule nav mobile -> desktop à 1280px, pas 1024px comme le reste du
   site (seule exception) : le contenu du header (logo + nav à 5 items,
   dont 2 sous-menus + 3 CTA "Vous êtes un pro ?"/"Se connecter"/"Démarrer")
   passe à la ligne dès ~1230px — en bascule desktop plus tôt, "Se
   connecter" et les CTA wrappent sur 2 lignes (mesuré). */
/* .site-header__mobile-pro-link — raccourci "Vous êtes pro ?" visible
   uniquement sur mobile, groupé avec le hamburger dans
   .site-header__mobile-right (demande explicite d'Elena, 2026-10-08).
   Compact (padding/texte réduits) : à 360px de large, le logo (138px) + le
   hamburger (44px) + les gaps du header ne laissent qu'environ 100px pour
   ce lien — la taille .btn normale (16px, padding compact standard)
   débordait. Masqué dès 1280px : le même lien existe déjà dans
   .site-header__actions. */
.site-header__mobile-pro-link {
  padding: var(--space-xs) var(--space-sm);
  font-size: 15px;
  white-space: nowrap;
}

/* Sous 360px (hors du budget documenté ci-dessus), logo + lien + hamburger
   ne tiennent plus : le hamburger est poussé hors du viewport et devient
   inatteignable (overflow-x:hidden sur <body> le masque au lieu de créer
   un scroll). On masque ce raccourci secondaire pour laisser la place au
   hamburger, seul élément indispensable ici — le lien "Vous êtes pro ?"
   reste disponible dans le panneau mobile une fois le menu ouvert. */
@media (max-width: 359px) {
  .site-header__mobile-pro-link {
    display: none;
  }
}

@media (min-width: 1280px) {
  .site-nav,
  .site-header__actions {
    display: flex;
  }
  /* .site-header__mobile-right masqué explicitement (pas seulement ses
     enfants) — demande explicite d'Elena, 2026-10-08, header desktop
     "trop étroit/décalé" : même à largeur nulle (ses deux enfants cachés),
     ce conteneur restait un item flex à part entière de
     .site-header__inner, donc toujours pris en compte par son `gap` et son
     `justify-content: space-between` — display:none le retire entièrement
     du calcul, .site-header__inner retrouve exactement les 3 items
     (logo, nav, actions) d'avant l'ajout du bouton mobile. */
  .site-header__mobile-right {
    display: none;
  }
}

/* Hero */

.hero {
  padding: var(--space-2xl) var(--space-md);
  max-width: 1400px;
  margin: 0 auto;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* Même correctif de débordement mobile que .split-section > * : sans
   min-width:0, une colonne de grille refuse de rétrécir sous la taille
   intrinsèque de son contenu (texte, sous-grille .hero-tech-grid...).
   Limité à < 1024px (breakpoint desktop de .hero__grid ci-dessous) pour ne
   surtout pas changer le rendu desktop, qui n'a jamais eu ce problème. */
@media (max-width: 1023px) {
  .hero__grid > * {
    min-width: 0;
  }
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.hero h1 {
  margin-bottom: var(--space-lg);
}

/* Grille à 4 colonnes égales (revu 2026-10-08, passe de design globale hero +
   carrousel presse, demande explicite d'Elena) : les 4 filtres forment un
   bloc net et aligné ("segmented control"), plutôt que des pilules à largeur
   libre qui créaient un bord droit en dents de scie. 2 colonnes en mobile
   (voir media query plus bas), comportement déjà en place. */
.hero__filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  /* Largeur réduite (demande explicite d'Elena, 2026-10-08) : le bloc des 4
     filtres ne s'étire plus sur toute la largeur de la colonne du hero —
     colonnes toujours égales entre elles (pas de bord en dents de scie),
     juste un bloc un peu plus étroit dans son ensemble. */
  max-width: 90%;
}

/* Taille réduite (demande explicite d'Elena, 2026-10-08 : "aligné sur le
   titre") — les pilules étaient aussi hautes/imposantes que le bouton
   principal juste en dessous, ce qui leur donnait un poids visuel
   disproportionné face au H1. Padding et taille de texte réduits, scopé à
   cette seule instance (ne touche pas .btn-secondary, réutilisé ailleurs). */
.hero__filters .btn-secondary {
  padding: var(--space-xs) var(--space-md);
  font-size: 14px;
}

.hero__ctas,
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* Les deux CTA du hero ont besoin d'un peu plus d'air que les paires
   bouton+lien génériques (.btn-row) ailleurs sur le site — gap dédié plutôt
   que d'élargir la règle partagée (remplace l'ancien margin-left posé
   directement sur .hero__brokers-cta, asymétrique une fois centré en
   mobile). */
.hero__ctas {
  gap: var(--space-xl);
  margin-top: var(--space-md);
}

/* .hero__brokers-cta — CTA secondaire "Courtiers intégrés" (hero), scopé à
   cette seule instance. Après deux essais en bouton/pilule (jugés "pas
   concordants" par Elena, 2026-10-08) : retour à un lien plat, même
   traitement que .btn-ghost déjà utilisé comme CTA secondaire ailleurs sur
   le site (404, conformité, réassurance) — aucune forme (pilule/rectangle)
   à faire cohabiter avec les badges, les filtres et le bouton primaire, qui
   utilisent déjà 3 géométries différentes dans cette même colonne. Seul
   ajout : la flèche qui glisse au survol, même micro-interaction que les
   autres CTA du site. */
.hero__brokers-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--padding-btn-compact) 0;
  color: var(--color-heading);
  font-weight: 400;
  font-size: var(--font-size-body);
  transition: color 0.15s ease;
}

.hero__brokers-cta:hover {
  color: var(--color-accent);
}

.hero__brokers-cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.hero__brokers-cta:hover .hero__brokers-cta-arrow {
  transform: translateX(3px);
}

/* .hero__rating — repositionne .rating-badge (classe partagée, voir
   /page-conformite/, non modifiée) sous le CTA du hero plutôt que sous la
   vidéo (demande explicite d'Elena, 2026-10-08 : sert de réassurance au
   moment du clic). display:inline-flex hérité de .rating-badge se centre
   tout seul en mobile via le text-align:center déjà posé sur la colonne
   (.hero__grid:has(.hero__video) > div:first-child). */
.hero__rating {
  margin-top: var(--space-md);
}

/* Wrapper vidéo responsive 16:9 (iframe pleine taille en position absolue).
   .hero__video (hero) et .video-embed (plus bas, contenu éditorial
   d'article) partagent cette même mécanique — seul .video-embed ajoute une
   marge verticale, utile en plein corps de texte. */
.hero__video,
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.hero__video iframe,
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.press-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl);
}

/* Hero accueil sur mobile — ciblé via .hero__video (propre à cette page,
   aucune nouvelle classe) : colonnes du hero resserrées, badge de notation
   recentré sous la vidéo plutôt que collé à droite, vidéo avec une ombre
   plus posée. Repéré lors de la repasse responsive du 2026-09-18, demande
   explicite d'Elena. */
@media (max-width: 767px) {
  .hero__grid:has(.hero__video) {
    gap: var(--space-lg);
  }

  .hero__grid:has(.hero__video) > div:first-child {
    text-align: center;
  }

  .hero__grid:has(.hero__video) .hero__badges,
  .hero__grid:has(.hero__video) .hero__ctas {
    justify-content: center;
  }

  /* Pilules de filtre en grille 2x2 plutôt qu'en rangée scrollable — plus
     lisible/ergonomique au pouce, demande explicite d'Elena le 2026-10-06
     (remplace le scroll horizontal précédent). Passé de flex à grid le
     2026-10-08 (même mécanique 2 colonnes égales que le desktop en 4).
     max-width:90% annulé en mobile (même jour, demande explicite d'Elena,
     "tout soit bien centré") : ce bloc était le seul élément du hero à ne
     pas partager les mêmes marges que le H1/bouton/vidéo — sans
     margin:auto, il restait collé à gauche avec un vide asymétrique à
     droite. Désactivé plutôt que centré via margin:auto pour retrouver les
     mêmes bords que le reste de la colonne (la réduction de largeur ne
     visait que la rangée à 4 colonnes du desktop). */
  .hero__filters {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }

  .hero__video {
    box-shadow: var(--shadow-card-marketing);
  }

  /* Zone tactile ≥44px sans agrandir visuellement la pastille (hit-area
     invisible via pseudo-élément décalé, technique standard) — seulement
     nécessaire en mobile, le padding visuel desktop (6px/12px) suffit déjà
     en pointeur souris. */
  .hero__rating {
    position: relative;
  }

  .hero__rating::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
}

/* Pastilles "Compte-Titres/PEA/Dividende/Compte étranger" du hero bourse —
   ciblées via .tag-cycle (propre à cette rangée, aucune nouvelle classe) :
   sur mobile, chaque carte prend toute la largeur (contenu plus riche
   qu'un simple libellé) et s'empile verticalement, ce qui donnait
   l'impression d'un écart plus grand qu'entre les pastilles de la page
   trading malgré le même token d'espacement. Resserré pour un rendu aussi
   compact que sur /declaration-impots-trading/. Repéré lors de la repasse
   responsive du 2026-09-18, demande explicite d'Elena. */
@media (max-width: 767px) {
  div:has(> .card .tag-cycle) {
    gap: var(--space-xs);
  }
}

/* Grille de cards logo (hero /declaration-impot-crypto/ : plateformes
   compatibles eToro/Revolut/Coinbase/... — chaque logo dans une .card
   existante, ici seulement la grille qui les positionne). Générique,
   réutilisable par les pages de service soeurs (bourse/crowdfunding/trading). */
.logo-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Ombre plus marquée + bordure d'accent + hover "lift" (ronde 6, même
   traitement que les encarts hero /declaration-impots-bourse/ et "C'est
   quoi DeclarAid ?"), réutilise --shadow-card-marketing/--shadow-faq/
   --color-accent déjà validés. */
.logo-card-grid .card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--shadow-card-marketing);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-card-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-faq);
}

.logo-card-grid .card img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hero "tech" (/declaration-impots-bourse/) — proposition de design
   différente demandée par Elena (2026-09-17) pour remplacer les 4 cards
   claires du hero par un rendu plus tech/fluide (fond repassé en blanc le
   2026-09-17). Réutilise uniquement des tokens déjà validés :
   --color-accent (bordure d'accent, déjà utilisé sur .table-scroll),
   --shadow-card / --shadow-faq (hover déjà établi sur d'autres cards du
   site). Scopé à cette grille, ne touche pas .logo-card-grid utilisé sur
   les autres pages. */
.hero-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 1023px) {
  .hero-tech-grid > * {
    min-width: 0;
  }
}

.hero-tech-grid__item {
  background: var(--color-background);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-marketing);
  padding: var(--space-lg);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-tech-grid__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-faq);
}

.hero-tech-grid__item .icon-badge {
  margin: 0 auto var(--space-sm);
}

.hero-tech-grid__item .heading-style-h4 {
  margin: 0 0 var(--space-2xs);
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* Footer */

.site-footer {
  background: var(--color-background);
  padding: var(--space-xl) var(--space-md) var(--space-md);
}

/* Sans display:inline-block, la zone cliquable du logo (un <a> en display
   inline par défaut) colle à la hauteur du texte environnant au lieu de la
   hauteur réelle du logo — zone cliquable bien plus petite que le logo
   visible. Même correctif que .site-header__logo img. */
.site-footer__logo {
  display: inline-block;
}

.site-footer__logo img {
  display: block;
  height: 40px;
  width: auto;
}

.site-footer__top {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.site-footer__social {
  display: flex;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}

/* L'icône SVG (20px) reste petite, mais la zone cliquable de son lien est
   élargie à ~40px (padding négatif en bleed) : sans ça, le lien en display
   inline colle à la taille exacte du SVG — bien en dessous d'une cible
   tactile confortable. */
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -10px;
}

.site-footer__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-sm);
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__col li + li {
  margin-top: var(--space-sm);
}

.site-footer__disclaimer {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.site-footer__copyright {
  max-width: 1400px;
  margin: var(--space-md) auto 0;
  text-align: right;
  font-size: 13px;
  color: var(--color-text-tertiary);
}

@media (min-width: 1024px) {
  .site-footer__top {
    grid-template-columns: 1.4fr repeat(4, 1fr);
  }
}

/* Sections génériques de contenu (stats, features...) */

.content-section {
  /* Le padding vertical vient de .section (--space-3xl) — ici seulement
     l'horizontal, pour ne pas doubler l'écart entre sections. */
  padding: 0 var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.content-section__eyebrow {
  color: var(--color-text-tertiary);
  font-size: 14px;
  margin: 0 0 var(--space-xs);
}

.content-section__lead {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
}

/* ============================================================
   STATS — passée en bande sombre pleine largeur le 2026-10-08 (demande
   explicite d'Elena) : remplace la version claire à filets/segments par un
   fond --color-primary (même couleur que le bouton "Démarrer") qui sert
   lui-même de séparation avec le carrousel presse au-dessus (dont la
   bordure basse est retirée, voir .press-section) — plus besoin de filets
   ni de segments décoratifs sur les colonnes. Aucune ombre, aucun dégradé,
   aucun border-radius. Alignée au pixel sur le conteneur du hero, grille
   4 colonnes inchangée.
   ============================================================ */

.stats-section {
  /* Anthracite adouci (demande explicite d'Elena, 2026-10-08, valeur
     littérale) plutôt que --color-primary (#171717) jugé trop sombre/
     imposant visuellement. Contraste vérifié AA : blanc ~18.6:1,
     rgba(255,255,255,.6) ~7.9:1 sur ce fond. */
  background: #1f2125;
  /* 48px desktop, dans la fourchette 40-48 demandée (réduit depuis ~76px,
     jugé trop imposant) — --space-2xl existant, pas de nouvelle valeur. */
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

@media (max-width: 767px) {
  .stats-section {
    /* 36px mobile, dans la fourchette 32-40 demandée — --space-xl
       existant. */
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}

/* Duplique volontairement les 3 valeurs de .hero (max-width, marge,
   padding latéral) plutôt que de les partager, pour ne pas créer de
   dépendance vers .hero (qu'il ne fallait pas modifier) — garantit un
   alignement au pixel du bord gauche sur le H1 et du bord droit sur la
   vidéo, vérifié à 1280px et 1440px. Le fond sombre est pleine largeur sur
   .stats-section ; seul ce conteneur interne est borné. */
.stats-section__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* align-items:start : chaque colonne démarre à la même hauteur (filet +
     gap identiques), donc les chiffres s'alignent entre eux quel que soit
     ce qui suit (libellé 1 ou 2 lignes, lien ou non) — pas de centrage
     tributaire de la hauteur totale du contenu. */
  align-items: start;
  row-gap: var(--space-lg);
  column-gap: var(--space-xl);
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* .stats-grid__col n'a plus besoin de règle propre : le filet et le segment
   décoratifs sont retirés (2026-10-08, demande explicite d'Elena) — sur le
   fond sombre plein, la bande elle-même fait office de séparation, aucun
   repère de colonne n'est plus nécessaire. */

.stats-grid__headline {
  margin: var(--space-xs) 0 0;
  max-width: 32ch;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  /* Blanc (demande explicite d'Elena) : --color-text-on-dark, déjà utilisé
     pour les titres de .section--dark ailleurs sur le site. */
  color: var(--color-text-on-dark);
}

.stats-grid__stat {
  margin: 0;
}

.stats-grid__value {
  display: block;
  margin: 0;
  font-family: var(--font-family-heading);
  /* Fluide, réduit d'environ 12% le 2026-10-08 (demande explicite d'Elena,
     bande jugée trop imposante) : 32-36px en mobile jusqu'à 48px en
     desktop, sans saut brusque entre les breakpoints. Graisse et
     letter-spacing inchangés. */
  font-size: clamp(32px, 25px + 2.25vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* Blanc (demande explicite d'Elena, fond sombre). */
  color: var(--color-text-on-dark);
}

.stats-grid__label {
  /* Espace resserré (--space-2xs au lieu de --space-xs) le 2026-10-08 pour
     un bloc plus compact, demande explicite d'Elena. */
  margin: var(--space-2xs) 0 0;
  max-width: 28ch;
  font-size: 15px;
  line-height: 1.5;
  /* Gris clair ~60% d'opacité sur blanc (demande explicite d'Elena, valeur
     littérale donnée) — contraste vérifié AA sur #1f2125 (fond actuel). */
  color: rgba(255, 255, 255, 0.6);
}

/* "Voir la liste" réutilise .press-row__cta/.press-row__cta-arrow (même
   style que "Voir les articles" du carrousel) pour la structure/l'animation
   de flèche, mais la couleur est surchargée ici en blanc (fond sombre) :
   .press-row__cta reste gris-sur-clair pour le carrousel, inchangé — cette
   règle est plus spécifique et chargée après dans la cascade (layout.css
   après base.css), donc ne casse pas l'usage partagé. */
.stats-grid__cta-link {
  /* display:flex (plutôt que l'inline-flex hérité de .press-row__cta) pour
     que le lien passe sur sa propre ligne sous le libellé, au lieu de
     s'enchaîner dans le même flux de texte. */
  display: flex;
  position: relative;
  margin-top: var(--space-xs);
  color: var(--color-text-on-dark);
}

.stats-grid__cta-link:hover {
  color: var(--color-text-on-dark);
  text-decoration: underline;
}

/* Zone cliquable ≥44px de haut sans agrandir visuellement le lien (même
   technique que .hero__rating::after) — l'apparence ne change pas. */
.stats-grid__cta-link::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}

/* Colonnes à 3 (features "C'est quoi DeclarAid ?") */

.feature-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  text-align: center;
  margin: 0 auto var(--space-xl);
  max-width: 1000px;
}

.feature-columns__item ul {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  text-align: left;
  display: inline-block;
}

.feature-columns__item li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.feature-columns__item li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-accent);
}

/* Dès 640px (tablette), pas 1024px comme le reste du site (seule exception,
   même raisonnement que .credibility-bar__stats/.feature-columns pro) : 3
   cards de texte court tiennent très bien côte à côte sur un iPad portrait
   (768px), pas besoin d'attendre le desktop. */
@media (min-width: 640px) {
  .feature-columns {
    grid-template-columns: repeat(3, 1fr);
  }

  /* .feature-columns--4 — 2 colonnes sur ce palier tablette plutôt que les 3
     héritées de .feature-columns ci-dessus : avec 4 items, 3 colonnes laisse
     le 4e isolé seul sur sa ligne (grand vide à droite, repéré en QA mobile
     sur "Pour qui ?", 768px). 2×2 évite l'orphelin jusqu'aux 4 colonnes du
     desktop ci-dessous. */
  .feature-columns--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  /* .feature-columns--4 — variante 4 colonnes ("Formulaires complets",
     /page-conformite/), items en .card, validé Sébastien */
  .feature-columns--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* .section-divider — séparateur horizontal entre deux sections (hero /
   "Courtiers étrangers", /page-conformite/), validé Sébastien */
.section-divider {
  max-width: 1200px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid var(--color-border);
}

/* Étapes (4 colonnes, "Comment ça marche ?" / dossier fiscal) */

/* Une seule colonne à toutes les tailles d'écran, y compris desktop —
   confirmé sur l'original (grid-template-columns à une seule valeur même
   à 1440px de large), pas de bascule en 4 colonnes. */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

/* Panneau de fond + barre de continuité verticale traversant les icônes
   (voir docs/missing-components.md, validé par Elena le 2026-09-17,
   ajusté le 2026-09-17 en vraie timeline icônes-à-gauche). Réutilisé aussi
   par .badge-steps (bourse/crypto/trading, mêmes sections "comment ça
   marche"). Fond : même logique que .isolation-panel déjà validé. Ombre +
   padding généreux (2026-09-17, "aère et rends plus moderne") : réutilise
   --shadow-card-marketing déjà validé ailleurs sur le site. */
.steps-grid-panel {
  background: var(--color-background-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-marketing);
  padding: var(--space-3xl) var(--space-2xl);
  max-width: 900px;
  margin: 0 auto;
}

/* .badge-steps — même esthétique que .steps-grid (panneau + barre de
   continuité) pour "L'expérience DeclarAid" (/declaration-impots-bourse/),
   mais avec des .badge-step numérotés (32px) au lieu des .icon-badge
   (64px) : la ligne est donc dimensionnée sur --size-badge-step. */
.badge-steps {
  position: relative;
}

.badge-steps::before {
  content: "";
  position: absolute;
  top: calc(var(--size-badge-step) / 2);
  bottom: calc(var(--size-badge-step) / 2);
  left: calc(var(--size-badge-step) / 2);
  width: 2px;
  background: var(--color-accent);
  transform: translateX(-50%);
}

.badge-steps > div,
.badge-steps > a {
  position: relative;
}

.badge-steps .badge-step {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge-steps > div:hover .badge-step,
.badge-steps > a:hover .badge-step {
  transform: scale(1.08);
  box-shadow: var(--shadow-faq);
}

/* Étape cliquable (ex: "Dossier fiscal complet" -> #dossier-fiscal-bouclier) */
.badge-steps > a {
  color: inherit;
  text-decoration: none;
}

/* Ligne continue passant par le centre de chaque icône (toutes alignées à
   la même position horizontale), plutôt qu'un segment par étape : robuste
   même si la hauteur de chaque étape varie selon la longueur du texte. */
.steps-grid::before {
  content: "";
  position: absolute;
  top: calc(var(--size-icon-badge) / 2);
  bottom: calc(var(--size-icon-badge) / 2);
  left: calc(var(--size-icon-badge) / 2);
  width: 2px;
  background: var(--color-accent);
  transform: translateX(-50%);
}

.steps-grid > div,
.steps-grid > a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.steps-grid .icon-badge {
  flex-shrink: 0;
  margin-bottom: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Dernière étape ("Dossier Fiscal complet") cliquable vers /dossier-fiscal/
   — affordance visuelle au survol pour signaler que c'est cliquable,
   scopée à .steps-grid (home page uniquement). */
.steps-grid > a {
  color: inherit;
  text-decoration: none;
}

.steps-grid > a:hover h3 {
  color: var(--color-accent);
}

.steps-grid__cta {
  color: var(--color-accent);
  font-weight: 600;
  white-space: nowrap;
}

.steps-grid .icon-badge:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-faq);
}

/* Team grid */

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.team-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* .team-grid--pair — variante 2 personnes ("Une expertise qui vous protège",
   pages Bourse/Crypto/Trading/Crowdfunding) : pleine largeur empilée sur
   mobile (au lieu des 2 colonnes serrées par défaut de .team-grid), 2
   colonnes à partir de tablette/desktop. */
.team-grid--pair {
  grid-template-columns: 1fr;
  max-width: 900px;
}

@media (min-width: 768px) {
  .team-grid--pair {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* .team-grid--pair .card — encarts "Une expertise qui vous protège et vous
   simplifie la vie" (Bourse/Crypto/Trading/Crowdfunding/support) : padding
   augmenté (--space-card 24px -> --space-xl 36px, plus d'air entre le bord
   et le texte) + hover "lift" identique à .logo-card-grid/.feature-columns--
   tech (translateY + --shadow-faq, déjà validés), demandé et validé par
   Elena le 2026-09-17. Carte cliquable vers la page de l'expert via un lien
   étiré (.team-grid--pair .card__link, 1er enfant, position:absolute
   inset:0) plutôt que d'envelopper la carte dans un <a> : la carte de
   Dimitri contient un lien texte imbriqué (dimitridelpech.fr) qu'un <a>
   englobant rendrait invalide (anchor-in-anchor) — le lien étiré laisse ce
   lien interne au-dessus (position:relative + z-index) et reste cliquable. */
.team-grid--pair .card {
  position: relative;
  padding: var(--space-xl);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-grid--pair .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-faq);
}

.team-grid--pair .card__link {
  position: absolute;
  inset: 0;
}

.team-grid--pair .card a:not(.card__link) {
  position: relative;
  z-index: 1;
}

/* Presse (logos) */

.press-grid {
  justify-content: center;
}

/* Dimensions par logo posées en attribut width/height sur chaque <img>
   (mesurées sur l'original — pas de ratio uniforme entre logos). */
.press-grid img {
  height: auto;
  display: block;
}

/* Logos livrés avec un fond blanc plein (assets fournis tels quels, non
   retouchables ici) : multiply fait disparaître visuellement ce fond blanc
   sur les sections claires (blanc ou gris très clair), sans toucher les
   logos déjà en PNG transparent. */
.press-grid img {
  mix-blend-mode: multiply;
}

/* Conformité légale (2 colonnes texte / photo) */

.split-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Corrige un débordement horizontal sur mobile/tablette : sans min-width:0,
   une grille dimensionne ses colonnes sur la taille intrinsèque du contenu
   (ex: largeur naturelle d'une <img>), ce qui peut dépasser le viewport
   même en une seule colonne. Bug pré-existant, pas un choix de design.
   Limité à < 1024px (breakpoint desktop de .split-section ci-dessus) pour
   ne surtout pas changer le rendu desktop. */
@media (max-width: 1023px) {
  .split-section > * {
    min-width: 0;
  }
}

.split-section__checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
}

.split-section__checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.split-section__checklist li svg {
  flex-shrink: 0;
  margin-top: 3px;
}

.split-section__photo {
  position: relative;
}

.split-section__photo img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}

/* Card flottante superposée à la photo (ex: "Tous vos justificatifs
   inclus..." sur la photo de /declaration-impot-crypto/), réutilise
   .split-section__checklist à l'intérieur. */
.split-section__photo-badge {
  position: absolute;
  left: calc(-1 * var(--space-lg));
  bottom: var(--space-lg);
  max-width: 260px;
  background: var(--color-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-marketing);
  padding: var(--space-md) var(--space-lg);
  display: none;
}

@media (min-width: 1024px) {
  .split-section__photo-badge {
    display: block;
  }
}

.split-section__seal {
  width: 112px;
  height: auto;
  margin-bottom: var(--space-md);
}

@media (min-width: 1024px) {
  /* Colonne texte plus large que la colonne photo (ronde 5 : la photo
     prenait trop de place par rapport à l'original). */
  .split-section {
    grid-template-columns: 1.3fr 1fr;
  }
  .split-section--reverse {
    direction: rtl;
  }
  .split-section--reverse > * {
    direction: ltr;
  }
  /* .split-section--text-wide — colonne texte encore élargie par rapport à
     la répartition par défaut (1.3fr/1fr), pour les sections où la photo
     doit rester secondaire face au texte (demande explicite Sébastien). */
  .split-section--text-wide {
    grid-template-columns: 1.6fr 1fr;
  }

  /* .split-section--tv — bloc "À la télévision" /media-presse/, vidéo (1er
     enfant) à 58%, texte (2e enfant) à 42%, ratio explicitement demandé ;
     gap propre (48px) plutôt que --space-xl hérité de .split-section. */
  .split-section--tv {
    grid-template-columns: 58% 42%;
    gap: 48px;
  }

  /* .split-section--photo-narrow — pour les sections .split-section--reverse
     où la photo (1er enfant du DOM, donc 1ère colonne) doit être réduite au
     profit du texte (2e colonne), ex: "Comment ça marche ?"
     /declaration-impot-crypto/ (demande explicite d'Elena du 2026-09-17). */
  .split-section--photo-narrow {
    grid-template-columns: 1fr 1.15fr;
  }

  /* .split-section--text-wider — encore un cran au-delà de .split-section--text-wide
     (1.6fr/1fr), pour ne pas changer le ratio des autres pages qui utilisent
     .split-section--text-wide (ex: home page). Scopé à "DeclarAid s'occupe
     de tout, automatiquement" /declaration-impots-trading/ (demande
     explicite d'Elena du 2026-09-17). */
  .split-section--text-wider {
    grid-template-columns: 1fr 2.2fr;
  }
}

/* Panneau clair à icônes (Isolation Bancaire / Souveraineté et
   localisation des données / Chiffrement de Grade Militaire — même
   pattern répété 3x sous la section sombre "Sécurité et Confidentialité").
   Padding mesuré ~50px sur l'original (--space-2xl). */

.isolation-panel {
  background: var(--color-background-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.isolation-panel + .isolation-panel {
  margin-top: var(--space-lg);
}

/* Panneau "Chiffrement de Grade Militaire" : fond gris plus foncé que les
   2 autres panneaux — mesuré/validé ronde 5 (voir --color-background-alt-dark). */
.isolation-panel--reverse {
  background: var(--color-background-alt-dark);
}

.isolation-panel__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Icône ligne simple (pas de cercle plein) utilisée dans ces sous-cards */
.icon-outline {
  color: var(--color-text-tertiary);
  display: inline-block;
  margin-bottom: var(--space-sm);
}

@media (min-width: 1024px) {
  .isolation-panel {
    grid-template-columns: 1fr 2fr;
  }
  .isolation-panel--reverse {
    grid-template-columns: 2fr 1fr;
  }
  .isolation-panel--reverse > :first-child {
    order: 2;
  }
  .isolation-panel__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Personas ("pour toutes les personnes qui investissent") */

.persona-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
}

.persona-card {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: left;
}

/* 4 fonds pastel distincts, mesurés/validés ronde 5 — le 4e réutilise
   --color-success-bg (déjà identique), pas de nouveau token pour celui-ci. */
.persona-card--yellow { background: var(--color-persona-yellow-bg); }
.persona-card--blue { background: var(--color-persona-blue-bg); }
.persona-card--pink { background: var(--color-persona-pink-bg); }
.persona-card--green { background: var(--color-success-bg); }

@media (min-width: 1024px) {
  .persona-grid {
    /* minmax(0, 1fr), pas juste 1fr : un enfant au contenu large et
       non-cassable (ex: badge nowrap des cards pricing, /nos-offres/) sinon
       étire sa colonne au-delà des 3 autres via le min-width:auto implicite
       des pistes 1fr — cassait l'alignement des checklists entre les 4
       offres. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* .persona-grid--pricing — /nos-offres/ et lp-template-fonctionnalites-3 :
     depuis la suppression de l'offre "Essentiel" (validé par Sébastien,
     2026-09-24), ces pages n'affichent plus que 3 cards .card-pricing. La
     grille de base reste figée à 4 colonnes pour la home (4 vraies
     .persona-card) ; ce modificateur, posé uniquement sur le conteneur des
     cards pricing, force 3 colonnes pour qu'elles se centrent au lieu de
     rester calées à gauche d'une 4e piste vide. Voir
     docs/missing-components.md. */
  .persona-grid--pricing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* CTA bandeau centré */

.cta-banner {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

/* Article de blog — sommaire + CTA en colonne latérale collante à côté du
   corps de l'article (desktop), empilés en pleine largeur en dessous de
   1024px. Composant ajouté suite à demande explicite de Sébastien (voir
   docs/missing-components.md) — les cards elles-mêmes (.card-toc) ne
   changent pas, seule la disposition est nouvelle. */
.article-layout {
  display: block;
  align-items: flex-start;
  gap: var(--space-xl);
}

.article-layout__sidebar > .card-toc + .card-toc {
  margin-top: var(--space-lg);
}

@media (min-width: 1024px) {
  .article-layout {
    display: flex;
  }

  /* La colonne latérale est bornée à la hauteur de l'écran : le sommaire
     (1er .card-toc) défile en interne si la liste est trop longue, la
     carte CTA (2e .card-toc) garde sa taille naturelle et reste toujours
     visible en entier — jamais rognée par la limite de hauteur. */
  .article-layout__sidebar {
    flex: 0 0 280px;
    position: sticky;
    top: var(--space-lg);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--space-lg) * 2);
  }

  .article-layout__sidebar > .card-toc:first-child {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .article-layout__sidebar > .card-toc:first-child nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .article-layout__sidebar > .card-toc + .card-toc {
    flex-shrink: 0;
  }

  .article-layout__content {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Grille "Derniers articles" (/articles-blog/) et mentions presse
   (/media-presse/) — 1 colonne en dessous de 640px, 2 colonnes dès la
   tablette (640px), 3 colonnes à partir de 1024px — même config que le
   site pro. Layout seul (aucune valeur de design), voir .card-blog/
   .press-card dans base.css pour le style des cards elles-mêmes. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Gap 24px propre aux deux grilles de /media-presse/ (demande explicite),
   sans changer --space-lg (28px) utilisé par .card-grid ailleurs
   (/articles-blog/, /sebastien-defrance/). */
#articles-presse-grid,
#podcasts-grid {
  gap: 24px;
}

/* Tableau des courtiers (/page-courtiers/) — wrapper de défilement
   horizontal pour ne pas casser la mise en page sur petit écran. Finitions
   "tech/pro" (voir docs/missing-components.md, validé par Sébastien le
   2026-09-16) : ombre + fine bordure d'accent en haut, réutilise
   --radius-lg, --shadow-card et --color-accent déjà validés. */
.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--color-accent);
}

/* Vidéo YouTube intégrée en plein corps d'article (guides longs) — mécanique
   16:9 partagée avec .hero__video, voir plus haut. Dédié au contenu
   éditorial (.prose) plutôt qu'au hero : seul ajout ici, une marge
   verticale. Voir docs/missing-components.md. */
.video-embed {
  margin: var(--space-xl) 0;
}

/* FAQ — accordion natif <details>/<summary> sur .card-faq, marqueur +/- */

/* Étend la zone cliquable au bandeau entier de .card-faq (pas seulement le
   texte/marqueur) : marge négative = padding de la card pour que <summary>
   occupe toute sa boîte, puis padding équivalent pour retrouver visuellement
   le même espacement — <summary> est le seul déclencheur natif du toggle.
   Zone tactile mobile bien plus large, utile sur une FAQ à question longue
   pouvant courir sur 2 lignes. */
details.card-faq > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: calc(-1 * var(--space-md));
  padding: var(--space-md);
  cursor: pointer;
}

details.card-faq > summary::-webkit-details-marker {
  display: none;
}

details.card-faq > summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-text-tertiary);
}

details.card-faq[open] > summary::after {
  content: '\2212';
}

/* .accordion-group — regroupe une liste de .card-faq : espace vertical
   entre items + scope pour faq-accordion.js (un seul <details> ouvert à la
   fois par groupe, pour ne pas finir avec une page interminable si
   plusieurs questions sont ouvertes en parallèle). */
.accordion-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Marge latérale mobile — harmonisée entre tous les conteneurs de page et
   légèrement augmentée par rapport à --space-md (demande explicite mobile),
   sans toucher --space-md lui-même pour ne pas répercuter ce changement sur
   les espacements internes des boutons/cards qui réutilisent ce token. */
@media (max-width: 767px) {
  .hero,
  .container,
  .content-section,
  .split-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Titres proportionnés au mobile — --font-size-h1/h2 (50px/35px) sont
     pensés pour desktop et laissaient trop peu de marge sur petit écran,
     repéré lors de l'audit responsive du 2026-09-18. */
  .heading-style-h1 {
    font-size: 34px;
  }

  .heading-style-h2 {
    font-size: 26px;
  }
}