/* =========================================================================
   RUN BUILDER — thème régie sombre / accent vert
   ========================================================================= */

:root{
  --noir:        #080A09;
  --fond:        #0C0F0D;
  --panneau:     #121614;
  --panneau-2:   #171C19;
  --creux:       #0A0D0B;
  --trait:       #222A25;
  --trait-clair: #2E3833;

  --texte:       #E4EBE6;
  --texte-doux:  #9DAAA3;
  --texte-faible:#6B7A73;

  --vert:        #35D07F;
  --vert-vif:    #4FEE9A;
  --vert-sombre: #0E2A1E;
  --ambre:       #E3B04B;
  --rouge:       #E5544F;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

  --r: 6px;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; font-weight:600; }

code{ font-family:var(--mono); font-size:.85em; color:var(--vert); background:var(--vert-sombre); padding:1px 5px; border-radius:3px; }
kbd{ font-family:var(--mono); font-size:.8em; border:1px solid var(--trait-clair); border-bottom-width:2px; border-radius:4px; padding:1px 5px; color:var(--texte-doux); }

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

.entete{
  display:flex; align-items:center; gap:28px;
  padding:0 20px;
  background:var(--noir);
  border-bottom:1px solid var(--trait);
  position:sticky; top:0; z-index:20;
}

.marque{ display:flex; align-items:center; gap:12px; padding:12px 0; }

.dossard{
  font-family:var(--mono);
  font-size:20px; font-weight:700; letter-spacing:-1px;
  color:var(--noir);
  background:var(--vert);
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:var(--r);
}

.marque h1{ font-size:15px; letter-spacing:.02em; }
.marque p{ margin:0; font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--texte-faible); }

.onglets{ display:flex; gap:2px; align-self:stretch; }

.onglet{
  appearance:none; border:0; background:none;
  color:var(--texte-faible);
  font:inherit; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  padding:0 16px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .12s, border-color .12s;
}
.onglet:hover{ color:var(--texte-doux); }
.onglet.actif{ color:var(--vert); border-bottom-color:var(--vert); }
.onglet:focus-visible{ outline:2px solid var(--vert); outline-offset:-4px; }

/* ------------------------------------------------------------------ vues */

main{ flex:1; padding:20px; max-width:1280px; width:100%; margin:0 auto; }

.vue{ display:none; }
.vue.active{ display:block; animation:apparait .16s ease-out; }
@keyframes apparait{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

.barre-outils{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:16px;
}
.barre-outils.barre-sous{
  margin-top:-4px; margin-bottom:16px; padding:9px 12px;
  background:var(--panneau); border:1px solid var(--trait); border-radius:var(--r);
}
.pousse{ flex:1; }

input[type=file]{
  font:inherit; font-size:12px; color:var(--texte-doux);
  max-width:100%;
}
.tableau td input[type=checkbox]{ accent-color:var(--vert); width:15px; height:15px; cursor:pointer; vertical-align:middle; }
input[type=file]::file-selector-button{
  font:inherit; font-size:12px;
  background:var(--creux); color:var(--texte);
  border:1px solid var(--trait); border-radius:4px;
  padding:5px 10px; margin-right:8px; cursor:pointer;
}

/* jauge de progression le long du tracé */
.jauge{ position:relative; display:block; height:8px; border-radius:4px; background:var(--creux); overflow:hidden; }
.jauge > i{ position:absolute; left:0; top:0; bottom:0; background:var(--vert); border-radius:4px; }
td .jauge{ min-width:120px; }
tr.attenue{ opacity:.45; }

/* --------------------------------------------------------------- panneaux */

.panneau{
  background:var(--panneau);
  border:1px solid var(--trait);
  border-radius:var(--r);
  margin-bottom:16px;
  overflow:hidden;
}

.tete-panneau{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px;
  background:var(--panneau-2);
  border-bottom:1px solid var(--trait);
}
.tete-panneau h2{
  font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--texte-doux);
}
.tete-panneau .mini{ margin-left:auto; }
.tete-panneau .btn, .tete-panneau .segments{ margin-left:auto; }

.corps{ padding:16px; }
.corps.sans-marge{ padding:0; }

.grille-2{ display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:start; }
.grille-2 .panneau{ margin:0; }

.sous-titre{
  font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--texte-faible); margin:18px 0 8px;
  padding-bottom:6px; border-bottom:1px solid var(--trait);
}

.cache{ display:none !important; }

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

.champ{ margin-bottom:12px; }
.champ:last-child{ margin-bottom:0; }
.champ.court{ max-width:220px; }

.ligne-champ{ display:flex; gap:8px; }
.ligne-champ input{ flex:1; }
.ligne-champ .btn{ flex:none; align-self:stretch; }

label{
  display:block;
  font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--texte-faible);
  margin-bottom:5px;
}

input[type=text], input[type=password], input[type=number], select, textarea{
  width:100%;
  background:var(--creux);
  border:1px solid var(--trait);
  border-radius:4px;
  color:var(--texte);
  font:inherit;
  padding:7px 9px;
  transition:border-color .12s, box-shadow .12s;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, select:focus{
  outline:none;
  border-color:var(--vert);
  box-shadow:0 0 0 2px rgba(53,208,127,.15);
}
input::placeholder{ color:#4A554F; }

input[type=color]{
  width:36px; height:28px; padding:2px; flex:none;
  background:var(--creux); border:1px solid var(--trait); border-radius:4px; cursor:pointer;
}
input[type=color]::-webkit-color-swatch{ border:none; border-radius:2px; }
input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }

/* Safari/Chrome forcent un fond blanc sur les champs autocomplétés */
input:-webkit-autofill, input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--texte);
  caret-color:var(--texte);
  box-shadow:0 0 0 1000px var(--creux) inset;
  transition:background-color 9999s;
}

.chiffre{ font-family:var(--mono); }

select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--texte-faible) 50%),linear-gradient(135deg,var(--texte-faible) 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:30px;
}

.grille-champs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.grille-champs .champ{ margin-bottom:0; }

.aide{ font-size:11.5px; color:var(--texte-faible); margin:8px 0 0; }

/* --------------------------------------------------------------- boutons */

.btn{
  appearance:none;
  background:var(--panneau-2);
  border:1px solid var(--trait-clair);
  border-radius:4px;
  color:var(--texte);
  font:inherit; font-size:12.5px; font-weight:600;
  padding:7px 14px;
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.btn:hover{ background:#1F2622; border-color:#3B463F; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--vert); outline-offset:2px; }

.btn.petit{ padding:4px 10px; font-size:11px; }
.btn.fantome{ background:none; color:var(--texte-doux); }
.btn.fantome:hover{ color:var(--texte); }

.btn.envoi{
  background:var(--vert);
  border-color:var(--vert);
  color:#04150C;
}
.btn.envoi:hover{ background:var(--vert-vif); border-color:var(--vert-vif); }

.btn.danger{ color:var(--rouge); border-color:transparent; background:none; padding:4px 8px; }
.btn.danger:hover{ background:rgba(229,84,79,.12); }

.segments{ display:inline-flex; background:var(--creux); border:1px solid var(--trait); border-radius:4px; padding:2px; }
.segment{
  appearance:none; border:0; background:none; border-radius:3px;
  color:var(--texte-faible); font:inherit; font-size:11.5px; font-weight:600;
  padding:5px 12px; cursor:pointer;
  transition:background .12s, color .12s;
}
.segment:hover{ color:var(--texte-doux); }
.segment.actif{ background:var(--vert-sombre); color:var(--vert); }
.segment:focus-visible{ outline:2px solid var(--vert); outline-offset:1px; }

.bascule{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--texte-doux); cursor:pointer; user-select:none; }
.bascule input{ position:absolute; opacity:0; width:0; }
.bascule span{
  width:32px; height:18px; border-radius:9px;
  background:var(--creux); border:1px solid var(--trait);
  position:relative; transition:background .15s, border-color .15s;
}
.bascule span::after{
  content:""; position:absolute; top:2px; left:2px;
  width:12px; height:12px; border-radius:50%;
  background:var(--texte-faible);
  transition:transform .15s, background .15s;
}
.bascule input:checked + span{ background:var(--vert-sombre); border-color:var(--vert); }
.bascule input:checked + span::after{ transform:translateX(14px); background:var(--vert); }
.bascule input:focus-visible + span{ outline:2px solid var(--vert); outline-offset:2px; }

.mini{ font-size:11.5px; color:var(--texte-faible); }
.mini b{ color:var(--texte-doux); font-family:var(--mono); font-weight:600; }

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

.tableau{ width:100%; border-collapse:collapse; }
.tableau th{
  text-align:left;
  font-size:9.5px; text-transform:uppercase; letter-spacing:.13em;
  color:var(--texte-faible); font-weight:600;
  padding:8px 12px;
  border-bottom:1px solid var(--trait);
  background:var(--panneau-2);
}
.tableau td{ padding:0; border-bottom:1px solid var(--trait); vertical-align:middle; }
.tableau tbody tr:last-child td{ border-bottom:0; }
.tableau tbody tr:hover{ background:rgba(255,255,255,.015); }

.tableau td input[type=text]{
  border:0; border-radius:0; background:none;
  padding:9px 12px;
}
.tableau td input[type=text]:focus{
  background:var(--creux);
  box-shadow:inset 0 0 0 1px var(--vert);
}

.col-rang{ width:64px; }
.col-pays{ width:80px; }
.col-chrono{ width:120px; }
.col-sel{ width:38px; }
.col-id{ width:150px; }
.col-km{ width:110px; }
.col-act{ width:44px; }

.rang{
  font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--texte-faible);
  text-align:center;
  padding:9px 0;
}
tr.podium .rang{ color:var(--vert); }

.tableau td input.chiffre{ font-family:var(--mono); }

.tete-panneau #cl-plage-info{ margin-left:14px; }
.tete-panneau .cl-plage{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--texte-faible);
}
.tete-panneau .cl-plage input{
  width:52px; padding:4px 6px;
  background:transparent;
  border:1px solid var(--trait);
  border-radius:4px;
  color:var(--vert);
  font-family:var(--mono); font-size:12px; font-weight:600;
  text-align:center;
  accent-color:var(--vert);
  transition:border-color .12s, box-shadow .12s;
}
.tete-panneau .cl-plage input:focus{
  outline:none;
  border-color:var(--vert);
  box-shadow:0 0 0 2px rgba(53,208,127,.15);
}

.puce-sel{
  width:14px; height:14px; margin:0 auto;
  border-radius:50%; border:1px solid var(--trait-clair);
  cursor:pointer; display:block;
  transition:border-color .12s, box-shadow .12s;
}
tr.selection .puce-sel{ border-color:var(--vert); background:var(--vert); box-shadow:0 0 0 3px rgba(53,208,127,.18); }
tr.selection{ background:rgba(53,208,127,.05) !important; }
tr.selection td:first-child{ box-shadow:inset 2px 0 0 var(--vert); }

/* ------------------------------------------------------ rail du parcours */

.rail{
  position:relative;
  height:74px;
  padding:0 6px;
}
.rail-ligne{
  position:absolute; left:6px; right:6px; top:34px; height:3px;
  background:var(--trait); border-radius:2px;
}
.rail-fait{
  position:absolute; left:0; top:0; height:100%;
  background:var(--vert); border-radius:2px;
  transition:width .3s cubic-bezier(.2,.8,.2,1);
}
.rail-point{
  position:absolute; top:28px; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%;
  background:var(--fond); border:2px solid var(--trait-clair);
  cursor:pointer;
  transition:border-color .15s, transform .15s;
}
.rail-point:hover{ border-color:var(--texte-doux); transform:translateX(-50%) scale(1.15); }
.rail-point.passe{ border-color:var(--vert); }
.rail-point.actif{
  border-color:var(--vert); background:var(--vert);
  box-shadow:0 0 0 5px rgba(53,208,127,.2);
}
.rail-etiq{
  position:absolute; top:52px; transform:translateX(-50%);
  font-size:10px; color:var(--texte-faible);
  white-space:nowrap; pointer-events:none;
}
.rail-point.actif + .rail-etiq{ color:var(--vert); font-weight:600; }
.rail-km{
  position:absolute; top:6px; transform:translateX(-50%);
  font-family:var(--mono); font-size:10px; color:var(--texte-faible);
  pointer-events:none;
}

/* ------------------------------------------------------- cartouche météo */

.cartouche-meteo{
  background:linear-gradient(160deg,var(--vert-sombre),var(--creux));
  border:1px solid var(--trait);
  border-radius:var(--r);
  padding:20px;
}
.cm-temp{ font-family:var(--mono); font-size:52px; line-height:1; font-weight:600; color:var(--vert); }
.cm-temp small{ font-size:20px; color:var(--texte-doux); margin-left:2px; }
.cm-libelle{ font-size:15px; margin-top:6px; color:var(--texte); }
.cm-details{ list-style:none; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--trait); display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.cm-details li{ display:flex; justify-content:space-between; font-size:12px; color:var(--texte-faible); }
.cm-details b{ font-family:var(--mono); color:var(--texte); font-weight:600; }

/* ---------------------------------------------------------- chronomètre */

.cartouche-chrono{
  background:linear-gradient(160deg,var(--vert-sombre),var(--creux));
  border:1px solid var(--trait);
  border-radius:var(--r);
  padding:24px 20px;
  text-align:center;
}
.ch-etat{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--texte-faible);
}
.ch-etat::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--texte-faible); }
.cartouche-chrono.actif .ch-etat{ color:var(--vert); }
.cartouche-chrono.actif .ch-etat::before{ background:var(--vert); box-shadow:0 0 0 4px rgba(53,208,127,.18); }
.ch-temps{
  font-family:var(--mono); font-size:56px; font-weight:600; letter-spacing:.01em;
  color:var(--texte); margin-top:10px;
}
.cartouche-chrono.actif .ch-temps{ color:var(--vert); }
.cartouche-chrono .cm-details{ text-align:left; }

/* ------------------------------------------------------ fiches coureurs */

.fiches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }

.fiche{
  background:var(--creux);
  border:1px solid var(--trait);
  border-radius:var(--r);
  padding:14px;
}
.fiche-tete{
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--texte-faible);
}
.fiche-num{
  font-family:var(--mono); font-size:11px; font-weight:700;
  width:20px; height:20px; display:grid; place-items:center;
  background:var(--vert-sombre); color:var(--vert); border-radius:3px;
}
.ligne-dossard{ display:flex; gap:8px; }
.ligne-dossard input{ flex:1; }

/* --------------------------------------------------------------- aperçu */

.apercu{
  margin-top:16px;
  background:var(--panneau);
  border:1px solid var(--trait);
  border-radius:var(--r);
}
.apercu summary{
  padding:9px 16px; cursor:pointer;
  font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--texte-faible);
  user-select:none;
}
.apercu summary:hover{ color:var(--texte-doux); }
.apercu[open] summary{ border-bottom:1px solid var(--trait); }

pre{
  font-family:var(--mono); font-size:11.5px; line-height:1.55;
  color:var(--texte-doux);
  background:var(--creux);
  margin:0; padding:14px 16px;
  overflow:auto; max-height:340px;
}

#rg-test-cles{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.pastille{
  font-family:var(--mono); font-size:11px;
  background:var(--vert-sombre); color:var(--vert);
  border:1px solid rgba(53,208,127,.25);
  border-radius:3px; padding:3px 7px;
  cursor:pointer;
}
.pastille:hover{ background:rgba(53,208,127,.2); }
.pastille.tableau-trouve{ background:rgba(227,176,75,.12); color:var(--ambre); border-color:rgba(227,176,75,.3); }

/* ---------------------------------------------------------- barre régie */

.regie{
  display:flex; align-items:center; gap:10px;
  padding:8px 20px;
  background:var(--noir);
  border-top:1px solid var(--trait);
  position:sticky; bottom:0;
}
.voyant{
  width:8px; height:8px; border-radius:50%;
  background:var(--texte-faible);
  transition:background .2s, box-shadow .2s;
}
.voyant.ok{ background:var(--vert); box-shadow:0 0 8px rgba(53,208,127,.6); }
.voyant.ko{ background:var(--rouge); box-shadow:0 0 8px rgba(229,84,79,.5); }

/* -------------------------------------------------------------- toasts */

.toasts{ position:fixed; bottom:52px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:60; }
.toast{
  background:var(--panneau-2);
  border:1px solid var(--trait-clair);
  border-left:3px solid var(--vert);
  border-radius:4px;
  padding:9px 14px;
  font-size:12.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:entre .18s ease-out;
  max-width:380px;
}
.toast.erreur{ border-left-color:var(--rouge); }
.toast.sortie{ animation:sort .2s ease-in forwards; }
@keyframes entre{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:none; } }
@keyframes sort{ to{ opacity:0; transform:translateX(12px); } }

/* ------------------------------------------------------------ responsive */

@media (max-width:1000px){
  .grille-2{ grid-template-columns:1fr; }
  .entete{ flex-direction:column; align-items:stretch; gap:0; padding:0 12px; }
  .onglets{ overflow-x:auto; }
  .onglet{ padding:10px 12px; }
  main{ padding:14px; }
}

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

/* --------------------------------------------------- lieux : kilométrages */

.tableau-lieux td input.chiffre{ text-align:center; }

/* ------------------------------------------- courses sans lieux, clés JSON */

.segments .segment em{ font-style:normal; color:var(--ambre); }
.cle-json{
  font-family:var(--mono); font-size:9.5px; letter-spacing:0;
  color:var(--vert); background:var(--vert-sombre);
  border-radius:3px; padding:2px 6px; margin-left:8px; text-transform:none;
}
.select-inline{ width:auto; min-width:190px; padding:6px 30px 6px 9px; font-size:12px; }

/* ------------------------------------ en-tête à plusieurs contrôles, champ inactif */

.tete-actions{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.tete-panneau .tete-actions .segments{ margin-left:0; }
.champ.inactif{ opacity:.4; }
.champ.inactif input{ text-decoration:line-through; }
/* ------------------------------------------ case à cocher dans un formulaire */

.bascule-champ{ margin:4px 0 2px; }