/* Quand · Où · Pour qui — respiration ivoire, juste après le Hero sombre.
   Aucune carte, aucune icône, aucun fond par item : la hiérarchie est portée
   par l'échelle typographique et de simples filets. */
.ck-home .ck-practical,
.ck-home .ck-practical * { box-sizing: border-box; }

.ck-home .ck-practical {
    /* Séparateur clair de docs/DESIGN.md §3, local à la section. */
    --ck-separator-light: #D7D2C6;
    /* Le bas est réglé séparément du haut. Le haut sépare de la ceinture, qui
       est sombre : le contraste fait déjà une partie du travail, un grand
       souffle y est justifié. Le bas, lui, donne sur Le Club, qui partage le
       même ivoire : deux grands paddings s'additionnaient (112 + 72 = 184 px)
       et le vide passait pour du contenu manquant. Voir aussi cobra-club.css. */
    padding-block: clamp(3rem, 9vw, 7rem) clamp(1.5rem, 4vw, 2.5rem);
    background: var(--ck-ivory);
    color: var(--ck-black);
    scroll-margin-top: calc(var(--ck-header-height) + var(--ck-admin-offset) + 1rem);
}
.ck-home .ck-practical__inner { display: grid; gap: clamp(2rem, 5vw, 2.75rem); }

.ck-home .ck-practical__eyebrow {
    margin: 0 0 .75rem;
    color: var(--ck-text-dark-secondary);
    font: 600 .875rem/1.5 'Chivo', Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ck-home .ck-practical__heading {
    margin: 0;
    color: var(--ck-black);
    font: 800 clamp(1.875rem, 7.5vw, 2.5rem)/1.1 'Archivo', Arial, sans-serif;
    letter-spacing: -.015em;
}

/* Filets uniquement ENTRE les groupes : le titre reste attaché au premier. */
.ck-home .ck-practical__row + .ck-practical__row {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ck-separator-light);
}
.ck-home .ck-practical__label {
    margin: 0 0 .75rem;
    color: var(--ck-text-dark-secondary);
    font: 600 .875rem/1.5 'Chivo', Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Les horaires pèsent plus lourd que leurs libellés. */
.ck-home .ck-practical__schedule { display: grid; gap: 0; margin: 0; }
.ck-home .ck-practical__day {
    margin: 0;
    color: var(--ck-text-dark-secondary);
    font: 600 .9375rem/1.4 'Chivo', Arial, sans-serif;
    letter-spacing: .04em;
}
.ck-home .ck-practical__hours {
    margin: .125rem 0 1.25rem;
    color: var(--ck-black);
    font: 800 clamp(1.75rem, 8vw, 2.25rem)/1.1 'Archivo', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    /* Une plage horaire ne doit jamais se couper autour du tiret. Les tailles
       ci-dessus sont calibrées pour que « 18h30 – 20h00 » tienne de 320 px à
       1920 px. À revérifier si la chaîne des horaires s'allonge. */
    white-space: nowrap;
}
.ck-home .ck-practical__hours:last-child { margin-bottom: 0; }

.ck-home .ck-practical__place {
    margin: 0;
    color: var(--ck-black);
    font: 800 clamp(1.25rem, 5.5vw, 1.625rem)/1.25 'Archivo', Arial, sans-serif;
    letter-spacing: -.01em;
}
.ck-home .ck-practical__city {
    margin: .375rem 0 0;
    color: var(--ck-text-dark-secondary);
    font: 400 1rem/1.5 'Chivo', Arial, sans-serif;
}

/* Mention temporaire : volontairement sobre, mais pleinement lisible (5,79:1). */
.ck-home .ck-practical__pending {
    max-width: 32rem;
    margin: 0;
    color: var(--ck-text-dark-secondary);
    font: 400 1.0625rem/1.6 'Chivo', Arial, sans-serif;
}
.ck-home .ck-practical__pending + .ck-practical__pending { margin-top: .75rem; }

@media (min-width: 768px) {
    .ck-home .ck-practical__heading { font-size: clamp(2.25rem, 4.5vw, 3rem); }
    .ck-home .ck-practical__row + .ck-practical__row { margin-top: 2rem; padding-top: 2rem; }
    /* Les deux créneaux passent côte à côte, jour au-dessus de son horaire. */
    .ck-home .ck-practical__schedule {
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }
    .ck-home .ck-practical__hours { margin-bottom: 0; }
    .ck-home .ck-practical__place { font-size: clamp(1.5rem, 2.8vw, 1.875rem); }
}

/* Desktop : intro éditoriale à gauche (4 col), informations à droite (8 col),
   chaque groupe en libellé étroit + contenu large. Même bascule que le Header. */
@media (min-width: 1150px) {
    .ck-home .ck-practical__inner {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: clamp(3rem, 6vw, 6rem);
        align-items: start;
    }
    .ck-home .ck-practical__heading { font-size: clamp(2.75rem, 3.6vw, 3.5rem); }
    .ck-home .ck-practical__row {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
        gap: 2rem;
        align-items: start;
    }
    .ck-home .ck-practical__label { margin-bottom: 0; }
    .ck-home .ck-practical__schedule { column-gap: 3rem; }
    .ck-home .ck-practical__hours { font-size: clamp(1.75rem, 2.1vw, 2rem); }
}

/* Itinéraire : un bouton jaune à droite de la ligne du lieu. Le texte garde
   toute sa largeur utile, le bouton ne bouge pas quand le nom du lieu passe
   sur deux lignes — d'où l'alignement sur le haut du bloc plutôt qu'au centre.
   Sous 600 px, il passe SOUS l'adresse : côte à côte, il faudrait couper
   « Maison des Jeunes Alfred Bonjean » en quatre lignes pour lui faire place. */
.ck-home .ck-practical__where { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
.ck-home .ck-practical__where-text { min-width: 0; }
.ck-home .ck-map-pin {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    max-width: 100%;
    padding: .5rem 1rem;
    border-radius: 4px;
    background: var(--ck-yellow);
    color: var(--ck-black);
    font: 600 .9375rem/1.25 'Chivo', Arial, sans-serif;
    text-decoration: none;
    transition: background-color var(--ck-transition);
}
.ck-home .ck-map-pin:hover { background: var(--ck-yellow-hover); }
.ck-home .ck-map-pin:active { background: var(--ck-yellow-active); }
/* La section est ivoire : le contour de focus y est noir, pas jaune sur jaune. */
.ck-home .ck-map-pin:focus-visible { outline: 3px solid var(--ck-black); outline-offset: 3px; }
.ck-home .ck-map-pin svg { display: block; flex: 0 0 auto; }
.ck-home .ck-map-pin__label { white-space: nowrap; }
@media (min-width: 600px) {
    .ck-home .ck-practical__where { flex-direction: row; justify-content: space-between; gap: 1rem; }
}
@media (min-width: 768px) {
    .ck-home .ck-map-pin { min-height: 2.9375rem; padding-inline: 1.125rem; }
}