* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --lavande-pro: #a386d9;
    --ocre-prive: #E2A76F;
    --active-color: var(--lavande-pro);
}
body { background: #000000 !important; color: #FFFFFF !important; font-family: 'Segoe UI', Arial, sans-serif; height: 100vh; width: 100vw; display: flex; flex-direction: column; overflow: hidden; }
body.mode-prive { --active-color: var(--ocre-prive); }
body.mode-pro { --active-color: var(--lavande-pro); }

header { background: #000000; border-bottom: 5px solid var(--active-color); padding: 15px 0; z-index: 4000; }
.header-top { display: flex; justify-content: space-between; padding: 10px 20px; align-items: center; }
.logo-almay { color: var(--active-color); font-weight: 900; font-size: 1.5rem; }
.logo-client { border: 3px solid #FFFFFF; padding: 5px 10px; color: #ffd700; font-weight: 900; }

.header-user { text-align: center; font-size: 1.2rem; color: #FFFFFF !important; font-weight: 900 !important; margin-top: 10px; }

.screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }

#input-popup-container { position: fixed; top: 140px; left: 0; width: 100%; display: none; justify-content: center; z-index: 5000; padding: 0 10px; }
.input-popup { background: #111111; border: 4px solid var(--active-color); padding: 20px; width: 100%; max-width: 500px; border-radius: 8px; }
.input-popup textarea { width: 100%; height: 130px; background: #000000; border: 2px solid #FFFFFF; color: #FFFFFF; padding: 15px; font-size: 1.2rem; font-weight: 700; }

footer { position: fixed; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 20px; z-index: 3000; }

.case-rdv { background: #000000; border: 4px solid var(--active-color); border-radius: 12px; padding: 15px; width: 60%; min-height: 95px; }
.case-rdv div, #rdv-content { color: #FFFFFF !important; font-weight: 900 !important; font-size: 1.1rem; }

.ia-controls-vertical { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.turquoise-btn { background: var(--active-color); color: #000000; width: 85px; height: 85px; border: 4px solid #FFFFFF; border-radius: 50%; font-size: 2.5rem; display: flex; align-items: center; justify-content: center; }
.secondary-btn { background: #000000; color: var(--active-color) !important; width: 60px; height: 60px; border: 4px solid var(--active-color); border-radius: 50%; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; }

@media (min-width: 1024px) { .ia-controls-vertical { flex-direction: row; gap: 20px; } }