/* ==========================================================================
   LOOKBOOK — HELLO LONDON
   ==========================================================================
   Sommaire
   01. Polices
   02. Variables
   03. Base & reset
   04. Images (ratios, recadrage, survol)
   05. Lignes, animations, visibilité
   06. Image plein cadre, GIF, CTA final
   07. Section  — Intro manuscrite
   08. Section  — Veste Clea (desktop)
   09. Section  — Veste Clea (mobile)
   10. Section  — Deux portraits (Djovanni / Sac Victor)
   11. Section  — Paysages (Nelia, Constant)
   12. Section  — Veste Casey, 3 images + sticker (desktop)
   13. Section  — Veste Casey (mobile)
   14. Section  — Manteau Daren, diptyque (desktop)
   15. Section  — Manteau Daren, grille (mobile)
   16. Section  — Logo + Clemence / Maxime (desktop)
   17. Section  — Logo + Clemence / Maxime (mobile)
   18. Section  — Manteau Cassandre (desktop)
   19. Section  — Manteau Cassandre (mobile)
   20. Section  — Veste Oscar (desktop)
   21. Section  — Veste Oscar (mobile)
   22. Section  — Veste Nelia, grille 2x2
   23. Composant — CTA « Voir le look »
   24. Composant — Carte produits
   ========================================================================== */


/* ==========================================================================
   01. POLICES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');

@font-face {
  font-family: "Director";
  src: url('animation/lookbook/lookbook-hello-london/typo/Director-Regular.woff2?$staticlink$') format('woff2'),
       url('animation/lookbook/lookbook-hello-london/typo/Director-Regular.woff?$staticlink$') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   02. VARIABLES
   ========================================================================== */

:root {
  /* Couleurs */
  --color-secondary: #ffffff;
  --color-text:      #000000;
  --color-bg:        #ffffff;
  --color-accent:    #000000;
  --color-muted:     rgba(0, 0, 0, .45);

  /* Typographie */
  --font-primary: "Montserrat", sans-serif;
  --fs-body:      14px;

  /* Gouttières */
  --gap:      5px;
  --grid-gap: 5px;

  /* Rythme mobile */
  --m-pad:      30px;
  --m-gap-lg:   30px;
  --m-cta-w:    55%;
  --m-text-pad: 40px;
  --m-logo-pad: var(--m-pad);

  /* CTA « Voir le look » */
  --lb-cta-pad-y:   15px;
  --lb-cta-pad-x:   22px;
  --lb-cta-gap:     14px;
  --lb-cta-ls:      1.6px;
  --lb-cta-icon:    11px;
  --lb-cta-icon-w:  1px;
  --lb-cta-icon-fs: 19px;

  --lb-cta-inset:  24px;
  --lb-cta-offset: 12px;

  --lb-cta-side-gap: 17px;

  /* Carte produits */
  --lb-card-w:       380px;
  --lb-card-pad-x:   34px;
  --lb-card-pad-top: 34px;
  --lb-card-pad-bot: 40px;
  --lb-card-content: calc(var(--lb-card-w) - 2 * var(--lb-card-pad-x));
}

@media (min-width: 1025px) {
  :root { --gap: 60px; }
}

@media (max-width: 1024px) {
  :root { --fs-body: 13px; }
}

@media (max-width: 767px) {
  :root {
    --fs-body: 12px;

    --lb-cta-pad-y:   11px;
    --lb-cta-pad-x:   13px;
    --lb-cta-gap:     9px;
    --lb-cta-ls:      1px;
    --lb-cta-icon:    9px;
    --lb-cta-icon-fs: 16px;
    --lb-cta-inset:   12px;
    --lb-cta-offset:  12px;

    --lb-card-w:       300px;
    --lb-card-pad-x:   20px;
    --lb-card-pad-top: 22px;
    --lb-card-pad-bot: 26px;
  }
}


/* ==========================================================================
   03. BASE & RESET
   ========================================================================== */

html,
body { overflow-x: clip; }

.lookbook *,
.lookbook *::before,
.lookbook *::after { box-sizing: border-box; }

.lookbook {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: calc(50% - 50vw);
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  line-height: 1.6;
  overflow-x: clip;
}

.lookbook a { color: inherit; text-decoration: none; }

.lookbook a:focus-visible,
.lookbook button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lookbook .line { position: relative; width: 100%; max-width: 100%; overflow-x: clip; }
.lookbook .cell { min-width: 0; max-width: 100%; }

.lookbook .quickshop { display: block; position: relative; text-decoration: none; }

.lookbook .product-info-left { text-align: left; }


/* ==========================================================================
   04. IMAGES
   ========================================================================== */

.lookbook picture { display: block; width: 100%; max-width: 100%; }
.lookbook picture img { display: block; }

.lookbook img,
.lookbook svg { max-width: 100%; height: auto; }

.lookbook .img-responsive {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Survol : léger zoom */
.lookbook .img-container img { transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1); }
.lookbook a:hover .img-container img { transform: scale(1.015); }

/* Visuels exclus du zoom (silhouette détourée et paysages à fond perdu) */
.lookbook .casey-center-img .img-container img,
.lookbook .casey-center-img:hover .img-container img,
.lookbook .casey-mobile-img .img-container img,
.lookbook .casey-mobile-img:hover .img-container img,
.lookbook .line-constant-paysage .img-container img,
.lookbook .line-constant-paysage a:hover .img-container img {
  transform: none !important;
  transition: none;
}

/* Conteneurs à ratio fixe : recadrage en cover */
.lookbook .img-container[style],
.lookbook .line-way-of-life-images .cell .img-container,
.lookbook .casey-left .img-container,
.lookbook .casey-right .img-container,
.lookbook .diptyque-image-cell .img-container,
.lookbook .diptyque-mobile-cell .img-container,
.lookbook .cassandre-detail .img-container,
.lookbook .cassandre-detail-mob .img-container,
.lookbook .cell-cassandre-main .img-container,
.lookbook .cassandre-main-mob .img-container,
.lookbook .taxi-image .img-container,
.lookbook .taxi-image-detail .img-container,
.lookbook .taxi-image-mobile .img-container,
.lookbook .nelia-cell .img-container { overflow: hidden; }

.lookbook .line-way-of-life-images .cell .img-container picture,
.lookbook .casey-left .img-container picture,
.lookbook .casey-right .img-container picture,
.lookbook .diptyque-image-cell .img-container picture,
.lookbook .diptyque-mobile-cell .img-container picture,
.lookbook .cassandre-detail .img-container picture,
.lookbook .cassandre-detail-mob .img-container picture,
.lookbook .cell-cassandre-main .img-container picture,
.lookbook .cassandre-main-mob .img-container picture,
.lookbook .taxi-image .img-container picture,
.lookbook .taxi-image-detail .img-container picture,
.lookbook .taxi-image-mobile .img-container picture,
.lookbook .nelia-cell .img-container picture { height: 100%; }

.lookbook .line-way-of-life-images .cell .img-container img,
.lookbook .casey-left .img-container img,
.lookbook .casey-right .img-container img,
.lookbook .diptyque-image-cell .img-container img,
.lookbook .diptyque-mobile-cell .img-container img,
.lookbook .cassandre-detail .img-container img,
.lookbook .cassandre-detail-mob .img-container img,
.lookbook .cell-cassandre-main .img-container img,
.lookbook .cassandre-main-mob .img-container img,
.lookbook .taxi-image .img-container img,
.lookbook .taxi-image-detail .img-container img,
.lookbook .taxi-image-mobile .img-container img,
.lookbook .nelia-cell .img-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   05. LIGNES, ANIMATIONS, VISIBILITÉ
   ========================================================================== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lookbook .line { animation: fadeInUp 0.6s ease forwards; }

.lookbook .line-margin { margin-bottom: var(--gap); }

.lookbook .line-flex { display: flex; flex-wrap: wrap; }

.lookbook .line-flex .cell:nth-child(1) { animation-delay: 0.1s; }
.lookbook .line-flex .cell:nth-child(2) { animation-delay: 0.2s; }
.lookbook .line-flex .cell:nth-child(3) { animation-delay: 0.3s; }

.lookbook .no-gap,
.lookbook .line-flex.no-gap,
.lookbook .line-2-img.no-gap { gap: 0 !important; padding: 0 !important; }

.lookbook .no-gap .cell { margin: 0 !important; padding: 0 !important; }

@media (max-width: 767px) {
  .lookbook .line-flex { padding: 0 var(--gap); }
}

@media (max-width: 767px) {
  .lookbook .line.hidden-m,
  .lookbook .hidden-m { display: none !important; }
}

@media (min-width: 768px) {
  .lookbook .line.hidden-d,
  .lookbook .hidden-d { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lookbook .line { animation: none; }
  .lookbook .img-container img,
  .lookbook a:hover .img-container img { transition: none; transform: none; }
}


/* ==========================================================================
   06. IMAGE PLEIN CADRE, GIF, CTA FINAL
   ========================================================================== */

.lookbook .line-scroll .cell { position: relative; width: 100%; max-width: 100%; }

.lookbook .line-scroll .img-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.lookbook .line-scroll .img-container picture { display: block; width: 100%; max-width: 100%; }

.lookbook .line-scroll .img-container img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.lookbook .gif-centre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: block;
  width: 26%;
  max-width: 280px;
  height: auto;
  pointer-events: none;
}

.lookbook .beijos-cta-header {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-block;
  padding: 0 0 5px;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--color-secondary);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .lookbook .gif-centre { width: 48%; max-width: 220px; }
}


/* ==========================================================================
   07. INTRO MANUSCRITE
   ========================================================================== */

.lookbook .line-intro-agua {
  --intro-pad-x:      3%;
  --intro-pad-top:    48px;
  --intro-pad-bottom: 62px;
  --intro-texte-w:    30%;
  --intro-texte-max:  621px;
  --intro-note-drop:  92px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: var(--intro-pad-top) var(--intro-pad-x) var(--intro-pad-bottom);
  box-sizing: border-box;
}

.lookbook .intro-agua-content {
  flex: 0 0 var(--intro-texte-w);
  max-width: var(--intro-texte-max);
  min-width: 0;
}

.lookbook .intro-agua-texte { display: block; width: 100%; height: auto; }

.lookbook .intro-agua-note {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: "AbrilTitling", "abril-titling", Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 0.88;
  text-transform: uppercase;
  transform: translateY(var(--intro-note-drop));
}

.lookbook .intro-agua-note-left  { text-align: left; }
.lookbook .intro-agua-note-right { text-align: right; }

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-intro-agua {
    --intro-pad-x:      20px;
    --intro-pad-top:    38px;
    --intro-pad-bottom: 50px;
    --intro-texte-w:    42%;
    --intro-note-drop:  26px;
  }
  .lookbook .intro-agua-note { font-size: 12px; }
}

@media (max-width: 767px) {
  .lookbook .line-intro-agua {
    --intro-pad-x:      var(--m-pad);
    --intro-pad-top:    var(--m-text-pad);
    --intro-pad-bottom: var(--m-text-pad);
    --intro-texte-w:    78%;
    --intro-texte-max:  400px;
    justify-content: center;
  }
  .lookbook .intro-agua-note { display: none; }
}


/* ==========================================================================
   08. VESTE CLEA — 5 PORTRAITS (DESKTOP)
   ========================================================================== */

.lookbook .line-way-of-life-images {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--grid-gap);
  align-items: flex-start;
  width: 100%;
}

.lookbook .line-way-of-life-images .cell { position: relative; min-width: 0; }
.lookbook .line-way-of-life-images .cell .img-container { aspect-ratio: 2 / 3; }

.lookbook .line-look-cta {
  --look-cta-pad-x: 26px;
  --look-cta-pad-y: var(--lb-cta-offset);
  padding: var(--look-cta-pad-y) var(--look-cta-pad-x) 0;
  box-sizing: border-box;
}


/* ==========================================================================
   09. VESTE CLEA — 3 PHOTOS (MOBILE)
   ========================================================================== */

.lookbook .line-djovanni-mobile { display: none; }

@media (max-width: 767px) {
  .lookbook .line-djovanni-mobile {
    --dj-side-w:       28.5%;
    --dj-center-w:     39%;
    --dj-gap:          var(--grid-gap);
    --dj-side-ratio:   221 / 342;
    --dj-center-ratio: 305 / 457;
    display: block;
    padding: 0;
    margin-bottom: var(--m-gap-lg);
  }

  .lookbook .djovanni-images {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--dj-gap);
    width: 100%;
  }

  .lookbook .djovanni-cell { display: block; position: relative; min-width: 0; }

  .lookbook .djovanni-left,
  .lookbook .djovanni-right { flex: 0 0 var(--dj-side-w); }

  .lookbook .djovanni-center { flex: 0 0 var(--dj-center-w); }

  .lookbook .djovanni-cell .img-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .lookbook .djovanni-left  .img-container,
  .lookbook .djovanni-right .img-container { aspect-ratio: var(--dj-side-ratio); }

  .lookbook .djovanni-center .img-container { aspect-ratio: var(--dj-center-ratio); }

  .lookbook .djovanni-cell .img-container picture { display: block; width: 100%; height: 100%; }

  .lookbook .djovanni-cell .img-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .lookbook .lb-info.djovanni-cta {
    padding: var(--lb-cta-offset) var(--m-pad) 0 !important;
  }
}


/* ==========================================================================
   10. DEUX PORTRAITS — MANTEAU DJOVANNI / SAC VICTOR
   ========================================================================== */

.lookbook .line-2-img {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}

.lookbook .line-2-img .cell {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lookbook .line-2-img .cell > a { display: block; }
.lookbook .line-2-img .cell .img-container { aspect-ratio: 2 / 3; overflow: hidden; }
.lookbook .line-2-img .cell .img-container picture { height: 100%; }
.lookbook .line-2-img .cell .img-container img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
  .lookbook .line-2-img {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap) !important;
  }
  .lookbook .line-2-img .cell { width: auto; flex: none; }
}


/* ==========================================================================
   11. PAYSAGES — VESTE NELIA / MANTEAU CONSTANT
   ========================================================================== */

.lookbook .line-nelia-paysage,
.lookbook .line-constant-paysage {
  --paysage-cta-inset: var(--lb-cta-inset);
  --paysage-card-w:    var(--lb-card-w);
}

.lookbook .line-nelia-paysage .lb-cta,
.lookbook .line-nelia-paysage .lb-card,
.lookbook .line-constant-paysage .lb-cta,
.lookbook .line-constant-paysage .lb-card {
  --lb-inset: var(--paysage-cta-inset);
}

.lookbook .line-nelia-paysage .lb-card,
.lookbook .line-constant-paysage .lb-card { max-width: var(--paysage-card-w); }

@media (max-width: 767px) {
  .lookbook .line-constant-paysage { margin-bottom: var(--m-gap-lg); }
}


/* ==========================================================================
   12. VESTE CASEY — DESKTOP (3 images + sticker)
   --------------------------------------------------------------------------
   Bande de 3 images jointives sur toute la largeur :
     gauche  33.2 %  ratio 330 / 505  — porte le CTA « Voir le look + »
     centre  37.2 %  fichier détouré (alpha), hors flux, déborde sous la bande
     droite  29.6 %  ratio 295 / 505
   La zone basse (.casey-bottom) réserve la hauteur du débord et porte le
   sticker (4e visuel, décoratif, aligné à droite). Le détail produits n'est
   pas en dur : il vit dans la carte du CTA. Le recadrage cover des images
   latérales est déclaré en section 04.
   ========================================================================== */

.lookbook .line-casey { display: none; }

@media (min-width: 768px) {
  .lookbook .line-casey {
    --casey-left-w:      33.2%;
    --casey-center-w:    37.2%;
    --casey-right-w:     29.6%;
    --casey-left-ratio:  330 / 505;
    --casey-right-ratio: 295 / 505;

    /* Débord de la silhouette centrale sous la bande.
       = (hauteur/largeur du fichier centre x --casey-center-w) - hauteur de bande.
       Fichier 740 x 1200 : (1.6216 x 37.2) - 50.8 ≈ 9.6vw.
       À réajuster si les proportions du fichier changent. */
    --casey-drop: 9.6vw;

    --casey-sticker-w:   21%;
    --casey-sticker-max: 260px;
    --casey-sticker-gap: 3.4%;
    --casey-sticker-top: 12px;

    display: block;
    position: relative;
  }

  .lookbook .casey-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .lookbook .casey-cell { position: relative; min-width: 0; }

  .lookbook .casey-left   { flex: 0 0 var(--casey-left-w); }
  .lookbook .casey-center { flex: 0 0 var(--casey-center-w); overflow: visible; }
  .lookbook .casey-right  { flex: 0 0 var(--casey-right-w); }

  /* --- Images latérales : cadre à ratio fixe --- */
  .lookbook .casey-left > a,
  .lookbook .casey-right > a { display: block; }

  .lookbook .casey-left .img-container,
  .lookbook .casey-right .img-container { position: relative; width: 100%; }

  .lookbook .casey-left  .img-container { aspect-ratio: var(--casey-left-ratio); }
  .lookbook .casey-right .img-container { aspect-ratio: var(--casey-right-ratio); }

  /* --- Image centrale détourée : hors flux, largeur 100 %, hauteur libre --- */
  .lookbook .casey-center-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: block;
    width: 100%;
  }

  .lookbook .casey-center-img .img-container {
    position: relative;
    width: 100%;
    overflow: visible;
  }

  .lookbook .casey-center-img .img-container picture,
  .lookbook .casey-center-img .img-container img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
  }

  /* --- Zone basse : réserve le débord, porte le sticker --- */
  .lookbook .casey-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: var(--casey-drop);
    padding: var(--casey-sticker-top) var(--casey-sticker-gap) 0 0;
    box-sizing: border-box;
  }

  .lookbook .casey-sticker {
    flex: 0 0 auto;
    width: var(--casey-sticker-w);
    max-width: var(--casey-sticker-max);
  }

  .lookbook .casey-sticker picture,
  .lookbook .casey-sticker .casey-sticker-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-casey {
    --casey-sticker-w:   27%;
    --casey-sticker-gap: 3%;
  }
}


/* ==========================================================================
   13. VESTE CASEY — MOBILE
   ========================================================================== */

.lookbook .line-casey-mobile {
  --casey-mob-cta-bottom: 23%;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: var(--gap);
}

.lookbook .line-casey-mobile .lb-cta,
.lookbook .line-casey-mobile .lb-card { bottom: var(--casey-mob-cta-bottom); }

.lookbook .casey-mobile-photo { position: relative; }

.lookbook .casey-mobile-img { display: block; position: relative; }

.lookbook .casey-mobile-img .img-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.lookbook .casey-mobile-img .img-container img {
  display: block;
  width: 100%;
  height: auto;
}


/* ==========================================================================
   14. MANTEAU DAREN — DIPTYQUE (DESKTOP)
   ========================================================================== */

.lookbook .line-diptyque {
  --diptyque-duo-gap:    5px;
  --diptyque-pad:        30px;
  --diptyque-pad-right:  var(--lb-cta-side-gap);
  --diptyque-pad-bottom: 6px;
  --diptyque-grid-w:     61%;
  --diptyque-captions-w: 48%;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.lookbook .cell-diptyque-content {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  padding: var(--diptyque-pad) var(--diptyque-pad-right)
           var(--diptyque-pad-bottom) var(--diptyque-pad);
  box-sizing: border-box;
  overflow: hidden;
}

.lookbook .diptyque-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
}

.lookbook .diptyque-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--diptyque-duo-gap);
  width: var(--diptyque-grid-w);
}

.lookbook .diptyque-image-cell {
  display: block;
  position: relative;
  min-width: 0;
  text-decoration: none;
}

.lookbook .diptyque-image-cell .img-container { aspect-ratio: 2 / 3; }

.lookbook .lb-info.diptyque-captions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: var(--diptyque-captions-w);
  margin-top: auto;
  margin-left: auto;
  padding: 24px 0 0 !important;
}

.lookbook .lb-info.diptyque-captions .lb-card {
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
  width: var(--lb-card-content);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: translateY(12px);
  transform-origin: bottom right;
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}

.lookbook .lb-info.diptyque-captions .lb-card.is-open { transform: translateY(0); }

.lookbook .cell-diptyque-img { position: relative; flex: 1 1 50%; min-width: 0; }
.lookbook .cell-diptyque-img > a { display: block; height: 100%; }

.lookbook .cell-diptyque-img .img-container {
  height: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.lookbook .cell-diptyque-img .img-container picture { height: 100%; }

.lookbook .cell-diptyque-img .img-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-diptyque {
    --diptyque-pad:        20px;
    --diptyque-pad-right:  5px;
    --diptyque-pad-bottom: 5px;
    --diptyque-grid-w:     75%;
    --diptyque-captions-w: 62%;
  }
}

@media (max-width: 767px) {
  .lookbook .line-diptyque { display: none !important; }
}


/* ==========================================================================
   15. MANTEAU DAREN — GRILLE (MOBILE)
   ========================================================================== */

.lookbook .line-diptyque-mobile { display: none; }

@media (max-width: 767px) {
  .lookbook .line-diptyque-mobile {
    --dipt-mob-gap:        var(--grid-gap);
    --dipt-mob-ratio:      3 / 4;
    --dipt-mob-captions-w: var(--m-cta-w);
    display: block;
    padding: 0 var(--m-pad);
    box-sizing: border-box;
    margin-top: var(--m-gap-lg);
    margin-bottom: var(--m-gap-lg);
  }

  .lookbook .diptyque-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dipt-mob-gap);
  }

  .lookbook .diptyque-mobile-cell { display: block; position: relative; min-width: 0; }
  .lookbook .diptyque-mobile-cell .img-container { aspect-ratio: var(--dipt-mob-ratio); }

  .lookbook .lb-info.diptyque-captions-mobile {
    width: var(--dipt-mob-captions-w);
    padding: var(--lb-cta-offset) 0 0 !important;
  }
}


/* ==========================================================================
   16. LOGO + MANTEAU CLEMENCE / CHEMISIER MAXIME (DESKTOP)
   ========================================================================== */

.lookbook .line-back-in-paris {
  --bip-photo-w:     24%;
  --bip-gap:         8px;
  --bip-pad-right:   12%;
  --bip-logo-pad:    2%;
  --bip-logo-max:    100%;
  --bip-logo-drop:   0%;
  --bip-photo-ratio: 2 / 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(2 * var(--bip-photo-w) + var(--bip-gap));
  grid-template-rows: auto auto;
  column-gap: var(--bip-gap);
  row-gap: 0;
  align-items: stretch;
  padding: 0 var(--bip-pad-right) 0 0;
  box-sizing: border-box;
}

.lookbook .back-in-paris-logo {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--bip-logo-pad);
}

.lookbook .back-in-paris-logo .img-container {
  width: 100%;
  max-width: var(--bip-logo-max);
  aspect-ratio: auto;
  overflow: visible;
}

.lookbook .back-in-paris-logo .img-container picture { height: auto; }

.lookbook .back-in-paris-logo .img-container img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: translateY(var(--bip-logo-drop));
}

.lookbook .back-in-paris-photos { display: contents; }

.lookbook .back-in-paris-photos-row {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: var(--bip-gap);
}

.lookbook .back-in-paris-photo {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
}

.lookbook .back-in-paris-photo .img-container {
  aspect-ratio: var(--bip-photo-ratio);
  overflow: hidden;
}

.lookbook .back-in-paris-photo .img-container picture { height: 100%; }

.lookbook .back-in-paris-photo .img-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lookbook .lb-info.back-in-paris-cta {
  grid-column: 2;
  grid-row: 2;
  margin-top: var(--lb-cta-offset);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-back-in-paris {
    --bip-photo-w:   27%;
    --bip-pad-right: 7%;
    --bip-logo-pad:  2%;
    --bip-logo-max:  100%;
  }
}


/* ==========================================================================
   17. LOGO + MANTEAU CLEMENCE / CHEMISIER MAXIME (MOBILE)
   ========================================================================== */

.lookbook .line-logo-mobile {
  padding: 0 var(--m-logo-pad);
  box-sizing: border-box;
  margin-bottom: var(--gap);
}

.lookbook .logo-hello-london { display: block; width: 100%; height: auto; }

.lookbook .line-2-img-mobile { display: none; }

.lookbook .line-captions-mobile {
  padding: 0 var(--m-pad);
  box-sizing: border-box;
  margin-bottom: var(--m-gap-lg);
}

.lookbook .line-captions-mobile .product-info { padding: var(--lb-cta-offset) 0 0 !important; }

@media (max-width: 767px) {
  .lookbook .line-2-img-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    padding: 0 var(--m-pad);
    box-sizing: border-box;
    margin-bottom: 0;
  }

  .lookbook .line-2-img-mobile .cell { position: relative; min-width: 0; }

  .lookbook .line-2-img-mobile .img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
  }

  .lookbook .line-2-img-mobile .img-container picture,
  .lookbook .line-2-img-mobile .img-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ==========================================================================
   18. MANTEAU CASSANDRE — DESKTOP
   ========================================================================== */

.lookbook .line-cassandre {
  --cass-pad-x:        3%;
  --cass-captions-w:   28%;
  --cass-captions-max: 420px;
  --cass-details-w:    14%;
  --cass-main-ratio:   17 / 20;
  --cass-duo-gap:      5px;
  --cass-cta-w:        78%;
  --cass-cta-inset:    calc(var(--lb-cta-side-gap) - var(--grid-gap));
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--grid-gap);
  padding: 0 var(--cass-pad-x);
  box-sizing: border-box;
}

.lookbook .cell-cassandre-captions {
  flex: 0 0 var(--cass-captions-w);
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.lookbook .lb-info.cassandre-captions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  width: var(--cass-cta-w);
  max-width: var(--cass-captions-max);
  margin-right: var(--cass-cta-inset);
  padding: 0 !important;
}

.lookbook .lb-info.cassandre-captions .lb-card {
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
  width: var(--lb-card-content);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: translateY(12px);
  transform-origin: bottom right;
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}

.lookbook .lb-info.cassandre-captions .lb-card.is-open { transform: translateY(0); }

.lookbook .cell-cassandre-details {
  flex: 0 0 var(--cass-details-w);
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--cass-duo-gap);
}

.lookbook .cassandre-detail {
  display: block;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.lookbook .cassandre-detail .img-container {
  aspect-ratio: auto;
  height: 100%;
  overflow: hidden;
}

.lookbook .cell-cassandre-main { flex: 1 1 auto; min-width: 0; }
.lookbook .cell-cassandre-main .img-container { aspect-ratio: var(--cass-main-ratio); }

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-cassandre {
    --cass-pad-x:        20px;
    --cass-captions-w:   30%;
    --cass-captions-max: 300px;
    --cass-details-w:    15%;
    --cass-cta-w:        82%;
  }
}


/* ==========================================================================
   19. MANTEAU CASSANDRE — MOBILE
   ========================================================================== */

.lookbook .line-cassandre-mobile {
  --cass-mob-details-w:  16%;
  --cass-mob-main-ratio: 8 / 7;
  padding: 0 var(--m-pad);
  box-sizing: border-box;
  margin-top: var(--m-gap-lg);
  margin-bottom: var(--m-gap-lg);
}

.lookbook .cassandre-mobile-grid {
  display: grid;
  grid-template-columns: var(--cass-mob-details-w) 1fr;
  gap: var(--grid-gap);
  align-items: stretch;
}

.lookbook .cassandre-mobile-details {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  min-width: 0;
}

.lookbook .cassandre-detail-mob {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-height: 0;
}

.lookbook .cassandre-detail-mob .img-container {
  aspect-ratio: auto;
  height: 100%;
  overflow: hidden;
}

.lookbook .cassandre-main-mob { display: block; position: relative; min-width: 0; }
.lookbook .cassandre-main-mob .img-container { aspect-ratio: var(--cass-mob-main-ratio); }

.lookbook .lb-info.cassandre-captions-mobile {
  padding: var(--lb-cta-offset) 0 0 !important;
}


/* ==========================================================================
   20. VESTE OSCAR — DESKTOP
   ========================================================================== */

.lookbook .line-taxi {
  --taxi-pad-x:        1.5%;
  --taxi-main-w:       58%;
  --taxi-gap:          28px;
  --taxi-duo-gap:      5px;
  --taxi-detail-w:     50%;
  --taxi-main-ratio:   3 / 2;
  --taxi-detail-ratio: 2 / 3;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--taxi-gap);
  padding: 0 var(--taxi-pad-x);
  box-sizing: border-box;
}

.lookbook .cell-taxi-main {
  flex: 0 0 var(--taxi-main-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--taxi-duo-gap);
}

.lookbook .taxi-image { display: block; position: relative; }
.lookbook .taxi-image .img-container { aspect-ratio: var(--taxi-main-ratio); }

.lookbook .cell-taxi-side {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lookbook .taxi-image-detail {
  display: block;
  position: relative;
  width: var(--taxi-detail-w);
  margin-left: auto;
}

.lookbook .taxi-image-detail .img-container { aspect-ratio: var(--taxi-detail-ratio); }

.lookbook .lb-info.taxi-captions {
  margin-left: calc(var(--lb-cta-side-gap) - var(--taxi-gap));
  padding: 0 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-taxi {
    --taxi-main-w:   56%;
    --taxi-detail-w: 56%;
  }
}


/* ==========================================================================
   21. VESTE OSCAR — MOBILE
   ========================================================================== */

.lookbook .line-taxi-mobile {
  --taxi-mob-cta-inset: var(--lb-cta-inset);
  --taxi-mob-card-w:    72%;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: var(--gap);
}

.lookbook .taxi-image-mobile { display: block; position: relative; }
.lookbook .taxi-image-mobile .img-container { aspect-ratio: 3 / 2; }

.lookbook .line-taxi-mobile .lb-cta,
.lookbook .line-taxi-mobile .lb-card { --lb-inset: var(--taxi-mob-cta-inset); }

.lookbook .line-taxi-mobile .lb-card { width: var(--taxi-mob-card-w); max-width: none; }

.lookbook .lb-info.taxi-captions-mobile { padding: 0 !important; }


/* ==========================================================================
   22. VESTE NELIA — GRILLE 2x2
   ========================================================================== */

.lookbook .line-nelia {
  --nelia-pad:     10%;
  --nelia-gap:     10px;
  --nelia-cta-w:   26%;
  --nelia-cta-max: 240px;
  --nelia-cta-top: var(--lb-cta-offset);
  padding: 0 var(--nelia-pad);
  box-sizing: border-box;
}

.lookbook .nelia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nelia-gap);
}

.lookbook .nelia-cell { display: block; position: relative; min-width: 0; }
.lookbook .nelia-cell .img-container { aspect-ratio: 2 / 3; }

.lookbook .lb-info.nelia-captions {
  width: var(--nelia-cta-w);
  max-width: var(--nelia-cta-max);
  padding: var(--nelia-cta-top) 0 0 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-nelia {
    --nelia-pad:   7%;
    --nelia-cta-w: 34%;
  }
}

@media (max-width: 767px) {
  .lookbook .line-nelia {
    --nelia-pad:   var(--m-pad);
    --nelia-gap:   var(--grid-gap);
    --nelia-cta-w: var(--m-cta-w);
    margin-top:    var(--m-gap-lg);
    margin-bottom: var(--m-gap-lg);
  }

  .lookbook .lb-info.nelia-captions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: var(--nelia-cta-w);
    max-width: none;
    margin-left: auto;
    padding: var(--lb-cta-offset) 0 0 !important;
  }
}


/* ==========================================================================
   23. CTA « VOIR LE LOOK »
   ========================================================================== */

.lookbook .lb-info {
  position: relative;
  padding: 0 !important;
  text-align: left;
}

.lookbook .lb-info--overlay { position: static; }

.lookbook .lb-info--center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lookbook .lb-info--center .lb-card { width: var(--lb-card-content); }

.lookbook .lb-cta {
  --lb-inset: var(--lb-cta-inset);
  position: absolute;
  bottom: var(--lb-inset);
  right: var(--lb-inset);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--lb-cta-gap);
  margin: 0;
  padding: var(--lb-cta-pad-y) var(--lb-cta-pad-x);
  background: #fff;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .4s ease, color .4s ease, opacity .3s ease;
}

.lookbook .lb-cta:hover { background: #000; color: #fff; }

.lookbook .lb-cta,
.lookbook .lb-cta .lb-cta__label {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--lb-cta-ls);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Positions */
.lookbook .lb-cta--left { left: var(--lb-inset); right: auto; }
.lookbook .lb-cta--top  { top: var(--lb-inset); bottom: auto; }

.lookbook .lb-cta--left ~ .lb-card {
  left: var(--lb-inset);
  right: auto;
  transform-origin: bottom left;
}

.lookbook .lb-cta--top ~ .lb-card {
  top: var(--lb-inset);
  bottom: auto;
  transform: translateY(-14px);
  transform-origin: top left;
}

.lookbook .lb-cta--top ~ .lb-card.is-open { transform: translateY(0); }

/* Variante soulignée, hors photo */
.lookbook .lb-cta--plain {
  --lb-underline-gap: 5px;
  position: static;
  padding: 0 0 var(--lb-underline-gap);
  background: none;
  border-bottom: 1px solid currentColor;
  gap: var(--lb-cta-gap);
  max-height: 60px;
  overflow: hidden;
  text-decoration: none;
  transition: background-color .4s ease, color .4s ease, opacity .3s ease,
              visibility .45s, max-height .45s ease, padding-bottom .45s ease;
}

.lookbook .lb-cta--plain:hover { background: none; color: var(--color-text); opacity: .55; }

.lookbook .lb-cta--plain[aria-expanded="true"] {
  max-height: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}

/* Icône « + » */
.lookbook .lb-cta__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lb-cta-icon);
  height: var(--lb-cta-icon);
  font-family: var(--font-primary);
  font-size: var(--lb-cta-icon-fs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.lookbook .lb-cta__icon::before { content: "+"; display: block; }

.lookbook .lb-cta[aria-expanded="true"] { opacity: 0; visibility: hidden; }


/* ==========================================================================
   24. CARTE PRODUITS
   ========================================================================== */

.lookbook .lb-card {
  --lb-inset: var(--lb-cta-inset);
  position: absolute;
  bottom: var(--lb-inset);
  right: var(--lb-inset);
  z-index: 40;
  width: min(var(--lb-card-w), calc(100% - 2 * var(--lb-inset)));
  max-width: none;
  margin: 0;
  padding: var(--lb-card-pad-top) var(--lb-card-pad-x) var(--lb-card-pad-bot);
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .18);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transform-origin: bottom right;
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}

.lookbook .lb-card.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* Carte dépliée en flux, sous un CTA souligné */
.lookbook .lb-cta--plain ~ .lb-card {
  position: static;
  width: var(--lb-card-content);
  max-width: none;
  margin-top: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  transform: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s ease, margin-top .55s ease,
              opacity .35s ease, visibility .55s;
}

.lookbook .lb-cta--plain ~ .lb-card.is-open {
  max-height: 60vh;
  margin-top: 0;
  transform: none;
}

/* En-tête */
.lookbook .lb-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 34px;
}

.lookbook .lb-card__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 1.6px;
  line-height: 1;
  text-transform: uppercase;
}

.lookbook .lb-card__close {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: -6px -4px -6px 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity .3s ease;
}

.lookbook .lb-card__close::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: var(--lb-cta-icon);
  height: var(--lb-cta-icon-w);
  transform: translateY(-50%);
  background: currentColor;
}

.lookbook .lb-card__close:hover { opacity: .5; }

/* Lignes produits */
.lookbook .lb-card__list { display: block; font-size: var(--fs-body); }

.lookbook .lb-card__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 24px;
  color: var(--color-text);
  text-decoration: none;
}

.lookbook .lb-card__row + .lb-card__row { margin-top: 7px; }
.lookbook .lb-card__row .lb-card__name { transition: opacity .3s ease; }
.lookbook .lb-card__row:hover .lb-card__name { opacity: .55; }

.lookbook .lb-card__name,
.lookbook .lb-card__price {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.35;
  text-transform: uppercase;
}

.lookbook .lb-card__price {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Intertitre « Victime de son succès » : visible seulement si une ligne l'est */
.lookbook .lb-card__noted-title { display: none; }

.lookbook .lb-card__list.has-noted .lb-card__noted-title,
.lookbook .lb-card__list:has(.lb-card__row--noted) .lb-card__noted-title { display: block; }

.lookbook .lb-card__look,
.lookbook .lb-card__noted-title {
  margin: 18px 0 7px;
  padding: 0;
  color: var(--color-muted);
  font-family: var(--font-primary);
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
}

.lookbook .lb-card__note {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  color: inherit;
}

.lookbook .lb-card__row--noted,
.lookbook .lb-card__row--noted .lb-card__name,
.lookbook .lb-card__row--noted .lb-card__price { color: var(--color-muted); }

.lookbook .lb-card__row--noted:hover .lb-card__name { opacity: 1; }

@media (max-width: 767px) {
  .lookbook .lb-card {
    width: min(var(--lb-card-w), calc(100vw - 2 * var(--m-pad)));
    max-width: none;
  }

  .lookbook .lb-cta--plain ~ .lb-card {
    width: min(var(--lb-card-content), calc(100vw - 2 * var(--m-pad)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lookbook .lb-card,
  .lookbook .lb-cta,
  .lookbook .lb-cta__icon::before { transition-duration: .01ms !important; }
}