/* ==========================================================================
   Fiches Scolaires — feuille de style unique
   Aucun framework. Tokens en :root, typographie système, 16px/1.65.
   ========================================================================== */

:root {
    --ink: #17324d;
    --ink-deep: #10263b;
    --blue: #2d6cdf;
    --blue-dark: #2358ba;
    --blue-soft: #edf4ff;
    --paper: #ffffff;
    --canvas: #f6f8fb;
    --line: #dfe6ee;
    --muted: #64748b;
    --muted-dark: #475569;
    --yellow: #f2bd4f;
    --green: #1f8a5f;
    --green-soft: #e8f6ef;
    --red: #c0392b;
    --red-soft: #fdeeec;
    --radius-sm: .65rem;
    --radius: 1rem;
    --radius-lg: 1.35rem;
    --shadow: 0 14px 38px rgba(23, 50, 77, .08);
    --shadow-sm: 0 4px 14px rgba(23, 50, 77, .06);
    --shell: 1180px;
}

/* --------------------------------------------------------------- Reset -- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    color: var(--ink);
    font-family: Aptos, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 3px solid rgba(45, 108, 223, .28); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

.shell { width: min(calc(100% - 2rem), var(--shell)); margin-inline: auto; }
.section { padding-block: clamp(2.25rem, 5vw, 4.5rem); }
.section--compact { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.main-content { flex: 1 0 auto; min-height: 60vh; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- Header -- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(223, 230, 238, .9);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
}
.site-header__inner { min-height: 72px; display: flex; align-items: center; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .72rem; flex: 0 0 auto; }
.brand__mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    color: var(--blue-dark);
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--paper);
}
.brand__mark svg { width: 22px; height: 22px; }
.brand__name { display: block; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.brand__tagline { display: block; margin-top: .18rem; color: var(--muted); font-size: .69rem; line-height: 1; }

.primary-nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.primary-nav > a,
.nav-levels > summary {
    display: inline-flex; align-items: center;
    min-height: 42px; padding: .55rem .76rem;
    border-radius: .7rem;
    color: var(--muted-dark);
    font-size: .91rem; font-weight: 650;
    list-style: none;
}
.primary-nav > a:hover,
.nav-levels > summary:hover,
.primary-nav > a[aria-current="page"] { color: var(--ink); background: var(--blue-soft); }

.nav-levels { position: relative; }
.nav-levels > summary::-webkit-details-marker { display: none; }
.nav-levels > summary::after {
    content: ""; width: .42rem; height: .42rem; margin: -.2rem 0 0 .5rem;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
}
.nav-levels[open] > summary::after { margin-top: .2rem; transform: rotate(225deg); }
.levels-menu {
    position: absolute; top: calc(100% + .55rem); right: 0;
    width: min(420px, calc(100vw - 2rem));
    padding: .7rem;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); box-shadow: var(--shadow);
    z-index: 60;
}
.levels-menu a {
    padding: .62rem .45rem; border-radius: .55rem;
    color: var(--muted-dark); font-size: .84rem; font-weight: 650; text-align: center;
}
.levels-menu a:hover { color: var(--blue-dark); background: var(--blue-soft); }

.menu-toggle {
    display: none; margin-left: auto;
    width: 42px; height: 42px;
    border: 1px solid var(--line); border-radius: .7rem;
    background: var(--paper); color: var(--ink);
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after {
    content: ""; display: block; width: 18px; height: 2px;
    margin: 4px auto; border-radius: 2px; background: currentColor;
}

/* ---------------------------------------------------------------- Hero -- */

.page-hero {
    padding-block: clamp(2.4rem, 5vw, 4rem);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}
.page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}
.page-hero__grid > *, .article-layout > * { min-width: 0; }
.eyebrow {
    margin: 0 0 .75rem;
    color: var(--blue-dark);
    font-size: .76rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
}
.page-title {
    max-width: 900px; margin: 0;
    color: var(--ink-deep);
    font-size: clamp(2.05rem, 5vw, 3.6rem);
    line-height: 1.06; letter-spacing: -.045em;
    overflow-wrap: break-word;
}
.page-title--article { font-size: clamp(1.85rem, 4.2vw, 3rem); }
.lede {
    max-width: 720px; margin: 1.15rem 0 0;
    color: var(--muted-dark);
    font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.75;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.hero-note { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--canvas); }
.hero-note__label { color: var(--muted); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.hero-note strong { display: block; margin-top: .4rem; color: var(--ink); font-size: 1.05rem; }
.hero-note p { margin: .55rem 0 0; color: var(--muted); font-size: .9rem; }

/* --------------------------------------------------- Fil d'Ariane -------- */

.breadcrumb { margin: 0 0 1.1rem; font-size: .85rem; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .4rem; }
.breadcrumb li + li::before { content: "›"; color: var(--line); }
.breadcrumb a:hover { color: var(--blue-dark); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--muted-dark); font-weight: 650; }

/* ------------------------------------------------- Boutons et étiquettes -- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 46px; padding: .7rem 1.3rem;
    border: 1px solid transparent; border-radius: .8rem;
    font-size: .95rem; font-weight: 700;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); }
.btn--ghost { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-soft); }
.btn--correction { background: var(--green); color: #fff; }
.btn--correction:hover { background: #17724d; }
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .88rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper);
    color: var(--muted-dark);
    font-size: .78rem; font-weight: 700;
}
.tag--level { border-color: rgba(45, 108, 223, .28); background: var(--blue-soft); color: var(--blue-dark); }
.tag--kind { border-color: rgba(31, 138, 95, .25); background: var(--green-soft); color: var(--green); }

.meta-row {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    margin-top: 1.4rem; padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}
.meta-row__item { display: flex; flex-direction: column; gap: .1rem; }
.meta-row__label { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.meta-row__value { color: var(--ink); font-size: .96rem; font-weight: 700; }

/* ------------------------------------------------------ Page ressource -- */

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    align-items: start;
    gap: clamp(1.75rem, 4vw, 3.25rem);
}

/* Sommaire */
.resource-toc {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper);
}
.resource-toc__title {
    margin: 0 0 .8rem;
    color: var(--muted); font-size: .75rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
}
.resource-toc ol { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.resource-toc li { counter-increment: toc; }
.resource-toc a {
    display: flex; gap: .65rem; align-items: baseline;
    padding: .5rem .6rem; border-radius: .55rem;
    color: var(--muted-dark); font-size: .93rem; font-weight: 600;
}
.resource-toc a::before {
    content: counter(toc);
    flex: 0 0 1.55rem; height: 1.55rem;
    display: grid; place-items: center;
    border-radius: .45rem; background: var(--blue-soft);
    color: var(--blue-dark); font-size: .78rem; font-weight: 800;
}
.resource-toc a:hover { background: var(--canvas); color: var(--ink); }

/* Introduction rédactionnelle */
.resource-intro { margin-top: clamp(2rem, 4vw, 3rem); }
.resource-intro h2 { color: var(--ink-deep); font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.resource-intro p { margin-top: .95rem; color: var(--muted-dark); font-size: 1.02rem; line-height: 1.8; }

/* Zone article : fond continu, sans alternance de teintes.
   Les créations AdSense sont majoritairement sur fond blanc ; un fond unique
   évite qu'une annonce insérée entre deux fiches ressorte comme un bloc rapporté. */
.resource-body { background: var(--paper); }

/* Les ressources se lisent comme un article : titre, texte, image, texte,
   actions. Flux bloc et non grille CSS — les annonces automatiques d'AdSense
   s'insèrent entre deux éléments frères ; dans une grille, l'annonce
   deviendrait un item de grille et disloquerait la mise en page. */
.resource-version-list { margin-top: clamp(2rem, 4vw, 3rem); }

.resource-item {
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
    border-top: 1px solid var(--line);
    scroll-margin-top: 92px;
}
.resource-item:first-child { padding-top: 0; border-top: none; }

.resource-item__index {
    margin-bottom: .55rem;
    color: var(--blue-dark); font-size: .75rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
}
.resource-item h2 {
    color: var(--ink-deep);
    font-size: clamp(1.4rem, 2.8vw, 1.95rem);
    line-height: 1.25;
}
.resource-item__summary {
    margin-top: .85rem;
    color: var(--ink);
    font-size: 1.08rem; font-weight: 600; line-height: 1.7;
}
.resource-item > p { margin-top: 1rem; color: var(--muted-dark); font-size: 1.02rem; line-height: 1.8; }

/* Schéma de la ressource, tracé et non photographié : il montre le mécanisme
   que le texte décrit. En SVG inline, il reste net à toute échelle. */
.resource-item__schema {
    margin: 1.5rem 0;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}
.resource-item__schema svg,
.resource-item__schema img { display: block; width: 100%; height: auto; }
.resource-item__schema figcaption {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.6;
}

/* Crédit d'une image de source externe : distinct de la légende, pour que
   la provenance reste lisible sans se confondre avec le propos. */
.figure-credit {
    display: block;
    margin-top: .35rem;
    color: var(--muted);
    font-size: .78rem;
    font-style: italic;
    line-height: 1.5;
}

/* Une planche ancienne est haute et étroite : sans plafond, elle occuperait
   deux écrans à elle seule. */
.resource-item__schema img { max-height: 640px; width: auto; margin-inline: auto; }

/* Aperçu des pages de la fiche : c'est le visuel de la ressource, placé tôt
   dans le fil de lecture puisqu'il montre le document réellement téléchargé. */
.resource-item__previews { margin: 1.6rem 0; }
.resource-item__previews figcaption {
    margin-top: .7rem;
    color: var(--muted); font-size: .85rem; text-align: center;
}

.resource-item__actions {
    display: flex; flex-wrap: wrap; gap: .7rem;
    margin-top: 1.5rem;
}

/* Note de clôture d'une ressource. Elle suit la prose et la termine : ni trait
   de séparation, ni position isolée sous les boutons, où une phrase courte
   paraissait tronquée. Un filet vertical la distingue sans la détacher. */
.resource-item__after {
    margin-top: 1rem; padding-left: .9rem;
    border-left: 2px solid var(--line);
    color: var(--muted); font-size: .95rem; line-height: 1.75;
}

.focus-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; list-style: none; }
.focus-list li {
    padding: .32rem .75rem;
    border: 1px dashed var(--line); border-radius: 999px;
    background: var(--canvas);
    color: var(--muted-dark); font-size: .8rem; font-weight: 650;
}

/* Le barème détaillé, sur la page d'accompagnement seulement.
   Il donne, exercice par exercice, ce qui est demandé, ce que cela vaut et ce
   que le correcteur regarde. Les réponses, elles, restent dans le PDF. */
.bareme {
    margin-top: 1.5rem; padding: 1.1rem 1.25rem;
    border: 1px solid var(--line); border-left: 3px solid var(--blue);
    border-radius: var(--radius-sm);
    background: var(--canvas);
}
.bareme__titre {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .5rem;
    margin: 0 0 .9rem; font-size: .95rem; color: var(--ink-deep);
}
.bareme__total { color: var(--muted); font-size: .78rem; font-weight: 600; }
.bareme__exercice + .bareme__exercice {
    margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line);
}
.bareme__entete {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .4rem; margin: 0;
}
.bareme__nom { font-weight: 650; color: var(--ink); font-size: .9rem; }
.bareme__points {
    flex: none; padding: .1rem .5rem;
    border-radius: 999px; background: var(--paper);
    border: 1px solid var(--line);
    color: var(--muted-dark); font-size: .74rem; font-weight: 650;
}
.bareme__consigne {
    margin: .3rem 0 0; color: var(--muted-dark);
    font-size: .87rem; font-style: italic;
}
.bareme__methodes {
    margin: .5rem 0 0; padding-left: 1.1rem;
    color: var(--muted-dark); font-size: .87rem; line-height: 1.55;
}
.bareme__methodes li { margin-top: .2rem; }

/* Aperçus : deux pages côte à côte, largeur de lecture contenue. */
.preview-stack {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
    max-width: 560px; margin-inline: auto;
}
.preview-stack button {
    padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.preview-stack button:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.preview-stack img { width: 100%; aspect-ratio: 720 / 1018; object-fit: cover; background: #fff; }

.paper-placeholder {
    display: grid; place-items: center;
    aspect-ratio: 720 / 1018;
    border: 1px dashed var(--line); border-radius: var(--radius-sm);
    background:
        repeating-linear-gradient(transparent, transparent 14px, var(--line) 14px, var(--line) 15px);
    color: var(--muted); font-size: .8rem;
}

/* La colonne aperçu garde sa hauteur naturelle : sans align-self, elle s'étirait
   sur toute la carte et laissait un grand vide sous les boutons. */


/* Compétences travaillées */
.learning-points { margin-top: clamp(2rem, 4vw, 3rem); }
.learning-points h2 { color: var(--ink-deep); font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
.learning-points__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem; margin-top: 1.3rem; list-style: none;
}
.learning-points__grid li {
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper);
}
.learning-points__grid strong { display: block; margin-bottom: .4rem; color: var(--ink); font-size: 1rem; }
.learning-points__grid p { color: var(--muted-dark); font-size: .93rem; line-height: 1.7; }

/* Contenu rédactionnel long */
.prose { margin-top: clamp(2rem, 4vw, 3rem); }
.prose h2 { margin-top: 2rem; color: var(--ink-deep); font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
.prose h3 { margin-top: 1.5rem; color: var(--ink); font-size: 1.15rem; }
.prose p { margin-top: .9rem; color: var(--muted-dark); line-height: 1.8; }
.prose ul, .prose ol { margin-top: .9rem; padding-left: 1.3rem; color: var(--muted-dark); }
.prose li { margin-top: .4rem; line-height: 1.75; }
.prose a { color: var(--blue-dark); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.voir-aussi { margin-top: clamp(2rem, 4vw, 3rem); padding: 1.4rem 1.5rem; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
.voir-aussi h2 { margin: 0 0 .8rem; font-size: 1.1rem; color: var(--ink-deep); }
.voir-aussi ul { margin: 0; padding: 0; list-style: none; }
.voir-aussi li { margin-top: .6rem; line-height: 1.6; }
.voir-aussi a { color: var(--blue-dark); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.voir-aussi span { display: block; color: var(--muted); font-size: .92rem; }
.prose-figure { margin: 1.6rem 0 0; }
.prose-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.prose-figure figcaption { margin-top: .55rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.prose table { width: 100%; margin-top: 1.2rem; border-collapse: collapse; font-size: .94rem; }
.prose th, .prose td { padding: .65rem .8rem; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--canvas); font-weight: 700; }

/* Bloc éditorial (E-E-A-T) */
.editorial-method {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--line); border-left: 4px solid var(--blue);
    border-radius: var(--radius);
    background: var(--paper);
}
.editorial-method h2 { color: var(--ink-deep); font-size: 1.15rem; }
.editorial-method p { margin-top: .6rem; color: var(--muted-dark); font-size: .94rem; line-height: 1.75; }
.editorial-method__meta { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; color: var(--muted); font-size: .85rem; }
.editorial-method ul { margin-top: .7rem; padding-left: 1.2rem; color: var(--muted-dark); font-size: .9rem; }

/* FAQ */
.faq { margin-top: clamp(2rem, 4vw, 3rem); }
.faq h2 { color: var(--ink-deep); font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
.faq__list { display: grid; gap: .7rem; margin-top: 1.3rem; }
.faq details {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); overflow: hidden;
}
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem;
    color: var(--ink); font-weight: 700; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; flex: 0 0 auto;
    width: .5rem; height: .5rem; margin-top: -.25rem;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { margin-top: .25rem; transform: rotate(225deg); }
.faq details[open] summary { background: var(--blue-soft); }
.faq__answer { padding: 0 1.25rem 1.15rem; color: var(--muted-dark); line-height: 1.8; }

/* Colonne latérale */
.article-aside { display: grid; gap: 1rem; position: sticky; top: 92px; }
.aside-card {
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper);
}
.aside-card h2 { color: var(--ink-deep); font-size: 1.02rem; }
.aside-card p { margin-top: .5rem; color: var(--muted-dark); font-size: .9rem; line-height: 1.7; }
.aside-card .btn { width: 100%; margin-top: .9rem; }
.aside-card__thumb { margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.aside-card__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ------------------------------------------------------------ Listing --- */

.filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper);
}
.filters input[type="search"], .filters select {
    min-height: 44px; padding: .6rem .9rem;
    border: 1px solid var(--line); border-radius: .7rem;
    background: var(--paper);
}
.filters input[type="search"] { flex: 1 1 240px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.filter-chips a {
    padding: .38rem .85rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--muted-dark);
    font-size: .85rem; font-weight: 650;
}
.filter-chips a:hover, .filter-chips a[aria-current="true"] {
    border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark);
}

.card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    list-style: none;
}
.resource-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--paper); overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.resource-card:hover { transform: translateY(-3px); border-color: rgba(45, 108, 223, .35); box-shadow: var(--shadow); }
.resource-card__media { background: var(--canvas); border-bottom: 1px solid var(--line); }
.resource-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.resource-card__placeholder {
    display: grid; place-items: center; aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, var(--blue-soft), var(--canvas));
    color: var(--blue-dark); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em;
}
.resource-card__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.15rem 1.25rem 1.35rem; flex: 1; }
.resource-card__title { font-size: 1.05rem; line-height: 1.35; }
.resource-card__title a:hover { color: var(--blue-dark); }
.resource-card__desc {
    color: var(--muted); font-size: .9rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.resource-card__foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--line);
    color: var(--muted); font-size: .82rem;
}
.resource-card__foot span { display: inline-flex; align-items: center; gap: .35rem; }
.resource-card__link { color: var(--blue-dark); font-weight: 700; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pagination a, .pagination span {
    min-width: 42px; min-height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .7rem;
    border: 1px solid var(--line); border-radius: .65rem;
    background: var(--paper); color: var(--muted-dark); font-weight: 650;
}
.pagination a:hover { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-soft); }
.pagination [aria-current="page"] { border-color: var(--blue); background: var(--blue); color: #fff; }

.empty-state { padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; text-align: center; }
.empty-state h2 { color: var(--ink-deep); font-size: 1.4rem; }
.empty-state p { margin-top: .6rem; color: var(--muted); }

/* ----------------------------------------------------- Pages système ---- */

.system-state { padding: clamp(3rem, 8vw, 6rem) 1.5rem; text-align: center; }
.system-state__code { color: var(--blue); font-size: clamp(3.5rem, 12vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.system-state h1 { margin-top: 1rem; color: var(--ink-deep); font-size: clamp(1.5rem, 3vw, 2.1rem); }
.system-state p { margin: .8rem auto 1.8rem; max-width: 46ch; color: var(--muted); }

/* ------------------------------------------------------------- Footer --- */

.site-footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--paper); }
.site-footer__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(2rem, 4vw, 3rem);
}
.site-footer h2 { margin-bottom: .8rem; color: var(--ink); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.site-footer p { color: var(--muted); font-size: .9rem; line-height: 1.7; }
.site-footer ul { display: grid; gap: .45rem; list-style: none; }
.site-footer a { color: var(--muted-dark); font-size: .9rem; }
.site-footer a:hover { color: var(--blue-dark); text-decoration: underline; }
.site-footer__levels { display: flex; flex-wrap: wrap; gap: .4rem; }
.site-footer__levels a {
    padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 999px;
    font-size: .82rem; font-weight: 650;
}
.site-footer__bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding-block: 1.1rem; border-top: 1px solid var(--line);
    color: var(--muted); font-size: .85rem;
}

/* ------------------------------------------------------------ Lightbox -- */

.preview-lightbox { width: min(92vw, 860px); padding: 0; border: none; border-radius: var(--radius-lg); background: transparent; }
.preview-lightbox::backdrop { background: rgba(16, 38, 59, .78); backdrop-filter: blur(3px); }
.preview-lightbox img { width: 100%; border-radius: var(--radius); background: #fff; }
.preview-lightbox__close {
    position: absolute; top: .6rem; right: .6rem;
    width: 40px; height: 40px;
    border: none; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--ink);
    font-size: 1.2rem; line-height: 1;
}

/* ------------------------------------------------- Bandeau cookies ------ */

.cookie-banner {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 30px rgba(23, 50, 77, .1);
}
.cookie-banner__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding-block: 1rem;
}
.cookie-banner p { flex: 1 1 320px; color: var(--muted-dark); font-size: .88rem; line-height: 1.6; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ------------------------------------------- Fond unifié de l'article ---
   Dans la zone article, aucun bloc ne porte de fond propre : la délimitation
   se fait au liseré. Une annonce automatique insérée n'importe où reste ainsi
   sur le même fond que le contenu qui l'entoure. */

.resource-body :is(.resource-toc, .learning-points__grid li, .faq details,
                   .editorial-method, .aside-card, .ad-slot) {
    background: transparent;
}
.resource-body .faq details[open] summary { background: var(--blue-soft); }

/* La section « À découvrir aussi » reprend la teinte de page pour marquer
   la fin de l'article : c'est le seul changement de fond, et il est franc. */
.related-section {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
}
.related-section > h2 {
    margin-bottom: 1.4rem;
    color: var(--ink-deep);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}
.related-section .card-grid { margin-top: 0; }
.related-section .resource-card { background: var(--canvas); }

/* ---------------------------------------------------------- Publicité --- */

/* Règles AdSense : une annonce doit être nettement séparée du contenu et des
   contrôles, jamais confondue avec un bouton. D'où le label, le liseré et
   le fond blanc — les créations AdSense sont majoritairement sur fond blanc,
   un fond gris les ferait ressortir comme des rectangles rapportés. */
/* Pas de cadre ni de fond : un emplacement que l'annonce ne remplit pas ne
   laisse aucune trace visible. La séparation d'avec le contenu se fait par
   l'espacement seul. */
.ad-slot {
    margin-block: 2.75rem;
    text-align: center;
}
.ad-slot:empty { display: none; margin-block: 0; }

/* AdSense marque « unfilled » un emplacement pour lequel aucune annonce n'a été
   servie. Sans cette règle, il laisse un grand blanc au milieu de l'article. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
ins.adsbygoogle[data-ad-status="unfilled"] + script { display: none; }

/* Gabarit du mode test de l'administration : rend chaque emplacement visible
   sans charger AdSense, pour vérifier les positions avant mise en ligne. */
.ad-test {
    display: grid; place-items: center; gap: .2rem;
    min-height: 110px; padding: 1rem;
    border: 2px dashed var(--line); border-radius: var(--radius);
    background: var(--canvas);
}
.ad-test__label { color: var(--blue-dark); font-size: .9rem; font-weight: 800; }
.ad-test__note { color: var(--muted); font-size: .78rem; }

/* Emplacement de la colonne aperçu : occupe la hauteur restante de la carte
   au lieu de laisser un vide, et reste séparé des boutons d'action. */


/* Les blocs publicitaires imposent souvent une largeur fixe : on les contient
   pour qu'ils ne provoquent jamais de défilement horizontal sur mobile. */
ins.adsbygoogle, .ad-slot > div, .ad-slot ins { max-width: 100%; overflow: hidden; }
ins.adsbygoogle iframe, .ad-slot iframe { max-width: 100% !important; }
.ad-slot :is(div, ins, iframe) { margin-inline: auto; }

/* ============================================================ Legacy ====
   Rendu des 195 articles pas encore migrés (documents.content).
   Objectif : lisible et responsive, sans le min-width:600px de l'ancien site.
   ======================================================================== */

.legacy-content { margin-top: clamp(1.75rem, 3vw, 2.5rem); color: var(--muted-dark); font-size: 1rem; line-height: 1.8; }
.legacy-content > * + * { margin-top: 1rem; }
.legacy-content h1, .legacy-content h2, .legacy-content h3 { margin-top: 2rem; color: var(--ink-deep); line-height: 1.3; }
.legacy-content h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.legacy-content h2 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
.legacy-content h3 { font-size: 1.15rem; }
.legacy-content p { line-height: 1.8; }
.legacy-content ul, .legacy-content ol { padding-left: 1.35rem; }
.legacy-content li { margin-top: .4rem; }
.legacy-content strong { color: var(--ink); }
.legacy-content a { color: var(--blue-dark); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.legacy-content img, .legacy-content svg { max-width: 100%; height: auto; margin-inline: auto; }
.legacy-content table {
    width: 100%; border-collapse: collapse; font-size: .94rem;
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.legacy-content th, .legacy-content td { padding: .6rem .75rem; border: 1px solid var(--line); text-align: left; }
.legacy-content th { background: var(--canvas); font-weight: 700; }
.legacy-content .exercice { margin-top: 1.75rem; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.legacy-content .exercice-header { margin: -1.15rem -1.25rem 1rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--canvas); font-weight: 700; }
.legacy-content .consigne { font-style: italic; color: var(--muted); }
.legacy-content .ligne { height: 1.6rem; border-bottom: 1px solid var(--line); }
.legacy-content .reponse { padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--green-soft); }
.legacy-content .methode { padding: .8rem 1rem; border-left: 3px solid var(--blue); border-radius: var(--radius-sm); background: var(--blue-soft); }

/* =========================================================== Responsive == */

@media (max-width: 960px) {
    .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero-note { order: -1; }
    .article-layout { grid-template-columns: minmax(0, 1fr); }
    .article-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

}

@media (max-width: 860px) {
    .menu-toggle { display: block; }
    .primary-nav {
        position: absolute; top: 100%; inset-inline: 0;
        display: none; flex-direction: column; align-items: stretch; gap: .2rem;
        padding: .8rem 1rem 1.1rem;
        border-bottom: 1px solid var(--line);
        background: var(--paper); box-shadow: var(--shadow);
    }
    .primary-nav.is-open { display: flex; }
    .nav-levels { position: static; }
    .levels-menu { position: static; width: 100%; margin-top: .35rem; box-shadow: none; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
    .shell { width: calc(100% - 1.75rem); }
    .preview-stack { gap: .6rem; }
    .preview-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .levels-menu { grid-template-columns: repeat(2, 1fr); }
    .meta-row { gap: .5rem 1.1rem; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .btn:hover, .resource-card:hover, .preview-stack button:hover { transform: none; }
}

@media print {
    .site-header, .site-footer, .article-aside, .cookie-banner,
    .resource-toc, .resource-item__actions, .hero-actions, .preview-lightbox { display: none !important; }
    body { background: #fff; color: #000; }
    .resource-item { break-inside: avoid; }
    .legacy-content .exercice { break-inside: avoid; }
    a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}