/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS — alertes, encarts et fenêtres
   ───────────────────────────────────────────────────────────────────────
   Trois familles, un seul vocabulaire visuel : mêmes coins, même ombre,
   mêmes teintes par nature. Elles se distinguent par leur PLACE, non par
   leur apparence :

     .alert    une phrase, dans le flux de la page
     .infobox  un message titré, dans le flux
     .mdl      une fenêtre, qui s'interpose

   AUCUNE DÉPENDANCE : ni framework, ni police, ni script pour les deux
   premières. Les fenêtres demandent quelques lignes de JavaScript, données
   en exemple dans `exemples/`.

   ── VARIABLES ────────────────────────────────────────────────────────
   Redéfinissez-les si votre projet a sa propre palette ; les valeurs par
   défaut ci-dessous suffisent à faire fonctionner la feuille seule.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bordure:    #dee2e6;
  --gris:       #6c757d;
  --texte:      #1a1a2e;
  --vert:       #5A2925;   /* couleur principale */
  --vert-pale:  #F6ECEA;
  --jaune:      #F1993E;   /* accent, avertissements */
  --rouge:      #C8102E;
  --bleu:       #2F6FB0;   /* information */
}

.alert {
  position: relative;
  background: #fff;
  border: 1px solid var(--bordure, #dee2e6);
  border-left-width: 4px;
  border-left-color: #2F6FB0;
  /* Mêmes coins et même ombre que les fenêtres (`.mdl-boite`) : un encart
     est une notification qui reste en place, une fenêtre une notification
     qui s'interpose. Les distinguer visuellement n'apportait rien, et le
     décalage se remarquait quand les deux se côtoyaient. */
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  color: var(--texte);
  padding: .8rem 1rem .8rem 1.05rem;
  margin-bottom: 1rem;
  font-size: .87rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;   /* un message long ne recentre pas l'icône */
  gap: .6rem;
}

/* La première icône du message sert de pastille : on la remonte
   légèrement pour qu'elle s'aligne sur la première ligne de texte. */
.alert > :first-child { flex-shrink: 0; }

.alert a { color: #2F6FB0; font-weight: 700; }
.alert strong { color: inherit; }

/* Accent par nature. Seule la barre gauche change : le fond reste blanc,
   comme les encarts de liste. */
/* La couleur porte sur la BARRE et sur un liseré de fond très pâle —
   même teinte que l'en-tête des fenêtres, à intensité réduite : un encart
   reste dans le flux de lecture, il ne doit pas capter comme une fenêtre
   qui s'ouvre. */
.alert-success { border-left-color: #1e7e34;   background: #f6fbf7; }
.alert-error   { border-left-color: var(--rouge); background: #fdf7f7; }
.alert-warning { border-left-color: var(--jaune); background: #fffdf5; }
.alert-info    { border-left-color: #2F6FB0;   background: #f8fafd; }


/* ═══════════════════════════════════════════════════════════════════════
   FENÊTRES DE NOTIFICATION — style commun
   ───────────────────────────────────────────────────────────────────────
   Une seule définition pour toutes les fenêtres du projet : avertissement
   de caisses ouvertes, panneau de workflow, confirmations.

   ⚠ L'OUVERTURE SE FAIT PAR CLASSE, jamais par un `style="display:flex"`
   écrit dans la balise. Un style d'attribut prime sur la feuille du
   navigateur, où `[hidden]` vaut `display:none` : la couche sombre restait
   alors affichée en permanence, invisible, et interceptait TOUS les clics
   de la page — les boutons semblaient ne plus réagir.

       <div class="mdl">…</div>          fermée
       <div class="mdl ouvert">…</div>   ouverte, centrée
   ═══════════════════════════════════════════════════════════════════════ */

.mdl {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .45);
  padding: 1rem;
  /* Centrage vertical ET horizontal : une fenêtre collée en haut oblige à
     chercher des yeux, et sur un écran haut elle paraît tomber. */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.mdl.ouvert { display: flex; }

.mdl-boite {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  /* La fenêtre ne doit pas surgir : une apparition instantanée fait
     manquer le changement de contexte. */
  animation: mdl-entree .16s ease-out;
}
@keyframes mdl-entree {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.mdl-tete {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--bordure, #dee2e6);
  border-radius: 14px 14px 0 0;
}
.mdl-tete h2 { margin: 0; font-size: 1.05rem; }
.mdl-tete-alerte { background: #fff3cd; }
.mdl-tete-alerte h2 { color: #856404; }

.mdl-corps { padding: 1.1rem 1.2rem; }
.mdl-pied {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  margin-top: 1rem;
}

/* Fenêtre large, pour un contenu tabulaire. */
.mdl-large .mdl-boite { max-width: 860px; }

@media (max-width: 560px) {
  .mdl { padding: .5rem; align-items: flex-start; padding-top: 2rem; }
  .mdl-boite { max-height: 92vh; }
}


/* ── Encart à en-tête, pour un message long ───────────────────────────
   Reprend la structure d'une fenêtre — bandeau de tête, corps — mais dans
   le flux de la page. À employer quand le message porte un titre et
   plusieurs lignes ; un `.alert` simple suffit pour une phrase.

       <div class="infobox infobox-alerte">
         <div class="infobox-tete"><h3>Titre</h3></div>
         <div class="infobox-corps">…</div>
       </div>
*/
.infobox {
  background: #fff;
  border: 1px solid var(--bordure, #dee2e6);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  margin-bottom: 1.2rem;
  overflow: hidden;
}
.infobox-tete {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--bordure, #dee2e6);
  background: #f8fafd;
}
.infobox-tete h3 {
  margin: 0;
  font-size: .95rem;
  color: var(--vert, #5A2925);
  display: flex; align-items: center; gap: .45rem;
}
.infobox-corps { padding: .9rem 1rem; font-size: .87rem; line-height: 1.55; }
.infobox-corps > :first-child { margin-top: 0; }
.infobox-corps > :last-child { margin-bottom: 0; }

.infobox-alerte  .infobox-tete { background: #fff3cd; border-bottom-color: #ffc107; }
.infobox-alerte  .infobox-tete h3 { color: #856404; }
.infobox-erreur  .infobox-tete { background: #fdf0f0; border-bottom-color: var(--rouge, #C8102E); }
.infobox-erreur  .infobox-tete h3 { color: var(--rouge, #C8102E); }
.infobox-succes  .infobox-tete { background: #f0f9f2; border-bottom-color: #1e7e34; }
.infobox-succes  .infobox-tete h3 { color: #1e7e34; }


/* ── Bouton minimal ───────────────────────────────────────────────────
   Fourni pour que les exemples fonctionnent tels quels. Si votre projet a
   ses propres boutons, SUPPRIMEZ ce bloc : il n'est pas nécessaire au
   fonctionnement des notifications. */
.ntf-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .9rem; border: 1px solid var(--bordure); border-radius: 8px;
  background: #fff; color: var(--texte); font: inherit; font-size: .87rem;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.ntf-btn:hover { border-color: var(--bleu); color: var(--bleu); }
.ntf-btn-primaire { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.ntf-btn-primaire:hover { opacity: .92; color: #fff; }
.ntf-btn-danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.ntf-btn-danger:hover { opacity: .92; color: #fff; }

/* ─────────────────────────────────────────────────────────────────────
   Adaptation à la palette de GestLocation.
   Le README du modèle invite à redéfinir ces variables plutôt qu'à
   modifier la feuille : la couleur principale du modèle (#5A2925) ne
   correspond pas à l'identité bleue de cette application.
   ───────────────────────────────────────────────────────────────────── */
:root {
  --bordure:   #e2e8f0;
  --gris:      #64748b;
  --texte:     #0f172a;
  --vert:      #2563eb;   /* couleur principale de l'application */
  --vert-pale: #eff6ff;
  --jaune:     #d97706;   /* avertissements */
  --rouge:     #dc2626;
  --bleu:      #2563eb;   /* information */
}