/* =====================================================================
   Caverne de la Rahma — thème WorkAdventure (PRUNE / aubergine, cohérent A→Z)
   Surcouche CSS RÉVERSIBLE (injectée après le CSS de WA -> nos règles gagnent).
   Aplats, flat. Aucun bleu nuit / cyan / violet. Panneaux AUBERGINE, accents ROSE.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --cr-rose:#b8348a; --cr-rose-d:#8c2268; --cr-rose-s:#f7dcec;
  --cr-ink:#2e2433; --cr-aubergine:#2e2433; --cr-aubergine-2:#241b2a;
  --cr-cream:#fbf4ec; --cr-line:#4a3d52;
}

/* ============ REMAP CENTRAL des variables HSL de WorkAdventure ============
   contrast (panneaux/fonds) : bleu nuit -> AUBERGINE
   primary + secondary (boutons/CTA/accents/actif) : violet/bleu -> ROSE        */
:root, html, body, .light, .dark{
  /* ROSE partout pour les accents/boutons (primary ET secondary) */
  --primary:321 56% 46% !important;
  --primary-100:321 56% 46% !important; --primary-200:321 56% 46% !important;
  --primary-300:321 56% 46% !important; --primary-400:321 56% 46% !important;
  --primary-500:321 56% 46% !important; --primary-600:321 62% 40% !important;
  --primary-800:321 66% 34% !important; --primary-900:321 66% 30% !important;
  --primary-1000:321 66% 26% !important; --primary-1100:321 66% 22% !important;
  --primary-1200:321 66% 20% !important; --primary-1300:321 66% 18% !important;
  --secondary:321 56% 46% !important;
  --secondary-100:321 56% 46% !important; --secondary-200:321 56% 46% !important;
  --secondary-300:321 56% 46% !important; --secondary-400:321 56% 46% !important;
  --secondary-500:321 56% 46% !important; --secondary-600:321 62% 40% !important;
  --secondary-800:321 66% 34% !important; --secondary-900:321 66% 30% !important;
  --secondary-1000:321 66% 26% !important; --secondary-1100:321 66% 22% !important;
  /* AUBERGINE pour les panneaux (on garde la structure clair->foncé du scale) */
  --contrast:280 24% 17% !important;
  --contrast-100:280 22% 86% !important; --contrast-200:280 20% 74% !important;
  --contrast-300:280 20% 62% !important; --contrast-400:280 16% 44% !important;
  --contrast-500:280 16% 36% !important; --contrast-600:280 16% 30% !important;
  --contrast-800:280 24% 18% !important; --contrast-900:280 30% 13% !important;
  --contrast-1000:280 38% 9% !important; --contrast-1100:280 48% 7% !important;
}

/* ---- Fond global (chargement + zones hors UI) : AUBERGINE, jamais bleu nuit ---- */
html, body, #game, #main-container, #game-overlay, .game-overlay,
[class*="loading"], #loader, .loader-container{
  background-color:var(--cr-aubergine) !important;
}

/* ---- Police de l'UI ---- */
body, button, input, textarea, select, .menu-container, .popups{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif !important;
}
h1,h2,h3,.menu-container h1,.menu-container h2,.popups h1,.popups h2{
  font-family:'Bricolage Grotesque', sans-serif !important;
}

/* ---- Indicateur "actif" de la barre d'action : cyan -> rose ---- */
.bottom-action-bar .border-top-light, [class*="border-top-light"]{ border-top-color:var(--cr-rose) !important; }

/* ---- Barre de progression / chargement -> rose ---- */
.progress-bar, [class*="progress-bar"] > *{ background-color:var(--cr-rose) !important; }

/* ---- Liens / ancres -> rose ---- */
a{ color:var(--cr-rose) !important; }

/* ---- Barres de défilement cohérentes (aubergine + rose) ---- */
*::-webkit-scrollbar-thumb{ background-color:var(--cr-rose) !important; border-radius:999px; }
*::-webkit-scrollbar-track{ background-color:transparent !important; }

/* ---- Masquer le logo WorkAdventure (mais GARDER le nôtre : .cr-logo) ---- */
img.logo, img[src*="logo" i], img[src*="orkadventure" i], img[alt*="orkadventure" i],
[class*="logo"]:not(.cr-logo):not(.cr-logo-mark) img,
[class*="logo"]:not(.cr-logo):not(.cr-logo-mark) svg{ display:none !important; }
.cr-logo, .cr-logo *{ display:revert !important; }
.cr-logo{ display:flex !important; }

/* ---- Barre de chargement bleue (.progress-bar.secondary) -> rose plein ---- */
.progress-bar, .progress-bar.secondary, [class*="progress-bar"]:not([class*="container"]){
  background:var(--cr-rose) !important; background-image:none !important; box-shadow:none !important;
}
.progress-bar-container, .progress-bar-container.secondary{ background:rgba(184,52,138,.16) !important; }

/* ---- Boutons "Outils" (éditeur de carte) + "Partager" : masqués (expérience enfant) ---- */
[class*="map-editor"], .map-editor-container, .map-editor-right{ display:none !important; }
.bottom-action-bar [class*="invite"],
.bottom-action-bar [class*="share"],
.bottom-action-bar [class*="map-editor"],
.bottom-action-bar [class*="mapEditor"],
.bottom-action-bar [class*="screen-sharing"]{ display:none !important; }

/* ---- Page caméra/micro : cartes blanches trop agressives -> aubergine doux ---- */
.enableCameraScene .bg-white,
.enableCameraScene [class*="bg-white"],
.enableCameraScene [style*="background-color: rgb(255"],
.enableCameraScene [style*="background:#fff" i],
.enableCameraScene [style*="background-color:#fff" i]{
  background-color:rgba(46,36,51,.66) !important; background-image:none !important;
  border:1px solid rgba(184,52,138,.30) !important; box-shadow:none !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* texte des cartes : sombre -> clair pour rester lisible sur l'aubergine */
.enableCameraScene .bg-white *,
.enableCameraScene [class*="bg-white"] *{ color:#f3e9f1 !important; }
.enableCameraScene .bg-white .text-dark,
.enableCameraScene [class*="bg-white"] [class*="text-dark"]{ color:#fff !important; }

/* (L'écran d'attente PHASE 1 #cr-wait est entièrement géré par boot.js, autonome.) */

/* ---- Notre logo sur l'ÉCRAN DE CHARGEMENT NATIF de WA (injecté par brand.js) ----
   On GARDE l'écran natif (fond flou + barre qui se remplit) ; on remplace juste
   le logo WorkAdventure par le nôtre, en grand, en haut au centre. Flat. */
.loader .cr-logo{ display:flex; flex-direction:column; align-items:center; gap:14px;
  margin:0 auto 46px; text-align:center; animation:cr-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.loader .cr-logo .cr-logo-mark{ width:clamp(54px,7vw,78px); height:auto; }
.loader .cr-logo .cr-logo-text{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
  font-size:clamp(28px,5vw,52px); color:#fff; letter-spacing:.4px; line-height:1; }
.loader .cr-logo .cr-logo-text b{ color:#e35bb0; font-weight:800; }
.loader .cr-logo .cr-logo-sub{ font-family:'Inter', sans-serif; font-weight:500;
  font-size:clamp(12px,1.6vw,15px); color:#d2c5dc; letter-spacing:.3px; }
@keyframes cr-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ============ Simplification de la barre d'action (élèves) ============
   Masque des boutons WorkAdventure non pertinents, pour garder les enfants
   concentrés et SUR LE MÊME SALON. 100 % réversible (surcouche CSS + brand.js).
     - « Outils » (éditeur / explorateur de carte) : [data-testid="map-menu"]
     - « Liste des salons » / Apps : [data-testid="apps-button"]
     - « Se connecter » et « Partager » (sans data-testid) : brand.js leur
       ajoute la classe .cr-hidden-btn (détection par libellé). */
[data-testid="map-menu"],
[data-testid="apps-button"],
.cr-hidden-btn{ display:none !important; }

/* ---- Boutons d'INTERACTION ENTRE JOUEURS masqués pour TOUS les comptes ----
   (plateforme enfants : tout le monde reste sur le même salon ; pas de suivi /
   partage d'écran / verrou de discussion entre élèves). N'apparaissent que près
   d'un autre joueur (en bulle) -> on ne les voit pas quand on est seul, d'où
   l'impression qu'ils étaient déjà désactivés côté admin.
   Sélecteurs RELEVÉS DANS LA SOURCE WA EN PROD (ActionBar/MenuIcons) :
     - « Partager mon écran »        -> [data-testid="screenShareButton"]  (ScreenSharingMenuItem)
     - « Verrouiller la discussion » -> [data-testid="lock-button"]        (LockDiscussionMenuItem)
     - « Demander à vous suivre »    -> classList "group/btn-follow"        (FollowMenuItem) */
[data-testid="screenShareButton"],
[data-testid="lock-button"],
[class*="btn-follow"]{ display:none !important; }

/* ---- FIX co-website : bande vide + barre de resize inoperante ----
   Regression upstream de notre image play:master du 2026-06-01 (commit 754c7b53) :
   #game porte "flex-1 overflow-hidden", donc jeu et co-website sont FIGES a
   50/50 pendant que widthPercent / le drag de la barre ne redimensionnent que
   le canvas Phaser -> bande de fond vide entre les deux, drag qui "etire la
   bande". Fix officiel 150e2fcb (2026-06-04, releases >= v1.32.x) = retirer
   ces 2 classes ; on le replique ici, uniquement quand un co-website est
   ouvert (:has). #game colle alors a son canvas et le wrapper flex-1 du
   co-website absorbe tout le reste : la barre redimensionne vraiment. */
#main-container:has(#cowebsites-container) #game{
  flex:0 1 auto !important;
  overflow:visible !important;
}

/* ---- Barre d'action (emoji + micro + camera) : deportee a DROITE ----
   La barre est centree par "m-auto" dans une rangee flex pleine largeur ;
   margin-left:auto la pousse contre le bord droit, et libere le centre. */
.bottom-action-bar{
  margin-left:auto !important;
  margin-right:14px !important;
}