/* ==========================================================================
   JETONS — repris de l'application (frontend/src/styles/tokens.css)

   La vitrine et l'application partagent le même système. Les valeurs ne sont
   pas réinventées ici : elles sont recopiées à l'identique pour qu'un
   dirigeant qui crée son compte ne sente aucune rupture.

   Seule liberté prise : les fontes sont auto-hébergées plutôt que chargées
   depuis le CDN Google, pour garder `font-src 'self'` dans la politique de
   sécurité et ne pas transmettre l'adresse IP des visiteurs à un tiers sur une
   page qui parle de protection des données.
   ========================================================================== */

/* --- Barlow, sous-ensemble latin uniquement (couvre le français, œ compris) */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/barlow/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/barlow/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow/barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow/barlow-condensed-700.woff2') format('woff2');
}

:root {
  /* surfaces et neutres — papier chaud, teinte 95 */
  --surface-canvas: oklch(0.968 0.004 95);
  --surface-default: oklch(1 0 0);
  --surface-sunken: oklch(0.938 0.005 95);
  --surface-hover: oklch(0.955 0.004 95);
  --surface-selected: oklch(0.925 0.008 95);
  --surface-zebra: oklch(0.978 0.004 95);

  --line-subtle: oklch(0.925 0.005 95);
  --line-default: oklch(0.885 0.006 95);
  --line-strong: oklch(0.800 0.008 95);

  --text-default: oklch(0.240 0.012 250);
  --text-muted: oklch(0.460 0.012 250);
  --text-subtle: oklch(0.550 0.010 250);

  /* Action : de l'encre, jamais une couleur */
  --ink: oklch(0.260 0.015 250);
  --ink-hover: oklch(0.190 0.015 250);
  --ink-active: oklch(0.160 0.015 250);
  --on-ink: oklch(0.985 0 0);

  /* focus achromatique : lisible sur n'importe quel fond */
  --focus-ring: oklch(0.200 0.010 250);
  --focus-ring-inner: oklch(1 0 0);
  --focus-shadow: 0 0 0 2px var(--focus-ring-inner),
                  0 0 0 5px var(--focus-ring);

  /* statuts de présence — propriété du produit, jamais décoratifs */
  --status-present: oklch(0.520 0.130 150);
  --status-present-on: oklch(0.985 0 0);
  --status-present-tint: oklch(0.945 0.040 150);
  --status-present-border: oklch(0.560 0.100 150);
  --status-present-text: oklch(0.350 0.090 150);
  --status-late: oklch(0.680 0.145 70);
  --status-late-on: oklch(0.200 0.050 70);
  --status-late-tint: oklch(0.955 0.045 70);
  --status-late-border: oklch(0.560 0.100 70);
  --status-late-text: oklch(0.400 0.090 70);
  --status-excused: oklch(0.500 0.075 258);
  --status-excused-on: oklch(0.985 0 0);
  --status-excused-tint: oklch(0.945 0.020 258);
  --status-excused-border: oklch(0.560 0.060 258);
  --status-excused-text: oklch(0.360 0.055 258);
  --status-unexcused: oklch(0.520 0.175 25);
  --status-unexcused-on: oklch(0.985 0 0);
  --status-unexcused-tint: oklch(0.945 0.045 25);
  --status-unexcused-border: oklch(0.560 0.130 25);
  --status-unexcused-text: oklch(0.400 0.130 25);
  --status-unavailable: oklch(0.470 0.008 250);
  --status-unavailable-on: oklch(0.985 0 0);
  --status-unavailable-tint: oklch(0.925 0.004 250);
  --status-unavailable-border: oklch(0.550 0.008 250);
  --status-unavailable-text: oklch(0.380 0.010 250);

  /* sémantiques — alias des statuts, résolus à l'usage par thème */
  --feedback-success: var(--status-present);
  --feedback-warning: var(--status-late);
  --feedback-danger: var(--status-unexcused);
  --feedback-info: var(--status-excused);
  --feedback-success-tint: var(--status-present-tint);
  --feedback-success-border: var(--status-present-border);
  --feedback-success-text: var(--status-present-text);
  --feedback-success-on: var(--status-present-on);
  --feedback-warning-tint: var(--status-late-tint);
  --feedback-warning-border: var(--status-late-border);
  --feedback-warning-text: var(--status-late-text);
  --feedback-warning-on: var(--status-late-on);
  --feedback-danger-tint: var(--status-unexcused-tint);
  --feedback-danger-border: var(--status-unexcused-border);
  --feedback-danger-text: var(--status-unexcused-text);
  --feedback-danger-on: var(--status-unexcused-on);
  --feedback-info-tint: var(--status-excused-tint);
  --feedback-info-border: var(--status-excused-border);
  --feedback-info-text: var(--status-excused-text);
  --feedback-info-on: var(--status-excused-on);

  /* emplacements club — la vitrine emploie ceux du club de démonstration */
  --club-primary: oklch(0.430 0.140 262);
  --club-primary-on: oklch(0.985 0 0);
  --club-secondary: oklch(0.780 0.150 92);
  --club-secondary-on: oklch(0.220 0.050 92);
  --club-accent: oklch(0.350 0.060 262);
  --club-accent-on: oklch(0.985 0 0);

  /* typographie */
  --font-sans: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow', 'Helvetica Neue Condensed',
      'Arial Narrow', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --type-display: 700 52px/0.94 var(--font-display);
  --type-title-l: 600 30px/1.05 var(--font-display);
  --type-title-m: 600 20px/1.25 var(--font-sans);
  --type-title-s: 600 17px/1.3 var(--font-sans);
  --type-body: 400 15px/1.45 var(--font-sans);
  --type-body-s: 400 13px/1.4 var(--font-sans);
  --type-label: 700 11px/1.2 var(--font-sans);
  --type-action: 700 14px/1 var(--font-sans);
  --type-numeric: 600 34px/1 var(--font-display);
  --tracking-label: 0.12em;
  --tracking-action: 0.02em;

  /* espacement, cibles, rayons */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --control-h-xs: 28px;    --control-h-sm: 34px;
  --control-h-md: 40px;    --control-h-lg: 48px;
  --control-h-touch: 56px; --row-h-touch: 76px;
  --tap-min: 44px;
  --radius-0: 0; --radius-1: 2px; --radius-2: 4px;
  --radius-3: 6px; --radius-full: 999px;
  --border-w: 1px; --border-w-control: 1.5px; --focus-w: 3px;
  --line-dashed: var(--line-strong);
  --dash-style: dashed;

  /* ombres — élévation réelle seulement */
  --shadow-1: 0 1px 2px oklch(0.24 0.012 250 / 0.10);
  --shadow-2: 0 2px 6px -1px oklch(0.24 0.012 250 / 0.14),
              0 1px 0 oklch(0.24 0.012 250 / 0.06);
  --shadow-3: 0 16px 40px -12px oklch(0.24 0.012 250 / 0.30);

  /* mouvement */
  --duration-1: 90ms;
  --duration-2: 150ms;
  --duration-3: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.15, 0.6, 0.25, 1);

  /* ordre d'empilement — aucune valeur hors de cette échelle */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-bar: 200;
  --z-drawer: 300;
  --z-dropdown: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* inactivité */
  --opacity-disabled: 0.55;
  --opacity-overlay: 0.55;

  /* Largeurs de la vitrine. Les pages publiques de l'application se tiennent à
     1240 ; une vitrine respire plus large. On s'arrête sous --bp-wide (1600), au
     delà duquel le système dit que plus rien ne s'élargit. Les blocs de texte
     gardent leurs propres limites : c'est la mise en page qui s'étend, pas les
     paragraphes. */
  --page-max: 1680px;
  --page-gutter: var(--space-8);
}

/* Le bloc sombre de la section « couleurs du club » porte cette classe.
   La vitrine n'a pas de bascule de thème : c'est l'application qui en a une,
   et ce bloc sert précisément à le montrer. */
[data-theme='dark'],
.dark {
  --surface-canvas: oklch(0.185 0.008 250);
  --surface-default: oklch(0.235 0.009 250);
  --surface-sunken: oklch(0.155 0.008 250);
  --surface-hover: oklch(0.275 0.010 250);
  --surface-selected: oklch(0.305 0.012 250);
  --surface-zebra: oklch(0.205 0.009 250);
  --line-subtle: oklch(0.285 0.010 250);
  --line-default: oklch(0.330 0.010 250);
  --line-strong: oklch(0.440 0.012 250);
  --text-default: oklch(0.965 0.003 250);
  --text-muted: oklch(0.780 0.008 250);
  --text-subtle: oklch(0.680 0.008 250);
  --ink: oklch(0.930 0.005 250);
  --ink-hover: oklch(1 0 0);
  --ink-active: oklch(0.840 0.005 250);
  --on-ink: oklch(0.200 0.012 250);
  --focus-ring: oklch(1 0 0);
  --focus-ring-inner: oklch(0.150 0.008 250);

  --status-present: oklch(0.640 0.145 150);
  --status-present-on: oklch(0.160 0.030 150);
  --status-present-tint: oklch(0.300 0.055 150);
  --status-present-border: oklch(0.600 0.100 150);
  --status-present-text: oklch(0.930 0.040 150);
  --status-late: oklch(0.760 0.150 70);
  --status-late-on: oklch(0.180 0.040 70);
  --status-late-tint: oklch(0.330 0.060 70);
  --status-late-border: oklch(0.620 0.110 70);
  --status-late-text: oklch(0.940 0.045 70);
  --status-excused: oklch(0.640 0.080 258);
  --status-excused-on: oklch(0.160 0.020 258);
  --status-excused-tint: oklch(0.300 0.035 258);
  --status-excused-border: oklch(0.600 0.065 258);
  --status-excused-text: oklch(0.930 0.020 258);
  --status-unexcused: oklch(0.560 0.175 25);
  --status-unexcused-on: oklch(0.985 0 0);
  --status-unexcused-tint: oklch(0.310 0.070 25);
  --status-unexcused-border: oklch(0.600 0.150 25);
  --status-unexcused-text: oklch(0.935 0.040 25);
  --status-unavailable: oklch(0.600 0.008 250);
  --status-unavailable-on: oklch(0.160 0.008 250);
  --status-unavailable-tint: oklch(0.300 0.008 250);
  --status-unavailable-border: oklch(0.600 0.010 250);
  --status-unavailable-text: oklch(0.925 0.004 250);

  --club-primary: oklch(0.640 0.130 262);
  --club-secondary: oklch(0.720 0.140 92);
  --club-accent: oklch(0.520 0.070 262);

  /* en sombre l'élévation passe par la bordure, pas par l'ombre */
  --shadow-1: 0 0 0 1px oklch(0.330 0.010 250);
  --shadow-2: 0 2px 8px -2px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.330 0.010 250);
  --shadow-3: 0 20px 48px -12px oklch(0 0 0 / 0.70), 0 0 0 1px oklch(0.380 0.010 250);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-1: 0ms; --duration-2: 0ms; --duration-3: 0ms; }

  /* 0,01 ms plutôt que 0 : une animation de durée nulle peut ne jamais émettre
     son événement de fin, et du code qui l'attend resterait bloqué. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   PALETTE DE LA VITRINE — proposition Claude Design du 21/09/2026, retenue
   telle quelle par le client (sans l'option du bouton bleu dans le hero).

   Décor seulement : aucun de ces jetons ne signifie un état — les états, ce
   sont les cinq statuts. #0076F1 a la teinte exacte d'« Excusé » (257 / 258),
   les verts approchent « Présent », l'orange tombe entre « Retard » et « Non
   excusé » : aucune de ces couleurs n'entre dans une section qui montre des
   pastilles ou des captures (hero, « Chacun son écran », « Là où le tableur
   s'arrête »), ni sur une action, ni en dégradé.

   Deux étages : les cinq couleurs brutes, puis les emplois nommés. Les feuilles
   de style n'appellent que les emplois — une couleur ne se répand pas ailleurs
   sans décision.
   ========================================================================== */

:root {
  --brand-blue:        oklch(0.584 0.205 257); /* #0076F1 — grands chiffres, fond clair */
  --brand-blue-light:  oklch(0.784 0.101 244); /* #7FC0F5 — décor clair ; texte sur ardoise seulement */
  --brand-green:       oklch(0.581 0.113 134); /* #5E8940 — filets et aplats, jamais de texte */
  --brand-green-deep:  oklch(0.479 0.091 133); /* #49682F — seul à porter du petit texte sur fond clair */
  --brand-orange:      oklch(0.611 0.159 43);  /* #CF5C27 — signature, un seul usage sur la page */

  --decor-step-number: var(--brand-blue);       /* numéros des quatre étapes */
  --decor-figure:      var(--brand-blue-light); /* trame de points et anneaux autour du portable */
  --decor-figure-tint: oklch(0.955 0.030 244);  /* le disque, version très pâle du décor */
  --plan-rule:         var(--brand-green);      /* filet de tête des cartes de formule */
  --plan-note:         var(--brand-green-deep); /* mentions de prix secondaires, fond clair */
  --plan-accent-dark:  var(--brand-blue-light); /* étiquette et montant de la carte Starter */
  --plan-accent-dark-on: oklch(0.308 0.055 247); /* #16324A — texte posé sur cette étiquette */
  --readbar:           var(--brand-orange);     /* barre de lecture */
  --link-accent:       var(--brand-green-deep); /* liens au survol, sur fond clair (ajout du 21/09) */
  --section-tint:      var(--decor-figure-tint); /* fond de la section « Quatre étapes » (essai du 21/09) */
}

/* Thème sombre : seul --plan-note change de porteur. Sur ardoise, #49682F tombe
   à 2,57 : il cède la place au bleu clair. */
[data-theme='dark'],
.dark {
  --plan-note: var(--brand-blue-light);
}

/* ==========================================================================
   SURCOUCHE « PEPS » — transposée de la maquette du 03/10/2026

   La maquette écrivait ses couleurs en dur (#fff, #E8F4FD, #C5E3FA, des oklch
   isolés). Elles sont nommées ici, sans quoi le thème sombre n'aurait rien à
   redéfinir. Les valeurs sont celles de la maquette, à l'identique.
   ========================================================================== */
:root {
  /* Les fonds quittent le papier crème (teinte 95) pour un gris froid, de la
     même famille que l'ardoise et le bleu de la marque. */
  --surface-canvas: oklch(0.968 0.003 264);
  --surface-sunken: oklch(0.950 0.004 264);
  --surface-hover:  oklch(0.958 0.003 264);
  --line-subtle:    oklch(0.910 0.004 264);
  --line-default:   oklch(0.885 0.005 264);
  --line-strong:    oklch(0.800 0.007 264);

  --brand-blue-hover:   oklch(0.520 0.195 257); /* survol du bouton principal */
  --brand-blue-wash:    oklch(0.955 0.025 244); /* #E8F4FD — carte Starter, survols */
  --decor-line-on-tint: oklch(0.900 0.045 240); /* #C5E3FA — verticale au-dessus de la bande */
  --import-disc:        oklch(0.930 0.048 244); /* disque derrière l'écran du portable */

  /* Carte Starter : fond clair, donc ses propres jetons de texte et de ligne. */
  --plan-featured-bg:    var(--brand-blue-wash);
  --plan-featured-text:  oklch(0.250 0.045 244);
  --plan-featured-muted: oklch(0.340 0.050 244);
  --plan-featured-line:  oklch(0.880 0.040 240);

  /* Pied de page : ardoise profonde, texte blanc. */
  --footer-bg: oklch(0.155 0.008 250);

  /* Rayons propres à la vitrine. Écart assumé avec l'application, qui tourne
     entre 2 et 6 px : la vitrine respire, l'outil de travail reste sec. */
  --radius-control:    10px;
  --radius-control-lg: 12px;
  --radius-card:       14px;
}

/* En thème sombre, les quatre surfaces claires de la surcouche deviennent des
   ardoises : sans ça, des blocs clairs resteraient posés sur le fond sombre. */
[data-theme='dark'],
.dark {
  --brand-blue-wash:    oklch(0.308 0.045 247);
  --decor-line-on-tint: oklch(0.400 0.030 240);
  --import-disc:        oklch(0.300 0.035 244);
  --plan-featured-bg:    var(--surface-default);
  --plan-featured-text:  var(--text-default);
  --plan-featured-muted: var(--text-muted);
  --plan-featured-line:  var(--line-default);
  --footer-bg:           oklch(0.120 0.008 250);
}