/* ============================================================================
   RCF · LOT 12.1 — INTRO, MENU PRINCIPAL, SOUS-MENU JOUER
   ----------------------------------------------------------------------------
   Direction artistique arrêtée par la référence validée : bleu RCF profond,
   jaune lumineux, une action primaire en jaune plein, les autres en verre
   sombre. Le fond photo validé porte l'ensemble ; un voile assure le contraste
   des libellés sans écraser l'usine, le drapeau ni la zone utile aux menus.

   Toutes les classes sont préfixées `.l12-`, sauf les réutilisations
   volontaires de `.menu-btn` (le Lot 8 et le Lot 11 les stylent déjà, et
   `persistence.js` réécrit le `.ml` du bouton Continuer).
   ============================================================================ */

/* Le fond validé est déclaré ICI, dans le thème, et non en dur dans le HTML :
   changer d'image se fait en éditant cette seule ligne. */
:root{ --l12-home-bg: url("../../assets/backgrounds/FOND_MENU_PRINCIPAL_VALIDE.png") }

/* ============================ INTRO VIDÉO ================================= */
#scIntroVideo{ position:absolute; inset:0; margin:0; padding:0 }
#scIntroVideo.on{ display:block }
.l12-intro{
  position:absolute; inset:0;
  background:#040d16;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.l12-intro video{
  width:100%; height:100%;
  object-fit:contain;      /* la vidéo validée n'est ni recadrée ni étirée */
  background:#040d16;
  display:block;
}
.l12-intro-skip{
  position:absolute;
  right:calc(14px + var(--rcf-safe-r)); top:calc(14px + var(--rcf-safe-t));
  z-index:3;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase;
  color:#e8eef5;
  background:rgba(6,18,30,.62);
  border:1px solid rgba(150,185,215,.34);
  border-radius:999px;
  padding:9px 16px;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:border-color .2s ease, background .2s ease;
}
.l12-intro-skip:hover{ border-color:var(--hivis); background:rgba(8,24,40,.8) }
.l12-intro-skip:focus-visible{ outline:2px solid var(--hivis); outline-offset:2px }
/* Si l'autoplay est refusé, on propose une lecture explicite : la vidéo source
   n'est pas touchée, seul le déclenchement change. */
.l12-intro-play{
  position:absolute; inset:0; z-index:2;
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:16px;
  background:rgba(4,13,22,.72); border:0; width:100%;
  color:#eef3f8; font-family:var(--disp); font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer;
}
.l12-intro--bloquee .l12-intro-play{ display:flex }
.l12-intro-play svg{ width:64px; height:64px; color:var(--hivis) }

/* ============================ MENU PRINCIPAL ============================== */
/* Le menu et l'intro sont « plein cadre » : on annule le padding de la colonne
   pour ces deux écrans seulement, plutôt que de tirer des marges négatives —
   celles-ci fusionnaient avec la marge du parent et décalaient toute la scène
   vers le haut, ce qui rognait le logo. */
#rcfScroll:has(#scHome.on) > .wrap,
#rcfScroll:has(#scIntroVideo.on) > .wrap{ padding:0 }

.l12-home{
  position:relative;
  min-height:100dvh;
  width:100%;
  display:flex; flex-direction:column;
  overflow:hidden;
}
/* Fond validé : cadré en `cover` sur le haut, pour préserver l'usine et le
   drapeau ; la zone utile aux menus reste le bas de l'image. */
.l12-home-bg{
  position:absolute; inset:0; z-index:0;
  background-image:var(--l12-home-bg, none);
  background-size:cover;
  background-position:50% 30%;
  background-repeat:no-repeat;
}
.l12-home-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(4,14,24,.58) 0%, rgba(4,14,24,.12) 26%,
                    rgba(4,14,24,.20) 48%, rgba(4,13,22,.80) 78%,
                    rgba(3,10,18,.94) 100%);
}
.l12-home-in{
  position:relative; z-index:2;
  flex:1 1 auto;
  display:flex; flex-direction:column;
  padding:calc(20px + var(--rcf-safe-t)) 20px calc(16px + var(--rcf-safe-b));
}

/* --- identité ------------------------------------------------------------ */
.l12-brand{ text-align:center; padding-top:6px }
.l12-brand img{
  display:block; margin:0 auto;
  width:min(58%, 214px); height:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
.l12-wordmark{
  margin-top:10px;
  font-family:var(--disp); font-weight:700;
  font-size:clamp(15px, 4.6vw, 21px);
  letter-spacing:.16em; text-transform:uppercase;
  color:#eaf1f8; text-shadow:0 4px 18px rgba(0,0,0,.6);
}
.l12-wordmark .y{ color:var(--hivis) }
.l12-rule{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:9px auto 0; width:min(74%, 268px);
}
.l12-rule i{ flex:1 1 auto; height:1px; background:linear-gradient(90deg,transparent,var(--hivis),transparent) }
.l12-rule b{ width:7px; height:7px; background:var(--hivis); transform:rotate(45deg) }
.l12-slogan{
  margin-top:8px;
  font-size:12.5px; font-style:italic; color:#d3dde7;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}

/* --- les quatre accès ----------------------------------------------------- */
/* Le conteneur garde son nom d'origine `.home-menu` — le reste du dépôt et la
   suite gelée du Lot 8 le repèrent littéralement. On ne le renomme donc pas :
   on le restyle depuis le nouveau menu. Le `!important` répond à celui de
   `screens.css:606`, qui plafonnait la largeur pour une page qui s'élargissait ;
   dans la scène 9:16 la largeur est déjà bornée par le cadre. */
.l12-home .home-menu{
  width:100% !important; max-width:none !important; align-self:stretch;
  margin-top:auto;                 /* les boutons vivent dans le bas de l'image */
  display:flex; flex-direction:column; gap:10px !important;
  padding-top:22px !important;
  position:static;
}
.l12-btn{
  display:flex; align-items:center; gap:13px;
  width:100%;
  padding:15px 16px;
  border-radius:13px;
  border:1px solid rgba(150,185,215,.28);
  background:linear-gradient(180deg, rgba(13,34,56,.86), rgba(8,22,38,.9));
  backdrop-filter:blur(10px);
  color:#eef4fa;
  font-family:var(--disp); font-weight:600;
  font-size:16px; letter-spacing:.08em; text-transform:uppercase;
  text-align:left; cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.34);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.l12-btn .l12-i{ flex:none; width:26px; height:26px; color:var(--hivis); display:grid; place-items:center }
.l12-btn .l12-i svg{ width:24px; height:24px }
.l12-btn .ml{ flex:1 1 auto; min-width:0 }
.l12-btn .l12-c{ flex:none; opacity:.6; font-size:19px; line-height:1 }
.l12-btn:hover{ transform:translateY(-1px); border-color:rgba(255,196,40,.5) }
.l12-btn:active{ transform:translateY(0) }
.l12-btn:focus-visible{ outline:2px solid var(--hivis); outline-offset:3px }

.l12-btn--primary{
  background:linear-gradient(180deg,#ffd23f,#f5b300);
  border-color:rgba(255,225,140,.9);
  color:#0d1c2c;
  box-shadow:0 12px 30px rgba(245,179,0,.28);
}
.l12-btn--primary .l12-i{ color:#0d1c2c }
.l12-btn--primary .l12-c{ opacity:.7 }
.l12-btn--primary:hover{ border-color:#fff }

/* --- pied : paramètres, infos, version ------------------------------------ */
.l12-foot{ margin-top:16px }
.l12-foot-rule{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:min(60%, 210px); margin:0 auto 12px;
}
.l12-foot-rule i{ flex:1 1 auto; height:1px; background:linear-gradient(90deg,transparent,rgba(255,196,40,.65),transparent) }
.l12-foot-rule b{ width:6px; height:6px; background:var(--hivis); transform:rotate(45deg) }
.l12-mini{ display:flex; justify-content:center; gap:10px }
.l12-mini button{
  display:flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  border:1px solid rgba(150,185,215,.26);
  background:rgba(8,22,38,.62);
  backdrop-filter:blur(8px);
  color:#cfdae6; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .18s ease, color .18s ease;
}
.l12-mini button svg{ width:15px; height:15px; color:var(--hivis) }
.l12-mini button:hover{ border-color:rgba(255,196,40,.55); color:#fff }
.l12-mini button:focus-visible{ outline:2px solid var(--hivis); outline-offset:2px }
.l12-baseline{
  margin-top:11px; text-align:center;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(198,214,230,.62);
}
.l12-baseline span{ color:var(--hivis) }
.l12-ver{
  margin-top:5px; text-align:center;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(170,190,210,.5);
}
.l12-ver b{ color:var(--hivis); font-weight:700 }

/* ============================ FEUILLES REMONTANTES ======================== */
/* Le sous-menu JOUER et la vue Infos partagent le même panneau : il remonte
   depuis le bas, à l'intérieur de la scène, jamais au-dessus de la page. */
.l12-sheet{
  position:absolute; inset:0; z-index:20;
  display:none;
}
.l12-sheet.on{ display:block }
.l12-sheet-veil{
  position:absolute; inset:0;
  background:rgba(3,10,18,.66);
  backdrop-filter:blur(3px);
  border:0; width:100%; cursor:pointer;
}
.l12-sheet-box{
  position:absolute; left:0; right:0; bottom:0;
  border-radius:20px 20px 0 0;
  border-top:1px solid rgba(150,185,215,.3);
  background:linear-gradient(180deg, rgba(11,30,50,.98), rgba(6,18,31,.99));
  padding:14px 18px calc(20px + var(--rcf-safe-b));
  box-shadow:0 -22px 60px rgba(0,0,0,.55);
  animation:l12SheetUp .3s cubic-bezier(.2,.75,.25,1) both;
  max-height:88%; overflow-y:auto;
}
@keyframes l12SheetUp{ from{ transform:translateY(14%); opacity:0 } to{ transform:none; opacity:1 } }
.l12-grip{ width:42px; height:4px; border-radius:2px; background:rgba(150,185,215,.34); margin:0 auto 14px }
.l12-sheet-title{
  font-family:var(--disp); font-weight:700; font-size:17px;
  letter-spacing:.12em; text-transform:uppercase; color:#eef4fa;
  margin:0 0 3px;
}
.l12-sheet-sub{
  font-size:12px; color:var(--dim); margin:0 0 15px; line-height:1.45;
}
.l12-sheet .menu-btn{ width:100% }
.l12-sheet-list{ display:flex; flex-direction:column; gap:9px }
.l12-sheet-close{
  margin-top:14px; width:100%;
  padding:12px; border-radius:11px;
  border:1px solid rgba(150,185,215,.24);
  background:transparent; color:var(--dim); cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.l12-sheet-close:hover{ border-color:rgba(255,196,40,.5); color:#fff }
.l12-soon{ opacity:.5; cursor:not-allowed }
.l12-tag{
  display:inline-block; margin-left:8px; vertical-align:middle;
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:#0d1c2c; background:var(--hivis); border-radius:999px; padding:2px 7px;
}
.l12-infos p{ font-size:12.5px; line-height:1.6; color:var(--dim); margin:0 0 10px }
.l12-infos dl{ margin:0 0 12px; display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:12px }
.l12-infos dt{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint) }
.l12-infos dd{ margin:0; color:#dde6ef }

@media (max-width:360px){
  .l12-btn{ font-size:14.5px; padding:13px 14px }
  .l12-brand img{ width:min(54%, 180px) }
  .l12-slogan{ font-size:11.5px }
}
@media (prefers-reduced-motion:reduce){
  .l12-sheet-box{ animation:l12SheetUp .01s linear both }
  .l12-btn{ transition:none }
}

/* ======================= MENU JOUER — MICRO-CORRECTIF VISUEL ================
   Plus de relief et de chaleur, sans toucher à la structure : ordre, textes,
   icônes, dimensions et handlers inchangés. Portée limitée à #l12SheetJouer.
   Le double identifiant passe devant les couches C.5 (#scHome .menu-btn) et
   Démo (#l12SheetJouer #l12BtnDemo), toutes deux en !important. */

/* F. Panneau : bleu nuit moins plat, le décor respire un peu. */
#scHome #l12SheetJouer .l12-sheet-veil{ background:rgba(3,10,18,.5) }
#scHome #l12SheetJouer .l12-sheet-box{
  border-top-color:rgba(255,200,70,.34);
  background:
    radial-gradient(120% 55% at 12% 0%, rgba(255,184,28,.10), transparent 62%),
    radial-gradient(90% 60% at 100% 100%, rgba(46,110,170,.20), transparent 70%),
    linear-gradient(180deg, rgba(16,40,64,.93), rgba(7,20,35,.97));
  box-shadow:0 -22px 60px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.07) inset;
}
#scHome #l12SheetJouer .l12-grip{ background:rgba(255,200,70,.42) }

/* A. Cartes secondaires : dégradé bleu profond, bordure présente, reflet, ombre. */
#scHome #l12SheetJouer .l12-sheet-list > .menu-btn:not(.primary){
  --mj-acc:255,189,25;
  background:
    linear-gradient(100deg, rgba(var(--mj-acc),.10), rgba(var(--mj-acc),0) 38%),
    linear-gradient(180deg, rgba(27,58,88,.9), rgba(11,29,47,.94))!important;
  border:1px solid rgba(160,196,226,.36)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.11) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 10px 22px -14px rgba(0,0,0,.9)!important;
  transition:transform 140ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease!important;
}
/* C. Accent latéral discret, propre à chaque ligne. */
#scHome #l12SheetJouer .l12-sheet-list > .menu-btn:not(.primary)::before{
  inset:12px auto 12px 0; width:3px; border:0; border-radius:0 3px 3px 0;
  background:rgba(var(--mj-acc),.72);
  box-shadow:0 0 10px rgba(var(--mj-acc),.45);
}
#scHome #l12SheetJouer #l12BtnNouvelle{ --mj-acc:255,196,40 }
#scHome #l12SheetJouer #btnQuetes{ --mj-acc:255,176,20 }
#scHome #l12SheetJouer #btnWeekly{ --mj-acc:255,158,40 }
#scHome #l12SheetJouer #l12BtnOnline{ --mj-acc:120,190,255 }
/* Légère variation de luminosité d'une ligne à l'autre. */
#scHome #l12SheetJouer #btnQuetes{ filter:brightness(.98) }
#scHome #l12SheetJouer #btnWeekly{ filter:brightness(.96) }
#scHome #l12SheetJouer #l12BtnOnline{ filter:brightness(.95) }

/* B. Accents ambre : halo d'icône et chevron plus vifs. */
#scHome #l12SheetJouer .l12-sheet-list > .menu-btn:not(.primary) .mi{
  border-radius:50%;
  color:#ffc21f;
  background:rgba(255,189,25,.13);
  box-shadow:0 0 0 5px rgba(255,189,25,.06), 0 0 14px rgba(255,189,25,.16);
  filter:drop-shadow(0 0 5px rgba(255,180,20,.45));
}
#scHome #l12SheetJouer #l12BtnOnline .mi{ color:#ffc21f }
#scHome #l12SheetJouer .l12-sheet-list > .menu-btn:not(.primary) .mc{ color:rgba(255,196,50,.82) }
#scHome #l12SheetJouer .l12-sheet-list > .menu-btn:not(.primary) .ml{ color:#f3f7fb }

/* D. Continuer reste l'action dominante : seule son ombre s'accorde aux cartes. */
#scHome #l12SheetJouer #btnContinue.menu-btn.primary:not(.disabled){
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 16px 34px -18px rgba(255,171,0,.95), 0 0 0 1px rgba(255,214,110,.35)!important;
}

/* E. Démo : chaleur ambre, sous Continuer. Bordure pointillée conservée. */
#scHome #l12SheetJouer #l12BtnDemo.menu-btn{
  --mj-acc:255,189,25;
  border:1px dashed rgba(255,196,50,.62)!important;
  background:
    radial-gradient(80% 140% at 0% 50%, rgba(255,176,20,.17), transparent 62%),
    linear-gradient(180deg, rgba(40,52,62,.9), rgba(18,28,40,.95))!important;
  box-shadow:
    0 1px 0 rgba(255,236,190,.12) inset,
    0 0 18px -6px rgba(255,176,20,.38),
    0 10px 22px -14px rgba(0,0,0,.9)!important;
}
#scHome #l12SheetJouer #l12BtnDemo .mi{
  color:#ffcb3a;
  background:rgba(255,189,25,.2);
  box-shadow:0 0 0 5px rgba(255,189,25,.09), 0 0 16px rgba(255,189,25,.26);
}
#scHome #l12SheetJouer #l12BtnDemo .rcf-demo-badge{
  color:#ffd257; background:rgba(255,189,25,.2);
  border-color:rgba(255,200,70,.62);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}

/* Micro-interactions : transition courte, lumière de bordure au survol / focus /
   pression. Aucune animation permanente. */
@media (hover:hover){
  #scHome #l12SheetJouer .l12-sheet-list > .menu-btn:not(.primary):hover{
    transform:translateY(-1px)!important;
    border-color:rgba(255,196,50,.62)!important;
    filter:brightness(1.06);
  }
}
#scHome #l12SheetJouer .l12-sheet-list > .menu-btn:not(.primary):focus-visible{
  border-color:rgba(255,196,50,.8)!important;
  box-shadow:0 0 0 3px rgba(255,189,25,.22), 0 10px 22px -14px rgba(0,0,0,.9)!important;
}
#scHome #l12SheetJouer .l12-sheet-list > .menu-btn:not(.primary):active,
html.rcf-lot12-c4 #scHome #l12SheetJouer .l12-sheet-list > .menu-btn.c4-pressed:not(.primary){
  transform:translateY(1px) scale(.985)!important;
  border-color:rgba(255,200,70,.75)!important;
}
@media (prefers-reduced-motion:reduce){
  #scHome #l12SheetJouer .l12-sheet-list > .menu-btn:not(.primary){ transition:none!important }
}