/** * Modale de vérification d'âge (loi Évin / art. L.3342-1 CSP). * * Feuille autonome du plugin iLucid Domaine viticole, enqueuée uniquement * quand la modale doit s'afficher (cookie `lld_age_verified` absent). * * Les couleurs/rayons réutilisent les variables CSS du thème ilucid-v2 * (exposées sur :root par assets/css/style.css, chargé sur tout le site) pour * rester cohérents avec la charte. Des valeurs de repli sont fournies pour que * la modale reste lisible même si le thème n'est pas chargé. * * Overlay servi par PHP via wp_footer si pas de cookie. Non fermable autrement * que via les 2 boutons (caractère obligatoire). z-index très élevé pour * passer au-dessus du header sticky, du mini-cart drawer, etc. */ .lld-age-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* Gating côté client : le script inline du pose `lld-age-ok` sur * avant le paint quand le cookie lld_age_verified est présent. La modale, rendue * pour tous (cache pleine page), est alors masquée sans flash pour les visiteurs * déjà validés. */ html.lld-age-ok .lld-age-modal { display: none; } .lld-age-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); } .lld-age-modal__panel { position: relative; width: 100%; max-width: 32rem; background: #ffffff; border-radius: var(--radius-card, 0.5rem); padding: 2rem; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .lld-age-modal__title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 600; color: #111827; } .lld-age-modal__lead { margin: 0 0 1rem; font-weight: 600; color: #111827; } .lld-age-modal__legal { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.5; color: #4b5563; } .lld-age-modal__sanitary { margin: 0 0 1rem; font-size: 0.875rem; color: #6b7280; } .lld-age-modal__sanitary em { font-style: italic; } .lld-age-modal__question { margin: 1rem 0 1.5rem; font-weight: 600; color: #111827; } .lld-age-modal__actions { display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 0.5rem; } .lld-age-modal__btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0.7rem 0.9rem; border-radius: var(--radius-control, 0.25rem); font-size: 0.75rem; font-weight: var(--btn-font-weight, 600); letter-spacing: var(--btn-letter-spacing, 0.05em); text-transform: uppercase; line-height: 1.2; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .lld-age-modal__btn--yes { background: var(--color-primary, #1abc9c); border: 1px solid var(--color-primary, #1abc9c); color: #ffffff; } .lld-age-modal__btn--yes:hover, .lld-age-modal__btn--yes:focus-visible { background: var(--color-primary-hover, #45c9b0); border-color: var(--color-primary-hover, #45c9b0); color: #ffffff; } .lld-age-modal__btn--no { background: #ffffff; border: 1px solid var(--color-divider, #d1d5db); color: #6b7280; } .lld-age-modal__btn--no:hover, .lld-age-modal__btn--no:focus-visible { background: #f3f4f6; color: #111827; } .lld-age-modal__btn:disabled { opacity: 0.5; cursor: not-allowed; }