/* =========================================================
   Lekalé — feuille de style unique (voyageur, chauffeur, admin)
   Direction : la gare routière. L'ordre de départ est le produit,
   donc la file d'attente est l'élément central du design.
   ========================================================= */

:root{
  /* Palette Lekalé : le bleu et l'orange du logo, posés sur un fond
     bleu-gris de panneau de signalisation. */
  --bleu:        #1B6EF3;
  --bleu-nuit:   #0E2A57;
  --bleu-clair:  #4E90F7;
  --orange:      #F97A16;
  --orange-pale: #FFE6D1;
  --rouge:       #C0402B;
  --vert:        #0E8A5F;
  --vert-pale:   #DCF2E8;

  --encre:       #0B1726;
  --gris:        #5D6B7C;
  --gris-clair:  #8A97A6;
  --fond:        #E6ECF3;
  --surface:     #FFFFFF;
  --surface-2:   #F4F7FA;
  --bordure:     #D4DDE7;

  --display: "Manrope", system-ui, -apple-system, sans-serif;
  --texte:   "Manrope", system-ui, -apple-system, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --r:   14px;
  --r-s: 9px;
  --ombre:    0 1px 2px rgba(11,23,38,.06), 0 6px 18px rgba(11,23,38,.07);
  --ombre-xl: 0 -8px 40px rgba(11,23,38,.22);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Les classes de mise en page (display:grid, display:flex) l'emportent sur
   la règle par défaut de l'attribut hidden : on rétablit la priorité. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--texte);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.1; }
p{ margin:0; }
button{ font:inherit; color:inherit; }
a{ color:var(--bleu); }

:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:4px; }

/* ---------- Coquille ---------- */
.app{
  max-width:560px;
  margin-inline:auto;
  min-height:100dvh;
  background:var(--surface);
  position:relative;
  padding-bottom:88px;
}

.zone{ padding:18px 16px; }
.zone--serree{ padding-top:0; }
.zone:empty{ padding:0; }

/* ---------- Fiche d'une réservation, en page entière ---------- */
.reservation{
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r);
  padding:14px; box-shadow:var(--ombre); margin-bottom:12px;
}
.reservation__haut{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.reservation__trajet{ font-family:var(--display); font-weight:700; font-size:16px; }
.reservation__quand{ font-size:12.5px; color:var(--gris); margin-top:2px; }
.reservation__code{
  font-family:var(--data); font-weight:600; font-size:15px; color:var(--bleu);
  background:var(--surface-2); border-radius:8px; padding:5px 9px; white-space:nowrap;
}
.reservation__etat{ margin-top:9px; }
.reservation__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.fiche{ margin:12px 0 0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; }
.fiche dt{
  font-family:var(--data); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gris); align-self:center;
}
.fiche dd{ margin:0; font-size:14px; text-align:right; }
.fiche__fort{ font-family:var(--data); font-weight:600; }

.consentement{
  display:flex; align-items:flex-start; gap:10px; margin:16px 0; padding:12px;
  border:1px solid var(--bordure); border-radius:12px; background:var(--surface-2);
  color:var(--gris); font-size:12.5px; line-height:1.5; cursor:pointer;
}
.consentement input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--bleu); }
.consentement b{ color:var(--encre); }
.consentement a{ color:var(--bleu); font-weight:700; }

.verification{ text-align:center; }
.verification--validee{ border-color:#9BDEC4; background:linear-gradient(145deg, #fff 40%, #EAF8F1); }
.verification__icone{
  display:grid; place-items:center; width:58px; height:58px; margin:0 auto 12px;
  border-radius:99px; color:var(--bleu); background:var(--bleu-pale);
}
.verification--validee .verification__icone{ color:var(--vert); background:var(--vert-pale); }
.verification__texte{ color:var(--gris); font-size:14px; line-height:1.55; }
.verification__confidentialite{
  margin-top:16px; padding:12px; border-radius:12px; background:var(--surface-2);
  color:var(--gris); text-align:left; font-size:12.5px; line-height:1.55;
}
.verification__confidentialite b{ color:var(--encre); }
.verification__cadre{
  overflow:hidden; min-height:490px; margin-top:16px; border:1px solid var(--bordure);
  border-radius:14px; background:#fff;
}
.verification__cadre iframe{ display:block; width:100%; min-height:490px; border:0; }

.note-globale{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.note-globale b{ font-family:var(--data); font-size:22px; }
.note-globale span{ font-size:12.5px; color:var(--gris); }
.avis{
  font-size:13.5px; color:var(--encre); background:var(--surface-2);
  border-radius:10px; padding:10px 12px; margin-top:8px;
}

/* ---------- Accueil sur carte ---------- */
.app--plein{ padding-bottom:0; display:flex; flex-direction:column; height:100dvh; max-width:560px; }

.carte-entete{
  background:var(--bleu); color:#fff; flex:none;
  padding:calc(10px + env(safe-area-inset-top)) 12px 12px;
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:8px;
}
.carte-entete__titre{ text-align:center; min-width:0; }
.carte-entete__titre > span:first-child{
  display:block; font-family:var(--display); font-weight:700; font-size:18px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.carte-entete__sous{
  display:block; font-family:var(--data); font-size:11px; letter-spacing:.04em;
  color:rgba(255,255,255,.72); margin-top:2px;
}
.carte-entete__bouton{
  width:40px; height:40px; border-radius:12px; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
  position:relative;
}
.carte-entete__actions{ display:flex; align-items:center; gap:8px; }
.carte-entete__actions a{
  color:var(--encre); text-decoration:none; font-size:12px; font-weight:800;
  white-space:nowrap; padding:8px 0;
}
/* Les deux boutons de l'en-tête sont dessinés en CSS : trois traits et une cloche. */
#menu::before{
  content:""; width:18px; height:2px; background:#fff; border-radius:2px;
  box-shadow:0 -6px 0 #fff, 0 6px 0 #fff;
}
#alertes::before{
  content:""; width:14px; height:14px; border:2px solid #fff; border-bottom:0;
  border-radius:7px 7px 0 0; margin-bottom:3px;
}
#alertes::after{
  content:""; position:absolute; bottom:11px; width:20px; height:2px;
  background:#fff; border-radius:2px;
}

@media (max-width:390px){
  .carte-entete{ padding-inline:8px; gap:5px; }
  .carte-entete__actions{ gap:6px; }
  .carte-entete__actions a{ font-size:11px; }
}

.chercher-barre{ background:var(--bleu); padding:0 12px 14px; flex:none; }
.chercher-champ{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border:0; border-radius:14px; padding:15px 16px; cursor:pointer;
  font:inherit; font-size:15px; color:var(--gris-clair); text-align:left;
  box-shadow:0 6px 18px rgba(11,23,38,.16);
}
.chercher-champ input{
  min-width:0; flex:1; border:0; outline:0; padding:0; background:transparent;
  color:var(--encre); font:inherit; font-size:16px; line-height:1.35;
}
.chercher-champ input::placeholder{ color:var(--gris-clair); opacity:1; }
.chercher-champ:focus-within{ outline:3px solid #fff8; outline-offset:2px; }
.chercher-champ__ico{ color:var(--bleu); display:grid; place-items:center; }
.app--plein[data-role="chauffeur"] .chercher-barre{ display:none; }

.carte-zone{ position:relative; flex:1 1 auto; min-height:180px; }
#carte{ position:absolute; inset:0; background:var(--surface-2); }
.carte-absente{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px;
  color:var(--gris-clair); font-size:13px; text-align:center; padding:20px;
}
.carte-zoom{ position:absolute; top:12px; left:12px; z-index:500; display:grid; gap:8px; }
.carte-zoom button, .carte-recentrer{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--bordure);
  background:#fff; color:var(--bleu); font-size:20px; font-weight:600; cursor:pointer;
  box-shadow:0 2px 8px rgba(11,23,38,.14); display:grid; place-items:center;
}
.carte-recentrer{ position:absolute; right:12px; bottom:12px; z-index:500; }
.carte-recentrer::before{
  content:""; width:14px; height:14px; border:3px solid var(--bleu); border-radius:99px;
}
.point-moi span{
  display:block; width:18px; height:18px; border-radius:99px; background:var(--bleu);
  border:3px solid #fff; box-shadow:0 0 0 1px var(--bleu), 0 2px 6px rgba(11,23,38,.3);
}

.panneau{
  flex:none; background:var(--surface); border-radius:18px 18px 0 0; margin-top:-18px;
  position:relative; z-index:600; padding:16px 16px 12px;
  box-shadow:0 -6px 22px rgba(11,23,38,.12); max-height:40dvh; overflow-y:auto;
}
.app--plein[data-role="chauffeur"] .panneau{ max-height:36dvh; }
.panneau__titre{
  font-family:var(--data); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); margin-bottom:9px;
}
.panneau__vide{ font-size:13.5px; color:var(--gris); }
.panneau__note{ font-size:13px; color:var(--gris); margin-top:12px; text-align:center; }
.panneau__note span{ font-family:var(--data); }

.rappel{
  display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--encre);
  background:var(--orange-pale); border:1px solid #F7C79E; border-radius:12px;
  padding:12px 14px; margin-bottom:14px;
}
.rappel__ico{ color:var(--orange); display:grid; place-items:center; }
.rappel b{ display:block; font-size:14.5px; }
.rappel__sous{ display:block; font-size:12.5px; color:var(--gris); margin-top:2px; }

.puces{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.puces::-webkit-scrollbar{ display:none; }
.puce{
  flex:none; display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1.5px solid var(--bleu); color:var(--bleu); border-radius:99px;
  padding:9px 14px; font-size:14px; font-weight:600; background:#fff;
}
.puce b{
  font-family:var(--data); font-size:11px; background:var(--bleu); color:#fff;
  border-radius:99px; padding:2px 7px;
}
.destinations-carte{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.destination-carte{
  display:grid; gap:3px; min-width:0; text-decoration:none; text-align:left;
  border:1px solid var(--color-primary-border); border-radius:12px; padding:11px 12px;
  background:var(--color-primary-soft); color:var(--encre);
}
.destination-carte:hover{ border-color:var(--bleu); background:#fff; }
.destination-carte__nom{ font-family:var(--display); font-weight:700; font-size:15px; }
.destination-carte__detail{ color:var(--gris); font-size:12px; line-height:1.35; }
.destination-carte__detail b{ color:var(--vert); }
.destination-carte[hidden]{ display:none; }
.destination-vide{ grid-column:1 / -1; margin:4px 0; color:var(--gris); font-size:13px; }

.etat-ligne{
  border:1px solid var(--bordure); border-radius:12px; padding:13px 14px;
  background:var(--surface-2);
}
.etat-ligne b{ display:block; font-family:var(--display); font-size:15px; }
.etat-ligne span{ display:block; font-size:12.5px; color:var(--gris); margin-top:3px; }
.etat-ligne--actif{ background:var(--vert-pale); border-color:#B7E3D1; }

/* ---------- Page d'accueil ---------- */
.accueil{
  min-height:100dvh; background:var(--bleu-nuit); color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:34px;
  padding:calc(40px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
  max-width:560px; margin-inline:auto; text-align:center;
}
.accueil__haut{ display:grid; justify-items:center; gap:2px; }
.accueil__logo{ width:96px; height:96px; margin-bottom:14px; }
.accueil__marque{
  font-family:var(--display); font-weight:800; font-size:46px; letter-spacing:-.03em;
}
.accueil__pays{ font-family:var(--data); font-size:11px; letter-spacing:.32em; color:var(--orange); }
.accueil__phrase{ font-size:15px; color:#9DB2CC; margin-top:14px; max-width:26ch; }
.accueil__choix{ display:grid; gap:12px; }
.accueil__pied{ font-family:var(--data); font-size:12px; letter-spacing:.04em; color:#6E829C; line-height:1.8; }

.btn--grand{
  justify-content:flex-start; gap:14px; padding:16px 18px; text-align:left; border-radius:14px;
}
.btn__ico{ font-size:26px; line-height:1; }
.btn__titre{ display:block; font-size:17px; }
.btn__sous{ display:block; font-family:var(--texte); font-weight:400; font-size:12.5px; opacity:.72; margin-top:2px; }
.btn--clair{ background:#FFFFFF; color:var(--bleu-nuit); }
.btn--clair:hover{ background:#E9EFF6; }

/* ---------- En-tête ---------- */
.entete{
  background:var(--bleu-nuit);
  color:#fff;
  /* Sur iPhone, l'application posée sur l'écran d'accueil passe sous la barre
     d'état : on repousse le contenu de la hauteur de l'encoche. */
  padding:calc(14px + env(safe-area-inset-top)) 16px 16px;
  position:sticky; top:0; z-index:40;
}
.entete__ligne{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.marque{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:#fff; }
.marque__nom{
  font-family:var(--display); font-weight:800; font-size:25px; letter-spacing:-.025em;
}
.marque__pays{ font-family:var(--data); font-weight:600; font-size:11px; color:var(--orange); letter-spacing:.16em; }

.entete__slogan{
  font-family:var(--data); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:#8FA6C2; margin-top:7px;
}
.entete__lien{
  font-size:13px; font-weight:600; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.28); border-radius:99px; padding:7px 13px;
  white-space:nowrap; background:transparent; cursor:pointer; font-family:var(--texte);
}
.entete__lien:hover{ background:rgba(255,255,255,.1); }

/* ---------- Recherche ---------- */
.recherche{
  background:var(--bleu);
  background-image:linear-gradient(180deg,#164380,#12386E);
  padding:16px; color:#fff;
}
.trajet-saisie{
  background:var(--surface); border-radius:var(--r); padding:4px 6px;
  display:grid; grid-template-columns:1fr auto; align-items:center;
}
.champ-ville{ grid-column:1; display:flex; align-items:center; gap:10px; padding:10px 8px; }
.champ-ville + .champ-ville{ border-top:1px dashed var(--bordure); }
.champ-ville__puce{
  width:10px; height:10px; border-radius:99px; flex:none;
  border:3px solid var(--bleu); background:#fff;
}
.champ-ville--arrivee .champ-ville__puce{ border-color:var(--rouge); background:var(--rouge); }
.champ-ville__bloc{ flex:1; min-width:0; }
.champ-ville__label{
  display:block; font-family:var(--data); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris-clair);
}
.champ-ville select{
  width:100%; border:0; background:transparent; padding:1px 0;
  font-family:var(--display); font-size:19px; font-weight:700; color:var(--encre);
  appearance:none; cursor:pointer;
}
.inverser{
  grid-column:2; grid-row:1 / span 2; align-self:center; margin-right:4px;
  width:36px; height:36px; border-radius:99px; border:0;
  background:var(--bleu-nuit); color:#fff; cursor:pointer; font-size:16px; line-height:1;
  display:grid; place-items:center;
}
.inverser:active{ transform:rotate(180deg); }

.jours{ display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.jours::-webkit-scrollbar{ display:none; }
.jour{
  flex:none; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08);
  color:#fff; border-radius:99px; padding:7px 14px; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap; min-height:44px;
}
.jour[aria-pressed="true"]{ background:var(--orange); border-color:var(--orange); color:var(--bleu-nuit); }

/* ---------- Destinations (classement par destination) ---------- */
.titre-section{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px;
}
.titre-section h2{ font-size:17px; }
.titre-section span{ font-family:var(--data); font-size:11px; color:var(--gris); letter-spacing:.06em; }

.destinations{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.destination{
  text-align:left; background:var(--surface); border:1px solid var(--bordure);
  border-left:4px solid var(--orange); border-radius:var(--r-s);
  padding:11px 12px; cursor:pointer;
}
.destination:hover{ border-color:var(--bleu-clair); }
.destination__nom{ display:block; font-family:var(--display); font-weight:700; font-size:15px; }
.destination__info{ display:block; font-family:var(--data); font-size:12px; line-height:1.5; color:var(--gris); margin-top:4px; }
.destination__info b{ color:var(--vert); }

/* ---------- Le ticket : rail de rang + corps ---------- */
.file{ display:flex; flex-direction:column; gap:12px; }

.ticket{
  display:grid; grid-template-columns:58px 1fr;
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r);
  box-shadow:var(--ombre); overflow:hidden; position:relative;
  width:100%; text-align:left; padding:0; cursor:pointer;
  animation:monte .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes monte{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.ticket__rail{
  background:var(--bleu-nuit); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  position:relative;
}
.ticket--premier .ticket__rail{ background:var(--orange); color:var(--bleu-nuit); }
.ticket__rang{ font-family:var(--data); font-weight:700; font-size:26px; line-height:1; }
.ticket__rang-suffixe{ font-family:var(--data); font-size:11px; letter-spacing:.09em; text-transform:uppercase; opacity:.75; }

/* perforation : encoches + pointillés, comme un talon de billet */
.ticket__rail::before,
.ticket__rail::after{
  content:""; position:absolute; right:-7px; width:14px; height:14px;
  background:var(--surface); border-radius:99px;
}
.ticket__rail::before{ top:-7px; }
.ticket__rail::after{ bottom:-7px; }

.ticket__corps{
  padding:12px 14px;
  border-left:2px dashed var(--bordure);
  display:grid; gap:8px;
}
.ticket__haut{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ticket__chauffeur{ display:block; font-family:var(--display); font-weight:700; font-size:16px; }
.ticket__vehicule{ display:block; font-size:12.5px; color:var(--gris); margin-top:1px; }
.ticket__prix{ font-family:var(--data); font-weight:700; font-size:16.5px; white-space:nowrap; text-align:right; }
.ticket__prix small{ font-size:12px; color:var(--gris); font-weight:400; display:block; text-align:right; }

.ticket__rdv{ font-size:13px; color:var(--gris); display:flex; gap:6px; align-items:flex-start; }
.ticket__rdv b{ color:var(--encre); font-weight:600; }

.ticket__bas{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ticket--complet{ opacity:.62; }
.ticket--complet .ticket__rail{ background:var(--gris); color:#fff; }

/* ---------- Places : pastilles (petits véhicules) ou barre (bus) ---------- */
.places{ display:flex; align-items:center; gap:7px; }
.places__points{ display:flex; gap:3px; }
.point{ width:9px; height:9px; border-radius:2px 2px 4px 4px; background:var(--vert); }
.point--pris{ background:var(--bordure); }
.places__barre{ width:74px; height:7px; border-radius:99px; background:var(--bordure); overflow:hidden; }
.places__barre i{ display:block; height:100%; background:var(--vert); }
.places__texte{ font-family:var(--data); font-size:11.5px; color:var(--gris); }
.places__texte b{ color:var(--vert); }

/* ---------- Notation ---------- */
.critere{ margin-bottom:16px; }
.critere__titre{ font-weight:600; font-size:15px; }
.critere__aide{ font-size:12.5px; color:var(--gris); margin-top:2px; }
.notes{ display:flex; gap:6px; margin-top:8px; }
.note{
  background:none; border:0; padding:2px; cursor:pointer; line-height:0;
  color:var(--bordure); transition:color .12s;
}
.note:hover{ color:#F7C79E; }
.note--pleine{ color:var(--orange); }
.note--pleine svg{ fill:currentColor; }

/* ---------- Icônes ---------- */
.ico{ flex:none; vertical-align:-0.18em; }
.etoiles{ display:inline-flex; gap:1px; color:var(--orange); vertical-align:-0.16em; }
.etoiles svg{ flex:none; }

/* ---------- Étiquettes ---------- */
.etiq{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--data); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; border-radius:5px; background:var(--surface-2); color:var(--gris);
  border:1px solid var(--bordure);
}
.etiq--live{ background:var(--vert-pale); color:#0a6a49; border-color:#B7E3D1; }
.etiq--alerte{ background:#FDE9E5; color:#9A3120; border-color:#F3C6BC; }
.etiq--or{ background:var(--orange-pale); color:#9A4A08; border-color:#F7C79E; }
.pastille{ width:7px; height:7px; border-radius:99px; background:var(--vert); }
.etiq--live .pastille{ animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:11px; padding:14px 18px; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em;
  background:var(--bleu); color:#fff; text-decoration:none;
}
.btn:hover{ background:#0F2F5E; }
.btn--orange{ background:var(--orange); color:var(--bleu-nuit); }
.btn--orange:hover{ background:#E06A0C; }
.btn--fantome{ background:transparent; color:var(--bleu); border:1.5px solid var(--bordure); }
.btn--fantome:hover{ background:var(--surface-2); }
.btn--rouge{ background:var(--rouge); }
.btn--bloc{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn--petit{ min-height:44px; padding:9px 13px; font-size:14px; border-radius:9px; }

/* ---------- Formulaires ---------- */
.champ{ display:block; margin-bottom:13px; }
.champ__label{
  display:block; font-family:var(--data); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris); margin-bottom:5px;
}
.champ input, .champ select, .champ textarea{
  width:100%; padding:12px 13px; border:1.5px solid var(--bordure); border-radius:10px;
  font:inherit; font-size:16px; background:var(--surface); color:var(--encre);
}
.champ input:focus, .champ select:focus{ border-color:var(--bleu-clair); outline:none; }
.champ__aide{ font-size:13px; color:var(--gris); margin-top:5px; line-height:1.45; }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ---------- Fiche d'une personne, dans la console ---------- */
.dossier{ padding:12px 0; border-bottom:1px solid var(--bordure); }
.dossier:last-child{ border-bottom:0; }
.dossier--suspendu{
  background:#FDF3F1; border-left:3px solid var(--rouge);
  padding-left:10px; margin-left:-10px; border-radius:0 8px 8px 0;
}

/* ---------- Champ photo (pièces justificatives) ---------- */
.photo{ display:block; margin-bottom:13px; position:relative; }
.photo input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; }
.photo__zone{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  border:1.5px dashed var(--bordure); border-radius:10px; padding:12px;
  background:var(--surface-2);
}
.photo__zone:hover{ border-color:var(--bleu-clair); }
.photo input[type="file"]:focus-visible + .photo__zone{ outline:3px solid var(--orange); outline-offset:2px; }
.photo__vignette{
  width:54px; height:54px; flex:none; border-radius:9px; object-fit:cover;
  background:var(--bordure); display:grid; place-items:center; font-size:21px;
}
.photo__titre{ font-weight:600; font-size:14px; }
.photo__aide{ font-size:12px; color:var(--gris); margin-top:2px; }
.photo--remplie .photo__zone{ border-style:solid; border-color:var(--vert); background:var(--vert-pale); }

/* Pièces d'un dossier, dans la console */
.pieces{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0; }
.pieces a{ display:block; }
.pieces img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px;
  border:1px solid var(--bordure); background:var(--surface-2);
  overflow:hidden; font-size:0;
}
.pieces figcaption{
  font-family:var(--data); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gris); margin-top:4px; text-align:center;
}
.pieces figure{ margin:0; }

/* ---------- Cartes ---------- */
.carte{
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r);
  padding:16px; box-shadow:var(--ombre);
}
.carte + .carte{ margin-top:12px; }
.carte__titre{ font-family:var(--display); font-weight:700; font-size:16px; margin-bottom:12px; }

.bandeau{
  border-radius:var(--r); padding:14px 16px; display:flex; gap:12px; align-items:flex-start;
  border:1px solid; margin-bottom:14px;
}
.bandeau--info{ background:var(--vert-pale); border-color:#B7E3D1; color:#0A5C40; }
.bandeau--alerte{ background:#FDE9E5; border-color:#F3C6BC; color:#8E2D1D; }
.bandeau--or{ background:var(--orange-pale); border-color:#F7C79E; color:#8A4207; }
.bandeau > span:last-child{ display:block; }
.bandeau__titre{ display:block; font-family:var(--display); font-weight:700; font-size:15px; }
.bandeau__texte{ display:block; font-size:13.5px; margin-top:3px; }

/* ---------- Interrupteur « en ligne » ---------- */
.interrupteur{
  background:var(--bleu-nuit); border-radius:var(--r); padding:18px; color:#fff;
  display:grid; gap:14px;
}
.interrupteur--actif{ background:var(--vert); }
.interrupteur__etat{ font-family:var(--display); font-weight:800; font-size:21px; }
.interrupteur__detail{ font-size:13.5px; color:rgba(255,255,255,.82); margin-top:3px; }
.interrupteur__rang{
  font-family:var(--data); font-weight:700; font-size:11.5px; line-height:1.7;
  background:rgba(255,255,255,.16); border-radius:8px; padding:10px 12px;
}

/* ---------- Feuille (modale bas d'écran) ---------- */
.feuille{
  position:fixed; inset:0; z-index:60; display:none;
}
.feuille[open]{ display:block; }
.feuille__voile{ position:absolute; inset:0; background:rgba(10,27,49,.55); border:0; width:100%; }
.feuille__panneau{
  position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:100%; max-width:560px; max-height:92dvh; overflow-y:auto;
  background:var(--surface); border-radius:20px 20px 0 0; padding:20px 16px 26px;
  box-shadow:var(--ombre-xl);
  animation:monteFeuille .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes monteFeuille{ from{ transform:translate(-50%,100%); } to{ transform:translate(-50%,0); } }
.feuille__poignee{ width:42px; height:4px; border-radius:99px; background:var(--bordure); margin:0 auto 16px; }

/* ---------- Bloc de paiement ---------- */
.paiement{
  border-radius:var(--r); padding:20px 18px; text-align:center; color:#06101E;
}
.paiement__ico{ font-size:30px; line-height:1; }
.paiement__quoi{ font-size:14px; margin-top:8px; }
.paiement__quoi b{ font-family:var(--data); font-size:16px; }
.paiement__numero{
  font-family:var(--data); font-weight:700; font-size:26px; letter-spacing:.04em; margin:6px 0 2px;
}
.paiement__qui{ font-size:12.5px; opacity:.75; }
.paiement__actions{ display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.paiement__actions .btn{ background:rgba(6,16,30,.14); color:#06101E; }
.paiement__actions .btn:hover{ background:rgba(6,16,30,.24); }

/* ---------- Billet de confirmation ---------- */
.billet{
  background:var(--bleu-nuit); color:#fff; border-radius:var(--r); padding:20px; text-align:center;
}
.billet__code{
  font-family:var(--data); font-weight:700; font-size:30px; letter-spacing:.08em;
  color:var(--orange); margin:10px 0 4px;
}
.billet__ligne{
  display:flex; justify-content:space-between; gap:10px; font-size:13.5px;
  padding:8px 0; border-top:1px dashed rgba(255,255,255,.22); text-align:left;
}
.billet__ligne span:first-child{ color:#9DB2CC; }
.billet__ligne span:last-child{ font-weight:600; }

/* ---------- Listes simples ---------- */
.ligne{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--bordure);
}
.ligne:last-child{ border-bottom:0; }
.ligne__titre{ font-weight:600; font-size:14.5px; }
.ligne__sous{ font-size:12.5px; color:var(--gris); margin-top:2px; }
.ligne__val{ font-family:var(--data); font-size:12.5px; text-align:right; max-width:62%; overflow-wrap:anywhere; }
.ligne__actions{ display:flex; gap:6px; justify-content:flex-end; margin-top:7px; }

.vide{
  text-align:center; padding:34px 18px; color:var(--gris);
  border:2px dashed var(--bordure); border-radius:var(--r);
}
.vide__titre{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--encre); margin-bottom:5px; }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
.stat{ background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r-s); padding:12px; }
.stat__val{ font-family:var(--data); font-weight:700; font-size:22px; }
.stat__lab{ font-size:11.5px; color:var(--gris); letter-spacing:.03em; }

/* ---------- Barre du bas ---------- */
.barre{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:560px; background:var(--surface);
  border-top:1px solid var(--bordure); display:grid; grid-template-columns:repeat(3,1fr);
  z-index:50; padding-bottom:env(safe-area-inset-bottom);
}
.barre[data-cols="2"]{ grid-template-columns:repeat(2,1fr); }
.barre[data-cols="4"]{ grid-template-columns:repeat(4,1fr); }
.barre[data-cols="4"] a{ font-size:10.5px; }
.barre a{
  padding:10px 4px 12px; text-align:center; text-decoration:none; color:var(--gris);
  font-size:11px; font-weight:600; display:grid; gap:3px; justify-items:center;
}
.barre a[aria-current="page"]{ color:var(--bleu); }
.barre a[aria-current="page"] .barre__ico{ background:var(--orange); }
.barre__ico{ font-size:17px; line-height:1; width:34px; height:26px; display:grid; place-items:center; border-radius:8px; }

/* ---------- Pied ---------- */
.pied{ padding:22px 16px 10px; color:var(--gris); font-size:12px; text-align:center; }

/* ---------- Menu latéral de la carte ---------- */
.menu-tiroir{
  inset:0 auto 0 0; margin:0; width:min(340px,90vw); max-width:90vw;
  height:100dvh; max-height:100dvh; border:0; padding:24px 20px;
  background:#fff; box-shadow:12px 0 40px rgba(6,16,30,.19);
}
.menu-tiroir[open]{ display:flex; flex-direction:column; gap:24px; }
.menu-tiroir::backdrop{ background:rgba(6,16,30,.53); }
.menu-tiroir__entete{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.menu-tiroir__entete h2{ margin:0; font-size:24px; }
.menu-tiroir__entete p{ margin:5px 0 0; color:var(--gris); font-size:14px; }
.menu-tiroir__fermer{ width:44px; height:44px; border:0; border-radius:50%; font:28px/1 sans-serif; cursor:pointer; }
.menu-tiroir nav{ display:grid; gap:5px; }
.menu-tiroir nav a{ display:flex; align-items:center; gap:14px; min-height:48px; padding:14px 10px; color:inherit; font-weight:600; text-decoration:none; border-radius:10px; }
.menu-tiroir nav a > span{ display:flex; width:24px; }
.menu-tiroir__fin{ display:grid; gap:8px; margin-top:auto; padding-top:20px; border-top:1px solid var(--bordure); }

/* ---------- Bureau : deux colonnes ---------- */
@media (min-width:960px){
  .app--large{ max-width:1080px; padding-bottom:40px; }
  .app--large .colonnes{ display:grid; grid-template-columns:380px 1fr; gap:22px; align-items:start; padding:18px 16px; }
  .app--large .colonne-gauche{ position:sticky; top:96px; }
  .app--large .recherche{ border-radius:var(--r); }
  .app--large .destinations{ grid-template-columns:repeat(2,1fr); }
  .barre{ display:none; }
  .app--large{ padding-bottom:0; }
}

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