/* ========================================================================== W3CAM — fiche produit v2 (2026-11-10) Maquette validee : https://claude.ai/artifact/EiHH1X97r9m9NvbW7HgfnA Chargee par catalog/product.tpl SEULEMENT quand le drapeau $w3cFpV2 est vrai (_partials/w3c-fp-v2.tpl : interrupteur global ou apercu ?w3cpreview=1). Toutes les regles commencent par #product #main.w3c-fp2 : elles passent devant les !important du theme et de w3c-produit.css, et ne touchent aucune autre page (ni l'apercu rapide des listes, qui n'a pas #product #main.w3c-fp2). Orange #ff6501 obligatoire, survol #df5700, jamais plus fonce. ========================================================================== */ #product #main.w3c-fp2{ --w3p2-orange:#ff6501;--w3p2-orange-survol:#df5700;--w3p2-orange-voile:#fff4ec;--w3p2-orange-filet:#ffd9c0; --w3p2-texte:#666;--w3p2-titre:#4d4d4d;--w3p2-gris:#f5f5f5;--w3p2-filet:#e6e6e6;--w3p2-rayon:6px; --w3p2-ease:cubic-bezier(.23,1,.32,1); color:var(--w3p2-texte);font-size:14px;line-height:1.55; } #product #main.w3c-fp2 ::selection{background:var(--w3p2-orange-voile);color:var(--w3p2-titre)} #product #main.w3c-fp2 a,#product #main.w3c-fp2 button{-webkit-tap-highlight-color:transparent} #product #main.w3c-fp2 :focus-visible{outline:2px solid var(--w3p2-orange)!important;outline-offset:2px} /* ── Haut de fiche : galerie 7/12, achat 5/12 ─────────────────────────────── */ @media (min-width:992px){ #product #main.w3c-fp2 .product-container{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;margin:0!important} #product #main.w3c-fp2 .product-container > .product-images, #product #main.w3c-fp2 .product-container > .product-infos{max-width:none!important;flex:none!important;width:auto!important;padding:0!important} #product #main.w3c-fp2 .product-container > .product-images{position:sticky;top:24px} } /* Galerie : photos fondues dans un aplat gris (JPG sur fond blanc pur : le blanc devient le gris de la carte par mix-blend-mode, sans retoucher les fichiers). */ /* Carte photo sur TOUTE la largeur de la colonne galerie (le theme la fige a 459 px, centree) : la zone 3D (inset 0 de la carte) la remplit, et le bouton 3D (positionne dans .images-container) tombe dans son coin haut droit. */ #product #main.w3c-fp2 .product-cover{width:100%!important;max-width:none!important;box-sizing:border-box;margin:0 0 12px!important;background:var(--w3p2-gris)!important;border:0!important;border-radius:var(--w3p2-rayon)!important;padding:24px!important;position:relative} #product #main.w3c-fp2 .product-cover img, #product #main.w3c-fp2 .product-thumb img{mix-blend-mode:multiply} /* Vignette video (module productvideo) : image YouTube en couleurs, pas de melange. */ #product #main.w3c-fp2 .product-thumb.w3p-thumb-video img{mix-blend-mode:normal} /* ⛔ Le gris est pose SUR CHAQUE DIAPOSITIVE, pas seulement sur .product-cover : la piste slick (transform) cree un groupe isole, et multiply ne melange qu'avec ce qui est peint a l'interieur de ce groupe. */ #product #main.w3c-fp2 .product-cover .product-img, #product #main.w3c-fp2 .product-cover .easyzoom,#product #main.w3c-fp2 .product-cover .easyzoom > a{background:var(--w3p2-gris)!important} #product #main.w3c-fp2 .product-thumb{background:var(--w3p2-gris)!important;border:2px solid transparent!important;border-radius:var(--w3p2-rayon)!important;transition:border-color .2s ease} #product #main.w3c-fp2 .product-thumb.slick-current,#product #main.w3c-fp2 .product-thumb.selected{border-color:var(--w3p2-orange)!important} #product #main.w3c-fp2 .product-flags .product-flag{height:26px;display:inline-flex;align-items:center;padding:0 10px!important;border-radius:4px!important;font-size:13px!important;font-weight:600!important} #product #main.w3c-fp2 .product-flags .product-flag.discount{background:var(--w3p2-orange)!important;color:#fff!important} #product #main.w3c-fp2 .product-flags .product-flag.new{background:#fff!important;color:var(--w3p2-orange)!important} /* Modele 3D (module w3cam3d) : bouton orange plein, rare (quelques fiches). Le module le pose sous les miniatures ; seul le BOUTON est remonte en haut a droite de la photo (la zone 3D elle-meme reste dans le flux du module). */ #product #main.w3c-fp2 .images-container{position:relative} #product #main.w3c-fp2 .w3c-3d__btn{position:absolute!important;top:16px;right:16px;z-index:25!important;margin:0!important} /* z-index 25 : au-dessus de la zone 3D du module (.w3c-3d__zone, z-index 20), sinon « Image 2D » passe dessous. */ #product #main.w3c-fp2 .w3c-3d__zone{background:var(--w3p2-gris)!important;border-radius:var(--w3p2-rayon)!important} #product #main.w3c-fp2 .w3c-3d__btn{display:inline-flex!important;align-items:center;gap:8px;height:44px!important;padding:0 16px 0 44px!important;border:0!important;border-radius:var(--w3p2-rayon)!important;background:var(--w3p2-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 7.5v9L12 21l8-4.5v-9L12 3Z'/%3E%3Cpath d='M4 7.5 12 12l8-4.5'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E") 16px 50%/20px no-repeat!important;color:#fff!important;font-size:14px!important;font-weight:600!important;cursor:pointer;transition:background-color .2s ease,transform .16s var(--w3p2-ease)} /* ── Colonne d'achat ─────────────────────────────────────────────────────── */ /* ⛔ Le CSS de la fiche actuelle reordonne ces blocs (order 2 a 6 : reference avant le titre, etc.). Ordre remis a plat ici : marque, titre, puis le contenu dans l'ordre du DOM. */ #product #main.w3c-fp2 .product-infos{display:flex!important;flex-direction:column;gap:18px;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important} #product #main.w3c-fp2 .product-infos > .w3p2-marque{order:0!important} #product #main.w3c-fp2 .product-infos > .product_title{order:1!important} #product #main.w3c-fp2 .product-infos > .w3p2-ref{order:2!important} #product #main.w3c-fp2 .product-infos > .product-information{order:4!important} /* Choix de couleur Noir / Blanc (module w3ccouleurs, pose par son script juste apres le titre, order 3 dans l'ancien CSS) : remonte sous le titre, pastilles de 44 px au nouveau style (filet gris, active = filet orange + fond orange clair). */ #product #main.w3c-fp2 .product-infos > .w3c-couleurs{order:5!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:8px!important;margin:0!important} /* Style moderne (10/11/2026) : etiquette « Couleur » visible, la couleur affichee en pastille arrondie avec son nom (anneau orange), les autres en simple rond de couleur de 44 px (nom gardé pour les lecteurs d ecran via aria-label). */ #product #main.w3c-fp2 .w3c-couleurs .w3c-couleurs-label{position:static!important;width:auto!important;height:auto!important;margin:0 4px 0 0!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:nowrap;color:var(--w3p2-texte)!important;font-size:13px!important;font-weight:500} #product #main.w3c-fp2 .w3c-couleurs .w3c-couleur-option{display:inline-flex!important;align-items:center;justify-content:center;gap:8px!important;box-sizing:border-box;height:44px;min-width:44px;padding:0!important;border:1px solid var(--w3p2-filet)!important;border-radius:999px!important;background:#fff!important;color:var(--w3p2-titre)!important;font-size:14px!important;font-weight:600!important;text-decoration:none!important;box-shadow:none!important;transition:border-color .2s ease,box-shadow .2s ease,transform .16s var(--w3p2-ease)} #product #main.w3c-fp2 .w3c-couleurs .w3c-couleur-dot{width:26px!important;height:26px!important;flex:0 0 26px;margin:0!important;border-radius:50%!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} #product #main.w3c-fp2 .w3c-couleurs .w3c-couleur-option--b .w3c-couleur-dot{background:#fff!important;border:1px solid #d4d4d4!important} #product #main.w3c-fp2 .w3c-couleurs .w3c-couleur-option:not(.is-active) .w3c-couleur-nom{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #product #main.w3c-fp2 .w3c-couleurs .w3c-couleur-option.is-active{padding:0 16px 0 8px!important;border-color:transparent!important;background:var(--w3p2-orange-voile)!important;box-shadow:0 0 0 2px var(--w3p2-orange)!important} #product #main.w3c-fp2 .w3c-couleurs a.w3c-couleur-option:active{transform:scale(.97)} @media (hover:hover) and (pointer:fine){#product #main.w3c-fp2 .w3c-couleurs a.w3c-couleur-option:hover{border-color:var(--w3p2-orange)!important}} /* .product-information est DEPLIE (display:contents, 10/11/2026) : ses blocs se rangent dans la colonne avec le titre. Ordre : logo 0, nom 1, ref 2, resume 3, « Lire la suite » 4, couleurs 5, puis prix / achat / Alma (6, ordre du DOM). Ecart commun : gap 18 px de .product-infos. */ #product #main.w3c-fp2 .product-information{display:contents!important} #product #main.w3c-fp2 .product-information > *{order:6!important;margin-top:0!important;margin-bottom:0!important} #product #main.w3c-fp2 .product-information > .product-description{order:3!important} #product #main.w3c-fp2 .product-information > .w3p2-suite{order:4!important} /* Ligne marque : logo (recadre par w3c-produit-v2.js) + reference */ #product #main.w3c-fp2 .w3p2-marque{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:56px;font-size:13px} /* Pas de saut au chargement : le logo reste invisible jusqu'au recadrage par w3c-produit-v2.js (classe w3p2-logo-pret), puis apparait en fondu. Filet de securite sans JavaScript : il apparait quand meme au bout de 1,5 s. */ #product #main.w3c-fp2 .w3p2-logo:not(.w3p2-logo-pret) img{opacity:0;animation:w3p2-logo-secours 0s linear 1.5s forwards} #product #main.w3c-fp2 .w3p2-logo.w3p2-logo-pret img{opacity:1;transition:opacity .15s ease-out} @keyframes w3p2-logo-secours{to{opacity:1}} @media (prefers-reduced-motion:reduce){#product #main.w3c-fp2 .w3p2-logo.w3p2-logo-pret img{transition:none}} #product #main.w3c-fp2 .w3p2-logo{display:inline-flex;align-items:center;min-height:44px;overflow:hidden;flex:0 0 auto} #product #main.w3c-fp2 .w3p2-logo img{display:block;width:auto;height:52px;max-width:150px;object-fit:contain;mix-blend-mode:multiply} #product #main.w3c-fp2 .w3p2-logo.w3p2-logo-cadre{display:block;min-height:0;position:relative} #product #main.w3c-fp2 .w3p2-logo.w3p2-logo-cadre img{position:absolute;max-width:none;height:auto} /* Reference sous le nom : discrete, 13 px, chiffres tabulaires. */ #product #main.w3c-fp2 .w3p2-ref{margin:-10px 0 0!important;color:var(--w3p2-texte);font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} /* Les blocs marque et reference d'origine font doublon avec la ligne marque. */ #product #main.w3c-fp2 .js-product-images-modal .product-brand, #product #main.w3c-fp2 .js-product-images-modal .product-reference{display:none!important} #product #main.w3c-fp2 .product_title{margin:4px 0 0!important;color:var(--w3p2-titre)!important;font-size:28px!important;font-weight:500!important;line-height:1.25!important;letter-spacing:-.01em;overflow-wrap:anywhere;text-wrap:balance} #product #main.w3c-fp2 .product-information > .product-description{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} #product #main.w3c-fp2 .product-information > .product-description p:last-child{margin-bottom:0} /* Resume toujours en graisse normale, meme quand la fiche le balise en gras. */ #product #main.w3c-fp2 .product-information > .product-description,#product #main.w3c-fp2 .product-information > .product-description *{font-weight:400!important} #product #main.w3c-fp2 .w3p2-suite{align-self:flex-start;display:inline-flex;align-items:center;min-height:32px;margin-top:-12px!important;color:var(--w3p2-orange)!important;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:2px} #product #main.w3c-fp2 .w3p2-suite[hidden]{display:none} /* Prix : 36 px orange, pastille de remise pleine */ #product #main.w3c-fp2 .product-prices{display:flex;flex-direction:column;gap:10px;margin:0!important} #product #main.w3c-fp2 .product-price{gap:8px 14px;margin:0!important} #product #main.w3c-fp2 .current-price{gap:8px 14px!important;align-items:center!important} #product #main.w3c-fp2 .current-price-display{color:var(--w3p2-orange)!important;font-size:36px!important;font-weight:600!important;line-height:1.1!important;letter-spacing:-.01em;font-variant-numeric:tabular-nums} #product #main.w3c-fp2 .w3p-taxe{color:var(--w3p2-orange)!important;font-size:15px!important;font-weight:600!important;margin-left:-8px} #product #main.w3c-fp2 .w3p2-pct{display:inline-flex!important;align-items:center;height:34px;padding:0 12px!important;border:0!important;border-radius:var(--w3p2-rayon)!important;background:var(--w3p2-orange)!important;color:#fff!important;font-size:18px!important;font-weight:600!important;letter-spacing:-.01em;white-space:nowrap;text-transform:none!important} #product #main.w3c-fp2 .tax-shipping-delivery-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0!important;font-size:13.5px;color:var(--w3p2-texte)} #product #main.w3c-fp2 .w3p2-ancien s{text-decoration-thickness:1px} #product #main.w3c-fp2 .w3p2-eco{display:inline-flex!important;align-items:center;gap:6px;height:30px;padding:0 10px!important;border-radius:var(--w3p2-rayon);background:var(--w3p2-orange-voile)!important;color:var(--w3p2-orange)!important;font-weight:600!important;font-size:13.5px!important} #product #main.w3c-fp2 .w3p2-eco svg{flex:0 0 auto} /* Disponibilite + livraison : carte grise. Les couleurs de niveau de stock du module restent celles du site (vert / orange-brun / rouge / gris). */ #product #main.w3c-fp2 .w3p-dispo{display:flex!important;flex-direction:column;align-items:stretch!important;gap:10px!important;padding:14px 16px!important;background:var(--w3p2-gris)!important;border:0!important;border-radius:var(--w3p2-rayon)!important;margin:0!important} #product #main.w3c-fp2 .w3p-dispo .si-indicator{display:flex!important;align-items:center;gap:12px;flex-wrap:wrap} #product #main.w3c-fp2 .w3p-dispo .si-outer{width:84px!important;height:6px!important;border-radius:3px!important;background:#e2e2e2!important} #product #main.w3c-fp2 .w3p-dispo .si-items{font-weight:600} #product #main.w3c-fp2 .w3p-dispo .estimated_delivery_date{margin:0!important;padding:0!important;background:transparent!important;border:0!important} #product #main.w3c-fp2 .w3p-dispo .estimated_delivery_date_wrapper{display:flex!important;align-items:center;gap:10px;padding:0!important;background:transparent!important;border:0!important} #product #main.w3c-fp2 .w3p-dispo .estimated_delivery_date_value{color:var(--w3p2-titre);font-weight:600} #product #main.w3c-fp2 .w3p-dispo .stockalert-add-container:not(:empty){padding-top:10px;border-top:1px solid var(--w3p2-filet)} #product #main.w3c-fp2 .w3p-dispo .stockalert-add-container:empty{display:none!important} #product #main.w3c-fp2 .w3p-dispo .estimated_delivery_date_icon .icon{font-size:20px!important;line-height:1!important} #product #main.w3c-fp2 .w3p-dispo .estimated_delivery_date_content{font-size:14px!important} #product #main.w3c-fp2 .w3p-dispo .clearfix{display:none} /* Quantite + panier : 52 px, bouton orange plein */ #product #main.w3c-fp2 .product-actions,#product #main.w3c-fp2 .product-actions .product-add-to-cart{margin:0!important} #product #main.w3c-fp2 .product-add-to-cart .control-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #product #main.w3c-fp2 .product-quantity{display:flex!important;flex-wrap:wrap;gap:10px;margin:0!important} #product #main.w3c-fp2 .product-quantity .qty{flex:0 0 auto;margin:0!important} #product #main.w3c-fp2 .product-quantity .bootstrap-touchspin{display:flex!important;align-items:center;height:52px;border:1px solid var(--w3p2-filet)!important;border-radius:var(--w3p2-rayon)!important;background:#fff!important;overflow:hidden} #product #main.w3c-fp2 .product-quantity .btn-touchspin{width:44px!important;height:50px!important;border:0!important;background:transparent!important;color:var(--w3p2-texte)!important;font-size:18px!important;box-shadow:none!important} #product #main.w3c-fp2 #quantity_wanted{width:44px!important;height:50px!important;border:0!important;background:transparent!important;text-align:center;font-size:16px!important;font-weight:600;color:var(--w3p2-titre)!important;box-shadow:none!important;-moz-appearance:textfield} #product #main.w3c-fp2 #quantity_wanted::-webkit-outer-spin-button,#product #main.w3c-fp2 #quantity_wanted::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} #product #main.w3c-fp2 .product-quantity .add{flex:1 1 200px;margin:0!important} #product #main.w3c-fp2 .product-quantity .add-to-cart{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;width:100%!important;height:52px!important;padding:0 20px!important;border:0!important;border-radius:var(--w3p2-rayon)!important;background:var(--w3p2-orange)!important;color:#fff!important;font-size:15px!important;font-weight:600!important;text-transform:none!important;box-shadow:none!important;transition:background-color .2s ease,transform .16s var(--w3p2-ease)} #product #main.w3c-fp2 .product-quantity .add-to-cart::before{content:"";flex:0 0 auto;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11h10.8L21 7H6.2'/%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center/20px no-repeat} #product #main.w3c-fp2 .product-quantity .add-to-cart:disabled{background:#d9d9d9!important;color:#fff!important;cursor:not-allowed} #product #main.w3c-fp2 #product-availability:empty,#product #main.w3c-fp2 .product-minimal-quantity:empty{display:none!important} /* Alma : carte grise */ #product #main.w3c-fp2 .product-additional-info{display:flex;flex-direction:column;gap:18px;margin:0!important} #product #main.w3c-fp2 .product-additional-info > .clearfix{display:none} #product #main.w3c-fp2 #w3-alma4x{margin:0!important;padding:16px 18px!important;background:var(--w3p2-gris)!important;border:0!important;border-radius:var(--w3p2-rayon)!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-onglets{background:#fff!important;border:1px solid var(--w3p2-filet)!important;border-radius:var(--w3p2-rayon)!important} /* Alma, presentation reprise de l'encart du panier (/panier, 10/11/2026) : en-tete logo + titre, rangee de trois onglets egaux (actif en orange plein), echeancier, mentions sous un simple filet. Mention « Un credit coute de l'argent... » et TAEG passes de 16 a 13 px en gras le 10/11/2026, a la demande de Bertrand (le gabarit les avait mis a 16 px au titre de l'art. L312-8 ; le panier les montre en 12 px) : taille a valider avec Alma. Memes classes et ARIA : w3c-produit.js n'est pas touche. */ #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-carte{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px 12px!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-logo{flex:0 0 auto;width:48px!important;height:auto!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-texte{flex:1 1 0;min-width:0} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-titre{color:var(--w3p2-titre)!important;font-size:14px!important;font-weight:500!important;line-height:1.35} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-onglets{order:3;flex:1 1 100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-onglet{display:flex!important;align-items:center;justify-content:center;width:auto!important;height:44px!important;padding:0 10px!important;border:0!important;border-radius:var(--w3p2-rayon)!important;background:#fff!important;color:var(--w3p2-texte)!important;font-size:14px!important;font-weight:600!important;box-shadow:none!important;transition:background-color .2s ease,color .2s ease,transform .16s var(--w3p2-ease)} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-onglet[aria-selected=true]{background:var(--w3p2-orange)!important;color:#fff!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-onglet:active{transform:scale(.97)} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-panneau{margin-top:12px!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-ligne{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-resume{flex:1 1 220px;min-width:0;font-size:14px!important;color:var(--w3p2-texte)!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-resume strong{font-size:16px!important;font-weight:600!important;color:var(--w3p2-titre)!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-details{display:inline-flex!important;align-items:center;gap:6px;min-height:44px;padding:0 14px!important;border:1px solid var(--w3p2-orange)!important;border-radius:var(--w3p2-rayon)!important;background:#fff!important;color:var(--w3p2-orange)!important;font-size:13px!important;font-weight:600!important;transition:background-color .2s ease,transform .16s var(--w3p2-ease)} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-details:active{transform:scale(.97)} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-legal{margin:12px 0 0!important;padding:12px 0 0!important;background:transparent!important;border:0!important;border-top:1px solid var(--w3p2-filet)!important;border-radius:0!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-mention{margin:0!important;font-size:13px!important;line-height:1.45!important;font-weight:600!important;color:var(--w3p2-titre)!important} #product #main.w3c-fp2 #w3-alma4x .w3-alma4x-conditions{margin:6px 0 0!important;font-size:12px!important;line-height:1.5!important;color:#6d7175!important} @media (hover:hover) and (pointer:fine){#product #main.w3c-fp2 #w3-alma4x .w3-alma4x-onglet:not([aria-selected=true]):hover{background:var(--w3p2-orange-voile)!important;color:var(--w3p2-orange)!important}#product #main.w3c-fp2 #w3-alma4x .w3-alma4x-details:hover{background:var(--w3p2-orange-voile)!important}} /* Devis / question : boutons blancs a filet orange */ #product #main.w3c-fp2 .w3p-pro{margin:0!important} #product #main.w3c-fp2 .w3p-pro-note{margin:0 0 10px!important;color:var(--w3p2-titre)!important;font-weight:500!important;font-size:14px!important} #product #main.w3c-fp2 .w3p-pro-boutons{display:flex;flex-wrap:wrap;gap:10px 12px} #product #main.w3c-fp2 .w3p-devis{flex:1 1 160px;white-space:nowrap;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:44px!important;min-height:44px;padding:0 14px!important;box-sizing:border-box;border:1px solid var(--w3p2-orange)!important;border-radius:var(--w3p2-rayon)!important;background:#fff!important;color:var(--w3p2-orange)!important;font-size:14px!important;font-weight:600!important;text-decoration:none!important;transition:background-color .2s ease,transform .16s var(--w3p2-ease)} #product #main.w3c-fp2 .w3p-devis svg{width:18px;height:18px;flex:0 0 auto} /* Reassurance : trois tuiles grises, picto au-dessus */ #product #main.w3c-fp2 .w3p-reas{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0!important} #product #main.w3c-fp2 .w3p-r{display:flex!important;flex-direction:column;align-items:center!important;gap:6px!important;padding:12px 6px!important;background:var(--w3p2-gris)!important;border:0!important;border-radius:var(--w3p2-rayon)!important;font-size:13px;text-align:center;color:var(--w3p2-texte)!important;transition:background-color .2s ease} #product #main.w3c-fp2 .w3p-r svg{width:22px!important;height:22px!important;margin:0!important;color:var(--w3p2-orange)} /* Les documents passent dans la section « Documents » du bas de fiche. */ #product #main.w3c-fp2 .product-additional-info .w3p-docs{display:none!important} /* ── Bas de fiche : sommaire + sections empilees ─────────────────────────── */ #product #main.w3c-fp2 .w3p2-bas{margin-top:56px} /* Sommaire : meme teinte que le fond de page (#page = rgba(187,182,182,.06) sur blanc), prolongee sur toute la largeur de l'ecran par une ombre portee decoupee (clip-path) : plus de bande blanche, y compris une fois collee en haut. Le filet du bas suit la meme largeur. */ #product #main.w3c-fp2 .w3p2-sommaire{position:sticky;top:0;z-index:5;background:#fbfbfb;border-bottom:0;box-shadow:0 0 0 100vmax #fbfbfb,0 1px 0 100vmax var(--w3p2-filet);clip-path:inset(0 -100vmax -1px)} #product #main.w3c-fp2 .w3p2-sommaire ul{display:flex;gap:4px 28px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} #product #main.w3c-fp2 .w3p2-sommaire ul::-webkit-scrollbar{display:none} #product #main.w3c-fp2 .w3p2-sommaire a{display:inline-flex;align-items:center;min-height:48px;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--w3p2-texte)!important;font-size:15px;font-weight:500;text-decoration:none!important;white-space:nowrap;transition:color .2s ease,border-color .2s ease} #product #main.w3c-fp2 .w3p2-sommaire a[aria-current="true"]{color:var(--w3p2-orange)!important;border-bottom-color:var(--w3p2-orange)} #product #main.w3c-fp2 .w3p2-corps{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;margin-top:36px} #product #main.w3c-fp2 .w3p2-sections{min-width:0;display:flex;flex-direction:column;gap:56px} #product #main.w3c-fp2 .w3p2-section{scroll-margin-top:64px} #product #main.w3c-fp2 .w3p2-h2,#product #main.w3c-fp2 .w3p2-desc .rte-content > h2:first-child{margin:0 0 16px!important;color:var(--w3p2-titre)!important;font-size:24px!important;font-weight:500!important;line-height:1.3!important;text-transform:none!important;text-wrap:balance} #product #main.w3c-fp2 .w3p2-desc:has(.rte-content > h2:first-child) .w3p2-h2-desc{display:none} /* Description : lecture confortable */ #product #main.w3c-fp2 .w3p2-desc .product-description{max-width:760px;font-size:15px;line-height:1.65;color:var(--w3p2-texte)} #product #main.w3c-fp2 .w3p2-desc h3{border:0!important;padding:0!important;margin:28px 0 8px!important;color:var(--w3p2-titre)!important;font-size:17px!important;font-weight:500!important;line-height:1.35!important} #product #main.w3c-fp2 .w3p2-desc p{margin:0 0 12px} #product #main.w3c-fp2 .w3p2-desc ul{margin:0 0 12px;padding-left:20px} #product #main.w3c-fp2 .w3p2-desc li::marker{color:var(--w3p2-orange)} #product #main.w3c-fp2 .w3p2-desc a{color:var(--w3p2-orange)!important;text-decoration:underline;text-underline-offset:2px} #product #main.w3c-fp2 .w3p2-desc img{max-width:100%;height:auto} #product #main.w3c-fp2 .w3p2-desc table{display:block;max-width:100%;overflow-x:auto} /* Caracteristiques : carte grise, deux colonnes cle / valeur */ #product #main.w3c-fp2 .w3p2-specs .product-details-info{display:none} #product #main.w3c-fp2 .w3p2-specs .product-features{margin:0!important;padding:8px 24px;background:var(--w3p2-gris);border-radius:var(--w3p2-rayon)} #product #main.w3c-fp2 .w3p2-specs .product-features + .product-features{margin-top:16px!important} #product #main.w3c-fp2 .w3p2-specs .product-features .h6{margin:12px 0 4px;color:var(--w3p2-titre);font-size:15px;font-weight:500} #product #main.w3c-fp2 .w3p2-specs .data-sheet{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin:0!important;padding:0!important;list-style:none;background:transparent!important} #product #main.w3c-fp2 .w3p2-specs .data-sheet li{display:flex!important;justify-content:space-between;align-items:baseline!important;gap:16px;margin:0!important;padding:11px 0!important;background:transparent!important;border-bottom:1px solid var(--w3p2-filet)} #product #main.w3c-fp2 .w3p2-specs .data-sheet .label{flex:0 1 auto;margin:0!important;padding:0!important;background:transparent!important;color:var(--w3p2-texte)!important;font-weight:400!important;font-size:14px!important;text-transform:none!important} #product #main.w3c-fp2 .w3p2-specs .data-sheet .value{flex:0 1 auto;margin:0!important;padding:0!important;background:transparent!important;color:var(--w3p2-titre)!important;font-weight:500!important;font-size:14px!important;text-align:right;overflow-wrap:anywhere} #product #main.w3c-fp2 .w3p2-specs-vide{display:contents} /* Fiche technique detaillee : tableau deplace de la description (product-sections-v2.tpl). */ #product #main.w3c-fp2 .w3p2-fiche{margin-top:16px} #product #main.w3c-fp2 .w3p2-fiche-titre{margin:0 0 10px!important;padding:0!important;border:0!important;color:var(--w3p2-titre)!important;font-size:17px!important;font-weight:500!important;line-height:1.35!important;text-transform:none!important} #product #main.w3c-fp2 .w3p2-fiche-tab{padding:4px 24px;background:var(--w3p2-gris);border-radius:var(--w3p2-rayon);overflow-x:auto} #product #main.w3c-fp2 .w3p2-fiche-tab table{width:100%!important;margin:0!important;border:0!important;border-collapse:collapse;background:transparent!important;font-size:14px} #product #main.w3c-fp2 .w3p2-fiche-tab tr:has(> th){display:none} #product #main.w3c-fp2 .w3p2-fiche-tab td{padding:11px 0!important;border:0!important;border-bottom:1px solid var(--w3p2-filet)!important;background:transparent!important;vertical-align:top;text-align:left} #product #main.w3c-fp2 .w3p2-fiche-tab tr:last-child td{border-bottom:0!important} #product #main.w3c-fp2 .w3p2-fiche-tab td:first-child{width:38%;padding-right:20px!important;color:var(--w3p2-texte)} #product #main.w3c-fp2 .w3p2-fiche-tab td + td{color:var(--w3p2-titre);font-weight:500;overflow-wrap:anywhere} @media (max-width:767px){ #product #main.w3c-fp2 .w3p2-fiche-tab{padding:4px 16px} #product #main.w3c-fp2 .w3p2-fiche-tab tr{display:block;padding:10px 0;border-bottom:1px solid var(--w3p2-filet)} #product #main.w3c-fp2 .w3p2-fiche-tab tr:last-child{border-bottom:0} #product #main.w3c-fp2 .w3p2-fiche-tab td{display:block;width:auto!important;padding:0!important;border:0!important} #product #main.w3c-fp2 .w3p2-fiche-tab td:first-child{font-size:13px;margin-bottom:2px} } /* Documents */ #product #main.w3c-fp2 .w3p2-docs{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none} #product #main.w3c-fp2 .w3p2-doc{display:flex;align-items:center;gap:14px;max-width:460px;padding:14px 18px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--w3p2-rayon);background:var(--w3p2-gris);color:var(--w3p2-texte)!important;text-decoration:none!important;transition:border-color .2s ease,transform .16s var(--w3p2-ease)} #product #main.w3c-fp2 .w3p2-doc svg{flex:0 0 auto;color:var(--w3p2-orange)} #product #main.w3c-fp2 .w3p2-doc-txt{flex:1;min-width:0} #product #main.w3c-fp2 .w3p2-doc-nom{display:block;color:var(--w3p2-titre);font-weight:500;overflow-wrap:anywhere} #product #main.w3c-fp2 .w3p2-doc-poids{font-size:13px} #product #main.w3c-fp2 .w3p2-doc-action{color:var(--w3p2-orange);font-size:13px;font-weight:600} #product #main.w3c-fp2 .w3p2-vide{margin:0;padding:16px 18px;background:var(--w3p2-gris);border-radius:var(--w3p2-rayon)} /* Conseil */ #product #main.w3c-fp2 .w3p2-conseil{position:sticky;top:76px;display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--w3p2-gris);border-radius:var(--w3p2-rayon)} #product #main.w3c-fp2 .w3p2-conseil p{margin:0} #product #main.w3c-fp2 .w3p2-conseil-titre{color:var(--w3p2-titre);font-size:16px;font-weight:500;line-height:1.35} #product #main.w3c-fp2 .w3p2-conseil-txt{font-size:13.5px} #product #main.w3c-fp2 .w3p2-conseil-tel{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:var(--w3p2-rayon);background:var(--w3p2-orange);color:#fff!important;font-weight:600;text-decoration:none!important;transition:background-color .2s ease,transform .16s var(--w3p2-ease)} #product #main.w3c-fp2 .w3p2-conseil-note{font-size:12.5px;text-align:center} /* Accessoires : grille de cartes grises */ #product #main.w3c-fp2 .w3p2-acc{margin-top:56px} #product #main.w3c-fp2 .w3p2-acc-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none} #product #main.w3c-fp2 .w3p2-acc-carte{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px;background:var(--w3p2-gris);border-radius:var(--w3p2-rayon)} #product #main.w3c-fp2 .w3p2-acc-img{display:grid;place-items:center;height:140px} #product #main.w3c-fp2 .w3p2-acc-img img{width:140px;height:140px;max-width:100%;object-fit:contain;mix-blend-mode:multiply} #product #main.w3c-fp2 .w3p2-acc-nom{margin:0!important;font-size:13.5px!important;font-weight:500!important;line-height:1.4!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3 * 1.4em)} #product #main.w3c-fp2 .w3p2-acc-nom a{color:var(--w3p2-titre)!important;text-decoration:none!important} /* Stock et prix calés en bas de carte : sur une même rangée (cartes de même hauteur, grille), les noms occupent tous 3 lignes, les stocks tombent sur la même ligne, juste au-dessus des prix. */ #product #main.w3c-fp2 .w3p2-acc-stock{margin-top:auto;min-height:20px;display:flex;align-items:center} #product #main.w3c-fp2 .w3p2-acc-stock .si-product-list{margin:0;min-width:0;width:100%} #product #main.w3c-fp2 .w3p2-acc-stock .si-indicator{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px;margin:0!important;font-size:12.5px;min-width:0} #product #main.w3c-fp2 .w3p2-acc-stock .si-tooltip-wrap{flex:0 0 auto;margin:0!important} #product #main.w3c-fp2 .w3p2-acc-stock .si-items{flex:1 1 auto;min-width:0;margin:0!important;text-align:left!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #product #main.w3c-fp2 .w3p2-acc-stock .si-outer{width:48px!important;height:4px!important;border-radius:2px!important;background:#e2e2e2!important} #product #main.w3c-fp2 .w3p2-acc-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:-2px} #product #main.w3c-fp2 .w3p2-acc-prix{color:var(--w3p2-orange);font-weight:600;font-variant-numeric:tabular-nums} #product #main.w3c-fp2 .w3p2-acc-form{margin:0} #product #main.w3c-fp2 .w3p2-acc-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 12px!important;border:1px solid var(--w3p2-orange)!important;border-radius:var(--w3p2-rayon)!important;background:#fff!important;color:var(--w3p2-orange)!important;font-size:13px!important;font-weight:600!important;text-transform:none!important;text-decoration:none!important;box-shadow:none!important;cursor:pointer;transition:background-color .2s ease,transform .16s var(--w3p2-ease)} /* Barre d'achat collante mobile : c'est celle du site (.w3p-barre, posee par w3c-produit.js hors de #main, sous le body). Seul son style change : bouton orange plein, prix plus present. :has() limite ces regles a la fiche v2. */ body#product:has(#main.w3c-fp2) .w3p-barre .w3p-barre-btn{height:44px!important;padding:0 16px!important;border:0!important;border-radius:6px!important;background:#ff6501!important;color:#fff!important;font-weight:600!important;transition:background-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)} body#product:has(#main.w3c-fp2) .w3p-barre .w3p-barre-btn:active{transform:scale(.97)} body#product:has(#main.w3c-fp2) .w3p-barre .w3p-barre-prix{font-size:18px;font-weight:600} body#product:has(#main.w3c-fp2) .w3p-barre .w3p-barre-img{border-radius:6px;background:#f5f5f5;mix-blend-mode:multiply} /* ── Survol (pointeur fin seulement) et retour au clic ───────────────────── */ @media (hover:hover) and (pointer:fine){ #product #main.w3c-fp2 .product-quantity .add-to-cart:not(:disabled):hover, #product #main.w3c-fp2 .w3c-3d__btn:hover, #product #main.w3c-fp2 .w3p2-conseil-tel:hover{background-color:var(--w3p2-orange-survol)!important} #product #main.w3c-fp2 .w3p-devis:hover,#product #main.w3c-fp2 .w3p2-acc-btn:hover{background:var(--w3p2-orange-voile)!important} #product #main.w3c-fp2 .w3p-r:hover{background:#efefef!important} #product #main.w3c-fp2 .w3p2-doc:hover{border-color:var(--w3p2-orange)} #product #main.w3c-fp2 .w3p2-sommaire a:hover,#product #main.w3c-fp2 .w3p2-acc-nom a:hover{color:var(--w3p2-orange)!important} #product #main.w3c-fp2 .product-thumb:hover{border-color:var(--w3p2-orange-filet)!important} } #product #main.w3c-fp2 .product-quantity .add-to-cart:not(:disabled):active,#product #main.w3c-fp2 .w3c-3d__btn:active, #product #main.w3c-fp2 .w3p-devis:active,#product #main.w3c-fp2 .w3p2-acc-btn:active,#product #main.w3c-fp2 .w3p2-conseil-tel:active, #product #main.w3c-fp2 .w3p2-doc:active{transform:scale(.97)} /* ── Points de rupture ───────────────────────────────────────────────────── */ @media (max-width:1100px){ #product #main.w3c-fp2 .w3p2-acc-grille{grid-template-columns:repeat(3,minmax(0,1fr))} #product #main.w3c-fp2 .w3p2-corps{grid-template-columns:minmax(0,1fr)} #product #main.w3c-fp2 .w3p2-conseil{position:static;max-width:760px} } @media (max-width:991px){ #product #main.w3c-fp2 .product-container > .product-images, #product #main.w3c-fp2 .product-container > .product-infos{flex:0 0 100%!important;max-width:100%!important;width:100%!important} #product #main.w3c-fp2 .product-container > .product-images{position:static!important} #product #main.w3c-fp2 .product-infos{margin-top:24px} } @media (max-width:767px){ #product #main.w3c-fp2 .product_title{font-size:22px!important} #product #main.w3c-fp2 .current-price-display{font-size:30px!important} #product #main.w3c-fp2 .w3p2-pct{height:30px;font-size:16px!important} #product #main.w3c-fp2 .product-quantity .add-to-cart::before{display:none} #product #main.w3c-fp2 .product-quantity .add{flex:1 1 140px} #product #main.w3c-fp2 .w3p2-bas{margin-top:40px} #product #main.w3c-fp2 .w3p2-sections{gap:44px} #product #main.w3c-fp2 .w3p2-h2,#product #main.w3c-fp2 .w3p2-desc .rte-content > h2:first-child{font-size:20px!important} #product #main.w3c-fp2 .w3p2-specs .data-sheet{grid-template-columns:minmax(0,1fr)} #product #main.w3c-fp2 .w3p2-specs .product-features{padding:4px 16px} #product #main.w3c-fp2 .w3p2-acc-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #product #main.w3c-fp2 .w3p2-acc-carte{padding:10px} #product #main.w3c-fp2 .w3p2-acc-img{height:110px} #product #main.w3c-fp2 .w3p2-acc-img img{width:110px;height:110px} #product #main.w3c-fp2 .w3p2-acc-pied{flex-direction:column;align-items:stretch} #product #main.w3c-fp2 .w3p2-acc-stock .si-indicator{gap:6px;font-size:11.5px;letter-spacing:-.01em} #product #main.w3c-fp2 .w3p2-acc-stock .si-outer{width:22px!important} #product #main.w3c-fp2 .w3p2-doc{max-width:none} } @media (prefers-reduced-motion:reduce){ #product #main.w3c-fp2 *{transition:none!important} #product #main.w3c-fp2 .product-quantity .add-to-cart:active,#product #main.w3c-fp2 .w3c-3d__btn:active,#product #main.w3c-fp2 .w3p-devis:active, #product #main.w3c-fp2 .w3p2-acc-btn:active,#product #main.w3c-fp2 .w3p2-conseil-tel:active,#product #main.w3c-fp2 .w3p2-doc:active{transform:none} }