/* ══════════════════════════════════════════════════════════════════════
   theme.css — LE SOCLE. Tokens, reset, typographie de base.
   ─────────────────────────────────────────────────────────────────────
   Point d'entrée UNIQUE du design system. Tout ce qui est une décision
   visuelle transverse (couleur, rayon, ombre, espacement, focus, motion)
   se règle ici et nulle part ailleurs.

   Les couleurs codées en dur dans les templates sont une dette : chaque
   `#10b981` ou `#fee2e2` écrit à la main est un endroit que le mode
   sombre doit rattraper après coup (cf. legacy-dark.css). Quand tu
   touches un template, remplace ces valeurs par les tokens sémantiques
   ci-dessous — c'est la seule façon de faire maigrir le rattrapage.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Identité de marque ────────────────────────────────────────────
       Le navy et l'or de La Bonne Société. Ne changent pas avec le
       thème : ce sont les couleurs du club, pas des couleurs d'interface. */
    --navy: #0f2240;
    --navy-mid: #1e3a5f;
    --gold: #c9a84c;
    --gold-lt: #e8cc84;

    /* ── Surfaces ──────────────────────────────────────────────────────
       Quatre niveaux, du fond de page à l'élément le plus détaché.
       `--surface-2` sert aux zones EN CREUX dans une carte (un encart,
       une liste interne) ; `--elevated` aux éléments qui flottent
       au-dessus de tout (modale, popover, menu). */
    --bg: #eef2f9;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --elevated: #ffffff;

    /* ── Texte ─────────────────────────────────────────────────────────
       Trois niveaux seulement. `--faint` est réservé aux métadonnées
       (horodatage, compteur) : ne l'utilise jamais pour du contenu. */
    --text: #16283d;
    --muted: #566a80;
    --faint: #6d7f96;   /* remonté : à #8494a8 il tombait sous 3:1 */
    --text-muted: #566a80;   /* alias historique (availability.html) */

    /* ── Traits ────────────────────────────────────────────────────────
       `--border` est volontairement discret : dans ce design, ce qui
       sépare deux blocs, c'est l'espace et l'ombre, pas un trait.
       Ne monte à `--border-strong` que si le trait porte une info
       (bordure d'un champ, séparateur de tableau dense). */
    --border: #e3e9f1;
    --border-strong: #cdd7e5;
    /* Bordure des CARTES, à part du reste. En clair elle est transparente :
       c'est l'ombre qui détache la carte du fond, et le cerne de 1px sur
       chaque bloc — le marqueur visuel le plus daté de l'ancienne interface
       — disparaît. En sombre l'ombre ne se voit plus, la bordure revient.
       Un seul token pour les deux cas, donc aucune liste de sélecteurs à
       maintenir. */
    --card-border: transparent;

    /* ── Accent (couleur d'action) ─────────────────────────────────────
       En clair c'est le navy ; en sombre il s'inverse en bleu pâle pour
       rester lisible EN TANT QUE TEXTE. D'où deux familles séparées :
       `--accent*` = accent lisible sur le fond de page,
       `--action*` = fond d'un bouton plein, avec son texte contrasté. */
    --accent: #0f2240;
    --accent-mid: #1e3a5f;
    --action: #14294a;
    /* Le survol doit SE VOIR. #1e3a5f n'était qu'à 1,26:1 du repos — sur un
       bouton de cette taille, l'œil ne le distingue pas et le bouton paraît
       mort. #2a5187 (1,8:1) restait discret à l'usage : on est à 2,5:1, ce qui
       se voit franchement, et le texte blanc y tient encore 5,8:1. */
    --action-hover: #36679f;
    --action-fg: #ffffff;

    /* ── Couleurs sémantiques ──────────────────────────────────────────
       Chaque état a un trio fond / texte / bordure. Les fonds sont en
       rgba() : ils se posent sur n'importe quelle surface et tiennent
       donc dans les DEUX thèmes sans être redéfinis — seuls le texte et
       la bordure changent plus bas.
       Utilise-les à la place des paires (#d1fae5, #065f46), (#fee2e2,
       #991b1b), (#fef3c7, #92400e) qu'on trouve partout. */
    --success: #10b981;
    /* Vert d'un bouton PLEIN sous du texte blanc. `--success` est trop vif
       pour ça (2,5:1). Ce ton ne s'inverse pas d'un thème à l'autre : un
       bouton plein garde son fond, seul son environnement change. */
    --success-solid: #0a7a5a;
    --success-bg: rgba(16, 185, 129, .12);
    --success-fg: #047857;
    --success-border: rgba(16, 185, 129, .30);

    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, .10);
    --danger-fg: #b91c1c;
    --danger-border: rgba(220, 38, 38, .28);

    --warn: #f59e0b;
    --warn-bg: rgba(245, 158, 11, .14);
    --warn-fg: #92400e;
    --warn-border: rgba(245, 158, 11, .34);

    --info: #2563eb;
    --info-bg: rgba(37, 99, 235, .10);
    --info-fg: #1d4ed8;
    --info-border: rgba(37, 99, 235, .26);

    /* Violet : les moments qui se fêtent (jalons, hauts faits). Ni une
       alerte, ni une info — il manquait un ton pour ça, et le fil du club
       le codait en rose saturé dans chaque variante. */
    --special: #a855f7;
    --special-bg: rgba(168, 85, 247, .12);
    --special-fg: #7e22ce;
    --special-border: rgba(168, 85, 247, .30);

    --gold-bg: rgba(201, 168, 76, .16);
    --gold-fg: #8a6a1f;
    --gold-border: rgba(201, 168, 76, .40);

    /* Alias historiques : `--red` / `--green` sont utilisés ~74 fois. */
    --red: #d93025;
    --green: #10b981;

    /* ── Rayons ────────────────────────────────────────────────────────
       Avant : 8, 10, 14, 6, 9, 20, 12, 7, 16, 5, 4, 11, 18px au hasard.
       Cinq crans, c'est tout. Le rayon dit la TAILLE de l'élément :
       une pastille prend `sm`, une carte `lg`, une modale `xl`. */
    --r-xs: 6px;
    --r-sm: 9px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 999px;

    /* ── Ombres ────────────────────────────────────────────────────────
       Deux couches chacune (un contact net + une diffusion large) et
       teintées navy plutôt que noires : une ombre grise sur un fond
       bleuté sale l'image. L'élévation remplace la bordure. */
    --sh-1: 0 1px 2px rgba(15, 34, 64, .04), 0 1px 3px rgba(15, 34, 64, .06);
    --sh-2: 0 2px 4px rgba(15, 34, 64, .04), 0 4px 12px rgba(15, 34, 64, .07);
    --sh-3: 0 4px 8px rgba(15, 34, 64, .05), 0 12px 28px rgba(15, 34, 64, .10);
    --sh-4: 0 8px 16px rgba(15, 34, 64, .08), 0 24px 56px rgba(15, 34, 64, .16);

    /* ── Espacements ───────────────────────────────────────────────────
       Échelle de 4px. Sert aux nouveaux composants ; les templates
       existants gardent leurs rem le temps de la migration. */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

    /* ── Typographie ───────────────────────────────────────────────────
       Deux familles, inchangées : DM Sans pour le texte, DM Serif
       Display pour les titres de marque. Les fallbacks emoji sont
       nécessaires — l'app en est truffée (badges, statuts, nav). */
    --font: 'DM Sans', system-ui, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-display: 'DM Serif Display', Georgia, serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';

    --fs-xs: .72rem;
    --fs-sm: .82rem;
    --fs-base: .94rem;
    --fs-lg: 1.06rem;
    --fs-xl: clamp(1.15rem, 1rem + .6vw, 1.35rem);
    --fs-2xl: clamp(1.4rem, 1.15rem + 1.1vw, 1.8rem);
    --fs-3xl: clamp(1.7rem, 1.3rem + 1.9vw, 2.4rem);

    /* ── Focus ─────────────────────────────────────────────────────────
       Un seul anneau pour toute l'app, appliqué en :focus-visible (donc
       invisible à la souris, présent au clavier). */
    --ring: 0 0 0 3px rgba(30, 58, 95, .30);
    --ring-danger: 0 0 0 3px rgba(220, 38, 38, .28);

    /* ── Mouvement ─────────────────────────────────────────────────────
       Une courbe qui démarre vite et finit doucement : les transitions
       paraissent réactives sans être sèches. */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --dur-1: .12s;
    --dur-2: .2s;
    --dur-3: .32s;

    /* Hauteur du bandeau supérieur (`.topbar`, sticky en haut de page).
       Exposée en variable pour que tout élément qui se cale en haut
       (`position: sticky`) puisse se poser SOUS lui au lieu de glisser
       dessous. Doit rester synchro avec le `min-height` de .topbar.
       Le `env()` suit le padding haut de la barre sur les écrans à
       encoche : sans lui, tout ce qui se cale dessous glisserait
       dessous en PWA iOS. Vaut 0 partout ailleurs. */
    --topbar-h: calc(56px + env(safe-area-inset-top, 0px));

    /* ── Rampe de surfaces neutres (héritée) ───────────────────────────
       Les fonds blancs/gris codés en dur dans les templates ont été
       mappés sur ces variables lors d'un sweep précédent. Elles sont
       maintenant recalées sur la nouvelle rampe neutre — mêmes écarts de
       clarté, teinte assainie. Pour du NOUVEAU code, prends
       --surface / --surface-2 : cette rampe n'existe que pour finir de
       mourir avec les templates non migrés. */
    --s-fff:    #ffffff;  --s-f9fafb: #fbfcfe;  --s-fafbfc: #fbfcfe;
    --s-fafbfd: #fbfcfe;  --s-f8fafc: #f8fafd;  --s-f1f5f9: #f1f4fa;
    --s-f4f7fb: #f5f8fc;  --s-f0f4f8: #f2f5fa;  --s-eef2f7: #f3f6fa;
    --s-eef3fa: #eef3fb;  --s-e8edf3: #e9eef6;  --s-e2e8f0: #e4eaf3;
    --s-e5e7eb: #e7ebf2;  --s-d1d5db: #d5dce7;  --s-cbd5e1: #cfd8e5;
}

/* ══════════════════════════════════════════════════════════════════════
   Mode sombre — bleu nuit, pas noir.
   ─────────────────────────────────────────────────────────────────────
   Un seul sélecteur : `[data-theme="dark"]`, posé sur <html> par le
   serveur (préférence du profil) ou par le script d'amorçage de
   base.html quand la préférence est « système ». Ne jamais ajouter de
   `@media (prefers-color-scheme)` ici : ça créerait une SECONDE source
   de vérité, et legacy-dark.css ne l'écoute pas.
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg: #14202d;
    --surface: #1e2a3e;
    --surface-2: #1a2638;
    --elevated: #24314a;

    --text: #e6ecf3;
    --muted: #93a4bd;
    --faint: #7288a5;
    --text-muted: #93a4bd;

    --border: #2e3d57;
    --border-strong: #3d5074;
    --card-border: #2e3d57;

    /* L'accent s'inverse : bleu pâle, lisible en texte sur fond nuit. */
    --accent: #cfe0f7;
    --accent-mid: #a5c3ea;
    /* Le bouton plein, lui, reste clair sur fond sombre : c'est
       l'inverse du clair, et le texte repasse en navy. */
    --action: #cfe0f7;
    /* En sombre le bouton est déjà clair : impossible d'aller beaucoup plus
       loin vers le blanc. On sature au lieu d'éclaircir — seule direction qui
       donne de l'écart sans perdre l'identité bleue : 1,7:1, texte à 7:1. Le
       relief et le léger soulèvement au survol complètent, l'écart de teinte
       disponible étant plus faible qu'en thème clair. */
    --action-hover: #7fb0ea;
    --action-fg: #10233f;

    --gold: #d8b95e;
    --gold-lt: #f0d68a;
    --red: #f87171;
    --green: #34d399;

    /* Seuls le texte et la bordure changent : les fonds rgba() du mode
       clair tiennent tels quels sur les surfaces sombres. */
    --success-fg: #5eddb0;
    --success-border: rgba(52, 211, 153, .34);
    --danger-fg: #fca5a5;
    --danger-border: rgba(248, 113, 113, .34);
    --warn-fg: #fcd34d;
    --warn-border: rgba(252, 211, 77, .34);
    --info-fg: #93c5fd;
    --info-border: rgba(147, 197, 253, .32);
    --gold-fg: #e8cc84;
    --gold-border: rgba(216, 185, 94, .42);
    --special-fg: #d8b4fe;
    --special-border: rgba(216, 180, 254, .34);

    /* Ombres : sur fond sombre une ombre teintée ne se voit pas, il faut
       du noir franc et plus dense. */
    --sh-1: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .24);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .34), 0 6px 16px rgba(0, 0, 0, .28);
    --sh-3: 0 4px 10px rgba(0, 0, 0, .38), 0 14px 32px rgba(0, 0, 0, .34);
    --sh-4: 0 10px 22px rgba(0, 0, 0, .44), 0 28px 64px rgba(0, 0, 0, .48);

    --ring: 0 0 0 3px rgba(165, 195, 234, .34);

    /* Rampe neutre en sombre, étagée par profondeur : les near-white
       (cartes) tombent sur surface ; les gris très clairs (panneaux en
       creux) un cran plus sombre ; les gris moyens (pastilles) un cran
       plus CLAIR que les cartes, pour l'effet « posé dessus ». */
    --s-fff:    #1e2a3e;  --s-f9fafb: #1e2a3e;  --s-fafbfc: #1e2a3e;
    --s-fafbfd: #1e2a3e;  --s-f8fafc: #1a2638;  --s-f1f5f9: #1a2638;
    --s-f4f7fb: #1a2638;  --s-f0f4f8: #1a2638;  --s-eef2f7: #1a2638;
    --s-eef3fa: #243349;  --s-e8edf3: #2a3a55;  --s-e2e8f0: #2a3a55;
    --s-e5e7eb: #2a3a55;  --s-d1d5db: #34465f;  --s-cbd5e1: #34465f;
}

/* ══════════════════════════════════════════════════════════════════════
   Reset & base
   ══════════════════════════════════════════════════════════════════════ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Transition douce au switch de thème. Volontairement limitée à la
       couleur : tout animer ferait glisser les layouts au chargement. */
    transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    /* 15px : conservé tel quel. Le monter reflowerait 40 templates dont
       les largeurs sont calées à la main. */
    font-size: 15px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    /* Lissage : sans ça, DM Sans en 500/600 bave un peu sur macOS. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Les chiffres (scores, kotis, compteurs) ne doivent pas gigoter
       d'un rendu à l'autre. */
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] body { color-scheme: dark; }

/* Les titres passent en display et se resserrent : un titre moderne est
   large en taille et court en interlignage. */
h1, h2, h3 {
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* ── Focus visible, une seule fois pour toute l'app ─────────────────────
   `:focus-visible` et pas `:focus` : l'anneau n'apparaît qu'au clavier,
   jamais au clic souris. Le `outline: none` seul (répandu dans les
   templates) rendait l'app inutilisable au clavier. */
:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--ring);
    border-radius: var(--r-xs);
}

/* ── Sélection de texte, aux couleurs de la marque ──────────────────── */
::selection {
    background: var(--gold-bg);
    color: var(--text);
}

/* ── Barres de défilement discrètes (WebKit + Firefox) ─────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--r-full);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--faint); }

/* ── Images : jamais de débordement horizontal ──────────────────────── */
img, svg, video { max-width: 100%; }

/* ── Respect du réglage système « réduire les animations » ──────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}