/*! * WebPlusSEO Annonces — styles publics * * Les couleurs, rayons et tailles viennent de variables CSS injectées en ligne * depuis les réglages (voir WPSA_Render::css_variables()). */ /* --------------------------------------------------------------------------- * Piles de bandeaux * ------------------------------------------------------------------------ */ .wpsa-pile { box-sizing: border-box; } .wpsa-pile--haut { position: fixed; top: var(--wpsa-offset-haut, 0px); left: 0; right: 0; z-index: var(--wpsa-z, 99990); } .wpsa-pile--bas { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--wpsa-z, 99990); } /* Espaceurs insérés par le script pour libérer la place des piles fixes. Un espaceur en flux est plus sûr qu'un padding forcé sur , que beaucoup de thèmes réinitialisent. */ .wpsa-espaceur { flex: none; width: 100%; pointer-events: none; } /* --------------------------------------------------------------------------- * Bandeau * ------------------------------------------------------------------------ */ .wpsa-bandeau { box-sizing: border-box; width: 100%; background: var(--wpsa-fond, #1f2937); color: var(--wpsa-texte, #ffffff); font-size: var(--wpsa-police, 15px); line-height: 1.45; border-radius: var(--wpsa-rayon, 0px); text-align: center; } .wpsa-bandeau *, .wpsa-bandeau *::before, .wpsa-bandeau *::after { box-sizing: border-box; } .wpsa-bandeau[hidden] { display: none !important; } .wpsa-bandeau--ombre { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); } .wpsa-bandeau__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; padding: 0.7rem 2.6rem 0.7rem 1rem; margin: 0 auto; max-width: 1240px; } .wpsa-bandeau--pleine-largeur .wpsa-bandeau__inner { max-width: none; } .wpsa-bandeau__icone { font-size: 1.15em; line-height: 1; flex: none; } .wpsa-bandeau__texte { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.15rem 0.55rem; min-width: 0; } .wpsa-bandeau__titre { font-weight: 700; } .wpsa-bandeau__message { font-weight: 400; } .wpsa-bandeau__compteur { font-size: 0.9em; opacity: 0.85; white-space: nowrap; } .wpsa-bandeau .wpsa-bandeau__message a, .wpsa-bandeau .wpsa-bandeau__titre a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; } /* Appel à l'action --------------------------------------------------------- */ .wpsa-bandeau .wpsa-bandeau__cta { display: inline-block; flex: none; background: var(--wpsa-bouton, #ffffff); color: var(--wpsa-bouton-texte, #1f2937); padding: 0.45em 1.05em; border-radius: 999px; font-size: 0.92em; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: transform 0.15s ease, opacity 0.15s ease; } .wpsa-bandeau .wpsa-bandeau__cta:hover, .wpsa-bandeau .wpsa-bandeau__cta:focus-visible { color: var(--wpsa-bouton-texte, #1f2937); opacity: 0.9; transform: translateY(-1px); } /* Code promo -------------------------------------------------------------- */ .wpsa-bandeau__code { display: inline-flex; align-items: center; gap: 0.35em; flex: none; margin: 0; padding: 0.32em 0.8em; border: 1px dashed currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; } .wpsa-bandeau__code--copiable { cursor: pointer; transition: background-color 0.15s ease; } .wpsa-bandeau__code--copiable:hover, .wpsa-bandeau__code--copiable:focus-visible { background: rgba(255, 255, 255, 0.14); } .wpsa-bandeau__code-etat { font-size: 0.85em; font-weight: 600; letter-spacing: 0; opacity: 0; transition: opacity 0.2s ease; } .wpsa-bandeau__code.est-copie .wpsa-bandeau__code-etat { opacity: 1; } /* Fermeture --------------------------------------------------------------- */ .wpsa-bandeau__fermer { position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: 0.75; transition: opacity 0.15s ease, background-color 0.15s ease; } .wpsa-bandeau__fermer:hover, .wpsa-bandeau__fermer:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.16); } .wpsa-bandeau :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Positions ---------------------------------------------------------------- */ .wpsa-bandeau--inline { margin: 0 0 1.25rem; border-radius: var(--wpsa-rayon, 6px); text-align: left; } .wpsa-bandeau--inline .wpsa-bandeau__inner { justify-content: flex-start; padding-right: 1rem; } .wpsa-bandeau--inline .wpsa-bandeau__texte { justify-content: flex-start; } /* Animations --------------------------------------------------------------- */ @keyframes wpsa-glisse-haut { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes wpsa-glisse-bas { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes wpsa-fondu { from { opacity: 0; } to { opacity: 1; } } .wpsa-bandeau--anim-glissement { animation: wpsa-glisse-haut 0.35s ease-out both; } .wpsa-pile--bas .wpsa-bandeau--anim-glissement { animation-name: wpsa-glisse-bas; } .wpsa-bandeau--anim-fondu { animation: wpsa-fondu 0.35s ease-out both; } /* --------------------------------------------------------------------------- * Header collant d'Elementor : on le décale sous la pile de bandeaux. * ------------------------------------------------------------------------ */ html.wpsa-offset-elementor .elementor-sticky--effects { top: var(--wpsa-offset-total, 0px) !important; } /* --------------------------------------------------------------------------- * Notices WooCommerce * ------------------------------------------------------------------------ */ .wpsa-notice { box-sizing: border-box; display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border-radius: var(--wpsa-rayon, 6px); background: var(--wpsa-fond, #b45309); color: var(--wpsa-texte, #ffffff); font-size: 15px; line-height: 1.5; } .wpsa-notice__icone { font-size: 1.2em; line-height: 1.3; flex: none; } .wpsa-notice__texte { min-width: 0; } .wpsa-notice a { color: inherit; text-decoration: underline; } .wpsa-notice--mini_panier { margin-bottom: 0.9rem; padding: 0.7rem 0.85rem; font-size: 13px; } .wpsa-notice--fiche_produit { margin-top: 1rem; } /* --------------------------------------------------------------------------- * Popup * ------------------------------------------------------------------------ */ .wpsa-popup { position: fixed; inset: 0; z-index: calc(var(--wpsa-z, 99990) + 10); display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; } .wpsa-popup[hidden] { display: none !important; } .wpsa-popup *, .wpsa-popup *::before, .wpsa-popup *::after { box-sizing: border-box; } .wpsa-popup__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--wpsa-popup-overlay, 0.6)); animation: wpsa-fondu 0.2s ease-out both; } .wpsa-popup__boite { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--wpsa-popup-fond, #ffffff); color: var(--wpsa-popup-texte, #111827); border-radius: var(--wpsa-popup-rayon, 12px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); animation: wpsa-popup-entree 0.25s cubic-bezier(0.2, 0.8, 0.3, 1) both; } @keyframes wpsa-popup-entree { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } .wpsa-popup__fermer { position: absolute; top: 0.55rem; right: 0.55rem; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: inherit; cursor: pointer; transition: background-color 0.15s ease; } .wpsa-popup__fermer:hover, .wpsa-popup__fermer:focus-visible { background: rgba(0, 0, 0, 0.14); } .wpsa-popup__image { display: block; width: 100%; height: auto; border-radius: var(--wpsa-popup-rayon, 12px) var(--wpsa-popup-rayon, 12px) 0 0; } .wpsa-popup__contenu { padding: 1.6rem 1.5rem 1.4rem; } .wpsa-popup__titre { margin: 0 0 0.6rem; padding-right: 1.6rem; font-size: 1.3rem; line-height: 1.25; color: inherit; } .wpsa-popup__message { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.55; } .wpsa-popup__message p { margin: 0 0 0.6rem; } .wpsa-popup__message p:last-child { margin-bottom: 0; } .wpsa-popup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; } .wpsa-popup .wpsa-popup__cta { display: inline-block; padding: 0.7em 1.4em; border-radius: 999px; background: var(--wpsa-popup-bouton, #b45309); color: var(--wpsa-popup-bouton-texte, #ffffff); font-weight: 600; line-height: 1.3; text-decoration: none; transition: opacity 0.15s ease, transform 0.15s ease; } .wpsa-popup .wpsa-popup__cta:hover, .wpsa-popup .wpsa-popup__cta:focus-visible { color: var(--wpsa-popup-bouton-texte, #ffffff); opacity: 0.92; transform: translateY(-1px); } .wpsa-popup__secondaire { padding: 0.7em 0.6em; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 500; text-decoration: underline; cursor: pointer; opacity: 0.8; } .wpsa-popup__secondaire:hover, .wpsa-popup__secondaire:focus-visible { opacity: 1; } .wpsa-popup :focus-visible { outline: 2px solid var(--wpsa-popup-accent, #b45309); outline-offset: 2px; } /* Verrou de défilement pendant l'ouverture de la popup. */ html.wpsa-scroll-bloque, html.wpsa-scroll-bloque body { overflow: hidden; } /* --------------------------------------------------------------------------- * Mobile * ------------------------------------------------------------------------ */ @media (max-width: 782px) { .wpsa-bandeau__inner { padding: 0.65rem 2.3rem 0.65rem 0.85rem; gap: 0.4rem 0.7rem; } .wpsa-bandeau { font-size: calc(var(--wpsa-police, 15px) - 1px); } .wpsa-bandeau__compteur { white-space: normal; } .wpsa-popup__contenu { padding: 1.3rem 1.15rem 1.15rem; } .wpsa-popup__titre { font-size: 1.15rem; } } /* --------------------------------------------------------------------------- * Accessibilité : on coupe les animations si le visiteur le demande. * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .wpsa-bandeau, .wpsa-popup__boite, .wpsa-popup__overlay { animation: none !important; } .wpsa-bandeau .wpsa-bandeau__cta, .wpsa-popup .wpsa-popup__cta, .wpsa-bandeau__fermer, .wpsa-popup__fermer { transition: none !important; } .wpsa-bandeau .wpsa-bandeau__cta:hover, .wpsa-popup .wpsa-popup__cta:hover { transform: none; } }