/* =====================================================================
   zizi.ch · refonte « Accès VIP » (netVD, 2026-10)
   Objet-signature : le produit lui-même. Le tour de cou tissé (sangle à
   motif répété) et le porte-badge rigide (fente, mousqueton, fenêtre).
   Ce fichier se charge APRÈS le <style> de chaque page et ne fait que
   l'habiller : retirer la ligne <link> remet l'ancien design.
   ===================================================================== */

@font-face { font-family: 'Bricolage'; src: url('polices/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('polices/dm-mono.woff2') format('woff2');
  font-weight: 500; font-display: swap; }

:root {
  --pink: #FF2D78;
  --pink-dark: #DB1A60;
  --orange: #FF6B35;
  --yellow: #FFD23F;
  --dark: #1E1530;
  --dark-soft: #2C2142;
  --text: #1E1530;
  --text-muted: #6E6480;
  --white-soft: #FBF6EF;
  --papier: #FBF6EF;
  --papier-2: #F4ECE1;
  --trait: rgba(30,21,48,.10);
  --gradient-hot: linear-gradient(120deg, #FF2D78 0%, #FF4F57 55%, #FF6B35 100%);
  --zz-display: 'Bricolage', 'Outfit', system-ui, sans-serif;
  --zz-mono: 'DM Mono', ui-monospace, monospace;
  --zz-ombre: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -18px rgba(120,30,70,.35), 0 4px 10px -4px rgba(30,21,48,.12);
  --zz-ombre-forte: 0 1px 0 rgba(255,255,255,.8) inset, 0 40px 80px -30px rgba(160,30,80,.45), 0 10px 24px -10px rgba(30,21,48,.25);
  --shadow-card: var(--zz-ombre);
  --shadow-card-hover: var(--zz-ombre-forte);
  --radius: 22px;
  --radius-sm: 12px;
  /* Sangle tissée : bords cousus + motif « ZIZI.ch » répété (.ch collé, 2026-10-28) */
  --zz-sangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34'%3E%3Ctext x='10' y='22' font-family='Arial Black,Arial' font-weight='900' font-size='13' letter-spacing='1' fill='%23fff' fill-opacity='.92'%3EZIZI%3Ctspan font-family='Arial' font-weight='700' fill-opacity='.7'%3E.ch%3C/tspan%3E%3C/text%3E%3Ccircle cx='100' cy='17' r='3' fill='%23FFD23F'/%3E%3C/svg%3E");
  /* Même motif, écrit le long d'une sangle verticale (tour de cou du badge en haut) */
  --zz-sangle-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='120'%3E%3Ctext transform='rotate(-90 17 62)' x='17' y='62' text-anchor='middle' dominant-baseline='central' font-family='Arial Black,Arial' font-weight='900' font-size='13' letter-spacing='1' fill='%23fff' fill-opacity='.95'%3EZIZI%3Ctspan font-family='Arial' font-weight='700' fill-opacity='.75'%3E.ch%3C/tspan%3E%3C/text%3E%3Ccircle cx='17' cy='6' r='3' fill='%23FFD23F'/%3E%3C/svg%3E");
  --zz-grain: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .08 0 0 0 0 .19 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body {
  background: var(--papier);
  background-image: var(--zz-grain);
  color: var(--text);
  font-feature-settings: 'ss01';
}
::selection { background: var(--yellow); color: var(--dark); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 8px; }

/* ---------- Titres ---------- */
.section-title, .hero-title, h1, h2 {
  font-family: var(--zz-display);
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-header { max-width: 1200px; margin: 0 auto 48px; text-align: left; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px 48px; align-items: end; }
.section-header .section-tag { grid-column: 1 / -1; justify-self: start; }
.section-header .section-title { margin: 0; font-size: clamp(36px, 5vw, 64px); line-height: .98; font-weight: 800; }
.section-header .section-desc { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }

/* Étiquette de section = petite carte d'accès */
.section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--dark); color: #fff;
  font-family: var(--zz-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px 8px 10px; border-radius: 6px; margin-bottom: 8px;
  box-shadow: 0 6px 16px -8px rgba(30,21,48,.6);
}
.section-tag::before { content: ''; width: 18px; height: 6px; border-radius: 4px; background: var(--papier);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }

/* ---------- Navigation ---------- */
.nav { background: rgba(251,246,239,.82); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 1px 0 var(--trait); height: 74px; }
.nav-link { font-weight: 600; opacity: .75; position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px;
  background: var(--gradient-hot); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,1,.3,1); }
.nav-link:hover { opacity: 1; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-custom-btn { background: var(--yellow) !important; color: var(--dark) !important; box-shadow: 0 2px 0 #E0B21E !important;
  transition: transform .2s, box-shadow .2s !important; }
.nav-custom-btn:hover { transform: translateY(-2px) rotate(-1.5deg); box-shadow: 0 5px 0 #E0B21E !important; }
.nav-btn { background: var(--gradient-hot) !important; box-shadow: 0 3px 0 var(--pink-dark), 0 10px 22px -10px rgba(255,45,120,.7) !important;
  transition: transform .15s, box-shadow .15s !important; }
.nav-btn:hover { transform: translateY(-2px); }
.nav-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pink-dark) !important; }
.nav-account-btn, .lang-menu-trigger { background: #fff !important; box-shadow: 0 0 0 1px var(--trait) !important; }

/* ---------- Boutons ---------- */
.btn-big { font-family: var(--zz-display); font-weight: 700; letter-spacing: -0.01em; border-radius: 16px;
  transition: transform .18s cubic-bezier(.2,1,.3,1), box-shadow .18s; }
.btn-hot { background: var(--gradient-hot); box-shadow: 0 4px 0 var(--pink-dark), 0 18px 34px -14px rgba(255,45,120,.8); }
.btn-hot:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--pink-dark), 0 24px 40px -14px rgba(255,45,120,.8); }
.btn-hot:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pink-dark), 0 8px 16px -10px rgba(255,45,120,.8); }
.btn-outline { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--dark) !important;
  padding-left: 8px !important; padding-right: 8px !important; text-decoration: underline; text-decoration-thickness: 3px;
  text-decoration-color: var(--yellow); text-underline-offset: 7px; }
.btn-outline::after { content: ' \2192'; display: inline-block; transition: transform .2s; }
.btn-outline:hover::after { transform: translateX(5px); }

/* =====================================================================
   HÉROS : le badge qui pend au tour de cou
   ===================================================================== */
#hero { background: transparent; min-height: 100vh; min-height: 100dvh; padding: 110px 48px 72px; overflow: hidden; }
#hero::before { /* tapis de découpe pointillé */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(30,21,48,.13) 1.2px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 70% 45%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 70% at 70% 45%, #000 30%, transparent 75%);
}
.hero-bg-blob { opacity: .22; filter: blur(90px); animation: none !important; }
.hero-bg-blob.b3 { display: none; }
.hero-inner { max-width: 1240px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; }

.hero-badge { /* talon de ticket */
  background: #fff; border-radius: 10px; padding: 10px 18px 10px 16px; box-shadow: var(--zz-ombre);
  font-weight: 600; color: var(--dark);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  padding-left: 22px; padding-right: 22px;
}
.hero-badge .dot { background: #19B45A; box-shadow: 0 0 0 4px rgba(25,180,90,.18); }

.hero-title { font-size: clamp(48px, 7.2vw, 104px) !important; line-height: .9 !important; font-weight: 800 !important; margin: 4px 0 0; }
.hero-title .gradient-text { position: relative; display: inline-block; padding-right: .06em;
  background: var(--gradient-hot); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-title .gradient-text::after { /* coup de feutre sous « style » */
  content: ''; position: absolute; left: -2%; right: -4%; bottom: -.08em; height: .2em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20 C 70 6, 160 4, 296 14' stroke='%23FFD23F' stroke-width='16' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero-desc { font-size: 18px !important; line-height: 1.6 !important; max-width: 44ch; color: var(--text-muted) !important; }

.hero-price-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-price { /* étiquette de prix suspendue */
  position: relative; display: inline-flex; align-items: center;
  font-family: var(--zz-display); font-weight: 800; font-size: 30px !important; letter-spacing: -0.02em;
  color: #fff !important; -webkit-text-fill-color: #fff !important; background: var(--dark) !important;
  padding: 10px 22px 10px 40px; border-radius: 8px 14px 14px 8px;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  transform: rotate(-2deg);
}
.hero-price::before { content: ''; position: absolute; left: 18px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: var(--papier); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.hero-price-sub { font-family: var(--zz-mono); font-size: 13px !important; color: var(--text-muted) !important; }
.hero-actions { gap: 18px !important; align-items: center; }

.zz-pass { /* ligne « carte d'accès » sous les boutons, ajoutée par le JS */
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px;
  font-family: var(--zz-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.zz-pass b { color: var(--dark); font-weight: 500; }

/* Le visuel : sangle + mousqueton + porte-badge */
.hero-visual { display: flex; flex-direction: column; align-items: center; padding-top: 128px; perspective: 1400px; }
.zz-pendu { position: relative; width: min(390px, 82%); transform-origin: 50% -260px;
  animation: zzBalance 7s ease-in-out infinite; will-change: transform; }
.zz-pendu.zz-main { animation-play-state: paused; }
@keyframes zzBalance { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

.zz-sangle { /* tour de cou qui monte jusqu'en haut de l'écran */
  position: absolute; left: 50%; bottom: calc(100% + 34px); width: 46px; height: 100vh; margin-left: -23px;
  background: var(--zz-sangle-v) center calc(100% - 8px) / 34px 120px repeat-y, var(--gradient-hot);
  border-left: 2px dashed rgba(255,255,255,.45); border-right: 2px dashed rgba(255,255,255,.45);
  box-shadow: inset 4px 0 0 #E0195F, inset -4px 0 0 #E0195F, 0 10px 30px -10px rgba(224,25,95,.6);
  border-radius: 0 0 6px 6px;
}
.zz-sangle::before { /* boucle cousue */
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 18px;
  border-top: 2px dashed rgba(255,255,255,.7); border-bottom: 2px dashed rgba(255,255,255,.7);
}
.zz-mousqueton { position: absolute; left: 50%; bottom: calc(100% - 8px); width: 30px; height: 50px; margin-left: -15px; z-index: 2; }
.zz-mousqueton svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }

.hero-img-wrapper { /* le porte-badge */
  border-radius: 26px; padding: 38px 14px 14px; overflow: visible;
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  box-shadow: var(--zz-ombre-forte), 0 0 0 1px rgba(255,255,255,.9) inset, 0 0 0 1px rgba(30,21,48,.08);
  transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,1,.3,1);
}
.hero-img-wrapper::before { /* fente du porte-badge */
  content: ''; position: absolute; top: 13px; left: 50%; width: 62px; height: 12px; margin-left: -31px; border-radius: 8px;
  background: var(--papier-2); box-shadow: inset 0 2px 4px rgba(30,21,48,.35);
}
.hero-img-wrapper::after { /* reflet du plastique rigide */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 45%, transparent 55%);
  mix-blend-mode: soft-light;
}
.hero-img-wrapper img { border-radius: 14px; aspect-ratio: 4 / 5; object-fit: cover; background: #fff; }

.zz-tampon { /* tampon « ACCÈS VIP » sur le badge */
  position: absolute; right: -26px; top: 18%; z-index: 3; transform: rotate(12deg);
  font-family: var(--zz-display); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pink); padding: 8px 12px; border: 3px solid var(--pink); border-radius: 10px;
  background: rgba(255,255,255,.88); box-shadow: 0 8px 20px -10px rgba(255,45,120,.7);
}
.zz-tampon small { display: block; font-family: var(--zz-mono); font-size: 10px; letter-spacing: .12em; color: var(--dark); font-weight: 500; }

.hero-design-name { font-family: var(--zz-mono); font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark) !important; margin-top: 22px !important; }
.hero-design-name::before { content: '\2116\00a0'; color: var(--pink); }
.hero-thumbs { gap: 12px !important; margin-top: 12px !important; flex-wrap: wrap; }
.hero-thumb { width: 64px !important; height: 64px !important; border-radius: 14px !important; border: 0 !important;
  box-shadow: 0 0 0 1px var(--trait), 0 6px 14px -8px rgba(30,21,48,.5) !important; }
.hero-thumb:hover { transform: translateY(-4px) rotate(-3deg) !important; }
.hero-thumb.active { box-shadow: 0 0 0 3px var(--papier), 0 0 0 6px var(--pink), 0 10px 20px -8px rgba(255,45,120,.6) !important; }

/* =====================================================================
   Bande presse : un tour de cou tissé qui traverse l'écran
   ===================================================================== */
.trust-bar { background: transparent !important; padding: 30px 0 46px !important; position: relative; overflow: hidden; }
.trust-bar-label { font-family: var(--zz-mono); letter-spacing: .1em; text-transform: uppercase; font-size: 12px !important;
  color: var(--text-muted) !important; margin-bottom: 16px !important; }
.trust-bar-label span { color: var(--pink) !important; -webkit-text-fill-color: var(--pink) !important; }
.trust-scroll { transform: rotate(-2deg); margin: 0 -40px; padding: 15px 0;
  background: var(--gradient-hot);
  border-top: 2px dashed rgba(255,255,255,.5); border-bottom: 2px dashed rgba(255,255,255,.5);
  box-shadow: inset 0 6px 0 #E0195F, inset 0 -6px 0 #E0195F, 0 18px 40px -18px rgba(224,25,95,.8); }
.trust-logo { color: #fff !important; font-family: var(--zz-display); font-weight: 800 !important; letter-spacing: .02em !important;
  text-transform: uppercase; opacity: 1 !important; font-size: 17px !important; }
.trust-dot { background: var(--yellow) !important; width: 8px !important; height: 8px !important; opacity: 1 !important; }

/* =====================================================================
   Pourquoi ZIZI : quatre badges suspendus à une corde
   ===================================================================== */
.features { background: transparent !important; padding: 110px 48px 120px !important; position: relative; }
.features-grid { max-width: 1240px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important; position: relative; padding-top: 70px; }
.features-grid::before { /* la corde */
  content: ''; position: absolute; left: -4%; right: -4%; top: 0; height: 60px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 60' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q 250 58 500 30 T 1000 8' stroke='%231E1530' stroke-width='3' fill='none' stroke-dasharray='1 7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.features-grid.zz-vide { display: none !important; }
.feature-card {
  background: #fff !important; border: 0 !important; border-radius: 20px !important; padding: 0 !important; overflow: visible !important;
  box-shadow: var(--zz-ombre) !important; display: flex; flex-direction: column; text-align: left !important;
  transform-origin: 50% -40px; transition: transform .5s cubic-bezier(.2,1,.3,1), box-shadow .3s, opacity .6s !important;
}
.feature-card::before { /* mini-sangle qui relie le badge à la corde */
  content: '' !important; opacity: 1 !important; position: absolute; top: -46px !important; left: 50% !important; right: auto !important;
  width: 14px !important; height: 52px !important; margin-left: -7px; border-radius: 3px; z-index: -1;
  background: var(--zz-c, var(--pink)) !important; box-shadow: inset 2px 0 0 rgba(0,0,0,.12), inset -2px 0 0 rgba(0,0,0,.12);
}
.feature-card::after { /* fente */
  content: ''; position: absolute; top: 12px; left: 50%; width: 44px; height: 9px; margin-left: -22px; border-radius: 6px;
  background: var(--papier-2); box-shadow: inset 0 2px 3px rgba(30,21,48,.35);
}
.feature-card.visible:nth-child(1) { transform: rotate(-3deg); }
.feature-card.visible:nth-child(2) { transform: rotate(2deg) translateY(18px); }
.feature-card.visible:nth-child(3) { transform: rotate(-1.5deg) translateY(4px); }
.feature-card.visible:nth-child(4) { transform: rotate(3deg) translateY(22px); }
.feature-card.visible:hover { transform: rotate(0) translateY(-8px) !important; box-shadow: var(--zz-ombre-forte) !important; }
.feature-card:nth-child(1) { --zz-c: #FF2D78; }
.feature-card:nth-child(2) { --zz-c: #FF6B35; }
.feature-card:nth-child(3) { --zz-c: #1E1530; }
.feature-card:nth-child(4) { --zz-c: #E1261C; }

.zz-niveau { /* bandeau de niveau d'accès */
  margin: 34px 0 0; padding: 9px 18px; background: var(--zz-c, var(--pink)); color: #fff;
  font-family: var(--zz-display); font-weight: 800; font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline;
}
.zz-niveau small { font-family: var(--zz-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; opacity: .8; }
.feature-card .zz-corps { padding: 18px 20px 20px; display: grid; grid-template-columns: 64px 1fr; gap: 6px 14px; flex: 1; }
.feature-emoji { grid-row: span 2; width: 64px; height: 76px; border-radius: 10px; display: grid !important; place-items: center;
  font-size: 34px !important; margin: 0 !important; background: var(--papier); box-shadow: inset 0 0 0 1px var(--trait); }
.feature-title { font-family: var(--zz-display); font-size: 19px !important; line-height: 1.12 !important; letter-spacing: -0.02em; margin: 0 !important; align-self: end; }
.feature-desc { font-size: 14.5px !important; line-height: 1.55 !important; color: var(--text-muted) !important; grid-column: 1 / -1; margin-top: 8px !important; }
.zz-codebarre { margin: 0 20px 18px; height: 28px; display: flex; align-items: flex-end; gap: 10px;
  font-family: var(--zz-mono); font-size: 10px; letter-spacing: .14em; color: var(--text-muted); }
.zz-codebarre::before { content: ''; flex: 1; height: 100%;
  background: repeating-linear-gradient(90deg, var(--dark) 0 2px, transparent 2px 4px, var(--dark) 4px 5px, transparent 5px 8px, var(--dark) 8px 11px, transparent 11px 13px);
  opacity: .85; }

/* =====================================================================
   Collection : chaque produit dans son porte-badge
   ===================================================================== */
.collection { background: linear-gradient(180deg, transparent 0, var(--papier-2) 30%, var(--papier-2) 100%) !important; padding: 110px 48px 120px !important; }
.collection-search { max-width: 1200px !important; margin: 0 auto 18px !important; }
.collection-search input { border-radius: 14px !important; border: 0 !important; background: #fff !important;
  box-shadow: 0 0 0 1px var(--trait), 0 10px 24px -16px rgba(30,21,48,.4) !important; font-family: inherit; }
.collection-search input:focus { box-shadow: 0 0 0 3px var(--pink), 0 10px 24px -16px rgba(30,21,48,.4) !important; }
.collection-filters { justify-content: flex-start !important; max-width: 1200px !important; }
.filter-btn { border: 0 !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 0 0 1px var(--trait);
  font-weight: 600 !important; transition: transform .2s, box-shadow .2s, background .2s !important; }
.filter-btn:hover { transform: translateY(-2px); color: var(--dark) !important; box-shadow: 0 0 0 2px var(--dark); }
.filter-btn.active { color: #fff !important; box-shadow: none;
  background: var(--zz-sangle) 0 50% / 90px auto repeat-x, var(--gradient-hot) !important;
  background-blend-mode: soft-light; }
.collection-count { font-family: var(--zz-mono); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; text-align: left !important; }

.products-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)) !important;
  gap: 54px 26px !important; max-width: 1200px !important; padding-top: 34px; }
.product-card {
  width: auto !important; overflow: visible !important; border-radius: 20px !important; background: #fff !important;
  padding: 30px 10px 0; box-shadow: var(--zz-ombre) !important; transform-origin: 50% -34px;
  transition: transform .5s cubic-bezier(.2,1,.3,1), box-shadow .3s, opacity .6s !important;
}
.product-card::before { /* fente */
  content: ''; position: absolute; top: 11px; left: 50%; width: 46px; height: 9px; margin-left: -23px; border-radius: 6px;
  background: var(--papier-2); box-shadow: inset 0 2px 3px rgba(30,21,48,.35); z-index: 2;
}
.product-card::after { /* anneau métallique */
  content: ''; position: absolute; top: -26px; left: 50%; width: 18px; height: 34px; margin-left: -9px; border-radius: 10px;
  border: 3px solid #B9B4BE; border-bottom-color: #8E8896; background: transparent; z-index: 3;
  box-shadow: 0 2px 2px rgba(0,0,0,.15);
}
.product-card.visible:hover { transform: rotate(-2.5deg) translateY(-4px) !important; box-shadow: var(--zz-ombre-forte) !important; }
.product-card.visible:nth-child(even):hover { transform: rotate(2.5deg) translateY(-4px) !important; }
.product-card-img { border-radius: 12px; overflow: hidden !important; background: var(--papier) !important; }
.product-card-img img { aspect-ratio: 4 / 5 !important; }
.product-card-overlay { background: linear-gradient(to top, rgba(30,21,48,.75), transparent 55%) !important; }
.product-card-overlay-btn { border-radius: 10px !important; font-family: var(--zz-display); color: var(--dark) !important; }
.product-card-info { padding: 12px 6px 14px !important; }
.product-card-name { font-family: var(--zz-display); font-weight: 700 !important; font-size: 16px !important; letter-spacing: -0.01em; }
.product-card-row { margin-top: 6px; gap: 8px; }
.product-card-price { font-family: var(--zz-mono); font-weight: 500 !important; font-size: 14px !important;
  -webkit-text-fill-color: #fff !important; color: #fff !important; background: var(--dark) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap; }
.product-card-ship { font-size: 11.5px !important; line-height: 1.25; color: #138A47 !important; text-align: right; }
.wishlist-btn { border-radius: 10px !important; }

.load-more-btn { border: 0 !important; border-radius: 14px !important; background: var(--dark) !important; color: #fff !important;
  font-family: var(--zz-display); box-shadow: 0 4px 0 #000 !important; transition: transform .15s, box-shadow .15s !important; }
.load-more-btn:hover { transform: translateY(-2px); background: var(--dark) !important; }
.load-more-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000 !important; }

/* =====================================================================
   Appel final : deux sangles croisées
   ===================================================================== */
.cta-section { background: var(--gradient-hot) !important; padding: 170px 48px !important; overflow: hidden; isolation: isolate; }
.cta-section::before { display: none; }
.cta-section .zz-x { position: absolute !important; left: -10%; right: -10%; height: 58px; z-index: -1;
  background: var(--zz-sangle) 0 50% / 130px auto repeat-x, #1E1530;
  border-top: 2px dashed rgba(255,255,255,.35); border-bottom: 2px dashed rgba(255,255,255,.35);
  box-shadow: inset 0 6px 0 #120c1e, inset 0 -6px 0 #120c1e; opacity: .9; }
.cta-section .zz-x.a { top: 9%; transform: rotate(-5deg); }
.cta-section .zz-x.b { bottom: 8%; transform: rotate(4deg); background-color: #FFD23F; opacity: .95;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34'%3E%3Ctext x='10' y='22' font-family='Arial Black,Arial' font-weight='900' font-size='13' letter-spacing='1' fill='%231E1530'%3EZIZI%3Ctspan font-family='Arial' font-weight='700' fill-opacity='.75'%3E.ch%3C/tspan%3E%3C/text%3E%3Ccircle cx='100' cy='17' r='3' fill='%23FF2D78'/%3E%3C/svg%3E");
  box-shadow: inset 0 6px 0 #E8B820, inset 0 -6px 0 #E8B820; }
.cta-section .section-title { font-size: clamp(36px, 5.4vw, 72px) !important; line-height: .98 !important; max-width: 16ch; margin: 0 auto 18px !important;
  text-shadow: 0 4px 30px rgba(120,10,50,.35); }
.cta-section .section-desc { color: rgba(255,255,255,.92) !important; font-size: 18px !important; max-width: 44ch; margin-left: auto; margin-right: auto; }
.btn-white { border-radius: 16px !important; font-family: var(--zz-display); color: var(--dark) !important;
  box-shadow: 0 5px 0 rgba(30,21,48,.9), 0 24px 40px -18px rgba(30,21,48,.8) !important; transition: transform .15s, box-shadow .15s !important; }
.btn-white:hover { transform: translateY(-3px) !important; }
.btn-white:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 rgba(30,21,48,.9) !important; }

/* ---------- Pied de page ---------- */
footer { background: var(--dark) !important; position: relative; }
footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: var(--zz-sangle) 0 50% / 70px auto repeat-x, var(--gradient-hot); }
.footer-col h4 { font-family: var(--zz-mono) !important; font-weight: 500 !important; letter-spacing: .14em !important; color: var(--yellow) !important; }
.footer-col a { transition: color .2s, transform .2s; display: inline-block; }
.footer-col a:hover { color: #fff !important; transform: translateX(3px); }

/* ---------- Panier, compte, fenêtres ---------- */
.modal, .order-modal-content, .auth-panel, .account-panel { font-family: inherit; }
.toast-notif, #toastNotif { border-radius: 14px !important; font-family: var(--zz-display); }

/* =====================================================================
   Pages secondaires : sur mesure, aide, pages légales
   ===================================================================== */
section.hero:not(#hero), .help-hero, .legal-hero { background: transparent !important; position: relative; padding-top: 130px !important; }
section.hero:not(#hero) h1, .help-hero h1, .legal-hero h1 { font-size: clamp(40px, 6vw, 76px) !important; line-height: .95 !important; font-weight: 800 !important; }
.hero-tag { background: var(--dark) !important; border-radius: 6px !important; font-family: var(--zz-mono); font-weight: 500 !important;
  letter-spacing: .12em !important; text-transform: uppercase; font-size: 12px !important; padding: 8px 14px !important; }
.steps-title, .faq-section-title, .preview-section h2, .form-section h2, .contact-section h2 { font-family: var(--zz-display); letter-spacing: -0.03em; }

/* Cartes = badges avec fente */
.step-card, .cat-card, .contact-method {
  position: relative; border: 0 !important; background: #fff !important; border-radius: 20px !important;
  box-shadow: var(--zz-ombre) !important; padding-top: 40px !important;
  transition: transform .4s cubic-bezier(.2,1,.3,1), box-shadow .3s !important; transform-origin: 50% -20px;
}
.step-card::before, .cat-card::before, .contact-method::before {
  content: ''; position: absolute; top: 13px; left: 50%; width: 44px; height: 9px; margin-left: -22px; border-radius: 6px;
  background: var(--papier-2); box-shadow: inset 0 2px 3px rgba(30,21,48,.35);
}
.step-card:nth-child(1) { transform: rotate(-2deg); }
.step-card:nth-child(3) { transform: rotate(2deg); }
.step-card:hover, .cat-card:hover, .contact-method:hover { transform: rotate(0) translateY(-6px) !important; box-shadow: var(--zz-ombre-forte) !important; }
.step-num { background: var(--dark) !important; font-family: var(--zz-mono); border-radius: 8px !important; }
.cat-name { font-family: var(--zz-display); }
.cat-count { font-family: var(--zz-mono); text-transform: uppercase; letter-spacing: .08em; }

.upload-zone, .preview-upload-box { border: 2px dashed rgba(255,45,120,.45) !important; border-radius: 18px !important; background: #fff !important;
  box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 8px rgba(255,45,120,.08) !important; }
.upload-zone:hover, .preview-upload-box:hover { border-color: var(--pink) !important; }
.submit-btn, .preview-btn-primary, .contact-form button[type=submit] { background: var(--gradient-hot) !important; border-radius: 14px !important;
  font-family: var(--zz-display); box-shadow: 0 4px 0 var(--pink-dark), 0 16px 30px -14px rgba(255,45,120,.8) !important; transition: transform .15s, box-shadow .15s !important; }
.submit-btn:active, .preview-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pink-dark) !important; }
.field input, .field textarea, .field select, .form-field input, .form-field textarea, .form-field select {
  border-radius: 12px !important; border: 0 !important; background: #fff !important; box-shadow: 0 0 0 1px var(--trait) !important; }
.field input:focus, .field textarea:focus, .form-field input:focus, .form-field textarea:focus { box-shadow: 0 0 0 3px var(--pink) !important; outline: none; }

/* Aide : recherche et questions */
.search-box input, .search-box { border-radius: 14px !important; }
.search-box { box-shadow: 0 0 0 1px var(--trait), 0 10px 24px -16px rgba(30,21,48,.4) !important; border: 0 !important; background: #fff !important; }
.accordion-item { border: 0 !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 0 0 1px var(--trait) !important; margin-bottom: 10px; overflow: hidden; }
.accordion-trigger { font-family: var(--zz-display); font-weight: 600 !important; }
.accordion-item.open, .accordion-item.active { box-shadow: 0 0 0 2px var(--pink), var(--zz-ombre) !important; }

/* Pages légales */
.legal-toc { border-radius: 16px !important; background: #fff !important; border: 0 !important; box-shadow: var(--zz-ombre) !important; }
.legal-article-num { font-family: var(--zz-mono) !important; background: var(--dark) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  border-radius: 6px !important; padding: 3px 8px !important; }
.legal-highlight { border-radius: 12px !important; border-left-color: var(--pink) !important; }
.legal-updated { font-family: var(--zz-mono); letter-spacing: .06em; }

/* =====================================================================
   Tablette et mobile
   ===================================================================== */
@media (max-width: 1100px) {
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 90px !important; }
  .features-grid::before { display: none; }
  .zz-tampon { right: -8px; }
}
@media (max-width: 900px) {
  .section-header { grid-template-columns: 1fr; }
  #hero { padding: 96px 20px 56px !important; }
  .hero-inner { grid-template-columns: 1fr !important; gap: 20px !important; }
  .hero-visual { order: -1; }
  .hero-visual { padding-top: 104px; }
  .zz-pendu { width: min(290px, 72vw); transform-origin: 50% -160px; }
  .zz-sangle { width: 38px; margin-left: -19px; background-size: 30px 106px, auto; }
}
@media (max-width: 768px) {
  .features, .collection { padding: 76px 18px 84px !important; }
  .section-header { margin-bottom: 30px; }
  .features-grid { grid-template-columns: 1fr !important; padding-top: 50px; row-gap: 70px !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; }
  .feature-card.visible:nth-child(n) { transform: rotate(var(--zz-r, -1.5deg)); }
  .feature-card:nth-child(even) { --zz-r: 1.5deg; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 44px 14px !important; }
  .product-card { padding: 26px 7px 0; }
  .product-card-row { flex-direction: column; align-items: flex-start !important; }
  .product-card-ship { text-align: left; }
  .trust-logo { font-size: 15px !important; }
  .cta-section { padding: 96px 20px !important; }
  .cta-section .zz-x { height: 40px; }
  .cta-section .zz-x.a { top: 4%; }
  .cta-section .zz-x.b { bottom: 3%; }
  .hero-title { font-size: clamp(44px, 13vw, 64px) !important; }
  .hero-price { font-size: 26px !important; }
  .zz-tampon { font-size: 12px; right: -10px; top: 10%; }
}

@media (prefers-reduced-motion: reduce) {
  .zz-pendu { animation: none; }
  .trust-set { animation-duration: 120s !important; }
}

/* Aide : les 5 rubriques sur une rangée (ordi), rubrique seule centrée et de même taille (mobile) */
.cat-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 16px !important; }
.cat-card { flex: 0 0 156px; width: 156px; padding-left: 14px !important; padding-right: 14px !important; }
@media (max-width: 768px) { .cat-card { flex-basis: calc(50% - 8px); width: calc(50% - 8px); } }
.accordion-trigger { padding: 18px 20px !important; }
.accordion-content { padding-left: 20px !important; padding-right: 20px !important; }