@charset "UTF-8";
/* ==========================================================================
   LOOKBOOK — THE ESCAPE / COUNTRYSIDE — FW26
   ==========================================================================
   Sommaire
   01. Variables
   02. Base & reset
   03. Images (ratios, recadrage, survol)
   04. Lignes, animations, visibilité
   05. Textes manuscrits
   06. Visuel collection + lien souligné
   07. Trio — 3 visuels jointifs (Veste Barnabe, Manteau Anabelle — desktop)
   08. Duo — 2 portraits pleine largeur (Veste Brooke, Cape Cassy)
   08b. Cape Cassy — sticker détouré Sac Victor
   09. Maille Ashley — petit cadre + grand portrait (desktop)
   10. Maille Ashley — logo + portrait (mobile)
   11. Manteau Calypso — logo + CTA / paysage encadré (desktop)
   12. Veste Cynthia — 2 portraits + logo + CTA (desktop)
   13. Colonnes latérales : logo + CTA souligné (Calypso, Cynthia)
   14. Mobile — visuels seuls, cadres, logo
   15. Paysages plein cadre (Veste Brune, Manteau Camelia)
   16. Bloc final — fond tweed, CTA
   17. Composant — CTA « Voir le look »
   18. Composant — Carte produits (+ « Bientôt disponible », « Victime de son succès »)
   ========================================================================== */


/* ==========================================================================
   01. 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;

  /* Rythme */
  --gap:      40px;          /* entre deux blocs */
  --grid-gap: 5px;           /* entre deux visuels d'un même bloc */

  /* The Escape */
  --esc-frame-w: 74%;        /* largeur du visuel collection ; cale aussi le texte 2 */
  --esc-solo-w:  70%;        /* visuels seuls en mobile */
  --esc-logo-w:  64px;       /* emblème */
  --esc-cta-x:   26px;       /* retrait des CTA soulignés sous les trios */

  /* Rythme mobile */
  --m-pad:    30px;

  /* 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;
    --esc-frame-w: 80%;
    --esc-logo-w:  52px;
    --esc-cta-x:   20px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-body:     12px;
    --gap:         30px;
    --esc-frame-w: 70%;
    --esc-logo-w:  34px;
    --esc-cta-x:   var(--m-pad);

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


/* ==========================================================================
   02. 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; }


/* ==========================================================================
   03. 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;
}

/* Tout visuel cliquable garde son zoom à l'intérieur du cadre */
.lookbook .quickshop .img-container { position: relative; overflow: hidden; }

/* 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 à ratio imposé (.esc-fixed) : portrait 2/3, recadrage en cover */
.lookbook .esc-fixed .img-container { aspect-ratio: 2 / 3; }
.lookbook .esc-fixed .img-container picture { height: 100%; }
.lookbook .esc-fixed .img-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   04. 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 .esc-cell { position: relative; min-width: 0; }
.lookbook .esc-cell > a { display: block; }

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


/* ==========================================================================
   05. TEXTES MANUSCRITS
   --------------------------------------------------------------------------
   Les deux textes vivent dans la même colonne que le visuel collection :
   le texte 2 démarre exactement au bord gauche de ce visuel.
   --esc-texte-w est exprimé en % de cette colonne.
   ========================================================================== */

.lookbook .line-esc-texte {
  --esc-texte-w:   40%;
  --esc-texte-max: 560px;
  padding: 0 calc((100% - var(--esc-frame-w)) / 2);
}

.lookbook .line-esc-texte--left { --esc-texte-w: 52%; }

.lookbook .esc-texte {
  display: block;
  width: var(--esc-texte-w);
  max-width: var(--esc-texte-max);
  height: auto;
}

.lookbook .line-esc-texte picture { width: auto; }

.lookbook .line-esc-texte--center .esc-texte { margin-inline: auto; }
.lookbook .line-esc-texte--left   .esc-texte { margin-inline: 0 auto; }

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-esc-texte         { --esc-texte-w: 55%; }
  .lookbook .line-esc-texte--left   { --esc-texte-w: 66%; }
}

@media (max-width: 767px) {
  .lookbook .line-esc-texte         { --esc-texte-w: 88%; padding: 0 var(--m-pad); }
  .lookbook .line-esc-texte--left   {
    --esc-texte-w: 80%;
    padding-left: calc((100% - var(--esc-frame-w)) / 2);
  }
}


/* ==========================================================================
   06. VISUEL COLLECTION + LIEN SOULIGNÉ
   ========================================================================== */

.lookbook .esc-collection {
  width: var(--esc-frame-w);
  margin-inline: auto;
}

.lookbook .esc-collection-img { display: block; }

/* Vidéo collection : même format que le visuel collection prévu.
   Le cadre impose le ratio, la vidéo le remplit (cover), quel que soit
   le format du fichier livré par le lecteur vidéo du site. */
.lookbook .esc-video {
  --esc-video-ratio: 1600 / 870;           /* desktop : paysage */
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  aspect-ratio: var(--esc-video-ratio);
  overflow: hidden;
  background: #efece6;                     /* avant chargement */
}

.lookbook .esc-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

@media (max-width: 767px) {
  .lookbook .esc-video { --esc-video-ratio: 600 / 1070; }   /* mobile : portrait */
}

.lookbook .esc-collection-foot {
  padding-top: var(--lb-cta-offset);
  text-align: right;
}

/* Lien souligné (même dessin que le CTA « Voir le look » souligné) */
.lookbook .esc-link {
  display: inline-block;
  padding: 0 0 5px;
  border-bottom: 1px solid currentColor;
  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;
  transition: opacity .3s ease;
}

.lookbook .esc-link:hover { opacity: .55; }


/* ==========================================================================
   07. TRIO — 3 VISUELS JOINTIFS — BARNABE, ANABELLE (DESKTOP)
   ========================================================================== */

.lookbook .esc-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.lookbook .lb-info.esc-cta-under {
  padding: var(--lb-cta-offset) var(--esc-cta-x) 0 !important;
}


/* ==========================================================================
   08. DUO — 2 PORTRAITS PLEINE LARGEUR — BROOKE, CASSY (DESKTOP + MOBILE)
   ========================================================================== */

.lookbook .esc-duo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;                      /* portraits jointifs, comme sur la maquette */
}

/* Le CTA et sa carte se calent sur le duo entier (2 photos) : la carte a
   toute la largeur utile au lieu d'être serrée dans la photo de droite. */
.lookbook .esc-duo > .esc-cell { position: static !important; }


/* ==========================================================================
   08b. CAPE CASSY — STICKER DÉTOURÉ SAC VICTOR (DESKTOP + MOBILE)
   --------------------------------------------------------------------------
   Détouré hors flux, centré sur la jonction des deux portraits, au-dessus
   des photos. Le fichier est coupé net en bas : son bas est calé sur le bas
   des photos (--cassy-drop: 0), la coupure se confond avec leur bord.
   --cassy-drop > 0 le fait déborder dessous ; .cassy-bottom réserve alors
   la hauteur pour que le bloc suivant ne passe pas dessous.
   La LARGEUR commande (--cassy-sticker-w), la hauteur suit le fichier.
   Repère visuel : la silhouette occupe ~78 % de la hauteur des photos.
   --cassy-sticker-x place le CENTRE DU FICHIER ; la silhouette étant un peu
   décalée à droite dans le png, 46-47 % la centre sur la jonction.
   Le détouré est un lien vers le Sac Victor. Le CTA et la carte
   « Voir le look » restent au-dessus (z-index 20 / 40).
   ========================================================================== */

.lookbook .line-cassy {
  --cassy-sticker-x: 50%;      /* centre du fichier (50 % = jonction du duo) */
  --cassy-sticker-w: 36%;      /* largeur du détouré, en % de la bande */
  --cassy-drop:      0px;      /* débord sous la bande (0 = calé sur le bas) */
}

.lookbook .line-cassy .cassy-sticker {
  position: absolute;
  left: var(--cassy-sticker-x);
  right: auto;
  top: auto;
  bottom: calc(-1 * var(--cassy-drop));
  z-index: 5;
  display: block;
  width: var(--cassy-sticker-w);
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  transform: translateX(-50%);
  cursor: pointer;
}

.lookbook .line-cassy .cassy-sticker picture,
.lookbook .line-cassy .cassy-sticker img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Survol : même léger zoom que les photos, depuis le bas */
.lookbook .line-cassy .cassy-sticker img {
  transform-origin: 50% 100%;
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.lookbook .line-cassy .cassy-sticker:hover img { transform: scale(1.02); }

.lookbook .line-cassy .cassy-bottom { min-height: var(--cassy-drop); }

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-cassy { --cassy-sticker-w: 40%; }
}

/* Mobile : fichier sac-victor-cape-cassy-mob.png (1304 × 1936),
   un peu plus petit pour dégager la chaussure (photo de droite) */
@media (max-width: 767px) {
  .lookbook .line-cassy { --cassy-sticker-w: 38%; --cassy-sticker-x: 45%; }
}

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


/* ==========================================================================
   09. MAILLE ASHLEY — PETIT CADRE + GRAND PORTRAIT (DESKTOP)
   --------------------------------------------------------------------------
   Colonne gauche : petit visuel encadré centré, CTA souligné en bas à droite.
   Colonne droite : grand portrait 2/3, qui donne la hauteur du bloc.
   ========================================================================== */

.lookbook .line-ashley {
  --ashley-small-w: 53%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.lookbook .ashley-side {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lookbook .ashley-small { width: var(--ashley-small-w); }

.lookbook .lb-info.ashley-cta {
  position: absolute;
  right: var(--lb-cta-side-gap);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Carte ouverte : fond blanc, au cas où elle chevauche le petit visuel */
.lookbook .ashley-cta .lb-card.is-open { background: var(--color-bg); }

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-ashley { --ashley-small-w: 60%; }
  .lookbook .ashley-side { align-items: flex-start; padding-top: 8%; }
}


/* ==========================================================================
   10. MAILLE ASHLEY — LOGO + PORTRAIT (MOBILE)
   ========================================================================== */

.lookbook .line-ashley-mob {
  --ashley-mob-img-w: 69%;
  --ashley-mob-pad-r: 5%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ashley-mob-img-w);
  padding-right: var(--ashley-mob-pad-r);
}

.lookbook .ashley-mob-logo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4px;
}


/* ==========================================================================
   11. MANTEAU CALYPSO — LOGO + CTA / PAYSAGE ENCADRÉ (DESKTOP)
   ========================================================================== */

.lookbook .line-calypso {
  --calypso-side-w:   32%;
  --calypso-pad-r:    4%;
  --calypso-cta-lift: 1.1vw;   /* aligne le CTA sur le bas du cadre noir */
  display: grid;
  grid-template-columns: var(--calypso-side-w) minmax(0, 1fr);
  column-gap: var(--grid-gap);
  padding-right: var(--calypso-pad-r);
}

/* Le fichier manteau-calypso a une marge blanche sous le cadre noir */
.lookbook .line-calypso .calypso-side { padding-bottom: var(--calypso-cta-lift); }

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-calypso { --calypso-side-w: 36%; --calypso-pad-r: 3%; }
}


/* ==========================================================================
   12. VESTE CYNTHIA — 2 PORTRAITS + LOGO + CTA (DESKTOP)
   ========================================================================== */

.lookbook .line-cynthia {
  --cynthia-duo-w: 58%;
  --cynthia-pad-l: 1.5%;
  display: grid;
  grid-template-columns: var(--cynthia-duo-w) minmax(0, 1fr);
  column-gap: var(--grid-gap);
  padding-left: var(--cynthia-pad-l);
}

.lookbook .cynthia-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .lookbook .line-cynthia { --cynthia-duo-w: 62%; }
}


/* ==========================================================================
   13. COLONNES LATÉRALES : LOGO EN HAUT, CTA SOULIGNÉ EN BAS (CALYPSO, CYNTHIA)
   ========================================================================== */

.lookbook .calypso-side,
.lookbook .cynthia-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--lb-cta-side-gap);
}

.lookbook .lb-info.esc-side-cta {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.lookbook .lb-info.esc-side-cta--end   { align-self: flex-end;   align-items: flex-end; }
.lookbook .lb-info.esc-side-cta--start { align-self: flex-start; align-items: flex-start; }

.lookbook .esc-logo {
  flex: 0 0 auto;
  width: var(--esc-logo-w);
}

.lookbook .esc-logo img { display: block; width: 100%; height: auto; }


/* ==========================================================================
   14. MOBILE — VISUELS SEULS, CADRES, LOGO
   ========================================================================== */

.lookbook .esc-solo  { width: var(--esc-solo-w); margin-inline: auto; }
.lookbook .esc-cadre { width: 92%; margin-inline: auto; }

/* Logo seul (bloc 17), fixe, serré au-dessus de la photo Cynthia */
.lookbook .line-esc-logo-mob { display: flex; justify-content: center; min-height: 0; }
.lookbook .line-esc-logo-mob.line-margin { margin-bottom: 10px; }

@media (max-width: 767px) {
  .lookbook .line-camelia.line-margin { margin-bottom: 20px; }   /* Camelia ? logo */
}

/* Logos qui descendent au scroll ([data-esc-drift], script en fin de HTML) */
.lookbook .esc-drift {
  position: relative;
  z-index: 2;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .lookbook .esc-drift { transform: none !important; }
}


/* ==========================================================================
   15. PAYSAGES PLEIN CADRE (VESTE BRUNE, MANTEAU CAMELIA)
   ========================================================================== */

.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 img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}


/* ==========================================================================
   16. BLOC FINAL — FOND TWEED, CTA
   L'étiquette « The Escape » est incrustée dans le fond (fond-fin / -mob).
   ========================================================================== */

.lookbook .esc-final-cta {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--color-secondary);
}

@media (max-width: 767px) {
  .lookbook .esc-final-cta { bottom: 8%; }
}


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

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

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

.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 (par défaut : en bas à droite de la photo)
   --left  : en bas à gauche
   --top   : en haut à droite
   --top-m : en haut à droite en mobile seulement (bas droite en desktop) */
.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 right;
}

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

@media (max-width: 767px) {
  /* CTA « Voir le look » sur photo : même gabarit partout en mobile,
     valeurs du lookbook Hello London, protégé des styles « button » du site */
  .lookbook .lb-cta:not(.lb-cta--plain) {
    --lb-inset: 12px;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  .lookbook .lb-cta:not(.lb-cta--plain) .lb-cta__label {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
  }
  .lookbook .lb-cta:not(.lb-cta--plain) .lb-cta__icon {
    width: 9px !important;
    height: 9px !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  .lookbook .lb-card { --lb-inset: 12px; }

  /* CTA en haut à droite : Maille Ashley, Manteau Anabelle (--top), Manteau Camelia (--top-m) */
  .lookbook .lb-cta--top,
  .lookbook .lb-cta--top-m {
    top: var(--lb-inset) !important;
    bottom: auto !important;
    left: auto !important;
    right: var(--lb-inset) !important;
  }
  .lookbook .lb-cta--top ~ .lb-card,
  .lookbook .lb-cta--top-m ~ .lb-card {
    top: var(--lb-inset) !important;
    bottom: auto !important;
    left: auto !important;
    right: var(--lb-inset) !important;
    transform: translateY(-14px);
    transform-origin: top right !important;
  }
  .lookbook .lb-cta--top ~ .lb-card.is-open,
  .lookbook .lb-cta--top-m ~ .lb-card.is-open { transform: translateY(0); }

  /* Veste Brune : CTA en bas à droite */
  .lookbook .line-brune .lb-cta,
  .lookbook .line-brune .lb-card { left: auto !important; right: var(--lb-inset) !important; }
  .lookbook .line-brune .lb-card { transform-origin: bottom right !important; }

  /* Manteau Calypso : même retrait que les autres, mais à l'intérieur du cadre noir */
  .lookbook .line-calypso-mob .lb-cta,
  .lookbook .line-calypso-mob .lb-card {
    --lb-inset: 4.5vw;
    bottom: var(--lb-inset) !important;
    right: var(--lb-inset) !important;
  }
}


/* ==========================================================================
   18. 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: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
  transform: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s ease,
              opacity .35s ease, visibility .55s;
}

.lookbook .lb-cta--plain ~ .lb-card.is-open { max-height: 60vh; }

/* 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;
}

/* Intertitres « Bientôt disponible » (--soon) et « Victime de son succès » (--noted) :
   chacun n'est visible que si la carte contient au moins une ligne de son type */
.lookbook .lb-card__soon-title,
.lookbook .lb-card__noted-title { display: none; }

.lookbook .lb-card__list.has-soon .lb-card__soon-title,
.lookbook .lb-card__list:has(.lb-card__row--soon) .lb-card__soon-title,
.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__soon-title,
.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: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.lookbook .lb-card__row--soon,
.lookbook .lb-card__row--soon .lb-card__name,
.lookbook .lb-card__row--soon .lb-card__price,
.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--soon:hover .lb-card__name,
.lookbook .lb-card__row--noted:hover .lb-card__name { opacity: 1; }

@media (max-width: 767px) {
  /* Carte « Voir le look » sur photo : ne sort JAMAIS du cadre de la photo.
     Largeur et hauteur limitées à la photo (moins le retrait) ; si la liste
     est plus haute que la photo (paysages étroits), elle défile dans la carte. */
  .lookbook .lb-cta:not(.lb-cta--plain) ~ .lb-card {
    box-sizing: border-box !important;
    width: min(300px, calc(100% - 2 * var(--lb-inset))) !important;
    max-width: calc(100% - 2 * var(--lb-inset)) !important;
    max-height: calc(100% - 2 * var(--lb-inset)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px 20px !important;
  }
  .lookbook .lb-cta:not(.lb-cta--plain) ~ .lb-card .lb-card__head { margin-bottom: 18px !important; }

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