/* =========================================================================
   CARRIA — A3 (le problème) et A4 (la réponse)
   Annexes A3 et A4 (visuel), C2 (jetons), C3 (verre), C4 (typo), C5/D1
   (gabarit, mouvement, points de rupture 480 / 768 / 1024 / 1440).

   Aucune valeur hexadécimale en dur : uniquement les variables de tokens.css.
   Les classes sont préfixées .a3-* / .a4-* pour ne heurter aucune autre
   section.
   ========================================================================= */

/* =========================================================================
   A3 — LE PROBLÈME
   Fond blanc (.fond-blanc, base.css). Cartes ternes : fond --bg-2, --r-md,
   padding --pad, SANS OMBRE. Aucune icône. Le contraste avec le verre de A4
   fait le travail narratif.
   ========================================================================= */

.a3-entete {
  margin-bottom: var(--sp-xxxl);
}

.a3-chapo {
  margin-top: var(--sp-base);
  color: var(--muted);
}

/* Grille 2×2, une seule colonne sous 768 px (D1). */
.a3-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .a3-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.a3-carte {
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: var(--pad);
  /* Sans ombre, sans bordure, sans survol : ces cartes décrivent un problème,
     elles doivent paraître ternes (annexe A3). */
}

.a3-carte-titre {
  color: var(--ink);
}

/* Numérotation 01→04 : JetBrains Mono 11 px --muted-3 (5,09:1 sur --bg-2).
   La classe .num (base.css) apporte la famille et les chiffres tabulaires. */
.a3-numero {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted-3);
}

.a3-carte-corps {
  margin-top: var(--sp-md);
  color: var(--muted);
  max-width: 68ch;
}

/* Phrase de bascule : isolée, centrée, Instrument Serif Italic 24 px,
   max 700 px, marges verticales 64 px. Seule occurrence d'Instrument Serif
   de toute la page (annexe C4). */
.a3-bascule {
  max-width: 700px;
  margin: 64px auto;
  text-align: center;
  text-wrap: balance;
  color: var(--ink-2);
}

/* =========================================================================
   A4 — LA RÉPONSE
   Fond --bg-grad (.fond-degrade, base.css). Trois cartes en verre côte à côte,
   empilées sous 768 px. Une seule épaisseur de verre (C3 : ne pas empiler
   plus de deux niveaux).
   ========================================================================= */

.a4-entete {
  margin-bottom: var(--sp-xxxl);
}

.a4-entete .h2 {
  margin-top: var(--sp-md);
}

.a4-chapo {
  margin-top: var(--sp-base);
  color: var(--muted);
}

.a4-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

/* ≥ 768 px : les trois cartes en rangée. Les pastilles de suggestion se
   placent explicitement sous la carte INTERROGER (rangée 2, colonne 2) ;
   dans le flux empilé elles suivent naturellement cette même carte. */
@media (min-width: 768px) {
  .a4-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .a4-carte:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .a4-carte:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .a4-carte:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
  }
  .a4-suggestions {
    grid-column: 2;
    grid-row: 2;
  }
}

.a4-carte {
  padding: var(--pad);
  /* .verre (base.css) apporte fond, flou, bordure, rayon et ombre. */
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

/* Survol : translateY(-4px) + --sh-elev en 280 ms (annexe A4).
   Le liseré blanc supérieur est conservé : il fait 80 % de l'effet de verre. */
.a4-carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-elev), inset 0 1px 0 var(--inset-highlight);
}

/* Entre 768 et 1024 px, trois colonnes restent imposées : on rend le padding
   au texte plutôt qu'à la carte. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .a4-carte {
    padding: var(--sp-xl);
  }
}

/* Pastille ronde de 44 px en --accent-soft, icône Lucide 24 × 24 en --accent. */
.a4-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.a4-icone {
  width: 24px;
  height: 24px;
}

.a4-carte-titre {
  margin-top: var(--sp-lg);
  color: var(--ink);
}

.a4-carte-corps {
  margin-top: var(--sp-md);
  color: var(--muted);
  max-width: 68ch;
}

/* Pastilles de suggestion telles qu'elles existent dans le produit :
   fond blanc, --r-pill, bordure fine, 13 px. Non interactives — la page
   n'a qu'un seul appel à l'action (brief §2). */
.a4-suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-sm);
  margin: 0;
  padding: 0 var(--sp-xs);
  list-style: none;
}

.a4-suggestion {
  max-width: 100%;
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface-solid);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

/* =========================================================================
   Mouvement (C5) — décalage de 60 ms par élément d'une rangée. L'apparition
   elle-même est portée par .js-anime / .est-visible (base.css).
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .a3-carte.js-anime:nth-of-type(2),
  .a4-carte.js-anime:nth-of-type(2) {
    transition-delay: 60ms;
  }
  .a3-carte.js-anime:nth-of-type(3),
  .a4-carte.js-anime:nth-of-type(3) {
    transition-delay: 120ms;
  }
  .a3-carte.js-anime:nth-of-type(4) {
    transition-delay: 180ms;
  }
  .a4-suggestions.js-anime {
    transition-delay: 180ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a4-carte,
  .a4-carte:hover {
    transform: none;
  }
}