/* ==========================================================================
   In Pulse - pages/alertes.css
   Styles propres à l'écran Alertes (app/alertes.html).
   Dépend de tokens.css, base.css, components.css et pages/app.css.
   Aucune couleur en dur : tout passe par les tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête de page
   -------------------------------------------------------------------------- */
.alertes-entete__titre {
  font-size: var(--taille-2xl);
}

.alertes-entete__intro {
  margin-top: var(--espace-xs);
  font-size: var(--taille-base);
  color: var(--couleur-texte-secondaire);
  max-width: var(--largeur-texte);
}

/* --------------------------------------------------------------------------
   2. Rangée haute : formulaire (large) + alerte en cours
   -------------------------------------------------------------------------- */
.alertes-haut {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--rythme-bloc);
  align-items: start;
}

/* --------------------------------------------------------------------------
   3. Carte « Lever une alerte »
   -------------------------------------------------------------------------- */

/* Respiration à l'arrivée par l'ancre #lever-alerte (en-tête sticky) */
.alertes-lever {
  scroll-margin-top: 6rem;
}

.alertes-lever__intro {
  margin-top: var(--espace-2xs);
  margin-bottom: var(--espace-lg);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

/* ----- Gravité : fieldset neutre + 3 cartes radio ----- */
.alertes-gravite {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.alertes-gravite legend {
  padding: 0;
  margin-bottom: var(--espace-sm);
}

.alertes-gravite__choix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-sm);
}

.gravite-option__nom {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
}

.gravite-option__aide {
  display: block;
  margin-top: var(--espace-2xs);
  font-size: var(--taille-xs);
  color: var(--couleur-texte-discret);
  line-height: var(--interligne-serre);
}

/* Chaque gravité prend sa couleur d'état, en voile léger - jamais criard.
   « À surveiller » → info, « Préoccupante » → attention, « Critique » → danger. */
.gravite-option--surveiller:hover,
.gravite-option--surveiller:has(input:checked) {
  border-color: var(--couleur-info);
}

.gravite-option--surveiller:has(input:checked) {
  background-color: var(--couleur-info-fond);
}

.gravite-option--surveiller input:checked {
  background-color: var(--couleur-info);
  border-color: var(--couleur-info);
}

.gravite-option--preoccupante:hover,
.gravite-option--preoccupante:has(input:checked) {
  border-color: var(--couleur-attention);
}

.gravite-option--preoccupante:has(input:checked) {
  background-color: var(--couleur-attention-fond);
}

.gravite-option--preoccupante input:checked {
  background-color: var(--couleur-attention);
  border-color: var(--couleur-attention);
}

.gravite-option--critique:hover,
.gravite-option--critique:has(input:checked) {
  border-color: var(--couleur-danger);
}

.gravite-option--critique:has(input:checked) {
  background-color: var(--couleur-danger-fond);
}

.gravite-option--critique input:checked {
  background-color: var(--couleur-danger);
  border-color: var(--couleur-danger);
}

/* ----- Partage avec le panel : encart circuit fermé ----- */
.alertes-partage {
  display: grid;
  gap: var(--espace-sm);
  padding: var(--espace-md);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-md);
  background-color: var(--couleur-surface-2);
}

.alertes-partage__rappel {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-xs);
  font-size: var(--taille-xs);
  color: var(--couleur-texte-discret);
}

.alertes-partage__rappel svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--couleur-accent-texte);
}

/* ----- Pied du formulaire ----- */
.alertes-lever__pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-sm) var(--espace-md);
}

.alertes-lever__pied .texte-discret {
  font-size: var(--taille-xs);
}

/* --------------------------------------------------------------------------
   4. Confirmation (remplace le formulaire à l'envoi)
   -------------------------------------------------------------------------- */
.alertes-confirmation {
  display: grid;
  gap: var(--espace-lg);
  justify-items: start;
}

/* `display: grid` ne doit pas annuler l'attribut [hidden] */
.alertes-confirmation[hidden] {
  display: none;
}

.alertes-confirmation__icone {
  display: grid;
  place-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--rayon-rond);
  border: 1px solid var(--couleur-succes);
  background-color: var(--couleur-succes-fond);
  color: var(--couleur-succes);
}

.alertes-confirmation__icone svg {
  width: 1.375rem;
  height: 1.375rem;
}

.alertes-confirmation__titre {
  font-size: var(--taille-xl);
}

.alertes-confirmation__texte {
  margin-top: var(--espace-xs);
  font-size: var(--taille-base);
  color: var(--couleur-texte-secondaire);
}

.alertes-confirmation__texte strong {
  color: var(--couleur-encre);
}

.alertes-confirmation__timeline {
  width: 100%;
}

.alertes-confirmation__pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-sm) var(--espace-md);
}

.alertes-confirmation__pied .texte-discret {
  font-size: var(--taille-xs);
}

/* --------------------------------------------------------------------------
   5. Carte « Alerte en cours » : filet rouge sobre à gauche
   -------------------------------------------------------------------------- */
.alerte-active {
  border-left: 3px solid var(--couleur-danger);
}

.alerte-active__contexte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-sm);
}

.alerte-active__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-base);
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
  line-height: var(--interligne-serre);
}

.alerte-active__description {
  margin-top: var(--espace-xs);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.alerte-active__expert {
  margin-top: var(--espace-md);
}

.alerte-active__pistes {
  margin-top: var(--espace-md);
  padding: var(--espace-md);
  background-color: var(--couleur-surface-2);
  border-radius: var(--rayon-sm);
}

.alerte-active__pistes .etiquette {
  margin-bottom: var(--espace-xs);
}

.alerte-active__statut {
  margin-top: var(--espace-md);
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-danger);
}

.alerte-active .carte__pied {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-discret);
}

/* --------------------------------------------------------------------------
   6. Historique : timeline des alertes passées
   -------------------------------------------------------------------------- */
.alertes-historique {
  gap: var(--espace-xl);
}

/* Point de timeline « info » (gravité à surveiller), absent du socle */
.alertes-historique .timeline__point--info {
  border-color: var(--couleur-info);
}

.histo-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  margin-block: var(--espace-xs);
}

/* Bloc « Décision prise » (résolue) ou « Prochaine étape » (en cours) */
.histo-decision {
  margin-top: var(--espace-sm);
  padding: var(--espace-sm) var(--espace-md);
  border-left: 2px solid var(--couleur-succes);
  border-radius: var(--rayon-xs);
  background-color: var(--couleur-surface-2);
  max-width: var(--largeur-texte);
}

.histo-decision__libelle {
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-succes);
}

.histo-decision__texte {
  margin-top: var(--espace-2xs);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.histo-decision--attente {
  border-left-color: var(--couleur-attention);
}

.histo-decision--attente .histo-decision__libelle {
  color: var(--couleur-attention);
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

/* La rangée haute passe en une colonne */
@media (max-width: 1080px) {
  .alertes-haut {
    grid-template-columns: 1fr;
  }
}

/* Les trois gravités s'empilent */
@media (max-width: 720px) {
  .alertes-gravite__choix {
    grid-template-columns: 1fr;
  }
}