/* RS2EYEWEAR — pop-up de l'offre de lancement (199 EUR TTC, fin 2026).
 *
 * Chargee sur toutes les pages tant que l'offre court : elle ne s'appuie donc
 * que sur les jetons globaux du theme (rs2.css, palette.css), jamais sur ceux
 * de home-v3.css qui n'existent que sur l'accueil.
 */

.rs2-promo {
  --promo-red: var(--rs2-red, #ff1d1d);
  --promo-red-fill: var(--rs2-red-strong, #d81616);
  --promo-glow: rgb(255 29 29 / 45%);
  --promo-card: var(--rs2-card, #171a20);
  --promo-text: var(--rs2-text, #ffffff);
  --promo-muted: var(--rs2-muted, #bfc2c7);
  --promo-line: var(--rs2-line-strong, rgb(255 255 255 / 16%));
  --promo-ease: var(--rs2-ease, cubic-bezier(.22, 1, .36, 1));

  width: min(460px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--promo-text);
  font-family: Raleway, Inter, "Segoe UI", sans-serif;
  /* Raleway dessine par defaut des chiffres elzeviriens (« 2gg € ») : les
     prix passent en chiffres alignes, comme dans components.css. */
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

.rs2-promo::backdrop {
  background:
    radial-gradient(circle at 50% 40%, rgb(255 29 29 / 22%), transparent 60%),
    rgb(5 6 9 / 78%);
  backdrop-filter: blur(6px);
}

/* Liseré rouge anime autour de la carte : un degrade conique qui tourne
   derriere un fond plein, d'ou un contour lumineux de 1px. */
.rs2-promo__carte {
  position: relative;
  /* Jamais de defilement : le degrade conique du liseré deborde de 40 %
     autour de la carte, et un overflow: auto en faisait du contenu a
     defiler (barre de defilement parasite). Les petits ecrans passent par
     la mise en page compacte en bas de fichier. */
  overflow: hidden;
  border-radius: var(--rs2-radius-lg, 28px);
  background: var(--promo-card);
  box-shadow:
    0 0 0 1px var(--promo-line),
    0 30px 90px -20px var(--promo-glow),
    0 40px 100px rgb(0 0 0 / 55%);
  isolation: isolate;
}

.rs2-promo__carte::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -2;
  background: conic-gradient(from var(--promo-angle, 0deg), transparent 0 62%, var(--promo-red) 78%, #ffb347 84%, transparent 92%);
  animation: rs2-promo-tour 6s linear infinite;
}

.rs2-promo__carte::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--rs2-radius-lg, 28px) - 1px);
  background:
    radial-gradient(120% 60% at 50% 100%, rgb(255 29 29 / 16%), transparent 70%),
    var(--promo-card);
}

@property --promo-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes rs2-promo-tour {
  to { --promo-angle: 360deg; }
}

/* ---- Visuel ---------------------------------------------------------- */

.rs2-promo__visuel {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  margin: 1px 1px 0;
  border-radius: calc(var(--rs2-radius-lg, 28px) - 1px) calc(var(--rs2-radius-lg, 28px) - 1px) 0 0;
  background: #0b0b0e;
}

.rs2-promo__visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: rs2-promo-zoom 1.4s var(--promo-ease) both;
}

/* Fondu vers la carte, pour que la photo se fonde dans le corps. */
.rs2-promo__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--promo-card) 100%);
  pointer-events: none;
}

/* Eclat de lumiere qui balaie les verres miroir. */
.rs2-promo__reflet {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 38%) 48%, rgb(255 220 160 / 22%) 52%, transparent 62%);
  mix-blend-mode: screen;
  transform: translateX(-110%);
  animation: rs2-promo-reflet 4.5s 0.9s var(--promo-ease) infinite;
  pointer-events: none;
}

@keyframes rs2-promo-zoom {
  from { transform: scale(1.18); opacity: 0; }
  to { transform: scale(1.06); opacity: 1; }
}

@keyframes rs2-promo-reflet {
  0% { transform: translateX(-110%); }
  45%, 100% { transform: translateX(110%); }
}

.rs2-promo__pastille {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: .42rem .85rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 100px;
  background: rgb(10 11 14 / 62%);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rs2-promo__fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  background: rgb(10 11 14 / 62%);
  backdrop-filter: blur(8px);
  color: #ffffff;
  cursor: pointer;
  transition: background .25s, transform .25s var(--promo-ease);
}

.rs2-promo__fermer svg {
  width: 18px;
  height: 18px;
}

.rs2-promo__fermer:hover {
  background: var(--promo-red-fill);
  transform: rotate(90deg);
}

/* ---- Corps ----------------------------------------------------------- */

.rs2-promo__corps {
  position: relative;
  z-index: 1;
  margin-top: -28px;
  padding: 0 28px 26px;
  text-align: center;
}

.rs2-promo__surtitre {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .55rem;
  color: var(--rs2-red-hover, #ff4545);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.rs2-promo__surtitre::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--promo-red);
  box-shadow: 0 0 0 0 var(--promo-glow);
  animation: rs2-promo-pouls 1.8s infinite;
}

@keyframes rs2-promo-pouls {
  0% { box-shadow: 0 0 0 0 var(--promo-glow); }
  70%, 100% { box-shadow: 0 0 0 9px rgb(255 29 29 / 0%); }
}

.rs2-promo__titre {
  margin: 0;
  color: var(--promo-text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* Le prix : chiffre geant en degrade blanc vers rouge, avec un reflet qui
   le traverse comme sur les verres. */
.rs2-promo__prix {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .3rem;
  margin-top: .15rem;
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 30%, #ffd0c4 45%, var(--promo-red) 62%, #ff7a2f 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(3.6rem, 16vw, 4.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  filter: drop-shadow(0 6px 26px rgb(255 29 29 / 45%));
  animation: rs2-promo-brillance 5s ease-in-out infinite;
}

.rs2-promo__prix small {
  margin-top: .55em;
  font-size: .2em;
  font-weight: 800;
  letter-spacing: .12em;
  -webkit-text-fill-color: var(--promo-muted);
}

@keyframes rs2-promo-brillance {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

.rs2-promo__texte {
  max-width: 34ch;
  margin: .8rem auto 0;
  color: var(--promo-muted);
  font-size: .92rem;
  line-height: 1.55;
}

.rs2-promo__modeles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.rs2-promo__modeles li {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .42rem .8rem;
  border: 1px solid var(--promo-line);
  border-radius: 100px;
  background: rgb(255 255 255 / 4%);
  font-size: .78rem;
}

.rs2-promo__modeles span {
  font-weight: 800;
  letter-spacing: .04em;
}

.rs2-promo__modeles s {
  color: var(--promo-muted);
  text-decoration-color: var(--promo-red);
  text-decoration-thickness: 2px;
}

.rs2-promo__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  overflow: hidden;
  margin-top: 1.35rem;
  padding: 1rem 1.6rem;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--promo-red-fill), #b01010);
  box-shadow: 0 10px 34px -8px var(--promo-glow);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .3s var(--promo-ease), box-shadow .3s var(--promo-ease);
}

.rs2-promo__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 30%) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: rs2-promo-reflet 4.5s 2.2s var(--promo-ease) infinite;
}

.rs2-promo__cta svg {
  width: 18px;
  height: 18px;
  transition: transform .3s var(--promo-ease);
}

.rs2-promo__cta:hover,
.rs2-promo__cta:focus-visible {
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 16px 44px -8px var(--promo-glow);
}

.rs2-promo__cta:hover svg {
  transform: translateX(4px);
}

.rs2-promo__plus-tard {
  margin-top: .7rem;
  padding: .4rem .8rem;
  border: 0;
  background: none;
  color: var(--promo-muted);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rs2-promo__plus-tard:hover {
  color: var(--promo-text);
}

.rs2-promo :focus-visible {
  outline: 2px solid var(--promo-red);
  outline-offset: 3px;
}

/* rs2.css pose border-radius: 4px sur tout :focus-visible, et le bouton
   d'action recoit le focus a l'ouverture : sans ces regles plus specifiques,
   la pilule et la croix ronde devenaient des rectangles en production. */
.rs2-promo .rs2-promo__cta {
  border-radius: 100px;
}

.rs2-promo .rs2-promo__fermer {
  border-radius: 50%;
}

/* ---- Ouverture ------------------------------------------------------- */

.rs2-promo[open] {
  animation: rs2-promo-entree .6s var(--promo-ease) both;
}

.rs2-promo[open]::backdrop {
  animation: rs2-promo-fondu .4s ease both;
}

@keyframes rs2-promo-entree {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to { opacity: 1; transform: none; }
}

@keyframes rs2-promo-fondu {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Theme clair : la photo reste sombre, la carte s'eclaircit. ------ */

html[data-rs2-theme="light"] .rs2-promo {
  --promo-glow: rgb(216 22 22 / 32%);
}

html[data-rs2-theme="light"] .rs2-promo::backdrop {
  background:
    radial-gradient(circle at 50% 40%, rgb(255 29 29 / 14%), transparent 60%),
    rgb(20 21 26 / 55%);
}

html[data-rs2-theme="light"] .rs2-promo__surtitre {
  color: var(--promo-red-fill);
}

html[data-rs2-theme="light"] .rs2-promo__prix {
  background-image: linear-gradient(100deg, #14151a 0%, #14151a 30%, #6b1a1a 45%, var(--promo-red-fill) 62%, #e0461a 100%);
  filter: drop-shadow(0 6px 22px rgb(216 22 22 / 22%));
}

html[data-rs2-theme="light"] .rs2-promo__modeles li {
  background: rgb(16 18 27 / 3%);
}

/* ---- Petits ecrans --------------------------------------------------- */

@media (max-width: 420px) {
  .rs2-promo__corps {
    padding: 0 20px 22px;
  }

  .rs2-promo__modeles li {
    padding: .38rem .65rem;
    font-size: .74rem;
  }
}

/* Ecrans peu hauts (mobile a l'horizontale, petits portables) : visuel
   plus panoramique et prix reduit, pour que tout tienne sans defiler. */
@media (max-height: 700px) {
  .rs2-promo__visuel {
    aspect-ratio: 3 / 1;
  }

  .rs2-promo__visuel img {
    object-position: 50% 40%;
  }

  .rs2-promo__corps {
    margin-top: -18px;
    padding-bottom: 16px;
  }

  .rs2-promo__prix {
    font-size: clamp(3rem, 12vh, 4rem);
  }

  .rs2-promo__texte {
    margin-top: .5rem;
    font-size: .86rem;
    line-height: 1.45;
  }

  .rs2-promo__modeles {
    margin-top: .75rem;
  }

  .rs2-promo__cta {
    margin-top: .9rem;
    padding: .85rem 1.4rem;
  }

  .rs2-promo__plus-tard {
    margin-top: .35rem;
  }
}

@media (max-height: 560px) {
  .rs2-promo__texte {
    display: none;
  }
}

/* Telephone a l'horizontale : bandeau photo tres panoramique, les pastilles
   de modeles cedent leur place (le titre dit deja « toute la gamme »). */
@media (max-height: 440px) {
  .rs2-promo__visuel {
    aspect-ratio: 4 / 1;
  }

  .rs2-promo__prix {
    font-size: 2.8rem;
  }

  .rs2-promo__modeles {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs2-promo *,
  .rs2-promo *::before,
  .rs2-promo *::after,
  .rs2-promo[open],
  .rs2-promo[open]::backdrop,
  .rs2-promo__carte::before {
    animation: none !important;
    transition: none !important;
  }

  .rs2-promo__reflet {
    display: none;
  }
}