:root{
  --visiona-surface:#fafafa;
  --visiona-surface-soft:#f2f2f2;
  --visiona-action:#141414;
  --visiona-action-strong:#000000;
  --visiona-success:#48c978;
  --visiona-error:#df715f;
  --visiona-scan:#a9e1e5;
  --visiona-radius-control:10px;
  --visiona-radius-standard:14px;
  --visiona-radius-card:18px;
  --visiona-radius-panel:22px;
  --visiona-space-1:8px;
  --visiona-space-2:16px;
  --visiona-space-3:24px;
}

/* One restrained, premium icon weight across the journey. */
#app svg[data-ve-lucide]{
  stroke-width:1.45;
}

/* Shared type hierarchy. The internal 311 px artboard is enlarged by the
   phone template, so 8 px here renders at roughly 10 px on the device. */
.screen>h1,
.selfie-screen>h1,
.swipe-top-panel>h1{
  font-size:29px;
  line-height:1.08;
  font-weight:780;
}
.swipe-top-panel>h1{
  max-width:328px;
  margin:0 auto 6px;
  font-size:18px;
  line-height:1.08;
  letter-spacing:0;
}
.lead,
.selfie-lead,
.analysis-lead{
  font-size:11px;
  line-height:1.45;
}
.swipe-top-panel>.lead{
  max-width:300px;
  margin-bottom:0;
  font-size:11px;
  line-height:1.32;
}
.section-title,
.analysis-section-title,
.tips-title{
  font-size:11px;
}
.privacy-text,
.security-text,
.analysis-security-text,
.recommendation-lead,
.swipe-step small,
.tip-label{
  font-size:8px;
  line-height:1.4;
}
.privacy-text,
.security-text,
.analysis-security-text,
.result-security-text{
  font-size:11px!important;
  line-height:1.22!important;
}

/* Standard controls: compact controls, regular actions and commercial actions. */
.primary,
.secondary,
.dark-action,
.selfie-button,
.security-action,
.analysis-preferences-action,
.result-action,
.recommendation-ar,
.premium-vto-actions button,
.product-primary-action,
.product-secondary-action{
  border-radius:var(--visiona-radius-standard);
}
.step-nav,
.swipe-close,
.recommendation-nav,
.ghost:not(.menu-icon):not(.bag-icon){
  border-radius:var(--visiona-radius-control);
}
.premium-vto-actions .cart,
.product-primary-action,
.apply-filters{
  background:var(--visiona-action);
}
.premium-vto-actions .cart:active,
.product-primary-action:active,
.apply-filters:active{
  background:var(--visiona-action-strong);
}

/* Card hierarchy. */
.usage-option,
.analysis-type,
.swipe-card,
.profile-card{
  border-radius:var(--visiona-radius-standard);
}
.catalogue-product,
.recommendation-card,
.product-visual-card,
.product-info-card,
.product-page .product-image{
  border-radius:var(--visiona-radius-card);
}
.usage-card,
.score-panel,
.filter-drawer,
.analysis-recap,
.premium-score-details{
  border-radius:var(--visiona-radius-panel);
}
.chip,
.agent-pill,
.premium-score-capsule,
.premium-style-tag,
.swipe-choice-badge,
.recommendation-match{
  border-radius:999px;
}

/* Repeated spacing rhythm. */
.analysis-types,
.result-grid{
  gap:var(--visiona-space-1);
}
.catalogue-list,
.product-accordion-list{
  gap:var(--visiona-space-2);
}
.usage-option+.usage-option{
  margin-top:var(--visiona-space-1);
}

/* Semantic colours remain exclusive to their states. */
.analysis-complete-check,
.result-validation-icon,
.premium-score-capsule strong{
  color:var(--visiona-success);
}
.scan-beam,
.face-scan-visual{
  --scan-accent:var(--visiona-scan);
}
.swipe-stage.invalid-direction .is-active-drag{
  border-color:var(--visiona-error);
}

/* A neutral pressed state; green is reserved for an accepted preference. */
.swipe-screen .swipe-card.is-active-drag{
  border-color:#b8a99d;
  background:#fffdfa;
  box-shadow:0 12px 28px rgba(79,62,48,.14);
}
.swipe-stage[data-choice="A"] .pair-a,
.swipe-stage[data-choice="B"] .pair-b{
  border-color:#b8a99d;
  background:#fffdfa;
  box-shadow:0 12px 28px rgba(79,62,48,.14);
}
.swipe-stage.swipe-accepted.accepted-a .pair-a,
.swipe-stage.swipe-accepted.accepted-b .pair-b{
  border-color:var(--visiona-success);
  background:#fbfffc;
  box-shadow:0 12px 28px rgba(72,201,120,.22);
}

/* Reusable, calm recovery state for photo and analysis failures. */
.journey-error-backdrop{
  position:absolute;
  inset:0;
  z-index:120;
  padding:18px;
  display:grid;
  place-items:center;
  background:rgba(20,18,16,.36);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.journey-error-dialog{
  width:min(100%,270px);
  padding:20px;
  border:1px solid rgba(41,35,31,.08);
  border-radius:20px;
  background:#ffffff;
  color:#17191a;
  box-shadow:0 22px 54px rgba(41,30,23,.2);
  text-align:center;
}
.journey-error-icon{
  width:45px;
  height:45px;
  margin:0 auto 11px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f4e9df;
  color:#9b674d;
}
.journey-error-icon svg{width:21px;height:21px}
.journey-error-dialog h2{margin:0 0 7px;font-size:18px;line-height:1.15}
.journey-error-dialog p{margin:0 0 16px;color:#6f6965;font-size:11px;line-height:1.4}
.journey-error-dialog button{width:100%;min-height:42px;border-radius:10px;font-size:11px;font-weight:780}
.journey-error-primary{border:0;background:#111516;color:#fff}
.journey-error-secondary{margin-top:7px;border:1px solid #e5e5e5;background:transparent;color:#5f5a56}

/* Final VTO mobile type scale. Kept here because the design system loads
   after the screen-specific stylesheet. */
.vto-layout-v2 .premium-vto-actions>button span{font-size:11px}
.vto-layout-v2 .suggestions-trigger b{font-size:13px}
.vto-layout-v2 .suggestions-sheet-grid .suggestion b{font-size:12px;line-height:1.15}
.vto-layout-v2 .suggestions-sheet-grid .suggestion small{font-size:10px;line-height:1.2}
.vto-layout-v2 .suggestion-group-heading b{font-size:14px}
.vto-layout-v2 .suggestion-group-heading small{font-size:10px}
.premium-score-vto .recap-carousel .recap-item small{font-size:10px}
.premium-score-vto .recap-carousel .recap-item h3{font-size:14px}
.premium-score-vto .recap-carousel .recap-item p{font-size:11.5px;line-height:1.35}
.vto-layout-v2 .premium-score-card-copy small{font-size:10.5px}
.vto-layout-v2 .premium-score-card-copy b{font-size:14px}
.vto-layout-v2 .premium-score-card-copy p{font-size:11.5px;line-height:1.34}

/* Mobile legibility pass. Values are expressed on the internal 311 px
   artboard and render about 1.26 times larger on the phone template. */
.home-screen .top-nav{
  grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,2fr);
  gap:1px;
  font-size:7.2px;
}
.home-screen .top-nav b{line-height:1.08}
.home-screen .agent-tab{overflow:hidden}
.home-screen .agent-tab b{font-size:7px}
.home-screen .hero p{font-size:8.5px}
.home-screen .trust{font-size:7.5px}
.home-screen .section-title span,
.home-screen .section-title button{font-size:11px}
.home-screen .mini-card small{font-size:7px}
.home-screen .bottom-nav{font-size:8px}
.product-page-screen .product-top-nav{font-size:7.2px}
.product-page-screen .product-bottom-nav{font-size:8px}

.swipe-step small{font-size:8.5px}
.preference-stack small{font-size:8px}
.preference-stack b{font-size:11px}
.circular-hold-control.swipe-hold-instruction{font-size:8px}

.recommendation-lead{font-size:11px}
.recommendation-match{font-size:8px}
.recommendation-frame-detail b{font-size:11px}
.recommendation-frame-detail small{font-size:11px}
.recommendation-product-copy b{font-size:12px}
.recommendation-product-copy small{font-size:11px}
.recommendation-ar{font-size:11px}

.premium-vto-actions button,
.vto-layout-v2 .premium-vto-actions>button span{font-size:10px}
.premium-style-tag small,
.vto-action-style small{font-size:8px}
.premium-style-tag b,
.vto-action-style b{font-size:10px}
.suggestions-trigger b{font-size:11px}
.suggestions-sheet-header small{font-size:8px}
.suggestions-sheet-tools button,
.suggestion-reset{font-size:9px}
.suggestions-sheet-grid .suggestion b{font-size:11px}
.suggestions-sheet-grid .suggestion small{font-size:9px}
.suggestion-group-heading b{font-size:11px}
.suggestion-group-heading small{font-size:8.5px}
.premium-score-vto .analysis-recap>p{font-size:9px}
.premium-score-vto .recap-carousel .recap-item small{font-size:9px}
.premium-score-vto .recap-carousel .recap-item p{font-size:9.5px}
.premium-score-card-copy p{font-size:9.5px}
.technical-fit-note{font-size:9px}
.premium-score-annotation strong{font-size:8px}
.premium-score-annotation small{font-size:7px}

.product-identity small,
.product-price span,
.product-identity p,
.product-benefits b,
.product-accordion p{font-size:11px}
.product-advice small{font-size:11px}
.product-advice b{font-size:11px}
.product-primary-actions button{font-size:10px}

@media(max-width:375px){
  .screen>h1,
  .selfie-screen>h1,
  .swipe-top-panel>h1{font-size:28px}
  .swipe-top-panel>h1{font-size:18px}
}

/* VTO legibility overrides must remain last in the cascade. */
.vto-layout-v2 .premium-vto-actions>button span{font-size:11px}
.vto-layout-v2 .premium-style-tag small,
.vto-layout-v2 .vto-action-style small{font-size:9.5px}
.vto-layout-v2 .premium-style-tag b,
.vto-layout-v2 .vto-action-style b{font-size:12px}
.vto-layout-v2 .suggestions-trigger b{font-size:13px}
.vto-layout-v2 .suggestions-sheet-header small{font-size:10px}
.vto-layout-v2 .suggestions-sheet-tools button,
.vto-layout-v2 .suggestion-reset{font-size:10.5px}
.vto-layout-v2 .suggestions-sheet-grid .suggestion b{font-size:12px}
.vto-layout-v2 .suggestions-sheet-grid .suggestion small{font-size:10px}
.vto-layout-v2 .suggestion-group-heading b{font-size:14px}
.vto-layout-v2 .suggestion-group-heading small{font-size:10px}
.premium-score-vto .analysis-recap>p{font-size:11px}
.premium-score-vto .recap-carousel .recap-item small{font-size:10px}
.premium-score-vto .recap-carousel .recap-item h3{font-size:14px}
.premium-score-vto .recap-carousel .recap-item p{font-size:11.5px}
.vto-layout-v2 .premium-score-card-copy small{font-size:10.5px}
.vto-layout-v2 .premium-score-card-copy b{font-size:14px}
.vto-layout-v2 .premium-score-card-copy p{font-size:11.5px}
.vto-layout-v2 .technical-fit-note{font-size:10.5px}
.vto-layout-v2 .premium-score-annotation strong{font-size:9.5px}
.vto-layout-v2 .premium-score-annotation small{font-size:8px}

/* Premium surface normalization: one warm page canvas, white product media,
   and beige reserved for recommendation/AI emphasis. */
:root{
  --visiona-page:#fafafa;
  --visiona-card:#fff;
  --visiona-accent-soft:#f2f2f2;
  --visiona-border:#e5e5e5;
}
#app{background:var(--visiona-page)}
.home-screen,
.selfie-screen,
.analysis-loading-screen,
.analysis-result-screen,
.recommendations-screen,
.catalogue-screen,
.product-page-screen{
  background:var(--visiona-page)!important;
}
.profile-card,
.agent-pill,
.product-advice,
.bottom-security{
  background:var(--visiona-accent-soft);
}
.catalogue-screen .catalogue-product-main>img,
.product-page-screen .product-gallery,
.product-page-screen .product-gallery img,
.product-page-screen .product-image{
  background:#fff!important;
}
.catalogue-screen .catalogue-product{
  background:var(--visiona-accent-soft);
  border-color:var(--visiona-border);
}


/* =========================================================================
   BLINK � Logo de marque (SVG "Blink."). Remplace le wordmark texte VISIONA.
   Hauteur controlee ; largeur auto (ratio 127x34). currentColor = couleur texte.
   ========================================================================= */
.brand-logo{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.brand-logo-svg{ height:19px; width:auto; display:block; }