:root{
--royal:#0f3cc9;--royal2:#092c9d;--royal-soft:#eef3ff;--navy:#0c1835;--ink:#17223b;--muted:#6f7a91;--muted2:#8f99ab;
--line:#e2e7ee;--bg:#e7ebf0;--surface:#fff;--red:#ef4059;--red2:#cf2943;--green:#15a56f;--green2:#07855a;
--amber:#f59e0b;--shadow:0 18px 52px rgba(24,43,82,.09);--shadow-sm:0 8px 24px rgba(24,43,82,.07);--radius:24px;
}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#e7ebf0;-webkit-font-smoothing:antialiased;padding:24px 18px 40px}.button,button,select,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.hidden{display:none!important}.page-bg{display:none}.page-bg span{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5}.page-bg span:first-child{width:520px;height:520px;background:radial-gradient(circle,rgba(43,91,229,.09),transparent 68%);top:-270px;left:-130px}.page-bg span:last-child{width:600px;height:600px;background:radial-gradient(circle,rgba(21,165,111,.05),transparent 68%);right:-300px;top:230px}.app-shell{min-height:calc(100vh - 64px);max-width:1080px;margin:0 auto;position:relative;z-index:1;background:#fff;border:1px solid #dfe4ea;border-radius:32px;box-shadow:0 24px 70px rgba(36,48,70,.16);overflow:hidden}
.topbar{height:72px;padding:0 max(18px,calc((100vw - 1040px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e5e9ef;position:sticky;top:0;z-index:30}.brand{border:0;background:transparent;display:flex;align-items:center;gap:11px;cursor:pointer;color:inherit;padding:0}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#1d55e6,var(--royal2));color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px;letter-spacing:-.04em;box-shadow:0 9px 24px rgba(15,60,201,.24)}.brand-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1}.brand-copy strong{font-size:17px;letter-spacing:.11em}.brand-copy small{font-size:9px;color:var(--muted);margin-top:6px;font-weight:600}.top-actions{display:flex;align-items:center;gap:8px}.status-chip{height:38px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 12px;display:flex;align-items:center;gap:7px;color:#4b5770;font-size:10px;font-weight:800;cursor:pointer;box-shadow:0 3px 10px rgba(20,40,80,.03)}.status-chip i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.10)}.status-chip.connected i{background:var(--green);box-shadow:0 0 0 4px rgba(21,165,111,.09)}.status-chip.error i{background:var(--red);box-shadow:0 0 0 4px rgba(239,64,89,.09)}.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#47546e;cursor:pointer;font-size:17px;display:grid;place-items:center;box-shadow:0 3px 10px rgba(20,40,80,.03)}.icon-btn:hover,.status-chip:hover{border-color:#cfd8e9;background:#fbfcff}
.main{max-width:980px;margin:0 auto;padding:38px 28px 60px;background:#fff}.hero{text-align:center;max-width:720px;margin:0 auto 28px}.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#fff;border:1px solid #e5eaf3;color:#40506f;font-size:9px;font-weight:900;letter-spacing:.12em;box-shadow:0 5px 18px rgba(30,50,90,.04)}.hero-badge span{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px rgba(21,165,111,.09)}.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.04;margin:14px 0 12px;letter-spacing:-.045em;color:var(--navy)}.hero h1 em{font-style:normal;color:var(--royal)}.hero p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 auto;max-width:610px}
.language-panel{display:grid;grid-template-columns:1fr 68px 1fr;gap:14px;align-items:stretch;background:#fbfcfe;border:1px solid #e1e6ed;border-radius:28px;padding:17px;box-shadow:var(--shadow)}.language-side{padding:5px 5px 6px}.person-line{display:flex;align-items:center;gap:7px;margin-bottom:7px}.person-dot{width:8px;height:8px;border-radius:50%}.person-a{background:var(--red)}.person-b{background:var(--green)}.person-tag{font-size:9px;font-weight:900;letter-spacing:.11em;color:#8490a5}.language-side label{display:block;font-size:10px;font-weight:750;color:#59667f;margin-bottom:8px}.select-wrap{position:relative}.select-wrap:after{content:"⌄";position:absolute;right:14px;top:50%;transform:translateY(-55%);font-size:18px;color:#8490a5;pointer-events:none}.language-select{appearance:none;-webkit-appearance:none;width:100%;height:50px;padding:0 40px 0 15px;border:1px solid #dce3ef;border-radius:15px;background:#fbfcff;color:var(--ink);font-size:13px;font-weight:850;outline:none;transition:.2s}.language-select:hover{border-color:#cbd5e6;background:#fff}.language-select:focus{border-color:#8aa6ef;box-shadow:0 0 0 4px rgba(15,60,201,.08);background:#fff}.swap-btn{align-self:center;justify-self:center;width:54px;height:54px;border-radius:17px;border:1px solid #dce5fb;background:var(--royal-soft);color:var(--royal);font-size:24px;font-weight:900;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s}.swap-btn:hover{transform:rotate(180deg);background:#e4ebff;box-shadow:0 8px 20px rgba(15,60,201,.10)}.swap-btn span{display:block;transform:translateY(-1px)}
.instant-panel{margin:14px 0 0;background:#fbfcfe;border:1px solid var(--line);border-radius:20px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:var(--shadow-sm)}.instant-copy{display:flex;align-items:center;gap:12px}.instant-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#fff7df,#fff0bb);color:#a86800;font-size:18px}.instant-copy div{display:flex;flex-direction:column;gap:4px}.instant-copy b{font-size:12px;color:#27334b}.instant-copy small{font-size:9px;color:var(--muted)}.switch{position:relative;width:51px;height:29px;flex:none}.switch input{display:none}.slider{position:absolute;inset:0;border-radius:999px;background:#d4dae5;cursor:pointer;transition:.22s}.slider:after{content:"";position:absolute;width:23px;height:23px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.22s;box-shadow:0 2px 8px rgba(0,0,0,.18)}.switch input:checked+.slider{background:var(--royal)}.switch input:checked+.slider:after{transform:translateX(22px)}
.instant-banner{margin:12px 0 0;padding:12px 14px;border-radius:17px;background:linear-gradient(90deg,#eef4ff,#f7f9ff);border:1px solid #dae4ff;display:flex;align-items:center;gap:11px}.live-icon{width:32px;height:32px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(15,60,201,.07)}.instant-live-dot{width:9px;height:9px;border-radius:50%;background:var(--royal);box-shadow:0 0 0 5px rgba(15,60,201,.10);animation:softPulse 1.6s infinite}.instant-banner-copy{display:flex;flex-direction:column;gap:3px;flex:1}.instant-banner b{font-size:11px;color:#26344e}.instant-banner small{font-size:9px;color:#68758d;line-height:1.4}.stop-instant{border:1px solid #dfe5f2;background:#fff;color:#46526a;border-radius:10px;padding:8px 11px;font-size:9px;font-weight:900;cursor:pointer}.stop-instant:hover{border-color:#f0b6be;color:#b72c3f;background:#fff8f9}
.status-card{margin:14px 0 16px;background:#fbfcfe;border:1px solid var(--line);border-radius:20px;padding:13px 15px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}.status-icon-wrap{width:37px;height:37px;border-radius:12px;background:#f0faf6;display:grid!important;place-items:center!important;flex:0 0 auto!important}.status-card .status-pulse{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(21,165,111,.11)}.status-card.listening .status-icon-wrap{background:#fff1f3}.status-card.listening .status-pulse{background:var(--red);box-shadow:0 0 0 5px rgba(239,64,89,.12);animation:pulse 1.1s infinite}.status-card.processing .status-icon-wrap{background:#fff8e8}.status-card.processing .status-pulse{background:var(--amber);box-shadow:0 0 0 5px rgba(245,158,11,.12);animation:softPulse 1.2s infinite}.status-card.error .status-icon-wrap{background:#fff1f3}.status-card.error .status-pulse{background:var(--red)}.status-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.status-copy b{font-size:11px;color:#28344c}.status-copy span{font-size:9px;color:var(--muted);white-space:normal}.status-actions{display:flex!important;flex-direction:row!important;gap:7px!important;flex:0 0 auto!important}.retry-btn,.listen-btn{border:0;font-size:9px;font-weight:900;padding:9px 11px;border-radius:10px;cursor:pointer;white-space:nowrap}.retry-btn{background:#eef3ff;color:var(--royal)}.listen-btn{background:var(--royal);color:#fff;box-shadow:0 6px 16px rgba(15,60,201,.18)}
.talk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.talk-button{position:relative;min-height:245px;border:0;border-radius:28px;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;isolation:isolate}.talk-button:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.22),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.07));pointer-events:none;z-index:-1}.talk-button:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;border:1px solid rgba(255,255,255,.08);bottom:-100px;right:-45px}.talk-button:hover{transform:translateY(-2px);filter:saturate(1.03)}.talk-button:active{transform:scale(.992)}.talk-button:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}.talk-a{background:linear-gradient(145deg,#f05266 0,var(--red2) 100%);box-shadow:0 22px 45px rgba(207,41,67,.20)}.talk-b{background:linear-gradient(145deg,#1ab37b 0,var(--green2) 100%);box-shadow:0 22px 45px rgba(7,133,90,.19)}.speaker-pill{position:absolute;left:16px;top:16px;min-width:29px;height:29px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:10px;font-weight:900}.mic-orb{position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30);box-shadow:inset 0 0 0 8px rgba(255,255,255,.045),0 9px 24px rgba(0,0,0,.08)}.mic-symbol{font-size:35px;filter:grayscale(1) brightness(0) invert(1)}.mic-rings{position:absolute;inset:-8px;border:1px solid rgba(255,255,255,.18);border-radius:50%;opacity:.6}.talk-button b{font-size:19px;letter-spacing:.07em}.talk-button small{font-size:10px;opacity:.9;font-weight:700}.talk-button .timer{position:absolute;right:16px;top:16px;font-size:9px;font-weight:900;background:rgba(0,0,0,.13);padding:7px 9px;border-radius:999px;min-width:42px;min-height:27px}.talk-button.recording{animation:recordGlow 1.2s infinite}.talk-button.recording .mic-orb{background:#fff;color:#1e2a42;transform:scale(1.03)}.talk-button.recording .mic-symbol{filter:none}.talk-button.recording .mic-rings{animation:ring 1.25s infinite}.talk-button.recording b:after{content:" · EN COURS";font-size:8px;letter-spacing:.08em;opacity:.85}
.flow-strip{margin:16px 0 24px;background:#fbfcfe;border:1px solid var(--line);border-radius:18px;padding:11px 14px;display:flex;align-items:center;justify-content:center;gap:11px;box-shadow:0 5px 18px rgba(20,40,80,.035)}.flow-strip>div{display:grid;grid-template-columns:25px auto;grid-template-rows:auto auto;column-gap:8px;align-items:center}.flow-strip>div span{grid-row:1/3;width:25px;height:25px;border-radius:8px;background:var(--royal-soft);color:var(--royal);display:grid;place-items:center;font-size:9px;font-weight:900}.flow-strip b{font-size:9px;color:#39465f}.flow-strip small{font-size:8px;color:#8a95a8}.flow-strip i{font-style:normal;color:#bcc4d1;font-size:12px}
.eyebrow{font-size:9px;font-weight:900;letter-spacing:.13em;color:var(--royal)}.conversation-card{background:#fbfcfe;border:1px solid var(--line);border-radius:24px;padding:19px;box-shadow:var(--shadow)}.conversation-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.conversation-head h2{margin:4px 0 0;font-size:18px;letter-spacing:-.02em}.text-btn{border:0;background:#f5f7fb;color:#65728a;font-size:9px;font-weight:900;cursor:pointer;padding:8px 10px;border-radius:9px}.text-btn:hover{background:#eef3ff;color:var(--royal)}.conversation-log{display:flex;flex-direction:column;gap:11px;max-height:460px;overflow:auto;padding-right:3px}.conversation-log::-webkit-scrollbar{width:6px}.conversation-log::-webkit-scrollbar-thumb{background:#dbe1eb;border-radius:10px}.empty-log{border:1px dashed #d8dfeb;border-radius:16px;padding:26px 18px;text-align:center;color:var(--muted);font-size:10px;background:#fbfcfe}.exchange{border:1px solid #e6eaf1;border-radius:17px;overflow:hidden;background:#fbfcff}.exchange-head{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;border-bottom:1px solid #e8edf4;background:#f7f9fc}.exchange-head b{font-size:9px}.exchange-head span{font-size:8px;color:var(--muted)}.utterance{padding:12px 13px}.utterance+.utterance{border-top:1px solid #e8edf4;background:#fff}.utterance small{display:block;font-size:8px;font-weight:900;letter-spacing:.08em;color:var(--muted);margin-bottom:5px}.utterance p{margin:0;font-size:13px;line-height:1.55;font-weight:650}.utterance.translation{border-left:4px solid var(--royal)}.exchange-actions{padding:0 13px 11px;background:#fff}.replay-btn{border:0;background:#eef3ff;color:var(--royal);border-radius:9px;padding:8px 10px;font-size:9px;font-weight:900;cursor:pointer}.footer-note{text-align:center;color:#8590a3;line-height:1.6;margin-top:21px;padding:0 12px;display:flex;flex-direction:column;gap:3px}.footer-note strong{font-size:11px;letter-spacing:.12em;color:#61708b}.footer-note span{font-size:9px}.footer-note small{font-size:8px;color:#9ba4b4}
.modal-backdrop{position:fixed;inset:0;background:rgba(8,18,42,.52);display:grid;place-items:center;padding:18px;z-index:100;backdrop-filter:blur(8px)}.modal{width:min(520px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;padding:23px;box-shadow:0 35px 90px rgba(10,20,42,.30);border:1px solid rgba(255,255,255,.5)}.modal h2{margin:6px 0 8px;font-size:21px}.modal p{color:var(--muted);font-size:10px;line-height:1.6}.field{margin:14px 0}.field label{display:block;font-size:9px;font-weight:900;margin-bottom:7px;color:#4d5a72}.input,.select{width:100%;padding:12px 13px;border:1px solid #dce3ef;border-radius:12px;background:#fff;color:var(--ink);outline:none}.input:focus,.select:focus{border-color:#8aa6ef;box-shadow:0 0 0 4px rgba(15,60,201,.07)}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 0;border-top:1px solid #edf0f5}.switch-row b{font-size:10px}.switch-row small{font-size:8px;color:var(--muted)}.notice{padding:12px 13px;border-radius:12px;background:#f4f7ff;color:#46536a;font-size:9px;line-height:1.55;border:1px solid #e5ebfb}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}.btn{border:0;border-radius:11px;padding:10px 13px;font-size:9px;font-weight:900;cursor:pointer}.btn.primary{background:var(--royal);color:#fff;box-shadow:0 7px 18px rgba(15,60,201,.18)}.btn.ghost{background:#eef2f7;color:#35445e}.btn.danger{background:#fff0f1;color:#bd3040}.full{width:100%}.engine-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.engine-row b,.engine-row small{display:block}.engine-row b{font-size:10px}.engine-row small{font-size:8px;color:var(--muted);margin-top:3px}.engine-state{font-size:8px;font-weight:900;padding:7px 9px;border-radius:999px;background:#eef2f7;color:#58657a}.engine-state.ok{background:#e9f9f2;color:#07865a}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111d37;color:#fff;border-radius:12px;padding:10px 14px;font-size:9px;font-weight:800;opacity:0;pointer-events:none;transition:.2s;z-index:200;box-shadow:0 15px 45px rgba(10,20,42,.25)}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pulse{50%{transform:scale(1.2);opacity:.65}}@keyframes softPulse{50%{opacity:.55;transform:scale(.9)}}@keyframes ring{0%{transform:scale(.92);opacity:.8}70%{transform:scale(1.28);opacity:0}100%{transform:scale(1.28);opacity:0}}@keyframes recordGlow{50%{box-shadow:0 24px 55px rgba(239,64,89,.30)}}
@media(max-width:760px){.topbar{height:66px;padding:0 14px}.brand-mark{width:38px;height:38px;border-radius:12px}.brand-copy small{display:none}.status-chip span{display:none}.status-chip{width:38px;padding:0;justify-content:center}.main{padding:27px 13px 42px}.hero{margin-bottom:20px}.hero h1{font-size:32px}.hero p{font-size:11px;padding:0 7px}.language-panel{grid-template-columns:1fr 48px 1fr;gap:7px;padding:12px;border-radius:22px}.language-side{padding:3px}.person-tag{font-size:7.5px}.language-side label{font-size:9px}.language-select{height:47px;padding-left:11px;padding-right:28px;font-size:11px;border-radius:13px}.select-wrap:after{right:10px;font-size:15px}.swap-btn{width:44px;height:44px;border-radius:14px;font-size:20px}.instant-panel{border-radius:17px;padding:11px 12px}.instant-icon{width:34px;height:34px}.instant-copy b{font-size:11px}.instant-copy small{font-size:8px}.instant-banner{padding:10px 11px}.instant-banner small{font-size:8px}.status-card{border-radius:17px;padding:11px 12px}.status-icon-wrap{width:34px;height:34px}.status-actions{gap:5px!important}.retry-btn,.listen-btn{padding:8px 9px;font-size:8px}.talk-grid{gap:10px}.talk-button{min-height:215px;border-radius:23px}.mic-orb{width:76px;height:76px}.mic-symbol{font-size:31px}.talk-button b{font-size:16px}.flow-strip{gap:6px;padding:10px 8px;overflow:hidden}.flow-strip>div{grid-template-columns:22px auto;column-gap:6px}.flow-strip>div span{width:22px;height:22px}.flow-strip small{display:none}.flow-strip i{font-size:10px}.conversation-card{padding:15px;border-radius:20px}.conversation-head h2{font-size:16px}.footer-note small{font-size:7px}}
@media(max-width:480px){.hero h1{font-size:29px}.language-panel{grid-template-columns:1fr 42px 1fr}.language-select{font-size:10px}.swap-btn{width:40px;height:40px}.talk-button{min-height:198px}.mic-orb{width:70px;height:70px}.instant-banner{align-items:flex-start}.stop-instant{padding:7px 8px}.status-card{align-items:flex-start}.status-actions{align-self:center}.footer-note small{max-width:330px;margin:auto}}
@media(max-width:360px){.main{padding-left:9px;padding-right:9px}.top-actions{gap:5px}.talk-grid{grid-template-columns:1fr}.talk-button{min-height:170px}.flow-strip{display:none}.language-panel{grid-template-columns:1fr 36px 1fr;padding:9px}.language-select{font-size:9px;padding-left:8px}.person-tag{font-size:6.5px}.swap-btn{width:34px;height:34px;border-radius:11px}.hero p{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* VERO 2.5 — conteneur blanc sur fond gris */
@media(min-width:761px){
.topbar{padding-left:28px;padding-right:28px}
}
@media(max-width:760px){
body{padding:10px 8px 22px;background:#e7ebf0}
.app-shell{min-height:calc(100vh - 32px);border-radius:24px;box-shadow:0 16px 42px rgba(36,48,70,.14)}
.main{padding:27px 14px 42px}
.topbar{border-radius:24px 24px 0 0}
}
@media(max-width:480px){
body{padding:6px 5px 14px}
.app-shell{border-radius:20px;min-height:calc(100vh - 20px)}
.topbar{border-radius:20px 20px 0 0}
}
/* VERO 2.6 — interface inspirée d'un appareil interprète */
body{background:#d9dde2;padding:24px 16px 36px}
.device-shell{max-width:720px;background:#fff;border-radius:34px;box-shadow:0 28px 80px rgba(20,28,40,.18);border:1px solid #d7dce3;overflow:hidden;min-height:auto}
.compact-topbar{position:relative;height:68px;padding:0 22px;background:#fff;border-bottom:1px solid #e5e8ed}
.device-main{max-width:none;padding:22px;background:#fff}
.interpreter-screen{background:linear-gradient(180deg,#081321 0%,#0d1e31 100%);border-radius:28px;padding:24px 20px 20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 35px rgba(12,24,42,.16);color:#fff}
.screen-title{text-align:center;font-size:10px;letter-spacing:.18em;font-weight:900;color:#9fb1c8;margin-bottom:20px}
.language-bar{display:grid;grid-template-columns:1fr 52px 1fr;align-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:6px 8px;gap:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.lang-side{display:flex;align-items:center;gap:7px;min-width:0}.lang-right{justify-content:flex-end}.wave-icon{font-size:13px;letter-spacing:1px;transform:scaleX(.8)}.wave-icon.cyan{color:#27d8ff}.wave-icon.red{color:#ff536d}
.language-bar .select-wrap{flex:1;min-width:0}.language-bar .language-select{width:100%;height:44px;border:0;background:transparent;color:#fff;font-size:14px;font-weight:800;padding:0 28px 0 8px;outline:none}.language-bar .language-select option{color:#111;background:#fff}.language-bar .select-wrap:after{color:#9fb1c8;right:7px}
.language-bar .swap-btn{width:44px;height:44px;border-radius:50%;background:#142b43;color:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:none;font-size:24px}
.interpreter-screen .instant-panel{margin:18px 0 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);box-shadow:none;color:#fff}.interpreter-screen .instant-copy small{color:#9fb1c8}.interpreter-screen .instant-icon{background:#17304a;color:#ffd45a}
.interpreter-screen .instant-banner{background:rgba(21,165,111,.12);border-color:rgba(21,165,111,.32);color:#fff}.interpreter-screen .instant-banner small{color:#a8c9bb}
.interpreter-screen .status-card{margin-top:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);box-shadow:none;color:#fff}.interpreter-screen .status-copy span{color:#aebfd1}.interpreter-screen .status-icon-wrap{background:#17304a}.interpreter-screen .listen-btn,.interpreter-screen .retry-btn{background:#fff;color:#10243a}
.screen-dots{display:flex;justify-content:center;gap:9px;margin-top:18px}.screen-dots span{width:6px;height:6px;border-radius:50%;background:#4e6074}.screen-dots .active{width:22px;border-radius:999px;background:#fff}
.hardware-controls{display:grid;grid-template-columns:1fr 116px 1fr;gap:16px;align-items:center;padding:28px 8px 12px}
.hardware-controls .talk-button{min-height:150px;border-radius:26px;border:0;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;position:relative;cursor:pointer;transition:.18s transform,.18s box-shadow}.hardware-controls .talk-button:active{transform:translateY(2px) scale(.99)}
.hardware-controls .talk-a{background:linear-gradient(145deg,#14b9d2,#087f9e);box-shadow:0 16px 34px rgba(8,127,158,.22)}.hardware-controls .talk-b{background:linear-gradient(145deg,#f45b68,#c93447);box-shadow:0 16px 34px rgba(201,52,71,.22)}
.hardware-controls .mic-orb{width:72px;height:72px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 0 6px rgba(255,255,255,.035)}.mic-bars{font-weight:900;letter-spacing:2px;font-size:22px}.hardware-controls .talk-button b{font-size:14px;letter-spacing:.09em}.hardware-controls .talk-button small{font-size:10px}.hardware-controls .timer{position:absolute;top:12px;right:12px;font-size:8px;background:rgba(0,0,0,.12);border-radius:999px;padding:5px 7px;min-height:22px}
.center-discussion{width:104px;height:104px;border-radius:50%;border:8px solid #e8ebef;background:linear-gradient(#fff,#f5f7f9);box-shadow:0 12px 28px rgba(20,28,40,.15),inset 0 0 0 1px #d6dbe2;color:#26364a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}.center-discussion span{font-size:24px;font-weight:900}.center-discussion b{font-size:8px;letter-spacing:.08em}
.compact-history{margin-top:18px;border-radius:20px;background:#f8f9fb;box-shadow:none}.compact-history .conversation-log{max-height:300px}.footer-note{margin-top:16px}
.hero,.language-panel,.talk-grid,.flow-strip{display:none!important}
@media(max-width:640px){body{padding:8px 6px 16px}.device-shell{border-radius:24px}.compact-topbar{height:62px;padding:0 12px}.device-main{padding:12px}.interpreter-screen{border-radius:22px;padding:19px 12px 16px}.language-bar{grid-template-columns:1fr 44px 1fr;padding:5px}.language-bar .language-select{font-size:11px;height:40px;padding-left:5px}.language-bar .swap-btn{width:38px;height:38px;font-size:20px}.wave-icon{display:none}.hardware-controls{grid-template-columns:1fr 88px 1fr;gap:9px;padding:18px 2px 8px}.hardware-controls .talk-button{min-height:130px;border-radius:22px}.hardware-controls .mic-orb{width:60px;height:60px}.mic-bars{font-size:18px}.center-discussion{width:82px;height:82px;border-width:6px}.center-discussion span{font-size:20px}.center-discussion b{font-size:6px}.compact-history{padding:13px}.brand-copy small{display:block}.status-chip span{display:none}.status-chip{width:38px;padding:0;justify-content:center}}
@media(max-width:390px){.language-bar{grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr)}.language-bar .language-select{font-size:9.5px;padding-right:18px}.hardware-controls{grid-template-columns:1fr 76px 1fr}.center-discussion{width:72px;height:72px}.hardware-controls .talk-button{min-height:120px}.hardware-controls .talk-button b{font-size:12px}}
/* VERO 2.7 — disposition portrait fidèle au dispositif de référence */
.vero27-body{margin:0;min-height:100vh;background:#cfd3d8;padding:22px 16px;display:flex;align-items:flex-start;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.vero27-stage{width:100%;display:flex;justify-content:center}
.vero27-device{width:min(430px,100%);max-width:430px;min-height:700px;background:#2f3135;border-radius:32px;border:1px solid #8d9299;box-shadow:0 26px 68px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.16);overflow:hidden;position:relative}
.vero27-screen{height:520px;background:
radial-gradient(circle at 55% 46%,rgba(0,221,255,.40),transparent 12%),
radial-gradient(circle at 44% 40%,rgba(0,93,186,.38),transparent 25%),
radial-gradient(circle at 60% 55%,rgba(0,58,118,.40),transparent 28%),
linear-gradient(180deg,#020306 0%,#060b12 55%,#010203 100%);position:relative;color:#fff;padding:20px 22px 24px;overflow:hidden}
.vero27-screen:before{content:"";position:absolute;inset:0;background:
radial-gradient(circle at 32% 37%,rgba(23,210,255,.50) 0 1px,transparent 3px),
radial-gradient(circle at 68% 44%,rgba(19,106,255,.38) 0 1px,transparent 3px),
radial-gradient(circle at 46% 58%,rgba(0,224,255,.22) 0 2px,transparent 5px);filter:blur(2px);opacity:.9;pointer-events:none}
.vero27-topline{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}
.vero27-brand{border:0;background:rgba(255,255,255,.06);color:#dce9f5;border-radius:999px;padding:7px 11px;font-size:9px;font-weight:900;letter-spacing:.18em;cursor:pointer}
.vero27-top-actions{display:flex;align-items:center;gap:6px}.vero27-engine{height:29px;padding:0 9px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#b8c7d7;box-shadow:none}.vero27-engine span{font-size:8px}.vero27-settings{width:30px;height:30px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#c8d4df;border-radius:50%;cursor:pointer}
.vero27-clock-wrap{position:relative;z-index:2;text-align:center;margin-top:62px}.vero27-clock{font-size:54px;font-weight:300;letter-spacing:-.035em;line-height:1;color:#f2f7fb;text-shadow:0 0 12px rgba(255,255,255,.15)}.vero27-clock small{font-size:16px;font-weight:700;margin-left:4px}.vero27-date{margin-top:12px;font-size:19px;font-weight:600;color:#b8c0c9;letter-spacing:.01em}
.vero27-language-pill{position:absolute;z-index:3;left:50%;bottom:76px;transform:translateX(-50%);width:calc(100% - 62px);height:64px;border-radius:999px;background:linear-gradient(180deg,rgba(45,63,81,.92),rgba(22,34,47,.96));border:1px solid rgba(255,255,255,.09);box-shadow:0 8px 24px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07);display:grid;grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr);align-items:center;padding:0 11px}
.vero27-lang{display:flex;align-items:center;gap:8px;min-width:0}.vero27-lang-right{justify-content:flex-end}.vero27-bars{font-size:18px;letter-spacing:1px;font-weight:900}.vero27-bars.cyan{color:#24d8ff;text-shadow:0 0 10px rgba(36,216,255,.55)}.vero27-bars.red{color:#ff394f;text-shadow:0 0 10px rgba(255,57,79,.45)}
.vero27-language-pill .select-wrap{flex:1;min-width:0}.vero27-language-pill .select-wrap:after{display:none}.vero27-language-pill .language-select{appearance:none;-webkit-appearance:none;width:100%;height:48px;border:0;background:transparent;color:#fff;font-size:15px;font-weight:800;padding:0 4px;outline:none;white-space:nowrap;text-overflow:ellipsis}.vero27-language-pill .language-select option{color:#111;background:#fff}.vero27-swap{width:44px!important;height:44px!important;border:0!important;background:transparent!important;color:#dce7ef!important;font-size:32px!important;box-shadow:none!important;border-radius:50%!important;padding:0!important}.vero27-swap:hover{transform:none!important;background:rgba(255,255,255,.05)!important}
.vero27-dots{position:absolute;z-index:2;left:0;right:0;bottom:24px;display:flex;justify-content:center;gap:13px}.vero27-dots span{width:7px;height:7px;border-radius:50%;background:#363b43}.vero27-dots .active{width:20px;border-radius:999px;background:#fff}
.vero27-status{position:absolute;z-index:4;left:22px;right:22px;bottom:15px;transform:translateY(100%);margin:0;background:transparent;border:0;box-shadow:none;padding:0;pointer-events:none}.vero27-status .status-icon-wrap,.vero27-status .status-actions{display:none!important}.vero27-status .status-copy{align-items:center;text-align:center}.vero27-status .status-copy b{font-size:0}.vero27-status .status-copy span{font-size:0}
.vero27-controls{height:180px;background:linear-gradient(180deg,#3c3e42,#2c2e31);display:grid;grid-template-columns:1fr 104px 1fr;gap:14px;align-items:start;padding:26px 24px 0;border-top:1px solid rgba(255,255,255,.08);position:relative}
.vero27-talk{min-height:78px!important;height:78px!important;border-radius:26px!important;border:1px solid #1e2023!important;background:linear-gradient(180deg,#414347,#313337)!important;box-shadow:0 8px 14px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08)!important;color:#fff!important;gap:2px!important;padding:0!important;overflow:visible!important}.vero27-talk:before,.vero27-talk:after{display:none!important}.vero27-voice-icon{display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1}.vero27-talk .mic-bars{font-size:25px;letter-spacing:2px}.vero27-talk-a .mic-bars{color:#23dcff;text-shadow:0 0 12px rgba(35,220,255,.62)}.vero27-talk-b .mic-bars{color:#ff3247;text-shadow:0 0 12px rgba(255,50,71,.50)}.vero27-talk b{font-size:9px!important;letter-spacing:.12em!important}.vero27-talk small{font-size:7px!important;color:#bfc3c8!important}.vero27-talk .timer{position:absolute;top:-18px;right:3px;font-size:7px;color:#bfc3c8;background:transparent;padding:0}
.vero27-center{width:92px;height:92px;border-radius:50%;border:6px solid #24262a;background:linear-gradient(180deg,#4a4c50,#313337);box-shadow:0 10px 18px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.10);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;margin-top:-12px}.vero27-center-symbol{font-size:22px;font-weight:800;line-height:1}.vero27-center b{font-size:10px;letter-spacing:.02em}.vero27-center small{font-size:7px;color:#aeb3ba;margin-top:2px;letter-spacing:.10em}
.vero27-speaker{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);width:82%;display:grid;grid-template-columns:repeat(10,1fr);gap:8px 10px;opacity:.85}.vero27-speaker span{width:5px;height:5px;background:#151619;border-radius:50%;box-shadow:inset 0 1px 1px rgba(255,255,255,.05)}
.vero27-hidden-panel{display:none!important}
@media(max-width:520px){.vero27-body{padding:0;background:#2f3135;align-items:stretch}.vero27-stage{min-height:100dvh}.vero27-device{width:100%;max-width:none;min-height:100dvh;border-radius:0;border:0;box-shadow:none}.vero27-screen{height:68dvh;min-height:500px}.vero27-controls{height:32dvh;min-height:185px}.vero27-clock-wrap{margin-top:11dvh}.vero27-clock{font-size:13.5vw}.vero27-date{font-size:4.8vw}.vero27-language-pill{bottom:70px;width:calc(100% - 34px);height:60px}.vero27-language-pill .language-select{font-size:3.8vw;height:46px}.vero27-controls{padding:24px 18px 0;grid-template-columns:1fr 94px 1fr;gap:12px}.vero27-talk{height:76px!important;min-height:76px!important}.vero27-center{width:86px;height:86px;margin-top:-9px}.vero27-speaker{bottom:14px}}
@media(max-width:380px){.vero27-controls{grid-template-columns:1fr 92px 1fr;gap:10px;padding-left:12px;padding-right:12px}.vero27-center{width:86px;height:86px}.vero27-talk{height:78px!important;min-height:78px!important}.vero27-language-pill{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)}.vero27-bars{display:none}.vero27-language-pill .language-select{font-size:13px}.vero27-clock-wrap{margin-top:13vh}}
/* VERO 2.11 — validation terrain */
.validation-modal{max-width:760px!important}
.validation-loading{padding:24px 0;color:#64748b;text-align:center;font-weight:700}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0 20px}
.metric-grid>div{background:#f6f8fb;border:1px solid #e4e9f0;border-radius:16px;padding:14px 10px;text-align:center}
.metric-grid b{display:block;font-size:23px;line-height:1.1;color:#111827}
.metric-grid span{display:block;margin-top:5px;font-size:10px;font-weight:800;color:#6b7280;text-transform:uppercase;letter-spacing:.06em}
.validation-modal h3{font-size:13px;margin:18px 0 9px;color:#1f2937}
.validation-table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.validation-table{width:100%;border-collapse:collapse;min-width:560px;font-size:11px}
.validation-table th,.validation-table td{padding:10px 9px;border-bottom:1px solid #eef1f4;text-align:left;white-space:nowrap}
.validation-table th{background:#f8fafc;color:#667085;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.validation-table tbody tr:last-child td{border-bottom:0}
.quality-list{display:grid;gap:8px}
.quality-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:10px 12px}
.quality-item>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}.quality-item b{font-size:12px;color:#111827}.quality-item small{font-size:9px;color:#7c8796}
.quality-actions{display:flex;gap:6px;flex-shrink:0}.quality-btn{border:1px solid #dbe1e8;background:#f8fafc;color:#344054;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:900;cursor:pointer}.quality-btn.warn{color:#9a3412;background:#fff7ed;border-color:#fed7aa}.quality-btn.selected{background:#eaf8ef;border-color:#9ed7b0;color:#166534}.quality-btn.warn.selected{background:#fff0e8;border-color:#fdba74;color:#9a3412}
.validation-note{margin-top:12px;padding:10px 12px;border-radius:12px;background:#f4f7fb;color:#5f6b7a;font-size:10px;line-height:1.45}
.validation-actions{flex-wrap:wrap}
@media(max-width:620px){.metric-grid{grid-template-columns:repeat(2,1fr)}.quality-item{align-items:flex-start;flex-direction:column}.quality-actions{width:100%}.quality-btn{flex:1}.validation-modal{max-width:none!important}}
/* =========================================================
VERO 2.15 — IDENTITÉ OKAPI / RDC
La structure validée reste intacte ; seuls les matériaux,
couleurs et le fond de l’écran supérieur sont retravaillés.
========================================================= */
.vero27-body{
background:
radial-gradient(circle at 18% 12%,rgba(20,93,160,.10),transparent 34%),
radial-gradient(circle at 86% 82%,rgba(244,190,38,.08),transparent 30%),
#d9dee4;
}
.vero27-device{
background:#1f2830;
border:1px solid #66737f;
box-shadow:
0 30px 76px rgba(12,24,38,.30),
0 0 0 1px rgba(255,255,255,.16) inset;
}
.vero27-screen{
background-image:
linear-gradient(180deg,rgba(3,10,17,.58) 0%,rgba(3,13,23,.38) 34%,rgba(3,13,21,.50) 72%,rgba(2,7,12,.90) 100%),
linear-gradient(90deg,rgba(4,31,58,.50) 0%,rgba(3,14,24,.10) 48%,rgba(0,0,0,.08) 100%),
url('okapi-bg.webp');
background-size:cover;
background-position:center 54%;
background-repeat:no-repeat;
}
.vero27-screen:before{
background:
radial-gradient(circle at 14% 18%,rgba(21,126,205,.22),transparent 28%),
radial-gradient(circle at 84% 72%,rgba(243,194,47,.13),transparent 28%),
linear-gradient(126deg,transparent 0 68%,rgba(206,38,57,.10) 69% 72%,rgba(246,202,54,.09) 72% 74%,transparent 74% 100%);
filter:none;
opacity:1;
}
.vero27-screen:after{
content:"";
position:absolute;
left:0;right:0;bottom:0;height:5px;
background:linear-gradient(90deg,#1b83c7 0 53%,#f2c63f 53% 57%,#cf3146 57% 100%);
opacity:.78;
pointer-events:none;
}
.vero27-brand{
background:rgba(6,22,35,.50);
border:1px solid rgba(255,255,255,.15);
color:#f4d46e;
box-shadow:0 6px 20px rgba(0,0,0,.14);
backdrop-filter:blur(7px);
}
.vero27-engine,.vero27-settings{
background:rgba(5,19,31,.50);
border-color:rgba(255,255,255,.16);
backdrop-filter:blur(7px);
}
.vero27-clock-wrap{
text-shadow:0 3px 18px rgba(0,0,0,.88);
}
.vero27-clock{
color:#fff;
font-weight:350;
text-shadow:0 3px 20px rgba(0,0,0,.92),0 0 2px rgba(255,255,255,.55);
}
.vero27-clock small{color:#f5d46a;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.vero27-date{color:#eef3f6;text-shadow:0 3px 14px rgba(0,0,0,.92)}
.vero27-language-pill{
background:linear-gradient(180deg,rgba(15,38,56,.88),rgba(8,22,35,.94));
border:1px solid rgba(174,211,234,.24);
box-shadow:0 12px 30px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.11);
backdrop-filter:blur(10px);
}
.vero27-bars.cyan{color:#52c9ff;text-shadow:0 0 12px rgba(82,201,255,.62)}
.vero27-bars.red{color:#f3c64f;text-shadow:0 0 12px rgba(243,198,79,.52)}
.vero27-swap{color:#f1f6fa!important}
.vero27-dots span{background:rgba(240,246,250,.25)}
.vero27-dots .active{background:#f5cf58;box-shadow:0 0 8px rgba(245,207,88,.35)}
.vero27-controls{
background:
radial-gradient(circle at 18% 20%,rgba(38,129,181,.13),transparent 30%),
radial-gradient(circle at 82% 18%,rgba(241,194,62,.10),transparent 30%),
linear-gradient(180deg,#27333d 0%,#1c252c 100%);
border-top:0;
}
.vero27-talk{
border:1px solid rgba(170,192,207,.22)!important;
background:linear-gradient(180deg,#344550 0%,#202b33 100%)!important;
box-shadow:
0 12px 22px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 -10px 18px rgba(0,0,0,.12)!important;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.vero27-talk:hover{
transform:translateY(-2px)!important;
border-color:rgba(255,255,255,.32)!important;
}
.vero27-talk:active{transform:translateY(0) scale(.985)!important}
.vero27-talk-a{
box-shadow:0 12px 22px rgba(0,0,0,.34),inset 4px 0 0 rgba(58,184,235,.80),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.vero27-talk-b{
box-shadow:0 12px 22px rgba(0,0,0,.34),inset -4px 0 0 rgba(241,191,54,.86),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.vero27-talk-a .mic-bars{color:#4dcdff;text-shadow:0 0 14px rgba(77,205,255,.66)}
.vero27-talk-b .mic-bars{color:#f2c34a;text-shadow:0 0 14px rgba(242,195,74,.56)}
.vero27-talk b{color:#fff}
.vero27-talk small{color:#c7d2da!important}
.vero27-center{
border:5px solid #182127;
border-radius:28px;
background:
linear-gradient(145deg,rgba(47,114,153,.88),rgba(28,49,64,.96));
box-shadow:
0 13px 24px rgba(0,0,0,.40),
inset 0 1px 0 rgba(255,255,255,.16),
0 0 0 1px rgba(242,198,72,.34);
color:#fff;
transform:rotate(0deg);
}
.vero27-center:hover{filter:brightness(1.08)}
.vero27-center-symbol{color:#f2ca59;text-shadow:0 0 10px rgba(242,202,89,.32)}
.vero27-center small{color:#d7e2e9}
.vero27-speaker{opacity:.72}
.vero27-speaker span{background:#0d151a;box-shadow:inset 0 1px 1px rgba(255,255,255,.06)}
@media(max-width:520px){
.vero27-body{background:#1f2830}
.vero27-screen{background-position:center 54%}
}
/* =========================================================
VERO 2.16 — TABLEAU DE BORD OKAPI RDC
========================================================= */
.view-hidden{display:none!important}
.translator-view{position:relative;min-height:700px;background:#2f3135}
.vero-dashboard{min-height:700px;background:linear-gradient(180deg,#08253b 0%,#0a2f4b 48%,#08243a 100%);color:#fff;position:relative}
.dash-hero{height:314px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.12);background-color:#092a38;background-image:url('okapi-full.webp'),radial-gradient(circle at 76% 42%,rgba(37,116,95,.34),transparent 46%),linear-gradient(135deg,#092b3b 0%,#0b3a45 48%,#092635 100%);background-repeat:no-repeat,no-repeat,no-repeat;background-size:auto 96%,cover,cover;background-position:right 8px center,center,center}
.dash-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,20,34,.96) 0%,rgba(3,24,39,.86) 29%,rgba(3,24,39,.42) 47%,rgba(3,19,30,.06) 68%,rgba(3,20,33,.10) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(3,25,41,.10) 58%,rgba(4,33,53,.88) 100%)}
.dash-topbar{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;padding:22px 22px 0}
.dash-brand{display:flex;flex-direction:column;line-height:.9;text-shadow:0 4px 18px rgba(0,0,0,.65)}
.dash-brand strong{font-size:37px;font-weight:950;letter-spacing:-.055em;color:#f4cf5d}
.dash-brand span{font-size:12px;font-weight:900;letter-spacing:.25em;color:#fff;margin:9px 0 0 4px}
.dash-indicators{display:flex;align-items:center;gap:13px;padding-top:2px}
.dash-net{width:33px;height:29px;display:grid;place-items:center;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}.dash-net svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round}.dash-net.offline svg{stroke:#ff8a8a}
.dash-battery{--battery:60%;width:51px;height:24px;border:2px solid #fff;border-radius:6px;position:relative;display:flex;align-items:center;padding:3px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}.dash-battery:after{content:"";position:absolute;right:-6px;width:4px;height:10px;border-radius:0 2px 2px 0;background:#fff}.dash-battery i{display:block;width:var(--battery);height:100%;border-radius:2px;background:#fff}.dash-battery em{position:absolute;top:29px;left:50%;transform:translateX(-50%);font-style:normal;font-size:8px;font-weight:800;color:#fff;text-shadow:0 2px 5px #000;white-space:nowrap}.dash-battery.charging i{background:#7dff9d}.dash-battery.unknown i{width:65%;opacity:.6}
.dash-clock-wrap{position:absolute;z-index:2;left:22px;bottom:54px;text-shadow:0 5px 22px rgba(0,0,0,.8)}
.dash-clock{font-size:58px;line-height:.9;font-weight:350;letter-spacing:-.05em}.dash-clock small{font-size:17px;font-weight:850;letter-spacing:.04em;color:#f6d36a;margin-left:5px}
.dash-date{font-size:18px;font-weight:750;margin-top:13px;color:#f3f7f9}
.dash-tagline{position:absolute;z-index:2;right:18px;bottom:18px;padding:7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(4,27,44,.38);backdrop-filter:blur(6px);font-size:8px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:#e9f1f5}
.dash-grid{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:11px;background:linear-gradient(180deg,#092b45,#071f33 100%)}
.dash-tile{height:82px;border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:0 8px 15px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.20);color:#fff;display:grid;grid-template-columns:54px 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;padding:9px 11px;cursor:pointer;position:relative;overflow:hidden;transition:transform .14s ease,filter .14s ease}
.dash-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 45%);pointer-events:none}.dash-tile:hover{transform:translateY(-2px);filter:brightness(1.08)}.dash-tile:active{transform:scale(.985)}
.tile-icon{grid-row:1/3;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.10);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}.tile-icon svg{width:31px;height:31px;fill:none;stroke:#fff;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.dash-tile b{align-self:end;font-size:14px;font-weight:900;letter-spacing:-.01em}.dash-tile small{align-self:start;font-size:8px;font-weight:650;color:rgba(255,255,255,.74);margin-top:3px}
.tile-blue{background:linear-gradient(150deg,#1575bd,#07518a)}.tile-green{background:linear-gradient(150deg,#13945e,#087043)}.tile-gold{background:linear-gradient(150deg,#dca91e,#a66d08)}.tile-purple{background:linear-gradient(150deg,#5f65ac,#393f7f)}.tile-red{background:linear-gradient(150deg,#c73b43,#8a1820)}.tile-teal{background:linear-gradient(150deg,#08a8a7,#057174)}.tile-sky{background:linear-gradient(150deg,#0a7ec4,#08558d)}.tile-dark{background:linear-gradient(150deg,#4a545d,#252c32)}
.dash-modal .dash-history{max-height:340px;overflow:auto;margin:14px 0}.dash-history-item{border:1px solid #e5e9ef;border-radius:14px;padding:12px;margin-bottom:8px;background:#fbfcfd}.dash-history-item>div{display:flex;justify-content:space-between;gap:12px}.dash-history-item b{font-size:11px}.dash-history-item span{font-size:9px;color:#7a8495}.dash-history-item p{font-size:11px;line-height:1.5;margin:7px 0 0;color:#384359}.dash-empty{padding:22px;text-align:center;color:#7a8495;background:#f7f9fb;border-radius:14px;font-size:11px}.info-note{margin-top:14px;padding:12px 13px;border-radius:13px;background:#eef6ff;color:#34506f;font-size:10px;line-height:1.5}.backup-actions{display:flex;gap:8px;margin:16px 0}
.sleep-screen{height:700px;position:relative;background-image:url('okapi-bg.webp');background-size:cover;background-position:center;color:#fff}.sleep-overlay{position:absolute;inset:0;background:rgba(1,12,20,.88);backdrop-filter:blur(3px)}.sleep-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.sleep-logo{font-size:31px;font-weight:950;letter-spacing:-.04em;color:#f3cf60}.sleep-logo span{font-size:10px;letter-spacing:.25em;color:#fff}.sleep-power{font-size:58px;margin:34px 0 14px;color:#8ea2b2}.sleep-content h2{font-size:22px;margin:0}.sleep-content p{font-size:11px;color:#aebcc7}.sleep-content button{margin-top:20px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:#fff;border-radius:999px;padding:12px 22px;font-weight:850;cursor:pointer}
@media(max-width:520px){.vero-dashboard{min-height:100dvh}.dash-hero{height:43dvh;min-height:290px;max-height:360px;background-size:auto 88%,cover,cover;background-position:right -8px bottom 10px,center,center}.dash-shade{background:linear-gradient(90deg,rgba(2,20,34,.95) 0%,rgba(3,24,39,.82) 26%,rgba(3,24,39,.32) 48%,rgba(3,19,30,.05) 72%,rgba(3,20,33,.08) 100%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(3,25,41,.08) 58%,rgba(4,33,53,.90) 100%)}.dash-grid{min-height:57dvh;align-content:start}.translator-view{min-height:100dvh}.sleep-screen{height:100dvh}.dash-clock{font-size:14vw}.dash-brand strong{font-size:9vw}}
@media(max-width:370px){.dash-grid{gap:8px;padding:10px}.dash-tile{height:76px;grid-template-columns:48px 1fr;padding:8px}.tile-icon{width:42px;height:42px}.dash-tile b{font-size:12px}.dash-tagline{display:none}.dash-clock-wrap{left:18px}.dash-topbar{padding-left:18px;padding-right:18px}}
/* =========================================================
VERO 2.18 — DÉMO OKAPI CORRIGÉE
- Okapi totalement lisible sur l'accueil et l'interprète
- Suppression du voile sombre latéral qui masquait l'animal
- Même cadrage sur PC et téléphone, sans zoom agressif
- Aucun changement fonctionnel
========================================================= */
/* ACCUEIL : photo nette, animal entier, végétation visible. */
.dash-hero{
background-color:#163b32;
background-image:
url('okapi-full.webp'),
linear-gradient(135deg,#184b3b 0%,#2d664e 52%,#173d31 100%);
background-repeat:no-repeat,no-repeat;
background-size:auto 100%,cover;
background-position:right center,center;
}
/* Ne plus poser de voile noir sur le corps de l'okapi. Uniquement une
légère assise basse pour la lisibilité, sans masquer la photo. */
.dash-shade{
background:
linear-gradient(180deg,rgba(1,12,14,.02) 0%,rgba(1,12,14,.02) 66%,rgba(2,20,25,.34) 100%);
}
/* Le logo et l'heure restent lisibles sans assombrir tout le fond. */
.dash-brand,
.dash-clock-wrap{
filter:drop-shadow(0 3px 7px rgba(0,0,0,.92));
}
.dash-clock-wrap{
padding:7px 10px 8px;
border-radius:12px;
background:rgba(4,24,25,.14);
backdrop-filter:none;
}
.dash-tagline{
background:rgba(4,27,32,.42);
backdrop-filter:none;
}
/* INTERPRÈTE : utilise la même scène complète que l'accueil. */
.vero27-screen{
background-color:#173d31;
background-image:
linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.02) 70%,rgba(2,11,14,.34) 100%),
url('okapi-full.webp'),
linear-gradient(135deg,#184b3b 0%,#2d664e 52%,#173d31 100%);
background-repeat:no-repeat,no-repeat,no-repeat;
background-size:100% 100%,auto 100%,cover;
background-position:center,right center,center;
}
/* Retirer les halos/voiles décoratifs qui ternissaient l'animal. */
.vero27-screen:before{
background:none!important;
opacity:0!important;
}
.vero27-topline,
.vero27-clock-wrap,
.vero27-language-pill,
.vero27-status{
position:relative;
z-index:3;
}
.vero27-clock-wrap{
padding:6px 10px 7px;
border-radius:12px;
background:rgba(3,20,23,.12);
width:max-content;
}
/* MOBILE : conserver l'animal entier plutôt que zoomer/couper. */
@media(max-width:520px){
.dash-hero{
background-size:auto 100%,cover;
background-position:right center,center;
}
.dash-shade{
background:linear-gradient(180deg,rgba(1,12,14,.01) 0%,rgba(1,12,14,.01) 64%,rgba(2,20,25,.32) 100%);
}
.vero27-screen{
background-size:100% 100%,auto 100%,cover;
background-position:center,right center,center;
}
}
/* =========================================================
VERO 2.19 — VÉGÉTATION PLEINE LARGEUR + OKAPI COMPLET
Corrections demandées :
- aucune bande bleue/unie à gauche du tableau de bord ;
- végétation sur toute la surface de l'image ;
- okapi complet et net sur l'accueil ;
- okapi complet et net dans l'interprète ;
- aucun changement fonctionnel.
========================================================= */
.dash-hero{
background-color:#173d31!important;
background-image:url('okapi-dashboard-wide.webp')!important;
background-repeat:no-repeat!important;
background-size:cover!important;
background-position:center center!important;
}
.dash-shade{
background:linear-gradient(
180deg,
rgba(0,0,0,.00) 0%,
rgba(0,0,0,.00) 72%,
rgba(1,18,20,.20) 100%
)!important;
}
.dash-clock-wrap{
background:rgba(2,18,18,.10)!important;
}
.dash-brand,
.dash-clock-wrap{
filter:drop-shadow(0 3px 7px rgba(0,0,0,.82));
}
/* Interprète : scène verticale préparée spécialement pour garder
l'animal entier et conserver la végétation autour de lui. */
.vero27-screen{
background-color:#173d31!important;
background-image:
linear-gradient(180deg,rgba(0,0,0,.00) 0%,rgba(0,0,0,.00) 76%,rgba(1,14,17,.18) 100%),
url('okapi-interpreter-tall.webp')!important;
background-repeat:no-repeat,no-repeat!important;
background-size:100% 100%,cover!important;
background-position:center,center center!important;
}
.vero27-screen:before{
background:none!important;
opacity:0!important;
}
.vero27-clock-wrap{
background:rgba(2,18,18,.08)!important;
}
/* Même logique sur téléphone : pas de zoom ni de bande de couleur. */
@media(max-width:520px){
.dash-hero{
background-size:cover!important;
background-position:center center!important;
}
.vero27-screen{
background-size:100% 100%,cover!important;
background-position:center,center center!important;
}
}
/* =========================================================
VERO 2.20 — INTERPRÈTE DÉGAGÉ
Correction ciblée validée :
- tableau de bord inchangé ;
- libérer le corps de l'okapi dans l'interprète ;
- descendre heure/date et barre des langues vers le pied de l'animal ;
- conserver la végétation visible derrière les informations.
========================================================= */
/* L'écran reste une scène végétale complète ; aucun zoom supplémentaire. */
.translator-view .vero27-screen{
position:relative;
background-size:100% 100%,cover!important;
background-position:center,center center!important;
}
/* Heure et date : ancrées en bas à gauche, au niveau du sol/pieds de l'okapi. */
.translator-view .vero27-clock-wrap{
position:absolute!important;
z-index:4!important;
left:24px!important;
bottom:112px!important;
margin:0!important;
padding:0!important;
width:auto!important;
text-align:left!important;
background:transparent!important;
border-radius:0!important;
pointer-events:none;
filter:drop-shadow(0 3px 8px rgba(0,0,0,.85));
}
.translator-view .vero27-clock{
font-size:44px!important;
line-height:.92!important;
}
.translator-view .vero27-clock small{
font-size:15px!important;
}
.translator-view .vero27-date{
margin-top:8px!important;
font-size:16px!important;
}
/* Barre des langues : en bas de la végétation, sous l'heure/date. */
.translator-view .vero27-language-pill{
position:absolute!important;
z-index:5!important;
left:50%!important;
bottom:26px!important;
transform:translateX(-50%)!important;
margin:0!important;
width:calc(100% - 42px)!important;
height:62px!important;
}
/* Les points restent discrets et passent juste au-dessus des commandes. */
.translator-view .vero27-dots{
bottom:8px!important;
z-index:4!important;
opacity:.72;
}
/* Téléphones : mêmes positions relatives, sans remonter les éléments sur le corps. */
@media(max-width:520px){
.translator-view .vero27-clock-wrap{
left:18px!important;
bottom:106px!important;
}
.translator-view .vero27-clock{
font-size:11.5vw!important;
}
.translator-view .vero27-clock small{
font-size:4vw!important;
}
.translator-view .vero27-date{
font-size:4vw!important;
margin-top:6px!important;
}
.translator-view .vero27-language-pill{
bottom:24px!important;
width:calc(100% - 28px)!important;
height:58px!important;
}
}
@media(max-width:380px){
.translator-view .vero27-clock-wrap{
left:14px!important;
bottom:101px!important;
}
.translator-view .vero27-language-pill{
bottom:22px!important;
}
}
/* VERO 2.21 — Test PC + téléphone */
.phone-test-box{margin-top:16px;padding:14px;border:1px solid #dfe7f0;border-radius:16px;background:linear-gradient(180deg,#f7fbff,#f2f7fb)}
.phone-test-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.phone-test-head b{display:block;font-size:11px;color:#17243b}.phone-test-head small{display:block;margin-top:3px;font-size:8px;color:#6f7c91}.phone-test-badge{font-size:8px;font-weight:900;padding:6px 8px;border-radius:999px;background:#e9eef5;color:#667388}.phone-test-badge.ok{background:#e4f8ee;color:#087b56}.phone-test-box p{margin:9px 0 10px!important}.phone-test-url-row{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.phone-test-url-row .input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px}.phone-test-note{margin-top:10px;padding:10px 11px;border-radius:11px;background:#fff;color:#526078;font-size:8px;line-height:1.55;border:1px solid #e4eaf1}.phone-test-note b{color:#25344d}.phone-test-note code{font-size:8px;background:#eef3f8;padding:2px 4px;border-radius:5px}
/* =========================================================
VERO 2.22 — MOBILE BLANC + BORDURES ARRONDIES
Correction visuelle uniquement :
- fond extérieur blanc sur téléphone ;
- appareil VERO détaché du bord de l'écran ;
- coins extérieurs clairement arrondis ;
- aucun changement fonctionnel.
========================================================= */
@media(max-width:520px){
html,
body,
.vero27-body{
background:#ffffff!important;
}
.vero27-body{
min-height:100dvh!important;
padding:10px 8px 18px!important;
align-items:flex-start!important;
justify-content:center!important;
}
.vero27-stage{
width:100%!important;
min-height:auto!important;
display:flex!important;
justify-content:center!important;
align-items:flex-start!important;
}
.vero27-device.app-shell{
width:100%!important;
max-width:430px!important;
min-height:auto!important;
margin:0 auto!important;
border-radius:30px!important;
border:1px solid rgba(27,54,71,.18)!important;
overflow:hidden!important;
box-shadow:0 14px 34px rgba(19,41,56,.16)!important;
}
.vero-dashboard,
.translator-view,
.sleep-screen{
border-radius:0!important;
}
/* Conserver le rayon visible jusque dans les angles supérieurs/inférieurs. */
.vero-dashboard .dash-hero,
.translator-view .vero27-screen{
overflow:hidden!important;
}
}
@media(max-width:380px){
.vero27-body{
padding:8px 6px 14px!important;
}
.vero27-device.app-shell{
border-radius:26px!important;
}
}
/* =========================================================
VERO 2.23 — MOBILE ADAPTATIF PLEIN ÉCRAN
- Remplit presque tout l'écran du téléphone ;
- Petite marge blanche périphérique ;
- Coins arrondis conservés ;
- Dimensions responsives, sans dépassement horizontal ;
- Aucun changement fonctionnel.
========================================================= */
@media(max-width:520px){
html,
body,
.vero27-body{
width:100%!important;
min-width:0!important;
max-width:100%!important;
min-height:100dvh!important;
margin:0!important;
background:#fff!important;
overflow-x:hidden!important;
}
.vero27-body{
padding:4px!important;
display:block!important;
}
.vero27-stage{
width:100%!important;
max-width:none!important;
min-height:calc(100dvh - 8px)!important;
margin:0!important;
padding:0!important;
display:block!important;
}
.vero27-device.app-shell{
width:100%!important;
max-width:none!important;
min-width:0!important;
min-height:calc(100dvh - 8px)!important;
margin:0!important;
border-radius:24px!important;
border:1px solid rgba(27,54,71,.16)!important;
overflow:hidden!important;
box-shadow:0 7px 22px rgba(19,41,56,.13)!important;
}
.vero-dashboard,
.translator-view,
.sleep-screen{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
.vero-dashboard{
min-height:calc(100dvh - 10px)!important;
}
.dash-hero{
height:clamp(260px,40dvh,330px)!important;
min-height:0!important;
max-height:none!important;
}
.dash-grid{
min-height:calc(60dvh - 10px)!important;
height:auto!important;
padding:10px!important;
gap:8px!important;
align-content:stretch!important;
}
.dash-tile{
height:clamp(66px,9.3dvh,82px)!important;
min-height:66px!important;
border-radius:16px!important;
grid-template-columns:50px 1fr!important;
padding:8px 9px!important;
}
.tile-icon{
width:42px!important;
height:42px!important;
border-radius:13px!important;
}
.tile-icon svg{
width:28px!important;
height:28px!important;
}
.dash-tile b{font-size:clamp(11px,3.35vw,14px)!important}
.dash-tile small{font-size:clamp(7px,2.1vw,8px)!important}
.translator-view{
min-height:calc(100dvh - 10px)!important;
}
.translator-view .vero27-screen{
width:100%!important;
}
.vero27-controls{
width:100%!important;
max-width:100%!important;
}
.sleep-screen{
min-height:calc(100dvh - 10px)!important;
height:calc(100dvh - 10px)!important;
}
}
@media(max-width:380px){
.vero27-body{padding:3px!important}
.vero27-stage{min-height:calc(100dvh - 6px)!important}
.vero27-device.app-shell{
min-height:calc(100dvh - 6px)!important;
border-radius:21px!important;
}
.dash-grid{padding:8px!important;gap:7px!important}
.dash-tile{height:clamp(63px,9.1dvh,76px)!important;min-height:63px!important}
}
/* =========================================================
VERO 2.24 — INTERPRÈTE + FORMULAIRES MOBILE RESPONSIVE
Correction visuelle uniquement :
- écran Interpréter limité à la largeur réelle du téléphone ;
- sélecteurs, commandes et boutons ne peuvent plus déborder ;
- fenêtres/formulaires Paramètres, Utilisateurs, Sauvegarde, etc.
s'adaptent à la largeur et à la hauteur disponibles ;
- prise en compte des zones sûres des téléphones modernes.
========================================================= */
@media(max-width:520px){
/* Empêcher tout débordement horizontal dans l'interprète. */
.translator-view,
.translator-view *,
#modalRoot,
#modalRoot *{
box-sizing:border-box!important;
}
.translator-view{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow-x:hidden!important;
}
.translator-view .vero27-screen,
.translator-view .vero27-controls{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow-x:hidden!important;
}
/* Barre supérieure de l'interprète : compacte et flexible. */
.translator-view .vero27-topline{
width:100%!important;
min-width:0!important;
gap:8px!important;
}
.translator-view .vero27-brand{
flex:0 0 auto!important;
}
.translator-view .vero27-top-actions{
min-width:0!important;
max-width:70%!important;
flex:1 1 auto!important;
justify-content:flex-end!important;
}
.translator-view .vero27-engine{
min-width:0!important;
max-width:145px!important;
overflow:hidden!important;
}
.translator-view .vero27-engine span{
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* Sélection des langues : aucune largeur intrinsèque ne doit pousser la page. */
.translator-view .vero27-language-pill{
width:calc(100% - 20px)!important;
max-width:calc(100% - 20px)!important;
min-width:0!important;
padding:0 8px!important;
grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)!important;
gap:2px!important;
border-radius:24px!important;
}
.translator-view .vero27-lang,
.translator-view .select-wrap{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
.translator-view .vero27-bars{
flex:0 0 auto!important;
font-size:clamp(12px,3.6vw,17px)!important;
}
.translator-view .vero27-language-pill .language-select{
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:44px!important;
padding:0 3px!important;
font-size:clamp(10px,3.15vw,14px)!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.translator-view .vero27-swap{
width:40px!important;
height:40px!important;
min-width:40px!important;
font-size:27px!important;
}
/* Commandes vocales : colonnes réellement flexibles sur tous les téléphones. */
.translator-view .vero27-controls{
padding-left:clamp(8px,3.2vw,16px)!important;
padding-right:clamp(8px,3.2vw,16px)!important;
grid-template-columns:minmax(0,1fr) clamp(70px,23vw,88px) minmax(0,1fr)!important;
gap:clamp(6px,2.2vw,11px)!important;
}
.translator-view .vero27-talk{
width:100%!important;
max-width:100%!important;
min-width:0!important;
border-radius:clamp(18px,5vw,24px)!important;
}
.translator-view .vero27-talk b,
.translator-view .vero27-talk small{
max-width:100%!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.translator-view .vero27-center{
width:clamp(70px,23vw,88px)!important;
height:clamp(70px,23vw,88px)!important;
max-width:100%!important;
}
.translator-view .vero27-speaker{
max-width:82%!important;
}
/* Les cartes internes éventuelles restent dans l'écran. */
.translator-view .status-card,
.translator-view .instant-panel,
.translator-view .instant-banner,
.translator-view .conversation-card,
.translator-view .vero27-hidden-panel{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
.status-copy,
.instant-copy,
.instant-banner-copy,
.engine-row>div,
.switch-row>div{
min-width:0!important;
}
/* Tous les formulaires/fenêtres ouverts depuis Interpréter ou le tableau de bord. */
.modal-backdrop{
width:100vw!important;
max-width:100vw!important;
min-width:0!important;
padding:
max(8px,env(safe-area-inset-top))
max(8px,env(safe-area-inset-right))
max(8px,env(safe-area-inset-bottom))
max(8px,env(safe-area-inset-left))!important;
display:flex!important;
align-items:flex-start!important;
justify-content:center!important;
overflow-x:hidden!important;
overflow-y:auto!important;
}
.modal,
.dash-modal,
.validation-modal{
width:100%!important;
max-width:100%!important;
min-width:0!important;
max-height:calc(100dvh - 16px)!important;
margin:0!important;
padding:clamp(14px,4vw,19px)!important;
border-radius:20px!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
}
.modal h2{
font-size:clamp(18px,5vw,21px)!important;
overflow-wrap:anywhere!important;
}
.modal p,
.modal small,
.modal label,
.notice,
.phone-test-note,
.info-note{
max-width:100%!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
}
.field,
.engine-row,
.switch-row,
.phone-test-box,
.backup-actions,
.modal-actions{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
.input,
.select,
.field input,
.field select,
.field textarea{
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
.phone-test-url-row{
width:100%!important;
max-width:100%!important;
min-width:0!important;
grid-template-columns:minmax(0,1fr) auto!important;
}
.phone-test-url-row>*{
min-width:0!important;
max-width:100%!important;
}
.engine-row,
.switch-row{
flex-wrap:wrap!important;
}
.modal-actions,
.backup-actions{
display:flex!important;
flex-wrap:wrap!important;
gap:8px!important;
}
.modal-actions .btn,
.backup-actions .btn{
max-width:100%!important;
min-width:0!important;
}
/* Tableaux de diagnostic admin lorsqu'ils sont ouverts sur petit écran. */
.validation-table-wrap{
width:100%!important;
max-width:100%!important;
overflow-x:auto!important;
-webkit-overflow-scrolling:touch!important;
}
}
@media(max-width:380px){
.translator-view .vero27-language-pill{
width:calc(100% - 14px)!important;
max-width:calc(100% - 14px)!important;
padding-left:6px!important;
padding-right:6px!important;
grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr)!important;
}
.translator-view .vero27-bars{display:none!important}
.translator-view .vero27-language-pill .language-select{
font-size:clamp(9px,3.2vw,12px)!important;
}
.translator-view .vero27-controls{
grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr)!important;
padding-left:7px!important;
padding-right:7px!important;
gap:6px!important;
}
.translator-view .vero27-center{
width:68px!important;
height:68px!important;
}
.translator-view .vero27-center b{font-size:8px!important}
.translator-view .vero27-center small{font-size:6px!important}
.phone-test-url-row{
grid-template-columns:1fr!important;
}
.phone-test-url-row .btn{
width:100%!important;
}
}
/* =========================================================
VERO 2.27 — BASE 2.24 / MOBILE PLEIN ÉCRAN
MODIFICATION CIBLÉE UNIQUEMENT :
- suppression de la bordure/marge extérieure sur téléphone ;
- l'interface occupe exactement la surface utile du téléphone ;
- aucun scroll sur les écrans principaux ;
- aucun style interne des menus, boutons, interprète ou formulaires modifié.
========================================================= */
@media(max-width:520px){
html,
body{
width:100%!important;
height:100%!important;
min-height:100%!important;
margin:0!important;
padding:0!important;
background:#fff!important;
overflow:hidden!important;
overscroll-behavior:none!important;
}
.vero27-body{
width:100vw!important;
height:100dvh!important;
min-height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
padding:0!important;
background:#fff!important;
overflow:hidden!important;
}
.vero27-stage{
width:100vw!important;
height:100dvh!important;
min-height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
.vero27-device.app-shell{
width:100vw!important;
max-width:none!important;
height:100dvh!important;
min-height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
overflow:hidden!important;
}
/* Les vues gardent exactement leur mise en page 2.24 ; seule leur enveloppe
est limitée à la hauteur utile du téléphone. */
.vero-dashboard,
.translator-view,
.sleep-screen{
width:100%!important;
max-width:100%!important;
height:100dvh!important;
min-height:100dvh!important;
max-height:100dvh!important;
overflow:hidden!important;
}
}
/* VERO 2.28 — correction demandée uniquement : retirer la barre tricolore de l'écran Interpréter. */
.vero27-screen::after{
display:none!important;
content:none!important;
}
/* =========================================================
VERO 2.30 — MENU MOBILE PLUS LISIBLE + VOLUME CONSERVÉ
Modification ciblée :
- tuiles du tableau de bord plus grandes sur téléphone ;
- intervalles réduits ;
- 4 lignes occupent l'espace disponible sans scroll ;
- aucun changement du style PC ni de la logique des menus.
========================================================= */
@media(max-width:520px){
.dash-grid{
height:57dvh!important;
min-height:57dvh!important;
max-height:57dvh!important;
grid-template-rows:repeat(4,minmax(0,1fr))!important;
grid-auto-rows:minmax(0,1fr)!important;
padding:7px!important;
gap:6px!important;
align-content:stretch!important;
}
.dash-tile{
height:auto!important;
min-height:0!important;
max-height:none!important;
grid-template-columns:clamp(52px,14vw,60px) minmax(0,1fr)!important;
padding:8px 10px!important;
border-radius:18px!important;
}
.tile-icon{
width:clamp(46px,12.5vw,52px)!important;
height:clamp(46px,12.5vw,52px)!important;
border-radius:14px!important;
}
.tile-icon svg{
width:clamp(29px,8vw,34px)!important;
height:clamp(29px,8vw,34px)!important;
}
.dash-tile b{
font-size:clamp(13px,3.9vw,16px)!important;
line-height:1.05!important;
}
.dash-tile small{
font-size:clamp(8px,2.35vw,10px)!important;
line-height:1.1!important;
margin-top:2px!important;
}
}
@media(max-width:370px){
.dash-grid{padding:6px!important;gap:5px!important}
.dash-tile{grid-template-columns:48px minmax(0,1fr)!important;padding:7px 8px!important}
.tile-icon{width:43px!important;height:43px!important}
.tile-icon svg{width:27px!important;height:27px!important}
.dash-tile b{font-size:12.5px!important}
.dash-tile small{font-size:7.5px!important}
}
/* ===== VERO 2.40 : appairage, évaluation, réglages ===== */
.rate-box{display:inline-flex;gap:6px;margin-left:6px}
.rate-box button{border:1px solid rgba(15,23,42,.14);background:#fff;border-radius:999px;width:40px;height:40px;font-size:18px;cursor:pointer;line-height:1}
.rate-box button:disabled{opacity:.45;cursor:default}
.rate-box button.chosen{opacity:1;border-color:#16a34a;background:#ecfdf3}
.pin-input{font-size:28px!important;letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums}
.pair-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:12px 14px;border-radius:14px;background:#f1f6ff;border:1px solid #cfe0ff}
.pair-box b{display:block;font-size:30px;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:#0b2a55}
.pair-box small{display:block;color:#51617a;font-size:12px}
.issue-choices{display:grid;gap:8px;margin:12px 0}
.issue-choices .btn{text-align:left;width:100%}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
a.btn.full{width:100%;margin:10px 0}
.dash-history-src{opacity:.7;font-style:italic;margin-bottom:2px!important}
/* ===== VERO 2.51 : guide de conversation ===== */
.guide-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.guide-cats{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none}
.guide-chip{flex:0 0 auto;border:1px solid #dce3ef;background:#fff;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:700;color:#35445e;cursor:pointer;white-space:nowrap}
.guide-chip.on{background:#0f3cc9;border-color:#0f3cc9;color:#fff}
.guide-list{display:grid;gap:8px;max-height:52vh;overflow:auto;padding-right:2px}
.guide-count{color:#64748b;margin:2px 0 4px}
.guide-item{border:1px solid #e3e8f0;border-radius:14px;padding:10px 12px;background:#fff}
.guide-item small{display:block;color:#64748b;font-size:12px;margin-bottom:3px}
.guide-item b{display:block;font-size:17px;color:#0b2a55;line-height:1.3}
.guide-item em{display:block;font-size:12px;color:#9a6700;font-style:normal}
.guide-item .guide-ai{color:#5b3a00}
.guide-item.todo{background:#fffdf5}
.guide-actions{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.guide-actions button{border:1px solid #dce3ef;background:#f6f8fc;border-radius:10px;padding:6px 10px;font-size:12px;font-weight:700;color:#24324a;cursor:pointer}
.guide-show{position:fixed;inset:0;z-index:300;background:#071f33;color:#fff;display:grid;place-items:center;padding:24px;text-align:center;cursor:pointer}
.guide-show small{display:block;opacity:.7;font-size:16px;margin-bottom:16px}
.guide-show b{display:block;font-size:clamp(30px,8vw,56px);line-height:1.2}
.guide-show span{display:block;margin-top:22px;opacity:.6;font-size:13px}
/* ===== VERO 2.51 : écrire au lieu de parler ===== */
.type-row{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;gap:10px;justify-content:space-between;padding:0 22px}
/* Les points décoratifs du bas laissent la place aux boutons « Écrire ». */
.translator-view .vero27-speaker{display:none!important}
.type-btn{flex:1;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#cfe0f5;border-radius:12px;padding:9px 10px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.type-btn:hover{background:rgba(255,255,255,.12)}
@media(max-width:380px){.type-row{padding:0 12px}.type-btn{font-size:11px}}
@media(max-height:700px){.type-row{bottom:6px}.type-btn{padding:5px 8px;font-size:11px}.translator-view .vero27-controls{padding-bottom:30px!important}}
.mic-steps{margin:12px 0 6px 18px;padding:0;font-size:13px;line-height:1.55;color:#24324a}
.mic-steps li{margin-bottom:6px}
.mic-steps code{font-size:11px;background:#f1f5f9;padding:2px 5px;border-radius:6px;word-break:break-all}
/* =========================================================
VERO 2.55 — Messages de l'interprète sur fond transparent
- pas de carte blanche : l'okapi reste visible derrière ;
- texte blanc, lisible grâce à une ombre portée ;
- texte justifié sur toute la largeur, boutons en dessous ;
- l'horloge s'efface pendant qu'un message est affiché.
========================================================= */
.translator-view #statusCard{
background:transparent!important;
border:0!important;
box-shadow:none!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
color:#fff!important;
display:flex!important;
flex-wrap:wrap!important;
align-items:flex-start!important;
gap:8px 12px!important;
padding:6px 4px!important;
}
.translator-view #statusCard .status-icon-wrap{
flex:0 0 auto!important;
width:30px!important;height:30px!important;
background:rgba(0,0,0,.28)!important;
border:1px solid rgba(255,255,255,.22)!important;
box-shadow:none!important;
margin-top:1px;
}
.translator-view #statusCard .status-copy{
flex:1 1 0!important;
min-width:0!important;
display:block!important;
text-align:justify!important;
text-justify:inter-word;
hyphens:auto;-webkit-hyphens:auto;
overflow-wrap:anywhere;
}
.translator-view #statusCard .status-copy b,
.translator-view #statusCard .status-copy span{
display:block!important;
color:#fff!important;
text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.75),0 0 3px rgba(0,0,0,.9)!important;
}
.translator-view #statusCard .status-copy b{
font-size:17px!important;line-height:1.25!important;margin:0 0 4px!important;text-align:left!important;
}
.translator-view #statusCard .status-copy span{
font-size:15px!important;line-height:1.45!important;font-weight:500!important;
}
.translator-view #statusCard.error .status-copy b{color:#ffd1d1!important}
/* Boutons sous le texte, sur toute la largeur */
.translator-view #statusCard .status-actions{
flex:1 0 100%!important;
display:flex!important;
flex-wrap:wrap!important;
align-items:center!important;
justify-content:flex-start!important;
gap:8px!important;
margin:2px 0 0 42px!important;
}
.translator-view #statusCard .status-actions:not(:has(> :not(.hidden))){display:none!important}
.translator-view #statusCard .retry-btn{
background:rgba(0,0,0,.38)!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.45)!important;
box-shadow:none!important;
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.translator-view #statusCard .listen-btn{box-shadow:0 4px 14px rgba(0,0,0,.35)!important}
.translator-view #statusCard .rate-box{margin-left:0!important}
.translator-view #statusCard .rate-box button{
background:rgba(0,0,0,.38)!important;
border:1px solid rgba(255,255,255,.45)!important;
}
.translator-view #statusCard .rate-box button.chosen{background:rgba(22,163,74,.55)!important;border-color:#86efac!important}
/* L'horloge laisse la place au message, puis revient quand VERO est prêt. */
.translator-view:has(#statusCard:not(.ready)) .vero27-clock-wrap{opacity:0!important;transition:opacity .2s}
@media(max-width:380px){
.translator-view #statusCard .status-copy span{font-size:14px!important}
.translator-view #statusCard .status-actions{margin-left:0!important}
}
/* VERO 2.57 — campagne de validation sur le terrain */
.guide-by{display:block;color:#15803d;margin-top:2px}
.guide-item b.guide-ai{color:#1d4ed8;font-style:italic}
.camp-card{border:1px solid #e3e8f0;border-radius:16px;padding:14px;background:#fff;margin:8px 0}
.camp-card small{display:block;color:#64748b;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.camp-fr{display:block;font-size:22px;line-height:1.25;color:#0b2a55;margin:6px 0 4px}
.camp-alt{display:block;color:#475569;font-size:14px;margin-bottom:12px}
.camp-label{display:block;font-size:12px;font-weight:700;color:#334155;margin-bottom:4px}
.camp-text{font-size:19px!important;line-height:1.35;min-height:72px}
.camp-row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.camp-actions{display:grid!important;grid-template-columns:auto 1fr 1.4fr;gap:8px}
.camp-text{font-family:inherit!important}
/* ===== VERO 2.59 — Thème bleu royal premium du formulaire « Interpréter » (fidèle à la maquette) =====
Uniquement l'apparence : même organisation, mêmes boutons, mêmes fonctions.
Palette : #142D63 bleu royal profond · #07162F nuit · #0047AB cobalt · cyan #19d3ff · or #ffc61a. */
.translator-view{background:#0a2a78!important}
/* --- Image de l'okapi : intacte, avec le voile bleu de la maquette en haut et sur les bords --- */
.translator-view .vero27-screen{
background-image:
linear-gradient(180deg,rgba(10,38,120,.88) 0%,rgba(10,38,120,.45) 8%,rgba(10,38,120,0) 20%),
linear-gradient(90deg,rgba(10,38,120,.35) 0%,rgba(10,38,120,0) 14%,rgba(10,38,120,0) 86%,rgba(10,38,120,.35) 100%),
radial-gradient(90% 26% at 50% 100%,rgba(25,110,255,.55) 0%,rgba(18,70,190,.25) 45%,rgba(10,38,120,0) 75%),
linear-gradient(180deg,rgba(10,42,120,0) 0%,rgba(10,42,120,0) 80%,rgba(10,42,120,.65) 95%,#0b3088 100%),
url('okapi-interpreter-tall.webp')!important;
background-size:100% 100%,100% 100%,100% 100%,100% 100%,cover!important;
background-position:center,center,center,center,center center!important;
background-repeat:no-repeat!important;
}
/* --- En-tête : pastilles bleu nuit à bordure bleue lumineuse --- */
.translator-view .vero27-brand{
background:linear-gradient(180deg,rgba(14,38,92,.92),rgba(7,22,55,.92))!important;color:#ffc61a!important;
border:1.5px solid rgba(70,145,255,.70)!important;box-shadow:0 0 12px rgba(40,120,255,.35),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.translator-view .vero27-engine,.translator-view .vero27-settings{
background:linear-gradient(180deg,rgba(14,38,92,.92),rgba(7,22,55,.92))!important;
border:1.5px solid rgba(70,145,255,.62)!important;box-shadow:0 0 12px rgba(40,120,255,.30)!important;color:#fff!important;
}
/* --- Barre des langues : capsule bleu nuit, bordure néon bleue, deux sélecteurs blancs --- */
.translator-view .vero27-language-pill{
width:calc(100% - 28px)!important;height:68px!important;padding:0 14px!important;border-radius:34px!important;
grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr)!important;column-gap:0!important;
background:linear-gradient(180deg,#0c2a6c 0%,#071d4f 100%)!important;
border:2px solid #2f8cff!important;
box-shadow:0 0 0 1px rgba(150,205,255,.25),0 0 16px rgba(40,140,255,.85),0 0 42px rgba(30,110,255,.45),inset 0 0 18px rgba(47,140,255,.30),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.translator-view .vero27-bars{display:none!important}
.translator-view .vero27-lang,.translator-view .vero27-lang-right{display:flex!important;justify-content:stretch!important;min-width:0}
.translator-view .vero-lang-chip{
flex:1;min-width:0;position:relative;display:flex!important;align-items:center;gap:10px;
height:40px;padding:0 0 0 12px;border-radius:12px;background:#fff;
box-shadow:0 3px 10px rgba(0,0,0,.30);
}
.translator-view .vero-lang-chip::after{
content:""!important;display:block!important;position:absolute;right:13px;top:50%;width:8px;height:8px;margin-top:-6px;
border-right:2.2px solid #13204a;border-bottom:2.2px solid #13204a;transform:rotate(45deg);pointer-events:none;
}
.translator-view .vero-flag{flex:none;width:25px;height:19px;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.10)}
.translator-view .vero-flag:empty{display:none}
.translator-view .vero-flag svg{display:block;width:100%;height:100%}
.translator-view .vero27-language-pill .language-select{
flex:1;min-width:0;height:40px!important;color:#13204a!important;font-size:14px!important;font-weight:600!important;letter-spacing:0!important;
padding:0 28px 0 0!important;background:transparent!important;cursor:pointer;text-overflow:ellipsis;
}
.translator-view .vero27-swap{color:#fff!important;display:flex!important;align-items:center;justify-content:center;justify-self:center;background:transparent!important}
.translator-view .vero27-swap svg{width:24px;height:24px}
/* Petit repère bleu sous la barre des langues (comme sur la maquette). */
.translator-view .vero27-dots{display:flex!important;bottom:9px!important;opacity:1!important}
.translator-view .vero27-dots span{display:none!important}
.translator-view .vero27-dots span.active{display:block!important;width:36px!important;height:7px!important;border-radius:999px!important;background:#5aa8ff!important;box-shadow:0 0 8px rgba(90,168,255,.75)!important}
/* --- Partie basse : bleu royal, vagues lumineuses --- */
.translator-view .vero27-controls{
background:
url("data:image/svg+xml;utf8,") center bottom/100% 100% no-repeat,
radial-gradient(70% 40% at 50% 0%,rgba(40,120,255,.35),transparent 70%),
radial-gradient(60% 45% at 8% 55%,rgba(25,211,255,.10),transparent 70%),
radial-gradient(60% 45% at 92% 55%,rgba(255,198,26,.06),transparent 70%),
linear-gradient(180deg,#0b3088 0%,#0a3a9e 22%,#0047AB 52%,#0a3592 78%,#081f5c 100%)!important;
border-top:0!important;box-shadow:none!important;position:relative;
padding:24px 14px 0!important;
grid-template-columns:minmax(0,1fr) 98px minmax(0,1fr)!important;gap:9px!important;align-items:start!important;
}
.translator-view .vero27-controls::after{
content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,rgba(90,170,255,.10),rgba(120,190,255,.55) 50%,rgba(90,170,255,.10));
}
/* --- PARLER : verre bleu nuit, bord cyan (gauche) ou or (droite) --- */
.translator-view .vero27-talk{
position:relative;z-index:2;height:86px!important;min-height:86px!important;border-radius:22px!important;
border:1.5px solid rgba(170,200,255,.30)!important;
background:linear-gradient(180deg,rgba(13,40,98,.92) 0%,rgba(8,28,74,.95) 100%)!important;
display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
}
.translator-view .vero27-talk-a{
border-left:4px solid #19d3ff!important;border-bottom-color:rgba(25,211,255,.65)!important;border-top-color:rgba(25,211,255,.45)!important;
box-shadow:-3px 0 14px rgba(25,211,255,.65),0 12px 26px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.translator-view .vero27-talk-b{
border-right:4px solid #ffc61a!important;border-bottom-color:rgba(255,198,26,.65)!important;border-top-color:rgba(255,198,26,.45)!important;
box-shadow:3px 0 14px rgba(255,198,26,.55),0 12px 26px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
/* Trois barres fines et espacées, lumineuses. */
.translator-view .vero27-voice-icon{height:31px;display:flex!important;align-items:flex-end;justify-content:center;margin-bottom:-3px}
.translator-view .vero27-talk .mic-bars{
font-size:0!important;letter-spacing:0!important;width:70px;height:31px;display:block;
background:linear-gradient(currentColor,currentColor) left/9px 100% no-repeat,linear-gradient(currentColor,currentColor) center/9px 100% no-repeat,linear-gradient(currentColor,currentColor) right/9px 100% no-repeat;
}
.translator-view .vero27-talk-a .mic-bars{color:#19d3ff;filter:drop-shadow(0 0 6px rgba(25,211,255,.95))}
.translator-view .vero27-talk-b .mic-bars{color:#ffc61a;filter:drop-shadow(0 0 6px rgba(255,198,26,.85))}
.translator-view .vero27-talk b{color:#fff!important;font-size:12px!important;font-weight:800!important;letter-spacing:.04em!important;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.translator-view .vero27-talk small{color:#eaf2ff!important;font-size:10px!important;font-weight:600!important}
.translator-view .vero27-talk.recording{border-color:#ff5d6c!important;box-shadow:0 0 0 3px rgba(255,93,108,.35),0 0 26px rgba(255,93,108,.45)!important}
/* --- DISCUSSION : carré arrondi bleu vif dans un cadre bleu nuit cerclé d'or --- */
.translator-view .vero27-center{
position:relative;z-index:2;justify-self:center;align-self:start;
width:84px!important;height:86px!important;margin-top:0!important;border-radius:22px!important;
border:0!important;
background:linear-gradient(180deg,#2266d8 0%,#0d47b5 55%,#0a3a96 100%)!important;
box-shadow:0 0 0 6px #0a1d4c,0 0 0 8px #d9a93a,0 0 18px 8px rgba(217,169,58,.22),0 16px 28px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.22)!important;
gap:2px!important;
}
.translator-view .vero27-center-symbol{color:#ffc61a;font-size:16px!important;text-shadow:0 0 8px rgba(255,198,26,.6)}
.translator-view .vero27-center b{color:#fff;font-size:11px!important;font-weight:800;letter-spacing:.01em}
.translator-view .vero27-center small{color:#e8f0ff;font-size:9px!important;letter-spacing:.06em}
/* --- Écrire en… : boutons de verre, plus haut comme sur la maquette --- */
.translator-view .type-row{bottom:max(16px,6.4dvh)!important;padding:0 20px!important;gap:13px!important;z-index:3}
.translator-view .type-btn{
height:44px;background:rgba(10,32,84,.55)!important;border:1.5px solid rgba(160,195,255,.45)!important;color:#fff!important;
border-radius:16px!important;padding:0 10px!important;font-size:14px!important;font-weight:600!important;
box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.translator-view .type-btn:hover{background:rgba(24,60,130,.65)!important;border-color:rgba(190,215,255,.65)!important}
/* --- Ordinateur (cadre de 430 px) : mêmes proportions --- */
@media(min-width:521px){
.translator-view .type-row{bottom:16px!important}
}
/* --- Petits téléphones --- */
@media(max-width:380px){
.translator-view .vero27-language-pill{width:calc(100% - 20px)!important;padding:0 9px!important;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)!important}
.translator-view .vero-lang-chip{gap:6px;padding-left:8px}
.translator-view .vero-lang-chip::after{right:9px}
.translator-view .vero-flag{width:21px;height:16px}
.translator-view .vero27-language-pill .language-select{font-size:13px!important;padding-right:22px!important}
.translator-view .vero27-swap svg{width:20px;height:20px}
.translator-view .vero27-controls{padding:22px 10px 0!important;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr)!important;gap:7px!important}
.translator-view .vero27-center{width:78px!important;height:82px!important}
.translator-view .vero27-talk{height:82px!important;min-height:82px!important}
.translator-view .type-row{padding:0 12px!important;gap:10px!important}
.translator-view .type-btn{font-size:13px!important}
}
/* ===== VERO 2.58.13 — Accueil : même fond bleu royal que le formulaire « Interpréter » =====
Uniquement l'arrière-plan de la zone des 8 boutons (et la jonction avec l'image) ; boutons et fonctions inchangés. */
.vero-dashboard{background:url("data:image/svg+xml;utf8,") center bottom/100% 120px no-repeat,radial-gradient(80% 25% at 50% 100%,rgba(0,90,220,.45),transparent 70%),linear-gradient(180deg,#0b3088 0%,#0b3088 36%,#0a3a9e 48%,#0047AB 66%,#0a3592 86%,#081f5c 100%)!important}
.vero-dashboard .dash-grid{
position:relative;
background:
url("data:image/svg+xml;utf8,") center/100% 100% no-repeat,
radial-gradient(70% 30% at 50% 0%,rgba(40,120,255,.40),transparent 70%),
radial-gradient(55% 35% at 0% 45%,rgba(25,211,255,.12),transparent 70%),
radial-gradient(55% 35% at 100% 70%,rgba(255,198,26,.07),transparent 70%) !important;
}
/* Ligne claire à la jonction, comme sur le formulaire « Interpréter ». */
.vero-dashboard .dash-grid::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,rgba(90,170,255,.10),rgba(120,190,255,.6) 50%,rgba(90,170,255,.10));
}
/* Bas de l'image de l'okapi : fondu vers le bleu royal (image inchangée). */
.vero-dashboard .dash-hero{border-bottom:0!important}
.vero-dashboard .dash-hero::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;z-index:1;
background:linear-gradient(180deg,rgba(11,48,136,0) 0%,rgba(11,48,136,.35) 55%,rgba(11,48,136,.85) 100%);
}
/* Les tuiles gardent leurs couleurs ; un léger reflet lumineux les détache du fond bleu. */
.vero-dashboard .dash-tile{box-shadow:0 10px 22px rgba(3,12,40,.45),0 0 0 1px rgba(150,200,255,.18),inset 0 1px 0 rgba(255,255,255,.20)!important}
/* 2.59 — Répliques des dialogues du guide : qui parle. */
.guide-who{display:inline-block;margin:0 0 4px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.guide-who.v{background:rgba(25,211,255,.16);color:#0b7fa6}.guide-who.c{background:rgba(255,198,26,.20);color:#8a6200}
/* VERO 2.58.17 — Avis de satisfaction */
.sat-modal{text-align:center}
.sat-modal .sat-intl{margin:-4px 0 12px;font-size:13px;opacity:.75}
.sat-stars{display:flex;justify-content:center;gap:6px;margin:6px 0 4px}
.sat-stars button{border:0;background:transparent;font-size:44px;line-height:1;color:rgba(148,163,184,.55);cursor:pointer;padding:4px 2px;transition:transform .12s,color .12s;-webkit-tap-highlight-color:transparent}
.sat-stars button.on{color:#f5b301;text-shadow:0 0 14px rgba(245,179,1,.45)}
.sat-stars button:active{transform:scale(.9)}
.sat-stars button:focus-visible{outline:2px solid #0047AB;outline-offset:2px;border-radius:8px}
.sat-label{min-height:20px;font-weight:700;font-size:14px;margin-bottom:12px}
.sat-modal .field{text-align:left}
@media (max-width:380px){.sat-stars button{font-size:38px}}
.sat-modal .modal-actions{justify-content:center;flex-wrap:wrap}
.sat-modal textarea{font:inherit;font-size:14px;resize:vertical}
/* VERO 2.58.21 — Contrôle du vocabulaire (campagne) */
.vocab-box{margin:10px 14px 0;padding:12px 14px;border-radius:16px;background:#fff8e6;border:1px solid #f3d38a;color:#5b3b00;box-shadow:0 8px 22px rgba(0,0,0,.18);font-size:13px;line-height:1.45}
.vocab-head b{color:#7a2e00}
.vocab-sub{margin-top:4px;font-size:12px;opacity:.85}
.vocab-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vocab-actions button{border:0;border-radius:999px;padding:8px 12px;font-weight:800;font-size:12px;background:#0047AB;color:#fff;cursor:pointer}
.vocab-actions button[data-v="say"]{background:#fff;color:#7a4b08;border:1px solid #e8c37a}
.vocab-actions button[data-v="add"]{background:#0f7b4b}
.vocab-actions button:disabled{opacity:.55}
.vocab-msg{margin-top:6px;font-size:12px;font-weight:700}
/* VERO 2.58.23 — phrase dite, traduction et vérification sur des lignes distinctes */
#statusText{white-space:pre-line}
/* VERO 2.58.24 — langue de la séance de campagne bien visible */
.camp-lang{margin:6px 0 10px;padding:8px 12px;border-radius:12px;background:#0b3a8c;color:#fff;font-size:13px;text-align:center;letter-spacing:.02em}.camp-lang b{color:#ffd166;font-size:16px;letter-spacing:.08em}
/* =========================================================
VERO 2.58.26 — Zone des messages de l'interprète
- limitée au haut de l'écran : sous VERO, au-dessus de l'horloge ;
- le texte défile à l'intérieur (glisser vers le haut) ;
- les boutons (ÉCOUTER, Corriger, 👍/👎) restent toujours visibles sous le texte.
========================================================= */
.translator-view #statusCard{
position:absolute!important;
left:16px!important;right:16px!important;width:auto!important;box-sizing:border-box!important;
top:var(--vero-msg-top,72px)!important;bottom:auto!important;
transform:none!important;margin:0!important;
max-height:var(--vero-msg-h,36dvh)!important;
display:grid!important;
grid-template-columns:30px minmax(0,1fr)!important;
grid-template-rows:minmax(0,1fr) auto auto!important;
align-items:start!important;
gap:6px 12px!important;
pointer-events:auto!important;
z-index:6!important;
}
.translator-view #statusCard .status-icon-wrap{grid-column:1;grid-row:1}
.translator-view #statusCard .status-copy{
grid-column:2;grid-row:1;
max-height:100%;min-height:0;
overflow-y:auto!important;overflow-x:hidden;
overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
padding-right:6px;
scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.55) transparent;
}
.translator-view #statusCard .status-copy::-webkit-scrollbar{width:4px}
.translator-view #statusCard .status-copy::-webkit-scrollbar-thumb{background:rgba(255,255,255,.55);border-radius:4px}
/* Indice « suite en dessous » : le bas du texte s'estompe tant qu'il reste à lire. */
.translator-view #statusCard.msg-more .status-copy{
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
}
.translator-view #statusCard .status-actions{
grid-column:1 / -1!important;grid-row:3;
margin:2px 0 0 0!important;
}
/* Alerte de vocabulaire : dans la zone, entre le texte et les boutons, jamais cachée. */
.translator-view #statusCard .vocab-box{grid-column:1 / -1;grid-row:2;margin:2px 0 0;padding:9px 11px;font-size:12px;text-shadow:none}
.translator-view #statusCard .vocab-actions button{padding:7px 10px;font-size:11.5px}
/* 2.58.27 — Choix de la langue quand la phrase ne correspond pas au bouton utilisé */
.lang-box .vocab-actions button[data-l="keep"]{background:#fff;color:#7a4b08;border:1px solid #e8c37a}
.lang-box .vocab-actions button[data-l="retry"]{background:transparent;color:#5b3b00;border:1px solid #e8c37a}
/* 2.58.30 — Avertissement : application plus ancienne que le PC */
.update-banner{position:fixed;left:10px;right:10px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:9999;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:#fff7ed;color:#7c2d12;border:1px solid #fdba74;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:13px;line-height:1.4}
.update-banner span{flex:1}
.update-banner button{border:0;background:transparent;font-size:16px;cursor:pointer;color:#7c2d12;padding:0 4px}
/* ===== VERO 2.58.31 — Accueil : fond blanc illustré (ville et vagues) derrière la zone des 8 boutons =====
Validé par le porteur du projet (variante A, sans nuance de bleu ajoutée).
- fond blanc pur, dessins de l'image conservés tels quels, ancrés en bas ;
- l'image ne déborde pas : la photo de l'okapi (opaque) reste au-dessus ;
- boutons strictement inchangés (taille, position, couleurs, textes). */
.vero-dashboard{background:url("fond_accueil.png") center bottom/100% auto no-repeat,#ffffff!important}
.vero-dashboard .dash-grid{background:transparent!important}
.vero-dashboard .dash-grid::before{display:none!important}
/* 2.58.32 — Mode Campagne : le champ de traduction s'agrandit selon le texte. */
.camp-text{field-sizing:content;min-height:3.2em;overflow-wrap:anywhere}
/* ===== VERO 2.59.1 — Téléphone dans le navigateur (barre d'adresse visible : écran moins haut)
L'image se raccourcit pour que PARLER / DISCUSSION et « Écrire en … » ne se chevauchent plus.
Rien ne change quand l'écran est assez haut (application, plein écran). ===== */
@media(max-width:520px) and (max-height:739px){
.translator-view .vero27-screen{height:calc(100dvh - 200px)!important;min-height:360px!important}
.translator-view .vero27-controls{height:200px!important;min-height:200px!important}
.translator-view .type-row{bottom:10px!important}
}