/* * Master SEO — main.css * Styles de la page d'accueil, header et footer. * Toutes les couleurs/typos passent par les variables de tokens.css * (--accent, --bg, --ink, --stone, --line, --muted, --accent-soft, * --font-heading, --font-body, --max) → habillage par niche possible. */ /* ---------- Reset léger ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg, video { max-width: 100%; display: block; } ul { list-style: none; } /* ---------- Accessibilité ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; margin: 0; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 2px; } /* ---------- Conteneur & utilitaires ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; } .eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .serif { font-family: var(--font-heading); } h1, h2, h3, h4 { font-family: var(--font-heading); } .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 2px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); transition: .2s; cursor: pointer; } .btn:hover { background: transparent; color: var(--ink); } .btn.ghost { background: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--bg); } /* ---------- Barre d'annonce ---------- */ .announce { background: var(--ink); color: var(--bg); font-size: 13px; letter-spacing: .02em; text-align: center; padding: 9px 16px; } .announce span { opacity: .65; margin: 0 10px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .bar { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 16px; } .logo { font-family: var(--font-heading); font-size: 25px; font-weight: 600; letter-spacing: -.01em; line-height: 1.12; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; } .logo small { font-family: var(--font-body); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); display: block; line-height: 1.2; font-weight: 600; text-indent: 2px; } nav.main .menu { display: flex; gap: 30px; font-size: 15px; font-weight: 500; } nav.main a { position: relative; padding: 4px 0; display: inline-block; } nav.main a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--accent); transition: .25s; } nav.main a:hover::after { width: 100%; } /* ---- Dropdown desktop des sous-menus (ex. « Par Couleurs », chemin-de-lit) ---- Scopé .menu-item-has-children : zéro effet sur les menus plats des autres sites. Mobile ≤900px : accordéon/empilement existant INCHANGÉ (tout est sous min-width:901px). Révélation au survol ET :focus-within (clavier/a11y). */ @media (min-width: 901px) { nav.main .menu > li.menu-item-has-children { position: relative; padding-right: 15px; } nav.main .menu > li.menu-item-has-children::after { content: "▾"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); pointer-events: none; transition: transform .18s ease, color .18s ease; } nav.main .menu > li.menu-item-has-children:hover::after, nav.main .menu > li.menu-item-has-children:focus-within::after { transform: translateY(-50%) rotate(180deg); color: var(--accent); } nav.main li.menu-item-has-children > .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .10); border-radius: 4px; padding: 8px 0; margin: 0; display: block; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; z-index: 50; } /* Pont invisible : évite la fermeture en traversant l'interstice top:100%. */ nav.main li.menu-item-has-children > .sub-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } nav.main li.menu-item-has-children:hover > .sub-menu, nav.main li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } nav.main .sub-menu li { display: block; } nav.main .sub-menu a { display: block; padding: 9px 18px; white-space: nowrap; font-size: 14px; } nav.main .sub-menu a:hover { background: var(--stone); color: var(--accent); } nav.main .sub-menu a::after { content: none; } /* pas de soulignement animé dans le panneau */ } .icons { display: flex; gap: 20px; color: var(--ink); align-items: center; } .icons a { position: relative; display: inline-flex; } .cart-dot { position: absolute; top: -4px; right: -7px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; font-family: var(--font-body); min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; display: grid; place-items: center; } /* Bouton menu mobile (burger) */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; cursor: pointer; } .nav-toggle-bar { width: 22px; height: 2px; background: var(--ink); transition: .25s; } .nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 560px; } .hero-text { display: flex; flex-direction: column; justify-content: center; padding: 70px 60px 70px 0; } .hero-text .eyebrow { margin-bottom: 22px; } .hero h1 { font-weight: 600; font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -.015em; margin-bottom: 24px; } .hero h1 em { font-style: italic; color: var(--accent); } .hero p.lead { font-size: 18px; color: var(--muted); max-width: 430px; margin-bottom: 36px; } .hero .cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .hero-img { background: radial-gradient(120% 90% at 70% 20%, #efd9b6 0%, #d8a86a 38%, #9b6b3c 78%, #6f4a2c 100%); position: relative; border-left: 1px solid var(--line); overflow: hidden; } .hero-img picture, .hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-img .ph { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 26px; } .hero-img .ph span { background: rgba(27,26,32,.55); color: #fff; font-size: 12px; letter-spacing: .05em; padding: 7px 13px; border-radius: 2px; backdrop-filter: blur(3px); } /* ---------- Bande d'engagements ---------- */ .trust { background: var(--ink); color: var(--bg); } .trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .trust .wrap.cols-3 { grid-template-columns: repeat(3, 1fr); } .trust .item { display: flex; gap: 13px; align-items: flex-start; padding: 24px 14px; } .trust .icon { color: #e2b86f; flex: none; margin-top: 2px; } .trust b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; } .trust small { font-size: 12.5px; color: #b7b2a8; line-height: 1.45; display: block; } /* ---------- Sections ---------- */ section.block { padding: 84px 0; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; gap: 20px; } .sec-head h2 { font-weight: 600; font-size: 34px; letter-spacing: -.01em; line-height: 1.1; } .sec-head .eyebrow { margin-bottom: 12px; display: block; } .sec-head a.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--accent); white-space: nowrap; } .empty-state { text-align: center; padding: 24px 0 8px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 18px; } /* ---------- Produits ---------- */ .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .card { background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; transition: .22s; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(60,45,20,.10); } .card .shot { aspect-ratio: 1/1; position: relative; display: grid; place-items: end start; padding: 14px; } .card .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .card .shot .tag { position: relative; z-index: 1; background: #fff; color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 5px 10px; border-radius: 2px; } .card .shot.ph-a { background: linear-gradient(150deg, #e9d3b0, #c89a63); } .card .shot.ph-b { background: linear-gradient(150deg, #d9dcd2, #9aa68f); } .card .shot.ph-c { background: linear-gradient(150deg, #e3cfc6, #b08a82); } .card .shot.ph-d { background: linear-gradient(150deg, #d5d9df, #8d97a6); } .card .info { padding: 16px 16px 18px; } .card .info h3 { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; margin-bottom: 6px; line-height: 1.3; } .stars { color: var(--accent); font-size: 13px; letter-spacing: 1px; margin-bottom: 10px; } .stars small { color: var(--muted); font-family: var(--font-body); letter-spacing: 0; margin-left: 5px; } .price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .price b { font-size: 18px; font-weight: 700; } .price b .amount { font-weight: 700; } .price s, .price del { color: var(--muted); font-size: 14px; } .price .save { margin-left: auto; font-size: 12px; color: #7a5a1f; background: var(--accent-soft); padding: 3px 9px; border-radius: 2px; font-weight: 700; } /* ---------- Pages WordPress (gabarit page.php) ---------- */ .page-wrap { padding-top: 40px; padding-bottom: 60px; } .page-head { margin-bottom: 26px; } .page-title { font-weight: 600; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.01em; line-height: 1.1; } .entry-content { max-width: 760px; font-size: 16px; line-height: 1.7; color: #4f483f; } .entry-content p { margin-bottom: 16px; } .entry-content h2, .entry-content h3 { font-family: var(--font-heading); color: var(--ink); margin: 26px 0 12px; } .entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Page collection (archive produit) ---------- */ /* .collection EST aussi .wrap : on ne touche qu'au padding vertical pour préserver la gouttière latérale 0 28px de .wrap (sinon le contenu colle aux bords sur mobile). */ .collection { padding-top: 38px; padding-bottom: 24px; } .collection .woocommerce-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 16px; } .collection .woocommerce-breadcrumb, .collection .woocommerce-breadcrumb a { color: var(--muted); text-decoration: none; } .collection .woocommerce-breadcrumb a:hover { color: var(--accent); } .coll-head { margin-bottom: 26px; } .coll-head .eyebrow { display: block; margin-bottom: 10px; } .coll-title { font-weight: 600; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.01em; line-height: 1.08; } .coll-intro { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 720px; margin-top: 14px; } .coll-intro p { margin-bottom: 8px; } .coll-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 28px; } .coll-toolbar .woocommerce-result-count { margin: 0; font-size: 14px; color: var(--muted); } .coll-toolbar .woocommerce-ordering { margin: 0; display: flex; align-items: center; gap: 8px; } .coll-toolbar .woocommerce-ordering label { font-size: 14px; color: var(--muted); } .coll-toolbar select.orderby { font-family: var(--font-body); font-size: 14px; color: var(--ink); background-color: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 9px 34px 9px 12px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6A62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .coll-toolbar select.orderby:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Grille : même rendu que .grid4 (4 col. desktop), 2 col. mobile. */ .collection ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .collection ul.products li.product-cell { margin: 0; } /* Pagination — Style 1. */ .collection .woocommerce-pagination { margin-top: 42px; } .collection .woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 0; padding: 0; } .collection .woocommerce-pagination ul li { margin: 0; } .collection .woocommerce-pagination a.page-numbers, .collection .woocommerce-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: .15s; } .collection .woocommerce-pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent); } .collection .woocommerce-pagination span.current { background: var(--ink); color: var(--bg); border-color: var(--ink); } .collection .woocommerce-pagination .page-numbers.dots { border-color: transparent; background: transparent; } /* Bloc SEO bas de page. */ .coll-seo { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line); } .coll-seo-inner { max-width: 820px; color: var(--muted); font-size: 15.5px; line-height: 1.7; } .coll-seo-inner h2, .coll-seo-inner h3 { font-family: var(--font-heading); color: var(--ink); margin: 18px 0 10px; } .coll-seo-inner p { margin-bottom: 12px; } .coll-seo-inner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* Pavé SEO home — repli « Lire la suite » (accordéon natif ; marqueur natif masqué comme la FAQ) */ .home-seo-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; color: var(--ink); user-select: none; } .home-seo-more > summary::-webkit-details-marker { display: none; } .home-seo-more > summary::marker { content: ""; } .home-seo-more > summary .chev { display: inline-block; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -4px; } .home-seo-more[open] > summary .chev { transform: rotate(225deg); margin-top: 4px; } .home-seo-more > summary:hover { color: var(--accent); } /* Déplié : le summary (unique toggle natif) passe EN BAS du contenu, centré, et affiche « Fermer » ⌃ au lieu de « Lire la suite » ⌄. */ .home-seo-more > summary .label-close { display: none; } .home-seo-more[open] { display: flex; flex-direction: column; } .home-seo-more[open] > summary { order: 99; align-self: center; margin: 18px 0 0; } .home-seo-more[open] > summary .label-more { display: none; } .home-seo-more[open] > summary .label-close { display: inline; } /* Variante HOME du pavé (.home-seo, cumulée à .coll-seo) : centrée, typo au niveau des sections story (h2 34 / p 16.5) — la .coll-seo de la collection reste intacte. */ .home-seo { text-align: center; } .home-seo .coll-seo-inner { max-width: 820px; margin-inline: auto; font-size: 16.5px; color: #5b5750; } .home-seo .coll-seo-inner h2 { font-weight: 600; font-size: 34px; line-height: 1.12; letter-spacing: -.01em; margin: 26px 0 14px; } .home-seo .coll-seo-inner p { font-size: 16.5px; color: #5b5750; } .home-seo .coll-seo-inner ul { display: inline-block; text-align: left; margin: 0 auto 12px; } /* Bande pleine largeur fond stone, comme .story-plus (contraste #5b5750/ink sur stone = le couple des sections story). */ .home-seo-band { background: var(--stone); } .home-seo-band .coll-seo { border-top: 0; margin-top: 0; } .coll-empty { padding: 60px 0; } /* ---------- Histoire ---------- */ .story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--stone); min-height: 560px; } .story-img { min-height: 560px; height: 100%; background: radial-gradient(120% 100% at 30% 30%, #efe2cb, #cdb188 55%, #9b7c50); } .story-text { padding: 70px 64px; } .story-text h2 { font-weight: 600; font-size: 34px; line-height: 1.12; letter-spacing: -.01em; margin: 14px 0 20px; } .story-text p { color: #5b5750; margin-bottom: 16px; font-size: 16.5px; } .story-text .sign { font-style: italic; font-size: 20px; color: var(--accent); margin-top: 8px; } /* Complément d'histoire (story_p3) : bande pleine largeur stone, traitement identique à la section histoire (eyebrow/titre/paragraphe/espacements), texte centré. */ .story-plus { background: var(--stone); text-align: center; } .story-plus .block { padding: 70px 0; } .story-plus h2 { font-weight: 600; font-size: 34px; line-height: 1.12; letter-spacing: -.01em; margin: 14px 0 20px; } .story-plus p { color: #5b5750; font-size: 16.5px; max-width: 65ch; margin: 0 auto; } @media (max-width: 700px) { .story-plus .block { padding: 48px 0; } } /* ---------- Collections ---------- */ .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .tile { position: relative; aspect-ratio: 3/4; border-radius: 3px; overflow: hidden; display: flex; align-items: flex-end; padding: 26px; color: #fff; } .tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,10,0) 40%, rgba(20,16,10,.7)); } .tile.t1 { background: linear-gradient(160deg, #caa978, #7e5c34); } .tile.t2 { background: linear-gradient(160deg, #a7afa0, #5f6b54); } .tile.t3 { background: linear-gradient(160deg, #c2a59c, #7c5b53); } .tile .lbl { position: relative; z-index: 1; } .tile .lbl h3 { font-size: 24px; font-weight: 600; margin-top: 4px; } .tile .lbl span { font-size: 13.5px; opacity: .92; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; } /* ---------- Avis ---------- */ .reviews { background: var(--ink); color: var(--bg); } .reviews .block { padding-top: 84px; padding-bottom: 96px; } /* div.block : non couvert par section.block */ .reviews .sec-head h2 { color: var(--bg); } .rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .rev { background: #26242c; border: 1px solid #34313b; border-radius: 4px; padding: 28px 26px; } .rev .stars { margin-bottom: 14px; } .rev p { font-size: 15.5px; color: #e7e3da; line-height: 1.6; margin-bottom: 18px; } .rev .who { display: flex; align-items: center; gap: 12px; } .rev .av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; } .rev .who b { font-size: 14px; display: block; } .rev .who small { font-size: 12px; color: #9c978d; } /* ---------- FAQ ---------- */ .faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { margin: 0; } .faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: none; border: 0; cursor: pointer; text-align: left; padding: 22px 2px; font-family: var(--font-heading); font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--ink); transition: color .15s; } .faq-trigger:hover { color: var(--accent); } .faq-ico { flex: none; display: inline-flex; color: var(--accent); transform: rotate(90deg); transition: transform .25s ease; } .faq-item.is-open .faq-ico { transform: rotate(-90deg); } /* Collapse animé : le panneau reste rendu (DOM intact), seule sa hauteur varie. */ .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a-inner { overflow: hidden; } .faq-a-rich { padding: 0 2px 24px; } .faq-a-rich p { color: var(--muted); font-size: 15.5px; line-height: 1.65; } .faq-a-rich p + p { margin-top: 12px; } .faq-a-rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* Desktop uniquement : en-tête FAQ centré (aligné sur l'axe de la liste resserrée). Mobile (≤700px) inchangé. N'affecte que .faq, pas les autres sections. */ @media (min-width: 701px) { .faq .sec-head { justify-content: center; text-align: center; } } /* ---------- Newsletter ---------- */ .news { padding: 80px 0; text-align: center; } .news h2 { font-weight: 600; font-size: 32px; margin-bottom: 12px; } .news > p { color: var(--muted); max-width: 480px; margin: 0 auto 28px; } .news-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; } .news-form input { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 2px; padding: 14px 16px; font-family: var(--font-body); font-size: 15px; } .news-feedback { color: var(--accent); font-size: 14px; margin: 14px auto 0; max-width: 440px; } .news small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 14px; } /* ---------- Carte : bouton « Ajouter au panier » ---------- */ .card-cta { margin-top: 14px; } /* width:100% + box-sizing global (border-box) → ne dépasse JAMAIS la carte. Pas de white-space:nowrap : si trop long, le texte revient à la ligne DANS le bouton plutôt que d'élargir la carte (donc plus de débordement de grille). */ .card .card-add { width: 100%; max-width: 100%; justify-content: center; font-weight: 700; font-size: 14px; padding: 15px 18px; line-height: 1.2; } .card .card-add:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } .card .card-add.loading { opacity: .7; pointer-events: none; } .card .card-add .icon { flex: none; } /* Lien natif « Voir le panier » après ajout : masqué (le tiroir gère déjà l'accès au panier). */ .added_to_cart.wc-forward, .card .added_to_cart { display: none !important; } /* ---------- Tiroir panier (slide-out) ---------- */ body.cart-open { overflow: hidden; } /* Hôte plein-écran (taille viewport) à overflow caché : contient le tiroir hors-écran sans créer de scroll horizontal. Transparent aux clics quand fermé. */ .cart-drawer-host { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 80; } .cart-overlay { position: absolute; inset: 0; background: rgba(20, 16, 10, .42); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .cart-overlay.on { opacity: 1; pointer-events: auto; } .cart-drawer { position: absolute; top: 0; right: 0; height: 100%; width: 410px; max-width: 92vw; background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; pointer-events: auto; transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility .3s; box-shadow: -10px 0 40px rgba(40, 25, 10, .18); } .cart-drawer.on { transform: translateX(0); visibility: visible; } .cart-drawer .dhead { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); } .cart-drawer .dhead-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; } .cart-drawer .dhead-title .icon { color: #2f6b4b; flex: none; } .cart-drawer .dclose { background: none; border: 0; cursor: pointer; color: var(--muted); display: inline-flex; padding: 4px; } .cart-drawer .dclose:hover { color: var(--ink); } .cart-drawer .dbody { flex: 1; overflow-y: auto; padding: 20px 22px; } .drawer-items { list-style: none; margin: 0; padding: 0; } .ditem { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .ditem.is-loading { opacity: .5; pointer-events: none; } .ditem .th { width: 62px; height: 78px; border-radius: 3px; overflow: hidden; display: block; background: var(--stone); } .ditem .th img { width: 100%; height: 100%; object-fit: cover; } .ditem .th-a { background: linear-gradient(150deg, #e9d3b0, #c89a63); } .ditem .th-b { background: linear-gradient(150deg, #dcdccf, #9aa388); } .ditem .th-c { background: linear-gradient(150deg, #e6d2c8, #b48a80); } .ditem .th-d { background: linear-gradient(150deg, #d6dade, #8b95a2); } .ditem .dmid { min-width: 0; } .ditem .dname { font-size: 14px; font-weight: 600; margin-bottom: 3px; line-height: 1.3; } .ditem .dname a:hover { color: var(--accent); } .ditem .var { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; } .ditem .dright { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } .ditem .pr { font-weight: 700; font-size: 14.5px; } .ditem-remove { background: none; border: 0; cursor: pointer; color: var(--muted); display: inline-flex; padding: 2px; } .ditem-remove:hover { color: #a23; } .drawer-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; background: #fff; } .drawer-qty button { width: 30px; height: 30px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); } .drawer-qty button:hover { color: var(--accent); } .drawer-qty .q-val { min-width: 30px; text-align: center; font-weight: 700; font-size: 13.5px; } .ship { display: flex; align-items: center; gap: 8px; background: #e6f1ea; color: #2f6b4b; font-weight: 600; font-size: 13px; padding: 10px 13px; border-radius: 3px; } .ship .icon { flex: none; } .drawer-empty { text-align: center; padding: 44px 10px; color: var(--muted); display: flex; flex-direction: column; gap: 16px; align-items: center; } .cart-drawer .dfoot { border-top: 1px solid var(--line); padding: 18px 22px; } .cart-drawer .dfoot .tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .cart-drawer .dfoot .tot b, .cart-drawer .dfoot .tot > span:last-child { font-size: 20px; font-weight: 700; } .cart-drawer .dfoot .tot small { font-size: 12px; color: var(--muted); font-weight: 400; } .cart-drawer .dfoot .tot-discount { margin-top: -6px; margin-bottom: 10px; } .cart-drawer .dfoot .tot-discount span, .cart-drawer .dfoot .tot-discount > span:last-child { font-size: 14px; font-weight: 600; color: var(--accent); } .cart-drawer .dfoot .tot-total { border-top: 1px solid var(--line); padding-top: 12px; } .cart-drawer .dfoot .tot-total > span:last-child { font-size: 22px; } .cart-drawer .dfoot .btn { width: 100%; justify-content: center; margin-bottom: 10px; } .cart-drawer .dfoot .btn.ghost { margin-bottom: 0; } .cart-drawer .dfoot .reass { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 12px; } .cart-drawer .dfoot .reass .icon { color: var(--accent); flex: none; } /* ---------- Page panier ---------- */ /* .cart-page EST aussi .wrap : padding vertical seulement pour préserver la gouttière latérale 0 28px (sinon le contenu colle aux bords sur mobile). */ .cart-page { padding-top: 30px; padding-bottom: 60px; } .cart-steps { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 6px 0 4px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; } .cart-steps .cart-step { display: inline-flex; align-items: center; gap: 7px; } .cart-steps .cart-step.is-active { color: var(--ink); font-weight: 600; } .cart-steps .dot { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--ink); color: var(--bg); } .cart-steps .dot.off { background: var(--stone); color: var(--muted); } .cart-steps .icon { color: var(--line); } .cart-title { font-weight: 600; font-size: clamp(28px, 4vw, 36px); text-align: center; margin: 8px 0 30px; } .cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; } .cart-items { border-top: 1px solid var(--line); } .cart-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); } .cart-item .thumb { width: 96px; height: 120px; border-radius: 3px; overflow: hidden; display: block; background: var(--stone); } .cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-item .thumb.ph { background: linear-gradient(150deg, #e9d3b0, #c89a63); } .cart-item .mid { min-width: 0; } .cart-item .ci-name { font-size: 16px; font-weight: 600; margin-bottom: 5px; line-height: 1.3; } .cart-item .ci-name a:hover { color: var(--accent); } .cart-item .var { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; } .cart-item .rm { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; } .cart-item .rm:hover { color: #a23; } .cart-item .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .cart-item .right .line { font-size: 17px; font-weight: 700; } .cart-item .right .unit { font-size: 12.5px; color: var(--muted); } .cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; background: #fff; } .cart-qty button { width: 34px; height: 34px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); } .cart-qty button:hover { color: var(--accent); } .cart-qty .quantity { display: inline-flex; margin: 0; } .cart-qty input.qty { width: 42px; height: 34px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-family: var(--font-body); font-weight: 700; font-size: 14px; background: #fff; -moz-appearance: textfield; } .cart-qty input.qty::-webkit-outer-spin-button, .cart-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart-coupon { display: flex; gap: 10px; align-items: center; padding: 22px 0; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .cart-coupon input { flex: 1; min-width: 180px; border: 1px solid var(--line); background: #fff; border-radius: 2px; padding: 13px 14px; font-family: var(--font-body); font-size: 14.5px; } .cart-coupon .btn.ghost { width: auto; flex: none; } .cart-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; flex-wrap: wrap; } .cart-actions .continue { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--accent); } .cart-actions .continue .icon { flex: none; } .cart-actions .cart-update { background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .cart-actions .cart-update:hover { color: var(--ink); } .cart-summary { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 26px; position: sticky; top: 24px; } .cart-summary h2 { font-weight: 600; font-size: 22px; margin-bottom: 18px; } .cart-summary .sline { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; margin-bottom: 12px; color: #4f483f; } .cart-summary .sline.disc { color: #2f6b4b; font-weight: 600; } .cart-summary .sline .free { color: #2f6b4b; font-weight: 700; } .cart-summary .stotal { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; margin-bottom: 18px; } .cart-summary .stotal b { font-size: 22px; font-weight: 700; } .cart-summary .stotal small { font-size: 12px; color: var(--muted); font-weight: 400; } .cart-summary .checkout-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; font-weight: 700; font-size: 15px; padding: 16px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 2px; text-align: center; transition: .18s; } .cart-summary .checkout-button:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } .cart-summary .reassure { margin-top: 18px; display: grid; gap: 10px; } .cart-summary .reassure .r { display: flex; gap: 9px; align-items: center; font-size: 13px; color: #4f483f; } .cart-summary .reassure .r .icon { color: var(--accent); flex: none; } .cart-summary .paymini { display: flex; gap: 7px; margin-top: 16px; flex-wrap: wrap; } .cart-summary .paymini svg { height: 24px; width: auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 2px 5px; } .cart-empty-page { text-align: center; } .cart-empty-page .empty-state { padding: 20px 0 50px; } /* ---------- Page commande (checkout) ---------- */ /* .checkout-page EST aussi .wrap : padding vertical seul → gouttière 28px préservée. */ .checkout-page { padding-top: 30px; padding-bottom: 60px; } .checkout-title { font-weight: 600; font-size: clamp(28px, 4vw, 36px); text-align: center; margin: 8px 0 28px; } .checkout-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; } .checkout-left { min-width: 0; } /* En-têtes de sections (Facturation, Expédition, Votre commande). */ .checkout-page h3, .checkout-page #order_review_heading, .checkout-page .woocommerce-billing-fields h3, .checkout-page .woocommerce-shipping-fields h3, .checkout-page .woocommerce-additional-fields h3 { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.2; margin: 0 0 18px; } .checkout-page .woocommerce-shipping-fields, .checkout-page .woocommerce-additional-fields { margin-top: 28px; } /* customer_details : facturation puis expédition empilées (1 colonne dans la colonne gauche). */ .checkout-page #customer_details.col2-set { display: block; } .checkout-page #customer_details .col-1, .checkout-page #customer_details .col-2 { width: 100%; max-width: 100%; float: none; } .checkout-page #customer_details .col-2 { margin-top: 28px; } /* Champs de formulaire. */ .checkout-page .form-row { display: flex; flex-direction: column; margin: 0 0 16px; } .checkout-page .form-row label { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .checkout-page .form-row .required { color: var(--accent); text-decoration: none; border: 0; } .checkout-page .woocommerce-input-wrapper { width: 100%; } .checkout-page input.input-text, .checkout-page textarea, .checkout-page select { width: 100%; max-width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 2px; padding: 12px 14px; min-height: 48px; font-family: var(--font-body); font-size: 15px; color: var(--ink); } .checkout-page textarea { min-height: 90px; } .checkout-page input.input-text:focus, .checkout-page textarea:focus, .checkout-page select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .checkout-page .form-row.woocommerce-invalid input.input-text { border-color: #a23; } /* select2 (pays / état) aligné sur les champs. */ .checkout-page .select2-container { width: 100% !important; } .checkout-page .select2-container--default .select2-selection--single { height: 48px; border: 1px solid var(--line); border-radius: 2px; background: #fff; } .checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 14px; color: var(--ink); } .checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } /* Colonne droite : récap commande (carte collante). */ .checkout-right { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 26px; position: sticky; top: 24px; min-width: 0; } .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout-review-order-table th.product-total { text-align: right; white-space: nowrap; } .woocommerce-checkout-review-order-table .product-name { color: var(--ink); font-weight: 600; } .woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); font-weight: 400; } .woocommerce-checkout-review-order-table tfoot th { font-weight: 600; color: #4f483f; } .woocommerce-checkout-review-order-table tfoot td { text-align: right; } .woocommerce-checkout-review-order-table tfoot tr.order-total th, .woocommerce-checkout-review-order-table tfoot tr.order-total td { font-size: 18px; font-weight: 700; color: var(--ink); border-bottom: 0; padding-top: 14px; } /* Paiement (gateways) — habillage uniquement, structure WooCommerce intacte. */ .checkout-page #payment { background: transparent; } .checkout-page #payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 16px 0 4px; border-top: 1px solid var(--line); } .checkout-page #payment ul.payment_methods li { margin-bottom: 10px; font-size: 14.5px; } .checkout-page #payment ul.payment_methods li input { margin-right: 8px; } .checkout-page #payment ul.payment_methods li img { max-height: 24px; width: auto; vertical-align: middle; margin-left: 6px; } .checkout-page #payment .payment_box { background: var(--stone); border-radius: 3px; padding: 14px 16px; margin-top: 8px; font-size: 13.5px; color: var(--muted); } .checkout-page #payment .payment_box::before { display: none; } .checkout-page #payment .place-order { padding-top: 6px; } .checkout-page #place_order { display: block; width: 100%; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 2px; font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 16px 22px; cursor: pointer; transition: .18s; text-align: center; margin-top: 6px; } .checkout-page #place_order:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } .checkout-page .woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--muted); margin: 6px 0 14px; } .checkout-page .woocommerce-terms-and-conditions-wrapper a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* Connexion / code promo (haut de page checkout). */ .checkout-page form.login, .checkout-page form.checkout_coupon, .checkout-page .woocommerce-form-login { border: 1px solid var(--line); background: #fff; border-radius: 3px; padding: 20px; margin-bottom: 20px; } .checkout-page form.checkout_coupon .button, .checkout-page form.login .button { width: auto; } .checkout-must-login { padding: 30px 0; color: var(--muted); } /* Réassurance + paiements dans le récap. */ .checkout-trust { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; } .checkout-trust .reassure { display: grid; gap: 10px; } .checkout-trust .r { display: flex; gap: 9px; align-items: center; font-size: 13px; color: #4f483f; } .checkout-trust .r .icon { color: var(--accent); flex: none; } .checkout-trust .paymini { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; } .checkout-trust .paymini svg { height: 24px; width: auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 2px 5px; } /* Notices WooCommerce (panier, etc.) — habillage Style 1 sobre. */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { list-style: none; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: #fff; padding: 14px 16px; margin: 0 0 20px; font-size: 14px; border-radius: 2px; } .woocommerce-error { border-left-color: #a23; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--accent); font-weight: 600; } /* Boutons WooCommerce hérités → charte ink/accent (plus aucun violet par défaut). Spécificité montée pour battre les styles Woo restants ; n'affecte pas .btn. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce input.button.alt, a.button.wc-forward, .wc-block-components-button, .wp-element-button { background-color: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 2px; font-weight: 700; font-family: var(--font-body); box-shadow: none; text-shadow: none; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce input.button.alt:hover, a.button.wc-forward:hover, .wc-block-components-button:hover, .wp-element-button:hover { background-color: var(--accent); border-color: var(--accent); color: var(--bg); } /* ---------- Fiche produit (single) ---------- */ /* .product-page EST aussi .wrap : padding vertical seul (gouttière 28px préservée). */ .product-page { padding-top: 12px; padding-bottom: 24px; } .crumb { padding: 14px 0 6px; font-size: 13px; color: var(--muted); } .crumb a { color: var(--muted); } .crumb a:hover { color: var(--accent); } .crumb .sep { margin: 0 8px; opacity: .5; } .pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 50px; padding: 8px 0 56px; align-items: start; } /* Galerie native WooCommerce, habillée (miniatures + image principale à hauteur auto). */ .pdp .gallery { position: sticky; top: 96px; min-width: 0; } .pdp .woocommerce-product-gallery { position: relative; } .pdp .woocommerce-product-gallery__wrapper { margin: 0; } .pdp .woocommerce-product-gallery__image { border-radius: 4px; overflow: hidden; } .pdp .woocommerce-product-gallery__image a, .pdp .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; } .pdp .flex-control-thumbs { display: none; } /* Fleches de la galerie (Flexslider directionNav) : rond blanc translucide + chevron ink. */ .pdp .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .pdp .flex-direction-nav a { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, .75); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; overflow: hidden; text-indent: -9999px; opacity: .6; transition: opacity .15s ease; } .pdp .flex-direction-nav a:hover { opacity: 1; } .pdp .flex-direction-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; } .pdp .flex-prev { left: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B1A20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); } .pdp .flex-next { right: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B1A20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); } @media (max-width: 700px) { .pdp .flex-direction-nav a { opacity: 1; width: 30px; height: 30px; background-size: 12px 12px; } .pdp .flex-prev { left: 8px; } .pdp .flex-next { right: 8px; } } .pdp .onsale { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 2px; } /* Colonne achat. */ .pdp .info { min-width: 0; } .pdp .pdp-eyebrow { display: block; margin-bottom: 12px; } .pdp .product_title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(28px, 4vw, 40px); line-height: 1.06; letter-spacing: -.01em; margin: 0 0 12px; } .pdp .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13.5px; color: var(--muted); } .pdp .star-rating { color: var(--accent); } .pdp .price { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin: 0 0 18px; color: var(--ink); font-size: 28px; font-weight: 700; } .pdp .price del { color: var(--muted); font-size: 17px; font-weight: 400; } .pdp .price ins { text-decoration: none; } .pdp .woocommerce-product-details__short-description { color: #564f45; font-size: 15.5px; margin: 0 0 20px; } .pdp .woocommerce-product-details__short-description p { margin-bottom: 10px; } /* Lien « Trouver ma taille ». */ .size-help, .rug-calc-help { display: flex; justify-content: flex-end; margin: 0 0 8px; } .size-finder-trigger, .rug-calc-trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: var(--font-body); } .tlink { font-weight: 600; font-size: 13px; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 1px; } .tlink:hover { opacity: .75; } /* Variations habillées (les