/** * Loader des formulaires — voile + verre de vin animé pendant que le JS * (GF + widget cépages/appellations) se prépare. La classe lalevee-form-loading * est posée sur par un script inline AVANT le premier paint (zéro flash) * et retirée par form-loader.js quand le form est prêt. Sans JS : la classe n'est * jamais posée → le form s'affiche normalement (dégradation propre). * * L'overlay est accroché à en POSITION FIXE : visible dès le premier paint, * même pendant le téléchargement du HTML (sur réseau lent, le wrapper du form * arrive en dernier — un overlay accroché au wrapper n'apparaîtrait qu'à la fin). * Vin BLANC (champagne clair #F6E7A8) côté exposants ; vin ROUGE (prune charte) côté * visiteurs via la classe --visiteur posée par class-form-loader.php. */ /* contenu du form invisible pendant le chargement (le wrapper garde sa place) */ html.lalevee-form-loading .gform_wrapper { min-height: 340px; } html.lalevee-form-loading .gform_wrapper > * { opacity: 0; } /* voile plein écran : pendant le chargement, on ne montre QUE le verre + libellé (la page en cours de construction reste cachée dessous — affichage propre) */ html.lalevee-form-loading body::before { content: ""; position: fixed; inset: 0; background: #fff; opacity: 0.94; z-index: 9998; } /* verre de vin animé — SVG inline (~700 o, zéro requête, SMIL). Le vin monte et descend en boucle. Blanc par défaut (exposants), rouge en --visiteur. */ html.lalevee-form-loading::before { content: ""; position: fixed; top: 38%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CclipPath id='b'%3E%3Cpath d='M18 7 Q18 27 32 29 Q46 27 46 7 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23b)'%3E%3Crect x='16' y='29' width='32' height='0' fill='%23F6E7A8'%3E%3Canimate attributeName='y' values='29;15;29' dur='2.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='0;14;0' dur='2.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/g%3E%3Cg fill='none' stroke='%23767676' stroke-width='2.5' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M18 7 Q18 27 32 29 Q46 27 46 7 Z'/%3E%3Cpath d='M32 29 V47'/%3E%3Cpath d='M22 50 H42'/%3E%3C/g%3E%3C/svg%3E"); z-index: 9999; } html.lalevee-form-loading--visiteur::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CclipPath id='b'%3E%3Cpath d='M18 7 Q18 27 32 29 Q46 27 46 7 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23b)'%3E%3Crect x='16' y='29' width='32' height='0' fill='%23935579'%3E%3Canimate attributeName='y' values='29;15;29' dur='2.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='0;14;0' dur='2.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/g%3E%3Cg fill='none' stroke='%23767676' stroke-width='2.5' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M18 7 Q18 27 32 29 Q46 27 46 7 Z'/%3E%3Cpath d='M32 29 V47'/%3E%3Cpath d='M22 50 H42'/%3E%3C/g%3E%3C/svg%3E"); } /* libellé sous le verre */ html.lalevee-form-loading::after { content: "Chargement du formulaire…"; position: fixed; top: calc(38% + 52px); left: 50%; transform: translateX(-50%); font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0.01em; color: var(--wp--preset--color--secondary, #666); white-space: nowrap; z-index: 9999; } /* révélation en douceur quand la classe tombe */ .gform_wrapper > * { transition: opacity 0.25s ease; }