/* ============================================================================
   RCF · LOT 12 — PHASE C.3 — RETOUR TEST UTILISATEUR
   ----------------------------------------------------------------------------
   Passe strictement UX/UI : intro plein cadre, navigation retour cohérente,
   Cyclodex portrait réel, Academy plus incarnée, identité de carrière neutre,
   fond de partie plus visible et choix plus lisibles.
   Aucun moteur / aucune donnée gameplay modifiés ici.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. INTRO — plein cadre 9:16, sans miniature
   La vidéo validée est déjà quasi exactement 9:16 (1792 × 3184). `cover` ne
   provoque donc qu'un recadrage négligeable mais garantit qu'aucun parent ancien
   ne peut la réduire à une boîte de contenu.
   -------------------------------------------------------------------------- */
#rcfScroll:has(#scIntroVideo.on){overflow:hidden!important}
#rcfScroll:has(#scIntroVideo.on)>.wrap{
  position:static!important;width:100%!important;height:100%!important;
  min-height:100%!important;padding:0!important;margin:0!important;
}
#scIntroVideo{
  position:fixed!important;inset:0!important;width:100%!important;height:100%!important;
  min-height:100%!important;margin:0!important;padding:0!important;z-index:1000!important;
}
#scIntroVideo .l12-intro{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
#scIntroVideo .l12-intro video{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:center!important;
}

/* --------------------------------------------------------------------------
   2. RETOUR — une seule grammaire visuelle partout
   -------------------------------------------------------------------------- */
.l12-nav-back,
.qz-back,.wk-back,.create-back,.l12-rank-back{
  min-width:42px;height:38px;min-height:38px;padding:0 11px!important;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid rgba(184,220,247,.28)!important;border-radius:12px!important;
  background:rgba(5,20,34,.72)!important;color:#eef5fb!important;
  font-family:var(--mono)!important;font-size:9px!important;font-weight:500!important;
  letter-spacing:.09em!important;text-transform:uppercase!important;line-height:1!important;
  box-shadow:0 10px 28px -22px #000,0 1px 0 rgba(255,255,255,.06) inset!important;
  backdrop-filter:blur(12px)!important;cursor:pointer;transition:.18s ease;
}
.l12-nav-back span,.qz-back::first-letter,.wk-back::first-letter{color:var(--l12-yellow);font-size:20px;line-height:1;font-family:var(--body)}
.l12-nav-back b{font:inherit;font-weight:500}
.l12-nav-back:hover,.qz-back:hover,.wk-back:hover,.create-back:hover,.l12-rank-back:hover{
  border-color:rgba(255,197,47,.62)!important;background:rgba(14,38,58,.84)!important;
  transform:translateY(-1px)
}
.l12-nav-back:focus-visible,.qz-back:focus-visible,.wk-back:focus-visible,.create-back:focus-visible,.l12-rank-back:focus-visible{
  outline:2px solid var(--l12-yellow)!important;outline-offset:2px!important
}
.l12-nav-back--icon{width:36px!important;min-width:36px!important;padding:0!important}
.l12-nav-back--icon span{font-size:24px}
/* L'ancien bouton création était positionné en haut à droite : même aspect,
   mais on conserve sa position pour ne pas déplacer tout le flux création. */
.create-back{width:42px!important;position:absolute!important;right:14px!important;top:14px!important;font-size:0!important}
.create-back::before{content:"‹";font-size:24px;color:var(--l12-yellow)}
.qz-back,.wk-back{width:auto!important;margin:0 0 8px!important}
.l12-rank-back{width:42px!important;padding:0!important;font-size:24px!important;color:var(--l12-yellow)!important}

/* En-têtes racine avec retour visible immédiatement. */
.cy-head--home,.bible-head--home,.ac-head{
  position:relative!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;
  align-items:start!important;column-gap:10px!important;row-gap:2px!important
}
.cy-head--home .l12-nav-back,.bible-head--home .l12-nav-back,.ac-head>.l12-nav-back{grid-column:1;grid-row:1/3}
.cy-home-title,.bible-home-title,.ac-head-copy{grid-column:2;min-width:0}
.bible-home-icon{display:none!important}
.cy-head:not(.cy-head--home){display:flex!important;align-items:center!important}
.bible-head:not(.bible-head--home){display:flex!important;align-items:center!important}

/* --------------------------------------------------------------------------
   3. CYCLODEX — toujours pensé selon la scène portrait, même sur PC
   Le @media(min-width:780px) historique regardait le viewport du navigateur,
   pas la largeur du téléphone virtuel. Sur PC il activait donc un split desktop
   DANS une scène de 506 px et étranglait l'illustration.
   -------------------------------------------------------------------------- */
.cy-dex{
  height:auto!important;min-height:0!important;overflow:visible!important;
  display:grid!important;grid-template-rows:46px auto!important
}
.cy-dex-body{
  min-height:0!important;display:flex!important;flex-direction:column!important;
  grid-template-columns:1fr!important;grid-template-rows:none!important;overflow:visible!important
}
.cy-pane{
  min-height:0!important;overflow:visible!important;padding:10px!important;
  border-right:0!important;border-bottom:1px solid var(--edge)!important
}
.cy-fiche{height:auto!important;display:grid!important;grid-template-rows:auto auto auto auto!important;gap:8px!important}
.cy-screen{
  width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;
  aspect-ratio:1/1!important;justify-self:stretch!important;padding:7px!important;border-radius:10px!important;
  background:linear-gradient(160deg,rgba(17,42,63,.86),rgba(3,14,24,.96))!important
}
.cy-screen-i{width:100%!important;height:100%!important;object-fit:contain!important}
.cy-fiche-d{max-height:none!important;overflow:visible!important;font-size:12px!important;line-height:1.5!important;padding-bottom:2px}
.cy-index{
  height:min(330px,42dvh)!important;min-height:270px!important;
  display:grid!important;grid-template-rows:36px 38px minmax(0,1fr)!important;
  border-top:0!important
}
.cy-index-l{min-height:0!important;overflow-y:auto!important}
/* Même si le viewport PC dépasse 780px, la scène reste portrait. */
@media(min-width:780px){
  .cy-dex{height:auto!important}
  .cy-dex-body{display:flex!important;flex-direction:column!important;grid-template-columns:1fr!important}
  .cy-pane{border-right:0!important;border-bottom:1px solid var(--edge)!important;padding:10px!important}
  .cy-screen{max-height:none!important;width:100%!important}
  .cy-index{height:min(330px,42dvh)!important;grid-template-rows:36px 38px minmax(0,1fr)!important}
}

/* --------------------------------------------------------------------------
   3 bis. BIBLE — la grille des familles obéit elle aussi à la scène, pas au
   navigateur. `bible.css:50` passe la grille à trois colonnes dès que le
   VIEWPORT dépasse 720 px : sur un PC 1440x900, elle en réclamait donc trois
   dans une scène de 506 px et deux familles étaient coupées de 11 px au bord
   droit du cadre. C'est exactement la cause corrigée au § 3 pour le Cyclodex ;
   elle n'avait pas été traitée pour la Bible.

   Constaté à l'identique sur la base 71bf61b : ce n'est pas une régression de
   la Phase C.3, mais un défaut préexistant révélé par la recette § D.
   -------------------------------------------------------------------------- */
@media(min-width:720px){
  .bible-grid{grid-template-columns:1fr 1fr!important}
}

/* --------------------------------------------------------------------------
   4. RCF ACADEMY — donner une vraie présence visuelle aux deux modules
   -------------------------------------------------------------------------- */
#scAcademy,#scAcademyM02{position:relative!important;min-height:100dvh!important;background:#04101b!important}
#scAcademy::before,#scAcademyM02::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;filter:saturate(.9) contrast(1.02)
}
#scAcademy::before{background-image:url("../../assets/backgrounds/living/game-shift-morning.webp")}
#scAcademyM02::before{background-image:url("../../assets/backgrounds/living/game-shift-day.webp")}
#scAcademy::after,#scAcademyM02::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,11,19,.38),rgba(3,13,22,.66) 34%,rgba(2,9,16,.88) 100%)
}
#scAcademy .academy-wrap,#scAcademyM02 .academy-wrap,#scAcademy .ac-wrap,#scAcademyM02 .ac-wrap{position:relative;z-index:1}
.ac-wrap{padding-left:3px!important;padding-right:3px!important}
.ac-head{padding:10px 10px 11px!important;border:1px solid rgba(184,220,247,.18)!important;border-radius:15px!important;background:rgba(5,20,34,.58)!important;backdrop-filter:blur(12px)!important}
.ac-title{font-size:24px!important;text-shadow:0 2px 10px rgba(0,0,0,.48)}
.ac-sub{color:#c6d4df!important}

/* Hub : chaque module devient une grande carte illustrée, pas un bouton texte. */
.ac-mods{gap:12px!important}
.ac-mod{
  position:relative!important;isolation:isolate;overflow:hidden!important;min-height:156px!important;
  justify-content:flex-end!important;padding:60px 16px 15px!important;border-radius:18px!important;
  background-color:#071827!important;background-size:cover!important;background-position:center!important;
  box-shadow:0 24px 60px -40px #000!important
}
.ac-mod::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,12,20,.08),rgba(3,12,20,.58) 46%,rgba(3,12,20,.96) 100%)}
.ac-mod::after{content:"";position:absolute;inset:0;z-index:-1;border:1px solid rgba(255,255,255,.06);border-radius:inherit;pointer-events:none}
.ac-mod:nth-child(1){background-image:url("../../assets/backgrounds/living/game-shift-morning.webp")!important}
.ac-mod:nth-child(2){background-image:url("../../assets/backgrounds/living/game-shift-day.webp")!important}
.ac-mod-n{font-size:20px!important;line-height:1.08!important;color:#fff!important;text-shadow:0 2px 14px #000}
.ac-mod-d{font-size:12px!important;line-height:1.45!important;color:#d2dde6!important;max-width:34ch}
.ac-mod-s{display:inline-flex!important;align-self:flex-start!important;margin-top:6px!important;padding:4px 8px!important;border-radius:999px!important;background:rgba(255,197,47,.92)!important;color:#071522!important;font-weight:700!important}

/* Entrées et questionnaires : le fond reste perceptible et le questionnaire
   devient un objet de jeu posé dans l'atelier. */
.ac-form,.ac-play,.m02-play{
  border:1px solid rgba(181,217,244,.24)!important;border-radius:18px!important;
  background:linear-gradient(160deg,rgba(12,37,57,.80),rgba(3,15,26,.88))!important;
  backdrop-filter:blur(14px)!important;box-shadow:0 25px 60px -42px #000!important
}
.ac-play,.m02-play{padding:12px!important}
.ac-session-hero{
  min-height:96px;margin:-12px -12px 12px;padding:14px 14px 12px;
  display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;
  border-radius:18px 18px 10px 10px;background:
    linear-gradient(180deg,rgba(2,11,19,.08),rgba(3,13,22,.82)),
    url("../../assets/backgrounds/living/game-shift-evening.webp") center/cover no-repeat;
}
.ac-session-hero--m02{background:
    linear-gradient(180deg,rgba(2,11,19,.08),rgba(3,13,22,.82)),
    url("../../assets/backgrounds/living/game-shift-day.webp") center/cover no-repeat}
.ac-session-hero span{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--l12-yellow)}
.ac-session-hero b{font-family:var(--disp);font-size:21px;font-weight:600;line-height:1.05;color:#fff;text-transform:uppercase;text-shadow:0 2px 12px #000}
.ac-q{
  margin:10px 0 12px!important;padding:13px 13px 14px!important;border-radius:13px!important;
  border:1px solid rgba(178,214,242,.17)!important;background:rgba(2,14,24,.58)!important;
  font-size:17px!important;font-weight:500!important;line-height:1.42!important
}
.ac-answer{
  position:relative!important;padding:12px 36px 12px 13px!important;min-height:52px!important;
  background:linear-gradient(155deg,rgba(16,47,70,.74),rgba(4,18,30,.86))!important;
  border-color:rgba(167,204,231,.22)!important;font-size:14px!important;font-weight:400!important
}
.ac-answer::after{content:"›";position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--l12-yellow);opacity:.82}
.ac-answer:hover{border-color:rgba(255,197,47,.55)!important;background:linear-gradient(155deg,rgba(25,59,84,.84),rgba(5,21,35,.91))!important}
.ac-result-nav{margin-bottom:9px}

/* --------------------------------------------------------------------------
   5. CRÉATION — identité DE CARRIÈRE, pas avatar Homme/Femme
   -------------------------------------------------------------------------- */
.create-career-identity label{font-size:11px!important;color:#d8e4ed!important}
.create-career-identity label small{display:block;margin-top:5px;font-family:var(--body);font-size:10.5px;line-height:1.4;letter-spacing:0;text-transform:none;color:#91a7b9}
.create-career-identity input[type="text"]{
  min-height:56px!important;padding:0 14px!important;font-size:16px!important;font-weight:500!important;
  background:rgba(4,18,31,.68)!important;border-color:rgba(178,214,242,.26)!important
}
.create-career-identity input[type="text"]:focus{border-color:var(--l12-yellow)!important;box-shadow:0 0 0 3px rgba(255,197,47,.10)}
.creation-section-title{font-weight:600!important}
.creation-lead{color:#c6d5df!important}

/* --------------------------------------------------------------------------
   6. PARTIE — le fond image doit vivre, et le texte doit respirer
   -------------------------------------------------------------------------- */
body.rcf-ingame .rcf-game-bg.on{opacity:1!important;filter:saturate(1.02) brightness(1.08)!important}
body.rcf-ingame .rcf-game-scrim{
  opacity:1!important;
  background-image:linear-gradient(180deg,rgba(3,10,17,.15),rgba(3,11,18,.34) 48%,rgba(2,8,14,.68) 100%)!important
}
.wrap:has(#scGame.on) #plate{
  background:linear-gradient(155deg,rgba(12,38,58,.72),rgba(4,17,28,.82))!important;
  backdrop-filter:blur(11px)!important
}
.wrap:has(#scGame.on) #stats>.l12-hud-stat,
.wrap:has(#scGame.on) #stats>.l12-hud-pay,
.wrap:has(#scGame.on) #stats>.l12-hud-expertises{
  background:linear-gradient(155deg,rgba(11,36,55,.65),rgba(3,16,27,.78))!important;
  backdrop-filter:blur(10px)!important
}
.wrap:has(#scGame.on) #eventCard{
  background:linear-gradient(150deg,rgba(12,38,58,.78),rgba(3,15,26,.87))!important;
  backdrop-filter:blur(13px)!important
}
.wrap:has(#scGame.on) .etitle{font-weight:500!important;letter-spacing:.005em!important}
.wrap:has(#scGame.on) .ebody{font-weight:400!important;color:#d0dbe3!important}
.wrap:has(#scGame.on) .choice{
  position:relative!important;padding:9px 39px 9px 11px!important;
  background:linear-gradient(155deg,rgba(16,46,68,.70),rgba(5,21,35,.82))!important
}
.wrap:has(#scGame.on) .choice .cl{font-size:13.4px!important;font-weight:400!important;line-height:1.28!important;letter-spacing:0!important}
.wrap:has(#scGame.on) .choice .ch{font-weight:400!important}
.wrap:has(#scGame.on) .choice::after{
  content:"›"!important;position:absolute!important;right:12px!important;top:50%!important;
  transform:translateY(-50%)!important;color:var(--l12-yellow)!important;font-size:21px!important;
  line-height:1!important;pointer-events:none!important
}

/* La fenêtre Carrière reste plus dense, mais sans gras systématique. */
#careerModal .cp-n,#careerModal details.cp-acc summary{font-weight:500!important}

@media(max-width:380px){
  .l12-nav-back,.qz-back,.wk-back{height:36px;min-height:36px;padding:0 9px!important;font-size:8.5px!important}
  .ac-mod{min-height:145px!important;padding-top:54px!important}
  .cy-index{height:min(310px,40dvh)!important;min-height:250px!important}
  .wrap:has(#scGame.on) .choice{padding-right:36px!important}
}

@media(prefers-reduced-motion:reduce){
  .l12-nav-back,.qz-back,.wk-back,.create-back,.l12-rank-back,.ac-mod,.ac-answer{transition-duration:.01ms!important}
}