.catalogue-screen{
  position:relative;
  padding:0 14px 0;
  background:linear-gradient(180deg,#fff 0,#fafafa 44%,#f2f2f2 100%);
}
.catalogue-screen .catalogue-header{
  height:92px;
  margin:0 -14px 12px;
  padding:14px 14px 2px;
  box-sizing:border-box;
  border-bottom:1px solid #e5e5e5;
  background:rgba(255,255,255,.94);
}
.catalogue-screen .catalogue-header>div{
  min-width:0;
  text-align:center;
}
.catalogue-screen .catalogue-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111516;
  line-height:1;
}
.catalogue-screen .catalogue-header h2{
  margin:5px 0 0;
  color:#69645f;
  font-family:inherit;
  font-size:11px;
  font-weight:600;
}
.catalogue-screen .catalogue-nav{
  border:1px solid #e5e5e5;
  box-shadow:0 5px 16px rgba(0,0,0,.05);
}
/* Spacer invisible a droite du header : occupe la meme largeur que le bouton
   back pour garder le logo "Blink" parfaitement centre, sans bordure ni ombre
   (ce n'est pas un bouton, juste un contrepoids de mise en page). */
.catalogue-screen .catalogue-nav-spacer{
  visibility:hidden;
  border:0;
  box-shadow:none;
  background:transparent;
  pointer-events:none;
}
.catalogue-screen .profile-card{
  margin:0 0 16px;
  padding:14px 12px 15px;
  border:1px solid #e5e5e5;
  border-radius:16px;
  background:linear-gradient(145deg,#fafafa,#ffffff);
  box-shadow:0 9px 25px rgba(0,0,0,.055);
}
.catalogue-screen .profile-card-top{
  align-items:center;
}
.catalogue-screen .agent-pill{
  padding:8px 10px;
  background:#f0f0f0;
  color:#2f2a26;
  font-size:11px;
}
.catalogue-screen .catalogue-edit{
  min-width:auto;
  padding:0 6px;
  color:#6a6a6a;
}
.catalogue-screen .profile-facts{
  gap:6px;
  margin-top:14px;
}
.catalogue-screen .profile-facts>div{
  min-width:0;
  padding:8px 4px;
  border-left:1px solid #ede3da;
}
.catalogue-screen .profile-facts>div:first-child{border-left:0}
.catalogue-screen .catalogue-fact-icon{
  width:40px;
  height:40px;
  background:#fff;
  color:#171a1b;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.catalogue-screen .profile-facts small{
  margin-top:7px;
  color:#827b75;
  font-size:7.5px;
  line-height:1.2;
}
.catalogue-screen .profile-facts strong{
  display:block;
  margin-top:3px;
  color:#171a1b;
  font-size:10px;
  line-height:1.22;
  /* Profil lisible en entier : plus de troncature a 2 lignes. */
  overflow:visible;
  overflow-wrap:anywhere;
}
.catalogue-screen .filter-bar{
  margin:0 1px 14px;
}
.catalogue-screen .filter-bar>div{
  display:grid;
  gap:1px;
}
.catalogue-screen .filter-bar b{font-size:12px}
.catalogue-screen .filter-bar small{
  color:#827b75;
  font-size:11px;
}
.catalogue-screen .catalogue-filter{
  background:#fff;
  color:#282422;
}
.catalogue-screen .chip{
  border-color:#e5e5e5;
  background:#fff;
  color:#555555;
}
.catalogue-screen .catalogue-list{
  gap:12px;
  padding-bottom:82px;
}
.catalogue-screen .catalogue-product{
  min-height:0;
  padding:0;
  overflow:hidden;
  border:1px solid #e5e5e5;
  border-radius:17px;
  background:#f2f2f2;
  box-shadow:0 9px 25px rgba(0,0,0,.07);
}
.catalogue-screen .catalogue-product-main{
  width:100%;
  padding:8px 14px 14px;
  border:0;
  background:transparent;
  color:#151819;
  text-align:left;
}
.catalogue-screen .catalogue-product-main>img{
  display:block;
  width:100%;
  height:205px;
  object-fit:contain;
  border-radius:12px;
  background:#fff!important;
  box-shadow:inset 0 0 0 999px #fff;
}
.catalogue-screen .catalogue-product-copy{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  padding:10px 2px 0;
}
.catalogue-screen .catalogue-product-copy small{
  grid-column:1 / -1;
  color:#857e77;
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
}
.catalogue-screen .catalogue-product-copy strong{
  grid-column:1;
  margin-top:2px;
  font-size:20px;
  line-height:1.05;
}
.catalogue-screen .catalogue-reference{
  grid-column:1;
  color:#6a6a6a;
  font-size:11px;
}
.catalogue-screen .catalogue-product-copy>b{
  grid-column:2;
  grid-row:2 / span 2;
  color:#171a1b;
  font-size:17px;
}
.catalogue-screen .catalogue-product-copy p{
  grid-column:1 / -1;
  margin:8px 0 0;
  color:#6a6a6a;
  font-size:11px;
}
.catalogue-screen .catalogue-product>.heart{
  position:absolute;
  z-index:4;
  top:15px;
  right:15px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #e5e5e5;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#181b1c;
  box-shadow:0 5px 14px rgba(0,0,0,.08);
}
.catalogue-screen .catalogue-product>.heart svg{
  width:20px;
  height:20px;
}
.catalogue-screen .catalogue-product.is-saved>.heart{
  border-color:#f0b9be;
  background:#fff0f1;
  color:#d63445;
}
.catalogue-screen .catalogue-product.is-saved>.heart svg{
  fill:#d63445;
  stroke:#d63445;
}
.catalogue-screen .bottom-nav{
  position:sticky;
  bottom:0;
  z-index:40;
  position:sticky;
  z-index:12;
  left:0;
  right:0;
  bottom:0;
  width:calc(100% + 28px);
  min-height:68px;
  margin:0 -14px;
  padding:10px 12px max(10px,env(safe-area-inset-bottom));
  align-items:center;
  border-top:1px solid #e5e5e5;
  background:rgba(255,255,255,.97);
  box-shadow:0 -8px 24px rgba(0,0,0,.07);
}
.catalogue-screen{padding-bottom:100px!important}
/* Let the fixed nav anchor to the mobile viewport instead of the catalogue's
   internal scrolling section. */
body:has(.catalogue-screen) main{overflow:visible}
.catalogue-screen{overflow:visible}
.catalogue-screen .bottom-nav .nav-item{
  min-width:60px;
}
.favorites-screen .bottom-nav{
  position:static;
  width:calc(100% + 28px);
  margin:0 -14px 0;
}
.favorites-screen .favorites-list{flex:1;align-content:flex-start}
.favorites-screen .bottom-nav{margin-top:auto}
.favorites-screen{min-height:100vh!important}

/* Catalogue, Favorites and Product render the nav inside their screen;
   pin that instance to the same viewport edge as journey screens. */
.catalogue-screen .bottom-nav{
  position:fixed;
  left:50%;
  right:auto;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  max-width:414px;
  box-sizing:border-box;
  margin:0;
  z-index:40;
}
/* Keep the catalogue menu pinned to the mobile viewport; bottom padding below
   the list ensures the final card remains reachable above the overlay. */
.catalogue-screen .bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(100%,414px);
  max-width:414px;
  z-index:40;
  margin:0;
}
.catalogue-screen{padding-bottom:100px!important}
.product-page-screen .bottom-nav{position:static;transform:none;width:calc(100% + 28px);margin:auto -14px 0}
.product-page-screen{padding-bottom:24px!important}
.favorites-screen .bottom-nav{margin-top:auto!important}
.shortlist-preparing-screen{padding-bottom:150px!important}

/* Journey screens receive the same viewport-fixed navigation as Favorites.
   Keep content clear of it and normalize icon sizing across every screen. */
#app>.bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(100vw,393px);
  max-width:393px;
  box-sizing:border-box;
  min-height:68px;
  margin:0;
  padding:10px 12px max(10px,env(safe-area-inset-bottom));
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-around;
  background:rgba(255,255,255,.97);
  border-top:1px solid #e5e5e5;
  box-shadow:0 -8px 24px rgba(0,0,0,.07);
}
#app>.screen:not(.vto-screen){
  padding-bottom:120px!important;
  box-sizing:border-box;
}
#app>.analysis-loading-screen + .bottom-nav{bottom:0}
#app>.bottom-nav .nav-item{
  min-width:60px;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  text-align:center;
  font-size:11px;
  font-weight:500;
}
#app>.bottom-nav .nav-label{display:block;width:100%;text-align:center;font-size:inherit;line-height:1.1}
#app>.bottom-nav .is-active .nav-label{font-weight:800}
#app>.bottom-nav .nav-icon{width:24px;height:24px;display:grid;place-items:center;font-style:normal;line-height:1}
#app>.bottom-nav .nav-icon svg{width:24px;height:24px;display:block;stroke:currentColor;stroke-width:1.8}
#app>.screen:not(.vto-screen):not(.selfie-screen){padding-bottom:150px!important}
#app>.screen.selfie-screen{padding-bottom:0!important;box-sizing:border-box}
#app>.screen .bottom-nav{position:fixed!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;width:min(100vw,393px)!important;max-width:393px!important;box-sizing:border-box!important;z-index:40!important}

/* Catalogue actions and navigation now use the same mobile grammar as Home. */
.catalogue-screen .catalogue-edit{
  width:auto;
  height:34px;
  min-width:0;
  padding:0 7px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  border-radius:999px;
  font-size:8px;
  line-height:1.1;
}
.catalogue-screen .catalogue-edit svg{width:14px;height:14px;flex:0 0 auto}
.catalogue-screen .catalogue-edit span{max-width:74px;text-align:left}
.catalogue-screen .bottom-nav{
  width:calc(100% + 28px);
  min-height:53px;
  height:53px;
  margin:0 -14px;
  padding:7px 19px 5px;
  align-items:flex-start;
  border-top:1px solid #f0ebe6;
  background:#fff;
  box-shadow:none;
  font-size:8px;
}
.catalogue-screen .bottom-nav .nav-item{
  min-width:0;
}

/* Final catalogue alignment with the homepage navigation and premium palette. */
.catalogue-screen .catalogue-product{
  background:#fafafa;
}
.catalogue-screen .catalogue-edit{
  color:#333333;
  background:#eaeaea;
  border:1px solid #cccccc;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
.catalogue-screen .bottom-nav>.nav-item{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:#121516;
  font-weight:500;
}
.catalogue-screen .bottom-nav .nav-label{
  display:block;
  font-size:inherit;
  font-weight:500;
  line-height:1.1;
}
.catalogue-screen .bottom-nav .is-active .nav-label{font-weight:800}
.catalogue-screen .bottom-nav .nav-icon{
  font-style:normal;
  font-size:15px;
  line-height:17px;
}
.catalogue-screen .bottom-nav .nav-icon svg{width:17px;height:17px;display:block;stroke:currentColor;stroke-width:1.8}

.catalogue-screen .profile-card-top{
  align-items:stretch;
  gap:10px;
}
.catalogue-screen .profile-card-top .agent-pill{
  flex:1 1 auto;
  min-width:0;
}
.catalogue-screen .profile-card-top .catalogue-edit{
  flex:0 0 auto;
  margin-left:0;
}

/* ---------------------------------------------------------------------------
   Macaron "Recommended" � composant unique, meme style sur tous les ecrans
   (catalogue, favoris, page produit). S'affiche uniquement pour les montures
   appartenant au contexte de recommandation actif.
   --------------------------------------------------------------------------- */
.catalogue-screen .catalogue-product { position: relative; }
.reco-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #141414;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  white-space: nowrap;
}
.reco-badge svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* Sur les cartes catalogue / favoris : macaron en overlay, coin haut-gauche.
   Bien a l'interieur du cadre arrondi (la carte a overflow:hidden + radius),
   avec une largeur bornee pour ne jamais deborder. */
.catalogue-screen .catalogue-product.is-recommended > .reco-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  max-width: calc(100% - 60px);
  overflow: hidden;
}
.catalogue-screen .catalogue-product.is-recommended > .reco-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sur la page produit : macaron en overlay dans la galerie, coin haut-gauche,
   entierement a l'interieur du cadre (jamais coupe ni debordant). */
.product-page-screen .product-gallery { position: relative; }
.product-page-screen .product-gallery.is-recommended > .reco-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
  overflow: hidden;
}
.product-page-screen .product-gallery.is-recommended > .reco-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Filtres par selection (catalogue, apres analyse) : "Recommended" + les 5
   selections personnalisees. Un seul actif a la fois (V1). Chips scrollables.
   --------------------------------------------------------------------------- */
/* Indicateur "un filtre est actif" sur le bouton Filters / Sort. */
.catalogue-screen .catalogue-filter.is-filtered { border-color: #141414; color: #333333; }
.catalogue-screen .catalogue-filter .catalogue-filter-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #141414; display: inline-block; margin-left: 2px;
}

/* Modal de filtres (bottom sheet) : cache par defaut, ouvert via "Filter". */
.catalogue-filter-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(28, 20, 12, .38);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.catalogue-filter-backdrop.is-open { opacity: 1; pointer-events: auto; }
.catalogue-filter-backdrop { overscroll-behavior: contain; touch-action: none; }
/* Quand le bottom sheet de filtres est ouvert, on GELE le scroll de l'ecran
   catalogue derriere : impossible de continuer a defiler les paires tant que
   le sheet n'est pas ferme (comportement modal attendu). Le backdrop + le
   sheet sont ancres a l'ecran (position:absolute dans .catalogue-screen qui
   est position:relative + overflow verrouille), donc ils recouvrent bien tout
   le haut de l'ecran au lieu de flotter au milieu du contenu scrolle. */
.catalogue-screen:has(.catalogue-filter-modal.is-open),
.catalogue-screen:has(.catalogue-filter-backdrop.is-open) {
  overflow: hidden !important;
  touch-action: none;
}
.catalogue-filter-modal {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-width: 480px; margin: 0 auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  /* Le padding bas reserve la hauteur de la nav basse (~68px) pour que le
     dernier filtre reste visible AU-DESSUS du menu et ne soit pas masque. */
  padding: 10px 18px calc(108px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0, .18);
  transform: translateY(100%); transition: transform .24s ease;
}
.catalogue-filter-modal.is-open { transform: translateY(0); }
.catalogue-filter-handle {
  width: 40px; height: 4px; border-radius: 999px; background: #d4d4d4;
  margin: 2px auto 12px;
}
.catalogue-filter-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px;
}
.catalogue-filter-modal-head small { display: block; color: #9a8f82; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.catalogue-filter-modal-head h2 { margin: 2px 0 0; font-size: 16px; color: #2c2318; }
.catalogue-filter-modal-head button {
  width: 30px; height: 30px; flex: 0 0 auto; padding: 0;
  border: 1px solid #e5e5e5; border-radius: 50%; background: #f4f4f4; color: #4a4a4a; cursor: pointer;
}
.catalogue-filter-modal-head button svg { width: 15px; height: 15px; }
.catalogue-filter-options { display: flex; flex-direction: column; gap: 8px; }
.catalogue-filter-option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 13px 15px;
  border: 1px solid #e5e5e5; border-radius: 13px; background: #fff;
  color: #4a4a4a; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.catalogue-filter-option > span { display: inline-flex; align-items: center; gap: 8px; }
.catalogue-filter-option svg { width: 15px; height: 15px; flex: 0 0 auto; }
.catalogue-filter-option.is-active {
  background: #f2f2f2; border-color: #141414; color: #333333;
}

/* Catalogue sans analyse : le profil est masque, seul le CTA principal reste,
   identique a la home ("Discover my ideal eyewear"), en pleine largeur. */
.catalogue-screen .profile-card.profile-card-empty { padding:10px; }
.catalogue-screen .profile-card-empty .profile-card-top { display:block; }
.catalogue-screen .catalogue-start-cta {
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0;
}

/* Gel du scroll de secours (#app) quand le bottom sheet de filtres est ouvert,
   pour un vrai comportement modal : on ne peut plus defiler l'arriere-plan. */
#app:has(.catalogue-filter-modal.is-open){overflow:hidden!important;overscroll-behavior:contain}

/* Bouton d'application du bottom sheet de filtres (multi-selection). Ferme le
   sheet et applique la selection courante (union des clusters coches). */
.catalogue-filter-apply{
  width:100%;
  min-height:46px;
  margin-top:14px;
  border:0;
  border-radius:13px;
  background:#141414;
  color:#fff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.catalogue-filter-apply:active{ background:#2a2a2a; }