/* ==========================================================================
   MODAL-PROJET.CSS — Styles des modals génériques pour la page Compte
   ==========================================================================
   RÔLE :
     - Définit l’apparence des modals utilisés exclusivement dans :
         * /compte/index.html
     - Utilisé pour : création de projet, édition, duplication, suppression.
     - Gère uniquement la famille de modals "modal-generic".

   SÉPARATION STRICTE :
     - Ne JAMAIS importer ou utiliser ce fichier dans les pages Modules.
     - Les modals des Modules utilisent exclusivement : modal.css
     - Ne jamais mélanger .modal-generic et .modal / .modal-content (modules).

   DÉPENDANCES :
     - Fonctionnalités assurées par modal.js :
         * configureAndOpenModal() (génération HTML dynamique)
         * closeModal("modal-generic")
     - Structure HTML générée au runtime — ce fichier ne doit jamais styliser
       les modals universels #modal-universel.

   ZONES SENSIBLES :
     - Les classes .modal-generic, .modal-generic-content, .modal-generic-backdrop
       sont réservées au dashboard Compte.
     - Toute modification affecte directement l’expérience utilisateur
       de la gestion de projets.

   RÈGLES DE MODIFICATION :
     - Ne pas ajouter de styles globaux ou liés aux modules.
     - Ne pas renommer les classes existantes sans analyse d’impact.
     - Toute modification suit le workflow Planif.education :
         * une seule action à la fois
         * analyse → validation → implémentation → test

   NOTE :
     - Ce fichier protège la séparation architecturale entre les deux systèmes
       de modals. Toute confusion peut entraîner des conflits CSS majeurs.
   ========================================================================== */


.modal-generic {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--espace-lg);
  background: rgba(0,0,0,0.45);
  z-index: 5000;
}

.modal-generic.active {
  display: flex;
}

.modal-generic-content {
  background: var(--c-surface-1);
  border-radius: var(--radius);
  border: 1px solid var(--c-border-subtle);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 16px rgba(0,0,0,0.08);

  padding: var(--espace-lg);
  width: 90%;
  max-width: 640px;

  position: relative;

  /* FIX SCROLL MODAL */
  max-height: 85vh;
  overflow-y: auto;

  animation: modalFadeIn 0.2s ease-out;
}

/* Titre */
.modal-generic-title {
  font-family: var(--font-titres);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--c-titre);
  margin-bottom: var(--espace-md);
}

/* Bouton X */
.modal-generic-close {
  position: absolute;
  top: var(--espace-sm);
  right: var(--espace-sm);
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  opacity: 0.6;
}
.modal-generic-close:hover {
  opacity: 1;
}

/* Body */
.modal-generic-body {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
  font-size: 15px;
  color: var(--c-texte);
}

/* Sous-sections */
.modal-generic-body h3 {
  margin: var(--espace-md) 0 var(--espace-xs) 0;
  padding-bottom: var(--espace-xs);
  font-size: 1.1rem;
  font-family: var(--font-titres);
  border-bottom: 1px solid var(--c-border-subtle);
}

/* Footer */
.modal-generic-footer {
  margin-top: var(--espace-lg);
  display: flex;
  justify-content: flex-end;
  gap: var(--espace-sm);
}

/* Animation */
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ============================================================
   MODAL COMPTE — Bloquer le scroll arrière
   ============================================================ */

body.modal-generic-open {
  overflow: hidden;
}
/* ============================================================
   MODAL COMPTE — Backdrop flouté
   ============================================================ */

.modal-generic {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.35);
}