/* Poil&Caille — styles du thème (mobile d'abord). Couleurs et rayons repris de la maquette « App mobile ». */

/* Police Nunito (graisses 400 à 900) hébergée dans le thème : aucune connexion à Google. Licence SIL OFL 1.1. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/nunito-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--green: #417325;
	--green-dark: #2F5719;
	--green-soft: #ECFCE4;
	--ink: #1E293B;
	--muted: #5B6472;
	--bg: #F6F7F2;
	--card: #FFFFFF;
	--line: #E3E7DC;
	--heart: #E0624F;
	--radius: 20px;
	--tabbar-h: 70px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font: 15px/1.5 Nunito, system-ui, sans-serif;
	background: var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	/* Pied de page toujours en bas de l'écran, même quand la page a peu de contenu. */
	display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
.site-main { flex: 1 0 auto; width: 100%; }
.site-footer { flex-shrink: 0; }
img { max-width: 100%; height: auto; display: block; }
.icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page-title { margin: 8px 0 16px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- En-tête ---------- */
/* Bande d'information en haut de page : vert pastel, texte et icônes verts.
   Petit écran : un message à la fois (entre par la droite, sort par la gauche) ; grand écran (1100 px et plus) : les trois côte à côte. */
:root { --topbar-h: 39px; --head-gap: 5px; } /* 38 px + 1 px de bordure */ /* 5 px entre le bandeau et le menu */
html.topbar-off { --topbar-h: 0px; --head-gap: 10px; }
/* Bandeau fixe tout en haut (au-dessus du menu), refermable. */
.topbar { position: sticky; top: 0; z-index: 25; background: var(--green-soft); color: var(--green-dark); border-bottom: 1px solid #D6EFC9; }
.topbar[hidden] { display: none; }
.topbar-close { position: absolute; top: 50%; right: 8px; z-index: 1; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); border: 0; border-radius: 50%; background: transparent; color: var(--green); cursor: pointer; transition: background .2s, color .2s; }
.topbar-close:hover { background: #fff; color: var(--green-dark); }
.topbar ul { position: relative; overflow: hidden; height: 38px; max-width: 1200px; margin: 0 auto; padding: 0 44px 0 16px; list-style: none; }
/* Défilement façon « marquee » : le message arrive par la droite et sort par la gauche. */
.topbar li { position: absolute; inset: 0 44px 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translateX(100%); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
.topbar li.is-on { opacity: 1; transform: none; }
.topbar li.is-out { opacity: 0; transform: translateX(-100%); }
.topbar li.no-anim { transition: none; }
.topbar li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .topbar li { gap: 6px; font-size: 12px; } .topbar li .icon { width: 16px; height: 16px; } }
.topbar .icon { color: var(--green); }
@media (min-width: 1100px) {
	.topbar ul { display: flex; align-items: center; justify-content: center; gap: 40px; }
	.topbar li { position: static; opacity: 1; transform: none; }
	.topbar li + li::before { content: ""; width: 5px; height: 5px; margin-right: 32px; border-radius: 50%; background: #B9E59F; }
}
.site-header {
	position: sticky; top: calc(var(--topbar-h) + var(--head-gap)); z-index: 20;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: var(--head-gap) 12px 14px; padding: 10px 10px 10px 14px;
	border-radius: 24px;
	box-shadow: 0 8px 32px rgba(30, 41, 59, .08);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-logo { height: 38px; width: auto; }
.brand-name { font-size: 18px; font-weight: 800; }
.brand-meta { display: flex; flex-direction: column; line-height: 1.3; }
.brand-meta small { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.brand-meta strong { font-size: 13px; font-weight: 700; }
/* Petit téléphone : 3 boutons dans l'en-tête (recherche, envies, panier), on garde seulement le logo. */
@media (max-width: 899px) { .brand-meta { display: none; } } /* téléphone : logo seul */
.primary-nav { display: none; }
.header-actions { display: flex; gap: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.icon-btn {
	position: relative; width: 44px; height: 44px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.site-header .icon-btn { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .55); }
.site-header .icon-btn:hover { background: rgba(255, 255, 255, .9); }
/* Mon compte dans l'en-tête (ordinateur seulement) ; couronne jaune posée sur la tête pour les VIP. */
.acc-btn { display: none; }
.acc-crown { position: absolute; top: -9px; left: 50%; margin-left: -10px; color: #FFD23F; transform: rotate(-14deg); filter: drop-shadow(0 2px 2px rgba(120, 80, 0, .35)); pointer-events: none; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.acc-btn.is-vip:hover .acc-crown { transform: rotate(-4deg) translateY(-2px); }
/* Fond blanc à 90 % avec un simple flou léger (sans saturation ni effet verre). Si le clignotement sur ordinateur
   revenait après un défilement, retirer les deux lignes « backdrop-filter » : c'était sa cause.
   Le fond est sur un calque (::before), sous le grand menu qui est à l'intérieur. */
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, .7);
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Total du panier en petit texte, dans le bouton panier, sous l'icône (le bouton s'élargit un peu si besoin). */
.cart-btn-total { color: var(--green-dark); font-size: 9.5px; font-weight: 800; line-height: 1; white-space: nowrap; pointer-events: none; }
.icon-btn:has(.cart-btn-total:not([hidden])) { flex-direction: column; gap: 2px; width: auto; min-width: 44px; padding: 0 5px; }
.icon-btn:has(.cart-btn-total:not([hidden])) > .icon { width: 19px; height: 19px; }
.cart-btn-total[hidden] { display: none; }
.badge {
	position: absolute; top: -5px; right: -5px;
	min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: var(--green); color: #fff; font-size: 11px; font-weight: 800; border: 2px solid var(--bg);
}

/* ---------- Barre de navigation du bas (mobile) ---------- */
/* Barre du bas façon Apple : capsule blanche à 90 % qui flotte au-dessus de la page (sans flou, qui clignotait),
   l'onglet actif est posé dans une petite capsule teintée de vert. */
.tabbar {
	position: fixed; z-index: 30; left: 14px; right: 14px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	height: 64px; padding: 5px; border-radius: 999px;
	display: flex; align-items: stretch; gap: 2px;
	border: 1px solid rgba(255, 255, 255, .75);
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 14px 34px rgba(30, 41, 59, .18), 0 2px 6px rgba(30, 41, 59, .06), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(30, 41, 59, .05);
}
.tabbar a {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	border-radius: 999px; color: #4A5462; font-size: 11px; font-weight: 700;
	transition: background .25s, color .25s, transform .2s;
}
.tabbar a:active { transform: scale(.94); }
.tabbar a[aria-current="page"] {
	color: var(--green-dark); font-weight: 800;
	background: rgba(65, 115, 37, .14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* ---------- Panneaux (rayons, recherche) ---------- */
.sheet {
	width: 100%; max-width: 560px; max-height: 85dvh; margin: auto auto 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
	border: none; border-radius: 28px 28px 0 0; background: var(--bg); color: var(--ink); overflow-y: auto;
}
.sheet::backdrop { background: rgba(30, 41, 59, .45); }
.sheet:focus { outline: none; } /* le panneau prend le focus à l'ouverture (pas le bouton fermer, sinon cadre bleu sur iPhone) */
.sheet[open] { animation: sheet-up .25s ease; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px; font-size: 19px; font-weight: 800; }
/* Panneau « Nos rayons » (onglet Boutique du menu du bas) : grille des rayons, puis sous-catégories. */
.sheet-grab { display: block; width: 40px; height: 5px; margin: 4px auto 2px; border-radius: 3px; background: #D5DACD; }
.shop-sheet { display: none; flex-direction: column; height: min(85dvh, 720px); padding-bottom: 0; overflow: hidden; } /* hauteur fixe : Safari (et l'appli installée) ne l'écrase plus */
.shop-sheet[open] { display: flex; }
.ss-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; } /* « auto » : Safari écrasait la grille des rayons à 0 de haut avec « flex: 1 » */
.ss-view[hidden] { display: none; }
.ss-view.is-in { animation: ss-in .28s cubic-bezier(.22, .61, .36, 1); }
.ss-view.is-back { animation: ss-back .28s cubic-bezier(.22, .61, .36, 1); }
@keyframes ss-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes ss-back { from { transform: translateX(-40px); opacity: 0; } }
.shop-sheet .sheet-head .icon-btn { color: var(--muted); }
.ss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss-rayon { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #EDEFE8; color: var(--ink); transition: border-color .2s, transform .2s; }
.ss-rayon:hover, .ss-rayon:active { border-color: var(--green); color: var(--ink); }
.ss-rayon:active { transform: scale(.98); }
.ss-rayon-icon { width: 52px; height: 52px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient(150deg, #fff, var(--green-soft)); border: 1px solid #E2F2D8; color: var(--green); }
/* Image du rayon (image de la catégorie) : grande, ronde, centrée dans la carte. */
.ss-rayon:has(.has-img) { align-items: center; text-align: center; padding: 14px 10px 12px; }
.ss-rayon-icon.has-img { width: 84px; height: 84px; margin-bottom: 8px; overflow: hidden; border-radius: 50%; border: 0; background: var(--green-soft); box-shadow: 0 6px 14px rgba(47, 87, 25, .12); transition: transform .2s; }
.ss-rayon-icon.has-img img { width: 100%; height: 100%; object-fit: cover; }
.ss-rayon:hover .ss-rayon-icon.has-img { transform: translateY(-2px) scale(1.04); }
.ss-rayon strong { font-size: 15px; font-weight: 800; }
.ss-rayon small { font-size: 12px; color: var(--muted); }
.ss-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 4px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 15px; font-weight: 800; color: var(--green-dark); cursor: pointer; }
.ss-back:hover { background: var(--green-soft); }
.ss-all { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 20px; background: linear-gradient(150deg, var(--green), var(--green-dark)); color: #fff; }
.ss-all:hover { color: #fff; }
.ss-all .ss-rayon-icon { width: 46px; height: 46px; margin: 0; background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; }
.ss-all .ss-rayon-icon.has-img { width: 52px; height: 52px; margin: -4px 0; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.ss-all > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.ss-all strong { font-size: 17px; font-weight: 900; }
.ss-all small { font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.ss-list { margin: 0; padding: 6px; list-style: none; border-radius: 20px; background: #fff; border: 1px solid #EDEFE8; }
.ss-list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 14px; color: var(--ink); font-size: 15px; font-weight: 700; }
.ss-list a > .icon:last-child { margin-left: auto; color: #B3BAAA; }
.ss-list a:hover, .ss-list a:active { background: var(--green-soft); color: var(--green-dark); }
.ss-list-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--green-soft); color: var(--green); }
.ss-shop { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 -20px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #E6E9E0; background: #fff; color: var(--green-dark); font-weight: 800; }
.ss-shop:hover { color: var(--green); }
.sheet-top { margin: 0 auto auto; border-radius: 0 0 28px 28px; padding: calc(12px + env(safe-area-inset-top)) 20px 16px; }
.sheet-top[open] { animation-name: sheet-down; }
@keyframes sheet-down { from { transform: translateY(-40px); opacity: 0; } }
/* Choix « Produits / Conseils » au-dessus du champ de recherche. */
.search-scope { display: flex; gap: 4px; width: max-content; margin: 0 0 12px; padding: 4px; border-radius: 999px; background: #F1F4EC; }
.search-scope input { position: absolute; opacity: 0; pointer-events: none; }
.search-scope span { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 800; cursor: pointer; transition: background .2s, color .2s; }
.search-scope input:checked + span { background: #fff; color: var(--green-dark); box-shadow: 0 2px 8px rgba(30, 41, 59, .1); }
.search-scope input:checked + span .icon { color: var(--green); }
.search-scope input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.search-form { display: flex; align-items: center; gap: 10px; }
.search-form svg { flex-shrink: 0; }
.search-form input[type="search"] {
	flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 16px;
	border: 1px solid var(--line); background: var(--card); font-size: 16px; color: var(--ink); outline: none;
}
.search-form input[type="search"]:focus { border-color: var(--green); }

/* ---------- Carte produit (maquette) ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pcard { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--card); border: 1px solid #E9ECE3; overflow: hidden; }
/* Liste d'envies : cœur (contour → plein vert), petit rebond au clic. */
.wish-btn { cursor: pointer; color: var(--ink); }
.wish-btn .wish-on { display: none; }
.wish-btn[aria-pressed="true"] { color: var(--heart); }
.wish-btn[aria-pressed="true"] .wish-on { display: inline-block; }
.wish-btn[aria-pressed="true"] .wish-off { display: none; }
.wish-btn.is-pop .icon { animation: wish-pop .35s ease-out; }
@keyframes wish-pop { 50% { transform: scale(1.3); } }
.pcard { position: relative; }
.pcard-wish { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 12px rgba(30, 41, 59, .12); }
.pcard-wish:hover { background: #fff; color: var(--heart); }
.wish-head .icon { color: var(--ink); }
.wish-item { transition: opacity .25s, transform .25s; }
.wish-item.is-removing { opacity: 0; transform: scale(.95); }
.wish-head-block { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px 0 24px; text-align: center; }
.wish-head-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: #FDECEA; color: var(--heart); }
.wish-head-fig { position: relative; isolation: isolate; display: block; }
.wish-sparkle { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; opacity: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFD54A' d='M12 0c.9 6.3 5.7 11.1 12 12-6.3.9-11.1 5.7-12 12-.9-6.3-5.7-11.1-12-12C6.3 11.1 11.1 6.3 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(255, 213, 74, .8)); animation: wish-sparkle 4.4s ease-in-out var(--d) infinite; }
@keyframes wish-sparkle { 0%, 100% { opacity: 0; transform: scale(0) rotate(0); } 8% { opacity: 1; transform: scale(1) rotate(45deg); } 16%, 99% { opacity: 0; transform: scale(0) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .wish-sparkle { display: none; } }
.wish-head-img { display: block; width: 170px; height: auto; filter: drop-shadow(0 10px 16px rgba(120, 40, 20, .18)); } /* chien couronné qui serre un cœur */
.wish-head-block h1 { margin: 4px 0 0; font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.wish-head-block p { max-width: 520px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.wish-empty .button { margin-top: 8px; }
.pcard-media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--green-soft); }
.pcard-media img { width: 100%; height: 100%; padding: 10%; object-fit: contain; background: #fff; } /* photo un peu réduite dans son cadre (fond blanc comme les photos produit) */
.pcard-tag { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 7px; border-radius: 999px; background: #F07A12; color: #fff; box-shadow: 0 4px 10px rgba(240, 122, 18, .3); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pcard-tag .icon { display: block; flex-shrink: 0; }
.pcard-tag-img { width: 18px; height: 18px; flex-shrink: 0; margin-left: -3px; overflow: hidden; border-radius: 50%; background: #fff; }
.pcard-tag-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Étiquette double (produit de deux rayons, hors page de rayon) : les deux images se chevauchent, « Chiens & Chats ». */
.pcard-tag.is-double .pcard-tag-img + .pcard-tag-img, .pcard-tag.is-double .icon + .icon { margin-left: -10px; box-shadow: 0 0 0 1.5px #F07A12; }
.pcard-tag.is-double > .icon + .pcard-tag-img, .pcard-tag.is-double > .pcard-tag-img + .icon { margin-left: -6px; }
.pcard-media { container-type: inline-size; } /* la taille de la carte décide du texte de l'étiquette */
.pcard-tag { max-width: calc(100% - 60px); } /* jamais sous le cœur (en haut à droite) */
.pcard-tag > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 230px) { .pcard-tag.is-double { padding-right: 7px; } .pcard-tag.is-double > span:last-child { display: none; } } /* carte étroite : les deux images seules */
/* Badges produits (étiquettes douces) : cartes, en bas à gauche de la photo, sur le même bord et à la même hauteur (24 px)
   que l'étiquette du rayon (en haut à gauche) ; deux au plus, empilés et alignés à gauche. Fiche produit : en haut à gauche. */
.pbadges { position: absolute; z-index: 2; left: 8px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.pbadge {
	display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border: 1px solid; border-radius: 8px;
	box-shadow: 0 2px 8px rgba(30, 41, 59, .08); font-size: 10.5px; line-height: 1; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.pbadge .icon { display: block; flex-shrink: 0; width: 13px; height: 13px; }
.pbadge > span { display: block; padding-top: 1px; } /* texte centré à l'œil, comme l'étiquette du rayon */
@supports (text-box: trim-both cap alphabetic) { .pbadge > span { padding-top: 0; text-box: trim-both cap alphabetic; } }
.pbadge--promo { color: #C2272D; background: #FDECEC; border-color: #F6C9CB; }
.pbadge--nouveau { color: #6D28D9; background: #F3EEFF; border-color: #DDD0FB; }
.pbadge--rupture { color: #475467; background: #F2F4F7; border-color: #D0D5DD; }
.pbadge--stock { color: #B45309; background: #FFF4E5; border-color: #FBD9A8; }
.pbadge--commande { color: #0E7490; background: #E6F6FA; border-color: #B7E3EE; }
.pbadge--vedette { color: #BE185D; background: #FDEDF5; border-color: #F7C6DD; }
.pbadge--top { color: #8A6414; background: #FBF4E0; border-color: #F0E1B6; }
.pbadge--vip { color: #8A6414; background: #FBF4E0; border-color: #E8CF8A; }
.pcard.is-out .pcard-media img { filter: grayscale(1); opacity: .55; } /* rupture : photo grisée… */
.pcard.is-out .pcard-add { background: #98A2B3; box-shadow: none; } /* …et bouton gris (il mène à la fiche) */
/* Fiche produit : sous le bouton retour (téléphone : 14 px + 44 px + 10 px), un peu plus grands. */
.pbadges--pdp { top: 68px; bottom: auto; left: 16px; gap: 6px; }
.pbadges--pdp .pbadge { height: 30px; gap: 5px; padding: 0 12px 0 10px; border-radius: 10px; font-size: 12.5px; }
.pbadges--pdp .pbadge .icon { width: 15px; height: 15px; }
@media (min-width: 900px) { .pbadges--pdp { top: 18px; left: 20px; } } /* ordinateur : pas de bouton retour, alignés sur le cœur (en haut) */
.vip-exclusive-badge, .vip-exclusive-badge-single { display: none; } /* badge de l'extension VIP : remplacé par « Exclusif VIP » du thème */
/* Majuscules centrées à l'œil : on retire l'espace réservé aux jambages sous la ligne. */
.pcard-tag > span { display: block; padding-top: 1px; }
@supports (text-box: trim-both cap alphabetic) { .pcard-tag > span { padding-top: 0; text-box: trim-both cap alphabetic; } }
.pcard-body { display: flex; flex-direction: column; flex-grow: 1; gap: 8px; padding: 10px 12px 12px; }
.pcard-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px; font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.pcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: auto; }
.pcard-price { display: flex; flex-direction: column; min-width: 0; }
.pcard-price > span:not(.vip-chip) { min-height: 15px; font-size: 11px; color: var(--muted); }
.pcard-price strong { font-size: 15px; font-weight: 800; color: var(--ink); }
/* Prix VIP (client VIP connecté) : petite étiquette sobre, fond crème et texte doré, sans dégradé ni reflet. */
.vip-chip {
	display: inline-flex; align-items: center; gap: 3px; align-self: flex-start;
	height: 18px; padding: 0 7px 0 5px; border-radius: 6px; line-height: 1;
	background: #FBF4E0; border: 1px solid #F0E1B6;
	color: #8A6414 !important; font-size: 10px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.vip-chip .icon { display: block; flex-shrink: 0; color: #C9A03C; }
.pcard-price.is-vip { gap: 1px; }
.pcard-price.is-vip del { font-size: 11px; color: var(--muted); }
.pcard-price.is-vip del .woocommerce-Price-amount { font-weight: 600; }
.pcard-price.is-vip strong { color: var(--green-dark); }
.pdp-price-box { display: flex; flex-direction: column; gap: 2px; }
.pdp-price-box.is-vip .pdp-price { color: var(--green-dark); }
.pdp-price-was { font-size: 15px; font-weight: 700; color: var(--muted); }
.pdp-price-box .vip-chip { height: 24px; gap: 5px; padding: 0 10px 0 8px; border-radius: 8px; font-size: 12px; }
.pcard-add { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--green); color: #fff; transition: background .2s, transform .2s; }
.pcard-add:hover { color: #fff; transform: scale(1.06); }
.pcard-add:hover { background: var(--green-dark); }

/* ---------- Accueil ---------- */
.noscroll { scrollbar-width: none; }
.noscroll::-webkit-scrollbar { display: none; }
/* Menus et panneaux (déroulants des rayons, grand menu, panneaux du bas, panier, cookies, sommaire) : on défile toujours
   (molette, pavé tactile, doigt), mais sans barre de défilement visible. La page elle-même garde la sienne. */
.sheet, .ss-view, .drawer-items, .drawer-body, .chip-drop, .mega, .mega *, .legal-toc, .cookie-prefs-scroll { scrollbar-width: none; }
:is(.sheet, .ss-view, .drawer-items, .drawer-body, .chip-drop, .mega, .mega *, .legal-toc, .cookie-prefs-scroll)::-webkit-scrollbar { display: none; }
.home-block { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.home-block { margin-top: 26px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pill-light { align-self: flex-start; background: var(--green-soft); }
/* ---------- Hero animé (accueil) ---------- */
.hero {
	/* Le fond du hero remonte derrière le menu flottant : pas de bande unie en haut de page. */
	--head-space: 92px;
	position: relative; isolation: isolate; overflow: hidden;
	margin-top: calc(-1 * var(--head-space)); padding: var(--head-space) 0 8px;
}
.hero::before {
	content: ""; position: absolute; z-index: -1; inset: -10% -30% 0;
	background:
		radial-gradient(circle at 78% 42%, rgba(185, 229, 159, .5), transparent 42%),
		radial-gradient(circle at 12% 88%, rgba(236, 252, 228, .95), transparent 45%);
}
/* Empreintes le long des trajets (hero.js) : elles apparaissent pas à pas (voir « Animations du hero ») ;
   si le visiteur réduit les animations, elles restent posées, tamisées (plus pâles au départ). */
.paw-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; color: var(--green); fill: currentColor; opacity: .17; }
.paw-layer use { opacity: var(--o, .7); }
/* Petite patte en haut, entre le « s » et le point de « compagnons. ». */
.title-paw { display: inline-block; position: relative; width: 0; height: 0; color: var(--green); } /* sans largeur : le point reste collé au mot */
.title-paw .icon { position: absolute; left: -.08em; bottom: .5em; width: .42em; height: .42em; rotate: 18deg; }
.paw-layer path[data-trail] { fill: none; stroke: none; }
.hero-leaf { position: absolute; z-index: -1; color: var(--green); opacity: .3; pointer-events: none; }
.hero-leaf--1 { top: 14%; right: 7%; }
.hero-leaf--2 { top: 52%; left: 5%; }
.hero-leaf--3 { bottom: 6%; right: 32%; }
.hero-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; gap: 30px; }
.hero-title { margin: 12px 0 10px; font-size: 33px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.hero-title .w { display: inline-block; }
/* Retour à la ligne seulement sur téléphone (ex. « née d’une passion »). */
@media (min-width: 900px) { .br-mobile { display: none; } }
.w-accent { color: var(--green); background: linear-gradient(transparent 64%, rgba(185, 229, 159, .75) 64%); border-radius: 4px; }
.hero-lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Orbite : photo au centre, rayons qui tournent autour. */
.orbit-stage { --stage: min(340px, 86vw); --item: 58px; --r: calc(var(--stage) / 2 - var(--item) / 2 - 4px); position: relative; width: var(--stage); aspect-ratio: 1; margin: 6px auto 18px; }
.orbit-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring circle { fill: none; stroke: var(--green); stroke-width: .35; stroke-dasharray: 1.2 2.2; stroke-opacity: .55; vector-effect: non-scaling-stroke; }
.orbit-ring--b { inset: 14%; width: 72%; height: 72%; }
.orbit-ring--b circle { stroke-dasharray: .4 2.6; stroke-width: 1.2; stroke-opacity: .45; }
.orbit-center { position: absolute; inset: 22%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #EAF8E0 45%, #C9EBB2 100%); box-shadow: 0 0 0 8px rgba(255, 255, 255, .75), 0 24px 60px rgba(47, 87, 25, .28); }
.orbit-center img { width: 100%; height: 100%; object-fit: cover; }
/* Mascotte détourée : pas de disque ni de fond, elle déborde un peu du centre (les rayons tournent autour). */
.orbit-center.is-mascotte { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
/* Chiva au centre (image au hasard, voir hero.php), qui déborde un peu du cercle. */
.orbit-center.is-mascotte .orbit-mascotte {
	position: absolute; left: 50%; bottom: -8%; width: auto; height: 128%; max-width: none; margin: 0; object-fit: contain; transform: translateX(-50%);
	filter: drop-shadow(0 16px 20px rgba(47, 87, 25, .22));
}
.orbit-track { position: absolute; inset: 0; }
.orbit-center--front { z-index: 2; pointer-events: none; clip-path: inset(-100% -100% 50% -100%); } /* moitié haute du chien, devant les rayons du haut */
.orbit-center.is-mascotte:not(.orbit-center--front) { clip-path: inset(50% -100% -100% -100%); } /* l'original ne montre que sa moitié basse : rien n'est affiché deux fois (ni ombre ni contour) */
.orbit-item {
	position: absolute; left: 50%; top: 50%; width: var(--item); height: var(--item);
	margin: calc(var(--item) / -2) 0 0 calc(var(--item) / -2);
	transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
}
.orbit-item-inner {
	position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	padding: 3px; border-radius: 50%; background: #fff; color: var(--green); font-weight: 900;
	box-shadow: 0 10px 24px rgba(30, 41, 59, .16); transition: box-shadow .2s;
}
.orbit-item-inner img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.orbit-item-inner:has(.orbit-pose) { background: linear-gradient(150deg, #fff, var(--green-soft)); }
.orbit-item-inner img.orbit-pose { padding: 12%; border-radius: 0; object-fit: contain; } /* pose détourée de l'animal */
.orbit-item:hover .orbit-item-inner, .orbit-item:focus-visible .orbit-item-inner { box-shadow: 0 0 0 3px var(--green), 0 12px 28px rgba(47, 87, 25, .3); }
.orbit-label {
	position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
	padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .88);
	color: var(--ink); font-size: 10px; font-weight: 800; white-space: nowrap; pointer-events: none;
}
.hero-float {
	position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px;
	padding: 7px 12px 7px 7px; border-radius: 16px; font-size: 12px; line-height: 1.2; color: var(--ink);
	border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .9);
	box-shadow: 0 12px 30px rgba(30, 41, 59, .12);
}
.hero-float strong { font-weight: 900; color: var(--green-dark); }
.hero-float-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--green); color: #fff; }
.hero-float--1 { left: -6%; bottom: 10%; }
.hero-float--2 { right: -6%; top: 6%; }

/* Animations du hero en CSS seul (plus de GSAP) : gérées par la carte graphique, sans script à chaque image.
   Propriétés « translate / scale / rotate » séparées : l'entrée et la rotation ne se gênent pas.
   Les cartes du hero (.hero-float) ne bougent plus en continu. */
@media (prefers-reduced-motion: no-preference) {
	/* Entrée rapide (tout est en place en moins d'une seconde) ; les empreintes du chien partent en premier (hero.js). */
	.hero-pill, .hero-title, .hero-lead, .hero-actions, .hero-points, .hero-float { animation: hero-up .5s cubic-bezier(.2, .8, .2, 1) .15s both; }
	.hero-title { animation-delay: .2s; }
	.hero-lead { animation-delay: .25s; }
	.hero-actions { animation-delay: .3s; }
	.hero-points { animation-delay: .35s; }
	.hero-float--1 { animation-delay: .6s; }
	.hero-float--2 { animation-delay: .7s; }
	.orbit-center { animation: hero-pop .6s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
	/* Les cercles en pointillés et les rayons tournent lentement ; au survol, tout s'arrête pour viser un rayon. */
	.orbit-ring { animation: hero-fade .6s ease-out .25s both, hero-spin 120s linear infinite reverse; }
	.orbit-ring--b { animation-duration: .6s, 90s; animation-direction: normal, normal; }
	.orbit-track { animation: hero-spin 80s linear infinite; }
	.orbit-item-inner { animation: hero-pop .35s cubic-bezier(.34, 1.56, .64, 1) both, hero-spin 80s linear infinite reverse; }
	.orbit-item:nth-child(1) .orbit-item-inner { animation-delay: .35s, 0s; }
	.orbit-item:nth-child(2) .orbit-item-inner { animation-delay: .4s, 0s; }
	.orbit-item:nth-child(3) .orbit-item-inner { animation-delay: .45s, 0s; }
	.orbit-item:nth-child(4) .orbit-item-inner { animation-delay: .5s, 0s; }
	.orbit-item:nth-child(5) .orbit-item-inner { animation-delay: .55s, 0s; }
	.orbit-item:nth-child(6) .orbit-item-inner { animation-delay: .6s, 0s; }
	.orbit-stage:hover .orbit-track, .orbit-stage:hover .orbit-item-inner, .orbit-stage:hover .orbit-ring { animation-play-state: paused; }
	.paw-layer use { opacity: 0; transform-box: fill-box; transform-origin: center; animation: hero-paw var(--dur, 8s) ease-out var(--d, 0s) infinite; }
	.title-paw { animation: title-paw .6s cubic-bezier(.34, 1.56, .64, 1) .7s both; }
	.hero-leaf { animation: hero-leaf 7s ease-in-out infinite alternate; }
	.hero-leaf--2 { animation-duration: 8s; animation-delay: -3s; }
	.hero-leaf--3 { animation-duration: 6s; animation-delay: -5s; }
}
@keyframes hero-up { from { opacity: 0; translate: 0 16px; } }
@keyframes hero-fade { from { opacity: 0; scale: .85; } }
@keyframes hero-spin { to { rotate: 360deg; } }
@media (min-width: 900px) { .orbit-track { animation-duration: 60s; } .orbit-item-inner { animation-duration: .35s, 60s; } }
@keyframes hero-paw { 0% { opacity: 0; transform: scale(.3); } 5% { opacity: 1; transform: scale(1); } 45% { opacity: 1; } 60%, 100% { opacity: 0; transform: scale(1); } }
@keyframes title-paw { from { opacity: 0; scale: .2; rotate: -30deg; } }
@keyframes hero-pop { from { opacity: 0; scale: .6; } }
@keyframes hero-leaf { to { translate: 18px -26px; rotate: 30deg; } }
.hero-actions { display: grid; gap: 10px; margin-top: 18px; }
.hero-actions .button { min-height: 50px; }
.hero-actions .button-light { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.hero-actions .button-light:hover { background: var(--card); color: var(--green); }
.vip-card .button-white { align-self: flex-start; background: #fff; color: var(--green-dark); }
.vip-card .button-white:hover { background: var(--green-soft); color: var(--green-dark); }
/* Carte « membre » (client déjà VIP) : étiquette et halo dorés. */
.vip-card.is-member .pill-light { background: linear-gradient(135deg, #FFE08A, #F1C24B); color: #5A3E00; }
.vip-card.is-member .vip-halo { background: radial-gradient(circle, rgba(255, 214, 102, .6) 0%, rgba(241, 194, 75, .25) 45%, transparent 70%); }
.hero-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 12px; font-weight: 700; color: var(--green-dark); }
.hero-points li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: var(--card); border: 1px solid #E9ECE3; text-align: center; line-height: 1.25; }
.hero-points .icon { color: var(--green); }
/* Téléphone, tout centré : étiquette, titre et phrase, puis le chien et les rayons, puis les boutons et les pastilles.
   « display: contents » : les éléments du texte se placent directement dans la grille, autour de l'image. */
@media (max-width: 899px) {
	.hero-inner { gap: 0; }
	.hero-text { display: contents; text-align: center; }
	.hero-pill { justify-self: center; }
	.orbit-stage { order: 1; margin: 22px auto 8px; }
	.hero-actions { order: 2; }
	.hero-points { order: 3; }
}
.fake-search { width: 100%; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 15px; cursor: pointer; text-align: left; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.block-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.block-head a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; }
/* Marges intérieures (compensées par des marges négatives) : au survol, le cercle qui monte et son ombre ne sont pas coupés par le défilement. */
.rail { display: flex; gap: 12px; overflow-x: auto; margin: -18px -20px -14px; padding: 18px 20px 18px; scroll-padding: 0 20px; scroll-snap-type: x mandatory; }
.rail > * { scroll-snap-align: start; flex-shrink: 0; }
.rayon-card { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); }
.rayon-img { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(150deg, #fff, var(--green-soft)); border: 1px solid #E2F2D8; color: var(--green); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(47, 87, 25, .08); transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.rayon-img .icon { width: 42px; height: 42px; transition: transform .25s; }
/* Survol : le cercle vert passe à l'orange des badges. */
.rayon-card:hover .rayon-img { background: linear-gradient(150deg, #F5913A, #E06A0B); border-color: #FBDDBE; color: #fff; transform: translateY(-4px); box-shadow: 0 14px 28px rgba(240, 122, 18, .28); }
.rayon-card:hover .rayon-img .icon { transform: scale(1.08) rotate(-4deg); }
/* Image de la catégorie à la place de l'icône (essai). */
.rayon-img.has-photo { overflow: hidden; background: #fff; }
.rayon-img.has-photo img, .rayon-video { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.rayon-card:hover .rayon-img.has-photo { background: #fff; }
.rayon-card:hover .rayon-img.has-photo img, .rayon-card:hover .rayon-video { transform: scale(1.06); }
.rayon-name { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.25; }
.vip-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; background: var(--green-dark); color: #fff; overflow: hidden; }
.vip-card::before { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 229, 159, .28), transparent 65%); }
.vip-text { position: relative; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.vip-text strong { font-size: 18px; line-height: 1.2; }
.vip-text > span:not(.pill) { font-size: 13px; color: #D6EFC9; }
/* Visuel : image détourée du produit VIP (chien roi sur son trône), posée en entier sur un halo lumineux. */
.vip-visual { position: relative; flex-shrink: 0; width: 132px; height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.vip-halo { position: absolute; left: 50%; bottom: 4%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(241, 217, 138, .5) 0%, rgba(185, 229, 159, .22) 45%, transparent 70%); }
.vip-img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); transition: transform .35s; }
.vip-visual:hover .vip-img { transform: translateY(-4px) scale(1.03); }
/* Téléphone : grande image du trône, collée en bas à droite derrière le texte (elle peut passer sous les badges). */
@media (max-width: 899px) {
	.vip-text { z-index: 1; }
	.vip-visual { position: absolute; right: -22px; bottom: -4px; width: 64%; height: 80%; }
	.vip-img { object-position: 100% 100%; }
	.vip-card.is-member .vip-visual { right: -8px; width: 50%; height: 64%; } /* trône du membre, plus large : il reste à côté du texte */
}
/* Piste d'empreintes qui traverse la bannière VIP : posée, sans animation (les badges en verre clignotaient sinon). */
.vip-paws { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; pointer-events: none; }
.vip-paws use { opacity: .18; }
.vip-cta-paw { transform-origin: 50% 80%; }
.vip-cta:hover .vip-cta-paw, .vip-cta:focus-visible .vip-cta-paw { animation: paw-wave .7s ease-in-out; }
@keyframes paw-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 60% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) {
	.vip-cta:hover .vip-cta-paw { animation: none; }
}
.info-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius); background: var(--green-soft); }
.info-card div { display: flex; flex-direction: column; gap: 4px; }
.info-card strong { font-size: 15px; font-weight: 800; }
.info-card div span { font-size: 13px; line-height: 1.45; color: #3F4A3A; }
.info-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #fff; color: var(--green); }
.split { display: grid; gap: 18px; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; background: var(--green-soft); }
/* Flèches et points des carrousels (conseils, préférés…). */
.slider-arrow {
	position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; padding: 0;
	display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .9); color: var(--ink);
	box-shadow: 0 6px 18px rgba(30, 41, 59, .12);
}
.slider-arrow:hover { background: #fff; color: var(--green); }
.slider-prev { left: 12px; }
.slider-prev .icon { transform: rotate(180deg); }
.slider-next { right: 12px; }
.slider-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
.slider-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 4px; background: rgba(47, 87, 25, .25); cursor: pointer; transition: width .25s, background .25s; }
.slider-dots button[aria-current="true"] { width: 22px; background: var(--green); }
.split-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.split-body h2 { margin: 4px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.split-body p { margin: 0; font-size: 14px; line-height: 1.6; color: #3F4A3A; }
.checks { display: grid; gap: 8px; margin: 4px 0 6px; padding: 0; list-style: none; font-size: 14px; font-weight: 700; }
.checks li { display: flex; align-items: center; gap: 8px; }
.checks .icon { color: var(--green); }
/* Section vrac de l'accueil : sans image, tout centré (téléphone et ordinateur). */
.split.vrac { grid-template-columns: 1fr; }
.vrac .split-body { align-items: center; text-align: center; max-width: 620px; margin: 0 auto; }
.vrac .checks li { justify-content: center; }
/* Conseils : slider des 5 derniers articles, texte sur l'image. */
.blog-hero { position: relative; margin: 8px 0 26px; border-radius: 30px; overflow: hidden; background: var(--green-dark); box-shadow: 0 24px 50px rgba(30, 41, 59, .18); }
.bh-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.bh-slide { position: relative; flex: 0 0 100%; height: 470px; scroll-snap-align: start; isolation: isolate; overflow: hidden; }
.bh-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease; }
.bh-slide:hover .bh-img { transform: scale(1.1); }
/* Voile dégradé : le texte reste lisible sur toutes les photos. */
.bh-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 25, 5, 0) 25%, rgba(10, 25, 5, .55) 55%, rgba(10, 25, 5, .9) 100%); }
.bh-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 22px 46px; color: #fff; }
.bh-cat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bh-body h2 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 900; letter-spacing: -.01em; text-shadow: 0 2px 16px rgba(0, 0, 0, .25); }
.bh-body h2 a { color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bh-body h2 a::after { content: ""; position: absolute; inset: 0; } /* toute la diapositive est cliquable */
.bh-body p { display: none; margin: 0; max-width: 620px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.bh-meta { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .78); }
.bh-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 11px 18px; border-radius: 999px; background: #fff; color: var(--green-dark); font-size: 14px; font-weight: 800; transition: transform .2s; }
.bh-slide:hover .bh-more { transform: translateX(4px); }
.blog-hero .slider-arrow { display: none; z-index: 2; }
/* Points : l'actif s'allonge et se remplit pendant la durée d'affichage. */
.bh-dots { position: absolute; left: 22px; bottom: 20px; z-index: 2; display: flex; gap: 6px; }
.bh-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .3s; }
.bh-dots button[aria-current="true"] { width: 34px; }
.bh-dots button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: bh-fill 4s linear; }
@keyframes bh-fill { from { transform: scaleX(0); } }
@media (min-width: 900px) {
	.blog-hero { margin: 16px 0 34px; border-radius: 36px; }
	.bh-slide { height: 520px; }
	.bh-body { padding: 44px 48px 64px; gap: 12px; }
	.bh-body h2 { max-width: 760px; font-size: 40px; }
	.bh-body p { display: block; -webkit-line-clamp: 2; }
	.blog-hero .slider-arrow { display: flex; top: auto; bottom: 34px; margin: 0; }
	.blog-hero .slider-prev { left: auto; right: 90px; }
	.blog-hero .slider-next { right: 40px; }
	.bh-dots { left: 48px; bottom: 34px; }
}
@media (prefers-reduced-motion: reduce) { .bh-img, .bh-slide:hover .bh-img { transform: none; transition: none; } .bh-dots button::after { animation: none; } }

/* Fiche produit, « Vous aimerez aussi » : slider de cartes produit. */
.rel-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.rel-nav { display: none; gap: 8px; }
.rel-nav .slider-arrow { position: static; margin: 0; background: #fff; border-color: var(--line); }
.rel-nav .slider-arrow:disabled { opacity: .35; cursor: default; }
.rel-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 16px; scroll-padding: 0 20px; }
.rel-track > .pcard { flex: 0 0 46%; scroll-snap-align: start; }
/* Carte de fin de rangée (accueil, « Les préférés ») : même largeur qu'une carte produit, mène à tout le rayon. */
.rel-track > .pref-more { flex: 0 0 46%; scroll-snap-align: start; }
.pref-more {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 14px;
	border-radius: var(--radius); border: 1.5px dashed #B9E59F; background: linear-gradient(160deg, #fff, var(--green-soft));
	color: var(--green-dark); text-align: center; transition: border-color .2s, box-shadow .2s;
}
.pref-more strong { font-size: 15px; font-weight: 900; line-height: 1.25; }
.pref-more-cat { font-size: 12px; font-weight: 700; color: var(--muted); }
.pref-more-arrow {
	width: 56px; height: 56px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 10px 22px rgba(65, 115, 37, .28); transition: transform .25s;
}
.pref-more:hover { border-color: var(--green); box-shadow: 0 12px 28px rgba(47, 87, 25, .12); }
.pref-more:hover .pref-more-arrow { transform: translateX(4px); }
.rel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rel-track.is-dragging a { pointer-events: none; }
/* Accueil, « Les préférés de nos clients » : une ligne à faire glisser par thème (friandises, alimentation…). */
.pref-top {
	position: relative; display: flex; align-items: center; min-height: 104px; margin: 34px 0 18px; padding: 18px 20px 18px 142px; border-radius: 24px;
	background: linear-gradient(120deg, var(--green-soft), #D8F0C8); overflow: visible;
}
.pref-top-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pref-top h2 { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.15; }
.pref-top a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; }
.pref-mascotte { position: absolute; left: 6px; bottom: 0; width: 132px; height: auto; margin: 0; transform: rotate(-4deg); transform-origin: 50% 100%; filter: drop-shadow(0 10px 12px rgba(47, 87, 25, .2)); pointer-events: none; }
.pref-row + .pref-row { margin-top: 14px; }
/* Ligne avec mascotte : en-tête en bandeau, mascotte d'un côté, texte de l'autre (côtés alternés). */
.pref-banner {
	position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 92px;
	margin: 44px 0 12px; padding: 14px 16px 14px 140px; border-radius: 22px; background: linear-gradient(120deg, var(--green-soft), #D8F0C8);
}
.pref-banner.is-right { padding: 14px 140px 14px 16px; background: linear-gradient(240deg, #FFF3E0, #FBE2BC); }
.pref-banner-img { position: absolute; left: 4px; bottom: 0; width: 128px; height: auto; margin: 0; filter: drop-shadow(0 10px 12px rgba(30, 41, 59, .18)); pointer-events: none; }
.pref-banner.is-right .pref-banner-img { left: auto; right: 4px; }
.pref-banner--hamster .pref-banner-img { width: 92px; right: 18px; } /* hamster debout, plus haut que large */
.pref-banner.pref-banner--perroquet { background: linear-gradient(240deg, #EAF4FC, #C9E2F6); } /* bleu pastel, comme le perroquet */
.pref-banner.pref-banner--poisson { background: linear-gradient(120deg, #E6F6FB, #C4E8F4); } /* eau claire */
.pref-banner.pref-banner--hamster { background: linear-gradient(240deg, #FFF4E4, #F8DDB6); } /* paille */
.pref-banner.pref-banner--gecko { background: linear-gradient(120deg, #F6F8DF, #E4EDB8); } /* terrarium */
.pref-head { gap: 10px; margin-bottom: 8px; }
.pref-head h3 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; font-size: 16px; font-weight: 800; }
.pref-kicker { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); } /* nom exact de la catégorie, au-dessus du titre */
.pref-actions { display: flex; align-items: center; gap: 14px; }
.pref-actions > a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (min-width: 900px) {
	.rel-nav { display: flex; }
	.block-head.rel-head { flex-direction: row; justify-content: space-between; text-align: left; }
	.rel-track { margin: 0; padding: 4px 2px 18px; gap: 20px; scroll-padding: 0; cursor: grab; }
	.rel-track > .pcard, .rel-track > .pref-more { flex-basis: calc((100% - 60px) / 4); }
	.pref-top { min-height: 130px; margin-top: 60px; padding: 24px 36px 24px 250px; }
	.pref-top-text { flex-direction: row; align-items: baseline; gap: 18px; }
	.pref-top h2 { font-size: 30px; }
	.pref-mascotte { width: 190px; left: 36px; }
	.pref-banner { flex-direction: row; align-items: center; justify-content: space-between; min-height: 110px; margin-top: 60px; padding: 18px 28px 18px 220px; }
	.pref-banner.is-right { padding: 18px 220px 18px 28px; }
	.pref-banner-img { width: 170px; left: 30px; }
	.pref-banner.is-right .pref-banner-img { right: 30px; }
	.pref-banner--hamster .pref-banner-img { width: 122px; right: 54px; }
	.pref-banner h3 { font-size: 20px; }
}

/* Derniers conseils : slider de cartes d'articles. */
.conseils { margin-top: 44px; }
.conseils-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.conseils-head > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.conseils-head h2 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.conseils-head p { max-width: 520px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.conseils-nav { display: flex; align-items: center; gap: 8px; }
.conseils-all { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; font-size: 14px; font-weight: 800; }
.conseils-nav .slider-arrow { position: static; margin: 0; background: #fff; border-color: var(--line); }
.conseils-nav .slider-arrow:disabled { opacity: .35; cursor: default; }
.conseils-track {
	display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
	margin: 0 -20px; padding: 4px 20px 16px; scroll-padding: 0 20px;
}
.post-card {
	flex: 0 0 82%; display: flex; flex-direction: column; scroll-snap-align: start;
	border-radius: 26px; background: #fff; border: 1px solid #E9ECE3; overflow: hidden;
	box-shadow: 0 10px 30px rgba(30, 41, 59, .06); transition: transform .3s, box-shadow .3s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(30, 41, 59, .12); }
.post-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--green-soft); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.post-card:hover .post-card-media img { transform: scale(1.05); }
.post-cat {
	position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: var(--green-dark); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.post-card-body { display: flex; flex-direction: column; flex-grow: 1; gap: 8px; padding: 16px 18px 18px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.post-card h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 900; }
.post-card h3 a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable */
.post-card { position: relative; }
.post-card p { margin: 0; font-size: 14px; line-height: 1.5; color: #3F4A3A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-more { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 800; color: var(--green); }
.conseils-dots { position: static; margin-top: 4px; }

/* En-tête de section centré (étiquette, titre, phrase). */
.section-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; text-align: center; }
.section-head h2 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.section-head p { max-width: 520px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Une gamme complète : cartes colorées, la mascotte (image sans fond) sort de la carte par le haut.
   Téléphone : cartes qui défilent au doigt. Ordinateur : 3 colonnes, carte du milieu décalée. */
.gamme-section { margin-top: 44px; }
.gamme {
	display: flex; gap: 16px; margin: 0 -20px; padding: 124px 20px 18px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none;
}
.gamme::-webkit-scrollbar { display: none; }
.gamme-card {
	--tint: #FFF3E0; --tint-2: #FBDDB0; --accent: #B7701F;
	position: relative; flex: 0 0 78%; max-width: 320px; display: flex; flex-direction: column; scroll-snap-align: start;
	border-radius: 30px; color: var(--ink);
	background: linear-gradient(165deg, #fff 0%, var(--tint) 50%, var(--tint-2) 125%);
	border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 14px 34px -14px rgba(30, 41, 59, .2);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.gamme-card--gear { --tint: #EAF6E1; --tint-2: #C8E8B3; --accent: var(--green); }
.gamme-card--care { --tint: #E6F2F7; --tint-2: #BFDDEB; --accent: #2E7A96; }
.gamme-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -16px rgba(30, 41, 59, .26); color: var(--ink); }
.gamme-visual { position: relative; height: 150px; }
.gamme-disc {
	position: absolute; left: 50%; bottom: -8px; width: 72%; aspect-ratio: 1; transform: translateX(-50%);
	border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .45) 62%, transparent 70%);
}
.gamme-mascotte {
	position: absolute; left: 50%; bottom: -10px; width: 78%; max-width: 230px; height: auto; margin: 0;
	transform: translateX(-50%); transform-origin: 50% 100%;
	filter: drop-shadow(0 12px 14px rgba(30, 41, 59, .18)); transition: transform .45s cubic-bezier(.2, .8, .2, 1.3);
}
.gamme-card:hover .gamme-mascotte { transform: translateX(-50%) scale(1.06) rotate(-3deg); }
.gamme-dot { position: absolute; border-radius: 50%; background: var(--accent); opacity: .22; }
.gamme-dot--1 { width: 14px; height: 14px; top: 22%; left: 10%; }
.gamme-dot--2 { width: 9px; height: 9px; top: 12%; right: 12%; opacity: .35; }
.gamme-dot--3 { width: 22px; height: 22px; bottom: 8%; right: 7%; opacity: .14; }
.gamme-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 22px 24px; }
.gamme-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #fff; color: var(--accent); box-shadow: 0 6px 16px rgba(30, 41, 59, .08); }
.gamme-body strong { font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.gamme-text { font-size: 14px; line-height: 1.55; color: var(--muted); }
.gamme-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 800; color: var(--accent); }
.gamme-arrow { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; transition: transform .3s; }
.gamme-card:hover .gamme-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
	.gamme-dot--1, .gamme-dot--3 { animation: gamme-bulle 5s ease-in-out infinite; }
	.gamme-dot--2 { animation: gamme-bulle 4s ease-in-out -2s infinite; }
}
@keyframes gamme-bulle { 50% { transform: translateY(-8px); } }

/* Bienvenue chez Poil&Caille. */
.about { display: grid; gap: 32px; }
.about-media { position: relative; padding: 0 8px; }
.about-frame { position: relative; isolation: isolate; }
.about-frame::before { content: ""; position: absolute; inset: 14px -8px -14px 12px; z-index: -1; border-radius: 34px; background: linear-gradient(150deg, #B9E59F, var(--green)); transform: rotate(3deg); }
.about-photo { width: 100%; height: auto; border-radius: 30px; background: var(--green-soft); box-shadow: 0 24px 50px rgba(30, 41, 59, .18); } /* image entière (enseigne visible) */
.about-badge {
	/* À cheval sur le bord haut de la photo : l'enseigne reste visible. */
	position: absolute; top: -15px; left: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
	box-shadow: 0 6px 16px rgba(30, 41, 59, .12);
	background: rgba(255, 255, 255, .9);
	font-size: 12px; font-weight: 800; color: var(--green-dark);
}
.about-quote {
	position: absolute; left: 22px; right: 22px; bottom: 16px; margin: 0;
	display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px;
	padding: 14px 16px; border-radius: 22px;
	/* Fond blanc à 90 %, posé sur la photo. */
	border: 1px solid rgba(255, 255, 255, .7);
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 14px 34px rgba(30, 41, 59, .16), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.about-quote-icon { grid-row: span 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--green); color: #fff; }
.about-quote blockquote { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.about-quote figcaption { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.about-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.about-body h2 { margin: 4px 0 0; font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.about-sub { margin: 0; font-size: 16px; font-weight: 800; color: var(--green-dark); }
.about-body > p:not(.about-sub) { margin: 0; font-size: 15px; line-height: 1.65; color: #3F4A3A; }
.values { width: 100%; margin: 6px 0 0; padding: 0; list-style: none; }
.values li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #E6E9E0; }
.values li:last-child { border-bottom: 1px solid #E6E9E0; }
.value-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--green-soft); color: var(--green); }
.values li > span:last-child { font-size: 14px; line-height: 1.45; color: var(--muted); }
.values strong { display: block; font-size: 16px; font-weight: 900; color: var(--ink); }
.about-stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; }
.about-stats div { padding: 14px 10px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 8px 22px rgba(30, 41, 59, .05); }
.about-stats dt { font-size: 30px; line-height: 1; font-weight: 900; color: var(--green); }
.about-stats dd { margin: 6px 0 0; font-size: 12px; line-height: 1.3; font-weight: 700; color: var(--muted); }
.about-actions { width: 100%; display: grid; gap: 14px; margin-top: 10px; }
.about-actions .button { min-height: 52px; }
.about-cta--shop { display: none !important; } /* téléphone : « En savoir plus sur nous » à la place */
@media (min-width: 900px) { .about-cta--shop { display: inline-flex !important; } .about-cta--about { display: none !important; } }
.about-address { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.about-address .icon { color: var(--green); }
.about-address span { display: flex; flex-direction: column; font-size: 14px; }
.about-address small { font-size: 12px; color: var(--muted); }
.about-address:hover strong { color: var(--green); }

/* ---------- Programme de dons solidaires (accueil) ---------- */
.dons { margin-top: 44px; }
.dons-wrap {
	display: flex; flex-direction: column; gap: 36px;
	padding: 30px 16px; border-radius: 32px;
	background:
		radial-gradient(circle at 100% 0%, rgba(224, 98, 79, .10), transparent 40%),
		radial-gradient(circle at 0% 100%, rgba(185, 229, 159, .45), transparent 45%),
		linear-gradient(160deg, #F2FBEC 0%, #FFF7EE 100%);
	border: 1px solid #fff;
}
.dons-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.dons-head h2 { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.dons-head p { max-width: 560px; margin: 0; font-size: 15px; line-height: 1.6; color: #3F4A3A; }
.dons-head p strong { color: var(--green-dark); }
.dons-top { display: grid; gap: 14px; }
.dons-boost {
	position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
	padding: 26px 24px; border-radius: 28px; color: #fff;
	background: linear-gradient(150deg, var(--green) 0%, var(--green-dark) 100%);
	box-shadow: 0 20px 40px rgba(47, 87, 25, .25);
}
.dons-boost-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #D6EFC9; }
.dons-percent { font-size: 84px; line-height: .95; font-weight: 900; letter-spacing: -.04em; }
.dons-percent small { font-size: .5em; }
.dons-boost p { position: relative; max-width: 420px; margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: #ECFCE4; }
.dons-boost p strong { color: #fff; }
.dons-boost a { color: #fff; font-weight: 900; }
.dons-boost-paw { position: absolute; right: -18px; bottom: -22px; color: rgba(255, 255, 255, .12); transform: rotate(-18deg); }
/* La patte décorative reste coupée par les coins arrondis de la carte, la mascotte peut en sortir. */
.dons-boost-deco { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
@media (max-width: 899px) { .dons-boost-label { padding-right: 96px; } }
/* Mascotte super-héros : sort de la carte par le haut, comme si elle arrivait en volant. */
.dons-boost { overflow: visible; margin-top: 64px; }
.dons-heros { position: absolute; right: -6px; top: -76px; width: 150px; margin: 0; transform: rotate(-6deg); filter: drop-shadow(0 14px 18px rgba(20, 45, 10, .35)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
	.dons-heros { animation: heros-vol 4s ease-in-out infinite; }
	@keyframes heros-vol { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } }
}
.dons-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.dons-pillars li {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	padding: 18px 8px; border-radius: 22px; background: #fff; text-align: center;
	box-shadow: 0 8px 24px rgba(30, 41, 59, .06);
}
.dons-pillars strong { font-size: 13px; line-height: 1.25; font-weight: 800; }
.dons-pillar-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--green-soft); color: var(--green); }
.dons-pillars li:first-child .dons-pillar-icon { background: #FDECE8; color: var(--heart); }
.dons-how { scroll-margin-top: calc(110px + var(--topbar-h)); } /* ancre #comment-faire-un-don (cartes « Faites un don » du panier) */
.dons-how h3, .dons-assos h3 { margin: 0 0 16px; text-align: center; font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
/* Étapes : liste verticale reliée par un trait sur mobile, 4 cartes côte à côte sur ordinateur. */
.dons-steps { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.dons-steps::before { content: ""; position: absolute; left: 39px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(to bottom, rgba(65, 115, 37, .35) 0 6px, transparent 6px 12px); }
.dons-step {
	position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 12px;
	padding: 14px 16px; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(30, 41, 59, .06);
}
.dons-step-top { display: flex; align-items: center; }
.dons-step-num { display: none; }
.dons-step-icon { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--green); color: #fff; box-shadow: 0 0 0 5px #fff; }
.dons-step-text { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; line-height: 1.35; font-weight: 800; color: var(--ink); }
a.dons-step-text:hover { color: var(--green); }
/* Téléphone : le code prend toute la largeur de la carte, sur sa propre ligne (il débordait de l'écran). */
.dons-step .promo-code { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; }
.promo-code { display: inline-flex; align-items: center; gap: 12px; padding: 5px 5px 5px 14px; border-radius: 14px; border: 1.5px dashed var(--green); background: var(--green-soft); cursor: pointer; }
.promo-code code { font: 900 15px/1 Nunito, sans-serif; letter-spacing: .1em; color: var(--green-dark); }
.promo-copy { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; background: var(--green); color: #fff; font-size: 13px; font-weight: 800; transition: background .2s; }
.promo-code:hover .promo-copy { background: var(--green-dark); }
.promo-code.copied .promo-copy { background: var(--ink); }
.dons-pickup { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: -4px auto 16px; padding: 12px 16px; border-radius: 18px; background: #fff; border: 1px solid #E2F2D8; font-size: 13.5px; line-height: 1.5; color: #3F4A3A; }
.dons-pickup strong { color: var(--green-dark); }
.dons-pickup-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--green-soft); color: var(--green); }
.dons-assos ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.dons-assos li {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	padding: 16px; border-radius: 22px; background: rgba(255, 255, 255, .85); border: 1px solid #fff;
}
.dons-assos li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dons-asso-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #FDECE8; color: var(--heart); }
.dons-assos strong { font-size: 14px; line-height: 1.3; font-weight: 800; }
.dons-assos small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.dons-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.dons-cta p { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 800; }
.dons-cta p .icon { margin: -3px 6px 0 0; color: var(--heart); }
.dons-cta-actions { width: 100%; display: grid; gap: 10px; }
.dons-cta-actions .button { min-height: 52px; }
.dons-cta .button-ghost { background: transparent; color: var(--green-dark); border: 1.5px solid var(--green); }
.dons-cta .button-ghost:hover { background: #fff; color: var(--green-dark); }
.dons-conditions { font-size: 12px; color: var(--muted); text-decoration: underline; }

/* ---------- Programme de fidélité VIP (accueil) ---------- */
.fidelite { margin-top: 44px; }
/* Pleine largeur : fond d'un bord à l'autre de l'écran, contenu aligné sur la grille du site (1200 px). */
.fidelite-wrap {
	position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 32px;
	padding: 48px 20px; color: rgba(236, 252, 228, .82);
	background:
		radial-gradient(circle at 90% 10%, rgba(217, 180, 90, .22), transparent 40%),
		radial-gradient(circle at 0% 100%, rgba(111, 168, 74, .35), transparent 45%),
		linear-gradient(160deg, #24461A 0%, #16300B 100%);
}
.fidelite-body, .fidelite-side { position: relative; z-index: 1; }
/* Empreintes sur des chemins courbes, derrière le contenu (voir template-parts/fidelite.php). */
.fid-paws { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; fill: #F1D98A; pointer-events: none; }
.fid-paw { opacity: .16; } /* posées, sans animation (comme dans le hero) */
.fidelite-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fidelite-body h2 { margin: 0; color: #fff; font-size: 32px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.fidelite-sub { margin: 0; font-size: 17px; font-weight: 700; color: #D6EFC9; }
.fidelite-sub strong { color: #F1D98A; }
.fidelite-body > p:not(.fidelite-sub) { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }
.fidelite-list { width: 100%; display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.fidelite-list li {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09);
	color: #fff; font-size: 14px; line-height: 1.4; font-weight: 600;
}
.fidelite-list li:first-child { font-weight: 800; }
.fidelite-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: rgba(185, 229, 159, .16); color: #B9E59F; }
.fidelite-cgv { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; color: #D6EFC9; text-decoration: underline; text-underline-offset: 3px; }
.fidelite-cgv:hover { color: #fff; }
.fidelite-side { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* Téléphone : tout centré ; le trône, le prix d'adhésion et la note remontent entre la phrase d'introduction et la liste des avantages.
   « display: contents » : les éléments du texte se placent directement dans la colonne, autour du bloc prix. */
@media (max-width: 899px) {
	.fidelite-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } /* textes centrés */
	.fidelite-list li { text-align: left; } /* dans les cartes des avantages, l'icône et le texte restent côte à côte */
	.fidelite-body { display: contents; }
	.fidelite-body > * { position: relative; z-index: 1; }
	.fidelite-side { order: 1; width: 100%; margin: 10px 0 14px; }
	.fidelite-list, .fidelite-cgv { order: 2; }
}
/* Mascotte sur son trône (détourée) avec un halo doré ; la carte VIP, réduite, se pose devant en bas à gauche. */
.fid-stage { position: relative; width: 100%; max-width: 420px; margin-bottom: 26px; }
.fid-stage::before { content: ""; position: absolute; inset: 6% 4% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(241, 217, 138, .45) 0%, rgba(241, 217, 138, .12) 45%, transparent 70%); }
.fid-trone { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .35)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.fidelite-side:hover .fid-trone { transform: translateY(-6px); }
.fid-stage .vip-member-card { --vmc-scale: .48; position: absolute; left: 2%; bottom: -8%; width: 380px; max-width: none; transform-origin: 0 100%; }
@media (min-width: 900px) { .fid-stage .vip-member-card { --vmc-scale: .56; left: -6%; } }

/* Carte de membre VIP, façon carte bancaire dorée, légèrement inclinée. */
.vip-member-card {
	position: relative; overflow: hidden; width: 100%; max-width: 380px; aspect-ratio: 1.586;
	display: flex; flex-direction: column; justify-content: space-between; padding: 22px;
	border-radius: 24px; color: #3B2A06;
	background: linear-gradient(135deg, #FBEFC6 0%, #E6C66E 38%, #C99A3A 70%, #A87A22 100%);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
	transform: perspective(900px) rotateX(8deg) rotateY(-12deg) rotateZ(2deg) scale(var(--vmc-scale, 1));
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.fidelite-side:hover .vip-member-card { transform: perspective(900px) rotateX(0) rotateY(0) rotateZ(0) translateY(-4px) scale(var(--vmc-scale, 1)); }
.vmc-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%); transform: translateX(-100%); transition: transform .9s ease; pointer-events: none; }
.fidelite-side:hover .vmc-shine { transform: translateX(100%); }
.vmc-paw { position: absolute; right: -20px; bottom: -34px; fill: rgba(255, 255, 255, .28); transform: rotate(-20deg); }
.vmc-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.vmc-brand { font-size: 17px; font-weight: 900; letter-spacing: .02em; }
.vmc-crown { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.vmc-chip { position: relative; width: 46px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #F7E3A1, #C9A24A); box-shadow: inset 0 0 0 1px rgba(59, 42, 6, .25); }
.vmc-chip::after { content: ""; position: absolute; inset: 8px 10px; border: 1px solid rgba(59, 42, 6, .3); border-radius: 4px; }
.vmc-title { position: relative; font-size: 26px; font-weight: 900; letter-spacing: .18em; }
.vmc-tags { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.vmc-tags span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 800; }
.fidelite-price {
	width: 100%; max-width: 380px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 14px 14px 18px; border-radius: 22px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
.fidelite-price small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #D6EFC9; }
.fidelite-price strong { font-size: 30px; line-height: 1.1; font-weight: 900; color: #fff; }
.fidelite-price .per-year { font-size: 14px; font-weight: 700; color: #D6EFC9; }
.fidelite .button { background: #F1D98A; color: #2A1E04; min-height: 50px; }
.fidelite .button:hover { background: #fff; color: #2A1E04; }
.fidelite-note { max-width: 380px; margin: 0; font-size: 12px; line-height: 1.45; text-align: center; color: rgba(236, 252, 228, .6); }
@media (prefers-reduced-motion: reduce) {
	.vip-member-card, .vmc-shine { transition: none; }
}

/* Pastilles d'avantages dans la bannière VIP. */
.vip-perks { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; padding: 0; list-style: none; }
/* Badges vert foncé presque opaques (sans flou) : le texte reste lisible sur l'image du trône. */
.vip-perks li {
	display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800;
	background: rgba(38, 66, 22, .8); border: 1px solid rgba(255, 255, 255, .22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(0, 0, 0, .12);
}

/* ---------- Panier : panneau latéral + page panier (assets/js/cart.js) ---------- */
.drawer {
	width: min(420px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0;
	border: none; border-radius: 28px 0 0 28px; background: var(--bg); color: var(--ink);
	display: none; flex-direction: column; overflow: hidden;
}
.drawer[open] { display: flex; animation: drawer-in .3s cubic-bezier(.2, .8, .2, 1); }
.drawer::backdrop { background: rgba(30, 41, 59, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px 22px; border-bottom: 1px solid #E6E9E0; }
.drawer-head strong { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 900; }
.drawer-head strong .icon { color: var(--green); }
.drawer-head [data-drawer-count] { font-weight: 700; color: var(--muted); }
.drawer-items { flex: 1; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding: 14px 16px; } /* le défilement reste dans le panier */
.drawer, .drawer-body { overscroll-behavior: contain; }
html:has(dialog.drawer[open]) { overflow: hidden; } /* panier ouvert : la page derrière ne défile plus */
.drawer-empty { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.drawer-empty strong { font-size: 18px; font-weight: 900; }
.drawer-empty p { margin: 0 0 6px; color: var(--muted); }
.drawer-empty-icon { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; border-radius: 30px; background: var(--green-soft); color: var(--green); }
/* Après un ajout : notification en haut du panier + contour vert qui pulse autour de l'article ajouté. */
.cart-toast {
	position: absolute; z-index: 5; top: 72px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; margin: 0;
	padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .8);
	background: rgba(236, 252, 228, .92);
	box-shadow: 0 12px 28px rgba(47, 87, 25, .18); color: var(--green-dark); font-size: 14px; font-weight: 800;
	animation: toast-in .35s cubic-bezier(.2, .8, .2, 1.2);
}
.cart-toast[hidden] { display: none; }
.cart-toast .icon { color: var(--green); flex-shrink: 0; }
@keyframes toast-in { from { opacity: 0; translate: 0 -10px; scale: .96; } }
/* Notifications après un ajout au panier ou à la liste d'envies (footer.php, window.pcSheet) ; ordinateur : en haut à droite. */
.added-sheet {
	position: fixed; z-index: 45; left: 12px; right: 12px; top: 12px; display: grid; gap: 12px; padding: 14px; overflow: hidden;
	border-radius: 24px; background: #fff; border: 1px solid #E6EFE0; box-shadow: 0 20px 50px rgba(30, 41, 59, .22);
}
.added-sheet[hidden] { display: none; }
.added-sheet.is-in { animation: added-in .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes added-in { from { opacity: 0; translate: 0 -16px; scale: .96; } }
.added-sheet-top { display: flex; align-items: center; gap: 12px; }
.added-sheet-img { width: 56px; height: 56px; flex-shrink: 0; overflow: hidden; border-radius: 14px; background: var(--green-soft); }
.added-sheet-img img { width: 100%; height: 100%; object-fit: cover; }
.added-sheet-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.added-sheet-text strong { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; color: var(--green-dark); }
.added-sheet-text strong .icon { color: var(--green); }
.added-sheet-text span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.35; color: var(--muted); }
.added-sheet-close { width: 36px; height: 36px; flex-shrink: 0; align-self: flex-start; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #F3F5EF; color: var(--ink); cursor: pointer; }
.added-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.added-sheet-actions .button { min-height: 46px; padding: 0 10px; font-size: 13.5px; white-space: nowrap; }
.added-sheet-actions .button-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
/* Fine barre qui se vide en 6 s : la notification se ferme seule. */
.added-sheet-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--green); transform-origin: 0 50%; }
.added-sheet.is-in .added-sheet-timer { animation: added-timer 6s linear both; }
@keyframes added-timer { to { transform: scaleX(0); } }
/* Bouton panier de l'en-tête : il bondit et sa pastille grossit. */
.icon-btn.is-bump { animation: cart-bump .7s cubic-bezier(.3, 1.6, .5, 1); }
.icon-btn.is-bump .badge { animation: badge-pop .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cart-bump { 0% { transform: none; } 25% { transform: translateY(-6px) rotate(-10deg) scale(1.12); } 50% { transform: translateY(0) rotate(8deg) scale(1.05); } 75% { transform: rotate(-4deg); } 100% { transform: none; } }
@keyframes badge-pop { 0%, 100% { transform: none; } 40% { transform: scale(1.6); background: #F07A12; } }
@media (prefers-reduced-motion: reduce) {
	.added-sheet.is-in, .icon-btn.is-bump, .icon-btn.is-bump .badge { animation: none; }
}
/* Liste d'envies : cœur rouge. Ordinateur : petite carte en haut à droite, sous l'en-tête. */
.added-sheet.is-wish .added-sheet-text strong .icon { color: var(--heart); }
@media (min-width: 900px) { .added-sheet { left: auto; right: max(24px, calc((100vw - 1200px) / 2)); width: 380px; } }
.cart-item.is-added { animation: cart-added 3s ease-out; }
@keyframes cart-added {
	0% { box-shadow: 0 0 0 0 rgba(65, 115, 37, 0); }
	10%, 70% { box-shadow: 0 0 0 3px var(--green), 0 10px 26px rgba(65, 115, 37, .22); }
	40% { box-shadow: 0 0 0 5px rgba(65, 115, 37, .45), 0 10px 26px rgba(65, 115, 37, .22); }
	100% { box-shadow: 0 0 0 0 rgba(65, 115, 37, 0); }
}
.drawer.is-empty .drawer-items, .drawer.is-empty .drawer-foot { display: none; }
.drawer.is-empty .drawer-empty { display: flex; }
.drawer-foot { padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #E6E9E0; box-shadow: 0 -10px 30px rgba(30, 41, 59, .05); }
.drawer-subtotal { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; font-weight: 700; }
.drawer-subtotal strong { font-size: 22px; font-weight: 900; }
.drawer-note { margin: 4px 0 14px; font-size: 12px; color: var(--muted); }
.drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer-actions .button { min-height: 50px; }
.drawer-actions .button-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.drawer-actions .button-light:hover { background: var(--green-soft); color: var(--green-dark); }
.drawer-continue { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: -4px 0 10px; padding: 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--green-dark); cursor: pointer; }
.drawer-continue:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.drawer-continue:hover .icon { transform: translateX(-3px); }
.drawer-continue .icon { transition: transform .2s; }
.cart-error { margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: #9B1C1C; font-size: 13px; font-weight: 700; }
.cart-busy .cart-items { opacity: .6; pointer-events: none; transition: opacity .2s; }

/* Livraison gratuite dès X € : message + barre de progression. */
.free-ship { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 18px; background: var(--green-soft); }
.free-ship-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #fff; color: var(--green); }
.free-ship > div { flex: 1; min-width: 0; }
/* Le camion de livraison roule (petit élan + secousse), pour donner envie d'atteindre la livraison gratuite. */
@media (prefers-reduced-motion: no-preference) {
	.free-ship-icon .fs-truck { animation: truck-roll 2.4s ease-in-out infinite; }
	.free-ship.is-done .fs-gift { animation: gift-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
}
/* Livraison offerte : le cadeau remplace le camion. */
.free-ship-icon { position: relative; }
.free-ship-icon .fs-gift, .free-ship.is-done .fs-truck { display: none; }
.free-ship.is-done .fs-gift { display: block; }
@keyframes gift-pop { 0% { scale: .3; rotate: -20deg; } 60% { scale: 1.2; rotate: 8deg; } 100% { scale: 1; rotate: 0deg; } }
/* Confettis lancés depuis la barre quand la livraison devient offerte (assets/js/cart.js). */
.free-ship { position: relative; }
.confetti { position: absolute; left: 32px; top: 30px; width: 0; height: 0; pointer-events: none; z-index: 3; }
.confetti i { position: absolute; left: 0; top: 0; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: confetti 1.6s cubic-bezier(.15, .7, .35, 1) var(--d) forwards; }
.confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
@keyframes confetti {
	0% { opacity: 1; translate: 0 0; rotate: 0deg; }
	55% { opacity: 1; translate: var(--x) var(--y); }
	100% { opacity: 0; translate: calc(var(--x) * 1.15) calc(var(--y) + 90px); rotate: var(--r); }
}
@keyframes truck-roll {
	0%, 55%, 100% { translate: 0 0; rotate: 0deg; }
	15% { translate: 5px 0; rotate: -4deg; }
	25% { translate: 5px -2px; rotate: 0deg; }
	35% { translate: 5px 0; rotate: 2deg; }
	45% { translate: -2px 0; rotate: 0deg; }
}
.free-ship p { margin: 0 0 7px; font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.free-ship p strong { color: var(--green-dark); font-weight: 900; }
.free-ship-bar { height: 8px; border-radius: 99px; background: rgba(65, 115, 37, .15); overflow: hidden; }
.free-ship-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8CC56A, var(--green)); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.free-ship.is-done { background: linear-gradient(135deg, #E3F7D6, #CFEFB9); }
.free-ship.is-done .free-ship-icon { background: var(--green); color: #fff; }
.cart-summary .free-ship { margin-bottom: 10px; }

/* Frais des extensions (ex. réduction VIP) dans le panier. */
.sum-fees:empty, .drawer-fees:empty { display: none; }
.fee-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.fee-line dt { color: var(--muted); font-weight: 600; }
.fee-line dd { margin: 0; font-weight: 800; }
.fee-line.is-discount dd { color: var(--green); }
.drawer-fees { margin-top: 2px; }
.drawer-fees .fee-line { padding: 2px 0; font-size: 13px; }

/* Ligne d'article (commune au panneau et à la page). */
.cart-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cart-item {
	position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start;
	padding: 12px 44px 12px 12px; border-radius: 20px; background: #fff; border: 1px solid #EDEFE8;
	transition: opacity .25s, transform .25s;
}
.cart-item.is-removing { opacity: 0; transform: translateX(20px); }
/* Panier latéral : un peu plus d'air autour et dans chaque produit. */
.drawer-items { padding: 16px 20px; }
/* Le contenu du panier et les suggestions défilent ensemble. */
.drawer-body { flex: 1; overflow-y: auto; }
.drawer .drawer-items { flex: none; overflow: visible; }
.drawer.is-empty .drawer-body { display: none; }
/* Suggestions « Complétez votre panier ». */
.upsells { padding: 4px 20px 20px; }
.upsells-title { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 16px; font-weight: 900; }
.upsells-title .icon { color: var(--green); }
.upsell-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.upsell { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid #EDEFE8; }
.upsell-img { width: 58px; height: 58px; flex-shrink: 0; overflow: hidden; border-radius: 12px; background: var(--green-soft); }
.upsell-img img { width: 100%; height: 100%; object-fit: cover; }
.upsell-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.upsell-name { font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upsell-price { font-size: 14px; font-weight: 900; color: var(--ink); }
.upsell-add { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--green); color: #fff; transition: background .2s, transform .2s; }
.upsell-add:hover { background: var(--green-dark); color: #fff; transform: scale(1.06); }
.upsell-add.is-choose { background: var(--green-soft); color: var(--green-dark); }
.upsells--page { margin-top: 28px; padding: 0; }
.upsells--page .upsells-title { font-size: 19px; }
@media (min-width: 700px) { .upsells--page .upsell-list { grid-template-columns: 1fr 1fr; } }
/* « Voir plus » : dernière ligne des suggestions, vers le rayon le plus présent dans le panier (inc/upsells.php). */
.upsell-more { padding: 0; background: var(--green-soft); border-color: #D6EFC9; grid-column: 1 / -1; }
.upsell-more a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; color: var(--green-dark); }
.upsell-more-icon { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; color: var(--green); }
.upsell-more strong { font-size: 15px; font-weight: 900; }
.upsell-more small { font-size: 13px; font-weight: 700; color: var(--muted, #64748B); }
.upsell-more .upsell-add.is-choose { background: #fff; }
.upsell-more a:hover .upsell-add { transform: translateX(3px); }
.drawer .cart-item { padding: 16px 48px 16px 16px; }
.drawer .cart-item-remove { top: 10px; right: 10px; }
.cart-item-img { display: block; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--green-soft); }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-item-name { font-size: 14px; line-height: 1.3; font-weight: 800; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-item-var, .cart-item-unit { font-size: 12px; color: var(--muted); }
.cart-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cart-item-total { font-size: 16px; font-weight: 900; }
.cart-item-remove { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.cart-item-remove:hover { background: #FDECEC; color: #B42318; }
.qty-sm { padding: 3px; border-radius: 13px; }
.qty-sm button { width: 32px; height: 32px; border-radius: 10px; font-size: 17px; }
.qty-sm input { width: 30px; font-size: 14px; }

/* Page panier. */
.cart-page { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cart-page-head { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 18px; }
.cart-page-head .back-link { display: inline-flex; align-items: center; gap: 4px; }
.cart-page-head h1 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.cart-page-head [data-page-count] { font-size: 16px; font-weight: 700; color: var(--muted); }
.cart-page .cart-error { margin: 0 0 14px; }
.cart-page-empty { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; border-radius: 28px; background: #fff; text-align: center; }
.cart-page-empty h2 { margin: 6px 0 0; font-size: 22px; font-weight: 900; }
.cart-page-empty p { margin: 0 0 8px; color: var(--muted); }
.cart-page.is-empty .cart-page-empty { display: flex; }
.cart-page.is-empty .cart-page-grid, .cart-page.is-empty [data-page-count] { display: none; }
.cart-page-grid { display: grid; gap: 18px; }
.cart-skeleton { height: 102px; border-radius: 20px; background: linear-gradient(90deg, #EEF1E8 0%, #F7F8F4 50%, #EEF1E8 100%); background-size: 200% 100%; animation: skeleton 1.2s linear infinite; }
@keyframes skeleton { to { background-position: -200% 0; } }
.coupon-form { margin-top: 14px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid #EDEFE8; }
.coupon-form label { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 14px; font-weight: 800; }
.coupon-form label .icon { color: var(--green); }
.coupon-form > div { display: flex; gap: 8px; }
.coupon-form input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); font-size: 15px; font-weight: 700; text-transform: uppercase; outline: none; }
.coupon-form input:focus { border-color: var(--green); background: #fff; }
.coupon-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.coupon-list:empty { display: none; }
.coupon-list li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 13px; font-weight: 800; }
.coupon-list li span { display: inline-flex; align-items: center; gap: 6px; }
.coupon-list button { padding: 4px 10px; border: none; border-radius: 999px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.cart-summary { align-self: start; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid #EDEFE8; box-shadow: 0 14px 40px rgba(30, 41, 59, .06); }
.cart-summary h2 { margin: 0 0 12px; font-size: 18px; font-weight: 900; }
.cart-summary dl { margin: 0; }
.cart-summary dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.cart-summary dt { color: var(--muted); font-weight: 600; }
.cart-summary dd { margin: 0; font-weight: 800; text-align: right; }
.sum-discount dd { color: var(--green); }
.sum-total { margin-top: 6px; padding-top: 14px !important; border-top: 1px dashed #D9DED2; }
.sum-total dt { color: var(--ink); font-size: 16px; font-weight: 900; }
.sum-total dd { font-size: 24px; font-weight: 900; }
.cart-checkout { width: 100%; min-height: 54px; margin-top: 14px; font-size: 16px; }
.cart-reassurance { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.cart-reassurance li { display: flex; align-items: center; gap: 8px; }
.cart-reassurance .icon { color: var(--green); }
.cart-page.is-loading .cart-summary { opacity: .6; }
/* Barre fixe du panier (téléphone) : même capsule de verre clair que le menu du bas, qu'elle remplace sur cette page. */
.cart-bar { display: none; }
@media (max-width: 899px) {
	.woocommerce-cart .tabbar { display: none; }
	.cart-page { padding-bottom: 104px; }
	.cart-bar {
		position: fixed; z-index: 30; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom));
		display: flex; align-items: center; gap: 12px; height: 64px; padding: 5px 5px 5px 22px; border-radius: 999px; /* mêmes mesures que le menu du bas */
		border: 1px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .9);
		box-shadow: 0 14px 34px rgba(30, 41, 59, .18), 0 2px 6px rgba(30, 41, 59, .06), inset 0 1px 0 rgba(255, 255, 255, .95);
	}
	.cart-page.is-empty .cart-bar { display: none; }
	.cart-page.is-loading .cart-bar-total strong { opacity: .5; }
	.cart-bar-total { display: flex; flex-direction: column; line-height: 1.15; }
	.cart-bar-total span { font-size: 12px; font-weight: 700; color: var(--muted); }
	.cart-bar-total strong { font-size: 20px; font-weight: 900; color: var(--ink); white-space: nowrap; }
	/* Bouton en verre vert : translucide, reflet clair en haut, fin liseré, sans ombre qui déborde. */
	.cart-bar .cart-bar-cta { /* sélecteur renforcé : l'arrondi générique des boutons ne doit pas l'emporter */
		flex: 1; align-self: stretch; height: auto; min-height: 0; padding: 0 14px; border-radius: 999px; font-size: 15px;
		border: 1px solid rgba(255, 255, 255, .35);
		background: linear-gradient(180deg, rgba(79, 138, 45, .9), rgba(47, 87, 25, .9));
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .12);
	}
	.cart-bar .cart-bar-cta:hover { color: #fff; background: linear-gradient(180deg, rgba(79, 138, 45, 1), rgba(47, 87, 25, 1)); }
}

/* ---------- Page de commande (formulaire WooCommerce habillé) ---------- */
.woocommerce-checkout .tabbar { display: none; }
.woocommerce-checkout .site-footer { padding-bottom: 28px; }
.checkout-page { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.co-steps { display: flex; gap: 6px; margin: 6px 0 18px; padding: 0; list-style: none; counter-reset: none; }
.co-steps li { flex: 1; display: flex; }
.co-steps li > a, .co-steps li { align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.co-steps li > a { display: flex; color: inherit; }
.co-steps li::after { content: ""; flex: 1; height: 2px; margin-left: 4px; border-radius: 2px; background: #DDE2D5; }
.co-steps li:last-child { flex: 0 0 auto; }
.co-steps li:last-child::after { display: none; }
.co-step-dot { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #E6E9E0; color: var(--muted); font-size: 12px; font-weight: 900; }
.co-steps .is-done { color: var(--green); }
.co-steps .is-done .co-step-dot { background: var(--green); color: #fff; }
.co-steps .is-done::after { background: var(--green); }
.co-steps .is-current { color: var(--ink); }
.co-steps .is-current .co-step-dot { background: var(--ink); color: #fff; box-shadow: 0 0 0 4px rgba(30, 41, 59, .1); }
.co-step-label { white-space: nowrap; }
.checkout-title { margin: 0 0 14px; font-size: 28px; font-weight: 900; letter-spacing: -.02em; }

.co-grid { display: flex; flex-direction: column; gap: 16px; }
.co-main { display: flex; flex-direction: column; gap: 16px; }
.co-card { padding: 20px 18px; border-radius: 26px; background: #fff; border: 1px solid #EDEFE8; box-shadow: 0 10px 30px rgba(30, 41, 59, .04); }
.co-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 19px; font-weight: 900; }
.co-num { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--green); color: #fff; font-size: 14px; font-weight: 900; }
.co-card h3 { display: none; } /* titres WooCommerce remplacés par ceux des cartes */
.co-card #ship-to-different-address { display: block; margin: 18px 0 0; font-size: 15px; }

/* Champs de formulaire. */
.pc-checkout .form-row, .woocommerce-form-login .form-row, .checkout_coupon .form-row { margin: 0 0 14px; padding: 0; }
.pc-checkout .woocommerce-billing-fields__field-wrapper, .pc-checkout .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.pc-checkout .form-row { grid-column: 1 / -1; }
.pc-checkout .form-row-first { grid-column: 1; }
.pc-checkout .form-row-last { grid-column: 2; }
.pc-checkout label, .woocommerce-form-login label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--ink); }
.pc-checkout .required { color: var(--heart); text-decoration: none; border: none; }
.pc-checkout .optional { font-weight: 600; color: var(--muted); }
.pc-checkout input.input-text, .pc-checkout select, .pc-checkout textarea, .woocommerce-form-login input.input-text, .checkout_coupon input.input-text {
	width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line);
	background: var(--bg); color: var(--ink); font-size: 16px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
}
.pc-checkout select { appearance: none; padding-right: 38px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E293B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.pc-checkout textarea { min-height: 96px; resize: vertical; }
.pc-checkout input.input-text:focus, .pc-checkout select:focus, .pc-checkout textarea:focus, .checkout_coupon input.input-text:focus, .woocommerce-form-login input.input-text:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(65, 115, 37, .12); }
.pc-checkout .woocommerce-invalid input.input-text, .pc-checkout .woocommerce-invalid select { border-color: #E0624F; background: #FFF6F4; }
.pc-checkout .woocommerce-validated input.input-text { border-color: #B9DDA3; }
.pc-checkout .description { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.pc-checkout input[type="checkbox"], .pc-checkout input[type="radio"] { accent-color: var(--green); width: 18px; height: 18px; }
.pc-checkout .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.pc-checkout .create-account { margin-top: 4px; }
.pc-checkout .woocommerce-account-fields { padding-top: 6px; border-top: 1px solid #EEF1E8; }

/* Modes de livraison : cartes à choisir. */
.ship-methods ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ship-option { position: relative; }
.ship-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ship-option label {
	display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px; border-radius: 18px; cursor: pointer;
	border: 1.5px solid var(--line); background: var(--bg); transition: border-color .2s, background .2s, box-shadow .2s;
}
.ship-option input:checked + label, .ship-option input[type="hidden"] + label { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(65, 115, 37, .1); }
.ship-option input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.ship-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #fff; color: var(--green); border: 1px solid #EDEFE8; }
.ship-option input:checked + label .ship-icon { background: var(--green); color: #fff; border-color: var(--green); }
.ship-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ship-text strong { font-size: 14px; line-height: 1.3; font-weight: 800; }
.ship-text small { font-size: 12px; color: var(--muted); }
.ship-price { font-size: 15px; font-weight: 900; white-space: nowrap; }
.ship-empty { margin: 0 0 4px; padding: 14px; border-radius: 16px; background: var(--bg); font-size: 14px; color: var(--muted); }
.pc-shipping-options { margin-bottom: 4px; }

/* Paiement. */
.pc-checkout #payment ul.payment_methods { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.pc-checkout .wc_payment_method > input { position: absolute; opacity: 0; pointer-events: none; }
.pc-checkout .wc_payment_method > label {
	display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px; border-radius: 18px; cursor: pointer; font-size: 15px;
	border: 1.5px solid var(--line); background: var(--bg);
}
.pc-checkout .wc_payment_method > input:checked + label { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(65, 115, 37, .1); }
.pay-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--green-soft); color: var(--green); }
.pay-title { flex: 1; font-weight: 800; }
.pay-logos img { max-height: 24px; width: auto; display: inline-block; margin-left: 4px; }
.pc-checkout .payment_box { margin: 8px 4px 0; padding: 12px 14px; border-radius: 14px; background: var(--bg); font-size: 13px; line-height: 1.5; color: var(--muted); }
.pc-checkout .payment_box p { margin: 0; }
.pc-checkout .place-order { margin: 0; }
.pc-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 13px; line-height: 1.5; color: var(--muted); }
.pc-checkout .woocommerce-privacy-policy-text p { margin: 0 0 12px; }
.pc-checkout .woocommerce-terms-and-conditions-checkbox-text { font-weight: 700; color: var(--ink); }
.pc-checkout #place_order { width: 100%; min-height: 58px; margin-top: 14px; border-radius: 18px; font-size: 17px; box-shadow: 0 12px 28px rgba(65, 115, 37, .3); }
.pc-checkout .blockUI.blockOverlay { border-radius: 26px; background: rgba(255, 255, 255, .6) !important; }

/* Récapitulatif (à droite sur ordinateur, repliable en haut sur mobile). */
.co-side { display: flex; flex-direction: column; gap: 12px; }
.co-summary { border-radius: 24px; background: #fff; border: 1px solid #EDEFE8; box-shadow: 0 10px 30px rgba(30, 41, 59, .05); overflow: hidden; }
.co-summary > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 900; }
.co-summary > summary::-webkit-details-marker { display: none; }
.co-summary > summary span { display: inline-flex; align-items: center; gap: 8px; }
.co-summary > summary span .icon { color: var(--green); }
.co-summary > summary::after { content: ""; width: 8px; height: 8px; margin-left: 8px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.co-summary[open] > summary::after { transform: rotate(-135deg); }
.co-summary > summary strong { margin-left: auto; font-size: 17px; }
.co-side-title { display: none; }
.co-summary #order_review { padding: 0 18px 18px; }
.co-items { display: grid; gap: 12px; margin: 0 0 14px; padding: 0 0 14px; list-style: none; border-bottom: 1px dashed #D9DED2; }
.co-items li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; }
.co-item-img { position: relative; width: 56px; height: 56px; border-radius: 14px; background: var(--green-soft); }
.co-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.co-item-qty { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border-radius: 11px; border: 2px solid #fff; background: var(--ink); color: #fff; font-size: 11px; font-weight: 900; }
.co-item-name { font-size: 13px; line-height: 1.35; font-weight: 700; }
.co-item-name .variation { display: block; margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.co-item-name .variation dt, .co-item-name .variation dd, .co-item-name .variation p { display: inline; margin: 0; }
.co-item-total { font-size: 14px; font-weight: 900; }
.co-totals { margin: 0; }
.co-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.co-totals dt { color: var(--muted); font-weight: 600; }
.co-totals dd { margin: 0; font-weight: 800; text-align: right; }
.co-totals .cart-discount dd, .co-free { color: var(--green); }
.co-totals .woocommerce-remove-coupon { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.co-ship-name { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.co-totals .order-total { margin-top: 8px; padding-top: 14px; border-top: 1px dashed #D9DED2; }
.co-totals .order-total dt { color: var(--ink); font-size: 16px; font-weight: 900; }
.co-totals .order-total dd { font-size: 24px; font-weight: 900; }
.co-totals .order-total small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.co-reassurance { padding: 14px 18px; border-radius: 20px; background: rgba(255, 255, 255, .6); }

/* Messages, code promo et connexion (au-dessus du formulaire). */
.checkout-page .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { margin: 0 0 12px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px dashed var(--green); color: var(--ink); font-weight: 700; }
.woocommerce-form-coupon-toggle a, .woocommerce-form-login-toggle a { font-weight: 900; text-decoration: underline; }
.checkout_coupon, .woocommerce-form-login { margin: 0 0 16px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid #EDEFE8; }
.checkout_coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.checkout_coupon p:not(.form-row) { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
.checkout_coupon .form-row-first { flex: 1; margin: 0; }
.checkout_coupon .form-row-last { margin: 0; }
.checkout_coupon .clear { display: none; }
/* Téléphone : code promo (caisse et panier) — champ en pleine largeur en haut, bouton « Appliquer » en dessous. */
@media (max-width: 599px) {
	.checkout_coupon { flex-direction: column; align-items: stretch; }
	.checkout_coupon .form-row-first, .checkout_coupon .form-row-last { width: 100%; float: none; }
	.checkout_coupon .form-row-last .button, .checkout_coupon button { width: 100%; min-height: 48px; }
	.coupon-form > div { flex-direction: column; }
	.coupon-form > div input { flex: none; width: 100%; height: 48px; }
	.checkout_coupon .form-row-first input { width: 100%; height: 48px; }
	.coupon-form > div .button, .coupon-form > div button { width: 100%; min-height: 48px; }
}
.woocommerce-NoticeGroup-checkout { margin-bottom: 14px; }
.woocommerce-error li { margin: 2px 0; }
ul.woocommerce-error { padding-left: 16px; }

/* Étape de connexion (caisse). */
.checkout-page.is-auth .pc-checkout, .checkout-page.is-auth .woocommerce-form-coupon-toggle, .checkout-page.is-auth .checkout_coupon { display: none !important; }
.co-auth { display: grid; gap: 14px; margin-bottom: 18px; }
.co-auth-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 20px; border-radius: 26px; background: #fff; border: 1px solid #EDEFE8; box-shadow: 0 10px 30px rgba(30, 41, 59, .05); }
.co-auth-card h2 { margin: 4px 0 0; font-size: 21px; font-weight: 900; }
.co-auth-card > p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.co-auth-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--green-soft); color: var(--green); }
.co-auth-guest { background: linear-gradient(150deg, #F2FBEC, #FFF7EE); }
.co-auth-guest .button { width: 100%; min-height: 54px; margin-top: auto; font-size: 16px; }
.co-auth .woocommerce-form-login { width: 100%; margin: 0; padding: 0; border: none; background: none; }
.co-auth .woocommerce-form-login .form-row { margin: 0 0 12px; }
.co-auth .woocommerce-form-login label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; }
.co-auth .woocommerce-form-login input.input-text { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); font-size: 16px; outline: none; }
.co-auth .woocommerce-form-login input.input-text:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(65, 115, 37, .12); }
.co-auth .woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.co-auth .woocommerce-form-login input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); }
.co-auth .woocommerce-form-login .button { width: 100%; min-height: 52px; }
/* Bouton « afficher le mot de passe » de WooCommerce : un œil dans le champ. */
.password-input { position: relative; display: block; }
.password-input input.input-text { padding-right: 48px !important; }
.show-password-input {
	position: absolute; top: 50%; right: 10px; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: none; border-radius: 10px; cursor: pointer;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center no-repeat;
}
.show-password-input.display-password { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23417325' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 5.1A10 10 0 0 1 12 5c6.4 0 10 7 10 7a17 17 0 0 1-3.2 4M6.6 6.6A17 17 0 0 0 2 12s3.6 7 10 7a9.8 9.8 0 0 0 5.4-1.6'/%3E%3C/svg%3E"); }
.show-password-input:hover { background-color: var(--green-soft); }
.co-auth .woocommerce-form-login .lost_password { margin: 12px 0 0; font-size: 13px; text-align: center; }
.co-auth .woocommerce-form-login .lost_password a { font-weight: 800; text-decoration: underline; }
.co-auth .woocommerce-form-login .clear { display: none; }
.co-auth-back { margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px dashed var(--line); font-size: 14px; font-weight: 700; }
.co-auth-back button { padding: 0; border: none; background: none; color: var(--green); font-weight: 900; text-decoration: underline; cursor: pointer; }

/* Commande reçue (remerciement). */
.woocommerce-order { max-width: 760px; margin: 0 auto; }
.woocommerce-thankyou-order-received { margin: 0 0 16px; padding: 22px; border-radius: 24px; background: linear-gradient(135deg, #E3F7D6, #CFEFB9); font-size: 20px; font-weight: 900; color: var(--green-dark); text-align: center; }
.woocommerce-order-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.woocommerce-order-overview li { padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #EDEFE8; font-size: 12px; color: var(--muted); }
.woocommerce-order-overview li strong { display: block; margin-top: 2px; font-size: 15px; color: var(--ink); }
.woocommerce-order-details, .woocommerce-customer-details { margin-top: 16px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid #EDEFE8; }
.woocommerce-order-details table, .woocommerce-customer-details table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-order-details th, .woocommerce-order-details td { padding: 8px 0; text-align: left; border-bottom: 1px solid #EEF1E8; }
.woocommerce-order-details td:last-child, .woocommerce-order-details tfoot td { text-align: right; }
.woocommerce-order-details h2, .woocommerce-customer-details h2 { margin: 0 0 10px; font-size: 18px; font-weight: 900; }
.woocommerce-customer-details address { font-style: normal; line-height: 1.6; }

/* ---------- Mon compte ---------- */
.account-page { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.account-title { margin: 6px 0 18px; font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
/* Connexion / inscription : mascotte à l'os sur un disque vert clair, titre dessous, centrés. */
.account-hero { position: relative; display: flex; flex-direction: column; align-items: center; margin: 4px 0 6px; text-align: center; }
.account-hero::before { content: ""; position: absolute; top: 18px; left: 50%; width: 150px; height: 150px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0%, var(--green-soft) 55%, #D2EDBF 100%); }
.account-mascotte { position: relative; width: 150px; height: auto; margin: 0 0 -4px; filter: drop-shadow(0 12px 14px rgba(47, 87, 25, .2)); }
.account-hero .account-title { position: relative; margin-top: 4px; }
@media (min-width: 900px) {
	.account-hero::before { width: 180px; height: 180px; }
	.account-mascotte { width: 180px; }
}
.acc-login { display: grid; gap: 14px; }
.acc-login .co-auth-card { gap: 8px; }
.acc-login .woocommerce-form { width: 100%; margin: 0; padding: 0; border: none; background: none; }
.acc-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.acc-hint .icon { color: var(--green); }
.acc-login .woocommerce-privacy-policy-text p { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.acc-login .button { width: 100%; min-height: 52px; }

/* Champs (connexion, inscription, adresses, informations) : même style que la caisse. */
.account-page .form-row { margin: 0 0 14px; padding: 0; }
.account-page label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; }
.account-page .required { color: var(--heart); text-decoration: none; border: none; }
.account-page input.input-text, .account-page select, .account-page textarea {
	width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line);
	background: var(--bg); color: var(--ink); font-size: 16px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
}
.account-page select { appearance: none; padding-right: 38px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E293B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.account-page input.input-text:focus, .account-page select:focus, .account-page textarea:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(65, 115, 37, .12); }
.account-page input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); }
.account-page .woocommerce-form__label-for-checkbox, .account-page .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.account-page .lost_password { margin: 12px 0 0; font-size: 13px; text-align: center; }
.account-page .lost_password a { font-weight: 800; text-decoration: underline; }
.account-page .woocommerce-address-fields__field-wrapper, .account-page .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.account-page .form-row-wide, .account-page .woocommerce-address-fields__field-wrapper .form-row, .account-page .woocommerce-EditAccountForm > *:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
.account-page .form-row-first { grid-column: 1; }
.account-page .form-row-last { grid-column: 2; }
.account-page fieldset { grid-column: 1 / -1; margin: 8px 0 14px; padding: 16px; border: 1px dashed var(--line); border-radius: 18px; }
.account-page legend { padding: 0 6px; font-size: 14px; font-weight: 900; }
.account-page em { display: block; margin-top: 5px; font-size: 12px; font-style: normal; color: var(--muted); }
.account-page .woocommerce-address-fields > p:last-child .button, .account-page .woocommerce-EditAccountForm .button { min-height: 52px; padding: 0 24px; }
.account-page .clear { display: none; }

/* Client connecté : en-tête, menu, contenu. */
.acc-hero { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; padding: 18px; border-radius: 26px; background: linear-gradient(150deg, #F2FBEC, #FFF7EE); border: 1px solid #fff; }
.acc-hero.is-vip { background: radial-gradient(circle at 90% 0%, rgba(217, 180, 90, .3), transparent 50%), linear-gradient(160deg, #24461A, #16300B); color: #fff; }
.acc-avatar { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--green); color: #fff; font-size: 20px; font-weight: 900; }
.acc-hero.is-vip .acc-avatar { background: linear-gradient(135deg, #FBEFC6, #C99A3A); color: #3B2A06; }
.acc-hello { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acc-hello h1 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 900; }
.acc-hello span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.acc-hero.is-vip .acc-hello span { color: #D6EFC9; }
.acc-vip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 16px; background: rgba(241, 217, 138, .18); border: 1px solid rgba(241, 217, 138, .45); color: #F1D98A; }
.acc-vip:hover { color: #fff; }
.acc-vip span { display: flex; flex-direction: column; line-height: 1.2; }
.acc-vip strong { font-size: 13px; font-weight: 900; }
.acc-vip small { font-size: 11px; color: #D6EFC9; }
/* Téléphone : bloc « Bonjour » aéré sur deux lignes (initiales + nom, puis badge VIP en bandeau pleine largeur). */
@media (max-width: 899px) {
	.acc-hero { flex-wrap: wrap; gap: 14px 16px; padding: 22px 20px; }
	.acc-avatar { width: 60px; height: 60px; border-radius: 20px; font-size: 22px; }
	.acc-hello { gap: 4px; }
	.acc-hello h1 { font-size: 24px; }
	.acc-hello span { white-space: normal; overflow-wrap: anywhere; }
	.acc-vip { flex: 1 0 100%; gap: 12px; padding: 12px 14px; border-radius: 18px; }
	.acc-vip > .icon { width: 36px; height: 36px; padding: 8px; flex-shrink: 0; border-radius: 50%; background: rgba(241, 217, 138, .22); }
	.acc-vip span { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
	.acc-vip strong { font-size: 15px; }
	.acc-vip small { font-size: 12.5px; }
}
.acc-grid { display: grid; gap: 16px; }
.acc-nav { margin: 0 -20px; overflow-x: auto; }
.acc-nav ul { display: flex; gap: 8px; width: max-content; margin: 0; padding: 0 20px 4px; list-style: none; }
.acc-nav a { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 800; white-space: nowrap; }
.acc-nav a .icon { color: var(--green); }
.acc-nav a[aria-current="page"] { background: var(--green); border-color: var(--green); color: #fff; }
.acc-nav a[aria-current="page"] .icon { color: #fff; }
.acc-nav .woocommerce-MyAccount-navigation-link--customer-logout a .icon { color: var(--heart); }
.acc-nav .woocommerce-MyAccount-navigation-link--vip-status a .icon { color: #C99A3A; }
/* Mascotte gourmande en bas à droite de l'espace client, dans le flux : ne recouvre jamais le contenu. */
.acc-pet { position: relative; width: 130px; margin: 16px 0 -24px auto; pointer-events: none; }
.mascotte.acc-mascotte { display: block; width: 100%; height: auto; margin: 0; filter: drop-shadow(0 12px 14px rgba(47, 87, 25, .18)); } /* sélecteur renforcé : la règle générale .mascotte (centrée) venait après */
@media (min-width: 900px) {
	.acc-pet { width: 170px; margin-top: 18px; }
}
/* Petits cœurs qui sortent de sa tête, montent en s'écartant puis disparaissent : une seule fois, 2,5 s après l'ouverture. */
.acc-heart { position: absolute; left: 50%; top: 22%; margin: -9px 0 0 -9px; color: var(--heart); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.acc-heart { animation: acc-heart 1.8s cubic-bezier(.2, .7, .3, 1) var(--d) both; }
}
@keyframes acc-heart {
	0% { opacity: 0; translate: 0 0; scale: .3; }
	20% { opacity: 1; scale: 1.1; }
	70% { opacity: 1; }
	100% { opacity: 0; translate: var(--x) var(--y); scale: .8; rotate: calc(var(--x) / 3 * 1deg); }
}
/* Mon compte > Mon statut VIP (woocommerce/myaccount/vip-status.php) : carte dorée, durée restante, avantages. */
.vips-hero {
	position: relative; overflow: hidden; display: grid; gap: 22px; justify-items: center; margin-bottom: 16px; padding: 24px 18px 22px;
	border-radius: 28px; color: #fff; text-align: center;
	background: radial-gradient(circle at 85% 0%, rgba(217, 180, 90, .32), transparent 55%), linear-gradient(160deg, #2C5520, #16300E);
}
.vip-member-card.vips-card { max-width: 320px; transform: rotate(-3deg); }
.vips-hero:hover .vips-card { transform: rotate(0) translateY(-3px); }
.vips-hero:hover .vmc-shine { transform: translateX(100%); }
.vips-card .vmc-title { font-size: 22px; }
.vips-card-owner { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.vips-card-owner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.vips-card-owner small { font-size: 11px; font-weight: 800; }
.vips-intro { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.vips-intro h2 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 900; color: #fff; }
.vips-intro p { margin: 0; font-size: 14px; line-height: 1.55; color: #D6EFC9; }
.vips-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, #FFE08A, #F1C24B); color: #5A3E00; font-size: 12px; font-weight: 900; }
.vips-time { width: 100%; max-width: 420px; display: grid; gap: 10px; margin-top: 4px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.vips-dates { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #D6EFC9; text-align: left; }
.vips-dates span:last-child { text-align: right; }
.vips-dates strong { display: block; font-size: 13px; color: #fff; }
.vips-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.vips-bar span { display: block; height: 100%; min-width: 10px; border-radius: inherit; background: linear-gradient(90deg, #F7E3A1, #E6C66E); }
.vips-left { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 900; color: #F7E3A1; }
.vips-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 6px; }
.vips-offer > strong { font-size: 30px; font-weight: 900; color: #fff; }
.vips-offer > strong small { font-size: 14px; color: #D6EFC9; }
.vips-offer .button { background: linear-gradient(135deg, #FFE08A, #F1C24B); color: #3B2A06; }
.vips-offer .button:hover { background: #FFE08A; color: #3B2A06; }
.vips-renew { display: flex; align-items: flex-start; gap: 14px; background: #FFF8E6; border-color: #F6E3B0; }
.vips-renew div { display: flex; flex-direction: column; gap: 4px; }
.vips-renew strong { font-size: 15px; font-weight: 900; }
.vips-renew div span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.vips-renew-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #FBF1D2; color: #C8961A; }
.vips-head { align-items: center; margin-top: 6px; }
.vips-head span { font-size: 13px; font-weight: 800; color: var(--muted); }
.vips-perks { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.vips-perks li { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #EDEFE8; box-shadow: 0 8px 22px rgba(30, 41, 59, .05); }
.vips-perks li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vips-perks strong { font-size: 15px; font-weight: 900; }
.vips-perks li > div span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.vips-perk-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient(135deg, #FBF1D2, #F4DE9C); color: #9A6B00; }
.vips-perk-on { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 900; }
.vips-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.vips-actions .button { min-height: 50px; }
.vips-cgv { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.vips-cgv:hover { color: var(--green); }
@media (min-width: 900px) {
	.vips-hero { grid-template-columns: 300px 1fr; justify-items: start; gap: 34px; padding: 30px 34px; text-align: left; }
	.vips-intro { align-items: flex-start; }
	.vips-intro h2 { font-size: 28px; }
	.vips-offer { justify-content: flex-start; }
	.vips-perks { grid-template-columns: 1fr 1fr; }
	.vips-perks li { align-items: flex-start; }
	.vips-perks li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* nombre impair : le dernier prend toute la ligne */
}
.acc-content { min-width: 0; }
.acc-content > h2, .acc-title { margin: 0 0 14px; font-size: 22px; font-weight: 900; }
.acc-content > p { font-size: 15px; line-height: 1.6; }
.acc-card { margin-bottom: 14px; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid #EDEFE8; box-shadow: 0 10px 30px rgba(30, 41, 59, .04); }
.acc-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.acc-card-head h2 { margin: 0; font-size: 17px; font-weight: 900; }
.acc-card-head a { display: inline-flex; align-items: center; font-size: 13px; font-weight: 800; }
/* « Mes données personnelles » (sous « Mes informations », inc/rgpd.php) : deux lignes, icône / texte / bouton. */
.rgpd { margin-top: 22px; }
.rgpd-intro { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.rgpd-intro a { font-weight: 800; }
.rgpd-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #EDEFE8; }
.rgpd-row > div { display: flex; flex-direction: column; gap: 3px; }
.rgpd-row strong { font-size: 15px; font-weight: 900; }
.rgpd-row span:not(.rgpd-icon) { font-size: 13px; line-height: 1.5; color: var(--muted); }
.rgpd-row .button { grid-column: 2; justify-self: start; min-height: 42px; padding: 0 18px; font-size: 14px; }
.rgpd-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--green-soft); color: var(--green); }
.rgpd-row--danger .rgpd-icon { background: #FDECEC; color: #C2272D; }
.rgpd .button-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.rgpd .rgpd-delete { background: #C2272D; }
.rgpd .rgpd-delete:hover { background: #9B1C1C; }
.rgpd .rgpd-delete:disabled { background: #D0D5DD; cursor: not-allowed; }
.rgpd-check { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.rgpd-check input { width: 18px; height: 18px; accent-color: #C2272D; }
@media (min-width: 700px) {
	.rgpd-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
	.rgpd-row .button { grid-column: 3; }
}
.acc-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.acc-empty h2 { margin: 0 0 2px; font-size: 17px; font-weight: 900; }
.acc-empty p { margin: 0; font-size: 14px; color: var(--muted); }
.acc-empty > div { flex: 1; min-width: 180px; }
.acc-order { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.acc-order-thumbs { display: flex; flex-shrink: 0; }
.acc-order-thumbs img { width: 46px; height: 46px; object-fit: cover; border-radius: 13px; border: 2px solid #fff; background: var(--green-soft); box-shadow: 0 4px 10px rgba(30, 41, 59, .1); }
.acc-order-thumbs img + img { margin-left: -16px; }
.acc-order-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-order-info strong { font-size: 15px; font-weight: 900; }
.acc-order-info small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.order-status { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; background: #EEF1E8; color: var(--muted); font-size: 11px; font-weight: 800; }
.order-status.status-processing { background: #E4F1F6; color: #2E7A96; }
.order-status.status-completed { background: var(--green-soft); color: var(--green-dark); }
.order-status.status-on-hold, .order-status.status-pending { background: #FFF1DC; color: #9A5B12; }
.order-status.status-cancelled, .order-status.status-failed, .order-status.status-refunded { background: #FDECEC; color: #9B1C1C; }
/* Détail d'une commande : en-tête, suivi en étapes (icônes reliées par un trait), messages avec la boutique. */
.ord-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ord-head .acc-title { margin: 0; }
.ord-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.ord-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 18px; padding: 18px 8px; list-style: none; border-radius: 24px; background: #fff; border: 1px solid #EDEFE8; }
.ord-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px; text-align: center; }
.ord-step + .ord-step::before { content: ""; position: absolute; top: 23px; right: calc(50% + 30px); left: calc(-50% + 30px); height: 3px; border-radius: 3px; background: #E4E8DD; }
.ord-step.is-done + .ord-step::before, .ord-step.is-done + .ord-step.is-current::before { background: var(--green); }
.ord-step-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; border-radius: 16px; background: #F1F3EC; color: #A3AD9A; }
.ord-step.is-done .ord-step-icon { background: var(--green); color: #fff; }
.ord-step.is-current .ord-step-icon { background: var(--green-soft); color: var(--green-dark); box-shadow: 0 0 0 3px var(--green); }
.ord-step strong { font-size: 13px; font-weight: 900; color: var(--ink); }
.ord-step.is-todo strong { color: #A3AD9A; }
.ord-step small { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.ord-step.is-todo small { visibility: hidden; }
.ord-stopped { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: 20px; background: #FDECEC; color: #9B1C1C; }
.ord-stopped span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #7A2A2A; }
.ord-stopped strong { font-size: 15px; font-weight: 900; color: #9B1C1C; }
.ord-chat { margin-top: 18px; }
.ord-chat .acc-card-head h2 { display: flex; align-items: center; gap: 8px; }
.ord-chat .acc-card-head .icon { color: var(--green); }
.ord-thread { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.ord-msg { max-width: 85%; align-self: flex-start; }
.ord-msg.is-mine { align-self: flex-end; text-align: right; }
.ord-msg-who { display: block; margin: 0 6px 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ord-msg-text { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #F1F3EC; font-size: 14px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.ord-msg.is-mine .ord-msg-text { border-radius: 18px 18px 6px 18px; background: var(--green); color: #fff; }
.ord-msg-text p { margin: 0; }
.ord-msg-text p + p { margin-top: 6px; }
.ord-chat-empty { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.account-page .woocommerce-MyAccount-content .ord-chat-form { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* pas le cadre des autres formulaires du compte */
.ord-chat-form textarea { flex: 1; min-height: 52px; padding: 12px 14px; border-radius: 16px; border: 1px solid #E1E5DA; background: #FAFBF7; font: inherit; font-size: 14px; resize: vertical; }
.ord-chat-form textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.ord-chat-form .button { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 52px; }
@media (max-width: 480px) { .ord-chat-form .button { padding: 0 14px; } }
.acc-orders { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acc-order-card { padding: 14px; border-radius: 22px; background: #fff; border: 1px solid #EDEFE8; }
.acc-order-card:hover { border-color: #CFE4C1; }
.acc-order-extra { margin-top: 8px; font-size: 13px; }
.acc-order-extra > span { color: var(--muted); font-weight: 700; }
.acc-order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #E3E7DC; }
.acc-order-actions .button { min-height: 38px; padding: 0 14px; font-size: 13px; }
.acc-order-actions .button.view { background: var(--green-soft); color: var(--green-dark); }
.acc-pagination { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.acc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.acc-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 22px; background: #fff; border: 1px solid #EDEFE8; color: var(--ink); transition: transform .2s, border-color .2s; }
.acc-tile:hover { transform: translateY(-2px); border-color: #CFE4C1; color: var(--ink); }
.acc-tile strong { font-size: 15px; font-weight: 900; }
.acc-tile small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.acc-tile-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--green-soft); color: var(--green); }
.acc-tile--vip { background: linear-gradient(150deg, #24461A, #16300B); border-color: transparent; color: #fff; }
.acc-tile--vip:hover { color: #fff; }
.acc-tile--vip small { color: #D6EFC9; }
.acc-tile--vip .acc-tile-icon { background: rgba(241, 217, 138, .2); color: #F1D98A; }
/* Adresses. */
.account-page .woocommerce-Addresses { display: grid; gap: 12px; }
.account-page .woocommerce-Address { padding: 18px; border-radius: 22px; background: #fff; border: 1px solid #EDEFE8; }
.account-page .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.account-page .woocommerce-Address-title h2, .account-page .woocommerce-Address-title h3 { margin: 0; font-size: 16px; font-weight: 900; }
.account-page .woocommerce-Address-title .edit { padding: 6px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 13px; font-weight: 800; }
.account-page .woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 1.6; color: #3F4A3A; }
.account-page .woocommerce-MyAccount-content > p:first-child { margin-top: 0; color: var(--muted); font-size: 14px; }
.account-page .woocommerce-MyAccount-content form { padding: 18px; border-radius: 24px; background: #fff; border: 1px solid #EDEFE8; }
/* Détail d'une commande (réutilise le style « commande reçue »). */
.account-page .woocommerce-order-details, .account-page .woocommerce-customer-details { margin-top: 14px; }
.account-page mark { padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-weight: 800; }

/* ---------- Conseils (liste d'articles) ---------- */
.blog-page { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.blog-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 4px; text-align: center; } /* titre et texte au milieu */
.blog-head h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.blog-head p { position: relative; z-index: 2; max-width: 680px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); } /* devant les oreilles de la mascotte */
.blog-search { width: 100%; max-width: none; margin-top: 6px; } /* recherche sur toute la largeur */
.blog-search .search-field { min-height: 54px; }
/* Mascotte (momie en papier toilette), pattes posées sur le bord haut de la barre de recherche :
   au milieu sur téléphone, à gauche de la description sur ordinateur. */
.blog-search { position: relative; margin-top: 118px; }
.blog-search .search-field { position: relative; z-index: 1; }
.blog-mascotte { position: absolute; left: 50%; bottom: calc(100% - 2px); width: 130px; height: auto; margin: 0; transform: translateX(-50%); transform-origin: 50% 100%; filter: drop-shadow(0 8px 10px rgba(30, 41, 59, .15)); pointer-events: none; }
.blog-chips { justify-content: safe center; }
.blog-chips { margin: 0 -20px; padding: 14px 20px 6px; }
.blog-grid { display: grid; gap: 16px; margin-top: 10px; }
.blog-grid .post-card { flex: none; }
.blog-page .pagination { margin: 26px 0 0; }

/* ---------- Article ---------- */
.read-progress { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: linear-gradient(90deg, #8CC56A, var(--green)); transform: scaleX(0); transform-origin: 0 50%; }
.article { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.article-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 4px 0 18px; }
.article-head .back-link { display: inline-flex; align-items: center; gap: 4px; }
.article-head h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 900; letter-spacing: -.02em; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13px; color: var(--muted); }
.article-author { display: inline-flex; align-items: center; gap: 6px; }
.article-author .icon { color: var(--green); }
.article-author strong { color: var(--ink); }
.article-cover { margin: 0 0 26px; }
.article-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; background: var(--green-soft); }

/* Contenu rédigé (mise en forme seulement) : titres, listes, tableaux, cartes produit de la charte… */
.article-content { font-size: 17px; line-height: 1.75; color: #2E3A2A; overflow-wrap: break-word; }
.article-content > * { max-width: 100%; }
.article-content p { margin: 0 0 18px; }
.article-content h2 { margin: 44px 0 14px; font-size: 25px; line-height: 1.25; font-weight: 900; letter-spacing: -.01em; color: var(--ink); scroll-margin-top: calc(110px + var(--topbar-h)); }
.article-content h3 { margin: 30px 0 10px; font-size: 19px; line-height: 1.35; font-weight: 800; color: var(--ink); scroll-margin-top: calc(110px + var(--topbar-h)); }
.article-content [id] { scroll-margin-top: calc(110px + var(--topbar-h)); }
.article-content h4 { margin: 22px 0 8px; font-size: 17px; font-weight: 800; color: var(--ink); }
.article-content a { color: var(--green); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(65, 115, 37, .35); text-underline-offset: 3px; }
.article-content a:hover { text-decoration-color: var(--green); }
.article-content strong { color: var(--ink); }
.article-content ul, .article-content ol { margin: 0 0 18px; padding-left: 22px; }
.article-content li { margin: 6px 0; }
.article-content ul li::marker { color: var(--green); }
.article-content ol li::marker { color: var(--green); font-weight: 900; }
/* Listes composées uniquement de liens (table des matières, « Recommandation », « Articles à découvrir ») : encadré. */
.article-content h2 + ul:has(> li > a:only-child) { padding: 16px 18px 16px 38px; border-radius: 20px; background: #fff; border: 1px solid #EDEFE8; }
.article-content blockquote { margin: 22px 0; padding: 16px 20px; border-radius: 18px; border-left: 4px solid var(--green); background: var(--green-soft); }
.article-content blockquote p:last-child { margin-bottom: 0; }
/* Tableaux (« Résumé rapide » : À retenir / Détail) : défilement horizontal sur petit écran. */
.article-content .wp-block-table { margin: 22px 0; overflow-x: auto; }
.article-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 18px; border: 1px solid #E3E7DC; border-radius: 18px; overflow: hidden; font-size: 15px; line-height: 1.5; background: #fff; }
.article-content .wp-block-table table { margin: 0; }
.article-content th { padding: 12px 14px; background: var(--green); color: #fff; font-weight: 800; text-align: left; }
.article-content td { padding: 12px 14px; border-top: 1px solid #EEF1E8; vertical-align: top; }
.article-content tr:nth-child(even) td { background: #FAFBF7; }
.article-content td:first-child { font-weight: 700; color: var(--green-dark); }
.article-content figure { margin: 22px 0; }
.article-content img { height: auto; border-radius: 16px; }
.article-content figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
/* Anciens articles construits avec Elementor (listes à icônes, bouton) : mise en forme minimale sans Elementor. */
.article-content .elementor-icon-list-items { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.article-content .elementor-icon-list-item { display: flex; align-items: flex-start; gap: 10px; }
.article-content .elementor-icon-list-icon { flex-shrink: 0; display: flex; padding-top: 4px; color: var(--green); }
.article-content .elementor-icon-list-icon svg { width: 18px; height: 18px; fill: currentColor; }
.article-content .elementor-icon-list-icon i:empty { display: none; }
.article-content .elementor-button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 800; text-decoration: none; }
.article-content .elementor-button br, .article-content .elementor-button-icon { display: none; } /* <br> ajoutés par wpautop, police d’icônes absente */

/* Vignette produit 180 px (format A de la charte) et alignements WordPress. */
.article-content .alignright { float: right; margin: 4px 0 14px 18px; }
.article-content .alignleft { float: left; margin: 4px 18px 14px 0; }
.article-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.article-content .alignright figcaption, .article-content .alignleft figcaption { text-align: left; }
.article-content h2, .article-content h3, .article-content table, .article-content .pc-product-card { clear: both; }
/* Carte produit (format B de la charte) : ses styles intégrés sont conservés, on ne corrige que les liens. */
.article-content .pc-product-card a { font-weight: inherit; text-decoration: none; }
.article-content .pc-product-card img { border-radius: 8px; }
.article-content hr { margin: 32px 0; border: none; border-top: 1px dashed #D9DED2; }

.article-foot { display: grid; gap: 14px; margin: 36px 0 0; padding-top: 22px; border-top: 1px solid #E6E9E0; }
.article-signature { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 20px; background: linear-gradient(150deg, #F2FBEC, #FFF7EE); }
.article-signature .info-icon { background: #fff; }
.article-signature div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; color: #3F4A3A; }
.article-signature strong { font-size: 15px; font-weight: 900; color: var(--ink); }
.article-share { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.article-share > span { margin-right: auto; }
.article-share .icon-btn { border-radius: 14px; background: #fff; cursor: pointer; color: var(--ink); }
.article-share .icon-btn:hover { color: var(--green); }
.article-share [data-copy].copied { background: var(--green); color: #fff; }
.article-related { margin-top: 40px; }

/* ---------- Boutique ---------- */
.shop-head { max-width: 1200px; margin: 0 auto; padding: 4px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.shop-head h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.shop-title { display: flex; align-items: center; gap: 14px; }
/* Page catégorie : « Retour » à gauche et titre centré sur la même ligne, recherche pleine largeur. */
.shop-head--cat { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: 8px; }
.shop-head--cat .shop-back { grid-column: 1; grid-row: 1; justify-self: start; }
.shop-head--cat .shop-title { display: contents; }
.shop-head--cat h1 { grid-column: 2; grid-row: 1; text-align: center; font-size: 22px; }
.shop-head--cat .search-form { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; }
/* Boutique : titre et texte centrés, recherche pleine largeur, chips centrées (tant qu'elles tiennent sur la ligne). */
.shop-head--shop { align-items: center; text-align: center; }
.shop-head--shop .search-form { align-self: stretch; max-width: none; }
.chips--center { justify-content: safe center; }
/* Téléphone : le bouton retour devient une flèche ronde pour laisser l'avatar au centre (texte lu par les lecteurs d'écran). */
@media (max-width: 599px) {
	.shop-head--cat .shop-back { width: 44px; height: 44px; padding: 0; justify-content: center; }
	.shop-head--cat .shop-back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.shop-head p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.back-link { font-size: 13px; font-weight: 700; }
.shop-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--green-dark); font-size: 14px; font-weight: 800; box-shadow: 0 4px 12px rgba(30, 41, 59, .05); transition: background .2s, color .2s, transform .2s; }
.shop-back:hover { background: var(--green); border-color: var(--green); color: #fff; }
.shop-back:hover .icon { transform: translateX(-3px); }
.shop-back .icon { transition: transform .2s; }
.search-field { flex: 1; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.search-field:focus-within { border-color: var(--green); }
.search-form .search-field input[type="search"] { height: 100%; padding: 0; border: none; background: transparent; border-radius: 0; }
.chips { display: flex; gap: 8px; max-width: 1200px; margin: 0 auto; overflow-x: auto; padding: 16px 20px 4px; }
.chip { flex-shrink: 0; display: flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.chip:hover { color: var(--green); }
/* Rangée de chips : glisser à la souris et flèches (ordinateur), voir app.js. */
.chips-wrap { position: relative; width: 100%; min-width: 0; max-width: min(100%, 1200px); margin: 0 auto; } /* jamais plus large que son conteneur : la rangée défile dedans (sinon la page s’élargit sur mobile) */
.chips-arrow { display: none; }
@media (min-width: 900px) and (pointer: fine) {
	.chips { cursor: grab; }
	.chips.is-dragging { cursor: grabbing; }
	.chips.is-dragging .chip { pointer-events: none; }
	.chips-arrow {
		position: absolute; top: var(--arrow-y, 36px); z-index: 2; width: 38px; height: 38px; transform: translateY(-50%);
		align-items: center; justify-content: center; padding: 0; border-radius: 50%; cursor: pointer;
		border: 1px solid var(--line); background: #fff; color: var(--ink); box-shadow: 0 6px 16px rgba(30, 41, 59, .12);
		transition: background .2s, color .2s;
	}
	.chips-arrow:hover { background: var(--green); border-color: var(--green); color: #fff; }
	.chips-arrow--prev { left: 4px; }
	.chips-arrow--prev svg { transform: rotate(180deg); }
	.chips-arrow--next { right: 4px; }
	.chips-wrap.can-prev .chips-arrow--prev, .chips-wrap.can-next .chips-arrow--next { display: flex; }
	/* Fondu sous les flèches pour montrer qu'il y a d'autres chips. */
	.chips-wrap::before, .chips-wrap::after { content: ""; position: absolute; top: 12px; bottom: 0; z-index: 1; width: 70px; pointer-events: none; opacity: 0; transition: opacity .2s; }
	.chips-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg) 35%, transparent); }
	.chips-wrap::after { right: 0; background: linear-gradient(-90deg, var(--bg) 35%, transparent); }
	.chips-wrap.can-prev::before, .chips-wrap.can-next::after { opacity: 1; }
	.chips-wrap.is-stuck::before, .chips-wrap.is-stuck::after { display: none; } /* fixée : pas de fond, seulement les flèches */
	.chips-wrap.is-stuck:is(.can-prev, .can-next) .chips { max-width: calc(100% - 96px); } /* place pour les flèches, de chaque côté */
}
.chip:has(.chip-avatar) { gap: 8px; padding-left: 5px; }
/* Menu déroulant des sous-catégories d'un rayon (boutique, survol à la souris). Même liste que le panneau du menu du bas. */
.chip-drop { position: fixed; z-index: 45; width: 290px; max-height: 460px; overflow-y: auto; border-radius: 22px; box-shadow: 0 22px 50px rgba(30, 41, 59, .2); animation: drop-in .18s ease-out; }
.chip-drop[hidden] { display: none; }
.chip-drop .ss-list a { min-height: 44px; font-size: 14px; }
.chip-drop .ss-list-icon { width: 32px; height: 32px; }
.chip-drop .ss-list .chip-drop-all { color: var(--green-dark); }
.chip-drop-all small { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); font-size: 11px; font-weight: 800; }
.chip.is-dropped { border-color: var(--green); color: var(--green-dark); }
@keyframes drop-in { from { opacity: 0; translate: 0 -6px; } }
/* Boutique et catégories : chips fixées sous le menu en défilant, plus compactes une fois fixées. */
.chips-wrap.is-sticky { position: sticky; z-index: 15; top: calc(var(--topbar-h) + var(--head-gap) + var(--head-h, 64px) + 4px + var(--stick-offset, 0px)); }
.chips-mark { height: 0; }
/* Fixée : sans fond, les chips (blanches) flottent sous le menu ; à droite et à gauche, seulement les flèches. */
.chips-wrap.is-stuck .chips { width: fit-content; max-width: calc(100% - 24px); margin: 6px auto 0; padding: 4px; }
.chips-wrap.is-stuck .chip { box-shadow: 0 6px 16px -8px rgba(30, 41, 59, .35); } /* lisibles au-dessus du contenu */
.chips-wrap.is-stuck .chip { height: 32px; font-size: 13px; }
.chips-wrap.is-stuck .chip:has(.chip-avatar) { gap: 6px; padding-left: 3px; }
.chips-wrap.is-stuck .chip-avatar { width: 24px; height: 24px; }
.chips-wrap.is-stuck .chips-arrow { top: 50%; width: 32px; height: 32px; } /* centrées sur la pilule */
.chips-wrap.is-stuck::before, .chips-wrap.is-stuck::after { display: none; } /* pas de fondu rectangulaire autour de la pilule */
.chip-avatar { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chip.on .chip-avatar { box-shadow: 0 0 0 2px #fff; }
.chip.on .chip-avatar--icon { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.shop-vip { margin-top: 16px; }
/* En-tête de la liste : la mascotte à gauche, le titre au milieu (« Tous les produits », puis le nom de la catégorie à
   la ligne, puis le nombre), le tri à droite. Trois colonnes : rien ne se chevauche, un nom long passe à la ligne. */
#produits { scroll-margin-top: 164px; } /* arrivée après un filtre : titre « Tous nos produits » juste sous le menu et les catégories fixés */
.block-head.list-head { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; text-align: left; } /* au-dessus des cartes (sous le menu et les catégories fixés) */
.list-head-text { grid-column: 2; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.list-head h2 { line-height: 1.2; overflow-wrap: anywhere; }
.mascotte.list-mascotte { grid-column: 1; width: 60px; height: 60px; object-fit: contain; object-position: 50% 100%; margin: 0; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(47, 87, 25, .15)); }
@media (min-width: 900px) { .mascotte.list-mascotte { width: 92px; height: 92px; } }
/* Boîte carrée + « contain » : un animal plus haut que large (hamster) est réduit, tous ont la même présence. */
.list-tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.list-head-cat { display: block; color: var(--green); font-size: .82em; } /* nom de la catégorie à la ligne, un peu plus petit */
/* Téléphone : le tri devient un bouton rond (icône), la liste native s'ouvre au toucher. */
@media (max-width: 599px) {
	.list-head .woocommerce-ordering {
		position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
		background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23417325' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M4 12h7M4 17h4M17 5v14m0 0-3-3m3 3 3-3'/%3E%3C/svg%3E") no-repeat center;
	}
	.list-head .woocommerce-ordering select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
}
.count { font-size: 12px; color: var(--muted); }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select {
	height: 38px; padding: 0 30px 0 12px; border-radius: 12px; border: 1px solid var(--line);
	background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E293B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
	appearance: none; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.pagination .page-numbers { min-width: 42px; height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.pagination .current { background: var(--green); border-color: var(--green); color: #fff; }
.pagination .dots { border: none; background: none; }
/* Défilement infini (boutique, catégories, recherche) : roue pendant le chargement, puis bouton « Voir plus ». */
.load-more { display: flex; justify-content: center; min-height: 60px; margin-top: 20px; }
.load-more .button { min-height: 50px; padding: 0 24px; }
.load-more-spin { display: none; width: 34px; height: 34px; margin-top: 8px; border-radius: 50%; border: 3px solid rgba(65, 115, 37, .18); border-top-color: var(--green); animation: load-spin .8s linear infinite; }
.load-more.is-loading .load-more-spin { display: block; }
@keyframes load-spin { to { rotate: 360deg; } }
.load-prev { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 14px; font-size: 14px; font-weight: 800; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; border-radius: var(--radius); background: var(--card); border: 1px dashed #C9D3BD; text-align: center; }
.empty-state span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--green-soft); color: var(--green-dark); font-size: 14px; font-weight: 600; }
.woocommerce-error { background: #FDECEC; color: #9B1C1C; }
.woocommerce-message .button { min-height: 34px; margin-left: 8px; font-size: 13px; }

/* ---------- Fiche produit (maquette) ---------- */
/* Ajout au panier en cours (fiche et « + » des cartes) : bouton atténué, pas de double clic. */
.is-adding { opacity: .6; pointer-events: none; transition: opacity .2s; }
/* Sur mobile, la fiche est plein écran comme dans la maquette : ni en-tête, ni onglets, une barre d'achat en bas. */
.single-product .site-header, .single-product .tabbar, .single-product .topbar { display: none; }
.single-product { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.pdp-media { position: relative; height: 400px; border-radius: 0 0 32px 32px; overflow: hidden; background: #fff; }
.pdp-gallery { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
.pdp-gallery img { flex: 0 0 100%; width: 100%; height: 100%; padding: 12%; object-fit: contain; background: #fff; scroll-snap-align: start; } /* photo entière, un peu plus petite : plus nette, sur fond blanc */
.pdp-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
/* Chiva, devant la photo, assis à cheval sur le bord bas (la tête sur la photo). Téléphone : à gauche ou à droite (au hasard),
   étiquettes et titre du produit décalés de ce côté pour ne pas être cachés. Ordinateur : en bas à gauche. */
.pdp-visual { position: relative; }
.pdp-chiva {
	position: absolute; z-index: 2; bottom: 0; width: 96px; height: 104px; object-fit: contain; object-position: 50% 100%; pointer-events: none;
	--cy: 58%; translate: 0 var(--cy); filter: drop-shadow(0 6px 10px rgba(47, 87, 25, .2)); /* même boîte pour tous : le hamster, plus haut, est réduit */
}
.chiva-left .pdp-chiva { left: 14px; }
.chiva-right .pdp-chiva { right: 14px; }
.chiva-left + .pdp-info .pdp-chips, .chiva-left + .pdp-info .pdp-also, .chiva-left + .pdp-info h1 { padding-left: 96px; }
.chiva-right + .pdp-info .pdp-chips, .chiva-right + .pdp-info .pdp-also, .chiva-right + .pdp-info h1 { padding-right: 96px; }
@media (prefers-reduced-motion: no-preference) {
	/* Entrée, puis respiration : l'animal gonfle très légèrement et se dégonfle, calé sur ses pattes (il est vivant). */
	.pdp-chiva { transform-origin: 50% 100%; animation: chiva-in .35s ease-out both, chiva-breathe 3.2s ease-in-out .35s infinite; }
}
/* Micro-entrée : il apparaît en montant de quelques pixels, puis ne bouge plus. */
/* Bulle de la mascotte : au-dessus de sa tête, avec une pointe vers elle (position calculée par product.js). */
.pdp-bubble {
	position: absolute; z-index: 3; max-width: min(250px, 72%); padding: 10px 14px 11px; border-radius: 18px;
	background: #fff; border: 1px solid #E6EFE0; box-shadow: 0 12px 30px rgba(30, 41, 59, .18);
	color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1.35; cursor: pointer; transform-origin: var(--tip, 30px) 100%;
}
.pdp-bubble.is-emoji { padding: 6px 14px; font-size: 28px; line-height: 1.2; letter-spacing: .05em; } /* bulle d'emojis seuls */
.pdp-bubble[hidden] { display: none; }
.pdp-bubble::after { /* pointe vers la tête de la mascotte (--tip : calculé par product.js) */
	content: ""; position: absolute; left: calc(var(--tip, 29px) - 7px); bottom: -7px; width: 14px; height: 14px; rotate: 45deg;
	background: #fff; border-right: 1px solid #E6EFE0; border-bottom: 1px solid #E6EFE0; border-bottom-right-radius: 3px;
}
/* Croix : petit rond posé sur le coin haut de la bulle, à l'extérieur (côté gauche quand la bulle est à droite de l'écran). */
.pdp-bubble-close { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; padding: 0; border: 1px solid #E6EFE0; border-radius: 50%; background: #F1F4EC; color: var(--muted); font: 700 16px/1 Nunito, sans-serif; cursor: pointer; box-shadow: 0 4px 10px rgba(30, 41, 59, .12); }
.pdp-bubble.is-right .pdp-bubble-close { right: auto; left: -10px; }
@media (prefers-reduced-motion: no-preference) {
	.pdp-bubble.is-in { animation: bubble-in .35s cubic-bezier(.3, 1.5, .5, 1); }
}
@keyframes bubble-in { from { opacity: 0; scale: .6; } }
@media (min-width: 900px) { .pdp-bubble { font-size: 15px; } }
@keyframes chiva-in { from { translate: 0 calc(var(--cy) + 8px); opacity: 0; } }
@keyframes chiva-breathe { 50% { scale: 1.015 1.035; } } /* un peu plus en hauteur qu'en largeur, comme une inspiration */
@media (min-width: 900px) {
	.pdp-visual { align-self: start; } /* hauteur de la photo, pas de toute la colonne : Chiva se cale sur le bas de la photo */
	.pdp-chiva, .chiva-left .pdp-chiva, .chiva-right .pdp-chiva { left: 22px; right: auto; width: 130px; height: 140px; --cy: 50%; }
	.chiva-left + .pdp-info .pdp-chips, .chiva-right + .pdp-info .pdp-chips, .chiva-left + .pdp-info .pdp-also, .chiva-right + .pdp-info .pdp-also, .chiva-left + .pdp-info h1, .chiva-right + .pdp-info h1 { padding: 0; }
}
.pdp-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .6); transition: width .2s; }
.pdp-dots span.on { width: 18px; border-radius: 4px; background: #fff; }
/* Téléphone : retour et cœur restent fixés en haut de l'écran pendant le défilement. */
.pdp-top { position: fixed; z-index: 29; top: calc(14px + env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; justify-content: space-between; pointer-events: none; }
.pdp-top .icon-btn { pointer-events: auto; border: 1px solid rgba(255, 255, 255, .8); cursor: pointer; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(30, 41, 59, .16); }
.pdp-info { display: flex; flex-direction: column; gap: 16px; padding: 22px 20px 0; }
.pdp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* « Convient aussi aux : » (produit de plusieurs rayons) : pastille ronde de l'animal + nom, lien vers son rayon. */
.pdp-also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.pdp-also-item { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--green-dark); font-weight: 800; }
.pdp-also-item[hidden] { display: none; }
.pdp-also-item:hover { border-color: var(--green); color: var(--green-dark); }
.pdp-also-img { width: 22px; height: 22px; overflow: hidden; border-radius: 50%; background: var(--green-soft); }
.pdp-also-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tag { padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--green-dark); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tag-main { background: var(--green-soft); border-color: var(--green-soft); }
.pdp-title h1 { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.pdp-title p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.pdp-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.pdp-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pdp-price { font-size: 28px; font-weight: 800; }
.pdp-price small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.qty { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.qty button { width: 44px; height: 44px; border: none; border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 20px; font-weight: 700; cursor: pointer; }
.qty button[data-qty="1"] { background: var(--green); color: #fff; }
.qty input { width: 32px; border: none; background: none; text-align: center; font-size: 16px; font-weight: 800; color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-format { margin: 0; padding: 0; border: none; }
.pdp-format legend, .pdp-desc h2 { margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 800; }
.fmt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fmt { position: relative; }
.fmt input { position: absolute; opacity: 0; pointer-events: none; }
.fmt span { display: flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 700; cursor: pointer; }
.fmt input:checked + span, .fmt-static span { background: var(--green); border-color: var(--green); color: #fff; }
.fmt-static span { cursor: default; }
.fmt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pdp-desc .entry-content { font-size: 14px; line-height: 1.55; color: #3F4A3A; }
.pdp-desc .entry-content p { margin: 0 0 8px; }
.pdp-desc details summary { font-size: 14px; font-weight: 700; color: var(--green); cursor: pointer; }
/* Garanties sous l'achat (façon Shopify) : 4 lignes avec icône. */
.pdp-trust { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .pdp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdp-trust li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid #EDEFE8; }
.pdp-trust-icon { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--green-soft); color: var(--green); }
.pdp-trust li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdp-trust strong { font-size: 13px; line-height: 1.25; font-weight: 800; color: var(--ink); }
.pdp-trust small { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.pdp-trust small a { color: var(--green-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.buybar {
	position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
	display: flex; align-items: center; gap: 14px;
	padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
	background: #fff; border-top: 1px solid #E9ECE3;
}
.buybar-total { display: flex; flex-direction: column; }
.buybar-total span { font-size: 12px; color: var(--muted); }
.buybar-total strong { font-size: 19px; font-weight: 800; white-space: nowrap; }
.buybar-cta { flex-grow: 1; height: 54px; border-radius: 16px; font-size: 16px; }
.buybar-cta:disabled { opacity: .55; cursor: default; }
/* Petite carte « Faites un don » (panier flottant, page panier) : mascotte super-héros qui dépasse, tons dorés. */
.don-card {
	position: relative; display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px;
	margin: 22px 0 6px; padding: 12px 14px 12px 4px; border-radius: 20px;
	background: linear-gradient(135deg, #FFF8E6, #FBE7B8); border: 1px solid #F6DFA6;
	box-shadow: 0 10px 24px -14px rgba(168, 121, 18, .45);
}
.don-card-img { width: 82px; max-width: none; height: auto; margin: -24px 0 -8px 4px; transform: rotate(-6deg); filter: drop-shadow(0 8px 10px rgba(120, 80, 10, .25)); }
.don-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.don-card-text strong { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; color: var(--ink); }
.don-card-text strong .icon { color: #E0624F; }
.don-card-text > span { font-size: 12.5px; line-height: 1.45; color: #5B4A26; }
.don-card-link {
	grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin: 2px 0 -4px 10px; padding: 9px 2px 3px; border-top: 1px dashed rgba(154, 107, 8, .28);
	font-size: 13px; font-weight: 800; color: #9A6B08;
}
.don-card-link:hover { color: #6E4C04; }
.don-card-link .icon { transition: transform .2s; }
.don-card-link:hover .icon { transform: translateX(3px); }
.don-card-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 12px; border: 0; border-radius: 999px; background: #fff; color: #9A6B08; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(168, 121, 18, .18); }
.don-card-btn:hover { background: #FFFDF6; }
.don-card-btn[hidden] { display: none; }
.don-card small { font-size: 11px; color: #7A6433; }
.drawer-body .don-card { margin: 18px 20px 16px; } /* aligné sur les articles du panier flottant */

/* Encart « Vente en vrac en boutique » (bas de la boutique et des catégories) : mascotte à gauche, texte à droite. */
.vrac-card {
	position: relative; display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 12px;
	margin-top: 44px; padding: 16px 18px 16px 0; border-radius: 26px;
	background: linear-gradient(120deg, var(--green-soft), #D8F0C8); box-shadow: 0 12px 30px -14px rgba(47, 87, 25, .3);
}
.vrac-card-img { width: 140px; max-width: none; height: auto; margin: -52px 0 -16px -4px; filter: drop-shadow(0 10px 12px rgba(47, 87, 25, .22)); }
.vrac-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.vrac-card-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vrac-card-text strong { font-size: 17px; line-height: 1.2; font-weight: 900; color: var(--ink); }
.vrac-card-text > span:not(.vrac-card-tag) { font-size: 13.5px; line-height: 1.5; color: #3F4A3A; }
.vrac-card-btn { min-height: 42px; margin-top: 6px; padding: 0 16px; font-size: 14px; }
/* Téléphone : texte à gauche, chien à droite. */
@media (max-width: 899px) {
	.vrac-card { grid-template-columns: 1fr 118px; padding: 16px 0 16px 18px; }
	.vrac-card-img { order: 2; width: 132px; margin: -52px -4px -16px -10px; }
}
@media (min-width: 900px) {
	.vrac-card { grid-template-columns: 200px 1fr; gap: 24px; margin-top: 64px; padding: 22px 36px 22px 0; }
	.vrac-card-img { width: 210px; margin: -70px 0 -22px 0; }
	.vrac-card-text strong { font-size: 22px; }
	.vrac-card-text > span:not(.vrac-card-tag) { font-size: 15px; }
}

/* ---------- Fiche de l'abonnement VIP (template-parts/vip-product.php) ---------- */
.vipx-hero { position: relative; display: flex; align-items: flex-end; min-height: 580px; overflow: hidden; border-radius: 0 0 32px 32px; background: #2A1A0E; color: #fff; isolation: isolate; }
.vipx-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.vipx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 18, 8, 0) 28%, rgba(28, 18, 8, .72) 58%, rgba(28, 18, 8, .94) 100%); }
.vipx-hero-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px 30px; text-align: center; }
.vipx-hero-body .pill { align-self: center; }
.vipx-hero h1 { margin: 6px 0 0; font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.vipx-sub { margin: 0; font-size: 15px; font-weight: 800; color: #F1D98A; }
.vipx-price { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; }
.vipx-price strong { font-size: 36px; line-height: 1; font-weight: 900; }
.vipx-price > span { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.vipx-price .amount, .vipx-price .amount *, .vipx-buybar .amount, .vipx-buybar .amount * { font-size: inherit; font-weight: inherit; color: inherit; } /* l'extension VIP réduit les prix */
.vipx-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 6px; }
.vipx-hero .vipx-cta { min-height: 52px; padding: 0 26px; background: #fff; color: var(--green-dark); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.vipx-hero .vipx-cta:hover { background: #FBF1D2; color: var(--green-dark); }
.vipx-cta .icon { color: #C8961A; }
.vipx-status { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 13px; font-weight: 800; color: #F1D98A; }
/* Fenêtre « Vous êtes déjà VIP » (abonnement encore valable). */
.vipx-dialog { width: min(92vw, 400px); margin: auto; padding: 28px 24px 24px; border: 0; border-radius: 28px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 30px 80px rgba(30, 41, 59, .3); }
.vipx-dialog::backdrop { background: rgba(30, 41, 59, .5); }
.vipx-dialog[open] { animation: sheet-up .25s ease; }
.vipx-dialog-icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 22px; background: #FBF1D2; color: #C8961A; }
.vipx-dialog h2 { margin: 14px 0 8px; font-size: 22px; font-weight: 900; }
.vipx-dialog p { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.vipx-dialog .button { width: 100%; min-height: 50px; }
.vipx-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: #fff; }
.vipx-more:hover { color: #F1D98A; }
.vipx-block { max-width: 1100px; margin: 40px auto 0; padding: 0 20px; scroll-margin-top: calc(100px + var(--topbar-h)); }
.vipx-block h2 { margin: 0 0 18px; font-size: 25px; line-height: 1.15; font-weight: 900; letter-spacing: -.02em; text-align: center; }
.vipx-benefits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vipx-benefits li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid #EFEBDD; box-shadow: 0 8px 22px rgba(30, 41, 59, .05); font-size: 14px; line-height: 1.4; font-weight: 700; }
.vipx-benefit-icon, .vipx-step-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #FBF1D2; color: #A87912; }
.vipx-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vipx-steps li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #EFEBDD; }
.vipx-step-num { position: absolute; top: 16px; right: 18px; font-size: 34px; line-height: 1; font-weight: 900; color: #F3E7C2; }
.vipx-steps strong { font-size: 17px; font-weight: 900; }
.vipx-steps p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.vipx-content { padding: 22px; border-radius: 24px; background: #fff; border: 1px solid #EFEBDD; font-size: 15px; line-height: 1.65; color: #3F4A3A; }
.vipx-content > :first-child { margin-top: 0; }
.vipx-content hr { display: none; }
.vipx-content h3 { margin: 22px 0 10px; font-size: 17px; font-weight: 900; color: var(--ink); }
.vipx-content ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vipx-content li { position: relative; padding-left: 30px; }
.vipx-content li p { margin: 0; }
/* Coche verte (icône en masque CSS) devant chaque caractéristique. */
.vipx-content li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Zm4-12.6a.75.75 0 0 0-1.1-1l-4.3 4.7-1.5-1.6a.75.75 0 1 0-1.1 1l2 2.2c.3.3.8.3 1.1 0l4.9-5.3Z'/%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'%3E%3Cpath fill-rule='evenodd' d='M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Zm4-12.6a.75.75 0 0 0-1.1-1l-4.3 4.7-1.5-1.6a.75.75 0 1 0-1.1 1l2 2.2c.3.3.8.3 1.1 0l4.9-5.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vipx-note { margin: 14px 4px 0; font-size: 12.5px; color: var(--muted); }
.vipx-cgv { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: var(--green-soft); color: var(--green-dark); font-size: 14px; font-weight: 800; }
.vipx-cgv .icon:last-child { margin-left: auto; }
@media (min-width: 640px) {
	.vipx-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.vipx-hero { max-width: 1200px; min-height: 620px; margin: 16px auto 0; border-radius: 32px; }
	.vipx-hero .pdp-top { position: absolute; }
	.vipx-hero-body { padding: 0 40px 44px; }
	.vipx-hero h1 { font-size: 46px; }
	.vipx-price strong { font-size: 44px; }
	.vipx-block { margin-top: 64px; padding: 0 32px; }
	.vipx-block h2 { font-size: 34px; margin-bottom: 26px; }
	.vipx-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
	.vipx-benefits li { flex-direction: column; align-items: flex-start; padding: 20px; }
	.vipx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.vipx-details { max-width: 860px; }
	.vipx-content { padding: 32px 36px; }
	.vipx-buybar { display: none; }
}
/* Fil d'Ariane de la fiche produit : ordinateur seulement (sur téléphone, le bouton retour suffit). */
.pdp-crumbs { display: none; }
@media (min-width: 900px) {
	.pdp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 1200px; margin: 18px auto 0; padding: 0 32px; font-size: 13px; font-weight: 600; color: var(--muted); }
	.pdp-crumbs a { color: var(--green-dark); }
	.pdp-crumbs a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
	.pdp-crumbs .crumb-sep { color: #A7AF9C; }
	.pdp-crumbs + .pdp { margin-top: 12px; }
}
/* Sous-catégories du rayon sur la fiche produit : ordinateur sous le menu (après le fil d'Ariane), téléphone sous le titre. */
.pdp-subnav[hidden] { display: none; }
.pdp-subnav .chip { height: 36px; padding: 0 14px; font-size: 13px; }
.pdp-subnav .chip-avatar { width: 26px; height: 26px; margin: 0 6px 0 -8px; }
.pdp-subnav--top { display: none; }
.pdp-subnav--info { margin: -4px -20px 0; padding: 0 20px 4px; }
@media (min-width: 900px) {
	.pdp-subnav--top:not([hidden]) { display: flex; padding: 12px 32px 2px; }
	.pdp-subnav--info { display: none; }
}
/* Onglets de la fiche produit. */
.pdp-more { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; font-size: 14px; font-weight: 800; }
.pdp-tabs { max-width: 1200px; margin: 28px auto 0; padding: 0 20px; scroll-margin-top: calc(100px + var(--topbar-h)); }
.pdp-tabs-nav { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px 14px; padding: 0 20px 4px; }
.pdp-tab { flex-shrink: 0; display: flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 800; white-space: nowrap; }
.pdp-tabs.is-js .pdp-tab.active { background: var(--green); border-color: var(--green); color: #fff; }
.pdp-panel { padding: 20px 18px; border-radius: 24px; background: #fff; border: 1px solid #EDEFE8; font-size: 15px; line-height: 1.65; color: #3F4A3A; }
.pdp-tabs:not(.is-js) .pdp-panel + .pdp-panel { margin-top: 14px; }
.pdp-panel > h2:first-child { margin: 0 0 12px; font-size: 18px; font-weight: 900; color: var(--ink); }
.pdp-tabs.is-js .pdp-panel > h2:first-child { display: none; } /* le nom de l'onglet suffit */
.pdp-panel img { display: block; width: auto; max-width: min(70%, 320px); height: auto; margin: 16px auto; border-radius: 18px; } /* images de la description : taille raisonnable, centrées */
.pdp-panel h3, .pdp-panel h4 { margin: 18px 0 8px; font-size: 16px; font-weight: 900; color: var(--ink); }
.pdp-panel ul, .pdp-panel ol { padding-left: 20px; }
/* Description : titres à taille raisonnable, pas de traits de séparation (un espace suffit). */
.pdp-panel h1, .pdp-panel h2 { margin: 22px 0 10px; font-size: 19px; line-height: 1.3; font-weight: 900; color: var(--ink); }
.pdp-panel > :first-child { margin-top: 0; }
.pdp-panel hr { height: 0; margin: 20px 0; border: 0; }
/* Onglets repliés : une petite flèche indique qu'ils s'ouvrent. */
.pdp-tabs.is-js .pdp-tab::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.pdp-tabs.is-js .pdp-tab.active::after { transform: translateY(2px) rotate(-135deg); }
.woocommerce-product-attributes { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-product-attributes th, .woocommerce-product-attributes td { padding: 12px 0; border-bottom: 1px solid #EEF1E8; text-align: left; vertical-align: top; }
.woocommerce-product-attributes th { width: 40%; font-weight: 800; color: var(--ink); }
.woocommerce-product-attributes td p { margin: 0; }
.woocommerce-product-attributes tr:last-child th, .woocommerce-product-attributes tr:last-child td { border-bottom: none; }

/* Étoiles des avis (moyenne sur fiche et cartes). */
.stars { position: relative; display: inline-flex; flex-shrink: 0; line-height: 0; }
.stars-empty, .stars-full { display: inline-flex; }
.stars-empty svg { fill: #DDE2D5; }
.stars-full { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
.stars-full svg { flex-shrink: 0; fill: #F2B632; }
.rating-summary { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.rating-num { font-weight: 900; color: var(--ink); }
a.rating-summary { margin-top: 8px; font-size: 14px; }
a.rating-summary .rating-count { text-decoration: underline; text-underline-offset: 2px; }
.pcard-body .rating-summary { margin-top: -4px; }
/* Onglet Avis : liste, note de chaque avis, formulaire. */
#reviews .woocommerce-Reviews-title, #reply-title { display: block; margin: 0 0 14px; font-size: 18px; font-weight: 900; color: var(--ink); }
#reviews .commentlist { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
#reviews .commentlist li { padding: 16px; border-radius: 18px; background: var(--bg); }
#reviews .comment_container { display: flex; gap: 12px; }
#reviews .comment_container img.avatar { width: 40px; height: 40px; border-radius: 50%; }
#reviews .comment-text { flex: 1; }
#reviews .comment-text .meta { margin: 4px 0 6px; font-size: 13px; color: var(--muted); }
#reviews .woocommerce-review__author { font-weight: 900; color: var(--ink); }
#reviews .woocommerce-review__verified { color: var(--green); font-style: normal; font-weight: 700; }
#reviews .description p { margin: 0; }
.star-rating { position: relative; width: 90px; height: 18px; overflow: hidden; font-size: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23DDE2D5' d='M12 2l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 16.9 6.1 20.1l1.3-6.6L2.5 8.9l6.6-.8z'/%3E%3C/svg%3E") repeat-x 0 0 / 18px 18px; }
.star-rating span { position: absolute; top: 0; left: 0; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23F2B632' d='M12 2l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 16.9 6.1 20.1l1.3-6.6L2.5 8.9l6.6-.8z'/%3E%3C/svg%3E") repeat-x 0 0 / 18px 18px; }
.woocommerce-noreviews, .woocommerce-verification-required { margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--bg); font-size: 14px; color: var(--muted); }
.woocommerce-verification-required { background: #F2FBEC; color: var(--green-dark); font-weight: 700; }
#review_form .comment-form-rating label, #review_form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--ink); }
#review_form textarea, #review_form input[type="text"], #review_form input[type="email"] { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); font-size: 16px; outline: none; }
#review_form textarea { min-height: 120px; }
#review_form textarea:focus, #review_form input:focus { border-color: var(--green); background: #fff; }
#review_form .submit { min-height: 50px; padding: 0 22px; border: none; border-radius: 14px; background: var(--green); color: #fff; font-weight: 800; cursor: pointer; }
.star-picker { display: flex; gap: 4px; margin: 2px 0 12px; }
.star-picker button { padding: 2px; border: none; background: none; cursor: pointer; line-height: 0; }
.star-picker svg { fill: #DDE2D5; transition: fill .15s, transform .15s; }
.star-picker button.on svg { fill: #F2B632; }
.star-picker button:hover svg { transform: scale(1.12); }

/* Produits lourds. */
.heavy-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 18px; background: #FFF6EA; border: 1px solid #F5DDB8; }
.heavy-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #fff; color: #B7701F; }
.heavy-notice div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; color: #6B4A1C; }
.heavy-notice strong { font-size: 14px; font-weight: 900; color: #8A4F0C; }
/* Fiche produit en rupture : encart qui guide vers la boutique (être prévenu du retour, venir en magasin). */
.oos-help { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 18px; padding: 16px; border-radius: 20px; background: var(--green-soft); border: 1px solid #D5EBC8; }
.oos-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #fff; color: var(--green-dark); }
.oos-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; line-height: 1.5; color: #3F4A3A; }
.oos-body strong { font-size: 15px; font-weight: 900; color: var(--ink); }
.oos-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.oos-actions .button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; font-size: 14px; }
.oos-actions .oos-visit { background: #fff; color: var(--green-dark); border: 1px solid #D5EBC8; }
.oos-body small { font-size: 12px; color: #66735F; }
.heavy-badge { display: inline-flex; align-items: center; height: 20px; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #FFF1DC; color: #9A5B12; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.cart-item-body > .heavy-badge { align-self: flex-start; margin: 2px 0 0; }
.heavy-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: #FFF6EA; color: #8A4F0C; font-size: 12px; font-weight: 700; }

/* « Vous aimerez aussi » : défilement continu en JS, donc sans aimantation des cartes. */
.pdp-related { margin-bottom: 20px; }
.pdp-related .rel-track { scroll-snap-type: none; }

/* ---------- Cartes (blog) ---------- */
.card { margin-bottom: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid #E9ECE3; overflow: hidden; }
.card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-title { margin: 0; padding: 14px 16px 16px; font-size: 16px; font-weight: 800; color: var(--ink); }
.entry-image { border-radius: var(--radius); margin-bottom: 16px; }
.entry-content { font-size: 16px; line-height: 1.65; }

/* ---------- WooCommerce : grille produits ---------- */
.woocommerce-products-header__title { margin: 8px 0 16px; font-size: 28px; font-weight: 800; }
ul.products {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
ul.products li.product {
	display: flex; flex-direction: column; position: relative;
	border-radius: var(--radius); background: var(--card); border: 1px solid #E9ECE3; overflow: hidden;
}
ul.products li.product a img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; background: var(--green-soft); }
ul.products li.product .woocommerce-loop-product__title { margin: 10px 12px 4px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--ink); }
ul.products li.product .price { display: block; margin: 0 12px 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
ul.products li.product .button { margin: auto 12px 12px; }
.onsale { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 8px; border-radius: 999px; background: #fff; color: var(--green-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }

/* ---------- Boutons ---------- */
.button, button.button, input.button, .wp-element-button, .single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 16px; border: none; border-radius: 14px;
	background: var(--green); color: #fff; font-weight: 800; cursor: pointer;
}
.button:hover { background: var(--green-dark); color: #fff; }

/* ---------- Pied de page ---------- */
.site-footer {
	position: relative; isolation: isolate; overflow: hidden;
	margin-top: 48px; border-radius: 32px 32px 0 0;
	/* Sur mobile, le bas du pied de page laisse la place à la barre d'onglets. */
	padding: 22px 20px calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom));
	background: linear-gradient(160deg, #2F5719 0%, #1C360D 100%);
	color: rgba(236, 252, 228, .78); font-size: 14px;
}
/* Empreintes décoratives derrière le contenu du pied de page. */
.footer-paws { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: #fff; opacity: .1; pointer-events: none; }
.single-product .site-footer { padding-bottom: 24px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.site-footer a { color: rgba(236, 252, 228, .78); }
.site-footer a:hover { color: #fff; }
.footer-cta {
	display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; /* téléphone : centré */
	padding: 20px; border-radius: 24px;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.footer-cta strong { display: block; color: #fff; font-size: 22px; font-weight: 900; }
.footer-cta p { margin: 4px 0 0; line-height: 1.5; }
.mascotte.footer-cta-mascotte { width: 110px; height: auto; margin: 0; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); }
.site-footer .button-white { background: #fff; color: var(--green-dark); }
.site-footer .button-white:hover { background: var(--green-soft); color: var(--green-dark); }
/* Téléphone : logo et coordonnées centrés, puis les groupes de liens repliables, séparés par un filet. */
.footer-main { display: flex; flex-direction: column; margin-top: 30px; }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 26px; text-align: center; }
.footer-logo img { display: block; width: 160px; height: auto; }
.footer-brand p { max-width: 300px; margin: 0; font-size: 13.5px; line-height: 1.55; }
.footer-contact { display: grid; justify-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.footer-contact a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.footer-contact .icon { width: 18px; height: 18px; color: #B9E59F; }
.footer-socials { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.footer-socials a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.footer-socials a:hover { background: #fff; color: var(--green-dark); }
.footer-links { border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-links:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-links summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; list-style: none; cursor: pointer; }
.footer-links summary::-webkit-details-marker { display: none; }
.footer-links summary strong { color: #fff; font-size: 15px; font-weight: 800; }
.footer-links summary .icon { color: #B9E59F; rotate: 90deg; transition: rotate .2s; }
.footer-links[open] summary .icon { rotate: -90deg; }
.footer-links ul { display: grid; gap: 12px; margin: 0; padding: 0 2px 18px; list-style: none; }
.footer-links a, .footer-link-btn { font-size: 14px; }
.footer-bottom {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	margin-top: 22px; font-size: 12px; text-align: center; color: rgba(236, 252, 228, .6);
}
.footer-bottom a { color: rgba(236, 252, 228, .85); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Nous connaître ---------- */
/* Hero : fond clair qui remonte derrière le menu, photo des animaux « détourée » sur un grand disque vert. */
.ahero {
	--head-space: 92px;
	position: relative; isolation: isolate; overflow: hidden;
	margin-top: calc(-1 * var(--head-space)); padding: calc(var(--head-space) + 10px) 0 40px;
	background:
		radial-gradient(circle at 85% 30%, rgba(185, 229, 159, .55), transparent 45%),
		radial-gradient(circle at 5% 90%, rgba(236, 252, 228, 1), transparent 50%),
		linear-gradient(180deg, #F2F9EC, var(--bg));
}
.ahero-paw { position: absolute; z-index: -1; color: var(--green); opacity: .18; pointer-events: none; }
.ahero-paw--1 { top: 22%; left: 4%; transform: rotate(-18deg); }
.ahero-paw--2 { bottom: 12%; left: 44%; transform: rotate(14deg); }
.ahero-paw--3 { top: 16%; right: 6%; opacity: .3; }
.ahero-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; gap: 26px; }
.ahero-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ahero-since { background: #fff; box-shadow: 0 4px 12px rgba(30, 41, 59, .06); }
.ahero h1 { margin: 2px 0 0; font-size: 36px; line-height: 1.05; font-weight: 900; letter-spacing: -.025em; }
.ahero-sub { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--green-dark); }
.ahero-body p { margin: 0; font-size: 15px; line-height: 1.65; color: #3F4A3A; }
.ahero-body p strong { color: var(--ink); }
.ahero-actions { width: 100%; display: grid; gap: 10px; margin-top: 8px; }
.ahero-actions .button { min-height: 52px; }
.ahero-actions .button-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.ahero-actions .button-light:hover { color: var(--green); }
.ahero-visual { order: -1; position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 0 52px; }
.ahero-video { position: relative; z-index: 1; width: 100%; max-width: 640px; height: auto; } /* vidéo à fond transparent ; .ahero-photo = image de secours */
.ahero-photo { position: relative; z-index: 1; width: 100%; max-width: 520px; height: auto; margin-top: -6%; filter: drop-shadow(0 16px 22px rgba(47, 87, 25, .2)); } /* image sans fond, posée directement sur le fond de la section */
.ahero-stat {
	position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
	padding: 8px 14px 8px 8px; border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .9);
	box-shadow: 0 14px 34px rgba(30, 41, 59, .14);
}
.ahero-stat > span:last-child { display: flex; flex-direction: column; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--muted); }
.ahero-stat strong { font-size: 22px; line-height: 1; font-weight: 900; color: var(--green-dark); }
.ahero-stat-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--green); color: #fff; }
.ahero-stat--1 { right: 0; top: 4px; } /* en haut à droite : la mésange est en haut à gauche */
.ahero-stat--2 { left: 0; bottom: 0; } /* dans l'espace libre sous les animaux */
@media (prefers-reduced-motion: no-preference) {
	.ahero-stat { animation: ahero-float 6s ease-in-out infinite; }
	.ahero-stat--2 { animation-delay: -3s; }
}
@keyframes ahero-float { 50% { transform: translateY(-8px); } }
/* Mobile : titres centrés (hero et « Bienvenue chez Poil&Caille »), paragraphes alignés à gauche. */
@media (max-width: 899px) {
	.ahero-since, .story-local .pill { align-self: center; }
	.ahero h1, .ahero-sub, .story-local .about-body h2 { align-self: stretch; text-align: center; }
	/* Toute la page Nous connaître centrée sur mobile (titres, textes, cartes, bloc contact). */
	.pc-about-page .site-main { text-align: center; }
	.pc-about-page .about-body, .pc-about-page .ahero-body, .pc-about-page .contact-intro { align-items: center; }
	.pc-about-page .ahero-body p, .pc-about-page .about-body p { align-self: stretch; }
	.pc-about-page .story-emoji { margin-inline: auto; }
	.pc-about-page .story-value { align-items: center; }
	.pc-about-page .contact-infos li { flex-direction: column; align-items: center; }
	.pc-about-page .contact-form input, .pc-about-page .contact-form textarea { text-align: left; }
}
.story-choice, .story-values { margin-top: 48px; }
.story-cards { display: grid; gap: 14px; }
.story-card { padding: 22px; border-radius: 26px; background: #fff; border: 1px solid #EDEFE8; box-shadow: 0 10px 30px rgba(30, 41, 59, .05); }
.story-emoji { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--green-soft); color: var(--green); }
.story-card h3 { margin: 14px 0 6px; font-size: 18px; line-height: 1.25; font-weight: 900; }
.story-card p, .story-value p { margin: 0; font-size: 14px; line-height: 1.6; color: #3F4A3A; }
.story-card a { color: var(--green-dark); }
.story-local { margin-top: 56px; }
.story-values { display: grid; gap: 14px; }
.story-value { display: flex; flex-direction: column; gap: 10px; padding: 26px 22px; border-radius: 28px; background: #fff; border: 1px solid #EDEFE8; }
.story-value h2 { margin: 6px 0 0; font-size: 24px; font-weight: 900; letter-spacing: -.01em; }
.story-value--green { background: linear-gradient(150deg, var(--green), var(--green-dark)); border-color: transparent; color: #fff; }
.story-value--green p { color: rgba(255, 255, 255, .88); }
.story-value--green .story-emoji { background: rgba(255, 255, 255, .16); color: #fff; }
/* Chiva posé par-ci par-là : assis sur le haut d'une carte. */
.story-card, .story-value { position: relative; }
.about-chiva { position: absolute; z-index: 2; width: auto; height: 96px; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(47, 87, 25, .18)); }
.about-chiva--card { bottom: calc(100% - 8px); right: 16px; }
.about-chiva--value { bottom: calc(100% - 8px); right: 22px; }
.story-cards { margin-top: 84px; } /* place pour Chiva, assis sur la première carte */
.story-values { row-gap: 96px; } /* téléphone : place pour Chiva, assis sur « Des prix justes » (sous « Notre vision ») */
@media (min-width: 900px) {
	.about-chiva { height: 120px; }
	.about-chiva--card { bottom: calc(100% - 10px); }
}

/* ---------- Bloc contact (Nous connaître #contact, FAQ) ---------- */
.contact { margin-top: 56px; display: grid; gap: 14px; scroll-margin-top: calc(90px + var(--topbar-h)); }
.contact-card { display: grid; gap: 20px; padding: 24px 20px; border-radius: 30px; background: linear-gradient(160deg, var(--green-soft), #fff 70%); border: 1px solid #E2F2D8; }
.contact-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } /* logo, texte et Chiva centrés */
.contact-logo { width: 190px; height: auto; }
.mascotte.contact-mascotte { width: 150px; height: auto; margin: 6px 0 0; filter: drop-shadow(0 12px 14px rgba(47, 87, 25, .18)); }
.contact-intro-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--green); color: #fff; }
.contact-intro h2 { margin: 6px 0 0; font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.contact-intro p { margin: 0; font-size: 15px; line-height: 1.6; color: #3F4A3A; }
.contact-form { display: grid; gap: 12px; }
.contact-form p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-form label { font-size: 13px; font-weight: 800; color: var(--ink); }
.contact-form input, .contact-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 16px; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(65, 115, 37, .12); }
.contact-form .button { width: 100%; min-height: 52px; }
.contact-hp { position: absolute !important; left: -9999px; }
/* Case RGPD : case à gauche, texte à côté (pas en colonne comme les autres champs). */
.contact-form .contact-rgpd { flex-direction: row; align-items: flex-start; gap: 10px; text-align: left; }
.contact-form .contact-rgpd input { flex-shrink: 0; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--green); cursor: pointer; }
.contact-form .contact-rgpd label { font-size: 13px; font-weight: 600; line-height: 1.5; color: #3F4A3A; cursor: pointer; }
.contact-form .contact-rgpd a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.contact-notice { flex-direction: row !important; align-items: center; gap: 8px !important; padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; }
.contact-notice.is-ok { background: #fff; color: var(--green-dark); border: 1.5px solid #CFE8BF; }
.contact-notice.is-ko { background: #FDECEA; color: #9B2C1F; }
.contact-infos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-infos li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid #EDEFE8; }
.contact-infos .info-icon { background: var(--green-soft); }
.contact-infos h3 { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.contact-infos p { margin: 0; font-size: 14px; line-height: 1.55; color: #3F4A3A; }
.contact-infos strong { font-size: 15px; color: var(--ink); }
.contact-infos a strong { color: var(--green-dark); }
.contact-map { overflow: hidden; border-radius: 28px; background: var(--green-soft); }
.contact-map iframe { display: block; width: 100%; height: 300px; border: 0; }

/* ---------- FAQ ---------- */
.faq-hero { margin-top: 18px; text-align: center; }
.faq-hero h1 { margin: 0; font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
.faq-section { margin-top: 30px; display: grid; gap: 16px; scroll-margin-top: calc(90px + var(--topbar-h)); }
.faq-body { scroll-margin-top: calc(90px + var(--topbar-h)); }
/* Image à sa taille réelle au plus (jamais agrandie ni recadrée : sinon elle devient floue). */
.faq-photo { display: block; width: auto; max-width: 100%; height: auto; max-height: 420px; margin: 0 auto; border-radius: 26px; background: var(--green-soft); }
/* Mascotte détourée (sans fond) : de temps en temps, une larme gonfle sous l'œil et coule (une 2e un cycle sur deux). */
.faq-cut { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.faq-photo--cut { background: none; border-radius: 0 !important; }
.faq-tear { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -2px 0 0 -5px; border-radius: 0 50% 50% 50%; transform: rotate(45deg) scale(0); opacity: 0; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #8FD3FF 30%, #3B9BE8 100%); box-shadow: 0 1px 2px rgba(20, 90, 160, .25); pointer-events: none; animation: faq-tear 7s ease-in 1s infinite; }
.faq-tear--2 { animation: faq-tear-2 14s ease-in 2.4s infinite; }
@keyframes faq-tear { 0% { transform: translate(0, 0) rotate(45deg) scale(0); opacity: 0; } 8% { transform: translate(0, 0) rotate(45deg) scale(1); opacity: 1; } 14% { transform: translate(0, 2px) rotate(45deg) scale(1); opacity: 1; } 30% { transform: translate(3px, 46px) rotate(45deg) scale(.85); opacity: .9; } 36%, 100% { transform: translate(4px, 60px) rotate(45deg) scale(.6); opacity: 0; } }
@keyframes faq-tear-2 { 0% { transform: translate(0, 0) rotate(45deg) scale(0); opacity: 0; } 4% { transform: translate(0, 0) rotate(45deg) scale(.8); opacity: 1; } 7% { transform: translate(0, 2px) rotate(45deg) scale(.8); opacity: 1; } 15% { transform: translate(3px, 46px) rotate(45deg) scale(.7); opacity: .9; } 18%, 100% { transform: translate(4px, 60px) rotate(45deg) scale(.5); opacity: 0; } }
/* Commandes : de temps en temps, deux points d'interrogation poussent près de la tête, se balancent puis s'effacent. */
.faq-cut { isolation: isolate; }
.faq-ask { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: flex-end; gap: 1px; transform: translate(-50%, -80%); pointer-events: none; }
.faq-ask b { display: block; font-size: 34px; font-weight: 900; line-height: 1; color: var(--green); text-shadow: 0 0 0 #fff, 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 0 4px 8px rgba(30, 60, 20, .25); transform-origin: 50% 100%; opacity: 0; animation: faq-ask 8s ease-out .6s infinite; }
.faq-ask b + b { margin-bottom: 14px; font-size: 22px; animation-delay: .95s; }
@keyframes faq-ask { 0% { opacity: 0; transform: scale(0) rotate(-20deg); } 4% { opacity: 1; transform: scale(1.15) rotate(8deg); } 7% { transform: scale(1) rotate(-7deg); } 10% { transform: rotate(5deg); } 13% { transform: rotate(-3deg); } 16% { opacity: 1; transform: rotate(0); } 24% { opacity: 1; transform: translateY(-5px); } 30%, 100% { opacity: 0; transform: translateY(-12px) scale(.9); } }
/* Livraison : feuilles emportées par le vent vers l'arrière du scooter (certaines derrière le chien, d'autres devant). */
.faq-leaf { position: absolute; left: 0; top: var(--y); z-index: 1; width: 100%; height: 0; opacity: 0; pointer-events: none; animation: faq-wind var(--t) linear var(--d) infinite; }
.faq-leaf:nth-of-type(3n) { z-index: -1; }
.faq-leaf i { display: block; width: var(--z); height: calc(var(--z) * .5); margin-top: calc(var(--z) * -.25); position: relative; border-radius: 100% 0; background: linear-gradient(135deg, #B5E86A, #3E9B2C 55%, #1F6E1B); box-shadow: 0 2px 4px rgba(20, 60, 10, .3); animation: faq-leaf-spin calc(var(--t) * .6) linear infinite; }
.faq-leaf i::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: rgba(255, 255, 255, .6); transform: rotate(-22deg); }
@keyframes faq-wind { 0% { opacity: 0; transform: translate(var(--x0), 0); } 12% { opacity: 1; } 50% { transform: translate(calc(var(--x0) / 2 - 4%), -12px); } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(-8%, 4px); } }
@keyframes faq-leaf-spin { to { transform: rotate(360deg) rotateX(360deg); } }
/* VIP : de temps en temps, une pluie de pièces d'or qui tournent, tombent sur le trône et disparaissent. */
.faq-coin { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; animation: faq-coin 6s cubic-bezier(.45, 0, .8, .6) calc(var(--d) + 1.2s) infinite; }
.faq-coin i { position: absolute; left: var(--x); top: 0; width: var(--z); height: var(--z); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6C4 0 12%, #FFD54A 35%, #E0A21B 80%); box-shadow: inset 0 0 0 2px #C98A12, inset 0 0 0 4px rgba(255, 236, 150, .7), 0 2px 4px rgba(120, 80, 0, .3); animation: faq-coin-flip .7s linear infinite; }
@keyframes faq-coin { 0% { opacity: 0; transform: translateY(-8%); } 4% { opacity: 1; } 30% { opacity: 1; } 40%, 100% { opacity: 0; transform: translateY(78%); } }
@keyframes faq-coin-flip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
/* Associations : un ou deux petits cœurs montent doucement au-dessus de chaque tête, chacun son tour. */
.faq-heart { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 0; height: 0; pointer-events: none; }
.faq-heart i { position: absolute; left: -7px; bottom: 0; width: 14px; height: 13px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23F0506E' d='M12 21.6 10.3 20C4.2 14.5 0 10.7 0 6.1 0 2.6 2.7 0 6.2 0c2 0 3.9.9 5.8 2.7C13.9.9 15.8 0 17.8 0 21.3 0 24 2.6 24 6.1c0 4.6-4.2 8.4-10.3 13.9Z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(160, 30, 60, .25)); animation: faq-heart 5.1s ease-out calc(var(--d) + .8s) infinite; }
.faq-heart i + i { left: 4px; width: 10px; height: 9px; animation-delay: calc(var(--d) + 1.25s); }
@keyframes faq-heart { 0% { opacity: 0; transform: translateY(0) scale(.3); } 5% { opacity: 1; transform: translateY(-4px) scale(1.1); } 10% { transform: translateY(-9px) scale(1) rotate(-8deg); } 20% { transform: translateY(-18px) rotate(8deg); } 28% { opacity: .9; } 34%, 100% { opacity: 0; transform: translateY(-30px) rotate(-4deg) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .faq-tear, .faq-leaf, .faq-ask, .faq-coin, .faq-heart { display: none; } }
.faq-body h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 20px; line-height: 1.2; font-weight: 900; letter-spacing: .01em; }
.faq-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--green); color: #fff; }
.faq-item { margin-bottom: 8px; border-radius: 20px; background: #fff; border: 1px solid #EDEFE8; transition: box-shadow .2s; }
.faq-item[open] { box-shadow: 0 10px 28px rgba(30, 41, 59, .06); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-size: 15px; font-weight: 800; line-height: 1.35; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--green-soft); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--green); transition: transform .25s; }
.faq-plus::after { transform: rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: rotate(0); }
.faq-answer { padding: 0 18px 18px; }
.faq-answer p { margin: 0; font-size: 14px; line-height: 1.65; color: #3F4A3A; }
.faq-answer a { color: var(--green-dark); font-weight: 700; }
.faq-assos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: asso; }
.faq-assos li { counter-increment: asso; padding: 14px; border-radius: 16px; background: var(--bg); }
.faq-assos h4 { margin: 0 0 6px; font-size: 15px; font-weight: 900; }
.faq-assos h4::before { content: counter(asso) ". "; color: var(--green); }
.faq-assos p + p { margin-top: 4px; }

/* ---------- Pages simples (CGV, mentions légales, confidentialité…) ---------- */
.legal-page { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.legal-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px 0 14px; text-align: center; }
.legal-head h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 900; letter-spacing: -.02em; }
.legal-head p { margin: 0; font-size: 13px; color: var(--muted); }
.legal-docs { padding-top: 4px; padding-bottom: 8px; }
.legal-docs .chip { height: 36px; padding: 0 14px; font-size: 13px; }
/* Barre fixe (téléphone) : sommaire et article en cours à gauche, loupe à droite. */
.legal-bar {
	position: sticky; z-index: 14; top: calc(var(--topbar-h) + var(--head-gap) + var(--head-h, 64px));
	display: flex; gap: 8px; margin: 0 -20px 8px; padding: 8px 20px 10px;
	background: linear-gradient(var(--bg) 78%, rgba(246, 247, 242, 0)); /* le texte ne se voit pas entre le menu et la barre */
}
.legal-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--head-h, 64px) + 20px); background: var(--bg); } /* derrière le menu flottant */
.legal-bar button { display: flex; align-items: center; gap: 10px; height: 52px; border: 1px solid #E2E8DA; border-radius: 16px; background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(30, 41, 59, .35); cursor: pointer; font: inherit; }
.legal-bar-toc { flex: 1; min-width: 0; padding: 0 14px; text-align: left; }
.legal-bar-toc .icon { flex-shrink: 0; color: var(--green); }
.legal-bar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.legal-bar-text small { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.legal-bar-text strong { overflow: hidden; font-size: 14px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.legal-bar-search { width: 52px; flex-shrink: 0; justify-content: center; color: var(--green-dark); }
/* Panneau (sommaire + recherche) : par le bas sur téléphone. */
.legal-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(15, 23, 12, .35); }
.legal-backdrop[hidden] { display: none; }
.legal-panel {
	position: fixed; z-index: 49; left: 0; right: 0; bottom: 0; max-height: 82dvh; overflow-y: auto; overscroll-behavior: contain;
	padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--bg);
	box-shadow: 0 -20px 50px rgba(15, 23, 12, .2); transform: translateY(105%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s;
}
.legal-panel.is-open { transform: none; visibility: visible; }
html.legal-locked { overflow: hidden; }
.legal-panel-head { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -16px 8px; padding: 12px 16px 8px; background: var(--bg); }
.legal-panel-head strong { font-size: 17px; font-weight: 900; }
.legal-search { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.legal-search > .icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.legal-search input { width: 100%; height: 48px; padding: 0 42px 0 42px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.legal-search input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(65, 115, 37, .12); }
.legal-search input::-webkit-search-cancel-button { display: none; }
.legal-search-clear { position: absolute; right: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.legal-search-clear[hidden] { display: none; }
.legal-results-count { margin: 0 4px 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.legal-results ol, .legal-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.legal-results button { display: grid; gap: 3px; width: 100%; padding: 12px 14px; border: 1px solid #EDEFE8; border-radius: 14px; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.legal-results button:hover { border-color: var(--green); }
.legal-results strong { font-size: 14px; font-weight: 800; color: var(--ink); }
.legal-results span { font-size: 13px; line-height: 1.5; color: #3F4A3A; }
.legal-results small { font-size: 11.5px; font-weight: 800; color: var(--green); }
.legal-results mark, mark.legal-mark { padding: 0; border-radius: 3px; background: #FFE58A; box-shadow: 0 0 0 2px #FFE58A; color: inherit; }
mark.legal-mark.is-current { background: #FBBF24; box-shadow: 0 0 0 2px #FBBF24, 0 0 0 5px rgba(251, 191, 36, .35); }
.legal-toc a { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.35; }
.legal-toc a:hover { background: var(--green-soft); color: var(--green-dark); }
.legal-toc a.is-active { background: var(--green-soft); color: var(--green-dark); box-shadow: inset 3px 0 0 var(--green); }
.legal-toc .is-sub a { padding: 7px 12px 7px 30px; font-size: 13px; font-weight: 600; color: #4A5462; }
.legal-toc .legal-num { flex-shrink: 0; }
/* Numéro d'article : pastille verte (titres et sommaire). */
.legal-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); font-size: 12px; font-weight: 900; line-height: 1; }
.legal-toc a.is-active .legal-num { background: var(--green); color: #fff; }
/* Texte du document. */
.legal-content { padding: 24px 20px; border-radius: 26px; background: #fff; border: 1px solid #EDEFE8; font-size: 15.5px; line-height: 1.7; color: #3F4A3A; overflow-wrap: anywhere; }
.legal-content > :first-child { margin-top: 0; }
.legal-content .legal-dup, .legal-content hr { display: none; }
.legal-content h2, .legal-content h3, .legal-content .legal-h { margin: 34px 0 12px; font-size: 19px; line-height: 1.3; font-weight: 900; letter-spacing: -.01em; color: var(--ink); text-transform: none; scroll-margin-top: calc(var(--topbar-h) + var(--head-gap) + var(--head-h, 64px) + 80px); }
.legal-content .legal-h { display: flex; align-items: flex-start; gap: 10px; padding-top: 22px; border-top: 1px solid #EDEFE8; }
.legal-content .legal-h .legal-num { margin-top: 1px; }
.legal-content .legal-h--sub { margin-top: 22px; padding-top: 0; border-top: 0; font-size: 16px; font-weight: 800; }
.legal-content .legal-h--sub .legal-num { background: #F2F4F7; color: #475467; font-size: 11px; height: 22px; }
.legal-content .legal-h:first-child, .legal-content .legal-dup + .legal-h, .legal-content .legal-dup + hr + .legal-h { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content p { margin: 0 0 12px; }
.legal-content ul, .legal-content ol { margin: 0 0 16px; padding-left: 0; list-style: none; }
.legal-content li { position: relative; margin-bottom: 6px; padding-left: 20px; }
.legal-content ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.legal-content ol { counter-reset: legal; }
.legal-content ol > li { counter-increment: legal; padding-left: 26px; }
.legal-content ol > li::before { content: counter(legal) "."; position: absolute; left: 0; font-weight: 800; color: var(--green-dark); }
.legal-content strong { color: var(--ink); }
.legal-content a { color: var(--green-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* Une question ? */
.legal-help { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 18px; border-radius: 22px; background: var(--green-soft); border: 1px solid #DDEFD1; }
.legal-help-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #fff; color: var(--green); }
.legal-help div { display: flex; flex-direction: column; gap: 3px; }
.legal-help strong { font-size: 15.5px; font-weight: 900; color: var(--ink); }
.legal-help span { font-size: 13.5px; line-height: 1.5; color: #3F4A3A; }
.legal-help a { font-weight: 800; color: var(--green-dark); }

/* Suivre ma commande : formulaire WooCommerce dans une carte. */
.track-page { max-width: 720px; }
.track-icon { background: var(--green-soft); color: var(--green); }
.track-card { padding: 24px 20px; border-radius: 26px; background: #fff; border: 1px solid #EDEFE8; box-shadow: 0 10px 30px rgba(30, 41, 59, .05); }
.track-card form { display: grid; gap: 14px; }
.track-card form > p:first-child { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.track-card .form-row { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.track-card label { font-size: 13px; font-weight: 800; color: var(--ink); }
.track-card input.input-text { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); font-size: 16px; outline: none; }
.track-card input.input-text:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(65, 115, 37, .12); background: #fff; }
.track-card .clear { display: none; }
.track-card .button { width: 100%; min-height: 52px; }
.track-card .woocommerce-order-details, .track-card .woocommerce-customer-details { margin-top: 18px; }
.track-account { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 16px 18px; border-radius: 22px; background: #fff; border: 1px solid #EDEFE8; color: var(--ink); }
.track-account > .icon:first-child { color: var(--green); }
.track-account span { display: flex; flex-direction: column; flex: 1; }
.track-account small { font-size: 12px; color: var(--muted); }
.track-account:hover { border-color: var(--green); color: var(--ink); }
@media (min-width: 600px) {
	.track-card { padding: 32px; }
	.track-card form { grid-template-columns: 1fr 1fr; }
	.track-card form > p:first-child, .track-card form > .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
}

/* Pages « Faire un don » et « Programme VIP ». */
.don-assos, .vip-page-faq { max-width: 860px; margin-top: 48px; }
.don-assos .faq-assos li { background: #fff; border: 1px solid #EDEFE8; }
.vip-page-icon { background: #FBF3DA; color: #B8860B; }

/* Mascotte : états vides, 404, suivi et confirmation de commande (images détourées). */
.mascotte { display: block; height: auto; margin: 0 auto; filter: drop-shadow(0 10px 16px rgba(47, 87, 25, .18)); }
.mascotte--md { width: 150px; }
.mascotte--lg { width: 190px; }
.drawer-empty .mascotte { margin-bottom: 4px; }
.track-page .mascotte { margin-bottom: 4px; }
.thanks-mascotte { display: flex; justify-content: center; margin: 0 0 8px; }
.notfound-card { max-width: 620px; margin: 24px auto 0; padding: 32px 22px; border-style: solid; }
.notfound-card h1 { margin: 6px 0 0; font-size: 26px; line-height: 1.2; font-weight: 900; color: var(--ink); }
.notfound-card .search-form { width: 100%; margin-top: 10px; }
.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.notfound-actions .button-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }

/* ---------- Grand écran ---------- */
@media (min-width: 900px) {
	body { padding-bottom: 0; }
	/* Menu du bas aussi sur ordinateur : la même capsule, plus étroite, centrée en bas de l'écran. */
	.tabbar { left: 50%; right: auto; width: 440px; translate: -50% 0; }
	.tabbar a:hover { color: var(--green-dark); }
	html.topbar-off { --head-gap: 14px; }
	.site-header { width: 100%; max-width: 1200px; margin: var(--head-gap) auto 18px; padding: 10px 12px 10px 20px; top: calc(var(--topbar-h) + var(--head-gap)); }
	.primary-nav { display: block; }
	.acc-btn { display: flex; }
	.primary-nav > ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
	.primary-nav > ul > li > a { display: block; padding: 12px 0; color: var(--ink); font-weight: 700; }
	.primary-nav > ul > li > a:hover { color: var(--green); }
	/* Menu du haut : petit trait fin (10 px) et discret sous le lien. Survol : il s'étire depuis le centre ; rubrique en cours : il reste. */
	.primary-nav > ul > li > a { position: relative; }
	.primary-nav > ul > li > a::after {
		content: ""; position: absolute; left: 50%; bottom: 6px; width: 10px; height: 1.5px; margin-left: -5px; border-radius: 1px;
		background: currentColor; opacity: 0; transform: scaleX(0); transition: opacity .25s, transform .3s ease;
		pointer-events: none;
	}
	.primary-nav > ul > li.has-mega > a::after { margin-left: -14px; } /* centré sous le texte, pas sous la flèche (14 px + 4 px d'écart) */
	.primary-nav > ul > li > a:hover::after { opacity: .2; transform: none; }
	.primary-nav > ul > li > a[aria-current="page"] { color: var(--green-dark); }
	.primary-nav > ul > li > a[aria-current="page"]::after { opacity: .35; transform: none; }
	.has-mega { position: static; }
	.has-mega > a { display: inline-flex !important; align-items: center; gap: 4px; }
	.has-mega > a .icon { transform: rotate(90deg); transition: transform .25s; }
	.has-mega.is-open > a { color: var(--green); }
	.has-mega.is-open > a .icon { transform: rotate(-90deg); }
	/* Panneau : rayons à gauche, sous-catégories au centre, raccourci boutique à droite. */
	.mega {
		display: grid; grid-template-columns: 250px 1fr 210px; gap: 20px;
		position: absolute; left: 0; right: 0; top: 100%;
		margin-top: 12px; padding: 16px; border-radius: 28px;
		border: 1px solid #EDEFE8;
		background: #fff; /* blanc plein, sans transparence */
		box-shadow: 0 24px 60px rgba(30, 41, 59, .16);
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .2s, transform .2s, visibility 0s .2s;
	}
	.has-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
	/* Pont invisible entre la barre du menu et le panneau (seulement l'espace de 12 px entre les deux) :
	   la souris ne « tombe » pas dans le vide, sans recouvrir les autres liens du menu (Conseils…). */
	.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px; }
	.mega-rayons { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
	.mega-rayon { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 18px; color: var(--ink); transition: background .15s; }
	.mega-rayon > .icon { margin-left: auto; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
	.mega-rayon[aria-current="true"] { background: var(--green-soft); }
	.mega-rayon[aria-current="true"] > .icon { opacity: 1; transform: none; color: var(--green); }
	.mega-rayon-img { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #fff; color: var(--green); box-shadow: 0 4px 12px rgba(30, 41, 59, .08); }
	.mega-rayon-img img { width: 100%; height: 100%; object-fit: cover; }
	.mega-rayon-name { display: flex; flex-direction: column; font-size: 15px; font-weight: 800; line-height: 1.2; }
	.mega-rayon-name small { font-size: 12px; font-weight: 600; color: var(--muted); }
	.mega-panel { padding: 8px 4px; }
	.mega-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 6px 12px; }
	.mega-panel-head strong { font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
	.mega-panel-head a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; color: var(--green); }
	.mega-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
	.mega-link { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 14px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.25; transition: background .15s, color .15s; }
	.mega-link-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--green-soft); color: var(--green); transition: background .15s, color .15s; }
	.mega-link:hover { background: #fff; color: var(--green-dark); box-shadow: 0 6px 16px rgba(30, 41, 59, .06); }
	.mega-link:hover .mega-link-icon { background: var(--green); color: #fff; }
	.mega-promo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-radius: 22px; background: linear-gradient(155deg, var(--green), var(--green-dark)); color: #fff; }
	.mega-promo-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; border-radius: 14px; background: rgba(255, 255, 255, .16); }
	.mega-promo strong { font-size: 18px; font-weight: 900; }
	.mega-promo > span:not([class]) { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
	.mega-promo-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--green-dark); font-size: 13px; font-weight: 800; transition: transform .2s; }
	.mega-promo:hover .mega-promo-cta { transform: translateX(4px); }
	.mega-promo:hover { color: #fff; } /* texte et icône restent blancs au survol (sinon la couleur des liens les verdit) */
	ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
	.pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
	.hero { --head-space: 104px; padding: calc(var(--head-space) + 12px) 0 36px; }
	.hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; padding: 0 32px; }
	.hero-title { font-size: 56px; }
	.hero-lead { max-width: 520px; font-size: 18px; }
	.orbit-stage { --stage: 470px; --item: 78px; margin: 0 auto; }
	.orbit-label { font-size: 11px; }
	.hero-float { font-size: 13px; }
	.hero-actions { display: flex; }
	.hero-points { max-width: 520px; }
	.home-block { margin-top: 44px; }
	/* Ordinateur : haut de page et titres centrés, sections à image en zigzag. */
	.fake-search { margin-left: auto; margin-right: auto; }
	.block-head { flex-direction: column; align-items: center; gap: 4px; margin-bottom: 20px; text-align: center; }
	.block-head h2 { font-size: 26px; }
	.home-block .rail { justify-content: safe center; }
	.split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
	.split-body h2 { font-size: 34px; }
	.split-body p { font-size: 15px; }
	.dons { margin-top: 72px; }
	.checkout-page { padding: 0 32px; }
	.co-steps { max-width: 620px; margin: 10px 0 22px; }
	.co-steps li > a, .co-steps li { font-size: 13px; }
	.checkout-title { font-size: 40px; margin-bottom: 20px; }
	.co-grid { display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; }
	.co-side { order: 2; position: sticky; top: calc(110px + var(--topbar-h)); }
	.co-main { order: 1; }
	.co-card { padding: 26px; }
	.blog-page { padding: 0 32px; }
	.blog-search { margin-top: 24px; }
	.blog-mascotte { width: 170px; left: 40px; transform: none; }
	.blog-head h1 { font-size: 44px; }
	.blog-chips { margin: 0; padding: 18px 0 6px; }
	.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
	.article-head { margin-top: 18px; }
	.article-head h1 { font-size: 42px; }
	.article-content { font-size: 18px; }
	.article-content h2 { font-size: 28px; }
	.article-foot { grid-template-columns: 1fr auto; align-items: center; }
	.account-page { padding: 0 32px; }
	.account-title { font-size: 40px; }
	.acc-login.has-register { grid-template-columns: 1fr 1fr; gap: 20px; }
	.acc-login .co-auth-card { padding: 30px; }
	.acc-hero { padding: 24px 26px; }
	.acc-hello h1 { font-size: 30px; }
	.acc-grid { grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
	.acc-nav { position: sticky; top: calc(110px + var(--topbar-h)); margin: 0; overflow: visible; }
	.acc-nav ul { flex-direction: column; width: auto; padding: 10px; border-radius: 24px; background: #fff; border: 1px solid #EDEFE8; }
	.acc-nav a { height: 48px; border: none; border-radius: 14px; background: transparent; }
	.acc-nav a:hover { background: var(--bg); }
	.acc-nav a[aria-current="page"] { background: var(--green); }
	.acc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.account-page .woocommerce-Addresses { grid-template-columns: 1fr 1fr; }
	.account-page .woocommerce-MyAccount-content form { padding: 26px; }
	.co-auth { grid-template-columns: 1fr 1fr; gap: 20px; }
	.co-auth-card { padding: 30px; }
	.co-summary > summary { pointer-events: none; }
	.co-summary > summary::after { display: none; }
	.woocommerce-order-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cart-page { padding: 0 32px; }
	.cart-page-head h1 { font-size: 40px; }
	.cart-page-grid { grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
	.cart-summary { position: sticky; top: calc(110px + var(--topbar-h)); padding: 26px; }
	.page-items .cart-item { grid-template-columns: 96px 1fr; padding: 14px 52px 14px 14px; }
	.page-items .cart-item-img { width: 96px; height: 96px; }
	.page-items .cart-item-name { font-size: 16px; }
	.section-head { margin-bottom: 32px; }
	.section-head h2 { font-size: 40px; }
	.gamme-section { margin-top: 72px; }
	.gamme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 0; padding: 70px 0 36px; overflow: visible; align-items: start; }
	.gamme-card { max-width: none; }
	.gamme-card--gear { margin-top: 36px; } /* carte du milieu décalée : effet « escalier » */
	.gamme-visual { height: 200px; }
	.gamme-mascotte { width: 76%; max-width: 280px; }
	.gamme-body { padding: 24px 28px 28px; }
	.gamme-body strong { font-size: 22px; }
	.about { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
	.about .about-media { order: 2; }
	.about-body h2 { font-size: 42px; }
	.about-actions { grid-template-columns: auto 1fr; align-items: center; gap: 24px; }
	.conseils { margin-top: 72px; }
	.conseils-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
	.conseils-head h2 { font-size: 40px; }
	.conseils-nav .conseils-all { margin-right: 10px; }
	.conseils-track { margin: 0; padding: 4px 2px 18px; gap: 20px; scroll-padding: 0; }
	.post-card { flex-basis: calc((100% - 40px) / 3); }
	.fidelite { margin-top: 72px; }
	.fidelite-wrap { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding: 88px max(56px, calc((100% - 1088px) / 2)); }
}
@media (min-width: 900px) {
	.fidelite-body h2 { font-size: 46px; }
	.fidelite-sub { font-size: 20px; }
	.fidelite-list li { font-size: 15px; }
	.dons-wrap { gap: 56px; padding: 64px 56px; border-radius: 44px; }
	.dons-head h2 { font-size: 46px; }
	.dons-head p { font-size: 18px; }
	.dons-top { grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: stretch; }
	.dons-boost { justify-content: center; padding: 40px; margin-top: 0; }
	.dons-heros { width: 250px; right: -34px; top: -64px; }
	.dons-boost p { max-width: 58%; }
	.dons-percent { font-size: 120px; }
	.dons-boost p { font-size: 16px; }
	.dons-pillars { grid-template-columns: 1fr; gap: 12px; }
	.dons-pillars li { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 18px 22px; text-align: left; }
	.dons-pillars strong { font-size: 17px; }
	.dons-how h3, .dons-assos h3 { margin-bottom: 26px; font-size: 28px; }
	.dons-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.dons-steps::before { left: 12%; right: 12%; top: 58px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(to right, rgba(65, 115, 37, .35) 0 6px, transparent 6px 12px); }
	.dons-step { grid-template-columns: 1fr; align-content: start; row-gap: 16px; padding: 24px; }
	.dons-step-icon { width: 54px; height: 54px; } /* ordinateur : tailles d'avant */
	.dons-step-text { font-size: 16px; }
	.dons-head p { font-size: 16px; }
	.dons-step-top { justify-content: space-between; }
	.dons-step-num { display: block; font-size: 40px; line-height: 1; font-weight: 900; color: var(--green); }
	.dons-step .promo-code { grid-column: auto; max-width: 100%; gap: 8px; padding: 4px 4px 4px 10px; }
	.dons-step .promo-code code { font-size: 12px; letter-spacing: .05em; }
	.dons-step .promo-copy { padding: 7px 9px; font-size: 12px; }
	.dons-assos ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
	.dons-assos li { align-items: center; padding: 22px 14px; text-align: center; }
	.dons-assos li:last-child:nth-child(odd) { grid-column: auto; }
	.dons-cta-actions { width: auto; display: flex; }
	.site-footer { margin-top: 72px; padding: 40px 32px calc(var(--tabbar-h) + 36px); border-radius: 40px 40px 0 0; } /* le bas laisse la place au menu du bas */
	.footer-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 24px 28px; text-align: left; }
	.footer-cta > div { flex: 1; } /* le texte prend la place entre Chiva et le bouton */
	.mascotte.footer-cta-mascotte { width: 104px; margin: -40px 0 -24px; } /* Chiva dépasse un peu du haut de la carte */
	.footer-cta strong { font-size: 26px; }
	.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-top: 44px; }
	.footer-brand { align-items: flex-start; padding-bottom: 0; text-align: left; }
	.footer-brand p { max-width: none; }
	.footer-contact { justify-items: start; }
	.footer-socials { justify-content: flex-start; }
	.footer-links, .footer-links:last-child { border: 0; }
	.footer-links summary { padding: 0 0 12px; cursor: default; }
	.footer-links summary strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
	.footer-links summary .icon { display: none; }
	.footer-links ul { gap: 9px; padding: 0; }
	.footer-bottom { flex-direction: row; justify-content: space-between; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); text-align: left; }
	.rail { margin: -18px -28px -14px; padding: 18px 28px 18px; scroll-padding: 0 28px; }
	.rayon-card { width: 128px; }
	.rayon-img { width: 120px; height: 120px; }
	.rayon-img .icon { width: 56px; height: 56px; }
	.fake-search { max-width: 560px; }
	.shop-head { padding-top: 24px; }
	.shop-head h1 { font-size: 40px; }
	.shop-head--cat h1 { font-size: 30px; }
	.shop-head .search-form { max-width: 560px; }
	.shop-head--cat .search-form, .shop-head--shop .search-form { max-width: none; }
	.single-product { padding-bottom: 0; }
	.single-product .site-header { display: flex; }
	.single-product .topbar { display: block; }
	.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1200px; margin: 16px auto 0; padding: 0 32px; }
	.pdp-media { height: auto; aspect-ratio: 1 / 1; border-radius: 32px; }
	.pdp-top { position: absolute; z-index: 2; top: 18px; left: 20px; right: 20px; justify-content: flex-end; } /* ordinateur : dans la photo, le menu du site est visible */
	.pdp-top [data-back] { display: none; }
	.pdp-tabs { padding: 0 32px; margin-top: 40px; }
	.pdp-tabs-nav { margin: 0 0 16px; padding: 0; }
	.pdp-panel { padding: 30px 34px; }
	.pdp-info { padding: 8px 0 0; }
	.pdp-title h1 { font-size: 32px; }
	.buybar { position: static; z-index: auto; padding: 18px; border: 1px solid #E9ECE3; border-radius: 20px; }
}

/* Petits écrans d'ordinateur : les 4 étapes du don passent en 2 × 2 pour que le code promo tienne. */
@media (min-width: 900px) and (max-width: 1179px) {
	.dons-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dons-steps::before { display: none; }
}

/* Nous connaître, contact, FAQ : grand écran. */
@media (min-width: 900px) {
	.vip-card { padding: 26px 40px 26px 28px; }
	.vip-visual { width: 210px; height: 230px; margin: -8px 10px -8px 0; }
	.legal-head h1 { font-size: 44px; }
	.legal-bar { display: none; }
	.legal-layout { margin-top: 18px; }
	.legal-layout.has-toc { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
	/* Ordinateur : le panneau devient une colonne fixe à gauche (recherche + sommaire). */
	.legal-panel {
		position: sticky; z-index: 1; top: calc(var(--topbar-h) + var(--head-gap) + var(--head-h, 64px) + 16px); left: auto; right: auto; bottom: auto;
		max-height: calc(100vh - var(--topbar-h) - var(--head-h, 64px) - 50px); padding: 16px; border-radius: 22px; background: #fff; border: 1px solid #EDEFE8;
		box-shadow: none; transform: none; visibility: visible; transition: none;
	}
	.legal-panel-head { position: static; margin: 0 0 10px; padding: 0 4px; background: none; }
	.legal-panel-head .icon-btn { display: none; }
	.legal-content { padding: 44px 56px; }
	.legal-content > * { max-width: 760px; }
	.legal-help { max-width: none; }
	.ahero { --head-space: 104px; padding: calc(var(--head-space) + 24px) 0 64px; }
	.ahero-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 0 32px; }
	.ahero h1 { font-size: 54px; }
	.ahero-sub { font-size: 22px; }
	.ahero-body p { max-width: 540px; font-size: 16px; }
	.ahero-actions { display: flex; }
	.ahero-visual { order: 0; padding: 26px 0 30px; }
	.ahero-stat--1 { right: -10px; top: 30px; }
	.ahero-stat--2 { left: -10px; bottom: -26px; }
	.story-choice, .story-values, .story-local { margin-top: 88px; }
	.story-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
	.story-card { padding: 26px; }
	.story-values { grid-template-columns: 1fr 1fr; gap: 18px; }
	.story-value { padding: 36px; }
	.story-value h2 { font-size: 30px; }
	.contact { margin-top: 88px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	.contact-card { grid-column: 1 / -1; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; padding: 44px; }
	.contact-intro h2 { font-size: 42px; }
	.contact-form { grid-template-columns: 1fr 1fr; gap: 14px; }
	.contact-form .contact-wide, .contact-notice { grid-column: 1 / -1; }
	.contact-infos { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	.contact-map { grid-column: 1 / -1; }
	.contact-map iframe { height: 380px; }
	.faq-hero h1 { font-size: 48px; }
	.faq-section { margin-top: 56px; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
	.faq-section:nth-of-type(even) { grid-template-columns: 7fr 5fr; }
	.faq-section:nth-of-type(even) .faq-media { order: 2; }
	.faq-media { position: sticky; top: calc(110px + var(--topbar-h)); }
	.faq-photo { border-radius: 30px; }
	.faq-body h2 { font-size: 24px; }
}

/* ---------- Consentement aux cookies (bannière + préférences) ---------- */
/* Le chien au cookie (bouton .cookie-pet) « parle » : la bulle de consentement est au-dessus de sa tête, avec une pointe vers lui.
   --pet-bottom : bas du chien ; --pet-h : sa hauteur. Téléphone : au-dessus du menu du bas ; ordinateur : en bas à gauche. */
:root { --pet-bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); --pet-w: 84px; --pet-h: 94px; }
.woocommerce-checkout, .single-product, .woocommerce-cart { --pet-bottom: calc(100px + env(safe-area-inset-bottom)); } /* au-dessus des barres d'achat */
@media (min-width: 900px) {
	:root, .woocommerce-checkout, .single-product, .woocommerce-cart { --pet-bottom: 20px; --pet-w: 100px; --pet-h: 112px; }
}
.cookie-banner {
	position: fixed; z-index: 55; /* au-dessus du chat (bulle 41, fenêtre 50) */ left: 12px; right: 12px; bottom: calc(var(--pet-bottom) + var(--pet-h) + 12px);
	padding: 16px 16px 12px; border-radius: 24px; background: #fff; border: 1px solid #EDEFE8;
	box-shadow: 0 18px 50px rgba(30, 41, 59, .22);
	transform-origin: 40px 100%; animation: cookie-in .4s cubic-bezier(.3, 1.4, .5, 1);
}
.cookie-banner::after { /* pointe de la bulle, vers la tête du chien */
	content: ""; position: absolute; left: 34px; bottom: -9px; width: 18px; height: 18px; rotate: 45deg;
	background: #fff; border-right: 1px solid #EDEFE8; border-bottom: 1px solid #EDEFE8; border-bottom-right-radius: 4px;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; scale: .6; } }
.cookie-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cookie-title { font-size: 16px; font-weight: 900; line-height: 1.25; color: var(--ink); }
.cookie-body p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cookie-body p a { color: var(--green-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } /* refuser aussi visible qu'accepter */
.cookie-actions .button { min-height: 42px; padding: 0 10px; font-size: 14px; }
.cookie-actions .button-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.cookie-custom { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 4px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 800; color: var(--green-dark); cursor: pointer; }
.cookie-custom:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
	.cookie-banner { left: 24px; right: auto; width: 400px; padding: 18px 20px 14px; }
	.cookie-banner::after { left: 48px; }
}
/* Le chien : couché sur le côté derrière le bord gauche (tourné de 90°, le haut de la tête vers l'écran) : seules ses deux oreilles dépassent ;
   quand la bulle est ouverte, il sort en entier sous elle. Au survol (ordinateur), il avance de 10 px : on voit ses yeux. */
.cookie-pet {
	position: fixed; z-index: 56; left: 4px; bottom: var(--pet-bottom); width: var(--pet-w); padding: 0; border: 0; background: none; cursor: pointer;
	transform: translateX(-100%) rotate(90deg) scale(.72); transform-origin: 50% 80%; /* au repos : plus petit */
	transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), translate .3s ease;
}
/* « translate » s'ajoute à la position cachée sans la remplacer : il revient toujours bien en place. */
@media (hover: hover) { .cookie-pet:not(.is-talking):hover { translate: 10px 0; } }
.cookie-pet::after { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; } /* zone tactile invisible devant les oreilles (au-dessus de la tête, donc à droite une fois tourné) */
.cookie-pet.is-talking { transform: none; } /* une bulle est ouverte : il sort en entier (cookies.js) */
.mascotte.cookie-pet-img { display: block; width: 100%; height: auto; margin: 0; filter: drop-shadow(0 8px 12px rgba(30, 41, 59, .22)); }
.cookie-pet[hidden] { display: none; }
/* Préférences détaillées : bulle au-dessus du chien, comme la bannière ; le contenu défile à l'intérieur. */
.cookie-prefs {
	position: fixed; z-index: 57; inset: auto 12px calc(var(--pet-bottom) + var(--pet-h) + 12px) 12px; width: auto; max-width: none; margin: 0; padding: 0;
	border: 1px solid #EDEFE8; border-radius: 24px; background: var(--bg); color: var(--ink); overflow: visible;
	box-shadow: 0 24px 60px rgba(30, 41, 59, .28); transform-origin: 40px 100%;
}
.cookie-prefs[open] { animation: cookie-in .4s cubic-bezier(.3, 1.4, .5, 1); }
.cookie-prefs::after { /* pointe de la bulle, vers la tête du chien */
	content: ""; position: absolute; left: 34px; bottom: -9px; width: 18px; height: 18px; rotate: 45deg;
	background: var(--bg); border-right: 1px solid #EDEFE8; border-bottom: 1px solid #EDEFE8; border-bottom-right-radius: 4px;
}
.cookie-prefs-scroll { max-height: calc(100dvh - var(--pet-bottom) - var(--pet-h) - 40px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 16px; border-radius: inherit; }
@media (min-width: 900px) {
	.cookie-prefs { right: auto; left: 24px; width: 460px; }
	.cookie-prefs::after { left: 48px; }
	.cookie-prefs-scroll { padding: 20px; }
}
.cookie-prefs-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.cookie-prefs-head h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 900; }
.cookie-prefs-intro { margin: 14px 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.cookie-cats { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cookie-cats li { padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.cookie-cats li > div, .cookie-cats label { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.cookie-cats li > div { cursor: default; }
.cookie-cats strong { font-size: 15px; font-weight: 900; }
.cookie-cats p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cookie-cats small { font-weight: 800; color: var(--green-dark); }
.cookie-always { font-size: 12px; font-weight: 800; color: var(--green); }
/* Interrupteur (case à cocher restylée). */
.cookie-switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 46px; height: 26px; margin: 0; border-radius: 999px; background: #D5DACD; cursor: pointer; transition: background .2s; }
.cookie-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(30, 41, 59, .2); transition: translate .2s; }
.cookie-switch:checked { background: var(--green); }
.cookie-switch:checked::after { translate: 20px 0; }
.cookie-switch:focus-visible { outline: 3px solid rgba(65, 115, 37, .35); outline-offset: 2px; }
.cookie-prefs-actions { display: grid; gap: 8px; margin-top: 16px; }
.cookie-prefs-actions .button { min-height: 46px; }
.cookie-prefs-actions .button-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
@media (min-width: 640px) { .cookie-prefs-actions { grid-template-columns: repeat(3, 1fr); } .cookie-prefs-actions .button { padding: 0 10px; font-size: 13px; } }
/* Lien « Gérer mes cookies » du pied de page (bouton qui ressemble aux autres liens). */
.footer-link-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.footer-link-btn:hover { text-decoration: underline; }



/* ---------- Chat du service client (inc/chat.php, assets/js/chat.js) ----------
   Bulle en bas à droite, en miroir du chien des cookies (même hauteur : au-dessus du menu du bas ou des barres
   d'achat) ; fenêtre au-dessus de la bulle (plein écran bas sur téléphone). */
.pc-chat { --chat-bottom: var(--pet-bottom); }
.pc-chat-btn { position: fixed; z-index: 41; right: 16px; bottom: calc(var(--chat-bottom) + 14px); width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; padding: 0; border: 3px solid var(--green); border-radius: 50%; background: var(--green-soft); color: #fff; box-shadow: 0 12px 28px rgba(47, 87, 25, .35), 0 2px 6px rgba(30, 41, 59, .12); cursor: pointer; transition: transform .2s, background .2s; }
.pc-chat-btn:hover { border-color: var(--green-dark); transform: translateY(-2px) rotate(-4deg); }
.pc-chat-btn-img { width: 50px; height: 56px; object-fit: contain; margin-top: 4px; pointer-events: none; } /* chien au casque du service client */
.pc-chat-btn:focus-visible { outline: 3px solid rgba(65, 115, 37, .35); outline-offset: 3px; }
.pc-chat-teaser { position: fixed; z-index: 41; right: 16px; bottom: calc(var(--chat-bottom) + 90px); display: flex; align-items: flex-start; max-width: 260px; border: 1px solid var(--line); border-radius: 18px 18px 6px 18px; background: #fff; box-shadow: 0 14px 34px rgba(30, 41, 59, .16); animation: pc-chat-in .25s ease-out; }
.pc-chat-teaser[hidden], .pc-chat.is-open .pc-chat-teaser { display: none; }
.pc-chat-teaser::after { content: ""; position: absolute; right: 24px; bottom: -7px; width: 12px; height: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; transform: rotate(45deg); } /* pointe vers la tête du chien */
.pc-chat-teaser-text { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 0; background: none; font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--ink); text-align: left; cursor: pointer; }
.pc-chat-teaser-text strong { font-size: 12px; font-weight: 800; color: var(--green-dark); }
.pc-chat-teaser-text strong[hidden] { display: none; }
.pc-chat-teaser-text span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pc-chat-teaser.is-reply { border-color: #CFE7BE; }
.pc-chat-teaser-x { position: absolute; top: 4px; left: -38px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); box-shadow: 0 6px 16px rgba(30, 41, 59, .14); cursor: pointer; } /* croix à l'extérieur, à gauche de la bulle */
.pc-chat-teaser-x:hover { color: var(--ink); }
.pc-chat-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #DC2626; color: #fff; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.pc-chat-badge[hidden] { display: none; }
.pc-chat-panel { position: fixed; z-index: 50; right: 16px; bottom: calc(var(--chat-bottom) + 84px); width: 370px; height: min(580px, calc(100dvh - var(--chat-bottom) - 120px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); box-shadow: 0 24px 60px rgba(30, 41, 59, .22); animation: pc-chat-in .22s ease-out; }
.pc-chat-panel[hidden] { display: none; }
.pc-chat-backdrop { display: none; position: fixed; inset: 0; z-index: 49; background: rgba(15, 23, 12, .38); animation: pc-chat-fade .25s ease-out; }
.pc-chat-grip { display: none; }
@keyframes pc-chat-sheet { from { transform: translateY(100%); } }
@keyframes pc-chat-fade { from { opacity: 0; } }
@keyframes pc-chat-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.pc-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.pc-chat-head .pc-chat-avatar { width: 46px; height: 46px; flex-shrink: 0; padding: 3px 3px 0; object-fit: contain; object-position: 50% 100%; border-radius: 50%; background: var(--green-soft); }
.pc-chat-head div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pc-chat-head strong { font-size: 16px; font-weight: 900; color: var(--ink); }
.pc-chat-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pc-chat-status i { width: 8px; height: 8px; border-radius: 50%; background: #A8A29E; }
.pc-chat-status.is-on i { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.pc-chat-close { display: flex; padding: 6px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 12px; }
.pc-chat-close:hover { background: var(--bg); color: var(--ink); }
.pc-chat-sound .is-off, .pc-chat.is-muted .pc-chat-sound .is-on { display: none; }
.pc-chat.is-muted .pc-chat-sound .is-off { display: block; }
.pc-chat-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; }
.pc-chat-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: #FFF7E6; border: 1px solid #F5DDB8; font-size: 13px; line-height: 1.45; color: #6B4A1C; }
.pc-chat-note[hidden] { display: none; }
.pc-chat-hello { margin: 0 0 12px; padding: 10px 12px; border-radius: 16px 16px 16px 6px; background: #fff; font-size: 14px; line-height: 1.45; color: var(--ink); max-width: 88%; }
.pc-chat-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pc-chat-msg { display: flex; flex-direction: column; max-width: 85%; }
.pc-chat-msg.is-me { align-self: flex-end; align-items: flex-end; }
.pc-chat-msg.is-shop { flex-direction: row; align-items: flex-end; gap: 8px; max-width: 92%; }
.pc-chat-ava { width: 30px; height: 30px; flex-shrink: 0; margin-bottom: 18px; padding: 2px 2px 0; object-fit: contain; object-position: 50% 100%; border-radius: 50%; background: var(--green-soft); } /* chien au casque, bas de la bulle */
.pc-chat-col { display: flex; flex-direction: column; min-width: 0; }
.pc-chat-hello-row { margin-bottom: 12px; }
.pc-chat-hello-row .pc-chat-ava { margin-bottom: 0; }
.pc-chat-hello-row .pc-chat-hello { margin: 0; max-width: none; }
.pc-chat-bubble { overflow: hidden; border-radius: 16px 16px 16px 6px; background: #fff; }
.pc-chat-msg.is-me .pc-chat-bubble { border-radius: 16px 16px 6px 16px; background: var(--green); color: #fff; }
.pc-chat-bubble p { margin: 0; padding: 9px 12px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-chat-bubble img { display: block; max-width: 100%; max-height: 220px; object-fit: cover; }
.pc-chat-msg time { margin: 3px 6px 0; font-size: 11px; color: var(--muted); }
.pc-chat-who { display: grid; gap: 8px; padding: 12px 14px 0; background: #fff; border-top: 1px solid var(--line); }
.pc-chat-who[hidden] { display: none; }
.pc-chat-who-intro { margin: 0; font-size: 13px; font-weight: 800; color: var(--ink); }
.pc-chat-who input[type="text"], .pc-chat-who input[type="email"] { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 14px; }
.pc-chat-consent { display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.pc-chat-consent input { flex-shrink: 0; margin-top: 2px; accent-color: var(--green); }
.pc-chat-consent a { color: var(--green-dark); text-decoration: underline; }
.pc-chat-form { padding: 10px 12px 12px; background: #fff; }
.pc-chat-who:not([hidden]) + .pc-chat-form { border-top: 0; }
.pc-chat-form { border-top: 1px solid var(--line); }
.pc-chat-form.is-busy { opacity: .6; pointer-events: none; }
.pc-chat-file { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px; border-radius: 12px; background: var(--bg); font-size: 12px; color: var(--muted); }
.pc-chat-file[hidden] { display: none; }
.pc-chat-file img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.pc-chat-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-chat-file button { display: flex; padding: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.pc-chat-error { margin: 0 0 8px; font-size: 12.5px; color: #B91C1C; }
.pc-chat-error[hidden] { display: none; }
.pc-chat-compose { display: flex; align-items: flex-end; gap: 6px; }
.pc-chat-attach { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 14px; color: var(--muted); cursor: pointer; }
.pc-chat-attach:hover { background: var(--bg); color: var(--green-dark); }
.pc-chat-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pc-chat-attach:focus-within { outline: 2px solid rgba(65, 115, 37, .35); }
.pc-chat-compose textarea { flex: 1; min-height: 42px; max-height: 200px; overflow-y: hidden; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font: inherit; font-size: 14px; line-height: 1.4; resize: none; }
.pc-chat-compose textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.pc-chat-send { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; padding: 0; border: 0; border-radius: 14px; background: var(--green); color: #fff; cursor: pointer; }
.pc-chat-send:hover { background: var(--green-dark); }
@media (max-width: 599px) {
	.pc-chat-btn { right: 12px; width: 58px; height: 58px; }
	.pc-chat-btn-img { width: 44px; height: 50px; }
	.pc-chat-teaser { right: 12px; bottom: calc(var(--chat-bottom) + 84px); max-width: min(260px, calc(100vw - 90px)); }
	.pc-chat.is-open .pc-chat-btn { display: none; }
	/* Téléphone : panneau qui monte du bas (poignée à glisser vers le bas pour fermer), voile derrière. */
	.pc-chat-panel { left: 0; right: 0; bottom: 0; width: auto; height: min(88dvh, 700px); border-width: 1px 0 0; border-radius: 26px 26px 0 0; animation: pc-chat-sheet .3s cubic-bezier(.2, .8, .2, 1); touch-action: auto; }
	.pc-chat-panel.is-dragging { animation: none; transition: none; }
	.pc-chat-grip { display: block; position: absolute; top: 7px; left: 50%; z-index: 1; width: 42px; height: 5px; margin-left: -21px; border-radius: 999px; background: #D6D9CF; }
	.pc-chat-head { padding-top: 20px; touch-action: none; }
	.pc-chat-form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
	.pc-chat.is-open .pc-chat-backdrop { display: block; }
	html.pc-chat-locked { overflow: hidden; }
	html.pc-chat-locked .cookie-pet { z-index: 40; } /* chat ouvert : le chien aux cookies passe derrière le panneau */
}
@media (prefers-reduced-motion: reduce) { .pc-chat-panel, .pc-chat-teaser, .pc-chat-backdrop { animation: none; } .pc-chat-btn { transition: none; } }

/* Mon compte > Mes messages (inc/chat.php) : une carte repliable par discussion, bulles comme dans le détail des commandes. */
.chat-hist-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.chat-hist-new { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--green); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.chat-hist-new:hover { background: var(--green-dark); }
.chat-hist-empty p { margin: 0; font-size: 14px; color: var(--muted); }
.chat-hist summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.chat-hist summary::-webkit-details-marker { display: none; }
.chat-hist-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-hist-title strong { font-size: 15px; font-weight: 900; }
.chat-hist-title small { font-size: 12.5px; color: var(--muted); }
.chat-hist[open] summary { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.chat-hist .ord-thread { margin: 0; }
.ord-msg-row { display: flex; align-items: flex-end; gap: 8px; }
.ord-msg.is-mine .ord-msg-row { justify-content: flex-end; }
.chat-hist-ava { width: 30px; height: 30px; flex-shrink: 0; padding: 2px 2px 0; object-fit: contain; object-position: 50% 100%; border-radius: 50%; background: var(--green-soft); }
.chat-hist-img { display: block; max-width: 220px; max-height: 200px; margin-bottom: 6px; border-radius: 12px; object-fit: cover; }

/* Boutique : « Meilleures ventes » en bento (inc/upsells.php). Téléphone : le n° 1 en grand, puis 2 × 2.
   Ordinateur : 4 colonnes × 2 lignes, le n° 1 occupe 2 × 2. */
.bento-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.bento-head h2 { display: flex; align-items: center; gap: 8px; }
.bento-head h2 .icon { color: var(--green); }
.bento-head p { margin: 0; font-size: 14px; color: var(--muted); }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bento-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--card); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.bento-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(30, 41, 59, .1); color: var(--ink); }
.bento-card--1 { grid-column: 1 / -1; flex-direction: row; border-color: #D5EBC8; box-shadow: inset 0 0 0 1px #D5EBC8; } /* fond blanc : les photos produit ont souvent un fond blanc */
.bento-rank { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .02em; }
.bento-card--1 .bento-rank { background: #F5B301; color: #3A2A00; }
.bento-img { position: relative; display: block; aspect-ratio: 1; background: #fff; }
.bento-card .pcard-tag { max-width: calc(100% - 16px); } /* toute la largeur (le numéro est en bas à droite) */
.bento-card--1 .bento-img { width: 44%; flex-shrink: 0; min-height: 170px; aspect-ratio: auto; background: transparent; }
.bento-img > img { position: absolute; top: 38px; right: 14px; bottom: 34px; left: 14px; width: calc(100% - 28px); height: calc(100% - 72px); max-width: none; max-height: none; object-fit: contain; } /* photo posée dans son cadre (Safari la laissait déborder à droite) */
.bento-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 14px; min-width: 0; }
.bento-card--1 .bento-body { justify-content: center; padding: 18px 18px 18px 4px; gap: 6px; }
.bento-body strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 800; line-height: 1.3; }
.bento-card--1 .bento-body strong { -webkit-line-clamp: 3; font-size: 18px; font-weight: 900; }
.bento-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--muted); }
.bento-price { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 900; color: var(--green-dark); }
.bento-price small { font-size: 11px; font-weight: 700; color: var(--muted); }
.bento-price .vip-chip { margin-bottom: 2px; }
.bento-price del { font-size: 12px; font-weight: 600; color: var(--muted); }
.bento-card--1 .bento-price { font-size: 20px; }
@media (min-width: 900px) {
	.bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 16px; }
	.bento-card--1 { grid-column: 1 / span 2; grid-row: 1 / span 2; flex-direction: column; }
	.bento-card--1 .bento-img { width: 100%; flex: 1; min-height: 280px; }
	.bento-card--1 .bento-body { padding: 4px 24px 24px; }
	.bento-card--1 .bento-body strong { font-size: 22px; }
	.bento-img { aspect-ratio: 4 / 3; }
}
/* N° 1 : couronne dorée posée de travers sur la première lettre, qui se balance et brille de temps en temps. */
.bento-card--1 .bento-body strong { margin: 0 -10px; padding: .8em 10px 0; } /* place pour la couronne (le titre reste limité à 3 lignes) */
.bento-crowned { position: relative; display: inline-block; }
.bento-crown { position: absolute; left: 50%; bottom: 72%; display: flex; color: #F5B301; filter: drop-shadow(0 2px 3px rgba(160, 110, 0, .35)); transform: translateX(-50%) rotate(-14deg); transform-origin: 50% 100%; animation: bento-crown 3.2s ease-in-out infinite; }
.bento-crown .icon { width: .95em; height: .95em; }
@keyframes bento-crown { 0%, 100% { transform: translateX(-50%) rotate(-14deg); } 40% { transform: translateX(-50%) translateY(-2px) rotate(-4deg); } 55% { filter: drop-shadow(0 0 6px rgba(255, 200, 40, .9)); } 70% { transform: translateX(-50%) rotate(-18deg); } }
@media (prefers-reduced-motion: reduce) { .bento-card { transition: none; } .bento-crown { animation: none; } }

/* Pastille « Mes messages » dans le menu de Mon compte : nouveaux messages de la boutique. */
.acc-count { min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: #DC2626; color: #fff; font-size: 11px; font-weight: 900; line-height: 20px; text-align: center; }
.acc-count[hidden] { display: none; }

/* Écrans tactiles : aucun champ sous 16 px, sinon Safari (iPhone) zoome toute la page quand on touche le champ.
   Le zoom à deux doigts reste possible. */
@media (hover: none) and (pointer: coarse) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em) !important; }
}

/* ---------- Invitation à installer l'application (inc/pwa.php, assets/js/install.js) ----------
   Panneau du bas, au-dessus du menu ; se déploie en guide (voile derrière, page figée). */
.app-install[hidden] { display: none; }
.app-install-backdrop { position: fixed; inset: 0; z-index: 58; background: rgba(15, 23, 12, .38); opacity: 0; pointer-events: none; transition: opacity .25s; }
.app-install.is-expanded .app-install-backdrop { opacity: 1; pointer-events: auto; }
.app-sheet { position: fixed; z-index: 59; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 90px); overflow: hidden; display: flex; flex-direction: column; padding: 8px 16px 16px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 -8px 40px rgba(30, 41, 59, .18); transform: translateY(130%); transition: transform .35s cubic-bezier(.2, .8, .2, 1), bottom .35s cubic-bezier(.2, .8, .2, 1), left .35s, right .35s, border-radius .35s; }
.app-install.is-in .app-sheet { transform: none; }
.app-install.is-expanded .app-sheet { left: 0; right: 0; bottom: 0; border-radius: 26px 26px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
html.app-locked { overflow: hidden; }
.app-grip { display: flex; justify-content: center; width: 100%; padding: 4px 0 10px; border: 0; background: none; cursor: pointer; }
.app-grip span { width: 42px; height: 5px; border-radius: 999px; background: #D6D9CF; }
.app-head { display: flex; align-items: center; gap: 12px; }
.app-head img { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; box-shadow: 0 4px 12px rgba(47, 87, 25, .2); }
.app-head div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.app-head strong { font-size: 16.5px; font-weight: 900; color: var(--ink); }
.app-head span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.app-x { align-self: flex-start; display: flex; padding: 4px; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; }
.app-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.app-main { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.app-later { padding: 12px 10px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.app-guide { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .35s cubic-bezier(.2, .8, .2, 1); }
.app-guide-in { min-height: 0; overflow: hidden; }
.app-install.is-expanded .app-guide { grid-template-rows: 1fr; overflow-y: auto; overscroll-behavior: contain; }
.app-install.is-expanded .app-guide-in { overflow: visible; }
.app-steps { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0; padding: 16px; list-style: none; border-radius: 20px; background: var(--bg); }
.app-steps[hidden] { display: none; }
.app-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.app-steps b { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; font-weight: 900; }
.app-key { display: inline-flex; align-items: center; gap: 5px; margin: 0 2px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-style: normal; font-weight: 800; white-space: nowrap; vertical-align: middle; }
.app-key .icon { width: 17px; height: 17px; color: #0A84FF; }
.app-note { margin: 12px 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) { .app-install { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .app-sheet, .app-guide, .app-install-backdrop { transition: none; } }

/* « Tirer pour actualiser » dans l'application installée (assets/js/pull-refresh.js) : rond vert qui descend,
   se remplit, puis tourne pendant le rechargement. */
.ptr { position: fixed; z-index: 80; top: calc(env(safe-area-inset-top) + 8px); left: 50%; width: 42px; height: 42px; padding: 6px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(30, 41, 59, .18); opacity: 0; transform: translate(-50%, -50px); pointer-events: none; }
.ptr.is-back { transition: transform .25s ease, opacity .25s ease; }
.ptr svg { display: block; width: 100%; height: 100%; }
.ptr circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.ptr-track { stroke: var(--green-soft); }
.ptr-arc { stroke: var(--green); stroke-dasharray: 94.25; stroke-dashoffset: 94.25; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke .2s; }
.ptr.is-ready .ptr-arc { stroke: var(--green-dark); }
.ptr.is-spin { opacity: 1; transition: transform .2s ease; }
.ptr.is-spin svg { animation: ptr-spin .7s linear infinite; }
.ptr.is-spin .ptr-arc { stroke-dashoffset: 60 !important; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ---------- « Trier et filtrer » (inc/filters.php, assets/js/filters.js) ---------- */
.filter-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.filter-btn .icon { color: var(--green); }
.filter-btn:hover { border-color: var(--green); }
.filter-btn b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11px; line-height: 20px; text-align: center; }
.filter-btn-short { display: none; }
@media (max-width: 599px) { .filter-btn { padding: 0 12px; font-size: 13px; } .filter-btn-long { display: none; } .filter-btn-short { display: inline; } }
.flt-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.flt-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 13px; font-weight: 800; }
.flt-pill .icon { color: var(--green); }
.flt-pill--all { padding: 0 14px; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.filter-sheet[open] { display: flex; }
.filter-sheet { flex-direction: column; height: min(88dvh, 760px); padding: 8px 0 0; overflow: hidden; }
.flt-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.filter-sheet .sheet-head { padding: 12px 20px 8px; }
.flt-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 16px; }
.flt-group { margin: 0 0 20px; padding: 0; border: 0; }
.flt-group legend { margin-bottom: 10px; padding: 0; font-size: 13px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.flt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flt-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.flt-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.flt-chip small { font-size: 12px; font-weight: 700; color: var(--muted); }
.flt-chip:has(input:checked) { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.flt-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(65, 115, 37, .3); }
.flt-chip.is-empty:not(:has(input:checked)) { opacity: .4; cursor: default; }
.flt-swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.flt-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.flt-switch + .flt-switch { margin-top: 8px; }
.flt-switch small { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.flt-switch input, .push-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.flt-switch i, .push-switch i { position: relative; width: 44px; height: 26px; flex-shrink: 0; border-radius: 999px; background: #D6D9CF; transition: background .2s; }
.flt-switch i::after, .push-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.flt-switch input:checked + i, .push-switch input:checked + i { background: var(--green); }
.flt-switch input:checked + i::after, .push-switch input:checked + i::after { transform: translateX(18px); }
.flt-switch input:focus-visible + i, .push-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(65, 115, 37, .3); }
.flt-foot { display: flex; align-items: center; gap: 12px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.flt-reset { padding: 12px 4px; color: var(--muted); font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.flt-apply { flex: 1; min-height: 50px; transition: opacity .15s; }
.flt-apply:disabled { opacity: .5; }
.flt-form.is-busy .flt-apply { opacity: .7; }
@media (min-width: 900px) { .filter-sheet { margin: auto; border-radius: 28px; height: min(80vh, 720px); } }

/* Notifications de l'application (inc/push.php, assets/js/push.js) : encart « Activer » et interrupteur de Mon compte. */
.push-offer { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 12px 12px 12px 14px; border: 1px solid #D6EFC9; border-radius: 18px; background: var(--green-soft); }
.push-offer[hidden], .push-switch[hidden] { display: none; }
.push-offer-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; color: var(--green); }
.push-offer-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.push-offer-text strong { font-size: 15px; font-weight: 800; color: var(--ink); }
.push-offer.is-done .push-offer-text { font-weight: 700; color: var(--green-dark); }
.push-offer-btn { min-height: 38px; padding: 0 16px; font-size: 14px; flex-shrink: 0; }
.push-offer-x { display: flex; padding: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.pc-chat .push-offer { margin: 10px 0 4px; }
.account-page .push-switch { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-weight: 400; cursor: pointer; } /* devant « .account-page label » (champs du compte) */
.push-switch .push-offer-icon { background: var(--green-soft); }
.push-switch input:disabled + i { opacity: .5; }
[data-push-stock].is-done { background: var(--green-soft); color: var(--green-dark); }

/* Messagerie de la boutique sur le site (inc/chat-shop.php) : même fenêtre que le chat client. */
.pc-shop-back { margin-right: -4px; }
.pc-shop-avail { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.pc-shop-avail input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pc-shop-avail i { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #D6D9CF; transition: background .2s; }
.pc-shop-avail i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s; }
.pc-shop-avail input:checked + i { background: #22C55E; }
.pc-shop-avail input:checked + i::after { transform: translateX(12px); }
.pc-shop-tabs { display: flex; gap: 6px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.pc-shop-tabs[hidden] { display: none; }
.pc-shop-tabs button { flex: 1; min-height: 34px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.pc-shop-tabs button.is-on { background: var(--green-soft); color: var(--green-dark); }
.pc-shop-threads { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pc-shop-row { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 44px 11px 12px; border: 1px solid #EDEFE8; border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.pc-shop-row:hover { border-color: #D6EFC9; }
.pc-shop-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pc-shop-row-top strong { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.pc-shop-row-top small { flex-shrink: 0; font-size: 12px; color: var(--muted); }
.pc-shop-row-last { overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.pc-shop-row.is-unread .pc-shop-row-last { font-weight: 700; color: var(--ink); }
.pc-shop-count { position: absolute; right: 12px; top: 50%; translate: 0 -50%; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #DC2626; color: #fff; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }
.pc-shop-here { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.pc-shop-none { padding: 24px 8px; font-size: 14px; color: var(--muted); text-align: center; }
.pc-shop-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.pc-shop-presence.is-on { font-weight: 700; color: #15803D; }
.pc-shop-status { flex-shrink: 0; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.pc-chat--shop .push-offer { margin: 0 0 12px; }
.pc-chat-form[hidden] { display: none; }

/* Aperçu des liens du site dans le chat (assets/js/chat-common.js). */
.pc-lcard { display: flex; gap: 10px; margin: 0 8px 8px; padding: 8px; border: 1px solid #E7E9E1; border-radius: 12px; background: #fff; color: #1E293B; text-decoration: none; }
.pc-lcard:first-child { margin-top: 8px; }
.pc-lcard img { width: 64px; height: 64px; flex-shrink: 0; object-fit: cover; border-radius: 8px; background: #ECFCE4; }
.pc-lcard-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-lcard-type { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #417325; }
.pc-lcard-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.pc-lcard-price { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; }
.pc-lcard-price s { font-size: 12px; color: #71717A; }
.pc-lcard-stock { font-size: 12px; font-weight: 700; color: #15803D; }
.pc-lcard-stock.is-out { color: #B45309; }
.pc-lcard-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.35; color: #5B6472; }
.pc-chat-bubble p a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }

/* Nos marques (page-nos-marques.php) : grille des logos. */
.brands-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 40px; padding: 0; list-style: none; }
@media (min-width: 700px) { .brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .brands-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.brand-card { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 14px 12px 16px; border: 1px solid #E9ECE3; border-radius: var(--radius); background: #fff; color: var(--ink); text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s; }
.brand-card:hover { transform: translateY(-3px); border-color: #D6EFC9; box-shadow: 0 12px 28px rgba(30, 41, 59, .08); }
.brand-card-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 96px; margin-bottom: 6px; }
.brand-card-logo img { max-width: 82%; max-height: 80px; width: auto; height: auto; object-fit: contain; }
.brand-card-word { font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--green-dark); }
.brand-card strong { font-size: 15px; font-weight: 800; }
.brand-card small { font-size: 13px; color: var(--muted); }

/* Marques : bande de logos qui défile de droite à gauche (inc/brands.php), arrêtée au survol. */
.bm { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bm-track { display: flex; width: max-content; animation: bm-scroll var(--bm-dur, 45s) linear infinite; }
.bm:hover .bm-track, .bm:focus-within .bm-track { animation-play-state: paused; }
.bm-list { display: flex; gap: 12px; margin: 0; padding: 4px 12px 4px 0; list-style: none; } /* marge droite = écart : la boucle tombe juste */
.bm-item { display: flex; align-items: center; justify-content: center; width: 124px; height: 64px; padding: 10px 14px; border: 1px solid #EDEFE8; border-radius: 16px; background: #fff; transition: border-color .2s, transform .2s, box-shadow .2s; }
.bm-item:hover { border-color: #D6EFC9; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(30, 41, 59, .08); }
.bm-item img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.bm-word { font-size: 17px; font-weight: 900; letter-spacing: -.01em; color: var(--green-dark); }
@keyframes bm-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.bm { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.bm-track { animation: none; }
	.bm-list[aria-hidden] { display: none; }
}
.mega-brands { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid #EDEFE8; }
.mega-brands .mega-panel-head { margin-top: 0; }
.mega-brands .mega-panel-head strong { font-size: 18px; }
.ss-brands { margin: 18px 0 4px; }
.ss-brands-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 10px; }
.ss-brands-head strong { font-size: 17px; font-weight: 900; }
.ss-brands-head a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; color: var(--green); }
.ss-brands .bm-item { width: 108px; height: 56px; }
.shop-brands .bento-head p a { font-weight: 800; color: var(--green); }
.shop-brands .bm { margin-top: 14px; }
.flt-logo { width: 34px; height: 20px; margin-left: -4px; object-fit: contain; } /* logo entier (pas recadré) */