/* ========================================================================== Magic Parc - « Pas besoin de réserver » (fiche Arcade) Habillage de la fenêtre rendue par inc/arcade-carte.php (wp_footer) pour les boutons « Réserver » des pages listées dans fp_sans_reservation_tous_slugs() (Arcades plus, depuis le 10.09.2026, les activités sans réservation Apex ce soir). Le markup est identique quel que soit le texte affiché, rien à distinguer ici. Patron repris quasi trait pour trait de assets/css/bientot-disponible.css, classes renommées fp-arcade-carte-* pour ne rien partager avec cette autre fenêtre (les deux peuvent coexister sur des pages différentes). Mobile d'abord. Couleurs uniquement en var(--fp-*). ========================================================================== */ .fp-arcade-carte-dialog { width: min(100% - 20px, 480px); max-width: none; max-height: min(90vh, 560px); padding: 0; border: 0; border-radius: var(--fp-radius-lg); background: var(--fp-paper); color: var(--fp-ink); box-shadow: var(--fp-shadow-lg); overflow: hidden; } .fp-arcade-carte-dialog[open] { display: flex; } /* Le fond assombri. Deux déclarations volontairement : ::backdrop n'hérite les propriétés personnalisées de son élément d'origine que depuis Chrome 122, Firefox 118 et Safari 17.4 (même remarque que bientot-disponible.css). */ .fp-arcade-carte-dialog::backdrop { background: rgba(0, 0, 0, .6); background: color-mix(in srgb, var(--fp-dark) 78%, transparent); } .fp-arcade-carte-boite { display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 560px); } .fp-arcade-carte-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--fp-line); } .fp-arcade-carte-titre { margin: 0; font-family: var(--fp-font-heading); font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.1; color: var(--fp-ink); } /* Le titre reçoit le focus à l'ouverture (tabindex -1) : le repère doit rester visible, sans quoi personne ne sait où il vient d'atterrir. */ .fp-arcade-carte-titre:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 4px; } .fp-arcade-carte-fermer { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--fp-line); border-radius: 50%; background: var(--fp-paper); color: var(--fp-ink); cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .fp-arcade-carte-fermer:hover { background: var(--fp-secondary); color: var(--fp-paper); border-color: transparent; } .fp-arcade-carte-fermer:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 2px; } /* Défilement INTERNE : sur un petit écran en paysage, la fenêtre peut dépasser la hauteur disponible. Rien n'est jamais coupé, c'est le corps qui défile, pas la page derrière. */ .fp-arcade-carte-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 24px; } #fp-arcade-carte-texte p { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; color: var(--fp-ink); } #fp-arcade-carte-texte p:last-child { margin-bottom: 0; } .fp-arcade-carte-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; } .fp-arcade-carte-horaires:focus-visible, .fp-arcade-carte-fermer-action:focus-visible { outline: 2px solid var(--fp-secondary-dark); outline-offset: 3px; } /* Le fond de page ne défile pas derrière la fenêtre. La classe est posée sur par le script. */ html.fp-arcade-carte-fige { overflow: hidden; } /* Animation d'ouverture, désactivée dès que le système demande moins de mouvement. */ @media (prefers-reduced-motion: no-preference) { .fp-arcade-carte-dialog[open] { animation: fp-arcade-carte-entree .22s var(--fp-anim-ease, ease-out); } @keyframes fp-arcade-carte-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } } @media (min-width: 560px) { .fp-arcade-carte-entete { padding: 20px 20px 14px 24px; } .fp-arcade-carte-corps { padding: 20px 24px 28px; } }