/* Page de référence « Créer les pages d’un cours SOMA » : lecture longue, aperçus isolés et code à copier. */
.guide { width:min(880px,calc(100% - 64px)); margin:0 auto; padding:64px 0 24px }
.guide-hero h1 { font-family:var(--sans); font-size:clamp(34px,4.6vw,54px); line-height:1.12; letter-spacing:-1.8px; font-weight:750; margin:14px 0 22px }
.guide-hero h1 em { color:var(--primary); font-style:normal }
.guide-hero .eyebrow { margin:0 }
.guide-intro { font-size:17px; line-height:1.8; color:var(--text); margin:0 0 18px }
.guide-livraison { margin:0 0 18px; padding:16px 20px; border:1px solid #c7d2fe; border-left:4px solid var(--primary); border-radius:14px; background:var(--primary-light); font-size:15.5px; line-height:1.7 }
.guide-livraison p { margin:0 0 8px }
.guide-livraison p:last-child { margin:0 }
.guide-meta { font-size:13px; color:var(--muted); margin:0 }
.guide a { color:var(--primary-hover); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
.guide a:hover { color:#3730a3 }

.guide h2 { font-family:var(--sans); font-size:clamp(25px,3vw,32px); line-height:1.25; letter-spacing:-.7px; font-weight:750; margin:0 0 18px }
.guide h3 { font-size:20px; line-height:1.35; letter-spacing:-.2px; margin:36px 0 12px }
.guide h4 { font-size:16px; line-height:1.4; margin:26px 0 10px }
.guide p, .guide li { font-size:15.5px; line-height:1.75; color:#334155 }
.guide p { margin:0 0 14px }
.guide ul, .guide ol { margin:0 0 16px; padding-left:24px }
.guide li { margin:5px 0 }
.guide strong { color:var(--ink) }
.guide :not(pre) > code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace; font-size:.86em; background:var(--primary-light); color:#3730a3; padding:1px 5px; border-radius:5px; overflow-wrap:anywhere }

.guide-section { margin-top:64px; padding-top:56px; border-top:1px solid var(--line); scroll-margin-top:24px }
.guide-section [id], .modele { scroll-margin-top:24px }

.guide-sommaire { margin-top:40px; padding:24px 28px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 5px 18px #0f172a05 }
.guide-sommaire h2 { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 12px }
.guide-sommaire ol { columns:2; column-gap:36px; margin:0; padding-left:22px }
.guide-sommaire li { break-inside:avoid; margin:0 0 6px }
.guide-sommaire a { text-decoration:none; color:var(--ink); font-weight:600 }
.guide-sommaire a:hover { color:var(--primary-hover); text-decoration:underline }

.guide .regles { list-style:none; counter-reset:regle; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 }
.regles li { counter-increment:regle; position:relative; margin:0; padding:16px 18px 16px 58px; background:#fff; border:1px solid var(--line); border-radius:16px; font-size:14.5px; line-height:1.65 }
.regles li::before { content:counter(regle); position:absolute; left:16px; top:15px; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--primary-light); color:var(--primary-hover); font-weight:750; font-size:13px }

.guide-tableau { margin:14px 0 22px; overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:14px }
.guide-tableau table { width:100%; min-width:560px; border-collapse:collapse; font-size:14px; line-height:1.6 }
.guide-tableau.etroit table { min-width:0 }
.guide-tableau th, .guide-tableau td { padding:11px 14px; border-top:1px solid var(--line); text-align:left; vertical-align:top; color:#334155 }
.guide-tableau thead th { border-top:0; background:var(--primary-light); color:#3730a3; font-weight:700 }
.guide-tableau tbody td:first-child { font-weight:600; color:var(--ink) }
.pastille { display:inline-block; width:13px; height:13px; margin:0 4px 0 2px; border:1px solid #0f172a26; border-radius:4px; vertical-align:-2px }

.guide-deux { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.guide-deux > div { padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:16px }
.guide-deux ol { margin-bottom:0 }

/* Modèles : aperçu dans un cadre isolé, comme dans le lecteur SOMA, puis code. */
.modele { margin-top:28px; padding:22px 24px 24px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 5px 18px #0f172a04 }
.modele h3 { margin:0 0 6px }
.modele-usage { font-size:14px !important; color:var(--text) !important; margin-bottom:14px !important }
.apercu { margin:0 0 14px; overflow:hidden; background:#f1f5f9; border:1px solid var(--line); border-radius:14px }
.apercu-sans-js { margin:0 !important; padding:14px 16px; font-size:13px !important; color:var(--muted) !important }
.apercu-outils { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:7px 10px 7px 14px; background:#f8fafc; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted) }
.apercu-bouton, .code-outils button { min-height:32px; padding:5px 12px; border:1px solid var(--line); border-radius:100px; background:#fff; color:var(--ink); font-size:12px; font-weight:600; line-height:1.3 }
.apercu-bouton:hover, .code-outils button:hover { background:var(--primary-light) }
.apercu-bouton[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:#fff }
.apercu iframe { display:block; width:100%; height:180px; margin:0 auto; border:0; background:#fff; transition:width .2s }
.apercu.est-telephone iframe { width:360px; max-width:100%; box-shadow:0 0 0 1px #cbd5e1 }
.apercu iframe.apercu-page { height:min(720px,80vh) }

.code-bloc { overflow:hidden; background:#0f172a; border-radius:14px }
.code-outils { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px 7px 16px; background:#1e293b; color:#94a3b8; font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.06em }
.code-outils > div { display:flex; gap:8px }
.code-outils button { border-color:#334155; background:#0f172a; color:#e2e8f0 }
.code-outils button:hover { background:#334155 }
.guide pre { margin:0 0 4px; max-height:430px; overflow:auto; padding:16px 18px; background:#0f172a; color:#e2e8f0; border-radius:14px; tab-size:2; font:400 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace }
.code-bloc pre { margin:0; border-radius:0 }
.guide pre.code-long { max-height:520px }
.guide pre code { font:inherit; white-space:pre }

.checklist { list-style:none; padding-left:0 !important }
.checklist li { position:relative; padding-left:32px }
.checklist li::before { content:''; position:absolute; left:2px; top:5px; width:17px; height:17px; border:2px solid var(--primary); border-radius:5px; background:#fff }
.guide-fin { margin-top:28px !important; padding:18px 22px; background:var(--primary-light); border:1px solid var(--primary-soft); border-radius:16px }

@media(max-width:900px) { .guide .regles { grid-template-columns:1fr } }
@media(max-width:720px) {
  .guide { width:calc(100% - 32px); padding-top:40px }
  .guide-hero h1 { letter-spacing:-1px }
  .guide-section { margin-top:44px; padding-top:40px }
  .guide-sommaire { padding:20px }
  .guide-sommaire ol { columns:1 }
  .guide-deux { grid-template-columns:1fr }
  .modele { padding:16px 14px 18px; border-radius:16px }
  .guide pre { padding:14px }
  .guide pre { font-size:12px }
  .apercu-outils > span { display:none }
}
@media(prefers-reduced-motion:reduce) { .apercu iframe { transition:none } }

/* Taxonomie de Bloom (section 6.4) : six catégories, de mémoriser à créer, chacune avec un exemple. */
.guide .bloom { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; margin:18px 0 }
.bloom li { position:relative; display:flex; flex-direction:column; gap:3px; margin:0; padding:14px 16px 14px 58px; background:#fff; border:1px solid var(--line); border-radius:16px; font-size:14.5px; line-height:1.5 }
.bloom li strong { font-size:15px }
.bloom-num { position:absolute; left:16px; top:15px; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#fff; font-weight:750; font-size:13px }
.bloom-ex { color:#475569 }
.bloom-1 .bloom-num { background:#0891b2 }
.bloom-2 .bloom-num { background:#0d9488 }
.bloom-3 .bloom-num { background:#16a34a }
.bloom-4 .bloom-num { background:#ca8a04 }
.bloom-5 .bloom-num { background:#ea580c }
.bloom-6 .bloom-num { background:#7c3aed }
.guide-remarque { margin:18px 0; padding:14px 18px; border:1px solid #fde68a; border-radius:16px; background:#fffbeb; font-size:14.5px; line-height:1.65 }
.guide-remarque p { margin:0 }
@media(max-width:900px) { .guide .bloom { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:560px) { .guide .bloom { grid-template-columns:1fr } }
/* L'essentiel : les recommandations se distinguent des contraintes du lecteur (pastille grise). */
.regles-conseils li::before { background:#f1f5f9; color:#475569 }