/*
 * Mon espace social — habillage des pages MiroTalk (upstream).
 *
 * Chargé par une seule ligne <link> (bloc DOEO-CUSTOM) dans les vues upstream :
 *   public/views/newcall.html, login.html, waitingRoom.html
 * (la salle, client.html, a sa propre feuille : mes-room.css)
 * On ne modifie pas les CSS MiroTalk : on les surcharge ici, avec les jetons de mes-tokens.css.
 * Style « nuit » de la maquette Visio, cohérent avec le thème de la salle (app/src/config.js).
 * Après une mise à jour upstream, vérifier visuellement ces pages (les sélecteurs peuvent changer).
 */

@import url('mes-tokens.css');

/* Jetons MiroTalk (public/css/_tokens.css) remplacés par ceux de la charte */
:root {
    --ds-font-sans: var(--font-text);
    --ds-brand-500: #1f4e9c;
    --ds-brand-600: #1f4e9c;
    --ds-brand-700: #173d7a;
    --ds-danger: #b3261e;
    --ds-success: #23704f;
}

/* ---------- Polices ---------- */
/* Pas de règle sur « button » : certains boutons MiroTalk sont des icônes Font Awesome (.fas). */
body,
input,
select,
textarea,
h1,
h2,
h3,
h4,
.button {
    font-family: var(--font-text) !important;
}

/* ---------- Fond : aplat nuit, sans vagues ni dégradés ---------- */
body,
.body-wrap,
.site-content {
    background: var(--night-deep) !important;
}
.illustration-section-01::after {
    background-image: none !important;
}

/* ---------- Bloc « nom de l'entretien » : aplat, sans dégradé ---------- */
.cta-inner {
    background: #152036 !important;
    border: 1px solid #263553 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
.cta .form-input {
    background: #0d1526 !important;
    border: 1.5px solid #63759a !important;
    border-radius: var(--radius-md) !important;
    color: #eef2f8 !important;
}

/* ---------- Cartes de connexion et de salle d'attente : aplat, accents de la charte ---------- */
.login-card,
.waiting-card {
    background: #152036 !important;
    border: 1px solid #263553 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
.login-icon,
.waiting-icon {
    background: #1a2d52 !important;
    border-color: #263553 !important;
}
.login-icon i,
.waiting-icon i,
.waiting-room-name i,
.waiting-audio-btn,
.host-login-link a {
    color: #8eb1ee !important; /* bleu de la charte, thème sombre */
}
.host-login-link a:hover,
.waiting-audio-btn:hover {
    color: #b4cbf4 !important;
}
.waiting-spinner-dot,
.waiting-audio-progress {
    background: #8eb1ee !important;
}
.login-card .form-input {
    background: #0d1526 !important;
    border: 1.5px solid #63759a !important;
    border-radius: var(--radius-md) !important;
    color: #eef2f8 !important;
}
.login-card .form-input:focus {
    border-color: #8eb1ee !important;
}
.login-card .login-btn {
    background: var(--blue) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.login-card .login-btn:hover {
    background: var(--blue-strong) !important;
}

/* ---------- Logo de la charte à la place du logo MiroTalk ---------- */
.site-header .brand img,
.site-footer .brand img {
    display: none !important;
}
.site-header .brand a,
.site-footer .brand a {
    display: block;
    width: 203px;
    height: 36px;
    background: url('../images/mes-logo-horizontal-white.svg') no-repeat left center / contain;
}

/* ---------- Boutons ---------- */
.button {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    min-height: 48px;
}
.button-primary {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: var(--on-blue) !important;
    box-shadow: none !important;
}
.button-primary:hover {
    background: var(--blue-strong) !important;
    border-color: var(--blue-strong) !important;
}

:focus-visible {
    outline: 3px solid #b4cbf4 !important; /* focus-ring du thème sombre de la charte */
    outline-offset: 2px;
}

/* ---------- Pied de page MiroTalk (réseaux sociaux, liens MiroTalk) : masqué ---------- */
.site-footer {
    display: none !important;
}