/* =====================================================================
   KPANDJI AUTOMOBILES — Registre des prospects
   Direction : tableau de bord de véhicule. Graphite, orange instrument,
   numéros en chiffres monospacés (le numéro est la clé du registre).
   ===================================================================== */

:root{
  --graphite:#171A21;
  --acier:#232833;
  --acier-clair:#333A48;
  --atelier:#F1F2F4;
  --blanc:#FFFFFF;
  --kpandji:#E8730C;
  --kpandji-sombre:#B85A08;
  --route:#0F7A4F;
  --alerte:#C0392B;
  --ambre:#D99100;
  --texte:#1B1F27;
  --texte-doux:#6B7280;
  --bord:#DDE0E5;

  --r:10px;
  --ombre:0 1px 2px rgba(23,26,33,.06), 0 8px 24px rgba(23,26,33,.06);
  --display:'Oswald',system-ui,sans-serif;
  --corps:'Montserrat',system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--corps);
  background:var(--atelier);
  color:var(--texte);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:.01em;margin:0}
a{color:var(--kpandji-sombre)}

/* ---------- Marque ---------- */
.marque__plaque{
  display:inline-block;
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  letter-spacing:.22em;
  color:var(--graphite);
  background:var(--kpandji);
  padding:4px calc(14px - .22em) 3px 14px;   /* compense le blanc de fin */
  border-radius:4px;
  border:2px solid var(--graphite);
}
.marque__plaque--petit{font-size:13px;padding:2px calc(9px - .18em) 1px 9px;letter-spacing:.18em;border-width:1.5px}
.marque__titre{font-size:29px;margin:18px 0 4px;color:var(--blanc)}
.marque__sous{margin:0 0 26px;color:#9AA3B2;font-size:13.5px}

/* ---------- Connexion ---------- */
.connexion{
  min-height:100dvh;
  display:grid;place-items:center;
  padding:24px;
  background:
    radial-gradient(900px 480px at 50% -10%, #2A3140 0%, transparent 70%),
    var(--graphite);
}
.connexion__panneau{width:100%;max-width:390px}
.connexion__note{color:#78808F;font-size:12px;margin-top:16px;text-align:center;line-height:1.5}
.connexion__bascule{text-align:center;margin:15px 0 0;font-size:13px;color:#9AA3B2}
.lien{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--corps);font-size:13px;font-weight:600;
  color:var(--kpandji);text-decoration:underline;text-underline-offset:3px;
}
.lien:hover{color:#F79340}
.lien:focus-visible{outline:2px solid var(--kpandji);outline-offset:3px;border-radius:3px}
.champ{margin-bottom:14px}
.champ label{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;color:#9AA3B2;margin-bottom:6px;
}
.connexion input{
  width:100%;padding:12px 14px;border-radius:var(--r);
  border:1px solid #3A4252;background:#1E222C;color:var(--blanc);
  font-family:var(--corps);font-size:15px;
}
.connexion input:focus{outline:2px solid var(--kpandji);outline-offset:1px;border-color:transparent}

/* ---------- Boutons ---------- */
.bouton{
  font-family:var(--corps);font-weight:600;font-size:14px;
  border-radius:var(--r);border:1px solid var(--bord);
  background:var(--blanc);color:var(--texte);
  padding:9px 16px;cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.bouton:hover{border-color:#B9BFC9}
.bouton:active{transform:translateY(1px)}
.bouton:focus-visible{outline:2px solid var(--kpandji);outline-offset:2px}
.bouton--plein{background:var(--kpandji);border-color:var(--kpandji);color:#fff}
.bouton--plein:hover{background:var(--kpandji-sombre);border-color:var(--kpandji-sombre)}
.bouton--sombre{background:var(--graphite);border-color:var(--graphite);color:#fff}
.bouton--sombre:hover{background:#2A303C}
.bouton--large{width:100%;padding:13px;font-size:15px}
.bouton--fantome{background:transparent;border-color:transparent;color:inherit}
.bouton--fantome:hover{background:rgba(255,255,255,.08);border-color:transparent}
.bouton--petit{padding:6px 11px;font-size:12.5px}
.bouton--vert{background:var(--route);border-color:var(--route);color:#fff}
.bouton[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 20px;background:var(--graphite);color:var(--blanc);
}
.entete__gauche{display:flex;align-items:center;gap:12px;min-width:0}
.entete__titre{font-family:var(--display);font-size:16px;letter-spacing:.02em;white-space:nowrap}
.entete__droite{display:flex;align-items:center;gap:10px}
.identite{text-align:right;line-height:1.25;min-width:0}
.identite strong{display:block;font-size:13px;font-weight:600}
.identite span{font-size:11px;color:#9AA3B2}

/* ---------- Onglets ---------- */
.onglets{
  position:sticky;top:53px;z-index:29;
  display:flex;gap:2px;overflow-x:auto;
  background:var(--acier);padding:0 12px;
  scrollbar-width:none;
}
.onglets::-webkit-scrollbar{display:none}
.onglet{
  flex:none;background:none;border:none;cursor:pointer;
  font-family:var(--corps);font-weight:600;font-size:13px;
  color:#9AA3B2;padding:12px 14px;
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.onglet:hover{color:#fff}
.onglet--actif{color:#fff;border-bottom-color:var(--kpandji)}
.onglet:focus-visible{outline:2px solid var(--kpandji);outline-offset:-4px}

/* ---------- Vue ---------- */
.vue{max-width:1120px;margin:0 auto;padding:22px 16px 60px}
.pied{text-align:center;color:var(--texte-doux);font-size:11.5px;padding:0 16px 26px}

.section{margin-bottom:28px}
.section__entete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.section__titre{font-size:19px}
.oeil{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--texte-doux);margin-bottom:5px}

.carte{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre)}
.carte__corps{padding:16px}

/* ---------- Compteurs ---------- */
.compteurs{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.compteur{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);padding:14px 16px}
.compteur__valeur{font-family:var(--display);font-size:30px;line-height:1.05;color:var(--graphite)}
.compteur__valeur--or{color:var(--kpandji)}
.compteur__valeur--vert{color:var(--route)}
.compteur__valeur--rouge{color:var(--alerte)}
.compteur__label{font-size:11.5px;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:3px}
.compteur__note{font-size:11.5px;color:var(--texte-doux);margin-top:2px}

/* ---------- SIGNATURE : bandeau de contrôle du numéro ---------- */
.controle{
  border-radius:var(--r);
  background:var(--graphite);
  color:#fff;
  padding:13px 16px;
  display:flex;align-items:center;gap:13px;
  border-left:5px solid var(--acier-clair);
  transition:border-color .2s ease, background .2s ease;
}
.controle--libre{border-left-color:var(--route);background:#12251C}
.controle--occupe{border-left-color:var(--alerte);background:#2A1614}
.controle--attente{opacity:.75}
.controle__voyant{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--acier-clair);
}
.controle--libre  .controle__voyant{background:#27C281;box-shadow:0 0 0 4px rgba(39,194,129,.18)}
.controle--occupe .controle__voyant{background:#F0564A;box-shadow:0 0 0 4px rgba(240,86,74,.18)}
.controle__texte{font-size:13px;line-height:1.4}
.controle__texte strong{display:block;font-family:var(--display);font-size:14.5px;letter-spacing:.03em;text-transform:uppercase}
.controle__texte span{color:#A8B0BE}

/* ---------- Formulaire ---------- */
.grille-form{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grille-form .pleine{grid-column:1/-1}
.form label{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--texte-doux);margin-bottom:5px;
}
.form input,.form select,.form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--bord);border-radius:8px;
  font-family:var(--corps);font-size:14.5px;background:var(--blanc);color:var(--texte);
}
.form textarea{min-height:78px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--kpandji);outline-offset:0;border-color:transparent;
}
.form .mono{font-family:var(--mono);letter-spacing:.03em}

/* ---------- Tableau ---------- */
.tableau-boite{overflow-x:auto;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--texte-doux);font-weight:700;
  padding:11px 13px;border-bottom:1px solid var(--bord);white-space:nowrap;background:#FAFBFC;
}
td{padding:11px 13px;border-bottom:1px solid #EFF1F4;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer}
tbody tr:hover{background:#FBF7F2}
.tel{font-family:var(--mono);font-size:13px;white-space:nowrap}
.nom-fort{font-weight:600}

/* ---------- Étiquettes de statut ---------- */
.etiq{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;
}
.etiq--gris{background:#EDEFF2;color:#4B5563}
.etiq--bleu{background:#E5EEFB;color:#1D4E89}
.etiq--ambre{background:#FDF1DC;color:#8A5A00}
.etiq--orange{background:#FCE9D8;color:#9C4A05}
.etiq--vert{background:#DFF3E9;color:#0B5C3C}
.etiq--rouge{background:#FBE3E1;color:#8F2A20}
.etiq--dormant{background:var(--alerte);color:#fff}

/* ---------- Filtres ---------- */
.filtres{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.filtres input,.filtres select{
  padding:9px 12px;border:1px solid var(--bord);border-radius:8px;
  font-family:var(--corps);font-size:13.5px;background:var(--blanc);
}
.filtres input{flex:1;min-width:160px}

/* ---------- Entonnoir ---------- */
.entonnoir{display:grid;gap:8px}
.etape{display:grid;grid-template-columns:24px 152px 1fr 38px;align-items:center;gap:11px}
.etape__num{font-family:var(--mono);font-size:11px;color:var(--texte-doux)}
.etape__nom{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etape__barre{height:14px;background:#EDEFF2;border-radius:99px;overflow:hidden}
.etape__remplissage{height:100%;background:var(--graphite);border-radius:99px;transition:width .5s ease}
.etape__valeur{font-family:var(--display);font-size:17px;text-align:right}
@media (max-width:640px){ .etape{grid-template-columns:20px 110px 1fr 32px;gap:8px} }

/* ---------- Barres de comparaison ---------- */
.barres{display:grid;gap:10px}
.barre{display:grid;grid-template-columns:130px 1fr 62px;gap:11px;align-items:center;font-size:13px}
.barre__nom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre__piste{height:9px;background:#EDEFF2;border-radius:99px;overflow:hidden}
.barre__jauge{height:100%;background:var(--kpandji);border-radius:99px;transition:width .5s ease}
.barre__val{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--texte-doux)}

/* ---------- Fiche prospect ---------- */
.fiche__tete{
  background:var(--graphite);color:#fff;border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px;
}
.fiche__nom{font-size:24px;color:#fff}
.fiche__tel{font-family:var(--mono);font-size:15px;color:var(--kpandji);margin-top:3px}
.fiche__meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;color:#A8B0BE}
.fiche__meta b{color:#fff;font-weight:600}

.paires{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.paire__cle{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--texte-doux);font-weight:700}
.paire__val{font-size:14px;font-weight:500}

/* ---------- Journal ---------- */
.journal{position:relative;padding-left:22px;margin-top:6px}
.journal::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--bord)}
.trace{position:relative;padding-bottom:16px}
.trace::before{
  content:"";position:absolute;left:-21px;top:5px;width:11px;height:11px;
  border-radius:50%;background:var(--blanc);border:2px solid var(--kpandji);
}
.trace:first-child::before{background:var(--kpandji)}
.trace__date{font-family:var(--mono);font-size:11.5px;color:var(--texte-doux)}
.trace__texte{font-size:13.5px;margin-top:2px}
.trace__auteur{font-size:11.5px;color:var(--texte-doux);margin-top:2px}

/* ---------- Divers ---------- */
.vide{text-align:center;padding:40px 20px;color:var(--texte-doux)}
.vide strong{display:block;font-family:var(--display);font-size:18px;color:var(--texte);margin-bottom:5px}
.erreur{color:#F0564A;font-size:13px;margin:0 0 12px}
.alerte-boite{
  background:#FFF6EC;border:1px solid #F3D6B4;border-left:4px solid var(--kpandji);
  border-radius:8px;padding:12px 14px;font-size:13.5px;margin-bottom:14px;
}
.rangee{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.mono{font-family:var(--mono)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--graphite);color:#fff;padding:12px 20px;border-radius:99px;
  font-size:13.5px;font-weight:600;z-index:80;box-shadow:0 8px 28px rgba(0,0,0,.28);
  max-width:calc(100vw - 32px);text-align:center;
}
.toast--erreur{background:var(--alerte)}
.toast--succes{background:var(--route)}

/* ---------- Modale ---------- */
.modale{position:fixed;inset:0;background:rgba(15,18,24,.62);z-index:70;display:grid;place-items:center;padding:16px}
.modale__boite{background:var(--blanc);border-radius:14px;width:100%;max-width:560px;max-height:88dvh;display:flex;flex-direction:column}
.modale__entete{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--bord)}
.modale__entete h2{font-size:18px}
.modale__corps{padding:18px;overflow-y:auto}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .entete{padding:10px 13px}
  .entete__titre{display:none}
  .identite strong{font-size:12px}
  .onglets{top:48px}
  .vue{padding:16px 12px 50px}
  .compteur__valeur{font-size:25px}
  .barre{grid-template-columns:104px 1fr 52px}
  th,td{padding:9px 10px}
  .fiche__nom{font-size:20px}
}

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

/* =====================================================================
   Bannières : installation et mise à jour
   ===================================================================== */
.barre{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; border-radius:12px;
  background:var(--graphite); color:#fff;
  box-shadow:0 10px 34px rgba(15,18,24,.34);
  border-left:5px solid var(--kpandji);
  max-width:640px; margin:0 auto;
  animation:monte .28s ease;
}
@keyframes monte{ from{transform:translateY(14px);opacity:0} to{transform:none;opacity:1} }

.barre--maj{ border-left-color:var(--route); bottom:12px }
.barre--installation-visible .barre--maj{ bottom:88px }

.barre__texte{min-width:0; line-height:1.35}
.barre__texte strong{
  display:block; font-family:var(--display); font-size:14.5px;
  letter-spacing:.02em; font-weight:500;
}
.barre__texte span{font-size:12px; color:#A8B0BE}
.barre__actions{display:flex; gap:7px; flex:none; align-items:center}
.barre .bouton--fantome{color:#A8B0BE}
.barre .bouton--fantome:hover{background:rgba(255,255,255,.1); color:#fff}

.lien-pied{
  display:inline-block; margin-left:8px;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--corps); font-size:11.5px; font-weight:600;
  color:var(--kpandji-sombre); text-decoration:underline; text-underline-offset:2px;
}
.lien-pied:hover{color:var(--kpandji)}

@media (max-width:520px){
  .barre{flex-direction:column; align-items:stretch; gap:10px; padding:14px}
  .barre__actions{justify-content:flex-end}
}

.aide-champ{
  font-size:11.5px; color:var(--texte-doux); line-height:1.45;
  margin:6px 0 0;
}
.aide-champ b{color:var(--kpandji-sombre)}

/* =====================================================================
   TENUE MOBILE — stabilité de la mise en page
   Rien ne doit déborder, rien ne doit sauter.
   ===================================================================== */

html, body{
  width:100%;
  max-width:100%;

  /* « hidden » ferait de la page un conteneur de défilement imbriqué :
     la molette cesse alors d'agir tant qu'on n'a pas cliqué dans la page.
     « clip » empêche le débordement sans créer ce conteneur.
     La première ligne sert de repli pour les navigateurs anciens. */
  overflow-x:hidden;
  overflow-x:clip;
}
body{ text-size-adjust:100%; -webkit-text-size-adjust:100%; }

/* Tout élément est contraint par son parent */
img, table, pre, .carte, .tableau-boite, .fiche__tete, .encadre{ max-width:100%; }
.vue > *, .section, .carte__corps{ min-width:0; }

input, select, textarea{
  max-width:100%;
  -webkit-appearance:none;
  appearance:none;
  border-radius:8px;
}

/* iOS zoome la page dès qu'un champ fait moins de 16px.
   C'est ce qui décalait toute l'interface à la saisie.
   Sur grand écran, on garde la taille d'origine. */
@media (max-width:900px){
  input, select, textarea, .connexion input{ font-size:16px !important; }
}
select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px;
  padding-right:34px;
}

/* Zones tactiles confortables et réactives */
button, .bouton, a.bouton, .onglet, tbody tr{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.bouton{min-height:42px; display:inline-flex; align-items:center; justify-content:center}
.bouton--petit{min-height:34px}
.onglet{min-height:46px}

/* Encoche, barre de gestes, barre flottante de Safari */
.entete{ padding-top:calc(11px + env(safe-area-inset-top)); }
.onglets{ top:var(--h-entete, 53px); }
.vue{
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  padding-bottom:calc(74px + env(safe-area-inset-bottom));
}
.barre{ bottom:calc(12px + env(safe-area-inset-bottom)); }
.toast{ bottom:calc(22px + env(safe-area-inset-bottom)); }

/* Tableaux : le défilement horizontal reste à l'intérieur du cadre,
   mais la molette verticale continue de faire défiler la page. */
.tableau-boite{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}

/* Modale : plein écran par le bas sur téléphone, plus naturel au pouce */
@media (max-width:640px){
  .modale{ align-items:flex-end; padding:0; }
  .modale__boite{
    max-width:100%;
    max-height:92dvh;
    border-radius:18px 18px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .modale__entete{position:sticky; top:0; background:var(--blanc); z-index:2}
  .vue{padding-left:max(13px, env(safe-area-inset-left)); padding-right:max(13px, env(safe-area-inset-right))}
  .grille-form{grid-template-columns:1fr}
  .compteurs{grid-template-columns:repeat(2, minmax(0,1fr))}
  .rangee .bouton{flex:1 1 auto}
}

/* =====================================================================
   ANIMATIONS
   Sobres, courtes, jamais décoratives : elles doivent expliquer
   d'où vient un élément, pas attirer l'attention sur elles-mêmes.
   ===================================================================== */

@keyframes kp-entree{
  from{opacity:0; transform:translateY(10px)}
  to  {opacity:1; transform:none}
}
@keyframes kp-fondu{ from{opacity:0} to{opacity:1} }
@keyframes kp-plaque{
  0%  {opacity:0; transform:translateY(14px) scale(.94)}
  55% {opacity:1; transform:translateY(0) scale(1.02)}
  100%{opacity:1; transform:none}
}
@keyframes kp-jauge{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes kp-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,115,12,.34)}
  50%    {box-shadow:0 0 0 7px rgba(232,115,12,0)}
}

/* --- Écran d'ouverture --- */
.splash{
  position:fixed; inset:0; z-index:200;
  background:radial-gradient(760px 420px at 50% 34%, #262D3B 0%, #171A21 72%);
  display:grid; place-items:center;
  transition:opacity .42s ease, visibility .42s;
}
.splash--parti{opacity:0; visibility:hidden}
.splash__bloc{text-align:center; padding:0 24px}
.splash__plaque{
  display:inline-block; font-family:var(--display); font-weight:600;
  font-size:23px; letter-spacing:.24em; color:var(--graphite);
  background:var(--kpandji); padding:6px calc(18px - .24em) 5px 18px;
  border:2px solid var(--graphite); border-radius:5px;
  animation:kp-plaque .68s cubic-bezier(.22,1,.36,1) both;
}
.splash__titre{
  font-family:var(--display); font-weight:500; font-size:20px; color:#fff;
  margin:18px 0 3px; letter-spacing:.01em;
  animation:kp-entree .5s ease .26s both;
}
.splash__devise{
  font-size:12.5px; color:#8B93A2; margin:0 0 26px;
  animation:kp-entree .5s ease .38s both;
}
.splash__piste{
  width:132px; height:2px; margin:0 auto; border-radius:2px;
  background:rgba(255,255,255,.13); overflow:hidden;
}
.splash__jauge{
  height:100%; background:var(--kpandji); border-radius:2px;
  transform-origin:left; animation:kp-jauge 1.05s ease-out .3s both;
}

/* --- Entrée des vues, en cascade --- */
.vue > *{ animation:kp-entree .34s cubic-bezier(.22,1,.36,1) both; }
.vue > *:nth-child(1){animation-delay:.02s}
.vue > *:nth-child(2){animation-delay:.06s}
.vue > *:nth-child(3){animation-delay:.10s}
.vue > *:nth-child(4){animation-delay:.14s}
.vue > *:nth-child(5){animation-delay:.18s}
.vue > *:nth-child(n+6){animation-delay:.22s}

/* --- Écran de connexion --- */
.connexion__panneau > *{animation:kp-entree .42s ease both}
.connexion__panneau > *:nth-child(2){animation-delay:.07s}
.connexion__panneau > *:nth-child(3){animation-delay:.11s}
.connexion__panneau > *:nth-child(4){animation-delay:.15s}
.connexion__panneau > *:nth-child(n+5){animation-delay:.19s}

/* --- Retours au toucher --- */
.carte, .compteur{transition:transform .18s ease, box-shadow .18s ease}
tbody tr{transition:background .14s ease}
tbody tr:active{background:#F4EEE7}
.onglet{transition:color .16s ease, border-color .16s ease}
.etape__remplissage, .barre__jauge{transition:width .62s cubic-bezier(.22,1,.36,1)}

/* Le bandeau de contrôle : c'est le geste central de l'application,
   il mérite un signal net quand le verdict tombe. */
.controle{transition:background .26s ease, border-color .26s ease}
.controle--occupe{animation:kp-pulse 1.5s ease-out 2}
.controle--libre .controle__voyant,
.controle--occupe .controle__voyant{transition:box-shadow .3s ease}

/* Modale --- */
@keyframes kp-modale-fond{from{opacity:0} to{opacity:1}}
@keyframes kp-modale-boite{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.modale{animation:kp-modale-fond .2s ease both}
.modale__boite{animation:kp-modale-boite .3s cubic-bezier(.22,1,.36,1) both}
@media (max-width:640px){
  @keyframes kp-modale-boite{from{transform:translateY(100%)} to{transform:none}}
}

/* Toast --- */
@keyframes kp-toast{from{opacity:0; transform:translate(-50%, 14px)} to{opacity:1; transform:translate(-50%,0)}}
.toast{animation:kp-toast .26s cubic-bezier(.22,1,.36,1) both}

/* Chiffres qui montent : la valeur est posée par le script */
.compteur__valeur{font-variant-numeric:tabular-nums}

/* Respect du réglage système : aucune animation imposée */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .splash{transition:none}
}