/* ==========================================================================
   ZÄK Jewels — feuille de style principale
   Palette : noir profond / argent / crème, typographie serif + sans espacée
   ========================================================================== */

:root{
  --black:#0d0c0b;
  --near-black:#17150f0d;
  --charcoal:#1c1a17;
  --cream:#f2ede3;
  --cream-2:#e9e1d1;
  --line:#cabfa8;
  --line-soft:rgba(202,191,168,.35);
  --grey:#9a9186;
  --grey-dark:#5c564c;
  --text-dark:#211f1b;
  --max-w:1240px;
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text-dark);
  background:var(--cream);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  margin:0 0 .5em;
  letter-spacing:.02em;
}
.container{max-width:var(--max-w);margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--grey-dark);
}
.section-title{
  text-align:center;
  font-size:clamp(28px,4vw,42px);
  letter-spacing:.06em;
}
.section-rule{
  width:70px;height:1px;background:var(--line-soft);
  margin:18px auto 40px;
}
.section-rule.left{margin:18px 0 30px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:14px 34px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  border:1px solid currentColor;
  transition:background .25s ease, color .25s ease;
  cursor:pointer;
  background:none;
}
.btn-light{color:var(--cream);border-color:var(--cream);}
.btn-light:hover{background:var(--cream);color:var(--black);}
.btn-dark{color:var(--text-dark);border-color:var(--text-dark);}
.btn-dark:hover{background:var(--text-dark);color:var(--cream);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--black);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  max-width:var(--max-w);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 28px;
  min-height:75px;
  position:relative;
}
/* Le logo est positionné en absolu, centré sur header-inner indépendamment de la largeur des
   deux blocs de navigation (qui n'ont pas le même nombre de liens) — sans ça, un centrage par
   grille (1fr auto 1fr) se décale dès que les deux blocs ont des largeurs de contenu différentes. */
.logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;
}
.logo img{
  height:46px;
  width:auto;
  display:block;
}
/* Masqué par défaut (desktop + mobile fermé) : ne s'affiche que dans le menu plein écran mobile
   ouvert (voir .site-header.nav-open .nav-contact plus bas, dans le media query mobile). */
.nav-contact{
  display:none;
}
.nav-main, .nav-secondary{
  display:flex;
  gap:34px;
  align-items:center;
}
.nav-main a, .nav-secondary a{
  font-size:15.6px; /* 12px + 30% */
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:.82;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:opacity .2s, border-color .2s;
  white-space:nowrap;
}
.nav-main a:hover, .nav-secondary a:hover{opacity:1;border-color:var(--line);}
.nav-main a.active, .nav-secondary a.active{opacity:1;border-color:var(--line);}

/* Bouton hamburger : masqué sur desktop, affiché uniquement en dessous de 880px. */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:34px;height:34px;
  background:none;border:0;cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;width:22px;height:2px;
  background:var(--cream);
  transition:transform .25s ease, opacity .25s ease;
}
.site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-header.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:880px){
  /* En-tête compact par défaut sur mobile : hamburger à gauche, logo centré, panier à droite —
     les liens de navigation sont masqués et remplacés par la barre d'onglets basse (accueil /
     boutique / galerie / panier) + un menu plein écran typographique pour les pages secondaires
     (à propos, histoire, F.A.Q, contact), ouvert via le hamburger. */
  .header-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px;
    gap:14px;
    min-height:64px;
  }
  .nav-toggle{display:flex;position:relative;z-index:1101;}
  .nav-main a, .nav-secondary a{display:none;}

  /* Menu plein écran : on réutilise nav-main/nav-secondary (déjà présents dans le DOM avec les
     bons liens et le bon état "active" par page) mais on les affiche comme un panneau sombre en
     position fixe couvrant tout l'écran, en typographie serif large, plutôt qu'un dropdown replié. */
  .site-header.nav-open .header-inner{
    position:fixed;inset:0;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:100px 28px 40px;
    background:var(--black);
    overflow-y:auto;
    gap:0;
  }
  .site-header.nav-open .logo{display:none;}
  .site-header.nav-open .cart-toggle{display:none;}
  .site-header.nav-open .header-inner{counter-reset:menuline;}
  .site-header.nav-open .nav-main,
  .site-header.nav-open .nav-secondary{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:0;
  }
  .site-header.nav-open .nav-main a,
  .site-header.nav-open .nav-secondary a{
    display:flex;
    align-items:baseline;
    gap:14px;
    width:100%;
    padding:17px 0;
    border-bottom:1px solid rgba(202,191,168,.16);
    font-family:var(--serif);
    font-size:27px;
    font-weight:400;
    letter-spacing:.01em;
    text-transform:none;
    color:var(--cream);
    opacity:1;
  }
  .site-header.nav-open .nav-main a::before,
  .site-header.nav-open .nav-secondary a::before{
    counter-increment:menuline;
    content:counter(menuline,decimal-leading-zero);
    font-family:var(--sans);
    font-size:10px;
    letter-spacing:.2em;
    color:var(--line);
  }
  .site-header.nav-open .nav-main a:hover,
  .site-header.nav-open .nav-secondary a:hover{
    opacity:1;border-color:rgba(202,191,168,.16);color:var(--cream);
  }
  .site-header.nav-open .nav-main a.active,
  .site-header.nav-open .nav-secondary a.active{
    color:var(--line);
  }
  .site-header.nav-open .nav-main a.active::before,
  .site-header.nav-open .nav-secondary a.active::before{
    color:var(--cream);
  }
  /* Coordonnées, en bas du menu plein écran, comme dans la maquette (injectées en JS, voir
     script.js, pour éviter les pièges d'échappement CSS avec des sauts de ligne dans "content").
     Masquées par défaut via la règle .nav-contact de base (hors media query). */
  .site-header.nav-open .nav-contact{
    display:block;
    margin-top:auto;
    padding-top:36px;
    font-family:var(--sans);
    font-size:12.5px;
    font-weight:300;
    line-height:1.9;
    color:rgba(242,237,227,.62);
  }
  .nav-contact .label{
    display:block;
    font-size:10.5px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--line);
    margin-bottom:4px;
  }
}

/* ---------- Panier : icône header ---------- */
.cart-toggle{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;
  color:var(--cream);opacity:.85;padding:4px;
  transition:opacity .2s;
}
.cart-toggle:hover{opacity:1;}
.cart-toggle svg{width:20px;height:20px;display:block;}
.cart-count{
  position:absolute;top:-6px;right:-8px;
  background:var(--cream);color:var(--black);
  font-size:10px;font-weight:600;
  width:16px;height:16px;border-radius:50%;
  align-items:center;justify-content:center;
  display:none;
}

/* ---------- Panier : drawer ---------- */
.cart-overlay{
  position:fixed;inset:0;background:rgba(10,9,8,.55);
  z-index:2500;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.cart-overlay.open{opacity:1;pointer-events:auto;}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:100%;max-width:420px;
  background:var(--cream);
  z-index:2600;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s ease;
  box-shadow:-8px 0 30px rgba(0,0,0,.2);
}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 26px;border-bottom:1px solid var(--line-soft);
}
.cart-drawer-head h3{margin:0;font-size:22px;}
.cart-close{background:none;border:0;font-size:26px;cursor:pointer;color:var(--text-dark);line-height:1;}
.cart-items{flex:1;overflow-y:auto;padding:20px 26px;}
.cart-empty{color:var(--grey-dark);font-size:14px;text-align:center;margin-top:40px;}
.cart-item{
  display:grid;grid-template-columns:64px 1fr auto;gap:14px;
  align-items:center;padding:16px 0;border-bottom:1px solid var(--line-soft);
}
.cart-item img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line-soft);}
.cart-item-link{color:inherit;text-decoration:none;display:block;}
.cart-item-link:hover .cart-item-name{text-decoration:underline;}
.cart-item-link.cart-item-thumb{grid-row:1 / span 1;}
.cart-item-name{font-family:var(--serif);font-size:16px;margin:0 0 4px;}
.cart-item-price{font-size:13px;color:var(--grey-dark);margin:0 0 8px;}
.cart-item-qty{display:flex;align-items:center;gap:10px;}
.qty-btn{
  width:22px;height:22px;border:1px solid var(--line-soft);background:none;
  cursor:pointer;font-size:14px;line-height:1;border-radius:50%;
}
.qty-value{font-size:13px;min-width:16px;text-align:center;}
.cart-item-remove{
  background:none;border:0;font-size:18px;color:var(--grey-dark);cursor:pointer;
  align-self:start;
}
.cart-drawer-foot{padding:22px 26px;border-top:1px solid var(--line-soft);}
.cart-subtotal{
  display:flex;justify-content:space-between;font-size:16px;margin-bottom:16px;
  font-family:var(--serif);
}
.cart-checkout-btn{display:block;text-align:center;width:100%;}
body.cart-open{overflow:hidden;}
body.menu-open{overflow:hidden;}

/* ---------- Panier : boutons ajout rapide (cartes produit) ---------- */
.prod-media{position:relative;}
.quick-add{
  position:absolute;bottom:10px;right:10px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(13,12,11,.75);color:var(--cream);
  border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;cursor:pointer;
  opacity:0;transform:translateY(6px);
  transition:opacity .2s,transform .2s,background .2s;
}
.prod-card:hover .quick-add{opacity:1;transform:translateY(0);}
.quick-add:hover{background:var(--black);}
@media (max-width:880px){.quick-add{opacity:1;transform:none;}}

/* ---------- Rupture de stock ---------- */
.quick-add.out-of-stock{opacity:1;transform:none;background:rgba(90,86,79,.55);cursor:not-allowed;}
.btn.out-of-stock,.product-cta.out-of-stock{opacity:.4;cursor:not-allowed;}
.size-select option:disabled{color:var(--grey);}

/* ---------- Sélecteur de taille ---------- */
.size-picker{margin:22px 0 6px;max-width:320px;}
.size-picker-label{
  display:block;font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--grey-dark);margin-bottom:10px;
}
.size-select{
  width:100%;height:46px;padding:0 40px 0 16px;
  border:1px solid var(--line-soft);background-color:transparent;
  font-family:var(--sans);font-size:14px;letter-spacing:.03em;
  color:var(--text-dark);cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a332c' stroke-width='1.6'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  transition:border-color .2s;
}
.size-select:hover,.size-select:focus{border-color:var(--text-dark);outline:none;}
.size-select option[value=""]{color:var(--grey-dark);}
.size-error{font-size:12px;color:#8a3b32;margin-top:10px;}

/* ---------- Panier : bouton ajout fiche produit ---------- */
.product-add-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:4px;}
.product-contact-link{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-dark);text-decoration:underline;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--cream);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero.hero-short{min-height:46vh;}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55) 60%, rgba(0,0,0,.75));
  z-index:1;
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-content{position:relative;z-index:2;padding:0 20px;}
.hero-content .eyebrow{color:var(--cream);opacity:.75;}
.hero-title{
  font-size:clamp(34px,6vw,68px);
  letter-spacing:.08em;
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.hero-title::before{
  content:"";
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:70px;height:1px;background:var(--line-soft);
}
.hero-sub{max-width:560px;margin:0 auto 30px;font-size:16px;line-height:1.8;color:var(--cream-2);}

/* ---------- Generic sections ---------- */
.section{padding:96px 0;}
.section.dark{background:var(--black);color:var(--cream);}
.section.charcoal{background:var(--charcoal);color:var(--cream);}
.section.cream-2{background:var(--cream-2);}
.section.tight{padding:64px 0;}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}
.split.reverse .split-media{order:2;}
.split-copy p{line-height:1.9;color:var(--grey-dark);margin-bottom:1.2em;}
.section.dark .split-copy p, .section.charcoal .split-copy p{color:var(--cream-2);}
.split-media img{border:1px solid var(--line-soft);}

@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:36px;}
  .split.reverse .split-media{order:0;}
}

/* ---------- Category grid ---------- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.cat-card{position:relative;overflow:hidden;aspect-ratio:3/4;}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.cat-card:hover img{transform:scale(1.06);}
.cat-label{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  text-align:center;color:var(--cream);
}
.cat-label .name{
  font-family:var(--sans);
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  background:rgba(13,12,11,.55);
  padding:10px 22px;
  border:1px solid rgba(255,255,255,.35);
}
.cat-label .count{display:block;margin-top:10px;font-size:11px;letter-spacing:.15em;color:var(--cream-2);opacity:.85;}

@media (max-width:760px){.cat-grid{grid-template-columns:1fr;}}

/* ---------- Product grid ---------- */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:34px 26px;
}
.prod-card{text-align:center;display:block;color:inherit;}
.cat-filters{gap:40px;flex-wrap:wrap;justify-content:center;}
.prod-media{
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--cream-2);
  border:1px solid var(--line-soft);
  margin-bottom:16px;
}
.prod-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.prod-card:hover .prod-media img{transform:scale(1.05);}
.prod-name{font-family:var(--serif);font-size:20px;letter-spacing:.03em;margin-bottom:4px;}
.prod-material{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-dark);margin-bottom:8px;}
.prod-price{font-size:14px;letter-spacing:.05em;color:var(--text-dark);}
/* Sur fond sombre (sections dark/charcoal, ex: Colliers, Boucles d'oreilles, Coups de Cœur),
   le prix restait en texte foncé sur fond foncé et devenait quasi invisible. */
.section.dark .prod-price, .section.charcoal .prod-price{color:var(--cream);}
.prod-price .note{display:block;font-size:10px;color:var(--grey-dark);letter-spacing:.05em;text-transform:none;margin-top:2px;}

.cat-anchor{scroll-margin-top:110px;}
.cat-heading{
  display:flex;align-items:center;gap:22px;
  margin:0 0 40px;
}
.cat-heading h3{margin:0;font-size:28px;letter-spacing:.06em;white-space:nowrap;}
.cat-heading .rule{flex:1;height:1px;background:var(--line-soft);}
.cat-heading .count{font-size:12px;letter-spacing:.2em;color:var(--grey-dark);text-transform:uppercase;white-space:nowrap;}

/* ---------- Values / features ---------- */
.values{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  text-align:center;
}
.values .value h4{font-size:18px;letter-spacing:.08em;}
.values .value p{color:var(--grey-dark);line-height:1.8;font-size:14px;}
.section.dark .values .value p{color:var(--cream-2);}
.value .num{
  font-family:var(--serif);font-size:34px;color:var(--grey);display:block;margin-bottom:10px;
}
@media (max-width:760px){.values{grid-template-columns:1fr;gap:36px;}}

/* ---------- Gallery : grille (utilisée pour l'aperçu 3 photos de la page d'accueil) ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.gallery-grid a{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;}
.gallery-grid img, .gallery-grid video{width:100%;height:100%;object-fit:cover;transition:transform .5s ease, filter .5s ease;}
.gallery-grid a:hover img, .gallery-grid a:hover video{transform:scale(1.05);}
@media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Gallery : mosaïque / masonry aléatoire (page galerie complète) ----------
   Vraie disposition en colonnes (pas une grille CSS) : js/gallery-masonry.js répartit les
   tuiles dans N colonnes en choisissant à chaque fois la colonne la moins remplie, avec une
   hauteur tirée au sort par tuile — donc pas de trous, et une composition différente à
   chaque chargement de page. */
.gallery-grid.masonry{
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.gallery-grid.masonry .masonry-col{
  display:flex;flex-direction:column;gap:18px;
  flex:1;min-width:0;
}
.gallery-grid.masonry a{
  position:relative;display:block;overflow:hidden;border-radius:2px;width:100%;
}
.gallery-grid.masonry img, .gallery-grid.masonry video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.gallery-grid.masonry a::after{
  content:attr(data-caption);
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 14px;
  font-family:var(--serif);font-size:15px;color:var(--cream);
  background:linear-gradient(to top, rgba(13,12,11,.72), rgba(13,12,11,0));
  opacity:0;transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.gallery-grid.masonry a:hover img, .gallery-grid.masonry a:hover video{transform:scale(1.045);}
.gallery-grid.masonry a:hover::after{opacity:1;transform:translateY(0);}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(10,9,8,.94);
  display:none;align-items:center;justify-content:center;
  z-index:2000;padding:30px;
}
.lightbox.open{display:flex;}
.lightbox img, .lightbox video{max-height:88vh;max-width:88vw;border:1px solid rgba(255,255,255,.2);}
.lightbox-close{
  position:absolute;top:26px;right:34px;color:var(--cream);
  font-size:28px;background:none;border:0;cursor:pointer;
}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 4px;font-family:var(--serif);font-size:20px;color:inherit;
}
.faq-q .icon{font-size:20px;transition:transform .25s ease;color:var(--grey);}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .35s ease;
  font-size:15px;line-height:1.9;color:var(--grey-dark);
}
.section.dark .faq-a{color:var(--cream-2);}
.faq-a-inner{padding:0 4px 26px;}
.faq-a ol, .faq-a ul{padding-left:20px;margin:12px 0;}
.faq-a li{margin-bottom:8px;}

/* ---------- Product detail ---------- */
.breadcrumb{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-dark);margin-bottom:34px;
}
.breadcrumb a{opacity:.7;transition:opacity .2s;}
.breadcrumb a:hover{opacity:1;text-decoration:underline;}
.product-split{align-items:start;}
.product-media img{border:1px solid var(--line-soft);}

/* ---------- Carrousel produit ---------- */
.carousel{position:relative;}
.carousel-track{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--cream-2);
  border:1px solid var(--line-soft);
  cursor:pointer;
}
.carousel-slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.carousel-slide.active{opacity:1;pointer-events:auto;}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,12,11,.5);color:var(--cream);
  border:1px solid rgba(255,255,255,.35);
  font-size:18px;line-height:1;cursor:pointer;
  transition:background .2s;z-index:3;
}
.carousel-arrow:hover{background:rgba(13,12,11,.85);}
.carousel-prev{left:12px;}
.carousel-next{right:12px;}
.carousel-count{
  position:absolute;bottom:12px;right:12px;z-index:3;
  font-size:11px;letter-spacing:.1em;color:var(--cream);
  background:rgba(13,12,11,.5);padding:4px 10px;
  border:1px solid rgba(255,255,255,.25);
}
.carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.carousel-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--line);border:0;padding:0;cursor:pointer;
  opacity:.5;transition:opacity .2s,background .2s;
}
.carousel-dot.active{opacity:1;background:var(--text-dark);}
.carousel-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.carousel-thumb{
  width:60px;height:60px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line-soft);opacity:.55;transition:opacity .2s,border-color .2s;
  flex-shrink:0;
}
.carousel-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.carousel-thumb.active{opacity:1;border-color:var(--text-dark);}
/* Vignette d'une vidéo sans image d'aperçu (poster) fournie : pastille "lecture" de repli. */
.carousel-thumb-video{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--cream-2);color:var(--grey-dark);font-size:16px;
}
.product-copy h1{font-size:clamp(28px,4vw,42px);letter-spacing:.04em;margin-bottom:6px;}
.product-price{font-family:var(--serif);font-size:24px;color:var(--text-dark);margin-bottom:22px;}
.product-tagline{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--grey-dark);margin-bottom:18px;}
.product-specs{margin-bottom:28px;}
.product-specs li{
  font-size:14px;line-height:1.8;color:var(--grey-dark);
  padding-left:18px;position:relative;margin-bottom:6px;
}
.product-specs li::before{
  content:"";position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--line);
}
.product-cta{display:inline-block;}
.product-longdesc{
  max-width:760px;margin:70px auto 0;
  font-size:15px;line-height:1.9;color:var(--grey-dark);
}
.product-longdesc p{margin:0 0 1.1em;}
.product-longdesc strong{color:var(--text-dark);}
.product-longdesc ul{margin:0 0 1.1em;padding-left:20px;}
.product-longdesc li{margin-bottom:6px;}
@media (max-width:860px){
  .product-split{grid-template-columns:1fr;gap:36px;}
}

/* ---------- Checkout ---------- */
.checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start;}
.checkout-summary, .checkout-payment{
  border:1px solid var(--line-soft);padding:34px 30px;
}
.checkout-line{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:15px;
}
.checkout-line-qty{color:var(--grey-dark);font-size:12px;}
.checkout-total{
  display:flex;justify-content:space-between;
  font-family:var(--serif);font-size:22px;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line-soft);
}
.checkout-note{font-size:12px;color:var(--grey-dark);margin-top:14px;}
.checkout-shipping-line{color:var(--grey-dark);}
.shipping-zone-options{display:flex;flex-direction:column;gap:12px;}
.shipping-zone-option{
  display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line-soft);
  padding:14px 16px;cursor:pointer;font-size:13px;line-height:1.6;transition:border-color .2s;
}
.shipping-zone-option:hover{border-color:var(--text-dark);}
.shipping-zone-option input{margin-top:3px;}
.shipping-zone-option strong{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.02em;}
.shipping-zone-option span.detail{display:block;color:var(--grey-dark);font-size:12px;margin-top:2px;}
.checkout-pay-buttons{display:flex;flex-direction:column;gap:14px;margin-top:10px;}
.checkout-pay-btn{width:100%;}
.checkout-secure{font-size:11px;letter-spacing:.05em;color:var(--grey-dark);margin-top:14px;text-align:center;}
.checkout-error{
  background:#fceceb;color:#8a3b32;border:1px solid #e3bdb8;
  padding:14px 16px;font-size:13px;line-height:1.6;margin-bottom:16px;
}
@media (max-width:860px){.checkout-grid{grid-template-columns:1fr;gap:36px;}}
@media (max-width:640px){
  .checkout-summary, .checkout-payment{padding:24px 20px;border-left:0;border-right:0;}
  .checkout-total{font-size:20px;}
}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;
}
.contact-info .line{margin-bottom:22px;font-size:16px;letter-spacing:.02em;}
.contact-info .line span.label{
  display:block;font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--grey-dark);margin-bottom:6px;
}
.social-row{display:flex;gap:18px;margin-top:30px;}
.social-row a{
  width:42px;height:42px;border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:16px;
  transition:background .2s,color .2s;
}
.social-row a:hover{background:var(--cream);}
.section.dark .social-row a:hover{color:var(--black);}

.form-field{margin-bottom:22px;}
.form-field label{
  display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:8px;color:var(--grey-dark);
}
.form-field input, .form-field textarea, .form-field select{
  width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:3px;
  background:#fbf9f4;padding:12px 14px;font-family:var(--sans);font-size:15px;color:inherit;
}
.form-field select{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c564c' stroke-width='1.6'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:38px;}
.form-field textarea{resize:vertical;min-height:110px;}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{outline:none;border-color:var(--text-dark);}
.form-field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:520px){.form-field-row{grid-template-columns:1fr;}}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px;}}

/* ---------- Map placeholder ---------- */
.map-note{
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--grey-dark);
  margin-top:10px;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--black);color:var(--cream-2);padding:70px 0 30px;}
.footer-top{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;
  border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:44px;margin-bottom:26px;
}
.footer-col h5{
  font-family:var(--sans);font-size:12px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--cream);margin-bottom:18px;
}
.footer-col a, .footer-col p{
  display:block;font-size:14px;color:var(--cream-2);opacity:.75;margin-bottom:10px;line-height:1.7;
}
.footer-col a:hover{opacity:1;}
.footer-logo{font-family:var(--serif);font-size:24px;letter-spacing:.1em;margin-bottom:14px;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;opacity:.55;letter-spacing:.05em;
}

/* ---------- Livraison ---------- */
.shipping-table{width:100%;border-collapse:collapse;margin:20px 0 10px;}
.shipping-table th, .shipping-table td{
  text-align:left;padding:16px 14px;border-bottom:1px solid var(--line-soft);font-size:14px;line-height:1.6;
}
.shipping-table th{
  font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey-dark);font-weight:500;
}
.legal-block{margin-bottom:36px;}
.legal-block h3{font-family:var(--serif);font-size:20px;margin-bottom:12px;}
.legal-block p, .legal-block li{color:var(--grey-dark);line-height:1.8;font-size:15px;}
.legal-block ul{padding-left:20px;margin-top:8px;}
.legal-block li{margin-bottom:6px;}

/* ---------- Misc ---------- */
.center{text-align:center;}
.mt-40{margin-top:40px;}
.badge-row{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:10px;}
.badge{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dark);}
.badge span{display:block;font-family:var(--serif);font-size:26px;letter-spacing:0;color:var(--text-dark);margin-bottom:6px;}

.notice-box{
  border:1px solid var(--line-soft);
  padding:22px 26px;
  font-size:13px;
  line-height:1.8;
  color:var(--grey-dark);
  margin-top:20px;
}

/* ---------- Barre d'onglets basse (mobile) ---------- */
.mobile-tabbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--black);
  border-top:1px solid rgba(202,191,168,.18);
  padding:10px 4px calc(10px + env(safe-area-inset-bottom,0px));
  gap:0;
}
.mobile-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px 0 4px;color:rgba(242,237,227,.45);
  text-decoration:none;background:none;border:0;cursor:pointer;
  font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
}
.mobile-tab-icon{font-family:var(--serif);font-size:17px;line-height:1;position:relative;display:block;}
.mobile-tab-label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;}
.mobile-tab.active{color:var(--cream);}
.mobile-tab-badge{
  position:absolute;top:-7px;right:-11px;min-width:14px;height:14px;padding:0 3px;
  border-radius:9px;background:var(--line);color:var(--black);
  font-size:9px;font-weight:600;line-height:14px;text-align:center;
  display:none;
}
@media (max-width:880px){
  .mobile-tabbar{display:flex;}
  body:has(.mobile-tabbar){padding-bottom:76px;}
  body.menu-open .mobile-tabbar{display:none;}
}

/* ---------- Boutique mobile : grille 2 colonnes plein cadre, filtres en chips scrollables ---------- */
@media (max-width:880px){
  .cat-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:10px;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cat-filters::-webkit-scrollbar{display:none;}
  .cat-filters .btn{flex:none;white-space:nowrap;padding:10px 16px;font-size:10.5px;}

  .prod-grid{
    grid-template-columns:repeat(2,1fr);
    gap:2px;
  }
  .prod-card{text-align:left;}
  .prod-media{
    aspect-ratio:4/5;
    border:none;
    margin-bottom:0;
  }
  .prod-name{font-size:17px;margin:12px 12px 2px;}
  .prod-material{font-size:9px;margin:0 12px 6px;}
  .prod-price{font-size:13px;margin:0 12px 16px;}
}

/* ---------- Sélecteur de taille : feuille modale (mobile) ---------- */
.size-trigger{
  display:none;
  width:100%;align-items:center;justify-content:space-between;
  padding:15px 16px;background:none;border:1px solid var(--line-soft);
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dark);cursor:pointer;
}
.size-trigger .chev{color:var(--grey-dark);font-size:11px;}
.size-sheet-overlay{
  position:fixed;inset:0;background:rgba(13,12,11,.55);
  z-index:2500;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.size-sheet-overlay.open{opacity:1;pointer-events:auto;}
.size-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:2600;
  background:var(--cream);padding:24px 22px 34px;
  transform:translateY(100%);transition:transform .3s ease;
}
.size-sheet.open{transform:translateY(0);}
.size-sheet-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;}
.size-sheet-head h3{margin:0;font-family:var(--serif);font-weight:400;font-size:22px;color:var(--text-dark);}
.size-sheet-close{background:none;border:0;font-size:22px;color:var(--grey-dark);cursor:pointer;}
.size-sheet-help{margin:0 0 18px;font-size:12.5px;font-weight:300;color:var(--grey-dark);}
.size-sheet-pills{display:flex;flex-wrap:wrap;gap:8px;}
.size-pill{
  min-width:64px;min-height:48px;padding:10px 14px;
  border:1px solid var(--line-soft);background:none;color:var(--text-dark);
  font-family:var(--sans);font-size:12px;letter-spacing:.05em;cursor:pointer;
}
.size-pill.selected{background:var(--black);border-color:var(--black);color:var(--cream);}
.size-pill.out-of-stock{opacity:.4;cursor:not-allowed;text-decoration:line-through;}
body.size-sheet-open{overflow:hidden;}

@media (max-width:880px){
  .size-select{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}
  .size-trigger{display:flex;}
}