/* ============================================================ BRÛLERIE DES CONSULS — main.css v2.0 (refonte design) Charte : lemonade #F6EEAD · sable #CDC294 · noir #1D1D1B crème #F5F0E8 · vert-mousse #839280 · vert-sauge #BBC9BB Direction : noir moderne, full-width maîtrisé, coins bruts, effets élégants, mise en avant des éléments clés. ============================================================ */ /* ── 1. VARIABLES ─────────────────────────────────────────── */ :root { --lemonade: #F6EEAD; --sable: #CDC294; --noir: #1D1D1B; --blanc: #FFFFFF; --creme: #F5F0E8; --creme-alt: #E8E0D0; --vert-mousse: #839280; --vert-sauge: #BBC9BB; --footer-bg: #111110; --bg-dark: #1D1D1B; --bg-dark-alt: #232321; --bg-darker: #161614; --bg-light: #F5F0E8; --bg-white: #FFFFFF; --bg-sand: #E8E0D0; --text-on-dark: #FFFFFF; --text-on-dark-muted: rgba(255,255,255,0.66); --text-on-dark-dim: rgba(255,255,255,0.38); --text-on-light: #1D1D1B; --text-on-light-muted: #55554F; --text-on-light-dim: #8A8A80; --accent: #CDC294; --accent-hover: #B8A87A; --border-dark: rgba(255,255,255,0.09); --border-light: rgba(29,29,27,0.10); --font: 'Onest', system-ui, sans-serif; --text-xs: 13px; --text-sm: 15px; --text-base: 17px; --text-md: 20px; --text-lg: 24px; --text-xl: 30px; --text-2xl: clamp(34px, 4vw, 52px); --text-3xl: clamp(42px, 6vw, 80px); --leading: 1.7; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* Deux largeurs : full-width sections + conteneur "contenu" large */ --max-w: 1500px; /* header + sections contenues larges */ --max-w-text: 1500px; /* avis / header */ --pad-x: clamp(20px, 4vw, 56px); /* Coins bruts partout (TODO) — on neutralise les anciens radius */ --radius-s: 0px; --radius-m: 0px; --radius-l: 0px; --radius-f: 9999px; /* gardé uniquement pour pastilles/cercles */ --nav-h: 78px; --t-fast: 0.18s ease; --t-base: 0.3s ease; --t-slow: 0.55s cubic-bezier(.22,.61,.36,1); --shadow-soft: 0 10px 40px rgba(0,0,0,0.10); --shadow-hard: 0 24px 60px rgba(0,0,0,0.40); } /* ── 2. RESET ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: var(--text-base); line-height: var(--leading); color: var(--text-on-dark); background: var(--bg-dark); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg { max-width: 100%; display: block; } img, video { height: auto; } a { color: inherit; text-decoration: none; transition: color var(--t-fast); } ul, ol { list-style: none; } address { /* La balise

n'est utilisée que dans les contextes WooCommerce (panier, commande, espace client), toujours sur fond clair — alors que le est sombre par défaut. Sans ce reset, le texte hérite du blanc du body et devient illisible (bug constaté à plusieurs reprises). */ font-style: normal; color: var(--text-on-light-muted); line-height: 1.6; } button, input, textarea, select { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; } button { cursor: pointer; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.12; } h2 span, h3 span { font-weight: 400; } ::selection { background: var(--lemonade); color: var(--noir); } /* ── 3. LAYOUT ────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); } .container--text { width: 100%; max-width: var(--max-w-text); margin-inline: auto; padding-inline: var(--pad-x); } .container--wide { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); } .container--narrow { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: var(--pad-x); } /* ── 4. TYPOGRAPHIE ───────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s3); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vert-mousse); margin-bottom: var(--s4); } .eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: 0.6; } .section__header--center .eyebrow::before { display: none; } .eyebrow--accent { color: var(--accent); } .eyebrow--light { color: rgba(255,255,255,0.55); } .eyebrow--dark { color: var(--vert-mousse); } .section__h2--dark { font-size: var(--text-2xl); color: var(--text-on-dark); letter-spacing: -0.015em; } .section__h2--light { font-size: var(--text-2xl); color: var(--text-on-light); letter-spacing: -0.015em; } /* ── 5. ANIMATIONS KEYFRAMES ──────────────────────────────── */ @keyframes kenburns { 0% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.08) translate(-1.2%,-1.2%); } 100% { transform: scale(1) translate(0,0); } } @keyframes beanFloat { 0% { transform: translateY(-55%) rotate(-20deg); } 50% { transform: translateY(-59%) rotate(-17deg); } 100% { transform: translateY(-55%) rotate(-20deg); } } @keyframes fadeUp { from { opacity:0; transform:translateY(18px);} to { opacity:1; transform:translateY(0);} } @keyframes fadeUpTitle { from { opacity:0; transform:translateY(34px);} to { opacity:1; transform:translateY(0);} } @keyframes ruleExpand { from { width:0; opacity:0;} to { width:56px; opacity:1;} } @keyframes eyebrowSlide{ from { opacity:0; letter-spacing:0.08em;} to { opacity:1; letter-spacing:0.2em;} } @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} } @keyframes shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} } /* ── 6. BOUTONS ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 15px 32px; border-radius: var(--radius-f); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; transition: all var(--t-base); white-space: nowrap; cursor: pointer; border: none; position: relative; } .btn--white { background: var(--blanc); color: var(--noir); } .btn--white:hover { background: var(--lemonade); color: var(--noir); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(246,238,173,0.2); } .btn--sand { background: var(--sable); color: var(--blanc); } .btn--sand:hover { background: var(--lemonade); color: var(--noir); } .btn--dark { background: var(--noir); color: var(--lemonade); } .btn--dark:hover { background: #34342f; color: var(--blanc); transform: translateY(-2px); } .btn--lemon { background: var(--lemonade); color: var(--noir); } .btn--lemon:hover { background: var(--blanc); color: var(--noir); transform: translateY(-2px); } .btn--sm { padding: 11px 22px; font-size: var(--text-xs); } .btn--lg { padding: 18px 44px; font-size: var(--text-base); } /* ── 7. NAVIGATION ────────────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--nav-h); background: rgba(22,22,20,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-dark); transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); } .site-header.is-scrolled { background: rgba(20,20,18,0.96); border-bottom-color: rgba(246,238,173,0.14); box-shadow: 0 8px 30px rgba(0,0,0,0.35); } .nav { display: flex; align-items: center; justify-content: space-between; height: 100%; } .nav__logo { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; } .nav__logo-img { width: 40px; height: 40px; object-fit: cover; flex-shrink: 0; } .nav__logo-text { display: flex; flex-direction: column; gap: 2px; } .nav__logo-sup { font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); opacity: 0.85; line-height: 1; } .nav__logo-main { font-size: 20px; font-weight: 700; color: var(--blanc); letter-spacing: 0.005em; line-height: 1.15; } .nav__links { display: flex; align-items: center; gap: var(--s7); } .nav__links ul { display: flex; align-items: center; gap: var(--s7); list-style: none; margin: 0; padding: 0; } .nav__links li { list-style: none; } .nav__links a { font-size: var(--text-sm); font-weight: 500; color: rgba(255,255,255,0.82); letter-spacing: 0.03em; transition: color var(--t-fast); position: relative; } .nav__links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1.5px; background: var(--lemonade); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base); } .nav__links a:hover { color: var(--blanc); } .nav__links a:hover::after { transform: scaleX(1); } .nav__actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; } .nav__icon-btn, .btn--ghost { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-f); color: var(--text-on-dark-muted); background: transparent; padding: 0; transition: all var(--t-fast); } .btn--ghost:hover, .nav__icon-btn:hover { color: var(--blanc); background: rgba(255,255,255,0.07); } .nav__cart { display: flex; align-items: center; gap: var(--s2); padding: 11px 20px; border-radius: var(--radius-f); background: var(--lemonade); color: var(--noir); font-size: var(--text-sm); font-weight: 700; width: auto; height: auto; transition: all var(--t-base); } .nav__cart:hover { background: var(--blanc); color: var(--noir); transform: translateY(-1px); } .nav__cart-count { background: var(--noir); color: var(--lemonade); font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: var(--radius-f); display: flex; align-items: center; justify-content: center; } .nav__cart-count[data-count="0"] { display: none; } .nav__toggle { display: none; } /* ── 7bis. MINI PANIER (déroulant header) ──────────────────── */ .nav__cart-wrap { position: relative; } .mini-cart { position: absolute; top: calc(100% + var(--s4)); right: 0; z-index: 600; width: 360px; max-height: 70vh; overflow-y: auto; background: var(--bg-white); box-shadow: var(--shadow-hard); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base); } .nav__cart-wrap.is-open .mini-cart { opacity: 1; visibility: visible; transform: translateY(0); } .mini-cart__empty { display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; padding: var(--s7) var(--s6); } .mini-cart__empty p { font-size: var(--text-sm); color: var(--text-on-light-muted); } .mini-cart__list { list-style: none; margin: 0; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); max-height: 360px; overflow-y: auto; } .mini-cart__item { display: flex; align-items: flex-start; gap: var(--s3); position: relative; } .mini-cart__img { flex-shrink: 0; width: 44px; aspect-ratio: 13 / 18; overflow: hidden; background: var(--bg-light); display: block; } .mini-cart__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mini-cart__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .mini-cart__info { flex: 1; min-width: 0; padding-right: var(--s5); } .mini-cart__name { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); line-height: 1.3; margin-bottom: 2px; transition: color var(--t-fast); } .mini-cart__name:hover { color: var(--vert-mousse); } .mini-cart__meta { font-size: 11px; color: var(--text-on-light-dim); margin-bottom: var(--s2); } .mini-cart__meta p { margin: 0; } .mini-cart__qty-price { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-xs); color: var(--text-on-light-muted); } .mini-cart__subtotal { font-weight: 700; color: var(--text-on-light); } .mini-cart__remove { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--text-on-light-dim); transition: color var(--t-fast); } .mini-cart__remove:hover { color: var(--noir); } .mini-cart__footer { padding: var(--s5) var(--s4); border-top: 1px solid var(--border-light); } .mini-cart__subtotal-row { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s4); } .mini-cart__view, .mini-cart__checkout { display: block; width: 100%; text-align: center; } .mini-cart__view { margin-bottom: var(--s3); } /* ── 7ter. RECHERCHE (déroulant header + suggestions live) ─── */ .nav__search-wrap { position: relative; } .search-panel { position: absolute; top: calc(100% + var(--s4)); right: 0; z-index: 600; width: 360px; background: var(--bg-white); box-shadow: var(--shadow-hard); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base); } .nav__search-wrap.is-open .search-panel { opacity: 1; visibility: visible; transform: translateY(0); } .search-panel__form { display: flex; border-bottom: 1px solid var(--border-light); } .search-panel__input { flex: 1; padding: var(--s4) var(--s5); font-size: var(--text-sm); font-family: inherit; background: transparent; color: var(--text-on-light); } .search-panel__input::placeholder { color: var(--text-on-light-dim); } .search-panel__submit { display: flex; align-items: center; justify-content: center; width: 48px; flex-shrink: 0; color: var(--text-on-light-muted); transition: color var(--t-fast); } .search-panel__submit:hover { color: var(--text-on-light); } .search-panel__results { max-height: 360px; overflow-y: auto; } .search-panel__results.is-visible { padding: var(--s3); } .search-panel__item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); transition: background var(--t-fast); } .search-panel__item:hover { background: var(--bg-light); } .search-panel__item-img { flex-shrink: 0; width: 40px; aspect-ratio: 13 / 18; overflow: hidden; background: var(--bg-light); display: block; } .search-panel__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .search-panel__item-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .search-panel__item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .search-panel__item-name { font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); } .search-panel__item-price { font-size: var(--text-xs); color: var(--text-on-light-muted); } .search-panel__empty { padding: var(--s5); font-size: var(--text-sm); color: var(--text-on-light-muted); text-align: center; } .search-panel__more { display: block; text-align: center; padding: var(--s4); margin-top: var(--s2); border-top: 1px solid var(--border-light); font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); transition: color var(--t-fast); } .search-panel__more:hover { color: var(--vert-mousse); } /* Suggestion d'articles de blog sur la page de résultats de recherche */ .search-blog-suggest { margin-top: var(--s9); padding-top: var(--s8); border-top: 1px solid var(--border-light); } /* ── 8. HERO ──────────────────────────────────────────────── */ .hero { background: var(--bg-dark); background-size: cover; background-position: center center; background-repeat: no-repeat; /* TODO : hauteur réduite — e-commerce */ min-height: clamp(560px, 74vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s9) var(--pad-x) var(--s8); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center center; animation: kenburns 20s ease-in-out infinite; z-index: 0; } .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(20,20,18,0.96) 0%, rgba(20,20,18,0.55) 42%, rgba(20,20,18,0.30) 100%), linear-gradient(to right, rgba(20,20,18,0.55) 0%, rgba(20,20,18,0) 55%); } .hero__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(205,194,148,0.12); pointer-events: none; z-index: 2; } .hero__ring--1 { width: 620px; height: 620px; right: -120px; top: -140px; } .hero__ring--2 { width: 420px; height: 420px; right: 30px; top: 30px; } .hero__ring--3 { width: 220px; height: 220px; right: 150px; top: 150px; border-color: rgba(205,194,148,0.07); } .hero__bean { position: absolute; right: 6%; top: 50%; transform: translateY(-55%) rotate(-20deg); width: 320px; height: 380px; opacity: 0.08; pointer-events: none; z-index: 2; animation: beanFloat 9s ease-in-out infinite; /* TODO : retour à l'état initial plus lent au quit-hover */ transition: opacity 1.6s cubic-bezier(.22,.61,.36,1); } .hero:hover .hero__bean { opacity: 0.16; transition: opacity 0.4s ease; } .hero__inner { position: relative; z-index: 3; max-width: var(--max-w); margin-inline: auto; width: 100%; } .hero__tag--anim { animation: fadeUp 0.7s ease both; animation-delay: 0.15s; } .hero__title--anim { animation: fadeUpTitle 0.85s ease both; animation-delay: 0.35s; } .hero__bottom--anim { animation: fadeUp 0.7s ease both; animation-delay: 0.6s; } .hero__tag { display: inline-flex; align-items: center; gap: var(--s3); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lemonade); margin-bottom: var(--s5); position: relative; z-index: 3; } .hero__tag::before { content: ''; display: block; width: 30px; height: 1px; background: var(--lemonade); flex-shrink: 0; } .hero__title { font-size: clamp(46px, 6.4vw, 84px); font-weight: 700; color: var(--blanc); line-height: 0.96; letter-spacing: -0.025em; position: relative; z-index: 3; max-width: 720px; margin-bottom: var(--s5); } .hero__title-accent { color: var(--sable); transition: color var(--t-base); } .hero:hover .hero__title-accent { color: var(--lemonade); } .hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); position: relative; z-index: 3; flex-wrap: wrap; } .hero__desc { font-size: var(--text-md); color: rgba(255,255,255,0.9); max-width: 460px; line-height: var(--leading); } .hero__actions { display: flex; gap: var(--s3); flex-shrink: 0; flex-wrap: wrap; } /* ── 9. STATS BAR (typewriter + déroulé "store") ──────────── */ .stats-bar { background: var(--lemonade); color: var(--noir); position: relative; /* TODO : effet de store qui se déroule depuis le hero */ transform-origin: top center; overflow: hidden; } .stats-bar[data-roll] { transform: scaleY(0); opacity: 0; } .stats-bar.is-rolled { animation: storeRoll 0.75s cubic-bezier(.22,.61,.36,1) both; } @keyframes storeRoll { 0% { transform: scaleY(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } } .stats-bar__inner { display: flex; justify-content: center; align-items: stretch; max-width: var(--max-w); margin-inline: auto; padding: var(--s2) var(--pad-x); } .stat-item { flex: 1; max-width: 340px; /* TODO : hauteur réduite */ padding: var(--s4) var(--s6); text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .stat-item__num { font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--noir); line-height: 1; margin-bottom: 6px; letter-spacing: -0.01em; } .stat-item__label { font-size: 12px; font-weight: 600; color: rgba(29,29,27,0.72); text-transform: uppercase; letter-spacing: 0.09em; min-height: 1em; } /* curseur typewriter */ .stat-item__label .tw-caret { display: inline-block; width: 1px; height: 1em; background: rgba(29,29,27,0.7); margin-left: 1px; vertical-align: -0.15em; animation: blink 0.9s steps(1) infinite; } .stat-item__sep { width: 1px; background: linear-gradient(to bottom, transparent, rgba(29,29,27,0.22), transparent); align-self: stretch; margin-block: var(--s3); } /* ── 11. SECTIONS GÉNÉRIQUES ──────────────────────────────── */ .section { padding-block: var(--s9); position: relative; } .section--tight { padding-block: var(--s8); } .section--dark { background: var(--bg-dark); } .section--dark-alt { background: var(--bg-dark-alt); } .section--darker { background: var(--bg-darker); } .section--light { background: var(--bg-light); } .section--white { background: var(--bg-white); } .section--sand { background: var(--bg-sand); } .section__header { margin-bottom: var(--s7); } .section__header--center { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--s7); } .section__header--center .eyebrow { justify-content: center; } .section__header--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s7); } /* Bandeau titre "full-width" décoratif ══ */ .fw-band { text-align: center; max-width: 760px; margin: 0 auto var(--s8); } /* ── 12. TRAITS SOUS H2 ───────────────────────────────────── */ .h2-rule { display: block; height: 3px; margin-top: var(--s4); width: 0; opacity: 0; } [data-animate].is-visible .h2-rule, .is-visible .h2-rule { animation: ruleExpand 0.65s ease 0.3s both; } .h2-rule--cafe { background: var(--lemonade); } .h2-rule--the { background: var(--vert-sauge); } .h2-rule--cafe-light { background: var(--sable); } .h2-rule--the-light { background: rgba(131,146,128,0.6); } .section__header--center .h2-rule { margin-inline: auto; } .section__header--split .h2-rule { margin-inline: 0; } .histoire__content .h2-rule { margin-inline: 0; } /* ── 13. ANIMATIONS SCROLL ────────────────────────────────── */ [data-animate] { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow), transform var(--t-slow); } [data-animate].is-visible { opacity: 1; transform: translateY(0); } [data-animate].is-visible .eyebrow { animation: eyebrowSlide 0.5s ease 0.1s both; } [data-stagger].is-visible > * { animation: fadeUp 0.6s ease both; } [data-stagger].is-visible > *:nth-child(1){animation-delay:.05s} [data-stagger].is-visible > *:nth-child(2){animation-delay:.13s} [data-stagger].is-visible > *:nth-child(3){animation-delay:.21s} [data-stagger].is-visible > *:nth-child(4){animation-delay:.29s} [data-stagger].is-visible > *:nth-child(5){animation-delay:.37s} /* ── 14. VALEURS (full-width, compact, élégant) ───────────── */ .values { background: var(--bg-white); } .values .section__header--center { padding-top: var(--s9); } .values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-light); border-block: 1px solid var(--border-light); } .value-card { background: var(--bg-white); padding: var(--s6) var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s3); transition: background var(--t-base), transform var(--t-base); position: relative; overflow: hidden; } .value-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--vert-mousse); transform: scaleY(0); transform-origin: top; transition: transform var(--t-base); } .value-card:hover { background: var(--bg-light); } .value-card:hover::before { transform: scaleY(1); } .value-card__num { position: absolute; top: var(--s4); right: var(--s5); z-index: 0; font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--vert-mousse); opacity: 0.10; pointer-events: none; transition: opacity var(--t-base), transform var(--t-base); } .value-card:hover .value-card__num { opacity: 0.16; transform: translateY(-2px); } .value-card__head { display: flex; align-items: center; gap: var(--s4); position: relative; z-index: 1; padding-right: 46px; } .value-card__icon-wrap { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--vert-mousse); background: rgba(131,146,128,0.08); border: 1px solid rgba(131,146,128,0.18); transition: all var(--t-base); } .value-card:hover .value-card__icon-wrap { background: var(--vert-mousse); color: var(--blanc); border-color: var(--vert-mousse); transform: translateY(-3px); } .value-card__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-on-light); letter-spacing: -0.01em; } .value-card__text { font-size: var(--text-base); color: var(--text-on-light-muted); line-height: 1.55; position: relative; z-index: 1; } /* ── 15. PRODUITS VEDETTES (full-width, ruban, hover cart) ── */ .produits { background: var(--bg-dark); position: relative; } .produits::before { content: ''; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 80% -10%, rgba(246,238,173,0.06), transparent 70%); pointer-events: none; } .products__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s5); } .products__grid--4 { grid-template-columns: repeat(4, 1fr); } .product-card { background: transparent; overflow: visible; display: flex; flex-direction: column; position: relative; transition: transform var(--t-base); } .product-card:hover { transform: translateY(-4px); } /* Image — pas de bordure, coins bruts */ .product-card__img-wrap { display: block; aspect-ratio: 13/18; overflow: hidden; background: var(--bg-dark-alt); position: relative; } .product-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.22,.61,.36,1); } .product-card:hover .product-card__img { transform: scale(1.06); } .product-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Ruban diagonal "Sélection" lemonade */ .product-card__ribbon { position: absolute; top: 18px; left: -46px; z-index: 3; display: flex; align-items: center; justify-content: center; min-width: 132px; height: 27px; padding-inline: 10px; background: var(--lemonade); color: var(--noir); border: 1px solid rgba(29,29,27,0.12); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; transform: rotate(-45deg); box-shadow: 0 4px 12px rgba(0,0,0,0.35); pointer-events: none; } /* Overlay + bouton ajout au panier au survol */ .product-card__overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: var(--s4); background: linear-gradient(to top, rgba(20,20,18,0.78), rgba(20,20,18,0) 55%); opacity: 0; transition: opacity var(--t-base); pointer-events: none; } .product-card:hover .product-card__overlay { opacity: 1; pointer-events: auto; } .product-card__add { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; padding: 13px 18px; background: var(--lemonade); color: var(--noir); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.03em; transform: translateY(14px); transition: transform var(--t-base), background var(--t-base); } .product-card:hover .product-card__add { transform: translateY(0); } .product-card__add:hover { background: var(--blanc); } .product-card__body { padding: var(--s4) 0 0; display: flex; flex-direction: column; flex: 1; } .product-card__cat { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .product-card__title { font-size: var(--text-md); font-weight: 700; color: var(--blanc); margin-bottom: var(--s3); line-height: 1.25; letter-spacing: -0.01em; } .product-card__title a { color: inherit; } .product-card__title a:hover { color: var(--lemonade); } .product-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .product-card__price { font-size: var(--text-lg); font-weight: 700; color: var(--blanc); } /* Variant fond clair — boutique, produits similaires (fiche produit) */ .product-card--shop .product-card__img-wrap { background: var(--bg-light); } .product-card--shop .product-card__cat { color: var(--vert-mousse); } .product-card--shop .product-card__title { color: var(--text-on-light); margin-bottom: 4px; } .product-card--shop .product-card__title a:hover { color: var(--sable); } .product-card--shop .product-card__footer { margin-top: 0; } .product-card--shop .product-card__price { color: var(--sable); } .product-card--shop .product-card__unit { font-size: var(--text-sm); color: var(--text-on-light-dim); } .product-card__price .amount { color: inherit; } .product-card__unit { font-size: var(--text-xs); color: var(--text-on-dark-dim); font-weight: 500; } /* ── 16. CTA SHOP (3 catégories + bandeau) ────────────────── */ .shop-cta { background: var(--bg-darker); } .shop-cta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-bottom: var(--s4); } .pages-cta__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); } @media (max-width: 900px) { .pages-cta__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .pages-cta__grid { grid-template-columns: 1fr; } } .cat-card { position: relative; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s7) var(--s6) var(--s6); isolation: isolate; } .cat-card__bg { position: absolute; inset: 0; z-index: -2; } .cat-card__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.22,.61,.36,1); } .cat-card:hover .cat-card__bg img { transform: scale(1.08); } .cat-card__overlay { position: absolute; inset: 0; z-index: -1; transition: opacity var(--t-base); } /* chacun sa couleur de charte */ .cat-card--cafe .cat-card__overlay { background: linear-gradient(to top, rgba(20,20,18,0.92) 8%, rgba(29,29,27,0.55) 60%, rgba(29,29,27,0.35)); } .cat-card--aromatise .cat-card__overlay { background: linear-gradient(to top, rgba(94,80,46,0.94) 8%, rgba(184,168,122,0.45) 60%, rgba(205,194,148,0.25)); } .cat-card--the .cat-card__overlay { background: linear-gradient(to top, rgba(48,60,52,0.94) 8%, rgba(131,146,128,0.5) 60%, rgba(187,201,187,0.25)); } .cat-card:hover .cat-card__overlay { opacity: 0.86; } .cat-card__tag { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; margin-bottom: var(--s4); color: var(--noir); } .cat-card--cafe .cat-card__tag { background: var(--lemonade); } .cat-card--aromatise .cat-card__tag { background: var(--sable); } .cat-card--the .cat-card__tag { background: var(--vert-sauge); } .cat-card__title { font-size: var(--text-xl); font-weight: 700; color: var(--blanc); margin-bottom: var(--s2); letter-spacing: -0.01em; } .cat-card__text { font-size: var(--text-sm); color: rgba(255,255,255,0.82); margin-bottom: var(--s5); max-width: 36ch; } .cat-card__link { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--blanc); } .cat-card__link svg { transition: transform var(--t-base); } .cat-card:hover .cat-card__link svg { transform: translateX(5px); } /* Bandeau pleine largeur vers le shop */ .shop-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; padding: var(--s7) var(--s8); background: linear-gradient(120deg, rgba(20,20,18,0.92), rgba(29,29,27,0.7)), var(--vert-mousse); } .shop-banner__content { position: relative; z-index: 1; } .shop-banner__title { font-size: var(--text-xl); font-weight: 700; color: var(--blanc); letter-spacing: -0.01em; } .shop-banner__title span { color: var(--lemonade); font-weight: 700; } .shop-banner__text { font-size: var(--text-sm); color: rgba(255,255,255,0.78); margin-top: 6px; } /* ── 17. HISTOIRE (full-width, photo + texte + infos, 3 col) ── */ .histoire { background: var(--bg-sand); overflow: hidden; } .histoire__inner { display: grid; grid-template-columns: 0.85fr 0.95fr 0.7fr; gap: 0; align-items: stretch; min-height: 440px; } .histoire__img-wrap { position: relative; overflow: hidden; background: rgba(29,29,27,0.1); min-height: 340px; } .histoire__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(.22,.61,.36,1); } .histoire__inner:hover .histoire__img { transform: scale(1.04); } .histoire__img-tag { position: absolute; left: var(--s6); bottom: var(--s6); z-index: 2; background: var(--noir); color: var(--lemonade); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 18px; } .histoire__content { display: flex; flex-direction: column; gap: var(--s3); padding: clamp(28px,3.5vw,52px); background: var(--bg-light); justify-content: center; } .histoire__h2 { font-size: var(--text-2xl); font-weight: 700; color: var(--text-on-light); line-height: 1.12; letter-spacing: -0.015em; } .histoire__text { font-size: var(--text-base); color: var(--text-on-light-muted); line-height: 1.6; } .histoire__actions { margin-top: var(--s1); } /* Colonne infos (horaires + nous trouver) — 3e colonne, fond plus clair pour la différencier */ .histoire__content--infos { background: var(--blanc); border-left: 1px solid var(--border-light); gap: var(--s6); } .histoire__infos-block + .histoire__infos-block { padding-top: var(--s5); border-top: 1px solid var(--border-light); } .histoire__infos-title { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vert-mousse); margin-bottom: var(--s3); } .histoire__hor-row { display: flex; justify-content: space-between; gap: var(--s3); padding: 4px 0; font-size: var(--text-sm); } .histoire__hor-day { color: var(--text-on-light); font-weight: 500; } .histoire__hor-time { color: var(--text-on-light-muted); } .histoire__hor-time--closed { color: var(--text-on-light-dim); font-style: italic; } .histoire__contact { display: flex; flex-direction: column; gap: var(--s3); } .histoire__contact-item { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-sm); color: var(--text-on-light); } .histoire__contact-item svg { color: var(--vert-mousse); flex-shrink: 0; } .histoire__contact-item:hover { color: var(--vert-mousse); } .histoire__adresse { font-size: var(--text-sm); color: var(--text-on-light-muted); line-height: 1.5; margin-bottom: var(--s3); } /* ── 18. AVIS (4 avis, 1500px) ────────────────────────────── */ .avis { background: var(--bg-white); } .avis__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); } .avis-card { background: var(--bg-light); padding: var(--s6); border-top: 3px solid var(--sable); transition: transform var(--t-base), box-shadow var(--t-base); display: flex; flex-direction: column; } .avis-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); } .avis-card__stars { color: var(--sable); font-size: var(--text-md); margin-bottom: var(--s4); letter-spacing: 3px; } .avis-card__text { font-size: var(--text-base); color: var(--text-on-light); line-height: var(--leading); font-style: italic; margin-bottom: var(--s5); flex: 1; } .avis-card__name { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vert-mousse); } /* ── 19. BLOG (full-width) ────────────────────────────────── */ .blog { background: var(--bg-light); } .blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); } .blog-card { background: var(--bg-white); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t-base), box-shadow var(--t-base); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } .blog-card__img-wrap { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-sand); position: relative; } .blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.22,.61,.36,1); } .blog-card:hover .blog-card__img { transform: scale(1.05); } .blog-card__body { padding: var(--s5) var(--s6) var(--s6); display: flex; flex-direction: column; flex: 1; } .blog-card__date { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vert-mousse); margin-bottom: var(--s3); } .blog-card__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s3); line-height: 1.25; letter-spacing: -0.01em; } .blog-card__title a { color: inherit; } .blog-card__title a:hover { color: var(--vert-mousse); } .blog-card__excerpt { font-size: var(--text-sm); color: var(--text-on-light-muted); line-height: var(--leading); flex: 1; } .blog-card__more { margin-top: var(--s4); font-size: var(--text-sm); font-weight: 700; color: var(--noir); display: inline-flex; align-items: center; gap: 6px; } .blog-card__more svg { transition: transform var(--t-base); } .blog-card:hover .blog-card__more svg { transform: translateX(4px); } /* ── 20. FOOTER ───────────────────────────────────────────── */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--border-dark); padding-top: var(--s8); } .footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s7); padding-bottom: var(--s7); border-bottom: 1px solid var(--border-dark); } .footer__brand-name { font-size: var(--text-lg); font-weight: 700; color: var(--blanc); margin-bottom: var(--s3); } .footer__brand-text { font-size: var(--text-base); color: rgba(255,255,255,0.82); line-height: var(--leading); margin-bottom: var(--s4); max-width: 42ch; } .footer__brand-contact { display: flex; flex-direction: column; gap: var(--s3); } .footer__brand-contact a, .footer__brand-contact span { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--text-base); color: rgba(255,255,255,0.9); transition: color var(--t-fast); } .footer__brand-contact svg { flex-shrink: 0; color: var(--accent); } .footer__brand-contact a:hover { color: var(--lemonade); } .footer__col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid rgba(205,194,148,0.2); } .footer__links { display: flex; flex-direction: column; gap: var(--s3); } .footer__links a { font-size: var(--text-base); color: rgba(255,255,255,0.85); transition: color var(--t-fast); } .footer__links a:hover { color: var(--lemonade); } .footer__hor-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .footer__hor-row:last-child { border-bottom: none; } .footer__hor-day { font-size: var(--text-base); color: rgba(255,255,255,0.85); } .footer__hor-time { font-size: var(--text-base); color: rgba(255,255,255,0.55); font-style: italic; } .footer__hor-time--open { color: rgba(255,255,255,0.88); font-style: normal; font-weight: 500; } .footer__social { display: flex; gap: var(--s3); margin-top: var(--s5); } .footer__social-link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-f); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); transition: all var(--t-base); } .footer__social-link:hover { border-color: var(--lemonade); color: var(--lemonade); background: rgba(246,238,173,0.06); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-block: var(--s5); flex-wrap: wrap; gap: var(--s4); } .footer__copy { font-size: var(--text-sm); color: rgba(255,255,255,0.6); } .footer__credit { color: rgba(255,255,255,0.32); } .footer__credit-link { color: rgba(255,255,255,0.45); text-decoration: none; transition: color var(--t-fast); } .footer__credit-link:hover { color: #fe7815; } .footer__legal { display: flex; gap: var(--s5); } .footer__legal a { font-size: var(--text-sm); color: rgba(255,255,255,0.6); transition: color var(--t-fast); } .footer__legal a:hover { color: rgba(255,255,255,0.8); } /* ── 21. BREADCRUMB ────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--text-sm); margin-bottom: var(--s5); } .breadcrumb a { color: var(--text-on-light-muted); transition: color var(--t-fast); } .breadcrumb a:hover { color: var(--vert-mousse); } .breadcrumb__sep { color: var(--text-on-light-dim); } .breadcrumb__current { color: var(--text-on-light); font-weight: 500; } .breadcrumb--dark a { color: rgba(255,255,255,0.55); } .breadcrumb--dark a:hover { color: var(--lemonade); } .breadcrumb--dark .breadcrumb__sep { color: rgba(255,255,255,0.25); } .breadcrumb--dark .breadcrumb__current { color: var(--blanc); } /* ── 22. BOUTIQUE — CATALOGUE ──────────────────────────────── */ .shop-header { background: var(--bg-darker); padding-block: var(--s7) var(--s8); position: relative; overflow: hidden; } .shop-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 320px at 85% -20%, rgba(246,238,173,0.05), transparent 70%); pointer-events: none; } .shop-header__title { font-size: var(--text-2xl); font-weight: 700; color: var(--blanc); letter-spacing: -0.015em; margin-top: var(--s2); position: relative; z-index: 1; } .shop-header__desc { font-size: var(--text-base); color: rgba(255,255,255,0.65); max-width: 640px; margin-top: var(--s4); line-height: var(--leading); position: relative; z-index: 1; } .shop { background: var(--bg-white); } .shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--s8); align-items: start; } .shop-sidebar { position: sticky; top: calc(var(--nav-h) + var(--s5)); background: var(--bg-light); padding: var(--s6); } .shop-mobile-filter-toggle { display: none; } .shop-filter-group { margin-bottom: var(--s7); } .shop-filter-group:last-child { margin-bottom: 0; } .shop-filter-title { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vert-mousse); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--border-light); } .shop-filter-list { display: flex; flex-direction: column; gap: 3px; } .shop-filter-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 10px 12px; font-size: var(--text-base); color: var(--text-on-light-muted); border-left: 3px solid transparent; transition: all var(--t-fast); } .shop-filter-list__item:hover { color: var(--text-on-light); background: var(--bg-white); border-left-color: var(--border-light); } .shop-filter-list__item.is-active { color: var(--text-on-light); font-weight: 700; background: var(--bg-white); border-left-color: var(--sable); } .shop-filter-list__count { font-size: var(--text-xs); color: var(--text-on-light-dim); background: var(--bg-white); padding: 2px 7px; } .shop-filter-list__item:hover .shop-filter-list__count, .shop-filter-list__item.is-active .shop-filter-list__count { background: var(--bg-light); } .blog-sidebar__recent { display: flex; flex-direction: column; gap: var(--s4); } .blog-sidebar__recent li { padding-bottom: var(--s4); border-bottom: 1px solid var(--border-light); } .blog-sidebar__recent li:last-child { padding-bottom: 0; border-bottom: none; } .blog-sidebar__recent a { font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); line-height: 1.4; } .blog-sidebar__recent a:hover { color: var(--vert-mousse); } /* Sidebar — CTA boutique + sélection produits (sur fond légèrement distinct du bloc filtres) */ .blog-sidebar__cta-text { font-size: var(--text-sm); color: var(--text-on-light-muted); line-height: 1.5; margin-bottom: var(--s4); } .blog-sidebar__cta-btn { display: flex; width: 100%; } .blog-sidebar__products { display: flex; flex-direction: column; gap: var(--s2); margin: 0 calc(var(--s3) * -1); } /* Fiche article — layout contenu + sidebar (sidebar à DROITE, inverse de .shop-layout) */ .article-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--s8); align-items: start; } .article-main { min-width: 0; } .article-main .page-content { max-width: none; } /* ── 18bis. NOUS TROUVER (bande condensée, bas de page) ────── */ .find-us-band { background: var(--bg-light); padding-block: var(--s8); } .find-us-band__inner { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; } .find-us-band__about { display: flex; align-items: center; gap: var(--s6); flex: 1 1 380px; min-width: 0; } .find-us-band__photo { flex-shrink: 0; width: 168px; height: 168px; overflow: hidden; background: var(--bg-white); } .find-us-band__img { width: 100%; height: 100%; object-fit: cover; display: block; } .find-us-band__intro { min-width: 0; } .find-us-band__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-on-light); margin: var(--s2) 0 var(--s3); } .find-us-band__text { font-size: var(--text-sm); color: var(--text-on-light-muted); line-height: 1.5; max-width: 360px; } .find-us-band__label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vert-mousse); margin-bottom: var(--s4); } .find-us-band__hours { flex: 0 1 220px; } .find-us-band__address { flex: 0 1 220px; } .find-us-band__cta { flex: 0 0 auto; } .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); padding-bottom: var(--s5); border-bottom: 1px solid var(--border-light); flex-wrap: wrap; } .shop-toolbar__count { font-size: var(--text-sm); color: var(--text-on-light-muted); } .shop-toolbar__sort select { font-size: var(--text-sm); font-weight: 500; color: var(--text-on-light); padding: 10px 16px; border: 1px solid var(--border-light); background: var(--bg-light); cursor: pointer; } .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); } .shop-pagination, .woocommerce-pagination, .pagination { display: flex; align-items: center; justify-content: center; margin-top: var(--s8); } .shop-pagination ul.page-numbers, .woocommerce-pagination ul.page-numbers, .pagination ul.page-numbers { display: flex; align-items: center; justify-content: center; gap: var(--s2); list-style: none; } .shop-pagination .page-numbers, .woocommerce-pagination .page-numbers, .pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light-muted); border: 1px solid var(--border-light); transition: all var(--t-base); } .shop-pagination .page-numbers:hover, .woocommerce-pagination .page-numbers:hover, .pagination .page-numbers:hover { border-color: var(--vert-mousse); color: var(--vert-mousse); } .shop-pagination .page-numbers.current, .woocommerce-pagination .page-numbers.current, .pagination .page-numbers.current { background: var(--noir); color: var(--blanc); border-color: var(--noir); } .shop-pagination .page-numbers.dots, .woocommerce-pagination .page-numbers.dots, .pagination .page-numbers.dots { border-color: transparent; } .shop-empty { text-align: center; padding: var(--s9) var(--s5); } .shop-empty p { font-size: var(--text-base); color: var(--text-on-light-muted); margin-bottom: var(--s5); } /* ── 23. FICHE PRODUIT ─────────────────────────────────────── */ .product-single { background: var(--bg-white); padding-block: var(--s7) var(--s9); } .product-single__layout { display: grid; grid-template-columns: 0.85fr 1fr; gap: var(--s8); align-items: start; margin-bottom: var(--s9); } .product-gallery__main { aspect-ratio: 13/18; overflow: hidden; background: var(--bg-light); position: relative; } .product-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; } .product-gallery__thumbs { display: flex; gap: var(--s3); margin-top: var(--s4); flex-wrap: wrap; } .product-gallery__thumb { width: 76px; aspect-ratio: 13/18; overflow: hidden; padding: 0; border: 1px solid var(--border-light); opacity: 0.6; cursor: pointer; transition: all var(--t-base); background: none; } .product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-gallery__thumb:hover { opacity: 0.85; } .product-gallery__thumb.is-active { opacity: 1; border-color: var(--vert-mousse); } .product-info__cat { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vert-mousse); margin-bottom: var(--s3); } .product-info__title { font-size: var(--text-2xl); font-weight: 700; color: var(--text-on-light); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: var(--s4); } .product-info__rating { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); } .product-info__stars { color: var(--sable); font-size: var(--text-base); letter-spacing: 2px; } .product-info__rating-count { font-size: var(--text-sm); color: var(--text-on-light-muted); } .product-info__price { font-size: 34px; font-weight: 700; color: var(--noir); margin-bottom: var(--s2); position: relative; padding-bottom: var(--s3); } .product-info__price del { color: var(--text-on-light-dim); font-weight: 500; font-size: var(--text-md); margin-right: var(--s3); } .product-info__price ins { text-decoration: none; } .product-info__price-note { font-size: var(--text-xs); color: var(--text-on-light-dim); margin: -2px 0 var(--s5); } /* Prix/disponibilité injectés par le script natif de variation WooCommerce */ .single_variation_wrap { margin-bottom: var(--s2); min-height: 38px; } .woocommerce-variation-description { font-size: var(--text-sm); color: var(--text-on-light-muted); margin-bottom: var(--s3); } .woocommerce-variation-price .price { font-size: 34px; font-weight: 700; color: var(--noir); } .woocommerce-variation-price .price del { color: var(--text-on-light-dim); font-weight: 500; font-size: var(--text-md); margin-right: var(--s3); } .woocommerce-variation-price .price ins { text-decoration: none; } .woocommerce-variation-availability { font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); margin-top: var(--s2); } .woocommerce-variation-availability .stock.in-stock { color: var(--vert-mousse); } .single_add_to_cart_button:disabled, .single_add_to_cart_button.disabled, .single_add_to_cart_button.wc-variation-is-unavailable { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .product-info__desc { font-size: var(--text-base); color: var(--text-on-light-muted); line-height: var(--leading); margin-bottom: var(--s6); } .product-info__variation { margin-bottom: var(--s5); } .product-info__variation-label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s3); } .product-info__variation-select { width: 100%; max-width: 320px; padding: 13px 16px; font-size: var(--text-base); border: 1px solid var(--border-light); background: var(--bg-light); color: var(--text-on-light); } .product-info__row { display: flex; align-items: stretch; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; } .product-info__qty { display: flex; align-items: center; border: 1px solid var(--border-light); } .product-info__qty-btn { width: 44px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-on-light); transition: background var(--t-fast); } .product-info__qty-btn:hover { background: var(--bg-light); } .product-info__qty-input { width: 48px; height: 54px; text-align: center; font-size: var(--text-base); font-weight: 700; color: var(--text-on-light); border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); -moz-appearance: textfield; appearance: textfield; } .product-info__qty-input::-webkit-outer-spin-button, .product-info__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .product-info__add-btn { flex: 1; min-width: 220px; } .product-info__highlights { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); } .product-info__highlights li { display: flex; align-items: center; gap: var(--s3); font-size: var(--text-sm); color: var(--text-on-light-muted); } .product-info__highlights svg { color: var(--vert-mousse); flex-shrink: 0; } .product-info__meta { padding-top: var(--s5); border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 6px; } .product-info__meta p { font-size: var(--text-sm); color: var(--text-on-light-dim); } /* Profil (badge unique) + notes de dégustation / certifications (tags) */ .product-info .h2-rule { margin-bottom: var(--s4); } .product-info__profil { font-size: var(--text-sm); font-weight: 700; color: var(--vert-mousse); } .product-info__notes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s5); } .tag-note { display: inline-block; font-size: var(--text-sm); font-weight: 700; color: var(--blanc); background: var(--vert-mousse); padding: 6px 14px; } /* Intensité (1 à 5 grains) */ .product-info__intensity { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); } .product-info__intensity-label { font-size: var(--text-sm); color: var(--text-on-light-muted); } .product-info__intensity-beans { display: flex; gap: 4px; } .product-info__intensity-beans svg { color: var(--vert-mousse); } .product-info__intensity-beans svg.is-empty { color: var(--border-light); } /* Bloc Origine & terroir — pleine largeur sous la galerie/infos */ .product-terroir { background: var(--bg-light); padding: var(--s6) var(--s7); margin-bottom: var(--s7); } .product-terroir__title { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vert-mousse); margin-bottom: var(--s5); } .product-terroir__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s5); } .product-terroir__item { display: flex; align-items: flex-start; gap: var(--s3); } .product-terroir__icon { color: var(--vert-mousse); flex-shrink: 0; margin-top: 2px; } .product-terroir__label { font-size: var(--text-xs); color: var(--text-on-light-dim); margin-bottom: 2px; } .product-terroir__value { font-size: var(--text-base); font-weight: 700; color: var(--text-on-light); } /* FAQ produit (onglet) */ .product-faq__item { margin-bottom: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--border-light); } .product-faq__item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .product-faq__q { font-size: var(--text-base); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s2); } .product-faq__a { font-size: var(--text-base); color: var(--text-on-light-muted); line-height: var(--leading); } /* Badge corner sur la galerie produit (fiche produit) */ .product-gallery__badge { position: absolute; top: var(--s4); left: var(--s4); z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 96px; height: 30px; padding-inline: 14px; background: var(--lemonade); color: var(--noir); border: 1px solid rgba(29,29,27,0.12); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* "Complète bien avec" — cross-sell */ .cross-sell { background: var(--bg-white); } /* ── Contenu produit : 2 colonnes (description | infos+FAQ) ───────── */ .product-content { } .product-content__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; } .product-content__side { display: flex; flex-direction: column; gap: var(--s7); } .product-content__side .product-section + .product-section { margin-top: 0; padding-top: var(--s7); border-top: 1px solid var(--border-light); } .product-content__grid + .product-section--reviews { margin-top: var(--s8); padding-top: var(--s8); border-top: 1px solid var(--border-light); } .product-section__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-on-light); letter-spacing: -0.01em; margin-bottom: var(--s5); padding-bottom: var(--s4); position: relative; } .product-section__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--sable); } .product-section__body { font-size: var(--text-base); color: var(--text-on-light-muted); line-height: var(--leading); } .product-section__body--prose p { margin-bottom: var(--s4); } .product-section__body--prose p:last-child { margin-bottom: 0; } .product-section__body--prose strong { color: var(--text-on-light); } .product-table { width: 100%; border-collapse: collapse; } .product-table th, .product-table td { text-align: left; padding: var(--s3) var(--s3); border-bottom: 1px solid var(--border-light); font-size: var(--text-sm); } .product-table th { color: var(--text-on-light); font-weight: 700; width: 45%; } .product-table td { color: var(--text-on-light-muted); } /* ── Avis clients (WooCommerce natif, restylé) — compact, en grille ── */ .woocommerce-Reviews-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-on-light); letter-spacing: -0.01em; margin-bottom: var(--s5); grid-column: 1; } .woocommerce-noreviews { font-size: var(--text-base); color: var(--text-on-light-muted); margin-bottom: var(--s5); grid-column: 1; } #comments { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s7); align-items: start; } .commentlist { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); margin: 0; padding: 0; grid-column: 1; align-self: start; } .comment_container { display: flex; gap: var(--s3); background: var(--bg-light); padding: var(--s4) var(--s5); border-top: 3px solid var(--sable); height: 100%; } .comment_container .avatar { width: 34px; height: 34px; flex-shrink: 0; } .comment-text { flex: 1; min-width: 0; } .comment-text .meta { font-size: var(--text-xs); color: var(--text-on-light-dim); margin: 0 0 var(--s2); } .woocommerce-review__author { color: var(--vert-mousse); font-weight: 700; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.06em; } .woocommerce-review__dash { margin: 0 3px; } .description p { font-size: var(--text-sm); color: var(--text-on-light); font-style: italic; line-height: 1.5; margin: 0; } /* Étoiles — affichage (avis existants) : double calque texte clippé en %, sans webfont */ .star-rating { position: relative; display: inline-block; width: 70px; height: 14px; overflow: hidden; font-size: 13px; line-height: 1; letter-spacing: 2px; color: var(--border-light); font-style: normal; margin-bottom: var(--s2); } .star-rating::before { content: "★★★★★"; } .star-rating span { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--sable); } .star-rating span::before { content: "★★★★★"; } /* Formulaire d'avis — compact */ #review_form_wrapper { background: var(--bg-light); padding: var(--s6); grid-column: 2; grid-row: 1 / span 2; } #reply-title { font-size: var(--text-md); font-weight: 700; color: var(--text-on-light); margin: 0 0 var(--s4); } #reply-title small a { font-size: var(--text-sm); font-weight: 400; color: var(--vert-mousse); margin-left: var(--s3); } .comment-form-rating { margin-bottom: var(--s4); } .comment-form-rating label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s2); } .comment-form-rating select { position: absolute; opacity: 0; pointer-events: none; } .comment-form-rating p.stars { display: flex; gap: 4px; margin: 0; } .comment-form-rating p.stars a { display: inline-block; font-size: 0; width: 24px; height: 24px; position: relative; color: var(--border-light); transition: color var(--t-fast), transform var(--t-fast); } .comment-form-rating p.stars a::before { content: "★"; font-size: 22px; line-height: 1; position: absolute; inset: 0; color: inherit; } .comment-form-rating p.stars a:hover { transform: scale(1.12); } .comment-form-rating p.stars a.active { color: var(--sable); } .comment-form-rating p.stars a.selected.active { color: var(--vert-mousse); } .comment-form-comment label, .comment-form-author label, .comment-form-email label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s2); } .comment-form-comment textarea, .comment-form-author input, .comment-form-email input { width: 100%; padding: 11px 14px; font-size: var(--text-base); font-family: inherit; border: 1px solid var(--border-light); background: var(--bg-white); color: var(--text-on-light); } .comment-form-comment { margin-bottom: var(--s4); } .comment-form-comment textarea { min-height: 100px; resize: vertical; } .comment-form-author, .comment-form-email { display: inline-block; width: 48%; vertical-align: top; margin-bottom: var(--s4); } .comment-form-author { margin-right: var(--s3); } .comment-notes, .comment-form p.must-log-in { font-size: var(--text-sm); color: var(--text-on-light-dim); margin-bottom: var(--s4); } .form-submit { margin: 0; } .form-submit input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; background: var(--noir); color: var(--blanc); border: none; padding: 13px 28px; font-size: var(--text-base); font-weight: 700; letter-spacing: 0.01em; cursor: pointer; transition: background var(--t-base), transform var(--t-base); } .form-submit input[type="submit"]:hover { background: var(--vert-mousse); transform: translateY(-2px); } /* ── 24. PAGE GÉNÉRIQUE (Mentions légales, CGV, À propos…) ── */ .shop-header, .page-header { background: var(--bg-darker); padding-block: var(--s7) var(--s8); position: relative; overflow: hidden; } .shop-header::before, .page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 320px at 85% -20%, rgba(246,238,173,0.05), transparent 70%); pointer-events: none; } .shop-header__title, .page-header__title { font-size: var(--text-2xl); font-weight: 700; color: var(--blanc); letter-spacing: -0.015em; margin-top: var(--s2); position: relative; z-index: 1; } .shop-header__desc, .page-header__desc { font-size: var(--text-base); color: rgba(255,255,255,0.65); max-width: 640px; margin-top: var(--s4); line-height: var(--leading); position: relative; z-index: 1; } .page-content { max-width: 760px; font-size: var(--text-base); color: var(--text-on-light-muted); line-height: var(--leading); } .page-content h2 { font-size: var(--text-xl); font-weight: 700; color: var(--text-on-light); letter-spacing: -0.01em; margin: var(--s7) 0 var(--s4); } .page-content h2:first-child { margin-top: 0; } .page-content h3 { font-size: var(--text-lg); font-weight: 700; color: var(--text-on-light); margin: var(--s6) 0 var(--s3); } .page-content p { margin-bottom: var(--s4); } .page-content ul, .page-content ol { margin: 0 0 var(--s4) var(--s5); } .page-content li { margin-bottom: var(--s2); } .page-content a { color: #FFF; text-decoration: none; } .page-content a:hover { color: #F6EEAD; } .page-content .product-card__title a { color: inherit; } .page-content .product-card__title a:hover { color: var(--lemonade); } .page-content .product-card__add { color: var(--noir); } .page-content .product-card__add:hover { color: var(--noir); } .page-content .btn--dark { color: var(--lemonade); } .page-content .btn--dark:hover { color: var(--blanc); } .page-content .btn--lemon, .page-content .btn--lemon:hover, .page-content .btn--white, .page-content .btn--white:hover, .page-content .btn--sand, .page-content .btn--sand:hover { color: var(--noir); } .page-content strong { color: var(--text-on-light); } .page-content blockquote { border-left: 3px solid var(--sable); padding-left: var(--s5); margin: var(--s5) 0; font-style: italic; color: var(--text-on-light); } .page-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--s5); } .page-content table th, .page-content table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-light); text-align: left; font-size: var(--text-sm); } .page-content table th { color: var(--text-on-light); font-weight: 700; } .page-content img { max-width: 100%; height: auto; margin: 0px; } /* ── 25. CONTACT ────────────────────────────────────────────── */ .contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s8); align-items: start; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); } .contact-form__field { margin-bottom: var(--s5); } .contact-form__field label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s3); } .contact-form__field input, .contact-form__field textarea { width: 100%; padding: 13px 16px; font-size: var(--text-base); font-family: inherit; border: 1px solid var(--border-light); background: var(--bg-light); color: var(--text-on-light); } .contact-form__field textarea { min-height: 160px; resize: vertical; } .contact-form__honeypot { position: absolute; left: -9999px; top: -9999px; } .contact-success { display: flex; align-items: flex-start; gap: var(--s4); background: var(--bg-light); border-top: 3px solid var(--vert-mousse); padding: var(--s6); } .contact-success svg { color: var(--vert-mousse); flex-shrink: 0; margin-top: 2px; } .contact-success p { margin: 0; font-size: var(--text-base); color: var(--text-on-light); } .contact-errors { background: var(--bg-light); border-top: 3px solid var(--sable); padding: var(--s5) var(--s6); margin-bottom: var(--s6); } .contact-errors ul { margin: 0; padding-left: var(--s5); } .contact-errors li { color: var(--text-on-light); font-size: var(--text-sm); } .contact-info { display: flex; flex-direction: column; gap: var(--s5); } .contact-info__block { background: var(--bg-light); padding: var(--s6); } .contact-info__title { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vert-mousse); margin-bottom: var(--s4); } .contact-info__address { font-size: var(--text-base); color: var(--text-on-light); line-height: 1.5; margin-bottom: var(--s4); } .contact-info__item { display: flex; align-items: center; gap: var(--s3); font-size: var(--text-base); color: var(--text-on-light); margin-bottom: var(--s3); transition: color var(--t-fast); } .contact-info__item svg { color: var(--vert-mousse); flex-shrink: 0; } .contact-info__item:last-child { margin-bottom: 0; } .contact-info__item:hover { color: var(--vert-mousse); } .contact-info__map { overflow: hidden; filter: grayscale(0.15); line-height: 0; } .contact-info__map iframe { display: block; width: 100%; border: 0; } /* ── 25bis. BLOG — ARTICLE ──────────────────────────────────── */ .blog-single__meta { font-size: var(--text-sm); color: rgba(255,255,255,0.6); margin-top: var(--s4); position: relative; z-index: 1; } .blog-single__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--border-light); } /* Commentaires natifs WordPress (différents des avis WooCommerce) */ .comments-area { margin-top: var(--s8); padding-top: var(--s8); border-top: 1px solid var(--border-light); max-width: 760px; } .comments-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s6); } .comment-list { list-style: none; margin: 0 0 var(--s7); padding: 0; display: flex; flex-direction: column; gap: var(--s4); } .comment-list .children { list-style: none; margin: var(--s4) 0 0; padding-left: var(--s7); } .comment-body { background: var(--bg-light); border-top: 3px solid var(--sable); padding: var(--s5) var(--s6); } .comment-author { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); } .comment-author .avatar { width: 36px; height: 36px; flex-shrink: 0; } .comment-author .fn { font-style: normal; font-weight: 700; color: var(--vert-mousse); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.06em; } .comment-metadata { font-size: var(--text-xs); color: var(--text-on-light-dim); margin-bottom: var(--s3); } .comment-metadata a { color: inherit; } .comment-content p { font-size: var(--text-base); color: var(--text-on-light); line-height: var(--leading); margin-bottom: var(--s3); } .comment-content p:last-child { margin-bottom: 0; } .comment .reply { margin-top: var(--s3); } .comment-reply-link { font-size: var(--text-sm); font-weight: 700; color: var(--vert-mousse); } .comment-reply-link:hover { color: var(--noir); } .comment-form-url { margin-bottom: var(--s5); } .comment-form-url label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s2); } .comment-form-url input, .comment-form-author input, .comment-form-email input { width: 100%; padding: 13px 16px; font-size: var(--text-base); font-family: inherit; border: 1px solid var(--border-light); background: var(--bg-white); color: var(--text-on-light); } .comment-navigation { margin-top: var(--s7); } .comment-navigation .nav-links { display: flex; align-items: center; justify-content: center; gap: var(--s4); flex-wrap: wrap; } .comment-navigation .page-numbers, .comment-navigation a { font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light-muted); } .comment-navigation a:hover { color: var(--vert-mousse); } .comment-navigation .page-numbers.current { color: var(--noir); } /* ── 26. NOTICES WOOCOMMERCE (messages, erreurs, info) ─────── */ .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 var(--s6); padding: var(--s5) var(--s6); background: var(--bg-light); font-size: var(--text-sm); color: var(--text-on-light); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); } .woocommerce-message, .woocommerce-info { border-top: 3px solid var(--vert-mousse); } .woocommerce-error { border-top: 3px solid var(--sable); } .woocommerce-error li { list-style: none; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a, .woocommerce-remove-coupon { font-weight: 700; color: var(--text-on-light); text-decoration: underline; transition: color var(--t-fast); } .woocommerce-message a:hover, .woocommerce-info a:hover, .woocommerce-error a:hover, .woocommerce-remove-coupon:hover { color: var(--vert-mousse); } .woocommerce-message .button.wc-forward { margin-left: auto; } /* ── 27. PANIER ───────────────────────────────────────────── */ .cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s4); padding: var(--s9) 0; max-width: 480px; margin-inline: auto; } .cart-empty__icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: var(--radius-f); background: var(--bg-light); color: var(--vert-mousse); } .cart-empty__icon svg { width: 30px; height: 30px; } .cart-empty__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-on-light); } .cart-empty__desc { font-size: var(--text-base); color: var(--text-on-light-muted); margin-bottom: var(--s2); } .cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s8); align-items: start; } /* Tableau panier */ .cart-table { border-top: 1px solid var(--border-light); } .cart-table__head { display: grid; grid-template-columns: 1fr 130px 150px 130px 44px; align-items: center; gap: var(--s4); padding-block: var(--s4); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-light-dim); border-bottom: 1px solid var(--border-light); } .cart-row { display: grid; grid-template-columns: 1fr 130px 150px 130px 44px; align-items: center; gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid var(--border-light); } .cart-row__product { display: flex; align-items: flex-start; gap: var(--s4); min-width: 0; } .cart-row__img { flex-shrink: 0; width: 56px; aspect-ratio: 13 / 18; overflow: hidden; background: var(--bg-light); display: block; } .cart-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-row__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .cart-row__info { min-width: 0; } .cart-row__title { font-size: var(--text-base); font-weight: 700; line-height: 1.3; margin-bottom: var(--s2); } .cart-row__title a { color: var(--text-on-light); transition: color var(--t-fast); } .cart-row__title a:hover { color: var(--vert-mousse); } .cart-row__meta { font-size: var(--text-xs); color: var(--text-on-light-muted); } .cart-row__meta p { margin: 0; } .cart-row__price, .cart-row__subtotal { font-size: var(--text-sm); color: var(--text-on-light); } .cart-row__subtotal { font-weight: 700; } .cart-row__remove { display: flex; align-items: center; justify-content: center; } .cart-row__remove-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text-on-light-dim); transition: all var(--t-fast); border-radius: var(--radius-f); } .cart-row__remove-btn:hover { color: var(--noir); background: var(--bg-light); } /* Stepper quantité réutilisé du gabarit produit, ajusté à la taille de ligne panier */ .cart-row__qty .product-info__qty { width: fit-content; } .cart-row__qty .product-info__qty-btn, .cart-row__qty .product-info__qty-input { height: 42px; } .cart-row__qty .product-info__qty-btn { width: 36px; } .cart-row__qty .product-info__qty-input { width: 42px; } /* Actions (coupon + mise à jour) */ .cart-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); padding-top: var(--s6); } .cart-coupon { display: flex; gap: var(--s3); } .cart-coupon input { padding: 12px 16px; font-size: var(--text-sm); font-family: inherit; border: 1px solid var(--border-light); background: var(--bg-light); color: var(--text-on-light); min-width: 200px; } .cart-actions__right { display: flex; align-items: center; gap: var(--s5); } .cart-continue { font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light-muted); text-decoration: underline; transition: color var(--t-fast); } .cart-continue:hover { color: var(--vert-mousse); } /* Récapitulatif */ .cart-summary__box { background: var(--bg-light); padding: var(--s6); position: sticky; top: calc(var(--nav-h) + var(--s5)); } .cart-summary__title { font-size: var(--text-md); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s5); } .cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-size: var(--text-sm); color: var(--text-on-light); padding-block: var(--s3); border-top: 1px solid var(--border-light); } .cart-summary__row:first-of-type { border-top: none; } .cart-summary__row--note { color: var(--text-on-light-muted); font-size: var(--text-xs); } .cart-summary__row--discount { color: var(--vert-mousse); } .cart-summary__row--total { font-size: var(--text-lg); font-weight: 700; color: var(--noir); margin-top: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--border-light); } .cart-summary__checkout { width: 100%; margin-top: var(--s6); } /* Jauge "livraison offerte" (en tête du récapitulatif) */ .cart-shipping-goal { background: var(--bg-white); padding: var(--s4) var(--s5); margin-bottom: var(--s5); border-left: 3px solid var(--sable); } .cart-shipping-goal__text { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--text-base); line-height: 1.5; color: var(--text-on-light); } .cart-shipping-goal__text svg { flex-shrink: 0; margin-top: 3px; color: var(--text-on-light-muted); } .cart-shipping-goal__text strong { font-weight: 700; } .cart-shipping-goal__text strong .amount { color: inherit; white-space: nowrap; } .cart-shipping-goal__bar { position: relative; height: 6px; margin-top: var(--s3); background: var(--border-light); overflow: hidden; } .cart-shipping-goal__fill { position: absolute; inset: 0 auto 0 0; background: var(--sable); transition: width var(--t-slow); } .cart-shipping-goal__hint { margin-top: var(--s2); font-size: var(--text-xs); color: var(--text-on-light-muted); } .cart-shipping-goal--reached .cart-shipping-goal__fill { background: var(--noir); } .cart-shipping-goal--reached .cart-shipping-goal__text svg { color: var(--noir); } /* Le bloc (div) précède les lignes : restaure l'absence de trait sur la 1re ligne */ .cart-shipping-goal + .cart-summary__row { border-top: none; } /* Cross-sell (réutilise .shop-grid / .product-card du gabarit produit) */ .cart-cross-sell { margin-top: var(--s9); padding-top: var(--s8); border-top: 1px solid var(--border-light); } /* ── 28. COMMANDE (checkout) ──────────────────────────────── */ /* Layout général : champs à gauche, récap + paiement collants à droite */ .checkout-wrap form.checkout.woocommerce-checkout { display: grid; grid-template-columns: 1fr 420px; gap: var(--s8); align-items: start; } #customer_details { grid-column: 1; grid-row: 1 / span 2; } #order_review_heading { grid-column: 2; font-size: var(--text-md); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--border-light); } #order_review { grid-column: 2; position: sticky; top: calc(var(--nav-h) + var(--s5)); background: var(--bg-light); padding: var(--s6); } /* Coordonnées (billing + shipping) — empilées verticalement dans la colonne gauche */ #customer_details.col2-set { display: block; } #customer_details .col-1 { margin-bottom: var(--s7); } .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3 { font-size: var(--text-md); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s5); } .woocommerce-additional-fields h3 { font-size: var(--text-base); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s4); } /* Champs de formulaire (form-row natifs WooCommerce) */ .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s4); } .form-row { width: 100%; margin: 0 0 var(--s5); } .form-row-first, .form-row-last { width: calc(50% - var(--s2)); } .form-row-wide { width: 100%; } .form-row label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s3); } .form-row label .required { color: var(--sable); text-decoration: none; border: none; } .form-row label .optional { color: var(--text-on-light-dim); font-weight: 500; } .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row input[type="password"], .form-row select, .form-row textarea { width: 100%; padding: 13px 16px; font-size: var(--text-base); font-family: inherit; border: 1px solid var(--border-light); background: var(--bg-white); color: var(--text-on-light); appearance: none; -webkit-appearance: none; border-radius: 0; } .form-row select { 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='%2355554F' 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 16px center; padding-right: var(--s7); } .form-row textarea { min-height: 100px; resize: vertical; } .form-row.woocommerce-invalid input, .form-row.woocommerce-invalid select { border-color: var(--sable); } .form-row .woocommerce-invalid-required-field { background: var(--bg-light); } /* Cases à cocher (créer un compte, livrer à une autre adresse, CGV) */ .woocommerce-form__label-for-checkbox.checkbox { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--text-sm); color: var(--text-on-light); cursor: pointer; font-weight: 500; } .woocommerce-form__input-checkbox { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--noir); flex-shrink: 0; } #ship-to-different-address { margin-bottom: var(--s5); } #ship-to-different-address h3 { margin: 0; border: none; } .shipping_address { padding-top: var(--s5); } /* Notes de commande */ .woocommerce-additional-fields { margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--border-light); } /* select2 / selectWoo (pays, région) — alignement de base sur nos inputs */ .select2-container { width: 100% !important; } .select2-container .select2-selection--single { height: 49px; border: 1px solid var(--border-light); border-radius: 0; background: var(--bg-white); display: flex; align-items: center; padding: 0 16px; } .select2-container .select2-selection__rendered { padding: 0; color: var(--text-on-light); font-size: var(--text-base); line-height: normal; } .select2-container .select2-selection__arrow { height: 100%; top: 0; right: 12px; } .select2-dropdown { border: 1px solid var(--border-light); border-radius: 0; font-family: var(--font); } .select2-results__option { font-size: var(--text-sm); padding: 10px 14px; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--bg-light); color: var(--text-on-light); } .select2-search--dropdown .select2-search__field { border: 1px solid var(--border-light); border-radius: 0; padding: 8px 10px; } /* Récapitulatif (override review-order.php) */ .checkout-review__items { display: flex; flex-direction: column; gap: var(--s5); margin-bottom: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--border-light); } .checkout-review__item { display: flex; align-items: flex-start; gap: var(--s3); } .checkout-review__item-img { flex-shrink: 0; width: 44px; aspect-ratio: 13 / 18; overflow: hidden; background: var(--bg-white); } .checkout-review__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .checkout-review__item-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .checkout-review__item-info { flex: 1; min-width: 0; } .checkout-review__item-name { font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); line-height: 1.3; } .checkout-review__item-qty { font-weight: 500; color: var(--text-on-light-muted); } .checkout-review__item-meta { font-size: 11px; color: var(--text-on-light-dim); margin-top: 2px; } .checkout-review__item-meta p { margin: 0; } .checkout-review__item-total { font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); flex-shrink: 0; } .checkout-review__totals { width: 100%; border-collapse: collapse; } .checkout-review__totals tbody, .checkout-review__totals tr { display: block; width: 100%; } .checkout-review__totals tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--border-light); font-size: var(--text-sm); } .checkout-review__totals tr:first-child { border-top: none; } .checkout-review__totals th { font-weight: 500; color: var(--text-on-light); text-align: left; } .checkout-review__totals td { color: var(--text-on-light); text-align: right; } .checkout-review__totals tr.cart-discount th, .checkout-review__totals tr.cart-discount td { color: var(--vert-mousse); } .checkout-review__totals tr.order-total { margin-top: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--border-light); } .checkout-review__totals tr.order-total th, .checkout-review__totals tr.order-total td { font-size: var(--text-lg); font-weight: 700; color: var(--noir); } /* Livraison (lignes injectées par cart-shipping.php, structure imposée par le cœur WC) */ .woocommerce-shipping-totals.shipping { flex-direction: column; align-items: stretch !important; gap: var(--s3); } .woocommerce-shipping-totals th { margin-bottom: var(--s2); } .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); } .woocommerce-shipping-methods li { display: flex; align-items: center; gap: var(--s3); } .woocommerce-shipping-methods input.shipping_method { width: 16px; height: 16px; accent-color: var(--noir); flex-shrink: 0; } .woocommerce-shipping-methods label { font-size: var(--text-sm); color: var(--text-on-light); } .woocommerce-shipping-destination { font-size: var(--text-xs); color: var(--text-on-light-muted); margin-top: var(--s2); } /* Paiement (payment.php natif, non surchargé — restylé via CSS uniquement) */ .woocommerce-checkout-payment { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--border-light); } .wc_payment_methods { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-direction: column; gap: var(--s3); } .wc_payment_method { background: var(--bg-white); border: 1px solid var(--border-light); padding: var(--s4); } .wc_payment_method input.input-radio { width: 16px; height: 16px; margin-right: var(--s3); accent-color: var(--noir); vertical-align: middle; } .wc_payment_method label { font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); cursor: pointer; } .payment_box { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-light); font-size: var(--text-sm); color: var(--text-on-light-muted); line-height: var(--leading); } .payment_box p:last-child { margin-bottom: 0; } .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--s5); font-size: var(--text-sm); } .woocommerce-terms-and-conditions-wrapper .form-row { margin-bottom: 0; } .woocommerce-privacy-policy-text { color: var(--text-on-light-muted); font-size: var(--text-xs); line-height: 1.6; margin-bottom: var(--s4); } .woocommerce-privacy-policy-text a { color: var(--text-on-light); text-decoration: underline; } #place_order { display: flex; align-items: center; justify-content: center; width: 100%; padding: 18px 32px; border-radius: 0; border: none; cursor: pointer; background: var(--noir); color: var(--blanc); font-size: var(--text-base); font-weight: 700; letter-spacing: 0.04em; transition: all var(--t-base); } #place_order:hover { background: #34342f; transform: translateY(-2px); } #place_order:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .woocommerce-no-available-payment-methods-message { font-size: var(--text-sm); color: var(--text-on-light-muted); } /* État "panier vide" sur /commande — réutilise le bloc .cart-empty du panier */ /* Page de remerciement (order-received) et tableau de détails de commande — markup natif WooCommerce non surchargé (order/order-details*.php), restylé uniquement en CSS. Les mêmes classes seront réutilisées par l'espace client (historique de commandes) en phase 1. */ .woocommerce-order { max-width: 760px; margin-inline: auto; } .woocommerce-thankyou-order-received { font-size: var(--text-base); color: var(--text-on-light); background: var(--bg-light); border-top: 3px solid var(--vert-mousse); padding: var(--s5) var(--s6); margin-bottom: var(--s6); } .woocommerce-thankyou-order-failed { border-top-color: var(--sable); } .woocommerce-thankyou-order-failed-actions { margin-bottom: var(--s6); } .woocommerce-thankyou-order-failed-actions .button { display: inline-flex; margin-right: var(--s3); } .woocommerce-order-overview { list-style: none; margin: 0 0 var(--s7); padding: var(--s5) var(--s6); background: var(--bg-light); display: flex; flex-wrap: wrap; gap: var(--s5); } .woocommerce-order-overview li { font-size: var(--text-sm); color: var(--text-on-light-muted); } .woocommerce-order-overview li strong { display: block; color: var(--text-on-light); font-weight: 700; margin-top: 2px; } .woocommerce-order-details__title, .woocommerce-column__title { font-size: var(--text-md); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s5); } .woocommerce-table { width: 100%; margin-bottom: var(--s7); } .woocommerce-table thead, .woocommerce-table tbody, .woocommerce-table tfoot, .woocommerce-table tr { display: block; width: 100%; } .woocommerce-table thead tr { display: none; } .woocommerce-table tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--border-light); font-size: var(--text-sm); } .woocommerce-table tbody tr:first-child { border-top: none; } .woocommerce-table th { font-weight: 500; color: var(--text-on-light); text-align: left; } .woocommerce-table td { color: var(--text-on-light); text-align: right; } .woocommerce-table tfoot tr.order-total th, .woocommerce-table tfoot tr.order-total td { font-size: var(--text-lg); font-weight: 700; color: var(--noir); } .woocommerce-table .order-actions-button { display: inline-flex; margin-left: var(--s3); } .woocommerce-customer-details { margin-top: var(--s7); } .woocommerce-columns--addresses { display: flex; flex-wrap: wrap; gap: var(--s6); } .woocommerce-column { flex: 1 1 240px; } .woocommerce-customer-details .woocommerce-customer-details--phone, .woocommerce-customer-details .woocommerce-customer-details--email { color: var(--text-on-light-muted); } .checkout-next-cta { display: flex; align-items: center; justify-content: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s7); } /* ── 29. ESPACE CLIENT (My Account) ───────────────────────── */ .myaccount-wrap .woocommerce-MyAccount-content { padding-top: var(--s7); } /* Connexion / Inscription */ #customer_login.u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; } .woocommerce-form-login h2, .woocommerce-form-register h2, #customer_login h2 { font-size: var(--text-md); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s5); } .woocommerce-form-login .form-row, .woocommerce-form-register .form-row, .woocommerce-ResetPassword .form-row, .woocommerce-EditAccountForm .form-row, .woocommerce-address-fields .form-row { margin-bottom: var(--s5); } .woocommerce-form-login label, .woocommerce-form-register label, .woocommerce-ResetPassword label, .woocommerce-EditAccountForm label, .woocommerce-address-fields label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s3); } .woocommerce-form-login .required, .woocommerce-form-register .required, .woocommerce-ResetPassword .required, .woocommerce-EditAccountForm .required, .woocommerce-address-fields .required { color: var(--sable); text-decoration: none; } .woocommerce-Input, .woocommerce-address-fields select, .woocommerce-EditAccountForm input[type="text"], .woocommerce-EditAccountForm input[type="email"], .woocommerce-EditAccountForm input[type="password"] { width: 100%; padding: 13px 16px; font-size: var(--text-base); font-family: inherit; border: 1px solid var(--border-light); background: var(--bg-white); color: var(--text-on-light); appearance: none; -webkit-appearance: none; border-radius: 0; } .woocommerce-address-fields select { 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='%2355554F' 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 16px center; padding-right: var(--s7); } .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--s3); font-size: var(--text-sm); color: var(--text-on-light); font-weight: 500; cursor: pointer; margin-bottom: var(--s4); } .woocommerce-form__input-checkbox { width: 18px; height: 18px; accent-color: var(--noir); } .woocommerce-LostPassword { margin-top: var(--s4); font-size: var(--text-sm); } .woocommerce-LostPassword a { color: var(--text-on-light-muted); text-decoration: underline; } .woocommerce-LostPassword a:hover { color: var(--vert-mousse); } .clear { display: none; } /* Boutons natifs WooCommerce (formulaires de compte — pas nos .btn) */ .woocommerce-button.button, a.button, button.button, input.button, .woocommerce-Button, .woocommerce-button { display: inline-flex; align-items: center; justify-content: center; padding: 15px 32px; border-radius: 0; border: none; cursor: pointer; background: var(--noir); color: var(--blanc); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; transition: all var(--t-base); } .woocommerce-button.button:hover, a.button:hover, button.button:hover, .woocommerce-Button:hover, .woocommerce-button:hover { background: #34342f; transform: translateY(-2px); color: var(--blanc); } /* Navigation par onglets (tableau de bord, commandes, adresses...) */ .woocommerce-MyAccount-navigation { margin-bottom: var(--s7); border-bottom: 1px solid var(--border-light); } .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; } .woocommerce-MyAccount-navigation li { margin: 0; } .woocommerce-MyAccount-navigation li a { display: block; padding: var(--s4) var(--s5); font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light-muted); border-bottom: 2px solid transparent; transition: all var(--t-fast); } .woocommerce-MyAccount-navigation li a:hover { color: var(--text-on-light); } .woocommerce-MyAccount-navigation li.is-active a { color: var(--text-on-light); border-bottom-color: var(--sable); } /* Tableau de bord */ .woocommerce-MyAccount-content > p { font-size: var(--text-base); color: var(--text-on-light); line-height: var(--leading); margin-bottom: var(--s4); max-width: 640px; } .woocommerce-MyAccount-content > p a { color: var(--text-on-light); text-decoration: underline; } .woocommerce-MyAccount-content > p a:hover { color: var(--vert-mousse); } /* Commandes (liste) — même technique responsive que le reste du site */ .woocommerce-orders-table { width: 100%; margin-bottom: var(--s6); border-top: 1px solid var(--border-light); } .woocommerce-orders-table thead, .woocommerce-orders-table tbody, .woocommerce-orders-table tr { display: block; width: 100%; } .woocommerce-orders-table thead tr { display: none; } .woocommerce-orders-table tbody tr { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid var(--border-light); font-size: var(--text-sm); } .woocommerce-orders-table__cell { color: var(--text-on-light); } .woocommerce-orders-table__cell-order-number { font-weight: 700; } .woocommerce-orders-table__cell-order-actions { margin-left: auto; display: flex; gap: var(--s3); } .woocommerce-orders-table__cell-order-actions .button { padding: 10px 20px; font-size: var(--text-xs); } .woocommerce-pagination { display: flex; justify-content: center; gap: var(--s4); margin-top: var(--s5); } /* Commande individuelle (view-order) */ .woocommerce-order > p { font-size: var(--text-base); color: var(--text-on-light); margin-bottom: var(--s6); } .woocommerce-order mark { background: none; color: var(--noir); font-weight: 700; } .woocommerce-order h2 { font-size: var(--text-md); font-weight: 700; color: var(--text-on-light); margin: var(--s7) 0 var(--s5); } .woocommerce-OrderUpdates { list-style: none; margin: 0 0 var(--s7); padding: 0; display: flex; flex-direction: column; gap: var(--s4); } .woocommerce-OrderUpdate-inner { background: var(--bg-light); border-top: 3px solid var(--vert-mousse); padding: var(--s5) var(--s6); } .woocommerce-OrderUpdate-meta { font-size: var(--text-xs); color: var(--text-on-light-dim); margin-bottom: var(--s2); } .woocommerce-OrderUpdate-description p { font-size: var(--text-sm); color: var(--text-on-light); } /* Adresses */ .woocommerce-Addresses.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); margin-top: var(--s6); } .woocommerce-Address { background: var(--bg-light); padding: var(--s6); } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); gap: var(--s3); } .woocommerce-Address-title h2 { font-size: var(--text-base); font-weight: 700; color: var(--text-on-light); margin: 0; } .woocommerce-Address-title .edit { font-size: var(--text-xs); font-weight: 700; color: var(--text-on-light-muted); text-decoration: underline; flex-shrink: 0; } .woocommerce-Address-title .edit:hover { color: var(--vert-mousse); } /* Formulaires d'adresse / de compte : champs first/last côte à côte */ .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s4); } .woocommerce-EditAccountForm fieldset { width: 100%; border: none; margin-top: var(--s4); padding-top: var(--s6); border-top: 1px solid var(--border-light); display: flex; flex-wrap: wrap; gap: var(--s5) var(--s4); } .woocommerce-EditAccountForm legend { width: 100%; font-size: var(--text-base); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s4); } .woocommerce-EditAccountForm > p:last-of-type, .woocommerce-address-fields > p:last-of-type { width: 100%; margin-top: var(--s2); } /* ── 29bis. PAGE 404 ──────────────────────────────────────── */ .error-404-links { display: flex; align-items: center; justify-content: center; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s7); } .error-404-home { font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light-muted); text-decoration: underline; transition: color var(--t-fast); } .error-404-home:hover { color: var(--vert-mousse); } /* ── 30. UTILITAIRES ──────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ── 31. RESPONSIVE ───────────────────────────────────────── */ /* ── 24. NOTRE HISTOIRE — intro, valeurs (image filler), sourcing, boutiques ── */ .intro-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s8); align-items: center; } .intro-split__text .page-content { max-width: none; } .intro-split__text .page-content p:first-of-type { font-size: var(--text-lg); color: var(--text-on-light); line-height: 1.5; } .intro-split__img-wrap { position: relative; overflow: hidden; background: rgba(29,29,27,0.06); aspect-ratio: 900 / 700; } .intro-split__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .value-card--image { grid-column: span 2; padding: 0; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; height: 100%; min-height: 236px; transition: none !important; } .value-card--image::before { content: none !important; display: none !important; } .value-card--image:hover { background-color: transparent !important; transform: none !important; } .profils-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-light); border-block: 1px solid var(--border-light); } .profils-grid .value-card { border-top: 4px solid transparent; } .profils-grid .value-card--doux { border-top-color: var(--creme-alt); } .profils-grid .value-card--corse { border-top-color: var(--noir); } .profils-grid .value-card--floral { border-top-color: var(--lemonade); } .profils-grid .value-card--gourmand{ border-top-color: var(--sable); } @media (max-width: 900px) { .profils-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .profils-grid { grid-template-columns: 1fr; } } .sourcing-side { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; height: 100%; min-height: 340px; } .sourcing-side__img-wrap { position: relative; overflow: hidden; background: rgba(29,29,27,0.1); } .sourcing-side__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(.22,.61,.36,1); } .sourcing-side__img-wrap:hover img { transform: scale(1.04); } .boutiques__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); } .boutique-card { background: var(--bg-white); border: 1px solid var(--border-light); } .boutique-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 900 / 560; background: rgba(29,29,27,0.06); } .boutique-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .boutique-card__body { padding: var(--s6); } .boutique-card__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-on-light) !important; letter-spacing: -0.01em; margin-bottom: var(--s3); } .boutique-card__text { font-size: var(--text-base); color: var(--text-on-light-muted) !important; line-height: 1.6; } .boutique-card__text a { color: var(--text-on-light-muted) !important; text-decoration: none; } .boutique-card__text a:hover { color: var(--noir) !important; } .section__header--center--wide { max-width: 1100px; } /* ── 25. POUR LES PROS — hero split, slider, CTA ─────────────────────── */ .pro-hero { background: var(--bg-darker); overflow: hidden; } .pro-hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s8); align-items: center; padding-block: var(--s9); } .pro-hero__text .eyebrow { color: rgba(255,255,255,0.55); } .pro-hero__title { font-size: var(--text-3xl); font-weight: 700; color: var(--text-on-dark); line-height: 1.05; letter-spacing: -0.02em; margin: var(--s4) 0 var(--s5); } .pro-hero__title span { font-weight: 400; } .pro-hero__desc { font-size: var(--text-lg); color: var(--text-on-dark-muted); line-height: 1.55; max-width: 560px; margin-bottom: var(--s6); } .pro-hero__img-wrap { position: relative; overflow: hidden; aspect-ratio: 900 / 900; background: rgba(255,255,255,0.05); } .pro-hero__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .pro-slider { position: relative; } .pro-slider__viewport { overflow: hidden; } .pro-slider__track { display: flex; transition: transform 0.55s cubic-bezier(.22,.61,.36,1); } .pro-slide { flex: 0 0 100%; width: 100%; padding: var(--s7) var(--s5); } .pro-slide__inner { display: grid; grid-template-columns: 90px 1fr; gap: var(--s6); align-items: flex-start; max-width: 760px; margin-inline: auto; } .pro-slide__icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--bg-light); color: var(--vert-mousse); border: 1px solid var(--border-light); flex-shrink: 0; } .pro-slide__title { font-size: var(--text-xl); font-weight: 700; color: var(--text-on-light); letter-spacing: -0.01em; margin-bottom: var(--s3); } .pro-slide__text { font-size: var(--text-base); color: var(--text-on-light-muted); line-height: 1.6; max-width: 640px; margin-bottom: var(--s5); } .pro-slider__nav { display: flex; align-items: center; justify-content: center; gap: var(--s5); margin-top: var(--s6); } .pro-slider__arrow { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--border-light); color: var(--text-on-light); cursor: pointer; transition: all var(--t-base); } .pro-slider__arrow:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); } .pro-slider__dots { display: flex; gap: var(--s2); } .pro-slider__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-light); border: none; cursor: pointer; padding: 0; transition: background var(--t-base); } .pro-slider__dot.is-active { background: var(--noir); } @media (max-width: 900px) { .pro-hero__inner { grid-template-columns: 1fr; padding-block: var(--s8); } .pro-hero__img-wrap { aspect-ratio: 900 / 560; } .pro-slide__inner { grid-template-columns: 1fr; } } /* ── 26. SHORTCODES BLOG (produits + CTA) ────────────────────────────── */ .shop-grid--inline { margin-block: var(--s7); grid-template-columns: repeat(auto-fit, minmax(210px, 320px)) !important; justify-content: center; gap: var(--s5) var(--s4) !important; max-width: 100%; margin-inline: auto; } .shop-grid--inline .product-card__body { padding-top: var(--s2); } .shop-grid--inline .product-card__cat { margin-bottom: 2px; } .shop-grid--inline .product-card__title { font-size: var(--text-sm); margin-top: 10px; margin-bottom: var(--s2); } .shop-grid--inline .product-card__price { font-size: var(--text-base); } .shop-grid--inline .product-card__add { font-size: 14px; padding: 10px 8px; gap: 4px; white-space: nowrap; } .shop-grid--inline .product-card__add svg { width: 13px; height: 13px; flex-shrink: 0; } /* .page-content img (générique articles) a une spécificité plus forte que .product-card__img et lui imposait height:auto + une marge → décalage. */ .page-content .product-card__img { max-width: 100%; height: 100%; margin: 0; } .brulerie-cta-wrap { text-align: center; margin-block: var(--s6); } /* ── 27. PAGE TARIF — menu boissons sur place (fond sombre + overlay) ─── */ .menu-page { position: relative; background: var(--bg-darker); overflow: hidden; } .menu-page__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .menu-page__bg::after { content: ''; position: absolute; inset: 0; background: rgba(10,10,9,0.86); } .menu-page__inner { position: relative; z-index: 1; padding-block: var(--s9); } .menu-logo-wrap { text-align: center; margin-bottom: var(--s7); } .menu-logo-wrap img { width: 240px; height: 240px; object-fit: cover; margin-inline: auto; display: block; } .menu-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s9); max-width: 1100px; margin-inline: auto; } .menu-group { margin-bottom: var(--s8); } .menu-group:last-child { margin-bottom: 0; } .menu-group__title { display: flex; align-items: center; gap: var(--s3); font-size: var(--text-lg); font-weight: 700; color: var(--blanc); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid rgba(255,255,255,0.14); } .menu-group__title svg { color: var(--lemonade); flex-shrink: 0; } .menu-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); } .menu-item__name { color: var(--blanc); font-size: var(--text-base); font-weight: 500; } .menu-item__ingredients { display: block; color: var(--sable); font-size: var(--text-sm); font-weight: 400; margin-top: 2px; } .menu-item__price { color: var(--blanc); font-weight: 700; font-size: var(--text-base); white-space: nowrap; } .menu-cta { background: var(--lemonade); padding-block: var(--s8); text-align: center; } .menu-cta__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-light-muted); margin-bottom: var(--s3); } .menu-cta__title { font-size: var(--text-2xl); font-weight: 700; color: var(--noir); letter-spacing: -0.015em; margin-bottom: var(--s4); } .menu-cta__text { font-size: var(--text-base); color: var(--text-on-light-muted); max-width: 560px; margin: 0 auto var(--s6); line-height: 1.6; } @media (max-width: 768px) { .menu-columns { grid-template-columns: 1fr; gap: var(--s8); } } @media (max-width: 900px) { .intro-split { grid-template-columns: 1fr; } .value-card--image { grid-column: span 1; } .sourcing-side { grid-template-rows: 1fr 1fr; min-height: 220px; } .boutiques__grid { grid-template-columns: 1fr; } } @media (max-width: 1200px) { .products__grid, .products__grid--4 { grid-template-columns: repeat(3, 1fr); } .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 1024px) { .values__grid { grid-template-columns: repeat(3, 1fr); } .shop-cta__grid { grid-template-columns: 1fr; } .avis__grid { grid-template-columns: repeat(2, 1fr); } .histoire__inner { grid-template-columns: 1fr; } .histoire__img-wrap { min-height: 340px; } .histoire__content--infos { border-left: none; border-top: 1px solid var(--border-light); } .shop-layout { grid-template-columns: 220px 1fr; gap: var(--s6); } .shop-grid { grid-template-columns: repeat(2, 1fr); } .cart-layout { grid-template-columns: 1fr 320px; gap: var(--s6); } .article-layout { grid-template-columns: 1fr; } .article-layout .shop-sidebar { position: static; } } @media (max-width: 900px) { .hero__bean { display: none; } .hero__bottom { flex-direction: column; align-items: flex-start; } .stats-bar__inner { flex-wrap: wrap; } .stat-item { max-width: 50%; flex: 1 1 50%; } .stat-item__sep { display: none; } .products__grid, .products__grid--4 { grid-template-columns: repeat(2, 1fr); } .values__grid { grid-template-columns: 1fr; } .blog__grid { grid-template-columns: 1fr; } .product-single__layout { grid-template-columns: 1fr; gap: var(--s6); margin-bottom: var(--s7); } .product-gallery__main { max-width: 420px; } .contact-layout { grid-template-columns: 1fr; gap: var(--s6); } .contact-form__row { grid-template-columns: 1fr; } .cart-layout { grid-template-columns: 1fr; gap: var(--s6); } .cart-summary__box { position: static; } .checkout-wrap form.checkout.woocommerce-checkout { grid-template-columns: 1fr; } #customer_details { grid-column: 1; grid-row: auto; } #order_review_heading, #order_review { grid-column: 1; } #order_review { position: static; } .product-content__grid { grid-template-columns: 1fr; gap: 0; } .product-content__side { margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--border-light); } .product-content__side .product-section + .product-section { border-top: 1px solid var(--border-light); } #comments { grid-template-columns: 1fr; } .woocommerce-Reviews-title, .woocommerce-noreviews, .commentlist { grid-column: 1; } #review_form_wrapper { grid-column: 1; grid-row: auto; margin-top: var(--s6); } } @media (max-width: 768px) { :root { --nav-h: 66px; } .nav__logo-img { width: 30px; height: 30px; } .nav__logo-sup { font-size: 8px; } .nav__logo-main { font-size: 15px; } .nav__actions { gap: 2px; } .nav__icon-btn, .btn--ghost { width: 36px; height: 36px; } .nav__cart { padding: 8px 12px; } .find-us-band__about { flex-direction: column; align-items: flex-start; text-align: left; } .find-us-band__photo { width: 100%; height: 200px; } .nav__links { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--noir); border-bottom: 1px solid var(--border-dark); flex-direction: column; align-items: flex-start; gap: 0; padding: var(--s4) 0; z-index: 550; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; } .nav__links.is-open { display: flex; } .nav__links ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; } .nav__links li { width: 100%; } .nav__links a { display: block; width: 100%; padding: var(--s3) var(--pad-x); font-size: var(--text-base); border-bottom: 1px solid var(--border-dark); } .nav__links a::after { display: none; } .nav__toggle { display: flex; } .mini-cart { position: fixed; top: var(--nav-h); left: var(--s4); right: var(--s4); width: auto; max-height: calc(100vh - var(--nav-h) - var(--s5)); } .search-panel { position: fixed; top: var(--nav-h); left: var(--s4); right: var(--s4); width: auto; max-height: calc(100vh - var(--nav-h) - var(--s5)); } .avis__grid { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr; gap: var(--s6); } .section__header--split { flex-direction: column; align-items: flex-start; } .footer__bottom { flex-direction: column; align-items: flex-start; } .shop-banner { flex-direction: column; align-items: flex-start; } .shop-layout { grid-template-columns: 1fr; gap: 0; } .shop-sidebar { position: static; margin-bottom: var(--s6); } .shop-mobile-filter-toggle { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; padding: 14px; margin-bottom: var(--s5); border: 1px solid var(--border-light); background: var(--bg-light); font-size: var(--text-sm); font-weight: 700; color: var(--text-on-light); } .shop-sidebar__filters { display: none; } .shop-sidebar.is-open .shop-sidebar__filters { display: block; padding-top: var(--s2); } .cart-table__head { display: none; } .cart-row { grid-template-columns: 1fr; gap: var(--s3); } .cart-row__product { grid-column: 1; } .cart-row__price, .cart-row__qty, .cart-row__subtotal { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .cart-row__price::before, .cart-row__qty::before, .cart-row__subtotal::before { content: attr(data-label); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-on-light-dim); } .cart-row__remove { justify-content: flex-end; } .cart-actions { flex-direction: column; align-items: stretch; } .cart-coupon { flex-direction: column; } .cart-coupon input { min-width: 0; } .cart-actions__right { justify-content: space-between; } #customer_login.u-columns { grid-template-columns: 1fr; gap: var(--s7); } .woocommerce-Addresses.col2-set { grid-template-columns: 1fr; } .woocommerce-orders-table tbody tr { flex-direction: column; align-items: stretch; } .woocommerce-orders-table__cell { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); width: 100%; } .woocommerce-orders-table__cell::before { content: attr(data-title); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-on-light-dim); } .woocommerce-orders-table__cell-order-actions { margin-left: 0; } .woocommerce-orders-table__cell-order-actions::before { display: none; } } @media (max-width: 480px) { .products__grid, .products__grid--4 { grid-template-columns: 1fr; } .stat-item { max-width: 100%; flex: 1 1 100%; } .hero__actions { flex-direction: column; width: 100%; } .hero__actions .btn, .btn--lg { width: 100%; justify-content: center; } .shop-grid { grid-template-columns: 1fr; } .product-info__row { flex-direction: column; } .product-info__add-btn { width: 100%; } .comment-form-author, .comment-form-email { width: 100%; margin-right: 0; } .cart-actions__right { flex-direction: column; align-items: stretch; gap: var(--s3); } .cart-actions__right .btn { width: 100%; } .cart-row__img { width: 48px; } .form-row-first, .form-row-last { width: 100%; } .checkout-review__totals tr { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .hero::before, .hero__bean { animation: none; } .hero__tag--anim, .hero__title--anim, .hero__bottom--anim { animation: none; opacity: 1; transform: none; } [data-animate] { opacity: 1; transform: none; transition: none; } .stats-bar[data-roll] { transform: none; opacity: 1; } .mini-cart { transition: opacity var(--t-fast); transform: none; } .search-panel { transition: opacity var(--t-fast); transform: none; } } /* ══ Maintenance boutique (template-parts/maintenance.php) ══════════════ */ .maint-shop { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s8); align-items: start; } .maint-shop__text { font-size: var(--text-md); color: var(--text-on-light); } .maint-shop__text p { margin: 0 0 var(--s4); } .maint-shop__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); } .maint-shop__actions .btn { display: inline-flex; align-items: center; gap: var(--s2); } .maint-shop__card { background: var(--bg-light); padding: var(--s6); border-top: 3px solid var(--sable); } .maint-shop__card-title { font-size: var(--text-md); font-weight: 700; color: var(--text-on-light); margin-bottom: var(--s4); } .maint-shop__row { display: flex; gap: var(--s3); align-items: flex-start; padding-block: var(--s3); border-top: 1px solid var(--border-light); font-size: var(--text-base); color: var(--text-on-light); line-height: 1.55; } .maint-shop__row:first-of-type { border-top: none; } .maint-shop__row svg { flex-shrink: 0; margin-top: 3px; color: var(--text-on-light-muted); } .maint-shop__row a { color: var(--text-on-light); font-weight: 700; } .maint-shop__muted { color: var(--text-on-light-muted); font-size: var(--text-sm); } @media (max-width: 860px) { .maint-shop { grid-template-columns: 1fr; gap: var(--s6); } }