/* Surcharges propres à LYSI NOVA, appliquées par-dessus le thème Materialize */

/*
 * Le thème met une majuscule à chaque mot des boutons, usage anglais qui ne se pratique pas
 * en français : « Se connecter » et non « Se Connecter ».
 */
.btn {
    text-transform: none;
}

/* Annotation audio : cadre de la forme d'onde et du spectrogramme, et largeur du zoom */
.nova-waveform {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem;
}

/* Pistes capteurs : pleine largeur sous le spectrogramme, pour partager son axe de temps */
.nova-sensor {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    cursor: pointer;
}

.nova-zoom {
    width: 10rem;
}

/*
 * Page d'accueil publique (index.html) : fond de nuit et piste d'annotation animée par index.js.
 * La page reste toujours sombre, comme un écran d'écoute. Les couleurs des faits reprennent celles
 * de l'écran d'annotation (corpus-detail.js), éclaircies pour rester lisibles sur ce fond.
 * index.js lit ces variables : elles sont la seule source des couleurs du canvas.
 */
.nova-landing {
    --nova-landing-night:     #161833;
    --nova-landing-surface:   #1f2247;
    --nova-landing-line:      rgba(168, 172, 230, 0.16);
    --nova-landing-text:      #eceeff;
    --nova-landing-muted:     #a3a6c9;
    --nova-landing-dim:       #464a80;
    --nova-landing-primary:   var(--bs-primary);
    --nova-landing-sensor:    #26a69a;
    --nova-landing-tap:       #ef5350;
    --nova-landing-detection: #66bb6a;
    --nova-landing-warning:   #ffb400;

    background-color: var(--nova-landing-night);
    color:            var(--nova-landing-muted);
}

.nova-landing-page {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
    max-width:      72rem;
    margin:         0 auto;
    padding:        2rem 1.5rem;
}

.nova-landing-brand {
    color:          var(--nova-landing-text);
    font-size:      1.125rem;
    font-weight:    700;
    letter-spacing: 0.04em;
}

.nova-landing-main {
    display:         flex;
    flex:            1;
    flex-direction:  column;
    justify-content: center;
    gap:             3.5rem;
    padding:         3rem 0;
}

/*
 * Accroche : titre sur toute la largeur, texte et action côte à côte en dessous sur grand écran.
 * Une seule séquence d'apparition, avant que la piste ne se dessine.
 */
.nova-landing-hero {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items:           end;
    gap:                   0 3rem;
}

.nova-landing-hero > * {
    animation: nova-landing-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.nova-landing-hero > :nth-child(2) {
    animation-delay: 0.08s;
}

.nova-landing-hero > :nth-child(3) {
    animation-delay: 0.16s;
}

.nova-landing-title {
    grid-column:    1 / -1;
    margin-bottom:  1.5rem;
    color:          var(--nova-landing-text);
    font-size:      clamp(2.25rem, 1rem + 4.6vw, 4.75rem);
    font-weight:    700;
    line-height:    1.05;
    letter-spacing: -0.035em;
    text-wrap:      balance;
}

.nova-landing-lead {
    max-width:     38rem;
    margin-bottom: 0;
    font-size:     1.125rem;
    line-height:   1.6;
}

.nova-landing-action {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.75rem;
}

.nova-landing-note {
    margin:    0;
    font-size: 0.875rem;
}

/* Piste de démonstration */
.nova-landing-track {
    margin:           0;
    padding:          1.25rem 1.25rem 1rem;
    border:           1px solid var(--nova-landing-line);
    border-radius:    1rem;
    background-color: var(--nova-landing-surface);
}

.nova-landing-track-head {
    display:         flex;
    justify-content: space-between;
    margin-bottom:   0.75rem;
    font-size:       0.8125rem;
}

.nova-landing-timecode {
    color:                var(--nova-landing-text);
    font-variant-numeric: tabular-nums;
}

.nova-landing-stage {
    position: relative;
}

.nova-landing-canvas {
    display: block;
    width:   100%;
    height:  15rem;
}

/* Étiquette de verdict, posée par index.js à l'abscisse de son événement (--nova-landing-x) */
.nova-landing-verdict {
    --nova-landing-verdict-color: var(--nova-landing-muted);

    position:         absolute;
    bottom:           0.5rem;
    left:             var(--nova-landing-x);
    display:          inline-flex;
    align-items:      center;
    gap:              0.375rem;
    padding:          0.25rem 0.625rem;
    border:           1px solid color-mix(in srgb, var(--nova-landing-verdict-color) 55%, transparent);
    border-radius:    1rem;
    background-color: color-mix(in srgb, var(--nova-landing-verdict-color) 16%, var(--nova-landing-surface));
    color:            var(--nova-landing-text);
    font-size:        0.75rem;
    font-weight:      600;
    white-space:      nowrap;
    opacity:          0;
    transform:        translate(-50%, 0.5rem);
    transition:       opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nova-landing-verdict::before {
    content:          "";
    width:            0.5rem;
    height:           0.5rem;
    flex:             none;
    border-radius:    50%;
    background-color: var(--nova-landing-verdict-color);
}

.nova-landing-verdict.is-visible {
    opacity:   1;
    transform: translate(-50%, 0);
}

.nova-landing-verdict-true {
    --nova-landing-verdict-color: var(--nova-landing-detection);
}

.nova-landing-verdict-false {
    --nova-landing-verdict-color: var(--nova-landing-warning);
}

.nova-landing-verdict-missed {
    --nova-landing-verdict-color: var(--nova-landing-tap);
}

.nova-landing-legend {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem 1.5rem;
    margin-top: 0.75rem;
    font-size:  0.8125rem;
}

.nova-landing-key {
    display:     inline-flex;
    align-items: center;
    gap:         0.5rem;
}

.nova-landing-key::before {
    content: "";
    width:   2px;
    height:  0.875rem;
}

.nova-landing-key-tap::before {
    background-color: var(--nova-landing-tap);
}

.nova-landing-key-detection::before {
    background-color: var(--nova-landing-detection);
}

/* Les quatre étapes du programme, dans leur ordre réel */
.nova-landing-steps {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.5rem;
    margin:                0;
    padding:               0;
    list-style:            none;
    counter-reset:         nova-landing-step;
}

.nova-landing-step {
    padding-top:       1rem;
    border-top:        1px solid var(--nova-landing-line);
    counter-increment: nova-landing-step;
}

.nova-landing-step::before {
    content:              counter(nova-landing-step);
    display:              block;
    margin-bottom:        0.5rem;
    color:                var(--nova-landing-primary);
    font-size:            0.875rem;
    font-weight:          600;
    font-variant-numeric: tabular-nums;
}

.nova-landing-step h2 {
    margin-bottom: 0.375rem;
    color:         var(--nova-landing-text);
    font-size:     1.125rem;
    font-weight:   600;
}

.nova-landing-step p {
    margin:      0;
    font-size:   0.9375rem;
    line-height: 1.5;
}

.nova-landing-footer {
    font-size: 0.8125rem;
}

@keyframes nova-landing-rise {
    from {
        opacity:   0;
        transform: translateY(0.75rem);
    }

    to {
        opacity:   1;
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .nova-landing-hero {
        grid-template-columns: minmax(0, 1fr);
        gap:                   2rem;
    }

    .nova-landing-title {
        margin-bottom: 0;
    }

    .nova-landing-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .nova-landing-page {
        padding: 1.5rem 1rem;
    }

    .nova-landing-track {
        padding: 1rem 0.75rem 0.75rem;
    }

    /* Trois étiquettes sur un écran étroit : elles passent sur deux lignes pour ne pas se chevaucher */
    .nova-landing-verdict {
        max-width:   4.25rem;
        padding:     0.25rem 0.375rem;
        font-size:   0.6875rem;
        line-height: 1.2;
        text-align:  center;
        white-space: normal;
    }

    .nova-landing-verdict::before {
        display: none;
    }

    .nova-landing-steps {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nova-landing-hero > * {
        animation: none;
    }

    .nova-landing-verdict {
        transition: none;
    }
}