/* Theme Name: ELWAHCH — Hello Elementor Child Theme URI: https://artofdoing.net Description: Thème enfant premium (noir / or / rouge) pour le template e-commerce COD Algérie. Identité « الوحش / ELWAHCH ». 3 pages publiques, formulaire COD, FR⇄AR + RTL, mobile-first. Le branding (logo + nom) se règle dans le Personnalisateur — rien en dur. Author: Art Of Doing Author URI: https://artofdoing.net Template: hello-elementor Version: 1.0.0 Text Domain: elwahch Tags: ecommerce, woocommerce, rtl-language-support, custom-colors */ /* ========================================================================== ELWAHCH — Design System (réf : DESIGN.md) Noir dominant · OR = accent n°1 · ROUGE = détails seulement ========================================================================== */ :root { /* Couleurs — fonds */ --elw-bg: #0B0B0C; --elw-surface: #141416; --elw-elevated: #1C1C1F; /* Or */ --elw-gold: #C9A24A; --elw-gold-bright: #E8CC7A; --elw-gold-deep: #9A7B2E; /* Rouge (taureau) — détails uniquement */ --elw-red: #C1121F; --elw-red-bright: #E11D2A; /* Texte */ --elw-ink: #F5F1E6; --elw-ink-muted: #A9A39A; /* Filets / lignes dorées discrètes */ --elw-line: rgba(201, 162, 74, .22); --elw-line-strong: rgba(201, 162, 74, .45); --elw-success: #3FAE6A; --elw-danger: #E11D2A; /* Typo */ --elw-display: "Oswald", "Arial Narrow", sans-serif; --elw-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* Rayons */ --elw-r-sm: 4px; --elw-r-md: 8px; --elw-r-lg: 14px; --elw-r-pill: 999px; /* Espacement */ --elw-space: 8px; --elw-section-y: 96px; --elw-wrap: 1200px; --elw-gutter: 24px; /* Transitions */ --elw-ease: cubic-bezier(.22, .61, .36, 1); } /* Polices arabes : injectées quand */ html[dir="rtl"] { --elw-display: "Cairo", "Tajawal", system-ui, sans-serif; --elw-body: "Tajawal", system-ui, sans-serif; } /* -------------------------------------------------------------------------- Reset léger + base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body.elw { margin: 0; background: var(--elw-bg); color: var(--elw-ink); font-family: var(--elw-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.elw a { color: inherit; text-decoration: none; } body.elw img { max-width: 100%; height: auto; display: block; } .elw h1, .elw h2, .elw h3, .elw h4, .elw .elw-display { font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; font-weight: 600; margin: 0 0 .4em; } html[dir="rtl"] .elw h1, html[dir="rtl"] .elw h2, html[dir="rtl"] .elw h3, html[dir="rtl"] .elw h4 { text-transform: none; /* l'arabe n'a pas de capitales */ letter-spacing: 0; font-weight: 700; } .elw h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); } .elw h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); } .elw h3 { font-size: 1.4rem; } .elw p { margin: 0 0 1rem; } .elw .gold { color: var(--elw-gold); } .elw .muted { color: var(--elw-ink-muted); } .elw .text-center { text-align: center; } /* Conteneur */ .elw-wrap { max-width: var(--elw-wrap); margin-inline: auto; padding-inline: var(--elw-gutter); } .elw-section { padding-block: var(--elw-section-y); position: relative; } .elw-section--surface { background: var(--elw-surface); border-top: 1px solid var(--elw-line); border-bottom: 1px solid var(--elw-line); } .elw-eyebrow { color: var(--elw-gold); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; margin-bottom: 16px; font-family: var(--elw-body); } html[dir="rtl"] .elw-eyebrow { letter-spacing: .04em; text-transform: none; } .elw-sec-head { text-align: center; max-width: 640px; margin: 0 auto 48px; } .elw-sec-head p { color: var(--elw-ink-muted); } /* -------------------------------------------------------------------------- Boutons -------------------------------------------------------------------------- */ .elw-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--elw-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; padding: 15px 34px; border-radius: var(--elw-r-pill); border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--elw-ease), box-shadow .2s var(--elw-ease), background .2s, color .2s; will-change: transform; } html[dir="rtl"] .elw-btn { text-transform: none; letter-spacing: 0; font-weight: 700; } .elw-btn--primary { background: linear-gradient(180deg, var(--elw-gold), var(--elw-gold-deep)); color: #0B0B0C; } .elw-btn--primary:hover { background: linear-gradient(180deg, var(--elw-gold-bright), var(--elw-gold)); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201, 162, 74, .32); } .elw-btn--primary:active { transform: translateY(0); } .elw-btn--ghost { background: transparent; color: var(--elw-gold); border-color: var(--elw-gold); } .elw-btn--ghost:hover { background: var(--elw-gold); color: #0B0B0C; transform: translateY(-2px); } .elw-btn--block { width: 100%; } /* -------------------------------------------------------------------------- Header / navigation -------------------------------------------------------------------------- */ .elw-header { position: sticky; top: 0; z-index: 100; background: rgba(11, 11, 12, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--elw-line); transition: background .3s, border-color .3s, box-shadow .3s; } .elw-header.is-stuck { background: rgba(11, 11, 12, .96); box-shadow: 0 6px 24px rgba(0,0,0,.4); } .elw-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; } .elw-header.is-stuck .elw-nav { height: 60px; transition: height .3s; } .elw-brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .elw-brand img { max-height: 46px; width: auto; } .elw-brand__txt { font-family: var(--elw-display); font-weight: 700; font-size: 1.4rem; letter-spacing: .04em; white-space: nowrap; } .elw-brand__txt .sub { display:block; font-family: var(--elw-body); font-weight: 500; font-size: .62rem; letter-spacing: .25em; color: var(--elw-ink-muted); text-transform: uppercase; } .elw-menu { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .elw-menu a { font-weight: 600; font-size: .98rem; position: relative; padding: 4px 0; transition: color .2s; } .elw-menu a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--elw-gold); transition: width .25s var(--elw-ease); } .elw-menu a:hover, .elw-menu .current-menu-item > a { color: var(--elw-gold); } .elw-menu a:hover::after, .elw-menu .current-menu-item > a::after { width: 100%; } .elw-nav__right { display: flex; align-items: center; gap: 18px; } /* Switcher FR/AR (rendu par [aod_lang_switcher]) */ .elw-lang .aod-lang, .elw-lang { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; } .elw-lang a { border: 1px solid var(--elw-line); border-radius: var(--elw-r-pill); padding: 4px 12px; color: var(--elw-ink-muted); transition: .2s; font-weight: 600; } .elw-lang a:hover, .elw-lang a.is-active, .elw-lang a.active { color: #0B0B0C; background: var(--elw-gold); border-color: var(--elw-gold); } /* Burger + menu mobile */ .elw-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .elw-burger span { width: 24px; height: 2px; background: var(--elw-ink); transition: .3s; } .elw-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .elw-burger.is-open span:nth-child(2) { opacity: 0; } .elw-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .elw-drawer { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); background: var(--elw-surface); border-left: 1px solid var(--elw-line); transform: translateX(100%); transition: transform .35s var(--elw-ease); z-index: 200; padding: 88px 28px 28px; display: flex; flex-direction: column; gap: 8px; } html[dir="rtl"] .elw-drawer { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--elw-line); transform: translateX(-100%); } .elw-drawer.is-open { transform: translateX(0); } .elw-drawer a { padding: 14px 4px; border-bottom: 1px solid var(--elw-line); font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .04em; } html[dir="rtl"] .elw-drawer a { text-transform: none; letter-spacing: 0; } .elw-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: .3s; z-index: 150; } .elw-overlay.is-open { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .elw-hero { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(560px, 92vh, 880px); display: flex; align-items: center; } .elw-hero__bg { position: absolute; inset: -4%; z-index: -3; background: var(--hero-bg) center / cover no-repeat; transform: scale(1.08); animation: elw-ken 26s ease-in-out infinite alternate; } @keyframes elw-ken { from { transform: scale(1.08); } to { transform: scale(1.2) translate3d(-2%, -3%, 0); } } .elw-hero__veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(105deg, rgba(11,11,12,.94) 0%, rgba(11,11,12,.74) 36%, rgba(11,11,12,.28) 68%, rgba(11,11,12,.55) 100%), radial-gradient(120% 80% at 82% 12%, rgba(201,162,74,.18), transparent 55%); } html[dir="rtl"] .elw-hero__veil { background: linear-gradient(255deg, rgba(11,11,12,.94) 0%, rgba(11,11,12,.74) 36%, rgba(11,11,12,.28) 68%, rgba(11,11,12,.55) 100%), radial-gradient(120% 80% at 18% 12%, rgba(201,162,74,.18), transparent 55%); } .elw-hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 130px; z-index: -1; background: linear-gradient(transparent, var(--elw-bg)); } .elw-hero__dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } .elw-hero__inner { position: relative; max-width: 720px; padding-block: 90px; } .elw-hero__title { margin-bottom: 20px; font-size: clamp(2.6rem, 7vw, 4.6rem); text-shadow: 0 2px 34px rgba(0,0,0,.55); } .elw-hero__lead { color: rgba(245,241,230,.84); font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 52ch; margin-bottom: 34px; } .elw-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; } /* Indicateur de défilement */ .elw-hero__scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(245,241,230,.45); border-radius: 14px; display: flex; justify-content: center; z-index: 2; } .elw-hero__scroll span { width: 4px; height: 8px; background: var(--elw-gold); border-radius: 2px; margin-top: 7px; animation: elw-scrollcue 1.7s var(--elw-ease) infinite; } @keyframes elw-scrollcue { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(11px); } } /* Texte or chatoyant */ .gold--shimmer { background: linear-gradient(100deg, var(--elw-gold-deep), var(--elw-gold-bright) 44%, #fff7e0 50%, var(--elw-gold-bright) 56%, var(--elw-gold-deep)); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: elw-shimmer 4.5s linear infinite; } @keyframes elw-shimmer { to { background-position: 220% center; } } /* Reflet balayant les boutons primaires */ .elw-btn--shine { position: relative; overflow: hidden; } .elw-btn--shine::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: elw-shine 4s ease-in-out infinite; } @keyframes elw-shine { 0% { left: -130%; } 55%, 100% { left: 150%; } } /* -------------------------------------------------------------------------- Barre de réassurance -------------------------------------------------------------------------- */ .elw-reassure { background: var(--elw-surface); border-top: 1px solid var(--elw-line); border-bottom: 1px solid var(--elw-line); } .elw-reassure__row { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px; padding-block: 22px; } .elw-reassure__item { display: flex; align-items: center; gap: 12px; font-weight: 600; } .elw-reassure__item svg, .elw-reassure__item .ic { color: var(--elw-gold); flex: none; } /* -------------------------------------------------------------------------- Bénéfices (icônes) -------------------------------------------------------------------------- */ .elw-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .elw-ben { background: var(--elw-surface); border: 1px solid var(--elw-line); border-radius: var(--elw-r-md); padding: 30px 22px; text-align: center; transition: transform .25s var(--elw-ease), border-color .25s; } .elw-ben:hover { transform: translateY(-4px); border-color: var(--elw-line-strong); } .elw-ben__ic { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; border: 1px solid var(--elw-gold); color: var(--elw-gold); display: flex; align-items: center; justify-content: center; } .elw-ben h3 { font-size: 1.05rem; margin-bottom: 6px; } .elw-ben p { color: var(--elw-ink-muted); font-size: .9rem; margin: 0; } /* -------------------------------------------------------------------------- Composition (les 5 fruits à coque) -------------------------------------------------------------------------- */ .elw-compo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; } .elw-compo__item { text-align: center; } .elw-compo__badge { width: 132px; height: 132px; margin: 0 auto 16px; border-radius: 50%; position: relative; overflow: hidden; background: var(--elw-elevated); border: 2px solid var(--elw-line); box-shadow: 0 14px 34px rgba(0,0,0,.45); transition: transform .35s var(--elw-ease), border-color .35s, box-shadow .35s; } .elw-compo__badge img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--elw-ease); } .elw-compo__badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 34px rgba(0,0,0,.55); pointer-events: none; } .elw-compo__item:hover .elw-compo__badge { transform: translateY(-6px); border-color: var(--elw-gold); box-shadow: 0 18px 40px rgba(201,162,74,.28); } .elw-compo__item:hover .elw-compo__badge img { transform: scale(1.12); } .elw-compo__item span { display: block; font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; } html[dir="rtl"] .elw-compo__item span { text-transform: none; letter-spacing: 0; } /* -------------------------------------------------------------------------- Table nutritionnelle -------------------------------------------------------------------------- */ .elw-nutri { background: var(--elw-surface); border: 1px solid var(--elw-line); border-radius: var(--elw-r-lg); overflow: hidden; max-width: 560px; margin: 0 auto; } .elw-nutri__hd { background: var(--elw-elevated); padding: 16px 22px; font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--elw-line); } html[dir="rtl"] .elw-nutri__hd { text-transform: none; letter-spacing: 0; } .elw-nutri__row { display: flex; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.04); } .elw-nutri__row:last-child { border-bottom: 0; } .elw-nutri__row:nth-child(even) { background: rgba(0,0,0,.25); } .elw-nutri__row b { color: var(--elw-gold); font-family: var(--elw-display); } /* Badge */ .elw-badge { display: inline-block; background: var(--elw-red); color: #fff; font-family: var(--elw-display); font-size: .8rem; padding: 5px 14px; border-radius: var(--elw-r-pill); text-transform: uppercase; letter-spacing: .04em; } html[dir="rtl"] .elw-badge { text-transform: none; letter-spacing: 0; } .elw-badge--gold { background: var(--elw-gold); color: #0B0B0C; } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .elw-faq { max-width: 760px; margin: 0 auto; } .elw-faq__item { border: 1px solid var(--elw-line); border-radius: var(--elw-r-md); margin-bottom: 12px; background: var(--elw-surface); overflow: hidden; } .elw-faq__q { width: 100%; text-align: start; background: none; border: 0; color: var(--elw-ink); cursor: pointer; padding: 18px 22px; font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; } html[dir="rtl"] .elw-faq__q { text-transform: none; letter-spacing: 0; font-weight: 700; } .elw-faq__q .pm { color: var(--elw-gold); font-size: 1.4rem; transition: transform .3s; flex: none; } .elw-faq__item.is-open .elw-faq__q .pm { transform: rotate(45deg); } .elw-faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--elw-ease); } .elw-faq__a p { padding: 0 22px 18px; color: var(--elw-ink-muted); margin: 0; } /* -------------------------------------------------------------------------- CTA final -------------------------------------------------------------------------- */ .elw-final { text-align: center; position: relative; overflow: hidden; isolation: isolate; background: var(--elw-bg); } .elw-final::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--final-bg) center / cover no-repeat; opacity: .22; } .elw-final__veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(820px 420px at 50% 0%, rgba(201,162,74,.20), transparent 60%), linear-gradient(0deg, var(--elw-bg) 8%, rgba(11,11,12,.72)); } .elw-final p { color: var(--elw-ink-muted); max-width: 52ch; margin: 0 auto 30px; } /* -------------------------------------------------------------------------- Vitrine produit (accueil) -------------------------------------------------------------------------- */ .elw-showcase__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .elw-showcase__media { position: relative; } .elw-showcase__glow { position: absolute; inset: -10%; z-index: 0; background: radial-gradient(circle at 50% 45%, rgba(201,162,74,.32), transparent 62%); filter: blur(10px); } .elw-showcase__frame { position: relative; z-index: 1; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--elw-r-lg); overflow: hidden; border: 1px solid var(--elw-line-strong); box-shadow: 0 32px 74px rgba(0,0,0,.55); transition: transform .25s var(--elw-ease); } .elw-showcase__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--elw-ease); } .elw-showcase__frame:hover img { transform: scale(1.06); } .elw-showcase__seal { position: absolute; z-index: 2; bottom: 14px; inset-inline-end: 14px; font-family: "Cairo", "Tajawal", sans-serif; font-size: 1.5rem; color: var(--elw-gold); background: rgba(11,11,12,.72); border: 1px solid var(--elw-line); padding: 4px 16px; border-radius: var(--elw-r-pill); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .elw-showcase__body h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 14px; } .elw-showcase__lead { color: var(--elw-ink-muted); } .elw-showcase__price { margin-top: 8px; font-size: 1.05rem; } .elw-showcase__price .lbl { color: var(--elw-ink-muted); } .elw-showcase__price b, .elw-showcase__price .woocommerce-Price-amount { color: var(--elw-gold) !important; font-family: var(--elw-display); font-size: 1.5rem; } .elw-showcase__body .elw-btn { margin-top: 24px; } /* Liste à coches dorées */ .elw-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; } .elw-ticks li { position: relative; padding-inline-start: 30px; color: var(--elw-ink); } .elw-ticks li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 3px; width: 9px; height: 15px; border: solid var(--elw-gold); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* -------------------------------------------------------------------------- Bande parallax -------------------------------------------------------------------------- */ .elw-band { position: relative; overflow: hidden; isolation: isolate; min-height: 440px; display: flex; align-items: center; border-block: 1px solid var(--elw-line); } .elw-band__bg { position: absolute; inset: -18% 0; z-index: -2; background: var(--band-bg) center / cover no-repeat; will-change: transform; } .elw-band__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,11,12,.86), rgba(11,11,12,.6)); } .elw-band__inner { text-align: center; max-width: 780px; margin-inline: auto; padding-block: 90px; } .elw-band__inner h2 { font-size: clamp(2rem, 5vw, 3.2rem); } .elw-band__inner p { color: rgba(245,241,230,.82); margin: 0; } /* Légère inclinaison 3D (pilotée par JS, sinon neutre) */ .elw-tilt { transition: transform .2s var(--elw-ease); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .elw-footer { background: var(--elw-surface); border-top: 1px solid var(--elw-line); padding: 56px 0 24px; position: relative; overflow: hidden; } .elw-footer__grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 28px; position: relative; z-index: 2; } .elw-footer__col h4 { font-size: 1rem; color: var(--elw-gold); } .elw-footer__col a { color: var(--elw-ink-muted); display: block; padding: 4px 0; transition: color .2s; } .elw-footer__col a:hover { color: var(--elw-ink); } .elw-footer__social { display: flex; gap: 14px; margin-top: 8px; } .elw-footer__social a { width: 38px; height: 38px; border: 1px solid var(--elw-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--elw-gold); } .elw-footer__social a:hover { background: var(--elw-gold); color: #0B0B0C; } .elw-footer__watermark { position: absolute; bottom: -2.2rem; inset-inline: 0; text-align: center; font-family: var(--elw-display); font-size: clamp(4rem, 16vw, 11rem); font-weight: 700; color: rgba(201,162,74,.05); letter-spacing: .1em; pointer-events: none; line-height: 1; } .elw-footer__legal { border-top: 1px solid var(--elw-line); margin-top: 40px; padding-top: 18px; color: var(--elw-ink-muted); font-size: .82rem; text-align: center; position: relative; z-index: 2; } /* -------------------------------------------------------------------------- WooCommerce — Boutique (grille) + produit -------------------------------------------------------------------------- */ /* En-tête premium de la boutique */ .elw-shop-head { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: clamp(56px, 9vw, 92px) 40px; border-bottom: 1px solid var(--elw-line); } .elw-shop-head__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(680px 320px at 50% -12%, rgba(201, 162, 74, .20), transparent 62%); } .elw-shop-head .elw-eyebrow { margin-bottom: 14px; } .elw-shop-head h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); margin: 0 0 .35em; } .elw-shop-head .elw-shop-head__lead { color: var(--elw-ink-muted); max-width: 56ch; margin: 0 auto; } /* Réassurance en contexte boutique : respiration au-dessus du footer */ .elw-shop-reassure { margin-top: 48px; } /* Empty state sobre (« Bientôt de retour ») */ .elw-shop-empty { text-align: center; max-width: 560px; margin: 56px auto; padding: 8px 24px; } .elw-shop-empty .elw-badge { margin-bottom: 18px; } .elw-shop-empty p { color: var(--elw-ink-muted); margin: 0 0 26px; } /* Grille boutique : forcer un vrai CSS Grid et neutraliser les floats/clears WooCommerce natifs. */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; align-items: stretch; } /* Les pseudo-éléments clearfix de WooCommerce deviennent des items de grille sinon. */ .woocommerce ul.products::before, .woocommerce-page ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::after { display: none !important; content: none !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce ul.products li.product.first, .woocommerce-page ul.products li.product.first, .woocommerce ul.products li.product.last, .woocommerce-page ul.products li.product.last { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; background: var(--elw-surface); border: 1px solid var(--elw-line); border-radius: var(--elw-r-lg); overflow: hidden; text-align: center; transition: transform .25s var(--elw-ease), border-color .25s; min-width: 0; } .woocommerce ul.products li.product:hover { transform: translateY(-5px); border-color: var(--elw-line-strong); } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; } .woocommerce ul.products li.product a img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; margin: 0; transition: transform .4s var(--elw-ease); } .woocommerce ul.products li.product:hover a img { transform: scale(1.04); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.1rem; padding: 16px 16px 4px; color: var(--elw-ink); } html[dir="rtl"] .woocommerce ul.products li.product .woocommerce-loop-product__title { text-transform: none; letter-spacing: 0; } .woocommerce ul.products li.product .price { color: var(--elw-gold) !important; font-family: var(--elw-display); font-size: 1.2rem; display: block; padding: 0 16px; } .woocommerce ul.products li.product .price del { color: var(--elw-ink-muted) !important; opacity: .6; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .elw-loop-cta { display: inline-block; margin: 14px 16px 20px; background: linear-gradient(180deg, var(--elw-gold), var(--elw-gold-deep)); color: #0B0B0C !important; font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .04em; border-radius: var(--elw-r-pill); padding: 12px 26px; border: 0; transition: .2s; } .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product .elw-loop-cta:hover { background: linear-gradient(180deg, var(--elw-gold-bright), var(--elw-gold)); transform: translateY(-2px); } html[dir="rtl"] .woocommerce ul.products li.product .button, html[dir="rtl"] .woocommerce ul.products li.product .elw-loop-cta { text-transform: none; letter-spacing: 0; } /* Grille « Nos autres produits » (accueil) — carte cliquable, cohérente boutique */ .elw-prodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .elw-prodcard { display: flex; flex-direction: column; background: var(--elw-surface); border: 1px solid var(--elw-line); border-radius: var(--elw-r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s var(--elw-ease), border-color .25s, box-shadow .25s; } .elw-prodcard:hover { transform: translateY(-5px); border-color: var(--elw-line-strong); box-shadow: 0 22px 50px rgba(0,0,0,.4); } .elw-prodcard__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--elw-elevated); } .elw-prodcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--elw-ease); } .elw-prodcard:hover .elw-prodcard__media img { transform: scale(1.05); } .elw-prodcard__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 16px 22px; } .elw-prodcard__title { font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.1rem; margin: 0; color: var(--elw-ink); } html[dir="rtl"] .elw-prodcard__title { text-transform: none; letter-spacing: 0; } .elw-prodcard__price { color: var(--elw-gold); font-family: var(--elw-display); font-size: 1.2rem; } .elw-prodcard__price del { color: var(--elw-ink-muted); opacity: .6; margin-inline-end: 6px; } .elw-prodcard__price ins { text-decoration: none; } .elw-prodcard__cta { margin-top: 6px; background: linear-gradient(180deg, var(--elw-gold), var(--elw-gold-deep)); color: #0B0B0C; font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .04em; border-radius: var(--elw-r-pill); padding: 11px 24px; transition: .2s; } .elw-prodcard:hover .elw-prodcard__cta { background: linear-gradient(180deg, var(--elw-gold-bright), var(--elw-gold)); } html[dir="rtl"] .elw-prodcard__cta { text-transform: none; letter-spacing: 0; } .elw-prodgrid__more { text-align: center; margin-top: 40px; } /* Single product: prix en or, titres Oswald, formulaire COD respiré */ .woocommerce div.product { max-width: var(--elw-wrap); margin-inline: auto; padding-block: clamp(24px, 4vw, 40px); } .woocommerce div.product .product_title { font-family: var(--elw-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: .25em; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--elw-gold) !important; font-family: var(--elw-display); font-size: 1.8rem; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--elw-ink-muted); } .woocommerce .star-rating { display: none; } /* pas d'avis Woo natifs */ /* Galerie produit : cadre sombre, filet or */ .woocommerce div.product div.images img { border-radius: var(--elw-r-lg); box-shadow: 0 26px 60px rgba(0,0,0,.5); } .woocommerce div.product .flex-control-thumbs li img { border-radius: var(--elw-r-sm); } /* Bénéfices courts (au-dessus du formulaire COD) */ .elw-prod-perks { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .elw-prod-perks li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; background: var(--elw-surface); border: 1px solid var(--elw-line); border-radius: var(--elw-r-md); padding: 11px 14px; } .elw-prod-perks__ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--elw-gold); color: var(--elw-gold); } /* Sections produit (réassurance, composition) : pleine largeur sous les 2 colonnes. clear:both = passe SOUS le résumé flottant (sinon remonte dans la colonne galerie). */ .woocommerce div.product .elw-prod-reassure, .woocommerce div.product .elw-prod-compo, .woocommerce div.product .woocommerce-tabs { clear: both; } .woocommerce div.product .elw-prod-reassure, .woocommerce div.product .elw-prod-compo { max-width: none; margin-inline: 0; padding-block: 0; } .elw-prod-reassure { margin-top: 40px; } .elw-prod-compo { margin-top: 0; } /* Onglet Description : titres Oswald, fond sobre */ .woocommerce div.product .woocommerce-tabs { margin-top: 48px; } .woocommerce div.product .woocommerce-tabs ul.tabs { border: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--elw-line); } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--elw-surface); border: 1px solid var(--elw-line); border-radius: var(--elw-r-pill); margin: 0 8px 0 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--elw-elevated); border-color: var(--elw-line-strong); } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--elw-ink); font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .03em; font-size: .9rem; } html[dir="rtl"] .woocommerce div.product .woocommerce-tabs ul.tabs li a { text-transform: none; letter-spacing: 0; } .woocommerce div.product .woocommerce-tabs .panel { color: var(--elw-ink-muted); } .woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--elw-display); color: var(--elw-ink); } /* Masquage panier/compte natifs (ceinture + bretelles) */ .woocommerce a.added_to_cart, .wc-block-mini-cart, .woocommerce-cart-form, .woocommerce-mini-cart, .site-header-cart, .menu-item-cart, .menu-item-my-account { display: none !important; } /* -------------------------------------------------------------------------- Formulaire COD & contact (habillage des champs) -------------------------------------------------------------------------- */ .aod-cod__form, .elw-form { color: var(--elw-ink); } .aod-cod__form input, .aod-cod__form select, .aod-cod__form textarea, .elw-form input, .elw-form select, .elw-form textarea, .metform-input input, .mf-input { background: var(--elw-elevated) !important; color: var(--elw-ink) !important; border: 1px solid var(--elw-line) !important; border-radius: var(--elw-r-md) !important; padding: 13px 14px !important; transition: border-color .2s, box-shadow .2s; width: 100%; } .aod-cod__form input:focus, .aod-cod__form select:focus, .aod-cod__form textarea:focus, .elw-form input:focus, .elw-form select:focus, .elw-form textarea:focus { border-color: var(--elw-gold) !important; box-shadow: 0 0 0 3px rgba(201,162,74,.18) !important; outline: none; } .aod-cod__form label, .elw-form label { color: var(--elw-ink); font-weight: 600; } .aod-cod__submit, .elw-form button[type="submit"] { background: linear-gradient(180deg, var(--elw-gold), var(--elw-gold-deep)) !important; color: #0B0B0C !important; font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .04em; border: 0 !important; border-radius: var(--elw-r-pill) !important; padding: 15px 28px !important; width: 100%; cursor: pointer; transition: .2s; } .aod-cod__submit:hover, .elw-form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,162,74,.3); } /* -------------------------------------------------------------------------- Animations d'apparition au scroll -------------------------------------------------------------------------- */ /* Masqué seulement si JS actif (classe ajoutée inline) : sans JS, contenu visible. */ .elw-js .elw-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--elw-ease), transform .6s var(--elw-ease); } .elw-js .elw-reveal.is-in { opacity: 1; transform: none; } .elw-reveal[data-delay="1"] { transition-delay: .08s; } .elw-reveal[data-delay="2"] { transition-delay: .16s; } .elw-reveal[data-delay="3"] { transition-delay: .24s; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 980px) { :root { --elw-section-y: 64px; } .elw-hero { min-height: 78vh; } .elw-showcase__grid { grid-template-columns: 1fr; gap: 36px; } .elw-showcase__media { max-width: 460px; margin-inline: auto; } .elw-benefits { grid-template-columns: repeat(2, 1fr); } .elw-compo { grid-template-columns: repeat(3, 1fr); } .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; } .elw-prodgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { :root { --elw-section-y: 56px; --elw-gutter: 18px; } .elw-menu { display: none; } .elw-burger { display: flex; } .elw-hero { min-height: 88vh; } .elw-hero__inner { padding-block: 64px; } .elw-hero__cta .elw-btn { width: 100%; } .elw-benefits { grid-template-columns: 1fr 1fr; } .elw-compo { grid-template-columns: repeat(3, 1fr); gap: 14px; } .elw-compo__badge { width: 92px; height: 92px; } .elw-band { min-height: 360px; } .elw-band__inner { padding-block: 64px; } .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr 1fr !important; gap: 16px; } .elw-prodgrid { grid-template-columns: 1fr 1fr; gap: 16px; } .elw-footer__grid { flex-direction: column; gap: 24px; } } /* Accessibilité : mouvement réduit */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .elw-reveal { opacity: 1; transform: none; } } /* Focus visible global */ .elw a:focus-visible, .elw button:focus-visible, .elw input:focus-visible, .elw select:focus-visible, .elw textarea:focus-visible { outline: 2px solid var(--elw-gold); outline-offset: 2px; } /* -------------------------------------------------------------------------- Boutique mono-produit : carte « mise en valeur », centrée à toutes largeurs. Placé après les media queries pour primer sur la grille responsive 2/1 col. -------------------------------------------------------------------------- */ body.elw-shop--single ul.products, body.elw-shop--single.woocommerce ul.products { grid-template-columns: minmax(0, 460px) !important; justify-content: center; max-width: 520px; margin-inline: auto; } body.elw-shop--single ul.products li.product { position: relative; box-shadow: 0 26px 60px rgba(0, 0, 0, .5); border-color: var(--elw-line-strong); } body.elw-shop--single ul.products li.product::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 38%, rgba(201, 162, 74, .26), transparent 64%); filter: blur(8px); } /* -------------------------------------------------------------------------- Formulaire COD (aod-cod-form) — habillage premium noir/or/rouge. Le plugin reste générique (thème blanc « Shopify » par défaut, tokens --sh-*). On le restyle ICI, côté thème, en remappant ces tokens + en neutralisant les rares valeurs codées en dur (#fff des champs, texte blanc sur accent, encadrés d'alerte pastel). Préfixe `body` = on prime sur le CSS du plugin quel que soit l'ordre de chargement. -------------------------------------------------------------------------- */ body .aod-cod { /* Remap des tokens du plugin vers le design system ELWAHCH */ --sh-text: var(--elw-ink); --sh-text-2: var(--elw-ink-muted); --sh-muted: var(--elw-line-strong); --sh-line: var(--elw-line); --sh-line-strong: var(--elw-line-strong); --sh-bg: var(--elw-surface); --sh-bg-sub: var(--elw-elevated); --sh-accent: var(--elw-gold); --sh-accent-dark: var(--elw-gold-deep); --sh-green: var(--elw-success); --sh-error: var(--elw-danger); border: 1px solid var(--elw-line); box-shadow: 0 18px 50px rgba(0, 0, 0, .42); } /* Titre du formulaire : typo d'affichage (réinitialisée en RTL) */ body .aod-cod .aod-cod__title { font-family: var(--elw-display); text-transform: uppercase; letter-spacing: .02em; } html[dir="rtl"] body .aod-cod .aod-cod__title { text-transform: none; letter-spacing: 0; } /* Champs / stepper / cartes radio : fond sombre (le plugin les force en #fff). On surcharge `background-color` seulement → la flèche SVG des selects reste. */ body .aod-cod .aod-cod__form input, body .aod-cod .aod-cod__form select, body .aod-cod .aod-cod__stepper, body .aod-cod .aod-cod__radio-card, body .aod-cod .aod-cod__radio-card::before { background-color: var(--elw-bg); } /* Flèche des selects : reprend l'or du thème (au lieu du gris #8a8a8a) */ body .aod-cod .aod-cod__form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A24A' d='M6 8 0 2 1.4.6 6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E"); } /* Bouton « Confirmer » : texte sombre sur or (le plugin le force en blanc) */ body .aod-cod .aod-cod__submit, body .aod-cod .aod-cod__submit.button { color: #0B0B0C !important; } body .aod-cod .aod-cod__step:hover, body .aod-cod .aod-cod__step:active { color: #0B0B0C; } /* Encadrés d'alerte : teintes translucides au lieu des pastels clairs */ body .aod-cod .aod-cod__msg.is-error { background: rgba(225, 29, 42, .12); border-color: rgba(225, 29, 42, .42); } body .aod-cod .aod-cod__msg.is-success, body .aod-cod .aod-cod__free-hint { background: rgba(63, 174, 106, .12); border-color: rgba(63, 174, 106, .42); }