/* ============================================================================
   cab-alerte : le bandeau qui informe, avertit ou signale une panne.

   CE QUI GOUVERNE LE DESSIN

   1. LE TON NE SE LIT JAMAIS À LA SEULE COULEUR. La charte Cabestian a mesuré
      que le rouge et l'ambre sont indistinguables en deutéranopie (écart
      insuffisant pour un daltonien rouge-vert). Chaque alerte porte donc un
      pictogramme dont la FORME change avec le ton (cercle-i, coche, triangle,
      croix), pas seulement sa teinte, et le mot lui-même (« Avertissement »,
      « Erreur ») fait partie de l'usage attendu, voir card.md. La couleur
      (fond teinté, filet, barre) ne reste qu'un renfort, jamais le seul canal.
   2. CE N'EST PAS UN TOAST. cab-alerte vit DANS le flux de la page, à côté du
      contenu qu'elle concerne, et y reste tant qu'on ne l'a pas refermée ou
      que sa cause n'a pas disparu. Un message éphémère qui surgit et s'efface
      tout seul est un objet différent (empilement, timer, région live à part)
      que ce module ne fournit pas.
   3. Sobriété : pas de dégradé, pas d'ombre décorative. La barre de gauche et
      le fond légèrement teinté suffisent à signaler, la forme du pictogramme
      fait le reste.
   ============================================================================ */

:where(:root),
:where([data-cab-theme]) {
  --caba-fond:    var(--cab-surface, #FFFFFF);
  --caba-encre:   var(--cab-ink, #06121A);
  --caba-douce:   var(--cab-ink-2, #4D5B68);
  --caba-filet:   var(--cab-line, #E7E9EC);
  --caba-accent:  var(--cab-accent, #9A1B38);
  --caba-sans:    var(--cab-font-sans, system-ui, sans-serif);
  --caba-radius:  var(--cab-radius-sm, 10px);
  --caba-ease:    var(--cab-ease-out, cubic-bezier(0, 0, .2, 1));

  --caba-info-vif:    var(--cab-info, #3B82F6);
  --caba-info-ink:    var(--cab-info-ink, #2D5FB8);
  --caba-succes-vif:  var(--cab-ok, #0E9F6E);
  --caba-succes-ink:  var(--cab-ok-ink, #0B7A55);
  --caba-attn-vif:    var(--cab-warn, #E0A106);
  --caba-attn-ink:    var(--cab-warn-ink, #8A6A00);
  --caba-danger-vif:  var(--cab-danger, #E5484D);
  --caba-danger-ink:  var(--cab-danger-ink, #C2334A);
}

.cab-alerte {
  /* Défauts neutres, sur le modèle de cab-badge : --caba-vif et --caba-ink
     doivent toujours résoudre à quelque chose, même sans data-ton, plutôt que
     de rendre invalides le fond et la bordure qui s'appuient dessus. */
  --caba-vif: var(--caba-filet);
  --caba-ink: var(--caba-douce);

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* 17px à gauche : 14px de respiration + la barre de 3px qui se pose dessus. */
  padding: 12px 14px 12px 17px;
  border: 1px solid color-mix(in srgb, var(--caba-vif) 24%, var(--caba-filet));
  border-radius: var(--caba-radius);
  background: color-mix(in srgb, var(--caba-vif) 6%, var(--caba-fond));
  color: var(--caba-encre);
  font-family: var(--caba-sans);
  transition: opacity 180ms var(--caba-ease);
}

/* La barre pleine, premier signal visible en survolant une page du regard.
   Arrondie sur ses deux coins gauches plutôt que de compter sur un
   `overflow: hidden` du conteneur, qui aurait aussi rogné l'anneau de focus
   du bouton fermer posé près du bord droit. */
.cab-alerte::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--caba-radius) 0 0 var(--caba-radius);
  background: var(--caba-vif);
}

/* --- les quatre tons --------------------------------------------------- */

.cab-alerte[data-ton="information"] { --caba-vif: var(--caba-info-vif); --caba-ink: var(--caba-info-ink); }
.cab-alerte[data-ton="succes"]      { --caba-vif: var(--caba-succes-vif); --caba-ink: var(--caba-succes-ink); }
.cab-alerte[data-ton="avertissement"] { --caba-vif: var(--caba-attn-vif); --caba-ink: var(--caba-attn-ink); }
.cab-alerte[data-ton="erreur"]      { --caba-vif: var(--caba-danger-vif); --caba-ink: var(--caba-danger-ink); }

/* --- le pictogramme : le canal qui ne dépend pas de la couleur ---------- */

.cab-alerte__icone {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--caba-ink);
}

/* --- le corps ------------------------------------------------------------ */

.cab-alerte__corps { flex: 1; min-width: 0; }

.cab-alerte__titre {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--caba-encre);
}

.cab-alerte__texte {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--caba-douce);
}
.cab-alerte__texte:first-child { margin-top: 0; }

.cab-alerte__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* --- fermer --------------------------------------------------------------- */

.cab-alerte__fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--caba-douce);
  cursor: pointer;
  transition: background-color 120ms var(--caba-ease), color 120ms var(--caba-ease);
  -webkit-tap-highlight-color: transparent;
}
.cab-alerte__fermer:hover { background: color-mix(in srgb, var(--caba-encre) 8%, transparent); color: var(--caba-encre); }
/* Réponse à la pression, pas au relâchement (apple-design §1) : la cible réagit à
   l'instant où le doigt la touche, sans attendre le clic. Ajouté le 2026-08-19. */
.cab-alerte__fermer:active { background: color-mix(in srgb, var(--caba-encre) 16%, transparent); transform: scale(.94); }

.cab-alerte__fermer:focus-visible { outline: 2px solid var(--caba-accent); outline-offset: 1px; }
.cab-alerte__fermer svg { width: 11px; height: 11px; }

/* --- fermeture ------------------------------------------------------------
   L'alerte ne fournit aucun JavaScript : c'est l'hôte qui pose cet attribut
   au clic sur [data-alerte="fermer"], attend la fin de la transition (ou un
   court délai en secours) puis retire l'élément. Voir demo.html. */
.cab-alerte[data-fermee] {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cab-alerte { transition: none; }
  .cab-alerte__fermer { transition: none; }
}