/* Magic Parc - reservation-ui.css * * Habillage du module de réservation (.fp-resbar, inc/sections.php) sur les * gabarits qui le rendent (Accueil, Restauration) : demande de Marino du * 2026-09-06, « des listes déroulantes plus jolies et un sélecteur de date * moderne ». Deux composants distincts : * * 1. Composant maison de liste déroulante (bouton + liste flottante), * construit par assets/js/reservation-ui.js POUR chaque natif reste * dans le DOM (transport de la valeur du formulaire, repli sans JS) mais * n'est plus la cible clavier/lecteur d'écran une fois la mise à niveau * active (classe .fp-select-natif, voir plus bas) : SEUL le bouton et la * liste deviennent le chemin d'accès, pour ne jamais annoncer deux * contrôles pour un seul choix. * * 2. Habillage du calendrier Flatpickr (auto-hébergé, voir functions.php et * assets/vendor/flatpickr/README.md), scopé sur la classe * .fp-resbar-calendar posée par reservation-ui.js (rappel onReady) pour * ne jamais déborder sur un calendrier Flatpickr d'une autre page. * * IMPORTANT (piège connu) : .fp-resbar porte overflow:hidden (assets/css/ * home.css) pour découper proprement son motif de fond, et .fp-resbar-wrap * porte un transform (établit un nouveau bloc de confinement pour tout * position:fixed descendant). La liste déroulante ET le calendrier Flatpickr * sont donc ajoutés par JS comme enfants directs de (jamais de * .fp-resbar), positionnés en absolu à partir des coordonnées réelles du * champ : c'est la seule façon d'échapper à ce découpage sans toucher à * home.css (hors périmètre de cette tâche). */ /* ========================================================================== 1. Bouton + liste (remplace visuellement/au clavier le d'origine : conservé pour le nom/valeur du formulaire, retiré de la navigation clavier et de l'arbre d'accessibilité une fois le bouton et la liste en place (source unique d'interaction pour un lecteur d'écran). Motif « visually hidden » standard : toujours peint (jamais display:none), pour qu'un select non affiché reste lisible par les très rares outils qui s'y fient encore, mais sans occuper aucune place ni recevoir le focus clavier. DEUX classes (.fp-resbar-select en tête) : la feuille de la page Restauration (restauration.css) pose déjà width:100% et un padding sur .page-template-template-restauration .fp-resbar-select (2 classes elles aussi) ; une seule classe ici perdrait la bataille de spécificité malgré un chargement plus tardif. */ .fp-resbar-select.fp-select-natif { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Le chevron statique du champ (::after sur .fp-resbar-select-wrap, défini dans home.css et restauration.css) devient redondant : le bouton porte désormais son propre chevron SVG (animé à l'ouverture). On ne le supprime que sur les champs effectivement mis à niveau (classe posée par reservation-ui.js), jamais en général : sans JavaScript, le select natif garde son chevron habituel. */ .fp-resbar-select-wrap.fp-select-enhanced::after { display: none; } .fp-select-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; font-family: var(--fp-font-body); font-size: .92rem; color: var(--fp-ink); background: var(--fp-white); border: 0; border-radius: var(--fp-pill); padding: 12px 18px; cursor: pointer; text-align: left; transition: box-shadow .18s ease; } .fp-select-btn:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fp-primary) 25%, transparent) inset; } .fp-select-btn:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 1px; } .fp-select-btn[disabled] { cursor: not-allowed; opacity: .7; } .fp-select-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fp-select-chevron { flex: 0 0 auto; display: inline-flex; color: var(--fp-secondary); transition: transform .2s ease; } .fp-select-btn[aria-expanded="true"] .fp-select-chevron { transform: rotate(180deg); } /* Liste flottante : ajoutée en enfant de par le script (voir l'en-tête de ce fichier), position en absolu calculée par reservation-ui.js à partir du bouton (top/left/width en pixels). */ .fp-select-list { position: absolute; z-index: 950; margin: 0; padding: 6px; list-style: none; background: var(--fp-white); color: var(--fp-ink); border-radius: var(--fp-radius); box-shadow: var(--fp-shadow-lg); max-height: min(300px, 60vh); overflow-y: auto; /* Défaut BLOQUANT du 2026-09-06 (deuxième moitié, mesurée) : une liste à peine plus haute que son plafond (300px) n'a que quelques pixels de défilement interne ; dès que la molette dépasse ce reste, le NAVIGATEUR chaîne automatiquement le surplus vers le défilement de la PAGE (« scroll chaining »), qui ferme alors la liste (voir surDefilement() dans reservation-ui.js). contain coupe cette chaîne : le défilement reste strictement dans la liste, jamais transmis au-delà. */ overscroll-behavior: contain; box-sizing: border-box; font-family: var(--fp-font-body); font-size: .92rem; outline: none; animation: fp-select-list-in .16s var(--fp-anim-ease) both; } .fp-select-list[hidden] { display: none; } .fp-select-option { padding: 10px 14px; border-radius: var(--fp-radius-sm); cursor: pointer; scroll-margin: 6px; } .fp-select-option.is-active, .fp-select-option:hover { background: var(--fp-cream); } .fp-select-option.is-selected { background: var(--fp-primary); color: var(--fp-white); } .fp-select-option.is-active.is-selected { background: var(--fp-primary); } /* MENTION FINALE (2026-09-10, onglet "Reserver une activite") : ligne d'information non selectionnable, semee en derniere