/* Espace client et programme de fidélité — pages du compte (theme.yml, clés par page), pages
   de cyliumloyalty et encart panier (lien modules/cyliumloyalty/views/css/front.css).
   🔴 Titres en deux classes : le kit Creative Elements style `body.ce-kit-1 h2` en (0,1,1). */

#wrapper:has(.shine-account-hero) {
  background: var(--shine-paper-2);
}

/* --- Bandeau --- */

.shine-account-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(240px, 30vw, 420px);
  overflow: hidden;
  background: var(--shine-ink-2);
  color: var(--shine-white);
}

.shine-account-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile pour le contraste du texte blanc sur la photo. */
.shine-account-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(var(--shine-black-rgb) / 0.72), rgb(var(--shine-black-rgb) / 0.35) 45%, transparent 75%);
}

.shine-account-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 32px;
}

.shine-account-hero__tag {
  padding: 6px 10px;
  border: 1px solid rgb(var(--shine-white-rgb) / 0.85);
  font: 500 11px/1 var(--shine-font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shine-account-hero .shine-account-hero__title {
  margin: 0;
  font: 600 clamp(40px, 6vw, 84px)/0.9 var(--shine-font-display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.shine-account-hero__logout {
  color: var(--shine-white);
  font: 400 15px var(--shine-font-text);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.shine-account-hero__logout:hover,
.shine-account-hero__logout:focus-visible {
  color: var(--shine-race);
}

/* --- Onglets : défilement horizontal sur mobile, fondu sur le bord droit.
   Collés sous l'en-tête par .shine-sticky-bar (header.css). --- */

.shine-account-tabs {
  background: var(--shine-paper);
  border-bottom: 1px solid var(--shine-line);
}

.shine-account-tabs__track {
  display: flex;
  gap: clamp(16px, 2.2vw, 34px);
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}

.shine-account-tabs__track::-webkit-scrollbar {
  display: none;
}

.shine-account-tabs__link {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 20px 0 18px;
  border-bottom: 2px solid transparent;
  color: var(--shine-muted);
  font: 400 14px var(--shine-font-text);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.shine-account-tabs__link .shine-ico {
  width: 17px;
  height: 17px;
}

.shine-account-tabs__link:hover,
.shine-account-tabs__link[aria-current] {
  color: var(--shine-dark);
}

.shine-account-tabs__link[aria-current] {
  border-bottom-color: var(--shine-dark);
  font-weight: 600;
}

/* --- Corps --- */

.shine-account__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: clamp(28px, 4vw, 56px) 80px;
  color: var(--shine-dark);
  font-family: var(--shine-font-text);
}

.shine-account__body .shine-account__title {
  margin: 0;
  font: 600 clamp(28px, 3.4vw, 44px)/1 var(--shine-font-display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.shine-account__body .page-content {
  margin: 0;
}

.shine-account-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shine-account-subnav a {
  padding: 11px 16px;
  border: 1px solid var(--shine-line-strong);
  color: var(--shine-dark);
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}

.shine-account-subnav a:hover,
.shine-account-subnav a[aria-current] {
  background: var(--shine-dark);
  border-color: var(--shine-dark);
  color: var(--shine-white);
}

/* --- Cartes --- */

.shine-card {
  padding: 24px 26px;
  background: var(--shine-paper);
  border: 1px solid var(--shine-line);
}

.shine-card--notice {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.shine-card--notice > .shine-ico {
  flex: none;
  margin-top: 2px;
}

.shine-card .shine-card__lead {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.shine-card__text {
  margin: 0 0 8px;
  color: var(--shine-dark-gray);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
}

.shine-card--list {
  padding-bottom: 10px;
}

.shine-overview .shine-card__title {
  margin: 0 0 14px;
  text-transform: none;
  font: 600 24px/1.2 var(--shine-font-display);
  letter-spacing: -0.02em;
}

.shine-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--shine-dark);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.shine-link:hover,
.shine-link:focus-visible {
  color: var(--shine-dark-gray);
}

.shine-link .shine-ico {
  width: 16px;
  height: 16px;
}

/* --- Aperçu : deux colonnes dès que la place le permet --- */

.shine-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

.shine-overview__main {
  flex: 3 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shine-overview__side {
  flex: 2 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Liens du compte, y compris ceux des modules (displayCustomerAccount) quel que soit leur balisage. */
.shine-account-links > div,
.shine-account-links .link-item {
  display: contents;
}

.shine-account-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--shine-line);
  border-radius: 0;
  background: none;
  color: var(--shine-dark);
  font-size: 16px;
  text-decoration: none;
}

.shine-account-links a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 auto;
  border-top: 1.5px solid currentcolor;
  border-right: 1.5px solid currentcolor;
  transform: rotate(45deg);
}

.shine-account-links a:hover {
  color: var(--shine-dark-gray);
}

.shine-account-links .material-icons {
  display: none;
}

.shine-perks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shine-perks__item,
.shine-perks__item > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--shine-line);
  color: var(--shine-dark);
  font-size: 16px;
  text-decoration: none;
}

.shine-perks__item > a {
  flex: 1;
  padding: 0;
  border: 0;
}

.shine-perks__item small {
  display: block;
  color: var(--shine-muted);
  font-size: 12px;
  font-weight: 300;
}

.shine-perks__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--shine-paper-2);
}

.shine-perks__chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
}

/* Encart fidélité : visuel fixe en attendant le programme. */
.shine-loyalty {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--shine-ink-2);
  color: var(--shine-white);
}

.shine-loyalty img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.85;
}

.shine-loyalty figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 28px;
  background: linear-gradient(0deg, rgb(var(--shine-black-rgb) / 0.75), transparent);
}

.shine-loyalty__kicker {
  font: 600 12px/1 var(--shine-font-text);
  letter-spacing: 0.24em;
  color: var(--shine-race);
}

.shine-loyalty__title {
  font: 600 22px/1.15 var(--shine-font-display);
  letter-spacing: -0.02em;
}

/* --- Dernière commande --- */

.shine-last-order {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 8px;
}

.shine-last-order p {
  margin: 0;
}

.shine-last-order__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--shine-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.shine-last-order .shine-last-order__status {
  font: 600 21px/1.2 var(--shine-font-display);
  letter-spacing: -0.02em;
}

.shine-last-order__total {
  color: var(--shine-dark-gray);
  font-size: 14px;
}

/* Frise : le trait plein couvre les étapes franchies (--shine-step, posé par le gabarit). */
.shine-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shine-steps::before,
.shine-steps::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12.5%;
  width: 75%;
  border-top: 1.5px dashed var(--shine-gray);
}

.shine-steps::after {
  width: calc((var(--shine-step) - 1) * 25%);
  border-top-style: solid;
  border-color: var(--shine-dark);
}

.shine-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--shine-muted);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
}

.shine-steps__item.is-done {
  color: var(--shine-dark);
  font-weight: 400;
}

.shine-steps__item[aria-current] {
  font-weight: 600;
}

.shine-steps__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--shine-gray);
  border-radius: 50%;
  background: var(--shine-paper);
}

.is-done .shine-steps__dot {
  border-color: var(--shine-dark);
  background: var(--shine-dark);
  color: var(--shine-white);
}

.shine-steps__dot .shine-ico {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

/* --- Listes en lignes : commandes, avoirs --- */

.shine-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--shine-paper);
  border: 1px solid var(--shine-line);
}

.shine-rows__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 22px 26px;
}

.shine-rows__item + .shine-rows__item {
  border-top: 1px solid var(--shine-line);
}

.shine-rows__main {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shine-rows__ref {
  color: var(--shine-dark);
  font: 600 17px var(--shine-font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
}

a.shine-rows__ref:hover {
  text-decoration: underline;
}

.shine-rows__meta,
.shine-rows__note {
  color: var(--shine-muted);
  font-size: 13px;
  font-weight: 300;
}

.shine-rows__meta a {
  color: inherit;
}

.shine-rows__note {
  margin: 12px 0 0;
}

.shine-rows__amount {
  flex: 0 0 auto;
  min-width: 84px;
  font: 600 17px var(--shine-font-display);
  text-align: right;
  white-space: nowrap;
}

.shine-rows__actions {
  display: flex;
  gap: 8px;
}

/* Statut : pastille à la couleur du BO, texte toujours sombre pour le contraste. */
.shine-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--shine-line-strong);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shine-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--shine-state, var(--shine-gray));
}

.shine-btn-line {
  padding: 11px 14px;
  border: 1px solid var(--shine-line-strong);
  color: var(--shine-dark);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.shine-btn-line:hover {
  border-color: var(--shine-dark);
}

.shine-btn-line--dark {
  background: var(--shine-dark);
  border-color: var(--shine-dark);
  color: var(--shine-white);
}

.shine-btn-line--dark:hover {
  background: var(--shine-race);
  border-color: var(--shine-race);
  color: var(--shine-dark);
}

/* --- Pages du parent habillées en carte : profil, adresses, bons, détail de commande --- */

:is(#identity, #address, #discount, #order-detail, #order-follow) .shine-account__body .page-content,
#addresses .address-card {
  padding: clamp(20px, 3vw, 32px);
  background: var(--shine-paper);
  border: 1px solid var(--shine-line);
}

/* --- Bandeau d'aide --- */

.shine-account-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: 24px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 8px;
  background: var(--shine-ink-2);
  color: var(--shine-white);
}

.shine-account-help p {
  margin: 0;
}

.shine-account-help .shine-account-help__title {
  margin-bottom: 8px;
  font: 600 22px/1.2 var(--shine-font-display);
  letter-spacing: -0.02em;
}

.shine-account-help__note {
  color: var(--shine-gray);
  font-size: 14px;
  font-weight: 300;
}

.shine-account-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shine-account-help__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  border: 1px solid var(--shine-ink-7);
  border-radius: 4px;
  color: var(--shine-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.shine-account-help__btn:hover {
  border-color: var(--shine-white);
  color: var(--shine-white);
}

.shine-account-help__btn--main {
  background: var(--shine-race);
  border-color: var(--shine-race);
  color: var(--shine-dark);
}

.shine-account-help__btn--main:hover {
  background: var(--shine-white);
  border-color: var(--shine-white);
  color: var(--shine-dark);
}

.shine-account-help__btn .shine-ico {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Programme de fidélité (cyliumloyalty) — pages du module, Aperçu, encart panier.
   🔴 Chargé aussi par le module : themes/shine/modules/cyliumloyalty/views/css/front.css
   est un lien vers ce fichier (le cœur prend le chemin du thème avant celui du module).
   ========================================================================== */

.shine-account-hero__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin: 0;
  color: rgb(var(--shine-white-rgb) / 0.88);
  font: 300 15px var(--shine-font-text);
}

.shine-account-hero__line strong {
  color: var(--shine-white);
  font-weight: 600;
}

.shine-kicker {
  margin: 0;
  color: var(--shine-muted);
  font: 500 11px/1 var(--shine-font-text);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.shine-chip {
  flex: none;
  padding: 5px 8px;
  border: 1px solid var(--shine-line-strong);
  color: var(--shine-muted);
  font: 500 10px/1 var(--shine-font-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.shine-chip--race {
  background: var(--shine-race);
  border-color: var(--shine-race);
  color: var(--shine-dark);
  font-weight: 600;
}

.shine-chip--ink {
  background: var(--shine-dark);
  border-color: var(--shine-dark);
  color: var(--shine-white);
}

.shine-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 600 11px/1 var(--shine-font-text);
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.shine-cta .shine-ico {
  width: 14px;
  height: 14px;
}

.shine-cta--light {
  background: var(--shine-white);
  color: var(--shine-dark);
}

.shine-cta--light:hover {
  background: var(--shine-race);
  color: var(--shine-dark);
}

.shine-cta--ghost {
  background: rgb(var(--shine-black-rgb) / 0.5);
  border-color: var(--shine-ink-7);
  color: var(--shine-white);
}

.shine-cta--ghost:hover {
  border-color: var(--shine-white);
  color: var(--shine-white);
}

.shine-pts {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  white-space: nowrap;
}

.shine-pts__icon {
  font-size: 0.8em;
}

img.shine-pts__icon {
  width: 0.85em;
  height: 0.85em;
  align-self: center;
}

.shine-pts.is-negative {
  color: var(--shine-race-sale);
}

.shine-note,
.shine-empty {
  margin: 0;
  color: var(--shine-muted);
  font-size: 13px;
  font-weight: 300;
}

.shine-empty {
  padding: 22px 26px;
  background: var(--shine-paper);
  border: 1px solid var(--shine-line);
  font-size: 15px;
}

.shine-loyalty-messages:empty {
  display: none;
}

.shine-loyalty-messages {
  padding: 12px 14px;
  border-left: 3px solid var(--shine-race-sale);
  background: var(--shine-paper);
  font-size: 14px;
}

[data-cyl-loyalty-action].is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Jauge argentée : statut et Aperçu. */
.shine-gauge {
  height: 14px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--shine-ink-6);
}

.shine-gauge__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--shine-muted-2), var(--shine-paper-2) 70%, var(--shine-gray));
}

.shine-gauge__legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  color: var(--shine-gray);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --- Encart fidélité de l'Aperçu (données réelles) --- */

.shine-loyalty--live img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.shine-loyalty__live {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 30px 30px;
  background: linear-gradient(100deg, rgb(var(--shine-black-rgb) / 0.7), rgb(var(--shine-black-rgb) / 0.2));
}

.shine-loyalty__live p {
  margin: 0;
}

.shine-loyalty__live .shine-loyalty__kicker {
  color: var(--shine-gray);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
}

.shine-loyalty__points {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 64px/0.85 var(--shine-font-display);
  letter-spacing: -0.045em;
}

.shine-loyalty__gem {
  flex: none;
}

.shine-loyalty__next {
  color: var(--shine-grey-100);
  font-size: 16px;
  font-weight: 300;
}

.shine-loyalty__next strong {
  color: var(--shine-white);
  font-weight: 700;
}

.shine-loyalty__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Pages du programme --- */

.shine-loyalty-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.shine-loyalty-top {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}

.shine-status {
  flex: 3 1 480px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--shine-ink-2);
  color: var(--shine-white);
}

.shine-status__badge {
  flex: none;
  width: min(260px, 100%);
  height: auto;
  margin: clamp(20px, 3vw, 36px);
}

.shine-status__body {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 3.4vw, 46px);
}

.shine-status .shine-kicker {
  color: var(--shine-muted-2);
}

.shine-status .shine-status__name {
  margin: 0;
  color: var(--shine-white);
  font: 600 clamp(36px, 4vw, 56px)/0.92 var(--shine-font-display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.shine-status__next {
  margin: 0;
  color: var(--shine-grey-100);
  font-size: 16px;
  font-weight: 300;
}

.shine-status__next strong {
  color: var(--shine-white);
  font-weight: 700;
}

.shine-status__meta {
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--shine-ink-6);
  color: var(--shine-muted-2);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  list-style: none;
}

.shine-balance {
  flex: 2 1 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 30px;
  border-radius: 8px;
  background: var(--shine-paper);
  border: 1px solid var(--shine-line);
}

.shine-balance p {
  margin: 0;
}

.shine-balance__value {
  font: 600 56px/0.9 var(--shine-font-display);
  letter-spacing: -0.04em;
}

.shine-balance__meta {
  margin: 0;
  padding: 0;
  color: var(--shine-dark-gray);
  font-size: 14px;
  line-height: 1.7;
  list-style: none;
}

.shine-balance__warning {
  color: var(--shine-race-sale);
  font-size: 14px;
}

.shine-balance .shine-cta--light {
  margin-top: auto;
  background: var(--shine-dark);
  color: var(--shine-white);
}

.shine-balance .shine-cta--light:hover {
  background: var(--shine-race);
  color: var(--shine-dark);
}

.shine-loyalty-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.shine-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.shine-loyalty-section .shine-section-head__title {
  margin: 0;
  font: 600 clamp(26px, 3vw, 36px)/1 var(--shine-font-display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Titre sur filet : « LES 6 STATUTS ———— ». */
.shine-rule-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  color: var(--shine-muted);
  font: 500 10px/1 var(--shine-font-text);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.shine-rule-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--shine-line);
  order: 1;
}

.shine-rule-title span + span {
  order: 2;
}

/* Récompenses : vert Shine quand utilisables. */
.shine-rewards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}

.shine-reward {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 240px;
  padding: 24px;
  background: var(--shine-paper);
  border: 1px solid var(--shine-line);
}

.shine-reward.is-usable {
  background: rgb(var(--shine-race-rgb) / 0.08);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--shine-race);
}

.shine-rewards--past .shine-reward {
  color: var(--shine-muted);
}

.shine-reward__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.shine-reward__type {
  font: 500 10px/1 var(--shine-font-text);
  letter-spacing: 0.16em;
  opacity: 0.7;
  text-transform: uppercase;
}

.shine-reward__value {
  margin: 0;
  font: 600 clamp(30px, 3vw, 40px)/0.9 var(--shine-font-display);
  letter-spacing: -0.04em;
}

.shine-reward__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shine-reward .shine-reward__name {
  margin: 0;
  font: 600 18px/1.15 var(--shine-font-display);
  letter-spacing: -0.02em;
}

.shine-reward__text {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.85;
}

.shine-reward__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid currentcolor;
}

.shine-reward__meta {
  margin: 0;
  padding: 0;
  font-size: 12px;
  list-style: none;
}

.shine-reward__code {
  margin: 0;
  font-size: 13px;
}

.shine-reward__code code {
  padding: 3px 6px;
  background: var(--shine-white);
  color: var(--shine-dark);
  font-size: 13px;
}

.shine-reward__cta,
.shine-gift__btn,
.shine-lcart__btn {
  align-self: flex-start;
  padding: 11px 16px;
  border: 0;
  background: var(--shine-race);
  color: var(--shine-dark);
  cursor: pointer;
  font: 600 10px/1 var(--shine-font-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.shine-reward__cta:hover,
.shine-gift__btn:not(:disabled):not(.is-owned):hover,
.shine-lcart__btn:hover {
  background: var(--shine-dark);
  color: var(--shine-race);
}

/* Échelle des statuts. */
.shine-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shine-tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 8px;
  background: var(--shine-paper);
  border: 1px solid var(--shine-line);
  border-top: 3px solid var(--shine-tier, var(--shine-line));
}

.shine-tier:not(.is-reached) {
  opacity: 0.8;
}

.shine-tier.is-current {
  border-color: var(--shine-dark);
  box-shadow: 0 0 0 1px var(--shine-dark);
}

.shine-tier__badge {
  align-self: center;
  width: 70%;
  max-width: 220px;
  height: auto;
}

.shine-tier:not(.is-reached) .shine-tier__badge {
  filter: grayscale(1) opacity(0.45);
}

.shine-tier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.shine-tier__name {
  font: 600 22px/1 var(--shine-font-display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.shine-tier__threshold {
  margin: 0;
  color: var(--shine-muted);
  font-size: 13px;
}

.shine-tier__perks summary {
  display: flex;
  justify-content: space-between;
  padding: 13px 14px;
  border: 1px solid var(--shine-line);
  border-radius: 6px;
  background: var(--shine-white);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}

.shine-tier__perks summary::-webkit-details-marker {
  display: none;
}

.shine-tier__perks summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin: 3px 2px 0 0;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: rotate(45deg);
}

.shine-tier__perks[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 7px;
}

.shine-tier__perks ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
}

.shine-tier__perks li {
  position: relative;
  padding-left: 28px;
  font-size: 13px;
  line-height: 1.45;
}

/* Puce vert Shine cochée. */
.shine-tier__perks li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--shine-race);
}

.shine-tier__perks li::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 6px;
  height: 9px;
  border-right: 2px solid var(--shine-dark);
  border-bottom: 2px solid var(--shine-dark);
  transform: rotate(45deg);
}

/* Boutique cadeaux. */
.shine-giftshop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.shine-giftshop__intro {
  margin: 0;
  color: var(--shine-dark-gray);
  font-size: 15px;
  font-weight: 300;
}

.shine-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--shine-race);
  color: var(--shine-dark);
  font: 600 17px/1 var(--shine-font-display);
}

.shine-pill__note {
  font: 300 12px var(--shine-font-text);
}

.shine-gifts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shine-gift {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 14px;
  border: 1px solid var(--shine-line);
  border-radius: 10px;
  background: var(--shine-white);
}

.shine-gift__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  padding: 18px;
}

.shine-gift__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shine-gift.is-locked .shine-gift__media img {
  filter: grayscale(1);
  opacity: 0.4;
}

.shine-gift__flag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--shine-white);
}

.shine-gift__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 4px 0;
}

.shine-gift .shine-gift__name {
  margin: 0;
  font: 600 17px/1.2 var(--shine-font-display);
  letter-spacing: -0.015em;
}

.shine-gift__cost {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.shine-gift.is-locked .shine-gift__cost,
.shine-gift__missing {
  color: var(--shine-muted);
}

.shine-gift__missing {
  margin: auto 0 0;
  font-size: 12px;
  font-weight: 300;
}

.shine-gift__btn {
  align-self: stretch;
  margin-top: auto;
  padding: 16px 12px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
}

.shine-gift__missing + .shine-gift__btn {
  margin-top: 0;
}

.shine-gift__btn:disabled {
  background: var(--shine-paper-2);
  color: var(--shine-muted);
  cursor: default;
}

.shine-gift__btn.is-owned {
  background: var(--shine-dark);
  color: var(--shine-white);
}

.shine-account-links__meta {
  margin-left: auto;
  color: var(--shine-muted);
  font-size: 12px;
}

/* --- Encart fidélité du panier --- */

.shine-lcart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid var(--shine-line);
  border-radius: 8px;
  background: var(--shine-paper);
  font-family: var(--shine-font-text);
}

.shine-lcart p {
  margin: 0;
}

.shine-lcart__current {
  font: 600 15px var(--shine-font-display);
}

/* Jalons posés par --shine-at (gabarit, depuis mark.percent) ; libellés en légende dessous. */
.shine-lcart__track {
  position: relative;
  height: 8px;
  margin: 8px 8px 0;
  border-radius: 999px;
  background: var(--shine-paper-2);
}

.shine-lcart__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--shine-race);
}

.shine-lcart__dot {
  position: absolute;
  top: 50%;
  left: var(--shine-at);
  width: 16px;
  height: 16px;
  border: 2px solid var(--shine-gray);
  border-radius: 50%;
  background: var(--shine-white);
  transform: translate(-50%, -50%);
}

.shine-lcart__dot.is-reached {
  border-color: var(--shine-dark);
  background: var(--shine-race);
}

.shine-lcart__steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  color: var(--shine-muted);
  font-size: 13px;
  list-style: none;
}

.shine-lcart__step {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.shine-lcart__step::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--shine-gray);
  border-radius: 50%;
  transform: translateY(1px);
}

.shine-lcart__step.is-reached {
  color: var(--shine-dark);
}

.shine-lcart__step.is-reached::before {
  border-color: var(--shine-dark);
  background: var(--shine-race);
}

.shine-lcart__step strong {
  min-width: 48px;
  color: var(--shine-dark);
}

.shine-lcart__title {
  font: 600 15px var(--shine-font-display);
}

.shine-lcart__gifts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.shine-lcart__gift {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--shine-line);
  border-radius: 6px;
  background: var(--shine-white);
}

.shine-lcart__gift.is-selected {
  box-shadow: inset 0 0 0 2px var(--shine-race);
}

.shine-lcart__gift img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.shine-lcart__gift-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.shine-lcart__next {
  font-size: 14px;
}

.shine-lcart__forecast {
  font-size: 14px;
}

.shine-lcart__forecast .shine-pts {
  font-weight: 700;
}

.shine-lcart__boost {
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--shine-white);
  font-size: 14px;
}

.shine-lcart__boost.is-active {
  background: var(--shine-race);
}

.shine-lcart__reserved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.shine-lcart__remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--shine-dark);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .shine-account-tabs__link,
  .shine-account-subnav a {
    transition: none;
  }
}