@import url(./imports.css);

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-offset);
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--lcap-jaune) var(--lcap-bleu);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Fond accueil --- */
body {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: stretch;
    justify-content: flex-start;
    min-height: var(--max-h);
    width: var(--full);
    overflow-x: hidden;
    background-color: var(--lcap-bleu);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 55% at 50% -18%, rgba(255, 255, 255, 0.07) 0%, transparent 58%),
        radial-gradient(ellipse 45% 30% at 100% 0%, var(--home-accent-glow) 0%, transparent 55%),
        linear-gradient(180deg, var(--home-bg-top) 0%, var(--lcap-bleu) 42%, var(--home-bg-bottom) 100%);
}

/* --- Landing (header + hero) --- */
.landing {
    width: var(--full);
}

.header {
    position: var(--fix);
    top: 0;
    width: var(--full);
    padding: calc(var(--head) / 8) calc(var(--head) / 2);
    z-index: 50;
    background: rgba(51, 47, 128, 0.9);
    backdrop-filter: blur(calc(var(--head) / 4));
    -webkit-backdrop-filter: blur(calc(var(--head) / 4));
    border-bottom: 1px solid var(--home-border-subtle);
}

.header-bar {
    display: var(--f);
    flex-flow: var(--rnw);
    align-items: var(--c);
    justify-content: var(--sb);
    width: var(--full);
    max-width: calc(var(--head) * 32);
    margin-inline: auto;
    padding: calc(var(--head) * 0.375);
}

.header-brand {
    display: var(--f);
    flex: 1;
}

.header-home {
    display: inline-flex;
    align-items: var(--c);
    gap: calc(var(--head) / 8);
    color: var(--lcap-blanc);
    font-weight: var(--wb);
    text-decoration: var(--n);
    transition: var(--eas2);
}

.header-home:hover {
    color: var(--lcap-jaune);
}

.header-home-icon {
    display: block;
    width: var(--a);
    height: calc(var(--head) / 2);
}

.header-home-label,
.header-nav-link,
.header-mobile-menu-link {
    font-size: var(--header-font-size);
    font-weight: var(--wb);
}

.header-menu-toggle,
.header-menu-close {
    display: var(--f);
    align-items: var(--c);
    justify-content: var(--c);
    padding: calc(var(--head) / 8);
    color: var(--lcap-texte-clair);
    background: none;
    border: none;
    border-radius: calc(var(--head) / 10);
    cursor: pointer;
    transition: var(--eas2);
}

.header-menu-toggle svg,
.header-menu-close svg {
    width: calc(var(--head) * 0.6);
    height: calc(var(--head) * 0.6);
}

.header-menu-toggle:hover,
.header-menu-close:hover {
    color: var(--lcap-blanc);
    background: rgba(255, 255, 255, 0.08);
}

.header-nav-desktop {
    display: var(--n);
    flex-flow: var(--rnw);
    align-items: var(--c);
    gap: calc(var(--head) * 0.75);
}

.header-nav-link {
    color: var(--lcap-blanc);
    text-decoration: var(--n);
    transition: var(--eas2);
}

.header-nav-link:hover {
    color: var(--lcap-jaune);
}

.header-mobile-menu {
    width: var(--full);
    max-width: var(--full);
    height: var(--full);
    max-height: var(--full);
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.header-mobile-menu::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.header-mobile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--full);
    max-width: calc(var(--head) * 9);
    padding: calc(var(--head) * 0.375);
    overflow-y: auto;
    background: var(--lcap-bleu);
    border-left: calc(var(--head) / 40) solid rgba(255, 255, 255, 0.1);
}

.header-mobile-menu-head {
    display: var(--f);
    flex-flow: var(--rnw);
    align-items: var(--c);
    justify-content: var(--sb);
}

.header-mobile-menu-nav {
    display: var(--f);
    flex-flow: var(--cnw);
    gap: calc(var(--head) / 8);
    margin-top: calc(var(--head) * 0.75);
    padding-top: calc(var(--head) * 0.75);
    border-top: calc(var(--head) / 40) solid rgba(255, 255, 255, 0.1);
}

.header-mobile-menu-label {
    margin: calc(var(--head) / 4) 0 0;
    padding-inline: calc(var(--head) / 4);
    font-size: calc(var(--head) * 0.3);
    font-weight: var(--wb);
    color: var(--lcap-texte-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.header-mobile-menu-link {
    display: block;
    padding: calc(var(--head) / 4);
    color: var(--lcap-blanc);
    text-decoration: var(--n);
    border-radius: calc(var(--head) / 10);
    transition: var(--eas2);
}

.header-mobile-menu-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--lcap-jaune);
}

.hero {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--c);
    width: var(--full);
    min-height: 80vh;
    padding-inline: calc(var(--head) / 2);
    margin-top: calc(var(--head) * 1.5);
}

.hero-body {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--c);
    width: var(--full);
    max-width: calc(var(--head) * 20);
}

.hero-content {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--c);
    gap: calc(var(--head) / 2);
    width: var(--full);
    text-align: center;
}

.hero-title {
    margin: 0;
    font-size: calc(var(--head) * 1.25);
    font-weight: var(--wbr);
    color: var(--lcap-blanc);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero-lead {
    margin: calc(var(--head) * 0.5) 0 0;
    font-size: calc(var(--head) * 0.45);
    font-weight: var(--wb);
    color: var(--lcap-blanc);
    line-height: 1.75;
    text-wrap: pretty;
}

.hero-actions {
    display: var(--f);
    flex-flow: var(--rw);
    align-items: var(--c);
    justify-content: var(--c);
    flex-wrap: wrap;
    gap: calc(var(--head) * 0.375) calc(var(--head) * 0.5);
    margin-top: calc(var(--head) * 0.625);
}

.hero-btn {
    display: inline-block;
    padding: calc(var(--head) / 3.2) calc(var(--head) * 0.45);
    font-size: calc(var(--head) * 0.35);
    font-weight: var(--wb);
    color: var(--noir);
    text-decoration: var(--n);
    background: var(--lcap-jaune);
    border: calc(var(--head) / 40) solid var(--lcap-jaune);
    border-radius: calc(var(--head) / 10);
    transition: var(--eas2);
}

.hero-btn:hover {
    background: var(--lcap-jaune);
    color: var(--noir);
    transform: var(--tsp);
}

.hero-link {
    display: inline-flex;
    align-items: var(--c);
    font-size: calc(var(--head) * 0.35);
    font-weight: var(--wb);
    color: var(--lcap-blanc);
    text-decoration: var(--n);
    transition: var(--eas2);
}

.hero-link span {
    display: inline-block;
    transition: transform var(--eas2);
}

.hero-link:hover span {
    transform: translateX(5px);
}

.hero-link:hover {
    color: var(--lcap-jaune);
}

@media screen and (min-width: 640px) {
    .hero-title {
        font-size: calc(var(--head) / 0.75);
    }

    .hero-lead {
        margin-top: calc(var(--head) * 0.5);
        font-size: calc(var(--head) * 0.5);
    }
}

@media screen and (min-width: 1024px) {
    .header-bar {
        padding-inline: calc(var(--head) * 0.5);
    }

    .header-menu-toggle {
        display: var(--n);
    }

    .header-nav-desktop {
        display: var(--f);
    }
}

/* --- À propos --- */
.about {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--c);
    width: var(--full);
    padding-block: calc(var(--head) * 2);
    scroll-margin-top: var(--header-offset);
}

.about-inner {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--c);
    gap: calc(var(--head) * 1.2);
    width: var(--full);
    max-width: calc(var(--head) * 32);
    margin-inline: auto;
    padding-inline: calc(var(--head) / 2);
}

.about-header {
    width: var(--full);
    max-width: calc(var(--head) * 16);
    text-align: center;
}

.about-title {
    margin: 0;
    font-size: calc(var(--head) * 1);
    font-weight: var(--wbr);
    color: var(--lcap-blanc);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.about-lead {
    margin: calc(var(--head) * 0.6) 0 0;
    font-size: calc(var(--head) * 0.45);
    color: var(--texte);
    line-height: 1.75;
}

.about-features-wrap {
    width: var(--full);
    max-width: calc(var(--head) * 16);
}

.about-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--head) * 0.6);
    margin: 0;
}

.about-feature {
    position: var(--rel);
    padding-left: calc(var(--head) * 1.6);
}

.about-feature-icon {
    position: var(--abs);
    top: 0;
    left: 0;
    display: var(--f);
    align-items: var(--c);
    justify-content: var(--c);
    width: calc(var(--head) * 1);
    height: calc(var(--head) * 1);
    background: var(--lcap-jaune);
    border-radius: calc(var(--head) / 10);
}

.about-feature-icon svg {
    width: calc(var(--head) * 0.6);
    height: calc(var(--head) * 0.6);
    color: var(--noir);
}

.about-feature-term {
    margin: 0;
    font-size: calc(var(--head) * 0.35);
    font-weight: var(--wb);
    color: var(--lcap-blanc);
    line-height: 1.75;
}

.about-feature-desc {
    margin: calc(var(--head) / 4) 0 0;
    font-size: calc(var(--head) * 0.35);
    color: var(--texte);
    line-height: 1.75;
}

@media screen and (min-width: 640px) {
    .about-inner {
        padding-inline: calc(var(--head) * 0.375);
    }

    .about-title {
        font-size: calc(var(--head) * 1.25);
    }
}

@media screen and (min-width: 1024px) {
    .about-inner {
        flex-flow: var(--rnw);
        align-items: start;
        justify-content: var(--c);
        gap: calc(var(--head) * 2);
    }

    .about-header {
        flex: 1 1 calc(var(--head) * 12);
        max-width: calc(var(--head) * 14);
        text-align: left;
    }

    .about-features-wrap {
        flex: 1 1 calc(var(--head) * 12);
        max-width: calc(var(--head) * 14);
    }

    .about-features {
        padding-top: calc(var(--head) * 0.5);
        gap: calc(var(--head) * 0.8);
    }
}

/* --- Pied de page --- */
.footer {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--c);
    width: var(--full);
    padding-block: calc(var(--head) * 0.75);
}

.footer-copy {
    margin: 0;
    font-size: calc(var(--head) * 0.35);
    color: var(--texte);
    text-align: center;
}

.footer-copy a {
    color: var(--lcap-jaune);
    text-decoration: var(--n);
    transition: var(--eas2);
}

.footer-copy a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Choix OS --- */
.pick {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--c);
    width: var(--full);
    padding-block: calc(var(--head) * 2);
    scroll-margin-top: var(--header-offset);
}

.pick-inner {
    width: var(--full);
    max-width: calc(var(--head) * 32);
    margin-inline: auto;
    padding-inline: calc(var(--head) / 2);
    text-align: center;
}

.pick-title {
    margin: 0;
    font-size: calc(var(--head) * 1);
    font-weight: var(--wbr);
    color: var(--lcap-blanc);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.pick-lead {
    margin: calc(var(--head) * 0.5) 0 calc(var(--head) * 1.2);
    font-size: calc(var(--head) * 0.45);
    color: var(--texte);
    line-height: 1.75;
}

.pick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--head) * 0.5);
    width: var(--full);
    max-width: calc(var(--head) * 24);
    margin-inline: auto;
}

.pick-card {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--c);
    gap: calc(var(--head) / 3);
    min-height: calc(var(--head) * 3.5);
    padding: calc(var(--head) * 0.5) calc(var(--head) / 3);
    border: calc(var(--head) / 40) solid rgba(255, 255, 255, 0.14);
    border-radius: calc(var(--head) / 10);
    background: rgba(255, 255, 255, 0.05);
    color: var(--lcap-blanc);
    font-family: inherit;
    font-size: calc(var(--head) * 0.35);
    font-weight: var(--wb);
    cursor: pointer;
    transition: var(--eas2);
}

.pick-card img {
    width: var(--a);
    height: calc(var(--head) * 1.1);
    object-fit: contain;
}

.pick-card:hover {
    border-color: var(--lcap-jaune);
    background: rgba(255, 255, 255, 0.1);
}

.pick-card.is-selected {
    border-color: var(--lcap-jaune);
    background: rgba(242, 186, 66, 0.14);
}

.pick-modal {
    width: var(--full);
    max-width: var(--full);
    height: var(--full);
    max-height: var(--full);
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.pick-modal::backdrop {
    background: rgba(15, 12, 40, 0.72);
}

.pick-modal-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    width: calc(100% - var(--head));
    max-width: calc(var(--head) * 16);
    max-height: calc(100% - var(--head));
    padding: calc(var(--head) * 0.4);
    overflow-y: auto;
    background: var(--lcap-blanc);
    border: calc(var(--head) / 40) solid rgba(255, 255, 255, 0.12);
    border-radius: calc(var(--head) / 10);
    box-shadow: var(--bo);
    transform: translate(-50%, -50%);
}

.pick-modal-head {
    display: var(--f);
    flex-flow: var(--rnw);
    align-items: var(--c);
    justify-content: var(--sb);
    gap: calc(var(--head) / 4);
    margin-bottom: calc(var(--head) / 4);
    padding-bottom: calc(var(--head) / 4);
    border-bottom: calc(var(--head) / 40) solid rgba(51, 47, 128, 0.12);
}

.pick-modal-title {
    margin: 0;
    font-size: calc(var(--head) * 0.48);
    font-weight: var(--wbr);
    color: var(--lcap-bleu);
}

.pick-modal-close {
    display: var(--f);
    align-items: var(--c);
    justify-content: var(--c);
    padding: calc(var(--head) / 8);
    color: var(--lcap-bleu);
    background: none;
    border: none;
    border-radius: calc(var(--head) / 10);
    cursor: pointer;
    transition: var(--eas2);
}

.pick-modal-close svg {
    width: calc(var(--head) * 0.45);
    height: calc(var(--head) * 0.45);
}

.pick-modal-close:hover {
    background: rgba(51, 47, 128, 0.08);
}

.pick-modal-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--head) * 0.28);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pick-modal-item {
    display: var(--f);
    justify-content: var(--c);
    min-width: 0;
}

.pick-modal-card {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--c);
    gap: calc(var(--head) / 6);
    width: var(--full);
    max-width: calc(var(--head) * 2.75);
    aspect-ratio: 1;
    padding: calc(var(--head) / 4);
    font-size: calc(var(--head) * 0.24);
    font-weight: var(--wb);
    color: var(--lcap-bleu);
    text-decoration: var(--n);
    text-align: center;
    background: rgba(51, 47, 128, 0.04);
    border: calc(var(--head) / 40) solid rgba(51, 47, 128, 0.12);
    border-radius: calc(var(--head) / 12);
    transition: var(--eas2);
}

.pick-modal-card-icon {
    width: calc(var(--head) * 0.75);
    height: calc(var(--head) * 0.75);
    object-fit: contain;
    flex-shrink: 0;
}

.pick-modal-card-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.25;
    text-wrap: balance;
}

.pick-modal-card:hover {
    border-color: var(--lcap-jaune);
    background: rgba(242, 186, 66, 0.12);
    color: var(--noir);
    transform: var(--tsp);
}

.pick-modal-empty {
    grid-column: 1 / -1;
    padding: calc(var(--head) / 4);
    font-size: calc(var(--head) * 0.35);
    color: var(--lcap-bleu);
    line-height: 1.6;
    text-align: center;
}

@media screen and (min-width: 640px) {
    .pick-modal-panel {
        max-width: calc(var(--head) * 18);
    }

    .pick-modal-list {
        grid-template-columns: repeat(4, 1fr);
        gap: calc(var(--head) * 0.32);
    }

    .pick-modal-card {
        max-width: calc(var(--head) * 3);
        font-size: calc(var(--head) * 0.26);
    }

    .pick-modal-card-icon {
        width: calc(var(--head) * 0.85);
        height: calc(var(--head) * 0.85);
    }
}

@media screen and (min-width: 640px) {
    .pick-inner {
        padding-inline: calc(var(--head) * 0.375);
    }

    .pick-title {
        font-size: calc(var(--head) * 1.25);
    }

    .pick-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--head) * 0.6);
    }

    .pick-card {
        min-height: calc(var(--head) * 4);
    }
}

main,
.footer {
    position: var(--rel);
    z-index: 1;
}

main {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: stretch;
    justify-content: flex-start;
    flex: 1;
    width: var(--full);
    min-height: 0;
}