/* ============================================================================
   AGENTIC GURU V2 — SOCLE PRODUIT
   ----------------------------------------------------------------------------
   Un seul système visuel pour TOUT le produit hors page d'accueil.

   LA PAGE D'ACCUEIL EST VERROUILLÉE. Elle garde son identité noire et n'est
   jamais concernée par ce fichier : rien ici ne s'applique sans la classe
   `ag2` posée explicitement sur <body>. Aucune règle ne cible `html` ou `body`
   nus, aucune ne fuit par héritage. C'est la garantie mécanique, pas une
   promesse.

   ORIGINE DES VALEURS — aucune n'est inventée.
   · Les couleurs, la famille typographique et l'échelle d'espacement viennent
     de `/commencer`, la page déjà validée, et de `styles.css`.
       bleu  #2563EB / #3B82F6 / #1E40AF   (déjà en production)
       or    #D97706 / #92400E / #FFFBEB   (déjà présent sur /commencer)
       encre #0C0A09, gris chauds #44403C #79716B, lignes #E7E5E4
       polices Geist Variable + Geist Mono Variable, auto-hébergées, OFL
   · La GRAMMAIRE — densité, rayons, filets — est mesurée sur la référence
     externe (evidence/reference/humblytics_grammar.json, 1463 éléments) :
       conteneur ~1020px · rayons 3-4px · filets 1px · ombres quasi nulles
       espacements dominants 8 / 10 / 12 / 16 / 20 / 24 · gaps 6 / 8 / 12 / 16
     C'est la leçon principale : les surfaces y sont dessinées par des FILETS
     D'UN PIXEL, pas par des ombres, et les rayons sont petits. Un système qui
     arrondit à 16px et empile les ombres portées ne ressemblera jamais à ça,
     quelle que soit la palette.

   RÈGLE DE L'OR. Il est rare par construction, pas par discipline : il n'existe
   que dans `.ag2-badge--premium`, `.ag2-metric--gold` et `.ag2-rule--gold`. Il
   n'a AUCUNE variante bouton, aucune variante titre. Sa rareté est ce qui lui
   donne sa valeur ; la rendre facile à répandre la détruirait.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */

/* Les VALEURS vivent dans agentic-tokens.css, charge avant ce fichier.
   Ce fichier ne definit plus aucune valeur du socle : il les consomme.
   Une seule exception, plus bas et volontaire : la surcharge responsive
   de --ag2-pad-x, qui est un choix de mise en page, pas une valeur de
   marque. Voir agentic-tokens.css pour la regle de propriete. */

/* ------------------------------------------------- 2. CANEVAS ET GRAIN */

.ag2 {
  background: var(--ag2-bg);
  color: var(--ag2-ink);
  font-family: var(--ag2-sans);
  font-size: var(--ag2-t-body);
  line-height: var(--ag2-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Le débordement horizontal était un défaut mesuré sur 3 rendus mobiles
     avant cette refonte. On le ferme à la racine plutôt que page par page. */
  overflow-x: hidden;
}

/* Le grain. Un seul SVG de 200×200 répété par le GPU, en position fixe : il ne
   se recalcule jamais au scroll et ne coûte pas une requête. À 3,5 % il se voit
   sur un aplat et disparaît sous le texte — c'est le but. Il est retiré à
   l'impression et pour qui demande moins d'animation. */
.ag2::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ag2 > * { position: relative; z-index: 1; }

/* -------------------------------------------------------- 3. TYPOGRAPHIE */

.ag2 h1, .ag2 h2, .ag2 h3, .ag2 h4 {
  font-family: var(--ag2-sans);
  color: var(--ag2-ink);
  text-wrap: balance;
  margin: 0;
}
.ag2 h1 {
  font-size: var(--ag2-t-display);
  font-weight: 650;
  line-height: var(--ag2-lh-display);
  letter-spacing: var(--ag2-ls-display);
  text-transform: none;
}
.ag2 h2 {
  font-size: var(--ag2-t-h2);
  font-weight: 620;
  line-height: var(--ag2-lh-title);
  letter-spacing: var(--ag2-ls-title);
}
.ag2 h3 {
  font-size: var(--ag2-t-h3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.ag2 p { margin: 0; color: var(--ag2-ink-2); }
.ag2 p + p { margin-top: var(--ag2-4); }
.ag2 strong, .ag2 b { color: var(--ag2-ink); font-weight: 600; }
.ag2 .ag2-lead,
.ag2 .lead,
.ag2 .sub {
  font-size: var(--ag2-t-lead);
  color: var(--ag2-ink-2);
  line-height: 1.55;
  text-wrap: pretty;
}

/* L'étiquette mono. C'est le tissu conjonctif du système : elle dit toujours
   « où tu es » avant que le titre dise « ce que c'est ». */
.ag2 .ag2-eyebrow,
.ag2 .eyebrow,
.ag2 .tag,
.ag2 .c-idx {
  display: inline-block;
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  font-weight: 500;
  letter-spacing: var(--ag2-ls-label);
  text-transform: uppercase;
  color: var(--ag2-ink-3);
  margin: 0;
}
.ag2 .ag2-eyebrow--blue, .ag2 .tag { color: var(--ag2-blue); }

.ag2 a { color: var(--ag2-blue); text-decoration: none; }
.ag2 a:hover { color: var(--ag2-blue-hover); }
.ag2 .blue { color: var(--ag2-blue); }

/* Une seule règle de focus pour tout le produit. Visible sur fond clair,
   jamais supprimée : le thème clair ne doit pas coûter l'accessibilité. */
.ag2 :focus-visible {
  outline: 2px solid var(--ag2-blue);
  outline-offset: 2px;
  border-radius: var(--ag2-r-1);
}

/* ------------------------------------------------------- 4. MISE EN PAGE */

.ag2 .ag2-container,
.ag2 .wrap,
.ag2 .lp {
  width: 100%;
  max-width: var(--ag2-w);
  margin-inline: auto;
  padding-inline: var(--ag2-pad-x);
  box-sizing: border-box;
}
.ag2 .ag2-container--prose { max-width: var(--ag2-w-prose); }
.ag2 .ag2-container--wide { max-width: var(--ag2-w-wide); }

.ag2 .ag2-section,
.ag2 .lp-section {
  padding-block: var(--ag2-section);
  border-top: 1px solid var(--ag2-line);
}
.ag2 .ag2-section:first-of-type,
.ag2 .lp-section:first-of-type { border-top: 0; }
.ag2 .ag2-section--flat { background: var(--ag2-bg-alt); }

.ag2 .ag2-stack { display: grid; gap: var(--ag2-4); }
.ag2 .ag2-stack--tight { gap: var(--ag2-2); }
.ag2 .ag2-stack--loose { gap: var(--ag2-6); }

.ag2 .ag2-grid { display: grid; gap: var(--ag2-4); }
.ag2 .ag2-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ag2 .ag2-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.ag2 .ag2-rule { height: 1px; border: 0; background: var(--ag2-line); margin: 0; }
.ag2 .ag2-rule--gold { background: var(--ag2-gold); opacity: 0.5; }

/* ------------------------------------- 5. SHELL PRODUIT (nav, en-tête, pied) */

/* La barre haute. Filet d'un pixel en bas, fond translucide : la page glisse
   dessous sans que la barre devienne un bandeau opaque. */
.ag2 .ag2-topbar,
.ag2 .topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ag2-4);
  height: 56px;
  padding-inline: var(--ag2-pad-x);
  margin-inline: calc(var(--ag2-pad-x) * -1);
  background: color-mix(in srgb, var(--ag2-bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ag2-line);
}
.ag2 .ag2-topbar__brand,
.ag2 .topbar .home {
  display: inline-flex;
  align-items: center;
  gap: var(--ag2-2);
  color: var(--ag2-ink);
  font-family: var(--ag2-sans);
  font-size: var(--ag2-t-ui);
  font-weight: 620;
  letter-spacing: 0.02em;
}
.ag2 .topbar .home img,
.ag2 .ag2-topbar__brand img { width: 22px; height: 22px; display: block; }
.ag2 .ag2-topbar__back,
.ag2 .topbar .back {
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag2-ink-3);
  padding: var(--ag2-2) var(--ag2-3);
  border: 1px solid var(--ag2-line);
  border-radius: var(--ag2-r-1);
  transition: border-color var(--ag2-fast) var(--ag2-ease), color var(--ag2-fast) var(--ag2-ease);
}
.ag2 .ag2-topbar__back:hover,
.ag2 .topbar .back:hover { color: var(--ag2-ink); border-color: var(--ag2-line-ink); }

/* L'en-tête de page. Il répond aux quatre questions de navigation : où je suis,
   ce que j'apprends, pourquoi, et quoi faire ensuite. */
.ag2 .ag2-pagehead,
.ag2 .lp-hero,
.ag2 .courses-head {
  display: grid;
  gap: var(--ag2-4);
  padding-block: var(--ag2-8) var(--ag2-7);
  border-bottom: 1px solid var(--ag2-line);
  text-align: left;
}
.ag2 .ag2-pagehead .ag2-lead,
.ag2 .lp-hero .lead,
.ag2 .courses-head .sub { max-width: 62ch; }
.ag2 .lp-hero .eyemini,
.ag2 .courses-head .eyemini { width: 34px; height: 34px; }

/* Fil d'Ariane — « où suis-je ? » répondu littéralement. */
.ag2 .ag2-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ag2-2);
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ag2-ink-3);
}
.ag2 .ag2-crumbs a { color: var(--ag2-ink-3); }
.ag2 .ag2-crumbs a:hover { color: var(--ag2-blue); }
.ag2 .ag2-crumbs [aria-current='page'] { color: var(--ag2-ink); }

.ag2 .ag2-foot,
.ag2 .foot {
  margin-top: var(--ag2-9);
  padding-block: var(--ag2-6);
  border-top: 1px solid var(--ag2-line);
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ag2-ink-3);
  text-align: left;
}

/* ------------------------------------------------------- 6. SURFACES */

.ag2 .ag2-card,
.ag2 .card,
.ag2 .fstep {
  display: block;
  background: var(--ag2-surface);
  border: 1px solid var(--ag2-line);
  border-radius: var(--ag2-r-2);
  padding: var(--ag2-5);
  box-shadow: var(--ag2-shadow-0);
  transition: border-color var(--ag2-fast) var(--ag2-ease),
              box-shadow var(--ag2-fast) var(--ag2-ease),
              transform var(--ag2-fast) var(--ag2-ease);
}
/* Le survol ne fait pas décoller la carte de trois pixels : il fonce le filet.
   C'est la manière dont la référence signale l'interactivité, et c'est plus
   calme. Réservé aux cartes réellement cliquables. */
.ag2 a.ag2-card:hover,
.ag2 a.card:hover {
  border-color: var(--ag2-line-ink);
  box-shadow: var(--ag2-shadow-1);
}
.ag2 .ag2-card h3, .ag2 .card h3, .ag2 .fstep h3 { margin-bottom: var(--ag2-2); }
.ag2 .ag2-card p, .ag2 .card p, .ag2 .fstep p { font-size: var(--ag2-t-ui); color: var(--ag2-ink-2); }

.ag2 .ag2-card--sunk { background: var(--ag2-surface-sunk); }
.ag2 .locked-card { background: var(--ag2-surface-sunk); border-style: dashed; }
.ag2 .locked-card h3 { color: var(--ag2-ink-2); }

.ag2 .c-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ag2-3);
  margin-top: var(--ag2-4);
  padding-top: var(--ag2-3);
  border-top: 1px solid var(--ag2-line);
}
.ag2 .c-go { font-size: var(--ag2-t-ui); font-weight: 550; color: var(--ag2-blue); }
.ag2 .c-go.soon { color: var(--ag2-ink-3); }

.ag2 .courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ag2-4);
  padding-block: var(--ag2-7);
}
.ag2 .flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ag2-4);
  margin-top: var(--ag2-5);
}

/* ------------------------------------------------------- 7. BOUTONS */

.ag2 .ag2-btn,
.ag2 .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ag2-2);
  min-height: 44px; /* cible tactile confortable, y compris sur petit mobile */
  padding: 0 var(--ag2-5);
  border: 1px solid transparent;
  border-radius: var(--ag2-r-3);
  background: var(--ag2-blue);
  color: var(--ag2-ink-inverse);
  font-family: var(--ag2-sans);
  font-size: var(--ag2-t-ui);
  font-weight: 560;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background var(--ag2-fast) var(--ag2-ease),
              transform var(--ag2-fast) var(--ag2-ease);
}
.ag2 .ag2-btn:hover,
.ag2 .btn-primary:hover { background: var(--ag2-blue-hover); color: var(--ag2-ink-inverse); }
.ag2 .ag2-btn:active,
.ag2 .btn-primary:active { transform: translateY(1px); }

.ag2 .ag2-btn--secondary {
  background: var(--ag2-surface);
  color: var(--ag2-ink);
  border-color: var(--ag2-line-strong);
}
.ag2 .ag2-btn--secondary:hover {
  background: var(--ag2-surface);
  color: var(--ag2-ink);
  border-color: var(--ag2-line-ink);
}
.ag2 .ag2-btn--ghost {
  background: transparent;
  color: var(--ag2-blue);
  border-color: transparent;
  padding-inline: var(--ag2-3);
}
.ag2 .ag2-btn--ghost:hover { background: var(--ag2-blue-ghost); color: var(--ag2-blue-hover); }

.ag2 .ag2-btn[disabled],
.ag2 .ag2-btn[aria-disabled='true'] {
  background: var(--ag2-line);
  color: var(--ag2-ink-3);
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------- 8. BADGES, PILULES, MÉTRIQUES */

.ag2 .ag2-badge,
.ag2 .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ag2-1);
  padding: 3px var(--ag2-2);
  border: 1px solid var(--ag2-line);
  border-radius: var(--ag2-r-pill);
  background: var(--ag2-surface);
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag2-ink-3);
  white-space: nowrap;
}
.ag2 .ag2-badge--blue,
.ag2 .pill.done {
  color: var(--ag2-blue-deep);
  border-color: rgba(37, 99, 235, 0.3);
  background: var(--ag2-blue-ghost);
}
.ag2 .ag2-badge--ok { color: var(--ag2-ok); border-color: rgba(21, 128, 61, 0.3); background: var(--ag2-ok-wash); }

/* L'OR. Le seul endroit du fichier où il porte une surface. */
.ag2 .ag2-badge--premium {
  color: var(--ag2-gold-ink);
  border-color: var(--ag2-gold-line);
  background: var(--ag2-gold-wash);
}

.ag2 .ag2-metric { display: grid; gap: var(--ag2-1); }
.ag2 .ag2-metric__value {
  font-family: var(--ag2-sans);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ag2-ink);
  font-variant-numeric: tabular-nums;
}
.ag2 .ag2-metric--gold .ag2-metric__value { color: var(--ag2-gold-ink); }
.ag2 .ag2-metric__label {
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  letter-spacing: var(--ag2-ls-label);
  text-transform: uppercase;
  color: var(--ag2-ink-3);
}

/* --------------------------------------------- 9. LISTES, PAIRES, ENCARTS */

.ag2 .ag2-bullets,
.ag2 .bullets { list-style: none; margin: var(--ag2-5) 0 0; padding: 0; display: grid; gap: 0; }
.ag2 .ag2-bullets li,
.ag2 .bullets li {
  padding: var(--ag2-3) 0 var(--ag2-3) var(--ag2-5);
  border-top: 1px solid var(--ag2-line);
  color: var(--ag2-ink-2);
  font-size: var(--ag2-t-ui);
  position: relative;
}
.ag2 .ag2-bullets li:last-child,
.ag2 .bullets li:last-child { border-bottom: 1px solid var(--ag2-line); }
/* Une puce carrée de 5px, bleue. Un rond gris aurait été invisible. */
.ag2 .ag2-bullets li::before,
.ag2 .bullets li::before {
  content: '';
  position: absolute;
  left: var(--ag2-2);
  top: calc(var(--ag2-3) + 0.6em);
  width: 5px;
  height: 5px;
  background: var(--ag2-blue);
  border-radius: 1px;
}

.ag2 .kv { display: grid; gap: 0; margin-top: var(--ag2-5); border-top: 1px solid var(--ag2-line); }
.ag2 .kv .row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: var(--ag2-5);
  padding: var(--ag2-4) 0;
  border-bottom: 1px solid var(--ag2-line);
}
.ag2 .kv .k {
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  letter-spacing: var(--ag2-ls-label);
  text-transform: uppercase;
  color: var(--ag2-ink-3);
}
.ag2 .kv .v { color: var(--ag2-ink-2); font-size: var(--ag2-t-ui); }

.ag2 .ag2-callout {
  display: grid;
  gap: var(--ag2-2);
  padding: var(--ag2-4);
  border: 1px solid var(--ag2-line);
  border-left: 2px solid var(--ag2-blue);
  border-radius: 0 var(--ag2-r-2) var(--ag2-r-2) 0;
  background: var(--ag2-surface);
  font-size: var(--ag2-t-ui);
}
.ag2 .ag2-callout--gold { border-left-color: var(--ag2-gold); background: var(--ag2-gold-wash); }

/* ------------------------------------------------- 10. FORMULAIRES */

.ag2 .ag2-field { display: grid; gap: var(--ag2-2); }
.ag2 .ag2-field__label {
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  letter-spacing: var(--ag2-ls-label);
  text-transform: uppercase;
  color: var(--ag2-ink-3);
}
.ag2 .ag2-input,
.ag2 input[type='text'], .ag2 input[type='email'], .ag2 input[type='tel'], .ag2 select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ag2-3);
  border: 1px solid var(--ag2-line-strong);
  border-radius: var(--ag2-r-2);
  background: var(--ag2-surface);
  color: var(--ag2-ink);
  font-family: var(--ag2-sans);
  font-size: var(--ag2-t-body); /* 16px : en dessous, iOS zoome au focus */
  box-sizing: border-box;
  transition: border-color var(--ag2-fast) var(--ag2-ease), box-shadow var(--ag2-fast) var(--ag2-ease);
}
.ag2 .ag2-input:focus,
.ag2 input:focus, .ag2 select:focus {
  outline: none;
  border-color: var(--ag2-blue);
  box-shadow: 0 0 0 3px var(--ag2-blue-ring);
}
.ag2 .ag2-input[aria-invalid='true'] { border-color: var(--ag2-err); }
.ag2 .ag2-field__error { font-size: var(--ag2-t-label); color: var(--ag2-err); }

/* ----------------------------------------------------- 11. TABLEAUX */

.ag2 .ag2-tablewrap { overflow-x: auto; border: 1px solid var(--ag2-line); border-radius: var(--ag2-r-2); }
.ag2 .ag2-table { width: 100%; border-collapse: collapse; font-size: var(--ag2-t-ui); }
.ag2 .ag2-table th {
  text-align: left;
  padding: var(--ag2-3) var(--ag2-4);
  border-bottom: 1px solid var(--ag2-line);
  background: var(--ag2-surface-sunk);
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  letter-spacing: var(--ag2-ls-label);
  text-transform: uppercase;
  color: var(--ag2-ink-3);
  font-weight: 500;
}
.ag2 .ag2-table td { padding: var(--ag2-3) var(--ag2-4); border-bottom: 1px solid var(--ag2-line); color: var(--ag2-ink-2); }
.ag2 .ag2-table tr:last-child td { border-bottom: 0; }

/* ------------------------------------------- 12. PONT COMMERCIAL SOBRE */

/* « Tu as appris → voici la suite ». Jamais un bandeau criard : une carte de
   fin de page, cadrée par les mêmes filets que le reste. */
.ag2 .ag2-bridge,
.ag2 .lp-cta {
  display: grid;
  gap: var(--ag2-4);
  justify-items: start;
  margin-top: var(--ag2-8);
  padding: var(--ag2-7) var(--ag2-6);
  border: 1px solid var(--ag2-line);
  border-radius: var(--ag2-r-2);
  background: var(--ag2-surface);
  text-align: left;
}
.ag2 .ag2-bridge p, .ag2 .lp-cta p { max-width: 56ch; }
.ag2 .lp-cta .eyemini { width: 40px; height: 40px; margin: 0 !important; }

/* ------------------------------------------- 13. NEUTRALISATION DU LEGACY */

/* Les pages migrées chargent encore `styles.css`, écrit pour le thème noir, et
   qui sert AUSSI la page d'accueil verrouillée. On n'y touche donc pas.

   LA MÉTHODE. On n'énumère pas les règles héritées une par une — il y en a des
   dizaines, on en oublierait, et la prochaine règle ajoutée à `styles.css`
   rouvrirait le trou. On REDÉFINIT SES VARIABLES à l'intérieur de `.ag2`.
   Chaque règle legacy qui écrit `background: var(--surface)` devient alors
   claire d'elle-même, sans être réécrite ni même connue de nous.

   C'est la seule partie de ce fichier qui redéfinit des tokens qui ne lui
   appartiennent pas ; elle est confinée à `.ag2` et ne peut donc pas atteindre
   la page d'accueil. */
.ag2 {
  --bg: var(--ag2-bg);
  --bg-2: var(--ag2-bg-alt);
  --surface: var(--ag2-surface);
  --surface-2: var(--ag2-surface-sunk);
  --line: var(--ag2-line);
  --line-soft: var(--ag2-line);
  --ink: var(--ag2-ink);
  --gray: var(--ag2-ink-2);
  --muted: var(--ag2-ink-3);
  --blue: var(--ag2-blue);
  --blue-light: var(--ag2-blue);       /* le bleu clair du thème noir est illisible sur blanc */
  --blue-deep: var(--ag2-blue-deep);
  --green: var(--ag2-ok);
  --glow: none;
  --maxw: var(--ag2-w);
}
.ag2.grid-bg,
.ag2 .grid-bg { background-image: none; background-color: var(--ag2-bg); }
.ag2 .eyemini, .ag2 .topbar .home img { filter: none; }

/* Restent les valeurs écrites en dur, que la redéfinition de tokens n'atteint
   pas. Elles sont peu nombreuses et toutes claires — donc invisibles sur blanc.
   Les corriger ici est un devoir de lisibilité, pas une préférence. */
.ag2 .bullets li,
.ag2 .kv .v,
.ag2 .lstep p, .ag2 .lstep ul, .ag2 .lstep li,
.ag2 .expert p { color: var(--ag2-ink-2); }
.ag2 .bullets li b,
.ag2 .lstep b, .ag2 .kv .v b { color: var(--ag2-ink); }
.ag2 .bullets li, .ag2 .kv .row, .ag2 .flow .fstep { background: transparent; }
.ag2 .flow .fstep, .ag2 .lstep { background: var(--ag2-surface); }

/* La pastille numérotée du thème noir : un rond de 34 px à gauche, qui sur fond
   clair se lisait comme une tache derrière la première lettre du titre. On la
   remet à sa place — carrée, alignée sur la trame, et le padding qui allait
   avec disparaît. */
.ag2 .flow .fstep { padding: var(--ag2-5); }
.ag2 .flow .fstep::before {
  position: static;
  display: inline-grid;
  width: 26px;
  height: 26px;
  margin-bottom: var(--ag2-3);
  border-radius: var(--ag2-r-1);
  background: var(--ag2-blue-ghost);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--ag2-blue-deep);
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
}

/* Le thème noir centrait ses héros et ses appels à l'action, et centrait aussi
   ses paragraphes avec `margin: auto`. Le système V2 est aligné à gauche : un
   texte long centré se lit mal, et une colonne de lecture doit avoir un bord
   gauche stable. On rend donc les marges automatiques à la gauche. */
.ag2 .lp-hero, .ag2 .lp-cta, .ag2 .lp-hero .lead,
.ag2 .lp-cta p, .ag2 .courses-head { text-align: left; }
.ag2 .lp-hero .lead, .ag2 .lp-cta p, .ag2 .courses-head .sub { margin-left: 0; margin-right: 0; }
.ag2 .lp-hero [style*='text-align:center'],
.ag2 .lp-hero [style*='text-align: center'] { text-align: left !important; }

/* Le titre doit respirer au-dessus de son texte : le thème noir le collait à
   8 px parce que ses titres étaient en capitales et très hauts. */
.ag2 .lp-section h2 { margin-bottom: var(--ag2-4); }
.ag2 .lp-section > p { max-width: 68ch; margin-bottom: var(--ag2-3); }
.ag2 .lp-section h2, .ag2 .lp-cta h2, .ag2 .courses-head h1,
.ag2 .lp-hero h1, .ag2 .lstep h3 { text-transform: none; }

/* --- Le débordement de 206 px sur /formation-etape-1, et sa vraie cause. ---
   Ce n'était ni une largeur en dur ni une image trop grande. `.fsteps` est une
   grille ; un enfant de grille vaut `min-width: auto`, donc au moins sa largeur
   min-content ; et `.lstep` contient un `<pre class>` en `white-space: pre`
   dont la min-content est la ligne la plus longue du terminal. La piste se
   dimensionnait donc sur une ligne de code, et la page entière s'élargissait à
   574 px sur un écran de 390.

   `overflow-x: hidden` aurait masqué le symptôme en laissant la page large et
   tronquée. On rend la piste bornée et l'enfant compressible : le terminal
   défile alors DANS sa propre boîte, ce qu'il aurait toujours dû faire. */
.ag2 .fsteps { grid-template-columns: minmax(0, 1fr); }
.ag2 .fsteps > *, .ag2 .lstep, .ag2 .ag2-grid > * { min-width: 0; }
.ag2 .lstep pre, .ag2 .terminal pre, .ag2 pre { overflow-x: auto; max-width: 100%; }

/* Les composants de leçon, repeints pour le canevas clair. Ils gardent leur
   structure : c'est une passe de peau, pas une réécriture. */
.ag2 .lstep {
  border: 1px solid var(--ag2-line);
  border-radius: var(--ag2-r-2);
  background: var(--ag2-surface);
  padding: var(--ag2-5);
}
.ag2 .lstep h3 { font-size: var(--ag2-t-h3); text-transform: none; line-height: 1.35; letter-spacing: -0.01em; }
.ag2 .lstep p, .ag2 .lstep ul, .ag2 .lstep li { color: var(--ag2-ink-2); font-size: var(--ag2-t-ui); }
.ag2 .lstep .lstep-h .b {
  background: var(--ag2-blue-ghost);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--ag2-blue-deep);
  border-radius: var(--ag2-r-1);
  font-family: var(--ag2-mono);
}
.ag2 .expert {
  border-left: 2px solid var(--ag2-blue);
  background: var(--ag2-blue-ghost);
  border-radius: 0 var(--ag2-r-2) var(--ag2-r-2) 0;
  padding: var(--ag2-3) var(--ag2-4);
}
.ag2 .expert .lab { color: var(--ag2-blue-deep); font-family: var(--ag2-mono); letter-spacing: var(--ag2-ls-label); }
.ag2 .expert p { color: var(--ag2-ink-2); }
.ag2 .step-img { border: 1px solid var(--ag2-line); border-radius: var(--ag2-r-2); }

/* Le terminal reste sombre — c'est un terminal. Un terminal blanc ne ressemble
   à rien, et le contraste avec le canevas clair en fait une vraie citation.

   MAIS IL CRÉE UN PIÈGE, ET LA MESURE L'A ATTRAPÉ. À l'intérieur, le fond est
   `#04060C` alors que tout le reste de la page est clair. Les tokens sémantiques
   retargés plus haut — `--green` passé à `#15803D` pour être lisible SUR BLANC —
   y tombent à 4,04:1, sous le seuil AA. Un token n'a de sens que relativement à
   son fond ; celui-ci change de fond au milieu de la page.
   Trouvé en mesurant le rendu réel, pas en relisant la palette. */
.ag2 .terminal { border: 1px solid var(--ag2-line-strong); border-radius: var(--ag2-r-2); }
.ag2 .terminal,
.ag2 .pipe-log {
  --green: #4ade80;   /* vert clair : 8,9:1 sur #04060C */
  --blue: #93c5fd;
  --blue-light: #93c5fd;
  --muted: #8b98b0;
}
.ag2 .terminal .ok, .ag2 .pipe-log .ok { color: #4ade80; }

/* --- /merci, page de retour Stripe. Même méthode : elle définit ses propres
   tokens dans `.mrc-page`, on les retarge plutôt que de réécrire ses règles.
   C'est la dernière page du tunnel payant : elle ne peut pas être la seule à
   rester noire après un parcours devenu clair. --- */
.ag2 .mrc-page {
  --text-primary: var(--ag2-ink);
  --text-secondary: var(--ag2-ink-2);
  --text-muted: var(--ag2-ink-3);
  --border-subtle: var(--ag2-line);
  --font-display: var(--ag2-sans);
  background: var(--ag2-bg);
  color: var(--ag2-ink-2);
}
.ag2 .mrc-in { text-align: left; }
/* La pastille de validation : verte, pas grise. Un paiement réussi mérite le
   seul signal positif du système. */
.ag2 .mrc-mark {
  background: var(--ag2-ok-wash);
  border: 1px solid rgba(21, 128, 61, 0.3);
  border-radius: var(--ag2-r-2);
}
.ag2 .mrc-mark svg { color: var(--ag2-ok); }
.ag2 .mrc-steps { background: var(--ag2-surface); border-radius: var(--ag2-r-2); }
.ag2 .mrc-steps li::before,
.ag2 .mrc-steps li > span:first-child {
  background: var(--ag2-blue-ghost);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--ag2-blue-deep);
  border-radius: var(--ag2-r-1);
}
.ag2 .mrc-back { color: var(--ag2-blue); }
.ag2 .mrc-back:hover { color: var(--ag2-blue-hover); }

/* --------------------------------------------------- 14. RESPONSIVE */

@media (max-width: 640px) {
  .ag2 { --ag2-pad-x: 20px; }
  .ag2 .kv .row { grid-template-columns: 1fr; gap: var(--ag2-1); }
  .ag2 .c-foot { flex-wrap: wrap; }
  .ag2 .ag2-bridge, .ag2 .lp-cta { padding: var(--ag2-6) var(--ag2-4); }
  .ag2 .ag2-topbar, .ag2 .topbar { height: 52px; }
  /* Les media, tableaux et blocs de code ne débordent jamais la page : ils
     défilent dans leur propre boîte. C'était l'un des défauts mesurés. */
  .ag2 img, .ag2 video, .ag2 iframe, .ag2 svg { max-width: 100%; height: auto; }
  .ag2 pre { overflow-x: auto; }
}

@media print {
  .ag2::before { display: none; }
  .ag2 .ag2-topbar, .ag2 .topbar { position: static; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ag2 *, .ag2 *::before, .ag2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   WQ-UI-V1 — BLOC « PARTIE 2 » (pages cours)
   ----------------------------------------------------------------------------
   POURQUOI TOUT EST ÉCRIT ICI ET RIEN DANS `styles.css`.
   `.locked` (styles.css:399) et `.cta` (styles.css:409) sont définis dans une
   feuille que LA PAGE D'ACCUEIL CHARGE. Y toucher ferait fuir le changement sur
   `/`, ce que le périmètre interdit. Ce fichier n'est jamais chargé par
   l'accueil et chaque règle ci-dessous est préfixée `.ag2` : l'isolation est
   mécanique, pas une promesse.

   CE QUI ÉTAIT CASSÉ.
   · `.cta` porte un violet à halo massif (rgba(91,33,182,.32)) avec un texte
     violet sur violet — contraste en échec. `.btn-primary` avait déjà sa
     surcharge `.ag2` (l. 328) ; `.cta` avait été oublié. C'est la seule raison
     pour laquelle ce bouton était encore violet.
   · `.locked .soon-list { color:#d4d4d8 }` — un gris pâle pensé pour un fond
     noir. Sur ivoire il fait lire « désactivé » là où on veut lire « à venir ».
   · `.locked` gardait gradient et rayon 18px de la grammaire sombre.

   PATRON. Statut explicite par élément (21st Roadmap Card 5652) + badge à deux
   parties (21st Status Badge 521), portés à la grammaire du socle : filets d'un
   pixel, petits rayons, aucune ombre colorée. Le verrouillage se lit comme une
   intention, jamais comme une opacité.
   ========================================================================= */

.ag2 {
  --ag2-lock-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.ag2 .ag2-lock {
  max-width: 680px;
  margin: var(--ag2-section) auto 0;
  padding: var(--ag2-7) var(--ag2-5) var(--ag2-6);
  text-align: center;
  background: var(--ag2-surface);
  border: 1px solid var(--ag2-line);
  border-radius: var(--ag2-r-3);
  box-shadow: var(--ag2-shadow-1);
}

.ag2 .ag2-lock__eyebrow {
  margin: 0 0 var(--ag2-4);
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  letter-spacing: var(--ag2-ls-label);
  text-transform: uppercase;
  color: var(--ag2-ink-3);
}

/* L'œil canonique. Le PNG précédent (eye.png) n'avait AUCUN canal alpha : il
   posait littéralement un carré noir au milieu d'une page ivoire.

   Celui-ci est transparent — vérifié, A=0 aux quatre coins — mais son disque
   est un bleu nuit presque noir : c'est une image de vortex spatial, faite pour
   un fond sombre. Posé nu sur l'ivoire, il redevient une tache. On ne
   recolorise pas un raster de marque : on l'ASSUME EN MÉDAILLON, avec l'anneau
   bleu que porte déjà la référence de marque. La tache devient un emblème. */
.ag2 .ag2-lock__mark {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--ag2-4);
  border-radius: var(--ag2-r-pill);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.30),
    0 0 0 7px var(--ag2-blue-ghost);
}

.ag2 .ag2-lock h3 {
  margin: 0 0 var(--ag2-3);
  font-family: var(--ag2-sans);
  font-size: var(--ag2-t-h2);
  font-weight: 650;
  line-height: var(--ag2-lh-title);
  letter-spacing: var(--ag2-ls-title);
  text-transform: none;   /* styles.css imposait l'uppercase de l'ancien système */
  color: var(--ag2-ink);
}

/* La date n'est plus un orphelin : elle est la valeur d'un statut. */
.ag2 .ag2-lock__status {
  display: inline-flex;
  align-items: stretch;
  margin: 0 0 var(--ag2-5);
  border: 1px solid var(--ag2-line);
  border-radius: var(--ag2-r-pill);
  overflow: hidden;
  font-family: var(--ag2-mono);
  font-size: var(--ag2-t-label);
  letter-spacing: var(--ag2-ls-label);
  text-transform: uppercase;
}
.ag2 .ag2-lock__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--ag2-3);
  background: var(--ag2-bg-alt);
  color: var(--ag2-ink-3);
  border-right: 1px solid var(--ag2-line);
}
.ag2 .ag2-lock__chip::before {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  /* cadenas : masque SVG inline, aucun fichier, aucune requête */
  -webkit-mask: var(--ag2-lock-ico) center / contain no-repeat;
  mask: var(--ag2-lock-ico) center / contain no-repeat;
}
.ag2 .ag2-lock__status .when {
  display: inline-flex;
  align-items: center;
  padding: 7px var(--ag2-3);
  background: var(--ag2-surface);
  /* était `var(--blue-light)` — un bleu clair pensé pour du noir, illisible ici */
  color: var(--ag2-blue-deep);
  margin: 0;
}

.ag2 .ag2-lock__intro {
  max-width: 46ch;
  margin: 0 auto var(--ag2-5);
  color: var(--ag2-ink-2);
  font-size: var(--ag2-t-body);
  line-height: var(--ag2-lh-body);
}

/* La liste des éléments à venir. Chacun porte son cadenas : c'est le statut qui
   dit « verrouillé », pas la pâleur du texte. L'encre reste pleinement lisible
   (--ag2-ink-2, 9.8:1) — un contenu qu'on ne peut pas lire ne donne pas envie. */
.ag2 .ag2-lock__list {
  list-style: none;
  max-width: 46ch;
  margin: 0 auto var(--ag2-5);
  padding: 0;
  text-align: left;
  border-top: 1px solid var(--ag2-line);
  border-bottom: 1px solid var(--ag2-line);
}
.ag2 .ag2-lock__list li {
  position: relative;
  margin: 0;
  padding: var(--ag2-3) 0 var(--ag2-3) var(--ag2-7);
  color: var(--ag2-ink-2);
  font-size: var(--ag2-t-ui);
  line-height: 1.5;
}
.ag2 .ag2-lock__list li + li { border-top: 1px solid var(--ag2-line); }

/* Le rail vertical + la pastille : même grammaire que la timeline des modules
   de /formation. La page la plus faible rejoint la plus mature. */
.ag2 .ag2-lock__list li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ag2-line);
}
.ag2 .ag2-lock__list li:first-child::before { top: 50%; }
.ag2 .ag2-lock__list li:last-child::before { bottom: 50%; }
/* Un cadenas, PAS un cercle vide. Un cercle vide sur un rail se lit comme une
   case à cocher non cochée — donc comme quelque chose que l'utilisateur peut
   faire. Or il ne peut rien faire ici : c'est verrouillé. L'icône doit dire le
   statut, pas suggérer une action. */
.ag2 .ag2-lock__list li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: var(--ag2-ink-3);
  -webkit-mask: var(--ag2-lock-ico) center / contain no-repeat;
  mask: var(--ag2-lock-ico) center / contain no-repeat;
  /* le halo blanc coupe le rail derrière l'icône */
  filter: drop-shadow(0 0 3px var(--ag2-surface))
          drop-shadow(0 0 3px var(--ag2-surface));
}

.ag2 .ag2-lock__note {
  margin: 0 0 var(--ag2-5);
  color: var(--ag2-ink-3);
  font-size: var(--ag2-t-ui);
}

/* ---- LE CTA. Reprise du primary du socle, à l'identique de `.ag2 .btn-primary`.
   Le halo violet de styles.css est neutralisé ici, sans ouvrir styles.css. ---- */
.ag2 .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ag2-2);
  min-height: 44px;
  margin-top: 0;
  padding: 0 var(--ag2-5);
  background: var(--ag2-blue);
  color: var(--ag2-ink-inverse);
  border: 1px solid var(--ag2-blue);
  border-radius: var(--ag2-r-1);
  box-shadow: none;
  font-family: var(--ag2-sans);
  font-size: var(--ag2-t-ui);
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background-color var(--ag2-fast) var(--ag2-ease),
              border-color var(--ag2-fast) var(--ag2-ease);
}
.ag2 .cta::before, .ag2 .cta::after { content: none; }
.ag2 .cta:hover {
  transform: none;
  background: var(--ag2-blue-hover);
  border-color: var(--ag2-blue-hover);
  color: var(--ag2-ink-inverse);
  box-shadow: none;
}
.ag2 .cta:active { transform: translateY(1px); background: var(--ag2-blue-deep); }
.ag2 .cta:focus-visible {
  outline: 2px solid var(--ag2-blue-deep);
  outline-offset: 3px;
  box-shadow: none;
}

/* Le `.soon-list` d'origine reste neutralisé au cas où une page le ré-emploie :
   son gris #d4d4d8 est un reste de thème sombre. */
.ag2 .locked .soon-list { color: var(--ag2-ink-2); }

@media (max-width: 640px) {
  .ag2 .ag2-lock { padding: var(--ag2-6) var(--ag2-4) var(--ag2-5); }
  .ag2 .ag2-lock__mark { width: 56px; height: 56px; }
  .ag2 .ag2-lock__status { flex-direction: column; align-items: stretch; text-align: center; }
  .ag2 .ag2-lock__chip { border-right: none; border-bottom: 1px solid var(--ag2-line); justify-content: center; }
  .ag2 .ag2-lock__status .when { justify-content: center; }
  .ag2 .cta { width: 100%; }
}

/* ---------------------------------------------- WQ-UI-V1 — SEUILS MESURÉS */
/* Mêmes correctifs que côté SPA, portés ici parce que les pages statiques
   lisent CE fichier et pas `theme-v2.css`. Valeurs issues d'une passe
   automatisée sur 6 viewports, pas d'une relecture. */

/* `--ag2-ink-3` donne 4.7:1 sur l'ivoire mais retombe à 4.35:1 sur
   `--ag2-bg-alt` — sous le seuil. Le jeton n'est pas en cause, son fond l'est. */
.ag2 .ag2-lock__chip { color: var(--ag2-ink-2); }   /* 4.35 → 9.1 */

/* Cibles tactiles : le wordmark et le retour de la barre haute mesuraient
   115×29 et 115×37. Seule la zone active grandit, pas le dessin. */
.ag2 .topbar .home,
.ag2 .topbar .back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}