/* Lookbook Fusion H26 */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:    #1A1A1A;
  --gris:   #9A9A9A;
  --papier: #FAF8F4;
  --olive:  #5B6146;

  --font-body: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.18,1);
  --dur:  700ms;

  --pad-x: clamp(16px, 2vw, 32px);

  /* header du site (fixed / sticky) : valeur ecrite par le JS */
  --lbp-header-h: 0px;
  /* hauteur visible sous le header */
  --lbp-view-h: calc(100dvh - var(--lbp-header-h));

  /* photos 600 x 900 */
  --ratio-w: 2;
  --ratio-h: 3;
  --side-min: 210px;
  --frame-h: min(calc(var(--lbp-view-h) * .94), calc((100vw - 2 * var(--side-min)) * var(--ratio-h) / var(--ratio-w)));
  --frame-w: calc(var(--frame-h) * var(--ratio-w) / var(--ratio-h));

  --gap-carrousels: 16px;
  --thumb-w: 96px;
  --thumb-gap: 10px;

  --logo-w: clamp(170px, 20vw, 300px);
}

/* tout est limite au lookbook : le reste de la page n'est pas touche */
.lookbook-scroll,
.lookbook-scroll *{ margin:0; padding:0; box-sizing:border-box; }

.lookbook-scroll{
  background:var(--papier);
  color:var(--ink);
  font-family:var(--font-body);
}

@media (prefers-reduced-motion: reduce){
  .lookbook-scroll *{ transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   STRUCTURE
   Le lookbook occupe l'espace visible sous le header du site ;
   la page continue en dessous.
   isolation : les z-index internes restent confines au lookbook
   et ne passent jamais au-dessus du header / menu du site.
   ============================================================ */
.app{
  position:relative;
  isolation:isolate;
  width:100%;
  height:var(--lbp-view-h);
  overflow:hidden;
}
.layout{ position:relative; height:100%; }

/* ============================================================
   MARQUE — le texte prend exactement la largeur du logo
   ============================================================ */
.brand{
  position:absolute;
  top:calc((var(--lbp-view-h) - var(--frame-h)) / 2);
  left:var(--pad-x);
  z-index:30;
  /* largeur du logo, sans deborder sur la photo */
  width:min(var(--logo-w), calc(50vw - var(--frame-w) / 2 - var(--gap-carrousels) - 2 * var(--pad-x)));
}
.brand-logo{
  display:block;
  width:100%;
  height:auto;
}
.brand-tagline{
  width:100%;
  margin-top:16px;
  font-size:clamp(12px, calc(var(--logo-w) / 23), 13px);
  font-weight:400;
  line-height:1.45;
  color:var(--gris);
}

/* CTA sous le texte : lien souligne qui se retire au survol */
.lookbook-scroll .brand-cta{
  display:inline-block;
  margin-top:18px;
  padding-bottom:3px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--olive);
  text-decoration:none;
  background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition:background-size 400ms var(--ease), color 300ms var(--ease);
}
.lookbook-scroll .brand-cta:hover{
  color:var(--ink);
  background-position:100% 100%;
  background-size:0 1px;
}
.lookbook-scroll .brand-cta:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:4px;
}

/* ============================================================
   GAUCHE — produits du look actif
   ============================================================ */
.info-panel{
  position:absolute;
  top:0; bottom:0; left:0;
  width:calc(50% - var(--frame-w) / 2 - var(--gap-carrousels));
  padding:0 var(--pad-x);
  z-index:20;
}
.product-list{
  position:absolute;
  top:50%;
  left:var(--pad-x);
  right:var(--pad-x);
  transform:translateY(-50%);
  display:grid;
  align-items:center;       /* chaque look est centre, quelle que soit sa longueur */
}

.look-block{
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  gap:7px;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.look-block.is-active{ opacity:1; pointer-events:auto; }

/* intitule de tenue (ex. "Tenue 1") quand un look en regroupe plusieurs */
.look-label{
  margin-bottom:6px;
  font-size:10px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris);
}
.look-product-row + .look-label{ margin-top:14px; }

/* intertitre de groupe : « Victime de son succès » ou « Bientôt disponible » */
.look-noted-title{
  margin-bottom:2px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--olive);
}
.look-product-row + .look-noted-title{ margin-top:10px; }

/* piece indisponible : ligne attenuee + prix barre
   piece bientot disponible : ligne attenuee, prix non barre
   Selecteurs renforces (+ !important) pour passer devant le CSS du site,
   y compris au survol. */
.lookbook-scroll .info-panel .look-product-row--noted a.product-name,
.lookbook-scroll .info-panel .look-product-row--noted a.product-name:hover,
.lookbook-scroll .info-panel .look-product-row--soon a.product-name,
.lookbook-scroll .info-panel .look-product-row--soon a.product-name:hover{
  color:var(--gris) !important;
}
.look-product-row--noted .price{ text-decoration:line-through; }

.look-product-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:baseline;
  gap:10px;
  line-height:1.3;
}
.look-product-row a.product-name{
  font-size:13px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink);
  text-decoration:none;
}
.look-product-row a.product-name:hover{ color:var(--olive); }
.look-product-row .price{
  flex:0 0 auto;
  font-size:13px;
  font-weight:400;
  letter-spacing:.05em;
  white-space:nowrap;
  color:var(--gris);
}

/* ============================================================
   PHOTO — article.lbp__article
   ============================================================ */
.lbp__article > a{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
}
.lbp__visuel{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:transparent;
}
.lbp__visuel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

/* ============================================================
   CENTRE — carrousel vertical
   ============================================================ */
.stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:10;
}
.stage-frame{
  position:relative;
  width:var(--frame-w);
  height:var(--frame-h);
  overflow:hidden;
  pointer-events:auto;
}
.slide{
  position:absolute;
  inset:0;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  will-change:transform, opacity;
}
.slide[data-state="active"]{ transform:translateY(0);     opacity:1; z-index:2; }
.slide[data-state="prev"]  { transform:translateY(-100%); opacity:0; z-index:1; }
.slide[data-state="next"]  { transform:translateY(100%);  opacity:0; z-index:1; }
.slide[data-state="idle"]  { transform:translateY(100%);  opacity:0; z-index:0; transition:none; }

/* ============================================================
   DROITE — pellicule horizontale
   ============================================================ */
.filmstrip{
  position:absolute;
  top:0; bottom:0; right:0;
  left:calc(50% + var(--frame-w) / 2 + var(--gap-carrousels));
  display:flex;
  align-items:center;
  overflow:hidden;
  z-index:20;
}
.filmstrip-track{
  display:flex;
  gap:var(--thumb-gap);
  transition:transform var(--dur) var(--ease);
  will-change:transform;
}
.thumb{
  position:relative;
  flex:0 0 auto;
  width:var(--thumb-w);
  aspect-ratio:var(--ratio-w) / var(--ratio-h);
  overflow:hidden;
  cursor:pointer;
  transition:opacity var(--dur) var(--ease);
}
.thumb.is-past{ opacity:0; pointer-events:none; }
.thumb img{
  filter:grayscale(35%);
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.thumb.is-active img{ filter:none; transform:scale(1.03); }
.thumb a:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; }

/* ============================================================
   TABLETTE
   ============================================================ */
@media (max-width:1180px){
  :root{
    --side-min:170px;
    --frame-h:min(calc(var(--lbp-view-h) * .9), calc((100vw - 2 * var(--side-min)) * var(--ratio-h) / var(--ratio-w)));
    --thumb-w:76px;
    --gap-carrousels:12px;
    --logo-w:clamp(140px, 18vw, 220px);
  }
  .brand-tagline{ margin-top:12px; }
  .lookbook-scroll .brand-cta{ margin-top:14px; }
}

/* ============================================================
   MOBILE + TABLETTE PORTRAIT
   La page defile normalement. Ordre des blocs :
   [ marque   ]
   [ vignettes] (horizontal)
   [ photos   ] (vertical, scroll-snap natif)
   [ produits ]
   ============================================================ */
@media (max-width:820px), (max-width:1180px) and (orientation:portrait){
  :root{
    --pad-x:16px;
    --thumb-w:44px;
    --thumb-gap:2px;
    --m-photo-w:100vw;                              /* photos bord a bord */
    --m-photo-h:calc(var(--m-photo-w) * 3 / 2);
    --m-text-w:calc(100vw - 2 * var(--pad-x));     /* textes avec marges */
    --m-gap:12px;
    --m-space:20px;
    --m-ease:cubic-bezier(.2,.7,.1,1);
  }

  .app{
    display:flex;
    flex-direction:column;
    width:auto;
    height:auto;
    overflow:visible;
    padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));
  }

  .layout{
    position:static;
    display:flex;
    flex-direction:column;
    align-items:center;
    height:auto;
  }

  /* ---- MARQUE ---- */
  .brand{
    position:static;
    width:var(--m-text-w);
    margin:0 auto;
    padding:28px 0 calc(var(--m-space) * 1.5);
    text-align:center;
  }
  .brand-logo{ width:min(260px, 70%); margin:0 auto; }
  .brand-tagline{
    max-width:36ch;
    margin:16px auto 0;
    font-size:13px;
    font-weight:300;
    line-height:1.6;
    letter-spacing:.01em;
    color:#7E7E7E;
  }

  /* CTA : centre sous le texte, zone tactile agrandie */
  .lookbook-scroll .brand-cta{
    margin-top:18px;
    padding:8px 0 3px;
    font-size:11.5px;
    background-position:0 100%;
  }
  .lookbook-scroll .brand-cta:active{ color:var(--ink); }

  /* ---- VIGNETTES ---- */
  .filmstrip{
    order:1;
    position:static;
    display:block;
    align-self:flex-start;
    width:var(--m-photo-w);
    height:auto;
    margin-left:calc(50% - 50vw);                   /* bord a bord */
    margin-bottom:var(--m-space);
    overflow-x:auto;                                /* seulement si beaucoup de looks */
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .filmstrip::-webkit-scrollbar{ display:none; }
  .filmstrip-track{
    width:100%;
    transform:none !important;
    transition:none;
  }
  .thumb{
    flex:1 1 0;
    width:auto;
    min-width:36px;
  }
  .thumb.is-past{ opacity:1; pointer-events:auto; }
  .thumb img{ transition:filter 500ms var(--m-ease), opacity 500ms var(--m-ease); }
  .thumb:not(.is-active) img{ filter:grayscale(80%); opacity:.45; }
  .thumb.is-active img{ transform:none; }
  .thumb::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    box-shadow:inset 0 0 0 1px var(--olive);
    opacity:0;
    transition:opacity 400ms var(--m-ease);
    pointer-events:none;
  }
  .thumb.is-active::after{ opacity:1; }

  /* ---- PHOTOS ---- */
  .stage{
    order:2;
    position:static;
    display:block;
    align-self:flex-start;
    width:var(--m-photo-w);
    margin-left:calc(50% - 50vw);                   /* bord a bord */
    pointer-events:auto;
  }
  .stage-frame{
    display:flex;
    flex-direction:column;
    gap:var(--m-gap);
    width:100%;
    height:var(--m-photo-h);
    overflow-x:hidden;
    overflow-y:auto;
    scroll-snap-type:y mandatory;
    overscroll-behavior-y:auto;                     /* au 1er / dernier look, la page prend le relais */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .stage-frame::-webkit-scrollbar{ display:none; }

  .stage-frame > .slide{
    position:relative;
    inset:auto;
    flex:0 0 var(--m-photo-h);
    width:100%;
    overflow:hidden;
    background:#EEEAE2;
    opacity:1;
    z-index:auto;
    transform:scale(1);
    transition:transform 600ms var(--m-ease), opacity 600ms var(--m-ease);
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  .stage-frame > .slide:not([data-state="active"]){
    transform:scale(.9);
    opacity:.45;
  }
  .stage-frame > .slide .lbp__visuel img{
    object-fit:cover;
    transform:scale(1.06);
    transition:transform 1200ms var(--m-ease);
  }
  .stage-frame > .slide[data-state="active"] .lbp__visuel img{ transform:scale(1); }

  /* indice de glissement, joue une seule fois */
  .stage-frame.is-hinting > .slide{ animation:lbp-nudge 1100ms var(--m-ease) 1; }
  @keyframes lbp-nudge{
    0%,100%{ translate:0 0; }
    40%    { translate:0 -40px; }
  }

  /* ---- PRODUITS ---- */
  .info-panel{
    order:3;
    position:static;
    width:var(--m-text-w);
    margin-top:8px;                                 /* references juste sous la photo */
    padding:0;
  }
  /* seul le look actif occupe de la place : pas de vide au-dessus ni en dessous */
  .product-list{ position:static; transform:none; display:block; }
  .look-block{ display:none; }
  .look-block.is-active{ display:flex; }

  /* aucune ligne de separation, meme si le CSS du site en ajoute */
  .info-panel,
  .info-panel *{
    border:0 !important;
    box-shadow:none !important;
  }
  .info-panel hr{ display:none !important; }
  .look-block{ gap:0; transition-duration:250ms; }

  .look-label{ margin:6px 0 2px; }
  .look-product-row + .look-label{ margin-top:18px; }
  .look-noted-title{ margin:6px 0 2px; }
  .look-product-row + .look-noted-title{ margin-top:14px; }

  .look-product-row{
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:16px;
    padding:6px 0;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 450ms var(--m-ease), transform 600ms var(--m-ease);
  }
  .look-block.is-active .look-product-row{ opacity:1; transform:none; }
  .look-block.is-active .look-product-row:nth-of-type(2){ transition-delay:60ms; }
  .look-block.is-active .look-product-row:nth-of-type(3){ transition-delay:120ms; }
  .look-block.is-active .look-product-row:nth-of-type(4){ transition-delay:180ms; }
  .look-block.is-active .look-product-row:nth-of-type(5){ transition-delay:240ms; }

  .look-product-row a.product-name{
    padding-bottom:2px;
    font-size:14px;
    letter-spacing:.08em;
    white-space:normal;
    background:linear-gradient(var(--olive), var(--olive)) 0 100% / 0 1px no-repeat;
    transition:background-size 400ms var(--m-ease), color 300ms;
  }
  .look-product-row a.product-name:active,
  .look-product-row a.product-name:focus-visible{
    background-size:100% 1px;
    color:var(--olive);
    outline:none;
  }
  .look-product-row .price{
    font-size:14px;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    opacity:.55;
  }

  /* indisponible / bientot disponible : nom gris (regle commune plus haut), prix attenue */
  .look-product-row--noted .price,
  .look-product-row--soon .price{ opacity:.4; }
}

/* ============================================================
   TABLETTE PORTRAIT — meme empilement que le mobile, mais la photo
   est plafonnee en hauteur et centree ; vignettes et produits
   prennent sa largeur
   ============================================================ */
@media (min-width:821px) and (max-width:1180px) and (orientation:portrait){
  :root{
    --m-photo-w:min(100vw - 2 * 48px, 62svh * 2 / 3);
    --m-text-w:var(--m-photo-w);
    --thumb-gap:6px;
    --m-space:24px;
  }
  .brand{ padding-top:40px; }
  .brand-logo{ width:min(300px, 60%); }
  .brand-tagline{ max-width:44ch; font-size:14px; }
  .lookbook-scroll .brand-cta{ margin-top:20px; font-size:12px; }

  .stage,
  .filmstrip{
    align-self:center;
    margin-left:0;
  }
  .info-panel{ margin-top:12px; }
  .look-product-row{ padding:8px 0; }
  .look-product-row a.product-name,
  .look-product-row .price{ font-size:15px; }
}

@media (max-width:380px){
  :root{ --pad-x:14px; }
  .brand-logo{ width:min(230px, 66%); }
  .brand-tagline{ font-size:12.5px; }
}

@media (max-width:820px) and (prefers-reduced-motion: reduce),
       (max-width:1180px) and (orientation:portrait) and (prefers-reduced-motion: reduce){
  .stage-frame.is-hinting > .slide{ animation:none; }
}