/* ── OpusCV — pages « Guides CV » ────────────────────────────────────────────
   Complète landing-dynamique.css (tokens, header, footer, boutons) pour les
   pages générées par outils/generer.mjs. Mise en page de lecture : une
   colonne étroite, des blocs « avant / après » et un appel à l'app en fin
   d'article. Aucune animation. */

.guide { max-width: 740px; margin: 0 auto; padding: 40px 24px 96px; }

.fil { font-size: 13px; color: var(--ink-muted); margin-bottom: 28px; }
.fil a { color: var(--brand-500); text-decoration: none; font-weight: 600; }
.fil a:hover { text-decoration: underline; }

.guide h1 { font-size: 40px; line-height: 1.15; margin-bottom: 18px; }
.guide .chapo { font-size: 19px; line-height: 1.6; color: var(--ink); margin: 0 0 10px; }
.guide .maj { font-size: 13px; color: var(--ink-muted); margin: 0 0 36px; }

.guide article { font-size: 17px; line-height: 1.7; }
.guide article h2 { font-size: 27px; line-height: 1.25; margin: 44px 0 14px; }
.guide article h3 { font-size: 20px; line-height: 1.3; margin: 28px 0 10px; }
.guide article p { margin: 0 0 16px; }
.guide article ul, .guide article ol { margin: 0 0 18px; padding-left: 22px; }
.guide article li { margin-bottom: 8px; }
.guide article strong { font-weight: 700; }
.guide article a { color: var(--brand-500); font-weight: 600; }

/* Bloc « avant / après » : l'exemple est le cœur de chaque guide. */
.avant-apres {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 18px 0 24px;
}
.avant-apres > div {
  border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.55;
  border: 1px solid var(--paper-line); background: var(--paper-surface);
}
.avant-apres .etiquette {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 6px; color: var(--ink-muted);
}
.avant-apres .apres { border-color: var(--brand-400); background: var(--brand-50); }
.avant-apres .apres .etiquette { color: var(--brand-600); }
.avant-apres .contexte { grid-column: 1 / -1; font-size: 13px; color: var(--ink-muted); padding: 0 2px; border: 0; background: none; }

/* Encadré de conseil ou de mise en garde. */
.encadre {
  margin: 22px 0 26px; padding: 16px 18px; border-radius: 14px;
  background: var(--paper-surface); border-left: 4px solid var(--brand-500);
  font-size: 16px;
}
.encadre p:last-child, .encadre ul:last-child { margin-bottom: 0; }

/* Appel à l'app en fin d'article. */
.guide-cta {
  margin: 48px 0 0; padding: 28px 26px; border-radius: 18px; text-align: center;
  background: var(--paper-surface); border: 1px solid var(--paper-line);
}
.guide-cta h2 { font-size: 24px; margin-bottom: 10px; }
.guide-cta p { color: var(--ink-muted); font-size: 15px; margin: 0 0 18px; }

.guide-suite { margin-top: 40px; }
.guide-suite h2 { font-size: 20px; margin-bottom: 12px; }
.guide-suite ul { margin: 0; padding-left: 20px; }
.guide-suite li { margin-bottom: 8px; font-size: 16px; }
.guide-suite a { color: var(--brand-500); font-weight: 600; }

/* Sommaire /guides/. */
.guides-sommaire h1 { font-size: 40px; margin-bottom: 14px; }
.liste-guides { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.carte-guide {
  display: block; text-decoration: none; padding: 20px 22px; border-radius: 16px;
  background: var(--paper-surface); border: 1px solid var(--paper-line);
  transition: border-color .18s ease, transform .18s ease;
}
.carte-guide:hover { border-color: var(--brand-400); transform: translateY(-2px); }
.carte-guide h2 { font-size: 21px; margin-bottom: 6px; }
.carte-guide p { margin: 0; color: var(--ink-muted); font-size: 15px; }

@media (max-width: 640px) {
  .guide { padding: 28px 16px 72px; }
  .guide h1, .guides-sommaire h1 { font-size: 30px; }
  .guide .chapo { font-size: 17px; }
  .guide article { font-size: 16px; }
  .guide article h2 { font-size: 23px; }
  .avant-apres { grid-template-columns: 1fr; }
  header.site .btn { padding: 10px 14px; font-size: 13px; }
}

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