/* Fiche produit v2 (version B, test essentiel1). Styles communs à toutes les fiches v2 ; le gabarit garde ses styles en ligne (repris tels quels de la maquette Claude Design) et responsive.css porte les écarts mobile / ordinateur (seuil 1120 px). */ /* Bandeau bleu à la place du bandeau noir ; l'en-tête du site reste. */ #head-header{display:none!important} #fv2-bandeau{position:relative;z-index:2;font-family:Nunito,'Greycliff CF',system-ui,sans-serif} /* Remise à zéro de ce que Divi impose aux titres, paragraphes, listes et boutons. */ #fv2,#fv2 *{box-sizing:border-box} #fv2{font-family:Nunito,'Greycliff CF',Quicksand,system-ui,sans-serif!important;-webkit-font-smoothing:antialiased} #fv2 h1,#fv2 h2,#fv2 h3{padding-bottom:0;font-family:inherit;letter-spacing:normal} /* Divi fixe police, taille, interligne et couleur sur p, li, blockquote… : on rend la main au style de la maquette (styles en ligne ou hérités). */ #fv2 :is(p,li,ul,ol,span,a,strong,em,b,s,small,blockquote,figure,figcaption,summary,details,article,label,div,h1,h2,h3,button):not(.fv-tuiles *){font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;letter-spacing:inherit} #fv2 :is(strong,b):not(.fv-tuiles *){font-weight:700} #fv2 blockquote{border:0;margin:0;padding:0;quotes:none;font-style:normal} #fv2 figure{margin:0} #fv2 ul{margin:0;padding-left:0;list-style:disc} #fv2 li{padding:0;list-style:inherit} #fv2 p{padding-bottom:0} #fv2 ul{padding-bottom:0;list-style-position:outside} #fv2 button:not(.fv-tuiles *){font-family:inherit;line-height:normal} #fv2 img{max-width:100%;height:auto} #fv2 a:not(.fv-tuiles *){color:#03738c}#fv2 a:not(.fv-tuiles *):hover{color:#025c70} #fv2 summary{cursor:pointer;list-style:none} #fv2 summary::-webkit-details-marker{display:none} #fv2 :focus-visible{outline:3px solid #21c9c4;outline-offset:2px} @keyframes lilFloat{from{transform:translateY(0)}to{transform:translateY(-6px)}} #fv2 .lil-float{animation:lilFloat 3.2s cubic-bezier(0.45,0,0.55,1) infinite alternate} @media (prefers-reduced-motion: reduce){#fv2 .lil-float{animation:none}} /* Éléments réservés à l'ordinateur (citation sous la galerie, compétences travaillées). */ @media (max-width:1119.98px){#fv2 [data-fv-desk]{display:none!important}} /* Citation sous la galerie retirée partout : elle allongeait la colonne de gauche (« décalage », 2026-11-03) ; l'avis reste dans la section avis. */ #fv2 section:has([data-fv-hero-droite]) figure[data-fv-desk]{display:none!important} /* Ordinateur : tailles de police de la fiche actuelle (A) — titre 32, texte 16, prix 28 — au lieu du zoom à 75 % ; galerie un peu plus étroite et marges resserrées pour garder le bouton panier dans le premier écran (2026-11-03). */ @media (min-width:1120px){ #fv2 section:has([data-fv-hero-droite]){padding-top:20px!important} #fv2 div:has(> [data-fv-hero-droite]){gap:40px!important} #fv2 div:has(> [data-fv-hero-droite]) > div:first-child{flex:0 0 44%!important} #fv2 [data-fv-hero-droite]{flex:1 1 0!important;gap:14px!important} #fv2 [data-fv-hero-droite] h1{gap:6px!important} #fv2 [data-fv-hero-droite] h1 > span:last-child{font-size:32px!important} #fv2 [data-fv-hero-droite] h1 + p{font-size:18px!important;max-width:none!important;line-height:1.4!important} #fv2 [data-fv-hero-droite] > div:first-child{gap:8px!important} #fv2 [data-fv-hero-droite] div[style*="padding: 14px 0px"]{padding:10px 0!important;gap:8px 12px!important} #fv2 [data-fv-hero-droite] > p{font-size:16px!important;line-height:1.5!important} #fv2 [data-fv-hero-droite] > ul{gap:6px!important} #fv2 [data-fv-hero-droite] > ul li > span:first-child{width:22px!important;height:22px!important} #fv2 [data-fv-hero-droite] div[style*="padding: 14px 18px"]{padding:8px 14px!important} #fv2 [data-fv-hero-droite] div[style*="padding: 14px 18px"] span[style*="width: 42px"]{width:34px!important;height:34px!important} #fv2 [data-fv-hero-droite] div[style*="padding: 22px"]{padding:16px 18px!important;gap:10px!important} #fv2 [data-fv-hero-droite] span[style*="font-size: 42px"]{font-size:28px!important} #fv2 [data-fv-hero-droite] span[style*="width: 96px"]{width:76px!important;height:76px!important;top:-12px!important} #fv2 [data-fv-hero-droite] span[style*="width: 96px"] > span:first-child{font-size:21px!important} #fv2 [data-fv-hero-droite] div[style*="padding: 12px 16px"]{padding:8px 14px!important} #fv2 [data-fv-hero-droite] .single_add_to_cart_button{min-height:50px!important;font-size:18px!important} } /* Galerie : vignettes en bande défilante (la fiche WooCommerce a plus d'images que les 5 cases de la maquette). */ /* Pas de défilement horizontal (demande de Baptiste du 2026-11-03) : vignettes en grille de 4. */ #fv2 .fv-gal-img{width:100%;height:auto} /* Bouton principal : état d'attente pendant l'ajout. */ #fv2 .single_add_to_cart_button.loading{opacity:.7;pointer-events:none} /* Avis masqués par le filtre ou par « Voir tous les avis ». */ #fv2 article[data-g].fv-cache{display:none!important} /* Barre d'achat fixe : téléphones seulement, cachée tant que le bouton principal est à l'écran. */ #fv2-barre{display:none} @media (max-width:767.98px){ #fv2-barre{position:fixed;left:0;right:0;bottom:0;z-index:9998;display:flex;align-items:center;gap:14px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));min-height:84px;background:#ffffff; box-shadow:0 -6px 18px rgba(66,61,55,0.12);font-family:Nunito,system-ui,sans-serif;color:#423d37;transition:transform .25s} #fv2-barre.cache{transform:translateY(110%)} #fv2-barre .fv2-barre-px{display:flex;flex-direction:column;line-height:1.2;flex:none} #fv2-barre .fv2-barre-prix{font-size:22px;font-weight:800;color:#d03030} #fv2-barre .fv2-barre-sous{font-size:13px;color:#63594f} #fv2-barre .fv2-barre-sous strong{color:#d03030} #fv2-barre button{flex:1 1 auto;min-height:54px;border:0;border-radius:999px;background:#e85a1c;color:#ffffff;font:inherit;font-size:19px;font-weight:800;cursor:pointer} html.fv2-barre-visible #ll-toast-host .cart-toast{bottom:calc(96px + env(safe-area-inset-bottom))!important} html.fv2-barre-visible #brevo-conversations{bottom:calc(94px + env(safe-area-inset-bottom))!important} } /* Pastille du panier avec le nombre d'articles (comme la fiche B mobile). */ html.fv2 .lilemo-cart.cart-not-empty::after{content:attr(data-n);top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box; border:2px solid #fff;border-radius:10px;background:#e73455;color:#fff;font:700 11px/16px Inter,sans-serif;text-align:center} /* Bandeau de réassurance sous le bloc d'achat : réparti sur toute la largeur (demande du 2026-11-03). Sur mobile, grille 2 × 2. */ #fv2 div[style*="gap: 8px 18px"]{display:grid!important;grid-template-columns:auto auto!important;justify-content:space-between!important;gap:8px 12px!important} #fv2 div[style*="gap: 8px 18px"] > span{font-size:15px!important;gap:5px!important;white-space:nowrap} #fv2 div[style*="gap: 8px 18px"] svg{width:16px;height:16px;flex:none} @media (max-width:599.98px){#fv2 div[style*="gap: 8px 18px"] > span{font-size:14px!important}} /* Petits téléphones (Galaxy A55, 360 px) : le bandeau dépassait de 15 px → deux colonnes égales et retour à la ligne permis. */ @media (max-width:399.98px){#fv2 div[style*="gap: 8px 18px"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px 10px!important}#fv2 div[style*="gap: 8px 18px"] > span{white-space:normal!important;font-size:13.5px!important}} /* Mobile : frise des étapes (Sons → Et après) retirée de la section « Une seule station » (demande du 2026-11-03). */ @media (max-width:767.98px){#fv2 [data-prog-sticky] > div:first-child:has([data-fv-noeud]){display:none!important}} /* Galerie (2026-11-03) : une grande image unique + jusqu'à 6 photos en dessous, en grille de 3 sur deux rangées. À partir de 1280 px, la grande image s'étire pour que la galerie finisse au niveau de la colonne d'achat. */ #fv2 .fv-gal-vignettes{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;flex:none} #fv2 .fv-gal-vignettes[data-n="4"],#fv2 .fv-gal-vignettes[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important} #fv2 .fv-gal-vignettes[data-n="1"]{grid-template-columns:1fr!important} #fv2 .fv-vignette{aspect-ratio:1 / 1!important;box-sizing:border-box} #fv2 .fv-vignette :is(img,picture){width:100%;height:100%;object-fit:cover;display:block} #fv2 .fv-vignette.on{outline:3px solid #21c9c4!important;outline-offset:-3px;border:0!important} /* Mobile : une seule rangée de 3 photos sous la grande image (demande du 2026-11-03). */ @media (max-width:767.98px){#fv2 .fv-gal-vignettes .fv-vignette:nth-child(n+4){display:none!important}} @media (min-width:1280px){ #fv2 div:has(> [data-fv-hero-droite]){align-items:stretch!important} #fv2 div:has(> [data-fv-hero-droite]) > div:first-child{align-self:stretch!important} #fv2 .fv-gal-img{flex:1 1 0!important;min-height:0!important;height:auto!important;aspect-ratio:auto!important;object-fit:cover!important} } /* Carrousels (demande du 2026-11-03) : gamme, comparatif des coffrets et avis défilent de côté sur mobile comme dans la maquette, et sur ordinateur avec deux flèches. Les flèches disparaissent aux extrémités et quand tout tient à l'écran. */ #fv2 .fv-car-wrap{position:relative} #fv2 .fv-car{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;overflow-x:auto!important;overscroll-behavior-x:contain; scroll-snap-type:x mandatory!important;scroll-behavior:smooth;scrollbar-width:none;gap:16px!important;align-items:stretch!important;padding-top:6px!important;padding-bottom:14px!important} #fv2 .fv-car::-webkit-scrollbar{display:none} #fv2 .fv-car > *{scroll-snap-align:start!important;min-width:0;max-width:none!important} #fv2 .fv-car--gamme > *{flex:0 0 min(72%,260px)!important} #fv2 .fv-car--coffrets > *{flex:0 0 min(84%,330px)!important} #fv2 .fv-car--avis > *{flex:0 0 min(85%,320px)!important} @media (min-width:768px){ #fv2 .fv-car--gamme > *{flex-basis:calc((100% - 32px) / 3)!important} #fv2 .fv-car--coffrets > *{flex-basis:calc((100% - 16px) / 2)!important} #fv2 .fv-car--avis > *{flex-basis:calc((100% - 16px) / 2)!important} } @media (min-width:1120px){ #fv2 .fv-car--gamme > *{flex-basis:calc((100% - 48px) / 4)!important} #fv2 .fv-car--coffrets > *{flex:1 1 0!important;min-width:280px} #fv2 .fv-car--avis > *{flex-basis:calc((100% - 32px) / 3)!important} } #fv2 .fv-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;padding:0;border:0;border-radius:999px;background:#fff;color:#03738c; display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(66,61,55,.18);transition:background .15s} #fv2 .fv-car-btn:hover{background:#d5f4f3} #fv2 .fv-car-prev{left:-18px} #fv2 .fv-car-next{right:-18px} #fv2 .fv-car-btn[hidden]{display:none!important} @media (max-width:767.98px){#fv2 .fv-car-btn{display:none!important}} /* Page Noël, « Toute la magie d'apprendre en un coffret » : visuels des 3 cartes comme les tuiles de la boutique (2026-11-03). */ #fv2 .fv-ed-media{height:220px;background:#e3f1f3;padding:18px;display:flex;align-items:center;justify-content:center;box-sizing:border-box} #fv2 .fv-ed-media a{display:flex;align-items:center;justify-content:center;width:100%;height:100%} #fv2 .fv-ed-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}