/* * CSS Freetest — Planète Freeride * * Chargé uniquement sur la page Freetest (is_page('freetest-testez-comparez-choisissez')). * Contient : * — Compte à rebours OtterBlocks : fond semi-transparent blanc * — Slider logos marques (.pf-logo-marquee) : défilement infini CSS 40s, * pausé au hover/focus (accessibilité), fond turquoise * — Cards événements (.pf-card-freetest) : rendues par le bloc générique * "PF — Boucle de contenus" (pf-blocks) en layout Grille sous l'encart * "Le concept" * — FAQ Spectra (.cp-faq-freetest) : suppression bordures/ombres natives, * séparateur bas uniquement, dernier item sans bordure * * @keyframes pf-marquee-scroll : translateX 0 → -50% (2 groupes identiques * pour créer l'illusion de défilement infini sans JS) * * Correctif du 24/08/2026 (15 logos, chevauchement + conteneur trop étroit) : * — `height: 32px` remplace `max-height: 32px` sur les logos : max-height ne * fait que plafonner les images DÉJÀ plus grandes que 32px, il n'agrandit * jamais celles qui sont plus petites nativement dans leur fichier source. * Avec 15 logos de marques aux fichiers sources très hétérogènes (certains * quasi recadrés au trait, d'autres avec beaucoup de marge interne), ça * donnait des tailles apparentes totalement incohérentes d'un logo à * l'autre (ex. HEAD/ROSSIGNOL énormes à côté de DYNASTAR minuscule) — * d'où l'effet de chevauchement visuel. `height` fixe + `width:auto` + * `object-fit:contain` imposent la même hauteur à tous, quelle que soit * la taille du fichier d'origine. * — `flex-shrink: 0` sur les groupes ET sur chaque image : empêche tout * tassement/chevauchement si un ancêtre venait à contraindre la largeur * disponible (le calcul `width: max-content` du track ne suffit pas à lui * seul à garantir qu'aucun enfant ne rétrécit). * — Valeurs de repli en dur (`, 48px` / `, 24px`) sur les `gap`/`padding-right` * qui utilisent des variables CSS de thème (`--wp--preset--spacing--*`) : * si la variable n'est pas définie dans ce contexte de rendu (shortcode * PHP hors éditeur de blocs), le gap tombait à 0 → logos collés sans * espace, renforçant l'effet de chevauchement. * — Bandeau volontairement mis en pleine largeur (`100vw` + marges négatives, * même technique que le bandeau USP de sejours-archive.css) pour ne plus * dépendre de la largeur du conteneur WordPress parent. * * Responsive : * — @media (prefers-reduced-motion: reduce) : animation stoppée (accessibilité RGAA) * — @media (max-width: 763px) : logos réduits à 24px, durée animation 30s * * Enqueued via pf-loader.php — condition is_page('freetest-testez-comparez-choisissez'). * Migré depuis Code Snippets (ID 29) le 2026-07-01. * Ref. PR2602-0009 */ /* ================================================ PAGE freetest-testez-comparez-choisissez - Planète Freeride ================================================ */ /* Compte à rebour */ .cp-countdown .otter-countdown__display-area { background-color: #FFFFFF80; } /* section infinite logo slider */ .pf-logo-marquee { overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--wp--preset--color--custom-pf-turquoise); padding: var(--wp--preset--spacing--medium, 24px) 0; } .pf-logo-marquee__track { display: flex; align-items: center; width: max-content; animation: pf-marquee-scroll 40s linear infinite; } .pf-logo-marquee__group { display: flex; align-items: center; flex-shrink: 0; gap: var(--wp--preset--spacing--x-large, 48px); padding-right: var(--wp--preset--spacing--x-large, 48px); } .pf-logo-marquee__group img { display: block; flex-shrink: 0; height: 32px; width: auto; max-width: none; object-fit: contain; } @keyframes pf-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .pf-logo-marquee:hover .pf-logo-marquee__track, .pf-logo-marquee:focus-within .pf-logo-marquee__track { animation-play-state: paused; } /* ================================================ CARDS ÉVÉNEMENTS FREETEST — bloc "PF — Boucle de contenus" ================================================ Cards utilisées par le bloc générique pf-blocks (templates/card-freetest.php) quand il boucle sur le CPT freetest — ex. sous l'encart "Le concept" pour présenter les prochaines éditions. Réutilise la structure commune .pf-card / .pf-card-body / .pf-card-footer (cf. global.css) mais avec sa propre classe .pf-card-freetest plutôt que .pf-card-sejour : cette dernière a une largeur fixe (280px, flex-shrink:0) pensée pour un slider horizontal. Ici la card doit occuper toute la largeur de sa colonne de grille — layout retenu pour 2 événements plutôt qu'un slider/carrousel (cf. échange du 28/08/2026) : avec seulement 2 cards, un slider ajoute des flèches, du JS et de la complexité ARIA pour un contenu qui tient déjà entièrement à l'écran — pas de gain UX, à l'inverse d'un coût en accessibilité et en écoconception (RGESN 4.5 — composants natifs privilégiés). La grille 2 colonnes (bloc "PF — Boucle de contenus", réglage Présentation = Grille, Colonnes = 2) montre les deux événements sans aucune interaction requise, sans JS additionnel. Couleurs pensées pour un fond clair (comme le reste de la page Freetest hors bandeau logos/hero) — même traitement que le correctif déjà posé sur .pf-card-sejour dans sejour.css pour le même contexte. Si la section "Le concept" a in fine un fond sombre, retirer ces surcharges de couleur pour retrouver le style beige/anthracite par défaut de global.css. Ref. demande du 28/08/2026. Correctif du 28/08/2026 (cartes de hauteurs visiblement différentes en rendu réel) : .pf-card-freetest ne reprenait QUE la couleur/bordure de .pf-card-sejour, pas sa mise en page flex (display:flex; flex-direction: column; gap). Un est inline par défaut — sans display:flex explicite, image/titre/footer s'empilaient sans alignement fiable ni footer calé en bas, d'où deux cards de hauteur inégale dès que les titres des deux événements ne font pas le même nombre de lignes. Ajout de la mise en page flex (comme .pf-card-sejour) + `height:100%` pour que chaque card s'étire sur toute la hauteur de sa cellule de grille (comportement par défaut de CSS Grid, `align-items:stretch`) + `margin-top:auto` sur le footer pour que la ligne prix/flèche reste calée en bas quelle que soit la longueur du titre au-dessus. ================================================ */ .pf-card-freetest { display: flex; flex-direction: column; gap: 21px; width: 100%; height: 100%; border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite); border-radius: 2px; padding: 26px 21px 13px; text-decoration: none; } .pf-card-freetest .pf-card-title, .pf-card-freetest .pf-card-prix, .pf-card-freetest .pf-card-arrow { color: var(--wp--preset--color--custom-pf-bleu-anthracite); } .pf-card-freetest .pf-card-title { white-space: normal; /* titres d'événement potentiellement plus longs qu'un nom de séjour */ } /* Demande du 25/09/2026 : titre et prix des cards Freetest en taille "medium" du thème. */ .pf-card-freetest .pf-card-title, .pf-card-freetest .pf-card-prix { font-size: var(--wp--preset--font-size--medium); } .pf-card-freetest .pf-card-sep { border-top-color: var(--wp--preset--color--custom-pf-bleu-anthracite); } .pf-card-freetest .pf-card-footer { margin-top: auto; /* calage en bas, même si le titre au-dessus fait 1 ou 2 lignes */ } .pf-card-freetest:hover .pf-card-arrow { background: var(--wp--preset--color--custom-pf-bleu-anthracite); color: var(--wp--preset--color--custom-pf-beige); } .pf-card-freetest__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; } .pf-card-freetest__meta-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--wp--preset--font-family--satoshi-variable); font-size: var(--wp--preset--font-size--small); color: rgba(27, 47, 55, 0.75); } .pf-card-freetest__meta-item svg { flex-shrink: 0; color: var(--wp--preset--color--custom-pf-orange); } /* FAQ */ .cp-faq-freetest .uagb-faq-item { border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.12); box-shadow: none; padding-bottom: 16px; margin-bottom: 16px; } .cp-faq-freetest .uagb-faq-item:last-child { border-bottom: none; margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .pf-logo-marquee__track { animation: none; } } @media (max-width: 763px) { .pf-logo-marquee__group img { height: 24px; } .pf-logo-marquee__track { animation-duration: 30s; } }