/* Homepage — direction V1 du handoff. */

/* Hero */
/* Hauteur = viewport - chrome reel (utility ~52 + masthead ~100 + nav ~50 + strip 56 + marge) :
   le strip reste ENTIEREMENT au-dessus du pli. Sur petit ecran, le contenu (image) prend le relais. */
.hero{min-height:calc(100svh - 300px);display:flex;align-items:center;padding:16px 0 24px;}
.hero .wrap{flex:1;}
.hero-copy .eyebrow{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;}
#produits,#familles,.reviews{background:#fff;}
.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 .eyebrow{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:box-shadow .25s,border-color .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;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(2 * 1.3em);}
.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;}
/* Prix boutique barre : reference quand une population reduit le prix (D53). */
.price-was{font-weight:500;font-size:13px;color:var(--ink-soft);margin-right:5px;}
.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;}

/* Section familles : nav verticale (gauche) + panneaux (droite), un panneau visible.
   .fam-panel.on = panneau actif ; le swap est anime en JS (motion). */
.sec-head .sec-text{margin-top:12px;font-size:15px;color:var(--ink-soft);max-width:42em;}
.fam-layout{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start;}
.fam-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:96px;align-self:start;}
.fam-tab{appearance:none;border:none;cursor:pointer;background:transparent;text-align:left;width:100%;
  font-family:"Hanken Grotesk";font-size:15px;font-weight:600;color:var(--ink-soft);
  padding:13px 18px;border-radius:11px;transition:background .2s,color .2s;}
.fam-tab:hover{background:var(--bg-soft);color:var(--ink);}
.fam-tab.on{background:var(--ink);color:#fff;}
/* Panneaux empiles dans la meme cellule (grid-area 1/1) : hauteur stable, aucun
   saut de layout au swap. Inactif = opacity 0 (anime en JS), comme le hero. */
.fam-panels{display:grid;min-width:0;}
.fam-panel{grid-area:1/1;opacity:0;pointer-events:none;}
.fam-panel.on{opacity:1;pointer-events:auto;}
.fam-panel .grid{grid-template-columns:repeat(3,1fr);}

@media(max-width:1040px){
  .fam-panel .grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .fam-layout{grid-template-columns:1fr;gap:22px;}
  .fam-nav{flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;position:static;}
  .fam-nav::-webkit-scrollbar{display:none;}
  .fam-tab{flex:none;width:auto;white-space:nowrap;padding:10px 16px;border-radius:999px;}
}
@media(max-width:480px){
  .fam-panel .grid{grid-template-columns:1fr;}
}

@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;}
}

/* Process "Du logo a la livraison" : fond blanc + cartes numerotees */
.process{background:#fff;}
.proc-head{max-width:620px;margin-bottom:46px;}
.proc-head h2{font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--ink);}
.proc-head p{margin-top:16px;font-size:17px;line-height:1.5;color:var(--ink-soft);}
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.proc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px 36px;box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease;}
.proc-card:hover{transform:translateY(-4px);
  box-shadow:0 1px 2px oklch(40% 0.02 235/.06),0 18px 42px oklch(40% 0.04 235/.11);}
.proc-num{display:block;font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(46px,4.4vw,60px);line-height:1;letter-spacing:-.03em;
  color:var(--petrol);}
.proc-card h3{margin-top:26px;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.proc-card p{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}

@media(max-width:860px){
  .proc-grid{grid-template-columns:1fr;gap:14px;}
  .proc-head{margin-bottom:32px;}
  .proc-card{padding:26px 24px 28px;}
}

/* Vitrine editoriale : accroche centree + mosaique parallaxe. Les rangees
   debordent de 80px de chaque cote pour que le translateX du scroll ne laisse
   jamais apparaitre le fond ; les fondus lateraux masquent les bords.
   object-fit:cover cadre les tuiles. */
.showcase{position:relative;overflow:hidden;background:#fff;}
.sc-head{margin-bottom:46px;display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap;}
.sc-head-copy{max-width:640px;}
.sc-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  background:var(--bg-soft);border-radius:999px;padding:6px 15px 6px 7px;font-size:13.5px;color:var(--ink-soft);}
.sc-badge b{background:var(--ink);color:#fff;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;letter-spacing:.01em;}
.sc-head h2{margin-top:20px;font-size:clamp(30px,3.4vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--ink);}
.sc-head-copy>p{margin-top:16px;font-size:17px;line-height:1.55;color:var(--ink-soft);max-width:34em;}
.sc-tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;}
.sc-tag{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 14px;
  font-size:13px;color:var(--ink-soft);transition:border-color .2s ease,color .2s ease;}
.sc-tag:hover{border-color:var(--petrol);color:var(--petrol);}
.sc-cta{flex:none;white-space:nowrap;}
.sc-cta span{margin-left:4px;}
@media(max-width:760px){
  .sc-head{align-items:flex-start;gap:24px;}
  .sc-cta{width:100%;justify-content:center;}
}
.mosaic-band{position:relative;overflow:hidden;}
.mosaic-rows{display:flex;flex-direction:column;gap:16px;}
.mosaic-row{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;grid-auto-rows:200px;
  width:calc(100% + 160px);margin-left:-80px;will-change:transform;}
.mosaic-tile{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--bg-soft);}
.mosaic-tile.span-2{grid-column:span 2;}
.mosaic-tile.span-3{grid-column:span 3;}
.mosaic-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.mosaic-fade{position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none;}
.mosaic-fade-l{left:0;background:linear-gradient(90deg,#fff,transparent);}
.mosaic-fade-r{right:0;background:linear-gradient(270deg,#fff,transparent);}

@media(max-width:860px){
  .mosaic-row{grid-auto-rows:130px;gap:10px;}
  .mosaic-rows{gap:10px;}
  .mosaic-fade{width:70px;}
}

/* Avis clients Google : note globale (sec-head) + cartes d'avis */
/* Badge note globale (a droite du titre) : carte de reassurance Google */
.rev-score{display:inline-flex;align-items:center;gap:14px;padding:12px 18px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
.g-logo{width:26px;height:26px;flex:none;}
.rev-num{font-family:"Archivo";font-weight:800;font-size:30px;line-height:1;color:var(--ink);letter-spacing:-.02em;}
.rev-score-meta{display:flex;flex-direction:column;gap:4px;}
.stars{display:inline-flex;gap:2px;font-size:14px;line-height:1;letter-spacing:1px;color:#fbbc04;}
.stars .star{color:var(--line);}
.stars .star.on{color:#fbbc04;}
.stars.sm{font-size:13px;}
.rev-score-meta a,.rev-score-meta span{font-size:12.5px;color:var(--ink-soft);font-weight:500;display:inline-flex;align-items:center;gap:5px;}
.rev-score-meta a:hover{color:var(--petrol);}
.rev-score-meta a svg{width:13px;height:13px;}

/* Avis : slider horizontal 2 rangees. Une seule grille en flux colonne remplit
   chaque colonne (haut puis bas) avant de passer a la suivante ; les rangees
   1fr/1fr alignent les hauteurs. Defilement natif scroll-snap (swipe au doigt),
   fleches pour wiring, fondus de bord + peek de la colonne suivante = indice
   qu'il reste des avis a faire defiler. */
.rev-slider{position:relative;margin-top:2px;}
.rev-track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);
  grid-auto-columns:var(--rev-card-w,358px);gap:22px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scroll-behavior:smooth;
  padding:6px 2px 16px;scrollbar-width:none;-ms-overflow-style:none;}
.rev-track::-webkit-scrollbar{display:none;}
/* Fondus de bord : masques uniquement du cote ou il reste du contenu. */
.rev-slider::before,.rev-slider::after{content:"";position:absolute;top:0;bottom:16px;
  width:72px;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s ease;}
.rev-slider::before{left:0;background:linear-gradient(90deg,#fff 18%,transparent);}
.rev-slider::after{right:0;background:linear-gradient(270deg,#fff 18%,transparent);}
.rev-slider:not(.at-start)::before{opacity:1;}
.rev-slider:not(.at-end)::after{opacity:1;}
/* Fleches : pastilles flottantes centrees sur la bande de cartes. */
.rev-arrow{position:absolute;top:calc((100% - 16px)/2);transform:translateY(-50%);z-index:3;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink);cursor:pointer;
  box-shadow:0 8px 22px oklch(40% .04 235/.16);
  transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .25s ease;}
.rev-arrow:hover{background:var(--petrol);color:#fff;border-color:var(--petrol);}
.rev-arrow:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;}
.rev-arrow svg{width:22px;height:22px;}
.rev-arrow.prev{left:4px;}
.rev-arrow.next{right:4px;}
.rev-arrow[disabled]{opacity:0;pointer-events:none;}
.rev-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  scroll-snap-align:start;height:100%;
  border-radius:18px;padding:26px 26px 22px;display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.rev-card:hover{transform:translateY(-4px);border-color:var(--petrol-tn);
  box-shadow:0 1px 2px oklch(40% 0.02 235/.06),0 20px 44px oklch(40% 0.04 235/.12);}
.rev-quote{position:absolute;top:6px;right:18px;font-family:"Archivo";font-weight:800;
  font-size:96px;line-height:1;color:var(--petrol);opacity:.07;pointer-events:none;user-select:none;}
.rev-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;}
.rev-g{flex:none;}
.rev-g .g-logo{width:20px;height:20px;}
.rev-text{flex:1;font-size:15px;line-height:1.62;color:var(--ink);position:relative;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;}
.rev-card-foot{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line);}
.rev-avatar{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:"Archivo";font-weight:700;font-size:17px;color:#fff;
  background:linear-gradient(135deg,var(--petrol),var(--petrol-dk));}
.rev-card-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
.rev-author{font-family:"Hanken Grotesk";font-weight:600;font-size:14.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rev-date{font-size:12.5px;color:var(--ink-soft);}

@media(max-width:680px){
  .rev-track{--rev-card-w:82vw;gap:14px;}
  .rev-arrow{display:none;}
  .sec-head .rev-score{margin-top:4px;}
}