/* RS2EYEWEAR — authentication and customer account experience. */

:where(
  #authentication,
  #registration,
  #password,
  #my-account,
  #identity,
  #addresses,
  #address,
  #history,
  #order-detail,
  #order-slip,
  #discount,
  #order-follow,
  #order-return,
  #guest-tracking
) .wrapper {
  background:
    radial-gradient(circle at 82% 8%, rgb(255 29 29 / 8%), transparent 30rem),
    linear-gradient(180deg, #0b0c10 0%, var(--rs2-bg) 100%);
  min-height: calc(100vh - 150px);
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 5rem);
  position: relative;
}

:where(
  #authentication,
  #registration,
  #password,
  #my-account,
  #identity,
  #addresses,
  #address,
  #history,
  #order-detail,
  #order-slip,
  #discount,
  #order-follow,
  #order-return,
  #guest-tracking
) .wrapper::before {
  background-image: linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  pointer-events: none;
  position: absolute;
}

.rs2-auth-container,
/* Mesure comparative avec la maquette : elle occupe 92 % de la largeur de la
   fenetre, l'espace client n'en prenait que 73 % (1240 px de contenu sur une
   fenetre de 1707). D'ou l'impression de page etriquee, avec de larges bandes
   vides de chaque cote alors que les tuiles, elles, manquaient de place.
   Le plafond monte a 1560 px et la marge laterale suit la fenetre. */
.rs2-account-container {
  max-width: min(1560px, 94vw);
  padding-inline: clamp(1rem, 2.4vw, 2.25rem);
  position: relative;
  z-index: 1;
}

.rs2-auth-container .page-content,
.rs2-auth-container .page-footer,
.rs2-account-container .page-content {
  margin: 0;
}

.rs2-auth-shell {
  background: #111318;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 40px 100px rgb(0 0 0 / 45%);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(25rem, 1fr);
  min-height: 660px;
  overflow: hidden;
}

.rs2-auth-story {
  background:
    linear-gradient(145deg, rgb(255 29 29 / 12%), transparent 42%),
    radial-gradient(circle at 94% 90%, rgb(255 29 29 / 22%), transparent 40%),
    #0a0b0f;
  border-right: 1px solid rgb(255 255 255 / 9%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4rem);
  position: relative;
}

.rs2-auth-story::before,
.rs2-auth-story::after {
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 50%;
  content: "";
  height: 25rem;
  pointer-events: none;
  position: absolute;
  right: -12rem;
  top: 15%;
  width: 25rem;
}

.rs2-auth-story::after {
  border-color: rgb(255 29 29 / 20%);
  height: 18rem;
  right: -8.5rem;
  top: calc(15% + 3.5rem);
  width: 18rem;
}

/* Meme correction que dans le tunnel : les pages de connexion, d'inscription et
   de mot de passe oublie affichaient un mot-symbole en texte, en italique et
   avec un interlettrage qui n'existent nulle part ailleurs sur le site.
   Au passage, .rs2-auth-brand__name imposait color: #fff en dur, illisible
   des que le theme clair etait actif. */
.rs2-auth-brand {
  align-items: center;
  display: inline-flex;
  position: relative;
  text-decoration: none;
  width: fit-content;
  z-index: 2;
}

.rs2-auth-brand__logo {
  display: block;
  filter: drop-shadow(0 4px 14px rgb(255 29 29 / 20%));
  height: 46px;
  object-fit: contain;
  width: auto;
}

.rs2-auth-story__content {
  margin-block: auto;
  max-width: 30rem;
  padding-block: 4rem 2.5rem;
  position: relative;
  z-index: 2;
}

.rs2-auth-kicker,
.rs2-account-eyebrow {
  color: var(--rs2-red-hover);
  display: block;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .2em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.rs2-auth-display {
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .98;
  margin: 0;
}

.rs2-auth-display em {
  color: var(--rs2-red);
  font-style: normal;
}

.rs2-auth-copy {
  color: #aeb1ba;
  font-size: .98rem;
  line-height: 1.75;
  margin: 1.75rem 0 0;
  max-width: 26rem;
}

.rs2-auth-benefits,
.rs2-auth-steps {
  display: grid;
  gap: .85rem;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

.rs2-auth-benefits li {
  align-items: center;
  color: #c8cad0;
  display: flex;
  font-size: .84rem;
  gap: .7rem;
}

.rs2-auth-benefits .material-icons {
  color: var(--rs2-red);
  font-size: 1rem;
}

.rs2-auth-steps li {
  align-items: center;
  display: flex;
  gap: .9rem;
}

.rs2-auth-steps > li > span {
  align-items: center;
  background: rgb(255 29 29 / 10%);
  border: 1px solid rgb(255 29 29 / 28%);
  border-radius: 50%;
  color: var(--rs2-red-hover);
  display: flex;
  flex: 0 0 2.4rem;
  font-size: .67rem;
  font-weight: 900;
  height: 2.4rem;
  justify-content: center;
}

.rs2-auth-steps div {
  display: grid;
  gap: .05rem;
}

.rs2-auth-steps strong {
  color: #fff;
  font-size: .86rem;
}

.rs2-auth-steps small {
  color: #858993;
  font-size: .72rem;
}

.rs2-auth-card {
  align-self: center;
  padding: clamp(2.25rem, 5vw, 5rem);
}

.rs2-auth-card--register {
  padding-block: 3rem;
}

.rs2-auth-card__header {
  background: transparent;
  margin-bottom: 2.25rem;
}

.rs2-auth-card__header h1 {
  color: var(--rs2-text);
  font-size: clamp(2rem, 4vw, 3.15rem);
  letter-spacing: -.055em;
  line-height: 1.02;
  margin: 0;
}

.rs2-auth-card__header p {
  color: var(--rs2-muted);
  line-height: 1.65;
  margin: .9rem 0 0;
}

.rs2-native-form .form-label {
  color: var(--rs2-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: .55rem;
  text-transform: uppercase;
}

.rs2-native-form .form-label.required::after {
  color: var(--rs2-red);
}

.rs2-native-form .form-control,
.rs2-native-form .form-select {
  background: var(--rs2-field-bg);
  border: 1px solid var(--rs2-field-border);
  border-radius: .9rem;
  color: var(--rs2-text);
  min-height: 3.4rem;
  padding: .8rem 1rem;
}

.rs2-native-form .form-control:hover,
.rs2-native-form .form-select:hover {
  border-color: var(--rs2-field-border-hover);
}

.rs2-native-form .form-control:focus,
.rs2-native-form .form-select:focus {
  background: var(--rs2-field-bg-focus);
  border-color: var(--rs2-red);
  box-shadow: 0 0 0 .22rem rgb(255 29 29 / 13%);
}

.rs2-native-form .input-group > .form-control {
  border-radius: .9rem 0 0 .9rem;
}

.rs2-native-form .password-field .btn {
  border-radius: 0 .9rem .9rem 0;
  min-width: 3.6rem;
  position: relative;
}

.rs2-native-form .password-field .btn .material-icons {
  display: none;
}

.rs2-native-form .password-field .btn::before {
  border: 2px solid currentcolor;
  border-radius: 70% 20%;
  content: "";
  height: .82rem;
  transform: rotate(45deg);
  width: .82rem;
}

.rs2-native-form .password-field .btn::after {
  background: currentcolor;
  border-radius: 50%;
  content: "";
  height: .28rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: .28rem;
}

.rs2-native-form .mb-3 {
  margin-bottom: 1.15rem !important;
}

.rs2-native-form .form-check {
  align-items: flex-start;
  display: flex;
  gap: .65rem;
}

.rs2-native-form .form-check-input {
  border-color: var(--rs2-field-border-hover);
  flex: 0 0 auto;
  margin: .2rem 0 0;
}

.rs2-native-form .form-check-input:checked {
  background-color: var(--rs2-red);
  border-color: var(--rs2-red);
}

.rs2-native-form .form-check-label,
.rs2-native-form .form-text {
  color: var(--rs2-subtle);
  font-size: .78rem;
  line-height: 1.55;
}

.rs2-native-form .buttons-wrapper {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.rs2-native-form .buttons-wrapper .btn-primary,
.rs2-native-form .form-control-submit,
.rs2-recovery-primary {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 3.35rem;
  padding-inline: 1.7rem;
}

.rs2-native-form .buttons-wrapper .btn-basic {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--rs2-muted);
  font-size: .8rem;
  padding-inline: 0;
  text-decoration: none;
}

.rs2-native-form .buttons-wrapper .btn-basic:hover {
  color: var(--rs2-red-hover);
  transform: none;
}

.rs2-auth-switch {
  align-items: center;
  border-top: 1px solid rgb(255 255 255 / 8%);
  color: var(--rs2-subtle);
  display: flex;
  font-size: .83rem;
  gap: .8rem;
  justify-content: space-between;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
}

.rs2-auth-switch a {
  align-items: center;
  color: var(--rs2-text);
  display: inline-flex;
  font-weight: 800;
  gap: .35rem;
  text-decoration: none;
}

.rs2-auth-switch a:hover,
.rs2-auth-switch a:hover .material-icons {
  color: var(--rs2-red-hover);
}

.rs2-auth-switch .material-icons {
  font-size: 1rem;
  transition: transform .2s ease;
}

.rs2-auth-switch a:hover .material-icons {
  transform: translateX(.2rem);
}

.rs2-auth-reassurance {
  align-items: center;
  color: var(--rs2-subtle);
  display: flex;
  font-size: .7rem;
  gap: .4rem;
  margin: 1.3rem 0 0;
}

.rs2-auth-reassurance .material-icons {
  font-size: .85rem;
}

.rs2-auth-benefits .material-icons {
  font-size: 1rem;
}

.rs2-auth-card .alert,
.rs2-recovery-shell .alert,
.rs2-account-panel .alert {
  border-radius: 1rem;
}

.rs2-auth-card .alert-danger,
.rs2-recovery-shell .alert-danger,
.rs2-account-panel .alert-danger {
  background: rgb(218 42 42 / 10%);
  border-color: rgb(255 74 74 / 24%);
  color: #ffb7b7;
}

.rs2-auth-card .alert-success,
.rs2-recovery-shell .alert-success,
.rs2-account-panel .alert-success {
  background: rgb(39 180 112 / 10%);
  border-color: rgb(79 218 148 / 25%);
  color: #a8ebc9;
}

/* Password recovery */
.rs2-recovery-shell {
  background:
    radial-gradient(circle at 50% 0%, rgb(255 29 29 / 13%), transparent 20rem),
    #111318;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: 0 40px 100px rgb(0 0 0 / 45%);
  margin-inline: auto;
  max-width: 42rem;
  padding: clamp(2rem, 6vw, 4.5rem);
  text-align: center;
}

.rs2-recovery-brand {
  margin: 0 auto 2.5rem;
}

.rs2-recovery-icon {
  align-items: center;
  background: rgb(255 29 29 / 10%);
  border: 1px solid rgb(255 29 29 / 28%);
  border-radius: 50%;
  color: var(--rs2-red-hover);
  display: flex;
  height: 4.6rem;
  justify-content: center;
  margin: 0 auto 1.6rem;
  width: 4.6rem;
}

.rs2-recovery-icon::after {
  border: 1px solid rgb(255 29 29 / 12%);
  border-radius: 50%;
  content: "";
  height: 6.3rem;
  position: absolute;
  width: 6.3rem;
}

.rs2-recovery-icon .material-icons {
  font-size: 1.45rem;
}

.rs2-recovery-icon--success {
  background: rgb(39 180 112 / 10%);
  border-color: rgb(79 218 148 / 28%);
  color: #4fda94;
}

.rs2-recovery-icon--success::after {
  border-color: rgb(79 218 148 / 12%);
}

.rs2-recovery-heading {
  background: transparent;
  margin-bottom: 2rem;
}

.rs2-recovery-heading p {
  margin-inline: auto;
  max-width: 32rem;
}

.rs2-recovery-shell .rs2-native-form {
  margin-inline: auto;
  max-width: 28rem;
  text-align: left;
}

.rs2-recovery-shell .buttons-wrapper,
.rs2-recovery-shell .rs2-recovery-primary {
  width: 100%;
}

.rs2-recovery-shell .rs2-recovery-primary {
  gap: .45rem;
  margin-top: 1rem;
}

.rs2-recovery-primary .material-icons,
#send-reset-link .material-icons {
  font-size: 1rem;
}

.rs2-recovery-back {
  justify-content: center;
  margin: 1.6rem auto 0;
  width: fit-content;
}

.rs2-recovery-email {
  align-items: center;
  background: rgb(255 255 255 / 3%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: .9rem;
  color: var(--rs2-muted);
  display: flex;
  font-size: .8rem;
  gap: .55rem;
  margin-bottom: 1.25rem;
  padding: .9rem 1rem;
}

.rs2-recovery-email .material-icons {
  color: var(--rs2-red-hover);
  font-size: 1.1rem;
}

/* Customer area shell */
/* Proportions de la maquette : colonne a 21,5 % du contenu, gouttiere de
   24 px, principal a 76,5 %. La colonne passe donc de 17 a 19,5rem et la
   gouttiere se resserre — la largeur gagnee doit aller au contenu, pas au
   vide entre les deux. */
.rs2-account-layout {
  display: grid;
  gap: clamp(1.25rem, 1.8vw, 1.9rem);
  grid-template-columns: minmax(15.5rem, 19.5rem) minmax(0, 1fr);
}

.rs2-account-layout__sidebar .account-menu--sidebar {
  background: #111318;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1.5rem;
  box-shadow: 0 25px 65px rgb(0 0 0 / 23%);
  overflow: hidden;
  padding: 1rem;
  position: sticky;
  top: 7rem;
}

.rs2-account-layout__sidebar .account-menu__title {
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  color: var(--rs2-text);
  font-size: 1rem;
  margin: 0 0 .65rem;
  padding: .6rem .75rem 1rem;
}

.rs2-account-layout__sidebar .account-menu__nav {
  display: grid;
  gap: .28rem;
}

.rs2-account-layout__sidebar .account-menu__link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: .8rem;
  color: var(--rs2-muted);
  display: flex;
  font-size: .78rem;
  font-weight: 650;
  gap: .65rem;
  padding: .75rem;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.rs2-account-layout__sidebar .account-menu__link:hover,
.rs2-account-layout__sidebar .account-menu__link--active {
  background: rgb(255 29 29 / 8%);
  border-color: rgb(255 29 29 / 20%);
  color: var(--rs2-text);
}

.rs2-account-layout__sidebar .account-menu__link--active .account-menu__icon {
  color: var(--rs2-red-hover);
}

.rs2-account-layout__sidebar .account-menu__link--signout {
  border-top: 1px solid rgb(255 255 255 / 8%);
  border-radius: 0;
  color: #ef8a8a;
  margin-top: .55rem;
  padding-top: 1rem;
}

.rs2-account-layout__sidebar .account-menu__icon {
  font-size: 1.1rem;
}

.rs2-account-layout__main {
  min-width: 0;
}

.rs2-account-heading {
  margin-bottom: 1.4rem;
}

.rs2-account-heading .page-header {
  margin: 0;
}

.rs2-account-heading .page-title-section {
  color: var(--rs2-text);
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -.055em;
  margin: 0;
}

.rs2-account-back {
  align-items: center;
  color: var(--rs2-muted);
  display: inline-flex;
  font-size: .77rem;
  gap: .35rem;
  margin-top: .8rem;
  text-decoration: none;
}

.rs2-account-back:hover {
  color: var(--rs2-red-hover);
}

.rs2-account-back .material-icons {
  font-size: 1rem;
}

.rs2-account-panel {
  background: #111318;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1.5rem;
  box-shadow: 0 25px 65px rgb(0 0 0 / 23%);
  padding: clamp(1.35rem, 3vw, 2.35rem);
}

.rs2-account-panel .form-control,
.rs2-account-panel .form-select {
  background: var(--rs2-field-bg);
  border-color: var(--rs2-field-border);
  min-height: 3.15rem;
}

.rs2-account-panel .form-label {
  color: var(--rs2-muted);
  font-size: .75rem;
  font-weight: 750;
}

.rs2-account-panel__intro {
  color: var(--rs2-muted);
  line-height: 1.65;
  margin-bottom: 1.6rem;
}

.rs2-account-panel .form-text,
.rs2-account-panel .form-control-comment {
  color: var(--rs2-subtle) !important;
  opacity: 1 !important;
}

.rs2-account-panel .form-check-label {
  color: var(--rs2-text);
}

.rs2-account-panel .form-check-label em,
.rs2-account-panel .form-check-label small {
  color: var(--rs2-muted);
}

.rs2-account-panel .password-field > .form-control {
  border-radius: .9rem 0 0 .9rem;
}

.rs2-account-panel .password-field .btn {
  background: rgb(255 255 255 / 4%);
  /* Meme contour que le champ auquel ce bouton est accole. */
  border: 1px solid var(--rs2-field-border);
  border-left: 0;
  border-radius: 0 .9rem .9rem 0;
  box-shadow: none;
  color: var(--rs2-muted);
  font-size: 0;
  min-width: 3.6rem;
  position: relative;
}

.rs2-account-panel .password-field .btn .material-icons {
  display: none;
}

.rs2-account-panel .password-field .btn::before {
  border: 2px solid currentcolor;
  border-radius: 70% 20%;
  content: "";
  height: .82rem;
  transform: rotate(45deg);
  width: .82rem;
}

.rs2-account-panel .password-field .btn::after {
  background: currentcolor;
  border-radius: 50%;
  content: "";
  height: .28rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: .28rem;
}

.rs2-account-panel .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: rgb(255 255 255 / 8%);
  --bs-table-color: var(--rs2-muted);
  color: var(--rs2-muted);
}

.rs2-account-panel .table thead th {
  color: var(--rs2-text);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rs2-account-panel .card,
.rs2-account-panel .address {
  background: rgb(255 255 255 / 2.5%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 1rem;
}

/* Main account dashboard */
.rs2-dashboard-hero {
  align-items: center;
  background:
    linear-gradient(110deg, rgb(255 29 29 / 12%), transparent 45%),
    #111318;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1.5rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.35rem;
  overflow: hidden;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  position: relative;
}

.rs2-dashboard-hero::after {
  border: 1px solid rgb(255 29 29 / 18%);
  border-radius: 50%;
  content: "";
  height: 15rem;
  position: absolute;
  right: -7rem;
  top: -7rem;
  width: 15rem;
}

.rs2-dashboard-hero h1 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -.06em;
  margin: 0;
}

.rs2-dashboard-hero p {
  color: var(--rs2-muted);
  line-height: 1.65;
  margin: .75rem 0 0;
  max-width: 42rem;
}

.rs2-dashboard-avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--rs2-red), #920707);
  border: .4rem solid rgb(255 255 255 / 8%);
  border-radius: 50%;
  box-shadow: 0 18px 45px rgb(255 29 29 / 25%);
  color: #fff;
  display: flex;
  flex: 0 0 5rem;
  font-size: 1.3rem;
  font-weight: 900;
  height: 5rem;
  justify-content: center;
  letter-spacing: -.06em;
  margin-left: 2rem;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.rs2-dashboard-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rs2-dashboard-card {
  align-items: center;
  background: rgb(255 255 255 / 2.5%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 1.05rem;
  color: var(--rs2-text);
  display: grid;
  gap: .9rem;
  grid-template-columns: auto 1fr auto;
  min-height: 7rem;
  padding: 1.1rem;
  text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.rs2-dashboard-card:hover {
  background: rgb(255 29 29 / 5%);
  border-color: rgb(255 29 29 / 28%);
  color: var(--rs2-text);
  transform: translateY(-2px);
}

.rs2-dashboard-card__icon,
.rs2-dashboard-help__icon {
  align-items: center;
  background: rgb(255 29 29 / 9%);
  border: 1px solid rgb(255 29 29 / 20%);
  border-radius: .85rem;
  color: var(--rs2-red-hover);
  display: flex;
  flex: 0 0 2.8rem;
  height: 2.8rem;
  justify-content: center;
  width: 2.8rem;
}

.rs2-dashboard-card__icon .material-icons,
.rs2-dashboard-help__icon .material-icons {
  font-size: 1.35rem;
}

.rs2-dashboard-card__content {
  display: grid;
  gap: .25rem;
}

.rs2-dashboard-card__content strong {
  color: var(--rs2-text);
  font-size: .9rem;
}

.rs2-dashboard-card__content small {
  color: var(--rs2-subtle);
  font-size: .72rem;
}

.rs2-dashboard-card__arrow {
  color: #5f626b;
  font-size: 1rem;
  transition: color .2s ease, transform .2s ease;
}

.rs2-dashboard-card:hover .rs2-dashboard-card__arrow {
  color: var(--rs2-red-hover);
  transform: translateX(.2rem);
}

.rs2-dashboard-modules:empty {
  display: none;
}

.rs2-dashboard-help {
  align-items: center;
  background: linear-gradient(120deg, rgb(255 29 29 / 7%), rgb(255 255 255 / 2%));
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 1.05rem;
  display: flex;
  justify-content: space-between;
  margin-top: .9rem;
  padding: 1.2rem;
}

.rs2-dashboard-help > div {
  align-items: center;
  display: flex;
  gap: .9rem;
}

.rs2-dashboard-help strong {
  color: var(--rs2-text);
  font-size: .88rem;
}

.rs2-dashboard-help p {
  color: var(--rs2-subtle);
  font-size: .74rem;
  margin: .2rem 0 0;
}

.rs2-dashboard-help .btn {
  flex: 0 0 auto;
  margin-left: 1rem;
}

.rs2-dashboard-signout {
  align-items: center;
  color: #ef8a8a;
  display: inline-flex;
  font-size: .75rem;
  gap: .4rem;
  margin-top: 1.5rem;
  text-decoration: none;
}

.rs2-dashboard-signout .material-icons {
  font-size: 1rem;
}

.rs2-account-layout__sidebar .account-menu__icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 1.1rem;
  font-size: 0;  /* le glyphe vient du ::before, le <i> est vide */
  justify-content: center;
  line-height: 1;
  width: 1.1rem;
}

.rs2-account-layout__sidebar .account-menu__icon::before {
  color: var(--rs2-red-hover);
  content: "chevron_right";
  font-family: "RS2 Icons", "Material Icons";
  font-feature-settings: "liga" 1;
  font-size: 1.15rem;
  font-weight: 400;
}

/* PrestaShop emet ces <i> VIDES : le contenu doit venir du CSS. On les ecrit
   en ligature plutot qu en point de code, c est lisible et ca ne depend pas
   d une table de correspondance a verifier. Les trois derniers viennent de
   modules (alertes, RGPD, espace pro) : sans eux ils retombaient sur un point,
   seule difference visible avec les autres entrees du menu. */
.rs2-account-layout__sidebar #identity_link .account-menu__icon::before {
  content: "account_circle";
}

.rs2-account-layout__sidebar :is(#addresses_link, #address_link) .account-menu__icon::before {
  content: "place";
}

.rs2-account-layout__sidebar #history_link .account-menu__icon::before {
  content: "history";
}

.rs2-account-layout__sidebar #order-slips_link .account-menu__icon::before {
  content: "receipt";
}

.rs2-account-layout__sidebar #discounts_link .account-menu__icon::before {
  content: "local_offer";
}

.rs2-account-layout__sidebar #returns_link .account-menu__icon::before {
  content: "assignment_return";
}

.rs2-account-layout__sidebar #emailalerts_link .account-menu__icon::before {
  content: "notifications";
}

.rs2-account-layout__sidebar #psgdpr_link .account-menu__icon::before {
  content: "security";
}

.rs2-account-layout__sidebar #rs2pro_link .account-menu__icon::before {
  content: "group";
}

.rs2-account-layout__sidebar #signout_link .account-menu__icon::before {
  content: "exit_to_app";
}

@media (max-width: 991.98px) {
  .rs2-auth-shell {
    grid-template-columns: 1fr;
  }

  .rs2-auth-story {
    border-bottom: 1px solid rgb(255 255 255 / 9%);
    border-right: 0;
    min-height: 29rem;
  }

  .rs2-auth-story__content {
    margin: 3.5rem 0 2.25rem;
    padding: 0;
  }

  .rs2-auth-benefits,
  .rs2-auth-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rs2-auth-benefits li {
    align-items: flex-start;
  }

  .rs2-account-layout {
    grid-template-columns: 1fr;
  }

  .rs2-account-layout__sidebar .account-menu--sidebar {
    position: static;
  }

  .rs2-account-layout__sidebar .account-menu__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  :where(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-slip, #discount, #order-follow, #order-return, #guest-tracking) .wrapper {
    padding-block: 1.25rem 2.5rem;
  }

  .rs2-auth-shell,
  .rs2-recovery-shell,
  .rs2-account-panel,
  .rs2-dashboard-hero,
  .rs2-account-layout__sidebar .account-menu--sidebar {
    border-radius: 1.2rem;
  }

  .rs2-auth-story {
    min-height: auto;
    padding: 1.7rem;
  }

  .rs2-auth-display {
    font-size: 2.65rem;
  }

  .rs2-auth-story__content {
    margin: 3rem 0 2rem;
  }

  .rs2-auth-benefits,
  .rs2-auth-steps {
    grid-template-columns: 1fr;
  }

  .rs2-auth-benefits li:nth-child(n+3) {
    display: none;
  }

  .rs2-auth-card {
    padding: 2rem 1.4rem;
  }

  .rs2-native-form .buttons-wrapper {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .rs2-native-form .buttons-wrapper .btn-primary {
    width: 100%;
  }

  .rs2-auth-switch {
    align-items: flex-start;
    flex-direction: column;
  }

  .rs2-recovery-shell {
    padding: 2rem 1.4rem;
  }

  .rs2-account-layout__sidebar .account-menu__nav {
    grid-template-columns: 1fr;
  }

  .rs2-dashboard-hero {
    align-items: flex-start;
  }

  .rs2-dashboard-avatar {
    flex-basis: 3.6rem;
    font-size: 1rem;
    height: 3.6rem;
    margin-left: 1rem;
  }

  .rs2-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .rs2-dashboard-help {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }

  .rs2-dashboard-help .btn {
    margin-left: 0;
    width: 100%;
  }

  .rs2-account-panel .table-responsive {
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs2-dashboard-card,
  .rs2-dashboard-card__arrow,
  .rs2-auth-switch .material-icons {
    transition: none;
  }
}

html[data-rs2-theme="light"] .rs2-auth-shell,
html[data-rs2-theme="light"] .rs2-auth-card,
html[data-rs2-theme="light"] .rs2-recovery-shell,
html[data-rs2-theme="light"] .rs2-account-panel,
html[data-rs2-theme="light"] .rs2-account-layout__sidebar .account-menu--sidebar,
html[data-rs2-theme="light"] .rs2-dashboard-hero {
  background-color: var(--rs2-card);
  border-color: var(--rs2-line);
}

html[data-rs2-theme="light"] .rs2-auth-card .form-control,
html[data-rs2-theme="light"] .rs2-auth-card .form-select,
html[data-rs2-theme="light"] .rs2-account-panel .form-control,
html[data-rs2-theme="light"] .rs2-account-panel .form-select {
  background: var(--rs2-raised);
  /* --rs2-line-strong sert aux separateurs decoratifs et ne fait que 1,48:1 :
     le contour d'un champ demande 3:1 (WCAG 1.4.11). */
  border-color: var(--rs2-field-border);
}


/* ==========================================================================
   Liens de compte ajoutes par des modules
   ==========================================================================
   « Mes alertes » (ps_emailalerts), « RGPD » (psgdpr) et « Espace Pro »
   (rs2pro) arrivent par le hook displayCustomerAccount. Le conteneur
   .rs2-dashboard-modules n avait qu une regle :empty{display:none} : ces trois
   liens tombaient donc en texte brut sous les tuiles, sans cadre ni icone,
   alors qu ils rendent exactement le meme service. Ils reprennent ici la mise
   en forme des tuiles natives.

   Leur <i> est emis VIDE par les modules : le glyphe vient du ::before, comme
   dans la barre laterale. */

.rs2-dashboard-modules {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: .9rem;
}

.rs2-dashboard-modules .account-menu__link,
.rs2-dashboard-modules .account-link {
  align-items: center;
  background: rgb(255 255 255 / 2.5%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 1.05rem;
  color: var(--rs2-text);
  display: grid;
  font-size: .92rem;
  font-weight: 600;
  gap: .8rem;
  grid-template-columns: auto 1fr;
  min-height: 4.6rem;
  padding: 1rem;
  text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease;
}

.rs2-dashboard-modules .account-menu__link:hover,
.rs2-dashboard-modules .account-link:hover {
  background: rgb(255 29 29 / 5%);
  border-color: rgb(255 29 29 / 32%);
}

.rs2-dashboard-modules .account-menu__icon {
  align-items: center;
  background: rgb(255 29 29 / 9%);
  border: 1px solid rgb(255 29 29 / 20%);
  border-radius: .85rem;
  color: var(--rs2-red-hover);
  display: flex;
  flex: 0 0 2.4rem;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem;
}

.rs2-dashboard-modules .account-menu__icon::before {
  content: "chevron_right";
  font-family: "RS2 Icons", "Material Icons";
  font-feature-settings: "liga" 1;
  font-size: 1.2rem;
}

.rs2-dashboard-modules #emailalerts_link .account-menu__icon::before {
  content: "notifications";
}

.rs2-dashboard-modules #psgdpr_link .account-menu__icon::before {
  content: "security";
}

.rs2-dashboard-modules #rs2pro_link .account-menu__icon::before {
  content: "group";
}

@media (max-width: 767.98px) {
  .rs2-dashboard-modules {
    grid-template-columns: 1fr;
  }
}

/* Les icones redevenues visibles heritaient de --rs2-red-hover (#ff4545), qui
   sur la pastille teintee de rouge ne donne que 2,90:1 — sous le seuil de 3:1
   du WCAG 1.4.11 pour un element graphique porteur de sens. On eclaircit le
   glyphe plutot que la pastille : eclaircir le fond aurait encore reduit
   l ecart. */
.rs2-dashboard-card__icon .material-icons,
.rs2-dashboard-help__icon .material-icons,
.rs2-dashboard-modules .account-menu__icon::before {
  color: #ff8080;
}

/* Deux glyphes se superposaient une fois la police retablie : l element <i>
   porte deja son point de code, et un ::before hérité d une regle ailleurs
   dessinait un second caractere par-dessus. On neutralise explicitement le
   ::before la ou le <i> a son propre contenu, et on force la police d icones
   sur la fleche, qui retombait sur Raleway. */
.rs2-dashboard-card__arrow {
  font-family: "RS2 Icons", "Material Icons";
}

.rs2-dashboard-card__arrow::before,
.rs2-dashboard-card__icon .material-icons::before,
.rs2-dashboard-help__icon .material-icons::before {
  content: none;
}

/* Dans les tuiles de modules, c est l inverse : le <i> porte le point de code
   du module (une enveloppe pour les alertes) mais on veut l icone choisie ici.
   On masque le contenu propre du <i> et on ne garde que le ::before, comme
   dans la barre laterale. */
.rs2-dashboard-modules .account-menu__icon {
  font-size: 0;
}

/* ==========================================================================
   Espace client — mise au niveau de la maquette
   ==========================================================================
   La structure etait deja la ; c'est la finition qui manquait. Cinq apports :
   un etat actif lisible dans la colonne, des chevrons, des groupes separes,
   des boutons ronds sur les tuiles, et un bloc identite dans l'en-tete. */

/* --- Colonne de gauche ---------------------------------------------------- */

.rs2-account-layout__sidebar .account-menu__link {
  align-items: center;
  border-radius: .8rem;
  display: grid;
  gap: .75rem;
  grid-template-columns: 1.4rem 1fr auto;
  padding: .7rem .8rem;
  position: relative;
  transition: background-color .2s ease, color .2s ease;
}

/* Chevron de droite : il signale que l'entree mene ailleurs, comme sur la
   maquette. En ::after pour ne rien demander au balisage de PrestaShop. */
.rs2-account-layout__sidebar .account-menu__link::after {
  color: var(--rs2-subtle);
  content: "chevron_right";
  font-family: "RS2 Icons", "Material Icons";
  font-feature-settings: "liga" 1;
  font-size: 1.1rem;
  transition: color .2s ease, transform .2s ease;
}

.rs2-account-layout__sidebar .account-menu__link:hover {
  background: rgb(255 255 255 / 4%);
}

.rs2-account-layout__sidebar .account-menu__link:hover::after {
  color: var(--rs2-text);
  transform: translateX(.15rem);
}

/* Entree courante : liseré rouge et fond appuye, pour qu'on sache ou l'on est
   sans avoir a relire tout le menu. */
.rs2-account-layout__sidebar .account-menu__link--active {
  background: rgb(255 29 29 / 8%);
  color: var(--rs2-text);
}

.rs2-account-layout__sidebar .account-menu__link--active::before {
  background: var(--rs2-red-fill);
  border-radius: 0 3px 3px 0;
  content: "";
  height: 60%;
  left: -.8rem;
  position: absolute;
  top: 20%;
  width: 3px;
}

/* Trois groupes : les services principaux, les acces secondaires apportes par
   des modules, puis la deconnexion. */
.rs2-account-layout__sidebar #emailalerts_link,
.rs2-account-layout__sidebar #signout_link {
  border-top: 1px solid rgb(255 255 255 / 8%);
  margin-top: .55rem;
  padding-top: 1.1rem;
}

.rs2-account-layout__sidebar #signout_link,
.rs2-account-layout__sidebar #signout_link .account-menu__icon::before {
  color: var(--rs2-red-hover);
}

/* --- Encart de marque ----------------------------------------------------- */

.rs2-account-promo {
  background:
    radial-gradient(circle at 80% 0%, rgb(255 29 29 / 30%), transparent 60%),
    linear-gradient(160deg, rgb(255 29 29 / 12%), rgb(255 255 255 / 3%));
  border: 1px solid rgb(255 29 29 / 22%);
  border-radius: 1.05rem;
  display: grid;
  gap: .3rem;
  margin-top: 1.2rem;
  padding: 1.2rem 1.1rem;
  text-decoration: none;
}

.rs2-account-promo__kicker {
  color: var(--rs2-muted);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.rs2-account-promo__title {
  color: var(--rs2-text);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.rs2-account-promo__link {
  align-items: center;
  color: var(--rs2-red-hover);
  display: flex;
  font-size: .8rem;
  font-weight: 700;
  gap: .2rem;
  margin-top: .4rem;
}

.rs2-account-promo:hover {
  border-color: rgb(255 29 29 / 45%);
}

/* --- En-tete : identite --------------------------------------------------- */

.rs2-dashboard-identity {
  align-items: center;
  display: flex;
  gap: .9rem;
}

.rs2-dashboard-identity__text {
  display: grid;
  gap: .15rem;
}

.rs2-dashboard-identity__text strong {
  color: var(--rs2-text);
  font-size: 1rem;
  font-weight: 700;
}

.rs2-dashboard-identity__text span {
  color: var(--rs2-muted);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --- Entetes de section --------------------------------------------------- */

.rs2-dashboard-section {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 1.6rem 0 .9rem;
}

.rs2-dashboard-section:first-child {
  margin-top: 0;
}

.rs2-dashboard-section__title {
  align-items: center;
  color: var(--rs2-text);
  display: flex;
  font-size: .74rem;
  font-weight: 800;
  gap: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.rs2-dashboard-section__title::before {
  background: var(--rs2-red-fill);
  content: "";
  height: 2px;
  width: 1.6rem;
}

.rs2-dashboard-section__hint {
  color: var(--rs2-subtle);
  font-size: .76rem;
}

/* L'entete « Autres acces » ne doit pas rester seul quand aucun module
   n'alimente le hook. */
.rs2-dashboard-section--modules:has(+ .rs2-dashboard-modules:empty) {
  display: none;
}

/* --- Tuiles : bouton rond a droite ---------------------------------------- */

.rs2-dashboard-card__arrow {
  align-items: center;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 50%;
  color: var(--rs2-muted);
  display: flex;
  flex: 0 0 2rem;
  height: 2rem;
  justify-content: center;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  width: 2rem;
}

.rs2-dashboard-card:hover .rs2-dashboard-card__arrow {
  background: var(--rs2-red-fill);
  border-color: var(--rs2-red-fill);
  color: #fff;
  transform: none;
}

@media (max-width: 767.98px) {
  .rs2-dashboard-section {
    flex-direction: column;
    gap: .25rem;
  }
}

/* Les tuiles de la maquette portent un sous-titre. Les modules n'en
   fournissent pas : on l'ajoute en ::after, comme les icones. Le lien passe
   sur deux rangees, l'icone couvrant les deux. */
.rs2-dashboard-modules .account-menu__link {
  align-items: center;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  row-gap: .1rem;
}

.rs2-dashboard-modules .account-menu__icon {
  grid-row: 1 / span 2;
}

.rs2-dashboard-modules .account-menu__link::after {
  align-self: start;
  color: var(--rs2-subtle);
  font-size: .76rem;
  font-weight: 400;
}

.rs2-dashboard-modules #emailalerts_link::after {
  content: "Restez informé de l'essentiel";
}

.rs2-dashboard-modules #psgdpr_link::after {
  content: "Gestion de vos données";
}

.rs2-dashboard-modules #rs2pro_link::after {
  content: "Accès professionnels";
}

/* Bande d'aide : bouton plein comme sur la maquette, pas un contour. */
.rs2-dashboard-help .btn,
.rs2-dashboard-help .btn-outline-primary {
  background: var(--rs2-red-fill);
  border: 1px solid var(--rs2-red-fill);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  padding: .7rem 1.4rem;
}

.rs2-dashboard-help .btn:hover {
  background: var(--rs2-red-fill-hover);
  border-color: var(--rs2-red-fill-hover);
  color: #fff;
}

/* La deconnexion existe deja dans la colonne : en bas de la page principale
   elle doit rester discrete, pas concurrencer les tuiles. */
.rs2-dashboard-signout {
  align-items: center;
  color: var(--rs2-subtle);
  display: inline-flex;
  font-size: .82rem;
  gap: .4rem;
  margin-top: 1.4rem;
  text-decoration: none;
}

.rs2-dashboard-signout:hover {
  color: var(--rs2-red-hover);
}


/* Sous 992 px la colonne se met au-dessus du contenu. Or le menu du compte y
   est masque (display:none, la navigation passe par les tuiles) : il ne
   restait donc que l'encart de marque, qui s'affichait AVANT le « Bienvenue ».
   La colonne passe apres le contenu, sa place logique quand elle ne contient
   plus qu'une promotion. */
@media (max-width: 991.98px) {
  .rs2-account-layout__main {
    order: 1;
  }

  .rs2-account-layout__sidebar {
    order: 2;
  }

  .rs2-account-promo {
    margin-top: 0;
  }

  /* L'en-tete se serrait a trois lignes : le nom et la qualite passent sous le
     titre plutot que de lui disputer la largeur. */
  .rs2-dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.2rem;
  }

  .rs2-dashboard-identity {
    gap: .8rem;
  }
}