/* ══ PASS PRÉPA NOMINATIF (2026-10-29), préfixes pcp- (prépa) et apq- (console /admin/prepa) ════════════════════════════════════
   • pcp- : l'écran « Mon pass » (Shared/PrepaCompteVue.razor) et les points d'accroche de Shared/PrepaFenetre.razor (« Pass de … »
     dans l'en-tête, ligne « Mon pass » des réglages, bandeau parrain, « J'ai déjà un pass »). Toujours DANS .prp : jetons --prp-*
     de css/prepa.css (sombre par défaut, clair par html[data-theme="light"]). Cibles de 44 px, aucune largeur fixe au-delà de l'écran.
   • apq- : la console des pass (Pages/AdminPrepa.razor), jetons globaux du thème comme /admin/suivi, liste en cartes (pas de tableau
     large : rien ne déborde sur téléphone).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── En-tête : « Pass de <Nom> » ── */
.pcp-entete { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 12px;
              border-radius: 999px; border: 1px solid color-mix(in srgb, var(--prp-marque) 45%, transparent); cursor: pointer;
              background: color-mix(in srgb, var(--prp-marque) 12%, transparent); color: var(--prp-marque-tx); font-size: 13px; font-weight: 650;
              max-width: 220px; flex: 0 1 auto; }
.pcp-entete:hover { background: color-mix(in srgb, var(--prp-marque) 20%, transparent); }
.pcp-entete.is-ferme { color: var(--prp-revoir); border-color: color-mix(in srgb, var(--prp-revoir) 45%, transparent); background: color-mix(in srgb, var(--prp-revoir) 10%, transparent); }
.pcp-entete-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 640px) { .pcp-entete { padding: 0; width: 44px; } .pcp-entete-l { display: none; } }
/* Téléphone étroit : la clé du pass prend la place du bouton QR (le partage passe par le lien de parrainage de « Mon pass ») ;
   sans cela la marque « Prépa entretiens » passe sous les boutons. */
@media (max-width: 440px) { .prp-barre-in:has(.pcp-entete) .prp-qr-btn { display: none; } }

/* ── Carte des réglages : ligne « Mon pass » ── */
.pcp-reglage { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 14px; padding: 8px 10px 8px 8px; text-align: left;
               border: 1px solid var(--prp-filet); border-radius: 14px; background: var(--prp-carte2); cursor: pointer; color: var(--prp-tx); }
.pcp-reglage:hover { border-color: color-mix(in srgb, var(--prp-marque) 55%, transparent); }
.pcp-reglage > svg { color: var(--prp-mut); }
.pcp-reglage-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; flex: 0 0 auto;
                  background: color-mix(in srgb, var(--prp-marque) 16%, transparent); color: var(--prp-marque-tx); }
.pcp-reglage-tx { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pcp-reglage-tx b { font-size: 14.5px; }
.pcp-reglage-tx small { font-size: 12.5px; color: var(--prp-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Bandeau parrain ── */
.pcp-bandeau { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45;
               color: var(--prp-tx); background: color-mix(in srgb, var(--prp-ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--prp-ok) 35%, transparent); }
.pcp-bandeau > svg { margin-top: 3px; color: var(--prp-ok); }
.pcp-bandeau b { color: var(--prp-ok); white-space: nowrap; }
.pcp-bandeau-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--prp-tx); }
.pcp-bandeau-btn .pcp-bandeau { flex: 1 1 auto; margin: 0; }
.pcp-bandeau-btn > svg { flex: 0 0 auto; color: var(--prp-ok); }
.pcp-barre { margin-left: 10px; font-size: 16px; font-weight: 600; color: var(--prp-mut); letter-spacing: 0; }
.pcp-deja { margin: 12px 0 0; text-align: center; font-size: 14px; }

/* ── Écran « Mon pass » ── */
.prp-corps.e-compte { gap: 16px; }
@media (min-width: 1100px) { .prp-corps.e-compte { max-width: 820px; } }
.pcp-texte { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--prp-tx2); max-width: 64ch; }
.pcp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pcp-rond { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; margin-bottom: 8px;
            background: color-mix(in srgb, var(--prp-marque) 16%, transparent); color: var(--prp-marque-tx); }
.pcp-envoye .prp-h2 { overflow-wrap: anywhere; }
.pcp-sans-pass { margin: 0; text-align: center; font-size: 14px; color: var(--prp-tx2); }
.pcp-etape { display: flex; align-items: center; gap: 10px; margin: 4px 0 -4px; font-size: 15px; font-weight: 700; }
.pcp-email { overflow-wrap: anywhere; }

.pcp-avis { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45;
            color: var(--prp-tx); background: color-mix(in srgb, var(--prp-marque) 10%, transparent); border-left: 3px solid var(--prp-marque); }
.pcp-avis > svg { margin-top: 3px; color: var(--prp-marque-tx); flex: 0 0 auto; }
.pcp-avis > span { flex: 1 1 auto; min-width: 0; }
.pcp-avis.ok { background: color-mix(in srgb, var(--prp-ok) 11%, transparent); border-left-color: var(--prp-ok); }
.pcp-avis.ok > svg { color: var(--prp-ok); }
.pcp-x { flex: 0 0 auto; width: 44px; height: 44px; margin: -10px -10px -10px 0; border: 0; border-radius: 10px; background: none; color: var(--prp-mut); cursor: pointer; display: grid; place-items: center; }
.pcp-x:hover { color: var(--prp-tx); }

.pcp-probleme { border-color: color-mix(in srgb, var(--prp-revoir) 45%, transparent); background: color-mix(in srgb, var(--prp-revoir) 8%, var(--prp-carte)); }
.pcp-probleme .prp-num { background: color-mix(in srgb, var(--prp-revoir) 22%, transparent); color: var(--prp-revoir); }
.pcp-probleme .prp-btn { margin-top: 14px; }
.pcp-probleme .prp-erreur { margin-top: 10px; }

.pcp-dl { display: grid; gap: 0; margin: 10px 0 0; }
.pcp-dl > div { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--prp-filet); min-height: 48px; }
.pcp-dl > div:first-child { border-top: 0; }
.pcp-dl dt { font-size: 13px; color: var(--prp-mut); }
.pcp-dl dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; font-weight: 600; min-width: 0; }
.pcp-valeur { min-width: 0; overflow-wrap: anywhere; }
.pcp-modifier { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 10px; margin: -8px 0; border: 0; border-radius: 10px; background: none;
                color: var(--prp-marque-tx); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.pcp-modifier:hover { background: var(--prp-carte2); }
.pcp-nom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.pcp-nom .prp-champ { flex: 1 1 180px; min-width: 0; }
.pcp-nom .prp-champ input { width: 100%; }
@media (max-width: 420px) { .pcp-dl > div { grid-template-columns: minmax(0, 1fr); } }

.pcp-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pcp-app { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--prp-filet); background: var(--prp-carte2); }
.pcp-app.is-courant { border-color: color-mix(in srgb, var(--prp-marque) 45%, transparent); }
.pcp-app-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto;
              background: color-mix(in srgb, var(--prp-marque) 14%, transparent); color: var(--prp-marque-tx); }
.pcp-app-tx { display: grid; gap: 2px; flex: 1 1 160px; min-width: 0; }
.pcp-app-tx b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14.5px; }
.pcp-app-tx small { font-size: 12.5px; color: var(--prp-mut); }
.pcp-app .prp-btn { flex: 0 0 auto; }
@media (max-width: 480px) { .pcp-app .prp-btn { flex: 1 1 100%; } }

.pcp-lien { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pcp-lien input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--prp-filet2);
                  background: var(--prp-carte2); color: var(--prp-tx); font: inherit; font-size: 13.5px; }
html[data-theme="light"] .pcp-lien input { background: #fff; color-scheme: light; }
.pcp-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pcp-chiffres > div { display: grid; gap: 0; padding: 10px 12px; border-radius: 12px; background: var(--prp-carte2); border: 1px solid var(--prp-filet); }
.pcp-chiffres b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pcp-chiffres span { font-size: 12.5px; color: var(--prp-mut); }

/* ── Achat ── */
.pcp-achat-prix .prp-offre-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pcp-case { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; cursor: pointer; font-size: 14.5px; line-height: 1.45; font-weight: 600;
            border: 1px solid var(--prp-filet2); background: var(--prp-carte2); color: var(--prp-tx); }
.pcp-case input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--prp-marque); cursor: pointer; }
.pcp-case:has(input:checked) { border-color: var(--prp-marque); background: color-mix(in srgb, var(--prp-marque) 10%, var(--prp-carte2)); }
.pcp-payer .prp-aide { margin-top: 0; }
.pcp-payer .pcp-avis, .pcp-payer .prp-erreur { margin: 0; }
.pcp-merci .pcp-actions { margin-top: 6px; }

/* ══ Console /admin/prepa (apq-) ════════════════════════════════════════════════════════════════════════════════════════════ */
.apq-root { max-width: 1100px; margin: 0 auto; padding: 22px 18px 90px; color: var(--tx1, #e8eef2); display: grid; gap: 16px;
            --apq-mut: #8c9aa7; --apq-carte: var(--bg1, #121a22); --apq-bord: var(--bd1, #243240); --apq-creux: var(--bg2, #0c1319);
            --apq-marque: var(--brand, #00B1CF); --apq-ok: #3ccf8e; --apq-ko: #f0877a; --apq-att: #f4b740; }
html[data-theme="light"] .apq-root { --apq-mut: #47585f; --apq-ok: #046048; --apq-ko: #b01c1c; --apq-att: #8a5300;
            --apq-marque: color-mix(in srgb, var(--brand, #00B1CF) 78%, #04202a); }
.apq-root, .apq-root * { box-sizing: border-box; }
.apq-sur { font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--apq-marque); margin: 0; }
.apq-porte { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.apq-porte-carte { width: min(360px, 100%); text-align: center; background: var(--apq-carte); border: 1px solid var(--apq-bord); border-radius: 16px; padding: 28px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.35); display: grid; gap: 10px; }
.apq-porte-carte h2 { margin: 0; font-size: 18px; }
.apq-porte-carte p { color: var(--apq-mut); font-size: 13px; margin: 0; }
.apq-porte-ic { font-size: 30px; }
.apq-in { width: 100%; min-height: 44px; background: var(--apq-creux); border: 1px solid var(--apq-bord); color: var(--tx1, #e8eef2); border-radius: 9px; padding: 8px 10px; font-size: 14px; font-family: inherit; }
.apq-in:focus { outline: none; border-color: var(--apq-marque); box-shadow: 0 0 0 3px color-mix(in srgb, var(--apq-marque) 22%, transparent); }
html[data-theme="light"] .apq-in { background: #fff; color-scheme: light; }
.apq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 10px; padding: 0 14px; font-size: 13.5px; font-weight: 600;
           cursor: pointer; border: 1px solid transparent; text-decoration: none; font-family: inherit; white-space: nowrap; }
.apq-go { background: var(--brand, #00B1CF); color: #04222a; font-weight: 700; }
.apq-go:hover:not(:disabled) { filter: brightness(1.07); }
.apq-btn:disabled { opacity: .5; cursor: default; }
.apq-ghost { background: transparent; border-color: var(--apq-bord); color: var(--tx2, #c2cdd6); }
.apq-ghost:hover:not(:disabled) { border-color: var(--apq-marque); color: var(--tx1, #e8eef2); }
.apq-danger { background: color-mix(in srgb, var(--apq-ko) 16%, transparent); border-color: var(--apq-ko); color: var(--apq-ko); font-weight: 700; }
.apq-err { color: var(--apq-ko); font-size: 13px; }
.apq-ok { color: var(--apq-ok); font-size: 13px; }
.apq-bandeau { padding: 10px 12px; border-radius: 10px; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }

.apq-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.apq-tete h1 { font-size: 22px; margin: 2px 0 0; font-weight: 700; }
.apq-sous { color: var(--apq-mut); font-size: 12.5px; margin-top: 3px; }
.apq-outils { display: flex; flex-wrap: wrap; gap: 8px; }

.apq-carte { background: var(--apq-carte); border: 1px solid var(--apq-bord); border-radius: 14px; padding: 16px; min-width: 0; }
.apq-carte h2 { margin: 0; font-size: 15px; font-weight: 700; }
.apq-carte-tete { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.apq-note { color: var(--apq-mut); font-size: 12.5px; margin: 3px 0 0; max-width: 72ch; }
.apq-filtre { width: 300px; max-width: 100%; }
.apq-vide { color: var(--apq-mut); font-size: 13px; padding: 22px 0; text-align: center; }

.apq-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; align-items: end; margin-top: 12px; }
.apq-champ { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--tx2, #c2cdd6); min-width: 0; }
.apq-champ small { font-weight: 500; color: var(--apq-mut); }
.apq-large { grid-column: span 2; }
.apq-form-ecole { padding-top: 14px; border-top: 1px solid var(--apq-bord); }
@media (max-width: 560px) { .apq-large { grid-column: auto; } .apq-form { grid-template-columns: minmax(0, 1fr); } }

.apq-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.apq-ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 11px 12px;
             border: 1px solid var(--apq-bord); border-radius: 12px; background: var(--apq-creux); font-size: 13px; }
.apq-ligne.is-fini { opacity: .72; }
.apq-qui { display: grid; gap: 2px; min-width: 0; }
.apq-qui b { overflow-wrap: anywhere; font-size: 13.5px; }
.apq-qui small { color: var(--apq-mut); overflow-wrap: anywhere; }
.apq-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; color: var(--tx2, #c2cdd6); overflow-wrap: anywhere; }
.apq-meta svg { vertical-align: -2px; }
.apq-mut { color: var(--apq-mut); }
.apq-puce { font-size: 11.5px; font-weight: 650; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--apq-bord); }
.apq-puce.o-stripe { color: var(--apq-ok); border-color: color-mix(in srgb, var(--apq-ok) 45%, transparent); }
.apq-puce.o-admin { color: var(--apq-marque); border-color: color-mix(in srgb, var(--apq-marque) 45%, transparent); }
.apq-puce.o-ecole { color: var(--apq-att); border-color: color-mix(in srgb, var(--apq-att) 45%, transparent); }
.apq-fin { font-weight: 600; color: var(--apq-ok); }
.apq-fin.fini { color: var(--apq-mut); }
.apq-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.apq-pied { color: var(--apq-mut); font-size: 11.5px; text-align: center; margin: 4px 0 0; }
@media (max-width: 800px) {
    .apq-ligne { grid-template-columns: minmax(0, 1fr); }
    .apq-actions { justify-content: stretch; }
    .apq-actions .apq-btn { flex: 1 1 140px; }
}
@media (max-width: 560px) { .apq-root { padding: 16px 12px 70px; } .apq-outils .apq-btn { flex: 1 1 auto; } }