html { scroll-behavior: smooth; } body { font-family: "Inter", sans-serif; color: #211315; } /* ---------- Scrollbars natives - thème projet ---------- Style appliqué globalement à la fenêtre + à tout conteneur scrollable (overflow:auto/scroll). Les couleurs reprennent les tokens du design : - thumb au repos : surface-border (#D9D9D9), discret sur fond clair - thumb au hover : ink-500 (#757575), plus contrasté pour l'interaction - thumb actif : brand (rgb(var(--brand))), retour visuel cohérent au drag - track : transparent (le fond du conteneur transparaît) Les règles plus spécifiques en aval (`.scroll-snap::-webkit-scrollbar` masquée pour les carrousels, `.media-carousel-track` idem, surcharge à 6px sur `.multiselect-options`) l'emportent par spécificité de classe et restent intactes. Ne rien ajouter ici sans vérifier qu'on ne casse pas ces overrides. Note WebKit : `background-clip: padding-box` + `border: 2px solid transparent` crée un padding visuel autour du thumb (10px de piste, 6px de thumb effectif) pour ne pas coller aux bords - pattern classique des scrollbars macOS-like. */ html { scrollbar-width: thin; /* Firefox : barre fine */ scrollbar-color: #D9D9D9 transparent; /* Firefox : thumb / track */ } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #D9D9D9; border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; transition: background-color 0.15s ease; } ::-webkit-scrollbar-thumb:hover { background: #757575; background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: rgb(var(--brand)); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Variante "fine" sur les panels overlay (multiselect/autocomplete/datepicker) et toute zone interne où la 10px ferait trop lourd. Spécificité de classe l'emporte sur les règles globales ci-dessus. */ .multiselect-panel ::-webkit-scrollbar, .datepicker-panel ::-webkit-scrollbar { width: 6px; height: 6px; } /* Header : transition de repli au scroll vers le bas */ #site-header, #list-filters-bar, #provider-anchor-bar { transition: transform 0.3s ease; will-change: transform; } #site-header.is-hidden { transform: translateY(-100%); } /* Header jaune quand on est tout en haut - posé par subs.js sur public/subs.php uniquement (classe jamais ajoutée ailleurs → règle inerte sur les autres pages). Sélecteur id+classe : l'emporte sur l'utilitaire `.bg-white` du header (header.php) sans !important. La transition bg/bordure surcharge celle (transform only) ci-dessus pour #site-header ; #list-filters-bar conserve la sienne. */ #site-header { transition: transform 0.3s ease, background-color 0.25s ease, border-color 0.25s ease; } #site-header.subs-header-yellow { background-color: #F4F4A8; /* = accent (jaune unique) */ border-bottom-color: transparent; } /* Barres sticky top-[85px] sous le header (filtres de list.php, ancres de provider.php). Quand le header se replie, on translate la barre de -85px (hauteur du header) pour qu'elle remonte se coller au top et qu'il n'y ait pas de trou visuel à la place du header. */ #list-filters-bar.header-collapsed, #provider-anchor-bar.header-collapsed { transform: translateY(-85px); } /* Nav d'ancres de la barre provider : scrollable horizontalement si elle déborde (systématique en mobile, possible en md serré) mais sans scrollbar visible - la 10px globale ferait un trait disgracieux en plein milieu de la barre. PAS de `.scroll-snap` ici : cette classe embarque tout le système carrousel (drag souris, snap mandatory) qui avalerait les clics sur les liens. */ #provider-anchor-bar nav { -ms-overflow-style: none; scrollbar-width: none; } #provider-anchor-bar nav::-webkit-scrollbar { display: none; } /* Barre de filtres sticky de subs.php - même fonctionnement que #list-filters-bar : fixée sous le header (top: 85px, z-40 < header z-50) → jamais recouverte quand le header réapparaît. Quand le header se replie (`#site-header.is-hidden`), elle remonte se coller au top via `:has()` (même approche que les sidebars du projet). L'apparition/disparition au scroll (sous la barre de filtres principale) est pilotée par `.is-visible` dans subs.js. IMPORTANT : on anime `top` (et NON `transform`) pour la remontée - un `transform` créerait un containing block qui casserait le positionnement position:fixed des dropdowns multiselect/autocomplete contenus dans la barre. */ #subs-sticky-bar { position: fixed; top: 85px; left: 0; right: 0; z-index: 40; opacity: 0; pointer-events: none; transition: top 0.3s ease, opacity 0.25s ease; } #subs-sticky-bar.is-visible { opacity: 1; pointer-events: auto; } body:has(#site-header.is-hidden) #subs-sticky-bar { top: 0; } @media (prefers-reduced-motion: reduce) { #subs-sticky-bar { transition: none; } } /* Bug d'empilement mobile : un panel multiselect/autocomplete ouvert DANS la barre sticky reste piégé dans son contexte d'empilement (z-index:40), alors que l'overlay mobile (#multiselect-overlay) est rattaché au à z-55 → le voile passe par-dessus le bottom-sheet. Tant qu'un panel y est ouvert (`.multiselect-panel` sans `.hidden`, chrome partagée par le multiselect ET l'autocomplete), on rehausse la barre au-dessus du voile pour que son panel (z-60) ressorte par-dessus. */ #subs-sticky-bar:has(.multiselect-panel:not(.hidden)) { z-index: 60; } /* Cas inverse (group.php) : le filtre « région » vit inline dans le flux - pas dans la modale plein écran comme list.php (où `body.filters-modal-open` rehausse le panel à z-95). Son bottom-sheet mobile ouvert reste donc à z-60, SOUS la barre comparateur (#list-mobile-bar, z-70) qui flotte alors par-dessus le panel et son voile (#multiselect-overlay, z-55). Tant qu'un panel est ouvert, on fait repasser la barre sous le voile. Sans effet sur list.php / user-list-booking.php : leurs multiselects vivent dans une modale plein écran qui masque déjà la barre. */ body:has(.multiselect-panel:not(.hidden)) #list-mobile-bar { z-index: 50; } /* Bannière pub sticky dans la sidebar gauche (list.php, desktop ≥ lg). top par défaut = header(85) + filterbar(76) + air(15) = 176px. Quand le header se replie (`#list-filters-bar.header-collapsed`), la filterbar remonte se coller au top → on baisse le top de la pub à filterbar(76) + air(15) = 91px pour qu'elle suive. Transition alignée sur les 0.3s ease du header pour éviter un saut visuel. */ @media (min-width: 1024px) { #sidebar-ad { top: 176px; transition: top 0.3s ease; } body:has(#list-filters-bar.header-collapsed) #sidebar-ad { top: 91px; } } /* provider.php - Sidebar droite (desktop ≥ lg) sticky top-[160px] (= header 85 + barre d'ancres 60 + air 15 ; barre = py 10×2 + boutons 40). Quand le header se replie (`#site-header.is-hidden`), la barre d'ancres remonte se coller au top → on baisse le top de la sidebar à barre(60) + air(15) = 75px pour qu'elle suive. Transition alignée sur les 0.3s ease du header pour éviter un saut visuel. */ @media (min-width: 1024px) { #provider-sidebar { transition: top 0.3s ease; } body:has(#site-header.is-hidden) #provider-sidebar { top: 75px; } } /* Bug d'empilement desktop : `position: sticky` crée un contexte d'empilement à lui seul (même sans z-index). Le panel d'un multiselect / datepicker ouvert dans la sidebar (position:fixed, z-60) y reste donc piégé et se peint au rang de la sidebar (z auto = 0) dans le contexte de la page : les overlays de la mosaïque galerie (« Afficher la galerie », boutons vidéo / 360°, z-[2]) passaient par-dessus le calendrier quand celui-ci s'ouvrait vers le haut. Même remède que #subs-sticky-bar : tant qu'un panel y est ouvert, on rehausse la sidebar au niveau du panel (60), au-dessus du header (z-50) et de la barre d'ancres (z-40) que le calendrier peut aussi chevaucher. Sans effet sous lg (sidebar `hidden`). */ #provider-sidebar:has(.multiselect-panel:not(.hidden)) { z-index: 60; } /* blog-list.php - Sidebar blog (desktop ≥ lg) : le bloc "Événements à venir" → "À ne pas rater" est sticky top-[100px] (= header 85 + air 15). Même logique que #provider-sidebar : quand le header se replie (`#site-header.is-hidden`), on baisse le top à 15px pour qu'il suive et reste collé en haut. Transition alignée sur les 0.3s ease du header. */ @media (min-width: 1024px) { #blog-sidebar-sticky { transition: top 0.3s ease; } body:has(#site-header.is-hidden) #blog-sidebar-sticky { top: 15px; } } @media (prefers-reduced-motion: reduce) { #site-header, #list-filters-bar, #provider-anchor-bar, #sidebar-ad, #provider-sidebar, #blog-sidebar-sticky { transition: none; } } /* list.php - Toggle Liste/Grille des cards lieu. Le markup natif (`flex flex-col gap-[15px]` + chaque card en `flex-col md:flex-row` avec média à 310px à gauche) est la vue Liste par défaut. Quand le toggle pose `data-view="grid"` sur `#list-cards` (cf. section 16 de main.js), on bascule en grille 3 colonnes ≥ md et on réinitialise les cards en empilement vertical (rendu identique au mobile). Spécificité (1 id + 1 attr + 1 class = 0,1,2,1) bat les utilitaires Tailwind `md:*` (0,0,1,0), donc pas besoin de `!important`. Pas d'override < md : la vue mobile reste inchangée. */ /* Ombre sur chaque card de résultat à TOUTES les tailles (mobile inclus). Déclarée hors media-query pour couvrir le mobile ; les bascules list/grille ≥ md ne re-déclarent donc plus l'ombre. (Scopé à `#list-cards` pour ne pas toucher la card du popup Leaflet.) */ #list-cards .list-card { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* Rendu paresseux : hors écran, la card sort entièrement du style/layout/paint (et ses animations sont suspendues) - indispensable quand l'infinite scroll accumule des centaines de cards dans le DOM. `auto` mémorise la taille réellement rendue ; 300px n'est que l'estimation de hauteur donnée à la scrollbar avant le premier rendu (entre ~240px en vue liste desktop et ~430px en vue grille/mobile). Même scope que l'ombre : la card du popup Leaflet reste rendue normalement. */ content-visibility: auto; contain-intrinsic-size: auto 300px; } @media (min-width: 768px) { /* Mode Liste - card blanche définie (fond + ombre + coins arrondis, comme la grille). Fond blanc + padding UNIQUEMENT sur le contenu : la photo reste en plein cadre, collée aux bords gauche/haut/bas de la card (jamais encadrée de blanc) et remplit toute la hauteur (align-items:stretch via height:auto) ; ses coins arrondis sont gérés par l'overflow-hidden de la card, donc media-frame remis à border-radius 0. Gap entre cards à 18px (le `gap-[15px]` du markup convient au mobile mais semblait serré en desktop avec les cards horizontales). */ #list-cards[data-view="list"] { gap: 18px; } #list-cards[data-view="list"] .list-card { background-color: #fff; border-radius: 15px; } #list-cards[data-view="list"] .list-card-media { padding: 0; height: auto; } #list-cards[data-view="list"] .list-card-media-frame { border-radius: 0; } #list-cards[data-view="list"] .list-card-content { padding: 20px; } /* Mode Grille - 3 colonnes, cards verticales (rendu identique au mobile). */ #list-cards[data-view="grid"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } #list-cards[data-view="grid"] .list-card { flex-direction: column; border-radius: 15px; } #list-cards[data-view="grid"] .list-card-media { width: 100%; height: 230px; padding: 0; } #list-cards[data-view="grid"] .list-card-media-frame { border-radius: 12px 12px 0 0; } #list-cards[data-view="grid"] .list-card-content { padding: 15px; } /* Séparateur « sans budget renseigné » (list.php, priorisation budget) : pleine largeur de la grille - en vue Liste (flex colonne), rien à faire. */ #list-cards[data-view="grid"] [data-budget-separator] { grid-column: 1 / -1; } } /* CTA de card lieu (render_venue_card) - libellé par défaut = prix (« Dès X € ») ou « Contacter » si pas de prix ; au survol de TOUTE la card (`.list-card:hover`), il devient « Découvrir → ». Les deux libellés sont empilés dans la MÊME cellule de grille : la largeur du bouton = le plus large des deux, donc aucun saut de largeur au survol (simple cross-fade d'opacité). Le `:focus-visible` sur le bouton garde le swap au clavier. NB : `.venue-cta` impose le display (grid) - le `` ne porte donc pas d'`inline-flex`. Mobile (< md) : pas de survol - le CTA affiche « Découvrir → » en permanence et le prix est rendu en clair à gauche de la ligne (render_venue_card / buildPopupHtml main.js §16, place libérée par le comparateur desktop only). Le libellé prix reste dans l'arbre d'accessibilité (pattern sr-only, pas de display:none) : le lien garde son nom (« Dès X € » / « Contacter ») et le bouton se dimensionne sur « Découvrir → » seul. */ .venue-cta { display: inline-grid; place-items: center; } .venue-cta > .venue-cta-rest, .venue-cta > .venue-cta-hover { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.15s ease; } .venue-cta > .venue-cta-hover { opacity: 0; } .list-card:hover .venue-cta > .venue-cta-rest, .venue-cta:focus-visible > .venue-cta-rest { opacity: 0; } .list-card:hover .venue-cta > .venue-cta-hover, .venue-cta:focus-visible > .venue-cta-hover { opacity: 1; } @media (max-width: 767px) { .venue-cta > .venue-cta-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .venue-cta > .venue-cta-hover { opacity: 1; } } /* Chip type de prestataire (déplacé de middle/user/common.css - composant devenu global). Tag neutre (icône + libellé : Lieu, DJ, Traiteur…) rendu par render_provider_type_chip() ou en JS (favourite.js) à côté du nom de l'établissement - cartes de l'inbox, en-tête de user-booking.php, cards favoris et cards « Découvrez notre sélection » (render_home_suggestions). Gris volontairement discret : il qualifie sans concurrencer les badges colorés (statut, promo). */ .provider-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 9999px; background: #F5F5F5; /* surface-light */ color: #757575; /* ink-500 */ font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; } .provider-chip i { font-size: 10px; } /* Variante fond blanc : pour les cards posées sur une section bg-surface-light (ex. carrousel cross-trade de provider.php), où le gris #F5F5F5 du chip se fondrait dans le fond. */ .provider-chip--white { background: #fff; } /* Masque la scrollbar tout en gardant le scroll (overflow simple, sans carrousel). Utilisé p.ex. sur la barre de catégories du blog (public/blog-list.php). */ .no-scrollbar { -ms-overflow-style: none; /* IE/Edge legacy */ scrollbar-width: none; /* Firefox */ } .no-scrollbar::-webkit-scrollbar { display: none; /* Chrome/Safari/WebKit */ } /* Drag-to-scroll souris (cf. main.js §4c) : curseur grab + pas de sélection de texte pendant le glissement. Le scroll tactile/trackpad reste natif. */ [data-drag-scroll] { cursor: grab; user-select: none; -webkit-user-select: none; } [data-drag-scroll].is-grabbing { cursor: grabbing; } /* Cache les scrollbars sur les carrousels */ .scroll-snap { scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .scroll-snap::-webkit-scrollbar { display: none; } .scroll-snap > * { scroll-snap-align: start; } .scroll-snap.is-dragging { cursor: grabbing; scroll-snap-type: none; } .scroll-snap.is-dragging a, .scroll-snap.is-dragging img { pointer-events: none; } /* Pendant l'animation de snap JS, on désactive le scroll-snap natif pour éviter les conflits */ .scroll-snap.is-snapping { scroll-snap-type: none; } /* Desktop : cards CENTRÉES quand elles ne remplissent pas la piste (défaut de TOUS les carrousels .scroll-snap), alignement standard dès que ça déborde - le mot-clé `safe` bascule en flex-start en débordement, sans quoi le début du carrousel passerait à scrollLeft négatif et deviendrait inatteignable au scroll (cf. .photo-viewer-thumbs, même pattern). Posée en :where() donc à spécificité 0 : n'importe quel utilitaire Tailwind `justify-*` du markup la bat malgré l'ordre des feuilles (styles.css après tailwind.css) - c'est ainsi qu'une piste s'exclut du centrage avec un simple `md:justify-start` / `lg:justify-start`. Exclues à ce jour : celles qui basculent en COLONNE sur desktop (#subs-packs, #subs-boost, #sidebar-sponso, la piste des labels de fiche) et celles qui doivent rester alignées sur le contenu qui les précède (#reviews-photos-carousel et #reviews-modal-photos-carousel = miniatures des photos d'avis, #actions-carousel = actions du dashboard internaute) et TOUTES les pistes de la fiche publique provider.php (#promos-carousel, #accommodations-carousel, #menus-carousel, #access-carousel, #rse-carousel, #prestataires, #similaires - décision du 2026-09-10 : sur la fiche, une piste incomplète reste calée à gauche sous son titre, comme les miniatures d'avis). .comparator-track, elle, reste collée à gauche par sa propre règle (alignement sur sa colonne de libellés). Mobile exclu : la piste y est full-bleed (marges négatives + padding de 15px calibrés sur le .container-x), l'alignement à gauche reste le bon. */ @media (min-width: 768px) { :where(.scroll-snap) { justify-content: safe center; } } /* Mobile : carrousels en pleine largeur (collés aux bords de l'écran) tout en gardant une marge gauche/droite sur la première / dernière carte. On annule les 15px de padding du .container-x parent via des marges négatives, et on réinjecte ce 15px en padding + scroll-padding pour le snap. */ @media (max-width: 767px) { .scroll-snap { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; scroll-padding-left: 15px; scroll-padding-right: 15px; } } /* Hero gradient overlay */ .hero-overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.65) 100% ); } /* Animations subtiles */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.7s ease-out both; } /* Ligne d'étoiles */ .star { color: #ffb800; } /* Bouton principal */ .btn-primary { background: rgb(var(--brand)); color: #fff; font-weight: 700; padding: 14px 28px; border-radius: 12px; } .btn-primary:hover { background: rgb(var(--brand-dark)); } /* Bouton secondaire / contour */ .btn-ghost { background: #f2f3f5; color: #0a0a0a; font-weight: 500; padding: 14px 28px; border-radius: 12px; } .btn-ghost:hover { background: #e6e7ea; } /* Carte "cliquable en entier" : le est sur le titre, mais s'étire sur toute la carte */ .card-link { position: static; transition: color 0.15s ease; } .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .card-link:hover { color: rgb(var(--brand)); } /* Les contrôles dans la carte (favori, badge) doivent rester cliquables au-dessus du lien fantôme. On ne fixe pas `position` ici : chaque contrôle définit déjà son positionnement (absolute) via Tailwind. */ .card-overlay { z-index: 2; } /* Bouton favori actif (cf. main.js §25 : ajoute `.is-faved` quand la fiche est dans le localStorage `1001salles:favourites`). Le signet passe en plein (fa-solid, swap JS) et en couleur brand. Spécificité (0,2,0) > `.text-ink-900` (0,1,0) pour gagner sur la couleur de base du bouton. */ [data-fav-toggle].is-faved { color: rgb(var(--brand)); } /* Lazy-loading visuel : fond gris + spinner centré tant que l'image n'est pas chargée */ .img-loading { background: #ededed; } .img-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid #d4d4d4; border-top-color: #757575; border-radius: 50%; animation: img-spin 0.8s linear infinite; pointer-events: none; z-index: 0; } .img-loading.is-loaded::after { display: none; } /* Spinner activé uniquement à l'approche du viewport : main.js §1 pose .is-spinning via un IntersectionObserver partagé. Sans ce garde, chaque image lazy jamais téléchargée (slides cachées des carrousels, cards hors écran) garderait une animation infinie active - à ~200 spinners, le main thread sature. */ .img-loading:not(.is-spinning)::after { display: none; } @keyframes img-spin { to { transform: rotate(360deg); } } /* Placeholder quand l'image échoue à charger. Également réutilisé TEL QUEL (span statique .img-loading.is-loaded.has-error) par render_image_placeholder() (functions.php) pour les vignettes SANS photo : les deux cas doivent rendre exactement pareil - ne pas diverger. */ .img-loading.has-error > img { opacity: 0; } .img-loading.has-error::before { content: "\f03e"; /* fa-image */ /* Le projet embarque Font Awesome 6 Pro (cf. private/views/header.php), pas Free. Utiliser le mauvais nom de famille rendait le caractère privé U+F03E en "tofu". */ font-family: "Font Awesome 6 Pro"; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #b0b0b0; font-size: 32px; pointer-events: none; z-index: 0; } /* Petit avatar (render_user_avatar, avatar de l'inbox .booking-card-avatar, vignette d'en-tête de conversation user-booking.php) : le spinner générique (28px) et l'icône d'erreur (32px) déborderaient d'un cadre de 40-52px - ramenés à l'échelle du composant. */ .avatar-circle.img-loading::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-width: 2px; } .avatar-circle.img-loading.has-error::before { font-size: 16px; } /* Encart pub (render_ad) dont l'image est en erreur - fichier absent du serveur média : l' cassée n'a quasiment pas de hauteur (le lien est en h-auto), le placeholder générique ci-dessus s'écrasait en barre plate. On impose un ratio de bannière au lien pour que le bloc gris + icône garde une taille décente. initImageLoading (main.js §1) pose .has-error sur le parent positionné de l' = le [data-ad-click] lui-même (render_ad émet l' en enfant direct du lien ; le chemin n'existe que si le sibling .webp local existe - donc jamais en erreur). Concerne toutes les pages servies par render_ad : provider.php (sidebar + galerie overlay), blog-list, blog-single, list.php (sidebar desktop + bannière mobile). */ [data-ad-click].has-error { aspect-ratio: 3 / 2; } /* ============================================================ Tooltip global (.app-tooltip - main.js §28) ------------------------------------------------------------ Bulle unique injectée dans , affichée au survol/focus des boutons et liens portant un `title` (transféré en data-tooltip par le JS - remplace le tooltip natif des boutons d'action à icône seule : Partager, favoris, croix de retrait…). position:fixed posée par le JS ; flèche centrée sur la CIBLE via --tooltip-arrow-x (la bulle peut être clampée au bord du viewport). z-index au-dessus des modales/viewers (z-80) et des barres flottantes (z-70) : un bouton à tooltip peut vivre dans une modale ouverte. */ .app-tooltip { position: fixed; z-index: 140; max-width: 260px; padding: 7px 11px; border-radius: 8px; background: #0A0A0A; /* ink-900 */ color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35; pointer-events: none; /* jamais un obstacle au curseur */ opacity: 0; transform: translateY(3px); transition: opacity 120ms ease, transform 120ms ease; } .app-tooltip.is-visible { opacity: 1; transform: translateY(0); } .app-tooltip::after { content: ""; position: absolute; top: 100%; left: var(--tooltip-arrow-x, 50%); margin-left: -5px; border: 5px solid transparent; border-top-color: #0A0A0A; } /* Bulle placée SOUS la cible (pas de place au-dessus) : flèche retournée. */ .app-tooltip.is-below { transform: translateY(-3px); } .app-tooltip.is-below.is-visible { transform: translateY(0); } .app-tooltip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0A0A0A; } /* Carte "suggestion" (régions / types de lieu / villes) - carré sur mobile et desktop */ .suggest-card { position: relative; isolation: isolate; flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; width: 240px; height: 240px; padding: 12px; border-radius: 20px; overflow: hidden; scroll-snap-align: start; } /* Desktop : 5 cartes pleines + aperçu de la 6ème dans .container-x (1220px inner, gap 20px). 5 × 210 + 5 × 20 = 1150 → reste ~70px pour amorcer la 6ème carte. */ @media (min-width: 1024px) { .suggest-card { width: 210px; height: 210px; } } .suggest-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } /* Badge = lien réel (SEO) dans un

; le ::after étend la zone cliquable à toute la carte. display: block requis : dans le

, le lien n'est plus un flex item (max-width/ellipsis). */ .suggest-card-badge { display: block; position: static; max-width: 100%; background: #F4F4A8; /* = accent (jaune unique) */ color: #0a0a0a; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; transition: background-color 0.18s ease, box-shadow 0.18s ease; } .suggest-card:hover .suggest-card-badge, .suggest-card-badge:hover, .suggest-card-badge:focus-visible { background: #D7D794; /* = accent-hover (jaune unique assombri) */ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14); } .suggest-card-badge::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Variante multi-lignes (option badge_wrap de render_suggest_carousel) : badges qui portent une PHRASE et non un libellé court - cards « À chaque besoin, une solution » de la homepage (« Arbre de Noël dans une salle de spectacle »…), que l'ellipsis sur une ligne de la card 210px amputerait. 3 lignes max, puis ellipsis. Réservée aux carrousels qui en font la demande : les libellés courts (régions, villes, types de lieu) gardent la ligne unique. */ .suggest-card-badge--wrap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; white-space: normal; line-height: 17px; padding: 6px 12px; } /* Description optionnelle (champ desc de render_suggest_carousel - cards « type de lieu » de la homepage) : texte blanc sous le badge, lisible sur photo ET sur le placeholder gris grâce au dégradé sombre bas de card. Le scrim suit l'img dans le DOM : même z-index négatif = peint au-dessus d'elle, sous le contenu statique (badge + texte). */ .suggest-card-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.30) 55%, rgba(0, 0, 0, 0) 100%); z-index: -1; pointer-events: none; } .suggest-card-desc { margin-top: 6px; color: #fff; font-size: 12px; line-height: 1.35; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* Bouton arrondi navigation carrousel - masqué en mobile */ .nav-btn { width: 44px; height: 44px; border-radius: 9999px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); display: none; align-items: center; justify-content: center; color: #0a0a0a; transition: opacity 0.2s ease, box-shadow 0.2s ease; } @media (min-width: 768px) { .nav-btn { display: inline-flex; } } .nav-btn:not(:disabled):hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .nav-btn:disabled { opacity: 0; pointer-events: none; } /* ---------- Media carousel (intra-card) ---------- Carrousel d'images à l'intérieur d'une vignette de card. UX : - Desktop : flèches prev/next visibles au hover du carrousel, masquées quand on est au bord (attribut [hidden] posé par main.js section 13). Pas de dots affichés. - Mobile : pas de flèches, dots affichés en bas centre, swipe tactile natif via scroll-snap mandatory. Le wrapper parent direct DOIT être `position: relative` et `overflow: hidden` avec les dimensions souhaitées de la vignette : le .media-carousel s'y ancre en inset:0. Empilement (important) : la .media-carousel-track est en z-index:2 pour passer AU-DESSUS du .card-link::after (z-index:1) - c'est ce qui permet au swipe tactile natif de fonctionner même quand la photo est couverte par la zone cliquable de la card. Un click handler JS forward le tap simple vers le .card-link pour préserver la navigation. À ajouter via le helper PHP render_media_carousel() - voir private/functions.php. */ .media-carousel { position: absolute; inset: 0; z-index: 2; } .media-carousel-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -ms-overflow-style: none; scrollbar-width: none; /* pan-y : permet au scroll vertical de la page de passer quand le doigt commence sur la track ; le swipe horizontal est ensuite intercepté en JS (preventDefault sur touchmove non-passif) pour contrôler le snap. */ touch-action: pan-y; /* Le tap sur la track forwarde au .card-link parent (cf. main.js section 13), donc on garde le curseur "main" pour signaler la nature cliquable, comme sur le reste de la card. Les boutons flèches override avec leur cursor:pointer natif. */ cursor: pointer; } .media-carousel-track::-webkit-scrollbar { display: none; } /* Pendant le swipe JS et l'animation de snap, on désactive le scroll-snap natif pour éviter que le navigateur ne saute sur une slide pendant qu'on contrôle scrollLeft programmatiquement (sinon : conflit visible = micro-saccades). */ .media-carousel-track.is-dragging, .media-carousel-track.is-snapping { scroll-snap-type: none; } .media-carousel-slide { /* position:relative pour servir de containing block au spinner .img-loading que la section 1 de main.js applique sur le parent de chaque . */ position: relative; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; } .media-carousel-slide img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } /* Flèches prev/next - masquées par défaut, visibles au hover du carrousel. Posées au-dessus de la track (ordre DOM → empilement naturel). */ .media-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 9999px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; color: #0a0a0a; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, background-color 0.18s ease; } .media-carousel-nav--prev { left: 10px; } .media-carousel-nav--next { right: 10px; } .media-carousel-nav[hidden] { /* Indispensable : sinon le pseudo-bouton resterait dans le flux et le hover afficherait une opacité 1 sur un bouton "désactivé" (cf. fin de carrousel). */ display: none !important; } .media-carousel-nav:hover { background: #fff; } /* Hover uniquement sur les périphériques qui ont un vrai survol (souris / trackpad). Sur tactile, le hover sticky ferait apparaître les flèches après le moindre tap. */ @media (hover: hover) and (pointer: fine) { .media-carousel:hover .media-carousel-nav:not([hidden]) { opacity: 1; pointer-events: auto; } } /* Dots de pagination - mobile uniquement (sur desktop, la nav se fait aux flèches). Au-delà de 7 photos, fenêtre glissante façon Instagram : la strip interne translateX pour garder le dot d'ancrage centré dans une fenêtre clipée de 7 dots, et les dots aux extrémités de la fenêtre rétrécissent (.is-edge-sm puis .is-edge-xs). Ces classes sont posées par main.js §13. Quand l'état actif tombe sur un edge, .is-active prime et le dot reste à pleine taille (cf. selecteur combiné plus bas). */ .media-carousel-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); pointer-events: none; overflow: hidden; /* 1px de chaque côté pour laisser respirer le `transform: scale(1.2)` du dot actif (qui étend 0.5px hors de sa box de 5px) quand il tombe au bord de la fenêtre - sinon le clip de `overflow: hidden` rogne le dot actif aux extrémités (idx = 0 ou dernière photo). Padding box → l'`overflow` clippe à 67px au lieu de 65px. */ padding: 0 1px; } /* Outer width 67px = content area 65px + padding 2px. Tailwind Preflight applique `box-sizing: border-box` partout, donc width inclut le padding - il faut bien 67px en outer pour que le content soit à 7 dots × 5 + 6 gaps × 5 = 65px. La strip interne (display:flex) garde sa largeur naturelle et est clipée par le parent dès count > 7. */ .media-carousel-dots.has-sliding-window { width: 67px; } .media-carousel-dots-strip { display: flex; align-items: center; gap: 5px; transition: transform 0.2s ease; will-change: transform; } .media-carousel-dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 9999px; background: rgba(255, 255, 255, 0.7); transition: transform 0.2s ease, background-color 0.2s ease; } .media-carousel-dot.is-active { background: #fff; transform: scale(1.2); } /* Rétrécissement progressif aux bords de la fenêtre (uniquement côté qui a du contenu "au-delà" - JS gère le fadeLeft/fadeRight pour ne pas rétrécir le côté ancré). */ .media-carousel-dot.is-edge-sm { transform: scale(0.7); } .media-carousel-dot.is-edge-xs { transform: scale(0.4); } /* L'actif prime sur les classes de bord : si l'index courant est au bord de la fenêtre (galerie aux extrémités), le dot doit rester à pleine taille pour rester lisible. */ .media-carousel-dot.is-active.is-edge-sm, .media-carousel-dot.is-active.is-edge-xs { transform: scale(1.2); } @media (hover: hover) and (pointer: fine) { .media-carousel-dots { display: none; } } /* Titre du hero sombre de la homepage : segment en dégradé de marque (rose → violet privé, bleu plein PRO - variables surchargées par pro.css). */ .hero-grad-text { background: linear-gradient( 90deg, rgb(var(--hero-grad-from)), rgb(var(--hero-grad-to)) ); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Barre de recherche compacte du hero sombre (render_venue_search, homepage + 404) : placeholders Figma #757575 à 50% - medium 16px desktop, regular 13px mobile (les tailles vivent dans le markup, seul le poids varie ici). */ .venue-search-bar .multiselect-value:not(.has-selection), .venue-search-bar input::placeholder { color: rgb(117 117 117 / 0.5); font-weight: 500; } /* Pas de ring brand à l'ouverture du multiselect dans la barre (le liseré générique .multiselect-trigger[aria-expanded="true"] détonne sur les champs sans fond / barres blanches autonomes - il reste pour les multiselect standard de render_multiselect). */ .venue-search-bar .multiselect-trigger[aria-expanded="true"] { box-shadow: none; } @media (max-width: 767px) { .venue-search-bar .multiselect-value:not(.has-selection), .venue-search-bar input::placeholder { font-weight: 400; } } /* Side menu mobile : transitions + hauteur */ .mobile-drawer { transition: transform 0.3s ease-out; /* `dvh` suit la zone réellement visible : sans ça, `100vh` ignore la barre d'URL du navigateur mobile et le bas du menu (boutons CTA) passe dessous. */ height: 100vh; height: 100dvh; } .mobile-overlay { transition: opacity 0.3s ease; } /* Container : aligné sur le header (max 1280, padding 15 mobile / 30 desktop) */ .container-x { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .container-x { padding-left: 30px; padding-right: 30px; } } /* Bandeau labels - défilement infini lent en pleine largeur */ .marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); } .marquee-track { display: flex; flex-wrap: nowrap; width: max-content; animation: marquee 60s linear infinite; will-change: transform; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* Variante « défilant sur mobile seulement » (réassurance du hero homepage) : dès md la rangée devient statique - plus de masque ni d'animation, et la série dupliquée pour la boucle ([data-marquee-dup]) est retirée. */ @media (min-width: 768px) { .marquee-md-static { -webkit-mask-image: none; mask-image: none; } .marquee-md-static .marquee-track { animation: none; width: auto; } .marquee-md-static [data-marquee-dup] { display: none; } } /* Boîte de logo partenaire (ruban .marquee de la home / abonnements / groupes, vignette des cards de /nos-partenaires) : la boîte porte une taille FIXE et l' s'y contient (max-h-full / max-w-full + object-contain), pour que des visuels de ratios quelconques gardent un rythme régulier. render_media_picture() insère un entre les deux quand un sibling .webp existe - or un max-height/max-width en % ne se résout PAS sur un parent à dimension auto : le logo échapperait à sa boîte sur les seules images ayant une variante WebP. `display: contents` efface ce de la mise en page (la sélection de source, elle, reste faite par le parser) : l' redevient enfant direct de la boîte dimensionnée. Ne pas remplacer par un max-h-[…px] en dur - la boîte change de taille au breakpoint. */ .partner-logo picture { display: contents; } /* =========================================================== Multiselect custom (champ Événement) Desktop : dropdown ancré au champ Mobile : bottom-sheet plein largeur, animé depuis le bas =========================================================== */ .multiselect-trigger { cursor: pointer; } .multiselect-trigger[aria-expanded="true"] { box-shadow: 0 0 0 2px rgb(var(--brand) / 0.3); } .multiselect[data-open] [data-chevron] { transform: translateY(-50%) rotate(180deg); } .multiselect-value:not(.has-selection) { color: #757575; } .multiselect-value.has-selection { color: #211315; font-weight: 500; } /* Panneau - desktop par défaut (dropdown ancré au trigger via JS en position fixed pour échapper à tout ancêtre `overflow: hidden`). Les coordonnées top/left/width sont définies par le JS en style inline à l'ouverture et lors du scroll/resize. Le panel est lui-même le flex container : son layout est prédictible quelle que soit la hauteur (max-height fixée en JS desktop, 85vh fixe en mobile). */ .multiselect-panel { position: fixed; z-index: 60; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; display: flex; flex-direction: column; animation: multiselect-fade-in 0.18s ease-out; } .multiselect-panel.hidden { display: none; } @keyframes multiselect-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* En-tête (titre + bouton fermer) - masqué desktop */ .multiselect-header { display: none; padding: 16px 16px 8px; border-bottom: 1px solid #f2f3f5; } .multiselect-header-row { display: flex; align-items: center; justify-content: space-between; } .multiselect-title { font-size: 17px; font-weight: 700; color: #0a0a0a; } .multiselect-close { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #211315; transition: background-color 0.15s ease; } .multiselect-close:hover { background: #f2f3f5; } /* Recherche en haut du panneau */ .multiselect-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; } .multiselect-search > i { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); margin-top: 2px; /* compense le padding asymétrique 12/8 du conteneur pour centrer sur l'input */ pointer-events: none; } .multiselect-search input { flex: 1; /* min-width: 0 force l'input à respecter `flex: 1` (sinon `min-width: auto` - la valeur par défaut des items flex - bloque le shrink à la taille intrinsèque du champ, soit ~150-200px, et l'input déborde du panel quand le trigger est étroit). max-width: 100% en ceinture-bretelles. */ min-width: 0; max-width: 100%; height: 40px; padding: 0 36px 0 34px; font-size: 14px; color: #211315; background: #f2f3f5; border: 1px solid transparent; border-radius: 10px; outline: none; transition: border-color 0.15s ease, background-color 0.15s ease; } .multiselect-search input::placeholder { color: #757575; } .multiselect-search input:focus { background: #fff; border-color: rgb(var(--brand)); } .multiselect-search-clear { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); margin-top: 2px; /* compense le padding asymétrique 12/8 du conteneur pour centrer sur l'input */ width: 22px; height: 22px; border-radius: 999px; background: #d9d9d9; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease; } .multiselect-search-clear:hover { background: #757575; } .multiselect-search-clear[hidden] { display: none; } /* Liste des options */ .multiselect-options { list-style: none; padding: 4px 6px 8px; margin: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; /* permet à flex-1 d'effectivement rétrécir et faire scroller */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .multiselect-options::-webkit-scrollbar { width: 6px; } .multiselect-options::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 999px; } .multiselect-options li.is-hidden { display: none; } /* Optgroup header dans un multiselect - élément décoratif non sélectionnable (généré par render_multiselect quand une option est un sous-tableau). */ .multiselect-group-header { padding: 10px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #757575; pointer-events: none; user-select: none; } /* Options à l'intérieur d'un optgroup : indentation pour la hiérarchie visuelle. Classe posée explicitement par render_multiselect (préfèrable aux sélecteurs siblings complexes - robustesse si la liste contient plusieurs groups + options hors groupes mélangés). */ .multiselect-option--grouped { padding-left: 22px; } .multiselect-option { position: relative; /* ancre l'input masqué (abspos) dans la rangée - cf. .filters-check */ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 15px; color: #211315; cursor: pointer; transition: background-color 0.12s ease; user-select: none; } .multiselect-option:hover { background: #f7f7f8; } /* Option INDISPONIBLE : valeur déjà utilisée ailleurs (une ligne existante la porte déjà), posée par le JS qui `disabled` la checkbox - le clic sur le label n'a donc plus d'effet, le composant n'écoutant que le `change` natif. La classe ne fait que le rendre lisible : grisé, sans survol, curseur barré. */ .multiselect-option.is-disabled { color: #c9c9cf; cursor: not-allowed; } .multiselect-option.is-disabled:hover { background: transparent; } .multiselect-option.is-disabled .multiselect-check { opacity: 0.4; } .multiselect-option input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .multiselect-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #d9d9d9; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background-color 0.15s ease, border-color 0.15s ease; } .multiselect-check::after { content: "\f00c"; /* fa-check */ /* Le projet embarque Font Awesome 6 Pro (cf. private/views/header.php : solid.min.css déclare `font-family: "Font Awesome 6 Pro"`). Cibler "Free" affichait un tofu (U+F00C non résolu car la famille Free n'est pas chargée). */ font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 11px; opacity: 0; transition: opacity 0.12s ease; } .multiselect-option input:checked + .multiselect-check { background: rgb(var(--brand)); border-color: rgb(var(--brand)); } .multiselect-option input:checked + .multiselect-check::after { opacity: 1; } .multiselect-option input:focus-visible + .multiselect-check { box-shadow: 0 0 0 3px rgb(var(--brand) / 0.25); } .multiselect-option .multiselect-label { flex: 1; min-width: 0; line-height: 1.3; } /* ----------- Mode mono-sélection (data-mode="single") ----------- Visuel radio (cercle au lieu de carré coché) + footer caché (la sélection ferme le panel immédiatement, pas besoin de bouton Valider). */ .multiselect[data-mode="single"] .multiselect-check { border-radius: 999px; } .multiselect[data-mode="single"] .multiselect-check::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #fff; font-size: 0; } .multiselect[data-mode="single"] .multiselect-footer { display: none; } /* ----------- Autocomplete (data-autocomplete) ----------- Réutilise toute la chrome `.multiselect-*` (panel, header, options, empty). Spécifique : chaque option est un