/* Balise — design system v0.2 (tour 2)
   Polices : Overpass 400–900, Overpass Mono 400–700 (Google Fonts, version figée à l'intégration).
   Thème : clair par défaut, sombre via prefers-color-scheme ou [data-theme="sombre"]. */

:root {
  /* Typographie */
  --b-font: 'Overpass', system-ui, sans-serif;
  --b-font-mono: 'Overpass Mono', ui-monospace, monospace;
  --b-fs-display: 32px;  --b-lh-display: 36px;  /* 800 */
  --b-fs-h1: 26px;       --b-lh-h1: 30px;       /* 800 — nom du circuit */
  --b-fs-h2: 20px;       --b-lh-h2: 26px;       /* 800 */
  --b-fs-h3: 17px;       --b-lh-h3: 24px;       /* 700 */
  --b-fs-body: 16px;     --b-lh-body: 24px;     /* 400 ; 17px sur téléphone */
  --b-fs-small: 14px;    --b-lh-small: 20px;
  --b-fs-caption: 12px;  --b-lh-caption: 16px;  /* 700, capitales, +0.06em */
  --b-fs-num: 20px;      --b-lh-num: 26px;      /* mono 600 */
  --b-fs-num-s: 15px;    --b-lh-num-s: 22px;    /* mono 600 */
  --b-tracking-caps: 0.06em;
  --b-caps-nudge: 2px;   /* Overpass : padding-top à ajouter aux libellés en capitales pour les centrer optiquement */

  /* Espacements */
  --b-space-1: 4px;  --b-space-2: 8px;  --b-space-3: 12px; --b-space-4: 16px;
  --b-space-5: 20px; --b-space-6: 24px; --b-space-7: 32px; --b-space-8: 48px;

  /* Rayons */
  --b-r-1: 3px;   /* pastilles, étiquettes */
  --b-r-2: 4px;   /* boutons, champs */
  --b-r-3: 8px;   /* cartes, fiches, menus */
  --b-r-4: 14px;  /* panneau glissant sur téléphone */
  --b-r-pill: 999px;

  /* Tailles */
  --b-hit: 44px;        /* cible tactile minimale */
  --b-control: 48px;    /* champs, boutons principaux */
  --b-panel: 420px;     /* panneau latéral, ordinateur */
  --b-border: 2px;      /* contours des champs et boutons secondaires */

  /* Mouvement */
  --b-ease: cubic-bezier(.2, .7, .2, 1);
  --b-dur-fast: 120ms;
  --b-dur: 200ms;
  --b-dur-sheet: 320ms;
  --b-dur-fly: 1200ms;  /* vol vers un circuit : conservé même avec prefers-reduced-motion (demande du propriétaire) */

  /* Tracés : identiques dans les deux thèmes (dessinés sur la carte IGN) */
  --b-trace-facile: #1565D8;
  --b-trace-moyen: #D3202A;
  --b-trace-difficile: #15171A;
  --b-trace-casing: #FFFFFF;
  --b-trace-dim: #8A8D93;      /* tracés estompés quand un circuit est choisi */
  --b-trace-highlight: #F5C400; /* tronçon surligné (sol / voie) */
  --b-trace-w: 3.4px;   --b-trace-casing-w: 6.6px;
  --b-trace-w-hover: 5.5px; --b-trace-casing-w-hover: 9.5px;
  --b-trace-w-sel: 6px; --b-trace-casing-w-sel: 10px;
  --b-trace-w-dim: 2px; --b-trace-dim-opacity: .6;

  /* Thème clair */
  --b-bg: #F4F2EC;
  --b-surface: #FFFFFF;
  --b-surface-2: #ECE9E1;
  --b-line: #D9D5CA;
  --b-line-strong: #15171A;
  --b-ink: #15171A;
  --b-ink-2: #545860;
  --b-ink-3: #8E9096;
  --b-accent: #F5C400;
  --b-accent-hover: #E6B800;
  --b-accent-active: #CCA300;
  --b-on-accent: #15171A;
  --b-accent-border: #15171A;
  --b-focus: #15171A;
  --b-scrim: rgba(21, 23, 26, .48);

  --b-warn-bg: #FFF3BF;  --b-warn-ink: #5C4A00;  --b-warn-line: #E9D57A;
  --b-danger-bg: #FCE8E6; --b-danger-ink: #8C1D18; --b-danger-line: #F1B8B3;
  --b-info-bg: #E7EFFB;  --b-info-ink: #0F3F86;  --b-info-line: #B8CDEE;

  --b-sol-revetu: #545860;
  --b-sol-stabilise: #A98A52;
  --b-sol-naturel: #5E8A35;
  --b-sol-inconnu: #E2DED3;

  --b-shadow-1: 0 1px 2px rgba(21, 23, 26, .10), 0 1px 1px rgba(21, 23, 26, .06);
  --b-shadow-2: 0 6px 20px rgba(21, 23, 26, .16);
  --b-shadow-3: 0 -6px 28px rgba(21, 23, 26, .18);

  --b-map-filter: none;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --b-bg: #111214;
    --b-surface: #1A1C1F;
    --b-surface-2: #24272B;
    --b-line: #2D3035;
    --b-line-strong: #F2F0EA;
    --b-ink: #F2F0EA;
    --b-ink-2: #AEB0B4;
    --b-ink-3: #6C6F75;
    --b-accent-hover: #FFD21F;
    --b-accent-active: #E0B400;
    --b-accent-border: transparent;
    --b-focus: #F5C400;
    --b-scrim: rgba(0, 0, 0, .6);
    --b-warn-bg: #3B3410;  --b-warn-ink: #FBE7A1;  --b-warn-line: #6B5D1A;
    --b-danger-bg: #3D1A1A; --b-danger-ink: #FFB4AB; --b-danger-line: #6E2B28;
    --b-info-bg: #142338;  --b-info-ink: #B4D0FF;  --b-info-line: #2B4567;
    --b-sol-revetu: #AEB0B4;
    --b-sol-stabilise: #C9A86A;
    --b-sol-naturel: #8FB35A;
    --b-sol-inconnu: #34373C;
    --b-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --b-shadow-2: 0 8px 24px rgba(0, 0, 0, .55);
    --b-shadow-3: 0 -8px 32px rgba(0, 0, 0, .6);
    --b-map-filter: brightness(.78) contrast(1.06) saturate(.85);
    color-scheme: dark;
  }
}

:root[data-theme="sombre"] {
  --b-bg: #111214;
  --b-surface: #1A1C1F;
  --b-surface-2: #24272B;
  --b-line: #2D3035;
  --b-line-strong: #F2F0EA;
  --b-ink: #F2F0EA;
  --b-ink-2: #AEB0B4;
  --b-ink-3: #6C6F75;
  --b-accent-hover: #FFD21F;
  --b-accent-active: #E0B400;
  --b-accent-border: transparent;
  --b-focus: #F5C400;
  --b-scrim: rgba(0, 0, 0, .6);
  --b-warn-bg: #3B3410;  --b-warn-ink: #FBE7A1;  --b-warn-line: #6B5D1A;
  --b-danger-bg: #3D1A1A; --b-danger-ink: #FFB4AB; --b-danger-line: #6E2B28;
  --b-info-bg: #142338;  --b-info-ink: #B4D0FF;  --b-info-line: #2B4567;
  --b-sol-revetu: #AEB0B4;
  --b-sol-stabilise: #C9A86A;
  --b-sol-naturel: #8FB35A;
  --b-sol-inconnu: #34373C;
  --b-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --b-shadow-2: 0 8px 24px rgba(0, 0, 0, .55);
  --b-shadow-3: 0 -8px 32px rgba(0, 0, 0, .6);
  --b-map-filter: brightness(.78) contrast(1.06) saturate(.85);
  color-scheme: dark;
}

/* Fond de carte : atténué en sombre, jamais inversé (les couleurs IGN restent reconnaissables). */
.leaflet-tile-pane { filter: var(--b-map-filter); }

/* Focus visible commun */
:focus-visible { outline: 3px solid var(--b-focus); outline-offset: 2px; }