#translation{
    width:100%;
    min-height:100px;
    padding:8px;
    border:4px solid #000;
    border-radius:16px;
    font-size:14px;
    line-height:1.4;
    resize:vertical;
    font-family:'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
    font-weight:bold;
    background-color:#E6FFEA;
}


#nv-loupe-overlay{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    background:transparent;
    z-index:1000;
    display:none;
}
#nv-loupe-overlay.active{
    display:block;
}

#nv-loupe-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:none;
    background:transparent;
}

#nv-loupe-close{
    position:absolute;
    top:15px;
    right:20px;
    z-index:1000000;
    font-size:22px;
    cursor:pointer;
    background:rgba(255,255,255,0.8);
    padding:5px 10px;
    border-radius:10px;
}


/* Bulle info (popup) */
.info-bubble{
    display:none;
    position:fixed;
    top:70px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    border:5px solid #000;
    border-radius:20px;
    padding:12px;
    box-shadow:6px 6px 0 rgba(0,0,0,0.3);
    z-index:3000;
    min-width:250px;
    max-width:350px;
    width:92%;
    text-align:left;
    font-size:0.9em;
    max-height:80vh;
    overflow:auto;
}
.info-bubble::before{
    content:'';
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.3);
    z-index:-1;
}
.info-bubble.visible{ display:block; animation:pop-down 0.3s ease; }

/* Menu réglages */
.voice-settings-menu{
    display:none;
    position:fixed;
    top:60px;
    left:50%;
    transform:translateX(-50%);
    padding:18px;
    background:#fff;
    border:5px solid #000;
    border-radius:20px;
    box-shadow:6px 6px 0 rgba(0,0,0,0.3);
    max-width:420px;
    width:94%;
    z-index:2000;
    max-height:85vh;
    overflow-y:auto;
}
.voice-settings-menu::before{
    content:'';
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.3);
    z-index:-1;
}
.voice-settings-menu.visible{ display:block; animation:pop-down 0.3s ease; }

*{ box-sizing:border-box; }
body{
    margin:0; padding:0;
    font-family:'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
    background:transparent;
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
}

.container{
    border-radius:30px;
    border:4px solid #000;
    padding:10px;
    max-width:520px;
    width:100%;
    min-height:600px;
    position:relative;
}
.container.rv-bg{
    background:linear-gradient(to bottom, #FFF9E6 0%, #FFEB99 25%, #FFE6F0 50%, #FFB6D9 100%);
}
.container.menu-bg{ background:#fff; }

/* nav styles → newvoicenav.php */


/* .status, .status-text-container → newvoicetranscription.php */

/* .pulse @keyframes pulse-dot → newvoicetranscription.php */
@keyframes pop-down{
    0%{ opacity:0; transform:translateX(-50%) translateY(-10px); }
    100%{ opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes pop-in{
    0%{ transform:translateX(-50%) scale(0); opacity:0; }
    70%{ transform:translateX(-50%) scale(1.1); }
    100%{ transform:translateX(-50%) scale(1); opacity:1; }
}

.content{ padding:8px 10px 16px; }

.pill{
    display:inline-block;
    padding:8px 12px;
    border:3px solid #000;
    border-radius:999px;
    font-weight:700;
    background:#fff;
}

.section-title{ font-size:22px; color:#333; margin-bottom:20px; text-align:center; font-weight:bold; font-family:'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif; }

.language-panels{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    margin-bottom:30px;
    padding:0;
    background:transparent;
    border:none;
    border-radius:15px;
}
.language-panel{ display:none; grid-column:1/-1; grid-template-columns:repeat(6,1fr); gap:8px; }
.language-panel.active{ display:grid; }

.lang-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:10px 5px;
    background:#fff;
    border:3px solid #000;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.3s ease;
    box-shadow:1px 1px 0 rgba(0,0,0,0.28);
}
.lang-btn:hover{ transform:translateY(-2px); box-shadow:2px 2px 0 rgba(0,0,0,0.28); background:#ffeaa7; }
.lang-btn.selected, .lang-btn.active{
    background:linear-gradient(135deg,#00b894 0%,#00cec9 100%);
    color:#fff;
    font-weight:bold;
}

/* Style spécifique pour les langues du traducteur - transparent sans contour */
#targetLangPanels .lang-btn{
    background:transparent;
    border:none;
    box-shadow:none;
}
#targetLangPanels .lang-btn:hover{
    background:rgba(255,234,167,0.5);
    box-shadow:none;
}
#targetLangPanels .lang-btn.selected, #targetLangPanels .lang-btn.active{
    background:linear-gradient(135deg,#00b894 0%,#00cec9 100%);
    border:none;
    box-shadow:none;
}
#targetLangPanels .lang-nav-btn{
    background:transparent;
    border:none;
    box-shadow:none;
    color:#0984e3;
}
#targetLangPanels .lang-nav-btn:hover{
    box-shadow:none;
}

.flag-img{ width:32px; height:24px; }
.lang-code{ font-size:11px; font-weight:bold; }

.lang-nav-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:bold;
    background:linear-gradient(135deg,#74b9ff 0%,#0984e3 100%);
    color:#fff;
    border:3px solid #000;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.3s ease;
    box-shadow:1px 1px 0 rgba(0,0,0,0.28);
}
.lang-nav-btn:hover{ transform:scale(1.06); box-shadow:2px 2px 0 rgba(0,0,0,0.28); }

.mode-buttons{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.mode-btn{
    padding:14px 15px;
    border:4px solid #000;
    border-radius:20px;
    cursor:pointer;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    font-family:'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
    transition:all 0.3s ease;
    box-shadow:3px 3px 0 rgba(0,0,0,0.32);
    background:#fff;
}
.mode-btn:hover{ transform:translateY(-3px); box-shadow:4px 4px 0 rgba(0,0,0,0.32); }
.mode-icon{ font-size:36px; margin-bottom:10px; }

.logo-3d{ text-align:center; padding:20px 0; margin-top:-10px; perspective:500px; }
.logo-3d-text{
    font-size:28px;
    font-weight:900;
    font-family:'Segoe UI', 'Arial Black', sans-serif;
    background:linear-gradient(180deg, #FF69B4 0%, #FF1493 30%, #C71585 60%, #8B008B 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(1px 1px 0 rgba(255,255,255,0.8))
           drop-shadow(2px 2px 0 rgba(200,100,150,0.6))
           drop-shadow(3px 3px 0 rgba(150,50,100,0.5))
           drop-shadow(4px 4px 0 rgba(100,0,50,0.4))
           drop-shadow(5px 5px 8px rgba(0,0,0,0.3));
    letter-spacing:2px;
    position:relative;
    display:inline-block;
    transform:rotateX(10deg);
    text-transform:lowercase;
    animation:logo3dFloat 4s ease-in-out infinite;
}
.logo-3d-text::before{
    content:attr(data-text);
    position:absolute;
    top:0;
    left:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 50%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    pointer-events:none;
}
@keyframes logo3dFloat{
    0%, 100%{ transform:rotateX(10deg) translateY(0); }
    50%{ transform:rotateX(8deg) translateY(-3px); }
}

/* #afterTranscriptShift → newvoicetranscription.php */

/* .after-transcript-space, .transcription-hr → newvoicetranscription.php */


/* Zone traduction : disposition phonétique | textarea | écouter */
.translation-row{
    display:flex;
    align-items:stretch;
    gap:8px;
    width:100%;
}
.phonetic-control-left{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:70px;
}
.phonetic-switch-row{
    display:flex;
    align-items:center;
    gap:4px;
}
.translation-textarea-wrapper{
    flex:1;
    position:relative;
}
.listen-control-right{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:80px;
}
.listen-btn-vertical{
    background:linear-gradient(135deg,#87CEEB 0%,#ADD8E6 100%);
    color:#000;
    border:3px solid #000;
    border-radius:12px;
    padding:14px 16px;
    font-size:48px;
    cursor:pointer;
    box-shadow:2px 2px 0 rgba(0,0,0,0.25);
    transition:all 0.3s ease;
}
.listen-btn-vertical:hover{
    transform:translateY(-2px);
    box-shadow:3px 3px 0 rgba(0,0,0,0.3);
}
.listen-btn-vertical.listening{
    background:linear-gradient(135deg,#FFA500 0%,#FF8C00 100%);
    color:#fff;
}

.phonetic-label-main{ color:#000; font-weight:bold; font-size:0.85em; }
.phonetic-switch{ position:relative; display:inline-block; width:50px; height:26px; }
.phonetic-switch input{ opacity:0; width:0; height:0; }
.phonetic-slider{
    position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
    background-color:#ccc; transition:0.3s; border-radius:26px; border:3px solid #000;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2);
}
.phonetic-slider:before{
    position:absolute; content:""; height:18px; width:18px; left:2px; bottom:2px;
    background-color:white; transition:0.3s; border-radius:50%; border:2px solid #000;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
input:checked + .phonetic-slider{ background-color:#32CD32; }
input:checked + .phonetic-slider:before{ transform:translateX(24px); }
.phonetic-status{ font-size:0.9em; color:#666; min-width:32px; text-align:left; }
.file-save-btn{
    padding:10px 12px;
    background: linear-gradient(135deg, #32CD32 0%, #228B22 100%);
    color:#fff;
    border:3px solid #000;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
}
.file-input-label{ font-weight:bold; margin-right:6px; }
.file-input-field{
    padding:8px 10px;
    border:3px solid #000;
    border-radius:10px;
    font-weight:bold;
}
.file-confirm-btn{
    padding:8px 10px;
    border:3px solid #000;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
    background: linear-gradient(135deg, #87CEFA 0%, #4682B4 100%);
    color:#000;
}
.file-message{
    margin:10px auto 0;
    padding:10px 12px;
    border:3px solid #000;
    border-radius:12px;
    width:fit-content;
    max-width:90%;
    font-weight:bold;
}
.file-message.success{ background:#E6FFEA; }
.file-message.error{ background:#FFE6E6; }
/* Styles spécifiques Pingpong */
.pingpong-send-btn{
    width: 33.33vw;
    max-width: 33.33vw;
    padding: 12px 10px;
    font-size: 16px;
    border: 4px solid #000;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    font-family:'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #FF6347 0%, #DC143C 100%);
    color: white;
}
.pingpong-send-btn:hover{ transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(0,0,0,0.4); }
.pingpong-send-btn:active{ transform: translateY(0); box-shadow: 2px 2px 0 rgba(0,0,0,0.4); }

.pingpong-listen-btn{
    padding: 10px 20px;
    font-size: 14px;
    border: 3px solid #000;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    font-family:'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}
.pingpong-listen-btn:hover{ transform: translateY(-1px); box-shadow: 4px 4px 0 rgba(0,0,0,0.3); }

.pingpong-message{
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    display: none;
}
.pingpong-message.success{ background: #90EE90; color: #006400; display:block; }
.pingpong-message.error{ background: #FFB6C1; color: #8B0000; display:block; }

/* Liste de fontes stylisées */
.font-list{
    max-height:100px;
    overflow-y:auto;
    border:2px solid #000;
    border-radius:8px;
    background:#fff;
    margin-top:5px;
}
.font-item{
    padding:6px 10px;
    cursor:pointer;
    border-bottom:1px solid #ddd;
    transition:background 0.2s ease;
}
.font-item:last-child{ border-bottom:none; }
.font-item:hover{ background:#ffeaa7; }
.font-item.selected{
    background:linear-gradient(135deg,#00b894 0%,#00cec9 100%);
    color:#fff;
    font-weight:bold;
}

/* Grille d'images */
.images-grid-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px;
    border-bottom:2px solid #ccc;
    margin-bottom:10px;
}
.images-grid-container{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    max-height:350px;
    overflow-y:auto;
    padding:5px;
}
.images-grid-item{
    aspect-ratio:1;
    border:3px solid #000;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    transition:all 0.2s ease;
    background:#fff;
}
.images-grid-item:hover{
    transform:scale(1.05);
    box-shadow:3px 3px 0 rgba(0,0,0,0.3);
}
.images-grid-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.images-grid-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:10px;
    border-top:2px solid #ccc;
    margin-top:10px;
}

/* Icône grille dans la bulle mots */
.grid-icon-btn{
    background:transparent;
    color:#333;
    border:none;
    border-radius:10px;
    padding:10px 15px;
    font-size:28px;
    cursor:pointer;
    box-shadow:none;
    transition:all 0.2s ease;
}
.grid-icon-btn:hover{
    transform:scale(1.15);
    color:#9B59B6;
}
/* Icône écouter dans la bulle mots */
.listen-icon-btn{
    background:transparent;
    color:#333;
    border:none;
    border-radius:10px;
    padding:10px 15px;
    font-size:28px;
    cursor:pointer;
    box-shadow:none;
    transition:all 0.2s ease;
}
.listen-icon-btn:hover{
    transform:scale(1.15);
    color:#3498DB;
}

/* Mobile: plein écran */
@media screen and (max-width: 600px) {
    body{
        margin:0;
        padding:0;
        min-height:100vh;
        min-height:100dvh;
    }
    .container{
        border-radius:0;
        border:none;
        max-width:100%;
        width:100%;
        min-height:100vh;
        min-height:100dvh;
        padding:8px;
    }
    #transcript, #translation{
        min-height:calc(100dvh / 6);
        height:calc(100dvh / 6);
    }
}

/* Overlay de connexion */
.login-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    visibility:hidden;
    transition:all 0.3s ease;
}
.login-overlay.visible{
    opacity:1;
    visibility:visible;
}
.login-iframe-container{
    background:white;
    border-radius:20px;
    padding:10px;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
    position:relative;
    max-width:90%;
    max-height:90%;
    width:450px;
    height:300px;
}
.login-iframe{
    width:100%;
    height:100%;
    border:none;
    border-radius:15px;
}
.login-close-btn{
    position:absolute;
    top:-15px;
    right:-15px;
    width:40px;
    height:40px;
    background:linear-gradient(135deg,#FF6B6B 0%,#FF0000 100%);
    border:3px solid #000;
    border-radius:50%;
    color:white;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:2px 2px 6px rgba(0,0,0,0.3);
    transition:all 0.2s;
}
.login-close-btn:hover{
    transform:scale(1.1);
}

/* Popup Gapit++ */
.gapitpp-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9998;
    opacity:0;
    visibility:hidden;
    transition:all 0.3s ease;
}
.gapitpp-overlay.visible{
    opacity:1;
    visibility:visible;
}
.gapitpp-popup{
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
    position:relative;
    max-width:90%;
    width:350px;
    border:4px solid #000;
}
.gapitpp-title{
    color:white;
    font-size:1.5em;
    font-weight:bold;
    text-align:center;
    margin-bottom:20px;
    text-shadow:2px 2px 4px rgba(0,0,0,0.3);
}
.gapitpp-links{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.gapitpp-link{
    display:block;
    padding:15px 20px;
    background:white;
    color:#333;
    text-decoration:none;
    border-radius:12px;
    font-weight:bold;
    font-size:1.1em;
    text-align:center;
    border:3px solid #000;
    box-shadow:3px 3px 0 rgba(0,0,0,0.2);
    transition:all 0.2s;
}
.gapitpp-link:hover{
    transform:translateY(-2px);
    box-shadow:4px 4px 0 rgba(0,0,0,0.3);
}
.gapitpp-close{
    position:absolute;
    top:-15px;
    right:-15px;
    width:40px;
    height:40px;
    background:linear-gradient(135deg,#FF6B6B 0%,#FF0000 100%);
    border:3px solid #000;
    border-radius:50%;
    color:white;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:2px 2px 6px rgba(0,0,0,0.3);
    transition:all 0.2s;
}
.gapitpp-close:hover{
    transform:scale(1.1);
}

/* Install App Overlay */
.install-app-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9998;
    opacity:0;
    visibility:hidden;
    transition:all 0.3s ease;
}
.install-app-overlay.visible{
    opacity:1;
    visibility:visible;
}
.install-app-popup{
    background:white;
    border-radius:20px;
    padding:0;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
    position:relative;
    max-width:95%;
    width:900px;
    max-height:90vh;
    border:4px solid #000;
    overflow:hidden;
}
.install-app-header{
    background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
    color:white;
    font-size:1.5em;
    font-weight:bold;
    text-align:center;
    padding:20px;
    text-shadow:2px 2px 4px rgba(0,0,0,0.3);
}
.install-app-iframe{
    width:100%;
    height:70vh;
    border:none;
    display:block;
}
.install-app-close{
    position:absolute;
    top:-15px;
    right:-15px;
    width:40px;
    height:40px;
    background:linear-gradient(135deg,#FF6B6B 0%,#FF0000 100%);
    border:3px solid #000;
    border-radius:50%;
    color:white;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:2px 2px 6px rgba(0,0,0,0.3);
    transition:all 0.2s;
    z-index:10;
}
.install-app-close:hover{
    transform:scale(1.1);
}

/* Cloudflare footer in menu */
.cf-footer {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,.12);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    opacity: .85;
}
.cf-pill {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
}
.cf-ok { color:#1b7f2a; font-weight:700; }
.cf-no { color:#b02020; font-weight:700; }
.cf-stats-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.08);
    color: inherit;
    text-decoration: none;
}




/* === Bloc choix langue (menu) === */
#homeLangPanels{ user-select:none; }
.language-panels{ margin-top:8px; }
.language-panel{ display:none; align-items:center; gap:10px; flex-wrap:wrap; }
.language-panel.active{ display:flex; }
.lang-btn{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border:3px solid #000;
  border-radius:14px;
  background:#fff;
  box-shadow:2px 2px 0 rgba(0,0,0,0.2);
  cursor:pointer;
  transition:transform .06s ease, background .2s ease;
}
.lang-btn:hover{ transform: translateY(-1px); }
.lang-btn.selected{ background:#ffe7b3; }
.flag-img{ width:28px; height:18px; object-fit:cover; border:2px solid #000; border-radius:6px; }
.lang-code{ font-weight:800; font-size:14px; letter-spacing:0.5px; }
.lang-nav-btn{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border:3px solid #000;
  border-radius:14px;
  background:#f3f3f3;
  box-shadow:2px 2px 0 rgba(0,0,0,0.2);
  cursor:pointer;
  font-weight:900;
}
#errorMessage{
  display:none;
  padding:12px;
  border:4px solid #000;
  border-radius:14px;
  background:#fff;
  font-weight:800;
  margin-bottom:14px;
}
.nv-lng-title{ margin-bottom:10px; }