/* =========================================================================
   Navigation multi-pages — charte dorée/sombre cohérente (accueil + tiroir)
   ========================================================================= */
:root { --ksk-dark:#342a2d; --ksk-gold:#d0ab48; }

/* Sélecteur de langue FR · EN — pastille compacte (coin haut-gauche) */
.ksk-lang {
    position: fixed; top: 16px; left: 16px; z-index: 1004;
    display: inline-flex; align-items: center; gap: 5px; width: auto; line-height: 1;
    background: var(--ksk-dark); border-radius: 10px; padding: 7px 11px;
    font-size: 13px; letter-spacing: 1px; box-shadow: 0 0 6px rgba(0,0,0,.45);
}
.ksk-lang a { display: inline; color: var(--ksk-gold); text-decoration: none; opacity: .55; padding: 0; }
.ksk-lang a.active { opacity: 1; font-weight: bold; }
.ksk-lang span { color: var(--ksk-gold); opacity: .6; }

/* Liste commune (pilule) */
.ksk-nav ul { list-style:none; margin:0; padding:0; display:flex; }
.ksk-nav li { list-style:none; float:none; }
.ksk-nav a {
    display:block; color:var(--ksk-gold); text-decoration:none;
    padding:14px 16px; font-size:14px; letter-spacing:1px; white-space:nowrap;
    transition: background .25s ease, color .25s ease;
}
.ksk-nav a.active, .ksk-nav a:hover {
    background:var(--ksk-gold); color:var(--ksk-dark); font-weight:bold; border-radius:12px;
}

/* ---- ACCUEIL : barre-pilule centrée en bas (visuel d'origine) ---- */
.ksk-nav--bottom {
    position:fixed; bottom:40px; left:50%; transform:translateX(-50%);
    background:var(--ksk-dark); border-radius:15px; box-shadow:0 0 6px rgba(0,0,0,.45);
    z-index:1000; max-width:96vw;
}
.ksk-nav--bottom ul { flex-wrap:wrap; justify-content:center; }

/* ---- PAGES INTERNES : bouton Menu (haut-droite) + tiroir ---- */
.ksk-menu-btn {
    position:fixed; top:12px; right:16px; z-index:1003;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--ksk-dark); color:var(--ksk-gold);
    border:none; border-radius:12px; padding:0 22px; min-height:44px; cursor:pointer;
    font-size:15px; letter-spacing:2px; box-shadow:0 0 6px rgba(0,0,0,.45);
    min-width:88px; text-align:center;
}
.ksk-menu-btn:hover { background:var(--ksk-gold); color:var(--ksk-dark); }
/* Croix de fermeture dessinée en CSS (rendu net et épais, visible mobile + desktop).
   currentColor = la couleur du bouton → doré sur sombre, s'inverse au survol comme les onglets. */
.ksk-menu-btn__close { display:none; position:relative; width:22px; height:22px; }
.ksk-menu-btn__close::before,
.ksk-menu-btn__close::after {
    content:""; position:absolute; top:50%; left:0; width:100%; height:3px;
    background:currentColor; border-radius:2px;
}
.ksk-menu-btn__close::before { transform:translateY(-50%) rotate(45deg); }
.ksk-menu-btn__close::after  { transform:translateY(-50%) rotate(-45deg); }
/* À l'ouverture : croix dorée + halo doré pour détacher le bouton du tiroir (mobile) */
body.ksk-open .ksk-menu-btn { background:var(--ksk-dark); color:var(--ksk-gold); box-shadow:0 0 0 2px var(--ksk-gold), 0 0 6px rgba(0,0,0,.45); }
body.ksk-open .ksk-menu-btn:hover { background:var(--ksk-gold); color:var(--ksk-dark); }
body.ksk-open .ksk-menu-btn__label { display:none; }
body.ksk-open .ksk-menu-btn__close { display:inline-block; }

/* Voile cliquable pour fermer */
.ksk-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.4);
    opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:1001;
}
body.ksk-open .ksk-overlay { opacity:1; visibility:visible; }

/* Tiroir — DESKTOP : barre horizontale qui glisse depuis la droite */
.ksk-nav--drawer {
    position:fixed; top:0; right:0; z-index:1002; min-height:68px;
    display:flex; align-items:center;
    background:var(--ksk-dark); box-shadow:0 0 8px rgba(0,0,0,.45);
    border-bottom-left-radius:15px; padding-right:120px; /* place pour le bouton/✕ aligné à droite */
    transform:translateX(105%); transition:transform .35s ease;
}
.ksk-nav--drawer ul { flex-wrap:wrap; align-items:center; }
body.ksk-open .ksk-nav--drawer { transform:translateX(0); }

/* Tiroir — MOBILE : panneau vertical plein écran qui glisse depuis la droite */
@media (max-width:768px){
    .ksk-nav--drawer {
        top:0; height:100%; width:min(82%,300px);
        padding-right:0; border-bottom-left-radius:0; padding-top:72px; overflow-y:auto;
    }
    .ksk-nav--drawer ul { flex-direction:column; }
    .ksk-nav--drawer a { padding:16px 24px; border-bottom:1px solid rgba(208,171,72,.18); }
    .ksk-nav--drawer a.active, .ksk-nav--drawer a:hover { border-radius:0; }

    .ksk-nav--bottom { bottom:16px; }
    .ksk-nav--bottom a { padding:9px 11px; font-size:12px; letter-spacing:.5px; }
}

/* Bascule FR · EN à côté de la croix — apparaît avec le menu (pages internes), toujours horizontale */
.ksk-drawer-lang {
    position:fixed; top:24px; right:116px; z-index:1005;
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap; width:auto;
    font-size:14px; letter-spacing:1px;
    opacity:0; visibility:hidden; transition:opacity .25s ease;
}
body.ksk-open .ksk-drawer-lang { opacity:1; visibility:visible; }
.ksk-drawer-lang a { color:var(--ksk-gold); text-decoration:none; opacity:.55; }
.ksk-drawer-lang a.active { opacity:1; font-weight:bold; }
.ksk-drawer-lang span { color:var(--ksk-gold); opacity:.6; }
@media (max-width:768px){
    .ksk-drawer-lang { top:26px; right:108px; }
}