/* ═══════════════════════════════════════════════════════════════════════
   dialog.css — Les pop-up d'Astraema
   ───────────────────────────────────────────────────────────────────────
   À QUOI ÇA SERT
   Le navigateur sait afficher des messages tout seul (les fenêtres grises
   qui disent « astraema.onrender.com diz… »). Elles sont laides, elles ne
   ressemblent pas au site, et on ne peut rien y changer.

   Ce fichier habille des pop-up faites maison, aux couleurs d'Astraema :
   bleu nuit #172852 pour les titres, doré #D4A048 pour le bouton principal.

   Il est chargé par base.html, donc il vaut pour TOUTES les pages.
   Le comportement, lui, est dans static/js/astra_dialog.js.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Le voile sombre qui couvre la page ─────────────────────────────── */
.astraDlgVoile{
  position: fixed;
  inset: 0;
  z-index: 10000;                      /* au-dessus de tout, roue comprise */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 40, 82, 0.42);  /* bleu Astraema très transparent */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: astraDlgVoileEntre .16s ease-out;
}
@keyframes astraDlgVoileEntre{ from{ opacity: 0; } to{ opacity: 1; } }


/* ── La carte blanche ───────────────────────────────────────────────── */
.astraDlg{
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 24px 26px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(23, 40, 82, 0.28);
  font-family: inherit;
  animation: astraDlgEntre .18s cubic-bezier(.2, .8, .3, 1);
}
@keyframes astraDlgEntre{
  from{ opacity: 0; transform: translateY(10px) scale(.98); }
  to  { opacity: 1; transform: none; }
}

/* Filet de couleur en haut de la carte : c'est lui qui dit d'un coup d'œil
   s'il s'agit d'une information, d'un avertissement ou d'un problème. */
.astraDlg::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: #D4A048;                 /* doré = information, par défaut */
}
.astraDlg[data-ton="danger"]::before{ background: #b5253a; }   /* rouge */
.astraDlg[data-ton="succes"]::before{ background: #3f8f6b; }   /* vert   */


/* ── Titre, message ─────────────────────────────────────────────────── */
.astraDlgTitre{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: #172852;
}
/* Texte justifié : réservé aux longs textes de présentation, qui se
   lisent mieux au carré. Un message court reste aligné à gauche. */
.astraDlgMsg--justifie{ text-align: justify; hyphens: auto; }

.astraDlgMsg{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3a4356;
  white-space: pre-line;               /* respecte les retours à la ligne */
  overflow-wrap: anywhere;             /* un long lien ne déborde pas */
}


/* ── Champ de saisie (pour les pop-up qui posent une question) ──────── */
.astraDlgLabel{
  display: block;
  margin: 16px 0 6px;
  font-size: 12px;
  color: #6b7280;
}
.astraDlgInput{
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #ccd2dd;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  color: #172852;
}
.astraDlgInput:focus{ outline: none; border-color: #D4A048; }


/* ── Les boutons ────────────────────────────────────────────────────── */
.astraDlgBtns{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.astraDlgBtn{
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.astraDlgBtn:focus-visible{ outline: 2px solid #172852; outline-offset: 2px; }

/* Bouton secondaire : Annuler, Fermer */
.astraDlgBtn--gris{ background: #f1f2f4; color: #5a6172; border-color: #e2e5ea; }
.astraDlgBtn--gris:hover{ background: #e6e8ec; }

/* Bouton principal : OK, Enregistrer */
.astraDlgBtn--or{ background: #D4A048; color: #fff; }
.astraDlgBtn--or:hover{ background: #c2913f; }

/* Bouton principal quand l'action détruit quelque chose : Supprimer */
.astraDlgBtn--rouge{ background: #b5253a; color: #fff; }
.astraDlgBtn--rouge:hover{ background: #9d1f32; }


/* ── Téléphone : la carte prend la largeur, les boutons aussi ───────── */
@media (max-width: 480px){
  .astraDlg{ padding: 20px 18px 16px; }
  .astraDlgBtns{ flex-direction: column-reverse; }
  .astraDlgBtn{ width: 100%; padding: 12px 18px; font-size: 14px; }
}