/* assets/legal.css — design partagé des pages légales (CGU, confidentialité,
   mentions légales, réglementation ACPR). Un seul fichier plutôt qu'une
   copie du <style> dans chacune des 4 pages (même raisonnement que
   assets/gtranslate-config.js en son temps) : évite que ces pages ne
   finissent par diverger, et centralise la responsivité demandée.

   "Pages uniques par menu" (demandé) : chaque page garde le MÊME dégradé
   marque (cohérence visuelle du site) mais affiche sa propre icône + son
   propre kicker dans le hero (cf. --legal-icon / .legal-hero-kicker posés
   par page), pour ne plus se ressembler au pixel près malgré le gabarit
   commun. */
* { box-sizing:border-box; margin:0; padding:0; }
:root{
  --font-head: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;
  --default-font: var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}
/* Pied de page collé au bas du viewport même quand le contenu est court
   (demandé, "il y a encore de la place vide après le footer" — signalé sur
   les pages au contenu le plus court, ex. réglementation ACPR : le footer
   suivait directement le contenu principal, laissant un vide visible entre
   lui et le bas réel de l'écran). Patron "sticky footer" classique :
   body en colonne flex sur toute la hauteur du viewport, le footer récupère
   toute la marge disponible au-dessus de lui (margin-top:auto) au lieu de
   la laisser en dessous. */
body { font-family:var(--default-font); font-weight:400; background:#f8fafc; color:#334155; min-height:100vh; display:flex; flex-direction:column; }
.legal-footer { margin-top:auto; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); font-weight:600; }
strong,b{font-weight:600;}
.text-mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }

.topbar { background:#fff; border-bottom:1px solid #f1f5f9; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30; }
.brand { display:flex; align-items:center; gap:8px; font-weight:600; font-size:18px; color:#0f172a; text-decoration:none; }
.brand .icon { width:32px; height:32px; background:#1E3A66; border-radius:9px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; }
.brand b { color:#1E3A66; font-weight:600; }
.back { font-size:13px; font-weight:600; color:#64748b; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.back:hover { color:#1E3A66; }
.topbar-right { display:flex; align-items:center; gap:14px; }

/* ── Hero : identité unique par page (icône + kicker), dégradé marque
   commun à toutes (cohérence du site) ── */
.legal-hero { background:linear-gradient(135deg,#1E3A66,#16A34A); padding:36px 20px 64px; text-align:center; color:#fff; }
.legal-hero-icon {
  width:54px; height:54px; border-radius:16px; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.legal-hero-icon svg{width:26px;height:26px;}
.legal-hero-kicker { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; opacity:.8; margin-bottom:6px; }
.legal-hero h1 { font-size:22px; margin-bottom:8px; }
.legal-hero p { font-size:13px; opacity:.9; max-width:540px; margin:0 auto; line-height:1.6; }

/* width:100%+min-width:0 indispensables : body est display:flex (colonne)
   en permanence (cf. règle body plus haut, pour le footer collé en bas),
   et .wrap est donc lui-même un ITEM flex — un item flex garde par défaut
   min-width:auto (jamais 0), ce qui l'empêche de rétrécir sous la largeur
   INTRINSÈQUE cumulée de ses propres enfants (nav + main). C'est le même
   bug, un niveau au-dessus, que celui déjà corrigé sur .legal-tabs
   ci-dessous : le corriger seulement sur .legal-tabs ne suffisait pas tant
   que .wrap lui-même pouvait encore s'élargir au-delà du viewport pour
   accueillir ses enfants avant que ceux-ci n'aient la moindre chance de
   rétrécir ou de défiler. */
.wrap { max-width:1020px; width:100%; min-width:0; margin:-40px auto 0; padding:0 20px 40px; position:relative; z-index:2; display:flex; gap:24px; align-items:flex-start; box-sizing:border-box; }

/* Nav desktop : sidebar sticky */
nav.legal-nav { flex:0 0 224px; background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:12px; position:sticky; top:78px; }
nav.legal-nav a { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:10px; font-size:12.5px; font-weight:600; color:#64748b; text-decoration:none; margin-bottom:2px; }
nav.legal-nav a svg{flex-shrink:0;width:15px;height:15px;}
nav.legal-nav a.active { background:#1E3A66; color:#fff; }
nav.legal-nav a:not(.active):hover { background:#f1f5f9; color:#1E3A66; }
.status { margin-top:14px; padding:12px; background:#ecfdf5; border:1px solid #d1fae5; border-radius:14px; font-size:10px; color:#065f46; line-height:1.5; }
.status strong { display:block; margin-bottom:2px; }

/* Nav mobile : barre d'onglets défilable horizontalement (remplace la
   liste de liens empilée verticalement, demandé — bien plus compact et
   confortable au pouce qu'un long empilement vertical). Masquée par
   défaut, activée uniquement sous le seuil ci-dessous. */
.legal-tabs { display:none; }

main { flex:1; background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:32px; min-width:0; }
main h2 { font-size:14px; font-weight:600; color:#0f172a; margin:20px 0 8px; }
main h2:first-child{ margin-top:0; }
main p { font-size:13px; line-height:1.75; color:#475569; margin-bottom:4px; }
main p.italic { font-style:italic; }

.legal-footer { text-align:center; font-size:10px; color:#0f172a; padding:18px 0 24px; }

@media (max-width:900px){
  .wrap { flex-direction:column; margin-top:-28px; gap:14px; }
  nav.legal-nav { display:none; }
  /* min-width:0 indispensable ici : .wrap reste display:flex même en
     colonne sur mobile, et un enfant flex garde par défaut min-width:auto
     (jamais 0) — sans cette ligne, la largeur INTRINSÈQUE de la rangée
     d'onglets (tous les onglets mis bout à bout, AVANT tout défilement)
     forçait .wrap tout entier à s'élargir au-delà du viewport pour
     l'accueillir, entraînant toute la page (texte des paragraphes inclus)
     en débordement horizontal au lieu de ne faire défiler QUE cette
     rangée — cf. "main" juste en dessous, qui a déjà ce même correctif
     depuis toujours, jamais appliqué ici. */
  .legal-tabs {
    display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    width:100%; min-width:0; padding:4px 2px 4px; scrollbar-width:none; -ms-overflow-style:none;
  }
  .legal-tabs::-webkit-scrollbar{ display:none; }
  .legal-tabs a {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
    padding:9px 14px; border-radius:999px; background:#fff; border:1px solid #e2e8f0;
    font-size:12px; font-weight:600; color:#64748b; text-decoration:none; white-space:nowrap;
  }
  .legal-tabs a svg{ width:14px; height:14px; flex-shrink:0; }
  .legal-tabs a.active { background:#1E3A66; border-color:#1E3A66; color:#fff; }
  .status { width:100%; }
  main { padding:22px 18px; border-radius:14px; }
  .legal-hero { padding:30px 18px 52px; }
  .legal-hero h1 { font-size:19px; }
}
@media (max-width:480px){
  .legal-hero-icon{ width:46px; height:46px; border-radius:14px; }
  .legal-hero-icon svg{ width:22px; height:22px; }
  .legal-hero h1{ font-size:17px; }
  .legal-hero p{ font-size:12.5px; }
  main{ padding:18px 14px; }
}