/* ============================================================================
   RCF · LOT 12 — PHASE C.4 — GAME FEEL / PLAISIR D'INTERACTION
   ----------------------------------------------------------------------------
   Couche UI uniquement. Aucun moteur, score, probabilité, prérequis ou stockage
   n'est modifié. Le but est de rendre chaque action agréable et lisible :
   repos -> pression -> activation -> transition -> résultat.

   Principes : micro-profondeur, compression nette au toucher, ripple discret,
   focus clavier visible, haptique légère côté JS, transitions courtes. Les
   animations sont neutralisées par prefers-reduced-motion.
   ============================================================================ */

:root{
  --c4-ease-out:cubic-bezier(.20,.78,.22,1);
  --c4-ease-pop:cubic-bezier(.22,1.15,.32,1);
  --c4-press-ms:85ms;
  --c4-release-ms:180ms;
  --c4-glow:rgba(255,197,47,.32);
  --c4-glow-strong:rgba(255,197,47,.55);
}

/* Strict 9:16 also means full-frame screens must size to the stage, not 100dvh. */
#rcfScroll>.wrap{min-height:100%}
#rcfStage .l12-home,
#rcfStage #scAcademy,
#rcfStage #scAcademyM02,
#rcfStage #scClassement,
#rcfStage .l12-rank-wrap,
#rcfStage #scStart,
#rcfStage #scDestin,
#rcfStage #scAmbition{min-height:100%!important}

html.rcf-lot12-c4 button,
html.rcf-lot12-c4 .choice,
html.rcf-lot12-c4 .opt,
html.rcf-lot12-c4 [role="button"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  transition:
    transform var(--c4-release-ms) var(--c4-ease-out),
    filter var(--c4-release-ms) var(--c4-ease-out),
    box-shadow var(--c4-release-ms) var(--c4-ease-out),
    border-color var(--c4-release-ms) var(--c4-ease-out),
    background-color var(--c4-release-ms) var(--c4-ease-out),
    opacity var(--c4-release-ms) var(--c4-ease-out);
}

html.rcf-lot12-c4 button:not(:disabled):not([aria-disabled="true"]),
html.rcf-lot12-c4 .choice:not([aria-disabled="true"]),
html.rcf-lot12-c4 .opt:not([aria-disabled="true"]),
html.rcf-lot12-c4 [role="button"]:not([aria-disabled="true"]){cursor:pointer}

html.rcf-lot12-c4 button:focus-visible,
html.rcf-lot12-c4 .choice:focus-visible,
html.rcf-lot12-c4 .opt:focus-visible,
html.rcf-lot12-c4 [role="button"]:focus-visible{
  outline:2px solid var(--l12-yellow,var(--hivis));
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,197,47,.14),0 14px 28px -20px rgba(255,174,0,.85)!important;
}


/* Les contrôles visuels reçoivent un contexte local pour contenir le ripple. */
.l12-btn,.menu-btn,.l12-mini button,.btn,.choice,.opt,.l12-nav-back,.l12-rank-tab,
.qz-card,.qz-mode,.wk-actions button,.ac-mod,.ac-answer,.ac-job,.m02-format,
.amb-card,.amb-fam,.career-btn,.creation-actions button,.l12-sheet-close{
  position:relative;overflow:hidden;isolation:isolate;
}

/* La pression doit donner une sensation de course mécanique courte, jamais molle. */
html.rcf-lot12-c4 .c4-pressed,
html.rcf-lot12-c4 .l12-pressed{
  transform:translateY(1.5px) scale(.972)!important;
  filter:brightness(1.10) saturate(1.06)!important;
  box-shadow:0 2px 8px -5px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.14) inset!important;
  transition-duration:var(--c4-press-ms)!important;
}

html.rcf-lot12-c4 .c4-activated{animation:c4-activate 220ms var(--c4-ease-pop)}
@keyframes c4-activate{
  0%{filter:brightness(1.12) saturate(1.08)}
  45%{filter:brightness(1.22) saturate(1.14)}
  100%{filter:brightness(1) saturate(1)}
}

/* Ripple injecté par lot12-c4-gamefeel.js ; il n'intercepte jamais le clic. */
.c4-ripple{
  position:absolute;z-index:8;pointer-events:none;border-radius:50%;
  width:18px;height:18px;margin:-9px 0 0 -9px;
  left:var(--c4-ripple-x,50%);top:var(--c4-ripple-y,50%);
  background:radial-gradient(circle,rgba(255,238,180,.62) 0%,rgba(255,197,47,.30) 32%,rgba(255,197,47,0) 72%);
  transform:scale(.2);opacity:.9;
  animation:c4-ripple 430ms var(--c4-ease-out) forwards;
}
@keyframes c4-ripple{to{transform:scale(10);opacity:0}}

/* Actions primaires : présence au repos, mais sans pulsation permanente. */
html.rcf-lot12-c4 .l12-btn--primary,
html.rcf-lot12-c4 .btn:not(.ghost):not(.disabled),
html.rcf-lot12-c4 #careerBtn{
  box-shadow:0 1px 0 rgba(255,255,255,.46) inset,0 14px 30px -20px var(--c4-glow-strong),0 8px 18px -14px rgba(0,0,0,.9)!important;
}

/* Flèches et chevrons accompagnent le geste. */
html.rcf-lot12-c4 .choice::after,
html.rcf-lot12-c4 .ac-answer::after,
html.rcf-lot12-c4 .l12-btn .l12-c,
html.rcf-lot12-c4 .menu-btn .mc{
  transition:transform 150ms var(--c4-ease-out),opacity 150ms ease;
}
html.rcf-lot12-c4 .c4-pressed.choice::after,
html.rcf-lot12-c4 .c4-pressed.ac-answer::after,
html.rcf-lot12-c4 .c4-pressed .l12-c,
html.rcf-lot12-c4 .c4-pressed .mc{transform:translateX(3px)}

/* Navigation secondaire uniforme : Menu à la racine, Retour dans un enfant. */
/* Cible tactile du projet : 44 px (était 38 px). La largeur, la typographie et le style ne changent pas. */
.l12-rank-back.l12-nav-back{width:auto!important;height:44px!important;min-height:44px!important;font-size:inherit!important;line-height:1!important;padding:0 10px!important;border-radius:11px!important}
.l12-rank-back.l12-nav-back span{font-size:17px;line-height:1}
.l12-rank-back.l12-nav-back b{font-size:9px}
.qz-back.l12-nav-back,.wk-back.l12-nav-back{display:inline-flex!important}

/* Survol uniquement pour les appareils qui savent vraiment survoler. */
@media(hover:hover) and (pointer:fine){
  html.rcf-lot12-c4 button:not(:disabled):not([aria-disabled="true"]):hover,
  html.rcf-lot12-c4 .choice:not([aria-disabled="true"]):hover,
  html.rcf-lot12-c4 .opt:not([aria-disabled="true"]):hover,
  html.rcf-lot12-c4 [role="button"]:not([aria-disabled="true"]):hover{
    transform:translateY(-1.5px);
  }
  html.rcf-lot12-c4 .l12-btn--primary:hover,
  html.rcf-lot12-c4 .btn:not(.ghost):not(.disabled):hover{
    filter:brightness(1.055) saturate(1.08);
    box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 18px 36px -20px rgba(255,181,0,.78),0 10px 22px -16px rgba(0,0,0,.92)!important;
  }
}

/* Les écrans arrivent vite : présence, pas spectacle. */
#rcfStage .screen.on:not(#scIntroVideo){animation:c4-screen-in 180ms var(--c4-ease-out)}
@keyframes c4-screen-in{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Désactivé = clairement inerte, sans profondeur trompeuse. */
html.rcf-lot12-c4 button:disabled,
html.rcf-lot12-c4 button[aria-disabled="true"],
html.rcf-lot12-c4 .disabled{cursor:default!important;filter:saturate(.65);opacity:.62}

@media(prefers-reduced-motion:reduce){
  html.rcf-lot12-c4 button,
  html.rcf-lot12-c4 .choice,
  html.rcf-lot12-c4 .opt,
  html.rcf-lot12-c4 [role="button"],
  #rcfStage .screen.on{animation:none!important;transition-duration:.01ms!important}
  .c4-ripple{display:none!important}
}

/* Full-stage leftovers from older 100dvh rules. */
#rcfStage #scEnd{min-height:100%!important}
#rcfStage #careerModal .sheet{max-height:calc(100% - 14px)!important}

/* Conserver l'identité jaune de l'action JOUER même au survol/à la pression.
   Une ancienne règle `.l12-btn:hover` plus spécifique la repassait en bleu. */
html.rcf-lot12-c4 .l12-btn--primary:hover,
html.rcf-lot12-c4 .l12-btn--primary.c4-pressed,
html.rcf-lot12-c4 .l12-btn--primary.l12-pressed{
  background:linear-gradient(145deg,rgba(255,204,58,.94),rgba(238,164,0,.90))!important;
  border-color:rgba(255,239,184,.94)!important;
  color:#081727!important;
}

/* Quêtes : une carte = une décision lisible. Le nom et la difficulté ne se
   collent plus et toute la largeur tactile est utilisée. */
.qz-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
.qz-card{display:block!important;width:100%!important;text-align:left!important}
.qz-c-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important}
.qz-c-n{min-width:0!important;font-weight:600!important;line-height:1.25!important}
.qz-c-d{flex:none!important;padding:3px 7px!important;border-radius:999px!important;border:1px solid rgba(255,197,47,.28)!important;background:rgba(255,197,47,.08)!important;font-family:var(--mono)!important;font-size:8px!important;line-height:1.2!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#ffd76c!important}
.qz-c-p{display:block!important;margin-top:5px!important;color:#b9c8d5!important}
.qz-c-s{display:block!important;margin-top:6px!important}

/* Le strict 9:16 peut laisser des marges haut/bas sur les téléphones très
   allongés. Elles restent purement décoratives et reprennent discrètement
   l'ambiance du menu au lieu d'apparaître comme des bandes vides. */
body:has(#scHome.on)::before{
  content:""!important;position:fixed!important;inset:-36px!important;z-index:-3!important;
  background-image:linear-gradient(rgba(2,11,19,.60),rgba(2,11,19,.78)),var(--l12-home-bg)!important;
  background-size:cover!important;background-position:center!important;
  filter:blur(24px) saturate(.72) brightness(.52)!important;transform:scale(1.06)!important;
  opacity:.92!important;
}