/* @grammaire v2
   ══════════════════════════════════════════════════════════════
   DÉFI RCP — /defi-rcp, page autonome (gabarit CMS `cpr-challenge`).

   Traduction fidèle de la maquette « Défi compressions, journée arrêt
   cardiaque 2026 » (canevas Claude Design, artboard « Page publique du
   défi »). Page AUTONOME, façon minisite : son propre en-tête et son
   propre pied, ses polices (Archivo condensée pour les titres et les
   chiffres, Hanken Grotesk pour le texte) et sa palette « urgence
   vitale » : papier, encre et UN bleu, le navy de l'identité ANCESU,
   réservé à l'action. Pas de rouge d'aplat : pour un
   soignant, il dit l'alarme ; seul le cœur de la règle des 5 à 6 cm l'est.
   Une seule séquence sombre, les quatre gestes et leur fenêtre : le
   moment où l'on agit. Elle ne reprend pas la grammaire du site.

   AUCUN STYLE EN LIGNE dans le gabarit : la maquette les portait en
   attributs, la CSP de production les refuse. Les valeurs dynamiques
   (largeurs de barres, positions de la règle, rotation de l'aiguille) sont
   posées par le script en propriétés personnalisées, par le CSSOM.

   Les couleurs sont DÉCLARÉES ici, sur `.cpr`, puis lues par `var()` : la
   grammaire v2 refuse un littéral dans une propriété, pas dans une
   déclaration de jeton.
   ══════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../../fonts/cpr/archivo-latin-wdth-normal-Wa7z_Iw.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../../fonts/cpr/archivo-latin-ext-wdth-normal-iEdfVTB.woff2") format("woff2-variations");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/cpr/hanken-grotesk-latin-wght-normal-vOuBqtB.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/cpr/hanken-grotesk-latin-ext-wght-normal-ga7Qi-c.woff2") format("woff2-variations");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ══ JETONS ══════════════════════════════════════════════════════ */

.cpr {
    /* Le papier, l'encre, le bleu ANCESU. */
    --cpr-paper: #f2f0ed;
    --cpr-white: #ffffff;
    --cpr-ink: #111111;
    --cpr-ink-2: #1d1d1d;
    --cpr-ink-3: #2b2b2b;
    --cpr-gray: #5c5c5c;
    --cpr-gray-light: #a8a6a2;
    --cpr-on-dark: #ece9e4;
    --cpr-line: #d6d2cc;
    --cpr-line-2: #e8e4de;
    --cpr-line-dark: rgba(255, 255, 255, 0.16);
    /* Le navy ANCESU (`--navy-500` / `--navy-700` de `@ancesu/tokens`) :
       8,2:1 sous un texte blanc, 7,2:1 sur le papier. Sur fond sombre, sa
       version claire (7,8:1 sur l'encre). */
    --cpr-action: #2a4d92;
    --cpr-action-dark: #1b2e5a;
    --cpr-action-light: #8aa6e6;
    /* Le cœur, et lui seul. */
    --cpr-heart: #d90016;
    /* États de l'exercice : vert pour « bon », ambre pour « à corriger ». */
    --cpr-ok: #16803c;
    --cpr-ok-soft: rgba(22, 128, 60, 0.12);
    --cpr-off: #e08a00;
    --cpr-warn-bg: #ffe1a8;
    --cpr-warn-ink: #4a3000;
    --cpr-ko-bg: #ffd9c2;
    --cpr-ko-ink: #5a2200;
    --cpr-ko-dot: #f0a07a;
    --cpr-veil: rgba(17, 17, 17, 0.92);
    --cpr-shadow-lift: 0 18px 36px rgba(17, 17, 17, 0.14);
    --cpr-display: "Archivo", "Arial Narrow", sans-serif;
    --cpr-sans: "Hanken Grotesk", system-ui, sans-serif;
    --cpr-ease: cubic-bezier(.16, 1, .3, 1);
    --cpr-ease-soft: cubic-bezier(.2, .8, .2, 1);
    /* Hauteur d'un en-tête collant au-dessus du contenu : aucun. */
    --cpr-top-h: 0px;

    min-height: 100vh;
    background: var(--cpr-paper);
    color: var(--cpr-ink);
    font-family: var(--cpr-sans);
}

/* Les titres et les grands chiffres : capitales condensées, très grasses,
   comme une signalétique de secours. */
.cpr-display {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    text-transform: uppercase;
}

body:has(.cpr) {
    margin: 0;
    background: var(--cpr-paper);
}

/* Spécificité nulle : sinon cette règle battrait la couleur de chaque
   bouton-lien (encre sur citron) et tous sortiraient en blanc. */
:where(.cpr) a {
    color: inherit;
}

.cpr :is(button, a, input):focus-visible {
    outline: 3px solid var(--cpr-action);
    outline-offset: 3px;
    box-shadow: none;
}

.cpr button {
    font-family: var(--cpr-sans);
}

.cpr button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Plusieurs blocs se montrent et se cachent par l'attribut `hidden` alors
   qu'ils déclarent un `display` : sans cette règle, leur `display: flex`
   l'emporterait sur celui de la feuille du navigateur. */
.cpr [hidden] {
    display: none !important;
}

.cpr-wrap {
    max-width: 1320px;
    margin: 0 auto;
}

.cpr-tabular {
    font-variant-numeric: tabular-nums;
}

/* ══ BOUTONS ═════════════════════════════════════════════════════ */

.cpr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border: 2px solid transparent;
    border-radius: 2px;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Le bleu : l'action principale, et elle seule. */
.cpr-btn--accent { background: var(--cpr-action); color: var(--cpr-white); }
.cpr-btn--accent:hover { background: var(--cpr-action-dark); }
.cpr-btn--dark { background: var(--cpr-ink); color: var(--cpr-white); }
.cpr-btn--dark:hover { background: var(--cpr-ink-3); }
/* Les actions secondaires : un trait de la couleur du texte, donc encre sur
   le papier et blanc dans la séquence sombre. */
.cpr-btn--outline,
.cpr-btn--ghost,
.cpr-btn--glass,
.cpr-btn--line { border-color: currentColor; background: transparent; color: inherit; }
.cpr-btn--outline:hover,
.cpr-btn--ghost:hover,
.cpr-btn--glass:hover,
.cpr-btn--line:hover { background: var(--cpr-ink); border-color: var(--cpr-ink); color: var(--cpr-white); }
.cpr-section--night .cpr-btn--ghost:hover,
.cpr-modal .cpr-btn--ghost:hover { background: var(--cpr-white); border-color: var(--cpr-white); color: var(--cpr-ink); }
.cpr-btn--sm { min-height: 48px; padding: 0 20px; font-size: 15px; }
.cpr-btn--md { min-height: 50px; padding: 0 22px; font-size: 15px; }

/* ══ TÊTE DE PAGE, PUCES, PROGRESSION ════════════════════════════
   Pas de barre de menu : la tête de page est posée sur le haut de page et
   part avec lui ; la navigation est une colonne de puces sur le bord droit. */

/* Les tailles fluides (`cqi`) suivent la largeur du contenu. */
.cpr main {
    container-type: inline-size;
}

/* Le logo, huit rem au moins à toutes les largeurs (demande de l'ANCESU),
   posé tel quel sur le papier. */
.cpr-logo {
    display: inline-flex;
    align-self: flex-start;
}

.cpr-logo img {
    display: block;
    width: auto;
    height: clamp(4rem, 11svh, 8rem);
}

/* Le logo du site et, à sa droite, les partenaires qui soutiennent le
   défi, séparés par un filet. Sous la largeur où ils ne tiennent plus
   côte à côte, les soutiens passent dessous, sans filet. */
.cpr-brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-start;
    gap: 12px 24px;
}

.cpr-support {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 24px;
    border-left: 1px solid var(--cpr-line);
}

.cpr-support__label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cpr-gray);
}

.cpr-support__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpr-support__item {
    display: block;
}

.cpr-support__logo {
    display: block;
    width: auto;
    max-width: 12rem;
    height: clamp(3rem, 8svh, 5.5rem);
}

@media (width < 30em) {
    .cpr-support {
        padding-left: 0;
        border-left: 0;
    }
}

.cpr-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: var(--cpr-white);
}

.cpr-back:hover { text-decoration: underline; text-underline-offset: 4px; }

/* La progression de lecture, en haut de l'écran. */
.cpr-progress-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 4px;
    background: var(--cpr-action);
    transform: scaleX(var(--p, 0));
    transform-origin: left center;
    pointer-events: none;
}

/* — Les puces — une par section, la courante s'allonge, la ligne se remplit
   jusqu'à elle. Les couleurs suivent la section traversée (`data-tone`). */
/* Sur le papier : encre et bleu ; sur une section sombre ou bleue, blanc. */
.cpr-dots {
    --dot: var(--cpr-ink);
    --dot-on: var(--cpr-action);
    --dot-label-bg: var(--cpr-ink);
    --dot-label-ink: var(--cpr-white);
    position: fixed;
    top: 50%;
    right: 22px;
    z-index: 40;
    transform: translateY(-50%);
}

.cpr-dots[data-tone="night"] {
    --dot: var(--cpr-white);
    --dot-on: var(--cpr-white);
    --dot-label-bg: var(--cpr-white);
    --dot-label-ink: var(--cpr-ink);
}

.cpr-dots__track {
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 11px;
    width: 2px;
    background: var(--dot);
    opacity: .2;
}

.cpr-dots__fill {
    position: absolute;
    inset: 0;
    background: var(--dot-on);
    transform: scaleY(var(--p, 0));
    transform-origin: center top;
    transition: background-color .4s ease;
}

.cpr-dots__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpr-dots__dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 28px;
    text-decoration: none;
}

.cpr-dots__dot::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--dot);
    transition: height .45s var(--cpr-ease), background-color .3s ease, transform .3s ease;
}

.cpr-dots__dot:hover::after { transform: scale(1.3); }

.cpr-dots__dot[aria-current="true"]::after {
    height: 28px;
    background: var(--dot-on);
}

.cpr-dots__label {
    position: absolute;
    right: calc(100% + 10px);
    padding: 5px 10px;
    background: var(--dot-label-bg);
    color: var(--dot-label-ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.cpr-dots__dot:hover .cpr-dots__label,
.cpr-dots__dot:focus-visible .cpr-dots__label,
.cpr-dots__dot[data-flash="true"] .cpr-dots__label {
    opacity: 1;
    transform: none;
}

@media (width < 48em) {
    /* Au téléphone, le texte court jusqu'au bord : les puces s'y poseraient.
       La ligne de progression du haut reste, elle, visible. */
    .cpr-dots { display: none; }
}

/* ══ OUTILS ══════════════════════════════════════════════════════ */

.cpr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Revenir en haut : paraît une fois le haut de page dépassé. */
.cpr-totop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--cpr-ink);
    color: var(--cpr-white);
    animation: cpr-fadein .4s var(--cpr-ease-soft) both;
}

/* ══ SECTIONS ════════════════════════════════════════════════════ */

.cpr-section {
    padding: 120px 28px;
}

.cpr-section--night { background: var(--cpr-ink); color: var(--cpr-white); }
.cpr-section--light { background: var(--cpr-paper); color: var(--cpr-ink); }
/* Un filet d'encre entre deux sections claires, comme entre deux
   rubriques d'un journal. */
.cpr-section--light + .cpr-section--light { border-top: 2px solid var(--cpr-ink); }
.cpr-section--clip { overflow: hidden; }

.cpr-stack {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.cpr-stack--lg { gap: 48px; }
.cpr-stack--tight { gap: 24px; }
.cpr-stack--sm { gap: 12px; }
.cpr-stack--xs { gap: 8px; }
.cpr-stack--center { align-items: center; gap: 22px; width: 100%; }

.cpr-self-start { align-self: flex-start; }

.cpr-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 56px;
    align-items: center;
}

.cpr-h1,
.cpr-h2 {
    margin: 0;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    text-transform: uppercase;
}

.cpr-h1 {
    font-size: clamp(44px, min(7cqi, 8.5svh), 128px);
    line-height: 0.88;
    letter-spacing: -0.01em;
}

.cpr-h2 {
    font-size: clamp(42px, 5.6cqi, 84px);
    line-height: 0.92;
}

.cpr-h2--narrow { max-width: 14em; }
.cpr-h2--wide { max-width: 15em; }
.cpr-h2--final { font-size: clamp(56px, 9cqi, 150px); line-height: 0.86; }

/* L'insistance d'un titre sur sa propre ligne (« Quatre gestes, / à la
   portée de chacun. »). */
.cpr-h2--break em { display: block; }

/* L'insistance d'un titre (`*…*` dans le champ) : en bleu, jamais en
   italique. */
.cpr-h1 em,
.cpr-h2 em,
.cpr-modal__title em { font-style: normal; color: var(--cpr-action); }
.cpr-section--night .cpr-h2 em,
.cpr-modal__title em { color: var(--cpr-action-light); }

.cpr-lead {
    margin: 0;
    max-width: 30em;
    text-wrap: pretty;
    font-size: 18px;
    line-height: 1.6;
}

.cpr-section--night .cpr-lead { color: var(--cpr-on-dark); }
.cpr-section--light .cpr-lead { color: var(--cpr-gray); }
.cpr-lead strong { color: inherit; }

.cpr-text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--cpr-gray);
}

.cpr-small {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

.cpr-section--night .cpr-small { color: var(--cpr-on-dark); }
.cpr-section--light .cpr-small { color: var(--cpr-gray); }

.cpr-source {
    margin: 0;
    align-self: end;
    font-size: 13px;
    color: var(--cpr-gray);
}

/* ══ HERO ════════════════════════════════════════════════════════ */

.cpr-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: var(--cpr-paper);
    color: var(--cpr-ink);
}

/* `width: 100%` : l'enveloppe est centrée par des marges `auto` dans une
   colonne flex, qui la rétréciraient sinon à son contenu. */
.cpr-hero__grid {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px 48px;
    align-items: center;
    padding: clamp(24px, 4svh, 48px) 28px clamp(32px, 5svh, 64px);
}

/* Au bureau, le premier écran porte tout : le texte, puis une rangée qui
   aligne le compteur (à gauche) et les trois boutons (à droite), sur le
   même filet de base. La carte passe en FOND, sur toute la hauteur du haut
   de page, à droite : texte et boutons s'écrivent par-dessus. Au
   téléphone, l'ordre du balisage : texte, compteur, boutons, carte. */
@media (width >= 70em) {
    .cpr-hero__grid {
        grid-template-columns: minmax(0, 1fr) min(22rem, 40%);
        grid-template-areas: "text ." "counter actions";
        gap: clamp(20px, 3.5svh, 40px) 48px;
    }

    .cpr-hero__text { grid-area: text; }
    .cpr-hero .cpr-map {
        position: absolute;
        inset-block: 0;
        right: 0;
        z-index: -1;
        width: 62%;
        pointer-events: none;
    }

    .cpr-hero .cpr-map__canvas {
        width: 100%;
        height: 100%;
        max-height: none;
        aspect-ratio: auto;
    }
    .cpr-hero__counter { grid-area: counter; align-self: end; }
    /* Les trois boutons en colonne, de même largeur, alignés à droite. */
    .cpr-hero__actions {
        grid-area: actions;
        flex-direction: column;
        align-self: end;
        justify-self: end;
        width: min(100%, 22rem);
    }

    /* Posé sur la carte : le bouton à contour prend le fond du papier,
       sinon les points de la carte se lisent à travers. */
    .cpr-hero__actions .cpr-btn--line:not(:hover) { background: var(--cpr-paper); }

    /* L'insistance du titre sur sa propre ligne : « Le plus grand / massage
       cardiaque / de France », quelle que soit la largeur. */
    .cpr-h1 em { display: block; }
}

.cpr-hero__text {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.6svh, 26px);
}

.cpr-hero__kicker {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cpr-ink);
}

.cpr-map { position: relative; }

.cpr-counter { position: relative; }

.cpr-counter__plus {
    position: absolute;
    left: 0;
    top: 38px;
    padding: 4px 10px;
    background: var(--cpr-action);
    color: var(--cpr-white);
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    animation: cpr-plus 1.6s var(--cpr-ease) forwards;
}

.cpr-hero__lead {
    margin: 0;
    max-width: 30em;
    text-wrap: pretty;
    font-size: 18px;
    line-height: 1.6;
    color: var(--cpr-gray);
}

.cpr-counter {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 6px;
}

.cpr-counter__label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cpr-ink);
}

/* Le compteur national, en bleu : c'est le cœur de la page. */
.cpr-counter__value {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(64px, min(10cqi, 12svh), 160px);
    line-height: 0.9;
    color: var(--cpr-action);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cpr-odo {
    display: inline-block;
    height: 1em;
    overflow: hidden;
    vertical-align: top;
}

.cpr-odo__col {
    display: flex;
    flex-direction: column;
    transform: translateY(calc(var(--d, 0) * -10%));
    transition: transform 1.1s var(--cpr-ease);
}

.cpr-odo__col span {
    display: block;
    height: 1em;
    line-height: 1em;
}

.cpr-odo-gap {
    display: inline-block;
    width: 0.22em;
}

.cpr-goal {
    max-width: 560px;
    height: 10px;
    overflow: hidden;
    background: var(--cpr-line);
}

.cpr-goal__fill {
    width: var(--pct, 0%);
    height: 100%;
    background: var(--cpr-action);
    transition: width 1.1s var(--cpr-ease);
}

.cpr-counter__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 15px;
    color: var(--cpr-gray);
}

.cpr-counter__facts strong { color: var(--cpr-ink); }

.cpr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cpr-map {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

/* Bornée en hauteur pour laisser le compteur dans le premier écran : le
   script dessine la carte en entier dans la boîte rendue, centrée. */
.cpr-map__canvas {
    position: relative;
    display: block;
    width: 100%;
    max-height: 60svh;
    aspect-ratio: 640 / 600;
}

.cpr-ticker {
    overflow: hidden;
    border-block: 2px solid var(--cpr-ink);
}

.cpr-ticker__track {
    display: flex;
    width: max-content;
    padding: 16px 0;
    margin: 0;
    list-style: none;
    animation: cpr-marquee 70s linear infinite;
}

.cpr-ticker__item {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 32px;
    font-size: 15px;
    white-space: nowrap;
    color: var(--cpr-gray);
}

.cpr-ticker__item time { font-variant-numeric: tabular-nums; }
.cpr-ticker__name { font-weight: 700; color: var(--cpr-ink); }
.cpr-ticker__value { font-weight: 800; color: var(--cpr-action); font-variant-numeric: tabular-nums; }

/* Le bandeau des messages clés, en grand, entre deux sections. */
.cpr-band {
    overflow: hidden;
    padding: 22px 0;
    background: var(--cpr-action);
    color: var(--cpr-white);
}

.cpr-band__track {
    display: flex;
    width: max-content;
    animation: cpr-marquee 40s linear infinite;
}

.cpr-band__item {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(36px, 5cqi, 72px);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.cpr-band__item::after {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--cpr-white);
}

/* Les titres entrent mot par mot (le script découpe et pose `--i`). */
.cpr-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.45em);
    transition: opacity .6s var(--cpr-ease) calc(var(--i, 0) * 45ms), transform .8s var(--cpr-ease) calc(var(--i, 0) * 45ms);
}

.is-in .cpr-word {
    opacity: 1;
    transform: none;
}

/* Les sur-titres numérotés des sections (« 01 · Les chiffres »), portés
   par le titre lui-même (`data-kicker`) : une étiquette bleue. */
.cpr-h2[data-kicker]::before {
    content: attr(data-kicker);
    display: table;
    margin-bottom: 22px;
    padding: 6px 10px 5px;
    background: var(--cpr-action);
    color: var(--cpr-white);
    font-family: var(--cpr-sans);
    font-size: 13px;
    font-stretch: 100%;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
}

.cpr-section--night,
.cpr-final {
    position: relative;
    /* `clip` et non `hidden` : une section ne doit pas devenir un conteneur
       de défilement, sinon les éléments collants s'en détachent. */
    overflow-x: clip;
}

/* ══ CHIFFRES-CHOCS ══════════════════════════════════════════════ */

.cpr-intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 24px 64px;
    align-items: end;
}

.cpr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

.cpr-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 220px;
    padding: 26px 24px 28px;
    border-top: 6px solid var(--cpr-ink);
    background: var(--cpr-white);
    transition: transform .3s var(--cpr-ease-soft), box-shadow .3s ease;
}

.cpr-stat:hover { transform: translateY(-4px); box-shadow: var(--cpr-shadow-lift); }

.cpr-stat__value {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(60px, 6cqi, 96px);
    line-height: 0.88;
}

.cpr-stat__label {
    font-size: 17px;
    line-height: 1.5;
    color: var(--cpr-gray);
}

/* La donnée mise en avant : le seul aplat bleu de la rangée. */
.cpr-stat--strong { border-top-color: var(--cpr-action); background: var(--cpr-action); color: var(--cpr-white); }
.cpr-stat--strong .cpr-stat__label { color: var(--cpr-white); }

.cpr-foot-note {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 16px 64px;
}

/* ══ QUATRE RÉFLEXES, ET À VOUS ═══════════════════════════════════
   Onglets à gauche (au-dessus au téléphone), panneau à droite : l'image ou
   le dessin du réflexe, son descriptif, puis l'encart « À vous ». */

.cpr-steps { scroll-margin-top: 24px; }

/* — Les cartes des quatre gestes — */
.cpr-step-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpr-step-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 0 0 22px;
    border: 0;
    border-top: 4px solid var(--cpr-white);
    background: var(--cpr-ink-2);
    color: var(--cpr-white);
    font-family: var(--cpr-sans);
    text-align: left;
    cursor: pointer;
    transition: transform .3s var(--cpr-ease-soft), border-color .2s ease;
}

.cpr-step-card:hover {
    transform: translateY(-6px);
    border-top-color: var(--cpr-action);
}

.cpr-step-card__art {
    display: block;
    overflow: hidden;
    background: var(--cpr-ink-3);
}

.cpr-step-card__art .cpr-scene {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .6s var(--cpr-ease);
}

.cpr-step-card:hover .cpr-step-card__art .cpr-scene,
.cpr-step-card:hover .cpr-photo__img { transform: scale(1.06); }

.cpr-step-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px 0;
}

.cpr-step-card__n {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 52px;
    line-height: 1;
    color: var(--cpr-action-light);
}

.cpr-step-card__done {
    color: var(--cpr-action-light);
    opacity: 0;
    transition: opacity .3s ease;
}

.cpr-step-card[data-done="true"] .cpr-step-card__done { opacity: 1; }

.cpr-step-card__title {
    padding: 0 18px;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(28px, 2.6cqi, 38px);
    line-height: 1;
    text-transform: uppercase;
}

.cpr-step-card .cpr-when { margin-left: 18px; }

.cpr-step-card__text {
    display: -webkit-box;
    overflow: hidden;
    padding: 0 18px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--cpr-on-dark);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.cpr-step-card__cta {
    margin-top: auto;
    padding: 4px 18px 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cpr-white);
}

/* — La fenêtre plein écran — */
html:has(.cpr-modal[open]) { overflow: hidden; }

.cpr-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--cpr-ink);
    color: var(--cpr-white);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cpr-modal::backdrop { background: var(--cpr-ink); }

.cpr-modal__bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title close" "tabs tabs";
    align-items: center;
    gap: 12px 16px;
    padding: 16px 24px 14px;
    border-bottom: 1px solid var(--cpr-line-dark);
    background: var(--cpr-veil);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Sur un écran large, titre, onglets et fermeture sur une seule rangée :
   la barre collante prend une ligne de moins sur la hauteur utile. */
@media (width >= 110em) {
    .cpr-modal__bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "title tabs close";
        gap: 24px;
        padding-block: 14px;
    }

    .cpr-modal__title { font-size: 28px; }
}

/* Le titre de la section, rappelé en tête de la fenêtre. */
.cpr-modal__title {
    grid-area: title;
    margin: 0;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1;
    text-transform: uppercase;
}

.cpr-steps__tabs {
    grid-area: tabs;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.cpr-step-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 6px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: var(--cpr-ink-2);
    color: var(--cpr-on-dark);
    font-family: var(--cpr-sans);
    text-align: left;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.cpr-step-tab:hover { background: var(--cpr-ink-3); color: var(--cpr-white); }

.cpr-step-tab[aria-selected="true"] {
    background: var(--cpr-action);
    color: var(--cpr-white);
}

.cpr-step-tab__n {
    flex-shrink: 0;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
}

.cpr-step-tab__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.cpr-step-tab__done {
    flex-shrink: 0;
    color: var(--cpr-action-light);
    opacity: 0;
    transition: opacity .3s ease;
}

.cpr-step-tab[data-done="true"] .cpr-step-tab__done { opacity: 1; }
.cpr-step-tab[aria-selected="true"] .cpr-step-tab__done { color: var(--cpr-white); }

.cpr-modal__close {
    grid-area: close;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--cpr-white);
    background: transparent;
    color: var(--cpr-white);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.cpr-modal__close:hover { background: var(--cpr-white); color: var(--cpr-ink); }

/* Le détail : l'illustration à gauche, collée pendant que le texte et
   l'exercice défilent à droite ; l'une sous l'autre au téléphone. */
/* La colonne du texte est la plus large : l'exercice y tient en deux
   colonnes, et la fenêtre défile d'autant moins. */
.cpr-step-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 28px 32px;
}

.cpr-step-panel__media {
    position: sticky;
    top: 96px;
}

.cpr-step-panel .cpr-scene {
    display: block;
    width: 100%;
    height: auto;
}

.cpr-step-panel__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cpr-step-panel__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Au bureau, le numéro sur la ligne du titre : la fenêtre gagne une
   ligne de hauteur, et l'exercice remonte dans le premier écran. */
@media (width >= 64em) {
    .cpr-step-panel__body {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        gap: 14px 18px;
    }

    .cpr-step-panel__body > :not(.cpr-step-panel__n, .cpr-step-panel__title) { grid-column: 1 / -1; }
    .cpr-step-panel__body > .cpr-when { justify-self: start; }
}

.cpr-step-panel__n {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 48px;
    line-height: .8;
    color: var(--cpr-action-light);
}

.cpr-step-panel__title {
    margin: 0;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(40px, 4.5vw, 72px);
    line-height: .9;
    text-transform: uppercase;
}

/* « Écouter », posé sur l'illustration comme le bouton d'un lecteur : un
   bloc bleu, triangle de lecture au repos, égaliseur pendant l'écoute. */
.cpr-listen {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 2px;
    background: var(--cpr-action);
    color: var(--cpr-white);
    font-family: var(--cpr-sans);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cpr-listen:hover { background: var(--cpr-action-dark); }

.cpr-listen__bars {
    display: none;
    align-items: flex-end;
    gap: 2px;
    width: 18px;
    height: 16px;
}

.cpr-listen[aria-pressed="true"] .cpr-listen__play { display: none; }
.cpr-listen[aria-pressed="true"] .cpr-listen__bars { display: flex; }

.cpr-listen__bars span {
    width: 3px;
    height: 35%;
    background: currentColor;
    animation: cpr-eq .9s ease-in-out infinite;
}

.cpr-listen__bars span:nth-child(2) { animation-delay: -.3s; }
.cpr-listen__bars span:nth-child(3) { animation-delay: -.6s; }
.cpr-listen__bars span:nth-child(4) { animation-delay: -.15s; }

.cpr-step-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* L'encart « À vous » : une carte claire dans le panneau sombre, parce que
   le cercle d'appui, la jauge et les pastilles de tempo sont dessinés pour
   un fond clair. */
.cpr-practice {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
    padding: 22px;
    border-top: 6px solid var(--cpr-action);
    background: var(--cpr-white);
    color: var(--cpr-ink);
}

.cpr-practice__label {
    align-self: flex-start;
    padding: 5px 10px 4px;
    background: var(--cpr-ink);
    color: var(--cpr-white);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cpr-practice__title {
    margin: 0;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(28px, 2.6cqi, 36px);
    line-height: 1;
    text-transform: uppercase;
}

.cpr-practice__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--cpr-gray);
}

.cpr-practice__feedback {
    margin: 0;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}

.cpr-practice__feedback[data-tone="ok"] { background: var(--cpr-ok-soft); color: var(--cpr-ink); }
.cpr-practice__feedback[data-tone="warn"] { background: var(--cpr-warn-bg); color: var(--cpr-warn-ink); }

.cpr-practice__shock { animation: cpr-blink 1s ease-in-out infinite; }

.cpr-practice__tempo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 18px;
    align-items: start;
}

.cpr-practice .cpr-pad { width: clamp(150px, 21svh, 220px); }
.cpr-practice .cpr-gauge svg { max-width: clamp(180px, 24svh, 260px); }
.cpr-practice .cpr-pad__btn { font-size: 20px; }
.cpr-practice .cpr-pad-col { gap: 14px; }
.cpr-practice .cpr-tempo__taps { font-size: 48px; }

/* Le cadre d'un réflexe : son image (champ de la page) ou, à défaut, le
   dessin. L'image garde les proportions du dessin pour que rien ne saute
   d'un réflexe à l'autre, et vit d'un lent zoom tant qu'elle est montrée. */
.cpr-media {
    position: relative;
    overflow: hidden;
    background: var(--cpr-ink-2);
}

.cpr-photo {
    aspect-ratio: 400 / 240;
    overflow: hidden;
}

.cpr-photo picture,
.cpr-photo__img {
    display: block;
    width: 100%;
    height: 100%;
}

.cpr-photo__img {
    object-fit: cover;
    animation: cpr-zoom 12s ease-out both;
}

.cpr-media__flash {
    position: absolute;
    inset: 0;
    background: var(--cpr-white);
    opacity: 0;
    pointer-events: none;
}

.cpr-media[data-shock="true"] .cpr-media__flash { animation: cpr-shock .7s ease-out; }

/* La scène : chaque calque `is-sN` ne paraît qu'au réflexe N. */
.cpr-scene__layer {
    opacity: 0;
    transition: opacity .5s ease;
}

.cpr-scene[data-step="0"] .is-s0,
.cpr-scene[data-step="1"] .is-s1,
.cpr-scene[data-step="2"] .is-s2,
.cpr-scene[data-step="3"] .is-s3 { opacity: 1; }

.cpr-scene__rescuer { transition: transform .6s var(--cpr-ease-soft); }
.cpr-scene[data-step="3"] .cpr-scene__rescuer { transform: translateX(-6px); }

/* Le défibrillateur se découvre en plusieurs temps, au fil de l'exercice. */
.cpr-scene[data-pads="false"] .cpr-scene__pads,
.cpr-scene[data-pads="false"] .cpr-scene__analysis { opacity: 0; }
.cpr-scene__pads,
.cpr-scene__analysis { transition: opacity .5s ease; }

.cpr-scene__bolt { fill: var(--cpr-action-light); }

.cpr-scene__shock {
    fill: var(--cpr-white);
    opacity: 0;
    pointer-events: none;
}

.cpr-scene[data-shock="true"] .cpr-scene__shock { animation: cpr-shock .7s ease-out; }

.cpr-when {
    align-self: flex-start;
    padding: 4px 10px;
    border: 1px solid var(--cpr-action-light);
    color: var(--cpr-action-light);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cpr-step-panel__text {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--cpr-on-dark);
}

.cpr-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpr-points li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 16px;
    color: var(--cpr-on-dark);
}

.cpr-points li::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: var(--cpr-action-light);
    transform: translateY(-2px);
}

.cpr-art-line { fill: none; stroke: var(--cpr-ink-3); }
.cpr-art-fill { fill: var(--cpr-ink-3); }
.cpr-art-accent { fill: var(--cpr-action-light); }
.cpr-art-accent-stroke { fill: none; stroke: var(--cpr-action-light); }
.cpr-art-white { fill: var(--cpr-white); }
.cpr-art-soft { fill: var(--cpr-on-dark); }
.cpr-art-soft-stroke { fill: none; stroke: var(--cpr-on-dark); }
.cpr-art-night { fill: var(--cpr-ink); }
.cpr-art-label { font-family: var(--cpr-sans); font-weight: 800; }
.cpr-art-serif { font-family: var(--cpr-display); font-stretch: 72%; font-weight: 800; }

.cpr-art-qa { animation: cpr-qa 2.6s ease-in-out infinite; }
.cpr-art-qb { opacity: 0; animation: cpr-qa 2.6s ease-in-out 1.3s infinite; }
.cpr-art-pump { animation: cpr-pump .545s ease-in-out infinite; }
.cpr-art-wave { transform-box: fill-box; transform-origin: left center; animation: cpr-wave 1.4s ease-out infinite; }
.cpr-art-wave--2 { animation-delay: .25s; }
.cpr-art-wave--3 { animation-delay: .5s; }
.cpr-art-flash { animation: cpr-flash 1.6s ease-in-out infinite; }

/* ══ DÉFIBRILLATEURS PROCHES (4e geste) ═══════════════════════════
   Sur le fond sombre de la fenêtre, après l'exercice. */

.cpr-nearby {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--cpr-line-dark);
}

.cpr-nearby__title {
    margin: 0;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(30px, 3cqi, 40px);
    line-height: 1;
    text-transform: uppercase;
}

.cpr-nearby__text,
.cpr-nearby__note {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--cpr-on-dark);
}

.cpr-nearby__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cpr-nearby__label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cpr-nearby__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cpr-nearby__input {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 50px;
    padding: 0 14px;
    border: 2px solid var(--cpr-white);
    border-radius: 2px;
    background: var(--cpr-ink-2);
    color: var(--cpr-white);
    font: inherit;
    font-size: 16px;
}

.cpr-nearby__input::placeholder { color: var(--cpr-gray-light); }

.cpr-nearby__status {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.cpr-nearby__status:empty { display: none; }

.cpr-nearby__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpr-nearby__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-left: 4px solid var(--cpr-action-light);
    background: var(--cpr-ink-2);
}

.cpr-nearby__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
}

.cpr-nearby__distance {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
    color: var(--cpr-action-light);
    font-variant-numeric: tabular-nums;
}

.cpr-nearby__name {
    font-weight: 800;
    font-size: 16px;
}

.cpr-nearby__address,
.cpr-nearby__where {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--cpr-on-dark);
}

.cpr-nearby__where { font-style: italic; }

.cpr-nearby__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.cpr-nearby__tag {
    padding: 3px 8px;
    border: 1px solid var(--cpr-line-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cpr-nearby__tag--strong { border-color: var(--cpr-action-light); color: var(--cpr-action-light); }
.cpr-nearby__tag--muted { color: var(--cpr-gray-light); }

.cpr-nearby__map {
    align-self: flex-start;
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cpr-nearby__source {
    margin: 0;
    font-size: 12px;
    color: var(--cpr-gray-light);
}

/* ══ LE TEMPO ════════════════════════════════════════════════════ */

.cpr-sound {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 20px;
    border: 2px solid var(--cpr-ink);
    border-radius: 2px;
    background: transparent;
    color: var(--cpr-ink);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.cpr-sound[aria-pressed="true"] { background: var(--cpr-ink); color: var(--cpr-white); }

.cpr-instruments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    align-items: end;
    padding: 22px;
    background: var(--cpr-white);
}

.cpr-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cpr-gauge svg {
    width: 100%;
    max-width: 260px;
    height: auto;
    overflow: visible;
}

.cpr-gauge__track { fill: none; stroke: var(--cpr-line-2); }
.cpr-gauge__arc { fill: none; stroke: var(--cpr-gray-light); transition: stroke .4s ease; }
.cpr-gauge__arc[data-state="ok"] { stroke: var(--cpr-ok); }
.cpr-gauge__arc[data-state="off"] { stroke: var(--cpr-off); }
.cpr-gauge__zone { fill: none; stroke: var(--cpr-ok); }
.cpr-gauge__tick { stroke: var(--cpr-line); stroke-linecap: round; }
.cpr-gauge__tick--zone { stroke: var(--cpr-ok); }
.cpr-gauge__needle { stroke: var(--cpr-ink); }
.cpr-gauge__hub { fill: var(--cpr-ink); }
.cpr-gauge__num { font-family: var(--cpr-display); font-stretch: 72%; font-weight: 800; fill: var(--cpr-ink); }
.cpr-gauge__caption { font-family: var(--cpr-sans); font-weight: 700; fill: var(--cpr-gray); }
.cpr-gauge__scale { font-family: var(--cpr-sans); fill: var(--cpr-gray); }
.cpr-gauge__zone-label { font-family: var(--cpr-sans); font-weight: 700; fill: var(--cpr-ok); }

.cpr-caption {
    font-size: 14px;
    font-weight: 700;
    color: var(--cpr-gray);
}

.cpr-bars {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 90px;
    border-bottom: 1px solid var(--cpr-line);
}

.cpr-bars::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    height: 18px;
    background: var(--cpr-ok-soft);
}

.cpr-bars__bar {
    position: relative;
    flex: 1;
    height: var(--h, 4%);
    background: var(--cpr-off);
    transition: height .5s var(--cpr-ease-soft), background-color .4s ease;
}

.cpr-bars__bar[data-ok="true"] { background: var(--cpr-ok); }

.cpr-pad-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.cpr-pad {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1;
}

.cpr-pad__ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--cpr-ink);
    border-radius: 999px;
    pointer-events: none;
    animation: cpr-ring .545s ease-out infinite;
}

.cpr-pad__ripple {
    position: absolute;
    inset: 10%;
    border: 3px solid var(--cpr-action);
    border-radius: 999px;
    pointer-events: none;
    animation: cpr-ripple 1s cubic-bezier(.2, .7, .3, 1) forwards;
}

/* LE BOUTON PASSE AU-DESSUS DE L'ANNEAU : une transformation animée crée
   un contexte d'empilement, et l'anneau avalait les appuis. */
.cpr-pad__btn {
    position: absolute;
    inset: 10%;
    z-index: 1;
    border: 0;
    border-radius: 999px;
    background: var(--cpr-ink);
    color: var(--cpr-white);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .09s ease;
}

.cpr-pad__btn:active { transform: scale(.94); }

.cpr-tempo__row {
    display: flex;
    align-items: baseline;
    gap: 22px;
}

.cpr-tempo__taps {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 64px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cpr-tempo__of { font-size: 28px; color: var(--cpr-gray); }

.cpr-tempo__rate {
    font-size: 19px;
    font-weight: 700;
    color: var(--cpr-gray);
    font-variant-numeric: tabular-nums;
}

.cpr-progress {
    width: 100%;
    max-width: 380px;
    height: 8px;
    overflow: hidden;
    background: var(--cpr-line);
}

.cpr-progress__fill {
    width: var(--pct, 0%);
    height: 100%;
    background: var(--cpr-ink);
    transition: width .3s var(--cpr-ease);
}

.cpr-zone {
    margin: 0;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 800;
    background: var(--cpr-line-2);
    color: var(--cpr-ink);
    transition: background-color .3s ease, color .3s ease;
}

.cpr-zone[data-zone="slow"],
.cpr-zone[data-zone="fast"] { background: var(--cpr-warn-bg); color: var(--cpr-warn-ink); }
.cpr-zone[data-zone="good"] { background: var(--cpr-ok); color: var(--cpr-white); }
.cpr-zone[data-zone="done"] { background: var(--cpr-ink); color: var(--cpr-white); }

.cpr-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 440px;
    text-align: center;
}

.cpr-done__score {
    margin: 0;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 36px;
    text-transform: uppercase;
    line-height: 1.1;
}

/* ══ 5 À 6 CM ════════════════════════════════════════════════════ */

.cpr-depth-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-top: 6px solid var(--cpr-ink);
    background: var(--cpr-white);
}

.cpr-depth-box__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cpr-gray);
}

.cpr-depth-box__value {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 52px;
    line-height: 1;
    color: var(--cpr-ink);
    font-variant-numeric: tabular-nums;
}

.cpr-range {
    width: 100%;
    height: 10px;
    background: var(--cpr-line);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.cpr-range::-webkit-slider-thumb {
    width: 34px;
    height: 34px;
    border: 4px solid var(--cpr-white);
    border-radius: 999px;
    background: var(--cpr-action);
    box-shadow: 0 0 0 2px var(--cpr-action);
    cursor: grab;
    -webkit-appearance: none;
}

.cpr-range::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border: 4px solid var(--cpr-white);
    border-radius: 999px;
    background: var(--cpr-action);
    box-shadow: 0 0 0 2px var(--cpr-action);
    cursor: grab;
}

/* Le curseur de l'estimation, debout le long de la règle. Le pouce mesure
   34 px dans les deux moteurs (bordure comprise), et sa course vaut 7,5 cm à
   l'échelle : le haut de l'élément commence un demi-pouce au-dessus de 0,5 cm,
   donc le CENTRE du pouce tombe sur le trait de l'estimation. `vertical-lr`
   met le minimum en haut : plus on descend, plus on enfonce. */
.cpr-range--depth {
    position: absolute;
    z-index: 5;
    left: 110px;
    top: calc(var(--top) + 0.5 * var(--cm) - 17px);
    width: 34px;
    height: calc(7.5 * var(--cm) + 34px);
    writing-mode: vertical-lr;
    direction: ltr;
    background: linear-gradient(var(--cpr-ink), var(--cpr-ink)) center / 4px calc(100% - 34px) no-repeat;
}

.cpr-range--depth::-webkit-slider-thumb { box-sizing: border-box; }

.cpr-range--depth::-moz-range-thumb {
    box-sizing: border-box;
    width: 34px;
    height: 34px;
}

.cpr-range-ends {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
    font-size: 13px;
    color: var(--cpr-gray);
}

.cpr-verdict {
    margin: 0;
    align-self: flex-start;
    padding: 7px 12px;
    font-size: 15px;
    font-weight: 800;
}

.cpr-verdict[data-tone="low"] { background: var(--cpr-warn-bg); color: var(--cpr-warn-ink); }
.cpr-verdict[data-tone="ok"] { background: var(--cpr-ok); color: var(--cpr-white); }
.cpr-verdict[data-tone="high"] { background: var(--cpr-ko-bg); color: var(--cpr-ko-ink); }

.cpr-depth-detail {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cpr-gray);
}

.cpr-chest-frame {
    padding: 16px;
    border-top: 6px solid var(--cpr-ink);
    background: var(--cpr-white);
    color: var(--cpr-ink);
}

/* LA RÈGLE À L'ÉCHELLE RÉELLE : `--cm` vaut 37,8 px (valeur théorique du
   CSS) tant que le visiteur n'a pas calé l'échelle sur son écran ; le script
   la remplace alors par la mesure. Surface de la poitrine à 70 px du haut,
   hauteur suffisante pour les 8 cm de la règle quelle que soit l'échelle.
   `--d` (cm) est posé par le script. */
.cpr-chest {
    --cm: 37.8px;
    --top: 70px;
    position: relative;
    height: max(460px, calc(var(--top) + 8.6 * var(--cm) + 24px));
    overflow: hidden;
    background: var(--cpr-paper);
}

.cpr-chest__hint {
    position: absolute;
    left: 22px;
    top: 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cpr-gray);
}

.cpr-chest__body {
    position: absolute;
    left: 110px;
    right: 16px;
    top: calc(var(--top) + var(--d, 1.5) * var(--cm));
    bottom: -40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 120px 120px 0 0;
    background: var(--cpr-line);
    transition: top .25s var(--cpr-ease-soft);
}

.cpr-chest__heart {
    width: 120px;
    height: 120px;
    fill: var(--cpr-heart);
    transform-origin: 50% 0%;
    transform: scale(calc(1 + var(--d, 1.5) * 0.03), calc(1 - var(--d, 1.5) * 0.07));
    transition: transform .25s var(--cpr-ease-soft);
}

.cpr-chest__surface {
    position: absolute;
    left: 110px;
    right: 16px;
    top: var(--top);
    border-top: 2px dashed var(--cpr-gray-light);
}

.cpr-chest__hands {
    position: absolute;
    left: 50%;
    top: calc(var(--top) + var(--d, 1.5) * var(--cm) - 68px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px;
    transform: translateX(-50%);
    transition: top .25s var(--cpr-ease-soft);
}

.cpr-chest__arms { display: flex; gap: 6px; }
.cpr-chest__arm { display: block; width: 18px; height: 50px; border-radius: 9px; background: var(--cpr-ink); }
.cpr-chest__palm { display: block; width: 86px; height: 22px; margin-top: -4px; border-radius: 11px; background: var(--cpr-ink); }

.cpr-chest__mark {
    position: absolute;
    left: 22px;
    right: 16px;
    z-index: 2;
    top: calc(var(--top) + var(--d, 1.5) * var(--cm));
    border-top: 3px solid var(--cpr-ink);
    transition: top .25s var(--cpr-ease-soft);
}

.cpr-chest__mark span {
    position: absolute;
    right: 0;
    top: 4px;
    padding: 3px 8px;
    background: var(--cpr-ink);
    color: var(--cpr-white);
    font-size: 12px;
    font-weight: 700;
}

.cpr-chest__ruler {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.cpr-chest__axis {
    position: absolute;
    left: 22px;
    top: var(--top);
    width: 2px;
    height: calc(8 * var(--cm));
    background: var(--cpr-ink);
}

.cpr-chest__band {
    position: absolute;
    left: 22px;
    top: calc(var(--top) + 5 * var(--cm));
    width: 30px;
    height: var(--cm);
    background: var(--cpr-ok);
    opacity: 0.9;
}

.cpr-chest__tick {
    position: absolute;
    left: 22px;
    top: calc(var(--top) + var(--i) * var(--cm));
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transform: translateY(-50%);
}

.cpr-chest__tick--0 { --i: 0; }
.cpr-chest__tick--1 { --i: 1; }
.cpr-chest__tick--2 { --i: 2; }
.cpr-chest__tick--3 { --i: 3; }
.cpr-chest__tick--4 { --i: 4; }
.cpr-chest__tick--5 { --i: 5; }
.cpr-chest__tick--6 { --i: 6; }
.cpr-chest__tick--7 { --i: 7; }
.cpr-chest__tick--8 { --i: 8; }

.cpr-chest__tick::before {
    content: "";
    display: block;
    width: 14px;
    height: 2px;
    background: var(--cpr-ink);
}

.cpr-chest__card {
    position: absolute;
    left: 66px;
    top: var(--top);
    box-sizing: border-box;
    width: 18px;
    height: calc(5.4 * var(--cm));
    border: 2px dashed var(--cpr-gray);
    border-radius: 4px;
}

.cpr-chest__card-label {
    position: absolute;
    left: 58px;
    top: calc(var(--top) + 5.4 * var(--cm) + 8px);
    width: 40px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    color: var(--cpr-gray);
}

.cpr-chest__scale {
    position: absolute;
    right: 14px;
    bottom: 10px;
    z-index: 4;
    font-size: 12px;
    color: var(--cpr-gray);
}

/* LA COUPE, à l'échelle réelle. Mesures relevées sur l'image livrée le
   2026-10-09 (1254 px de côté) : du dessus du sternum (527 px) au dos
   (1162 px), 635 px pour un thorax adulte d'environ 22 cm, soit 28,9 px
   d'image par cm. En cm d'anatomie : image de 43,39 cm de côté, sternum à
   18,24 cm du haut, première coupe sous le sternum (20,52 cm), seconde au
   ras de la colonne (32,53 cm). UNE AUTRE IMAGE DEMANDE D'AUTRES MESURES.

   `--cpr-t` va de 0 à 1 au rythme de 110 par minute : le haut descend de
   `--d` cm, le milieu s'écrase d'autant depuis son bord bas, le bas ne bouge
   pas. Les deux bords qui se touchent bougent de la même quantité, donc les
   traits restent continus. La coupe reste à droite de la règle, comme le
   dessin qu'elle remplace : sur les traits, les graduations ne se lisent pas. */
@property --cpr-t {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.cpr-chest--cut {
    height: max(460px, calc(var(--top) + 15.4 * var(--cm)));
    background: var(--cpr-white);
}

/* Les libellés du panneau passent au-dessus du dessin : un fond les garde
   lisibles sur les traits. */
.cpr-chest--cut .cpr-chest__hint,
.cpr-chest--cut .cpr-chest__scale {
    z-index: 4;
    padding: 2px 6px;
    background: var(--cpr-white);
}

.cpr-cut {
    --w: 43.39;
    --surface: 18.24;
    --s1: 20.52;
    --s2: 32.53;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 110px;
    right: 16px;
    overflow: hidden;
    pointer-events: none;
    animation: cpr-compress .5454s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes cpr-compress {
    from { --cpr-t: 0; }
    to { --cpr-t: 1; }
}

.cpr-cut__band {
    position: absolute;
    left: calc(50% - var(--w) / 2 * var(--cm));
    width: calc(var(--w) * var(--cm));
    overflow: hidden;
}

.cpr-cut__img {
    position: absolute;
    left: 0;
    width: 100%;
    max-width: none;
    height: auto;
}

.cpr-cut__band--front {
    top: calc(var(--top) - var(--surface) * var(--cm));
    height: calc(var(--s1) * var(--cm));
    transform: translateY(calc(var(--cpr-t) * var(--d, 1.5) * var(--cm)));
}

.cpr-cut__band--front .cpr-cut__img { top: 0; }

.cpr-cut__band--mid {
    top: calc(var(--top) + (var(--s1) - var(--surface)) * var(--cm));
    height: calc((var(--s2) - var(--s1)) * var(--cm));
    transform-origin: 50% 100%;
    transform: scaleY(calc(1 - var(--cpr-t) * var(--d, 1.5) / (var(--s2) - var(--s1))));
}

.cpr-cut__band--mid .cpr-cut__img { top: calc(var(--s1) * var(--cm) * -1); }

.cpr-cut__band--back {
    top: calc(var(--top) + (var(--s2) - var(--surface)) * var(--cm));
    height: calc((var(--w) - var(--s2)) * var(--cm));
}

.cpr-cut__band--back .cpr-cut__img { top: calc(var(--s2) * var(--cm) * -1); }

/* Sans animation, la coupe montre la poitrine enfoncée de l'estimation. */
@media (prefers-reduced-motion: reduce) {
    .cpr-cut { animation: none; --cpr-t: 1; }
}

/* Calage de l'échelle sur l'écran : le petit côté d'une carte bancaire
   (5,398 cm, norme ISO/IEC 7810 ID-1), À LA VERTICALE. En largeur, il
   dépasserait le panneau sur un téléphone, et un repère rogné fausserait la
   mesure ; en hauteur, la place ne manque jamais. Le script pose la hauteur. */
.cpr-calib {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.cpr-calib__card {
    position: relative;
    width: min(100%, 240px);
    height: calc(5.398 * 37.8px);
    border-top: 2px solid var(--cpr-action);
    border-bottom: 2px solid var(--cpr-action);
    background: var(--cpr-white);
}

.cpr-calib__card span {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cpr-gray);
}

.cpr-calib__controls,
.cpr-calib__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cpr-calib__controls .cpr-range {
    flex: 1 1 160px;
    min-width: 0;
}

/* ══ QUIZ ════════════════════════════════════════════════════════ */

.cpr-quiz-progress {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cpr-quiz-dots {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpr-quiz-dot {
    display: block;
    width: 34px;
    height: 8px;
    background: var(--cpr-line);
    transition: background-color .4s ease, transform .4s var(--cpr-ease-soft);
}

.cpr-quiz-dot[data-state="current"] { background: var(--cpr-action); transform: scaleX(1.25); }
.cpr-quiz-dot[data-state="ok"] { background: var(--cpr-ok); }
.cpr-quiz-dot[data-state="ko"] { background: var(--cpr-ko-dot); }

.cpr-quiz-count {
    font-size: 16px;
    font-weight: 700;
    color: var(--cpr-gray);
    font-variant-numeric: tabular-nums;
}

.cpr-quiz-score {
    font-size: 16px;
    color: var(--cpr-gray);
}

.cpr-quiz-score strong {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 30px;
    color: var(--cpr-ink);
}

.cpr-quiz-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    min-height: 470px;
}

.cpr-quiz-deck {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 380px;
    perspective: 1400px;
}

.cpr-quiz-behind {
    position: absolute;
    inset: 0;
    border: 2px solid var(--cpr-ink);
    background: var(--cpr-white);
    transition: transform .5s var(--cpr-ease-soft), opacity .5s ease;
}

.cpr-quiz-behind--1 { transform: translateY(16px) scale(.95); opacity: .65; }
.cpr-quiz-behind--2 { transform: translateY(32px) scale(.9); opacity: .3; }

.cpr-quiz-card {
    position: absolute;
    inset: 0;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.cpr-quiz-card:active { cursor: grabbing; }

.cpr-quiz-flip {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .7s var(--cpr-ease-soft);
}

.cpr-quiz-card[data-answered="true"] .cpr-quiz-flip { transform: rotateY(180deg); }

.cpr-quiz-face {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cpr-quiz-front {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px;
    border: 2px solid var(--cpr-ink);
    border-top-width: 8px;
    background: var(--cpr-white);
    color: var(--cpr-ink);
    box-shadow: var(--cpr-shadow-lift);
}

.cpr-quiz-front__num {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cpr-action);
}

.cpr-quiz-front__claim {
    margin: 0;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: clamp(32px, 3.2cqi, 42px);
    line-height: 1;
    text-transform: uppercase;
}

.cpr-quiz-front__hint {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: var(--cpr-gray);
    animation: cpr-hint 2.4s ease-in-out infinite;
}

.cpr-quiz-stamp {
    position: absolute;
    top: 28px;
    padding: 6px 12px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 18px;
    opacity: var(--o, 0);
}

.cpr-quiz-stamp--true { left: 28px; background: var(--cpr-ok); color: var(--cpr-white); }
.cpr-quiz-stamp--false { right: 28px; background: var(--cpr-ko-bg); color: var(--cpr-ko-ink); }

.cpr-quiz-back {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
    padding: 30px;
    border: 2px solid var(--cpr-ink);
    border-top-width: 8px;
    background: var(--cpr-white);
    color: var(--cpr-ink);
    box-shadow: var(--cpr-shadow-lift);
    transform: rotateY(180deg);
}

.cpr-quiz-back__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cpr-quiz-back__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.cpr-quiz-back[data-ok="true"] .cpr-quiz-back__icon { background: var(--cpr-ok); color: var(--cpr-white); }
.cpr-quiz-back[data-ok="false"] .cpr-quiz-back__icon { background: var(--cpr-ko-bg); color: var(--cpr-ko-ink); }
.cpr-quiz-back[data-ok="true"] .cpr-quiz-back__ko,
.cpr-quiz-back[data-ok="false"] .cpr-quiz-back__ok { display: none; }

.cpr-quiz-back__title {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
}

.cpr-quiz-back__truth {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--cpr-gray);
}

.cpr-quiz-back__why {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--cpr-gray);
}

.cpr-quiz-back__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    font-size: 15px;
}

.cpr-quiz-buttons {
    display: flex;
    gap: 12px;
}

.cpr-quiz-buttons .cpr-btn { min-width: 150px; min-height: 56px; }

.cpr-quiz-end {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 480px;
    padding: 34px;
    border: 2px solid var(--cpr-ink);
    border-top-width: 8px;
    background: var(--cpr-white);
    color: var(--cpr-ink);
}

.cpr-quiz-end__score {
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 88px;
    line-height: 0.85;
    color: var(--cpr-action);
}

.cpr-quiz-end__msg {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

.cpr-quiz-end__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpr-quiz-end__list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--cpr-gray);
}

.cpr-quiz-end__list li::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: var(--cpr-ko-dot);
}

.cpr-quiz-end__list li[data-ok="true"]::before { background: var(--cpr-ok); }
.cpr-quiz-end__list strong { color: var(--cpr-ink); }

/* ══ LE RÉSEAU ═══════════════════════════════════════════════════ */

.cpr-network {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 48px 64px;
    align-items: start;
}

.cpr-network__text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cpr-network__muted {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cpr-gray);
}

/* La mention des illustrations générées, détachée des cartes qu'elle
   qualifie. */
.cpr-ai-notice { margin-top: 32px; }

.cpr-board {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(22px, 3cqi, 34px);
    border-top: 6px solid var(--cpr-ink);
    background: var(--cpr-white);
}

.cpr-board__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cpr-board__title {
    margin: 0;
    font-family: var(--cpr-display);
    font-stretch: 72%;
    font-weight: 800;
    font-size: 28px;
    text-transform: uppercase;
}

.cpr-switch {
    display: flex;
    border: 2px solid var(--cpr-ink);
}

.cpr-switch__btn {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--cpr-ink);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

.cpr-switch__btn[aria-pressed="true"] { background: var(--cpr-ink); color: var(--cpr-white); }

.cpr-board__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpr-board__row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    padding: 8px 0;
}

.cpr-board__rank { font-size: 14px; font-weight: 800; color: var(--cpr-gray); }

.cpr-board__label {
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpr-board__value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.cpr-board__track {
    grid-column: 2 / 4;
    height: 6px;
    overflow: hidden;
    background: var(--cpr-line-2);
}

.cpr-board__fill {
    width: var(--w, 0%);
    height: 100%;
    background: var(--cpr-ink);
    transition: width 1.1s var(--cpr-ease);
}

.cpr-board__row:first-child .cpr-board__fill { background: var(--cpr-action); }

/* ══ RESSOURCES ══════════════════════════════════════════════════ */

.cpr-resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.cpr-resource {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    min-height: 220px;
    padding: 28px;
    border-top: 6px solid var(--cpr-ink);
    background: var(--cpr-white);
    color: var(--cpr-ink);
    text-decoration: none;
}

.cpr-resource:hover { border-top-color: var(--cpr-action); }


.cpr-resource__kind {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cpr-action);
}

.cpr-resource__title { font-family: var(--cpr-display); font-stretch: 72%; font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; }
.cpr-resource__text { flex-grow: 1; font-size: 15px; line-height: 1.55; color: var(--cpr-gray); }
.cpr-resource__cta { font-weight: 800; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }

.cpr-lift {
    transition: transform .3s var(--cpr-ease-soft), box-shadow .3s ease;
}

.cpr-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--cpr-shadow-lift);
}

/* ══ APPEL FINAL ET PIED ═════════════════════════════════════════ */

.cpr-final {
    overflow: hidden;
    padding: 140px 28px;
    background: var(--cpr-action);
    color: var(--cpr-white);
}

/* Sur le bleu : l'insistance du titre est soulignée, le bouton principal
   passe en blanc et le second en trait blanc. */
.cpr-final .cpr-h2 em { color: var(--cpr-white); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .1em; }
.cpr-final .cpr-btn--accent { background: var(--cpr-white); color: var(--cpr-action); }
.cpr-final .cpr-btn--accent:hover { background: var(--cpr-ink); color: var(--cpr-white); }
.cpr-final .cpr-lead,
.cpr-final .cpr-small { color: var(--cpr-white); }
.cpr-final :is(button, a):focus-visible { outline-color: var(--cpr-white); }

.cpr-final__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.cpr-final .cpr-actions,
.cpr-actions--center { justify-content: center; }

.cpr-final__share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--cpr-white);
}

.cpr-final__tags {
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.cpr-final__status {
    margin: 0;
    min-height: 1.5em;
}

.cpr-final__status:empty { display: none; }

.cpr-final__networks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 22px;
    margin: 0;
}

.cpr-final__share a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--cpr-white);
}

.cpr-foot {
    padding: 28px;
    background: var(--cpr-ink);
    color: var(--cpr-gray-light);
}

.cpr-foot__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    font-size: 14px;
}

.cpr-foot__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.cpr-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.cpr .cpr-foot__links a { color: var(--cpr-on-dark); }

.cpr-demo {
    font-size: 12px;
    color: var(--cpr-gray);
}

/* ══ APPARITIONS ═════════════════════════════════════════════════ */

.cpr-fadein { animation: cpr-fadein 1.1s var(--cpr-ease-soft) both; }
.cpr-fadein--2 { animation-delay: .15s; }
.cpr-fadein--3 { animation-delay: .3s; }
.cpr-fadein--4 { animation-delay: .45s; }

@supports (animation-timeline: view()) {
    .cpr-reveal {
        animation: cpr-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 28%;
    }
}

@media (width < 64em) {
    .cpr-step-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cpr-step-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .cpr-step-panel__media { position: static; }
}

@media (width < 40em) {
    .cpr-step-cards { grid-template-columns: minmax(0, 1fr); }
    .cpr-modal__bar { gap: 8px; padding: 10px 12px; }
    .cpr-steps__tabs { gap: 6px; }
    .cpr-step-tab { justify-content: center; padding: 6px; }
    .cpr-step-tab__title,
    .cpr-step-tab__done { display: none; }
    .cpr-step-panel { padding: 20px 16px 40px; }
    .cpr-practice { padding: 18px; }
}

@keyframes cpr-plus { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px); } }
@keyframes cpr-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@keyframes cpr-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes cpr-shock { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes cpr-blink { 50% { background: var(--cpr-action-dark); } }

@keyframes cpr-marquee { to { transform: translateX(-50%); } }
@keyframes cpr-ring { 0% { transform: scale(.96); opacity: .5; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes cpr-ripple { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cpr-fadein { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cpr-rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes cpr-pump { 0%, 100% { transform: translateY(0); } 28% { transform: translateY(14px); } }
@keyframes cpr-qa { 0%, 100% { opacity: 0; transform: translateY(6px); } 15%, 45% { opacity: 1; transform: none; } 60% { opacity: 0; } }
@keyframes cpr-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(10px); } }
@keyframes cpr-flash { 0%, 60%, 100% { opacity: .25; } 70%, 80% { opacity: 1; } }
@keyframes cpr-hint { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-14px) rotate(-2deg); } 75% { transform: translateX(14px) rotate(2deg); } }

@media (prefers-reduced-motion: reduce) {
    .cpr-ticker__track,
    .cpr-pad__ring,
    .cpr-pad__ripple,
    .cpr-fadein,
    .cpr-reveal,
    .cpr-art-pump,
    .cpr-art-qa,
    .cpr-art-qb,
    .cpr-art-wave,
    .cpr-art-flash,
    .cpr-quiz-front__hint,
    .cpr-counter__plus,
    .cpr-listen__bars span,
    .cpr-practice__shock,
    .cpr-band__track,
    .cpr-totop,
    .cpr-photo__img,
    .cpr-media[data-shock="true"] .cpr-media__flash { animation: none; }

    .cpr-scene__layer,
    .cpr-scene__rescuer,
    .cpr-step-tab,
    .cpr-step-tab__done,
    .cpr-step-card,
    .cpr-step-card__art .cpr-scene,
    .cpr-word { transition: none; }

    .cpr-word { opacity: 1; transform: none; }

    .cpr-art-qa,
    .cpr-art-qb { opacity: 1; }

    .cpr-odo__col,
    .cpr-pad__btn,
    .cpr-lift,
    .cpr-quiz-flip,
    .cpr-quiz-behind,
    .cpr-chest__body,
    .cpr-chest__hands,
    .cpr-chest__mark,
    .cpr-chest__heart { transition: none; }
}