/*
 * Next Gaymer — styles communs
 * ----------------------------
 * Feuille partagée par les pages du site : polices, réglages de base,
 * menu de navigation (overlay mobile / barre fixe desktop) et pied de page.
 * Les couleurs et espacements viennent des variables CSS définies dans la
 * feuille de l'édition (gf_2026_style.css) ; les valeurs de repli ici
 * permettent à cette feuille de rester lisible et autonome.
 */

/* ============================================================
   POLICES
   ============================================================ */

@font-face {
    font-family: "Righteous";
    font-display: swap;
    src: url("../polices/righteous.woff2") format("woff2");
}

@font-face {
    font-family: "Work Sans";
    font-display: swap;
    src: url("../polices/work-sans.woff2") format("woff2");
}

/* ============================================================
   BASE DE PAGE
   ============================================================ */

body {
    font-family: "Work Sans", system-ui, sans-serif;
    color: var(--txt-clair, #fff);
}

a {
    color: inherit;
    text-decoration: none;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--duree-base, 200ms) var(--courbe-sortie, ease);
}

a:hover {
    text-decoration: underline;
    text-decoration-color: var(--txt-attenue, #e2e2ea);
}

b, strong {
    font-weight: 700;
}

p {
    font-weight: 400;
}

/* ============================================================
   EN-TÊTE
   ============================================================ */

#logo-ng-cote {
    width: 149px;
}

/* ============================================================
   MENU DE NAVIGATION
   Mobile (< 960px) : overlay plein écran qui glisse depuis la gauche.
   Desktop (>= 960px) : barre pilule fixe et centrée (voir plus bas).
   ============================================================ */

/* Bouton hamburger (mobile) : pastille fixe en haut à droite */
#menu-burger {
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    padding: var(--esp-5);
    margin: var(--esp-5);
    border-radius: 100%;
}

#menu-burger img {
    height: 24px;
    width: auto;
    display: block;
}

/* Panneau du menu : fermé = largeur 0 (ouvert via la classe .menu-ouvert) */
#menu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1500;
    top: 0;
    left: 0;
    background:
        repeating-linear-gradient(to right,  rgba(246, 215, 145, 0.055) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(to bottom, rgba(246, 215, 145, 0.055) 0 1px, transparent 1px 48px),
        radial-gradient(120% 78% at 50% 22%, rgba(105, 57, 131, 0.28) 0%, rgba(105, 57, 131, 0) 60%),
        linear-gradient(165deg, #241653 0%, #17102f 46%, #0c0a19 100%);
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;   /* fermé = hors tabulation, sans dépendre du JS */
    transition: width var(--duree-lente, 420ms) var(--courbe-douce, ease-in-out);
}

/* Liserés arc-en-ciel en haut et en bas du panneau (mobile) */
#menu::before,
#menu::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--gf-arc-en-ciel, linear-gradient(to right, #cb332b, #e46e56, #f6d791, #4bad49, #476ba7, #693983));
    z-index: 2;
}
#menu::before { top: 0; }
#menu::after  { bottom: 0; }

/* Contenu du menu : liens empilés et centrés (mobile) */
#menu-contenu {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    padding: var(--esp-16, 64px) var(--esp-4, 16px) var(--esp-12, 48px);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#menu-contenu a {
    padding: var(--esp-2);
    text-decoration: none;
    font-size: 24px;
    color: var(--txt-clair, #fff);
    display: block;
    transition: color var(--duree-base, 200ms) var(--courbe-sortie, ease);
}

#menu-contenu a:hover, #menu-contenu a:focus-visible {
    color: var(--gf-creme, #f6d791);
    text-decoration: underline;
    text-decoration-color: var(--gf-creme, #f6d791);
    text-underline-offset: 6px;
}

/* Croix de fermeture, dessinée en ::before/::after (touche d'arcade) */
#menu-fermer {
    position: absolute;
    top: var(--esp-5, 20px);
    right: var(--esp-5, 20px);
    z-index: 3;
    width: 60px;
    height: 60px;
    padding: 0;
    font-size: 0;                 /* masque le × natif ; croix dessinée ci-dessous */
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    color: var(--gf-creme, #f6d791);
    background: var(--gf-panneau, #251a46);
    border: 3px solid var(--gf-creme, #f6d791);
    border-radius: var(--rayon-interne, 14px);
    box-shadow: var(--ombre-pressee, 0 5px 0 rgba(0, 0, 0, 0.35));
    transition: transform var(--duree-rapide, 120ms) var(--courbe-pop, ease), background var(--duree-rapide, 120ms) var(--courbe-sortie, ease), color var(--duree-rapide, 120ms) var(--courbe-sortie, ease);
}

#menu-fermer::before,
#menu-fermer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--esp-8, 32px);
    height: 5px;
    border-radius: 1px;
    background: currentColor;
}
#menu-fermer::before { transform: translate(-50%, -50%) rotate(45deg); }
#menu-fermer::after  { transform: translate(-50%, -50%) rotate(-45deg); }

#menu-fermer:hover,
#menu-fermer:focus-visible {
    background: var(--degrade-ambre);
    color: var(--gf-encre, #1a1422);
    transform: translateY(-1px);
}

/* Ouverture : la classe .menu-ouvert déploie le panneau */
.menu-ouvert {
    width: 100%!important;
}

#menu.menu-ouvert {
    visibility: visible;   /* menu ouvert (mobile) */
}

/* ---- Desktop : barre pilule fixe et centrée ---- */
@media (min-width:960px)  {
    #menu {
        /* !important annule le width:100% de .menu-ouvert */
        width: fit-content !important;
        max-width: calc(100vw - var(--esp-10, 40px));
        visibility: visible;
        box-sizing: border-box;
        height: auto;
        min-height: 68px;
        position: fixed;
        padding: var(--esp-2) var(--esp-10);
        transition: none;

        display: flex;
        justify-content: center;
        margin: auto;
        left: 0;
        right: 0;
        top: var(--esp-5, 20px);

        border-radius: var(--rayon-pilule, 999px);
        background: linear-gradient(var(--gf-panneau, #251a46), var(--gf-panneau, #251a46)) padding-box,
                    linear-gradient(to right,
                        var(--gf-rouge, #cb332b), var(--gf-corail, #e46e56), var(--gf-creme, #f6d791),
                        var(--gf-vert, #4bad49), var(--gf-bleu, #476ba7), var(--gf-violet, #693983)) border-box;
        border: 5px solid transparent;

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        z-index: 100;
    }

    #menu-contenu {
        min-height: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: var(--esp-2) var(--esp-3);
    }

    #menu-contenu a {
        padding: 0;
        font-size: var(--tp-menu, 17px);
        line-height: 24px;
        white-space: nowrap;
    }

    #menu-contenu a:hover,
    #menu-contenu a:focus-visible {
        text-underline-offset: 4px;
    }

    #menu-contenu a:has(#logo-ng-cote) {
        line-height: 0px;
    }

    /* Liserés et croix : inutiles en barre desktop */
    #menu::before,
    #menu::after {
        display: none;
    }

    #menu-fermer {
        display: none;
    }

    #menu-burger {
        display: none;
    }
}

/* ---- Très grands écrans : liens répartis sur toute la largeur ---- */
@media (min-width: 1600px) {
    #menu {
        width: auto !important;
        max-width: none;
        left: var(--esp-8, 32px);
        right: var(--esp-8, 32px);
    }
    #menu-contenu {
        justify-content: space-between;
    }
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */

footer {
    text-align: center;
}

#pied-logo-ng {
    height: 104px;
    width: auto;
}

.copyright {
    font-size: var(--tp-micro, 13px);
    font-weight: 400;
    color: var(--txt-legal, #a7a7ae);
    padding-top: var(--esp-2);
    padding-bottom: var(--esp-2);
    width: 90%;
    margin: auto;
}

.credits {
    font-family: var(--police-texte, 'Work Sans', system-ui, sans-serif);
    font-size: var(--tp-micro, 13px);
    color: var(--txt-legal, #a7a7ae);
    padding-top: var(--esp-2);
    padding-bottom: var(--esp-2);
    width: 90%;
    margin: auto;
}

.credits a {
    color: var(--txt-attenue, #e2e2ea);
    text-decoration: underline;
}

footer nav {
    width: 80%;
    margin: auto;
    text-align: center;
}

@media (min-width:960px)  {
    footer nav {
        display: flex;
        gap: var(--esp-12);
        align-items: center;
        justify-content: center;
    }
}

#pied-liens div {
    padding-top: var(--esp-2);
    padding-bottom: var(--esp-2);
}

.reseau-icone {
    width: 32px;
    margin: var(--esp-1);
}

/* ---- Overlay mobile : contenu qui glisse + liens en cascade ---- */
@media (max-width: 959.98px) {
    #menu-contenu {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity var(--duree-base, 200ms) var(--courbe-sortie, ease), transform var(--duree-base, 200ms) var(--courbe-sortie, ease);
    }
    #menu.menu-ouvert #menu-contenu { opacity: 1; transform: none; }

    #menu-contenu a {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity var(--duree-base, 200ms) var(--courbe-sortie, ease), transform var(--duree-base, 200ms) var(--courbe-sortie, ease);
    }
    #menu.menu-ouvert #menu-contenu a { opacity: 1; transform: none; }
    #menu.menu-ouvert #menu-contenu a:nth-child(1) { transition-delay: 50ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(2) { transition-delay: 76ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(3) { transition-delay: 102ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(4) { transition-delay: 128ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(5) { transition-delay: 154ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(6) { transition-delay: 180ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(7) { transition-delay: 206ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(8) { transition-delay: 232ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(9) { transition-delay: 258ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(10) { transition-delay: 284ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(11) { transition-delay: 310ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(12) { transition-delay: 336ms; }
    #menu.menu-ouvert #menu-contenu a:nth-child(13) { transition-delay: 362ms; }
}

/* Mouvement réduit : pas de glissement ni de cascade */
@media (prefers-reduced-motion: reduce) {
    #menu-contenu, #menu-contenu a { opacity: 1 !important; transform: none !important; transition: none !important; }
}