/*
Theme Name: Saloum Shop 221
Theme URI: https://saloumshopsn.com
Author: Saloum Shop 221
Description: Thème bloc sur mesure de la boutique Saloum Shop 221 (Dakar). Couleurs, polices, textes, images et menus se modifient dans l'éditeur du site, sans code.
Version: 1.0.2611122218
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saloum-shop-221
Tags: block-theme, full-site-editing, e-commerce
*/
/* ===== CSS de la maquette (phase 2-3), inchangé ===== */
/* Saloum Shop 221 — maquette d'accueil (phase 2)
   Registre relevé sur la référence emox : une sans-serif géométrique, fond blanc froid,
   accent bleu marine / bleu roi, blocs arrondis encartés, forte densité. */

:root {
  --blanc: #FFFFFF;
  --nuage: #F2F4F8;
  --carte: #F2F3F6;
  --trait: #E5E8EF;
  --encre: #0B0D12;
  --texte: #2A2F3A;
  --gris: #6E7381;
  --rouge-fonce: #B3141B; /* rouge fonce du logo : boutons, etats actifs, surfaces sombres */
  --rouge: #D7191F;       /* rouge du logo : liens, etoiles, accents, nom de la boutique */
  --vert-vif: #08D557;
  --vert-fonce: #015940;
  --jaune: #FFD21F;
  --rayon: 10px;
  --rayon-s: 8px;
  --largeur: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font: 400 14px/1.5 "Plus Jakarta Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--encre); hyphens: none; text-wrap: balance; }
sup { font-size: .55em; font-weight: 600; margin-left: 2px; vertical-align: .55em; line-height: 0; }

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-plein { fill: currentColor; stroke: none; }

.enveloppe { width: 100%; max-width: calc(var(--largeur) + 48px); margin-inline: auto; padding-inline: 24px; }

/* ---------- Pilules ---------- */
.pilule {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 20px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pilule:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(110, 10, 15, .18); }
.pilule-rouge { background: var(--rouge-fonce); color: #fff; }
.pilule-blanche { background: #fff; color: var(--rouge-fonce); }
.pilule-noire { background: #0E1A12; color: #fff; }
.pilule-jaune { background: var(--jaune); color: #2B2100; height: 32px; padding: 0 18px; }

/* ---------- En-tête ---------- */
.entete { background: var(--blanc); position: relative; z-index: 5; }
.entete-haut { display: flex; align-items: center; gap: 28px; height: 76px; }
/* Logo du client : emblème S + chariot (image) et nom en capitales rouges, comme sur le logo fourni */
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo-embleme { height: 44px; width: auto; }
.logo-mot { font-size: 15.5px; font-weight: 800; letter-spacing: .02em; line-height: 1; color: var(--rouge); white-space: nowrap; }
.logo-mot b { font-weight: 800; }

.recherche { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 5px 0 16px; background: var(--nuage); border-radius: 999px; }
.recherche .ic-plein { width: 15px; height: 15px; color: #F08A8E; }
.recherche input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 13px; outline: none; }
.recherche input::placeholder { color: #8A8F9C; }
.recherche button { width: 32px; height: 32px; border-radius: 50%; background: var(--rouge); color: #fff; display: grid; place-items: center; }
.recherche button .ic { width: 17px; height: 17px; stroke-width: 2; }

.entete-outils { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 13px; color: var(--encre); }
.livraison { display: flex; align-items: center; gap: 8px; line-height: 1.25; }
.livraison small { display: block; font-size: 10.5px; color: var(--gris); }
.livraison b { font-weight: 600; font-size: 12.5px; }
.pays { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.pays .drapeau { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; }
.pays .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.panier, .compte { display: flex; align-items: center; gap: 7px; font-weight: 500; position: relative; }
.pastille { position: absolute; left: 12px; top: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--rouge); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }

.entete-nav { display: flex; align-items: center; gap: 22px; height: 46px; font-size: 12.5px; color: #3A3F4B; white-space: nowrap; }
.entete-nav a:hover { color: var(--rouge); }
.toutes { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--encre); font-size: 12.5px; }
.toutes .ic { width: 16px; height: 16px; }
.toutes .ic:last-child { width: 12px; height: 12px; stroke-width: 2.2; }
.sep { width: 1px; height: 18px; background: var(--trait); flex: none; }
.nav-liens { display: flex; gap: 22px; }
.nav-droite { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.bonnes-affaires { display: flex; align-items: center; gap: 7px; color: var(--rouge); font-weight: 600; font-size: 14px; }
.wa-nav { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--rouge-fonce); font-size: 13.5px; letter-spacing: -.02em; }
.wa-nav .ic { width: 17px; height: 17px; color: #1FAF54; }

/* ---------- Héros ---------- */
.hero { display: grid; grid-template-columns: 2.05fr 1fr; gap: 20px; margin-top: 4px; }
.carrousel { position: relative; border-radius: var(--rayon); overflow: hidden; min-height: 400px; }
.diapo {
  position: absolute; inset: 0; background: var(--fond); color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s;
}
.diapo.est-active { opacity: 1; visibility: visible; }
.diapo-photo {
  position: absolute; right: 0; top: 0; height: 100%; width: 62%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
.diapo-texte { position: relative; z-index: 1; height: 100%; max-width: 52%; padding: 52px 0 30px 52px; display: flex; flex-direction: column; align-items: flex-start; }
.diapo-texte .surtitre { font-size: 19px; font-weight: 500; letter-spacing: -.01em; opacity: .95; }
.diapo-texte h1, .diapo-texte h2 { color: #fff; font-size: 31px; line-height: 1.18; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.diapo-texte .accroche { font-size: 12.5px; line-height: 1.55; opacity: .85; margin-top: 12px; max-width: 290px; }
.diapo-texte .pilule { margin-top: 26px; }
.diapo-texte small { margin-top: auto; font-size: 10.5px; opacity: .7; }

.hero-cote { position: relative; border-radius: var(--rayon); overflow: hidden; background: #ECEDEF; min-height: 400px; display: block; }
.hero-cote img {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 68%; object-fit: cover; object-position: 50% 52%;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
.hero-cote .solde { position: absolute; left: 26px; top: 26px; color: var(--rouge-fonce); line-height: .9; }
.solde-mot { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.02em; }
.solde-jusqua { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 8px 0 2px; }
.solde-chiffre { display: block; font-size: 92px; font-weight: 800; letter-spacing: -.06em; color: var(--rouge); }
.solde-chiffre sup { font-size: 30px; vertical-align: 1.3em; margin-left: 2px; letter-spacing: 0; }
.hero-cote .pilule { position: absolute; left: 26px; bottom: 26px; }

.points { display: flex; justify-content: center; gap: 6px; margin: 18px 0 0; }
.points button { width: 7px; height: 7px; border-radius: 50%; background: #CDD2DC; transition: width .3s, background .3s; }
.points button.est-actif { background: var(--rouge-fonce); width: 18px; border-radius: 99px; }

/* ---------- Blocs ---------- */
.bloc { margin-top: 52px; }
.bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bloc-tete h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.voir-tout { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: var(--rouge); white-space: nowrap; }
.voir-tout .ic { width: 13px; height: 13px; stroke-width: 2.4; }

/* Catégories en cercles */
.cercles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; }
.cercle { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--encre); }
.cercle-img { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--carte); transition: transform .25s ease; }
.cercle-img img { width: 100%; height: 100%; object-fit: cover; }
.cercle:hover .cercle-img { transform: scale(1.04); }

/* Cartes produit */
.grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.produit { min-width: 0; }
.produit-visuel { position: relative; display: block; aspect-ratio: 1; border-radius: var(--rayon-s); background: var(--carte); overflow: hidden; }
.produit-visuel img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .35s ease; }
.produit:hover .produit-visuel img { transform: scale(1.05); }
.coeur { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: #9AA0AD; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.coeur .ic { width: 14px; height: 14px; stroke-width: 2; }
.coeur.est-actif { color: #E5484D; }
.coeur.est-actif .ic { fill: currentColor; }
.produit-nom { margin-top: 12px; font-size: 13px; font-weight: 500; line-height: 1.42; color: var(--encre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.84em; }
.note { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--gris); }
.etoiles { font-size: 13px; letter-spacing: 1.5px; line-height: 1; background: linear-gradient(90deg, var(--rouge) calc(var(--n) / 5 * 100%), #E6DCDD 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prix { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.prix strong { font-size: 15px; font-weight: 700; color: var(--encre); letter-spacing: -.01em; }
.prix s { font-size: 11.5px; color: #9BA0AC; }

/* Trio de bannières promo */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.promo { position: relative; aspect-ratio: .78; border-radius: var(--rayon); overflow: hidden; background: var(--fond); color: var(--encre-promo, #fff); display: block; }
.promo img {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 76%; object-fit: cover; object-position: 50% 60%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%);
          mask-image: linear-gradient(180deg, transparent 0, #000 26%);
  transition: transform .5s ease;
}
.promo:hover img { transform: scale(1.04); }
.promo-texte { position: relative; z-index: 1; padding: 30px 28px 0; }
.promo-texte .surtitre { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.promo-texte h3 { color: inherit; font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.035em; margin-top: 8px; }
.promo-texte p { font-size: 12.5px; margin-top: 10px; opacity: .9; max-width: 240px; }
.promo .pilule { position: absolute; left: 24px; bottom: 24px; z-index: 1; height: 32px; padding: 0 16px; font-size: 12px; }

/* Panneaux de sous-catégories */
.panneau { background: var(--nuage); border-radius: var(--rayon); padding: 22px 24px 24px; margin-top: 20px; }
.panneau .bloc-tete { margin-bottom: 18px; }
.panneau .bloc-tete h2 { font-size: 20px; }
.sous-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.sous-cat { background: #fff; border-radius: var(--rayon-s); overflow: hidden; display: flex; flex-direction: column; text-align: center; font-size: 13px; font-weight: 500; color: var(--encre); transition: box-shadow .2s ease, transform .2s ease; }
.sous-cat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(110, 10, 15, .08); }
.sous-cat span:first-child { display: block; aspect-ratio: 1.05; margin: 12px 12px 0; overflow: hidden; border-radius: 6px; }
.sous-cat img { width: 100%; height: 100%; object-fit: cover; }
.sous-cat span:last-child { padding: 14px 8px 16px; }

/* Grande bannière vert profond */
.banniere-verte { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 360px; margin-top: 56px; border-radius: var(--rayon); overflow: hidden; background: var(--vert-fonce); color: #fff; }
.banniere-verte .visuel { position: relative; align-self: stretch; min-height: 360px; }
.arche { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 430px; height: 330px; border-radius: 215px 215px 0 0; border: 2px solid rgba(255,255,255,.16); border-bottom: 0; background: rgba(255,255,255,.05); }
.arche::before { content: ""; position: absolute; inset: 22px 22px 0; border-radius: 200px 200px 0 0; border: 1.5px solid rgba(255,255,255,.10); border-bottom: 0; }
.banniere-verte .visuel img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 310px; height: 296px; object-fit: cover; object-position: 50% 40%; border-radius: 155px 155px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.28); }
.banniere-verte .texte { position: relative; padding: 44px 56px 30px 20px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; height: 100%; }
.banniere-verte h2 { color: #fff; font-size: 46px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; }
.ruban {
  margin-top: 18px; padding: 8px 38px; font-size: 20px; font-weight: 700; color: #04382A;
  background: #2EE08A;
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}
.banniere-verte .pilule { margin-top: 18px; }
.banniere-pied { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 22px; font-size: 11px; opacity: .92; }
.puces { display: flex; gap: 6px; }
.puce { white-space: nowrap; height: 22px; padding: 0 9px; border-radius: 5px; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; }
.puce-especes { background: #E8F7EE; color: #0B5D35; }
.puce-wave { background: #1DC8F2; color: #0A2540; }
.puce-om { background: #FF7900; color: #fff; }

/* Bande vert vif, cartes qui débordent */
.bande { position: relative; margin-top: 56px; padding-bottom: 0; }
.bande-fond { position: relative; height: 340px; border-radius: var(--rayon); background: var(--vert-vif); overflow: hidden; padding: 34px 40px; }
.bande-fond h2 { color: #08240F; font-size: 32px; line-height: 1.12; font-weight: 700; letter-spacing: -.03em; max-width: 520px; }
.bande-fond p { margin-top: 10px; font-size: 13px; color: #0B3A18; max-width: 520px; }
.bande-fond .pilule { position: absolute; right: 40px; top: 46px; }
.bande-deco { position: absolute; right: 230px; top: -10px; width: 220px; height: 220px; color: rgba(255,255,255,.45); }
.bande-deco .ic { width: 100%; height: 100%; stroke-width: .9; }
.bande-cartes { position: relative; margin: -150px 40px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.bande-cartes .sous-cat { box-shadow: 0 14px 30px rgba(6, 60, 25, .10); }

/* Mosaïque WhatsApp */
.mosaique { position: relative; margin-top: 56px; border-radius: var(--rayon); overflow: hidden; padding: 2px; background: linear-gradient(90deg, #F59A9E, #F7D774, #9BE6B8, #F59A9E); }
.mosaique-grille { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: 150px; gap: 4px; border-radius: 9px; overflow: hidden; background: #fff; }
.mosaique-grille img { width: 100%; height: 100%; object-fit: cover; }
.mosaique-voile { position: absolute; inset: 2px; border-radius: 9px; background: radial-gradient(ellipse 42% 58% at 50% 50%, rgba(255,255,255,1) 0, rgba(255,255,255,.96) 40%, rgba(255,255,255,0) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mosaique-logo { width: 96px; height: auto; }
.mosaique-voile p { margin-top: 6px; font-size: 13px; color: var(--gris); }
.wa-champ { margin-top: 20px; width: min(440px, 80%); height: 48px; border-radius: 999px; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 18px; box-shadow: 0 0 0 1.5px #E8DFE0, 0 10px 30px rgba(110, 10, 15, .12); font-size: 13px; color: #8A8F9C; text-align: left; }
.wa-champ span { flex: 1; }
.wa-champ b { height: 36px; padding: 0 16px; border-radius: 999px; background: #1FAF54; color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.wa-champ b .ic { width: 16px; height: 16px; }

/* ---------- Pied de page ---------- */
.pied { margin-top: 72px; background: var(--nuage); padding: 36px 0 22px; font-size: 12px; color: #4B5160; }
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--rayon-s); padding: 18px 20px; }
.service .ic { width: 28px; height: 28px; stroke-width: 1.4; color: var(--rouge-fonce); }
.service b { display: block; font-size: 14px; font-weight: 600; color: var(--encre); }
.service small { font-size: 11px; color: var(--gris); }
.pied-colonnes { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 32px; margin-top: 44px; }
.pied h4 { margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--encre); }
.pied .pied-pays-titre { margin-top: 22px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied ul a:hover { color: var(--rouge); }
.pays-pied { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; background: #fff; border-radius: 6px; padding: 8px 12px; font-weight: 600; color: var(--encre); }
.pays-pied .drapeau { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; }
.pied-bas { display: grid; grid-template-columns: 1.1fr 2fr 1fr; gap: 32px; align-items: end; margin-top: 36px; }
.pied-bas h4 { margin-bottom: 10px; }
.contact-lignes { display: grid; gap: 4px; }
.contact-lignes b { color: var(--encre); font-weight: 600; }
.reseaux { display: flex; gap: 8px; }
.reseaux a { width: 32px; height: 32px; border-radius: 50%; background: #3F4555; color: #fff; display: grid; place-items: center; }
.reseaux .ic { width: 16px; height: 16px; }
.reseaux a:hover { background: var(--rouge-fonce); }
.paiements { text-align: center; }
.paiements .puces { justify-content: center; }
.paiements .puce { height: 26px; padding: 0 12px; font-size: 12px; }
.mentions { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 18px; border-top: 1px solid #E1E5EE; font-size: 11px; color: var(--gris); }
.mentions nav { display: flex; gap: 24px; }

/* Bouton WhatsApp flottant */
.wa-flottant { position: fixed; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 20; width: 54px; height: 54px; border-radius: 50%; background: #1FAF54; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(16, 120, 60, .35); }
.wa-flottant .ic { width: 28px; height: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .livraison, .pays { display: none; }
  .nav-liens { overflow-x: auto; scrollbar-width: none; }
  .nav-droite .sep, .wa-nav { display: none; }
  .cercles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied-colonnes { grid-template-columns: repeat(2, 1fr); }
  .services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .entete-haut { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 10px; gap: 12px 16px; }
  .recherche { order: 3; flex-basis: 100%; max-width: none; }
  .compte span { display: none; }
  .logo-embleme { height: 38px; }
  .logo-mot { font-size: 13px; }
  .entete-nav { gap: 14px; height: 44px; }
  .toutes span, .nav-droite { display: none; }
  .nav-liens { gap: 18px; }
  .hero { grid-template-columns: 1fr; }
  .carrousel { min-height: 500px; }
  .diapo-texte { max-width: none; padding: 26px 24px 0; }
  .diapo-texte h1, .diapo-texte h2 { font-size: 25px; }
  .diapo-texte .accroche { margin-top: 8px; }
  .diapo-texte .pilule { margin-top: 16px; }
  .diapo-texte small { display: none; }
  .diapo-photo { top: auto; bottom: 0; width: 100%; height: 54%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%); mask-image: linear-gradient(180deg, transparent 0, #000 10%); }
  .hero-cote { min-height: 230px; }
  .hero-cote img { left: auto; top: 0; width: 58%; height: 100%; object-fit: contain; object-position: 50% 45%; -webkit-mask-image: none; mask-image: none; }
  .hero-cote .solde { left: 22px; top: 20px; }
  .solde-mot { font-size: 30px; }
  .solde-chiffre { font-size: 60px; }
  .solde-chiffre sup { font-size: 22px; }
  .hero-cote .pilule { left: 22px; right: auto; bottom: 20px; }
  .grille, .sous-cats, .bande-cartes, .trio { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; gap: 12px; margin-inline: -24px; padding-inline: 24px; }
  .grille > *, .sous-cats > *, .bande-cartes > * { flex: 0 0 44%; scroll-snap-align: start; }
  .trio > * { flex: 0 0 78%; scroll-snap-align: start; }
  .bande-cartes { margin: -120px -24px 0; }
  .bande-fond { height: 330px; padding: 26px 24px; }
  .bande-fond h2 { font-size: 24px; }
  .bande-fond .pilule { position: static; margin-top: 16px; }
  .bande-deco { display: none; }
  .banniere-verte { grid-template-columns: 1fr; }
  .banniere-verte .visuel { min-height: 280px; order: 2; }
  .arche { width: 330px; height: 260px; }
  .banniere-verte .visuel img { width: 240px; height: 230px; }
  .banniere-verte .texte { align-items: flex-start; text-align: left; padding: 32px 24px 8px; }
  .banniere-verte h2 { font-size: 32px; }
  .ruban { font-size: 15px; padding: 7px 28px; }
  .banniere-pied { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mosaique-grille { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; }
  .mosaique-grille img:nth-child(n+13) { display: none; }
  .mosaique-voile { background: radial-gradient(ellipse 80% 55% at 50% 50%, #fff 0, rgba(255,255,255,.95) 45%, rgba(255,255,255,0) 100%); }
  .pied-bas { grid-template-columns: 1fr; align-items: start; }
  .paiements { text-align: left; }
  .paiements .puces { justify-content: flex-start; }
  .mentions { flex-direction: column; }
}
@media (max-width: 480px) {
  .cercles { gap: 12px; }
  .cercle { font-size: 11.5px; }
  .services { grid-template-columns: 1fr; }
  .pied-colonnes { gap: 28px 20px; }
  .bloc-tete h2 { font-size: 19px; }
}

/* =====================================================================
   PAGES INTERNES (phase 3) — mêmes jetons, aucun nouveau registre
   ===================================================================== */

.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; font-size: 12px; color: var(--gris); }
.fil a:hover { color: var(--rouge); }
.fil .ic { width: 12px; height: 12px; stroke-width: 2.2; color: #A3A8B4; }
.fil [aria-current] { color: var(--encre); font-weight: 500; }
.page-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 12px 0 24px; }
.page-tete h1 { font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.page-tete p { margin-top: 6px; font-size: 13.5px; color: var(--gris); max-width: 640px; }

.bandeau-info { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 36px; margin-top: 4px; padding: 12px 20px; border-radius: var(--rayon); background: var(--nuage); font-size: 12.5px; }
.bandeau-info span { display: inline-flex; align-items: center; gap: 8px; }
.bandeau-info .ic { width: 18px; height: 18px; color: var(--rouge-fonce); }

/* ---------- Boutique ---------- */
.puces-cat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.puce-cat { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait); background: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--texte); white-space: nowrap; }
.puce-cat small { font-size: 11px; color: var(--gris); }
.puce-cat:hover { border-color: var(--rouge); color: var(--rouge); }
.puce-cat.est-actif { background: var(--rouge-fonce); border-color: var(--rouge-fonce); color: #fff; }
.puce-cat.est-actif small { color: rgba(255,255,255,.7); }

.boutique { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
.filtres { position: sticky; top: 16px; display: grid; gap: 14px; }
.filtre { background: var(--nuage); border-radius: var(--rayon); padding: 18px; }
.filtre h3 { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.filtre ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.case { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.case input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0; flex: none; border-radius: 5px; border: 1.5px solid #C5CBD7; background: #fff; display: grid; place-items: center; }
.case input:checked { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.case input:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.case small { margin-left: auto; font-size: 11.5px; color: var(--gris); }
.prix-plage { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gris); }
.prix-plage input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--trait); border-radius: 8px; background: #fff; font-size: 13px; }
.filtre .pilule { width: 100%; height: 34px; margin-top: 12px; }
.tailles { display: flex; flex-wrap: wrap; gap: 6px; }
.taille { display: inline-grid; place-items: center; min-width: 40px; height: 36px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--trait); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--encre); }
.taille:hover { border-color: var(--rouge); }
.taille.est-actif { background: var(--rouge-fonce); border-color: var(--rouge-fonce); color: #fff; }
.taille[disabled] { background: var(--nuage); color: #B6BBC6; text-decoration: line-through; cursor: not-allowed; }

.barre-outils { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; font-size: 13px; color: var(--gris); }
.barre-outils b { color: var(--encre); }
.tri { display: inline-flex; align-items: center; gap: 8px; }
.tri select, .champ select {
  appearance: none; -webkit-appearance: none; height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--trait); border-radius: 8px; font-size: 13px; color: var(--encre);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7381' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 14px;
}
.bouton-filtres { display: none; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait); align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--encre); }
.bouton-filtres .ic { width: 16px; height: 16px; }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 34px; }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 44px; }
.pagination a, .pagination span { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; background: var(--nuage); font-size: 13px; font-weight: 600; color: var(--encre); }
.pagination .est-actif { background: var(--rouge-fonce); color: #fff; }
.pagination .ic { width: 16px; height: 16px; stroke-width: 2.2; }

/* ---------- Fiche produit ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 52px; align-items: start; margin-top: 18px; }
.galerie { position: sticky; top: 16px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
.galerie-vignettes { display: grid; gap: 10px; align-content: start; }
.vignette { aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: 8px; border: 2px solid transparent; background: var(--carte); }
.vignette img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.vignette.est-actif { border-color: var(--rouge-fonce); }
.galerie-principale { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--rayon); background: var(--carte); }
.galerie-principale img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: 0; transition: opacity .35s ease; }
.galerie-principale img.est-active { opacity: 1; }
.galerie-principale .coeur { top: 16px; right: 16px; width: 38px; height: 38px; z-index: 1; }
.galerie-principale .coeur .ic { width: 18px; height: 18px; }

.fiche-info .surtitre-lien { font-size: 12px; font-weight: 600; color: var(--rouge); }
.fiche-info h1 { margin-top: 8px; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.fiche-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 12px; color: var(--gris); }
.fiche-meta .etoiles { font-size: 14px; }
.en-stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #12804A; }
.en-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1FAF54; }
.fiche-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--trait); }
.fiche-prix strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.fiche-prix s { font-size: 15px; color: #9BA0AC; }
.economie { padding: 3px 8px; border-radius: 6px; background: #FDECEC; font-size: 12px; font-weight: 700; color: var(--rouge); }
.fiche-accroche { margin-top: 18px; font-size: 14px; line-height: 1.7; }
.option { margin-top: 22px; }
.option-tete { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; }
.option-tete b { font-weight: 600; color: var(--encre); }
.option-tete a { font-size: 12px; font-weight: 600; color: var(--rouge); }
.achat { display: flex; gap: 12px; margin-top: 24px; }
.quantite { display: inline-flex; align-items: center; height: 46px; padding: 0 4px; border: 1px solid var(--trait); border-radius: 999px; flex: none; }
.quantite button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--encre); }
.quantite button:hover { background: var(--nuage); }
.quantite .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.quantite input { width: 32px; border: 0; background: transparent; text-align: center; font-size: 14px; font-weight: 700; -moz-appearance: textfield; }
.quantite input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pilule-grande { flex: 1; height: 46px; padding: 0 26px; font-size: 14px; }
.pilule-wa { width: 100%; margin-top: 12px; height: 46px; font-size: 14px; background: #fff; color: #128C46; box-shadow: inset 0 0 0 1.5px #1FAF54; }
.pilule-wa .ic, .pilule-verte .ic { width: 18px; height: 18px; }
.pilule-verte { background: #1FAF54; color: #fff; }
.garanties { list-style: none; display: grid; gap: 14px; margin: 24px 0 0; padding: 18px 20px; border-radius: var(--rayon); background: var(--nuage); font-size: 13px; }
.garanties li { display: flex; align-items: flex-start; gap: 12px; }
.garanties .ic { width: 22px; height: 22px; margin-top: 1px; stroke-width: 1.5; color: var(--rouge-fonce); }
.garanties b { display: block; font-weight: 600; color: var(--encre); }
.garanties small { font-size: 12px; color: var(--gris); }

.onglets { margin-top: 64px; }
.onglets-tete { display: flex; gap: 28px; border-bottom: 1px solid var(--trait); overflow-x: auto; scrollbar-width: none; }
.onglet { margin-bottom: -1px; padding: 0 0 14px; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 600; color: var(--gris); white-space: nowrap; }
.onglet.est-actif { color: var(--encre); border-color: var(--rouge-fonce); }
.panneau-onglet { display: none; max-width: 820px; padding-top: 26px; font-size: 14px; line-height: 1.75; }
.panneau-onglet.est-actif { display: block; }
.panneau-onglet p + p, .panneau-onglet p + ul, .panneau-onglet ul + p { margin-top: 12px; }
.panneau-onglet ul { margin: 12px 0 0; padding-left: 18px; }
.panneau-onglet li + li { margin-top: 4px; }
.caracteristiques { display: grid; grid-template-columns: 180px 1fr; margin: 20px 0 0; border-top: 1px solid var(--trait); font-size: 13px; }
.caracteristiques dt, .caracteristiques dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.caracteristiques dt { color: var(--gris); }
.caracteristiques dd { font-weight: 500; color: var(--encre); }
/* Avis clients : formulaire sur chaque fiche (dans WordPress : formulaire d'avis natif de WooCommerce) */
.avis-zone { display: grid; gap: 16px; max-width: 680px; }
.avis-intro b { display: block; font-size: 15px; color: var(--encre); }
.avis-intro span { display: block; margin-top: 2px; font-size: 13px; color: var(--gris); }
.form-avis { display: grid; gap: 18px; padding: 22px 24px; border-radius: var(--rayon); background: var(--nuage); }
.form-avis .pilule { justify-self: start; }
.choix-note { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix-note legend { margin-bottom: 6px; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--encre); }
.etoiles-choix { position: relative; display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.etoiles-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.etoiles-choix label { font-size: 28px; line-height: 1; color: #D9DCE3; cursor: pointer; transition: color .15s; }
.etoiles-choix input:checked ~ label, .etoiles-choix label:hover, .etoiles-choix label:hover ~ label { color: var(--rouge); }
.etoiles-choix input:focus-visible + label { outline: 2px solid var(--rouge); outline-offset: 2px; border-radius: 4px; }
.avis-zone .message-ok { margin-top: 0; }

/* ---------- Panier et commande ---------- */
.panier-page, .commande { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; }
.lignes { border-top: 1px solid var(--trait); }
.ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; grid-template-areas: "v t q p"; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--trait); }
.ligne-visuel { grid-area: v; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--carte); }
.ligne-visuel img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.ligne-texte { grid-area: t; }
.ligne h3 { font-size: 14px; font-weight: 600; line-height: 1.4; }
.ligne-detail { margin-top: 4px; font-size: 12px; color: var(--gris); }
.ligne-retirer { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12px; color: var(--gris); }
.ligne-retirer .ic { width: 15px; height: 15px; }
.ligne-retirer:hover { color: #C8323B; }
.ligne .quantite { grid-area: q; height: 40px; }
.ligne .quantite button { width: 30px; height: 30px; }
.ligne-prix { grid-area: p; min-width: 110px; text-align: right; }
.ligne-prix strong { display: block; font-size: 15px; color: var(--encre); }
.ligne-prix s { font-size: 11.5px; color: #9BA0AC; }
.panier-suite { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; font-size: 13px; color: var(--gris); }
.lien-retour { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--rouge); }
.lien-retour .ic { width: 15px; height: 15px; stroke-width: 2.2; }

.resume { position: sticky; top: 16px; padding: 24px; border-radius: var(--rayon); background: var(--nuage); }
.resume h2 { margin-bottom: 14px; font-size: 18px; font-weight: 700; }
.resume-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.resume-ligne span:last-child { font-weight: 600; color: var(--encre); text-align: right; }
.resume-ligne .gratuit { color: #12804A; }
.resume-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 16px; border-top: 1px solid #DDE2EC; }
.resume-total span { font-size: 14px; font-weight: 600; color: var(--encre); }
.resume-total strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.resume .pilule-grande { width: 100%; margin-top: 20px; height: 48px; }
.resume-note { margin-top: 16px; font-size: 12px; line-height: 1.55; color: var(--gris); }
.resume .puces { margin-top: 10px; }
.code-promo { display: flex; gap: 8px; margin-top: 14px; }
.code-promo input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--trait); border-radius: 999px; background: #fff; font-size: 13px; }
.code-promo button { height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rouge-fonce); font-size: 12.5px; font-weight: 600; color: var(--rouge-fonce); }
.resume-produits { display: grid; gap: 14px; margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid #DDE2EC; }
.mini { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 12.5px; }
.mini-visuel { position: relative; aspect-ratio: 1; border-radius: 8px; background: #fff; }
.mini-visuel img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; mix-blend-mode: multiply; }
.mini-visuel b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--rouge-fonce); color: #fff; font-size: 10px; display: grid; place-items: center; }
.mini span { font-weight: 500; line-height: 1.35; color: var(--encre); }
.mini small { display: block; font-weight: 400; color: var(--gris); }
.mini strong { font-size: 13px; color: var(--encre); }

.etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 26px; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.etape { display: inline-flex; align-items: center; gap: 8px; }
.etape i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--nuage); font-style: normal; font-size: 11.5px; color: var(--gris); }
.etape.est-fait i { background: #E3F6EA; color: #12804A; }
.etape.est-fait i .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.etape.est-actif { color: var(--encre); }
.etape.est-actif i { background: var(--rouge-fonce); color: #fff; }
.etapes-trait { width: 40px; height: 1px; background: var(--trait); }
.carte-form { padding: 24px; border: 1px solid var(--trait); border-radius: var(--rayon); }
.carte-form + .carte-form { margin-top: 18px; }
.carte-form h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 17px; font-weight: 700; }
.carte-form h2 i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--rouge-fonce); font-style: normal; font-size: 12px; color: #fff; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: grid; gap: 6px; align-content: start; font-size: 12.5px; font-weight: 600; color: var(--encre); }
.champ-large { grid-column: 1 / -1; }
.champ small { font-weight: 400; color: var(--gris); }
.champ input, .champ select, .champ textarea { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--trait); border-radius: 8px; background-color: #fff; font-size: 13.5px; font-weight: 400; color: var(--encre); }
.champ select { padding-right: 34px; }
.champ textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .code-promo input:focus, .prix-plage input:focus { outline: none; border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(215, 25, 31, .12); }
.champ-tel { display: flex; }
.champ-tel span { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--trait); border-right: 0; border-radius: 8px 0 0 8px; background: var(--nuage); font-size: 13px; font-weight: 600; }
.champ-tel .drapeau { width: 16px; height: 16px; border-radius: 50%; overflow: hidden; }
.champ-tel input { border-radius: 0 8px 8px 0; }
.choix-paiement { display: grid; gap: 10px; }
.choix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--trait); border-radius: var(--rayon-s); font-size: 13px; cursor: pointer; }
.choix input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; border: 1.5px solid #C5CBD7; display: grid; place-items: center; }
.choix input:checked { border-color: var(--rouge-fonce); }
.choix input:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rouge-fonce); }
.choix:has(input:checked) { border-color: var(--rouge-fonce); background: #FFF6F6; box-shadow: 0 0 0 1px var(--rouge-fonce); }
.choix b { display: block; font-size: 13.5px; font-weight: 600; color: var(--encre); }
.choix small { font-size: 12px; color: var(--gris); }
.confiance { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--gris); }
.confiance .ic { width: 16px; height: 16px; color: #12804A; }

/* ---------- Compte ---------- */
.compte-page { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.carte-compte { padding: 30px; border: 1px solid var(--trait); border-radius: var(--rayon); }
.carte-compte h2 { font-size: 20px; font-weight: 700; }
.carte-compte > p { margin-top: 6px; font-size: 13px; color: var(--gris); }
.carte-compte form { display: grid; gap: 16px; margin-top: 22px; }
.carte-compte .pilule { width: 100%; height: 46px; font-size: 14px; }
.ligne-options { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; }
.ligne-options a { font-weight: 600; color: var(--rouge); }
.carte-compte-nuage { border-color: transparent; background: var(--nuage); }
.avantages { list-style: none; display: grid; gap: 12px; margin: 22px 0 0; padding: 0; font-size: 13px; }
.avantages li { display: flex; align-items: center; gap: 10px; }
.avantages .ic { width: 18px; height: 18px; stroke-width: 2.2; color: #12804A; }

/* ---------- À propos ---------- */
.apropos-hero { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 420px; margin-top: 18px; overflow: hidden; border-radius: var(--rayon); background: linear-gradient(100deg, #6E0A0F 0%, #B3141B 70%, #D7191F 100%); color: #fff; }
.apropos-hero .texte { display: flex; flex-direction: column; justify-content: center; padding: 56px; }
.apropos-hero .surtitre { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.apropos-hero h1 { margin-top: 12px; font-size: 46px; line-height: 1.04; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.apropos-hero p { max-width: 460px; margin-top: 18px; font-size: 14.5px; line-height: 1.7; opacity: .9; }
.apropos-hero .visuel { position: relative; }
.apropos-hero .visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.recit { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; margin-top: 64px; }
.recit h2 { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.recit-texte { font-size: 14.5px; line-height: 1.8; }
.recit-texte p + p { margin-top: 14px; }
.engagements { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.engagement { padding: 24px; border-radius: var(--rayon); background: var(--nuage); }
.engagement .ic { width: 30px; height: 30px; stroke-width: 1.4; color: var(--rouge-fonce); }
.engagement h3 { margin-top: 16px; font-size: 15px; font-weight: 700; }
.engagement p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--gris); }
.appel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 34px 38px; border-radius: var(--rayon); background: var(--vert-fonce); color: #fff; }
.appel h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.appel p { margin-top: 6px; font-size: 13.5px; opacity: .85; }
.appel .boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.appel .pilule { height: 44px; padding: 0 22px; }

/* ---------- Contact ---------- */
.contact-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: start; }
.coordonnees { display: grid; gap: 14px; }
.coordonnee { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: var(--rayon); background: var(--nuage); }
.rond { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--rouge-fonce); }
.rond .ic { width: 21px; height: 21px; }
.rond-wa { background: #1FAF54; color: #fff; }
.coordonnee b { display: block; font-size: 14px; color: var(--encre); }
.coordonnee span { display: block; margin-top: 2px; font-size: 13px; color: var(--gris); }
.coordonnee a { font-size: 13.5px; font-weight: 600; color: var(--rouge); }
.coordonnee .reseaux { margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.faq-groupe + .faq-groupe { margin-top: 36px; }
.faq-groupe h2 { margin-bottom: 12px; font-size: 19px; font-weight: 700; scroll-margin-top: 20px; }
.question { border: 1px solid var(--trait); border-radius: var(--rayon-s); background: #fff; }
.question + .question { margin-top: 10px; }
.question summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--encre); }
.question summary::-webkit-details-marker { display: none; }
.question summary .ic { width: 18px; height: 18px; flex: none; stroke-width: 2.2; color: var(--gris); transition: transform .2s ease; }
.question[open] { border-color: #F1C6C8; background: #FFFAFA; }
.question[open] summary .ic { transform: rotate(45deg); color: var(--rouge-fonce); }
.question > div { padding: 0 20px 18px; font-size: 13.5px; line-height: 1.7; }
.aide { position: sticky; top: 16px; padding: 26px; border-radius: var(--rayon); background: var(--nuage); }
.aide h3 { font-size: 17px; font-weight: 700; }
.aide p { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--gris); }
.aide .pilule { width: 100%; height: 44px; margin-top: 12px; }
.aide .pilule + .pilule { margin-top: 10px; }

/* ---------- Pages de texte (légales) ---------- */
.texte-page { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.sommaire { position: sticky; top: 16px; display: grid; gap: 4px; padding: 18px; border-radius: var(--rayon); background: var(--nuage); font-size: 13px; }
.sommaire h3 { margin: 0 0 8px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.sommaire a { padding: 9px 10px; border-radius: 8px; font-weight: 500; color: var(--texte); }
.sommaire a:hover { background: #fff; }
.sommaire a[aria-current] { background: #fff; font-weight: 700; color: var(--rouge-fonce); box-shadow: 0 1px 2px rgba(110, 10, 15, .06); }
.texte-legal { max-width: 760px; font-size: 14.5px; line-height: 1.8; }
.texte-legal h2 { margin: 34px 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p + p, .texte-legal p + ul, .texte-legal ul + p { margin-top: 12px; }
.texte-legal ul { margin: 0; padding-left: 20px; }
.texte-legal li + li { margin-top: 8px; }
.texte-legal li::marker { color: var(--rouge); }
.texte-legal strong { color: var(--encre); }
.texte-legal a { color: var(--rouge); font-weight: 600; }
.encart { display: flex; gap: 14px; margin-bottom: 30px; padding: 18px 20px; border-radius: var(--rayon); background: var(--nuage); font-size: 13.5px; line-height: 1.6; }
.encart .ic { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--rouge-fonce); }
.encart b { color: var(--encre); }

/* ---------- Pages internes : responsive ---------- */
@media (max-width: 1100px) {
  .grille-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panier-page, .commande { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
  .boutique, .fiche, .panier-page, .commande, .compte-page, .contact-page, .faq-page, .texte-page, .recit, .apropos-hero { grid-template-columns: minmax(0, 1fr); }
  .filtres { position: static; display: none; }
  .filtres.est-ouvert { display: grid; }
  .bouton-filtres { display: inline-flex; }
  .galerie { position: static; grid-template-columns: minmax(0, 1fr); }
  .galerie-vignettes { order: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .resume, .aide, .sommaire { position: static; }
  .fiche { gap: 28px; }
  .recit { gap: 20px; margin-top: 44px; }
  .apropos-hero .texte { padding: 32px 24px; }
  .apropos-hero h1 { font-size: 34px; }
  .apropos-hero .visuel { min-height: 280px; }
  .appel { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}
@media (max-width: 820px) {
  .grille.grille-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .page-tete { flex-direction: column; align-items: flex-start; }
  .page-tete h1 { font-size: 24px; }
  .puces-cat { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -24px; padding-inline: 24px; }
  .barre-outils .compte-resultats { display: none; }
  .champs { grid-template-columns: minmax(0, 1fr); }
  .fiche-info h1 { font-size: 22px; }
  .fiche-prix strong { font-size: 26px; }
  .achat { flex-wrap: wrap; }
  .caracteristiques { grid-template-columns: 120px 1fr; }
  .ligne { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "v t t" "v q p"; gap: 10px 14px; }
  .ligne-prix { min-width: 0; }
  .etapes-trait { width: 16px; }
  .carte-form, .carte-compte { padding: 20px; }
  .bandeau-info { justify-content: flex-start; }
  .sans-avis { flex-direction: column; align-items: flex-start; }
}

/* ---------- Boutique : un rayon par catégorie, choisi par le lien (#mode, #informatique…) ---------- */
[data-rayon]:not(.est-visible) { display: none; }
.filtre.est-masque { display: none; }
.filtre ul.liste-rayons { gap: 2px; }
.liste-rayons a { display: flex; justify-content: space-between; gap: 8px; margin: 0 -10px; padding: 6px 10px; border-radius: 8px; color: var(--texte); }
.liste-rayons a:hover { background: #fff; color: var(--rouge); }
.liste-rayons a.est-actif { background: #fff; font-weight: 700; color: var(--rouge-fonce); }
.liste-rayons small { font-size: 11.5px; font-weight: 400; color: var(--gris); }
.carte-appel { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 22px; border-radius: var(--rayon-s); background: var(--nuage); }
.carte-appel h3 { font-size: 15px; font-weight: 700; }
.carte-appel p { font-size: 12.5px; line-height: 1.55; color: var(--gris); }
.carte-appel .pilule { height: 36px; padding: 0 16px; font-size: 12.5px; }
.rayon-vide { display: grid; justify-items: center; gap: 12px; padding: 56px 24px; border-radius: var(--rayon); background: var(--nuage); text-align: center; }
.rayon-vide h2 { font-size: 22px; font-weight: 700; }
.rayon-vide p { max-width: 460px; font-size: 13.5px; line-height: 1.6; color: var(--gris); }
.rayon-vide .boutons, .confirmation .boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.rayon-vide .boutons { justify-content: center; }

/* ---------- Confirmations de formulaire ---------- */
.confirmation { display: grid; justify-items: start; gap: 10px; margin-bottom: 24px; padding: 28px; border-radius: var(--rayon); background: #E9F7EF; }
.confirmation .rond { background: #1FAF54; color: #fff; }
.confirmation h2 { font-size: 22px; font-weight: 700; }
.confirmation p { max-width: 640px; font-size: 13.5px; line-height: 1.6; }
.message-ok { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: #E9F7EF; font-size: 13px; font-weight: 600; color: #0B5D35; }
@media (max-width: 820px) {
  .carte-appel { grid-column: 1 / -1; aspect-ratio: auto; }
  .confirmation { padding: 22px; }
}
/* ---------- Sous-catégories (boutique) : même dessin que les panneaux de l'accueil ---------- */
.panneau-sous { margin: 0 0 22px; padding: 14px; }
.panneau-sous .sous-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.panneau-sous .sous-cat { font-size: 12.5px; }
.panneau-sous .sous-cat span:first-child { margin: 8px 8px 0; }
.panneau-sous .sous-cat span:last-child { padding: 10px 6px 12px; }
.sous-cat.est-actif { box-shadow: 0 0 0 2px var(--rouge-fonce); color: var(--rouge-fonce); font-weight: 700; }
.liste-rayons > li:not(.est-ouvert) > .liste-sous { display: none; }
.liste-sous { list-style: none; display: grid; gap: 2px; margin: 4px 0 8px; padding: 0 0 0 12px; border-left: 2px solid #fff; font-size: 12.5px; }

/* ---------- Menu « Toutes les catégories » ---------- */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 75vh; overflow: auto; padding-block: 26px 30px; border-top: 1px solid var(--trait); background: #fff; box-shadow: 0 24px 40px rgba(110, 10, 15, .12); }
.mega-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 28px; }
.mega-titre { font-size: 14px; font-weight: 700; color: var(--encre); }
.mega ul { list-style: none; display: grid; gap: 7px; margin: 10px 0 0; padding: 0; font-size: 13px; color: var(--texte); }
.mega a:hover { color: var(--rouge); }
.mega-raccourcis { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mega-raccourcis .pilule { box-shadow: inset 0 0 0 1.5px var(--trait); }
.mega-raccourcis .pilule-rouge { box-shadow: none; }
.toutes[aria-expanded="true"] { color: var(--rouge-fonce); }
.toutes[aria-expanded="true"] .ic:last-child { transform: rotate(180deg); }
@media (max-width: 1100px) { .mega-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .mega { padding-block: 18px 22px; }
  .mega-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .panneau-sous { margin-inline: -24px; border-radius: 0; padding-inline: 24px; }
  .panneau-sous .sous-cats > * { flex: 0 0 38%; }
}
/* Fiche produit : « Commander maintenant » sous « Ajouter au panier » */
.pilule-contour { background: #fff; color: var(--rouge-fonce); box-shadow: inset 0 0 0 1.5px var(--rouge-fonce); }
.pilule-contour:hover { background: #FFF6F6; }
.pilule-pleine { width: 100%; margin-top: 12px; }

/* Fiche produit à une seule photo : pas de colonne de vignettes */
.galerie.galerie-unique { grid-template-columns: minmax(0, 1fr); }

/* Couleurs d'un même modèle : bouton avec mini-photo, mène à la fiche de cette couleur */
.taille.taille-photo { height: 46px; gap: 8px; padding: 4px 14px 4px 4px; grid-auto-flow: column; }
.taille-photo img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--carte); }
.taille.taille-photo.est-actif { background: #fff; color: var(--rouge-fonce); border-color: var(--rouge-fonce); box-shadow: inset 0 0 0 1px var(--rouge-fonce); }

/* ---------- Recherche : suggestions pendant la frappe ---------- */
.recherche { position: relative; }
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; max-height: min(70vh, 560px); overflow: auto; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(110, 10, 15, .16), 0 0 0 1px var(--trait); }
.sugg-titre { margin: 6px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.sugg-produit { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; }
.sugg-produit:hover, .sugg-produit:focus-visible { background: var(--nuage); outline: none; }
.sugg-produit img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--carte); }
.sugg-produit b { display: block; overflow: hidden; font-size: 13px; font-weight: 600; color: var(--encre); white-space: nowrap; text-overflow: ellipsis; }
.sugg-produit small { font-size: 11.5px; color: var(--gris); }
.sugg-produit strong { font-size: 13px; color: var(--encre); white-space: nowrap; text-align: right; }
.sugg-produit em { display: block; font-size: 11px; font-style: normal; font-weight: 700; color: var(--rouge); }
.sugg-rayons { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 8px; }
.sugg-rayons .puce-cat { height: 30px; font-size: 12px; }
.sugg-tout { display: block; margin-top: 6px; padding: 12px; border-radius: 10px; background: var(--nuage); text-align: center; font-size: 13px; font-weight: 600; color: var(--rouge-fonce); }
.sugg-vide { padding: 10px 8px; font-size: 13px; line-height: 1.5; }

/* ---------- Pourcentage de remise sur les vignettes (calculé à partir des deux prix) ---------- */
.remise { position: absolute; left: 10px; top: 10px; z-index: 1; height: 22px; padding: 0 8px; border-radius: 6px; display: grid; place-items: center; background: var(--rouge); font-size: 11px; font-weight: 700; color: #fff; }
.economie-texte { font-size: 12.5px; color: var(--gris); }
/* Pastille « Livraison gratuite » sur la vignette (produits de la classe de livraison gratuite) */
.pastille-livraison { position: absolute; left: 10px; bottom: 10px; z-index: 1; height: 22px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .95); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-size: 10.5px; font-weight: 700; color: var(--vert-fonce); }
.pastille-livraison .ic { width: 13px; height: 13px; }
/* ===== Adaptations aux blocs WordPress et à WooCommerce (phase 4) ===== */
/* Adaptations du CSS de la maquette aux blocs natifs de WordPress et à WooCommerce.
   Principe : les classes de la maquette sont posées sur les blocs (className) ;
   ce fichier ne fait que suivre le DOM des blocs là où il diffère de la maquette.
   Le CSS d'un bloc est imprimé après style.css : à spécificité égale il gagne,
   d'où les sélecteurs qualifiés (.wp-block-image.x img) quand il faut le battre. */

/* ---------- Socle ---------- */
img { height: auto; }
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-image img { max-width: 100%; }
.wp-site-blocks { padding: 0; }
.principal { display: block; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- Icônes : masques CSS (aucun SVG dans le contenu, rien à casser pour le client) ---------- */
:root {
  --i-camion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v9.5h-11z'/%3E%3Cpath d='M13.5 9.5h4.2l3 3.2V16h-7.2'/%3E%3Ccircle cx='6.5' cy='17.8' r='1.8'/%3E%3Ccircle cx='17' cy='17.8' r='1.8'/%3E%3C/svg%3E");
  --i-especes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E");
  --i-retour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h11a4.8 4.8 0 0 1 0 9.6H8.5'/%3E%3Cpath d='M8 5.5l-4 4 4 4'/%3E%3C/svg%3E");
  --i-casque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.5v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='14' width='4.5' height='6' rx='1.6'/%3E%3Crect x='16.5' y='14' width='4.5' height='6' rx='1.6'/%3E%3C/svg%3E");
  --i-bouclier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M8.6 12l2.4 2.4 4.4-4.6'/%3E%3C/svg%3E");
  --i-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.2'/%3E%3Cpath d='M3.8 6.6l8.2 6.2 8.2-6.2'/%3E%3C/svg%3E");
  --i-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --i-lieu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --i-droite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  --i-cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E");
  --i-cadeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='4.5' rx='1'/%3E%3Cpath d='M5.5 12.5V20h13v-7.5M12 8v12'/%3E%3Cpath d='M12 8S10.6 3.8 8.2 4.6C6.4 5.2 7.6 8 12 8zm0 0s1.4-4.2 3.8-3.4C17.6 5.2 16.4 8 12 8z'/%3E%3C/svg%3E");
  --i-grille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E");
  --i-maison: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5L12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3Cpath d='M16.5 3.5v3.2'/%3E%3C/svg%3E");
  --i-etincelle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M19 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E");
  --i-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2.5a9.42 9.42 0 0 0-8.1 14.23L2.5 21.5l4.9-1.4A9.42 9.42 0 1 0 12.04 2.5zm0 17.2a7.8 7.8 0 0 1-3.97-1.09l-.28-.17-2.9.83.85-2.82-.19-.29a7.8 7.8 0 1 1 6.49 3.54zm4.28-5.84c-.23-.12-1.38-.68-1.6-.76-.21-.08-.37-.12-.52.12-.16.23-.6.76-.74.91-.14.16-.27.18-.5.06a6.4 6.4 0 0 1-1.88-1.16 7.05 7.05 0 0 1-1.3-1.62c-.14-.23 0-.36.1-.47.11-.11.24-.27.35-.41.12-.14.16-.23.24-.39.08-.16.04-.29-.02-.41-.06-.12-.52-1.26-.72-1.72-.19-.45-.38-.39-.52-.4h-.45a.86.86 0 0 0-.62.29 2.6 2.6 0 0 0-.82 1.94 4.52 4.52 0 0 0 .95 2.4 10.36 10.36 0 0 0 3.97 3.5c.55.24.99.38 1.32.49.56.18 1.06.15 1.46.09.45-.07 1.38-.56 1.57-1.11.2-.55.2-1.02.14-1.11-.06-.1-.21-.16-.44-.27z'/%3E%3C/svg%3E");
  --drapeau-sn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='8' height='24' fill='%2300853F'/%3E%3Crect x='8' width='8' height='24' fill='%23FDEF42'/%3E%3Crect x='16' width='8' height='24' fill='%23E31B23'/%3E%3Cpolygon fill='%2300853F' points='12,8.6 12.79,10.91 15.23,10.95 13.28,12.42 14,14.75 12,13.35 10,14.75 10.72,12.42 8.77,10.95 11.21,10.91'/%3E%3C/svg%3E");
}
.icone-camion { --icone: var(--i-camion); }
.icone-especes { --icone: var(--i-especes); }
.icone-retour { --icone: var(--i-retour); }
.icone-casque { --icone: var(--i-casque); }
.icone-bouclier { --icone: var(--i-bouclier); }
.icone-email { --icone: var(--i-email); }
.icone-horloge { --icone: var(--i-horloge); }
.icone-lieu { --icone: var(--i-lieu); }
.icone-whatsapp { --icone: var(--i-whatsapp); }
.service::before, .garantie::before, .engagement::before, .encart::before, .coordonnee::after, .confiance::before,
.voir-tout a::after, .livraison::before, .pays::after, .recherche .wp-block-search__inside-wrapper::before,
.bonnes-affaires > a::before, .wa-nav > a::before, .wa-flottant a::before, .wa-champ strong::before,
.pastille-livraison::before, .question summary::after, .bande-fond::after,
.nav-categories .toutes > .wp-block-navigation-item__content::before, .bouton-filtres::before {
  content: ""; display: block; flex: none; background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}

/* ---------- Pilules : la classe est sur le conteneur du bouton, le style va sur le lien ---------- */
.wp-block-button.pilule { display: inline-flex; position: static; height: auto; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; transform: none; }
.wp-block-button.pilule:hover { transform: none; box-shadow: none; }
.wp-block-button.pilule .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 20px; border: 0; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wp-block-button.pilule .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(110, 10, 15, .18); }
.wp-block-button.pilule-rouge .wp-block-button__link { background: var(--rouge-fonce); color: #fff; }
.wp-block-button.pilule-blanche .wp-block-button__link { background: #fff; color: var(--rouge-fonce); }
.wp-block-button.pilule-noire .wp-block-button__link { background: #0E1A12; color: #fff; }
.wp-block-button.pilule-verte .wp-block-button__link { background: #1FAF54; color: #fff; }
.wp-block-button.pilule-jaune .wp-block-button__link { background: var(--jaune); color: #2B2100; height: 32px; padding: 0 18px; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Cartes entièrement cliquables : le lien du bouton s'étire sur la carte */
.promo, .hero-cote { display: flex; flex-direction: column; isolation: isolate; }
.lien-carte .wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.lien-carte .wp-block-button__link:hover { transform: none; }
.lien-carte .wp-block-button { position: static; }

/* ---------- En-tête ---------- */
.entete-haut > .wp-block-search { margin: 0; }
.logo .wp-block-site-logo { line-height: 0; }
.logo .wp-block-site-logo img { height: 44px; width: auto; }
.logo-mot a { color: inherit; }
.logo-mot strong { font-weight: 800; }

.wp-block-search.recherche { flex: 1; max-width: 560px; display: block; height: auto; padding: 0; background: none; border-radius: 0; }
.recherche .wp-block-search__inside-wrapper { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 5px 0 16px; border: 0; border-radius: 999px; background: var(--nuage); }
.recherche .wp-block-search__inside-wrapper::before { width: 15px; height: 15px; color: #F08A8E; --icone: var(--i-etincelle); }
.recherche .wp-block-search__input { flex: 1; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--encre); outline: none; }
.recherche .wp-block-search__input::placeholder { color: #8A8F9C; }
.recherche .wp-block-search__button { width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--rouge); color: #fff; display: grid; place-items: center; }
.recherche .wp-block-search__button svg { width: 18px; height: 18px; min-width: 0; fill: currentColor; }

.livraison { display: block; position: relative; padding-left: 28px; font-size: 10.5px; line-height: 1.25; color: var(--gris); }
.livraison::before { position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--encre); --icone: var(--i-lieu); }
.livraison a { color: inherit; }
.livraison strong { font-weight: 600; font-size: 12.5px; color: var(--encre); }
.pays::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--drapeau-sn) center / cover; }
.pays::after { width: 12px; height: 12px; --icone: var(--i-bas); }

.wp-block-woocommerce-mini-cart.panier .wc-block-mini-cart__button { padding: 0; color: var(--encre); font-size: 13px; font-weight: 500; gap: 7px; }
.wp-block-woocommerce-mini-cart.panier .wc-block-mini-cart__icon { width: 22px; height: 22px; }
.wp-block-woocommerce-mini-cart.panier .wc-block-mini-cart__badge { background: var(--rouge); color: #fff; border: 0; font-size: 10px; font-weight: 700; }
.wp-block-woocommerce-customer-account.compte a { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: var(--encre); font-size: 13px; font-weight: 500; }
.wp-block-woocommerce-customer-account.compte svg { width: 22px; height: 22px; }

/* Barre des catégories : menu natif (Apparence → Éditeur → Navigation) */
.entete-nav .wp-block-navigation { font-size: 12.5px; color: #3A3F4B; }
.entete-nav .wp-block-navigation .wp-block-navigation-item__content { padding: 0; color: inherit; }
.entete-nav .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--rouge); }
.nav-categories { flex: 1; min-width: 0; }
.wp-block-navigation.nav-categories > .wp-block-navigation__container { gap: 22px; flex-wrap: nowrap; }
.nav-categories .toutes { padding-right: 22px; border-right: 1px solid var(--trait); }
.nav-categories .toutes > .wp-block-navigation-item__content { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--encre); }
.nav-categories .toutes > .wp-block-navigation-item__content::before { width: 16px; height: 16px; --icone: var(--i-grille); }
.nav-categories .toutes > .wp-block-navigation__submenu-icon { width: 12px; height: 12px; margin-left: 4px; }
.wp-block-navigation.nav-droite > .wp-block-navigation__container { gap: 18px; flex-wrap: nowrap; }
/* le cœur impose display:block aux liens de navigation (.wp-block-navigation .wp-block-navigation-item__content) */
.bonnes-affaires > a, .wp-block-navigation .bonnes-affaires > .wp-block-navigation-item__content { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.bonnes-affaires > a::before { width: 18px; height: 18px; --icone: var(--i-cadeau); }
.wa-nav > a, .wp-block-navigation .wa-nav > .wp-block-navigation-item__content { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wa-nav > a::before { width: 17px; height: 17px; color: #1FAF54; --icone: var(--i-whatsapp); }
.entete-nav .bonnes-affaires { color: var(--rouge); }
.entete-nav .wa-nav { color: var(--rouge-fonce); }

/* « Toutes les catégories » : le sous-menu devient le grand panneau de la maquette */
.wp-block-navigation.nav-categories .toutes > .wp-block-navigation__submenu-container {
  left: 0; top: 100%; z-index: 30; width: min(1200px, calc(100vw - 48px)); max-height: 75vh; overflow-y: auto;
  border: 0; border-top: 1px solid var(--trait); border-radius: 0 0 10px 10px; background: #fff; color: var(--texte);
  box-shadow: 0 24px 40px rgba(110, 10, 15, .12);
}
.wp-block-navigation.nav-categories .toutes:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation.nav-categories .toutes:focus-within > .wp-block-navigation__submenu-container {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 28px; padding: 26px 28px 30px; height: auto; width: min(1200px, calc(100vw - 48px));
}
.wp-block-navigation.nav-categories .toutes .wp-block-navigation__submenu-container > .wp-block-navigation-item { display: block; }
.wp-block-navigation.nav-categories .toutes .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 0; font-size: 14px; font-weight: 700; color: var(--encre); white-space: normal; }
.wp-block-navigation.nav-categories .toutes .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
  position: static; visibility: inherit; opacity: 1; width: auto; height: auto; min-width: 0; overflow: visible;
  display: grid; gap: 7px; margin: 10px 0 0; padding: 0; border: 0; background: none; box-shadow: none;
}
.wp-block-navigation.nav-categories .toutes .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 13px; font-weight: 400; color: var(--texte); }
.wp-block-navigation.nav-categories .toutes .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--rouge); }
.wp-block-navigation.nav-categories .toutes .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { display: none; }

/* ---------- Héros ---------- */
.diapo-texte .wp-block-buttons { margin-top: 26px; }
.diapo-texte .mention { margin-top: auto; font-size: 10.5px; opacity: .7; }
.wp-block-image.diapo-photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-diapo-1 img { object-position: 55% 35%; }
.photo-diapo-2 img { object-position: 50% 22%; }
.photo-diapo-3 img { object-position: 62% 44%; }
.hero-cote .wp-block-image img { height: 68%; max-width: none; z-index: -1; }
.hero-cote .solde { pointer-events: none; }
.hero-cote .solde p { margin: 0; }
.hero-cote .lien-carte { margin-top: auto; padding: 0 26px 26px; }
.points:empty { display: none; }

/* ---------- Blocs et têtes de section ---------- */
.voir-tout a { display: inline-flex; align-items: center; gap: 2px; color: inherit; }
.voir-tout a::after { width: 13px; height: 13px; --icone: var(--i-droite); }
.section-panneau { margin-top: 52px; }

/* Catégories en cercles */
.cercle-nom a { color: inherit; }
.wp-block-image.cercle-img a { display: block; width: 100%; height: 100%; }
.wp-block-image.cercle-img img { width: 100%; height: 100%; object-fit: cover; }

/* Trio de bannières promo */
.promo .wp-block-image img { height: 76%; max-width: none; z-index: -1; }
.promo-texte { pointer-events: none; }
.promo-texte p:not(.surtitre) { font-size: 12.5px; margin-top: 10px; opacity: .9; max-width: 240px; }
.promo .lien-carte { margin-top: auto; padding: 0 24px 24px; }
.promo .lien-carte .wp-block-button__link { height: 32px; padding: 0 16px; font-size: 12px; }

/* Cartes de sous-catégories (accueil) */
.sous-cat > .sous-cat-visuel { display: block; aspect-ratio: 1.05; margin: 12px 12px 0; overflow: hidden; border-radius: 6px; }
.sous-cat > .sous-cat-visuel a { display: block; width: 100%; height: 100%; }
.wp-block-image.sous-cat-visuel img { width: 100%; height: 100%; object-fit: cover; }
.sous-cat > .sous-cat-nom { padding: 14px 8px 16px; }
.sous-cat-nom a { color: inherit; }
.panneau-sous .sous-cat > .sous-cat-visuel { margin: 8px 8px 0; }
.panneau-sous .sous-cat > .sous-cat-nom { padding: 10px 6px 12px; }

/* Bannière vert profond */
.banniere-verte .visuel::before,
.banniere-verte .visuel::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); border-bottom: 0; }
.banniere-verte .visuel::before { width: 430px; height: 330px; border-radius: 215px 215px 0 0; border: 2px solid rgba(255,255,255,.16); border-bottom: 0; background: rgba(255,255,255,.05); }
.banniere-verte .visuel::after { width: 386px; height: 308px; border-radius: 200px 200px 0 0; border: 1.5px solid rgba(255,255,255,.10); border-bottom: 0; }
.banniere-verte .visuel .wp-block-image { position: static; }
.banniere-verte .visuel img { z-index: 1; max-width: none; }
.banniere-verte .wp-block-buttons { margin-top: 18px; }
.banniere-pied p { margin: 0; }
.puces .puce { margin: 0; }

/* Bande vert vif */
.bande-fond .wp-block-buttons { position: absolute; right: 40px; top: 46px; }
.bande-fond::after { position: absolute; right: 230px; top: -10px; width: 220px; height: 220px; color: rgba(255,255,255,.45); --icone: var(--i-maison); }

/* Mosaïque WhatsApp */
.mosaique-grille > .wp-block-image { height: 100%; }
.mosaique-grille .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.mosaique-logo { width: 96px; }
.mosaique-voile .wa-champ { margin-top: 20px; padding: 0 6px 0 18px; font-size: 13px; color: #8A8F9C; }
.wa-champ a { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; color: inherit; }
.wa-champ strong { margin-left: auto; height: 36px; padding: 0 16px; border-radius: 999px; background: #1FAF54; color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.wa-champ strong::before { width: 16px; height: 16px; --icone: var(--i-whatsapp); }

/* ---------- Cartes produit WooCommerce (même dessin que les vignettes de la maquette) ---------- */
.rangee-produits .wc-block-product-template { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.rangee-produits.grille-4 .wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 34px; }
.rangee-produits .wc-block-product-template > .wc-block-product { width: auto !important; max-width: none !important; min-width: 0; margin: 0 !important; padding: 0; text-align: left; }
.rangee-produits .wc-block-components-product-image { position: relative; display: block; aspect-ratio: 1; margin: 0 !important; overflow: hidden; border-radius: var(--rayon-s); background: var(--carte); }
.rangee-produits .wc-block-components-product-image a { display: block; height: 100%; }
.rangee-produits .wc-block-components-product-image img { width: 100% !important; height: 100% !important; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; transition: transform .35s ease; }
.rangee-produits .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.05); }
.rangee-produits .produit-nom { margin: 12px 0 0 !important; text-align: left !important; }
.rangee-produits .produit-nom a { color: inherit; }
.rangee-produits .wc-block-components-product-rating { margin: 5px 0 0 !important; justify-content: flex-start !important; font-size: 12px; }
/* prix sur deux lignes si la carte est étroite : le prix barré ne déborde jamais sur la carte voisine */
.rangee-produits .wc-block-components-product-price { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 6px 0 0 !important; text-align: left !important; font-size: 15px; font-weight: 700; color: var(--encre); letter-spacing: -.01em; }
.wc-block-components-product-price del { order: 2; font-size: 11.5px; font-weight: 400; color: #9BA0AC; white-space: nowrap; }
.wc-block-components-product-price ins { order: 1; text-decoration: none; background: none; white-space: nowrap; }

/* Rangées qui défilent (produits, bannières, sous-catégories) : les éléments en position absolue
   des cartes (ex. texte « Le prix initial était… » pour lecteurs d'écran) restent dans la rangée ;
   sans cela ils élargissent toute la page sur téléphone (bande blanche à droite). */
.rangee-produits .wc-block-product-template, .rangee-produits .wc-block-product, .trio, .sous-cats, .grille, .bande-cartes { position: relative; }

/* Flèches gauche / droite des rangées défilantes (ajoutées par assets/app.js, visibles seulement s'il y a une suite) */
.defilant { position: relative; }
.fleche-defil { position: absolute; top: var(--haut, 50%); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 1px solid var(--trait); border-radius: 50%; background: rgba(255, 255, 255, .96); color: var(--encre); box-shadow: 0 4px 14px rgba(11, 13, 18, .18); cursor: pointer; }
.fleche-defil:hover, .fleche-defil:focus-visible { color: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.fleche-defil.gauche { left: var(--gauche, 8px); }
.fleche-defil.droite { right: var(--droite, 8px); }
.fleche-defil[hidden] { display: none; }
.fleche-defil svg { width: 16px; height: 16px; }
.woocommerce-Price-currencySymbol { font-size: .6em; font-weight: 600; }
.wc-block-components-product-rating__stars span::before, .star-rating span::before { color: var(--rouge); }

/* Remise « −29 % » et pastille « Livraison gratuite » */
.wc-block-components-product-image .wc-block-components-product-sale-badge,
.wc-block-components-product-sale-badge,
.woocommerce span.onsale, span.onsale {
  position: absolute !important; left: 10px !important; right: auto !important; top: 10px !important; z-index: 1;
  min-width: 0 !important; min-height: 0 !important; height: 22px; margin: 0 !important; padding: 0 8px !important;
  display: grid; place-items: center; border: 0 !important; border-radius: 6px !important;
  background: var(--rouge) !important; color: #fff !important; font-size: 11px !important; font-weight: 700; line-height: 1 !important; text-transform: none;
}
.pastille-livraison::before { width: 13px; height: 13px; --icone: var(--i-camion); }

/* ---------- Pied de page ---------- */
.service { display: block; position: relative; min-height: 64px; padding: 15px 20px 15px 62px; font-size: 11px; color: var(--gris); }
.service::before { position: absolute; left: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; color: var(--rouge-fonce); }
.service strong { display: inline-block; font-size: 14px; font-weight: 600; color: var(--encre); }
.pied h4 { font-weight: 700; }
.pied ul a { color: inherit; }
.pays-pied::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--drapeau-sn) center / cover; }
.contact-lignes { line-height: 1.7; }
.contact-lignes strong { color: var(--encre); font-weight: 600; }
.paiements .puces { display: flex; gap: 6px; }
.pied .wp-block-social-links.reseaux { display: flex; gap: 8px; margin: 0; padding: 0; }
.wp-block-social-links.reseaux .wp-social-link { width: 32px; height: 32px; margin: 0; border-radius: 50%; background-color: #3F4555 !important; color: #fff !important; }
.wp-block-social-links.reseaux .wp-social-link:hover { background-color: var(--rouge-fonce) !important; transform: none; }
.wp-block-social-links.reseaux .wp-social-link a { width: 100%; height: 100%; padding: 0; display: grid; place-items: center; }
.wp-block-social-links.reseaux .wp-social-link svg { width: 16px; height: 16px; }
.mentions p { margin: 0; }
.mentions-liens a { margin-left: 6px; color: inherit; }
.mentions-liens a:hover { color: var(--rouge); }
.wa-flottant { margin: 0; }
.wa-flottant a { display: grid; place-items: center; width: 100%; height: 100%; font-size: 0; color: #fff; }
.wa-flottant a::before { width: 28px; height: 28px; --icone: var(--i-whatsapp); }

/* ---------- Pages internes ---------- */
.wc-block-breadcrumbs.fil, .fil .woocommerce-breadcrumb { margin: 18px 0 0; padding: 0; font-size: 12px; color: var(--gris); }
.fil .woocommerce-breadcrumb a { color: inherit; }
.fil .woocommerce-breadcrumb a:hover { color: var(--rouge); }
.page-titre { margin: 12px 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.page-sous-titre { margin-bottom: 24px; font-size: 13.5px; color: var(--gris); }
.page-tete .wp-block-term-description { margin-top: 6px; font-size: 13.5px; color: var(--gris); max-width: 640px; }
.page-tete .wp-block-query-title { font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }

.sommaire-lien { margin: 0; }
.sommaire-lien a { display: block; }
.sommaire .est-actuel a { background: #fff; font-weight: 700; color: var(--rouge-fonce); box-shadow: 0 1px 2px rgba(110, 10, 15, .06); }
.encart::before { width: 22px; height: 22px; margin-top: 1px; color: var(--rouge-fonce); --icone: var(--i-bouclier); }
.encart p { margin: 0; }
.texte-legal > p + p, .texte-legal > p + ul, .texte-legal > ul + p { margin-top: 12px; }

/* Qui sommes-nous */
.wp-block-image.visuel-photo img { max-width: none; }
.apropos-hero .visuel .wp-block-image { position: static; }
.engagement::before { width: 30px; height: 30px; color: var(--rouge-fonce); }
.engagement.icone-bouclier, .engagement.icone-camion, .engagement.icone-especes, .engagement.icone-retour { display: block; }
.appel .wp-block-button.pilule .wp-block-button__link { height: 44px; padding: 0 22px; }
.appel .wp-block-button.pilule-verte .wp-block-button__link::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-whatsapp) center / contain no-repeat; mask: var(--i-whatsapp) center / contain no-repeat; }

/* Contact */
.coordonnee { display: block; position: relative; padding: 20px 20px 20px 80px; border-radius: var(--rayon); background: var(--nuage); }
.coordonnee::before { content: ""; position: absolute; left: 20px; top: 20px; width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.coordonnee::after { position: absolute; left: 31.5px; top: 31.5px; width: 21px; height: 21px; color: var(--rouge-fonce); }
.coordonnee.icone-whatsapp::before { background: #1FAF54; }
.coordonnee.icone-whatsapp::after { color: #fff; }
.coordonnee h3 { font-size: 14px; font-weight: 700; color: var(--encre); }
.coordonnee p { margin-top: 2px; font-size: 13px; color: var(--gris); }
.coordonnee .coordonnee-lien a { font-size: 13.5px; font-weight: 600; color: var(--rouge); }
.carte-form > h2 { margin-bottom: 18px; font-size: 17px; font-weight: 700; }
.carte-form .wpcf7 form > p { margin: 0; }
.carte-form .wpcf7-form-control-wrap { display: block; }
/* indicatif +221 : la règle « .champ-tel span » de la maquette ne doit pas habiller l'enveloppe de Contact Form 7 */
.carte-form .champ-tel .wpcf7-form-control-wrap { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.carte-form .champ-tel .wpcf7-form-control-wrap input { width: 100%; }
.carte-form .champ-tel .wpcf7-form-control-wrap span { display: block; padding: 0; border: 0; border-radius: 0; background: none; }
.carte-form .wpcf7-submit { width: 100%; height: 46px; margin-top: 20px; border: 0; border-radius: 999px; background: var(--rouge-fonce); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.carte-form .wpcf7-spinner { display: none; }
.carte-form .wpcf7-not-valid-tip { margin-top: 4px; font-size: 12px; font-weight: 500; color: #C8323B; }
.carte-form .wpcf7-response-output { margin: 14px 0 0 !important; padding: 12px 14px !important; border: 0 !important; border-radius: 8px; background: #E9F7EF; font-size: 13px; font-weight: 600; color: #0B5D35; }
.confiance { display: block; position: relative; padding-left: 24px; }
.confiance::before { position: absolute; left: 0; top: 0; width: 16px; height: 16px; color: #12804A; --icone: var(--i-cadenas); }
.confiance a { color: var(--rouge); font-weight: 600; }

/* Questions fréquentes (bloc « Détails » natif) */
.question summary { list-style: none; }
.question summary::after { width: 18px; height: 18px; color: var(--gris); transition: transform .2s ease; --icone: var(--i-plus); }
.question[open] summary::after { transform: rotate(45deg); color: var(--rouge-fonce); }
.question > p { margin: 0; padding: 0 20px 18px; font-size: 13.5px; line-height: 1.7; }
.question a { color: var(--rouge); font-weight: 600; }
.aide .wp-block-buttons { display: grid; gap: 10px; margin-top: 12px; }
.aide .wp-block-button.pilule, .aide .wp-block-button.pilule .wp-block-button__link { width: 100%; }
.aide .wp-block-button.pilule .wp-block-button__link { height: 44px; }

/* ---------- Boutique (catégories, recherche) ---------- */
.page-boutique .page-tete { margin-bottom: 24px; }
.filtre p { font-size: 12.5px; color: var(--gris); }
.filtre .wp-block-buttons { margin-top: 12px; }
.filtre .wp-block-button.pilule, .filtre .wp-block-button.pilule .wp-block-button__link { width: 100%; }
.liste-rayons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.liste-rayons ul ul { margin: 2px 0 6px; padding-left: 12px; border-left: 2px solid #fff; font-size: 12.5px; }
.liste-rayons li { margin: 0; }
.liste-rayons a { display: inline-flex; padding: 6px 10px; margin: 0 -10px; border-radius: 8px; color: var(--texte); }
.liste-rayons a:hover { background: #fff; color: var(--rouge); }
.liste-rayons .wc-block-product-categories-list-item-count { margin-left: 4px; font-size: 11.5px; color: var(--gris); }
.liste-rayons .wc-block-product-categories-list-item-count::before, .liste-rayons .wc-block-product-categories-list-item-count::after { content: none; }
.barre-outils .woocommerce-result-count { margin: 0; }
.barre-outils .woocommerce-ordering { margin: 0 0 0 auto; }
.barre-outils select.orderby { appearance: none; -webkit-appearance: none; height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--trait); border-radius: 8px; font-size: 13px; color: var(--encre); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7381' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 14px; }
.bouton-filtres { margin: 0; cursor: pointer; }
.bouton-filtres::before { width: 16px; height: 16px; --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M7 12h10M10 17.5h4'/%3E%3C/svg%3E"); }
.wp-block-query-pagination.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 44px; }
.pagination .page-numbers, .pagination .wp-block-query-pagination-previous, .pagination .wp-block-query-pagination-next { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; background: var(--nuage); font-size: 13px; font-weight: 600; color: var(--encre); }
.pagination .page-numbers.current { background: var(--rouge-fonce); color: #fff; }
.wp-block-query-pagination-numbers { display: flex; gap: 6px; }

/* ---------- Fiche produit ---------- */
.fiche-galerie { position: sticky; top: 16px; min-width: 0; }
.fiche-galerie .woocommerce-product-gallery { position: relative; width: 100% !important; float: none !important; margin: 0 !important; }
.fiche-galerie .woocommerce-product-gallery__wrapper { margin: 0; }
.fiche-galerie .woocommerce-product-gallery__image, .fiche-galerie .flex-viewport { overflow: hidden; border-radius: var(--rayon); background: var(--carte); }
.fiche-galerie .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.fiche-galerie .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0 !important; padding: 0; list-style: none; }
.fiche-galerie .flex-control-thumbs li { width: auto !important; margin: 0 !important; float: none !important; }
.fiche-galerie .flex-control-thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 2px solid transparent; background: var(--carte); mix-blend-mode: multiply; opacity: 1 !important; cursor: pointer; }
.fiche-galerie .flex-control-thumbs img.flex-active { border-color: var(--rouge-fonce); }
.fiche-galerie .woocommerce-product-gallery__trigger { top: 14px !important; right: 14px !important; z-index: 2; }
.surtitre-lien a { color: inherit; }
.fiche-info .wp-block-post-title { margin-top: 8px; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.fiche-meta { margin-top: 10px; }
.fiche-meta .wc-block-components-product-rating__container { justify-content: flex-start; }
.fiche-prix .wc-block-components-product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.fiche-prix .wc-block-components-product-price del { font-size: 15px; font-weight: 400; letter-spacing: 0; }
.fiche-prix .economie, .fiche-prix .economie-texte { align-self: center; letter-spacing: 0; }
.fiche-accroche p { margin: 0; }

.achat-formulaire form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 24px 0 0; }
.achat-formulaire form.cart.variations_form { display: block; }
.achat-formulaire table.variations { width: 100%; margin: 0 0 6px; border: 0; border-collapse: collapse; }
.achat-formulaire table.variations tr { display: block; margin-top: 18px; }
.achat-formulaire table.variations th, .achat-formulaire table.variations td { display: block; padding: 0; border: 0; text-align: left; background: none; }
.achat-formulaire table.variations th.label { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--encre); }
.achat-formulaire .liste-cachee { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.achat-formulaire .reset_variations { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--rouge); }
.achat-formulaire .tailles { gap: 6px; }
.achat-formulaire .taille { cursor: pointer; }
.achat-formulaire .woocommerce-variation-price .price { font-size: 22px; font-weight: 800; color: var(--encre); }
.achat-formulaire .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.achat-formulaire .quantity { display: inline-flex; align-items: center; height: 46px; padding: 0 4px; border: 1px solid var(--trait); border-radius: 999px; flex: none; }
.achat-formulaire .quantity input.qty { width: 64px; height: 40px; border: 0; background: transparent; text-align: center; font-size: 14px; font-weight: 700; color: var(--encre); }
.achat-formulaire .single_add_to_cart_button,
.achat-formulaire .single_add_to_cart_button.button.alt {
  flex: 1; height: 46px; padding: 0 26px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--rouge-fonce) !important; color: #fff !important; font-size: 14px !important; font-weight: 600; line-height: 46px; cursor: pointer;
}
.achat-formulaire .single_add_to_cart_button:hover { box-shadow: 0 6px 16px rgba(110, 10, 15, .18); }
.achat-formulaire .single_add_to_cart_button.commander-maintenant { flex: 1 1 100%; width: 100%; }
.achat-formulaire .single_add_to_cart_button.disabled { opacity: .55; cursor: not-allowed; }
.achat-formulaire .stock { margin: 10px 0 0; font-size: 12px; font-weight: 600; }
.achat-formulaire .stock.in-stock { color: #12804A; }
.achat-formulaire .stock.out-of-stock { color: #C8323B; }

.garanties { margin-top: 24px; }
.garantie { display: block; position: relative; margin: 0; padding-left: 34px; font-size: 12px; color: var(--gris); }
.garantie::before { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; color: var(--rouge-fonce); }
.garantie strong { font-size: 13px; font-weight: 600; color: var(--encre); }
.garantie-livraison-offerte { display: none; }
.produit-livraison-gratuite .garantie-livraison { display: none; }
.produit-livraison-gratuite .garantie-livraison-offerte { display: block; }

/* Onglets Description / Informations / Avis (bloc natif WooCommerce) */
.onglets { margin-top: 64px; }
.onglets .woocommerce-tabs ul.tabs { display: flex; gap: 28px; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--trait); list-style: none; overflow-x: auto; scrollbar-width: none; }
.onglets .woocommerce-tabs ul.tabs::before, .onglets .woocommerce-tabs ul.tabs::after,
.onglets .woocommerce-tabs ul.tabs li::before, .onglets .woocommerce-tabs ul.tabs li::after { display: none !important; }
.onglets .woocommerce-tabs ul.tabs li { margin: 0 0 -1px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
.onglets .woocommerce-tabs ul.tabs li a { display: block; padding: 0 0 14px !important; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 600; color: var(--gris) !important; white-space: nowrap; }
.onglets .woocommerce-tabs ul.tabs li.active a { color: var(--encre) !important; border-color: var(--rouge-fonce); }
.onglets .woocommerce-Tabs-panel { max-width: 820px; margin: 0 !important; padding-top: 26px; font-size: 14px; line-height: 1.75; }
.onglets .woocommerce-Tabs-panel > h2:first-child { display: none; }
.onglets .woocommerce-Tabs-panel p + p, .onglets .woocommerce-Tabs-panel p + ul, .onglets .woocommerce-Tabs-panel ul + p { margin-top: 12px; }
.onglets table.shop_attributes { width: 100%; border: 0; border-top: 1px solid var(--trait); border-collapse: collapse; font-size: 13px; }
.onglets table.shop_attributes th, .onglets table.shop_attributes td { padding: 10px 0; border: 0; border-bottom: 1px solid var(--trait); background: none !important; text-align: left; font-style: normal; }
.onglets table.shop_attributes th { width: 180px; font-weight: 400; color: var(--gris); }
.onglets table.shop_attributes td { font-weight: 500; color: var(--encre); }
.onglets table.shop_attributes td p { margin: 0; padding: 0; }
/* Avis clients : formulaire natif, au dessin de la maquette */
.onglets #reviews .woocommerce-noreviews { padding: 22px 24px; border-radius: var(--rayon); background: var(--nuage); }
.onglets #review_form_wrapper { margin-top: 18px; padding: 22px 24px; border-radius: var(--rayon); background: var(--nuage); }
.onglets #reply-title { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--encre); }
.onglets .comment-form p { margin: 0 0 14px; }
.onglets .comment-form label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--encre); }
.onglets .comment-form input[type="text"], .onglets .comment-form input[type="email"], .onglets .comment-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 8px; background: #fff; font-size: 13.5px; color: var(--encre); }
.onglets .comment-form .stars a { color: var(--rouge) !important; }
.onglets .comment-form .form-submit input[type="submit"] { height: 40px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--rouge-fonce); color: #fff; font-weight: 600; cursor: pointer; }
.onglets .commentlist { margin: 0; padding: 0; list-style: none; }
.onglets .commentlist li { margin: 0 0 16px; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.suggestions-produit { margin-top: 64px; }

/* ---------- Panier, commande, compte (blocs WooCommerce) ---------- */
.page-woo { padding-bottom: 8px; }
.page-woo .wc-block-components-button:not(.is-link),
.page-woo .wc-block-cart__submit-button,
.page-woo .wc-block-components-checkout-place-order-button,
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button {
  border: 0 !important; border-radius: 999px !important; background: var(--rouge-fonce) !important; color: #fff !important; font-weight: 600 !important;
}
.page-woo .wc-block-components-sidebar .wc-block-components-panel,
.page-woo .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.page-woo .wp-block-woocommerce-checkout-order-summary-block { border-radius: var(--rayon); background: var(--nuage); }
.page-woo .wc-block-components-text-input input, .page-woo .wc-block-components-combobox input, .page-woo .wc-blocks-components-select select { border-radius: 8px !important; }
.page-woo .wc-block-components-radio-control__option-checked, .page-woo .wc-block-components-radio-control-accordion-option--checked-option-highlighted { box-shadow: inset 0 0 0 1.5px var(--rouge-fonce) !important; }
.page-woo a { color: var(--rouge); }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-MyAccount-navigation a { display: inline-flex; height: 34px; padding: 0 14px; align-items: center; border: 1px solid var(--trait); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--texte) !important; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--rouge-fonce); border-color: var(--rouge-fonce); color: #fff !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { padding: 10px 14px; border: 1px solid var(--trait); border-radius: 8px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--rouge-fonce) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--rouge-fonce) !important; }

/* ---------- Commande express (fenêtre de la fiche produit, inc/commande-express.php) ---------- */
.ce-ouvert { overflow: hidden; }
.commande-express { width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--texte); box-shadow: 0 24px 60px rgba(11, 13, 18, .28); overflow: auto; overscroll-behavior: contain; }
.commande-express::backdrop { background: rgba(11, 13, 18, .55); }
.ce-form, .ce-merci { padding: 22px 22px 20px; }
.ce-form[hidden], .ce-merci[hidden] { display: none; }
.ce-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ce-tete h2 { margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--encre); }
.ce-fermer { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--nuage); color: var(--encre); cursor: pointer; }
.ce-sous { margin: 6px 0 0; font-size: 13px; color: var(--gris); }
.ce-produit { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px; border: 1px solid var(--trait); border-radius: 12px; }
.ce-image { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--carte); }
.ce-infos { flex: 1; min-width: 0; }
.ce-infos p { margin: 0; }
.ce-nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--encre); }
.ce-variante { margin-top: 2px !important; font-size: 12px; color: var(--gris); }
.ce-prix-unite { margin-top: 3px !important; font-size: 13px; font-weight: 700; color: var(--encre); }
.ce-quantite { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--trait); border-radius: 999px; }
.ce-quantite button { width: 32px; height: 32px; padding: 0; border: 0; background: none; font-size: 17px; line-height: 1; color: var(--encre); cursor: pointer; }
.ce-qte { min-width: 18px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--encre); }
.ce-champs { display: grid; gap: 12px; margin-top: 16px; }
.ce-champ { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--encre); }
.ce-champ b { font-weight: 700; color: var(--rouge); }
.ce-saisie { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--trait); border-radius: 10px; background: #fff; }
.ce-saisie:focus-within, .ce-champ select:focus { border-color: var(--rouge-fonce); box-shadow: 0 0 0 3px rgba(179, 20, 27, .12); outline: none; }
.ce-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; border-right: 1px solid var(--trait); background: var(--nuage); color: var(--gris); font-size: 13px; font-weight: 700; }
.ce-icone.ce-indicatif { width: 54px; color: var(--encre); }
.ce-icone svg { width: 18px; height: 18px; }
/* 16 px : en dessous, l'iPhone zoome sur le champ touché */
.ce-saisie input { flex: 1; min-width: 0; height: 48px; padding: 0 12px; border: 0; background: none; font-size: 16px; color: var(--encre); outline: none; }
.ce-champ select { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--trait); border-radius: 10px; background: #fff; font-size: 16px; color: var(--encre); }
.ce-livraison { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.ce-livraison legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; color: var(--encre); }
.ce-option { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--trait); border-radius: 10px; font-size: 13px; line-height: 1.35; cursor: pointer; }
.ce-option + .ce-option { margin-top: 8px; }
.ce-option.est-choisie { border-color: var(--rouge-fonce); background: #FDF3F3; }
.ce-option input { flex: none; margin: 0; accent-color: var(--rouge-fonce); }
.ce-option span { flex: 1; min-width: 0; }
.ce-option strong { flex: none; white-space: nowrap; color: var(--encre); }
.ce-sans-livraison { margin: 0; font-size: 13px; color: var(--gris); }
.ce-totaux { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--nuage); }
.ce-totaux p { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 13px; }
.ce-totaux p + p { margin-top: 6px; }
.ce-totaux .ce-total { padding-top: 8px; border-top: 1px solid var(--trait); font-size: 16px; font-weight: 800; color: var(--encre); }
.ce-optin { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 13px; line-height: 1.4; color: var(--texte); cursor: pointer; }
.ce-optin input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--rouge-fonce); }
.ce-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ce-erreur { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #FDECEC; font-size: 13px; font-weight: 600; color: #A3121A; }
.ce-erreur[hidden] { display: none; }
.ce-valider { width: 100%; min-height: 52px; margin-top: 16px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--rouge-fonce); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.ce-valider:hover { background: var(--rouge); }
.ce-valider:disabled { opacity: .65; cursor: wait; }
.ce-note { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--gris); }
.ce-merci { text-align: center; }
.ce-merci-icone { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 8px auto 0; border-radius: 50%; background: #E9F7EF; color: #0B5D35; }
.ce-merci h2 { margin: 14px 0 0; font-size: 20px; font-weight: 800; color: var(--encre); }
.ce-merci p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.ce-continuer { display: inline-flex; align-items: center; height: 46px; margin-top: 18px; padding: 0 22px; border-radius: 999px; background: var(--rouge-fonce); color: #fff !important; font-size: 14px; font-weight: 700; }
@media (max-width: 600px) {
  /* sur téléphone : fenêtre qui monte du bas de l'écran */
  .commande-express { width: 100vw; max-width: 100vw; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .ce-form, .ce-merci { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .entete-outils .livraison, .entete-outils .pays { display: none; }
  .nav-categories { overflow-x: auto; scrollbar-width: none; }
  .rangee-produits.grille-4 .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fiche-galerie { position: static; }
  .bouton-filtres { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait); font-size: 13px; font-weight: 600; color: var(--encre); }
}
@media (min-width: 901px) { .bouton-filtres { display: none; } }
@media (max-width: 820px) {
  .logo .wp-block-site-logo img { height: 38px; }
  .wp-block-search.recherche { order: 3; flex-basis: 100%; max-width: none; }
  .wp-block-woocommerce-customer-account.compte .label { display: none; }
  .wp-block-navigation.nav-categories > .wp-block-navigation__container { gap: 18px; }
  .nav-categories .toutes > .wp-block-navigation-item__content { font-size: 0; gap: 0; }
  .nav-categories .toutes > .wp-block-navigation__submenu-container,
  .nav-categories .wp-block-navigation__submenu-icon { display: none !important; }
  .nav-categories .toutes { padding-right: 14px; }
  .hero-cote .wp-block-image img { left: auto; top: 0; width: 58%; height: 100%; object-fit: contain; object-position: 50% 45%; -webkit-mask-image: none; mask-image: none; }
  .hero-cote .lien-carte { padding: 0 22px 20px; }
  .diapo-texte .wp-block-buttons { margin-top: 16px; }
  .diapo-texte .mention { display: none; }
  .rangee-produits .wc-block-product-template { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; gap: 12px; margin-inline: -24px; padding-inline: 24px; width: calc(100% + 48px) !important; max-width: none !important; }
  /* dans WordPress la rangée de bannières EST l'enveloppe (marge intérieure 24 px) : la marge négative
     de la maquette la collait au bord de l'écran ; la 1re bannière s'aligne maintenant sur les panneaux */
  .enveloppe.trio { margin-inline: 0; }
  .rangee-produits .wc-block-product-template > .wc-block-product { flex: 0 0 44%; scroll-snap-align: start; }
  /* grille des pages de catégorie / boutique : largeur normale (pas l'élargissement des rangées défilantes de l'accueil) */
  .rangee-produits.grille-4 .wc-block-product-template { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; margin-inline: 0; padding-inline: 0; overflow: visible; width: auto !important; }
  .bande-fond .wp-block-buttons { position: static; margin-top: 16px; }
  .bande-fond::after { display: none; }
  .banniere-verte .visuel::before { width: 330px; height: 260px; }
  .banniere-verte .visuel::after { width: 290px; height: 238px; }
  .mosaique-grille > .wp-block-image:nth-child(n+13) { display: none; }
  .fiche-info .wp-block-post-title { font-size: 22px; }
  .fiche-prix .wc-block-components-product-price { font-size: 26px; }
  .onglets table.shop_attributes th { width: 120px; }
  .page-titre, .page-tete .wp-block-query-title { font-size: 24px; }
}
@media (max-width: 600px) {
  /* téléphone : grille de produits des catégories un peu plus large (marges de 12 px, égales à gauche et à droite,
     10 px entre les colonnes) pour des photos plus grandes */
  .rangee-produits.grille-4 .wc-block-product-template { margin-inline: -12px !important; width: calc(100% + 24px) !important; column-gap: 10px !important; }
}