/* Vocabulaire & Shodan Shiken.
   Le vocabulaire est le sujet de la page : pas de carte par mot, pas d'icône,
   pas de cadre répété. Des termes forts, des définitions lisibles, de l'air.
   L'ivoire porte la lecture ; le noir n'apparaît que pour les règles et le
   passage de grade, le jaune et le rouge restent des accents ponctuels. */
.ck-home .ck-voc-page, .ck-home .ck-voc-page * { box-sizing: border-box; }

/* Utilitaire lecteur d'écran : retiré du flux visuel sans display:none, qui
   l'effacerait aussi pour les lecteurs d'écran. */
.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;
}

/* --- Entrée de page --- */
.ck-home .ck-voc-intro {
    padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
    background: var(--ck-ivory);
    color: var(--ck-black);
}
.ck-home .ck-voc-intro__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-voc-intro__title {
    margin: 0 0 1.25rem; color: var(--ck-black);
    font: 800 clamp(2rem, 8vw, 2.75rem)/1.05 'Archivo', Arial, sans-serif; letter-spacing: -.02em;
}
.ck-home .ck-voc-intro__lead {
    max-width: 44rem; margin: 0; color: var(--ck-text-dark-secondary);
    font: 400 clamp(1.0625rem, 4vw, 1.125rem)/1.6 'Chivo', Arial, sans-serif;
}

/* --- Outils : recherche + lettres --- */
.ck-home .ck-voc { padding-block: 0 clamp(3rem, 8vw, 5rem); background: var(--ck-ivory); color: var(--ck-black); }
.ck-home .ck-voc__inner { display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); }

/* Collé sous le header : en parcourant une longue liste, la recherche et les
   lettres restent à portée sans remonter. */
.ck-home .ck-voc__tools {
    position: sticky;
    top: calc(var(--ck-header-height) + var(--ck-admin-offset));
    z-index: 5;
    display: grid;
    gap: 1rem;
    padding-block: 1rem;
    background: var(--ck-ivory);
    border-bottom: 1px solid var(--ck-separator-light, #D7D2C6);
}
.ck-home .ck-voc__label {
    display: block; margin: 0 0 .5rem; color: var(--ck-text-dark-secondary);
    font: 600 .8125rem/1.5 'Chivo', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.ck-home .ck-voc__input {
    width: 100%; max-width: 30rem; min-height: 3rem; padding: .625rem .875rem;
    border: 1px solid var(--ck-black); border-radius: 0; background: #fff; color: var(--ck-black);
    font: 400 1.0625rem/1.4 'Chivo', Arial, sans-serif;
}
.ck-home .ck-voc__input:focus-visible { outline: 2px solid var(--ck-black); outline-offset: 2px; }
.ck-home .ck-voc__hint { min-height: 1.25rem; margin: .5rem 0 0; color: var(--ck-text-dark-secondary); font: 400 .875rem/1.4 'Chivo', Arial, sans-serif; }

.ck-home .ck-voc__alpha { display: flex; flex-wrap: wrap; gap: .25rem; }
.ck-home .ck-voc__letter {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; min-height: 2.25rem; padding: 0 .25rem;
    border: 1px solid transparent; color: var(--ck-black);
    font: 700 .9375rem/1 'Archivo', Arial, sans-serif; text-decoration: none;
}
.ck-home .ck-voc__letter:hover { border-color: var(--ck-black); }
.ck-home .ck-voc__letter:focus-visible { outline: 2px solid var(--ck-black); outline-offset: 2px; }

.ck-home .ck-voc__empty { margin: 0; color: var(--ck-black); font: 400 1.0625rem/1.6 'Chivo', Arial, sans-serif; }

/* --- Les groupes --- */
.ck-home .ck-voc__body { display: grid; gap: clamp(2rem, 5vw, 2.75rem); }
/* Le groupe visé par une lettre arrive sous le header ET sous la barre d'outils. */
.ck-home .ck-voc__group { scroll-margin-top: calc(var(--ck-header-height) + var(--ck-admin-offset) + 8rem); }
.ck-home .ck-voc__group-title {
    margin: 0 0 1rem; padding-bottom: .5rem;
    border-bottom: 2px solid var(--ck-black);
    color: var(--ck-black);
    font: 800 1.25rem/1.2 'Archivo', Arial, sans-serif; letter-spacing: .02em; text-transform: uppercase;
}

.ck-home .ck-voc__list { display: grid; gap: 1.25rem; margin: 0; }
.ck-home .ck-voc__entry { display: grid; gap: .125rem; }
.ck-home .ck-voc__term {
    margin: 0; color: var(--ck-black);
    font: 800 1.0625rem/1.3 'Archivo', Arial, sans-serif; letter-spacing: .01em;
}
.ck-home .ck-voc__def {
    margin: 0; color: var(--ck-text-dark-secondary);
    font: 400 1.0625rem/1.55 'Chivo', Arial, sans-serif;
}

/* --- Les règles : champ noir, la rupture marque le changement de registre --- */
.ck-home .ck-voc-rules {
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
    background: var(--ck-black);
    color: var(--ck-ivory);
}
.ck-home .ck-voc-rules__inner { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.ck-home .ck-voc-rules__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-voc-rules__title {
    margin: 0; color: var(--ck-ivory);
    font: 800 clamp(1.75rem, 6vw, 2.25rem)/1.1 'Archivo', Arial, sans-serif; letter-spacing: -.015em;
}
.ck-home .ck-voc-rules__list { margin: 0; padding: 0; list-style: none; counter-reset: ck-rule; display: grid; gap: 1rem; }
.ck-home .ck-voc-rules__item {
    counter-increment: ck-rule;
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem;
    color: var(--ck-ivory); font: 400 1.0625rem/1.55 'Chivo', Arial, sans-serif;
}
/* Le numéro est le seul accent jaune de la page. */
.ck-home .ck-voc-rules__item::before {
    content: counter( ck-rule, decimal-leading-zero );
    color: var(--ck-yellow);
    font: 800 .9375rem/1.7 'Archivo', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* --- Shodan Shiken --- */
.ck-home .ck-shodan {
    padding-block: clamp(3rem, 8vw, 5rem);
    background: var(--ck-anthracite);
    color: var(--ck-ivory);
}
.ck-home .ck-shodan__inner { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); justify-items: start; }
.ck-home .ck-shodan__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-shodan__title {
    margin: 0 0 1rem; color: var(--ck-ivory);
    font: 800 clamp(1.875rem, 7vw, 2.5rem)/1.1 'Archivo', Arial, sans-serif; letter-spacing: -.015em;
}
.ck-home .ck-shodan__lead { max-width: 38rem; margin: 0; color: var(--ck-text-light-secondary); font: 400 1.0625rem/1.6 'Chivo', Arial, sans-serif; }

/* La ceinture : deux bandes et un nœud, en CSS. Aucun fichier image. */
.ck-home .ck-shodan__belt {
    display: grid;
    gap: 1rem;
    justify-items: center;
    width: min(100%, 30rem);
    padding: 1.5rem 1.25rem;
    /* Le bloc est plus clair que la section : une ceinture noire posée sur de
       l'anthracite ne se verrait pas. C'est le contraste qui fait la ceinture. */
    background: var(--ck-dark-surface);
    border: 1px solid var(--ck-separator-dark, #414348);
    color: var(--ck-ivory);
    text-decoration: none;
    transition: transform var(--ck-transition), border-color var(--ck-transition), background var(--ck-transition);
}
.ck-home .ck-shodan__knot { position: relative; display: block; width: 100%; height: 3.5rem; }
.ck-home .ck-shodan__strap {
    position: absolute; top: 1.125rem; height: 1.25rem;
    background: var(--ck-black);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .6);
}
.ck-home .ck-shodan__strap--left { left: 0; right: 52%; }
.ck-home .ck-shodan__strap--right { left: 52%; right: 0; }
/* Le nœud : un carré pivoté, plus clair que les bandes pour se détacher. */
.ck-home .ck-shodan__tie {
    position: absolute; left: 50%; top: 50%;
    width: 3rem; height: 1.75rem;
    background: #202225;
    border: 1px solid #34363a;
    transform: translate(-50%, -50%) rotate(-4deg);
}
.ck-home .ck-shodan__label {
    color: var(--ck-ivory);
    font: 600 1.0625rem/1.35 'Chivo', Arial, sans-serif;
    text-align: center;
}
/* Mouvement volontairement minime : 3 px et un cadre qui s'affirme. */
.ck-home .ck-shodan__belt:hover {
    transform: translateY(-3px);
    border-color: var(--ck-yellow);
    background: rgba(0, 0, 0, .25);
}
.ck-home .ck-shodan__belt:hover .ck-shodan__label { color: var(--ck-yellow); }
.ck-home .ck-shodan__belt:focus-visible { outline: 2px solid var(--ck-yellow); outline-offset: 4px; }

.ck-home .ck-shodan__back { margin: 0; }
.ck-home .ck-shodan__back a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    color: var(--ck-text-light-secondary); font: 400 1rem/1.3 'Chivo', Arial, sans-serif; text-decoration: none;
}
.ck-home .ck-shodan__back a:hover { color: var(--ck-ivory); text-decoration: underline; text-underline-offset: .3em; }

@media (min-width: 768px) {
    .ck-home .ck-voc-intro__title { font-size: clamp(2.75rem, 5vw, 3.5rem); }
    .ck-home .ck-voc__tools { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 2rem; }
    .ck-home .ck-voc__alpha { justify-content: flex-end; max-width: 26rem; }
    .ck-home .ck-voc-rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
    .ck-home .ck-shodan__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(2rem, 5vw, 4rem); }
    .ck-home .ck-shodan__head { grid-column: 1; grid-row: 1; }
    .ck-home .ck-shodan__belt { grid-column: 2; grid-row: 1; width: 20rem; }
    .ck-home .ck-shodan__back { grid-column: 1 / -1; grid-row: 2; }
}

@media (min-width: 1150px) {
    /* Deux colonnes de définitions : la mesure reste courte et l'œil descend
       moins loin. Le flux en colonnes garde l'ordre de lecture du DOM. */
    .ck-home .ck-voc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 4vw, 3.5rem); }
    .ck-home .ck-voc__list--numbers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ck-home .ck-voc-intro__title { font-size: clamp(3rem, 3.5vw, 3.75rem); }
    .ck-home .ck-voc__group-title { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-home .ck-shodan__belt { transition: none; }
    .ck-home .ck-shodan__belt:hover { transform: none; }
}

/* --- L'esprit du dojo : trois volets repliés ---
   <details> natifs. Pas de carte, pas d'arrondi : un filet fin entre chaque
   volet et un signe + / − qui bascule, dessiné en CSS. Le fond reste l'ivoire
   de la page, la section se distingue par son seul rythme. */
.ck-home .ck-dojo {
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
    background: var(--ck-ivory);
    color: var(--ck-black);
}
.ck-home .ck-dojo__inner { display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); }
.ck-home .ck-dojo__eyebrow {
    margin: 0 0 .875rem; color: var(--ck-text-dark-secondary);
    font: 600 .875rem/1.5 'Chivo', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.ck-home .ck-dojo__title {
    margin: 0; color: var(--ck-black);
    font: 800 clamp(1.75rem, 6vw, 2.25rem)/1.1 'Archivo', Arial, sans-serif; letter-spacing: -.015em;
}

.ck-home .ck-dojo__blocks { border-top: 1px solid var(--ck-separator-light, #D7D2C6); }
.ck-home .ck-dojo__block { border-bottom: 1px solid var(--ck-separator-light, #D7D2C6); }

/* Le marqueur natif est retiré des deux familles de moteurs, sinon un triangle
   vient doubler le signe + / −. */
.ck-home .ck-dojo__summary::-webkit-details-marker { display: none; }
.ck-home .ck-dojo__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 3.5rem;
    padding-block: 1rem;
    list-style: none;
    cursor: pointer;
    color: var(--ck-black);
    font: 800 clamp(1.0625rem, 4vw, 1.1875rem)/1.3 'Archivo', Arial, sans-serif;
    letter-spacing: -.005em;
}
.ck-home .ck-dojo__summary:hover .ck-dojo__summary-text { text-decoration: underline; text-underline-offset: .3em; }
.ck-home .ck-dojo__summary:focus-visible { outline: 2px solid var(--ck-black); outline-offset: 2px; }

/* Le signe : deux traits, dont le vertical disparaît à l'ouverture. */
.ck-home .ck-dojo__sign { position: relative; flex: 0 0 auto; width: 1rem; height: 1rem; }
.ck-home .ck-dojo__sign::before,
.ck-home .ck-dojo__sign::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    background: var(--ck-black);
    transform: translate(-50%, -50%);
}
.ck-home .ck-dojo__sign::before { width: 1rem; height: 2px; }
.ck-home .ck-dojo__sign::after { width: 2px; height: 1rem; transition: opacity var(--ck-transition); }
.ck-home .ck-dojo__block[open] .ck-dojo__sign::after { opacity: 0; }

.ck-home .ck-dojo__content { padding-bottom: 1.75rem; display: grid; gap: 1rem; max-width: 46rem; }
.ck-home .ck-dojo__text { margin: 0; color: var(--ck-text-dark-secondary); font: 400 1.0625rem/1.65 'Chivo', Arial, sans-serif; }
.ck-home .ck-dojo__list { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.ck-home .ck-dojo__list li { color: var(--ck-text-dark-secondary); font: 400 1.0625rem/1.6 'Chivo', Arial, sans-serif; }

/* Les commandements : terme japonais fort, geste en dessous. */
.ck-home .ck-dojo__steps { display: grid; gap: 1rem; margin: .25rem 0 0; }
.ck-home .ck-dojo__step { display: grid; gap: .125rem; }
.ck-home .ck-dojo__step-term { margin: 0; color: var(--ck-black); font: 800 1rem/1.3 'Archivo', Arial, sans-serif; }
.ck-home .ck-dojo__step-def { margin: 0; color: var(--ck-text-dark-secondary); font: 400 1.0625rem/1.6 'Chivo', Arial, sans-serif; }

@media (prefers-reduced-motion: reduce) {
    .ck-home .ck-dojo__sign::after { transition: none; }
}