/* =============================================================================
   Camabe — l'onglet « Pour vos clients » (25/09/2026) : site-vitrine/vos-clients.php.
   Ce qui est propre a la page : l'espace du client en miniature et les
   interrupteurs de partage. Les scenes elles-memes (apparition par etapes,
   boucle de 9 s, pause hors de l'ecran, survol) viennent de produit.css et de
   assets/js/demo-vivante.js. Variables du socle seulement.
   ========================================================================== */

/* ---- L'espace du client, en miniature --------------------------------------- */
.espace-mini__corps { display: grid; gap: 10px; padding: 16px 18px 18px; }
.espace-mini__etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; counter-reset: etape; }
.espace-mini__etapes li { position: relative; padding-top: 14px; color: var(--encre-douce); font-size: .76rem; text-align: center; }
.espace-mini__etapes li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 99px; background: var(--trait-fort); }
.espace-mini__etapes li.est-fait::before { background: var(--accent); }
.espace-mini__etapes li.est-encours { color: var(--encre); font-weight: 600; }
.espace-mini__etapes li.est-encours::before { background: linear-gradient(90deg, var(--accent) 50%, var(--trait-fort) 50%); }
.espace-mini__titre { margin: 4px 0 0; color: var(--encre-douce); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.espace-mini .bordereau__ligne { padding: 8px 0; grid-template-columns: 34px minmax(0, 1fr) auto; }
.espace-mini__message { max-width: 88%; margin: 4px 0 0; padding: 10px 13px; border: 1px solid var(--trait); border-radius: 14px 14px 14px 4px; background: var(--papier); font-size: .88rem; line-height: 1.45; }
.espace-mini__message strong { display: block; margin-bottom: 2px; color: var(--accent); font-size: .76rem; }
.espace-mini__ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--trait); font-size: .88rem; }
.espace-mini__ligne span { color: var(--encre-douce); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ---- Le partage, piece par piece -------------------------------------------- */
.partage__ligne { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 18px; font-size: .93rem; }
.partage__ligne + .partage__ligne { border-top: 1px solid var(--trait); }
.partage__ligne--privee .bordereau__nom { color: var(--encre-douce); }
.partage__cadenas { display: grid; place-items: center; width: 26px; height: 26px; color: var(--encre-douce); }
.partage__cadenas svg { width: 17px; height: 17px; }
.interrupteur { position: relative; display: inline-block; width: 38px; height: 22px; border-radius: 99px; background: var(--trait-fort); }
.interrupteur::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--carte); box-shadow: 0 1px 2px rgba(18,23,31,.25); }
.interrupteur.est-actif { background: var(--accent); }
.interrupteur.est-actif::after { transform: translateX(16px); }

@media (prefers-reduced-motion: no-preference) {
  /* L'attestation s'allume une fois les quatre lignes arrivees, puis s'eteint avec la scene. */
  .mini.est-jouee .interrupteur--bascule { animation: vcBascule 9s ease-in-out infinite both; }
  .mini.est-jouee .interrupteur--bascule::after { animation: vcBouton 9s cubic-bezier(.3, .9, .3, 1.2) infinite both; }
  .mini.est-hors-champ *::after { animation-play-state: paused !important; }
}
@keyframes vcBascule {
  0%, 30%   { background: var(--trait-fort); }
  34%, 88%  { background: var(--accent); }
  93%, 100% { background: var(--trait-fort); }
}
@keyframes vcBouton {
  0%, 30%   { transform: translateX(0); }
  34%, 88%  { transform: translateX(16px); }
  93%, 100% { transform: translateX(0); }
}

/* ---- Ce qu'il faut savoir ---------------------------------------------------- */
.vc-savoir { align-items: start; }
.vc-liste { display: grid; gap: 8px; margin: .6rem 0 0; padding: 0; list-style: none; }
.vc-liste li { position: relative; padding-left: 20px; color: var(--encre-douce); line-height: 1.5; }
.vc-liste li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; border-radius: 2px; background: var(--encre-douce); }

@media (max-width: 560px) {
  .espace-mini__corps { padding: 14px; }
  .espace-mini__etapes li { font-size: .7rem; }
  .espace-mini__ligne { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .partage__ligne { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 10px 14px; }
}