/* =========================================================================
   EntomoSphère — boutique française d'invertébrés
   Charte « carnet de naturaliste » : papier vieilli jauni + vert olive peint
   ========================================================================= */

:root{
  /* — Papier vieilli — */
  --paper:      #fbf3d6;
  --paper-2:    #fff9e2;
  --paper-3:    #f4e9c4;
  --paper-edge: #e7d8a8;

  /* — Encre — */
  --ink:        #33301f;
  --ink-soft:   #5b543a;
  --ink-faint:  #8a7f5e;

  /* — Vert olive (couleur signature) — */
  --olive:      #839351;
  --olive-2:    #6f7e3d;
  --olive-deep: #4e6636;
  --olive-ink:  #2c3a1c;
  --sage:       #cbceb1;
  --sage-2:     #b7bd95;

  /* — Accent chaud (terre / ocre), usage parcimonieux — */
  --terra:      #a9542f;
  --terra-2:    #8c4223;
  --gold:       #b0862e;

  --shadow-sm: 0 2px 8px rgba(52,44,20,.14);
  --shadow-md: 0 10px 26px rgba(52,44,20,.20);
  --shadow-lg: 0 22px 60px rgba(44,38,18,.30);

  --font-hand:  'Amatic SC', 'Segoe UI', sans-serif;
  --font-script:'Damion', cursive;
  --font-body:  'Poppins', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1180px;

  /* relief de papier froissé (réutilisable partout : fond, médaillons…) */
  --crumple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='cr' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='5' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='9' diffuseConstant='1.25' result='l'%3E%3CfeDistantLight azimuth='235' elevation='48'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.5' intercept='-0.12'/%3E%3CfeFuncG type='linear' slope='1.5' intercept='-0.12'/%3E%3CfeFuncB type='linear' slope='1.5' intercept='-0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cr)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  line-height:1.65;
  background-color:#f3e7c2;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ margin:0; padding:0; list-style:none; }

/* --------------------------------------------- Fond : planche de croquis */
/* Le motif dessiné (cloportes, phasmes, escargots, mille-pattes sur papier
   ancien) remplace la photo de sous-bois. C'est un MOTIF : il se répète à
   taille fixe plutôt que d'être étiré, pour que les dessins gardent la même
   échelle sur un téléphone comme sur un grand écran.
     --croquis-taille : largeur d'une tuile (plus petit = dessins plus serrés)
     --croquis-flou   : flou posé sur le décor (0 = motif net, 3px = léger,
                        6px = lavis). Le fond recule, le texte passe devant.
     --plate-veil     : voile crème par-dessus si un texte manque de lisibilité
                        (0 = motif nu, .4 = fond lavé) */
:root{ --plate-veil:0; --croquis-taille:880px; --croquis-flou:3px; }
body::before{
  content:"";
  position:fixed;
  /* la couche déborde de l'écran de trois fois le rayon du flou : sinon le flou
     dégraderait les bords vers le transparent et laisserait un liséré clair
     tout autour de la page */
  inset:calc(var(--croquis-flou) * -3);
  z-index:-2;
  filter:blur(var(--croquis-flou));
  background:
    linear-gradient(155deg, rgba(253,245,218,var(--plate-veil)), rgba(246,236,199,var(--plate-veil)) 45%, rgba(239,225,182,var(--plate-veil))),
    /* LA PLANCHE DE CROQUIS — assets/img/fond-croquis.jpg (1200 px, 143 Ko :
       l'original 2048 px pesait 2,8 Mo, beaucoup trop pour un fond).
       Si le fichier venait à manquer, cette couche ne se peint simplement pas
       et le papier ci-dessous prend le relais : rien ne casse. */
    url("../img/fond-croquis.jpg") top left / var(--croquis-taille) auto repeat,
    /* Si des lignes de raccord apparaissent entre les tuiles (motif non
       raccordable), remplace la ligne ci-dessus par celle-ci — une seule image
       étirée, jamais de couture, mais des dessins plus gros sur grand écran :
       url("../img/fond-croquis.jpg") center center / cover no-repeat, */
    /* le papier ancien, toujours là — c'est lui qu'on voit tant que la planche
       de croquis n'est pas déposée, et c'est sur lui qu'elle se pose ensuite.
       Étiré (cover) : une texture n'a pas de forme reconnaissable, donc aucune
       couture visible. */
    url("../img/paper-texture.jpg") center center / cover no-repeat,
    /* teinte de base, accordée au papier */
    linear-gradient(155deg, #fdf5da 0%, #f6ecc7 45%, #efe1b6 100%);
}
/* sur téléphone, une tuile plus petite garde des dessins à taille lisible */
@media (max-width:640px){ :root{ --croquis-taille:560px; --croquis-flou:2px; } }

/* ------------------------------------------------------------- Utilitaires */
.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }
.section{ padding:74px 0; position:relative; }
.center{ text-align:center; }
.hidden{ display:none !important; }

/* Titre-bannière peint (entête de partie vert olive) */
.banner{
  display:inline-block;
  position:relative;
  padding:.22em 1.15em .42em;
  font-family:var(--font-hand);
  font-weight:700;
  font-size:clamp(2.3rem, 5.2vw, 3.8rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--paper-2);
  text-shadow:0 2px 0 rgba(0,0,0,.18);
  transform:rotate(-1.1deg);
}
.banner::before{
  content:"";
  position:absolute; inset:-6px -4px;
  background:url("../img/banner.svg") center/100% 100% no-repeat;
  z-index:-1;
  filter:drop-shadow(0 8px 14px rgba(52,44,20,.28));
}
.section-head{ margin-bottom:46px; }
.section-head .kicker{
  display:block;
  font-family:var(--font-script);
  font-size:1.7rem;
  color:var(--terra);
  transform:rotate(-2deg);
  margin-bottom:.15em;
}
.section-head .lead{
  max-width:640px; margin:18px auto 0;
  color:var(--ink-soft); font-size:1.02rem;
}

/* Séparateur brindille */
.divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--olive-2); margin:8px 0 2px;
}
.divider::before,.divider::after{
  content:""; height:2px; width:min(140px,20vw);
  background:repeating-linear-gradient(90deg,var(--olive-2) 0 8px,transparent 8px 16px);
  opacity:.5;
}
.divider svg{ width:30px; height:30px; }

/* --------------------------------------------------------------- Boutons */
.btn{
  --bg:var(--olive); --fg:var(--paper-2);
  display:inline-flex; align-items:center; gap:.55em;
  padding:.72em 1.5em;
  font-family:var(--font-body); font-weight:600;
  font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg); background:var(--bg);
  border-radius:3px 9px 4px 10px;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.10);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-2px) rotate(-.4deg); background:var(--olive-2); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ --bg:transparent; --fg:var(--olive-deep); box-shadow:inset 0 0 0 2px var(--olive); }
.btn--ghost:hover{ --bg:var(--olive); --fg:var(--paper-2); }
.btn--terra{ --bg:var(--terra); }
.btn--terra:hover{ background:var(--terra-2); }
.btn--lg{ padding:.9em 1.9em; font-size:.9rem; }
.btn--block{ width:100%; justify-content:center; }

/* ============================================================== HEADER */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(3px);
  background:linear-gradient(180deg, rgba(251,243,214,.96), rgba(246,236,199,.9));
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--olive) 20%,var(--olive-deep) 50%,var(--olive) 80%,transparent) 1;
}
.header-top{ display:flex; align-items:center; gap:22px; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
/* logo au format paysage (580×404) : la hauteur commande, la largeur suit le ratio */
.brand__mark{ width:66px; height:46px; flex:0 0 auto; filter:drop-shadow(0 2px 3px rgba(52,44,20,.25)); }
.brand__name{
  font-family:var(--font-hand); font-weight:700; line-height:.86;
  font-size:2.15rem; color:var(--olive-deep); letter-spacing:.01em;
}
.brand__name small{
  display:block; font-family:var(--font-script); font-size:.86rem;
  color:var(--terra); letter-spacing:.02em; transform:rotate(-1.5deg);
}
.main-nav ul{ display:flex; align-items:center; gap:18px; }
.main-nav a{
  font-weight:500; font-size:.82rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); padding:6px 2px; position:relative; white-space:nowrap;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:3px;
  border-radius:2px; background:var(--olive);
  transition:right .22s ease; opacity:.85;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--olive-deep); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:44px; height:44px; display:grid; place-items:center;
  color:var(--olive-deep); border-radius:50%;
  transition:background .15s ease, transform .15s ease;
}
.icon-btn:hover{ background:rgba(131,147,81,.16); transform:translateY(-1px); }
.icon-btn svg{ width:23px; height:23px; }
.cart-btn{ position:relative; }
.cart-count{
  position:absolute; top:2px; right:2px; min-width:19px; height:19px; padding:0 4px;
  background:var(--terra); color:#fff; font-size:.66rem; font-weight:700;
  border-radius:10px; display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--paper);
  transform:scale(0); transition:transform .2s cubic-bezier(.3,1.6,.5,1);
}
.cart-count.show{ transform:scale(1); }
.nav-toggle{ display:none; }

/* ================================================================ HERO */
.hero{ position:relative; padding:60px 0 40px; overflow:hidden; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.hero__eyebrow{
  font-family:var(--font-script); font-size:2rem; color:var(--terra);
  transform:rotate(-2deg); display:inline-block; margin-bottom:.1em;
}
.hero h1{
  font-family:var(--font-hand); font-weight:700;
  font-size:clamp(3.4rem, 8vw, 6.4rem); line-height:.84; margin:.08em 0 .18em;
  color:var(--olive-ink); letter-spacing:.01em;
}
.hero h1 em{ color:var(--terra); font-style:normal; }
.hero__lead{ font-size:1.14rem; color:var(--ink-soft); max-width:44ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.hero__stats{ display:flex; gap:30px; margin-top:34px; }
.hero__stats b{ font-family:var(--font-hand); font-size:2.5rem; color:var(--olive-deep); display:block; line-height:.8; }
.hero__stats span{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); }

/* Vignette illustrée du héros (spécimen encadré de peinture) */
.hero__art{ position:relative; display:grid; place-items:center; min-height:420px; }
.hero__art::before{
  content:""; position:absolute; inset:6% 4%;
  background:url("../img/stroke-2.svg") center/100% 100% no-repeat;
  filter:drop-shadow(0 16px 30px rgba(52,44,20,.30));
}
.hero__specimen{
  position:relative; width:88%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, var(--paper-2), var(--paper-3));
}
.hero__specimen img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.hero__specimen::after{ content:""; position:absolute; inset:0; border-radius:50%; z-index:1;
  box-shadow:inset 0 0 0 4px rgba(255,249,226,.55), inset 0 0 0 6px rgba(78,102,54,.4),
             inset 0 8px 30px rgba(52,44,20,.22); pointer-events:none; }
.hero__specimen .tag{
  position:absolute; z-index:3; bottom:-6px; left:50%; transform:translateX(-50%) rotate(-2deg);
  font-family:var(--font-script); font-size:1.5rem; color:var(--olive-deep); white-space:nowrap;
  background:var(--paper-2); padding:2px 18px; border-radius:20px; box-shadow:var(--shadow-sm);
}
.hero__link{ position:absolute; inset:0; z-index:2; border-radius:50%; cursor:pointer; }
.hero__pin{ position:absolute; z-index:3; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d8dcc0, #7d8a54);
  box-shadow:0 2px 4px rgba(0,0,0,.35); }

/* « Comment ça marche » — étapes */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ position:relative; background:linear-gradient(180deg,var(--paper-2),var(--paper)); border-radius:14px;
  padding:30px 20px 22px; text-align:center; box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14); }
.step__n{ position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:32px; height:32px;
  border-radius:50%; background:var(--olive); color:var(--paper-2); font-family:var(--font-hand); font-weight:700;
  font-size:1.35rem; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.step svg{ width:38px; height:38px; color:var(--olive-deep); margin:6px 0 8px; }
.step h3{ font-family:var(--font-hand); font-weight:700; font-size:1.7rem; color:var(--olive-ink); margin:0 0 4px; line-height:1; }
.step p{ font-size:.9rem; color:var(--ink-soft); line-height:1.5; margin:0; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; gap:28px 18px; } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* bande « garanties » (sous le héros) */
.trust{ padding:6px 0 10px; }
.trust__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 24px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper)); border-radius:16px; padding:22px 28px;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14); }
.trust__item{ display:flex; align-items:center; gap:13px; }
.trust__item svg{ width:30px; height:30px; flex:0 0 auto; color:var(--olive-deep); }
.trust__item b{ display:block; font-size:.94rem; color:var(--ink); font-weight:600; line-height:1.15; }
.trust__item span{ display:block; font-size:.75rem; line-height:1.4; color:var(--ink-faint); }
@media (max-width:820px){ .trust__row{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .trust__row{ grid-template-columns:1fr; gap:16px; padding:18px 20px; } }

/* ======================================================= CATÉGORIES
   « traces de peinture vert olive comme cadres derrière les catégories » */
.cats{ position:relative; }
.cats__grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:38px 34px;
}
.cats__grid > .cat{ flex:0 1 360px; }   /* largeur fixe → tuiles identiques que la rangée ait 3 ou 2 items */
/* variante resserrée (matériel & garde-manger) */
.cats__grid--duo{ max-width:764px; margin-inline:auto; }
.cats__grid--trio{ max-width:1162px; margin-inline:auto; }
/* tuile catégorie unifiée : panneau vert olive texturé, coins arrondis */
.cat{
  position:relative; z-index:1;
  padding:32px 26px 28px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  min-height:330px;
  border-radius:16px;
  background:
    var(--crumple) center / 320px 320px repeat,
    linear-gradient(160deg, var(--olive) 0%, var(--olive-2) 60%, var(--olive-deep) 100%);
  background-blend-mode:soft-light, normal;
  box-shadow:var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 44px rgba(44,58,28,.34);
  transition:transform .22s ease, box-shadow .22s ease;
}
.cat:hover{ transform:translateY(-6px);
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 44px rgba(44,58,28,.3); }

.cat__art{
  width:150px; height:150px; border-radius:50%;
  background:
    var(--crumple) center / 260px 260px repeat,
    radial-gradient(circle at 48% 40%, var(--paper-2), var(--paper-3));
  background-blend-mode: multiply, normal;
  display:grid; place-items:center; margin-bottom:14px;
  box-shadow:inset 0 0 0 3px rgba(255,249,226,.7), 0 6px 16px rgba(44,38,18,.25);
}
.cat__art{ overflow:hidden; }
.cat__art img{ width:100%; height:100%; object-fit:contain; padding:9%;
  mix-blend-mode:multiply; filter:drop-shadow(0 3px 4px rgba(52,44,20,.18)); }
.cat__art .sketch{ width:64%; height:64%; color:var(--olive-deep); opacity:.9; }
.cat__name{
  font-family:var(--font-hand); font-weight:700; font-size:2.15rem; line-height:.9;
  color:var(--paper-2); text-shadow:0 2px 3px rgba(20,28,12,.5); letter-spacing:.02em;
}
.cat__count{ font-family:var(--font-script); font-size:1.15rem; color:#e9efcf; opacity:.95; }
.cat__tag{ margin-top:8px; color:#eef2dd; font-size:.9rem; max-width:24ch; }
.cat__link{
  margin-top:auto; padding-top:14px;
  font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-2); display:inline-flex; align-items:center; gap:.4em;
}
.cat__link svg{ width:16px; height:16px; transition:transform .18s ease; }
.cat:hover .cat__link svg{ transform:translateX(4px); }

/* =========================================================== PRODUITS */
.prod-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 10px;
  margin-bottom:34px;
}
.filter{
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.5em 1.1em; border-radius:40px; color:var(--olive-deep);
  background:rgba(255,249,226,.6); box-shadow:inset 0 0 0 1.5px var(--sage-2);
  transition:all .15s ease;
}
.filter:hover{ background:rgba(131,147,81,.16); }
.filter.active{ background:var(--olive); color:var(--paper-2); box-shadow:var(--shadow-sm); }
.prod-toolbar .count{ margin-left:auto; color:var(--ink-faint); font-size:.86rem; }

.prod-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:30px 26px;
}
.card{
  position:relative;
  background:transparent;
  display:flex; flex-direction:column;
  /* --tilt : inclinaison de la feuille, variée plus bas selon la position */
  --tilt:-0.9deg; --tape:-3deg;
  transform:rotate(var(--tilt));
  transition:transform .28s cubic-bezier(.22,.9,.3,1.1);
}
/* feuilles épinglées de travers : quatre angles qui tournent, plus une reprise
   tous les 7 pour casser la régularité d'une grille à 3 ou 4 colonnes */
.card:nth-child(4n+2){ --tilt:1.1deg;  --tape:2.5deg; }
.card:nth-child(4n+3){ --tilt:-1.5deg; --tape:-1.5deg; }
.card:nth-child(4n+4){ --tilt:0.7deg;  --tape:4deg; }
.card:nth-child(7n){   --tilt:1.6deg;  --tape:-4.5deg; }
.card:nth-child(5n+1){ --tilt:-1.3deg; --tape:1.5deg; }
.card::before{ /* feuille de papier (bords rognés via filtre SVG si dispo) */
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,var(--paper-2),var(--paper));
  border-radius:4px;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14);
}
.paper-rough .card::before{ filter:url(#paperEdge); border-radius:2px; }
.card > *{ position:relative; z-index:1; } /* contenu net, au-dessus du papier */
.card::after{ /* ruban adhésif vert (couleur logo), translucide */
  content:""; position:absolute; z-index:2; top:-9px; left:50%; width:78px; height:26px;
  transform:translateX(-50%) rotate(var(--tape));
  background:linear-gradient(180deg,rgba(131,147,81,.55),rgba(111,126,61,.5));
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  border-left:1px dashed rgba(255,255,255,.4); border-right:1px dashed rgba(255,255,255,.4);
}
/* au survol : la feuille se décolle, se redresse et retombe légèrement —
   « forwards » garde l'état final tant que la souris reste dessus, et la
   transition du .card ramène la feuille à son angle au départ de la souris */
@keyframes carteDecolle{
  0%{   transform:rotate(var(--tilt)) translateY(0) scale(1); }
  45%{  transform:rotate(calc(var(--tilt) * .2)) translateY(-10px) scale(1.025); }
  75%{  transform:rotate(calc(var(--tilt) * -.12)) translateY(-4px) scale(1.012); }
  100%{ transform:rotate(0deg) translateY(-6px) scale(1.018); }
}
.card:hover, .card:focus-within{
  animation:carteDecolle .42s cubic-bezier(.25,.9,.3,1.15) forwards;
  z-index:3;   /* la feuille soulevée passe au-dessus de ses voisines */
}
/* pas de changement d'ombre sur ::before au survol : évite de recalculer le filtre turbulence */
@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
  .card:hover, .card:focus-within{ animation:none; transform:rotate(0deg) translateY(-4px); }
}
.card__media{
  display:block; position:relative; margin:16px 16px 0; border-radius:3px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, #fffdef, var(--paper-3));
  aspect-ratio:4/3;
}
.card__name a:hover{ color:var(--olive-deep); }
.card__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease; }
.card:hover .card__media img{ transform:scale(1.04); }
.card__media::after{ content:""; position:absolute; inset:0; border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(78,102,54,.28); pointer-events:none; }
/* rupture de stock */
.card--out .card__media img{ filter:grayscale(.55) brightness(1.04) opacity(.72); }
.card--out .card__name{ color:var(--ink-soft); }
.badge{
  position:absolute; top:10px; left:10px;
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.32em .7em; border-radius:3px; color:#fff; background:var(--olive-deep);
  box-shadow:var(--shadow-sm);
}
.badge--rare{ background:var(--terra); }
.badge--new{ background:var(--gold); }
.badge--out{ background:#8a7f5e; }
.badge--low{ background:var(--terra-2); }

/* bouton « aperçu rapide » sur la carte */
.card__quick{ position:absolute; left:50%; bottom:10px; z-index:3; transform:translate(-50%,6px);
  border:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:.78rem; color:var(--olive-deep);
  background:rgba(255,249,226,.94); box-shadow:var(--shadow-sm); padding:.5em 1.05em; border-radius:30px;
  opacity:0; transition:opacity .18s ease, transform .18s ease, background .15s, color .15s; }
.card:hover .card__quick{ opacity:1; transform:translate(-50%,0); }
.card__quick:hover{ background:var(--olive); color:var(--paper-2); }
@media (hover:none){ .card__quick{ display:none; } }

/* modale aperçu rapide */
.qv-box{ width:min(720px,96vw); padding:24px 26px; }
.qv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.qv-media{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1/1;
  background:radial-gradient(circle at 50% 42%,#fffdef,var(--paper-3)); box-shadow:inset 0 0 0 2px rgba(78,102,54,.22); }
.qv-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.qv-cat{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.qv-name{ font-family:var(--font-hand); font-weight:700; font-size:2.3rem; color:var(--olive-ink); margin:2px 0; line-height:1; }
.qv-latin{ font-style:italic; color:var(--ink-faint); font-size:.9rem; margin-bottom:6px; }
.qv-desc{ color:var(--ink-soft); line-height:1.6; margin:8px 0; }
.qv-price{ font-family:var(--font-hand); font-weight:700; font-size:2rem; color:var(--olive-deep); margin-top:4px; }
.qv-stock{ display:inline-block; font-size:.8rem; font-weight:600; border-radius:20px; padding:.25em .8em; margin:6px 8px 4px 0; }
.qv-stock.ok{ background:rgba(131,147,81,.18); color:var(--olive-deep); }
.qv-stock.no{ background:rgba(169,84,47,.15); color:var(--terra-2); }
.qv-low{ font-size:.8rem; color:var(--terra-2); font-weight:600; }
.qv-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; align-items:center; }
@media (max-width:560px){ .qv-grid{ grid-template-columns:1fr; } .qv-media{ aspect-ratio:16/10; } }
.card__body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card__cat{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--olive-2); font-weight:600; }
.card__name{ font-family:var(--font-hand); font-weight:700; font-size:1.72rem; line-height:.92; color:var(--ink); }
.card__latin{ font-style:italic; font-size:.82rem; color:var(--ink-faint); margin-top:-2px; }
.card__desc{ font-size:.84rem; color:var(--ink-soft); margin:6px 0 2px; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; }

/* étiquette-prix façon fiche de spécimen */
.price{
  position:relative; font-family:var(--font-hand); font-weight:700;
  font-size:1.9rem; line-height:1; color:var(--olive-deep);
  padding-left:20px;
}
.price::before{
  content:""; position:absolute; left:0; top:52%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%;
  background:var(--paper); box-shadow:inset 0 0 0 3px var(--olive-2);
}
.price small{ font-size:.9rem; }
/* le prix à l’individu, sous le prix du lot (cloportes vendus par 6 ou 12) */
.price__u{ display:block; margin-top:3px; font-family:var(--font-body,inherit); font-weight:500;
  font-size:.68rem; line-height:1.3; letter-spacing:.01em; color:var(--ink-faint); }
.price.free{ color:var(--terra); }

.add-btn{
  --bg:var(--olive); --fg:var(--paper-2);
  display:inline-flex; align-items:center; gap:.4em;
  padding:.6em 1.05em; font-weight:600; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--fg); background:var(--bg); border-radius:3px 8px 3px 8px;
  box-shadow:var(--shadow-sm); transition:transform .15s ease, background .15s ease;
}
.add-btn svg{ width:15px; height:15px; }
.add-btn:hover{ background:var(--olive-2); transform:translateY(-2px) rotate(-.5deg); }
.add-btn:disabled{ background:#a99f80; cursor:not-allowed; transform:none; }
.add-btn.added{ background:var(--terra); }

/* catégorie sans produit */
.empty-cat{ grid-column:1/-1; text-align:center; padding:40px 20px 50px; }
.empty-cat img{ width:150px; height:150px; object-fit:contain; margin:0 auto 12px;
  mix-blend-mode:multiply; filter:drop-shadow(0 6px 10px rgba(52,44,20,.2)); }
.empty-cat h3{ font-family:var(--font-hand); font-weight:700; font-size:2.4rem; color:var(--olive-ink); margin:0; }
.empty-cat p{ max-width:44ch; margin:6px auto 20px; color:var(--ink-soft); }

/* ============================================= BANDES MATÉRIEL/ALIM */
.strip{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.promo{
  position:relative; overflow:hidden; border-radius:6px; padding:38px 42px;
  color:var(--paper-2); min-height:230px; display:flex; flex-direction:column; justify-content:center;
  box-shadow:var(--shadow-md);
}
/* la peinture olive déborde pour couvrir tout le panneau (bords rognés = net) */
.promo::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:url("../img/stroke-1.svg") center/152% 178% no-repeat; }
.promo.alt::before{ background-image:url("../img/stroke-3.svg"); }
.promo__art{ position:absolute; right:18px; bottom:18px; width:128px; height:128px;
  border-radius:50%; overflow:hidden; background:var(--paper-2);
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 0 0 4px rgba(255,249,226,.6); }
.promo__art img{ width:100%; height:100%; object-fit:contain; padding:10%; mix-blend-mode:multiply; }
.promo .kicker{ font-family:var(--font-script); font-size:1.5rem; color:#f2ead1; }
.promo h3{ font-family:var(--font-hand); font-weight:700; font-size:2.6rem; margin:.05em 0 .2em; line-height:.9; }
.promo p{ max-width:26ch; color:#eef2dd; margin:0 0 18px; }
.promo .btn{ --bg:var(--paper-2); --fg:var(--olive-deep); align-self:flex-start; }
.promo .btn:hover{ background:#fff; }

/* ================================================================ STORY */
.story{ display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:center; }
.story__frame{ position:relative; }
.story__frame::before{ content:""; position:absolute; inset:-16px;
  background:url("../img/stroke-2.svg") center/100% 100% no-repeat;
  filter:drop-shadow(0 12px 22px rgba(52,44,20,.25)); z-index:-1; }
.story__frame .paper{
  background:var(--paper-2); border-radius:4px; padding:22px;
  box-shadow:0 6px 14px rgba(52,44,20,.20), 0 20px 42px rgba(52,44,20,.26), inset 0 0 0 1px rgba(120,105,60,.18);
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.story__frame .paper .cell{ position:relative; aspect-ratio:1/1; border-radius:3px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, #fffdef, var(--paper-3)); }
.story__frame .paper .cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.story__frame .paper .cell::after{ content:""; position:absolute; inset:0; border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(78,102,54,.25); pointer-events:none; }
.story h2{ font-family:var(--font-hand); font-weight:700; font-size:clamp(2.6rem,5vw,3.6rem);
  line-height:.9; color:var(--olive-ink); margin:.1em 0 .3em; }
.story p{ color:var(--ink-soft); margin:0 0 14px; }
.story .signature{ font-family:var(--font-script); font-size:2rem; color:var(--terra); }
.values{ display:flex; gap:26px; flex-wrap:wrap; margin-top:22px; }
.values li{ display:flex; align-items:center; gap:10px; font-weight:500; font-size:.9rem; color:var(--ink); }
.values svg{ width:26px; height:26px; color:var(--olive-deep); }

/* ============================================================ NEWSLETTER */
.news{ position:relative; overflow:hidden; }
.news__box{
  position:relative; border-radius:8px; padding:52px 40px; text-align:center;
  color:var(--paper-2); box-shadow:var(--shadow-md);
}
.news__box::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:url("../img/banner.svg") center/100% 100% no-repeat; transform:scaleY(1.9); }
.news__box h2{ font-family:var(--font-hand); font-weight:700; font-size:clamp(2.4rem,5vw,3.4rem); margin:0 0 .1em; }
.news__box p{ color:#eef2dd; margin:0 auto 22px; max-width:46ch; }
.news form{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.news input{
  font-family:var(--font-body); font-size:.95rem; padding:.8em 1.1em; min-width:min(320px,80vw);
  border:none; border-radius:4px; background:var(--paper-2); color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.news input:focus{ outline:3px solid rgba(255,249,226,.6); }
.news input.bad{ box-shadow:inset 0 0 0 2px var(--terra); }
.news__ok{ display:inline-block; background:rgba(255,249,226,.15); border:1.5px solid rgba(255,249,226,.5);
  color:var(--paper-2); border-radius:10px; padding:14px 22px; font-weight:600; font-size:1.05rem; }
.news__ok span{ display:block; font-weight:400; font-size:.85rem; color:#eef2dd; margin-top:4px; }

/* ================================================================ FOOTER */
.site-footer{ margin-top:20px; background:linear-gradient(180deg,var(--olive-deep),var(--olive-ink)); color:#e9efcf; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; padding:56px 0 40px; }
.site-footer h4{ font-family:var(--font-hand); font-weight:700; font-size:1.7rem; color:var(--paper-2); margin:0 0 14px; letter-spacing:.02em; }
.site-footer a{ color:#dbe4c0; font-size:.9rem; line-height:2; transition:color .15s ease; }
.site-footer a:hover{ color:#fff; }
.footer-brand p{ color:#c9d5aa; font-size:.9rem; max-width:34ch; }
.footer-brand .brand__name{ color:var(--paper-2); }
.footer-brand .brand__name small{ color:#cdd8ac; }
.socials{ display:flex; gap:10px; margin-top:16px; }
.socials a{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.1); }
.socials a:hover{ background:rgba(255,255,255,.22); }
.socials svg{ width:20px; height:20px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding:18px 0; display:flex;
  flex-wrap:wrap; gap:8px 20px; justify-content:space-between; font-size:.82rem; color:#c1cf9f; }

/* ============================================================ PANIER */
.overlay{
  position:fixed; inset:0; z-index:60; background:rgba(40,34,16,.5);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.overlay.open{ opacity:1; visibility:visible; }
.cart{
  position:fixed; top:0; right:0; z-index:61; height:100%; width:min(420px,92vw);
  background:linear-gradient(180deg,var(--paper-2),var(--paper));
  box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.15,1);
  display:flex; flex-direction:column;
}
.cart.open{ transform:none; }
.cart__head{ display:flex; align-items:center; gap:10px; padding:20px 22px;
  border-bottom:2px solid var(--sage-2); }
.cart__head h3{ font-family:var(--font-hand); font-weight:700; font-size:2rem; margin:0; color:var(--olive-ink); }
.cart__head .icon-btn{ margin-left:auto; }
/* base 0 : la liste prend la place qui reste et rend le reste visible —
   sans ça, deux articles suffisaient à pousser le bouton hors de l'écran. */
.cart__items{ flex:1 1 0; min-height:min(30vh,200px); overflow-y:auto; padding:12px 22px; }
.cart__empty{ text-align:center; color:var(--ink-faint); padding:60px 20px; }
.cart__empty svg{ width:64px; height:64px; opacity:.5; margin:0 auto 14px; }
.line{ display:flex; gap:14px; padding:14px 0; border-bottom:1px dashed var(--sage-2); }
.line__art{ width:64px; height:64px; flex:0 0 auto; border-radius:4px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, #fffdef, var(--paper-3)); box-shadow:inset 0 0 0 2px rgba(78,102,54,.2); }
.line__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.line__info{ flex:1; min-width:0; }
.line__name{ font-family:var(--font-hand); font-weight:700; font-size:1.4rem; line-height:.95; color:var(--ink); }
.line__latin{ font-style:italic; font-size:.74rem; color:var(--ink-faint); }
.line__price{ color:var(--olive-deep); font-weight:600; font-size:.92rem; margin-top:2px; }
.qty{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; }
.qty button{ width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  background:var(--sage); color:var(--olive-ink); font-weight:700; line-height:1; }
.qty button:hover{ background:var(--sage-2); }
.qty span{ min-width:22px; text-align:center; font-weight:600; }
.line__rm{ align-self:flex-start; color:var(--ink-faint); font-size:.72rem; text-decoration:underline; }
.line__rm:hover{ color:var(--terra); }
/* Pied du panier en deux étages : ce qui défile, et ce qui reste épinglé.
   Sans ça, les blocs ajoutés (frise, check-list, promo…) chassaient les articles
   et le bouton « Passer commande » hors de l'écran sur un téléphone. */
.cart__foot{ flex:0 1 auto; min-height:0; display:flex; flex-direction:column;
  padding:0 22px 18px; border-top:2px solid var(--sage-2); background:rgba(255,249,226,.7); }
/* la zone qui défile déborde du padding du pied pour occuper toute la largeur */
.cart__haut{ flex:0 1 auto; min-height:0; max-height:34vh; overflow-y:auto; overscroll-behavior:contain;
  margin:0 -22px 4px; padding:14px 22px 4px; }
/* le reste — total, bouton, départ, note — ne bouge jamais */
.cart__foot > .cart__row, .cart__foot > .btn, .cart__foot > .cart__note,
.cart__foot > #cartShip{ flex:0 0 auto; }
.cart__foot > .cart__row{ margin:12px 0 10px; }
/* la date de départ reste au-dessus du bouton : compacte, deux lignes maxi */
.cart__foot > #cartShip{ margin-top:10px; padding:8px 12px; font-size:.78rem; line-height:1.4; }
.cart__foot > #cartShip span{ font-size:.72rem; }
/* la frise du voyage : décorative, elle ne doit ni déborder ni pousser le reste */
#cartFrise{ flex:0 0 auto; padding:2px 0 6px; }
#cartFrise .frise--min b{ font-size:.64rem; }
@media (max-height:780px){ #cartFrise{ display:none; } }
/* écran court (paysage, petit portable) : on compacte la zone épinglée pour
   laisser de la place aux articles plutôt que de rogner le bouton */
@media (max-height:660px){
  .cart__head{ padding:12px 22px; }
  .cart__head h3{ font-size:1.6rem; }
  .cart__foot{ padding-bottom:12px; }
  .cart__foot > .cart__row{ margin:8px 0; }
  .cart__total{ font-size:1.7rem; }
  .cart__foot > .btn--lg{ padding:.7em 1.2em; font-size:.95rem; }
  .cart__note, .cart__foot > #cartShip{ display:none; }
}
/* check-list du bac : elle défile chez elle plutôt que d'étirer le panier */
#bacBox{ max-height:34vh; overflow-y:auto; overscroll-behavior:contain; }
.cart__row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.cart__row .t{ color:var(--ink-soft); }
.cart__total{ font-family:var(--font-hand); font-weight:700; font-size:2.2rem; color:var(--olive-ink); }
.cart__note{ font-size:.74rem; color:var(--ink-faint); text-align:center; margin-top:10px; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(120%);
  z-index:70; background:var(--olive-deep); color:var(--paper-2);
  padding:.8em 1.4em; border-radius:6px; box-shadow:var(--shadow-md);
  font-weight:500; font-size:.9rem; display:flex; align-items:center; gap:.5em;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}
.toast svg{ width:20px; height:20px; }
.toast.show{ transform:translateX(-50%) translateY(0); }

/* page boutique : entête */
.page-hero{ text-align:center; padding:52px 0 10px; }
.page-hero .banner{ margin-bottom:14px; }
.breadcrumb{ font-size:.8rem; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; }
.breadcrumb a:hover{ color:var(--olive-deep); }

/* ============================================================ RESPONSIVE */
/* en-tête : le menu (7 entrées) + 4 icônes se resserrent avant de passer en burger */
@media (max-width:1150px){
  .header-top{ gap:14px; }
  .main-nav ul{ gap:12px; }
  .main-nav a{ font-size:.76rem; letter-spacing:.03em; }
  .brand__name{ font-size:1.95rem; }
}
@media (max-width:1000px){
  .main-nav ul{ gap:9px; }
  .main-nav a{ font-size:.72rem; letter-spacing:.01em; }
  .brand__mark{ width:57px; height:40px; }
  .brand__name{ font-size:1.7rem; }
  .brand__name small{ display:none; }
  .icon-btn{ width:38px; height:38px; }
  .icon-btn svg{ width:20px; height:20px; }
}
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ order:-1; min-height:280px; }
  .story{ grid-template-columns:1fr; }
  .cats__grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
/* menu latéral (burger) : dès 820px, le menu horizontal n'a plus la place */
@media (max-width:820px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(300px,84vw); z-index:65;
    background-color:#fbf3d6;
    background-image:linear-gradient(180deg,var(--paper-2),var(--paper));
    box-shadow:var(--shadow-lg); transform:translateX(100%);
    transition:transform .3s ease; padding:80px 28px;
  }
  .main-nav.open{ transform:none; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:6px; }
  .main-nav a{ font-size:1rem; letter-spacing:.08em; padding:10px 0; }
  .brand__mark{ width:66px; height:46px; }
  .brand__name{ font-size:2.15rem; }
  .brand__name small{ display:block; }
  .nav-toggle{ display:grid; }
}
@media (max-width:760px){
  .strip{ grid-template-columns:1fr; }
  .section{ padding:52px 0; }
}
@media (max-width:520px){
  .cats__grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:24px; }
  .hero__stats{ gap:20px; }
  /* grille produits : 2 colonnes nettes, sans débordement */
  .prod-grid{ grid-template-columns:repeat(2,1fr); gap:16px 12px; }
  .card{ min-width:0; }
  .card__foot{ flex-direction:column; align-items:stretch; gap:9px; }
  .add-btn{ width:100%; justify-content:center; padding:.72em 1em; }
  /* en-tête compact (tient sur une ligne) */
  .brand__mark{ width:55px; height:38px; }
  .brand__name{ font-size:1.65rem; }
  .brand__name small{ display:none; }
  .brand{ gap:9px; }
  .header-actions{ gap:2px; }
  .icon-btn{ width:38px; height:38px; }
  .icon-btn svg{ width:20px; height:20px; }
  /* avis : cartes un peu plus étroites */
  .rv-card{ width:min(300px,80vw); }
}

/* ======================================================= FICHE ESPÈCE */
.fiche-wrap{ padding:30px 0 10px; }
.fiche-breadcrumb{ font-size:.8rem; color:var(--ink-faint); letter-spacing:.04em; margin-bottom:22px; }
.fiche-breadcrumb a:hover{ color:var(--olive-deep); }
.fiche-breadcrumb .sep{ opacity:.5; margin:0 .4em; }

.fiche-hero{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:48px; align-items:start; }

.fiche-media{ position:relative; }
.fiche-media__main{ position:relative; aspect-ratio:1/1; }
.fiche-media__main::before{ content:""; position:absolute; inset:-15px;
  background:url("../img/stroke-2.svg") center/100% 100% no-repeat; z-index:0;
  filter:drop-shadow(0 14px 26px rgba(52,44,20,.28)); }
.fiche-media__main img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
  display:block; border-radius:6px; box-shadow:0 6px 18px rgba(52,44,20,.22); }
.fiche-media__main .badge{ position:absolute; z-index:2; top:14px; left:14px; font-size:.7rem; }

.fiche-info__group{ font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--olive-2); }
.fiche-info h1{ font-family:var(--font-hand); font-weight:700; font-size:clamp(2.8rem,6vw,4.4rem);
  line-height:.86; color:var(--olive-ink); margin:.08em 0 .04em; }
.fiche-info__latin{ font-style:italic; color:var(--ink-faint); font-size:1.02rem; }
.fiche-info__tag{ font-family:var(--font-script); font-size:1.5rem; color:var(--terra); margin:.35em 0 0; }
.fiche-buy{ display:flex; align-items:center; gap:16px 20px; flex-wrap:wrap; margin:22px 0 18px;
  padding:18px 20px; border-radius:8px; background:rgba(255,249,226,.7);
  box-shadow:inset 0 0 0 1.5px var(--sage-2); }
.fiche-buy .price{ font-size:2.6rem; }
.fiche-buy .stock{ display:inline-flex; align-items:center; gap:.4em; font-size:.82rem; font-weight:600;
  padding:.3em .8em; border-radius:40px; }
.fiche-buy .stock.ok{ color:var(--olive-deep); background:rgba(131,147,81,.18); }
.fiche-buy .stock.no{ color:var(--terra-2); background:rgba(169,84,47,.14); }
.fiche-buy .stock::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.fiche-buy .add-btn{ margin-left:auto; font-size:.82rem; padding:.85em 1.5em; }
.fiche-buy .btn{ margin-left:auto; }
.fiche-assur{ display:flex; gap:14px 26px; flex-wrap:wrap; }
.fiche-assur li{ display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--ink-soft); }
.fiche-assur svg{ width:22px; height:22px; color:var(--olive-deep); flex:0 0 auto; }

.idcard{ margin:40px 0 8px; position:relative; border-radius:10px; padding:26px 28px 22px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper)); box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.16); }
.idcard__title{ display:flex; align-items:center; gap:12px; font-family:var(--font-hand); font-weight:700;
  font-size:2rem; color:var(--olive-ink); margin:0 0 18px; }
.idcard__title::after{ content:""; flex:1; height:2px; background:repeating-linear-gradient(90deg,var(--sage-2) 0 7px,transparent 7px 14px); }
.idcard__title svg{ width:24px; height:24px; flex:0 0 auto; color:var(--olive); }
.idcard__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:20px 22px; }
.idc{ display:flex; gap:12px; align-items:flex-start; }
.idc__ic{ width:38px; height:38px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center;
  background:rgba(131,147,81,.15); color:var(--olive-deep); }
.idc__ic svg{ width:21px; height:21px; }
.idc__k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); font-weight:600; }
.idc__v{ font-size:.98rem; color:var(--ink); font-weight:500; line-height:1.25; }
.diff-meter{ display:inline-flex; gap:4px; margin-top:4px; }
.diff-meter i{ width:9px; height:9px; border-radius:50%; background:var(--sage-2); }
.diff-meter i.on{ background:var(--olive); }

.fiche-pdf{ margin-top:16px; }
.fiche-lot{ font-family:var(--font-body); font-size:.95rem; padding:.6em .9em; border:none; border-radius:8px;
  background:var(--paper-2); box-shadow:inset 0 0 0 1.5px var(--sage-2); color:var(--ink); margin-right:10px; margin-bottom:6px; }
.line__lot{ display:inline-block; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background:rgba(131,147,81,.2); color:var(--olive-deep); border-radius:4px; padding:.12em .5em; margin-left:4px; vertical-align:middle; }

/* carte d'identité + « en un coup d'œil » : deux blocs côte à côte */
.glance{ max-width:980px; margin:46px auto 0; }
.glance-col__t{ font-family:var(--font-hand); font-weight:700; font-size:1.75rem; color:var(--olive-deep);
  display:flex; align-items:center; gap:9px; margin:0 0 4px;
  align-self:flex-start; }   /* la banniere epouse son texte, pas la colonne */
.glance-col__t svg{ width:22px; height:22px; flex:0 0 auto; color:var(--olive); }
.glance__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.glance-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.glance-table{ width:100%; border-collapse:collapse; background:var(--paper-2); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14); }
.glance-table th, .glance-table td{ text-align:left; padding:11px 16px; font-size:.92rem; border-bottom:1px solid var(--sage-2); vertical-align:top; }
.glance-table tr:last-child th, .glance-table tr:last-child td{ border-bottom:none; }
.glance-table th{ width:44%; color:var(--olive-deep); font-weight:600; background:rgba(131,147,81,.08); }
.glance-table td{ color:var(--ink); }
.glance-sum{ background:linear-gradient(180deg,var(--paper-2),var(--paper)); border-radius:12px; padding:18px 20px;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14); }
.glance-sum__lead{ font-family:var(--font-script); font-size:1.5rem; color:var(--terra); margin:0 0 10px; line-height:1.2; }
.glance-sum p{ color:var(--ink-soft); line-height:1.6; margin:0; }
@media (max-width:720px){ .glance__grid{ grid-template-columns:1fr; gap:20px; } }

/* titres de fiche en bannière verte peinte (comme les sections de l'accueil) */
.fiche-wrap .fiche-sec > h2, .fiche-wrap .glance-col__t{
  display:inline-flex; align-items:center; gap:9px; position:relative;
  color:var(--paper-2); padding:.14em .95em .34em; transform:rotate(-1deg);
  text-shadow:0 2px 0 rgba(0,0,0,.18);
}
.fiche-wrap .fiche-sec > h2::before, .fiche-wrap .glance-col__t::before{
  content:""; position:absolute; inset:-7px -6px; z-index:-1;
  background:url("../img/banner.svg") center/100% 100% no-repeat;
  filter:drop-shadow(0 7px 13px rgba(52,44,20,.26));
}
.fiche-wrap .fiche-sec > h2 svg, .fiche-wrap .glance-col__t svg{ color:var(--paper-2); }
/* les deux bannieres ne penchent pas du meme cote */
.fiche-wrap .glance-col__t--alt{ transform:rotate(1deg); }
.fiche-body{ max-width:760px; margin:52px auto 0; }
.fiche-sec{ margin-bottom:34px; }
.fiche-sec > h2{ font-family:var(--font-hand); font-weight:700; font-size:2.1rem; color:var(--olive-deep);
  margin:0 0 10px; display:flex; align-items:center; gap:10px; }
.fiche-sec > h2 svg{ width:24px; height:24px; flex:0 0 auto; color:var(--olive); }
.fiche-sec p{ color:var(--ink-soft); margin:0 0 12px; line-height:1.7; }
.fiche-sec .f-list{ display:grid; gap:9px; margin:6px 0 12px; padding:0; }
.fiche-sec .f-list li{ position:relative; padding-left:20px; color:var(--ink-soft); line-height:1.55; }
.fiche-sec .f-list li::before{ content:""; position:absolute; left:2px; top:.5em; width:8px; height:8px;
  border-radius:2px; background:var(--olive); transform:rotate(45deg); }
.fiche-sec .f-list li b{ color:var(--ink); font-weight:600; }
.fiche-sec .c-list{ display:grid; gap:7px; margin:4px 0 14px; padding:0; }
.fiche-sec .c-list li{ position:relative; padding-left:20px; color:var(--ink-soft); line-height:1.5; }
.fiche-sec .c-list li::before{ content:""; position:absolute; left:5px; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--sage-2); }

.why{ position:relative; border-radius:10px; padding:26px 30px; margin:8px 0 4px;
  background:linear-gradient(180deg,rgba(131,147,81,.14),rgba(131,147,81,.07));
  box-shadow:inset 0 0 0 1.5px rgba(131,147,81,.3); }
.why h2{ font-family:var(--font-hand); font-weight:700; font-size:2rem; color:var(--olive-ink); margin:0 0 12px; }
.why ul{ display:grid; gap:10px; padding:0; }
.why li{ display:flex; gap:11px; align-items:flex-start; color:var(--ink); line-height:1.5; }
.why li svg{ width:22px; height:22px; flex:0 0 auto; color:var(--olive-deep); margin-top:1px; }

.fiche-related{ margin-top:16px; }
.fiche-related .section-head{ margin-bottom:30px; }
.fiche-notfound{ text-align:center; padding:80px 20px; }
.fiche-notfound h1{ font-family:var(--font-hand); font-size:3rem; color:var(--olive-ink); }

@media (max-width:900px){
  .fiche-hero{ grid-template-columns:1fr; gap:26px; }
  .fiche-media{ max-width:460px; margin:0 auto; width:100%; }
  .fiche-buy .add-btn, .fiche-buy .btn{ margin-left:0; }
}
@media (max-width:520px){
  .fiche-buy .add-btn, .fiche-buy .btn{ width:100%; justify-content:center; }
  .idcard{ padding:22px 18px; }
}

/* ================================================= OPTIONS BOUTIQUE */
/* bandeau d'annonce */
.announce{ background:linear-gradient(90deg,var(--olive-deep),var(--olive),var(--olive-deep)); color:var(--paper-2);
  text-align:center; font-size:.86rem; font-weight:500; letter-spacing:.02em; padding:8px 16px; }
.announce a{ color:var(--paper-2); text-decoration:none; }
.announce a:hover{ text-decoration:underline; }

/* cœur favori sur les cartes */
.fav{ position:absolute; z-index:3; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,249,226,.92); color:var(--olive-deep);
  box-shadow:var(--shadow-sm); transition:transform .15s, color .15s, background .15s; }
.fav svg{ width:19px; height:19px; }
.fav:hover{ transform:scale(1.12); }
.fav.on{ color:#fff; background:var(--terra); }
.fav.on svg{ fill:currentColor; }

/* bouton + compteur favoris (header) */
.fav-btn{ position:relative; }
.fav-count{ position:absolute; top:2px; right:2px; min-width:19px; height:19px; padding:0 4px;
  background:var(--olive); color:#fff; font-size:.66rem; font-weight:700; border-radius:10px;
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--paper); transform:scale(0);
  transition:transform .2s cubic-bezier(.3,1.6,.5,1); }
.fav-count.show{ transform:scale(1); }
.favdrawer .line__art{ overflow:hidden; }

/* panier : livraison + promo */
#promoRow{ margin-bottom:12px; }
.ship-bar{ height:7px; border-radius:6px; background:var(--sage); overflow:hidden; margin-bottom:7px; }
.ship-bar__fill{ height:100%; width:0; background:linear-gradient(90deg,var(--olive),var(--olive-2)); transition:width .35s ease; }
.ship-msg{ font-size:.78rem; color:var(--ink-soft); text-align:center; margin-bottom:12px; min-height:1em; }
.ship-msg b{ color:var(--olive-deep); }
.promo-in{ display:flex; gap:8px; margin-bottom:12px; }
.promo-in input{ flex:1; font-family:inherit; font-size:.85rem; padding:.6em .9em; border:none; border-radius:6px;
  background:var(--paper-2); box-shadow:inset 0 0 0 1.5px var(--sage-2); text-transform:uppercase; color:var(--ink); }
.promo-in input.bad{ box-shadow:inset 0 0 0 1.5px var(--terra); color:var(--terra-2); }
.promo-in .btn{ padding:.6em 1em; }
.cart__row.sub{ font-size:.86rem; color:var(--ink-soft); margin-bottom:5px; }
.cart__row.sub .t{ color:var(--ink-faint); }

/* avis clients */
.reviews{ padding-top:20px; }
.rv-summary{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:24px; font-size:1rem; color:var(--ink-soft); }
.rv-summary b{ font-family:var(--font-hand); font-size:2rem; color:var(--olive-deep); }
.stars, .rv-stars{ letter-spacing:2px; color:var(--sage-2); }
.stars .on{ color:#e0a53a; }
.rv-list{ display:grid; gap:14px; margin-bottom:32px; }
.rv{ background:var(--paper-2); border-radius:10px; padding:16px 18px; box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.12); }
.rv__top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.rv__top .stars{ font-size:.9rem; }
.rv p{ color:var(--ink-soft); margin:4px 0 6px; line-height:1.55; }
.rv time{ font-size:.74rem; color:var(--ink-faint); }
.rv-none{ text-align:center; color:var(--ink-faint); }
.rv-form{ background:var(--paper-2); border-radius:12px; padding:22px; box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14); }
.rv-form h3{ font-family:var(--font-hand); font-weight:700; font-size:1.7rem; color:var(--olive-ink); margin:0 0 12px; }
.rv-stars{ font-size:1.7rem; cursor:pointer; margin-bottom:12px; user-select:none; }
.rv-stars .on{ color:#e0a53a; }
.rv-form input, .rv-form textarea{ width:100%; font-family:inherit; font-size:.92rem; padding:.7em .9em; margin-bottom:10px;
  border:none; border-radius:8px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--sage-2); color:var(--ink); }
.rv-form textarea{ min-height:80px; resize:vertical; }

/* recherche + tri boutique */
.shop-tools{ display:flex; gap:10px; margin-left:auto; flex-wrap:wrap; }
.shop-search{ position:relative; display:flex; align-items:center; }
.shop-search svg{ position:absolute; left:12px; width:17px; height:17px; color:var(--ink-faint); pointer-events:none; }
.shop-search input{ font-family:inherit; font-size:.86rem; padding:.55em .9em .55em 2.2em; border:none; border-radius:40px;
  background:rgba(255,249,226,.7); box-shadow:inset 0 0 0 1.5px var(--sage-2); color:var(--ink); min-width:210px; }
#shopSort{ font-family:inherit; font-size:.82rem; padding:.55em .9em; border:none; border-radius:40px;
  background:rgba(255,249,226,.7); box-shadow:inset 0 0 0 1.5px var(--sage-2); color:var(--olive-deep); font-weight:600; }
/* menu déroulant « classer les isopodes par famille » */
.iso-family-wrap{ display:flex; align-items:center; }
.iso-family{ font-family:inherit; font-size:.82rem; padding:.55em .95em; border:none; border-radius:40px;
  background:rgba(255,249,226,.85); box-shadow:inset 0 0 0 1.5px var(--olive); color:var(--olive-deep);
  font-weight:600; cursor:pointer; max-width:100%; }
.iso-family:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--olive-deep); }
@media (max-width:640px){ .iso-family-wrap{ width:100%; } .iso-family{ width:100%; } }

/* texte d'intro de la boutique (éditable dans l'admin) */
.shop-intro{ max-width:760px; margin:2px auto 0; }
.shop-intro:empty{ display:none; }
.shop-intro h2{ font-family:var(--font-hand); font-weight:700; font-size:clamp(1.9rem,4vw,2.5rem);
  color:var(--olive-deep); line-height:1; margin:0 0 12px; }
.shop-intro p{ color:var(--ink-soft); line-height:1.75; margin:0 0 13px; font-size:.98rem; }
.shop-intro p:last-child{ margin-bottom:0; }
.shop-intro strong{ color:var(--ink); font-weight:600; }
.shop-intro em{ color:var(--olive-2); font-style:italic; }
.shop-intro a{ color:var(--olive-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.shop-intro a:hover{ color:var(--terra); }

/* ---- avis clients (mur défilant) ---- */
.avis-sum{ display:inline-flex; align-items:center; gap:14px; margin-top:16px; }
.avis-sum__score{ font-family:var(--font-hand); font-weight:700; font-size:3.2rem; line-height:.9; color:var(--olive-deep); }
.avis-sum__score small{ font-size:1.2rem; color:var(--ink-faint); font-family:var(--font-body); font-weight:400; }
.avis-sum__right{ text-align:left; }
.avis-sum__stars{ display:block; color:var(--gold); font-size:1.25rem; letter-spacing:3px; }
.avis-sum__meta{ display:block; font-size:.84rem; color:var(--ink-faint); margin-top:2px; }

.avis-marquee{ margin-top:34px; display:flex; flex-direction:column; gap:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.avis-row{ overflow:hidden; }
.avis-track{ display:flex; width:max-content; will-change:transform; }
.avis-track--a{ animation:avisScroll 66s linear infinite; }
.avis-track--b{ animation:avisScroll 66s linear infinite reverse; }
.avis-marquee:hover .avis-track{ animation-play-state:paused; }
@keyframes avisScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.rv-card{ flex:0 0 auto; width:322px; box-sizing:border-box; margin:0 18px 0 0;
  background:linear-gradient(180deg,var(--paper-2),var(--paper)); border-radius:12px; padding:18px 20px;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14); }
.rv-card__top{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.rv-ava{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--olive),var(--olive-deep)); color:var(--paper-2);
  font-family:var(--font-hand); font-weight:700; font-size:1.5rem; }
.rv-card__id{ display:flex; flex-direction:column; line-height:1.15; }
.rv-name{ font-weight:600; color:var(--ink); font-size:.92rem; }
.rv-card__stars{ color:var(--gold); font-size:.9rem; letter-spacing:1.5px; }
.rv-card blockquote{ margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.6; }
@media (prefers-reduced-motion:reduce){
  .avis-track{ animation:none; }
  .avis-row{ overflow-x:auto; }
}
@media (max-width:640px){ .shop-tools{ margin-left:0; width:100%; } .shop-search input{ min-width:0; width:100%; } .shop-search{ flex:1; } }

/* ============ panneaux clairs à bords de papier abîmés ============
   Bords irréguliers via un MASQUE SVG rasterisé une fois (léger),
   le fond passe sur ::before, le texte reste net au-dessus. */
.idcard, .fiche-buy, .rv, .rv-form{ position:relative; background:transparent !important; box-shadow:none !important; }
.idcard::before, .fiche-buy::before, .rv::before, .rv-form::before{
  content:""; position:absolute; inset:-3px; z-index:-1; border-radius:inherit;
  background:linear-gradient(180deg, var(--paper-2), var(--paper));
  box-shadow:inset 0 0 0 1.5px rgba(120,105,60,.26), inset 0 0 20px rgba(140,110,55,.15);
  filter:drop-shadow(0 3px 7px rgba(52,44,20,.16));
  -webkit-mask:var(--torn-mask) center/100% 100% no-repeat;
  mask:var(--torn-mask) center/100% 100% no-repeat;
}
:root{
  --torn-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300' preserveAspectRatio='none'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.014' numOctaves='3' seed='8' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='15'/%3E%3C/filter%3E%3Crect x='9' y='9' width='402' height='282' rx='14' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
}

/* ===================================================== COMPTES CLIENTS */
.acc-btn.on{ color:var(--olive-deep); background:rgba(131,147,81,.18); }

/* modale connexion / inscription */
.auth-modal{ position:fixed; inset:0; z-index:95; background:rgba(40,34,16,.55); display:none; place-items:center; padding:20px; }
.auth-modal.open{ display:grid; }
.auth-box{ position:relative; width:min(420px,94vw); background:linear-gradient(180deg,var(--paper-2),var(--paper));
  border-radius:14px; padding:30px 28px; box-shadow:var(--shadow-lg); }
.auth-box.center{ text-align:center; }
.auth-close{ position:absolute; top:12px; right:12px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--ink-soft); }
.auth-close:hover{ background:rgba(0,0,0,.06); }
.auth-close svg{ width:18px; height:18px; }
.auth-tabs{ display:flex; gap:6px; margin-bottom:18px; background:rgba(120,105,60,.1); border-radius:40px; padding:4px; }
.auth-tabs button{ flex:1; padding:.6em; border-radius:40px; font-family:inherit; font-weight:600; font-size:.85rem; color:var(--ink-soft); }
.auth-tabs button.on{ background:var(--paper-2); color:var(--olive-deep); box-shadow:var(--shadow-sm); }
.auth-msg{ font-size:.86rem; color:var(--ink-soft); background:rgba(176,134,46,.14); border-radius:8px; padding:10px 12px; margin:0 0 14px; }
.auth-form input{ width:100%; font-family:inherit; font-size:.95rem; padding:.8em 1em; margin-bottom:12px; border:none;
  border-radius:8px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--sage-2); color:var(--ink); }
.auth-form input:focus{ outline:3px solid rgba(131,147,81,.25); }
.auth-err{ color:var(--terra-2); font-size:.82rem; min-height:1.1em; margin-bottom:6px; }
.auth-box h3{ font-family:var(--font-hand); font-weight:700; font-size:2.2rem; color:var(--olive-ink); margin:6px 0; }
.auth-box p{ color:var(--ink-soft); margin:0 0 16px; }
.auth-link{ display:block; margin:14px auto 0; color:var(--ink-faint); font-size:.85rem; text-decoration:underline; }
.ok-badge{ width:64px; height:64px; margin:0 auto 8px; border-radius:50%; background:var(--olive); color:#fff; display:grid; place-items:center; }
.ok-badge svg{ width:34px; height:34px; }

/* tunnel de commande (livraison + paiement) */
.co-box{ width:min(540px,96vw); max-height:92vh; overflow:auto; padding:26px 26px 30px; }
.co-box h3{ margin:0 0 14px; }
.co-recap{ background:var(--paper); border-radius:10px; box-shadow:inset 0 0 0 1.5px var(--sage-2); padding:12px 14px; margin-bottom:6px; }
.co-line{ display:flex; justify-content:space-between; gap:12px; font-size:.9rem; color:var(--ink-soft); padding:3px 0; }
.co-line--sub{ color:var(--ink-faint); }
.co-line--tot{ border-top:1px dashed var(--sage-2); margin-top:6px; padding-top:8px; font-weight:700; color:var(--olive-deep); font-size:1rem; }
.co-sec{ font-family:var(--font-hand); font-weight:700; font-size:1.5rem; color:var(--olive-deep); margin:18px 0 10px; }
.co-form{ margin:0; }
.co-row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.co-fld{ display:flex; flex-direction:column; }
.co-lb{ font-size:.76rem; font-weight:600; color:var(--ink-soft); margin:0 0 4px 2px; }
.co-form input, .co-form select{ width:100%; font-family:inherit; font-size:.95rem; padding:.72em .9em; margin-bottom:11px;
  border:none; border-radius:8px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--sage-2); color:var(--ink); }
.co-form input:focus, .co-form select:focus{ outline:3px solid rgba(131,147,81,.25); }
.co-form input.bad{ box-shadow:inset 0 0 0 1.5px var(--terra-2); }
.co-paynote{ font-size:.85rem; color:var(--ink-faint); margin:8px 0 0; text-align:center; }
.co-secure{ font-size:.78rem; color:var(--ink-faint); margin:10px 0 0; text-align:center; }
.co-unavail{ background:rgba(176,134,46,.14); border-radius:10px; padding:16px; text-align:center; color:var(--ink-soft); font-weight:600; }
.co-unavail span{ display:block; font-weight:400; font-size:.85rem; margin-top:4px; color:var(--ink-faint); }
/* commande entièrement réglée par une carte cadeau : plus rien à payer */
.co-free{ background:rgba(131,147,81,.16); border-radius:10px; padding:14px 16px; text-align:center;
  color:var(--ink-soft); font-size:.9rem; line-height:1.55; }
.co-free b{ color:var(--olive-deep); }
.co-free span{ display:block; font-size:.85rem; color:var(--ink-faint); margin-top:2px; }
.co-gift{ width:100%; justify-content:center; margin-top:12px; }
@media (max-width:460px){ .co-row2{ grid-template-columns:1fr; } }

/* page « Mon compte » */
.compte-wrap{ padding:40px 0 60px; }
.compte-empty{ text-align:center; padding:60px 20px; }
.compte-empty h1{ font-family:var(--font-hand); font-size:3rem; color:var(--olive-ink); margin:0 0 8px; }
.compte-empty p{ color:var(--ink-soft); margin:0 0 22px; }
.compte-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:30px; }
.compte-head h1{ font-family:var(--font-hand); font-weight:700; font-size:clamp(2.6rem,5vw,3.6rem); color:var(--olive-ink); line-height:.9; margin:.05em 0 0; }
.compte-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:34px; align-items:start; }
.compte-h2{ font-family:var(--font-hand); font-weight:700; font-size:2rem; color:var(--olive-deep); margin:0 0 14px; }
.compte-card{ background:var(--paper-2); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14); margin-bottom:14px; }
.compte-none{ color:var(--ink-soft); } .compte-none a{ color:var(--olive-deep); font-weight:600; }
.order__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.order__top b{ font-family:var(--font-hand); font-size:1.5rem; color:var(--ink); }
.order__status{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--olive-deep); background:rgba(131,147,81,.18); padding:.3em .7em; border-radius:20px; }
.order__items{ color:var(--ink-soft); font-size:.9rem; margin-bottom:8px; }
.order__foot{ display:flex; justify-content:space-between; align-items:center; border-top:1px dashed var(--sage-2); padding-top:8px; }
.order__foot time{ color:var(--ink-faint); font-size:.8rem; }
.order__foot b{ font-family:var(--font-hand); font-size:1.5rem; color:var(--olive-deep); }
.compte-lb{ display:block; font-size:.74rem; font-weight:600; color:var(--ink-soft); margin:8px 0 4px; }
.compte-card input{ width:100%; font-family:inherit; font-size:.92rem; padding:.65em .9em; border:none; border-radius:8px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--sage-2); color:var(--ink); }
.compte-card input:disabled{ opacity:.6; }
@media (max-width:820px){ .compte-grid{ grid-template-columns:1fr; } }

/* paiement PayPal (dans le panier) */
#paypalBox{ min-height:44px; margin-bottom:8px; }
.pp-empty{ font-size:.8rem; color:var(--ink-faint); text-align:center; margin:0 0 8px; }

/* accessibilité : réduire les animations */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ============================================ ASSISTANT / CHAT (bulle) */
.echat-btn{
  position:fixed; right:22px; bottom:22px; z-index:58;
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  color:var(--paper-2); background:linear-gradient(150deg,var(--olive),var(--olive-deep));
  box-shadow:var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .18s ease, box-shadow .18s ease;
}
.echat-btn:hover{ transform:translateY(-3px) scale(1.04); box-shadow:var(--shadow-lg); }
.echat-btn svg{ width:28px; height:28px; }
.echat-btn.on svg{ opacity:.9; }
.echat-dot{ position:absolute; top:2px; right:2px; width:15px; height:15px; border-radius:50%;
  background:var(--terra); box-shadow:0 0 0 3px var(--paper); }

.echat-panel{
  position:fixed; right:22px; bottom:92px; z-index:59;
  width:min(370px,calc(100vw - 32px)); height:min(560px,calc(100vh - 130px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper-2); border-radius:16px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(120,105,60,.16);
  animation:echatIn .18s ease;
}
/* l'attribut `hidden` doit réellement masquer le panneau (sinon le display:flex ci-dessus l'emporte) */
.echat-panel[hidden]{ display:none; }
@keyframes echatIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.echat-head{ display:flex; align-items:center; gap:11px; padding:13px 14px;
  background:linear-gradient(150deg,var(--olive),var(--olive-deep)); color:var(--paper-2); }
.echat-avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:1.3rem;
  background:rgba(255,249,226,.16); box-shadow:inset 0 0 0 1.5px rgba(255,249,226,.4); flex:0 0 auto; }
.echat-head__t{ line-height:1.2; min-width:0; }
.echat-head__t b{ display:block; font-family:var(--font-hand); font-weight:700; font-size:1.35rem; letter-spacing:.01em; }
.echat-head__t span{ display:block; font-size:.72rem; color:#eef2dd; }
.echat-x{ margin-left:auto; width:30px; height:30px; border-radius:50%; color:var(--paper-2); display:grid; place-items:center;
  flex:0 0 auto; transition:background .15s; }
.echat-x:hover{ background:rgba(255,249,226,.18); }
.echat-x svg{ width:18px; height:18px; }

.echat-body{ flex:1; overflow-y:auto; padding:16px 14px 6px; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, rgba(244,233,196,.5), transparent 120px); }
.echat-msg{ display:flex; align-items:flex-end; gap:7px; max-width:88%; }
.echat-msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.echat-ava{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.95rem;
  background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--sage-2); }
.echat-bub{ padding:9px 12px; border-radius:14px; font-size:.9rem; line-height:1.5; color:var(--ink);
  background:var(--paper); box-shadow:inset 0 0 0 1px rgba(120,105,60,.14); border-bottom-left-radius:5px; }
.echat-bub b{ color:var(--olive-deep); }
.echat-msg.user .echat-bub{ background:linear-gradient(160deg,var(--olive),var(--olive-2)); color:var(--paper-2);
  box-shadow:none; border-radius:14px; border-bottom-right-radius:5px; }
.echat-msg.admin .echat-bub{ background:#fbf1d6; box-shadow:inset 0 0 0 1px rgba(169,84,47,.3); }
/* d'où vient la réponse : le robot cite toujours sa source */
.echat-src{ display:block; margin-top:5px; font-size:.78rem; color:var(--ink-faint); }
.echat-src a{ color:var(--olive-deep); font-weight:600; }
.echat-msg.admin .echat-ava{ background:#f6e7cf; }

.echat-quick{ display:flex; flex-wrap:wrap; gap:7px; padding:8px 12px; }
.echat-quick:empty{ display:none; }
.echat-chip{ font-family:inherit; font-size:.78rem; font-weight:600; color:var(--olive-deep); text-decoration:none;
  background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--sage-2); padding:.5em .85em; border-radius:30px;
  cursor:pointer; transition:background .14s, color .14s, box-shadow .14s; }
.echat-chip:hover{ background:rgba(131,147,81,.16); }
.echat-chip--human{ color:var(--paper-2); background:linear-gradient(160deg,var(--terra),var(--terra-2)); box-shadow:none; }
.echat-chip--human:hover{ background:var(--terra-2); }

.echat-pre{ display:flex; flex-direction:column; gap:7px; align-self:stretch; margin:2px 0 2px 33px;
  background:var(--paper); border-radius:12px; padding:11px; box-shadow:inset 0 0 0 1px rgba(120,105,60,.14); }
.echat-pre input{ font-family:inherit; font-size:.86rem; padding:.55em .75em; border:none; border-radius:8px;
  background:var(--paper-2); box-shadow:inset 0 0 0 1.5px var(--sage-2); color:var(--ink); }
.echat-pre .echat-chip{ align-self:flex-start; }

.echat-input{ display:flex; gap:8px; padding:11px 12px; border-top:1px solid var(--sage-2); background:var(--paper-2); }
.echat-input input{ flex:1; font-family:inherit; font-size:.9rem; padding:.6em .9em; border:none; border-radius:22px;
  background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--sage-2); color:var(--ink); }
.echat-input input:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--olive); }
.echat-send{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:var(--paper-2); background:linear-gradient(150deg,var(--olive),var(--olive-deep)); box-shadow:var(--shadow-sm);
  transition:transform .14s; }
.echat-send:hover{ transform:scale(1.06); }
.echat-send svg{ width:19px; height:19px; }
@media (max-width:480px){
  .echat-panel{ right:10px; left:10px; width:auto; bottom:84px; height:min(72vh,540px); }
  .echat-btn{ right:16px; bottom:16px; }
}

/* ============================ EXTRAS CLIENT ============================ */
/* — bouton retour en haut — */
.to-top{ position:fixed; left:22px; bottom:22px; z-index:58; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--paper-2); color:var(--olive-deep); cursor:pointer;
  box-shadow:var(--shadow-md), inset 0 0 0 2px var(--olive);
  opacity:0; transform:translateY(16px) scale(.85); pointer-events:none;
  transition:opacity .25s, transform .25s cubic-bezier(.3,1.4,.5,1), background .15s; }
.to-top svg{ width:20px; height:20px; }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--olive); color:var(--paper-2); }
@media (max-width:600px){ .to-top{ left:12px; bottom:12px; width:42px; height:42px; } }

/* — apparition au défilement —
   classe préfixée : « .rv » tout court désigne déjà une carte d'avis client
   (plus haut), et les sections héritaient de son fond papier + padding 16px. */
.sec-rv{ opacity:0; transform:translateY(18px); }
.sec-rv--in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce){ .sec-rv{ opacity:1; transform:none; } }

/* — quiz « quelle espèce pour moi » — */
.qz{ position:fixed; inset:0; z-index:96; background:rgba(40,34,16,.55); backdrop-filter:blur(3px);
  display:none; place-items:center; padding:18px; overflow-y:auto; }
.qz.open{ display:grid; }
.qz__box{ position:relative; width:min(880px,96vw); background:var(--paper-2); border-radius:18px;
  padding:34px 30px 30px; box-shadow:var(--shadow-lg); text-align:center; margin:auto; }
.qz__close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink-soft); font-size:1.05rem; cursor:pointer; }
.qz__close:hover{ background:rgba(131,147,81,.14); color:var(--olive-deep); }
.qz__dots{ display:flex; justify-content:center; gap:7px; margin-bottom:14px; }
.qz__dots i{ width:9px; height:9px; border-radius:50%; background:var(--sage-2); transition:background .2s, transform .2s; }
.qz__dots i.on{ background:var(--olive); transform:scale(1.2); }
.qz__q{ font-family:var(--font-hand); font-weight:700; font-size:2.3rem; color:var(--olive-ink); margin:.25em 0 .7em; line-height:.95; }
.qz__opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
.qz__opt{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:20px 14px 16px;
  background:var(--paper); border-radius:14px; cursor:pointer; font-family:inherit; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--sage-2); transition:transform .14s, box-shadow .14s; }
.qz__opt:hover{ transform:translateY(-3px) rotate(-.4deg); box-shadow:var(--shadow-sm), inset 0 0 0 2px var(--olive); }
.qz__emo{ font-size:1.9rem; line-height:1; }
.qz__opt b{ font-size:.95rem; }
.qz__sub{ font-size:.76rem; color:var(--ink-faint); }
.qz__back{ margin-top:18px; font-family:inherit; font-size:.85rem; color:var(--ink-faint); cursor:pointer; }
.qz__back:hover{ color:var(--olive-deep); }
.qz__grid{ text-align:left; margin-top:6px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.qz__acts{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.qz-launch{ display:inline-flex; align-items:center; gap:.4em; font-family:inherit; font-weight:600; font-size:.85rem;
  color:var(--olive-deep); background:var(--paper-2); border-radius:22px; padding:.55em 1.1em; cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--olive); transition:background .14s, color .14s; }
.qz-launch:hover{ background:var(--olive); color:var(--paper-2); }

/* — fiche : stock bas + expédition + partage + zoom — */
.fiche-low{ width:100%; font-size:.84rem; font-weight:600; color:var(--terra-2);
  background:rgba(169,84,47,.1); border-radius:10px; padding:.55em .9em; }
.fiche-ship{ margin:14px 0 4px; font-size:.88rem; color:var(--ink-soft);
  background:rgba(131,147,81,.12); border-radius:12px; padding:12px 16px; line-height:1.5; }
.fiche-ship b{ color:var(--olive-deep); }
.fiche-ship span{ display:block; font-size:.74rem; color:var(--ink-faint); margin-top:2px; }
.fiche-share{ margin-left:8px; }
.fiche-media__main.zoomable{ cursor:zoom-in; }
.lightbox{ position:fixed; inset:0; z-index:110; background:rgba(30,26,12,.9); display:grid; place-items:center;
  padding:24px; cursor:zoom-out; animation:lbIn .18s ease; }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox img{ max-width:min(92vw,900px); max-height:88vh; border-radius:12px; box-shadow:var(--shadow-lg); }
.lightbox__hint{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  color:rgba(255,249,226,.6); font-size:.78rem; letter-spacing:.06em; }

/* — suggestions panier — */
.cart-sugg{ margin-top:18px; border-top:1px dashed var(--sage-2); padding-top:14px; }
.cart-sugg__t{ font-family:var(--font-script); font-size:1.05rem; color:var(--olive-deep); margin-bottom:10px; }
.cart-sugg__row{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.cart-sugg__row img{ width:44px; height:44px; border-radius:8px; object-fit:cover; background:var(--paper-3);
  box-shadow:inset 0 0 0 1px rgba(78,102,54,.2); }
.cart-sugg__i{ flex:1; min-width:0; }
.cart-sugg__i b{ display:block; font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-sugg__i span{ font-size:.78rem; color:var(--olive-deep); font-weight:600; }
.cart-sugg__add{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--olive); color:var(--paper-2); font-size:1.1rem; font-weight:700; cursor:pointer; transition:background .13s, transform .13s; }
.cart-sugg__add:hover{ background:var(--olive-2); transform:scale(1.08); }

/* — filtre en stock (boutique) — */
.stock-only{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:.85rem;
  color:var(--ink-soft); user-select:none; padding:.45em .9em; border-radius:20px;
  background:var(--paper-2); box-shadow:inset 0 0 0 1.5px var(--sage-2); transition:box-shadow .14s; }
.stock-only:hover{ box-shadow:inset 0 0 0 1.5px var(--olive); }
.stock-only input{ accent-color:var(--olive); width:15px; height:15px; cursor:pointer; }
.stock-only:has(input:checked){ background:rgba(131,147,81,.16); color:var(--olive-deep); font-weight:600; }
#prodGrid.hide-out .card--out{ display:none !important; }

/* — section vus récemment — */
.recent-sec .prod-grid{ margin-top:8px; }

/* — comparateur d'espèces — */
.cmp{ position:absolute; top:10px; right:48px; width:32px; height:32px; border-radius:50%; z-index:3;
  display:grid; place-items:center; background:rgba(255,249,226,.9); color:var(--ink-soft); cursor:pointer;
  box-shadow:var(--shadow-sm); opacity:0; transform:scale(.8); transition:opacity .18s, transform .18s, background .15s, color .15s; }
.cmp svg{ width:16px; height:16px; }
.card:hover .cmp, .cmp.on{ opacity:1; transform:none; }
.cmp:hover{ background:var(--olive); color:var(--paper-2); }
.cmp.on{ background:var(--olive); color:var(--paper-2); }
@media (hover:none){ .cmp{ opacity:1; transform:none; } }
.fiche-cmp{ margin-left:8px; }
.fiche-cmp.on{ background:var(--olive); color:var(--paper-2); }

.cmp-bar{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,140%); z-index:59;
  display:flex; align-items:center; gap:12px; max-width:min(94vw,760px);
  background:var(--paper-2); border-radius:16px; padding:10px 12px 10px 16px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1.5px var(--sage-2);
  transition:transform .32s cubic-bezier(.25,1.4,.5,1); }
.cmp-bar.in{ transform:translate(-50%,0); }
.cmp-bar__t{ display:flex; align-items:center; gap:6px; font-family:var(--font-script); font-size:1.05rem;
  color:var(--olive-deep); white-space:nowrap; }
.cmp-bar__t svg{ width:17px; height:17px; }
.cmp-bar__items{ display:flex; gap:7px; overflow-x:auto; flex:1; padding:2px; }
.cmp-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--paper); border-radius:20px;
  padding:3px 8px 3px 3px; font-size:.78rem; white-space:nowrap; box-shadow:inset 0 0 0 1.5px var(--sage-2); }
.cmp-chip img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.cmp-chip button{ color:var(--terra-2); font-weight:700; cursor:pointer; padding:0 2px; opacity:.6; }
.cmp-chip button:hover{ opacity:1; }
.btn--sm{ padding:.5em 1em; font-size:.8rem; }
.cmp-bar .btn[disabled]{ opacity:.45; cursor:not-allowed; }
.cmp-bar__x{ color:var(--ink-faint); cursor:pointer; padding:4px 6px; font-size:.9rem; }
.cmp-bar__x:hover{ color:var(--terra-2); }
@media (max-width:640px){
  .cmp-bar{ left:10px; right:10px; max-width:none; transform:translateY(140%); flex-wrap:wrap; gap:8px; }
  .cmp-bar.in{ transform:none; }
  .cmp-bar__t{ font-size:.95rem; }
}
.cmp-box{ width:min(920px,96vw); }
.cmp-scroll{ overflow-x:auto; margin-top:6px; }
.cmp-table{ width:100%; border-collapse:collapse; text-align:left; }
.cmp-table thead th{ padding:10px 12px; vertical-align:bottom; min-width:150px; }
.cmp-table thead th a{ display:block; color:inherit; }
.cmp-table thead img{ width:100%; max-width:150px; aspect-ratio:1/1; object-fit:cover; border-radius:12px;
  box-shadow:var(--shadow-sm); margin-bottom:6px; }
.cmp-table thead b{ display:block; font-size:1rem; color:var(--olive-deep); }
.cmp-table thead span{ font-size:.76rem; color:var(--ink-faint); }
.cmp-table td, .cmp-table tbody th{ padding:9px 12px; border-top:1px solid rgba(120,105,60,.14);
  font-size:.86rem; vertical-align:middle; }
.cmp-k{ font-size:.74rem !important; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint);
  font-weight:700; white-space:nowrap; }
.cmp-table tbody tr:hover td{ background:rgba(131,147,81,.06); }
.cmp-ok{ color:var(--olive-deep); font-weight:600; }
.cmp-no{ color:var(--terra-2); font-weight:600; }

/* — recherche globale — */
.gs{ position:fixed; inset:0; z-index:100; background:rgba(40,34,16,.5); backdrop-filter:blur(4px);
  padding:12vh 18px 18px; animation:lbIn .16s ease; }
.gs__box{ width:min(560px,96vw); margin:0 auto; background:var(--paper-2); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-lg); }
.gs__in{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid rgba(120,105,60,.16); }
.gs__in svg{ width:20px; height:20px; color:var(--olive-deep); flex:0 0 auto; }
.gs__in input{ flex:1; border:none; background:transparent; font-family:inherit; font-size:1.02rem;
  color:var(--ink); outline:none; }
.gs__res{ max-height:52vh; overflow-y:auto; padding:8px; }
.gs__lbl{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint);
  font-weight:700; padding:8px 12px 6px; }
.gs__row{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:12px; color:inherit; transition:background .12s; }
.gs__row:hover{ background:rgba(131,147,81,.13); }
.gs__row img{ width:44px; height:44px; border-radius:10px; object-fit:cover; background:var(--paper-3); flex:0 0 auto; }
.gs__n{ flex:1; min-width:0; }
.gs__n b{ display:block; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs__n small{ font-size:.76rem; color:var(--ink-faint); }
.gs__p{ font-weight:700; color:var(--olive-deep); font-size:.88rem; white-space:nowrap; text-align:right; }
.gs__p em{ display:block; font-style:normal; font-size:.7rem; font-weight:600; color:var(--terra-2); }
.gs__none{ padding:30px 20px; text-align:center; color:var(--ink-faint); font-size:.9rem; line-height:1.7; }
.gs__none a{ color:var(--olive-deep); font-weight:600; }

/* — alerte retour en stock — */
.rs-box{ width:min(460px,94vw); }
.rs-sub{ color:var(--ink-soft); font-size:.92rem; line-height:1.6; margin:0 0 18px; }
.rs-form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.rs-form input{ flex:1; min-width:200px; padding:.8em 1em; font-size:.95rem; border:none; border-radius:10px;
  background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--sage-2); font-family:inherit; color:var(--ink); }
.rs-form input:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--olive); }
.rs-ok{ font-size:1.05rem; line-height:1.8; color:var(--ink); padding:16px 0; }
.rs-ok b{ font-family:var(--font-hand); font-size:1.7rem; color:var(--olive-deep); }

/* — barre d'achat flottante (fiche) — */
.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:57; display:none; align-items:center; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--paper-2); box-shadow:0 -8px 26px rgba(52,44,20,.22);
  transform:translateY(110%); transition:transform .28s cubic-bezier(.25,1.3,.5,1); }
.buybar.in{ transform:none; }
.buybar img{ width:46px; height:46px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
.buybar__i{ flex:1; min-width:0; }
.buybar__i b{ display:block; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.buybar__i span{ font-weight:700; color:var(--olive-deep); font-size:.92rem; }
.buybar .add-btn{ flex:0 0 auto; }
@media (max-width:820px){ .buybar{ display:flex; } }

/* — FAQ express fiche — */
.ffaq{ margin:26px 0 8px; }
.ffaq h2{ font-family:var(--font-hand); font-weight:700; font-size:1.9rem; color:var(--olive-deep); margin:0 0 12px; }
.ffaq__it{ background:var(--paper-2); border-radius:12px; margin-bottom:10px;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.12); overflow:hidden; }
.ffaq__it summary{ cursor:pointer; padding:14px 18px; font-weight:600; font-size:.95rem; color:var(--ink);
  list-style:none; position:relative; padding-right:40px; user-select:none; }
.ffaq__it summary::-webkit-details-marker{ display:none; }
.ffaq__it summary::after{ content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:1.3rem; font-weight:400; color:var(--olive); transition:transform .2s; }
.ffaq__it[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.ffaq__it p{ margin:0; padding:0 18px 15px; font-size:.9rem; line-height:1.65; color:var(--ink-soft); }
.ffaq__it a{ color:var(--olive-deep); font-weight:600; }

/* — panier : départ estimé + confiance — */
.cart-ship{ font-size:.84rem; color:var(--ink-soft); background:rgba(131,147,81,.12);
  border-radius:10px; padding:.6em .9em; margin-bottom:10px; }
.cart-ship b{ color:var(--olive-deep); }
.cart-ship span{ display:block; margin-top:2px; font-size:.78rem; color:var(--ink-faint); }
.cart-trust{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:10px;
  font-size:.72rem; color:var(--ink-faint); }

/* — favoris partagés — */
.favshare{ padding:12px 16px; border-top:1px dashed var(--sage-2); text-align:center; }
.favshare .btn{ width:100%; justify-content:center; }
.selban{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  background:rgba(176,134,46,.13); border-radius:14px; padding:14px 18px; margin:0 auto 20px;
  max-width:820px; font-size:.92rem; color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px rgba(176,134,46,.28); }
.selban b{ color:#7a5c15; }

/* — bandeau annonce rotatif — */
.ann-fade{ display:inline-block; transition:opacity .35s, transform .35s; }
.ann-fade.out{ opacity:0; transform:translateY(-6px); }

/* ============================ GUIDE DU DÉBUTANT ============================ */
.gd-sommaire{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.gd-sommaire a{ display:inline-flex; align-items:center; gap:8px; padding:.55em 1.05em; border-radius:22px;
  background:var(--paper-2); color:var(--ink-soft); font-size:.86rem; font-weight:500;
  box-shadow:inset 0 0 0 1.5px var(--sage-2); transition:box-shadow .14s, color .14s, transform .14s; }
.gd-sommaire a b{ font-family:var(--font-hand); font-size:1.15rem; color:var(--olive-deep); }
.gd-sommaire a:hover{ box-shadow:inset 0 0 0 2px var(--olive); color:var(--olive-deep); transform:translateY(-2px); }
.gd-step{ padding-top:34px; padding-bottom:34px; }
.gd-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.gd-num{ flex:0 0 auto; width:54px; height:54px; display:grid; place-items:center;
  font-family:var(--font-hand); font-weight:700; font-size:2rem; color:var(--paper-2);
  background:linear-gradient(160deg,var(--olive),var(--olive-2)); border-radius:16px;
  box-shadow:var(--shadow-sm); transform:rotate(-3deg); }
.gd-step:nth-child(even) .gd-num{ transform:rotate(3deg); }
.gd-head h2{ font-family:var(--font-hand); font-weight:700; font-size:2.4rem; color:var(--olive-ink); margin:0; line-height:.9; }
.gd-cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:30px; align-items:start; }
.gd-txt p{ color:var(--ink-soft); line-height:1.7; margin:0 0 14px; }
.gd-txt a{ color:var(--olive-deep); font-weight:600; }
.gd-list{ margin:0 0 14px; padding-left:2px; list-style:none; }
.gd-list li{ position:relative; padding:5px 0 5px 26px; color:var(--ink-soft); line-height:1.55; }
.gd-list li::before{ content:"🌿"; position:absolute; left:0; top:5px; font-size:.85rem; }
.gd-warn{ background:rgba(176,134,46,.13); border-radius:12px; padding:14px 16px; font-size:.92rem;
  color:var(--ink-soft); line-height:1.6; box-shadow:inset 0 0 0 1px rgba(176,134,46,.28); }
.gd-warn b{ color:#7a5c15; }
.gd-aside{ position:sticky; top:90px; }
.gd-kit{ background:var(--paper-2); border-radius:16px; padding:18px; text-align:center;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14); }
.gd-kit img{ width:110px; height:110px; object-fit:contain; margin:0 auto 8px; display:block;
  background:radial-gradient(circle at 50% 45%, var(--paper), var(--paper-3)); border-radius:50%; padding:10px; }
.gd-kit b{ font-family:var(--font-hand); font-size:1.5rem; color:var(--olive-deep); line-height:1; }
.gd-kit p{ font-size:.84rem; color:var(--ink-soft); line-height:1.55; margin:8px 0 14px; }
.gd-kit__foot{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.gd-kit .price{ font-weight:700; font-size:1.15rem; color:var(--olive-deep); }
.gd-quiz{ background:linear-gradient(165deg, var(--olive), var(--olive-2)); border-radius:16px; padding:24px 20px;
  text-align:center; color:var(--paper-2); box-shadow:var(--shadow-md); }
.gd-quiz__emo{ font-size:2rem; display:block; margin-bottom:6px; }
.gd-quiz b{ font-family:var(--font-hand); font-size:1.7rem; }
.gd-quiz p{ font-size:.86rem; opacity:.92; line-height:1.55; margin:8px 0 14px; }
.gd-quiz .btn{ --bg:var(--paper-2); --fg:var(--olive-deep); }
.gd-tip{ display:flex; gap:12px; background:var(--paper-2); border-radius:14px; padding:16px;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(120,105,60,.14); }
.gd-tip span{ font-size:1.4rem; flex:0 0 auto; }
.gd-tip p{ font-size:.86rem; color:var(--ink-soft); line-height:1.6; margin:0; }
.gd-tip b{ color:var(--olive-deep); }
@media (max-width:820px){
  .gd-cols{ grid-template-columns:1fr; }
  .gd-aside{ position:static; }
}
.gd-kit__out{ font-size:.85rem; font-weight:600; color:var(--terra-2);
  background:rgba(169,84,47,.12); border-radius:20px; padding:.45em 1em; }

/* texte en couleur, posé depuis l’éditeur de fiche ou de guide (menu 🎨) */
.tx--vert{ color:var(--olive-deep); font-weight:600; }
.tx--terre{ color:var(--terra-2, #a9542f); font-weight:600; }
.tx--or{ color:#9a7420; font-weight:600; }
.tx--gris{ color:var(--ink-faint); }
.tx--surligne{ background:rgba(231,201,90,.38); padding:.05em .3em; border-radius:4px; }

/* les deux boutons sous le rayon collemboles de l’accueil */
.cbl-cta{ margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* =====================================================================
   TÉLÉPHONE — mesuré sur 375 px (de l'iPhone SE au 15 Pro)
   ---------------------------------------------------------------------
   Trois choses ne se voient qu'une fois le pouce sur l'écran :

   1. L'en-tête portait cinq icônes (recherche, compte, favoris, panier,
      menu) là où la règle précédente en comptait quatre. Résultat : la
      barre débordait de 27 px et le bouton du menu finissait **hors de
      l'écran** — sur un téléphone, la navigation était inatteignable.
      Le logo signe la page à lui seul (le lien garde son aria-label),
      et les cinq boutons retrouvent leurs 44 px.

   2. 44 px, c'est la taille au-dessous de laquelle un pouce rate sa
      cible. Les « + » et « – » du panier faisaient 26 px, le cœur des
      favoris 34, les filtres de rayon 30 de haut.

   3. Sous 11 px, un texte ne se lit plus vraiment à bout de bras.
      Les badges étaient à 9,9 px, les genres et conditionnements à 10,9.
   ===================================================================== */
@media (max-width:430px){
  /* --- en-tête : tout tient, le menu redevient atteignable --- */
  .brand__name{ display:none; }
  .brand__mark{ width:52px; height:36px; }
  .header-top{ gap:10px; }
  .header-actions{ gap:0; }
  .icon-btn{ width:44px; height:44px; }
  .icon-btn svg{ width:21px; height:21px; }

  /* --- de quoi viser sans se tromper de bouton --- */
  .qty{ gap:10px; }
  .qty button{ width:36px; height:36px; font-size:1.1rem; }
  .qty span{ min-width:28px; font-size:1rem; }
  .fav{ width:40px; height:40px; }
  .fav svg{ width:21px; height:21px; }
  .cmp{ width:40px; height:40px; right:56px; }
  .cmp svg{ width:18px; height:18px; }
  .filter{ padding:.68em 1.15em; min-height:40px; display:inline-flex; align-items:center; }
  .btn, .add-btn{ min-height:44px; }
  .fiche-lot{ min-height:44px; }
  .line__rm{ font-size:.82rem; padding:4px 0; }

  /* --- lisible à bout de bras --- */
  .badge{ font-size:.72rem; padding:.34em .72em; }
  .card__cat{ font-size:.74rem; }
  .price__u{ font-size:.75rem; }
}

/* ---------------------------------------------------------------------
   La barre d'achat collante (bas de la fiche, sur téléphone)
   ---------------------------------------------------------------------
   Le `width:100%` donné plus haut au bouton « Adopter » des cartes
   s'appliquait aussi à celui de la barre : avec `flex:0 0 auto`, il
   prenait 347 px dans un espace qui en offrait autant — photo et nom
   compris. Le bouton débordait de 56 px, le nom du produit était écrasé
   à zéro, et c'est le bouton d'achat le plus utilisé du site.
   Ici il reprend sa largeur naturelle et accepte de se réduire. */
@media (max-width:820px){
  .buybar .add-btn{ flex:0 1 auto; width:auto; min-width:0; white-space:nowrap; }
  .buybar__i{ flex:1 1 auto; min-width:0; }
}

@media (max-width:430px){
  /* le logo reste un lien : autant qu'il se vise aussi bien que le reste */
  .brand{ min-height:44px; align-items:center; }

  /* commandes dispersées qui restaient sous la barre des 40 px */
  .conf-btns button{ min-width:40px; min-height:40px; font-size:.92rem; }
  .cart-sugg__add{ width:40px; height:40px; }
  .line__rm{ min-height:34px; }
  .gc-lien, .bacpret__t, .qz-launch, .fadv__t, .fadv__raz, .regle__pied button{ min-height:40px; }

  /* un menu déroulant qu'on ouvre du pouce */
  select{ min-height:44px; font-size:.92rem; }

  /* la mention de lot ou de format, dans le panier */
  .line__lot{ font-size:.72rem; }
  /* la frise du panier est posée par un sélecteur d'identifiant : il faut la
     même spécificité pour la rattraper */
  #cartFrise .frise--min b{ font-size:.72rem; }
}

/* La barre d'achat occupe le bas de l'écran dès qu'on dépasse le bloc
   d'achat : les boutons flottants montent au-dessus d'elle au lieu de la
   recouvrir. (`a-buybar` est posé sur le body par extras.js.) */
@media (max-width:820px){
  body.a-buybar .echat-btn{ bottom:88px; }
  body.a-buybar .to-top{ bottom:88px; }
}
@media (max-width:430px){
  .to-top{ width:44px; height:44px; }
}