/* ATYPYK — responsive. Référence : ATYPYK mobile.png */

/* Desktop : sections propres à la maquette mobile */
@media screen and (min-width: 769px) {
    .only-mobile { display: none !important; }
    body[data-current-view="home"] #contact { display: none; }
}

@media screen and (max-width: 768px) {

    /* --- Utilitaires (conventions du balisage : flex-mc = colonne mobile, flex-wr = retour mobile) --- */
    .hide-mobile { display: none !important; }
    .flex-mc { flex-direction: column; }
    .flex-wr { flex-wrap: wrap; }
    .iv-col, .iii-col { grid-template-columns: repeat(2, 1fr); }
    .ii-col { grid-template-columns: 1fr; }
    .cont-wide, .cont-mi, .cont-si, .cont-med { width: 90%; }
    body[data-current-view="home"] #partners { display: none; }

    h1 { font-size: 3.2em; }
    h2 { font-size: 3em; }
    h3 { font-size: 2.6em; }

    /* --- Header + menu --- */
    header#header {
        margin: 1.5em 0;
        left: 5%;
        transform: none; /* sinon le transform sert de repère au menu "fixed" */
        gap: 1em;
    }
    body.admin-bar header#header { top: 46px; }
    header#header > a#home img { height: 2em; }
    header#header > a#home { margin-right: auto; }
    header#header > .butt-link-main { padding: .6em 1em; font-size: medium; }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 2.5em;
        height: 2.5em;
        padding: 0 .25em;
        background: transparent;
    }
    .menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        border-radius: 3px;
        background: var(--nav-text-color);
    }
    #header.menu-open .menu-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    #header.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
    #header.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    header#header > nav#site-menu {
        display: none;
        position: fixed;
        inset: 0;
        height: 100dvh;
        padding: 0;
        background: var(--black);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2em;
        z-index: -1;
    }
    header#header > nav#site-menu a { font-size: 1.75em; font-weight: 600; }
    #header.menu-open > nav#site-menu { display: flex; }
    #header.menu-open {
        --nav-text-color: #ffffff;
        --display-logo-white: block;
        --display-logo-black: none;
    }
    body.menu-open { overflow: hidden; }

    /* --- Bannière --- */
    section#splash main { bottom: 8%; width: 90%; }
    section#splash main > p { width: 100%; }
    section#splash main nav { flex-direction: column; align-items: center; }
    section#splash > footer { display: none; }

    /* --- Prochain run --- */
    section#run { padding: 15% 5%; }
    section#run > main { width: 100%; }
    section#run > main h2 { white-space: normal; }
    section#run > main h6 { font-size: 1.15em; }
    section#run > main header nav { flex-wrap: wrap; }
    section#run > main hr { width: 90%; }
    section#run > main footer { flex-wrap: wrap; margin-top: 2em; }
    section#run > main footer .gcal { order: 3; }
    section#run > main ul.info li a { margin: 0; gap: 1em; }
    section#run aside {
        width: 100%;
        aspect-ratio: 1.25;
        margin-top: 4em;
    }
    section#run aside div.bg { height: 100%; border-radius: .5em; overflow: hidden; }
    section#run aside div.bg:after { display: none; }
    section#run aside div.bg-wh { padding: .5em 1em; }
    section#run aside div.bg-wh img { height: 3.5vh; }
    section#run aside div.bg-wh p { font-size: small; }

    /* --- Programme --- */
    section#running { aspect-ratio: auto; padding-top: 8em; }
    section#running > article { aspect-ratio: .85; }
    section#running > article main { padding: 1.25em; }

    /* --- Coachs --- */
    section#meet { padding: 8em 5% 4em; }
    section#meet main { margin: 4em 0; gap: 4em; }
    section#meet article,
    section#meet main article:first-child {
        flex-direction: column;
        text-align: center;
        transform: none;
        gap: 2em;
    }
    section#meet main article div { height: 40vh; }
    section#meet aside footer { justify-content: center; }

    /* --- Become ATYPYK --- */
    section#become { padding: 6em 5%; }
    section#become h1 span { display: block; }
    section#become main { flex-direction: column-reverse; gap: 3em; }
    section#become main aside,
    section#become header { width: 100%; }
    section#become header div#player { width: 95%; margin: 1.5em 0 0 5%; }
    section#become header div.bg-acc { width: 4em; }
    section#become main aside > div img { margin: 0 0 0 2em; }
    section#become main aside > div p { margin: 2em 0 3em; }
    section#become main aside > footer div {
        justify-content: flex-start;
        flex-wrap: wrap;
        text-transform: uppercase;
        font-weight: 600;
    }
    section#become main aside > footer div#app-link p { width: 100%; margin: 0; font-weight: 700; }
    section#become main aside > footer div:not(#rs) a { padding: 1.1em 1.8em; }

    /* --- Boutique --- */
    section#store { padding: 6em 5% 4em; }
    section#store > header { flex-direction: column; align-items: flex-start; gap: 2em; }
    section#store > header h1 { text-align: left; }
    section#store article { padding: .5em .5em 1em; border-radius: .5em; }
    section#store article header { border-radius: .5em; }
    section#store h5 { font-size: 1.1em; margin: .75em 0 0; }
    section#store p { font-size: .6em; font-style: italic; font-weight: 800; }
    section#store article footer h6 span { font-size: 180%; }
    section#store article footer button { font-size: .55em; padding: .5em 1em; }

    /* --- Vision (mobile) --- */
    section#vision { margin: 6em auto 4em; }
    section#vision header { align-items: flex-start; }
    section#vision footer { gap: 4em; }
    section#vision aside {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        width: 100%;
        margin: 0;
        gap: 2.5em 2em;
    }
    section#vision aside img { max-width: 100%; max-height: 5em; justify-self: center; }
    section#vision footer div { width: 100%; aspect-ratio: 2; }

    /* --- Partenaires --- */
    section#partners footer { gap: 2em; margin: 0 5% 4em; }
    section#partners footer img { max-width: 40%; max-height: 4em; }

    /* --- Contact --- */
    section#contact { padding: 0; align-items: stretch; }
    section#contact div.bg:after { background: linear-gradient(0deg, black 45%, transparent); }
    section#contact form { width: 90%; margin: 25em 5% 3em; }
    section#contact form header { flex-direction: column; align-items: flex-start; gap: 2em; margin: 0 0 3em; }
    section#contact form header h3 { font-size: 2.6em; }
    section#contact form textarea { height: 8em; }
    section#contact form div:last-child div:last-child { padding: 2em 0 0; align-self: flex-start; }
    section#contact form button { height: 5em; }

    /* --- Pied de page --- */
    footer#footer { padding: 5em 0 3em; }
    footer#footer header { gap: 3em; }
    footer#footer header a.footer-logo { width: 75%; }
    footer#footer header a.footer-logo img { width: 100%; height: auto; }
    *[class^="butt-link"] { text-transform: none; }
    footer#footer header nav { gap: 3em; }
    footer#footer > nav {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 1.5em 3em;
        text-align: center;
    }
    footer#footer > nav a:not(.butt-link-main) { font-size: large; font-weight: 600; }
    footer#footer > nav .butt-link-main { grid-column: 1 / -1; justify-self: center; font-size: medium; padding: .6em 1.5em; }
    footer#footer > footer { width: 90%; flex-direction: column; text-align: center; gap: 1em; }
}