/*
 * Hub CRPE : jetons --crpe-*, socle, en-tête, pied de page, pages de lecture (lot B1).
 * Source : maquettes Claude Design du 2026-11-01 (docs/crpe/design/project/crpe.css), reprises à l'identique pour les
 * jetons ; les variantes mobiles « .crpe-m » des maquettes deviennent des media queries (≤ 767,98 px).
 * Les jetons sont définis ICI, une seule fois : aucun autre fichier du hub ne redéclare une couleur.
 *
 * Contrastes WCAG 2.2 AA recalculés le 2026-11-01 (ratio de luminance relative) :
 *   blanc sur --crpe-ink 16,7:1 · blanc sur --crpe-ink-3 10,3:1 · --crpe-ink sur --crpe-accent 8,8:1 (bouton)
 *   --crpe-accent-text sur blanc 6,5:1, sur --crpe-accent-soft 5,7:1 · --crpe-accent-strong sur blanc 8,9:1
 *   --crpe-muted sur blanc 7,0:1, sur --crpe-paper 6,6:1 · --crpe-on-ink sur --crpe-ink 11,3:1, sur --crpe-ink-2 9,5:1,
 *   sur --crpe-ink-3 7,0:1 · --crpe-ok sur ok-soft 5,2:1 · --crpe-ko sur ko-soft 5,8:1 · --crpe-warn sur warn-soft 6,6:1
 *   --crpe-method sur method-soft 7,0:1 · --crpe-accent sur --crpe-ink-2 (liens du bloc compte à rebours) 7,4:1.
 * --crpe-accent (#7cc4fa) n'est JAMAIS une couleur de texte sur fond blanc : fond seulement, avec texte --crpe-ink.
 */
:root {
    --crpe-ink: #0f1e36;          /* bleu encre : en-tête, hero, texte fort */
    --crpe-ink-2: #182c4b;
    --crpe-ink-3: #2a4166;
    --crpe-accent: #7cc4fa;       /* bleu ciel : fond (boutons, barres) toujours avec texte --crpe-ink (8,8:1) */
    --crpe-accent-soft: #e8f2fd;
    --crpe-accent-text: #1d5fa8;  /* liens et texte d'accent sur blanc (6,5:1) et sur --crpe-accent-soft (5,7:1) */
    --crpe-accent-strong: #164a85;
    --crpe-paper: #f6f8fb;        /* fond des bandes */
    --crpe-line: #dbe3ee;
    --crpe-text: #0f1e36;
    --crpe-muted: #4a5a70;        /* texte secondaire (7:1 sur blanc) */
    --crpe-on-ink: #c9d6e8;       /* texte secondaire sur encre (11,3:1) */
    --crpe-ok: #157347;   --crpe-ok-soft: #e7f5ee;
    --crpe-ko: #b42318;   --crpe-ko-soft: #fdecea;
    --crpe-warn: #9a3412; --crpe-warn-soft: #fff1e6;
    --crpe-method: #3b4a9e; --crpe-method-soft: #eef0fb;
    --crpe-radius: 12px;
    --crpe-radius-lg: 16px;
    --crpe-shadow: 0 12px 28px rgba(15, 30, 54, .10);
    --crpe-font: "Plus Jakarta Sans", system-ui, sans-serif;
    /* Quiz habillés (moteur existant) : mêmes variables que le hub CACES */
    --quizz-accent: #1d5fa8;
    --quizz-accent-dark: #164a85;
    --quizz-bg-hero: #0f1e36;
}

.crpe { font-family: var(--crpe-font); color: var(--crpe-text); background: #fff; font-size: 16px; line-height: 1.55; }
.crpe *, .crpe *::before, .crpe *::after { box-sizing: border-box; }
.crpe a { color: var(--crpe-accent-text); }
.crpe a:hover { color: var(--crpe-accent-strong); }
.crpe :focus-visible { outline: 3px solid var(--crpe-accent-text); outline-offset: 2px; }
.crpe h1, .crpe h2, .crpe h3, .crpe h4 { margin: 0; line-height: 1.2; }
.crpe p { margin: 0; }
.crpe-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.crpe-ico { width: 1.1em; height: 1.1em; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }

/* ---------- Hero, fil d'Ariane, titres de section ---------- */
.crpe-hero { background: var(--crpe-ink); color: #fff; padding: 48px 0 52px; }
.crpe-hero h1 { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.crpe-hero .crpe-lead { color: var(--crpe-on-ink); font-size: 19px; max-width: 46rem; margin-top: 14px; }
.crpe-crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--crpe-on-ink); margin-bottom: 14px; list-style: none; padding: 0; }
.crpe-crumb a { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.crpe-crumb li + li::before { content: "›"; margin-right: 6px; color: var(--crpe-on-ink); }
.crpe-section { padding: 48px 0; }
.crpe-band { background: var(--crpe-paper); }
.crpe-section-title { font-size: 26px; font-weight: 800; color: var(--crpe-ink); }
.crpe-section-title::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--crpe-accent); margin-top: 8px; }
.crpe-muted { color: var(--crpe-muted); }
.crpe-small { font-size: 14px; }

/* ---------- Boutons ---------- */
.crpe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 10px; border: 0;
    background: var(--crpe-accent); color: var(--crpe-ink) !important; font: 700 16px var(--crpe-font); text-decoration: none; cursor: pointer; }
.crpe-btn:hover { background: #a5d8fc; }
.crpe-btn-dark { background: var(--crpe-ink); color: #fff !important; }
.crpe-btn-dark:hover { background: var(--crpe-ink-3); }
.crpe-btn-outline { background: transparent; color: #fff !important; border: 1px solid #8ea3c0; font-weight: 600; }
.crpe-btn-ghost { background: #fff; color: var(--crpe-ink) !important; border: 1px solid var(--crpe-line); font-weight: 600; }
.crpe-btn-sm { min-height: 44px; padding: 0 14px; font-size: 14.5px; }
.crpe-btn-block { width: 100%; }
.crpe-btn[disabled] { background: #e3e8ef; color: #5b6b80 !important; cursor: not-allowed; }

/* ---------- Cartes ---------- */
.crpe-card { background: #fff; border: 1px solid var(--crpe-line); border-radius: var(--crpe-radius-lg); padding: 20px; }
.crpe-card-hover:hover { border-color: var(--crpe-accent-text); box-shadow: var(--crpe-shadow); }
.crpe-card h3 { font-size: 18px; font-weight: 800; color: var(--crpe-ink); }
.crpe-tile-ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; background: var(--crpe-ink); color: var(--crpe-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.crpe-tile-ico-sm { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; font-size: 17px; }
.crpe-grid { display: grid; gap: 16px; }
.crpe-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crpe-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crpe-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crpe-row { display: flex; align-items: center; gap: 12px; }
.crpe-stack { display: flex; flex-direction: column; gap: 12px; }
.crpe-linklist { list-style: none; padding: 0; margin: 12px 0 0; font-size: 15px; }
.crpe-linklist li { padding: 8px 0; border-top: 1px dashed var(--crpe-line); display: flex; align-items: center; gap: 8px; }
.crpe-linklist a { font-weight: 600; }
.crpe-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--crpe-muted); }
.crpe-meta span { display: inline-flex; align-items: center; gap: 6px; }
.crpe-chip { display: inline-block; background: #eef2f7; color: #2a3a52; border-radius: 6px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; }

/* ---------- État d'une notion (jamais la couleur seule : icône + texte) ---------- */
.crpe-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.crpe-state-acquis { color: var(--crpe-ok); }
.crpe-state-consolider { color: var(--crpe-warn); }
.crpe-state-travailler { color: var(--crpe-ko); }
.crpe-state-nouveau { color: var(--crpe-muted); font-weight: 600; }
.crpe-bar-track { height: 8px; background: #e3e8ef; border-radius: 4px; overflow: hidden; }
.crpe-bar-fill { height: 100%; background: var(--crpe-accent-text); border-radius: 4px; }

/* ---------- Publicité : hauteur réservée, jamais en haut, jamais près des réponses ---------- */
.crpe-ad { display: flex; align-items: center; justify-content: center; height: 280px; border: 1px dashed #b8c4d4; border-radius: 8px; background: #fafbfd; color: #5b6b80; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.crpe-ad-h { height: 100px; }
.crpe-ad-m { height: 280px; }

/* ---------- Pied de page ---------- */
.crpe-footer { background: var(--crpe-ink); color: var(--crpe-on-ink); padding: 32px 0; font-size: 14px; }
.crpe-footer a { color: #fff !important; }

/* ---------- Impression ---------- */
@media print {
    .crpe-header, .crpe-footer, .crpe-ad, .crpe-train, .crpe-toc, .crpe-noprint { display: none !important; }
    .crpe-hero { background: none; color: #000; padding: 0; }
    .crpe-hero h1, .crpe-hero .crpe-lead { color: #000; }
    .crpe-box-retenir { background: #fff; color: #000; border: 2px solid #000; }
}

/* ---------- En-tête (sticky, menu au clavier, burger sous 1100 px) ---------- */
.crpe-header { position: sticky; top: 0; z-index: 1030; background: var(--crpe-ink); color: #fff; border-bottom: 3px solid var(--crpe-accent); }
.crpe-header a { text-decoration: none; }
.crpe-bar { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.crpe-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff !important; line-height: 1.05; flex: 0 0 auto; }
.crpe-brand-mark { width: 34px; height: 34px; border-radius: 7px; flex: 0 0 34px; background: var(--crpe-ink-2); box-shadow: inset 0 0 0 2px var(--crpe-accent);
    display: inline-flex; align-items: center; justify-content: center; color: var(--crpe-accent); font-size: 16px; }
.crpe-brand-name { font-weight: 800; font-size: 20px; letter-spacing: .04em; }
.crpe-brand-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--crpe-on-ink); letter-spacing: .02em; }
.crpe-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.crpe-nav > a, .crpe-nav > details > summary { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 8px; font-weight: 600; font-size: 15px;
    color: #e2e8f0 !important; white-space: nowrap; cursor: pointer; list-style: none; }
.crpe-nav > details > summary::-webkit-details-marker { display: none; }
.crpe-nav > a:hover, .crpe-nav > a[aria-current="page"], .crpe-nav > details > summary:hover, .crpe-nav > details[open] > summary { background: var(--crpe-ink-3); color: #fff !important; }
.crpe-nav :focus-visible, .crpe-burger:focus-visible { outline: 3px solid var(--crpe-accent); outline-offset: 2px; }
.crpe-nav summary .fa-chevron-down { font-size: 11px; transition: transform .2s; }
.crpe-nav details[open] summary .fa-chevron-down { transform: rotate(180deg); }
.crpe-nav details { position: relative; }
.crpe-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; background: #fff; border-radius: var(--crpe-radius); box-shadow: 0 18px 40px rgba(15, 30, 54, .25); padding: 8px; z-index: 1040; }
.crpe-dropdown a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: var(--crpe-ink) !important; font-weight: 600; font-size: 14.5px; }
.crpe-dropdown a:hover, .crpe-dropdown a:focus-visible { background: var(--crpe-accent-soft); }
.crpe-dropdown small { display: block; color: var(--crpe-muted); font-weight: 500; font-size: 12.5px; line-height: 1.3; }
.crpe-dropdown .crpe-tile-ico { width: 34px; height: 34px; flex-basis: 34px; font-size: 15px; border-radius: 8px; }
.crpe-back { margin-left: 8px; font-size: 13px !important; color: var(--crpe-on-ink) !important; border: 1px solid var(--crpe-ink-3); }
.crpe-install { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px; background: transparent; border: 1px solid var(--crpe-accent); color: var(--crpe-accent); font: 600 13px var(--crpe-font); cursor: pointer; }
.crpe-install[hidden] { display: none; }
.crpe-burger { display: none; margin-left: auto; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; background: transparent; border: 1px solid var(--crpe-ink-3); color: #fff; border-radius: 8px; font: 600 15px var(--crpe-font); cursor: pointer; }

@media (max-width: 1099.98px) {
    .crpe-burger { display: inline-flex; }
    .crpe-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--crpe-ink);
        border-bottom: 3px solid var(--crpe-accent); padding: 8px 16px 16px; max-height: calc(100vh - 67px); overflow-y: auto; }
    .crpe-header.is-open .crpe-nav { display: flex; }
    .crpe-nav > a, .crpe-nav > details > summary { display: flex; width: 100%; min-height: 48px; padding: 12px 8px; border-bottom: 1px solid var(--crpe-ink-2); border-radius: 0; justify-content: space-between; }
    .crpe-dropdown { position: static; min-width: 0; box-shadow: none; margin: 4px 0 8px; }
    .crpe-nav > a.crpe-back { margin: 12px 0 0; justify-content: center; border-radius: 8px; border-bottom: 1px solid var(--crpe-ink-3); gap: 8px; }
    .crpe-install { margin-top: 12px; justify-content: center; min-height: 44px; }
}

/* ---------- Gabarit mobile des composants de base (variantes « .crpe-m » des maquettes) ---------- */
@media (max-width: 767.98px) {
    .crpe-container { padding: 0 16px; }
    .crpe-hero { padding: 28px 0 32px; }
    .crpe-hero h1 { font-size: 28px; }
    .crpe-hero .crpe-lead { font-size: 16px; }
    .crpe-section { padding: 32px 0; }
    .crpe-section-title { font-size: 22px; }
    .crpe-g2, .crpe-g3, .crpe-g4 { grid-template-columns: minmax(0, 1fr); }
    .crpe-ad-m { height: 280px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .crpe-g3, .crpe-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mouvement réduit : pas de transition sur les chevrons ni les survols */
@media (prefers-reduced-motion: reduce) { .crpe *, .crpe-header * { transition: none !important; } }

/* ---------- Pied de page : liens et mentions légales du site ---------- */
.crpe-footer a { text-decoration: underline; text-underline-offset: 3px; }
.crpe-footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; }
.crpe-footer p { color: inherit; }
.crpe-footer-legal { border-top: 1px solid var(--crpe-ink-3); margin-top: 20px; padding-top: 16px; font-size: 13px; color: var(--crpe-on-ink); }

/* ---------- Plan d'une discipline : notions publiées et « en préparation » ---------- */
.crpe-plan-etat { font-size: 15px; color: var(--crpe-muted); margin: 6px 0 4px; }
.crpe-plan-prepa { color: var(--crpe-muted); justify-content: space-between; flex-wrap: wrap; }
.crpe-plan-tag { font-size: 13px; font-weight: 600; white-space: nowrap; }