/** Shopify CDN: Minification failed Line 6:35 Unexpected ".0" **/ NUTRI-EFFICACE — POPUP AVIS V3.0 + PRIX PRODUIT 1. Prix produit — allégé, moins agressif 2. Popup avis — touche de vert discrète, marges aérées 3. Popup mobile — plein écran 100% ========================================================= */ /* ========================================================= 1. PRIX PRODUIT — ALLÉGÉ Réduit la taille, allège le poids visuel tout en gardant la hiérarchie claire ========================================================= */ /* Prix principal desktop */ .ne-product-info span.price, .ne-product-info .price__regular .price-item--regular, .ne-product-info .price-item--sale { font-size: clamp(1.25rem, 1.7vw, 1.55rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #111111 !important; line-height: 1.1 !important; } /* Conteneur prix */ .ne-product-info .price, .ne-product-info .product__price { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px 10px !important; } /* Prix barré */ .ne-product-info .price__compare .price-item--regular, .ne-product-info .price-item--compare { font-size: 0.9rem !important; font-weight: 400 !important; color: rgba(17, 17, 17, 0.38) !important; text-decoration: line-through !important; letter-spacing: 0 !important; } /* Mobile : prix centré, taille raisonnable */ @media screen and (max-width: 749px) { .ne-product-info .price, .ne-product-info span.price { justify-content: center !important; font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } .ne-product-info .price__regular .price-item--regular, .ne-product-info .price-item--sale { font-size: 1.35rem !important; font-weight: 700 !important; } } /* ========================================================= 2. POPUP AVIS — TOUCHE VERTE DISCRÈTE + MARGES AÉRÉES ========================================================= */ /* Bouton déclencheur — texte simple, hover vert */ dialog-component.popup-link .popup-link__button { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; color: #111111 !important; font-size: 0.9rem !important; font-weight: 600 !important; line-height: 1.4 !important; cursor: pointer !important; transition: color 0.2s ease !important; } dialog-component.popup-link .popup-link__button:hover { color: #86bd32 !important; background: transparent !important; transform: none !important; box-shadow: none !important; } dialog-component.popup-link .popup-link__button svg { flex-shrink: 0; opacity: 0.55; transition: color 0.2s ease, opacity 0.2s ease; } dialog-component.popup-link .popup-link__button:hover svg { color: #86bd32; opacity: 1; } /* Drawer — fond blanc, fine bordure gauche verte */ dialog-component.popup-link .popup-link__content { background: #ffffff !important; font-family: inherit !important; } dialog-component.popup-link .popup-link__content--drawer { border-left: 3px solid #b7e85f !important; } /* Inner — marges généreuses */ dialog-component.popup-link .popup-link__inner { padding: 32px 28px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Blocs avis — texte brut, séparateur discret */ dialog-component.popup-link .popup-link__inner .text-block, dialog-component.popup-link .popup-link__inner rte-formatter { display: block !important; padding: 22px 0 !important; margin: 0 !important; border: none !important; border-bottom: 1px solid rgba(17, 17, 17, 0.07) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; --padding-block-start: 0px !important; --padding-block-end: 0px !important; --padding-inline-start: 0px !important; --padding-inline-end: 0px !important; } dialog-component.popup-link .popup-link__inner .text-block:hover, dialog-component.popup-link .popup-link__inner rte-formatter:hover { background: transparent !important; } dialog-component.popup-link .popup-link__inner .text-block:first-child, dialog-component.popup-link .popup-link__inner rte-formatter:first-child { padding-top: 0 !important; } dialog-component.popup-link .popup-link__inner .text-block:last-of-type, dialog-component.popup-link .popup-link__inner rte-formatter:last-of-type { border-bottom: none !important; padding-bottom: 0 !important; } /* Typographie */ dialog-component.popup-link .popup-link__inner p { margin: 0 0 5px !important; color: #111111 !important; font-size: 0.875rem !important; line-height: 1.65 !important; } dialog-component.popup-link .popup-link__inner p:last-child { margin-bottom: 0 !important; } /* Ligne ⭐ ✓ Avis vérifié — verte, petite */ dialog-component.popup-link .popup-link__inner p:first-child { font-size: 0.78rem !important; font-weight: 700 !important; color: #86bd32 !important; letter-spacing: 0.02em !important; margin-bottom: 5px !important; } /* Nom + âge + ville — gras */ dialog-component.popup-link .popup-link__inner p:nth-child(2) { font-weight: 700 !important; font-size: 0.85rem !important; color: #111111 !important; margin-bottom: 8px !important; } /* Réponse Nutri-Efficace — indentée, verte, italique */ dialog-component.popup-link .popup-link__inner em, dialog-component.popup-link .popup-link__inner p em { display: block !important; margin-top: 10px !important; padding-left: 12px !important; border-left: 2px solid #b7e85f !important; background: transparent !important; border-radius: 0 !important; color: #86bd32 !important; font-size: 0.82rem !important; font-style: italic !important; line-height: 1.6 !important; } /* Bouton fermeture */ dialog-component.popup-link .popup-link__close { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border: 1px solid rgba(17, 17, 17, 0.14) !important; border-radius: 999px !important; background: transparent !important; color: #111111 !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } dialog-component.popup-link .popup-link__close:hover { background: #eef9df !important; border-color: #86bd32 !important; color: #86bd32 !important; } /* ========================================================= 3. POPUP MOBILE — PLEIN ÉCRAN 100% ========================================================= */ @media (max-width: 767px) { /* Drawer plein écran */ dialog-component.popup-link .popup-link__content--drawer { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; border-left: none !important; border-top: 3px solid #b7e85f !important; } /* Marges réduites mobile */ dialog-component.popup-link .popup-link__inner { padding: 24px 18px !important; } dialog-component.popup-link .popup-link__inner .text-block, dialog-component.popup-link .popup-link__inner rte-formatter { padding: 18px 0 !important; } dialog-component.popup-link .popup-link__button { font-size: 0.84rem !important; } } /* ========================================================= NUTRI-EFFICACE — GALERIE PRODUIT V3 Fallback CSS si le Customizer ne suffit pas ========================================================= */ /* Border radius — écrase la variable inline */ media-gallery { --media-radius: 12px !important; } media-gallery slideshow-slide .product-media-container, media-gallery slideshow-slide .product-media, media-gallery .product-media-container { border-radius: 12px !important; overflow: hidden !important; } /* ------------------------------------------------------- MOBILE — Marges alignées sur les boutons (16px) Désactive extend_media qui force le plein écran ------------------------------------------------------- */ @media screen and (max-width: 749px) { media-gallery.spacing-style { --padding-inline-start: 16px !important; --padding-inline-end: 16px !important; } /* Annule les marges négatives que extend_media injecte */ media-gallery slideshow-component, media-gallery slideshow-container, media-gallery slideshow-slides { margin-inline-start: 0 !important; margin-inline-end: 0 !important; width: 100% !important; max-width: 100% !important; } } /* ========================================================= NUTRI-EFFICACE — FIL D’ARIANE PRODUIT Bloc indépendant, hors template produit ========================================================= */ .ne-breadcrumb-wrapper { --ne-breadcrumb-bottom-space: 10px; --ne-breadcrumb-accent: #b7e85f; --ne-breadcrumb-accent-strong: #86bd32; --ne-breadcrumb-text: #111111; --ne-breadcrumb-muted: rgba(17, 17, 17, 0.48); --ne-breadcrumb-hover-bg: rgba(183, 232, 95, 0.22); --ne-breadcrumb-current-bg: rgba(183, 232, 95, 0.18); width: 100%; max-width: 1480px; margin: 0 auto var(--ne-breadcrumb-bottom-space); padding-left: 32px; padding-right: 32px; text-align: left; } .ne-breadcrumb-wrapper--product { --ne-breadcrumb-bottom-space: 12px; } .ne-breadcrumb { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0; width: 100%; color: var(--ne-breadcrumb-text); font-size: 14px; line-height: 1.4; text-align: left; } .ne-breadcrumb a, .ne-breadcrumb__current { display: inline-flex; align-items: center; color: var(--ne-breadcrumb-text); text-decoration: none; padding: 4px 10px; border-radius: 999px; transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .ne-breadcrumb a { font-weight: 400; } .ne-breadcrumb a:hover { background-color: var(--ne-breadcrumb-hover-bg); color: #000000; box-shadow: 0 6px 18px rgba(134, 189, 50, 0.18); } .ne-breadcrumb__current { font-weight: 500; background-color: var(--ne-breadcrumb-current-bg); color: #000000; } .ne-breadcrumb__separator { margin: 0 7px; color: var(--ne-breadcrumb-muted); font-size: 1.15em; line-height: 1; } /* ========================= TABLETTE ========================= */ @media screen and (max-width: 1024px) { .ne-breadcrumb-wrapper { padding-left: 18px; padding-right: 18px; } } /* ========================= MOBILE ========================= */ @media screen and (max-width: 768px) { .ne-breadcrumb-wrapper { --ne-breadcrumb-bottom-space: 6px; margin-bottom: var(--ne-breadcrumb-bottom-space); padding-left: 14px; padding-right: 14px; text-align: center; } .ne-breadcrumb { justify-content: center; font-size: 11px; line-height: 1.35; text-align: center; } .ne-breadcrumb a, .ne-breadcrumb__current { padding: 3px 8px; } .ne-breadcrumb__separator { margin: 0 4px; } } /* ========================================================= TEMPLATE PRODUIT — VARIABLES & BASE ========================================================= */ #ne-product-template { --ne-black: #111111; --ne-text: #111111; --ne-white: #ffffff; --ne-green: #b7e85f; --ne-green-strong: #86bd32; --ne-green-soft: rgba(183, 232, 95, 0.18); --ne-green-card: rgba(183, 232, 95, 0.28); --ne-green-section: #eef9df; --ne-border: rgba(134, 189, 50, 0.45); --ne-border-soft: rgba(134, 189, 50, 0.26); --ne-radius: 12px; --ne-gutter-desktop: 32px; --ne-gutter-tablet: 24px; --ne-gutter-mobile: 0px; --ne-section-space-desktop: 52px; --ne-section-space-mobile: 22px; --ne-shadow: 0 18px 42px rgba(17, 17, 17, 0.08); --ne-shadow-soft: 0 10px 28px rgba(17, 17, 17, 0.055); position: relative; width: 100%; max-width: 100%; color: var(--ne-text); font-family: inherit; line-height: 1.55; overflow-x: clip; } #ne-product-template, #ne-product-template *, #ne-product-template *::before, #ne-product-template *::after { box-sizing: border-box; } #ne-product-template img { display: block; max-width: 100%; } #ne-product-template a { color: inherit; text-decoration: none; } #ne-product-template ul { margin: 0; padding: 0; list-style: none; } #ne-product-template p { margin: 0; color: var(--ne-black); font-size: 0.97rem; } #ne-product-template h2, #ne-product-template h3, #ne-product-template h4 { margin: 0; color: var(--ne-black); line-height: 1.14; letter-spacing: -0.026em; } #ne-product-template h2 { font-size: clamp(1.75rem, 2.25vw, 2.45rem); } #ne-product-template h3 { font-size: clamp(1.05rem, 1.22vw, 1.24rem); font-weight: 700; } #ne-product-template h4 { font-size: 1rem; font-weight: 500; } /* ========================================================= STRUCTURE GÉNÉRALE — fonds full-screen via ::before ========================================================= */ #ne-product-template .ne-section { position: relative; isolation: isolate; width: 100%; max-width: 100%; margin: 0; padding: var(--ne-section-space-desktop) 0; } #ne-product-template .ne-section::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; } #ne-product-template .ne-section-white::before { background: var(--ne-white); } #ne-product-template .ne-section-green::before { background: var(--ne-green-section); } #ne-product-template .ne-container { width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto; padding-left: var(--ne-gutter-desktop); padding-right: var(--ne-gutter-desktop); } #ne-product-template .ne-section-heading { max-width: 900px; margin: 0 auto 36px; text-align: center; } #ne-product-template .ne-section-heading p:not(.ne-eyebrow) { margin-top: 14px; } #ne-product-template .ne-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ne-black); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #ne-product-template .ne-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ne-green); box-shadow: 0 0 0 5px rgba(183, 232, 95, 0.22); flex-shrink: 0; } /* ========================================================= BOUTONS ========================================================= */ #ne-product-template .ne-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 12px 18px; border-radius: var(--ne-radius); font-size: 0.92rem; font-weight: 850; text-align: center; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease; } #ne-product-template .ne-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(17, 17, 17, 0.10); } #ne-product-template .ne-btn-primary { background: var(--ne-green); color: var(--ne-black); } #ne-product-template .ne-btn-primary:hover { background: #aee14f; } #ne-product-template .ne-btn-secondary { border: 1px solid var(--ne-border); background: var(--ne-white); color: var(--ne-black); } #ne-product-template .ne-btn-secondary:hover { background: var(--ne-green-soft); } /* ========================================================= BADGES IMAGES ========================================================= */ #ne-product-template .ne-img-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border: 1px solid rgba(255, 255, 255, 0.70); border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--ne-black); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(17, 17, 17, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } #ne-product-template .ne-img-badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ne-green-strong); flex-shrink: 0; } #ne-product-template .ne-recipe-card:hover .ne-img-badge, #ne-product-template .ne-product-card:hover .ne-img-badge { background: var(--ne-green); border-color: var(--ne-green-strong); box-shadow: 0 4px 14px rgba(134, 189, 50, 0.40); transform: translateY(-1px); } /* ========================================================= BADGES NUMÉROTÉS ========================================================= */ #ne-product-template .ne-number-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 999px; background: var(--ne-black); color: var(--ne-green); font-size: 0.82rem; font-weight: 900; line-height: 1; } /* ========================================================= SECTION 1 — RECETTES (maintenant en tête) Desktop : 4 colonnes, pleine largeur (même que cross-sell) Flèches mobiles sur les bords du carousel ========================================================= */ #ne-product-template .ne-recipe-carousel { position: relative; overflow: visible; width: 100%; } #ne-product-template .ne-recipe-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; } #ne-product-template .ne-recipe-card { min-width: 0; /* overflow: clip préserve border-radius sans bloquer -webkit-line-clamp */ overflow: clip; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); transition: transform 0.25s ease, box-shadow 0.25s ease; } #ne-product-template .ne-recipe-card:hover { transform: translateY(-6px); box-shadow: var(--ne-shadow-soft); } #ne-product-template .ne-recipe-image { position: relative; overflow: hidden; } #ne-product-template .ne-recipe-image img { width: 100%; aspect-ratio: 1.35 / 0.76; object-fit: cover; transition: transform 0.45s ease; } #ne-product-template .ne-recipe-card:hover .ne-recipe-image img { transform: scale(1.035); } #ne-product-template .ne-recipe-content { padding: 22px; } /* Titre des cartes recettes : -3px vs h3 global */ #ne-product-template .ne-recipe-content h3 { font-size: clamp(0.86rem, 1.03vw, 1.05rem); } #ne-product-template .ne-recipe-content p { margin-top: 11px; text-align: justify; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #ne-product-template .ne-recipe-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; } #ne-product-template .ne-recipe-meta li { display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 10px; border-radius: 999px; background: var(--ne-green-soft); color: var(--ne-black); font-size: 0.58rem; font-weight: 650; text-align: center; line-height: 1.25; } /* ========================================================= SECTION 2 — HERO 50/50 + même ratio d'image que Jason (1/1.1) ========================================================= */ #ne-product-template .ne-hero { padding-top: 0; } #ne-product-template .ne-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } #ne-product-template .ne-hero-text { max-width: 680px; margin-top: 18px; } #ne-product-template .ne-check-list { display: grid; gap: 10px; max-width: 680px; margin-top: 24px; } #ne-product-template .ne-check-list li { position: relative; padding: 11px 14px 11px 44px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); color: var(--ne-black); font-size: 0.95rem; font-weight: 650; transition: transform 0.22s ease, background 0.22s ease; } #ne-product-template .ne-check-list li::before { content: "✓"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--ne-green); color: var(--ne-black); font-size: 0.62rem; font-weight: 900; } #ne-product-template .ne-check-list li:hover { transform: translateX(5px); background: var(--ne-green-soft); } /* Mobile : désactive le glissement latéral pour éviter le clip de bordure */ @media (max-width: 767px) { #ne-product-template .ne-check-list li:hover { transform: none; background: var(--ne-green-soft); } } #ne-product-template .ne-hero-visual { position: relative; overflow: hidden; border-radius: var(--ne-radius); background: var(--ne-green-soft); /* Pas de box-shadow : supprime l'ombre parasite */ } #ne-product-template .ne-hero-visual img { width: 100%; /* Même ratio que l'image Jason pour cohérence visuelle */ aspect-ratio: 1 / 1.1; object-fit: cover; transition: transform 0.45s ease, filter 0.45s ease; } #ne-product-template .ne-hero-visual:hover img { transform: scale(1.035); filter: saturate(1.04); } #ne-product-template .ne-visual-overlay { position: absolute; inset: auto 0 0; height: 52%; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.42) 100%); pointer-events: none; } #ne-product-template .ne-visual-card { position: absolute; left: 18px; bottom: 18px; max-width: min(420px, calc(100% - 36px)); padding: 15px 19px; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: var(--ne-radius); background: rgba(255, 255, 255, 0.94); box-shadow: var(--ne-shadow-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #ne-product-template .ne-visual-card > span { display: inline-flex; color: var(--ne-green-strong); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; } #ne-product-template .ne-visual-card > strong { display: block; margin-top: 4px; color: var(--ne-black); font-size: 1.04rem; font-weight: 750; line-height: 1.25; } #ne-product-template .ne-visual-card ul { display: grid; gap: 5px; margin-top: 10px; } #ne-product-template .ne-visual-card li { color: rgba(17, 17, 17, 0.76); font-size: 0.74rem; line-height: 1.3; } /* ========================================================= CARROUSELS — boutons Chevron blanc, contour vert, fond transparent Mobile uniquement (les grilles desktop n'ont pas de flèches) ========================================================= */ #ne-product-template .ne-carousel-btn { display: none; align-items: center; justify-content: center; position: absolute; top: 28%; /* centré sur la zone image */ z-index: 3; transform: translateY(-50%); width: 34px; height: 34px; border: 2px solid var(--ne-green-strong); border-radius: 999px; background: transparent; color: #ffffff; /* chevron blanc sur fond image */ box-shadow: none; cursor: pointer; font-size: 1.3rem; line-height: 1; transition: background 0.2s ease; } #ne-product-template .ne-carousel-btn:hover { background: rgba(134, 189, 50, 0.25); } #ne-product-template .ne-carousel-prev { left: 4px; } #ne-product-template .ne-carousel-next { right: 4px; } /* ========================================================= SECTION 3 — JASON 50/50 sans encadré ========================================================= */ #ne-product-template .ne-jason-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } #ne-product-template .ne-jason-photo { overflow: hidden; border-radius: var(--ne-radius); background: var(--ne-green-soft); } #ne-product-template .ne-jason-photo img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; transition: transform 0.45s ease; } #ne-product-template .ne-jason-inner:hover .ne-jason-photo img { transform: scale(1.035); } #ne-product-template .ne-jason-content p:not(.ne-eyebrow):not(.ne-jason-note) { margin-top: 15px; } #ne-product-template .ne-phone-link { font-weight: 900; text-decoration: underline; text-decoration-color: var(--ne-green-strong); text-underline-offset: 4px; } #ne-product-template .ne-jason-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } #ne-product-template .ne-jason-note { margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--ne-green-strong); border-radius: var(--ne-radius); background: rgba(255, 255, 255, 0.76); font-size: 0.91rem; } /* ========================================================= RÉSEAUX SOCIAUX + PARTAGE ========================================================= */ #ne-product-template .ne-socials, #ne-product-template .ne-share-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } #ne-product-template .ne-socials a, #ne-product-template .ne-share-links a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid rgba(134, 189, 50, 0.40); border-radius: 999px; background: rgba(255, 255, 255, 0.86); color: var(--ne-black); font-size: 0.78rem; font-weight: 700; transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } #ne-product-template .ne-socials a:hover, #ne-product-template .ne-share-links a:hover { transform: translateY(-2px); background: var(--ne-green-soft); border-color: var(--ne-border); box-shadow: 0 6px 16px rgba(17, 17, 17, 0.08); } #ne-product-template .ne-socials svg, #ne-product-template .ne-share-links svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.78; } /* ========================================================= SECTION 4 — CROSS-SELLING Grille 4 colonnes desktop, 2 colonnes mobile — pas de carousel ========================================================= */ #ne-product-template .ne-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; } #ne-product-template .ne-product-card { min-width: 0; overflow: clip; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); transition: transform 0.25s ease, box-shadow 0.25s ease; } /* Hover identique aux cartes recettes : élévation + ombre, sans outline */ #ne-product-template .ne-product-card:hover { transform: translateY(-6px); box-shadow: var(--ne-shadow-soft); } #ne-product-template .ne-product-image { position: relative; display: block; overflow: hidden; } #ne-product-template .ne-product-image img { width: 100%; aspect-ratio: 1.35 / 0.76; object-fit: cover; transition: transform 0.45s ease; } #ne-product-template .ne-product-card:hover .ne-product-image img { transform: scale(1.035); } #ne-product-template .ne-product-content { padding: 20px; } #ne-product-template .ne-product-content p { margin-top: 11px; text-align: justify; /* Clamp à 3 lignes max avec ellipsis */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #ne-product-template .ne-product-content ul { display: grid; gap: 8px; margin-top: 16px; } #ne-product-template .ne-product-content li { position: relative; padding-left: 18px; color: var(--ne-black); font-size: 0.88rem; font-weight: 600; } #ne-product-template .ne-product-content li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; border-radius: 999px; background: var(--ne-green-strong); } #ne-product-template .ne-product-content .ne-btn { width: 100%; margin-top: 20px; } /* ========================================================= SECTION 5 — PROBLÈME / SOLUTION ========================================================= */ #ne-product-template .ne-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } #ne-product-template .ne-card { padding: 34px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); transition: transform 0.25s ease, background 0.25s ease; } #ne-product-template .ne-card:hover { transform: translateY(-5px); background: rgba(183, 232, 95, 0.08); } #ne-product-template .ne-card h2 { font-size: clamp(1.38rem, 1.65vw, 1.68rem); } #ne-product-template .ne-card p:not(.ne-eyebrow) { margin-top: 16px; } /* ========================================================= SECTION 6 — CE QUE VOUS RECEVEZ ========================================================= */ #ne-product-template .ne-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } #ne-product-template .ne-feature-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; padding: 30px 26px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); text-align: center; transition: transform 0.25s ease, background 0.25s ease; } #ne-product-template .ne-feature-card:hover { transform: translateY(-5px); background: rgba(183, 232, 95, 0.08); } #ne-product-template .ne-feature-card p { max-width: 340px; margin-top: 12px; } /* ========================================================= SECTION 7 — BÉNÉFICES ========================================================= */ #ne-product-template .ne-benefits-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 32px; align-items: stretch; } #ne-product-template .ne-benefits-intro { display: flex; flex-direction: column; justify-content: center; padding: 36px; border-radius: var(--ne-radius); background: var(--ne-black); } #ne-product-template .ne-benefits-intro .ne-eyebrow, #ne-product-template .ne-benefits-intro h2, #ne-product-template .ne-benefits-intro p { color: var(--ne-white); } #ne-product-template .ne-benefits-intro p { margin-top: 16px; } #ne-product-template .ne-benefits-right { display: grid; gap: 20px; } #ne-product-template .ne-benefits-jason { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; padding: 24px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); box-shadow: var(--ne-shadow-soft); } #ne-product-template .ne-benefits-jason-photo { overflow: hidden; border-radius: var(--ne-radius); background: var(--ne-green-soft); } #ne-product-template .ne-benefits-jason-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.45s ease; } #ne-product-template .ne-benefits-jason:hover img { transform: scale(1.035); } #ne-product-template .ne-benefits-jason-content p:not(.ne-eyebrow) { margin-top: 10px; } #ne-product-template .ne-benefits-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } #ne-product-template .ne-mini-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 170px; padding: 26px 24px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); text-align: center; transition: transform 0.25s ease, background 0.25s ease; } #ne-product-template .ne-mini-card:hover { transform: translateY(-4px); background: var(--ne-green-soft); } #ne-product-template .ne-mini-card strong { display: block; width: 100%; color: var(--ne-black); font-size: 1.05rem; text-align: center; } #ne-product-template .ne-mini-card p { width: 100%; max-width: 310px; margin: 10px auto 0; } /* ========================================================= SECTION 8 — FAQ ========================================================= */ #ne-product-template .ne-faq-list { max-width: 1040px; margin: 0 auto; } #ne-product-template .ne-faq-item { overflow: hidden; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); } #ne-product-template .ne-faq-item + .ne-faq-item { margin-top: 12px; } #ne-product-template .ne-faq-item summary { position: relative; padding: 20px 58px 20px 22px; cursor: pointer; background: var(--ne-green-soft); list-style: none; transition: background 0.22s ease; } #ne-product-template .ne-faq-item summary:hover { background: var(--ne-green-card); } #ne-product-template .ne-faq-item summary::-webkit-details-marker { display: none; } #ne-product-template .ne-faq-item summary h4 { display: inline; font-size: 1.125rem; font-weight: 500; } #ne-product-template .ne-faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--ne-black); font-size: 1.55rem; font-weight: 400; } #ne-product-template .ne-faq-item[open] summary::after { content: "\2212"; } #ne-product-template .ne-faq-item div { padding: 18px 22px 22px; } /* ========================================================= RESPONSIVE TABLETTE ≤ 1100px ========================================================= */ @media (max-width: 1100px) { #ne-product-template .ne-container { padding-left: var(--ne-gutter-tablet); padding-right: var(--ne-gutter-tablet); } #ne-product-template .ne-hero-grid, #ne-product-template .ne-jason-inner, #ne-product-template .ne-benefits-grid { grid-template-columns: 1fr; gap: 32px; } /* Tablette : 2 colonnes recettes, 2 cartes cross-sell */ #ne-product-template .ne-recipe-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ne-product-template .ne-product-card { flex: 0 0 calc(50% - 10px); } #ne-product-template .ne-benefits-jason { grid-template-columns: 160px 1fr; } } /* ========================================================= RESPONSIVE MOBILE ≤ 767px - Sections 5, 6, 7 masquées - Fonds : blanc uniforme - Polices réduites ~2px sur check-list, ~1px global - Carousels : scroll natif 1 carte + padding latéral pour préserver les bordures gauche/droite - Hero : pas de box-shadow, visual-card réactivée - Image Jason : même ratio que Hero (1/1.1), pleine largeur ========================================================= */ @media (max-width: 767px) { /* Sections masquées sur mobile */ #ne-product-template .ne-hide-mobile { display: none !important; } /* Réduction globale ~1px */ #ne-product-template { font-size: 0.94rem; overflow-x: clip; } #ne-product-template p { font-size: 0.93rem; } #ne-product-template h2 { font-size: clamp(1.52rem, 5.5vw, 1.9rem); } #ne-product-template h3 { font-size: 1.02rem; } #ne-product-template h4 { font-size: 0.95rem; } /* Sections */ #ne-product-template .ne-section { width: 100%; max-width: 100%; margin: 0; padding: var(--ne-section-space-mobile) 0; } /* Fonds verts → blanc uniforme */ #ne-product-template .ne-section::before { width: 100%; background: var(--ne-white) !important; border-radius: 0; } /* Conteneur mobile sans gutter */ #ne-product-template .ne-container { width: 100%; max-width: 100%; padding-left: var(--ne-gutter-mobile); padding-right: var(--ne-gutter-mobile); } /* Grilles → 1 colonne */ #ne-product-template .ne-split-grid, #ne-product-template .ne-feature-grid, #ne-product-template .ne-benefits-cards { grid-template-columns: 1fr; } #ne-product-template .ne-section-heading { margin-bottom: 28px; } /* Centrage titres */ #ne-product-template .ne-hero-content, #ne-product-template .ne-section-heading, #ne-product-template .ne-benefits-intro, #ne-product-template .ne-benefits-jason-content { text-align: center; } #ne-product-template .ne-eyebrow { justify-content: center; } /* Textes courants justifiés */ #ne-product-template p:not(.ne-eyebrow), #ne-product-template .ne-hero-text, #ne-product-template .ne-card p:not(.ne-eyebrow), #ne-product-template .ne-recipe-content p, #ne-product-template .ne-product-content p, #ne-product-template .ne-feature-card p, #ne-product-template .ne-benefits-intro p, #ne-product-template .ne-benefits-jason-content p:not(.ne-eyebrow), #ne-product-template .ne-mini-card p, #ne-product-template .ne-faq-item div p, #ne-product-template .ne-jason-content p:not(.ne-eyebrow) { text-align: justify; } #ne-product-template .ne-check-list li { text-align: left; } /* Check-list : réduction -2px supplémentaires */ #ne-product-template .ne-check-list li { font-size: 0.86rem; } /* ------------------------------------------------------- HERO MOBILE Pas d'ombre, visual-card et badge réactivés ------------------------------------------------------- */ #ne-product-template .ne-hero-grid { grid-template-columns: 1fr; gap: 24px; } #ne-product-template .ne-hero-visual { box-shadow: none; } #ne-product-template .ne-hero-visual > .ne-img-badge { display: inline-flex; } #ne-product-template .ne-visual-card { display: block; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 12px 14px; } #ne-product-template .ne-visual-card > span { font-size: 0.62rem; } #ne-product-template .ne-visual-card > strong { font-size: 0.92rem; } #ne-product-template .ne-visual-card li { font-size: 0.70rem; } /* ------------------------------------------------------- CAROUSELS MOBILES Recettes : carousel scroll natif + flèches Cross-sell : grille → carousel scroll natif + flèches ------------------------------------------------------- */ #ne-product-template .ne-recipe-carousel { width: 100%; overflow: hidden; padding: 0; position: relative; } /* Cross-sell mobile : 1 colonne */ #ne-product-template .ne-product-grid { grid-template-columns: 1fr; gap: 14px; } #ne-product-template .ne-recipe-track { display: flex; grid-template-columns: unset; gap: 0; padding: 0; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } #ne-product-template .ne-recipe-track::-webkit-scrollbar { display: none; } /* 1 carte pleine largeur exacte */ #ne-product-template .ne-recipe-card { flex: 0 0 100%; width: 100%; min-width: 100%; scroll-snap-align: start; transition: none; } #ne-product-template .ne-recipe-card:hover { transform: none; box-shadow: none; outline: none; } #ne-product-template .ne-product-card { transition: none; } #ne-product-template .ne-product-card:hover { transform: none; box-shadow: none; outline: none; } #ne-product-template .ne-recipe-meta { grid-template-columns: 1fr; } #ne-product-template .ne-recipe-meta li { justify-content: center; text-align: center; } /* Boutons carousel mobiles recettes — fond vert plein sur image */ #ne-product-template .ne-carousel-prev, #ne-product-template .ne-carousel-next { display: inline-flex; width: 30px; height: 30px; font-size: 1.1rem; top: 28%; background: var(--ne-green-strong); border-color: var(--ne-green-strong); color: #ffffff; } #ne-product-template .ne-carousel-prev { left: 4px; } #ne-product-template .ne-carousel-next { right: 4px; } /* ------------------------------------------------------- JASON MOBILE Image pleine largeur, même ratio que Hero (1/1.1) ------------------------------------------------------- */ #ne-product-template .ne-jason-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; } #ne-product-template .ne-jason-photo { /* Pleine largeur, même proportion que l'image Hero */ max-width: 100%; margin: 0; border-radius: var(--ne-radius); } #ne-product-template .ne-jason-photo img { aspect-ratio: 1 / 1.1; } #ne-product-template .ne-jason-actions, #ne-product-template .ne-socials, #ne-product-template .ne-share-links { justify-content: center; } /* ------------------------------------------------------- BÉNÉFICES MOBILE (section visible si non masquée) ------------------------------------------------------- */ #ne-product-template .ne-benefits-intro { padding: 26px 22px; } #ne-product-template .ne-benefits-jason { grid-template-columns: 1fr; gap: 18px; padding: 22px; text-align: center; } #ne-product-template .ne-benefits-jason-photo { max-width: 200px; margin: 0 auto; } #ne-product-template .ne-mini-card { min-height: auto; padding: 24px 20px; } #ne-product-template .ne-feature-card { min-height: auto; padding: 28px 22px; } #ne-product-template .ne-faq-item summary h4 { font-size: 1rem; } } /* ========================================================= TEMPLATE PRODUIT — VARIABLES & BASE ========================================================= */ #ne-collection-template { --ne-black: #111111; --ne-text: #111111; --ne-white: #ffffff; --ne-green: #b7e85f; --ne-green-strong: #86bd32; --ne-green-soft: rgba(183, 232, 95, 0.18); --ne-green-card: rgba(183, 232, 95, 0.28); --ne-green-section: #eef9df; --ne-border: rgba(134, 189, 50, 0.45); --ne-border-soft: rgba(134, 189, 50, 0.26); --ne-radius: 12px; --ne-gutter-desktop: 32px; --ne-gutter-tablet: 24px; --ne-gutter-mobile: 0px; --ne-section-space-desktop: 52px; --ne-section-space-mobile: 22px; --ne-shadow: 0 18px 42px rgba(17, 17, 17, 0.08); --ne-shadow-soft: 0 10px 28px rgba(17, 17, 17, 0.055); position: relative; width: 100%; max-width: 100%; color: var(--ne-text); font-family: inherit; line-height: 1.55; overflow-x: clip; } #ne-collection-template, #ne-collection-template *, #ne-collection-template *::before, #ne-collection-template *::after { box-sizing: border-box; } #ne-collection-template img { display: block; max-width: 100%; } #ne-collection-template a { color: inherit; text-decoration: none; } #ne-collection-template ul { margin: 0; padding: 0; list-style: none; } #ne-collection-template p { margin: 0; color: var(--ne-black); font-size: 0.97rem; } #ne-collection-template h2, #ne-collection-template h3, #ne-collection-template h4 { margin: 0; color: var(--ne-black); line-height: 1.14; letter-spacing: -0.026em; } #ne-collection-template h2 { font-size: clamp(1.75rem, 2.25vw, 2.45rem); } #ne-collection-template h3 { font-size: clamp(1.05rem, 1.22vw, 1.24rem); font-weight: 700; } #ne-collection-template h4 { font-size: 1rem; font-weight: 500; } /* ========================================================= STRUCTURE GÉNÉRALE — fonds full-screen via ::before ========================================================= */ #ne-collection-template .ne-section { position: relative; isolation: isolate; width: 100%; max-width: 100%; margin: 0; padding: var(--ne-section-space-desktop) 0; } #ne-collection-template .ne-section::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; } #ne-collection-template .ne-section-white::before { background: var(--ne-white); } #ne-collection-template .ne-section-green::before { background: var(--ne-green-section); } #ne-collection-template .ne-container { width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto; padding-left: var(--ne-gutter-desktop); padding-right: var(--ne-gutter-desktop); } #ne-collection-template .ne-section-heading { max-width: 900px; margin: 0 auto 36px; text-align: center; } #ne-collection-template .ne-section-heading p:not(.ne-eyebrow) { margin-top: 14px; } #ne-collection-template .ne-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ne-black); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #ne-collection-template .ne-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ne-green); box-shadow: 0 0 0 5px rgba(183, 232, 95, 0.22); flex-shrink: 0; } /* ========================================================= BOUTONS ========================================================= */ #ne-collection-template .ne-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 12px 18px; border-radius: var(--ne-radius); font-size: 0.92rem; font-weight: 850; text-align: center; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease; } #ne-collection-template .ne-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(17, 17, 17, 0.10); } #ne-collection-template .ne-btn-primary { background: var(--ne-green); color: var(--ne-black); } #ne-collection-template .ne-btn-primary:hover { background: #aee14f; } #ne-collection-template .ne-btn-secondary { border: 1px solid var(--ne-border); background: var(--ne-white); color: var(--ne-black); } #ne-collection-template .ne-btn-secondary:hover { background: var(--ne-green-soft); } /* ========================================================= BADGES IMAGES ========================================================= */ #ne-collection-template .ne-img-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border: 1px solid rgba(255, 255, 255, 0.70); border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--ne-black); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(17, 17, 17, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } #ne-collection-template .ne-img-badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ne-green-strong); flex-shrink: 0; } #ne-collection-template .ne-recipe-card:hover .ne-img-badge, #ne-collection-template .ne-product-card:hover .ne-img-badge { background: var(--ne-green); border-color: var(--ne-green-strong); box-shadow: 0 4px 14px rgba(134, 189, 50, 0.40); transform: translateY(-1px); } /* ========================================================= BADGES NUMÉROTÉS ========================================================= */ #ne-collection-template .ne-number-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 999px; background: var(--ne-black); color: var(--ne-green); font-size: 0.82rem; font-weight: 900; line-height: 1; } /* ========================================================= SECTION 1 — RECETTES (maintenant en tête) Desktop : 4 colonnes, pleine largeur (même que cross-sell) Flèches mobiles sur les bords du carousel ========================================================= */ #ne-collection-template .ne-recipe-carousel { position: relative; overflow: visible; width: 100%; } #ne-collection-template .ne-recipe-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; } #ne-collection-template .ne-recipe-card { min-width: 0; /* overflow: clip préserve border-radius sans bloquer -webkit-line-clamp */ overflow: clip; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); transition: transform 0.25s ease, box-shadow 0.25s ease; } #ne-collection-template .ne-recipe-card:hover { transform: translateY(-6px); box-shadow: var(--ne-shadow-soft); } #ne-collection-template .ne-recipe-image { position: relative; overflow: hidden; } #ne-collection-template .ne-recipe-image img { width: 100%; aspect-ratio: 1.35 / 0.76; object-fit: cover; transition: transform 0.45s ease; } #ne-collection-template .ne-recipe-card:hover .ne-recipe-image img { transform: scale(1.035); } #ne-collection-template .ne-recipe-content { padding: 22px; } /* Titre des cartes recettes : -3px vs h3 global */ #ne-collection-template .ne-recipe-content h3 { font-size: clamp(0.86rem, 1.03vw, 1.05rem); } #ne-collection-template .ne-recipe-content p { margin-top: 11px; text-align: justify; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #ne-collection-template .ne-recipe-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; } #ne-collection-template .ne-recipe-meta li { display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 10px; border-radius: 999px; background: var(--ne-green-soft); color: var(--ne-black); font-size: 0.58rem; font-weight: 650; text-align: center; line-height: 1.25; } /* ========================================================= SECTION 2 — HERO 50/50 + même ratio d'image que Jason (1/1.1) ========================================================= */ #ne-collection-template .ne-hero { padding-top: 0; } #ne-collection-template .ne-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } #ne-collection-template .ne-hero-text { max-width: 680px; margin-top: 18px; } #ne-collection-template .ne-check-list { display: grid; gap: 10px; max-width: 680px; margin-top: 24px; } #ne-collection-template .ne-check-list li { position: relative; padding: 11px 14px 11px 44px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); color: var(--ne-black); font-size: 0.95rem; font-weight: 650; transition: transform 0.22s ease, background 0.22s ease; } #ne-collection-template .ne-check-list li::before { content: "✓"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--ne-green); color: var(--ne-black); font-size: 0.62rem; font-weight: 900; } #ne-collection-template .ne-check-list li:hover { transform: translateX(5px); background: var(--ne-green-soft); } /* Mobile : désactive le glissement latéral pour éviter le clip de bordure */ @media (max-width: 767px) { #ne-collection-template .ne-check-list li:hover { transform: none; background: var(--ne-green-soft); } } #ne-collection-template .ne-hero-visual { position: relative; overflow: hidden; border-radius: var(--ne-radius); background: var(--ne-green-soft); /* Pas de box-shadow : supprime l'ombre parasite */ } #ne-collection-template .ne-hero-visual img { width: 100%; /* Même ratio que l'image Jason pour cohérence visuelle */ aspect-ratio: 1 / 1.1; object-fit: cover; transition: transform 0.45s ease, filter 0.45s ease; } #ne-collection-template .ne-hero-visual:hover img { transform: scale(1.035); filter: saturate(1.04); } #ne-collection-template .ne-visual-overlay { position: absolute; inset: auto 0 0; height: 52%; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.42) 100%); pointer-events: none; } #ne-collection-template .ne-visual-card { position: absolute; left: 18px; bottom: 18px; max-width: min(420px, calc(100% - 36px)); padding: 15px 19px; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: var(--ne-radius); background: rgba(255, 255, 255, 0.94); box-shadow: var(--ne-shadow-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #ne-collection-template .ne-visual-card > span { display: inline-flex; color: var(--ne-green-strong); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; } #ne-collection-template .ne-visual-card > strong { display: block; margin-top: 4px; color: var(--ne-black); font-size: 1.04rem; font-weight: 750; line-height: 1.25; } #ne-collection-template .ne-visual-card ul { display: grid; gap: 5px; margin-top: 10px; } #ne-collection-template .ne-visual-card li { color: rgba(17, 17, 17, 0.76); font-size: 0.74rem; line-height: 1.3; } /* ========================================================= CARROUSELS — boutons Chevron blanc, contour vert, fond transparent Mobile uniquement (les grilles desktop n'ont pas de flèches) ========================================================= */ #ne-collection-template .ne-carousel-btn { display: none; align-items: center; justify-content: center; position: absolute; top: 28%; /* centré sur la zone image */ z-index: 3; transform: translateY(-50%); width: 34px; height: 34px; border: 2px solid var(--ne-green-strong); border-radius: 999px; background: transparent; color: #ffffff; /* chevron blanc sur fond image */ box-shadow: none; cursor: pointer; font-size: 1.3rem; line-height: 1; transition: background 0.2s ease; } #ne-collection-template .ne-carousel-btn:hover { background: rgba(134, 189, 50, 0.25); } #ne-collection-template .ne-carousel-prev { left: 4px; } #ne-collection-template .ne-carousel-next { right: 4px; } /* ========================================================= SECTION 3 — JASON 50/50 sans encadré ========================================================= */ #ne-collection-template .ne-jason-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } #ne-collection-template .ne-jason-photo { overflow: hidden; border-radius: var(--ne-radius); background: var(--ne-green-soft); } #ne-collection-template .ne-jason-photo img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; transition: transform 0.45s ease; } #ne-collection-template .ne-jason-inner:hover .ne-jason-photo img { transform: scale(1.035); } #ne-collection-template .ne-jason-content p:not(.ne-eyebrow):not(.ne-jason-note) { margin-top: 15px; } #ne-collection-template .ne-phone-link { font-weight: 900; text-decoration: underline; text-decoration-color: var(--ne-green-strong); text-underline-offset: 4px; } #ne-collection-template .ne-jason-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } #ne-collection-template .ne-jason-note { margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--ne-green-strong); border-radius: var(--ne-radius); background: rgba(255, 255, 255, 0.76); font-size: 0.91rem; } /* ========================================================= RÉSEAUX SOCIAUX + PARTAGE ========================================================= */ #ne-collection-template .ne-socials, #ne-collection-template .ne-share-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } #ne-collection-template .ne-socials a, #ne-collection-template .ne-share-links a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid rgba(134, 189, 50, 0.40); border-radius: 999px; background: rgba(255, 255, 255, 0.86); color: var(--ne-black); font-size: 0.78rem; font-weight: 700; transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } #ne-collection-template .ne-socials a:hover, #ne-collection-template .ne-share-links a:hover { transform: translateY(-2px); background: var(--ne-green-soft); border-color: var(--ne-border); box-shadow: 0 6px 16px rgba(17, 17, 17, 0.08); } #ne-collection-template .ne-socials svg, #ne-collection-template .ne-share-links svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.78; } /* ========================================================= SECTION 4 — CROSS-SELLING Grille 4 colonnes desktop, 2 colonnes mobile — pas de carousel ========================================================= */ #ne-collection-template .ne-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; } #ne-collection-template .ne-product-card { min-width: 0; overflow: clip; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); transition: transform 0.25s ease, box-shadow 0.25s ease; } /* Hover identique aux cartes recettes : élévation + ombre, sans outline */ #ne-collection-template .ne-product-card:hover { transform: translateY(-6px); box-shadow: var(--ne-shadow-soft); } #ne-collection-template .ne-product-image { position: relative; display: block; overflow: hidden; } #ne-collection-template .ne-product-image img { width: 100%; aspect-ratio: 1.35 / 0.76; object-fit: cover; transition: transform 0.45s ease; } #ne-collection-template .ne-product-card:hover .ne-product-image img { transform: scale(1.035); } #ne-collection-template .ne-product-content { padding: 20px; } #ne-collection-template .ne-product-content p { margin-top: 11px; text-align: justify; /* Clamp à 3 lignes max avec ellipsis */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #ne-collection-template .ne-product-content ul { display: grid; gap: 8px; margin-top: 16px; } #ne-collection-template .ne-product-content li { position: relative; padding-left: 18px; color: var(--ne-black); font-size: 0.88rem; font-weight: 600; } #ne-collection-template .ne-product-content li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; border-radius: 999px; background: var(--ne-green-strong); } #ne-collection-template .ne-product-content .ne-btn { width: 100%; margin-top: 20px; } /* ========================================================= SECTION 5 — PROBLÈME / SOLUTION ========================================================= */ #ne-collection-template .ne-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } #ne-collection-template .ne-card { padding: 34px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); transition: transform 0.25s ease, background 0.25s ease; } #ne-collection-template .ne-card:hover { transform: translateY(-5px); background: rgba(183, 232, 95, 0.08); } #ne-collection-template .ne-card h2 { font-size: clamp(1.38rem, 1.65vw, 1.68rem); } #ne-collection-template .ne-card p:not(.ne-eyebrow) { margin-top: 16px; } /* ========================================================= SECTION 6 — CE QUE VOUS RECEVEZ ========================================================= */ #ne-collection-template .ne-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } #ne-collection-template .ne-feature-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; padding: 30px 26px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); text-align: center; transition: transform 0.25s ease, background 0.25s ease; } #ne-collection-template .ne-feature-card:hover { transform: translateY(-5px); background: rgba(183, 232, 95, 0.08); } #ne-collection-template .ne-feature-card p { max-width: 340px; margin-top: 12px; } /* ========================================================= SECTION 7 — BÉNÉFICES ========================================================= */ #ne-collection-template .ne-benefits-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 32px; align-items: stretch; } #ne-collection-template .ne-benefits-intro { display: flex; flex-direction: column; justify-content: center; padding: 36px; border-radius: var(--ne-radius); background: var(--ne-black); } #ne-collection-template .ne-benefits-intro .ne-eyebrow, #ne-collection-template .ne-benefits-intro h2, #ne-collection-template .ne-benefits-intro p { color: var(--ne-white); } #ne-collection-template .ne-benefits-intro p { margin-top: 16px; } #ne-collection-template .ne-benefits-right { display: grid; gap: 20px; } #ne-collection-template .ne-benefits-jason { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; padding: 24px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); box-shadow: var(--ne-shadow-soft); } #ne-collection-template .ne-benefits-jason-photo { overflow: hidden; border-radius: var(--ne-radius); background: var(--ne-green-soft); } #ne-collection-template .ne-benefits-jason-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.45s ease; } #ne-collection-template .ne-benefits-jason:hover img { transform: scale(1.035); } #ne-collection-template .ne-benefits-jason-content p:not(.ne-eyebrow) { margin-top: 10px; } #ne-collection-template .ne-benefits-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } #ne-collection-template .ne-mini-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 170px; padding: 26px 24px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); text-align: center; transition: transform 0.25s ease, background 0.25s ease; } #ne-collection-template .ne-mini-card:hover { transform: translateY(-4px); background: var(--ne-green-soft); } #ne-collection-template .ne-mini-card strong { display: block; width: 100%; color: var(--ne-black); font-size: 1.05rem; text-align: center; } #ne-collection-template .ne-mini-card p { width: 100%; max-width: 310px; margin: 10px auto 0; } /* ========================================================= SECTION 8 — FAQ ========================================================= */ #ne-collection-template .ne-faq-list { max-width: 1040px; margin: 0 auto; } #ne-collection-template .ne-faq-item { overflow: hidden; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); } #ne-collection-template .ne-faq-item + .ne-faq-item { margin-top: 12px; } #ne-collection-template .ne-faq-item summary { position: relative; padding: 20px 58px 20px 22px; cursor: pointer; background: var(--ne-green-soft); list-style: none; transition: background 0.22s ease; } #ne-collection-template .ne-faq-item summary:hover { background: var(--ne-green-card); } #ne-collection-template .ne-faq-item summary::-webkit-details-marker { display: none; } #ne-collection-template .ne-faq-item summary h4 { display: inline; font-size: 1.125rem; font-weight: 500; } #ne-collection-template .ne-faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--ne-black); font-size: 1.55rem; font-weight: 400; } #ne-collection-template .ne-faq-item[open] summary::after { content: "\2212"; } #ne-collection-template .ne-faq-item div { padding: 18px 22px 22px; } /* ========================================================= RESPONSIVE TABLETTE ≤ 1100px ========================================================= */ @media (max-width: 1100px) { #ne-collection-template .ne-container { padding-left: var(--ne-gutter-tablet); padding-right: var(--ne-gutter-tablet); } #ne-collection-template .ne-hero-grid, #ne-collection-template .ne-jason-inner, #ne-collection-template .ne-benefits-grid { grid-template-columns: 1fr; gap: 32px; } /* Tablette : 2 colonnes recettes, 2 cartes cross-sell */ #ne-collection-template .ne-recipe-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ne-collection-template .ne-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ne-collection-template .ne-benefits-jason { grid-template-columns: 160px 1fr; } } /* ========================================================= RESPONSIVE MOBILE ≤ 767px - Sections 5, 6, 7 masquées - Fonds : blanc uniforme - Polices réduites ~2px sur check-list, ~1px global - Carousels : scroll natif 1 carte + padding latéral pour préserver les bordures gauche/droite - Hero : pas de box-shadow, visual-card réactivée - Image Jason : même ratio que Hero (1/1.1), pleine largeur ========================================================= */ @media (max-width: 767px) { /* Sections masquées sur mobile */ #ne-collection-template .ne-hide-mobile { display: none !important; } /* Réduction globale ~1px */ #ne-collection-template { font-size: 0.94rem; overflow-x: clip; } #ne-collection-template p { font-size: 0.93rem; } #ne-collection-template h2 { font-size: clamp(1.52rem, 5.5vw, 1.9rem); } #ne-collection-template h3 { font-size: 1.02rem; } #ne-collection-template h4 { font-size: 0.95rem; } /* Sections */ #ne-collection-template .ne-section { width: 100%; max-width: 100%; margin: 0; padding: var(--ne-section-space-mobile) 0; } /* Fonds verts → blanc uniforme */ #ne-collection-template .ne-section::before { width: 100%; background: var(--ne-white) !important; border-radius: 0; } /* Conteneur mobile sans gutter */ #ne-collection-template .ne-container { width: 100%; max-width: 100%; padding-left: var(--ne-gutter-mobile); padding-right: var(--ne-gutter-mobile); } /* Grilles → 1 colonne */ #ne-collection-template .ne-split-grid, #ne-collection-template .ne-feature-grid, #ne-collection-template .ne-benefits-cards { grid-template-columns: 1fr; } #ne-collection-template .ne-section-heading { margin-bottom: 28px; } /* Centrage titres */ #ne-collection-template .ne-hero-content, #ne-collection-template .ne-section-heading, #ne-collection-template .ne-benefits-intro, #ne-collection-template .ne-benefits-jason-content { text-align: center; } #ne-collection-template .ne-eyebrow { justify-content: center; } /* Textes courants justifiés */ #ne-collection-template p:not(.ne-eyebrow), #ne-collection-template .ne-hero-text, #ne-collection-template .ne-card p:not(.ne-eyebrow), #ne-collection-template .ne-recipe-content p, #ne-collection-template .ne-product-content p, #ne-collection-template .ne-feature-card p, #ne-collection-template .ne-benefits-intro p, #ne-collection-template .ne-benefits-jason-content p:not(.ne-eyebrow), #ne-collection-template .ne-mini-card p, #ne-collection-template .ne-faq-item div p, #ne-collection-template .ne-jason-content p:not(.ne-eyebrow) { text-align: justify; } #ne-collection-template .ne-check-list li { text-align: left; } /* Check-list : réduction -2px supplémentaires */ #ne-collection-template .ne-check-list li { font-size: 0.86rem; } /* ------------------------------------------------------- HERO MOBILE Pas d'ombre, visual-card et badge réactivés ------------------------------------------------------- */ #ne-collection-template .ne-hero-grid { grid-template-columns: 1fr; gap: 24px; } #ne-collection-template .ne-hero-visual { box-shadow: none; } #ne-collection-template .ne-hero-visual > .ne-img-badge { display: inline-flex; } #ne-collection-template .ne-visual-card { display: block; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 12px 14px; } #ne-collection-template .ne-visual-card > span { font-size: 0.62rem; } #ne-collection-template .ne-visual-card > strong { font-size: 0.92rem; } #ne-collection-template .ne-visual-card li { font-size: 0.70rem; } /* ------------------------------------------------------- CAROUSELS MOBILES Recettes : carousel scroll natif + flèches Cross-sell : grille → carousel scroll natif + flèches ------------------------------------------------------- */ #ne-collection-template .ne-recipe-carousel { width: 100%; overflow: hidden; padding: 0; position: relative; } /* Cross-sell mobile : 1 colonne */ #ne-collection-template .ne-product-grid { grid-template-columns: 1fr; gap: 14px; } #ne-collection-template .ne-recipe-track { display: flex; grid-template-columns: unset; gap: 0; padding: 0; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } #ne-collection-template .ne-recipe-track::-webkit-scrollbar { display: none; } /* 1 carte pleine largeur exacte */ #ne-collection-template .ne-recipe-card { flex: 0 0 100%; width: 100%; min-width: 100%; scroll-snap-align: start; transition: none; } #ne-collection-template .ne-recipe-card:hover { transform: none; box-shadow: none; outline: none; } #ne-collection-template .ne-product-card { transition: none; } #ne-collection-template .ne-product-card:hover { transform: none; box-shadow: none; outline: none; } #ne-collection-template .ne-recipe-meta { grid-template-columns: 1fr; } #ne-collection-template .ne-recipe-meta li { justify-content: center; text-align: center; } /* Boutons carousel mobiles recettes — fond vert plein sur image */ #ne-collection-template .ne-carousel-prev, #ne-collection-template .ne-carousel-next { display: inline-flex; width: 30px; height: 30px; font-size: 1.1rem; top: 28%; background: var(--ne-green-strong); border-color: var(--ne-green-strong); color: #ffffff; } #ne-collection-template .ne-carousel-prev { left: 4px; } #ne-collection-template .ne-carousel-next { right: 4px; } /* ------------------------------------------------------- JASON MOBILE Image pleine largeur, même ratio que Hero (1/1.1) ------------------------------------------------------- */ #ne-collection-template .ne-jason-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; } #ne-collection-template .ne-jason-photo { /* Pleine largeur, même proportion que l'image Hero */ max-width: 100%; margin: 0; border-radius: var(--ne-radius); } #ne-collection-template .ne-jason-photo img { aspect-ratio: 1 / 1.1; } #ne-collection-template .ne-jason-actions, #ne-collection-template .ne-socials, #ne-collection-template .ne-share-links { justify-content: center; } /* ------------------------------------------------------- BÉNÉFICES MOBILE (section visible si non masquée) ------------------------------------------------------- */ #ne-collection-template .ne-benefits-intro { padding: 26px 22px; } #ne-collection-template .ne-benefits-jason { grid-template-columns: 1fr; gap: 18px; padding: 22px; text-align: center; } #ne-collection-template .ne-benefits-jason-photo { max-width: 200px; margin: 0 auto; } #ne-collection-template .ne-mini-card { min-height: auto; padding: 24px 20px; } #ne-collection-template .ne-feature-card { min-height: auto; padding: 28px 22px; } #ne-collection-template .ne-faq-item summary h4 { font-size: 1rem; } } /* ========================================================= EXTENSIONS COLLECTION · H1 hero · ne-jason-content h2 (légère adaptation titre) Tout le reste est couvert par le CSS produit ci-dessus ========================================================= */ #ne-collection-template h1 { margin: 0; color: var(--ne-black); font-size: clamp(1.9rem, 2.6vw, 3rem); font-weight: 900; line-height: 1.10; letter-spacing: -0.03em; } @media (max-width: 767px) { #ne-collection-template h1 { font-size: clamp(1.52rem, 5.5vw, 2rem); } } /* ========================================================= HERO COLLECTION — centré, sans image ========================================================= */ #ne-collection-template .ne-coll-hero { padding-bottom: 32px; } #ne-collection-template .ne-coll-hero-inner { max-width: 860px; margin: 0 auto; text-align: center; } #ne-collection-template .ne-coll-hero-inner .ne-eyebrow { justify-content: center; } #ne-collection-template .ne-coll-hero-text { margin-top: 18px; font-size: 1.05rem; color: rgba(17, 17, 17, 0.78); line-height: 1.6; } /* Eyebrow masqué sur mobile */ #ne-collection-template .ne-hide-mobile-inline { display: inline-flex; } @media (max-width: 767px) { #ne-collection-template .ne-hide-mobile-inline { display: none !important; } #ne-collection-template .ne-coll-hero { padding-bottom: 0; } #ne-collection-template .ne-coll-hero-inner { padding: 0 16px; text-align: center; } #ne-collection-template .ne-coll-hero-text { font-size: 0.95rem; text-align: justify; } } /* ========================================================= AJUSTEMENTS COLLECTION · h2 dans ne-product-content = même style que h3 produit · ne-crosssell sans heading : padding-top réduit ========================================================= */ #ne-collection-template .ne-product-content h2 { font-size: clamp(1.05rem, 1.22vw, 1.24rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: var(--ne-black); margin: 0 0 8px; } /* Section listing sans heading — padding-top réduit pour coller au hero */ #ne-collection-template .ne-crosssell { padding-top: 32px; } @media (max-width: 767px) { #ne-collection-template .ne-crosssell { padding-top: 18px; } } /* ========================================================= NUTRI-EFFICACE — PAGE LISTE DES COLLECTIONS Complément au ne-collection.css ID racine : #ne-collections-list Nouveau pattern : ne-coll-listing-grid / ne-coll-card Tout le reste (hero, jason, faq, eyebrow, btn...) est couvert par ne-collection.css ========================================================= */ #ne-collections-list { --ne-black: #111111; --ne-white: #ffffff; --ne-green: #b7e85f; --ne-green-strong: #86bd32; --ne-green-soft: rgba(183, 232, 95, 0.18); --ne-green-section: #eef9df; --ne-border: rgba(134, 189, 50, 0.45); --ne-border-soft: rgba(134, 189, 50, 0.26); --ne-radius: 12px; --ne-shadow-soft: 0 10px 28px rgba(17, 17, 17, 0.055); --ne-gutter-desktop: 32px; --ne-gutter-tablet: 24px; --ne-gutter-mobile: 0px; --ne-section-space-desktop: 52px; --ne-section-space-mobile: 22px; position: relative; width: 100%; overflow-x: clip; font-family: inherit; color: var(--ne-black); line-height: 1.55; } #ne-collections-list *, #ne-collections-list *::before, #ne-collections-list *::after { box-sizing: border-box; } /* Reprend les tokens de base identiques aux collections */ #ne-collections-list img { display: block; max-width: 100%; } #ne-collections-list a { color: inherit; text-decoration: none; } #ne-collections-list ul { margin: 0; padding: 0; list-style: none; } #ne-collections-list p { margin: 0; font-size: 0.97rem; } #ne-collections-list h1, #ne-collections-list h2, #ne-collections-list h3, #ne-collections-list h4 { margin: 0; color: var(--ne-black); line-height: 1.14; letter-spacing: -0.026em; } #ne-collections-list h1 { font-size: clamp(1.9rem, 2.6vw, 3rem); font-weight: 900; } #ne-collections-list h2 { font-size: clamp(1.75rem, 2.25vw, 2.45rem); } /* Sections */ #ne-collections-list .ne-section { position: relative; isolation: isolate; width: 100%; padding: var(--ne-section-space-desktop) 0; } #ne-collections-list .ne-section::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); } #ne-collections-list .ne-section-white::before { background: var(--ne-white); } #ne-collections-list .ne-section-green::before { background: var(--ne-green-section); } #ne-collections-list .ne-container { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--ne-gutter-desktop); } /* Hero centré — reprend ne-coll-hero */ #ne-collections-list .ne-coll-hero { padding-bottom: 32px; } #ne-collections-list .ne-coll-hero-inner { max-width: 860px; margin: 0 auto; text-align: center; } #ne-collections-list .ne-coll-hero-text { margin-top: 18px; font-size: 1.05rem; color: rgba(17, 17, 17, 0.78); line-height: 1.6; } /* Eyebrow */ #ne-collections-list .ne-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ne-black); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #ne-collections-list .ne-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ne-green); box-shadow: 0 0 0 5px rgba(183, 232, 95, 0.22); flex-shrink: 0; } #ne-collections-list .ne-hide-mobile-inline { display: inline-flex; } /* Boutons */ #ne-collections-list .ne-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 12px 22px; border-radius: var(--ne-radius); font-size: 0.95rem; font-weight: 850; text-align: center; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } #ne-collections-list .ne-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(17, 17, 17, 0.10); } #ne-collections-list .ne-btn-primary { background: var(--ne-green); color: var(--ne-black); } #ne-collections-list .ne-btn-primary:hover { background: #aee14f; } #ne-collections-list .ne-btn-secondary { border: 1px solid var(--ne-border); background: var(--ne-white); color: var(--ne-black); } #ne-collections-list .ne-btn-secondary:hover { background: var(--ne-green-soft); } /* Badge image */ #ne-collections-list .ne-img-badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border: 1px solid rgba(255, 255, 255, 0.70); border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--ne-black); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(17, 17, 17, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.22s ease, transform 0.22s ease; } #ne-collections-list .ne-img-badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ne-green-strong); flex-shrink: 0; } #ne-collections-list .ne-coll-card:hover .ne-img-badge { background: var(--ne-green); border-color: var(--ne-green-strong); transform: translateY(-1px); } /* Téléphone */ #ne-collections-list .ne-phone-link { font-weight: 900; text-decoration: underline; text-decoration-color: var(--ne-green-strong); text-underline-offset: 4px; } /* Section heading */ #ne-collections-list .ne-section-heading { max-width: 900px; margin: 0 auto 36px; text-align: center; } #ne-collections-list .ne-section-heading p:not(.ne-eyebrow) { margin-top: 14px; } /* ========================================================= GRANDES CARTES COLLECTIONS ========================================================= */ #ne-collections-list .ne-coll-listing { padding-top: 28px; } #ne-collections-list .ne-coll-listing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } #ne-collections-list .ne-coll-card { display: flex; flex-direction: column; overflow: clip; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); transition: transform 0.25s ease, box-shadow 0.25s ease; } #ne-collections-list .ne-coll-card:hover { transform: translateY(-6px); box-shadow: var(--ne-shadow-soft); } /* Image grande format */ #ne-collections-list .ne-coll-card-image { position: relative; display: block; overflow: hidden; } #ne-collections-list .ne-coll-card-image img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; transition: transform 0.45s ease; } #ne-collections-list .ne-coll-card:hover .ne-coll-card-image img { transform: scale(1.03); } /* Contenu carte */ #ne-collections-list .ne-coll-card-content { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 32px; gap: 16px; } #ne-collections-list .ne-coll-card-header { display: flex; flex-direction: column; gap: 6px; } #ne-collections-list .ne-coll-card-header h2 { font-size: clamp(1.4rem, 1.8vw, 2rem); } #ne-collections-list .ne-coll-card-desc { font-size: 0.97rem; color: rgba(17, 17, 17, 0.78); line-height: 1.6; } /* Features liste */ #ne-collections-list .ne-coll-card-features { display: grid; gap: 8px; } #ne-collections-list .ne-coll-card-features li { position: relative; padding-left: 18px; font-size: 0.88rem; font-weight: 600; color: var(--ne-black); } #ne-collections-list .ne-coll-card-features li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 999px; background: var(--ne-green-strong); } /* Tags thématiques */ #ne-collections-list .ne-coll-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } #ne-collections-list .ne-coll-card-tags span { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--ne-green-soft); color: var(--ne-black); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; } /* CTA en bas de carte */ #ne-collections-list .ne-coll-card-content .ne-btn { margin-top: auto; align-self: flex-start; padding: 13px 26px; font-size: 0.95rem; } /* ========================================================= JASON — reprend les classes ne-jason du template produit On réutilise les mêmes classes, le CSS produit/collection doit être chargé en complément On ajoute ici uniquement les surcharges nécessaires ========================================================= */ #ne-collections-list .ne-jason-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } #ne-collections-list .ne-jason-photo { position: relative; overflow: hidden; border-radius: var(--ne-radius); } #ne-collections-list .ne-jason-photo img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; transition: transform 0.45s ease; } #ne-collections-list .ne-jason-inner:hover .ne-jason-photo img { transform: scale(1.03); } #ne-collections-list .ne-jason-content { display: flex; flex-direction: column; gap: 16px; } #ne-collections-list .ne-jason-content h2 { font-size: clamp(1.75rem, 2vw, 2.3rem); } #ne-collections-list .ne-jason-content p { font-size: 0.97rem; } #ne-collections-list .ne-jason-actions { display: flex; flex-wrap: wrap; gap: 12px; } #ne-collections-list .ne-jason-note { font-size: 0.82rem; color: rgba(17, 17, 17, 0.60); font-style: italic; } #ne-collections-list .ne-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } #ne-collections-list .ne-socials a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border: 1px solid var(--ne-border); border-radius: 999px; background: rgba(255,255,255,0.70); font-size: 0.78rem; font-weight: 700; color: var(--ne-black); transition: background 0.2s ease, transform 0.2s ease; } #ne-collections-list .ne-socials a:hover { background: var(--ne-green-soft); transform: translateY(-2px); } #ne-collections-list .ne-socials svg { width: 15px; height: 15px; flex-shrink: 0; } /* ========================================================= FAQ ========================================================= */ #ne-collections-list .ne-faq-list { max-width: 1040px; margin: 0 auto; } #ne-collections-list .ne-faq-item { overflow: hidden; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); } #ne-collections-list .ne-faq-item + .ne-faq-item { margin-top: 12px; } #ne-collections-list .ne-faq-item summary { position: relative; padding: 20px 58px 20px 22px; cursor: pointer; background: rgba(183, 232, 95, 0.18); list-style: none; transition: background 0.22s ease; } #ne-collections-list .ne-faq-item summary:hover { background: rgba(183, 232, 95, 0.28); } #ne-collections-list .ne-faq-item summary::-webkit-details-marker { display: none; } #ne-collections-list .ne-faq-item summary h4 { display: inline; font-size: 1.125rem; font-weight: 500; color: var(--ne-black); } #ne-collections-list .ne-faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--ne-black); font-size: 1.55rem; font-weight: 400; } #ne-collections-list .ne-faq-item[open] summary::after { content: "\2212"; } #ne-collections-list .ne-faq-item div { padding: 18px 22px 22px; } #ne-collections-list .ne-faq-item div p { text-align: justify; font-size: 0.95rem; } /* ========================================================= RESPONSIVE TABLETTE ≤ 1100px ========================================================= */ @media (max-width: 1100px) { #ne-collections-list .ne-container { padding: 0 var(--ne-gutter-tablet); } #ne-collections-list .ne-coll-listing-grid { grid-template-columns: 1fr; gap: 22px; } #ne-collections-list .ne-coll-card-image img { aspect-ratio: 16 / 6; } #ne-collections-list .ne-jason-inner { grid-template-columns: 1fr; gap: 32px; } } /* ========================================================= RESPONSIVE MOBILE ≤ 767px ========================================================= */ @media (max-width: 767px) { #ne-collections-list { font-size: 0.94rem; overflow-x: clip; } #ne-collections-list .ne-section { padding: var(--ne-section-space-mobile) 0; } #ne-collections-list .ne-section::before { width: 100%; background: var(--ne-white) !important; } #ne-collections-list .ne-container { padding: 0 var(--ne-gutter-mobile); } #ne-collections-list .ne-coll-hero { padding-bottom: 0; } #ne-collections-list .ne-coll-hero-inner { padding: 0 16px; text-align: center; } #ne-collections-list .ne-hide-mobile-inline { display: none !important; } #ne-collections-list h1 { font-size: clamp(1.52rem, 5.5vw, 2rem); } #ne-collections-list .ne-coll-hero-text { font-size: 0.94rem; } #ne-collections-list .ne-coll-listing { padding-top: 0; } #ne-collections-list .ne-coll-listing-grid { grid-template-columns: 1fr; gap: 14px; padding: 0 16px; } #ne-collections-list .ne-coll-card:hover { transform: none; box-shadow: none; } #ne-collections-list .ne-coll-card-image img { aspect-ratio: 16 / 7; } #ne-collections-list .ne-coll-card-content { padding: 20px 16px 22px; } #ne-collections-list .ne-coll-card-content .ne-btn { width: 100%; align-self: stretch; justify-content: center; } #ne-collections-list .ne-jason-inner { grid-template-columns: 1fr; gap: 24px; padding: 0 16px; text-align: center; } #ne-collections-list .ne-jason-actions { flex-direction: column; } #ne-collections-list .ne-jason-actions .ne-btn { width: 100%; justify-content: center; } #ne-collections-list .ne-socials { justify-content: center; } #ne-collections-list .ne-section-heading { padding: 0 16px; } #ne-collections-list .ne-faq-list { padding: 0 16px; } #ne-collections-list .ne-faq-item summary h4 { font-size: 1rem; } } /* ========================================================= NUTRI-EFFICACE — PAGE MON HISTOIRE ID racine : #ne-histoire Réutilise les classes du template produit : ne-included, ne-feature-grid, ne-feature-card, ne-number-badge, ne-jason, ne-jason-inner, ne-jason-photo, ne-jason-content, ne-jason-actions, ne-jason-note, ne-phone-link, ne-socials, ne-hide-mobile Nouveaux patterns : ne-histoire-split, ne-histoire-creation, ne-histoire-philosophie, ne-histoire-cta ========================================================= */ #ne-histoire { --ne-black: #111111; --ne-white: #ffffff; --ne-green: #b7e85f; --ne-green-strong: #86bd32; --ne-green-soft: rgba(183, 232, 95, 0.18); --ne-green-card: rgba(183, 232, 95, 0.28); --ne-green-section: #eef9df; --ne-border: rgba(134, 189, 50, 0.45); --ne-border-soft: rgba(134, 189, 50, 0.26); --ne-radius: 12px; --ne-shadow-soft: 0 10px 28px rgba(17, 17, 17, 0.055); --ne-gutter-desktop: 32px; --ne-gutter-tablet: 24px; --ne-gutter-mobile: 0px; --ne-section-space-desktop: 52px; --ne-section-space-mobile: 22px; position: relative; width: 100%; overflow-x: clip; font-family: inherit; color: var(--ne-black); line-height: 1.55; } #ne-histoire *, #ne-histoire *::before, #ne-histoire *::after { box-sizing: border-box; } #ne-histoire img { display: block; max-width: 100%; } #ne-histoire a { color: inherit; text-decoration: none; } #ne-histoire ul { margin: 0; padding: 0; list-style: none; } #ne-histoire p { margin: 0; font-size: 0.97rem; color: var(--ne-black); } #ne-histoire h1, #ne-histoire h2, #ne-histoire h3, #ne-histoire h4 { margin: 0; color: var(--ne-black); line-height: 1.14; letter-spacing: -0.026em; } #ne-histoire h1 { font-size: clamp(1.9rem, 2.6vw, 3rem); font-weight: 900; } #ne-histoire h2 { font-size: clamp(1.5rem, 2vw, 2.2rem); } #ne-histoire h3 { font-size: clamp(1.05rem, 1.22vw, 1.24rem); font-weight: 700; } /* Sections */ #ne-histoire .ne-section { position: relative; isolation: isolate; width: 100%; padding: var(--ne-section-space-desktop) 0; } #ne-histoire .ne-section::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); } #ne-histoire .ne-section-white::before { background: var(--ne-white); } #ne-histoire .ne-section-green::before { background: var(--ne-green-section); } #ne-histoire .ne-container { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--ne-gutter-desktop); } #ne-histoire .ne-section-heading { max-width: 900px; margin: 0 auto 36px; text-align: center; } #ne-histoire .ne-section-heading p:not(.ne-eyebrow) { margin-top: 14px; } /* Eyebrow */ #ne-histoire .ne-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ne-black); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #ne-histoire .ne-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ne-green); box-shadow: 0 0 0 5px rgba(183, 232, 95, 0.22); flex-shrink: 0; } /* Boutons */ #ne-histoire .ne-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 12px 22px; border-radius: var(--ne-radius); font-size: 0.92rem; font-weight: 850; text-align: center; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } #ne-histoire .ne-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(17, 17, 17, 0.10); } #ne-histoire .ne-btn-primary { background: var(--ne-green); color: var(--ne-black); } #ne-histoire .ne-btn-primary:hover { background: #aee14f; } #ne-histoire .ne-btn-secondary { border: 1px solid var(--ne-border); background: var(--ne-white); color: var(--ne-black); } #ne-histoire .ne-btn-secondary:hover { background: var(--ne-green-soft); } /* Téléphone */ #ne-histoire .ne-phone-link { font-weight: 900; text-decoration: underline; text-decoration-color: var(--ne-green-strong); text-underline-offset: 4px; } /* Mobile hidden */ #ne-histoire .ne-hide-mobile { display: block; } /* ========================================================= SECTION 1 — HERO ========================================================= */ #ne-histoire .ne-histoire-hero-inner { max-width: 860px; margin: 0 auto; text-align: center; } #ne-histoire .ne-histoire-intro { margin-top: 22px; font-size: 1.08rem; color: rgba(17, 17, 17, 0.80); line-height: 1.65; } /* ========================================================= SECTIONS 2 & 3 — SPLIT (image + texte alternés) ========================================================= */ #ne-histoire .ne-histoire-split-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } /* Section inversée : supprimée — ordre géré directement dans le HTML */ /* Image à droite desktop — texte gauche, image droite */ #ne-histoire .ne-histoire-split--img-right .ne-histoire-text { order: 1; } #ne-histoire .ne-histoire-split--img-right .ne-histoire-visual { order: 2; } #ne-histoire .ne-histoire-visual { overflow: hidden; border-radius: var(--ne-radius); } #ne-histoire .ne-histoire-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.45s ease; } #ne-histoire .ne-histoire-split:hover .ne-histoire-visual img { transform: scale(1.03); } #ne-histoire .ne-histoire-text { display: flex; flex-direction: column; gap: 16px; } #ne-histoire .ne-histoire-text h2 { margin-top: 6px; } #ne-histoire .ne-histoire-text p { color: rgba(17, 17, 17, 0.80); line-height: 1.65; text-align: justify; } /* ========================================================= SECTION 4 — CRÉATION NUTRI-EFFICACE ========================================================= */ #ne-histoire .ne-histoire-creation-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 52px; align-items: start; } #ne-histoire .ne-histoire-creation-text { display: flex; flex-direction: column; gap: 16px; } #ne-histoire .ne-histoire-creation-text h2 { margin-top: 6px; } #ne-histoire .ne-histoire-creation-text p { color: rgba(17, 17, 17, 0.80); line-height: 1.65; text-align: justify; } /* Points liste */ #ne-histoire .ne-histoire-points { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; border-left: 4px solid var(--ne-green-strong); border-radius: 0 var(--ne-radius) var(--ne-radius) 0; background: rgba(255, 255, 255, 0.76); } #ne-histoire .ne-histoire-points li { position: relative; padding-left: 18px; font-size: 0.95rem; font-weight: 600; color: var(--ne-black); } #ne-histoire .ne-histoire-points li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 999px; background: var(--ne-green-strong); } /* Citation */ #ne-histoire .ne-histoire-creation-quote { position: sticky; top: 32px; } #ne-histoire .ne-histoire-creation-quote blockquote { margin: 0; padding: 32px 28px; border-radius: var(--ne-radius); border-left: 4px solid var(--ne-green-strong); background: rgba(255, 255, 255, 0.88); box-shadow: var(--ne-shadow-soft); } #ne-histoire .ne-histoire-creation-quote blockquote p { font-size: 1.15rem; font-style: italic; font-weight: 500; line-height: 1.6; color: var(--ne-black); text-align: left; } #ne-histoire .ne-histoire-creation-quote blockquote cite { display: block; margin-top: 16px; font-size: 0.78rem; font-weight: 800; font-style: normal; letter-spacing: 0.05em; color: var(--ne-green-strong); text-transform: uppercase; } /* ========================================================= SECTION 5 — FEATURES (réutilise classes produit) ========================================================= */ #ne-histoire .ne-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } #ne-histoire .ne-feature-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 26px 22px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: var(--ne-white); transition: transform 0.25s ease, background 0.25s ease; } #ne-histoire .ne-feature-card:hover { transform: translateY(-5px); background: rgba(183, 232, 95, 0.06); } #ne-histoire .ne-number-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--ne-black); color: var(--ne-green); font-size: 0.76rem; font-weight: 900; flex-shrink: 0; } #ne-histoire .ne-feature-card h3 { font-size: 1.02rem; } #ne-histoire .ne-feature-card p { font-size: 0.88rem; color: rgba(17, 17, 17, 0.72); line-height: 1.55; text-align: center; } /* ========================================================= SECTION 6 — PHILOSOPHIE ========================================================= */ #ne-histoire .ne-histoire-philosophie-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; } #ne-histoire .ne-histoire-philosophie-text { display: flex; flex-direction: column; gap: 18px; } #ne-histoire .ne-histoire-philosophie-text h2 { margin-top: 6px; } #ne-histoire .ne-histoire-philosophie-text > p { color: rgba(17, 17, 17, 0.80); line-height: 1.65; } /* Piliers */ #ne-histoire .ne-histoire-piliers { display: flex; flex-direction: column; gap: 14px; } #ne-histoire .ne-histoire-piliers li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--ne-border); border-radius: var(--ne-radius); background: rgba(255, 255, 255, 0.76); transition: background 0.22s ease, transform 0.22s ease; } #ne-histoire .ne-histoire-piliers li:hover { background: rgba(255, 255, 255, 0.96); transform: translateX(5px); } #ne-histoire .ne-pilier-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 999px; background: var(--ne-black); color: var(--ne-green); } #ne-histoire .ne-pilier-icon svg { width: 20px; height: 20px; stroke: var(--ne-green); fill: none; flex-shrink: 0; } #ne-histoire .ne-histoire-piliers li div { display: flex; flex-direction: column; gap: 3px; } #ne-histoire .ne-histoire-piliers li strong { font-size: 0.95rem; font-weight: 750; color: var(--ne-black); line-height: 1.2; } #ne-histoire .ne-histoire-piliers li span { font-size: 0.83rem; color: rgba(17, 17, 17, 0.62); line-height: 1.4; } #ne-histoire .ne-histoire-philosophie-conclusion { font-weight: 600; color: var(--ne-green-strong); font-size: 0.95rem; } #ne-histoire .ne-histoire-philosophie-photo { overflow: hidden; border-radius: var(--ne-radius); } #ne-histoire .ne-histoire-philosophie-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.45s ease; } #ne-histoire .ne-histoire-philosophie-inner:hover .ne-histoire-philosophie-photo img { transform: scale(1.03); } /* ========================================================= SECTION 7 — JASON (réutilise classes produit) ========================================================= */ #ne-histoire .ne-jason-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } #ne-histoire .ne-jason-photo { overflow: hidden; border-radius: var(--ne-radius); } #ne-histoire .ne-jason-photo img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; transition: transform 0.45s ease; } #ne-histoire .ne-jason-inner:hover .ne-jason-photo img { transform: scale(1.03); } #ne-histoire .ne-jason-content { display: flex; flex-direction: column; gap: 16px; } #ne-histoire .ne-jason-content h2 { font-size: clamp(1.75rem, 2vw, 2.3rem); } #ne-histoire .ne-jason-content p { color: rgba(17, 17, 17, 0.80); line-height: 1.6; } #ne-histoire .ne-jason-actions { display: flex; flex-wrap: wrap; gap: 12px; } #ne-histoire .ne-jason-note { font-size: 0.82rem; color: rgba(17, 17, 17, 0.58); font-style: italic; } #ne-histoire .ne-socials { display: flex; flex-wrap: wrap; gap: 10px; } #ne-histoire .ne-socials a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border: 1px solid var(--ne-border); border-radius: 999px; background: rgba(255, 255, 255, 0.70); font-size: 0.78rem; font-weight: 700; transition: background 0.2s ease, transform 0.2s ease; } #ne-histoire .ne-socials a:hover { background: var(--ne-green-soft); transform: translateY(-2px); } #ne-histoire .ne-socials svg { width: 15px; height: 15px; flex-shrink: 0; } /* ========================================================= SECTION 8 — CTA COLLECTIONS ========================================================= */ #ne-histoire .ne-histoire-cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; } #ne-histoire .ne-histoire-cta-text h2 { margin-top: 8px; font-size: clamp(1.4rem, 1.8vw, 2rem); } #ne-histoire .ne-histoire-cta-text p { margin-top: 12px; color: rgba(17, 17, 17, 0.78); } #ne-histoire .ne-histoire-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } #ne-histoire .ne-histoire-cta-actions .ne-btn { white-space: nowrap; } /* ========================================================= RESPONSIVE TABLETTE ≤ 1100px ========================================================= */ @media (max-width: 1100px) { #ne-histoire .ne-container { padding: 0 var(--ne-gutter-tablet); } #ne-histoire .ne-histoire-split-inner, #ne-histoire .ne-histoire-split--reverse .ne-histoire-split-inner { grid-template-columns: 1fr; direction: ltr; gap: 32px; } #ne-histoire .ne-histoire-creation-inner { grid-template-columns: 1fr; gap: 32px; } #ne-histoire .ne-histoire-creation-quote { position: static; } #ne-histoire .ne-histoire-philosophie-inner { grid-template-columns: 1fr; gap: 32px; } #ne-histoire .ne-histoire-philosophie-photo { order: -1; } #ne-histoire .ne-histoire-philosophie-photo img { aspect-ratio: 16 / 7; } #ne-histoire .ne-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ne-histoire .ne-jason-inner { grid-template-columns: 1fr; gap: 32px; } #ne-histoire .ne-histoire-cta-inner { grid-template-columns: 1fr; gap: 28px; } } /* ========================================================= RESPONSIVE MOBILE ≤ 767px ========================================================= */ @media (max-width: 767px) { #ne-histoire { font-size: 0.94rem; overflow-x: clip; } #ne-histoire .ne-section { padding: var(--ne-section-space-mobile) 0; } #ne-histoire .ne-section::before { width: 100%; background: var(--ne-white) !important; } #ne-histoire .ne-container { padding: 0 var(--ne-gutter-mobile); } #ne-histoire .ne-histoire-hero-inner { padding: 0 16px; text-align: center; } #ne-histoire h1 { font-size: clamp(1.52rem, 5.5vw, 2rem); } #ne-histoire h2 { font-size: clamp(1.25rem, 4.5vw, 1.6rem); } #ne-histoire .ne-histoire-intro { font-size: 0.95rem; } #ne-histoire .ne-histoire-split-inner { padding: 0 16px; } /* Image en haut sur mobile pour la section img-right */ #ne-histoire .ne-histoire-split--img-right .ne-histoire-visual { order: -1; } #ne-histoire .ne-histoire-split--img-right .ne-histoire-text { order: 1; } /* Justify sur mobile — sauf listes à puces et citations */ #ne-histoire p { text-align: justify; } #ne-histoire li, #ne-histoire blockquote p, #ne-histoire .ne-eyebrow, #ne-histoire .ne-histoire-philosophie-conclusion, #ne-histoire .ne-jason-note, #ne-histoire cite { text-align: left; } #ne-histoire .ne-histoire-hero-inner p, #ne-histoire .ne-section-heading p:not(.ne-eyebrow) { text-align: justify; } #ne-histoire .ne-histoire-visual img { aspect-ratio: 4 / 3; } #ne-histoire .ne-histoire-text p { text-align: justify; } #ne-histoire .ne-histoire-creation-inner { padding: 0 16px; } #ne-histoire .ne-histoire-creation-quote blockquote p { font-size: 1rem; } #ne-histoire .ne-hide-mobile { display: none !important; } #ne-histoire .ne-section-heading { padding: 0 16px; } #ne-histoire .ne-feature-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; } #ne-histoire .ne-feature-card:hover { transform: none; } #ne-histoire .ne-jason-inner { padding: 0 16px; } #ne-histoire .ne-jason-actions { flex-direction: column; } #ne-histoire .ne-jason-actions .ne-btn { width: 100%; justify-content: center; } #ne-histoire .ne-histoire-cta-inner { padding: 0 16px; text-align: center; } #ne-histoire .ne-histoire-cta-actions { width: 100%; } #ne-histoire .ne-histoire-cta-actions .ne-btn { width: 100%; justify-content: center; white-space: normal; } #ne-histoire .ne-histoire-piliers li:hover { transform: none; } } /* ========================================================= NUTRI-EFFICACE — CORRECTIF DÉBORDEMENT HORIZONTAL Cause racine : la largeur interne du carousel d'avis remontait via #MainContent (overflow-x visible par défaut) et poussait la page de 169px sur mobile. ========================================================= */ html, body { width: 100%; max-width: 100%; overflow-x: clip; } #MainContent, main.content-for-layout { max-width: 100%; overflow-x: clip; /* ← la ligne qui règle tout */ } .page-wrapper { max-width: 100%; overflow-x: clip; } @supports not (overflow-x: clip) { html, body, #MainContent, .page-wrapper { overflow-x: hidden; } } /* Horizon 2026 narrows the centered collection grid by one page margin. Keep the updated grid implementation while restoring the live theme's desktop card density and alignment. */ @media screen and (min-width: 750px) { .collection-wrapper > .main-collection-grid { grid-column: 1 / -1; } } /* Legacy collection cards keep this alternate title for density switching. The updated base stylesheet no longer hides it in the default grid view. */ .product-grid-view-zoom-out--details { display: none; } /* Nutri-Efficace — compteur panier du header : rendu identique à l'ancien thème. */ .header-actions__cart-icon .cart-bubble__background { background-color: #ffc107 !important; } .header-actions__cart-icon .cart-bubble__text, .header-actions__cart-icon .cart-bubble__text-count { color: #ffffff !important; }