/* Theme Name: Calin Désir Theme URI: https://calindesir.fr/ Author: Calin Désir Description: Thème sur mesure — direction « Nu ». Ivoire et peau, bordeaux profond, sérif humaniste. Conçu pour remplacer Woodmart et faire tomber avec lui Elementor, Slider Revolution et WP Menu Cart. Version: 0.1.0 Requires at least: 6.0 Requires PHP: 8.0 License: Propriétaire Text Domain: calin-desir Tags: e-commerce, woocommerce */ /* ══════════════════════════════════════════════════════════════ JETONS — un seul endroit pour la direction artistique. Thème clair assumé : tout est peint explicitement. ══════════════════════════════════════════════════════════════ */ :root{ --f:#FBF7F4; --f2:#F4EAE3; --s:#FFFFFF; --peau:#E9CFC3; --peau-p:#F6E6DE; --t:#241619; --t2:#4A3439; --d:#7A6058; --b:#E9DCD3; --a:#8C2F42; --a-fonce:#6E2334; --a-clair:#B8556A; --ok:#2F7A5A; --ok-f:#E4F1EA; --alerte:#B0552A; --alerte-f:#FBEDE2; --r:14px; --r-p:8px; --r-pill:999px; --ombre:0 18px 40px -24px rgba(60,30,35,.36); --ombre-h:0 26px 56px -26px rgba(60,30,35,.44); --large:1240px; --titre:"Fraunces",Georgia,"Times New Roman",serif; --corps:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--f);color:var(--t);font-family:var(--corps); font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--a);text-decoration:none} a:hover{color:var(--a-fonce)} h1,h2,h3,h4,h5{font-family:var(--titre);font-weight:400;margin:0 0 .5em; line-height:1.15;letter-spacing:-.012em;text-wrap:balance;color:var(--t)} h1{font-size:clamp(1.8rem,4vw,2.9rem)} h2{font-size:clamp(1.4rem,3vw,2.1rem)} h3{font-size:clamp(1.1rem,2.2vw,1.4rem)} p{margin:0 0 1em} ul,ol{padding-left:1.2em} hr{border:0;border-top:1px solid var(--b);margin:2rem 0} :focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:3px} .ecran-lecteur{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .enrob{max-width:var(--large);margin:0 auto;padding:0 clamp(16px,3.4vw,40px)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .sur{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; color:var(--a);display:block;margin-bottom:.7rem} /* ⚠ `position:fixed` faisait de ce grain une couche plein écran que le navigateur devait recomposer à chaque image. En absolu, il défile avec la page — ce qu'un grain de papier fait de toute façon — et ne coûte plus rien. */ body::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E")} /* ─── bandeau défilant ─── */ .cd-annonce{background:var(--a);color:#fff;overflow:hidden;position:relative;z-index:40} .cd-annonce-piste{display:flex;width:max-content;animation:cd-defile 34s linear infinite} .cd-annonce span{display:inline-flex;align-items:center;padding:.5rem 1.6rem;font-family:var(--mono); font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap} .cd-annonce span::after{content:"·";opacity:.5;margin-left:1.6rem} @keyframes cd-defile{to{transform:translateX(-50%)}} .cd-annonce:hover .cd-annonce-piste{animation-play-state:paused} /* ─── en-tête ─── */ /* ⚠ PAS de `backdrop-filter` ici. Un en-tête collant qui refloute ce qui passe derrière lui oblige le navigateur à relire et rendre flous, à chaque image du défilement, tous les pixels d'une bande large de l'écran. C'était la cause principale des à-coups. Un fond presque opaque donne le même effet à l'œil pour un coût nul. */ .cd-entete{position:sticky;top:0;z-index:38;background:rgba(251,247,244,.97); border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s} .cd-entete.colle{border-bottom-color:var(--b);box-shadow:0 6px 26px -22px rgba(60,30,35,.5)} /* ⚠ L'en-tête ne change PLUS de hauteur au défilement. Il animait sa marge intérieure et la hauteur du logo — deux propriétés de mise en page — alors qu'il est en `position:sticky`, donc dans le flux. Chaque franchissement du seuil tirait toute la page de 23 px vers le haut pendant 300 ms : mesuré, le titre bougeait de 10 à 13 px par cran de 5 px de défilement. C'est ce que l'on ressentait comme un tremblement. L'état « collé » ne se marque donc plus que par de la peinture : une bordure, une ombre, et un logo réduit par `transform` — qui ne reflue rien. */ .cd-haut{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.8rem);padding:1rem 0} .cd-logo{flex:none;line-height:0} .cd-logo img{height:clamp(36px,5.4vw,66px);width:auto;transform-origin:left center; /* Le plancher reste à 36 px : à 42, le logo prenait 16 px de plus en largeur et la barre du téléphone débordait de 10 px. */ transition:transform .32s cubic-bezier(.2,.8,.2,1)} .cd-entete.colle .cd-logo img{transform:scale(.8)} .cd-logo-txt{font-family:var(--titre);font-size:1.45rem;font-weight:500;color:var(--t)} .cd-recherche{flex:1;position:relative;min-width:0;max-width:520px} .cd-recherche input[type=search],.cd-recherche input[type=text]{width:100%;background:var(--s); border:1px solid var(--b);border-radius:var(--r-pill);padding:.6rem 1rem .6rem 2.6rem; font-family:inherit;font-size:.88rem;color:var(--t);transition:border-color .25s,box-shadow .25s} .cd-recherche input::placeholder{color:var(--d)} .cd-recherche input:focus{outline:0;border-color:var(--a);box-shadow:0 0 0 4px rgba(140,47,66,.09)} .cd-recherche .cd-loupe{position:absolute;left:.95rem;top:50%;transform:translateY(-50%); width:15px;height:15px;opacity:.5;pointer-events:none;color:var(--t2)} .cd-recherche button[type=submit]{position:absolute;right:4px;top:50%;transform:translateY(-50%); background:none;border:0;color:var(--a);cursor:pointer;padding:.35rem .8rem;font-family:inherit;font-size:.8rem} /* Bouton discret dans la barre haute, à côté de la recherche. */ .cd-lien-haut{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.42rem; font-size:.86rem;font-weight:500;color:var(--t);background:var(--s); border:1px solid var(--b);border-radius:var(--r-pill);padding:.52rem 1.15rem; transition:color .22s,background .22s,border-color .22s,transform .22s,box-shadow .22s} .cd-lien-haut::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a); opacity:.65;transition:opacity .22s,background .22s} .cd-lien-haut:hover{color:#fff;background:var(--a);border-color:var(--a); transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(140,47,66,.65)} .cd-lien-haut:hover::before{background:#fff;opacity:1} @media(max-width:900px){ .cd-lien-haut{display:none} } .cd-outils{display:flex;align-items:center;gap:.15rem;margin-left:auto;flex:none} .cd-outil{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%; color:var(--t2);transition:background .22s,transform .22s} .cd-outil:hover{background:var(--peau-p);transform:translateY(-2px);color:var(--t)} .cd-outil svg{width:22px;height:22px} .cd-outil b{position:absolute;top:5px;right:5px;background:var(--a);color:#fff;border-radius:var(--r-pill); font-family:var(--mono);font-size:.58rem;min-width:17px;height:17px;display:grid;place-items:center; padding:0 3px;font-weight:400;line-height:1} /* La barre d'outils s'allongera : on garde les pictogrammes lisibles et c'est la recherche qui cède de la place, jamais eux. Sur téléphone la pastille se resserre, mais le dessin garde sa taille — la cible tactile y gagne. */ @media(max-width:860px){ .cd-outil{width:42px;height:42px} } /* ─── navigation + méga-menu ─── */ /* Le méga-menu s'ancre sur la BARRE, pas sur l'onglet : c'est ce qui lui permet d'occuper toute la largeur du conteneur d'en-tête et de rester centré avec le reste de la page. */ .cd-nav{border-top:1px solid var(--b);position:relative} /* ⚠ PAS d'overflow ici sur grand écran : un conteneur à défilement ROGNE ses descendants positionnés, et le méga-menu — pourtant « visible » — restait invisible, découpé à la hauteur de la barre. Le défilement horizontal n'est remis qu'en dessous du seuil où le méga-menu passe en accordéon. */ .cd-nav-l{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;overflow:visible} .cd-nav-l::-webkit-scrollbar{display:none} @media(max-width:860px){ .cd-nav-l{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} } .cd-nav-l>li{position:static;flex:none} .cd-nav-l>li>a{display:block;padding:.72rem 1.05rem;font-size:.87rem;white-space:nowrap; position:relative;color:var(--t2)} .cd-nav-l>li:first-child>a{padding-left:0} .cd-nav-l>li>a::after{content:"";position:absolute;left:1.05rem;right:1.05rem;bottom:0;height:2px; background:var(--a);transform:scaleX(0);transform-origin:left; transition:transform .32s cubic-bezier(.2,.8,.2,1)} .cd-nav-l>li:first-child>a::after{left:0} .cd-nav-l>li:hover>a,.cd-nav-l>li.actif>a{color:var(--a)} .cd-nav-l>li:hover>a::after,.cd-nav-l>li.actif>a::after{transform:scaleX(1)} .cd-nav-cpt{font-family:var(--mono);font-size:.6rem;opacity:.45;margin-left:.3rem} .cd-nav-promo>a{color:var(--a)!important;font-weight:500} /* ─── méga-menu ─── Trois zones : rayons à gauche, sous-rayons au centre, marques à droite. Le survol d'un rayon révèle ses sous-rayons en CSS pur — sans JavaScript, le menu reste entièrement navigable. */ .cd-mega{position:absolute;left:0;right:0;top:100%;z-index:39;background:var(--s); border:1px solid var(--b);border-top:0;border-radius:0 0 var(--r) var(--r); box-shadow:0 30px 70px -34px rgba(60,30,35,.5); display:grid;grid-template-columns:264px 1fr 268px;min-height:340px;overflow:hidden; opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .24s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .24s} .cd-nav-l>li:hover .cd-mega,.cd-nav-l>li:focus-within .cd-mega{opacity:1;visibility:visible;transform:translateY(0)} /* ⚠ Placement explicite : les volets vivent DANS le rail, donc la grille n'a que deux enfants directs. Sans grid-column, la colonne latérale se place automatiquement en position 2 et recouvre le volet central. */ .cd-mega-rail{grid-column:1;list-style:none;margin:0;padding:.7rem 0;background:var(--f); border-right:1px solid var(--b);max-height:min(72vh,520px);overflow-y:auto;scrollbar-width:thin} .cd-mega-rail>li{position:static} .cd-mega-r{display:flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;font-size:.86rem; color:var(--t2);border-left:2px solid transparent;transition:background .18s,color .18s,border-color .18s} .cd-mega-r span{flex:1;min-width:0} .cd-mega-r i{font-style:normal;font-family:var(--mono);font-size:.63rem;color:var(--d)} .cd-mega-fl{font-style:normal;color:var(--d);font-size:1rem;line-height:1;transition:transform .2s} .cd-mega-rail>li:hover .cd-mega-r,.cd-mega-rail>li:focus-within .cd-mega-r{ background:var(--s);color:var(--a);border-left-color:var(--a)} .cd-mega-rail>li:hover .cd-mega-fl{transform:translateX(3px)} /* Le volet des sous-rayons occupe la colonne centrale. */ .cd-mega-vol{display:none;position:absolute;left:264px;right:268px;top:0;bottom:0; padding:1.4rem 1.6rem;overflow-y:auto;animation:cd-volet .3s cubic-bezier(.2,.8,.2,1) both} @keyframes cd-volet{from{opacity:0;transform:translateX(-8px)}} .cd-mega-rail>li:hover>.cd-mega-vol,.cd-mega-rail>li:focus-within>.cd-mega-vol{display:flex} /* Tant qu'aucun rayon n'est survolé, on montre le premier. */ .cd-mega-rail:not(:hover):not(:focus-within)>li:first-child>.cd-mega-vol{display:flex} .cd-mega-titre{display:block;font-family:var(--titre);font-size:1.15rem;color:var(--t); margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--b)} .cd-mega-petits{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:.1rem 1.8rem} .cd-mega-petits a{display:flex;justify-content:space-between;gap:.7rem;align-items:baseline; padding:.3rem 0;font-size:.85rem;color:var(--t);border-bottom:1px solid transparent; transition:color .18s,border-color .18s,padding-left .18s} .cd-mega-petits a:hover{color:var(--a);border-bottom-color:var(--peau);padding-left:.25rem} .cd-mega-petits a i{font-style:normal;font-family:var(--mono);font-size:.63rem;color:var(--d)} /* ─── produits du volet ─── 53 rayons sur 75 n'ont pas de sous-rayon : leur volet restait blanc. On y pose trois produits, alignés en bas pour que les volets garnis et les volets nus gardent la même assise. ⚠ Cette règle disait `display:flex` : de même poids que le `display:none` du haut mais écrite plus bas, elle l'annulait et TOUS les volets restaient affichés, empilés au même endroit — seul le dernier se voyait, quel que soit le rayon survolé. La mise en colonne se déclare ici, l'affichage reste l'affaire des règles de survol. */ .cd-mega-vol{flex-direction:column} .cd-mega-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; margin-top:auto;padding-top:1.4rem} body.cd-theme a.cd-mega-prod{display:block;color:var(--t2);min-width:0} body.cd-theme a.cd-mega-prod img{width:100%;aspect-ratio:4/5;object-fit:cover; border-radius:var(--r-p);background:var(--f2);margin-bottom:.45rem; transition:transform .55s cubic-bezier(.2,.7,.2,1)} body.cd-theme a.cd-mega-prod:hover img{transform:scale(1.05)} .cd-mega-prod span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;font-size:.76rem;line-height:1.3;color:var(--t);margin-bottom:.12rem} body.cd-theme a.cd-mega-prod:hover span{color:var(--a)} /* wc_price() sort le symbole dans son propre span : sans nowrap, le « € » tombe seul à la ligne dans une colonne aussi étroite. */ .cd-mega-prod b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:.74rem;font-weight:500;color:var(--t);white-space:nowrap} .cd-mega-prod b del{opacity:.5;font-weight:400;margin-right:.25em} .cd-mega-prod b ins{text-decoration:none;color:var(--a)} .cd-mega-tout{display:inline-block;align-self:flex-start;margin-top:1.1rem;font-size:.82rem;color:var(--a); border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s} .cd-mega-tout:hover{border-bottom-color:var(--a)} .cd-mega-cote{grid-column:3;border-left:1px solid var(--b);padding:1.3rem 1.2rem;display:flex;flex-direction:column; gap:.5rem;background:linear-gradient(180deg,var(--s),var(--f))} .cd-mega-etq{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; color:var(--d)} .cd-mega-marques{display:flex;flex-direction:column;gap:.05rem;margin-bottom:.4rem} .cd-mega-marques a{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline; padding:.26rem 0;font-size:.82rem;color:var(--t2);transition:color .18s,padding-left .18s} .cd-mega-marques a:hover{color:var(--a);padding-left:.25rem} .cd-mega-marques a i{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--d)} .cd-mega-carte{margin-top:auto;position:relative;border-radius:var(--r-p);overflow:hidden; min-height:132px;display:flex;align-items:flex-end;padding:.9rem;isolation:isolate;color:#fff} .cd-mega-carte::before{content:"";position:absolute;inset:0;z-index:-2; transition:transform .8s cubic-bezier(.2,.7,.2,1)} .cd-mega-carte:hover::before{transform:scale(1.08)} .cd-mega-carte::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(36,22,25,.82) 10%,transparent 70%)} /* Carte illustrée : la photo remplace le dégradé, qui reste le repli des univers dont le catalogue n'offre aucun visuel présentable. */ body.cd-theme .cd-mega-carte-img{position:absolute;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)} .cd-mega-carte:hover .cd-mega-carte-img{transform:scale(1.08)} .cd-mega-carte.est-illustre::before{display:none} .cd-mega-carte b{display:block;font-family:var(--titre);font-size:1.02rem;font-weight:500;line-height:1.15} .cd-mega-carte i{font-style:normal;font-size:.72rem;opacity:.85} .cd-mega-c1::before{background:linear-gradient(155deg,#B4657A,#3E1522)} .cd-mega-c2::before{background:linear-gradient(155deg,#C58A7C,#4A2119)} .cd-mega-c3::before{background:linear-gradient(155deg,#7FA3A8,#1E3236)} .cd-mega-c4::before{background:linear-gradient(155deg,#8E7BA8,#2A2038)} .cd-mega-c5::before{background:linear-gradient(155deg,#C8A96B,#3A2E14)} .cd-mega-c6::before{background:linear-gradient(155deg,#7FB295,#1C3427)} @media(max-width:1100px){ .cd-mega{grid-template-columns:230px 1fr} .cd-mega-cote{display:none} .cd-mega-vol{left:230px;right:0} } /* Le volet doit rester au-dessus du fond de la colonne latérale. */ .cd-mega-vol{background:var(--s);z-index:2} .cd-burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--t)} .cd-burger svg{width:22px;height:22px} @media(max-width:860px){ .cd-burger{display:block} .cd-nav{display:none} .cd-nav.ouvert{display:block;position:fixed;inset:auto 0 0 0;top:0;background:var(--f);z-index:60; overflow-y:auto;padding:1rem} .cd-nav.ouvert .cd-nav-l{flex-direction:column;overflow:visible} .cd-nav.ouvert .cd-mega{position:static;opacity:1;visibility:visible;transform:none; box-shadow:none;border:0;padding:.2rem 0 .8rem;width:auto;display:block;min-height:0} .cd-nav.ouvert .cd-mega-rail{background:none;border:0;padding:0;max-height:none;overflow:visible} .cd-nav.ouvert .cd-mega-vol{position:static;display:block;padding:.2rem 0 .6rem 1rem;animation:none} .cd-nav.ouvert .cd-mega-titre{display:none} .cd-nav.ouvert .cd-mega-petits{grid-template-columns:1fr} .cd-nav.ouvert .cd-mega-cote{display:none} .cd-recherche{order:3;flex-basis:100%;max-width:none;margin-top:.6rem} } /* ─── boutons ─── */ .cd-btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #respond input#submit,.wp-block-button__link{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:var(--a);color:#fff; border:1px solid var(--a);border-radius:var(--r-pill);padding:.72rem 1.6rem;font-family:var(--corps); font-size:.9rem;font-weight:500;line-height:1.2;cursor:pointer;position:relative;overflow:hidden; text-decoration:none;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,background .24s} .cd-btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover, .woocommerce input.button:hover,.woocommerce #respond input#submit:hover{ background:var(--a-fonce);color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(140,47,66,.6)} .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background:var(--a);border-color:var(--a)} .cd-btn.creux{background:transparent;color:var(--t);border-color:var(--b)} .cd-btn.creux:hover{background:var(--peau-p);color:var(--t);border-color:var(--a);box-shadow:none} .cd-btn.plein{width:100%} .cd-fleche{transition:transform .3s cubic-bezier(.2,.8,.2,1)} .cd-btn:hover .cd-fleche{transform:translateX(4px)} /* ─── formulaires ─── */ input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number], input[type=search],input[type=url],select,textarea,.select2-container .select2-selection--single{ width:100%;background:var(--s);border:1px solid var(--b);border-radius:var(--r-p); padding:.62rem .8rem;font-family:var(--corps);font-size:.9rem;color:var(--t);line-height:1.4} textarea{min-height:130px} input:focus,select:focus,textarea:focus{outline:0;border-color:var(--a);box-shadow:0 0 0 3px rgba(140,47,66,.09)} label{font-size:.8rem;color:var(--d);display:block;margin-bottom:.28rem} /* ─── grille produits ─── */ body.cd-theme ul.products,.cd-grille{display:grid;gap:clamp(10px,1.4vw,18px);margin:0;padding:0; list-style:none;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))} body.cd-theme ul.products::before,body.cd-theme ul.products::after{display:none} /* Les grilles de la vitrine : cinq par ligne dès qu'il y a la place, pour deux lignes pleines de dix produits. En dessous, on laisse le remplissage automatique décider — cinq colonnes sur une tablette donneraient des vignettes illisibles. */ @media (min-width:1024px){ body.cd-theme ul.products.cd-grille-vitrine{grid-template-columns:repeat(5,minmax(0,1fr))} } /* ─── carrousel sur mobile ─── Dix vignettes empilées sur deux colonnes font une colonne interminable qu'on fait défiler sans rien regarder. En bande horizontale, on parcourt la sélection d'un pouce. Le débordement jusqu'aux bords de l'écran est voulu : une carte coupée au bord dit qu'il y a une suite, ce qu'une grille sagement alignée ne dit pas. */ @media (max-width:767px){ body.cd-theme ul.products.cd-grille-vitrine{ display:flex;grid-template-columns:none; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; margin-inline:calc(-1 * clamp(16px,3.4vw,40px)); padding-inline:clamp(16px,3.4vw,40px); scroll-padding-inline:clamp(16px,3.4vw,40px); padding-bottom:.4rem; scrollbar-width:none} body.cd-theme ul.products.cd-grille-vitrine::-webkit-scrollbar{display:none} body.cd-theme ul.products.cd-grille-vitrine>li.product{ flex:0 0 min(66vw,250px);scroll-snap-align:start} /* Le survol soulève la carte : sur un doigt, cela ne se produit jamais et la transformation gênerait le calage du défilement. */ body.cd-theme ul.products.cd-grille-vitrine>li.product:hover{transform:none} } /* ─── carrousel de vitrine, à partir de la tablette ─── Dix cartes sur deux lignes obligent à descendre pour voir la fin de la sélection ; sur une seule ligne qui glisse, cinq sont visibles et les cinq autres s'atteignent d'un coup de flèche. En dessous de 768 px, le carrousel mobile ci-dessus fait déjà le travail. */ @media (min-width:768px){ body.cd-theme ul.products.cd-carrousel{ display:flex;grid-template-columns:none;flex-wrap:nowrap; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none; margin-inline:calc(-1 * clamp(16px,3.4vw,40px)); padding-inline:clamp(16px,3.4vw,40px); scroll-padding-inline:clamp(16px,3.4vw,40px); padding-bottom:.4rem} body.cd-theme ul.products.cd-carrousel::-webkit-scrollbar{display:none} /* Cinq par écran, exactement comme la grille qu'il remplace. Sans `flex:0 0`, les cartes se compresseraient au lieu de déborder. */ body.cd-theme ul.products.cd-carrousel>li.product{ flex:0 0 calc((100% - 4 * clamp(10px,1.4vw,18px)) / 5);scroll-snap-align:start} /* Le survol soulève la carte ; dans un conteneur qui défile, le soulèvement se ferait rogner par le haut. */ body.cd-theme ul.products.cd-carrousel>li.product:hover{transform:none} } /* Entre la tablette et le grand écran, cinq cartes seraient illisibles ; on les élargit. Borné à 768 px : en dessous, le carrousel mobile a sa propre largeur de carte, plus généreuse, et cette règle l'écrasait. */ @media (min-width:768px) and (max-width:1023px){ body.cd-theme ul.products.cd-carrousel>li.product{flex-basis:clamp(178px,26vw,236px)} } /* Les flèches n'ont de sens que là où le carrousel de vitrine existe. */ @media (max-width:767px){ .cd-sect-tete .cd-bande-f{display:none} } @media (prefers-reduced-motion:reduce){ body.cd-theme ul.products.cd-carrousel{scroll-behavior:auto} } body.cd-theme ul.products li.product{width:auto;margin:0;float:none;position:relative; background:var(--s);border-radius:var(--r);overflow:hidden;border:1px solid transparent; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;text-align:left} body.cd-theme ul.products li.product:hover{transform:translateY(-6px);box-shadow:var(--ombre-h);border-color:var(--b)} /* Les visuels fournisseur ont des cadrages très différents — certains serrés, d'autres avec de la marge. En `cover`, les premiers se retrouvaient amputés : flacons coupés, boîtes tronquées. On les contient sur fond blanc, avec une marge intérieure pour qu'ils ne touchent jamais le bord de la carte. */ body.cd-theme ul.products li.product a img{width:100%;aspect-ratio:4/5;object-fit:contain;margin:0; padding:clamp(10px,4%,20px);background:#fff; transition:transform .7s cubic-bezier(.2,.7,.2,1)} body.cd-theme ul.products li.product:hover a img{transform:scale(1.05)} .cd-carte-vis{position:relative;overflow:hidden;display:block} body.cd-theme ul.products li.product .woocommerce-loop-product__title, body.cd-theme ul.products li.product h2{font-family:var(--corps);font-size:.85rem;font-weight:500; line-height:1.32;margin:.3rem 0 .45rem;padding:0;color:var(--t); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.25em} .cd-carte-txt{padding:.8rem .85rem .95rem} .cd-carte-marque{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--a)} body.cd-theme ul.products li.product .price{color:var(--t);font-family:var(--titre);font-size:1.04rem; font-weight:500;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap} body.cd-theme ul.products li.product .price del{color:var(--d);font-size:.76rem;font-family:var(--corps);opacity:1} body.cd-theme ul.products li.product .price ins{background:none;text-decoration:none;color:var(--t)} body.cd-theme ul.products li.product .star-rating{font-size:.72rem;color:var(--a);margin:.3rem 0 0} .woocommerce span.onsale,.cd-puce{position:absolute;top:.6rem;left:.6rem;z-index:3;margin:0; background:var(--a);color:#fff;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em; text-transform:uppercase;padding:.22rem .55rem;border-radius:var(--r-pill);min-height:0;min-width:0; line-height:1.4;font-weight:400} .cd-puce.rupture{background:var(--f2);color:var(--d)} /* « Nouveau » ne doit pas crier plus fort qu'une remise : fond clair, texte de la maison, la promotion garde le rouge pour elle seule. */ .cd-puce.neuf{background:#fff;color:var(--t);border:1px solid var(--b)} /* ─── ajout au panier depuis la vignette ─── Une pastille dans l'angle plutôt qu'une barre en travers de la photo : le produit reste visible en entier. Au survol, elle se déplie et donne son libellé — l'icône seule ne suffit pas à tout le monde. */ body.cd-theme ul.products li.product .button{position:absolute;right:.6rem;bottom:.6rem;left:auto; z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:0; width:auto;min-width:0;height:38px;padding:0 10.5px;margin:0; border-radius:var(--r-pill);background:var(--a);border:1px solid var(--a);color:#fff; font-family:var(--corps);font-size:.76rem;line-height:1;white-space:nowrap; box-shadow:0 10px 22px -14px rgba(60,30,35,.75); opacity:0;transform:translateY(9px) scale(.9); transition:opacity .26s ease,transform .34s cubic-bezier(.2,.8,.2,1), gap .3s cubic-bezier(.2,.8,.2,1),background .22s ease,border-color .22s ease} body.cd-theme ul.products li.product .button svg{flex:0 0 auto;width:17px;height:17px;display:block} .cd-ajout-t{display:block;max-width:0;overflow:hidden;opacity:0; transition:max-width .34s cubic-bezier(.2,.8,.2,1),opacity .2s ease} body.cd-theme ul.products li.product:hover .button{opacity:1;transform:none} body.cd-theme ul.products li.product .button:hover, body.cd-theme ul.products li.product .button:focus-visible{ background:var(--a-fonce);border-color:var(--a-fonce);box-shadow:0 12px 26px -12px rgba(60,30,35,.7);gap:.45rem} body.cd-theme ul.products li.product .button:hover .cd-ajout-t, body.cd-theme ul.products li.product .button:focus-visible .cd-ajout-t{max-width:11rem;opacity:1} body.cd-theme ul.products li.product .added_to_cart{display:none} /* ─── archive ─── */ .cd-fildar{font-family:var(--mono);font-size:.68rem;color:var(--d);padding:1.1rem 0 .2rem} .cd-fildar a{color:var(--d)} .cd-fildar a:hover{color:var(--a)} .cd-tete-archive{padding:.2rem 0 1.4rem} .cd-tete-archive .cd-desc{color:var(--d);font-size:.92rem;max-width:66ch} .cd-barre-liste{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:space-between;align-items:center; padding-bottom:1rem;border-bottom:1px solid var(--b);margin-bottom:1.2rem} .woocommerce .woocommerce-result-count{margin:0;font-size:.84rem;color:var(--d)} .woocommerce .woocommerce-ordering{margin:0} .woocommerce .woocommerce-ordering select{border-radius:var(--r-pill);padding:.42rem 1rem;font-size:.82rem;width:auto} .woocommerce nav.woocommerce-pagination{margin:2.4rem 0} .woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:.35rem;justify-content:center;flex-wrap:wrap} .woocommerce nav.woocommerce-pagination ul li{border:0;margin:0;overflow:visible} .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{ min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--b); border-radius:10px;font-family:var(--mono);font-size:.8rem;background:var(--s); padding:0 .5rem;color:var(--t);transition:all .2s} .woocommerce nav.woocommerce-pagination ul li a:hover{border-color:var(--a);color:var(--a);background:var(--s)} .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--a);border-color:var(--a);color:#fff} /* ─── fiche produit ─── */ .woocommerce div.product{margin-top:1rem} .woocommerce div.product div.images{margin-bottom:1.5rem} .woocommerce div.product div.images img{border-radius:var(--r);background:var(--f2)} .woocommerce div.product div.images .flex-control-thumbs{margin-top:10px;gap:8px;display:flex;flex-wrap:wrap} .woocommerce div.product div.images .flex-control-thumbs li{width:62px!important;margin:0;float:none} .woocommerce div.product div.images .flex-control-thumbs img{border:1px solid var(--b);border-radius:var(--r-p); aspect-ratio:1/1;object-fit:cover;opacity:.75;transition:opacity .2s,border-color .2s} .woocommerce div.product div.images .flex-control-thumbs img:hover, .woocommerce div.product div.images .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--a)} .woocommerce div.product .product_title{font-size:clamp(1.4rem,3vw,2rem);margin:.3rem 0 .5rem} .cd-marque-lien{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--a)} .woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--t);font-family:var(--titre); font-size:1.9rem;font-weight:500;font-variant-numeric:tabular-nums;margin:1rem 0 .2rem; display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap} .woocommerce div.product p.price del{color:var(--d);font-size:.95rem;font-family:var(--corps);opacity:1} .woocommerce div.product p.price ins{background:none;text-decoration:none;color:var(--t)} .cd-tva{font-size:.72rem;color:var(--d);margin:0 0 1rem} .woocommerce div.product form.cart{margin:1.2rem 0;display:flex;gap:.6rem;flex-wrap:wrap;align-items:stretch} .woocommerce div.product form.cart div.quantity{display:flex;align-items:center;border:1px solid var(--b); border-radius:var(--r-pill);background:var(--s);overflow:hidden;margin:0} .woocommerce div.product form.cart div.quantity input.qty{border:0;width:56px;text-align:center; font-family:var(--mono);background:none;padding:.6rem 0} .woocommerce div.product form.cart .button{flex:1;min-width:180px} .woocommerce div.product form.cart .variations{width:100%;margin-bottom:.8rem} .woocommerce div.product form.cart .variations td,.woocommerce div.product form.cart .variations th{padding:.3rem 0} .woocommerce div.product form.cart .variations label{font-family:var(--mono);font-size:.68rem; letter-spacing:.13em;text-transform:uppercase;color:var(--d)} .woocommerce .product_meta{font-size:.78rem;color:var(--d);border-top:1px solid var(--b); padding-top:.9rem;margin-top:1rem} .woocommerce .product_meta>span{display:block;margin-bottom:.2rem} .cd-dispo{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--ok);margin:.6rem 0 .2rem} .cd-dispo i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block} .cd-dispo.rupture{color:var(--alerte)} .cd-dispo.rupture i{background:var(--alerte)} .woocommerce div.product .stock{color:var(--ok)} .woocommerce div.product .out-of-stock{color:var(--alerte)} .cd-liv{border:1px solid var(--b);border-radius:var(--r);margin:1.3rem 0;overflow:hidden;background:var(--s)} .cd-liv div{display:flex;justify-content:space-between;gap:1rem;padding:.62rem .9rem; border-bottom:1px solid var(--b);font-size:.8rem} .cd-liv div:last-child{border-bottom:0} .cd-liv span{color:var(--d);font-family:var(--mono);font-size:.74rem;white-space:nowrap} .cd-liv .off{color:var(--ok)} .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:2.4rem 0 0;display:flex; border-bottom:1px solid var(--b);overflow-x:auto;scrollbar-width:none} .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0; margin:0;padding:0;white-space:nowrap} .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li a{display:block;padding:.6rem 1rem .7rem; font-family:var(--titre);font-size:1.05rem;color:var(--d);border-bottom:2px solid transparent} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--t);border-bottom-color:var(--a)} .woocommerce div.product .woocommerce-tabs .panel{padding:1.5rem 0;margin:0} .woocommerce table.shop_attributes{border:1px solid var(--b);border-radius:var(--r);overflow:hidden; border-collapse:separate;border-spacing:0;max-width:620px} .woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{border:0; border-bottom:1px solid var(--b);padding:.5rem .8rem;font-size:.85rem;font-style:normal} .woocommerce table.shop_attributes th{background:#FDFAF8;color:var(--d);font-weight:500;width:42%} .woocommerce table.shop_attributes tr:last-child th,.woocommerce table.shop_attributes tr:last-child td{border-bottom:0} /* ─── avis ─── */ .woocommerce #reviews #comments ol.commentlist{padding:0} .woocommerce #reviews #comments ol.commentlist li{margin-bottom:1.4rem;border-left:2px solid var(--peau); padding-left:1rem;list-style:none} .woocommerce #reviews #comments ol.commentlist li img.avatar{position:static;width:34px;border:0; border-radius:50%;padding:0;float:left;margin-right:.7rem} .woocommerce #reviews #comments ol.commentlist li .comment-text{border:0;padding:0;margin:0;border-radius:0} .woocommerce #review_form #respond textarea{min-height:130px} .woocommerce p.stars a{color:var(--a)} .woocommerce .star-rating span::before,.woocommerce .star-rating::before{color:var(--a)} /* ─── panier ─── */ .woocommerce table.shop_table{border:1px solid var(--b);border-radius:var(--r);border-collapse:separate; border-spacing:0;overflow:hidden;background:var(--s)} .woocommerce table.shop_table th{background:var(--f2);font-family:var(--mono);font-size:.66rem; letter-spacing:.13em;text-transform:uppercase;color:var(--d);font-weight:400;padding:.7rem .9rem} .woocommerce table.shop_table td{padding:.9rem;border-top:1px solid var(--b);font-size:.88rem} .woocommerce table.shop_table img{width:64px;border-radius:var(--r-p)} .woocommerce-cart table.cart td.actions .coupon .input-text{width:auto;min-width:160px; border-radius:var(--r-pill);padding:.55rem .9rem} .woocommerce .cart_totals h2,.woocommerce-checkout #order_review_heading{font-size:1.2rem} .woocommerce .cart-collaterals .cart_totals table.shop_table td, .woocommerce .cart-collaterals .cart_totals table.shop_table th{padding:.6rem .9rem} .cd-franco{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:1.2rem} .cd-franco p{margin:0 0 .6rem;font-size:.85rem} .cd-franco .piste{height:6px;background:var(--f2);border-radius:4px;overflow:hidden} .cd-franco .piste i{display:block;height:100%;background:linear-gradient(90deg,var(--a-clair),var(--a)); border-radius:4px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)} /* ─── commande et compte ─── */ .woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{width:100%;float:none} .woocommerce form .form-row{padding:0;margin:0 0 .85rem} .woocommerce form .form-row label{font-size:.78rem;color:var(--d)} .woocommerce-checkout #payment{background:var(--s);border:1px solid var(--b);border-radius:var(--r)} .woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--b);padding:1rem} .woocommerce-checkout #payment div.form-row{padding:1rem} .woocommerce-checkout #payment ul.payment_methods li{list-style:none} .woocommerce-account .woocommerce-MyAccount-navigation{width:25%} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0} .woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:.6rem .9rem; border-radius:10px;font-size:.88rem;color:var(--t2)} .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--f2)} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--a);color:#fff} .woocommerce-account .woocommerce-MyAccount-content{width:72%} /* ─── messages ─── */ .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{ background:var(--s);border:1px solid var(--b);border-top:0;border-left:3px solid var(--a); border-radius:0 var(--r-p) var(--r-p) 0;padding:.95rem 1.1rem;font-size:.88rem;color:var(--t2);margin:0 0 1.4rem} .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none} .woocommerce-message{border-left-color:var(--ok);background:var(--ok-f)} .woocommerce-error{border-left-color:var(--alerte);background:var(--alerte-f);list-style:none} /* ─── réassurance ─── */ .cd-rass{background:var(--s);border-top:1px solid var(--b);border-bottom:1px solid var(--b)} .cd-rass-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .cd-rass-i{display:flex;gap:.85rem;padding:1.35rem clamp(.6rem,2vw,1.5rem);align-items:flex-start; border-right:1px solid var(--b)} .cd-rass-i:last-child{border-right:0} .cd-rass-i i{flex:none;width:36px;height:36px;border-radius:50%;background:var(--peau-p); display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s} .cd-rass-i:hover i{transform:scale(1.1) rotate(-6deg);background:var(--peau)} .cd-rass-i svg{width:17px;height:17px;color:var(--a)} .cd-rass-i b{display:block;font-size:.85rem;font-weight:600;line-height:1.25} .cd-rass-i span{font-size:.76rem;color:var(--d);line-height:1.38;display:block} /* ─── sections d'accueil ─── */ /* Le blanc au-dessus et au-dessous d'une section : assez pour séparer, pas au point qu'un carrousel flotte au milieu d'une bande vide. */ .cd-sect{padding:clamp(2.1rem,4.2vw,3.5rem) 0} .cd-sect .cd-sect-tete{margin-bottom:1.5rem} .cd-sect.creuse{background:var(--f2)} .cd-sect-tete{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:flex-end; justify-content:space-between;margin-bottom:1.9rem} .cd-sect-tete h2{margin:0} .cd-sect-tete p{color:var(--d);max-width:52ch;margin:.55rem 0 0;font-size:.93rem} .cd-lien-f{display:inline-flex;align-items:center;gap:.4rem;font-size:.87rem;color:var(--a); border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .25s;white-space:nowrap} .cd-lien-f:hover{border-bottom-color:var(--a)} .cd-hero{position:relative;overflow:hidden;background:var(--f2)} .cd-hero-fond{position:absolute;inset:-8% -4%; background:radial-gradient(ellipse 46% 52% at 72% 34%,rgba(201,128,143,.5),transparent 62%), radial-gradient(ellipse 52% 46% at 26% 74%,rgba(233,207,195,.85),transparent 66%), radial-gradient(ellipse 38% 40% at 52% 12%,rgba(140,47,66,.18),transparent 64%), linear-gradient(160deg,#FBF3EE,#EEDDD4);will-change:transform} .cd-hero-g{position:relative;display:grid;grid-template-columns:1fr;gap:2rem; padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);align-items:center} @media(min-width:900px){.cd-hero-g{grid-template-columns:1.05fr .95fr;gap:3rem}} .cd-hero h1{font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.02;max-width:14ch;margin:0} .cd-hero h1 em{font-style:italic;color:var(--a);font-weight:300} .cd-hero .intro{font-size:clamp(1rem,1.5vw,1.13rem);color:var(--t2);max-width:44ch;margin:1.3rem 0 2rem} .cd-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem} .cd-preuve{display:flex;gap:clamp(1.2rem,3vw,2.4rem);margin-top:2.6rem;flex-wrap:wrap} .cd-preuve b{display:block;font-family:var(--titre);font-size:1.7rem;font-weight:500;line-height:1; font-variant-numeric:tabular-nums} .cd-preuve span{font-size:.76rem;color:var(--d)} .cd-hero-visuel{position:relative;aspect-ratio:1/1.02;border-radius:200px 200px 24px 24px;overflow:hidden; background:linear-gradient(165deg,#F7E8E1,#DCB6A8);box-shadow:var(--ombre)} /* ─── vedettes dans l'arche ─── */ .cd-hero-etq{position:absolute;top:clamp(18px,4%,34px);left:50%;transform:translateX(-50%);z-index:3; font-family:var(--mono);font-size:.6rem;letter-spacing:.19em;text-transform:uppercase; color:var(--a-fonce);background:rgba(255,255,255,.72);border-radius:var(--r-pill); padding:.32rem .9rem;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .cd-hero-scene{position:absolute;inset:0} .cd-hero-art{position:absolute;inset:0;display:block; visibility:hidden;color:var(--t);transition:visibility .62s} .cd-hero-art.est-actif{visibility:visible} /* L'opacité porte sur les enfants, jamais sur la carte : une opacité intermédiaire isolerait l'image et son fondu « multiply » cesserait d'agir le temps de la transition — le carré blanc réapparaîtrait. */ .cd-hero-art>*{opacity:0;transform:scale(.95); transition:opacity .55s ease,transform .8s cubic-bezier(.16,1,.3,1)} .cd-hero-art.est-actif>*{opacity:1;transform:none} .cd-hero-art.est-actif .cd-hero-txt{transition-delay:.1s} /* ─── la couche d'image porte elle-même le dégradé ─── Les visuels fournisseur sont détourés sur blanc ; « multiply » fait disparaître ce blanc en laissant passer le fond. Mais un fondu ne s'applique qu'au sein d'un contexte d'empilement : dès qu'un parent anime son opacité, l'image s'isole, le fondu cesse et le carré blanc de la photo réapparaît — à l'entrée de page comme à chaque changement de produit. Deux parents le faisaient ici : cette couche et le bloc d'apparition `.cd-rev`. On répète donc le dégradé de l'arche sur la couche elle-même, et on l'isole explicitement : le fondu se joue chez elle, hors d'atteinte des opacités animées au-dessus. `.cd-hero-visuel` étant en `overflow:hidden`, les angles de l'arche restent découpés. */ .cd-hero-img{position:absolute;inset:0;display:block;isolation:isolate;box-sizing:border-box; background:linear-gradient(165deg,#F7E8E1,#DCB6A8); padding:clamp(48px,15%,92px) 11% clamp(92px,27%,142px)} /* Un halo clair derrière le produit : il lui rend le relief que l'on perd en supprimant le fond blanc — « multiply » aurait noirci une ombre portée. */ .cd-hero-img::before{content:"";position:absolute;left:50%;top:46%; width:80%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.6),rgba(255,255,255,0) 66%)} /* La boîte de l'image vient de la marge intérieure de la couche, jamais de décalages posés sur l'image elle-même : pour un élément remplacé, `width:auto` reprend la taille intrinsèque et `right`/`bottom` sont ignorés — l'image débordait alors sur la légende. */ body.cd-theme .cd-hero-img img{position:relative;display:block;width:100%;height:100%; object-fit:contain;object-position:center; mix-blend-mode:multiply; animation:cd-hero-flotte 7s ease-in-out infinite} @keyframes cd-hero-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} .cd-hero-txt{position:absolute;left:7%;right:7%;bottom:clamp(38px,9.5%,58px);z-index:2; display:block;text-align:center} .cd-hero-txt b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.17em; text-transform:uppercase;color:var(--a);margin-bottom:.2rem} .cd-hero-txt i{display:block;font-style:normal;font-family:var(--titre);font-size:1rem; line-height:1.24;color:var(--t);margin-bottom:.18rem} .cd-hero-txt em{font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:.88rem;color:var(--t)} .cd-hero-txt em del{opacity:.5;margin-right:.3em} .cd-hero-art:hover .cd-hero-txt i{color:var(--a)} .cd-hero-points{position:absolute;left:50%;bottom:clamp(14px,3.5%,24px);transform:translateX(-50%); z-index:3;display:flex;gap:.45rem} .cd-hero-points button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(60,30,35,.26);transition:background .22s ease,transform .22s ease} .cd-hero-points button[aria-selected="true"]{background:var(--a);transform:scale(1.42)} .cd-hero-points button:hover{background:var(--a-clair)} @media (prefers-reduced-motion:reduce){ body.cd-theme .cd-hero-img img{animation:none} .cd-hero-art{transition:opacity .01s} } /* ─── les univers, en cartouches ─────────────────────────────────────── Quatre colonnes, et la première cartouche court sur deux : sept rayons remplissent ainsi la grille sans laisser de trou, et le plus fourni occupe la plus grande tuile — la hiérarchie dit quelque chose de vrai. La teinte arrive par `--cd-univ-fond`, posée en PHP d'après le slug. */ .cd-univers{display:grid;gap:clamp(10px,1.4vw,16px);grid-template-columns:repeat(4,1fr)} .cd-univers>.cd-univ:first-child{grid-column:span 2} @media (max-width:900px){ .cd-univers{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .cd-univers{grid-template-columns:1fr} .cd-univers>.cd-univ:first-child{grid-column:auto} } .cd-univ{position:relative;display:flex;flex-direction:column;justify-content:space-between; min-height:clamp(152px,17vw,196px);padding:1rem 1rem .95rem;border-radius:var(--r); overflow:hidden;isolation:isolate;color:#fff;text-decoration:none; background:var(--cd-univ-fond,linear-gradient(152deg,#9C6A72,#3A2026)); transition:transform .34s cubic-bezier(.2,.7,.2,1),box-shadow .34s} /* ── la lueur ── Une bille de lumière hors-champ, en bas à droite. Elle respire en permanence — au repos comme au survol — et se déploie vers le texte quand on s'approche. 🚨 On ne peut PAS écrire la respiration en `@keyframes transform` et le déploiement en `:hover{transform:…}` : une animation l'emporte toujours sur une déclaration normale, et le survol serait ignoré. Mettre l'animation en pause pour laisser passer le survol marche, mais fige le cercle — ce qui se voit. La composition passe donc par trois variables que les keyframes MULTIPLIENT : le survol change les variables, l'animation continue de tourner et compose les deux. `@property` les déclare comme des nombres, seul moyen de les faire transiter en douceur plutôt que sauter. `--cd-univ-i` porte le rang de la cartouche : le décalage négatif désynchronise les sept respirations, sans quoi la grille palpiterait d'un bloc. */ @property --cd-univ-ampleur{syntax:"";inherits:false;initial-value:1} @property --cd-univ-dx{syntax:"";inherits:false;initial-value:0%} @property --cd-univ-dy{syntax:"";inherits:false;initial-value:0%} .cd-univ::after{content:"";position:absolute;inset:auto -30% -46% auto;width:76%;aspect-ratio:1/1; border-radius:50%;background:rgba(255,255,255,.09);z-index:-2; --cd-univ-ampleur:1;--cd-univ-dx:0%;--cd-univ-dy:0%; animation:cd-univ-souffle 9s ease-in-out infinite; animation-delay:calc(var(--cd-univ-i,0) * -1.7s); transition:--cd-univ-ampleur .55s cubic-bezier(.2,.7,.2,1), --cd-univ-dx .55s cubic-bezier(.2,.7,.2,1), --cd-univ-dy .55s cubic-bezier(.2,.7,.2,1), background .4s} @keyframes cd-univ-souffle{ 0%,100%{transform:translate(var(--cd-univ-dx),var(--cd-univ-dy)) scale(calc(var(--cd-univ-ampleur) * 1))} 50% {transform:translate(var(--cd-univ-dx),var(--cd-univ-dy)) scale(calc(var(--cd-univ-ampleur) * 1.07))} } /* ── le reflet ── Une bande de lumière en biais, garée hors du cadre. Elle ne traverse qu'au survol : une seule fois, sans boucler, sinon la carte clignote. */ .cd-univ::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:52%;z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.17),transparent); transform:translateX(0) skewX(-14deg); transition:transform .72s cubic-bezier(.32,.62,.28,1)} .cd-univ:hover{transform:translateY(-6px);box-shadow:0 22px 42px -20px rgba(60,30,35,.58)} .cd-univ:active{transform:translateY(-2px) scale(.988);transition-duration:.09s} /* Le cercle continue de respirer : on ne touche qu'à son ampleur et à sa position, que les keyframes reprennent à chaque image. */ .cd-univ:hover::after,.cd-univ:focus-visible::after{ --cd-univ-ampleur:1.5;--cd-univ-dx:-8%;--cd-univ-dy:-10%; background:rgba(255,255,255,.13)} .cd-univ:hover::before,.cd-univ:focus-visible::before{transform:translateX(420%) skewX(-14deg)} .cd-univ:focus-visible{outline:2px solid var(--t);outline-offset:3px} /* 🚨 La règle globale `a:hover{color:var(--a-fonce)}` repeint TOUT lien survolé en bordeaux foncé — donc le texte de la cartouche, sur un fond bordeaux. `.cd-univ{color:#fff}` ne suffit pas : une classe seule (0,1,0) perd contre `a:hover` (0,1,1). On redit donc le blanc au survol, où deux classes-pseudo (0,2,0) l'emportent. */ .cd-univ:hover,.cd-univ:focus-visible, .cd-univ:hover b,.cd-univ:hover i,.cd-univ:focus-visible b,.cd-univ:focus-visible i{color:#fff} .cd-univ-ic{display:block;line-height:0;opacity:.7; transition:opacity .34s,transform .38s cubic-bezier(.2,.7,.2,1)} .cd-univ-ic svg{width:30px;height:30px} .cd-univ:hover .cd-univ-ic,.cd-univ:focus-visible .cd-univ-ic{ opacity:1;transform:translateY(-3px) rotate(-4deg)} .cd-univ-nom{position:relative;display:block; transition:transform .38s cubic-bezier(.2,.7,.2,1)} .cd-univ:hover .cd-univ-nom,.cd-univ:focus-visible .cd-univ-nom{transform:translateY(-3px)} .cd-univ b{display:block;font-family:var(--titre);font-size:1.25rem;font-weight:500; line-height:1.12;letter-spacing:-.01em;margin-bottom:.3rem} .cd-univ i{font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em; opacity:.74;font-variant-numeric:tabular-nums;transition:opacity .34s,letter-spacing .38s} .cd-univ:hover i,.cd-univ:focus-visible i{opacity:.96;letter-spacing:.14em} .cd-univ-fl{position:absolute;top:1rem;right:1rem;width:17px;height:17px;opacity:0; transform:translate(-7px,4px); transition:opacity .3s,transform .42s cubic-bezier(.2,.7,.2,1)} .cd-univ:hover .cd-univ-fl,.cd-univ:focus-visible .cd-univ-fl{opacity:.92;transform:none} /* La cartouche large a de la place : on y donne plus de voix au nom. */ .cd-univers>.cd-univ:first-child b{font-size:clamp(1.35rem,2.4vw,1.75rem)} @media (max-width:520px){ .cd-univ{min-height:118px;flex-direction:row;align-items:center;gap:.9rem} .cd-univ-ic svg{width:26px;height:26px} .cd-univers>.cd-univ:first-child b{font-size:1.25rem} } /* Sans mouvement : on garde le contraste et la flèche, on retire la respiration, le reflet et les déplacements. L'information reste, l'agitation part. */ @media (prefers-reduced-motion:reduce){ .cd-univ::after{animation:none} .cd-univ::before{display:none} .cd-univ:hover{transform:none} .cd-univ:hover .cd-univ-ic,.cd-univ:hover .cd-univ-nom, .cd-univ:focus-visible .cd-univ-ic,.cd-univ:focus-visible .cd-univ-nom{transform:none} .cd-univ:hover::after,.cd-univ:focus-visible::after{ --cd-univ-ampleur:1;--cd-univ-dx:0%;--cd-univ-dy:0%} } .cd-marques{overflow:hidden;padding:1.6rem 0;border-top:1px solid var(--b);border-bottom:1px solid var(--b); background:var(--s);position:relative} .cd-marques-piste{display:flex;align-items:center;gap:1rem;width:max-content; animation:cd-defile 40s linear infinite} /* Une plaque blanche par logo : le flux fournisseur livre des PNG tantôt détourés, tantôt sur fond blanc, et les deux doivent se ressembler ici. */ .cd-marques-piste a{flex:none;display:grid;place-items:center;width:132px;height:62px; padding:.5rem .85rem;background:#fff;border:1px solid var(--b);border-radius:10px; transition:transform .25s,box-shadow .25s,border-color .25s} .cd-marques-piste a:hover{transform:translateY(-2px);border-color:var(--peau); box-shadow:0 8px 20px rgba(58,26,36,.1)} /* La retenue porte sur le logo, pas sur la plaque : atténuer les deux laissait transparaître le fond de la bande et délavait les tracés clairs. */ .cd-marques-piste img{display:block;max-width:100%;max-height:42px;width:auto;height:auto; object-fit:contain;opacity:.9;transition:opacity .25s} .cd-marques-piste a:hover img{opacity:1} @media (max-width:640px){ .cd-marques-piste{gap:.7rem} .cd-marques-piste a{width:108px;height:52px;padding:.4rem .6rem} .cd-marques-piste img{max-height:34px} } .cd-marques:hover .cd-marques-piste{animation-play-state:paused} .cd-news{background:linear-gradient(140deg,#3A1A24,#1C0E13);color:#fff;border-radius:var(--r); padding:clamp(1.8rem,4vw,3.2rem);position:relative;overflow:hidden;isolation:isolate} .cd-news::before{content:"";position:absolute;inset:-30% -10% auto auto;width:60%;aspect-ratio:1/1;z-index:-1; background:radial-gradient(circle,rgba(201,128,143,.4),transparent 66%)} .cd-news-g{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center} @media(min-width:820px){.cd-news-g{grid-template-columns:1.05fr .95fr;gap:3rem}} .cd-news h2{color:#fff} .cd-news p{color:rgba(255,255,255,.75);font-size:.92rem;margin:.6rem 0 0;max-width:42ch} .cd-news .sur{color:var(--peau)} .cd-seo{max-width:80ch} .cd-seo-corps{position:relative;overflow:hidden;max-height:112px;transition:max-height .55s cubic-bezier(.2,.8,.2,1)} .cd-seo-corps.ouvert{max-height:1400px} .cd-seo-corps::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px; background:linear-gradient(transparent,var(--f));transition:opacity .4s} .cd-seo-corps.ouvert::after{opacity:0} .cd-seo-plus{margin-top:.9rem;background:none;border:0;border-bottom:1px solid var(--a);color:var(--a); font-family:inherit;font-size:.87rem;cursor:pointer;padding:0 0 2px} /* ─── pied de page ─── */ .cd-pied{background:var(--t);color:#EFE3E0;position:relative;z-index:2} .cd-pied-h{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:2rem; padding:clamp(2.4rem,5vw,3.4rem) 0 2rem} .cd-pied-col h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.17em;text-transform:uppercase; color:var(--peau);margin:0 0 .85rem;font-weight:400} .cd-pied-col ul{list-style:none;margin:0;padding:0} .cd-pied-col li{margin-bottom:.4rem} .cd-pied-col a{font-size:.85rem;color:rgba(239,227,224,.72);transition:color .22s} .cd-pied-col a:hover{color:#fff} .cd-pied-marque img{height:54px;width:auto;filter:brightness(0) invert(1);opacity:.94;margin-bottom:.6rem} .cd-pied-marque p{font-size:.83rem;color:rgba(239,227,224,.6);max-width:32ch} .cd-pied-soc{display:flex;gap:.5rem;margin-top:1rem} .cd-pied-soc a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(239,227,224,.2); display:grid;place-items:center;transition:background .24s,border-color .24s,transform .24s} .cd-pied-soc a:hover{background:var(--a);border-color:var(--a);transform:translateY(-3px)} .cd-pied-soc svg{width:15px;height:15px} .cd-pied-bas{border-top:1px solid rgba(239,227,224,.13);padding:1.2rem 0 2rem;display:flex; flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center} .cd-pied-bas p{margin:0;font-size:.76rem;color:rgba(239,227,224,.5)} .cd-pied-bas nav{display:flex;flex-wrap:wrap;gap:1.1rem} .cd-pied-bas nav a{font-size:.76rem;color:rgba(239,227,224,.62)} .cd-paiements{display:flex;gap:.4rem;flex-wrap:wrap} .cd-paiements span{border:1px solid rgba(239,227,224,.2);border-radius:5px;padding:.22rem .5rem; font-family:var(--mono);font-size:.6rem;color:rgba(239,227,224,.68)} /* ─── contenu éditorial ─── */ .cd-page{padding:0 0 clamp(3rem,6vw,5rem)} /* ⚠ Le plafond de lecture ne va PAS sur le conteneur : il briderait aussi les grilles, les tableaux et la sortie des shortcodes. Sur la page des marques, la grille se retrouvait à 810 px dans un conteneur de 1 160. Ce sont les blocs de PROSE qui sont plafonnés, un par un, juste en dessous. */ .cd-contenu{max-width:none} .cd-contenu img{border-radius:var(--r);margin:1.4rem 0} .cd-contenu h2,.cd-contenu h3{margin-top:1.8rem} .cd-contenu table{width:100%;border-collapse:collapse;font-size:.88rem;margin:1.2rem 0} .cd-contenu th,.cd-contenu td{border:1px solid var(--b);padding:.5rem .8rem;text-align:left} .cd-contenu th{background:var(--f2);font-weight:600} .cd-contenu blockquote{border-left:3px solid var(--a);margin:1.4rem 0;padding:.3rem 0 .3rem 1.1rem;color:var(--t2)} .cd-arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.6vw,22px)} .cd-art{background:var(--s);border-radius:var(--r);overflow:hidden;border:1px solid var(--b); transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} .cd-art:hover{transform:translateY(-5px);box-shadow:var(--ombre-h)} .cd-art-vis{aspect-ratio:16/10;overflow:hidden;background:var(--f2)} .cd-art-vis img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)} .cd-art:hover .cd-art-vis img{transform:scale(1.07)} .cd-art-txt{padding:1.05rem 1.15rem 1.25rem} .cd-art h3{font-size:1.03rem;line-height:1.28;margin:.4rem 0 .45rem;font-weight:500} .cd-art p{font-size:.82rem;color:var(--d);margin:0 0 .7rem} .cd-art .date{font-family:var(--mono);font-size:.66rem;color:var(--d)} .cd-404{text-align:center;padding:clamp(3rem,8vw,6rem) 0} .cd-404 .code{font-family:var(--titre);font-size:clamp(4rem,14vw,9rem);line-height:1;color:var(--peau)} /* ─── révélations ─── */ .js .cd-rev{opacity:0;transform:translateY(22px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} .js .cd-rev.vu{opacity:1;transform:none} .cd-d1{transition-delay:.07s}.cd-d2{transition-delay:.14s}.cd-d3{transition-delay:.21s} .cd-d4{transition-delay:.28s}.cd-d5{transition-delay:.35s}.cd-d6{transition-delay:.42s} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .cd-rev{opacity:1;transform:none;transition:none} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} } @media(max-width:782px){ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none} } /* La barre d'admin ne doit pas passer sous l'en-tête collant. */ .admin-bar .cd-entete{top:32px} @media(max-width:782px){.admin-bar .cd-entete{top:46px}} /* ─── produits liés et ventes croisées ─── WooCommerce leur applique ses largeurs flottantes via .woocommerce, dont la spécificité égale la nôtre : sans le préfixe body.cd-theme, les cartes se retrouvaient écrasées à quelques dizaines de pixels. */ body.cd-theme .related.products,body.cd-theme .upsells.products, body.cd-theme .cross-sells{margin-top:2.6rem} body.cd-theme .related.products h2,body.cd-theme .upsells.products h2{font-size:1.3rem;margin-bottom:1.1rem} body.cd-theme.woocommerce ul.products li.product, body.cd-theme ul.products li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important} body.cd-theme ul.products::before,body.cd-theme ul.products::after{content:none!important;display:none!important} /* La description courte répète parfois le titre, mot pour mot : le flux fournisseur la remplit avec le nom du produit. On la masque dans ce cas. */ body.cd-theme .woocommerce-product-details__short-description.cd-doublon{display:none} /* ─── titre et description d'archive ─── woocommerce_content() sort un

et la description du terme : ce sont eux qu'il faut habiller, pas .cd-tete-archive. */ body.cd-theme .page-title{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:.4rem 0 .4rem} body.cd-theme .term-description,body.cd-theme .woocommerce-product-details__short-description{ color:var(--d);font-size:.93rem} body.cd-theme .term-description p{margin-bottom:.7em} body.cd-theme .term-description strong{color:var(--t)} body.cd-theme .woocommerce-products-header{padding:.2rem 0 .6rem} /* ─── résumé des avis, sous le titre ─── */ body.cd-theme .cd-note{display:inline-flex;align-items:center;gap:.5rem;margin:.5rem 0 0; font-size:.82rem;color:var(--d);border-bottom:1px solid transparent;padding-bottom:2px; transition:border-color .22s} body.cd-theme .cd-note:hover{border-bottom-color:var(--peau);color:var(--t2)} body.cd-theme .cd-note b{font-family:var(--titre);font-size:1rem;font-weight:500;color:var(--t)} body.cd-theme .cd-etoiles{color:var(--a);letter-spacing:.09em;font-size:.9rem;line-height:1} /* ─── envies et partage ─── */ body.cd-theme .cd-actions-fiche{display:flex;flex-wrap:wrap;gap:1.4rem;margin:1rem 0 .2rem} body.cd-theme .cd-action{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0; padding:.4rem 0;cursor:pointer;font:inherit;font-size:.84rem;color:var(--t2); border-bottom:1px solid transparent;transition:color .22s,border-color .22s} body.cd-theme .cd-action:hover{color:var(--a);border-bottom-color:var(--a)} body.cd-theme .cd-action svg{width:17px;height:17px;flex:none;transition:transform .3s cubic-bezier(.2,1.7,.5,1)} body.cd-theme .cd-action[aria-pressed="true"]{color:var(--a)} body.cd-theme .cd-action[aria-pressed="true"] svg{fill:var(--a);stroke:var(--a);transform:scale(1.12)} /* ─── questions fréquentes ─── */ body.cd-theme .cd-faq{max-width:74ch} body.cd-theme .cd-faq-e{border-bottom:1px solid var(--b)} body.cd-theme .cd-faq-e summary{list-style:none;cursor:pointer;padding:.95rem 0;display:flex; justify-content:space-between;align-items:center;gap:1rem;font-size:.94rem;font-weight:500;color:var(--t)} body.cd-theme .cd-faq-e summary::-webkit-details-marker{display:none} body.cd-theme .cd-faq-e summary:hover{color:var(--a)} body.cd-theme .cd-faq-e summary i{position:relative;width:18px;height:18px;flex:none} body.cd-theme .cd-faq-e summary i::before,body.cd-theme .cd-faq-e summary i::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--a); transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s} body.cd-theme .cd-faq-e summary i::before{width:12px;height:1.5px} body.cd-theme .cd-faq-e summary i::after{width:1.5px;height:12px} body.cd-theme .cd-faq-e[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} body.cd-theme .cd-faq-r{padding:0 0 1.1rem} body.cd-theme .cd-faq-r p{margin:0;font-size:.88rem;color:var(--d);line-height:1.6;max-width:70ch} /* ─── panneau des envies ─── */ body.cd-theme .cd-envies-fond{position:fixed;inset:0;z-index:100;background:rgba(36,22,25,.5); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s} body.cd-theme .cd-envies-fond.vu{opacity:1} body.cd-theme .cd-envies{position:fixed;top:0;right:0;bottom:0;z-index:101;width:min(400px,92vw); background:var(--s);display:flex;flex-direction:column;box-shadow:-20px 0 60px -30px rgba(40,20,25,.6); transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.8,.2,1)} body.cd-theme .cd-envies.vu{transform:none} body.cd-theme .cd-envies-tete{display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:1.2rem 1.3rem;border-bottom:1px solid var(--b);flex:none} body.cd-theme .cd-envies-tete h2{margin:0;font-size:1.2rem} body.cd-theme .cd-envies-fermer{background:var(--f2);border:0;width:34px;height:34px;border-radius:50%; cursor:pointer;display:grid;place-items:center;color:var(--t2);transition:background .2s,transform .2s} body.cd-theme .cd-envies-fermer:hover{background:var(--peau);transform:rotate(90deg)} body.cd-theme .cd-envies-liste{overflow-y:auto;padding:1rem 1.3rem;flex:1} body.cd-theme .cd-envie-l{display:grid;grid-template-columns:56px 1fr auto;gap:.8rem;align-items:center; padding:.7rem 0;border-bottom:1px solid var(--b)} body.cd-theme .cd-envie-l img{width:56px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-p);background:var(--f2)} body.cd-theme .cd-envie-l b{display:block;font-size:.83rem;font-weight:500;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.cd-theme .cd-envie-l span{font-family:var(--mono);font-size:.78rem;color:var(--d)} body.cd-theme .cd-envie-l button{background:none;border:0;color:var(--d);cursor:pointer;font-size:1.1rem;padding:.2rem .4rem} body.cd-theme .cd-envie-l button:hover{color:var(--a)} body.cd-theme .cd-envies-vide{color:var(--d);font-size:.88rem;text-align:center;padding:2.4rem 1rem} body.cd-theme .cd-envies-note{font-size:.74rem;color:var(--d);padding:1rem 1.3rem;border-top:1px solid var(--b);flex:none} /* ═══ FICHE PRODUIT — alignement sur la maquette ═══ ⚠ Écrire « body.cd-theme.woocommerce », SANS espace : la classe woocommerce est posée sur le lui-même, et un élément n'est pas son propre descendant. Avec une espace, la règle ne s'applique jamais — en silence. */ /* Galerie : vignettes en colonne, à gauche de l'image principale. Flexslider les pose sous l'image ; on réordonne en grille plutôt que de surcharger son gabarit, qu'une mise à jour écraserait. */ @media(min-width:700px){ body.cd-theme.woocommerce div.product div.images.woocommerce-product-gallery{ display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:start} body.cd-theme.woocommerce div.product div.images .flex-control-thumbs{ grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;max-height:none} /* Flexslider insère un .flex-viewport entre la galerie et le wrapper : viser le seul wrapper laissait la grille sans deuxième colonne. */ body.cd-theme.woocommerce div.product div.images .flex-viewport, body.cd-theme.woocommerce div.product div.images>.woocommerce-product-gallery__wrapper{ grid-column:2;grid-row:1;margin:0;width:100%} body.cd-theme.woocommerce div.product div.images .flex-control-thumbs li{width:84px!important} body.cd-theme.woocommerce div.product div.images .flex-viewport{border-radius:var(--r);overflow:hidden} } body.cd-theme.woocommerce div.product div.images .flex-control-thumbs img{ aspect-ratio:1/1;object-fit:cover;border:1px solid var(--b);border-radius:10px;opacity:.72} body.cd-theme.woocommerce div.product div.images .flex-control-thumbs img.flex-active, body.cd-theme.woocommerce div.product div.images .flex-control-thumbs img:hover{opacity:1;border-color:var(--a)} body.cd-theme.woocommerce div.product div.images img{border-radius:var(--r)} /* ─── la galerie suit la lecture ─── La colonne de droite est deux fois plus haute que la galerie : sans cela, on finit de lire la fiche devant un espace vide. La galerie reste donc à l'écran jusqu'au bas du bloc produit. `align-self:start` est indispensable même sur un flottant : sans hauteur propre, un élément aussi grand que son conteneur ne colle jamais. `--h-entete` est publiée par le script depuis la hauteur mesurée de l'en-tête ; un repli en dur couvre le cas sans JavaScript. */ @media (min-width:900px){ /* * Galerie et colonne d'achat dans leur propre conteneur en grille. * * Le collant se limite à son bloc conteneur : sans .cd-fiche-haut, ce bloc * était TOUT le produit — onglets et produits liés compris — et la galerie * venait se poser par-dessus la description. Une rangée de grille aurait dû * suffire à la contenir ; le navigateur ne l'y contraint pas de façon fiable. */ body.cd-theme.woocommerce div.product .cd-fiche-haut{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(24px,3.2vw,52px);align-items:start;margin-bottom:2.4rem} body.cd-theme.woocommerce div.product .cd-fiche-haut>div.images{ grid-column:1;float:none;width:auto;margin:0; position:sticky;top:calc(var(--h-entete,132px) + 14px)} body.cd-theme.woocommerce div.product .cd-fiche-haut>.summary{ grid-column:2;float:none;width:auto;margin:0} } @media (prefers-reduced-motion:reduce){ /* Un élément qui se fige pendant le défilement peut gêner : on s'abstient. */ body.cd-theme.woocommerce div.product div.images.woocommerce-product-gallery{position:static} } body.cd-theme.woocommerce div.product .woocommerce-product-gallery__trigger{ top:1rem;right:1rem;background:rgba(255,255,255,.9);border-radius:50%;width:34px;height:34px; display:grid;place-items:center;box-shadow:none} /* Titre, références */ body.cd-theme.woocommerce div.product .product_title{font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.08;margin:.25rem 0 .5rem;text-transform:none} body.cd-theme .cd-refs{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-family:var(--mono); font-size:.7rem;color:var(--d);letter-spacing:.04em} body.cd-theme .cd-refs b{font-weight:400;color:var(--t2)} /* Prix : la remise en pastille, comme sur la maquette */ body.cd-theme.woocommerce div.product p.price{margin:1.1rem 0 .2rem;align-items:baseline} body.cd-theme .cd-remise{background:var(--a);color:#fff;font-family:var(--mono);font-size:.66rem; letter-spacing:.06em;padding:.2rem .55rem;border-radius:var(--r-pill);align-self:center} /* Variantes en pastilles, dès que les attributs seront alimentés */ body.cd-theme.woocommerce div.product form.cart .variations{border-collapse:separate;border-spacing:0 .5rem} body.cd-theme.woocommerce div.product form.cart .variations th.label{padding-right:.9rem;vertical-align:middle} body.cd-theme.woocommerce div.product form.cart .variations select{width:auto;min-width:180px; border-radius:var(--r-pill);padding:.5rem 1rem} body.cd-theme.woocommerce div.product form.cart .reset_variations{font-size:.78rem;color:var(--d)} /* Achat : quantité, bouton, cœur sur une seule ligne */ body.cd-theme.woocommerce div.product form.cart{align-items:center} body.cd-theme .cd-qte-moins,body.cd-theme .cd-qte-plus{background:none;border:0;cursor:pointer; color:var(--d);font-size:1.05rem;line-height:1;padding:.62rem .8rem;transition:color .2s} body.cd-theme .cd-qte-moins:hover,body.cd-theme .cd-qte-plus:hover{color:var(--a)} body.cd-theme.woocommerce div.product form.cart div.quantity input.qty{ -moz-appearance:textfield;appearance:textfield} body.cd-theme div.quantity input::-webkit-outer-spin-button, body.cd-theme div.quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} body.cd-theme .cd-coeur-achat{width:46px;height:46px;border-radius:50%;border:1px solid var(--b); background:var(--s);display:grid;place-items:center;cursor:pointer;color:var(--t2);flex:none; transition:border-color .22s,color .22s,transform .22s} body.cd-theme .cd-coeur-achat:hover{border-color:var(--a);color:var(--a);transform:translateY(-2px)} body.cd-theme .cd-coeur-achat[aria-pressed="true"]{color:var(--a);border-color:var(--a)} body.cd-theme .cd-coeur-achat[aria-pressed="true"] svg{fill:var(--a)} /* Onglets : plus d'air, et le contenu cadré */ body.cd-theme.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-size:clamp(1rem,2vw,1.22rem)} body.cd-theme.woocommerce div.product .woocommerce-tabs .panel h2{display:none} body.cd-theme.woocommerce div.product .woocommerce-tabs .panel>*{max-width:78ch} body.cd-theme .cd-enveloppe{overflow-x:auto;border:1px solid var(--b);border-radius:var(--r); background:var(--s);max-width:720px;margin-bottom:1.2rem} body.cd-theme .cd-tabl{width:100%;border-collapse:collapse;font-size:.86rem} body.cd-theme .cd-tabl th,body.cd-theme .cd-tabl td{text-align:left;padding:.55rem .85rem; border-bottom:1px solid var(--b)} body.cd-theme .cd-tabl thead th{background:var(--f2);font-family:var(--mono);font-size:.62rem; letter-spacing:.13em;text-transform:uppercase;color:var(--d);font-weight:400} body.cd-theme .cd-tabl tbody th{font-weight:500} body.cd-theme .cd-tabl tbody tr:last-child th,body.cd-theme .cd-tabl tbody tr:last-child td{border-bottom:0} body.cd-theme .cd-tabl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} /* « De la même marque » */ body.cd-theme .related.products>h2,body.cd-theme .up-sells>h2{font-size:1.35rem;margin-bottom:1.1rem} /* ═══ ARCHIVE — rail de filtres ═══ */ body.cd-theme .cd-fil{display:grid;grid-template-columns:1fr;gap:1.8rem;margin-top:.6rem} @media(min-width:900px){body.cd-theme .cd-fil{grid-template-columns:232px 1fr;gap:2.2rem}} body.cd-theme .cd-rail{align-self:start} @media(min-width:900px){body.cd-theme .cd-rail{position:sticky;top:150px;max-height:calc(100vh - 170px);overflow-y:auto; scrollbar-width:thin;padding-right:.3rem}} body.cd-theme .cd-rail-b{border-bottom:1px solid var(--b);padding:.95rem 0} body.cd-theme .cd-rail-b:first-child{padding-top:0} body.cd-theme .cd-rail-b h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em; text-transform:uppercase;color:var(--d);font-weight:400;margin:0 0 .6rem} body.cd-theme .cd-coche{display:flex;align-items:center;gap:.55rem;font-size:.83rem;padding:.22rem 0; color:var(--t2);line-height:1.35} body.cd-theme .cd-coche:hover{color:var(--a)} body.cd-theme .cd-coche i{width:15px;height:15px;border:1px solid var(--b);border-radius:4px;background:var(--s); flex:none;position:relative;transition:background .2s,border-color .2s} body.cd-theme .cd-coche:hover i{border-color:var(--a)} body.cd-theme .cd-coche.pris{color:var(--t)} body.cd-theme .cd-coche.pris i{background:var(--a);border-color:var(--a)} body.cd-theme .cd-coche.pris i::after{content:"";position:absolute;left:5px;top:1.5px;width:3px;height:7px; border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)} body.cd-theme .cd-coche .n{margin-left:auto;font-family:var(--mono);font-size:.66rem;color:var(--d)} body.cd-theme .cd-coche.cd-cache{display:none} body.cd-theme .cd-rail-b.ouvert .cd-coche.cd-cache{display:flex} body.cd-theme .cd-plus{background:none;border:0;color:var(--a);font-family:inherit;font-size:.78rem; cursor:pointer;padding:.4rem 0 0;border-bottom:1px solid transparent} body.cd-theme .cd-plus:hover{border-bottom-color:var(--a)} /* Double curseur de prix : deux input range superposés, sans dépendance. */ body.cd-theme .cd-gliss{position:relative;height:26px;margin:.5rem .3rem .2rem} body.cd-theme .cd-gliss-piste,body.cd-theme .cd-gliss-actif{position:absolute;top:50%;height:3px; transform:translateY(-50%);border-radius:2px;pointer-events:none} body.cd-theme .cd-gliss-piste{left:0;right:0;background:var(--b)} body.cd-theme .cd-gliss-actif{background:var(--a)} body.cd-theme .cd-gliss input[type=range]{position:absolute;left:0;top:0;width:100%;height:26px;margin:0; background:none;appearance:none;-webkit-appearance:none;pointer-events:none} body.cd-theme .cd-gliss input[type=range]:focus{outline:0} body.cd-theme .cd-gliss input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto; width:15px;height:15px;border-radius:50%;background:var(--s);border:2px solid var(--a);cursor:grab; box-shadow:0 2px 6px rgba(60,30,35,.25)} body.cd-theme .cd-gliss input[type=range]::-moz-range-thumb{pointer-events:auto;width:15px;height:15px; border-radius:50%;background:var(--s);border:2px solid var(--a);cursor:grab} body.cd-theme .cd-bornes{display:flex;justify-content:space-between;font-family:var(--mono); font-size:.68rem;color:var(--d)} body.cd-theme .cd-prix-ok{margin-top:.6rem;background:var(--f2);border:1px solid var(--b);border-radius:var(--r-pill); padding:.36rem .9rem;font-family:inherit;font-size:.78rem;cursor:pointer;color:var(--t2);transition:all .2s} body.cd-theme .cd-prix-ok:hover{border-color:var(--a);color:var(--a)} /* Jetons de filtres actifs */ body.cd-theme .cd-jetons{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem} body.cd-theme .cd-jeton{background:var(--s);border:1px solid var(--a);color:var(--a);border-radius:var(--r-pill); padding:.2rem .7rem;font-size:.75rem;font-family:var(--mono);transition:background .2s} body.cd-theme .cd-jeton:hover{background:var(--a);color:#fff} body.cd-theme .cd-jeton b{font-weight:400;opacity:.6;margin-left:.3rem} body.cd-theme .cd-jeton.effacer{border-color:var(--b);color:var(--d)} body.cd-theme .cd-jeton.effacer:hover{background:var(--f2);color:var(--t)} body.cd-theme .cd-vide{color:var(--d);padding:2.4rem 0;font-size:.95rem} /* Bascule mobile */ body.cd-theme .cd-rail-bascule{display:none;align-items:center;gap:.55rem;width:100%;background:var(--s); border:1px solid var(--b);border-radius:var(--r-pill);padding:.6rem 1.1rem;font-family:inherit; font-size:.87rem;color:var(--t);cursor:pointer;margin-bottom:.8rem} body.cd-theme .cd-rail-bascule b{margin-left:auto;background:var(--a);color:#fff;border-radius:var(--r-pill); min-width:20px;height:20px;display:grid;place-items:center;font-family:var(--mono);font-size:.66rem;font-weight:400} @media(max-width:899px){ body.cd-theme .cd-rail-bascule{display:flex} body.cd-theme .cd-rail-corps{display:none} body.cd-theme .cd-rail.ouvert .cd-rail-corps{display:block;border:1px solid var(--b); border-radius:var(--r);padding:1rem 1.1rem;background:var(--s);margin-bottom:1.2rem} } /* ═══ PANIER, COMMANDE, COMPTE — remplir la largeur ═══ WooCommerce empile ses blocs en flottants à 48 % : le contenu s'arrêtait aux deux tiers de la page et laissait un grand vide à droite. On repasse en grille, avec le récapitulatif collant à droite. */ /* — panier — La grille vit maintenant dans .cd-pan, posée par le gabarit woocommerce/cart/cart.php. Une grille de plus sur .woocommerce placerait tout le panier dans la première colonne et laisserait la seconde vide. */ body.cd-theme.woocommerce-cart .cart-collaterals .cart_totals{width:auto;float:none} body.cd-theme.woocommerce-cart .cart-collaterals .cross-sells{width:auto;float:none} body.cd-theme .cart_totals>h2{font-size:1.15rem} body.cd-theme .cart_totals table.shop_table{background:var(--s)} body.cd-theme .wc-proceed-to-checkout{padding:1rem 0 0} body.cd-theme .wc-proceed-to-checkout .button{width:100%} /* — commande — */ @media(min-width:920px){ body.cd-theme.woocommerce-checkout form.checkout{ display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:2.6rem;align-items:start} body.cd-theme.woocommerce-checkout form.checkout #customer_details{grid-column:1} body.cd-theme.woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 .8rem} body.cd-theme.woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2; position:sticky;top:150px} } body.cd-theme.woocommerce-checkout .col2-set .col-1, body.cd-theme.woocommerce-checkout .col2-set .col-2{width:100%;float:none;margin-bottom:1.4rem} body.cd-theme #order_review{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:1.3rem} body.cd-theme #order_review table.shop_table{border:0;background:none} /* — compte — */ /* ⚠ La colonne de 246 px est celle du MENU du compte : elle n'a de sens qu'une fois connecté. Sans `.logged-in`, la page de connexion héritait de la grille, le bloc « Se connecter / S'enregistrer » se retrouvait coincé dans cette gouttière de 246 px et les champs tombaient à 136 px de large — d'où l'impression de page cassée. */ @media(min-width:880px){ body.cd-theme.woocommerce-account.logged-in .woocommerce{ display:grid;grid-template-columns:246px minmax(0,1fr);gap:2.6rem;align-items:start} body.cd-theme.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{ width:auto;float:none;position:sticky;top:150px} body.cd-theme.woocommerce-account.logged-in .woocommerce-MyAccount-content{width:auto;float:none} } /* La page de connexion, elle, se lit mieux en deux cartes centrées. */ body.cd-theme.woocommerce-account:not(.logged-in) .woocommerce .col2-set{ display:grid;gap:clamp(1.1rem,2.4vw,2rem);max-width:940px;margin-inline:auto} @media(min-width:760px){ body.cd-theme.woocommerce-account:not(.logged-in) .woocommerce .col2-set{grid-template-columns:1fr 1fr} } /* 🚨 WooCommerce pose un « clearfix » sur .col2-set : .col2-set::before,.col2-set::after{content:" ";display:table} Inoffensif en flottants, ravageur en grille : les deux pseudo-éléments DEVIENNENT des cases. « Se connecter » se retrouvait donc en colonne 2, « S'enregistrer » en colonne 1 de la ligne suivante. */ body.cd-theme .col2-set::before, body.cd-theme .col2-set::after, /* Même piège un cran plus haut : `.woocommerce` porte le même clearfix, et sur la page du compte connecté il poussait le MENU dans la colonne large et le contenu dans la gouttière de 246 px. */ body.cd-theme.woocommerce-account .woocommerce::before, body.cd-theme.woocommerce-account .woocommerce::after{content:none;display:none} /* Et Woo encadre déjà form.login / form.register : sans cela, une bordure dans la bordure. */ body.cd-theme.woocommerce-account:not(.logged-in) form.login, body.cd-theme.woocommerce-account:not(.logged-in) form.register{ border:0;padding:0;margin:0;background:none;border-radius:0} body.cd-theme.woocommerce-account:not(.logged-in) .col2-set>div{ background:var(--s);border:1px solid var(--b);border-radius:var(--r); padding:clamp(1.3rem,2.6vw,2.1rem)} body.cd-theme.woocommerce-account:not(.logged-in) .col2-set h2{ font-size:clamp(1.35rem,2.2vw,1.7rem);margin:0 0 1.3rem} body.cd-theme.woocommerce-account:not(.logged-in) .col2-set form .button{width:100%;margin-top:.5rem} body.cd-theme .woocommerce-form-login__rememberme{display:flex;align-items:center;gap:.5rem;margin:0 0 .3rem} body.cd-theme .woocommerce-form-login__rememberme input{width:auto;margin:0} body.cd-theme .woocommerce-form-login__rememberme span{font-size:.85rem;color:var(--t2)} body.cd-theme .woocommerce-LostPassword{margin:1rem 0 0;font-size:.86rem} body.cd-theme .woocommerce-LostPassword a{color:var(--a);border-bottom:1px solid transparent} body.cd-theme .woocommerce-LostPassword a:hover{border-bottom-color:var(--a)} body.cd-theme .woocommerce-privacy-policy-text p, body.cd-theme .col2-set form>p:not(.form-row){font-size:.82rem;color:var(--d);line-height:1.55} /* L'œil du mot de passe se pose DANS le champ, pas à côté. */ body.cd-theme .password-input{position:relative;display:block} body.cd-theme .password-input input{padding-right:2.6rem} body.cd-theme .password-input .show-password-input{position:absolute;right:.55rem;top:50%; transform:translateY(-50%);background:none;border:0;padding:.25rem;cursor:pointer;color:var(--d)} body.cd-theme .col2-set .col-1,body.cd-theme .col2-set .col-2{width:auto;float:none} /* — le texte long garde une largeur de lecture, quelle que soit la page — */ body.cd-theme .cd-contenu>p, body.cd-theme .cd-contenu>ul, body.cd-theme .cd-contenu>ol, body.cd-theme .cd-contenu>h2, body.cd-theme .cd-contenu>h3, body.cd-theme .cd-contenu>h4, body.cd-theme .cd-contenu>blockquote, body.cd-theme .woocommerce-Tabs-panel--description p{max-width:76ch} /* ═══ CONTENU ELEMENTOR ═══ Elementor impose sa propre largeur de contenu (1 140 px par défaut) et son propre centrage. Sur une page du thème, cela donne DEUX alignements : le titre, rendu par le thème, se cale sur le conteneur ; le contenu, rendu par Elementor, se retrouve en retrait de 50 px. On rend la main au conteneur du thème — c'est lui qui décide des gouttières, une seule fois pour tous. */ body.cd-theme .elementor .e-con-boxed > .e-con-inner, body.cd-theme .elementor .elementor-container, body.cd-theme .elementor .elementor-section-boxed > .elementor-container{max-width:none;width:100%} body.cd-theme .elementor .e-con-boxed, body.cd-theme .elementor .e-con{padding-left:0;padding-right:0;--content-width:100%} body.cd-theme .elementor .elementor-section.elementor-section-boxed{padding-left:0;padding-right:0} /* Elementor ajoute des marges négatives sur ses colonnes : sans cela, le contenu déborderait légèrement du conteneur. */ body.cd-theme .elementor .elementor-row, body.cd-theme .elementor .elementor-column-wrap{margin-left:0;margin-right:0} /* ─── description de catégorie ─── Pleine largeur du conteneur, et un vrai rythme de paragraphes : le texte arrivait en un seul bloc de 1 100 caractères. */ body.cd-theme .term-description{max-width:none;margin-bottom:.4rem} body.cd-theme .term-description p{max-width:none;margin-bottom:.7em;line-height:1.6} body.cd-theme .term-description p:last-child{margin-bottom:0} body.cd-theme .term-description strong{color:var(--t)} /* ══════════════════════════════════════════════════════════════ AJOUT AU PANIER — bouton, vol de la vignette, modale ══════════════════════════════════════════════════════════════ */ /* ─── le bouton pendant l'appel ─── */ /* États posés par le script : ils valent pour la carte de liste comme pour le grand bouton de la fiche produit. */ body.cd-theme .cd-ajout, body.cd-theme .cd-charge, body.cd-theme .cd-fait{position:relative} body.cd-theme .cd-charge{color:transparent!important;pointer-events:none;opacity:1!important} body.cd-theme .cd-charge::after{content:"";position:absolute;inset:0;margin:auto; width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff; border-radius:50%;animation:cd-tourne .62s linear infinite} body.cd-theme .cd-fait{background:var(--ok)!important;border-color:var(--ok)!important;color:#fff!important} /* Pendant l'appel, l'icône s'efface au profit du halo ou de la coche. */ body.cd-theme .cd-charge svg,body.cd-theme .cd-fait svg, body.cd-theme .cd-charge .cd-ajout-t,body.cd-theme .cd-fait .cd-ajout-t{opacity:0} body.cd-theme .cd-fait::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:9px; border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-2px); animation:cd-pop .32s cubic-bezier(.34,1.56,.64,1)} /* Le libellé s'efface le temps que la coche s'affiche. */ body.cd-theme .cd-fait{color:transparent!important} @keyframes cd-tourne{to{transform:rotate(360deg)}} @keyframes cd-pop{from{transform:rotate(-45deg) translate(1px,-2px) scale(.2);opacity:0}} /* Le bouton reste visible tant qu'il travaille, même si le doigt a quitté la carte. */ body.cd-theme ul.products li.product .cd-charge, body.cd-theme ul.products li.product .cd-fait{transform:translateY(0);opacity:1} /* ─── badge du panier ─── */ .cd-bat{animation:cd-bat .5s cubic-bezier(.34,1.56,.64,1)} @keyframes cd-bat{ 0%{transform:scale(1)} 38%{transform:scale(1.45)} 70%{transform:scale(.92)} 100%{transform:scale(1)} } /* ─── vignette en vol ─── */ .cd-vol{box-shadow:var(--ombre-h)} /* ─── modale ─── */ html.cd-fige{overflow:hidden} .cd-mp{position:fixed;inset:0;z-index:100100;display:flex;align-items:center;justify-content:center; padding:clamp(12px,4vw,40px)} .cd-mp-fond{position:absolute;inset:0;background:rgba(36,22,25,.46); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px); opacity:0;transition:opacity .3s ease} .cd-mp.est-ouvert .cd-mp-fond{opacity:1} .cd-mp-vol{position:relative;width:min(560px,100%);max-height:min(88vh,860px);overflow:auto; background:var(--s);border:1px solid var(--b);border-radius:var(--r); box-shadow:var(--ombre-h);padding:clamp(20px,3.6vw,32px); opacity:0;transform:translateY(18px) scale(.965); transition:opacity .34s ease,transform .44s cubic-bezier(.16,1,.3,1)} .cd-mp.est-ouvert .cd-mp-vol{opacity:1;transform:none} .cd-mp-x{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center; background:var(--f2);border:0;border-radius:var(--r-pill);color:var(--t2);cursor:pointer; transition:background .18s ease,color .18s ease} .cd-mp-x:hover{background:var(--peau-p);color:var(--a)} /* ─── la coche qui se dessine ─── */ .cd-mp-tete{display:flex;align-items:center;gap:.8rem;margin-bottom:1.35rem} .cd-mp-tete h2{margin:0;font-size:clamp(1.15rem,2.4vw,1.5rem)} .cd-mp-coche{flex:0 0 auto;width:38px;height:38px;display:block} .cd-mp-coche svg{width:100%;height:100%;display:block} .cd-mp-coche-c{stroke:var(--ok);stroke-width:2.4;stroke-dasharray:145;stroke-dashoffset:145; animation:cd-trace .52s cubic-bezier(.65,0,.45,1) .1s forwards} .cd-mp-coche-t{stroke:var(--ok);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:36;stroke-dashoffset:36; animation:cd-trace .3s cubic-bezier(.65,0,.45,1) .5s forwards} @keyframes cd-trace{to{stroke-dashoffset:0}} .cd-mp-bang{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%; background:var(--alerte-f);color:var(--alerte);font-family:var(--titre);font-size:1.25rem} .cd-mp-msg{color:var(--t2);margin-bottom:1.4rem} /* ─── l'article ajouté ─── */ .cd-mp-ligne{display:grid;grid-template-columns:88px 1fr;gap:1rem;align-items:center; padding:.9rem;background:var(--f);border:1px solid var(--b);border-radius:var(--r-p)} .cd-mp-vis{overflow:hidden;border-radius:6px;background:var(--f2)} .cd-mp-vis img{width:100%;aspect-ratio:1/1;object-fit:cover} .cd-mp-txt{min-width:0} .cd-mp-marque{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:var(--a);display:block;margin-bottom:.18rem} .cd-mp-nom{margin:0 0 .3rem;font-family:var(--titre);font-size:1.02rem;line-height:1.28;color:var(--t)} .cd-mp-meta{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:.8rem} .cd-mp-qte{font-size:.82rem;color:var(--d)} .cd-mp-prix{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--t);font-weight:500} .cd-mp-prix del{opacity:.5;font-weight:400;margin-right:.35em} /* ─── franco de port ─── */ .cd-mp-franco{margin-top:1.1rem} .cd-mp-franco p{margin:0 0 .45rem;font-size:.85rem;color:var(--t2)} .cd-mp-franco.est-atteint p{color:var(--ok);font-weight:500} .cd-mp-jauge{height:6px;border-radius:var(--r-pill);background:var(--f2);overflow:hidden} .cd-mp-jauge i{display:block;height:100%;width:0;border-radius:inherit; background:linear-gradient(90deg,var(--a-clair),var(--a)); animation:cd-jauge .8s cubic-bezier(.16,1,.3,1) .28s both} .cd-mp-franco.est-atteint .cd-mp-jauge i{background:linear-gradient(90deg,#5AA98A,var(--ok))} @keyframes cd-jauge{from{width:0}} /* ─── totaux ─── */ .cd-mp-tot{margin:1.2rem 0 1.4rem;padding-top:1rem;border-top:1px solid var(--b); display:flex;flex-direction:column;gap:.4rem} .cd-mp-tot div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .cd-mp-tot dt{color:var(--d);font-size:.86rem;margin:0} .cd-mp-tot dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--t)} .cd-mp-tot .cd-mp-st{font-size:1.1rem;font-weight:500} /* ─── actions ─── */ .cd-mp-actes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} .cd-mp-actes .cd-btn{justify-content:center;text-align:center;width:100%;cursor:pointer} .cd-mp-actes .cd-btn-plein{grid-column:1/-1;background:var(--a);border-color:var(--a);color:#fff} .cd-mp-actes .cd-btn-plein:hover{background:var(--a-fonce);border-color:var(--a-fonce);color:#fff} .cd-mp-actes .cd-btn-ligne{background:transparent;border-color:var(--a);color:var(--a)} .cd-mp-actes .cd-btn-ligne:hover{background:var(--peau-p);border-color:var(--a-fonce);color:var(--a-fonce)} .cd-mp-actes .cd-btn-fant{background:transparent;border-color:var(--b);color:var(--t2)} .cd-mp-actes .cd-btn-fant:hover{background:var(--f2);border-color:var(--d);color:var(--t)} /* ─── suggestions ─── */ .cd-mp-sug{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--b)} .cd-mp-sug h3{font-size:.72rem;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--d);margin:0 0 .8rem} .cd-mp-sug ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem} .cd-mp-sug a{display:block;color:var(--t)} .cd-mp-sug-vis{display:block;overflow:hidden;border-radius:6px;background:var(--f2);margin-bottom:.4rem} .cd-mp-sug-vis img{width:100%;aspect-ratio:1/1;object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1)} .cd-mp-sug a:hover .cd-mp-sug-vis img{transform:scale(1.06)} .cd-mp-sug-nom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:.76rem;line-height:1.32;margin-bottom:.15rem} .cd-mp-sug-prix{display:block;font-family:var(--mono);font-size:.76rem;color:var(--a)} .cd-mp-sug-prix del{display:none} /* ─── en bas de l'écran sur mobile ─── */ @media (max-width:640px){ .cd-mp{align-items:flex-end;padding:0} .cd-mp-vol{width:100%;max-height:92vh;border-radius:var(--r) var(--r) 0 0;border-bottom:0; transform:translateY(100%)} .cd-mp.est-ouvert .cd-mp-vol{transform:none} /* Empilés, l'action principale vient en premier sous le pouce. */ .cd-mp-actes{grid-template-columns:1fr} .cd-mp-actes .cd-btn-plein{order:1} .cd-mp-actes .cd-btn-ligne{order:2} .cd-mp-actes .cd-btn-fant{order:3} } @media (prefers-reduced-motion:reduce){ .cd-mp-fond,.cd-mp-vol{transition:none} .cd-mp-coche-c,.cd-mp-coche-t{animation:none;stroke-dashoffset:0} .cd-mp-jauge i{animation:none} .cd-bat{animation:none} .cd-charge::after{animation-duration:1.4s} .cd-fait::after{animation:none} } /* Le panneau reçoit le focus à l'ouverture : il ne doit pas s'encadrer. */ .cd-mp-vol:focus{outline:none} /* ══════════════════════════════════════════════════════════════ PAGE PANIER ══════════════════════════════════════════════════════════════ */ body.cd-theme.woocommerce-cart .cd-pan{display:grid;gap:clamp(18px,2.4vw,30px);align-items:start; grid-template-columns:1fr;margin-bottom:2.6rem} @media (min-width:960px){ body.cd-theme.woocommerce-cart .cd-pan{grid-template-columns:minmax(0,1fr) 350px} body.cd-theme.woocommerce-cart .cd-pan-cote{position:sticky;top:1.2rem} } .cd-pan-corps{min-width:0;display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)} .cd-pan-cote{display:flex;flex-direction:column;gap:.9rem} .cd-pan.est-occupe{opacity:.62;pointer-events:none;transition:opacity .18s ease} /* ─── jauge de franco ─── */ body.cd-theme .cd-franco{background:var(--s);border:1px solid var(--b);border-radius:var(--r); padding:1rem 1.15rem;margin:0} body.cd-theme .cd-franco p{margin:0 0 .55rem;font-size:.9rem;color:var(--t2)} body.cd-theme .cd-franco.est-acquis p{color:var(--ok);font-weight:500} body.cd-theme .cd-franco .piste{height:7px;border-radius:var(--r-pill);background:var(--f2);overflow:hidden} body.cd-theme .cd-franco .piste i{display:block;height:100%;border-radius:inherit; background:linear-gradient(90deg,var(--a-clair),var(--a));transition:width .5s cubic-bezier(.16,1,.3,1)} body.cd-theme .cd-franco.est-acquis .piste i{background:linear-gradient(90deg,#5AA98A,var(--ok))} /* ─── avis ─── */ .cd-pan-avis{background:var(--alerte-f);border:1px solid rgba(176,85,42,.28);border-radius:var(--r-p); padding:.75rem 1rem;color:var(--alerte);font-size:.87rem} .cd-pan-avis p{margin:0} .cd-pan-avis p+p{margin-top:.35rem} /* ─── liste des articles ─── */ body.cd-theme .cd-pan-liste{list-style:none;margin:0;padding:0;background:var(--s); border:1px solid var(--b);border-radius:var(--r);overflow:hidden} .cd-pan-art{display:grid;gap:.9rem 1.1rem;padding:1.1rem;align-items:center; grid-template-columns:84px minmax(0,1fr) auto auto; transition:opacity .24s ease,transform .24s ease} .cd-pan-art+.cd-pan-art{border-top:1px solid var(--b)} .cd-pan-art.est-partant{opacity:0;transform:translateX(-14px)} .cd-pan-vis{grid-row:span 1} body.cd-theme .cd-pan-vis img{width:84px;height:84px;object-fit:cover;border-radius:var(--r-p);background:var(--f2)} .cd-pan-info{min-width:0} .cd-pan-marque{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em; text-transform:uppercase;color:var(--a);margin-bottom:.2rem} body.cd-theme a.cd-pan-nom,body.cd-theme span.cd-pan-nom{display:block;font-family:var(--titre); font-size:1.02rem;line-height:1.3;color:var(--t);margin-bottom:.22rem} body.cd-theme a.cd-pan-nom:hover{color:var(--a)} .cd-pan-unite{margin:0 0 .5rem;font-size:.8rem;color:var(--d); font-family:var(--mono);font-variant-numeric:tabular-nums} .cd-pan-unite span{font-family:var(--corps)} .cd-pan-unite del{opacity:.55;margin-right:.3em} .cd-pan-outils{display:flex;align-items:center;gap:.35rem} body.cd-theme .cd-pan-outils .cd-coeur-achat, .cd-pan-retire{position:static;width:32px;height:32px;display:grid;place-items:center; background:var(--f);border:1px solid var(--b);border-radius:var(--r-pill);color:var(--t2); cursor:pointer;opacity:1;transform:none;transition:background .18s ease,color .18s ease,border-color .18s ease} body.cd-theme .cd-pan-outils .cd-coeur-achat:hover{background:var(--peau-p);color:var(--a);border-color:var(--peau)} .cd-pan-retire:hover{background:var(--alerte-f);color:var(--alerte);border-color:rgba(176,85,42,.3)} .cd-pan-retire-lien{font-size:.8rem} .cd-pan-qte{display:inline-flex;align-items:center;border:1px solid var(--b); border-radius:var(--r-pill);background:var(--f);overflow:hidden} .cd-pan-pas{width:34px;height:34px;border:0;background:transparent;color:var(--t2); font-size:1.02rem;line-height:1;cursor:pointer;transition:background .16s ease,color .16s ease} .cd-pan-pas:hover{background:var(--peau-p);color:var(--a)} body.cd-theme .cd-pan-champ{width:44px;height:34px;border:0;background:transparent;text-align:center; font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--t);padding:0; -moz-appearance:textfield} body.cd-theme .cd-pan-champ::-webkit-outer-spin-button, body.cd-theme .cd-pan-champ::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .cd-pan-un{padding:0 .9rem;font-family:var(--mono)} .cd-pan-tot{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1rem; font-weight:500;color:var(--t);text-align:right;min-width:82px} .cd-pan-tot del{display:block;font-size:.78rem;font-weight:400;opacity:.5} @media (max-width:720px){ .cd-pan-art{grid-template-columns:72px minmax(0,1fr);row-gap:.7rem} body.cd-theme .cd-pan-vis img{width:72px;height:72px} .cd-pan-qte{grid-column:2;justify-self:start} .cd-pan-tot{grid-column:2;text-align:left;min-width:0} } /* ─── pied du formulaire ─── */ .cd-pan-pied{display:flex;align-items:center;justify-content:flex-end;gap:.8rem; padding:.9rem .2rem 0;flex-wrap:wrap} .cd-pan-vider{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0; color:var(--d);font-size:.83rem;cursor:pointer;padding:.3rem;transition:color .18s ease} .cd-pan-vider:hover{color:var(--alerte)} /* Le bouton natif ne sert qu'en l'absence de script : les pas sont instantanés. */ html.js .cd-pan-maj{display:none} .cd-pan-maj{background:var(--t);color:#fff;border:0;border-radius:var(--r-pill); padding:.6rem 1.2rem;font-size:.85rem;cursor:pointer} /* ─── récapitulatif ─── */ .cd-pan-carte{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:1.15rem} .cd-pan-st{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem} .cd-pan-st h2{margin:0;font-size:1.12rem} .cd-pan-st p{margin:.1rem 0 0;font-size:.76rem;color:var(--d)} .cd-pan-st-val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.22rem;color:var(--t)} body.cd-theme .cd-pan-tete .checkout-button, body.cd-theme .cd-pan-tete .wc-proceed-to-checkout .button{width:100%;justify-content:center; background:var(--a);border-color:var(--a);color:#fff;font-size:.98rem;padding:.85rem 1.2rem} body.cd-theme .cd-pan-tete .checkout-button:hover{background:var(--a-fonce);border-color:var(--a-fonce)} body.cd-theme .cd-pan-tete .wc-proceed-to-checkout{padding:0;margin:0} .cd-pan-moyens{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:.9rem 0 0;padding:0} .cd-pan-moyens li{font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase; color:var(--t2);background:var(--f);border:1px solid var(--b);border-radius:var(--r-p);padding:.3rem .55rem} .cd-pan-releve{display:flex;align-items:center;gap:.45rem;margin:.85rem 0 0; font-size:.78rem;color:var(--d);line-height:1.35} .cd-pan-releve svg{flex:0 0 auto;color:var(--a)} /* ─── code promo ─── */ .cd-pan-promo{padding:0} .cd-pan-promo-b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.8rem; background:none;border:0;padding:1rem 1.15rem;cursor:pointer;font-size:.92rem;color:var(--t); font-family:var(--corps);text-align:left} .cd-pan-promo-b i{flex:0 0 auto;width:16px;height:16px;position:relative} .cd-pan-promo-b i::before,.cd-pan-promo-b i::after{content:"";position:absolute;background:var(--a); border-radius:2px;transition:transform .24s ease} .cd-pan-promo-b i::before{left:0;right:0;top:7px;height:2px} .cd-pan-promo-b i::after{top:0;bottom:0;left:7px;width:2px} .cd-pan-promo-b[aria-expanded="true"] i::after{transform:rotate(90deg)} .cd-pan-promo-f{display:flex;gap:.5rem;padding:0 1.15rem 1.15rem} /* display:flex l'emporte sur l'attribut hidden : sans cela le formulaire s'affiche déplié dès le chargement. */ .cd-pan-promo-f[hidden]{display:none} body.cd-theme .cd-pan-promo-f .input-text{flex:1;min-width:0;padding:.6rem .8rem;font-size:.88rem; border:1px solid var(--b);border-radius:var(--r-p);background:var(--f);color:var(--t)} body.cd-theme .cd-pan-promo-f .cd-btn{padding:.6rem 1rem;font-size:.85rem} /* ─── détail ─── */ .cd-pan-detail h2{font-size:1.05rem;margin:0 0 .85rem} .cd-pan-lignes{margin:0;display:flex;flex-direction:column;gap:.5rem} .cd-pan-lignes div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .cd-pan-lignes dt{margin:0;color:var(--d);font-size:.86rem} .cd-pan-lignes dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:.88rem;color:var(--t)} .cd-pan-lignes .est-remise dd{color:var(--ok)} .cd-pan-lignes .est-offert{color:var(--ok);font-weight:500} .cd-pan-lignes .est-plus-tard{font-family:var(--corps);color:var(--d);font-size:.82rem} .cd-pan-total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--b)} .cd-pan-total span{font-size:.95rem;color:var(--t)} .cd-pan-total strong{font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:1.24rem;font-weight:500;color:var(--t)} .cd-pan-total .woocommerce-Price-amount{font-weight:500} .cd-pan-note{margin:.75rem 0 0;font-size:.76rem;color:var(--d);line-height:1.45} /* ─── confiance ─── */ .cd-pan-conf{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} body.cd-theme a.cd-pan-conf-i{display:flex;gap:.7rem;align-items:flex-start;background:var(--s); border:1px solid var(--b);border-radius:var(--r);padding:.95rem;color:var(--t2); transition:border-color .2s ease,transform .2s ease} body.cd-theme a.cd-pan-conf-i:hover{border-color:var(--peau);transform:translateY(-2px);color:var(--t2)} .cd-pan-conf-i svg{flex:0 0 auto;color:var(--a);margin-top:1px} .cd-pan-conf-i b{display:block;color:var(--t);font-weight:500;font-size:.88rem;margin-bottom:.15rem} .cd-pan-conf-i span{font-size:.78rem;line-height:1.45;display:block} /* ─── livraison ─── */ .cd-pan-liv{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:1.2rem} .cd-pan-liv h2{font-size:1.08rem;margin:0 0 .5rem} .cd-pan-liv-intro{margin:0 0 1rem;font-size:.86rem;color:var(--t2);max-width:70ch} .cd-pan-liv-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem} .cd-pan-liv-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .7rem; padding-bottom:.6rem;border-bottom:1px dashed var(--b);font-size:.84rem} .cd-pan-liv-l li:last-child{border-bottom:0;padding-bottom:0} .cd-pan-liv-l b{font-weight:500;color:var(--t);min-width:150px} .cd-pan-liv-l span{color:var(--t2)} .cd-pan-liv-l i{font-family:var(--mono);font-style:normal;font-variant-numeric:tabular-nums;color:var(--t)} .cd-pan-liv-l em{font-style:normal;font-size:.78rem;color:var(--ok); background:var(--ok-f);border-radius:var(--r-pill);padding:.12rem .5rem} .cd-pan-liv-pied{margin:1rem 0 0;font-size:.83rem} /* ─── recommandations ─── */ .cd-pan-reco{margin:2.4rem 0 1rem} .cd-pan-reco h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:1rem} body.cd-theme .cd-pan-reco ul.products{grid-template-columns:repeat(6,1fr)} @media (max-width:1100px){body.cd-theme .cd-pan-reco ul.products{grid-template-columns:repeat(3,1fr)}} @media (max-width:620px){body.cd-theme .cd-pan-reco ul.products{grid-template-columns:repeat(2,1fr)}} /* ─── appareils tactiles ─── Le bouton d'ajout des vignettes n'apparaît qu'au survol. Sur un doigt, ce survol n'existe pas : le bouton restait invisible et la vignette n'offrait aucun moyen d'acheter. On le montre en permanence. ⚠ Ce bloc doit rester en FIN de feuille : il a la même spécificité que la règle qu'il annule (`…li.product .button{opacity:0}`), c'est donc l'ordre d'écriture qui tranche. Placé plus haut, il n'avait aucun effet. */ @media (hover:none){ body.cd-theme ul.products li.product .button{transform:translateY(0);opacity:1} body.cd-theme ul.products li.product .cd-coeur-achat{opacity:1} } /* ─── cartouches de sous-catégories ─── Sous le texte d'une archive : les rayons enfants, ou les rayons voisins quand la catégorie est une feuille. C'est le rebond le plus court entre deux pages de catalogue. */ .cd-cartouches{margin:1.4rem 0 0} .cd-cartouches-t{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.18em; text-transform:uppercase;color:var(--d);margin-bottom:.6rem} .cd-cartouches ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} body.cd-theme .cd-cartouches a{display:inline-flex;align-items:baseline;gap:.45rem; padding:.42rem .85rem;border-radius:var(--r-pill); background:var(--s);border:1px solid var(--b);color:var(--t2); font-size:.83rem;line-height:1.2;white-space:nowrap; transition:border-color .2s ease,color .2s ease,background .2s ease} body.cd-theme .cd-cartouches a:hover{background:var(--peau-p);border-color:var(--peau);color:var(--a)} .cd-cartouches i{font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:.66rem;color:var(--d)} body.cd-theme .cd-cartouches a:hover i{color:var(--a-clair)} @media (max-width:640px){ /* En bande défilante : vingt cartouches empilées repoussent les produits très bas sur un téléphone. */ .cd-cartouches ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; margin-inline:calc(-1 * clamp(16px,3.4vw,40px));padding-inline:clamp(16px,3.4vw,40px)} .cd-cartouches ul::-webkit-scrollbar{display:none} } /* ─── carrousel vertical des miniatures ─── Au-delà de cinq vignettes, la colonne dépassait l'image principale et déséquilibrait la fiche. On borne à cinq, avec deux flèches. */ @media (min-width:700px){ body.cd-theme.woocommerce div.product div.images .cd-vign{ grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0} body.cd-theme.woocommerce div.product div.images .cd-vign .flex-control-thumbs{ overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-y:contain; padding:0;margin:0;width:100%; /* La règle générale autorise le retour à la ligne : dans une colonne de hauteur bornée, la sixième vignette repartait dans une SECONDE colonne au lieu de déborder, et il n'y avait donc rien à faire défiler. */ flex-wrap:nowrap} body.cd-theme.woocommerce div.product div.images .cd-vign .flex-control-thumbs::-webkit-scrollbar{display:none} /* Sans cela, les vignettes se COMPRIMENT pour tenir dans la hauteur bornée au lieu de déborder : un élément flex rétrécit par défaut, et le carrousel n'avait alors rien à faire défiler. */ body.cd-theme.woocommerce div.product div.images .cd-vign .flex-control-thumbs>li{flex:0 0 auto} } .cd-vign-f{width:84px;height:26px;display:grid;place-items:center;flex:none;cursor:pointer; background:var(--f);border:1px solid var(--b);border-radius:var(--r-p);color:var(--t2); transition:background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease} .cd-vign-f svg{width:17px;height:17px} .cd-vign-f:hover:not(:disabled){background:var(--peau-p);border-color:var(--peau);color:var(--a)} .cd-vign-f:disabled{opacity:.3;cursor:default} @media (prefers-reduced-motion:reduce){ body.cd-theme.woocommerce div.product div.images .cd-vign .flex-control-thumbs{scroll-behavior:auto} } /* ─── logo de marque, à droite du prix ─── Flottant : posé avant le prix dans le DOM, il laisse le prix et la mention de TVA s'écouler à sa gauche, sans conteneur supplémentaire. */ body.cd-theme.woocommerce div.product .cd-prix-ligne{ display:flex;align-items:center;justify-content:space-between;gap:1.2rem} body.cd-theme.woocommerce div.product .cd-prix-ligne p.price{margin:0;flex:1;min-width:0} body.cd-theme.woocommerce div.product .cd-marque-logo{ flex:none;display:block;margin:0;max-width:132px} body.cd-theme.woocommerce div.product .cd-marque-logo img{ display:block;width:auto;height:auto;max-width:132px;max-height:56px; object-fit:contain;opacity:.9;transition:opacity .2s ease} body.cd-theme.woocommerce div.product .cd-marque-logo:hover img{opacity:1} @media (max-width:520px){ body.cd-theme.woocommerce div.product .cd-marque-logo{max-width:96px} body.cd-theme.woocommerce div.product .cd-marque-logo img{max-width:96px;max-height:42px} } /* ─── bande défilante des produits liés ─── Douze références tiennent dans la largeur d'une seule ligne qui glisse, là où une grille en aurait empilé trois rangées sous la fiche. */ body.cd-theme ul.products.cd-bande{ display:flex;grid-template-columns:none;flex-wrap:nowrap; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-behavior:smooth; scrollbar-width:none; margin-inline:calc(-1 * clamp(16px,3.4vw,40px)); padding-inline:clamp(16px,3.4vw,40px); scroll-padding-inline:clamp(16px,3.4vw,40px); padding-bottom:.4rem} body.cd-theme ul.products.cd-bande::-webkit-scrollbar{display:none} body.cd-theme ul.products.cd-bande>li.product{ flex:0 0 clamp(178px,22vw,236px);scroll-snap-align:start} /* Le survol soulève la carte ; dans une bande, cela gênerait le calage. */ body.cd-theme ul.products.cd-bande>li.product:hover{transform:none} .cd-bande-tete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .cd-bande-f{display:flex;gap:.4rem;flex:none} .cd-bande-b{width:34px;height:34px;display:grid;place-items:center;cursor:pointer; background:var(--s);border:1px solid var(--b);border-radius:var(--r-pill);color:var(--t2); transition:background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease} .cd-bande-b svg{width:16px;height:16px} .cd-bande-b:hover:not(:disabled){background:var(--peau-p);border-color:var(--peau);color:var(--a)} .cd-bande-b:disabled{opacity:.32;cursor:default} @media (prefers-reduced-motion:reduce){ body.cd-theme ul.products.cd-bande{scroll-behavior:auto} } /* ─── « Par univers » en bande animée ─── La grille reste le rendu par défaut : si le script ne tourne pas, on garde sept cartes réparties sur deux lignes plutôt qu'une bande tronquée. Le script pose « anime » et bascule alors en piste horizontale. Deux translations empilées, et c'est voulu : la dérive automatique est une animation CSS (elle continue même quand le navigateur gèle les images pour du JavaScript), le déplacement manuel des flèches et du doigt vit sur le conteneur. Chacune boucle de son côté sur la demi-largeur, donc leur somme boucle aussi. */ .cd-univers-cadre.anime{overflow:hidden;touch-action:pan-y; margin-inline:calc(-1 * clamp(16px,3.4vw,40px)); padding-inline:clamp(16px,3.4vw,40px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} /* `will-change` promeut une couche de plus de cinq mille pixels de large et la garde en mémoire tout le temps : on ne la demande que pendant un déplacement, le script pose la classe. */ /* La bande défilante des univers a été retirée le 08/09/2026 : les sept cartouches tiennent en grille fixe, plus lisibles et plus faciles à viser. */ /* ─── rail des réseaux, bord droit ─── (classe cd-rs et non cd-rail : le thème avait déjà un .cd-rail, celui des filtres de boutique, en position:sticky — la collision faisait descendre celui-ci au bas de la page.) Une réglette étroite plutôt qu'une capsule : au premier essai, le rayon en gélule sur un bloc haut donnait un gros galet blanc posé sur la page. Ici la plaque fait la largeur d'un bouton, l'arrondi est court, et ce sont l'étiquette verticale et les deux fils qui signent le bloc. */ .cd-rs{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:34; display:flex;flex-direction:column;align-items:center;gap:.7rem;pointer-events:none} .cd-rs>*{pointer-events:auto} .cd-rs-titre{writing-mode:vertical-rl;text-orientation:mixed; font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase; color:var(--d);opacity:.6;margin-right:.1rem;user-select:none} .cd-rs-fil{width:1px;height:clamp(20px,3.5vh,34px); background:linear-gradient(to bottom,transparent,var(--peau))} .cd-rs-fil.bas{background:linear-gradient(to bottom,var(--peau),transparent)} .cd-rs ul{list-style:none;margin:0;padding:.3rem .28rem;display:flex;flex-direction:column;gap:.12rem; /* Même raison que l'en-tête : un élément fixe qui refloute son fond coûte une passe de flou par image de défilement. */ background:rgba(251,247,244,.94); border:1px solid rgba(58,26,36,.08);border-right:0; border-radius:16px 0 0 16px; box-shadow:-12px 0 34px -16px rgba(58,26,36,.32)} .cd-rs li{position:relative;display:flex} .cd-rs a{position:relative;width:34px;height:34px;display:grid;place-items:center;isolation:isolate; border-radius:50%;color:var(--t2);transition:color .25s,transform .25s} .cd-rs svg{width:17px;height:17px;position:relative;z-index:1} .cd-rs a::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:0; background:linear-gradient(145deg,#7C2E44,var(--a));opacity:0;transform:scale(.6); transition:opacity .28s,transform .28s cubic-bezier(.2,.8,.2,1)} .cd-rs a:hover,.cd-rs a:focus-visible{color:var(--f)} .cd-rs a:hover::before,.cd-rs a:focus-visible::before{opacity:1;transform:scale(1)} /* Le nom se déplie à gauche : l'icône seule ne suffit pas à tout le monde. */ .cd-rs em{position:absolute;right:calc(100% + .55rem);top:50%;transform:translate(6px,-50%); font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap;padding:.32rem .62rem;border-radius:var(--r-pill); background:var(--t);color:var(--f);opacity:0;visibility:hidden; box-shadow:0 6px 18px -8px rgba(58,26,36,.5); transition:opacity .22s,transform .22s,visibility .22s} .cd-rs a:hover em,.cd-rs a:focus-visible em{opacity:1;visibility:visible;transform:translate(0,-50%)} @media (max-width:1099px){ .cd-rs{display:none} } @media (prefers-reduced-motion:reduce){ .cd-rs a,.cd-rs a::before,.cd-rs em{transition:none} } /* ─── espace client ─── Le menu devient une colonne de vraies entrées, et le tableau de bord remplace les deux paragraphes de liens de WooCommerce par ce que le client vient chercher. */ body.cd-theme .woocommerce-MyAccount-navigation ul{display:flex;flex-direction:column;gap:.15rem} body.cd-theme .woocommerce-MyAccount-navigation li a{border-radius:var(--r-p);font-size:.92rem; display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding:.68rem .9rem;color:var(--t2);transition:background .2s,color .2s} body.cd-theme .woocommerce-MyAccount-navigation li a::after{content:"›";opacity:0; font-size:1.1rem;line-height:1;transition:opacity .2s,transform .2s;transform:translateX(-4px)} body.cd-theme .woocommerce-MyAccount-navigation li a:hover::after{opacity:.5;transform:none} body.cd-theme .woocommerce-MyAccount-navigation li.is-active a{background:var(--a);color:#fff} body.cd-theme .woocommerce-MyAccount-navigation li.is-active a::after{opacity:.7;transform:none} body.cd-theme .woocommerce-MyAccount-navigation li--customer-logout, body.cd-theme .woocommerce-MyAccount-navigation-link--customer-logout{margin-top:.5rem; padding-top:.5rem;border-top:1px solid var(--b)} .cd-tb{display:flex;flex-direction:column;gap:clamp(1.2rem,2.4vw,2rem)} .cd-tb-tete{background:var(--s);border:1px solid var(--b);border-radius:var(--r); padding:clamp(1.3rem,2.6vw,2rem);display:grid;gap:1.4rem} @media(min-width:820px){ .cd-tb-tete{grid-template-columns:minmax(0,1fr) auto;align-items:center} } .cd-tb-tete h2{margin:.1rem 0 .5rem;font-size:clamp(1.5rem,2.6vw,2rem)} .cd-tb-tete p{color:var(--d);margin:0;max-width:60ch;font-size:.92rem} .cd-tb-chiffres{display:flex;gap:clamp(1rem,2.4vw,2.2rem)} .cd-tb-chiffres b{display:block;font-family:var(--titre);font-size:clamp(1.2rem,2vw,1.6rem); font-weight:500;color:var(--t);line-height:1.1;white-space:nowrap} .cd-tb-chiffres b .woocommerce-Price-amount{font-size:inherit;font-family:inherit} .cd-tb-chiffres span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em; text-transform:uppercase;color:var(--d)} .cd-tb-tuiles{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .cd-tb-tuile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem 1rem; background:var(--s);border:1px solid var(--b);border-radius:var(--r-p); padding:.95rem 1.1rem;transition:border-color .22s,transform .22s,box-shadow .22s} .cd-tb-tuile b{grid-column:1;font-weight:500;color:var(--t);font-size:.95rem} .cd-tb-tuile span{grid-column:1;grid-row:2;font-size:.78rem;color:var(--d)} .cd-tb-tuile svg{grid-column:2;grid-row:1/3;color:var(--a);transition:transform .22s} .cd-tb-tuile:hover{border-color:var(--peau);transform:translateY(-2px);box-shadow:var(--ombre-h)} .cd-tb-tuile:hover svg{transform:translateX(3px)} .cd-tb-bloc h3,.cd-tb-carte h3{margin:0 0 .35rem;font-size:1.25rem} .cd-tb-bloc .cd-sect-tete{margin-bottom:1.1rem} .cd-tb-bloc .cd-sect-tete p{margin:.3rem 0 0;font-size:.88rem} .cd-tb-duo{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .cd-tb-carte{background:var(--s);border:1px solid var(--b);border-radius:var(--r); padding:clamp(1.1rem,2.2vw,1.6rem)} .cd-tb-carte p{color:var(--d);font-size:.89rem;margin:0 0 .8rem} .cd-tb-etat{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase; display:inline-block;padding:.3rem .7rem;border-radius:var(--r-pill)} .cd-tb-etat.ok{background:#E7F0E9;color:#2F6B45} .cd-tb-etat.attente{background:var(--peau-p);color:var(--a)} .cd-tb-lien{display:inline-flex;align-items:center;gap:.35rem;color:var(--a);font-size:.88rem; margin-right:1rem;border-bottom:1px solid transparent} .cd-tb-lien:hover{border-bottom-color:var(--a)} .cd-tb-nl{margin-top:.2rem} /* ─── espace client : envies, avis, parrainage ─── */ .cd-tb-intro{color:var(--d);font-size:.92rem;margin:0} .cd-tb-vide{color:var(--d);font-size:.9rem;margin:0} .cd-tb-mention{color:var(--d);font-size:.78rem;margin:.9rem 0 0} .cd-par-code .cd-par-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:.2rem 0 1rem} .cd-par-code code{font-family:var(--mono);font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:.16em; background:var(--f2);border:1px dashed var(--peau);border-radius:var(--r-p); padding:.6rem 1.1rem;color:var(--t)} .cd-par-partage{display:flex;flex-wrap:wrap;gap:0 1rem} .cd-par-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem} .cd-par-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem; background:var(--s);border:1px solid var(--b);border-radius:var(--r-p);padding:.75rem 1rem} .cd-par-liste b{font-weight:500;font-size:.92rem} .cd-par-liste time{font-size:.8rem;color:var(--d);margin-right:auto} .cd-tb-avoirs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem} .cd-tb-avoirs li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem; border:1px dashed var(--peau);border-radius:var(--r-p);padding:.7rem 1rem;background:var(--f2)} .cd-tb-avoirs code{font-family:var(--mono);letter-spacing:.12em;font-size:.95rem} .cd-tb-avoirs b{font-family:var(--titre);font-size:1.1rem;font-weight:500} .cd-tb-avoirs span{font-size:.8rem;color:var(--d);margin-right:auto} .cd-tb-avoirs .cd-btn,.cd-par-code .cd-btn{padding:.42rem 1rem;font-size:.82rem} .cd-avis-mien{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem} .cd-avis-mien li{background:var(--s);border:1px solid var(--b);border-radius:var(--r-p);padding:1rem 1.15rem} .cd-avis-mien b{font-weight:500} .cd-avis-mien p{margin:.4rem 0 .3rem;color:var(--d);font-size:.88rem} .cd-avis-mien time{font-family:var(--mono);font-size:.7rem;color:var(--d)} .cd-avis-note{color:var(--a);margin-left:.5rem;letter-spacing:.06em} .cd-tb-avantages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem} .cd-tb-avantages li{position:relative;padding-left:1.15rem;font-size:.88rem;color:var(--t2)} .cd-tb-avantages li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px; border-radius:50%;background:var(--a);opacity:.55} .cd-tb-remises ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem} .cd-tb-remises li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem; border-left:3px solid var(--a);padding:.5rem 0 .5rem .9rem} .cd-tb-remises b{font-weight:500;font-size:.95rem} .cd-tb-remises span{font-size:.85rem;color:var(--d)} .cd-tb-remises time{font-family:var(--mono);font-size:.68rem;color:var(--d);margin-left:auto} /* ─── économie de défilement ─── Une animation infinie garde sa couche vivante même hors écran. Le script pose « dort » sur ce qui n'est pas visible. */ .cd-marques-piste.dort, body.cd-theme .cd-univers.anime.dort, .cd-annonce-piste.dort{animation-play-state:paused} /* ─── offres en cours, sur la fiche produit ─── Rien n'est accroché aux LISTES : c'est précisément là que l'ancienne extension coûtait cher, en réévaluant ses règles pour chaque vignette. */ .cd-offres{list-style:none;margin:1.2rem 0;padding:0;display:flex; flex-direction:column;gap:.55rem} .cd-offres li{position:relative;margin:0;padding:.72rem .95rem .72rem 2.6rem; background:var(--peau-p);border:1px solid var(--peau);border-radius:var(--r-p); font-size:.94rem;line-height:1.45;color:var(--t2)} .cd-offres li::before{content:"✦";position:absolute;left:.95rem;top:.66rem; color:var(--a);font-size:.95rem;line-height:1.45} .cd-offres li strong{color:var(--a-fonce);font-weight:600} .cd-paliers{width:100%;margin:.55rem 0 0;border-collapse:collapse; font-size:.88rem;font-variant-numeric:tabular-nums} .cd-paliers th,.cd-paliers td{padding:.34rem .7rem;text-align:left; border-bottom:1px solid var(--peau)} .cd-paliers tr:last-child th,.cd-paliers tr:last-child td{border-bottom:0} .cd-paliers th{font-weight:400;color:var(--t2)} .cd-paliers td{text-align:right;font-weight:600;color:var(--a-fonce)} /* ═══ Le bouton d'ajout, ouvert, au bas de la carte ═══ Il était posé sur le visuel et n'apparaissait qu'au survol : invisible au doigt, et invisible tout court pour qui ne promène pas sa souris. Il occupe maintenant le bas de la carte, libellé compris. ⚠ Ce bloc doit rester en FIN de feuille : il annule des règles de MÊME spécificité écrites plus haut (`…li.product .button{opacity:0}` et `.cd-ajout-t{max-width:0}`). C'est l'ordre d'écriture qui tranche. */ /* La carte devient une colonne pour que les boutons s'alignent d'une vignette à l'autre, quelle que soit la longueur des titres. */ body.cd-theme ul.products li.product{display:flex;flex-direction:column} body.cd-theme ul.products li.product .cd-carte-txt{display:flex;flex-direction:column;flex:1} body.cd-theme ul.products li.product .price{margin-bottom:.75rem} body.cd-theme ul.products li.product .button{ position:relative;right:auto;bottom:auto;left:auto;margin:auto 0 0; width:100%;height:40px;padding:0 .9rem;gap:.5rem; opacity:1;transform:none;box-shadow:none; color:var(--a);background-color:transparent;border:1px solid var(--b); /* Le remplissage glisse de la gauche au survol : deux moitiés de dégradé qu'on fait coulisser, sans pseudo-élément — `::after` sert déjà au halo d'attente et à la coche de confirmation. */ background-image:linear-gradient(to right,var(--a) 0 50%,transparent 50%); background-size:200% 100%;background-position:100% 0;background-repeat:no-repeat; transition:background-position .38s cubic-bezier(.2,.8,.2,1), color .26s ease,border-color .26s ease,box-shadow .26s ease} /* Le libellé ne se replie plus : il est là, tout le temps. */ body.cd-theme ul.products li.product .cd-ajout-t{max-width:none;opacity:1; font-size:.78rem;letter-spacing:.01em} body.cd-theme ul.products li.product .button svg{ transition:transform .32s cubic-bezier(.2,.8,.2,1)} body.cd-theme ul.products li.product .button:hover, body.cd-theme ul.products li.product .button:focus-visible{ background-position:0 0;color:#fff;border-color:var(--a); box-shadow:0 10px 22px -14px rgba(60,30,35,.75)} body.cd-theme ul.products li.product .button:hover svg, body.cd-theme ul.products li.product .button:focus-visible svg{transform:translateX(-2px)} body.cd-theme ul.products li.product .button:active{transform:translateY(1px)} /* Sans animation : le remplissage est posé d'un coup, pas glissé. */ @media (prefers-reduced-motion:reduce){ body.cd-theme ul.products li.product .button{transition:color .01s,background-color .01s} body.cd-theme ul.products li.product .button:hover{background-image:none;background-color:var(--a)} body.cd-theme ul.products li.product .button:hover svg{transform:none} } /* Les encarts publicitaires n'ont pas de bouton d'ajout : rien à aligner. */ body.cd-theme ul.products li.product.cd-pub{display:flex} /* ─── le prix : un peu plus grand, aligné à droite ─── Le prix est ce que l'œil cherche en dernier sur une vignette : il se lit mieux au bout de la ligne, en face du bouton qui suit. ⚠ En fin de feuille, comme les règles voisines : même spécificité que `…li.product .price` écrite plus haut, c'est l'ordre qui tranche. */ body.cd-theme ul.products li.product .price{ font-size:1.18rem;justify-content:flex-end;text-align:right} body.cd-theme ul.products li.product .price del{font-size:.82rem} /* ─── prix barré au-dessus, prix de vente en dessous, tous deux à droite ─── ⚠ En fin de feuille : cette règle annule `justify-content:flex-end` posée plus haut avec la MÊME spécificité. C'est l'ordre qui tranche. Les `` de WooCommerce sont retirés du flux par leur propre position absolue : ils n'ajoutent pas de ligne vide. */ body.cd-theme ul.products li.product .price{ flex-direction:column;align-items:flex-end;justify-content:flex-end; gap:.05rem;line-height:1.25} body.cd-theme ul.products li.product .price del{font-size:.8rem;line-height:1.2} body.cd-theme ul.products li.product .price ins{font-size:1.18rem} /* ─── tous les prix calés en bas, promotion ou non ─── Un produit sans remise n'a qu'une ligne : son prix remontait d'un cran par rapport aux prix soldés voisins. On réserve la hauteur des deux lignes et l'on cale le contenu en bas — `justify-content:flex-end` dans une colonne, c'est le bas. */ body.cd-theme ul.products li.product .price{min-height:2.15em} /* ─── le titre réserve toujours deux lignes ─── ⚠ Le `min-height:2.25em` d'origine vaut MOINS que deux lignes de 1,32 : un titre court occupait 31 px, un titre long 36. Le prix qui suit remontait donc de 5 px sur les cartes à titre court, et les prix d'une même rangée ne s'alignaient plus. Deux lignes pleines = 2 × 1,32 em. */ body.cd-theme ul.products li.product .woocommerce-loop-product__title, body.cd-theme ul.products li.product h2{min-height:2.64em} /* ═══ Encart d'offre sous la galerie ═══ Bordure pointillée et pastille détachée, dans les tons de la maison : l'encart doit se voir sans crier, à côté d'une fiche produit sobre. */ body.cd-theme .cd-offre-encart{ grid-column:1;display:flex;align-items:center;gap:1rem; margin:1.1rem 0 0;padding:1rem 1.15rem; background:var(--peau-p);border:1px dashed var(--peau);border-radius:var(--r)} body.cd-theme .cd-offre-icone{flex:none;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;background:var(--s);color:var(--a); border:1px solid var(--peau)} body.cd-theme .cd-offre-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem} body.cd-theme .cd-offre-titre{font-family:var(--titre);font-size:1.05rem;font-weight:400; line-height:1.2;color:var(--t)} body.cd-theme .cd-offre-texte{margin:0;font-size:.84rem;line-height:1.45;color:var(--t2)} body.cd-theme .cd-offre-texte strong{color:var(--a-fonce);font-weight:600} body.cd-theme .cd-offre-badge{flex:none;max-width:11rem;text-align:center; padding:.55rem .8rem;border:1px dashed var(--a-clair);border-radius:var(--r-p); color:var(--a);font-size:.78rem;font-weight:600;line-height:1.3;background:var(--s)} @media (max-width:700px){ body.cd-theme .cd-offre-encart{flex-wrap:wrap;gap:.75rem} body.cd-theme .cd-offre-badge{max-width:none;width:100%} } /* ─── la grille du haut de fiche, rangées épinglées ─── 🚨 L'encart d'offre est un troisième enfant de `.cd-fiche-haut`. Le placement automatique lui donnait la rangée 2 de la colonne 1, puis envoyait la COLONNE D'ACHAT en rangée 2 elle aussi : titre, prix et bouton se retrouvaient sous la galerie au lieu d'être à côté. On épingle donc : galerie en rangée 1, encart en rangée 2, colonne d'achat sur les deux. */ @media (min-width:900px){ body.cd-theme.woocommerce div.product .cd-fiche-haut>div.images{grid-row:1} body.cd-theme.woocommerce div.product .cd-fiche-haut>.summary{grid-column:2;grid-row:1/-1} body.cd-theme .cd-offre-encart{grid-column:1;grid-row:2} } /* ─── galerie et offre collent ENSEMBLE ─── 🚨 Un élément collant ne cède pas le passage à son voisin du dessous : la galerie recouvrait l'encart en entier (78 px mesurés). On enferme donc les deux dans `.cd-colonne-gauche`, et c'est l'enveloppe qui colle. Ils descendent d'un bloc, l'offre reste sous la galerie, rien ne se recouvre. L'enveloppe n'existe que sur les fiches qui portent une offre : ailleurs, les règles du thème sur `.cd-fiche-haut>div.images` s'appliquent telles quelles. */ @media (min-width:900px){ body.cd-theme.woocommerce div.product.cd-a-offre .cd-fiche-haut>.cd-colonne-gauche{ grid-column:1;grid-row:1; position:sticky;top:calc(var(--h-entete,132px) + 14px)} /* La galerie cède le collant à l'enveloppe, mais reste POSITIONNÉE : le bouton « Vidéo » est calé sur son bas. En `static`, il s'ancrait sur l'enveloppe et venait se poser sur l'encart. */ body.cd-theme.woocommerce div.product.cd-a-offre .cd-colonne-gauche>div.images{ position:relative;top:auto;float:none;width:auto;margin:0} /* L'encart n'est plus un élément de grille : il suit simplement la galerie. */ body.cd-theme div.product.cd-a-offre .cd-offre-encart{grid-column:auto;grid-row:auto} body.cd-theme.woocommerce div.product.cd-a-offre .cd-fiche-haut>.summary{grid-column:2;grid-row:1} } /* ─── le choix du cadeau, sur la page panier ─── */ /* Un cadeau se remarque : bandeau bordeaux, cadre plein, et chaque carte dit ce qu'elle vaut. L'encart tombe après la liste du panier, loin du regard — c'est la couleur qui doit le rattraper, pas une animation. */ body.cd-theme .cd-cadeaux{margin:1.8rem 0 0;background:var(--s); border:1px solid var(--peau);border-radius:var(--r);overflow:hidden; box-shadow:0 16px 38px -22px rgba(140,47,66,.45)} body.cd-theme .cd-cadeaux-tete{display:flex;align-items:center;gap:.85rem; padding:.9rem 1.15rem;background:var(--a);color:#FBF7F4} body.cd-theme .cd-cadeaux-icone{flex:0 0 auto;width:26px;height:26px; stroke:currentColor;fill:none} body.cd-theme .cd-cadeaux-mots{flex:1 1 auto;min-width:0} body.cd-theme .cd-cadeaux-titre{margin:0;font-family:var(--titre);font-size:1.2rem; font-weight:400;color:inherit;line-height:1.2} body.cd-theme .cd-cadeaux-aide{margin:.15rem 0 0;font-size:.84rem; color:rgba(251,247,244,.82)} body.cd-theme .cd-cadeaux-jauge{flex:0 0 auto;font-family:var(--mono);font-size:.62rem; letter-spacing:.08em;text-transform:uppercase;white-space:nowrap; padding:.34rem .62rem;border:1px solid rgba(251,247,244,.45);border-radius:var(--r-pill)} body.cd-theme .cd-cadeaux-liste{list-style:none;margin:0;padding:1rem;display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.8rem; background:var(--peau-p)} body.cd-theme .cd-cadeau a{display:flex;flex-direction:column;gap:.45rem;height:100%; padding:.7rem;background:var(--s);border:1px solid var(--b);border-radius:var(--r-p); text-decoration:none;color:var(--t);transition:border-color .2s,box-shadow .2s,transform .2s} body.cd-theme .cd-cadeau a:hover{border-color:var(--a-clair);transform:translateY(-2px); box-shadow:var(--ombre)} body.cd-theme .cd-cadeau.choisi a{border-color:var(--a);box-shadow:0 0 0 2px var(--a)} body.cd-theme .cd-cadeau.choisi a:hover{transform:none} body.cd-theme .cd-cadeau-vis{position:relative;display:block} body.cd-theme .cd-cadeau-vis img{width:100%;aspect-ratio:1/1;object-fit:contain; background:#fff;border-radius:6px;display:block;margin:0} body.cd-theme .cd-cadeau-coche{position:absolute;top:.3rem;right:.3rem; width:23px;height:23px;display:grid;place-items:center;border-radius:50%; background:var(--a);color:#fff;box-shadow:0 2px 6px rgba(60,30,35,.3)} body.cd-theme .cd-cadeau-coche svg{width:13px;height:13px;stroke:currentColor;fill:none} body.cd-theme .cd-cadeau-nom{font-size:.8rem;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.cd-theme .cd-cadeau-prix{font-size:.78rem;font-weight:600;color:var(--a)} body.cd-theme .cd-cadeau-prix s{margin-right:.3rem;font-weight:400;color:var(--d)} body.cd-theme .cd-cadeau-prix .woocommerce-Price-amount{font-size:inherit;color:inherit} body.cd-theme .cd-cadeau-etat{margin-top:auto;text-align:center; font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase; padding:.44rem .5rem;border:1px solid var(--b);border-radius:var(--r-pill);color:var(--d); transition:background .2s,color .2s,border-color .2s} body.cd-theme .cd-cadeau a:hover .cd-cadeau-etat{border-color:var(--a);color:var(--a)} body.cd-theme .cd-cadeau.choisi .cd-cadeau-etat{background:var(--a);border-color:var(--a); color:#FBF7F4;font-weight:600} @media (max-width:520px){ body.cd-theme .cd-cadeaux-tete{flex-wrap:wrap;gap:.6rem} body.cd-theme .cd-cadeaux-liste{padding:.8rem;gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(138px,1fr))} } @media (prefers-reduced-motion:reduce){ body.cd-theme .cd-cadeau a:hover{transform:none} } /* ─── la ligne « cadeau » dans la liste du panier ─── */ /* Le conteneur est en `overflow:hidden` : le filet de gauche est proprement coupé par les coins arrondis, même sur la première et la dernière ligne. */ body.cd-theme .cd-pan-art.cd-pan-offert{position:relative;background:var(--peau-p)} body.cd-theme .cd-pan-art.cd-pan-offert::before{content:"";position:absolute; left:0;top:0;bottom:0;width:3px;background:var(--a)} body.cd-theme .cd-pan-badge-offert{display:inline-flex;align-items:center;gap:.34rem; margin:.1rem 0 .35rem;padding:.26rem .58rem;border-radius:var(--r-pill); background:var(--a);color:#FBF7F4;font-family:var(--mono);font-size:.6rem; letter-spacing:.08em;text-transform:uppercase;line-height:1} body.cd-theme .cd-pan-badge-offert svg{width:12px;height:12px;stroke:currentColor;fill:none} body.cd-theme .cd-pan-gratuit{color:var(--a);font-weight:600} body.cd-theme .cd-pan-offert .cd-pan-unite s{margin-right:.3rem;color:var(--d)} body.cd-theme .cd-pan-offert .cd-pan-unite s .woocommerce-Price-amount{color:inherit} body.cd-theme .cd-pan-offert .cd-pan-tot{color:var(--a)} body.cd-theme .cd-pan-offert .cd-pan-un{font-family:var(--mono);color:var(--d); padding:0 .2rem} /* ─── le bouton du guide, à côté du blog ─── */ /* La pastille du bouton « blog » cède la place à une boussole : les deux pilules se ressemblent assez pour former une paire, assez peu pour qu'on les distingue d'un coup d'œil. */ body.cd-theme .cd-lien-guide::before{display:none} body.cd-theme .cd-lien-guide svg{width:15px;height:15px;flex:none;opacity:.75; transition:opacity .22s} body.cd-theme .cd-lien-guide:hover svg{opacity:1} /* ⚠ Deux pilules serrent la barre haute entre 900 et 1140 px. Le guide reste, le blog s'efface : sur douze mille références, aider à choisir passe avant la lecture. En dessous de 900 px, la règle du thème les masque déjà toutes les deux — le menu s'en charge. */ @media (max-width:1140px) and (min-width:901px){ body.cd-theme .cd-lien-haut:not(.cd-lien-guide){display:none} } /* ─── la barre haute sur mobile : le logo seul, puis le reste ─── */ /* * 🚨 `.cd-haut` n'autorisait pas le retour à la ligne. La règle du thème qui * donnait `flex-basis:100%` à la recherche ne pouvait donc pas s'appliquer : * au lieu de passer à la ligne, le champ se ratatinait à 9 px de large — une * loupe sans champ. Autoriser le retour à la ligne remet la recherche à sa * taille en même temps que ça range le logo sur sa propre ligne. */ @media (max-width:860px){ body.cd-theme .cd-haut{flex-wrap:wrap;row-gap:.6rem;column-gap:.5rem} body.cd-theme .cd-haut > .cd-logo{order:1;flex:1 0 100%; display:flex;justify-content:center} /* Le logo rétrécit au défilement : centré, il doit le faire depuis son milieu, sinon il glisse vers la gauche en se réduisant. */ body.cd-theme .cd-haut > .cd-logo img{transform-origin:center} /* ⚠ `flex:1 1 auto` laissait la recherche prendre toute la deuxième ligne et repoussait les outils sur une TROISIÈME. Une base courte la force à partager : elle s'étire sur ce qui reste une fois les outils placés. */ /* Le menu d'abord, la recherche ensuite : c'est le geste le plus fréquent qui se met sous le pouce, du côté où l'on tient l'appareil. */ body.cd-theme .cd-haut > .cd-burger{order:2;flex:0 0 auto;padding:.4rem} body.cd-theme .cd-recherche{order:3;flex:1 1 110px; max-width:none;margin-top:0;min-width:0} /* 🚨 `display:contents` fait disparaître la BOÎTE du groupe d'outils sans toucher à son contenu : ses trois icônes deviennent des enfants directs de la barre et entrent dans la répartition. Sans cela, `space-between` n'aurait vu que quatre blocs — burger, loupe, le groupe entier, bouton du guide — et les trois icônes seraient restées collées. Elles reprennent un rang commun, sinon elles passeraient devant tout le monde : `order` vaut 0 par défaut. */ body.cd-theme .cd-haut > .cd-outils{display:contents} body.cd-theme .cd-haut > .cd-outils > *{order:4} /* Les commandes s'étalent sur toute la largeur de la deuxième ligne. */ body.cd-theme .cd-haut{justify-content:space-between} } /* ⚠ Cinq icônes plus la pilule du guide : un cran de resserrement suffit. */ @media (max-width:400px){ body.cd-theme .cd-haut{column-gap:.25rem} body.cd-theme .cd-haut .cd-outil{width:38px;height:38px;min-width:38px} } /* ─── le guide sur mobile ─── */ /* La règle du thème masque les deux pilules sous 900 px, faute de place pour du texte. Le guide reste, mais réduit à sa boussole. Un doublon dans le menu aurait été moins visible, et deux liens vers la même page se disputent les statistiques. ⚠ Même gabarit que les autres outils — 42 px, mesuré sur `.cd-outil` : une cible plus petite se rate au pouce, et une taille différente trahit un ajout. Le fond rosé le distingue en revanche des outils neutres. */ @media (max-width:900px){ /* Une pilule, libellé compris : une boussole seule ne dit pas ce qu'elle ouvre, et c'est la page qui doit se faire remarquer. */ body.cd-theme .cd-lien-guide{display:inline-flex;order:5;margin-left:0;flex:0 0 auto; width:auto;height:38px;padding:0 .8rem;gap:.35rem;justify-content:center; font-size:.78rem;line-height:1;white-space:nowrap; border-radius:var(--r-pill);background:var(--peau-p);border:1px solid var(--peau); color:var(--a)} body.cd-theme .cd-lien-guide svg{width:16px;height:16px;opacity:1} body.cd-theme .cd-lien-guide-c{display:none} body.cd-theme .cd-lien-guide:hover, body.cd-theme .cd-lien-guide:focus-visible{transform:none;box-shadow:none; background:var(--a);border-color:var(--a);color:#FBF7F4} } /* Entre 861 et 900 px le burger n'existe pas encore et la barre tient sur une ligne : la boussole s'y range comme sur mobile, sans retour à la ligne. */ @media (max-width:900px) and (min-width:861px){ body.cd-theme .cd-lien-guide{margin-left:calc(.15rem - clamp(.7rem,2vw,1.8rem))} } /* ─── le menu mobile à paliers ─── */ /* Rangées de 54 px, un palier à la fois, un retour nommé. L'ancien dépliage — sept familles et soixante-quinze rayons dans une seule liste — reste en repli si le script ne charge pas. */ body.cd-mob-ouvert{overflow:hidden} body.cd-theme .cd-mob{position:fixed;inset:0;z-index:200} body.cd-theme .cd-mob[hidden]{display:none} body.cd-theme .cd-mob-fond{position:absolute;inset:0;background:rgba(36,22,25,.45); animation:cd-mob-fondu .2s ease} @keyframes cd-mob-fondu{from{opacity:0}to{opacity:1}} body.cd-theme .cd-mob-panneau{position:absolute;inset:0 0 0 auto;width:min(88vw,420px); display:flex;flex-direction:column;background:var(--f); box-shadow:-24px 0 60px -30px rgba(60,30,35,.6);animation:cd-mob-entre .26s cubic-bezier(.2,.8,.2,1)} @keyframes cd-mob-entre{from{transform:translateX(100%)}to{transform:translateX(0)}} body.cd-theme .cd-mob-tete{flex:0 0 auto;display:flex;align-items:center;gap:.5rem; padding:.7rem .8rem;border-bottom:1px solid var(--b);background:var(--s)} body.cd-theme .cd-mob-titre{flex:1 1 auto;min-width:0;text-align:center; font-family:var(--titre);font-size:1.05rem;color:var(--t); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.cd-theme .cd-mob-retour, body.cd-theme .cd-mob-fermer{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem; min-width:44px;min-height:44px;padding:0 .6rem;border:0;background:none;cursor:pointer; color:var(--t2);font:inherit;font-size:.82rem;border-radius:var(--r-pill)} body.cd-theme .cd-mob-retour em, body.cd-theme .cd-mob-fermer em{font-style:normal;font-size:1.25rem;line-height:1;color:var(--a)} body.cd-theme .cd-mob-retour span{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.cd-theme .cd-mob-retour[hidden]{display:none} body.cd-theme .cd-mob-retour:hover, body.cd-theme .cd-mob-fermer:hover{background:var(--peau-p)} body.cd-theme .cd-mob-fermer{justify-content:center;padding:0} body.cd-theme .cd-mob-scene{flex:1 1 auto;position:relative;overflow:hidden} body.cd-theme .cd-mob-vol{position:absolute;inset:0;overflow-y:auto; -webkit-overflow-scrolling:touch;padding:.6rem .5rem 2rem} body.cd-theme .cd-mob-vol[hidden]{display:none} body.cd-theme .cd-mob-vol.entre{animation:cd-mob-palier .22s ease} @keyframes cd-mob-palier{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} body.cd-theme .cd-mob-soustitre{margin:1.1rem .8rem .3rem;font-family:var(--mono); font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--d)} body.cd-theme .cd-mob-liste{list-style:none;margin:0;padding:0} body.cd-theme .cd-mob-r{display:flex;align-items:center;gap:.7rem;width:100%; min-height:54px;padding:.5rem .8rem;border:0;background:none;cursor:pointer; font:inherit;font-size:.95rem;color:var(--t);text-align:left;text-decoration:none; border-radius:var(--r-p);transition:background .15s} body.cd-theme .cd-mob-r:hover,body.cd-theme .cd-mob-r:focus-visible{background:var(--peau-p)} body.cd-theme .cd-mob-nom{flex:1 1 auto;min-width:0} body.cd-theme .cd-mob-cpt{flex:0 0 auto;font-family:var(--mono);font-size:.66rem; font-style:normal;color:var(--d);font-variant-numeric:tabular-nums} body.cd-theme .cd-mob-fl{flex:0 0 auto;font-style:normal;font-size:1.2rem;line-height:1; color:var(--a);opacity:.55} body.cd-theme .cd-mob-r.est-raccourci{color:var(--a);font-weight:500} body.cd-theme .cd-mob-tout{display:block;margin:.2rem .8rem .7rem;padding:.7rem 1rem; text-align:center;text-decoration:none;border-radius:var(--r-pill); background:var(--a);color:#FBF7F4;font-size:.86rem} body.cd-theme .cd-mob-tout:hover{background:var(--a-fonce)} @media (prefers-reduced-motion:reduce){ body.cd-theme .cd-mob-panneau, body.cd-theme .cd-mob-fond, body.cd-theme .cd-mob-vol.entre{animation:none} } /* Au-delà du seuil du burger, le menu n'a plus lieu d'être. */ @media (min-width:861px){ body.cd-theme .cd-mob{display:none} } /* ─── la recherche en plein écran, sur mobile ─── */ /* Le champ de l'en-tête ne disposait que de 130 px : intitulé coupé, frappe à l'aveugle. Une loupe le remplace et ouvre la recherche sur toute la page, où les suggestions ont enfin la place de s'afficher. */ body.cd-theme .cd-haut.cd-recherche-repliee > .cd-recherche{display:none} body.cd-theme .cd-loupe-b{order:3;flex:0 0 auto;display:inline-flex; align-items:center;justify-content:center;width:42px;height:42px;padding:0; border:0;background:none;color:var(--t);cursor:pointer;border-radius:50%} body.cd-theme .cd-loupe-b svg{width:21px;height:21px} body.cd-theme .cd-loupe-b:hover{background:var(--peau-p)} body.cd-theme .cd-rech-plein{position:fixed;inset:0;z-index:210; background:var(--f);display:flex;flex-direction:column; animation:cd-rech-entre .2s ease} body.cd-theme .cd-rech-plein[hidden]{display:none} @keyframes cd-rech-entre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} body.cd-theme .cd-rech-tete{flex:0 0 auto;display:flex;align-items:center; gap:.5rem;padding:.7rem .8rem;border-bottom:1px solid var(--b);background:var(--s)} body.cd-theme .cd-rech-titre{flex:1 1 auto;font-family:var(--titre);font-size:1.05rem; color:var(--t)} body.cd-theme .cd-rech-fermer{flex:0 0 auto;min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center;border:0;background:none; cursor:pointer;border-radius:var(--r-pill)} body.cd-theme .cd-rech-fermer em{font-style:normal;font-size:1.25rem;line-height:1;color:var(--a)} body.cd-theme .cd-rech-fermer:hover{background:var(--peau-p)} body.cd-theme .cd-rech-corps{flex:1 1 auto;padding:1rem .8rem 0;overflow-y:auto} /* Le formulaire déplacé ici retrouve toute sa largeur. */ body.cd-theme .cd-rech-corps .cd-recherche{display:block;flex:none;max-width:none;width:100%} body.cd-theme .cd-rech-corps .cd-recherche input[type=search]{font-size:16px} /* 🚨 16 px minimum : en dessous, Safari sur iPhone zoome à la mise au point et la page part de travers. */ /* Les suggestions coulent sous le champ, sans cadre ni ombre : elles occupent la page entière, ce n'est plus un menu déroulant. */ body.cd-theme .cd-rech-corps .cd-re-boite{position:static;margin-top:.7rem; max-height:none;border:0;box-shadow:none;background:none;padding:0} body.cd-theme .cd-rech-corps .cd-re-lien{padding:.65rem .5rem} body.cd-theme .cd-rech-aide{flex:0 0 auto;margin:0;padding:1rem .9rem 1.4rem; font-size:.82rem;color:var(--d);text-align:center} body.cd-theme .cd-rech-aide[hidden]{display:none} @media (prefers-reduced-motion:reduce){ body.cd-theme .cd-rech-plein{animation:none} } @media (min-width:861px){ body.cd-theme .cd-rech-plein{display:none} } /* ─── le logo, en haut de page ─── */ /* Il a sa propre ligne sur mobile depuis le remaniement de la barre : la contrainte qui le tenait à 36 px — il partageait alors la ligne avec la recherche et les outils, et la barre débordait de 10 px — n'a plus lieu d'être. Il grandit donc au repos, et reprend sa petite taille au défilement, où c'est la place qui compte. */ @media (max-width:860px){ body.cd-theme .cd-entete .cd-logo img{height:clamp(48px,13vw,68px); transition:height .25s ease,transform .25s ease} body.cd-theme .cd-entete.colle .cd-logo img{height:clamp(34px,8vw,44px);transform:none} } /* ⚠ Mesuré : « Vous guider » fait basculer la pilule sur une deuxième ligne dès 390 px. Le libellé se raccourcit plutôt que de casser la rangée. 🚨 Ce bloc est écrit APRÈS celui du palier 900 px : à spécificité égale, c'est l'ordre d'écriture qui tranche, et `.cd-lien-guide-c{display:none}` du palier supérieur reprenait la main. */ @media (max-width:400px){ body.cd-theme .cd-lien-guide-t{display:none} body.cd-theme .cd-lien-guide-c{display:inline} body.cd-theme .cd-lien-guide{padding:0 .7rem} } /* Un dernier cran pour les 320 px : la rangée y tenait à trois pixels près. */ @media (max-width:340px){ body.cd-theme .cd-haut{column-gap:.15rem} body.cd-theme .cd-haut .cd-outil{width:36px;height:36px;min-width:36px} body.cd-theme .cd-lien-guide{padding:0 .55rem;height:36px;font-size:.74rem} body.cd-theme .cd-lien-guide svg{width:15px;height:15px} }