/* ==========================================================================
   Thème OriaScript (https://oriascript.fr)
   Surcharge des jetons de style.css : palette claire, polices du site.
   ========================================================================== */

@font-face {
    font-family: 'Imprima';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/i-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Tangerine';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/t-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Tangerine';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/t-700.woff2') format('woff2');
}

:root {
    /* Accent OriaScript (pico) */
    --fbsd-red:        #0172ad;
    --fbsd-red-dark:   #015d8c;
    --fbsd-red-bright: #01aaff;
    --fbsd-red-soft:   #4da3cc;

    /* Surfaces claires */
    --bg:              #ffffff;
    --bg-elevated:     #ffffff;
    --surface:         #f4f6f8;
    --surface-hover:   #eaeef2;
    --surface-active:  #dfe5ea;
    --border:          #dce1e6;

    /* Texte */
    --text:            #373c44;
    --text-muted:      #5c6370;
    --text-faint:      #8a919c;

    /* Rétroaction */
    --danger:          #c62828;
    --success:         #2e7d32;
    --warning:         #b26a00;

    --radius:          10px;
    --radius-sm:       7px;

    --font: 'Imprima', -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: var(--bg);
}

/* Le site OriaScript utilise Tangerine pour les titres. */
.landing-copy h1 {
    font-family: 'Tangerine', cursive;
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: 18px;
}

.landing-copy h1 .accent {
    color: var(--fbsd-red);
    font-weight: 700;
}

.landing-copy p {
    font-size: 17px;
    line-height: 1.6;
}

.landing-copy p + p {
    margin-top: 12px;
}

.landing-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}

.landing-header .brand .brand-logo {
    height: 46px;
}

.landing-actions {
    box-shadow: 0 12px 32px rgba(55, 60, 68, 0.10);
}

.landing-actions .btn-new {
    font-size: 15px;
    font-weight: 600;
}

.landing-footer {
    background: var(--surface);
}

.landing-footer a {
    color: var(--fbsd-red);
}

/* Scène vidéo : fond sombre pour le contraste des flux. */
.video-stage {
    background: #13171f;
}

.video-stage .empty-stage h2 {
    color: #f1f3f5;
}

.video-stage .empty-stage p {
    color: #aab2bd;
}

/* Barre supérieure de la réunion. */
.meeting-topbar {
    padding: 10px 20px;
}

.meeting-topbar .brand .brand-logo {
    height: 34px;
}

/* Bouton d'enregistrement. */
.meeting-topbar .btn-record {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    color: #b3261e;
    background: #fdecea;
    border: 1px solid #f3c3bd;
    transition: background 0.15s ease, color 0.15s ease;
}

.meeting-topbar .btn-record:hover {
    background: #fbdcd8;
}

.meeting-topbar .btn-record .rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d32f2f;
    flex-shrink: 0;
}

.meeting-topbar .btn-record.active {
    background: #d32f2f;
    border-color: #b71c1c;
    color: #ffffff;
}

.meeting-topbar .btn-record.active .rec-dot {
    background: #ffffff;
    animation: pulse 1.2s infinite;
}

/* Fenêtre « Rejoindre la réunion » : le logo OriaScript est large
   (964×246), il ne doit pas être contraint par le carré 64×64 prévu
   pour l'ancien logo FreeBSD. */
.overlay-card .overlay-icon {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    margin: 0 auto 18px;
}

.overlay-card .overlay-logo {
    width: 220px;
    margin: 0;
}

@media (max-width: 600px) {
    .landing-copy h1 {
        font-size: 44px;
    }

    .meeting-topbar .brand .brand-logo {
        height: 28px;
    }

    /* Le libellé du bouton reste lisible, quitte à masquer le libellé
       de statut de connexion. */
    .meeting-topbar .topbar-status {
        display: none;
    }
}