/* css/apercu.css : aperçu du flocage (flocage-apercu.js). Utilise les variables de style.css.
   Cadre brumeux à filet fin et bord haut jaune, vêtement en SVG, sélecteur segmenté Face / Dos, mention de réserve.
   Angles vifs, cibles de 44 px au moins, focus visible ; seuls transform et opacity sont animés, rien si le visiteur demande moins d'animations. */
.apercu {
  position: relative; display: grid; gap: 12px; min-width: 0;
  padding: 12px 12px 14px; background: var(--mist, #eef1f8);
  border: 1px solid var(--line, #d5dae8); border-top: 4px solid var(--yellow, #f5d400); border-radius: 0;
}
.apercu__scene { min-width: 0; }
.apercu__svg { display: block; width: 100%; height: auto; max-height: min(70vh, 560px); margin-inline: auto; overflow: hidden; }
.apercu__vue, .apercu__element-corps { will-change: auto; }

/* Sélecteur segmenté : deux moitiés égales, un curseur bleu nuit qui glisse (transform) sous le bouton actif */
.apercu__barre { display: flex; justify-content: center; }
.apercu__seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  min-width: 200px; border: 2px solid var(--navy, #0e1b45); background: var(--bg, #fff);
}
.apercu__curseur { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--navy, #0e1b45); pointer-events: none; }
.apercu[data-vue="dos"] .apercu__curseur { transform: translateX(100%); }
.apercu__bouton {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 96px; min-height: 44px; margin: 0; padding: 0 18px; border: 0; border-radius: 0;
  background: transparent; color: var(--navy, #0e1b45); cursor: pointer;
  font: 700 1.0625rem/1 var(--font-title, "Barlow Condensed", "Arial Narrow", sans-serif); letter-spacing: .08em; text-transform: uppercase;
}
.apercu__bouton[aria-pressed="true"] { color: var(--bg, #fff); cursor: default; }
.apercu__bouton[aria-pressed="false"]:hover .apercu__libelle { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; text-decoration-color: var(--yellow, #f5d400); }
.apercu__bouton:focus-visible { outline: 3px solid var(--navy, #0e1b45); outline-offset: 3px; }
.apercu__bouton:active { transform: translateY(1px); }
/* repère « il y a un flocage de ce côté » */
.apercu__pastille { width: 8px; height: 8px; flex: none; background: var(--yellow, #f5d400); box-shadow: 0 0 0 1.5px var(--navy, #0e1b45); }
.apercu__pastille[hidden] { display: none; }
.apercu__bouton[aria-pressed="true"] .apercu__pastille { box-shadow: none; }

.apercu__mention { margin: 0; max-width: none; color: var(--muted, #4a5578); font-size: .8125rem; line-height: 1.45; text-align: center; text-wrap: pretty; }
.apercu__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 600px) {
  .apercu { padding: 16px 16px 16px; gap: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .apercu__curseur { transition: transform .3s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .apercu__vue, .apercu__element-corps { animation: none !important; transition: none !important; }
}