/* ==========================================================================
   MAC SA — Système de design · Piste A « Ligne d'horizon »
   Uteek Digital · v0.1 · 21/10/2026

   Fichier unique : tokens (variables CSS), base, composants et états.
   Règle d'or : le doré reste rare et intentionnel. Filet, flèche, unité,
   focus sur fond sombre. Jamais un fond de bouton, un aplat ou un dégradé.

   Contrastes (WCAG 2.2 AA) vérifiés dans styleguide.html, section Contrastes.
   - Sur fond clair, l'or principal (#C9A35B) ne fait que 2,4:1 : décor
     uniquement. Tout texte doré sur fond clair utilise --mac-or-700.
   - Sur fond marine, l'or principal fait 6,7:1 : il peut porter du texte.

   Sommaire
   1. Tokens : palette de base
   2. Tokens : typographie, espacements, formes, mouvement
   3. Tokens sémantiques (fond clair) et contexte sombre .mac-dark
   4. Base
   5. Typographie
   6. Mise en page
   7. Filets dorés
   8. Boutons et liens
   9. Badges et variations
   10. En-têtes de section
   11. Cartes
   12. Chiffres clés
   13. Tableaux financiers
   14. Formulaires
   15. Plateformes web et mobile
   16. Mouvement réduit
   ========================================================================== */

/* Polices : chargées dans le <head> de chaque page (preconnect + display=swap)
   https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@300;400;500;600;700&display=swap */


/* 1. Tokens : palette de base
   ========================================================================== */
:root {
  /* Marine et bleus institutionnels */
  --mac-marine-950: #06182C;  /* nuit : pied de page, voiles photo */
  --mac-marine-900: #0B2340;  /* marine MAC : titres, CTA, sections sombres */
  --mac-marine-800: #143456;  /* survol du bouton primaire, cartes sur fond sombre */
  --mac-marine-700: #234A73;  /* filets sur fond sombre */
  --mac-bleu-600:   #1B5A80;  /* bleu du logo : focus sur fond clair, information */
  --mac-bleu-100:   #E6EEF4;  /* fond d'information, sélection de texte */

  /* Neutres */
  --mac-ink:       #14202E;   /* texte courant */
  --mac-slate-700: #4A5A70;   /* texte secondaire */
  --mac-slate-600: #5E6B7D;   /* légendes, métadonnées */
  --mac-slate-400: #8792A2;   /* bordure de champ (≥ 3:1 sur blanc) */
  --mac-slate-200: #C9CFD8;   /* bordure désactivée */
  --mac-slate-100: #EEF0F3;   /* fond désactivé */
  --mac-white:     #FFFFFF;
  --mac-ivoire:    #F7F4EE;   /* fond alterné chaud */
  --mac-sable:     #EFE9DD;   /* fond appuyé : bouton pressé sur fond sombre */
  --mac-filet:     #E3DDD1;   /* filets et bordures décoratives */

  /* Brume : textes sur fond sombre */
  --mac-brume-100: #E6ECF3;   /* texte courant sur marine */
  --mac-brume-300: #C7D2E1;   /* texte secondaire sur marine */
  --mac-brume-500: #9FB0C6;   /* légendes sur marine */
  --mac-brume-700: #6F84A0;   /* bordure de champ sur marine (≥ 3:1) */

  /* Doré : accent rare */
  --mac-or-050: #FAF6EC;      /* voile doré : pastille d'icône, jamais de grand aplat */
  --mac-or-300: #E3CB94;      /* doré clair : petit texte doré sur fond sombre */
  --mac-or-500: #C9A35B;      /* doré principal : filets, icônes, chiffres sur sombre */
  --mac-or-700: #8A6A2E;      /* doré foncé : tout texte doré sur fond clair */

  /* Données de marché */
  --mac-hausse:       #1F7A4D;
  --mac-baisse:       #B4432F;
  --mac-hausse-clair: #5CC394;  /* sur fond sombre */
  --mac-baisse-clair: #F2917D;  /* sur fond sombre */


/* 2. Tokens : typographie, espacements, formes, mouvement
   ========================================================================== */

  --mac-font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mac-font-text:    "Inter", "Segoe UI", system-ui, sans-serif;

  /* Échelle fluide de 375 px à 1440 px de large */
  --mac-fs-display:   clamp(2.5rem, 1.796rem + 3.005vw, 4.5rem);    /* 40 → 72 */
  --mac-fs-h2:        clamp(2rem, 1.648rem + 1.502vw, 3rem);        /* 32 → 48 */
  --mac-fs-h3:        clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem); /* 22 → 28 */
  --mac-fs-h4:        clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem); /* 18 → 20 */
  --mac-fs-lead:      clamp(1.0625rem, 0.997rem + 0.282vw, 1.25rem);/* 17 → 20 */
  --mac-fs-body:      1rem;        /* 16 */
  --mac-fs-small:     0.875rem;    /* 14 */
  --mac-fs-caption:   0.8125rem;   /* 13 */
  --mac-fs-eyebrow:   0.75rem;     /* 12 */
  --mac-fs-figure-xl: clamp(2.75rem, 2.31rem + 1.878vw, 4rem);      /* 44 → 64 */
  --mac-fs-figure-l:  clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem);   /* 28 → 40 */
  --mac-fs-figure-m:  1.375rem;    /* 22 */

  --mac-fw-light:    300;
  --mac-fw-regular:  400;
  --mac-fw-medium:   500;
  --mac-fw-semibold: 600;
  --mac-fw-bold:     700;

  --mac-lh-display: 1.05;
  --mac-lh-heading: 1.15;
  --mac-lh-snug:    1.3;
  --mac-lh-ui:      1.4;
  --mac-lh-body:    1.65;

  --mac-ls-display: -0.025em;
  --mac-ls-heading: -0.015em;
  --mac-ls-figure:  -0.02em;
  --mac-ls-eyebrow: 0.16em;
  --mac-ls-label:   0.08em;

  /* Espacements, base 4 px */
  --mac-space-1:  0.25rem;   /* 4 */
  --mac-space-2:  0.5rem;    /* 8 */
  --mac-space-3:  0.75rem;   /* 12 */
  --mac-space-4:  1rem;      /* 16 */
  --mac-space-5:  1.5rem;    /* 24 */
  --mac-space-6:  2rem;      /* 32 */
  --mac-space-7:  3rem;      /* 48 */
  --mac-space-8:  4rem;      /* 64 */
  --mac-space-9:  6rem;      /* 96 */
  --mac-space-10: 8rem;      /* 128 */
  --mac-section-y: clamp(4rem, 2.944rem + 4.507vw, 7rem);   /* 64 → 112 */
  --mac-gutter:    clamp(1rem, 0.56rem + 1.878vw, 2.25rem); /* 16 → 36 */
  --mac-container: 80rem;    /* 1280 */
  --mac-measure:   38rem;    /* largeur de lecture */

  /* Formes */
  --mac-radius-0:    0;
  --mac-radius-1:    2px;    /* boutons, champs, cartes */
  --mac-radius-2:    4px;    /* médias, badges de store */
  --mac-radius-pill: 999px;  /* uniquement dans les interfaces des plateformes */

  --mac-shadow-1: 0 1px 2px rgb(11 35 64 / 0.06);
  --mac-shadow-2: 0 14px 30px -14px rgb(11 35 64 / 0.20);
  --mac-shadow-3: 0 30px 60px -28px rgb(11 35 64 / 0.32);

  --mac-hairline:   1px;
  --mac-rule-short: 1.5rem;  /* 24 px : devant les surtitres */
  --mac-rule-mid:   3rem;    /* 48 px : repères des chiffres clés */

  --mac-control-h:    3.25rem;  /* 52 */
  --mac-control-h-sm: 2.75rem;  /* 44, cible tactile minimale */

  /* Mouvement */
  --mac-ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --mac-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mac-dur-fast: 150ms;
  --mac-dur-base: 250ms;
  --mac-dur-slow: 450ms;
  --mac-dur-draw: 700ms;


/* 3. Tokens sémantiques (fond clair par défaut)
   ========================================================================== */

  --mac-surface:        var(--mac-white);
  --mac-surface-alt:    var(--mac-ivoire);
  --mac-surface-raised: var(--mac-white);
  --mac-text:           var(--mac-ink);
  --mac-text-2:         var(--mac-slate-700);
  --mac-text-3:         var(--mac-slate-600);
  --mac-heading:        var(--mac-marine-900);
  --mac-border:         var(--mac-filet);
  --mac-border-strong:  var(--mac-slate-400);
  --mac-gold-line:      var(--mac-or-500);
  --mac-gold-text:      var(--mac-or-700);
  --mac-link:           var(--mac-marine-900);
  --mac-focus:          var(--mac-bleu-600);
  --mac-up:             var(--mac-hausse);
  --mac-down:           var(--mac-baisse);
}

/* Contexte sombre : toute section marine. Les composants s'y adaptent seuls. */
.mac-dark {
  --mac-surface:        var(--mac-marine-900);
  --mac-surface-alt:    var(--mac-marine-950);
  --mac-surface-raised: var(--mac-marine-800);
  --mac-text:           var(--mac-brume-100);
  --mac-text-2:         var(--mac-brume-300);
  --mac-text-3:         var(--mac-brume-500);
  --mac-heading:        var(--mac-white);
  --mac-border:         var(--mac-marine-700);
  --mac-border-strong:  var(--mac-brume-700);
  --mac-gold-text:      var(--mac-or-300);
  --mac-link:           var(--mac-white);
  --mac-focus:          var(--mac-or-500);
  --mac-up:             var(--mac-hausse-clair);
  --mac-down:           var(--mac-baisse-clair);
  background-color: var(--mac-surface);
  color: var(--mac-text);
}

.mac-dark--night {
  --mac-surface: var(--mac-marine-950);
}


/* 4. Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--mac-font-text);
  font-size: var(--mac-fs-body);
  line-height: var(--mac-lh-body);
  color: var(--mac-text);
  background-color: var(--mac-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--mac-bleu-100);
  color: var(--mac-marine-900);
}

:where(a) {
  color: var(--mac-link);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--mac-focus);
  outline-offset: 3px;
}

.mac-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* 5. Typographie
   ========================================================================== */
.mac-display,
.mac-h2,
.mac-h3,
.mac-h4 {
  margin: 0;
  font-family: var(--mac-font-display);
  color: var(--mac-heading);
  text-wrap: balance;
}

.mac-display {
  font-size: var(--mac-fs-display);
  font-weight: var(--mac-fw-light);
  line-height: var(--mac-lh-display);
  letter-spacing: var(--mac-ls-display);
}

.mac-h2 {
  font-size: var(--mac-fs-h2);
  font-weight: var(--mac-fw-regular);
  line-height: var(--mac-lh-heading);
  letter-spacing: var(--mac-ls-heading);
}

.mac-h3 {
  font-size: var(--mac-fs-h3);
  font-weight: var(--mac-fw-medium);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.mac-h4 {
  font-size: var(--mac-fs-h4);
  font-weight: var(--mac-fw-semibold);
  line-height: var(--mac-lh-snug);
}

.mac-lead {
  margin: 0;
  font-size: var(--mac-fs-lead);
  line-height: 1.6;
  color: var(--mac-text-2);
  max-width: var(--mac-measure);
}

.mac-body {
  margin: 0;
  font-size: var(--mac-fs-body);
  line-height: var(--mac-lh-body);
}

.mac-small {
  font-size: var(--mac-fs-small);
  line-height: 1.5;
}

.mac-caption {
  font-size: var(--mac-fs-caption);
  line-height: 1.45;
  color: var(--mac-text-3);
}

/* Surtitre : filet doré de 24 px puis libellé en capitales */
.mac-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  font-family: var(--mac-font-text);
  font-size: var(--mac-fs-eyebrow);
  font-weight: var(--mac-fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--mac-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mac-gold-text);
}

.mac-eyebrow::before {
  content: "";
  flex: none;
  width: var(--mac-rule-short);
  height: var(--mac-hairline);
  background: var(--mac-gold-line);
}

/* Chiffres : toujours Inter, tabulaires et alignés */
.mac-num {
  font-family: var(--mac-font-text);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.mac-figure-l {
  font-family: var(--mac-font-text);
  font-size: var(--mac-fs-figure-l);
  font-weight: var(--mac-fw-light);
  line-height: 1;
  letter-spacing: var(--mac-ls-figure);
  color: var(--mac-heading);
  font-variant-numeric: tabular-nums lining-nums;
}

.mac-figure-m {
  font-family: var(--mac-font-text);
  font-size: var(--mac-fs-figure-m);
  font-weight: var(--mac-fw-semibold);
  line-height: 1.1;
  color: var(--mac-heading);
  font-variant-numeric: tabular-nums lining-nums;
}


/* 6. Mise en page
   ========================================================================== */
.mac-container {
  width: min(100% - 2 * var(--mac-gutter), var(--mac-container));
  margin-inline: auto;
}

.mac-section {
  padding-block: var(--mac-section-y);
  background-color: var(--mac-surface);
}

.mac-section--alt {
  background-color: var(--mac-surface-alt);
}

.mac-split {
  display: grid;
  gap: var(--mac-space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .mac-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}


/* 7. Filets dorés
   ========================================================================== */
.mac-rule {
  display: block;
  width: var(--mac-rule-mid);
  height: var(--mac-hairline);
  border: 0;
  margin: 0;
  background: var(--mac-gold-line);
  transform-origin: left center;
}

.mac-rule--short { width: var(--mac-rule-short); }
.mac-rule--full  { width: 100%; }

/* Filet neutre, porteur d'un repère doré à gauche */
.mac-rule-neutral {
  position: relative;
  height: var(--mac-hairline);
  background: var(--mac-border);
}

.mac-rule-neutral::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mac-rule-mid);
  background: var(--mac-gold-line);
}

/* Le filet se trace quand l'élément entre à l'écran (classe posée en JS) */
.mac-draw {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mac-dur-draw) var(--mac-ease-out);
}

.mac-draw.is-visible {
  transform: scaleX(1);
}


/* 8. Boutons et liens
   ========================================================================== */
.mac-btn {
  --_bg: transparent;
  --_fg: var(--mac-link);
  --_bd: transparent;
  --_arrow: var(--mac-gold-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: var(--mac-control-h);
  padding: 0 1.5rem;
  font-family: var(--mac-font-text);
  font-size: 0.9375rem;
  font-weight: var(--mac-fw-semibold);
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--_fg);
  background-color: var(--_bg);
  border: var(--mac-hairline) solid var(--_bd);
  border-radius: var(--mac-radius-1);
  cursor: pointer;
  transition:
    background-color var(--mac-dur-base) var(--mac-ease-out),
    border-color var(--mac-dur-base) var(--mac-ease-out),
    color var(--mac-dur-base) var(--mac-ease-out),
    transform var(--mac-dur-fast) var(--mac-ease-out);
}

.mac-btn__arrow {
  color: var(--_arrow);
  transition: transform var(--mac-dur-base) var(--mac-ease-out);
}

.mac-btn:hover .mac-btn__arrow,
.mac-btn.is-hover .mac-btn__arrow {
  transform: translateX(4px);
}

.mac-btn:active,
.mac-btn.is-active {
  transform: translateY(1px);
}

.mac-btn.is-focus {
  outline: 2px solid var(--mac-focus);
  outline-offset: 3px;
}

/* Primaire : marine plein, flèche dorée */
.mac-btn--primary {
  --_bg: var(--mac-marine-900);
  --_fg: var(--mac-white);
  --_bd: var(--mac-marine-900);
  --_arrow: var(--mac-or-500);
}

.mac-btn--primary:hover,
.mac-btn--primary.is-hover {
  --_bg: var(--mac-marine-800);
  --_bd: var(--mac-marine-800);
}

.mac-btn--primary:active,
.mac-btn--primary.is-active {
  --_bg: var(--mac-marine-950);
  --_bd: var(--mac-marine-950);
}

.mac-dark .mac-btn--primary {
  --_bg: var(--mac-white);
  --_fg: var(--mac-marine-900);
  --_bd: var(--mac-white);
  --_arrow: var(--mac-or-700);
}

.mac-dark .mac-btn--primary:hover,
.mac-dark .mac-btn--primary.is-hover {
  --_bg: var(--mac-ivoire);
  --_bd: var(--mac-ivoire);
}

.mac-dark .mac-btn--primary:active,
.mac-dark .mac-btn--primary.is-active {
  --_bg: var(--mac-sable);
  --_bd: var(--mac-sable);
}

/* Or : réservé à l'action phare (« Ouvrir un compte »), une seule fois par écran.
   Texte marine sur or 500 : contraste 6,6:1 (AA) */
.mac-btn--gold,
.mac-dark .mac-btn--gold {
  --_bg: var(--mac-or-500);
  --_fg: var(--mac-marine-900);
  --_bd: var(--mac-or-500);
  --_arrow: var(--mac-marine-900);
}

.mac-btn--gold:hover,
.mac-btn--gold.is-hover,
.mac-dark .mac-btn--gold:hover {
  --_bg: var(--mac-or-300);
  --_bd: var(--mac-or-300);
}

.mac-btn--gold:active,
.mac-btn--gold.is-active,
.mac-dark .mac-btn--gold:active {
  --_bg: var(--mac-or-700);
  --_bd: var(--mac-or-700);
  --_fg: var(--mac-white);
  --_arrow: var(--mac-white);
}

/* Secondaire : contour, se remplit au survol */
.mac-btn--secondary {
  --_fg: var(--mac-link);
  --_bd: var(--mac-heading);
}

.mac-btn--secondary:hover,
.mac-btn--secondary.is-hover {
  --_bg: var(--mac-marine-900);
  --_fg: var(--mac-white);
  --_bd: var(--mac-marine-900);
  --_arrow: var(--mac-or-500);
}

.mac-btn--secondary:active,
.mac-btn--secondary.is-active {
  --_bg: var(--mac-marine-950);
  --_bd: var(--mac-marine-950);
}

.mac-dark .mac-btn--secondary {
  --_bd: var(--mac-brume-300);
}

.mac-dark .mac-btn--secondary:hover,
.mac-dark .mac-btn--secondary.is-hover {
  --_bg: var(--mac-white);
  --_fg: var(--mac-marine-900);
  --_bd: var(--mac-white);
  --_arrow: var(--mac-or-700);
}

.mac-dark .mac-btn--secondary:active,
.mac-dark .mac-btn--secondary.is-active {
  --_bg: var(--mac-sable);
  --_bd: var(--mac-sable);
}

/* Lien : soulignement doré au repos, un trait marine le recouvre au survol */
.mac-btn--link {
  min-height: var(--mac-control-h-sm);
  padding: 0;
  gap: 0.625rem;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  border: 0;
}

.mac-btn__label {
  padding-bottom: 0.375rem;
  background-image:
    linear-gradient(var(--mac-link), var(--mac-link)),
    linear-gradient(var(--mac-gold-line), var(--mac-gold-line));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: background-size var(--mac-dur-slow) var(--mac-ease-out);
}

.mac-btn--link:hover .mac-btn__label,
.mac-btn--link.is-hover .mac-btn__label {
  background-size: 100% 1px, 100% 1px;
}

.mac-btn--link:active,
.mac-btn--link.is-active {
  transform: none;
  opacity: 0.8;
}

.mac-btn--sm {
  min-height: var(--mac-control-h-sm);
  padding: 0 1.125rem;
  font-size: var(--mac-fs-small);
}

.mac-btn--block {
  width: 100%;
}

/* Désactivé : neutre, sans doré */
.mac-btn:disabled,
.mac-btn[aria-disabled="true"] {
  --_bg: var(--mac-slate-100);
  --_fg: var(--mac-slate-600);
  --_bd: var(--mac-slate-100);
  --_arrow: currentColor;
  cursor: not-allowed;
  transform: none;
}

.mac-btn--link:disabled,
.mac-btn--link[aria-disabled="true"] {
  --_bg: transparent;
  --_bd: transparent;
  opacity: 1;
}

.mac-btn--link:disabled .mac-btn__label,
.mac-btn--link[aria-disabled="true"] .mac-btn__label {
  background-image: none;
}

.mac-btn:disabled .mac-btn__arrow,
.mac-btn[aria-disabled="true"] .mac-btn__arrow {
  transform: none;
}

/* Badges des stores d'applications */
.mac-store {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 1.125rem;
  color: var(--mac-white);
  text-decoration: none;
  background-color: var(--mac-marine-900);
  border: var(--mac-hairline) solid var(--mac-marine-900);
  border-radius: var(--mac-radius-2);
  transition: background-color var(--mac-dur-base) var(--mac-ease-out), border-color var(--mac-dur-base) var(--mac-ease-out);
}

.mac-store:hover {
  background-color: var(--mac-marine-800);
  border-color: var(--mac-or-500);
}

.mac-store svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
  flex: none;
}

.mac-store small {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-medium);
  letter-spacing: var(--mac-ls-label);
  text-transform: uppercase;
  color: var(--mac-brume-300);
}

.mac-store b {
  display: block;
  font-family: var(--mac-font-display);
  font-size: 0.9375rem;
  font-weight: var(--mac-fw-semibold);
  line-height: 1.2;
}


/* 9. Badges et variations
   ========================================================================== */
.mac-tag {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.5rem;
  font-family: var(--mac-font-text);
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  line-height: 1;
  letter-spacing: var(--mac-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mac-text-2);
  border: var(--mac-hairline) solid var(--mac-border);
  border-radius: var(--mac-radius-1);
}

/* La couleur ne suffit jamais : le symbole ▲ ▼ est toujours présent */
.mac-delta {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--mac-fw-semibold);
  white-space: nowrap;
}

.mac-delta--up   { color: var(--mac-up); }
.mac-delta--down { color: var(--mac-down); }
.mac-delta--flat { color: var(--mac-text-3); }


/* 10. En-têtes de section
   ========================================================================== */
.mac-section-head {
  display: grid;
  gap: var(--mac-space-5) var(--mac-space-8);
  align-items: end;
  margin-bottom: var(--mac-space-7);
}

.mac-section-head__main {
  display: flex;
  flex-direction: column;
  gap: var(--mac-space-4);
}

.mac-section-head__title {
  max-width: 16em;
}

.mac-section-head__intro {
  margin: 0;
  max-width: var(--mac-measure);
  color: var(--mac-text-2);
}

@media (min-width: 900px) {
  .mac-section-head--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}


/* 11. Cartes
   ========================================================================== */
.mac-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mac-space-3);
  padding: var(--mac-space-6) var(--mac-space-5) var(--mac-space-5);
  background-color: var(--mac-surface-raised);
  border: var(--mac-hairline) solid var(--mac-border);
  border-radius: var(--mac-radius-1);
  transition:
    transform var(--mac-dur-slow) var(--mac-ease-out),
    box-shadow var(--mac-dur-slow) var(--mac-ease-out);
}

/* Le seul doré de la carte : un filet de 2 px qui se trace au survol */
.mac-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--mac-gold-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mac-dur-slow) var(--mac-ease-out);
  z-index: 1;
}

.mac-card:hover,
.mac-card.is-hover {
  transform: translateY(-4px);
  box-shadow: var(--mac-shadow-2);
}

.mac-card:hover::before,
.mac-card.is-hover::before {
  transform: scaleX(1);
}

/* Lien étiré : toute la carte est cliquable, le focus entoure la carte */
.mac-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.mac-card:has(.mac-card__link:focus-visible) {
  outline: 2px solid var(--mac-focus);
  outline-offset: 3px;
}

.mac-card__link:focus-visible {
  outline: none;
}

.mac-card:hover .mac-btn--link .mac-btn__label {
  background-size: 100% 1px, 100% 1px;
}

.mac-card:hover .mac-btn__arrow {
  transform: translateX(4px);
}

.mac-card--media {
  padding: 0;
  overflow: hidden;
}

.mac-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--mac-space-3);
  padding: var(--mac-space-5);
}

.mac-card__title {
  margin: 0;
  font-family: var(--mac-font-display);
  font-size: 1.125rem;
  font-weight: var(--mac-fw-semibold);
  line-height: var(--mac-lh-snug);
  color: var(--mac-heading);
}

.mac-card__push {
  margin-top: auto;
}

.mac-card .mac-btn {
  align-self: flex-start;
}

.mac-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--mac-marine-900);
}

.mac-media img,
.mac-media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--mac-ease-out);
}

.mac-card:hover .mac-media img,
.mac-card:hover .mac-media svg {
  transform: scale(1.04);
}

/* Méta d'actualité : rubrique dorée, date neutre */
.mac-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--mac-fs-eyebrow);
  font-weight: var(--mac-fw-semibold);
  letter-spacing: var(--mac-ls-label);
  text-transform: uppercase;
  color: var(--mac-text-3);
}

.mac-meta__cat {
  color: var(--mac-gold-text);
}

/* Fiche fonds */
.mac-fund__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mac-space-3);
}

.mac-fund__perf {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: var(--mac-space-4) 0 0;
}

.mac-fund__perf .mac-delta {
  font-size: var(--mac-fs-small);
}

.mac-fund__period {
  margin: 0;
  font-size: var(--mac-fs-caption);
  color: var(--mac-text-3);
}

.mac-spark {
  width: 100%;
  height: 2.5rem;
  margin: var(--mac-space-3) 0 var(--mac-space-1);
  overflow: visible;
}

.mac-spark__line {
  fill: none;
  stroke: var(--mac-heading);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mac-spark__dot {
  stroke: var(--mac-gold-line);
  stroke-width: 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Carte profil client */
.mac-profile__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--mac-space-2);
  border-radius: 50%;
  background-color: var(--mac-or-050);
  color: var(--mac-or-700);
}

.mac-profile__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.mac-profile__tagline {
  margin: 0;
  font-size: var(--mac-fs-small);
  font-weight: var(--mac-fw-medium);
  color: var(--mac-gold-text);
}

/* Liste à tirets dorés */
.mac-list {
  display: grid;
  gap: 0.625rem;
  margin: var(--mac-space-2) 0 var(--mac-space-4);
  padding: 0;
  list-style: none;
  font-size: var(--mac-fs-small);
  color: var(--mac-text-2);
}

.mac-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.mac-list li::before {
  content: "";
  flex: none;
  width: 0.75rem;
  height: var(--mac-hairline);
  background: var(--mac-gold-line);
  transform: translateY(-0.3em);
}


/* 12. Chiffres clés
   ========================================================================== */
.mac-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

/* Chaque chiffre porte son filet : sur une ligne, ils forment l'horizon */
.mac-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mac-space-3);
  padding: var(--mac-space-6) var(--mac-space-5) var(--mac-space-5) 0;
  border-top: var(--mac-hairline) solid var(--mac-border);
}

/* Repère doré posé sur la ligne d'horizon */
.mac-figure::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--mac-rule-mid);
  height: var(--mac-hairline);
  background: var(--mac-gold-line);
}

.mac-figure__value {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  font-family: var(--mac-font-text);
  font-size: var(--mac-fs-figure-xl);
  font-weight: var(--mac-fw-light);
  line-height: 1;
  letter-spacing: var(--mac-ls-figure);
  color: var(--mac-heading);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.mac-figure__unit {
  font-size: 0.9375rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0;
  color: var(--mac-gold-text);
}

.mac-figure__label {
  font-size: var(--mac-fs-small);
  line-height: 1.4;
  color: var(--mac-text-2);
}


/* 13. Tableaux financiers
   ========================================================================== */
.mac-table-wrap {
  overflow-x: auto;
  border-top: var(--mac-hairline) solid var(--mac-heading);
  -webkit-overflow-scrolling: touch;
}

.mac-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-family: var(--mac-font-text);
  font-size: var(--mac-fs-small);
  font-variant-numeric: tabular-nums lining-nums;
}

.mac-table caption {
  caption-side: bottom;
  padding-top: var(--mac-space-4);
  text-align: left;
  font-size: var(--mac-fs-caption);
  color: var(--mac-text-3);
}

.mac-table th {
  padding: 0.875rem 1rem;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mac-text-2);
  border-bottom: var(--mac-hairline) solid var(--mac-border);
}

.mac-table td {
  padding: 1rem;
  vertical-align: middle;
  color: var(--mac-text);
  border-bottom: var(--mac-hairline) solid var(--mac-border);
}

.mac-table th:first-child,
.mac-table td:first-child {
  padding-left: 0;
}

.mac-table .is-num {
  text-align: right;
  white-space: nowrap;
}

.mac-table tbody tr {
  transition: background-color var(--mac-dur-fast) var(--mac-ease-out);
}

.mac-table tbody tr:hover {
  background-color: var(--mac-surface-alt);
}

.mac-table__name {
  display: block;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-heading);
}

.mac-table__sub {
  font-size: var(--mac-fs-caption);
  color: var(--mac-text-3);
}

.mac-table__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mac-space-3);
  margin-bottom: var(--mac-space-4);
}


/* 14. Formulaires
   ========================================================================== */
.mac-form {
  display: grid;
  gap: var(--mac-space-5);
}

.mac-form__row {
  display: grid;
  gap: var(--mac-space-5);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.mac-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mac-label {
  font-size: var(--mac-fs-small);
  font-weight: var(--mac-fw-medium);
  line-height: var(--mac-lh-snug);
  color: var(--mac-heading);
}

.mac-label__req {
  color: var(--mac-gold-text);
}

.mac-input,
.mac-select,
.mac-textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  font-family: var(--mac-font-text);
  font-size: var(--mac-fs-body);
  line-height: var(--mac-lh-ui);
  color: var(--mac-text);
  background-color: var(--mac-surface-raised);
  border: var(--mac-hairline) solid var(--mac-border-strong);
  border-radius: var(--mac-radius-1);
  appearance: none;
  transition: border-color var(--mac-dur-fast) var(--mac-ease-out), box-shadow var(--mac-dur-fast) var(--mac-ease-out);
}

.mac-textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.mac-select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B2340' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.mac-input::placeholder,
.mac-textarea::placeholder {
  color: var(--mac-text-3);
  opacity: 1;
}

.mac-input:hover,
.mac-select:hover,
.mac-textarea:hover,
.mac-input.is-hover {
  border-color: var(--mac-heading);
}

.mac-input:focus-visible,
.mac-select:focus-visible,
.mac-textarea:focus-visible,
.mac-input.is-focus {
  outline: 2px solid var(--mac-focus);
  outline-offset: 1px;
  border-color: var(--mac-focus);
}

.mac-field.is-error .mac-input,
.mac-field.is-error .mac-select,
.mac-field.is-error .mac-textarea {
  border-color: var(--mac-down);
}

.mac-input:disabled,
.mac-select:disabled,
.mac-textarea:disabled {
  color: var(--mac-slate-600);
  background-color: var(--mac-slate-100);
  border-color: var(--mac-slate-200);
  cursor: not-allowed;
}

.mac-help {
  font-size: var(--mac-fs-caption);
  color: var(--mac-text-3);
}

.mac-error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--mac-fs-caption);
  font-weight: var(--mac-fw-medium);
  color: var(--mac-down);
}

.mac-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--mac-fs-small);
  line-height: 1.5;
  color: var(--mac-text-2);
  cursor: pointer;
}

.mac-check input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.15rem 0 0;
  accent-color: var(--mac-marine-900);
  cursor: pointer;
}


/* 15. Plateformes web et mobile
   Reprise des formes et du contenu de design-v3, recolorés pour la piste A.
   ========================================================================== */
.mac-checklist {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mac-checklist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--mac-text);
}

.mac-checklist svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--mac-gold-text);
  stroke-width: 2;
}

.mac-devices {
  position: relative;
  padding: 0 4rem 3rem 0;
}

/* Ligne d'horizon dorée derrière les écrans */
.mac-devices__horizon {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 62%;
  height: var(--mac-hairline);
  background: var(--mac-gold-line);
  opacity: 0.7;
}

.mac-browser {
  position: relative;
  z-index: 1;
  width: min(100%, 36rem);
  overflow: hidden;
  background-color: var(--mac-white);
  border: var(--mac-hairline) solid var(--mac-filet);
  border-radius: 10px;
  box-shadow: var(--mac-shadow-3);
}

.mac-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  background-color: var(--mac-ivoire);
  border-bottom: var(--mac-hairline) solid var(--mac-filet);
}

.mac-browser__dots {
  display: flex;
  flex: none;
  gap: 6px;
}

.mac-browser__dots i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--mac-filet);
}

.mac-browser__url {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-medium);
  color: var(--mac-slate-600);
  background-color: var(--mac-white);
  border: var(--mac-hairline) solid var(--mac-filet);
  border-radius: 6px;
}

.mac-browser__url svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.mac-browser__shot {
  display: block;
  width: 100%;
  height: auto;
}

/* Téléphone dessiné à 292 × 596 px puis réduit, comme dans v3 */
.mac-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 292px;
  height: 596px;
  padding: 11px;
  border-radius: 46px;
  background-color: var(--mac-marine-950);
  box-shadow: 0 60px 100px -42px rgb(6 24 44 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.08);
  transform: scale(0.62);
  transform-origin: right bottom;
}

.mac-phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  color: var(--mac-white);
  background-color: var(--mac-marine-900);
}

.mac-phone__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 5;
  width: 102px;
  height: 25px;
  border-radius: 999px;
  background-color: #030D18;
  transform: translateX(-50%);
}

.mac-phone__ui {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 44px 18px 18px;
  font-family: var(--mac-font-text);
  font-variant-numeric: tabular-nums lining-nums;
}

.mac-phone__top {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-brume-500);
}

.mac-phone__label {
  margin-top: 22px;
  font-size: 9.5px;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mac-or-300);
}

.mac-phone__balance {
  margin-top: 6px;
  font-size: 26px;
  font-weight: var(--mac-fw-medium);
  letter-spacing: -0.02em;
}

.mac-phone__delta {
  align-self: flex-start;
  margin-top: 9px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-hausse-clair);
  background-color: rgb(92 195 148 / 0.12);
  border: 1px solid rgb(92 195 148 / 0.3);
  border-radius: var(--mac-radius-pill);
}

.mac-phone__chart {
  width: 100%;
  height: 106px;
  margin: 14px 0 8px;
}

.mac-phone__chart .line {
  fill: none;
  stroke: var(--mac-or-500);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mac-phone__range {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.mac-phone__range span {
  padding: 4px 8px;
  font-size: 9px;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-brume-500);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--mac-radius-pill);
}

.mac-phone__range .is-on {
  color: var(--mac-marine-900);
  background-color: var(--mac-white);
  border-color: var(--mac-white);
}

.mac-phone__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mac-phone__pos {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: 13px;
}

.mac-phone__av {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--mac-font-display);
  font-size: 9.5px;
  font-weight: var(--mac-fw-bold);
  color: var(--mac-or-300);
  background-color: rgb(201 163 91 / 0.16);
  border-radius: 9px;
}

.mac-phone__name {
  flex: 1;
  min-width: 0;
}

.mac-phone__name b,
.mac-phone__val b {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: var(--mac-fw-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mac-phone__name span {
  font-size: 8.5px;
  color: var(--mac-brume-500);
}

.mac-phone__val {
  text-align: right;
}

.mac-phone__val span {
  font-size: 9px;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-hausse-clair);
}

@media (max-width: 640px) {
  .mac-devices {
    padding: 0 2rem 2rem 0;
  }

  .mac-phone {
    transform: scale(0.46);
  }
}


/* 16. Mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mac-draw {
    transform: none;
  }

  .mac-card:hover,
  .mac-card.is-hover {
    transform: none;
  }
}