/* ══════════════════════════════════════════════════════════════════════════
   Yommi Mart — feuille de style
   DA « épicerie éditoriale chaleureuse » : la charte reste la même (orange /
   rouge / jaune, Fredoka), mais la mise en page et le mouvement reprennent le
   socle des maquettes agence : kickers en majuscules espacées, numérotation
   éditoriale, filets 1px plutôt que grosses ombres, photos parallaxées et
   étalonnées, révélations au clip-path, scroll à inertie.

   Toutes les easings/durées sont centralisées (§1) — même vocabulaire de
   mouvement partout.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 0. Polices ───────────────────────────
   Fredoka et Inter sont hébergées sur le domaine du site, en variable, sous-ensembles
   latin et latin-ext (les seuls utiles en français). Deux bénéfices : plus de requête
   bloquante vers un tiers au rendu, et plus de transmission de l'IP du visiteur à
   Google LLC. `swap` évite tout texte invisible pendant le chargement. */
@font-face{font-family:"Fredoka";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/fredoka-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/fredoka-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ─────────────────────────── 1. Tokens ─────────────────────────── */
:root{
  --c-bg:#FDFBF7; --c-cream:#F5EFE4; --c-orange:#F07A1A; --c-red:#E0400C;
  --c-yellow:#F5B82E; --c-ink:#1B1613; --c-grey:#5A5A5A; --c-white:#fff;
  --hairline:rgba(27,22,19,.12); --hairline-light:rgba(255,255,255,.16);
  --radius:14px; --radius-lg:22px;
  --shadow:0 8px 30px rgba(27,22,19,.07);
  --shadow-img:0 30px 60px rgba(27,22,19,.16);
  --maxw:1140px; --space:clamp(4rem,9vw,8rem);
  --font-title:"Fredoka",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;

  /* Vocabulaire de mouvement (repris de anim.ts des maquettes) */
  --ease:cubic-bezier(.16,1,.32,1);         /* easeOutExpo — entrées nettes */
  --ease-rdv:cubic-bezier(.165,.84,.44,1);  /* easeOutQuart — signature */
  --dur-fast:.5s; --dur:.8s; --dur-slow:1.1s;
}

/* ─────────────────────────── 2. Base ─────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Quand le scroll à inertie est actif, on rend la main au lerp JS. */
html.ym-lerp{scroll-behavior:auto}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-title);line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(2rem,5vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
h3{font-size:1.15rem}
p{margin:0 0 1rem;color:var(--c-grey)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:where(a,button):focus-visible{outline:2px solid var(--c-orange);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:90px}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2rem)}
.section{padding:var(--space) 0;position:relative}
.section--cream{background:var(--c-cream)}
.section--dark{background:var(--c-ink);color:var(--c-white)}
.section--dark p{color:rgba(255,255,255,.78)}

/* Kicker éditorial : même traitement que .eyebrow (Fredoka, majuscules espacées). */
.kicker{font-family:var(--font-title);font-weight:600;color:var(--c-red);text-transform:uppercase;
  letter-spacing:.08em;font-size:.85rem;margin:0 0 1rem;display:block}
.kicker--light{color:#FFD9A8}
.kicker--gold{color:var(--c-yellow)}

/* Souligné animé (scaleX 0→1). */
.lien-souligne{position:relative;text-decoration:none}
.lien-souligne::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.lien-souligne:hover::after{transform:scaleX(1)}
/* Au doigt, un lien de 20 px de haut est trop petit : on l'épaissit par du padding
   (et non par une hauteur imposée, sinon le soulignement se décolle du texte). */
@media (max-width:820px){
  .lien-souligne{display:inline-block;padding-top:.7rem;padding-bottom:.7rem}
  .lien-souligne::after{bottom:calc(.7rem - 2px)}
}

/* Grain de film — texture très légère sur les surfaces sombres/photo. */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ─────────────────────────── 3. Boutons ─────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-title);font-weight:600;
  border-radius:999px;padding:.85rem 1.6rem;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn--sm{padding:.55rem 1.1rem;font-size:.9rem}
.btn--primary{background:var(--c-orange);color:#fff}
.btn--primary:hover{background:var(--c-red)}
.btn--ghost{background:transparent;border-color:var(--c-ink);color:var(--c-ink)}
.btn--ghost:hover{background:var(--c-ink);color:#fff}
/* Hover « scale-down » signature des maquettes. */
.rdv-hover{transition:transform .5s var(--ease-rdv),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.rdv-hover:hover{transform:scale(.92)}
/* Enveloppe magnétique : le JS emballe chaque [data-magnetic] dans un .mag et translate
   l'ENVELOPPE — ainsi le scale(.92) de .rdv-hover sur le bouton lui-même reste intact
   (deux transforms sur deux éléments distincts, aucune ne écrase l'autre). */
.mag{display:inline-block;transition:transform .3s var(--ease)}

/* ─────────────────────────── 4. Header ─────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:rgba(253,251,247,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;padding-top:.7rem;padding-bottom:.7rem}
.site-header__logo img{display:block}
.site-nav__menu{list-style:none;display:flex;align-items:center;gap:1.4rem;margin:0;padding:0}
.site-nav__menu a{font-family:var(--font-title);font-weight:500;text-decoration:none}
.site-nav__menu a:not(.btn):hover{color:var(--c-orange)}
.site-nav__toggle{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--c-ink);
  width:44px;height:44px;line-height:1;padding:0}
@media (max-width:820px){
  .site-nav__toggle{display:block}
  .site-nav__menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:.4rem;
    background:var(--c-bg);padding:1rem clamp(1rem,4vw,2rem);border-bottom:1px solid var(--hairline);
    transform:translateY(-120%);visibility:hidden;pointer-events:none;transition:transform .25s ease;box-shadow:var(--shadow)}
  .site-nav__menu.is-open{transform:translateY(0);visibility:visible;pointer-events:auto}
  .site-nav__menu li{width:100%}
  .site-nav__menu a:not(.btn){display:flex;align-items:center;min-height:44px;width:100%}
  .site-nav__menu .btn{min-height:44px;margin-top:.4rem}
}

/* ─────────────────────────── 5. Révélations ─────────────────────────── */
/* .rv = rideau clip-path bas→haut (médias) ; .rvf = fondu + montée + flou (textes).
   RÈGLE DE SÛRETÉ : l'état masqué n'existe QUE sur `.is-armed`, une classe que le JS
   pose lui-même, et uniquement sur des éléments hors écran, après s'être assuré qu'il
   tourne. Conséquence : sans JS, avec un JS en erreur, ou avec un moteur d'animation
   gelé, le contenu reste simplement VISIBLE. Aucune image, aucun texte ne peut être
   bloqué masqué par cette mécanique. */
.rv.is-armed{clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--ease-rdv);will-change:clip-path}
.rv.is-armed.is-in{clip-path:inset(0 0 0 0)}
.rvf.is-armed{opacity:0;transform:translateY(24px);filter:blur(8px);
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease)}
.rvf.is-armed.is-in{opacity:1;transform:none;filter:none}

/* ─────────────────────────── 6. Photos ─────────────────────────── */
/* .ph = cadre masqué ; .ph__inner = calque parallaxé (débord 8 % haut/bas pour
   absorber le translate sans laisser de bord) ; .gr = étalonnage chaud commun ;
   .veil = voile orange en soft-light → toutes les photos semblent du même shooting. */
.ph{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--c-ink);aspect-ratio:4/3;box-shadow:var(--shadow-img)}
.ph--portrait{aspect-ratio:4/5}
.ph__inner{position:absolute;left:0;right:0;top:-8%;bottom:-8%}
.ph__inner picture,.ph__inner img{width:100%;height:100%;object-fit:cover;display:block}
.gr img{filter:saturate(1.06) contrast(1.03) brightness(1.01)}
.veil::after{content:"";position:absolute;inset:0;background:var(--c-orange);mix-blend-mode:soft-light;opacity:.12;pointer-events:none}

/* ─────────────────────────── 7. Hero ─────────────────────────── */
.eyebrow{font-family:var(--font-title);color:var(--c-orange);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.85rem;margin-bottom:.5rem;display:block}
.hero{padding:clamp(2.5rem,6vw,5rem) 0}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.hero__media{position:relative}
.hero__media picture,.hero__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%}
.hero__media::after{content:"";position:absolute;inset:auto -14px -14px auto;width:90px;height:90px;
  background:var(--c-yellow);border-radius:50%;z-index:-1}
@media (max-width:820px){.hero__grid{grid-template-columns:1fr;text-align:center}.hero__cta{justify-content:center}}

/* ─────────────────────────── 8. Deux colonnes ─────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.two-col--infos{align-items:start}
.two-col__body p{max-width:52ch}
@media (max-width:900px){.two-col{grid-template-columns:1fr}.two-col--reverse .two-col__media{order:-1}}

/* ─────────────────────────── 9. Titres de section ─────────────────────────── */
.section-head{max-width:34ch;margin:0 0 clamp(3rem,6vw,4.5rem);will-change:transform}
.section-head p:last-child{max-width:52ch}

/* ─────────────────────────── 10. Grille produits ─────────────────────────── */
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,2.6rem)}
.pcard{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;outline:none}
.pcard:focus-visible{outline:2px solid var(--c-orange);outline-offset:6px;border-radius:6px}
.pcard h3{margin:.25rem 0 1rem;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.05;letter-spacing:-.01em}
.pcard .ph{box-shadow:none;border-radius:var(--radius)}
/* Variante « produit » : les visuels client sont détourés sur BLANC, la carte doit donc
   être blanche elle aussi — sinon le rectangle blanc de l'image se découpe sur le fond. */
.ph--produit{background:#fff;border:1px solid var(--hairline)}
.ph--produit .ph__inner{inset:0;top:0;bottom:0;padding:0}
/* L'image est positionnée en absolu et porte elle-même sa marge intérieure : un
   `height:100%` sur un enfant de grille ne se résout pas (hauteur jugée indéfinie) et
   l'image reprend alors sa hauteur intrinsèque — le produit se retrouve rogné. */
.ph--produit .ph__inner img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:clamp(1rem,2.4vw,1.8rem)}
.pcard .ph__inner img{transition:transform .9s var(--ease)}
.pcard:hover .ph__inner img,.pcard:focus-within .ph__inner img{transform:scale(1.07)}
/* Panneau qui glisse sur la MOITIÉ droite de la photo au survol (mécanique .blg-prix). */
.pcard__panel{position:absolute;inset:0 0 0 50%;display:grid;place-items:center;padding:1rem;text-align:center;
  background:rgba(27,22,19,.86);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transform:translateX(100%);transition:transform .55s var(--ease-rdv);pointer-events:none;z-index:2}
.pcard__panel span{font-family:var(--font-title);font-weight:600;color:var(--c-yellow);
  text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;line-height:1.5}
.pcard:hover .pcard__panel,.pcard:focus-within .pcard__panel,.pcard:focus .pcard__panel{transform:none}
/* Appareil sans survol : le panneau glissant serait invisible et la carte paraîtrait
   inerte. On le pose en bandeau permanent au bas du cadre. */
@media (hover:none){
  .pcard__panel{inset:auto 0 0 0;transform:none;padding:.75rem 1rem;background:rgba(27,22,19,.82)}
}
.pcard__desc{margin:1rem 0 0;font-size:.95rem;color:var(--c-grey)}
.price-note{text-align:center;margin-top:clamp(3rem,6vw,4.5rem);font-family:var(--font-title);
  font-size:.85rem;letter-spacing:.04em;color:var(--c-ink)}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}

/* Fenêtre galerie d'une catégorie (ouverte au clic sur une carte). */
/* L'entrée n'anime QUE la translation, jamais l'opacité : si le moteur d'animation est
   gelé, la fenêtre reste pleinement visible (simplement décalée de 14 px) au lieu de
   rester transparente. Même règle de sûreté que les révélations (§5). */
.cat-modal{position:fixed;inset:0;z-index:100;background:var(--c-cream);display:flex;flex-direction:column;
  animation:ym-cat-in .3s var(--ease)}
.cat-modal.is-closing{opacity:0;transition:opacity .25s var(--ease)}
.cat-modal[hidden]{display:none}
@keyframes ym-cat-in{from{transform:translateY(14px)}to{transform:none}}
.cat-modal__bar{position:sticky;top:0;z-index:2;background:rgba(245,239,228,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.cat-modal__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.1rem;padding-bottom:1.1rem}
.cat-modal__kicker{margin:0 0 .2rem}
.cat-modal__titles{cursor:pointer;transition:color .2s var(--ease)}
.cat-modal__titles:hover h2,.cat-modal__titles:hover .cat-modal__kicker{color:var(--c-orange)}
.cat-modal h2{margin:0;font-size:clamp(1.4rem,3vw,2.1rem)}
.cat-modal__close{flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--c-ink);
  font-size:2.2rem;line-height:1;padding:0;width:44px;height:44px;display:grid;place-items:center;
  transition:color .3s var(--ease)}
.cat-modal__close:hover{color:var(--c-orange)}
.cat-modal__body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-top:clamp(1.5rem,3vw,2.5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.cat-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(1rem,2vw,1.6rem)}
.cat-grid li{display:block}
.cat-tile{position:relative;display:block;width:100%;aspect-ratio:1;margin:0;border:0;padding:0;
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;font:inherit}
.cat-tile:focus-visible{outline:2px solid var(--c-orange);outline-offset:3px}
/* Même précaution que pour les couvertures : positionnement absolu + marge portée par
   l'image, sinon `height:100%` retombe sur la hauteur intrinsèque et le produit est rogné. */
.cat-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:clamp(1.2rem,2.2vw,1.8rem);transition:transform .6s var(--ease)}
.cat-tile:hover img{transform:scale(1.06)}
/* Sous 560 px, minmax(240px) ne tiendrait qu'une colonne pleine largeur : on force deux. */
@media (max-width:560px){.cat-grid{grid-template-columns:repeat(2,1fr)}}

/* ─────────────────────────── 11. Pourquoi venir ─────────────────────────── */
/* Cartes allégées : filet 1px + fond crème clair, plus d'ombre lourde. */
.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem)}
.feature{display:flex;gap:1.2rem;align-items:flex-start;background:var(--c-white);
  border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:clamp(1.5rem,2.6vw,2.2rem);
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.feature:hover{transform:translateY(-4px);border-color:var(--c-orange)}
.feature__badge{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--c-orange);color:var(--c-orange)}
.feature__badge svg{width:24px;height:24px}
.feature__body{min-width:0}
.feature__body h3{margin:.1rem 0 .45rem}
.feature__body p{font-size:.95rem;margin:0}
@media (max-width:680px){.features{grid-template-columns:1fr}}

/* Visionneuse produit : voile sombre, image contenue, flèches sur les côtés.
   Comme la fenêtre galerie, l'entrée n'anime que la translation — jamais l'opacité —
   pour qu'un moteur d'animation gelé ne laisse pas un écran noir sans image. */
.lb{position:fixed;inset:0;z-index:120;background:rgba(20,16,13,.94);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  animation:ym-lb-in .28s var(--ease)}
.lb[hidden]{display:none}
@keyframes ym-lb-in{from{transform:scale(.985)}to{transform:none}}
.lb__scene{margin:0;display:grid;place-items:center;padding:clamp(3.5rem,7vw,5rem) 0}
.lb__img{max-width:min(88vw,900px);max-height:78svh;width:auto;height:auto;object-fit:contain;
  background:#fff;border-radius:var(--radius-lg);padding:clamp(1rem,2.5vw,2rem)}
.lb__close{position:absolute;top:.6rem;right:1.1rem;z-index:2;background:none;border:0;
  color:#fff;font-size:2.6rem;line-height:1;padding:.3rem .6rem;cursor:pointer;
  transition:color .3s var(--ease)}
.lb__nav{background:none;border:0;color:#fff;font-size:3.2rem;line-height:1;cursor:pointer;
  padding:1rem clamp(.6rem,2vw,1.6rem);transition:color .3s var(--ease),transform .3s var(--ease)}
.lb__close:hover,.lb__nav:hover{color:var(--c-yellow)}
.lb__prev:hover{transform:translateX(-4px)}
.lb__next:hover{transform:translateX(4px)}
.lb__count{position:absolute;left:0;right:0;bottom:1.4rem;margin:0;text-align:center;
  color:rgba(255,255,255,.75);font-family:var(--font-title);font-weight:500;font-size:.9rem}
@media (max-width:680px){
  .lb{grid-template-columns:1fr}
  .lb__img{max-width:92vw;max-height:70svh}
  .lb__nav{position:absolute;top:50%;z-index:2;width:48px;height:48px;padding:0;font-size:2rem;
    display:grid;place-items:center;border-radius:50%;background:rgba(20,16,13,.55);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transform:translateY(-50%)}
  .lb__prev{left:.5rem}
  .lb__next{right:.5rem}
  .lb__prev:hover,.lb__next:hover{transform:translateY(-50%)}
  .lb__close{width:44px;height:44px;padding:0;font-size:2rem;display:grid;place-items:center;
    top:.4rem;right:.4rem;border-radius:50%;background:rgba(20,16,13,.55)}
  .lb__scene{padding:clamp(3.5rem,7vw,5rem) 0}
}

/* ─────────────────────────── 12. Galerie défilante ─────────────────────────── */
.marquee{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee__track{display:flex;gap:1rem;width:max-content;animation:marquee 60s linear infinite;will-change:transform}
.marquee__item{flex:0 0 auto;width:clamp(240px,26vw,340px);margin:0}
.marquee__item img{width:100%;height:clamp(220px,30vh,300px);object-fit:cover;border-radius:var(--radius);
  display:block;box-shadow:var(--shadow)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .5rem))}}

/* ─────────────────────────── 13. Ruban de scroll ─────────────────────────── */
.ribbon{position:absolute;top:0;left:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
.ribbon svg{display:block;width:100%;height:100%;overflow:visible}
.ribbon path{fill:none;stroke:url(#ribbonGrad);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 7px rgba(240,122,26,.35))}
@media (max-width:680px){.ribbon path{stroke-width:4}}
/* Le contenu passe au-dessus du ruban, les fonds de section restent dessous. */
.container,.marquee{position:relative;z-index:2}

/* ─────────────────────────── 14. Infos pratiques ─────────────────────────── */
.infos-list{list-style:none;padding:0;margin:2rem 0}
.infos-list li{display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;align-items:baseline;
  padding:1.1rem 0;border-top:1px solid var(--hairline)}
.infos-list li:last-child{border-bottom:1px solid var(--hairline)}
.infos-list__k{font-family:var(--font-title);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--c-red)}
.infos-list__v{font-family:var(--font-title);font-weight:500;font-size:clamp(1rem,1.8vw,1.25rem);color:var(--c-ink);text-align:right}
.infos-list a{text-decoration:none}
@media (max-width:560px){
  .infos-list li{display:block}
  .infos-list__k{display:block;margin-bottom:.3rem}
  .infos-list__v{text-align:left}
}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-img);min-height:420px}
.map-wrap iframe{border:0;width:100%;height:100%;min-height:420px;display:block}

/* ─────────────────────────── 15. Instagram ─────────────────────────── */
.insta{overflow:hidden}
.insta__inner{text-align:center;max-width:34ch;margin:0 auto}
.insta__inner p:not(.kicker){max-width:52ch;margin-left:auto;margin-right:auto}

/* ─────────────────────────── 16. Mention loi Évin ───────────────────────────
   Toute publicité en faveur d'une boisson alcoolique doit porter le message sanitaire.
   Deux formes : en incise sous la description du rayon « Alcools », et en bandeau au-
   dessus de la galerie de ce même rayon. */
.avert-alcool{display:block;margin-top:.6rem;font-size:.78rem;line-height:1.45;color:var(--c-grey);
  font-style:italic}
.avert-alcool--bandeau{margin:0 0 clamp(1rem,2vw,1.6rem);padding:.7rem 1rem;font-style:normal;
  background:#fff;border-radius:var(--radius);border:1px solid var(--hairline);color:var(--c-ink)}

/* ─────────────────────────── 17. CTA mobile ─────────────────────────── */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:.6rem;padding:.6rem;
  background:rgba(253,251,247,.96);backdrop-filter:blur(8px);border-top:1px solid var(--hairline)}
.mobile-cta .btn{flex:1;justify-content:center}
@media (max-width:900px){.mobile-cta{display:flex}body{padding-bottom:4.5rem}}

/* ─────────────────────────── 18. Footer ─────────────────────────── */
.site-footer{background:var(--c-ink);color:#fff;padding:clamp(3.5rem,6vw,5rem) 0 1.5rem;position:relative;overflow:hidden}
.site-footer a{color:var(--c-yellow);text-decoration:none}

.site-footer img{filter:brightness(0) invert(1)}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
.site-footer h3{margin-bottom:1rem}
.site-footer p{color:rgba(255,255,255,.75)}
.site-footer__bottom{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--hairline-light);font-size:.85rem}
.site-footer__bottom p{margin:0}
@media (max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.site-footer__grid{grid-template-columns:1fr}}

/* ─────────────────────────── 19. Curseur personnalisé ─────────────────────────── */
/* Patte de chat (nikukyū) : une patte pleine collée au pointeur, une seconde plus
   grande et translucide qui la suit avec de l'inertie. */
.ym-cursor{position:fixed;inset:0;z-index:9998;pointer-events:none}
.ym-cursor i{position:fixed;left:0;top:0;display:block;will-change:transform}
.ym-cursor i svg{display:block;width:100%;height:100%}
.ym-cursor__patte{width:22px;height:22px;color:var(--c-red)}
.ym-cursor__trace{width:34px;height:34px;color:var(--c-orange);opacity:.42}
html.ym-cursor-on,html.ym-cursor-on a,html.ym-cursor-on button{cursor:none}
html.ym-cursor-on input,html.ym-cursor-on textarea,html.ym-cursor-on select{cursor:auto}

/* ─────────────────────────── 20. Mouvement réduit ─────────────────────────── */
/* Les effets LOURDS (ken-burns, parallaxe, curseur, scroll à inertie, magnétisme)
   sont coupés côté JS. Ici on neutralise les animations purement CSS. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none}
  .js .rv,.js .rvf{transition-duration:.01ms!important}
  .rdv-hover:hover{transform:none}
}

/* ─────────────────────────── 21. Densité mobile ───────────────────────────
   Sur téléphone, l'échelle desktop est simplement trop grande : le bandeau collant
   pèse une centaine de pixels — 15 % de l'écran, en permanence — les titres restent
   au plancher de leurs clamp(), les sections respirent de 4 rem et les rayons
   s'empilent en une colonne (soit un écran de défilement par catégorie). On resserre
   ici toute l'échelle, sans jamais descendre sous les 44 px de cible tactile ni sous
   une taille de texte confortable. */
@media (max-width:820px){
  /* Respiration verticale des sections : plancher 4 rem → 2.5 rem. */
  :root{--space:clamp(2.5rem,7vw,5rem)}

  /* Le bandeau : logo ramené de 98 px à 46 px de haut, gouttières resserrées.
     L'ancre de scroll suit la nouvelle hauteur, sinon les titres visés par les liens
     du menu se glissent sous l'en-tête collant. */
  .site-header__inner{padding-top:.45rem;padding-bottom:.45rem}
  .site-header__logo img{height:46px;width:auto}
  [id]{scroll-margin-top:66px}

  h1{font-size:clamp(1.75rem,6.5vw,2.4rem)}
  h2{font-size:clamp(1.4rem,5vw,2rem)}
  h3{font-size:1.05rem}
  .eyebrow,.kicker{font-size:.75rem;letter-spacing:.06em;margin-bottom:.4rem}

  .btn{padding:.7rem 1.25rem;font-size:.95rem}
  .btn--sm{padding:.5rem 1rem;font-size:.85rem}

  .hero{padding:1.5rem 0 .5rem}
  .hero__cta{margin-top:1.1rem;gap:.6rem}
  .section-head{margin-bottom:1.75rem}

  .feature{gap:.9rem;padding:1.15rem}
  .feature__badge{width:40px;height:40px}
  .feature__badge svg{width:20px;height:20px}

  /* Barre de la fenêtre galerie : même resserrage que l'en-tête du site. */
  .cat-modal__bar-inner{padding-top:.7rem;padding-bottom:.7rem}

  .marquee__item{width:clamp(180px,52vw,240px)}
  .marquee__item img{height:150px}
  .map-wrap,.map-wrap iframe{min-height:260px}

  /* Barre d'action fixe : 62 px → 48 px. Elle est posée en permanence sur le bas de
     l'écran, donc chaque pixel économisé est rendu au contenu — deux fois, puisque le
     corps doit réserver la même hauteur pour que le pied de page ne passe pas dessous.
     Les deux boutons restent larges (une demi-largeur chacun) : la cible tactile reste
     confortable malgré les 36 px de haut. */
  .mobile-cta{padding:.35rem;gap:.45rem}
  .mobile-cta .btn{padding:.45rem .8rem;font-size:.82rem;line-height:1.3;border-width:1.5px}
  body{padding-bottom:3rem}
}

@media (max-width:560px){
  /* Deux colonnes de rayons plutôt qu'une : à 375 px, une carte pleine largeur
     occupait l'écran entier, soit onze écrans rien que pour parcourir les rayons. */
  .pgrid{grid-template-columns:repeat(2,1fr);gap:1.4rem .9rem}
  .pcard h3{font-size:1.05rem;margin:.2rem 0 .5rem}
  .pcard__desc{margin-top:.5rem;font-size:.85rem;line-height:1.45}
  /* Couvertures carrées plutôt qu'en 4/5 : dans une colonne de 160 px, le format
     portrait ne servait qu'à allonger la page. */
  .pcard .ph{aspect-ratio:1}
  .pcard__panel span{font-size:.6rem;letter-spacing:.05em}
  @media (hover:none){.pcard__panel{padding:.5rem .35rem}}
  /* Colonne deux fois plus étroite : la marge intérieure des visuels détourés
     mangerait sinon la moitié de la vignette. */
  .ph--produit .ph__inner img{padding:.7rem}

  p{font-size:.95rem}
  .infos-list li{padding:.85rem 0}
  .price-note{margin-top:2rem}
}