/* Voile d'avant-ouverture. * * Le flou est posé par la classe `voile` écrite EN DUR sur dans les pages concernées : * il est donc là dès le premier rendu (pas de clignotement) et il tient même sans JavaScript. * C'est voile.js qui la retire, une fois l'heure d'ouverture atteinte. * * ⚠ Ce voile est cosmétique : il ne protège rien. Le refus des commandes avant l'ouverture est * fait côté serveur (supabase/functions/_shared/ouverture.ts), seul endroit qui fasse foi. */ .voile .page { filter: blur(7px) saturate(.75); pointer-events: none; user-select: none; } .voile body { overflow: hidden; } /* Le ciel reste net derrière le voile : c'est lui qui porte l'ambiance de l'attente. */ .voile-panneau { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--gutter); background: color-mix(in srgb, var(--color-bg) 55%, transparent); } .voile-panneau__carte { width: min(34rem, 100%); max-height: calc(100dvh - 2 * var(--gutter)); overflow-y: auto; padding: clamp(1.5rem, 5vw, 2.5rem); text-align: center; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* Le formulaire newsletter est repris tel quel de la bibliothèque : on le recentre seulement, le reste de son habillage vient de lune-azur.css. */ .voile-panneau .newsletter { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--color-divider); text-align: left; } .voile-panneau .newsletter__entete { text-align: center; } .voile-panneau__cadenas { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 1.25rem; color: var(--color-accent); border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); } .voile-panneau__titre { margin: 0 0 .75rem; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.1; } .voile-panneau__texte { margin: 0 0 1.5rem; font-weight: 300; color: var(--color-text); } .voile-panneau__compteur { display: flex; justify-content: center; gap: clamp(.6rem, 3vw, 1.25rem); margin-bottom: 1.5rem; font-variant-numeric: tabular-nums; } .voile-panneau__case { display: flex; flex-direction: column; align-items: center; gap: .3rem; } .voile-panneau__nombre { font-family: var(--font-serif); font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1; } .voile-panneau__unite { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 65%, transparent); } .voile-panneau__lien { display: inline-block; min-height: 44px; padding: .7rem 1.4rem; font-weight: 500; color: var(--color-bg); text-decoration: none; background: var(--color-accent); border-radius: var(--radius-md); } .voile-panneau__lien:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .voile .page { filter: blur(7px); } }