/* ============================================================
   RAPIDONS — L'espace des partenaires de flotte

   Les memes couleurs que le bureau, mais une mise en page propre :
   un partenaire regarde sa flotte de temps en temps, il ne passe
   pas sa journee ici. Pas de menu lateral, tout tient sur une page.
   ============================================================ */

:root{
  --nuit:#080F0B; --nuit2:#0B1E14;
  --fond:#F7FAF8; --blanc:#fff;
  --texte:#0F1A14; --gris:#42524A; --gris2:#63736A; --gris3:#6F7F76;
  --bord:#E4EBE7; --bord2:#F0F5F2;
  --vert:#157D3C; --vertPale:#E9F4EC; --vertTexte:#0F6E56;
  --jaune:#F7B308; --jaunePale:#FEF3D6; --jauneTexte:#8A6A0B;
  --frein:#C8341B; --freinPale:#FDEDE9;
}

*{box-sizing:border-box;margin:0;padding:0}

body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  system-ui,sans-serif;background:var(--fond);color:var(--texte);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}

button{font-family:inherit;font-size:13.5px;cursor:pointer;border:none;
  border-radius:9px;padding:10px 16px;font-weight:600;transition:.15s}
.primaire{background:var(--vert);color:#fff}
.primaire:hover{background:#0F6830}
.neutre{background:var(--blanc);color:var(--gris);
  border:.5px solid var(--bord)}
.neutre:hover{background:var(--fond);border-color:var(--gris3)}

input,select,textarea{font-family:inherit;font-size:14px;width:100%;
  padding:10px 13px;border:.5px solid var(--bord);border-radius:9px;
  background:var(--blanc);color:var(--texte);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;
  border-color:var(--vert);box-shadow:0 0 0 3px rgba(21,125,60,.08)}
input::placeholder{color:var(--gris3);font-style:italic}

.carte{background:var(--blanc);border:.5px solid var(--bord);
  border-radius:11px}
.muet{color:var(--gris2);font-size:12.5px}
.etiquette{font-size:10px;font-weight:600;letter-spacing:1px;
  color:var(--gris3);text-transform:uppercase}

/* ---------- La connexion ---------- */
.entree{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(145deg,var(--nuit),#173626)}
.entree-carte{background:var(--blanc);border-radius:18px;padding:32px;
  width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3)}

/* ---------- La page ---------- */
.tete{background:linear-gradient(125deg,var(--nuit),#173626);
  padding:18px 0}
.dedans{max-width:980px;margin:0 auto;padding:0 20px}

.chiffres{display:grid;gap:10px;margin:16px 0;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}

/* ---------- Une moto ---------- */
.moto{display:flex;align-items:center;gap:14px;padding:14px 17px;
  cursor:pointer;border-bottom:.5px solid var(--bord2);transition:.12s}
.moto:last-child{border-bottom:none}
.moto:hover{background:var(--fond)}
.plaque{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;font-weight:700;letter-spacing:.3px}

.pastille{font-size:11px;font-weight:700;padding:4px 11px;
  border-radius:99px;white-space:nowrap}

/* ---------- Le voile des dialogues ---------- */
.voile{position:fixed;inset:0;background:rgba(11,30,20,.45);
  z-index:2000;display:grid;place-items:center;padding:20px;
  overflow-y:auto}
.dialogue{background:var(--blanc);border-radius:16px;padding:24px;
  width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.25)}

.champ{margin-bottom:14px}
.champ label{display:block;font-size:12.5px;color:var(--gris2);
  margin-bottom:5px;font-weight:500}

/* ---------- Le mot qui passe ---------- */
.bandeau{position:fixed;bottom:22px;left:50%;z-index:2100;
  transform:translateX(-50%);padding:12px 20px;border-radius:11px;
  font-size:13.5px;font-weight:600;color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.2);animation:monte .2s}
.bandeau.succes{background:var(--vert)}
.bandeau.erreur{background:var(--frein)}
@keyframes monte{from{opacity:0;transform:translate(-50%,10px)}}

@media (max-width:600px){
  .moto{flex-wrap:wrap;gap:10px}
  .dedans{padding:0 14px}
}