/* ══ PRÉPA ENTRETIENS FINANCE (2026-10-28), préfixe prp- ═══════════════════════════════════════════════════════════════════════
   Shared/PrepaFenetre.razor : fenêtre plein écran DANS l'app (« /?prepa=1 », montée par FecLoader au-dessus des vues ; 28/10, soir,
   avant : page /prepa sans la coque), pensée d'abord pour le téléphone (QR de l'afterwork). Masquée (.is-masquee) quand « Voir dans
   Streamiku » ouvre une vue : visibility et non display, pour garder le défilement de l'écran quitté.
   • Même grammaire que l'Académie (academie.css) : sombre, lueur sarcelle, cartes arrondies, étapes numérotées ; thème clair par
     html[data-theme="light"]. Jetons locaux --prp-* posés sur .prp, dérivés des jetons de l'app quand ils existent.
   • Cibles tactiles de 44 px, aucune largeur fixe au-delà de l'écran, lignes de lecture ≤ 68 caractères.
   • v5 (28/10, nuit) : section « Parcours » (rubriques en bas ou dans l'en-tête, « À revoir aujourd'hui », recherche surlignée,
     révision éclair au pouce, formats d'entretien et relance, progression, contenu du pass, raccourcis clavier, fondu d'écran).
   • En fin de fichier : la bannière « aca-prepa » du parcours de l'Académie (Shared/AcademieFenetre.razor), puis la pastille
     « Revenir à… » commune à la prépa et à l'Académie (Shared/PastilleRetour.razor, préfixe rtp-).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.prp {
    --prp-fond: #07151c;
    --prp-carte: rgba(255, 255, 255, .045);
    --prp-carte2: rgba(255, 255, 255, .075);
    --prp-filet: rgba(255, 255, 255, .09);
    --prp-filet2: rgba(255, 255, 255, .16);
    --prp-tx: var(--tx1, #eafdff);
    --prp-tx2: var(--tx2, #c2cdd6);
    --prp-mut: var(--mut1, #8aa0ad);
    --prp-marque: var(--brand, #00B1CF);
    --prp-marque-tx: var(--brand-strong, var(--brand, #3fd0e8));
    --prp-sur-marque: #032530;
    --prp-ok: #34d399;
    --prp-revoir: #fbbf24;
    --prp-ko: #f87171;
    --prp-ombre: 0 10px 30px rgba(0, 0, 0, .28);
    position: fixed; inset: 0; z-index: 10092; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; min-height: 100%;
    color: var(--prp-tx); font-family: var(--app-font, var(--font-family, Inter, ui-sans-serif, system-ui, sans-serif));
    font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    background:
        radial-gradient(120% 55% at 50% -12%, color-mix(in srgb, var(--prp-marque) 26%, transparent) 0%, transparent 62%),
        radial-gradient(80% 40% at 100% 0%, color-mix(in srgb, #5b7cfa 12%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, #0a1d26 0%, var(--prp-fond) 60%);
    background-attachment: local;
    background-color: var(--prp-fond);
}
/* Masquée derrière une vue de l'app : rien ne s'affiche ni ne se clique, l'état (défilement compris) reste. */
.prp.is-masquee { visibility: hidden; pointer-events: none; }
html[data-theme="light"] .prp {
    --prp-fond: #f2f6f8;
    --prp-carte: #ffffff;
    --prp-carte2: #f5f9fa;
    --prp-filet: rgba(15, 38, 56, .11);
    --prp-filet2: rgba(15, 38, 56, .2);
    --prp-tx: #10212b;
    --prp-tx2: #24343e;
    --prp-mut: #4b5d68;
    --prp-marque-tx: var(--brand-strong, #006f85);
    --prp-ok: #047857;
    --prp-revoir: #a15c07;
    --prp-ko: #b91c1c;
    --prp-ombre: 0 8px 24px rgba(30, 41, 59, .08);
    background:
        radial-gradient(120% 50% at 50% -14%, color-mix(in srgb, var(--prp-marque) 20%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, #eef6f8 0%, var(--prp-fond) 55%);
    background-color: var(--prp-fond);
}
.prp *, .prp *::before, .prp *::after { box-sizing: border-box; }
.prp :focus-visible { outline: 2px solid var(--anneau-focus, var(--prp-marque)); outline-offset: 2px; }
/* Titre d'écran qui reçoit le focus par programme (changement d'écran, au clavier compris) : pas d'anneau, ce n'est pas une commande. */
.prp [tabindex="-1"]:focus-visible { outline: none; }
.prp svg.iku-ico { flex: 0 0 auto; }
.prp :where(button) { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ── Barre du haut ── */
.prp-barre { position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top, 0px);
             background: color-mix(in srgb, var(--prp-fond) 82%, transparent); border-bottom: 1px solid var(--prp-filet); }
@supports (backdrop-filter: blur(8px)) { .prp-barre { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.prp-barre-in { max-width: 760px; margin: 0 auto; min-height: 56px; padding: 6px 12px 6px 16px; display: flex; align-items: center; gap: 10px; }
.prp-barre-esp { flex: 1 1 auto; }
.prp-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px;
            background: color-mix(in srgb, var(--prp-marque) 18%, transparent); color: var(--prp-marque-tx); }
.prp-marque { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.prp-marque small { font-size: 11.5px; font-weight: 500; color: var(--prp-mut); letter-spacing: 0; }
.prp-retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -8px; padding: 0 12px 0 6px; border: 0; border-radius: 10px;
              background: none; font-size: 14.5px; font-weight: 600; color: var(--prp-tx); cursor: pointer; max-width: 60vw; }
.prp-retour span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prp-retour svg { font-size: 20px; }
.prp-retour:hover { background: var(--prp-carte2); }
.prp-ic { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; border: 1px solid transparent;
          background: none; color: var(--prp-mut); font-size: 18px; cursor: pointer; }
.prp-ic:hover { background: var(--prp-carte2); color: var(--prp-tx); }
.prp-demo { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
            color: var(--prp-ok); background: color-mix(in srgb, var(--prp-ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--prp-ok) 32%, transparent);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── Corps ── */
.prp-corps { flex: 1 0 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 14px 16px 28px; display: flex; flex-direction: column; gap: 16px; }
.prp-sur { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--prp-marque-tx); }
.prp-h1 { margin: 0; font-size: clamp(26px, 7.4vw, 36px); font-weight: 750; line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; outline: none; }
.prp-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.prp-promesse { margin: 10px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--prp-tx2); text-wrap: pretty; }
.prp-aide { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--prp-mut); max-width: 68ch; }
.prp-aide.discret { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; }
.prp-aide.discret svg { margin-top: 3px; }
.prp-vide { margin: 0; padding: 18px; border-radius: 14px; border: 1px dashed var(--prp-filet2); color: var(--prp-mut); text-align: center; }
.prp-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 750;
           background: color-mix(in srgb, var(--prp-marque) 18%, transparent); color: var(--prp-marque-tx); font-variant-numeric: tabular-nums; }
.prp-carte { padding: 18px 16px; border-radius: 18px; background: var(--prp-carte); border: 1px solid var(--prp-filet); box-shadow: var(--prp-ombre); min-width: 0; }
.prp-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
           color: var(--prp-tx2); background: var(--prp-carte2); border: 1px solid var(--prp-filet); white-space: nowrap; }
.prp-tag.libre { color: var(--prp-marque-tx); border-color: color-mix(in srgb, var(--prp-marque) 40%, transparent); background: color-mix(in srgb, var(--prp-marque) 10%, transparent); }
.prp-lien { display: inline-block; border: 0; background: none; padding: 13px 2px; margin: -13px 0; font-weight: 650;   /* zone tactile de 44 px sans bouger la ligne */ color: var(--prp-marque-tx); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* Boutons */
.prp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px;
           border: 1px solid transparent; background: var(--prp-marque); color: var(--prp-sur-marque); font-size: 15px; font-weight: 700; cursor: pointer;
           text-align: center; line-height: 1.2; transition: filter .12s, background-color .12s, border-color .12s; }
.prp-btn:hover { filter: brightness(1.07); }
.prp-btn:active { transform: translateY(1px); }
.prp-btn:disabled { opacity: .5; cursor: default; filter: none; transform: none; }
.prp-btn.ghost { background: transparent; color: var(--prp-tx); border-color: var(--prp-filet2); }
.prp-btn.ghost:hover { background: var(--prp-carte2); filter: none; }
.prp-btn.large { width: 100%; min-height: 52px; font-size: 16px; border-radius: 14px; }
.prp-btn.petit { min-height: 44px; padding: 0 14px; font-size: 13.5px; font-weight: 650; }
.prp-btn.reveler { width: 100%; background: color-mix(in srgb, var(--prp-marque) 14%, transparent); color: var(--prp-tx);
                   border-color: color-mix(in srgb, var(--prp-marque) 45%, transparent); }
.prp-btn.reveler svg { color: var(--prp-marque-tx); }

/* ── Accueil ── */
.prp-hero { padding: 18px 2px 4px; }
.prp-atouts { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prp-atouts li { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
                 background: var(--prp-carte); border: 1px solid var(--prp-filet); }
.prp-atouts svg { color: var(--prp-marque-tx); }
.prp-compte { margin: 12px 0 0; font-size: 13px; color: var(--prp-mut); font-variant-numeric: tabular-nums; }
.prp-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.prp-pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
                font-size: 14.5px; font-weight: 650; background: transparent; border: 1px solid var(--prp-filet2); color: var(--prp-tx2); }
.prp-pastille[aria-pressed="true"] { color: var(--prp-tx); background: color-mix(in srgb, var(--prp-marque) 18%, transparent); border-color: color-mix(in srgb, var(--prp-marque) 65%, transparent); }
.prp-pastille[aria-pressed="true"] svg { color: var(--prp-marque-tx); }
.prp-date { display: grid; gap: 6px; margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--prp-tx2); }
.prp-date input, .prp-champ input, .prp-champ textarea {
    width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--prp-filet2); background: var(--prp-carte2);
    color: var(--prp-tx); font: inherit; font-size: 16px; font-weight: 450; color-scheme: dark; }
:is(.prp-champ input, .prp-champ textarea)::placeholder { color: var(--prp-mut); opacity: .8; font-weight: 400; }
html[data-theme="light"] :is(.prp-date input, .prp-champ input, .prp-champ textarea) { color-scheme: light; background: #fff; }
.prp-date input:focus, .prp-champ input:focus, .prp-champ textarea:focus { outline: none; border-color: var(--prp-marque); box-shadow: 0 0 0 3px color-mix(in srgb, var(--prp-marque) 25%, transparent); }
.prp-plan-msg { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--prp-tx2); }
.prp-plan-msg.ok svg { color: var(--prp-ok); margin-top: 3px; }
.prp-plan-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 14px 0 0; }
.prp-plan-chiffres > div { padding: 10px 12px; border-radius: 12px; background: var(--prp-carte2); border: 1px solid var(--prp-filet); min-width: 0; }
.prp-plan-chiffres b { display: block; font-size: 22px; font-weight: 750; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prp-plan-chiffres span { display: block; font-size: 12.5px; color: var(--prp-mut); }
.prp-seance { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; gap: 8px; counter-reset: prp; }
.prp-seance li { counter-increment: prp; }
.prp-seance .prp-ligne { padding-left: 46px; position: relative; }
.prp-seance .prp-ligne::before { content: counter(prp); position: absolute; left: 12px; top: 13px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
                                 font-size: 12px; font-weight: 750; background: color-mix(in srgb, var(--prp-marque) 16%, transparent); color: var(--prp-marque-tx); }
.prp-actions2 { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.prp-tuile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 72px;
             padding: 14px; border-radius: 16px; text-align: left; cursor: pointer; background: var(--prp-carte2); border: 1px solid var(--prp-filet); }
.prp-tuile:hover { border-color: color-mix(in srgb, var(--prp-marque) 55%, transparent); }
.prp-tuile .prp-tuile-ic { grid-row: 1 / 3; }
.prp-tuile b { font-size: 16px; }
.prp-tuile > span:last-child { font-size: 13px; color: var(--prp-mut); line-height: 1.4; }
.prp-tuile-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 21px;
                background: color-mix(in srgb, var(--prp-marque) 16%, transparent); color: var(--prp-marque-tx); }
.prp-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; font-size: 12.5px; color: var(--prp-mut); }
.prp-legende span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; vertical-align: 0; background: var(--prp-filet2); }
.prp-legende .ok::before { background: var(--prp-ok); }
.prp-legende .revoir::before { background: var(--prp-revoir); }
.prp-pistes { display: grid; gap: 10px; }
.prp-piste { display: grid; gap: 8px; width: 100%; padding: 14px; border-radius: 14px; text-align: left; cursor: pointer; background: var(--prp-carte2); border: 1px solid var(--prp-filet); }
.prp-piste:hover:not(:disabled) { border-color: color-mix(in srgb, var(--prp-marque) 55%, transparent); }
.prp-piste:disabled { cursor: default; opacity: .7; }
.prp-piste-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15.5px; }
.prp-piste-h svg { color: var(--prp-mut); font-size: 18px; }
.prp-piste-acc { font-size: 13px; line-height: 1.45; color: var(--prp-tx2); }
.prp-piste-n { font-size: 12.5px; color: var(--prp-mut); font-variant-numeric: tabular-nums; }
.prp-piste-n .ok { color: var(--prp-ok); font-weight: 700; }
.prp-piste-n .revoir { color: var(--prp-revoir); font-weight: 700; }
.prp-piste-n em { font-style: normal; }
.prp-barre3 { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--prp-filet); }
.prp-barre3 i { display: block; height: 100%; }
.prp-barre3 i.ok { background: var(--prp-ok); }
.prp-barre3 i.revoir { background: var(--prp-revoir); }

/* ── Offre ── */
.prp-offre { position: relative; padding: 20px 16px 16px; border-radius: 20px; min-width: 0;
             background:
                linear-gradient(var(--prp-fond), var(--prp-fond)) padding-box,
                linear-gradient(135deg, color-mix(in srgb, var(--prp-marque) 85%, transparent), color-mix(in srgb, #7c6cf0 70%, transparent)) border-box;
             border: 1.5px solid transparent; box-shadow: 0 14px 40px color-mix(in srgb, var(--prp-marque) 16%, transparent); }
.prp-offre::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
                     background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--prp-marque) 16%, transparent), transparent 70%); }
.prp-offre > * { position: relative; }
html[data-theme="light"] .prp-offre { background:
                linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, color-mix(in srgb, var(--prp-marque) 85%, transparent), color-mix(in srgb, #7c6cf0 70%, transparent)) border-box; }
.prp-offre-accroche { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--prp-filet); font-size: 14px; font-weight: 600; color: var(--prp-tx); }
.prp-offre-accroche svg { margin-top: 3px; color: var(--prp-marque-tx); }
.prp-offre-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prp-offre-t { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.prp-offre-t small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--prp-mut); }
.prp-offre-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; color: #fff;
                background: linear-gradient(135deg, var(--prp-marque), #7c6cf0); }
.prp-offre-promesse { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--prp-tx); max-width: 60ch; }
.prp-offre-ecole { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--prp-tx2); max-width: 60ch; }
.prp-offre-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.prp-offre-note { margin: 10px 0 0; font-size: 12px; color: var(--prp-mut); }

/* ── Liste d'une piste ── */
.prp-tete-ecran { padding: 10px 2px 0; min-width: 0; }
.prp-tete-ecran .prp-barre3 { margin-top: 14px; }
.prp-filtres { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.prp-filtres::-webkit-scrollbar { display: none; }
.prp-filtre { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 650; cursor: pointer;
              background: transparent; border: 1px solid var(--prp-filet2); color: var(--prp-tx2); }
.prp-filtre[aria-pressed="true"] { background: var(--prp-tx); color: var(--prp-fond); border-color: var(--prp-tx); }
.prp-theme { min-width: 0; }
.prp-theme-t { display: flex; align-items: baseline; gap: 8px; margin: 6px 2px 8px; font-size: 13px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--prp-mut); }
.prp-theme-t small { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.prp-fiches, .prp-bilan-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prp-ligne { display: grid; gap: 8px; width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 14px; text-align: left; cursor: pointer;
             background: var(--prp-carte); border: 1px solid var(--prp-filet); }
.prp-ligne:hover { border-color: color-mix(in srgb, var(--prp-marque) 55%, transparent); }
.prp-ligne-q { font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.prp-ligne.is-verrou .prp-ligne-q { color: var(--prp-tx2); }
.prp-ligne-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prp-etat { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.prp-etat.ok { color: var(--prp-ok); background: color-mix(in srgb, var(--prp-ok) 14%, transparent); }
.prp-etat.revoir { color: var(--prp-revoir); background: color-mix(in srgb, var(--prp-revoir) 15%, transparent); }
.prp-etat.neuf { color: var(--prp-tx2); background: var(--prp-carte2); border: 1px solid var(--prp-filet); }
.prp-etat.verrou { color: var(--prp-mut); background: var(--prp-carte2); border: 1px dashed var(--prp-filet2); }
.prp-niv { display: inline-flex; align-items: center; gap: 2px; min-height: 24px; padding: 1px 9px 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
           color: var(--prp-tx2); background: var(--prp-carte2); border: 1px solid var(--prp-filet); white-space: nowrap; }
.prp-niv i { width: 4px; height: 10px; border-radius: 2px; background: var(--prp-filet2); }
.prp-niv i:last-of-type { margin-right: 5px; }
.prp-niv.n1 i:nth-child(-n+1), .prp-niv.n2 i:nth-child(-n+2), .prp-niv.n3 i:nth-child(-n+3) { background: var(--prp-marque); }

/* ── Fiche ── */
.prp-fil { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 650; color: var(--prp-marque-tx); }
.prp-fiche { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.prp-fiche-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prp-question { margin: 0; font-size: clamp(22px, 6.2vw, 30px); font-weight: 750; line-height: 1.25; letter-spacing: -.018em; text-wrap: pretty; outline: none;
                max-width: 32ch; scroll-margin-top: 80px; }
.prp-chrono { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tx d" "b b"; gap: 10px 12px; align-items: center;
              padding: 14px; border-radius: 16px; background: var(--prp-carte); border: 1px solid var(--prp-filet); }
.prp-chrono-tx { grid-area: tx; display: grid; gap: 2px; min-width: 0; }
.prp-chrono-tx b { font-size: 15px; }
.prp-chrono-tx span { font-size: 12.5px; color: var(--prp-mut); }
.prp-chrono-d { grid-area: d; display: grid; gap: 6px; justify-items: end; }
.prp-chrono-v { font-size: 26px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.prp-chrono-j { display: block; width: 84px; height: 5px; border-radius: 3px; background: var(--prp-filet); overflow: hidden; }
.prp-chrono-j i { display: block; height: 100%; background: var(--prp-marque); transition: width .5s linear; }
.prp-chrono-b { grid-area: b; display: flex; flex-wrap: wrap; gap: 8px; }
.prp-chrono-b .prp-btn { flex: 1 1 auto; }
.prp-chrono.is-on { border-color: color-mix(in srgb, var(--prp-marque) 55%, transparent); }
.prp-chrono.is-on .prp-chrono-v { color: var(--prp-marque-tx); }
.prp-chrono.is-depasse .prp-chrono-v { color: var(--prp-revoir); }
.prp-chrono.is-depasse .prp-chrono-j i { background: var(--prp-revoir); }
.prp-chrono.grand { grid-template-columns: 1fr; grid-template-areas: "d"; padding: 20px 16px; }
.prp-chrono.grand .prp-chrono-d { justify-items: center; }
.prp-chrono.grand .prp-chrono-v { font-size: 52px; }
.prp-chrono.grand .prp-chrono-j { width: min(260px, 100%); height: 6px; }
.prp-chrono-o { font-size: 13px; color: var(--prp-mut); }

.prp-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prp-etape { padding: 16px 14px; border-radius: 16px; background: var(--prp-carte); border: 1px solid var(--prp-filet); min-width: 0; }
.prp-etape.is-attente { background: transparent; border-style: dashed; padding-top: 12px; padding-bottom: 12px; }
.prp-etape.is-attente .prp-etape-t { margin: 0; color: var(--prp-mut); font-weight: 600; }
.prp-etape.is-attente .prp-num { background: var(--prp-carte2); color: var(--prp-mut); }
.prp-etape.is-verrou { padding: 0; background: none; border: 0; }
.prp-etape-t { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15.5px; font-weight: 700; }
.prp-etape.is-vu .prp-num { background: var(--prp-marque); color: var(--prp-sur-marque); }
.prp-structure { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: st; display: grid; gap: 8px; }
.prp-structure li { counter-increment: st; position: relative; padding: 9px 12px 9px 40px; border-radius: 12px; background: var(--prp-carte2); font-size: 15px; line-height: 1.45; }
.prp-structure li::before { content: counter(st); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
                            font-size: 11.5px; font-weight: 750; color: var(--prp-marque-tx); border: 1.5px solid color-mix(in srgb, var(--prp-marque) 60%, transparent); }
.prp-texte { max-width: 68ch; font-size: 16px; line-height: 1.68; color: var(--prp-tx); overflow-wrap: break-word; }
.prp-texte p { margin: 0 0 .9em; }
.prp-texte p:last-child, .prp-texte .prp-puces:last-child { margin-bottom: 0; }
.prp-texte strong, .prp-structure strong, .prp-pieges strong, .prp-consigne strong { font-weight: 750; color: var(--prp-tx); }
.prp-texte strong { box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--prp-marque) 22%, transparent); }
.prp-puces { margin: 0 0 .9em; padding-left: 1.2em; display: grid; gap: .3em; }
.prp-puces li::marker { color: var(--prp-marque-tx); }
.prp-pieges { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prp-pieges li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 15px; line-height: 1.5;
                 background: color-mix(in srgb, var(--prp-revoir) 9%, transparent); border: 1px solid color-mix(in srgb, var(--prp-revoir) 22%, transparent); }
.prp-pieges svg { margin-top: 3px; color: var(--prp-revoir); }
.prp-relances { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.prp-relance { padding: 12px; border-radius: 12px; background: var(--prp-carte2); display: grid; gap: 10px; }
.prp-relance-q { display: flex; gap: 10px; margin: 0; font-size: 15px; font-weight: 650; line-height: 1.45; }
.prp-relance-q svg { margin-top: 3px; color: var(--prp-marque-tx); }
.prp-relance .prp-btn { justify-self: start; }
.prp-attendu { padding: 10px 12px; border-left: 3px solid var(--prp-marque); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--prp-marque) 8%, transparent);
               font-size: 14.5px; line-height: 1.55; max-width: 68ch; }
.prp-attendu p { margin: 0 0 .6em; }
.prp-attendu p:last-child { margin: 0; }
.prp-eval { padding: 16px 14px; border-radius: 16px; background: var(--prp-carte); border: 1px solid var(--prp-filet); }
.prp-eval-t { margin: 0 0 12px; font-size: 15.5px; font-weight: 700; }
.prp-eval-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prp-btn.eval { min-height: 52px; background: transparent; color: var(--prp-tx); border-color: var(--prp-filet2); }
.prp-btn.eval.ok svg { color: var(--prp-ok); }
.prp-btn.eval.revoir svg { color: var(--prp-revoir); }
.prp-btn.eval.ok:hover, .prp-btn.eval.ok.is-choisi { border-color: var(--prp-ok); background: color-mix(in srgb, var(--prp-ok) 13%, transparent); filter: none; }
.prp-btn.eval.revoir:hover, .prp-btn.eval.revoir.is-choisi { border-color: var(--prp-revoir); background: color-mix(in srgb, var(--prp-revoir) 13%, transparent); filter: none; }
.prp-caslie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 14px; border-radius: 16px; text-align: left; cursor: pointer;
              background: var(--prp-carte); border: 1px solid color-mix(in srgb, var(--prp-marque) 35%, transparent); }
.prp-caslie b { display: block; font-size: 15px; line-height: 1.35; }
.prp-caslie small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--prp-mut); }
.prp-caslie .prp-sur { margin: 0 0 2px; }
.prp-caslie > svg { color: var(--prp-mut); font-size: 18px; }
.prp-caslie:hover { border-color: var(--prp-marque); }
/* Appel « Voir dans Streamiku » (28/10/2026) : un lien, mêmes proportions que le cas lié, bordure pointillée pour le distinguer. */
.prp-vue { color: inherit; text-decoration: none; border-style: dashed; margin-top: 12px; }
.prp-vue .prp-tuile-ic { color: var(--prp-marque); }
.prp-fiche-pied { padding-top: 4px; }
.prp-fin-seance { padding: 16px 14px; border-radius: 16px; background: color-mix(in srgb, var(--prp-ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--prp-ok) 30%, transparent); }
.prp-fin-seance p { display: flex; gap: 8px; margin: 0; font-size: 15px; line-height: 1.5; }
.prp-fin-seance p svg { margin-top: 3px; color: var(--prp-ok); }

/* ── Mode entretien ── */
.prp-progres { display: flex; gap: 6px; }
.prp-progres i { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--prp-filet); }
.prp-progres i.fait { background: var(--prp-marque); }
.prp-progres i.cours { background: color-mix(in srgb, var(--prp-marque) 50%, transparent); }
.prp-bilan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prp-bilan > div { padding: 14px 12px; border-radius: 14px; background: var(--prp-carte); border: 1px solid var(--prp-filet); min-width: 0; }
.prp-bilan b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.prp-bilan span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--prp-mut); }
.prp-bilan .ok b { color: var(--prp-ok); }
.prp-bilan .revoir b { color: var(--prp-revoir); }
.prp-temps { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; color: var(--prp-mut); font-variant-numeric: tabular-nums; }
.prp-temps.depasse { color: var(--prp-revoir); }

/* ── Cas chiffrés ── */
.prp-cas-l { display: grid; gap: 10px; }
.prp-cas-c { display: grid; gap: 8px; width: 100%; padding: 14px; border-radius: 16px; text-align: left; cursor: pointer; background: var(--prp-carte); border: 1px solid var(--prp-filet); }
.prp-cas-c:hover { border-color: color-mix(in srgb, var(--prp-marque) 55%, transparent); }
.prp-cas-c b { font-size: 16px; line-height: 1.35; }
.prp-cas-c.is-verrou b { color: var(--prp-tx2); }
.prp-tete-ecran .prp-fiche-meta { margin-bottom: 10px; }
.prp-tete-ecran .prp-texte { margin-top: 12px; }
.prp-donnees { padding: 14px; border-radius: 16px; background: var(--prp-carte); border: 1px solid var(--prp-filet); min-width: 0; }
.prp-donnees .prp-sur { margin-bottom: 8px; }
.prp-donnees table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prp-donnees th, .prp-donnees td { padding: 9px 0; border-top: 1px solid var(--prp-filet); vertical-align: top; }
.prp-donnees tr:first-child th, .prp-donnees tr:first-child td { border-top: 0; }
.prp-donnees th { text-align: left; font-weight: 500; color: var(--prp-tx2); padding-right: 12px; }
.prp-donnees td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prp-cas-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prp-cas-e { padding: 16px 14px; border-radius: 16px; background: var(--prp-carte); border: 1px solid var(--prp-filet); display: grid; gap: 12px; min-width: 0; }
.prp-cas-e .prp-etape-t { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--prp-mut); }
.prp-cas-e.is-vu .prp-num { background: var(--prp-marque); color: var(--prp-sur-marque); }
.prp-consigne { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.45; max-width: 60ch; }
.prp-choix { display: grid; gap: 8px; }
.prp-choix-c { display: grid; gap: 6px; }
.prp-choix-c button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 13px; text-align: left; cursor: pointer;
                      font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; background: var(--prp-carte2); border: 1.5px solid var(--prp-filet2); }
.prp-choix-c button:hover:not(:disabled) { border-color: var(--prp-marque); }
.prp-choix-m { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; border: 1.5px solid var(--prp-filet2); }
.prp-choix-c.is-faux button { opacity: .55; cursor: default; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--prp-ko) 70%, transparent); border-style: dashed; }
.prp-choix-c.is-faux .prp-choix-m { color: var(--prp-ko); border-color: var(--prp-ko); }
.prp-choix-x { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--prp-tx);
               background: color-mix(in srgb, var(--prp-ko) 10%, transparent); border-left: 3px solid var(--prp-ko); }
.prp-choix-c.is-bon button { cursor: default; border-color: var(--prp-ok); background: color-mix(in srgb, var(--prp-ok) 14%, transparent); }
.prp-choix-c.is-bon .prp-choix-m { background: var(--prp-ok); border-color: var(--prp-ok); color: #052e1f; }
html[data-theme="light"] .prp-choix-c.is-bon .prp-choix-m { color: #fff; }
.prp-choix-c.is-eteint button { opacity: .45; cursor: default; }
.prp-choix-ok { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--prp-ok); font-variant-numeric: tabular-nums; }
.prp-calcul { padding: 12px 14px; border-radius: 12px; background: var(--prp-carte2); border: 1px solid var(--prp-filet); font-size: 15px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.prp-calcul p { margin: 0 0 .4em; }
.prp-calcul p:last-child { margin: 0; }
.prp-conclusion { padding: 18px 16px; border-radius: 18px; background: color-mix(in srgb, var(--prp-ok) 9%, var(--prp-carte)); border: 1px solid color-mix(in srgb, var(--prp-ok) 32%, transparent); }
.prp-conclusion .prp-sur { color: var(--prp-ok); }

/* ── Demande ── */
.prp-form { display: grid; gap: 14px; }
.prp-champ { display: grid; gap: 6px; font-size: 13.5px; font-weight: 650; color: var(--prp-tx2); }
.prp-champ small { font-weight: 500; color: var(--prp-mut); }
.prp-champ textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.prp-pot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.prp-erreur { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px;
              color: var(--prp-tx); background: color-mix(in srgb, var(--prp-ko) 12%, transparent); border-left: 3px solid var(--prp-ko); }
.prp-erreur svg { margin-top: 3px; color: var(--prp-ko); }
.prp-merci { display: grid; gap: 8px; justify-items: start; }
.prp-merci .prp-tuile-ic { color: var(--prp-ok); background: color-mix(in srgb, var(--prp-ok) 14%, transparent); }
.prp-merci p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 60ch; }

/* ── Pied ── */
.prp-pied { width: 100%; max-width: 760px; margin: 0 auto; padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--prp-filet);
            font-size: 12.5px; color: var(--prp-mut); text-align: center; }
.prp-pied p { margin: 0 0 4px; }

/* ── Écrans plus larges ── */
@media (min-width: 560px) {
    .prp-corps { padding: 22px 24px 36px; gap: 18px; }
    .prp-carte, .prp-offre { padding: 22px 22px 20px; }
    .prp-actions2 { grid-template-columns: 1fr 1fr; }
    .prp-actions2 .prp-tuile { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 6px; align-items: start; }
    .prp-actions2 .prp-tuile .prp-tuile-ic { grid-row: auto; margin-bottom: 4px; }
    .prp-offre-actions { grid-template-columns: auto auto; justify-content: start; }
    .prp-pistes { grid-template-columns: 1fr 1fr; }
    .prp-btn.large { width: auto; min-width: 260px; align-self: flex-start; }
    .prp-carte > .prp-btn.large { display: flex; }
    .prp-btn.reveler { width: auto; }
    .prp-eval-b { grid-template-columns: auto auto; justify-content: start; }
    .prp-btn.eval { min-width: 170px; }
    .prp-etape, .prp-cas-e, .prp-eval, .prp-ecoute { padding: 18px 20px; }
    .prp-hero { padding-top: 28px; }
    .prp-choix { grid-template-columns: 1fr 1fr; }
    .prp-choix-c.is-faux { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
    /* Chrono et boutons d'enregistrement sur une ligne, quand la place le permet (pas dans la colonne étroite des écrans larges). */
    .prp-chrono { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "tx d b"; }
    .prp-chrono.grand { grid-template-columns: 1fr; grid-template-areas: "d"; }
    .prp-chrono-b .prp-btn { flex: 0 0 auto; }
}
@media (max-width: 380px) {
    .prp-demo { max-width: 120px; }
    .prp-bilan b { font-size: 22px; }
}
@media (max-width: 479px) {
    .prp-demo { display: none; }
    .prp-reperes b { font-size: 16px; }
}
@media (max-width: 699px) {
    .prp-ic-pres { display: none; }       /* le mode présentation sert à projeter : bureau et tablette */
    .prp-demo-l { display: none; }
}
@media (prefers-reduced-motion: reduce) { .prp-chrono-j i { transition: none; } .prp-btn:active { transform: none; } }
html[data-motion="reduites"] .prp-chrono-j i { transition: none; }

/* ══ En-tête : QR, présentation ═════════════════════════════════════════════════════════════════════════════════════════════ */
.prp-qr-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 11px; border-radius: 12px; cursor: pointer;
              font-size: 14px; font-weight: 750; letter-spacing: .02em; color: var(--prp-tx);
              background: color-mix(in srgb, var(--prp-marque) 12%, transparent); border: 1px solid color-mix(in srgb, var(--prp-marque) 45%, transparent); }
.prp-qr-btn svg { font-size: 20px; color: var(--prp-marque-tx); }
.prp-qr-btn:hover { background: color-mix(in srgb, var(--prp-marque) 22%, transparent); }
.prp-demo-l { margin-left: .3em; }
.prp-ic-pres.is-on { background: var(--prp-marque); color: var(--prp-sur-marque); }
.prp-ic-pres.is-on:hover { background: var(--prp-marque); color: var(--prp-sur-marque); filter: brightness(1.07); }

/* ══ Panneau QR (plein écran, lu de loin) ═══════════════════════════════════════════════════════════════════════════════════ */
.prp-qr { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain;
          padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
          background: rgba(2, 10, 14, .84); animation: prp-fondu .16s ease-out; }
@supports (backdrop-filter: blur(6px)) { .prp-qr { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } }
html[data-theme="light"] .prp-qr { background: rgba(12, 28, 38, .6); }
.prp-qr-carte { display: grid; justify-items: center; gap: 6px; max-width: 100%; padding: clamp(12px, 2.4vh, 26px) clamp(12px, 2.4vh, 26px) clamp(16px, 2.6vh, 26px);
                border-radius: 22px; background: #fff; color: #0b1a22; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.prp-qr-img { line-height: 0; min-width: 200px; min-height: 200px; display: grid; place-items: center; }
.prp-qr-img svg { display: block; image-rendering: pixelated; }
.prp-qr-t { margin: 8px 0 0; max-width: 28ch; font-size: clamp(18px, 2.7vh, 30px); font-weight: 760; line-height: 1.2; letter-spacing: -.012em; text-align: center; text-wrap: balance; }
.prp-qr-url { margin: 0; font-size: clamp(15px, 2.1vh, 22px); font-weight: 650; color: #006478; letter-spacing: .01em; }
.prp-qr-x { position: fixed; z-index: 61; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 52px; height: 52px; display: grid; place-items: center;
            border-radius: 50%; cursor: pointer; font-size: 24px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); }
.prp-qr-x:hover { background: rgba(255, 255, 255, .22); }
@keyframes prp-fondu { from { opacity: 0; } to { opacity: 1; } }

/* ══ Voix : enregistrer, se réécouter, s'évaluer ════════════════════════════════════════════════════════════════════════════ */
.prp-voix-note, .prp-voix-err { grid-column: 1 / -1; }
.prp-voix-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--prp-mut); }
.prp-voix-note svg { color: var(--prp-ok); }
.prp-btn.stop { background: var(--prp-ko); color: #fff; }
.prp-chrono.is-enr { border-color: color-mix(in srgb, var(--prp-ko) 55%, transparent); background: color-mix(in srgb, var(--prp-ko) 6%, var(--prp-carte)); }
.prp-chrono.is-enr .prp-chrono-v { color: var(--prp-ko); }
.prp-chrono.is-enr .prp-chrono-j i { background: var(--prp-ko); }
.prp-rec { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--prp-ko); }
.prp-rec.attente { color: var(--prp-mut); font-weight: 600; font-size: 14px; }
.prp-chrono.grand .prp-rec { margin-bottom: 4px; font-size: 15px; }
.prp-rec-point { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--prp-ko); animation: prp-pouls 1.2s ease-in-out infinite; }
@keyframes prp-pouls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.prp-vu { --niv: 0; display: inline-flex; align-items: center; gap: 2px; height: 18px; margin-left: 2px; }
.prp-vu i { width: 3px; border-radius: 2px; background: currentColor; height: calc(3px + 15px * var(--niv) * var(--k, 1)); transition: height .08s linear; }
.prp-vu i:nth-child(1), .prp-vu i:nth-child(5) { --k: .5; }
.prp-vu i:nth-child(2), .prp-vu i:nth-child(4) { --k: .8; }
.prp-roue { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: prp-tour .8s linear infinite; }
@keyframes prp-tour { to { transform: rotate(360deg); } }
.prp-attente { display: flex; align-items: center; gap: 8px; }

/* Lecteur maison (js/prepa.js pose data-etat, la barre et la position) */
.prp-lecteur { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0;
               padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--prp-carte2); border: 1px solid var(--prp-filet); }
.prp-lire { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; font-size: 20px;
            background: var(--prp-marque); color: var(--prp-sur-marque); }
.prp-lire:hover { filter: brightness(1.08); }
.prp-lire .prp-ico-pause, .prp-lecteur[data-etat="lecture"] .prp-lire .prp-ico-lire { display: none; }
.prp-lecteur[data-etat="lecture"] .prp-lire .prp-ico-pause { display: block; }
.prp-lecteur-piste { display: flex; align-items: center; height: 44px; cursor: pointer; touch-action: none; min-width: 0; border-radius: 6px; }
.prp-lecteur-fond { display: block; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: var(--prp-filet2); }
.prp-lecteur-fond i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--prp-marque); }
.prp-lecteur-t { font-size: 13px; font-weight: 650; color: var(--prp-tx2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prp-lecteur-t [data-prp-pos]:empty::before { content: "0:00"; }
.prp-lecteur.compact { gap: 10px; padding: 3px 12px 3px 3px; }
.prp-lecteur.compact .prp-lire { width: 44px; height: 44px; font-size: 17px; }

.prp-ecoute { display: grid; gap: 12px; padding: 16px 14px; border-radius: 16px; min-width: 0; background: var(--prp-carte);
              border: 1px solid color-mix(in srgb, var(--prp-marque) 35%, transparent); }
.prp-ecoute-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prp-ecoute-t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; font-weight: 700; }
.prp-ecoute-t svg { color: var(--prp-marque-tx); }
.prp-ecoute-b { display: flex; flex-wrap: wrap; gap: 8px; }
.prp-reperes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.prp-reperes li { min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--prp-carte2); border: 1px solid var(--prp-filet); }
.prp-reperes b { display: block; font-size: 19px; font-weight: 750; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prp-reperes span { display: block; margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--prp-mut); }
.prp-reperes li.depasse b, .prp-reperes li.attention b { color: var(--prp-revoir); }

.prp-aisance { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--prp-filet); }
.prp-aisance-t { margin: 0; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--prp-mut); }
.prp-critere { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.prp-critere-l { display: grid; flex: 1 1 108px; min-width: 0; }
.prp-critere-l b { font-size: 14.5px; font-weight: 650; }
.prp-critere-l small { font-size: 12px; color: var(--prp-mut); font-variant-numeric: tabular-nums; }
.prp-critere-b { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.prp-oui, .prp-pas { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer;
                     font-size: 13.5px; font-weight: 650; color: var(--prp-tx2); background: transparent; border: 1px solid var(--prp-filet2); }
.prp-oui svg { color: var(--prp-ok); }
.prp-oui:hover { border-color: var(--prp-ok); }
.prp-pas:hover { border-color: var(--prp-revoir); }
.prp-oui.is-on { color: var(--prp-tx); background: color-mix(in srgb, var(--prp-ok) 16%, transparent); border-color: var(--prp-ok); }
.prp-pas.is-on { color: var(--prp-tx); background: color-mix(in srgb, var(--prp-revoir) 16%, transparent); border-color: var(--prp-revoir); }

/* Interrupteur « Enregistrer mes réponses » (mode entretien) */
.prp-switch { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 12px 0 14px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
              background: var(--prp-carte2); border: 1px solid var(--prp-filet); }
.prp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.prp-switch-g { position: relative; flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px; background: var(--prp-filet2); transition: background-color .15s; }
.prp-switch-g::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
                       box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.prp-switch input:checked + .prp-switch-g { background: var(--prp-marque); }
.prp-switch input:checked + .prp-switch-g::after { transform: translateX(20px); }
.prp-switch input:focus-visible + .prp-switch-g { outline: 2px solid var(--anneau-focus, var(--prp-marque)); outline-offset: 2px; }
.prp-switch-l { display: grid; gap: 2px; min-width: 0; }
.prp-switch-l b { font-size: 15px; }
.prp-switch-l small { font-size: 12.5px; line-height: 1.4; color: var(--prp-mut); }

.prp-voix-gestion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--prp-filet);
                    font-size: 13px; line-height: 1.45; color: var(--prp-tx2); }
.prp-voix-gestion > svg { color: var(--prp-marque-tx); }
.prp-voix-gestion > span { flex: 1 1 200px; min-width: 0; }

/* Bilan et dernière séance : une réponse = sa ligne et son lecteur */
.prp-bilan-i { display: grid; gap: 6px; min-width: 0; }
.prp-bilan-q { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.prp-etroit { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 760px; margin: 0 auto; min-width: 0; }

/* ══ Liste d'une piste : recherche et filtres ═══════════════════════════════════════════════════════════════════════════════ */
.prp-outils { display: grid; gap: 8px; min-width: 0; }
.prp-cherche { position: relative; display: flex; align-items: center; min-width: 0; }
.prp-cherche > svg { position: absolute; left: 14px; font-size: 18px; color: var(--prp-mut); pointer-events: none; }
.prp-cherche input { width: 100%; min-height: 48px; padding: 10px 46px 10px 42px; border-radius: 14px; border: 1px solid var(--prp-filet2); background: var(--prp-carte);
                     color: var(--prp-tx); font: inherit; font-size: 16px; color-scheme: dark; -webkit-appearance: none; appearance: none; }
.prp-cherche input::placeholder { color: var(--prp-mut); opacity: .85; }
.prp-cherche input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.prp-cherche input:focus { outline: none; border-color: var(--prp-marque); box-shadow: 0 0 0 3px color-mix(in srgb, var(--prp-marque) 25%, transparent); }
html[data-theme="light"] .prp-cherche input { background: #fff; color-scheme: light; }
.prp-cherche-x { position: absolute; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: var(--prp-mut); cursor: pointer; }
.prp-cherche-x:hover { color: var(--prp-tx); }
.prp-filtre { display: inline-flex; align-items: center; gap: 6px; }
.prp-filtre small { font-size: 12px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.prp-niv-m { display: inline-flex; align-items: center; gap: 2px; }
.prp-niv-m i { width: 3px; height: 10px; border-radius: 1px; background: currentColor; opacity: .28; }
.prp-niv-m.n1 i:nth-child(-n+1), .prp-niv-m.n2 i:nth-child(-n+2), .prp-niv-m.n3 i:nth-child(-n+3) { opacity: 1; }
.prp-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 13.5px; color: var(--prp-mut); font-variant-numeric: tabular-nums; }

/* Écrans étroits : les colonnes des écrans larges s'effacent, leurs enfants suivent le flux de la page. */
.prp-accueil, .prp-col, .prp-cas, .prp-cas-g, .prp-cas-d { display: contents; }
.prp-fiche-g, .prp-fiche-d { display: contents; }

/* ══ Grand écran (Surface Pro, portable : ≥ 1100 px) : deux colonnes là où c'est utile ═════════════════════════════════════════ */
@media (min-width: 1100px) {
    .prp-barre-in, .prp-corps, .prp-pied { max-width: 1280px; }
    .prp-barre-in { padding: 6px 20px 6px 28px; }
    .prp-corps { padding: 26px 32px 44px; gap: 22px; }
    .prp-corps.e-demande { max-width: 820px; }
    .prp-hero { padding: 26px 2px 2px; }
    .prp-hero .prp-promesse { max-width: 64ch; }

    .prp-accueil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
    .prp-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

    .prp-fiche.duo, .prp-cas.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
    .prp-fiche.duo > .prp-fiche-g, .prp-cas.duo > .prp-cas-g {
        position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
        display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 2px 6px 2px 2px; margin: -2px -6px -2px -2px; }
    .prp-fiche.duo > .prp-fiche-d, .prp-cas.duo > .prp-cas-d { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
    .prp-fiche.solo { width: 100%; max-width: 820px; margin: 0 auto; }
    .prp-fiche.solo > .prp-fiche-g { display: flex; flex-direction: column; gap: 16px; }
    .prp-corps.e-entretien > .prp-fil, .prp-corps.e-entretien > .prp-progres { width: 100%; max-width: 1216px; }
    .prp-fiche-g .prp-chrono:not(.grand) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tx d" "b b"; }
    .prp-fiche-g .prp-chrono:not(.grand) .prp-chrono-b .prp-btn { flex: 1 1 auto; }
    .prp-fiche-g .prp-question { max-width: none; font-size: clamp(24px, 2.2vw, 31px); }
    .prp-cas-g .prp-h1 { font-size: clamp(26px, 2.4vw, 34px); }

    .prp-outils { grid-template-columns: minmax(240px, 1fr) auto auto; align-items: center; gap: 10px 14px; }
    .prp-outils .prp-filtres { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
    .prp-fiches { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
    .prp-fiches > li { display: grid; }
    .prp-fiches .prp-ligne { align-content: space-between; min-height: 112px; padding: 14px 16px; }
    .prp-cas-l { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
    .prp-cas-c { align-content: space-between; min-height: 150px; }
    .prp-bilan-l.grille { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
    .prp-bilan-l.grille .prp-bilan-i { align-content: start; }
}

/* ══ Mode présentation : projeter une fiche ou un cas (bouton de l'en-tête, touche P) ══════════════════════════════════════════ */
.prp.is-presentation { font-size: 17px; }
.prp.is-presentation :is(.prp-pied, .prp-demo, .prp-ic-theme, .prp-aide, .prp-eval, .prp-caslie, .prp-fil, .prp-accueil .prp-offre, .prp-offre-note, .prp-voix-gestion, .prp-resultat) { display: none !important; }
.prp.is-presentation .prp-h1 { font-size: clamp(32px, 3.6vw, 54px); }
.prp.is-presentation .prp-promesse { font-size: 19px; }
.prp.is-presentation .prp-question, .prp.is-presentation .prp-fiche-g .prp-question { font-size: clamp(28px, 2.7vw, 42px); line-height: 1.18; max-width: 30ch; }
.prp.is-presentation .prp-tag, .prp.is-presentation .prp-niv, .prp.is-presentation .prp-etat { font-size: 14px; min-height: 28px; }
.prp.is-presentation .prp-etape-t { font-size: 19px; }
.prp.is-presentation .prp-structure li { font-size: 19.5px; padding: 12px 14px 12px 48px; }
.prp.is-presentation .prp-structure li::before { top: 14px; width: 24px; height: 24px; font-size: 13px; }
.prp.is-presentation .prp-texte { font-size: 20.5px; line-height: 1.6; max-width: 60ch; }
.prp.is-presentation :is(.prp-pieges li, .prp-relance-q) { font-size: 19px; }
.prp.is-presentation .prp-attendu { font-size: 18px; }
.prp.is-presentation .prp-chrono-v { font-size: 36px; }
.prp.is-presentation .prp-chrono.grand .prp-chrono-v { font-size: 76px; }
.prp.is-presentation .prp-consigne { font-size: 23px; }
.prp.is-presentation .prp-donnees table { font-size: 19px; }
.prp.is-presentation .prp-choix-c button { min-height: 62px; font-size: 20px; }
.prp.is-presentation .prp-calcul { font-size: 18.5px; }
.prp.is-presentation .prp-ligne-q { font-size: 17px; }
.prp.is-presentation .prp-cas-c b { font-size: 18px; }

@media (prefers-reduced-motion: reduce) { .prp-rec-point, .prp-roue { animation-duration: 2.4s; } .prp-qr { animation: none; } .prp-vu i { transition: none; } }
html[data-motion="reduites"] .prp-rec-point { animation: none; }

/* ══ Parcours (28/10/2026, nuit) : premier lancement, séance espacée, recherche, éclair, entretien enrichi, progression ══════════ */

/* Entrée d'écran : un fondu court (opacité seule : aucun bloc conteneur créé pour les éléments fixes ou collants). */
.prp-corps { animation: prp-entree .2s ease-out both; }
@keyframes prp-entree { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .prp-corps { animation: none; } }
html[data-motion="reduites"] .prp-corps { animation: none; }

.prp-hero.compact { padding-top: 10px; }
.prp-hero.compact .prp-h1 { font-size: clamp(24px, 6.4vw, 32px); }
.prp-hero.compact .prp-compte { margin-top: 6px; }
.prp-h3 { margin: 16px 0 8px; font-size: 13px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--prp-mut); }
.prp-num svg { font-size: 15px; }
.prp-date small { font-weight: 500; color: var(--prp-mut); }
.prp-masque { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Rubriques : barre basse (téléphone, tablette), onglets de l'en-tête (grand écran) */
.prp-nav { display: flex; }
.prp-nav.haut { display: none; }
.prp-nav.bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; justify-content: space-around; gap: 2px;
               padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
               background: color-mix(in srgb, var(--prp-fond) 94%, transparent); border-top: 1px solid var(--prp-filet);
               box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); }
@supports (backdrop-filter: blur(8px)) { .prp-nav.bas { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
html[data-theme="light"] .prp-nav.bas { box-shadow: 0 -6px 18px rgba(30, 41, 59, .07); }
.prp-nav-b { flex: 1 1 0; min-width: 0; max-width: 120px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
             padding: 4px 2px; border: 0; border-radius: 12px; background: none; cursor: pointer; color: var(--prp-mut); font-size: 11.5px; font-weight: 650; line-height: 1.1; }
.prp-nav-b svg { font-size: 21px; }
.prp-nav-b span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; padding: 1px 2px 0; }   /* l'accent de « É » n'est pas rogné */
.prp-nav-b:hover { color: var(--prp-tx); background: var(--prp-carte2); }
.prp-nav-b.is-on { color: var(--prp-marque-tx); }
.prp-nav-b.is-on svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--prp-marque) 45%, transparent)); }
.prp.avec-nav .prp-pied { padding-bottom: calc(22px + 64px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1100px) {
    .prp-nav.haut { display: flex; gap: 2px; }
    .prp-nav.bas { display: none; }
    .prp.avec-nav .prp-pied { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
    .prp-nav.haut .prp-nav-b { flex: 0 0 auto; flex-direction: row; gap: 7px; max-width: none; min-height: 44px; padding: 0 12px; font-size: 14px; border-radius: 11px; }
    .prp-nav.haut .prp-nav-b svg { font-size: 17px; }
    .prp-nav.haut .prp-nav-b.is-on { background: color-mix(in srgb, var(--prp-marque) 14%, transparent); color: var(--prp-tx); }
    .prp-nav.haut .prp-nav-b.is-on svg { color: var(--prp-marque-tx); filter: none; }
}
@media (min-width: 1100px) and (max-width: 1359px) { .prp-demo-l { display: none; } }

/* « À revoir aujourd'hui (N) » : en tête de l'accueil et de la progression */
.prp-due { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px;
           border-radius: 16px; text-align: left; cursor: pointer; color: var(--prp-tx);
           background: color-mix(in srgb, var(--prp-revoir) 11%, var(--prp-carte)); border: 1px solid color-mix(in srgb, var(--prp-revoir) 45%, transparent); }
.prp-due:hover { border-color: var(--prp-revoir); }
.prp-due-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px;
              color: var(--prp-revoir); background: color-mix(in srgb, var(--prp-revoir) 16%, transparent); }
.prp-due-tx { display: grid; gap: 2px; min-width: 0; }
.prp-due-tx b { font-size: 16px; }
.prp-due-tx small { font-size: 12.5px; line-height: 1.4; color: var(--prp-tx2); }
.prp-due > svg { font-size: 18px; color: var(--prp-revoir); }
.prp-plan-chiffres > div.revoir b { color: var(--prp-revoir); }
.prp-seance-plus { margin: -6px 0 12px; }
.prp-actions3 { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 560px) {
    .prp-actions3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    .prp-actions3 .prp-tuile { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 6px; align-items: start; }
    .prp-actions3 .prp-tuile .prp-tuile-ic { grid-row: auto; margin-bottom: 4px; }
}

/* Indicateurs de progression */
.prp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.prp-kpis > div { min-width: 0; padding: 12px; border-radius: 14px; background: var(--prp-carte2); border: 1px solid var(--prp-filet); }
.prp-kpis b { display: flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prp-kpis b svg { font-size: 19px; color: var(--prp-mut); }
.prp-kpis b small { font-size: 14px; font-weight: 650; color: var(--prp-mut); }
.prp-kpis span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--prp-mut); }
.prp-kpis .chaud b svg { color: #f59e0b; }
html[data-theme="light"] .prp-kpis .chaud b svg { color: #c2410c; }
.prp-kpis.compact b { font-size: 21px; }
@media (min-width: 560px) { .prp-kpis:not(.compact) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prp-semaine { display: flex; gap: 6px; margin: -4px 0 4px; }
.prp-jour { flex: 1 1 0; display: grid; justify-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; color: var(--prp-mut); }
.prp-jour i { width: 100%; max-width: 40px; height: 8px; border-radius: 4px; background: var(--prp-filet); }
.prp-jour.fait i { background: var(--prp-marque); }
.prp-jour.auj small { color: var(--prp-tx); }
.prp-faibles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.prp-h3 + .prp-faibles { margin-top: 0; }
.prp-faible { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 12px;
              background: color-mix(in srgb, var(--prp-revoir) 7%, var(--prp-carte2)); border: 1px solid color-mix(in srgb, var(--prp-revoir) 25%, transparent); }
.prp-faible-l { display: grid; gap: 1px; min-width: 0; flex: 1 1 160px; }
.prp-faible-l b { font-size: 14.5px; }
.prp-faible-l small { font-size: 12.5px; color: var(--prp-mut); }
.prp-voir-tout { width: 100%; margin-top: 14px; }
.prp-pistes.larges { grid-template-columns: 1fr; }
@media (min-width: 560px) { .prp-pistes.larges { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.prp-themes-m { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prp-theme-m { display: grid; gap: 7px; width: 100%; min-height: 52px; padding: 10px 12px; border-radius: 12px; text-align: left; cursor: pointer;
               background: var(--prp-carte2); border: 1px solid var(--prp-filet); }
.prp-theme-m:hover { border-color: color-mix(in srgb, var(--prp-marque) 55%, transparent); }
.prp-theme-m-l { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.prp-theme-m-l b { font-size: 14.5px; font-weight: 650; min-width: 0; }
.prp-theme-m-l small { flex: 0 0 auto; font-size: 12.5px; color: var(--prp-mut); font-variant-numeric: tabular-nums; }
.prp-theme-m .prp-barre3 { height: 5px; }

/* Recherche dans toutes les pistes */
.prp-cherche-g { min-width: 0; }
.prp-cherche.grand input { min-height: 52px; border-radius: 16px; font-size: 16px; box-shadow: var(--prp-ombre); }
.prp-resultats { display: grid; gap: 10px; min-width: 0; }
.prp-mark { color: inherit; background: color-mix(in srgb, var(--prp-revoir) 30%, transparent); border-radius: 3px; padding: 0 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
html[data-theme="light"] .prp-mark { background: #fde68a; }
.prp-extrait { display: block; font-size: 13.5px; line-height: 1.5; color: var(--prp-tx2); overflow-wrap: anywhere; }
.prp-extrait.verrou { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--prp-mut); }
.prp-theme-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 14px;
                    background: color-mix(in srgb, var(--prp-marque) 9%, transparent); border: 1px solid color-mix(in srgb, var(--prp-marque) 30%, transparent); }
.prp-liste-eclair { margin-top: 12px; }

/* Premier lancement */
.prp-bienvenue .prp-hero { padding-bottom: 0; }
.prp-depart { display: grid; gap: 6px; }
.prp-depart .prp-h2 { margin-bottom: 4px; }
.prp-etape-q { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 15.5px; font-weight: 700; }
.prp-depart .prp-pastilles { margin-top: 6px; }
.prp-depart .prp-date { margin-top: 4px; }
.prp-btn.prp-demarrer { margin-top: 14px; }
.prp-depart-alt { margin: 6px 0 0; text-align: center; }
@media (min-width: 560px) { .prp-depart-alt { text-align: left; } }

/* Révision éclair : la carte, puis deux gros boutons au pouce */
.prp-eclair { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 760px; margin: 0 auto; min-width: 0;
              min-height: calc(100vh - 56px - 42px - env(safe-area-inset-top, 0px)); min-height: calc(100dvh - 56px - 42px - env(safe-area-inset-top, 0px)); }
.prp-eclair-carte { display: grid; gap: 14px; padding: 20px 16px; border-radius: 20px; background: var(--prp-carte); border: 1px solid var(--prp-filet); box-shadow: var(--prp-ombre); min-width: 0; }
.prp-eclair-carte .prp-question { max-width: none; }
.prp-eclair-carte .prp-aide { margin: 0; }
.prp-eclair-lien { margin: 0; font-size: 14px; }
.prp-eclair-b { position: sticky; bottom: 0; margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
                padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--prp-fond) 30%); }
.prp-eclair-b .prp-btn { min-height: 60px; font-size: 16.5px; border-radius: 16px; }
.prp-eclair-b .prp-btn.large { grid-column: 1 / -1; width: 100%; }
.prp-eclair-b .prp-btn.eval { border-width: 1.5px; }
.prp-eclair-b .prp-btn.eval.ok { border-color: var(--prp-ok); background: color-mix(in srgb, var(--prp-ok) 12%, var(--prp-carte)); }
.prp-eclair-b .prp-btn.eval.revoir { border-color: var(--prp-revoir); background: color-mix(in srgb, var(--prp-revoir) 12%, var(--prp-carte)); }
.prp-progres i.fait.revoir { background: var(--prp-revoir); }
.prp-bilan.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .prp-eclair-b { position: static; background: none; grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: start; }
                            .prp-eclair-b .prp-btn.large { grid-column: auto; width: auto; } .prp-eclair { min-height: 0; } }

/* Raccourcis clavier : discrets, seulement avec une souris et un vrai clavier sur un écran large */
.prp-raccourcis { display: none; margin: 10px 0 0; font-size: 12px; color: var(--prp-mut); }
.prp kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; border-radius: 6px; font: 650 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           text-align: center; color: var(--prp-tx2); background: var(--prp-carte2); border: 1px solid var(--prp-filet2); border-bottom-width: 2px; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .prp-raccourcis { display: block; } }

/* Mode entretien : formats, niveau, relance */
.prp-formats-g { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: var(--prp-tx2); }
.prp-carte > .prp-formats-g:first-of-type { margin-top: 6px; }
.prp-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prp-format { display: grid; gap: 2px; align-content: center; min-height: 60px; padding: 8px 10px; border-radius: 13px; text-align: left; cursor: pointer;
              background: var(--prp-carte2); border: 1.5px solid var(--prp-filet2); min-width: 0; }
.prp-format b { font-size: 14px; line-height: 1.25; }
.prp-format small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--prp-mut); }
.prp-format:hover { border-color: color-mix(in srgb, var(--prp-marque) 60%, transparent); }
.prp-format.is-on { border-color: var(--prp-marque); background: color-mix(in srgb, var(--prp-marque) 15%, transparent);
                    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prp-marque) 55%, transparent); }
.prp-format.is-verrou b { color: var(--prp-tx2); }
.prp-format-pass { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--prp-marque-tx); }
.prp-filtres.plat { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
.prp-verrou-note { display: grid; gap: 4px; margin-top: 14px; padding: 12px 14px; border-radius: 14px;
                   background: color-mix(in srgb, var(--prp-marque) 9%, transparent); border: 1px solid color-mix(in srgb, var(--prp-marque) 35%, transparent); }
.prp-verrou-note p { display: flex; gap: 8px; margin: 0; font-size: 14px; line-height: 1.5; }
.prp-verrou-note p svg { margin-top: 3px; color: var(--prp-marque-tx); flex: 0 0 auto; }
.prp-relance-ecran { max-width: 820px; width: 100%; margin: 0 auto; }
.prp-relance-ecran .prp-fiche-g { display: flex; flex-direction: column; gap: 14px; }
.prp-relance-rappel { margin: 0; font-size: 14px; line-height: 1.45; color: var(--prp-mut); }
.prp-relance-rappel .prp-sur { color: var(--prp-mut); }
.prp-bulle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border-radius: 18px 18px 18px 6px;
             background: color-mix(in srgb, var(--prp-marque) 10%, var(--prp-carte)); border: 1px solid color-mix(in srgb, var(--prp-marque) 40%, transparent); }
.prp-bulle-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: var(--prp-sur-marque); background: var(--prp-marque); }
.prp-bulle-tx { min-width: 0; }
.prp-bulle .prp-question { font-size: clamp(20px, 5.4vw, 27px); max-width: none; }
.prp-relance-passer { margin: 0; text-align: center; }
@media (min-width: 560px) { .prp-relance-passer { text-align: left; } }

/* Bilan par thème */
.prp-tb-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prp-tb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px 8px 12px; border-radius: 12px; background: var(--prp-carte2); }
.prp-tb-l1 { display: grid; flex: 1 1 150px; min-width: 0; }
.prp-tb-l1 b { font-size: 14.5px; }
.prp-tb-l1 small { font-size: 12px; color: var(--prp-mut); }
.prp-tb-n { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prp-tb-n.ok { color: var(--prp-ok); }
.prp-tb-n.revoir { color: var(--prp-revoir); }

.prp-eval-note { display: flex; align-items: flex-start; gap: 6px; }
.prp-eval-note svg { margin-top: 3px; flex: 0 0 auto; }

/* Ce que contient le pass */
.prp-contenu { margin: 12px 0 0; border-top: 1px solid var(--prp-filet); }
.prp-contenu summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
                       font-size: 14.5px; font-weight: 700; color: var(--prp-tx); }
.prp-contenu summary::-webkit-details-marker { display: none; }
.prp-contenu summary svg { color: var(--prp-mut); transition: transform .15s; }
.prp-contenu[open] summary svg { transform: rotate(180deg); }
.prp-contenu-in { display: grid; gap: 10px; padding-bottom: 6px; }
.prp-contenu-t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.prp-contenu-t th, .prp-contenu-t td { padding: 7px 0; border-top: 1px solid var(--prp-filet); text-align: right; vertical-align: baseline; }
.prp-contenu-t thead th { border-top: 0; font-size: 12px; font-weight: 650; color: var(--prp-mut); }
.prp-contenu-t th:first-child { text-align: left; padding-right: 10px; }
.prp-contenu-t tbody th { font-weight: 600; color: var(--prp-tx2); }
.prp-contenu-t td b { font-size: 15px; }
.prp-contenu-t td small { display: block; font-size: 11.5px; color: var(--prp-mut); }
.prp-contenu-t tfoot th, .prp-contenu-t tfoot td { border-top: 1.5px solid var(--prp-filet2); font-weight: 750; }
.prp-contenu-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.prp-contenu-l li { display: flex; gap: 8px; }
.prp-contenu-l svg { margin-top: 3px; flex: 0 0 auto; color: var(--prp-ok); }
.prp-contenu-in .prp-aide { margin: 0; }
@media (prefers-reduced-motion: reduce) { .prp-contenu summary svg { transition: none; } }

/* Présentation : la navigation et les raccourcis s'effacent */
.prp.is-presentation :is(.prp-nav, .prp-raccourcis, .prp-cherche-g, .prp-due) { display: none !important; }

/* ══ Bannière du parcours de l'Académie (Shared/AcademieFenetre.razor) ══════════════════════════════════════════════════════════ */
.aca-prepa { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: inherit;
             font: inherit; text-align: left; cursor: pointer;
             border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent);
             background: linear-gradient(110deg, color-mix(in srgb, var(--brand, #00B1CF) 13%, transparent), color-mix(in srgb, #7c6cf0 9%, transparent)); }
.aca-prepa:hover { border-color: var(--brand, #00B1CF); }
.aca-prepa:focus-visible { outline: 2px solid var(--anneau-focus, var(--brand, #00B1CF)); outline-offset: 2px; }
.aca-prepa-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px;
                background: color-mix(in srgb, var(--brand, #00B1CF) 18%, transparent); color: var(--brand-strong, var(--brand, #00B1CF)); }
.aca-prepa-tx { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.aca-prepa-tx b { font-size: 14px; line-height: 1.3; }
.aca-prepa-tx span { font-size: 12.5px; line-height: 1.45; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .aca-prepa-tx span { color: #24343e; }
.aca-prepa-go { flex: 0 0 auto; color: var(--brand-strong, var(--brand, #00B1CF)); font-size: 18px; }
html[data-theme="light"] .aca-prepa-ic, html[data-theme="light"] .aca-prepa-go { color: var(--brand-strong, #006f85); }

/* ══ Pastille « Revenir à… » (Shared/PastilleRetour.razor, Services/RetourParcours.cs ; 28/10/2026, soir) ════════════════════════
   La prépa (« Voir dans Streamiku ») et les leçons de l'Académie (« Dans Streamiku ») ouvrent une vue ; la pastille y ramène.
   En bas à gauche (le coin droit est aux boutons flottants), au-dessus des vues et des volets (z-index 10092 : sous l'Académie,
   la palette et les modales), zone sûre du téléphone, cibles de 44 px ; le titre long s'abrège, le titre complet est en infobulle. */
.rtp { position: fixed; z-index: 10092; left: max(12px, env(safe-area-inset-left)); bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
       display: flex; align-items: stretch; max-width: min(540px, calc(100vw - 96px)); border-radius: 999px; overflow: hidden;
       background: color-mix(in srgb, #07151c 93%, transparent); color: #eafdff;
       border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 60%, transparent);
       box-shadow: 0 12px 30px rgba(0, 0, 0, .38), 0 0 0 4px color-mix(in srgb, var(--brand, #00B1CF) 15%, transparent);
       font-family: var(--app-font, var(--font-family, Inter, ui-sans-serif, system-ui, sans-serif)); font-size: 14px; line-height: 1.25;
       -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: rtp-in .22s ease-out; }
.rtp button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rtp .rtp-go { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 8px 0 15px; text-align: left; }
.rtp .rtp-go > svg { flex: 0 0 auto; font-size: 18px; color: var(--brand-strong, var(--brand, #3fd0e8)); }
.rtp-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtp-tx b { font-weight: 650; }
.rtp-d { color: #b9c9d2; }
.rtp .rtp-x { flex: 0 0 auto; width: 46px; min-height: 46px; display: grid; place-items: center; color: #a3b6c1; border-left: 1px solid rgba(255, 255, 255, .12); }
.rtp .rtp-x svg { font-size: 16px; }
.rtp .rtp-go:hover, .rtp .rtp-x:hover { background: rgba(255, 255, 255, .08); }
.rtp .rtp-x:hover { color: #eafdff; }
.rtp button:focus-visible { outline: 2px solid var(--anneau-focus, var(--brand, #00B1CF)); outline-offset: -3px; }
html[data-theme="light"] .rtp { background: color-mix(in srgb, #ffffff 96%, transparent); color: #10212b;
       box-shadow: 0 12px 28px rgba(30, 41, 59, .2), 0 0 0 4px color-mix(in srgb, var(--brand, #00B1CF) 13%, transparent); }
html[data-theme="light"] .rtp .rtp-go > svg { color: var(--brand-strong, #006f85); }
html[data-theme="light"] .rtp-d { color: #4b5d68; }
html[data-theme="light"] .rtp .rtp-x { color: #4b5d68; border-left-color: rgba(15, 38, 56, .13); }
html[data-theme="light"] .rtp .rtp-go:hover, html[data-theme="light"] .rtp .rtp-x:hover { background: rgba(15, 38, 56, .06); }
html[data-theme="light"] .rtp .rtp-x:hover { color: #10212b; }
@keyframes rtp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rtp { animation: none; } }
html[data-motion="reduites"] .rtp { animation: none; }
@media print { .rtp { display: none; } }