/* Cartes des pages de collection (Grammaire, Document, Thème), générées par src/lib/collections.ts : même forme que
   les cartes de « Cap sur la diplomatie » (coins de 12px, ombre légère, Roboto 16px, titre centré, date en gris),
   aux couleurs des anciens boutons de chaque collection. Les réglages de la grille (3 colonnes, 1 sur téléphone)
   passent devant ceux d'Elementor (2 lignes fixes, prévues pour les boutons). */
body .elementor .elementor-element.e-grid.grille-cartes {
  --e-con-grid-template-columns: repeat(3, 1fr);
  --e-con-grid-template-rows: none;
  --gap: 20px 20px;
  --row-gap: 20px;
  --column-gap: 20px;
  --padding-top: 32px;
  --padding-bottom: 48px;
  --padding-left: 0px;
  --padding-right: 0px;
  --align-self: center;
  width: 80%; /* même largeur que le bandeau du niveau (A1, B1…) */
  /* Toutes les cartes d'un niveau à la même hauteur, même quand un titre long passe sur deux lignes. */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
@media (max-width: 767px) {
  body .elementor .elementor-element.e-grid.grille-cartes {
    --e-con-grid-template-columns: repeat(1, 1fr);
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor .elementor-element.e-grid.grille-cartes {
    --e-con-grid-template-columns: repeat(2, 1fr);
  }
}

.grille-cartes .carte-collection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: stretch;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  gap: 10px;
  padding: 15px 12px;
  container-type: inline-size; /* la taille du titre suit la largeur de la carte */
  border-radius: 16px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
  background: var(--carte-fond);
  border: 1px solid var(--carte-bord);
  text-align: center;
  font-family: var(--e-global-typography-9c80c06-font-family), Sans-serif;
  font-size: var(--e-global-typography-9c80c06-font-size);
  transition: box-shadow 0.2s, transform 0.2s;
}
.grille-cartes .carte-collection:hover {
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.grille-cartes .carte-collection p {
  margin: 0;
}
/* Titre sur une seule ligne (demande de Marie, 01/11) : sa taille suit la largeur de la carte, 17px au plus. Le titre
   le plus long (« Les expressions temporelles et la concordance ») mesure environ 20,7 fois la taille du texte ;
   100cqi = largeur intérieure de la carte. Plus grand que la date (12px), qui reste discrète. */
.grille-cartes .carte-collection-titre {
  font-size: min(17px, calc(100cqi / 21.5));
  font-weight: 700;
  line-height: 1.3;
}
.grille-cartes .carte-collection-titre a {
  color: var(--carte-texte);
  text-decoration: none;
}
.grille-cartes .carte-collection-titre a:hover {
  text-decoration: underline;
}
.grille-cartes .carte-collection-date {
  font-size: 12px;
  color: #9ca3af;
}

/* Couleurs : celles des anciens boutons (fond, bord, texte) ; jaune du Document foncé pour rester lisible. */
.elementor-6773 .grille-cartes { --carte-fond: #EFF6FF; --carte-bord: #BFDBFE; --carte-texte: #2E86C1; }
.elementor-6774 .grille-cartes { --carte-fond: #FFFBEB; --carte-bord: #FDE68A; --carte-texte: #B7791F; }
.elementor-6775 .grille-cartes { --carte-fond: #F5F3FF; --carte-bord: #DDD6FE; --carte-texte: #8B5CF6; }