/* ============================================================ CARROUSEL — flèches et pagination Trois occurrences réelles, ce qui lui vaut sa place au registre (règle K4, « 3+ occurrences avant extraction ») : 1. carrousel « Événements passés » de l'accueil (relevé § 5.3) ; 2. galeries de photos (`.k-gallery-zoom`, relevé § 8.5) ; 3. pagination fléchée de « Vous aimerez aussi » sur la fiche produit (complément § 3 : chevron 24 px, padding 15 px, rayon 9999 px, bordure 2 px `#e0eaec`). DEUX CORRECTIONS AU CONTRAT : - Les flèches sont à rayon 3 px (relevé § 3.2, voix 5) : le rayon système s'applique. - La pagination est en NOIR PUR `#000000` avec l'ombre système (voix 5b) : le noir pur disparaît (marqueur daté nommé par la veille, et le DS n'écrit jamais de noir pur), remplacé par le bleu nuit de la DA. ============================================================ */ .lcdi-carousel { position: relative; } /* ============================================================ AMENDEMENT DU BLOC 3 (É4, 06/08) — LA PISTE Le composant v1 ne portait que les FLÈCHES et les PUCES : de quoi habiller un carrousel, pas de quoi en faire un. Deux sections de l'accueil en réclament un vrai (« Le Bureau LCDI », « Événements passés »), et la page « Partenaires » suivra. MÉCANIQUE : défilement natif + `scroll-snap`, jamais une piste transformée. Trois raisons, et elles sont toutes des faits : 1. sans JavaScript, la piste reste défilable au doigt et à la molette — le carrousel n'est jamais une impasse ; 2. le clavier fonctionne d'origine (la zone est focusable et défilable) ; 3. `scroll-behavior: smooth` respecte déjà `prefers-reduced-motion` par le bloc de fin de `tokens.css`. Le JS ne fait que déplacer le défilement et tenir l'état des flèches. ============================================================ */ .lcdi-carousel__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; /* la barre native ferait doublon avec les puces ; le défilement reste possible */ -webkit-overflow-scrolling: touch; } .lcdi-carousel__viewport::-webkit-scrollbar { display: none; } .lcdi-carousel__viewport:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-m); } .lcdi-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--carousel-cols, 3) - 1) * var(--gap-grid)) / var(--carousel-cols, 3)); gap: var(--gap-grid); padding-block: var(--space-2); /* laisse respirer l'ombre d'une carte soulevée sans la faire rogner */ margin: 0; list-style: none; } .lcdi-carousel__slide { scroll-snap-align: start; min-width: 0; } /* ============================================================ DENSITÉ DE PISTE — AMENDÉE AU BLOC 3b (06/08, verdict Julien : « cartes du bureau ×4 visibles d'emblée »). Elle se pose en CLASSE, et le choix n'est pas cosmétique : au bloc 3 la page passait la densité en STYLE EN LIGNE (`style="--carousel-cols:3"`). Un style en ligne bat toute règle de feuille, media query comprise — les deux replis ci-dessous (2 colonnes sous 1024, 1 sous 767) étaient donc INERTES sur cette piste, et le téléphone gardait trois cartes de 100 px. Une classe, elle, se laisse reprendre par les replis. Ordre : les modificateurs AVANT les media queries, sinon, à poids égal (0,1,0), c'est le modificateur qui gagnerait sur le repli. AMENDEMENT DU BLOC 3c (06/08) — `--dense-N` PLAFONNE, IL NE COMMANDE PLUS. Même doctrine que `--wall-cols` du mur de logos au bloc 3b : le nombre écrit dans le nom est la densité MAXIMALE de la piste, atteinte au-delà du seuil grand écran ; en dessous, la piste en sert une de moins. Motif : le site live ne sert quatre cartes de bureau qu'à partir de 1500 px (bissection au pixel sur le live, 06/08 : 1499 → 3 cartes, 1500 → 4). Une piste à quatre colonnes à 1440 rendait des cartes de 217 px là où le live en rend 319. ============================================================ */ .lcdi-carousel__track--dense-2 { --carousel-cols: 2; } .lcdi-carousel__track--dense-4 { --carousel-cols: 3; } /* --- La barre de commande (flèches hors de la piste) -------------------- Relevé sur « Le Bureau LCDI » : les deux flèches sont posées AU-DESSUS des cartes, à gauche. Sur « Événements passés » elles flanquent la piste. */ .lcdi-carousel__nav { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); } .lcdi-carousel__nav--flanc { position: absolute; inset: 0 0 auto; top: 50%; transform: translateY(-50%); justify-content: space-between; margin: 0; pointer-events: none; z-index: 2; } .lcdi-carousel__nav--flanc .lcdi-carousel__arrow { pointer-events: auto; } /* LE SEUIL GRAND ÉCRAN. Une media query ne consomme pas de `var()` : la valeur se grave ici en clair, sous son nom, et se documente dans `tokens.css` (§ Points de rupture, `--bp-grand-ecran`). Même valeur partout où elle sert — bande « Sponsors » dans `band.css` — pour qu'une seule ligne de relevé commande les deux. */ /* seuil grand écran commun : 1500px, relevé live 06/08 */ @media (min-width: 1500px) { .lcdi-carousel__track--dense-4 { --carousel-cols: 4; } } /* ============================================================ LA BARRE DE COMMANDE EN PILE — retouche 13 du bloc 3c (06/08, verdict de gate) Constat de Julien sur son téléphone : « les flèches sont mal intégrées ». RELEVÉ LIVE MOBILE (390) : le live les laisse À GAUCHE, collées — deux boutons de 26 × 38, rayon 3 px, séparés de 16 px, à 121 px du centre. VERDICT DE JULIEN, écart voulu et assumé : **centrées, avec un écart plus important entre les deux**. Les deux options sont au rapport, le gate a tranché sur celle-ci. `:not(.lcdi-carousel__nav--flanc)` : la barre FLANQUANTE (« Événements passés ») est posée en absolu de part et d'autre de la piste — la centrer la ferait se replier au milieu de l'image. Elle garde son `space-between`. ============================================================ */ @media (max-width: 1024px) { .lcdi-carousel__nav:not(.lcdi-carousel__nav--flanc) { justify-content: center; gap: var(--space-6); /* 32 px : l'écart « entre deux blocs » du rythme */ } } @media (max-width: 1024px) { .lcdi-carousel__track { --carousel-cols: 2; } } @media (max-width: 767px) { .lcdi-carousel__track { --carousel-cols: 1; gap: var(--gap-grid-tight); } } /* Replis de la piste dense : ils doivent être RÉÉCRITS pour elle, sinon le modificateur (0,1,0) tient tête au repli (0,1,0) déclaré plus haut. */ @media (max-width: 1024px) { .lcdi-carousel__track--dense-4 { --carousel-cols: 2; } } @media (max-width: 767px) { .lcdi-carousel__track--dense-4 { --carousel-cols: 1; } } /* ============================================================ PISTE DE LOGOS — ajout du bloc 5b (13/08) La page Vélo pose deux rangées de logos en UNE SEULE LIGNE défilante (6 partenaires vélo, 10 cyclosportives). Ce n'est pas la piste des cartes : une carte de personne ou d'événement porte un titre et une photo, elle réclame de la largeur ; une carte de logo n'a qu'un logo dedans, et cinq de front se lisent très bien. MÊME DOCTRINE QUE `--dense-4` (bloc 3c) : le nombre est un PLAFOND atteint au grand écran, jamais une commande. Les deux replis sont réécrits pour ce modificateur, sinon, à poids égal (0,1,0), c'est lui qui gagnerait contre les replis génériques déclarés plus haut — le piège déjà payé au bloc 3c. MESURE : à 1440, le conteneur de page rend 1242 px utiles ; cinq colonnes séparées de 32 px donnent des cartes de 223 px, pour un logo rendu 56 px de haut. Deux positions d'arrêt sur six logos, six sur dix. ============================================================ */ .lcdi-carousel__track--logos { --carousel-cols: 5; } @media (max-width: 1024px) { .lcdi-carousel__track--logos { --carousel-cols: 3; } } @media (max-width: 767px) { .lcdi-carousel__track--logos { --carousel-cols: 2; gap: var(--gap-grid-tight); } } .lcdi-carousel__arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; /* cible tactile */ height: 44px; padding: 0; background: var(--accent); color: var(--text-on-night); border: 2px solid transparent; border-radius: var(--radius-arc); /* la pagination fléchée de la fiche produit est déjà en 9999 px : on unifie dessus */ /* ÉTAT POSSÉDÉ (bloc 3, 06/08) : le thème parent pose une ombre sur tout `