/* ============================================================
   MODALE — popups de newsletter et fenêtres de l'espace adhérent
   Relevé § 5.3 : 3 popups Kadence Conversions (#1508, #6297, #6314).
   Overlay = accent à `opacity: .7` ; modale fond blanc, bordure teal foncé ;
   bouton de fermeture 30 px blanc sur accent, padding 10 px, survol teal foncé ;
   titre ANTON 36 px uppercase `letter-spacing 1.7px` `#1a202c` ; corps 18 px ;
   `max-width: 60vw`. Le complément § 6.7 relève 34 conteneurs de modale de plus
   dans la fiche membre, ouverts par 5 boutons « Modifier ».

   TROIS CORRECTIONS AU CONTRAT :
   1. RETIRE la famille ANTON (gate 1) : les titres de popup repassent en
      Roboto Slab. L'interlettrage de 1,7 px et la casse forcée partent avec —
      le site n'interlettre nulle part ailleurs que sur son surtitre.
   2. Le `#1a202c` (palette bleue Kadence fantôme, jamais déclarée dans la
      palette active) disparaît au profit de `--text-strong`.
   3. CORRIGE LE BUG TABLETTE (relevé § 7.6) : `@media (max-width: 1024px)
      { .kadence-conversion { max-width: 10vw } }` — la modale faisait 10 % de
      la largeur d'écran en tablette. Ici : 60vw desktop, 90vw tablette,
      100vw mobile.
   4. L'overlay en ACCENT à .7 devient le scrim nuit du système : une couleur
      d'action ne sert pas de rideau.
   ============================================================ */

/* RÈGLE DE POSE (trouvée à l'auto-critique du 05/08) : le rideau porte
   `data-theme="nuit"`, le dialogue porte `data-theme="jour"`.
   Sans ça, une modale ouverte depuis une section de nuit hérite des rôles de
   nuit : la carte blanche du dialogue rend du texte blanc sur du blanc.
   Le dialogue est une zone claire posée dans un monde sombre — c'est
   exactement le cas que le contexte « jour » existe pour couvrir. */
.lcdi-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--scrim-modal);
}
.lcdi-modal.is-open { display: flex; }

.lcdi-modal__dialog {
  position: relative;
  width: 60vw;                          /* relevé */
  max-width: 780px;
  max-height: 88vh;
  overflow: auto;
  background: var(--surface-raised);
  border: 2px solid var(--accent-strong);   /* bordure teal foncé, relevée */
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-deep);
  padding: var(--space-7) var(--space-6) var(--space-6);
}

.lcdi-modal__title {
  font-family: var(--font-display);     /* Roboto Slab : Anton est retirée */
  font-size: var(--type-display);
  font-weight: var(--weight-strong);
  line-height: var(--lh-title);
  letter-spacing: normal;               /* la casse et l'interlettrage d'Anton partent */
  text-transform: none;
  color: var(--text-strong);
  text-align: center;
  margin: 0 0 var(--space-4);
}
.lcdi-modal__body { font-size: var(--type-body); color: var(--text-body); }
.lcdi-modal__body > *:first-child { margin-top: 0; }
.lcdi-modal__body > *:last-child { margin-bottom: 0; }
.lcdi-modal__body img { max-width: 100%; height: auto; }

/* L'IMAGE D'UNE MODALE EST UNE VIGNETTE, PAS UNE AFFICHE — AJOUT DU 22/08.

   Le champ « image » du répéteur de modales existait depuis le bloc 5a mais
   n'avait JAMAIS servi : aucune modale du site n'en portait. Son premier usage
   réel — le rapatriement de l'histoire de l'association, qui ouvre sur le
   picto du club — a montré le défaut au navigateur, et lui seul pouvait le
   montrer : `max-width: 100%` bornait la largeur, rien ne bornait la HAUTEUR.
   Un logo de 500 × 500 servi à sa taille naturelle mangeait donc les deux
   tiers du dialogue (792 px de haut), et le texte commençait sous la ligne de
   flottaison — il fallait faire défiler pour lire la première phrase.

   La vignette se borne en hauteur, se centre, et rend la place au texte.
   120 px : la hauteur du picto du pied de page (116 px relevés), pour que le
   même logo pèse le même poids partout. */
.lcdi-modal__media { margin: 0 0 var(--space-5); text-align: center; }
.lcdi-modal__media img { max-height: 120px; width: auto; margin-inline: auto; }

/* L'accroche d'une modale : la phrase qui suit le titre, centrée comme lui.
   Relevé sur « Rejoindre nos sponsors & partenaires » (Partenaires). */
.lcdi-modal__accroche {
  margin: calc(var(--space-4) * -1) 0 var(--space-6);
  text-align: center;
  color: var(--text-body);
}

/* Fermeture : 30 px, blanc sur accent, padding 10 px, survol teal foncé (relevé) */
.lcdi-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--accent);
  color: var(--text-on-night);
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-brand);
}
.lcdi-modal__close:hover { background: var(--accent-strong); }
.lcdi-modal__close:focus-visible { box-shadow: var(--focus-ring); }
.lcdi-modal__close svg { width: 16px; height: 16px; fill: currentColor; }

/* ENTRÉE DE LA MODALE QUE PERSONNE N'A DEMANDÉE (T8 c, ouverture automatique).
   Une modale ouverte au clic n'a pas besoin d'être annoncée : le geste l'a déjà
   annoncée. Celle qui s'ouvre seule, cinq secondes après l'arrivée, surgit —
   d'où ce fondu court, réservé à `.is-auto` (classe posée par le script au seul
   moment où il ouvre de lui-même).

   LE MOUVEMENT RÉDUIT EST DÉJÀ TENU PAR LES JETONS : `--t-scene` retombe à
   .01 ms sous `prefers-reduced-motion`, et `tokens.css` coupe en plus toute
   animation par une règle universelle. Rien à redéclarer ici — c'est
   exactement pour ça que la durée est un jeton et pas un nombre. */
.lcdi-modal.is-auto { animation: lcdi-modal-rideau var(--t-soft) var(--ease-brand) both; }
.lcdi-modal.is-auto .lcdi-modal__dialog { animation: lcdi-modal-entree var(--t-scene) var(--ease-brand) both; }

@keyframes lcdi-modal-rideau {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lcdi-modal-entree {
  from { opacity: 0; transform: translateY(var(--space-4)); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
  .lcdi-modal__dialog { width: 90vw; }   /* CORRECTIF du bug 10vw */
}
@media (max-width: 767px) {
  .lcdi-modal { padding: 0; align-items: flex-end; }
  .lcdi-modal__dialog {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    border-width: 2px 0 0;
  }
}