/* ========================================================================================== CLIC Suisse — feuille de styles unique (aucune étape de build). 1. Police, variables 2. Base 3. Composants 4. En-tête, pied de page 5. Accueil 6. Cartes et catalogue 7. Fiche produit 8. Panier 9. Commande 10. Compte client 11. Espace Pro 12. Test de lecture 13. Revendeurs 14. Pages 15. Mouvement 16. Responsive Signature : fond blanc, titres en serif (Newsreader), vraies photos portées, et chaque produit posé sur une teinte pâle de SA couleur (--tint, mélangée au blanc avec color-mix). Accent : rouge suisse, avec parcimonie. Pas d'effets décoratifs : survols sobres, aucune animation d'apparition, des gris légèrement chauds plutôt que des gris « tech ». ========================================================================================== */ /* 1. Police, variables -------------------------------------------------------------------- */ /* Polices réduites à l'usage du site : graisses 400 à 600, alphabet latin (français, allemand, italien), taille optique 18 à 72 pour Newsreader. Geist 57 → 16 Ko, Newsreader 61 → 37 Ko. */ @font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } /* Titres : une seule graisse, avec taille optique (le dessin s'affine dans les grands corps). */ @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* --tint déclarée comme couleur : ses changements (choix d'une couleur) s'animent en douceur. */ @property --tint { syntax: ""; inherits: true; initial-value: #9a9aa3; } :root { --bg: #fff; --raise: #f4f3f0; --paper: #f4f1ec; --ink: #121211; --ink-2: #3b3a37; --muted: #67655f; --soft-ink: #8d8a84; --line: #ebe9e4; --line-2: #d8d5ce; /* Bordure des champs de saisie : 3:1 au moins sur blanc et sur papier (WCAG 1.4.11). Les filets (--line, --line-2) peuvent rester pâles, pas le contour d'un champ : le public lit avec des lunettes. */ --field-line: var(--soft-ink); --red: #e2231a; --red-ink: #c41a12; --ok: #187a48; --ok-bg: #ebf7f0; --warn: #94600a; --warn-bg: #fbf4e6; --bad: #bf2a22; --bad-bg: #fcefee; --focus: #2563eb; --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Newsreader", Georgia, "Times New Roman", serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --r-xl: 20px; --r-lg: 16px; --r: 12px; --r-sm: 10px; --r-btn: 10px; --pill: 999px; --gutter: clamp(16px, 4vw, 40px); --max: 1320px; --head: 72px; --ease: cubic-bezier(.16, 1, .3, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); --sh-1: 0 1px 2px rgba(18, 18, 17, .06), 0 4px 14px -8px rgba(18, 18, 17, .14); --sh-2: 0 24px 60px -30px rgba(18, 18, 17, .3); } /* Fond teinté : la couleur du produit à 12 % sur du blanc. */ .card__media, .product__figure, .thumb, .cart-item__media, .summary__media, .order-row__thumb { background-color: #f4f2ee; background-color: color-mix(in oklab, var(--tint) 12%, #fff); transition: --tint .6s var(--ease-out); } /* 2. Base --------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 24px); } html.is-locked { overflow: hidden; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; } body > main { flex: 1 0 auto; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; } ul, ol { margin: 0; padding: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; touch-action: manipulation; } a, button, input, label, select { -webkit-tap-highlight-color: transparent; } input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--ink); color: #fff; } address { font-style: normal; } details summary { list-style: none; cursor: pointer; } details summary::-webkit-details-marker { display: none; } [hidden] { display: none !important; } .icon { flex: none; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; left: 16px; top: -100px; z-index: 300; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-btn); } .skip:focus { top: 12px; } #contenu:focus { outline: none; } .eyebrow { font-size: 13px; letter-spacing: .02em; color: var(--muted); margin: 0; font-weight: 500; } .eyebrow a { text-decoration: none; } .h1, .h2, .h3 { font-family: var(--serif); font-weight: 500; font-synthesis: none; text-wrap: balance; } .h1 { letter-spacing: -.02em; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06; } .h2 { letter-spacing: -.015em; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; } .h3 { letter-spacing: -.01em; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; } .is-muted { color: var(--muted); } .is-center { text-align: center; } .section { padding-top: clamp(80px, 11vw, 144px); } .section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 36px; } .section__head p { color: var(--muted); margin: 0; max-width: 34em; } .empty { color: var(--muted); padding: 40px 0; } .prose { color: var(--ink-2); max-width: 68ch; line-height: 1.7; } .prose h2 { font-size: 24px; letter-spacing: -.02em; margin: 1.8em 0 .6em; color: var(--ink); } .prose h3 { font-size: 19px; margin: 1.4em 0 .5em; color: var(--ink); } .prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; } .prose li { margin: .3em 0; } .prose a { color: var(--ink); } .prose img { border-radius: var(--r-sm); } .prose figure { margin: 2em 0; } .prose figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; } .prose--sm { font-size: 14.5px; line-height: 1.7; } /* 3. Composants --------------------------------------------------------------------------- */ .btn, .button, button.button, a.button, input.button, #place_order, .woocommerce-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--r-btn); border: 1px solid var(--ink); background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; line-height: 1.1; text-decoration: none; text-align: center; transition: background-color .2s ease, border-color .2s ease, color .2s ease; cursor: pointer; } .btn:hover, .button:hover, #place_order:hover { background: #3a3935; border-color: #3a3935; color: #fff; } .btn:active, .button:active { transform: translateY(1px); } .btn[disabled], .btn:disabled, .button:disabled { background: var(--raise); border-color: var(--line-2); color: var(--muted); cursor: not-allowed; transform: none; } .btn--lg { min-height: 56px; padding: 0 30px; font-size: 16px; } .btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; } .btn--block { width: 100%; } .btn--line, .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn--line:hover, .btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--light { background: #fff; color: var(--ink); border-color: #fff; } .btn--light:hover { background: #e9e6e0; color: var(--ink); border-color: #e9e6e0; } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); } .btn--ghost-light:hover { background: transparent; color: #fff; border-color: #fff; } .btn--dashed { background: transparent; color: var(--ink); border-style: dashed; border-color: var(--line-2); } .btn--dashed:hover { background: var(--ink); color: #fff; border-style: solid; } .btn.is-loading { opacity: .65; pointer-events: none; } .link-arrow { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; line-height: 1.2; } .link-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; color: inherit; } .icon-btn, .round-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); transition: background-color .2s ease, opacity .2s ease; } .icon-btn:hover { background: var(--raise); } .round-btn { border: 1px solid var(--line-2); background: #fff; } .round-btn:hover:not(:disabled) { border-color: var(--ink); } .round-btn:disabled { opacity: .35; cursor: default; } .badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; letter-spacing: .04em; font-weight: 600; } .chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .chips__label { font-size: 13.5px; color: var(--muted); margin-right: 4px; font-weight: 500; } .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--pill); border: 1px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .chip:hover { border-color: var(--ink); } .chip[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; } .chip--sub { color: var(--ink-2); } .chip--num { font-variant-numeric: tabular-nums; padding: 0 14px; } .swatches { display: flex; gap: 4px; flex-wrap: wrap; list-style: none; align-items: center; } .swatch { display: grid; place-items: center; width: 32px; height: 32px; padding: 4px; border-radius: 50%; border: 1.5px solid transparent; background: none; transition: border-color .2s ease, transform .2s var(--ease); } .swatch:hover { border-color: var(--line-2); } .swatch[aria-current], .swatch[aria-pressed=true] { border-color: var(--ink); } .swatch__dot, .dot { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); } .dot { width: 12px; height: 12px; flex: none; } .stock { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; margin: 0; color: var(--ok); } .stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .stock.is-low, .stock.is-backorder { color: var(--warn); } .stock.is-out { color: var(--bad); } .stepper { display: inline-flex; align-items: center; height: 56px; border: 1px solid var(--field-line); border-radius: var(--r-btn); background: #fff; } .stepper button { width: 48px; height: 100%; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-btn); } .stepper button:hover { background: var(--raise); } .stepper input { width: 36px; border: 0; background: none; text-align: center; font-variant-numeric: tabular-nums; padding: 0; font-weight: 500; } .stepper--sm { height: 40px; } .stepper--sm button { width: 40px; } .stepper--sm input { width: 26px; font-size: 14px; } .field label, .form-row label { display: block; font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 7px; } .field input, .field textarea, .field select, .form-row .input-text, .form-row select, .woocommerce-Input, .woocommerce-input-wrapper input, .woocommerce-input-wrapper textarea, .woocommerce-input-wrapper select { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--field-line); border-radius: var(--r-sm); background: #fff; font-size: 16px; line-height: 1.3; transition: border-color .2s ease, box-shadow .2s ease; appearance: none; } .field select, .form-row select, .woocommerce-input-wrapper select { padding-right: 44px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121211' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; } .field textarea, .form-row textarea { min-height: 100px; resize: vertical; } .field input:hover, .field textarea:hover, .form-row .input-text:hover { border-color: var(--ink-2); } .field input:focus, .field textarea:focus, .form-row .input-text:focus, .form-row select:focus, .woocommerce-Input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(18, 18, 17, .08); outline: none; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; } .form-grid .field, .form-grid p { margin: 0; } .field--wide { grid-column: 1 / -1; } .hp { position: absolute; left: -9999px; } .required, abbr.required { color: var(--bad); text-decoration: none; border: 0; } .notice-box, .woocommerce-error, .woocommerce-message, .woocommerce-info, .woocommerce-notice { list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-sm); background: var(--raise); color: var(--ink); font-size: 14.5px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; } .woocommerce-error { background: var(--bad-bg); color: var(--bad); flex-direction: column; align-items: flex-start; } .woocommerce-message, .notice-box.is-ok { background: var(--ok-bg); color: var(--ok); } .woocommerce-error li { margin: 0; } .woocommerce-message .button, .woocommerce-info .button { min-height: 36px; padding: 0 16px; font-size: 13.5px; order: 2; } .woocommerce-notices-wrapper:empty { display: none; } .panel { border-radius: var(--r-xl); padding: clamp(28px, 4vw, 48px); } .panel--dark { background: var(--ink); color: #fff; } .panel--soft, .panel--paper { background: var(--paper); } .panel__label { margin: 0; font-size: 14px; font-weight: 500; color: var(--muted); } .panel--dark .panel__label, .pro-teaser .panel__label { color: #b5b2ab; } .panel--line { background: #fff; border: 1px solid var(--line); } .search-pill { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 5px 5px 5px 18px; border: 1px solid var(--field-line); border-radius: var(--r-btn); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; } .search-pill .btn { border-radius: 7px; } .search-pill:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(18, 18, 17, .08); } .search-pill input { flex: 1; width: 100%; min-width: 0; border: 0; background: transparent; font-size: 16px; outline: none; } /* Largeur en % : le champ peut rétrécir sur mobile. */ .table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r); } .table, .shop_table.woocommerce-orders-table, .woocommerce-table--order-details { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; } .table th, .woocommerce-orders-table th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 13px 18px; border-bottom: 1px solid var(--line); } .table td, .woocommerce-orders-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table tr:last-child td { border-bottom: 0; } .table .is-num { text-align: right; } .table .is-mono { font-family: var(--mono); font-size: 13px; } .table__actions { display: flex; gap: 16px; justify-content: flex-end; white-space: nowrap; font-size: 14px; } .status { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); } .status.is-completed::before { background: var(--ok); } .status.is-cancelled::before, .status.is-refunded::before, .status.is-failed::before { background: var(--bad); } .toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 120; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 18px; border-radius: var(--r); background: var(--ink); color: #fff; font-size: 14.5px; box-shadow: var(--sh-2); transform: translate(-50%, 140%); transition: transform .45s var(--ease); } .toast.is-on { transform: translate(-50%, 0); } .toast__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .toast__btn { flex: none; min-height: 40px; padding: 0 16px; border-radius: 7px; border: 0; background: #fff; color: var(--ink); font-weight: 500; font-size: 14px; } .fly { position: fixed; z-index: 200; object-fit: contain; pointer-events: none; mix-blend-mode: multiply; } /* 4. En-tête et pied de page ------------------------------------------------------------- */ .topbar { background: var(--ink); color: #d6d3cc; font-size: 13px; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; } .topbar__text { margin: 0; } .topbar__pro { display: inline-flex; align-items: center; min-height: 40px; color: #fff; font-weight: 500; text-decoration: none; flex: none; } .topbar__pro:hover { color: #fff; text-decoration: underline; } /* Langue : menu déroulant en fin de menu principal (ordinateur), boutons dans le menu mobile, liste en pied de page. */ .flag { display: block; flex: none; width: 20px; height: 14px; border-radius: 2px; outline: 1px solid rgba(18, 18, 17, .12); outline-offset: -1px; } .lang__list { list-style: none; margin: 0; padding: 0; } .lang__list a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); color: inherit; text-decoration: none; white-space: nowrap; } .lang--menu { position: relative; margin-left: 4px; } .lang__toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; list-style: none; border-radius: var(--r-btn); font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none; } .lang__toggle::-webkit-details-marker { display: none; } .lang__toggle:hover, .lang--menu[open] .lang__toggle { background: var(--raise); color: var(--ink); } .lang__chevron { opacity: .7; transition: transform .2s var(--ease-out); } .lang--menu[open] .lang__chevron { transform: rotate(180deg); } .lang__panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1; min-width: 208px; padding: 6px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1), var(--sh-2); } .lang--menu[open] .lang__panel { animation: lang-in .18s var(--ease-out); } @keyframes lang-in { from { opacity: 0; transform: translateY(-4px); } } .lang--menu a { font-size: 14.5px; } .lang--menu a:hover { background: var(--raise); } .lang--menu a .icon { margin-left: auto; visibility: hidden; } .lang--menu a[aria-current] { font-weight: 600; } .lang--menu a[aria-current] .icon { visibility: visible; } .lang--nav { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--line); } .lang--nav .lang__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lang--nav a { min-height: 48px; padding: 0 14px; border: 1px solid var(--line-2); font-size: 15.5px; font-weight: 500; color: var(--ink-2); } .lang--nav a[aria-current] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } .lang--foot .lang__list { display: flex; flex-wrap: wrap; gap: 4px 8px; } /* Seul sélecteur de langue du site : cibles de 44 px. */ .lang--foot .lang__list a { min-height: 44px; padding: 0 10px; font-size: 13.5px; color: #a5a29b; } .lang--foot a:hover, .lang--foot a[aria-current] { color: #fff; } .lang--foot a[aria-current] { background: #23221f; } .lang--foot .flag { width: 18px; height: 12px; outline-color: rgba(255, 255, 255, .16); } /* Page traduite : masquée le temps que Google Traduction remplace le texte (2 s au plus, inc/assets.php). */ .is-translating body { opacity: 0; } body { transition: opacity .2s ease; } .head { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid transparent; transition: border-color .3s ease; } .head.is-scrolled { border-bottom-color: var(--line); } .head__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--head); } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; color: var(--ink); min-height: 44px; } .logo__img { height: 32px; width: auto; } .logo__country { display: flex; align-items: center; gap: 7px; padding-top: 5px; font-size: 12px; letter-spacing: .22em; font-weight: 600; color: var(--ink); } .logo__flag { width: 15px; height: 15px; flex: none; color: var(--red); } .nav { flex: 1; display: flex; justify-content: center; min-width: 0; } .nav__list { display: flex; gap: 4px; list-style: none; } .nav__list a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-2); white-space: nowrap; text-underline-offset: 7px; text-decoration-thickness: 1.5px; } .nav__list a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); } .nav__list .current-menu-item > a, .nav__list .current-menu-ancestor > a, .nav__list .current-product_cat-ancestor > a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); } .nav__extra { display: none; } .head__end { display: flex; align-items: center; gap: 8px; flex: none; } .head__account { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--r-btn); font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink-2); } .head__account:hover { background: var(--raise); color: var(--ink); } .cart-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 14px; border-radius: var(--r-btn); background: var(--ink); color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background-color .2s ease; } .cart-btn:hover { background: #3a3935; color: #fff; } .cart-btn__count { min-width: 28px; height: 28px; padding: 0 7px; border-radius: var(--pill); background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .cart-btn__count.is-bump { animation: bump .6s var(--ease); background: var(--red-ink); color: #fff; } @keyframes bump { 35% { transform: scale(1.35); } } .menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: #fff; place-items: center; } .menu-btn__close { display: none; } .menu-btn[aria-expanded=true] .menu-btn__open { display: none; } .menu-btn[aria-expanded=true] .menu-btn__close { display: block; } .focus-head { background: #fff; border-bottom: 1px solid var(--line); } .focus-head__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; } .focus-head__help { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); } .focus-head__help a { color: var(--ink); text-decoration: none; font-weight: 500; } .focus-foot { padding: 32px 0 48px; font-size: 13.5px; color: var(--muted); margin-top: auto; } .focus-foot a { color: inherit; } .foot { margin-top: clamp(96px, 12vw, 160px); background: var(--ink); color: #b5b2ab; font-size: 14.5px; } .foot a { color: #b5b2ab; text-decoration: none; } .foot a:hover { color: #fff; } .foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 72px 56px; } .foot__title { color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 14px; } .foot ul { list-style: none; display: grid; gap: 4px; } .foot ul a { display: inline-flex; min-height: 32px; align-items: center; } .foot address { line-height: 1.8; } .foot__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px 36px; border-top: 1px solid #262522; font-size: 13.5px; } .foot__bottom p { margin: 0; } .foot__bottom .lang { margin-left: auto; } /* Langues et signature ensemble, à droite. */ /* L'emblème déborde la ligne sans la grandir (marges négatives) ; le lien garde 24 px de haut à cliquer. */ .sig { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; margin: -6px 0; white-space: nowrap; } .foot .sig:focus-visible { color: #fff; } .sig__emb { display: block; flex: none; width: 18px; height: 24px; margin: -6px 0; overflow: visible; } .sig__f { transform-box: fill-box; transform-origin: center; } /* Barre Google Traduction : masquée, le sélecteur du site suffit. */ .skiptranslate iframe, iframe.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } body { top: 0 !important; } font[style] { background: none !important; box-shadow: none !important; } /* 5. Accueil ------------------------------------------------------------------------------ */ /* Hero : le texte et un seul bouton à gauche, une vraie photo à droite, aussi haute que la colonne de gauche (la ligne des points forts s'aligne sur le bas de la photo). */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); grid-template-rows: auto 1fr; grid-template-areas: "intro photo" "trust photo"; column-gap: clamp(40px, 5.5vw, 88px); padding-top: clamp(24px, 3vw, 44px); } .hero__intro { grid-area: intro; display: flex; flex-direction: column; gap: 18px; } .hero__eyebrow { margin-top: -.3em; } /* Le haut des lettres, et non la boîte de ligne, s'aligne sur le haut de la photo. */ .hero__eyebrow { margin-bottom: 0; font-size: 14.5px; color: var(--muted); } .hero__title { font-family: var(--serif); font-weight: 500; font-synthesis: none; font-size: clamp(42px, 5vw, 74px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; } .hero__text { max-width: 31em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty; } .hero__photo { grid-area: photo; position: relative; margin: 0; min-height: 440px; border-radius: var(--r); overflow: hidden; background: var(--paper); } /* Multiplié sur le fond papier : le blanc du studio devient papier, la photo a un vrai bord. */ .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; mix-blend-mode: multiply; transform: scale(1.01); } /* 1 % : masque un filet noir présent sur le bord de certaines photos. */ .hero__cta { align-self: flex-start; margin-top: clamp(10px, 1.4vw, 20px); } .hero__trust { grid-area: trust; align-self: end; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; padding-top: 28px; font-size: 14px; color: var(--muted); } .hero--no-photo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "trust"; } .diops.is-attn .diop__box { border-color: var(--red-ink); box-shadow: 0 0 0 3px rgba(196, 26, 18, .12); } /* Gammes : une rangée de cinq, la photo sur un fond papier ; en liste sur mobile. */ .ranges { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); } .range { display: flex; flex-direction: column; gap: 14px; height: 100%; text-decoration: none; color: var(--ink); } .range__img { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r); background: var(--paper); overflow: hidden; } .range__img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 9%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease-out); } .range:hover .range__img img { transform: scale(1.04); } .range__text { display: flex; flex-direction: column; gap: 3px; } .range__name { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 25px); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; text-underline-offset: 4px; text-decoration-thickness: 1px; } .range:hover .range__name { text-decoration: underline; } .range__meta { font-size: 14px; color: var(--muted); line-height: 1.4; } /* Rail des modèles : défilement horizontal aimanté, aligné sur la grille. */ .rail-section { overflow: hidden; } .rail__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .rail__nav { display: flex; align-items: center; gap: 10px; } .rail__nav .link-arrow { margin-right: 10px; } .rail { --pad: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(258px, 24vw, 320px); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px var(--pad) 24px; scroll-padding-inline: var(--pad); scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > .card { scroll-snap-align: start; } .rail:focus-visible { outline-offset: -4px; border-radius: var(--r); } /* L'idée CliC : une photo, le principe en une phrase, trois atouts séparés par des filets. */ .story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .story--no-photo { grid-template-columns: minmax(0, 760px); } .story__photo { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--paper); } .story__photo img { width: 100%; height: 100%; object-fit: cover; } .story__label { margin: 0 0 14px; font-size: 14.5px; font-weight: 500; color: var(--muted); line-height: 1.4; } .story__text { margin: 0 0 32px; font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.3vw, 33px); line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; } .steps { list-style: none; } .steps li { padding: 18px 0; border-top: 1px solid var(--line); } .steps__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 4px; } .steps p { margin: 0; color: var(--muted); } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .duo .panel { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 400px; } .duo .panel .h3 { margin-top: 12px; } .panel--dark .h3 { color: #fff; } .read-sample { display: flex; flex-direction: column; gap: 10px; font-family: Georgia, "Times New Roman", serif; color: #ebe8e2; } .read-sample span { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid #2a2926; padding-bottom: 10px; } .read-sample span:last-child { border: 0; } .read-sample small { font-family: var(--font); font-size: 12.5px; color: #a29f98; font-variant-numeric: tabular-nums; } .panel .btn { align-self: flex-start; } .panel__contact { display: grid; gap: 12px; font-size: 17px; margin: 0; } .panel__contact span { display: flex; align-items: center; gap: 12px; min-height: 44px; } .panel__contact .icon { color: var(--ink-2); } .panel__contact a { text-decoration: none; font-weight: 500; } .pro-teaser { background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .pro-teaser__main { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .pro-teaser .h2 { color: #fff; font-size: clamp(30px, 3.2vw, 44px); } .pro-teaser__actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 10px; } .pro-teaser__list { list-style: none; } .pro-teaser__list li { padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .14); } .pro-teaser__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); } .pro-teaser__list strong { font-weight: 600; font-size: 16px; } .pro-teaser__list p { margin: 4px 0 0; color: #b5b2ab; font-size: 14.5px; line-height: 1.5; } /* 6. Cartes et catalogue ------------------------------------------------------------------ */ .card { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .card__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; } .card__media img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--ease), opacity .3s ease; } .card:hover .card__media img { transform: scale(1.04); } .card__media img.is-swapping { opacity: 0; } .card__tag { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 600; } .card.is-out .card__media img { opacity: .4; } .card__body { flex: 1; display: flex; flex-direction: column; gap: 6px; } .card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .card__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .card__title a { text-decoration: none; } .card__title a:hover { text-decoration: underline; } .card__price { font-size: 15.5px; font-weight: 500; font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; } .card__meta { font-size: 14px; color: var(--muted); margin: 0; } .card__count { color: var(--muted); } .card .swatches { margin: 2px 0 0 -5.5px; } /* Le rond visible s'aligne sur le texte, pas son anneau. */ .card .swatches:not(.is-fit) { max-height: 32px; overflow: hidden; } /* Une ligne dès l'affichage : site.js n'aura rien à décaler. */ .swatch--more { background: var(--raise); background-clip: content-box; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink-2); cursor: pointer; } .swatch--more:hover { color: var(--ink); } .card__body > .stock { margin-top: auto; } /* Stock et bouton alignés d'une carte à l'autre, même si les pastilles passent sur deux lignes. */ .card__buy, .card__body > .btn { margin-top: 8px; } .card .btn--line { min-height: 44px; font-size: 14.5px; } .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 14px; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .catalog { padding-top: clamp(28px, 4vw, 48px); } .catalog__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; } .catalog__desc { color: var(--muted); max-width: 60ch; margin-top: 12px; } .catalog__count { color: var(--muted); font-size: 14.5px; margin: 0; } .catalog__hint { color: var(--muted); font-size: 14px; margin-top: 36px; } .catalog__tip { margin: -12px 0 32px; font-size: 14.5px; color: var(--muted); } .filters { position: sticky; top: var(--head); z-index: 10; background: #fff; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 36px; border-bottom: 1px solid var(--line); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 48px 22px; } .cards--3 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } /* 7. Fiche produit ------------------------------------------------------------------------ */ .product { padding-top: 24px; } .product__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .product__media { position: sticky; top: calc(var(--head) + 20px); display: flex; flex-direction: column; gap: 12px; min-width: 0; } .product__figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-xl); display: grid; place-items: center; overflow: hidden; } .product__figure img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .3s ease, transform .6s var(--ease); } .product__figure img.is-swapping { opacity: 0; transform: scale(.97); } .product__chip { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; } .product__chip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tint); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); } .thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 76px; gap: 8px; overflow-x: auto; padding: 3px 3px 6px; margin-inline: -3px; scrollbar-width: thin; } /* Marge pour le focus, alignée sur la photo. */ .thumb { display: grid; place-items: center; width: 76px; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; transition: border-color .2s ease; } .thumb img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; } .thumb:hover { border-color: var(--line-2); } .thumb[aria-pressed=true] { border-color: var(--ink); } .product__info { display: flex; flex-direction: column; gap: 22px; max-width: 560px; min-width: 0; } .product__info .eyebrow { margin-top: 4px; } .product__title { margin-top: -12px; } .product__price { display: flex; align-items: baseline; gap: 10px; margin: -8px 0 0; font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; } .product__price small { font-size: 13.5px; color: var(--muted); font-weight: 400; } .product__lead { color: var(--ink-2); margin: 0; text-wrap: pretty; } .buy { display: flex; flex-direction: column; gap: 24px; } /* Légende flottante : elle devient un élément de grille comme les autres (alignée avec le lien d'aide). */ .opt { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; } .opt__legend { float: left; padding: 0; font-size: 15px; color: var(--muted); } .opt__legend strong { color: var(--ink); font-weight: 600; } .opt__help { justify-self: end; font-size: 14px; display: inline-flex; align-items: center; min-height: 32px; } .opt > .swatches, .opt > .diops { grid-column: 1 / -1; } .swatches--lg { gap: 4px; margin-left: -7px; } /* Rond visible aligné sur la légende. */ .swatch-opt { position: relative; cursor: pointer; } .swatch-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .swatch-opt__ring { display: block; width: 48px; height: 48px; padding: 5px; border-radius: 50%; border: 2px solid transparent; transition: border-color .2s ease, transform .25s var(--ease); } .swatch-opt:hover .swatch-opt__ring { transform: scale(1.06); border-color: var(--line-2); } .swatch-opt input:checked + .swatch-opt__ring { border-color: var(--ink); } .swatch-opt input:focus-visible + .swatch-opt__ring { outline: 2px solid var(--focus); outline-offset: 2px; } .diops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .diop { position: relative; } .diop input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; } .diop__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: #fff; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .diop__label { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .diop__stock { font-size: 12px; color: var(--ok); font-weight: 500; } .diop:hover .diop__box { border-color: var(--ink); } .diop.is-out .diop__box { background: var(--raise); color: var(--muted); border-color: var(--line); } .diop.is-out .diop__label { text-decoration: line-through; } .diop.is-out .diop__stock { color: var(--bad); } .diop input:checked + .diop__box { background: var(--ink); border-color: var(--ink); color: #fff; } .diop input:checked + .diop__box .diop__stock { color: #cbc8c1; } .diop input:focus-visible + .diop__box { outline: 2px solid var(--focus); outline-offset: 2px; } .avail { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px 38px; border-radius: var(--r-sm); background: var(--raise); font-size: 14.5px; position: relative; } .avail::before { content: ""; position: absolute; left: 18px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .avail p { margin: 0; } .avail.is-in { background: var(--ok-bg); } .avail.is-in::before { background: var(--ok); } .avail.is-low, .avail.is-backorder { background: var(--warn-bg); } .avail.is-low::before, .avail.is-backorder::before { background: var(--warn); } .avail.is-out { background: var(--bad-bg); } .avail.is-out::before { background: var(--bad); } .avail__alts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); } .alt { min-height: 36px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--line-2); background: #fff; font-size: 13.5px; font-weight: 500; } .alt:hover { border-color: var(--ink); } .buy__row { display: flex; gap: 10px; } .buy__btn { flex: 1; } .assure { list-style: none; display: grid; gap: 12px; padding: 18px 0; border-block: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); } .assure li { display: flex; align-items: center; gap: 12px; } .assure .icon { color: var(--ink); } .assure a { font-weight: 500; text-decoration: none; } .accordion { border-top: 1px solid var(--line); } .assure + .accordion { border-top: 0; } .accordion details { border-bottom: 1px solid var(--line); } .accordion summary { display: flex; justify-content: space-between; align-items: center; min-height: 60px; font-size: 15.5px; font-weight: 500; } .accordion summary::after { content: "+"; font-size: 22px; font-weight: 300; transition: transform .3s var(--ease); } .accordion details[open] summary::after { transform: rotate(45deg); } .accordion .prose { padding-bottom: 20px; } .related .h2 { margin-bottom: 32px; } .buybar { display: none; } /* 8. Panier ------------------------------------------------------------------------------- */ .drawer { position: fixed; inset: 0; z-index: 100; } .drawer__scrim { position: absolute; inset: 0; background: rgba(18, 18, 17, .45); opacity: 0; transition: opacity .3s ease; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: #fff; display: flex; flex-direction: column; box-shadow: -30px 0 80px -30px rgba(18, 18, 17, .35); transform: translateX(100%); transition: transform .45s var(--ease); } .drawer.is-open .drawer__scrim { opacity: 1; } .drawer.is-open .drawer__panel { transform: none; } .drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 14px 28px; border-bottom: 1px solid var(--line); } .drawer__title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .drawer__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .drawer__body[aria-busy=true]::before, .cart-page[aria-busy=true]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, var(--ink), transparent) 0 0 / 40% 100% no-repeat; animation: busy 1s linear infinite; } @keyframes busy { from { background-position: -40% 0; } to { background-position: 140% 0; } } [aria-busy=true] .cart-list { opacity: .6; transition: opacity .2s ease; } .cart-empty { padding: 64px 28px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 18px; } .cart-list { flex: 1; overflow: auto; padding: 4px 28px; overscroll-behavior: contain; } .cart-items { list-style: none; } .cart-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); transition: opacity .25s ease, transform .3s var(--ease); } .cart-item.is-leaving { opacity: .3; transform: translateX(16px); } .cart-item__media { width: 88px; height: 88px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; overflow: hidden; } .cart-item__media img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; } .cart-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .cart-item__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .cart-item__name { margin: 0; font-size: 15.5px; font-weight: 600; } .cart-item__name a { text-decoration: none; } .cart-item__price { margin: 0; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .cart-item__variant { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13.5px; color: var(--ink-2); } .cart-item__color { display: inline-flex; align-items: center; gap: 6px; } .cart-item__diop { padding: 2px 9px; border-radius: var(--pill); background: var(--raise); font-weight: 500; font-variant-numeric: tabular-nums; } .cart-item__remove { display: inline-flex; align-items: center; min-height: 40px; font-size: 13.5px; color: var(--muted); } .cart-foot { padding: 20px 28px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 12px; } .cart-foot__total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 600; } .cart-foot__total strong { font-weight: 600; font-variant-numeric: tabular-nums; } .cart-foot__note { font-size: 13.5px; color: var(--muted); margin: -6px 0 4px; } .cart-foot__continue { align-self: center; min-height: 40px; color: var(--muted); font-size: 14px; } .ship-progress { padding: 12px 14px; border-radius: var(--r-sm); background: var(--raise); } .ship-progress p { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 0 0 10px; } .ship-progress.is-done { background: var(--ok-bg); color: var(--ok); } .ship-progress__bar { display: block; height: 6px; border-radius: 6px; background: #e6e3dd; position: relative; overflow: hidden; } .ship-progress__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--ink); border-radius: inherit; transition: width .6s var(--ease); } .ship-progress.is-done .ship-progress__bar::after { background: var(--ok); } .cart-page { position: relative; max-width: 760px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .cart-page .cart-list { padding: 8px 28px; } .cart-page .cart-foot__continue { display: none; } /* 9. Commande ----------------------------------------------------------------------------- */ .pg--checkout .pg__head { padding-top: 4px; } .pg--checkout .pg__head .h1 { font-size: clamp(30px, 3.4vw, 42px); } .co { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: clamp(24px, 4.5vw, 56px); align-items: start; } .co__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .co__step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); } .co__title { display: flex; align-items: center; gap: 12px; font-size: 21px; margin-bottom: 6px; letter-spacing: -.015em; } .co__title span { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; } .co__hint { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; } .co__summary { position: sticky; top: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-1); } .co__summary-title { font-size: 17px; margin-bottom: 14px; } .co__edit { display: inline-flex; align-items: center; min-height: 40px; margin-top: 10px; font-size: 14px; color: var(--muted); } .woocommerce-billing-fields > h3, .woocommerce-additional-fields > h3 { display: none; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .form-row { margin: 0; grid-column: 1 / -1; } .form-row-first, .form-row-last { grid-column: span 1; } .form-row.is-hidden { display: none !important; } /* Le script d'adresses de WooCommerce force display:block en ligne. */ .form-row label .optional { color: var(--muted); font-size: 13px; font-weight: 400; } .form-row.woocommerce-invalid .input-text, .form-row.woocommerce-invalid select { border-color: var(--bad); } .form-row .woocommerce-input-wrapper { display: block; } .form-row strong { display: inline-block; padding: 6px 0; font-weight: 500; } #ship-to-different-address { margin: 24px 0 10px; font-size: 15px; font-weight: 400; } #ship-to-different-address label, .woocommerce-form__label-for-checkbox, .form-row .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; color: var(--ink); } input[type=checkbox], input[type=radio] { accent-color: var(--ink); width: 20px; height: 20px; flex: none; margin: 0; } .woocommerce-additional-fields { margin-top: 18px; } #payment { background: none; } #payment .payment_methods { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } #payment .payment_methods > li { border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 16px 18px; transition: border-color .2s ease, background-color .2s ease; } #payment .payment_methods > li:has(input:checked) { border-color: var(--ink); background: #faf9f7; } #payment .payment_methods > li > label { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-size: 15.5px; font-weight: 500; cursor: pointer; } #payment .payment_methods > li > input { margin: 0 10px 0 0; vertical-align: middle; } #payment .payment_methods li img { display: inline-block; max-height: 22px; width: auto; vertical-align: middle; margin-left: 6px; } #payment .payment_box { margin-top: 10px; font-size: 14px; color: var(--muted); } #payment .payment_box p { margin: 0 0 .5em; } #payment .woocommerce-terms-and-conditions-wrapper { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; } #payment .place-order { margin: 0; display: flex; flex-direction: column; gap: 14px; } #place_order { width: 100%; min-height: 60px; font-size: 16.5px; } .woocommerce-privacy-policy-text { font-size: 13px; color: var(--muted); } .woocommerce-form-login-toggle .woocommerce-info, .woocommerce-form-coupon-toggle .woocommerce-info { justify-content: flex-start; } .checkout_coupon, .woocommerce-form-login { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 20px; } .summary { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; } .summary td, .summary th { padding: 10px 0; vertical-align: middle; text-align: left; font-weight: 400; } .summary .product-total, .summary tfoot td { text-align: right; white-space: nowrap; } .summary tbody tr + tr td { border-top: 1px solid var(--line); } .summary__item { display: flex; align-items: center; gap: 14px; } .summary__media { position: relative; width: 62px; height: 62px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; } .summary__media img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; } .summary__qty { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600; display: grid; place-items: center; } .summary__name { display: block; font-weight: 500; } .summary__variant { display: block; font-size: 13px; color: var(--muted); } .summary tfoot tr:first-child th, .summary tfoot tr:first-child td { border-top: 1px solid var(--line); padding-top: 16px; } .summary tfoot th, .summary tfoot td { color: var(--muted); padding: 5px 0; } .summary .order-total th, .summary .order-total td { color: var(--ink); font-size: 19px; font-weight: 600; padding-top: 12px; } .summary .order-total td strong { font-weight: 600; } .summary .includes_tax, .summary small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; } #shipping_method { list-style: none; display: grid; gap: 6px; justify-items: end; } #shipping_method li { display: flex; align-items: center; gap: 8px; } .woocommerce-shipping-totals td { text-align: right; } .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; border-radius: var(--r-lg); } .thanks { max-width: 780px; padding-top: 24px; } .thanks__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; } .thanks__head p { color: var(--ink-2); margin: 0; } .thanks__check { width: 60px; height: 60px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; } .thanks__note { background: var(--raise); padding: 12px 16px; border-radius: var(--r-sm); } .thanks__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; } .woocommerce-order-details, .woocommerce-customer-details { margin-top: 32px; } .woocommerce-order-details__title, .woocommerce-column__title { font-size: 18px; margin-bottom: 14px; } /* Détail : articles comme au récapitulatif de commande (vignette teintée, « Vert · +2.0 »), puis les totaux alignés à droite, le total en évidence (order/order-details*.php). */ .woocommerce-table--order-details { border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 13px 20px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; } .woocommerce-table--order-details thead th { padding-block: 11px; font-size: 13px; font-weight: 500; color: var(--muted); } .woocommerce-table--order-details .product-total { text-align: right; white-space: nowrap; } .woocommerce-table--order-details tbody td { padding-block: 14px; } .woocommerce-table--order-details tbody tr:last-child td { border-bottom-color: var(--line-2); } .woocommerce-table--order-details tfoot th, .woocommerce-table--order-details tfoot td { padding-block: 5px; border-bottom: 0; color: var(--muted); } .woocommerce-table--order-details tfoot td { text-align: right; color: var(--ink-2); } .woocommerce-table--order-details tfoot tr:first-child > * { padding-top: 16px; } .woocommerce-table--order-details tfoot tr:last-child > * { padding-bottom: 16px; } .woocommerce-table--order-details .order-totals__order_total > * { padding-block: 10px; font-size: 17px; font-weight: 600; color: var(--ink); } .woocommerce-table--order-details .order-totals__payment_method > * { border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; } .order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; } .woocommerce-table--order-details .wc-item-meta { list-style: none; font-size: 13px; color: var(--muted); } .woocommerce-table--order-details .wc-item-meta p { display: inline; } .woocommerce-customer-details address { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; line-height: 1.75; } .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .wc-bacs-bank-details-heading, .woocommerce-bacs-bank-details h2 { font-size: 18px; margin: 24px 0 12px; } .wc-bacs-bank-details { list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 6px; } /* 10. Compte client ----------------------------------------------------------------------- */ /* Menu à gauche, collant ; à droite, le titre de la page puis son contenu (myaccount/my-account.php). La colonne de contenu est un conteneur : lignes de commande, cartes et formulaires suivent SA largeur. */ .pg--account .shop-content > .woocommerce { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 80px); align-items: start; padding-bottom: 16px; } .woocommerce-MyAccount-content { min-width: 0; container-type: inline-size; } .acct-nav { position: sticky; top: calc(var(--head) + 24px); display: grid; gap: 16px; } .acct-nav__who { display: grid; gap: 2px; margin: 0; padding: 4px 14px 18px; border-bottom: 1px solid var(--line); line-height: 1.35; overflow-wrap: anywhere; } .acct-nav__name { font-weight: 600; } .acct-nav__mail { font-size: 14px; color: var(--muted); } .acct-nav__list { list-style: none; display: grid; gap: 2px; } .acct-nav__list a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: var(--r-btn); text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: background-color .15s ease, color .15s ease; } .acct-nav__list .icon { flex: none; color: var(--soft-ink); transition: color .15s ease; } .acct-nav__list a:hover { background: #f8f7f4; color: var(--ink); } .acct-nav__list a:hover .icon { color: var(--ink-2); } .acct-nav__list a[aria-current] { background: var(--raise); color: var(--ink); font-weight: 600; } .acct-nav__list a[aria-current] .icon { color: var(--ink); } .acct-nav__logout { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .acct-nav__logout a { color: var(--muted); } .acct__head { display: grid; justify-items: start; gap: 10px; margin-bottom: 36px; } .acct__head .h1 { font-size: clamp(32px, 3.6vw, 46px); } .acct__back { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14.5px; font-weight: 500; color: var(--muted); text-decoration: none; } .acct__back:hover { color: var(--ink); } .acct-intro, .order-view__meta { margin: -20px 0 32px; color: var(--ink-2); } /* Blocs du tableau de bord : un titre en serif, un lien « tout voir » à droite. */ .acct-block + .acct-block { margin-top: 48px; } .acct-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; } .acct-block__title { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; } .acct-block__more { font-size: 14.5px; font-weight: 500; text-underline-offset: 4px; } .acct-block__more:hover { text-decoration-thickness: 2px; } /* Commandes : toute la ligne mène au détail (lien étiré) ; les vignettes portent la teinte de chaque couleur. */ .order-list { list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; } .order-row { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr) 132px 112px 20px; align-items: center; gap: 12px 24px; padding: 16px 20px; transition: background-color .15s ease; } .order-row + .order-row { border-top: 1px solid var(--line); } .order-row:hover { background: #faf9f7; } .order-row__media { display: flex; gap: 6px; } .order-row__thumb { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); } .order-row__thumb img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; } .order-row__more { background: var(--raise); font-size: 13.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .order-row__title { font-size: 16px; font-weight: 600; line-height: 1.3; } .order-row__link { text-decoration: none; } .order-row__link::after { content: ""; position: absolute; inset: 0; } .order-row__link:focus-visible { outline: none; } .order-row__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: var(--r); } .order-row__meta { margin: 3px 0 0; font-size: 14px; color: var(--muted); } .order-row__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .order-row__total { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .order-row > .icon { color: var(--soft-ink); transition: color .15s ease, translate .15s ease; } .order-row:hover > .icon { color: var(--ink); } .acct-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; } .acct-pager .btn:only-child:last-child { margin-left: auto; } /* Aucune commande : un emplacement vide qui dit quoi faire. */ .acct-empty { display: grid; justify-items: start; gap: 6px; padding: clamp(24px, 3vw, 36px); border: 1px dashed var(--line-2); border-radius: var(--r); } .acct-empty p { margin: 0; color: var(--muted); } .acct-empty .acct-empty__title { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--ink); } .acct-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } /* Cartes : adresse, identifiants. */ .acct-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .acct-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; } .acct-card__title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 16px; font-weight: 600; line-height: 1.3; } .acct-card__title .icon { flex: none; color: var(--muted); } .acct-card__note { margin: 0; font-size: 14px; color: var(--muted); } .acct-card__body { flex: 1 0 auto; margin: 4px 0 8px; font-style: normal; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; } .acct-card__body.is-empty { color: var(--muted); } .acct-card__list { display: grid; align-content: start; gap: 10px; } .acct-card__list dt { font-size: 13px; color: var(--muted); line-height: 1.4; } .acct-card__list dd { margin: 0; color: var(--ink); } .acct-card__list dd > [aria-hidden] { letter-spacing: .12em; } .acct-card__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-size: 14.5px; font-weight: 500; text-underline-offset: 4px; } .acct-card__link:hover { text-decoration-thickness: 2px; } .acct-card .btn { margin-top: auto; } .acct-help { display: flex; align-items: flex-start; gap: 16px; margin-top: 48px; padding: 20px 24px; border-radius: var(--r); background: var(--paper); } .acct-help .icon { flex: none; margin-top: 1px; color: var(--ink-2); } .acct-help p { margin: 0; color: var(--ink-2); } .acct-help strong { display: block; font-weight: 600; color: var(--ink); } .acct-help a { color: var(--ink); font-weight: 500; white-space: nowrap; } .acct-pro { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-bottom: 40px; padding: 24px 28px; border-radius: var(--r-lg); background: var(--ink); color: #fff; } .acct-pro__title { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; } .acct-pro p { margin: 4px 0 0; color: #c9c6bf; } /* Formulaires : chaque partie a son titre et son explication à gauche, les champs à droite. */ .acct-form { max-width: 820px; } .acct-form .woocommerce-address-fields { display: block; max-width: 640px; } .acct-section { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 48px; min-width: 0; margin: 0; padding: 28px 0; border: 0; border-top: 1px solid var(--line); } .acct-section:first-of-type { padding-top: 0; border-top: 0; } .acct-section__title { float: left; grid-column: 1; padding: 0; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; } /* Légende flottante : elle devient une case de la grille. */ .acct-section__hint { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); } .acct-section__fields { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .acct-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); } .acct-form .woocommerce-address-fields .acct-form__actions { margin-top: 28px; } /* Détail d'une commande : date et statut sous le titre, suivi en frise, puis le détail de WooCommerce. */ .order-view__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; } .order-view__updates { margin-bottom: 40px; } .updates { list-style: none; margin: 16px 0 0 5px; border-left: 2px solid var(--line); } .updates__item { position: relative; padding: 0 0 20px 22px; } .updates__item:last-child { padding-bottom: 0; } .updates__item::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ink-2); } .updates__date { font-size: 13.5px; color: var(--muted); } .updates__text p { margin: 2px 0 0; } .pg--account .woocommerce-order-details:first-child, .pg--account .woocommerce-order-details { margin-top: 0; } .pg--account .woocommerce-order-details__title, .pg--account .woocommerce-column__title { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -.01em; } .pg--account .woocommerce-customer-details { margin-top: 40px; } .pg--account .woocommerce-customer-details > address { max-width: 420px; } .pg--account .order-again { margin: 20px 0 0; } /* Largeur de la colonne de contenu (tablette, menu affiché) : lignes et cartes passent en compact. */ @container (max-width: 760px) { .order-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "media icon" "main total" "main status"; gap: 4px 16px; padding: 16px; } .order-row__media { grid-area: media; margin-bottom: 10px; } .order-row__main { grid-area: main; align-self: start; } .order-row__total { grid-area: total; } .order-row > .status { grid-area: status; justify-self: end; align-self: start; font-size: 13.5px; } .order-row > .icon { grid-area: icon; align-self: start; justify-self: end; } } @container (max-width: 640px) { .acct-cards { grid-template-columns: minmax(0, 1fr); } .acct-section { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .acct-section__title, .acct-section__hint, .acct-section__fields { grid-column: 1; grid-row: auto; } .acct-section__fields { margin-top: 14px; } } .woocommerce-form-login { max-width: 460px; } .woocommerce-form-login .form-row { display: block; } .woocommerce-form-login__submit { width: 100%; margin-top: 4px; } .woocommerce-LostPassword, .lost_password { font-size: 14.5px; margin: 0; } /* .lost_password : formulaire de connexion générique (Espace Pro, commande). */ /* Connexion et mot de passe perdu (page.php), Espace Pro : un titre, le formulaire dans une carte, l'aide à côté. */ .auth__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .auth__intro { margin: 0; font-size: 17px; color: var(--muted); } .auth__grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 400px); gap: 40px clamp(48px, 8vw, 120px); align-items: start; } .auth .woocommerce-form-login, .auth .woocommerce-ResetPassword, .pro-login .woocommerce-form-login, .pro-login__request .form-grid { display: grid; gap: 16px; max-width: none; margin: 0; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; } .auth .woocommerce-ResetPassword p { margin: 0; } .auth .woocommerce-ResetPassword > p:first-child { color: var(--ink-2); } .auth .woocommerce-ResetPassword .button { width: 100%; } .auth .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit), .pro-login .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: grid; gap: 12px; } .auth__back { margin: 20px 0 0; font-size: 14.5px; } .auth__back a { text-decoration: none; font-weight: 500; } .auth__back a:hover { text-decoration: underline; } .auth__side { display: grid; gap: 28px; padding-top: 4px; } .auth__note { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .auth__note p { margin: 0; color: var(--ink-2); } .auth__note .btn { margin-top: 6px; } .auth__note a:not(.btn) { font-weight: 500; } .auth__title { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; } .auth__help { margin: 0; font-size: 14.5px; color: var(--muted); } .auth__help a { color: var(--ink); font-weight: 500; text-decoration: none; } /* Afficher le mot de passe : le bouton « œil » que WooCommerce ajoute au champ (woocommerce.js). */ .password-input { position: relative; display: block; } .password-input input { padding-right: 56px; } .show-password-input { --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); position: absolute; top: 50%; right: 4px; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); } .show-password-input.display-password { --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E"); } .show-password-input::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--eye) center / contain no-repeat; mask: var(--eye) center / contain no-repeat; } .show-password-input:hover { color: var(--ink); background: var(--raise); } .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .woocommerce-password-strength { font-size: 13px; margin-top: 6px; } /* 11. Espace Pro -------------------------------------------------------------------------- */ .pro-bar { border-bottom: 1px solid var(--line); } .pro-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; min-height: 68px; padding-block: 8px; } .pro-bar__who { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); font-weight: 500; } .tabs { display: flex; gap: 4px; flex-wrap: wrap; } .tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-btn); text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--ink-2); } .tab:hover { background: var(--raise); color: var(--ink); } .tab[aria-current] { background: var(--ink); color: #fff; } .tab--quiet { color: var(--muted); } .pro-bar--preview { background: var(--warn-bg); border-bottom-color: #efe2c4; } .pro-bar--preview .pro-bar__who { color: var(--warn); font-weight: 500; } .badge--light { background: #fff; color: var(--warn); box-shadow: inset 0 0 0 1px #e6d3a6; } .pro-login { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); padding-top: clamp(32px, 5vw, 64px); align-items: start; } .pro-login__main, .pro-login__head, .pro-login__signin, .pro-login__request { display: flex; flex-direction: column; gap: 18px; } .pro-login__main .prose { color: var(--muted); } .pro-login__help, .pro-login__switch { font-size: 14px; color: var(--muted); } .pro-login__lead { color: var(--muted); } .pro-login .woocommerce-form-login, .pro-login__request .form-grid { max-width: 560px; } /* Même carte, même largeur dans les deux vues : rien ne saute à la bascule. */ .pro-login .woocommerce-form-login .clear { display: none; } /* Restes des flottants de WooCommerce : dans la grille, ils doublaient l'espace. */ /* Un seul formulaire à la fois : la demande de compte remplace la connexion (#demande, ou forcée par parts/pro-login.php). */ .pro-login:not(:target, .is-request) .pro-login__request, .pro-login:is(:target, .is-request) :is(.pro-login__signin, .pro-login__join) { display: none; } .pro-login__join { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); } .pro-login__join p { margin: 0; color: #b5b2ab; font-size: 14.5px; } .pro-login__join strong { display: block; margin-bottom: 4px; color: #fff; font-size: 16px; font-weight: 600; } .pro-login__how { border-radius: var(--r-xl); padding: clamp(28px, 4vw, 40px); background: var(--ink); color: #fff; } .pro-login__how .eyebrow { color: #b5b2ab; } .how { list-style: none; display: flex; flex-direction: column; gap: 22px; margin-top: 22px; } .how li { display: flex; gap: 16px; } .how li > span { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); font-size: 13px; font-weight: 600; color: #fff; } .how strong { font-weight: 600; } .how p { margin: 4px 0 0; color: #b5b2ab; font-size: 14.5px; } .pro-order { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 28px; } .pro-order > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .pro-order__side { position: sticky; top: calc(var(--head) + 20px); display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - var(--head) - 120px); overflow: auto; padding-bottom: 12px; } .pro-models { display: flex; flex-direction: column; gap: 2px; } .pro-models a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); } .pro-models a:hover { background: var(--raise); } .pro-models__img { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--raise); display: grid; place-items: center; overflow: hidden; } .pro-models__img img { width: 90%; height: 90%; object-fit: contain; mix-blend-mode: multiply; } .pro-models__name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.25; } .pro-models__name small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; } .pro-models__count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--pill); background: var(--red-ink); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; } .pro-order__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .pro-model { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; scroll-margin-top: calc(var(--head) + 16px); } .pro-model__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; } .pro-model__prices { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); } .pro-model__prices strong { font-weight: 600; color: var(--ink); } .pro-matrix { display: grid; grid-template-columns: minmax(132px, 1.2fr) repeat(var(--cols), minmax(64px, 1fr)); gap: 6px; overflow-x: auto; } .pro-matrix__corner, .pro-matrix__col { font-size: 12.5px; color: var(--muted); align-self: end; padding-bottom: 2px; } .pro-matrix__col { text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 13.5px; font-weight: 600; } .pro-matrix__row { display: flex; align-items: center; gap: 9px; font-size: 14px; min-width: 0; } .pro-matrix__row .swatch__dot { width: 16px; height: 16px; flex: none; } .pro-matrix__stock { display: block; font-size: 11.5px; line-height: 1.3; font-weight: 500; color: var(--ok); } .pro-matrix__stock.is-low, .pro-matrix__stock.is-backorder { color: var(--warn); } .pro-matrix__stock.is-out { color: var(--bad); } .pro-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; transition: border-color .15s ease, background-color .15s ease; cursor: text; } .pro-cell:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(18, 18, 17, .1); } .pro-cell input { width: 100%; border: 0; background: transparent; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0; outline: none; } .pro-cell input::placeholder { color: #c6c3bc; font-weight: 400; } .pro-cell__stock { font-size: 11px; color: var(--ok); line-height: 1.2; font-weight: 500; } .pro-cell.is-low .pro-cell__stock { color: var(--warn); } .pro-cell.is-out { background: var(--raise); cursor: not-allowed; border-color: var(--line); } .pro-cell.is-out .pro-cell__stock { color: var(--bad); } .pro-cell.is-none { color: #c6c3bc; border-style: dashed; } .pro-cell.has-qty { background: var(--ok-bg); border-color: var(--ok); } .pro-order__tip { font-size: 14px; color: var(--muted); margin: 0; } .pro-total { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 14px 16px 14px 26px; box-shadow: var(--sh-2); } .pro-total__figures { display: flex; align-items: baseline; gap: 6px 26px; flex-wrap: wrap; margin: 0; font-variant-numeric: tabular-nums; } .pro-total__figures strong { font-weight: 600; font-size: 16.5px; } .pro-total__figures small { color: #b5b2ab; font-size: 13px; } .pro-total__actions { display: flex; gap: 10px; } .pro-total:not(.is-ready) .btn--light { opacity: .55; } .pro-history .h1 { margin-bottom: 28px; } /* 12. Test de lecture --------------------------------------------------------------------- */ .reading { max-width: 940px; padding-top: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; gap: 32px; } .reading__head { display: flex; flex-direction: column; gap: 14px; } .reading__head .prose { color: var(--muted); } .reading__lines { list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .reading__line { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 72px; padding: 20px 28px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: background-color .2s ease; } .reading__lines li:last-child .reading__line { border-bottom: 0; } .reading__line:hover { background: #faf9f7; } .reading__line[aria-current] { background: var(--ok-bg); } .reading__text { font-family: Georgia, "Times New Roman", serif; line-height: 1.4; } .reading__diop { font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); flex: none; padding: 4px 10px; border-radius: var(--pill); background: var(--raise); } .reading__result { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 32px 36px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .reading__result:focus { outline: none; } .reading__label { font-size: 14px; color: #b5b2ab; margin: 0; } .reading__value { font-weight: 600; letter-spacing: -.04em; font-size: 72px; line-height: 1; margin: 6px 0 8px; } /* 13. Revendeurs -------------------------------------------------------------------------- */ .dealers { padding-top: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; gap: 28px; } .dealers__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .dealers__head .prose { color: var(--muted); margin-top: 10px; } .dealers__head .search-pill { width: min(100%, 440px); } .dealers__grid { display: grid; grid-template-columns: minmax(300px, 1fr) 2fr; gap: 16px; align-items: start; } .dealers__grid.is-list-only { grid-template-columns: 1fr; } .dealers__grid.is-list-only .dealers__list ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .dealers__list { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); max-height: 640px; overflow: auto; position: relative; } /* position : les .sr-only (absolus) défilent dans la liste ; sans elle, ils allongeaient la page de 8 000 px sous le pied. */ .dealers__list ul { list-style: none; } .dealer { padding: 18px 22px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; transition: background-color .2s ease; } .dealer[data-dealer] { cursor: pointer; } .dealer[data-dealer]:hover { background: #faf9f7; } .dealer.is-active { border-left-color: var(--red); background: #faf9f7; } .dealer p { margin: 0; } .dealer__name { font-weight: 600; font-size: 16px; } .dealer__addr { font-size: 14px; color: var(--muted); margin-top: 3px !important; } .dealer__links { display: flex; flex-wrap: wrap; column-gap: 18px; font-size: 14px; margin-top: 2px !important; } .dealer__links a, .dealer__show { display: inline-flex; align-items: center; min-height: 44px; } .dealers__more { display: none; } .dealer__show { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; } .dealer__km { font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; } .dealers__context { margin: 0; padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); } .dealers__context strong { color: var(--ink); font-weight: 600; } /* Recherche sans résultat : un encadré en tête de liste, sur fond papier, puis tous les revendeurs (liste et carte). */ .dealers__notice { padding: 18px 22px 8px; border-bottom: 1px solid var(--line); background: var(--paper); font-size: 14.5px; color: var(--muted); } .dealers__notice p { margin: 0; } .dealers__notice-title { color: var(--ink); font-weight: 600; font-size: 16px; margin-bottom: 4px !important; } .dealers__suggest { display: flex; flex-wrap: wrap; column-gap: 20px; } .dealers__suggest a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; } .dealers__map { height: 640px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--raise); position: relative; isolation: isolate; } /* Calques de Leaflet (z-index 400 à 1000) sous l'en-tête collant ; position : l'image fixe se place dans la carte avant même le démarrage de Leaflet. */ .dealers__join { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 18px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; } .dealers__join p { margin: 0; color: var(--muted); font-size: 15px; } .dealers__join strong { color: var(--ink); font-weight: 600; } .dealers__map .leaflet-tile-pane { filter: grayscale(.85) contrast(1.05) brightness(1.03); } /* Image fixe de la carte pendant le chargement des tuiles (déjà en gris : capture de la vraie carte). */ .dealers__placeholder, .dealers__placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Point d'un magasin : 18 px visibles dans une zone à toucher de 36 px (.leaflet-marker-icon : leaflet.css, chargé après, impose display: block). */ .leaflet-marker-icon.map-pin { display: grid; place-items: center; } .map-pin span { width: 18px; height: 18px; background: var(--red); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } /* Lieu cherché (NPA, localité) : un anneau sombre, distinct des magasins. */ .leaflet-marker-icon.map-origin { display: grid; place-items: center; } .map-origin span { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 5px solid var(--ink); box-shadow: 0 0 0 6px rgba(18, 18, 17, .15); } /* Groupe de magasins proches : le nombre dans un rond de 38 px, zone à toucher de 44 px. */ .leaflet-marker-icon.map-cluster { display: grid; place-items: center; cursor: pointer; } .map-cluster span:first-child { display: grid; place-items: center; width: 38px; height: 38px; background: var(--ink); color: #fff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); font-size: 13.5px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .map-cluster:hover span:first-child { background: var(--red-ink); } .leaflet-popup-content-wrapper { border-radius: var(--r-sm); font-family: var(--font); } .dealers__map .leaflet-popup-content a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); font-weight: 500; } /* 14. Pages ------------------------------------------------------------------------------- */ .pg { padding-top: clamp(32px, 5vw, 64px); } .pg__head { margin-bottom: 32px; } .pg--shop .pg__head .h1 { font-size: clamp(32px, 4vw, 48px); } .pg__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .pg--404 { max-width: 760px; display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; } /* À propos. En tête, un bandeau papier (titre, chapeau, bouton) dont la photo déborde (--spill). Puis le texte de l'éditeur, découpé en chapitres par le gabarit : chacun sur un filet, le titre et sa photo à gauche (la photo reste visible pendant la lecture), le texte à droite. Enfin le distributeur, en sombre, au drapeau suisse. */ .about { --split: clamp(40px, 6vw, 96px); } .about__hero { --pad: clamp(48px, 6vw, 88px); --spill: clamp(48px, 7vw, 112px); background: var(--paper); padding-top: var(--pad); margin-bottom: calc(var(--spill) + clamp(40px, 5vw, 72px)); } .about__hero--text { padding-bottom: var(--pad); margin-bottom: clamp(56px, 7vw, 96px); } .about__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--split); align-items: center; } .about__hero--text .about__head { grid-template-columns: minmax(0, 760px); } .about__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: var(--pad); } .about__hero--text .about__intro { padding-bottom: 0; } .about__intro .h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: 1; letter-spacing: -.03em; } .about__lead { margin: 0; max-width: 24em; font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 2vw, 27px); line-height: 1.32; letter-spacing: -.01em; color: var(--ink-2); text-wrap: pretty; } .about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 8px; } .about__photo { margin: 0 0 calc(var(--spill) * -1); aspect-ratio: 8 / 7; border-radius: var(--r-lg); overflow: hidden; background: var(--raise); } .about__photo img { width: 100%; height: 100%; object-fit: cover; } .chap + .chap { margin-top: clamp(64px, 7vw, 104px); } .chap__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--split); padding-top: 28px; border-top: 1px solid var(--line-2); } .chap__side { grid-column: 1; } .chap__title { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; color: var(--ink); } .chap__photos { grid-column: 1; grid-row: 2; align-self: start; display: grid; gap: 16px; margin-top: 32px; position: sticky; top: calc(var(--head) + 24px); } .chap__photo { margin: 0; } .chap__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--raise); } .chap__text { grid-column: 2; grid-row: 1 / span 2; max-width: 36em; font-size: 17.5px; line-height: 1.75; } .about__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 64px; align-items: end; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-xl); background: var(--ink); color: #fff; } .about__label { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; font-weight: 500; color: #b5b2ab; } .about__flag { width: 18px; height: 18px; flex: none; border-radius: 3px; color: var(--red); } .about__card .h2 { color: #fff; margin-bottom: 18px; } .about__address { color: #d6d3cc; font-size: 17px; line-height: 1.6; } .about__reach { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .about__card .panel__contact .icon { color: #b5b2ab; } /* Raccourcis vers la suite du parcours (Contact, À propos) : des liens séparés par des filets. */ .contact__more-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; } .shortcuts { list-style: none; } .shortcuts li { border-top: 1px solid var(--line); } .shortcuts li:last-child { border-bottom: 1px solid var(--line); } .shortcuts a { position: relative; display: grid; gap: 2px; padding: 16px 36px 16px 0; text-decoration: none; } .shortcuts a::after { content: "→"; content: "→" / ""; /* Décorative : texte alternatif vide. */ position: absolute; right: 4px; top: 50%; translate: 0 -50%; color: var(--muted); } .shortcuts strong { font-size: 16px; font-weight: 600; } .shortcuts a:hover strong { text-decoration: underline; text-underline-offset: 3px; } .shortcuts span { font-size: 14.5px; color: var(--muted); } .shortcuts--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; } .shortcuts--row li { border-bottom: 1px solid var(--line); } /* Contact : les coordonnées en grand à gauche, le formulaire à droite, les raccourcis dessous. */ .contact__head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); } .contact__lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); } .contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "ways form" "more form"; gap: 48px clamp(40px, 6vw, 96px); align-items: start; } .contact__ways { grid-area: ways; } .contact__form { grid-area: form; } .contact__form:focus { outline: none; } .contact__more { grid-area: more; } .ways { list-style: none; display: grid; gap: 28px; } .ways__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; } .ways__item .icon { margin-top: 2px; color: var(--muted); } .ways__label { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--muted); } .ways__value { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; text-decoration: none; overflow-wrap: anywhere; } .ways__value:hover { text-decoration: underline; text-underline-offset: 5px; } .ways__address { font-size: 17px; line-height: 1.6; } .ways__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 500; } .contact__note { margin: 6px 0 24px; color: var(--muted); } .field__hint, .field__error { display: block; margin-top: 6px; font-size: 13.5px; } .field__hint { color: var(--muted); } .field__error { font-weight: 500; color: var(--bad); } .field.is-invalid input, .field.is-invalid textarea { border-color: var(--bad); } .notice-box.is-bad { background: var(--bad-bg); color: var(--bad); } /* 15. Mouvement ---------------------------------------------------------------------------- */ /* Seuls les changements provoqués par le visiteur s'animent (couleur, panier, ajout). */ @media (prefers-reduced-motion: no-preference) { .thanks__check { animation: pop .5s var(--ease) both; } @keyframes pop { from { transform: scale(.6); opacity: 0; } } /* Signature : chaque facette arrive de son côté, l'étoile se pose en tournant, puis l'éclat passe. */ .sig:is(:hover, :focus-visible) .sig__f--dessus { animation: sig-dessus .6s cubic-bezier(.2, .75, .2, 1) both; } .sig:is(:hover, :focus-visible) .sig__f--flanc { animation: sig-flanc .6s cubic-bezier(.2, .75, .2, 1) .08s both; } .sig:is(:hover, :focus-visible) .sig__f--v { animation: sig-v .6s cubic-bezier(.2, .75, .2, 1) .16s both; } .sig:is(:hover, :focus-visible) .sig__f--etoile { animation: sig-etoile .7s cubic-bezier(.34, 1.56, .64, 1) .42s both; } .sig:is(:hover, :focus-visible) .sig__eclat { animation: sig-eclat .75s ease-in-out .95s both; } @keyframes sig-dessus { from { opacity: 0; transform: translateY(-420px); } } @keyframes sig-flanc { from { opacity: 0; transform: translate(-400px, 230px); } } @keyframes sig-v { from { opacity: 0; transform: translate(380px, 360px); } } @keyframes sig-etoile { from { opacity: 0; transform: scale(.2) rotate(-135deg); } } @keyframes sig-eclat { to { transform: translateX(2100px); } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* 16. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1180px) { .head__account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Masqué à l'œil, lu par les lecteurs d'écran. */ .head__account { width: 44px; padding: 0; justify-content: center; } .nav__list a { padding: 0 13px; } .foot__grid { grid-template-columns: 1fr 1fr; } .pro-order { grid-template-columns: 1fr; } .pro-order__side { position: static; max-height: none; } .pro-models { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; } .pro-models a { flex: none; border: 1px solid var(--line); } .pro-models__name small { display: none; } } @media (max-width: 1100px) { /* Menu ☰ dès 1100 px : en dessous, le menu complet et le sélecteur de langue ne tiennent plus entre le logo et le panier. */ .menu-btn { display: grid; } /* Panneau sous l'en-tête, en position absolue (l'en-tête est collant). */ .nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--head)); z-index: 39; background: #fff; border-top: 1px solid var(--line); flex-direction: column; justify-content: flex-start; padding: 20px var(--gutter) 40px; gap: 28px; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .35s var(--ease), visibility 0s .35s; } .head.is-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s var(--ease); } .nav__list { flex-direction: column; gap: 0; padding: 0; background: none; border-radius: 0; } .nav__list a { min-height: 58px; padding: 0; font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); border-bottom: 1px solid var(--line); } .nav__list a:hover, .nav__list .current-menu-item > a, .nav__list .current-menu-ancestor > a, .nav__list .current-product_cat-ancestor > a { text-decoration: none; color: var(--red-ink); } .nav__extra { display: flex; flex-direction: column; gap: 6px; font-size: 17px; } .nav .lang--menu { display: none; } /* Dans le menu mobile : les boutons de .lang--nav. */ .nav__extra a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-weight: 500; } } @media (max-width: 960px) { :root { --head: 64px; } .topbar__text { display: none; } .topbar__inner { justify-content: flex-end; } .cart-btn__label { display: none; } .cart-btn { padding: 0 6px 0 12px; } .logo__img { height: 28px; } /* Hero en une colonne : le texte, la photo, puis l'achat rapide. */ .hero, .hero--no-photo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "photo" "trust"; } .hero__title { font-size: clamp(40px, 7vw, 64px); } .hero__photo { min-height: 0; aspect-ratio: 4 / 3; margin-top: 28px; } .hero__trust { padding-top: 20px; } .story { grid-template-columns: minmax(0, 1fr); } .duo, .pro-teaser, .pro-login { grid-template-columns: minmax(0, 1fr); } .duo .panel { min-height: 0; } .product__grid { grid-template-columns: 1fr; } .product__media { position: static; } .product__info { max-width: none; } .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(18, 18, 17, .3); transform: translateY(110%); transition: transform .35s var(--ease); visibility: hidden; } .buybar.is-on { transform: none; visibility: visible; } .buybar__info { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.3; } .buybar__info span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .buybar .btn { flex: none; } .co { grid-template-columns: 1fr; } .co__summary { position: static; order: -1; box-shadow: none; } /* Compte : le menu devient une rangée d'onglets qui défile, bord à bord, au-dessus du titre. */ .pg--account { padding-top: 0; } .pg--account .shop-content > .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 0; } .acct-nav { position: static; margin: 0 calc(var(--gutter) * -1) 28px; border-bottom: 1px solid var(--line); } .acct-nav__who { display: none; } .acct-nav__list { display: flex; gap: 0; overflow-x: auto; padding: 0 calc(var(--gutter) - 12px); scrollbar-width: none; } .acct-nav__list::-webkit-scrollbar { display: none; } .acct-nav__list li { flex: none; } .acct-nav__list a, .acct-nav__list a:hover, .acct-nav__list a[aria-current] { min-height: 52px; padding: 0 12px; border-radius: 0; background: none; font-size: 15px; } .acct-nav__list a[aria-current] { box-shadow: inset 0 -2px 0 var(--ink); } .acct-nav__list .icon { display: none; } .acct-nav__logout { margin: 0; padding: 0; border: 0; } .acct__head { margin-bottom: 28px; } .acct-intro, .order-view__meta { margin-top: -14px; } .woocommerce-columns--addresses, .u-columns.col2-set { grid-template-columns: 1fr; } .dealers__grid { grid-template-columns: 1fr; } .dealers__map { height: 380px; order: -1; } .dealers__list { max-height: none; } /* La liste suit la carte : 8 fiches, puis « Afficher les N autres » (dealers.js ajoute .is-collapsed ; sans JS, tout reste visible). */ .dealers__list.is-collapsed .dealer.is-more { display: none; } .dealers__list.is-collapsed .dealers__more { display: flex; margin: 16px 22px 20px; } .about__head, .about__card { grid-template-columns: minmax(0, 1fr); } .about__card { align-items: start; } /* À propos : une seule colonne. Chaque chapitre : filet, titre, photo, texte. */ .about__hero { --pad: 36px; --spill: 56px; margin-bottom: calc(var(--spill) + 40px); } .about__head { gap: 0; } .about__photo { aspect-ratio: 4 / 3; } .chap + .chap { margin-top: 56px; } .chap__grid { display: flex; flex-direction: column; padding-top: 22px; } .chap__title { font-size: clamp(26px, 6.4vw, 32px); } .chap__photos { position: static; margin-top: 20px; } .chap__text { max-width: none; margin-top: 18px; font-size: 17px; line-height: 1.7; } .shortcuts--row { grid-template-columns: minmax(0, 1fr); } .shortcuts--row li { border-bottom: 0; } .shortcuts--row li:last-child { border-bottom: 1px solid var(--line); } .contact__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ways" "form" "more"; } .auth__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { /* Espace Pro : onglets en 2 × 2, et chaque couleur au-dessus de ses cases (toutes les corrections visibles). */ .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; } .tab { justify-content: center; padding: 0 10px; border: 1px solid var(--line); } .tab[aria-current] { border-color: var(--ink); } .pro-model { padding: 18px 14px; } .pro-model__prices { gap: 2px 14px; font-size: 14px; } .pro-matrix { grid-template-columns: repeat(var(--cols), minmax(44px, 1fr)); gap: 5px; overflow: visible; } .pro-matrix__corner { display: none; } .pro-matrix__col { position: sticky; top: var(--head); z-index: 2; padding-block: 8px 6px; background: #fff; font-size: 13px; } .pro-matrix__row { grid-column: 1 / -1; margin-top: 8px; font-size: 13.5px; } .pro-matrix__stock { display: inline; margin-left: 6px; } .pro-cell { min-height: 54px; border-radius: 10px; } .pro-cell input { font-size: 16px; } /* 16 px : pas de zoom automatique sous iOS. */ .pro-cell__stock { font-size: 10px; } .pro-matrix--single { grid-template-columns: minmax(0, 1fr) 112px; } .pro-matrix--single .pro-matrix__row { grid-column: auto; margin: 0; } .pro-matrix--single .pro-matrix__col { display: none; } .head__inner { gap: 10px; } .logo__country { gap: 5px; padding-top: 3px; font-size: 10.5px; letter-spacing: .18em; } .logo__flag { width: 13px; height: 13px; } .hero__intro { gap: 14px; } .hero__photo { aspect-ratio: 5 / 4; margin-inline: calc(var(--gutter) * -1); border-radius: 0; } /* Photo bord à bord. */ .hero__trust { font-size: 13.5px; } .section__head { margin-bottom: 24px; } /* Tuiles en colonne : photo en haut, texte dessous, flèche en coin. Rien ne se chevauche. */ /* Gammes en liste : vignette, nom, chiffres, chevron. */ .ranges { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); } .ranges li { border-bottom: 1px solid var(--line); } .range { flex-direction: row; align-items: center; gap: 16px; padding: 12px 0; } .range__img { width: 88px; flex: none; border-radius: var(--r-sm); } .range__name { font-size: 22px; } .range::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 6px 0 auto; border: solid var(--ink-2); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); } .story__text { margin-bottom: 24px; } .rail { grid-auto-columns: 78%; gap: 14px; } .rail__nav .round-btn { display: none; } .rail__nav .link-arrow { margin-right: 0; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; } .cards--3 { grid-template-columns: 1fr; } .card__row { flex-direction: column; gap: 2px; } .card__title { font-size: 15.5px; } .card__meta { font-size: 13px; } .card__count { display: none; } .card__buy .btn { min-height: 44px; padding: 10px 12px; line-height: 1.2; font-size: 13.5px; } .filters { position: static; flex-direction: column; flex-wrap: nowrap; } /* Sans retour à la ligne : chaque rangée de filtres garde la largeur de l'écran et défile. */ .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; } .buy__row { flex-direction: column; } .buy__row .stepper { align-self: flex-start; } .thumbs { grid-auto-columns: 64px; } .thumb { width: 64px; } .form-grid, .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } .form-row-first, .form-row-last { grid-column: 1 / -1; } .foot__grid { grid-template-columns: 1fr; padding-block: 56px 40px; } .foot__bottom { flex-direction: column; align-items: flex-start; } .foot__bottom .lang { margin-left: 0; } .pro-teaser__actions .btn { flex: 1 1 100%; } .pro-model { padding: 18px 14px; } /* Barre du total compacte : pièces et montant sur une ligne, les boutons dessous. La mention de la facture reste sur la page de commande. */ .pro-total { bottom: calc(8px + env(safe-area-inset-bottom)); gap: 8px; padding: 10px; border-radius: var(--r); } .pro-total__figures { gap: 2px 14px; padding: 0 4px; } .pro-total__figures strong { font-size: 15.5px; } .pro-total__figures > span, .pro-total__figures small { display: none; } .pro-total__actions { width: 100%; gap: 8px; } .pro-total__actions .btn { min-height: 44px; } .pro-total__actions .btn--light { flex: 1; } .reading__line { padding: 18px; flex-direction: column; align-items: flex-start; gap: 8px; } .reading__value { font-size: 56px; } .table__actions { flex-direction: column; gap: 6px; align-items: flex-end; } .cart-list, .cart-foot { padding-inline: 20px; } .drawer__head { padding-left: 20px; } .toast { left: 12px; right: 12px; transform: translateY(140%); max-width: none; } .toast.is-on { transform: none; } } @media (max-width: 380px) { .cards { grid-template-columns: 1fr; } .diops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }