:root {
  --encre: #1f2a37;
  --gris: #6b7280;
  --trait: #d1d5db;
  --fond: #f9fafb;
  --carte: #ffffff;
  --accent: #0f766e;
  --accent-clair: #ccfbf1;
  --alerte: #b91c1c;
  --alerte-clair: #fee2e2;
  --ambre-clair: #fef3c7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--encre);
  background: var(--fond);
  line-height: 1.4;
}

h1 { margin: 0; font-size: 1.4rem; }

.vide { color: var(--gris); }

/* --- La page du chauffeur : un téléphone, des doigts, parfois le soleil --- */

.chauffeur main { padding: 0 16px 32px; max-width: 520px; margin: 0 auto; }

.entete-journee { padding: 20px 16px 12px; max-width: 520px; margin: 0 auto; }
.entete-journee p { margin: 4px 0 0; color: var(--gris); }

.carte {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-left: 6px solid var(--trait);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.carte.complete { border-left-color: var(--accent); }
.carte p { margin: 0 0 4px; }
.carte .heure { font-size: 1.5rem; font-weight: 700; }
.carte .passager { font-weight: 600; }
.carte .adresse { color: var(--gris); margin-bottom: 12px; }

.carte form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Un libellé sur deux lignes à côté d'un libellé court : les deux cases restent alignées en bas. */
.carte label { display: flex; flex-direction: column; justify-content: flex-end; font-size: 0.9rem; color: var(--gris); }
.carte input {
  font-size: 1.4rem;
  padding: 10px;
  margin-top: 4px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  width: 100%;
}
.carte button {
  grid-column: 1 / -1;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
}

.erreur { background: var(--alerte-clair); color: var(--alerte); padding: 8px 10px; border-radius: 8px; }
.enregistre { background: var(--accent-clair); color: var(--accent); padding: 8px 10px; border-radius: 8px; }

.carte .facturee { font-size: 1.2rem; font-weight: 600; }
.carte .note { color: var(--gris); }

.message { padding: 32px 16px; max-width: 520px; margin: 0 auto; }

/* --- Les écrans de Rebecca : un ordinateur portable --- */

.navigation {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  padding: 12px 24px; background: var(--carte); border-bottom: 1px solid var(--trait);
}
.navigation a { color: var(--accent); text-decoration: none; }

.bureau main { padding: 20px 24px; }
@media (max-width: 600px) { .bureau main, .navigation { padding-left: 16px; padding-right: 16px; } }

.entete-mois { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.entete-mois a { font-size: 1.6rem; color: var(--accent); text-decoration: none; padding: 0 6px; }

/* Sur un téléphone (Elena), le tableau défile dans son cadre au lieu d'élargir la page. */
.defilement { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--carte); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-size: 0.85rem; color: var(--gris); font-weight: 600; }
.nombre { text-align: right; }
.manque { color: var(--alerte); }
tr.etat-faite .manque { color: var(--gris); }
/* Sur un ordinateur de 1280 px, le tableau tient sans défiler : le jour court, l'arrivée et le détail du prix vont à
   la ligne au lieu d'élargir leur colonne. */
.courses td.jour, .courses td.nombre { white-space: nowrap; }
.courses a { color: var(--accent); }
.courses .arrivee { display: block; font-size: 0.8rem; color: var(--gris); }
.courses .detail { display: block; font-size: 0.8rem; color: var(--gris); white-space: nowrap; }
.courses .apercu { display: block; margin-top: 4px; font-size: 0.85rem; white-space: nowrap; }
.courses td.manque { font-size: 0.9rem; }
.courses .a-verifier { color: var(--alerte); }

.bandeau { background: var(--ambre-clair); padding: 10px 14px; border-radius: 8px; }

.navigation .deconnexion { margin-left: auto; display: flex; gap: 12px; align-items: center; color: var(--gris); }
.navigation .deconnexion button {
  border: 1px solid var(--trait); background: var(--carte); color: var(--encre); border-radius: 6px; padding: 4px 10px;
}

/* --- La connexion de Rebecca et d'Elena --- */

.connexion { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
.connexion h1 { margin-bottom: 20px; color: var(--accent); }
.connexion form { display: flex; flex-direction: column; gap: 14px; }
.connexion label { display: flex; flex-direction: column; font-size: 0.9rem; color: var(--gris); }
.connexion input { font-size: 1.1rem; padding: 10px; margin-top: 4px; border: 1px solid var(--trait); border-radius: 8px; }
.connexion button {
  font-size: 1.05rem; font-weight: 600; padding: 12px; border: 0; border-radius: 8px; background: var(--accent);
  color: #fff;
}
/* Le second facteur (ticket 09d) : le code, l'enrôlement et les codes de secours, lisibles sur un téléphone à 375 px. */
.connexion.double-facteur { max-width: 440px; margin-top: 6vh; padding-bottom: 32px; }
.double-facteur .aide { margin: 0 0 14px; }
.double-facteur label.case { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--encre); }
.double-facteur label.case input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.double-facteur .accepte { background: var(--accent-clair); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.double-facteur .erreur { margin: 0 0 14px; }
.double-facteur form + form { margin-top: 12px; }
.double-facteur button.secondaire { background: var(--carte); color: var(--accent); border: 1px solid var(--accent); }
.double-facteur details.secours { margin-top: 20px; }
.double-facteur details.secours summary { color: var(--accent); cursor: pointer; }
.double-facteur details.secours form { margin-top: 12px; }
.double-facteur details.secours .aide { margin-top: 10px; }
.double-facteur ol.etapes { padding-left: 20px; margin: 0 0 16px; }
.double-facteur ol.etapes li { margin-bottom: 12px; }
.double-facteur img.qr { display: block; margin: 8px 0; max-width: 100%; height: auto; image-rendering: pixelated; }
.double-facteur .cle {
  display: block; margin: 8px 0 6px; font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem;
  letter-spacing: 0.04em; word-break: break-word;
}
.double-facteur input.cle-a-copier { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
.double-facteur a.ouvrir-app { font-weight: 600; color: var(--accent); }
.double-facteur ol.codes {
  font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; background: var(--carte);
  border: 1px solid var(--trait); border-radius: 8px; padding: 12px 12px 12px 40px; margin: 0 0 16px;
  display: grid; grid-template-columns: 1fr; gap: 4px;
}
@media (min-width: 560px) { .double-facteur ol.codes { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.envois .texte { word-break: break-all; }

/* --- Les fiches des passagers et de leurs payeurs (Rebecca, ordinateur ou iPad) --- */

.fiches { max-width: 760px; }
.fiches h2 { font-size: 1.1rem; margin: 0 0 8px; }
.fiches section { margin-bottom: 24px; }
.fiches .bandeau ul { margin: 8px 0 0; padding-left: 20px; }
.fiches a { color: var(--accent); }
.entete-fiches { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
                 margin-bottom: 16px; }
.bouton {
  display: inline-block; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: #fff !important;
  text-decoration: none; font-weight: 600;
}
.aide { color: var(--gris); font-size: 0.9rem; margin: 0; }

.formulaire { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.formulaire fieldset {
  display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 14px 16px;
  border: 1px solid var(--trait); border-radius: 12px; background: var(--carte);
}
.formulaire legend { font-weight: 600; padding: 0 6px; }
.formulaire label { display: flex; flex-direction: column; font-size: 0.9rem; color: var(--gris); }
.formulaire input, .formulaire select {
  font-size: 1.05rem; padding: 9px 10px; margin-top: 4px; border: 1px solid var(--trait); border-radius: 8px;
  background: var(--carte); color: var(--encre); width: 100%;
}
.formulaire .npa-localite { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; }
.formulaire .choix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 0.9rem; color: var(--gris); }
.formulaire .choix span { flex-basis: 100%; }
.formulaire .choix label { flex-direction: row; align-items: center; gap: 6px; font-size: 1.05rem; color: var(--encre); }
.formulaire .choix input { width: 22px; height: 22px; margin: 0; }
.formulaire button {
  align-self: flex-start; font-size: 1.05rem; font-weight: 600; padding: 12px 18px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff;
}

/* « C'est… » : relier une écriture de l'agenda à une fiche (ticket 15a). Les courses couvertes demandent la largeur. */
.fiches.ecriture { max-width: 1100px; }
.ecriture h1 { margin-bottom: 8px; }
.ecriture > .aide { max-width: 760px; margin-bottom: 16px; }
.ecriture > .erreur { max-width: 760px; }
.ecriture td.jour { white-space: nowrap; }
.ecriture #choisir .aide { margin-top: 12px; }
.formulaire .liste-fiches { gap: 4px; }
.formulaire .liste-fiches label {
  flex-direction: row; align-items: center; gap: 10px; padding: 8px 4px; font-size: 1.05rem; color: var(--encre);
  border-bottom: 1px solid var(--trait); cursor: pointer;
}
.formulaire .liste-fiches label:last-of-type { border-bottom: 0; }
.formulaire .liste-fiches input { width: 22px; height: 22px; margin: 0; flex: none; }
.formulaire .liste-fiches .detail { display: block; font-size: 0.85rem; color: var(--gris); }

/* --- Les factures du mois : à valider, validées, pas encore facturables (Rebecca, ordinateur ou iPad, ticket 07) --- */

.factures { max-width: 1100px; }
.factures h1 { margin-bottom: 12px; }
.factures > p { margin: 0 0 12px; }
.factures a { color: var(--accent); }
.onglets { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 16px; border-bottom: 1px solid var(--trait); }
.onglets a { padding: 6px 0; text-decoration: none; border-bottom: 3px solid transparent; }
.onglets a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; color: var(--encre); }
.factures .detail { display: block; font-size: 0.8rem; color: var(--gris); }
.factures .manque.detail { color: var(--alerte); }
.factures td.jour { white-space: nowrap; }
.factures td form { margin: 4px 0 0; }
.factures td button, .tout-valider button {
  font-weight: 600; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--accent); color: #fff;
  cursor: pointer;
}
.tout-valider { margin-top: 16px; }
.tout-valider button { font-size: 1.05rem; padding: 12px 18px; }
.factures tr.annulee td { color: var(--gris); }
.factures tfoot td { font-weight: 600; }
.factures details.annuler summary { color: var(--accent); cursor: pointer; }
.factures details.annuler p { max-width: 320px; margin: 6px 0; }
.factures details.annuler button { background: var(--alerte); }
/* Le lieu d'une course choisi dans « Pas encore facturables » (ticket 17a). */
.factures form.choisir-lieu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 0 0 6px; }
.choisir-lieu label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--gris); }
.choisir-lieu input {
  font-size: 1rem; padding: 6px 8px; margin-top: 2px; border: 1px solid var(--trait); border-radius: 8px;
  background: var(--carte); color: var(--encre); width: 16rem; max-width: 100%;
}
/* Un lieu que Vectura propose, et sa correction dans « À valider » (ticket 17b). */
.factures .propose {
  display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--accent); background: var(--accent-clair);
  padding: 0 6px; border-radius: 6px;
}
.factures details.corriger-lieu { margin-top: 4px; }
.factures details.corriger-lieu summary { color: var(--accent); cursor: pointer; font-size: 0.85rem; }
.factures details.corriger-lieu form.choisir-lieu { margin: 6px 0 0; }
/* Les lignes en plus d'une facture à valider, et leur liste (ticket 05b). */
.factures ul.lignes-en-plus { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.85rem; }
.factures ul.lignes-en-plus li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.factures ul.lignes-en-plus form { margin: 0; }
.factures button.retirer {
  font-weight: 400; font-size: 0.8rem; padding: 2px 8px; background: var(--carte); color: var(--alerte);
  border: 1px solid var(--alerte); border-radius: 6px;
}
.factures details.ajouter-ligne { margin-top: 4px; }
.factures details.ajouter-ligne summary { color: var(--accent); cursor: pointer; font-size: 0.85rem; }
.factures form.ajouter-ligne, .factures form.libelle {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin: 6px 0 0;
}
.factures form.ajouter-ligne label, .factures form.libelle label {
  display: flex; flex-direction: column; font-size: 0.8rem; color: var(--gris);
}
.factures form.ajouter-ligne input, .factures form.ajouter-ligne select,
.factures form.libelle input, .factures form.libelle select {
  font-size: 1rem; padding: 6px 8px; margin-top: 2px; border: 1px solid var(--trait); border-radius: 8px;
  background: var(--carte); color: var(--encre); max-width: 100%;
}
.factures form.ajouter-ligne input[name="montant"], .factures form.libelle input[name="montant"] { width: 7rem; }
.factures form.libelle input[name="libelle"] { width: 24rem; }
.factures fieldset.ligne-libre {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin: 0; padding: 4px 8px 6px;
  border: 1px solid var(--trait); border-radius: 8px;
}
.factures fieldset.ligne-libre legend { font-size: 0.8rem; color: var(--gris); padding: 0 4px; }
.factures fieldset.ligne-libre label.sens { flex-direction: row; align-items: center; gap: 4px; font-size: 0.9rem; }
.factures fieldset.ligne-libre label.sens input { margin: 0; }
.factures fieldset.ligne-libre[hidden] { display: none; }
.factures .refus { display: block; max-width: 240px; font-size: 0.85rem; }
.factures ul.libelles { list-style: none; padding: 0; margin: 16px 0; }
.factures ul.libelles li {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; padding: 10px 0;
  border-bottom: 1px solid var(--trait);
}
.factures ul.libelles form { margin: 0; }
.factures form.libelle button, .factures form.ajouter-ligne button {
  font-weight: 600; padding: 7px 12px; border: 0; border-radius: 8px; background: var(--accent); color: #fff;
  cursor: pointer;
}
.factures ul.libelles button.retirer { padding: 7px 12px; font-size: 0.9rem; }

/* --- Le carnet des véhicules : « Photographier » sur le téléphone d'Elena, le carnet partout (ticket 12a) --- */

.pieces, .vehicules { max-width: 560px; }
.pieces h1, .vehicules h1 { margin-bottom: 16px; }
.pieces h2, .vehicules h2 { font-size: 1.05rem; margin: 20px 0 8px; }
.pieces a, .vehicules a { color: var(--accent); }
.pieces .aide, .vehicules .aide { margin: 12px 0; }

#envoi-piece { display: flex; flex-direction: column; gap: 12px; }
.gros-bouton {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 140px;
  border-radius: 16px; background: var(--accent); color: #fff; font-size: 1.5rem; font-weight: 700;
  cursor: pointer; text-align: center; padding: 16px;
}
.gros-bouton.occupe { opacity: 0.6; }
/* Le champ reste dans la page pour le clavier et les lecteurs d'écran, sous le bouton qui le couvre. */
.gros-bouton input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
#envoi-piece .envoyer {
  font-size: 1.1rem; font-weight: 600; padding: 12px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--carte); color: var(--accent);
}
.lecture-en-cours { margin: 0; color: var(--gris); text-align: center; font-size: 1.05rem; }

.resultat {
  font-size: 1.2rem; font-weight: 600; background: var(--carte); border: 1px solid var(--trait);
  border-left: 6px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px;
}
.resultat.a-choisir { border-left-color: var(--alerte); }
.choix-vehicule form { display: flex; flex-direction: column; gap: 10px; }
.choix-vehicule button {
  font-size: 1.1rem; padding: 14px; border-radius: 10px; border: 1px solid var(--trait); background: var(--carte);
  color: var(--encre); text-align: left;
}
.liens-piece { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.bouton.gros { display: block; text-align: center; padding: 14px; font-size: 1.1rem; margin-top: 8px; }

.liste-vehicules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.liste-vehicules a {
  display: block; padding: 14px 16px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  text-decoration: none; font-weight: 600;
}
.liste-vehicules.retires a { color: var(--gris); font-weight: 400; }
.vehicules .bandeau { margin-bottom: 16px; }
.vehicules .bandeau p { margin: 0; }

.total { font-size: 1.15rem; font-weight: 600; }
.historique { list-style: none; margin: 0; padding: 0; }
.historique li { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 10px 14px;
                 margin-bottom: 8px; }
.historique p { margin: 0; }
.historique .ligne-1 { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.historique .montant { white-space: nowrap; }
.historique .ligne-2 { color: var(--gris); font-size: 0.9rem; margin-top: 2px; }

/* Les tickets de carte de Rebecca (PRD 14, ticket 14a) */
.tickets { max-width: 1100px; }
.tickets .bandeau { margin-bottom: 20px; }
.tickets .bandeau h2 { font-size: 1.05rem; margin: 0 0 8px; }
.tickets a { color: var(--accent); }
.tickets td.jour { white-space: nowrap; }
.tickets .a-verifier { color: var(--alerte); }
.tickets .aide { margin-top: 16px; }
.tickets .gestes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tickets .gestes button {
  font: inherit; font-size: 0.9rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--carte); color: var(--accent); cursor: pointer;
}
.tickets .gestes button[value="entreprise"] { background: var(--accent); color: #fff; }

/* « Photographier » à la chaîne (ticket 14b) : les tickets envoyés aujourd'hui, sous le bouton */
.pieces .envoyes { margin-top: 24px; }
.pieces .envoyes h2 { font-size: 1rem; color: var(--gris); margin: 0 0 8px; }
.pieces .envoyes ul { list-style: none; margin: 0; padding: 0; }
.pieces .envoyes li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--trait);
}
.pieces .envoyes form { margin: 0; flex: none; }
.pieces .envoyes button {
  font: inherit; font-size: 0.9rem; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--alerte);
  background: var(--carte); color: var(--alerte); cursor: pointer;
}
.pieces .envoyes .ticket-retire span { color: var(--gris); text-decoration: line-through; }

/* Ce que coûte un véhicule (ticket 12d) : deux graphiques SVG, leur légende et leurs chiffres en texte */
.couts .graphique { display: block; width: 100%; height: auto; margin: 4px 0 8px; }
.couts .legende { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.9rem; }
.couts .legende li { display: flex; align-items: center; gap: 6px; }
.couts .pastille { width: 12px; height: 12px; flex: none; }
.couts .chiffres { margin: 0 0 12px; padding-left: 18px; color: var(--gris); font-size: 0.9rem; }

/* Les dépenses à vérifier de Rebecca (ticket 12b) */
.depenses { max-width: 900px; }
.depenses h2 { font-size: 1.05rem; margin: 24px 0 8px; }
.depenses a { color: var(--accent); }
.fiche-depense { display: flex; gap: 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.fiche-depense .contenu { flex: 1; min-width: 0; }
.fiche-depense p { margin: 0 0 6px; }
.fiche-depense .ligne-1 { font-weight: 600; }
.fiche-depense .ligne-2 { color: var(--gris); font-size: 0.9rem; }
.vignette { flex: none; width: 96px; height: 96px; border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--fond); color: var(--gris); text-decoration: none; }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.etiquette { font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; background: var(--ambre-clair); color: var(--encre); }
.etiquette.reprise { background: var(--accent-clair); color: var(--accent); margin-left: 6px; }
.depenses .gestes, .fiche-depense .gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.depenses .gestes form { margin: 0; }
.depenses .gestes button { font: inherit; font-size: 0.9rem; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.depenses .gestes button.secondaire, .depenses .gestes button[value="deux"] { background: var(--carte); color: var(--accent); }
.correction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.correction .photos img { width: 100%; border: 1px solid var(--trait); border-radius: 8px; margin-bottom: 8px; }
@media (max-width: 700px) { .correction { grid-template-columns: 1fr; } }
.pieces .resultats { margin: 12px 0; padding-left: 18px; }
.pieces .ajouter-page { margin: 16px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pieces .ajouter-page input[type="file"] { display: block; margin-top: 6px; }
.pieces .ajouter-page .aide { flex-basis: 100%; margin: 0; }
/* Les échéances du carnet (ticket 12c) : « Fait » se touche au pouce, sur le téléphone d'Elena. */
.echeances .ligne-2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.echeances form.en-ligne { margin: 0; }
.echeances button { font: inherit; font-size: 0.95rem; min-height: 44px; padding: 8px 18px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.etiquette.depassee { background: var(--alerte-clair); color: var(--alerte); font-weight: 600; }

/* --- « Demain » (ticket 06b) : le téléphone d'Elena d'abord, d'après la maquette validée le 5 novembre 2026 --- */

.planning { background: var(--fond); }
.demain { max-width: 520px; margin: 0 auto; padding: 0 0 32px; }
.entete-demain { padding: 10px 16px 10px; }
.entete-demain .ligne { display: flex; align-items: center; justify-content: space-between; }
.entete-demain h1 { font-size: 1.9rem; }
.entete-demain p { margin: 2px 0 0; color: var(--gris); }
.entete-demain .lu { font-size: 0.85rem; }
.entete-demain .avertissement { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--alerte-clair); color: var(--alerte); font-size: 0.9rem; }
.demain .fleches { display: flex; gap: 8px; }
.demain .fleches a, .demain .fleches span {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--trait); background: var(--carte);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--accent); text-decoration: none;
}
.demain .fleches .eteinte { color: var(--trait); }
.demain .erreur { margin: 0 12px 10px; }
.demain h2 { margin: 0; font-size: 1rem; }
.demain summary { list-style: none; cursor: pointer; }
.demain summary::-webkit-details-marker { display: none; }
.demain .haut { display: grid; grid-template-columns: 60px 1fr; column-gap: 6px; align-items: baseline; font-size: 0.95rem; }
/* Sur le téléphone, le trajet passe sous le passager : les vrais noms du TMR sont longs. */
.demain .haut .trajet { grid-column: 2; }
.demain .haut + .haut { margin-top: 3px; }
.demain .haut b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.demain .haut b.appel { font-size: 0.78rem; }
.demain .haut s { color: var(--gris); font-weight: 400; }
.demain .trajet { color: var(--gris); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demain .retour { color: var(--gris); }
.demain .repere, .demain .moyen {
  display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid var(--trait); border-radius: 5px;
  font-size: 0.65rem; font-weight: 700; color: var(--gris); letter-spacing: 0.03em; vertical-align: 1px;
}
.demain .moyen { font-weight: 400; letter-spacing: 0; }
.demain .modifie { margin: 2px 0 0 66px; font-size: 0.8rem; color: #b45309; }
.demain .detail { margin: 8px 0 2px; padding: 8px 10px; border-radius: 8px; background: var(--fond); font-size: 0.85rem; }
.demain .detail p { margin: 2px 0; }
.demain .detail span { color: var(--gris); margin-right: 4px; }
.demain .detail .note { white-space: pre-line; }
.demain .detail .source { color: var(--gris); font-size: 0.75rem; }

.demain .alertes { margin: 0 12px 12px; padding: 8px 12px; border-radius: 12px; background: var(--alerte-clair); border: 1px solid #fca5a5; color: var(--alerte); }
.demain .alertes p { margin: 3px 0; font-size: 0.9rem; }

.demain .carnet { margin: 0 12px 12px; padding: 8px 12px; border-radius: 12px; background: var(--carte); border: 1px solid var(--trait); }
.demain .carnet h2 { font-size: 0.9rem; color: var(--gris); margin-bottom: 4px; }
.demain .ligne-carnet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 6px 0; border-top: 1px solid #eef0f3; font-size: 0.9rem; }
.demain .ligne-carnet:first-of-type { border-top: 0; }
.demain .ligne-carnet p { margin: 0; flex: 1 1 200px; }
.demain .ligne-carnet a { color: var(--encre); }
.demain .ligne-carnet.depassee p, .demain .ligne-carnet.depassee a { color: var(--alerte); font-weight: 600; }
.demain .ligne-carnet form { margin: 0; }
.demain .ligne-carnet button { min-height: 40px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; }
.demain .vehicules-a-toucher { display: flex; flex-wrap: wrap; gap: 6px; }
.demain .vehicules-a-toucher button { background: var(--carte); color: var(--encre); border-color: var(--trait); }

.demain .a-repartir { margin: 0 12px 12px; background: var(--ambre-clair); border: 1px solid #fcd34d; border-radius: 12px; }
.demain .a-repartir h2 { padding: 9px 12px; color: #b45309; display: flex; }
.demain .a-repartir h2 span { margin-left: auto; font-weight: 400; font-size: 0.85rem; }
.demain .a-repartir .course { padding: 8px 12px 10px; border-top: 1px solid #fcd34d; }
.demain .prenoms { display: flex; gap: 6px; margin-top: 8px; }
.demain .prenoms form { flex: 1; margin: 0; }
.demain .prenoms button {
  width: 100%; min-height: 44px; padding: 8px 0; border-radius: 999px; cursor: pointer;
  background: var(--carte); border: 1px solid var(--trait); color: var(--encre); font: inherit; font-size: 0.9rem; font-weight: 600;
}
.demain .prenoms button.attenue { color: #b8bec7; border-color: #e5e7eb; font-weight: 400; }
.demain form.envoi button { opacity: 0.5; }
.demain .tout-reparti { margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-clair); color: var(--accent); font-weight: 600; }

.demain .groupe { margin: 0 12px 10px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.demain .groupe h2 { padding: 8px 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--trait); }
.demain .groupe h2 .resume { margin-left: auto; font-weight: 400; color: var(--gris); font-size: 0.82rem; }
.demain .pastille { width: 12px; height: 12px; flex: none; }
.demain .groupe ul, .demain .annulees ul { list-style: none; margin: 0; padding: 0; }
.demain .groupe li { padding: 7px 12px; border-top: 1px solid #eef0f3; }
.demain .groupe li:first-child { border-top: 0; }
.demain .deplacer { margin: 8px 0 0; font-size: 0.82rem; color: var(--gris); }
.demain .retirer { margin: 8px 0 2px; }
.demain .retirer button { min-height: 40px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--alerte); background: var(--carte); color: var(--alerte); font: inherit; font-size: 0.85rem; }

.demain .annulees { margin: 16px 12px 0; }
.demain .annulees h2 { font-size: 0.9rem; color: var(--gris); margin-bottom: 4px; }
.demain .annulees li { padding: 6px 0; border-top: 1px solid var(--trait); color: var(--gris); }
.demain .annulees li .haut span:nth-child(2) { text-decoration: line-through; }
.demain .annulees form { margin: 4px 0 0 66px; }
.demain .annulees button { min-height: 36px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--accent); background: var(--carte); color: var(--accent); font: inherit; font-size: 0.85rem; }

/* Sur l'iPad, les blocs des chauffeurs se mettent en colonnes. */
@media (min-width: 760px) {
  .demain { max-width: 980px; }
  .demain .blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0; }
  .demain .a-repartir, .demain .alertes, .demain .carnet { max-width: 560px; }
  /* Dans « À répartir », assez large pour le trajet à droite ; les blocs, en colonnes, le gardent dessous. */
  .demain .a-repartir .haut { grid-template-columns: 60px 1fr auto; }
  .demain .a-repartir .haut .trajet { grid-column: auto; max-width: 240px; }
}

/* --- La page du chauffeur la veille (ticket 06c) --- */
.chauffeur h2 { font-size: 1.05rem; margin: 18px 0 8px; }
.chauffeur .a-completer .carte { border-left-color: #f59e0b; }
.chauffeur .titre-demain { margin-top: 24px; }
.carte .adresse span, .carte .infos span { color: var(--gris); margin-right: 4px; }
.carte .adresse { margin-bottom: 6px; }
.carte .itineraire { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; font-size: 0.85rem; white-space: nowrap; }
.carte .infos { margin: 0 0 6px; font-size: 0.95rem; }
.carte .infos a { color: var(--accent); }
.carte .note-source { white-space: pre-line; color: var(--encre); background: var(--fond); border-radius: 8px; padding: 6px 8px; }
.carte .marque { display: inline-block; margin: 0 0 6px; padding: 1px 8px; border-radius: 999px; background: var(--ambre-clair); color: #b45309; font-size: 0.8rem; font-weight: 600; }
.chauffeur .retires { margin-top: 20px; color: var(--gris); }
.chauffeur .retires p { margin: 4px 0; }

/* --- « Demain » : l'envoi de la veille (ticket 06c) --- */
.demain .envoi { margin: 16px 12px 0; padding: 12px; border-radius: 12px; background: var(--carte); border: 1px solid var(--trait); }
.demain .envoi p { margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: var(--ambre-clair); font-size: 0.9rem; }
.demain .envoi p.fait { background: var(--accent-clair); color: var(--accent); }
.demain .envoi p.info { background: var(--fond); color: var(--gris); }
.demain .envoi form { margin: 0; }
.demain .envoi button { width: 100%; min-height: 52px; padding: 14px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.demain .envoi .annuler { display: block; margin-top: 8px; text-align: center; color: var(--gris); }
.demain .attention { margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px; background: var(--ambre-clair); border: 1px solid #fcd34d; color: #92400e; font-weight: 600; }
.demain .aujourdhui { margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px; background: var(--alerte-clair); border: 1px solid #fca5a5; color: var(--alerte); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demain .aujourdhui p { margin: 0; font-weight: 600; }
.demain .aujourdhui button { min-height: 40px; padding: 6px 14px; border-radius: 8px; border: 0; background: var(--alerte); color: #fff; font: inherit; }
.demain .groupe h2 .prevenir { padding: 0 6px; border-radius: 999px; background: var(--alerte-clair); color: var(--alerte); font-size: 0.75rem; font-weight: 600; }
/* Le bouton reste sous le pouce d'Elena, comme sur la maquette. */
.demain .envoi { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08); }
.demain .jours-suivants { margin: 16px 12px 0; }