/* ========================================================= Landing Builder — Frontend Toutes les variables sont injectées dynamiquement en inline (voir Landing_Builder_Settings::get_css_variables) et ont des valeurs de repli ici. ========================================================= */ /* Filet de sécurité CSS anti-blocage de scroll — voir frontend.js (healStuckOverlays) pour le filet JS équivalent. Celui-ci est purement CSS et s'applique donc dès le tout premier rendu de la page, sans le moindre délai d'exécution JS : le panier coulissant (script tiers, fourni par le thème, pas par ce plugin) laisse par moments son overlay plein écran cliquable/tactile alors qu'il devrait être fermé (classe "novelya-open" absente) — cette règle le rend non cliquable dans ce cas précis, immédiatement et sans dépendre d'aucun minuteur JS. */ .novelya-cart-overlay:not(.novelya-open) { pointer-events: none !important; } .lb-landing { --lb-primary: #0a0a0a; --lb-secondary: #f5a623; --lb-text: #111111; --lb-bg: #ffffff; --lb-radius: 10px; --lb-max-width: 1200px; --lb-font: 'Jost', sans-serif; font-family: var(--lb-font); color: var(--lb-text); background: var(--lb-bg); font-size: 14px; line-height: 1.5; } .lb-landing * { box-sizing: border-box; } .lb-landing h1, .lb-landing h2, .lb-landing h3, .lb-landing h4 { font-family: var(--lb-font); } /* Contient un éventuel débordement horizontal ponctuel (image, largeur calculée...) sans jamais l'appliquer à / : d'après la spécification CSS, déclarer overflow-x sur un élément sans déclarer overflow-y force systématiquement ce dernier à devenir "auto" — y compris si on l'écrit explicitement à "visible" (vérifié en direct sur le site : le calcul reste "auto" quoi qu'on déclare). Sans conséquence ici, car .lb-landing/.lb-section ont une hauteur "auto" qui épouse exactement leur contenu (jamais de zone de défilement interne réelle) — mais la même règle posée sur / avait justement créé ce piège ailleurs (cause identifiée du bug de scroll mobile bloqué par moments), d'où sa suppression à ce niveau-là. */ .lb-landing, .lb-landing .lb-section { overflow-x: hidden; } .lb-landing img { max-width: 100%; } /* Aucun texte souligné nulle part dans la landing, y compris les liens (coordonnées de contact, produits liés, contenu FAQ...). */ .lb-landing a { text-decoration: none; } .lb-section { max-width: var(--lb-max-width); margin-left: auto; margin-right: auto; padding: 0 24px; } .lb-section.lb-rounded img, .lb-section.lb-rounded .lb-text-image-media, .lb-section.lb-rounded .lb-banner { border-radius: var(--lb-radius); overflow: hidden; } .lb-btn { display: inline-block; padding: 14px 24px; border-radius: var(--lb-radius); border: none; cursor: pointer; font-weight: 600; font-size: 14.5px; text-decoration: none; letter-spacing: .01em; transition: transform .15s ease, opacity .15s ease; } .lb-btn:hover { opacity: .9; } .lb-btn-primary { background: var(--lb-primary); color: #fff; } /* ---------- Hero ---------- */ .lb-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; /* Le padding du bas est volontairement identique à celui de toutes les autres sections (6px) : additionné au padding du haut de la section suivante (6px), on retrouve partout le même rythme vertical, compact, entre deux sections. */ padding: 32px 0 6px; } /* Empêche les colonnes de grille de "gonfler" au-delà de leur largeur disponible à cause d'un contenu interne non réductible (ex. la rangée de miniatures de galerie avec overflow-x:auto) — comportement par défaut de CSS Grid (min-width:auto) sinon responsable de débordements horizontaux sur mobile. */ .lb-hero-media, .lb-hero-content { min-width: 0; } .lb-hero-media img { width: 100%; height: auto; display: block; } /* Trait sous le titre produit, identique en style (largeur fixe) à celui utilisé sous tous les autres titres de section de la page. */ .lb-hero-title { font-size: 26px; font-weight: 700; margin: 4px 0 14px; line-height: 1.25; position: relative; display: inline-block; padding-bottom: 12px; } .lb-hero-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--lb-primary); } .lb-hero-subtitle { font-size: 14.5px; opacity: .75; margin: 0 0 14px; line-height: 1.6; } .lb-badge { display: inline-block; background: var(--lb-secondary); color: #1c1c28; font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 8px; letter-spacing: .02em; } .lb-hero-price { font-size: 22px; font-weight: 700; margin-bottom: 18px; } .lb-hero-price del { opacity: .45; font-weight: 400; font-size: 16px; margin-right: 8px; } .lb-hero-atc .button, .lb-hero-atc button[name="add-to-cart"], .lb-hero-atc .lb-add-to-cart { display: block; background: var(--lb-primary); color: #fff; border: none; border-radius: var(--lb-radius); padding: 14px 28px; font-weight: 600; cursor: pointer; width: 100%; text-align: center; font-size: 15px; box-sizing: border-box; transition: opacity .15s, transform .1s; } .lb-hero-atc .lb-add-to-cart:hover { opacity: .9; } .lb-hero-atc .lb-add-to-cart.loading { opacity: .6; pointer-events: none; } .lb-hero-atc .lb-add-to-cart.added::after { content: ' ✓'; } /* Le script coeur WooCommerce ajoute automatiquement un lien "Voir le panier" juste après le bouton lors d'un ajout AJAX réussi — le site n'utilise que le panier coulissant maison, donc ce lien natif est masqué partout où il peut apparaître (hero, CTA, barre collante). */ .lb-landing a.added_to_cart, .lb-landing a.wc-forward, .lb-toast ~ a.added_to_cart { display: none !important; } /* / ont un soulignement/barré appliqué par défaut par les navigateurs — reset explicite pour ne jamais voir de texte souligné sur les prix (bundles, prix produit...). */ .lb-landing ins { text-decoration: none; } .lb-landing del { text-decoration: line-through; } /* ---------- Hero : note / avis ---------- */ .lb-hero-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; } .lb-hero-rating-value { font-weight: 700; } /* Étoiles du Hero : toujours pleines et vertes, fidèle à la page de référence. */ .lb-hero-rating .lb-stars { color: #1a9d4c; } .lb-hero-rating-count { opacity: .6; } /* ---------- Hero : bénéfices ---------- */ .lb-hero-benefits { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; font-size: 13.5px; } .lb-hero-benefits li { display: flex; align-items: center; gap: 8px; } .lb-hero-benefit-check { color: var(--lb-primary); flex: 0 0 auto; display: flex; } .lb-hero-benefit-check svg { width: 17px; height: 17px; display: block; } /* ---------- Hero : bundles ---------- */ .lb-bundle-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .lb-bundle-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid #e2e4e7; border-radius: var(--lb-radius); cursor: pointer; background: #fff; transition: border-color .15s; } .lb-bundle-option.is-selected { border-color: var(--lb-primary); } .lb-bundle-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .lb-bundle-radio-dot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c7cacd; position: relative; } .lb-bundle-option.is-selected .lb-bundle-radio-dot { border-color: var(--lb-primary); } .lb-bundle-option.is-selected .lb-bundle-radio-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--lb-primary); } .lb-bundle-info { flex: 1; display: flex; flex-direction: column; } .lb-bundle-title { font-weight: 700; font-size: 14.5px; } .lb-bundle-subtitle { font-size: 12.5px; opacity: .65; } .lb-bundle-price { text-align: right; font-weight: 700; font-size: 15px; white-space: nowrap; } .lb-bundle-price del { opacity: .5; font-weight: 400; font-size: 12.5px; display: block; } .lb-bundle-select-label { font-weight: 600; font-size: 13.5px; margin: 0 0 10px; } .lb-bundle-badge { position: absolute; top: -10px; right: 14px; background: var(--lb-primary); color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; letter-spacing: .03em; } /* ---------- Hero : réassurance ---------- */ .lb-hero-trust { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; } .lb-hero-trust-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; border: 1px solid #eee; border-radius: 8px; padding: 10px 14px; } .lb-hero-trust-icon { flex: 0 0 auto; display: flex; color: var(--lb-primary); } .lb-hero-trust-icon svg { width: 20px; height: 20px; display: block; } .lb-hero-contact { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; opacity: .8; margin-top: 10px; flex-wrap: wrap; } .lb-hero-contact-item { display: flex; align-items: center; gap: 6px; color: inherit; } .lb-hero-contact-item svg { width: 15px; height: 15px; flex: 0 0 auto; } /* ---------- Hero : FAQ intégrée ---------- */ .lb-hero-faq { margin-top: 16px; } .lb-hero-faq .lb-faq-item { margin-bottom: 8px; } .lb-sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; /* Ombre discrète, uniquement pour détacher la barre du contenu quand elle est affichée (pas de raison de l'appliquer quand elle est hors écran, translateY(100%) — transition partagée avec le shadow via opacity plutôt que d'animer le shadow lui-même, coûteux à interpoler). */ box-shadow: 0 -3px 12px rgba(0,0,0,.1); padding: 6px 24px; z-index: 500; transform: translateY(100%); transition: transform .25s ease; } .lb-sticky-atc.is-visible { transform: translateY(0); } .lb-sticky-atc-inner { max-width: var(--lb-max-width); margin: 0 auto; display: flex; align-items: center; gap: 16px; } .lb-sticky-atc-title { flex: 1; font-weight: 600; font-size: 18px; } .lb-sticky-atc-price { font-weight: 700; } /* ---------- Gallery (partagée hero + section galerie) ---------- */ .lb-gallery, .lb-hero-media .lb-gallery { max-width: 100%; } .lb-gallery-main { position: relative; width: 100%; aspect-ratio: 1/1.05; overflow: hidden; } .lb-gallery-slides { position: relative; width: 100%; height: 100%; } .lb-gallery-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; visibility: hidden; transition: opacity .35s ease; } .lb-gallery-slide.is-active { opacity: 1; visibility: visible; } .lb-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(20,20,24,.82); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.18); z-index: 5; transition: background .15s ease; } .lb-gallery-arrow:hover { background: #000; } .lb-gallery-arrow svg { width: 16px; height: 16px; color: #fff; } .lb-gallery-arrow-prev { left: 14px; } .lb-gallery-arrow-next { right: 14px; } .lb-gallery-dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0; } .lb-gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: #d7d5cc; border: none; cursor: pointer; } .lb-gallery-dot.is-active { background: var(--lb-primary); transform: scale(1.3); } /* FIX SCROLL (prioritaire) : touch-action:pan-y + overscroll-behavior-x:contain sur les conteneurs a defilement horizontal interne. Sans cela, un geste de scroll VERTICAL demarre au-dessus de ces zones peut etre partiellement capture par le navigateur pour evaluer un defilement horizontal avant de se rabattre sur le defilement de la page - source plausible de "le scroll ne repond pas immediatement" / "il faut plusieurs gestes" remontee par l'utilisateur, en particulier sur mobile. pan-y autorise explicitement le geste vertical a traverser ce conteneur sans ambiguite, tout en gardant le swipe horizontal actif au sein de la zone. */ .lb-gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; touch-action: pan-y; overscroll-behavior-x: contain; } .lb-gallery-thumbs::-webkit-scrollbar { display: none; } .lb-gallery-thumb { flex: 0 0 auto; width: 78px; height: 78px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: none; } .lb-gallery-thumb.is-active { border-color: var(--lb-primary); } .lb-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ---------- Texte + image ---------- */ /* Espacement harmonisé : 6px haut/bas, comme toutes les autres sections (voir la note sur .lb-hero) — le rythme vertical est identique partout, y compris entre deux sections "image + texte" consécutives. */ .lb-text-image { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 2px 0; } .lb-text-image-media, .lb-text-image-content { min-width: 0; } .lb-layout-text-right { direction: rtl; } .lb-layout-text-right > * { direction: ltr; } .lb-text-image-media img { width: 100%; height: auto; display: block; } .lb-text-image-content h2 { font-size: 22px; font-weight: 600; margin: 0 0 20px; position: relative; display: inline-block; padding-bottom: 14px; } .lb-text-image-content h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--lb-primary); } .lb-text-image-content .lb-subtitle { opacity: .7; margin-bottom: 12px; font-size: 15px; } /* Texte légèrement agrandi et colonne légèrement élargie (gap réduit de 48 à 40px) pour que les lignes aillent un peu plus loin avant de revenir à la ligne, comme demandé — sans casser la mise en page à deux colonnes. */ .lb-text-image-content .lb-text p { line-height: 1.75; margin-bottom: 12px; font-size: 15px; } /* Titres de section génériques : même traitement "soulignement court" que sur la page de référence (comparatif, avis, produits associés...). */ .lb-comparison-section > h2, .lb-reviews-section > h2, .lb-related-products-section > h2, .lb-video-section > h2, .lb-icons-section > h2, .lb-faq-section > h2 { font-size: 22px; font-weight: 600; margin: 0 0 24px; position: relative; display: inline-block; padding-bottom: 14px; text-align: left; } .lb-comparison-section > h2::after, .lb-reviews-section > h2::after, .lb-related-products-section > h2::after, .lb-video-section > h2::after, .lb-icons-section > h2::after, .lb-faq-section > h2::after { /* Largeur fixe (et non un pourcentage du titre) : tous les traits ont ainsi exactement la même largeur, quelle que soit la longueur du titre — cohérent avec .lb-hero-title et .lb-text-image-content h2. */ content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--lb-primary); } /* ---------- Vidéo ---------- */ .lb-video-section { padding: 6px 0; } .lb-video-wrap { position: relative; max-width: 800px; margin: 20px 0 0; aspect-ratio: 16/9; } .lb-video-wrap iframe, .lb-video-wrap video { width: 100%; height: 100%; border-radius: var(--lb-radius); } /* ---------- Icônes ---------- */ .lb-icons-section { padding: 6px 0; } .lb-icons-grid { display: grid; grid-template-columns: repeat(var(--lb-cols, 4), 1fr); gap: 24px; margin-top: 24px; } /* Ordre voulu, sur tous les écrans : icône, puis titre en gras, puis texte descriptif — implémenté via flex column + `order`, pour ne jamais dépendre de l'ordre du HTML (identique en desktop et mobile). */ .lb-icon-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .lb-icon-glyph { order: 1; font-size: 32px; margin: 0; display: flex; justify-content: center; color: var(--lb-primary); } .lb-icon-glyph svg { width: 30px; height: 30px; display: block; } .lb-icon-item h3 { order: 2; font-size: 16px; font-weight: 700; margin: 6px 0 0; } .lb-icon-item p { order: 3; font-size: 14px; opacity: .75; margin: 6px 0 0; } /* ---------- Timeline ---------- */ .lb-timeline-section { padding: 6px 0; } .lb-timeline { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } .lb-timeline-item { display: flex; gap: 16px; align-items: flex-start; } .lb-timeline-marker { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--lb-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .lb-timeline-body h3 { margin: 0 0 4px; font-size: 16px; } .lb-timeline-body p { margin: 0; opacity: .75; font-size: 14px; } /* ---------- Comparatif ---------- */ .lb-comparison-section { padding: 6px 0; text-align: center; } .lb-comparison-table { width: 100%; border-collapse: collapse; margin-top: 24px; } .lb-comparison-table th, .lb-comparison-table td { padding: 14px 16px; border-bottom: 1px solid #eee; text-align: center; } .lb-comparison-table td.lb-row-label { text-align: left; font-weight: 600; } .lb-col-highlight { background: #f6f6f2; font-weight: 700; } .lb-cell-yes { color: var(--lb-primary); font-weight: 700; } .lb-cell-no { color: #c0392b; } /* ---------- FAQ ---------- */ .lb-faq-section { padding: 6px 0; } /*
/
reçoivent parfois la police système par défaut du navigateur au lieu de la police héritée — on la force explicitement pour qu'elle soit identique au reste de la page partout (question, réponse). */ .lb-faq-item, .lb-faq-item summary, .lb-faq-item * { font-family: inherit; } /* overflow:hidden est nécessaire ici : la hauteur de cet élément est animée directement en JS (voir initFaqAccordion dans frontend.js) entre sa hauteur fermée et sa hauteur ouverte — sans ce overflow, le contenu de la réponse déborderait visuellement pendant la transition. */ .lb-faq-item { background: #f2f2f2; border-radius: 6px; margin-bottom: 12px; padding: 16px 20px; overflow: hidden; } /* summary en flex (plutôt qu'un "+" en float, qui suit la ligne de base du texte et paraît toujours légèrement trop bas) : le bouton +/- devient un vrai petit carré de 24x24px, centré horizontalement ET verticalement par la mise en page flex elle-même, quelle que soit la police ou la taille du texte de la question. */ .lb-faq-item summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .lb-faq-item summary::-webkit-details-marker { display: none; } .lb-faq-item summary::after { content: '+'; flex: 0 0 24px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 300; line-height: 1; } .lb-faq-item[open] summary::after { content: '\2013'; } /* padding-top (et non margin-top) : incluse dans offsetHeight, donc prise en compte automatiquement par l'animation JS de hauteur sans calcul supplémentaire à faire correspondre entre le CSS et le JS. */ .lb-faq-answer { padding-top: 12px; font-size: 14.5px; line-height: 1.7; opacity: .85; } /* ---------- Avis ---------- */ .lb-reviews-section { padding: 6px 0; text-align: center; } .lb-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; text-align: left; margin-top: 24px; } .lb-review-card { background: #f8f8f8; border-radius: 8px; padding: 18px; font-size: 13.5px; } .lb-stars { color: #f5a623; letter-spacing: 1px; } .lb-review-text { margin: 10px 0; line-height: 1.6; } .lb-review-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .lb-review-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .lb-review-name { font-weight: 600; display: block; } .lb-review-date { font-size: 12px; opacity: .6; } /* ---------- Avant / Après ---------- */ .lb-before-after-section { padding: 6px 0; text-align: center; } .lb-before-after { position: relative; max-width: 700px; margin: 24px auto 0; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--lb-radius); user-select: none; } .lb-before-after img { width: 100%; height: 100%; object-fit: cover; display: block; } .lb-ba-after { position: absolute; inset: 0; } .lb-ba-before { position: absolute; inset: 0; overflow: hidden; } .lb-ba-before img { width: 700px; max-width: none; height: 100%; } .lb-ba-handle { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; cursor: ew-resize; transform: translateX(-50%); } .lb-ba-handle-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 32px; height: 32px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); } .lb-ba-label { position: absolute; bottom: 10px; padding: 4px 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; border-radius: 4px; } .lb-ba-label-before { left: 10px; } .lb-ba-label-after { right: 10px; } /* ---------- Bannière ---------- */ .lb-banner { position: relative; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; } .lb-banner-small { min-height: 220px; } .lb-banner-medium { min-height: 360px; } .lb-banner-large { min-height: 520px; } .lb-banner-overlay { position: absolute; inset: 0; } .lb-banner-content { position: relative; text-align: center; max-width: 600px; padding: 24px; } .lb-banner-content h2 { font-size: 30px; margin: 0 0 10px; } /* ---------- CTA ---------- */ .lb-cta { padding: 6px 24px; text-align: center; } .lb-align-left { text-align: left; } .lb-align-right { text-align: right; } .lb-cta h2 { font-size: 26px; margin-bottom: 10px; } .lb-cta p { opacity: .8; margin-bottom: 20px; } /* ---------- Compteur ---------- */ .lb-counter-section { padding: 6px 0; } .lb-counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; text-align: center; } .lb-counter-number { font-size: 34px; font-weight: 700; display: inline-block; } .lb-counter-suffix { font-size: 24px; font-weight: 700; } .lb-counter-label { font-size: 13px; opacity: .7; margin-top: 4px; } /* ---------- Logos ---------- */ .lb-logos-section { padding: 6px 0; text-align: center; } .lb-logos-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; margin-top: 24px; opacity: .8; } .lb-logos-grid img { max-height: 40px; width: auto; } /* ---------- Produits associés ---------- */ .lb-related-products-section { padding: 6px 0; text-align: center; } .lb-related-products-grid { display: grid; grid-template-columns: repeat(var(--lb-cols, 4), 1fr); gap: 20px; margin-top: 24px; text-align: left; } .lb-related-product-card { display: block; color: inherit; text-decoration: none; } .lb-related-product-image img { width: 100%; height: auto; border-radius: 8px; display: block; margin-bottom: 8px; } .lb-related-product-name { font-size: 14px; font-weight: 600; } .lb-related-product-price { font-size: 14px; opacity: .8; } /* ---------- Responsive ---------- */ @media (max-width: 782px) { .lb-section { padding: 0 18px; } .lb-hero, .lb-text-image { grid-template-columns: 1fr; gap: 24px; } /* Le premier titre démarre plus haut sur mobile/tablette. */ .lb-hero { padding-top: 16px; } .lb-layout-text-right { direction: ltr; } .lb-related-products-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Section icônes de réassurance ("Pourquoi de plus en plus...") sur mobile : un fond gris clair différencie toute la section de celle du dessus (posé sur le wrapper .lb-section externe, qui occupe déjà 100% de la largeur de l'écran sous 782px, donc déborde naturellement jusqu'aux bords). L'ordre titre → icône → texte est désormais la règle de base (voir plus haut), ici on ne fait qu'agrandir un peu. */ .lb-section-icons { background: #f7f7f5; } .lb-icons-section { padding: 22px 0; } .lb-icons-grid { grid-template-columns: 1fr !important; gap: 26px !important; } .lb-icon-item { gap: 6px; } .lb-icon-item h3 { font-size: 17px; } .lb-icon-glyph svg { width: 34px; height: 34px; } .lb-icon-item p { font-size: 14.5px; } .lb-hero-title { font-size: 22px; } .lb-comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior-x: contain; } .lb-comparison-table th, .lb-comparison-table td { padding: 12px; font-size: 13px; } /* Les 4 bénéfices restent toujours sur 2 colonnes / 2 lignes, quel que soit l'écran (desktop, tablette, mobile) — plus de bascule en 1 colonne : c'est la disposition demandée, volontairement identique partout. Voir la règle de base .lb-hero-benefits (déjà 1fr 1fr). */ /* Email à gauche / téléphone à droite en desktop (règle de base) ; en dessous de 782px, il n'y a pas assez de largeur pour les deux côte à côte sans les compresser — on les empile proprement, à gauche. */ .lb-hero-contact { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 480px) { .lb-section { padding: 0 14px; } .lb-hero { padding: 16px 0 16px; gap: 18px; } .lb-hero-title { font-size: 20px; } .lb-bundle-option { padding: 12px; gap: 10px; } .lb-bundle-title { font-size: 13.5px; } .lb-bundle-price { font-size: 13.5px; } .lb-related-products-grid, .lb-counter-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; } .lb-reviews-grid { grid-template-columns: 1fr; } .lb-cta { padding: 6px 14px; } .lb-cta h2 { font-size: 21px; } .lb-sticky-atc { padding: 10px 14px; } .lb-sticky-atc-inner { gap: 10px; } .lb-sticky-atc-title { font-size: 16px; } .lb-hero-trust-item { font-size: 13px; } } /* ---------- Notification d'ajout au panier (identité Novelya) ---------- Élément ajouté directement à document.body par frontend.js, donc en dehors de .lb-landing : on redéclare la police/les couleurs explicitement plutôt que de dépendre des variables CSS scoping à la landing. */ .lb-toast { position: fixed; top: 16px; left: 50%; transform: translate(-50%, -12px); background: #1c1c28; color: #fff; font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.22); display: flex; align-items: center; gap: 8px; z-index: 100000; opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s cubic-bezier(.4,0,.2,1); } .lb-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .lb-toast-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #f5a623; color: #1c1c28; font-size: 11px; font-weight: 700; flex: 0 0 auto; } /* ---------- Animations d'apparition au scroll ---------- Discrètes et rapides : léger fondu + petit déplacement du bas vers le haut. La classe .lb-reveal n'est ajoutée qu'en JavaScript (voir initScrollReveal() dans frontend.js), donc sans JS ou si IntersectionObserver n'est pas supporté, le contenu reste normalement visible — aucune dépendance bloquante, aucun risque de contenu caché. */ .lb-reveal { opacity: 0; transform: translateY(16px); transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .lb-reveal.lb-reveal-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lb-reveal { opacity: 1; transform: none; transition: none; } } /* Restylage léger des notices WooCommerce natives (erreurs de stock, validation...) pour rester cohérent avec l'identité visuelle, sans supprimer la fonctionnalité — seuls les vrais messages d'erreur WooCommerce continuent de s'afficher ici. */ .lb-wc-notices .woocommerce-message, .lb-wc-notices .woocommerce-error, .lb-wc-notices .woocommerce-info { font-family: 'Jost', sans-serif; border-top-color: #1c1c28; border-radius: 8px; } .lb-wc-notices .woocommerce-message::before, .lb-wc-notices .woocommerce-info::before { color: #1c1c28; }