/* Homepage — direction V1 du handoff. */

/* Hero */
/* Hauteur = viewport - chrome (utility 42 + masthead 76 + nav 46 + strip 56) : le strip reste au-dessus du pli */
.hero{min-height:calc(100svh - 220px);display:flex;align-items:center;padding:20px 0 32px;}
.hero .wrap{flex:1;}
.hero-copy .overline{margin-bottom:20px;display:inline-block;}
.hero h1{font-size:clamp(40px,4.4vw,62px);font-weight:800;color:var(--ink);}
.hero h1 em{font-style:normal;color:var(--petrol);}
.hero p.lead{margin-top:22px;font-size:18px;color:var(--ink-soft);max-width:30em;}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
.props{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;}
.prop{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink);}
.prop .dot{width:30px;height:30px;border-radius:8px;background:var(--petrol-tn);color:var(--petrol);
  display:grid;place-items:center;flex:none;}
.prop .dot svg{width:16px;height:16px;}

.hero-visual{position:relative;}
.hero-visual .visual{aspect-ratio:4/3.4;box-shadow:var(--shadow);border-radius:var(--radius);
  overflow:hidden;display:block;}
.hero-visual .visual img{width:100%;height:100%;object-fit:cover;display:block;}

/* Slider : slides empilees dans la meme cellule grid (hauteur stable, pas de layout shift).
   Transition geree en JS (opacity/transform GPU-only), .on = slide visible. */
.hero-slides{display:grid;}
.hero-slides .slide{grid-area:1/1;display:grid;grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:center;
  opacity:0;pointer-events:none;}
.hero-slides .slide.on{opacity:1;pointer-events:auto;}
.hero-visual .visual-ph{aspect-ratio:4/3.4;}

.hero-badge{position:absolute;left:-14px;bottom:26px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:16px 20px;box-shadow:var(--shadow);}
.hero-badge .big{font-family:"Archivo";font-weight:800;font-size:24px;color:var(--ink);}
.hero-badge .sm{font-size:12.5px;color:var(--ink-soft);}
.hero-mini{position:absolute;right:-10px;top:24px;background:var(--ink);color:#fff;border-radius:12px;
  padding:13px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;}
.hero-mini svg{width:20px;height:20px;color:#fff;flex:none;}
.hero-mini svg *{stroke-width:1.7;}
.hero-mini b{font-family:"Archivo";font-size:14px;display:block;}
.hero-mini span{font-size:11.5px;opacity:.75;display:block;white-space:nowrap;}

/* Barres de progression : la barre active se remplit sur la duree de l'intervalle.
   Bouton 16px de haut (cible de clic), trait 3px dessine en pseudo-element. */
.hero-dots{display:flex;gap:10px;margin-top:22px;}
.hero-dot{width:40px;height:16px;border:none;padding:0;cursor:pointer;background:transparent;position:relative;}
.hero-dot::before{content:"";position:absolute;left:0;right:0;top:50%;margin-top:-1.5px;height:3px;border-radius:999px;
  background:var(--line);transition:background .3s;}
.hero-dot:hover::before{background:var(--ink-soft);}
.hero-dot.on::after{content:"";position:absolute;left:0;right:0;top:50%;margin-top:-1.5px;height:3px;border-radius:999px;
  background:var(--petrol);transform-origin:left;transform:scaleX(0);
  animation:hero-progress var(--hero-interval,6000ms) linear forwards;}
.hero.hs-paused .hero-dot.on::after{animation-play-state:paused;}
@keyframes hero-progress{to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){
  .hero-dot.on::after{animation:none;transform:scaleX(1);}
}

/* Section selection */
section.block{padding:78px 0;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px;}
.sec-head h2{font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--ink);}
.sec-head .overline{margin-bottom:12px;display:block;}
.sec-link{font-size:14px;font-weight:600;color:var(--petrol);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.sec-link svg{width:16px;height:16px;transition:transform .2s;}
.sec-link:hover svg{transform:translateX(4px);}

/* Cartes produit */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.25s;display:flex;flex-direction:column;}
.card:hover{box-shadow:var(--shadow);border-color:transparent;}
.card .visual{aspect-ratio:4/3.8;border-radius:0;overflow:hidden;background:#fff;padding:8px;}
.card .visual img{width:100%;height:100%;object-fit:contain;display:block;}
.card .ph{aspect-ratio:4/3.8;border-radius:0;}
.card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:11px;flex:1;}
.tag{position:absolute;top:14px;left:14px;background:#fff;border:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--petrol);
  padding:5px 11px;border-radius:999px;z-index:2;}
.card h3{font-family:"Hanken Grotesk";font-weight:600;font-size:15px;letter-spacing:0;color:var(--ink);line-height:1.3;}
.swatches{display:flex;align-items:center;gap:7px;}
.sw{width:16px;height:16px;border-radius:50%;border:1px solid oklch(0% 0 0/.12);}
.swatches .more{font-size:12px;color:var(--ink-soft);font-weight:500;margin-left:2px;}
.sizes{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow:hidden;}
.sizes .more{font-size:12px;color:var(--ink-soft);font-weight:500;white-space:nowrap;margin-left:2px;}
.sz{font-size:11px;font-weight:600;color:var(--ink-soft);border:1px solid var(--line);
  border-radius:6px;padding:3px 7px;}
.card-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;padding-top:4px;}
.price{font-family:"Archivo";font-weight:700;font-size:17px;color:var(--ink);}
.price small{display:block;font-family:"Hanken Grotesk";font-weight:500;font-size:11px;color:var(--ink-soft);letter-spacing:.02em;}
.add{width:38px;height:38px;border-radius:9px;background:var(--petrol-tn);color:var(--petrol);
  display:grid;place-items:center;border:none;cursor:pointer;transition:.2s;flex:none;}
.add:hover{background:var(--petrol);color:#fff;}
.add svg{width:18px;height:18px;}

@media(max-width:1280px){
  .grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:1040px){
  .grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:980px){
  .hero{min-height:0;padding:40px 0 56px;}
  .hero-slides .slide{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:760px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr;}
}