/* v25 : charte graphique v2 (dossier charte-alafeelgood). Chargée en dernier : polices, typographie, composants
   (boutons, puces, épures à repères, onglets, toasts), vue GPS toujours sombre, cibles tactiles >= 44 px.
   Les jetons de couleur sont dans css/app.css (:root), le rayon unique de 4 px partout (var(--rayon)). */

/* ---------------------------------------------------------------- polices (OFL, hébergées en local, en cache SW) */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/polices/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/polices/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/polices/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("../vendor/polices/barlow-condensed-800-italique.woff2") format("woff2"); }

/* ---------------------------------------------------------------- typographie */
body { font-family: var(--font-texte); font-variant-numeric: tabular-nums; }
h1, h2, h3, .btn, .logotype { font-family: var(--font-titre); }
h1 { font-size: 2rem; font-weight: 800; font-style: italic; letter-spacing: 0; line-height: 1.1; }
h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: 0; }
h3 { font-size: 1.1rem; font-weight: 700; }
.titre-section { font-family: var(--font-titre); font-weight: 700; font-size: 1.2rem; }
.petit, .element .meta, .rapide .meta { font-weight: 400; }
/* micro-libellés : Barlow 600 majuscules +.12em */
.micro, .tuile .libelle, .stats-vedette small, .stat .l, .course .gros .l, .course .petit-cpt .l, .creer .stats-ligne .l, .rc-nom, .badge-diff,
.titre-groupe, .feuille-choix .intitule { font-family: var(--font-texte); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
/* chiffres : Barlow Condensed 700, chiffres tabulaires */
.tuile .valeur, .stats-vedette b, .stat .v, .course .gros .v, .course .petit-cpt .v, .creer .stats-ligne .v, .element .droite, .gros-val b,
.curseur .ligne b, .rc-val, .bf-chiffres b, .anneau text, .heros .pastille-info b, .fantome-cpt b, .splits .v, .classement b, .effort .temps {
  font-family: var(--font-titre); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tuile .valeur { font-size: 1.9rem; line-height: 1.05; }
.stats-vedette b { font-size: 1.9rem; line-height: 1.05; }

/* logotype « alafeelgood » (Condensed 800 italique, « feel » en Ciel acier / Bleu acier) et symbole Sprint */
.logotype { font-weight: 800; font-style: italic; letter-spacing: -.01em; color: var(--texte); text-transform: lowercase; }
.logotype span { color: var(--accent); }
:root[data-theme="soleil"]:not([data-guidage]) .logotype span { color: var(--marque); }
.symbole-sprint { display: block; color: var(--texte); overflow: visible; }
:root[data-theme="soleil"]:not([data-guidage]) .symbole-sprint .sillage-centre { stroke: #B7B7BA; }
.logo-connexion img { display: none; }
.logo-connexion .symbole-sprint { width: 120px; height: 57px; margin: 8px auto 6px; }
.logo-connexion h1.logotype { font-size: 2.6rem; margin: 0 0 4px; }
.logo-connexion .accroche { color: var(--texte2); margin: 0; }

/* ---------------------------------------------------------------- boutons */
.btn { border-radius: var(--rayon); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; }
.btn.compact { font-size: 1rem; min-height: 44px; }
.btn.lien { font-family: var(--font-texte); font-size: .95rem; min-height: 44px; }
.btn.primaire { box-shadow: none; }                           /* un seul bouton plein Ciel acier par écran */
.btn.danger { box-shadow: inset 0 0 0 1.5px var(--alerte); }  /* contour : le rouge plein est réservé à Terminer */
.btn.ok { background: var(--ok); color: var(--ok-texte); }    /* texte #111A24 sur vert (contraste 8,2 : 1) */
.btn.geant { min-height: 62px; font-size: 1.35rem; border-radius: var(--rayon); }
.btn-icone { border-radius: 50%; background: var(--surface); box-shadow: none; border: 1px solid var(--bord); }
.btn-icone.sombre { background: rgba(17, 26, 36, .82); border-color: rgba(148, 188, 227, .25); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.btn-icone.actif, .btn-icone.sombre.actif { border-color: var(--accent); }
.lancer-rond { box-shadow: none; }
.btn.petit, .alerte-seg .btn.petit { min-height: 44px; }      /* cibles tactiles >= 44 px (§ 10 n° 11) */

/* ---------------------------------------------------------------- puces, segments, champs */
.puce { border-radius: var(--rayon); font-weight: 600; }
.puce.type.actif { color: #111A24; }
.puce.type.actif .ico { color: #111A24; }
.segments { background: var(--bg); border: 1px solid var(--bord); border-radius: var(--rayon); }
.segments button { border-radius: var(--rayon); font-weight: 600; min-height: 44px; }
.segments.petit button { min-height: 44px; }
.section-reglages .segments { background: var(--bg); }
input[type="text"], input[type="number"], input[type="search"], input[type="password"], input[type="email"], input[type="datetime-local"], select, textarea {
  border-radius: var(--rayon); border-width: 1px; border-color: var(--bord-champ); }
.champ-ico input { border-radius: var(--rayon); }
.recherche-adresse input { border-radius: var(--rayon); box-shadow: none; border: 1px solid var(--bord-champ); }
.suggestions { border-radius: var(--rayon); border: 1px solid var(--bord); }
/* capsules gardées par la charte : interrupteurs, curseurs, toasts */
.interrupteur input[type="checkbox"] { border-radius: 999px; }
.interrupteur input[type="checkbox"]::after { border-radius: 50%; }
.double-curseur::before { border-radius: 999px; }
.double-curseur input[type="range"]::-webkit-slider-thumb { border-color: var(--bg); }
.double-curseur input[type="range"]::-moz-range-thumb { border-color: var(--bg); }

/* ---------------------------------------------------------------- pastilles et badges (4 px, contours) */
.pastille-info { border-radius: var(--rayon); background: transparent; box-shadow: inset 0 0 0 1px var(--bord); font-weight: 600; }
.pastille-info.type, .pastille-info.diff { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); }
.cp-corps .pastille-info, .cp-corps .pastille-info.type, .heros .pastille-info { background: transparent; }
.pastille-info.sens-inverse { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }
.badge-direct { background: var(--alerte); color: #fff; border-radius: var(--rayon); letter-spacing: .12em; }  /* rouge : en direct */
.badge-depart { background: transparent; box-shadow: inset 0 0 0 1px var(--ok); border-radius: var(--rayon); letter-spacing: .08em; text-transform: uppercase; }
.pastille-pr { background: var(--or); color: #111A24; border-radius: var(--rayon); font-weight: 700; }
.pastille-demo { background: var(--surface2); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.compteur { border-radius: var(--rayon); }

/* ---------------------------------------------------------------- épures à repères : filet 1 px, croix aux angles, pas de fond
   (données vedettes : tuiles, statistiques de fiche, records, objectif de la semaine) */
.tuile, .stats-vedette > div, .record-carte, .heros {
  position: relative; background: transparent; border: 1px solid var(--filet); border-radius: 0; box-shadow: none; overflow: visible; }
.tuile::before, .stats-vedette > div::before, .record-carte::before, .heros::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  --x: var(--bord);
  background:
    linear-gradient(var(--x), var(--x)) 0 6px / 13px 1px no-repeat, linear-gradient(var(--x), var(--x)) 6px 0 / 1px 13px no-repeat,
    linear-gradient(var(--x), var(--x)) 100% 6px / 13px 1px no-repeat, linear-gradient(var(--x), var(--x)) calc(100% - 6px) 0 / 1px 13px no-repeat,
    linear-gradient(var(--x), var(--x)) 0 calc(100% - 6px) / 13px 1px no-repeat, linear-gradient(var(--x), var(--x)) 6px 100% / 1px 13px no-repeat,
    linear-gradient(var(--x), var(--x)) 100% calc(100% - 6px) / 13px 1px no-repeat, linear-gradient(var(--x), var(--x)) calc(100% - 6px) 100% / 1px 13px no-repeat;
}
.tuile.couleur::after { display: none; }
.tuile-ico { border-radius: var(--rayon); background: transparent; width: 32px; height: 32px; margin-bottom: 4px; }
.tuile-ico .ico { width: 24px; height: 24px; }
.tuiles { gap: 12px; }
.stats-vedette { gap: 12px; }
.stats-vedette > div { align-items: flex-start; text-align: left; padding: 10px 12px; }
.stats-vedette span .ico { width: 20px; height: 20px; }
.record-carte { border-top: 1px solid var(--filet); }
.record-carte.vide { opacity: .6; }
.records-grille, .badges-grille { gap: 12px; }
.records-grille > *, .badges-grille > * { min-width: 0; }      /* grille 2 colonnes qui tient en 375 px (§ 10 n° 9) */
.heros { padding: 16px; }
.anneau-progres { stroke: var(--accent); }

/* ---------------------------------------------------------------- cartes, blocs, listes */
.bloc, .carte-info, .element, .rapide-corps, .section-reglages, details.filtres, .etat-vide, .modale, .rapide-apercu, .cp-apercu { border-radius: var(--rayon); }
.carte-fame { background: var(--surface); border: 1px solid var(--bord); }
.cf-ico { border-radius: var(--rayon); }
.raccourcis-v23 a { background: var(--surface); border-radius: var(--rayon); }
.raccourcis-v23 a span { font-size: inherit; color: var(--accent); line-height: 0; margin-bottom: 4px; }
.raccourcis-v23 a span .ico { width: 26px; height: 26px; }
.rond-type { border-radius: var(--rayon); }
.etat-vide .illu { border-radius: 50%; }
/* carte de parcours : le filet gauche devient un repère carré de difficulté posé sur l'aperçu */
.cp-lien { border-left: 0; border-radius: var(--rayon); }
.cp-apercu { position: relative; }
.cp-apercu::before { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; background: var(--diff, var(--bord)); }
.cp-corps .nom { font-family: var(--font-titre); font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.rapide .nom { font-family: var(--font-titre); font-weight: 700; font-size: 1.05rem; }
.carte-recherche, .carte-fiche { box-shadow: none; border-radius: var(--rayon); }

/* ---------------------------------------------------------------- en-tête : cloche et badge démo intégrés (plus fixes, § 10 n° 1 et 2) */
.cloche { position: absolute; width: 44px; height: 44px; border-radius: var(--rayon); background: transparent; border: 1px solid var(--bord); box-shadow: none; }
.cloche-pastille { border-radius: 999px; }
/* pastille « Démo » : Ardoise cerclée de Ciel acier, accrochée sous la cloche (même colonne, défile avec la page) */
#bandeau-demo { position: absolute; top: calc(var(--sat) + 8px); right: 12px; padding: 4px 8px; border-radius: var(--rayon); gap: 4px;
  background: var(--surface2); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-family: var(--font-texte); font-weight: 600; font-size: .62rem; letter-spacing: .1em; }
#bandeau-demo i { background: var(--accent); width: 5px; height: 5px; }
body.avec-cloche #bandeau-demo, body.plein-ecran.avec-cloche #bandeau-demo { right: 12px; top: calc(var(--sat) + 60px); width: 44px; justify-content: center; padding: 2px 0; min-height: 16px; }
body.avec-cloche #bandeau-demo i { display: none; }
body.mode-demo:not(.avec-cloche):not(.plein-ecran) .page > .entete { padding-right: 76px; }
.cloche-fermer { width: 44px; height: 44px; border-radius: var(--rayon); }

/* ---------------------------------------------------------------- barre d'onglets (icônes Lucide au trait 1,5) */
#onglets { background: color-mix(in srgb, var(--bg) 96%, transparent); }
#onglets a { font-family: var(--font-texte); font-weight: 600; }
#onglets svg { fill: none; width: 26px; height: 26px; }
#onglets a.actif svg { transform: none; }
#onglets a.actif::before { width: 34px; height: 3px; border-radius: 0; }

/* ---------------------------------------------------------------- toasts : capsule, au-dessus du panneau Créer (§ 10 n° 14) */
.toast { border-radius: 999px; font-family: var(--font-texte); font-weight: 600; }
.toast.erreur { background: var(--alerte); color: #fff; border-radius: var(--rayon); }
.toast.ok { background: var(--ok); color: var(--ok-texte); }
body[data-ecran="creer"] .toast { bottom: auto; top: calc(var(--sat) + 64px); transform: translate(-50%, -20px); }
body[data-ecran="creer"] .toast.visible { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- cartes Leaflet */
.leaflet-bar a, .leaflet-bar a:hover { width: 44px; height: 44px; line-height: 44px; }
.leaflet-bar { border-radius: var(--rayon) !important; overflow: hidden; }
.creer .choix-fond { border-radius: var(--rayon); }
.creer .choix-fond button { min-height: 44px; border-radius: var(--rayon); font-family: var(--font-texte); font-weight: 600; }
.creer .choix-fond button.actif { color: #111A24; }
.creer .panneau { border-radius: var(--rayon) var(--rayon) 0 0; }
.creer .outils .btn { border-radius: var(--rayon); font-size: .95rem; }
.alerte-seg { background: transparent; border: 1px solid var(--alerte); border-radius: var(--rayon); }   /* alertes cerclées de rouge plutôt que remplies */
.alerte-seg > svg { color: var(--alerte); }
.alerte-seg.grise { border-color: var(--bord); }
/* fond sombre recoloré (guidage, carte de chaleur) : jamais de clair sous des tuiles manquantes */
.fond-sombre.leaflet-container, .leaflet-container.fond-sombre { background: #111A24; }
.fond-sombre .leaflet-control-attribution { background: rgba(17, 26, 36, .72) !important; color: #B7B7BA; }
.fond-sombre .leaflet-control-attribution a { color: #94BCE3; }
.barre-demo button { min-height: 44px; }
.pt-dispos .btn-icone { width: 44px; height: 44px; }

/* ==========================================================
   GUIDAGE (vue GPS) — TOUJOURS en thème Nuit (:root[data-guidage], posé par js/reglages.js), carte comprise.
   Gros chiffres Barlow Condensed, contraste fort, cellules séparées par des filets (charte, page 10).
   ========================================================== */
.course { background: var(--bg); color: var(--texte); }
.course .zone-carte { background: #111A24; }
.course .etat-gps { border-radius: var(--rayon); background: rgba(17, 26, 36, .88); font-family: var(--font-texte); font-weight: 600; }
.course .etat-gps.sim { background: #2C455D; color: #94BCE3; box-shadow: inset 0 0 0 1px #94BCE3; }
.course .etat-gps.bon i { background: #3DBE7A; }
.course .etat-gps.moyen i { background: #E0B24A; }
.course .etat-gps.mauvais i { background: #D23C3C; }
.course #etat-ecran { color: #E0B24A; }
.course .bouton-eco.actif { background: #3DBE7A; color: #111A24; }
.course .alerte-trace { border-radius: var(--rayon); background: #D23C3C; color: #fff; }          /* hors tracé : rouge plein, texte blanc 4,7 : 1 */
.course.hors-trace .zone-carte { box-shadow: inset 0 0 0 6px #D23C3C; }
.course .progression { padding: 0 0 6px; }
.course .barre { height: 8px; border-radius: 0; background: var(--surface2); }
.course .barre > div { border-radius: 0; background: var(--accent); }
.course .progression .txt { padding: 0 12px; font-family: var(--font-texte); font-weight: 600; }
.course .progression #p-pct { font-family: var(--font-titre); font-weight: 700; font-size: 1.05rem; }
.course .compteurs { padding-left: 0; padding-right: 0; }
.course .page-cpt.principaux { gap: 1px; background: var(--filet); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.course .gros { background: var(--bg); border-radius: 0; padding: 6px 14px; }
.course .gros .v { font-size: clamp(2.6rem, min(15vw, 8.5vh), 6rem); letter-spacing: 0; }
.course .gros.vitesse .v { font-size: clamp(3.2rem, min(20vw, 10.5vh), 7.5rem); color: var(--accent); }
.course .gros .v.long { font-size: clamp(2.2rem, min(12vw, 7vh), 4.8rem); }
.course .gros .v.long span { letter-spacing: 0; }
.course .gros .v small { font-family: var(--font-texte); font-weight: 600; font-size: .26em; }
.course .gros .s { font-family: var(--font-texte); font-weight: 600; }
.course .secondaires { gap: 1px; background: var(--filet); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.course .petit-cpt { background: var(--bg); border-radius: 0; }
.course .points-pages i { border-radius: 50%; }
.course .points-pages i.actif { border-radius: var(--rayon); }
.course .mini-profil { border-radius: 0; background: var(--bg); margin: 0 10px; }
.course .commandes { padding: 0 10px; }
.course .commandes .btn { border-radius: var(--rayon); min-height: 64px; font-size: 1.35rem; }
.course .commandes .btn.danger { background: #D23C3C; color: #fff; box-shadow: none; }   /* Terminer : rouge sprint plein, texte blanc */
.course .pause-etat { font-family: var(--font-texte); font-weight: 600; letter-spacing: .12em; }
.course .fantome-cpt { border-radius: var(--rayon); margin: 0 10px; }
@media (orientation: landscape) {
  .course .gros { padding: 4px 10px; border-radius: 0; }
  .course .gros .v { font-size: clamp(2rem, min(7vw, 12vh), 4.8rem); }
  .course .gros.vitesse .v { font-size: clamp(2.4rem, min(8.5vw, 15vh), 5.6rem); }
  .course .commandes .btn { min-height: 52px; font-size: 1.15rem; }
}
/* mode Éco : noir pur OLED, seule la vitesse garde le Ciel acier, Terminer cerclé de rouge */
.course.eco .page-cpt.principaux, .course.eco .secondaires { background: #1A1A1A; border-color: #1A1A1A; }
.course.eco .gros { border: 0; }
.course.eco .gros.vitesse .v { color: #94BCE3; }
.course.eco .commandes .btn { filter: none; background: #000; color: #C8C8C8; box-shadow: inset 0 0 0 1px #2A2A2A; }
.course.eco .commandes .btn.danger { color: #D23C3C; box-shadow: inset 0 0 0 1.5px #D23C3C; }

/* ---------------------------------------------------------------- réduction des animations (§ 10 n° 10) :
   aussi les clignotements (hors tracé, GPS, direct), l'aide flottante de Créer et les modales */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- sillage tricolore : réservé aux moments de célébration
   (connexion, bandeau « bravo » d'un record) — bleu acier, papier, rouge sprint, inclinés à 14° */
.page.connexion { position: relative; padding-bottom: 70px; min-height: calc(100dvh - var(--sab)); }
.page.connexion::after, .bravo-bandeau::after {
  content: ""; position: absolute; right: 0; width: 46%; height: 30px; pointer-events: none;
  background:
    linear-gradient(#5980A6, #5980A6) 0 0 / 100% 6px no-repeat,
    linear-gradient(var(--texte), var(--texte)) 18% 12px / 82% 6px no-repeat,
    linear-gradient(#D23C3C, #D23C3C) 36% 24px / 64% 6px no-repeat;
  transform: skewX(-14deg); transform-origin: 100% 0; }
.page.connexion::after { bottom: 18px; }
.bravo-bandeau { position: relative; overflow: hidden; padding-right: 40%; background: var(--surface); color: var(--texte); border: 1px solid var(--bord); }
.bravo-bandeau .ico { color: var(--alerte); }      /* record : rouge sprint ponctuel */
.bravo-bandeau::after { top: 50%; margin-top: -15px; right: -8px; width: 36%; }
/* l'Explorer : la recherche d'adresse laisse la place à la cloche de l'en-tête */
body.avec-cloche .page.recherche .barre-carte.haut { right: 64px; }
/* bureau : la cloche s'aligne sur la colonne de la page (860 px) au lieu du bord de la fenêtre */
@media (min-width: 900px) {
  .cloche { right: max(12px, calc((100% - 860px) / 2 + 16px)); }
  body.avec-cloche #bandeau-demo, body.plein-ecran.avec-cloche #bandeau-demo { right: max(12px, calc((100% - 860px) / 2 + 16px)); }
}
/* Explorer en deux colonnes (bureau, paysage) : cloche alignée sur sa colonne de 1280 px, sous-onglets décalés (§ 10 n° 1) */
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  body[data-ecran="parcours"] .cloche, body[data-ecran="parcours"].avec-cloche #bandeau-demo { right: max(12px, calc((100% - 1280px) / 2 + 16px)); }
  body.avec-cloche .page.recherche #sous-onglets { width: calc(100% - 60px); }
  body.avec-cloche .page.recherche .barre-carte.haut { right: 10px; }
}
/* un seul bouton plein Ciel acier par écran : les « Corriger » des alertes de Créer passent en contour */
.alerte-seg .btn.primaire { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* boutons répétés dans une liste ou compacts : contour Ciel acier (le plein reste l'action principale de l'écran) */
.liste .btn.primaire:not(.geant), .approche .btn.primaire, .btn.primaire.compact, .bloc .boutons label.btn.primaire {
  background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }