/* PYRONOS — ITINÉRAIRE OPÉRATIONNEL (interface de guidage).
   Feuille SÉPARÉE de style.css : le module est autonome, et plusieurs agents
   travaillent en parallèle dans les fichiers partagés.

   Empilement du bas de carte : on réutilise SANS LES REDÉFINIR les variables
   --bas-securite (bandeau disclaimer) et --bas-commandes (rangée « ? Légende »)
   déclarées dans style.css, exactement comme .barre-flottante-bas. */

:root {
  --itin-vert: #22c55e;
  --itin-orange: #f5a524;
  --itin-rouge: #e5484d;
}

/* ---------- Bouton d'ouverture (barre d'actions terrain) ---------- */
#btn-itineraire {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--bord);
  background: #1d3324;
  color: #d7f7e2;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
#btn-itineraire:hover { filter: brightness(1.2); }
#btn-itineraire[hidden] { display: none !important; }

/* ---------- Panneaux plein écran (préparation, refus, étapes) ----------
   .page-plein est fourni par style.css ; on n'ajoute ici que le corps. */
.itin-corps {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
}
/* Un conteneur flex en colonne écrase ses enfants dès qu'il déborde : sans
   cette règle la liste des étapes se réduit à zéro pixel. */
.itin-corps > * { flex: 0 0 auto; }

.itin-bloc {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--bloc);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.itin-bloc h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-2);
}
.itin-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.itin-ligne > span.itin-valeur {
  flex: 1 1 160px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}
.itin-indice {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--texte-2);
}

.itin-btn {
  min-height: 46px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--bord);
  background: #2a2f39;
  color: var(--texte);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.itin-btn:hover { filter: brightness(1.18); }
.itin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.itin-btn.itin-principal {
  flex: 1 1 200px;
  background: var(--itin-vert);
  border-color: var(--itin-vert);
  color: #06240f;
  font-weight: 800;
  font-size: 15px;
  min-height: 52px;
}
.itin-btn.itin-mini { min-height: 40px; font-size: 13px; padding: 6px 10px; }
.itin-btn.itin-actif {
  background: #1d3324;
  border-color: var(--itin-vert);
  color: #d7f7e2;
}
.itin-btn.itin-danger { border-color: #ff6b6b; background: #3a1418; color: #ffd7d7; }

/* Choix du profil de véhicule : cartes tactiles */
.itin-profils {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.itin-profil {
  text-align: left;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1.5px solid var(--bord);
  background: #232833;
  color: var(--texte);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.itin-profil:hover { filter: brightness(1.15); }
.itin-profil.actif {
  border-color: var(--itin-vert);
  background: #1d3324;
  box-shadow: inset 0 0 0 1px var(--itin-vert);
}
.itin-profil-nom { font-size: 13.5px; font-weight: 800; line-height: 1.25; }
.itin-profil-contraintes { font-size: 11.5px; color: var(--texte-2); line-height: 1.35; }
.itin-profil.actif .itin-profil-contraintes { color: #b9e8c9; }

/* Interrupteurs (évitement du feu, heure de départ) */
.itin-bascule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
}
.itin-bascule input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
.itin-bascule b { display: block; }
.itin-bascule small { color: var(--texte-2); font-size: 12px; }

.itin-retard { display: flex; flex-wrap: wrap; gap: 6px; }
.itin-retard button {
  min-height: 40px;
  min-width: 62px;
  border-radius: 8px;
  border: 1px solid var(--bord);
  background: #232833;
  color: var(--texte);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.itin-retard button.actif { border-color: var(--jaune); background: #33280a; color: #ffe9a8; }

/* ---------- Avertissements : TOUJOURS en tête, du plus grave au plus anodin ---------- */
.itin-avert {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.itin-avert li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 9px;
  border-radius: 8px;
  border-left: 4px solid var(--itin-orange);
  background: rgba(245, 165, 36, 0.12);
  font-size: 13px;
  line-height: 1.4;
}
.itin-avert li.grave {
  border-left-color: var(--itin-rouge);
  background: rgba(229, 72, 77, 0.16);
  font-weight: 700;
}
.itin-avert li .itin-avert-ico { flex: 0 0 auto; }

/* Bandeau de dégradation (sans_donnees_feu / sans_pistes / évitement coupé) */
.itin-degrade {
  padding: 9px 11px;
  border-radius: 9px;
  border: 1.5px solid var(--itin-rouge);
  background: #3a1418;
  color: #ffe0e0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.itin-degrade.attention {
  border-color: var(--itin-orange);
  background: #33280a;
  color: #ffe9a8;
}
.itin-degrade small { display: block; font-weight: 500; margin-top: 3px; }

/* ---------- Panneau de GUIDAGE (bas de carte) ---------- */
#itin-guidage {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bas-commandes, 54px) + 52px);
  transform: translateX(-50%);
  z-index: 36;
  width: min(96vw, 560px);
  /* `vh` PUIS `dvh` : sur Safari iOS, `vh` se rapporte à la grande zone
     d'affichage (barres d'outils rétractées) et vaut ~97 px de plus que ce
     qu'on voit — le bas du guidage, c'est-à-dire la MANŒUVRE SUIVANTE, passait
     sous la barre du navigateur. Convention détaillée dans style.css, #toasts. */
  max-height: min(58vh, 560px);
  max-height: min(58dvh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panneau);
  border: 1px solid var(--itin-vert);
  border-radius: var(--rayon);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.65);
}
/* Même précaution que .itin-corps : c'est le PANNEAU qui défile, jamais ses
   enfants qui rétrécissent. */
#itin-guidage > * { flex: 0 0 auto; }
#itin-guidage[hidden] { display: none !important; }
#itin-guidage.degrade { border-color: var(--itin-orange); }
#itin-guidage.sans-guidage { border-color: var(--texte-2); }

.itin-guid-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.itin-guid-titre { font-size: 12.5px; font-weight: 800; color: var(--texte-2); }
.itin-guid-tete button {
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--bord);
  background: #2a2f39;
  color: var(--texte);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

/* Prochaine manœuvre EN GROS : c'est ce qu'un conducteur lit d'un coup d'œil */
.itin-manoeuvre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #16241a;
  border: 1px solid var(--itin-vert);
}
.itin-manoeuvre-fleche { font-size: 34px; line-height: 1; flex: 0 0 auto; }
.itin-manoeuvre-texte { min-width: 0; }
.itin-manoeuvre-dist {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
  color: #d7f7e2;
}
.itin-manoeuvre-instr {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}
.itin-manoeuvre-av { font-size: 12px; color: #ffe9a8; margin-top: 3px; line-height: 1.35; }

.itin-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
}
.itin-chiffres b { font-size: 16px; font-weight: 900; }
.itin-chiffres span { display: flex; align-items: baseline; gap: 5px; }
.itin-chiffres .itin-chiffre-lib { color: var(--texte-2); font-size: 12px; }

.itin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.itin-actions .itin-btn { flex: 1 1 130px; min-height: 44px; }

/* Liste des étapes */
.itin-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.itin-etape {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 9px;
  border-radius: 8px;
  background: #202631;
  border-left: 3px solid transparent;
  font-size: 13px;
  line-height: 1.35;
}
.itin-etape.courante { border-left-color: var(--itin-vert); background: #1d3324; }
.itin-etape.penalisee { border-left-color: var(--itin-orange); }
.itin-etape.passee { opacity: 0.5; }
.itin-etape-num {
  flex: 0 0 auto;
  min-width: 22px;
  font-weight: 800;
  color: var(--texte-2);
  font-variant-numeric: tabular-nums;
}
.itin-etape-corps { min-width: 0; }
.itin-etape-instr { font-weight: 700; word-break: break-word; }
.itin-etape-meta { font-size: 11.5px; color: var(--texte-2); margin-top: 2px; }
.itin-etape-av { font-size: 11.5px; color: #ffcf7a; margin-top: 2px; line-height: 1.35; }

/* ---------- Bandeau d'UNE LIGNE (recalcul automatique) ----------
   Aucun centre de messages n'existe dans l'application : le contrat impose
   alors un bandeau d'une seule ligne. */
#itin-bandeau {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bas-securite, 46px) + var(--bas-commandes, 54px) + 118px);
  z-index: 45;
  width: min(94vw, 560px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  /* RAYON FIXE, pas 999px — même leçon que #maj-dispo (capture Android du
     29/07) : sur une boîte qui grandit, 999px ne fait pas une pilule mais une
     ellipse. Ici la hauteur est tenue par la troncature du texte, mais un rayon
     fixe la rend indépendante de cette promesse. 22 px reste l'aspect pilule
     sur les ≈ 50 px de haut du bandeau. */
  border-radius: 22px;
  background: #33280a;
  border: 1.5px solid var(--itin-orange);
  color: #ffe9a8;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
}
#itin-bandeau[hidden] { display: none !important; }
#itin-bandeau.grave { background: #3a1418; border-color: var(--itin-rouge); color: #ffe0e0; }
#itin-bandeau-texte {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 999px LÉGITIME par (b) : nowrap ajouté. « ↻ Recalculer » se repliait sur un
   écran étroit et le bouton devenait un galet. */
#itin-bandeau button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

/* ---------- Barre de choix d'un point sur la carte ---------- */
#itin-point-barre {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bas-commandes, 54px) + 52px);
  transform: translateX(-50%);
  z-index: 37;
  width: min(96vw, 560px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panneau);
  border: 1px solid var(--jaune);
  border-radius: var(--rayon);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.65);
}
#itin-point-barre[hidden] { display: none !important; }
#itin-point-consigne { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
#itin-point-info { font-size: 12.5px; color: var(--texte-2); min-height: 18px; line-height: 1.4; }
#itin-point-barre .itin-actions .itin-btn { flex: 1 1 140px; }

/* ---------- Écran de REFUS : « Aucun itinéraire sûr » ----------
   Jamais un message d'erreur technique : la raison, puis ce qu'on peut faire. */
#itin-refus .itin-refus-tete {
  padding: 12px 14px;
  border-radius: 12px;
  background: #3a1418;
  border: 2px solid var(--itin-rouge);
}
.itin-refus-titre { margin: 0 0 6px; font-size: 20px; font-weight: 900; color: #ffd7d7; }
.itin-refus-raison { margin: 0; font-size: 14px; line-height: 1.45; color: #ffe9e9; }
.itin-refus-quoi { font-size: 13px; color: var(--texte-2); margin: 0 0 2px; }
.itin-suggestion {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  min-height: 56px;
  border-radius: 10px;
  border: 1.5px solid var(--itin-vert);
  background: #1d3324;
  color: var(--texte);
  cursor: pointer;
}
.itin-suggestion:hover { filter: brightness(1.18); }
.itin-suggestion-titre { font-size: 14px; font-weight: 800; }
.itin-suggestion-detail { font-size: 12px; color: #b9e8c9; line-height: 1.35; }
.itin-suggestion.info { border-color: var(--bord); background: var(--bloc); cursor: default; }
.itin-suggestion.info .itin-suggestion-detail { color: var(--texte-2); }

/* ---------- Marqueurs carte ---------- */
.itin-marq {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
  cursor: default;
}
.itin-marq-obstacle { font-size: 21px; cursor: pointer; }

/* ---------- Attente ---------- */
.itin-attente {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texte-2);
}
.itin-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--itin-vert);
  animation: itin-tourne 0.9s linear infinite;
  flex: 0 0 auto;
}
@keyframes itin-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .itin-spinner { animation-duration: 3s; }
}

/* ---------- Mobile (375 px) ---------- */
@media (max-width: 560px) {
  #itin-guidage {
    width: 96vw;
    max-height: 54vh;
    max-height: 54dvh;   /* iOS : cf. règle de base ci-dessus */
    padding: 8px 10px;
    gap: 6px;
  }
  .itin-manoeuvre { padding: 8px 10px; gap: 9px; }
  .itin-manoeuvre-fleche { font-size: 28px; }
  .itin-manoeuvre-dist { font-size: 22px; }
  .itin-manoeuvre-instr { font-size: 14px; }
  .itin-chiffres { gap: 4px 10px; font-size: 12px; }
  .itin-chiffres b { font-size: 14px; }
  .itin-actions .itin-btn { flex: 1 1 100%; }
  .itin-profils { grid-template-columns: 1fr; }
  #itin-point-barre { width: 96vw; padding: 8px 10px; }
  #itin-bandeau { width: 96vw; padding: 7px 10px; font-size: 12px; }
  .itin-refus-titre { font-size: 17px; }
}

/* B10 (21/08/2026) : GUIDAGE EN PAYSAGE — l'usage réel du guidage est le
   téléphone COUCHÉ sur le support véhicule. Centré en bas, le panneau
   couvrait le MILIEU de la carte (58 dvh d'un écran de 375 px de haut) :
   ancré à DROITE, ~40 vw, hauteur bornée à l'écran — la moitié gauche reste
   de la carte pleine, et la manœuvre suivante tombe sous le pouce du
   passager. Posé en FIN de fichier : à spécificité égale, il gagne sur le
   bloc bas-centré nominal. */
@media (max-height: 450px) and (orientation: landscape) {
  #itin-guidage {
    left: auto;
    right: var(--marge-droite, 8px);
    transform: none;
    bottom: 8px;
    width: min(42vw, 380px);
    max-height: calc(100dvh - 16px);
  }
}