/*
  TIMER SHOOT PRO — l'apparence.
  © Bilel 2026 — tous droits réservés sur ce code. Voir DROITS.md à la racine.

  Sombre par principe : un chronomètre se lit au pas de tir, souvent sous un
  abri ou au petit matin, et un écran blanc éblouit. Le noir n'est pas une mode,
  c'est la couleur qui laisse l'œil accommodé.

  DEUX RÈGLES DE FORME, HÉRITÉES ET NON NÉGOCIABLES :
    · aucune cible tactile sous 44 px, et sa taille vit ICI, jamais en style
      inline — un tireur porte des gants ;
    · `vw` mesure la fenêtre, pas la carte : interdit sur une largeur, sauf en
      `position: fixed`.
*/

/*
  LES DEUX THÈMES.

  Le SOMBRE est le défaut : un chronomètre se lit au pas de tir, souvent sous un
  abri ou au petit matin, et un écran blanc éblouit. Le CLAIR existe pour le
  plein soleil, où c'est l'inverse — un écran sombre devient un miroir.

  TROIS BLOCS, ET AUCUN N'EST DE TROP :
    1. `:root` porte le sombre, toujours ;
    2. la requête `prefers-color-scheme: light` sert le clair à qui n'a RIEN
       choisi — d'où le `:not([data-theme])`, qui rend la main dès qu'un choix
       existe ;
    3. `[data-theme="clair"]` force le clair, quel que soit le système.
  Les valeurs claires sont donc écrites deux fois. C'est la structure standard,
  et CSS n'offre pas de façon propre de l'éviter : une variable ne peut pas
  porter un bloc de variables.

  Sans le bloc 2, un téléphone réglé en clair afficherait l'app en sombre au
  premier lancement, avant tout choix. Sans le `:not`, le choix du tireur serait
  écrasé par son système à chaque ouverture.
*/

:root {
  --tap: 48px;                   /* cible tactile : 48, pas 44 — on garde de la marge */

  --fond: #05070a;
  --fond2: #0a0d12;
  --carte: #10131a;
  --carte-bas: #0d1016;
  --carte2: #171b24;
  --trait: #1e2430;
  --trait-fort: #2a3240;

  --texte: #f2f5f9;
  --doux: #8b97a8;
  --faible: #7b8698;

  --bleu: #0a84ff;
  --bleu-clair: #3d9dff;
  --bleu-sombre: #0060c9;
  --vert: #32d74b;
  --rouge: #ff453a;
  --orange: #ff9f0a;

  /* Les teintes de surface — elles CHANGENT de thème à thème, et sans elles la
     page claire garderait des plaques sombres. */
  --lueur: rgba(10, 132, 255, .10);
  --barre-fond: linear-gradient(180deg, rgba(5, 7, 10, .96), rgba(5, 7, 10, .82));
  --nav-fond: rgba(10, 13, 18, .94);
  --toast-fond: #1b2230;
  --anneau-piste: #1a1f29;
  --filigrane: #27303d;
  --piste: #262d3a;
  --voile: rgba(0, 0, 0, .7);
  --sur-vert: #04240b;            /* texte posé SUR une pastille verte */
  --ombre-cta: rgba(10, 132, 255, .85);

  --r: 18px;
  --r-petit: 12px;

  color-scheme: dark;
}

/* Le clair, pour qui n'a rien choisi et dont le système est en clair. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --fond: #f1f4f9;
    --fond2: #ffffff;
    --carte: #ffffff;
    --carte-bas: #f7f9fc;
    --carte2: #eef1f7;
    --trait: #dfe4ee;
    --trait-fort: #c3ccdb;

    --texte: #0d1219;
    --doux: #4a5768;
    --faible: #636f84;

    --bleu: #0a66c2;
    --bleu-clair: #2f86e0;
    --bleu-sombre: #064a8f;
    --vert: #1a7f37;
    --rouge: #c9261c;
    --orange: #9a5b00;

    --lueur: rgba(10, 102, 194, .09);
    --barre-fond: linear-gradient(180deg, rgba(241, 244, 249, .97), rgba(241, 244, 249, .86));
    --nav-fond: rgba(255, 255, 255, .95);
    --toast-fond: #232c39;
    --anneau-piste: #e2e7f0;
    --filigrane: #c8d2e0;
    --piste: #c3ccdb;
    --voile: rgba(16, 22, 30, .45);
    --sur-vert: #ffffff;
    --ombre-cta: rgba(10, 102, 194, .45);

    color-scheme: light;
  }
}

/* Le clair, forcé par le tireur. Mêmes valeurs — voir l'en-tête. */
:root[data-theme="clair"] {
  --fond: #f1f4f9;
  --fond2: #ffffff;
  --carte: #ffffff;
  --carte-bas: #f7f9fc;
  --carte2: #eef1f7;
  --trait: #dfe4ee;
  --trait-fort: #c3ccdb;

  --texte: #0d1219;
  --doux: #4a5768;
  --faible: #636f84;

  --bleu: #0a66c2;
  --bleu-clair: #2f86e0;
  --bleu-sombre: #064a8f;
  --vert: #1a7f37;
  --rouge: #c9261c;
  --orange: #9a5b00;

  --lueur: rgba(10, 102, 194, .09);
  --barre-fond: linear-gradient(180deg, rgba(241, 244, 249, .97), rgba(241, 244, 249, .86));
  --nav-fond: rgba(255, 255, 255, .95);
  --toast-fond: #232c39;
  --anneau-piste: #e2e7f0;
  --filigrane: #c8d2e0;
  --piste: #c3ccdb;
  --voile: rgba(16, 22, 30, .45);
  --sur-vert: #ffffff;
  --ombre-cta: rgba(10, 102, 194, .45);

  color-scheme: light;
}

/*
  LES PALETTES — la couleur d’accent, au choix du tireur (07/10/2026, demande de Bilel :
  « le thème des couleurs dans les paramètres »).

  CHAQUE TEINTE REPRODUIT LA LUMINANCE DU BLEU D’ORIGINE, DONC TOUS SES CONTRASTES.
  `--bleu` sert à deux choses et les deux contraignent : FOND de bouton avec du BLANC
  dessus (`.btn { color: #fff }`, et le bouton principal est un dégradé qui part de
  `--bleu-clair`, son point le plus clair), et TEXTE posé sur `--fond` et `--carte`.
  La luminosité est donc RÉSOLUE par teinte, jamais choisie — un jaune à la luminosité
  d’un bleu est bien plus lumineux, et le blanc n’y tiendrait plus. Mesuré : blanc sur
  le point clair 2,81 en sombre et 3,75 en clair, accent sur le fond 5,53 et 5,16 —
  les mêmes valeurs pour les sept teintes, au centième.

  DES BLOCS DISCRETS, ET C’EST LA RAISON : `hsl(var(--teinte) 100% 52%)` donnerait un
  jaune illisible, et calculer la luminosité en JavaScript reviendrait à écrire les
  couleurs deux fois — ce que l’en-tête de `theme.js` interdit.

  `data-teinte` ABSENT = le bleu d’origine, au hex près. Ne rien choisir est une réponse.
*/

:root[data-teinte="cyan"] {
  --bleu: hsl(190 100.0% 34.4%);
  --bleu-clair: hsl(190 100.0% 39.6%);
  --bleu-sombre: hsl(190 100.0% 25.7%);
  --lueur: hsl(190 100.0% 34.4% / 0.1);
  --ombre-cta: hsl(190 100.0% 34.4% / 0.85);
}
:root[data-teinte="vert"] {
  --bleu: hsl(145 100.0% 30.4%);
  --bleu-clair: hsl(145 100.0% 34.9%);
  --bleu-sombre: hsl(145 100.0% 22.6%);
  --lueur: hsl(145 100.0% 30.4% / 0.1);
  --ombre-cta: hsl(145 100.0% 30.4% / 0.85);
}
:root[data-teinte="ambre"] {
  --bleu: hsl(48 100.0% 31.9%);
  --bleu-clair: hsl(48 100.0% 36.7%);
  --bleu-sombre: hsl(48 100.0% 23.7%);
  --lueur: hsl(48 100.0% 31.9% / 0.1);
  --ombre-cta: hsl(48 100.0% 31.9% / 0.85);
}
:root[data-teinte="orange"] {
  --bleu: hsl(25 100.0% 44.0%);
  --bleu-clair: hsl(25 100.0% 51.1%);
  --bleu-sombre: hsl(25 100.0% 32.8%);
  --lueur: hsl(25 100.0% 44.0% / 0.1);
  --ombre-cta: hsl(25 100.0% 44.0% / 0.85);
}
:root[data-teinte="rouge"] {
  --bleu: hsl(0 100.0% 59.8%);
  --bleu-clair: hsl(0 100.0% 70.5%);
  --bleu-sombre: hsl(0 100.0% 39.6%);
  --lueur: hsl(0 100.0% 59.8% / 0.1);
  --ombre-cta: hsl(0 100.0% 59.8% / 0.85);
}
:root[data-teinte="rose"] {
  --bleu: hsl(330 100.0% 54.7%);
  --bleu-clair: hsl(330 100.0% 68.4%);
  --bleu-sombre: hsl(330 100.0% 38.4%);
  --lueur: hsl(330 100.0% 54.7% / 0.1);
  --ombre-cta: hsl(330 100.0% 54.7% / 0.85);
}
:root[data-teinte="violet"] {
  --bleu: hsl(275 100.0% 66.5%);
  --bleu-clair: hsl(275 100.0% 73.2%);
  --bleu-sombre: hsl(275 100.0% 48.3%);
  --lueur: hsl(275 100.0% 66.5% / 0.1);
  --ombre-cta: hsl(275 100.0% 66.5% / 0.85);
}

/* Le clair servi par le système à qui n’a RIEN choisi — même garde que les trois blocs
   du haut de ce fichier : `:not([data-theme])` rend la main dès qu’un choix existe. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme])[data-teinte="cyan"] {
    --bleu: hsl(190 90.2% 27.6%);
    --bleu-clair: hsl(190 74.1% 37.9%);
    --bleu-sombre: hsl(190 91.9% 19.9%);
    --lueur: hsl(190 90.2% 27.6% / 0.09);
    --ombre-cta: hsl(190 90.2% 27.6% / 0.45);
  }
  :root:not([data-theme])[data-teinte="vert"] {
    --bleu: hsl(145 90.2% 24.5%);
    --bleu-clair: hsl(145 74.1% 34.2%);
    --bleu-sombre: hsl(145 91.9% 17.7%);
    --lueur: hsl(145 90.2% 24.5% / 0.09);
    --ombre-cta: hsl(145 90.2% 24.5% / 0.45);
  }
  :root:not([data-theme])[data-teinte="ambre"] {
    --bleu: hsl(48 90.2% 25.5%);
    --bleu-clair: hsl(48 74.1% 35.2%);
    --bleu-sombre: hsl(48 91.9% 18.4%);
    --lueur: hsl(48 90.2% 25.5% / 0.09);
    --ombre-cta: hsl(48 90.2% 25.5% / 0.45);
  }
  :root:not([data-theme])[data-teinte="orange"] {
    --bleu: hsl(25 90.2% 34.7%);
    --bleu-clair: hsl(25 74.1% 46.4%);
    --bleu-sombre: hsl(25 91.9% 25.2%);
    --lueur: hsl(25 90.2% 34.7% / 0.09);
    --ombre-cta: hsl(25 90.2% 34.7% / 0.45);
  }
  :root:not([data-theme])[data-teinte="rouge"] {
    --bleu: hsl(0 90.2% 42.6%);
    --bleu-clair: hsl(0 74.1% 60.7%);
    --bleu-sombre: hsl(0 91.9% 31.2%);
    --lueur: hsl(0 90.2% 42.6% / 0.09);
    --ombre-cta: hsl(0 90.2% 42.6% / 0.45);
  }
  :root:not([data-theme])[data-teinte="rose"] {
    --bleu: hsl(330 90.2% 41.1%);
    --bleu-clair: hsl(330 74.1% 58.4%);
    --bleu-sombre: hsl(330 91.9% 30.1%);
    --lueur: hsl(330 90.2% 41.1% / 0.09);
    --ombre-cta: hsl(330 90.2% 41.1% / 0.45);
  }
  :root:not([data-theme])[data-teinte="violet"] {
    --bleu: hsl(275 90.2% 51.6%);
    --bleu-clair: hsl(275 74.1% 64.0%);
    --bleu-sombre: hsl(275 91.9% 37.4%);
    --lueur: hsl(275 90.2% 51.6% / 0.09);
    --ombre-cta: hsl(275 90.2% 51.6% / 0.45);
  }
}

/* Le clair FORCÉ. */
:root[data-theme="clair"][data-teinte="cyan"] {
  --bleu: hsl(190 90.2% 27.6%);
  --bleu-clair: hsl(190 74.1% 37.9%);
  --bleu-sombre: hsl(190 91.9% 19.9%);
  --lueur: hsl(190 90.2% 27.6% / 0.09);
  --ombre-cta: hsl(190 90.2% 27.6% / 0.45);
}
:root[data-theme="clair"][data-teinte="vert"] {
  --bleu: hsl(145 90.2% 24.5%);
  --bleu-clair: hsl(145 74.1% 34.2%);
  --bleu-sombre: hsl(145 91.9% 17.7%);
  --lueur: hsl(145 90.2% 24.5% / 0.09);
  --ombre-cta: hsl(145 90.2% 24.5% / 0.45);
}
:root[data-theme="clair"][data-teinte="ambre"] {
  --bleu: hsl(48 90.2% 25.5%);
  --bleu-clair: hsl(48 74.1% 35.2%);
  --bleu-sombre: hsl(48 91.9% 18.4%);
  --lueur: hsl(48 90.2% 25.5% / 0.09);
  --ombre-cta: hsl(48 90.2% 25.5% / 0.45);
}
:root[data-theme="clair"][data-teinte="orange"] {
  --bleu: hsl(25 90.2% 34.7%);
  --bleu-clair: hsl(25 74.1% 46.4%);
  --bleu-sombre: hsl(25 91.9% 25.2%);
  --lueur: hsl(25 90.2% 34.7% / 0.09);
  --ombre-cta: hsl(25 90.2% 34.7% / 0.45);
}
:root[data-theme="clair"][data-teinte="rouge"] {
  --bleu: hsl(0 90.2% 42.6%);
  --bleu-clair: hsl(0 74.1% 60.7%);
  --bleu-sombre: hsl(0 91.9% 31.2%);
  --lueur: hsl(0 90.2% 42.6% / 0.09);
  --ombre-cta: hsl(0 90.2% 42.6% / 0.45);
}
:root[data-theme="clair"][data-teinte="rose"] {
  --bleu: hsl(330 90.2% 41.1%);
  --bleu-clair: hsl(330 74.1% 58.4%);
  --bleu-sombre: hsl(330 91.9% 30.1%);
  --lueur: hsl(330 90.2% 41.1% / 0.09);
  --ombre-cta: hsl(330 90.2% 41.1% / 0.45);
}
:root[data-theme="clair"][data-teinte="violet"] {
  --bleu: hsl(275 90.2% 51.6%);
  --bleu-clair: hsl(275 74.1% 64.0%);
  --bleu-sombre: hsl(275 91.9% 37.4%);
  --lueur: hsl(275 90.2% 51.6% / 0.09);
  --ombre-cta: hsl(275 90.2% 51.6% / 0.45);
}

* { box-sizing: border-box; }

/* L ATTRIBUT `hidden` NE CACHE RIEN FACE A UN `display` POSE PAR UNE REGLE.
   Il ne vaut que `display:none` dans la feuille du NAVIGATEUR, que la moindre
   de nos regles bat en specificite : `.logo` en flex l a ignore le 27/09 au
   matin, puis `.nav` et `.icobtn` le meme soir, pendant que l inscription
   affichait la barre de navigation qu elle voulait masquer. Une regle globale
   ferme le piege une fois pour toutes, au lieu de le rouvrir a chaque nouvel
   element pilote par `hidden`. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Le reflet en haut à droite de la maquette : une seule lueur, très douce,
     qui donne de la profondeur sans coûter une image. */
  background:
    radial-gradient(120% 60% at 88% -8%, var(--lueur), transparent 60%),
    linear-gradient(180deg, var(--fond2), var(--fond) 340px);
}

/* ---------- en-tête ---------- */

.barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(14px, env(safe-area-inset-top)) 14px 14px;
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--barre-fond);
  backdrop-filter: blur(12px);
}

.logo {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bleu);
}
.logo .ic { width: 37px; height: 37px; stroke-width: 1.5; }

.titres { flex: 1; min-width: 0; }
.barre h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  letter-spacing: 1.2px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barre h1 .accent { color: var(--bleu); }
/* Un titre d ECRAN n est pas le logotype : a 24 px et 800 de graisse,
   « Passe en cours » se tronquait des 375 px. */
.barre h1.ecran { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.barre .devise {
  margin: 3px 0 0;
  font-size: 8px;
  letter-spacing: .7px;
  color: var(--faible);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* SOUS 360 px, LA DEVISE S EFFACE. Mesure a 320 px avec l icone de theme : le
   titre reclame 154 px pour 138 disponibles depuis que le produit s appelle
   « Timer Shoot Pro » (01/10/2026) — cinq caracteres de plus que « TIR CHRONO »,
   soit 16 px de trop. La devise est decorative — un texte coupe est pire qu un
   texte absent —, et le titre descend juste assez pour tenir ENTIER : mesure
   dans le navigateur a 320 px : 132 px pour 138 disponibles, zero troncature.
   LIMITE DITE : sous 300 px le titre est coupe — il l etait DEJA avec l ancien
   nom (104 px pour 98 a 280 px), et aucun telephone du marche ne descend
   sous 320. On ne fabrique pas un palier pour une largeur qui n existe pas. */
@media (max-width: 359px) {
  .barre .devise { display: none; }
  .barre h1 { font-size: 16px; letter-spacing: .2px; }
  .logo { width: 34px; height: 34px; }
  .logo .ic { width: 32px; height: 32px; }
}

.icobtn {
  min-width: var(--tap);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--doux);
  cursor: pointer;
  border-radius: 12px;
  flex: none;
  padding: 0;
}
.icobtn:hover { color: var(--texte); }

:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

/* ---------- vue ---------- */

.vue {
  flex: 1;
  padding: 4px 16px calc(104px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

.sect { margin: 24px 0 10px; }
.sect:first-child { margin-top: 10px; }
.sect h2 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--doux);
  margin: 0;
  font-weight: 700;
}
.sect .sub { margin: 6px 0 0; font-size: 13px; color: var(--faible); }

/* ---------- cartes ---------- */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--carte), var(--carte-bas));
  border: 1px solid var(--trait);
  border-radius: var(--r);
  margin-bottom: 14px;
  overflow: hidden;
}
/* Une carte qui porte du TEXTE prend `pad` ; celles faites de lignes ont le leur. */
.card.pad { padding: 18px; }
.card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 650; }
.card p { margin: 7px 0; color: var(--doux); font-size: 14px; }
.card p.fort { color: var(--texte); }

/* La photo d'un carton, gardée dans la passe. */
/*
 * Elle prend toute la largeur de sa carte et garde ses proportions. `height:auto`
 * ET `display:block` : sans le second, la ligne de base du texte lui ajoute
 * quelques pixels sous l'image, et la carte paraît mal fermée.
 * Fond sombre derrière : un carton est clair, et la transition est franche.
 */
.carton-vue {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 10px 0;
  background: #0b0f16;
}

/* L'en-tête d'une carte : icône ronde bleue + titre en capitales espacées. */
.carte-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 0;
}
.carte-tete .pastille-ic {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 132, 255, .12);
  color: var(--bleu);
}
.carte-tete .pastille-ic .ic { width: 19px; height: 19px; }
.carte-tete h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--texte);
}

/* ---------- le décompte : anneau + trois chiffres ---------- */

.decompte {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 20px;
}

.cadran {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 230px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.anneau { width: 100%; height: 100%; display: block; }
.anneau-piste { stroke: var(--anneau-piste); }
.anneau-arc {
  stroke: var(--bleu);
  transition: stroke-dashoffset .25s linear;
}
.cadran.urgent .anneau-arc { stroke: var(--orange); }
.cadran.fini .anneau-arc { stroke: var(--vert); }

.cadran-texte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cadran-val {
  font-size: clamp(30px, 11vw, 46px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1;
}
.cadran-unite {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--doux);
}

.chiffres {
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid var(--trait);
  padding-left: 16px;
  margin-left: 6px;
}
/* C EST UN <button> : sans cette remise a zero, le navigateur lui pose SON fond
   (blanc), SA bordure et SA police — mesure le 27/09/2026, les trois lignes du
   decompte sortaient en blanc sur la carte sombre. */
.chiffre {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.chiffre:last-child { border-bottom: 0; }
.chiffre .rond {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(10, 132, 255, .28);
  background: rgba(10, 132, 255, .08);
  color: var(--bleu);
}
.chiffre .rond .ic { width: 18px; height: 18px; }
.chiffre .txt { min-width: 0; }
.chiffre .lab {
  display: block;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--faible);
}
.chiffre .val {
  display: block;
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chiffre .val small {
  font-size: 12px;
  font-weight: 500;
  color: var(--doux);
  margin-left: 4px;
}

/* En dessous de 430 px, l'anneau et la colonne de chiffres ne tiennent plus
   côte à côte : la carte s'empile. `vw` est interdit sur une largeur, mais une
   requête de media MESURE la fenêtre, ce qui est exactement ce qu'on veut ici. */
/* La maquette montre l anneau et les chiffres COTE A COTE : on retrecit le
   cadran plutot que d empiler, et on n empile qu en dessous de 340 px, ou plus
   rien ne tiendrait. */
@media (max-width: 430px) {
  .decompte { gap: 4px; padding: 14px 14px 18px; }
  .cadran { max-width: 150px; }
  .chiffres { padding-left: 12px; margin-left: 2px; }
  .chiffre .rond { width: 30px; height: 30px; }
  .chiffre .val { font-size: 18px; }
}

@media (max-width: 339px) {
  .decompte { flex-direction: column; }
  .cadran { max-width: 190px; width: 100%; }
  .chiffres {
    border-left: 0;
    border-top: 1px solid var(--trait);
    padding-left: 0;
    margin-left: 0;
    padding-top: 4px;
    width: 100%;
  }
}

/* ---------- le carrousel des formats ---------- */

/* Le glissement est celui du NAVIGATEUR : inertie du systeme, molette,
   clavier — et surtout un vrai glissement n emet pas de clic, donc les
   chiffres reglables ne se declenchent jamais par accident. */
.piste {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.piste::-webkit-scrollbar { display: none; }
/* `flex: 0 0 100%` est relatif au CONTENEUR, jamais à la fenêtre : `vw` est
   interdit sur une largeur, et la piste vit dans une vue qui a ses marges. */
.diapo { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.diapo .card { margin-bottom: 0; }

/* La zone tactile fait 44 px — mesuree a 30 px le 27/09/2026, sous le plancher
   du projet. Cinq points de 44 px tiennent dans 220 px, donc le gap tombe a
   zero : ce sont les zones qui se touchent, pas les pastilles. */
/* LES PASTILLES SE REPLIENT, ELLES NE RÉTRÉCISSENT PAS.
   Mesuré le 27/09/2026 en ajoutant les trois blocs du TAR 822 : à huit cartes,
   8 × 44 px ne tiennent pas dans les 288 px utiles d'un écran de 320, et un
   élément flex rétrécit AVANT de déborder — chaque pastille tombait à 36 px de
   large, sous le plancher de 44. Rien ne débordait, rien ne criait : la seule
   trace était la largeur.
   `flex: 0 0 auto` interdit le rétrécissement, `wrap` donne une seconde ligne.
   *À cinq cartes, la rangée ne bouge pas d'un pixel : 5 × 44 = 220 tiennent.* */
.points { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 10px 0 14px; }
.point {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* La CIBLE fait 30 px, le point visible 7 : c est le pseudo-element qui se
   voit, et la zone tactile qui compte. */
.point::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--trait-fort);
  transition: background .15s, transform .15s;
}
.point.on::after { background: var(--bleu); transform: scale(1.35); }

/* LE COMPTEUR — il remplace les pastilles au-delà de six formats.
   Une seule ligne, deux cibles de 44 px, et le rang écrit en toutes lettres :
   « 5 / 13 » se lit, treize points identiques non. */
.points.compte { gap: 4px; }
.point-fleche {
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--doux); cursor: pointer;
}
.point-fleche:hover:not(:disabled) { color: var(--texte); background: var(--carte-haut); }
/* Au bout de la liste la flèche reste VISIBLE et inerte : la faire disparaître
   déplacerait le compteur sous le doigt à chaque extrémité. */
.point-fleche:disabled { opacity: .3; cursor: default; }
.point-compte {
  min-width: 62px; text-align: center;
  font-size: 13.5px; font-weight: 650; color: var(--doux);
  font-variant-numeric: tabular-nums;
}

/* L etoile du favori, en haut a droite de chaque carte. */
.carte-tete .etoile {
  margin-left: auto;
  margin-right: -10px;
  min-width: var(--tap);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--faible);
  cursor: pointer;
}
.carte-tete .etoile.on { color: var(--orange); }

/* Un chiffre FIGE : c est une epreuve publiee, ses valeurs viennent de son
   reglement et ne se reglent pas. Pas de curseur, pas de survol. */
.chiffre.fige { cursor: default; }

.source-carte {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--faible);
}
.source-carte.hors { color: var(--orange); }

/* ---------- réglages rapides ---------- */

.reglages-vite {
  display: flex;
  align-items: stretch;
  padding: 4px 0;
}
.reglage {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 16px 18px;
}
.reglage + .reglage { border-left: 1px solid var(--trait); }
.reglage-tete {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--doux);
  margin-bottom: 14px;
}
.reglage-tete .ic { width: 17px; height: 17px; flex: none; }
.reglage-tete span {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 650;
  line-height: 1.25;
}

/* Le pas-à-pas − valeur + */
.pas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pas-btn {
  width: var(--tap);
  height: var(--tap);
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  background: var(--carte2);
  color: var(--texte);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.pas-btn:disabled { opacity: .35; cursor: default; }

/* ---------- le curseur d'un réglage ----------
   Une glissière pour BALAYER, deux pas pour VISER. La poignée fait 28 px de
   diamètre mais la zone touchable en fait 44 : la piste est haute de 44 px et
   transparente, la barre colorée n'étant qu'un fond de 6 px peint au milieu.
   *Réduire la poignée aurait été rogner une cible tactile pour du dessin.* */
.curseur { padding: 14px 0 4px; }
.curseur + .curseur { border-top: 1px solid var(--trait); }
.curseur-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 2px;
}
.curseur-lab { font-size: 14.5px; color: var(--texte); }
.curseur-val {
  font-size: 17px; font-weight: 700; color: var(--bleu);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.curseur-rang { display: flex; align-items: center; gap: 10px; }
.curseur-piste { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.curseur-piste input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--tap); margin: 0;
  background: none; cursor: pointer;
}
/* La barre, peinte au centre de la zone touchable. */
.curseur-piste input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--bleu) 0 var(--pc, 0%), var(--carte2) var(--pc, 0%) 100%);
  border: 1px solid var(--trait-fort);
}
.curseur-piste input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--bleu) 0 var(--pc, 0%), var(--carte2) var(--pc, 0%) 100%);
  border: 1px solid var(--trait-fort);
}
.curseur-piste input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bleu); border: 2px solid var(--fond);
  margin-top: -12px;   /* recentre la poignée sur une piste de 6 px */
}
.curseur-piste input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bleu); border: 2px solid var(--fond);
}
.curseur-piste input[type="range"]:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; }
/* Le repère du défaut : il DOUBLE la valeur lue, il ne la remplace pas. */
.curseur-defaut {
  position: absolute; top: 50%; width: 2px; height: 12px;
  margin-top: -6px; margin-left: -1px;
  background: var(--doux); opacity: .5; pointer-events: none; border-radius: 1px;
}
.pas-btn .ic { width: 20px; height: 20px; }
.pas-val {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 8px;
}
.pas-val small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--faible);
  border: 0;
  padding: 0;
  margin-top: 2px;
}

/* ---------- inscription ---------- */

.inscription { padding-top: 6px; }
.inscription-tete { margin: 4px 0 20px; }
.inscription-tete .etape {
  margin: 0 0 9px;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--doux);
  font-weight: 700;
}
.jauge { display: flex; gap: 6px; }
.jauge-pas {
  flex: 1 1 0;
  min-width: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--trait-fort);
}
.jauge-pas.on { background: var(--bleu); }
.grand-titre { font-size: 27px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.3px; }
.chapeau { color: var(--doux); font-size: 14.5px; margin: 0 0 18px; }

/* ---------- etat du micro, sur l accueil ---------- */

/* La moitie droite de la carte des reglages rapides est un BOUTON : elle dit
   l etat du micro et mene a son reglage. Un <button> se deshabille d abord —
   sinon le navigateur lui pose son fond blanc (paye le 27/09 sur les trois
   chiffres du decompte). */
.reglage-bouton {
  background: none;
  border: 0;
  border-left: 1px solid var(--trait);
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  display: block;
}
.etat-micro { display: flex; align-items: center; gap: 9px; min-height: 34px; }
.voyant {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.voyant.ok { background: var(--vert); box-shadow: 0 0 0 4px rgba(50, 215, 75, .16); }
.voyant.ko { background: var(--rouge); box-shadow: 0 0 0 4px rgba(255, 69, 58, .16); }
/* Ni vert ni rouge : on ne SAIT pas encore, et le dire est une reponse. */
.voyant.attente { background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 159, 10, .16); }
.etat-txt { font-size: 19px; font-weight: 750; }
.etat-aide { margin: 8px 0 0; font-size: 11.5px; color: var(--faible); line-height: 1.35; }

/* ---------- le grand bouton ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 13px 20px;
  border-radius: var(--r-petit);
  border: 1px solid transparent;
  background: var(--bleu);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-align: center;
}
.btn .ic { width: 19px; height: 19px; flex: none; }
.btn.ghost {
  background: var(--carte2);
  border-color: var(--trait-fort);
  color: var(--texte);
  font-weight: 550;
}
.btn.danger { background: var(--rouge); }
.btn.off { opacity: .42; }
.btn.plein { width: 100%; }

.btn.cta {
  width: 100%;
  min-height: 74px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--bleu-clair), var(--bleu) 46%, var(--bleu-sombre));
  box-shadow: 0 10px 28px -12px var(--ombre-cta);
  margin: 4px 0 16px;
}
.btn.cta .ic { width: 24px; height: 24px; }
.btn.cta.danger {
  background: linear-gradient(100deg, #ff6b62, var(--rouge) 50%, #c9271e);
  box-shadow: 0 10px 28px -12px rgba(255, 69, 58, .85);
}

.rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.rangee > .btn { flex: 1 1 0; min-width: 0; }

/* UNE RANGÉE DE FILTRES N'EST PAS UNE RANGÉE DE DEUX BOUTONS.
   Mesuré le 27/09/2026 à 375 px sur l'écran des statistiques : quatre filtres
   en `flex:1 1 0` tombent à 78 px chacun — « Tir à sec » passe à deux lignes,
   toute la rangée monte à 74 px de haut, et « Entraînement » est TRONQUÉ. Un
   filtre qu'on ne peut pas lire ne se choisit pas.
   On n'abrège aucun mot : chaque bouton réclame la largeur qu'il lui faut, et
   la rangée se replie toute seule — deux par ligne sur un téléphone, quatre
   dès que la place existe. */
.rangee.serre > .btn { flex: 1 1 auto; min-width: 140px; }

/* ---------- récapitulatif ---------- */

.recap { position: relative; }
.recap-corps { position: relative; z-index: 1; padding: 6px 18px 18px; }
.recap-corps .l {
  display: flex;
  gap: 8px;
  font-size: 14.5px;
  color: var(--doux);
  padding: 4px 0;
}
.recap-corps .l b { color: var(--texte); font-weight: 600; font-variant-numeric: tabular-nums; }
.filigrane {
  position: absolute;
  right: -18px;
  bottom: -26px;
  color: var(--filigrane);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* ---------- lignes cliquables ---------- */

.item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: var(--tap);
  padding: 15px 18px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--trait);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.item:last-child { border-bottom: 0; }
.item .ic-gauche { color: var(--doux); flex: none; }
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; font-size: 15px; font-weight: 600; }
.item .t span { display: block; font-size: 13px; color: var(--faible); margin-top: 2px; }
.item .d {
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  text-align: right;
  flex: none;
}
.item .d small { display: block; font-size: 11px; font-weight: 400; color: var(--faible); }
.item .fleche { color: var(--faible); flex: none; display: flex; }
.item .fleche .ic { width: 18px; height: 18px; }
.item.sel { background: rgba(10, 132, 255, .12); }
.item.actif { border-left: 3px solid var(--bleu); padding-left: 15px; }

.vide { text-align: center; color: var(--faible); padding: 38px 14px; font-size: 15px; }

/* ---------- barre du bas ---------- */

.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--nav-fond);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 9;
}
.nav button {
  flex: 1 1 0;
  min-width: 0;                  /* sans ça, un libellé long bloque la largeur et déborde */
  min-height: var(--tap);
  padding: 9px 2px 8px;
  background: none;
  border: 0;
  color: var(--faible);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.nav button .ic { width: 23px; height: 23px; }
.nav button[aria-current="page"] { color: var(--bleu); }
/* Le trait sous l'onglet actif, comme sur la maquette. */
.nav button[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--bleu);
}

/* ---------- l'écran du chrono ---------- */

.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 42vh;
  padding: 18px 0 10px;
}
.scene .etiq { font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--doux); }
.scene .cmd {
  font-size: clamp(32px, 11vw, 58px);
  font-weight: 850;
  letter-spacing: 1.5px;
  margin: 10px 0 2px;
}
.scene .gros {
  font-size: clamp(60px, 24vw, 128px);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 8px 0;
  letter-spacing: -2px;
}
.scene .aide { font-size: 14px; color: var(--doux); max-width: 32ch; }

.scene.prep .cmd { color: var(--bleu); }
.scene.attention .cmd { color: var(--orange); }
.scene.tir .gros { color: var(--vert); }
.scene.hors .gros { color: var(--rouge); }

.pastilles { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin: 14px 0 4px; }
.pastille {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--trait-fort);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--faible);
}
.pastille.on { background: var(--vert); border-color: var(--vert); color: var(--sur-vert); }
.pastille.hors { background: var(--rouge); border-color: var(--rouge); color: #fff; }

/* ---------- tableaux ---------- */

.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.tbl th, .tbl td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--trait); }
.tbl th {
  color: var(--faible); font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 1.2px;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .hors td { color: var(--rouge); }
.tbl .mieux { color: var(--vert); }
.tbl .moins { color: var(--rouge); }
.tbl .main { color: var(--orange); }

.kv {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--trait); font-size: 15px;
}
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--doux); }
.kv .v { font-variant-numeric: tabular-nums; text-align: right; }
.kv.fort .v { font-weight: 700; font-size: 17px; }

/* La courbe des temps : elle occupe toute la largeur de sa carte et garde ses
   proportions. Aucune unite `vw` — c est la CARTE qui la borne, pas la fenetre. */
.courbe { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- champs ---------- */

.champ {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait);
}
.champ:last-child { border-bottom: 0; }
.champ-l { font-size: 15px; }
.champ-i { display: flex; align-items: center; gap: 7px; }
.champ input[type="number"], .champ input[type="text"], .saisie-plein {
  min-height: var(--tap);
  padding: 9px 12px;
  background: var(--carte2);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-petit);
  color: var(--texte);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.champ input[type="number"] { width: 96px; text-align: right; }
/* Les champs du profil : larges, alignes a gauche — on y ecrit des mots, pas
   des nombres. La hauteur vient de --tap comme partout. */
.saisie-texte {
  min-height: var(--tap);
  width: 168px;
  max-width: 100%;
  padding: 9px 12px;
  background: var(--carte2);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-petit);
  color: var(--texte);
  font: inherit;
  text-align: left;
}
select.saisie-texte {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
}
/* Le chevron du select, dessine en CSS : aucune image, aucune police. */
.champ-i { position: relative; }
.champ-i:has(select)::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--doux);
  border-bottom: 2px solid var(--doux);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
@media (max-width: 380px) { .saisie-texte { width: 148px; } }
.champ .unite { color: var(--faible); font-size: 13px; min-width: 24px; }
.champ.note { display: block; }
.champ.note textarea {
  width: 100%; margin-top: 9px; padding: 11px;
  background: var(--carte2); border: 1px solid var(--trait-fort);
  border-radius: var(--r-petit); color: var(--texte); font: inherit; resize: vertical;
}
.champ.bascule { cursor: pointer; }

/* Un champ pleine largeur dans un dialogue. La hauteur vient de --tap : une
   cible tactile ne se déclare jamais en style inline. */
.saisie-plein { width: 100%; }

/* LE CHAMP VEDETTE D'UN ÉCRAN D'INSCRIPTION — demande de Bilel, 30/09/2026.
   Pas de libellé à côté : le titre pose la question, le placeholder la répète
   dans le champ, et il a donc besoin de toute la largeur. Un peu plus d'air que
   `.saisie-plein`, qui sert dans des dialogues et des lignes de liste — *on ne
   touche pas à celle-là, elle est employée à quatre autres endroits.* */
.saisie-vedette {
  padding: 15px 16px;
  font-size: 16px;
  border-radius: var(--r-petit);
  margin-bottom: 14px;
}

/* Interrupteur */
.switch { position: relative; width: 58px; height: 34px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .piste {
  position: absolute; inset: 0; background: var(--piste); border-radius: 999px;
  transition: background .18s; pointer-events: none;
}
.switch .pouce {
  position: absolute; top: 3px; left: 3px; width: 28px; height: 28px;
  border-radius: 50%; background: #fff; transition: transform .18s;
  pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.switch input:checked + .piste { background: var(--bleu); }
.switch input:checked + .piste + .pouce { transform: translateX(24px); }
.switch input:focus-visible + .piste { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* L'interrupteur du bloc « réglages rapides » : aligné à droite, comme la maquette. */
.reglage .switch { margin-left: auto; }
.reglage-bascule { display: flex; align-items: center; min-height: var(--tap); }

/* Barre de niveau du micro (étalonnage) */
.niveau {
  height: 15px; background: var(--carte2); border-radius: 999px;
  overflow: hidden; position: relative; margin: 12px 0 4px;
}
.niveau .barre-n { height: 100%; background: linear-gradient(90deg, var(--vert), var(--bleu)); width: 0; transition: width .08s linear; }
.niveau .seuil-n { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--rouge); }

/* ---------- segments match / entrainement ---------- */

/* LES PASTILLES DE LANGUE — treize choix qui s’enroulent. `.segment` ne peut
   pas servir : il partage la largeur en parts égales, ce qui écrase treize
   libellés. Même langage visuel, même hauteur de cible. */
.langues { display: flex; flex-wrap: wrap; gap: 8px; }
.langue {
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--trait-fort);
  border-radius: 12px;
  background: var(--carte2);
  color: var(--doux);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.langue.on {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
}

.segments { display: flex; gap: 0; margin: 0 0 12px; background: var(--carte2); border: 1px solid var(--trait); border-radius: 12px; padding: 4px; }
.segment {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--doux);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
}
.segment.on { background: var(--bleu); color: #fff; }

/* ---------- inventaires (armes, munitions) ---------- */

.inv-ligne { display: flex; align-items: stretch; border-bottom: 1px solid var(--trait); }
.inv-ligne:last-of-type { border-bottom: 0; }
.inv-choix {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px 12px 18px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.inv-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.coche {
  width: 21px;
  height: 21px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--trait-fort);
  position: relative;
}
/* La coche pleine se dessine en CSS : deux traits, aucune image. */
.coche.on { border-color: var(--bleu); background: var(--bleu); }
.coche.on::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}
.inv-suppr {
  width: var(--tap);
  min-height: var(--tap);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--faible);
  cursor: pointer;
}
.inv-suppr:hover { color: var(--rouge); }
.inv-ajout { display: flex; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--trait); }
.inv-ajout .saisie-texte { flex: 1 1 auto; width: auto; min-width: 0; }
.inv-ajout .btn { flex: none; padding: 0 16px; }

/* La note sous le grand bouton, pour le tir a sec. */
.sous-cta { margin: -6px 0 14px; font-size: 12.5px; color: var(--faible); line-height: 1.4; }

/* ---------- glisser pour supprimer ---------- */

.glis { position: relative; overflow: hidden; border-bottom: 1px solid var(--trait); }
.glis:last-child { border-bottom: 0; }
.glis-fond { position: absolute; inset: 0; display: flex; justify-content: flex-end; background: var(--rouge); }
.glis-suppr {
  width: 88px;
  min-height: 44px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
}
/* `touch-action: pan-y` laisse le défilement VERTICAL au navigateur et ne
   réserve que l'horizontal : sans lui, la liste ne défilerait plus sous le
   doigt une fois le geste reconnu. */
.glis-avant { position: relative; background: var(--carte); touch-action: pan-y; will-change: transform; }
.glis-avant .item { border-bottom: 0; }

/* Le bandeau d annulation : au-dessus de la barre du bas, comme un toast,
   mais il porte une ACTION et ne disparait pas au toucher. */
.annuler {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--toast-fond);
  border: 1px solid var(--trait-fort);
  color: #f2f5f9;
  padding: 10px 10px 10px 15px;
  border-radius: var(--r-petit);
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  z-index: 22;
}
.annuler.on { opacity: 1; transform: none; }
.annuler-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: var(--bleu);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  flex: none;
}

/* La pastille de nature, dans les listes et le detail. */
.puce.match { background: rgba(255, 159, 10, .18); color: var(--orange); }

/* ---------- messages ---------- */

.toast {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  background: var(--toast-fond);
  border: 1px solid var(--trait-fort);
  color: var(--texte);
  padding: 13px 15px;
  border-radius: var(--r-petit);
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
  z-index: 20;
}
.toast.on { opacity: 1; transform: none; }

.alerte { border-left: 3px solid var(--orange); }
.alerte.grave { border-left-color: var(--rouge); }
.puce { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.puce.vert { background: rgba(50, 215, 75, .16); color: var(--vert); }
.puce.rouge { background: rgba(255, 69, 58, .16); color: var(--rouge); }
.puce.orange { background: rgba(255, 159, 10, .16); color: var(--orange); }
.puce.bleu { background: rgba(10, 132, 255, .16); color: var(--bleu); }

.backdrop {
  position: fixed; inset: 0; background: var(--voile);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 30;
  backdrop-filter: blur(3px);
}
.modal {
  background: var(--carte); border: 1px solid var(--trait-fort);
  border-radius: var(--r); padding: 20px; max-width: 420px; width: 100%;
}
.modal h3 { margin: 0 0 10px; font-size: 17px; }
.modal p { color: var(--doux); font-size: 14px; margin: 9px 0; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1 1 0; min-width: 0; }

/* Une icône dont le nom n'existe pas doit SE VOIR en développement. */
.ic-inconnue { color: var(--rouge); }

/* ---------- impression (le PDF) ---------- */

@media print {
  :root {
    --fond: #fff; --fond2: #fff; --carte: #fff; --carte2: #fff;
    --trait: #bbb; --trait-fort: #999; --texte: #000; --doux: #333; --faible: #555;
  }
  .barre, .nav, .toast, .btn, .backdrop, .filigrane, .scene { display: none !important; }
  html, body, .app { background: #fff; color: #000; }
  .app { background-image: none; }
  .vue { padding: 0; }
  .card { border: 1px solid #bbb; break-inside: avoid; background: #fff; }
  .tbl th, .tbl td { border-bottom: 1px solid #ddd; }
  .impr-entete { display: block !important; margin-bottom: 14px; }
  @page { margin: 14mm; }
}
.impr-entete { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, .anneau-arc { transition: none !important; animation: none !important; }
}

/* ---------- signaler un bug ou une idée (07/10/2026) ---------- */

/* LA MISE EN PAGE DU PANNEAU VIT ICI, PAS EN STYLE EN LIGNE. Le module de Skorio
   portait 34 `style:` en objet ; le `h()` de cette app pose le style en CHAÎNE, et un
   objet y deviendrait « [object Object] » sans la moindre erreur. Tout est donc remonté
   dans une feuille de style, sous `[data-signalement]` : la portée est close par
   construction, aucune classe ne peut collider avec un écran, et le panneau suit les
   mêmes variables de thème que le reste de l'app. */

.sig-voile {
  position: fixed; inset: 0;
  background: var(--voile, rgba(0, 0, 0, .55));
  display: flex; justify-content: center;
  padding: 16px; overflow-y: auto;
  backdrop-filter: blur(3px);
}
[data-signalement].card { margin: auto 0; max-width: 480px; width: 100%; }
[data-signalement] h2 { margin: 0; font-size: 17px; }
[data-signalement] textarea,
[data-signalement] input[type="text"] {
  width: 100%; margin-top: 10px;
  min-height: var(--tap);
  padding: 11px 12px;
  background: var(--carte2); color: var(--texte);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  font: inherit; font-size: 15px;
}
[data-signalement] textarea { resize: vertical; }
[data-signalement] .sig-groupe { margin-top: 14px; }
[data-signalement] .sig-groupe > .note { margin: 0 0 6px; }
/* LES SEGMENTS SE PARTAGENT LA PLACE PAR LEUR CONTENU, ET PASSENT À LA LIGNE
   (07/10/2026, défaut trouvé en REGARDANT l'écran en allemand). `.segment` est en
   `flex: 1 1 0` dans toute l'app : trois parts rigoureusement égales, ce qui est juste
   partout ailleurs — ses libellés y sont courts. Ici les trois choix sont des mots
   entiers, et en allemand « Verbesserung » réclame 95 px pour 80 : mesuré à 320 px,
   **trois segments sur neuf étaient COUPÉS** (aussi « Blockierend » et « Geringfügig »).
   Un mot d'un seul tenant ne peut pas se replier — c'est le RANG qui doit céder.
   `1 1 auto` leur donne au moins ce que leur mot demande et partage le reste ;
   `wrap` est le filet pour une langue où même cela ne suffirait pas. Mesuré après :
   0 coupé, 0 cible sous 44 px, un rang qui passe de 53 à 97 px — et une ligne de plus
   vaut mieux qu'un mot tronqué. */
[data-signalement] .segments { margin: 0; flex-wrap: wrap; }
[data-signalement] .segment { flex: 1 1 auto; }

/* LES SEPT STATUTS NE TIENNENT PAS DANS UN `.segments` : à 320 px ils feraient 45 px
   chacun, sous la cible tactile. D'où des pastilles de TEXTE qui passent à la ligne —
   `.pastille` de cette app est un rond de 36 px pour les coups, elle ne convient pas. */
[data-signalement] .sig-chips { display: flex; flex-wrap: wrap; gap: 8px; }
[data-signalement] .sig-chip {
  min-height: var(--tap); padding: 9px 14px;
  background: var(--carte2); color: var(--doux);
  border: 1px solid var(--trait); border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
}
[data-signalement] .sig-chip[aria-pressed="true"] {
  background: var(--bleu); border-color: var(--bleu); color: #fff;
}

[data-signalement] .sig-tete { display: flex; align-items: center; gap: 10px; }
[data-signalement] .sig-tete h2 { flex: 1; }
[data-signalement] .sig-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* Côte à côte quand il y a la place, l'un sous l'autre sinon : « Speichern und senden »
   tient sur trois lignes dans 120 px. Chaque bouton réclame 160 px. */
[data-signalement] .sig-actions > .btn { flex: 1 1 160px; }
[data-signalement] .sig-centre { margin-top: 10px; display: flex; justify-content: center; }
[data-signalement] .sig-centre > .btn { width: auto; }
[data-signalement] .sig-liste { margin: 14px 0 0; }
/* LE TITRE D'UNE LIGNE EST FAIT DE PLUSIEURS MORCEAUX, ET C'EST OBLIGATOIRE : le
   numéro est une SAISIE de l'app (`brut:`) et le type comme le statut sont des
   libellés TRADUITS (`text:`) — une seule chaîne les ferait tous passer par le même
   chemin. Mais `.item .t span` est en `display:block` dans toute l'app, parce que ce
   span-là y est le SOUS-TITRE : mesuré, les quatre morceaux tombaient chacun sur sa
   ligne (« BUG-0001 · » / « Bug » / « · » / « Transmis »). Ceux du titre redeviennent
   en ligne ; le sous-titre, enfant direct de `.t`, ne bouge pas. */
[data-signalement] .item .t b span { display: inline; }
[data-signalement] .sig-bloc { margin-top: 14px; }
[data-signalement] .sig-joint {
  white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto;
  margin: 0; padding: 10px; background: var(--carte2); border-radius: var(--r-petit);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* L'OGIVE ET LE PANNEAU NE S'IMPRIMENT PAS. `@media print` cache déjà `.toast`,
   `.backdrop` et `.btn` ; ces deux-là sont NEUFS et hors de `.app`, donc ils auraient
   figuré sur le PDF d'une passe. */
@media print {
  #signaler-bug, .sig-voile { display: none !important; }
}

/* Le message bref porte parfois un bouton — il doit alors recevoir les clics, que
   `.toast` refuse par défaut (`pointer-events: none`). */
.toast.act { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.toast.act > span { flex: 1; min-width: 0; }
.toastact {
  flex: none; min-height: 36px; padding: 7px 13px;
  background: none; border: 1px solid var(--trait-fort); border-radius: 999px;
  color: var(--bleu); font: inherit; font-size: 13.5px; font-weight: 700;
}