/* RS2EYEWEAR — final shared component overrides loaded after the parent theme. */

@font-face {
  font-display: swap;
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src:
    url("../../../hummingbird/assets/fonts/MaterialIcons-Regular-2d8017489da689caedc1.woff2") format("woff2"),
    url("../../../hummingbird/assets/fonts/MaterialIcons-Regular-08cefa1bc6566a650da7.woff") format("woff");
}

body:not(#index) .header-top .header-block__icon {
  display: none !important;
}

body:not(#index) .header-top .header-block__action-btn.dropdown-toggle::after {
  display: none !important;
}

body:not(#index) .header-top .header-block__action-btn,
body:not(#index) .header-top .header-block__title,
body:not(#index) .header-top .header-block__subtitle {
  color: #fff !important;
  opacity: 1 !important;
}

body:not(#index) .header-top .cart-preview .header-block__badge {
  align-items: center;
  background: var(--rs2-red-fill) !important;
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-size: .68rem;
  font-weight: 850;
  height: 1.35rem;
  justify-content: center;
  min-width: 1.35rem;
  padding-inline: .3rem;
}

body:not(#index) .header-top .cart-preview.inactive .header-block__badge {
  background: #2b2e36 !important;
  color: #c8cbd1 !important;
}

body:not(#index) .footer__before .ps-emailsubscription p.fs-6.text-body-secondary {
  -webkit-text-fill-color: #aeb1b8;
  color: #aeb1b8 !important;
  opacity: 1 !important;
}

html[data-rs2-theme="light"] body:not(#index) .header-top .header-block__action-btn,
html[data-rs2-theme="light"] body:not(#index) .header-top .header-block__title,
html[data-rs2-theme="light"] body:not(#index) .header-top .header-block__subtitle {
  color: #14151a !important;
}

/* Garde-fou contre les debordements horizontaux.
   Ne JAMAIS ajouter html a ce selecteur : si <html> n'est plus en overflow
   `visible`, l'overflow:hidden que Bootstrap pose sur <body> a l'ouverture
   d'un modal ne remonte plus au viewport. La page continue alors de defiler
   derriere le modal et deux barres de defilement coexistent. */
body {
  max-width: 100%;
  overflow-x: hidden;
}

.header-block .dropdown-menu .material-icons {
  display: none;
}

@media (max-width: 767.98px) {
  .header-block__action-btn {
    align-items: center;
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    min-width: 2.5rem;
    position: relative;
  }

  .header-block__action-btn .header-block__icon {
    display: none !important;
  }

  #userMenuButton::before,
  .cart-preview .header-block__action-btn::before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 1.25rem;
    width: 1.25rem;
  }

  #userMenuButton::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f7f8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3.5'/%3E%3Cpath d='M5 21a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
  }

  .cart-preview .header-block__action-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f7f8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.1 10.2a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.6L20 8H6'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E");
  }

  .cart-preview .header-block__badge {
    align-items: center;
    background: var(--rs2-red-fill) !important;
    border: 2px solid var(--rs2-bg);
    border-radius: 999px;
    color: #fff !important;
    display: inline-flex;
    font-size: .62rem;
    font-weight: 850;
    height: 1.2rem;
    justify-content: center;
    min-width: 1.2rem;
    padding: 0 .2rem;
    position: absolute;
    right: -.1rem;
    top: -.1rem;
  }

  .rs2-nav {
    max-width: 100%;
  }
}

/* Global RS2 header — same visual language as the cinematic homepage. */

body:not(#index) .header {
  background: rgb(7 8 12 / 94%);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  box-shadow: 0 12px 40px rgb(0 0 0 / 22%);
  position: sticky;
  top: 0;
  z-index: 100;
}

.rs2-site-announcement {
  background: var(--rs2-red-fill);
  color: #fff;
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .045em;
}

.rs2-site-announcement__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 30px;
}

.rs2-site-announcement__inner > span,
.rs2-site-announcement__inner > a {
  align-items: center;
  color: #fff;
  display: inline-flex;
  gap: .5rem;
  text-decoration: none;
}

.rs2-site-announcement__inner > span i,
.rs2-global-header__pro i {
  background: currentcolor;
  border-radius: 50%;
  display: inline-block;
  height: .35rem;
  width: .35rem;
}

.rs2-site-announcement__inner > a {
  font-weight: 850;
}

.rs2-global-header {
  backdrop-filter: blur(22px);
  background: rgb(8 9 13 / 82%);
}

.rs2-global-header__row {
  align-items: center;
  display: flex;
  gap: clamp(.7rem, 1.4vw, 1.35rem);
  min-height: 74px;
}

.rs2-global-header__brand {
  flex: 0 0 auto;
}

.rs2-global-header__brand .rs2-logo img {
  height: 34px;
}

body:not(#index) .rs2-global-header .rs2-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  order: initial;
  width: auto;
}

body:not(#index) .rs2-global-header .rs2-nav__list {
  gap: clamp(.45rem, 1.2vw, 1.2rem);
  padding: 0;
}

body:not(#index) .rs2-global-header .rs2-nav a {
  border: 0;
  color: #aeb0b8;
  font-size: clamp(.68rem, .75vw, .76rem);
  font-weight: 680;
  letter-spacing: .015em;
  padding: .75rem .15rem;
  position: relative;
}

body:not(#index) .rs2-global-header .rs2-nav a::after {
  background: var(--rs2-red);
  bottom: .35rem;
  content: "";
  height: 1px;
  left: .15rem;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  width: calc(100% - .3rem);
}

body:not(#index) .rs2-global-header .rs2-nav a:hover,
body:not(#index) .rs2-global-header .rs2-nav a:focus-visible {
  color: var(--rs2-on-tint);
}

body:not(#index) .rs2-global-header .rs2-nav a:hover::after,
body:not(#index) .rs2-global-header .rs2-nav a:focus-visible::after {
  transform: scaleX(1);
}

body:not(#index) .rs2-global-header .search-widgets {
  flex: 0 0 42px;
  margin: 0;
  min-width: 42px;
  transition: flex-basis .3s ease;
  width: 42px;
}

body:not(#index) .rs2-global-header .search-widgets:focus-within {
  flex-basis: 190px;
}

body:not(#index) .rs2-global-header .search-widgets form {
  height: 42px;
  margin: 0;
  position: relative;
}

body:not(#index) .rs2-global-header .search-widgets input[type="text"] {
  background-color: var(--rs2-field-bg);
  background-image: var(--rs2-search-icon);
  background-position: 11px center;
  background-repeat: no-repeat;
  background-size: 18px;
  border: 1px solid var(--rs2-field-border);
  border-radius: 999px;
  color: var(--rs2-text);
  font-size: .75rem;
  height: 42px;
  padding: 0 1rem 0 2.55rem;
  width: 100%;
}

body:not(#index) .rs2-global-header .search-widgets input[type="text"]::placeholder {
  color: transparent;
}

body:not(#index) .rs2-global-header .search-widgets:focus-within input[type="text"]::placeholder {
  color: #8e919a;
}

body:not(#index) .rs2-global-header .search-widgets .search,
body:not(#index) .rs2-global-header .search-widgets .clear {
  display: none;
}

.rs2-global-header__actions,
.rs2-global-header__mobile-actions {
  align-items: center;
  flex: 0 0 auto;
  gap: .45rem;
}

.rs2-global-header__actions .header-block__action-btn,
.rs2-global-header__mobile-actions .header-block__action-btn,
.rs2-global-header__icon {
  align-items: center;
  background: rgb(255 255 255 / 4%) !important;
  border: 1px solid rgb(255 255 255 / 12%) !important;
  border-radius: 50%;
  color: #f7f7f8 !important;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  min-width: 42px;
  padding: 0 !important;
  position: relative;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
  width: 42px;
}

.rs2-global-header__actions .header-block__action-btn:hover,
.rs2-global-header__mobile-actions .header-block__action-btn:hover,
.rs2-global-header__icon:hover {
  background: rgb(255 29 29 / 10%) !important;
  border-color: rgb(255 29 29 / 42%) !important;
  color: var(--rs2-on-tint) !important;
}

.rs2-global-header__actions .header-block__icon,
.rs2-global-header__mobile-actions .header-block__icon {
  display: block !important;
  font-size: 1.22rem;
}

.rs2-global-header__actions .header-block__title,
.rs2-global-header__actions .header-block__subtitle {
  display: none !important;
}

#header .rs2-global-header__actions .header-block__title.d-none,
#header .rs2-global-header__actions .header-block__subtitle.d-none {
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.rs2-global-header__actions .header-block__badge,
.rs2-global-header__mobile-actions .header-block__badge {
  align-items: center;
  background: var(--rs2-red-fill) !important;
  border: 2px solid #090a0e;
  border-radius: 99px;
  color: #fff !important;
  display: flex;
  font-size: .56rem;
  font-weight: 850;
  height: 1.1rem;
  justify-content: center;
  min-width: 1.1rem;
  padding: 0 .18rem;
  position: absolute;
  right: -.2rem;
  top: -.2rem;
}

.rs2-global-header__pro {
  align-items: center;
  background: var(--rs2-red-fill);
  border: 1px solid var(--rs2-red);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: .7rem;
  font-weight: 800;
  gap: .48rem;
  min-height: 42px;
  padding: 0 1rem;
  text-decoration: none;
}

.rs2-global-header__pro:hover {
  background: var(--rs2-red-fill-hover);
  color: #fff;
}

.rs2-global-header__icon svg {
  height: 1.15rem;
  width: 1.15rem;
}

.rs2-theme-toggle__sun,
html[data-rs2-theme="light"] .rs2-theme-toggle__moon {
  display: none;
}

html[data-rs2-theme="light"] .rs2-theme-toggle__sun {
  display: block;
}

.rs2-global-menu-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 50%;
  display: none;
  flex-direction: column;
  gap: 4px;
  height: 42px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 42px;
  z-index: 104;
}

.rs2-global-menu-toggle span {
  background: #fff;
  display: block;
  height: 1px;
  transition: transform .25s ease, opacity .2s ease;
  width: 16px;
}

.rs2-menu-open .rs2-global-menu-toggle span:first-child {
  transform: translateY(5px) rotate(45deg);
}

.rs2-menu-open .rs2-global-menu-toggle span:nth-child(2) {
  opacity: 0;
}

.rs2-menu-open .rs2-global-menu-toggle span:last-child {
  transform: translateY(-5px) rotate(-45deg);
}

.rs2-global-header .dropdown-menu {
  background: #15171d;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: .9rem;
  box-shadow: 0 22px 60px rgb(0 0 0 / 42%);
  color: #fff;
  margin-top: .65rem !important;
  overflow: hidden;
  padding: .45rem;
}

.rs2-global-header .dropdown-item {
  border-radius: .55rem;
  color: #c9cbd2;
  font-size: .78rem;
}

.rs2-global-header .dropdown-item:hover {
  background: rgb(255 29 29 / 12%);
  color: var(--rs2-on-tint);
}

html[data-rs2-theme="light"] body:not(#index) .header,
html[data-rs2-theme="light"] .rs2-global-header {
  background: rgb(250 250 252 / 92%);
  border-color: rgb(16 18 27 / 10%);
}

html[data-rs2-theme="light"] body:not(#index) .rs2-global-header .rs2-nav a {
  color: #555963;
}

html[data-rs2-theme="light"] body:not(#index) .rs2-global-header .rs2-nav a:hover {
  color: #121318;
}

html[data-rs2-theme="light"] .rs2-global-header__actions .header-block__action-btn,
html[data-rs2-theme="light"] .rs2-global-header__mobile-actions .header-block__action-btn,
html[data-rs2-theme="light"] .rs2-global-header__icon,
html[data-rs2-theme="light"] .rs2-global-menu-toggle {
  background: rgb(16 18 27 / 3%) !important;
  border-color: rgb(16 18 27 / 12%) !important;
  color: #14151a !important;
}

html[data-rs2-theme="light"] .rs2-global-menu-toggle span {
  background: #14151a;
}

@media (max-width: 1199.98px) {
  body:not(#index) .rs2-global-header .rs2-nav__list {
    gap: .55rem;
  }

  body:not(#index) .rs2-global-header .rs2-nav__list li:nth-child(4),
  body:not(#index) .rs2-global-header .rs2-nav__list li:nth-child(6) {
    display: none;
  }

  .rs2-global-header__pro {
    padding-inline: .8rem;
  }
}

@media (max-width: 991.98px) {
  body.rs2-menu-open {
    overflow: hidden;
  }

  /* Le flou de l'en-tete (backdrop-filter) fait de lui le repere des
     elements en position fixe qu'il contient : le tiroir, cale sur l'ecran
     par top/bottom, restait enferme dans la hauteur de l'en-tete (71 px sur
     tablette). On retire le flou tant que le tiroir est ouvert ; le fond de
     l'en-tete est presque opaque, l'ecart ne se voit pas. Prefixe html pour
     passer devant body:not(#index) .header du bundle. */
  html body.rs2-menu-open:not(#index) .header,
  html body.rs2-menu-open .rs2-global-header {
    backdrop-filter: none;
  }

  .rs2-global-header__row {
    min-height: 66px;
  }

  .rs2-global-menu-toggle {
    display: flex;
  }

  body:not(#index) .rs2-global-header .rs2-nav {
    align-items: stretch;
    background:
      radial-gradient(circle at 100% 0, rgb(255 29 29 / 14%), transparent 20rem),
      #0b0c11;
    border-top: 1px solid rgb(255 255 255 / 10%);
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    left: 0;
    opacity: 0;
    padding: 2.2rem max(1.25rem, calc((100vw - 720px) / 2));
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 96px;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
    width: auto;
    z-index: 102;
  }

  body.rs2-menu-open:not(#index) .rs2-global-header .rs2-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  body:not(#index) .rs2-global-header .rs2-nav__list {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  body:not(#index) .rs2-global-header .rs2-nav__list li {
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    display: block !important;
  }

  body:not(#index) .rs2-global-header .rs2-nav a {
    color: #fff;
    display: flex;
    font-size: clamp(1.35rem, 6vw, 2rem);
    font-weight: 760;
    justify-content: space-between;
    letter-spacing: -.035em;
    padding: 1rem 0;
  }

  body:not(#index) .rs2-global-header .rs2-nav a::before {
    color: var(--rs2-red);
    content: "↗";
    font-size: 1rem;
    order: 2;
  }

  body:not(#index) .rs2-global-header .rs2-nav a::after {
    display: none;
  }

  /* rs2.css (bundle, charge apres cette feuille) donne au menu une marge
     negative et aux liens une pastille arrondie, prevues pour l'ordinateur :
     dans le tiroir, le texte collait au bord gauche de sa pastille. */
  html body:not(#index) .rs2-global-header .rs2-nav {
    margin: 0;
  }

  html body:not(#index) .rs2-global-header .rs2-nav a {
    background: none;
    border-radius: 0;
  }

  /* Le tiroir garde un fond sombre dans les deux themes : le gris #555963
     du menu en theme clair n'y faisait que 2,79:1. */
  html[data-rs2-theme="light"] body:not(#index) .rs2-global-header .rs2-nav a,
  html[data-rs2-theme="light"] body:not(#index) .rs2-global-header .rs2-nav a:hover {
    color: #fff;
  }
}

@media (max-width: 767.98px) {
  .rs2-site-announcement__inner {
    justify-content: center;
    min-height: 28px;
    padding-inline: 1rem;
    text-align: center;
  }

  .rs2-site-announcement__inner > span {
    font-size: .57rem;
  }

  .rs2-site-announcement__inner > span i,
  .rs2-site-announcement__inner > a {
    display: none;
  }

  .rs2-global-header__row {
    gap: .4rem;
    padding-inline: 1rem;
  }

  .rs2-global-header__brand {
    margin-right: auto;
  }

  .rs2-global-header__brand .rs2-logo img {
    height: 29px;
  }

  body:not(#index) .rs2-global-header .search-widgets {
    display: block;
    flex-basis: 40px;
    min-width: 40px;
    width: 40px;
  }

  body:not(#index) .rs2-global-header .search-widgets:focus-within {
    background: #0b0c11;
    inset: 28px 0 auto;
    padding: .75rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 106;
  }

  body:not(#index) .rs2-global-header .search-widgets:focus-within form {
    margin: 0 auto;
    max-width: 40rem;
  }

  .rs2-global-header__mobile-actions {
    gap: .3rem;
  }

  .rs2-global-header__actions .header-block__action-btn,
  .rs2-global-header__mobile-actions .header-block__action-btn,
  .rs2-global-header__icon,
  .rs2-global-menu-toggle {
    height: 40px;
    min-width: 40px;
    width: 40px;
  }

  body:not(#index) .rs2-global-header .rs2-nav {
    top: 94px;
  }
}

@media (max-width: 479.98px) {
  .rs2-global-header__mobile-actions .rs2-theme-toggle {
    display: none;
  }
}

/* Account navigation glyphs: reserve a real column so labels never collide. */
.rs2-account-layout__sidebar .account-menu__icon {
  align-items: center;
  display: inline-flex !important;
  flex: 0 0 1.1rem;
  height: 1.1rem;
  justify-content: center;
  line-height: 1;
  width: 1.1rem;
}

/* ---------- Partage Instagram ---------- */

/* Instagram n'ayant pas d'URL de partage, l'element est un <button> et non un
   <a> : on neutralise les styles par defaut pour qu'il soit indiscernable des
   autres icones de la liste. */
button.ps-sharebuttons__link {
  background: none;
  border: 0;
  /* La feuille de style du navigateur impose `color: buttontext` aux boutons :
     sans cette reprise, l'icone reste gris fonce au lieu de suivre la couleur
     du bloc comme les liens voisins. */
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.ps-sharebuttons__list li {
  position: relative;
}

.ps-sharebuttons__link[data-rs2-confirmation]::after {
  background: var(--rs2-card);
  border: 1px solid var(--rs2-line-strong);
  border-radius: .5rem;
  bottom: calc(100% + .4rem);
  color: var(--rs2-text);
  content: attr(data-rs2-confirmation);
  font-size: .68rem;
  left: 50%;
  padding: .3rem .5rem;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 5;
}

/* ==========================================================================
   Widget natif ps_emailsubscription sur fond sombre
   ==========================================================================
   Le widget arrive avec les classes Bootstrap `bg-body-tertiary` et
   `text-body-secondary`, prevues pour un theme clair. Pose tel quel dans ce
   theme, il produit :
     - un bloc blanc #f8f9fa de pleine largeur au milieu d'une page noire ;
     - un titre gris clair #bfc2c7 sur ce blanc, soit 1,69:1 ;
     - la mention RGPD rgba(33,37,41,.75) sur le fond sombre du pied de page,
       soit 1,27:1 — pratiquement invisible.

   On redefinit les variables de Bootstrap plutot que d'ecraser ses regles en
   !important : `bg-body-tertiary` applique deja son fond en !important, mais
   respecte --bs-bg-opacity. Les couleurs de texte reprennent les jetons du
   theme, qui basculent seuls entre clair et sombre. */

.ps-emailsubscription {
  --bs-bg-opacity: 0;
  --bs-secondary-color: var(--rs2-muted, #bfc2c7);
}

.ps-emailsubscription .h3,
.ps-emailsubscription h3 {
  color: var(--rs2-text, #fff);
}

/* Dans la bande d'appel de l'accueil, le widget remplace un bloc qui portait
   deja son propre cadre : on annule ses marges laterales pour qu'il s'aligne
   sur le texte au-dessus. */
.cta-band .ps-emailsubscription {
  padding-left: 0;
  padding-right: 0;
}

/* Bouton du widget newsletter.
 * Les regles de rs2.css qui l'habillent sont toutes portees par
 * `body:not(#index)` : l'accueil, qui avait son propre formulaire, en etait
 * exclu. Depuis qu'il utilise le widget natif, son bouton restait au rouge
 * clair a 3,86:1. On le rattache ici, sans exclusion de page. */
.ps-emailsubscription button,
.ps-emailsubscription .btn-primary,
.ps-emailsubscription input[type="submit"] {
  background: var(--rs2-red-fill);
  border-color: var(--rs2-red-fill);
  color: #fff;
}

.ps-emailsubscription button:hover,
.ps-emailsubscription .btn-primary:hover,
.ps-emailsubscription input[type="submit"]:hover {
  background: var(--rs2-red-fill-hover);
  border-color: var(--rs2-red-fill-hover);
}

/* ==========================================================================
   Contours de champs et defauts Bootstrap laisses a nu
   ==========================================================================

   Trois defauts releves au balayage du tunnel de commande, tous hors du
   perimetre des audits precedents parce qu'ils demandent un panier rempli :

   1. Le contour des champs de saisie etait du blanc a 12-22 % sur #14161c,
      soit 1,56:1. Le WCAG 1.4.11 exige 3:1 pour la limite visible d'un
      controle de formulaire : les champs et les cases a cocher etaient
      pratiquement invisibles.
   2. L'onglet actif « Commander en tant qu'invite » s'affichait en NOIR sur
      fond noir (1,21:1). Le theme n'avait style que .nav-tabs, or PrestaShop 9
      rend ces onglets en .nav-underline : ils retombaient sur le defaut
      Bootstrap --bs-emphasis-color: #000.
   3. Le lien « Connexion » sortait en bleu Bootstrap #0b69f6, hors charte.

   Specificite : cette feuille est enregistree en 'remote' par rs2home, donc
   servie AVANT le bundle CCC. A egalite de specificite le bundle gagnerait.
   D'ou le prefixe `html` / `html:root`, qui ajoute un poids d'element sans
   recourir a !important. */

html:root {
  /* Blanc a 36 % sur #14161c donne 3,34:1 ; a 52 %, l'etat survol se distingue
     nettement du repos. Les deux restent discrets sur les surfaces sombres. */
  --rs2-field-border: rgb(255 255 255 / 36%);
  --rs2-field-border-hover: rgb(255 255 255 / 52%);

  /* Bootstrap 5.3 laisse ces jetons sur leurs valeurs de theme CLAIR. Le theme
     ne les avait jamais redefinis : tout composant Bootstrap non surcharge
     ressortait en noir ou en bleu. */
  --bs-emphasis-color: var(--rs2-text);
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: var(--rs2-muted);
  --bs-link-color: var(--rs2-red);
  --bs-link-hover-color: var(--rs2-red-hover);

  /* Deux couleurs du tunnel etaient ecrites en dur, donc figees en theme
     clair : la bande des etapes restait noire sous un texte devenu sombre
     (1,02:1) et le vert « Commande securisee » tombait a 1,44:1 sur fond
     clair. */
  --rs2-checkout-band: #111319;
  --rs2-success-text: #7ee2aa;
}

html:root[data-rs2-theme="light"] {
  /* Sur blanc, il faut aller plus loin : 50 % donne 3,52:1. */
  --rs2-field-border: rgb(16 18 27 / 50%);
  --rs2-field-border-hover: rgb(16 18 27 / 68%);

  --bs-emphasis-color-rgb: 20, 21, 26;
  --bs-secondary-color: var(--rs2-muted);
  /* #ff1d1d ne fait que 3,86:1 sur blanc : en theme clair le lien prend le
     rouge fonce, a 6,23:1. */
  --bs-link-color: var(--rs2-red-fill-hover);
  --bs-link-hover-color: var(--rs2-red-fill);

  --rs2-checkout-band: #edeff2;
  /* #7ee2aa ne fait que 1,44:1 sur #f4f5f7. #1a7f4b y passait (4,60:1) mais
     retombait a 4,25:1 sur les pastilles vert pale du panier ; #187045 tient
     5,19:1 sur la pastille et 6,10:1 sur blanc. */
  --rs2-success-text: #187045;

  /* --rs2-subtle valait #767985 en theme clair, soit 4,33:1 sur blanc et
     4,41:1 sur #edeff2 : sous le seuil AA des deux cotes. Le jeton ne sert
     qu'a des couleurs de texte (36 usages, aucun fond ni bordure), l'assombrir
     est donc sans effet de bord. #656873 donne 5,55:1 sur blanc, 5,09:1 sur
     #f4f5f7 et 4,82:1 sur #edeff2. */
  --rs2-subtle: #656873;
}

html .form-control,
html .form-select,
html .form-check-input,
html input,
html select,
html textarea {
  border-color: var(--rs2-field-border);
}

html .form-control:hover,
html .form-select:hover,
html .form-check-input:hover,
html select:hover,
html textarea:hover {
  border-color: var(--rs2-field-border-hover);
}

/* Onglets : .nav-underline est la variante rendue par le tunnel, .nav-pills et
   .nav-tabs sont ajoutees pour que le prochain composant natif ne repasse pas
   par la case noir sur noir. */
html .nav-underline .nav-link,
html .nav-pills .nav-link,
html .nav-tabs .nav-link {
  color: var(--rs2-muted);
}

html .nav-underline .nav-link:hover,
html .nav-underline .nav-link:focus,
html .nav-pills .nav-link:hover,
html .nav-pills .nav-link:focus,
html .nav-tabs .nav-link:hover,
html .nav-tabs .nav-link:focus {
  color: var(--rs2-text);
}

html .nav-underline .nav-link.active,
html .nav-underline .nav-link[aria-selected="true"],
html .nav-pills .nav-link.active,
html .nav-tabs .nav-link.active,
html .nav-tabs .nav-link[aria-selected="true"] {
  color: var(--rs2-text);
}

html .nav-underline .nav-link.active,
html .nav-underline .nav-link[aria-selected="true"] {
  border-bottom-color: var(--rs2-red-fill);
}

/* .nav-pills marque l'onglet actif par un fond plein : le rouge de marque n'y
   passe pas le seuil avec du texte blanc, on prend la variante foncee. */
html .nav-pills .nav-link.active {
  background-color: var(--rs2-red-fill);
}

/* L'icone du panier dans l'en-tete ressortait en bleu Bootstrap #0b69f6 sur
   toutes les pages : le module blockcart la colore avec --bs-primary, jeton
   que le theme n'avait jamais redefini. On ne touche pas a --bs-primary
   lui-meme, qui pilote aussi .btn-primary et les etats de focus : on colore
   l'icone comme ses voisines (compte, recherche). */
html .rs2-global-header__actions .header-block__icon,
html .rs2-global-header__mobile-actions .header-block__icon {
  color: var(--rs2-text);
}

/* ==========================================================================
   Blocs volontairement sombres, en theme clair
   ==========================================================================

   Trois zones gardent un fond noir quel que soit le theme : le pied de page
   (#090a0d), le bloc infolettre (#0b0c10) et le panneau de gauche des pages
   de compte (#0a0b0f). Leurs fonds sont ecrits en dur — souvent en
   !important — mais leur TEXTE utilise --rs2-text, --rs2-muted et
   --rs2-subtle, qui basculent avec le theme. En theme clair on obtenait donc
   du texte sombre sur fond noir : 1,07:1 pour le titre de l'infolettre,
   2,80:1 pour les paragraphes du pied de page.

   Plutot que de reecrire chaque regle, on repique la palette sombre sur ces
   sous-arbres. La liste ci-dessous se recense en theme clair : tout element
   dont le fond effectif reste sombre alors que la page est claire doit y
   figurer, sinon son texte devient illisible. Une redefinition portee par un descendant l'emporte
   toujours sur celle de la racine, quelle que soit sa specificite : chaque
   regle interne recoit donc les bonnes valeurs sans etre touchee. */

html[data-rs2-theme="light"] .footer,
html[data-rs2-theme="light"] .footer__before,
html[data-rs2-theme="light"] .ps-emailsubscription,
html[data-rs2-theme="light"] .rs2-auth-story,
html[data-rs2-theme="light"] .rs2-site-announcement,
html[data-rs2-theme="light"] .rs2-global-header__pro,
html[data-rs2-theme="light"] .rs2-product-flag,
html[data-rs2-theme="light"] .rs2-pdp__media,
html[data-rs2-theme="light"] .rs2-pdp__story-visual,
html[data-rs2-theme="light"] .rs2pro-portal,
html[data-rs2-theme="light"] .rs2pro-denied,
html[data-rs2-theme="light"] .rs2-category-hero,
html[data-rs2-theme="light"] .rs2-stores-page {
  --rs2-text: #ffffff;
  --rs2-muted: #bfc2c7;
  --rs2-subtle: #8b8f96;
  --rs2-bg: #0d0e12;
  --rs2-surface: #14161c;
  --rs2-card: #171a20;
  --rs2-raised: #1b1e25;
  --rs2-red-hover: #ff4545;
  --rs2-on-tint: #ffffff;
  --rs2-line: rgb(255 255 255 / 9%);
  --rs2-line-strong: rgb(255 255 255 / 16%);
  --rs2-field-bg: rgb(255 255 255 / 4%);
  --rs2-field-bg-focus: rgb(255 255 255 / 6%);
  --rs2-field-border: rgb(255 255 255 / 36%);
  --rs2-field-border-hover: rgb(255 255 255 / 52%);
  --rs2-success-text: #7ee2aa;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #bfc2c7;
  --bs-link-color: #ff1d1d;
  --bs-link-hover-color: #ff4545;
}

/* Le champ de l'infolettre gardait --rs2-line-strong (blanc a 16 %, 1,55:1).
   Les regles d'origine sont dans rs2.css, qui part dans le bundle CCC et ne
   peut donc pas etre republie a la demande : on les recouvre ici. */
html body:not(#index) .ps-emailsubscription input[type="email"],
html body:not(#index) .footer__before .ps-emailsubscription input[type="email"] {
  border-color: var(--rs2-field-border);
}

/* L'accueil n'est plus repique en palette sombre en theme clair.
   Le 6 septembre il gardait un fond noir code en dur et on y forcait donc
   --rs2-text en blanc. Depuis la refonte d'apres maquette (7 septembre), il
   a son propre theme clair (home-v3.css, html[data-theme=light]) : le fond
   devenait clair et tous les titres, colores par --rs2-text dans le theme,
   restaient blancs — 1,09:1 sur la page entiere. L'accueil herite donc
   maintenant des jetons clairs de la racine, comme les autres pages. */

/* .rs2-pdp__media a un fond SEMI-transparent (82 %). En theme sombre il se
   compose sur du noir et reste noir ; en theme clair il se compose sur
   #f4f5f7 et remonte a rgb(59,60,66), ou la palette sombre qu'on vient d'y
   repiquer ne passe plus que 3,37:1. On le rend opaque : le panneau se
   comporte alors exactement comme en theme sombre. */
html[data-rs2-theme="light"] .rs2-pdp__media {
  background-color: #12141a;
}

/* Cartes produit en theme clair.
   - La pastille « RS2 · LUNETTES CONNECTEES » a un fond noir a 64 % : pose sur
     une carte blanche il remonte a rgb(97,98,100) et son texte blanc a 76 %
     n'y fait plus que 4,36:1. On l'opacifie, comme le panneau de la fiche
     produit.
   - Le bouton « Ajouter au panier » de la carte est un contour transparent :
     sa couleur vient de --rs2-text, mais une regle !important de .btn-primary
     la repasse en blanc, invisible sur une carte blanche. */
html[data-rs2-theme="light"] body#category .rs2-product-card__technology {
  background: #0b0c10;
}

html[data-rs2-theme="light"] .rs2-product-card .product-miniature__add,
html[data-rs2-theme="light"] .rs2-product-card .product-miniature__details,
html[data-rs2-theme="light"] .rs2-product-card .product-miniature__add-text,
html[data-rs2-theme="light"] .rs2-product-card .product-miniature__details-text {
  color: var(--rs2-text) !important;
}

html[data-rs2-theme="light"] .rs2-product-card .product-miniature__add:hover,
html[data-rs2-theme="light"] .rs2-product-card .product-miniature__details:hover {
  color: #fff !important;
}

/* ==========================================================================
   Defilement lateral parasite sur telephone
   ==========================================================================
   Sous 992 px, la navigation de l'en-tete devient un tiroir hors-ecran :
   position fixed, translateX(100%), opacity 0. Ce decalage de 100 % de la
   largeur agrandit la zone defilable du document — mesure sur un ecran de
   390 px : scrollWidth de 748 px au lieu de 390. Toutes les pages hors accueil
   defilaient donc lateralement, contenu coupe a droite et sensation de page
   cassee au doigt. Retirer le tiroir ramenait le document a 382 px, ce qui
   isole la cause sans ambiguite.

   On clippe l'axe horizontal a la racine. `clip` et non `hidden` : `hidden`
   transforme l'element en conteneur de defilement et casserait le
   `position: sticky` de l'en-tete, alors que `clip` se contente de couper.
   L'animation de glissement du tiroir est preservee.

   La coupe s'applique a toutes les largeurs depuis que l'en-tete de collection
   deborde en pleine largeur : ses marges negatives se calculent en vw, barre de
   defilement comprise, et laisseraient sinon une quinzaine de pixels de
   defilement lateral sur ordinateur. */

html {
  overflow-x: clip;
}


/* L'indicateur d'etape du tunnel n'existe qu'en dessous de 992 px, il avait
   donc echappe a tous les balayages faits sur grand ecran. Deux couleurs
   Bootstrap de theme clair y etaient posees sur la bande sombre du tunnel :
     - .text-success (#188251) sur l'anneau de progression « 1 / 4 » : 3,85:1 ;
     - .text-body-secondary sur « Etape suivante : ... » : 1,14:1, illisible.
   Le second est regle par --bs-secondary-color ci-dessus. Le premier demande
   !important : les utilitaires de couleur de Bootstrap en portent un. */
html .rs2-checkout-page .checkout-steps__mobile .progress-ring,
html .rs2-checkout-page .checkout-steps__mobile .progress-ring__text {
  color: var(--rs2-success-text) !important;
}

/* ==========================================================================
   Police d icones manquante
   ==========================================================================
   Le theme declare @font-face pour « Material Icons » vers
   ../fonts/MaterialIcons-Regular-*.woff2, c est-a-dire
   themes/rs2eyewear/assets/fonts/. Ce dossier est VIDE : les fichiers sont
   restes dans le theme parent. Resultat, document.fonts.check('Material Icons')
   repond false et les cinquante et quelques <i class="material-icons"> du site
   affichent le point de code brut dans Raleway — d ou les coches de travers de
   la page de connexion, le « losange » devant la mention de confidentialite,
   et les icones fantomes du tunnel.

   Une @font-face correcte existait deja en haut de ce fichier, vers le theme
   parent. Le maillon reellement absent etait ailleurs : AUCUNE regle du site
   n applique font-family a .material-icons. Les <i> heritaient donc de Raleway
   et dessinaient le point de code brut.

   On redeclare la police sous un nom PROPRE plutot que de rajouter une
   troisieme « Material Icons » : la declaration cassee du theme parent reste en
   erreur dans la meme famille, ce qui suffit a faire echouer
   document.fonts.check() et perturbe la selection. Un nom distinct isole le
   probleme. `font-display: block` evite d afficher le caractere parasite
   pendant le chargement. */

@font-face {
  font-display: block;
  font-family: "RS2 Icons";
  font-style: normal;
  font-weight: 400;
  src:
    url("/themes/hummingbird/assets/fonts/MaterialIcons-Regular-2d8017489da689caedc1.woff2") format("woff2"),
    url("/themes/hummingbird/assets/fonts/MaterialIcons-Regular-08cefa1bc6566a650da7.woff") format("woff");
}

/* ==========================================================================
   Chiffres alignes sur la ligne de base
   ==========================================================================
   Raleway sort ses chiffres en style ancien : le 2 descend sous la ligne et
   se dessine plus petit. « RS2EYEWEAR » s ecrivait donc partout avec un 2
   tombant, y compris dans le bandeau, le pied de page et l espace client. On
   demande les chiffres alignes, avec la propriete standard et la version
   OpenType pour les navigateurs qui ne suivent que celle-ci. */

html:root {
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

/* Le theme declare bien la police mais n applique JAMAIS font-family a
   .material-icons : la regle n existe nulle part, ni dans le theme parent ni
   dans l enfant. Les <i> heritaient donc de Raleway et dessinaient le point de
   code brut. On pose la regle manquante.

   font-size: inherit et non 24px : plusieurs endroits du theme fixent deja
   leur propre taille, on ne veut rien faire grossir au passage.
   font-feature-settings est remis a "liga" ici, sinon le "lnum" hérité
   ci-dessus desactiverait les ligatures des icones ecrites en toutes lettres. */
.material-icons {
  direction: ltr;
  display: inline-block;
  font-family: "RS2 Icons", "Material Icons";
  font-feature-settings: "liga" 1;
  font-size: inherit;
  font-style: normal;
  font-variant-numeric: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Composants Bootstrap encore sur leurs valeurs de theme clair
   ==========================================================================
   Trois blocs restaient illisibles parce que le theme ne les avait jamais
   surcharges. Ils n apparaissent qu une fois connecte avec une adresse et une
   commande passee, ce qui explique qu ils aient echappe aux balayages
   precedents.

   1. L adresse du tunnel : --bs-body-color (rgb 33,37,41) sur #14161c, soit
      1,17:1 — l adresse de livraison etait invisible au moment de la choisir.
   2. .btn-basic : bouton blanc du theme parent, texte gris clair dessus,
      1,79:1. C est le lien « L adresse de facturation est differente ».
   3. Les tableaux et les alertes de la page de confirmation : le module de
      virement bancaire y affiche ses coordonnees dans une .table, et le theme
      ne definit --bs-table-* que sur les pages compte et produit. Sur la
      confirmation, on obtenait un pave blanc a texte blanc : le client ne
      pouvait pas lire le RIB sur lequel payer. */

html .rs2-checkout-page .address-card__content,
html .rs2-checkout-page address {
  color: var(--rs2-muted);
}

html .btn-basic {
  background: transparent;
  border: 1px solid var(--rs2-field-border);
  color: var(--rs2-text);
}

html .btn-basic:hover,
html .btn-basic:focus-visible {
  background: rgb(255 255 255 / 6%);
  border-color: var(--rs2-field-border-hover);
  color: var(--rs2-text);
}

html:root {
  --bs-table-bg: transparent;
  --bs-table-color: var(--rs2-text);
  --bs-table-striped-bg: rgb(255 255 255 / 3%);
  --bs-table-striped-color: var(--rs2-text);
  --bs-table-border-color: rgb(255 255 255 / 10%);
  --bs-table-hover-bg: rgb(255 255 255 / 5%);
  --bs-table-hover-color: var(--rs2-text);
}

html .table {
  color: var(--rs2-text);
}

html .table > :not(caption) > * > * {
  background-color: transparent;
  box-shadow: none;
  color: var(--rs2-text);
}

/* Les alertes n avaient aucune regle : elles sortaient sur le fond clair de
   Bootstrap. On les repose sur une teinte du theme, la couleur de bordure
   portant a elle seule la nature du message. */
html .alert {
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--rs2-field-border);
  color: var(--rs2-text);
}

html .alert-success { border-color: rgb(24 112 69 / 55%); }
html .alert-info    { border-color: rgb(255 255 255 / 22%); }
html .alert-warning { border-color: rgb(232 179 57 / 55%); }
html .alert-danger  { border-color: rgb(216 22 22 / 60%); }

html .alert a,
html .alert .alert-link {
  color: var(--rs2-red-hover);
}

/* La classe utilitaire .outline du theme parent marque l element actif avec un
   contour bleu (--bs-primary, #0b69f6) : c est ce qui cerclait de bleu la
   vignette selectionnee dans l apercu rapide et sur la fiche produit. On la
   repasse au rouge de marque. */
html .outline,
html .outline--rounded {
  outline-color: var(--rs2-red-fill);
}


/* Largeur de contenu commune a tout le site.
   --rs2-max-width valait 1200 px fixes : sur une fenetre de 1707 le contenu
   n'occupait que 70 % de la largeur, avec de larges bandes vides de chaque
   cote. L'espace client est passe a min(1560px, 94vw) et le rendu a convaincu ;
   on aligne le reste du site sur la meme valeur.

   min() et non une largeur fixe : sous 1660 px c'est 94vw qui s'applique, donc
   une marge proportionnelle a l'ecran plutot qu'un vide fige. Sur mobile ces
   plafonds ne mordent pas, la mise en page telephone est inchangee. */
html:root {
  --rs2-max-width: min(1560px, 94vw);
}

html .container-md {
  max-width: var(--rs2-max-width);
}


/* ==========================================================================
   Bloc infolettre (hors accueil)
   ==========================================================================
   La maquette le pose en carte arrondie, halo rouge a gauche, accroche au
   dessus du titre et enveloppe dans le champ. La bande d'origine occupait
   toute la largeur, sans cadre ni respiration. */

html .rs2-newsletter {
  background: transparent;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

html .rs2-newsletter > .container {
  max-width: var(--rs2-max-width);
}

html .rs2-newsletter > .container > .row {
  align-items: center;
  background:
    radial-gradient(circle at 12% 50%, rgb(255 29 29 / 26%), transparent 42%),
    linear-gradient(105deg, rgb(255 29 29 / 10%), transparent 38%),
    var(--rs2-surface);
  border: 1px solid var(--rs2-line);
  border-radius: 1.4rem;
  margin-inline: 0;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 2.4vw, 2.2rem);
  row-gap: 1.25rem;
}

html .rs2-newsletter__kicker {
  color: var(--rs2-red-hover);
  display: block;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .24em;
  margin-bottom: .55rem;
  text-transform: uppercase;
}

html .rs2-newsletter .h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: .45rem;
}

html .rs2-newsletter__sub {
  color: var(--rs2-muted);
  font-size: .88rem;
  margin-bottom: 0;
}

/* Enveloppe dans le champ : masque SVG plutot qu'une ligature, pour la meme
   raison que le chevron des cartes produit. */
html .rs2-newsletter input[type="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8f96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='m3.4 6.6 8.6 6 8.6-6'/%3E%3C/svg%3E");
  background-position: left .95rem center;
  background-repeat: no-repeat;
  background-size: 1.15rem;
  padding-inline-start: 2.85rem;
}

html[dir="rtl"] .rs2-newsletter input[type="email"] {
  background-position: right .95rem center;
}


/* ==========================================================================
   Bouton de fermeture des modales
   ==========================================================================
   Bootstrap dessine sa croix avec une image de fond noire posee a 50 %
   d'opacite. Sur le fond sombre des modales - l'apercu rapide en particulier -
   elle etait invisible : 1,05:1 contre le panneau.

   On remplace l'image par un masque : la croix prend alors la couleur du
   jeton, qui suit deja le theme et les ilots sombres. En rouge de marque elle
   atteint 5,15:1, bien au-dela des 3:1 demandes pour un element graphique. */
html .btn-close {
  background-color: var(--rs2-red-hover);
  background-image: none;
  border-radius: 50%;
  box-shadow: none;
  height: 40px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.4 2.4l11.2 11.2M13.6 2.4L2.4 13.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 1rem;
  opacity: 1;
  width: 40px;
}

/* Le survol ne peut pas peindre un fond derriere un element deja masque : on
   agrandit la croix, ce qui reste percu comme une reponse au pointeur. */
html .btn-close:hover,
html .btn-close:focus-visible {
  background-color: var(--rs2-red-fill, #d81616);
  mask-size: 1.15rem;
}

html .btn-close:focus-visible {
  outline: 2px solid var(--rs2-red-fill);
  outline-offset: 2px;
}

/* Encart « version de travail » en tete des pages legales (montee 0.7.0) :
   les crochets restent a remplir, le lecteur doit le voir d'un coup d'oeil. */
html .rs2-cms-content .rs2-cms-notice {
  background: rgb(255 29 29 / 8%);
  border: 1px solid rgb(255 29 29 / 35%);
  border-left: 4px solid var(--rs2-red-fill);
  border-radius: var(--rs2-radius-sm, 8px);
  padding: .9rem 1.1rem;
}

html .rs2-cms-content table.table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
}

html .rs2-cms-content table.table th,
html .rs2-cms-content table.table td {
  border-bottom: 1px solid var(--rs2-line);
  padding: .6rem .5rem;
  text-align: left;
  vertical-align: top;
}

/* Bouton « Essayer virtuellement » de la fiche produit. */
html .rs2-pdp__tryon {
  align-items: center;
  border: 1px solid var(--rs2-field-border);
  border-radius: 999px;
  color: var(--rs2-text);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 700;
  gap: .55rem;
  margin-top: .9rem;
  min-height: 44px;
  padding: .55rem 1.2rem;
  text-decoration: none;
}

html .rs2-pdp__tryon:hover {
  border-color: var(--rs2-text);
  color: var(--rs2-text);
}

html .rs2-pdp__tryon svg {
  height: 1.25rem;
  width: 1.25rem;
}

/* En-tete global sur mobile (2026-10-15).
   1. Le pictogramme du panier et du compte peint en ::before date de l'ancien
      en-tete : la nouvelle barre reaffiche l'icone, d'ou deux paniers cote a cote.
   2. Le champ de recherche (59 px) debordait de sa pastille de 40 px et passait
      sous l'icone du compte. */
@media (max-width: 767.98px) {
  .rs2-global-header__mobile-actions #userMenuButton::before,
  .rs2-global-header__mobile-actions .cart-preview .header-block__action-btn::before {
    content: none;
    display: none;
  }

  body:not(#index) .rs2-global-header .search-widgets:not(:focus-within) form {
    overflow: hidden;
    border-radius: 999px;
  }

  body:not(#index) .rs2-global-header .search-widgets input[type="text"] {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
}

/* Champ « Pièce jointe » (formulaire de contact) : le bouton natif restait
   blanc sur le theme sombre. */
html input[type="file"].form-control {
  background-color: var(--rs2-field-bg, #14161d);
  border-color: var(--rs2-field-border, #5a5d68);
  color: var(--rs2-muted, #b9bcc5);
}

html input[type="file"].form-control::file-selector-button {
  background: transparent;
  border: 0;
  border-inline-end: 1px solid var(--rs2-field-border, #5a5d68);
  color: var(--rs2-text, #f7f7f8);
  font-weight: 600;
  margin-inline-end: .9rem;
}

html input[type="file"].form-control:hover:not(:disabled)::file-selector-button {
  background: rgba(255, 255, 255, .06);
}

/* Relecture du parcours (2026-10-15). */

/* Champ de l'infolettre : retrait de 45 px reserve a une icone absente, qui
   tronquait le texte d'exemple sur mobile (« Votre adresse e »). */
html .rs2-newsletter input.form-control {
  font-size: .95rem;
  padding-left: .9rem;
  padding-right: .6rem;
}

/* Cases a cocher : rondes comme les boutons radio « M. / Mme », on les
   prenait pour un choix unique. */
html .form-check-input[type="checkbox"] {
  border-radius: 4px;
}

/* Tableaux des pages legales : sur mobile, les dernieres colonnes sortaient
   de la carte (frais, durees de conservation illisibles). Filets aux couleurs
   du theme au lieu du blanc de Bootstrap. */
html .rs2-cms-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html .rs2-cms-content .table > :not(caption) > * > * {
  border-color: var(--rs2-line, rgba(255, 255, 255, .12));
}

/* « (Economisez 100,00 €) » : seul texte bleu du site. La regle de Bootstrap
   (.text-primary-emphasis, !important) est rangee dans @layer utilities : un
   !important dans une couche passe devant tout !important hors couche, si
   bien qu'un « color: ... !important » ici ne s'appliquait jamais. On
   redefinit la variable qu'elle lit. */
html .product__discount-amount {
  --bs-primary-text-emphasis: #ff4d4d;
}

html[data-rs2-theme="light"] .product__discount-amount {
  --bs-primary-text-emphasis: #c11313;
}

/* Theme clair : pastilles de coloris. Leur contour blanc, prevu pour le
   theme sombre, rendait la pastille « Blanc » invisible sur carte blanche. */
html[data-rs2-theme="light"] .rs2-product-card .product-miniature__variants .color {
  box-shadow: 0 0 0 1px rgb(16 18 27 / 45%);
}

html[data-rs2-theme="light"] body#product .rs2-pdp__buy .input-color__label .color {
  border-color: rgb(16 18 27 / 35%);
}

/* Theme clair : « RS · LUNETTES CONNECTEES » sur la photo (toujours sombre)
   des cartes hors catalogue, ou il n'a pas de pastille de fond : --rs2-subtle
   passe au gris fonce et le texte disparait. */
html[data-rs2-theme="light"] body:not(#category) .rs2-product-card__technology {
  color: #c9ccd2;
}

/* L'ancienne grille du pied de page (home.css, dans le bundle CCC) reste
   servie par les caches : on la neutralise, le contenu est desormais
   .rs2-pied, en fin de feuille. */
html .rs2-footer-brand {
  display: block;
}

/* Trois filets empiles au-dessus de l'infolettre : <footer class="footer">,
   puis ses blocs internes qui portent AUSSI la classe .footer (filet + marge
   haute), puis la section de l'infolettre. On ne garde que celui du <footer>. */
html footer#footer:has(> .footer__before),
html footer#footer > .footer__before {
  border-top: 0;
  padding-top: 0;
}

html footer#footer > .footer__main {
  border-top: 0;
}

html body footer#footer .footer__before .rs2-newsletter.ps-emailsubscription {
  border-top: 0;
}

/* Cartes produit : « Promo ! » doublait « -100,00 € » et recouvrait le
   libelle « Lunettes connectees ». On garde le montant de la remise. */
html .rs2-product-flags:has(.rs2-product-flag--discount) .rs2-product-flag--on-sale {
  display: none;
}

/* Resultats de recherche : meme grille que la collection (category.css
   n'est charge que sur la page categorie). Sur mobile, deux colonnes de
   170 px coupaient le texte et le bouton passait sur trois lignes. */
html body#search .products {
  align-items: stretch;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

html body#search .products > * {
  max-width: none;
  width: auto;
}

@media (max-width: 575.98px) {
  html body#search .products {
    gap: 20px;
    grid-template-columns: 1fr;
  }
}

/* Panier vide : le titre dit deja « Votre panier est vide », on retire la
   phrase PrestaShop « Il n'y a plus d'articles… » et ses deux filets. */
html .rs2-cart-page__empty .cart-overview:has(.cart__empty) {
  display: none;
}

html .rs2-cart-page__cta {
  margin-top: 1rem;
}

/* Recherche sans resultat : champ pour relancer une recherche. */
html .rs2-empty-search {
  display: flex;
  gap: .6rem;
  margin: 1.2rem auto 1.4rem;
  max-width: 28rem;
}

html .rs2-empty-search .form-control {
  background: var(--rs2-field-bg, #14161d);
  border: 1px solid var(--rs2-field-border, #5a5d68);
  border-radius: 999px;
  color: var(--rs2-text, #f7f7f8);
  padding-inline: 1.1rem;
}

html .rs2-empty-search .btn {
  border-radius: 999px;
  flex: 0 0 auto;
}

/* Suivi de commande invite : champs de 1300 px et exemple PrestaShop
   « QIIXJXNUI ». Formulaire resserre en carte, exemple retire (la reference
   figure dans l'e-mail de confirmation). */
html #guestOrderTrackingForm {
  background: var(--rs2-surface, #14161d);
  border: 1px solid var(--rs2-line, rgba(255, 255, 255, .12));
  border-radius: 18px;
  margin: 0 auto;
  max-width: 32rem;
  padding: clamp(1.25rem, 4vw, 2rem);
}

html #guestOrderTrackingForm input[name="order_reference"] + .form-text {
  display: none;
}

html #guestOrderTrackingForm .buttons-wrapper .btn {
  width: 100%;
}

/* Pied des formulaires (<footer class="buttons-wrapper">) : la regle du
   theme qui peint toutes les <footer> y posait une barre noire derriere
   « Envoyer le message ». */
html form footer.buttons-wrapper {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Poignee de redimensionnement des zones de texte : verticale seulement. */
html textarea.form-control {
  resize: vertical;
}

/* Encadre des garanties legales (CGV, article 7, mentions de l'article
   D.211-2 du Code de la consommation). */
html .rs2-cms-content .rs2-cms-legal-box {
  background: rgb(255 255 255 / 3%);
  border: 1px solid var(--rs2-line, rgba(255, 255, 255, .12));
  border-left: 3px solid var(--rs2-red, #ff1d1d);
  border-radius: 12px;
  margin: 1.2rem 0;
  padding: 1.1rem 1.3rem;
}

html .rs2-cms-content .rs2-cms-legal-box p:last-child {
  margin-bottom: 0;
}

/* Mention d'information RGPD sous les formulaires de compte et de contact. */
.rs2-form-mention {
  color: var(--rs2-muted);
  font-size: .82rem;
  line-height: 1.55;
  margin: .75rem 0 0;
}

.rs2-form-mention a {
  color: inherit;
  text-decoration: underline;
}

.rs2-form-mention a:hover,
.rs2-form-mention a:focus-visible {
  color: var(--rs2-red-hover);
}

/* ---------- Bouton retour en haut ---------- */
.rs2-retour-haut {
  align-items: center;
  background: var(--rs2-red-fill, #d81616);
  border: 0;
  border-radius: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  box-shadow: 0 10px 28px rgb(0 0 0 / 35%);
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  transform: translateY(1rem);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
  width: 48px;
  z-index: 100;
}

.rs2-retour-haut.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.rs2-retour-haut:hover {
  background: #c11313;
}

.rs2-retour-haut:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.rs2-retour-haut svg {
  height: 22px;
  width: 22px;
}

body.rs2-menu-open .rs2-retour-haut {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .rs2-retour-haut {
    transition: none;
  }
}

/* ---------- Pied de page (modele Apple) ----------
   Gabarit : modules/rs2home/views/templates/hook/_pied-de-page.tpl, commun a
   l'accueil et aux autres pages. Petits liens en colonnes sur ordinateur,
   rubriques en accordeon sous 834 px (interface.js pose .is-accordeon). */
html .rs2-pied {
  --pied-text: var(--rs2-text);
  --pied-muted: var(--rs2-muted);
  --pied-subtle: var(--rs2-subtle);
  --pied-line: var(--rs2-line-strong);
  color: var(--pied-muted);
  font-size: .78rem;
  line-height: 1.45;
  padding-block: .25rem .5rem;
}

/* L'accueil a sa propre palette (home-v3.css). */
html body#index .rs2-pied {
  --pied-text: var(--txt);
  --pied-muted: var(--txt-2);
  --pied-subtle: var(--txt-3);
  --pied-line: var(--line);
}

html body#index footer:has(.rs2-pied) {
  padding: 2rem 0 1.5rem;
}

/* body:not(#index) / body#index : passer devant « body:not(#index) .footer a »
   de rs2.css (bundle), qui peint tous les liens du pied en blanc. */
html body:not(#index) .rs2-pied a,
html body#index .rs2-pied a {
  color: var(--pied-muted);
  text-decoration: none;
}

html body:not(#index) .rs2-pied a:hover,
html body:not(#index) .rs2-pied a:focus-visible,
html body#index .rs2-pied a:hover,
html body#index .rs2-pied a:focus-visible {
  color: var(--pied-text);
  text-decoration: underline;
}

html .rs2-pied__logo {
  display: inline-block;
  margin-bottom: 1rem;
}

html .rs2-pied__logo img {
  display: block;
  height: 24px;
  width: auto;
}

html .rs2-pied__rubriques {
  border-top: 1px solid var(--pied-line);
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 1.4rem;
}

html .rs2-pied__titre {
  color: var(--pied-text);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.45;
  margin: 0 0 .7rem;
  text-transform: none;
}

html .rs2-pied__titre button {
  background: none;
  border: 0;
  color: inherit;
  cursor: default;
  font: inherit;
  padding: 0;
  pointer-events: none;
  text-align: left;
}

html .rs2-pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

html .rs2-pied__rubrique li + li {
  margin-top: .55rem;
}

html .rs2-pied__note {
  border-top: 1px solid var(--pied-line);
  margin: 1.6rem 0 0;
  padding-top: 1rem;
}

html body:not(#index) .rs2-pied__note a,
html body#index .rs2-pied__note a {
  color: var(--rs2-red-hover, #ff4545);
}

html .rs2-pied__bas {
  align-items: baseline;
  border-top: 1px solid var(--pied-line);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: 1rem;
  padding-top: 1rem;
}

html .rs2-pied__bas p {
  margin: 0;
}

html .rs2-pied__legal {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

html .rs2-pied__legal li {
  white-space: nowrap;
}

html body .rs2-pied .rs2-pied__legal li + li::before {
  color: var(--pied-subtle);
  content: "|";
  margin-inline: .6rem;
}

html .rs2-pied__pays {
  color: var(--pied-text);
  margin-left: auto !important;
}

@media (max-width: 833.98px) {
  html .rs2-pied__rubriques {
    border-top: 0;
    display: block;
    padding-top: 0;
  }

  html .rs2-pied__rubrique {
    border-bottom: 1px solid var(--pied-line);
  }

  html .rs2-pied__rubriques .rs2-pied__rubrique:first-child {
    border-top: 1px solid var(--pied-line);
  }

  html .rs2-pied__titre {
    margin: 0;
  }

  html .rs2-pied__titre button {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: .9rem;
    font-weight: 500;
    justify-content: space-between;
    min-height: 44px;
    pointer-events: auto;
    width: 100%;
  }

  html .rs2-pied__titre button::after {
    border-bottom: 1.5px solid var(--pied-muted);
    border-right: 1.5px solid var(--pied-muted);
    content: "";
    height: .5rem;
    margin-right: .3rem;
    transform: translateY(-25%) rotate(45deg);
    transition: transform .25s ease;
    width: .5rem;
  }

  html .rs2-pied__titre button[aria-expanded="true"]::after {
    transform: translateY(25%) rotate(-135deg);
  }

  html .rs2-pied__rubrique ul {
    font-size: .85rem;
    padding: 0 0 1rem .9rem;
  }

  html .rs2-pied__rubrique li + li {
    margin-top: .7rem;
  }

  html .rs2-pied.is-accordeon .rs2-pied__titre:has(button[aria-expanded="false"]) + ul {
    display: none;
  }

  html .rs2-pied__note {
    border-top: 0;
    margin-top: 1rem;
    padding-top: 0;
  }

  html .rs2-pied__bas {
    flex-direction: column;
    gap: .6rem;
  }

  html .rs2-pied__legal {
    gap: .45rem 1.1rem;
  }

  html body .rs2-pied .rs2-pied__legal li + li::before {
    content: none;
  }

  html .rs2-pied__pays {
    margin-left: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .rs2-pied__titre button::after {
    transition: none;
  }
}

/* ---------- Panier : prix barre et remise ----------
   Le prix barre etait en rgba(33,37,41,.65) : 1,08:1 sur la carte sombre.
   La pastille de remise utilisait .bg-primary (bleu Bootstrap) ; ses regles
   sont dans @layer utilities, on redefinit donc la variable qu'elles lisent. */
html body .product-line__item-regular-price {
  color: var(--rs2-muted);
}

html .product-line__item-discount.badge {
  --bs-primary-rgb: 216, 22, 22;
  color: #fff;
}

/* Boutons radio coches (verres de la fiche produit, livraison...) : le point
   blanc se posait sur un fond blanc en theme clair, le choix ne se voyait
   pas. Fond rouge plein, comme le reste des selections du site. */
html body .form-check-input[type="radio"]:checked {
  background-color: var(--rs2-red-fill, #d81616);
  border-color: var(--rs2-red-fill, #d81616);
}