/* Étape 3 : quatre points à trancher, chacun avec la proposition de la machine et l'autre choix. */
.alertes__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.alerte {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 22px;
  background: var(--feuille); border: 1px solid var(--filet); border-top: 4px solid var(--peche); border-radius: var(--rayon);
}
.alerte--tranchee { border-top-color: var(--olive); }
.alerte__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alerte__type { font-size: 13px; font-weight: 600; color: #8a4a0c; }
.alerte--tranchee .alerte__type { color: var(--ok); }
.alerte__tournee { font: 400 22px/1 var(--titre); letter-spacing: 0.04em; padding: 5px 9px 2px; border-radius: var(--rayon-petit); background: var(--sapin); color: var(--anis); }
.alerte h2 { font-size: 19px; color: var(--sapin); }
.alerte__texte { color: var(--encre-2); font-size: 14px; }
.alerte__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 6px; }
.option {
  display: grid; gap: 4px; align-content: start; padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--feuille); border: 1.5px solid var(--filet-fort); border-radius: var(--rayon-petit);
}
.option:hover { border-color: var(--vert); }
.option--choisie { border: 2px solid var(--sapin); background: var(--anis-voile); padding: 11.5px 13.5px; }
.option__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-size: 14px; color: var(--sapin); }
.option__propose { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--anis); color: var(--sapin); }
.option__detail { font-size: 12.5px; color: var(--encre-2); }
.alerte__resultat { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ok); }
.alerte__resultat::before { content: '✓'; font-weight: 700; color: var(--olive); }

.valider {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 20px; padding: 16px 20px; border-radius: var(--rayon); background: var(--feuille); border: 1px solid var(--filet);
}
.valider p { color: var(--encre-2); max-width: 60ch; }

@media (max-width: 900px) {
  .alertes__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .alerte { padding: 18px; }
  .alerte__options { grid-template-columns: minmax(0, 1fr); }
  .valider .bouton { width: 100%; }
}