/* ============================================================================
   RCF · LOT 12 — PHASE C.6 — CORRECTIONS POST-AUDIT C.5
   ----------------------------------------------------------------------------
   1) Menu principal : vrai fond visible + boutons verre, sans casser le 9:16.
   2) Quêtes : abandon de la grille "dashboard" 2 colonnes au profit de chapitres
      pleine largeur, plus lisibles et plus ludiques.
   3) Formation : habillage léger de la sélection ciblée (logique dans le moteur).
   ============================================================================ */

/* ============================ MENU PRINCIPAL ============================== */
/* C.5 ciblait `.home` et `.menu-btn`, sélecteurs qui ne correspondent pas au
   menu principal courant (`.l12-home` / `.l12-btn`). On corrige ici les vraies
   surfaces, sans toucher au logo, à l'image validée ni au 9:16 strict. */
#scHome .l12-home{
  height:100%!important;
  min-height:100%!important;
  background:#04101b!important;
}
/* ---------------------------------------------------------------------------
   CORRECTIF D'INTÉGRATION — la surface d'accueil ne remplissait pas la scène.

   La C.6 pose `height:100%` sur `.l12-home` pour que le placement en
   `margin-top:auto` travaille dans le cadre 9:16 réel. Ce pourcentage ne se
   résout pas : le parent `#scHome.screen` est en hauteur `auto`, donc la règle
   retombe sur la hauteur de contenu. Mesuré sur l'arbre C.6 posé :

       390x844   accueil 660 px dans une scène de  693
       414x736   accueil 669 px dans une scène de  736
       1440x900  accueil 643 px dans une scène de  900   <- un quart nu
       1920x1080 accueil 643 px dans une scène de 1080   <- 40 % nu

   Sur PC, la photo s'arrêtait donc bien au-dessus du bas du cadre et laissait
   une bande sombre sous la barre `Paramètres · Classement · Infos`. C'est
   exactement le « gros espace mort anormal sur PC » que le § 9 demande de
   contrôler ; il précède la C.6 (la C.5 l'avait déjà) mais la C.6 annonce le
   corriger, donc on le corrige ici.

   On donne au conteneur une VRAIE chaîne de hauteur, en flux et sans aucune
   unité de viewport : `.wrap` devient une colonne flex UNIQUEMENT quand
   l'accueil est affiché, et l'accueil prend la place restante. Les autres
   écrans ne voient rien changer. Après correctif, l'accueil mesure exactement
   la hauteur de la scène aux quatre tailles imposées. */
.wrap:has(> #scHome.screen.on){
  display:flex!important;
  flex-direction:column!important;
}
.wrap:has(> #scHome.screen.on) > #scHome.screen.on{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}
#scHome .l12-home{
  flex:1 1 auto!important;
}

#scHome .l12-home-in{
  height:100%!important;
  min-height:0!important;
}
#scHome .l12-home-bg{
  background-position:50% 30%!important;
  background-size:cover!important;
  filter:saturate(1.08) contrast(1.02) brightness(1.03)!important;
  transform:scale(1.006);
}
#scHome .l12-home-veil{
  background:
    linear-gradient(180deg,
      rgba(3,12,21,.34) 0%,
      rgba(3,12,21,.06) 24%,
      rgba(3,12,21,.10) 49%,
      rgba(3,12,21,.52) 72%,
      rgba(2,9,16,.82) 100%)!important;
}
#scHome .l12-home .home-menu{
  width:min(86%,430px)!important;
  align-self:center!important;
  gap:10px!important;
}
#scHome .l12-btn:not(.l12-btn--primary){
  background:linear-gradient(180deg,rgba(9,29,47,.55),rgba(3,15,26,.66))!important;
  border-color:rgba(190,215,235,.36)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
  backdrop-filter:blur(10px) saturate(1.08)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 13px 27px -22px rgba(0,0,0,.82)!important;
}
#scHome .l12-btn:not(.l12-btn--primary):hover{
  background:linear-gradient(180deg,rgba(12,38,59,.64),rgba(5,19,31,.73))!important;
  border-color:rgba(255,203,65,.48)!important;
}
#scHome .l12-mini button{
  background:rgba(5,20,34,.48)!important;
  border-color:rgba(188,213,232,.30)!important;
  -webkit-backdrop-filter:blur(9px)!important;
  backdrop-filter:blur(9px)!important;
}

/* ============================ QUÊTES ===================================== */
/* La C.5 a corrigé l'architecture (7 familles -> 5 quêtes) mais conservait une
   grille 2 colonnes trop proche d'un dashboard. Chaque famille devient ici un
   chapitre pleine largeur : gros numéro, accent distinct, texte lisible et
   progression immédiatement identifiable. */
.q5-shell{--q6-accent:#ffc52d;--q6-rgb:255,197,45}
.q5-shell-A{--q6-accent:#ffc52d;--q6-rgb:255,197,45}
.q5-shell-B{--q6-accent:#55c6ff;--q6-rgb:85,198,255}
.q5-shell-C{--q6-accent:#8fe388;--q6-rgb:143,227,136}
.q5-shell-D{--q6-accent:#ff8b62;--q6-rgb:255,139,98}
.q5-shell-E{--q6-accent:#c39cff;--q6-rgb:195,156,255}
.q5-shell-F{--q6-accent:#6be0d1;--q6-rgb:107,224,209}
.q5-shell-G{--q6-accent:#ff6f91;--q6-rgb:255,111,145}

#scQuetes .q5-bg{
  filter:saturate(.94) brightness(.70)!important;
  background-position:50% 35%!important;
}
#scQuetes .q5-veil{
  background:linear-gradient(180deg,rgba(2,10,17,.20),rgba(3,12,21,.64) 34%,rgba(4,15,25,.90) 72%,#06111c 100%)!important;
}
#scQuetes .q5-hero{
  min-height:228px!important;
  padding-bottom:19px!important;
  background:linear-gradient(180deg,rgba(2,9,16,.10),rgba(4,17,29,.72))!important;
}
#scQuetes .q5-hero h1{font-size:34px!important;text-shadow:0 3px 18px rgba(0,0,0,.5)}
#scQuetes .q5-hero>p{font-size:12.8px!important;max-width:410px!important;color:#d0dbe4!important}
#scQuetes .q5-progress{background:rgba(4,18,31,.42)!important;border-color:rgba(255,255,255,.16)!important}
#scQuetes .q5-main{padding:17px 14px 0!important}
#scQuetes .q5-section-title{margin:0 2px 10px!important}
#scQuetes .q5-section-title>span{font-size:14px!important}
#scQuetes .q5-section-title small{font-size:9.5px!important;color:#91a6b5!important}

#scQuetes .q5-family-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
}
#scQuetes .q5-family{
  --q6-local:#ffc52d;
  position:relative!important;
  min-height:116px!important;
  width:100%!important;
  padding:13px 42px 12px 68px!important;
  border-radius:15px!important;
  border:1px solid rgba(var(--q6-local-rgb,255,197,45),.25)!important;
  background:
    linear-gradient(105deg,rgba(var(--q6-local-rgb,255,197,45),.12),rgba(7,28,45,.72) 31%,rgba(3,15,26,.88) 100%)!important;
  box-shadow:0 14px 32px -26px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.05) inset!important;
  overflow:hidden!important;
  text-align:left!important;
}
#scQuetes .q5-family::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--q6-local)!important;
  box-shadow:0 0 18px rgba(var(--q6-local-rgb,255,197,45),.42);
}
#scQuetes .q5-family::after{
  width:180px!important;height:180px!important;right:-90px!important;top:-95px!important;
  background:radial-gradient(circle,rgba(var(--q6-local-rgb,255,197,45),.17),transparent 68%)!important;
}
#scQuetes .q5-family-A{--q6-local:#ffc52d;--q6-local-rgb:255,197,45}
#scQuetes .q5-family-B{--q6-local:#55c6ff;--q6-local-rgb:85,198,255}
#scQuetes .q5-family-C{--q6-local:#8fe388;--q6-local-rgb:143,227,136}
#scQuetes .q5-family-D{--q6-local:#ff8b62;--q6-local-rgb:255,139,98}
#scQuetes .q5-family-E{--q6-local:#c39cff;--q6-local-rgb:195,156,255}
#scQuetes .q5-family-F{--q6-local:#6be0d1;--q6-local-rgb:107,224,209}
#scQuetes .q5-family-G{--q6-local:#ff6f91;--q6-local-rgb:255,111,145}
#scQuetes .q5-family-top{display:block!important}
#scQuetes .q5-index{
  position:absolute!important;left:14px!important;top:18px!important;
  width:40px!important;height:40px!important;display:grid!important;place-items:center!important;
  border-radius:12px!important;
  background:rgba(var(--q6-local-rgb,255,197,45),.10)!important;
  border:1px solid rgba(var(--q6-local-rgb,255,197,45),.30)!important;
  color:var(--q6-local)!important;font-size:21px!important;
  text-shadow:0 0 14px rgba(var(--q6-local-rgb,255,197,45),.24)!important;
}
#scQuetes .q5-count{
  position:absolute!important;right:12px!important;top:12px!important;
  padding:4px 7px!important;background:rgba(3,14,24,.55)!important;
  color:#d7e1e9!important;border-color:rgba(255,255,255,.12)!important;
}
#scQuetes .q5-family-tag{margin:0 0 4px!important;color:var(--q6-local)!important;font-size:7.8px!important}
#scQuetes .q5-family h2{margin:0 0 4px!important;font-size:17px!important;line-height:1.08!important;max-width:82%!important}
#scQuetes .q5-family p{margin:0!important;font-size:10.3px!important;line-height:1.34!important;color:#adbecb!important;max-width:92%!important}
#scQuetes .q5-family-foot{
  position:static!important;margin-top:8px!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;color:#c3d0d9!important;font-size:9px!important;
}
#scQuetes .q5-family-foot b{color:var(--q6-local)!important;font-size:20px!important}
#scQuetes .q5-family:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(var(--q6-local-rgb,255,197,45),.60)!important;
  filter:brightness(1.06)!important;
}

/* Famille ouverte : l'accent du chapitre suit les quêtes. */
#scQuetes .q5-family-hero{min-height:205px!important}
#scQuetes .q5-shell-A .q5-family-hero,#scQuetes .q5-shell-A .q5-pick-hero{--q6-accent:#ffc52d;--q6-rgb:255,197,45}
#scQuetes .q5-shell-B .q5-family-hero,#scQuetes .q5-shell-B .q5-pick-hero{--q6-accent:#55c6ff;--q6-rgb:85,198,255}
#scQuetes .q5-shell-C .q5-family-hero,#scQuetes .q5-shell-C .q5-pick-hero{--q6-accent:#8fe388;--q6-rgb:143,227,136}
#scQuetes .q5-shell-D .q5-family-hero,#scQuetes .q5-shell-D .q5-pick-hero{--q6-accent:#ff8b62;--q6-rgb:255,139,98}
#scQuetes .q5-shell-E .q5-family-hero,#scQuetes .q5-shell-E .q5-pick-hero{--q6-accent:#c39cff;--q6-rgb:195,156,255}
#scQuetes .q5-shell-F .q5-family-hero,#scQuetes .q5-shell-F .q5-pick-hero{--q6-accent:#6be0d1;--q6-rgb:107,224,209}
#scQuetes .q5-shell-G .q5-family-hero,#scQuetes .q5-shell-G .q5-pick-hero{--q6-accent:#ff6f91;--q6-rgb:255,111,145}
#scQuetes .q5-family-hero,#scQuetes .q5-pick-hero{
  background:
    radial-gradient(circle at 82% 30%,rgba(var(--q6-rgb),.18),transparent 32%),
    linear-gradient(145deg,rgba(8,38,62,.94),rgba(3,14,24,.96))!important;
}
#scQuetes .q5-family-hero .q5-kicker,#scQuetes .q5-pick-hero .q5-kicker{color:var(--q6-accent)!important}
#scQuetes .q5-mini-progress{border-color:rgba(var(--q6-rgb),.32)!important;background:rgba(var(--q6-rgb),.09)!important;color:var(--q6-accent)!important}
#scQuetes .q5-list{gap:8px!important}
#scQuetes .q5-quest{
  position:relative!important;
  padding:13px 38px 11px 14px!important;
  border-radius:14px!important;
  background:linear-gradient(155deg,rgba(9,31,49,.82),rgba(3,15,26,.91))!important;
  border-color:rgba(166,198,220,.22)!important;
}
#scQuetes .q5-quest::before{
  content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;
  background:var(--q6-accent)!important;opacity:.78;
}
#scQuetes .q5-quest:hover{border-color:rgba(var(--q6-rgb),.55)!important}
#scQuetes .q5-q-foot b{color:var(--q6-accent)!important}
#scQuetes .q5-done::before{background:#52d59d!important}

/* ============================ FORMATIONS ================================= */
/* La logique C.6 ne montre plus tout ce qui est techniquement accessible.
   Cette couche rend la sélection ciblée explicite sans créer de nouveau système. */
.cp-form-note{
  margin:0 0 9px;padding:8px 10px;border-radius:10px;
  border:1px solid rgba(85,198,255,.18);background:rgba(55,132,179,.07);
  color:#9eb5c6;font-size:10.5px;line-height:1.4;
}
.cp-form-note b{color:#dfeaf2}
.cp-form-count{
  display:inline-flex;margin-left:6px;padding:2px 6px;border-radius:999px;
  background:rgba(255,197,45,.10);border:1px solid rgba(255,197,45,.22);
  color:#ffd45e;font:700 8px/1 var(--mono);letter-spacing:.06em;
}

@media(max-width:390px){
  #scHome .l12-home .home-menu{width:91%!important}
  #scQuetes .q5-family{min-height:112px!important;padding-left:66px!important;padding-right:36px!important}
  #scQuetes .q5-family h2{font-size:16px!important}
  #scQuetes .q5-family p{font-size:9.8px!important}
}