/* Theme Name: RE:WEAR Theme URI: https://re-wear.fr Author: RE:WEAR Description: Thème Blanc & Noir pour la boutique RE:WEAR (sneakers et streetwear), fait pour WooCommerce. En-tête blanc, logo noir, guide des tailles, barre « -15 % sur le 3e article » et upsell dans le panier. Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 7.4 Version: 1.8.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: rewear WC requires at least: 9.0 WC tested up to: 11.2 */ :root { --rw-bg: #ffffff; --rw-surface: #f5f5f6; --rw-raised: #ececee; --rw-line: #e4e4e7; --rw-line-strong: #c9c9cf; --rw-ink: #0a0a0b; --rw-muted: #6b6b74; --rw-soft: #3f3f46; --rw-on-ink: #ffffff; --rw-radius: 4px; --rw-display: Archivo, 'Arial Black', Impact, sans-serif; --rw-body: Figtree, 'Helvetica Neue', Arial, sans-serif; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, .wp-block-heading, .rw-h2, .wp-block-post-title { font-stretch: 125%; text-wrap: balance; } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--rw-ink); outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ---------- Petits éléments réutilisables ---------- */ .rw-eyebrow, .is-style-rw-eyebrow { font-family: var(--rw-body); font-size: 12px !important; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--rw-muted); margin: 0 0 12px; } .rw-h2 { font-family: var(--rw-display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 4.4vw, 56px); line-height: .95; letter-spacing: -.01em; margin: 0; } .rw-empty { color: var(--rw-muted); font-size: 14px; padding: 20px; border: 1px dashed var(--rw-line-strong); border-radius: var(--rw-radius); text-align: center; } .rw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: var(--rw-radius); font-family: var(--rw-display); font-stretch: 112%; font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s; } .rw-btn:hover { transform: translateY(-2px); } .rw-btn--ghost { background: transparent; color: var(--rw-ink); border-color: var(--rw-line-strong); } .rw-btn--ghost:hover { border-color: var(--rw-ink); } .wp-block-button__link { font-stretch: 112%; transition: transform .2s, background .2s; } .wp-block-button__link:hover { transform: translateY(-2px); } .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--rw-ink); border: 1px solid var(--rw-line-strong); } .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--rw-ink); background: transparent; } /* ---------- Barre d'annonce défilante ---------- */ .rw-annonce { background: var(--rw-ink); color: var(--rw-on-ink); overflow: hidden; position: relative; } .rw-annonce > p { margin: 0; padding: 10px 16px; text-align: center; font-family: var(--rw-display); font-stretch: 115%; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .rw-annonce__track { display: flex; width: max-content; animation: rw-marquee 40s linear infinite; } .rw-annonce:hover .rw-annonce__track { animation-play-state: paused; } .rw-annonce__item { display: flex; align-items: center; gap: 28px; padding: 10px 14px; white-space: nowrap; font-family: var(--rw-display); font-stretch: 115%; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .rw-annonce__item::after { content: '✦'; font-size: 9px; opacity: .6; } @keyframes rw-marquee { to { transform: translateX(-50%); } } /* ---------- En-tête ---------- */ .rw-header { position: sticky; top: 0; z-index: 50; background: var(--rw-bg); border-bottom: 1px solid var(--rw-line); } .admin-bar .rw-header { top: 32px; } @media (max-width: 782px) { .admin-bar .rw-header { top: 0; } } .rw-header__row { min-height: 68px; } .rw-header .wp-block-site-logo img { width: auto; max-height: 28px; } @media (max-width: 781px) { .rw-header .wp-block-site-logo img { max-height: 22px; } } .rw-header .wp-block-navigation a { text-decoration: none; } .rw-header .wp-block-navigation-item__content:hover { opacity: .6; } .rw-header .wc-block-mini-cart__button, .rw-header .wc-block-customer-account a, .rw-header .wp-block-search__button { color: var(--rw-ink); } .rw-header .wc-block-mini-cart__badge { background: var(--rw-ink) !important; color: #fff !important; } .rw-header .wp-block-search__button { background: none; border: 0; padding: 6px; } .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-family: var(--rw-display); font-stretch: 115%; font-size: 22px; font-weight: 900; padding: 6px 0; border-bottom: 1px solid var(--rw-line); width: 100%; } /* ---------- Bannière principale ---------- */ .rw-hero { min-height: clamp(520px, 78vh, 820px) !important; } .rw-hero .wp-block-cover__inner-container { width: 100%; max-width: 1360px; } .rw-hero h1, .rw-hero h2 { font-size: clamp(44px, 9vw, 128px) !important; line-height: .88; letter-spacing: -.02em; max-width: 12ch; margin: 0 0 20px; color: #fff; } .rw-hero p { font-size: clamp(16px, 1.4vw, 19px); max-width: 46ch; color: #f4f4f5; } .rw-hero .wp-block-button__link { background: #fff; color: var(--rw-ink); } .rw-hero .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } /* ---------- Offres ---------- */ .rw-offres { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px !important; background: var(--rw-line); border: 1px solid var(--rw-line); border-radius: var(--rw-radius); overflow: hidden; } .rw-offres > * { margin: 0 !important; } .rw-offre { background: var(--rw-surface); padding: 22px 24px !important; display: flex !important; gap: 16px !important; align-items: center; } .rw-offre__big { font-family: var(--rw-display); font-stretch: 125%; font-weight: 900; font-size: 34px !important; line-height: 1; min-width: 3.2ch; margin: 0 !important; } .rw-offre__title { font-weight: 700; font-size: 15px; margin: 0 0 2px !important; } .rw-offre__text { font-size: 13px; color: var(--rw-muted); margin: 0 !important; } /* ---------- Cartes produits (onglets, liste, boutique) ---------- */ .rw-tabs__top { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .rw-tabs__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 22px; padding: 2px; } .rw-tabs__list::-webkit-scrollbar { display: none; } .rw-tab { flex: none; min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--rw-muted); border: 1px solid var(--rw-line); font-family: var(--rw-display); font-stretch: 112%; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; } .rw-tab:hover { color: var(--rw-ink); border-color: var(--rw-ink); } .rw-tab[aria-selected="true"] { background: var(--rw-ink); color: #fff; border-color: var(--rw-ink); } .rw-tabs__panel { animation: rw-tab-in .35s ease; } .rw-tabs__panel[hidden] { display: none; } @keyframes rw-tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .rw-tabs__more { display: flex; justify-content: center; margin-top: 26px; } .rw-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, calc((100% - 36px) / 4)); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--rw-line-strong) transparent; } @media (max-width: 749px) { .rw-rail { grid-auto-columns: 72%; } .rw-tabs__list { margin-inline: -16px; padding-inline: 16px; } .rw-tabs__more .rw-btn { width: 100%; } } .rw-card { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; } .rw-card__media { position: relative; display: block; aspect-ratio: 1; background: var(--rw-surface); border-radius: var(--rw-radius); overflow: hidden; margin-bottom: 6px; } .rw-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s, transform .6s; } .rw-card__media img + img { opacity: 0; } .rw-card:hover .rw-card__media img + img { opacity: 1; } .rw-card:hover .rw-card__media img:only-of-type { transform: scale(1.04); } .rw-card__title { font-size: 15px; font-weight: 600; line-height: 1.3; } .rw-card__price, .rw-card__price .amount { font-weight: 600; font-variant-numeric: tabular-nums; } .rw-card__price del, .rw-upsell__price del, .wc-block-components-product-price del { color: var(--rw-muted); font-weight: 400; margin-right: 6px; } .rw-card__price ins, .rw-upsell__price ins { text-decoration: none; } .rw-badge { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 5px 9px; border-radius: 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--rw-ink); color: #fff; } .rw-badge--out { background: var(--rw-raised); color: var(--rw-muted); } /* Blocs WooCommerce (boutique, catégories, produits liés) */ .wc-block-product-template .wc-block-components-product-image, .wp-block-woocommerce-product-image { background: var(--rw-surface); border-radius: var(--rw-radius); overflow: hidden; } .wc-block-product-template .wc-block-components-product-image img { aspect-ratio: 1; object-fit: cover; transition: transform .6s; } .wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); } .wc-block-product-template .wp-block-post-title, .wc-block-product-template .wp-block-post-title a { font-family: var(--rw-body) !important; font-stretch: 100%; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none; } .wc-block-product-template .wc-block-components-product-price { font-weight: 600; font-size: 15px; } .wc-block-components-product-sale-badge { background: var(--rw-ink) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px !important; } .wc-block-components-product-button__button, .wp-block-button.wc-block-components-product-button .wp-block-button__link { font-family: var(--rw-display) !important; font-stretch: 112%; font-weight: 800 !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--rw-radius) !important; background: var(--rw-ink) !important; color: #fff !important; min-height: 42px; } .wp-block-woocommerce-catalog-sorting select, .woocommerce-ordering select { border: 1px solid var(--rw-line-strong); border-radius: var(--rw-radius); padding: 10px 12px; background: #fff; font: inherit; font-size: 14px; } .wp-block-query-pagination { gap: 8px; font-weight: 600; } .wp-block-query-pagination-numbers .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; border: 1px solid var(--rw-line); border-radius: var(--rw-radius); text-decoration: none; } .wp-block-query-pagination-numbers .current { background: var(--rw-ink); color: #fff; border-color: var(--rw-ink); } .woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: 13px; color: var(--rw-muted); } .woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: var(--rw-muted); text-decoration: none; } .rw-crumb-sep { margin: 0 8px; opacity: .6; } /* ---------- Fiche produit ---------- */ .rw-product { align-items: flex-start; } .rw-product__info { position: sticky; top: 100px; } .rw-product .wp-block-post-title { font-size: clamp(26px, 3vw, 40px) !important; line-height: 1 !important; margin-bottom: 4px; } .rw-product .wc-block-components-product-price { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .rw-product .woocommerce-product-gallery { background: var(--rw-surface); border-radius: var(--rw-radius); overflow: hidden; } .rw-product .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px; margin: 0; list-style: none; } .rw-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 2px; opacity: .6; cursor: pointer; transition: opacity .2s; } .rw-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .rw-product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; } .rw-product .woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-decoration: none; } .rw-deal { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--rw-line-strong); border-radius: 999px; font-size: 13px; font-weight: 600; } .rw-deal strong { background: var(--rw-ink); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px; } /* Formulaire d'ajout au panier */ .wp-block-add-to-cart-form form.cart, .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 8px 0 0; } form.cart .quantity input.qty { width: 72px; min-height: 54px; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-radius); text-align: center; font: 600 16px var(--rw-body); background: #fff; } form.cart .single_add_to_cart_button, form.cart button[type="submit"] { flex: 1 1 220px; min-height: 54px; border: 0; border-radius: var(--rw-radius); background: var(--rw-ink) !important; color: #fff !important; font-family: var(--rw-display) !important; font-stretch: 112%; font-weight: 800 !important; font-size: 15px !important; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .2s, box-shadow .2s; } form.cart .single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(10,10,11,.2); } form.cart .single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; } table.variations { width: 100%; border: 0; margin: 0 0 6px; border-collapse: collapse; } table.variations th, table.variations td { display: block; padding: 0; border: 0; text-align: left; } table.variations th.label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 10px 0 8px; } table.variations select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-radius); background: #fff; font: 600 15px var(--rw-body); color: var(--rw-ink); } table.variations select:focus { border-color: var(--rw-ink); outline: none; } .reset_variations { font-size: 13px; color: var(--rw-muted); } .woocommerce-variation-price { margin: 8px 0; font-weight: 700; } .woocommerce-variation-availability .stock { font-size: 13px; color: var(--rw-muted); } .single_variation_wrap { width: 100%; } .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 10px; } /* Réassurance de la fiche */ .rw-pd-trust { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rw-line); display: grid; gap: 10px; font-size: 14px; } .rw-pd-trust li { display: flex; align-items: center; gap: 10px; } .rw-pd-trust li::before { content: '✓'; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--rw-ink); color: #fff; font-size: 12px; font-weight: 700; } /* Onglets description / avis */ .wp-block-woocommerce-product-details .wc-tabs, .woocommerce-tabs ul.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--rw-line); padding: 0; margin: 0 0 20px; list-style: none; } .wp-block-woocommerce-product-details .wc-tabs li, .woocommerce-tabs ul.tabs li { margin: 0; } .wp-block-woocommerce-product-details .wc-tabs li a, .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 14px; font-weight: 700; font-size: 14px; color: var(--rw-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .wp-block-woocommerce-product-details .wc-tabs li.active a, .woocommerce-tabs ul.tabs li.active a { color: var(--rw-ink); border-color: var(--rw-ink); } .woocommerce-Tabs-panel h2 { font-size: 22px !important; } /* ---------- Guide des tailles ---------- */ .rw-sg-root { margin-top: 12px; } .rw-sg-trigger { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 0; color: var(--rw-ink); font: 600 14px/1 var(--rw-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } dialog.rw-sg { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(520px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--rw-line); border-radius: 0; background: var(--rw-bg); color: var(--rw-ink); display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.7,.2,1); font-family: var(--rw-body); } dialog.rw-sg:not([open]) { display: none; } dialog.rw-sg.is-in { transform: none; } dialog.rw-sg::backdrop { background: rgba(10,10,11,.45); backdrop-filter: blur(3px); } .rw-sg__top { flex: none; padding: 18px 20px 14px; border-bottom: 1px solid var(--rw-line); } .rw-sg__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; } .rw-sg__bar h2 { margin: 0; font-size: 20px !important; } .rw-sg__x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rw-line); background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; } .rw-sg__switch { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; background: var(--rw-surface); border: 1px solid var(--rw-line); } .rw-sg__switch button { position: relative; z-index: 1; border: 0; background: none; color: var(--rw-muted); font: 700 13px/1 var(--rw-body); letter-spacing: .04em; text-transform: uppercase; padding: 11px 6px; border-radius: 999px; cursor: pointer; transition: color .2s; } .rw-sg__switch button[aria-selected="true"] { color: #fff; } .rw-sg__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--rw-ink); transition: transform .28s cubic-bezier(.2,.7,.2,1); } .rw-sg__body { flex: 1; overflow-y: auto; padding: 20px; overscroll-behavior: contain; } .rw-sg__body [data-panel] { display: grid; gap: 18px; } .rw-sg__body [data-panel][hidden] { display: none; } .rw-sg__intro { margin: 0; font-size: 14px; color: var(--rw-muted); line-height: 1.5; } .rw-sg__find { border-radius: 12px; background: var(--rw-surface); border: 1px solid var(--rw-line); padding: 16px; display: grid; gap: 10px; } .rw-sg__find label { font-weight: 700; font-size: 14px; } .rw-sg__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rw-sg__row input { width: 110px; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rw-line-strong); background: #fff; color: var(--rw-ink); font: 600 16px var(--rw-body); font-variant-numeric: tabular-nums; } .rw-sg__out { margin: 0; font-size: 14px; color: var(--rw-soft); } .rw-sg__out strong { font-family: var(--rw-display); font-stretch: 125%; font-size: 22px; font-weight: 900; color: var(--rw-ink); margin-left: 4px; } .rw-sg__tw { overflow-x: auto; border: 1px solid var(--rw-line); border-radius: 12px; } .rw-sg table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; margin: 0; } .rw-sg th, .rw-sg td { padding: 10px 12px; text-align: center; border: 0; border-bottom: 1px solid var(--rw-line); white-space: nowrap; } .rw-sg th { position: sticky; top: 0; background: var(--rw-surface); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rw-muted); font-weight: 700; } .rw-sg tbody tr:last-child td { border-bottom: 0; } .rw-sg td:first-child { font-weight: 800; } .rw-sg tr.is-match td { background: var(--rw-ink); color: #fff; font-weight: 800; } .rw-sg__h3 { margin: 4px 0 0; font-family: var(--rw-body) !important; font-stretch: 100% !important; font-size: 13px !important; font-weight: 800; letter-spacing: .08em; } .rw-sg__how { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; } .rw-sg__how li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--rw-soft); } .rw-sg__how li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--rw-surface); border: 1px solid var(--rw-line); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--rw-ink); } .rw-sg__note { margin: 18px 0 0; font-size: 13px; color: var(--rw-muted); line-height: 1.55; } .rw-sg__foot { flex: none; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rw-line); } .rw-sg__ok { width: 100%; height: 48px; border: 0; border-radius: 8px; background: var(--rw-ink); color: #fff; font-family: var(--rw-display); font-stretch: 112%; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } /* ---------- Panier : barre de progression ---------- */ .rw-palier { margin: 0 0 24px; border-radius: 14px; padding: 16px 18px; background: var(--rw-surface); border: 1px solid var(--rw-line); } .rw-palier[hidden] { display: none; } .rw-palier.is-done { border-color: var(--rw-ink); } .rw-palier__msg { margin: 0 0 12px; font-size: 15px; line-height: 1.4; display: flex; align-items: center; gap: 10px; } .rw-palier__msg strong { font-weight: 800; } .rw-palier__ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--rw-ink); color: #fff; font-size: 15px; font-weight: 700; } .rw-palier__track { position: relative; height: 8px; border-radius: 99px; background: var(--rw-line); overflow: hidden; } .rw-palier__bar { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: var(--rw-ink); transition: width .6s cubic-bezier(.2,.7,.2,1); } .rw-palier__steps { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--rw-muted); } .rw-palier__steps span.is-on { color: var(--rw-ink); font-weight: 700; } /* ---------- Panier : upsell ---------- */ .rw-upsell { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--rw-line); } .rw-upsell__head { margin-bottom: 18px; } .rw-upsell__title { font-size: clamp(22px, 2.6vw, 30px) !important; margin: 0 0 6px; } .rw-upsell__head p { margin: 0; color: var(--rw-muted); font-size: 14px; } .rw-upsell__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; } .rw-upsell__card { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--rw-line); border-radius: 10px; background: var(--rw-surface); } .rw-upsell__img { flex: none; width: 76px; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #fff; } .rw-upsell__img img { width: 100%; height: 100%; object-fit: cover; } .rw-upsell__body { min-width: 0; display: grid; gap: 4px; } .rw-upsell__name { font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; color: inherit; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .rw-upsell__price { font-size: 14px; font-weight: 600; } .rw-upsell__btn { justify-self: start; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--rw-ink); color: #fff !important; text-decoration: none; font-family: var(--rw-display); font-stretch: 112%; font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } /* ---------- Panier et paiement (blocs WooCommerce) ---------- */ .wc-block-cart .wc-block-components-button:not(.is-link), .wc-block-checkout .wc-block-components-button:not(.is-link), .wc-block-mini-cart__footer .wc-block-components-button:not(.is-link) { background: var(--rw-ink) !important; color: #fff !important; border-radius: var(--rw-radius) !important; min-height: 54px; font-family: var(--rw-display) !important; font-stretch: 112%; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; } .wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart.wc-block-components-button { background: transparent !important; color: var(--rw-ink) !important; border: 1px solid var(--rw-line-strong) !important; } .wc-block-cart-items__header { font-size: 12px; letter-spacing: .14em; color: var(--rw-muted); } .wc-block-components-product-name { font-weight: 600; text-decoration: none; } .wc-block-components-totals-fees .wc-block-components-totals-item__value { font-weight: 700; } .wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control input, .wc-blocks-components-select__select { border-radius: var(--rw-radius) !important; } .wc-block-cart__submit-container { padding-top: 6px; } /* ---------- Comparatif « Pourquoi RE:WEAR » ---------- */ .rw-why { border: 1px solid var(--rw-line); border-radius: var(--rw-radius); overflow: hidden; } .rw-why table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; } .rw-why th, .rw-why td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--rw-line); text-align: center; } .rw-why tr:last-child td { border-bottom: 0; } .rw-why thead th { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--rw-muted); font-weight: 700; background: var(--rw-bg); } .rw-why td:first-child, .rw-why th:first-child { text-align: left; font-weight: 600; } .rw-why td:nth-child(2), .rw-why th:nth-child(2) { background: var(--rw-surface); font-weight: 700; color: var(--rw-ink); } .rw-why td:nth-child(3) { color: var(--rw-muted); } .rw-why td:nth-child(2)::before { content: '✓'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--rw-ink); color: #fff; font-size: 12px; vertical-align: middle; } @media (max-width: 600px) { .rw-why th, .rw-why td { padding: 10px 8px; font-size: 13px; } .rw-why td:nth-child(2)::before { display: none; } } /* ---------- Réassurance ---------- */ .rw-trust { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(20px, 3vw, 40px) !important; } .rw-trust > * { margin: 0 !important; } .rw-trust h3 { font-family: var(--rw-body) !important; font-stretch: 100% !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 700 !important; margin: 0 0 4px !important; } .rw-trust p { font-size: 14px; color: var(--rw-muted); margin: 0; line-height: 1.5; } .rw-trust .rw-trust__ic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rw-line-strong); display: grid; place-items: center; font-size: 18px; margin: 0 0 12px !important; } /* ---------- FAQ ---------- */ .rw-faq .wp-block-details { border-bottom: 1px solid var(--rw-line); padding: 0; margin: 0; } .rw-faq .wp-block-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 17px; font-weight: 600; } .rw-faq .wp-block-details summary::-webkit-details-marker { display: none; } .rw-faq .wp-block-details summary::after { content: '+'; font-family: var(--rw-display); font-size: 24px; line-height: 1; transition: transform .25s; } .rw-faq .wp-block-details[open] summary::after { transform: rotate(45deg); } .rw-faq .wp-block-details > :not(summary) { margin: 0 0 22px; color: var(--rw-soft); line-height: 1.65; max-width: 62ch; } /* ---------- Bloc final (CTA) ---------- */ .rw-cta { border-radius: 16px; background: radial-gradient(90% 130% at 50% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%), var(--rw-ink) !important; color: #fff; } .rw-cta h2 { color: #fff; } .rw-cta .rw-eyebrow { color: rgba(255,255,255,.75); } .rw-cta p { color: rgba(255,255,255,.85); } .rw-cta .wp-block-button__link { background: #fff; color: var(--rw-ink); } .rw-cta .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } .rw-cta__perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; } .rw-cta__perks li { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); font-size: 13px; font-weight: 600; } /* ---------- Pied de page ---------- */ .rw-footer { border-top: 1px solid var(--rw-line); background: var(--rw-surface); } .rw-footer h3 { font-family: var(--rw-body) !important; font-stretch: 100% !important; font-size: 12px !important; letter-spacing: .16em; font-weight: 800; margin: 0 0 14px; } .rw-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; } .rw-footer a { text-decoration: none; color: var(--rw-soft); } .rw-footer a:hover { color: var(--rw-ink); } .rw-footer .wp-block-site-logo img { max-height: 26px; width: auto; } .rw-footer__bottom { border-top: 1px solid var(--rw-line); font-size: 13px; color: var(--rw-muted); } /* ---------- Notices WooCommerce ---------- */ .wc-block-components-notice-banner { border-radius: var(--rw-radius); } .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--rw-radius); border: 1px solid var(--rw-line); background: var(--rw-surface); padding: 14px 18px; list-style: none; } @media (prefers-reduced-motion: reduce) { .rw-annonce__track { animation: none; } dialog.rw-sg, .rw-sg__pill, .rw-palier__bar { transition: none; } .rw-tabs__panel { animation: none; } } /* ---------- Ajustements WooCommerce (priorité sur les styles par défaut) ---------- */ .rw-product .woocommerce-product-gallery, .woocommerce .rw-product div.images, .rw-product div.images { width: 100% !important; float: none !important; margin: 0 !important; } .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 20px !important; overflow: visible; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce .woocommerce-tabs ul.tabs::before { border-bottom: 1px solid var(--rw-line) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce .woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce .woocommerce-tabs ul.tabs li::before, .woocommerce .woocommerce-tabs ul.tabs li::after { display: none !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a, .woocommerce .woocommerce-tabs ul.tabs li a { padding: 12px 14px !important; color: var(--rw-muted) !important; font-weight: 700 !important; border-bottom: 2px solid transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce .woocommerce-tabs ul.tabs li.active a { color: var(--rw-ink) !important; border-color: var(--rw-ink); } .woocommerce-Tabs-panel > h2:first-child, .woocommerce-Reviews-title { display: none; } .woocommerce table.shop_attributes { border: 1px solid var(--rw-line); border-radius: var(--rw-radius); } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: 12px 16px !important; border-color: var(--rw-line) !important; background: none !important; font-style: normal !important; text-align: left; } .woocommerce table.shop_attributes td p { margin: 0; padding: 0 !important; } /* Bannière : texte aligné à gauche */ .rw-hero .wp-block-cover__inner-container { margin-inline: auto; } .rw-hero .wp-block-cover__inner-container > * { margin-left: 0 !important; } /* Icônes de réassurance */ .rw-trust h3.rw-ic { position: relative; padding-top: 56px; } .rw-trust h3.rw-ic::before { content: ''; position: absolute; top: 12px; left: 12px; width: 20px; height: 20px; background: var(--rw-ink); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .rw-trust h3.rw-ic::after { content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 44px; border: 1px solid var(--rw-line-strong); border-radius: 50%; box-sizing: border-box; } .rw-ic-truck { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); } .rw-ic-return { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h11a5 5 0 0 1 0 10h-3'/%3E%3C/svg%3E"); } .rw-ic-lock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } .rw-ic-chat { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); } .rw-hero { padding-left: clamp(16px, 4vw, 48px) !important; padding-right: clamp(16px, 4vw, 48px) !important; } .rw-hero .wp-block-cover__inner-container { max-width: 1360px; } .rw-product .wp-block-woocommerce-product-image-gallery, .rw-product .wp-block-woocommerce-product-image-gallery > * { width: 100% !important; max-width: none !important; } .rw-product .woocommerce-product-gallery__wrapper, .rw-product .woocommerce-product-gallery__image, .rw-product .woocommerce-product-gallery__image img { width: 100% !important; } .woocommerce div.product form.cart .variations select, table.variations select { width: 100% !important; max-width: 420px; margin: 0 !important; } table.variations tbody, table.variations tr { display: block; width: 100%; } table.variations td.value { width: 100%; } /* ===================================================================== EFFETS (brillance des titres, reflets, bordure chromée, apparitions) ===================================================================== */ :root { --rw-shine-a: #0a0a0b; --rw-shine-b: #8b8b93; } .is-style-rw-shine, .rw-shine { background-image: linear-gradient(105deg, var(--rw-shine-a) 0%, var(--rw-shine-b) 16%, var(--rw-shine-a) 32%, var(--rw-shine-a) 50%, var(--rw-shine-b) 66%, var(--rw-shine-a) 82%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: rw-shine-text 6s linear infinite; } .rw-hero .is-style-rw-shine, .rw-cta .is-style-rw-shine, .rw-dark .is-style-rw-shine { --rw-shine-a: #ffffff; --rw-shine-b: #9b9ba3; } @keyframes rw-shine-text { from { background-position: 130% 0; } to { background-position: -130% 0; } } /* Reflet qui passe sur les boutons */ .wp-block-button__link, .rw-btn, form.cart .single_add_to_cart_button, .rw-upsell__btn, .rw-form button { position: relative; overflow: hidden; isolation: isolate; } .wp-block-button__link::after, .rw-btn::after, form.cart .single_add_to_cart_button::after, .rw-form button::after { content: ''; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 40%; pointer-events: none; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.18) 45%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.18) 55%, transparent); transform: skewX(-18deg); animation: rw-sweep 6s ease-in-out infinite; } .wp-block-button.is-style-outline .wp-block-button__link::after, .rw-btn--ghost::after { background: linear-gradient(100deg, transparent, rgba(10,10,11,.06) 45%, rgba(10,10,11,.12) 50%, rgba(10,10,11,.06) 55%, transparent); } .rw-hero .wp-block-button__link::after, .rw-cta .wp-block-button__link::after { background: linear-gradient(100deg, transparent, rgba(10,10,11,.08) 45%, rgba(10,10,11,.16) 50%, rgba(10,10,11,.08) 55%, transparent); } .rw-hero .is-style-outline .wp-block-button__link::after, .rw-cta .is-style-outline .wp-block-button__link::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.12) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.12) 55%, transparent); } @keyframes rw-sweep { 0%, 70% { left: -60%; } 100% { left: 130%; } } /* Reflet au survol des photos produits */ .rw-card__media::after, .wc-block-product .wc-block-components-product-image::after, .rw-tile::before { content: ''; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 40%; z-index: 4; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35) 45%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.35) 55%, transparent); transform: skewX(-18deg); } .wc-block-product .wc-block-components-product-image { position: relative; } .rw-card:hover .rw-card__media::after, .wc-block-product:hover .wc-block-components-product-image::after, .rw-tile:hover::before { animation: rw-sweep-once .9s ease-out; } @keyframes rw-sweep-once { from { left: -60%; } to { left: 130%; } } /* Bordure chromée animée */ .rw-chrome { position: relative; } .rw-chrome::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; background: linear-gradient(105deg, var(--rw-line) 30%, var(--rw-ink) 50%, var(--rw-line) 70%); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rw-shine-text 6s linear infinite; } .rw-cta.rw-chrome::before { background: linear-gradient(105deg, rgba(255,255,255,.08) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.08) 70%); background-size: 300% 100%; } /* Apparition douce des sections au défilement */ html.rw-js .rw-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } html.rw-js .rw-reveal.is-in { opacity: 1; transform: none; } .block-editor-page .rw-reveal, .editor-styles-wrapper .rw-reveal { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .is-style-rw-shine, .rw-shine, .rw-chrome::before, .wp-block-button__link::after, .rw-btn::after, form.cart .single_add_to_cart_button::after, .rw-form button::after { animation: none !important; } html.rw-js .rw-reveal { opacity: 1; transform: none; transition: none; } } /* ===================================================================== SECTIONS SUPPLÉMENTAIRES ===================================================================== */ .rw-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: clamp(24px, 4vw, 40px) !important; } .rw-sub { color: var(--rw-muted); max-width: 52ch; margin: 10px 0 0 !important; } /* Marques qui défilent */ .rw-brands { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .rw-brands__track { display: flex; width: max-content; animation: rw-marquee 40s linear infinite; } .rw-brands:hover .rw-brands__track { animation-play-state: paused; } .rw-brands__dup { display: contents; } .rw-brand { flex: none; display: grid; place-items: center; height: 88px; padding: 0 clamp(20px, 3vw, 40px); text-decoration: none; color: var(--rw-ink); } .rw-brand img { max-height: 56px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .85; transition: opacity .2s, filter .2s, transform .3s; } .rw-brand:hover img { opacity: 1; filter: none; transform: scale(1.06); } .rw-brand__name { font-family: var(--rw-display); font-stretch: 125%; font-weight: 900; font-size: clamp(22px, 2.6vw, 34px); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; } /* Tuiles des collections */ .rw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; } .rw-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--rw-radius); overflow: hidden; background: var(--rw-surface); text-decoration: none; color: #fff; isolation: isolate; } .rw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .rw-tile:hover img { transform: scale(1.05); } .rw-tile__ini { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--rw-display); font-stretch: 125%; font-weight: 900; font-size: 88px; text-transform: uppercase; color: var(--rw-line-strong); } .rw-tile__veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,11,.85)); z-index: 1; } .rw-tile__body { position: absolute; inset: auto 0 0 0; padding: 18px; z-index: 3; display: flex; align-items: end; justify-content: space-between; gap: 12px; } .rw-tile__tag { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; } .rw-tile__title { display: block; font-family: var(--rw-display); font-stretch: 125%; font-weight: 900; font-size: clamp(22px, 2.4vw, 30px); text-transform: uppercase; line-height: .95; } .rw-tile__arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); display: grid; place-items: center; transition: background .2s, color .2s; } .rw-tile:hover .rw-tile__arrow { background: #fff; color: #000; } /* Avis clients */ .rw-score { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .rw-score__big { font-family: var(--rw-display); font-stretch: 125%; font-weight: 900; font-size: 52px; line-height: 1; } .rw-score small { display: block; font-size: 13px; color: var(--rw-muted); margin-top: 2px; } .rw-stars { color: var(--rw-ink); letter-spacing: 2px; font-size: 16px; line-height: 1; } .rw-stars__off { color: var(--rw-line-strong); } .rw-reviews { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 24px) / 3)); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; } @media (max-width: 749px) { .rw-reviews { grid-auto-columns: 86%; } } .rw-review { scroll-snap-align: start; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 14px; } .rw-review__text { margin: 0; line-height: 1.6; font-size: 15px; } .rw-review__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; margin-top: auto; } .rw-review__ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--rw-soft); } .rw-review__ok::before { content: '✓'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--rw-ink); color: #fff; font-size: 10px; } .rw-review__product { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rw-line); text-decoration: none; color: inherit; font-size: 13px; font-weight: 600; } .rw-review__product img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: #fff; } /* Look de la semaine */ .rw-look { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; } @media (max-width: 849px) { .rw-look { grid-template-columns: 1fr; } } .rw-look__media { position: relative; border-radius: 12px; overflow: hidden; background: var(--rw-surface); } .rw-look__media img { width: 100%; height: auto; display: block; } .rw-dot { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; display: grid; place-items: center; animation: rw-pulse 2.4s ease-out infinite; } .rw-dot span { width: 24px; height: 24px; border-radius: 50%; background: var(--rw-ink); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; transition: transform .2s; } .rw-dot.is-active span, .rw-dot:hover span { transform: scale(1.2); } @keyframes rw-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } } .rw-look__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rw-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--rw-line); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .2s, background .2s; } .rw-item:hover, .rw-item.is-active { border-color: var(--rw-ink); background: var(--rw-surface); } .rw-item__n { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rw-line-strong); display: grid; place-items: center; font-size: 12px; font-weight: 800; } .rw-item.is-active .rw-item__n { background: var(--rw-ink); color: #fff; border-color: var(--rw-ink); } .rw-item img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--rw-surface); } .rw-item__txt { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14px; } .rw-item__txt small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rw-muted); } .rw-item__go { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rw-line); transition: background .2s, color .2s; } .rw-item:hover .rw-item__go { background: var(--rw-ink); color: #fff; border-color: var(--rw-ink); } .rw-look-deal { display: inline-flex; padding: 8px 14px; border: 1px solid var(--rw-line-strong); border-radius: 999px; font-size: 13px; font-weight: 700; } /* Vidéos clients */ .rw-videos { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(200px, calc((100% - 48px) / 5)); gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; } @media (max-width: 749px) { .rw-videos { grid-auto-columns: 62%; } } .rw-videos > * { margin: 0 !important; } .rw-vid { scroll-snap-align: start; border-radius: 12px; overflow: hidden; border: 1px solid var(--rw-line); background: var(--rw-surface); } .rw-vid .wp-block-video { margin: 0; aspect-ratio: 9 / 16; background: var(--rw-raised); } .rw-vid .wp-block-video video { width: 100%; height: 100%; object-fit: cover; } .rw-vid p { margin: 0; padding: 10px 12px; font-size: 13px; font-weight: 600; } body:not(.block-editor-page) .rw-vid:not(:has(video)) { display: none; } body:not(.block-editor-page) .rw-section-videos:not(:has(video)) { display: none; } /* Formulaires d'inscription */ .rw-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; } .rw-form input[type="email"] { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 18px; background: #fff; color: var(--rw-ink); border: 1px solid var(--rw-line-strong); border-radius: var(--rw-radius); font: inherit; } .rw-form input[type="email"]:focus { border-color: var(--rw-ink); outline: none; } .rw-form button { min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--rw-radius); background: var(--rw-ink); color: #fff; font-family: var(--rw-display); font-stretch: 112%; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .rw-form__legal { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--rw-muted); } .rw-form__ok { margin: 0; padding: 14px 18px; border-radius: var(--rw-radius); background: var(--rw-surface); border: 1px solid var(--rw-ink); font-weight: 600; } .rw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .has-text-align-center .rw-form, .rw-center .rw-form { margin-inline: auto; justify-content: center; } .rw-center .rw-form__legal { text-align: center; } .rw-news { border-radius: 16px; background: var(--rw-surface); } /* Boutique physique / Appli */ .rw-badge-soon { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--rw-ink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .rw-badge-soon::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.3); } .rw-store { border: 1px solid var(--rw-line-strong); border-radius: 16px; overflow: hidden; } .rw-store .wp-block-media-text__media { min-height: 320px; background: var(--rw-raised); } .rw-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .rw-perks li { display: flex; gap: 10px; align-items: center; font-weight: 600; } .rw-perks li::before { content: '✓'; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--rw-ink); color: #fff; font-size: 12px; } .rw-app { border-radius: 16px; background: var(--rw-surface); overflow: hidden; } .rw-phone { position: relative; width: min(240px, 70%); aspect-ratio: 9 / 19; margin: 0 auto; border-radius: 36px; background: var(--rw-ink); padding: 10px; box-shadow: 0 30px 60px rgba(10,10,11,.18); } .rw-phone__screen { width: 100%; height: 100%; border-radius: 28px; background: #fff; display: grid; place-items: center; overflow: hidden; } .rw-phone__screen img { width: 70% !important; height: auto !important; } /* ===================================================================== FICHE PRODUIT : STOCK, TAILLES, LIVRAISON, PAIEMENT, ACCORDÉONS ===================================================================== */ .rw-stock { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: 13px; font-weight: 600; } .rw-stock i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.15); animation: rw-blink 2s infinite; } .rw-stock.is-low i { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.15); } .rw-stock.is-out i { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.15); animation: none; } @keyframes rw-blink { 50% { opacity: .45; } } .rw-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 0 0 8px; max-width: 460px; } .rw-size { min-height: 46px; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-radius); background: #fff; color: var(--rw-ink); font: 600 14px var(--rw-body); cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .rw-size:hover { border-color: var(--rw-ink); } .rw-size.is-on { background: var(--rw-ink); color: #fff; border-color: var(--rw-ink); } .rw-size:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; } select.rw-sizes-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; } .rw-ship { margin: 18px 0 0; border: 1px solid var(--rw-line); border-radius: 14px; padding: 16px; background: var(--rw-surface); } .rw-ship__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 15px; } .rw-ship__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .rw-ship__badge i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; } .rw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .rw-steps li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; } .rw-steps li::before { content: ''; position: absolute; top: 22px; left: calc(50% + 28px); width: calc(100% - 56px); height: 2px; background: linear-gradient(90deg, var(--rw-ink), var(--rw-line)); } .rw-steps li:last-child::before { display: none; } .rw-steps__ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--rw-ink); background: #fff; } .rw-steps li:first-child .rw-steps__ic { background: var(--rw-ink); color: #fff; } .rw-steps b { font-size: 13px; } .rw-steps small { font-size: 12px; color: var(--rw-muted); } .rw-ship__note { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff; font-size: 12px; text-align: center; color: var(--rw-soft); } .rw-pay { margin: 16px 0 0; text-align: center; } .rw-pay ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .rw-pay li { padding: 6px 10px; border: 1px solid var(--rw-line); border-radius: 6px; font-size: 12px; font-weight: 700; background: #fff; } .rw-pay p { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--rw-muted); } .rw-acc { margin: 18px 0 0; } .rw-acc details { border-bottom: 1px solid var(--rw-line); } .rw-acc details:first-child { border-top: 1px solid var(--rw-line); } .rw-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-family: var(--rw-display); font-stretch: 112%; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } .rw-acc summary::-webkit-details-marker { display: none; } .rw-acc summary::after { content: '+'; font-size: 20px; line-height: 1; transition: transform .25s; } .rw-acc details[open] summary::after { transform: rotate(45deg); } .rw-acc__body { padding: 0 0 16px; font-size: 14px; color: var(--rw-soft); line-height: 1.6; } .rw-acc__body p { margin: 0 0 8px; } .rw-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--rw-line); transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.7,.2,1); } .rw-sticky.is-on { transform: none; } .rw-sticky__info { flex: 1; min-width: 0; display: grid; font-size: 13px; } .rw-sticky__info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rw-sticky__info del { color: var(--rw-muted); } .rw-sticky__btn { flex: none; min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--rw-radius); background: var(--rw-ink); color: #fff; font-family: var(--rw-display); font-stretch: 112%; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } @media (min-width: 850px) { .rw-sticky { display: none; } } .rw-store .wp-block-media-text__media:empty { position: relative; align-self: stretch; background: radial-gradient(120% 90% at 70% 20%, #2a2a30 0%, #111113 55%, #0a0a0b 100%); } .rw-store .wp-block-media-text__media:empty::after { content: 'RE:WEAR'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--rw-display); font-stretch: 125%; font-weight: 900; font-size: clamp(32px, 5vw, 64px); color: rgba(255,255,255,.12); letter-spacing: -.01em; } .rw-store .wp-block-media-text__media img { height: 100%; object-fit: cover; } .rw-store .wp-block-media-text__content { padding: clamp(28px, 4vw, 56px) !important; } /* ===================================================================== MOBILE + CONVERSION ===================================================================== */ /* Badge promo de la galerie produit */ .woocommerce span.onsale, span.onsale { position: absolute; top: 12px; left: 12px; right: auto; z-index: 5; min-width: 0; min-height: 0; width: auto; height: auto; margin: 0; padding: 6px 10px; border-radius: 2px; background: var(--rw-ink); color: #fff; font: 700 11px/1 var(--rw-body); letter-spacing: .08em; text-transform: uppercase; } .rw-product .woocommerce-product-gallery { position: relative; } /* Réassurance sous le bouton de paiement du panier */ .rw-cart-trust { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: var(--rw-soft); } .rw-cart-trust li { display: flex; align-items: center; gap: 8px; } .rw-cart-trust li::before { content: '✓'; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--rw-ink); color: #fff; font-size: 10px; } /* En-tête du paiement (sans distraction) */ .rw-checkout-head { border-bottom: 1px solid var(--rw-line); } .rw-checkout-head .wp-block-site-logo img { max-height: 26px; width: auto; } .rw-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .rw-secure::before { content: ''; width: 14px; height: 14px; background: var(--rw-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 781px) { /* Bannière plus courte : les produits arrivent plus vite */ .rw-hero { min-height: 68vh !important; } .rw-hero .wp-block-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rw-hero .wp-block-button, .rw-hero .wp-block-button__link { width: 100%; } .rw-hero .wp-block-button__link { padding-left: 12px; padding-right: 12px; font-size: 12px; } /* Offres compactes */ .rw-offre { padding: 14px 16px !important; } .rw-offre__big { font-size: 26px !important; } /* Appli : pas de maquette de téléphone sur mobile */ .rw-app .wp-block-column:last-child { display: none; } /* Boutons pleine largeur */ .rw-form button { flex: 1 1 100%; } .rw-cta .wp-block-buttons { flex-direction: column; align-items: stretch; } .rw-cta .wp-block-button__link { width: 100%; } /* Fiche produit */ form.cart .single_add_to_cart_button { font-size: 13px !important; letter-spacing: .06em; } .rw-product .wp-block-post-title { font-size: 28px !important; } .rw-product__info { position: static; } .rw-steps small { font-size: 11px; } /* Titres un peu moins gros */ .rw-h2, h2.wp-block-heading { font-size: clamp(26px, 8vw, 36px) !important; } .rw-hero h1 { font-size: clamp(40px, 13vw, 64px) !important; } } /* ---------- Marques (galerie de logos qui défile) ---------- */ body:not(.block-editor-page) .rw-brands-gallery { display: block !important; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .rw-brands-gallery .rw-brands__track { display: flex; width: max-content; align-items: center; animation: rw-marquee 40s linear infinite; } .rw-brands-gallery:hover .rw-brands__track { animation-play-state: paused; } .rw-brands-gallery .rw-brands__track > figure.wp-block-image { flex: none !important; width: auto !important; margin: 0 !important; padding: 0 clamp(20px, 3vw, 40px); height: 88px; display: grid !important; place-items: center; } .rw-brands-gallery .rw-brands__track > figure.wp-block-image img { height: auto !important; max-height: 56px; width: auto !important; max-width: 150px; object-fit: contain !important; filter: grayscale(1) contrast(1.1); opacity: .85; transition: opacity .2s, filter .2s, transform .3s; } .rw-brands-gallery .rw-brands__track > figure.wp-block-image:hover img { opacity: 1; filter: none; transform: scale(1.06); } .rw-brands-gallery figcaption { display: none; } /* ---------- Look de la semaine (photo + produits choisis) ---------- */ .rw-look-photo { margin: 0; border-radius: 12px; overflow: hidden; background: var(--rw-surface); } .rw-look-photo img { width: 100%; height: auto; display: block; } .rw-look-products .wc-block-product-template { gap: 12px !important; } .rw-look-products .wc-block-product { border: 1px solid var(--rw-line); border-radius: 12px; padding: 10px; transition: border-color .2s; } .rw-look-products .wc-block-product:hover { border-color: var(--rw-ink); } .rw-look-products .wp-block-post-title { margin: 8px 0 2px !important; } .rw-look-products .wc-block-components-product-button { margin-top: 8px; } .rw-look-products .wc-block-components-product-button__button { width: 100%; } @media (max-width: 781px) { .rw-look-cols { gap: 20px !important; } } /* ---------- Téléphone de l'appli ---------- */ .rw-phone { display: flex; align-items: center; justify-content: center; overflow: hidden; } .rw-phone .rw-phone__img { margin: 0; width: 100%; height: 100%; border-radius: 28px; background: #fff; display: grid; place-items: center; overflow: hidden; } .rw-phone .rw-phone__img img { width: 100%; height: 100%; object-fit: cover; } .rw-phone .rw-phone__img img[src*="logo-rewear"] { width: 70%; height: auto; object-fit: contain; } /* ---------- Onglets « Trouve ton style » (blocs) ---------- */ body:not(.block-editor-page) .rw-tabpanel__label { display: none; } .editor-styles-wrapper .rw-tabpanel { border: 1px dashed var(--rw-line-strong); border-radius: 8px; padding: 12px; margin-bottom: 16px; } .editor-styles-wrapper .rw-tabpanel__label { font-family: var(--rw-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .rw-tabpanel { animation: rw-tab-in .35s ease; } .rw-tabpanel[hidden] { display: none !important; } @media (max-width: 749px) { .rw-tabpanel .wc-block-product-template { display: grid !important; grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 10px; } .rw-tabpanel .wc-block-product { scroll-snap-align: start; width: auto !important; max-width: none !important; } } /* Cartes d'avis faites avec des blocs */ .rw-reviews.wp-block-group { display: grid !important; } .rw-reviews > .rw-review { margin: 0 !important; } .rw-review .rw-review__img { margin: 0; border-radius: 8px; overflow: hidden; } .rw-review .rw-review__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .rw-review p { margin: 0; } .rw-review .rw-stars { font-size: 16px; letter-spacing: 2px; } .rw-review__name { font-weight: 700; font-size: 14px; } .rw-review__meta { margin-top: auto !important; } .editor-styles-wrapper .rw-reviews { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* ---------- Avis clients (comme sur Shopify) ---------- */ .rw-rv__top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: end; margin-bottom: clamp(24px, 4vw, 40px); } .rw-rv__sub { margin: 14px 0 0; color: var(--rw-muted); line-height: 1.6; max-width: 46ch; } .rw-rv__score { justify-self: end; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: center; padding: 18px 22px; border-radius: var(--rw-radius); background: var(--rw-surface); } .rw-rv__big { grid-row: span 2; font-family: var(--rw-display); font-stretch: 125%; font-weight: 900; font-size: clamp(44px, 5vw, 64px); line-height: .9; letter-spacing: -.02em; } .rw-rv__stars { color: var(--rw-ink); font-size: 17px; letter-spacing: 3px; line-height: 1; } .rw-rv__label { font-size: 13px; color: var(--rw-muted); } .rw-rv__label strong { color: var(--rw-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; } .rw-rv__label a { color: var(--rw-ink); text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; } .rw-rv__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: start; } .rw-rv__track::-webkit-scrollbar { display: none; } .rw-rv { scroll-snap-align: start; margin: 0; min-width: 0; border-radius: var(--rw-radius); background: var(--rw-surface); border: 1px solid var(--rw-line); overflow: hidden; display: flex; flex-direction: column; } .rw-rv__photo { position: relative; aspect-ratio: 4 / 5; background: var(--rw-raised); overflow: hidden; } .rw-rv__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .rw-rv:hover .rw-rv__photo img { transform: scale(1.04); } .rw-rv__product { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 5px 9px; border-radius: 2px; background: rgba(10,10,11,.65); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 11px; font-weight: 600; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rw-rv__body { padding: 16px 16px 18px; display: grid; gap: 10px; } .rw-rv__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; } .rw-rv__meta strong { font-weight: 700; font-size: 14px; } .rw-rv__meta span { color: var(--rw-muted); white-space: nowrap; } .rw-rv__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .rw-rv__verified { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rw-ink); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--rw-line-strong); } .rw-rv__text { margin: 0; padding: 0; border: 0; font-size: 15px; line-height: 1.55; font-style: normal; } .rw-rv__nav { display: flex; align-items: center; gap: 16px; margin-top: 20px; } .rw-rv__progress { position: relative; flex: 1; height: 2px; background: var(--rw-line); overflow: hidden; } .rw-rv__progress span { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--rw-ink); transition: transform .2s; } .rw-rv__btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rw-line-strong); background: none; color: var(--rw-ink); font-size: 17px; cursor: pointer; transition: background .2s, color .2s; } .rw-rv__btn:hover { background: var(--rw-ink); color: #fff; border-color: var(--rw-ink); } @media (max-width: 989px) { .rw-rv__track { grid-auto-columns: calc((100% - 12px) / 2.3); } } @media (max-width: 749px) { .rw-rv__top { grid-template-columns: 1fr; } .rw-rv__score { justify-self: stretch; } .rw-rv__track { grid-auto-columns: 80%; gap: 10px; } .rw-rv__btn { display: none; } } .rw-rv__top .rw-h2 { font-size: clamp(28px, 3.6vw, 48px); } /* ===================================================================== COPIE DU SHOPIFY (v1.5) ===================================================================== */ /* ---------- En-tête : téléphone = menu + recherche | logo au centre | compte + panier ---------- */ .rw-header__row > .wp-block-site-logo { flex: none; } .rw-header__row > .wp-block-navigation { flex: 1; } .rw-header .wc-block-mini-cart__badge { font-size: 11px; min-width: 20px; height: 20px; } @media (max-width: 781px) { .rw-header__row { display: grid !important; grid-template-columns: 44px 44px 1fr 44px 44px; align-items: center; gap: 0 !important; min-height: 64px; } .rw-header__row > .wp-block-navigation { order: 1; flex: none; justify-self: start; } .rw-header__row > .rw-icons { display: contents !important; } .rw-header__row .wp-block-search { order: 2; justify-self: start; } .rw-header__row > .wp-block-site-logo { order: 3; justify-self: center; } .rw-header__row .wp-block-woocommerce-customer-account { order: 4; justify-self: end; } .rw-header__row .wp-block-woocommerce-mini-cart { order: 5; justify-self: end; } .rw-header .wp-block-site-logo img { max-height: 24px; } } /* ---------- Bannière en image (ordinateur / téléphone) ---------- */ .rw-hero-img { line-height: 0; } .rw-hero-img figure { margin: 0 !important; } .rw-hero-img img { width: 100%; height: auto; display: block; } body:not(.block-editor-page) .rw-hero-img__mobile { display: none; } @media (max-width: 749px) { body:not(.block-editor-page) .rw-hero-img:has(.rw-hero-img__mobile img) .rw-hero-img__desktop { display: none; } body:not(.block-editor-page) .rw-hero-img__mobile { display: block; } } /* ---------- Logos des marques : en couleur, plus grands ---------- */ .rw-brands-gallery .rw-brands__track > figure.wp-block-image { height: 110px; } .rw-brands-gallery .rw-brands__track > figure.wp-block-image img { max-height: 80px; max-width: 200px; filter: none; opacity: 1; } @media (max-width: 749px) { .rw-brands-gallery .rw-brands__track > figure.wp-block-image { height: 90px; } .rw-brands-gallery .rw-brands__track > figure.wp-block-image img { max-height: 64px; max-width: 160px; } } /* ---------- Trouve ton style : cartes sous-catégories ---------- */ .rw-shopify-tabs .rw-rail { grid-auto-columns: minmax(240px, calc((100% - 36px) / 4)); } .rw-shopify-tabs .rw-rail--one { grid-auto-columns: 100%; overflow: visible; } .rw-sub .rw-card__media { aspect-ratio: 4 / 5; } .rw-shopify-tabs .rw-rail--one .rw-card__media { aspect-ratio: 16 / 9; } .rw-sub__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%); pointer-events: none; z-index: 1; } .rw-sub__name { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; font-family: var(--rw-display); font-stretch: 112%; font-weight: 900; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.05; text-transform: uppercase; color: #fff; } .rw-sub__ini { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--rw-display); font-stretch: 125%; font-weight: 900; font-size: clamp(56px, 7vw, 96px); color: var(--rw-line-strong); text-transform: uppercase; background: var(--rw-surface); } .rw-sub__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; color: var(--rw-muted); margin-top: 4px; } .rw-sub__go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--rw-ink); color: #fff; font-size: 15px; transition: transform .25s; } .rw-sub:hover .rw-sub__go { transform: translateX(3px); } .rw-sub:hover .rw-card__media img { transform: scale(1.05); } .rw-shopify-tabs .rw-tabs__more .rw-btn { min-width: min(100%, 420px); justify-content: space-between; } @media (max-width: 749px) { .rw-shopify-tabs .rw-rail { grid-auto-columns: 72%; } .rw-shopify-tabs .rw-tabs__more .rw-btn { width: 100%; } .rw-tab { min-height: 50px; padding: 0 24px; font-size: 14px; } } /* ---------- Look de la semaine (comme Shopify) ---------- */ .rw-lk { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; } .rw-lk__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--rw-radius); overflow: hidden; background: var(--rw-surface); } .rw-lk__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rw-lk__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,10,11,.45)); pointer-events: none; } .rw-lk__dot { position: absolute; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; transition: transform .2s, background .2s; } .rw-lk__dot::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.9); } .rw-lk__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); animation: rw-dot-pulse 2s ease-out infinite; } .rw-lk__dot:hover, .rw-lk__dot.is-active { transform: scale(1.18); background: rgba(255,255,255,.45); } .rw-lk__n { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--rw-ink); color: #fff; font: 800 10px/18px var(--rw-body); text-align: center; } @keyframes rw-dot-pulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.6); opacity: 0; } } .rw-lk__text { margin: 14px 0 0; color: var(--rw-muted); line-height: 1.6; max-width: 46ch; } .rw-lk__deal { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rw-line-strong); background: var(--rw-surface); font-size: 13px; font-weight: 700; } .rw-lk__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; } .rw-lk__item { display: grid; grid-template-columns: 26px 72px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--rw-line); border-radius: var(--rw-radius); background: var(--rw-surface); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s, background .2s; } .rw-lk__item:hover, .rw-lk__item.is-active { border-color: var(--rw-ink); background: var(--rw-raised); transform: translateX(4px); } .rw-lk__num { font-family: var(--rw-display); font-weight: 900; font-size: 15px; color: var(--rw-muted); text-align: center; } .rw-lk__item.is-active .rw-lk__num { color: var(--rw-ink); } .rw-lk__img { width: 72px; aspect-ratio: 1; border-radius: var(--rw-radius); overflow: hidden; background: #fff; } .rw-lk__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .rw-lk__title { display: block; margin: 0 0 4px; font-weight: 700; font-size: 15px; line-height: 1.3; } .rw-lk__price { font-size: 14px; color: var(--rw-muted); } .rw-lk__price del { margin-left: 6px; opacity: .7; } .rw-lk__price ins { text-decoration: none; } .rw-lk__go { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rw-line-strong); display: grid; place-items: center; transition: background .2s, color .2s; } .rw-lk__item:hover .rw-lk__go { background: var(--rw-ink); color: #fff; } .rw-lk__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rw-line); font-size: 14px; color: var(--rw-muted); } .rw-lk__total strong { font-family: var(--rw-display); font-stretch: 112%; font-size: 22px; color: var(--rw-ink); } .rw-btn--dark { background: var(--rw-ink); color: #fff !important; } .rw-lk__cta { margin-top: 18px; } @media (max-width: 749px) { .rw-lk { grid-template-columns: 1fr; } .rw-lk__head { order: -1; } .rw-lk__item { grid-template-columns: 22px 60px 1fr auto; gap: 10px; } .rw-lk__img { width: 60px; } .rw-lk__cta { width: 100%; } } /* ---------- Vidéos : pseudo sur la vidéo ---------- */ .rw-vid { position: relative; } .rw-vid p { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 6px 10px !important; border-radius: 4px; background: rgba(10,10,11,.7); color: #fff; backdrop-filter: blur(6px); font-size: 13px !important; } /* ---------- Pourquoi nous : colonne RE:WEAR en relief, logo ---------- */ .rw-why { border: 0; border-radius: 0; overflow: visible; } .rw-why table { border-collapse: separate; border-spacing: 0; } .rw-why th, .rw-why td { border-bottom: 1px solid var(--rw-line); } .rw-why thead th { border-bottom: 1px solid var(--rw-line); padding-top: 20px; padding-bottom: 20px; } .rw-why td:nth-child(2), .rw-why th:nth-child(2) { background: var(--rw-surface); border-left: 1px solid var(--rw-line-strong); border-right: 1px solid var(--rw-line-strong); box-shadow: 0 20px 50px rgba(15,23,42,.06); } .rw-why thead th:nth-child(2) { border-top: 1px solid var(--rw-line-strong); border-radius: 8px 8px 0 0; font-size: 0; color: transparent; } .rw-why thead th:nth-child(2)::before { content: ''; display: block; height: 22px; background: var(--rw-logo) center / contain no-repeat; } .rw-why tbody tr:last-child td:nth-child(2) { border-bottom: 1px solid var(--rw-line-strong); border-radius: 0 0 8px 8px; } .rw-why thead th:nth-child(3)::before { content: ''; display: block; width: 30px; height: 30px; margin: 0 auto 6px; border-radius: 50%; border: 1px dashed var(--rw-line-strong); background: var(--rw-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 4.5 4h15L21 9.5'/%3E%3Cpath d='M3 9.5a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3Cpath d='M5 12v8h14v-8'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 4.5 4h15L21 9.5'/%3E%3Cpath d='M3 9.5a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3Cpath d='M5 12v8h14v-8'/%3E%3C/svg%3E") center / 16px no-repeat; } .rw-why td:nth-child(2)::before { display: none; } .rw-why td:first-child, .rw-why th:first-child { padding-left: 0; } /* ---------- Boutique physique ---------- */ .rw-store { background: var(--rw-surface); } .rw-store .wp-block-media-text__media { position: relative; } @media (max-width: 600px) { .rw-store .wp-block-media-text__media { min-height: 0; } .rw-store .wp-block-media-text__media img { height: auto; } } /* ---------- Appli ---------- */ .rw-app .wp-block-column:last-child { display: block !important; } @media (max-width: 781px) { .rw-app .wp-block-column:last-child { order: -1; } } .rw-phone:not(:has(img[src*="logo-rewear"])) { all: unset; display: block; } .rw-phone:not(:has(img[src*="logo-rewear"])) .rw-phone__img { border-radius: 0; background: none; } .rw-phone:not(:has(img[src*="logo-rewear"])) .rw-phone__img img { width: 100%; height: auto; object-fit: contain; } .rw-stores { margin-top: 16px !important; } .rw-stores .wp-block-button__link { display: grid; text-align: left; padding: 8px 18px !important; border-radius: 12px !important; font-family: var(--rw-body) !important; font-stretch: 100%; font-weight: 700 !important; font-size: 16px !important; letter-spacing: 0 !important; text-transform: none !important; cursor: default; } .rw-stores .wp-block-button__link small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .7; } .rw-stores .wp-block-button__link::after { display: none; } /* ---------- Service client ---------- */ .rw-aide__title { font-size: clamp(26px, 3.6vw, 44px) !important; } .rw-aide__status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .rw-aide__status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: rw-aide-pulse 2s infinite; } @keyframes rw-aide-pulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } .rw-aide__main .wp-block-button__link { min-height: 56px; display: flex; align-items: center; justify-content: center; } .rw-aide__chips { margin-top: 12px !important; gap: 8px !important; flex-wrap: nowrap !important; } .rw-aide__chips .wp-block-button { flex: 1 1 auto; } .rw-aide__chips .wp-block-button__link { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px !important; font-family: var(--rw-body) !important; font-stretch: 100%; font-weight: 600 !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; } .rw-aide__chips .wp-block-button__link::after { display: none; } .rw-chip-mail .wp-block-button__link::before, .rw-chip-order .wp-block-button__link::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .rw-chip-mail { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); } .rw-chip-order { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v10H3zM14 10h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E"); } /* ---------- Bas de page noir ---------- */ .rw-footbar { background: var(--rw-ink); color: rgba(255,255,255,.75); font-size: 14px; } .rw-footbar p { margin: 6px 0 !important; } .rw-footbar a { color: rgba(255,255,255,.75); text-decoration: none; } .rw-footbar a:hover { color: #fff; } .rw-footbar__links { font-size: 13px; line-height: 2; } .rw-btn, .rw-lk__cta, .rw-tabs__more .rw-btn, .rw-form input, .rw-form button { box-sizing: border-box; max-width: 100%; } select.rw-sizes-select { left: 0 !important; clip-path: inset(50%); } table.variations td.value { position: relative; } .rw-footbar > * { margin-left: auto !important; margin-right: auto !important; max-width: 900px; text-align: center; } @media (max-width: 781px) { .rw-form input[type="email"] { flex: 1 1 100%; } } /* ===================================================================== v1.6 : IDENTIQUE AU SHOPIFY (styles repris des sections Shopify) ===================================================================== */ :root { --rw-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* Petits textes au-dessus des titres : noirs, comme Shopify */ .rw-eyebrow, .is-style-rw-eyebrow { color: var(--rw-ink); font-weight: 600; } /* Brillance des titres : mêmes couleurs et même vitesse que Shopify */ :root { --rw-shine-a: #0a0a0b; --rw-shine-b: #6b6b74; } .is-style-rw-shine, .rw-shine { background-image: linear-gradient(105deg, var(--rw-shine-a) 0%, var(--rw-shine-b) 18%, var(--rw-shine-a) 34%, var(--rw-shine-a) 45%, var(--rw-shine-b) 62%, var(--rw-shine-a) 80%); background-size: 260% 100%; animation-duration: 5s; } /* Taille des titres de section (comme .rw-h2 Shopify) */ .rw-app h2.wp-block-heading, .rw-store h2.wp-block-heading { font-size: clamp(28px, 4.4vw, 56px) !important; line-height: .95; letter-spacing: -.01em; } @media (max-width: 781px) { .rw-h2, h2.wp-block-heading { font-size: 28px !important; } .rw-offre { padding: 22px 24px !important; } .rw-offre__big { font-size: 34px !important; } } /* ---------- Réassurance : icône ronde à gauche, texte à droite, une par ligne sur téléphone ---------- */ .rw-trust { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .rw-trust > .wp-block-group { position: relative; padding-left: 58px; min-height: 44px; } .rw-trust h3.rw-ic { position: static; padding: 0; margin: 2px 0 4px !important; font-weight: 600 !important; } .rw-trust h3.rw-ic::before { top: 11px; left: 11px; width: 22px; height: 22px; } .rw-trust h3.rw-ic::after { border: 0; padding: 1px; background: linear-gradient(105deg, var(--rw-line) 30%, var(--rw-ink) 50%, var(--rw-line) 70%); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rw-shine-text 6s linear infinite; } /* ---------- Avis : les cartes vont jusqu'au bord sur téléphone ---------- */ @media (max-width: 749px) { body:not(.block-editor-page) .rw-rv__track { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } } /* ---------- Formulaires « Me prévenir » (comme Shopify) ---------- */ .rw-app .rw-form, .rw-store .rw-form { max-width: 460px; gap: 8px; } .rw-form input[type="email"] { flex: 1 1 200px; padding: 0 16px; background: var(--rw-bg); border-color: var(--rw-line); } .rw-form input[type="email"]::placeholder { color: #71717a; } .rw-form button { min-height: 52px; padding: 0 28px; font-size: 14px; } @media (max-width: 781px) { .rw-form button { flex: 0 0 auto; } .rw-form input[type="email"] { flex: 1 1 200px; } } /* ---------- Appli ---------- */ .rw-app { position: relative; border-radius: var(--rw-radius); background: var(--rw-surface) !important; overflow: hidden; } .rw-app::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; background: linear-gradient(105deg, var(--rw-line) 30%, var(--rw-ink) 50%, var(--rw-line) 70%); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rw-shine-text 6s linear infinite; } .rw-app > .wp-block-column:first-child { display: flex; flex-direction: column; gap: 18px; } .rw-app > .wp-block-column:first-child > * { margin: 0 !important; } .rw-app .rw-stores { order: 5; } .rw-app .rw-form, .rw-app .wp-block-rewear-inscription { order: 6; } /* Badge « En développement » : pastille noire + point vert qui clignote (en direct) */ .rw-app .rw-badge-soon { align-self: flex-start; display: inline-flex; } .rw-app p.has-text-color { color: var(--rw-soft) !important; line-height: 1.65; max-width: 46ch; } .rw-perks { gap: 12px; } .rw-perks li { gap: 12px; font-size: 15px; font-weight: 500; } .rw-perks li::before { content: ''; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--rw-line); background: var(--rw-bg) var(--rw-check) center / 14px no-repeat; } .rw-stores { gap: 10px !important; margin-top: 0 !important; } .rw-stores .wp-block-button__link { min-height: 52px; padding: 6px 16px !important; border-radius: 10px !important; background: var(--rw-bg) !important; border: 1px solid var(--rw-line-strong) !important; color: var(--rw-ink) !important; line-height: 1.15; align-content: center; } .rw-stores .wp-block-button__link small { display: block; font-size: 10px; letter-spacing: .1em; color: var(--rw-muted); opacity: 1; line-height: 1.2; } .rw-stores .wp-block-button__link:hover { transform: none; } .rw-app .rw-phone { animation: rw-float 6s ease-in-out infinite; } .rw-app .rw-phone:has(img[src*="logo-rewear"]) { width: min(260px, 70vw); border-radius: 40px; background: linear-gradient(145deg, #3a3a40, #121214 45%, #2a2a2e); box-shadow: 0 30px 80px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.12); --rw-rot: -6deg; } @keyframes rw-float { 0%, 100% { transform: rotate(var(--rw-rot, 0deg)) translateY(0); } 50% { transform: rotate(var(--rw-rot, 0deg)) translateY(-10px); } } @media (max-width: 781px) { .rw-app .rw-phone:has(img[src*="logo-rewear"]) { width: min(200px, 56vw); } .rw-app .rw-phone:not(:has(img[src*="logo-rewear"])) { max-width: 280px; margin: 0 auto; } } /* ---------- Boutique physique ---------- */ .rw-store.wp-block-media-text { position: relative; border: 0; border-radius: var(--rw-radius); background: var(--rw-surface); overflow: hidden; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; } .rw-store .wp-block-media-text__media { position: relative; align-self: stretch; min-height: 420px; background: var(--rw-raised); overflow: hidden; } .rw-store .wp-block-media-text__media img, .rw-store .wp-block-media-text__media video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; } .rw-store .wp-block-media-text__media:not(:empty)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, var(--rw-surface)); pointer-events: none; } .rw-store .wp-block-media-text__content { position: static; padding: clamp(28px, 4vw, 52px) !important; display: grid; gap: 18px; align-content: center; } .rw-store .wp-block-media-text__content > * { margin: 0 !important; } .rw-store p.has-text-color { color: var(--rw-soft) !important; line-height: 1.65; max-width: 48ch; } .rw-store .rw-badge-soon { position: absolute; top: 18px; left: 18px; z-index: 3; margin: 0 !important; padding: 7px 12px; gap: 8px; background: rgba(10,10,11,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .14em; } @media (max-width: 781px) { .rw-store.wp-block-media-text { grid-template-columns: 100% !important; } .rw-store .wp-block-media-text__media { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3; } .rw-store .wp-block-media-text__content { grid-column: 1; grid-row: 2; } .rw-store .wp-block-media-text__media:not(:empty)::after { background: linear-gradient(180deg, transparent 60%, var(--rw-surface)); } } /* ---------- Bloc final (CTA) ---------- */ .rw-cta { padding: clamp(36px, 7vw, 88px) clamp(20px, 5vw, 64px) !important; background: radial-gradient(90% 130% at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), var(--rw-ink) !important; } .rw-cta.rw-chrome::before { display: none; } .rw-cta > * { margin-top: 0 !important; margin-bottom: 0 !important; } .rw-cta.wp-block-group { display: grid; justify-items: center; gap: 18px; } .rw-cta h2.wp-block-heading { font-size: clamp(34px, 6.5vw, 84px) !important; line-height: .9; letter-spacing: -.02em; max-width: 14ch; } .rw-cta .is-style-rw-shine { background: none; color: #fff !important; -webkit-text-fill-color: #fff; animation: none; } .rw-cta .rw-eyebrow { color: rgba(255,255,255,.85); } .rw-cta p { color: rgba(255,255,255,.88); line-height: 1.6; max-width: 46ch; } .rw-cta__perks { margin: 4px 0 6px !important; } .rw-cta__perks li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; } .rw-cta__perks li::before { content: ''; flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--rw-check) center / contain no-repeat; mask: var(--rw-check) center / contain no-repeat; } .rw-cta .wp-block-buttons { gap: 10px; } .rw-cta .wp-block-button__link { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 28px; } .rw-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #fff !important; color: var(--rw-ink) !important; } @media (max-width: 781px) { .rw-cta .wp-block-buttons { width: 100%; } .rw-cta .wp-block-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .rw-app .rw-phone, .rw-trust h3.rw-ic::after, .rw-app::before { animation: none !important; } } /* Point vert « en direct » qui clignote sur les badges Bientôt / En développement */ .rw-badge-soon::before { width: 8px; height: 8px; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: rw-live 1.6s ease-out infinite; } @keyframes rw-live { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); opacity: 1; } 50% { opacity: .55; } 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .rw-badge-soon::before { animation: none; } } .rw-footbar { display: flex !important; flex-direction: column; align-items: center; text-align: center; } /* Page catégorie : sous-catégories en grandes cartes */ .rw-subcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 36px; } @media (max-width: 749px) { .rw-subcats { grid-template-columns: 1fr 1fr; gap: 10px; } .rw-subcats .rw-sub__name { font-size: 16px; left: 10px; bottom: 10px; } }