/* Hydropolab — main stylesheet. DA v3 (charte maquette-homepage-v2) :
vert sauge + ivoire + bleu eau, titres Plus Jakarta Sans, corps Inter.
CWV-first: self-hosted variable fonts (latin+swap), semantic tokens,
minimal critical CSS. Réf visuelle : assets/img/maquette-homepage{,-v2}.png. */
/* ── Self-hosted fonts ── */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Réserve éditoriale (charte : Playfair pour accents serif) — ne pèse rien tant
qu'aucune règle ne l'utilise (les fonts ne se chargent qu'à l'usage). */
@font-face {
font-family: "Playfair Display";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url("../fonts/playfair-display-latin-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../fonts/inter-latin-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ── Design tokens (charte : VALEURS DE COULEURS) ──
Palette dominante bleu clair. Les noms `--forest*` / `--leaf` sont hérités du
moteur de thème et gardés tels quels pour ne pas toucher leurs centaines
d'usages : lire « primaire » et non « vert ». Les valeurs ont été portées du
sauge au bleu à luminosité constante, donc tous les rapports de contraste
d'origine sont préservés. */
:root {
--cream: #f4f8fb; /* --color-background (blanc bleuté, fond dominant) */
--card: #ffffff; /* surfaces (cartes blanches maquette) */
--forest: #4d7694; /* --color-primary (bleu clair de marque) */
--forest-2: #3b6583; /* --color-primary-dark, hover */
--forest-3: #30546e; /* pressed (dérivé) */
--leaf: #3b6583; /* kicker / in-stock */
--forest-tint: #e1e9ee; /* bleu pâle, hover menu, fonds pastille */
--forest-deep: #2c404e; /* bleu profond, footer et bandes impact */
--water: #2f7fae; /* --color-secondary (bleu eau, plus saturé que le primaire) */
--water-2: #56a6c6; /* --color-accent */
--water-tint: #d6eaf3; /* bleu pâle, pastilles */
--hero-blue: #eaf3f5; /* fond hero */
--earth: #a67f5c; /* terres, billes d'argile et substrats (accent chaud gardé) */
--earth-tint: #f3efe7; /* fond section « solution » */
--content-band: #f1f6fa; /* fond bandeau contenu éditorial catégorie */
--content-green: #d2e0ea; /* encart/CTA pâle de la zone contenu */
--promo-card-bg: #f8f4ed; /* fond beige très light des cards « En promotion » (contraste chaud volontaire) */
--card-soft: #edf2f6; /* fond neutre très clair des cartes article (sommaire, sidebar, CTA) */
--amber: #e8a33d; /* étoiles de note */
--terracotta: #c1663f; /* accent promo/soldes */
--ink: #1b2024; /* --color-text */
--muted: #595f63; /* --color-text-muted */
--faint: #8a9094; /* meta */
--line: #e3e7ea; /* --color-border */
/* Back-compat aliases */
--color-bg: var(--cream);
--color-text: var(--ink);
--color-accent: var(--forest);
--font-h: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-b: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-serif: "Playfair Display", Georgia, "Times New Roman", serif; /* réserve éditoriale */
--fs-300: 0.82rem; --fs-400: 1rem; --fs-500: 1.12rem;
--fs-600: 1.35rem; --fs-700: 1.85rem; --fs-800: 2.3rem;
--fs-hero: clamp(2.6rem, 4.6vw, 3.8rem);
--sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
--sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem;
--space: 1rem;
--radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(30,40,30,.05), 0 2px 6px rgba(30,40,30,.06);
--shadow: 0 10px 30px rgba(30,40,30,.10);
--shadow-lg: 0 18px 44px rgba(30,40,30,.16);
--measure: 68ch; --wide: 1240px; --xwide: 1440px; --header-h: 76px;
--ease: cubic-bezier(.4, 0, .2, 1);
}
/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0; padding-top: var(--header-h);
color: var(--ink); background: var(--cream);
font-family: var(--font-b); font-size: var(--fs-400); line-height: 1.6;
-webkit-font-smoothing: antialiased;
/* Sticky footer : sur page courte, le footer reste collé au bas du viewport.
box-sizing:border-box (global) fait entrer le padding-top header dans 100vh. */
min-height: 100vh; display: flex; flex-direction: column;
}
body.home { padding-top: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--forest); text-underline-offset: 2px; }
a:hover { color: var(--forest-2); }
h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 700; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 .5em; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--forest) 45%, #fff); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Main is a wide container by default (shop, cart/checkout, generic pages).
Prose contexts (.pillar) narrow themselves to --measure; the home goes
full-bleed so the hero and 1240 sections manage their own width. */
/* width:100% donne une largeur définie → en body flex (sticky footer), margin:auto
recentre au lieu de rétrécir l'item ; home (max-width:none) reprend le plein écran. */
.site-main { flex: 1 0 auto; width: 100%; max-width: var(--wide); margin-inline: auto; padding: var(--sp-8) var(--space); }
body.home .site-main { max-width: none; padding: 0; }
.kicker { color: var(--leaf); font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.section-title { font-size: var(--fs-700); margin: var(--sp-12) 0 var(--sp-6); }
/* ── A11y helpers ── */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space); top: var(--space); background: #fff; padding: var(--sp-2) var(--sp-4); z-index: 100; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
/* ── Header (fixed; solide partout — pas de transparence/glass) ── */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 50;
background: var(--cream);
border-bottom: 1px solid var(--line); color: var(--ink);
transition: border-color .3s var(--ease);
}
/* Home (.at-top, posée serveur sur la front page) : pas de border-bottom —
le header crème fond directement dans le masque crème du hero. */
.site-header.at-top { background: var(--cream); border-color: transparent; color: var(--ink); }
/* Admin bar présente (logged-in) : décaler le header fixe sous la barre WP. */
body.admin-bar .site-header { top: 32px; }
/* Mobile : la wp-adminbar passe en position:absolute (elle scrolle avec la page).
Le header suit son mouvement via --ab-shift (JS : max(0, 46 - scrollY)) puis se
colle à 0 une fois la barre sortie. Fallback 46px si pas de JS. */
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: var(--ab-shift, 46px); } }
.site-header__inner { max-width: var(--xwide); margin-inline: auto; padding: 0 var(--space); min-height: var(--header-h); display: flex; align-items: center; gap: var(--sp-8); }
.site-header__title { font-family: var(--font-h); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; text-decoration: none; color: currentColor; }
.site-header__brand { margin-right: auto; min-width: 0; }
.site-header__logo-link { display: inline-flex; align-items: center; }
.site-header__logo { height: 50px; width: auto; max-width: 100%; display: block; }
@media (max-width: 600px) { .site-header__logo { height: 42px; } }
/* WP custom logo (si défini via admin) : même contrainte de hauteur. */
.custom-logo { height: 54px; width: auto; display: block; }
.site-header__actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; }
.site-nav .menu { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem var(--sp-6); margin: 0; padding: 0; }
.site-nav .menu-item > a { display: block; padding: var(--sp-2) .1rem; text-decoration: none; color: currentColor; font-weight: 500; font-size: .98rem; opacity: 1; border-bottom: 2px solid transparent; transition: border-color .15s; }
.site-nav .menu-item > a:hover { opacity: 1; border-color: currentColor; }
.hpl-cart, .hpl-account { position: relative; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: currentColor; width: 42px; height: 42px; border-radius: var(--radius-sm); transition: background .15s, color .15s; }
.hpl-cart:hover, .hpl-account:hover { background: var(--forest-tint); color: var(--forest); }
.hpl-cart svg, .hpl-account svg { width: 22px; height: 22px; display: block; }
.hpl-cart__count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--terracotta); color: #fff; font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: var(--radius-pill); line-height: 1; }
.hpl-cart__count[data-count="0"] { display: none; }
/* ── Header hover-dropdowns (mini-panier + menu compte) — desktop ── */
.hpl-hdd { position: relative; display: inline-flex; }
.hpl-hdd__panel {
position: absolute; top: calc(100% + 9px); right: 0; z-index: 250;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
/* Pont transparent icône ↔ panneau : évite la perte de survol dans le gap. */
.hpl-hdd__panel::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.hpl-hdd.is-open .hpl-hdd__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.hpl-hdd .hpl-account[aria-expanded="true"] { background: var(--forest-tint); color: var(--forest); }
/* Menu compte */
.hpl-acc-menu { min-width: 210px; padding: var(--sp-2); }
.hpl-hdd__item { display: block; padding: .6rem .7rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap; transition: background .14s var(--ease), color .14s var(--ease); }
.hpl-hdd__item:hover { background: var(--forest-tint); color: var(--forest-deep); }
.hpl-hdd__item--muted { color: var(--muted); font-weight: 400; }
.hpl-hdd__item--muted:hover { color: var(--ink); background: var(--cream); }
.hpl-hdd__sep { height: 1px; margin: var(--sp-2) .5rem; background: var(--line); }
/* ── Recherche header : loupe + modale (un champ, deux cibles) ──
TOUTES ses règles commencent par .hpl-search (lock de scroll compris), donc UNE
seule entrée ("hpl-search") dans le safelist minimal-css de Mantys Core suffit. */
.hpl-search { display: inline-flex; }
.hpl-search__toggle { width: 42px; height: 42px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: currentColor; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.hpl-search__toggle:hover, .hpl-search__toggle[aria-expanded="true"] { background: var(--forest-tint); color: var(--forest); }
.hpl-search__toggle svg { width: 22px; height: 22px; display: block; }
/* L'overlay est en position:fixed hors flux du header ; [hidden] doit rester
plus fort que le display:flex (sinon la règle de classe l'emporte sur l'UA). */
.hpl-search__overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: clamp(1rem, 12vh, 7rem) var(--space) var(--space); background: rgba(28, 35, 33, .45); }
.hpl-search__overlay[hidden] { display: none; }
.hpl-search__box { position: relative; width: 100%; max-width: 640px; padding: clamp(1.4rem, 3vw, 2.2rem); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hpl-search__close { position: absolute; top: .8rem; right: .8rem; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .14s var(--ease), color .14s var(--ease); }
.hpl-search__close:hover { background: var(--cream); color: var(--ink); }
.hpl-search__close svg { width: 18px; height: 18px; }
.hpl-search__title { font-family: var(--font-h); font-size: var(--fs-600); line-height: 1.15; margin: 0 0 var(--sp-4); padding-right: 2.5rem; }
.hpl-search__field { position: relative; }
.hpl-search__field input[type="search"] { width: 100%; min-height: 54px; padding: .6rem 1rem .6rem 2.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: inherit; -webkit-appearance: none; appearance: none; }
.hpl-search__field input[type="search"]:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: transparent; }
.hpl-search__ic { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--faint); pointer-events: none; }
.hpl-search__ic svg { width: 20px; height: 20px; display: block; }
.hpl-search__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); }
.hpl-search__label { color: var(--muted); font-size: .92rem; }
.hpl-search__go { flex: none; }
/* Le DOM met « Produits » en premier (submit par défaut sur Entrée) ; on
rétablit l'ordre visuel d'origine : Conseils puis Produits. */
.hpl-search__go--post { order: 1; }
.hpl-search__go--product { order: 2; }
@media (max-width: 560px) {
.hpl-search__actions { flex-direction: column; align-items: stretch; }
.hpl-search__go { text-align: center; }
}
html.hpl-search-open, html.hpl-search-open body { overflow: hidden; }
/* Mini-panier — TOUTES ses règles commencent par .minicart, donc UNE seule entrée
("minicart") dans le safelist minimal-css de Mantys Core suffit à le protéger.
Le mini-panier ne partage plus le mécanisme .hpl-hdd (self-contained). */
.minicart { position: relative; display: inline-flex; }
.minicart__panel {
position: absolute; top: calc(100% + 9px); right: 0; z-index: 250;
width: 344px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.minicart__panel::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.minicart.is-open .minicart__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.minicart .hpl-cart[aria-expanded="true"] { background: var(--forest-tint); color: var(--forest); }
.minicart__body { display: flex; flex-direction: column; max-height: 72vh; }
.minicart__loading, .minicart__empty { margin: 0; padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--muted); font-size: .92rem; }
.minicart__items { list-style: none; margin: 0; padding: var(--sp-2); overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.minicart__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); }
.minicart__item + .minicart__item { border-top: 1px solid var(--line); }
.minicart__media { flex: none; width: 52px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; background: var(--cream); display: block; }
.minicart__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.minicart__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.minicart__name { color: var(--ink); text-decoration: none; font-size: .88rem; line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.minicart__name:hover { color: var(--forest); }
.minicart__price { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.minicart__actions { flex: none; display: inline-flex; align-items: center; gap: .35rem; }
.minicart__qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px; }
.minicart__q { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--forest-deep); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; line-height: 1; transition: background .14s var(--ease), color .14s var(--ease); }
.minicart__q:hover:not(:disabled) { background: var(--forest-tint); }
.minicart__q:disabled { opacity: .35; cursor: default; }
.minicart__qn { min-width: 1.35rem; text-align: center; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.minicart__trash { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .14s var(--ease), color .14s var(--ease); }
.minicart__trash:hover { background: #fbeae6; color: var(--terracotta); }
.minicart__trash svg { width: 16px; height: 16px; }
.minicart__item.is-busy { opacity: .5; pointer-events: none; }
.minicart__foot { flex: none; border-top: 1px solid var(--line); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.minicart__subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); font-size: .92rem; }
.minicart__subtotal strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.minicart__cta { display: block; text-align: center; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--forest); color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; transition: background .15s var(--ease); }
.minicart__cta:hover { background: var(--forest-deep); color: #fff; }
/* Panneaux = desktop uniquement ; sur mobile l'icône reste un simple lien. */
@media (max-width: 899px) {
.hpl-hdd__panel, .minicart__panel { display: none !important; }
}
/* ── Panier custom (POC /panier-2/) — rendu serveur léger, design thème ── */
/* Page panier : pas de fil d'Ariane, titre centré, respiration avant les éléments. */
.hpl-cart-page .woocommerce-breadcrumb { display: none; }
.hpl-cart-page .page__title { text-align: center; margin: 0 0 var(--sp-12); }
.hpl-cart-page .page__content { margin-top: 0; }
.hpl-cartpage.is-busy { opacity: .55; pointer-events: none; transition: opacity .12s var(--ease); }
.hpl-cartpage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); align-items: start; }
.hpl-cart__items { list-style: none; margin: 0; padding: 0; }
.hpl-cart__item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.hpl-cart__item:first-child { border-top: 1px solid var(--line); }
.hpl-cart__thumb { width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; background: var(--cream); display: block; }
.hpl-cart__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hpl-cart__detail { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.hpl-cart__name a, .hpl-cart__name { color: var(--ink); font-family: var(--font-h); font-weight: 600; text-decoration: none; line-height: 1.3; }
.hpl-cart__name a:hover { color: var(--forest); }
.hpl-cart__detail .variation, .hpl-cart__detail dl { margin: 0; font-size: .82rem; color: var(--muted); }
.hpl-cart__unit-mobile { display: none; font-size: .85rem; color: var(--muted); }
.hpl-cart__remove { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background .14s var(--ease), color .14s var(--ease); }
.hpl-cart__remove svg { width: 18px; height: 18px; }
.hpl-cart__remove:hover { background: #fbeae6; color: var(--terracotta); }
.hpl-cart__unit { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.hpl-cart__line { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 5rem; }
.hpl-cart__qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.hpl-cart__qty .qty-step { width: 34px; min-height: 40px; font-size: 1.1rem; }
.hpl-cart__qty input.qty { width: 2.6rem; min-height: 40px; text-align: center; border: 0; background: transparent; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.hpl-cart__qty input.qty::-webkit-outer-spin-button, .hpl-cart__qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hpl-cart__qty-fixed { color: var(--muted); font-weight: 600; }
.hpl-cart__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); }
.hpl-cart__coupon { display: inline-flex; gap: .4rem; }
.hpl-cart__coupon input { min-height: 44px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; min-width: 8rem; }
.hpl-cart__coupon-btn, .hpl-cart__update { min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .14s var(--ease), border-color .14s var(--ease); }
.hpl-cart__coupon-btn:hover, .hpl-cart__update:hover { background: var(--forest-tint); border-color: var(--forest); color: var(--forest-deep); }
.hpl-cart__continue { display: inline-block; margin-top: var(--sp-4); color: var(--muted); text-decoration: none; font-size: .9rem; }
.hpl-cart__continue:hover { color: var(--forest); }
/* Récapitulatif (aside sticky) */
.hpl-summary { position: sticky; top: var(--sp-4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.hpl-summary__title { margin: 0 0 var(--sp-3); font-size: 1.15rem; }
.hpl-summary__rows { display: flex; flex-direction: column; gap: .55rem; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.hpl-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: .92rem; }
.hpl-summary__row span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.hpl-summary__row--muted span:last-child, .hpl-summary__row--muted { color: var(--muted); font-size: .85rem; }
.hpl-summary__row--discount span:last-child { color: var(--forest-deep); }
.hpl-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4); font-size: 1rem; }
.hpl-summary__total strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.hpl-summary__checkout .checkout-button, .hpl-summary__checkout a { display: block; text-align: center; padding: .95rem 1rem; border-radius: var(--radius-sm); background: var(--forest); color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; transition: background .15s var(--ease); }
.hpl-summary__checkout .checkout-button:hover, .hpl-summary__checkout a:hover { background: var(--forest-deep); color: #fff; }
@media (max-width: 900px) {
.hpl-cartpage { grid-template-columns: 1fr; gap: var(--sp-5); }
.hpl-cart__item { grid-template-columns: 72px minmax(0, 1fr) auto auto; grid-template-areas: "thumb detail line rm" "thumb detail qty qty"; row-gap: var(--sp-2); }
.hpl-cart__thumb { grid-area: thumb; width: 72px; height: 72px; }
.hpl-cart__detail { grid-area: detail; }
.hpl-cart__unit { display: none; }
.hpl-cart__unit-mobile { display: block; }
.hpl-cart__line { grid-area: line; }
.hpl-cart__qtycell { grid-area: qty; justify-self: start; }
.hpl-cart__remove { grid-area: rm; justify-self: end; }
.hpl-summary { position: static; }
}
.nav-toggle { display: none; flex: none; box-sizing: border-box; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; color: currentColor; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; height: 2px; background: currentColor; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.nav-toggle__bar { left: 10px; right: 10px; top: 21px; }
/* Relatifs à la barre (24px de large), pas au bouton : pleine largeur de barre. */
.nav-toggle__bar::before, .nav-toggle__bar::after { left: 0; right: 0; }
.nav-toggle__bar::before { top: -6px; } .nav-toggle__bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }
/* ── Méga-menu (desktop ≥ 901px) : hover-open, panneau différencié, hover vert ── */
@media (min-width: 901px) {
.site-nav { align-self: stretch; }
.site-nav .menu { height: 100%; flex-wrap: nowrap; }
.site-nav .menu > .menu-item { display: flex; align-items: center; }
.site-nav .menu > .menu-item > a { display: flex; align-items: center; height: 100%; border-bottom: 0; }
.site-nav .menu > .menu-item > a:hover { border-color: transparent; color: var(--forest); }
/* chevron : indique un panneau (affordance hover) */
.site-nav .menu > .menu-item-has-children > a { gap: .38rem; }
.site-nav .menu > .menu-item-has-children > a::after {
content: ""; width: .42em; height: .42em; margin-top: -.22em;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); opacity: .5; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.site-nav .menu > .menu-item-has-children:hover > a::after,
.site-nav .menu > .menu-item-has-children:focus-within > a::after { transform: rotate(-135deg); opacity: 1; }
/* le panneau : détaché de la navbar (élévation + liseré vert) */
/* panneau PLEINE LARGEUR (mega) : bg full-width, contenu centré au conteneur,
colonnes auto (place pour + de sous-catégories + top-sellers à terme). */
.site-nav .sub-menu {
position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
margin: 0; list-style: none;
padding-block: var(--sp-10);
padding-inline: max(var(--space), calc((100% - var(--wide)) / 2));
background: #fff; border-top: 1px solid var(--line);
box-shadow: 0 26px 52px -18px rgba(4, 29, 1, .30);
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .2rem 1.4rem; align-content: start;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
}
.site-nav .menu > .menu-item-has-children:hover > .sub-menu,
.site-nav .menu > .menu-item-has-children:focus-within > .sub-menu {
opacity: 1; visibility: visible; transform: translateY(0);
transition: opacity .18s var(--ease), transform .18s var(--ease);
}
/* items du panneau : aérés, hover vert clair, flèche si enfants */
.site-nav .sub-menu .menu-item { border: 0; }
.site-nav .sub-menu .menu-item > a {
display: flex; align-items: center; gap: .5rem; height: auto; white-space: nowrap;
padding: .55rem .7rem; font-size: .92rem; font-weight: 500; color: var(--ink);
border: 0; border-radius: var(--radius-sm);
transition: background .12s, color .12s;
}
.site-nav .sub-menu .menu-item > a:hover { background: var(--forest-tint); color: #3b586d; border-color: transparent; }
.site-nav .sub-menu .menu-item-has-children > a::after {
content: ""; flex: none; margin-left: auto; width: 7px; height: 7px;
border-right: 2px solid currentColor; border-top: 2px solid currentColor;
transform: rotate(45deg); opacity: .45;
}
}
/* ── Méga-panneaux config-driven : 2 col. catégories · guides · à la une ── */
@media (min-width: 901px) {
.mega-panel {
position: absolute; top: 100%; left: 50%; z-index: 60;
width: min(100% - 2 * var(--space), var(--xwide));
background: #fff; border-top: 1px solid var(--line);
border-radius: 0 0 10px 10px;
box-shadow: 0 26px 52px -18px rgba(4, 29, 1, .30);
padding: var(--sp-8) var(--space);
max-height: calc(100vh - var(--header-h) - 12px); overflow-y: auto;
opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
}
.site-nav .mega-item:hover > .mega-panel,
.site-nav .mega-item:focus-within > .mega-panel {
opacity: 1; visibility: visible; transform: translate(-50%, 0);
transition: opacity .18s var(--ease), transform .18s var(--ease);
}
/* Panneau actif : scroll bloqué (sans shift via scrollbar-gutter) + contenu flouté dessous.
.mega-open est retiré au mouseleave, donc pendant la disparition le scroll est déjà libre. */
html { scrollbar-gutter: stable; }
html.mega-open { overflow: hidden; }
.site-main { transition: filter .18s var(--ease); }
html.mega-open .site-main { filter: blur(3px); }
.mega-panel__inner { display: grid; grid-template-columns: 2fr 1.1fr 1.15fr; gap: 1.6rem; align-items: stretch; }
.mega-cats__cols { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.4rem; }
.mega-panel__more { display: contents; } /* guides + à la une redeviennent 2 colonnes de la grille */
/* Vertical colour bands: categories = light green, guides = light blue, featured = white (it carries an image). */
.mega-cats { background: color-mix(in srgb, var(--forest) 7%, #fff); border-radius: 12px; padding: 1.3rem 1.4rem; }
.mega-guides { background: color-mix(in srgb, var(--water) 7%, #fff); border-radius: 12px; padding: 1.3rem 1.4rem; }
.mega-feature { background: #fff; border: 1px solid var(--line); }
/* Guides sit on a blue band: their hover stays in blue tones too. */
.mega-guides .mega-glist > li > a:hover { background: color-mix(in srgb, var(--water) 18%, #fff); }
.mega-more-toggle { display: none; }
}
.mega-col__head { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--forest-2); margin: 0 0 .2rem; }
.mega-col__sub { font-size: .82rem; color: var(--muted); margin: 0 0 1rem; }
.mega-list, .mega-glist { list-style: none; margin: 0; padding: 0; }
.mega-list > li > a { display: block; padding: .5rem .6rem; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .12s, color .12s; }
.mega-list > li > a:hover { background: var(--forest-tint); color: #3b586d; }
.mega-glist > li > a { display: block; padding: .5rem .6rem; border-radius: var(--radius-sm); text-decoration: none; transition: background .12s; }
.mega-glist > li > a:hover { background: var(--forest-tint); }
.mega-glist__t { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); }
.mega-glist__s { display: block; font-size: .8rem; color: var(--muted); }
.mega-col__all { display: inline-block; margin-top: .9rem; font-size: .85rem; font-weight: 600; color: var(--forest-2); text-decoration: none; }
.mega-col__all:hover { text-decoration: underline; }
.mega-feature { display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem; border-radius: var(--radius-lg); background: radial-gradient(120% 100% at 30% 0%, var(--water-tint), var(--forest-tint)); text-decoration: none; color: var(--ink); }
.mega-feature__eyebrow { align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-deep); background: rgba(255, 255, 255, .7); padding: .25em .6em; border-radius: var(--radius-pill); }
.mega-feature__title { font-family: var(--font-h); font-size: 1.32rem; line-height: 1.15; color: var(--ink); margin-top: .3rem; }
.mega-feature__sub { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.mega-feature__img { width: 100%; height: auto; margin: .2rem 0; }
.mega-feature__cta { margin-top: auto; font-weight: 600; color: var(--forest-2); font-size: .9rem; }
@media (max-width: 900px) {
.mega-panel { display: none; }
.site-nav .menu-item.is-expanded > .mega-panel { display: block; padding: .3rem 0 .6rem .8rem; }
.mega-panel__inner { display: block; }
.mega-cats__cols { display: block; } /* mobile : 1 seule colonne de catégories */
.mega-cats > .mega-col__head { display: none; } /* pas de label « Catégories » en mobile */
.mega-col__head { margin: .1rem 0; }
.mega-col__sub { display: none; }
/* Catégories = lignes cliquables (lien direct), fond vert léger + chevron. */
.mega-list > li { margin-bottom: .35rem; }
.mega-list > li > a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .8rem; background: color-mix(in srgb, var(--forest-tint) 60%, #fff); border-radius: 5px; color: var(--forest-2); font-weight: 500; }
.mega-list > li > a::after { content: ""; flex: none; width: .48em; height: .48em; border-right: 2px solid var(--forest-2); border-top: 2px solid var(--forest-2); transform: rotate(45deg); opacity: .6; }
.mega-glist > li > a { padding: .55rem var(--sp-3); color: var(--muted); }
.mega-glist__s { display: none; }
/* Guides + à la une repliés derrière un bouton clair */
.mega-more-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; margin: .6rem 0 0; padding: .8rem var(--sp-3); background: var(--water-tint); color: #1f5f86; border: 0; border-radius: var(--radius-sm); font-family: var(--font-h); font-size: 1rem; font-weight: 600; cursor: pointer; }
.mega-more-toggle__chev { flex: none; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
.mega-more-toggle[aria-expanded="true"] .mega-more-toggle__chev { transform: rotate(-135deg); }
.mega-panel__more { display: none; }
.mega-more-toggle[aria-expanded="true"] + .mega-panel__more { display: block; }
.mega-feature { margin-top: 1rem; }
}
@media (max-width: 900px) {
.nav-toggle { display: block; order: 3; }
.site-header__actions { margin-left: 0; order: 2; }
.site-header__brand { margin-right: auto; order: 1; }
/* Panneau plein écran sous le header — sorti du flux du header (le header
fixe garde sa hauteur), scroll interne, fade+slide à l'ouverture. */
.site-nav {
order: 4;
position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 49;
background: var(--cream);
padding: var(--sp-2) var(--space) calc(var(--sp-12) + env(safe-area-inset-bottom));
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
opacity: 0; visibility: hidden; transform: translateY(-10px);
transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s;
}
.site-nav.is-open {
opacity: 1; visibility: visible; transform: none;
transition: opacity .22s var(--ease), transform .22s var(--ease);
}
/* Admin bar (logged-in) : même décalage que le header fixe. */
body.admin-bar .site-nav { top: calc(var(--header-h) + 32px); }
}
@media (max-width: 782px) {
body.admin-bar .site-nav { top: calc(var(--header-h) + var(--ab-shift, 46px)); }
}
/* Le body ne défile plus derrière le panneau ouvert (classe posée par main.js). */
html.nav-locked, html.nav-locked body { overflow: hidden; }
@media (max-width: 900px) {
.site-nav .menu { flex-direction: column; gap: .4rem; }
.site-nav .menu-item { border-bottom: 1px solid var(--line); }
.site-nav .menu > .menu-item { border-bottom: 0; }
/* Piliers L1 = cartes vertes (un cran + sombre que les catégories). */
.site-nav .menu > .menu-item > a {
font-family: var(--font-h); font-size: 1.15rem; font-weight: 600;
padding: .9rem 1rem; border-bottom: 0;
background: color-mix(in srgb, var(--forest) 15%, #fff);
color: var(--forest-deep); border-radius: 8px;
}
.site-nav .menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; }
.site-nav .menu > .menu-item-has-children > a::after {
content: ""; width: .48em; height: .48em; flex: none;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); opacity: .85; transition: transform .2s var(--ease);
}
.site-nav .menu-item.is-expanded > a { background: color-mix(in srgb, var(--forest) 24%, #fff); }
.site-nav .menu > .menu-item-has-children.is-expanded > a::after { transform: rotate(-135deg); }
/* méga → accordéon mobile */
.site-nav .sub-menu { list-style: none; margin: 0; padding: 0 0 .7rem .8rem; display: none; }
.site-nav .menu-item.is-expanded > .sub-menu { display: block; }
.site-nav .sub-menu .menu-item { border: 0; }
.site-nav .sub-menu .menu-item > a {
padding: .55rem var(--sp-3); font-size: 1rem; color: var(--muted);
border-radius: var(--radius-sm); border-bottom: 0;
}
.site-nav .sub-menu .menu-item > a:hover,
.site-nav .sub-menu .menu-item > a:active { background: var(--forest-tint); color: var(--forest); }
}
/* ── Buttons ── */
.btn, .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce #respond input#submit, .woocommerce-page .button {
display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.5rem;
border: 0; border-radius: 10px;
background: var(--forest); color: #fff !important; font-family: var(--font-b);
font-weight: 600; font-size: .98rem; line-height: 1.2; text-decoration: none; cursor: pointer;
box-shadow: var(--shadow-sm); transition: background .15s var(--ease), transform .05s var(--ease);
}
.btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover { background: var(--forest-2); color: #fff !important; }
.btn:active, .woocommerce .button:active { background: var(--forest-3); transform: translateY(1px); }
/* CTA avec flèche (charte : bouton principal →) */
.btn--arrow::after { content: "\2192"; font-weight: 500; transition: transform .18s var(--ease); }
.btn--arrow:hover::after { transform: translateX(3px); }
.btn--ghost { background: rgba(255,255,255,.14); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.55); margin-left: .75rem; }
.btn--ghost:hover { background: rgba(255,255,255,.24); }
/* ── Hero (front page — maquette v1 : bande bleu pâle, illustration détourée,
vague ivoire en pied, 3 USP iconées sous le CTA) ── */
.hero { position: relative; background: var(--hero-blue); padding-top: var(--header-h); overflow: hidden; }
/* masque crème en tête : la headbar coule dans le hero en une seule vague qui
descend jusqu'à ~40 % de la hauteur, DERRIÈRE le contenu (texte + illustration). */
/* Le masque démarre SOUS le header fixe (le hero commence derrière lui).
Courbe : filet crème fin (~5px) sous le header à gauche, arc arrondi, descente
qui s'accélère vers 40% de la largeur, creux max ~42% de la hauteur du hero,
puis légère remontée au bord droit. */
.hero::before {
content: ""; position: absolute; top: var(--header-h); left: 0; right: 0; height: 50%; z-index: 1;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23f8f6f1' d='M0 0 H1440 V62 C 1380 72 1320 78 1230 76 C 1080 74 960 56 820 36 C 680 14 420 2 0 19 Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
/* Vague de transition vers l'ivoire : plusieurs vagues basses, d'amplitudes
légèrement différentes (inspiration maquette v2). preserveAspectRatio=none →
ne PAS étirer verticalement (sinon les crêtes grandissent avec la largeur) :
on garde le viewBox à 100% et une hauteur fixe. */
.hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; z-index: 3;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23f8f6f1' d='M0 30 C 90 30 150 9 240 9 C 330 9 390 30 480 30 C 620 30 700 18 792 18 C 884 18 950 38 1030 38 C 1200 38 1320 25 1440 25 L 1440 60 L 0 60 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.hero__inner {
position: relative; z-index: 2; max-width: var(--wide); margin-inline: auto; width: 100%;
padding: var(--sp-8) var(--space) calc(var(--sp-16) + 40px);
display: grid; grid-template-columns: minmax(0, 58%) 1fr; gap: var(--sp-8); align-items: center;
}
.hero__copy { padding-top: 70px; }
.hero h1 { font-size: var(--fs-hero); font-weight: 700; color: var(--ink); margin: 0 0 1rem; }
/* display:block : chaque segment de couleur tient sa propre ligne, à toutes les
largeurs (rythme maquette « L'hydroponie / simple, propre / et productive. ») */
.hero h1 .accent { display: block; color: var(--forest); }
.hero__lead { font-size: 1.15rem; font-weight: 500; color: var(--muted); margin: 0 0 1.7rem; max-width: 42ch; }
/* Illustration hors grid : absolue en bas-droite du hero, 70% de sa hauteur
(ratio préservé), z-index 1 = au-dessus des masques de fond (::before z1, ordre
DOM) mais SOUS les textes (inner z2) et sous la vague du bas (::after z3). */
.hero__art {
position: absolute; z-index: 1; bottom: 0;
/* collée au bord droit du viewport ; au-delà de 1920px de large, reste calée
sur le cadre virtuel 1920 centré (50% - 960px) */
right: max(0px, calc(50% - 960px));
/* 85% de la hauteur du hero, plafonnée pour ne JAMAIS passer sous le header
(le hero commence derrière lui : hauteur max = hero − header) */
height: min(85%, calc(100% - var(--header-h)));
}
.hero__art img { height: 100%; width: auto; max-width: none; }
/* USP iconées sous le CTA */
/* Desktop : une seule ligne (pas de retour). Chaque puce = largeur de son contenu ;
le gap fixe donne un spacing identique entre chacune (pas de largeur forcée). */
.hero__usp { list-style: none; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 2.25rem; margin: 2.2rem 0 0; padding: 0; }
.hero__usp li { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .7rem; font-size: .9rem; color: var(--ink); line-height: 1.35; }
/* les 2 lignes sont fixées par le
du markup — on empêche tout retour auto en plus */
.hero__usp-txt { white-space: nowrap; }
.hero__usp-ico {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%; background: #fff;
border: 1px solid var(--line); color: var(--forest);
}
.hero__usp-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
.hero__inner { grid-template-columns: 1fr; padding-bottom: 0; }
/* retour au flux : l'illustration suit les textes, plongée dans la vague du bas */
.hero__art { position: static; height: auto; margin: var(--sp-6) 0 -76px; }
.hero__art img { height: auto; width: 100%; max-width: 520px; margin-inline: auto; }
/* mobile : les puces peuvent se réempiler */
.hero__usp { flex-wrap: wrap; gap: .8rem 1.4rem; }
.hero__usp li { flex: 0 1 auto; }
}
/* ── Argus / réassurance (E1) — items réutilisés dans .home-intro__argus ── */
.trust__item { display: inline-flex; align-items: center; gap: .6rem; }
.trust__ico { width: 20px; height: 20px; stroke: var(--forest); fill: none; stroke-width: 1.6; flex: none; }
/* ── Home sections ── */
.home-best, .home-promos, .home-editorial, .home-guides { max-width: var(--wide); margin-inline: auto; padding: var(--sp-16) var(--space) 0; }
.home-editorial, .home-guides { padding-bottom: var(--sp-16); }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 1.2rem; margin-bottom: var(--sp-6); }
.sec-head h2 { font-size: var(--fs-700); margin: .3rem 0 0; }
.sec-head .more { color: var(--forest); font-weight: 600; font-size: .95rem; white-space: nowrap; text-decoration: none; }
.sec-head .more:hover { text-decoration: underline; }
.sec-head .more::after { content: " \2192"; }
/* ── Rayons : bande blanche + slider de cartes photo beige (maquette v2) ── */
.home-cats-band, .home-promos-band { position: relative; background: #fff; margin-top: var(--sp-16); }
.home-promos-band .home-promos { padding-bottom: var(--sp-16); }
/* Cards produit de « En promotion » : fond beige très très light (sur bande blanche). */
.home-promos ul.products li.product { background: var(--promo-card-bg); }
/* Vagues de séparation (≤40px) : le blanc des bandes ondule dans la crème, en tête
(::before, au-dessus) et en pied (::after, en dessous). */
.home-cats-band::before, .home-promos-band::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 20 C 90 20 150 6 240 6 C 330 6 390 20 480 20 C 620 20 700 12 792 12 C 884 12 950 26 1030 26 C 1200 26 1320 16 1440 16 L 1440 40 L 0 40 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.home-cats-band::after, .home-promos-band::after {
content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 20 C 90 20 150 6 240 6 C 330 6 390 20 480 20 C 620 20 700 12 792 12 C 884 12 950 26 1030 26 C 1200 26 1320 16 1440 16 L 1440 0 L 0 0 Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
.home-cats { max-width: var(--wide); margin-inline: auto; padding: var(--sp-16) var(--space); }
.cats-ctl { display: flex; align-items: center; gap: 1.2rem; }
.cats-arrows { display: none; gap: .5rem; }
@media (min-width: 721px) { .cats-arrows { display: inline-flex; } }
.cats-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--forest); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s var(--ease), border-color .15s var(--ease); }
.cats-arrow:hover { background: var(--forest-tint); border-color: var(--leaf); }
/* overflow-x:auto force overflow-y:auto (spec) → sans padding vertical, l'ombre et
le lift au survol des cartes sont clippés. On ajoute une zone verticale clip-safe
(padding-block, visible car dans la border-box du conteneur scroll) et on compense
par une marge négative pour ne pas gonfler l'espacement de la section. */
.cats-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
margin-inline: calc(-1 * var(--space)); padding-inline: var(--space);
padding-block: 8px 40px; margin-block: -4px -28px; scroll-padding-left: var(--space); }
.cats-viewport::-webkit-scrollbar { display: none; }
.cats--track { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; }
.cats--track > li { flex: 0 0 clamp(210px, 22%, 260px); scroll-snap-align: start; }
/* Carte catégorie : fond beige, image en cover, libellé dessous. */
.cat-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink);
background: var(--earth-tint); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); }
.cat-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: color-mix(in srgb, var(--leaf) 30%, var(--line)); }
.cat-card__media { display: block; aspect-ratio: 1/1; overflow: hidden; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.cat-card:hover .cat-card__media img { transform: scale(1.05); }
.cat-card__label { display: flex; flex-direction: column; gap: .2rem; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.cat-card__name { font-family: var(--font-h); font-weight: 700; font-size: 1.18rem; line-height: 1.22; letter-spacing: -.015em; color: var(--ink); }
.cat-card__desc { font-size: .88rem; line-height: 1.35; color: var(--muted); }
/* « Afficher + de catégories » : masqué par défaut (desktop = carousel, tout visible). */
.cats-more-btn { display: none; border: 0; }
@media (max-width: 720px) {
/* Carousel horizontal → liste verticale : items à des Y différents ⇒ le lazy natif
ne précharge plus tout le rail (cf brief perf). Flèches déjà masquées < 721px. */
.home-cats .cats-viewport { overflow: visible; scroll-snap-type: none; }
.cats--track { flex-direction: column; gap: var(--sp-3); }
.cats--track > li { flex: none; width: auto; scroll-snap-align: none; }
/* Carte horizontale : image à gauche (~30 %), texte à droite. */
.cat-card { flex-direction: row; align-items: stretch; }
.cat-card:hover { transform: none; }
.cat-card__media { width: 30%; flex: none; aspect-ratio: 1 / 1; }
.cat-card__label { flex: 1; justify-content: center; gap: .15rem; padding: var(--sp-4); }
.cat-card__name { font-size: 1.05rem; }
/* Au-delà du param (4) : masqués jusqu'au clic sur « Afficher + » (JS retire
.is-overflow). display:none ⇒ leurs images ne se chargent qu'au dépliage. */
.cats--track > li.is-overflow { display: none; }
.cats-more-btn { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; margin: var(--sp-4) auto 0; padding: .5rem 1rem; font-size: .9rem; font-weight: 600; color: var(--forest); background: var(--forest-tint); border-radius: var(--radius-pill); cursor: pointer; }
.cats-more-btn::after { content: "\25BE"; font-size: .8em; }
}
.btn--outline { background: transparent; color: var(--forest) !important; border: 1.5px solid var(--forest); box-shadow: none; }
.btn--outline:hover { background: var(--forest); color: #fff !important; }
/* ── Product grid + cards (shop + home) ── */
.woocommerce ul.products, ul.products { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.home-best ul.products { grid-template-columns: repeat(5, 1fr); }
.home-best__foot { display: flex; justify-content: flex-end; margin-top: var(--sp-6); }
.home-promos ul.products { grid-template-columns: repeat(5, 1fr); }
ul.products li.product, .product-card {
margin: 0 !important; width: auto !important; position: relative; display: flex; flex-direction: column;
background: var(--card); border: 1px solid var(--line); border-radius: 18px;
box-shadow: none;
transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
/* pas d'overflow:hidden (sinon le tooltip du cœur serait coupé) → on arrondit le
haut de l'image pour épouser les coins de la carte. */
ul.products li.product:hover, .product-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: color-mix(in srgb, var(--leaf) 30%, var(--line)); }
/* image : produit CONTENU et padded (maquette v2), sur fond blanc — plus de plein cadre cover */
li.product > a img, .product-card > a img, .product-card img.attachment-woocommerce_thumbnail { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #fff; padding: var(--sp-5) var(--sp-5) var(--sp-3); border-radius: 17px 17px 0 0; }
/* Le lien produit (image + body) grandit en colonne → le body remplit la carte,
ce qui permet de coller le prix en bas (margin-top:auto), au même endroit sur
toutes les cartes quelle que soit la longueur du titre. */
li.product > a:not(.button), .product-card > a:not(.button) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.product-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-2); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.product-card__body .price { margin-top: auto; align-self: flex-end; padding-top: .3rem; }
li.product .woocommerce-loop-product__title, .product-card .woocommerce-loop-product__title { font-family: var(--font-h); font-size: 1.02rem; font-weight: 600; line-height: 1.28; letter-spacing: -.01em; padding: 0 !important; margin: 0; color: var(--ink); }
li.product .price, .product-card .price { color: var(--ink); font-weight: 700; font-size: 1.06rem; font-variant-numeric: tabular-nums; }
li.product .price del, .product-card .price del { color: var(--faint); font-weight: 400; font-size: .78em; margin-right: .35rem; }
li.product .price ins, .product-card .price ins { text-decoration: none; color: var(--terracotta); }
.star-rating span::before, .woocommerce .star-rating span::before { color: var(--amber); }
/* Rangée d'actions en pied de carte : Favori (cœur seul + tooltip) + lien fiche
(prend la place restante). margin-top:auto → collée en bas quelle que soit la hauteur. */
.product-card__actions { display: flex; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); margin-top: auto; }
.product-card__view {
flex: 1; min-width: 0; margin: 0; justify-content: center; text-align: center;
padding: .6rem .6rem; border-radius: 10px; font-size: .9rem; font-weight: 600; line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none;
}
/* Favori = carré, style alternatif (secondaire/outline), cœur seul */
.product-card__fav { position: relative; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; margin: 0;
display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
background: #fff; border: 1.5px solid var(--forest); color: var(--forest); cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease); }
.product-card__fav:hover { background: var(--forest-tint); }
.product-card__fav svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.product-card__fav[aria-pressed="true"] { color: var(--terracotta); border-color: var(--terracotta); }
.product-card__fav[aria-pressed="true"] svg { fill: currentColor; }
/* Tooltip thème (au survol/focus) : bulle encre + flèche, au-dessus du cœur */
.product-card__fav::after, .hpl-pd-fav::after {
content: attr(data-tooltip); position: absolute; bottom: calc(100% + 9px); left: 50%;
transform: translateX(-50%) translateY(4px); z-index: 5;
background: var(--ink); color: #fff; font-family: var(--font-b); font-size: .72rem; font-weight: 500;
line-height: 1.2; padding: .32rem .55rem; border-radius: 7px; white-space: nowrap;
opacity: 0; pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.product-card__fav::before, .hpl-pd-fav::before {
content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
border: 5px solid transparent; border-top-color: var(--ink); z-index: 5;
opacity: 0; pointer-events: none; transition: opacity .15s var(--ease);
}
.product-card__fav:hover::after, .product-card__fav:focus-visible::after,
.hpl-pd-fav:hover::after, .hpl-pd-fav:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.product-card__fav:hover::before, .product-card__fav:focus-visible::before,
.hpl-pd-fav:hover::before, .hpl-pd-fav:focus-visible::before { opacity: 1; }
/* le lien fiche hérite du .button primaire (vert plein) */
.woocommerce span.onsale, span.onsale {
position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; margin: 0;
background: var(--terracotta); color: #fff; font-family: var(--font-b); font-size: .72rem; font-weight: 700;
padding: .22rem .6rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.stock.out-of-stock { color: var(--terracotta); font-weight: 600; font-size: var(--fs-300); }
.stock.in-stock { color: var(--leaf); font-weight: 600; font-size: var(--fs-300); }
/* Les cartes sont entièrement cliquables : pas de soulignement de lien dedans
(le bouton garde son propre style). */
ul.products li.product a:not(.button), .product-card a:not(.button) { text-decoration: none; }
/* Sections croisées (Woo) : « Produits similaires » / up-sells — même gabarit.
Rendues DANS div.product (grid 2 col) → pleine largeur + prix carte normal,
pas le fs-700 du prix produit. */
.single-product div.product section.related.products,
.single-product div.product section.up-sells.products { grid-column: 1 / -1; }
.single-product div.product ul.products li.product .price { font-size: 1rem; }
.related.products > h2, .up-sells.products > h2 { font-size: var(--fs-700); margin: var(--sp-12) 0 var(--sp-2); }
/* Mobile : 2 colonnes compactes partout (shop, similaires, sélection d'article) —
la colonne unique en minmax(220px,1fr) donnait des cartes pleine largeur
démesurées (image 1:1 = ~90vw de haut chacune). */
@media (max-width: 1150px) {
.home-best ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.home-best ul.products, .home-promos ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
li.product .woocommerce-loop-product__title, .product-card .woocommerce-loop-product__title { font-size: .95rem; }
li.product .price, .product-card .price { font-size: .95rem; }
.related.products > h2, .up-sells.products > h2 { font-size: var(--fs-600); }
/* Toutes les grilles produits (shop/catégories, similaires, up-sells,
sélection d'article, home) : liste — 1 produit par ligne, image à gauche,
infos + bouton à droite. Le lien produit passe en display:contents pour
que l'image et le corps se placent directement dans la grille du . */
.woocommerce ul.products, ul.products,
.home-best ul.products, .home-promos ul.products { grid-template-columns: 1fr; gap: .7rem; }
ul.products li.product {
display: grid; grid-template-columns: 108px minmax(0, 1fr);
grid-template-rows: auto auto; gap: .3rem var(--sp-4);
align-items: start; padding: var(--sp-3);
}
ul.products li.product > a:not(.button) { display: contents; }
ul.products li.product img {
grid-column: 1; grid-row: 1 / span 2;
width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); padding: var(--sp-2);
}
/* liste : infos en haut-droite, rangée d'actions (Favori | Acheter) dessous. */
ul.products li.product .product-card__body { grid-column: 2; grid-row: 1; padding: 0; gap: .25rem; }
ul.products li.product .product-card__actions { grid-column: 2; grid-row: 2; padding: 0; }
}
/* ── Bande impact : vert profond uni (DA v3 — plus de texture feuillage sombre,
la maquette est claire ; seul le footer et cette bande restent foncés). ── */
.band-impact { position: relative; color: #fff; background-color: var(--forest-deep); }
.band-impact > * { position: relative; z-index: 1; }
.btn--light { background: #fff; color: var(--forest-deep) !important; }
.btn--light:hover { background: var(--cream); color: var(--forest-deep) !important; }
.kicker--light { color: #a6bdce; }
.edito-band { margin-top: var(--sp-16); }
.edito-band__inner { max-width: var(--wide); margin-inline: auto; padding: var(--sp-16) var(--space); }
.edito-band h2 { font-size: var(--fs-700); margin: .4rem 0 .7rem; color: #fff; }
.edito-band p { font-size: 1.1rem; margin: 0 0 1.5rem; opacity: .95; }
/* ── Bloc « une solution d'avenir » (maquette) : panneau clair terre, illustration
détourée à gauche, kicker + checklist à droite, déco microbes en marge. ── */
.feature-split { max-width: var(--wide); margin: var(--sp-16) auto 0; padding-inline: var(--space); }
.feature-split__inner { position: relative; background: var(--earth-tint); border-radius: var(--radius-lg);
padding: var(--sp-12) var(--sp-8);
display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-12); align-items: center; overflow: hidden; }
.feature-split__media { position: relative; z-index: 1; }
.feature-split__media img { width: 100%; max-width: 520px; margin-inline: auto; }
.feature-split__body { position: relative; z-index: 1; }
.feature-split__body h2 { font-size: var(--fs-700); color: var(--ink); margin: .35rem 0 .9rem; }
.feature-split__body p { font-size: 1.05rem; color: var(--muted); margin: 0 0 1.2rem; max-width: 46ch; }
.feature-split__list { list-style: none; margin: 0 0 1.7rem; padding: 0; display: grid; gap: .7rem; }
.feature-split__list li { position: relative; padding-left: 2.2rem; color: var(--ink); font-size: .98rem; }
.feature-split__list li::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--forest);
}
.feature-split__list li::after {
content: ""; position: absolute; left: .42rem; top: 50%; transform: translateY(-58%) rotate(45deg);
width: .34rem; height: .62rem; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
/* déco : cercle microbes détouré, en marge droite du panneau — le corps se
réserve la place à droite pour que la checklist ne passe pas dessous. */
.feature-split__deco { position: absolute; right: -34px; top: 50%; transform: translateY(-50%); width: 190px; opacity: .9; pointer-events: none; }
@media (min-width: 1101px) { .feature-split__body { padding-right: 170px; } }
@media (max-width: 1100px) { .feature-split__deco { display: none; } }
@media (max-width: 820px) {
.feature-split__inner { grid-template-columns: 1fr; gap: var(--sp-8); padding: var(--sp-8) var(--sp-6); }
}
/* ── Articles & conseils : listing blog (maquette home+blog) ── */
.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.guide-card { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); }
.guide-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: color-mix(in srgb, var(--leaf) 30%, var(--line)); }
.guide-card__media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--cream); }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.guide-card:hover .guide-card__media img { transform: scale(1.05); }
.guide-card__media--ph { background-color: var(--forest-tint); }
.guide-card__body { padding: 0 var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
/* Badge catégorie : pill blanc à cheval sur le bas de l'image (remonté par marge). */
.guide-card__tag { align-self: flex-start; position: relative; z-index: 1; margin: -16px 0 .3rem;
background: #fff; color: var(--forest-2); font-family: var(--font-b); font-weight: 700;
font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
padding: .34rem .7rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.guide-card__body h3 { font-family: var(--font-h); font-size: 1.12rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.guide-card__body h3 a { color: var(--ink); text-decoration: none; }
.guide-card__body h3 a:hover { color: var(--forest); }
.guide-card__excerpt { color: var(--muted); font-size: .92rem; line-height: 1.45; margin: 0; }
/* Méta date + temps de lecture, collée en bas, séparée par un filet. */
.guide-card__meta { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: var(--sp-3);
border-top: 1px solid var(--line); font-size: .8rem; color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 980px) { .guide-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .guide-cards { grid-template-columns: 1fr; } }
/* ── Shop / archive wrapper ── */
.shop { max-width: none; padding-inline: 0; } /* fills .site-main (already the 1240 container) */
.woocommerce-products-header__title, .shop .page-title { font-size: var(--fs-800); }
.term-description, .woocommerce-archive-description { max-width: var(--measure); color: var(--muted); font-size: var(--fs-500); }
/* ── Pagination (shop + blog, unified) ──
Both Woo (nav.woocommerce-pagination > ul.page-numbers > li) and WP core
(nav.pagination > .nav-links, direct children) share the .page-numbers class.
Numbered clickable tiles = standard shop UX + matches the blog. */
.woocommerce-pagination, nav.pagination { margin: var(--sp-12) 0 var(--sp-4); }
.woocommerce-pagination ul.page-numbers, nav.pagination .nav-links {
list-style: none; margin: 0; padding: 0; border: 0; background: transparent;
display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; align-items: center;
}
.woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; }
/* Tile — a (link) and span (current/dots) share the base box. */
.page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; height: 44px; padding: 0 .7rem;
font-family: var(--font-b); font-size: .98rem; font-weight: 600; line-height: 1;
font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
a.page-numbers:hover { background: var(--forest-tint); border-color: var(--leaf); color: var(--forest-2); }
.page-numbers.current {
background: var(--forest); border-color: var(--forest); color: #fff; cursor: default;
box-shadow: var(--shadow-sm);
}
/* Ellipsis — no box, just muted glyph. */
.page-numbers.dots {
background: none; border-color: transparent; color: var(--faint);
min-width: auto; padding: 0 .25rem; cursor: default;
}
/* Prev / next arrows — Woo uses →/←, core uses "Previous/Next" text; both fit. */
.page-numbers.prev, .page-numbers.next { font-weight: 700; }
/* ── Selects (tri des listings, options de variation…) — mêmes codes que les inputs ── */
select, .woocommerce-ordering select.orderby, .single-product .variations select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
min-height: 48px; padding: .55rem 2.6rem .55rem 1rem;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background-color: #fff; color: var(--ink);
font-family: inherit; font-size: .95rem; font-weight: 500; line-height: 1.2;
cursor: pointer; max-width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a625e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
select:hover { border-color: var(--forest); }
select:focus-visible { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 22%, transparent); }
/* ── Single product ── */
.single-product div.product { position: relative; display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: start; }
@media (max-width: 820px) { .single-product div.product { grid-template-columns: 1fr; } }
.single-product .product_title { font-family: var(--font-h); font-size: var(--fs-800); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 var(--sp-4); }
/* Galerie : miniatures verticales à gauche + image principale encadrée. */
.product-gallery { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: var(--sp-3); align-items: start; }
.product-gallery__main { grid-column: 2; grid-row: 1; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.2rem, 3vw, 2.6rem); display: flex; }
.product-gallery__main a { display: block; width: 100%; }
.product-gallery__img { width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.product-gallery__thumbs { grid-column: 1; grid-row: 1; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); padding: 0; margin: 0; }
.product-gallery__thumb { padding: 0; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; width: 72px; aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color .15s var(--ease); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumb.is-active { border-color: var(--forest); }
/* Pas de miniatures (produit sans galerie) → on récupère la gouttière de gauche. */
.product-gallery:not(:has(.product-gallery__thumbs)) { grid-template-columns: 1fr; }
.product-gallery:not(:has(.product-gallery__thumbs)) .product-gallery__main { grid-column: 1; }
@media (max-width: 820px) {
.product-gallery { grid-template-columns: 1fr; }
.product-gallery__main { grid-column: 1; }
.product-gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
}
/* Colonne résumé. */
.single-product .woocommerce-product-rating { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--sp-3); }
.single-product .woocommerce-product-rating .woocommerce-review-link { color: var(--faint); font-size: .9rem; }
.single-product div.product .price { font-family: var(--font-h); font-weight: 700; font-size: var(--fs-700); color: var(--ink); font-variant-numeric: tabular-nums; margin: 0 0 var(--sp-4); }
.single-product div.product .price del { color: var(--faint); font-weight: 400; font-size: .7em; margin-right: .4rem; }
.single-product div.product .price ins { text-decoration: none; color: var(--terracotta); }
.single-product .woocommerce-product-details__short-description { color: var(--muted); margin: 0 0 var(--sp-5); max-width: 48ch; }
.single-product .woocommerce-product-details__short-description p { margin: 0 0 .6rem; }
/* Bandeau specs clés (attributs réels). */
.hpl-pd-features { list-style: none; margin: 0 0 var(--sp-5); padding: var(--sp-4) 0; display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); border-block: 1px solid var(--line); }
.hpl-pd-features li { display: flex; align-items: center; gap: .65rem; }
.hpl-pd-features__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--forest-tint); }
.hpl-pd-features__ic svg { width: 22px; height: 22px; stroke: var(--forest); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hpl-pd-features__txt { display: flex; flex-direction: column; line-height: 1.25; font-size: .82rem; color: var(--muted); }
.hpl-pd-features__txt strong { font-family: var(--font-h); font-size: .96rem; color: var(--ink); }
/* Ligne stock. */
.hpl-pd-stock { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; margin: 0 0 var(--sp-4); }
.hpl-pd-stock__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hpl-pd-stock.is-in { color: var(--leaf); }
.hpl-pd-stock.is-in .hpl-pd-stock__dot { background: var(--leaf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf) 22%, transparent); }
.hpl-pd-stock.is-out { color: var(--terracotta); }
.hpl-pd-stock.is-out .hpl-pd-stock__dot { background: var(--terracotta); }
.hpl-pd-stock__ship { color: var(--faint); font-weight: 500; }
/* Rangée d'achat : quantité + panier + favori. */
.single-product form.cart { display: flex; align-items: stretch; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-5); }
/* Produit variable : la table d'options + le bloc prix/bouton s'empilent ; c'est la
rangée d'ajout (qté + panier + cœur) qui s'aligne, pas tout le formulaire. */
.single-product form.variations_form { display: block; }
.single-product .variations { border: 0; margin: 0 0 var(--sp-4); width: auto; }
.single-product .variations tbody { display: flex; flex-direction: column; gap: var(--sp-3); }
.single-product .variations tr { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.single-product .variations th.label { padding: 0; font-family: var(--font-h); font-weight: 600; color: var(--ink); }
.single-product .variations td.value { padding: 0; display: flex; align-items: center; gap: .75rem; }
.single-product .variations select { min-width: 240px; }
.single-product .reset_variations { font-size: .82rem; color: var(--muted); }
.single-product .single_variation_wrap .woocommerce-variation-price .price { margin: 0 0 var(--sp-3); }
/* Prix de variation rendu côté serveur (option par défaut pré-sélectionnée, cf
SingleProduct::primedSingleVariation) : il est là dès le 1er paint. min-height =
filet pour qu'un changement d'option ne décale jamais la rangée qté + bouton. */
.single-product .single_variation { min-height: 2.4rem; }
.single-product .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: var(--sp-3); flex-wrap: wrap; }
.single-product form.cart .quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.single-product .quantity input.qty { width: 3.2rem; min-height: 52px; text-align: center; padding: .5rem 0; border: 0; background: transparent; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.single-product .quantity input.qty::-webkit-outer-spin-button, .single-product .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-step { width: 40px; border: 0; background: transparent; color: var(--forest); font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s var(--ease); }
.qty-step:hover { background: var(--forest-tint); }
.single-product .single_add_to_cart_button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding-inline: 1.7rem; font-size: 1rem; flex: 1 1 auto; }
.single-product .single_add_to_cart_button::before { content: ""; width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3Cpath d='M2 3h3l2.6 12.4a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.8L21 7H6'/%3E%3C/svg%3E") center/contain no-repeat; }
.hpl-pd-fav { position: relative; width: 52px; min-height: 52px; flex: none; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--forest); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.hpl-pd-fav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hpl-pd-fav:hover { border-color: var(--forest); background: var(--forest-tint); }
.hpl-pd-fav[aria-pressed="true"] { color: var(--terracotta); border-color: var(--terracotta); }
.hpl-pd-fav[aria-pressed="true"] svg { fill: currentColor; }
/* Rangée réassurance. */
.hpl-pd-trust { list-style: none; margin: 0; padding: var(--sp-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line); }
.hpl-pd-trust li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); }
.hpl-pd-trust svg { width: 20px; height: 20px; flex: none; stroke: var(--forest); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Zone détail : onglets + « fréquemment achetés ensemble » côte à côte. */
.hpl-pd-detail { grid-column: 1 / -1; margin-top: var(--sp-12); display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 900px) { .hpl-pd-detail { grid-template-columns: 1fr; } }
.hpl-pd-detail .woocommerce-tabs { grid-column: auto; margin-top: 0; }
.woocommerce-tabs ul.tabs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-6); padding: 0; margin: 0 0 var(--sp-5); border-bottom: 1px solid var(--line); }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding-bottom: .55rem; color: var(--muted); font-family: var(--font-h); font-weight: 600; font-size: .98rem; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
.woocommerce-tabs ul.tabs li.active a { color: var(--forest); border-bottom-color: var(--forest); }
.woocommerce-tabs .panel { color: var(--muted); }
.woocommerce-tabs .panel > h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.woocommerce-tabs .panel ul { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; gap: .6rem; }
.woocommerce-tabs .panel ul li { position: relative; padding-left: 1.7rem; color: var(--ink); }
.woocommerce-tabs .panel ul li::before { content: ""; position: absolute; left: 0; top: .15rem; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a7e40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Fréquemment achetés ensemble. */
.hpl-pd-fbt { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); position: sticky; top: calc(var(--header-h) + 12px); }
.hpl-pd-fbt__title { font-family: var(--font-h); font-size: 1.05rem; margin: 0 0 var(--sp-4); }
.hpl-pd-fbt__list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.hpl-pd-fbt__item { display: flex; align-items: center; gap: .75rem; }
.hpl-pd-fbt__media { width: 56px; height: 56px; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; display: flex; }
.hpl-pd-fbt__media img { width: 100%; height: 100%; object-fit: contain; }
.hpl-pd-fbt__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.hpl-pd-fbt__body > a { font-size: .85rem; color: var(--ink); text-decoration: none; line-height: 1.3; font-weight: 600; }
.hpl-pd-fbt__body > a:hover { color: var(--forest); }
.hpl-pd-fbt__price { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hpl-pd-fbt__price ins { text-decoration: none; color: var(--terracotta); }
.hpl-pd-fbt__price del { color: var(--faint); font-size: .82em; margin-right: .3rem; }
.hpl-pd-fbt__add { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--forest); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; text-decoration: none; transition: background .15s var(--ease); }
.hpl-pd-fbt__add:hover { background: var(--forest-2); color: #fff; }
.hpl-pd-fbt__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.hpl-pd-fbt__total strong { font-family: var(--font-h); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hpl-pd-fbt__cta { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 900px) { .hpl-pd-fbt { position: static; } }
/* Lightbox image produit : overlay plein écran, image ajustée puis zoom taille réelle. */
.hpl-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; overflow: auto; padding: clamp(1rem, 4vw, 3rem); background: rgba(20, 26, 22, .82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); overscroll-behavior: contain; }
.hpl-lightbox.is-open { display: flex; align-items: safe center; justify-content: safe center; }
.hpl-lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); cursor: zoom-in; }
.hpl-lightbox.is-zoomed .hpl-lightbox__img { max-width: none; max-height: none; cursor: zoom-out; }
.hpl-lightbox__close { position: fixed; top: clamp(.8rem, 2vw, 1.4rem); right: clamp(.8rem, 2vw, 1.4rem); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s var(--ease); }
.hpl-lightbox__close:hover { background: rgba(255, 255, 255, .3); }
/* ── Vertical hub curated product grid ([hpl_hub_products]) ── */
.hub-products { margin: var(--sp-12) 0; }
.hub-products__title { font-size: var(--fs-600); margin-bottom: var(--sp-6); }
/* ── Chapô catégorie (maquette-categorie) : titre + description + visuel top-level ── */
.cat-chapo { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; margin: var(--sp-6) 0 var(--sp-10); background: var(--forest-tint); border-radius: var(--radius-lg); overflow: hidden; }
.cat-chapo--noimg { grid-template-columns: 1fr; }
.cat-chapo__body { align-self: center; padding: clamp(1.6rem, 4vw, 3rem); }
.cat-chapo__title { font-family: var(--font-h); font-size: var(--fs-800); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 var(--sp-3); color: var(--ink); }
.cat-chapo__desc { color: var(--muted); max-width: 48ch; }
.cat-chapo__desc p { margin: 0 0 .6rem; }
.cat-chapo__desc p:last-child { margin-bottom: 0; }
.cat-chapo__media { position: relative; min-height: 100%; }
.cat-chapo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
.cat-chapo { grid-template-columns: 1fr; }
.cat-chapo__media { min-height: 200px; }
.cat-chapo__media img { position: static; }
}
/* ── Sous-catégories : chips rectangulaires (affiner la recherche) ── */
.cat-subnav { margin: 0 0 var(--sp-16); }
.cat-subnav__intro { color: var(--muted); font-size: .92rem; margin: 0 0 var(--sp-4); }
.cat-subnav__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: 0; margin: 0; }
/* Chips vertes habillées d'un feuillage (motifs découpés de fonds-plante.png,
posés par-dessus le fond vert). 3 motifs alternés pour éviter la répétition. */
.cat-subnav__chip { position: relative; overflow: hidden; display: inline-flex; align-items: center; padding: .6rem 1.15rem; border: 1px solid transparent; border-radius: var(--radius); background-color: var(--forest); color: #fff; background-repeat: no-repeat; background-position: right -22px center; background-size: auto 130%; font-size: .9rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .15s var(--ease); }
.cat-subnav__list li:nth-child(3n+1) .cat-subnav__chip { background-image: url("../images/da/leaf-a.png"); }
.cat-subnav__list li:nth-child(3n+2) .cat-subnav__chip { background-image: url("../images/da/leaf-b.png"); }
.cat-subnav__list li:nth-child(3n) .cat-subnav__chip { background-image: url("../images/da/leaf-c.png"); }
.cat-subnav__chip:hover, .cat-subnav__chip:focus-visible { background-color: var(--forest-2); color: #fff; }
.cat-subnav__chip.is-current { background-color: var(--forest-deep); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
/* ── Layout catégorie : sidebar filtres | grille ── */
.shop-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 900px) { .shop-body { grid-template-columns: 1fr; } }
.shop-filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); position: sticky; top: calc(var(--header-h) + 12px); }
/* Décalage sous la wp-adminbar (header fixed déjà à top:32px). Les deux sticky
passent static sous 900px, où l'adminbar desktop = 32px → un seul offset suffit. */
body.admin-bar .shop-filters, body.admin-bar .hpl-pd-fbt { top: calc(var(--header-h) + 12px + 32px); }
/* Sidebar longue (arbre rayons + facettes) : elle scrolle dans son propre sticky. */
@media (min-width: 901px) { .shop-filters { max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; overscroll-behavior: contain; } }
@media (max-width: 900px) { .shop-filters { position: static; } }
.shop-filters__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--sp-2); }
.shop-filters__head h2 { font-family: var(--font-h); font-size: 1.1rem; margin: 0; }
.shop-filters__reset { font-size: .8rem; color: var(--terracotta); text-decoration: underline; text-underline-offset: 2px; }
.shop-filters__group { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.shop-filters__group:first-of-type { border-top: 0; padding-top: var(--sp-2); }
.shop-filters__group h3 { font-family: var(--font-h); font-size: .92rem; font-weight: 600; margin: 0 0 var(--sp-3); color: var(--ink); }
.shop-filters__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.shop-filters__cats li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.shop-filters__cats a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.shop-filters__cats a:hover { color: var(--forest); }
.shop-filters__cats li.is-current a { color: var(--forest); font-weight: 700; }
.shop-filters__count { flex: none; font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
/* Facette catégories (shop/search) : checkboxes multi-select, filtre sur place. */
.shop-filters__facet { list-style: none; margin: 0 -.5rem; padding: 0; display: grid; gap: .18rem; }
.shop-facet { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; padding: .28rem .5rem; border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.2; color: var(--muted); transition: color .12s var(--ease), background-color .12s var(--ease); }
.shop-facet:hover { color: var(--ink); background: var(--forest-tint); }
.shop-facet input { width: 17px; height: 17px; flex: none; margin: 1px 0 0; accent-color: var(--forest); cursor: pointer; }
.shop-facet__name { flex: 1 1 auto; min-width: 0; }
.shop-facet .shop-filters__count { margin-top: 1px; }
/* Actif (coché) : label en léger gras. */
.shop-facet:has(input:checked) .shop-facet__name { font-weight: 600; color: var(--ink); }
.shop-filters__submit { width: 100%; justify-content: center; margin-top: var(--sp-2); }
.shop-filters__price-row { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--sp-3); color: var(--faint); }
.shop-filters__price-row input { width: 100%; min-width: 0; min-height: 42px; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: .9rem; }
.shop-filters__price .btn { width: 100%; justify-content: center; }
/* Slider prix double poignée : deux superposés + segment rempli.
pointer-events géré pour que les 2 pouces restent attrapables. */
.price-slider { position: relative; height: 30px; margin: .2rem 0 var(--sp-4); }
.price-slider__track { position: absolute; top: 50%; left: 2px; right: 2px; height: 4px; transform: translateY(-50%); background: var(--line); border-radius: 2px; }
.price-slider__fill { position: absolute; top: 0; bottom: 0; background: var(--forest); border-radius: 2px; }
.price-slider__range { position: absolute; top: 0; left: 0; width: 100%; height: 30px; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.price-slider__range:focus-visible { outline: none; }
.price-slider__range::-webkit-slider-runnable-track { background: none; border: none; }
.price-slider__range::-moz-range-track { background: none; border: none; }
.price-slider__range::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--forest); box-shadow: var(--shadow-sm); cursor: grab; transition: border-color .15s var(--ease); }
.price-slider__range::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--forest); box-shadow: var(--shadow-sm); cursor: grab; }
.price-slider__range::-webkit-slider-thumb:active { cursor: grabbing; border-color: var(--forest-2); }
.price-slider__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 30%, transparent); }
/* Carte produit : marque + ligne de spec (axes de comparaison). */
.product-card__brand { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-2); }
.product-card__spec { font-size: .82rem; color: var(--muted); }
.product-card__noimg { display: block; width: 100%; aspect-ratio: 1/1; background: var(--card-soft); border-radius: 17px 17px 0 0; }
/* ── Toolbar (résultats + tri) au-dessus de la grille ── */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.shop-main .woocommerce-result-count { margin: 0; color: var(--muted); font-size: .9rem; }
.shop-main .woocommerce-ordering { margin: 0; }
.shop-main ul.products { margin-top: 0; }
/* ── Trust bar sous la grille catégorie ── */
.shop-trust { list-style: none; margin: var(--sp-12) 0 0; padding: var(--sp-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.shop-trust li { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: var(--muted); }
.shop-trust svg { width: 26px; height: 26px; flex: none; color: var(--forest); }
@media (max-width: 760px) { .shop-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .shop-trust { grid-template-columns: 1fr; } }
.search-help { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-4); margin-top: var(--sp-12); }
.search-help__card { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-6); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.search-help__card--contact { background: var(--forest-tint); border-color: transparent; }
.search-help__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--forest-tint); color: var(--forest); }
.search-help__card--contact .search-help__ic { background: #fff; }
.search-help__ic svg { width: 22px; height: 22px; }
.search-help__card h3 { font-family: var(--font-h); font-size: 1.02rem; margin: 0 0 .3rem; }
.search-help__card p { color: var(--muted); font-size: .9rem; margin: 0 0 var(--sp-3); }
.search-help__link { color: var(--forest); font-weight: 600; text-decoration: none; }
.search-help__link:hover { text-decoration: underline; }
/* Champ de capture d'intention (1re carte) + état merci. */
.search-help__intent { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; margin-top: var(--sp-2); }
.search-help__intent textarea { flex: 1 1 12rem; min-width: 0; min-height: 44px; height: 44px; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font: inherit; line-height: 1.35; resize: vertical; }
.search-help__intent textarea:focus-visible { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 22%, transparent); }
.search-help__intent .btn { flex: none; min-height: 44px; }
.search-help__thanks { color: var(--forest); font-weight: 600; }
@media (max-width: 640px) { .search-help { grid-template-columns: 1fr; } }
.search-empty__lead { font-size: 1.05rem; color: var(--muted); margin: var(--sp-6) 0; }
.search-noindex { display: flex; align-items: center; gap: .5rem; margin-top: var(--sp-8); color: var(--faint); font-size: .82rem; }
/* ══ Pages piliers (hubs technique — Content\Hub) : refonte langage global ══ */
.pilier { display: block; }
/* Hero chapô : eyebrow + titre + lead + CTA à gauche, illustration à droite. */
.pilier-hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; gap: var(--sp-8); margin: var(--sp-6) 0 var(--sp-12); background: var(--forest-tint); border-radius: var(--radius-lg); overflow: hidden; }
.pilier-hero__body { align-self: center; padding: clamp(1.6rem, 4vw, 3rem); }
.pilier-hero__title { font-family: var(--font-h); font-size: var(--fs-800); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); margin: var(--sp-2) 0 var(--sp-3); }
.pilier-hero__lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; margin: 0 0 var(--sp-5); max-width: 48ch; }
.pilier-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Freshness signal: shown only when a pillar was revised >1 month after publish
(hpl_post_date $only_updated). Pages carry no date otherwise. */
.pilier-hero__updated { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 var(--sp-5); color: var(--muted); font-size: .85rem; font-weight: 500; }
.pilier-hero__updated svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pilier-hero__media { position: relative; min-height: 100%; }
.pilier-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .pilier-hero { grid-template-columns: 1fr; } .pilier-hero__media { min-height: 220px; } .pilier-hero__media img { position: static; } }
/* Immersive pillar hero: full-bleed blue band, cream waves top and bottom,
artwork bleeding off the right edge. Applied by the dedicated pillar template.
Breaks out of the 1240 .site-main container to span the full viewport width. */
body.pilier-immersif { overflow-x: clip; }
/* Pull the hero (and its top wave) up close to the navbar; keep a small gap so
the blue band never tucks under the fixed header. */
body.pilier-immersif .site-main { padding-top: var(--sp-3); }
body.pilier-immersif .woocommerce-breadcrumb { margin-bottom: var(--sp-2); }
.pilier-hero--immersif { display: block; grid-template-columns: none; position: relative; width: 100vw; margin: 0 0 var(--sp-10) calc(50% - 50vw); background: var(--hero-blue); border-radius: 0; overflow: hidden; }
.pilier-hero--immersif::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23f8f6f1' d='M0 0 H1440 V62 C 1380 72 1320 78 1230 76 C 1080 74 960 56 820 36 C 680 14 420 2 0 19 Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat; }
.pilier-hero--immersif::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; z-index: 3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23f8f6f1' d='M0 30 C 90 30 150 9 240 9 C 330 9 390 30 480 30 C 620 30 700 18 792 18 C 884 18 950 38 1030 38 C 1200 38 1320 25 1440 25 L 1440 60 L 0 60 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
.pilier-hero--immersif .pilier-hero__inner { position: relative; z-index: 2; max-width: var(--wide); margin-inline: auto; width: 100%; padding: var(--sp-6) var(--space) calc(var(--sp-16) + 40px); display: grid; grid-template-columns: minmax(0, 56%) 1fr; gap: var(--sp-8); align-items: center; }
.pilier-hero--immersif .pilier-hero__body { align-self: center; padding: 0; }
.pilier-hero--immersif .pilier-hero__art { position: absolute; z-index: 1; bottom: 0; right: max(0px, calc(50% - 960px)); height: min(86%, calc(100% - var(--header-h))); }
.pilier-hero--immersif .pilier-hero__art img { height: 100%; width: auto; max-width: none; }
@media (max-width: 820px) {
.pilier-hero--immersif .pilier-hero__inner { grid-template-columns: 1fr; padding-bottom: 0; }
.pilier-hero--immersif .pilier-hero__art { position: static; height: auto; margin: var(--sp-6) 0 -60px; text-align: center; }
.pilier-hero--immersif .pilier-hero__art img { height: auto; width: 100%; max-width: 520px; margin-inline: auto; }
}
/* Prose éditoriale : une colonne de lecture centrée (74ch), grille curée en breakout. */
.pilier-prose { max-width: 74ch; margin: var(--sp-12) auto 0; color: var(--muted); font-size: 1.02rem; line-height: 1.75; }
.pilier-prose > .hub-products { max-width: none; }
.pilier-prose h2 { font-family: var(--font-h); font-size: var(--fs-700); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: var(--sp-12) 0 var(--sp-4); }
.pilier-prose h3 { font-family: var(--font-h); font-size: var(--fs-500); line-height: 1.3; color: var(--ink); margin: var(--sp-8) 0 var(--sp-2); }
.pilier-prose p { margin: 0 0 var(--sp-4); }
.pilier-prose strong { color: var(--ink); }
.pilier-prose a { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pilier-prose a:hover { color: var(--forest-2); }
.pilier-prose ul, .pilier-prose ol { padding-left: 1.3em; margin: var(--sp-4) 0; display: grid; gap: .45rem; }
/* Grille curée « Le matériel pour… » : bandeau pleine largeur clair. */
.pilier-prose .hub-products { width: 100vw; margin-inline: calc(50% - 50vw); padding: clamp(2.5rem, 5vw, 4rem) var(--space); margin-block: var(--sp-16); background: var(--content-band); }
.pilier-prose .hub-products__title { font-family: var(--font-h); font-size: var(--fs-700); color: var(--ink); text-align: center; max-width: var(--wide); margin: 0 auto var(--sp-8); }
.pilier-prose .hub-products .products { max-width: var(--wide); margin-inline: auto; }
/* CTA vert de fin. */
.pilier-cta { margin-top: var(--sp-16); }
.pilier-cta__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-6) var(--sp-8); background: var(--forest-deep); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3rem); }
.pilier-cta__inner h2 { font-family: var(--font-h); font-size: var(--fs-600); color: #fff; margin: 0 0 var(--sp-2); }
.pilier-cta__inner p { color: rgba(255, 255, 255, .85); margin: 0; max-width: 54ch; }
.pilier-cta__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.pilier-cta .btn:not(.btn--outline) { background: #fff; color: var(--forest-deep) !important; }
.pilier-cta .btn:not(.btn--outline):hover { background: var(--cream); }
.pilier-cta .btn--outline { border-color: rgba(255, 255, 255, .55); color: #fff !important; background: transparent; }
.pilier-cta .btn--outline:hover { background: rgba(255, 255, 255, .14); }
/* ══ Article (single post) — maquette-article : hero + sommaire + 2 col + sidebar ══ */
.art-hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); margin: var(--sp-4) 0 var(--sp-12); }
.art-hero__tag { display: inline-block; margin-bottom: var(--sp-3); padding: .3rem .7rem; border-radius: var(--radius-pill); background: var(--forest-tint); color: var(--forest); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.art-hero__title { font-family: var(--font-h); font-size: var(--fs-800); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin: 0 0 var(--sp-4); }
.art-hero__lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; margin: 0 0 var(--sp-5); max-width: 52ch; }
.art-hero__meta { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem var(--sp-5); padding: 0; margin: 0; color: var(--muted); font-size: .9rem; font-weight: 500; }
.art-hero__meta li { display: flex; align-items: center; gap: .45rem; }
.art-hero__meta svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--forest); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.art-hero__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
@media (max-width: 860px) { .art-hero { grid-template-columns: 1fr; } .art-hero__media { order: -1; } }
.art-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 900px) { .art-body { grid-template-columns: 1fr; } }
/* Sommaire « Dans cet article » (auto depuis les H2). */
.art-toc { background: var(--card-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.2rem, 3vw, 1.8rem); margin-bottom: var(--sp-10); }
.art-toc__title { font-family: var(--font-h); font-size: 1.1rem; color: var(--ink); margin: 0 0 var(--sp-4); }
.art-toc__list { columns: 2; column-gap: var(--sp-8); margin: 0; padding: 0 0 0 1.4em; }
.art-toc__list li { margin: 0 0 .6rem; break-inside: avoid; }
.art-toc__list li::marker { color: var(--forest); font-weight: 700; }
.art-toc__list a { color: var(--forest); font-weight: 500; text-decoration: none; }
.art-toc__list a:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .art-toc__list { columns: 1; } }
/* Contenu éditorial. */
.art-content { color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.art-content > :first-child { margin-top: 0; }
.art-content h2 { font-family: var(--font-h); font-size: var(--fs-700); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: var(--sp-12) 0 var(--sp-4); scroll-margin-top: calc(var(--header-h) + 20px); }
.art-content h3 { font-family: var(--font-h); font-size: var(--fs-500); line-height: 1.3; color: var(--ink); margin: var(--sp-8) 0 var(--sp-2); }
.art-content p { margin: 0 0 var(--sp-4); }
.art-content a { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.art-content strong { color: var(--ink); }
.art-content ul, .art-content ol { margin: var(--sp-4) 0; padding-left: 1.3em; display: grid; gap: .45rem; }
.art-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: var(--sp-6) 0; }
.art-content blockquote { margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5); background: var(--forest-tint); border-radius: var(--radius); color: var(--ink); }
.art-content blockquote p:last-child { margin: 0; }
.art-products { margin-top: var(--sp-12); }
.art-products h2 { font-family: var(--font-h); font-size: var(--fs-600); color: var(--ink); margin: 0 0 var(--sp-6); }
.art-products ul.products { grid-template-columns: repeat(3, 1fr); }
/* Responsive aligné sur la home : sinon la spécificité de .art-products ul.products
battait la règle mobile ul.products (1fr) et gardait 3 colonnes → scroll horizontal. */
@media (max-width: 900px) { .art-products ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .art-products ul.products { grid-template-columns: 1fr; gap: .7rem; } }
.art-cta { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-12); padding: clamp(1.4rem, 3vw, 2rem); background: var(--card-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.art-cta__ic { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--forest); }
.art-cta__ic svg { width: 28px; height: 28px; }
.art-cta h2 { font-family: var(--font-h); font-size: 1.15rem; color: var(--ink); margin: 0 0 .3rem; }
.art-cta p { color: var(--muted); margin: 0 0 var(--sp-3); }
/* Sidebar sticky. */
/* Two-way sticky géré par assets/js/sticky-sidebar.js (transform translateY /
position fixed). En flow par défaut (fallback no-JS propre). */
.art-sidebar { display: grid; gap: var(--sp-6); align-self: start; will-change: transform; }
.art-side-card { background: var(--card-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); }
.art-side-card--green { background: #fff; border-color: var(--line); }
.art-side-card__title { font-family: var(--font-h); font-size: 1.05rem; color: var(--ink); margin: 0 0 var(--sp-4); }
.art-side-card--green p { color: var(--muted); font-size: .9rem; margin: 0 0 var(--sp-4); }
.art-side-card--green .btn { width: 100%; justify-content: center; }
.art-side-card__more { display: inline-block; margin-top: var(--sp-4); color: var(--forest); font-weight: 600; font-size: .9rem; text-decoration: none; }
.art-side-card__more:hover { text-decoration: underline; }
.art-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.art-recent li { display: flex; gap: .8rem; align-items: center; }
.art-recent__media { width: 80px; height: 60px; flex: none; border-radius: var(--radius-sm); overflow: hidden; background: var(--cream); }
.art-recent__media--ph { background: var(--forest-tint); }
.art-recent__media img { width: 100%; height: 100%; object-fit: cover; }
.art-recent__body { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.art-recent__body a { color: var(--ink); font-size: .9rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.art-recent__body a:hover { color: var(--forest); }
.art-recent__date { color: var(--faint); font-size: .78rem; }
.art-side-trust { list-style: none; margin: 0; padding: var(--sp-2) 0 0; display: grid; gap: var(--sp-4); }
.art-side-trust li { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: var(--muted); }
.art-side-trust svg { width: 24px; height: 24px; flex: none; color: var(--forest); }
/* ── Racine « Conseils » — hero + articles clefs + postlist crawlable ────────── */
.conseils-hero { max-width: 64ch; margin: 0 0 var(--sp-10); }
.conseils-hero__title { font-family: var(--font-h); font-size: var(--fs-800); line-height: 1.08; margin: .4rem 0 var(--sp-4); }
.conseils-hero__lead { font-size: 1.12rem; line-height: 1.6; color: var(--muted); margin: 0; }
.conseils-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-16); }
.conseils .art-body { margin-top: var(--sp-12); }
.conseils--category .art-body { margin-top: var(--sp-10); }
.conseils-back { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: var(--sp-5); color: var(--forest); font-weight: 600; font-size: .92rem; text-decoration: none; }
.conseils-back svg { width: 18px; height: 18px; transition: transform .15s var(--ease); }
.conseils-back:hover { color: var(--forest-2); }
.conseils-back:hover svg { transform: translateX(-3px); }
.conseils-cats li.is-current a { color: var(--forest); font-weight: 700; }
.conseils-cats li.is-current .conseils-cats__n { background: var(--forest); color: #fff; }
@media (max-width: 900px) { .conseils-keys { grid-template-columns: 1fr; } }
.conseils-key { background: var(--card-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); border-top: 3px solid var(--leaf); }
.conseils-key__title { font-family: var(--font-h); font-size: 1.12rem; color: var(--forest-2); margin: 0 0 var(--sp-3); }
.conseils-key__text p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.conseils-key__text a { color: var(--forest); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--leaf); }
.conseils-key__text a:hover { color: var(--forest-2); border-bottom-color: var(--forest-2); }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.post-item { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-6); align-items: stretch; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); }
.post-list > .post-item:last-child { border-bottom: 0; padding-bottom: 0; }
.post-item__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--cream); }
.post-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.post-item__media--ph { background: var(--forest-tint); }
.post-item:hover .post-item__media img { transform: scale(1.04); }
.post-item__body { display: flex; flex-direction: column; gap: .5rem; align-self: center; min-width: 0; }
.post-item__cat { align-self: start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--forest); text-decoration: none; }
.post-item__cat:hover { text-decoration: underline; }
.post-item__title { font-family: var(--font-h); font-size: 1.3rem; line-height: 1.2; margin: 0; }
.post-item__title a { color: var(--ink); text-decoration: none; }
.post-item__title a:hover { color: var(--forest); }
.post-item__excerpt { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-item__meta { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); margin-top: .1rem; }
@media (max-width: 560px) {
.post-item { grid-template-columns: 1fr; gap: var(--sp-4); }
.post-item__media { aspect-ratio: 16 / 9; }
}
.conseils-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.conseils-cats li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.conseils-cats li:last-child { border-bottom: 0; }
.conseils-cats a { color: var(--ink); text-decoration: none; font-size: .95rem; }
.conseils-cats a:hover { color: var(--forest); }
.conseils-cats__n { flex: none; min-width: 1.6rem; text-align: center; font-size: .78rem; font-weight: 600; color: var(--forest); background: var(--forest-tint); border-radius: 999px; padding: .05rem .4rem; }
/* ── Espace compte (maquette-account) ───────────────────────────────────────── */
.btn--sm { padding: .45rem .9rem; font-size: .85rem; }
.account-hero { position: relative; overflow: hidden; margin-bottom: var(--sp-10); }
.account-hero__title { font-family: var(--font-h); font-size: var(--fs-800); line-height: 1.05; margin: .3rem 0 var(--sp-3); }
.account-hero__lead { color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin: 0; }
.account-hero__deco { position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: clamp(180px, 26vw, 320px); opacity: .9; pointer-events: none; }
.account-hero__deco img { width: 100%; height: auto; }
@media (max-width: 780px) { .account-hero__deco { display: none; } }
/* Le shortcode Woo enveloppe nav + contenu dans .woocommerce : c'est LUI le
parent de la grille (2 colonnes), pas .account-wrap. */
.account-wrap .woocommerce { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.account-wrap .woocommerce:not(:has(.account-nav)) { display: block; max-width: 520px; margin-inline: auto; }
/* Chapô sur la page de login uniquement — même largeur que le formulaire. */
.account-intro { max-width: 520px; margin: 0 auto var(--sp-6); color: var(--muted); font-size: 1.05rem; line-height: 1.55; text-align: center; }
@media (max-width: 860px) { .account-wrap .woocommerce { grid-template-columns: 1fr; } }
/* Navigation latérale */
.account-nav { background: var(--card-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4); position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
body.admin-bar .account-nav { top: calc(var(--header-h) + var(--sp-4) + 32px); }
.account-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.account-nav a { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; transition: background .15s var(--ease), color .15s var(--ease); }
.account-nav a:hover { background: var(--forest-tint); color: var(--forest-2); }
.account-nav__ic { flex: none; display: inline-flex; }
.account-nav__ic svg { width: 20px; height: 20px; }
.account-nav .is-active > a, .account-nav a[aria-current="page"] { background: var(--forest); color: #fff; }
.account-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); }
.account-nav .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: #b3261e; background: #fbeceb; }
/* Contenu */
.account-dash { display: grid; gap: var(--sp-10); }
.account-dash__intro h2 { font-family: var(--font-h); font-size: var(--fs-700); margin: 0 0 .2rem; }
.account-dash__intro p { color: var(--muted); margin: 0; }
/* Stats */
.account-stats { display: grid; grid-template-columns: repeat(var(--stat-cols, 3), 1fr); gap: var(--sp-5); }
@media (max-width: 1040px) { .account-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .account-stats { grid-template-columns: 1fr; } }
.account-stat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); }
.account-stat__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--forest-tint); color: var(--forest); margin-bottom: var(--sp-3); }
.account-stat__ic svg { width: 22px; height: 22px; }
.account-stat__label { font-size: .85rem; color: var(--muted); }
.account-stat__n { font-family: var(--font-h); font-size: 1.9rem; line-height: 1.1; color: var(--ink); margin: .1rem 0 var(--sp-3); }
.account-stat__more { margin-top: auto; color: var(--forest); font-weight: 600; font-size: .85rem; text-decoration: none; }
.account-stat__more:hover { text-decoration: underline; }
/* Bandeau d'aide */
.account-help { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-6); background: var(--forest-tint); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.account-help__body { position: relative; z-index: 1; }
.account-help h2 { font-family: var(--font-h); font-size: 1.25rem; color: var(--forest-2); margin: 0 0 .3rem; }
.account-help p { color: var(--ink); margin: 0 0 var(--sp-4); }
.account-help__ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.account-help__deco { position: absolute; right: 0; bottom: 0; width: clamp(200px, 30%, 340px); opacity: .85; pointer-events: none; }
.account-help__deco img { width: 100%; height: auto; }
@media (max-width: 640px) { .account-help__deco { display: none; } }
/* Cartes (dernière commande + adresses) */
.account-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 860px) { .account-cols { grid-template-columns: 1fr; } }
.account-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); }
.account-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--sp-5); }
.account-card__head h2 { font-family: var(--font-h); font-size: 1.15rem; margin: 0; }
.account-card__more { flex: none; color: var(--forest); font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.account-card__more:hover { text-decoration: underline; }
.account-last__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.account-last__no { font-weight: 700; margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.account-last__meta { color: var(--muted); font-size: .88rem; margin: 0; }
.account-last__total { font-family: var(--font-h); font-size: 1.3rem; margin: 0; white-space: nowrap; }
.account-last__items { display: flex; gap: .6rem; margin: var(--sp-4) 0; }
.account-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--cream); border: 1px solid var(--line); }
.account-thumb img { width: 100%; height: 100%; object-fit: cover; }
.account-last__link { color: var(--forest); font-weight: 600; font-size: .9rem; text-decoration: none; }
.account-last__link:hover { text-decoration: underline; }
.account-addr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 460px) { .account-addr__grid { grid-template-columns: 1fr; } }
.account-addr__label { font-weight: 700; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.account-addr address { font-style: normal; color: var(--ink); font-size: .92rem; line-height: 1.5; }
.account-addr__edit { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--sp-3); color: var(--forest); font-weight: 600; font-size: .85rem; text-decoration: none; }
.account-addr__edit svg { width: 15px; height: 15px; }
.account-addr__edit:hover { text-decoration: underline; }
/* Badges statut */
.account-badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .18rem .55rem; border-radius: 999px; border: 1px solid transparent; }
.account-badge.is-progress { background: #fdf3e0; color: #9a6a11; border-color: #f2ddb3; }
.account-badge.is-done { background: #e3ecf3; color: #26506e; border-color: #c6d9e6; }
.account-badge.is-bad { background: #fbeceb; color: #b3261e; border-color: #f2cfcc; }
.account-badge.is-muted { background: var(--forest-tint); color: var(--forest-2); }
/* Table commandes récentes */
.account-orders__scroll { overflow-x: auto; }
.account-orders__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.account-orders__table th { text-align: left; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 0 .8rem var(--sp-3); border-bottom: 1px solid var(--line); }
.account-orders__table td { padding: var(--sp-4) .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.account-orders__table tr:last-child td { border-bottom: 0; }
.account-orders__table td a { color: var(--ink); font-weight: 600; text-decoration: none; }
.account-orders__table td a:hover { color: var(--forest); }
.account-orders__act { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.account-orders__pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.account-orders__pager-info { color: var(--muted); font-size: .9rem; }
/* Dropdown de filtre par statut (page commandes). */
.account-card__head:has(.orders-filter) { align-items: center; flex-wrap: wrap; }
.orders-filter { display: inline-flex; align-items: center; gap: .5rem; }
.orders-filter__label { font-size: .9rem; color: var(--muted); }
.orders-filter__select { position: relative; display: inline-flex; }
.orders-filter__select::after { content: ""; position: absolute; right: .85rem; top: 50%; width: 13px; height: 13px; transform: translateY(-50%); pointer-events: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a625e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.orders-filter select { appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: var(--font-b); font-size: .92rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem 2.3rem .5rem .9rem; cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.orders-filter select:hover { border-color: var(--forest); }
.orders-filter select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-tint); }
.account-orders__empty { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.account-orders__empty a { color: var(--forest-2); font-weight: 600; text-decoration: none; }
.account-orders__empty a:hover { text-decoration: underline; }
@media (max-width: 620px) {
.account-orders__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.account-orders__table, .account-orders__table tbody, .account-orders__table tr, .account-orders__table td { display: block; width: 100%; }
.account-orders__table tr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .4rem .8rem; margin-bottom: var(--sp-4); }
.account-orders__table td { border: 0; padding: .35rem 0; display: flex; justify-content: space-between; gap: 1rem; }
.account-orders__table td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: .82rem; }
.account-orders__act { justify-content: flex-end; }
.account-orders__act::before { content: none; }
}
/* Bande « Optimisez votre système » */
.account-boost { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--sp-8); align-items: center; background: var(--card-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); }
@media (max-width: 860px) { .account-boost { grid-template-columns: 1fr; } }
.account-boost__body h2 { font-family: var(--font-h); font-size: 1.3rem; margin: 0 0 .4rem; }
.account-boost__body p { color: var(--muted); margin: 0 0 var(--sp-4); }
.account-boost__cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
@media (max-width: 560px) { .account-boost__cats { grid-template-columns: repeat(3, 1fr); } }
.account-boost__cats a { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .82rem; text-align: center; }
.account-boost__ic { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .2s var(--ease); }
.account-boost__ic.is-ph { background: var(--forest-tint); color: var(--forest); }
.account-boost__ic.is-ph svg { width: 30px; height: 30px; }
.account-boost__ic img { width: 100%; height: 100%; object-fit: cover; }
.account-boost__cats a:hover .account-boost__ic { transform: translateY(-3px); }
.account-boost__cats a:hover .account-boost__name { color: var(--forest); }
.account-empty { color: var(--muted); }
/* ── Page « Voir la commande » (view-order + order-details) ─────────────────── */
.account-wrap mark { background: transparent; color: inherit; padding: 0; }
.order-view__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--sp-8); }
.order-view__no { font-family: var(--font-h); font-size: 1.4rem; margin: 0; }
.order-view__date { color: var(--muted); margin: .25rem 0 0; }
.order-view__updates-title { font-family: var(--font-h); font-size: 1.1rem; margin: var(--sp-8) 0 var(--sp-4); }
.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-order-downloads__title { font-family: var(--font-h); font-size: 1.15rem; margin: 0 0 var(--sp-4); }
.account-table-scroll { overflow-x: auto; }
.account-wrap table.order_details { width: 100%; min-width: 460px; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font-size: .93rem; }
.account-wrap table.order_details thead th { background: var(--card-soft); text-align: left; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.account-wrap table.order_details tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.account-wrap table.order_details tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--card-soft) 50%, #fff); }
.account-wrap table.order_details th.product-qty, .account-wrap table.order_details td.product-qty { text-align: center; white-space: nowrap; }
.account-wrap table.order_details th.product-pu, .account-wrap table.order_details td.product-pu,
.account-wrap table.order_details th.product-total, .account-wrap table.order_details td.product-total { text-align: right; white-space: nowrap; }
.account-wrap table.order_details .product-name a { color: var(--ink); font-weight: 600; text-decoration: none; }
.account-wrap table.order_details .product-name a:hover { color: var(--forest); }
.account-wrap table.order_details .wc-item-meta { margin: .3rem 0 0; padding: 0; list-style: none; font-size: .82rem; color: var(--muted); }
.account-wrap table.order_details tfoot th { text-align: right; font-weight: 600; padding: var(--sp-3) var(--sp-4); color: var(--muted); }
.account-wrap table.order_details tfoot td { text-align: right; padding: var(--sp-3) var(--sp-4); font-weight: 700; white-space: nowrap; }
.account-wrap table.order_details tfoot tr:first-child th, .account-wrap table.order_details tfoot tr:first-child td { border-top: 2px solid var(--line); }
.account-wrap table.order_details tfoot tr:last-child th, .account-wrap table.order_details tfoot tr:last-child td { font-size: 1.02rem; color: var(--ink); }
.account-wrap .order-actions-button { margin: 0; }
.account-wrap .woocommerce-customer-details { margin-top: var(--sp-10); }
.account-wrap .woocommerce-customer-details address { font-style: normal; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); background: #fff; line-height: 1.6; }
/* Formulaires compte (login, register, mot de passe perdu, détails, adresses) —
champs uniformes & modernes, même pattern focus que le reste du site. */
.account-wrap .woocommerce-form-login,
.account-wrap .woocommerce-form-register,
.account-wrap form.woocommerce-ResetPassword,
.account-wrap form.woocommerce-EditAccountForm,
.account-wrap form.edit-account,
.account-wrap .woocommerce-address-fields {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(1.4rem, 3vw, 2rem);
}
.account-wrap form .form-row,
.account-wrap form .woocommerce-form-row { display: flex; flex-direction: column; margin: 0 0 var(--sp-4); }
.account-wrap form label { font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: .4rem; }
.account-wrap form label .required { color: var(--forest); border: 0; text-decoration: none; }
.account-wrap form .input-text,
.account-wrap form input[type="text"],
.account-wrap form input[type="email"],
.account-wrap form input[type="password"],
.account-wrap form input[type="tel"],
.account-wrap form input[type="number"],
.account-wrap form select,
.account-wrap form textarea,
.account-wrap form .select2-selection {
width: 100%;
min-height: 50px;
padding: .7rem .9rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
font: inherit;
color: var(--ink);
-webkit-appearance: none;
appearance: none;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.account-wrap form .input-text:focus,
.account-wrap form input:focus,
.account-wrap form select:focus,
.account-wrap form textarea:focus {
outline: none;
border-color: var(--forest);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 22%, transparent);
}
.account-wrap form ::placeholder { color: var(--muted); }
.account-wrap form textarea { min-height: 120px; padding: .7rem .9rem; }
/* Champ mot de passe + bouton afficher/masquer (WC n'a pas son icône sans son CSS
front : on repositionne le toggle dans le champ avec un œil en masque SVG). */
.account-wrap form .password-input { position: relative; display: block; }
.account-wrap form .password-input input { padding-right: 2.8rem; }
.account-wrap form .show-password-input { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; color: var(--muted); }
.account-wrap form .show-password-input::after { content: ""; display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.account-wrap form .show-password-input.display-password { color: var(--forest); }
/* Case « se souvenir de moi » : ligne horizontale, pas un champ pleine largeur */
.account-wrap form .woocommerce-form-login__rememberme { flex-direction: row; align-items: center; gap: .5rem; margin: 0 0 var(--sp-4); font-weight: 500; color: var(--muted); }
.account-wrap form .woocommerce-form-login__rememberme input { min-height: 0; width: auto; margin: 0; accent-color: var(--forest); }
.account-wrap form .woocommerce-form-login__submit,
.account-wrap form .woocommerce-Button { width: 100%; justify-content: center; }
.account-wrap .woocommerce-LostPassword { margin: var(--sp-4) 0 0; font-size: .9rem; }
.account-wrap .woocommerce-LostPassword a { color: var(--forest); font-weight: 600; }
/* Titres de section des formulaires */
.account-wrap .woocommerce-account h2,
.account-wrap .u-column1 > h2,
.account-wrap .u-column2 > h2 { font-family: var(--font-h); font-size: 1.25rem; margin: 0 0 var(--sp-4); }
/* Détails du compte + adresses : rangées 2 colonnes quand WC les propose */
.account-wrap .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
.account-wrap .woocommerce-address-fields__field-wrapper .form-row-wide,
.account-wrap .woocommerce-address-fields__field-wrapper .form-row { grid-column: 1 / -1; }
.account-wrap .woocommerce-address-fields__field-wrapper .form-row-first { grid-column: 1; }
.account-wrap .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 2; }
@media (max-width: 520px) { .account-wrap .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } .account-wrap .woocommerce-address-fields__field-wrapper .form-row-first, .account-wrap .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 1 / -1; } }
/* Formulaire login/register côte à côte quand l'inscription est active */
.account-wrap .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 720px) { .account-wrap .u-columns { grid-template-columns: 1fr; } }
/* ── 404 « sweet » — message + pistes de navigation (rayons / phares / conseils) ── */
.error404 { display: grid; gap: var(--sp-16); padding-block: var(--sp-4) var(--sp-8); }
.error404__hero { text-align: center; max-width: 62ch; margin-inline: auto; padding-top: clamp(2.5rem, 7vw, 6rem); }
.error404__hero .kicker { font-size: 1rem; letter-spacing: .12em; }
.error404__title { font-family: var(--font-h); font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; margin: .5rem 0 var(--sp-5); }
.error404__lead { color: var(--muted); font-size: 1.1rem; line-height: 1.55; margin: 0 auto var(--sp-6); max-width: 50ch; }
.error404__ctas { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.error404-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .error404-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .error404-cats { grid-template-columns: repeat(2, 1fr); } }
.error404-products ul.products { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1040px) { .error404-products ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .error404-products ul.products { grid-template-columns: repeat(2, 1fr); } }
/* ── Category SEO / buying-guide prose (after the grid) ── */
/* ── Zone de texte SEO (prose _hpl_cat_seo) sous les résultats catégorie ──
Style PRÉPARÉ, calé sur maquette-categorie-avec-content (fond de zone = le
bandeau .cat-editorial, spacings / font-sizes / couleurs ci-dessous). Le
contenu (les textes) n'est pas touché — seulement la présentation. */
.cat-seo { max-width: 74ch; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.cat-seo > :first-child { margin-top: 0; }
.cat-seo h2 { font-family: var(--font-h); font-size: var(--fs-700); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: var(--sp-12) 0 var(--sp-4); }
.cat-seo h3 { font-family: var(--font-h); font-size: var(--fs-500); line-height: 1.3; color: var(--ink); margin: var(--sp-8) 0 var(--sp-2); }
.cat-seo p { margin: 0 0 var(--sp-4); }
.cat-seo strong { color: var(--ink); }
.cat-seo a { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cat-seo a:hover { color: var(--forest-2); }
.cat-seo ul, .cat-seo ol { margin: var(--sp-4) 0; padding-left: 1.3em; display: grid; gap: .45rem; }
.cat-seo li { padding-left: .15em; }
/* ── Category FAQ ── */
.cat-faq { margin: var(--sp-16) 0; max-width: var(--measure); }
.cat-faq__title { font-size: var(--fs-600); }
.cat-faq__item { border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
.cat-faq__q { font-family: var(--font-h); font-weight: 600; cursor: pointer; list-style: none; }
.cat-faq__q::-webkit-details-marker { display: none; }
.cat-faq__q::before { content: "+"; color: var(--terracotta); font-weight: 700; margin-right: .5rem; }
details[open] .cat-faq__q::before { content: "\2013"; }
.cat-faq__a { padding-top: var(--sp-2); color: var(--muted); }
/* ══ Zone de contenu éditorial catégorie (maquette-categorie-avec-content) ══
RÈGLES GLOBALES / fondation : bandeau clair pleine largeur SOUS la grille 2-col.
Les sous-sections (intro+features, cartes « types », encart conseils, trust,
FAQ, CTA vert) se construisent PAR-DESSUS avec ces bases. Bandeau rendu
seulement s'il y a du contenu (garde ob_start côté woocommerce.php). */
/* Fond : bandeau full-bleed clair, détaché du listing (produit sur --cream). */
.cat-editorial { width: 100vw; margin-inline: calc(50% - 50vw); margin-top: var(--sp-16); padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--content-band); }
.cat-editorial__inner { max-width: var(--wide); margin-inline: auto; padding-inline: var(--space); }
/* Spacing : rythme vertical généreux entre sous-sections directes. */
.cat-editorial__inner > * + * { margin-top: clamp(2.5rem, 5vw, var(--sp-16)); }
/* Fonts : titres Plus Jakarta Sans, corps Inter (cohérent thème). */
.cat-editorial h2 { font-family: var(--font-h); font-size: var(--fs-700); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0 0 var(--sp-4); }
.cat-editorial h3 { font-family: var(--font-h); font-size: var(--fs-500); line-height: 1.25; color: var(--ink); margin: 0 0 var(--sp-2); }
.cat-editorial p { color: var(--muted); line-height: 1.65; margin: 0 0 var(--sp-3); }
.cat-editorial p:last-child { margin-bottom: 0; }
/* Colors : liens/accents verts ; boutons = .btn primaire vert existant. */
.cat-editorial a:not(.btn) { color: var(--forest); font-weight: 600; text-decoration: none; }
.cat-editorial a:not(.btn):hover { text-decoration: underline; text-underline-offset: 2px; }
/* Surfaces de base (réutilisées par les sous-sections) : carte blanche + carte verte. */
.cat-editorial__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.cat-editorial__card--green { background: var(--content-green); border-color: transparent; }
/* Contenu SEO/FAQ legacy hébergé dans le bandeau (reste lisible en attendant la
refonte structurée) : on annule leurs marges propres, le rythme vient du band. */
.cat-editorial .cat-faq { margin: 0; max-width: none; }
.cat-editorial .cat-seo + .cat-faq { margin-top: clamp(2.5rem, 5vw, var(--sp-16)); }
/* ── Pillar ── */
.pillar { max-width: var(--measure); margin-inline: auto; }
.pillar__header { margin-bottom: var(--sp-6); }
.entry__title { font-size: var(--fs-800); margin: 0 0 var(--sp-2); }
.pillar__meta { color: var(--faint); font-size: var(--fs-300); margin: 0; }
.entry__content { font-size: var(--fs-500); }
.entry__content h2 { font-size: var(--fs-700); margin-top: var(--sp-8); }
.entry__content h3 { font-size: var(--fs-600); margin-top: var(--sp-6); }
.pillar__products { margin-top: var(--sp-12); border-top: 2px solid var(--line); padding-top: var(--sp-6); }
.pillar__products h2 { font-size: var(--fs-600); }
/* ── Editorial cards (home) ── */
.editorial-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.editorial-card__link { display: block; padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--card); transition: box-shadow .15s, transform .15s; }
.editorial-card__link:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.editorial-card__title { font-size: 1.2rem; margin: 0 0 var(--sp-2); }
.editorial-card__excerpt { color: var(--muted); margin: 0 0 var(--sp-2); }
.editorial-card__more { color: var(--forest); font-weight: 600; }
/* ── Breadcrumb ── */
.woocommerce-breadcrumb { color: var(--faint); font-size: var(--fs-300); margin-bottom: var(--sp-4); }
.woocommerce-breadcrumb a { color: var(--muted); }
/* ── Footer — vert profond, vague de séparation en tête (maquette) ── */
.site-footer { position: relative; margin-top: calc(var(--sp-16) + 56px); background: var(--forest-deep); color: #cddde8; }
.site-footer::before {
content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 56px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%232e4c39' d='M0 36 C 240 4 480 56 760 40 C 1040 24 1240 0 1440 30 L 1440 56 L 0 56 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.site-footer > * { max-width: var(--wide); margin-inline: auto; padding-inline: var(--space); }
.site-footer a { color: #cddde8; text-decoration: none; transition: color .15s var(--ease); }
.site-footer a:hover { color: #fff; }
/* Bandeau haut : marque (newsletter retirée — E5) */
.site-footer__top { padding-top: var(--sp-16); padding-bottom: var(--sp-12); border-bottom: 1px solid rgba(255,255,255,.12); }
.site-footer__logo { display: inline-flex; align-items: center; }
.site-footer__logo img { height: 52px; width: auto; display: block; }
.site-footer__tagline { margin: .7rem 0 1rem; color: #b5c9d8; font-size: .96rem; }
.site-footer__social { list-style: none; display: flex; gap: .6rem; margin: 0; padding: 0; }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.site-footer__social a:hover { background: rgba(255,255,255,.16); }
/* Colonnes catalogue + aide */
.site-footer__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-8) var(--sp-6); padding-top: var(--sp-12); padding-bottom: var(--sp-8); }
.site-footer__col-title { font-family: var(--font-h); font-size: 1rem; font-weight: 600; color: #fff; margin: 0 0 .8rem; }
.site-footer__col-title a { color: #fff; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__col a { font-size: .92rem; color: #b5c9d8; }
/* Barre légale + copyright */
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; padding-top: var(--sp-6); padding-bottom: var(--sp-8); border-top: 1px solid rgba(255,255,255,.12); }
.site-footer__copy { color: #9bb5c7; font-size: var(--fs-300); margin: 0; }
.site-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; padding: 0; }
.site-footer__legal a { color: #9bb5c7; font-size: var(--fs-300); }
@media (max-width: 900px) {
.site-footer__top { grid-template-columns: 1fr; gap: var(--sp-8); }
.site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.site-footer__cols { grid-template-columns: 1fr; }
}
/* ── Answer-first content patterns (AEO — docs/ia-search-optimization.md) ──
Usable in editor content: a TL;DR/answer callout and clean spec/comparison
tables that AI answer engines extract well. */
.entry__content .answer, .answer {
background: var(--c-leaf-050, #ebf2f7); border-left: 4px solid var(--leaf);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--sp-4) var(--sp-6);
margin: var(--sp-6) 0; font-size: 1.05rem;
}
.answer > :first-child { margin-top: 0; }
.answer > :last-child { margin-bottom: 0; }
.answer__label { display: block; font-family: var(--font-h); font-weight: 600; color: var(--forest); margin-bottom: .25rem; }
/* Tables de contenu : prose éditoriale (.entry__content), spec/comparison, ET les
descriptions produit (tables dans les onglets Woo, wrapper .hpl-pd-detail). */
.entry__content table, .spec-table, .comparison table, .hpl-pd-detail table {
width: 100%; border-collapse: collapse; margin: var(--sp-6) 0; font-size: .98rem;
font-variant-numeric: tabular-nums; background: var(--card);
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.entry__content th, .spec-table th, .comparison th, .hpl-pd-detail table th {
text-align: left; background: var(--c-water-050, #edf2f6); font-family: var(--font-h);
font-weight: 600; padding: .7rem var(--sp-4); border-bottom: 1px solid var(--line);
}
.entry__content td, .spec-table td, .comparison td, .hpl-pd-detail table td { padding: .7rem var(--sp-4); border-bottom: 1px solid var(--line); }
.entry__content tr:last-child td, .hpl-pd-detail table tr:last-child td { border-bottom: 0; }
/* Sécurité mobile : une table large scrolle dans son panneau plutôt que de déborder. */
.hpl-pd-detail .woocommerce-Tabs-panel { overflow-x: auto; }
/* ── Why / USP strip (E2 — positioning, 3 moat pillars) ── */
.home-why { max-width: var(--wide); margin-inline: auto; padding: var(--sp-16) var(--space) 0; }
.home-why__head { text-align: center; max-width: 54ch; margin: 0 auto var(--sp-12); }
.home-why__head h2 { font-size: var(--fs-800); margin: .3rem 0 0; }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.why { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-8) var(--sp-6); }
.why__ico { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--forest-tint); color: var(--forest); margin-bottom: var(--sp-4); }
.why__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.why h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
.why p { color: var(--muted); margin: 0; font-size: .98rem; }
@media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; } }
/* ── After-market band (E3 — components & consumables, our real CA) ── */
/* Bloc contraste vert « pièces détachées » (maquette) : card arrondie forest-deep,
texte + réassurances à gauche, illustration en cover à droite. Empile sous 860px. */
.home-aftermarket { max-width: var(--wide); margin: var(--sp-16) auto 0; padding-inline: var(--space); }
.home-aftermarket__inner { position: relative; overflow: hidden; color: #fff; background: var(--forest-deep); border-radius: var(--radius-lg); display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.home-aftermarket__body { padding: clamp(1.75rem, 4vw, 3.25rem); align-self: center; }
.home-aftermarket h2 { font-family: var(--font-h); font-size: var(--fs-700); color: #fff; line-height: 1.12; margin: .5rem 0 .8rem; }
.home-aftermarket h2 .hl { color: #82aece; }
.home-aftermarket__body > p { font-size: 1.05rem; opacity: .9; margin: 0 0 1.6rem; max-width: 42ch; }
.home-aftermarket .btn--light { margin-bottom: 1.9rem; }
.home-aftermarket__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem 1.9rem; }
.home-aftermarket__trust li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; line-height: 1.25; opacity: .95; max-width: 16ch; }
.home-aftermarket__trust svg { width: 26px; height: 26px; flex: none; stroke: #82aece; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.home-aftermarket__media { position: relative; min-height: 100%; }
.home-aftermarket__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fondu gauche : l'illustration se fond dans le vert de la card (sans couture). */
.home-aftermarket__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--forest-deep) 0%, color-mix(in srgb, var(--forest-deep) 55%, transparent) 12%, transparent 30%); }
@media (max-width: 860px) {
.home-aftermarket__inner { grid-template-columns: 1fr; }
.home-aftermarket__media { min-height: 220px; }
.home-aftermarket__media img { position: static; }
}
/* ── Featured article "à la une" (E7 — sticky-driven) ── */
.home-feature { max-width: var(--wide); margin-inline: auto; padding: var(--sp-16) var(--space) 0; }
.home-feature__card { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.home-feature__media { display: block; overflow: hidden; min-height: 100%; }
.home-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.home-feature__card:hover .home-feature__media img { transform: scale(1.04); }
.home-feature__media--ph { background-color: var(--forest-tint); min-height: 320px; }
.home-feature__body { padding: var(--sp-12); align-self: center; }
.home-feature__body h2 { font-size: var(--fs-700); margin: .3rem 0 .6rem; }
.home-feature__body h2 a { color: var(--ink); text-decoration: none; }
.home-feature__body h2 a:hover { color: var(--forest); }
.home-feature__body > p { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.4rem; }
@media (max-width: 820px) {
.home-feature__card { grid-template-columns: 1fr; }
.home-feature__media { aspect-ratio: 16/9; min-height: 0; }
.home-feature__body { padding: var(--sp-8); }
}
/* ── Home FAQ (S3 — answer-first, FAQPage schema) ── */
.home-faq { max-width: var(--wide); margin-inline: auto; padding: var(--sp-16) var(--space) 0; }
.home-faq h2 { font-family: var(--font-h); font-size: var(--fs-700); margin: 0 0 var(--sp-6); }
/* Desktop : 2 colonnes pures (une grille, une colonne remplie avant l'autre) ;
chaque colonne s'ouvre/se replie indépendamment. Mono-colonne sous 720px. */
.home-faq__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); align-items: start; }
.home-faq__col { display: flex; flex-direction: column; gap: var(--sp-4); }
.home-faq__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.home-faq__item[open] { border-color: color-mix(in srgb, var(--leaf) 30%, var(--line)); box-shadow: var(--shadow-sm); }
.home-faq__q { font-family: var(--font-h); font-weight: 600; font-size: 1rem; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.home-faq__q::-webkit-details-marker { display: none; }
.home-faq__q::after { content: "+"; color: var(--forest); font-weight: 700; font-size: 1.4rem; line-height: 1; flex: none; }
.home-faq__item[open] .home-faq__q::after { content: "\2013"; }
.home-faq__a { padding-top: var(--sp-3); color: var(--muted); font-size: .92rem; line-height: 1.6; }
.home-faq__a p { margin: 0; }
@media (max-width: 720px) { .home-faq__cols { grid-template-columns: 1fr; } }
/* ── Home SEO intro / chapô (S2 — answer-first prose, transactional head) ── */
.home-intro { max-width: var(--measure); margin-inline: auto; padding: var(--sp-16) var(--space); }
.home-intro h2 { font-size: var(--fs-600); margin: 0 0 var(--sp-4); }
.home-intro p { color: var(--muted); font-size: var(--fs-500); margin: 0; }
/* Variante « lead » (présentation SEO en tête de contenu) : calée sur le conteneur
1240 ; grid illustration à gauche / texte à droite. */
.home-intro--lead { max-width: var(--wide); padding-bottom: var(--sp-8); }
/* Carte englobante : présentation (grid) + argus (bas), coins arrondis partagés.
Ombre très légère teintée terre (--earth #a67f5c) plutôt que le gris-vert par défaut. */
.home-intro__card { background: #fffa; border: 1px solid #595f6373; border-radius: 20px; overflow: hidden;
box-shadow: 0 14px 30px -20px rgba(120,88,60,.20), 0 3px 10px -8px rgba(120,88,60,.12); }
.home-intro__grid { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: var(--sp-8); align-items: stretch; }
/* La hauteur de la ligne est définie par le texte ; l'image (absolue → hors flux,
ne pousse pas la hauteur) remplit la cellule étirée et se cale à cette hauteur. */
.home-intro__media { position: relative; min-height: 240px; }
.home-intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* Colonne texte : padding pour ne pas coller aux bords de la carte (le bord gauche
est déjà espacé de l'image par le gap). */
.home-intro__body { padding: var(--sp-8) var(--sp-8) var(--sp-8) 0; }
.home-intro--lead h2 { font-size: var(--fs-700); color: var(--ink); }
.home-intro--lead p { color: var(--muted); font-size: var(--fs-500); margin: 0; }
/* mots-clés SEO en gras : couleur texte pleine pour ressortir sur le corps muted
(font-weight 600 = borne haute de la variable Inter chargée) */
.home-intro--lead strong { font-weight: 600; color: var(--ink); }
/* mots-clés liés vers les catégories : gras + vert (maillage interne) */
.home-intro--lead .kw-link { color: var(--forest-2); text-decoration: none; }
.home-intro--lead .kw-link strong { color: inherit; }
.home-intro--lead .kw-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Argus attachés au bas de la carte : bande à fond distinct (léger vert), coins bas
arrondis via l'overflow de .home-intro__card. */
.home-intro__argus { list-style: none; margin: 0; padding: 1.1rem var(--sp-8);
display: flex; flex-wrap: wrap; gap: .6rem 2.5rem; justify-content: center;
background: var(--forest-tint); border-top: 1px solid var(--line);
font-size: .93rem; color: var(--muted); }
@media (max-width: 820px) {
.home-intro__grid { grid-template-columns: 1fr; gap: var(--sp-6); justify-items: center; }
/* retour au flux : image statique, taille naturelle bornée */
.home-intro__media { position: static; min-height: 0; max-width: 300px; }
.home-intro__media img { position: static; height: auto; }
}
/* ── Page contact (page-contact.php + Gravity Forms) ─────────────────────── */
.contact-hero { position: relative; overflow: hidden; margin-bottom: var(--sp-10); }
.contact-hero__title { font-family: var(--font-h); font-size: var(--fs-800); line-height: 1.05; margin: .3rem 0 var(--sp-3); }
.contact-hero__lead { color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin: 0; }
.contact-hero__deco { position: absolute; top: 50%; right: -14px; transform: translateY(-50%); width: clamp(150px, 22vw, 280px); opacity: .9; pointer-events: none; }
.contact-hero__deco img { width: 100%; height: auto; }
@media (max-width: 780px) { .contact-hero__deco { display: none; } }
.contact-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; margin-bottom: var(--sp-16); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: var(--sp-4); }
.contact-info__card { display: flex; gap: var(--sp-4); background: var(--card-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); }
.contact-info__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--forest-tint); color: var(--forest); }
.contact-info__ic svg { width: 22px; height: 22px; }
.contact-info__card h2 { font-family: var(--font-h); font-size: 1.05rem; margin: 0 0 .25rem; color: var(--ink); }
.contact-info__card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.contact-info__card a { color: var(--forest-2); font-weight: 600; text-decoration: none; }
.contact-info__card a:hover { text-decoration: underline; }
.contact-info__meta { font-size: .82rem; color: var(--faint); margin-top: .2rem !important; }
.contact-form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm); }
.contact-form-card__title { font-family: var(--font-h); font-size: var(--fs-600); margin: 0 0 var(--sp-5); color: var(--ink); }
/* Gravity Forms — habillage maison, scopé à la carte. */
/* Grille : Nom + E-mail côte à côte, « demande » et message en pleine largeur.
gravity-theme force chaque .gfield en grid-column 1/-1 : on repasse Nom/E-mail
sur une seule colonne et on garde select/message pleine largeur. */
.contact-form-card .gform_wrapper.gravity-theme .gform_fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.contact-form-card .gform_wrapper.gravity-theme .gfield--type-text,
.contact-form-card .gform_wrapper.gravity-theme .gfield--type-email { grid-column: span 1; }
.contact-form-card .gform_wrapper.gravity-theme .gfield--type-select,
.contact-form-card .gform_wrapper.gravity-theme .gfield--type-textarea { grid-column: 1 / -1; }
@media (max-width: 560px) { .contact-form-card .gform_wrapper.gravity-theme .gform_fields { grid-template-columns: 1fr; } .contact-form-card .gform_wrapper.gravity-theme .gfield { grid-column: 1 / -1; } }
.contact-form-card .gform_wrapper.gravity-theme .gfield_label,
.contact-form-card .gform_wrapper .gfield_label { font-family: var(--font-h); font-weight: 600; color: var(--ink); font-size: .95rem; margin-bottom: .4rem; }
.contact-form-card .gform_wrapper .gform_required_legend { display: none; }
.contact-form-card .gform_wrapper .gfield_required { color: var(--terracotta); }
.contact-form-card .gform_wrapper.gravity-theme input,
.contact-form-card .gform_wrapper.gravity-theme textarea,
.contact-form-card .gform_wrapper.gravity-theme select {
width: 100%; font-family: var(--font-b); font-size: 1rem; color: var(--ink);
background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: .8rem .95rem; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.contact-form-card .gform_wrapper.gravity-theme input:focus,
.contact-form-card .gform_wrapper.gravity-theme textarea:focus,
.contact-form-card .gform_wrapper.gravity-theme select:focus {
outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-tint); background: #fff;
}
.contact-form-card .gform_wrapper.gravity-theme textarea { min-height: 160px; resize: vertical; }
/* Menu déroulant : on masque la flèche native et on pose un chevron maison. */
.contact-form-card .gform_wrapper.gravity-theme select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a625e' 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 1rem center; background-size: 16px; padding-right: 2.6rem;
}
/* Aide sous un champ (ex. message). */
.contact-form-card .gform_wrapper .gfield_description { color: var(--faint); font-size: .82rem; line-height: 1.45; margin-top: .4rem; padding: 0; }
.contact-form-card .gform_wrapper.gravity-theme .gform_footer { margin-top: var(--sp-6); padding: 0; display: flex; }
/* La feuille de reset du framework GF neutralise le fond du bouton : on force. */
.contact-form-card .gform_wrapper .gform_footer input.gform_button,
.contact-form-card .gform_wrapper input.gform_button {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
background: var(--forest) !important; color: #fff !important; font-family: var(--font-h); font-weight: 600; font-size: 1.02rem;
border: none; border-radius: var(--radius-pill); padding: .95rem 1.9rem; cursor: pointer;
box-shadow: var(--shadow-sm); transition: background .15s var(--ease), transform .05s var(--ease);
}
.contact-form-card .gform_wrapper input.gform_button:hover { background: var(--forest-2) !important; }
.contact-form-card .gform_wrapper input.gform_button:active { background: var(--forest-3) !important; transform: translateY(1px); }
.contact-form-card .gform_wrapper .gfield_error input,
.contact-form-card .gform_wrapper .gfield_error textarea,
.contact-form-card .gform_wrapper .gfield_error select { border-color: #d3372b; background: #fff; }
.contact-form-card .gform_wrapper .gfield_validation_message,
.contact-form-card .gform_wrapper .validation_message { color: #b3261e; font-size: .85rem; margin-top: .35rem; padding: 0; background: none; border: none; }
.contact-form-card .gform_wrapper .gform_validation_errors { background: #fbeceb; border: 1px solid #f3c9c5; border-radius: var(--radius); color: #b3261e; padding: var(--sp-4); margin-bottom: var(--sp-5); box-shadow: none; }
.contact-form-card .gform_confirmation_message { background: var(--forest-tint); border: 1px solid #c2d3df; border-radius: var(--radius); padding: var(--sp-6); color: var(--forest-deep); font-size: 1.02rem; line-height: 1.5; }
/* ── Panier vide (woocommerce/cart/cart-empty.php) ───────────────────────── */
.cart-empty-state { text-align: center; max-width: 560px; margin: var(--sp-10) auto var(--sp-16); padding: var(--sp-8) var(--sp-6); }
.cart-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 50%; background: var(--forest-tint); color: var(--forest); margin-bottom: var(--sp-6); }
.cart-empty-state__icon svg { width: 44px; height: 44px; }
.cart-empty-state__title { font-family: var(--font-h); font-size: var(--fs-700); line-height: 1.15; color: var(--ink); margin: 0 0 var(--sp-3); }
.cart-empty-state__text { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 var(--sp-6); }
.cart-empty-state__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-10); }
.cart-empty-state__cats-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); margin-bottom: var(--sp-4); }
.cart-empty-state__chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.cart-empty-chip { display: inline-block; padding: .5rem 1rem; border-radius: var(--radius-pill); background: var(--card-soft); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.cart-empty-chip:hover { background: var(--forest-tint); border-color: var(--forest); color: var(--forest-2); }
/* ── Images d'article : pleine largeur + clic pour agrandir (lightbox) ────── */
.art-content figure.wp-block-image { margin: var(--sp-8) 0; }
.art-content figure.wp-block-image img { width: 100%; height: auto; display: block; border-radius: var(--radius); cursor: zoom-in; transition: filter .2s var(--ease); }
.art-content figure.wp-block-image img:hover { filter: brightness(1.03); }
.art-content figure.wp-block-image figcaption,
.art-content .wp-element-caption { margin-top: var(--sp-3); font-size: .88rem; color: var(--faint); text-align: center; line-height: 1.5; }
/* ── Article tables: comparison grids inside long-form content ───────────── */
/* The figure wrapper scrolls horizontally so a wide table never breaks the
page layout on narrow screens; the table itself keeps a readable min-width. */
.art-content figure.wp-block-table { margin: var(--sp-8) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art-content .wp-block-table table {
width: 100%;
min-width: 34rem;
border-collapse: separate;
border-spacing: 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
font-size: .95rem;
line-height: 1.55;
}
/* border: 0 first, to drop the cell grid the core table block draws by default:
horizontal rules alone read cleaner inside editorial content. */
.art-content .wp-block-table th,
.art-content .wp-block-table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--line); }
.art-content .wp-block-table thead th {
background: var(--card-soft);
font-family: var(--font-h);
font-size: .78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--faint);
white-space: nowrap;
}
.art-content .wp-block-table tbody td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.art-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.art-content .wp-block-table figcaption { margin-top: var(--sp-3); font-size: .88rem; color: var(--faint); text-align: center; line-height: 1.5; }
@media (max-width: 640px) {
.art-content .wp-block-table table { font-size: .88rem; }
.art-content .wp-block-table th,
.art-content .wp-block-table td { padding: var(--sp-2) var(--sp-3); }
}
/* ── Lightbox (portée depuis theme-ph-2026 : clic pour agrandir + zoom) ───── */
.hpl-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,.94);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
}
.hpl-lightbox.is-open { display: flex; }
body.hpl-lightbox-open { overflow: hidden; }
/* Logged-in users: shift modal below WP admin bar */
body.admin-bar .hpl-lightbox { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .hpl-lightbox { top: 0; }
}
.hpl-lightbox__stage {
width: 100%;
height: 100%;
display: flex;
/* `safe` keeps centering until the image overflows, then falls back to start
so the pan can reach the top/left edges (default `center` traps overflow). */
align-items: safe center;
justify-content: safe center;
overflow: auto;
/* Prevent scroll/pan from chaining to the body underneath when the user
pans past an edge of the image. */
overscroll-behavior: contain;
}
.hpl-lightbox__img {
max-width: 100%;
max-height: 100%;
display: block;
border-radius: var(--radius);
user-select: none;
-webkit-user-drag: none;
/* `cursor` is driven by JS based on the current zoom level (default / zoom-in
/ zoom-out depending on whether more zoom levels are available). */
}
.hpl-lightbox__img.is-zoomed {
max-width: none;
max-height: none;
}
.hpl-lightbox__close,
.hpl-lightbox__nav {
position: absolute;
width: 48px;
height: 48px;
background: rgba(255,255,255,.08);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s var(--ease);
z-index: 2;
}
.hpl-lightbox__close:hover,
.hpl-lightbox__nav:hover { background: rgba(255,255,255,.22); }
.hpl-lightbox__close { top: 1rem; right: 1rem; }
.hpl-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.hpl-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.hpl-lightbox__nav[hidden] { display: none; }
.hpl-lightbox__counter {
color: rgba(255,255,255, 0.85);
font-size: .85rem;
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
white-space: nowrap;
padding: .2rem .7rem;
background: rgba(0,0,0,.45);
border-radius: 99px;
align-self: center;
}
/* Bottom: counter pill above + thumbs strip */
.hpl-lightbox__bottom {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
max-width: 90vw;
}
.hpl-lightbox__bottom[hidden] { display: none; }
/* Thumbs strip */
.hpl-lightbox__thumbs {
display: flex;
gap: .35rem;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255, .3) transparent;
padding: .35rem;
background: rgba(0,0,0,.45);
border-radius: 6px;
max-width: 100%;
}
.hpl-lightbox__thumb {
flex-shrink: 0;
width: 56px;
height: 56px;
border: 1px solid rgba(255,255,255, 0.2);
padding: 0;
background: transparent;
cursor: pointer;
border-radius: 3px;
overflow: hidden;
opacity: .55;
transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.hpl-lightbox__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hpl-lightbox__thumb:hover {
opacity: .9;
border-color: rgba(255,255,255, 0.45);
}
.hpl-lightbox__thumb.is-active {
opacity: 1;
border-color: var(--forest);
}
/* Immersive view button: top-right, below the close button */
.hpl-lightbox__immersive {
position: absolute;
top: 4.5rem;
right: 1rem;
width: 44px;
height: 44px;
background: rgba(255,255,255,.08);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s var(--ease);
z-index: 2;
}
.hpl-lightbox__immersive:hover,
.hpl-lightbox__immersive[aria-pressed="true"] { background: rgba(255,255,255,.22); }
/* Zoom indicator pill: [−] [percent] [+] — only shown when zoom is available */
.hpl-lightbox__zoom {
position: absolute;
top: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: .15rem;
padding: .2rem .3rem;
background: rgba(0,0,0,.45);
border-radius: 99px;
z-index: 2;
}
.hpl-lightbox__zoom[hidden] { display: none; }
.hpl-lightbox__zoom-btn {
background: transparent;
border: 0;
color: rgba(255,255,255, 0.85);
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
padding: 0;
transition: background .2s var(--ease), opacity .2s var(--ease);
}
.hpl-lightbox__zoom-btn:hover:not([disabled]) { background: rgba(255,255,255,.08); }
.hpl-lightbox__zoom-btn[disabled] { opacity: 0.35; cursor: default; }
.hpl-lightbox__zoom-value {
color: rgba(255,255,255, 0.85);
font-size: .85rem;
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
min-width: 3rem;
text-align: center;
user-select: none;
}
/* Immersive mode: hide nav arrows + bottom (counter + thumbs) + zoom indicator */
.hpl-lightbox.is-immersive .hpl-lightbox__nav,
.hpl-lightbox.is-immersive .hpl-lightbox__bottom,
.hpl-lightbox.is-immersive .hpl-lightbox__zoom { display: none; }
/* Notice: centered overlay, fades out after a few seconds */
.hpl-lightbox__notice {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.75);
color: #fff;
padding: 1rem 1.5rem;
border-radius: 8px;
font-size: .95rem;
text-align: center;
max-width: 80vw;
opacity: 0;
transition: opacity .3s var(--ease);
pointer-events: none;
z-index: 3;
}
.hpl-lightbox__notice.is-visible { opacity: 1; }
.hpl-lightbox__notice[hidden] { display: none; }
/* ── Reduced motion ── */
/* === Bouton retour-en-haut (fixed bottom-right, apparaît après ~450px) === */
.hpl-scroll-top {
position: fixed;
right: clamp(1rem, 3vw, 1.75rem);
bottom: clamp(1rem, 3vw, 1.75rem);
width: 44px; height: 44px;
border: 0; border-radius: 50%;
background: var(--forest); color: #fff;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow);
opacity: 0; transform: translateY(8px);
transition: opacity .25s var(--ease), transform .25s var(--ease), background .15s var(--ease);
z-index: 80;
}
.hpl-scroll-top[hidden] { display: none; }
.hpl-scroll-top.is-visible { opacity: .92; transform: translateY(0); }
.hpl-scroll-top:hover { opacity: 1; background: var(--forest-2); }
.hpl-scroll-top:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; }
.hpl-scroll-top svg { display: block; }
/* ── Add-to-cart : bouton en cours + toast de confirmation ── */
.single_add_to_cart_button.is-loading { opacity: .65; cursor: progress; pointer-events: none; }
.hpl-toast-region {
position: fixed; z-index: 200; right: var(--sp-5); bottom: var(--sp-5);
display: flex; flex-direction: column; gap: var(--sp-3);
max-width: min(380px, calc(100vw - 2 * var(--sp-5)));
pointer-events: none;
}
.hpl-toast {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: #fff; color: var(--ink);
border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-lg);
pointer-events: auto;
opacity: 0; transform: translateY(14px);
transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.hpl-toast.is-visible { opacity: 1; transform: translateY(0); }
.hpl-toast__icon {
flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill);
display: inline-flex; align-items: center; justify-content: center;
background: var(--forest-tint); color: var(--forest-deep);
}
.hpl-toast__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hpl-toast__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.hpl-toast__text { font-size: .92rem; line-height: 1.35; }
.hpl-toast__text strong { font-weight: 600; }
.hpl-toast__cta {
align-self: flex-start; font-weight: 600; font-size: .82rem;
color: var(--forest-deep); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.hpl-toast__cta::after { content: " →"; text-decoration: none; }
.hpl-toast__cta:hover { color: var(--forest); }
.hpl-toast__close {
flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm);
background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease);
}
.hpl-toast__close:hover { background: var(--cream); color: var(--ink); }
@media (max-width: 560px) {
.hpl-toast-region { right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); max-width: none; }
}
/* ── Modale « choisir une option » (remplace l'alerte native WooCommerce) ── */
body.hpl-vm-lock { overflow: hidden; }
.hpl-vm-overlay {
position: fixed; inset: 0; z-index: 300;
display: none; align-items: center; justify-content: center;
padding: var(--sp-4);
background: rgba(20, 30, 24, .55);
opacity: 0; transition: opacity .2s var(--ease);
}
.hpl-vm-overlay.is-open { display: flex; opacity: 1; }
.hpl-vm {
position: relative; width: 100%; max-width: 440px;
background: #fff; border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: var(--sp-5) var(--sp-5) var(--sp-4);
transform: translateY(10px); transition: transform .2s var(--ease);
}
.hpl-vm-overlay.is-open .hpl-vm { transform: translateY(0); }
.hpl-vm__close {
position: absolute; top: .6rem; right: .6rem;
width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm);
background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease);
}
.hpl-vm__close:hover { background: var(--cream); color: var(--ink); }
.hpl-vm__title { margin: 0 0 var(--sp-2); font-size: 1.25rem; }
.hpl-vm__msg { margin: 0 0 var(--sp-4); color: var(--muted); font-size: .95rem; line-height: 1.4; }
.hpl-vm__field { margin: 0 0 var(--sp-4); }
.hpl-vm__field label { display: block; margin: 0 0 .4rem; font-family: var(--font-h); font-weight: 600; color: var(--ink); }
.hpl-vm__field select { width: 100%; min-height: 52px; }
.hpl-vm__add { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.hpl-vm__add:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
.hpl-vm-overlay, .hpl-vm { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
ul.products li.product:hover, .product-card:hover, .cat:hover img, .editorial-card__link:hover { transform: none; }
ul.products li.product:hover img { transform: none; }
}
/* Kickers de la page « achat en gros » : plus gros, plus gras, en terracotta
(accent chaud qui ressort du vert ambiant) pour baliser nettement les sections. */
.gros-page .kicker { color: var(--terracotta); font-weight: 800; font-size: .95rem; letter-spacing: .14em; }
/* ── Page « Achat en gros » (gabarit retiré, styles conservés) ──
Sections alternées média/texte : .gros-split, et .gros-split--reverse pour
basculer le média à droite. Le hero réutilise .pilier-hero, la carte du form
réutilise .contact-form-card (donc l'habillage Gravity Forms suit). */
.gros-split { max-width: var(--wide); margin-inline: auto; padding: var(--sp-16) var(--space) 0; }
.gros-split__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, var(--sp-12)); align-items: center; }
.gros-split__media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; }
/* Variante illustration (PNG détourée sur fond charte) : on montre l'image entière,
pas de crop, posée sur le vert pâle maison. */
.gros-split__media--illu { background: var(--forest-tint); border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2rem); }
.gros-split__media--illu img { object-fit: contain; box-shadow: none; border-radius: 0; max-height: 340px; }
/* Variante « scène » (illustration aquarelle avec son propre fond crème) : cadre
photo, image entière (contain) sur fond crème doux qui se fond avec l'aquarelle,
rien de croppé. */
.gros-split__media--photo { background: var(--card-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.gros-split__media--photo img { object-fit: contain; box-shadow: none; border-radius: 0; max-height: 400px; }
.gros-split__body h2 { font-family: var(--font-h); font-size: var(--fs-700); color: var(--ink); line-height: 1.14; margin: .35rem 0 .9rem; }
.gros-split__body > p { color: var(--muted); font-size: 1.05rem; line-height: 1.65; margin: 0 0 1.2rem; }
.gros-split__list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .8rem; }
.gros-split__list li { position: relative; padding-left: 1.9rem; color: var(--ink); font-size: .98rem; line-height: 1.55; }
.gros-split__list li::before {
content: ""; position: absolute; left: 0; top: .45em;
width: .85rem; height: .85rem; border-radius: 50%; background: var(--forest); flex: none;
}
.gros-split__list strong { font-weight: 650; }
/* Média à droite : on inverse l'ordre des colonnes (l'ordre DOM reste média-puis-texte,
donc en lecture linéaire / mobile l'image précède toujours son texte). */
.gros-split--reverse .gros-split__media { order: 2; }
.gros-split--reverse .gros-split__inner { grid-template-columns: 1.05fr 1fr; }
@media (max-width: 860px) {
.gros-split__inner, .gros-split--reverse .gros-split__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
.gros-split--reverse .gros-split__media { order: 0; }
.gros-split__media img { max-height: 260px; }
}
/* Étapes numérotées */
.gros-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: none; }
.gros-steps li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.gros-steps__n {
flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
background: var(--forest-tint); color: var(--forest-2);
font-family: var(--font-h); font-weight: 700; font-size: .95rem;
display: inline-flex; align-items: center; justify-content: center;
}
.gros-steps h3 { font-family: var(--font-h); font-size: 1.05rem; margin: .25rem 0 .3rem; color: var(--ink); }
.gros-steps p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
/* Bloc devis : zone d'accent fort (bande vert profond, cf home-aftermarket).
Intro blanche centrée en haut, formulaire centré dessous. Largeur cappée sur
la bande, pas de max-width sur le texte d'accroche. */
.gros-devis { max-width: var(--wide); margin: var(--sp-16) auto 0; padding: 0 var(--space) var(--sp-16); scroll-margin-top: calc(var(--header-h) + 1rem); }
.gros-devis__band { max-width: 820px; margin-inline: auto; background: var(--forest-deep); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(2rem, 5vw, var(--sp-16)) clamp(1.25rem, 4vw, var(--sp-12)); }
.gros-devis__intro { text-align: center; margin-bottom: var(--sp-8); }
/* Kicker sur fond sombre : terracotta clairci pour rester lisible sur le vert profond. */
.gros-devis__band .kicker { color: #e2966a; }
.gros-devis__intro h2 { font-family: var(--font-h); font-size: var(--fs-700); color: #fff; line-height: 1.14; margin: .35rem 0 .8rem; }
.gros-devis__intro > p { color: rgba(255, 255, 255, .88); font-size: 1rem; line-height: 1.65; margin: 0 0 var(--sp-6); }
.gros-devis__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-6); }
.gros-devis__trust li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: rgba(255, 255, 255, .95); line-height: 1.35; }
.gros-devis__trust svg { width: 22px; height: 22px; flex: none; color: #82aece; }
.gros-devis__form { text-align: left; }
/* ── Prochainement disponible + liste d'attente ─────────────────────────────
Pre-listed references (Woo\ComingSoon): browsable, never buyable. The state
uses the water token, not the stock green/amber pair, so it never reads as
"in stock" or "temporarily out" at a glance. */
/* Same slot as span.onsale — the two are mutually exclusive: the sale flash is
suppressed on a pre-listing (no price shown, so no discount to announce). */
.hpl-soon-badge { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; background: var(--water-tint); color: #1d5a7d; font-family: var(--font-b); font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .28rem .55rem; border-radius: var(--radius-pill); pointer-events: none; }
.hpl-soon-price { color: var(--water); font-weight: 600; font-size: .95rem; }
.hpl-soon { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--water-tint); border-radius: var(--radius); }
.hpl-soon__state { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-weight: 600; color: #1d5a7d; }
.hpl-soon__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--water); flex: none; }
.hpl-soon__note { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.hpl-wl-cta { margin-top: var(--sp-4); }
/* Modal. Native