@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); /* ========================================================================== AVATTO — Design system (Lot 1) -------------------------------------------------------------------------- Jetons de design + mode sombre. Derive des couleurs de marque reelles relevees sur le site le 12/08/2026 : violet primaire Woodmart : rgb(95,86,198) -> #5F56C6 orange alternatif : #fbbc34 Version "vive" : memes teintes, saturation augmentee. REGLE DU LOT 1 : le rendu en mode CLAIR ne change pas. On installe les jetons et le mode sombre ; le restylage viendra aux lots 2 et 3. ========================================================================== */ :root { /* --- Marque : violet --- */ --av-violet-50: #f0eeff; --av-violet-100: #ddd8ff; --av-violet-300: #a99fff; --av-violet-500: #6d5cff; /* vif, derive de #5F56C6 */ --av-violet-600: #5b4ae8; --av-violet-700: #4a3ac4; --av-violet-900: #2a2170; /* --- Marque : orange --- */ --av-orange-50: #fff7e8; --av-orange-100: #ffecc9; --av-orange-300: #ffce6b; --av-orange-400: #ffb43d; --av-orange-500: #ff9a1f; /* vif, derive de #fbbc34 */ --av-orange-600: #f08000; --av-orange-700: #c66500; /* --- Etats --- */ --av-success: #16a34a; --av-warning: #f59e0b; --av-danger: #dc2626; --av-info: #0284c7; /* --- Surfaces et texte (mode clair) --- */ --av-bg: #ffffff; --av-bg-subtle: #f7f7fa; --av-bg-raised: #ffffff; --av-border: #e4e4ec; --av-text: #1a1a24; --av-text-muted: #6b6b7b; --av-text-inverse: #ffffff; /* --- Degrades signature --- */ --av-gradient-brand: linear-gradient(135deg, var(--av-violet-500) 0%, var(--av-orange-500) 100%); --av-gradient-violet: linear-gradient(135deg, var(--av-violet-600) 0%, var(--av-violet-300) 100%); --av-gradient-glow: radial-gradient(circle at 50% 0%, rgb(109 92 255 / 22%) 0%, transparent 70%); /* --- Typographie --- */ --av-font-sans: "Inter", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --av-fs-xs: 0.75rem; --av-fs-sm: 0.875rem; --av-fs-base: 1rem; --av-fs-lg: 1.125rem; --av-fs-xl: 1.375rem; --av-fs-2xl: 1.75rem; --av-fs-3xl: 2.25rem; --av-fs-4xl: 3rem; --av-fs-hero: clamp(2.25rem, 5vw + 1rem, 4.5rem); --av-lh-tight: 1.15; --av-lh-base: 1.6; --av-tracking-tight: -0.02em; /* --- Rythme, rayons, ombres --- */ --av-space-1: 4px; --av-space-2: 8px; --av-space-3: 12px; --av-space-4: 16px; --av-space-6: 24px; --av-space-8: 32px; --av-space-12: 48px; --av-space-16: 64px; --av-space-24: 96px; --av-radius-sm: 6px; --av-radius: 12px; --av-radius-lg: 20px; --av-radius-full: 999px; --av-shadow-sm: 0 1px 2px rgb(16 16 32 / 6%); --av-shadow: 0 4px 16px rgb(16 16 32 / 8%); --av-shadow-lg: 0 12px 40px rgb(16 16 32 / 12%); --av-shadow-glow: 0 0 24px rgb(255 154 31 / 45%); /* --- Mouvement --- */ --av-ease: cubic-bezier(0.22, 1, 0.36, 1); --av-dur-fast: 150ms; --av-dur: 280ms; --av-dur-slow: 600ms; } /* ========================================================================== MODE SOMBRE Inerte tant que [data-theme="dark"] n'est pas pose sur . Le mode clair reste donc strictement identique a l'existant. ========================================================================== */ :root[data-theme="dark"] { --av-bg: #0f0f1a; --av-bg-subtle: #16162a; --av-bg-raised: #1e1e2e; --av-border: #2e2e3e; --av-text: #e8e8f0; --av-text-muted: #9ca3af; --av-text-inverse: #0f0f1a; --av-violet-500: #8b7cff; /* eclairci pour rester lisible sur fond sombre */ --av-orange-500: #ffab45; --av-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%); --av-shadow: 0 4px 16px rgb(0 0 0 / 45%); --av-shadow-lg: 0 12px 40px rgb(0 0 0 / 55%); /* Variables Woodmart remappees : c'est ce qui teinte reellement le theme */ --wd-text-color: #b8b8c8; --wd-link-color: #e8e8f0; --wd-entities-title-color: rgb(232 232 240); --wd-entities-title-color-hover: rgb(232 232 240 / 70%); --wd-main-bgcolor: #0f0f1a; } /* --- Surfaces principales en mode sombre --- */ :root[data-theme="dark"] body, :root[data-theme="dark"] .site-content, :root[data-theme="dark"] .main-page-wrapper { background-color: var(--av-bg); color: var(--av-text); } :root[data-theme="dark"] .whb-main-header, :root[data-theme="dark"] .whb-row, :root[data-theme="dark"] .site-footer, :root[data-theme="dark"] .footer-container { background-color: var(--av-bg-raised) !important; color: var(--av-text); } :root[data-theme="dark"] .product-grid-item, :root[data-theme="dark"] .wd-card, :root[data-theme="dark"] .widget, :root[data-theme="dark"] .cart-totals-inner, :root[data-theme="dark"] .woocommerce-checkout-review-order { background-color: var(--av-bg-raised); border-color: var(--av-border); color: var(--av-text); } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] .product-title, :root[data-theme="dark"] .wd-entities-title, :root[data-theme="dark"] .wd-entities-title a { color: var(--av-text); } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background-color: var(--av-bg-subtle); border-color: var(--av-border); color: var(--av-text); } /* Les images produit ne doivent jamais etre assombries */ :root[data-theme="dark"] img { filter: none; } /* ========================================================================== BASCULE CLAIR / SOMBRE ========================================================================== */ .av-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--av-border); border-radius: var(--av-radius-full); background: transparent; color: inherit; cursor: pointer; line-height: 1; transition: background-color var(--av-dur-fast) var(--av-ease), border-color var(--av-dur-fast) var(--av-ease), transform var(--av-dur-fast) var(--av-ease); } .av-theme-toggle:hover { background-color: rgb(109 92 255 / 12%); transform: translateY(-1px); } .av-theme-toggle:focus-visible { outline: 2px solid var(--av-violet-500); outline-offset: 2px; } .av-theme-toggle svg { width: 18px; height: 18px; display: block; } .av-theme-toggle .av-icon-moon { display: none; } :root[data-theme="dark"] .av-theme-toggle .av-icon-sun { display: none; } :root[data-theme="dark"] .av-theme-toggle .av-icon-moon { display: block; } /* Repli flottant si la bascule n'a pas pu etre inseree dans le header */ .av-theme-toggle--floating { position: fixed; right: 18px; bottom: 18px; z-index: 9999; background: var(--av-bg-raised); box-shadow: var(--av-shadow); } /* ========================================================================== ACCESSIBILITE — non negociable (regle epic-design) ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== CORRECTIF 12/08/2026 — bascule ecrasee par les styles de bouton Woodmart -------------------------------------------------------------------------- Diagnostic (protocole DevTools, sur la page d'accueil en production) : Woodmart applique a tout bouton du header builder `padding: 5px 20px`, un fond gris #f3f3f3, et supprime bordure + rayon. La boite fait 40px de large, les 40px de padding horizontal consomment toute la largeur, et le SVG est comprime a `width: 0px`. L'icone etait donc bien presente et bien coloree (#3e3e3e), mais large de zero : un carre gris vide a l'ecran. Les !important ci-dessous ne visent que les proprietes que Woodmart s'approprie sur les boutons du header — rien de plus. ========================================================================== */ .whb-column .av-theme-toggle, .site-header .av-theme-toggle, .av-theme-toggle { flex: 0 0 auto; box-sizing: border-box; width: 38px !important; height: 38px !important; min-width: 38px; padding: 0 !important; margin: 0 8px; background-color: transparent !important; border: 1px solid var(--av-border) !important; border-radius: var(--av-radius-full) !important; box-shadow: none !important; color: var(--av-text) !important; } .whb-column .av-theme-toggle svg, .av-theme-toggle svg { flex: 0 0 auto; width: 18px !important; height: 18px !important; stroke: currentColor; /* Aucune propriete d'affichage ici, volontairement : ce selecteur est plus specifique que celui qui masque la lune en mode clair, et l'ecraserait — les deux icones apparaitraient en meme temps. Verifie le 12/08/2026. */ } .whb-column .av-theme-toggle:hover, .av-theme-toggle:hover { background-color: rgb(109 92 255 / 12%) !important; border-color: var(--av-violet-500) !important; } /* ========================================================================== CORRECTIF 12/08/2026 — sections Elementor a fond clair fige (accueil) -------------------------------------------------------------------------- Trois conteneurs de la page d'accueil portent une couleur de fond posee en dur dans les reglages Elementor (#F3F5F9 et #FFFFFF). Ces couleurs sont ecrites dans la feuille generee `uploads/elementor/css/post-9.css`, donc totalement hors de portee des variables `--av-*`. Mesure DevTools en mode sombre AVANT correctif : le texte de ces sections etait deja bascule en clair (#e8e8f0) alors que le fond restait clair — soit du texte quasi illisible, pas seulement une bande blanche. On ne touche qu'au mode sombre : en mode clair, ces regles n'existent pas, l'apparence d'origine est donc strictement preservee. Reperes des sections (accueil) : 09058da — bandeau haut « Thermostat TRV06 » (#F3F5F9) 8010bbf — grille des 5 produits (#F3F5F9) hfxkcrl — section FAQ (#FFFFFF) Si l'une de ces sections est recreee dans Elementor, son identifiant change et la regle correspondante devient inoperante : re-mesurer a ce moment-la. ========================================================================== */ :root[data-theme="dark"] .elementor-element-09058da, :root[data-theme="dark"] .elementor-element-8010bbf { background-color: var(--av-bg-subtle) !important; } :root[data-theme="dark"] .elementor-element-hfxkcrl { background-color: var(--av-bg) !important; } /* ========================================================================== AVATTO — DESIGN SYSTEM « REFONTE 2026 » (handoff Claude Design, 12/08/2026) -------------------------------------------------------------------------- PORTEE : tout est scope sous #av2. Aucune regle ne peut atteindre une page de production : sans le conteneur #av2, ce bloc est inerte. C'est ce qui permet de le livrer dans le CSS global sans changer le site actuel. THEMES : sombre par defaut sur #av2 ; clair via #av2[data-t="light"]. Regle du handoff respectee : aucune couleur de surface en dur dans le markup, tout passe par les variables ci-dessous. ========================================================================== */ #av2{ /* --- Surfaces et textes : MODE SOMBRE (defaut) --- */ --bg:#0D0D1A; --bg-raised:#14142B; --card:#1E1C3A; --well:#FFFFFF; --fg:#FFFFFF; --fg-2:#C9C4E8; --fg-3:#8B85B8; --fg-4:#5A5488; --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16); --header-bg:rgba(13,13,26,.72); --cyan:#00D4FF; --pink:#FF6BB5; --green:#00C853; --yellow:#FFD600; --green-t:#B9F3CC; --yellow-t:#FFF3B0; --sh-md:0 10px 24px rgba(0,0,0,.40); --sh-xl:0 40px 80px rgba(0,0,0,.55); --inset:inset 0 1px 0 rgba(255,255,255,.08); --aura:.38; --star-op:1; --panel-grad:linear-gradient(160deg,#1B0A3D,#14142B); /* --- Invariants de marque (identiques dans les deux themes) --- */ --violet:#6B2FD9; --violet-h:#7A46E0; --deep:#2E1261; --deep-2:#1B0A3D; --orange:#FF9500; --glow:0 0 44px rgba(107,47,217,.5); --glow-y:0 0 44px rgba(255,214,0,.45); --ease:cubic-bezier(.22,1,.36,1); --r-pill:999px; --r-field:22px; --r-card:36px; --r-hero:48px; font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--fg-2); -webkit-font-smoothing:antialiased; position:relative; min-height:100vh; overflow-x:hidden; } #av2[data-t="light"]{ --bg:#F6F4FC; --bg-raised:#FFFFFF; --card:#FFFFFF; --well:#FFFFFF; --fg:#14112A; --fg-2:#453F66; --fg-3:#6E678F; --fg-4:#948DAF; --border:rgba(20,17,42,.10); --border-strong:rgba(20,17,42,.20); --header-bg:rgba(246,244,252,.82); --cyan:#0089A8; --pink:#C93E85; --green:#00893A; --yellow:#A8820A; --green-t:#00893A; --yellow-t:#A8820A; --sh-md:0 10px 24px rgba(46,18,97,.08); --sh-xl:0 40px 80px rgba(46,18,97,.14); --inset:inset 0 1px 0 rgba(255,255,255,.9); --aura:.12; --star-op:0; --panel-grad:linear-gradient(160deg,#EFE8FF,#FFFFFF); } #av2,#av2 *{box-sizing:border-box} /* Woodmart colore et style h1..h4, p et a par selecteur d'element : sans ces deux lignes ses valeurs battent l'heritage depuis #av2. */ #av2 *{font-family:inherit} #av2 h1,#av2 h2,#av2 h3,#av2 h4,#av2 summary,#av2 strong,#av2 b{color:var(--fg)} #av2 p,#av2 li,#av2 span,#av2 td,#av2 th,#av2 label{color:inherit} #av2 img{max-width:100%;height:auto} /* --- Fonds d'ambiance ---------------------------------------------------- */ #av2 .av2-aura{position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 70% at 15% -10%,rgba(107,47,217,var(--aura)),transparent 60%), radial-gradient(90% 60% at 95% 5%,rgba(0,212,255,calc(var(--aura) * .42)),transparent 55%)} #av2 .av2-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--star-op)} #av2 .av2-star{position:absolute;border-radius:50%;background:#fff;animation:av2Tw 4s var(--ease) infinite} @keyframes av2Tw{0%,100%{opacity:.25}50%{opacity:.9}} @keyframes av2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes av2Breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}} #av2 .av2-wrap{position:relative;z-index:1} #av2 .av2-c{max-width:1200px;margin:0 auto;padding:0 24px} #av2 section{padding:96px 0} #av2 h1{font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0 0 18px} #av2 .av2-h1-hero{font-size:clamp(40px,6vw,72px);line-height:1.05} #av2 h2{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 14px} #av2 h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px} #av2 .av2-lead{font-size:18px;line-height:1.6;color:var(--fg-2);margin:0 0 28px;max-width:640px} #av2 .av2-sub{font-size:17px;line-height:1.6;color:var(--fg-3);margin:0 0 44px;max-width:680px} #av2 .av2-eye{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;color:var(--fg-3)} #av2 .av2-grad{background:linear-gradient(120deg,#00D4FF,#6B2FD9);-webkit-background-clip:text;background-clip:text;color:transparent} #av2[data-t="light"] .av2-grad{background:linear-gradient(120deg,#0089A8,#6B2FD9);-webkit-background-clip:text;background-clip:text} /* --- En-tete ------------------------------------------------------------- */ #av2 .av2-deadline{background:linear-gradient(90deg,rgba(107,47,217,.55),rgba(0,212,255,.18));padding:11px 24px; display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;font-size:13px;color:var(--fg-2)} #av2[data-t="light"] .av2-deadline{background:linear-gradient(90deg,rgba(107,47,217,.16),rgba(0,137,168,.10));color:#3A3560} #av2 .av2-deadline b{color:var(--yellow);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase} #av2 .av2-deadline a{color:var(--cyan);font-weight:700;text-decoration:none} #av2 .av2-head{position:sticky;top:0;z-index:30;background:var(--header-bg);backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:14px 24px} #av2 .av2-head-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px} #av2 .av2-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto} #av2 .av2-logo img{height:34px;width:auto} /* Pas de display ici : ce selecteur est plus specifique que la bascule de logo [data-logo] et l'ecraserait, affichant les deux logos a la fois. */ #av2 [data-logo="light"]{display:none} #av2[data-t="light"] [data-logo="light"]{display:block} #av2[data-t="light"] [data-logo="dark"]{display:none} #av2 .av2-nav{display:flex;gap:2px;margin-left:auto;align-items:center} #av2 .av2-nav a{font-size:14px;font-weight:700;color:var(--fg-3);padding:9px 12px;border-radius:var(--r-pill); text-decoration:none;white-space:nowrap;transition:color .22s var(--ease),background .22s var(--ease)} #av2 .av2-nav a:hover{color:var(--fg)} #av2 .av2-nav a.on{background:var(--border);color:var(--fg)} #av2 .av2-hact{display:flex;align-items:center;gap:10px;flex:0 0 auto} #av2 .av2-ico{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-pill);border:1px solid var(--border-strong); background:transparent;color:var(--fg-2);display:grid;place-items:center;cursor:pointer;text-decoration:none; font-size:16px;line-height:1;padding:0;transition:background .22s var(--ease),transform .22s var(--ease)} #av2 .av2-ico:hover{background:var(--border);transform:translateY(-2px)} #av2 .av2-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #av2 .av2-moon{display:none} #av2[data-t="light"] .av2-sun{display:none} #av2[data-t="light"] .av2-moon{display:block} #av2 .av2-cartn{position:absolute;transform:translate(14px,-12px);background:var(--violet);color:#fff;font-size:10px; font-weight:800;min-width:18px;height:18px;border-radius:var(--r-pill);display:grid;place-items:center;padding:0 5px} #av2 .av2-burger{display:none} #av2 .av2-mob{display:none} /* --- Boutons ------------------------------------------------------------- */ #av2 .av2-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer; font-family:inherit;font-size:14px;font-weight:700;padding:13px 24px;border-radius:var(--r-pill); background:var(--violet);color:#fff;text-decoration:none;box-shadow:var(--glow); transition:background .22s var(--ease),transform .22s var(--ease)} #av2 .av2-b:hover{background:var(--violet-h);transform:translateY(-2px);color:#fff} #av2 .av2-b:active{transform:scale(.97)} #av2 .av2-b--o{background:transparent;border:1px solid var(--border-strong);color:var(--fg);box-shadow:none} #av2 .av2-b--o:hover{background:var(--border);color:var(--fg)} #av2 .av2-b--y{background:linear-gradient(120deg,#FFD600,#FF9500);color:#0D0D1A;box-shadow:var(--glow-y)} #av2 .av2-b--y:hover{background:linear-gradient(120deg,#FFDE33,#FFA51F);color:#0D0D1A} #av2 .av2-b--w{width:100%} #av2 .av2-cta{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 30px} #av2 .av2-chips{display:flex;gap:10px;flex-wrap:wrap} #av2 .av2-chip{font-size:12px;font-weight:700;color:var(--fg-3);border:1px solid var(--border); border-radius:var(--r-pill);padding:8px 14px} #av2 .av2-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;padding:8px 14px;border-radius:var(--r-pill); background:rgba(0,200,83,.10);border:1px solid rgba(0,200,83,.30);color:var(--green-t)} /* --- Cartes et panneaux -------------------------------------------------- */ #av2 .av2-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:32px; box-shadow:var(--sh-md),var(--inset)} #av2 .av2-card p{color:var(--fg-3);font-size:15px;line-height:1.6;margin:0} #av2 .av2-card--g{border-color:rgba(0,200,83,.35)} #av2 .av2-card--y{border-color:rgba(255,214,0,.35)} #av2[data-t="light"] .av2-card--y{border-color:rgba(168,130,10,.35)} #av2 .av2-g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} #av2 .av2-g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} #av2 .av2-panel{border-radius:var(--r-hero);background:var(--panel-grad);padding:56px;border:1px solid var(--border)} #av2 .av2-well{background:var(--well);border-radius:var(--r-hero);display:grid;place-items:center;box-shadow:var(--sh-xl)} /* --- Hero ---------------------------------------------------------------- */ #av2 .av2-hero{display:flex;flex-wrap:wrap;gap:56px;align-items:center;padding-top:72px} #av2 .av2-hero>div{flex:1 1 300px;min-width:300px} #av2 .av2-shot{position:relative;padding:54px} #av2 .av2-shot img{animation:av2Breathe 6s var(--ease) infinite} #av2 .av2-fc{position:absolute;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-field); padding:14px 18px;box-shadow:var(--sh-md);animation:av2Float 8s var(--ease) infinite} #av2 .av2-fc b{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--fg-3)} #av2 .av2-fc i{font-style:normal;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--fg)} #av2 .av2-fc--tl{top:-18px;left:-18px} #av2 .av2-fc--br{bottom:-18px;right:-18px;border-color:rgba(0,200,83,.45);box-shadow:0 0 34px rgba(0,200,83,.28);animation-duration:9s} #av2 .av2-fc--br i{color:var(--green)} /* --- Bandeau de chiffres ------------------------------------------------- */ #av2 .av2-stats{display:flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--r-card); overflow:hidden;background:var(--bg-raised)} #av2 .av2-stat{flex:1 1 200px;padding:30px 24px;text-align:center;border-right:1px solid var(--border)} #av2 .av2-stat:last-child{border-right:0} #av2 .av2-stat b{display:block;font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.05} #av2 .av2-stat span{font-size:14px;color:var(--fg-3)} /* --- Grilles produits ---------------------------------------------------- */ #av2 .av2-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} #av2 .av2-prods--shop{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} #av2 .av2-prod{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border); border-radius:var(--r-card);overflow:hidden;text-decoration:none; transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)} #av2 .av2-prod:hover{transform:translateY(-4px);border-color:rgba(107,47,217,.5);box-shadow:var(--glow)} #av2 .av2-prod-img{height:210px;background:var(--well);display:grid;place-items:center;overflow:hidden;padding:14px} #av2 .av2-prods--shop .av2-prod-img{height:230px} #av2 .av2-prod-img img{max-width:100%;max-height:100%;object-fit:contain} #av2 .av2-prod-b{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1} #av2 .av2-prod-b h3{margin:0;font-size:20px} #av2 .av2-prod-b p{margin:0;font-size:14px;line-height:1.5;color:var(--fg-3)} #av2 .av2-price{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--fg);margin-top:auto} #av2 .av2-price em{font-style:normal;font-size:12px;font-weight:600;color:var(--fg-4);margin-left:6px} #av2 .av2-prod-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto} #av2 .av2-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 32px} #av2 .av2-filter{font-size:13px;font-weight:700;padding:10px 18px;border-radius:var(--r-pill);cursor:pointer; border:1px solid var(--border);background:transparent;color:var(--fg-3);font-family:inherit;transition:all .22s var(--ease)} #av2 .av2-filter:hover{color:var(--fg);border-color:var(--border-strong)} #av2 .av2-filter.on{background:var(--violet);border-color:transparent;color:#fff;box-shadow:var(--glow)} /* --- Fiche produit ------------------------------------------------------- */ #av2 .av2-pdp{display:flex;flex-wrap:wrap;gap:48px} #av2 .av2-pdp>div{flex:1 1 340px;min-width:300px} #av2 .av2-thumbs{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap} #av2 .av2-thumb{width:74px;height:74px;border-radius:var(--r-field);background:var(--well);border:2px solid transparent; padding:8px;cursor:pointer;display:grid;place-items:center;transition:border-color .22s var(--ease)} #av2 .av2-thumb.on{border-color:var(--violet)} #av2 .av2-thumb img{max-width:100%;max-height:100%;object-fit:contain} #av2 .av2-bigprice{font-size:44px;font-weight:800;letter-spacing:-.02em;color:var(--fg);line-height:1.05} #av2 .av2-bigprice em{font-style:normal;font-size:14px;font-weight:600;color:var(--fg-3);display:block;margin-top:6px} #av2 .av2-note{padding:16px 20px;border-radius:var(--r-field);background:rgba(0,200,83,.08); border:1px solid rgba(0,200,83,.3);color:var(--green-t);font-size:14px;line-height:1.6;margin:22px 0} #av2 .av2-note--y{background:rgba(255,214,0,.08);border-color:rgba(255,214,0,.3);color:var(--yellow-t)} #av2 .av2-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border); border:1px solid var(--border);border-radius:var(--r-field);overflow:hidden;margin-top:26px} #av2 .av2-spec{background:var(--card);padding:18px} #av2 .av2-spec b{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);margin-bottom:6px} #av2 .av2-spec span{font-size:15px;font-weight:600;color:var(--fg)} /* --- Etapes / arguments -------------------------------------------------- */ #av2 .av2-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px} #av2 .av2-step b{width:46px;height:46px;border-radius:var(--r-pill);border:1px solid var(--border-strong); display:grid;place-items:center;color:var(--cyan);font-size:18px;font-weight:800;margin-bottom:16px} #av2 .av2-step p{color:var(--fg-3);font-size:15px;line-height:1.6;margin:0} #av2 .av2-args{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px} #av2 .av2-arg:before{content:"";display:block;width:44px;height:2px;background:var(--violet);margin-bottom:14px} #av2 .av2-arg h3{font-size:18px;margin:0 0 8px} #av2 .av2-arg p{color:var(--fg-3);font-size:14px;line-height:1.6;margin:0} #av2 .av2-checks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px} #av2 .av2-checks li{display:flex;gap:12px;align-items:flex-start;color:var(--fg-2);font-size:15px;line-height:1.55} #av2 .av2-checks li:before{content:"✓";flex:0 0 22px;width:22px;height:22px;border-radius:var(--r-pill); background:rgba(0,200,83,.14);color:var(--green);font-size:12px;font-weight:800;display:grid;place-items:center;margin-top:2px} /* --- Bandeau pro (sombre dans les deux themes, ancrage volontaire) ------- */ #av2 .av2-pro{border-radius:var(--r-hero);padding:56px;position:relative;overflow:hidden; background:linear-gradient(120deg,#2E1261,#4B25A8);border:1px solid rgba(255,214,0,.28); background-image:linear-gradient(120deg,#2E1261,#4B25A8),radial-gradient(60% 120% at 100% 0%,rgba(255,214,0,.12),transparent 60%)} #av2 .av2-pro,#av2 .av2-pro p,#av2 .av2-pro .av2-sub,#av2 .av2-pro li{color:#C9C4E8} #av2 .av2-pro h2,#av2 .av2-pro h3,#av2 .av2-pro b{color:#fff} #av2 .av2-pro .av2-eye{color:#FFD600} #av2 .av2-pro .av2-b--o{border-color:rgba(255,255,255,.35);color:#fff} #av2 .av2-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} #av2 .av2-tier{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:28px; box-shadow:var(--sh-md),var(--inset);display:flex;flex-direction:column;gap:10px} #av2 .av2-tier .av2-ht{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--fg);line-height:1.05} #av2 .av2-tier .av2-ht em{font-style:normal;font-size:13px;font-weight:700;color:var(--fg-3);margin-left:6px} #av2 .av2-tier ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:8px} #av2 .av2-tier li{font-size:14px;color:var(--fg-3);display:flex;justify-content:space-between;gap:12px; padding-bottom:8px;border-bottom:1px solid var(--border)} #av2 .av2-tier li:last-child{border-bottom:0;padding-bottom:0} #av2 .av2-tier li b{color:var(--fg);font-weight:700} #av2 .av2-locked{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--fg-3); background:var(--border);border-radius:var(--r-field);padding:14px 18px;margin-top:12px} /* --- Formulaires --------------------------------------------------------- */ #av2 .av2-form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} #av2 .av2-f{display:flex;flex-direction:column;gap:8px;position:relative} #av2 .av2-f--full{grid-column:1/-1} #av2 .av2-f label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)} #av2 .av2-f label i{font-style:normal;color:var(--pink);margin-left:4px} #av2 .av2-f input,#av2 .av2-f textarea,#av2 .av2-f select{font-family:inherit;font-size:15px;color:var(--fg); background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-field);padding:14px 18px; width:100%;transition:border-color .22s var(--ease)} #av2[data-t="light"] .av2-f input,#av2[data-t="light"] .av2-f textarea,#av2[data-t="light"] .av2-f select{background:#FFFFFF} #av2 .av2-f input:focus,#av2 .av2-f textarea:focus{outline:none;border-color:var(--violet)} #av2 .av2-f input::placeholder,#av2 .av2-f textarea::placeholder{color:var(--fg-4)} #av2 .av2-f textarea{min-height:118px;resize:vertical} #av2 .av2-hint{font-size:12px;color:var(--fg-3);min-height:16px} #av2 .av2-hint.ok{color:var(--green)} #av2 .av2-hint.ko{color:var(--pink)} #av2 .av2-ac{position:absolute;top:100%;left:0;right:0;z-index:40;background:var(--card);border:1px solid var(--border-strong); border-radius:var(--r-field);box-shadow:var(--sh-md);overflow:hidden;margin-top:6px;display:none} #av2 .av2-ac.on{display:block} #av2 .av2-ac button{display:block;width:100%;text-align:left;background:transparent;border:0;font-family:inherit; font-size:14px;color:var(--fg-2);padding:12px 16px;cursor:pointer} #av2 .av2-ac button:hover,#av2 .av2-ac button:focus{background:var(--border);color:var(--fg)} #av2 .av2-check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--fg-3)} #av2 .av2-check input{accent-color:var(--violet);width:16px;height:16px} /* --- Tutoriels ----------------------------------------------------------- */ #av2 .av2-vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} #av2 .av2-vid{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9; background:#000;text-decoration:none;border:1px solid var(--border);transition:transform .22s var(--ease)} #av2 .av2-vid:hover{transform:translateY(-4px)} #av2 .av2-vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.34)} #av2 .av2-vid:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,26,.10),rgba(13,13,26,.55))} #av2 .av2-vid-in{position:absolute;inset:auto 0 0 0;padding:22px;z-index:2} #av2 .av2-vid-in b{color:#fff;font-size:17px;font-weight:700;display:block;text-shadow:0 2px 12px rgba(0,0,0,.6)} #av2 .av2-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;z-index:2; border-radius:var(--r-pill);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;font-size:20px} /* --- Blog ---------------------------------------------------------------- */ #av2 .av2-search{width:100%;font-family:inherit;font-size:16px;color:var(--fg);background:var(--bg-raised); border:1px solid var(--border);border-radius:var(--r-pill);padding:16px 24px;margin:0 0 22px} #av2 .av2-search:focus{outline:none;border-color:var(--violet)} #av2 .av2-count{font-size:13px;color:var(--fg-3);margin:0 0 22px} #av2 .av2-posts{display:grid;gap:18px} #av2 .av2-post{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card); padding:36px 40px;text-decoration:none;transition:transform .22s var(--ease),border-color .22s var(--ease)} #av2 .av2-post:hover{transform:translateY(-2px);border-color:rgba(107,47,217,.5)} #av2 .av2-post-m{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--fg-4);margin-bottom:12px} #av2 .av2-post-m b{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)} #av2 .av2-post h3{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 10px} #av2 .av2-post p{color:var(--fg-3);font-size:15px;line-height:1.6;margin:0} #av2 .av2-pag{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:36px} #av2 .av2-pag button{min-width:42px;height:42px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border); background:transparent;color:var(--fg-3);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer} #av2 .av2-pag button.on{background:var(--violet);border-color:transparent;color:#fff} #av2 .av2-pag button:disabled{opacity:.4;cursor:default} #av2 .av2-load{color:var(--fg-3);font-size:15px;padding:28px 0} /* --- FAQ ----------------------------------------------------------------- */ #av2 .av2-faq{display:grid;gap:14px} #av2 details{background:var(--card);border:1px solid var(--border);border-radius:28px;padding:22px 26px; transition:border-color .22s var(--ease)} #av2 details[open]{border-color:rgba(107,47,217,.55)} #av2 summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;gap:16px; justify-content:space-between;align-items:center} #av2 summary::-webkit-details-marker{display:none} #av2 summary:after{content:"+";flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-pill); border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--cyan); transition:transform .22s var(--ease)} #av2 details[open] summary:after{transform:rotate(45deg)} #av2 details p{color:var(--fg-3);font-size:16px;line-height:1.6;margin:14px 0 0} /* --- Pied de page -------------------------------------------------------- */ #av2 footer{border-top:1px solid var(--border);background:var(--bg-raised);padding:56px 0 30px;margin-top:40px} #av2 .av2-fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px} #av2 footer h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin:0 0 14px} #av2 footer a{display:block;color:var(--fg-2);text-decoration:none;font-size:14px;padding:5px 0} #av2 footer a:hover{color:var(--violet)} #av2[data-t="light"] footer a:hover{color:var(--violet)} #av2 .av2-legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--border);font-size:13px;color:var(--fg-4); display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center} #av2 .av2-legal a{display:inline;color:var(--fg-4);padding:0} /* --- Apparitions et accessibilite --------------------------------------- */ #av2 .av2-rv{opacity:0;transform:translateY(16px);transition:opacity .62s var(--ease),transform .62s var(--ease)} #av2 .av2-rv.av2-in{opacity:1;transform:none} #av2 a:focus-visible,#av2 button:focus-visible,#av2 input:focus-visible,#av2 textarea:focus-visible,#av2 summary:focus-visible{ outline:2px solid var(--violet);outline-offset:2px} @media (prefers-reduced-motion:reduce){ #av2 *{animation:none !important;transition:none !important} #av2 .av2-rv{opacity:1;transform:none} } /* --- Responsive et menu burger ------------------------------------------ */ @media (max-width:980px){ #av2 .av2-nav{display:none} #av2 .av2-burger{display:grid} #av2 .av2-mob{display:none;position:fixed;inset:0;z-index:60;background:var(--bg);padding:80px 24px 32px;overflow-y:auto} #av2 .av2-mob.on{display:block} #av2 .av2-mob a{display:block;font-size:20px;font-weight:700;color:var(--fg);text-decoration:none; padding:16px 0;border-bottom:1px solid var(--border)} #av2 .av2-mob .av2-mob-close{position:absolute;top:22px;right:22px} #av2 section{padding:64px 0} #av2 .av2-panel,#av2 .av2-pro{padding:32px;border-radius:var(--r-card)} #av2 .av2-shot{padding:28px} #av2 .av2-form{grid-template-columns:1fr} #av2 .av2-post{padding:26px 24px} #av2 .av2-hero{padding-top:40px;gap:36px} } @media (max-width:520px){ #av2 .av2-stat b{font-size:34px} #av2 .av2-bigprice{font-size:34px} #av2 .av2-deadline span{display:none} } /* ========================================================================== AVATTO — HABILLAGE GLOBAL (option A, 12/08/2026) -------------------------------------------------------------------------- OBJET : appliquer les jetons du handoff Claude Design a l'ensemble du site existant (27 gabarits), SANS toucher a la structure de Woodmart ni a la logique du tunnel de vente. METHODE : Woodmart pilote presque tout par variables CSS et laisse ses composants en fond transparent. On remappe donc la COUCHE DE JETONS (--color-*, --bgcolor-*, --brdcolor-*, --wd-*) plutot que les composants. Consequence : aucune regle de mise en page n'est modifiee, seules les couleurs, la typographie, les rayons et les ombres changent. HORS PERIMETRE, volontairement : en-tete, navigation, tiroir de panier (structure Woodmart conservee), et toute la logique de paiement. REVERSIBILITE : supprimer ce bloc rend au site son apparence d'origine. Sauvegarde : scratchpad/backups-refonte/design-system.css.avant-skin ========================================================================== */ /* --- 1. Jetons de marque, re-bases sur le handoff ------------------------ */ /* Ces valeurs remplacent celles posees au lot 1 (violet #5F56C6, rayons 8-16px), declarees plus haut dans ce fichier : meme specificite, ce bloc arrive apres, il gagne. */ :root { --av-violet-500: #6B2FD9; --av-violet-600: #5A24BC; --av-violet-700: #4A1C9E; --av-violet-300: #A98BEA; --av-violet-50: #F1EAFE; --av-orange-500: #FF9500; --av-bg: #F6F4FC; --av-bg-subtle: #EFECF8; --av-bg-raised: #FFFFFF; --av-well: #FFFFFF; --av-fg: #14112A; --av-fg-2: #453F66; --av-fg-3: #6E678F; --av-fg-4: #948DAF; --av-border: rgb(20 17 42 / 10%); --av-border-strong: rgb(20 17 42 / 20%); --av-cyan: #0089A8; --av-pink: #C93E85; --av-green: #00893A; --av-yellow: #A8820A; --av-shadow-sm: 0 4px 10px rgb(46 18 97 / 6%); --av-shadow: 0 10px 24px rgb(46 18 97 / 8%); --av-shadow-lg: 0 40px 80px rgb(46 18 97 / 14%); --av-inset: inset 0 1px 0 rgb(255 255 255 / 90%); --av-r-pill: 999px; --av-r-field: 18px; --av-r-card: 20px; --av-r-panel: 36px; --av-font: Manrope, "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; } :root[data-theme="dark"] { --av-bg: #0D0D1A; --av-bg-subtle: #14142B; --av-bg-raised: #14142B; --av-well: #FFFFFF; /* les visuels produits restent sur fond blanc (regle du handoff) */ --av-fg: #FFFFFF; --av-fg-2: #C9C4E8; --av-fg-3: #8B85B8; --av-fg-4: #5A5488; --av-border: rgb(255 255 255 / 8%); --av-border-strong: rgb(255 255 255 / 16%); --av-cyan: #00D4FF; --av-pink: #FF6BB5; --av-green: #00C853; --av-yellow: #FFD600; --av-violet-500: #7A46E0; /* legerement eclairci pour rester lisible sur fond nuit */ --av-shadow-sm: 0 4px 10px rgb(0 0 0 / 40%); --av-shadow: 0 10px 24px rgb(0 0 0 / 40%); --av-shadow-lg: 0 40px 80px rgb(0 0 0 / 55%); --av-inset: inset 0 1px 0 rgb(255 255 255 / 8%); } /* --- 2. Remappage de la palette de base de Woodmart --------------------- */ /* C'est ce bloc qui fait basculer tout le theme : ses composants pointent vers ces variables. --color-white reste blanc : c'est la couleur du TEXTE sur les boutons colores, pas une surface. */ :root { --wd-primary-color: var(--av-violet-500); --wd-alternative-color: var(--av-orange-500); --wd-text-color: var(--av-fg-2); --wd-link-color: var(--av-fg); --wd-link-color-hover: var(--av-violet-500); --wd-title-color: var(--av-fg); --wd-entities-title-color: var(--av-fg); --wd-entities-title-color-hover: var(--av-violet-500); --wd-widget-title-color: var(--av-fg); --wd-bcrumb-color-active: var(--av-fg-3); --wd-brd-radius: var(--av-r-card); --wd-form-brd-radius: var(--av-r-field); --wd-form-brd-color: var(--av-border); --wd-form-brd-color-focus: var(--av-violet-500); --wd-form-color: var(--av-fg); --wd-form-placeholder-color: var(--av-fg-4); --wd-social-radius: var(--av-r-pill); /* Typographie : Manrope partout (titres, corps, widgets, elements d'en-tete) */ --wd-text-font: var(--av-font); --wd-title-font: var(--av-font); --wd-entities-title-font: var(--av-font); --wd-alternative-font: var(--av-font); --wd-widget-title-font: var(--av-font); --wd-header-el-font: var(--av-font); } :root[data-theme="dark"] { /* Surfaces : c'est --bgcolor-* qui porte les fonds chez Woodmart */ --bgcolor-white: var(--av-bg-raised); --bgcolor-gray-100: #1A1A33; --bgcolor-gray-200: #1A1A33; --bgcolor-gray-300: #1E1C3A; --bgcolor-white-rgb: 20, 20, 43; /* Textes */ --color-gray-900: var(--av-fg); --color-gray-800: #E8E8F0; --color-gray-700: var(--av-fg-2); --color-gray-600: var(--av-fg-2); --color-gray-500: var(--av-fg-3); --color-gray-400: var(--av-fg-4); --color-gray-300: var(--av-fg-4); --color-gray-200: #24243D; --color-gray-100: #1A1A33; /* Bordures */ --brdcolor-gray-200: rgb(255 255 255 / 7%); --brdcolor-gray-300: rgb(255 255 255 / 10%); --brdcolor-gray-400: rgb(255 255 255 / 14%); --brdcolor-gray-500: rgb(255 255 255 / 20%); --wd-main-bgcolor: var(--av-bg); --wd-dropdown-bg-color: var(--av-bg-subtle); --wd-dropdown-shadow: 0 0 3px rgb(0 0 0 / 60%); --wd-tooltip-bg: #1E1C3A; } /* --- 3. Surfaces generales ---------------------------------------------- */ body { font-family: var(--av-font); background-color: var(--av-bg); color: var(--av-fg-2); } :root[data-theme="dark"] .wd-page-content, :root[data-theme="dark"] .site-content, :root[data-theme="dark"] .main-page-wrapper, :root[data-theme="dark"] .container, :root[data-theme="dark"] .wd-content-layout { background-color: transparent; } h1, h2, h3, h4, h5, h6, .wd-entities-title, .product_title, .entry-title, .page-title, .widget-title { font-family: var(--av-font); letter-spacing: -.02em; } /* --- 4. Boutons : pilules du handoff ------------------------------------ */ .btn, .button, button.button, input[type="submit"], .single_add_to_cart_button, .checkout-button, #place_order, .wc-block-components-button, .woocommerce-button, .wd-buy-now-btn, .added_to_cart, .wd-action-btn > a, .return-to-shop .button { border-radius: var(--av-r-pill) !important; font-family: var(--av-font); font-weight: 700; letter-spacing: 0; transition: transform .22s cubic-bezier(.22,1,.36,1), background-color .22s cubic-bezier(.22,1,.36,1); } .btn:hover, .button:hover, input[type="submit"]:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover { transform: translateY(-2px); } .btn:active, .button:active, #place_order:active { transform: scale(.98); } .single_add_to_cart_button, .checkout-button, #place_order { box-shadow: 0 0 32px rgb(107 47 217 / 28%); } /* --- 5. Champs de formulaire ------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], select, textarea, .select2-container .select2-selection { font-family: var(--av-font); border-radius: var(--av-r-field) !important; color: var(--av-fg); background-color: var(--av-bg-raised); border-color: var(--av-border); } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .select2-selection { background-color: #1A1A33; color: var(--av-fg); border-color: var(--av-border); } input:focus, select:focus, textarea:focus { border-color: var(--av-violet-500) !important; outline: none; } ::placeholder { color: var(--av-fg-4); } :root[data-theme="dark"] .select2-dropdown, :root[data-theme="dark"] .select2-container--open .select2-dropdown { background-color: var(--av-bg-subtle); color: var(--av-fg); border-color: var(--av-border-strong); } /* --- 6. Cartes, panneaux, tableaux ------------------------------------- */ .wd-product .product-wrapper, .woocommerce-tabs, .cart-totals-inner, .cart_totals, .woocommerce-checkout-review-order, .woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation, .woocommerce-order, .wd-my-account-sidebar, .woocommerce-address-fields, .woocommerce-EditAccountForm, .woocommerce-customer-details, .woocommerce-order-details { border-radius: var(--av-r-card); } :root[data-theme="dark"] .cart-totals-inner, :root[data-theme="dark"] .woocommerce-checkout-review-order, :root[data-theme="dark"] .woocommerce-MyAccount-content, :root[data-theme="dark"] .woocommerce-MyAccount-navigation, :root[data-theme="dark"] .woocommerce-order-details, :root[data-theme="dark"] .woocommerce-customer-details, :root[data-theme="dark"] .woocommerce-tabs, :root[data-theme="dark"] .wd-my-account-sidebar { background-color: var(--av-bg-subtle); box-shadow: var(--av-shadow-sm), var(--av-inset); } :root[data-theme="dark"] table, :root[data-theme="dark"] .shop_table, :root[data-theme="dark"] .shop_table th, :root[data-theme="dark"] .shop_table td { color: var(--av-fg-2); border-color: var(--av-border); } :root[data-theme="dark"] .shop_table thead th, :root[data-theme="dark"] .cart-totals-inner th { color: var(--av-fg); } /* Les visuels produits gardent un fond clair dans les deux themes : c'est la regle explicite du handoff (photos detourees sur fond blanc). */ .wd-product .product-image-link, .wd-product .hover-img, .woocommerce-product-gallery__image, .woocommerce-product-gallery, .wd-product-gallery, .attachment-woocommerce_thumbnail { border-radius: var(--av-r-card); overflow: hidden; } :root[data-theme="dark"] .wd-product .product-image-link, :root[data-theme="dark"] .woocommerce-product-gallery__image, :root[data-theme="dark"] .woocommerce-product-gallery, :root[data-theme="dark"] td.product-thumbnail img { background-color: var(--av-well); } /* --- 7. Prix ----------------------------------------------------------- */ .price, .amount, .woocommerce-Price-amount { font-family: var(--av-font); font-weight: 700; letter-spacing: -.02em; } .price ins, .price > .amount { color: var(--av-violet-500); } .price del { color: var(--av-fg-4); } /* --- 8. Messages et notices ------------------------------------------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { border-radius: var(--av-r-field); font-family: var(--av-font); } :root[data-theme="dark"] .woocommerce-message, :root[data-theme="dark"] .woocommerce-info { background-color: rgb(0 200 83 / 8%); color: var(--av-fg-2); } :root[data-theme="dark"] .woocommerce-error { background-color: rgb(255 107 181 / 10%); color: var(--av-fg); } /* --- 9. Navigation du compte, pagination, fil d'Ariane ---------------- */ .woocommerce-MyAccount-navigation a { border-radius: var(--av-r-field); } :root[data-theme="dark"] .woocommerce-MyAccount-navigation li.is-active a, :root[data-theme="dark"] .woocommerce-MyAccount-navigation a:hover { background-color: rgb(107 47 217 / 18%); color: var(--av-fg); } .page-numbers, .wd-pagination a, .wd-pagination span { border-radius: var(--av-r-pill); } :root[data-theme="dark"] .wd-breadcrumbs, :root[data-theme="dark"] .woocommerce-breadcrumb, :root[data-theme="dark"] .wd-breadcrumbs a, :root[data-theme="dark"] .woocommerce-breadcrumb a { color: var(--av-fg-3); } /* --- 10. Pied de page et zones sombres du theme ----------------------- */ :root[data-theme="dark"] .wd-footer, :root[data-theme="dark"] footer.footer-container, :root[data-theme="dark"] .copyrights-wrapper { background-color: var(--av-bg-subtle); color: var(--av-fg-3); border-top: 1px solid var(--av-border); } /* --- 11. Onglets produit, accordeons, encadres ------------------------ */ .woocommerce-tabs .wd-nav-tabs a, .wd-accordion-title { font-family: var(--av-font); } :root[data-theme="dark"] .woocommerce-tabs .wd-tab-content, :root[data-theme="dark"] .wd-accordion-content { color: var(--av-fg-2); } /* --- 12. Filet de securite mode sombre ------------------------------- Certains blocs Elementor portent une couleur de fond ecrite en dur dans leurs reglages : impossible a atteindre par variable. Ceux de l'accueil sont traites plus haut (lot 1). Si d'autres apparaissent, ils se corrigent au cas par cas, en ciblant leur identifiant elementor-element-XXXX. */ :root[data-theme="dark"] .wd-popup, :root[data-theme="dark"] .mfp-content, :root[data-theme="dark"] .wd-side-hidden, :root[data-theme="dark"] .wd-dropdown, :root[data-theme="dark"] .wd-dropdown-menu { background-color: var(--av-bg-subtle); color: var(--av-fg-2); } /* ========================================================================== AVATTO — CORRECTIF DE PRIORITE (12/08/2026) -------------------------------------------------------------------------- Constat mesure apres le premier deploiement : Woodmart redeclare ses variables dans un