/* ---------------------------------------------------------
   VARIABLES
--------------------------------------------------------- */
:root {
    --color-purp: #8369c9;
    --color-warning: #ffa516;
    --color-dark: #1c1c20;
    --color-bg: #111;
    --color-border: #333;
}

/* ---------------------------------------------------------
   GLOBAL
--------------------------------------------------------- */
html {
    font-size: 87.5%;
}



body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: linear-gradient(to top, #423f84, #000, #7c4eb5);
    color: #FAFAFA;
    margin: 0;
    min-height: 100vh;
}

.bottom-space { min-height: 15vh; }
.top-space { min-height: 11vh; }

/* ---------------------------------------------------------
   CUSTOM BOOTSTRAP
--------------------------------------------------------- */

#srcLang,
#tgtLang {
    max-height: 20rem !important;
    overflow-y: auto !important;
    display: block !important;
}

#tgtLang option:checked {
    background: linear-gradient(90deg, #454186, #845bb8);
    color: #fafafa;
}

#srcLang option:checked {
    background: linear-gradient(90deg, #ffca2c, #ffa516);
    color: #1c1c20;
}

#srcLang option:hover,
#tgtLang option:hover {
    cursor: pointer;
}




/* LISTBOX PREMIUM A2B */
.a2b-listbox {
    background: #fafafa;
    border-radius: 0.8rem;
    border: 2px solid rgba(255,255,255,0.08);
    padding: 0.6rem;
    color: #2d2d2d;
    font-size: 0.95rem;
    height: auto !important;
    overflow-y: auto;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
}

/* Scrollbar premium */
.a2b-listbox::-webkit-scrollbar {
    width: 8px;
}
.a2b-listbox::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}
.a2b-listbox::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ccc, #eee);
    border-radius: 10px;
}

/* Options */
.a2b-listbox option {
    padding: 0.6rem;
    border-radius: 0.5rem;
    margin-bottom: 0.2rem;
    background: transparent;
    transition: background 0.15s, color 0.15s;
}

/* Hover */
.a2b-listbox option:hover {
    background: rgba(131,105,201,0.25);
    color: #fff;
}

/* Option sélectionnée */
.a2b-listbox option:checked {
    background: linear-gradient(90deg, #ffca2c, #ffa516);
    color: #111;
    font-weight: 600;
}


.premium-ico { font-size: 1.55rem; }

.bg-white { color: rgba(0,0,0,0.87);
}

.text-purp {
    color: var(--color-purp) !important;
    letter-spacing: 0.15rem !important;
    font-weight: 600;
}

.btn-purp:hover {
    background-color: var(--color-purp);
    color: #FAFAFA;
}


.btn-purp-2 {
    background-color: var(--color-purp);
    color: #FAFAFA;
}

.btn-purp-2:hover {
    background-color: var(--color-warning); 
    color: #1c1c20;
}



.no-pointer { cursor: default !important; }

.lg-btn {
    background-color: var(--color-warning);
    min-height: calc(1.375rem + 4vw);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(0,0,0,0.87);
}

.md-btn {
    font-size: 1rem;
    font-weight: 600;
}

.form-select-lg-a2b {
    min-height: 4rem !important;
    font-size: 0.95rem !important;
}

/* ---------------------------------------------------------
   TRADUCTION
--------------------------------------------------------- */


.border-source {
    border: 0.2rem dashed #ffca2c;
}
.border-target {
    border: solid 0.2rem #8369c9;
}


.spinner-border {
    width: calc(1.375rem + 3vw);
    height: calc(1.375rem + 3vw);
    border-width: 0.5rem;
}

.spinner-border3 {
    width: 2rem;
    height: 2rem;
    border-width: 0.5rem;
}


.btn-outline-white2 {
    color: #FAFAFA;
}
/* ---------------------------------------------------------
   CENTRAGE VERTICAL
--------------------------------------------------------- */
.main-wrapper {
    min-height: calc(100vh - 5rem);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ---------------------------------------------------------
   PREMIUM CARD
--------------------------------------------------------- */
.premium-card {
    background: var(--color-dark);
    border-radius: 1rem;
    padding: 2.2rem;
    box-shadow: 0 0 1.6rem rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.05);
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.header-premium {
    width: 100%;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}

.header-premium .logo { font-size: 1.4rem; }

.btn-premium {
    background: var(--color-warning);
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem;
}

/* ---------------------------------------------------------
   TEXTAREA
--------------------------------------------------------- */
textarea {
    background: var(--color-bg);
    color: #FAFAFA;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
}

textarea:focus {
    border-color: var(--color-warning);
    box-shadow: 0 0 0 0.2rem rgba(255,193,7,0.25);
}

/* ---------------------------------------------------------
   DRAG & DROP
--------------------------------------------------------- */
.drag-area {
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.drag-area:hover { opacity: 0.5; }

.drag-area i { font-size: 4rem; }

.drag-area:hover i { color: #ffca2c; }

.drag-area.dragover {
    background: #2a2a2a;
    border-color: #ffca2c;
}

.border-dotted {
    border: 0.3rem dashed var(--color-warning);
    border-radius: 1rem;
}

.border-dotted:hover {
    border-color: #ffca2c;
}

/* ---------------------------------------------------------
   TEXTES
--------------------------------------------------------- */
.text-describ {
    color: #bbbbbb !important;
    font-size: 1rem;
}

/* ---------------------------------------------------------
   SPINNER / SELECT SRT
--------------------------------------------------------- */
.spiner-srt {
    max-width: 3rem;
    max-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spiner-srt-2 {
    max-width: 1.5rem;
    max-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-srt-form {
    border-radius: 0.6rem 0 0 0.6rem; 
    text-transform: capitalize;
}

.select-srt-btn {
    border-radius: 0 8px 8px 0;
}


/* ---------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------- */

/* HTML: <div class="loader-1"></div> */
.loader-1 {
  width: 60px;
  aspect-ratio: 1;
  display: grid;
  grid: 50%/50%;
  color: #ffa516; 
  border-radius: 50%;
  --_g: no-repeat linear-gradient(currentColor 0 0);
  background: var(--_g),var(--_g),var(--_g);
  background-size: 50.1% 50.1%;
  animation: 
    l9-0   1.5s infinite steps(1) alternate,
    l9-0-0 3s   infinite steps(1) alternate;
}
.loader-1::before {
  content: "";
  background: #FAFAFA;
  border-top-left-radius: 100px;
  transform: perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right; 
  animation: l9-1 1.5s infinite linear alternate;
}
@keyframes l9-0 {
  0%  {background-position: 0    100%,100% 100%,100% 0}
  33% {background-position: 100% 100%,100% 100%,100% 0}
  66% {background-position: 100% 0   ,100% 0   ,100% 0}
}
@keyframes l9-0-0 {
  0%  {transform: scaleX(1)  rotate(0deg)}
  50% {transform: scaleX(-1) rotate(-90deg)}
}
@keyframes l9-1 {
  16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
  33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
  66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
  100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}

/* HTML: <div class="loader-1"></div> */
.loader-2 {
  width: 50px;
  aspect-ratio: 1;
  --_c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
  background: 
    var(--_c) top,
    var(--_c) left,
    var(--_c) right,
    var(--_c) bottom;
  background-size: 12px 12px;
  animation: l7 1s infinite;
}
@keyframes l7 {to{transform: rotate(.5turn)}}





.a2b-mini-player {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    margin-top: 0.6rem;
}

.a2b-progress {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.a2b-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffca2c, #ffa516);
    transition: width 0.1s linear;
}

.a2b-play-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #8369c9, #9c83c0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.a2b-play-btn:hover {
    background: #ffa516;
    color: #1c1c20;
}


/* ---------------------------------------------------------
  MODAL JEUX
--------------------------------------------------------- */


.modal-header {
    background: #2d2d2d !important;
    color: #fafafa !important;
}


/* Wrapper qui applique le zoom */
.iframe-wrapper {
    transform: scale(0.8);
    transform-origin: top center;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

/* L’iframe doit être plus grande pour compenser le scale */
.iframe-wrapper iframe {
    width: 140%;   /* 1 / 0.7 ≈ 1.428 → arrondi */
    height: 140%;
    border: none;
}


.modal-content {
    background: #000 !important;
}