.ck-home .ck-header {
    position: sticky;
    top: var(--ck-admin-offset);
    z-index: 1000;
    background: var(--ck-black);
    color: var(--ck-ivory);
}
.ck-home .ck-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; min-height: var(--ck-header-height); }

/* Brand: the 2026 emblem, détouré sur fond transparent, se pose directement sur
   le noir du header. Aucune tuile, aucun arrondi, aucune bordure, aucune ombre.
   La hauteur pilote la largeur pour que le ratio du fichier soit strictement
   préservé à toutes les tailles.
   The negative bottom margin lets the emblem hang below the header line
   without ever changing the header's own height (no layout shift). */
.ck-home .ck-header__brand {
    display: block;
    flex: 0 0 auto;
    align-self: flex-start;
    width: calc(var(--ck-brand-height) * var(--ck-brand-ratio));
    height: var(--ck-brand-height);
    margin-bottom: calc(var(--ck-header-height) - var(--ck-brand-height));
    background: none;
    border-radius: 0;
    transition: width var(--ck-transition), height var(--ck-transition), margin-bottom var(--ck-transition);
}
.ck-home .ck-header__logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

/* Plus de bouton jaune dans le header : le déclencheur de menu part donc à
   droite tout seul, et l'accent jaune se reporte sur le survol des entrées. */
.ck-home .ck-header__toggle { margin-left: auto; }

/* Menu trigger: sober, no frame and no fill, so it never reads as a second CTA.
   The 44px target is kept by the box itself, not by a visible border. */
.ck-home .ck-header__toggle {
    display: none;
    align-items: center;
    gap: .5rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .5rem .25rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ck-ivory);
    font: 600 .875rem/1.25 'Chivo', Arial, sans-serif;
    cursor: pointer;
    box-shadow: none;
}
.ck-home.ck-menu-ready .ck-header__toggle { display: inline-flex; justify-content: center; }
.ck-home .ck-header__toggle-icon { display: block; flex: 0 0 auto; }
.ck-home .ck-header__toggle:hover { color: var(--ck-yellow); }
.ck-home .ck-menu-panel__close {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .5rem .625rem;
    border: 1px solid var(--ck-text-light-secondary);
    border-radius: 4px;
    background: var(--ck-black);
    color: var(--ck-ivory);
    font: 600 .875rem/1.25 'Chivo', Arial, sans-serif;
    cursor: pointer;
    box-shadow: none;
}
.ck-home .ck-menu-panel__close:hover { background: var(--ck-dark-surface); }

/* Progressive enhancement: without JS, the navigation stays available in flow. */
.ck-home .ck-nav--desktop { flex: 1 1 100%; order: 4; padding-block: .5rem; }
.ck-home.ck-menu-ready .ck-nav--desktop { display: none; }
.ck-home .ck-nav__list { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
.ck-home .ck-nav__list > li { margin: 0; padding: 0; list-style: none; }
.ck-home .ck-nav a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ck-ivory);
    font: 400 .9375rem/1.4 'Chivo', Arial, sans-serif;
    text-decoration: none;
    transition: color var(--ck-transition);
    overflow-wrap: anywhere;
}
/* L'accent jaune que le bouton portait vit maintenant ici : au survol et au
   focus, l'entrée passe au jaune du club. Transition courte, rien de plus. */
.ck-home .ck-nav a:hover,
.ck-home .ck-nav a:focus-visible { color: var(--ck-yellow); }
/* Sur une page intérieure, l'entrée correspondante reste jaune. */
.ck-home .ck-nav :where(.current-menu-item, .current-menu-ancestor) > a,
.ck-home .ck-nav a[aria-current="page"] { color: var(--ck-yellow); font-weight: 600; }
.ck-home .ck-menu-panel { display: none; }
.ck-home .ck-menu-panel[open] {
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(100%, 28rem);
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100%;
    margin: 0;
    padding: calc(var(--ck-admin-offset) + 1rem) var(--ck-gutter) 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    background: var(--ck-black);
    color: var(--ck-ivory);
}
.ck-home .ck-menu-panel::backdrop { background: #101112; }
.ck-home .ck-menu-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.ck-home .ck-menu-panel__title { margin: 0; color: var(--ck-ivory); font: 800 1.5rem/1.2 'Archivo', Arial, sans-serif; }
.ck-home .ck-nav--mobile .ck-nav__list { display: flex; flex-direction: column; gap: .75rem; }
.ck-home .ck-nav--mobile a { min-height: 3rem; font-size: 1.125rem; }
body.ck-home.ck-menu-open { overflow: hidden; }

/* Bascule du menu — mesurée, pas devinée.
   Dix entrées déroulées demandent 902 px de contenu, gouttières comprises. À
   1250 px il n'en restait que 68 de marge, l'écart entre liens ayant déjà
   fondu de 23 à 20 px : c'est le début du tassement. La bascule est donc
   remontée à 1350 px, où la marge remonte à 143 px et l'écart à 22 px, plutôt que de
   rapetisser le texte du menu. Cette valeur est reprise telle quelle dans
   assets/js/cobra-header.js : les deux doivent rester d'accord. */
@media (min-width: 1350px) {
    .ck-home .ck-header__inner { flex-wrap: nowrap; gap: 0; }
    /* Respiration entre l'emblème et la navigation, qui occupe ensuite toute la
       largeur restante. */
    .ck-home .ck-nav--desktop,
    .ck-home.ck-menu-ready .ck-nav--desktop {
        display: block;
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        margin-inline: clamp(2.5rem, 3.5vw, 3.5rem) 0;
    }
    .ck-home .ck-nav--desktop .ck-nav__list { flex-wrap: nowrap; justify-content: flex-end; gap: .25rem clamp(1rem, 1.6vw, 1.75rem); }
    .ck-home .ck-nav--desktop .ck-nav a { white-space: nowrap; overflow-wrap: normal; }
    .ck-home.ck-menu-ready .ck-header__toggle { display: none; }
}