/* Page Grades — une composition éditoriale, pas un annuaire.
   Un bloc par grade : l'intitulé à gauche sur grand écran, les noms qui
   coulent en colonnes à droite. Aucune carte par personne, aucun avatar,
   aucune icône : ce sont des noms, ils se lisent comme du texte. */
.ck-home .ck-grades-page,
.ck-home .ck-grades-page * { box-sizing: border-box; }

/* Utilitaire lecteur d'écran : cette feuille est chargée seule sur /grades/. */
.ck-home .ck-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ck-home .ck-grades-intro {
    padding-block: clamp(2.5rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
    background: var(--ck-black);
    color: var(--ck-ivory);
}
.ck-home .ck-grades-intro__eyebrow {
    margin: 0 0 .875rem;
    color: var(--ck-text-light-secondary);
    font: 600 .875rem/1.5 'Chivo', Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ck-home .ck-grades-intro__title {
    margin: 0;
    color: var(--ck-ivory);
    font: 800 clamp(2.25rem, 9vw, 3.5rem)/1.08 'Archivo', Arial, sans-serif;
    letter-spacing: -.015em;
}
.ck-home .ck-grades-intro__lead {
    max-width: 38rem;
    margin: 1rem 0 0;
    color: var(--ck-text-light-secondary);
    font: 400 1.0625rem/1.65 'Chivo', Arial, sans-serif;
}

.ck-home .ck-grades {
    padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5.5rem);
    background: var(--ck-ivory);
    color: var(--ck-black);
}
.ck-home .ck-grades__inner { display: grid; gap: 0; min-width: 0; }
.ck-home .ck-grades__empty { margin: 0; color: var(--ck-text-dark-secondary); font: 400 1.0625rem/1.6 'Chivo', Arial, sans-serif; }

/* Les sensei ouvrent la page : un peu plus grands que les groupes qui suivent,
   un accent jaune sous le titre, et une vraie respiration avant le reste.
   Pas de carte profil, pas de portrait, pas de badge — des noms, en plus gros. */
.ck-home .ck-sensei-grades {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
    border-bottom: 2px solid var(--ck-black);
}
.ck-home .ck-sensei-grades__title {
    position: relative;
    margin: 0 0 1.25rem;
    padding-bottom: .625rem;
    color: var(--ck-black);
    font: 800 clamp(1.125rem, 4.5vw, 1.375rem)/1.2 'Archivo', Arial, sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ck-home .ck-sensei-grades__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2.25rem;
    height: 3px;
    background: var(--ck-yellow);
}
.ck-home .ck-sensei-grades__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.ck-home .ck-sensei-grades__person { min-width: 0; }
.ck-home .ck-sensei-grades__name {
    display: block;
    color: var(--ck-black);
    font: 800 clamp(1.375rem, 5.5vw, 1.75rem)/1.2 'Archivo', Arial, sans-serif;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
/* « Ceinture noire » porte l'information principale, le Dan la précise.
   Le tiret cadratin est posé en CSS : il ne doit pas apparaître quand il n'y a
   pas de Dan à annoncer. */
.ck-home .ck-sensei-grades__grade {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .125rem .5rem;
    margin-top: .3125rem;
}
.ck-home .ck-sensei-grades__belt {
    position: relative;
    padding-left: 1.875rem;
    color: var(--ck-black);
    font: 600 1rem/1.5 'Chivo', Arial, sans-serif;
}
/* Le même trait de ceinture que les groupes de grades, en noir. */
.ck-home .ck-sensei-grades__belt::before {
    content: "";
    position: absolute;
    top: .625em;
    left: 0;
    width: 1.375rem;
    height: .375rem;
    border-radius: 1px;
    background: var(--ck-black);
}
.ck-home .ck-sensei-grades__dan {
    color: var(--ck-text-dark-secondary);
    font: 400 1rem/1.5 'Chivo', Arial, sans-serif;
}
.ck-home .ck-sensei-grades__dan::before { content: "— "; }

/* Un filet fin sépare deux grades. Rien d'autre : pas d'encadré, pas de fond. */
.ck-home .ck-grade { padding-block: clamp(1.5rem, 4vw, 2.25rem); }
.ck-home .ck-grade + .ck-grade { border-top: 1px solid #D7D2C6; }

.ck-home .ck-grade__title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1rem;
    color: var(--ck-black);
    font: 800 clamp(1.125rem, 4.5vw, 1.375rem)/1.2 'Archivo', Arial, sans-serif;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
/* La ceinture : un trait, à plat, de la couleur du grade. Aucun faux relief,
   aucune image — l'ancienne page codait déjà le grade par la couleur. */
.ck-home .ck-grade__belt {
    flex: 0 0 auto;
    width: 2.25rem;
    height: .5rem;
    border-radius: 1px;
    background: var(--ck-belt, #101112);
    box-shadow: inset 0 0 0 1px rgba(16, 17, 18, .25);
}
.ck-home .ck-grade__count {
    margin-left: auto;
    color: var(--ck-text-dark-secondary);
    font: 400 .875rem/1 'Chivo', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}
.ck-home .ck-grade[data-ck-grade^="dan-"] .ck-grade__belt { --ck-belt: #101112; }
.ck-home .ck-grade[data-ck-grade="marron"] .ck-grade__belt { --ck-belt: #6B3A1E; }
.ck-home .ck-grade[data-ck-grade="bleue"] .ck-grade__belt { --ck-belt: #1E4FA8; }
.ck-home .ck-grade[data-ck-grade="verte"] .ck-grade__belt { --ck-belt: #1E7A3C; }
.ck-home .ck-grade[data-ck-grade="orange"] .ck-grade__belt { --ck-belt: #E0620F; }
.ck-home .ck-grade[data-ck-grade="jaune"] .ck-grade__belt { --ck-belt: #F2CC0C; }
.ck-home .ck-grade[data-ck-grade="blanche"] .ck-grade__belt { --ck-belt: #FFFFFF; }

.ck-home .ck-grade__people { margin: 0; padding: 0; list-style: none; }
.ck-home .ck-grade__person {
    padding: .3125rem 0;
    break-inside: avoid;
    overflow-wrap: anywhere;
}
.ck-home .ck-grade__name { color: var(--ck-black); font: 400 1.0625rem/1.5 'Chivo', Arial, sans-serif; }
/* La fonction se lit comme une mention, jamais comme une étiquette. */
.ck-home .ck-grade__role {
    margin-left: .5rem;
    color: var(--ck-text-dark-secondary);
    font: 600 .75rem/1.5 'Chivo', Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ck-home .ck-grades__total {
    margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid #D7D2C6;
    color: var(--ck-text-dark-secondary);
    font: 400 .9375rem/1.5 'Chivo', Arial, sans-serif;
}

@media (min-width: 600px) {
    .ck-home .ck-sensei-grades__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
    /* Les noms coulent en colonnes : une liste de dix tient alors en cinq
       lignes au lieu de dix, et le bloc du grade reste compact. */
    .ck-home .ck-grade__people { columns: 2; column-gap: 2rem; }
}

@media (min-width: 1150px) {
    /* L'intitulé passe à gauche, les noms occupent la largeur restante. */
    .ck-home .ck-grade {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: clamp(2rem, 5vw, 4rem);
        align-items: start;
        padding-block: clamp(1.75rem, 3vw, 2.5rem);
    }
    .ck-home .ck-grade__title { margin: 0; font-size: 1.5rem; }
    .ck-home .ck-grade__count { margin-left: 0; }
    .ck-home .ck-grade__people { columns: 3; column-gap: 2.5rem; }
    .ck-home .ck-grades-intro__title { font-size: clamp(3rem, 4.5vw, 4rem); }
}