/* =====================================================================
   Pages de rubrique (Maths, Français, Brevet...) : la base commune.
   Chaque rubrique porte son habit dans sa page : couleur (--rb-c, --rb-c2), décor du haut,
   détails des cartes à la une. Le socle (jetons, police, bouton en relief) vient de socle.css.
   Pages fabriquées par 02_Formats/rubriques/fabriquer_rubriques.py : retoucher le gabarit
   ou l'habit de la rubrique, puis relancer, plutôt que la page elle-même.
   ===================================================================== */

.rb {
    --rb-c: var(--accent);
    --rb-c2: var(--pink);
    --rb-deep: #17123d;
    --k-exercices: #2ed8a3;
    --k-cours: #3d8bff;
    --k-quiz: #ff5da2;
    --k-sujets: #ff8a3d;
}
.rb-main { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Fil d'Ariane ---- */
.rb-crumbs { padding-top: 100px; font-size: .92rem; color: var(--ink-soft); }
.rb-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rb-crumbs li + li::before { content: "\203A"; margin-right: 6px; opacity: .6; }
.rb-crumbs a { color: inherit; font-weight: 650; text-decoration: none; }
.rb-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Haut de page : le texte à gauche, le décor de la rubrique à droite ---- */
.rb-hero {
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center; gap: 24px clamp(24px, 4vw, 56px);
    min-height: min(620px, 76vh);
    padding: 12px 0 28px;
}
.rb-copy { position: relative; z-index: 2; }
.rb-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 15px 7px 10px; border-radius: 999px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    box-shadow: 0 10px 24px -14px rgba(var(--shade), .5);
    font-weight: 750; font-size: .92rem;
}
.rb-kicker::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85), var(--rb-c) 52%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-c) 26%, transparent);
}
.rb-hero h1 {
    margin: 18px 0 0;
    font-size: clamp(3.4rem, 9.4vw, 8.6rem);
    line-height: .88; font-weight: 800; font-stretch: 76%; letter-spacing: -.035em;
    color: var(--ink);
    text-shadow:
        0 2px 0 color-mix(in srgb, var(--rb-c) 72%, #fff),
        0 4px 0 color-mix(in srgb, var(--rb-c) 86%, #fff),
        0 6px 0 var(--rb-c),
        0 8px 0 color-mix(in srgb, var(--rb-c) 82%, #000),
        0 10px 0 color-mix(in srgb, var(--rb-c) 66%, #000),
        0 26px 40px rgba(var(--shade), .28);
}
:root[data-theme="dark"] .rb-hero h1 {
    text-shadow:
        0 2px 0 color-mix(in srgb, var(--rb-c) 90%, #000),
        0 4px 0 color-mix(in srgb, var(--rb-c) 75%, #000),
        0 6px 0 color-mix(in srgb, var(--rb-c) 60%, #000),
        0 8px 0 color-mix(in srgb, var(--rb-c) 45%, #000),
        0 10px 0 color-mix(in srgb, var(--rb-c) 32%, #000),
        0 26px 44px rgba(0, 0, 0, .5);
}
.rb-lede { margin: 26px 0 0; max-width: 33em; color: var(--ink-soft); font-size: clamp(1.06rem, 1.3vw, 1.24rem); }
.rb-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.rb-stats li {
    display: flex; align-items: baseline; gap: 7px;
    padding: 9px 15px; border-radius: 16px;
    background: var(--glass); border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: .95rem; color: var(--ink-soft);
}
.rb-stats b { color: var(--ink); font-size: 1.25rem; font-weight: 800; font-stretch: 85%; }
.rb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; }
.rb-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px;
    border: 1px solid var(--glass-line); background: var(--glass-strong);
    color: var(--ink); font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
    box-shadow: 0 10px 22px -14px rgba(var(--shade), .5);
    transition: transform .15s ease, box-shadow .15s ease;
}
.rb-ghost:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(var(--shade), .55); }
.rb-ghost svg, .rb-actions .btn3d svg { width: 18px; height: 18px; flex: none; }
.rb-art { position: relative; z-index: 1; min-height: 440px; height: 100%; }

/* ---- Décors : la scène, son canevas, des tuiles de verre qui flottent (utilisés par les habits) ---- */
.rb-stage { position: absolute; inset: 0; perspective: 1000px; }
.rb-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rb-tile {
    --d: 18;
    position: absolute; z-index: 2;
    transform: translate3d(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.rb-tile > span {
    display: block; padding: 10px 16px 11px; border-radius: 16px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--rb-c) 80%, transparent), 0 20px 30px -16px rgba(var(--shade), .55);
    font-size: clamp(.95rem, 1.3vw, 1.15rem); font-weight: 650; line-height: 1.25; white-space: nowrap; color: var(--ink);
    animation: rb-float 7s ease-in-out infinite;
}
.rb-tile small { display: block; margin-top: 3px; font-family: var(--font); font-style: normal; font-size: .72em; font-weight: 600; color: var(--ink-soft); }
.rb-tile .rb-math { font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", Cambria, Georgia, serif; font-weight: 400; }
.rb-tile i { font-style: italic; }
.rb-tile sub, .rb-tile sup { font-size: .66em; line-height: 0; }
@keyframes rb-float { 50% { translate: 0 -10px; } }

/* ---- Sections ---- */
.rb-sec { margin-top: clamp(64px, 8vw, 108px); scroll-margin-top: 90px; }
.rb-h2 {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
    margin: 0; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; font-weight: 800; font-stretch: 80%; letter-spacing: -.02em;
    text-shadow: 0 2px 0 var(--extrude-1), 0 4px 0 var(--extrude-2), 0 6px 0 var(--extrude-3), 0 16px 26px rgba(var(--shade), .2);
}
.rb-h2 small { font-size: 1rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0; color: var(--ink-soft); text-shadow: none; }
.rb-sub { margin: 14px 0 0; max-width: 46em; color: var(--ink-soft); }

/* ---- Par où commencer : les pages les plus lues ---- */
.rb-top {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 30px 24px; margin: 34px 0 0; padding: 0; list-style: none; counter-reset: rb-top;
}
.rb-feat { counter-increment: rb-top; }
.rb-feat a {
    position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%;
    padding: 24px 24px 22px; border-radius: 28px;
    background: var(--paper); border: 1px solid var(--glass-line);
    box-shadow: 0 8px 0 color-mix(in srgb, var(--rb-c) 70%, transparent), 0 26px 40px -24px rgba(var(--shade), .55);
    color: var(--ink); text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.rb-feat a:hover, .rb-feat a:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 13px 0 var(--rb-c), 0 32px 46px -24px rgba(var(--shade), .6);
}
.rb-feat a:active { transform: translateY(2px); box-shadow: 0 4px 0 var(--rb-c), 0 14px 24px -18px rgba(var(--shade), .5); }
.rb-feat-title { font-size: 1.2rem; font-weight: 750; line-height: 1.25; }
.rb-feat-text { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.5; }
.rb-feat-go { margin-top: auto; padding-top: 6px; font-weight: 750; font-size: .95rem; color: var(--ink); }
.rb-feat-go::after { content: " \2192"; display: inline-block; transition: transform .18s; }
.rb-feat a:hover .rb-feat-go::after { transform: translateX(4px); }

/* étiquette du type de page */
.rb-kind {
    --k: var(--k-cours);
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px 4px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--k) 16%, transparent);
    font-size: .8rem; font-weight: 750; line-height: 1.3; color: var(--ink);
}
.rb-kind::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.rb-kind.k-exercices { --k: var(--k-exercices); }
.rb-kind.k-quiz { --k: var(--k-quiz); }
.rb-kind.k-sujets { --k: var(--k-sujets); }

/* ---- Toutes les pages : filtres, recherche, grille ---- */
.rb-tools {
    position: sticky; top: 80px; z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
    margin: 30px 0 0; padding: 12px; border-radius: 26px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 18px 40px -26px rgba(var(--shade), .55);
}
/* min-width : un fieldset ne rétrécit pas sous son contenu sans ça (et la page déborderait sur mobile) */
.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rb-chips legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rb-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px; border: 0;
    background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: .93rem; cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.rb-chip span { font-weight: 600; font-size: .82rem; color: var(--ink-soft); }
.rb-chip:hover { background: color-mix(in srgb, var(--rb-c) 16%, transparent); }
.rb-chip[aria-pressed="true"] {
    background: var(--rb-c); color: var(--rb-deep);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--rb-c) 60%, #000), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.rb-chip[aria-pressed="true"] span { color: color-mix(in srgb, var(--rb-deep) 75%, transparent); }
.rb-chip[disabled] { opacity: .4; cursor: default; }
.rb-sep { width: 1px; align-self: stretch; background: var(--paper-line); }
.rb-find {
    flex: 1 1 220px; display: flex; align-items: center; gap: 8px;
    min-width: 0; padding: 4px 6px 4px 14px; border-radius: 999px;
    background: var(--paper); border: 1px solid var(--paper-line);
}
.rb-find:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-c) 55%, transparent); }
.rb-find svg { flex: none; width: 18px; height: 18px; color: var(--ink-soft); }
.rb-find input {
    flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: none; background: transparent;
    color: var(--ink); font: inherit; font-size: 1rem; font-weight: 500;
}
.rb-find input::placeholder { color: var(--ink-soft); opacity: .85; }
.rb-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.rb-count { margin: 18px 4px 0; color: var(--ink-soft); font-size: .95rem; min-height: 1.4em; }

.rb-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px; margin: 14px 0 0; padding: 0; list-style: none;
}
.rb-card[hidden] { display: none; }
.rb-card a {
    display: flex; flex-direction: column; gap: 9px; height: 100%;
    padding: 16px 18px 15px; border-radius: 20px;
    background: var(--glass); border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--rb-c) 34%, transparent), 0 14px 26px -20px rgba(var(--shade), .5);
    color: var(--ink); text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.rb-card a:hover, .rb-card a:focus-visible {
    transform: translateY(-3px); background: var(--paper);
    box-shadow: 0 7px 0 color-mix(in srgb, var(--rb-c) 75%, transparent), 0 20px 30px -20px rgba(var(--shade), .55);
}
.rb-card .rb-title { font-weight: 700; line-height: 1.3; }
.rb-card .rb-meta { margin-top: auto; color: var(--ink-soft); font-size: .85rem; font-weight: 600; }
.rb-moreline { display: flex; justify-content: center; margin-top: 30px; }
.rb-moreline[hidden], .rb-empty[hidden] { display: none; }
.rb-empty {
    margin: 22px 0 0; padding: 26px; border-radius: 22px; text-align: center;
    background: var(--glass); border: 1px dashed var(--paper-line); color: var(--ink-soft);
}
.rb-empty a { font-weight: 700; color: var(--ink); }

/* ---- Les autres rubriques ---- */
.rb-others { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.rb-others a {
    --c: var(--accent);
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 22px 12px 14px; border-radius: 999px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 70%, transparent), 0 16px 28px -18px rgba(var(--shade), .5);
    color: var(--ink); font-weight: 750; font-size: 1.05rem; text-decoration: none;
    transform: translateY(-3px);
    transition: transform .15s ease, box-shadow .15s ease;
}
.rb-others a::before {
    content: ""; width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9), var(--c) 50%, color-mix(in srgb, var(--c) 70%, #000));
    box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .18);
}
.rb-others a:hover { transform: translateY(-6px); box-shadow: 0 8px 0 var(--c), 0 20px 30px -18px rgba(var(--shade), .55); }
.rb-others a:active { transform: translateY(0); box-shadow: 0 2px 0 var(--c); }
.rb-others .rb-all-link a { --c: var(--accent); }
.rb-plus-h { margin: 34px 0 0; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.rb-plus { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rb-plus a {
    --c: var(--accent);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 10px; border-radius: 999px;
    background: var(--glass); border: 1px solid var(--glass-line);
    color: var(--ink); font-weight: 650; font-size: .95rem; text-decoration: none;
    transition: background .15s, transform .15s;
}
.rb-plus a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.rb-plus a:hover { background: var(--glass-strong); transform: translateY(-2px); }

/* ---- Petits écrans ---- */
@media (max-width: 899px) {
    .rb-crumbs { padding-top: 92px; }
    .rb-hero { grid-template-columns: 1fr; min-height: 0; padding-bottom: 8px; }
    .rb-art { min-height: 300px; height: 320px; order: 2; }
    .rb-stats { gap: 8px; }
    .rb-stats li { padding: 6px 12px; border-radius: 13px; font-size: .88rem; }
    .rb-stats b { font-size: 1.08rem; }
    .rb-tools { top: 74px; border-radius: 22px; }
    .rb-tools .rb-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    .rb-tools .rb-chips::-webkit-scrollbar { display: none; }
    .rb-chip { flex: none; }
    .rb-sep { display: none; }
}
@media (max-width: 560px) {
    .rb-tools { position: static; }
}

/* ---- Mouvement coupé ---- */
@media (prefers-reduced-motion: reduce) {
    .rb-feat a, .rb-card a, .rb-others a, .rb-plus a, .rb-ghost, .rb-feat-go::after, .rb-tile { transition: none; }
    .rb-tile > span { animation: none; }
}
html[data-a11y-motion="off"] .rb-feat a, html[data-a11y-motion="off"] .rb-card a,
html[data-a11y-motion="off"] .rb-others a, html[data-a11y-motion="off"] .rb-ghost,
html[data-a11y-motion="off"] .rb-tile { transition: none; }
html[data-a11y-motion="off"] .rb-tile > span { animation: none; }

@media print {
    .rb-art, .rb-tools, .rb-moreline, .rb-others { display: none !important; }
    .rb-card[hidden] { display: block !important; }
}