/* ========================================================================== FIB Ibn Batouta — main stylesheet One file, CSS variables, mobile first, logical properties (RTL ready). ========================================================================== */ /* ---------- Fonts (self-hosted Readex Pro, variable) ---------- */ @font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 160 700; font-display: swap; src: url("../fonts/readex-pro-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 160 700; font-display: swap; src: url("../fonts/readex-pro-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 160 700; font-display: swap; src: url("../fonts/readex-pro-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* ---------- Tokens ---------- */ :root { /* Logo colours: deep blue, light blue (sky) and white. */ --navy: #00296B; --navy-2: #0A3B8A; --navy-deep: #001B49; --blue: #0069D0; /* Links, prices, promotions (white text on it: 5.3:1). */ --blue-hover: #0057AD; --blue-soft: #E8F1FC; --accent: #00A9F1; /* Logo sky blue: highlights and main buttons (navy text on it: 5.3:1). */ --accent-hover: #0097D9; --accent-soft: #E6F6FE; --ink: #13213F; --body: #46546B; --muted: #5A6880; --line: #E1E8F1; --line-soft: #EDF2F8; --line-strong: #C6D2E2; --surface: #F4F8FC; --white: #fff; --green: #17803F; /* WhatsApp only. */ --green-hover: #126B34; --danger: #B42318; /* Form errors only. */ --danger-soft: #FEF3F2; --star: #F2A900; /* Review stars only (the colour people expect for ratings). */ --promo: #FFD23F; /* Super Promos band only: sunny yellow (navy text on it: 11:1)… */ --promo-deep: #FFBC1F; --coral: #E8432A; /* …and its stickers / promo price (white bold text on it, large). */ --font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --radius-sm: 10px; --radius: 12px; --radius-lg: 18px; --radius-xl: 24px; --shadow-card: 0 22px 36px -24px rgba(0, 41, 107, .35); --shadow-pop: 0 30px 50px -30px rgba(0, 41, 107, .35); --ring: 0 0 0 3px rgba(0, 169, 241, .6); --ease: cubic-bezier(.2, .8, .2, 1); --container: 1280px; --gutter: clamp(16px, 3vw, 24px); --header-h: 0px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; } img { display: block; } svg { flex: none; } a { color: var(--navy); text-underline-offset: 3px; } a:hover { color: var(--blue); } h1, h2, h3, h4 { color: var(--navy); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; } p { margin: 0 0 1em; } ul, ol { padding-inline-start: 1.2em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; } legend { padding: 0; } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; } ::selection { background: var(--accent); color: var(--navy); } :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; } .site-footer :focus-visible, .topbar :focus-visible, .gros :focus-visible, .pro-hero :focus-visible, .side-cta:focus-visible { outline-color: var(--accent); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 1000; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--radius); text-decoration: none; font-weight: 600; } .skip-link:focus { top: 12px; color: #fff; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } [dir="rtl"] .flip-rtl { transform: scaleX(-1); } /* ---------- Buttons, chips, badges ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--radius); font-weight: 600; font-size: 15.5px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s, box-shadow .2s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--accent { background: var(--accent); color: var(--navy); } .btn--accent:hover { background: var(--accent-hover); color: var(--navy); } .btn--navy { background: var(--navy); color: #fff; } .btn--navy:hover { background: var(--navy-2); color: #fff; } .btn--outline { border-color: var(--navy); color: var(--navy); background: transparent; } .btn--outline:hover { background: var(--navy); color: #fff; } .btn--whatsapp { background: var(--green); color: #fff; } .btn--whatsapp:hover { background: var(--green-hover); color: #fff; } .btn--ghost-light { border-color: rgba(255, 255, 255, .45); color: #fff; } .btn--ghost-light:hover { background: #fff; color: var(--navy); } .btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; } .btn--block { width: 100%; } .btn[disabled], .btn.is-loading { opacity: .7; pointer-events: none; } .icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--navy); text-decoration: none; } .icon-btn:hover { background: var(--surface); color: var(--navy); } .icon-btn--outline { border: 1.5px solid var(--line); } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; } .link-arrow svg { transition: transform .2s var(--ease); } .link-arrow:hover svg { transform: translateX(3px); } [dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(3px); } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14.5px; text-decoration: none; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s; } .chip:hover { border-color: var(--navy); color: var(--navy); } .chip--dark, .chip--active { background: var(--navy); border-color: var(--navy); color: #fff; } .chip--dark:hover, .chip--active:hover { background: var(--navy-2); color: #fff; } .chip--clear { border-color: transparent; text-decoration: underline; color: var(--muted); } .chip-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; } .badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1; border-radius: 999px; padding: 6px 10px; white-space: nowrap; } .badge--accent { background: var(--accent); color: var(--navy); text-transform: uppercase; letter-spacing: .08em; } .badge--soft { background: var(--accent-soft); color: var(--navy); } .badge--sale { background: var(--blue); color: #fff; font-size: 13px; } .kicker { align-self: flex-start; display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: var(--accent-soft); border-radius: 999px; padding: 7px 14px; } /* ---------- Form controls ---------- */ .field, .woocommerce form .input-text, .woocommerce form select, .woocommerce-page form .input-text, .woocommerce-page form select, .woocommerce form textarea { width: 100%; min-height: 50px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 0 16px; background: #fff; color: var(--ink); font-size: 16px; transition: border-color .15s, box-shadow .15s; } textarea.field, .woocommerce form textarea { padding: 14px 16px; min-height: 110px; resize: vertical; } select.field, .woocommerce form select { appearance: none; -webkit-appearance: none; padding-inline-end: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } [dir="rtl"] select.field, [dir="rtl"] .woocommerce form select { background-position: left 16px center; } .field:focus, .woocommerce form .input-text:focus, .woocommerce form select:focus, .woocommerce form textarea:focus { outline: none; border-color: var(--navy); box-shadow: var(--ring); } .field[aria-invalid="true"], .woocommerce-invalid .input-text, .woocommerce-invalid select { border-color: var(--danger); } .field::placeholder, .input-text::placeholder { color: #8A97A8; } .label { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 8px; } .req, .required { color: var(--blue); text-decoration: none; border: 0; font-weight: 600; } .optional { color: var(--muted); font-weight: 400; } .field-error { display: block; color: var(--danger); font-size: 13.5px; margin-top: 6px; } .check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 15px; } .check input { width: 20px; height: 20px; accent-color: var(--navy); margin: 0; flex: none; } .check__count { margin-inline-start: auto; color: var(--muted); font-size: 13px; } .notice-box { border-radius: var(--radius); padding: 14px 16px; font-size: 14.5px; } .notice-box ul { margin: 6px 0 0; padding-inline-start: 18px; } .notice-box--error { background: var(--danger-soft); border: 1px solid #FECDCA; color: #7A271A; } .notice-box--error a { color: #7A271A; } /* ========================================================================== Header ========================================================================== */ .topbar { display: none; background: var(--navy); color: #DCE6F2; font-size: 13px; } .topbar__inner { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center; min-height: 38px; } .topbar__msg { margin: 0; } .topbar__links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } .topbar a { color: #DCE6F2; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .topbar a:hover { color: #fff; } .topbar .topbar__wa { color: var(--accent); font-weight: 500; } .header-sticky { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow .2s; } .header-sticky.is-stuck { box-shadow: 0 10px 30px -20px rgba(0, 41, 107, .45); } body.admin-bar .header-sticky { top: 32px; } @media (max-width: 782px) { body.admin-bar .header-sticky { top: 46px; } } @media (max-width: 600px) { body.admin-bar .header-sticky { top: 0; } } .header-main { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "toggle brand actions" "search search search"; align-items: center; gap: 10px 12px; padding-block: 10px 12px; } .menu-toggle { grid-area: toggle; margin-inline-start: -8px; } .brand { grid-area: brand; display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--navy); text-decoration: none; } .brand:hover { color: var(--navy); } .brand__logo { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; } .brand__badge { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .brand__name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__tagline { display: none; font-size: 12px; color: var(--muted); } /* "form.search": WordPress also puts the class "search" on of the search results page. */ form.search { grid-area: search; position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding-inline: 14px 5px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: #fff; transition: border-color .15s, box-shadow .15s; } form.search:focus-within { border-color: var(--navy); box-shadow: var(--ring); } .search__icon { color: var(--muted); } .search__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--ink); } .search__input::-webkit-search-cancel-button { -webkit-appearance: none; } .search__btn { height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--navy); color: #fff; font-weight: 500; font-size: 14.5px; } .search__btn:hover { background: var(--navy-2); } .search__results { position: absolute; inset-inline: -1.5px; top: calc(100% + 8px); z-index: 70; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 8px; max-height: min(70vh, 560px); overflow: auto; } .search__group { margin: 4px 0; } .search__group-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; } .search__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; min-height: 44px; } .search__item:hover, .search__item[aria-selected="true"] { background: var(--surface); color: var(--navy); } .search__thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--surface); object-fit: contain; flex: none; mix-blend-mode: multiply; } .search__name { flex: 1; font-size: 14.5px; line-height: 1.3; } .search__price { font-weight: 600; color: var(--navy); font-size: 14px; white-space: nowrap; } .search__all { display: block; text-align: center; padding: 12px; font-weight: 600; text-decoration: none; border-top: 1px solid var(--line-soft); margin-top: 6px; } .search__empty { padding: 14px 10px; color: var(--muted); font-size: 14.5px; } .header-actions { grid-area: actions; display: flex; gap: 6px; align-items: center; } .header-actions .icon-btn--outline { width: 44px; height: 44px; } /* Cart: icon only, live count in a small badge. */ .cart-link { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--navy); text-decoration: none; transition: border-color .2s; } .cart-link:hover { border-color: var(--navy); color: var(--navy); } .fib-cart-count { position: absolute; top: -8px; inset-inline-end: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; border: 2px solid #fff; background: var(--accent); color: var(--navy); font-size: 12px; font-weight: 700; line-height: 1; display: inline-grid; place-items: center; } .fib-cart-count[data-count="0"] { background: var(--line); color: var(--body); } /* "Espace professionnel" (or "Devis" while the page does not exist): the header's main call to action. */ .pro-btn { --fx-delay: 2.2s; display: none; align-items: center; justify-content: center; gap: 8px; flex: none; height: 48px; padding: 0 20px; border-radius: 999px; background: linear-gradient(135deg, var(--accent) 0%, #3FC6FF 55%, var(--accent) 100%); color: var(--navy); font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap; } .pro-btn:hover { color: var(--navy); filter: brightness(1.06); } .pro-btn__long { display: none; } .fib-cart-count.bump { animation: bump .45s var(--ease); } @keyframes bump { 40% { transform: scale(1.35); } } /* Category bar + mega menu (desktop) */ .catnav { display: none; position: relative; border-block: 1px solid var(--line); background: #fff; } .catnav__inner { display: flex; align-items: center; } .catnav__list { display: flex; list-style: none; margin: 0; padding: 0; min-width: 0; } .catnav__item { display: flex; align-items: stretch; } .catnav__link { display: flex; align-items: center; height: 52px; padding-inline: 14px 4px; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; } .catnav__item:not(.has-mega) .catnav__link { padding-inline-end: 14px; } .catnav__toggle { display: grid; place-items: center; width: 28px; height: 52px; padding: 0; margin-inline-end: 6px; border: 0; background: transparent; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; } .catnav__toggle svg { transition: transform .2s; } .catnav__item:hover .catnav__link, .catnav__item.is-open .catnav__link { color: var(--navy); border-bottom-color: var(--accent); } .catnav__item:hover .catnav__toggle, .catnav__item.is-open .catnav__toggle { border-bottom-color: var(--accent); color: var(--navy); } .catnav__item.is-open .catnav__toggle svg { transform: rotate(180deg); } .mega { display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 28px 40px -28px rgba(0, 41, 107, .3); } .catnav__item.is-open > .mega, .no-js .catnav__item:hover > .mega, .no-js .catnav__item:focus-within > .mega { display: block; animation: megaIn .18s var(--ease); } @keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } } .mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; padding-block: 22px 26px; } .mega__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 20px; align-content: start; } .mega__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 15px; } .mega__link:hover { background: var(--surface); color: var(--navy); } .mega__count { font-size: 12.5px; color: var(--muted); } .mega__card { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--tint, var(--surface)); border-radius: var(--radius-lg); color: var(--navy); text-decoration: none; } .mega__card:hover { color: var(--navy); } .mega__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .75); display: grid; place-items: center; margin-bottom: 8px; } .mega__card-title { font-size: 20px; font-weight: 700; } .mega__card-meta { font-size: 14px; color: var(--body); } .mega__card-cta { margin-top: auto; padding-top: 14px; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; } .pill-ramassage { --fx-delay: 1.1s; margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .pill-ramassage svg { color: var(--accent); } .pill-ramassage:hover { color: #fff; filter: brightness(1.12); } /* ---------- Special services glow: Packs, Service Ramassage, Espace pro ---------- A soft halo, a ring that breathes (transform + opacity: cheap on phones) and a light sweep. Staggered with --fx-delay; no motion with "reduce motion" (the halo stays). */ .fx-glow { --glow: 0, 169, 241; position: relative; isolation: isolate; box-shadow: 0 6px 18px -8px rgba(var(--glow), .75); } .fx-glow::before, .fx-glow::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; } .fx-glow::before { box-shadow: 0 0 0 2px rgba(var(--glow), .5), 0 0 16px 2px rgba(var(--glow), .45); opacity: 0; animation: fxRing 3.2s ease-out var(--fx-delay, 0s) infinite; } .fx-glow::after { background: linear-gradient(105deg, transparent 38%, var(--fx-shine, rgba(255, 255, 255, .55)) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 160% 0; animation: fxShine 5s ease-in-out var(--fx-delay, 0s) infinite; } [dir="rtl"] .fx-glow::after { background-position: -60% 0; animation-name: fxShineRtl; } @keyframes fxRing { 0% { opacity: .95; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(var(--fx-sx, 1.14), var(--fx-sy, 1.4)); } } .drawer__icon.fx-glow { --fx-sx: 1.3; --fx-sy: 1.3; } /* Square / round elements: an even ring. */ @keyframes fxShine { 0%, 55% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } } @keyframes fxShineRtl { 0%, 55% { background-position: -60% 0; } 85%, 100% { background-position: 160% 0; } } /* Phones and tablets: Packs · Ramassage · Espace pro under the search bar. */ .quicknav { border-top: 1px solid var(--line-soft); background: #fff; } .quicknav__inner { display: flex; gap: 6px; padding-block: 10px 12px; overflow-x: auto; scrollbar-width: none; } .quicknav__inner::-webkit-scrollbar { display: none; } .quicknav__link { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; } @media (min-width: 600px) { .quicknav__link { flex-grow: 0; padding: 0 16px; font-size: 14px; } } .quicknav__link--packs { --fx-shine: rgba(0, 169, 241, .25); border: 1.5px solid rgba(0, 169, 241, .55); background: linear-gradient(135deg, #fff 0%, var(--accent-soft) 100%); color: var(--blue); } .quicknav__link--ramassage { --fx-delay: 1.1s; background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: #fff; } .quicknav__link--ramassage svg { color: var(--accent); } .quicknav__link--pro { --fx-delay: 2.2s; background: linear-gradient(135deg, var(--accent) 0%, #3FC6FF 100%); color: var(--navy); } .quicknav__link:hover { filter: brightness(1.06); } .quicknav__link--packs:hover { color: var(--blue); } .quicknav__link--ramassage:hover { color: #fff; } .quicknav__link--pro:hover { color: var(--navy); } @media (max-width: 420px) { .header-actions .icon-btn--outline { display: none; } /* "Mon compte" is in the drawer. */ .brand__name { font-size: 16px; } } @media (min-width: 600px) { .brand__tagline { display: block; } } @media (min-width: 900px) { .topbar { display: block; } .header-main { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search actions"; gap: 28px; padding-block: 16px; } .menu-toggle { display: none; } .brand__logo, .brand__badge { width: 52px; height: 52px; } .brand__name { font-size: 19px; } form.search { height: 50px; } .header-actions { gap: 10px; } .header-actions .icon-btn--outline, .cart-link { width: 48px; height: 48px; } .catnav { display: block; } .quicknav { display: none; } /* Pro button: round icon on small laptops, "Espace pro" from 1100 px, full label from 1280 px. */ .pro-btn { display: inline-flex; width: 48px; padding: 0; --fx-sx: 1.3; --fx-sy: 1.3; } .pro-btn__short { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } } @media (min-width: 1100px) { .pro-btn { width: auto; padding: 0 20px; --fx-sx: 1.1; --fx-sy: 1.4; } .pro-btn__short { position: static; width: auto; height: auto; overflow: visible; clip: auto; } } @media (min-width: 1280px) { .pro-btn__short { display: none; } .pro-btn__long { display: inline; } } @media (min-width: 900px) and (max-width: 1199px) { .catnav__link { padding-inline-start: 10px; font-size: 14px; } .catnav__toggle { width: 24px; margin-inline-end: 2px; } .pill-ramassage { padding: 0 12px; } .pill-ramassage__extra { display: none; } .mega__inner { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; } .mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Drawer, mini-cart, toast ---------- */ dialog { color: var(--ink); } dialog::backdrop { background: rgba(0, 41, 107, .5); } html:has(dialog[open]) { overflow: hidden; } .drawer, .minicart { margin: 0; padding: 0; border: 0; position: fixed; inset-block: 0; height: 100dvh; max-height: none; width: min(88vw, 400px); max-width: none; background: #fff; overflow: auto; box-shadow: 0 0 60px rgba(0, 41, 107, .25); } .drawer { inset-inline-start: 0; inset-inline-end: auto; } .minicart { inset-inline-end: 0; inset-inline-start: auto; display: none; flex-direction: column; width: min(92vw, 420px); } .minicart[open] { display: flex; } .drawer[open] { animation: slideInStart .28s var(--ease); } .minicart[open] { animation: slideInEnd .28s var(--ease); } @keyframes slideInStart { from { transform: translateX(-100%); } } @keyframes slideInEnd { from { transform: translateX(100%); } } [dir="rtl"] .drawer[open] { animation-name: slideInEnd; } [dir="rtl"] .minicart[open] { animation-name: slideInStart; } .drawer__head, .minicart__head { position: sticky; top: 0; z-index: 2; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line); } .drawer__title, .minicart__title { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0; } .drawer__cats { list-style: none; margin: 0; padding: 8px 12px; } .drawer__group { border-bottom: 1px solid var(--line-soft); } .drawer__group summary, .drawer__group--link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 8px; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; text-decoration: none; } .drawer__group summary::-webkit-details-marker { display: none; } .drawer__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--tint); display: grid; place-items: center; color: var(--navy); flex: none; } .drawer__name { flex: 1; } .drawer__chev { color: var(--muted); transition: transform .2s; } .drawer__group[open] .drawer__chev { transform: rotate(180deg); } .drawer__group ul { list-style: none; margin: 0; padding: 0 0 10px 58px; } .drawer__group li a { display: flex; justify-content: space-between; min-height: 44px; align-items: center; padding-inline-end: 8px; color: var(--ink); text-decoration: none; font-size: 15px; } .drawer__group li a span { color: var(--muted); font-size: 13px; } .drawer__group .drawer__all { font-weight: 600; color: var(--navy); } .drawer__services { display: grid; gap: 12px; margin: 18px 20px 8px; } .drawer__ramassage { --fx-delay: 1.1s; background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: #fff; } .drawer__ramassage:hover { color: #fff; } .drawer__ramassage svg { color: var(--accent); } .drawer__pro { --fx-delay: 2.2s; background: linear-gradient(135deg, var(--accent) 0%, #3FC6FF 100%); color: var(--navy); } .drawer__pro:hover { color: var(--navy); } .drawer__links { list-style: none; margin: 0; padding: 8px 20px 28px; } .drawer__links a { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); text-decoration: none; } .minicart__body { flex: 1; display: flex; flex-direction: column; padding: 16px 20px 20px; } .minicart__body .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1; } .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; } .woocommerce-mini-cart-item > a:not(.remove) { display: contents; color: var(--navy); font-weight: 600; text-decoration: none; } .woocommerce-mini-cart-item img { grid-row: span 2; width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--surface); mix-blend-mode: multiply; } .woocommerce-mini-cart-item .quantity { grid-column: 2; color: var(--muted); } .woocommerce-mini-cart-item .remove { position: absolute; inset-inline-end: 0; top: 10px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; text-decoration: none; color: var(--muted); font-size: 20px; } .woocommerce-mini-cart-item .remove:hover { background: var(--danger-soft); color: var(--danger); } .woocommerce-mini-cart-item a:not(.remove) { padding-inline-end: 34px; } .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 16px 0; margin: auto 0 0; font-size: 16px; color: var(--navy); } .woocommerce-mini-cart__total .amount { font-weight: 700; font-size: 18px; } .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 0; } .woocommerce-mini-cart__buttons .button { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: var(--radius); font-weight: 600; text-decoration: none; border: 1.5px solid var(--navy); color: var(--navy); } .woocommerce-mini-cart__buttons .button.checkout { background: var(--accent); border-color: var(--accent); color: var(--navy); order: -1; } .woocommerce-mini-cart__empty-message { color: var(--muted); padding: 24px 0; text-align: center; } /* Item details (pack content, chosen colour) in the mini-cart and the cart. */ dl.variation { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); } dl.variation dt { display: inline; font-weight: 600; color: var(--body); margin: 0; } dl.variation dd { display: inline; margin: 0; } dl.variation dd p { display: inline; margin: 0; } dl.variation dd::after { content: ""; display: block; } .woocommerce-mini-cart-item dl.variation { grid-column: 2; } .ship-progress { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; font-size: 14px; } .ship-progress p { margin: 0 0 8px; } .ship-progress__bar { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; } .ship-progress__bar span { display: block; height: 100%; background: var(--blue); border-radius: 99px; transition: width .4s var(--ease); } /* Pop-up messages (added to cart, errors…): a card in the top corner, over the page, never inside it. */ .toast { position: fixed; z-index: 200; top: 14px; inset-inline: 14px; margin-inline: auto; max-width: 420px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 8px; align-items: start; padding: 16px 14px 16px 18px; border-radius: 16px; background: var(--navy); color: #fff; box-shadow: 0 24px 50px -18px rgba(0, 27, 73, .55); animation: toastIn .3s var(--ease); } @media (min-width: 900px) { .toast { inset-inline: auto 24px; top: 24px; width: 400px; } } body.admin-bar .toast { top: 56px; } .toast[hidden] { display: none; } .toast__body { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 500; } .toast__body strong { font-size: 16px; } .toast__body span { color: rgba(255, 255, 255, .85); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .toast--success .toast__body { padding-inline-start: 40px; } .toast--success .toast__body::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300296B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; } .toast__actions { grid-column: 1 / -1; display: flex; gap: 8px; } .toast__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 10px; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; } .toast__btn:hover { background: rgba(255, 255, 255, .1); color: #fff; } .toast__btn--primary { background: var(--accent); border-color: var(--accent); color: var(--navy); } .toast__btn--primary:hover { background: var(--accent-hover); color: var(--navy); } .toast__close { grid-column: 2; grid-row: 1; width: 34px; height: 34px; margin: -6px -4px 0 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; display: grid; place-items: center; } .toast__close:hover { background: rgba(255, 255, 255, .12); } @keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } } /* ========================================================================== Home ========================================================================== */ @keyframes rise { from { opacity: 0; transform: translateY(18px); } } .paper-list { list-style: none; margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background-color: #fff; border: 1px solid var(--line); border-radius: var(--radius); background-image: repeating-linear-gradient(0deg, transparent 0 31px, #E8EEF5 31px 32px); } .paper-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; animation: rise .5s var(--ease) both; animation-delay: calc(.4s + var(--i) * .12s); } .paper-list__check { color: var(--blue); stroke-width: 3; } /* Sections */ .section { padding-block: clamp(40px, 6vw, 72px) 0; } .home > .section:last-of-type { padding-bottom: clamp(48px, 7vw, 80px); } .section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 26px; } .section__title { margin: 0; font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.01em; } /* Centred title between two thin lines ("Nos catégories"). */ .section__title--lined { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(20px, 3vw, 30px); font-size: clamp(19px, 2vw, 24px); text-transform: uppercase; letter-spacing: .08em; text-align: center; } .section__title--lined::before, .section__title--lined::after { content: ""; flex: 1; height: 1px; background: var(--line); } .section__more { display: flex; justify-content: center; margin: clamp(22px, 3vw, 32px) 0 0; } /* ---------- Home banner: packs "À la une", then the shop slide ---------- */ .phero-wrap { padding-block: 16px 0; } .hero-slider { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--navy); } .hero-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .hero-slider__track::-webkit-scrollbar { display: none; } .hero-slider__arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--navy); display: grid; place-items: center; box-shadow: 0 10px 24px -12px rgba(0, 27, 73, .6); opacity: 0; transition: opacity .2s, transform .2s var(--ease); } .hero-slider:hover .hero-slider__arrow, .hero-slider__arrow:focus-visible { opacity: 1; } .hero-slider__arrow:hover { transform: scale(1.06); } .hero-slider__arrow--prev { inset-inline-start: 14px; } .hero-slider__arrow--next { inset-inline-end: 14px; } .hero-slider__dots { position: absolute; z-index: 3; inset-inline: 0; bottom: 4px; display: flex; justify-content: center; align-items: center; pointer-events: none; } .hero-slider__dots > * { pointer-events: auto; } .hero-slider__dot { position: relative; width: 30px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; } .hero-slider__dot::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .5); transition: width .3s var(--ease), background-color .3s; } .hero-slider__dot:hover::before { background: #fff; } .hero-slider__dot.is-active::before { width: 24px; background: var(--accent); } .hero-slider__pause { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; display: grid; place-items: center; } .hero-slider__pause::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: background-color .2s; } .hero-slider__pause:hover::before { background: rgba(255, 255, 255, .3); } .hero-slider__pause svg { position: relative; } .hero-slider__pause .icon-play, [data-slider].is-paused .icon-pause { display: none; } [data-slider].is-paused .icon-play { display: block; } .hero-slider :focus-visible { outline-color: var(--accent); } .no-js .hero-slider__arrow, .no-js .hero-slider__dots { display: none; } @media (hover: none) { .hero-slider__arrow { display: none; } } /* Swipe on touch screens. */ .phero { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto auto; padding-bottom: 36px; color: #fff; background: var(--pbg, linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-2) 100%)); } .phero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 82% 40%, rgba(0, 169, 241, .32), transparent 42%), radial-gradient(circle at 8% 100%, rgba(0, 169, 241, .14), transparent 36%); } .phero__copy { padding: 18px 20px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; } .phero__kicker { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, .85); } .phero__chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--navy); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; } .pack-deadline { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 600; font-size: 14.5px; } .pack-deadline svg { flex: none; } .phero__deadline { background: rgba(255, 255, 255, .1); border-radius: 10px; padding: 6px 12px; font-size: 14px; } .phero__deadline.is-soon .pack-deadline__left { color: var(--accent); } .phero__title { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: #fff; } .phero__title a { color: inherit; text-decoration: none; } .phero__title a:hover { color: var(--accent); } .phero__tagline, .phero__text { margin: 0; font-size: clamp(15px, 1.5vw, 18px); color: rgba(255, 255, 255, .88); max-width: 520px; } .phero__deal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } .phero__price { font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; line-height: 1; color: #fff; } .phero__was { color: rgba(255, 255, 255, .8); font-size: 15px; } .phero__was del { color: inherit; } .phero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .phero__ctas .added { background: #fff; color: var(--navy); } .phero__media { grid-row: 1; position: relative; display: grid; place-items: center; padding: 22px 20px 4px; } .phero__img { position: relative; z-index: 1; display: block; width: min(60%, 300px); aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); } .phero__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .phero__img:hover img { transform: scale(1.04); } .phero__media--wide .phero__img { aspect-ratio: 16 / 10; width: min(92%, 540px); } .phero__sticker { position: absolute; z-index: 2; inset-inline-end: 12%; top: 6%; width: 88px; height: 88px; border-radius: 50%; background: var(--accent); color: var(--navy); display: grid; place-content: center; text-align: center; line-height: 1; transform: rotate(8deg); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45); } .phero__sticker strong { font-size: 25px; font-weight: 700; } .phero__sticker span { font-size: 11px; font-weight: 600; margin-top: 3px; } .phero__popular { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .85); } .phero__popular .chip { min-height: 36px; padding: 0 14px; font-size: 13.5px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; } .phero__popular .chip:hover { background: #fff; border-color: #fff; color: var(--navy); } .phero__list { position: relative; z-index: 1; width: min(88%, 370px); display: flex; flex-direction: column; gap: 14px; background: #fff; color: var(--ink); border-radius: 22px; padding: 22px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); } .phero__list-head { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; color: var(--navy); } .phero__list-text { margin: 0; font-size: 14.5px; color: var(--body); } .phero.is-active .phero__img, .phero.is-active .phero__list { animation: pheroIn .6s var(--ease) both; } .phero.is-active .phero__sticker { animation: pop .5s .3s var(--ease) both; } .phero.is-active .phero__copy > * { animation: rise .5s var(--ease) both; } .phero.is-active .phero__copy > :nth-child(2) { animation-delay: .05s; } .phero.is-active .phero__copy > :nth-child(3) { animation-delay: .1s; } .phero.is-active .phero__copy > :nth-child(n+4) { animation-delay: .15s; } @keyframes pheroIn { from { opacity: 0; transform: translateY(16px) scale(.97); } } @keyframes pop { from { transform: scale(0) rotate(-20deg); } } @media (min-width: 900px) { .phero { grid-template-rows: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: 440px; padding-bottom: 0; } .phero__copy { padding-block: 44px 56px; padding-inline: 60px 8px; justify-content: center; gap: 14px; } .phero__media { grid-row: auto; padding: 30px 30px 44px; } .phero__img { width: min(84%, 360px); } .phero__sticker { width: 104px; height: 104px; } .phero__sticker strong { font-size: 29px; } } @media (max-width: 599px) { /* Phones: photo, name, price and the button on one screen. */ .phero-wrap { padding-top: 12px; } .phero__media { padding: 16px 16px 0; } .phero__img { width: min(46%, 180px); border-radius: 18px; } .phero__sticker { width: 66px; height: 66px; inset-inline-end: 10%; top: 12%; } .phero__sticker strong { font-size: 18px; } .phero__sticker span { font-size: 9.5px; } .phero__copy { padding: 12px 16px 6px; gap: 8px; } .phero__kicker { font-size: 13px; } .pack-deadline.phero__deadline { font-size: 13px; padding: 5px 10px; } .phero__title { font-size: 28px; } .phero__tagline, .phero__text { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .phero__price { font-size: 28px; } .phero__ctas { width: 100%; } .phero__ctas .btn { flex: 1 1 100%; } .phero:not(.phero--welcome) .phero__ctas .btn--ghost-light { display: none; } .phero--welcome .phero__media { display: none; } /* The shop slide is text + buttons on phones. */ .phero--welcome .phero__copy { padding-top: 24px; } .phero__popular .chip:nth-of-type(n+4) { display: none; } } /* ---------- Home: category tiles ---------- */ .cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cat-tile { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; background: var(--navy); color: #fff; text-decoration: none; } .cat-tile:hover { color: #fff; } .cat-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .cat-tile__media { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; } .cat-tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 27, 73, .88) 0%, rgba(0, 27, 73, .32) 42%, rgba(0, 27, 73, 0) 68%); } .cat-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .cat-tile:hover .cat-tile__img { transform: scale(1.05); } .cat-tile__label { position: absolute; inset-inline: 0; bottom: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; } .cat-tile__name { font-size: clamp(17px, 2vw, 24px); font-weight: 700; line-height: 1.15; } .cat-tile__count { font-size: 13px; color: rgba(255, 255, 255, .85); } .cat-tile__go { position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--navy); display: grid; place-items: center; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s var(--ease); } .cat-tile:hover .cat-tile__go, .cat-tile:focus-visible .cat-tile__go { opacity: 1; transform: none; } /* No photo yet: light tile with a product photo, or the category icon. */ .cat-tile--plain { background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); } .cat-tile--plain:hover { color: var(--navy); } .cat-tile--plain .cat-tile__media { padding: 12% 16% 30%; } .cat-tile--plain .cat-tile__media::after { display: none; } .cat-tile__product { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); } .cat-tile--plain:hover .cat-tile__product { transform: scale(1.05); } .cat-tile__icon { color: var(--blue); opacity: .45; } .cat-tile--plain .cat-tile__count { color: var(--muted); } /* Service Ramassage. */ .cat-tile--service { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); } .cat-tile--service .cat-tile__icon { color: var(--accent); opacity: 1; padding-bottom: 22%; } @media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .cat-tile { aspect-ratio: 5 / 4; } } @media (max-width: 599px) { .cat-tile__label { padding: 12px; } .cat-tile__count { font-size: 12px; } .cat-tile__go { display: none; } } /* ---------- Home: "Super Promos" — the one section in promo colours ---------- Sunny yellow, coral stickers and a turning sunburst make the offers stand out from the blue site. The pencil mascot presents a whiteboard where the real promotions slide (slider.js). */ .promo-band { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(28px, 4vw, 56px) clamp(20px, 4.5vw, 64px); border-radius: var(--radius-xl); color: var(--navy); background: linear-gradient(135deg, #FFE36E 0%, var(--promo) 45%, var(--promo-deep) 100%); box-shadow: 0 30px 60px -40px rgba(180, 120, 0, .7); } .promo-band__bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; background-image: radial-gradient(rgba(0, 41, 107, .1) 1.5px, transparent 1.7px); background-size: 18px 18px; } .promo-band__bg::before { content: ""; position: absolute; width: 900px; height: 900px; inset-inline-end: -220px; top: 50%; margin-top: -450px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .34) 0deg 9deg, transparent 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 68%); mask: radial-gradient(circle, #000 0 30%, transparent 68%); animation: promoRays 80s linear infinite; } @keyframes promoRays { to { transform: rotate(360deg); } } .promo-band__confetti { position: absolute; width: 16px; height: 6px; border-radius: 3px; animation: promoFloat 6s ease-in-out infinite; } .promo-band__confetti--1 { top: 12%; inset-inline-start: 44%; background: var(--coral); rotate: 28deg; } .promo-band__confetti--2 { bottom: 14%; inset-inline-start: 5%; background: var(--accent); rotate: -32deg; animation-delay: -2s; } .promo-band__confetti--3 { top: 9%; inset-inline-start: 3%; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); animation-delay: -4s; } .promo-band__confetti--4 { bottom: 9%; inset-inline-start: 38%; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--coral); animation-delay: -1s; } @keyframes promoFloat { 50% { transform: translateY(-10px) rotate(25deg); } } .promo-band__copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } .promo-band__kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; rotate: -3deg; box-shadow: 0 10px 18px -10px rgba(0, 41, 107, .7); } .promo-band__kicker svg { color: var(--promo); } .promo-band__title { position: relative; margin: 0 0 10px; color: var(--navy); font-size: clamp(42px, 6vw, 80px); line-height: .95; font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; } .promo-band__title::after { content: ""; position: absolute; inset-inline-start: 4px; bottom: -14px; width: 58%; height: 10px; border-radius: 99px; background: var(--coral); rotate: -2deg; } .promo-band__text { margin: 6px 0 0; color: var(--ink); font-size: clamp(15.5px, 1.5vw, 18px); font-weight: 500; max-width: 420px; } .promo-band .btn--navy:hover { background: var(--navy-deep); } /* The whiteboard. */ .promo-band__stage { position: relative; min-width: 0; } .promo-board { position: relative; z-index: 1; container-type: inline-size; } .promo-board__frame { position: relative; border: 10px solid var(--navy); border-radius: 22px; background: linear-gradient(160deg, #fff 0%, #F8FBFE 55%, #EDF3FA 100%); box-shadow: 0 34px 50px -30px rgba(0, 41, 107, .65); } .promo-board__frame::before { /* Light reflection on the board, behind the products. */ content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 12px; pointer-events: none; background: linear-gradient(115deg, transparent 0 68%, rgba(255, 255, 255, .75) 68% 71%, transparent 71% 74%, rgba(255, 255, 255, .55) 74% 75.5%, transparent 75.5%); } .promo-board__magnet { position: absolute; top: 10px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 41, 107, .3); } .promo-board__magnet--1 { inset-inline-start: 14px; background: var(--coral); } .promo-board__magnet--2 { inset-inline-end: 14px; background: var(--accent); } .promo-board__track { position: relative; z-index: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .promo-board__track::-webkit-scrollbar { display: none; } .promo-board__tray { display: flex; justify-content: flex-end; gap: 6px; height: 14px; margin: -2px 26px 0; padding-inline-end: 20px; border-radius: 0 0 10px 10px; background: var(--navy-deep); } .promo-board__tray span { width: 34px; height: 9px; margin-top: -7px; border-radius: 3px 5px 5px 3px; background: var(--coral); box-shadow: inset -9px 0 0 rgba(0, 0, 0, .25); } .promo-board__tray span:nth-child(2) { background: var(--accent); } .promo-board__tray span:nth-child(3) { background: var(--blue); } .promo-board__arrow { position: absolute; top: 50%; z-index: 3; translate: 0 -50%; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 20px -10px rgba(0, 41, 107, .8); transition: background-color .2s; } .promo-board__arrow:hover { background: var(--blue); } .promo-board__arrow--prev { inset-inline-start: -32px; } .promo-board__arrow--next { inset-inline-end: -32px; } @media (hover: none) { .promo-board__arrow { display: none; } } /* Swipe on touch screens. */ .promo-board__dots { display: flex; justify-content: center; align-items: center; margin-top: 8px; } .promo-board .hero-slider__dot::before { background: rgba(0, 41, 107, .3); } .promo-board .hero-slider__dot:hover::before { background: rgba(0, 41, 107, .6); } .promo-board .hero-slider__dot.is-active::before { background: var(--navy); } .promo-board .hero-slider__pause { color: var(--navy); } .promo-board .hero-slider__pause::before { background: rgba(0, 41, 107, .12); } /* One promotion. */ .promo-slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; position: relative; display: grid; gap: 12px; justify-items: center; align-content: center; padding: 30px 22px 24px; text-align: center; } .promo-slide__media { position: relative; width: min(60%, 220px); aspect-ratio: 1; } .promo-slide__img { display: block; width: 100%; height: 100%; } .promo-slide__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .promo-slide__badge { position: absolute; top: -8px; inset-inline-start: -18px; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: #fff; border: 4px solid #fff; font-size: 22px; font-weight: 700; rotate: -12deg; box-shadow: 0 12px 22px -10px rgba(232, 67, 42, .9); direction: ltr; unicode-bidi: isolate; } .promo-slide__info { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; max-width: 100%; } .promo-slide__cat { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .promo-slide__name { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .promo-slide__name a { color: inherit; text-decoration: none; } .promo-slide__name a:hover { color: var(--blue); } .promo-slide__price { margin: 2px 0 0; font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--navy); } .promo-slide__price ins { color: var(--coral); } .promo-slide__price del { font-size: .55em; } .promo-slide__saving { margin: 0; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: #FFF0B3; color: var(--navy); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .promo-slide__add { min-height: 46px; padding: 0 22px; margin-top: 6px; } .promo-slide__add.added { background: var(--blue); } .promo-slide__add.loading { opacity: .75; } .promo-band .added_to_cart { display: none; } .promo-slide.is-active .promo-slide__img { animation: promoIn .7s var(--ease) both; } .promo-slide.is-active .promo-slide__badge { animation: promoStamp .45s .25s var(--ease) both; } @keyframes promoIn { from { opacity: 0; transform: translateY(14px) scale(.88) rotate(-6deg); } } @keyframes promoStamp { from { opacity: 0; transform: scale(1.7); } } @container (min-width: 460px) { .promo-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); justify-items: stretch; text-align: start; gap: 24px; padding: 34px 36px; min-height: 320px; } .promo-slide__media { width: 100%; max-width: 240px; justify-self: center; } .promo-slide__info { align-items: flex-start; } } /* The mascot (template-parts/mascot-pencil.php) and its speech bubble. */ .promo-band__mascot { position: absolute; z-index: 2; pointer-events: none; } .mascot { display: block; width: 100%; height: auto; overflow: visible; } .mascot__body { animation: mascotBob 2.6s ease-in-out infinite; } .mascot__wave { transform-origin: 202px 178px; animation: mascotWave 1.6s ease-in-out infinite; } .mascot__point { transform-origin: 118px 178px; animation: mascotPoint 3s ease-in-out infinite; } .mascot__eyes { transform-origin: 160px 128px; animation: mascotBlink 4.5s infinite; } @keyframes mascotBob { 50% { transform: translateY(-7px); } } @keyframes mascotWave { 50% { transform: rotate(18deg); } } @keyframes mascotPoint { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-6deg); } 90% { transform: rotate(2deg); } } @keyframes mascotBlink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } } [dir="rtl"] .mascot { transform: scaleX(-1); } .promo-band__bubble { position: absolute; bottom: 100%; inset-inline-end: 26px; margin: 0 0 -26px; padding: 8px 14px; border: 3px solid var(--navy); border-radius: 16px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 700; white-space: nowrap; rotate: 4deg; box-shadow: 0 6px 0 rgba(0, 41, 107, .15); animation: promoBubble 3s ease-in-out infinite; } .promo-band__bubble::after { content: ""; position: absolute; top: 100%; inset-inline-end: 34px; width: 14px; height: 14px; margin-top: -7px; background: #fff; border: solid var(--navy); border-width: 0 3px 3px 0; rotate: 45deg; } @keyframes promoBubble { 50% { transform: translateY(-5px); } } /* Phones and tablets: the mascot sits beside the title, the board takes the full width. */ @media (max-width: 899px) { .promo-band__stage { position: static; } .promo-band__mascot { top: 14px; inset-inline-end: 8px; width: clamp(96px, 22vw, 150px); } .promo-band__bubble { display: none; } .promo-band__kicker, .promo-band__title { margin-inline-end: clamp(92px, 22vw, 150px); } .promo-board__arrow--prev { inset-inline-start: -16px; } .promo-board__arrow--next { inset-inline-end: -16px; } .promo-band__bg::before { width: 600px; height: 600px; margin-top: -300px; inset-inline-end: -260px; top: 20%; } } @media (max-width: 599px) { .promo-band { padding: 22px 16px 18px; gap: 22px; } .promo-band .btn--lg { width: 100%; } .promo-band__confetti--1, .promo-band__confetti--3 { display: none; } .promo-slide { padding: 24px 18px 20px; gap: 10px; } .promo-slide__media { width: min(46%, 170px); } .promo-slide__badge { width: 64px; height: 64px; font-size: 18px; inset-inline-start: -10px; } .promo-slide__price { font-size: 26px; } } /* Laptops and up: copy · board · mascot standing beside the board. */ @media (min-width: 900px) { .promo-band { grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); gap: 40px; min-height: 500px; } .promo-band__stage { padding-inline: 18px clamp(118px, 12vw, 160px); } .promo-band__mascot { inset-inline-end: -30px; bottom: -64px; width: clamp(160px, 15vw, 200px); } } /* Steps band */ .steps-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(24px, 4vw, 52px); display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: center; } .steps-band__intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } @media (max-width: 1099px) { .steps-band__intro { flex-basis: 100%; } } .steps-band__intro .section__title { font-size: clamp(24px, 3vw, 36px); line-height: 1.1; } .steps-band__intro p { margin: 0; color: var(--body); } .steps { flex: 2 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } .step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; } .step strong { font-weight: 600; color: var(--navy); } .step > span:last-child { font-size: 14.5px; color: var(--muted); line-height: 1.5; } .step__num { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--accent); display: grid; place-items: center; font-weight: 600; flex: none; } /* Brands: logo strip (template-parts/home-brands.php). marquee.js scrolls it continuously and lets visitors drag it; the list is printed twice so it loops without a jump. Without JavaScript the logos simply wrap, centred. */ .brand-marquee { padding-block: 8px 18px; } .brand-marquee__track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .brand-marquee__track > [aria-hidden] { display: none; } .js .brand-marquee { overflow: hidden; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .js .brand-marquee__track { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; will-change: transform; } .js .brand-marquee__track > li { display: block; flex: none; padding-inline-end: 16px; } .brand-marquee :is(a, img) { -webkit-user-drag: none; } .brand-marquee.is-dragging { cursor: grabbing; } .brand-marquee.is-dragging .brand-tile { pointer-events: none; } .brand-tile { display: grid; place-items: center; inline-size: clamp(132px, 30vw, 168px); block-size: clamp(76px, 18vw, 88px); padding: 12px 18px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg); color: var(--navy); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); } .brand-tile:hover { border-color: var(--accent); color: var(--navy); box-shadow: 0 10px 20px -14px rgba(0, 41, 107, .4); transform: translateY(-3px); } .brand-tile__logo { display: block; inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 48px; object-fit: contain; } .brand-tile__name { font-weight: 700; font-size: 17px; letter-spacing: .02em; line-height: 1.2; text-align: center; overflow-wrap: anywhere; } /* ---------- Home: customer reviews (Google) ---------- */ .reviews { background: var(--surface); border-block: 1px solid var(--line); margin-top: clamp(40px, 6vw, 72px); padding-block: clamp(40px, 6vw, 72px); } .reviews__summary { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin: -6px 0 clamp(22px, 3vw, 32px); } .reviews__score { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; color: var(--navy); line-height: 1; } .reviews__count { color: var(--muted); font-size: 15px; } .reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .review-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px 22px; box-shadow: 0 1px 2px rgba(0, 41, 107, .05); } .review-card__head { display: flex; align-items: center; gap: 12px; } .review-card__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--av, var(--navy)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; } .review-card__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .review-card__name { color: var(--navy); font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .review-card__date { color: var(--muted); font-size: 13px; } .review-card__source { margin-inline-start: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; } .review-card__text { margin: 0; color: var(--body); font-size: 15px; line-height: 1.65; } .reviews__hint { text-align: center; margin: 18px 0 0; } @media (max-width: 639px) { .review-card:nth-child(n+4) { display: none; } } /* Phones: the 3 latest. */ .stars { position: relative; display: inline-flex; vertical-align: middle; line-height: 0; color: #D5DEEA; } .stars__base, .stars__fill { display: inline-flex; gap: 2px; } .stars__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--rating, 100%); overflow: hidden; color: var(--star); } /* "Besoin de fournitures en gros ?" → Espace professionnel */ .gros { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: clamp(24px, 3.6vw, 44px) clamp(22px, 4vw, 52px); border-radius: var(--radius-xl); background: linear-gradient(120deg, var(--blue) 0%, var(--navy) 100%); color: #fff; } .gros::after { content: ""; position: absolute; inset-inline-end: -70px; top: -100px; width: 280px; height: 280px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .2); pointer-events: none; } .gros__icon { width: 60px; height: 60px; flex: none; border-radius: 18px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; } .gros__copy { flex: 1 1 360px; min-width: 0; } .gros__title { margin: 0 0 6px; color: #fff; font-size: clamp(22px, 2.6vw, 30px); } .gros__copy p { margin: 0; color: rgba(255, 255, 255, .9); max-width: 640px; } .gros .btn { position: relative; z-index: 1; } @media (max-width: 599px) { .gros__icon { display: none; } .gros .btn { width: 100%; } } /* Store */ .store { background: var(--surface); border-top: 1px solid var(--line); margin-top: clamp(48px, 7vw, 80px); } .store__inner { display: grid; gap: 32px; padding-block: clamp(40px, 6vw, 64px); } .store__copy { display: flex; flex-direction: column; gap: 16px; justify-content: center; } .store__info { margin: 0; display: flex; flex-direction: column; gap: 8px; color: var(--body); } .store__info > div { display: flex; gap: 6px; flex-wrap: wrap; } .store__info dt { font-weight: 600; color: var(--navy); } .store__info dt::after { content: " :"; } .store__info dd { margin: 0; } .store__ctas { display: flex; flex-wrap: wrap; gap: 12px; } .store__social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 16px; border-top: 1px solid var(--line); } .store__social-title { margin: 0; font-weight: 600; color: var(--navy); } .social-links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .social-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: var(--navy); font-weight: 600; text-decoration: none; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; } .social-link:hover { color: var(--navy); border-color: currentColor; transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(0, 41, 107, .45); } .social-link--instagram svg { color: #D62976; } .social-link--facebook svg { color: #1877F2; } .social-link--tiktok svg { color: #111; } /* Details · map · shop front: stacked on phones, details above map + photo on tablets, three columns of the same height on large screens (the portrait photo fits a narrow column). */ .store__map-wrap, .store__media { min-width: 0; } .store__photo { display: block; width: 100%; height: 320px; object-fit: cover; object-position: center 30%; border-radius: 20px; } .store__map { display: block; width: 100%; height: 300px; border: 0; border-radius: 20px; background: var(--line-soft); } .store__placeholder { min-height: 280px; height: 100%; border-radius: 20px; border: 2px dashed var(--line-strong); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; color: var(--muted); } .store__placeholder strong { color: var(--navy); font-size: 18px; } .store__placeholder-icon { width: 72px; height: 72px; border-radius: 20px; background: var(--accent-soft); color: var(--navy); display: grid; place-items: center; margin-bottom: 6px; } .admin-hint { margin-top: 10px; font-size: 12.5px; background: var(--accent-soft); color: var(--blue); border-radius: 8px; padding: 6px 10px; } @media (min-width: 700px) and (max-width: 1023px) { .store__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .store__copy, .store__inner > :nth-child(2):last-child { grid-column: 1 / -1; } .store__photo, .store__map { height: 360px; } } @media (min-width: 1024px) { .store__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, .75fr); } .store__inner > :nth-child(2):last-child { grid-column: span 2; } .store__photo, .store__map { height: 100%; min-height: 420px; } } /* ========================================================================== Product grid & card ========================================================================== */ .product-grid, ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; } @media (min-width: 640px) { .product-grid, ul.products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); gap: 18px; } } .pcard { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px; transition: box-shadow .3s, transform .3s var(--ease), border-color .3s; } .pcard:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--line-strong); } .pcard__media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); background: var(--surface); overflow: hidden; display: grid; place-items: center; } .pcard__img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform .5s var(--ease); } .pcard:hover .pcard__img { transform: scale(1.04); } .ph-tile { width: 100%; height: 100%; display: grid; place-items: center; background: var(--tint, var(--surface)); color: var(--navy); } .ph-tile svg { width: 42%; height: 42%; stroke-width: 1.2; opacity: .85; } .pcard__badges { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; gap: 6px; } .pcard.outofstock .pcard__media { opacity: .6; } .pcard__body { padding: 12px 4px 4px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .pcard__cat { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcard__title { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pcard__link { color: inherit; text-decoration: none; } .pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-lg); } .pcard__link:hover { color: var(--navy); } .pcard__link:focus-visible { outline: none; } .pcard__link:focus-visible::after { outline: 2px solid var(--navy); outline-offset: 3px; } .pcard__foot { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 10px; } .pcard__price { font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1.2; } .pcard__actions { display: flex; gap: 8px; position: relative; z-index: 1; } .pcard__add { flex: 1; min-height: 44px; padding: 0 10px; gap: 8px; font-size: 14.5px; border-radius: var(--radius-sm); min-width: 0; } .pcard__add .lbl-long { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .pcard__add.loading { opacity: .75; } .pcard__add.loading::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } .pcard__add.added { background: var(--blue); } .pcard__add.added svg { display: none; } .pcard__add > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcard .added_to_cart { display: none; } @keyframes spin { to { transform: rotate(360deg); } } @media (min-width: 640px) { .pcard { padding: 12px; } .pcard__body { padding: 14px 6px 4px; gap: 8px; } .pcard__cat { font-size: 12px; } .pcard__title { font-size: 16px; -webkit-line-clamp: 2; } .pcard__price { font-size: 22px; } .pcard__add { min-height: 46px; font-size: 15px; } .pcard__add .lbl-long { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; } .pcard__add .lbl-short { display: none; } } .price del { color: var(--muted); font-weight: 400; font-size: .7em; margin-inline-end: 6px; } .price ins { text-decoration: none; color: var(--blue); } .price del, .price ins, .price .amount { white-space: nowrap; } .pcard__price del { display: block; margin: 0; } /* Old price above the new one: no broken lines in narrow cards. */ .price-from { font-size: .62em; font-weight: 500; color: var(--muted); } .swatches { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 41, 107, .18); } .swatches__label { margin-inline-start: 2px; } .stock-line { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--blue); } .stock-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .stock-line--low { color: var(--blue); } .stock-line--out, .stock-line--back { color: var(--muted); } /* ========================================================================== Catalogue ========================================================================== */ .breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--muted); padding-top: 20px; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--blue); } .breadcrumb > span:last-child { color: var(--navy); font-weight: 500; } .page-title { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.01em; } .catalog__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 16px 0 8px; } .catalog__count { margin: 6px 0 0; color: var(--muted); } .catalog__tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .catalog__desc { color: var(--body); max-width: 760px; margin-top: 6px; } .catalog__desc p:last-child { margin: 0; } .catalog__layout { display: grid; gap: 24px; align-items: start; padding-block: 16px clamp(56px, 7vw, 80px); } .catalog__main { min-width: 0; display: flex; flex-direction: column; } .sort { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--muted); white-space: nowrap; } @media (min-width: 640px) { .catalog__main .product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); } } .sort__select { width: auto; min-height: 46px; font-size: 15px; } .filters-toggle { min-height: 46px; padding: 0 16px; } .filters-toggle__count { min-width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: var(--navy); font-size: 12px; display: grid; place-items: center; } .filters { display: flex; flex-direction: column; min-width: 0; } .filters__head { display: none; } .filters__body { display: flex; flex-direction: column; gap: 22px; } .filter-block { display: block; } .filter-block + .filter-block, .filters__form .filter-block { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; } .filters__form .filter-block:first-of-type { border-top: 1px solid var(--line); } .filter-block__title { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--navy); } /* Legends sit on the fieldset border by default: float them inside instead. */ fieldset.filter-block > legend { float: inline-start; width: 100%; } fieldset.filter-block > legend + * { clear: both; } .filters.is-open .check-list--long { max-height: none; overflow: visible; } .side-list { list-style: none; margin: 0; padding: 0; } .side-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 15px; } .side-link:hover { background: var(--surface); color: var(--navy); } .side-link.is-current { background: var(--accent-soft); color: var(--navy); font-weight: 600; } .side-link__count { font-size: 13px; color: var(--muted); font-weight: 400; } .side-link.is-open { color: var(--navy); font-weight: 600; } .side-list--sub { margin: 2px 0 6px; padding-inline-start: 12px; margin-inline-start: 12px; border-inline-start: 2px solid var(--line); } .side-list--sub .side-link { font-size: 14.5px; } /* Categories as chips above the products on phones and tablets (the sidebar is behind "Filtres"). */ .cat-bar { margin: 0 0 14px; } .cat-bar__row { display: flex; gap: 8px; list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .cat-bar__row::-webkit-scrollbar { display: none; } .cat-bar__row > li { flex: none; } .cat-bar__row + .cat-bar__row { margin-top: 4px; } .cat-bar__row--sub .chip { min-height: 38px; font-size: 14px; } .chip.is-current { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; } .chip.is-open { background: var(--accent-soft); border-color: var(--navy); color: var(--navy); font-weight: 600; } @media (min-width: 900px) { .cat-bar { display: none; } } .price-range { display: flex; gap: 10px; align-items: center; } .price-range .field { min-height: 46px; padding: 0 12px; } .check-list { list-style: none; margin: 0; padding: 0; } .check-list--long { max-height: 300px; overflow: auto; padding-inline-end: 6px; } .filters__foot { padding-top: 18px; } .js .filters__foot { display: none; } .side-cta { background: var(--navy); border-radius: 16px; padding: 20px; color: #fff; text-decoration: none; display: flex; flex-direction: column; gap: 6px; transition: transform .2s var(--ease); } .side-cta:hover { color: #fff; transform: translateY(-2px); } .side-cta strong { color: var(--accent); font-weight: 600; } .side-cta span { font-size: 14px; line-height: 1.5; color: #C9D6E6; } @media (max-width: 899px) { .js .filters { display: none; } .js .filters.is-open { display: flex; position: fixed; inset: 0; z-index: 120; background: #fff; animation: rise .25s var(--ease); } .js .filters.is-open .filters__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line); } .filters__title { margin: 0; font-size: 18px; } .js .filters.is-open .filters__body { overflow: auto; padding: 8px 20px 0; flex: 1; } .js .filters.is-open .filters__foot { display: block; position: sticky; bottom: 0; background: #fff; padding: 12px 0 16px; margin-top: 12px; border-top: 1px solid var(--line); } .catalog__tools { width: 100%; } .sort { flex: 1; justify-content: flex-end; } .sort__label { display: none; } } @media (min-width: 900px) { .catalog__layout { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; } .filters-toggle { display: none; } .filters { padding-inline-end: 4px; } } .no-js .filters-toggle { display: none; } .woocommerce-pagination { margin-top: 36px; } .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } /* Direct children only: the arrow inside "Suivant →" / "← Précédent" is not a box of its own. */ .woocommerce-pagination .page-numbers > li > a, .woocommerce-pagination .page-numbers > li > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; height: 46px; padding: 0 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); text-decoration: none; color: var(--navy); font-weight: 500; white-space: nowrap; } [dir="rtl"] .woocommerce-pagination .page-numbers > li > a span[aria-hidden] { display: inline-block; transform: scaleX(-1); } .woocommerce-pagination .page-numbers a:hover { border-color: var(--navy); } .woocommerce-pagination .page-numbers .current { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; } .woocommerce-pagination .page-numbers .dots { border-color: transparent; } .empty-state { text-align: center; background: var(--surface); border-radius: 20px; padding: clamp(28px, 5vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 10px; } .empty-state h2 { margin: 6px 0 0; font-size: 24px; } .empty-state p { color: var(--body); max-width: 520px; margin: 0; } .empty-state__icon { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--navy); } .empty-state__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; } /* ========================================================================== Single product ========================================================================== */ .product-page { padding-bottom: clamp(56px, 7vw, 88px); } .product-page div.product { display: grid; gap: 28px; margin-top: 18px; } .product-page div.product > * { min-width: 0; } .woocommerce-product-gallery { opacity: 1 !important; position: relative; } .woocommerce-product-gallery__wrapper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; } .woocommerce-product-gallery__image { border-radius: var(--radius); background: var(--surface); overflow: hidden; aspect-ratio: 1 / 1; border: 1.5px solid transparent; } .woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; border-radius: 20px; cursor: zoom-in; } .woocommerce-product-gallery__image:not(:first-child) { cursor: pointer; border-color: var(--line); } .woocommerce-product-gallery__image:not(:first-child):hover { border-color: var(--navy); } .woocommerce-product-gallery__image a { display: block; width: 100%; height: 100%; } .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 6%; } .woocommerce-product-gallery__image:first-child img { padding: 8%; } .woocommerce-product-gallery__image--placeholder { grid-column: 1 / -1; border-radius: 20px; background: var(--surface); aspect-ratio: 1 / 1; overflow: hidden; } .woocommerce-product-gallery__image--placeholder img { width: 100%; height: 100%; object-fit: cover; } .lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; } .lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; background: #fff; border-radius: 16px; } .lightbox__close { position: absolute; top: 10px; inset-inline-end: 10px; background: #fff; box-shadow: var(--shadow-card); } .summary { display: flex; flex-direction: column; gap: 14px; } .product-kicker { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); text-decoration: none; } .product_title { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; } .product-brand { margin: 0; color: var(--muted); font-size: 14.5px; } .product-brand a { font-weight: 600; } .summary > .badge--sale { align-self: flex-start; margin-bottom: -6px; } .summary .price { margin: 0; font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.2; } .summary .woocommerce-product-details__short-description { color: var(--body); } .summary .woocommerce-product-details__short-description p:last-child { margin: 0; } .summary .stock { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--blue); } .summary .stock.out-of-stock { color: var(--muted); } form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 6px 0 0; } form.cart .single_add_to_cart_button { flex: 1 1 200px; min-height: 54px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--navy); font-weight: 600; font-size: 16px; transition: background-color .2s, transform .2s var(--ease); } form.cart .single_add_to_cart_button:hover { background: var(--accent-hover); transform: translateY(-2px); } form.cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; transform: none; } .variations_form { flex-direction: column; } table.variations { border: 0; margin: 0; } table.variations tr { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } table.variations th, table.variations td { padding: 0; text-align: start; } table.variations label { font-weight: 600; color: var(--navy); font-size: 14.5px; } table.variations select { max-width: 320px; } .reset_variations { font-size: 14px; margin-inline-start: 10px; } .single_variation_wrap { display: flex; flex-direction: column; gap: 12px; } .woocommerce-variation-price .price { font-size: 26px; } .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; } .swatch-picker { display: flex; flex-wrap: wrap; gap: 10px; } .swatch-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14.5px; } .swatch-btn::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--sw, var(--surface)); box-shadow: inset 0 0 0 1px rgba(0, 41, 107, .2); } .swatch-btn--text { padding: 0 16px; } .swatch-btn--text::before { display: none; } .swatch-btn[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 1.5px var(--navy); font-weight: 600; } .swatch-btn:disabled { opacity: .4; text-decoration: line-through; } div.quantity { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: #fff; height: 54px; } .quantity .qty { width: 56px; border: 0 !important; text-align: center; font-weight: 600; font-size: 16px; -moz-appearance: textfield; appearance: textfield; min-height: 0 !important; padding: 0 !important; box-shadow: none !important; } .quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-btn { width: 44px; border: 0; background: transparent; color: var(--navy); display: grid; place-items: center; } .qty-btn:hover { background: var(--surface); } .woocommerce-cart-form div.quantity { height: 44px; } .woocommerce-cart-form .qty-btn { width: 38px; } .woocommerce-cart-form .quantity .qty { width: 44px; } .perks { list-style: none; margin: 4px 0 0; padding: 6px 18px; background: var(--surface); border-radius: 16px; } .perks li { display: flex; gap: 12px; align-items: center; padding: 10px 0; font-size: 14.5px; color: var(--body); } .perks li + li { border-top: 1px solid var(--line); } .perks svg { color: var(--navy); } .perks strong { color: var(--navy); font-weight: 600; } .product-meta { margin: 0; font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; } .product-meta > div { display: flex; gap: 6px; flex-wrap: wrap; } .product-meta dt::after { content: " :"; } .product-meta dd { margin: 0; color: var(--ink); } .product-details { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(28px, 4vw, 48px); } .accordion { border: 1px solid var(--line); border-radius: 16px; background: #fff; } .accordion__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; font-size: 18px; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; min-height: 56px; } .accordion__head::-webkit-details-marker { display: none; } .accordion__chev { color: var(--muted); transition: transform .2s; } .accordion[open] .accordion__chev { transform: rotate(180deg); } .accordion__body { padding: 0 20px 20px; color: var(--body); } .shop_attributes th, .shop_attributes td { text-align: start; padding: 10px 0; border-top: 1px solid var(--line-soft); vertical-align: top; } .shop_attributes th { width: 40%; color: var(--navy); font-weight: 600; padding-inline-end: 12px; overflow-wrap: anywhere; } .shop_attributes p { margin: 0; } .related, .upsells { margin-top: clamp(32px, 5vw, 56px); } .related > h2, .upsells > h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 22px; } @media (min-width: 900px) { .product-page div.product { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; } .woocommerce-product-gallery { position: sticky; top: 150px; align-self: start; } } .mobile-buybar { display: none; } @media (max-width: 899px) { .mobile-buybar { position: fixed; inset-inline: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 10px; align-items: center; box-shadow: 0 -12px 30px -20px rgba(0, 41, 107, .4); transform: translateY(110%); transition: transform .3s var(--ease); } .mobile-buybar.is-visible { display: flex; transform: none; } .mobile-buybar__price { font-weight: 700; color: var(--navy); font-size: 18px; flex: 1; } .mobile-buybar .btn { min-height: 48px; } body.has-buybar .wa-float { bottom: 86px; } } /* ========================================================================== WooCommerce: notices, tables, cart, checkout, account ========================================================================== */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { list-style: none; margin: 0 0 18px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); border-inline-start: 4px solid var(--navy); background: var(--surface); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 15px; } .woocommerce-message { border-inline-start-color: var(--blue); background: var(--blue-soft); } .woocommerce-error { border-inline-start-color: var(--danger); background: var(--danger-soft); flex-direction: column; align-items: flex-start; } .woocommerce-error li { margin: 0; } .woocommerce-message .button, .woocommerce-info .button { order: 2; margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--navy); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; } .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1.5px solid var(--navy); border-radius: var(--radius); background: var(--navy); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; } .woocommerce .button:hover { background: var(--navy-2); color: #fff; } .woocommerce .button:disabled, .woocommerce .button.disabled { opacity: .5; cursor: not-allowed; } .woocommerce .button.alt, .woocommerce .checkout-button, #place_order { background: var(--accent); border-color: var(--accent); color: var(--navy); min-height: 56px; font-size: 16.5px; width: 100%; } .woocommerce .button.alt:hover, .woocommerce .checkout-button:hover, #place_order:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--navy); } .page-default { padding-bottom: clamp(56px, 7vw, 88px); } .page-head { margin: 14px 0 24px; } .page-shop-flow .page-head { margin-bottom: 18px; } .shop_table { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; border-collapse: separate; border-spacing: 0; background: #fff; font-size: 15px; } .shop_table th, .shop_table td { padding: 14px 16px; text-align: start; border-top: 1px solid var(--line-soft); vertical-align: middle; } .shop_table thead th { border-top: 0; background: var(--surface); color: var(--navy); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .shop_table .amount { font-weight: 600; color: var(--navy); white-space: nowrap; } /* Cart */ .woocommerce-cart .entry-content > .woocommerce { display: grid; gap: 24px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .woocommerce > .ship-progress { grid-column: 1 / -1; margin: 0; } .woocommerce-cart-form { min-width: 0; } .woocommerce-cart-form .product-thumbnail { width: 96px; } .woocommerce-cart-form .product-thumbnail img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: var(--surface); mix-blend-mode: multiply; } .woocommerce-cart-form .product-name a { color: var(--navy); font-weight: 600; text-decoration: none; } .woocommerce-cart-form .product-remove { width: 44px; } .woocommerce-cart-form a.remove { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 22px; } .woocommerce-cart-form a.remove:hover { background: var(--danger-soft); color: var(--danger); } .woocommerce-cart-form td.actions { background: var(--surface); } .woocommerce-cart-form .coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .woocommerce-cart-form .coupon .input-text { width: auto; flex: 1 1 180px; min-height: 46px; } .woocommerce-cart-form button[name="update_cart"] { background: transparent; color: var(--navy); margin-inline-start: auto; float: inline-end; } .cart-collaterals { min-width: 0; } .cart_totals { background: var(--surface); border-radius: 20px; padding: 22px; } .cart_totals h2 { font-size: 20px; margin-bottom: 12px; } .cart_totals .shop_table { border: 0; background: transparent; } .cart_totals .shop_table th, .cart_totals .shop_table td { padding: 12px 0; background: transparent; } .cart_totals .order-total .amount { font-size: 22px; } .wc-proceed-to-checkout { margin-top: 12px; } /* Minimum order (cart totals, mini-cart): what is missing, and progress towards it. */ .min-order { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--accent-soft); color: var(--navy); font-size: 14.5px; line-height: 1.5; } .min-order__text { margin: 0 0 10px; } .min-order .woocommerce-Price-amount { font-weight: 700; white-space: nowrap; } .min-order__bar { height: 8px; border-radius: 4px; background: #fff; overflow: hidden; } .min-order__bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); } .min-order--mini { margin: 0 0 12px; } .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .woocommerce-shipping-methods li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .woocommerce-shipping-methods input { accent-color: var(--navy); width: 18px; height: 18px; margin: 0; } .pickup-hint { display: block; width: 100%; padding-inline-start: 26px; color: var(--muted); font-size: 13px; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; } .cross-sells { margin-top: 24px; } .cross-sells h2 { font-size: 20px; } .empty-help { text-align: center; margin-top: 8px; } .empty-help .chip-list { justify-content: center; } .cart-empty.woocommerce-info { justify-content: center; font-size: 17px; } .return-to-shop { text-align: center; } @media (min-width: 1200px) { .woocommerce-cart .entry-content > .woocommerce { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } .cart_totals { position: sticky; top: 150px; } } @media (min-width: 700px) and (max-width: 1199px) { .cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 24px; align-items: start; } .cart-collaterals .cart_totals { grid-column: 2; } .cart-collaterals .cross-sells { grid-column: 1; grid-row: 1; margin-top: 0; } } @media (max-width: 699px) { .shop_table_responsive thead { display: none; } .shop_table_responsive tr { display: grid; grid-template-columns: 80px 1fr auto; gap: 4px 12px; padding: 14px; border-top: 1px solid var(--line-soft); } .shop_table_responsive tr:first-child { border-top: 0; } .shop_table_responsive td { display: block; padding: 0; border: 0; } .woocommerce-cart-form .product-thumbnail { grid-row: span 4; width: auto; } .woocommerce-cart-form .product-remove { grid-column: 3; grid-row: 1; width: auto; } .woocommerce-cart-form .product-name { grid-column: 2; grid-row: 1; } .woocommerce-cart-form .product-price, .woocommerce-cart-form .product-quantity, .woocommerce-cart-form .product-subtotal { grid-column: 2 / -1; display: flex; justify-content: space-between; align-items: center; } .shop_table_responsive td[data-title]::before { content: attr(data-title); color: var(--muted); font-size: 13px; } .woocommerce-cart-form .product-name::before, .woocommerce-cart-form .product-thumbnail::before, .woocommerce-cart-form .product-remove::before { display: none; } .woocommerce-cart-form td.actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 0; background: transparent; } .woocommerce-cart-form tr:last-child { display: block; background: var(--surface); } .woocommerce-cart-form button[name="update_cart"] { width: 100%; } .cart_totals .shop_table tr { display: flex; justify-content: space-between; gap: 12px; padding: 0; border-top: 1px solid var(--line); } .cart_totals .shop_table td::before { display: none; } .cart_totals .shop_table td { text-align: end; padding: 12px 0; } } /* Checkout */ .woocommerce-checkout form.checkout { display: grid; gap: 24px; align-items: start; } .woocommerce-checkout form.checkout > * { min-width: 0; } .woocommerce-checkout .col2-set { display: flex; flex-direction: column; gap: 8px; } .woocommerce-checkout h3 { font-size: 20px; margin: 0 0 14px; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; } .woocommerce form .form-row { margin: 0 0 16px; padding: 0; } .woocommerce form .form-row label { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 8px; color: var(--ink); } .woocommerce form .form-row label.checkbox, .woocommerce form .form-row .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 10px; font-weight: 400; } .woocommerce form .form-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--navy); } .woocommerce form .form-row .optional { font-size: 13px; } .woocommerce-input-wrapper { display: block; } .woocommerce form .form-row.hidden, .woocommerce form .form-row[style*="display: none"] { display: none !important; } /* !important: WooCommerce's address script sets inline display styles on these rows. */ .fib-hide-address #billing_address_1_field, .fib-hide-address #billing_address_2_field, .woocommerce form .fib-hidden-row { display: none !important; } /* "Votre ville": only with "Autre ville" (always visible without JavaScript). */ .js form.checkout:not(.fib-other-city) .fib-city-row { display: none !important; } #order_review_heading { margin: 0; } #order_review { background: var(--surface); border-radius: 20px; padding: 22px; } .woocommerce-checkout-review-order-table { border: 0; background: transparent; margin-bottom: 16px; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 12px 0; background: transparent; } .woocommerce-checkout-review-order-table thead th { background: transparent; padding-top: 0; } .woocommerce-checkout-review-order-table td:last-child, .woocommerce-checkout-review-order-table th:last-child { text-align: end; } .woocommerce-checkout-review-order-table .order-total .amount { font-size: 22px; } .woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); font-weight: 500; } #payment .payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; } #payment .payment_methods > li { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; } #payment .payment_methods > li:has(input:checked) { border-color: var(--navy); } #payment .payment_methods label { font-weight: 600; color: var(--navy); cursor: pointer; } #payment .payment_methods input { accent-color: var(--navy); width: 18px; height: 18px; margin-inline-end: 8px; vertical-align: -3px; } #payment .payment_box { margin-top: 8px; font-size: 14px; color: var(--body); } #payment .payment_box p { margin: 0; } #payment .place-order { margin: 0; } .woocommerce-privacy-policy-text { font-size: 13px; color: var(--muted); } .woocommerce-terms-and-conditions-wrapper { margin-bottom: 12px; } .woocommerce-form-login-toggle .woocommerce-info, .woocommerce-form-coupon-toggle .woocommerce-info { font-size: 14.5px; } form.woocommerce-form-login, form.checkout_coupon { background: var(--surface); border-radius: 16px; padding: 18px; margin-bottom: 18px; } @media (min-width: 600px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce form .form-row-wide, .woocommerce form .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; } } @media (min-width: 960px) { .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 40px; row-gap: 14px; } .woocommerce-checkout form.checkout > .col2-set { grid-column: 1; grid-row: 1 / span 3; } .woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; } .woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 150px; } } /* Order received */ .woocommerce-order { display: flex; flex-direction: column; gap: 18px; } .woocommerce-thankyou-order-received { font-size: 20px; font-weight: 600; color: var(--blue); background: var(--blue-soft); border-radius: 14px; padding: 16px 20px; margin: 0; } ul.order_details { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } ul.order_details li { background: var(--surface); border-radius: 14px; padding: 14px 16px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } ul.order_details li strong { display: block; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--navy); margin-top: 4px; } .thanks-box { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; } .thanks-box p { margin: 0; flex: 1 1 280px; } .woocommerce-customer-details address { font-style: normal; background: var(--surface); border-radius: 14px; padding: 16px; } /* Account */ .woocommerce-account .entry-content > .woocommerce { display: grid; gap: 24px; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); } .woocommerce-MyAccount-navigation .is-active a { background: var(--navy); border-color: var(--navy); color: #fff; } .woocommerce-form-login, .woocommerce-form-register { max-width: 520px; } /* Logged out: login card + registration or "no account needed" (woocommerce/myaccount/form-login.php). */ .account-auth { display: grid; gap: 20px; width: 100%; max-width: 980px; margin-inline: auto; } .account-auth__panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(22px, 3vw, 36px); } .account-auth__panel--side { background: var(--surface); } .account-auth__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--navy); display: grid; place-items: center; } .account-auth__title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); color: var(--navy); } .account-auth__lead { margin: 0; color: var(--body); line-height: 1.55; } .account-auth form.woocommerce-form-login, .account-auth form.woocommerce-form-register { max-width: none; margin: 0; padding: 0; background: none; display: flex; flex-direction: column; gap: 16px; } .account-auth .form-row { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .account-auth .form-row > label { font-weight: 600; color: var(--navy); font-size: 14.5px; } .account-auth .input-text { width: 100%; min-height: 50px; } .account-auth__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; } .account-auth__row .check { font-weight: 500; color: var(--ink); } .account-auth__lost { font-size: 14.5px; font-weight: 600; } .account-auth__perks { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .account-auth__perks li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); } .account-auth__perks svg { flex: none; margin-top: 2px; color: var(--blue); } .account-auth__help, .account-auth__note { margin: 0; font-size: 14px; color: var(--muted); } @media (min-width: 860px) { .account-auth { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } } /* Show / hide password: WooCommerce wraps the field in .password-input and adds this button. */ .password-input { position: relative; display: block; } .password-input .input-text { padding-inline-end: 54px; } .show-password-input { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; } .show-password-input::after { content: ""; width: 22px; height: 22px; background: currentColor; -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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; } .show-password-input.display-password::after { -webkit-mask-image: 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 3l18 18'/%3E%3Cpath d='M10.6 6.1A10.6 10.6 0 0 1 12 6c6.5 0 10 6 10 6a17.4 17.4 0 0 1-3.2 3.9M6.6 6.6C3.9 8.3 2 12 2 12s3.5 6 10 6c1.6 0 3-.4 4.3-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); mask-image: 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 3l18 18'/%3E%3Cpath d='M10.6 6.1A10.6 10.6 0 0 1 12 6c6.5 0 10 6 10 6a17.4 17.4 0 0 1-3.2 3.9M6.6 6.6C3.9 8.3 2 12 2 12s3.5 6 10 6c1.6 0 3-.4 4.3-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); } .show-password-input:hover { color: var(--navy); background: var(--surface); } .show-password-input:focus-visible { outline: none; box-shadow: var(--ring); color: var(--navy); } /* Lost / reset password forms, same card look. */ .woocommerce-ResetPassword { max-width: 520px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(22px, 3vw, 36px); } @media (min-width: 900px) { .woocommerce-account .entry-content > .woocommerce { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; } .woocommerce-MyAccount-navigation ul { flex-direction: column; } .woocommerce-account:not(.logged-in) .entry-content > .woocommerce { grid-template-columns: 1fr; } } /* ========================================================================== Service Ramassage ========================================================================== */ .page-hero { background: var(--surface); border-bottom: 1px solid var(--line); padding-bottom: clamp(32px, 5vw, 48px); } .page-hero .breadcrumb { margin-bottom: 20px; } .page-hero__title { margin: 0 0 14px; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.02em; line-height: 1.05; max-width: 760px; } .page-hero__text { margin: 0; font-size: clamp(16px, 1.6vw, 18px); color: var(--body); max-width: 640px; } .ramassage__layout { display: grid; gap: 40px; align-items: start; padding-block: clamp(32px, 5vw, 48px) clamp(56px, 8vw, 88px); } .ramassage__subtitle { font-size: 24px; font-weight: 600; margin-bottom: 20px; } .ramassage__how { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .ramassage__how .ramassage__subtitle { margin: 0; } .howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; } .howto li { display: flex; gap: 16px; } .howto .step__num { width: 38px; height: 38px; } .howto li > span:last-child { display: flex; flex-direction: column; gap: 4px; color: var(--muted); } .howto strong { color: var(--navy); font-weight: 600; } .wa-box { border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } .wa-box strong { color: var(--navy); font-weight: 600; } .wa-box span { color: var(--muted); font-size: 14.5px; } .wa-box .btn { align-self: flex-start; } .wa-box__number { font-size: 13.5px; color: var(--muted); white-space: nowrap; } .ramassage__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(20px, 3vw, 36px); box-shadow: 0 30px 50px -36px rgba(0, 41, 107, .35); min-width: 0; } @media (min-width: 900px) { .ramassage__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 56px; } } .rform { display: flex; flex-direction: column; gap: 18px; position: relative; } .rform__title { font-size: 24px; font-weight: 600; margin: 0; } .rform__required { margin: -10px 0 0; font-size: 13px; color: var(--muted); } .form-row { margin: 0; min-width: 0; } .form-grid { display: grid; gap: 18px; } @media (min-width: 600px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .hp-field { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .dropzone { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .2s, background-color .2s; } .dropzone:hover, .dropzone.is-over { border-color: var(--navy); background: #EEF2F7; } .dropzone:focus-within { border-color: var(--navy); box-shadow: var(--ring); } .dropzone.has-file { border-style: solid; border-color: var(--blue); background: var(--blue-soft); } .dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .dropzone__icon { width: 46px; height: 46px; flex: none; border-radius: var(--radius); background: var(--accent-soft); display: grid; place-items: center; color: var(--navy); } .dropzone.has-file .dropzone__icon { background: var(--blue-soft); color: var(--blue); } .dropzone__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dropzone__text strong { font-weight: 600; color: var(--navy); overflow-wrap: anywhere; } .dropzone__text span { font-size: 13.5px; color: var(--muted); } .dropzone__preview { margin-inline-start: auto; flex: none; } .dropzone__preview img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); } .dropzone[aria-invalid="true"], .dropzone:has(input[aria-invalid="true"]) { border-color: var(--danger); } .segmented__options { display: flex; flex-wrap: wrap; gap: 10px; } .segmented__opt { flex: 1 1 180px; position: relative; } .segmented__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .segmented__opt span { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 600; transition: all .15s; } .segmented__opt input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; } .segmented__opt input:focus-visible + span { box-shadow: var(--ring); } .segmented__opt input:checked + span svg { color: var(--accent); } .rform__address { display: none; } .rform:has(input[name="fib_mode"][value="delivery"]:checked) .rform__address { display: block; animation: rise .25s var(--ease); } .no-js .rform__address { display: block; } .rform__privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; } .rform__privacy svg { color: var(--blue); flex: none; margin-top: 1px; } .rform [data-submit].is-loading::after { content: ""; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes pop { from { opacity: 0; transform: scale(.92); } } .rsuccess { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 6px 0; animation: pop .5s var(--ease) both; } .rsuccess:focus { outline: none; } .rsuccess h2 { margin: 0; font-size: 26px; } .rsuccess p { margin: 0; color: var(--body); } .rsuccess__ref { font-weight: 600; color: var(--navy) !important; background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; } .rsuccess__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; } .rsuccess__icon svg { stroke-width: 3; } .rsuccess__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } /* ========================================================================== Espace professionnel ========================================================================== */ .pro-hero { color: #fff; padding-bottom: clamp(36px, 6vw, 72px); background: radial-gradient(circle at 86% 18%, rgba(0, 169, 241, .3) 0, rgba(0, 169, 241, 0) 42%), linear-gradient(120deg, var(--blue) 0%, var(--navy) 58%, var(--navy-deep) 100%); } .pro-hero .breadcrumb, .pro-hero .breadcrumb a { color: rgba(255, 255, 255, .82); } .pro-hero .breadcrumb a:hover, .pro-hero .breadcrumb > span:last-child { color: #fff; } .pro-hero__grid { display: grid; gap: 28px; align-items: center; margin-top: clamp(16px, 3vw, 28px); } .pro-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } .pro-hero__kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13.5px; font-weight: 500; } .pro-hero__kicker svg { color: var(--accent); } .pro-hero__title { margin: 0; color: #fff; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.02em; max-width: 720px; } .pro-hero__text { margin: 0; color: rgba(255, 255, 255, .9); font-size: clamp(15.5px, 1.6vw, 18px); max-width: 620px; } .pro-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .pro-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; } .pro-stats__item { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); } .pro-stats__item strong { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; font-weight: 700; color: #fff; } .pro-stats__item span { font-size: 14px; color: rgba(255, 255, 255, .88); } @media (min-width: 960px) { .pro-hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; } .pro-stats { grid-template-columns: 1fr; } } @media (max-width: 599px) { .pro-hero__ctas .btn { flex: 1 1 auto; } .pro-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap: 8px; } .pro-stats__item { padding: 14px 12px; } .pro-stats__item strong { font-size: 24px; } .pro-stats__item span { font-size: 12.5px; line-height: 1.35; } } .pro-adv { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } @media (min-width: 600px) { .pro-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .pro-adv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } .pro-adv__card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); } .pro-adv__card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); transform: translateY(-2px); } .pro-adv__icon { width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: var(--accent-soft); color: var(--blue); display: grid; place-items: center; } .pro-adv__title { margin: 0; font-size: 18px; font-weight: 600; } .pro-adv__card p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.55; } .pro-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .pro-request { display: grid; gap: 24px; align-items: start; padding-bottom: clamp(56px, 8vw, 88px); } .pro-help { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); } .pro-help__title { margin: 0; font-size: 22px; } .pro-help > p { margin: 0; color: var(--body); } .pro-help__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pro-help__list li { display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; } .pro-help__list svg { color: var(--blue); margin-top: 3px; } .pro-help__list a { color: var(--navy); font-weight: 500; text-decoration: none; } .pro-help__list a:hover { color: var(--blue); } @media (min-width: 960px) { .pro-request { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; } .pro-help { position: sticky; top: 130px; } } /* ========================================================================== Pages, prose, 404 ========================================================================== */ .entry-content--prose { max-width: 760px; color: var(--body); font-size: 17px; } .entry-content--prose h2 { font-size: 26px; margin-top: 1.6em; } .entry-content--prose h3 { font-size: 20px; margin-top: 1.4em; } .entry-content--prose a { color: var(--navy); font-weight: 500; } .entry-content--prose li { margin-bottom: .4em; } .post-list { display: grid; gap: 18px; } .post-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px; } .post-card__title { font-size: 20px; margin: 0; } .post-card__title a { text-decoration: none; } .post-card__meta { color: var(--muted); font-size: 14px; margin: 4px 0 8px; } .notfound { text-align: center; padding-block: clamp(40px, 8vw, 96px); display: flex; flex-direction: column; align-items: center; gap: 16px; } .notfound__code { font-size: clamp(80px, 14vw, 150px); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--line-strong); letter-spacing: -.03em; } .notfound p { color: var(--body); max-width: 520px; margin: 0; } .notfound__search { display: flex; gap: 10px; width: 100%; max-width: 520px; } .notfound__cats { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--navy-deep); color: #B8C7DA; font-size: 14.5px; } .footer__grid { display: grid; gap: 32px; padding-block: 56px 32px; } .footer__about { display: flex; flex-direction: column; gap: 12px; } .footer__about p { margin: 0; max-width: 360px; line-height: 1.6; } .footer__brand { color: #fff; font-weight: 700; font-size: 22px; text-decoration: none; } .footer__brand:hover { color: var(--accent); } .footer__line { display: flex; gap: 10px; align-items: flex-start; } .footer__line svg { color: var(--accent); margin-top: 2px; } .footer__col ul { list-style: none; margin: 0; padding: 0; } .footer__title { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 10px; letter-spacing: 0; } .footer__link, .footer__col .menu a { color: #B8C7DA; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; } .footer__link:hover, .footer__col .menu a:hover { color: var(--accent); } .footer__pay { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; } .footer__pay svg { color: var(--accent); } .g-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 12px; background: #fff; color: var(--muted); font-size: 13.5px; text-decoration: none; } a.g-badge:hover { color: var(--muted); box-shadow: 0 0 0 3px rgba(0, 169, 241, .55); } .g-badge__score { font-size: 16px; font-weight: 700; color: var(--navy); } .footer__social { display: flex; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; } .footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; } .footer__social a:hover { background: var(--accent); color: var(--navy); } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; } .footer__bottom p { margin: 0; } .footer__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; } .footer__legal a { color: #B8C7DA; min-height: 0; } @media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; } } .wa-float { position: fixed; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 58; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25A35A; color: #fff; box-shadow: 0 14px 30px -10px rgba(23, 128, 63, .6); transition: transform .2s var(--ease), background-color .2s; } .wa-float:hover { transform: scale(1.07); background: var(--green); color: #fff; } .wa-float__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } @media (min-width: 900px) { /* Desktop: a pill that says what it is for. */ .wa-float { width: auto; height: 52px; padding: 0 20px 0 14px; border-radius: 999px; display: inline-flex; gap: 10px; font-weight: 600; text-decoration: none; } .wa-float:hover { transform: translateY(-2px); } .wa-float::after { border-radius: 999px; } .wa-float__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; } } .wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25A35A; animation: ping 2.4s var(--ease) infinite; pointer-events: none; } @keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.5); opacity: 0; } } /* ========================================================================== Packs: cards, product page, navigation ========================================================================== */ .badge--pack { display: inline-flex; gap: 4px; background: var(--navy); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; } .pack-line { font-size: 13.5px; color: var(--muted); line-height: 1.35; } .pack-line strong { color: var(--blue); font-weight: 600; } .pack-line .amount { font-weight: 600; } .product-page .pack-deadline { background: var(--accent-soft); color: var(--blue); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; } .pack-deadline.is-ended { opacity: .8; } .pack-ended { background: var(--danger-soft); color: var(--danger); border-radius: var(--radius); padding: 12px 14px; font-weight: 500; } .pack-ended a { color: inherit; font-weight: 700; } .pack-box { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0 0 20px; background: #fff; } .pack-box__title { font-size: 17px; margin: 0 0 8px; } .pack-box__list { list-style: none; margin: 0; padding: 0; } .pack-box__item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .pack-box__img { width: 48px; height: 48px; flex: none; border-radius: 10px; background: var(--surface); overflow: hidden; } .pack-box__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .pack-box__name { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.35; } .pack-box__name a { color: var(--ink); text-decoration: none; } .pack-box__name a:hover { color: var(--blue); text-decoration: underline; } .pack-box__qty { font-weight: 700; color: var(--navy); margin-inline-end: 4px; } .pack-box__price { font-weight: 600; color: var(--navy); white-space: nowrap; font-size: 14px; } .pack-box__sum { margin: 12px 0 0; display: grid; gap: 4px; font-size: 15px; } .pack-box__sum > div { display: flex; justify-content: space-between; gap: 12px; } .pack-box__sum dt { color: var(--body); } .pack-box__sum dd { margin: 0; color: var(--navy); } .pack-box__save { background: var(--blue-soft); border-radius: 10px; padding: 8px 12px; margin-top: 6px; font-weight: 700; } .pack-box__save dt, .pack-box__save dd { color: var(--blue); } .catnav__item--packs { align-items: center; margin-inline-end: 8px; } .catnav__link--packs { --fx-shine: rgba(0, 169, 241, .25); gap: 6px; height: 38px; margin: 0; padding-inline: 14px; border: 1.5px solid rgba(0, 169, 241, .55); border-radius: 999px; background: linear-gradient(135deg, #fff 0%, var(--accent-soft) 100%); color: var(--blue); font-weight: 600; } .catnav__link--packs svg { color: var(--blue); } .catnav__item--packs:hover .catnav__link--packs { color: var(--navy); border-color: var(--accent); } .drawer__group--packs .drawer__icon { background: var(--accent); } .drawer__group--packs .badge { margin-inline-start: auto; } /* Language switcher */ .lang-switch { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--radius); color: var(--navy); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; } .lang-switch:hover { border-color: var(--navy); color: var(--navy); } .lang-switch__short { font-size: 17px; line-height: 1; } .lang-switch__long { display: none; } .topbar__lang { font-weight: 600; } @media (max-width: 360px) { .lang-switch { min-width: 40px; padding: 0 8px; } } @media (min-width: 900px) { .lang-switch { height: 48px; padding: 0 14px; } .lang-switch__short { display: none; } .lang-switch__long { display: inline; } } /* "-18%" keeps its reading order on the Arabic site. */ .badge--sale, .phero__sticker strong { direction: ltr; unicode-bidi: isolate; } /* Arabic: letters must stay joined, no tracking; slightly larger body text. */ [dir="rtl"] * { letter-spacing: 0 !important; } /* Names not translated yet (French) keep their own reading order: "12 feutres", not "feutres 12". */ [dir="rtl"] :is(.brand__name, .pcard__title, .pack-box__name, .product_title, .search__name, .woocommerce-mini-cart-item > a, .product-name, .cat-tile__name, .mega__link span, .breadcrumb) { unicode-bidi: plaintext; } [dir="rtl"] body { font-size: 16.5px; } [dir="rtl"] .phero__title { line-height: 1.25; } [dir="rtl"] .section__title { line-height: 1.3; } /* ========================================================================== Buying flow: product buttons, cart, checkout errors, delivery and payment choices ========================================================================== */ /* "Acheter maintenant" under "Ajouter au panier". */ form.cart .fib-buy-now { flex: 1 1 100%; min-height: 54px; font-size: 16px; } .woocommerce-variation-add-to-cart-disabled .fib-buy-now { opacity: .5; pointer-events: none; } form.cart .single_add_to_cart_button.loading { opacity: .75; pointer-events: none; } @media (max-width: 899px) { .mobile-buybar__add { width: 48px; padding: 0; flex: none; } .mobile-buybar__buy { padding: 0 20px; flex: none; } } /* A notice WooCommerce prints itself (no JavaScript, cart updated, item removed) shows like the pop-up and fades. */ .single-product .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message { position: fixed; z-index: 200; top: 14px; inset-inline: 14px; max-width: 420px; margin: 0 auto; background: var(--navy); color: #fff; border: 0; box-shadow: 0 24px 50px -18px rgba(0, 27, 73, .55); animation: noticeAway 6s var(--ease) forwards; } .single-product .woocommerce-notices-wrapper .woocommerce-message a:not(.button), .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message a:not(.button) { color: var(--accent); } .single-product .woocommerce-notices-wrapper .woocommerce-message .button, .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button { background: var(--accent); color: var(--navy); } @media (min-width: 900px) { .single-product .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message { inset-inline: auto 24px; top: 24px; width: 400px; } } body.admin-bar.single-product .woocommerce-notices-wrapper .woocommerce-message, body.admin-bar.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message { top: 56px; } @keyframes noticeAway { 0% { opacity: 0; transform: translateY(-12px); } 6%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; visibility: hidden; } } /* Cart: quantities apply by themselves (checkout.js); the button stays only without JavaScript. */ .js .woocommerce-cart-form button[name="update_cart"] { display: none !important; } /* Totals boxes (cart and checkout): rows of label + value, the delivery choice on its own full-width row. */ .cart_totals .shop_table, .cart_totals .shop_table tbody, .woocommerce-checkout-review-order-table, .woocommerce-checkout-review-order-table thead, .woocommerce-checkout-review-order-table tbody, .woocommerce-checkout-review-order-table tfoot { display: block; } .cart_totals .shop_table tr, .woocommerce-checkout-review-order-table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); } .cart_totals .shop_table tr:first-child, .woocommerce-checkout-review-order-table thead tr { border-top: 0; } .cart_totals .shop_table th, .cart_totals .shop_table td, .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { display: block; border: 0; padding: 12px 0; } .woocommerce-checkout-review-order-table .product-name { flex: 1; min-width: 0; } tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: 0; } tr.woocommerce-shipping-totals th { padding-bottom: 8px; } tr.woocommerce-shipping-totals td { padding-top: 0; text-align: start !important; } tr.woocommerce-shipping-totals td::before { display: none; } /* Delivery choices: one card per option (name, price; the shop address under "Retrait en magasin"). */ .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .woocommerce-shipping-methods li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s; } .woocommerce-shipping-methods li:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); } .woocommerce-shipping-methods input[type="radio"] { grid-column: 1; width: 18px; height: 18px; margin: 0; accent-color: var(--navy); } .woocommerce-shipping-methods label { grid-column: 2; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; cursor: pointer; font-weight: 600; color: var(--navy); } .woocommerce-shipping-methods input[type="hidden"] + label { grid-column: 1 / -1; cursor: default; } .woocommerce-shipping-methods label::before { content: ""; position: absolute; inset: 0; border-radius: 12px; } /* The whole card is clickable. */ .ship-price, .ship-price .amount { white-space: nowrap; font-weight: 700; color: var(--navy); } .woocommerce-shipping-methods .pickup-hint { grid-column: 2; width: auto; padding: 0; font-size: 13px; } .woocommerce-shipping-destination { margin-top: 10px; } /* Checkout errors: back at the top of the form, one sentence, the fields in red with their message. */ .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; scroll-margin-top: 150px; } @media (min-width: 960px) { .woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > .woocommerce-NoticeGroup { grid-row: 1; } .woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > .col2-set { grid-row: 2 / span 3; } .woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > #order_review_heading { grid-row: 2; } .woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > #order_review { grid-row: 3; } } .woocommerce-NoticeGroup-checkout .woocommerce-error { margin: 0; } .woocommerce-NoticeGroup-checkout.has-field-errors .woocommerce-error li[data-id] { display: none; } .fib-error-intro { font-weight: 600; } .woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--danger); background-color: var(--danger-soft); } .woocommerce form .form-row.woocommerce-invalid > label { color: var(--danger); } .woocommerce form .checkout-inline-error-message, .woocommerce form .form-row .woocommerce-input-wrapper + .checkout-inline-error-message { margin: 6px 0 0; color: var(--danger); font-size: 13.5px; font-weight: 500; line-height: 1.4; } .checkout-inline-error-message strong { font-weight: 500; } /* Payment choices (cash on delivery, in-store payment): one card per method. */ #payment .payment_methods > li { position: relative; } #payment .payment_methods > li > label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; } #payment .payment_methods label img { display: inline-block; max-height: 24px; width: auto; margin: 0; } /* ========================================================================== Motion & print ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media print { .site-header, .site-footer, .wa-float, .filters, .catnav, .toast, .mobile-buybar { display: none !important; } body { font-size: 12pt; } a { text-decoration: underline; } }