:root{
  --noir:#111; --gris-filet:#D9D9D9; --gris-fond:#fff;
  --st-init:#C8C8C8; --st-mid:#E8A33D; --st-final:#3E7C4F;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--gris-fond);color:var(--noir);
  font-family:"Helvetica Neue",Inter,Arial,sans-serif;font-size:16px;line-height:1.45}
a{color:var(--noir)}
.barre{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--gris-filet)}
.barre .marque{font-weight:700;text-decoration:none}
.barre nav{display:flex;gap:1rem}.barre nav a{text-decoration:none}
.barre .qui{margin-left:auto}
main{padding:1rem;max-width:1100px;margin:0 auto}

/* Couleur = statut, jamais décoration */
.st-init{fill:var(--st-init)}.st-mid{fill:var(--st-mid)}.st-final{fill:var(--st-final)}
.pastille-init{background:var(--st-init)}.pastille-mid{background:var(--st-mid)}.pastille-final{background:var(--st-final)}

/* Plan SVG */
.local{stroke:#fff;stroke-width:1;cursor:pointer;transition:fill 120ms}
.local:hover{stroke:var(--noir);stroke-width:1.5}
.reserve-dot{fill:var(--noir)}
.selecteur-etage{display:flex;gap:.25rem;margin-bottom:.75rem}
.selecteur-etage button{border:1px solid var(--gris-filet);background:#fff;padding:.4rem .7rem;cursor:pointer}
.selecteur-etage button[aria-current="true"]{background:var(--noir);color:#fff}
.commutateur{display:flex;gap:.25rem;margin-bottom:.75rem}
.commutateur button{border:1px solid var(--gris-filet);background:#fff;padding:.4rem .7rem;cursor:pointer}
.commutateur button[aria-pressed="true"]{background:var(--noir);color:#fff}
.compteurs{display:flex;gap:1rem;font-size:.9rem;color:#444;margin-bottom:.5rem}

/* Fiche local */
.statut-ligne{display:flex;align-items:center;gap:.5rem;margin:.5rem 0}
.pastille{display:inline-block;width:.9rem;height:.9rem;border-radius:50%}
.transitions button{border:1px solid var(--gris-filet);background:#fff;padding:.35rem .6rem;margin-right:.25rem;cursor:pointer}
.remarque{border-top:1px solid var(--gris-filet);padding:.75rem 0}
.remarque .meta{font-size:.85rem;color:#555}
.remarque.reserve{border-left:3px solid var(--noir);padding-left:.75rem}
.remarque .vignettes img{height:90px;margin:.25rem .25rem 0 0;cursor:pointer}

/* Login + formulaires */
.carte-login{max-width:320px;margin:3rem auto;display:flex;flex-direction:column;gap:.75rem}
.carte-login label{display:flex;flex-direction:column;gap:.25rem}
input,textarea,select,button{font:inherit}
input,textarea,select{padding:.4rem;border:1px solid var(--gris-filet)}
button{cursor:pointer}
.erreur{color:#a11}

/* Dashboard */
.barre-progress{height:14px;background:#eee;border:1px solid var(--gris-filet);position:relative}
.barre-progress > span{display:block;height:100%}
.compte-rebours{font-size:2rem;font-weight:700}
.couche-ligne{display:flex;align-items:center;gap:.75rem;margin:.5rem 0}
.couche-ligne .couche-label{flex:0 0 9rem}
.couche-ligne .barre-progress{flex:1 1 auto}
.couche-ligne .meta{flex:0 0 auto;white-space:nowrap}
.etage-ligne{display:flex;align-items:center;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--gris-filet)}
.etage-ligne > strong{flex:0 0 5rem}
.couche-compacte{display:flex;align-items:center;gap:.4rem;flex:1 1 0}
.couche-compacte .sigle{flex:0 0 1rem;font-size:.8rem;color:#555;font-weight:700}
.couche-compacte .barre-progress{flex:1 1 auto}
.couche-compacte .meta{flex:0 0 auto;white-space:nowrap;font-size:.85rem}

/* Mobile-first : plan pleine largeur, cible tactile confortable */
@media (max-width:640px){
  main{padding:.5rem}
  .transitions button,.selecteur-etage button,.commutateur button{padding:.55rem .8rem}
  .couche-ligne{flex-wrap:wrap}
  .couche-ligne .couche-label{flex:1 1 100%}
  .etage-ligne{flex-wrap:wrap}
  .etage-ligne > strong{flex:1 1 100%}
}