/* public/app/css/dash-simple-showcase-layout.css
 * Synopsis: Composition premium de l’essai homepage.
 * Objectif: CTA dictée d’abord sur mobile ; langues après sans toucher au cockpit.
 */

.dictation .dash.dash--simple:not(.dash--fs) {
    --dash-gap: clamp(.8rem, 1.8vw, 1.25rem);
    gap: var(--dash-gap);
    grid-template-areas:
        "top top"
        "langs stage"
        "credit credit";
    grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
    max-width: min(70rem, calc(100vw - 2rem));
    padding: clamp(1rem, 2vw, 1.5rem);
    width: min(70rem, calc(100vw - 2rem));
}

.dash.dash--simple .dash-top {
    background: color-mix(in srgb, var(--dash-elev) 76%, transparent);
    border: 1px solid color-mix(in srgb, var(--dash-line) 82%, transparent);
    border-radius: calc(var(--dash-radius) * 1.7);
    grid-area: top;
    padding: clamp(.7rem, 1.3vw, 1rem);
}

.dash.dash--simple .dash-rail--langs {
    grid-area: langs;
    min-height: 0;
}

.dash.dash--simple .dash-stage {
    background: color-mix(in srgb, var(--dash-elev) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--dash-line) 82%, transparent);
    border-radius: calc(var(--dash-radius) * 1.7);
    grid-area: stage;
    padding: clamp(.75rem, 1.5vw, 1rem);
}

.dash.dash--simple .dash-credit {
    grid-area: credit;
}

.dash.dash--simple .dash-panel--flags {
    background:
        linear-gradient(160deg, var(--dash-accent-dim), transparent 52%),
        var(--dash-elev);
    border-color: color-mix(in srgb, var(--dash-accent) 30%, var(--dash-line));
    border-radius: calc(var(--dash-radius) * 1.7);
    height: 100%;
    padding: .85rem;
}

.dash.dash--simple .dash-panel--flags .dash-lang-head {
    display: flex;
}

.dash.dash--simple .dash-panel--flags .dash-lang-head__lead {
    min-width: 0;
    width: 100%;
}

.dash.dash--simple .dash-panel--flags .dash-label,
.dash.dash--simple .dash-panel--flags .dash-help-btn {
    display: none;
}
.dash.dash--simple .dash-panel--flags > .dash-panel__title-host::before {
    display: none;
}
.dash.dash--simple .dash-simple-lang-ready {
    display: block;
    font-family: var(--display);
    font-size: clamp(1.2rem, 2.1vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    overflow: visible;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
}
.dash.dash--simple .dash-rail--langs .lang-flags-wrap {
    flex: 1 1 auto;
    height: clamp(15rem, 34vh, 21rem);
    min-height: 15rem;
}

@media (max-width: 1100px) {
    .dictation .dash.dash--simple:not(.dash--fs) {
        grid-template-areas: "top" "stage" "langs" "credit";
        grid-template-columns: minmax(0, 1fr);
        max-width: calc(100vw - 1rem);
        width: calc(100vw - 1rem);
    }

    .dash.dash--simple .dash-rail--langs .lang-flags-wrap {
        height: 11.25rem;
        min-height: 11.25rem;
    }
}