/* ==========================================================================
   BOUTIQUE — la vitrine grand public.

   Tout le vocabulaire visuel vient de base.css : couleurs, échelle
   typographique, espacements, rayons, boutons. Cette feuille ne fait que
   disposer. Elle n'invente ni couleur, ni ombre, ni rayon.

   LE PARTI PRIS. Le haut de page est une bande sombre continue — ruban,
   en-tête, titre — qui pose la marque d'un bloc. Puis tout s'éclaire : à
   partir des filtres, la page passe en blanc cassé et laisse la couleur
   aux produits. Les pots NISHMAN sont violets, bleus, orange, rouges ; un
   site qui crie par-dessus leur ferait concurrence.

   L'orange ne sert qu'à ce sur quoi on clique : ajouter au panier, payer,
   le compteur du panier. Un filtre actif est charbon, pas orange — c'est
   un état, pas une action.
   ========================================================================== */

/* ─────────────────────── le bloc de marque ─────────────────────── */

.ruban {
  background: var(--noir);
  color: var(--encre-inverse-douce);
  font-size: var(--t-petit);
  text-align: center;
  padding: var(--e3) var(--gouttiere);
  border-bottom: 1px solid var(--filet-sombre);
}
.ruban b { color: var(--encre-inverse); font-weight: 600; }

.bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--noir);
  border-bottom: 1px solid var(--filet-sombre);
}
.bar-in {
  display: flex; align-items: center; gap: var(--e4);
  min-height: 68px;
}
.bar-sp { flex: 1; }

.logo { display: inline-flex; align-items: center; }
.logo img {
  height: 30px; width: auto;
  /* Le logotype est fourni en noir. Sur la bande sombre, on l'inverse
     plutôt que d'entretenir un second fichier qui dériverait. */
  filter: invert(1) brightness(1.08);
}

/* Les accès de l'en-tête. Le panier est la seule action : lui seul porte
   l'orange. */
.pill {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 40px; padding: 0 var(--e4);
  border: 1px solid var(--filet-sombre);
  border-radius: var(--r-action);
  background: transparent;
  color: var(--encre-inverse);
  font-family: var(--texte); font-size: var(--t-menu); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.pill:hover { background: rgba(247, 246, 242, 0.08); border-color: var(--encre-inverse); }

.pill-gold {
  background: var(--orange); border-color: var(--orange); color: var(--noir);
}
.pill-gold:hover { background: var(--orange-fonce); border-color: var(--orange-fonce); }

.pill .court { display: none; }
@media (max-width: 560px) {
  .pill .long { display: none; }
  .pill .court { display: inline; }
}

.dot {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pastille);
  background: var(--noir); color: var(--orange);
  font-size: 11px; font-weight: 800; line-height: 1;
}

/* ─────────────────────── le titre de la boutique ─────────────────────── */

.hero {
  background: var(--noir);
  color: var(--encre-inverse);
  padding: var(--e7) 0 var(--e8);
}
.hero h1 {
  /* Archivo réglée étroite et lourde, en écho au logotype. Le titre
     s'affirme sans occuper tout l'écran : sur une boutique, ce qu'on vient
     voir est en dessous. */
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-stretch: 80%;
  font-weight: 800;
  max-width: 22ch;
  margin-bottom: var(--e4);
}
.hero p {
  color: var(--encre-inverse-douce);
  font-size: var(--t-corps);
  max-width: 56ch;
  margin: 0;
}

/* ─────────────────────── le bandeau d'orientation ─────────────────────── */

.porte {
  background: var(--charbon);
  border-bottom: 1px solid var(--filet-sombre);
}
.porte-in {
  display: flex; align-items: center; gap: var(--e4);
  width: min(100% - (var(--gouttiere) * 2), var(--largeur));
  margin-inline: auto;
  padding: var(--e3) 0;
}
.porte-txt {
  margin: 0; flex: 1; max-width: none;
  color: var(--encre-inverse-douce); font-size: var(--t-petit);
}
.porte-txt b { color: var(--encre-inverse); }
.porte-ou { color: var(--encre-pale); }
.porte-oui { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.porte-fermer {
  background: none; border: 0; cursor: pointer;
  color: var(--encre-pale); font-size: 22px; line-height: 1;
  padding: var(--e2);
}
.porte-fermer:hover { color: var(--encre-inverse); }

/* ─────────────────────── filtres ─────────────────────── */

.filtres {
  position: sticky; top: 68px; z-index: 50;
  background: var(--craie);
  border-bottom: 1px solid var(--gris);
  padding: var(--e4) 0;
}
.filtres-in {
  display: flex; gap: var(--e2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filtres-in::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  min-height: 38px; padding: 0 var(--e4);
  border: 1px solid var(--gris);
  border-radius: var(--r-pastille);
  background: var(--blanc);
  color: var(--encre-douce);
  font-family: var(--texte); font-size: var(--t-menu); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover { border-color: var(--encre); color: var(--encre); }
/* Un filtre actif est un état, pas une action : il se marque en charbon. */
.chip.on {
  background: var(--noir); border-color: var(--noir); color: var(--encre-inverse);
}

/* ─────────────────────── la grille ─────────────────────── */

.wrap {
  width: min(100% - (var(--gouttiere) * 2), var(--largeur));
  margin-inline: auto;
}

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: var(--e5);
  padding: var(--section) 0;
}

.carte {
  display: flex; flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-radius: var(--r-objet);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* Pas d'ombre au repos. Une ombre sous chaque carte ne hiérarchise rien ;
   on n'élève que ce que la main survole. */
.carte:hover { border-color: var(--encre); box-shadow: var(--ombre-levee); }

.carte-lien { display: block; text-decoration: none; color: inherit; }

.carte-img {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  background: #FAFAF8;
  padding: var(--e5);
}
.carte-img img {
  max-height: 100%; width: auto; object-fit: contain;
  mix-blend-mode: multiply;
}

.carte-fam {
  color: var(--encre-pale); font-size: var(--t-menu); font-weight: 600;
  padding: var(--e4) var(--e4) 0;
}
.carte-nom {
  font-family: var(--titre); font-stretch: 86%; font-weight: 700;
  font-size: 1rem; line-height: 1.2;
  padding: var(--e2) var(--e4) 0;
}
.carte-vol {
  color: var(--encre-douce); font-size: var(--t-petit);
  padding: var(--e1) var(--e4) 0;
}

.carte-bas {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e4);
}
.prix {
  font-family: var(--titre); font-stretch: 86%; font-weight: 800;
  font-size: 1.25rem; letter-spacing: -0.01em;
}

.carte-add {
  min-height: 40px; padding: 0 var(--e4);
  border: 0; border-radius: var(--r-action);
  background: var(--orange); color: var(--noir);
  font-family: var(--texte); font-size: var(--t-petit); font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}
.carte-add:hover { background: var(--orange-fonce); }

.carte.indispo .carte-img { opacity: 0.55; }
.bientot {
  display: inline-block;
  padding: var(--e1) var(--e2);
  border-radius: var(--r-pastille);
  background: var(--gris); color: var(--encre-douce);
  font-size: 11px; font-weight: 700;
}

/* ─────────────────────── panier ─────────────────────── */

.voile {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(16, 16, 16, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.voile.on { opacity: 1; pointer-events: auto; }

.panier {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(420px, 100%);
  background: var(--craie);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition);
  box-shadow: var(--ombre-flottante);
}
.panier.on { transform: none; }

.panier-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e5); border-bottom: 1px solid var(--gris);
}
.panier-tete h2 { font-size: var(--t-section); }
.fermer {
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--encre-douce);
}
.fermer:hover { color: var(--encre); }

.panier-corps { flex: 1; overflow-y: auto; padding: var(--e5); }
.panier-pied { border-top: 1px solid var(--gris); padding: var(--e5); background: var(--blanc); }

.ligne {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: var(--e4); align-items: center;
  padding: var(--e4) 0; border-bottom: 1px solid var(--gris);
}
.ligne:last-child { border-bottom: 0; }
.ligne-img {
  width: 64px; height: 64px; border-radius: var(--r-action);
  background: var(--blanc); display: grid; place-items: center; padding: var(--e2);
}
.ligne-img img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.ligne-nom { font-weight: 600; font-size: var(--t-petit); }
.ligne-pu { color: var(--encre-douce); font-size: var(--t-petit); }
.ligne-tot { font-weight: 700; }

.jauge { display: inline-flex; align-items: center; border: 1px solid var(--gris);
         border-radius: var(--r-action); background: var(--blanc); }
.jauge button {
  width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  font-size: 16px; color: var(--encre-douce);
}
.jauge button:hover { color: var(--encre); }
.jauge-txt { min-width: 24px; text-align: center; font-weight: 700; font-size: var(--t-petit); }

.tot-l { display: flex; justify-content: space-between; margin-bottom: var(--e2); }
.tot-l.grand { font-size: var(--t-sous); font-weight: 800; margin-top: var(--e4); }
.offert { color: #1a8a4a; font-weight: 700; }
.rassure { color: var(--encre-douce); font-size: var(--t-petit); margin: var(--e4) 0 0; }
.vide { color: var(--encre-douce); text-align: center; padding: var(--e8) 0; }

.payer {
  display: block; width: 100%;
  min-height: 52px; margin-top: var(--e4);
  border: 0; border-radius: var(--r-action);
  background: var(--orange); color: var(--noir);
  font-family: var(--texte); font-size: var(--t-corps); font-weight: 800;
  cursor: pointer;
  transition: background var(--transition);
}
.payer:hover { background: var(--orange-fonce); }

.toast {
  position: fixed; left: 50%; bottom: var(--e6); z-index: 100;
  transform: translate(-50%, 16px);
  background: var(--noir); color: var(--encre-inverse);
  padding: var(--e3) var(--e5); border-radius: var(--r-action);
  font-size: var(--t-petit); font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ─────────────────────── fiche produit ─────────────────────── */

.fiche-in { padding: var(--section) 0; }
.fiche-grid { display: grid; gap: var(--e8); grid-template-columns: 1fr; }
@media (min-width: 880px) { .fiche-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.fiche-img {
  background: var(--blanc); border: 1px solid var(--gris);
  border-radius: var(--r-objet); padding: var(--e8);
  display: grid; place-items: center;
}
.fiche-img img { max-height: 420px; width: auto; mix-blend-mode: multiply; }

.fiche-retour { color: var(--encre-douce); font-size: var(--t-petit); text-decoration: none; }
.fiche-retour:hover { color: var(--encre); }
.fiche-vol { color: var(--encre-douce); margin: var(--e2) 0 var(--e5); }
.fiche-prix { font-family: var(--titre); font-stretch: 86%; font-weight: 800;
              font-size: 2rem; margin: 0 0 var(--e1); }
.fiche-tva { color: var(--encre-douce); font-size: var(--t-petit); margin-bottom: var(--e6); }
.fiche-desc { color: var(--encre-douce); }
.fiche-add { min-height: 52px; padding: 0 var(--e7); }

/* ─────────────────────── pages de texte ─────────────────────── */

.doc {
  width: min(100% - (var(--gouttiere) * 2), 760px);
  margin-inline: auto; padding: var(--section) 0;
}
.doc h2 { font-size: var(--t-section); margin: var(--e8) 0 var(--e4); }
.doc h3 { font-size: var(--t-sous); margin: var(--e6) 0 var(--e3); }
.doc .maj { color: var(--encre-pale); font-size: var(--t-petit); }
.doc-retour { color: var(--encre-douce); font-size: var(--t-petit); text-decoration: none; }
.doc-retour:hover { color: var(--encre); }
.encadre {
  background: var(--blanc); border: 1px solid var(--gris);
  border-radius: var(--r-objet); padding: var(--e5); margin: var(--e5) 0;
}
.formulaire { background: var(--blanc); border: 1px solid var(--gris);
              border-radius: var(--r-objet); padding: var(--e6); }

/* ─────────────────────── index du catalogue ─────────────────────── */

.index-cat {
  margin: var(--section) auto 0;
  padding: var(--e7) 0 var(--e2);
  border-top: 1px solid var(--gris);
}
.index-cat h2 { font-size: var(--t-sous); }
.index-cat-lead { color: var(--encre-douce); font-size: var(--t-petit); margin: var(--e1) 0 var(--e5); }
.index-cat-cols { display: grid; gap: 2px var(--e6); grid-template-columns: 1fr; }
@media (min-width: 680px)  { .index-cat-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .index-cat-cols { grid-template-columns: 1fr 1fr 1fr; } }

.index-cat-fam { border-bottom: 1px solid var(--gris); }
.index-cat-fam > summary {
  cursor: pointer; list-style: none;
  padding: var(--e3) 2px; font-size: var(--t-petit); font-weight: 600;
  display: flex; align-items: center; gap: var(--e2);
}
.index-cat-fam > summary::-webkit-details-marker { display: none; }
.index-cat-fam > summary::after {
  content: "+"; margin-left: auto; color: var(--encre-pale); font-weight: 400;
}
.index-cat-fam[open] > summary::after { content: "–"; }
.index-cat-fam > summary:hover,
.index-cat-fam[open] > summary { color: var(--orange-fonce); }
.index-cat-fam > summary span { color: var(--encre-pale); font-weight: 500; font-size: 0.78rem; }
.index-cat-fam ul { list-style: none; margin: 0 0 var(--e4); padding: 0 0 0 2px;
                    display: grid; gap: var(--e2); }
.index-cat-fam li a {
  color: var(--encre-douce); text-decoration: none;
  font-size: 0.74rem; line-height: 1.35; display: block;
}
.index-cat-fam li a:hover { color: var(--encre); text-decoration: underline; }

/* ─────────────────────── pied de page ─────────────────────── */

.pied {
  background: var(--noir); color: var(--encre-inverse-douce);
  padding: var(--section) 0 var(--e7);
  margin-top: var(--section);
}
.pied-cols {
  display: grid; gap: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .pied-cols { grid-template-columns: repeat(3, 1fr); } }

.pied h3 {
  color: var(--encre-inverse); font-size: var(--t-petit);
  font-stretch: 100%; font-weight: 700; letter-spacing: 0;
  margin-bottom: var(--e4);
}
.pied p { margin: 0 0 var(--e2); font-size: var(--t-petit); max-width: 38ch; }
.pied a {
  display: block; color: var(--encre-inverse-douce);
  font-size: var(--t-petit); text-decoration: none; padding: var(--e1) 0;
}
.pied a:hover { color: var(--encre-inverse); text-decoration: underline; }

.pied-bas {
  margin-top: var(--e8); padding-top: var(--e5);
  border-top: 1px solid var(--filet-sombre);
  color: var(--encre-pale); font-size: var(--t-menu);
}

/* ─────────────────────── petits écrans ─────────────────────── */

@media (max-width: 560px) {
  .bar-in { min-height: 60px; gap: var(--e2); }
  .filtres { top: 60px; }
  .logo img { height: 26px; }
  .hero { padding: var(--e7) 0 var(--e8); }
  .grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e4); }
  .carte-img { padding: var(--e4); }
  .carte-bas { flex-direction: column; align-items: stretch; gap: var(--e2); }
  .carte-add { width: 100%; }
}

/* ==========================================================================
   LE FILM DERRIÈRE LE TITRE DE LA BOUTIQUE

   Le film passe derrière le bloc de titre plutôt qu'au-dessus : empiler
   une bande animée et un bloc de titre ferait deux fois la même chose et
   repousserait les produits d'autant.

   Ici il y a du texte par-dessus, donc le film est assombri à la source —
   un voile assez opaque pour sauver du texte clair sur une étagère claire
   ne laisserait plus rien voir. La valeur est mesurée, pas choisie.
   ========================================================================== */

.hero-film {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-film .bandeau-film {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02) brightness(0.58);
  opacity: 0.62;
}
.hero-film .bandeau-voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(16, 16, 16, 0.55) 0%,
    rgba(16, 16, 16, 0.3) 40%,
    rgba(16, 16, 16, 0.72) 100%
  );
}
/* Le texte reprend quelques points de clarté : le film garde alors plus
   de lumière à marge de contraste égale. */
.hero-film p { color: #C4C0B8; }