/* ============================================================================
   GUIDINEE — styles v2 (modèle « cours autoportant »).
   N'ajoute QUE les nouveaux blocs ; réutilise les tokens de main.css
   (--card, --bg, --line, --ink, --muted, --acc, --blue, --green, --amber,
    --red, --shadow, --radius) → hérite automatiquement du mode clair/sombre.
   Les blocs existants (.vocab, .pratique, .keypoints, .faq-block, .flashcheck,
   .res-list/.res-card) restent stylés par section.css.
   ========================================================================== */

.v2{
  --v2-soft:    color-mix(in srgb, var(--acc) 9%, var(--card));
  --v2-ok-soft: color-mix(in srgb, var(--green) 13%, var(--card));
  --v2-wa-soft: color-mix(in srgb, var(--amber) 14%, var(--card));
}

/* --- Cours développé : sous-parties --- */
.v2 .cours h3{ margin:26px 0 8px; font-size:1.12rem; font-weight:700; color:var(--ink); }
.v2 .cours p{ margin:0 0 14px; }

/* --- Diagramme (SVG généré) --- */
.v2 .v2-diagram{
  margin:24px 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.v2 .v2-diagram svg{ display:block; width:100%; height:auto; }
.v2 .v2-diagram figcaption{ font-size:.86rem; color:var(--muted); margin-top:10px; text-align:center; }
.v2 .svg-node{ fill:var(--block); stroke:var(--line); stroke-width:1.5; }
.v2 .svg-net{  fill:none; stroke:var(--acc); stroke-width:1.5; stroke-dasharray:5 4; }
.v2 .svg-wire{ fill:none; stroke:var(--muted); stroke-width:2; }
.v2 .svg-flow{ fill:none; stroke:var(--blue); stroke-width:2.5; }
.v2 .svg-t{ fill:var(--ink);   font-family:inherit; font-size:13px; font-weight:600; }
.v2 .svg-m{ fill:var(--muted); font-family:ui-monospace,monospace; font-size:11px; }
.v2 .svg-a{ fill:var(--blue); }

/* --- Exemple concret --- */
.v2 .v2-example{
  background:var(--v2-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin:22px 0;
}
.v2 .v2-example h3{ margin:0 0 10px; font-size:1.08rem; }
.v2 .v2-example pre{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; overflow-x:auto; margin:12px 0;
}
.v2 .v2-example pre code{ font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:.82rem; line-height:1.6; white-space:pre; }

/* --- Conseils de pro & pièges (deux colonnes) --- */
.v2 .v2-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; }
@media(max-width:600px){ .v2 .v2-two{ grid-template-columns:1fr; } }
.v2 .v2-tip,.v2 .v2-trap{ border-radius:var(--radius); padding:16px 18px; border:1px solid; }
.v2 .v2-tip{  background:var(--v2-ok-soft); border-color:color-mix(in srgb,var(--green) 35%,var(--line)); }
.v2 .v2-trap{ background:var(--v2-wa-soft); border-color:color-mix(in srgb,var(--amber) 35%,var(--line)); }
.v2 .v2-tip h3,.v2 .v2-trap h3{ margin:0 0 8px; font-size:1rem; }
.v2 .v2-tip h3{ color:var(--green); } .v2 .v2-trap h3{ color:var(--amber); }
.v2 .v2-tip ul,.v2 .v2-trap ul{ margin:0; padding-left:1.2em; }

/* --- Examen de fin de niveau (durci) : tags de difficulté --- */
.v2 .v2-qtag{
  display:inline-block; font-family:ui-monospace,monospace; font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:6px; margin:0 0 8px;
  background:var(--v2-soft); color:var(--acc); border:1px solid var(--line);
}

/* --- Chapitre « Dans la pratique » : ossature --- */
.v2 .v2-dp{ display:grid; gap:12px; margin:18px 0; }
.v2 .v2-dp .row{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px; box-shadow:var(--shadow); }
.v2 .v2-dp .row h3{ margin:0 0 4px; font-size:1.02rem; display:flex; gap:10px; align-items:baseline; }
.v2 .v2-dp .row h3 .n{ font-family:ui-monospace,monospace; font-size:.8rem; color:var(--blue); }
.v2 .v2-dp .row p{ margin:0; color:var(--muted); font-size:.92rem; }

/* --- Encadré note / avertissement --- */
.v2 .v2-note{
  border-left:3px solid var(--blue); background:var(--v2-soft);
  padding:12px 16px; border-radius:0 10px 10px 0; margin:18px 0; color:var(--muted);
}
.v2 .v2-note strong{ color:var(--ink); }
.v2 .v2-callout{
  border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line)); background:var(--v2-wa-soft);
  border-radius:12px; padding:14px 16px; margin:18px 0; display:flex; gap:10px; align-items:flex-start;
}
.v2 .v2-callout p{ margin:0; }
.v2 .v2-callout strong{ color:var(--amber); }

/* --- Étiquette « ressources = optionnel » --- */
.v2 .res-optional{ font-size:.8rem; color:var(--muted); font-weight:400; }

/* ===== Niveau 6 « Dans la pratique » ===== */
/* Étude de cas */
.v2 .v2-case{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:18px 0; box-shadow:var(--shadow); }
.v2 .v2-case h3{ margin:0 0 6px; font-size:1.08rem; }
.v2 .v2-case .ctx{ color:var(--muted); margin:0 0 10px; font-size:.95rem; }
.v2 .v2-case ol{ margin:0 0 12px; padding-left:1.3em; }
.v2 .v2-case ol li{ margin-bottom:6px; }
.v2 .v2-case .res{ background:var(--v2-ok-soft); border-left:3px solid var(--green); border-radius:0 8px 8px 0; padding:10px 14px; margin:0; }
.v2 .v2-case .res b{ color:var(--green); }

/* Playbook (tableau symptôme → causes → actions) */
.v2 .v2-playbook{ overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.v2 .v2-playbook table{ border-collapse:collapse; width:100%; font-size:.9rem; background:var(--card); }
.v2 .v2-playbook th,.v2 .v2-playbook td{ text-align:left; padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:top; }
.v2 .v2-playbook thead th{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; background:var(--block); }
.v2 .v2-playbook tbody tr:last-child td{ border-bottom:0; }
.v2 .v2-playbook tbody tr:hover{ background:var(--hover); }
.v2 .v2-playbook td:first-child{ font-weight:600; color:var(--ink); }

/* Checklists */
.v2 .v2-checklist{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
@media(max-width:600px){ .v2 .v2-checklist{ grid-template-columns:1fr; } }
.v2 .v2-checklist .cl{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.v2 .v2-checklist .cl h3{ margin:0 0 10px; font-size:1rem; }
.v2 .v2-checklist ul{ list-style:none; margin:0; padding:0; }
.v2 .v2-checklist li{ position:relative; padding-left:26px; margin-bottom:8px; font-size:.92rem; }
.v2 .v2-checklist li::before{ content:"\2610"; position:absolute; left:2px; top:-1px; color:var(--acc); font-size:1.05rem; }