/* =====================================================================
   Brief 1 — Layout : barre d'application, progression, hero, colonnes,
   rail latéral, responsive, mode focus, impression
   ===================================================================== */

/* ---------- Barre d'application (fond bleu-vert) ---------- */
.appbar { background: var(--deep); color: var(--on-dark); }
.appbar-in { display: flex; align-items: center; gap: 22px; min-height: 72px; padding-block: 10px; }
.appbar .brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; flex: 0 1 auto; min-width: 0; }
.appbar .brand img { flex: none; }
.appbar .workshop { min-width: 0; }
.appbar .brand img { height: 32px; width: auto; }
.appbar .brand-sep { width: 1px; height: 30px; background: rgba(255,255,255,.25); }
.appbar .workshop { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; line-height: 1.25; }
.appbar .workshop small { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; color: var(--on-dark-muted); margin-top: 2px; }
.appbar .spacer { flex: 1; }
.appbar-actions { display: flex; align-items: center; gap: 8px; }
.appbar .btn-bar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--r-m); background: transparent; color: #fff; font-weight: 500; font-size: 15px; cursor: pointer; }
.appbar .btn-bar:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.appbar .btn-bar[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.appbar .btn-bar svg { width: 18px; height: 18px; }
.appbar .btn-bar .lbl { display: inline; }
.appbar .btn-bar:focus-visible { box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--aqua); }

/* ---------- Bandeau de progression (sticky) ---------- */
.progress-strip { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 2px solid var(--deep); }
.progress-strip-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 58px; }
.progress-pct { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--deep); font-variant-numeric: tabular-nums; }
.progress-track { position: relative; height: 10px; background: var(--paper-3); overflow: hidden; }
.progress-track > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); transition: width .5s cubic-bezier(.4,0,.2,1); }
.progress-track > span.complete { background: var(--aqua-dark); }
.progress-meta { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.progress-meta b { color: var(--deep); font-weight: 600; }
.progress-meta .points { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--deep); }
.progress-meta .points i { width: 10px; height: 10px; background: var(--red); display: inline-block; transform: rotate(45deg); }
.progress-strip .objective { font-size: 14px; color: var(--muted); }
.progress-strip .objective b { color: var(--deep); }
.progress-strip .btn-text { background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; }
.progress-strip .btn-text:hover { color: var(--red); }
@media (max-width: 900px) {
  .progress-strip .objective, .progress-meta .steps-count { display: none; }
}
@media (max-width: 600px) {
  .progress-strip-in { gap: 12px; min-height: 52px; }
  .progress-pct { font-size: 18px; }
  .progress-meta { gap: 10px; font-size: 13px; }
}

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); gap: clamp(32px, 4vw, 72px); padding-block: clamp(44px, 5vw, 84px) clamp(36px, 4vw, 64px); align-items: start; }
.hero h1 { margin-top: 20px; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lead { margin-top: 24px; max-width: 60ch; }
.hero-outcome { margin-top: 28px; padding: 20px 24px; border-left: 6px solid var(--aqua); background: var(--aqua-tint); max-width: 64ch; }
.hero-outcome .kicker { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aqua-dark); margin-bottom: 6px; }
.hero-outcome p { font-size: var(--fs-body); color: var(--deep); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 30px; }
.hero-questions { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--deep); }
.hero-questions > div { padding: 16px 18px 6px 0; border-right: 1px solid var(--line); }
.hero-questions > div:last-child { border-right: 0; }
.hero-questions > div + div { padding-left: 18px; }
.hero-questions .q { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--red); }
.hero-questions .a { font-size: var(--fs-small); color: var(--deep); margin-top: 6px; line-height: 1.55; }

/* Tableau de bord de progression (colonne droite du hero) */
.dash { background: var(--deep); color: var(--on-dark); padding: 26px 28px 28px; position: relative; overflow: hidden; }
.dash::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border: 26px solid rgba(255,255,255,.06); border-radius: 50%; pointer-events: none; }
.dash .kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--aqua); }
.dash-top { display: flex; align-items: center; gap: 22px; margin-top: 16px; }
.dash-ring { width: 108px; height: 108px; flex: none; position: relative; }
.dash-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-ring circle { fill: none; stroke-width: 8; }
.dash-ring .bg { stroke: rgba(255,255,255,.14); }
.dash-ring .fg { stroke: var(--red); stroke-linecap: butt; transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1); }
.dash-ring .fg.complete { stroke: var(--aqua); }
.dash-ring .val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; color: #fff; }
.dash-stats { display: grid; gap: 10px; }
.dash-stats div { display: flex; align-items: baseline; gap: 10px; }
.dash-stats b { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; line-height: 1; color: #fff; min-width: 2.2ch; }
.dash-stats span { font-size: 14px; color: var(--on-dark-muted); }
.dash-obj { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.dash-obj .kicker { color: var(--coral); }
.dash-obj p { margin-top: 6px; font-size: 16px; color: #fff; font-weight: 500; }
.dash-obj p.done { color: var(--aqua); }
.dash .btn-primary { margin-top: 18px; width: 100%; justify-content: center; }
.dash-badges { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.dash-badges .badge { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 9px; border: 1px solid rgba(255,255,255,.28); color: var(--on-dark-muted); border-radius: var(--r-s); }
.dash-badges .badge.earned { background: var(--aqua); color: var(--deep); border-color: var(--aqua); }
.dash-badges .badge.earned::before { content: "✓ "; }

/* ---------- Sections éditoriales ---------- */
.section { padding-block: clamp(40px, 5vw, 76px); border-top: 2px solid var(--deep); }
.section.thin { border-top-width: 1px; border-top-color: var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 48px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head h2 { margin-top: 12px; }
.section-head .lead { color: var(--muted); }
.section-head.single { grid-template-columns: 1fr; }
@media (max-width: 860px) { .section-head { grid-template-columns: minmax(0, 1fr); } }

/* Contexte : deux colonnes éditoriales */
.context-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 56px); }
.context-grid .col > h3 { padding-top: 14px; border-top: 3px solid var(--red); margin-bottom: 12px; }
.context-grid .col > h3.deep { border-color: var(--deep); }
.context-grid .col > h3.aqua { border-color: var(--aqua); }
.context-grid .col > h3.blue { border-color: var(--blue); }
.context-grid .col + .col { }
.context-grid ul.plain { list-style: none; padding: 0; display: grid; gap: 8px; }
.context-grid ul.plain li { padding-left: 22px; position: relative; }
.context-grid ul.plain li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 3px; background: var(--red); }
.context-grid ul.plain.aqua li::before { background: var(--aqua-dark); }
.context-grid ul.plain.blue li::before { background: var(--blue); }
.principle { margin-top: 22px; padding: 18px 22px; background: var(--deep); color: #fff; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.45; }
.principle small { display: block; font-family: var(--sans); font-weight: 400; font-size: 15px; color: var(--on-dark-muted); margin-top: 8px; }
@media (max-width: 860px) { .context-grid { grid-template-columns: minmax(0, 1fr); } }

/* Cadre pédagogique : accordéons éditoriaux */
.frame { border-top: 1px solid var(--line); }
.frame details { border-bottom: 1px solid var(--line); }
.frame summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--deep); }
.frame summary::-webkit-details-marker { display: none; }
.frame summary .n { font-size: 14px; letter-spacing: 0.1em; color: var(--red); font-family: var(--sans); font-weight: 600; }
.frame summary .chev { width: 28px; height: 28px; border: 1.5px solid var(--deep); display: grid; place-items: center; transition: transform .2s; }
.frame summary .chev svg { width: 14px; height: 14px; }
.frame details[open] summary .chev { transform: rotate(180deg); background: var(--deep); color: #fff; }
.frame summary:hover .n { color: var(--red-dark); }
.frame .frame-body { padding: 4px 0 26px 72px; max-width: 78ch; }
.frame .frame-body ul { display: grid; gap: 8px; padding-left: 1.2em; }
.frame .frame-body ol { display: grid; gap: 8px; padding-left: 1.4em; }
.frame .frame-body h4 { margin: 18px 0 8px; }
@media (max-width: 700px) { .frame summary { grid-template-columns: 1fr auto; font-size: 18px; } .frame summary .n { grid-column: 1 / -1; } .frame .frame-body { padding-left: 0; } }

/* ---------- Colonnes parcours ---------- */
.course { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.rail { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 92px); overflow: auto; padding-right: 6px; }
.rail-title { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep); padding-bottom: 10px; border-bottom: 2px solid var(--deep); display: flex; justify-content: space-between; align-items: baseline; }
.rail-title span { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; }
.rail ol { list-style: none; padding: 0; margin: 6px 0 0; }
.rail li a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 6px 9px 0; text-decoration: none; color: var(--deep); font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--line); line-height: 1.3; }
.rail li a .n { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--muted); }
.rail li a .st { width: 20px; height: 20px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.rail li a.done .st { background: var(--aqua); border-color: var(--aqua); color: var(--deep); }
.rail li a.done .n { color: var(--aqua-dark); }
.rail li a.locked { color: var(--muted); }
.rail li a.locked .st { border-style: dashed; }
.rail li a.active { color: var(--red-dark); }
.rail li a.active .n { color: var(--red-dark); }
.rail li a.active .st { border-color: var(--red); }
.rail li a:hover { background: var(--paper-2); }
.rail .rail-extra { margin-top: 18px; display: grid; gap: 6px; }
.rail .rail-extra a { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: var(--deep); font-weight: 600; font-size: 15px; }
.rail .rail-extra a::before { content: "→"; color: var(--red); }
.rail .rail-help { margin-top: 18px; padding: 14px 16px; background: var(--coral-tint); border-left: 5px solid var(--coral); font-size: 14px; line-height: 1.5; }
.rail .rail-help b { display: block; margin-bottom: 4px; }
.rail .rail-help button { margin-top: 8px; }

.course-main { min-width: 0; }

/* Navigation mobile compacte des étapes */
.mobile-nav { display: none; position: sticky; top: 58px; z-index: 55; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 0; }
.mobile-nav-in { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.mobile-nav select { min-width: 0; width: 100%; min-height: 44px; font-size: 16px; font-family: var(--sans); border: 1.5px solid var(--deep); background: var(--paper); color: var(--deep); padding: 0 10px; border-radius: var(--r-s); }
.mobile-nav .btn-icon { min-width: 44px; }

@media (max-width: 1024px) {
  .course { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .mobile-nav { display: block; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-questions { grid-template-columns: 1fr; border-top: 2px solid var(--deep); }
  .hero-questions > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 0 12px; }
  .hero-questions > div + div { padding-left: 0; }
  .hero-questions > div:last-child { border-bottom: 0; }
}
@media (max-width: 1100px) {
  .appbar .btn-bar .lbl { display: none; }
  .appbar .btn-bar { padding: 0 11px; }
  .appbar-in { gap: 14px; }
}
@media (max-width: 720px) {
  .appbar .workshop { font-size: 11px; }
  .appbar .workshop small { display: none; }
  .appbar .btn-bar .lbl { display: none; }
  .appbar .btn-bar { padding: 0 11px; }
  .appbar-in { gap: 12px; }
  .appbar .brand img { height: 26px; }
}
@media (max-width: 480px) {
  .appbar .brand-sep, .appbar .workshop { display: none; }
}

/* ---------- Mode focus ---------- */
body.focus-mode .hero, body.focus-mode #contexte, body.focus-mode #prepare, body.focus-mode #cadre, body.focus-mode #ressources, body.focus-mode .end { display: none; }
body.focus-mode #acces { display: none; }
body.focus-mode.focus-needs-access #acces { display: block; }
body.focus-mode .step:not(.focus-visible) { display: none; }
body.focus-mode #livrable:not(.focus-visible) { display: none; }
body.focus-mode .course { grid-template-columns: 292px minmax(0, 1fr); }
body.focus-mode .focus-banner { display: flex; }
.focus-banner { display: none; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; background: var(--blue-tint); border-left: 6px solid var(--blue); font-size: 15px; }
.focus-banner b { color: var(--blue-dark); }
@media (max-width: 1024px) { body.focus-mode .course { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fin de page ---------- */
.end { padding: 30px 0 60px; border-top: 2px solid var(--deep); font-size: 14px; color: var(--muted); display: grid; gap: 8px; max-width: 80ch; }

/* ---------- Impression ---------- */
@media print {
  .appbar, .progress-strip, .mobile-nav, .rail, .btn-primary, .btn-secondary, .btn-copy, .btn-dl, .help-fab, .scroll-nav, .toast, dialog { display: none !important; }
  body.focus-mode .step, body.focus-mode .hero, body.focus-mode section { display: block !important; }
  .step.locked .step-body { opacity: 1; }
  .course { grid-template-columns: minmax(0, 1fr); }
}

/* Sous le point de rupture mobile, la barre d'étapes collante s'ajoute à la bande de progression : on décale la cible de défilement */
@media (max-width: 1024px) { html { scroll-padding-top: 124px; } }

@media (max-width: 600px) { .mobile-nav { top: 52px; } }