/* =====================================================================
   GUIDE du Créateur de frises — chargé après otoolia.css (variables --ot-*)
   ===================================================================== */
.guide { max-width: 940px; }
.guide h1 { margin-bottom: .3em; }
.guide .guide-lead { font-size: 1.12rem; color: var(--ot-text-soft); max-width: 720px; }
.guide section { scroll-margin-top: 80px; }
.guide h2 { display: flex; align-items: baseline; gap: .55em; margin-top: 2.4em; }
.guide h3 { margin-top: 1.7em; }
.guide .guide-num { flex: none; display: inline-grid; place-items: center; width: 1.65em; height: 1.65em; border-radius: 50%;
  background: var(--ot-brand); color: var(--ot-brand-ink); font-size: .78em; font-weight: 800; transform: translateY(-.08em); }
.guide-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2em 0 1.8em; }
.guide-sommaire { background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: var(--ot-radius); padding: 14px 20px 16px; margin: 0 0 1.5em; }
.guide-sommaire strong { display: block; margin-bottom: 6px; }
.guide-sommaire ol { columns: 2 280px; column-gap: 28px; margin: 0; padding-left: 1.4em; }
.guide-sommaire li { margin: 0 0 .25em; break-inside: avoid; }

/* captures d'écran */
.guide figure { margin: 1.5em 0; }
.guide figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff;
  border: 1px solid var(--ot-border); border-radius: var(--ot-radius-s); box-shadow: var(--ot-shadow); }
.guide figcaption { margin-top: .7em; font-size: .93rem; color: var(--ot-text-soft); }
.guide .figure-duo { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.guide .figure-duo figure { margin: 0; }
@media (max-width: 760px) { .guide .figure-duo { grid-template-columns: 1fr; } }

/* légende numérotée : mêmes pastilles rouges que sur les captures */
.legende { list-style: none; counter-reset: leg; padding: 0 !important; margin: .9em 0 0; display: grid; gap: 7px; }
.legende li { counter-increment: leg; position: relative; padding-left: 2.3em; margin: 0 !important; }
.legende li::before { content: counter(leg); position: absolute; left: 0; top: .08em; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: #e11d48; color: #fff; font-weight: 700; font-size: .82em; display: grid; place-items: center; }

/* encadrés, touches, code, tableaux, questions */
.guide-note { border-left: 4px solid var(--ot-brand); background: color-mix(in srgb, var(--ot-brand) 8%, var(--ot-surface));
  padding: 10px 16px; border-radius: 0 var(--ot-radius-s) var(--ot-radius-s) 0; margin: 1.2em 0; }
.guide-note p { margin: 0; }
.guide-note--attention { border-left-color: var(--ot-danger); background: color-mix(in srgb, var(--ot-danger) 8%, var(--ot-surface)); }
.guide kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--ot-border); border-bottom-width: 2px; border-radius: 6px;
  background: var(--ot-surface); font: .85em var(--ot-mono); white-space: nowrap; }
.guide pre { background: var(--ot-surface-2); border: 1px solid var(--ot-border); border-radius: var(--ot-radius-s);
  padding: 12px 16px; overflow-x: auto; font: .88rem/1.55 var(--ot-mono); margin: 1em 0; }
.guide code { font: .9em var(--ot-mono); background: var(--ot-surface-2); padding: 1px 5px; border-radius: 4px; }
.guide pre code { background: none; padding: 0; font-size: inherit; }
.guide-table { overflow-x: auto; margin: 1em 0; }
.guide table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--ot-border); }
.guide th { background: var(--ot-surface-2); font-weight: 700; }
.guide details { border: 1px solid var(--ot-border); border-radius: var(--ot-radius-s); background: var(--ot-surface); padding: 0 16px; margin: 8px 0; }
.guide details[open] { padding-bottom: 6px; }
.guide summary { cursor: pointer; padding: 11px 0; font-weight: 600; }
.guide-resume { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.guide-resume li { margin: 0 !important; padding-left: 2em; position: relative; }
.guide-resume li::before { content: "✓"; position: absolute; left: 0; color: var(--ot-success); font-weight: 800; }
@media (max-width: 560px) { .guide-sommaire ol { columns: 1; } }
@media print { .ot-header, .ot-footer, .ot-skip { display: none !important; } .guide-cta, .guide-sommaire { display: none; } .guide figure, .guide details { break-inside: avoid; } .guide details > * { display: block; } }