/* ============================================================
   BIFA INSTITUTE — Demande de catalogue
   Fenêtre de collecte affichée au clic sur « Télécharger le
   catalogue complet (PDF) ».

   Aucun style nouveau n'est inventé : la carte réutilise
   .form-card, .fgrid, .fgroup, .btn et .form-msg déjà définis
   dans style.css. Ce fichier ne fait qu'ajouter l'enveloppe
   (voile, panneau, fermeture), calquée sur la .lightbox des
   galeries — même z-index, même voile, même courbe d'animation.
   ============================================================ */

/* ---------- Voile ---------- */
/* L'attribut [hidden] doit l'emporter sur le display:flex ci-dessous.
   Sans cette ligne, la règle de classe gagne sur la feuille du
   navigateur : la fenêtre reste dans le flux, invisible à l'œil mais
   atteignable au clavier et annoncée par les lecteurs d'écran. */
.cat-modal[hidden]{display:none}

.cat-modal{
  position:fixed;inset:0;z-index:2100;
  background:rgba(6,21,39,.94);backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(16px,4vh,56px) clamp(14px,4vw,24px);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.cat-modal.open{opacity:1;pointer-events:auto}

/* ---------- Panneau ---------- */
/* .form-card fournit le fond navy, la bordure et l'ombre.
   On ne redéfinit ici que la largeur, le rythme vertical et
   l'animation d'entrée. */
.cat-modal .form-card{
  /* .form-card vit normalement dans .form-section, qui lui donne sa
     couleur de texte claire. Ici la carte est seule sur le voile :
     sans cette déclaration, les titres héritent du navy sombre et
     deviennent illisibles sur le fond navy. */
  color:#fff;
  width:100%;max-width:640px;margin:auto;
  padding:clamp(28px,4vw,46px);
  text-align:left;position:relative;
  transform:translateY(16px) scale(.985);
  transition:transform .35s var(--ease);
}
.cat-modal.open .form-card{transform:none}

/* ---------- En-tête ---------- */
.cat-modal .eyebrow{justify-content:flex-start;margin-bottom:16px}
.cat-modal h2{
  font-size:clamp(1.45rem,3.4vw,2rem);
  line-height:1.18;margin-bottom:12px;text-align:left;
  padding-right:44px;                 /* dégagement pour la croix */
}
.cat-modal .cat-intro{
  color:var(--muted-light);font-size:.94rem;line-height:1.65;
  margin-bottom:30px;
}

/* ---------- Fermeture ---------- */
.cat-close{
  position:absolute;top:16px;right:16px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:1.1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.cat-close:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:rotate(90deg)}
.cat-close:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Grille de champs ---------- */
/* Cinq champs obligatoires : deux colonnes, le dernier sur
   toute la largeur pour ne pas laisser de case vide. */
.cat-modal .fgrid{gap:18px}
.cat-modal .form-card .btn{margin-top:26px}

/* ---------- Consentement ---------- */
/* La sélecteur porte label.cat-consent, et non .cat-consent seul :
   .fgroup label (0,1,1) l'emporterait sinon, et la phrase de
   consentement s'afficherait en capitales espacées comme un libellé
   de champ. */
.fgroup label.cat-consent{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-weight:400;text-transform:none;letter-spacing:0;font-size:1rem;
  color:var(--muted-light);
}
.fgroup label.cat-consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--blue)}
.fgroup label.cat-consent span{font-size:.84rem;line-height:1.55;color:var(--muted-light)}
.fgroup label.cat-consent a{text-decoration:underline;color:var(--blue-soft)}
.fgroup.invalid label.cat-consent span{color:#F5A79D}

/* ---------- Emplacement Turnstile ---------- */
/* Vide et sans hauteur tant que les clés ne sont pas renseignées
   dans api/config.php : la mise en page ne bouge pas. */
.cat-turnstile:not(:empty),
.form-card .antispam-slot:not(:empty){margin-top:22px}

/* ---------- Écran de confirmation ---------- */
.cat-done{text-align:center;padding:6px 0 2px}
.cat-done .cat-check{
  width:62px;height:62px;border-radius:50%;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(41,171,226,.14);border:1px solid rgba(41,171,226,.45);
  color:var(--blue);
}
.cat-done h2{text-align:center;padding-right:0}
.cat-done p{
  color:var(--muted-light);font-size:.95rem;line-height:1.7;
  max-width:44ch;margin:0 auto 30px;
}
.cat-done .btn{width:100%;justify-content:center}
.cat-done .cat-relance{
  margin:20px auto 0;font-size:.8rem;color:var(--muted-light);
}

/* ---------- Mobile ---------- */
@media(max-width:720px){
  .cat-modal{align-items:stretch;padding:0}
  .cat-modal .form-card{
    max-width:none;border-radius:0;border-left:0;border-right:0;
    min-height:100%;padding:26px 20px 40px;
  }
  .cat-modal .fgrid{grid-template-columns:1fr}
  .cat-modal h2{padding-right:40px}
  .cat-close{top:12px;right:12px}
}

/* ---------- Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .cat-modal,.cat-modal .form-card,.cat-close{transition:none}
  .cat-modal .form-card{transform:none}
}

/* ---------- Impression ---------- */
@media print{.cat-modal{display:none}}