/* LE RELIEF — « l'or poli », choisi par Honoré le 23/09 (variante 4) d'après son exemple Nano Banana « Deux beaux
   boutons » : des bandes de lumière, un vernis en haut, une épaisseur bronze, et le bouton s'enfonce sous le doigt.
   Un seul exemplaire pour la barre et le rond de l'assistant et du client. Les couleurs sont absolues : le métal
   est le même de jour et de nuit, c'est la page autour qui change. Aucune image, aucun survol : seulement l'appui. */

.remplir,.chercher,.rond{position:relative;overflow:hidden;transition:transform .09s ease,box-shadow .09s ease}
.remplir>*,.chercher>*,.rond>*{position:relative;z-index:1}
.remplir::before,.chercher::before,.rond::before{
  content:"";position:absolute;left:3px;right:3px;top:2px;height:46%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.05));pointer-events:none;
}
.rond::before{left:12%;right:12%;top:6%;height:40%;border-radius:50%}

/* La barre : or poli, et vert poli quand elle est en cours. */
.remplir,.chercher{
  border-radius:999px;border:1px solid #5C4207;color:#4A3405;text-shadow:0 1px 0 rgba(255,244,200,.55);
  background:linear-gradient(180deg,#8A6410 0%,#D9B44A 9%,#F6DD86 22%,#ECC95E 38%,#C9992B 52%,#E3B83F 64%,#B1831C 81%,#8A6410 100%);
  box-shadow:0 7px 0 #7A5710,inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(70,48,0,.35);
}
.remplir:active,.chercher:active{
  transform:translateY(6px);
  box-shadow:0 1px 0 #7A5710,inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 5px rgba(70,48,0,.35);
}
@keyframes attend{to{opacity:.6}}
.chercher[disabled]{opacity:.45;transform:none}

/* Le rond : vert poli quand quelqu'un attend ou qu'on part, or poli quand c'est fait. */
.rond,.rond.trouve,.rond.creation{
  border:1px solid #085C45;color:#03271D;text-shadow:0 1px 0 rgba(230,255,245,.45);
  background:radial-gradient(circle at 32% 26%,#E4FFF5 0%,#9FF0D4 13%,#4ED8AC 36%,#1BAF86 58%,#0E8463 78%,#085C45 100%);
  box-shadow:0 9px 0 #0B5A42,inset 0 -8px 14px rgba(0,50,35,.45),inset 0 8px 12px rgba(255,255,255,.5),inset 0 0 0 1px rgba(230,255,245,.3);
}
.rond:active{
  transform:translateY(7px) scale(.98);
  box-shadow:0 2px 0 #0B5A42,inset 0 -4px 8px rgba(0,50,35,.5),inset 0 6px 10px rgba(255,255,255,.4);
}
.rond.monte,.rond.creation.arrivee{
  border-color:#5C4207;color:#4A3405;text-shadow:0 1px 0 rgba(255,244,200,.55);
  background:radial-gradient(circle at 32% 26%,#FFF8D0 0%,#FFE9A0 13%,#F2CA5E 36%,#D9A72E 58%,#B1831C 78%,#7C580E 100%);
  box-shadow:0 9px 0 #7A5710,inset 0 -8px 14px rgba(70,48,0,.45),inset 0 8px 12px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,240,180,.3);
}
.rond.monte:active,.rond.creation.arrivee:active{box-shadow:0 2px 0 #7A5710,inset 0 -4px 8px rgba(70,48,0,.5),inset 0 6px 10px rgba(255,255,255,.4)}

/* En recherche : pas de métal, le rond attend (les anneaux qui tournent sont dans bouton.css, 08/10). */
/* (08/10, Honoré : « le rond n'est pas 3D ») « Je cherche » est un disque en relief lui aussi : clair à liseré vert le jour,
   vert sombre la nuit, l'épaisseur dessous ; les anneaux tournent autour (bouton.css). */
.rond.cherche{
  border:2px solid var(--vert);color:#12402E;text-shadow:0 1px 0 rgba(255,255,255,.7);transform:none;
  background:radial-gradient(circle at 32% 26%,#FFFFFF 0%,#F2FAF5 18%,#DDEFE5 48%,#C6E2D3 76%,#B2D4C1 100%);
  box-shadow:0 9px 0 #7FB89A,inset 0 -8px 14px rgba(0,60,35,.16),inset 0 8px 12px rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.6);
}
:root.nuit .rond.cherche{
  color:#E9F5EE;text-shadow:0 1px 0 rgba(0,0,0,.35);
  background:radial-gradient(circle at 32% 26%,#2F6B52 0%,#245A44 22%,#1A4634 55%,#133527 85%,#0E2A1F 100%);
  box-shadow:0 9px 0 #07150F,inset 0 -8px 14px rgba(0,0,0,.4),inset 0 8px 12px rgba(255,255,255,.14);
}
/* Éteint (Honoré, 08/10 : « le bouton du GPS désactivé est en 3D, fais la même chose pour le rond ») : le même métal mat
   et clair que le bouton OFF, en rond, avec son épaisseur dessous ; le texte gravé, pâle. Assistant et client. */
.rond.vide{
  border:1px solid #B9B3A3;color:#8A8471;text-shadow:0 1px 0 rgba(255,255,255,.7);cursor:default;transform:none;
  background:radial-gradient(circle at 32% 26%,#FBF9F3 0%,#F3EFE4 18%,#E6E1D3 48%,#D3CDBD 76%,#C2BCAC 100%);
  box-shadow:0 9px 0 #A9A392,inset 0 -8px 14px rgba(60,50,30,.18),inset 0 8px 12px rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.5);
}
.rond.vide::before{display:block;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.05))}
.rond.cherche::before{display:block;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.06))}   /* le reflet du haut, comme sur tous les boutons */
:root.nuit .rond.cherche::before{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.03))}
:root.nuit .rond.vide{
  border-color:#3A4A42;color:#8FA097;text-shadow:none;
  background:radial-gradient(circle at 32% 26%,#3A5A4C 0%,#2E4A3E 22%,#223A30 55%,#1A2A24 85%,#16261F 100%);
  box-shadow:0 9px 0 #0F1A16,inset 0 -8px 14px rgba(0,0,0,.35),inset 0 8px 12px rgba(255,255,255,.14);
}
:root.nuit .rond.vide::before{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02))}
.rond[disabled]:not(.vide):not(.cherche):not(.monte){opacity:.6}
.rond.monte[disabled]{opacity:1;cursor:default}   /* « Bon voyage » est un état, pas un bouton éteint : plein or */

@media (prefers-reduced-motion: reduce){ .remplir,.chercher,.rond{transition:none} }

/* Le bouton ON/OFF du client (23/09, même choix) : éteint = métal mat et clair, allumé = vert poli. */
.onoff{
  position:relative;overflow:hidden;border-radius:999px;border:1px solid #B9B3A3;color:var(--texte);
  background:linear-gradient(180deg,#C9C3B3 0%,#F1EDE2 12%,#FBF9F3 30%,#EDE8DB 55%,#D9D3C3 82%,#C9C3B3 100%);
  box-shadow:0 6px 0 #A9A392,inset 0 1px 1px rgba(255,255,255,.8),inset 0 -3px 6px rgba(60,50,30,.18);
  transition:transform .09s ease,box-shadow .09s ease;
}
.onoff>*{position:relative;z-index:1}
.onoff::before{content:"";position:absolute;left:3px;right:3px;top:2px;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.05));pointer-events:none}
.onoff:active{transform:translateY(5px);box-shadow:0 1px 0 #A9A392,inset 0 1px 1px rgba(255,255,255,.7),inset 0 -2px 5px rgba(60,50,30,.18)}
.onoff .etat{color:#8A8471;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.onoff .dit{color:#4A4A40}
.onoff[aria-pressed="true"]{
  border-color:#085C45;color:#03271D;text-shadow:0 1px 0 rgba(230,255,245,.45);
  background:linear-gradient(180deg,#0B6E52 0%,#22B58C 9%,#7BE8C4 22%,#3FD1A5 38%,#12A07A 52%,#25BE92 64%,#0E8463 81%,#0B6E52 100%);
  box-shadow:0 6px 0 #0B5A42,inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,50,35,.35);
}
.onoff[aria-pressed="true"]:active{box-shadow:0 1px 0 #0B5A42,inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 5px rgba(0,50,35,.35)}
.onoff[aria-pressed="true"] .etat,.onoff[aria-pressed="true"] .dit{color:#03271D;text-shadow:0 1px 0 rgba(230,255,245,.45)}
:root.nuit .onoff{border-color:#3A4A42;color:#E9EFEA;background:linear-gradient(180deg,#1A2A24 0%,#2E4A3E 12%,#3A5A4C 30%,#2A4438 55%,#1E3229 82%,#16261F 100%);box-shadow:0 6px 0 #0F1A16,inset 0 1px 1px rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.35)}
:root.nuit .onoff::before{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02))}
:root.nuit .onoff:active{box-shadow:0 1px 0 #0F1A16,inset 0 1px 1px rgba(255,255,255,.15),inset 0 -2px 5px rgba(0,0,0,.35)}
:root.nuit .onoff .etat{color:#8FA097;text-shadow:none}
:root.nuit .onoff .dit{color:#C9D4CD}
:root.nuit .onoff[aria-pressed="true"]{border-color:#085C45;color:#03271D;background:linear-gradient(180deg,#0B6E52 0%,#22B58C 9%,#7BE8C4 22%,#3FD1A5 38%,#12A07A 52%,#25BE92 64%,#0E8463 81%,#0B6E52 100%);box-shadow:0 6px 0 #0B5A42,inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,50,35,.35)}
:root.nuit .onoff[aria-pressed="true"]::before{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.05))}
:root.nuit .onoff[aria-pressed="true"] .etat,:root.nuit .onoff[aria-pressed="true"] .dit{color:#03271D;text-shadow:0 1px 0 rgba(230,255,245,.45)}

/* LES CHOIX (03/10, « je vois des zones de texte ! ») : un lieu, un véhicule, c'est un bouton qui se voit — ivoire poli,
   une épaisseur en dessous, un rond vide à gauche ; choisi, il devient vert poli et le rond se coche. Il s'enfonce
   sous le doigt comme les autres. */
.choix{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;text-align:left;
  border-radius:999px;border:1px solid #B9AE92;color:#2B2410;text-shadow:0 1px 0 rgba(255,255,255,.6);
  background:linear-gradient(180deg,#CFC6AE 0%,#F7F2E4 10%,#FFFDF7 30%,#F1EBDC 55%,#E6DEC9 80%,#CFC6AE 100%);
  box-shadow:0 6px 0 #A89C7E,inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 4px rgba(90,75,40,.18);
  transition:transform .09s ease,box-shadow .09s ease;
}
.choix::before{
  content:"";flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:3px solid #8E8368;background:#FFFDF7;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.choix:active{transform:translateY(5px);box-shadow:0 1px 0 #A89C7E,inset 0 1px 1px rgba(255,255,255,.7),inset 0 -2px 4px rgba(90,75,40,.18)}
.choix[aria-pressed="true"]{
  border-color:#085C45;color:#03271D;text-shadow:0 1px 0 rgba(230,255,245,.45);
  background:linear-gradient(180deg,#0B6E52 0%,#22B58C 9%,#7BE8C4 22%,#3FD1A5 38%,#12A07A 52%,#25BE92 64%,#0E8463 81%,#0B6E52 100%);
  box-shadow:0 6px 0 #0B5A42,inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,50,35,.35);
}
.choix[aria-pressed="true"]::before{
  border-color:#03271D;background:#FFFFFF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='5 13 10 18 19 7' fill='none' stroke='%230B6E52' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size:70% 70%;background-position:center;background-repeat:no-repeat;
}
.choix[aria-pressed="true"]:active{box-shadow:0 1px 0 #0B5A42,inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 5px rgba(0,50,35,.35)}
.choix:disabled{opacity:.45;transform:none}
@media (prefers-reduced-motion: reduce){ .choix{transition:none} }

/* L'ALERTE (03/10) : le rond clignote six secondes à l'arrivée du gbaka, chez le client comme chez l'assistant. */
.rond.alerte{animation:alerte .35s steps(2,end) infinite}
@keyframes alerte{to{filter:brightness(1.6);box-shadow:0 0 0 14px rgba(255,200,60,.55)}}
@media (prefers-reduced-motion: reduce){ .rond.alerte{animation:none;box-shadow:0 0 0 10px rgba(255,200,60,.55)} }


/* L'ASSISTANT EN BLEU (Honoré, 05/10) : même métal poli, teinte du module. Le halo (--halo, ecran.css) dit « en cours » sur la
   barre et « un client » sur le rond ; le cuivre du second appui, l'or du « monté », le vide et la recherche restent les mêmes. */
:root[data-application="assistant"] .rond:not(.vide):not(.cherche):not(.monte):not(.arrivee){
  border:1px solid #0D4C8A;color:#04203A;text-shadow:0 1px 0 rgba(225,240,255,.45);
  background:radial-gradient(circle at 32% 26%,#EAF6FF 0%,#AEDCFF 13%,#5EB6F5 36%,#2487D8 58%,#1569B4 78%,#0D4C8A 100%);
  box-shadow:0 9px 0 #0B467C,0 0 30px var(--halo,transparent),inset 0 -8px 14px rgba(0,30,60,.45),inset 0 8px 12px rgba(255,255,255,.5),inset 0 0 0 1px rgba(225,240,255,.3);
}
:root[data-application="assistant"] .rond:not(.vide):not(.cherche):not(.monte):not(.arrivee):active{box-shadow:0 2px 0 #0B467C,inset 0 -4px 8px rgba(0,30,60,.5),inset 0 6px 10px rgba(255,255,255,.4)}
/* Le Client garde son vert, avec le même halo. */
:root[data-application="client"] .rond:not(.vide):not(.cherche):not(.monte){box-shadow:0 9px 0 #0B5A42,0 0 30px var(--halo,transparent),inset 0 -8px 14px rgba(0,50,35,.45),inset 0 8px 12px rgba(255,255,255,.5),inset 0 0 0 1px rgba(230,255,245,.3)}