/* Écran « Alertes » (E7) — maquettes design_handoff_traceo/ui_kits/alertes/.
   Mobile d'abord (mobile.html) ; le passage DESKTOP (desktop.html) vit dans le
   bloc @media (min-width: 900px) en bas de fichier : maître-détail en grille
   (liste groupée à gauche, éditeur inline sticky à droite). La même structure
   sert les deux — l'éditeur (#al-sheet) passe de bottom sheet fixe (mobile) à
   colonne de grille (desktop) par simple surcharge CSS ; le JS remplit la liste
   à plat (#al-list, mobile) OU la liste groupée (#al-groups, desktop) selon la
   largeur. Toutes les classes sont préfixées `al-` : la portée CSS est globale
   dans ce projet et des noms génériques (.card, .sw, .sheet…) entreraient en
   collision avec les autres écrans. Aucune valeur en dur quand un token existe. */

/* ── En-tête d'écran + compteur ────────────────────────────────── */
.al-pagehd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); padding: 0 2px;
}
.al-pagehd__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-pagehd__title {
  margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight); color: var(--ink); line-height: 1.05;
  display: inline-flex; align-items: center; gap: 8px;
}
.al-pagehd__sub {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-3);
  font-family: var(--font-mono);
}
.al-pagehd__sub b { color: var(--ink-2); }
.al-pagehd__sub .al-dot { color: var(--border-strong); margin: 0 3px; }

/* Pause globale : icône seule sur mobile, pilule textuelle sur desktop. Le menu
   déroulant est ancré sous le bouton (position absolute dans .al-pause-wrap) —
   même markup pour les deux tailles ; un scrim fixe capte le clic extérieur. */
.al-pause-wrap { position: relative; flex-shrink: 0; }
.al-pause-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 36px; height: 36px; padding: 0; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.al-pause-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.al-pause-btn svg { display: block; }
.al-pause-lbl { display: none; }

.al-screen { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Conteneurs maître-détail : empilés sur mobile (la grille n'est activée qu'à
   ≥900px). L'éditeur (.al-col-edit) n'occupe rien sur mobile — son enfant
   .al-sheet est en position fixe (bottom sheet). */
.al-alerts { display: flex; flex-direction: column; gap: var(--sp-4); }
.al-col-list { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.al-col-edit { display: contents; }
.al-sec { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Éléments réservés au desktop (masqués sur mobile) : total, recherche texte,
   libellés longs, filet de groupe. */
.al-only-desk, .al-search, .al-srcrow__lbl, .al-srcfilter__pre, .al-rule { display: none; }
.al-groups { display: none; }   /* liste groupée : desktop seulement */
.al-sec__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: 0 2px; min-height: 28px; flex-wrap: wrap;
}
.al-label {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs);
  font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--ink-3); white-space: nowrap;
}

/* ── Bandeau de pause globale ──────────────────────────────────── */
.al-pausebar {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  border-radius: var(--r-md); background: var(--warn-wash);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  color: var(--ink);
}
.al-pausebar.hidden { display: none; }
.al-pausebar__ic { color: var(--warn); flex-shrink: 0; display: grid; place-items: center; }
.al-pausebar__txt { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.al-pausebar__txt small {
  display: block; font-weight: var(--fw-medium); color: var(--ink-3);
  font-size: var(--fs-2xs);
}

/* ── Barre d'outils : (recherche +) segment d'état, puis filtres source ────── */
.al-toolbar { display: flex; flex-direction: column; gap: var(--sp-3); }
.al-toolbar__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: 28px;
}
.al-toolbar__lbl { flex-shrink: 0; }

/* ── Filtres (statut + sources) ────────────────────────────────── */
.al-srcrow {
  display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
  margin: 0 -1rem; padding: 2px 1rem;
}
.al-srcrow::-webkit-scrollbar { display: none; }
.al-srcfilter {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.al-srcfilter svg { display: block; }
.al-srcfilter--commu { border-style: dashed; }
.al-srcfilter[aria-pressed="true"].al-srcfilter--idfm {
  background: var(--info); border-color: transparent; color: #fff;
}
.al-srcfilter[aria-pressed="true"].al-srcfilter--commu {
  background: var(--estime-wash); color: var(--estime);
  border-color: color-mix(in srgb, var(--estime) 55%, transparent);
}
.al-srcfilter[aria-pressed="true"].al-srcfilter--retard {
  background: var(--warn-wash); color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

/* ── Créer depuis un favori ────────────────────────────────────── */
.al-quick {
  display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
  margin: 0 -1rem; padding: 2px 1rem;
}
.al-quick::-webkit-scrollbar { display: none; }
.al-qchip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--tap-min); padding: 6px 13px 6px 8px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font-family: var(--font-ui);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.al-qchip:hover { border-color: var(--traceo-red); background: var(--surface-2); }
.al-qchip__plus {
  width: 22px; height: 22px; border-radius: 50%; background: var(--traceo-red-soft);
  color: var(--traceo-red); display: inline-flex; align-items: center;
  justify-content: center; font-size: 15px; font-weight: var(--fw-extra);
  line-height: 1; flex-shrink: 0;
}
.al-tgtchip {
  width: 40px; height: 40px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.al-tgtchip--stop { background: var(--coral-idf-wash); }
.al-tgtchip--trajet { background: var(--bleu-luf-wash); }
.al-tgtchip--favori { background: var(--soleil-wash); }
.al-tgtchip--sm { width: 26px; height: 26px; border-radius: var(--r-xs); font-size: 14px; }

/* ── Carte d'alerte ────────────────────────────────────────────── */
.al-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.al-list.is-paused { opacity: .62; }
.al-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.al-card.is-off { background: var(--surface-2); box-shadow: none; }
.al-card__top {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
.al-card__tgt { flex-shrink: 0; }
.al-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.al-card__name {
  font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-card.is-off .al-card__name { color: var(--ink-3); }
.al-card__kind {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs);
  font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-card__lines {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  margin-top: 3px; flex-wrap: wrap;
}

/* Interrupteur marche/arrêt */
.al-sw {
  position: relative; width: 46px; height: 27px; border: 0;
  border-radius: var(--r-pill); background: var(--surface-3); cursor: pointer;
  padding: 0; flex-shrink: 0; transition: background var(--dur-base) var(--ease-out);
}
.al-sw i {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease-out);
}
.al-sw[aria-pressed="true"] { background: var(--ok); }
.al-sw[aria-pressed="true"] i { transform: translateX(19px); }

.al-card__when {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0 var(--sp-4) var(--sp-2);
}
.al-when {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: var(--r-pill); background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink-2); font-size: var(--fs-2xs);
  font-weight: var(--fw-bold); white-space: nowrap;
}
.al-when--auto {
  background: var(--produit-wash); color: var(--produit-ink);
  border-color: color-mix(in srgb, var(--produit) 35%, var(--border));
}
.al-when__d { color: var(--ink-3); font-weight: var(--fw-semi); }
.al-when time { font-family: var(--font-mono); }
.al-stat {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: var(--r-pill); background: var(--produit-wash);
  color: var(--produit-ink); font-family: var(--font-mono); font-size: var(--fs-2xs);
  font-weight: var(--fw-extra); white-space: nowrap;
}
.al-card.is-off .al-when, .al-card.is-off .al-stat { opacity: .55; }

.al-card__src {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0 var(--sp-4) var(--sp-3);
}
.al-src {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: var(--r-xs); font-family: var(--font-mono);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); white-space: nowrap;
  line-height: 1.3;
}
.al-src svg { display: block; flex-shrink: 0; }
.al-src--idfm { background: var(--info); color: #fff; border: 1px solid transparent; }
.al-src--commu {
  background: var(--estime-wash); color: var(--estime);
  border: 1px dashed color-mix(in srgb, var(--estime) 55%, transparent);
}
.al-src--retard {
  background: var(--warn-wash); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
}
.al-src b { font-weight: var(--fw-extra); }
.al-chanmini { display: inline-flex; align-items: center; gap: 3px; }
.al-chanmini span {
  width: 24px; height: 24px; border-radius: var(--r-xs); background: var(--surface-2);
  border: 1px solid var(--border); display: grid; place-items: center; font-size: 12px;
}
.al-card.is-off .al-src { filter: grayscale(.5) opacity(.6); }

.al-card__foot {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
}
.al-act {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 0 11px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink-3); font-family: var(--font-ui); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); cursor: pointer;
}
.al-act:hover { background: var(--surface-2); color: var(--ink); }
.al-act svg { display: block; }
.al-act--del { color: var(--crit); margin-left: auto; }
.al-act--del:hover { background: var(--crit-wash); color: var(--crit); }
.al-state {
  font-size: var(--fs-2xs); font-weight: var(--fw-extra); text-transform: uppercase;
  letter-spacing: var(--ls-label); font-family: var(--font-mono);
}
.al-state.is-on { color: var(--ok); }
.al-state.is-paused { color: var(--ink-faint); }

/* Confirmation de suppression, PAR-DESSUS la carte (pas de modale séparée) */
.al-card__confirm {
  position: absolute; inset: 0; z-index: 5; display: none; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--crit-wash);
  border: 1px solid color-mix(in srgb, var(--crit) 35%, transparent);
  border-radius: var(--r-md);
}
.al-card.is-confirming .al-card__confirm { display: flex; }
.al-card__confirm p {
  flex: 1; margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--ink); line-height: 1.25;
}
.al-btn-danger { background: var(--crit); border-color: var(--crit); color: #fff; }

/* ── États vides ───────────────────────────────────────────────── */
.al-noresult {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); color: var(--ink-3);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
}
.al-noresult.hidden { display: none; }
.al-noresult b { color: var(--ink); font-size: var(--fs-body); }
/* État vide : géré par .al-screen.is-empty (la colonne liste disparaît, le
   bandeau vide la remplace ; sur desktop l'éditeur reste visible à droite). */
.al-empty {
  display: none; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-4); padding: var(--sp-8) var(--sp-5);
}
.al-screen.is-empty .al-col-list { display: none; }
.al-screen.is-empty .al-empty { display: flex; }
.al-empty__ic {
  width: 76px; height: 76px; border-radius: 50%; background: var(--traceo-red-soft);
  color: var(--traceo-red); display: grid; place-items: center;
}
.al-empty__t {
  font-size: var(--fs-h3); font-weight: var(--fw-extra); color: var(--ink);
  letter-spacing: var(--ls-tight);
}
.al-empty__p {
  font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-snug);
  max-width: 320px; text-wrap: pretty; margin: 6px auto 0;
}
.al-empty__quick {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.al-erow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-1); cursor: pointer; text-align: left;
  font-family: var(--font-ui);
}
.al-erow:hover { border-color: var(--traceo-red); }
.al-erow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.al-erow__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.al-erow__s { font-size: var(--fs-2xs); color: var(--ink-3); font-family: var(--font-mono); }
.al-erow__go {
  flex-shrink: 0; color: var(--traceo-red); font-size: var(--fs-sm);
  font-weight: var(--fw-extra);
}

.al-foot {
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint);
  line-height: 1.5; padding: 0 2px;
}

/* ── Bouton flottant « Nouvelle » ──────────────────────────────── */
.al-fab {
  position: fixed; right: 18px; bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 45; display: inline-flex; align-items: center; gap: 8px; height: 52px;
  padding: 0 20px 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--traceo-red); color: var(--on-red); font-family: var(--font-ui);
  font-size: var(--fs-body); font-weight: var(--fw-bold); cursor: pointer;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--traceo-red) 60%, transparent), var(--sh-2);
}
.al-fab:hover { background: var(--traceo-red-press); }
.al-fab:active { transform: scale(.96); }
.al-fab.hidden { display: none; }
.al-fab svg { display: block; }
/* Desktop : plus de FAB (l'éditeur est toujours visible dans la colonne droite). */
@media (min-width: 900px) { .al-fab { display: none; } }

/* ── Menu contextuel « pause globale » ─────────────────────────── */
.al-menu-scrim { position: fixed; inset: 0; z-index: 70; background: transparent; }
.al-menu-scrim.hidden, .al-menu.hidden { display: none; }
.al-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 71; width: 258px;
  display: flex; flex-direction: column; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.al-menu__lbl {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--ink-faint); padding: 8px 10px 4px;
}
.al-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 11px 10px; border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--ink); cursor: pointer;
}
.al-menu button:hover { background: var(--surface-2); }
.al-menu button .al-em { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.al-menu button small {
  display: block; font-size: var(--fs-2xs); color: var(--ink-3);
  font-weight: var(--fw-medium);
}
.al-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; width: calc(100% - 12px); }
/* Bouton pause de l'en-tête, quand une pause globale est active */
.al-pause-on { background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }

/* ── Bottom sheet = éditeur complet ────────────────────────────── */
.al-scrim {
  position: fixed; inset: 0; z-index: 80; background: rgba(20, 12, 10, .45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
}
.al-scrim.is-open { opacity: 1; pointer-events: auto; }
.al-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; height: 92vh;
  display: flex; flex-direction: column; background: var(--canvas);
  border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px -8px rgba(40, 25, 20, .4);
  transform: translateY(100%); transition: transform var(--dur-slow) var(--ease-out);
}
.al-sheet.is-open { transform: translateY(0); }
.al-sheet__handle {
  width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong);
  margin: 10px auto 0; flex-shrink: 0;
}
.al-sheet__hd {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); flex-shrink: 0;
}
.al-sheet__ic {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--traceo-red-soft); color: var(--traceo-red);
  display: grid; place-items: center; flex-shrink: 0;
}
.al-sheet.is-editing .al-sheet__ic { background: var(--produit-wash); color: var(--produit-ink); }
.al-sheet__ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.al-sheet__title {
  font-size: var(--fs-h3); font-weight: var(--fw-extra); color: var(--ink);
  letter-spacing: var(--ls-tight); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.al-sheet__sub {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--ink-faint); font-family: var(--font-mono);
}
.al-sheet__x {
  width: 34px; height: 34px; border: 0; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2); cursor: pointer;
  font-size: 16px; flex-shrink: 0;
}
/* Reset ✕ de l'en-tête (desktop, mode édition seulement) : revient à « Nouvelle
   alerte » sans rien fermer. Masqué sur mobile (le sheet a son propre ✕ de
   fermeture). */
.al-sheet__reset {
  display: none; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2); cursor: pointer;
  font-size: 15px; flex-shrink: 0;
}
.al-sheet__reset:hover { background: var(--surface-3); }
.al-sheet__body {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.al-sheet__body::-webkit-scrollbar { display: none; }
.al-sheet__foot {
  flex-shrink: 0; display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); background: var(--surface);
}
.al-sheet__foot .tr-btn { flex: 1; }
.al-sheet__foot .tr-btn--secondary { flex: 0 0 auto; }

/* Champs de l'éditeur */
.al-fld { display: flex; flex-direction: column; gap: var(--sp-2); }
.al-fld.hidden { display: none; }
.al-fld__lbl {
  display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs);
  font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--ink-3);
}
.al-fld__lbl .al-num { color: var(--traceo-red); font-family: var(--font-mono); }
.al-fld__opt {
  margin-left: auto; font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  color: var(--ink-faint); text-transform: none; letter-spacing: 0;
}
.al-fld__hint { font-size: var(--fs-2xs); color: var(--ink-faint); line-height: 1.4; }

/* ① Cible : recherche + suggestions */
.al-srch { position: relative; display: flex; align-items: center; }
.al-srch > svg { position: absolute; left: 12px; color: var(--ink-faint); pointer-events: none; }
.al-srch input {
  width: 100%; height: 46px; padding: 0 12px 0 38px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface-2); font-family: var(--font-ui);
  font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--ink);
}
.al-srch input:focus {
  outline: none; border-color: var(--traceo-red); background: var(--surface);
  box-shadow: 0 0 0 3px var(--traceo-red-soft);
}
/* Pas d'ascenseur : les résultats en trop sont tronqués (JS, cf. alRenderSuggestions)
   plutôt que rendus défilables — le reste du formulaire (②③④ + boutons) doit
   rester visible sans scroll sur le panneau desktop. */
.al-sugg { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: hidden; }
.al-sugg__grp {
  font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--ink-faint); padding: 8px 4px 3px;
}
.al-sugg__row {
  display: flex; align-items: center; gap: var(--sp-3); padding: 9px 8px;
  border-radius: var(--r-sm); cursor: pointer; border: 0; background: transparent;
  font-family: var(--font-ui); text-align: left; width: 100%;
}
.al-sugg__row:hover { background: var(--surface-2); }
.al-sugg__b { flex: 1; min-width: 0; }
.al-sugg__t {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-sugg__t + .al-sugg__s { margin-left: 6px; }
.al-sugg__s { font-size: var(--fs-2xs); color: var(--ink-3); font-family: var(--font-mono); }
.al-sugg__tag { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ink-faint); flex-shrink: 0; }
.al-sugg__none { padding: 16px 8px; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }

.al-seltgt {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--traceo-red) 30%, var(--border));
  border-radius: var(--r-md); background: var(--traceo-red-soft);
}
.al-seltgt__b { flex: 1; min-width: 0; }
.al-seltgt__t { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink); }
.al-seltgt__s { font-size: var(--fs-2xs); color: var(--ink-3); font-family: var(--font-mono); }
.al-seltgt__chg {
  border: 0; background: var(--surface); color: var(--ink-2); height: 34px;
  padding: 0 13px; border-radius: var(--r-pill); font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; flex-shrink: 0;
}

/* Aperçu de valeur (7 jours d'historique réel) */
.al-aper {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--produit-wash);
  border: 1px solid color-mix(in srgb, var(--produit) 30%, var(--border));
}
.al-aper--empty { background: var(--surface-2); border-color: var(--border); }
.al-aper__n {
  font-family: var(--font-mono); font-size: 30px; font-weight: var(--fw-extra);
  line-height: 1; color: var(--produit-ink); flex-shrink: 0;
}
.al-aper__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-aper__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.al-aper__s { font-size: var(--fs-2xs); color: var(--ink-3); line-height: 1.35; }

/* Segments internes de l'éditeur */
.al-seg {
  display: flex; gap: 3px; padding: 3px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.al-seg button {
  flex: 1; appearance: none; border: 0; background: transparent; color: var(--ink-3);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  min-height: 40px; padding: 0 6px; border-radius: var(--r-xs); cursor: pointer;
}
.al-seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.al-seg--preset button.is-on { background: var(--traceo-red); color: var(--on-red); }

/* ② Planning */
.al-autobox {
  display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3);
  border-radius: var(--r-md); background: var(--surface-2);
  border: 1px dashed var(--border-strong);
}
.al-autobox__ic { color: var(--produit-ink); flex-shrink: 0; }
.al-autobox p { margin: 0; font-size: var(--fs-2xs); color: var(--ink-2); line-height: 1.45; }
.al-autobox b { color: var(--ink); }
.al-dayrow { display: flex; gap: 5px; }
.al-daychip {
  flex: 1; height: 40px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-3); font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: var(--fw-extra); cursor: pointer;
}
.al-daychip.is-on { border-color: var(--traceo-red); background: var(--traceo-red-soft); color: var(--traceo-red); }
.al-plages { display: flex; flex-direction: column; gap: 8px; }
.al-plage {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-2) 6px var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface);
}
.al-plage input[type="time"] {
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-sm);
  font-weight: var(--fw-bold); color: var(--ink); padding: 7px 6px; min-width: 0;
}
.al-plage input[type="time"]:focus { outline: none; border-color: var(--traceo-red); }
.al-plage__arr { color: var(--ink-faint); font-weight: var(--fw-bold); }
.al-plage__x {
  margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 15px;
  flex-shrink: 0;
}
.al-plage__x:hover { background: var(--crit-wash); color: var(--crit); }
.al-addrow {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  min-height: 42px; padding: 0 16px; border: 1px dashed var(--border-strong);
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  cursor: pointer;
}
.al-addrow:hover { background: var(--surface-3); }

/* ③ Déclencheurs */
.al-presetcap { font-size: var(--fs-2xs); color: var(--ink-3); }
.al-presetcap b { color: var(--ink); }
.al-adv { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.al-adv__tog {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: var(--sp-3);
  border: 0; background: var(--surface-2); font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-2); cursor: pointer;
}
.al-adv__tog svg { margin-left: auto; transition: transform var(--dur-fast) var(--ease-out); }
.al-adv.is-open .al-adv__tog svg { transform: rotate(180deg); }
.al-adv__body {
  display: none; flex-direction: column; gap: var(--sp-4); padding: var(--sp-3);
  border-top: 1px solid var(--border);
}
.al-adv.is-open .al-adv__body { display: flex; }
.al-advrow { display: flex; flex-direction: column; gap: var(--sp-2); }
.al-advrow__hd { display: flex; align-items: center; gap: 9px; }
.al-advrow__ic {
  width: 30px; height: 30px; border-radius: var(--r-xs); display: grid;
  place-items: center; flex-shrink: 0;
}
.al-advrow__ic--idfm { background: var(--info); color: #fff; }
.al-advrow__ic--commu { background: var(--estime-wash); color: var(--estime); }
.al-advrow__ic--retard { background: var(--warn-wash); color: var(--warn); }
.al-advrow__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); flex: 1; }
.al-advrow__hint { font-size: var(--fs-2xs); color: var(--ink-3); line-height: 1.4; }

/* ④ Canaux */
.al-chans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.al-chan {
  display: flex; align-items: center; gap: 9px; padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; text-align: left;
  font-family: var(--font-ui); width: 100%;
}
.al-chan.is-on { border-color: var(--traceo-red); background: var(--traceo-red-soft); }
.al-chan__ic { font-size: 16px; flex-shrink: 0; }
.al-chan__t { flex: 1; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.al-chan__t small {
  display: block; font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  color: var(--ink-faint); text-transform: none;
}
/* Grisé = éteint par « Silencieux » ; barré-pointillé = pas encore livrable */
.al-chan.is-dim { opacity: .4; pointer-events: none; }
.al-chan.is-soon { border-style: dashed; cursor: not-allowed; opacity: .72; }
.al-chan__ck {
  width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border-strong);
  flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 10px;
  font-weight: var(--fw-extra);
}
.al-chan.is-on .al-chan__ck { background: var(--traceo-red); border-color: var(--traceo-red); }
.al-chan.is-on .al-chan__ck::after { content: "✓"; }

/* Historique réel des déclenchements */
.al-histrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface);
}
.al-histrow__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.al-histrow__dot--idfm { background: var(--info); }
.al-histrow__dot--commu { background: var(--estime); }
.al-histrow__dot--retard { background: var(--warn); }
.al-histrow__b { flex: 1; min-width: 0; }
.al-histrow__t {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-histrow__d {
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-3);
  flex-shrink: 0;
}

/* Toast avec action (annuler une suppression) — complète le toast global */
.toast__action {
  border: 0; background: color-mix(in srgb, var(--surface) 22%, transparent);
  color: inherit; font-family: var(--font-ui); font-weight: var(--fw-extra);
  font-size: var(--fs-xs); padding: 6px 12px; border-radius: var(--r-pill);
  cursor: pointer; margin-left: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP (≥900px) — maquette design_handoff_traceo/ui_kits/alertes/desktop.html
   Maître-détail : liste groupée à gauche (colonne fluide), éditeur inline sticky
   à droite (420px). L'en-tête de marque partagé (.app-header) tient lieu de
   topbar ; ici on ne fait que l'écran. Le bottom sheet mobile redevient une
   simple colonne de grille ; le FAB et les scrims disparaissent.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  #app.alerts-wide { max-width: 1280px; }

  /* Bascules d'affichage mobile → desktop */
  .al-only-desk { display: inline; }
  .al-search { display: flex; }
  .al-srcfilter__pre { display: inline; }
  .al-srcrow__lbl { display: inline-flex; }
  .al-list { display: none; }                         /* liste à plat masquée */
  .al-groups { display: flex; flex-direction: column; gap: var(--sp-5); }
  .al-scrim { display: none; }                         /* pas de backdrop */
  .al-toolbar__lbl { display: none; }                  /* remplacé par la recherche */

  .al-screen { gap: var(--sp-5); }
  .al-pagehd { align-items: flex-end; padding-bottom: var(--sp-2); }
  .al-pagehd__title { font-size: var(--fs-h1); }

  /* Bouton pause : pilule textuelle + libellé dynamique */
  .al-pause-btn {
    width: auto; height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  }
  .al-pause-lbl { display: inline; }
  .al-menu { width: 268px; }

  /* ── Grille maître-détail ── */
  .al-alerts {
    display: grid; grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--sp-5) var(--sp-6); align-items: start;
  }
  /* grid-column: 2 explicite → l'éditeur reste dans la colonne droite même en
     état vide (où le bandeau occupe 1/-1 et la colonne liste disparaît). */
  .al-col-edit { display: block; grid-column: 2; position: sticky; top: 88px; min-width: 0; }

  /* ── Barre d'outils : recherche + segment sur une ligne, sources dessous ── */
  .al-toolbar__top { justify-content: flex-start; flex-wrap: nowrap; }
  .al-search {
    flex: 1; min-width: 0; position: relative; align-items: center;
  }
  .al-search > svg { position: absolute; left: 14px; color: var(--ink-faint); pointer-events: none; }
  .al-search input {
    width: 100%; height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--surface); font-family: var(--font-ui);
    font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink);
  }
  .al-search input::placeholder { color: var(--ink-faint); font-weight: var(--fw-medium); }
  .al-search input:focus {
    outline: none; border-color: var(--traceo-red); box-shadow: 0 0 0 3px var(--traceo-red-soft);
  }

  /* Sources et raccourcis : flex-wrap (plus de scroll horizontal), alignés */
  .al-srcrow { overflow: visible; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
  .al-quick { overflow: visible; flex-wrap: wrap; margin: 0; padding: 0; }
  .al-rule { display: block; flex: 1; height: 1px; background: color-mix(in srgb, var(--border) 70%, transparent); }

  /* ── Groupes par cible ── */
  .al-grp { display: flex; flex-direction: column; gap: var(--sp-3); }
  .al-grp__hd { display: flex; align-items: center; gap: var(--sp-2); padding: 0 2px; min-height: 24px; }
  .al-grp__count {
    font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-extra);
    color: var(--ink-faint); background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 1px 8px;
  }
  .al-grp__rule { flex: 1; height: 1px; background: color-mix(in srgb, var(--border) 70%, transparent); }
  .al-glist { display: flex; flex-direction: column; gap: var(--sp-3); }
  .al-groups.is-paused { opacity: .62; }

  /* ── Carte dense (une ligne) — cliquable pour sélectionner ── */
  .al-gcard {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--sh-1); cursor: pointer; overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
                opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
  }
  .al-gcard:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
  .al-gcard:focus-visible { outline: none; border-color: var(--traceo-red); box-shadow: 0 0 0 3px var(--traceo-red-soft); }
  .al-gcard.is-sel { border-color: var(--traceo-red); box-shadow: 0 0 0 3px var(--traceo-red-soft), var(--sh-2); }
  .al-gcard.is-off { background: var(--surface-2); box-shadow: none; }
  .al-gcard.is-off:hover { box-shadow: var(--sh-1); }
  .al-gcard__main { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .al-gcard__tgt { flex-shrink: 0; }
  .al-gcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .al-gcard__name {
    font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .al-gcard.is-off .al-gcard__name { color: var(--ink-3); }
  .al-gcard__kind {
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase;
    letter-spacing: var(--ls-label); color: var(--ink-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .al-gcard__state {
    font-size: var(--fs-2xs); font-weight: var(--fw-extra); text-transform: uppercase;
    letter-spacing: var(--ls-label); font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0;
  }
  .al-gcard__state.is-on { color: var(--ok); }
  .al-gcard__state.is-paused { color: var(--ink-faint); }
  .al-gcard__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 var(--sp-4) var(--sp-3); }
  .al-metasep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
  .al-gcard.is-off .al-src, .al-gcard.is-off .al-when, .al-gcard.is-off .al-stat { filter: grayscale(.4) opacity(.7); }
  .al-gcard__del {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px; min-height: 30px;
    padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent;
    color: var(--ink-faint); font-family: var(--font-ui); font-size: var(--fs-2xs);
    font-weight: var(--fw-bold); cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .al-gcard__del:hover { background: var(--crit-wash); color: var(--crit); }
  .al-gcard__del svg { display: block; }
  .al-gcard__confirm {
    position: absolute; inset: 0; z-index: 5; display: none; align-items: center; gap: var(--sp-3);
    padding: 0 var(--sp-4); background: var(--crit-wash);
    border: 1px solid color-mix(in srgb, var(--crit) 35%, transparent); border-radius: var(--r-md);
  }
  .al-gcard.is-confirming .al-gcard__confirm { display: flex; }
  .al-gcard__confirm p { flex: 1; margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }

  /* ── État vide : bandeau dans la colonne gauche, l'éditeur reste à droite ── */
  .al-empty {
    grid-column: 1; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--sp-8) var(--sp-5);
  }
  .al-empty__t { font-size: var(--fs-h2); }
  .al-empty__p { font-size: var(--fs-body); max-width: 440px; }
  .al-empty__quick { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .al-empty__quick .al-label { flex-basis: 100%; text-align: center; }
  .al-empty .al-erow { min-width: 220px; flex: 0 1 auto; }

  /* ── Éditeur inline : le bottom sheet redevient un panneau statique sticky ── */
  .al-col-edit .al-sheet {
    position: static; left: auto; right: auto; bottom: auto; top: auto;
    transform: none; opacity: 1; height: auto; max-height: calc(100vh - 112px);
    width: auto; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-2); transition: border-color var(--dur-fast) var(--ease-out);
  }
  .al-col-edit .al-sheet.is-editing { border-color: color-mix(in srgb, var(--traceo-red) 40%, var(--border)); }
  .al-sheet__handle { display: none; }
  .al-sheet__x { display: none; }                       /* pas de fermeture : reset à la place */
  .al-sheet.is-editing .al-sheet__reset { display: block; }
  .al-sheet__hd { border-bottom: 1px solid var(--border); padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .al-sheet__foot {
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: var(--sp-3);                         /* plus de safe-area : pas de sheet */
  }
}