/* Étape 4 : ce qui part à la validation, et la feuille de route sur le téléphone du conducteur. */
.depart__grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 24px; align-items: start; }
.envois { list-style: none; margin: 0; padding: 6px 0; }
.envoi { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding: 12px 20px; }
.envoi::before {
  content: ''; grid-row: span 2; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--filet-fort);
}
.envoi--fait::before { content: '✓'; display: grid; place-items: center; border-color: var(--olive); background: var(--olive); color: #fff; font-size: 13px; font-weight: 700; }
.envoi strong { font-weight: 600; }
.envoi span { font-size: 13px; color: var(--encre-2); }

.depart__mobile { display: grid; gap: 16px; justify-items: center; }

/* Téléphone : cadre sapin foncé, écran clair */
.telephone { margin: 0; display: grid; gap: 8px; justify-items: center; }
.telephone__ecran {
  width: 320px; max-width: 100%; min-height: 560px; padding: 12px 16px 20px;
  background: var(--feuille); border: 10px solid #10291f; border-radius: 38px; box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: 10px;
}
.telephone figcaption { font-size: 13px; color: var(--encre-2); }
.telephone__barre { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--encre-2); padding: 0 6px; }
.telephone__tete { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--rayon); background: var(--sapin); color: #fff; font-size: 12.5px; }
.telephone__tete strong { font-size: 15px; font-weight: 600; }
.telephone__code { font: 400 34px/1 var(--titre); color: var(--anis); padding-top: 3px; }
.telephone__resume { font-size: 13px; font-weight: 500; color: var(--sapin); }
.arrets { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.arrets li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--filet); font-size: 12.5px; color: var(--encre-2); }
.arrets strong { display: block; font-weight: 600; color: var(--encre); font-size: 13px; }
.arrets__heure { font: 400 19px/1.1 var(--titre); color: var(--sapin); letter-spacing: 0.03em; }
.arrets__autres { display: block !important; text-align: center; font-style: italic; border-bottom: 0 !important; }
.arrets__ajout { background: var(--anis-voile); border-radius: var(--rayon-petit); border-bottom: 0 !important; box-shadow: inset 3px 0 0 var(--olive); }
.arrets__ajout em { display: block; font-style: normal; font-weight: 600; color: var(--ok); margin-top: 2px; }

.sms { width: 320px; max-width: 100%; display: grid; gap: 6px; }
.sms__qui { font-size: 12px; color: var(--encre-2); }
.sms__bulle { padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: #e6ebe7; font-size: 13.5px; }

@media (max-width: 960px) {
  .depart__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .envoi { padding: 12px 14px; }
  .telephone__ecran { min-height: 0; border-width: 8px; border-radius: 30px; }
}