/* ==========================================================================
   Alerte — confirmation, erreur, saisie (#1762)
   --------------------------------------------------------------------------
   La boîte qui remplace SweetAlert : pastille de couleur à gauche, titre et texte à côté, boutons
   en bas à droite. Pas de barre de titre ni de croix : une alerte se ferme par l'un de ses
   boutons (ou Échap, quand il vaut « Annuler »).

   <dialog class="ds-alerte ds-alerte--danger" data-testid="alerte">
     <div class="ds-alerte__panneau">
       <div class="ds-alerte__haut">
         <span class="ds-alerte__pastille"><i class="fa fa-exclamation"></i></span>
         <div class="ds-alerte__contenu">
           <h2 class="ds-alerte__titre">Supprimer cette action ?</h2>
           <div class="ds-alerte__texte">…</div>
           <input class="ds-input ds-alerte__champ">   <p class="ds-alerte__erreur"></p>
         </div>
       </div>
       <div class="ds-alerte__pied"><button class="ds-btn …">Annuler</button>…</div>
     </div>
   </dialog>

   Types : warning / danger (orange, rouge), error (rouge), success (vert), info, question (bleu).
   Comportement : alerte.js (DS.Alerte) ; pour l'ancien code, common/crm_common_swal.js (`swal()`).
   Chargé sur toutes les pages par printGlobalDsAssets().
   ========================================================================== */

.ds-alerte {
  width: min(440px, calc(100vw - 2 * var(--ds-space-4, 16px)));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-color-text, #141a1f);
  font-family: var(--ds-font-sans, "Open Sans", sans-serif);
  font-size: var(--ds-font-size-md, 14px);
  overflow: visible;
}
.ds-alerte::backdrop { background: rgba(20, 26, 31, .45); }

.ds-alerte__panneau {
  background: var(--ds-color-bg-surface, #ffffff);
  border: 1px solid var(--ds-color-border, #dde2e7);
  border-radius: var(--ds-radius-lg, 10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.ds-alerte[open] .ds-alerte__panneau { animation: ds-alerte-in 140ms ease-out; }
@keyframes ds-alerte-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ds-alerte__haut {
  display: flex;
  gap: var(--ds-space-4, 16px);
  padding: var(--ds-space-5, 20px) var(--ds-space-5, 20px) var(--ds-space-4, 16px);
}
.ds-alerte__pastille {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
}
.ds-alerte--warning .ds-alerte__pastille { background: var(--ds-color-warning-soft, #fef3e6); color: var(--ds-color-warning-strong, #d68b3a); }
.ds-alerte--danger  .ds-alerte__pastille,
.ds-alerte--error   .ds-alerte__pastille { background: var(--ds-color-danger-soft, #fde6e9); color: var(--ds-color-danger-strong, #c93a4a); }
.ds-alerte--success .ds-alerte__pastille { background: var(--ds-color-success-soft, #e6f7f3); color: var(--ds-color-success-strong, #138271); }
.ds-alerte--info    .ds-alerte__pastille,
.ds-alerte--question .ds-alerte__pastille { background: var(--ds-color-info-soft, #e3f7f7); color: var(--ds-color-info-strong, #1a9799); }

.ds-alerte__contenu { flex: 1; min-width: 0; padding-top: 6px; }
.ds-alerte__titre {
  margin: 0 0 var(--ds-space-1, 4px);
  font-size: var(--ds-font-size-lg, 16px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ds-color-text, #141a1f);
  overflow-wrap: anywhere;
}
.ds-alerte__texte { line-height: 1.5; overflow-wrap: anywhere; }
/* Un texte simple garde ses retours à la ligne (« Échecs :\n… ») — SweetAlert 1 les rendait en <br>. */
.ds-alerte__texte--simple { white-space: pre-line; }
.ds-alerte__texte[hidden] { display: none; }
.ds-alerte__champ { width: 100%; margin-top: var(--ds-space-3, 12px); }
.ds-alerte__champ[hidden] { display: none; }
.ds-alerte__champ[aria-invalid="true"] { border-color: var(--ds-color-danger, #ed5565); }
.ds-alerte__erreur {
  margin: var(--ds-space-1, 4px) 0 0;
  color: var(--ds-color-danger-strong, #c93a4a);
  font-size: var(--ds-font-size-sm, 12px);
}
.ds-alerte__erreur[hidden] { display: none; }

.ds-alerte__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-space-2, 8px);
  padding: 0 var(--ds-space-5, 20px) var(--ds-space-4, 16px);
}
.ds-alerte__pied[hidden] { display: none; }
/* Un geste qui travaille (envoi en cours) : boutons inactifs, le principal le montre. */
.ds-alerte--occupee .ds-alerte__pied [data-role="confirmer"] { cursor: progress; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .ds-alerte[open] .ds-alerte__panneau { animation: none; }
}