/* =====================================================================
   Gabarit des articles, cours et exercices du blog, sur le socle commun (socle.css).
   Même identité que l'accueil (couleurs franches, relief, verre, halos), mais rien ne bouge
   derrière le texte qu'on lit : la page se lit 45 minutes, elle reste calme.
   Les noms de blocs sont ceux des pages et des scripts (exercice.js, blog-enhancements.js,
   accessibility.js) : ne pas les renommer, le mode lecture et la lecture à voix haute s'en servent.
   ===================================================================== */

:root {
    --paper-solid: #ffffff;
    --read: 1.125rem;                 /* taille du texte de lecture */
    --col: 840px;                     /* largeur de la colonne de lecture */
    --primary-color: var(--accent);   /* ancienne variable, encore citée en style="" par quelques pages */
}
:root[data-theme="dark"] { --paper-solid: #1b1650; }

/* ---- Haut de l'article ---- */
.article-hero { position: relative; padding: 108px var(--gutter) 0; }
.hero-container { max-width: var(--col); margin: 0 auto; }
.back-to-blog {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 8px 10px 0; padding: 8px 16px 8px 13px;
    border-radius: 999px;
    background: var(--glass); border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px -14px rgba(var(--shade), .5);
    color: var(--ink); text-decoration: none; font-weight: 700; font-size: .92rem;
    transition: transform .15s;
}
.back-to-blog:hover { transform: translateX(-3px); }
.back-to-blog i { font-size: .85em; }
.breadcrumb {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 7px;
    margin: 0 0 10px; font-size: .88rem; color: var(--ink-soft); vertical-align: middle;
}
.breadcrumb a { color: var(--ink); font-weight: 650; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-sep { opacity: .55; }

.article-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.article-meta > span {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 999px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    font-size: .85rem; font-weight: 700; line-height: 1.2; color: var(--ink-soft);
}
.article-meta > span > i { color: var(--accent); }
.article-meta .type-badge {
    --c: var(--blue);
    background: var(--c); border-color: transparent; color: #17123d;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 62%, #17123d), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.article-meta .type-badge > i { color: inherit; }
.type-exercice { --c: var(--orange) !important; }
.type-quiz { --c: var(--pink) !important; }
.type-cours { --c: var(--mint) !important; }
.type-flashcard { --c: var(--violet) !important; }

.article-title {
    margin: 16px 0 0;
    font-size: clamp(2.1rem, 5.2vw, 4rem);
    line-height: 1; font-weight: 800; font-stretch: 80%; letter-spacing: -.025em;
    text-wrap: balance;
    text-shadow:
        0 1px 0 var(--extrude-1), 0 2px 0 var(--extrude-1),
        0 3px 0 var(--extrude-2), 0 4px 0 var(--extrude-2),
        0 5px 0 var(--extrude-3), 0 6px 0 var(--extrude-3),
        0 18px 30px rgba(var(--shade), .2);
}
.article-subtitle {
    margin: 20px 0 0; max-width: 38em;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--ink-soft);
}

/* Note de prudence et barre de partage : discrètes, à la largeur de la colonne */
.disclaimer-banner, .article-toolbar {
    width: calc(100% - 2 * var(--gutter)); max-width: var(--col);
    margin-left: auto; margin-right: auto;
}
.disclaimer-banner {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 22px; padding: 11px 16px;
    border-radius: 16px;
    background: var(--glass); border: 1px solid var(--glass-line);
    font-size: .86rem; line-height: 1.45; color: var(--ink-soft);
}
.disclaimer-banner i { margin-top: 3px; color: var(--accent); }
.article-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.toolbar-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    color: var(--ink); font: inherit; font-size: .86rem; font-weight: 700; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 6px 16px -12px rgba(var(--shade), .5);
    transition: transform .12s;
}
.toolbar-btn:hover { transform: translateY(-2px); }

/* ---- La colonne de lecture : une feuille de verre épais ---- */
.article-content { padding: 26px var(--gutter) 0; }
.article-container {
    max-width: var(--col); margin: 0 auto;
    padding: clamp(22px, 5vw, 54px);
    border-radius: clamp(24px, 4vw, 36px);
    background: var(--paper);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 50px 90px -50px rgba(var(--shade), .55), 0 2px 8px rgba(var(--shade), .05), inset 0 1px 0 rgba(255, 255, 255, .6);
    font-size: var(--read); line-height: 1.72;
    overflow-wrap: break-word;
}
:root[data-theme="dark"] .article-container { box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .07); }
.article-container > :first-child { margin-top: 0; }
.article-container > :last-child { margin-bottom: 0; }
.article-container p { margin: 0 0 1em; }
.article-container a:not([class]) {
    color: var(--accent); font-weight: 650;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.article-container a:not([class]):hover { text-decoration-color: var(--pink); }
.article-container strong, .article-container b { font-weight: 750; }
.article-container ul, .article-container ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.article-container li { margin: .35em 0; }
.article-container li::marker { color: var(--accent); font-weight: 800; }

/* Titres de section : en relief, chacun avec sa planète de couleur */
.article-container h2, .article-container h3 { position: relative; scroll-margin-top: 96px; }
.article-container h2 {
    --c: var(--yellow);
    margin: 2.1em 0 .75em;
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    line-height: 1.12; font-weight: 800; font-stretch: 82%; letter-spacing: -.02em;
    text-wrap: balance;
    text-shadow: 0 1px 0 var(--extrude-1), 0 2px 0 var(--extrude-2), 0 3px 0 var(--extrude-3), 0 10px 18px rgba(var(--shade), .14);
}
.article-container h2::before {
    content: ""; display: inline-block; vertical-align: .12em;
    width: .62em; height: .62em; margin-right: .45em; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #17123d));
    box-shadow: 0 0 16px color-mix(in srgb, var(--c) 70%, transparent);
}
.article-container h2:nth-of-type(4n+2) { --c: var(--pink); }
.article-container h2:nth-of-type(4n+3) { --c: var(--mint); }
.article-container h2:nth-of-type(4n+4) { --c: var(--blue); }
.article-container h3 {
    margin: 1.7em 0 .55em;
    font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.2; font-weight: 780; font-stretch: 88%;
}
.article-container h4 { margin: 1.4em 0 .4em; font-size: 1.1rem; font-weight: 750; }
.heading-anchor {
    margin-left: .35em; color: var(--accent); text-decoration: none; text-shadow: none;
    font-weight: 700; opacity: 0; transition: opacity .15s;
}
h2:hover > .heading-anchor, h3:hover > .heading-anchor, .heading-anchor:focus-visible { opacity: .8; }
.highlight-flash { animation: art-flash 1.4s ease; }
@keyframes art-flash { 30% { background: color-mix(in srgb, var(--yellow) 40%, transparent); } }

/* ---- Sommaire : chaque entrée a sa pastille numérotée ---- */
.table-of-contents {
    margin: 0 0 1.8em; padding: 20px 22px 16px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--violet) 9%, var(--paper-solid));
    border: 1px solid var(--paper-line);
}
.toc-title {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 10px !important;
    font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.toc-title i { display: none; }
.toc-title::before {
    content: ""; width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85), var(--violet) 55%);
    box-shadow: 0 0 12px var(--violet);
}
.toc-list { margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.toc-list li { margin: 0 !important; counter-increment: toc; --c: var(--yellow); }
.toc-list li:nth-child(4n+2) { --c: var(--pink); }
.toc-list li:nth-child(4n+3) { --c: var(--mint); }
.toc-list li:nth-child(4n+4) { --c: var(--blue); }
.table-of-contents .toc-list a {
    display: flex; align-items: baseline; gap: 12px;
    padding: 6px 10px; border-radius: 12px;
    color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 650; line-height: 1.35;
}
.table-of-contents .toc-list a::before {
    content: counter(toc); flex: none; align-self: center;
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--c); color: #17123d; font-size: .78rem; font-weight: 800;
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .15), inset 2px 2px 2px rgba(255, 255, 255, .6);
}
.table-of-contents .toc-list a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---- Encadrés : des blocs en volume, une couleur par rôle ----
   la tranche du bas (ombre pleine) donne l'épaisseur, l'étiquette « Exercice 1 : » devient une pastille */
.highlight-box, .formula-box, .exercice-box, .correction-box, .example-box,
.warning-box, .definition-box, .theorem-box, .exercise-box, .proof-box, .tip-box, .annotation-box, .step-box, .flashcard {
    --c: var(--accent); --c-ink: #17123d;
    position: relative;
    margin: 1.5em 0 calc(1.5em + 6px);
    padding: 18px 22px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--c) 13%, var(--paper-solid));
    border: 2px solid color-mix(in srgb, var(--c) 50%, transparent);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 58%, #17123d), 0 20px 30px -20px rgba(var(--shade), .45);
    font-size: 1.06rem; line-height: 1.65;
}
:root[data-theme="dark"] :is(.highlight-box, .formula-box, .exercice-box, .correction-box, .example-box,
.warning-box, .definition-box, .theorem-box, .exercise-box, .proof-box, .tip-box, .annotation-box, .step-box, .flashcard) {
    background: color-mix(in srgb, var(--c) 15%, var(--paper-solid));
    border-color: color-mix(in srgb, var(--c) 45%, transparent);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 40%, #000), 0 20px 30px -20px rgba(0, 0, 0, .6);
}
.highlight-box { --c: var(--yellow); }
.formula-box, .theorem-box { --c: var(--accent); --c-ink: #ffffff; }
.exercice-box, .exercise-box { --c: var(--orange); }
.correction-box { --c: var(--mint); }
.example-box { --c: var(--blue); }
.warning-box { --c: var(--pink); }
.definition-box { --c: var(--violet); --c-ink: #ffffff; }
.tip-box { --c: var(--mint); }
.annotation-box { --c: var(--yellow); }
.proof-box { --c: var(--violet); --c-ink: #ffffff; margin-top: 2em; padding-top: 24px; }
:root[data-theme="dark"] .formula-box, :root[data-theme="dark"] .theorem-box { --c: #8b7dff; }
/* Démonstration : étiquette posée sur le bord, petit carré noir à la fin */
.proof-box::before {
    content: "Démonstration"; position: absolute; top: -13px; left: 18px;
    padding: 3px 12px; border-radius: 999px;
    background: var(--c); color: #ffffff;
    font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 62%, #17123d);
}
.proof-box[data-label]::before { content: attr(data-label); }
.proof-box::after { content: "\25A0"; display: block; text-align: right; color: var(--c); font-size: .9rem; }
:is(.highlight-box, .formula-box, .exercice-box, .correction-box, .example-box,
.warning-box, .definition-box, .theorem-box, .exercise-box, .proof-box, .tip-box, .annotation-box) > :first-child { margin-top: 0; }
:is(.highlight-box, .formula-box, .exercice-box, .correction-box, .example-box,
.warning-box, .definition-box, .theorem-box, .exercise-box, .proof-box, .tip-box, .annotation-box) > :last-child { margin-bottom: 0; }
:is(.highlight-box, .formula-box, .exercice-box, .correction-box, .example-box,
.warning-box, .definition-box, .theorem-box, .exercise-box, .proof-box, .tip-box, .annotation-box) > p:first-child > strong:first-child {
    display: inline-block; margin: 0 6px 2px 0; padding: 2px 12px;
    border-radius: 999px;
    background: var(--c); color: var(--c-ink);
    font-size: .86em; font-weight: 800; letter-spacing: .01em; line-height: 1.6;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 62%, #17123d);
}
:root[data-theme="dark"] .formula-box > p:first-child > strong:first-child,
:root[data-theme="dark"] .theorem-box > p:first-child > strong:first-child { color: #ffffff; }

/* Exercice et correction vont par paire : le bouton se glisse entre les deux */
.exercice-box { margin-bottom: 14px; }
.correction-box { margin-top: 0; overflow: hidden; }
/* Difficulté à côté du titre d'un exercice (étoile, demi-étoile, flamme) : la couleur de l'encadré */
.exercice-box :is(.fa-star, .fa-star-half, .fa-fire) { color: var(--c); }

/* États de la correction (classes posées par exercice.js) */
.correction-hidden, .correction-hiding {
    max-height: 120px;
    filter: blur(6px); opacity: .5;
    user-select: none; pointer-events: none;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1), filter .4s ease, opacity .4s ease;
}
.correction-visible {
    max-height: 3000px; filter: none; opacity: 1;
    transition: max-height .5s cubic-bezier(.4, 0, .2, 1), filter .35s ease, opacity .3s ease;
}
.correction-stagger-in { animation: art-in .35s ease both; }
@keyframes art-in { from { opacity: 0; transform: translateY(8px); } }

/* Bouton « Voir la correction » : menthe, en relief, il s'enfonce */
.correction-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 4px 0 18px; padding: 10px 20px 10px 16px;
    border: 0; border-radius: 999px;
    font: inherit; font-size: .95rem; font-weight: 750; line-height: 1.2;
    color: #0b3b2c; cursor: pointer;
    background: linear-gradient(180deg, #74f2cb, #2ed8a3 55%, #1fbf8e);
    box-shadow: 0 4px 0 #13946d, 0 10px 18px -8px rgba(19, 148, 109, .6), inset 0 1px 0 rgba(255, 255, 255, .55);
    transform: translateY(-3px);
    transition: transform .12s ease, box-shadow .12s ease;
}
.correction-toggle:hover { transform: translateY(-5px); box-shadow: 0 6px 0 #13946d, 0 14px 22px -8px rgba(19, 148, 109, .65), inset 0 1px 0 rgba(255, 255, 255, .55); }
.correction-toggle:active { transform: translateY(0); box-shadow: 0 1px 0 #13946d, 0 4px 10px -4px rgba(19, 148, 109, .5); }
.correction-toggle-icon { display: inline-flex; transition: transform .25s ease; }
.correction-toggle.open { transform: translateY(-1px); box-shadow: 0 2px 0 #13946d, inset 0 1px 0 rgba(255, 255, 255, .55); }
.correction-toggle.open .correction-toggle-icon { transform: rotate(180deg); }

/* Compteur de corrections et « tout révéler » */
.correction-progress {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
    margin: 1.2em 0 1.4em; padding: 14px 16px 14px 18px;
    border-radius: 22px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    box-shadow: 0 14px 28px -20px rgba(var(--shade), .5);
}
.correction-progress-label {
    display: flex; align-items: center; gap: 8px; flex: 1 1 200px;
    font-size: .92rem; font-weight: 750; color: var(--ink-soft);
}
.correction-progress-label i { color: var(--accent); }
.correction-progress.complete .correction-progress-label i { color: var(--mint); }
.correction-progress-track {
    flex: 1 1 140px; height: 10px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.correction-progress-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--pink) 60%, var(--yellow));
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.correction-progress.complete .correction-progress-fill { background: var(--mint); }
.correction-toggle-all {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border: 1px solid var(--glass-line); border-radius: 999px;
    background: var(--paper-solid); color: var(--ink);
    font: inherit; font-size: .88rem; font-weight: 750; cursor: pointer;
    box-shadow: 0 4px 0 var(--extrude-2);
    transform: translateY(-2px);
    transition: transform .12s ease, box-shadow .12s ease;
}
.correction-toggle-all:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--extrude-2); }
.correction-toggle-all:active { transform: translateY(0); box-shadow: 0 1px 0 var(--extrude-2); }
.correction-toggle-all.open { background: var(--accent); color: #ffffff; box-shadow: 0 4px 0 var(--accent-deep); }

/* Étapes : petites cartes, chacune avec sa planète */
.step-box { --c: var(--blue); padding: 10px; display: grid; gap: 8px; }
.step {
    --c: var(--yellow);
    position: relative; padding: 12px 16px 12px 44px;
    border-radius: 16px; background: var(--paper-solid);
}
.step:nth-child(4n+2) { --c: var(--pink); }
.step:nth-child(4n+3) { --c: var(--mint); }
.step:nth-child(4n+4) { --c: var(--blue); }
.step::before {
    content: ""; position: absolute; left: 17px; top: 1.15em;
    width: 13px; height: 13px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85), var(--c) 55%);
    box-shadow: 0 0 10px var(--c);
}
.step > :first-child { margin-top: 0; }
.step > :last-child { margin-bottom: 0; }

/* Cartes mémoire */
.flashcard { --c: var(--violet); padding: 0; overflow: hidden; }
.flashcard-question, .flashcard-answer { padding: 14px 20px; }
.flashcard-answer { background: var(--paper-solid); border-top: 2px dashed color-mix(in srgb, var(--c) 45%, transparent); }
.flashcard p { margin: 0; }

/* Tableaux, citations, code */
.table-container { margin: 1.4em 0; overflow-x: auto; border-radius: 18px; }
.article-container table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--paper-line); border-radius: 18px; overflow: hidden;
    background: var(--paper-solid); font-size: 1rem; line-height: 1.5;
}
.table-container table { margin: 0; }
.article-container th {
    padding: 12px 14px; text-align: left; font-weight: 800;
    background: color-mix(in srgb, var(--accent) 14%, var(--paper-solid));
}
.article-container td { padding: 11px 14px; border-top: 1px solid var(--paper-line); vertical-align: top; }
.article-container tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.article-container blockquote {
    margin: 1.4em 0; padding: 14px 20px;
    border-left: 5px solid var(--violet); border-radius: 0 18px 18px 0;
    background: color-mix(in srgb, var(--violet) 9%, var(--paper-solid));
    font-style: italic;
}
.article-container code {
    padding: 2px 7px; border-radius: 7px; font-size: .9em;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.article-container pre {
    margin: 1.4em 0; padding: 16px 20px; overflow-x: auto;
    border-radius: 18px; background: #17123d; color: #f4f2ff; font-size: .92rem; line-height: 1.55;
}
.article-container pre code { padding: 0; background: none; }
.article-container hr { height: 3px; margin: 2em 0; border: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--pink), var(--yellow)); opacity: .5; }
.article-container img { height: auto; border-radius: 18px; }
.article-container .katex { font-size: 1.05em; }

/* Apparition douce des encadrés (blog-enhancements.js), une seule fois, rien ensuite */
.box-hidden { opacity: 0; transform: translateY(14px); }
.box-visible { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

/* ---- Pour aller plus loin ---- */
.related-articles { padding: 64px var(--gutter) 0; }
.related-container { max-width: 1080px; margin: 0 auto; }
.related-container > h2 {
    margin: 0 0 22px;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; font-weight: 800; font-stretch: 80%; letter-spacing: -.02em;
    text-shadow: 0 1px 0 var(--extrude-1), 0 2px 0 var(--extrude-2), 0 3px 0 var(--extrude-3), 0 12px 22px rgba(var(--shade), .16);
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.related-card {
    --c: var(--yellow);
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 20px 22px 22px; border-radius: 26px;
    background: var(--paper); border: 1px solid var(--glass-line);
    color: var(--ink); text-decoration: none;
    box-shadow: 0 6px 0 var(--extrude-2), 0 24px 36px -24px rgba(var(--shade), .55);
    transition: transform .15s ease, box-shadow .15s ease;
}
.related-card:nth-child(4n+2) { --c: var(--pink); }
.related-card:nth-child(4n+3) { --c: var(--mint); }
.related-card:nth-child(4n+4) { --c: var(--blue); }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--extrude-2), 0 30px 40px -24px rgba(var(--shade), .6); }
.related-category {
    padding: 4px 12px; border-radius: 999px;
    background: var(--c); color: #17123d; font-size: .8rem; font-weight: 800;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 62%, #17123d);
}
.related-title { font-size: 1.08rem; font-weight: 750; line-height: 1.32; }

/* ---- Fin d'article : signaler une erreur, licence ---- */
.article-footer-card {
    width: calc(100% - 2 * var(--gutter)); max-width: var(--col);
    margin: 48px auto 0; padding: 22px 24px;
    border-radius: 26px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    box-shadow: 0 20px 36px -26px rgba(var(--shade), .5);
}
.footer-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-action-btn, .report-option, .report-submit {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--glass-line); background: var(--paper-solid); color: var(--ink);
    font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 0 var(--extrude-2);
    transform: translateY(-2px);
    transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
.footer-action-btn:hover, .report-option:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--extrude-2); }
.footer-action-btn:active, .report-option:active { transform: translateY(0); box-shadow: 0 1px 0 var(--extrude-2); }
.footer-action-btn.active, .report-option.active, .report-option.selected { background: var(--accent); color: #ffffff; box-shadow: 0 4px 0 var(--accent-deep); }
.report-panel { margin-top: 16px; }
.report-label { margin: 0 0 10px; font-weight: 750; }
.report-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.report-textarea {
    display: block; width: 100%; margin: 0 0 12px; padding: 12px 14px;
    border-radius: 16px; border: 1px solid var(--paper-line); background: var(--paper-solid); color: var(--ink);
    font: inherit; font-size: 1rem; resize: vertical;
}
.report-textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.report-submit { background: var(--accent); color: #ffffff; box-shadow: 0 4px 0 var(--accent-deep); }
.report-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.report-thanks { margin: 0; font-weight: 750; color: var(--ink); }
.report-thanks i { color: var(--mint); }
.article-license { margin: 16px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.article-license i { margin-right: 4px; color: var(--accent); }

/* ---- Lecture : barre de progression en haut, retour en haut en bas à gauche ---- */
.reading-progress {
    position: fixed; top: 0; left: 0; z-index: 60; height: 4px; width: 0;
    background: linear-gradient(90deg, var(--accent), var(--pink), var(--yellow));
    border-radius: 0 4px 4px 0; pointer-events: none;
}
.back-to-top {
    position: fixed; z-index: 50; left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom));
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border-radius: 50%; border: 1px solid var(--glass-line);
    background: var(--glass-strong); color: var(--ink);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 12px 24px -12px rgba(var(--shade), .55);
    cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }

/* ---- Petits écrans ---- */
@media (max-width: 640px) {
    .article-hero { padding-top: 96px; }
    .article-container { --read: 1.0625rem; }
    :is(.highlight-box, .formula-box, .exercice-box, .correction-box, .example-box,
    .warning-box, .definition-box, .theorem-box, .exercise-box, .proof-box, .tip-box, .annotation-box) { padding: 14px 16px; border-radius: 18px; }
    .correction-progress { padding: 12px 14px; }
    /* tableaux larges : ils défilent de côté au lieu de déborder de la page */
    .article-container table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .article-container th, .article-container td { padding: 10px 12px; }
    .correction-toggle-all { width: 100%; justify-content: center; }
    .toolbar-btn { padding: 8px 12px; font-size: .82rem; }
}

/* ---- Mouvement réduit (système ou panneau Accessibilité) ---- */
@media (prefers-reduced-motion: reduce) {
    .box-hidden { opacity: 1; transform: none; }
    .correction-hidden, .correction-hiding, .correction-visible, .correction-toggle, .correction-toggle-icon,
    .correction-progress-fill, .related-card, .toolbar-btn, .back-to-blog, .back-to-top { transition: none; }
    .correction-stagger-in, .highlight-flash { animation: none; }
}
html[data-a11y-motion="off"] .box-hidden { opacity: 1; transform: none; }
html[data-a11y-motion="off"] :is(.correction-hidden, .correction-hiding, .correction-visible, .correction-toggle,
.correction-toggle-icon, .correction-progress-fill, .related-card, .toolbar-btn, .back-to-blog, .back-to-top) { transition: none; }
html[data-a11y-motion="off"] :is(.correction-stagger-in, .highlight-flash) { animation: none; }

@media print {
    .article-container { background: #fff !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; backdrop-filter: none !important; }
    .article-title, .article-container h2 { text-shadow: none !important; }
    .correction-hidden, .correction-hiding { max-height: none !important; filter: none !important; opacity: 1 !important; }
    .correction-toggle, .correction-progress, .back-to-top, .reading-progress, .article-toolbar, .back-to-blog { display: none !important; }
}