/* Galerie — bande horizontale. Pas une mosaïque, pas des cartes : des photos
   posées côte à côte, à hauteur commune, qui filent hors du cadre.
   Le défilement est celui du navigateur (overflow + scroll-snap) ; les flèches
   ne font que l'appeler. Aucune lecture automatique, aucun déplacement seul. */
.ck-home .ck-gallery, .ck-home .ck-gallery * { box-sizing: border-box; }
.ck-home .ck-gallery {
    --ck-shot-h: min(62vw, 15rem);
    padding-block: clamp(3rem, 8vw, 6rem);
    background: var(--ck-ivory);
    color: var(--ck-black);
    scroll-margin-top: calc(var(--ck-header-height) + var(--ck-admin-offset) + 1rem);
}
.ck-home .ck-gallery__inner { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.ck-home .ck-gallery__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-gallery__title {
    margin: 0 0 1.25rem; color: var(--ck-black);
    font: 800 clamp(1.875rem, 7.5vw, 2.5rem)/1.1 'Archivo', Arial, sans-serif; letter-spacing: -.015em;
}
.ck-home .ck-gallery__lead { max-width: 32rem; margin: 0; color: var(--ck-text-dark-secondary); font: 400 1.0625rem/1.6 'Chivo', Arial, sans-serif; }

/* --- La piste ---
   `min-width: 0` n'est pas décoratif : la bande est un élément de grille, et la
   valeur automatique de min-width laisse un enfant en overflow pousser la
   colonne au lieu d'être contenu. Sans ces deux lignes, la piste s'étend à la
   largeur de ses photos et c'est la PAGE entière qui défile horizontalement. */
.ck-home .ck-gallery__band { min-width: 0; }
.ck-home .ck-gallery__track {
    min-width: 0;
    display: flex;
    gap: clamp(.75rem, 2vw, 1.25rem);
    overflow-x: auto;
    /* `auto` sur un axe rend l'autre axe défilable lui aussi : la piste
       deviendrait un conteneur vertical sans contenu à faire défiler, capable
       d'absorber les flèches haut/bas au lieu de laisser la page bouger. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;   /* ne transmet pas le geste à la page */
    scroll-snap-type: x mandatory;
    /* La barre native est masquée : les flèches et le clavier prennent le
       relais, et la piste est un point d'arrêt clavier (tabindex dans le
       gabarit) pour rester pilotable sans souris. */
    scrollbar-width: none;
}
.ck-home .ck-gallery__track::-webkit-scrollbar { display: none; }
.ck-home .ck-gallery__track:focus-visible { outline: 2px solid var(--ck-black); outline-offset: 3px; }

.ck-home .ck-gallery__shot {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 84vw;
    height: var(--ck-shot-h);
    margin: 0;
    overflow: hidden;
    background: var(--ck-anthracite);
}
/* Sans ceci, la fin de la bande est inatteignable : en mode « mandatory », le
   navigateur ne s'arrête qu'aux points d'ancrage, or le dernier bord gauche se
   situe au-delà du défilement maximal. Il ramenait donc toujours à la photo
   précédente. Ancrer la dernière photo par sa fin crée le point manquant. */
.ck-home .ck-gallery__shot:last-child { scroll-snap-align: end; }

.ck-home .ck-gallery__shot img {
    display: block;
    width: 100%;
    height: 100%;
    /* Les définitions et les cadrages varient d'une photo à l'autre : le
       recadrage par le conteneur est le seul moyen de garder une ligne de
       hauteur commune sans jamais déformer ni étirer une image. */
    object-fit: cover;
}

/* --- Flèches --- */
.ck-home .ck-gallery__nav { display: none; gap: .5rem; margin: 1.75rem 0 0; }
.ck-home .ck-gallery__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--ck-black);
    border-radius: 0;
    background: none;
    color: var(--ck-black);
    cursor: pointer;
    transition: background var(--ck-transition), color var(--ck-transition);
}
.ck-home .ck-gallery__arrow:hover { background: var(--ck-black); color: var(--ck-ivory); }
.ck-home .ck-gallery__arrow:focus-visible { outline: 2px solid var(--ck-black); outline-offset: 2px; }
.ck-home .ck-gallery__arrow[disabled] { opacity: .3; cursor: default; background: none; color: var(--ck-black); }

@media (min-width: 768px) {
    .ck-home .ck-gallery { --ck-shot-h: 15rem; }
    .ck-home .ck-gallery__title { font-size: clamp(2.25rem, 4.5vw, 3rem); }
    .ck-home .ck-gallery__nav { display: flex; }

    /* Le texte tient sa colonne, les flèches se calent à l'opposé sur la même
       ligne de base. La bande garde ainsi toute la largeur en dessous, ce qui
       est la condition pour voir deux à trois photos à la fois. */
    .ck-home .ck-gallery__intro {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem 2.5rem;
    }
    .ck-home .ck-gallery__head { max-width: 38rem; }
    .ck-home .ck-gallery__nav { margin: 0; }

    /* La bande file jusqu'au bord de l'écran : elle se lit comme une suite qui
       continue, pas comme un bloc fermé. Le débord vaut exactement la
       gouttière, donc la page ne déborde jamais horizontalement. */
    .ck-home .ck-gallery__band { margin-right: calc(-1 * var(--ck-gutter)); }
    /* `proximity` et non `mandatory` dès qu'on pilote à la souris : l'ancrage
       impératif, combiné au défilement animé des flèches, ramenait à l'ancrage
       précédent et rendait la dernière photo inatteignable. Le doigt, lui,
       garde l'ancrage impératif plus bas : c'est ce qui donne la pagination. */
    .ck-home .ck-gallery__track {
        padding-right: var(--ck-gutter);
        scroll-snap-type: x proximity;
    }

    /* Deux largeurs seulement, sur un motif de quatre : large, standard,
       standard, large. Assez pour casser l'effet catalogue, assez régulier
       pour ne pas paraître aléatoire. Les ratios 16/9 et 4/3 sont dérivés de
       la hauteur commune, donc aucune image n'est déformée. */
    .ck-home .ck-gallery__shot { width: calc(var(--ck-shot-h) * 4 / 3); }
    .ck-home .ck-gallery__shot:nth-child(4n + 1),
    .ck-home .ck-gallery__shot:nth-child(4n) { width: calc(var(--ck-shot-h) * 16 / 9); }
}

@media (min-width: 1150px) {
    .ck-home .ck-gallery { --ck-shot-h: 19rem; }
    .ck-home .ck-gallery__title { font-size: clamp(2.5rem, 3.2vw, 3.25rem); }
}

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