/* PedagoProf — pages « Toutes les classes » (fiches/index.html) et pages de classe (niveau-5e, 4e, 3e).
   Même identité que l'accueil et les fiches : Poppins, bleu PedagoProf, bleu clair d'accent, orange vif,
   couleurs des trois domaines, fond gris-bleu des fiches, barre du haut et flèche retour des fiches.
   Couleur de chaque classe (--lc) : 5e violet #7a3ff2, 4e orange vif #ff6a4d, 3e bleu #2549d8 ;
   classes « À venir » : grisées. */

/* Police de secours aux dimensions proches de Poppins (Arial ajustée) : pas de saut quand Poppins arrive */
@font-face {
    font-family: "Poppins Fallback";
    src: local("Arial");
    size-adjust: 112.5%;
    ascent-override: 93%;
    descent-override: 31%;
    line-gap-override: 9%;
}
:root {
    --blue: #2549d8;
    --blue-ink: #0f2266;
    --sky: #dde4f7; /* bleu clair d'accent (accueil) */
    --sky-soft: #eef2ff;
    --coral: #ff6a4d;
    --ink: #1c2340;
    --muted: #5a6178;
    --line: #e4e7f2;
    --bg: #eef0f7; /* fond des fiches */
    font-family: "Poppins", "Poppins Fallback", Arial, sans-serif;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a {
    color: var(--blue);
    text-decoration: none;
}
.wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Barre du haut : celle des fiches (fond blanc, logo bleu nuit, flèche retour) ---- */
.topbar.pp-top .pp-nav .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--blue-ink);
}
.topbar.pp-top .pp-nav .back-link:hover {
    color: var(--coral);
}
.topbar.pp-top .pp-nav .back-link .back-icon {
    -webkit-mask-image: url("../assets/opt/fleche-retour-64.png");
    mask-image: url("../assets/opt/fleche-retour-64.png");
}
@media (max-width: 600px) {
    .topbar.pp-top .back-txt {
        display: none;
    }
}

/* ---- Filigrane mathématique tracé main : éléments propres à chaque classe (data-wm), jamais les mêmes d'une carte à l'autre ---- */
.wm-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.wm-host::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background: var(--wm-col, #fff);
    opacity: var(--wm-op, 0.16);
    -webkit-mask: var(--wm) no-repeat right center / contain;
    mask: var(--wm) no-repeat right center / contain;
}
/* Éléments mathématiques de chaque classe (générés : masques SVG au trait, 200 × 200) */
[data-wm="primaire"] {
    --wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(14 16) scale(1.625)' stroke-width='1.8' d='M0 0H10L3.5 16'/%3E%3Cpath transform='translate(35.1 16) scale(1.625)' stroke-width='1.8' d='M5 4V14M0 9H10'/%3E%3Cpath transform='translate(56.2 16) scale(1.625)' stroke-width='1.8' d='M9 0H1.5L1 7C3 5.5 10 5 10 10.5C10 16 3 17 0 14'/%3E%3Cpath d='M108 26C120 22 160 22 188 24C189 34 189 40 188 46C160 48 120 47 108 46C107 38 107 32 108 26Z'/%3E%3Cpath d='M118 25V33M128 25V37M138 25V33M148 25V37M158 25V33M168 25V37M178 25V33'/%3E%3Cpath d='M62 96C76 96 88 108 88 122C88 137 76 148 62 148C47 148 36 137 36 122C36 108 47 96 62 96Z'/%3E%3Cpath d='M62 122V104M62 122L74 130'/%3E%3Ccircle cx='62' cy='122' r='2.4' fill='black' stroke='none'/%3E%3Cpath d='M120 108C134 107 150 108 164 107C165 121 165 135 164 150C150 151 134 150 121 151C120 136 120 122 120 108Z'/%3E%3Cpath d='M150 176C150 187 142 194 132 194C122 194 114 187 114 176C114 166 122 158 132 158C142 158 150 166 150 176Z' opacity='.8'/%3E%3C/svg%3E");
}
[data-wm="6e"] {
    --wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(120 14) scale(1.625)' stroke-width='1.8' d='M5 0C1 0 0 5 0 8C0 12 1 16 5 16C9 16 10 12 10 8C10 4 9 0 5 0'/%3E%3Cpath transform='translate(141.1 14) scale(1.625)' stroke-width='1.8' d='M2.5 14.5C2.5 16.5 2 17.5 1 18.5'/%3E%3Cpath transform='translate(152.5 14) scale(1.625)' stroke-width='1.8' d='M9 0H1.5L1 7C3 5.5 10 5 10 10.5C10 16 3 17 0 14'/%3E%3Cpath d='M14 74C14 46 36 24 64 24C92 24 114 46 114 74Z'/%3E%3Cpath d='M26 74C26 53 43 36 64 36C85 36 102 53 102 74'/%3E%3Cpath d='M64 74L92 46'/%3E%3Ccircle cx='64' cy='74' r='2.4' fill='black' stroke='none'/%3E%3Cpath d='M24 118H74V168H24ZM24 118L42 102H92L74 118M92 102V152L74 168'/%3E%3Cpath d='M140 96V196' stroke-dasharray='7 7'/%3E%3Cpath d='M128 118L104 150L130 164Z'/%3E%3Cpath d='M152 118L176 150L150 164Z'/%3E%3C/svg%3E");
}
[data-wm="5e"] {
    --wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(22 10) scale(1.625)' stroke-width='1.8' d='M0.5 3.5C1.5 0 9 -0.5 9 4C9 8 3 11 0 16H10'/%3E%3Cpath d='M12 46C24 45 36 47 46 45'/%3E%3Cpath transform='translate(22 54) scale(1.625)' stroke-width='1.8' d='M9 0H1.5L1 7C3 5.5 10 5 10 10.5C10 16 3 17 0 14'/%3E%3Ccircle cx='138' cy='50' r='2.8' fill='black' stroke='none'/%3E%3Cpath d='M94 20L104 30M104 20L94 30'/%3E%3Cpath d='M172 70L182 80M182 70L172 80'/%3E%3Cpath d='M99 25L177 75' stroke-dasharray='5 6' opacity='.7'/%3E%3Cpath d='M116 32L120 41M156 59L160 68'/%3E%3Cpath d='M12 100C40 99 70 101 104 99M12 134C40 133 70 135 104 133M34 150C48 128 66 104 86 84'/%3E%3Cpath d='M62 100C61 105 58 108 54 108M57 133C58 128 61 125 65 125'/%3E%3Cpath d='M8 160C60 159 130 161 194 160M186 154L194 160L186 166'/%3E%3Cpath d='M40 153V167M100 153V167M140 153V167'/%3E%3Cpath d='M60 156V164M80 156V164M120 156V164' opacity='.6'/%3E%3Cpath transform='translate(26 172) scale(1.000)' stroke-width='3' d='M0 9H10'/%3E%3Cpath transform='translate(39 172) scale(1.000)' stroke-width='3' d='M0.5 2C3 -1 10 0 9 4C8.5 6.5 6 7.5 4 7.5C7 7.5 10 9 10 12C10 16 3 17 0 14'/%3E%3Cpath transform='translate(96 172) scale(1.000)' stroke-width='3' d='M5 0C1 0 0 5 0 8C0 12 1 16 5 16C9 16 10 12 10 8C10 4 9 0 5 0'/%3E%3Cpath transform='translate(130 172) scale(1.000)' stroke-width='3' d='M5 4V14M0 9H10'/%3E%3Cpath transform='translate(143 172) scale(1.000)' stroke-width='3' d='M0.5 3.5C1.5 0 9 -0.5 9 4C9 8 3 11 0 16H10'/%3E%3C/svg%3E");
}
[data-wm="4e"] {
    --wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(14 18) scale(1.750)' stroke-width='1.7' d='M1 3L5 0V16'/%3E%3Cpath transform='translate(31.5 18) scale(1.750)' stroke-width='1.7' d='M5 0C1 0 0 5 0 8C0 12 1 16 5 16C9 16 10 12 10 8C10 4 9 0 5 0'/%3E%3Cpath transform='translate(54.2 14.6) scale(1.015)' stroke-width='3' d='M0.5 2C3 -1 10 0 9 4C8.5 6.5 6 7.5 4 7.5C7 7.5 10 9 10 12C10 16 3 17 0 14'/%3E%3Cpath d='M102 88V16L180 88Z'/%3E%3Cpath d='M102 76H114V88'/%3E%3Cpath d='M109 14L187 86' opacity='.75'/%3E%3Cpath d='M14 152L56 124M14 152L56 182M56 124L94 110M56 124L94 138M56 182L94 168M56 182L94 196'/%3E%3Ccircle cx='14' cy='152' r='3' fill='black' stroke='none'/%3E%3Ccircle cx='56' cy='124' r='2.6' fill='black' stroke='none'/%3E%3Ccircle cx='56' cy='182' r='2.6' fill='black' stroke='none'/%3E%3Cpath transform='translate(104 132) scale(1.438)' stroke-width='2.1' d='M9 7.5C8 6 6.5 5.5 5 5.5C2 5.5 0 8 0 11C0 14 2 16 5 16C6.5 16 8 15.5 9 14'/%3E%3Cpath transform='translate(121.2 132) scale(1.438)' stroke-width='2.1' d='M5 5.5C2 5.5 0 8 0 11C0 14 2 16 5 16C8 16 10 14 10 11C10 8 8 5.5 5 5.5'/%3E%3Cpath transform='translate(139.9 132) scale(1.438)' stroke-width='2.1' d='M8.5 6.5C6 5 1 5 1 8C1 11 9 10 9 13C9 16.5 3 16.5 0.5 15'/%3E%3Cpath transform='translate(167.2 132) scale(1.438)' stroke-width='2.1' d='M10 6C9 9 7 16 4 16C1.5 16 0 14 0 11C0 8 2 5.5 4.5 5.5C7.5 5.5 8.5 12 10.5 16'/%3E%3C/svg%3E");
}
[data-wm="3e"] {
    --wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M104 44L113 40L124 66L140 14H194'/%3E%3Cpath transform='translate(146 22) scale(1.500)' stroke-width='2' d='M0.5 3.5C1.5 0 9 -0.5 9 4C9 8 3 11 0 16H10'/%3E%3Cpath transform='translate(165.5 22) scale(1.500)' stroke-width='2' d='M9 0H1.5L1 7C3 5.5 10 5 10 10.5C10 16 3 17 0 14'/%3E%3Cpath transform='translate(8 92) scale(1.375)' stroke-width='2.2' d='M5.5 -1C1.5 3 1.5 13 5.5 17'/%3E%3Cpath transform='translate(20.4 92) scale(1.375)' stroke-width='2.2' d='M9 10C9 7 7.5 5.5 5 5.5C2 5.5 0 8 0 11C0 14 2 16 4.5 16C7 16 9 13.5 9 10M9 5.5V16'/%3E%3Cpath transform='translate(38.2 92) scale(1.375)' stroke-width='2.2' d='M5 4V14M0 9H10'/%3E%3Cpath transform='translate(56.1 92) scale(1.375)' stroke-width='2.2' d='M1 0V16M1 11C1.5 7.5 3.5 5.5 6 5.5C8.5 5.5 10 8 10 11C10 14 8 16 5.5 16C3 16 1.5 14 1 12'/%3E%3Cpath transform='translate(74 92) scale(1.375)' stroke-width='2.2' d='M0.5 -1C4.5 3 4.5 13 0.5 17'/%3E%3Cpath transform='translate(86.4 89.4) scale(0.797)' stroke-width='3.8' d='M0.5 3.5C1.5 0 9 -0.5 9 4C9 8 3 11 0 16H10'/%3E%3Cpath d='M118 196V104M112 112L118 104L124 112M110 186H196M188 180L196 186L188 192'/%3E%3Cpath d='M112 170L194 116'/%3E%3Ccircle cx='118' cy='166' r='2.8' fill='black' stroke='none'/%3E%3Cpath d='M50 8L12 72M50 8L90 72M12 72C38 71 64 73 90 72M31 40C45 39 57 41 70 40'/%3E%3Ccircle cx='50' cy='8' r='2.6' fill='black' stroke='none'/%3E%3C/svg%3E");
}
[data-wm="2nde"] {
    --wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 70L84 28M70 26L84 28L78 41'/%3E%3Cpath transform='translate(36 76) scale(1.375)' stroke-width='2.2' d='M0.5 5.5V12C0.5 15 2 16 4.5 16C7 16 9 14 9 11M9 5.5V16'/%3E%3Cpath d='M38 70C44 68 52 68 58 70M54 66L59 70L54 74'/%3E%3Cpath d='M120 196V96M114 104L120 96L126 104M106 176H198M190 170L198 176L190 182'/%3E%3Cpath d='M130 104C142 168 168 176 192 104'/%3E%3Cpath transform='translate(16 124) scale(1.625)' stroke-width='1.8' d='M8 1C6 -0.5 3.5 0 3.5 4V16M0 6.5H7'/%3E%3Cpath transform='translate(33.9 124) scale(1.625)' stroke-width='1.8' d='M5.5 -1C1.5 3 1.5 13 5.5 17'/%3E%3Cpath transform='translate(48.5 124) scale(1.625)' stroke-width='1.8' d='M0 5.5L9 16M9 5.5L0 16'/%3E%3Cpath transform='translate(68 124) scale(1.625)' stroke-width='1.8' d='M0.5 -1C4.5 3 4.5 13 0.5 17'/%3E%3C/svg%3E");
}
[data-wm="1ere"] {
    --wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(14 14) scale(1.500)' stroke-width='2' d='M8 1C6 -0.5 3.5 0 3.5 4V16M0 6.5H7'/%3E%3Cpath transform='translate(30.5 14) scale(1.500)' stroke-width='2' d='M3 0L1 5'/%3E%3Cpath transform='translate(41 14) scale(1.500)' stroke-width='2' d='M5.5 -1C1.5 3 1.5 13 5.5 17'/%3E%3Cpath transform='translate(54.5 14) scale(1.500)' stroke-width='2' d='M0 5.5L9 16M9 5.5L0 16'/%3E%3Cpath transform='translate(72.5 14) scale(1.500)' stroke-width='2' d='M0.5 -1C4.5 3 4.5 13 0.5 17'/%3E%3Cpath d='M108 160C130 100 150 70 196 56'/%3E%3Cpath d='M102 120L194 88' opacity='.75'/%3E%3Ccircle cx='140' cy='106' r='2.8' fill='black' stroke='none'/%3E%3Cpath transform='translate(20 104) scale(1.875)' stroke-width='1.6' d='M6 0L0 16H12Z'/%3E%3Cpath transform='translate(52 150) scale(1.625)' stroke-width='1.8' d='M0.5 5.5V12C0.5 15 2 16 4.5 16C7 16 9 14 9 11M9 5.5V16'/%3E%3Cpath transform='translate(73.1 166.1) scale(0.942)' stroke-width='3.2' d='M1 5.5V16M1 9C2 6.5 3.5 5.5 5.5 5.5C8 5.5 9 7 9 9.5V16'/%3E%3C/svg%3E");
}
[data-wm="terminale"] {
    --wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(120 16) scale(1.625)' stroke-width='1.8' d='M2 0V16'/%3E%3Cpath transform='translate(131.4 16) scale(1.625)' stroke-width='1.8' d='M2 7V16M2 2.6V3'/%3E%3Cpath transform='translate(142.8 16) scale(1.625)' stroke-width='1.8' d='M1 5.5V16M1 9C1.5 6.5 3 5.5 4.5 5.5C6.5 5.5 7.5 7 7.5 9.5V16M7.5 9.5C8 6.5 9.5 5.5 11 5.5C13 5.5 14 7 14 9.5V16'/%3E%3Cpath transform='translate(16 22) scale(3.500)' stroke-width='0.9' d='M8 -1C5.5 -2.5 4 0 4 4V12C4 16 2.5 18.5 0 17'/%3E%3Cpath transform='translate(48 50) scale(1.875)' stroke-width='1.6' d='M0.5 11H9.5C9.5 7.5 7.5 5.5 5 5.5C2 5.5 0 8 0 11C0 14 2 16 5 16C7 16 8.5 15 9.5 13.5'/%3E%3Cpath transform='translate(72.4 46.4) scale(1.087)' stroke-width='2.8' d='M0 5.5L9 16M9 5.5L0 16'/%3E%3Cpath d='M104 196V110M98 118L104 110L110 118M92 186H198M190 180L198 186L190 192'/%3E%3Cpath d='M96 178C130 176 160 168 190 110'/%3E%3Cpath d='M30 124C30 160 40 178 70 178' opacity='0'/%3E%3C/svg%3E");
}

/* ================= Page « Toutes les classes » ================= */
.cls-hero {
    padding: 44px 0 28px;
    text-align: center;
}
.cls-hero .eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--coral);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.cls-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.12;
    font-weight: 800;
    color: var(--blue-ink);
    letter-spacing: -0.01em;
}
.cls-hero p {
    margin: 0 auto;
    max-width: 640px;
    color: var(--muted);
    font-size: 16.5px;
}
.cls-hero .hero-note {
    margin: 16px auto 0;
    max-width: 620px;
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--sky-soft);
    border: 1px solid var(--sky);
    border-left: 4px solid var(--blue);
    color: var(--blue-ink);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}
.cls-section {
    padding: 8px 0 64px;
}
.cls-section .wrap {
    max-width: 1180px;
}
.cls-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.cls-card {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 6px 22px -16px rgba(15, 34, 102, 0.45);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
.cls-top {
    --wm-op: 0.17;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 186px;
    padding: 18px 20px 20px;
    background: var(--lc);
    color: #fff;
}
.cls-top::after {
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: 54%;
}
.cls-count {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cls-top h2 {
    margin: auto 0 0;
    padding-top: 18px;
    font-size: 46px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.cls-top .cls-long {
    font-size: 30px;
}
.cls-age {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.88;
}
.cls-top .brevet-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 4px 10px 4px 8px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 209, 121, 0.6);
    color: #ffd479;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}
.cls-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 13px 18px;
}
.cls-ring {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2.5px solid var(--rc, #8a8fa3);
    color: var(--rc, #8a8fa3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.cls-prog {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.cls-prog b {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--blue-ink);
}
.cls-prog span {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}
.cls-go {
    flex: none;
    font-size: 20px;
    font-weight: 800;
    color: var(--lc);
    transition: transform 0.18s ease;
}
.cls-card:not(.soon):hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 36px -22px color-mix(in oklab, var(--lc) 80%, black);
}
.cls-card:not(.soon):hover .cls-go {
    transform: translateX(4px);
}
/* Classes « À venir » : grisées */
.cls-card.soon {
    box-shadow: none;
    border: 1px solid var(--line);
}
.cls-card.soon .cls-top {
    --wm-col: #0f2266;
    --wm-op: 0.07;
    background: #e8eaf2;
    color: #7b8095;
}
.cls-card.soon .cls-count {
    background: #fff;
    color: #7b8095;
}
.cls-card.soon .cls-bottom {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}
.cls-card.soon:hover .cls-top {
    background: #e2e5ef;
}
@media (max-width: 980px) {
    .cls-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .cls-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .cls-top {
        min-height: 150px;
    }
    .cls-top h2 {
        font-size: 40px;
    }
}

/* ================= Pages de classe ================= */
.lvl-band {
    --wm-op: 0.15;
    background: var(--lc);
    color: #fff;
}
.lvl-band::after {
    top: 14px;
    bottom: 14px;
    right: 4%;
    width: min(420px, 46%);
}
.lvl-band .hero {
    padding: 34px 24px 38px;
}
.hero h1 {
    margin: 0;
    font-size: clamp(30px, 4.4vw, 42px);
    line-height: 1.1;
    font-weight: 800;
}
.hero-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    margin-bottom: 8px;
}
.hero-sub {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
/* Sur téléphone, la phrase passe sous le titre : le tiret n'a plus lieu d'être */
@media (max-width: 560px) {
    .hero-dash {
        display: none;
    }
}
.hero p {
    max-width: 640px;
    margin: 0;
    font-size: 15px;
    opacity: 0.92;
}
.brevet-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 18px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 209, 121, 0.55);
}
.brevet-banner .ico {
    flex: none;
    font-size: 19px;
    line-height: 1;
}
.brevet-banner .txt {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}
.brevet-banner .txt b {
    color: #ffd479;
    font-weight: 800;
}
@media (max-width: 560px) {
    .lvl-band::after {
        width: 62%;
        right: -6%;
    }
    .brevet-banner {
        padding: 10px 14px;
    }
    .brevet-banner .txt {
        font-size: 12.5px;
    }
}
.chapters {
    padding: 32px 0 14px; /* le bouton « Me contacter » suit juste sous les cartes */
}
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 700px) {
    .chapter-grid {
        grid-template-columns: 1fr;
    }
}
/* Petite calculatrice (chapitres où elle est autorisée) */
.chapter-card .calc-badge {
    flex: none;
    width: 15px;
    height: 18px;
    color: #0d7a45;
}
/* Contact discret en bas à droite (même style que le bouton secondaire des fiches) */
.prof-band {
    padding: 0 0 56px;
}
.prof-row {
    display: flex;
    justify-content: flex-end;
}
.prof-contact {
    padding: 10px 18px;
    border-radius: 100px;
    border: 2px solid var(--line);
    background: #fff;
    color: var(--blue);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        border-color 0.15s ease,
        color 0.15s ease;
}
.prof-contact:hover {
    border-color: var(--blue);
}

footer {
    padding: 36px 24px;
    background: var(--blue-ink);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 13.5px;
}

/* ================= Cartes de chapitres (pages de classe) =================
   Les cartes sont écrites en HTML statique dans chaque page (icône, titre, notions, rond de score vide) :
   rendu stylé dès le premier affichage. chapter-cards.js n'ajuste plus que la hauteur commune,
   fiche-status.js remplit le rond de score. */
.chapter-grid{gap:14px; align-items:stretch;}
.chapter-card{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:13px 16px 11px 19px; border-radius:14px; font-weight:600; font-size:15px; line-height:1.3; color:var(--ink,#1c2340); background:#fff; border:1px solid var(--line,#e4e7f2); box-shadow:0 3px 14px -10px rgba(15,34,102,.35); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
.chapter-card .cc-top{display:flex; align-items:center; gap:12px;}
.chapter-card .cc-top>span:not([class]){flex:1; min-width:0; text-align:left;}
.chapter-card .cc-txt{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; text-align:left;}
.chapter-card .cc-txt>span:not([class]){min-width:0;}
.chapter-card .cc-ico{flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:color-mix(in oklab, var(--cc) 10%, white);}
.chapter-card .cc-ico svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.chapter-card .cc-ico svg text{fill:currentColor; stroke:none; font-family:Poppins,Helvetica,Arial,sans-serif; font-weight:800;}
.chapter-card .cc-bottom{margin-top:7px; min-height:24px; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;}
.chapter-card .cc-notions{display:block; margin:0; padding:0; font-size:11px; font-weight:600; line-height:1.15; color:color-mix(in oklab, var(--cc) 45%, #8a8fa3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chapter-card .cc-notions:empty{display:none;}
.chapter-card.available{background:#fff;}
.chapter-card.available .cc-ico{color:var(--cc);}
.chapter-card.available::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--cc); transition:width .16s ease;}
@media (hover:hover){
    .chapter-card.available:hover{transform:translateY(-3px); border-color:color-mix(in oklab, var(--cc) 35%, white); box-shadow:0 16px 28px -18px color-mix(in oklab, var(--cc) 75%, black);}
    .chapter-card.available:hover::before{width:9px;}
}
.chapter-card.available:active{transform:translateY(-1px);}
.chapter-card.soon{background:#f4f5f8; border-color:#e6e8ef; color:#6d7285; box-shadow:none; cursor:default; pointer-events:none;}
.chapter-card.soon .cc-ico{color:#aeb3c4; background:#fbfbfd; box-shadow:none;}
.chapter-card.soon .cc-ico svg{opacity:.75;}
.chapter-card .tag{align-self:center; font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:100px; flex:none; letter-spacing:.01em;}
.chapter-card.soon .tag{background:#e9ebf1; color:#5f6478;}
.chapter-card.available .tag{background:#eafaf1; color:#0d7a45;}
.chapter-card .score-ring{position:absolute; top:14px; right:14px;}
.chapter-card:has(.score-ring) .cc-top{padding-right:48px;}
.chapter-card .cc-calc{flex:none; align-self:center; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#eafaf1; color:#0d7a45;}
.chapter-card .cc-calc svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8;}
@media (max-width:700px){
    .chapter-grid{grid-template-columns:1fr !important;}
    .chapter-card{font-size:14.5px; padding:12px 14px 10px;}
    .chapter-card .cc-top>span:not([class]),.chapter-card .cc-txt>span:not([class]){flex:1; min-width:0; overflow-wrap:break-word; word-break:normal; hyphens:auto; text-wrap:pretty;}
}
.pp-domain{margin:0 0 26px;}
.pp-domain:last-child{margin-bottom:0;}
.pp-domain-title{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:17px; font-weight:800; letter-spacing:-.005em; color:var(--dc);}
.pp-domain-title .pd-ico{flex:none; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--dc); color:#fff; box-shadow:0 6px 14px -8px var(--dc);}
.pp-domain-title .pd-ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.pp-domain-title::after{content:""; flex:1; height:1.5px; border-radius:2px; background:color-mix(in oklab, var(--dc) 28%, white);}
@media (max-width:700px){
     .pp-domain-title{font-size:15.5px;}
}
.pp-domain .chapter-card.soon{background:color-mix(in oklab, var(--cc) 5%, #f4f5f8); border-color:color-mix(in oklab, var(--cc) 12%, #e6e8ef);}
.pp-domain .chapter-card.soon::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:color-mix(in oklab, var(--cc) 30%, #d9dce6);}
.pp-domain .chapter-card.soon .cc-ico{color:color-mix(in oklab, var(--cc) 40%, #aeb3c4);}
.pp-domain .chapter-card .tag.st-progress{background:color-mix(in oklab, var(--cc) 12%, white) !important; color:color-mix(in oklab, var(--cc) 82%, black) !important;}
/* Rond de score présent dès le HTML : état neutre (vide) à sa taille définitive, rempli par fiche-status.js */
.chapter-card .score-ring{width:38px; height:38px; box-sizing:border-box; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; letter-spacing:-.02em; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums;}
.chapter-card .score-ring.is-empty{border:2px dashed #dde1ec;}
.chapter-card.available .cc-top{padding-right:48px;}
/* Classes « À venir » rangées par niveau (Primaire : CP → CM2) */
.grade-block{margin:0 0 26px;}
.grade-block:last-child{margin-bottom:0;}
.grade-title{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:17px; font-weight:800; color:var(--blue-ink,#0f2266);}
.grade-title::after{content:""; flex:1; height:1.5px; border-radius:2px; background:var(--sky,#dde4f7);}
.cls-ring.is-empty {
    border-style: dashed;
    border-color: #dde1ec;
}

/* ---- Barre du haut (logo, titre du chapitre, flèche retour) : même CSS que fiche-header.js, chargé ici de façon
   bloquante ; le marqueur --pp-nav-css indique à fiche-header.js de ne rien injecter ---- */
:root {
    --pp-nav-css: 1;
}
.pp-nav-wrap{max-width:980px; margin:0 auto; padding:0 24px;}
.pp-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:26px 0;}
.pp-nav .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; flex:none; min-width:0;}
.pp-nav .logo-mark{width:48px; height:48px; border-radius:10px; background:white; padding:2px; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center;}
.pp-nav .logo-mark img{width:100%; height:100%; object-fit:contain; display:block; border-radius:8px;}
.pp-nav .back-link{font-size:14.5px; font-weight:600; text-decoration:none; white-space:nowrap; flex:none; line-height:1;}
.pp-nav .header-center{flex:1; display:flex; justify-content:center; min-width:0;}
.pp-nav .header-center .dl-btn{white-space:nowrap; flex:none;}
.pp-nav .header-center .chapter-title{font-weight:800; white-space:nowrap; overflow:hidden; text-align:center; max-width:100%;}
@media (max-width:600px){
    .pp-nav{padding:16px 0; gap:8px;}
    .pp-nav .logo-mark{width:36px; height:36px;}
    .pp-nav .logo span:not(.logo-mark){display:none;}
    .pp-nav .header-center .dl-btn-text{display:none;}
    .pp-nav .header-center .dl-btn{padding:10px 14px;}
}
.topbar{position:static; background:white; border-bottom:1px solid var(--line,#e4e7f2);}
.topbar .pp-nav .logo{color:var(--blue-ink,#0f2266);}
.topbar .pp-nav .logo:hover{color:var(--blue,#2549D8);}
.topbar .pp-nav .back-link{color:var(--muted,#5a6178);}
.topbar .pp-nav .back-link:hover{color:var(--blue,#2549D8);}
.topbar .pp-nav{position:relative;}
.topbar .pp-nav .header-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:calc(100% - 96px); pointer-events:none;}
.topbar .pp-nav .header-center .chapter-title{pointer-events:auto;}
.topbar .pp-nav{padding:10px 0;}
.topbar .pp-nav .logo{font-size:15px; gap:9px;}
.topbar .pp-nav .back-link{font-size:12px; display:inline-flex; align-items:center; gap:6px;}
.topbar .pp-nav .back-link .back-icon{display:inline-block; width:28px; height:28px; flex:none; background-color:var(--blue-ink,#0f2266); -webkit-mask-image:url('../assets/opt/fleche-retour-64.png'); mask-image:url('../assets/opt/fleche-retour-64.png'); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;}
.topbar .pp-nav .back-link:hover .back-icon{background-color:var(--coral,#ff6a4d);}
.topbar .pp-nav .logo-mark{width:34px; height:34px;}
.topbar .pp-nav .header-center .chapter-title{font-size:17px; color:var(--blue,#2549D8);}
@media (max-width:600px){
    .topbar .pp-nav{padding:7px 0;}
    .topbar .pp-nav .logo-mark{width:30px; height:30px;}
    .topbar .pp-nav .header-center .chapter-title{font-size:14.5px;}
}
.topbar-meta{max-width:980px; margin:0 auto; padding:0 24px 6px;}
.topbar-meta>div:first-child{margin-bottom:2px !important;}
@media (max-width:600px){
     .topbar-meta{padding:0 16px 6px;}
}
@media print{
     .topbar{display:none}
     .pp-header-spacer{display:none}
}
header .pp-nav .logo{color:white;}
header .pp-nav .back-link{color:rgba(255,255,255,.85);}
header .pp-nav .back-link:hover{color:white;}
/* Hauteur unique des cartes, fixée en CSS dès le premier affichage (plus d'ajustement en JavaScript) :
   la zone basse (statut, « À venir », Recommencer) est posée en bas à droite, hors du flux */
.chapter-card {
    min-height: 96px;
}
.chapter-card .cc-bottom {
    position: absolute;
    left: 59px;
    right: 14px;
    bottom: 8px;
    margin: 0;
}
.chapters:has(+ footer) {
    padding-bottom: 56px;
}
/* ---- Carte de chapitre : grille fixe, sans aucun élément posé en absolu ----
   icône | titre (2 lignes max) + notions (1 ligne) | [calculatrice] | rond de progression centré verticalement
   Pas de bouton Recommencer ni de badge « En cours » sur les cartes : le rond montre l'avancement. */
.chapter-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto 38px;
    column-gap: 12px;
    align-items: center;
    height: 84px;
    min-height: 0;
    padding: 12px 14px 12px 19px;
}
.chapter-card .cc-top {
    display: contents;
}
.chapter-card .cc-ico {
    grid-column: 1;
    grid-row: 1;
}
.chapter-card .cc-txt,
.chapter-card .cc-top > span:not([class]) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.chapter-card .cc-txt > span:not([class]),
.chapter-card .cc-top > span:not([class]) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chapter-card .cc-calc {
    grid-column: 3;
    grid-row: 1;
}
.chapter-card .score-ring {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 4;
    grid-row: 1;
}
.chapter-card .cc-bottom {
    display: none;
}
/* « À venir » : l'étiquette prend la place du rond */
.chapter-card.soon {
    grid-template-columns: 40px minmax(0, 1fr) auto;
}
.chapter-card.soon .cc-bottom {
    display: flex;
    position: static;
    grid-column: 3;
    grid-row: 1;
    min-height: 0;
}
/* Chapitre en cours : arc partiel dans la couleur du domaine (tracé par fiche-status.js) */
.chapter-card .score-ring.is-progress {
    border: 0;
    color: color-mix(in oklab, var(--cc) 85%, black);
}
.chapter-card .score-ring.is-progress svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.chapter-card .score-ring.is-progress span {
    position: relative;
}
@media (max-width: 700px) {
    .chapter-card {
        padding: 12px 12px 12px 17px;
        column-gap: 10px;
    }
}
/* Place du titre : colonne calculatrice seulement si la carte en a une ; « À venir » sous le titre ;
   sur téléphone, marges de page et icône plus compactes (titre sur 2 lignes au plus, jamais tronqué) */
.chapter-card {
    grid-template-columns: 40px minmax(0, 1fr) 38px;
}
.chapter-card:has(.cc-calc) {
    grid-template-columns: 40px minmax(0, 1fr) auto 38px;
}
.chapter-card .score-ring {
    grid-column: -2;
}
.chapter-card.soon {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 3px;
}
.chapter-card.soon .cc-ico {
    grid-row: 1 / span 2;
}
.chapter-card.soon .cc-bottom {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
}
.chapter-card.soon .tag {
    font-size: 10.5px;
    padding: 2px 8px;
}
@media (max-width: 560px) {
    .chapters .wrap,
    .prof-band .wrap {
        padding: 0 14px;
    }
}
@media (max-width: 400px) {
    .chapter-card {
        grid-template-columns: 34px minmax(0, 1fr) 38px;
        column-gap: 9px;
        padding: 10px 10px 10px 15px;
    }
    .chapter-card:has(.cc-calc) {
        grid-template-columns: 34px minmax(0, 1fr) auto 38px;
    }
    .chapter-card.soon {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .chapter-card .cc-ico {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
    .chapter-card .cc-ico svg {
        width: 21px;
        height: 21px;
    }
    .chapter-card .cc-txt > span:not([class]),
    .chapter-card .cc-top > span:not([class]) {
        font-size: 13.5px;
        line-height: 1.25;
    }
}
/* Tablette : une seule colonne de cartes jusqu'à 860 px (titres longs sur 2 lignes au plus) */
@media (max-width: 860px) {
    .chapter-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 370px) {
    .chapter-card .cc-txt > span:not([class]),
    .chapter-card .cc-top > span:not([class]) {
        font-size: 13px;
        letter-spacing: -0.005em;
    }
}
@media (max-width: 400px) {
    .chapter-card,
    .chapter-card:has(.cc-calc) {
        column-gap: 7px;
        padding: 10px 8px 10px 13px;
    }
    .chapter-card {
        grid-template-columns: 30px minmax(0, 1fr) 34px;
    }
    .chapter-card:has(.cc-calc) {
        grid-template-columns: 30px minmax(0, 1fr) auto 34px;
    }
    .chapter-card.soon {
        grid-template-columns: 30px minmax(0, 1fr);
    }
    .chapter-card .cc-ico {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }
    .chapter-card .cc-ico svg {
        width: 19px;
        height: 19px;
    }
    .chapter-card .score-ring {
        width: 34px;
        height: 34px;
        font-size: 10.5px;
    }
}
/* Chapitre commencé ou terminé : petite icône ↻ « recommencer » sous le rond (colonne de droite, sans chevauchement) */
.chapter-card.has-restart {
    grid-template-rows: 1fr auto;
    row-gap: 2px;
}
.chapter-card.has-restart .cc-ico,
.chapter-card.has-restart .cc-txt,
.chapter-card.has-restart .cc-top > span:not([class]),
.chapter-card.has-restart .cc-calc {
    grid-row: 1 / span 2;
}
.chapter-card.has-restart .score-ring {
    grid-row: 1;
    align-self: end;
}
.chapter-card .cc-restart {
    grid-column: -2;
    grid-row: 2;
    justify-self: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #9aa0b5;
    cursor: pointer;
}
/* zone de clic agrandie (doigt) sans agrandir l'icône */
.chapter-card .cc-restart::after {
    content: "";
    position: absolute;
    inset: -12px -10px -12px -10px;
}
.chapter-card .cc-restart svg {
    width: 14px;
    height: 14px;
}
.chapter-card .cc-restart:hover,
.chapter-card .cc-restart:focus-visible {
    color: #e0403f;
    background: #fdecec;
    outline: none;
}