/* =========================================================================
   CARRIA — A7 (sécurité) et A8 (comment ça commence)
   Annexes A7 et A8 pour le visuel, C2 pour les jetons, C5/D1 pour le gabarit.

   Aucune valeur hexadécimale en dur : tout passe par les jetons de tokens.css.
   Points de rupture 480 / 768 / 1024 / 1440, aucun défilement horizontal.
   ========================================================================= */

/* =========================================================================
   A7 — SÉCURITÉ
   Fond --bg-grad (posé par .fond-degrade). Quatre points en grille 2×2,
   cartes en verre LÉGÈRES : --surface-glass, pas d'ombre portée, bordure
   1 px --hairline, --r-md, padding 24 px.
   Section sobre, pas commerciale : icônes en --muted-2, jamais en --accent.
   ========================================================================= */

.a7-titre-section {
  max-width: 20ch;
  margin-bottom: var(--sp-xxxl);
}

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

.a7-carte {
  padding: var(--sp-xl); /* 24 px, imposé par A7 */
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  /* Liseré intérieur de la recette de verre (C3). PAS d'ombre portée :
     A7 l'interdit explicitement — la section doit rester discrète. */
  box-shadow: inset 0 1px 0 var(--inset-highlight);
}

/* Repli obligatoire : sans lui le texte devient illisible sur le dégradé (C3). */
@supports not (backdrop-filter: blur(1px)) {
  .a7-carte {
    background: var(--surface-elev);
  }
}

.a7-icone {
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: var(--sp-base);
  color: var(--muted-2); /* jamais --accent : A7 */
}

/* Titre en attaque de paragraphe : le texte de l'annexe A7 est d'un seul
   tenant, « Titre — corps ». Le titre reste un <h3> pour la structure. */
.a7-titre {
  display: inline;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.a7-corps {
  display: inline;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--muted);
}

.a7-mention {
  margin-top: var(--sp-xxl);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

@media (min-width: 768px) {
  /* Grille 2×2 (A7). Identique de 768 px à 1440 px et au-delà. */
  .a7-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .a7-mention {
    margin-top: var(--sp-xxxl);
  }
}

/* =========================================================================
   A8 — COMMENT ÇA COMMENCE
   Fond blanc (posé par .fond-blanc).
   ≥ 1024 px : quatre étapes en ligne, filet --rule-25 passant DERRIÈRE les
   numéros — le fond opaque du numéro masque le filet à son aplomb.
   < 1024 px : empilement vertical, filet vertical à gauche.
   ========================================================================= */

.a8-titre-section {
  max-width: 22ch;
  margin-bottom: var(--sp-xxxl);
}

.a8-etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xxl);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Empilement vertical (< 1024 px) : numéro en gouttière, filet à gauche --- */

.a8-etape {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-xl);
  align-items: start;
}

.a8-etape:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: calc(-1 * var(--sp-xxl));
  left: 18px; /* aplomb du numéro : le filet lui passe derrière */
  width: 1px;
  background: var(--rule-25);
}

.a8-ligne-num {
  position: relative;
  z-index: 1; /* masque le filet à l'aplomb du numéro */
  display: inline-flex;
  align-items: center; /* le point médian se cale à mi-hauteur du numéro */
  gap: 6px;
  background: var(--surface-solid);
  line-height: 1;
  padding-bottom: var(--sp-sm);
  white-space: nowrap;
}

/* Numéro décoratif : 32 px JetBrains Mono --accent-light (A8).
   Cette couleur ne porte JAMAIS de texte de lecture ailleurs sur la page. */
.a8-num {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--accent-light);
}

.a8-sep {
  font-size: 20px;
  line-height: 1;
  color: var(--muted-3);
}

/* Même attaque de paragraphe qu'en A7 : « Titre — corps » d'un seul tenant. */
.a8-titre {
  display: inline;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.a8-corps {
  display: inline;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--muted);
}

.a8-mention {
  margin-top: var(--sp-xxl);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 480px) {
  .a8-etape {
    column-gap: var(--sp-base);
  }
  .a8-etape:not(:last-child)::after {
    left: 16px;
  }
}

@media (min-width: 1024px) {
  /* Quatre étapes en ligne (D1). Le filet relie les numéros de gauche à
     droite et s'arrête au dernier : aucun débord au-delà de l'enveloppe. */
  .a8-etapes {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }

  .a8-etape {
    display: block;
  }

  .a8-etape:not(:last-child)::after {
    top: 16px; /* mi-hauteur du numéro (32 px, interligne 1) */
    bottom: auto;
    left: 0;
    right: calc(-1 * var(--sp-xxl));
    width: auto;
    height: 1px;
  }

  .a8-ligne-num {
    margin-bottom: var(--sp-base);
    padding-right: var(--sp-base);
    padding-bottom: 0;
  }

  .a8-mention {
    margin-top: var(--sp-xxxl);
  }
}

@media (min-width: 1440px) {
  .a8-etapes {
    gap: var(--sp-xxxl);
  }
  .a8-etape:not(:last-child)::after {
    right: calc(-1 * var(--sp-xxxl));
  }
}

/* =========================================================================
   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),
   déclenchée par IntersectionObserver. Tout est neutralisé sous
   prefers-reduced-motion: reduce.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .a7-grille .js-anime:nth-child(2),
  .a8-etapes .js-anime:nth-child(2) {
    transition-delay: 60ms;
  }
  .a7-grille .js-anime:nth-child(3),
  .a8-etapes .js-anime:nth-child(3) {
    transition-delay: 120ms;
  }
  .a7-grille .js-anime:nth-child(4),
  .a8-etapes .js-anime:nth-child(4) {
    transition-delay: 180ms;
  }
}