/* ============================================
   Design System — Outils Enseignement Informatique
   inline-utils.css est chargé par un <link> séparé AVANT cette feuille
   (plus d'@import bloquant en série) — revue §C12.
   ============================================ */

/* Les jetons (couleurs, rayons, ombres, polices, thèmes clair / sombre / contraste) viennent de
   shared/signature.css, lié AVANT cette feuille dans chaque page. Ne plus en déclarer ici :
   voir docs/DESIGN.md et shared/styles/signature-compat.css pour les anciens noms. */

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

/* ---- Lien d'évitement (injecté par script.js) ---- */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -4rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: var(--space-2);
}

[role="main"]:focus, main:focus {
    outline: none;
}

/* ---- Navigation Bar ---- */
.nav-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-bar .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--speed-fast);
    min-height: 40px;
}

.nav-bar .btn-back:hover {
    background: var(--border);
}

.nav-bar .breadcrumb {
    font-size: 0.875rem;
    color: var(--muted);
}

.nav-bar .breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.nav-bar .breadcrumb a:hover {
    text-decoration: underline;
}

.nav-bar .breadcrumb .separator {
    margin: 0 0.4rem;
    color: var(--border);
}

.nav-bar .nav-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

html.oei-nav-hidden .nav-bar {
    display: none !important;
}

html.oei-back-hidden .nav-bar .btn-back {
    display: none !important;
}

html.oei-actions-hidden .nav-bar .nav-actions {
    display: none !important;
}

html.oei-hide-head .nav-bar {
    display: none !important;
}

html.oei-hide-head .page-title {
    display: none !important;
}

html.oei-hide-title .page-title {
    display: none !important;
}

html.oei-hide-label .content-block-label,
html.oei-hide-label .pedagogy-badge {
    display: none !important;
}

html.oei-hide-course .content-block--course,
html.oei-hide-course .content-block--goals,
html.oei-hide-course .content-block--pedagogy {
    display: none !important;
}

html.oei-hide-simulation #simulation-fragment,
html.oei-hide-simulation .content-block--widget {
    display: none !important;
}

html.oei-hide-exercises .content-block--exercises,
html.oei-hide-exercises .exercise-auto-mount {
    display: none !important;
}

.oei-embed-hidden {
    display: none !important;
}

/* ---- Page Container ---- */
.page {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
}

.page-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ---- Cards ---- */
.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--speed-fast);
    min-width: 100px;
    min-height: 40px;
}

.btn:hover {
    box-shadow: var(--shadow-lift);
}

.btn:active {
    box-shadow: var(--shadow-inset);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-accent);
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--border);
}

.btn-accent {
    background: var(--ok);
    color: var(--on-accent);
}

.btn-accent:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ok) 85%, var(--ink));
}

.btn-danger {
    background: var(--danger);
    color: var(--on-accent);
}

.btn-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 85%, var(--ink));
}

/* ---- Controls Bar ---- */
.controls {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* ---- Inputs ---- */
.input {
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font);
    border: 2px solid var(--control-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: all var(--speed-fast);
    width: 180px;
    background: var(--card);
    color: var(--text);
}

.input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cote) 25%, transparent);
}

/* ---- Accessibilité : focus clavier visible partout (revue §D6) ---- */
:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: 2px;
}
[data-theme="contrast"] :focus-visible {
    outline-width: 3px;
}
/* Anneau opaque garanti sur tout contrôle, même quand une feuille de page ou de widget a posé `outline: none`
   (le `!important` l'emporte sur les règles locales ; seul :focus-visible est concerné, pas le clic souris). */
:is(button, a[href], input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]):focus-visible {
    outline: var(--focus-ring) !important;
    outline-offset: var(--focus-ring-offset) !important;
}
@media (forced-colors: active) {
    :is(button, a[href], input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]):focus-visible {
        outline-color: Highlight !important;
    }
}
/* Cible cliquable non-native rendue opérable au clavier */
[role="button"][tabindex],
.line-clickable {
    cursor: pointer;
}

/* ---- Visualizer Area ---- */
.visualizer {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.visualizer-main {
    flex: 1;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1.5rem;
    min-height: 120px;
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    position: relative;
}

/* ---- Array Items (for sorting / searching) ---- */
.array-container {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.array-container.single-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}

.array-container.sorting-array {
    align-items: flex-end;
}

.array-container.sorting-array .array-slot {
    flex: 0 0 64px;
    width: 64px;
    min-width: 64px;
}

.array-container.sorting-array .array-item {
    width: 100%;
    min-width: 0;
}

.array-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 56px;
    position: relative;
}

.array-slot.insertion-target {
    gap: 0.16rem;
}

.insertion-key-chip {
    max-width: 100%;
    padding: 0.08rem 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--tone-cyan-border);
    background: var(--tone-cyan-bg);
    color: var(--tone-cyan-text);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.array-slot.swap-pair-start::after {
    content: '↔';
    position: absolute;
    top: -0.95rem;
    right: -0.55rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--warning);
    opacity: 0.95;
    pointer-events: none;
}

.array-pointer-row {
    min-height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.array-index-label {
    font-size: var(--text-xs);
    line-height: 1;
    color: var(--muted);
}

.pointer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.05rem;
    padding: 0 0.26rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: var(--text-2xs);
    line-height: 1;
    font-weight: 700;
    font-family: var(--font-mono);
}

.pointer-badge.sort-pointer {
    background: var(--tone-indigo-bg);
    border-color: var(--tone-indigo-border);
    color: var(--tone-indigo-text);
}

.pointer-badge.search-pointer {
    background: var(--tone-cyan-bg);
    border-color: var(--tone-cyan-border);
    color: var(--tone-cyan-text);
}

.trace-list {
    display: grid;
    gap: 0.35rem;
    max-height: 210px;
    overflow-y: auto;
}

.trace-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.trace-item .step {
    display: inline-block;
    min-width: 2.7rem;
    margin-right: 0.3rem;
    color: var(--muted);
    font-family: var(--font-mono);
}

.vars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.7rem;
}

.var-cell {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.45rem;
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.var-cell .label {
    color: var(--muted);
    margin-right: 0.25rem;
}

.legend-list {
    display: grid;
    gap: 0.35rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text);
}

.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--legend-border);
}

.legend-swatch--current {
    background: var(--card);
    border-color: var(--primary);
}

.legend-swatch--compare {
    background: var(--tone-warning-bg);
    border-color: var(--warning);
}

.legend-swatch--sorted {
    background: var(--primary);
    border-color: var(--primary);
}

.legend-swatch--found {
    background: var(--ok);
    border-color: var(--ok);
}

.legend-swatch--checked {
    background: var(--surface-hover);
    border-color: var(--muted);
}

.legend-swatch--active {
    background: var(--tone-indigo-bg);
    border-color: var(--primary);
}

.legend-swatch--excluded-left {
    background: var(--tone-warning-bg);
    border-color: var(--attention);
}

.legend-swatch--excluded-right {
    background: var(--tone-blue-bg);
    border-color: var(--production);
}

.legend-swatch--mid {
    background: var(--ok);
    border-color: var(--ok);
}

.legend-pointer-sample {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.legend-pointer-sample .pointer-badge {
    min-width: 1.05rem;
    height: 1rem;
}

.mode-expert .pedagogic-only {
    display: none !important;
}

.array-item {
    padding: 0.75rem 1rem;
    background: var(--card);
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    min-width: 55px;
    text-align: center;
    font-weight: 600;
    position: relative;
    transition: transform var(--speed-normal), background var(--speed-fast), color var(--speed-fast);
}

.array-item.active {
    background: var(--primary);
    color: var(--on-accent);
}

.array-item.current {
    background: var(--tone-indigo-bg);
    border-color: var(--primary);
    color: var(--tone-indigo-text);
}

.array-item.unsorted-zone.current {
    background: var(--tone-indigo-bg);
    border-color: var(--primary);
    color: var(--tone-indigo-text);
}

.array-item.insertion-target,
.array-item.unsorted-zone.insertion-target,
.array-item.current.insertion-target {
    border-style: dashed;
    border-width: 2px;
    border-color: var(--tone-cyan-border);
    background: var(--tone-cyan-bg);
    color: var(--tone-cyan-text);
}

.array-item.swapping {
    border-width: 3px;
    border-color: var(--warning);
    background: var(--tone-warning-bg);
    color: var(--tone-warning-text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--attention) 28%, transparent);
}

.array-item.unsorted-zone.swapping,
.array-item.current.swapping,
.array-item.unsorted-zone.current.swapping {
    border-width: 3px;
    border-color: var(--warning);
    background: var(--tone-warning-bg);
    color: var(--tone-warning-text);
}

.array-item.swap-anim-left {
    transition: none;
    z-index: 4;
    animation: swapLeftMotion var(--swap-duration, 520ms) cubic-bezier(0.22, 0.68, 0.2, 1);
    animation-fill-mode: both;
    will-change: transform;
    backface-visibility: hidden;
}

.array-item.swap-anim-right {
    transition: none;
    z-index: 2;
    animation: swapRightMotion var(--swap-duration, 520ms) cubic-bezier(0.22, 0.68, 0.2, 1);
    animation-fill-mode: both;
    will-change: transform;
    backface-visibility: hidden;
}

@keyframes swapLeftMotion {
    0% { transform: translate3d(0, 0, 0); }
    38% { transform: translate3d(calc(var(--swap-shift, calc(100% + 0.5rem)) * 0.52), -30px, 0); }
    76% { transform: translate3d(calc(var(--swap-shift, calc(100% + 0.5rem)) * 0.9), -18px, 0); }
    100% { transform: translate3d(var(--swap-shift, calc(100% + 0.5rem)), 0, 0); }
}

@keyframes swapRightMotion {
    0% { transform: translate3d(0, 0, 0); }
    38% { transform: translate3d(calc(var(--swap-shift, calc(100% + 0.5rem)) * -0.52), 30px, 0); }
    76% { transform: translate3d(calc(var(--swap-shift, calc(100% + 0.5rem)) * -0.9), 18px, 0); }
    100% { transform: translate3d(calc(var(--swap-shift, calc(100% + 0.5rem)) * -1), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    /* Neutralise transitions et animations (revue §D1) — les `transitionend`/`animationend`
       continuent de se déclencher (durée quasi nulle), donc pas de simulation bloquée. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

.array-item.comparing {
    border-width: 3px;
    border-color: var(--warning);
}

.array-item.sorted {
    background: var(--primary);
    color: var(--on-accent);
}

.array-item.found {
    background: var(--ok);
    color: var(--on-accent);
    border-color: var(--ok);
}

/* ---- Exercise Components ---- */
.matching-grid,
.protocol-grid,
.mini-case-tasks,
.ordering-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.matching-row,
.protocol-row,
.mini-task,
.ordering-item {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr);
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
}

.ordering-item {
    grid-template-columns: 36px 1fr auto;
}

.ordering-rank {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.85rem;
}

.ordering-label {
    font-weight: 600;
    color: var(--text);
}

.ordering-actions {
    display: flex;
    gap: 0.4rem;
}

.btn-order {
    min-width: 40px;
    min-height: 40px;
    padding: 0.35rem 0.45rem;
    line-height: 1;
}

.builder-target {
    min-height: 54px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 0.55rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.builder-chip {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: var(--tone-indigo-bg);
    color: var(--tone-indigo-text);
    border: 1px solid var(--tone-indigo-border);
    font-family: var(--font-mono);
    font-size: 0.84rem;
}

.mini-scenario {
    border-left: 3px solid var(--primary);
    background: var(--bg);
    color: var(--text);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.55rem 0.65rem;
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 0.65rem;
}

.matching-left {
    font-weight: 600;
}

.api-debug-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 0.6rem;
    margin: 0.55rem 0 0.65rem;
}

.api-debug-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 0.55rem 0.65rem;
    font-size: 0.9rem;
}

.api-debug-card h4 {
    margin: 0 0 0.45rem;
    font-size: 0.9rem;
    color: var(--text);
}

.api-debug-edit {
    display: grid;
    gap: 0.55rem;
}

.api-headers {
    display: grid;
    gap: 0.45rem;
}

.api-header-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.45rem;
    align-items: center;
}

.exercise-panel {
    margin-top: 0.75rem;
}

.exercise-stats {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.65rem;
}

.question-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
}

.question-options {
    display: grid;
    gap: 0.4rem;
}

.option-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 0.45rem 0.55rem;
}

.exercise-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.exercise-question-meta {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.35rem;
}

.exercise-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.exercise-pill {
    display: inline-block;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    border: 1px solid transparent;
}

.exercise-pill--difficulty {
    background: var(--tone-purple-bg);
    color: var(--tone-purple-text);
    border-color: var(--tone-purple-border);
}

.exercise-pill--competency {
    background: var(--tone-sky-bg);
    color: var(--tone-sky-text);
    border-color: var(--tone-sky-border);
}

.exercise-goal {
    font-size: 0.82rem;
    color: var(--muted);
}

.exercise-hint {
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 0.35rem 0.5rem;
}

.exercise-hint summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tone-warning-text);
    list-style: none;
}

.exercise-hint summary::-webkit-details-marker {
    display: none;
}

.exercise-hint-body {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.42;
}

/* ---- Retour d'exercice : tampon à double filet ----
   Jamais la couleur seule : icône de forme propre (cercle, octogone, triangle, losange), libellé dans le texte, rôle ARIA. */
.feedback {
    --st: var(--ink-muted);
    --st-fond: transparent;
    margin-top: 0.8rem;
    min-height: 1.5rem;
    padding: 0.25rem 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ink);
}

.feedback.ok, .feedback.success, .feedback.bad, .feedback.error, .feedback.warning, .feedback.info {
    position: relative;
    margin: 0.8rem 3px 3px;
    padding: 0.55rem 0.75rem 0.55rem 2.4rem;
    background: var(--st-fond);
    border: 1px solid var(--st);
    outline: 1px solid var(--st);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.feedback.ok, .feedback.success { --st: var(--ok); --st-fond: var(--ok-fond); }
.feedback.bad, .feedback.error { --st: var(--critique); --st-fond: var(--critique-fond); }
.feedback.warning { --st: var(--attention); --st-fond: var(--attention-fond); }
.feedback.info { --st: var(--cote); --st-fond: transparent; }

.feedback.ok::before, .feedback.success::before,
.feedback.bad::before, .feedback.error::before,
.feedback.warning::before, .feedback.info::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 0.55rem;
    width: 1.15rem;
    height: 1.15rem;
    display: grid;
    place-items: center;
    background: var(--st);
    color: var(--surface);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
}

.feedback.ok::before, .feedback.success::before { content: "\2713"; border-radius: 50%; }
.feedback.bad::before, .feedback.error::before {
    content: "\00d7";
    font-size: 0.9rem;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.feedback.warning::before { content: "!"; clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 0.2rem; }
.feedback.info::before { content: "i"; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

[data-theme="contrast"] .feedback.ok, [data-theme="contrast"] .feedback.success,
[data-theme="contrast"] .feedback.bad, [data-theme="contrast"] .feedback.error,
[data-theme="contrast"] .feedback.warning, [data-theme="contrast"] .feedback.info {
    border-width: 2px;
}

.dijkstra-step-grid {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.dijkstra-row {
    display: grid;
    grid-template-columns: 90px 1fr 1fr;
    gap: 0.45rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.45rem;
    background: var(--card);
}

.dijkstra-node {
    font-weight: 700;
    color: var(--primary);
    text-align: center;
}

.sql-lab-box {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.55rem;
}

.sql-lab-editor {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.65rem;
    background: var(--card);
    color: var(--text);
}

.sql-lab-editor:focus {
    outline: none;
    border-color: var(--primary);
}

.sql-lab-hints {
    font-size: 0.86rem;
    color: var(--muted);
    display: grid;
    gap: 0.25rem;
}

.sql-lab-hints code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.12rem 0.3rem;
}

@media (max-width: 720px) {
    .matching-row,
    .protocol-row,
    .mini-task {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .api-debug-grid {
        grid-template-columns: 1fr;
    }
    .api-header-row {
        grid-template-columns: 1fr;
    }
    .dijkstra-row {
        grid-template-columns: 1fr;
    }
    .exercise-actions {
        flex-direction: column;
    }
}

/* ---- Info Panel ---- */
.info-panel {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-paper);
}

.info-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.info-card p {
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
    display: flex;
    justify-content: space-between;
}

/* ---- Badge ---- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-primary {
    background: var(--tone-indigo-bg);
    color: var(--tone-indigo-text);
}

.badge-accent {
    background: var(--tone-success-bg);
    color: var(--tone-success-text);
}

.badge-warning {
    background: var(--tone-warning-bg);
    color: var(--tone-warning-text);
}

.badge-l1 {
    background: var(--tone-blue-bg);
    color: var(--tone-blue-text);
}

.badge-l2 {
    background: var(--tone-violet-bg);
    color: var(--tone-violet-text);
}

.badge-l3 {
    background: var(--tone-pink-bg);
    color: var(--tone-pink-text);
}

/* ---- Algorithm Pseudocode ---- */
.algorithm-code {
    background: var(--code-bg);
    color: var(--code-text);
    padding: 1.25rem;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.8;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.algorithm-code .line {
    display: block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-md);
    transition: background var(--speed-fast);
    white-space: pre;
}

.algorithm-code .line.highlight {
    background: var(--primary);
    color: var(--on-accent);
}

.algorithm-code .keyword {
    color: var(--stockage);
}

.algorithm-code .comment {
    color: var(--muted);
}

/* ---- Data Structure Items ---- */
.ds-item {
    padding: 0.75rem 1rem;
    background: var(--card);
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 500;
    box-shadow: var(--shadow-paper);
    border: 2px solid var(--primary);
    min-width: 80px;
    position: relative;
}

.ds-item.entering {
    animation: slideIn var(--speed-normal) ease-out;
}

.ds-item.removing {
    animation: slideOut var(--speed-normal) ease-in forwards;
}

/* ---- Operation State Helpers ---- */
.op-insert {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
    border-color: var(--ok) !important;
}

.op-delete {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--critique) 20%, transparent);
    border-color: var(--danger) !important;
}

.op-probe {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--attention) 20%, transparent);
    border-color: var(--warning) !important;
}

.op-swap {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: var(--primary) !important;
}

/* ---- Pointer Label ---- */
.pointer-label {
    position: absolute;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Encart d'erreur non bloquant (remplace les alert() d'échec de chargement) */
.page-error {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--danger);
    border-left-width: 4px;
    border-radius: var(--radius-sm, 6px);
    background: var(--tone-danger-bg);
    color: var(--tone-danger-text);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ---- Animations ---- */
@keyframes slideIn {
    from { transform: translateX(40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(40px); opacity: 0; }
}

@keyframes slideInLeft {
    from { transform: translateX(-40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-40px); opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .page { padding: 1rem; }
    .page-title { font-size: 1.5rem; }
    .visualizer { flex-direction: column; }
    .info-panel { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .info-card { flex: 1; min-width: 200px; }
    .nav-bar { padding: 0.75rem 1rem; }
    .controls { gap: 0.5rem; }
}

@media (max-width: 480px) {
    .page { padding: 0.75rem; }
    .controls { flex-direction: column; align-items: stretch; }
    .input { width: 100%; }
    .btn { width: 100%; }
}

/* ---- Utility Classes ---- */
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-sm { font-size: 0.875rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { justify-content: center; align-items: center; }
.flex-1 { flex: 1; }
.hidden { display: none; }

/* ============================================
   EXTENSIONS - Styles communs supplémentaires
   ============================================ */

/* ---- Animations supplémentaires ---- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

@keyframes edgePulse {
    0% { stroke-width: 2.5; }
    50% { stroke-width: 6; }
    100% { stroke-width: 4; }
}

@keyframes nodePulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px var(--primary); }
    50% { box-shadow: 0 0 20px var(--primary); }
}

/* ---- Layouts 2 colonnes avec responsive intégré ---- */
.layout-2col {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

.layout-2col-narrow {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

.layout-2col-wide {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}

.graph-3col {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.75fr) minmax(280px, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.graph-main-col {
    min-width: 0;
    display: grid;
    gap: 0.8rem;
}

.graph-side-col {
    min-width: 0;
    display: grid;
    gap: 1rem;
    align-content: start;
}

@media (max-width: 900px) {
    .layout-2col,
    .layout-2col-narrow,
    .layout-2col-wide {
        grid-template-columns: 1fr;
    }

    .graph-3col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1280px) and (min-width: 901px) {
    .graph-3col {
        grid-template-columns: 1fr 1fr;
    }

    .graph-main-col {
        grid-column: 1 / -1;
    }
}

/* ---- Conteneurs de visualisation ---- */
.viz-container {
    background: var(--bg);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    min-height: 400px;
    overflow: hidden;
    position: relative;
}

.viz-container-large {
    min-height: 500px;
}

.viz-container-compact {
    min-height: 300px;
}

/* ---- Éléments SVG communs ---- */
.svg-node {
    fill: var(--card);
    stroke: var(--primary);
    stroke-width: 2.5;
    transition: all var(--speed-fast);
    cursor: default;
}

.svg-node.active {
    fill: var(--warning);
    stroke: var(--warning);
}

.svg-node.current {
    fill: var(--warning);
    stroke: var(--warning);
}

.svg-node.visited {
    fill: var(--ok);
    stroke: var(--ok);
}

.svg-node.found {
    fill: var(--primary);
    stroke: var(--primary);
}

.svg-node.source {
    fill: var(--ok);
    stroke: var(--ok);
}

.svg-node.path {
    fill: var(--ok);
    stroke: var(--ok);
}

.svg-node.compare-focus {
    stroke: var(--attention);
    stroke-width: 4;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--attention) 45%, transparent));
}

.svg-node.state-changed {
    animation: nodePulse 0.45s ease;
}

/* ---- SVG Edges ---- */
.svg-edge {
    stroke: var(--border);
    stroke-width: 2;
    fill: none;
    transition: all var(--speed-fast);
}

.svg-edge.active {
    stroke: var(--warning);
    stroke-width: 4;
}

.svg-edge.relaxing {
    stroke: var(--warning);
    stroke-width: 4;
    animation: edgePulse 0.6s ease;
}

.svg-edge.visited {
    stroke: var(--ok);
    stroke-width: 3;
}

.svg-edge.found {
    stroke: var(--primary);
    stroke-width: 3;
}

.svg-edge.path {
    stroke: var(--ok);
    stroke-width: 4;
}

.svg-edge.compare-focus {
    stroke: var(--attention);
    stroke-width: 4;
}

.svg-edge.state-changed {
    animation: edgePulse 0.45s ease;
}

/* ---- SVG Labels ---- */
.svg-label {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    fill: var(--text);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    transition: fill var(--speed-fast);
}

.svg-label-light {
    fill: var(--surface);
}

.edge-weight {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    fill: var(--text);
}

.edge-weight-bg {
    fill: var(--bg);
    rx: 4;
}

.dist-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    fill: var(--muted);
    text-anchor: middle;
}

.svg-label-dark {
    fill: var(--text);
}

.svg-label.light {
    fill: var(--surface);
}

.svg-label.dark {
    fill: var(--text);
}

/* ---- Tables avec sticky header ---- */
.table-sticky {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.table-sticky th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--primary);
    color: var(--on-accent);
    padding: 0.6rem 0.85rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.82rem;
}

.table-sticky td {
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--border);
}

.table-sticky tbody tr:hover {
    background: var(--surface-hover);
}

.table-sticky tbody tr:nth-child(even) {
    background: var(--bg);
}

.table-sticky tbody tr:nth-child(even):hover {
    background: var(--surface-hover-strong);
}

/* ---- Section de cours ---- */
.course-section {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.course-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    outline: none;
    cursor: pointer;
}

.course-title:hover {
    color: var(--primary-hover);
}

h2.course-title { margin: 0 0 0.75rem; }

.section-description {
    text-align: left;
    line-height: var(--leading-prose);
    max-width: var(--measure);
    margin-bottom: 1rem;
}

/* ---- Prose de cours : code, tableaux, citations, exemples ---- */
.course-section :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
}
.course-section pre {
    margin: 1rem 0;
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.55;
    tab-size: 4;
    color: var(--code-text);
    background: var(--code-bg);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-md);
}
.course-section pre code { padding: 0; background: none; font-size: inherit; }
.course-section table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.course-section th,
.course-section td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--line-subtle);
}
.course-section th { background: var(--surface-sunken); font-weight: var(--weight-strong); }
.course-section blockquote {
    margin: 1rem 0;
    padding: var(--space-2) var(--space-4);
    border-left: 3px solid var(--line);
    color: var(--ink-muted);
    max-width: var(--measure);
}
.course-section kbd {
    padding: 0.05em 0.4em;
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
}
.course-list {
    margin: 0 0 1.2rem;
    padding-left: 1.6em;
    text-align: left;
    line-height: var(--leading-prose);
    max-width: var(--measure);
}
.course-list > li + li { margin-top: 0.25em; }
.course-subheading {
    margin-top: 1.5rem;
    color: var(--accent);
}
.example-box {
    margin: 1rem 0;
    padding: var(--space-4);
    background: var(--surface-sunken);
    border-left: 3px solid var(--accent);
    max-width: var(--measure);
}
.example-box > :first-child { margin-top: 0; }
.example-box > :last-child { margin-bottom: 0; }

/* Liste a coches : remplace les puces en emoji. La coche est dessinee en CSS (forme + couleur ok). */
.list-check { list-style: none; padding-left: 0; }
.list-check > li { position: relative; padding-left: 1.6em; }
.list-check > li::before {
    content: "";
    position: absolute;
    left: 0.3em;
    top: 0.4em;
    width: 0.35em;
    height: 0.7em;
    border: solid var(--ok);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- Bloc mathématique centré (KaTeX display) ---- */
.math-display {
    text-align: center;
    margin: 1.2rem 0;
    overflow-x: auto;
    padding: 0.2rem 0;
}

/* ---- Speed Control Slider ---- */
.speed-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    padding: 0.75rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.speed-control label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.speed-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 180px;
    height: 6px;
    background: var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
}

.speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--speed-fast);
}

.speed-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: var(--primary-hover);
}

.speed-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--speed-fast);
}

.speed-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: var(--primary-hover);
}

.speed-label {
    min-width: 90px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-align: center;
}

@media (max-width: 480px) {
    .speed-control {
        flex-direction: column;
        gap: 0.5rem;
    }
    .speed-slider {
        width: 100%;
        max-width: 240px;
    }
}

/* ---- Outils pedagogiques ---- */
.pedagogy-path {
    margin: 0;
    padding: 0.2rem 0 0;
}

.pedagogy-path__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.pedagogy-path__column {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem;
}

.pedagogy-path__subtitle {
    margin: 0 0 0.55rem;
    font-size: 0.9rem;
    color: var(--text);
}

.pedagogy-path__group {
    margin-bottom: 0.7rem;
}

.pedagogy-path__group:last-child {
    margin-bottom: 0;
}

.pedagogy-path__group-label {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.13rem 0.5rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    background: var(--pedagogy-badge-bg);
    color: var(--pedagogy-badge-text);
}

.pedagogy-path__group--required .pedagogy-path__group-label {
    background: var(--tone-danger-bg);
    color: var(--tone-danger-text);
}

.pedagogy-path__group--recommended .pedagogy-path__group-label {
    background: var(--tone-warning-bg);
    color: var(--tone-warning-text);
}

.pedagogy-path__group--next .pedagogy-path__group-label {
    background: var(--tone-success-bg);
    color: var(--tone-success-text);
}

.pedagogy-path__list {
    margin: 0;
    padding-left: 1.05rem;
}

.pedagogy-path__item {
    margin: 0 0 0.45rem;
}

.pedagogy-path__item:last-child {
    margin-bottom: 0;
}

.pedagogy-path__link,
.pedagogy-path__text {
    font-size: 0.88rem;
}

.pedagogy-path__link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.pedagogy-path__link:hover {
    text-decoration: underline;
}

.pedagogy-path__why {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.45;
}

.pedagogy-path__empty {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

@media (max-width: 860px) {
    .pedagogy-path__grid {
        grid-template-columns: 1fr;
    }
}

.pedagogy-tile__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}

.pedagogy-tile__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.pedagogy-tile__title {
    margin: 0;
    color: var(--primary);
    font-size: 1.05rem;
}

.pedagogy-tile__body {
    margin-top: 0.75rem;
}

.pedagogy-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--pedagogy-badge-text);
    background: var(--pedagogy-badge-bg);
    white-space: nowrap;
}

@media (max-width: 860px) {
    .pedagogy-tile__summary {
        flex-direction: column;
        align-items: flex-start;
    }
}

.learning-tools h3 {
    margin-bottom: 0.9rem;
    font-size: 1rem;
}

.learning-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.learning-step {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
}

.learning-feedback {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    min-height: 2.3rem;
    font-size: 0.9rem;
}

.algorithm-code .line.line-clickable {
    cursor: pointer;
}

.algorithm-code .line.line-clickable:hover {
    background: var(--code-line-hover);
}

.algorithm-code .line.inspected {
    outline: 1px dashed var(--primary);
    outline-offset: 1px;
    background: var(--code-line-hover);
}

/* ---- Tagged content blocks ---- */
.content-block {
    margin-bottom: 1.25rem;
}

.content-block-label {
    display: inline-block;
    margin-bottom: 0.45rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--primary);
    color: var(--on-accent);
}

.content-block--widget .content-block-label {
    background: var(--consommation);
}

.content-block--pedagogy .content-block-label {
    background: var(--cote);
}

.content-block--exercises .content-block-label {
    background: var(--ok);
}

.content-block--goals .content-block-label {
    background: var(--stockage);
}

.learning-goals-panel {
    display: grid;
    gap: 0.6rem;
}

.learning-goals-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.3rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.learning-skills {
    font-size: 0.9rem;
    color: var(--text);
}

.learning-skills-row {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.learning-skill-chip {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid var(--tone-indigo-border);
    background: var(--tone-indigo-bg);
    color: var(--tone-indigo-text);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.17rem 0.52rem;
}

.widget-block-head {
    margin-bottom: 0.6rem;
}

.widget-block-title {
    margin: 0 0 0.3rem 0;
    color: var(--primary);
    font-size: 1rem;
}

/* =========================================================
   TABS — système d'onglets pour les blocs de type "tabs"
   ========================================================= */
.content-tabs-block {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.content-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--hover);
    border-bottom: 1.5px solid var(--border);
}

.content-tab-btn {
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.65rem 1.1rem;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
    min-height: 40px;
}
.content-tab-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.content-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--card);
}

.content-tab-panels {
    background: var(--card);
}

.content-tab-panel {
    display: none;
    padding: 1rem;
}
.content-tab-panel.active {
    display: block;
}

/* =========================================================
   CHAPTERS — accordion numéroté pour les cours denses
   ========================================================= */
.chapters-block {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.chapters-item { border-bottom: 1px solid var(--border); }
.chapters-item:last-child { border-bottom: none; }

.chapters-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.75rem 1rem;
    min-height: 44px;
    background: var(--hover);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: background 0.15s;
}
.chapters-header:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--hover));
}
.chapters-item.open > .chapters-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.chapters-num {
    font-size: var(--text-2xs);
    font-weight: 800;
    color: var(--primary);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    min-width: 1.6rem;
    flex-shrink: 0;
}
.chapters-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ink);
}
.chapters-chevron {
    width: 14px;
    height: 14px;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.chapters-item.open > .chapters-header .chapters-chevron {
    transform: rotate(90deg);
}
.chapters-body {
    display: none;
    padding: 1rem 1.1rem;
    background: var(--card);
}
.chapters-item.open > .chapters-body { display: block; }

/* Dans un panel, supprimer la bordure externe du widget (déjà fournie par le tab) */
.content-tab-panel .tagged-block {
    margin-bottom: 0.5rem;
}
.content-tab-panel .tagged-block:last-child {
    margin-bottom: 0;
}

@media (max-width: 500px) {
    .content-tab-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
    }
}

@media print {
    /* Impression : papier blanc quel que soit le thème, donc couleurs fixes assumées. */
    body {
        background: #fff;
        color: #111827;
        font-size: 11pt;
    }

    .nav-bar,
    .controls,
    .toolbar,
    .btn,
    .btn-back,
    .exercise-actions,
    .content-block-label {
        display: none !important;
    }

    .page {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .card,
    .course-section,
    .tool-card {
        box-shadow: none !important;
        border: 1px solid #d1d5db !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    a {
        color: #111827 !important;
        text-decoration: none !important;
    }
}

/* ---- Cours : titres de section et plan de la page ---- */
.course-heading {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--accent);
    margin: 1.75rem 0 0.75rem;
    scroll-margin-top: 5rem;
}

.course-heading:first-child { margin-top: 0; }
.course-heading-icon { margin-right: 0.15em; }
.course-heading-icon .oei-icon { width: 1.05em; height: 1.05em; vertical-align: -0.12em; }
.course-title .oei-icon { margin-right: 0.15em; vertical-align: -0.15em; }
.content-tab-btn .oei-icon { margin-right: 0.15em; }

.page-toc {
    margin: 0 0 1.5rem;
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-paper);
}

.page-toc > details > summary {
    cursor: pointer;
    list-style: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    font-family: var(--font-display);
    font-weight: 600;
}

.page-toc > details > summary::-webkit-details-marker { display: none; }

.page-toc ol {
    margin: 0;
    padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 1.4rem);
    columns: 2 260px;
    column-gap: var(--space-5);
    font-size: 0.9rem;
}

.page-toc li { padding: 2px 0; break-inside: avoid; }
.page-toc a { color: var(--accent); text-decoration: none; display: inline-block; min-height: 28px; line-height: 28px; }
.page-toc a:hover { text-decoration: underline; }

@media print { .page-toc { display: none; } }

/* ---- Petits écrans : barre de navigation compacte, fil d'Ariane sur sa propre ligne ---- */
@media (max-width: 600px) {
    .nav-bar { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 1rem; }
    .nav-bar .breadcrumb { order: 3; flex-basis: 100%; font-size: 0.8rem; }
    .nav-bar .nav-actions { margin-left: auto; flex-wrap: nowrap; }
    .nav-bar .btn-back, .nav-bar .nav-actions .btn-back { padding: 0.35rem 0.7rem; font-size: 0.8rem; white-space: nowrap; }
    .page { padding: 1rem; }
}

/* ---- Bloc « parcours » (CourseRenderer.renderPedagogy) ---- */
.pedago-extra { margin: 1rem 0; }
.pedago-extra__title { margin: 0 0 0.5rem; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--ink); }
.pedago-list { margin: 0; padding-left: 1.4em; line-height: var(--leading-base); }
.pedago-network { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pedago-chip {
    display: inline-block;
    padding: 1px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--ink);
    background: var(--surface-sunken);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-pill);
}
.pedago-link { color: var(--accent); font-weight: var(--weight-medium); }
.pedago-why { margin-top: 2px; font-size: var(--text-sm); color: var(--ink-muted); }