/* A2 beginner guide page */
.a2-hero,
.a2-grid,
.roadmap,
.note-box { max-width: var(--largeur-site, 1200px); margin: 0 auto 30px; padding: 0 20px; }
.a2-hero { margin-top: 10px; }
/* Panneaux : surfaces opaques, aretes vives, plus de cerne lime decoratif
   ni d'ombre diffuse. Le lime revient par la barre de course sous le titre. */
.hero-content, .roadmap, .note-box { padding: 46px 24px; border-radius: var(--radius-lg); background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: none; }
/* Le heros reste un grand bloc carbone. */
.hero-content { background: var(--carbon); }
/* Fin du tout-centre : la barre de course se pose au debut du titre. */
.hero-content, .note-box { text-align: left; }
.a2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 560px));
  justify-content: center; gap: 22px; }
/* Carte au repos : surface opaque, arete vive, aucune ombre diffuse.
   Le lime n'apparait qu'au survol. */
.a2-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 22px; box-shadow: none; text-align: left; transition: background .25s ease, border-color .25s ease; }
.a2-card:hover { background: var(--card-bg-hover); border-color: var(--accent-line); }
.a2-card ul { margin: 0 0 10px; padding-left: 18px; display: block; }
.roadmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 460px));
  justify-content: center; gap: 14px; }
/* Etapes de la feuille de route : cartes au repos, filet neutre. */
.roadmap-grid > div { border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--card-bg-hover); padding: 14px; text-align: left; }
/* Seul bouton de la page : il est donc primaire (aplat lime, encre noire,
   filet noir), et il tient la cible tactile de 48px. */
.cta-link { display: inline-flex; align-items: center; margin-top: 8px; min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-sm); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-base); background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent-ink); transition: background .2s ease; }
.cta-link:hover, .cta-link:focus-visible { background: var(--accent-hover); }
@media (max-width: 900px) { .a2-grid, .roadmap-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .a2-hero, .a2-grid, .roadmap, .note-box { padding: 0 12px; } .hero-content, .a2-card, .roadmap, .note-box { padding: 20px 16px; } }

/* ---- Bande tablette ----
   Ces grilles passaient a une colonne des 768px (900px pour certaines), soit
   en pleine tablette : les cartes prenaient toute la largeur et la page
   devenait une longue colonne. Deux colonnes sont retablies jusqu'a 600px,
   ou une colonne unique devient reellement justifiee.
   Regle ajoutee en fin de fichier : a specificite egale, elle l'emporte sur
   la media query d'origine par l'ordre de declaration. */
@media (min-width: 601px) and (max-width: 900px) {
  .a2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}