/* Le club en compétition — amorce ivoire, groupe de silhouettes en pont, champ noir.
   Aucune carte, aucun tableau, aucun symbole de médaille, aucune couleur or/argent/bronze.
   Aucune animation : la ceinture reste le seul geste animé de la page. */
.ck-home .ck-competition,
.ck-home .ck-competition * { box-sizing: border-box; }

.ck-home .ck-competition {
    --ck-comp-group-h: 27rem;  /* hauteur de la bande de silhouettes */
    --ck-comp-ground: 66%;      /* le noir commence derrière le tiers inférieur */
    background: var(--ck-black);
    color: var(--ck-ivory);
    scroll-margin-top: calc(var(--ck-header-height) + var(--ck-admin-offset) + 1rem);
    overflow-x: clip;
}

/* --- Amorce ivoire : label + H2, dans la continuité de Sensei --- */
.ck-home .ck-competition__head {
    padding-block: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 4vw, 2.5rem);
    background: var(--ck-ivory);
    color: var(--ck-black);
}
.ck-home .ck-competition__eyebrow {
    margin: 0 0 1rem;
    color: var(--ck-text-dark-secondary);
    font: 600 .875rem/1.5 'Chivo', Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ck-home .ck-competition__title {
    max-width: 16ch;
    margin: 0;
    color: var(--ck-black);
    font: 800 clamp(1.75rem, 7.5vw, 2rem)/1.1 'Archivo', Arial, sans-serif;
    letter-spacing: -.015em;
}

/* --- Le pont : la bande porte elle-même la bascule ivoire → noir --- */
.ck-home .ck-competition__squad {
    background-image: linear-gradient(
        to bottom,
        var(--ck-ivory) 0 var(--ck-comp-ground),
        var(--ck-black) var(--ck-comp-ground) 100%
    );
}
.ck-home .ck-competition__group {
    position: relative;
    height: var(--ck-comp-group-h);
}

/* Chaque personne est placée PAR SON VISAGE : les fichiers web sont recadrés
   symétriquement autour de la tête, donc le centre du fichier EST le visage.
   --ck-fig-x (desktop) et --ck-fig-xm (mobile) portent cette position, posée
   en style inline depuis le tableau de composition du gabarit.
   La profondeur se joue sur trois leviers simultanés — taille, élévation au-
   dessus de la ligne de sol, et luminosité — jamais sur un seul, sans quoi le
   groupe redevient une rangée plate. */
.ck-home .ck-competition__figure {
    position: absolute;
    bottom: 0;
    left: var(--ck-fig-xm);
    transform: translateX(-50%);
    width: auto;
    max-width: none;
    height: 100%;
}
/* Les fichiers sont coupés net à mi-cuisse. Cette coupe tombe toujours dans la
   zone noire, où le bas de survêtement la rend quasi invisible — mais « quasi »
   suffit à laisser une encoche là où un pixel clair traîne (une main, un
   liseré). Ce fondu de quelques pixels efface la coupe sans jamais se lire
   comme un fondu : les personnes reposent toujours sur la ligne de sol. */
.ck-home .ck-competition__figure {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 3.5%);
    mask-image: linear-gradient(to top, transparent 0, #000 3.5%);
}

/* Mobile : deux rangs nets. Dix visages sur une seule ligne sous 768 px
   donneraient des têtes de 30 px ; le rang arrière est donc surélevé, et sa
   coupe de fichier reste dans la zone noire où elle est invisible. */
.ck-home .ck-competition__figure--row-front { height: 66%; bottom: 0; }
.ck-home .ck-competition__figure--row-back  { height: 56%; bottom: 22%; }
.ck-home .ck-competition__figure--row-back  { filter: brightness(.66) contrast(.95); }
.ck-home .ck-competition__figure--row-front { filter: none; }
/* Superposition : le rang arrière d'abord, puis le premier rang par-dessus. */
.ck-home .ck-competition__figure--row-back  { z-index: 1; }
.ck-home .ck-competition__figure--row-front { z-index: 2; }
/* --- Champ noir : contexte et palmarès --- */
.ck-home .ck-competition__record {
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 8vw, 5.5rem);
    background: var(--ck-black);
}
.ck-home .ck-competition__record-inner { display: grid; gap: clamp(2rem, 5vw, 3rem); }

.ck-home .ck-competition__caption {
    margin: 0 0 1.5rem;
    color: var(--ck-text-light-secondary);
    font: 400 .9375rem/1.5 'Chivo', Arial, sans-serif;
}
.ck-home .ck-competition__intro {
    margin: 0 0 .75rem;
    color: var(--ck-ivory);
    font: 600 .875rem/1.5 'Chivo', Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ck-home .ck-competition__disciplines {
    max-width: 22rem;
    margin: 0;
    color: var(--ck-text-light-secondary);
    font: 400 1.0625rem/1.6 'Chivo', Arial, sans-serif;
}

.ck-home .ck-competition__series + .ck-competition__series {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid var(--ck-separator-dark, #414348);
}
.ck-home .ck-competition__serie-title {
    margin: 0 0 1rem;
    color: var(--ck-ivory);
    font: 700 1.0625rem/1.3 'Archivo', Arial, sans-serif;
    letter-spacing: .02em;
}
.ck-home .ck-competition__results {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .75rem clamp(1.5rem, 4vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Chaque nombre garde son libellé dans le même groupe de lecture. */
.ck-home .ck-competition__result {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
}
.ck-home .ck-competition__number {
    color: var(--ck-ivory);
    font: 800 clamp(1.5rem, 6vw, 1.75rem)/1 'Archivo', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.ck-home .ck-competition__metal {
    color: var(--ck-text-light-secondary);
    font: 400 .9375rem/1.4 'Chivo', Arial, sans-serif;
}
/* Unique accent jaune de la séquence : l'or mondial, libellé accolé. */
.ck-home .ck-competition__result--lead { flex-basis: 100%; }
.ck-home .ck-competition__result--lead .ck-competition__number {
    color: var(--ck-yellow);
    font-size: clamp(3rem, 13vw, 3.5rem);
}
.ck-home .ck-competition__result--lead .ck-competition__metal {
    color: var(--ck-ivory);
    font-size: 1.0625rem;
}

@media (min-width: 768px) {
    .ck-home .ck-competition { --ck-comp-group-h: 24rem; }
    /* Tablette et desktop : un seul groupe sur trois plans de profondeur, les
       visages répartis sur toute la largeur. Les rangs mobiles sont neutralisés. */
    .ck-home .ck-competition__figure { left: var(--ck-fig-x); }
    .ck-home .ck-competition__figure--back {
        height: 62%;
        bottom: 17%;
        z-index: 1;
        filter: brightness(.6) contrast(.94);
    }
    .ck-home .ck-competition__figure--mid {
        height: 82%;
        bottom: 7%;
        z-index: 2;
        filter: brightness(.82);
    }
    .ck-home .ck-competition__figure--lead {
        height: 100%;
        bottom: 0;
        z-index: 3;
        filter: none;
    }
    .ck-home .ck-competition__title { font-size: clamp(2.25rem, 4.5vw, 2.75rem); }
    .ck-home .ck-competition__result--lead { flex-basis: auto; }
    .ck-home .ck-competition__result--lead .ck-competition__number { font-size: clamp(3.5rem, 7vw, 4.5rem); }
    .ck-home .ck-competition__number { font-size: clamp(1.75rem, 3vw, 2.125rem); }
}

@media (min-width: 1150px) {
    .ck-home .ck-competition { --ck-comp-group-h: 34rem; }
    .ck-home .ck-competition__title { font-size: clamp(3.25rem, 4vw, 4rem); }
    /* Contexte à gauche (4 col), séries à droite (8 col) — §12. */
    .ck-home .ck-competition__record-inner {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: clamp(3rem, 5vw, 4.5rem);
        align-items: start;
    }
    .ck-home .ck-competition__result--lead .ck-competition__number { font-size: clamp(4rem, 5vw, 5rem); }
}