/* AKWABA (client) — le même écran que l'assistant, tenu debout au bord de la route, en gros boutons (03/10). En haut
   l'interrupteur, « Je vais à » un lieu par ligne, le véhicule en boutons ; au milieu la barre « Chercher voiture » ;
   en bas le gros rond. La couleur dit l'état : gris = éteint, vert = allumé ou choisi, cuivre = « encore un appui ». */
.haut{display:grid;gap:8px;margin:0 0 12px}
.onoff{width:100%;margin:0;display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;background:var(--carte);color:var(--texte);border:2px solid var(--bord);border-radius:16px}
.onoff .etat{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:30px;letter-spacing:.06em;color:var(--faible);min-width:72px}
.onoff .dit{font-size:15px;font-weight:600;color:var(--doux);line-height:1.35}
.onoff[aria-pressed="true"]{border-color:var(--vert);background:var(--vert);color:var(--sur-vert)}
.onoff[aria-pressed="true"] .etat,.onoff[aria-pressed="true"] .dit{color:inherit}
.gps{min-height:18px;margin:0;font-size:13px;color:var(--faible);padding-left:16px;position:relative}
.gps::before{content:"";position:absolute;left:2px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--bord)}
.gps.cherche::before{background:var(--or)}
.gps.recue::before{background:var(--vert)}
.gps.erreur{color:var(--rouge)}
.gps.erreur::before{background:var(--rouge)}

/* « Encore un appui » (deux appuis, 03/10) : cuivre, et ça clignote deux secondes. Même animation que la barre de l'assistant. */
.onoff.confirme,.rond.confirme{background:#E07A2E;border-color:#9A4A0E;color:#3A1A03;animation:attend .5s steps(2,end) infinite}
.onoff.confirme .etat,.onoff.confirme .dit{color:inherit}
@media (prefers-reduced-motion: reduce){ .onoff.confirme,.rond.confirme{animation:none} }

.chercher{width:100%;padding:19px;border:0;border-radius:14px;background:var(--or);color:var(--sur-or);margin:0;font-size:19px;font-weight:800}
.chercher[disabled]{opacity:.45}
/* « Je cherche » bouge (Honoré, 08/10 : « comme la couronne qui tourne dans Titulaire ») : deux anneaux, vert et or, qui
   tournent en sens contraire AUTOUR du rond, sur son écrin ; immobiles si l'on préfère le calme. */
.autour{position:relative;display:inline-block;border-radius:50%}
.autour.cherche::before,.autour.cherche::after{content:"";position:absolute;inset:6px;border-radius:50%;border:4px solid var(--vert);border-top-color:transparent;animation:tourne 5s linear infinite;pointer-events:none;z-index:2}
.autour.cherche::after{inset:-8px;border-color:var(--or);border-top-color:var(--or);border-bottom-color:transparent;animation:tourne 7s linear infinite reverse}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .autour.cherche::before,.autour.cherche::after{animation:none} }
.rond.trouve{background:var(--vert);color:var(--sur-vert)}
.rond.monte{background:var(--or);color:var(--sur-or)}
.rond .voiture{font-size:14px;font-weight:700;opacity:.9}
.rond .quoi,.rond .quand{max-width:76%;margin-left:auto;margin-right:auto}   /* dans le cercle, jamais coupé par le bord */

/* « Je vais à » (037, UNE destination, 03/10 : « une simple liste de choix ») : une liste déroulante, les coins fréquentés d'ici
   du plus au moins fréquent ; le véhicule, la même liste, seulement s'il y a le choix. « Avancé » : toute la ville, en gros boutons paginés. */
.haut select{width:100%;padding:16px 18px;border-radius:14px;border:2px solid var(--bord);background:var(--carte);color:var(--texte);font-size:19px;font-family:inherit;font-weight:800;margin:0}
.haut select:disabled{opacity:.5}
.haut select.choisi{border-color:var(--vert);background:var(--vert);color:var(--sur-vert)}
.vers{display:grid;gap:8px;margin:2px 0 10px}

.titre-vers{display:flex;align-items:center;justify-content:space-between;gap:12px}
.titre-vers .quoi{margin:0}
.avance{width:auto;margin:0;background:transparent;border:1px solid var(--bord);color:var(--doux);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700}
.avance:disabled{opacity:.45}
/* La feuille « Avancé » (03/10, « simple ») : UNE liste, par commune, qui se fait défiler ; « Fermer » en haut, toujours visible. */
.entete-feuille{display:flex;align-items:center;justify-content:space-between;gap:12px}
.entete-feuille h2{margin:0}
.entete-feuille .sobre{width:auto;margin:0;padding:10px 18px}
.feuille select{width:100%;padding:8px;border-radius:12px;border:1px solid var(--bord);background:var(--carte);color:var(--texte);font-size:18px;font-family:inherit;font-weight:700;margin:6px 0 12px}
.feuille select optgroup{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);font-weight:800}
.feuille select option{padding:12px 10px;font-size:18px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--texte)}
.feuille select option:checked{background:var(--vert);color:var(--sur-vert)}

#secVehicule{margin:0 0 12px}
/* Le bord de la route (043) : la couleur dit l'état — orange, il doit bouger ; vert, il est bien placé. */
.conseil-bord{min-height:0;margin:0;font-size:16px;font-weight:700;line-height:1.35;color:var(--doux)}
.conseil-bord:empty{display:none}
.conseil-bord.loin{color:#D26A1C}
.conseil-bord.bien{color:var(--vert)}

/* Le chrono dans le rond (06/10) : minutes:secondes, lisible de loin. */
.rond .chrono{display:block;font-size:22px;font-weight:700;letter-spacing:.04em;opacity:.95;min-height:26px}
.rond.vide .chrono,.rond.monte .chrono{opacity:.7}
/* À rebours dès le numéro (08/10) : une flèche vers le bas dit que ça descend, sans un mot. */
.rond .chrono.rebours::before{content:"\25BE\00A0";font-size:18px;opacity:.8}
/* (062) La recherche gardée sans réseau : le rond cherche, en gris, les anneaux tournent encore. */
.rond.cherche.garde{filter:saturate(.25)}

/* (13/10) La promesse sous le titre : une ligne de plus de poids que le sous-titre ordinaire. */
.sous.promesse{color:var(--texte);font-size:17px;font-weight:600;line-height:1.45}