/* =====================================================================
   04 — Les questions qui comptent  (#questions, section--light)
   Quatre cartes « surface » (brume sur blanc) : icône or dans une pastille,
   numéro discret à droite (signature : numéro + court filet), titre, question.
   Ne cible que des classes préfixées .questions__… — tokens uniquement.
   ===================================================================== */

.questions__grille { align-items: stretch; }

.questions__carte {
  gap: var(--space-4);
  padding-top: clamp(1.5rem, 3vw, 2rem);
}

/* Rangée d'en-tête de carte : pastille à gauche, numéro + filet à droite */
.questions__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

/* Pastille légèrement plus généreuse que la carte standard : la section doit rester « visuelle » */
.questions__icone {
  width: 3.5rem;
  height: 3.5rem;
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.questions__icone svg { width: 1.75rem; height: 1.75rem; }
.questions__carte:hover .questions__icone {
  background: var(--color-marine);
  color: var(--color-gold-light);
}

/* Numéro d'ordre : « 01 » suivi d'un court rayon or (écho du filet directeur) */
.questions__numero {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-text);   /* texte or : version foncée (contraste AA) */
  line-height: 1;
}
.questions__numero::after {
  content: "";
  width: var(--space-5);
  height: var(--rule-height);
  background: currentColor;
  transition: width var(--duration) var(--ease-out);
}
.questions__carte:hover .questions__numero::after { width: var(--space-6); }

/* Titre de carte : légèrement plus compact en grille à quatre colonnes */
.questions__titre {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

/* La question reste une question : pas de gras ; corps légèrement réduit pour une mesure
   d'environ 27 caractères à quatre colonnes (au lieu de 20) */
.questions__question {
  max-width: none;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text-soft);
}

/* ≥ 1200 px : un peu plus d'air entre les cartes (le titre reste en --text-lg :
   à quatre colonnes, --text-xl coupe « Dépendances et vulnérabilités » sur trois lignes) */
@media (min-width: 1200px) {
  .questions__grille { gap: var(--space-6); }
  .questions__carte { padding-inline: var(--space-5); }
}

/* Mouvement réduit : aucune micro-interaction */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .questions__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .questions__carte:hover .questions__numero::after { width: var(--space-5); }
}