/* ==========================================================================
   tokens.css — myOptions Refonte 2026
   Variables CSS partagées par toute la refonte.
   Modifier UN fichier, tout le site suit.
   ========================================================================== */

/* Ordre des couches — plus on est à droite, plus on a la priorité. */
/* Pour activer la hiérarchie, charger ce fichier en premier dans base.html. */
@layer legacy, reset, tokens, base, components, utilities;


/* --------------------------------------------------------------------------
   Typographie — système à 3 familles
   -------------------------------------------------------------------------- */

:root {
  /* Familles
     --font-primary    : body, UI, CTA, tableaux, labels (Stack Sans Text)
     --font-secondary  : H1-H3 pages, hero, gros chiffres éditoriaux (Stack Sans Headline)
     --font-exception  : italique rare, moments signature (Fraunces)
     --font-mono       : code, stack trace, chiffres sandbox (fallback système)
  */
  --font-primary: 'Stack Sans Text', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', system-ui, sans-serif;
  --font-secondary: 'Stack Sans Headline', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', system-ui, sans-serif;
  --font-exception: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* Tailles — fluides en hero, fixes ailleurs.
     clamp(min, preferred, max) s'adapte à la largeur du viewport. */
  --text-hero-xl: clamp(40px, 5vw + 1rem, 72px);  /* hero home, manifeste */
  --text-hero-lg: clamp(32px, 4vw + 0.5rem, 56px); /* hero pages secondaires */
  --text-display: clamp(28px, 3.5vw, 44px);        /* grands titres sections */
  --text-h1: clamp(26px, 2.8vw, 36px);             /* H1 de page standard */
  --text-h2: clamp(20px, 2.2vw, 28px);             /* H2 de section */
  --text-h3: 18px;                                  /* H3 carte, panneau */
  --text-h4: 16px;                                  /* H4 sous-bloc */
  --text-body-lg: 18px;                             /* lead, intro */
  --text-body: 16px;                                /* texte courant */
  --text-body-sm: 14px;                             /* body compact */
  --text-caption: 12px;                             /* légendes */
  --text-eyebrow: 11px;                             /* sur-titre uppercase */
  --text-micro: 10px;                               /* labels tableaux */

  /* Interlignes */
  --leading-tight: 1.05;   /* hero XL */
  --leading-snug: 1.15;    /* titres */
  --leading-normal: 1.4;   /* sous-titres */
  --leading-relaxed: 1.55; /* body dense */
  --leading-loose: 1.65;   /* body confortable */

  /* Approches (letter-spacing) */
  --tracking-tight: -0.025em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-uppercase: 0.12em;
  --tracking-eyebrow: 0.14em;

  /* Graisses — les 3 familles étant variables, on garde une échelle discrète */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
}


/* --------------------------------------------------------------------------
   Couleurs — palette v2
   Les tons "ink" remplacent le noir, les tons "cream" remplacent le blanc pur.
   Tous les ratios de contraste sur --cream-50 sont vérifiés WCAG.
   -------------------------------------------------------------------------- */

:root {
  /* Ink — neutres chauds sombres */
  --ink-900: #1C1F24;  /* hero H1, KPI hautes valeurs. AAA sur --cream-50 */
  --ink-800: #22262C;  /* fond ink mid (cards projet, surface emphase douce) — NEW v5 07/05 */
  --ink-700: #2C313A;  /* texte principal, CTA primary fill, séparateurs sur ink-900. AAA — profondeur validée v5 07/05 */
  --ink-500: #525A63;  /* texte secondaire, descriptions. AA+ */
  --ink-300: #9AA1A9;  /* texte désactivé, placeholder. AA large only */
  --ink-200: #C4CAD2;  /* bordures input hover, labels meta sur fond clair — NEW v5 07/05 */
  --ink-100: #D1D3D7;  /* bordures input au repos, séparateurs légers */

  /* Cream — neutres chauds clairs */
  --cream-50: #FCFBF7;   /* fond principal du site */
  --cream-100: #F6F4EF;  /* sections alternées, fond de card */
  --cream-200: #EDEAE3;  /* fond input, zone neutre */
  --cream-300: #E5DED1;  /* bordures douces, séparateurs tables */
  --cream-400: #D6CDB8;  /* bordures hover, tags crème foncée */

  /* Bronze — accent matière (jamais en texte courant) */
  --bronze-700: #6E4F1F; /* eyebrows des pages légales : texte bronze AA — déclaré 01/10/2026 */
  --bronze-100: #F0E6D1; /* fond pastille « à renouveler » — déclaré 09/10/2026 (design system) */
  --bronze-600: #9A835C; /* eyebrows, numéros d'étape. AA large only */
  --bronze-500: #B39D76; /* filets, traits, icônes. décoratif */
  --bronze-200: #D9C8A6; /* fond pills, décoration. décoratif */

  /* Navy — accent froid éditorial, réservé dashboards et data dense */
  --navy-900: #0F1E34;   /* header dashboard, série data primaire. AAA */
  --navy-700: #1F3555;   /* série 2 data viz, liens actifs dashboard. AAA */

  /* Tokens fonctionnels */
  --success: #3A7D68;  /* validations, badges positifs. AA */
  --info: var(--ink-700);
  --warning: #B77F2C;  /* avertissements non bloquants. AA */
  --danger: #A33030;   /* erreurs, blocages. AAA */

  /* Data viz — 8 séries alignées sur la brand (remplace charts.py) */
  --dataviz-1: #0F1E34;
  --dataviz-2: #1F3555;
  --dataviz-3: #4A6B94;
  --dataviz-4: #9A835C;
  --dataviz-5: #B39D76;
  --dataviz-6: #D9C8A6;
  --dataviz-7: #3A7D68;
  --dataviz-8: #D1D3D7;

  /* Gris neutres — pour header et zones neutres froides.
     Plus désaturés que les cream (chauds) et que les ink-blue (bleutés). */
  --grey-50: #F2F3F5;   /* fond header, très discret, gris quasi-neutre */
  --grey-100: #E5E7EB;  /* bordures sur fond gris */
  --grey-200: #D1D5DB;  /* séparateurs */

  /* Ink-blue — encre ultra-diluée (gardé pour compatibilité, non utilisé par défaut) */
  --ink-blue-50: #EEF1F4;
  --ink-blue-100: #E3E7EC;

  /* Alias sémantiques — à utiliser dans les composants, jamais les tokens bruts */
  --bg-primary: var(--cream-50);    /* fond site, fond hero ivoire */
  --bg-subtle: var(--cream-100);    /* sections alternées */
  --bg-muted: var(--cream-200);     /* zone input */
  --bg-emphasis: var(--ink-900);    /* fond encre, campagne */
  --surface-card: #FFFFFF;          /* surface de carte blanche (pages front Se financer, CGP) — déclarée 01/10/2026 */
  --bg-dashboard: var(--navy-900);  /* fond navy, dashboards */

  --text-primary: var(--ink-700);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-300);
  --text-on-emphasis: var(--cream-50);  /* texte sur fond encre */
  --text-accent: var(--bronze-600);     /* eyebrows, accents */

  --border-subtle: var(--cream-300);
  --border-strong: var(--ink-100);
  --border-emphasis: var(--ink-700);
  --border-accent: var(--bronze-500);
}


/* --------------------------------------------------------------------------
   Couleurs — palette v4 (design system v2)
   Validée 2026-04-27. Ajoutée en additif aux tokens v1 ci-dessus.
   Référence : Refonte options/01-Charte/Palette-couleurs-validee-v4.md
   Migration v1 → v4 documentée en bas du fichier de palette.
   -------------------------------------------------------------------------- */

:root {
  /* Couche 1 — encre + neutres */
  --ink-body: #424A55;        /* paragraphes lecture, AAA 9.7:1 sur fond clair (NEW γ) */
  --neutre-50: #FAFAF7;       /* fond principal pages publiques (à doser fin) */
  --dash-bg: #E8ECF1;         /* fond dashboard espace connecté (gris-bleu prononcé) */
  --dash-band: #F6F7F9;       /* bande gris clair dans une carte blanche (tableau de bord financeur) — déclaré 23/10/2026 */
  --neutre-100: #F8F6F1;      /* fill input, sections alternées (validé B2 inputs) */
  --neutre-200: #ECEAE3;      /* séparateurs fins, états vides */

  /* Couche 2 — accent chaud signature (sur ink-900) */
  /* --bronze-200 #D9C8A6 existe déjà en v1, conservé tel quel */

  /* Couche 3 — accent lumineux */
  --bleuet: #6A9EFF;          /* saillance, action, info clé, badge live */
  --bleuet-50: #E8EEF8;       /* fond bleu adouci (chips, bouton secondaire) — déclaré 01/10/2026 */
  --bleuet-dark: #2D4A78;     /* texte bleu foncé sur bleuet-50, ~8:1 — déclaré 01/10/2026 */

  /* Couche 4 — accents sémantiques (2 variantes par accent)
     Valeurs alignées sur mockup-cards-projet-v5-design-system.html
     (validé Lucile 07/05 comme source de vérité couleurs famille). */
  --celadon-light: #A8D4C0;   /* sur fond ink-900 */
  --celadon-dark:  #5C8A75;   /* aplat famille cards (Croissance) */
  --celadon-50:    #EAF3EE;   /* fond chip « En vigueur » (CGU) — déclaré 01/10/2026 */
  --celadon-700:   #4A6B5C;   /* texte chip « En vigueur » sur celadon-50 — déclaré 01/10/2026 */
  --lilas-light:   #E0CDF6;   /* sur fond ink-900 */
  --lilas-dark:    #7E5BC4;   /* aplat famille cards (Convertibles) */
  --lilas-700:     #5A3F95;   /* texte lilas sur fond clair, AA — déclaré 09/10/2026 (design system) */
  --terracotta-light: #E58986; /* sur fond ink-900 */
  --terracotta-dark:  #D86A6A; /* aplat famille cards (Equity) */

  /* Bouton secondaire (mo-btn--secondary + bouton « Se connecter » du menu mobile).
     01/10/2026 : passage du lilas au bleu, sur tout le site.
     Pour revenir au lilas : --btn-secondary-bg: var(--lilas-light);
                             --btn-secondary-fg: var(--lilas-dark); */
  --btn-secondary-bg: var(--bleuet-50);
  --btn-secondary-fg: var(--bleuet-dark);
}


/* --------------------------------------------------------------------------
   Typographie — échelle hybride δ (design system v2)
   Validée 2026-04-27. Mix masses marquées + corps aéré.
   Référence : Refonte options/01-Charte/Fondations-typo-grille-v1.md
   -------------------------------------------------------------------------- */

:root {
  /* Familles renommées sémantiquement (alias des --font-secondary/primary v1) */
  --font-headline: var(--font-secondary);
  --font-text:     var(--font-primary);

  /* Échelle responsive en clamp() — 8 niveaux */
  --font-display: clamp(1.875rem, 1.2rem + 3vw, 3.5rem);     /* 30 → 56 */
  --font-h1:      clamp(1.625rem, 1.1rem + 2.5vw, 2.75rem);  /* 26 → 44 */
  --font-h2:      clamp(1.25rem, 0.95rem + 1.5vw, 1.875rem); /* 20 → 30 */
  --font-h3:      clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); /* 17 → 22 */
  --font-body:    clamp(0.875rem, 0.85rem + 0.1vw, 1rem);    /* 14 → 16 */
  --font-caption: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); /* 11 → 12 */
  --font-eyebrow: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem); /* 10 → 11 */
  --font-stat:    clamp(1.125rem, 0.7rem + 1.7vw, 1.875rem); /* 18 → 30 */

  /* Line-heights par usage */
  --lh-display: 1.04;
  --lh-h1: 1.10;
  --lh-h2: 1.20;
  --lh-h3: 1.30;
  --lh-body: 1.65;       /* corps aéré, lecture confortable */
  --lh-caption: 1.45;
  --lh-eyebrow: 1.30;
  --lh-stat: 1.00;

  /* Letter-spacing par usage */
  --ls-display: -0.028em;
  --ls-h1: -0.022em;
  --ls-h2: -0.014em;
  --ls-h3: -0.008em;
  --ls-body: 0;
  --ls-caption: 0.01em;
  --ls-eyebrow: 0.18em;  /* uppercase tracking ouvert */
  --ls-stat: -0.02em;
}


/* --------------------------------------------------------------------------
   Espacement — échelle sur multiples de 4 (étendue v4)
   Niveaux 5, 10, 20, 40 ajoutés pour les ajustements typographiques fins.
   -------------------------------------------------------------------------- */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;     /* NEW v4 */
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;    /* NEW v4 */
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;    /* NEW v4 */
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;   /* NEW v4 */
}


/* --------------------------------------------------------------------------
   Radius — pas de valeurs intermédiaires (pas de 6, pas de 10)
   -------------------------------------------------------------------------- */

:root {
  --radius-none: 0;
  --radius-sm: 4px;       /* inputs, tags */
  --radius-md: 8px;       /* cards, modals secondaires */
  --radius-lg: 12px;      /* modals principales, cards hero */
  --radius-full: 9999px;  /* pills, boutons, eyebrows */
}


/* --------------------------------------------------------------------------
   Épaisseurs de bord — 3 niveaux fonctionnels
     hairline : filet quasi-imperceptible, séparateurs intra-card
     default  : 1 px standard, contours de card
     accent   : 3 px, accent visuel (bandeau d'état, phase indicator)
   -------------------------------------------------------------------------- */

:root {
  --border-hairline: 0.5px;
  --border-default: 1px;
  --border-accent: 3px;
}


/* --------------------------------------------------------------------------
   Layout pages connectées — paddings verticaux des wrappers de page
   (dashboard porteur, ressources, workspace compte, etc.).
   Single source of truth pour garantir la cohérence cross-pages.
   -------------------------------------------------------------------------- */

:root {
  --page-pad-top: var(--space-8);      /* 32 px : air sous la sub-nav porteur */
  --page-pad-bottom: var(--space-20);  /* 80 px : air avant le footer */
}


/* --------------------------------------------------------------------------
   Typographie — échelle fixe (complément à l'échelle clamp() responsive)
   À utiliser quand on veut une taille précise insensible au viewport
   (ex: badges, eyebrows, chips, valeurs de KPI dans dashboards).
   Pour les titres de page / hero, préférer les --font-* clamp() ci-dessus.
   -------------------------------------------------------------------------- */

:root {
  --text-xxs: 10px;     /* solution__tag, chip minuscule */
  --text-xs: 11.5px;    /* eyebrow standard */
  --text-sm: 12px;      /* caption, métadonnées secondaires */
  --text-md: 13px;      /* lien, lead resserré, label KPI */
  --text-base: 14px;    /* corps de texte standard */
  --text-lg: 15px;      /* lead hero, paragraphe d'introduction */
  --text-xl: 16px;      /* titre de card, valeur KPI dashboard */
  --text-2xl: 18px;     /* titre de section secondaire */
  --text-3xl: 20px;     /* titre de section éditoriale (variante compacte) */
  --text-4xl: 22px;     /* titre de card hero, valeur stat large */
  --text-5xl: 26px;     /* titre section principale */
  --text-6xl: 32px;     /* hero mobile */
  --text-hero: 44px;    /* hero desktop (Bonjour Julia.) */
}


/* --------------------------------------------------------------------------
   Ombres — discrètes, fonctionnelles. Jamais colorées, jamais empilées.
   -------------------------------------------------------------------------- */

:root {
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(28, 31, 36, 0.05),
                 0 4px 12px rgba(28, 31, 36, 0.04);
  --shadow-modal: 0 8px 24px rgba(28, 31, 36, 0.12),
                  0 2px 6px rgba(28, 31, 36, 0.08);
  --shadow-focus: 0 0 0 3px rgba(56, 62, 69, 0.25);
}


/* --------------------------------------------------------------------------
   Opacités — versions translucides des couleurs principales pour les
   séparateurs, fonds doux et bordures discrètes. Évite les rgba() en dur
   dans les feuilles contextuelles.
   -------------------------------------------------------------------------- */

:root {
  /* Encre — séparateurs et bordures sur fond clair */
  --ink-900-06: rgba(28, 31, 36, 0.06);
  --ink-900-08: rgba(28, 31, 36, 0.08);
  --ink-900-10: rgba(28, 31, 36, 0.10);
  --ink-900-18: rgba(28, 31, 36, 0.18);

  /* Bronze — fond et séparateurs des cards identitaires (pattern bronze sable) */
  --bronze-card-bg: rgba(168, 124, 61, 0.06);
  --bronze-card-border: rgba(168, 124, 61, 0.18);

  /* Ivory — séparateurs et textes secondaires sur fond sombre (ink-900) */
  --ivory-10: rgba(255, 255, 255, 0.10);
  --ivory-65: rgba(250, 247, 242, 0.65);
  --ivory-70: rgba(250, 247, 242, 0.70);
  --ivory-75: rgba(250, 247, 242, 0.75);
  --ivory-80: rgba(250, 247, 242, 0.80);
}


/* --------------------------------------------------------------------------
   Transitions — seules propriétés animables : transform, opacity, bordures
   -------------------------------------------------------------------------- */

:root {
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;
}


/* --------------------------------------------------------------------------
   Breakpoints — info pour les devs. Les media queries s'écrivent en dur.
   Mobile-first : on part de 0, on ajoute @media (min-width) ensuite.
   -------------------------------------------------------------------------- */

:root {
  --bp-sm: 640px;    /* mobile paysage */
  --bp-md: 768px;    /* tablette portrait */
  --bp-lg: 1024px;   /* tablette paysage, petit desktop */
  --bp-xl: 1280px;   /* desktop standard */
  --bp-2xl: 1440px;  /* grand écran */
}


/* --------------------------------------------------------------------------
   Layout — conteneur principal
   -------------------------------------------------------------------------- */

:root {
  --container-max: 1280px;
  --container-gutter: 20px;     /* mobile */
  --container-gutter-md: 32px;  /* tablette */
  --container-gutter-lg: 48px;  /* desktop */
  /* 2026-09-30 — alignement global : conteneur large pour l'admin (tableaux). */
  --container-wide: 1440px;
  /* Gouttière de page unique, progressive selon l'écran (20 / 32 / 48).
     À utiliser pour TOUS les conteneurs de page, en-tête et sous-menu compris,
     afin que logo, menus et contenu partagent le même axe gauche. */
  --page-gutter: var(--container-gutter);
}
@media (min-width: 768px)  { :root { --page-gutter: var(--container-gutter-md); } }
@media (min-width: 1024px) { :root { --page-gutter: var(--container-gutter-lg); } }


/* --------------------------------------------------------------------------
   Formulaires « Doux » — refonte 05/10/2026
   (Refonte options/03-Chantiers/Handoff-formulaires-doux, planche FormulairesD)
   Seules variables lues par les composants de forms.css. Valeurs par défaut =
   fond clair ; .mo-surface-dark (blocs ink-900) et .mo-form--compact
   (back-office) les redéfinissent.
   -------------------------------------------------------------------------- */

:root {
  --terracotta-600: #B5413B;   /* texte / contour d'erreur sur fond clair */
  --terracotta-50:  #FAEBE5;   /* fond de champ en erreur */

  --field-bg:          var(--neutre-200);
  --field-bg-focus:    #FFFFFF;
  --field-fg:          var(--ink-900);
  --field-placeholder: var(--ink-500);
  --field-ring:        var(--ink-300);   /* adouci le 05/10 (ink-900 puis ink-500 jugés trop marqués) */
  --field-ring-width:  1px;
  --field-radius:      12px;
  --field-h:           52px;
  --field-font-size:   15px;
  --field-error:       var(--terracotta-600);
  --field-error-bg:    var(--terracotta-50);
  --field-disabled-bg: var(--neutre-100);
  --field-disabled-fg: var(--ink-300);
  --control-off:       var(--ink-100);
  --control-on:        var(--ink-900);
  --control-on-fg:     var(--neutre-50);
  --switch-on:         var(--bleuet);
  --menu-bg:           #FFFFFF;
  --menu-active:       var(--neutre-200);
  --label-fg:          var(--ink-900);
  --help-fg:           var(--ink-500);
  --upload-bg:         var(--neutre-100);
}

.mo-surface-dark,
.mo-dossier--ink {   /* formulaires sombres des pages front (CGP, contact, Se financer, candidature) */
  --field-bg:          var(--ink-700);
  --field-bg-focus:    var(--ink-800);
  --field-fg:          var(--neutre-50);
  --field-ring:        var(--ink-300);
  --label-fg:          var(--neutre-50);
  --field-placeholder: var(--ink-300);
  --help-fg:           var(--ink-300);
  --field-error:       var(--terracotta-light);
  --field-error-bg:    rgba(229, 137, 134, 0.16);
  --field-disabled-bg: var(--ink-700);
  --field-disabled-fg: var(--ink-500);
  --control-off:       var(--ink-500);
  --control-on:        var(--neutre-50);
  --control-on-fg:     var(--ink-900);
  --menu-bg:           var(--ink-800);
  --menu-active:       var(--ink-700);
  --upload-bg:         var(--ink-800);
}

.mo-form--compact {
  --field-h:         44px;
  --field-radius:    10px;
  --field-font-size: 14px;
}


/* --------------------------------------------------------------------------
   Réduction de mouvement — accessibilité motrice/vestibulaire
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}


/* --------------------------------------------------------------------------
   Dark mode — désactivé en v1 (sera activé en C7 via prefers-color-scheme)
   Déclaré ici en commentaire pour que l'équipe sache où ça se branchera.
   --------------------------------------------------------------------------

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: var(--ink-900);
    --bg-subtle: var(--ink-700);
    --text-primary: var(--cream-50);
    --text-secondary: var(--ink-300);
    --border-subtle: var(--ink-700);
  }
}

*/