/* ========================================================================== reservations.css - page réduite au SEUL outil de réservation Apex Timing, affichée PLEINE PAGE (voir template-reservations.php) : aucun bandeau, aucun titre. EN-TÊTE ET PIED DE PAGE DU SITE depuis le 2026-09-11 (Marino, site en ligne : « on a encore les anciens header et footer [...] sur la page réservation et mon-compte, mets header et footer normaux ») : la barre de navigation, masquée sur ce gabarit depuis le 2026-08-24, est de nouveau affichée, et le pied de page est celui, complet, du site (footer-main.php, rendu par get_footer() depuis le 2026-09-10 ; le pied de page de lancement posé temporairement du 2026-09-03 au 2026-09-10 n'est plus chargé, voir functions.php). Ce fichier style : 1) la pastille de SORTIE fixe (sortie immédiate sans remonter à la barre) et ses deux comportements dans le tunnel, 2) le cadre outil en pleine hauteur (iframe + voile de chargement), 3) le message de repli si le catalogue Apex est vide. RAPPEL WORLDLINE (2026-09-02) : le pied de page doit rester rendu, la liste de contrôle e-commerce exige l'affichage des conditions générales au plus tard une étape avant le paiement, et cette page est cette étape ; des liens en display: none ne comptent pas. Ne jamais le remasquer sans que le tunnel Apex affiche lui-même un lien vers nos conditions et que Worldline l'ait validé. Couleurs : tokens var(--fp-*) uniquement (discipline vérifiée par check-zones). Scope : .page-template-template-reservations (posée aussi sur le gabarit Mon compte par template-mon-compte.php, qui réutilise ce markup). ========================================================================== */ /* La barre de navigation est FIXE et flottante sur ce gabarit (classe de body fp-has-dark-hero posée par header.php, variante sombre) : elle ne prend aucune place dans le flux. Le cadre outil commence donc sous elle, à la hauteur de la barre (même mécanique que .fp-page-hero, main.css), sans quoi le haut de l'outil Apex passerait derrière la barre. */ .page-template-template-reservations .fp-reservations-tool-section { padding-top: var(--fp-nav-h); } /* PAS DE BARRE COLLANTE ICI (Marino, 2026-09-11 : « laisse-le en haut, pas de version sticky pour réservations et mon compte »). La barre reste posée en haut de la page et part avec le défilement : absolute au lieu du fixed de main.css (.fp-has-dark-hero .fp-nav), sélecteur plus spécifique pour l'emporter. Elle ne prend toujours aucune place dans le flux, la réserve ci-dessus reste donc juste. L'état collant (.is-stuck, rétrécissement et logo de la version collée) n'est plus posé sur ces pages : voir setupStickyNav(), assets/js/main.js. */ .page-template-template-reservations.fp-has-dark-hero .fp-nav { position: absolute; } /* main.css impose min-height: 100vh au body (socle commun, on n'y touche pas). On la relâche ici pour que le CADRE fasse exactement une hauteur d'écran, sans hauteur minimale résiduelle qui s'y ajouterait. Depuis le retour du pied de page (2026-09-02) la page dépasse de toute façon cette hauteur : la règle n'a plus d'effet visible, elle reste par prudence, le cadre étant en 100dvh. Aucune height ni overflow n'est posée sur html/body (interdiction documentée en tête de main.css), uniquement une contrainte levée. */ .page-template-template-reservations { min-height: 0; } /* -------------------------------------------------------------------------- PASTILLE DE SORTIE (« Quitter la réservation ») : SEUL element d'interface pose par-dessus le cadre, et seule issue IMMEDIATE vers le site puisque la nav est masquee (le pied de page, lui, est rendu depuis le 2026-09-02, mais il demande de faire defiler la page sous l'outil). Vrai lien (jamais un history.back() seul), voir la construction de $fp_back_url dans le template. Place en bas a gauche : toujours atteignable au pouce en mobile, fond opaque donc lisible sur n'importe quel contenu d'iframe. Le focus visible vient de la regle globale :focus-visible (main.css), non dupliquee ici. Le libellé est passé de 6 à 22 caractères le 2026-08-24 : la pastille ne revient jamais à la ligne (white-space: nowrap) et ne peut pas dépasser la largeur de l'écran (max-width), le texte se réduisant à « Quitter » sous 480px (l'aria-label et le title, eux, restent complets dans tous les cas). -------------------------------------------------------------------------- */ .page-template-template-reservations .fp-reservations-back { position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; max-width: calc(100vw - 40px); padding: 14px 22px; border-radius: var(--fp-pill); background: var(--fp-secondary); color: var(--fp-white); font-family: var(--fp-font-heading); font-weight: 700; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--fp-shadow-lg); transition: transform .18s ease, background-color .18s ease; } .page-template-template-reservations .fp-reservations-back svg { width: 18px; height: 18px; flex: 0 0 auto; } /* Repli de sécurité si le libellé venait à s'allonger encore (traduction) : il se tronque proprement au lieu de déborder de la pastille. */ .page-template-template-reservations .fp-reservations-back-label { overflow: hidden; text-overflow: ellipsis; } .page-template-template-reservations .fp-reservations-back:hover, .page-template-template-reservations .fp-reservations-back:focus-visible { background: var(--fp-primary); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .page-template-template-reservations .fp-reservations-back { transition: none; } .page-template-template-reservations .fp-reservations-back:hover, .page-template-template-reservations .fp-reservations-back:focus-visible { transform: none; } } @media (max-width: 640px) { .page-template-template-reservations .fp-reservations-back { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 28px); padding: 12px 18px; } } /* Sous 480px : icône + « Quitter » seulement, la pastille reste petite et ne recouvre pas le contenu de l'outil. Le libellé complet demeure annoncé par l'aria-label et le title posés sur le lien (template-reservations.php). */ @media (max-width: 480px) { .page-template-template-reservations .fp-reservations-back-suite { display: none; } } /* -------------------------------------------------------------------------- DANS LE TUNNEL APEX. La classe fp-apex-in-tunnel est posée sur par le script en ligne du template, à partir du DEUXIÈME chargement de l'iframe (le premier étant le document initial de l'outil). Deux comportements, choisis par le drapeau PHP FP_APEX_BACK_MODE / le filtre fp_apex_back_mode (défaut « hide ») : -------------------------------------------------------------------------- */ /* Mode « hide » (défaut) : la pastille disparaît. display: none la sort aussi du parcours de tabulation, aucun piège au clavier. */ .fp-apex-in-tunnel .page-template-template-reservations .fp-reservations-back { display: none; } /* Mode « collapse » : la pastille reste, réduite à une cible tactile de 44x44 en icône seule (le libellé complet reste porté par aria-label et title). Cette règle vient APRÈS celle du mode « hide » et l'annule, les deux classes étant posées ensemble sur . */ .fp-apex-collapse.fp-apex-in-tunnel .page-template-template-reservations .fp-reservations-back { display: inline-flex; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center; } .fp-apex-collapse.fp-apex-in-tunnel .page-template-template-reservations .fp-reservations-back-label { display: none; } /* -------------------------------------------------------------------------- SECTION OUTIL, cas nominal : cadre iframe PLEIN ECRAN. Aucun .fp-wrap autour (largeur suit directement le viewport), aucune carte/ombre/coin arrondi (rendu edge-to-edge demande par le client). -------------------------------------------------------------------------- */ .page-template-template-reservations .fp-reservations-tool-section { text-align: center; } /* UNE SEULE BARRE DE DEFILEMENT (demande client), version du 2026-08-24 : LAYOUT PLEINE HAUTEUR. Historique : le cadre a d'abord fait la hauteur du viewport (barre dans l'iframe EN PLUS de celle de la page), puis une hauteur fixe généreuse de 1400px (zone blanche sous les étapes courtes, saut visuel d'une étape à l'autre, et page très longue). Le redimensionnement automatique par iframe-resizer est hors d'atteinte : les mesures du client montrent qu'aucun message [iFrameSizer] n'est émis par l'outil Apex sur un tunnel complet, la hauteur du contenu ne nous est donc jamais communiquée. Solution retenue : le cadre fait exactement une hauteur d'écran. L'unique défilement INTERNE à l'iframe est celui du tunnel Apex lui-même ; la page, elle, défile désormais sous le cadre pour atteindre le pied de page (voir la note Worldline plus haut). La hauteur du cadre ne dépendant plus du contenu, aucun saut visuel au changement d'étape et plus aucune zone blanche. dvh et pas vh : sur iOS, 100vh compte la barre d'adresse rétractée et dépasserait toujours de sa hauteur. Le 100vh reste déclaré AVANT en repli pour les navigateurs sans dvh (la cascade fait le test de prise en charge, aucun @supports nécessaire). min-height : garde-fou pour les très petits écrans en paysage, l'outil Apex y devient inutilisable en dessous. Aucune largeur minimale (supprimée en son temps) : plus de barre horizontale. */ .page-template-template-reservations .fp-reservations-frame { position: relative; width: 100%; background: var(--fp-paper); } /* HAUTEUR GÉNÉREUSE, PIED DE PAGE STANDARD EN DESSOUS (Marino, 2026-09-10 : « dimensionne suffisamment bien l'iframe pour qu'on ne doive pas trop défiler dedans, laisse de la marge »). Le cadre ne se contente plus d'un écran : au moins 1600 px (1400 px sur téléphone), pour que le tunnel Apex (catalogue, calendrier, panier) tienne sans défilement interne dans les cas courants ; la page, elle, défile jusqu'au pied de page complet. Le plein écran reste le plancher sur les très grands écrans. */ .page-template-template-reservations .fp-reservations-iframe { display: block; width: 100%; height: max(100vh, 1600px); height: max(100dvh, 1600px); min-height: 600px; border: 0; } @media (max-width: 720px) { .page-template-template-reservations .fp-reservations-iframe { height: max(100vh, 1400px); height: max(100dvh, 1400px); } } /* Barre d'administration WordPress (utilisateur connecté) : elle décale le document vers le bas, une hauteur d'écran pleine dépasserait alors d'autant et redonnerait un défilement à la page. On retranche le jeton partagé --fp-admin-bar-h (défini dans main.css : 32px, 46px sous 782px, 0 quand la barre passe en position non fixe). */ body.admin-bar.page-template-template-reservations .fp-reservations-iframe { height: max(calc(100vh - var(--fp-admin-bar-h, 32px)), 1600px); height: max(calc(100dvh - var(--fp-admin-bar-h, 32px)), 1600px); } /* Catalogue Apex vide : message de repli, jamais de page blanche. */ .page-template-template-reservations .fp-reservations-empty { margin: 0; padding: clamp(60px, 12vh, 140px) var(--fp-gutter); text-align: center; color: var(--fp-ink-soft); font-family: var(--fp-font-body); } /* -------------------------------------------------------------------------- PORTE DE MOT DE PASSE : rendue A LA PLACE du cadre Apex quand la page porte un mot de passe (protection native de WordPress, voir la garde en tete de template-reservations.php). Ni pastille de sortie ni iframe a cet instant : la sortie et les liens legaux viennent du pied de page, affiche depuis le 2026-09-02. Le formulaire est celui du coeur (.post-password-form), on ne fait que l'habiller. -------------------------------------------------------------------------- */ .page-template-template-reservations .fp-reservations-gate { max-width: 520px; margin: 0 auto; padding: clamp(72px, 14vh, 160px) var(--fp-gutter-mobile) clamp(64px, 10vh, 120px); text-align: center; font-family: var(--fp-font-body); } .page-template-template-reservations .fp-reservations-gate-title { margin: 0 0 14px; font-family: var(--fp-font-heading); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.05; letter-spacing: .01em; color: var(--fp-secondary); } .page-template-template-reservations .fp-reservations-gate-intro { margin: 0 0 28px; color: var(--fp-ink-soft); line-height: 1.6; } /* Le formulaire du coeur sort en une seule ligne (label + input + submit) : on le repasse en colonne, centre, avec les composants du site. */ .page-template-template-reservations .fp-reservations-gate .post-password-form { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; } /* Le paragraphe d'introduction du coeur parle d'un « article » : notre propre intro le dit mieux juste au-dessus, on masque celui-la. Le label du champ, lui, reste lu par les lecteurs d'ecran (il porte le for=). */ .page-template-template-reservations .fp-reservations-gate .post-password-form > p:first-child { display: none; } .page-template-template-reservations .fp-reservations-gate .post-password-form label { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; text-align: left; font-size: .95rem; color: var(--fp-ink); } .page-template-template-reservations .fp-reservations-gate input[type="password"] { width: 100%; padding: 13px 16px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius-sm); background: var(--fp-white); color: var(--fp-ink); font-family: inherit; font-size: 1rem; } .page-template-template-reservations .fp-reservations-gate input[type="password"]:focus { outline: 2px solid var(--fp-primary); outline-offset: 2px; border-color: var(--fp-primary); } .page-template-template-reservations .fp-reservations-gate input[type="submit"] { min-height: 48px; padding: 14px 30px; border: 0; border-radius: var(--fp-pill); background: var(--fp-primary); color: var(--fp-white); font-family: var(--fp-font-heading); font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: background var(--fp-anim-dur) var(--fp-anim-ease); } .page-template-template-reservations .fp-reservations-gate input[type="submit"]:hover { background: var(--fp-secondary); } @media (prefers-reduced-motion: reduce) { .page-template-template-reservations .fp-reservations-gate input[type="submit"] { transition: none; } } /* -------------------------------------------------------------------------- VOILE DE CHARGEMENT : scope au seul cadre de l'iframe (jamais position:fixed plein ecran). Masque par le JS du template au chargement de l'iframe (ou au plus tard apres un delai de securite) ; masque immediatement sans JS via la regle