/* KiloGo — direction B « Billet de voyage », version soignée (choisie par le propriétaire).
   Haut sombre avec lueur de couleur, billets blancs, pastilles d'état, boutons en relief,
   étiquette de colis, barre d'onglets flottante en bas. Clients en bleu, GP en vert. Fort contraste.
   Couleurs (lot couleurs) : nuit, blanc et gris pour tout le reste ; bleu = clients ; vert = GP ;
   rouge = seulement ce qui détruit (Retirer, Supprimer) et les petits messages d'erreur. Pas de jaune, pas d'autre couleur. */

/* Police Inter, hébergée avec l'application (licence OFL, voir polices/). */
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("polices/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("polices/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("polices/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 800; font-display: swap; src: url("polices/outfit-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("polices/inter-latin-800-normal.woff2") format("woff2"); }

:root {
  --nuit: #0d1b2e;
  --encre: #0d1b2e;
  --gris: #46536a;            /* au moins 7:1 sur blanc (lisible au soleil) */
  --gris-clair: #66728a;
  --fond: #eef2f7;
  --surface: #ffffff;
  --trait: #d9e0ea;
  --texte-sur-nuit: #dfe6f0;

  --bleu: #2563eb;
  --bleu-clair: #e6eeff;
  --bleu-sur-nuit: #a9c8ff;
  --vert: #0f7a52;
  --vert-clair: #e3f5ec;
  --vert-sur-nuit: #6fe0a6;

  --accent: var(--vert);
  --accent-clair: var(--vert-clair);
  --accent-sur-nuit: var(--vert-sur-nuit);
  --lueur: rgba(15, 122, 82, 0.6);

  --alerte: #b42318;
  --alerte-fond: #fdecea;
  --info-fond: #f1f4f8;
  --neutre-fond: #e8ebf0;

  --ombre: 0 0 0 1px rgba(13, 27, 46, 0.07), 0 1px 2px rgba(13, 27, 46, 0.08), 0 8px 18px -8px rgba(13, 27, 46, 0.18);
  --police: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rayon: 26px;
  --rayon-bouton: 18px;
  --haut-bandeau: 64px;                 /* hauteur de l'en-tête */
  --bas-onglets: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 84px);   /* hauteur de la bande du bas */
  color-scheme: light;
}
body[data-espace="client"] {
  --accent: var(--bleu); --accent-clair: var(--bleu-clair); --accent-sur-nuit: var(--bleu-sur-nuit);
  --lueur: rgba(37, 99, 235, 0.55);
}

/* Espace admin (paiements à vérifier) : nuit, séparé des couleurs clients et GP. */
body[data-espace="admin"] {
  --accent: var(--nuit); --accent-clair: var(--info-fond); --accent-sur-nuit: var(--texte-sur-nuit);
  --lueur: rgba(13, 27, 46, 0);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 17px; height: 100%; overscroll-behavior: none; }
/* L'écran en 3 zones, comme une application : en-tête (fixe), contenu (seul à défiler), bande du bas (fixe).
   Le contenu s'arrête au bord de la bande : il ne passe jamais dessous. */
body {
  margin: 0; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; overscroll-behavior: none;
  background: var(--fond); color: var(--encre);
  font-family: var(--police); font-size: 17px; line-height: 1.5; font-weight: 500;
  text-rendering: optimizeLegibility; font-kerning: normal; font-synthesis: none;
}
h1, h2, h3 {
  font-family: var(--police); font-weight: 800; line-height: 1.12; margin: 0;
  padding-top: 0.1em;          /* accents des majuscules jamais coupés en haut */
  letter-spacing: -0.04em; text-wrap: balance; overflow-wrap: anywhere;
}
h1 { font-size: 28px; }
h2 { font-size: 20px; letter-spacing: -0.03em; }
h3 { font-size: 18px; letter-spacing: -0.02em; }
p, ul, ol, dl { margin: 0; }
a { color: var(--accent); font-weight: 700; }
:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; }
.bandeau-haut :focus-visible, .ciel :focus-visible { outline-color: #ffffff; }
.icone, .route-dessin { shape-rendering: geometricPrecision; }
.icone { fill: currentColor; flex: none; display: block; }

/* ---------- Haut sombre (logo + nom de l'espace) ---------- */
/* En haut, ne défile jamais : le logo reste entier et visible. */
.bandeau-haut {
  flex: none; position: relative; z-index: 25;
  background: var(--nuit); color: #ffffff;
  padding: env(safe-area-inset-top, 0px) max(22px, env(safe-area-inset-right, 0px)) 0 max(22px, env(safe-area-inset-left, 0px));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 14px -10px rgba(0, 0, 0, 0.6);
}
.bandeau-haut-interieur { max-width: 680px; margin: 0 auto; }
.ligne-logo { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--haut-bandeau); }
/* Logo « Le trajet KG » : monogramme + nom, le K en bleu, le G en vert (écriture Outfit, licence OFL). */
.logo { display: inline-flex; align-items: center; gap: 8px; color: #ffffff; text-decoration: none; }
.logo-marque { width: 54px; height: 38px; flex: none; display: block; }
.logo-nom { font-family: "Outfit", var(--police); font-weight: 800; font-size: 26px; letter-spacing: -0.05em; line-height: 1; color: #ffffff; }
.espace {
  font-size: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: var(--accent-sur-nuit);
}
.entete-nav { display: none; }

.defilement {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-padding: 16px 0 24px;   /* une case touchée reste entièrement visible */
}
/* Espace en bas de chaque page : la dernière ligne et le dernier bouton ont de l'air au-dessus de la bande. */
main { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding: 0 16px 32px; }

/* Le haut de chaque écran continue le bandeau sombre, avec une lueur de couleur. */
.ciel {
  position: relative; color: #ffffff;
  margin: 0 -16px 2px; padding: 8px 22px 34px;
  background:
    linear-gradient(180deg, var(--nuit) 0, rgba(13, 27, 46, 0) 72px),   /* raccord parfait avec l'en-tête */
    radial-gradient(90% 80% at 90% 0%, var(--lueur) 0%, transparent 62%),
    var(--nuit);
  border-radius: 0 0 30px 30px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Accueil : ni client ni GP, donc pas de lueur de couleur. */
.ciel:has(.route) { --lueur: rgba(255, 255, 255, 0.07); }
.ciel:has(.route) .sourcil { color: var(--texte-sur-nuit); }
.ciel h1 { color: #ffffff; }
.ciel p { color: var(--texte-sur-nuit); font-size: 17px; }
.ciel .sourcil { color: var(--accent-sur-nuit); }
.ciel + * { margin-top: -26px; position: relative; }
.sourcil { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; font-size: 16px; color: var(--accent); }
.retour-ciel { display: inline-flex; align-items: center; gap: 4px; color: #ffffff; text-decoration: none; font-weight: 700; min-height: 44px; align-self: flex-start; }

/* Illustration du trajet (accueil) */
.route { position: relative; margin-top: 6px; padding-bottom: 46px; }
.route-dessin { width: 100%; height: auto; display: block; overflow: visible; }
.route-arc { fill: none; stroke: rgba(255, 255, 255, 0.72); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.route-halo { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; }
.route-depart { fill: #ffffff; }
.route-arrivee { fill: var(--vert-sur-nuit); }   /* arrivée Sénégal : vert */
.route-avion { fill: #ffffff; }
.route .pays { position: absolute; bottom: 0; font-weight: 800; font-size: 17px; }
.route .pays small { display: block; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: #c6d1e1; font-weight: 700; }
.route .gauche { left: 0; } .route .droite { right: 0; text-align: right; }

/* ---------- Cartes ---------- */
.carte {
  background: var(--surface); border-radius: var(--rayon); padding: 20px 18px;
  box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.carte p { color: var(--gris); }
.carte strong, .carte .fort { color: var(--encre); }
.doux { color: var(--gris); }
.petit { font-size: 16px; }
.gros-chiffre { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: var(--encre); font-variant-numeric: tabular-nums; }
.carte .gros-chiffre { color: var(--encre); }

/* Tuiles de l'accueil */
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tuile {
  background: var(--surface); border-radius: var(--rayon); padding: 18px 16px; box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--encre); min-width: 0;
}
.tuile .pictogramme { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #ffffff; }
.tuile-client .pictogramme { background: linear-gradient(160deg, color-mix(in srgb, var(--bleu) 82%, #ffffff), var(--bleu)); }
.tuile-gp .pictogramme { background: linear-gradient(160deg, color-mix(in srgb, var(--vert) 82%, #ffffff), var(--vert)); }
.tuile b { font-size: 19px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; }
.tuile span { font-size: 17px; color: var(--gris); font-weight: 600; }
.tuile .suite { margin-top: auto; font-weight: 800; }
.tuile-client .suite { color: var(--bleu); } .tuile-gp .suite { color: var(--vert); }
.carte-aide { flex-direction: row; align-items: center; gap: 14px; text-decoration: none; color: var(--encre); }
.carte-aide .pictogramme { width: 48px; height: 48px; border-radius: 14px; background: var(--nuit); color: #ffffff; display: grid; place-items: center; font-weight: 800; font-size: 22px; flex: none; }
.carte-aide b { display: block; font-size: 18px; font-weight: 800; }
.carte-aide span span { display: block; color: var(--gris); font-weight: 600; }
.pile { display: flex; flex-direction: column; gap: 16px; }
.code-ciel { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.03em; color: #ffffff; white-space: nowrap; }

/* ---------- Billets (voyages et annonces) ---------- */
.billet { background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.billet-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px 0; flex-wrap: wrap; }
.etiq { font-size: 16px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gris); font-variant-numeric: tabular-nums; }
.trajet { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: center; gap: 4px; padding: 10px 18px 16px; }
.trajet .ville { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; color: var(--encre); overflow-wrap: anywhere; }
.trajet small { display: block; font-size: 16px; font-weight: 700; color: var(--gris); margin-top: 4px; }
.trajet .fin { text-align: right; }
.trajet .milieu { position: relative; height: 36px; display: grid; place-items: center; }
.trajet .milieu::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted #a9b5c6; }
.trajet .milieu span {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #ffffff;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.perfo { position: relative; height: 22px; flex: none; }
.perfo::before { content: ""; position: absolute; left: 18px; right: 18px; top: 50%; border-top: 2px dashed #c3ccd9; }
.perfo::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 0 50%, var(--fond) 11px, transparent 11.5px),
  radial-gradient(circle at 100% 50%, var(--fond) 11px, transparent 11.5px); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 18px 14px; }
.cases small { display: block; font-size: 16px; font-weight: 800; color: var(--gris); letter-spacing: 0.06em; text-transform: uppercase; }
.cases .prix-case { display: block; }
.cases b { overflow-wrap: anywhere; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--encre); font-variant-numeric: tabular-nums; }
.billet-corps { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.billet-corps p { color: var(--gris); }
.prix-gros { color: var(--encre); }
.prix-gros b { font-size: 22px; font-weight: 800; letter-spacing: -0.045em; }
.prix-gros span { color: var(--gris); font-weight: 700; }
.ligne-info { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; color: var(--encre); }
.ligne-info .icone { color: var(--accent); margin-top: 2px; }
.jauge { height: 10px; border-radius: 99px; background: #edf1f6; overflow: hidden; margin: 0 18px 14px; }
.jauge span { display: block; height: 100%; border-radius: 99px; background: var(--vert); }
.charge-texte { color: var(--gris); font-weight: 600; padding: 0 18px 14px; margin-top: -6px; }

/* ---------- Pastilles d'état ---------- */
.etat, .pastille {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 99px;
  font-size: 16px; font-weight: 800; white-space: nowrap;
}
.etat::before, .pastille::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.pastille-publie { color: var(--vert); background: var(--vert-clair); }
.pastille-brouillon { color: var(--gris); background: var(--surface); box-shadow: inset 0 0 0 1.5px #bcc7d5; }
.pastille-termine { color: #454c58; background: var(--neutre-fond); }
.pastille-passe { color: #ffffff; background: var(--gris); }
.pastille-dispo { color: var(--bleu); background: var(--bleu-clair); }
.puce { display: inline-flex; padding: 5px 12px; border-radius: 99px; background: var(--surface-douce, #eef2f7); font-weight: 800; font-size: 16px; color: var(--encre); }

/* ---------- Boutons en relief ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 14px 22px; width: 100%;
  border-radius: var(--rayon-bouton); border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #ffffff), var(--accent));
  color: #ffffff; font-family: var(--police); font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: 0.55; cursor: not-allowed; }
.bouton-second { background: var(--surface); color: var(--encre); box-shadow: inset 0 0 0 1.5px #bcc7d5; }
.bouton-alerte { background: linear-gradient(180deg, #d0392b, var(--alerte)); box-shadow: 0 6px 14px -8px rgba(180, 35, 24, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.14); }
.bouton-lien {
  min-height: 48px; padding: 8px 4px; width: auto; background: transparent; box-shadow: none;
  color: var(--accent); font-size: 17px; text-decoration: underline; text-underline-offset: 3px;
}
.bouton-lien-alerte { color: var(--alerte); }
.retour { align-self: flex-start; }
.actions { display: grid; gap: 10px; }
/* Étape « Arrivé » / « Remis » pas encore permise : bouton grisé et date à laquelle elle le sera. */
.etape-bloquee { display: grid; gap: 6px; }
.etape-bloquee p { margin: 0; }
.barre-action { display: flex; flex-direction: column; gap: 10px; }

/* Choix sur fond sombre (sens du voyage, ouverts / archivés) */
.bascule, .segment { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); }
.bascule .bouton, .segment a {
  min-height: 50px; padding: 10px 6px; font-size: 17px; white-space: nowrap; border-radius: 14px;
  background: transparent; color: var(--texte-sur-nuit); box-shadow: none; text-decoration: none; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.bascule .bouton[aria-pressed="true"], .segment a[aria-current="page"] { background: #ffffff; color: var(--accent); }
.segment a[aria-current="page"] { color: var(--nuit); }
form .bascule { background: #e9eef4; }
form .bascule .bouton { color: var(--gris); }
form .bascule .bouton[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 2px 6px rgba(13, 27, 46, 0.1); }

/* ---------- Formulaires ---------- */
form { display: flex; flex-direction: column; gap: 20px; }
.champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.champ label, .champ legend { font-weight: 800; font-size: 17px; color: var(--encre); }
.champ .aide { color: var(--gris); font-size: 16px; }
input, select, textarea {
  font: inherit; font-size: 18px; font-weight: 600; color: var(--encre);
  width: 100%; min-height: 58px; padding: 12px 16px;
  background: #f7f9fc; border: 1.5px solid #bcc7d5; border-radius: 16px;
}
textarea { min-height: 104px; resize: vertical; font-weight: 500; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: #ffffff; box-shadow: 0 0 0 4px var(--accent-clair); outline: none; }
input::placeholder, textarea::placeholder { color: #6b778b; font-weight: 500; opacity: 1; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deux > * { min-width: 0; }
@media (max-width: 360px) { .deux { grid-template-columns: 1fr; } }
input[type="date"], input[type="time"] { display: block; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }

.champ-ville { position: relative; }
.suggestions {
  list-style: none; margin: 4px 0 0; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1.5px solid var(--accent); border-radius: 16px; box-shadow: var(--ombre);
  max-height: 264px; overflow-y: auto;
}
.suggestion {
  width: 100%; min-height: 50px; padding: 10px 14px; text-align: left;
  font: inherit; font-weight: 700; color: var(--encre); background: #f3f6fa; border: 0; border-radius: 12px; cursor: pointer;
}
.suggestion:hover, .suggestion:focus-visible { background: var(--accent-clair); }
.telephone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.telephone select { width: auto; padding-inline: 14px; }
.telephone input { min-width: 0; }
.calcul {
  font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre);
  background: var(--accent-clair); border-radius: 16px; padding: 16px 18px;
}

/* ---------- Étiquette de colis ---------- */
.etiquette { background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column; }
.etiquette-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; background: linear-gradient(180deg, var(--vert-clair), #ffffff); }
.etiquette-haut .client { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--encre); margin-top: 2px; }
.code-colis { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 24px; font-weight: 800; letter-spacing: 0.04em; color: var(--encre); }
.oeillet { width: 26px; height: 26px; border-radius: 50%; border: 5px solid #d3dbe6; background: var(--fond); flex: none; }
.frise { list-style: none; margin: 0; padding: 6px 18px 4px; display: grid; }
.etiquette-haut .pastille { margin-top: 8px; }
.pas { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; position: relative; padding-bottom: 10px; }
.pas::before { content: ""; position: absolute; left: 14px; top: 28px; bottom: 0; width: 2px; background: #dfe5ee; }
.pas:last-child::before { display: none; }
.pas.fait::before { background: var(--vert); }
.pas .point { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #cfd7e3; background: #ffffff; color: #ffffff; }
.pas.fait .point { background: var(--vert); border-color: var(--vert); }
.pas.prochain .point { border-color: var(--vert); box-shadow: 0 0 0 5px var(--vert-clair); }
.pas b { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; padding-top: 4px; color: var(--encre); }
.pas small { display: block; color: var(--gris); font-weight: 600; font-size: 16px; }
.pas.a-venir b { color: var(--gris-clair); }
.lignes { margin: 2px 18px 0; border-top: 1px solid var(--trait); }
.lignes div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.lignes dt { color: var(--gris); font-weight: 600; }
.lignes dd { margin: 0; text-align: right; font-weight: 800; color: var(--encre); overflow-wrap: anywhere; min-width: 0; }
.montant { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px 4px; }
.montant span { color: var(--gris); font-weight: 700; } .montant span small { display: block; font-weight: 600; font-size: 16px; }
.montant b { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; color: var(--encre); text-align: right; }
.montant b small { font-size: 16px; letter-spacing: 0; color: var(--gris); }
.etiquette .actions { padding: 10px 18px 16px; }
.liens-colis { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ---------- Divers ---------- */
.code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.03em;
  font-size: 17px; color: var(--encre); background: #eef2f7; border-radius: 8px; padding: 3px 10px; white-space: nowrap;
}
.infos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.infos dt { color: var(--gris); font-weight: 600; }
.infos dd { margin: 0; font-weight: 700; color: var(--encre); min-width: 0; overflow-wrap: anywhere; }
.bandeau { border-radius: 16px; padding: 14px 16px; font-weight: 700; }
/* Information et avertissement : nuit et gris (le rouge est gardé pour ce qui détruit). */
.bandeau-info, .carte p.bandeau-info, .billet-corps p.bandeau-info { background: var(--info-fond); color: var(--encre); }
.bandeau-alerte, .carte p.bandeau-alerte, .billet-corps p.bandeau-alerte { background: var(--neutre-fond); color: var(--encre); }
.bandeau-ok, .carte p.bandeau-ok, .billet-corps p.bandeau-ok { background: var(--accent-clair); color: var(--accent); }
.confirmer { border: 2px solid #bcc7d5; background: var(--surface); box-shadow: none; }
.confirmer-detruit { border-color: var(--alerte); background: var(--alerte-fond); }
.confirmer p { color: var(--encre); }
/* États du colis (espace GP) : gris au début, puis vert. */
.etat-colis_recu { color: var(--gris); background: var(--neutre-fond); }
.etat-arrive_destination { color: var(--vert); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--vert); }
.etat-remis_destinataire { color: var(--vert); background: var(--vert-clair); }
.etapes { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; color: var(--encre); }
.etapes li::before {
  counter-increment: etape; content: counter(etape); display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #ffffff; font-weight: 800;
}
.liste-savoir { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; color: var(--encre); }

/* ---------- Onglets : bande fixe collée en bas de l'écran ---------- */
/* Le socle couvre tout le bas : rien ne défile dessous ni à côté des onglets. */
.bas-ecran {
  flex: none; position: relative; z-index: 20;
  padding: 8px max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  background: var(--fond); box-shadow: 0 -1px 0 rgba(13, 27, 46, 0.08);
}
.onglets {
  margin-inline: auto; max-width: 648px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; border-radius: 26px;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  box-shadow: 0 0 0 1px rgba(13, 27, 46, 0.08), 0 10px 22px -10px rgba(13, 27, 46, 0.35);
}
.onglet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; border-radius: 18px; color: var(--gris); text-decoration: none; font-size: 16px; font-weight: 800;
}
.onglet[aria-current="page"] { background: var(--nuit); color: #ffffff; }

.message {
  position: fixed; left: 16px; right: 16px; margin-inline: auto; max-width: 640px; z-index: 30;
  /* En haut, sous le logo : le message ne cache jamais un bouton (ex. « Publier ce voyage » juste après l'enregistrement). */
  top: calc(var(--haut-bandeau) + env(safe-area-inset-top, 0px) + 8px);
  padding: 14px 18px; border-radius: 16px; background: #1a2b45; color: #ffffff; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 22px -8px rgba(0, 0, 0, 0.55);
}
/* Petit message d'erreur (en haut) : rouge, pour qu'on le voie tout de suite (demandé par le propriétaire).
   Seule exception au rouge en dehors de Retirer / Supprimer ; les bandeaux restent gris. */
.message-erreur { background: var(--alerte); }

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

/* ---------- Finitions : netteté et confort au toucher, partout ---------- */
html { -webkit-tap-highlight-color: transparent; }   /* pas de voile gris flou quand on appuie */
a, button, select, input, textarea { touch-action: manipulation; }
input, select, textarea { caret-color: var(--accent); }
.bouton { transition: transform 0.08s ease, filter 0.08s ease; }
.bouton:active { filter: brightness(0.95); }
.bouton-second:active { background: #eef2f7; }

/* Écran sans haut sombre (erreur, chargement) : un peu d'air sous le bandeau. */
#ecran > :first-child:not(.ciel) { margin-top: 16px; }
main > h2 { margin-top: 8px; }
.actions > div:empty { display: none; }

/* Informations du voyage : lignes séparées, comme sur l'étiquette du colis. */
.infos { gap: 0 16px; border-top: 1px solid var(--trait); }
.infos dt, .infos dd { padding: 10px 0; border-bottom: 1px solid var(--trait); }

/* Numéro de téléphone entier, sur sa propre ligne. */
.tel { display: block; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gris); }

/* Corriger / Supprimer un colis : deux boutons doux côte à côte, faciles à toucher. */
.liens-colis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bouton-doux {
  min-height: 52px; padding: 10px 8px; font-size: 17px; line-height: 1.2;
  background: #f1f4f8; color: var(--encre); box-shadow: inset 0 0 0 1px #d3dbe6;
}
.bouton-doux:active { background: #e6ebf2; }
.bouton-doux-alerte { color: var(--alerte); background: #fdf1f0; box-shadow: inset 0 0 0 1px #f2c7c2; }
.bouton-doux-alerte:active { background: #fbe3e0; }

/* Billets : la date et le prix restent d'un seul bloc (pas de mot seul sur une ligne). */
.trajet { grid-template-columns: minmax(0, auto) minmax(36px, 1fr) minmax(0, auto); gap: 8px; }
.trajet small { white-space: nowrap; }
.cases { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 22px; }
.cases > div:last-child { text-align: right; }
.prix-case { white-space: nowrap; }
.ciel + * + p.doux a, p.doux a { white-space: nowrap; }

/* Bandeaux et confirmation : bords fins et nets. */
.bandeau.bandeau-info { box-shadow: inset 0 0 0 1px #d3dbe6; }
.bandeau.bandeau-alerte { box-shadow: inset 0 0 0 1.5px #a9b5c6; }
.bandeau.bandeau-ok { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.confirmer { border-width: 1.5px; }
legend { padding: 0; }

/* ---------- Carte d'annonce (ce que voit le client) : chaque information à sa place ---------- */
.annonce-prix { margin: 2px 18px 0; padding: 10px 14px; border-radius: 18px; background: var(--accent-clair); display: grid; gap: 2px; }
.annonce-prix .prix-gros span { color: var(--gris); }
.annonce-infos { list-style: none; margin: 8px 18px 0; padding: 0; }
.annonce-infos li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); font-weight: 700; color: var(--encre); }
.annonce-infos li:last-child { border-bottom: 0; }
.annonce-infos li.note { font-weight: 600; color: var(--gris); }
.puce-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: #f1f4f8; color: var(--accent); box-shadow: inset 0 0 0 1px #e1e7ef; }
.annonce-contact { margin: 6px 18px 0; padding: 12px 14px; border-radius: 18px; background: #f6f8fb; box-shadow: inset 0 0 0 1px var(--trait); display: flex; align-items: center; gap: 12px; }
.annonce-contact .puce-icone { background: #ffffff; }
.annonce-contact small { display: block; font-size: 16px; font-weight: 700; color: var(--gris); }
.annonce-contact strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.annonce-action { padding: 16px 18px 18px; }

/* Annonces : haut de page et carte plus compacts (mêmes informations, mêmes tailles de texte). */
.ciel.ciel-compact { padding-bottom: 24px; gap: 8px; }
.ciel.ciel-compact p { line-height: 1.4; }
.ciel.ciel-compact + * { margin-top: -16px; }
.carte-filtre { padding: 12px 16px 14px; gap: 6px; }
.carte-filtre .champ { gap: 6px; }
.carte-filtre input { min-height: 52px; }
.billet.annonce .billet-tete { padding-top: 12px; }
.billet.annonce .trajet { padding: 6px 18px 8px; }
.billet.annonce .trajet small { margin-top: 2px; }
.billet.annonce .perfo { height: 16px; }
.billet.annonce .annonce-prix { padding: 7px 14px; }
.billet.annonce .annonce-infos { margin-top: 4px; }
.billet.annonce .annonce-infos li { padding: 7px 0; gap: 10px; line-height: 1.35; }
.billet.annonce .puce-icone { width: 34px; height: 34px; border-radius: 10px; }
.billet.annonce .annonce-contact { margin-top: 4px; padding: 8px 12px; gap: 10px; }
.billet.annonce .annonce-action { padding: 10px 18px 14px; }
.billet.annonce .annonce-action .bouton { min-height: 54px; }
/* Encore plus compact (même contenu) : le contact est une ligne de la liste, espaces resserrés. */
.ciel.ciel-compact { padding-top: 4px; padding-bottom: 22px; gap: 6px; }
.ciel.ciel-compact .bascule .bouton { min-height: 46px; }
.carte-filtre { padding: 10px 14px 12px; gap: 4px; }
.carte-filtre .champ { gap: 4px; }
.carte-filtre input { min-height: 48px; padding-block: 8px; }
#liste-annonces { gap: 12px; }
#ecran:has(#liste-annonces) { gap: 12px; }
.billet.annonce .billet-tete { padding-top: 10px; }
.billet.annonce .trajet { padding: 4px 18px 4px; }
.billet.annonce .perfo { height: 12px; }
.billet.annonce .annonce-prix { padding: 5px 14px; }
.billet.annonce .annonce-infos { margin-top: 2px; }
.billet.annonce .annonce-infos li { padding: 6px 0; }
.billet.annonce li.annonce-contact {
  margin: 0; padding: 6px 0; border-radius: 0; background: none; box-shadow: none; border-bottom: 0;
  display: flex; align-items: center; gap: 10px;
}
.billet.annonce li.annonce-contact .puce-icone { background: #f1f4f8; }
.billet.annonce li.annonce-contact small { line-height: 1.2; }
.billet.annonce li.annonce-contact strong { line-height: 1.25; }
/* Numéros du GP sur l'annonce (1 à 3) : étiquette en gris devant, numéro à toucher pour appeler. */
.annonce-contact strong a { color: inherit; text-decoration: none; }
/* Numéros du GP dans le formulaire du voyage (même bloc que « Mes numéros »). */
.zone-numeros-voyage .titre-champ { margin: 0; font-weight: 800; }
.bloc-numeros .numero-gp-bloc {
  margin: 10px -6px; padding: 16px 12px; border: 1px solid var(--trait); box-shadow: none;
}
/* « Numéro 1 » est déjà le titre de la case : le titre du cadre reste seulement pour les lecteurs d'écran. */
.bloc-numeros .numero-gp-bloc legend {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.annonce-contact .etiquette-numero { font-size: 16px; font-weight: 700; color: var(--gris); }
/* Numéros du GP : un par ligne, séparés par une fine ligne grise ; « WhatsApp » en petite étiquette
   (bleu côté clients sur l'annonce, vert côté GP sur la page du voyage). */
.lignes-numeros { display: block; min-width: 0; }
.ligne-numero { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; padding: 6px 0; }
.ligne-numero + .ligne-numero { border-top: 1px solid var(--trait); }
.ligne-numero:first-child { padding-top: 2px; }
.ligne-numero:last-child { padding-bottom: 0; }
.numero-et-etiquette { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; min-width: 0; }
.ligne-numero .numero { white-space: nowrap; font-variant-numeric: tabular-nums; }
.annonce-contact .ligne-numero .numero { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--encre); text-decoration: none; }
.pastille-whatsapp { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 16px; font-weight: 700; line-height: 1.3;
  color: var(--bleu); background: var(--bleu-clair); white-space: nowrap; }
.infos .pastille-whatsapp { color: var(--vert); background: var(--vert-clair); }
.infos .ligne-numero .etiquette-numero { color: var(--gris); }
.billet.annonce .annonce-action { padding: 6px 18px 14px; }
.billet.annonce .annonce-action .bouton { min-height: 52px; padding-block: 10px; }

/* Filtre des annonces : le titre « Ville (facultatif) » est écrit dans la case (toujours lu par les lecteurs d'écran). */
.carte-filtre label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.carte-filtre { padding: 10px 12px; }
.ciel.ciel-compact { padding-bottom: 20px; }
.billet.annonce .billet-tete { padding-top: 8px; }
.billet.annonce .perfo { height: 10px; }

/* Brouillon : statut et « Publier ce voyage » juste sous le trajet. */
.etat-haut { padding-bottom: 14px; }

/* Finitions générales */
.etiq { font-variant-numeric: tabular-nums; }
.onglet { transition: background-color 0.12s ease, color 0.12s ease; }
.onglet:not([aria-current="page"]):active { background: #eef2f7; }
.tuile:active, .carte-aide:active { transform: translateY(1px); }

/* ---------- « Comment ça marche ? » : clients en bleu, GP en vert, étapes qui défilent ---------- */
.comment { gap: 12px; padding: 18px 0 18px; overflow: hidden; }
.piste {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; outline: none;
}
.piste::-webkit-scrollbar { display: none; }
.diapo {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 4px 22px 6px;
}
.diapo h2 { font-size: 22px; color: var(--encre); }
.diapo-compteur { font-size: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.diapo-phrase { color: var(--gris); font-size: 18px; max-width: 30ch; }
.scene { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-bottom: 6px; }
.scene-rond {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0, var(--accent-clair) 62%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.scene-icone {
  position: relative; width: 92px; height: 92px; border-radius: 28px; display: grid; place-items: center; color: #ffffff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 72%, #ffffff), var(--accent));
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--accent) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.scene-numero {
  position: absolute; top: 8px; right: 6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nuit); color: #ffffff; font-weight: 800; font-size: 17px; box-shadow: 0 0 0 4px #ffffff;
}
/* Animation douce et lente : l'étape qui arrive monte un peu et apparaît ; l'icône flotte doucement. */
.diapo.actif .scene-icone { animation: flotter 4.5s ease-in-out infinite; }
.diapo.actif .scene-rond { animation: respirer 4.5s ease-in-out infinite; }
.diapo.actif h2, .diapo.actif .diapo-phrase, .diapo.actif .diapo-compteur { animation: apparaitre 0.9s ease-out both; }
.diapo.actif .diapo-phrase { animation-delay: 0.15s; }
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes respirer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.points { display: flex; justify-content: center; gap: 8px; }
.points span { width: 9px; height: 9px; border-radius: 99px; background: #c9d2de; transition: width 0.4s ease, background-color 0.4s ease; }
.points span.actif { width: 28px; background: var(--accent); }
.commandes-comment { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 4px 18px 0; }
.commandes-comment .bouton[disabled] { opacity: 0.45; }
.fin-comment { display: grid; gap: 10px; padding: 4px 18px 0; }
.comment-clients .bouton-autre { background: linear-gradient(180deg, color-mix(in srgb, var(--vert) 82%, #ffffff), var(--vert)); }
.comment-gp .bouton-autre { background: linear-gradient(180deg, color-mix(in srgb, var(--bleu) 82%, #ffffff), var(--bleu)); }
.confidentialite { font-size: 18px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .diapo.actif .scene-icone, .diapo.actif .scene-rond, .diapo.actif h2, .diapo.actif .diapo-phrase, .diapo.actif .diapo-compteur { animation: none; }
  .points span { transition: none; }
}

/* WhatsApp (facultatif) : case à cocher bien visible ; sur l'annonce, deux boutons côte à côte. */
input[type="checkbox"] { width: 28px; height: 28px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--accent); }
.case { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 16px;
  background: #f7f9fc; box-shadow: inset 0 0 0 1.5px #bcc7d5; cursor: pointer; }
.case:has(input:checked) { background: var(--accent-clair); box-shadow: inset 0 0 0 1.5px var(--accent); }
.bloc-whatsapp { gap: 10px; }
.annonce-action.deux-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.annonce-action.deux-boutons .bouton { padding-inline: 8px; gap: 6px; font-size: 17px; white-space: nowrap; }
/* WhatsApp : action du client, donc bleu (version douce à côté de « Appeler le GP »). */
.bouton-whatsapp { background: var(--bleu-clair); color: var(--bleu); box-shadow: inset 0 0 0 1.5px var(--bleu); }

/* Voyage publié : « Modifier le voyage » puis « Retirer l'annonce », côte à côte, entiers. */
.deux-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deux-actions .bouton { min-height: 56px; padding: 8px 10px; font-size: 17px; line-height: 1.2; white-space: normal; }

/* Rappel « écran d'accueil » dans l'Espace GP : une ligne, discret mais visible. */
.rappel-accueil {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; text-decoration: none;
  background: var(--accent-clair); color: var(--encre); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.rappel-accueil .pictogramme { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent); color: #ffffff; }
.rappel-accueil b { display: block; font-weight: 800; }
.rappel-accueil span span { display: block; color: var(--accent); font-weight: 700; }
.ecran-accueil h3 { margin-top: 4px; }
/* Vidéo de l'aide « écran d'accueil » : format vertical, jamais plus haute que l'écran. */
.video-aide { display: block; width: auto; max-width: 100%; height: min(62vh, 560px); aspect-ratio: 9 / 16; margin: 16px auto 4px;
  border-radius: 16px; background: var(--nuit); }

/* Annonce : quand déposer ; le lieu de dépôt et de retrait a sa propre ligne. */
.depot-quand { display: block; }

/* Un élément caché reste caché, même avec une classe qui l'affiche. */
[hidden] { display: none !important; }

.billet-corps .prix-gros, .billet-corps .ligne-info { color: var(--encre); }
form .bascule .bouton { white-space: normal; padding-inline: 4px; font-size: 16px; line-height: 1.2; }
.telephone { gap: 8px; }
.telephone select { padding-inline: 10px; }
.telephone input { padding-inline: 12px; }

/* Nous contacter et signalements (privés) : choix à cocher bien visibles, lien discret en gris. */
input[type="radio"] { width: 26px; height: 26px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--accent); }
.case:has(input[type="radio"]:checked) { background: var(--accent-clair); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lien-signaler {
  display: flex; align-items: center; width: fit-content; margin-left: auto; justify-self: end; min-height: 44px; padding: 0 4px;
  color: var(--gris); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.billet.annonce .lien-signaler { margin: -12px 14px 6px auto; }

/* Finances du GP (privées) : trois chiffres simples, payé et reste sur chaque colis, alerte rouge, reçu. */
.trois-chiffres { margin: 4px 0 0; }
.lignes .reste dt, .lignes .reste dd { color: var(--encre); font-weight: 800; }
.trois-chiffres dd { font-variant-numeric: tabular-nums; }
.prive-colis { margin: 12px 18px 0; color: var(--gris); font-size: 16px; font-weight: 600; }
.argent-colis dd small { display: inline; font-size: 16px; color: var(--gris); font-weight: 600; }
.liste-restes { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-weight: 700; }
.pile-texte { display: grid; gap: 8px; }
.alerte-restes {
  background: var(--alerte-fond); border: 2px solid var(--alerte); border-radius: var(--rayon-bouton);
  padding: 14px 16px; display: grid; gap: 10px;
}
.alerte-restes h2 { color: var(--alerte); font-size: 19px; }
.alerte-restes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alerte-restes li { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid #f2c7c2; }
.alerte-restes li:first-child { padding-top: 0; border-top: 0; }
.reste-ligne { display: grid; gap: 2px; color: var(--encre); }
.reste-ligne strong { color: var(--alerte); font-weight: 800; }
.recu dd small { display: block; color: var(--gris); font-weight: 600; font-size: 16px; text-align: right; }
.recu h2 { font-size: 19px; overflow-wrap: anywhere; }
/* Reçu : chaque ligne en deux temps (titre, puis valeur), lisible sur téléphone. */
.recu .lignes div { display: grid; gap: 2px; justify-content: stretch; }
.recu .lignes dd { text-align: left; }
.recu dd small { text-align: left; }

/* « Vos colis » : une ligne par colis, pour aller directement à sa carte. */
.vos-colis { display: grid; gap: 10px; }
.vos-colis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ligne-colis {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 0; border-radius: 14px; background: #f6f8fb; box-shadow: inset 0 0 0 1px var(--trait);
  font: inherit; color: var(--encre); text-align: left; cursor: pointer;
}
.ligne-colis:active { background: #eef2f7; }
.ligne-colis-qui { display: grid; gap: 2px; min-width: 0; }
.ligne-colis-qui b { overflow-wrap: anywhere; }
.code-kg { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: 16px; color: var(--gris); }
.ligne-colis .pastille { flex: none; }
.etiquette { scroll-margin-top: 12px; }
.etiquette:focus { outline: none; }

/* Sous chaque carte de colis : petit lien gris pour remonter à « Vos colis ». */
.lien-retour-colis {
  justify-self: end; margin-top: -8px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--gris); text-decoration: underline; text-underline-offset: 3px;
}
.vos-colis { scroll-margin-top: 12px; }
.vos-colis:focus { outline: none; }

/* Numéro du GP sur le colis (privé) : gris et nuit, comme le reste de l'étiquette. */
.numero-gp { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--gris); }
.numero-gp b { color: var(--encre); font-weight: 800; }
.numero-gp-ligne, .numero-gp b { white-space: nowrap; }
.numero-gp-ligne { font-size: 16px; font-weight: 700; color: var(--gris); }

/* Essai gratuit et paiement Interac (GP seul) : nuit, blanc, gris et vert GP seulement. */
.formule-voyage { margin: 0; font-size: 16px; font-weight: 700; color: var(--gris); }
.paiement { display: grid; gap: 10px; box-shadow: inset 0 0 0 1.5px var(--trait); }
.paiement h3 { font-size: 19px; }
.paiement .case span { display: grid; gap: 2px; }
.paiement .case small { font-size: 16px; color: var(--gris); font-weight: 600; }
.paiement .case:has(input:disabled) { opacity: 0.6; }
.montant-interac { font-size: 18px; font-weight: 800; color: var(--encre); }
.adresse-interac { color: var(--gris); font-weight: 600; overflow-wrap: anywhere; }
.adresse-interac b { color: var(--encre); }

/* ---------- Admin : paiements à vérifier ---------- */
.demande-admin { display: grid; gap: 10px; }
.demande-admin h2 { margin: 0; font-size: 20px; }
.boutons-demande { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Paiement en attente : bouton facultatif « Prévenir KiloGo sur WhatsApp » sous le bandeau. */
.paiement-attente-bloc { display: grid; gap: 10px; }
.paiement-attente-bloc .doux { margin: 0; }

/* Mot de passe : bouton œil dans le champ (48 × 48 px, assez grand pour un doigt). */
.champ-mot-de-passe { position: relative; }
.champ-mot-de-passe input { padding-right: 64px; }
.champ-mot-de-passe input::-ms-reveal { display: none; }
.oeil {
  position: absolute; top: 0; bottom: 0; right: 5px; margin: auto 0;
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--gris); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.oeil .icone { fill: currentColor; }
.oeil[aria-pressed="true"] { color: var(--encre); }
.oeil:active { background: var(--neutre-fond); }
.oeil:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }

/* Choix de formule : un prix (« 8,99 $ CA ») n'est jamais coupé en fin de ligne. */
.paiement .case .prix-entier { display: inline; white-space: nowrap; }

/* Alerte corridor (sans compte) : bouton bleu (action du client) ; sur l'annonce, petit lien bleu sur la ligne de
   « Signaler ce GP » ; le formulaire s'ouvre juste en dessous, sur toute la largeur. */
.bouton-alerte-corridor { --accent: var(--bleu); }
.liens-annonce { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin: -12px 14px 6px; }
.billet.annonce .liens-annonce .lien-signaler { margin: 0 0 0 auto; }
.liens-annonce .alerte-corridor { display: contents; }
.liens-annonce .zone-alerte { flex-basis: 100%; order: 2; }
.lien-alerte {
  display: flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--bleu); font-family: var(--police); font-size: 16px; font-weight: 800; text-align: left;
  text-decoration: underline; text-underline-offset: 3px;
}
.alerte-corridor > .bouton { margin-top: 2px; }
.formulaire-alerte { --accent: var(--bleu); --accent-clair: var(--bleu-clair); margin-top: 10px; }
.formulaire-alerte h3 { font-size: 20px; color: var(--encre); }
.formulaire-alerte .case span { display: grid; gap: 2px; }
.formulaire-alerte .case small { font-size: 16px; font-weight: 600; color: var(--gris); }
.formulaire-alerte .bouton-client { --accent: var(--bleu); }

/* Partager un voyage publié (Mes voyages et page publique du voyage) : lien copié, lien écrit en entier, WhatsApp. */
.partage { display: grid; gap: 10px; }
.partage-details { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--info-fond); box-shadow: inset 0 0 0 1px var(--trait); }
.partage-details[hidden] { display: none; }
.partage-etat { margin: 0; font-weight: 700; color: var(--encre); }
.partage-etat:empty { display: none; }
.partage-lien { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--trait);
  background: var(--surface); color: var(--encre); font: 600 16px/1.3 var(--police); }
/* Page publique du voyage : « Partager » en bas de la carte d'annonce, avec les mêmes marges que ses boutons. */
.billet.annonce > .partage { padding: 0 18px 16px; }
/* Texte d'aide du partage (Mes voyages, 1re carte partageable) ; « Compris » le cache sur ce téléphone. */
.aide-partage { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--info-fond); box-shadow: inset 0 0 0 1px var(--trait); }
.aide-partage p { margin: 0; color: var(--encre); font-size: 16px; line-height: 1.45; }
.aide-partage .bouton-lien { justify-self: start; min-height: 44px; padding-inline: 0; }

/* Liens du bas : Conditions d'utilisation et Politique de confidentialité (pages publiques, aussi sur la vitrine). */
.liens-legaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 8px 2px 0; }
.liens-legaux a { color: var(--gris); font-size: 16px; text-decoration: underline; }

/* Fenêtre « Quitter sans enregistrer ? » : au milieu de l'écran, page assombrie derrière, au-dessus de l'en-tête et des onglets. */
.fenetre-fond {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(13, 27, 46, 0.55);
}
.fenetre {
  width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--rayon); padding: 24px 20px 20px;
  box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 10px;
}
.fenetre h2 { margin: 0; font-size: 22px; color: var(--encre); }
.fenetre p { margin: 0; font-size: 17px; color: var(--gris); }
.fenetre-boutons { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.fenetre-boutons .bouton { width: 100%; min-height: 52px; }

/* Écran admin, « Comptes GP » : carte pliée (courriel + statut), un toucher la déplie, un autre la replie. */
details.compte-admin > summary.compte-admin-tete {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
details.compte-admin > summary.compte-admin-tete::-webkit-details-marker { display: none; }
.compte-admin-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.compte-admin-texte h2 { margin: 0; overflow-wrap: anywhere; }
.compte-admin-statut { font-size: 16px; font-weight: 700; color: var(--gris); }
.compte-admin-fleche { flex: none; display: inline-flex; color: var(--gris); transition: transform 0.15s ease; }
details.compte-admin[open] .compte-admin-fleche { transform: rotate(180deg); }
details.compte-admin:not([open]) { gap: 0; }
@media (prefers-reduced-motion: reduce) { .compte-admin-fleche { transition: none; } }

/* « Mes voyages » : cartes pliables (code, état, trajet et date toujours visibles ; le reste se déplie au toucher). */
.billet-entete-pliable { cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: var(--rayon) var(--rayon) 0 0; }
.billet-entete-pliable:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.billet-tete-droite { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.fleche-pliable { display: inline-flex; color: var(--gris); transition: transform 0.15s ease; }
.billet-voyage.deplie .fleche-pliable { transform: rotate(180deg); }
.billet-pliable { display: flex; flex-direction: column; min-width: 0; }
.billet-pliable[hidden] { display: none; }
.billet-voyage:not(.deplie) .trajet { padding-bottom: 14px; }
.billet-a-faire { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .fleche-pliable { transition: none; } }

/* Écran admin : ligne d'alerte « X courriels non envoyés — Voir » et cartes de courriels pliées. */
.ligne-courriels-echec { width: 100%; text-align: left; font: inherit; font-weight: 700; cursor: pointer; min-height: 48px;
  border: 0; -webkit-tap-highlight-color: transparent; }
.ligne-courriels-action { text-decoration: underline; }
.liste-courriels-echec { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.liste-courriels-echec[hidden] { display: none; }
details.courriel-echec > summary.courriel-echec-tete {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
details.courriel-echec > summary.courriel-echec-tete::-webkit-details-marker { display: none; }
.courriel-echec-tete h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
details.courriel-echec[open] .compte-admin-fleche { transform: rotate(180deg); }
details.courriel-echec:not([open]) { gap: 0; }

/* Lot rangement : lignes pliables de l'écran admin (paiements, alertes, tous les voyages, ses voyages). */
details.ligne-admin > summary.ligne-admin-tete {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
details.ligne-admin > summary.ligne-admin-tete::-webkit-details-marker { display: none; }
.ligne-admin-info { font-size: 16px; font-weight: 600; color: var(--gris); overflow-wrap: anywhere; }
.ligne-admin-tete .pastille { flex: none; }
details.ligne-admin[open] .compte-admin-fleche { transform: rotate(180deg); }
details.ligne-admin:not([open]) { gap: 0; }

/* Cartes de colis pliables : nom du client, poids, montant et état toujours visibles ; le reste au toucher. */
.colis-tete { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 14px 18px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; border-radius: var(--rayon) var(--rayon) 0 0; }
.colis-tete:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.colis-tete-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.colis-tete-nom { font-size: 18px; font-weight: 800; color: var(--encre); overflow-wrap: anywhere; }
.colis-tete-chiffres { font-size: 16px; font-weight: 700; color: var(--gris); font-variant-numeric: tabular-nums; }
.colis-tete .pastille { flex: none; }
.colis-plie.deplie .colis-tete { border-bottom: 1px solid var(--trait); }
.colis-plie.deplie .fleche-pliable { transform: rotate(180deg); }
.colis-pliable { display: flex; flex-direction: column; min-width: 0; }
.colis-pliable[hidden] { display: none; }

/* Accueil : petite section discrète des prix (pour les GP), sous « Comment ça marche ? ». */
.prix-accueil { margin: 4px 4px 0; font-size: 16px; line-height: 1.5; color: var(--gris); text-align: center; }
.prix-accueil-montants { font-weight: 700; }
/* Sous la phrase des prix de l'accueil : ce que comprend chaque offre (gris, discret, une ligne par offre). */
.packs-accueil { list-style: none; margin: 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.45; color: var(--gris); }
.packs-accueil b { font-weight: 700; color: var(--gris); }