/* =====================================================================
   Expat LLC — Design system partagé (2026-08-23)
   Fond clair chaud · navy en encre · or en accent · Hanken Grotesk.
   Double thème (clair par défaut ; sombre via prefers-color-scheme ou
   data-theme="dark"). Les NOMS de variables sont ceux du site historique :
   les CSS des pages n'ont pas à changer, seuls les tokens changent.
===================================================================== */
:root {
    --navy: #0f1a2e;          /* encre profonde / accents sombres */
    --navy-light: #efe9dd;    /* panneau chaud clair (sections) */
    --navy-card: #fbfaf6;     /* surface carte */
    --navy-hover: #f2eee6;
    --gold: #a87c2c;          /* accent, calibré pour le clair */
    --gold-light: #c39a49;
    --gold-dark: #8a6522;
    --white: #12203a;         /* TEXTE principal (encre) */
    --white-dim: #4a5163;     /* texte secondaire */
    --white-muted: #838895;   /* texte discret */
    --green: #2f8f4a;
    --glass-bg: #fbfaf6;
    --glass-border: rgba(15,26,46,0.10);
    --gradient-gold: linear-gradient(135deg, #c39a49 0%, #a87c2c 100%);
    --gradient-navy: linear-gradient(180deg, #f7f5f0 0%, #efeae1 100%);
    --shadow-card: 0 1px 2px rgba(15,26,46,.04), 0 22px 46px -26px rgba(15,26,46,.20);
    --shadow-glow: 0 0 0 0 rgba(0,0,0,0);
    --radius: 18px;
    --radius-sm: 12px;
    --transition: 220ms cubic-bezier(.4,0,.2,1);

    --paper: #f6f4ef;
    --paper-2: #efece4;
    --hair: rgba(15,26,46,0.10);
    --hair-soft: rgba(15,26,46,0.06);
    --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --f-head: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --maxw: 1200px;
    --px: clamp(22px, 5vw, 80px);

    /* Alias de compatibilité — plusieurs pages historiques (plan, consulting,
       declaration-annuelle, guide-irs…) utilisent ces noms courts. On garde
       les alias plutôt que de réécrire chaque style inline. */
    --serif: 'Hanken Grotesk', 'Fraunces', 'Bitstream Charter', Georgia, serif;
    --border: rgba(15,26,46,0.10);
    --tr: 220ms cubic-bezier(.4,0,.2,1);
    --grad-gold: linear-gradient(135deg, #c39a49 0%, #a87c2c 100%);
}

/* Thème sombre — suit l'OS SAUF si l'utilisateur a explicitement choisi
   clair. Un bouton peut aussi forcer sombre via data-theme="dark". */
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --navy: #0a1628;
    --navy-light: #111d35;
    --navy-card: #152040;
    --navy-hover: #1a2850;
    --gold: #d4a95e;
    --gold-light: #e6c079;
    --gold-dark: #ac8137;
    --white: #f3f1ea;
    --white-dim: #b6b3a9;
    --white-muted: #7a7e8f;
    --green: #4ade80;
    --glass-bg: #131f3a;
    --glass-border: rgba(212,169,94,0.16);
    --gradient-gold: linear-gradient(135deg, #e6c079 0%, #d4a95e 100%);
    --gradient-navy: linear-gradient(180deg, #0d1a30 0%, #0a1628 100%);
    --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 22px 46px -26px rgba(0,0,0,.60);
    --paper: #0a1628;
    --paper-2: #0d1a30;
    --hair: rgba(212,169,94,0.16);
    --hair-soft: rgba(212,169,94,0.09);
    --border: rgba(212,169,94,0.16);
    --grad-gold: linear-gradient(135deg, #e6c079 0%, #d4a95e 100%);
  }
}
:root[data-theme="dark"] {
    --navy: #0a1628;
    --navy-light: #111d35;
    --navy-card: #152040;
    --navy-hover: #1a2850;
    --gold: #d4a95e;
    --gold-light: #e6c079;
    --gold-dark: #ac8137;
    --white: #f3f1ea;
    --white-dim: #b6b3a9;
    --white-muted: #7a7e8f;
    --green: #4ade80;
    --glass-bg: #131f3a;
    --glass-border: rgba(212,169,94,0.16);
    --gradient-gold: linear-gradient(135deg, #e6c079 0%, #d4a95e 100%);
    --gradient-navy: linear-gradient(180deg, #0d1a30 0%, #0a1628 100%);
    --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 22px 46px -26px rgba(0,0,0,.60);
    --paper: #0a1628;
    --paper-2: #0d1a30;
    --hair: rgba(212,169,94,0.16);
    --hair-soft: rgba(212,169,94,0.09);
    --border: rgba(212,169,94,0.16);
    --grad-gold: linear-gradient(135deg, #e6c079 0%, #d4a95e 100%);
}

/* Base : transition douce clair/sombre sur les surfaces racine. */
html {
    background: var(--paper);
    -webkit-text-size-adjust: 100%;
}
body {
    background: var(--paper);
    color: var(--white);
    font-family: var(--f-body);
    transition: background-color 0.3s ease, color 0.3s ease;
}
h1, h2, h3, h4 { font-family: var(--f-head); color: var(--white); }
::selection { background: rgba(168,124,44,.18); color: var(--white); }

/* Bloc « Fondateur » (bloc #about des homes) : photo + bio à côté sur desktop,
   photo au-dessus et texte en dessous sur mobile pour ne pas serrer le portrait. */
@media (max-width: 640px) {
    .founder-header { flex-direction: column; text-align: center; gap: 18px !important; }
    .founder-header > img { width: 96px !important; height: 96px !important; }
}

/* Tables de comparaison (guides, avis) : sur mobile, rendre scrollables
   horizontalement plutôt que de laisser déborder la page. Règle globale :
   ~33 pages portent .compare-table en <style> inline, pas de wrapper.
   display:block conserve le rendu tabulaire tout en autorisant le scroll. */
@media (max-width: 700px) {
    .compare-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* Sélecteur soleil/lune — style partagé, injecté par theme-toggle.js. */
.theme-toggle {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--hair);
    border-radius: 100px;
    color: var(--white-dim);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), transform var(--transition), background var(--transition);
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-1px); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}