/* ─────────────────────────────────────────────────────────────
   styles.css  —  UnitsSelector styles
   Modifiez librement ce fichier. Le JS charge automatiquement
   ce CSS via require() en résolvant le chemin relatif à miniSelect.js
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Jost:wght@300;400;500&display=swap');

/* ── Tokens ────────────────────────────────────────────────── */
.ms-root {
  --ms-bg:       #1c3233;
  --ms-gold:     #c8956c;
  --ms-gold-a20: rgba(200, 149, 108, .18);
  --ms-gold-a40: rgba(200, 149, 108, .38);
  --ms-text:     #e8e0d5;
  --ms-muted:    #7d9b98;
  --ms-serif:    'Cormorant Garamond', Georgia, serif;
  --ms-sans:     'Jost', system-ui, sans-serif;
  --ms-ease:     cubic-bezier(.4, 0, .2, 1);
}

/* ── Reset (scoped) ────────────────────────────────────────── */
.ms-root *,
.ms-root *::before,
.ms-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Container ─────────────────────────────────────────────── */
.ms-root {
  font-family:  var(--ms-sans);
  font-weight:  300;
  color:        var(--ms-text);
  background:   var(--ms-bg);
  border-radius: 8px;
  overflow:     hidden;
  width:        100%;
  max-width:    460px;
}

/* ── Floor bar ─────────────────────────────────────────────── */
.ms-floors {
  display:        flex;
  flex-direction: row;
  border-bottom:  1px solid var(--ms-gold-a40);
}

.ms-floor-btn {
  flex:           1;
  position:       relative;
  padding:        .75rem .4rem .6rem;
  background:     transparent;
  border:         none;
  border-left:    1px solid var(--ms-gold-a20);
  color:          var(--ms-muted);
  font-family:    var(--ms-sans);
  font-size:      .62rem;
  font-weight:    500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     color .2s var(--ms-ease), background .2s var(--ms-ease);
  user-select:    none;
  text-align:     center;
  line-height:    1.1;
}
.ms-floor-btn:first-child { border-left: none; }

.ms-floor-btn .ms-f-num {
  display:     block;
  font-family: var(--ms-serif);
  font-size:   1.1rem;
  font-weight: 400;
  color:       var(--ms-muted);
  transition:  color .2s var(--ms-ease);
}

/* Active underline indicator */
.ms-floor-btn::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             10%;
  right:            10%;
  height:           2px;
  background:       var(--ms-gold);
  transform:        scaleX(0);
  transform-origin: center;
  transition:       transform .25s var(--ms-ease);
}

.ms-floor-btn:hover                { background: var(--ms-gold-a20); }
.ms-floor-btn:hover .ms-f-num     { color: var(--ms-text); }
.ms-floor-btn.ms-active           { color: var(--ms-gold); }
.ms-floor-btn.ms-active .ms-f-num { color: var(--ms-gold); }
.ms-floor-btn.ms-active::after    { transform: scaleX(1); }

/* ── Column headers ────────────────────────────────────────── */
.ms-thead {
  display:               grid;
  grid-template-columns: 1.2fr 1.6fr 1fr 2rem;
  padding:               .45rem 1rem .3rem 1.1rem;
  border-bottom:         1px solid var(--ms-gold-a40);
  font-size:             .58rem;
  letter-spacing:        .12em;
  text-transform:        uppercase;
  color:                 var(--ms-gold);
  font-weight:           500;
}

/* ── Unit list ─────────────────────────────────────────────── */
.ms-units { min-height: 120px; }

.ms-unit-row {
  display:               grid;
  grid-template-columns: 1.2fr 1.6fr 1fr 2rem;
  align-items:           center;
  padding:               .85rem 1rem .85rem 1.1rem;
  border-bottom:         1px solid var(--ms-gold-a20);
  font-size:             .8rem;
  font-weight:           300;
  cursor:                pointer;
  transition:            background .18s var(--ms-ease);
  animation:             ms-in .28s var(--ms-ease) both;
}
.ms-unit-row:last-child      { border-bottom: none; }
.ms-unit-row:hover           { background: var(--ms-gold-a20); }

@keyframes ms-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ms-unit-row .ms-u-id {
  font-family:    var(--ms-serif);
  font-size:      1rem;
  font-weight:    400;
  letter-spacing: .03em;
}
.ms-unit-row .ms-u-sup { font-size: .75rem; color: var(--ms-muted); }
.ms-unit-row .ms-u-ch  { font-size: .75rem; color: var(--ms-muted); }

.ms-unit-row .ms-arrow {
  width:         1.6rem;
  height:        1.6rem;
  border-radius: 50%;
  border:        1px solid var(--ms-gold-a40);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--ms-gold);
  transition:    border-color .18s, background .18s;
  margin-left:   auto;
}
.ms-unit-row:hover .ms-arrow {
  background:   var(--ms-gold);
  border-color: var(--ms-gold);
  color:        var(--ms-bg);
}

/* ── Empty / loading states ────────────────────────────────── */
.ms-msg {
  padding:        2rem 1rem;
  text-align:     center;
  font-size:      .78rem;
  color:          var(--ms-muted);
  letter-spacing: .06em;
}

.ms-spinner {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border:        2px solid var(--ms-gold-a40);
  border-top-color: var(--ms-gold);
  border-radius: 50%;
  animation:     ms-spin .7s linear infinite;
  margin-bottom: .5rem;
}
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* ── Flèche — lien PDF ─────────────────────────────────────── */
.ms-arrow--link {
  text-decoration: none;
  cursor: pointer;
}
.ms-unit-row:hover .ms-arrow--link {
  background:   var(--ms-gold);
  border-color: var(--ms-gold);
  color:        var(--ms-bg);
}

/* ── Flèche — pas de PDF (invisible, garde l'espace) ────────── */
.ms-arrow--empty {
  visibility: hidden;
  pointer-events: none;
}