/* =====================================================================
   Magasin XM : guide d'étapes « Étape 1 sur 6 » (lot L07, xm-steps.js)
   ---------------------------------------------------------------------
   - Balisage commun avec le guide des pages /shop/* (gabarit QWeb
     xtr_pub_funnel.xtr_guide_steps, lot L10) : div.xm-steps-wrap >
     p.xm-steps__count + ol.xm-steps > li.xm-steps__item (.is-current,
     .is-done, .is-upcoming) > span.xm-steps__num + span.xm-steps__label
     (+ span.xm-steps__sr).
   - Téléphone d'abord : par défaut, ligne « Étape 1 sur 6 — Sélection » et
     6 pastilles numérotées reliées (libellés lus par les lecteurs d'écran,
     masqués visuellement). Quand le CONTENEUR est assez large (requête de
     conteneur, donc juste dans l'embed de 960 px comme sur l'accueil), la
     frise montre les 6 libellés. Sans requêtes de conteneur (vieux
     navigateurs), la version compacte reste : rien ne déborde.
   - Purement informatif (aucun lien) : pas de cible tactile à prévoir.
   - Jetons de xm-store.css avec valeurs de repli : le guide reste lisible
     hors d'un .xm-root (XmSteps.render dans un conteneur quelconque).
   - Préfixe xm- uniquement (aucune ancienne classe du magasin).
   - Contrastes (fond crème #FFFCF8) : encre 15:1, texte secondaire
     #5b4d6e 7,5:1, mauve #6D28D9 6,9:1, blanc sur mauve 7,1:1.
   ===================================================================== */

.xm-steps-wrap {
  container-type: inline-size;
  container-name: xm-steps;
  position: relative;
  /* Largeur imposée : avec la containment inline-size, un élément dimensionné par son
     contenu (enfant flex ou grid d'un hôte quelconque de XmSteps.render) tomberait à 0. */
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px 16px 16px;
  background: var(--xm-surface, #FFFCF8);
  border: 1px solid var(--xm-line, #E7DECF);
  border-radius: var(--xm-radius, 12px);
  font-family: var(--xm-font, 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--xm-ink, #2E1A47);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.xm-steps-wrap,
.xm-steps-wrap *,
.xm-steps-wrap *::before,
.xm-steps-wrap *::after { box-sizing: border-box; }

/* ---- « Étape 1 sur 6 — Sélection » ---- */
.xm-steps-wrap .xm-steps__count {
  margin: 0;
  padding: 0;
  font-family: var(--xm-font-title, 'Montserrat', 'Inter', -apple-system, 'Segoe UI', sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--xm-mauve, #6D28D9);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.xm-steps-wrap .xm-steps__count-label { color: var(--xm-ink, #2E1A47); font-weight: 800; }

/* ---- Frise : version compacte (téléphone, par défaut) ---- */
.xm-steps-wrap .xm-steps {
  display: flex;
  align-items: center;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.xm-steps-wrap .xm-steps__item {
  display: flex;
  align-items: center;
  flex: 1 1 auto;          /* le surplus de largeur va aux traits (longueurs égales) */
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--xm-muted, #5b4d6e);
  background: none;
  border: 0;
}
.xm-steps-wrap .xm-steps__item:first-child { flex: 0 0 auto; }
.xm-steps-wrap .xm-steps__item::marker { content: none; }

/* Trait qui mène à l'étape (bordure et non fond : reste visible en couleurs forcées). */
.xm-steps-wrap .xm-steps__item + .xm-steps__item::before {
  content: '';
  flex: 1 1 auto;
  min-width: 8px;
  height: 0;
  margin: 0 5px;
  border-top: 2px solid var(--xm-line-strong, #D9CDB9);
  border-radius: 1px;
}
.xm-steps-wrap .xm-steps__item.is-current::before,
.xm-steps-wrap .xm-steps__item.is-done::before { border-top-color: var(--xm-mauve, #6D28D9); }

/* Pastille : numéro, ou ✓ pour une étape faite (aria-hidden ; le texte masqué dit « terminé »). */
.xm-steps-wrap .xm-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--xm-line-strong, #D9CDB9);
  background: var(--xm-white, #FFFFFF);
  font-family: var(--xm-font, 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--xm-muted, #5b4d6e);
  transition: background-color .2s, border-color .2s, color .2s;
}
.xm-steps-wrap .xm-steps__item.is-current .xm-steps__num {
  background: var(--xm-mauve, #6D28D9);
  border-color: var(--xm-mauve, #6D28D9);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(109, 40, 217, .16);
}
.xm-steps-wrap .xm-steps__item.is-done .xm-steps__num {
  background: var(--xm-mauve-soft, #F4EEFA);
  border-color: var(--xm-mauve, #6D28D9);
  color: var(--xm-mauve, #6D28D9);
  font-size: 14px;
}

/* Libellés : lus par les lecteurs d'écran, masqués visuellement en version compacte
   (la ligne « Étape 1 sur 6 — Sélection » nomme l'étape courante). */
.xm-steps-wrap .xm-steps__label,
.xm-steps-wrap .xm-steps__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Très petits conteneurs (téléphone de 320 px, zoom 400 %) : pastilles plus serrées. */
@container xm-steps (max-width: 279px) {
  .xm-steps-wrap .xm-steps__num { width: 24px; height: 24px; font-size: 12px; }
  .xm-steps-wrap .xm-steps__item + .xm-steps__item::before { min-width: 6px; margin: 0 3px; }
}

/* ---- Frise complète : conteneur assez large pour les 6 libellés ---- */
@container xm-steps (min-width: 880px) {
  .xm-steps-wrap .xm-steps { margin-top: 12px; }
  .xm-steps-wrap .xm-steps__item { gap: 8px; }
  .xm-steps-wrap .xm-steps__item + .xm-steps__item::before { min-width: 12px; margin: 0 2px 0 10px; }
  .xm-steps-wrap .xm-steps__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
  .xm-steps-wrap .xm-steps__item.is-current { color: var(--xm-ink, #2E1A47); font-weight: 800; }
  .xm-steps-wrap .xm-steps__item.is-done { color: var(--xm-ink, #2E1A47); }
}

/* Dans l'emplacement du magasin : le guide prend toute la largeur de la coquille. */
.xm-root .xm-slot--steps > .xm-steps-wrap,
.xm-root [data-xm-slot="steps"] > .xm-steps-wrap { width: 100%; }

/* ---- Couleurs forcées (Windows contraste élevé) ---- */
@media (forced-colors: active) {
  .xm-steps-wrap { border-color: CanvasText; }
  .xm-steps-wrap .xm-steps__num { border-color: CanvasText; }
  .xm-steps-wrap .xm-steps__item.is-current .xm-steps__num {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
    box-shadow: none;
  }
  .xm-steps-wrap .xm-steps__item + .xm-steps__item::before { border-top-color: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .xm-steps-wrap .xm-steps__num { transition: none; }
}