/* ============================================================
   LOCSKI — Thème clair Alpine Fresh (Story 12.2, Epic 12)
   ------------------------------------------------------------
   Charte : fond Snow White, le bleu profond réservé aux hero,
   à la navbar, au footer et aux CTA (palette-4-alpine-fresh).

   Principe : cette feuille ne modifie AUCUNE règle existante.
   Elle ajoute la variante `.ls-page--light`, qui redéfinit les
   tokens de surface dans son propre scope puis neutralise les
   textes blancs codés en dur des pages sombres.
   Retirer le <link> de main.ejs suffit à revenir en arrière.
   ============================================================ */

/* ---------- Tokens de surface, portée locale ---------- */
.ls-page--light {
  --surface:        #FFFFFF;
  --surface-2:      #F1F5F9;
  --line:           #DCE4EC;
  --line-soft:      #EBF0F5;
  --ink:            var(--dark);
  --ink-2:          var(--text-muted);
  --ink-3:          var(--text-light);

  /* Les composants .ls-* consomment ces tokens : ils suivent sans être réécrits. */
  --glass-bg:        #FFFFFF;
  --glass-bg-light:  #FFFFFF;
  --glass-border:    #DCE4EC;
  --glass-border-hover: var(--tertiary);
  --glass-blur:      none;
  --glass-shadow:    0 2px 4px rgba(0,41,64,.04), 0 12px 32px rgba(0,41,64,.07);

  color: var(--dark);
}

/* ---------- Fond de page ---------- */
.ls-page--light {
  /* Bleu neige pastel (#E6EEF4), nettement plus doux que le --bg d'origine
     (#F7F8FC) — retour du propriétaire le 2026-09-04 : le blanc « faisait mal
     aux yeux ». Cartes blanches à 1.17:1 du fond : elles se détachent.
     Sur ce fond : titres 9.84:1, texte doux 4.68:1 ; --secondary tombe à
     4.15:1, d'où le bleu #00619A (5.64:1) pour les liens et accents posés
     directement sur le fond. */
  --snow: var(--bg);
}
.ls-page--light::before {
  background-image: none !important;
  background: var(--snow) !important;
}
.ls-page--light::after { display: none !important; }
body:has(.ls-page--light) { background-color: var(--bg); }

/* ---------- Typographie ---------- */
.ls-page--light h1,
.ls-page--light h2,
.ls-page--light h3,
.ls-page--light h4 {
  color: var(--primary);
  text-shadow: none;
}
.ls-page--light p { color: var(--text-muted); }
.ls-page--light a:not(.btn) { color: #00619A; }
.ls-page--light a:not(.btn):hover { color: var(--primary); }

/* Titres de page. Le bloc .ls-page__header--hero conserve son dégradé sombre :
   son texte doit rester blanc, sinon il devient illisible. */
.ls-page--light .ls-page__title { color: var(--primary); }
.ls-page--light .ls-page__subtitle { color: var(--text-muted); }
.ls-page--light .ls-page__header--hero .ls-page__title { color: var(--white); }
.ls-page--light .ls-page__header--hero .ls-page__subtitle { color: rgba(255,255,255,.85); }
.ls-page--light .ls-page__header--hero .ls-filters__label { color: rgba(255,255,255,.8); }
.ls-page--light .ls-page__header--hero .ls-filters__reset { color: var(--tertiary); }
.ls-page--light .ls-page__section-title { color: var(--primary); }
.ls-page--light .ls-page__section-title span { color: var(--text-muted); }

/* ---------- Fil d'Ariane ---------- */
.ls-page--light .breadcrumb-item a { color: var(--secondary); }
.ls-page--light .breadcrumb-item.active { color: var(--text-muted); }
.ls-page--light .breadcrumb-item + .breadcrumb-item::before { color: var(--text-light); }

/* ---------- Cartes ---------- */
.ls-page--light .ls-glass-card {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--glass-shadow);
}
.ls-page--light .ls-glass-card:hover { border-color: var(--tertiary); }
.ls-page--light .ls-glass-card__body h2,
.ls-page--light .ls-glass-card__body h3 { color: var(--primary); }
.ls-page--light .ls-glass-card__body p { color: var(--text-muted); }
.ls-page--light .ls-glass-card__meta { color: var(--text-muted); }

.ls-page--light .ls-glass-panel,
.ls-page--light .ls-glass-panel--light {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ls-page--light .ls-glass-panel h3,
.ls-page--light .ls-glass-panel h5 { color: var(--primary); }

/* ---------- Filtres ---------- */
.ls-page--light .ls-filters__label { color: var(--text-muted); }
.ls-page--light .ls-filters__input,
.ls-page--light .ls-filters__select {
  background: var(--surface);
  border-color: var(--line);
  color: var(--dark);
}
.ls-page--light .ls-filters__input::placeholder { color: var(--text-light); }
.ls-page--light .ls-filters__input-icon { color: var(--text-light); }
.ls-page--light .ls-filters__select option { color: var(--dark); background: var(--surface); }
.ls-page--light .ls-filters__reset { color: var(--secondary); }
.ls-page--light .ls-filters__reset:hover { color: var(--primary); }

/* ---------- Cartes magasin (page station) ---------- */
.ls-page--light .ls-shop-item__name { color: var(--primary); }
.ls-page--light .ls-shop-item__address { color: var(--text-muted); }

/* ---------- Fiche magasin ---------- */
/* .ls-shop-header est le CONTENEUR : la carte visible est .ls-shop-header__inner,
   qui porte déjà fond, bordure, ombre et radius 24px. Peindre les deux dessinait
   un rectangle blanc à angles droits derrière la carte arrondie — le « carré »
   visible autour du bloc (signalé le 2026-09-04). Le conteneur reste transparent. */
.ls-page--light .ls-shop-sidebar,
.ls-page--light .ls-shop-cancel-notice,
.ls-page--light .ls-articles-carousel,
.ls-page--light .ls-teaser-compact,
.ls-page--light .ls-flow-card {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--glass-shadow);
}
.ls-page--light .ls-shop-header__name,
.ls-page--light .ls-shop-section__title,
.ls-page--light .ls-shop-sidebar__title,
.ls-page--light .ls-flow-card__title { color: var(--primary); }
.ls-page--light .ls-shop-header__location,
.ls-page--light .ls-shop-sidebar__label,
.ls-page--light .ls-shop-sidebar__sub,
.ls-page--light .ls-shop-sidebar__hours-table,
.ls-page--light .ls-flow-card__subtitle,
.ls-page--light .ls-richtext { color: var(--text-muted); }
.ls-page--light .ls-shop-sidebar__hours-table td { color: var(--text-muted); }
.ls-page--light .ls-shop-sidebar__hours-table tr td:first-child { color: var(--dark); }
.ls-page--light .ls-shop-sidebar__item { border-color: var(--line-soft); }
.ls-page--light .ls-shop-sidebar__icon { background: var(--blue-light); color: var(--secondary); }

/* ---------- États vides et squelettes ---------- */
.ls-page--light .ls-empty-state i { color: var(--tertiary); }
.ls-page--light .ls-empty-state h3 { color: var(--primary); }
.ls-page--light .ls-empty-state p { color: var(--text-muted); }
.ls-page--light .ls-skeleton-card {
  background: var(--surface);
  border-color: var(--line);
}
.ls-page--light .ls-skeleton-card__image,
.ls-page--light .ls-skeleton-card__line { background: var(--surface-2); }

/* ---------- Formulaires ---------- */
.ls-page--light .form-control,
.ls-page--light .form-select {
  background: var(--surface);
  border-color: var(--line);
  color: var(--dark);
}
.ls-page--light .form-control::placeholder { color: var(--text-light); }
.ls-page--light .form-label { color: var(--primary); }
.ls-page--light .form-select option { color: var(--dark); background: var(--surface); }

/* ---------- Boutons secondaires sur fond clair ---------- */
.ls-page--light .btn-outline-ls {
  color: var(--primary);
  border-color: var(--primary);
}
.ls-page--light .btn-outline-ls:hover {
  background: var(--primary);
  color: var(--white);
}

/* ---------- Le hero de la page station reste sombre ----------
   Il porte sa propre image et son dégradé : on ne touche à rien
   à l'intérieur de .ls-station-hero, seulement au corps de page. */
.ls-page--light .ls-station-hero__title,
.ls-page--light .ls-station-hero__meta,
.ls-page--light .ls-station-hero__desc,
.ls-page--light .ls-station-hero__breadcrumb .breadcrumb-item a,
.ls-page--light .ls-station-hero__breadcrumb .breadcrumb-item.active {
  color: inherit;
}

/* ---------- Accessibilité ---------- */
.ls-page--light :focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* ============================================================
   Neutralisation des couleurs blanches en style inline
   ------------------------------------------------------------
   Les vues du tunnel (panier, catalogue) portent des couleurs
   `style="color: rgba(255,255,255,…)"` héritées du thème sombre.
   Un style inline l'emporte sur une classe : on ne peut le
   contrer qu'avec `!important`, ou en éditant 29 lignes de vue
   au risque de casser des expressions Wappler. On préfère ici
   une surcharge ciblée, réversible et sans toucher aux vues.
   ============================================================ */

/* Texte courant du tunnel clair */
.ls-page--light [style*="rgba(255,255,255"],
.ls-page--light [style*="rgba(255, 255, 255"] {
  color: var(--text-muted) !important;
}
/* Blanc pur inline -> encre principale */
.ls-page--light [style*="color: var(--white)"] {
  color: var(--primary) !important;
}
/* Séparateurs blancs -> ligne claire */
.ls-page--light [style*="border-top: 1px solid rgba(255,255,255"],
.ls-page--light [style*="border-top: 1px solid rgba(255, 255, 255"] {
  border-top-color: var(--line-soft) !important;
}
.ls-page--light [style*="border-bottom: 1px solid rgba(255,255,255"],
.ls-page--light [style*="border-bottom: 1px solid rgba(255, 255, 255"] {
  border-bottom-color: var(--line-soft) !important;
}
/* Fonds blancs translucides -> surface neutre */
.ls-page--light [style*="background: rgba(255,255,255"],
.ls-page--light [style*="background: rgba(255, 255, 255"] {
  background: var(--surface-2) !important;
}

/* Exceptions : éléments qui doivent rester blancs même en page claire
   (fond coloré sous le texte : boutons, badges, blocs sombres). */
.ls-page--light .btn-accent,
.ls-page--light .btn-accent *,
.ls-page--light .btn-ls-primary,
.ls-page--light .btn-ls-primary *,
.ls-page--light .btn-secondary-ls,
.ls-page--light .btn-secondary-ls *,
.ls-page--light .ls-page__header--hero [style*="rgba(255,255,255"],
.ls-page--light .ls-page__header--hero [style*="rgba(255, 255, 255"],
.ls-page--light .ls-station-hero [style*="rgba(255,255,255"],
.ls-page--light .ls-station-hero [style*="rgba(255, 255, 255"],
.ls-page--light .ls-cart-bar [style*="rgba(255,255,255"],
.ls-page--light .ls-cart-bar [style*="rgba(255, 255, 255"] {
  color: inherit !important;
}
.ls-page--light .btn-accent,
.ls-page--light .btn-ls-primary,
.ls-page--light .btn-secondary-ls {
  color: var(--white) !important;
}

/* ============================================================
   Récapitulatif panier (.ls-recap-*) en thème clair
   ============================================================ */
.ls-page--light .ls-recap-shopbar {
  background: var(--surface);
  border: 1px solid var(--line);
}
.ls-page--light .ls-recap-shopbar__info strong,
.ls-page--light .ls-recap-shopbar__range { color: var(--primary) !important; }
.ls-page--light .ls-recap-shopbar__station,
.ls-page--light .ls-recap-shopbar__days { color: var(--text-muted) !important; }

.ls-page--light .ls-recap-member {
  background: var(--surface);
  border-color: var(--line);
}
.ls-page--light .ls-recap-member[open],
.ls-page--light .ls-recap-member:hover { border-color: var(--tertiary); }
.ls-page--light .ls-recap-member__name,
.ls-page--light .ls-recap-member__price-amount,
.ls-page--light .ls-recap-member__article-name { color: var(--primary) !important; }
.ls-page--light .ls-recap-member__article-name-summary,
.ls-page--light .ls-recap-member__article-range,
.ls-page--light .ls-recap-member__article-code,
.ls-page--light .ls-recap-member__price-days,
.ls-page--light .ls-recap-member__desc,
.ls-page--light .ls-recap-member__morpho { color: var(--text-muted) !important; }
.ls-page--light .ls-recap-member__body { border-top-color: var(--line-soft); }
.ls-page--light .ls-recap-member__modify { color: var(--secondary) !important; }

.ls-page--light .ls-recap-block,
.ls-page--light .ls-recap-totals {
  background: var(--surface);
  border-color: var(--line);
}
.ls-page--light .ls-recap-block__title { color: var(--primary) !important; }

/* Le bloc de dates utilise un fond Glacier Sky très clair : l'encre doit être sombre */
.ls-page--light .ls-recap-shopbar * { color: inherit; }

/* ============================================================
   Couleurs d'accent sur fond clair
   ------------------------------------------------------------
   La charte réserve Glacier Sky (#48CAE4) et Sunset Orange
   (#FF6B35) aux fonds sombres : « accent uniquement sur surfaces
   sombres ou avec texte blanc » (UX spec, contrastes WCAG).
   Sur fond blanc, les prix passent en Ocean Blue et les mentions
   d'acompte en orange foncé, qui tiennent le 4,5:1.
   ============================================================ */
.ls-page--light .ls-recap-member__price-amount,
.ls-page--light .ls-recap-totals [style*="var(--tertiary)"],
.ls-page--light [style*="color: var(--tertiary)"] {
  color: #00619A !important;
}
.ls-page--light [style*="color: var(--accent)"],
.ls-page--light .ls-recap-totals__deposit,
.ls-page--light .ls-recap-totals__deposit * {
  color: var(--accent-dark) !important;
}

/* ============================================================
   Story 12.6 — Fiche magasin : gammes louables, réassurance,
   modules à venir. Composants nouveaux, en thème clair.
   ============================================================ */

/* ---- Titre de section avec compteur ---- */
.ls-shop-section__count {
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: .5rem;
}
.ls-shop-section__note {
  font-size: .82rem;
  color: var(--text-muted);
  margin: .75rem 0 0;
}

/* ---- Tuiles de gammes ---- */
.ls-range-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .9rem;
}
.ls-range-tile {
  background: var(--white);
  border: 1px solid var(--border-lighter, #e0e5eb);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}
.ls-range-tile:hover {
  transform: translateY(-2px);
  border-color: var(--tertiary);
}
.ls-range-tile__media {
  height: 108px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ls-range-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ls-range-tile__media i {
  font-size: 1.9rem;
  color: var(--secondary);
  opacity: .55;
}
.ls-range-tile__body {
  padding: .75rem .9rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ls-range-tile__name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .98rem;
  color: var(--primary);
}
.ls-range-tile__sub {
  font-size: .8rem;
  color: var(--text-muted);
}
.ls-range-tile__price {
  font-size: .88rem;
  font-weight: 600;
  color: var(--secondary);
  margin-top: .3rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Bloc de réservation : prix d'entrée + réassurance ---- */
.ls-shop-sidebar__from {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}
.ls-shop-sidebar__from strong { font-weight: 800; }

.ls-trust-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: .5rem;
}
.ls-trust-list li {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.ls-trust-list i {
  color: var(--level-debutant, #2E7D4F);
  flex: none;
  margin-top: .12rem;
}
.ls-shop-sidebar__phone {
  margin: .9rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--border-lighter, #e0e5eb);
  font-size: .84rem;
  color: var(--text-muted);
}

/* ---- Modules à venir ---- */
.ls-soon-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.ls-soon-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.15rem;
  background: var(--white);
  border: 1px dashed var(--border-light, #d0d8e0);
  border-radius: var(--radius-md);
  opacity: .8;
}
.ls-soon-item > i {
  font-size: 1.35rem;
  color: var(--secondary);
  flex: none;
}
.ls-soon-item strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .95rem;
  color: var(--primary);
}
.ls-soon-item span {
  font-size: .8rem;
  color: var(--text-muted);
}
.ls-soon-item__badge {
  margin-left: auto;
  flex: none;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent-dark);
  background: var(--orange-light);
  padding: .28rem .6rem;
  border-radius: 50px;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .ls-range-tiles { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .ls-range-tile__media { height: 84px; }
  .ls-soon-item { padding: .85rem 1rem; }
}

/* ============================================================
   Story 12.4 — Cartes de liste orientées réservation
   ------------------------------------------------------------
   Mesuré avant modification (mesure-listes.js) :
     desktop  404 px avant la 1re carte, 5-6 cartes visibles → correct
     mobile   463 px sur 844, 2 cartes visibles → en-tête à compacter
   On ne touche donc au gabarit du hero QUE sous 768 px.
   ============================================================ */

/* ---------- Prix d'entrée ---------- */
.ls-card-price {
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid var(--line-soft, #EBF0F5);
  font-size: .88rem;
  color: var(--text-muted);
}
.ls-card-price strong {
  color: var(--secondary);
  font-weight: 800;
  font-size: 1.02rem;
}

/* ---------- Matériel proposé ---------- */
.ls-card-tags {
  margin-top: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.ls-card-tags i { opacity: .75; }

/* ---------- Rangées alignées ----------
   Toutes les cartes d'une même rangée ont la même hauteur et leur prix est
   calé en bas : sans cela, une carte avec prix dépasse ses voisines. */
.ls-page--light .row > [class*="col-"] > a,
.ls-page--light .row > [class*="col-"] > a > .ls-glass-card { height: 100%; }
.ls-page--light .ls-glass-card {
  display: flex;
  flex-direction: column;
}
.ls-page--light .ls-glass-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.ls-page--light .ls-card-price { margin-top: auto; }

/* ---------- Compteurs de la ligne meta ----------
   Remplace les styles inline en --tertiary (1.94:1 sur blanc, illisible). */
.ls-card-shops,
.ls-card-rating {
  font-weight: 600;
  color: var(--secondary);
}
/* --accent-dark (#E05A2B) ne donne que 3.71:1 sur blanc : sous le seuil AA
   de 4.5:1 pour ce corps de texte. On descend d'un cran (5.12:1). */
.ls-card-rating { color: #C1440E; }

/* ---------- En-tête compact sur mobile ---------- */
@media (max-width: 767.98px) {
  .ls-page__header--hero {
    padding: 1.4rem 1.25rem;
    border-radius: var(--radius-md);
  }
  .ls-page__header--hero .ls-page__title {
    font-size: 1.6rem;
    margin-bottom: .35rem;
  }
  .ls-page__header--hero .ls-page__subtitle {
    font-size: .92rem;
    margin-bottom: 0;
  }
  .ls-filters { margin-top: 1rem; }
  .ls-filters .row { --bs-gutter-y: .6rem; }
  .ls-filters__label {
    font-size: .72rem;
    margin-bottom: .2rem;
  }
}

/* ============================================================
   Story 12.5 — Page station : le choix du magasin d'abord
   ------------------------------------------------------------
   Mesuré avant modification (mesure-station.js) : le Leaflet occupait
   740 px sur desktop (height: calc(100vh - 160px) dans pages.css), soit
   plus que le hero, pour 2 magasins listés. La carte est un repère
   géographique, pas le sujet de la page : on la ramène à une hauteur
   fixe raisonnable et on la laisse suivre le scroll.
   ============================================================ */

.ls-page--light .ls-station-sidebar__leaflet {
  height: 420px;
  max-height: calc(100vh - 220px);
}

/* La carte reste visible pendant qu'on parcourt les magasins. */
@media (min-width: 992px) {
  .ls-page--light .ls-station-sidebar {
    position: sticky;
    top: 96px;                       /* navbar 69 px + respiration */
  }
}

/* ---------- Matériel proposé sur la carte magasin ---------- */
.ls-page--light .ls-shop-item__tags {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--secondary);
}
.ls-page--light .ls-shop-item__tags i { opacity: .75; }

/* ---------- Cartes magasin sans vide interne ----------
   L'image est en height:100% + min-height:180px : elle imposait la hauteur
   de la carte, et le corps (plus court) se retrouvait creusé. On borne la
   photo à la hauteur du texte pour que le contenu dicte le gabarit. */
.ls-page--light .ls-shop-item__card > .row { align-items: stretch; }
.ls-page--light .ls-shop-item__body {
  height: auto;
  justify-content: flex-start;
  gap: .1rem;
}
@media (min-width: 576px) {
  .ls-page--light .ls-shop-item__img { min-height: 0; }
}

/* ---------- Lisibilité sur fond clair ---------- */
.ls-page--light .ls-shop-item__name { color: var(--primary); }
.ls-page--light .ls-shop-item__address { color: var(--text-muted); }
.ls-page--light .ls-shop-item__price { color: var(--secondary); }
.ls-page--light .ls-shop-item__rating { color: #C1440E; }
.ls-page--light .ls-station-sidebar__title { color: var(--primary); }

@media (max-width: 991.98px) {
  .ls-page--light .ls-station-sidebar__leaflet { height: 300px; }
}

/* ============================================================
   Catalogue & flux de réservation en clair — reprise 12.7 / 12.8
   ------------------------------------------------------------
   Le catalogue et /reserver portaient encore le fond sombre. Les
   composants (cartes produit, carte de dates, stepper) sont déjà
   clairs par construction ; ce bloc neutralise les boîtes « verre
   sombre » posées en style inline et habille les onglets membres et
   les filtres de gamme, désormais pilotés par classes.
   ============================================================ */

/* ---------- Boîtes verre sombre en style inline ---------- */
.ls-page--light [style*="background: rgba(0, 41, 64, 0.5)"] {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--glass-shadow);
}
.ls-page--light [style*="background: rgba(255,255,255,0.0"],
.ls-page--light [style*="background: rgba(255, 255, 255, 0.0"] {
  background-color: var(--surface-2) !important;
}
.ls-page--light [style*="rgba(255,255,255,0.1"],
.ls-page--light [style*="rgba(255,255,255,0.08"],
.ls-page--light [style*="rgba(255,255,255,0.06"],
.ls-page--light [style*="rgba(255,255,255,0.15"] { border-color: var(--line) !important; }

/* ---------- Barre basse du catalogue : reste sombre (décision Epic 12) ---------- */
.ls-page--light .ls-cart-bar [style*="rgba(255,255,255"] {
  color: rgba(255,255,255,.75) !important;
  border-color: rgba(255,255,255,.15) !important;
  background-color: transparent !important;
}
.ls-page--light .ls-cart-bar [style*="color: var(--tertiary)"] { color: var(--tertiary) !important; }

/* ---------- Bandeau compact ---------- */
.ls-page--light .ls-catalogue-bar h1 { font-size: 1.3rem !important; margin-bottom: .1rem; }
.ls-page--light .ls-catalogue-bar p { font-size: .88rem; }
@media (max-width: 767.98px) {
  .ls-page--light .ls-catalogue-bar { gap: .5rem !important; }
  .ls-page--light .ls-catalogue-bar h1 { font-size: 1.05rem !important; }
  .ls-page--light .ls-catalogue-bar p { font-size: .82rem; }
  .ls-page--light .ls-catalogue-bar .btn { font-size: .76rem; padding: .3rem .7rem; }
}

/* ---------- Membres en onglets ---------- */
.ls-page--light .ls-member-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ls-page--light .ls-member-tab {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .95rem .4rem .55rem;
  border-radius: 50px; cursor: pointer; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); color: var(--primary);
  font-size: .85rem; font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ls-page--light .ls-member-tab:hover { border-color: var(--secondary); }
.ls-page--light .ls-member-tab img { width: 28px; height: 28px; object-fit: contain; }
.ls-page--light .ls-member-tab--active { background: var(--primary); border-color: var(--primary); color: var(--white); }
.ls-page--light .ls-member-tab--active span { color: var(--white) !important; }
.ls-page--light .ls-member-tab i[data-pill-check] { color: var(--secondary) !important; }
.ls-page--light .ls-member-tab--active i[data-pill-check] { color: var(--tertiary) !important; }
.ls-page--light .ls-member-tab--add { border-style: dashed; background: transparent; gap: .3rem; }
.ls-page--light .ls-member-tab--add i,
.ls-page--light .ls-member-tab--add span { color: #00619A !important; }   /* 5.64:1 sur le fond neige */

/* ---------- Filtres de gamme ---------- */
.ls-page--light .ls-range-chip {
  font-size: .74rem; padding: .25rem .75rem; border-radius: 20px;
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--line);
  transition: all .15s ease;
}
.ls-page--light .ls-range-chip:hover { border-color: var(--secondary); color: var(--secondary); }
.ls-page--light .ls-range-chip--active,
.ls-page--light .ls-range-chip--active:hover { background: var(--secondary); color: var(--white); border-color: var(--secondary); }

/* ---------- Cartes produit sur fond neige ---------- */
.ls-page--light .ls-product-card { border-color: var(--line); }
.ls-page--light .ls-product-card--selected {
  border-color: var(--secondary);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(0,119,182,.15);
}

/* ---------- Chip « Groupe non sauvegardé » ---------- */
.ls-page--light .ls-chip-save { background: var(--surface); border-color: var(--line); color: var(--text-muted); }
.ls-page--light .ls-chip-save__text { color: var(--text-muted); }
.ls-page--light .ls-chip-save__icon,
.ls-page--light .ls-chip-save__cta { color: var(--secondary); }
.ls-page--light .ls-chip-save__cta:hover { color: var(--primary); }
.ls-page--light .ls-chip-save--confirmed { background: var(--blue-light); border-color: var(--secondary); }

/* ---------- /reserver mode loueur : carrousel et teaser ---------- */
.ls-page--light .ls-articles-carousel__title,
.ls-page--light .ls-article-slide__name,
.ls-page--light .ls-teaser-compact__title { color: var(--primary); }
.ls-page--light .ls-articles-carousel__count,
.ls-page--light .ls-teaser-compact__reassurance,
.ls-page--light .ls-teaser-compact__steps li em { color: var(--text-muted); }
.ls-page--light .ls-article-slide__range { color: var(--secondary); }
.ls-page--light .ls-article-slide__price { color: #C1440E; }
.ls-page--light .ls-article-slide__img-wrap,
.ls-page--light .ls-articles-carousel__thumb { background: var(--surface-2); }
.ls-page--light .ls-teaser-compact { background: var(--surface); border-color: var(--line); box-shadow: var(--glass-shadow); }
.ls-page--light .ls-teaser-compact__steps li { color: var(--dark); border-bottom-color: var(--line-soft); }
.ls-page--light .ls-teaser-compact__steps li i { color: var(--secondary); }


/* ============================================================
   Cartes produit, stepper et sélecteur de dates en clair
   ------------------------------------------------------------
   pages.css l. 953 assombrit TOUTES les cartes produit de .ls-page
   (rgba(0,51,80,.7)) et force stepper / mini-groupe / sélecteur de
   dates en blanc. On décline ici la version claire, calquée sur le
   bloc .ls-page--functional (l. 999) qui existait déjà.
   ============================================================ */
.ls-page--light .ls-product-card {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--glass-shadow);
}
.ls-page--light .ls-product-card:hover {
  border-color: var(--secondary);
  box-shadow: 0 8px 24px rgba(0,41,64,.10);
}
.ls-page--light .ls-product-card--selected {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(0,119,182,.18), 0 8px 24px rgba(0,41,64,.10);
}
.ls-page--light .ls-product-card__name { color: var(--primary); }
.ls-page--light .ls-product-card__price { color: #00619A; }
.ls-page--light .ls-product-card__image { background: var(--surface-2) !important; }
.ls-page--light .ls-product-card h3[style*="color: #fff"],
.ls-page--light h3[style*="color: #fff"] { color: var(--primary) !important; }
.ls-page--light [style*="rgba(255,255,255,0.2"] { border-color: var(--line) !important; }

/* ---------- Stepper Dates → Profils → Catalogue ---------- */
.ls-page--light .ls-stepper__dot { background: var(--surface); color: var(--text-light); border-color: var(--line); }
.ls-page--light .ls-stepper__step--active .ls-stepper__dot { background: var(--secondary); color: var(--white); border-color: var(--secondary); }
.ls-page--light .ls-stepper__step--done .ls-stepper__dot { background: #00619A; color: var(--white); border-color: #00619A; }
.ls-page--light .ls-stepper__label { color: var(--text-muted); }
.ls-page--light .ls-stepper__step--active .ls-stepper__label { color: var(--primary); }
.ls-page--light .ls-stepper__step--done .ls-stepper__label { color: #00619A; }
.ls-page--light .ls-stepper__bar { background: var(--line); }
.ls-page--light .ls-step-icon { background: var(--blue-light); border-color: transparent; }
.ls-page--light .ls-step-icon i { color: var(--secondary); }

/* ---------- Mini-groupe sous la carte de dates ---------- */
.ls-page--light .ls-mini-group { background: var(--surface); border-color: var(--line); }
.ls-page--light .ls-mini-group__avatar { border-color: var(--white); background: var(--surface-2); }
.ls-page--light .ls-mini-group__text { color: var(--text-muted); }

/* ---------- Sélecteur de dates (datepicker-locski.css est sombre) ---------- */
.ls-page--light .ls-range-trigger { background: var(--surface-2); border-color: var(--line); }
.ls-page--light .ls-range-trigger:hover { border-color: var(--secondary); background: var(--surface-2); }
.ls-page--light .ls-range-trigger--filled { border-color: var(--secondary); background: var(--blue-light); }
.ls-page--light .ls-range-trigger__divider { background: var(--line); }
.ls-page--light .ls-range-trigger__label { color: var(--text-muted); }
.ls-page--light .ls-range-trigger__value { color: var(--text-light); }
.ls-page--light .ls-range-trigger--filled .ls-range-trigger__value { color: var(--primary); }
.ls-page--light .ls-range-trigger__icon { color: var(--secondary); }

/* ============================================================
   Bandes à dégradé sombre — là où le bleu profond garde son sens
   (retour propriétaire 2026-09-04 : conserver du sombre sur les
   hero, bandeaux et modales). Bandeau du catalogue + en-tête /reserver.
   ============================================================ */
.ls-page--light .ls-catalogue-bar,
.ls-page--light .ls-resa-head {
  background: linear-gradient(135deg, #001a2e 0%, #003D5B 60%, #005A8C 100%);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  color: var(--white);
  box-shadow: 0 8px 24px rgba(0,41,64,.22);
}
.ls-page--light .ls-catalogue-bar h1,
.ls-page--light .ls-resa-head h1 { color: var(--white); }
.ls-page--light .ls-catalogue-bar p,
.ls-page--light .ls-resa-head p,
.ls-page--light .ls-catalogue-bar [style*="rgba(255,255,255"],
.ls-page--light .ls-resa-head [style*="rgba(255,255,255"] { color: rgba(255,255,255,.82) !important; }
.ls-page--light .ls-catalogue-bar [style*="color: var(--tertiary)"],
.ls-page--light .ls-resa-head [style*="color: var(--tertiary)"] { color: var(--tertiary) !important; }
.ls-page--light .ls-catalogue-bar .btn-outline-ls { border-color: rgba(255,255,255,.55); color: var(--white); background: transparent; }
.ls-page--light .ls-catalogue-bar .btn-outline-ls:hover { background: rgba(255,255,255,.12); color: var(--white); border-color: var(--white); }
.ls-page--light .ls-resa-head { margin-bottom: 1.5rem !important; }
@media (max-width: 767.98px) {
  .ls-page--light .ls-catalogue-bar,
  .ls-page--light .ls-resa-head { padding: .8rem 1rem; }
}

/* ---------- Badge « Adapté à {prénom} » : la couleur va au positif (FR18) ---------- */
.ls-page--light .ls-badge-fit {
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  background: rgba(46, 125, 50, .12); color: #1E6B23;        /* vert niveau débutant, 6.9:1 sur son fond */
  border: 1px solid rgba(46, 125, 50, .25);
}
.ls-page--light .ls-badge-fit i { font-size: .65rem; }

/* ---------- Bouton « Choisir ce matériel » : inline var(--accent) = 2.84:1 ---------- */
.ls-page--light [data-action="select"] { background: #C1440E !important; color: var(--white) !important; }
.ls-page--light [data-action="select"]:hover { background: #A63A0B !important; }
/* Mode browse : même bouton orange, sans data-action (il ouvre la modale) */
.ls-page--light .ls-product-card .btn[style*="var(--accent)"] { background: #C1440E !important; color: var(--white) !important; }
.ls-page--light .ls-product-card .btn[style*="var(--accent)"]:hover { background: #A63A0B !important; }
/* État « Sélectionné » : le JS repeint le bouton en var(--tertiary) (1.94:1) → bleu lisible */
.ls-page--light .ls-product-card--selected [data-action="select"] { background: #00619A !important; }
.ls-page--light .ls-product-card--selected [data-action="select"]:hover { background: var(--primary) !important; }

/* ============================================================
   Tunnel — réglages du loueur rendus visibles (2026-09-05)
   ============================================================ */
/* Option « à proposer en miniature » (shop_options.is_thumbnail_suggested) */
.ls-page--light .ls-opt--featured { background: var(--blue-light); border-radius: 10px; padding: .35rem .55rem; margin: .25rem 0 !important; }
.ls-page--light .ls-opt--featured label { font-weight: 600; }
.ls-page--light .ls-opt__note { display: block; font-size: .68rem; font-weight: 500; color: var(--text-muted); }
/* Fiche : réservation en ligne pas encore ouverte (KYB) */
.ls-page--light .ls-shop-item__soon { font-size: .8rem; color: var(--text-muted); margin: 0 0 .5rem; }
.ls-page--light .ls-shop-sidebar__soon { font-size: .88rem; color: var(--text-muted); background: var(--surface-2); border-radius: 10px; padding: .6rem .8rem; margin: 0 0 .6rem; }
/* Calendrier : jours sous le délai de blocage du magasin */
.ls-cal-day--locked { background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(0,41,64,.06) 4px 8px); cursor: not-allowed; }
/* Magasin non réservable (pas de saison ouverte, Stripe non vérifié) : ne reste que le message */
.ls-resa-closed .ls-range-trigger, .ls-resa-closed .ls-deadline-note, .ls-resa-closed .ls-member-dates-hint, .ls-resa-closed .btn-accent { display: none !important; }
.ls-deadline-note, .ls-season-note, .ls-rules { font-size: .8rem; color: var(--text-muted); text-align: left; margin: .35rem 0 .6rem; }
.ls-rules { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; }
.ls-rules__title { font-weight: 700; color: var(--primary); }
.ls-rules__item { background: var(--blue-light); color: #00619A; border-radius: 999px; padding: .2rem .6rem; font-weight: 600; }
/* Réassurance avant paiement et sur la réservation */
.ls-trust-list--pay { margin-top: 1rem; font-size: .85rem; }
.ls-pay-cancelled { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--secondary); border-radius: 0 12px 12px 0; padding: .8rem 1rem; margin: 0 0 1rem; color: var(--dark); font-size: .92rem; }

/* ---------- Modale pitch (fond sombre) dans une page claire ---------- */
.ls-page--light .ls-pitch-overlay__card,
.ls-page--light .ls-pitch-overlay__card h2,
.ls-page--light .ls-pitch-overlay__card h3,
.ls-page--light .ls-pitch-overlay__card .ls-pitch-overlay__title { color: var(--white); }
.ls-page--light .ls-pitch-overlay__card p,
.ls-page--light .ls-pitch-overlay__card .ls-pitch-overlay__text,
.ls-page--light .ls-pitch-overlay__card [style*="rgba(255,255,255"],
.ls-page--light .ls-pitch-overlay__card [style*="rgba(255, 255, 255"] { color: rgba(255,255,255,.82) !important; }
.ls-page--light .ls-pitch-overlay__card .ls-pitch-overlay__features,
.ls-page--light .ls-pitch-overlay__card .ls-pitch-overlay__features * { color: var(--white); }
.ls-page--light .ls-pitch-overlay__card small,
.ls-page--light .ls-pitch-overlay__card .ls-pitch-overlay__note { color: rgba(255,255,255,.6); }
.ls-page--light .ls-pitch-overlay__card .btn-accent { color: var(--white) !important; }
.ls-page--light .ls-pitch-overlay__card .ls-pitch-overlay__sub { color: rgba(255,255,255,.6) !important; }

/* ============================================================
   Étape « Profils » de /reserver — retour au clair (2026-09-05)
   ------------------------------------------------------------
   pages.css l. 800-900 force en blanc, pour toute .ls-page, le titre
   « Mesures du groupe », le prénom sous l'avatar, la carte du membre et
   les champs de mesures. Sur fond neige, ces textes disparaissaient.
   Les composants d'origine (components.css) sont déjà clairs : on rétablit
   simplement leurs couleurs dans le scope .ls-page--light.
   ============================================================ */
.ls-page--light .ls-morpho-progress__title { color: var(--primary); }
.ls-page--light .ls-morpho-progress__count { color: #00619A; font-weight: 700; }
.ls-page--light .ls-morpho-progress__bar { background: var(--surface-2); }

.ls-page--light .ls-member-selector__avatar { background: var(--surface); border-color: var(--line); }
.ls-page--light .ls-member-selector__item--active .ls-member-selector__avatar,
.ls-page--light .ls-member-selector__item--done .ls-member-selector__avatar { border-color: var(--secondary); }
.ls-page--light .ls-member-selector__name { color: var(--text-muted); }
.ls-page--light .ls-member-selector__item--active .ls-member-selector__name { color: var(--primary); font-weight: 600; }

.ls-page--light .ls-member-form { background: var(--surface); border-color: var(--line); box-shadow: var(--glass-shadow); }
.ls-page--light .ls-member-form__header { border-bottom-color: var(--line-soft); }
.ls-page--light .ls-member-form__avatar { background: var(--surface-2); }
.ls-page--light .ls-member-form__header strong { color: var(--primary); }
/* « Ski · Intermediaire » est posé en style inline blanc dans la vue */
.ls-page--light .ls-member-form__header [style*="rgba(255,255,255"] { color: var(--text-muted) !important; }

.ls-page--light .ls-measure { background: var(--surface); border-color: var(--line); }
.ls-page--light .ls-measure:focus-within { border-color: var(--secondary); }
.ls-page--light .ls-measure--filled { border-color: var(--secondary); background: var(--blue-light); }
.ls-page--light .ls-measure__icon { background: var(--surface-2); color: var(--text-muted); }
.ls-page--light .ls-measure--filled .ls-measure__icon { background: rgba(0,119,182,.12); color: #00619A; }
.ls-page--light .ls-measure__label { color: var(--text-muted); }
.ls-page--light .ls-measure__input,
.ls-page--light .ls-measure__input-wrap select { color: var(--primary); }
.ls-page--light .ls-measure__input::placeholder { color: var(--text-light); }
.ls-page--light .ls-measure__unit,
.ls-page--light .ls-measure__optional { color: var(--text-light); }
.ls-page--light .ls-measure__ok { color: #1E6B23; }
.ls-page--light .ls-measure-help summary { color: #00619A; }
.ls-page--light .ls-measure-help__body,
.ls-page--light .ls-measure-help__body p { color: var(--text-muted); }

.ls-page--light .ls-reedit-banner { background: var(--surface); border-color: var(--secondary); }
.ls-page--light .ls-reedit-banner__content strong { color: var(--primary); }
.ls-page--light .ls-reedit-banner__content p { color: var(--text-muted); }
.ls-page--light .ls-reedit-banner__icon { color: #1E6B23; }

/* Dates de location par membre (session C) */
.ls-page--light .ls-member-period { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; font-size: .78rem; color: var(--text-muted); }
.ls-page--light .ls-member-period--custom { color: #00619A; font-weight: 600; }
.ls-page--light .ls-member-period--custom .bi { color: var(--accent); }
.ls-page--light .ls-member-period__edit { display: inline-flex; align-items: center; gap: .25rem; margin-left: .15rem; padding: .12rem .6rem; font-size: .72rem; font-weight: 600; line-height: 1.4; color: var(--secondary); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.ls-page--light .ls-member-period__edit:hover, .ls-page--light .ls-member-period__edit:focus-visible { background: var(--blue-light); border-color: var(--secondary); }
.ls-page--light .ls-member-period__edit .bi { font-size: .7rem; color: inherit; }
.ls-page--light .ls-member-tab__days { font-size: .68rem; font-weight: 700; color: var(--white); background: var(--accent); border-radius: 999px; padding: .05rem .4rem; }
.ls-page--light .ls-card-days { font-size: .68rem; color: var(--text-muted); line-height: 1.2; }
.ls-page--light .ls-member-period-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--glass-shadow); padding: 1rem; margin: 0 0 1rem; max-width: 420px; }
.ls-page--light .ls-member-period-panel__title { font-weight: 700; color: var(--primary); margin: 0; }
.ls-page--light .ls-member-period-panel__hint { font-size: .78rem; color: var(--text-muted); margin: .15rem 0 0; }
.ls-page--light .ls-member-period-panel__error { font-size: .8rem; color: #B42318; margin: .5rem 0 0; }
.ls-member-dates-hint { font-size: .8rem; color: var(--text-muted); text-align: center; margin: .6rem 0 0; }
.ls-recap-member__period { font-size: .78rem; font-weight: 600; color: #00619A; margin-top: .1rem; }
.ls-recap-member__period .bi { color: var(--accent); }