/* ==========================================================================
   MODAL.CSS — Styles du Modal Universel (Pages Modules uniquement)
   ==========================================================================
   RÔLE :
     - Définit l'apparence du modal universel utilisé dans les pages Modules :
         * descriptif.html
         * objectifs.html
         * activités.html (futur)
         * évaluations.html (futur)
     - Doit rester minimal, stable et cohérent pour tous les modules.

   SÉPARATION STRICTE :
     - Ne JAMAIS utiliser ce fichier pour les modals de la page Compte.
     - Les modals du compte utilisent EXCLUSIVEMENT : modal-projet.css
     - Ne pas mélanger les classes .modal et .modal-generic.

   DÉPENDANCES :
     - Fonctionnalités fournies par modal.js :
         * openModal(id)
         * closeModal(id)
         * configureAndOpenModal() (fallback)
     - ID structurel requis : #modal-universel

   RÈGLES DE MODIFICATION :
     - Ne pas ajouter de styles globaux ou non reliés aux modals.
     - Ne pas changer les noms de classes existants sans analyse d’impact.
     - Toute modification doit suivre le workflow :
         * une seule action à la fois
         * analyse → validation → implémentation → test

   NOTE :
     - Toute régression ici affectera plusieurs pages Modules à la fois.
   ========================================================================== */

/* === CONTAINER === */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
}

.modal.active { display: flex; }

/* === CARTE === */
.modal-content {
  background: var(--c-surface-1);
  border-radius: 14px;                         /* plus premium */
  padding: 0;
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
overflow: hidden;
  border: 1px solid var(--c-border-subtle);

  box-shadow:
    0 4px 8px rgba(0,0,0,0.05),
    0 12px 32px rgba(0,0,0,0.10);

  display: flex;
  flex-direction: column;
  position: relative;
  animation: modalFadeIn 0.22s ease-out;
}
.modal-header {
  padding: var(--espace-lg);
}


.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
    line-height: 1.65;          /* + confort lecture */
  font-size: 15.5px;          /* très léger upscale */

  /* 🔑 padding horizontal restauré */
  padding-left: var(--espace-lg);
  padding-right: calc(var(--espace-lg) + 4px);

  /* padding vertical déjà géré ailleurs */
}

.modal-body::-webkit-scrollbar {
  width: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.25);
  border-radius: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
}



/* Animation */
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === BARRE MAUVE EN HAUT === */
.modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: var(--c-bleu-900);           
  border-radius: 14px 14px 0 0;
}


.modal-title {
  margin: 0;
  font-family: var(--font-titres);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--c-titre);
}



/* === FOOTER === */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--espace-sm);
}


/* === BOUTON X === */
.modal-close {
  position: absolute;
  top: var(--espace-sm);
  right: var(--espace-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  opacity: 0.55;
  color: var(--c-gris-700);
}

.modal-close:hover { opacity: 1; }
/* OS — ne pas afficher de ligne avant la première section */
#modal-universel .os-section:first-of-type,
#modal-redaction-os .os-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
/* OS — réduire l’espace entre le titre et le texte (première section seulement) */
#modal-universel .os-section:first-of-type,
#modal-redaction-os .os-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
}
/* OS (page Objectifs) — modal universel plus large */
.page-objectifs #modal-universel .modal-content {
  max-width: 1500px;
}

/* OG/Modal universel (page Descriptif) — modal plus large */
.page-descriptif #modal-universel .modal-content {
  max-width: 720px;
}

/* ============================================================
   EXTENSIONS — MODAL UNIVERSEL (LECTURE / ANALYSE)
   ============================================================ */

/* Modal universel — largeur étendue pour contenus analytiques */
.page-activites #modal-universel .modal-content {
  max-width: 980px;
}
/* ============================================================
   MICROPLANIF — MODAL UNIVERSEL PLUS LARGE
   ============================================================ */

.page-microplanif #modal-universel .modal-content {
  max-width: 900px;
}


/* Séparateur de sections (ligne neutre, espacement compact) */
.modal-separator {
  border: none;
  height: 1px;
  background: var(--c-border-subtle);
  margin: var(--espace-sm) 0;
}


/* Grille 2 colonnes générique (profil, contraintes, etc.) */
.modal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-sm) var(--espace-lg);
}

/* Variante légère (contraintes pratiques) */
.modal-grid-light {
  margin-top: var(--espace-sm);
}
/* Introduction du modal (description enrichie) */
.modal-introduction p {
  margin-bottom: var(--espace-sm);
}

.modal-description-complement {
  color: var(--c-gris-700);
}
/* Footer étendu — zone gauche optionnelle */
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-footer-left:empty {
  display: none;
}

.modal-footer-right {
  display: flex;
  gap: 10px;
}
/* ============================================================
   MODAL UNIVERSEL — Footer (gauche / droite)
   ============================================================ */

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espace-sm) var(--espace-lg); /* vertical ↓, horizontal stable */
}

.modal-footer-left {
  display: flex;
  align-items: center;
}

.modal-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================================================
   MODAL — Empêcher le scroll de "passer à travers" vers la page
   (scroll chaining)
   ========================================================= */

.modal .modal-body {
  overscroll-behavior: contain;
}
/* ======================================================================
   MODAL — CONFIRMATION DE SUPPRESSION (DANGER)
   Appliqué UNIQUEMENT quand #modal-universel porte data-modal-variant
   ====================================================================== */

#modal-universel[data-modal-variant="confirm-danger"] .modal-content {
  max-width: 620px;
}

#modal-universel[data-modal-variant="confirm-danger"] .modal-content::before {
  background: var(--c-danger);
}

#modal-universel[data-modal-variant="confirm-danger"] .modal-title {
  color: var(--c-titre);
}

#modal-universel[data-modal-variant="confirm-danger"] .modal-body {
  color: var(--c-texte);
}

#modal-universel[data-modal-variant="confirm-danger"] .modal-body strong {
  color: var(--c-danger);
}
.modal {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.35);
}

/* =========================================================
   MODAL — Transition interne (reconfiguration contenu)
   ========================================================= */

.modal-content {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.modal.modal-transitioning .modal-content {
  opacity: 0;
  transform: translateY(4px);
}