/* ==========================================================================
   Composants. Tout ce qui n'est pas le tampon reste calme et discipline.
   ========================================================================== */

/* --- Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: var(--texte-police); font-weight: var(--gras-fort); font-size: var(--t-md);
  padding: var(--e3) var(--e6); border: 2px solid var(--encre); border-radius: var(--rayon);
  background: var(--rouge-avion); color: #fff; cursor: pointer;
  text-decoration: none; transition: transform var(--d-appui) var(--sortie);
  box-shadow: 0 3px 0 var(--encre);
}
.bouton:active { transform: scale(0.97) translateY(2px); box-shadow: 0 1px 0 var(--encre); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.bouton.secondaire { background: transparent; color: var(--texte); box-shadow: none; }
.bouton.bleu { background: var(--bleu-avion); }
.bouton.vert { background: var(--vert-tampon); }
.bouton.large { width: 100%; padding: var(--e4); font-size: var(--t-lg); }
.bouton.petit { padding: var(--e2) var(--e3); font-size: var(--t-sm); box-shadow: 0 2px 0 var(--encre); }

/* --- Cartes -------------------------------------------------------------- */
.carte {
  background: var(--fond-carte); border: 1px solid var(--trait);
  border-radius: var(--rayon-lg); padding: var(--e6); box-shadow: var(--ombre-carte);
}
.carte-badge { position: relative; overflow: hidden; }
.carte-badge::before {
  content: ''; position: absolute; inset: 0; height: var(--lisere);
  background-image: repeating-linear-gradient(-45deg,
    var(--rouge-avion) 0 10px, var(--papier) 10px 20px,
    var(--bleu-avion) 20px 30px, var(--papier) 30px 40px);
}

/* --- Insigne de rang ----------------------------------------------------- */
.insigne {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: var(--e1) var(--e3); border-radius: var(--rayon-rond);
  border: 2px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent);
}
.insigne .pastille { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.insigne.supersonic {
  background: linear-gradient(100deg, #D8CFE8, #F2E9FF, #CFE4E8, #D8CFE8);
  color: #3A2F55; border-color: #B7A8D6;
}

.barre-rang { height: 10px; background: var(--trait); border-radius: var(--rayon-rond); overflow: hidden; }
.barre-rang > i { display: block; height: 100%; background: var(--bleu-avion); transition: width var(--d-compteur) var(--sortie); }

/* --- Formulaires --------------------------------------------------------- */
.champ { display: block; margin-bottom: var(--e4); }
.champ > span { display: block; font-weight: var(--gras-moyen); margin-bottom: var(--e1); }
.champ .aide { font-size: var(--t-sm); color: var(--texte-doux); font-weight: 400; }
input[type='text'], input[type='email'], input[type='search'], input[type='number'], select, textarea {
  width: 100%; font-family: var(--texte-police); font-size: var(--t-md);
  padding: var(--e3); border: 2px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-carte); color: var(--texte);
}
input:focus, textarea:focus, select:focus { border-color: var(--bleu-avion); }
textarea { min-height: 7rem; resize: vertical; }

.champ-code input {
  font-family: var(--mono); font-size: var(--t-xl); letter-spacing: 0.5em;
  text-align: center; text-transform: uppercase; padding: var(--e4) var(--e2);
}

.case { display: flex; gap: var(--e3); align-items: flex-start; margin-bottom: var(--e4); }
.case input { width: 1.25rem; height: 1.25rem; margin-top: 3px; accent-color: var(--rouge-avion); flex: none; }

/* --- Message d'erreur : ni excuse, ni « Oups » --------------------------- */
.erreur {
  border-left: 4px solid var(--rouge-avion); background: color-mix(in srgb, var(--rouge-avion) 8%, transparent);
  padding: var(--e3) var(--e4); border-radius: var(--rayon); margin-bottom: var(--e4);
}
.note {
  border-left: 4px solid var(--bleu-avion); background: color-mix(in srgb, var(--bleu-avion) 7%, transparent);
  padding: var(--e3) var(--e4); border-radius: var(--rayon); margin-bottom: var(--e4);
}
.regle-photo {
  border: 2px dashed var(--rouge-avion); border-radius: var(--rayon);
  padding: var(--e4); margin-bottom: var(--e4);
}
.regle-photo strong { display: block; font-family: var(--display); font-size: var(--t-lg); }

/* --- Fil d'actualite ----------------------------------------------------- */
.fil { list-style: none; margin: 0; padding: 0; }
.fil li {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) 0; border-bottom: 1px solid var(--trait);
  animation: glisse var(--d-entree) var(--sortie) backwards;
}
.fil li time { font-family: var(--mono); font-size: var(--t-xs); color: var(--texte-doux); white-space: nowrap; }
.fil li img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--rayon-sm); flex: none; }
.fil .numero { font-family: var(--mono); font-weight: 500; color: var(--rouge-avion); text-decoration: none; }

@keyframes glisse { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- Tableaux de classement ---------------------------------------------- */
.classement { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.classement th {
  text-align: left; font-family: var(--mono); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--texte-doux);
  padding: var(--e2); border-bottom: 2px solid var(--trait); font-weight: 500;
}
.classement td { padding: var(--e2); border-bottom: 1px solid var(--trait); }
.classement .place { font-family: var(--display); font-weight: var(--gras-fort); width: 3ch; }
.classement tr.surligne { background: color-mix(in srgb, var(--jaune-douane) 22%, transparent); }
.classement .monte { color: var(--vert-tampon); }
.classement .descend { color: var(--rouge-avion); }

/* --- Onglets ------------------------------------------------------------- */
.onglets { display: flex; gap: var(--e1); overflow-x: auto; padding-bottom: var(--e2); margin-bottom: var(--e4); }
.onglets button {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  padding: var(--e2) var(--e3); border: 1px solid var(--trait); border-radius: var(--rayon-rond);
  background: transparent; color: var(--texte-doux); cursor: pointer; white-space: nowrap;
}
.onglets button[aria-selected='true'] { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* --- Chargement : un tampon qui tourne, jamais un rond ------------------- */
.chargement {
  width: 44px; height: 44px; margin: var(--e8) auto; opacity: 0.5;
  animation: tourne 2.4s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* --- Carte ---------------------------------------------------------------- */
#carte { width: 100%; height: calc(100dvh - 8rem); }
.grappe {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--encre); color: var(--papier); font-family: var(--mono); font-size: var(--t-xs);
}
.pastille-badge {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 500;
  border: 2px solid var(--papier); box-shadow: var(--ombre-carte); cursor: pointer;
}
@keyframes onde {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rouge-avion) 60%, transparent); }
  to   { box-shadow: 0 0 0 40px transparent; }
}
.pastille-badge.direct { animation: onde 1.6s var(--sortie) 3; }

/* --- Compteur d'XP -------------------------------------------------------- */
.compteur { font-family: var(--display); font-weight: var(--gras-fort); font-size: var(--t-2xl); }

/* --- Selecteur de langue -------------------------------------------------- */
.langue { border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--e1) var(--e2);
  background: var(--fond-carte); color: var(--texte); font-size: var(--t-sm); }

[dir='rtl'] .entete nav { margin-left: 0; margin-right: auto; }
[dir='rtl'] .erreur, [dir='rtl'] .note { border-left: none; border-right: 4px solid var(--rouge-avion); }

/* ==========================================================================
   Refonte « fil » — les cartes de passage.
   Le fil est desormais la page d'accueil. Une carte = un passage = une photo.
   La photo occupe toute la largeur : c'est elle la preuve et c'est elle qu'on
   vient voir. Tout le reste tient sur deux lignes de texte.
   ========================================================================== */

.log {
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  background: var(--fond-doux);
  margin-bottom: var(--e4);
}
.log-entete {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e3) var(--e2);
}
.log-entete .numero {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  padding: 2px 6px; border-radius: 4px;
  background: var(--accent-doux); color: var(--accent); text-decoration: none;
}
.log-entete .qui { font-weight: var(--gras-moyen); }
.log-entete time { margin-inline-start: auto; font-size: var(--t-xs); color: var(--texte-doux); }

.log-photo {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--fond-doux);
}
.log-corps { padding: var(--e3); }
.log-corps p { margin: 0 0 var(--e2); }
.log-lieu { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; font-size: var(--t-sm); }
.log-xp {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  color: var(--vert-tampon);
}

/* Le cachet de distance : un petit tampon rond pose sur la photo, qui dit en
   un coup d'oeil ce que ce passage a fait gagner au badge. */
.cachet-km {
  /* Le seul geste graphique du fil : un cachet d'encre pose de travers. */
  position: absolute; inset-block-start: var(--e3); inset-inline-end: var(--e3);
  display: grid; place-items: center;
  width: 4.25rem; height: 4.25rem; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  font-family: var(--mono); font-size: var(--t-sm); font-weight: 500;
  transform: rotate(-8deg); line-height: 1;
  text-align: center;
}
.log-media { position: relative; }

/* --- Chiffres de tete ------------------------------------------------------
   Trois chiffres, pas quatre. Chacun se lit sans explication. */
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.chiffre {
  padding: var(--e3) var(--e2);
  border: 1px solid var(--trait); border-radius: var(--rayon-lg);
  text-align: center;
}
.chiffre b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: var(--t-lg); letter-spacing: -0.03em; line-height: 1.1;
}
.chiffre span {
  display: block; margin-top: 2px; font-size: 0.6875rem; line-height: 1.25;
  color: var(--texte-doux); text-transform: none; letter-spacing: 0;
  font-family: var(--texte-police);
}

/* --- Etats vides -----------------------------------------------------------
   Un ecran vide est une invitation, pas une erreur. */
.vide {
  padding: var(--e12) var(--e4); text-align: center; color: var(--texte-doux);
  border: 1px dashed var(--trait); border-radius: var(--rayon-lg);
}
.vide strong { display: block; color: var(--texte); font-family: var(--display); font-size: var(--t-lg); }

/* --- Segments (filtres du fil, onglets de classement) ---------------------- */
.segments {
  display: flex; gap: var(--e1); overflow-x: auto; scrollbar-width: none;
  margin-bottom: var(--e4); padding-bottom: 2px;
}
.segments::-webkit-scrollbar { display: none; }
.segments button {
  flex: 0 0 auto; padding: var(--e2) var(--e3);
  border: 1px solid var(--trait); border-radius: 999px;
  background: none; color: var(--texte-doux);
  font: inherit; font-size: var(--t-sm); cursor: pointer;
  white-space: nowrap;
}
.segments button[aria-selected='true'] {
  background: var(--accent); border-color: var(--accent); color: #FFF;
}

/* --- Bascule plan / satellite ---------------------------------------------
   Un seul bouton, pose sur la carte. Deux vues suffisent : le plan pour lire
   les trajets, le satellite pour reconnaitre un endroit ou l'on est alle. */
.bascule-carte {
  position: absolute; inset-block-end: var(--e4); inset-inline-start: var(--e4);
  z-index: 5; padding: var(--e2) var(--e3);
  border: 1px solid var(--trait); border-radius: 999px;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(8px);
  color: var(--texte); font: inherit; font-size: var(--t-sm); font-weight: var(--gras-moyen);
  cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
}
.bascule-carte:hover { border-color: var(--accent); color: var(--accent); }
.bascule-carte[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: #FFF; }

/* Sur imagerie satellite, les pastilles ont besoin d'un contour pour rester
   lisibles sur n'importe quel terrain. */
.sur-satellite .pastille-badge { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9); }

.maplibregl-ctrl-group { border-radius: var(--rayon) !important; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* ==========================================================================
   Formulaire de passage, en trois etapes.
   Une etape fermee reste visible mais eteinte : on voit qu'il reste deux
   choses a faire, sans etre submerge par onze champs a la fois.
   ========================================================================== */

.etape {
  border: 0; border-top: 1px solid var(--trait);
  margin: 0; padding: var(--e6) 0 var(--e8);
  transition: opacity 200ms ease;
}
.etape:first-of-type { border-top: 0; padding-top: 0; }
.etape[disabled] { opacity: .35; pointer-events: none; }
.etape legend {
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--display); font-weight: 700; font-size: var(--t-lg);
  padding: 0; margin-bottom: var(--e4);
}
.etape legend .num {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1.5px solid var(--trait); color: var(--texte-doux);
  font-family: var(--mono); font-size: var(--t-sm);
}
.etape[aria-current='step'] legend .num,
.etape:not([disabled]) legend .num {
  border-color: var(--accent); color: var(--accent); background: var(--accent-doux);
}
@media (prefers-reduced-motion: reduce) { .etape { transition: none; } }

/* Photo ou video : deux tuiles de meme poids, on choisit l'une des deux. */
.choix-media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-top: var(--e4); }
.tuile-media {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e2); padding: var(--e6) var(--e3); min-height: 6.5rem;
  border: 1.5px dashed var(--trait); border-radius: var(--rayon-lg);
  background: none; color: var(--texte); font: inherit; cursor: pointer; text-align: center;
}
.tuile-media:hover { border-color: var(--accent); color: var(--accent); }
.tuile-media .ico { font-size: 1.5rem; line-height: 1; }
.tuile-media b { font-size: var(--t-sm); font-weight: var(--gras-moyen); }

.apercu { display: block; width: 100%; max-height: 18rem; object-fit: cover;
  border-radius: var(--rayon-lg); margin-top: var(--e3); }

/* Propositions de villes : une liste courte, tapable au pouce. */
.propositions { list-style: none; margin: var(--e2) 0 0; padding: 0; }
.propositions li + li { border-top: 1px solid var(--trait); }
.propositions button {
  display: block; width: 100%; text-align: start;
  padding: var(--e3) var(--e2); border: 0; background: none;
  color: var(--texte); font: inherit; cursor: pointer;
}
.propositions button:hover,
.propositions button[aria-selected='true'] { background: var(--fond-doux); }

.aide.ok    { color: var(--vert-tampon); }
.aide.erreur { color: var(--accent); }

.mention-legale { margin-top: var(--e3); font-size: var(--t-xs); color: var(--texte-doux); text-align: center; }

.fin .compteur {
  font-family: var(--display); font-weight: 800; font-size: var(--t-3xl);
  color: var(--accent); margin: 0;
}