/* ===================================================================
   LUMEN Formations — cartes du catalogue AH LUMEN
   Autonome : ne dépend d'aucun style du thème.
   Toutes les règles sont préfixées .lumen-formations.
   =================================================================== */

.lumen-formations {
  --lumen-f-navy: #15264d;
  --lumen-f-navy-dark: #0e1b3a;
  --lumen-f-navy-light: #243b6b;
  --lumen-f-gold: #c9a227;
  --lumen-f-gold-light: #dab93a;
  --lumen-f-blanc: #fff;
  --lumen-f-gris: #5b6573;
  --lumen-f-ligne: #e6e1d6;
  --lumen-f-ombre: 0 8px 22px -12px rgba(21, 38, 77, 0.25);
  --lumen-f-ombre-forte: 0 18px 40px -18px rgba(21, 38, 77, 0.35);
  --lumen-f-maxw: 1180px;
  --lumen-f-gap: 26px;
  --lumen-f-rayon: 22px;
  --lumen-f-font-titre: "Poppins", "Segoe UI", system-ui, sans-serif;

  position: relative;
}

/* Le plugin ne peut pas présumer du reset du thème : sans cette règle, les
   paddings s'ajoutent aux largeurs et les cartes débordent en mobile. */
.lumen-formations,
.lumen-formations *,
.lumen-formations *::before,
.lumen-formations *::after {
  box-sizing: border-box;
}

/* ---------- Grille ---------- */
.lumen-formations__grille {
  max-width: var(--lumen-f-maxw);
  margin: 0 auto;
  display: grid;
  gap: var(--lumen-f-gap);
  /* Le nombre de colonnes vient d'une classe et non d'une variable :
     repeat() n'accepte qu'un entier littéral, pas de var(). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Les cartes s'étirent à la hauteur de la plus haute de leur rangée : le
     bandeau navy et les boutons restent alignés d'une carte à l'autre. */
  align-items: stretch;
}

.lumen-formations--cols-1 .lumen-formations__grille {
  grid-template-columns: minmax(0, 1fr);
}

.lumen-formations--cols-2 .lumen-formations__grille {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lumen-formations--cols-4 .lumen-formations__grille {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- Carte ---------- */
.lumen-formations__carte {
  background: var(--lumen-f-blanc);
  border: 1px solid var(--lumen-f-ligne);
  border-radius: var(--lumen-f-rayon);
  box-shadow: var(--lumen-f-ombre);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.lumen-formations__carte:hover {
  transform: translateY(-6px);
  box-shadow: var(--lumen-f-ombre-forte);
}

/* Une carte masquée par le filtre doit l'être même si le thème redéfinit
   display sur les éléments de grille. */
.lumen-formations__carte[hidden] {
  display: none;
}

.lumen-formations__entete {
  background: var(--lumen-f-navy);
  color: var(--lumen-f-blanc);
  padding: 22px 26px;
}

.lumen-formations__badge {
  display: inline-block;
  background: var(--lumen-f-gold);
  color: var(--lumen-f-navy-dark);
  font-family: var(--lumen-f-font-titre);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.lumen-formations__titre {
  /* Le thème impose ses marges et ses tailles aux h2/h3 : on repart de zéro. */
  margin: 0;
  padding: 0;
  color: var(--lumen-f-blanc);
  font-family: var(--lumen-f-font-titre);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.lumen-formations__corps {
  padding: 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lumen-formations__details {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}

.lumen-formations__details dt {
  font-family: var(--lumen-f-font-titre);
  font-weight: 600;
  color: var(--lumen-f-navy);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lumen-formations__details dd {
  color: var(--lumen-f-gris);
  font-size: 0.9rem;
  line-height: 1.6;
  /* dd porte une marge gauche par défaut dans tous les navigateurs. */
  margin: -4px 0 0;
}

/* ---------- Boutons ---------- */
.lumen-formations__actions {
  /* Colle les boutons en bas : les fiches n'ont pas toutes le même nombre de
     lignes, sans cela les boutons flottent à des hauteurs différentes. */
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lumen-formations__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 50px;
  font-family: var(--lumen-f-font-titre);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.lumen-formations__btn--fiche {
  border-color: var(--lumen-f-navy);
  color: var(--lumen-f-navy);
  background: transparent;
}

.lumen-formations__btn--fiche:hover,
.lumen-formations__btn--fiche:focus {
  background: var(--lumen-f-navy);
  color: var(--lumen-f-blanc);
}

.lumen-formations__btn--devis {
  background: var(--lumen-f-gold);
  color: var(--lumen-f-navy-dark);
}

.lumen-formations__btn--devis:hover,
.lumen-formations__btn--devis:focus {
  background: var(--lumen-f-gold-light);
  color: var(--lumen-f-navy-dark);
}

.lumen-formations__btn:focus-visible,
.lumen-formations__filtre:focus-visible {
  outline: 2px solid var(--lumen-f-gold);
  outline-offset: 3px;
}

/* ---------- Filtres ---------- */
.lumen-formations__filtres {
  max-width: var(--lumen-f-maxw);
  margin: 0 auto 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.lumen-formations__filtres[hidden] {
  display: none;
}

.lumen-formations__filtre {
  padding: 8px 18px;
  border: 1px solid var(--lumen-f-ligne);
  border-radius: 50px;
  background: var(--lumen-f-blanc);
  color: var(--lumen-f-navy);
  font-family: var(--lumen-f-font-titre);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.lumen-formations__filtre:hover {
  border-color: var(--lumen-f-gold);
  color: var(--lumen-f-navy-dark);
}

.lumen-formations__filtre.is-actif {
  background: var(--lumen-f-navy);
  border-color: var(--lumen-f-navy);
  color: var(--lumen-f-blanc);
}

/* Annonce du nombre de résultats : destinée aux lecteurs d'écran, l'écran
   montre déjà les cartes filtrées. */
.lumen-formations__resultat {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .lumen-formations--cols-3 .lumen-formations__grille,
  .lumen-formations--cols-4 .lumen-formations__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .lumen-formations {
    --lumen-f-gap: 20px;
  }
  .lumen-formations__entete {
    padding: 20px 22px;
  }
  .lumen-formations__corps {
    padding: 22px;
  }
}

@media (max-width: 700px) {
  .lumen-formations .lumen-formations__grille {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Deux boutons côte à côte deviennent illisibles sous 700 px. */
  .lumen-formations__btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lumen-formations__carte {
    transition: none;
  }
  .lumen-formations__carte:hover {
    transform: none;
  }
}