/* Theme Name: MOOV Vitrine Theme URI: https://moov-agency.com Author: MOOV Agency Description: Thème vitrine e-commerce haut de gamme pour les démos MOOV. WooCommerce natif, multi-devise, multilingue FR/AR. Version: 1.0.0 Requires at least: 6.5 Requires PHP: 8.1 License: GPL-2.0-or-later Text Domain: moov-vitrine Tags: e-commerce, woocommerce, rtl-language-support */ /* ========================================================================== 1. Tokens — alias sur le design system MOOV Vitrine -------------------------------------------------------------------------- La source de vérité est assets/css/tokens.css (skill moov-vitrine). Ce bloc ne fait que relier les noms historiques du thème aux tokens --mv-*. Aucune valeur n'est décidée ici : tout vient du système. ========================================================================== */ :root{ /* Encre et surfaces */ --ink:var(--mv-text); --ink-2:var(--mv-surface-invert); --ink-3:var(--mv-text-brand); --bg:var(--mv-bg); --bg-2:var(--mv-bg-alt); --bg-3:var(--mv-neutral-200); --card:var(--mv-surface); --muted:var(--mv-text-muted); --muted-2:var(--mv-text-subtle); --line:var(--mv-border); --line-2:var(--mv-border-soft); /* L'action est l'encre. L'ancien « gold » devient du texte discret : dans ce système la couleur signale, elle ne décore pas. */ --gold:var(--mv-text-muted); --gold-2:var(--mv-neutral-300); /* uniquement sur fond encre */ --gold-soft:var(--mv-accent-quiet); /* Marqueur IA — règle MOOV : bleu, et lui seul */ --ia:#3B63D8; --ia-soft:#E7ECFB; /* Statuts */ --ok:var(--mv-success); --ok-soft:#E6F1ED; --warn:var(--mv-warning);--warn-soft:var(--mv-accent-quiet); --err:var(--mv-danger); --err-soft:#F8E9E5; /* Typographie */ --ff-display:var(--mv-font-display); --ff-body:var(--mv-font-sans); --ff-mono:var(--mv-font-sans); /* L'angle droit est la règle ; --round est l'exception documentée (pastilles de compteur, points, boutons strictement ronds). */ --r:var(--mv-r-xs); --r-lg:var(--mv-r-md); --pill:var(--mv-r-xs); --round:9999px; /* Le filet remplace l'ombre. Seules les couches flottantes en portent une. */ --shadow:none; --shadow-lg:var(--mv-shadow-float); /* Écart documenté au système : les packshots de cette boutique sont carrés. Les forcer en 3/4 rognerait les flacons sur les côtés. Le ratio reste constant sur toute la grille, c'est ce que la règle protège. */ --mv-ratio-product:1 / 1; --wrap:var(--mv-container); --wrap-narrow:var(--mv-container-text); --gut:var(--mv-gutter); --bar-h:38px; } /* ========================================================================== 2. Reset & base ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} body{margin:0;background:var(--bg);color:var(--ink); font-family:var(--ff-body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden} img,video,svg{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{margin:0 0 .5em;font-weight:400;line-height:1.12;letter-spacing:-.01em} h1,h2,h3{font-family:var(--ff-display)} h1{font-size:clamp(2.4rem,6vw,4.4rem)} h2{font-size:clamp(1.9rem,4vw,3rem)} h3{font-size:clamp(1.3rem,2.4vw,1.75rem)} h4{font-family:var(--ff-body);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase} p{margin:0 0 1em} :focus-visible{outline:3px solid var(--gold-2);outline-offset:2px;border-radius:2px} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip-link{position:absolute;left:-9999px} .skip-link:focus{left:1rem;top:1rem;z-index:999;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:var(--pill)} /* ========================================================================== 3. Layout helpers ========================================================================== */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .wrap-narrow{max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:clamp(3rem,7vw,6rem)} .section--tight{padding-block:clamp(2rem,4vw,3.5rem)} .section--alt{background:var(--bg-2)} .section--ink{background:var(--ink);color:#fff} .section--ink h2,.section--ink h3{color:#fff} .grid{display:grid;gap:clamp(1rem,2.4vw,2rem)} .eyebrow{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem} .section--ink .eyebrow{color:var(--gold-2)} .lede{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--muted);max-width:60ch} .section--ink .lede{color:rgba(255,255,255,.72)} .section-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(1.5rem,3vw,2.75rem)} .section-head>div{max-width:64ch} .num{font-family:var(--ff-mono);font-variant-numeric:tabular-nums} /* ========================================================================== 4. Buttons & badges ========================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:48px;padding:.85rem 1.6rem;border:1px solid transparent;border-radius:var(--pill); background:var(--ink);color:#fff;font-size:.9rem;font-weight:500;letter-spacing:.02em; cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .12s;text-align:center} .btn:hover{background:var(--ink-3)} .btn:active{transform:translateY(1px)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .btn--gold{background:var(--gold-2);color:var(--ink-2)} .btn--gold:hover{background:var(--gold)} .btn--light{background:#fff;color:var(--ink)} .btn--light:hover{background:var(--bg-2)} .btn--sm{min-height:38px;padding:.5rem 1.05rem;font-size:.8rem} .btn--block{display:flex;width:100%} .btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none} .tag{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .6rem;border-radius:var(--r); font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap} .tag--ia{background:var(--ia-soft);color:var(--ia)} .tag--ia-solid{background:var(--ia);color:#fff} .tag--new{background:var(--ink);color:#fff} .tag--sale{background:var(--err-soft);color:var(--err)} .tag--gold{background:var(--gold-soft);color:#6E5410} .tag--ok{background:var(--ok-soft);color:var(--ok)} .tag--warn{background:var(--warn-soft);color:var(--warn)} .tag--ghost{background:transparent;border:1px solid var(--line);color:var(--muted)} /* ========================================================================== 5. Barre démo MOOV (toujours visible) ========================================================================== */ .moov-bar{position:relative;z-index:60;background:#12100D;color:#fff;font-size:.72rem;line-height:1.3} .moov-bar__in{max-width:var(--wrap);margin-inline:auto;padding:.5rem var(--gut); display:flex;align-items:center;gap:.75rem 1.25rem;flex-wrap:wrap;min-height:var(--bar-h)} .moov-bar__flag{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.18em; background:#FF5C1A;color:#12100D;padding:.2rem .5rem;border-radius:2px;font-weight:600} .moov-bar__txt{color:rgba(255,255,255,.7)} .moov-bar__txt strong{color:#fff;font-weight:500} .moov-bar__spacer{flex:1} .moov-bar a.moov-bar__cta{color:#12100D;background:#FF5C1A;padding:.3rem .8rem;border-radius:var(--pill);font-weight:600;white-space:nowrap} .moov-bar a.moov-bar__cta:hover{background:#fff} .moov-bar__link{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px} .moov-bar__link:hover{color:#fff} @media (max-width:720px){.moov-bar__txt{display:none}} /* ========================================================================== 6. Header ========================================================================== */ .site-header{position:sticky;top:0;z-index:50;background:rgba(250,248,245,.86); backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line-2);transition:box-shadow .2s} .site-header.is-stuck{box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(4,48,63,.5)} .header-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem; max-width:var(--wrap);margin-inline:auto;padding:.9rem var(--gut)} .brand{display:inline-flex;flex-direction:column;line-height:1;gap:.28rem} .brand__name{font-family:var(--ff-display);font-size:1.7rem;letter-spacing:.02em} .brand__tag{font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)} .nav-main{justify-self:center} .nav-main ul{display:flex;gap:clamp(1rem,2.2vw,2rem);list-style:none;margin:0;padding:0} .nav-main a{font-size:.85rem;letter-spacing:.03em;padding:.4rem 0;position:relative;color:var(--ink);white-space:nowrap} .nav-main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink); transform:scaleX(0);transform-origin:left;transition:transform .25s} .nav-main a:hover::after,.nav-main .current-menu-item>a::after{transform:scaleX(1)} .header-tools{display:flex;align-items:center;gap:.35rem} .icon-btn{display:inline-flex;align-items:center;justify-content:center;position:relative; width:42px;height:42px;border:0;background:transparent;border-radius:var(--pill);cursor:pointer;color:var(--ink)} .icon-btn:hover{background:var(--bg-2)} .icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5} .icon-btn__count{position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px; display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:var(--pill); font-family:var(--ff-mono);font-size:.58rem;font-weight:600} .icon-btn__count[data-count="0"]{display:none} .nav-toggle{display:none} @media (max-width:960px){ .nav-main{display:none} .nav-toggle{display:inline-flex} .header-top{grid-template-columns:auto 1fr auto} } /* menu mobile */ .nav-drawer{position:fixed;inset:0;z-index:70;background:var(--bg);transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:1.25rem var(--gut) 3rem} .nav-drawer[data-open="1"]{transform:none} .nav-drawer ul{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.25rem} .nav-drawer a{display:block;padding:.85rem 0;font-family:var(--ff-display);font-size:1.6rem;border-bottom:1px solid var(--line-2)} /* barre catégories + promo */ .promo-strip{background:var(--ink);color:#fff;font-size:.72rem;letter-spacing:.06em;text-align:center;padding:.55rem var(--gut)} .promo-strip strong{font-family:var(--ff-mono);color:var(--gold-2)} /* bandeau confiance */ .usp{border-block:1px solid var(--line-2);background:var(--card)} .usp__in{max-width:var(--wrap);margin-inline:auto;padding:1.4rem var(--gut); display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.25rem} .usp__item{display:flex;gap:.7rem;align-items:flex-start} .usp__item svg{width:22px;height:22px;flex:0 0 22px;stroke:var(--gold);fill:none;stroke-width:1.4;margin-top:2px} .usp__item b{display:block;font-size:.85rem;font-weight:600} .usp__item span{font-size:.78rem;color:var(--muted)} /* ========================================================================== 8. Cartes produit / grilles WooCommerce ========================================================================== */ ul.products{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.75rem); grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))} ul.products li.product{margin:0;position:relative} .card-p{display:flex;flex-direction:column;height:100%;background:var(--card); border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;transition:box-shadow .25s,border-color .25s,transform .25s} .card-p:hover{box-shadow:var(--shadow-lg);border-color:var(--line);transform:translateY(-3px)} .card-p__media{position:relative;aspect-ratio:1;background:var(--bg-2);overflow:hidden} .card-p__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1),opacity .3s} .card-p:hover .card-p__media img.is-primary{transform:scale(1.04)} .card-p__media img.is-alt{position:absolute;inset:0;opacity:0} .card-p:hover .card-p__media img.is-alt{opacity:1} .card-p__flags{position:absolute;top:.6rem;left:.6rem;display:grid;gap:.3rem;justify-items:start;z-index:2} .card-p__acts{position:absolute;top:.6rem;right:.6rem;display:grid;gap:.35rem;z-index:2; opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s} .card-p:hover .card-p__acts,.card-p:focus-within .card-p__acts{opacity:1;transform:none} @media (hover:none){.card-p__acts{opacity:1;transform:none}} .card-p__acts button,.card-p__acts a{width:36px;height:36px;display:grid;place-items:center;background:rgba(255,255,255,.94); border:1px solid var(--line-2);border-radius:var(--pill);cursor:pointer;color:var(--ink);padding:0} .card-p__acts button:hover,.card-p__acts a:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .card-p__acts svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5} .card-p__acts .is-on{background:var(--ink);color:#fff;border-color:var(--ink)} .card-p__body{padding:.95rem 1rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;flex:1} .card-p__brand{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} .card-p__title{font-family:var(--ff-body);font-size:.92rem;font-weight:500;line-height:1.35;margin:0} .card-p__title a::after{content:"";position:absolute;inset:0;z-index:1} .card-p__rating{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--muted)} .card-p__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding-top:.5rem} .card-p .price{font-family:var(--ff-mono);font-size:.92rem;font-weight:500;color:var(--ink)} .card-p .price del{color:var(--muted-2);font-size:.78rem;margin-right:.35rem;font-weight:400} .card-p .price ins{text-decoration:none;color:var(--err)} .card-p__stock{font-size:.68rem;color:var(--muted)} .card-p__stock.is-low{color:var(--warn)} .card-p__stock.is-out{color:var(--err)} .card-p__add{position:relative;z-index:2;margin-top:.7rem} .card-p__add .btn{width:100%} .moov-stars{--pct:0;display:inline-block;position:relative;font-family:var(--ff-body);letter-spacing:.08em;color:var(--gold-2)} .moov-stars::before{content:"★★★★★";color:var(--bg-3)} .moov-stars::after{content:"★★★★★";position:absolute;inset:0;width:calc(var(--pct)*1%);overflow:hidden;color:var(--gold-2)} /* ========================================================================== 9. Boutique : filtres + toolbar ========================================================================== */ .shop-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start} .shop-side{position:sticky;top:calc(var(--bar-h) + 78px);display:grid;gap:1.5rem} @media (max-width:900px){.shop-layout{grid-template-columns:1fr}} /* les facettes mobiles : section 29 */ .facet{border-bottom:1px solid var(--line-2);padding-bottom:1.1rem} .facet>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center; font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3rem 0} .facet>summary::-webkit-details-marker{display:none} .facet>summary::after{content:"+";font-family:var(--ff-mono);color:var(--muted)} .facet[open]>summary::after{content:"–"} .facet__body{display:grid;gap:.45rem;padding-top:.75rem} .facet label{display:flex;align-items:center;gap:.55rem;font-size:.85rem;cursor:pointer;color:var(--muted)} .facet label:hover{color:var(--ink)} .facet input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px} .facet .count{margin-left:auto;font-family:var(--ff-mono);font-size:.68rem;color:var(--muted-2)} .swatches{display:flex;flex-wrap:wrap;gap:.4rem} .swatch{width:26px;height:26px;border-radius:var(--pill);border:1px solid var(--line);cursor:pointer;position:relative} .swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--ink)} .shop-toolbar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between; padding-bottom:1.1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line-2)} .shop-toolbar .woocommerce-result-count{margin:0;font-size:.8rem;color:var(--muted)} .woocommerce-ordering select,.shop-toolbar select{border:1px solid var(--line);background:var(--card); border-radius:var(--pill);padding:.5rem 2rem .5rem 1rem;font-size:.82rem;min-height:40px; appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7480' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .6rem center;background-size:16px} .active-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem} .active-filters button{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border:1px solid var(--line); background:var(--card);border-radius:var(--pill);font-size:.75rem;cursor:pointer} .active-filters button:hover{border-color:var(--ink)} .woocommerce-pagination ul{display:flex;gap:.35rem;list-style:none;padding:0;margin:2.5rem 0 0;justify-content:center} .woocommerce-pagination a,.woocommerce-pagination span{display:grid;place-items:center;min-width:40px;height:40px; border:1px solid var(--line);border-radius:var(--pill);font-family:var(--ff-mono);font-size:.8rem} .woocommerce-pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)} /* ========================================================================== 10. Fiche produit ========================================================================== */ .pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:start} @media (max-width:900px){.pdp{grid-template-columns:1fr}} .pdp__gallery{display:grid;grid-template-columns:78px 1fr;gap:.75rem;position:sticky;top:calc(var(--bar-h) + 86px)} @media (max-width:900px){.pdp__gallery{position:static;grid-template-columns:1fr}} .pdp__thumbs{display:grid;gap:.55rem;align-content:start} @media (max-width:900px){.pdp__thumbs{grid-auto-flow:column;grid-auto-columns:70px;overflow-x:auto;order:2}} .pdp__thumb{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--bg-2);cursor:pointer;padding:0;aspect-ratio:1} .pdp__thumb[aria-current=true]{border-color:var(--ink)} .pdp__thumb img{width:100%;height:100%;object-fit:cover} .pdp__stage{position:relative;background:var(--bg-2);border-radius:var(--r);overflow:hidden;aspect-ratio:1} .pdp__stage img,.pdp__stage video{width:100%;height:100%;object-fit:cover} .pdp__stage .tag{position:absolute;top:.8rem;left:.8rem;z-index:2} .pdp__zoom{position:absolute;bottom:.8rem;right:.8rem;z-index:2;width:38px;height:38px;border-radius:var(--pill); background:rgba(255,255,255,.92);border:1px solid var(--line-2);display:grid;place-items:center;cursor:zoom-in} .pdp__zoom svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.5} .pdp__brand{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem} .pdp h1{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:.35rem} .pdp__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.25rem;font-size:.82rem;color:var(--muted)} .pdp__price{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.4rem} .pdp__price .price{font-family:var(--ff-mono);font-size:1.7rem;font-weight:500} .pdp__price del{color:var(--muted-2);font-size:1rem} .pdp__price ins{text-decoration:none;color:var(--err)} .pdp__unit{font-size:.75rem;color:var(--muted-2);margin-bottom:1.25rem} .pdp__short{color:var(--muted);margin-bottom:1.5rem;font-size:.95rem} .pdp__opt{margin-bottom:1.25rem} .pdp__opt>span{display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem} .pdp__opt .swatches .swatch{width:34px;height:34px} .opt-pills{display:flex;flex-wrap:wrap;gap:.45rem} .opt-pills button{padding:.55rem 1.05rem;border:1px solid var(--line);background:var(--card);border-radius:var(--pill); font-size:.82rem;cursor:pointer;min-height:42px} .opt-pills button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)} .opt-pills button[disabled]{opacity:.35;text-decoration:line-through;cursor:not-allowed} .qty-row{display:flex;gap:.6rem;align-items:stretch;margin-bottom:.8rem} .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--pill);overflow:hidden;background:var(--card)} .qty button{width:44px;height:48px;border:0;background:transparent;cursor:pointer;font-size:1.1rem;color:var(--muted)} .qty button:hover{color:var(--ink)} .qty input{width:44px;height:48px;border:0;text-align:center;font-family:var(--ff-mono);font-size:.9rem;background:transparent;-moz-appearance:textfield} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .pdp__stockline{display:flex;align-items:center;gap:.5rem;font-size:.82rem;margin-bottom:1.25rem} .dot{width:8px;height:8px;border-radius:var(--pill);background:var(--ok);flex:0 0 8px} .dot--low{background:var(--warn)}.dot--out{background:var(--err)} .pdp__reassure{display:grid;gap:.6rem;padding:1.1rem 1.25rem;background:var(--bg-2);border-radius:var(--r);margin-bottom:1.5rem} .pdp__reassure div{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--muted)} .pdp__reassure svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--gold);fill:none;stroke-width:1.5;margin-top:2px} .pdp__acc{border-top:1px solid var(--line-2)} .pdp__acc details{border-bottom:1px solid var(--line-2)} .pdp__acc summary{list-style:none;cursor:pointer;padding:1.05rem 0;display:flex;justify-content:space-between;align-items:center; font-size:.85rem;font-weight:600;letter-spacing:.06em} .pdp__acc summary::-webkit-details-marker{display:none} .pdp__acc summary::after{content:"+";font-family:var(--ff-mono);color:var(--muted);font-size:1.1rem} .pdp__acc details[open] summary::after{content:"–"} .pdp__acc .acc-body{padding-bottom:1.15rem;font-size:.9rem;color:var(--muted)} .pdp__acc .acc-body ul{padding-left:1.1rem;margin:0 0 .8rem} .pdp__acc .acc-body li{margin-bottom:.35rem} .pdp__acc .acc-body[dir=rtl]{text-align:right;font-family:"Noto Naskh Arabic",var(--ff-body)} /* ========================================================================== 11. Panier latéral / drawer ========================================================================== */ .drawer{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none} .drawer[data-open="1"]{visibility:visible;pointer-events:auto} .drawer__scrim{position:absolute;inset:0;background:rgba(1,32,42,.42);opacity:0;transition:opacity .3s} .drawer[data-open="1"] .drawer__scrim{opacity:1} .drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--card); display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg)} .drawer[data-open="1"] .drawer__panel{transform:none} .drawer--left .drawer__panel{right:auto;left:0;transform:translateX(-100%)} .drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.35rem;border-bottom:1px solid var(--line-2)} .drawer__head h3{margin:0;font-size:1.25rem} .drawer__body{flex:1;overflow-y:auto;padding:1.1rem 1.35rem} .drawer__foot{border-top:1px solid var(--line-2);padding:1.15rem 1.35rem;display:grid;gap:.8rem;background:var(--bg)} .mini-line{display:grid;grid-template-columns:64px 1fr auto;gap:.85rem;padding:.9rem 0;border-bottom:1px solid var(--line-2)} .mini-line img{width:64px;height:64px;object-fit:cover;border-radius:var(--r);background:var(--bg-2)} .mini-line__t{font-size:.85rem;font-weight:500;line-height:1.35} .mini-line__v{font-size:.72rem;color:var(--muted-2)} .mini-line__p{font-family:var(--ff-mono);font-size:.82rem} .mini-line__rm{background:none;border:0;color:var(--muted-2);cursor:pointer;font-size:.72rem;text-decoration:underline;padding:0;text-align:left} .mini-line__rm:hover{color:var(--err)} .totals-row{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted)} .totals-row--big{font-size:1.05rem;color:var(--ink);font-weight:500} .totals-row .num{font-family:var(--ff-mono)} .freeship{background:var(--bg-2);border-radius:var(--r);padding:.75rem .9rem;font-size:.78rem;display:grid;gap:.5rem} .freeship__bar{height:4px;background:var(--bg-3);border-radius:var(--pill);overflow:hidden} .freeship__bar i{display:block;height:100%;background:var(--gold-2);transition:width .4s} /* ========================================================================== 12. Recherche live ========================================================================== */ .search-panel{position:fixed;inset:0;z-index:85;background:rgba(250,248,245,.97);backdrop-filter:blur(8px); visibility:hidden;opacity:0;transition:opacity .22s,visibility .22s;overflow-y:auto} .search-panel[data-open="1"]{visibility:visible;opacity:1} .search-panel__in{max-width:var(--wrap);margin-inline:auto;padding:clamp(1.5rem,4vw,3rem) var(--gut)} .search-field{display:flex;align-items:center;gap:.85rem;border-bottom:2px solid var(--ink);padding-bottom:.85rem} .search-field input{flex:1;border:0;background:transparent;font-family:var(--ff-display);font-size:clamp(1.5rem,4vw,2.6rem);padding:0} .search-field input:focus{outline:0} .search-field svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.5} .search-hint{font-size:.78rem;color:var(--muted);margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center} .search-hint button{border:1px solid var(--line);background:transparent;border-radius:var(--pill);padding:.25rem .7rem;font-size:.75rem;cursor:pointer} .search-hint button:hover{border-color:var(--ink)} .search-corr{margin-top:1.25rem;font-size:.9rem;color:var(--muted)} .search-corr b{color:var(--ink)} .search-results{margin-top:1.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:1.25rem} .search-empty{margin-top:2rem;color:var(--muted)} /* ========================================================================== 13. Assistant de vente ========================================================================== */ .assist-fab{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:75; display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.15rem;border:0;border-radius:var(--pill); background:var(--ink);color:#fff;box-shadow:var(--shadow-lg);cursor:pointer;font-size:.85rem} .assist-fab svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5} .assist-fab .pulse{width:7px;height:7px;border-radius:var(--pill);background:var(--gold-2)} /* Sur téléphone, la pilule « Une question ? » couvrait le contenu (boutons du diagnostic compris) : elle devient une pastille ronde, libellé gardé pour les lecteurs d'écran. */ @media (max-width:760px){ .assist-fab{width:52px;height:52px;padding:0;justify-content:center;gap:0} .assist-fab .pulse{position:absolute;top:9px;right:10px} .assist-fab__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} } .assist{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:76; width:min(390px,calc(100vw - 2rem));height:min(620px,calc(100vh - 2rem));background:var(--card); border-radius:var(--r-lg);box-shadow:var(--shadow-lg);display:none;flex-direction:column;overflow:hidden} .assist[data-open="1"]{display:flex} .assist__head{background:var(--ink);color:#fff;padding:.95rem 1.1rem;display:flex;align-items:center;gap:.7rem} .assist__head b{font-size:.9rem;font-weight:500} .assist__head small{display:block;font-size:.68rem;color:rgba(255,255,255,.62)} .assist__head button{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.75);cursor:pointer;font-size:1.3rem;line-height:1;padding:.2rem .4rem} .assist__body{flex:1;overflow-y:auto;padding:1.1rem;display:grid;gap:.75rem;align-content:start;background:var(--bg)} .msg{max-width:86%;padding:.7rem .95rem;border-radius:var(--r-lg);font-size:.85rem;line-height:1.5;white-space:pre-wrap} .msg--bot{background:var(--card);border:1px solid var(--line-2);justify-self:start;border-bottom-left-radius:2px} .msg--me{background:var(--ink);color:#fff;justify-self:end;border-bottom-right-radius:2px} .msg[dir=rtl]{text-align:right;font-family:"Noto Naskh Arabic",var(--ff-body)} .msg--typing{display:inline-flex;gap:.25rem;padding:.85rem 1rem} .msg--typing i{width:6px;height:6px;border-radius:var(--pill);background:var(--muted-2);animation:blink 1.2s infinite} .msg--typing i:nth-child(2){animation-delay:.18s}.msg--typing i:nth-child(3){animation-delay:.36s} @keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}} .assist-card{display:grid;grid-template-columns:60px 1fr;gap:.75rem;background:var(--card);border:1px solid var(--line-2); border-radius:var(--r);padding:.7rem;justify-self:start;max-width:92%;width:100%} .assist-card img{width:60px;height:60px;object-fit:cover;border-radius:var(--r);background:var(--bg-2)} .assist-card b{font-size:.82rem;font-weight:500;display:block;line-height:1.3} .assist-card .price{font-family:var(--ff-mono);font-size:.82rem;display:block;margin:.2rem 0} .assist-card .st{font-size:.68rem;color:var(--ok)} .assist-card .row{display:flex;gap:.4rem;margin-top:.45rem} .assist__sugg{display:flex;gap:.4rem;padding:.6rem 1.1rem;overflow-x:auto;background:var(--bg);border-top:1px solid var(--line-2)} .assist__sugg button{white-space:nowrap;border:1px solid var(--line);background:var(--card);border-radius:var(--pill); padding:.4rem .8rem;font-size:.75rem;cursor:pointer} .assist__sugg button:hover{border-color:var(--ink)} .assist__form{display:flex;gap:.5rem;padding:.75rem 1.1rem 1.1rem;border-top:1px solid var(--line-2);background:var(--card)} .assist__form input{flex:1;border:1px solid var(--line);border-radius:var(--pill);padding:.6rem 1rem;font-size:.85rem;min-height:42px} .assist__form button{width:42px;height:42px;border-radius:var(--pill);border:0;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center} .assist__form svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6} .escalate{background:var(--warn-soft);border:1px solid rgba(180,83,9,.2);border-radius:var(--r);padding:.7rem .9rem;font-size:.78rem;color:#7A3A05} /* ========================================================================== 14. Formulaires WooCommerce (panier, commande, compte) ========================================================================== */ .woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{ border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:.9rem 1.1rem;margin-bottom:1.25rem;font-size:.88rem;list-style:none} .woocommerce-message{border-left:3px solid var(--ok)} .woocommerce-info{border-left:3px solid var(--ia)} .woocommerce-error{border-left:3px solid var(--err)} .form-row{display:grid;gap:.4rem;margin-bottom:1rem} .form-row label,.woocommerce-input-wrapper>label{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink)} input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],select,textarea,.input-text{ width:100%;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:.72rem .9rem;font-size:.9rem;min-height:46px} textarea{min-height:110px;resize:vertical} input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(4,48,63,.08)} .required{color:var(--err)} table.shop_table{width:100%;border-collapse:collapse;font-size:.88rem} table.shop_table th,table.shop_table td{padding:.9rem .6rem;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:middle} table.shop_table th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .cart_totals,.shop_table.order_details{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:1.25rem} .coupon{display:flex;gap:.5rem;flex-wrap:wrap} .coupon .input-text{max-width:230px} .wc_payment_methods{list-style:none;padding:0;margin:0 0 1.25rem;display:grid;gap:.6rem} .wc_payment_method{border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.05rem;background:var(--card)} .wc_payment_method>label{font-weight:500;display:flex;align-items:center;gap:.6rem;cursor:pointer} .payment_box{font-size:.82rem;color:var(--muted);padding-top:.6rem;margin-top:.6rem;border-top:1px solid var(--line-2)} /* ========================================================================== 15. Blocs éditoriaux (accueil) ========================================================================== */ .cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(.75rem,1.6vw,1.25rem)} .cat-card{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--bg-3)} .cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)} .cat-card:hover img{transform:scale(1.05)} .cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(1,32,42,.72),rgba(1,32,42,.05) 55%)} .cat-card__t{position:absolute;left:1.15rem;right:1.15rem;bottom:1.15rem;z-index:2;color:#fff} .cat-card__t b{font-family:var(--ff-display);font-size:1.6rem;font-weight:400;display:block} .cat-card__t span{font-size:.75rem;color:rgba(255,255,255,.75)} .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(1.5rem,4vw,4rem);align-items:center} .split img{border-radius:var(--r);width:100%} .quote{font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.35;max-width:22ch} .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;text-align:center} .stat-row b{display:block;font-family:var(--ff-mono);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:500;color:var(--gold-2)} /* Enfant direct : sans le « > », cette règle attrapait aussi le logé DANS le , et le chiffre tombait à .78rem pendant que « 24 h », simple texte, gardait ses 2,6rem. */ .stat-row>div>span{font-size:.78rem;color:rgba(255,255,255,.68)} .marquee{overflow:hidden;background:var(--ink);color:#fff;padding:.85rem 0;white-space:nowrap} .marquee__t{display:inline-block;animation:slide 34s linear infinite;font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase} .marquee__t span{padding-inline:1.6rem;color:rgba(255,255,255,.66)} .marquee__t span b{color:var(--gold-2);font-weight:500} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:var(--mv-space-8);overflow-x:auto; scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin} .rail>*{scroll-snap-align:start} .rail::-webkit-scrollbar{height:4px} .rail::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:var(--pill)} .rail-nav{display:flex;gap:.4rem} .rail-nav button{width:40px;height:40px;border-radius:var(--pill);border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center} .rail-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .rail-nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5} .ugc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:.75rem} .ugc figure{margin:0;position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--bg-3)} .ugc img,.ugc video{width:100%;height:100%;object-fit:cover} .ugc figcaption{position:absolute;left:.6rem;bottom:.6rem;z-index:2} .moov-js .reveal{opacity:0;transform:translateY(18px)} .moov-js .reveal.is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} @media (prefers-reduced-motion:reduce){.moov-js .reveal{opacity:1;transform:none}} /* ========================================================================== 16. Footer ========================================================================== */ .site-footer{background:var(--ink-2);color:rgba(255,255,255,.7);margin-top:clamp(3rem,7vw,6rem);font-size:.85rem} .footer-top{display:grid;grid-template-columns:1.4fr repeat(auto-fit,minmax(140px,1fr));gap:clamp(1.75rem,4vw,3rem); max-width:var(--wrap);margin-inline:auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gut)} .footer-top h4{color:#fff;margin-bottom:1rem;font-size:.7rem} .footer-top ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .footer-top a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .footer-brand .brand__name{color:#fff} .footer-brand p{max-width:36ch;margin-top:1rem} .news{display:flex;gap:.5rem;margin-top:1.25rem;max-width:340px} .news input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff} .news input::placeholder{color:rgba(255,255,255,.4)} .pay-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem} .pay-row span{border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:.3rem .6rem;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em} .footer-bottom{border-top:1px solid rgba(255,255,255,.1)} .footer-bottom__in{max-width:var(--wrap);margin-inline:auto;padding:1.25rem var(--gut); display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-size:.75rem} /* ========================================================================== 17. Sélecteurs devise / langue ========================================================================== */ .switcher{display:inline-flex;border:1px solid var(--line);border-radius:var(--pill);overflow:hidden;background:var(--card)} .switcher button{border:0;background:transparent;padding:.35rem .7rem;font-family:var(--ff-mono);font-size:.68rem; letter-spacing:.08em;cursor:pointer;color:var(--muted);min-height:34px} .switcher button[aria-pressed=true]{background:var(--ink);color:#fff} .site-header .switcher{margin-right:.25rem} @media (max-width:560px){.site-header .switcher{display:none}} body.rtl-preview .pdp__short,body.rtl-preview .acc-body{direction:rtl;text-align:right} /* ========================================================================== 18. Barre mobile collante ========================================================================== */ .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.6rem;padding:.7rem var(--gut); background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line-2)} @media (max-width:760px){body.has-mobile-bar .mobile-bar{display:flex}body.has-mobile-bar{padding-bottom:78px} .assist-fab,.assist{bottom:calc(78px + .75rem)}} .mobile-bar .price{font-family:var(--ff-mono);font-size:.95rem;align-self:center;white-space:nowrap} .mobile-bar .btn{flex:1} /* ========================================================================== 19. Divers ========================================================================== */ .breadcrumb{font-size:.75rem;color:var(--muted);padding-block:1.15rem;display:flex;gap:.4rem;flex-wrap:wrap} .breadcrumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .page-hero{background:var(--bg-2);padding-block:clamp(2rem,5vw,3.5rem);text-align:center;border-bottom:1px solid var(--line-2)} .page-hero p{max-width:56ch;margin-inline:auto;color:var(--muted)} .entry-content{font-size:1rem;line-height:1.75} .entry-content h2{margin-top:2rem} .entry-content a{text-decoration:underline;text-underline-offset:3px} .notice-demo{background:var(--ia-soft);border:1px dashed rgba(59,99,216,.35);border-radius:var(--r); padding:.85rem 1.1rem;font-size:.82rem;color:#1F3B99;margin-bottom:1.25rem} .wc-block-components-sidebar-layout{gap:clamp(1.5rem,3vw,3rem)} .wc-block-cart,.wc-block-checkout{font-family:var(--ff-body)} .woocommerce-store-notice{display:none!important} /* ========================================================================== 20. Neutralisation des mises en page WooCommerce d'origine ========================================================================== */ .woocommerce ul.products,ul.products{display:grid!important;gap:clamp(1rem,2vw,1.75rem);margin:0;padding:0;list-style:none; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))} .woocommerce ul.products li.product,ul.products li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important} .woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important} .woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{float:none;margin:0} .woocommerce-page .woocommerce{max-width:none} .woocommerce div.product,.woocommerce #content div.product{float:none} .shop-head{margin-bottom:clamp(1.5rem,3vw,2.5rem)} .shop-head .eyebrow{margin-bottom:.6rem} .shop-head h1{margin-bottom:.35rem} .woocommerce ul.products li.product .price,.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-family:var(--ff-mono);font-weight:500} .woocommerce ul.products li.product .price del,.woocommerce div.product p.price del{color:var(--muted-2);font-weight:400} .woocommerce ul.products li.product .price ins,.woocommerce div.product p.price ins{color:var(--err);text-decoration:none;font-weight:500} .woocommerce ul.products li.product h3,.woocommerce ul.products li.product .card-p__title{font-size:var(--mv-text-base)} .woocommerce ul.products li.product a img{margin:0} .woocommerce .star-rating{display:none} /* Icônes dans les boutons */ .btn svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.5} .btn{white-space:nowrap} /* Variations */ .variations select{min-width:min(260px,100%)} .woocommerce div.product form.cart .button.disabled, form.cart .single_add_to_cart_button.disabled{background:var(--bg-3);color:var(--muted);border-color:transparent} /* Favoris YITH : on force la taille de l'icône */ .yith-wcwl-add-to-wishlist svg,.yith-wcwl-add-button svg,.card-p__acts .yith-wcwl-add-to-wishlist svg{width:17px;height:17px} .pdp__info .btn{max-width:100%} .single_add_to_cart_button.is-loading{opacity:.6;pointer-events:none} /* ========================================================================== 21. Boutons WooCommerce — on reprend la main sur les couleurs d'origine ========================================================================== */ .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce #respond input#submit.alt, .woocommerce div.product form.cart .button,.woocommerce-page a.button,.woocommerce-page button.button{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:48px;padding:.85rem 1.6rem;border:1px solid transparent;border-radius:var(--pill); background-color:var(--ink);color:#fff;font-size:.9rem;font-weight:500;line-height:1.2; text-transform:none;letter-spacing:.02em;transition:background-color .2s} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover, .woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover, .woocommerce #respond input#submit:hover{background-color:var(--ink-3);color:#fff} .woocommerce a.button.btn--ghost,.woocommerce button.button.btn--ghost{background-color:transparent;color:var(--ink);border-color:var(--line)} .woocommerce a.button.btn--ghost:hover,.woocommerce button.button.btn--ghost:hover{background-color:var(--ink);color:#fff} .woocommerce a.button.btn--sm,.woocommerce button.button.btn--sm{min-height:38px;padding:.5rem 1.05rem;font-size:.8rem} .woocommerce .button.disabled,.woocommerce .button:disabled,.woocommerce .button:disabled[disabled], .woocommerce div.product form.cart .button.disabled{background-color:var(--bg-3);color:var(--muted);opacity:1} .woocommerce .button.loading::after,.woocommerce .button.added::after{display:none} .woocommerce-message,.woocommerce-info{background:var(--card)} .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none} .woocommerce form .form-row label{display:block} .woocommerce .quantity .qty{border:0;background:transparent} /* ========================================================================== 22. Panier et commande — mise en page deux colonnes ========================================================================== */ .woocommerce-checkout form.checkout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.5rem,4vw,3.5rem);align-items:start} @media (max-width:900px){.woocommerce-checkout form.checkout{grid-template-columns:1fr}} .woocommerce-checkout #customer_details{grid-column:1} .woocommerce-checkout #order_review_heading,.woocommerce-checkout #order_review{grid-column:2} @media (max-width:900px){.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading,.woocommerce-checkout #order_review{grid-column:1}} .woocommerce-checkout #order_review_heading{margin:0 0 1rem;font-size:1.35rem} .woocommerce-checkout #order_review{position:sticky;top:calc(var(--bar-h) + 88px); background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:1.35rem} @media (max-width:900px){.woocommerce-checkout #order_review{position:static}} .woocommerce-checkout h3{font-size:1.35rem;margin-bottom:1rem} .woocommerce-checkout .col2-set{display:grid;gap:1.5rem} .woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{width:auto;float:none} #order_review .shop_table{margin-bottom:1rem} #order_review .shop_table tfoot th{font-size:.85rem;text-transform:none;letter-spacing:0;color:var(--ink)} #order_review .order-total th,#order_review .order-total td{font-size:1.05rem;font-weight:500;border-bottom:0} #place_order{width:100%} .woocommerce-shipping-methods{list-style:none;margin:0;padding:0;display:grid;gap:.4rem} .woocommerce-shipping-methods label{font-weight:400;font-size:.85rem} .woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper{display:grid;gap:0} .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none} @media (min-width:600px){ .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr 1fr;gap:0 1rem} .woocommerce-billing-fields__field-wrapper .form-row-wide{grid-column:1/-1} } /* Panier */ .woocommerce-cart-form{margin-bottom:2rem} .woocommerce-cart .cart-collaterals{display:grid;grid-template-columns:1fr minmax(0,380px);gap:2rem;align-items:start} @media (max-width:900px){.woocommerce-cart .cart-collaterals{grid-template-columns:1fr}} .woocommerce-cart .cart_totals{grid-column:2} @media (max-width:900px){.woocommerce-cart .cart_totals{grid-column:1}} .woocommerce-cart .cross-sells{grid-column:1} .woocommerce-cart table.cart img{width:72px;border-radius:var(--r)} .woocommerce-cart .product-remove a{color:var(--muted-2);font-size:1.2rem;text-decoration:none} .woocommerce-cart .product-remove a:hover{color:var(--err)} .woocommerce-cart .actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;padding-top:1rem} .woocommerce-cart .cart_totals h2{font-size:1.35rem} /* Espace client */ .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem} .woocommerce-account .woocommerce-MyAccount-navigation a{display:block;padding:.6rem .9rem;border-radius:var(--r);font-size:.88rem} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation a:hover{background:var(--bg-2)} .woocommerce-account .woocommerce-MyAccount-navigation{float:none;width:auto} .woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto} @media (min-width:900px){ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content{display:block} .woocommerce-account .woocommerce{display:grid;grid-template-columns:230px minmax(0,1fr);gap:2.5rem;align-items:start} } .page-hero--slim{padding-block:clamp(1.25rem,3vw,2rem);background:transparent;border-bottom:0;text-align:left} .page-hero--slim h1{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:0} /* Commande : le récapitulatif reste en haut de la colonne de droite */ .woocommerce-checkout form.checkout{grid-template-rows:auto 1fr} .woocommerce-checkout #customer_details{grid-column:1;grid-row:1/span 2} .woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1} .woocommerce-checkout #order_review{grid-column:2;grid-row:2;align-self:start} @media (max-width:900px){ .woocommerce-checkout form.checkout{grid-template-rows:none} .woocommerce-checkout #customer_details,.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review{grid-column:1;grid-row:auto} } .woocommerce-checkout #customer_details .col2-set{grid-template-columns:1fr} .woocommerce-checkout .woocommerce-additional-fields{margin-top:1.5rem} .woocommerce-checkout .woocommerce-additional-fields h3{font-size:1rem} .payment_box,.woocommerce-checkout #payment div.payment_box{background:var(--bg-2);color:var(--muted);border-radius:var(--r)} .payment_box::before,.woocommerce-checkout #payment div.payment_box::before{display:none} .woocommerce-checkout #payment{background:transparent;border-radius:0;padding:0} .woocommerce-checkout #payment ul.payment_methods{border-bottom:0;padding:0} .woocommerce-checkout #payment div.form-row{padding:1rem 0 0} .woocommerce-privacy-policy-text{font-size:.78rem;color:var(--muted)} .assist__head svg{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:1.5} .assist__head span{min-width:0} .assist-card .row .btn{flex:1;min-height:34px;padding:.4rem .8rem;font-size:.75rem} @media (min-width:1100px){.cat-grid{grid-template-columns:repeat(5,1fr)}} /* ========================================================================== 23. Application du design system MOOV Vitrine (variante sobre) -------------------------------------------------------------------------- Ce bloc corrige ce que le simple alias de tokens ne peut pas faire : les formes rondes héritées, les ombres dans le flux, et les endroits où l'ancien accent doré tenait lieu d'action. ========================================================================== */ /* --- Exceptions au rayon : ce qui doit rester rond ---------------------- */ .icon-btn,.icon-btn__count,.dot,.assist-fab,.assist-fab .pulse,.msg--typing i, .pdp__zoom,.rail-nav button,.swatch,.card-p__acts button,.card-p__acts a, .assist__form button,.rail::-webkit-scrollbar-thumb, .card-p__acts .yith-wcwl-add-to-wishlist-button{border-radius:var(--round)} .icon-btn__count{background:var(--mv-action);color:var(--mv-action-text)} /* --- Boutons : l'encre est la seule action pleine ----------------------- */ .btn{background:var(--mv-action);color:var(--mv-action-text); border-radius:var(--mv-r-xs);letter-spacing:var(--mv-tracking-tight)} .btn:hover{background:var(--mv-action-hover)} .btn:active{transform:none} .btn--ghost{background:transparent;color:var(--mv-text);border-color:var(--mv-border-strong)} .btn--ghost:hover{background:var(--mv-action);color:var(--mv-action-text);border-color:var(--mv-action)} /* L'ancienne variante dorée n'existe plus : sur fond encre, c'est le blanc qui porte l'action. */ .btn--gold,.btn--light{background:var(--mv-white);color:var(--mv-text);border-color:var(--mv-white)} .btn--gold:hover,.btn--light:hover{background:var(--mv-neutral-100);color:var(--mv-text)} .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt, .woocommerce input.button.alt,.woocommerce #respond input#submit.alt, .woocommerce div.product form.cart .button,form.cart .single_add_to_cart_button{ background-color:var(--mv-action);color:var(--mv-action-text);border-radius:var(--mv-r-xs)} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover, .woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,.woocommerce #respond input#submit:hover, form.cart .single_add_to_cart_button:hover{background-color:var(--mv-action-hover)} /* Sur la fiche produit, l'action prend toute la colonne. */ form.cart .single_add_to_cart_button{flex:1} .qty-row,form.cart>.quantity+.single_add_to_cart_button{width:100%} /* --- Aucune ombre dans le flux ------------------------------------------ */ .card-p,.card-p:hover,.usp,.cart_totals,.shop_table.order_details, .woocommerce-checkout #order_review,.moov-diag__item,.assist-card, .pdp__reassure,.freeship,.moov-module{box-shadow:none} .site-header.is-stuck{box-shadow:var(--mv-shadow-header)} .drawer__panel,.qv-modal__panel,.assist{box-shadow:var(--mv-shadow-float)} /* --- Carte produit : le packshot est la carte ---------------------------- */ .card-p{background:transparent;border:0;border-radius:0;transition:none} .card-p:hover{transform:none} .card-p__media{aspect-ratio:var(--mv-ratio-product);background:var(--mv-surface); border-radius:0;margin-bottom:var(--mv-space-3)} .card-p:hover .card-p__media img.is-primary{transform:scale(1.03)} .card-p__body{padding:0;gap:var(--mv-space-1)} .card-p__brand{letter-spacing:var(--mv-tracking-eyebrow);color:var(--mv-text-muted)} .card-p__title{font-size:var(--mv-text-base);line-height:1.4} .card-p__foot{padding-top:var(--mv-space-1)} .card-p .price,.woocommerce ul.products li.product .price{ font-family:var(--mv-font-sans);font-variant-numeric:tabular-nums; font-size:var(--mv-text-sm);font-weight:var(--mv-weight-medium)} .card-p__add{margin-top:var(--mv-space-2)} /* Cartes plus larges et davantage aerees : a 200 px le packshot etait un timbre-poste, et quatre colonnes serrees se lisaient comme un tableur. */ ul.products,.woocommerce ul.products{ grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mv-card-min,260px)),1fr))!important; gap:var(--mv-space-10) var(--mv-space-6)} @media (min-width:768px){ul.products,.woocommerce ul.products{gap:var(--mv-space-12) var(--mv-space-8)}} @media (min-width:1200px){ul.products,.woocommerce ul.products{--mv-card-min:300px}} /* --- Badges : angle droit, capitales, un seul par carte ----------------- */ .tag{border-radius:var(--mv-r-xs);letter-spacing:var(--mv-tracking-eyebrow); font-family:var(--mv-font-sans);height:22px;padding-inline:var(--mv-space-2)} .tag--new{background:var(--mv-action);color:var(--mv-action-text)} .tag--sale{background:var(--mv-accent);color:var(--mv-text-on-accent)} .tag--gold{background:var(--mv-surface-brand);color:var(--mv-text)} /* --- Étoiles : encre, pas or ------------------------------------------- */ .moov-stars{color:var(--mv-text)} .moov-stars::before{color:var(--mv-neutral-300)} .moov-stars::after{color:var(--mv-text)} /* --- Typographie ------------------------------------------------------- */ h1,h2,h3{letter-spacing:var(--mv-tracking-display);line-height:var(--mv-leading-tight)} h1{font-size:var(--mv-text-5xl)} h2{font-size:var(--mv-text-3xl)} h3{font-size:var(--mv-text-xl)} h4,.eyebrow,.card-p__brand,.pdp__brand,.brand__tag{ letter-spacing:var(--mv-tracking-eyebrow);font-family:var(--mv-font-sans)} .eyebrow{color:var(--mv-text-muted)} .num,.price,.pdp__price .price,.totals-row .num,.mini-line__p,.stat-row b{ font-family:var(--mv-font-sans);font-variant-numeric:tabular-nums} .pdp__price .price{font-size:var(--mv-text-xl);font-weight:var(--mv-weight-medium)} .woocommerce-Price-amount{font-variant-numeric:tabular-nums} /* --- Sections : papier ou blanc, rien d'autre --------------------------- */ .section--alt{background:var(--mv-surface)} .section--ink{background:var(--mv-surface-invert)} .stat-row b{color:var(--mv-neutral-300)} .marquee{background:var(--mv-surface-invert)} .marquee__t span b{color:var(--mv-neutral-300)} /* --- Rayons hérités ----------------------------------------------------- */ .cat-card,.cat-card img,.pdp__stage,.pdp__thumb,.mini-line img,.split img, .ugc figure,.moov-diag__item img,.assist-card img,.qv__media img, .woocommerce-cart table.cart img{border-radius:0} .freeship__bar{border-radius:var(--round)} .freeship__bar i{background:var(--mv-action)} /* --- Champs : angle droit, filet ---------------------------------------- */ input[type=text],input[type=email],input[type=tel],input[type=password], input[type=number],input[type=search],select,textarea,.input-text, .woocommerce-ordering select,.shop-toolbar select{border-radius:var(--mv-r-xs)} :focus-visible{outline:2px solid var(--mv-focus);outline-offset:2px} /* --- Bandeau promotionnel : encre, pas or ------------------------------- */ .promo-strip{background:var(--mv-surface-invert)} .promo-strip strong{color:var(--mv-neutral-300);font-family:var(--mv-font-sans)} /* --- Réassurance et icônes --------------------------------------------- */ .usp{border-block:1px solid var(--mv-border-soft);background:var(--mv-bg)} .usp__item svg,.pdp__reassure svg{stroke:var(--mv-text)} .pdp__reassure{background:var(--mv-bg-alt);border-radius:var(--mv-r-xs)} /* Le lien du média doit remplir la boîte, sinon la hauteur de l'image retombe sur sa taille intrinsèque et le ratio 3/4 laisse une bande vide. */ .card-p__media>a{display:block;width:100%;height:100%} .card-p__media img{width:100%;height:100%;object-fit:cover} /* Le marqueur IA n'est pas un badge commercial : il vit en bas à gauche, pour ne jamais entrer en concurrence avec « épuisé » ou « promo ». */ .card-p__ia{position:absolute;left:var(--mv-space-2);bottom:var(--mv-space-2);z-index:2} .tag--out{background:var(--mv-surface-sunk);color:var(--mv-text-muted)} /* ========================================================================== 16. Signature couture -------------------------------------------------------------------------- Ce que la variante COUTURE ajoute par-dessus le système : un corps de texte fin, un serif de titrage qui porte aussi les eyebrows, et des boutons en capitales espacées. Tout le reste vient déjà des tokens. ========================================================================== */ body{font-weight:var(--mv-weight-regular);letter-spacing:0} /* --- Les eyebrows passent au serif : c'est la marque de fabrique --------- */ .eyebrow,.card-p__brand,.pdp__brand,.brand__tag{ font-family:var(--mv-font-display);font-weight:400; text-transform:uppercase;letter-spacing:var(--mv-tracking-eyebrow)} .eyebrow{font-size:var(--mv-text-xs);color:var(--mv-text)} .section--ink .eyebrow{color:var(--mv-white)} /* h4 reste en sans : c'est un libellé de colonne, pas un titre de maison. */ h4{font-family:var(--mv-font-sans);font-weight:500} /* --- Boutons : capitales espacées, angle droit, cible 48 px -------------- */ .btn{text-transform:uppercase;font-size:var(--mv-text-xs); font-weight:500;letter-spacing:var(--mv-tracking-eyebrow); padding:1rem 2rem;min-height:48px} .btn--sm{padding:.7rem 1.25rem;min-height:44px} .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce .single_add_to_cart_button{ text-transform:uppercase;letter-spacing:var(--mv-tracking-eyebrow); font-size:var(--mv-text-xs);font-weight:500} /* --- Le prix : chiffres tabulaires, le barré en rouge signal ------------- */ del,del .woocommerce-Price-amount{color:var(--mv-text-subtle);text-decoration-thickness:1px} ins,ins .woocommerce-Price-amount{color:var(--mv-accent-text);text-decoration:none} /* --- Badges : encre sur blanc, filet. Le rouge reste au prix ------------- */ .tag{background:var(--mv-white);color:var(--mv-text); border:1px solid var(--mv-border-soft); text-transform:uppercase;letter-spacing:var(--mv-tracking-eyebrow); font-size:var(--mv-text-xs);font-weight:500;border-radius:0} .tag--sale{background:var(--mv-accent);color:var(--mv-text-on-accent);border-color:var(--mv-accent)} .tag--out{background:var(--mv-neutral-100);color:var(--mv-text-muted);border-color:var(--mv-border-soft)} /* --- Visuels produit : fond gris très clair, aucun filet ----------------- */ .card-p__media,.pdp__stage,.pdp__thumb,.qv__media{background:var(--mv-neutral-100)} /* --- Filets de section : un seul trait, jamais deux ---------------------- */ .section-head{border-bottom:0;padding-bottom:var(--mv-space-6)} /* --- Accessibilité : le focus doit rester lisible sur les deux fonds ----- */ :focus-visible{outline:2px solid var(--mv-focus);outline-offset:3px} .section--ink :focus-visible,.promo-strip :focus-visible, footer :focus-visible{outline-color:var(--mv-white)} /* --- Le bouton WooCommerce n'a pas toujours un ancêtre .woocommerce ------ */ .single_add_to_cart_button,button[name=add-to-cart]{ text-transform:uppercase;letter-spacing:var(--mv-tracking-eyebrow); font-size:var(--mv-text-xs);font-weight:500} /* --- Le thème porte déjà sa ligne de stock : celle de Woo se tait -------- */ .pdp .stock,.woocommerce-variation-availability .stock,p.stock{ color:var(--mv-text-subtle);font-size:var(--mv-text-sm);font-weight:400} .pdp .stock.out-of-stock,p.stock.out-of-stock{color:var(--mv-danger)} /* ========================================================================== 17. Sélecteur de teintes -------------------------------------------------------------------------- Une grille de pastilles au-dessus du bloc d'achat. Le remplacé : hors écran, jamais retiré du flux ni de la tabulation. */ .variations--replaced{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);white-space:nowrap} /* --- Fond blanc : les sections se séparent au filet ---------------------- */ .section--alt{background:var(--mv-bg);border-block:1px solid var(--mv-border-soft)} .page-hero{background:var(--mv-bg);border-bottom:1px solid var(--mv-border-soft)} .usp{background:var(--mv-bg)} /* Le bloc teinté des fiches développées suit la même règle. */ .story__block--tint{background:var(--mv-bg);box-shadow:none;clip-path:none; border-top:1px solid var(--mv-border-soft)} /* --- Lien vers la page complète, sous les résultats vivants ------------- */ .search-all{display:block;margin-top:var(--mv-space-4);padding-top:var(--mv-space-4); border-top:1px solid var(--mv-border-soft); font-size:var(--mv-text-xs);letter-spacing:var(--mv-tracking-eyebrow); text-transform:uppercase;text-decoration:underline;text-underline-offset:4px} /* --- Garde-fou : le corps de page est un bloc --------------------------- Sur la page de résultats de recherche (`/?s=…&post_type=product`), `body` se retrouvait calculé en `display:grid` à six colonnes : l'en-tête, le contenu et le pied passaient en colonnes de 223 px et la page devenait illisible. Le symptôme est reproductible en production comme en local, et disparaît dès que cette feuille est désactivée — mais aucune règle de ce fichier ne matche `body` selon le CSSOM. Faute d'avoir pu isoler l'origine, on déclare l'intention explicitement : `body` est un bloc, toujours. Si la cause est trouvée un jour, cette règle pourra tomber. --------------------------------------------------------------------- */ body{display:block!important} /* ========================================================================== 18. Mouvement -------------------------------------------------------------------------- Deux familles distinctes, et c'est la distinction qui manquait : · Les ENTRÉES, jouées une fois — au chargement pour ce qui est déjà à l'écran, à l'entrée dans la fenêtre pour le reste. Amplitude franche : en dessous de 24 px, personne ne voit rien. · Les CONTINUES, liées au défilement — parallaxe et redressement — qui ne concernent que ce qui entre par le bas. S'y ajoute le survol, qui est le seul mouvement qu'on déclenche soi-même et donc celui qu'on remarque le plus. ========================================================================== */ /* --- Entrées ------------------------------------------------------------ */ .moov-motion [data-rise], .moov-motion [data-stagger] > *{ opacity:0;transform:translateY(28px); transition:opacity .7s var(--mv-ease-out) var(--retard,0ms), transform .7s var(--mv-ease-out) var(--retard,0ms)} .moov-motion [data-rise][data-motion-in], .moov-motion [data-stagger][data-motion-in] > *{opacity:1;transform:none} /* Le visuel déjà présent au chargement entre par un fondu-échelle : il ne peut pas « arriver du bas », il est déjà là. */ .moov-motion [data-tilt][data-motion-load] > *{ opacity:0;transform:scale(.92) rotateX(10deg); transition:opacity .9s var(--mv-ease-out),transform .9s var(--mv-ease-out)} .moov-motion [data-tilt][data-motion-load][data-motion-in] > *{opacity:1;transform:none} /* --- Continues ---------------------------------------------------------- */ [data-tilt]{perspective:1200px} [data-tilt] > *{ transform:rotateX(var(--tilt,0deg)) scale(var(--tilt-scale,1)); transform-origin:50% 100%;will-change:transform} [data-parallax]{overflow:hidden} [data-parallax] img{transform:translate3d(0,var(--par,0),0) scale(1.14);will-change:transform} /* --- Survol : la carte produit ------------------------------------------ */ .card-p{transition:transform .45s var(--mv-ease-out),border-color .3s} .card-p:hover{transform:translateY(-6px);border-color:var(--mv-border)} .card-p__media img{transition:transform .9s var(--mv-ease-out),opacity .4s} .card-p:hover .card-p__media img{transform:scale(1.07)} /* Les actions de la carte montent avec elle au lieu d'apparaître d'un coup. */ .card-p__acts{opacity:0;transform:translateX(8px); transition:opacity .3s var(--mv-ease-out),transform .3s var(--mv-ease-out)} .card-p:hover .card-p__acts,.card-p:focus-within .card-p__acts{opacity:1;transform:none} /* --- Survol : les liens de navigation ----------------------------------- */ .nav a{position:relative} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform .4s var(--mv-ease-out)} .nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left} /* --- Appui : tout ce qui se clique s'enfonce un peu --------------------- */ .btn:active,.icon-btn:active,.shades__chip:active{transform:translateY(1px)} .btn{transition:background var(--mv-dur-base) var(--mv-ease-out), color var(--mv-dur-base) var(--mv-ease-out), border-color var(--mv-dur-base) var(--mv-ease-out), transform var(--mv-dur-instant) var(--mv-ease-out)} /* --- Sans JS, ou en mouvement réduit : tout est en place ---------------- */ html:not(.moov-motion) [data-rise], html:not(.moov-motion) [data-stagger] > *, html:not(.moov-motion) [data-tilt] > *{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ [data-tilt] > *,[data-parallax] img{transform:none} [data-rise],[data-stagger] > *{opacity:1!important;transform:none!important;transition:none} .card-p:hover{transform:none} .card-p:hover .card-p__media img{transform:none} } /* ========================================================================== 19. Corrections d'affichage ========================================================================== */ /* --- Panneau de recherche ----------------------------------------------- `.search-results` était une grille : la réponse AJAX renvoyant un `