/*
 * 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);
}

.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 {
  margin-left: auto;
}

.site-header__mobile-toggle summary {
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

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

/* 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 ici — le menu mobile fermé restait visible en layout et faisait
   déborder la page horizontalement sur petit écran (bug déjà présent avant
   cette session, repéré lors de l'audit responsive du 2026-09-18). */
.site-header__mobile-toggle:not([open]) nav {
  display: none;
}

.site-header__mobile-toggle ul {
  list-style: none;
  padding: var(--space-sm) 0 0;
  margin: 0;
}

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

@media (min-width: 1024px) {
  .site-nav,
  .site-header__actions {
    display: flex;
  }
  .site-header__mobile-toggle {
    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);
}

.hero__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

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

.hero__ctas {
  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;
}

/* .hero__press et .press-grid (plus bas, section Presse) partagent la même
   base flex — seul .hero__press ajoute une marge (collé sous les CTAs du
   hero) et .press-grid centre son contenu (section autonome). */
.hero__press,
.press-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl);
}

.hero__press {
  margin-top: var(--space-xl);
}

/* Hero accueil sur mobile — ciblé via .hero__video (propre à cette page,
   aucune nouvelle classe) : pilules de filtre en rangée qui défile
   horizontalement au lieu de s'empiler sur 2 lignes (plus "app"/tactile),
   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;
  }

  .hero__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-2xs);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent);
    mask-image: linear-gradient(to right, black 90%, transparent);
  }

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

  .hero__press {
    display: none;
  }

  .hero__video + div {
    justify-content: center;
  }
}

/* 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);
}

.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-sm);
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}

.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 ("Des résultats qui parlent") */

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

/* Sans min-width:0, une colonne de grille refuse de rétrécir sous la
   largeur intrinsèque de son texte (ex: "investisseurs") et fait déborder
   la page sur petit écran — repéré lors de l'audit responsive du
   2026-09-18, même correctif que .hero__grid/.hero-tech-grid plus haut. */
.stats-grid > * {
  min-width: 0;
}

.stats-grid__item h2 {
  margin-bottom: var(--space-2xs);
}

.stats-grid__item p {
  margin: 0;
}

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

/* Rendu cliquable (voir docs/missing-components.md, validé par Sébastien le
   2026-09-16) : léger effet de lever au survol pour l'encart "125
   courtiers" (lien vers /page-courtiers/), réutilise --shadow-faq déjà
   validé. Scopé aux .stats-grid__item qui sont des liens (<a>), pas aux
   cards non cliquables du même bloc. */
a.stats-grid__item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* 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);
}

@media (min-width: 1024px) {
  .feature-columns {
    grid-template-columns: repeat(3, 1fr);
  }
  /* .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). Partagé
   entre le hero (.hero__press) et la section Presse autonome (.press-grid). */
.hero__press img,
.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--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));
  }
}

/* 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/) — 1 colonne en dessous de
   1024px, 3 colonnes à partir de 1024px, confirmé par Sébastien. Layout
   seul (aucune valeur de design), voir .card-blog 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: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 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 +/- */

details.card-faq > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

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';
}

/* 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;
  }
}