/* =========================================================
   GLOBAL UI (fusion main1 + choice1 + levels1)
   ========================================================= */

/* ---------- Variables (superset) ---------- */
:root{
  /* shared */
  --shadow: rgba(0,0,0,.22);
  --pad: clamp(14px, 2.2vw, 44px);

  /* backgrounds (tu peux changer au besoin) */
  --bg-image: url("../img/41.png"); /* default */

  /* main1 cards */
  --cardRadius: 28px;
  --innerRadius: 18px;
  --red:#e63c5f;
  --blue:#1f79df;
  --gold:#d98a23;
  --paper: rgba(255,255,255,.14);
  --wLeft:  clamp(280px, 27vw, 420px);
  --wMid:   clamp(320px, 30vw, 460px);
  --wRight: clamp(280px, 27vw, 420px);
  --hLeft:  clamp(380px, 52vh, 560px);
  --hMid:   clamp(420px, 56vh, 610px);
  --hRight: clamp(380px, 52vh, 560px);

  /* choice1 colors */
  --orange:#9B5DE5;
  --orange2:#8A50CE;
  --paper2: rgba(255,255,255,.82);
  --ink: #2b2b2b;

  /* levels1 grid / stages */
  --bgA:#eaf9ff;
  --bgB:#fff3ff;
  --grid:#bfe7ff;
  --ring:#2aa9b0;
  --ring2:#ff4f95;
  --tileBg:#ffffffee;
  --text:#0b1b2b;
  --blueTint: rgba(40, 150, 255, .20);

  /* selector positioning variables (JS sets these) */
  --sx: 0px;
  --sy: 0px;

}


/* ---------- Base reset ---------- */
*{ box-sizing: border-box; }
html,body{ 
  height:100%;

 }

@font-face{
  font-family: "BanlieueDisco";
  src: url("/fonts/BanlieueDisco.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
 .txt, .label,h2, .raceTitle {
  font-family: "BanlieueDisco", sans-serif;

 }
 @font-face {
  font-family: "FjallaOne";
  src: url("/fonts/FjallaOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
 }
body{
  margin:0;
  font-family: "BanlieueDisco", sans-serif;
  min-height:100vh;
  overflow:hidden;
  background: var(--bg-image) center / cover no-repeat fixed;
}
.levelss{
  background-image: url("/img/FOND-SELECTION.webp");
}


/* grain / scanlines (ok for all pages) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.06) 2px,
    transparent 2px,
    transparent 7px
  );
  mix-blend-mode: overlay;
  opacity: .50;
}

/* =========================================================
   SELECTOR (unifié pour les 3 pages)
   - translate(var--sx/--sy) + scale dans le même transform
   ========================================================= */
@keyframes selectorPulse{
  0%   { transform: translate(var(--sx), var(--sy)) scale(1); }
  50%  { transform: translate(var(--sx), var(--sy)) scale(1.06); }
  100% { transform: translate(var(--sx), var(--sy)) scale(1); }
}


.selector{
  position:absolute;
  pointer-events:none;
  z-index: 1500;
  opacity: 0;
  transform: translate(var(--sx), var(--sy)) scale(1);
  will-change: transform, width, height, opacity;
  transition: opacity .12s ease;
}

.selector.is-anim{
  opacity: 1;
  animation: selectorPulse 2s ease-in-out infinite;
}
.lock-selector.is-anim{
  animation: none !important;
  transition: none !important;
}


.selector .c{
  position:absolute;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
  user-select:none;
  -webkit-user-drag:none;
}

/* default corners */
.selector .tl{ top:-10px !important; left:-10px !important; transform: rotate(0deg) !important; }
.selector .tr{ top:-10px !important; right:-10px !important; transform: rotate(90deg) !important; }
.selector .br{ bottom:-10px !important; right:-10px !important; transform: rotate(180deg) !important; }
.selector .bl{ bottom:-10px !important; left:-10px !important; transform: rotate(270deg) !important; }



.lock-selector .tl {
    top: 30px !important;
    left: 20px !important;
    transform: rotate(0deg) !important;
}
.lock-selector .tr {
    top: 30px !important;
    right: 20px !important;
    transform: rotate(90deg) !important;
}
.lock-selector .bl {
    bottom: 30px !important;
    left: 20px !important;
    transform: rotate(270deg) !important;
}
.lock-selector .br {
    bottom: 30px !important;
    right: 20px !important;
    transform: rotate(180deg) !important;
}
/* =========================================================
   MAIN1 – 3 CARDS (classes: .ui .title .cards .cardBtn etc.)
   ========================================================= */
.ui{
  position: relative;
  min-height:100vh;
  padding: var(--pad);
}

.title{
  position:absolute;
  left: var(--pad);
  top: var(--pad);
  font-size: clamp(28px, 4.2vw, 46px);
  text-shadow: 0 16px 28px rgba(0,0,0,.26);
  user-select:none;
  color:#fff;
}

.cards{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -44%);
  width: min(1500px, 96vw);
  display:grid;
  grid-template-columns: auto auto auto;
  align-items:center;
  justify-content:center;
  gap: clamp(18px, 2.6vw, 38px);
  padding-top: 40px;
}

.cardBtn{
  position:relative;
  border:0;
  padding:0;
  background: transparent;
  color:inherit;
  cursor:pointer;
  outline:none;
  overflow: visible;
  transform-origin: 50% 60%;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.cardBtn.left  { width: var(--wLeft);  height: var(--hLeft);  transform: rotate(-4deg); }
.cardBtn.mid   { width: var(--wMid);   height: var(--hMid);   transform: rotate(0deg);  z-index: 2; }
.cardBtn.right { width: var(--wRight); height: var(--hRight); transform: rotate(4deg); }

.cardAnim{
  position:absolute;
  inset:0;
  transform-origin: 50% 60%;
  will-change: transform, filter;
  transition: transform .18s ease, filter .18s ease;
}

.cardBtn:hover .cardAnim,
.cardBtn:focus-visible .cardAnim{
  transform: scale(1.18);
  filter: saturate(1.08) contrast(1.02);
  z-index: 10;
}

.cardBtn:hover .cardAnim{
  animation: selectedWiggle 2s ease-in-out infinite;
}

/* card visuals */
.cardShell{
  position:absolute;
  inset: 0;
  border-radius: var(--cardRadius);
  background: var(--paper);
  border: 6px solid rgba(255,255,255,.70);
  box-shadow: 0 18px 0 rgba(255,255,255,.10), 0 26px 40px var(--shadow);
  overflow:hidden;
}
.cardInner{
  position:absolute;
  inset: 14px;
  border-radius: var(--innerRadius);
  border: 6px solid rgba(255,255,255,.55);
  overflow:hidden;
  background:
    radial-gradient(900px 280px at 50% 8%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}
.cardInner::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 2px, transparent 2px, transparent 10px);
  opacity:.6;
  pointer-events:none;
  mix-blend-mode: overlay;
}

.badgeRound{
  position:absolute;
  top: -18px;
  left: -18px;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 7px solid rgba(255,255,255,.92);
  box-shadow: 0 18px 28px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  transform: rotate(-10deg);
  z-index: 3;
}
.badgeRound img{
  width: 52px; height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.20));
}

.keys{
  position:absolute;
  top: 18px;
  right: 18px;
  display:flex;
  gap: 6px;
  opacity:.85;
  z-index: 3;
}
.keys i{
  width: 14px; height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 6px 12px rgba(0,0,0,.14);
  position:relative;
}
.keys i::after{
  content:"";
  position:absolute;
  left:50%; top:100%;
  width:2px; height:7px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.72);
  border-radius:2px;
  opacity:.9;
}

.art{
  position:absolute;
  inset: 82px 24px 98px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index: 2;
}
.art img{
  width: min(260px, 58%);
  height: 36vh;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .18));
}

.ribbon{
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  padding: 16px 24px;
  font-size: 28px;
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 18px 28px rgba(0, 0, 0, .20);
  text-shadow: 0 6px 14px rgba(0, 0, 0, .20);
  white-space: nowrap;
  z-index: 3;
}
.ribbon::before, .ribbon::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 14px 24px rgba(0,0,0,.12);
  opacity: .95;
}
.ribbon::before{ left:-7px; }
.ribbon::after{ right:-7px; }

.t-red  .cardShell{ background: rgba(255, 94, 115, .22); }
.t-red  .cardInner{ background: linear-gradient(180deg, rgba(255, 94, 115, .30), rgba(255,255,255,.08)); }
.t-red  .ribbon{ background: var(--red); }

.t-blue .cardShell{ background: rgba(70, 140, 255, .22); }
.t-blue .cardInner{ background: linear-gradient(180deg, rgba(70, 140, 255, .30), rgba(255,255,255,.08)); }
.t-blue .ribbon{ background: var(--blue); }

.t-gold .cardShell{ background: rgba(255, 190, 70, .22); }
.t-gold .cardInner{ background: linear-gradient(180deg, rgba(255, 190, 70, .32), rgba(255,255,255,.08)); }
.t-gold .ribbon{ background: var(--gold); }

.descBox{
  position:absolute;
  right: var(--pad);
  bottom: var(--pad);
  width: min(460px, 44vw);
  background: rgba(35, 115, 220, .75);
  border: 6px solid rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 22px 36px rgba(0,0,0,.22);
  color:#fff;
  
  line-height: 1.35;
  backdrop-filter: blur(6px);
}

.hint{
  position:absolute;
  left: var(--pad);
  bottom: var(--pad);
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.92);
  
  text-shadow: 0 10px 18px rgba(0,0,0,.20);
  user-select:none;
}
.hint .b{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
  border: 3px solid rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  box-shadow: 0 14px 22px rgba(0,0,0,.16);
  font-size: 14px;
}

.blueBar {
    position: absolute;
    left: var(--pad);
    bottom: calc(var(--pad));
    width: min(500px, 48vw);
    border-radius: 22px;
    background-color: #4d96ff;
    border: 8px solid rgb(255, 255, 255);
    box-shadow: 0 26px 44px rgba(0, 0, 0, .22);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    padding: 14px 18px;
    gap: 18px;
    z-index: 6;
    opacity: 90%;
}

.level-select{
  display: flex;
  gap: 100px;
  justify-content: center;
  margin-bottom: 24px;
}

.level-btn{
  font-size: 1.2rem;
  padding: 14px 22px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.6;
}

.level-btn.active{
  transform: scale(1.4);
  border: black 1px solid;
  opacity: 1;
}

p, h2 {
    padding-left: 30px;
    padding-right: 30px;
}

.blueBar .row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 18px;
  min-width: 0;
}
.blueBar .pair{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 0;
}
.blueBar .ico{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,0.40);
  border: 4px solid rgba(255,255,255,.92);
  box-shadow: 0 16px 26px rgba(0,0,0,.16);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
}
.blueBar .ico img{
  width: 70%;
  height: 70%;
  object-fit: contain;
  display:block;
}
.blueBar .txt {
    color: #fff;
    font-size: clamp(18px, 1.9vw, 20px);
    text-shadow: 0 0px 16px rgba(0, 0, 0, .22);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* responsive main1 */
@media (max-width: 980px){
  body{ overflow:auto; }
  .cards{
    position: static;
    transform:none;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 90px;
  }
  .cardBtn.left, .cardBtn.mid, .cardBtn.right{
    width: min(520px, 92vw);
    height: 520px;
    transform: rotate(0deg);
  }
  .descBox{ position: static; width: 100%; margin-top: 14px; }
  .hint{ position: static; margin-top: 10px; }
  .title{ position: static; margin-bottom: 10px; }
}

/* =========================================================
   CHOICE1 – Top Ride layout
   (classes: .topbar .layout .leftCol .midCol .rightCol etc.)
   ========================================================= */

.topbar{
  position:absolute;
  left: var(--pad);
  top: var(--pad);
  display:flex;
  align-items:center;
  gap: 14px;
  z-index: 5;
  user-select:none;
}

.logoBadge{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 4px solid rgba(255,255,255,.95);
  box-shadow: 0 18px 30px rgba(0,0,0,.18);
}

.logoBadge .logoImg{
  width: 200px;

  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.14));
}



.layout{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-46%);
  width: min(1400px, 96vw);
  height: min(720px, 76vh);
  display:grid;
  grid-template-columns: 1.05fr .78fr 1.1fr;
  gap: clamp(16px, 2.2vw, 34px);
  align-items: center;
  z-index: 2;
}
#ctrlConsole{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  max-height: 35vh;
  overflow-y: auto;

  padding: 10px;

  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);

  color: #00ff88;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.3;

  z-index: 999999;
}

#ctrlConsole div{
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 2px 0;
}

.menuItem{
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.menuItem .anim{
  position:absolute;
  inset:0;
  transform-origin: 50% 60%;
  will-change: transform, filter;
  transition: transform .18s ease, filter .18s ease;
}
.menuItem:hover .anim,
.menuItem:focus-visible .anim{
  transform: scale(1.18);
  filter: saturate(1.08) contrast(1.02);
  z-index: 10;
}
.menuItem:hover .anim{
  animation: selectedWiggle 2s ease-in-out infinite;
}

/* left */
.leftCol{
  position: relative;
  height: 100%;
  display:flex;
  align-items:start;
  justify-content:center;
}
.raceBtn{
  width: clamp(360px, 34vw, 549px);
  height: clamp(260px, 40vh, 360px);
  transform: rotate(-6deg);
}

/* reusable “paper” card */
.paperCard{
  position:absolute;
  inset:0;
  border-radius: 26px;
  background: var(--paper2);
  border: 6px solid rgba(255,255,255,.95);
  box-shadow: 0 24px 44px rgba(0,0,0,.22);
  overflow:hidden;
}
.paperCard .inner{
  position:absolute;
  inset: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80));
  border: 6px solid rgba(255,255,255,.72);
  overflow:hidden;
}
.paperCard .inner::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.035), rgba(0,0,0,.035) 2px, transparent 2px, transparent 10px);
  opacity:.4;
  pointer-events:none;
}

.raceAccent{
  position:absolute;
  left:0; top:0; bottom:0;
  width: 44%;
  background: linear-gradient(180deg, var(--orange), var(--orange2));
  border-right: 6px solid rgba(255,255,255,.70);
}
.raceIcon{
  position:absolute;
  left: 26px;
  top: 42%;
  transform: translateY(-50%);
  width: 84px;
  height: 84px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  display:grid;
  place-items:center;
  box-shadow: 0 16px 26px rgba(0,0,0,.14);
  font-size: 42px;
}
.raceTitle{
  position:absolute;
  left: 52%;
  top: 44%;
  transform: translate(-50%,-50%);
  
  font-size: clamp(30px, 4vw, 56px);
  
  color: #2b2b2b;
}
.howTo{
  position:absolute;
  left: 52%;
  bottom: -11px;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.90);
  border: 4px solid rgba(255,255,255,.95);
  
  color:#333;
  box-shadow: 0 14px 22px rgba(0,0,0,.12);
  font-size: 14px;
  white-space:nowrap;
}
.howTo .y{
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--orange);
  color:#fff;
  display:grid;
  place-items:center;
  font-size: 13px;
  box-shadow: 0 10px 18px rgba(0,0,0,.16);
}

/* mid */
.midCol{
  position: relative;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: end;
  gap: 70px;
  align-items: center;
}


/* DEBUT BTN*/
.stage-grid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  padding: 18px 2px 28px;
}
@media (max-width: 1200px){ .stage-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 992px){ .stage-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 576px){ .stage-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

#btnClassique{
  transform: rotate(0deg);
  margin-right: 12px;
  outline: none;
}
#btnCustom{
  transform: rotate(0deg);
  width: 97%;
  margin-left: 12px;
  outline: none;
}
#btnPractice{
    transform: rotate(0deg);
    margin-top: 2.5vh;
    width: 100%;
    height: 100%;
    margin-right: 12px;
    outline: none;
}
#btnGuide{
  transform: rotate(0deg);
  margin-top: 5vh;
  margin-left: 12px;

}
  #goMainImg{
    cursor: not-allowed;
    opacity: .45;
    filter: grayscale(0.2);
    transition: opacity .15s ease, transform .08s ease, filter .15s ease;
  }
  #goMainImg.is-ready{
    cursor: pointer;
    opacity: 1;
    filter: none;
  }
  #goMainImg.is-ready:active{
    transform: scale(.99);
  }
/* FIN BTN*/

.miniCard{
  position:absolute;
  inset:0;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 6px solid rgba(255,255,255,.95);
  box-shadow: 0 20px 34px rgba(0,0,0,.18);
  overflow:hidden;  
}
.miniCard .accent{
  position:absolute;
  left:0; top:0; bottom:0;
  width: 34%;
  background: linear-gradient(180deg, #8A50CE, #9B5DE5);
  border-right: 6px solid rgba(255,255,255,.72);
  display:grid;
  place-items:center;
  font-size: 40px;
}
.miniCard .label{
  position:absolute;
  left: 42%;
  top: 50%;
  transform: translateY(-50%);
  
  font-size: 26px;
  color:#2b2b2b;
  
}
.miniCard .dots{
  position:absolute;
  left: 42%;
  bottom: 14px;
  display:flex;
  gap: 6px;
  opacity:.85;
}
.miniCard .dots i{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
}

/* right preview */
.rightCol{
  position: relative;
  height: 100%;
  display:flex;
  align-items:start;
  justify-content:center;
}
.preview{
  width: min(560px, 42vw);
  height: min(520px, 60vh);
  border-radius: 18px;
  background: rgba(255,255,255,.85);
  border: 8px solid rgba(255,255,255,.95);
  box-shadow: 0 26px 46px rgba(0,0,0,.22);
  overflow:hidden;
  transform: rotate(1.2deg);
  position:relative;
}
.preview .shot{
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  height: 70%;
  border-radius: 12px;
  background: rgba(0, 0, 0, .10);
  overflow: hidden;
  border: 6px solid rgba(255, 255, 255, .90);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .16);
}
.preview .shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.preview .caption{
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;

  font-size: clamp(18px, 2vw, 35px);
  color: #2b2b2b;
}

/* phone button */
.phoneBtn {
    position: absolute;
    outline: none;
    left: 64vw;
    bottom: 83vh;
    width: 8vw;
    height: 13vh;
    z-index: 6;
    background: url(/img/BTN-PARAM.png) center / contain no-repeat;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.phoneBtn:hover {
  filter: brightness(1.1);
}

.phoneCard{
  position:absolute;
  inset:0;
  border-radius: 22px;
  background: rgba(30,30,30,.78);
  border: 8px solid rgba(255,255,255,.92);
  box-shadow: 0 26px 42px rgba(0,0,0,.26);
  overflow:hidden;
}
.phoneCard .screen{
  position:absolute;
  inset: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  overflow:hidden;
}
.phoneCard .screen .left{
  position:absolute;
  left:0; top:0; bottom:0;
  width: 34%;
  background: linear-gradient(180deg, #8A50CE, #9B5DE5);
  display:grid;
  place-items:center;
  font-size: 42px;
  color:#fff;
  text-shadow: 0 10px 18px rgba(0,0,0,.20);
}
.phoneCard .screen .txt{
  position:absolute;
  left: 40%;
  top: 50%;
  transform: translateY(-50%);
  
  font-size: 28px;
  color:#2b2b2b;
  
  white-space:nowrap;
}
.phoneCard .screen .dots{
  position:absolute;
  left: 40%;
  bottom: 14px;
  display:flex;
  gap: 6px;
  opacity:.85;
}
.phoneCard .screen .dots i{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
}

/* responsive choice1 */
@media (max-width: 1050px){
  body{ overflow:auto; }
  .layout{
    position: static;
    transform:none;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
  }
  .leftCol, .midCol, .rightCol{ height: auto; }
  .phoneBtn{ position: static; margin: 18px auto 0; }
  .topbar{ position: static; margin-bottom: 14px; }
  .blueBar{ position: static; margin: 18px auto 0; width: min(720px, 94vw); }
}

/* =========================================================
   LEVELS1 – Stage grid
   (classes: .stage-grid .stage .back-btn etc.)
   ========================================================= */
.container-fluid{
  height: 95vh;
  padding-top: 2rem !important;
  padding-bottom: 3rem !important;
}

main, .menu-wrap, #grid {
    position: relative;
    z-index: 1;
    margin-top: 12vh;
}


.menu-wrap{
  max-width: 70vw;
  width: 100%;
  margin-top:10vh;
}

.choice {
    position: absolute;
    bottom: -10%;
    right: -15%;
    width: min(220px, 48vw);
    border-radius: 22px;
    background-color: #4d96ff;
    border: 8px solid #fff;
    box-shadow: 0 26px 44px rgba(0, 0, 0, .22);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 11px;
    z-index: 6;
    opacity: 1;
    transform: scale(1.04);
    cursor: pointer;
    transition: box-shadow .18s ease, filter .18s ease, transform .18s ease, opacity .18s ease;
}
.sound-toggle{
      position:absolute;
      top:20%;
      right:1%;
      z-index:999;
      cursor:pointer;
      user-select:none;
}

.choice-txt {
    color: #fff;
    font-size: clamp(18px, 1.9vw, 26px);
    text-shadow: 0 0px 16px rgba(0, 0, 0, .22);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 900;

}

.choice:active{
  transform: scale(1.3);
}
button:active{
  transform: scale(1.3);
}

.choice.disabled{
  opacity: .55;
  filter: grayscale(1) brightness(.92);
  pointer-events: none;
  transform: scale(1.04); 
}



.back-btn{
  position:absolute;
  top: -18%;
  left: -12%;
  width: 58px;
  height: 58px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 1000;
  -webkit-tap-highlight-color: transparent;
}
.back-btn .wrap{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 4px solid rgba(255,255,255,.92);
  box-shadow: 0 14px 22px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  transition: transform .12s ease, filter .12s ease;
}
.back-btn img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .20));
  user-select: none;
  -webkit-user-drag: none;
  transform: rotate(-45deg);
}
.back-btn:hover .wrap,
.back-btn:focus-visible .wrap{
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.02);
}
.back-btn:active .wrap{ transform: scale(0.98); }

/* stages */
.stage{
  position:relative;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
  box-shadow: 0 10px 0 rgba(0,0,0,.08), 0 18px 28px rgba(0,0,0,.20);
  border: 6px solid var(--ring);
  outline: none;
  transition: transform .12s ease, filter .12s ease;
  z-index: 2;
  background: var(--ring);
}

.stage::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 999px;
  border: 10px dotted rgba(252, 191, 73, 0.9);
  filter:
    drop-shadow(0 0 6px rgba(252, 191, 73, 1))
    drop-shadow(0 0 16px rgba(252, 191, 73, .8))
    drop-shadow(0 0 32px rgba(252, 191, 73, .5));
}

.stage[data-ring="blue"]{ border-color: #2aa9b0; background-color: #2aa9b0; }
.stage[data-ring="pink"]{ border-color: var(--ring2); background-color: var(--ring2); }
.stage[data-ring="red"]{ border-color: #81171B; background-color: #81171B; }
.stage[data-ring="teal"]{ border-color: #3fb6c7; background-color: #3fb6c7; }
.stage[data-ring="amet"]{ border-color: #330036; background-color: #330036; }

.stage .icon{
  position: relative;
  z-index: 1;
  width: clamp(22px, 11.2vw, 300px);
  height: clamp(22px, 10.2vw, 250px);
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 0 4px rgba(252, 191, 73, .9))
    drop-shadow(0 0 10px rgba(252, 191, 73, .7))
    drop-shadow(0 0 20px rgba(252, 191, 73, .45));
}
.stage .icon img,
.stage .icon video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.stage .icon img{ display:block; }
.stage .icon video{ display:none; }

/* hover / focus → preview vidéo */
.stage:hover:not(:disabled) .icon img,
.stage:focus-visible:not(:disabled) .icon img,
.stage.is-active .icon img{
  display:none;
}

.stage:hover:not(:disabled) .icon video,
.stage:focus-visible:not(:disabled) .icon video,
.stage.is-active .icon video{
  display:block;
}


.stage .label{
  position:absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  padding: 6px 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  border-radius: 999px;
  background: #ffffffee;
  border: 2px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  white-space: nowrap;
  color:#0b1b2b;
  font-weight: 900;
}

.stage .tag{
  position:absolute;
  top: -10px;
  right: -8px;
  z-index:2;
  
  font-size: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  color:#fff;
  background: #4454ff;
  border: 3px solid #ffffff;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  transform: rotate(-10deg);
}
.stage .check{
  position:absolute;
  top:-10px;
  left:-10px;
  z-index:2;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  
  color:#2b1340;
  background: #fff;
  border: 3px solid #7d2cff;
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
  transform: rotate(10deg);
}

.stage:hover:not(.is-selected),
.stage:focus-visible:not(.is-selected){
  transform: scale(1.05);
  filter: saturate(1.06) contrast(1.02);
}
.lock-selector{
  position: absolute;
  pointer-events: none;
  z-index: 7; /* au-dessus des stages, au même niveau que ton selector */
  opacity: 1;
}
.lock-selector .pulse{
  animation: none;
}


/* stages wiggle (separé de selectedWiggle pour éviter conflit) */
@keyframes stageWiggle{
  0%{ transform: scale(1.06) rotate(0deg); }
  50%{ transform: scale(1.04) rotate(8deg); }
  100%{ transform: scale(1.06) rotate(0deg); }
}
.stage.is-selected{
  animation: stageWiggle 2s ease-in-out infinite !important;
  transform-origin: 50% 60%;
  filter: saturate(1.08) contrast(1.02);
}


#cursor{
  position: fixed;
  left: 0; top: 0;
  width: 10px; height: 10px;
  transform: translate(-50%,-50%);
  pointer-events: none;
  opacity: 0;             
  z-index: 9999;
}


#motif{
  display: none;
  left: 0;
   top: 0;
}

.trModal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}

.trModal.is-open{
  opacity: 1;
  pointer-events: auto;
}

.trModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}

.trModal__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-1.2deg);
    width: min(860px, 92vw);
    max-height: 100vh;
    overflow: auto;
    padding: 18px;
}

.trModal__close{
  position: absolute;
  z-index: 2100;
  top: 19px;
  right: 17px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 4px solid rgba(255,255,255,.95);
  background: rgba(30,30,30,.72);
  color: #fff;
  
  font-size: 30px;
  cursor: pointer;
  box-shadow: 0 18px 30px rgba(0,0,0,.20);
}

.trModal__close:hover,
.trModal__close:focus-visible{
  transform: scale(1.05);
}

.trModal__paper{
  border-radius: 26px;
  background: var(--paper2);
  border: 6px solid rgba(255,255,255,.95);
  box-shadow: 0 24px 44px rgba(0,0,0,.22);
  overflow: hidden;
}

.trModal__inner{
  position: relative;
  border-radius: 18px;
  margin: 16px;
  padding: 26px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80));
  border: 6px solid rgba(255,255,255,.72);
  overflow: hidden;
}

.trModal__inner::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.035), rgba(0,0,0,.035) 2px, transparent 2px, transparent 10px);
  opacity:.35;
  pointer-events:none;
}

.trModal__accent{
  position:absolute;
  left:0; top:0; bottom:0;
  width: 34%;
  background: linear-gradient(180deg, var(--orange), var(--orange2));
  border-right: 6px solid rgba(255,255,255,.70);
}

.trModal__icon{
  position:absolute;
  left: 22px;
  top: 26px;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  display:grid;
  place-items:center;
  box-shadow: 0 16px 26px rgba(0,0,0,.14);
  font-size: 42px;
  z-index: 2;
}

.trModal__title{
  position: relative;
  margin: 0 0 10px;
  padding-left: 36%;
  
  font-size: clamp(26px, 3.2vw, 44px);
  color: var(--ink);
  z-index: 2;
}

.trModal__text{
  position: relative;
  margin: 0 0 16px;
  padding-left: 36%;
  color: #2b2b2b;
  
  line-height: 1.35;
  z-index: 2;
}

.trModal__bullets{
  position: relative;
  padding-left: 36%;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  z-index: 2;
}

.trModal__chip{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  border: 3px solid rgba(255,255,255,.95);
  box-shadow: 0 14px 22px rgba(0,0,0,.12);
  
  color:#333;
  white-space: nowrap;
}

.trModal__actions{
  position: relative;
  padding-left: 36%;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 2;
}

.trModal__btn{
  padding: 12px 16px;
  border-radius: 16px;
  border: 4px solid rgba(255,255,255,.95);
  background: rgba(30,30,30,.10);
  color: #2b2b2b;
  
  cursor: pointer;
  box-shadow: 0 18px 28px rgba(0,0,0,.12);
}

.trModal__btn--primary{
  background: linear-gradient(180deg, var(--orange), var(--orange2));
  color: #fff;
  text-shadow: 0 10px 18px rgba(0,0,0,.18);
}

.trModal__btn:hover,
.trModal__btn:focus-visible{
  transform: scale(1.03);
}

#startBtn{
  opacity: 1;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

#startBtn:disabled{
  opacity: 0.4;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
  transform: scale(0.8);
}
.stage-counter {
    position: absolute;
    top: -14%;
    right: -10%;
    transform: translate(50%, -50%);
    font-size: 2.1rem;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    padding: 10px 16px;
    border-radius: 999px;
    z-index: 5;
    pointer-events: none;
}
/* ===== Switch-like Phone Modal ===== */
#phoneModal.trModal{
  --sw-bg: rgba(12, 14, 22, .72);
  --sw-panel: rgba(18, 20, 32, .92);
  --sw-border: rgba(255,255,255,.14);
  --sw-text: rgba(255,255,255,.92);
  --sw-dim: rgba(255,255,255,.72);
  --sw-red: #ff355d;
  --sw-blue:#22b0ff;
}

#phoneModal .trModal__backdrop{
  background: var(--sw-bg);
  backdrop-filter: blur(10px);
}
/* ===== Phone Modal : dans la DA du site ===== */
.trModal--phone .trModal__panel{
  /* on reste dans ton look : gros arrondi + bord blanc + shadow douce */
  border-radius: 28px;
  border: 8px solid #fff;
  box-shadow: 0 26px 44px rgba(0,0,0,.22);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.trModal--phone .trModal__paper{
  background: transparent;
}

.trModal--phone .trModal__inner{
  padding: 22px 22px 18px;
}

/* garde tes accents, mais un peu plus “propres” */
.trModal--phone .trModal__accent{
  opacity: .85;
  filter: saturate(1.05);
}

/* icône dans une pastille comme tes UI */
.trModal--phone .trModal__icon{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
  margin-bottom: 12px;
}

/* titre + texte: juste plus lisible */
.trModal--phone .trModal__title{
  margin-top: 2px;
  margin-bottom: 10px;
}

.trModal--phone .trModal__text{
  opacity: .9;
  line-height: 1.35;
}

/* chips: même langage que tes cards */
.trModal--phone .trModal__bullets{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.trModal--phone .trModal__chip{
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.10);
  padding: 12px 14px;
  

}

/* Room plus “code” sans changer de DA */
.trModal--phone #roomChip{
  font-size: 1.05rem;
  background: rgba(77,150,255,.22); /* ton bleu */
  border-color: rgba(255,255,255,.78);
}

/* états (ok / wait) dans la DA */
.trModal--phone .trModal__chip.is-ok{
  background: rgba(90, 220, 160, .18);
  border-color: rgba(255,255,255,.85);
}

.trModal--phone .trModal__chip.is-wait{
  opacity: .75;
}

/* close button dans le style du site */
.trModal--phone .trModal__close{
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.10);
}

.trModal--phone .trModal__close:hover{
  background: rgba(255,255,255,.16);
}
/* ===== Layout 2 colonnes (ancien CSS) ===== */
.two-cols {
  display: flex;
  width: 66%;
  gap: 130px;
  margin-left: 36%;
}

.two-cols .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 10%;
}

#joy1{
  height: 39vh;
}

#joy2{
  height:39vh;
}

/* ===== Nouveau: switch image -> video selon état ===== */
.joyMedia{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px; /* cohérent avec ta DA */
  overflow: hidden;
}

.joyMedia img,
.joyMedia video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* ou cover si tu préfères */
  display: block;
}

.joyMedia video{
  display: none;
}

.joyMedia.is-active img{
  display: none;
}

.joyMedia.is-active video{
  display: block;
}
.ss-stage{
  position:relative;
  height:100vh;
  display:grid;
  grid-template-rows: 1fr clamp(92px, 12vh, 140px);
  background-image: url("/img/51.png");
  color:#fff;
  overflow:hidden;
}

/* BACKDROP */
.ss-backdrop{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.65;
  mix-blend-mode: screen;
}

.ss-streak{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(closest-side at 55% 45%, rgba(255,220,120,.18), transparent 55%),
    linear-gradient(120deg, rgba(255,70,70,.08), rgba(40,170,255,.08), rgba(255,70,70,.08));
  transform: rotate(-10deg);
}

.ss-vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 35%, transparent, rgba(0,0,0,.75) 80%);
}

/* ARENA */
.ss-arena{
  display:grid;
  grid-template-columns: 1fr minmax(260px, 520px) 1fr;
  align-items:end;
  gap: 2vw;
  padding: clamp(18px, 2.2vw, 40px);
}

/* PLAYERS */
.ss-player{
  display:flex;
  align-items:flex-end;
}

.ss-player img{
  max-height: calc(100vh - clamp(92px, 12vh, 140px) - 20px);
  width:auto;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.6));
  animation: ss-popIn .5s ease forwards;
}

@keyframes ss-popIn{
  from{ opacity:0; transform: translateY(20px) scale(.98); }
  to{ opacity:1; transform:none; }
}

/* CENTER */
.ss-center {
    align-self: center;
    justify-self: center;
    transform: translateY(-29vh);
}

.ss-vsPlate{
  position:relative;
  padding: 18px;
  border-radius: 22px;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.08);
  overflow:hidden;
}

.ss-scoreWrap{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 16px;
}

.ss-score{
  font-size: clamp(40px, 4.4vw, 74px);
  
}

.ss-blue{ color: #77d7ff; }   /* blue2 */
.ss-red{  color: #ffb0b0; }   /* red2 */

.ss-vs{
  font-size: clamp(42px, 5vw, 92px);
  
  color: #ffefad;             /* gold2 */
}

/* HUD */
.ss-hud{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* gauche | centre | droite */
  align-items: center;
  padding: 16px clamp(18px, 2.2vw, 40px);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
}

.ss-miniTitle{
  font-size: clamp(18px, 2vw, 26px);
}

.ss-miniSub{
  opacity: .8;
}

/* assure que le bloc gauche reste à gauche */
.ss-hudLeft{
  grid-column: 1;
}

/* centre parfaitement le hint */
.ss-hint{
  grid-column: 2;
  justify-self: center;

  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

/* =========================
   FIN DE PARTIE + VAINQUEUR
========================= */
.ss-winnerBanner{
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  z-index: 5;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);

  

  text-transform: uppercase;
  font-size: clamp(12px, 1.2vw, 14px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.ss-winnerBanner.ss-is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

.ss-winnerBanner.ss-is-blue{
  color: #77d7ff; /* blue2 */
  box-shadow: 0 0 22px rgba(40,170,255,.18);
}

.ss-winnerBanner.ss-is-red{
  color: #ffb0b0; /* red2 */
  box-shadow: 0 0 22px rgba(255,58,58,.18);
}

.ss-winnerBanner.ss-is-draw{
  color: #ffefad; /* gold2 */
  box-shadow: 0 0 22px rgba(255,214,107,.18);
}

/* score gagnant */
.ss-score.ss-is-winner{
  animation: ss-winnerWiggle .9s ease-in-out infinite;
  filter: saturate(1.6) drop-shadow(0 0 22px rgba(255,255,255,.10));
  transform-origin: center;
}

@keyframes ss-winnerWiggle{
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  20%  { transform: translateY(-2px) rotate(-1.2deg) scale(1.06); }
  45%  { transform: translateY(0) rotate(1.2deg)  scale(1.09); }
  70%  { transform: translateY(-1px) rotate(-0.7deg) scale(1.06); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
  .ss-score.ss-is-winner{ animation:none !important; }
  .ss-winnerBanner{ transition:none !important; }
}

    /* ===== Base (proche screen) ===== */
    .intro-root{
      min-height:100vh;
      background-color: transparent;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    /* ===== Header pill violet (top-left) ===== */
    .intro-top{
      padding:22px 24px 0;
      background-color: transparent;
    }
    .intro-pill{
      display:inline-flex;
      align-items:center;
      gap:12px;
      color:#fff;
      background:#5740b3;
      padding:14px 22px;
      border-radius:18px;
      
      font-size:26px;
      box-shadow:0 10px 18px rgba(0,0,0,.15);
    }
    .intro-pillIcon{
      width:22px;height:22px;
      display:inline-grid;
      place-items:center;
      background:rgba(255,255,255,.18);
      border-radius:8px;
      font-size:14px;
    }

 .intro-mid{
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background:transparent;
  overflow: hidden;
}


.intro-character {
    width: 60%;
    object-fit: contain;
    z-index: 2;
    transform: translateX(43vw);
    position: absolute;
    bottom: -98%;
    z-index: 999;
}
.intro-instruction {
    text-align: center;
    font-size: 50px;
    color: #2c2c2c;
    position: absolute;
    left: 15%;
    top: 20%;
    width: 36vw;
    z-index: 1000;
    transform: rotate(-2deg);
    font-family: "FjallaOne", sans-serif;
}
.bulle{
  position: absolute;
    width: 54%;
    left: 13%;
    top: 1%;
}

.intro-bubble {
    position: absolute;
    left: 3.5vw;
    bottom: 5vh;
    width: 50%;
    height: 40%;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    padding: 22px 26px 18px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* Grid des TVs dans la bulle */
.intro-bubble .intro-grid{
  width: 100%;
  flex: 1;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}

/* Si ton JS injecte 3 éléments, on masque le 3e (pour n’avoir que 2 télés) */
.intro-bubble .intro-frame:nth-child(3){
  display: none;
}

/* Les médias prennent bien la place */
.intro-bubble .intro-frame img,
.intro-bubble .intro-frame video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}
    /* ===== Bottom UI zone ===== */
    .intro-bottom{
      padding: 12px 44px 34px;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:24px;
      background: #CDCDCD;
    }

    /* Left TV Mode panel */
    .intro-tvPanel{
      display:flex;
      align-items:center;
      gap:14px;
      padding:16px 18px;
      border-radius:18px;
      background:#5f6577;
      color:#fff;
      min-width:320px;
      box-shadow:0 10px 18px rgba(0,0,0,.15);
    }
    .intro-tvIcon{
      width:44px;height:44px;
      border-radius:12px;
      background:rgba(0,0,0,.18);
      display:grid;
      place-items:center;
      font-size:22px;
    }
    .intro-tvText{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }
    .intro-tvText small{
      opacity:.85;
      
      font-size:14px;

    }
    .intro-tvText strong{
      font-size:22px;
      margin-top:6px;
    }
    .intro-tvToggle{
      margin-left:8px;
      display:inline-flex;
      align-items:center;
      gap:10px;
      
      font-size:14px;
      opacity:.85;
    }
    .intro-switchPill{
      width:54px;
      height:26px;
      border-radius:999px;
      background:rgba(0,0,0,.22);
      position:relative;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
    }
    .intro-switchDot{
      width:22px;height:22px;
      border-radius:999px;
      background:rgba(255,255,255,.55);
      position:absolute;
      top:2px; left:2px;
    }

    /* Center slider block */
    .intro-sliderWrap{
      flex:1;
      display:flex;
      justify-content:center;
    }
    .intro-sliderPanel{
      width:min(820px, 64vw);
      background:rgba(255,255,255,.60);
      border-radius:16px;
      padding:14px 16px;
      box-shadow:0 10px 18px rgba(0,0,0,.12);
      display:flex;
      align-items:center;
      gap:16px;
    }
    .intro-sliderLeft{
      display:flex;
      align-items:center;
      gap:12px;
      background:#ffd21e;
      border-radius:12px;
      padding:12px 14px;
      min-width:260px;
      
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    }
    .intro-mountain{
      width:26px;height:26px;
      border-radius:8px;
      background:rgba(0,0,0,.16);
      display:grid;
      place-items:center;
      font-size:14px;
    }
    .intro-sliderValue{
      width:54px;
      font-size:38px;
      
      color:#222;
      text-align:center;
    }
    .intro-range{
      flex:1;
      height:34px;
      display:flex;
      align-items:center;
      position:relative;
    }
    .intro-track{
      width:100%;
      height:6px;
      background:rgba(0,0,0,.22);
      border-radius:999px;
    }
    .intro-thumb{
      position:absolute;
      top:50%;
      transform:translate(-50%,-50%);
      width:10px;height:30px;
      background:#d63a2b;
      border-radius:6px;
      box-shadow:0 6px 12px rgba(0,0,0,.18);
      left:50%;
    }

    /* Right reset */
    .intro-reset{
      display:flex;
      align-items:center;
      gap:10px;
      opacity:.55;
      
      font-size:16px;
      user-select:none;
      white-space:nowrap;
    }
    .intro-reset .intro-resetBtn{
      width:34px;height:34px;
      border-radius:999px;
      border:2px solid rgba(0,0,0,.25);
      background:rgba(255,255,255,.25);
      display:grid;
      place-items:center;
      
    }

    /* Selector-friendly */
    .intro-continue{
      position:fixed;
      right:34px;
      top:34px;
      opacity:0; pointer-events:none;
    }

    /* responsive simple */
    @media (max-width: 980px){
      .intro-mid{ padding: 18px 22px; }
      .intro-grid{ grid-template-columns:1fr; gap:18px; }
      .intro-bottom{ padding: 12px 22px 26px; flex-direction:column; align-items:stretch; }
      .intro-tvPanel{ min-width:unset; width:100%; }
      .intro-sliderPanel{ width:100%; }
      .intro-sliderLeft{ min-width:200px; }
    }

.typingWrap{ padding:14px; }
.typingTitle{ font-weight:700; font-size:18px; margin-bottom:6px; }
.typingHint{ opacity:.75; margin-bottom:10px; }
.typingRow{ padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06); margin-bottom:10px; min-height:42px; }
.kb{ display:flex; flex-direction:column; gap:8px; }
.kb-row{ display:flex; gap:8px; justify-content:center; }
.kb-key{
  flex:1;
  padding:14px 0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:inherit;
  font-weight:700;
  font-size:16px;
}
.kb-key:active{ transform:scale(.98); }
.kb-wide{ flex:1.6; }

.kickBtn{
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
  line-height: 1;
  min-height: 28px;
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Disabled grisé (tu l’avais demandé) */
.kickBtn:disabled{
  opacity: .4;
  cursor: not-allowed;
} 

    /* === Join modal minimal === */
    .joinModal{
      position:fixed; inset:0;
      display:flex; align-items:center; justify-content:center;
      background:rgba(0,0,0,.72);
      backdrop-filter: blur(8px);
      z-index:99999;
      padding:16px;
    }
    .joinModal.hidden{ display:none !important; }
    .joinBox{
      width:min(520px, 100%);
      padding:22px 18px;
      border-radius:18px;
      background:rgba(255,255,255,.08);
      border:2px solid rgba(255,255,255,.2);
      text-align:center;
      color:#fff;
    }
    .joinTitle{ font-weight:900; letter-spacing:.12em; }
    #joinModal input{
      width:100%;
      margin-top:12px;
      padding:14px 16px;
      border-radius:16px;
      border:4px solid rgba(255,255,255,.22);
      background:rgba(255,255,255,.08);
      color:#fff;
      font-weight:900;
      letter-spacing:.25em;
      text-transform:uppercase;
      outline:none;
    }
    #joinModal button{
      width:100%;
      margin-top:10px;
      padding:14px 16px;
      border-radius:16px;
      border:4px solid rgba(255,255,255,.22);
      background:linear-gradient(180deg,var(--orange),var(--orange2));
      color:#fff;
      font-weight:900;
    }
    #joinMsg{ margin-top:10px; opacity:.9; font-size:13px; }