/* ===========================================================================
   VUE "stories Instagram" — desormais l'UNIQUE vue des selections.
   =========================================================================== */

/* Conteneur d'ecran des selections (migre depuis recommendations.css, qui n'est
   plus charge). Porte le layout + le scroll vertical de la vue feed. */
.recommendations-screen{
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
  overflow-y: auto;
}

/* Flux vertical NORMAL (pas de flex qui empeche le debordement) : si le contenu
   depasse la hauteur du telephone, le scroll natif du .screen fonctionne. On ne
   reduit jamais le selfie. */
.reco-v2 {
  padding: 4px 0 16px;
}
.reco-v2 > * { margin-bottom: 8px; }

/* En-tete : titre "feed" a gauche + toggle discret en haut a droite. */
.reco-v2-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 14px 0;
}
/* Titre du feed : centre et compact. On surcharge explicitement la regle
   globale .screen h1 (styles.css, 30px centre) qui l'emportait sinon. */
.reco-v2-head .reco-v2-title,
.recommendations-screen .reco-v2-title {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  font-weight: 820;
  color: #2c2318;
  text-align: center;
  white-space: nowrap;
}
.reco-v2-toggle-mini {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 9px;
  background: #fff;
  color: #9a8f82;
  cursor: pointer;
  opacity: .7;
}
.reco-v2-toggle-mini svg { width: 15px; height: 15px; }

/* Le toggle sur la vue classique reste un petit bouton discret (temporaire). */
.recommendations-screen .reco-v2-toggle-classic {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px auto 0;
  padding: 6px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #fff;
  color: #7a6f61;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  opacity: .75;
}
.recommendations-screen .reco-v2-toggle-classic svg { width: 12px; height: 12px; }

/* --- Rangee de bulles (tray) --------------------------------------------- */
/* Wrapper : porte l'indicateur "il reste des bulles" (fade + chevron a droite). */
.reco-v2-tray-wrap { position: relative; }
.reco-v2-tray {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* On garde le scroll horizontal ET la taille des bulles. padding-right assez
     large pour qu'au repos la rangee se termine sur un espace (pas au milieu
     d'une bulle) : la derniere bulle visible n'a donc pas l'air tranchee.
     padding-top genereux : le badge trophee (top:-2px) et l'agrandissement
     scale(1.05) de la bulle active depassent en haut. */
  padding: 14px 12px 10px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
  /* Accroche par bulle : le scroll s'arrete toujours sur une bulle entiere,
     jamais au milieu -> aucune bulle n'a l'air tranchee a droite au repos. */
  scroll-snap-type: x mandatory;
}
/* Chaque bulle garde sa taille (pas de compression) pour que le scroll
   fonctionne. */
.reco-v2-tray > .reco-v2-bubble { flex: 0 0 auto; scroll-snap-align: start; }
.reco-v2-tray::-webkit-scrollbar { display: none; }
/* Degrade orange de bord droit RETIRE (rendu bizarre) et chevron masque : la
   rangee scrolle proprement sans element qui "coupe" visuellement a droite. */
.reco-v2-tray-wrap::after { content: none; }
.reco-v2-tray-more { display: none; }
.reco-v2-bubble {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.reco-v2-bubble-ring {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 3px;
  /* Anneau "non vu" : teinte beige/dore (pas le degrade insta). */
  background: linear-gradient(135deg, #d9b892, #c79a6a);
  display: grid;
  place-items: center;
}
/* (couleur d'anneau active/vue geree par theme + is-viewed plus bas) */
/* Disque interieur : fond teinte (par theme) + silhouette de monture centree. */
.reco-v2-bubble-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.reco-v2-frame-svg { width: 64%; height: auto; display: block; stroke: #3a2a18; }
.reco-v2-bubble small {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  color: #4a4136;
  text-align: center;
  max-width: 68px;
  white-space: normal;
}
.reco-v2-bubble.is-active small { color: #1c1c1c; }
/* Badge trophee (Best Overall uniquement), en haut a gauche. */
.reco-v2-bubble-trophy {
  position: absolute;
  top: -2px; left: -2px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #f0c04b;
  color: #5a3d12;
  box-shadow: 0 2px 6px rgba(90,61,18,.3);
  z-index: 3;
}
.reco-v2-bubble-trophy svg { width: 12px; height: 12px; }

/* --- Identite visuelle par THEME : anneau + fond du disque colores --------- */
/* Best Overall : dore */
.reco-v2-theme-overall .reco-v2-bubble-ring { background: linear-gradient(135deg, #f0c869, #d29b3f); }
.reco-v2-theme-overall .reco-v2-bubble-disc { background: linear-gradient(160deg, #fbefd4, #f3d79b); }
/* Soft Harmony : beige rose doux */
.reco-v2-theme-harmony .reco-v2-bubble-ring { background: linear-gradient(135deg, #e7c7bd, #d5a48f); }
.reco-v2-theme-harmony .reco-v2-bubble-disc { background: linear-gradient(160deg, #f6e6df, #e7c7bd); }
/* Confident Contrast : brun fonce contraste (silhouette en trait clair) */
.reco-v2-theme-contrast .reco-v2-bubble-ring { background: linear-gradient(135deg, #8c766a, #4f4038); }
.reco-v2-theme-contrast .reco-v2-bubble-disc { background: linear-gradient(160deg, #6a5a50, #413631); }
.reco-v2-theme-contrast .reco-v2-frame-svg { stroke: #f4e9df; }
/* Everyday Safe Choice : taupe neutre */
.reco-v2-theme-everyday .reco-v2-bubble-ring { background: linear-gradient(135deg, #cfc4b4, #8a8a8a); }
.reco-v2-theme-everyday .reco-v2-bubble-disc { background: linear-gradient(160deg, #efe8dc, #cfc4b4); }
/* Style Stretch : terracotta vif */
.reco-v2-theme-stretch .reco-v2-bubble-ring { background: linear-gradient(135deg, #e2a06a, #c9713c); }
.reco-v2-theme-stretch .reco-v2-bubble-disc { background: linear-gradient(160deg, #f4c79c, #d68a54); }
/* Deja vu : l'anneau s'attenue (le disque + silhouette restent). */
.reco-v2-bubble.is-viewed .reco-v2-bubble-ring { background: #e0e0e0 !important; }
/* Active : leger agrandissement. */
.reco-v2-bubble.is-active .reco-v2-bubble-ring { transform: scale(1.05); }
/* Description propre au cluster actif, entre les bulles et le contenu. */
.reco-v2-intro {
  margin: 0;
  padding: 2px 18px 2px;
  text-align: center;
}
.reco-v2-intro b {
  display: block;
  color: #2c2318;
  font-size: 13px;
  font-weight: 820;
}
.reco-v2-intro span {
  display: block;
  margin-top: 2px;
  color: #6a5c4c;
  font-size: 12px;
  line-height: 1.35;
}

/* --- Viewer plein ecran (story ouverte) ---------------------------------- */
/* Viewer a sa taille d'origine (ratio 9/16 plein), NON reduit. La photo remplit
   le cadre en object-fit:cover. */
.reco-v2-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  flex: 0 0 auto;
  margin: 0 auto 4px;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
}
.reco-v2-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: 0;
}
/* Profils IA : portraits cadres plus serres -> on remonte le cadrage vertical
   pour garder le sommet du crane visible, sans dezoomer (cover conserve). */
.is-ia-profile .reco-v2-photo { object-position: center 0%; }
/* Barres de progression segmentees. */
.reco-v2-progress {
  position: absolute;
  top: 8px; left: 10px; right: 10px;
  z-index: 3;
  display: flex;
  gap: 4px;
}
.reco-v2-bar {
  flex: 1 1 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
}
.reco-v2-bar > i { display: block; height: 100%; width: 0; background: #fff; border-radius: 999px; }
.reco-v2-bar.is-done > i { width: 100%; }
.reco-v2-bar.is-current > i { width: 0; animation: recoV2Fill 5s linear forwards; }
@keyframes recoV2Fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .reco-v2-bar.is-current > i { animation: none; width: 40%; }
}
/* En-tete : avatar + nom cluster + Close. */
.reco-v2-viewer-head {
  position: absolute;
  top: 16px; left: 12px; right: 12px;
  z-index: 3;
  /* Colonne : macaron story sur une ligne, lien "Why this frame?" DESSOUS a
     gauche (meme placement que dans le VTO). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.reco-v2-viewer-who { display: inline-flex; align-items: center; gap: 8px; }
/* Lien "Why this frame?" du feed : aligne a gauche sous le macaron. */
.reco-v2-viewer-head .reco-v2-why-link { align-self: flex-start; }
.reco-v2-viewer-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  background-size: cover; background-position: center 22%;
}
.reco-v2-viewer-who b { color: #fff; font-size: 13px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }

.reco-v2-close {
  border: 0; background: transparent; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
/* Zones de tap gauche/droite. On les limite a une BANDE CENTRALE verticale
   (35%-72% de la hauteur) : le geste de scroll vertical peut passer au-dessus
   et en dessous, sans etre capture par ces boutons. */
.reco-v2-tap {
  position: absolute;
  top: 35%;
  height: 37%;
  z-index: 2;
  border: 0; background: transparent; cursor: pointer;
}
.reco-v2-tap-prev { left: 0; width: 40%; }
.reco-v2-tap-next { right: 0; width: 60%; }
/* Pied : cœur + Try in AR. */
.reco-v2-viewer-foot {
  position: absolute;
  left: 12px; right: 12px; bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.reco-v2-heart {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.28);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
}
.reco-v2-heart svg { width: 20px; height: 20px; }
.reco-v2-heart.is-active { background: #fff1f2; border-color: #f0b9be; color: #d63445; }
.reco-v2-heart.is-active svg { fill: #d63445; stroke: #d63445; }
.reco-v2-tryar {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: #1c1c1c;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.reco-v2-tryar svg { width: 16px; height: 16px; }
.reco-v2-tryar svg:last-child { width: 13px; height: 13px; opacity: .7; }


/* Bouton "Product details" sous le bloc photo : acces direct a la fiche produit
   (sans passer par le VTO), pour la monture affichee dans la story. */
.reco-v2-product-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin: 10px auto 0;
  padding: 10px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fff;
  color: #2c2318;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.reco-v2-product-details > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.reco-v2-product-details .reco-v2-pd-arrow { margin-left: auto; }
.reco-v2-product-details .reco-v2-pd-arrow svg { width: 15px; height: 15px; opacity: .6; }


/* Barre d'info monture facon PDP : packshot + nom/pastilles + position Top 5. */
.reco-v2-frame-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px auto 0;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.reco-v2-frame-thumb {
  flex: 0 0 auto;
  width: 52px; height: 40px;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #f2f2f2;
}
.reco-v2-frame-thumb img { width: 100%; height: 100%; object-fit: contain; }
.reco-v2-frame-copy { flex: 1 1 auto; min-width: 0; }
.reco-v2-frame-name {
  font-size: 14px;
  font-weight: 820;
  color: #2c2318;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reco-v2-frame-swatches { display: flex; gap: 6px; margin-top: 6px; }
.reco-v2-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  display: inline-block;
}
.reco-v2-swatch.is-main { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #141414; }
.reco-v2-frame-count {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 7px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #2c2318;
  text-align: center;
}
.reco-v2-frame-count span { color: #8a8a8a; font-weight: 700; }

/* Lien "Why this frame?" dans le feed : meme rendu que dans le VTO (pastille
   sombre translucide, texte clair), place sous le macaron story. */
.reco-v2-why-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 4px 10px;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 11px; font-weight: 750; cursor: pointer;
}
.reco-v2-why-link svg { width: 13px; height: 13px; }
.reco-v2-why-link:active { transform: scale(.97); }

/* ===========================================================================
   ECRAN DE PREPARATION DES SELECTIONS (loading tryon) — migre depuis
   recommendations.css (qui n'est plus charge). Styles du portrait + orbites +
   etapes de progression.
   =========================================================================== */
.shortlist-preparing{position:relative;overflow:hidden;min-height:calc(100vh - 96px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 22px 70px;text-align:center;background:radial-gradient(circle at 50% 32%,#f0f0f0 0,#fafafa 38%,#f4f4f4 100%)}
.shortlist-preparing-portrait{position:relative;width:178px;height:218px;border-radius:90px;overflow:hidden;border:6px solid #fff;box-shadow:0 24px 54px rgba(0,0,0,.19);z-index:1}
.shortlist-preparing-portrait img{width:100%;height:100%;object-fit:cover}
.shortlist-preparing-spark{position:absolute;right:7px;bottom:13px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#1d1c1a;color:#fff}
.shortlist-preparing-orbit{position:absolute;border:1px solid #cfb9a455;border-radius:50%;animation:shortlistOrbit 4s ease-in-out infinite}
.orbit-one{width:270px;height:270px}
.orbit-two{width:370px;height:370px;animation-delay:-2s}
.shortlist-preparing-copy{position:relative;z-index:1;max-width:370px}
.shortlist-preparing-kicker{display:block;margin:30px 0 9px;font-size:11px;font-weight:800;letter-spacing:.16em;color:#8b6b52}
.shortlist-preparing h1{margin:0;font-size:34px;line-height:1.05;letter-spacing:-.055em}
.shortlist-preparing p{margin:14px 0 22px;color:#71685e;line-height:1.5}
.shortlist-preparing-steps{position:relative;z-index:1;width:min(100%,355px);margin-top:18px;display:flex;flex-direction:column;gap:8px;text-align:left}
.shortlist-preparing-steps span{padding:11px 14px;border-radius:12px;background:#fff;border:1px solid #e5e5e5;color:#777066;font-size:13px}
.shortlist-preparing-steps .is-done:before{content:'\2713';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#e3f1e7;color:#28674a}
.shortlist-preparing-steps .is-running:before{content:'\2026';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#29251f;color:#fff;animation:shortlistPulse 1.2s infinite}
.shortlist-preparing-note{position:relative;z-index:1;display:flex;gap:8px;align-items:center;margin-top:18px;color:#83786d;font-size:12px}
@keyframes shortlistOrbit{50%{transform:scale(1.07);opacity:.35}}
@keyframes shortlistPulse{50%{transform:scale(.82);opacity:.55}}