/* ═══════════════════════════════════════════════════════════════════════════
   La Mer Salée — Jauge de souscription coopérative
   Charte graphique officielle LMS — 3 thèmes disponibles

   Couleurs de la charte :
     glaz (dominante)   : #008b8b
     jaune vert (2aire) : #d3d700
     framboise (3aire)  : #e62059

   Utilisation des thèmes :
     Thème clair   → par défaut (aucune classe supplémentaire)
     Thème glaz    → ajouter la classe  lms-theme-glaz   sur .lms-widget
     Thème sombre  → ajouter la classe  lms-theme-sombre  sur .lms-widget
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Thème 1 : Clair — fond blanc, barre glaz, CTA jaune vert ──────────────── */
.lms-widget {
  --lms-bg:           #ffffff;
  --lms-bg-subtle:    rgba(0,139,139,.06);
  --lms-track:        #d0e9e9;
  --lms-fill:         #008b8b;          /* glaz exact */
  --lms-fill-end:     #00a89c;
  --lms-fill-glow:    rgba(0,139,139,.22);
  --lms-text:         #1c2e2e;
  --lms-muted:        #5a8888;
  --lms-accent:       #008b8b;
  --lms-border:       rgba(0,139,139,.18);
  --lms-ms-on:        #008b8b;
  --lms-ms-off:       #aacece;
  --lms-radius:       14px;
  --lms-radius-sm:    8px;
  --lms-shadow:       0 4px 24px rgba(0,0,0,.08);
  --lms-anim:         .75s cubic-bezier(.4,0,.2,1);
  --lms-font-serif:   Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  --lms-font-sans:    system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --lms-border:       #008b8b;          /* cadre glaz plein */
  --lms-border-width: 5px;
  --lms-btn-bg:       #d3d700;          /* jaune vert exact */
  --lms-btn-color:    #1c2e2e;
  --lms-btn-hover:    #bcbf00;
  --lms-btn-shadow:   rgba(211,215,0,.4);
  --lms-stat-hl-bg:   rgba(0,139,139,.07);
  --lms-stat-hl-bdr:  rgba(0,139,139,.18);
  --lms-stat-hl-val:  #008b8b;
  --lms-pct-color:    #e62059;          /* framboise */
  --lms-strip-a:      #e62059;          /* framboise */
  --lms-strip-b:      #008b8b;          /* glaz */
}

/* ── Thème 2 : Glaz — fond teal exact de la charte, CTA framboise ─────────── */
.lms-widget.lms-theme-glaz {
  --lms-border-width: 1px;
  --lms-bg:           #008b8b;
  --lms-bg-subtle:    rgba(0,0,0,.12);
  --lms-track:        rgba(0,0,0,.22);
  --lms-fill:         #ffffff;
  --lms-fill-end:     #d3d700;
  --lms-fill-glow:    rgba(255,255,255,.18);
  --lms-text:         #ffffff;
  --lms-muted:        rgba(255,255,255,.6);
  --lms-accent:       #d3d700;
  --lms-border:       rgba(255,255,255,.15);
  --lms-ms-on:        #d3d700;
  --lms-ms-off:       rgba(255,255,255,.28);
  --lms-shadow:       0 8px 36px rgba(0,0,0,.22);
  --lms-btn-bg:       #e62059;          /* framboise */
  --lms-btn-color:    #ffffff;
  --lms-btn-hover:    #cc1a50;
  --lms-btn-shadow:   rgba(230,32,89,.4);
  --lms-stat-hl-bg:   rgba(211,215,0,.14);
  --lms-stat-hl-bdr:  rgba(211,215,0,.28);
  --lms-stat-hl-val:  #d3d700;
  --lms-pct-color:    #d3d700;
  --lms-strip-a:      #d3d700;
  --lms-strip-b:      #e62059;
}

/* ── Thème 3 : Sombre — fond nuit teal, barre glaz → jaune vert ────────────── */
.lms-widget.lms-theme-sombre {
  --lms-border-width: 1px;
  --lms-bg:           #0c2323;
  --lms-bg-subtle:    rgba(255,255,255,.04);
  --lms-track:        #1a4040;
  --lms-fill:         #008b8b;
  --lms-fill-end:     #d3d700;
  --lms-fill-glow:    rgba(0,139,139,.38);
  --lms-text:         #f0f8f8;
  --lms-muted:        #5a9898;
  --lms-accent:       #d3d700;
  --lms-border:       rgba(0,139,139,.25);
  --lms-ms-on:        #d3d700;
  --lms-ms-off:       #2a5050;
  --lms-shadow:       0 8px 36px rgba(0,0,0,.5);
  --lms-btn-bg:       #d3d700;
  --lms-btn-color:    #0c2323;
  --lms-btn-hover:    #bcbf00;
  --lms-btn-shadow:   rgba(211,215,0,.35);
  --lms-stat-hl-bg:   rgba(211,215,0,.09);
  --lms-stat-hl-bdr:  rgba(211,215,0,.2);
  --lms-stat-hl-val:  #d3d700;
  --lms-pct-color:    #d3d700;
  --lms-strip-a:      #e62059;
  --lms-strip-b:      #d3d700;
}

/* ── Thème clair 2 — fond crème, barre framboise → jaune vert, CTA glaz ────── */
.lms-widget.lms-theme-clair2 {
  --lms-border-width: 1px;
  --lms-bg:           #fdf8f0;          /* crème papier */
  --lms-bg-subtle:    rgba(230,32,89,.05);
  --lms-track:        #f0dce2;          /* rose pâle */
  --lms-fill:         #e62059;          /* framboise exact */
  --lms-fill-end:     #d3d700;          /* jaune vert exact */
  --lms-fill-glow:    rgba(230,32,89,.2);
  --lms-text:         #1c1c1c;
  --lms-muted:        #996070;
  --lms-accent:       #e62059;
  --lms-border:       rgba(230,32,89,.15);
  --lms-ms-on:        #e62059;
  --lms-ms-off:       #e8c5ce;
  --lms-radius:       14px;
  --lms-radius-sm:    8px;
  --lms-shadow:       0 4px 24px rgba(0,0,0,.07);
  --lms-anim:         .75s cubic-bezier(.4,0,.2,1);
  --lms-font-serif:   Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  --lms-font-sans:    system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --lms-btn-bg:       #008b8b;          /* glaz */
  --lms-btn-color:    #ffffff;
  --lms-btn-hover:    #007070;
  --lms-btn-shadow:   rgba(0,139,139,.3);
  --lms-stat-hl-bg:   rgba(230,32,89,.07);
  --lms-stat-hl-bdr:  rgba(230,32,89,.18);
  --lms-stat-hl-val:  #e62059;
  --lms-pct-color:    #008b8b;          /* glaz */
  --lms-strip-a:      #d3d700;          /* jaune vert */
  --lms-strip-b:      #e62059;          /* framboise */
}

/* ── Reset minimal ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Corps de l'iframe ─────────────────────────────────────────────────────── */
body.lms-embed {
  background: transparent;
  font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  padding: .75rem;
  display: flex;
  align-items: flex-start;
}

/* ── Conteneur principal du widget ────────────────────────────────────────── */
.lms-widget {
  background: var(--lms-bg);
  color: var(--lms-text);
  font-family: var(--lms-font-sans);
  border-radius: var(--lms-radius);
  border: var(--lms-border-width, 1px) solid var(--lms-border);
  padding: 1.4rem 1.75rem 1.6rem;
  width: 100%;
  box-shadow: var(--lms-shadow);
  position: relative;
  overflow: hidden;
}

/* Liseré coloré supérieur — framboise vers glaz */
.lms-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--lms-strip-a) 0%,
    var(--lms-strip-b) 55%,
    transparent 100%
  );
}

/* ── En-tête ───────────────────────────────────────────────────────────────── */
.lms-header {
  text-align: center;
  margin-bottom: 1.1rem;
}

.lms-title {
  font-family: var(--lms-font-serif);
  font-size: 1.15rem;
  font-weight: bold;
  letter-spacing: .02em;
  color: var(--lms-text);
  line-height: 1.3;
}

.lms-subtitle {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--lms-accent);
  margin-top: .3rem;
}

/* ── Bloc de statistiques ──────────────────────────────────────────────────── */
.lms-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
  margin-bottom: 1.4rem;
}

@media (max-width: 420px) {
  .lms-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lms-stat {
  text-align: center;
  padding: .55rem .4rem;
  border-radius: var(--lms-radius-sm);
  background: var(--lms-bg-subtle);
}

/* Stat mise en valeur (montant levé) */
.lms-stat--hl {
  background: var(--lms-stat-hl-bg);
  border: 1px solid var(--lms-stat-hl-bdr);
}

.lms-stat__val {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--lms-text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lms-stat--hl .lms-stat__val {
  color: var(--lms-stat-hl-val);
}

.lms-stat__lbl {
  display: block;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lms-muted);
  margin-top: .2rem;
}

/* ── Barre de progression ──────────────────────────────────────────────────── */
.lms-gauge {
  position: relative;
  margin-bottom: .4rem;
}

.lms-track {
  position: relative;
  height: 18px;
  background: var(--lms-track);
  border-radius: 9px;
  overflow: visible;          /* pour que le curseur dépasse du track */
}

.lms-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lms-fill), var(--lms-fill-end));
  border-radius: 9px;
  width: 0%;                   /* animé par JS */
  transition: width var(--lms-anim);
  box-shadow: 0 0 14px var(--lms-fill-glow);
  position: relative;
}

/* ── Curseur « livre » mobile sur la jauge ─────────────────────────────────── */
.lms-cursor {
  position: absolute;
  top: 50%;
  left: 0%;                    /* mis à jour par JS */
  transform: translate(-50%, -50%);
  transition: left var(--lms-anim);
  width: 34px;
  height: 34px;
  background: var(--lms-bg);
  border: 2.5px solid var(--lms-fill);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 16px var(--lms-fill-glow),
    0 2px 8px rgba(0,0,0,.45);
  z-index: 3;
  cursor: default;
}

/* ── Échelle de la jauge ───────────────────────────────────────────────────── */
.lms-scale {
  display: flex;
  justify-content: space-between;
  margin-top: .35rem;
  font-size: .62rem;
  color: var(--lms-muted);
  letter-spacing: .02em;
}

/* ── Paliers / marque-pages ────────────────────────────────────────────────── */
.lms-milestones {
  position: relative;
  height: 52px;
  margin-top: .1rem;
}

/* Chaque palier est positionné absolument selon son pourcentage */
.ms {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--lms-ms-off);
  transition: color .45s ease;
  cursor: default;
}

/* Trait vertical reliant le palier à la jauge */
.ms::before {
  content: '';
  display: block;
  width: 1px;
  height: 7px;
  background: currentColor;
  opacity: .6;
  margin-bottom: 1px;
}

.ms--on {
  color: var(--lms-ms-on);
}

.ms-icon {
  line-height: 0;
}

.ms-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  margin-top: 1px;
}

/* Badge ✓ pour les paliers validés */
.ms-check {
  font-size: .5rem;
  font-weight: 700;
  width: 13px;
  height: 13px;
  background: var(--lms-ms-on);
  color: var(--lms-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ── Ligne d'information (pourcentage + horodatage) ────────────────────────── */
.lms-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: .3rem 0 1.2rem;
}

.lms-pct {
  font-size: .78rem;
  font-weight: 700;
  color: var(--lms-pct-color);
  letter-spacing: .02em;
}

.lms-updated {
  font-size: .6rem;
  color: var(--lms-muted);
  font-style: italic;
}

/* ── Bouton CTA ────────────────────────────────────────────────────────────── */
.lms-cta {
  text-align: center;
}

.lms-btn {
  display: inline-block;
  background: var(--lms-btn-bg);
  color: var(--lms-btn-color);
  font-family: var(--lms-font-sans);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  padding: .65rem 2.2rem;
  border-radius: 30px;
  letter-spacing: .05em;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 2px 16px var(--lms-btn-shadow);
  white-space: nowrap;
}

.lms-btn:hover {
  background: var(--lms-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 22px var(--lms-btn-shadow);
}

.lms-btn:active {
  transform: translateY(0);
}

.lms-btn:focus-visible {
  outline: 3px solid var(--lms-btn-bg);
  outline-offset: 3px;
}

/* ── État d'erreur ─────────────────────────────────────────────────────────── */
.lms-error {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(0,139,139,.18);
  padding: 1.75rem 2rem;
  text-align: center;
  color: #5a8888;
  font-size: .9rem;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  line-height: 1.7;
}

.lms-error a {
  color: #008b8b;
  text-decoration: none;
}

.lms-error a:hover {
  text-decoration: underline;
}

/* ── État de chargement (skeleton) ─────────────────────────────────────────── */
@keyframes lms-shimmer {
  0%   { opacity: .4; }
  50%  { opacity: .7; }
  100% { opacity: .4; }
}

.lms-loading {
  animation: lms-shimmer 1.4s ease-in-out infinite;
}