/* ============================================================================
   PRÉ-PUBLICATION — TABLEAU DE BORD CARRIÈRE + CHOIX DE PRIORITÉ EI
   ----------------------------------------------------------------------------
   Identité RCF conservée : panneaux sombres translucides, accent jaune, portrait
   9:16, lisibilité sur fond illustré. Ce qui change est la HIÉRARCHIE — des
   cartes distinctes, des chiffres en avant, moins de texte permanent — pour que
   l'écran se lise comme un tableau de progression et non comme un formulaire.

   Les tokens (--l12-yellow, --l12-glass-soft, --l12-edge-soft, --l12-shadow)
   sont ceux du thème : aucune couleur n'est réinventée ici.
   ========================================================================== */

/* ── 1. CARTE PRINCIPALE · TA CARRIÈRE ───────────────────────────────────── */
.cbd-hero{
  position:relative;border-radius:18px;padding:16px 15px 14px;margin-bottom:11px;
  background:linear-gradient(155deg,rgba(255,197,47,.10),rgba(7,24,39,.90) 58%);
  border:1px solid rgba(255,197,47,.30);box-shadow:var(--l12-shadow);
  backdrop-filter:blur(14px);
}
.cbd-k{
  font-family:var(--disp);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l12-yellow);margin-bottom:5px;
}
.cbd-role{font-family:var(--disp);font-size:25px;line-height:1.06;margin:0 0 3px;color:#fff}
.cbd-lvl{font-size:12px;color:#c7d6e3;margin-bottom:9px}
.cbd-mast{color:var(--l12-yellow)}
/* Le salaire est le chiffre que le joueur cherche : il est le plus gros. */
.cbd-pay{font-family:var(--disp);font-size:30px;line-height:1;color:var(--l12-yellow);margin:2px 0 2px}
.cbd-pay span{font-family:inherit;font-size:12px;color:#9db0c1;letter-spacing:.02em}
.cbd-anc{font-size:11.5px;color:#9db0c1;margin-bottom:11px}

/* Progression : jamais un pourcentage inventé — une barre n'apparaît que
   lorsqu'un critère porte réellement deux nombres. */
.cbd-prog{border-top:1px solid rgba(255,255,255,.09);padding-top:10px;margin-top:2px}
.cbd-prog-t{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#8fa3b5;margin-bottom:5px}
.cbd-prog-q{font-size:12.5px;color:#dfe9f2;margin-bottom:8px;line-height:1.35}
.cbd-prog--ok .cbd-prog-q b{color:#6ee7a8}
.cbd-prog--none .cbd-prog-q{color:#a9bccd}
.cbd-crit{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;
  font-size:11.5px;color:#c2d2e0;margin-bottom:6px}
.cbd-crit b{color:#fff;font-size:12px;white-space:nowrap}
.cbd-crit--nb{grid-template-columns:1fr auto}
.cbd-bar{grid-column:1/-1;display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.cbd-bar u{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--l12-yellow),#ffdf87);text-decoration:none}
.cbd-fiche{
  display:block;width:100%;margin-top:11px;min-height:44px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#dfe9f2;font-size:12.5px;cursor:pointer;
}
.cbd-fiche:hover{background:rgba(255,255,255,.10)}

/* ── 2. CARTE · TON OBJECTIF ─────────────────────────────────────────────── */
.cbd-obj{
  border-radius:16px;padding:14px 14px 12px;margin-bottom:12px;
  background:var(--l12-glass-soft);border:1px solid var(--l12-edge-soft);
  box-shadow:var(--l12-shadow);backdrop-filter:blur(12px);
}
.cbd-obj--ok{border-color:rgba(110,231,168,.38);background:linear-gradient(150deg,rgba(110,231,168,.10),rgba(7,24,39,.86))}
.cbd-obj-n{font-family:var(--disp);font-size:19px;line-height:1.1;color:#fff;margin:2px 0 6px}
.cbd-obj-etat{font-size:12.5px;color:#dfe9f2;margin-bottom:9px}
.cbd-obj--ok .cbd-obj-etat{color:#6ee7a8}
.cbd-obj-d{font-size:11.8px;line-height:1.45;color:#a9bccd;margin:8px 0 2px}
/* §B.2 — « Changer d'objectif » ne doit plus peser plus lourd que l'objectif. */
.cbd-obj-liens{margin-top:10px;font-size:11.5px;color:#8fa3b5}
.cbd-obj-liens a{color:#9db0c1;text-decoration:underline;text-underline-offset:2px}
.cbd-obj-liens a:hover{color:var(--l12-yellow)}

/* ── 3. CARTES D'ACTION ──────────────────────────────────────────────────── */
.cbd-titre{
  font-family:var(--disp);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--l12-yellow);margin:16px 0 8px;
}
.cbd-grille{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cbd-grille--large{grid-template-columns:1fr;margin-top:8px}
.cbd-act{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-height:76px;padding:11px 12px;border-radius:14px;text-align:left;cursor:pointer;
  background:var(--l12-glass-soft);border:1px solid var(--l12-edge-soft);
  box-shadow:var(--l12-shadow);color:#dfe9f2;
  transition:border-color .16s ease,background .16s ease,transform .10s ease;
}
.cbd-act:hover{background:rgba(255,255,255,.07)}
.cbd-act:active{transform:translateY(1px)}
.cbd-act-ic{font-size:17px;line-height:1}
.cbd-act-t{font-family:var(--disp);font-size:13.5px;color:#fff;letter-spacing:.01em}
.cbd-act-e{font-size:11px;color:#8fa3b5;line-height:1.3}
/* Le joueur doit savoir AVANT de cliquer s'il y a quelque chose à voir. */
.cbd-act.on{border-color:rgba(255,197,47,.46);background:linear-gradient(150deg,rgba(255,197,47,.13),rgba(7,24,39,.84))}
.cbd-act.on .cbd-act-e{color:var(--l12-yellow)}
.cbd-neuf{
  position:absolute;top:8px;right:9px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:99px;background:rgba(255,197,47,.18);
  border:1px solid rgba(255,197,47,.42);color:var(--l12-yellow);
}

/* ── 4. LES DÉTAILS, repliés sous les cartes ─────────────────────────────── */
.cbd-details{margin-top:14px}
.cbd-details .cp-acc{margin-bottom:7px}
/* Les sommaires restent utilisables au clavier : on les garde visibles, mais
   discrets — la carte d'action est le chemin principal, pas le seul. */
.cbd-details .cp-acc>summary{min-height:44px;display:flex;align-items:center;gap:8px}

/* ── 5. RECONNAISSANCE PROFESSIONNELLE, concise ──────────────────────────── */
.vae-crits{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vae-crit{
  font-size:11px;padding:3px 9px;border-radius:99px;color:#c2d2e0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
}

/* ── 6. EI · CHOISIS TA PRIORITÉ ─────────────────────────────────────────── */
.prio-grille{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.prio-carte{
  display:flex;align-items:center;gap:11px;width:100%;min-height:62px;
  padding:11px 13px;border-radius:14px;text-align:left;cursor:pointer;
  background:var(--l12-glass-soft);border:1px solid var(--l12-edge-soft);
  box-shadow:var(--l12-shadow);color:#dfe9f2;
  transition:border-color .16s ease,background .16s ease,transform .10s ease;
}
.prio-carte:hover{background:rgba(255,255,255,.07)}
.prio-carte:active{transform:translateY(1px)}
.prio-ic{font-size:21px;line-height:1;flex:0 0 auto}
.prio-txt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.prio-nom{font-family:var(--disp);font-size:14.5px;color:#fff;letter-spacing:.01em}
.prio-l{font-size:11.5px;color:#9db0c1;line-height:1.35}
/* L'état sélectionné doit être très visible : bordure, fond ET coche. */
.prio-check{
  flex:0 0 auto;width:24px;height:24px;border-radius:99px;display:grid;place-items:center;
  font-size:13px;color:transparent;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
}
.prio-carte.on{border-color:rgba(255,197,47,.62);background:linear-gradient(150deg,rgba(255,197,47,.16),rgba(7,24,39,.86))}
.prio-carte.on .prio-check{color:#071522;background:var(--l12-yellow);border-color:var(--l12-yellow)}
.prio-defendu{
  display:flex;align-items:center;gap:8px;font-size:13px;color:#dfe9f2;
  margin:2px 0 8px;padding:9px 11px;border-radius:12px;
  background:rgba(255,197,47,.10);border:1px solid rgba(255,197,47,.28);
}
.prio-defendu b{color:var(--l12-yellow)}

/* EI-01 · §19 — LES PETITS ÉCRANS EN HAUTEUR.
   À 320x568, quatre cartes de 62 px, leurs gouttières et le bouton de
   validation repoussaient l'appel à l'action sous la ligne de flottaison :
   le joueur devait deviner qu'il restait quelque chose à faire plus bas.
   On resserre les cartes SANS toucher à leur contenu ni à leur zone
   cliquable minimale, uniquement là où la hauteur manque. */
@media (max-height:640px){
  .prio-grille{gap:6px;margin:9px 0 2px}
  .prio-carte{min-height:52px;padding:8px 11px;gap:9px}
  .prio-ic{font-size:19px}
  .prio-l{font-size:11px;line-height:1.3}
}

/* ── 7. DESKTOP — la scène reste portrait, on élargit seulement la grille ── */
@media (min-width:900px){
  .cbd-grille{grid-template-columns:1fr 1fr}
}

/* ── 8. CIBLES TACTILES ──────────────────────────────────────────────────────
   Mesuré : les `.btn.small` historiques tombent à 38 px. Dans le tableau de
   bord, ces boutons redeviennent des actions PRINCIPALES — « Choisir mon
   objectif » est le seul geste possible quand aucun objectif n'est fixé — et
   ceux des sections de détail sont désormais le point d'arrivée d'un clic sur
   une carte. On les remonte au seuil des 44 px là où la refonte les expose,
   sans toucher au reste du jeu. */
.cbd-obj .btn.small,
.cbd-details .btn.small{ min-height:44px; padding-top:0; padding-bottom:0 }