/**
 * Cockpit de la tournée (`/tournee`) : classes `tr-`, sur les composants
 * `bo-` de la console. Consulté sur iPhone autant qu'au bureau : des cartes
 * qui s'empilent, aucun tableau indispensable. Couleurs de la palette
 * daltonienne de la console, toujours doublées d'un libellé écrit.
 */

/* ---------------------------------------------------------- Alertes écrites */

.tr-alerte { padding: 12px 14px; border-radius: 12px; border: 2px solid var(--bo-rouge); color: var(--bo-rouge-texte); background: var(--bo-surface); }
.tr-alerte--jaune { border-color: var(--bo-jaune); color: var(--sn-text); border-left-width: 6px; }

/* Message de retour d'une action, en bas de l'écran : la page revient sur la section touchée. */
.tr-flash { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; max-width: 640px; margin: 0 auto; }
.tr-flash .bo-flash { margin: 0; background: var(--bo-surface); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); cursor: pointer; }

/* ---------------------------------------------------------- Bandeau d'état */

.tr-etat { border-left: 6px solid var(--bo-gris); }
.tr-etat--bleu { border-left-color: var(--bo-bleu); }
.tr-etat--rouge, .tr-etat--rouge-trait { border-left-color: var(--bo-rouge); }
.tr-etat--jaune { border-left-color: var(--bo-jaune); }
.tr-etat__tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tr-etat__tete form { margin: 0; }
.tr-etat .bo-carte__titre .bo-badge { font-size: 0.9rem; min-height: 30px; }
.bo-contenu .tr-bouton { min-height: 50px; padding: 0 24px; font-size: 1.05rem; }
.bo-contenu .tr-bouton--arret { background: var(--bo-rouge); color: var(--bo-sur-rouge); border-color: var(--bo-rouge); }
.bo-contenu .tr-bouton--arret:hover { background: #B5000C; border-color: #B5000C; }
.tr-lignes { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 0.92rem; }
.tr-lignes dt { color: var(--sn-muted); }
.tr-lignes dd { margin: 0; overflow-wrap: anywhere; }
.tr-jauge { margin: 0 0 0 8px; }
.tr-pauses { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tr-pauses li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--bo-jaune); }
.tr-pauses form { margin: 0; }

/* ---------------------------------------------------------- Cartes empilées */

.tr-tuiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.tr-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.tr-cartes--vivier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tr-vivier, .tr-entonnoir, .tr-variante, .tr-reponse, .tr-fiche {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--sn-border); background: var(--bo-surface);
}
.tr-vivier__titre, .tr-etape, .tr-activite, .tr-etat .bo-carte__sous-titre { margin: 0; }
.tr-vivier__titre { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 1rem/1.25 var(--bo-titre); }
.tr-vivier__titre span { font-variant-numeric: tabular-nums; }
.tr-vivier__axe { font-size: 0.88rem; overflow-wrap: anywhere; }
.tr-vivier__axe .bo-sous { margin-bottom: 1px; }
.tr-vivier__stock { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--sn-border); }
.tr-vivier__stock b { font: 700 1.3rem/1 var(--bo-titre); font-variant-numeric: tabular-nums; margin-right: 4px; }
.tr-apify { font-size: 0.9rem; }

/* ---------------------------------------------------------- Entonnoir */

.tr-entonnoir { border: 0; padding: 0; gap: 10px; }
.tr-entonnoir + .tr-entonnoir { padding-top: 14px; border-top: 1px solid var(--sn-border); border-radius: 0; }
.tr-mesures { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.tr-mesure { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--sn-bg); box-shadow: inset 0 3px 0 var(--bo-bleu); }
.tr-mesure--jaune { box-shadow: inset 0 3px 0 var(--bo-jaune); }
.tr-mesure--trait { box-shadow: inset 0 3px 0 var(--bo-gris); }
.tr-mesure__libelle { font-size: 0.82rem; color: var(--sn-muted); }
.tr-mesure__valeur { font: 700 1.35rem/1.1 var(--bo-titre); font-variant-numeric: tabular-nums; }
.tr-tableau td:first-child { min-width: 150px; }
.tr-tableau th { white-space: normal; font-size: 0.7rem; letter-spacing: 0.02em; }
.tr-tableau .bo-nombre .bo-sous { display: inline; }
.tr-verdict { font-size: 0.9rem; }

/* ---------------------------------------------------------- Textes de la tournée */

.tr-etape { font: 700 1rem/1.25 var(--bo-titre); margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--sn-border); }
.tr-activite { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sn-muted); }
.tr-variante--brouillon { border-left: 5px solid var(--bo-jaune); }
.tr-variante--validee { border-left: 5px solid var(--bo-bleu); }
.tr-variante--retiree { border-left: 5px solid var(--bo-gris); }
.tr-variante--retiree .tr-corps, .tr-variante--retiree .tr-sujet { opacity: 0.7; }
.tr-variante__tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-sujet { font-weight: 700; overflow-wrap: anywhere; }
.tr-corps {
  white-space: pre-wrap; overflow-wrap: anywhere; font: 0.92rem/1.55 var(--bo-texte);
  padding: 12px 14px; border-radius: 10px; background: var(--sn-bg); border: 1px solid var(--sn-border); max-height: 360px; overflow: auto;
}
.tr-variable { background: var(--bo-jaune); color: var(--bo-sur-jaune); padding: 0 3px; border-radius: 4px; font-weight: 700; }
.tr-compteurs { font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.tr-geste { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tr-geste .bo-case { margin: 0; }
.tr-geste--ligne { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.tr-geste--ligne label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; font-size: 0.85rem; color: var(--sn-muted); }
.tr-geste--ligne input { min-height: 40px; padding: 0 10px; border: 1.5px solid var(--sn-border); border-radius: 10px; background: var(--bo-surface); color: var(--sn-text); font: inherit; }
.tr-geste .op-button { align-self: flex-start; }
.tr-nouvelle { margin-top: 10px; }

/* Ligne qui résume les campagnes de la tournée dans /mailing. */
.tr-replie { padding: 10px 14px; border-radius: 10px; border-left: 5px solid var(--bo-bleu); background: var(--sn-bg); font-size: 0.92rem; }

/* ---------------------------------------------------------- Accroches à relire */

.tr-accroches__comptes { font-size: 0.92rem; }
.tr-accroches { list-style: none; display: flex; flex-direction: column; }
.tr-accroches li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--sn-border); }
.tr-accroches form { margin: 0; }
.tr-accroches__qui { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.tr-accroches__phrase { font-size: 0.95rem; line-height: 1.5; overflow-wrap: anywhere; }

/* ---------------------------------------------------------- Réponses, fiches, suites */

.tr-reponse__tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-reponse form { margin: 0; }
.tr-pli summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.tr-pli .tr-corps { margin-top: 8px; }
.tr-copie { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--sn-muted); }
.tr-copie textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--sn-border); background: var(--sn-bg);
  color: var(--sn-text); font: 0.92rem/1.5 var(--bo-texte); resize: vertical; cursor: copy;
}
.tr-fiche__face { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.tr-fiche__face > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--sn-bg); overflow-wrap: anywhere; }
.tr-fiche__face > div span:not(.bo-sous) { font-size: 0.88rem; }
.tr-suites { list-style: none; display: flex; flex-direction: column; font-size: 0.92rem; }
.tr-suites li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--sn-border); }
.tr-suites li > span:nth-child(2) { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.tr-suites__quand { flex: 0 0 110px; color: var(--sn-muted); font-size: 0.85rem; }

@media (max-width: 600px) {
  .tr-etat__tete form, .tr-etat__tete .tr-bouton { width: 100%; }
  .tr-lignes { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .tr-lignes dt { margin-top: 8px; font-size: 0.8rem; }
  .tr-suites__quand { flex-basis: 100%; }
  .tr-accroches li { grid-template-columns: minmax(0, 1fr); }
  .tr-accroches .op-button { justify-self: start; }
  .tr-tuiles .bo-tuile { padding: 12px 14px; }
  .tr-tuiles .bo-tuile__valeur { font-size: 1.5rem; }
}