/* ---------------------------------------------------------------------------
   Réglages : plateforme (SMTP, WhatsApp) et alertes côté client.
   Deux écrans de formulaire où la moitié de l'information est explicative :
   les aides sous les champs comptent autant que les champs.
   --------------------------------------------------------------------------- */

.reglages-bloc { margin-bottom: var(--space-5, 1.25rem); }

.reglages-form { margin-top: var(--space-4, 1rem); }

/* Un champ qui prend toute la largeur de la grille : les jetons et adresses
   longs sont illisibles dans une demi-colonne. */
.form-row--pleine { grid-column: 1 / -1; }

.reglages-sep {
  border: 0;
  border-top: 1px solid var(--color-border, #e5e7eb);
  margin: var(--space-5, 1.25rem) 0 var(--space-4, 1rem);
}

.reglages-test label { font-weight: 600; display: block; margin-bottom: .4rem; }

.reglages-test__ligne {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}

.reglages-test__ligne input {
  flex: 1 1 260px;
  min-width: 0;   /* sans quoi un input en flex refuse de rétrécir */
}

/* --- Les deux modes WhatsApp, présentés côte à côte --------------------- */

.reglages-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4, 1rem);
  margin: var(--space-4, 1rem) 0;
}

.reglages-mode {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 10px);
  padding: 1rem 1.1rem;
}

/* Le mode actif se voit sans avoir à lire le sélecteur plus bas. */
.reglages-mode.est-actif {
  border-color: var(--color-primary, #a5195b);
  box-shadow: inset 0 0 0 1px var(--color-primary, #a5195b);
}

.reglages-mode h3 {
  font-size: var(--font-sm, .9rem);
  margin: 0 0 .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.reglages-mode p {
  margin: 0 0 .5rem;
  font-size: var(--font-sm, .87rem);
  line-height: 1.55;
}

.reglages-mode p:last-child { margin-bottom: 0; }

/* --- Alertes : aperçu ---------------------------------------------------- */

.notif-groupe {
  font-size: var(--font-sm, .9rem);
  margin: var(--space-4, 1rem) 0 .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.notif-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.notif-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .6rem 0 .6rem .75rem;
  border-bottom: 1px solid var(--color-border-faible, #f3f4f6);

  /* La bande de gauche porte l'urgence : c'est ce qu'on lit en diagonale. */
  border-left: 3px solid var(--color-border, #e5e7eb);
}

.notif-item--alerte   { border-left-color: var(--color-warning, #d97706); }
.notif-item--critique { border-left-color: var(--color-danger, #e02424); }

.notif-item__texte { min-width: 0; }
.notif-item__texte .muted { display: block; font-size: var(--font-xs, .78rem); }

.notif-item__date {
  text-align: right;
  white-space: nowrap;
  font-size: var(--font-sm, .85rem);
  font-variant-numeric: tabular-nums;
}

.notif-item__delai {
  display: block;
  font-size: var(--font-xs, .75rem);
  color: var(--color-text-muted, #6b7280);
}

.notif-item--critique .notif-item__delai { color: var(--color-danger, #e02424); }
.notif-item--alerte   .notif-item__delai { color: var(--color-warning, #d97706); }

.notif-test { margin-top: var(--space-4, 1rem); }

/* --- Alertes : préférences ---------------------------------------------- */

.notif-fieldset {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 10px);
  padding: 1rem 1.1rem;
  margin: var(--space-4, 1rem) 0;
}

.notif-fieldset legend {
  font-weight: 600;
  padding: 0 .4rem;
  font-size: var(--font-sm, .88rem);
}

/* Toute la ligne est cliquable : viser une case de 13 px au doigt est une
   épreuve, et c'est justement sur mobile que ces réglages se consultent. */
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .55rem 0;
  cursor: pointer;
  min-height: var(--touch-min, 44px);
}

.switch-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: .1rem;
}

.switch-row > span { display: flex; flex-direction: column; gap: .15rem; }
.switch-row .muted { font-size: var(--font-xs, .78rem); line-height: 1.45; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: var(--space-4, 1rem);
}

@media (max-width: 640px) {
  .notif-item {
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
  }
  .notif-item__date { text-align: left; }
  .form-actions .btn { width: 100%; }
  .reglages-test__ligne .btn { width: 100%; }
}