/* ============================================================================
   SOG VIEWER -- CSS du gate click-to-load (poster + bouton play + progression).
   Partage entre les pages qui embarquent assets/js/sog-viewer.js.
   Extrait de l'inline d'index.html (source d'origine), inchange.
   ========================================================================== */
.spec-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  pointer-events:none;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.spec-poster.gone{opacity:0}
.spec-gate{position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.spec-gate.gone{opacity:0;pointer-events:none}
.spec-play{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:16px;color:var(--mut);
  -webkit-tap-highlight-color:transparent}
.spec-play-disc{position:relative;width:92px;height:92px;border-radius:50%;display:grid;
  place-items:center;background:rgba(243,238,229,.62);border:1px solid rgba(154,122,62,.45);
  backdrop-filter:blur(8px);box-shadow:0 14px 40px -18px rgba(42,37,32,.55);
  transition:transform .18s cubic-bezier(.16,1,.3,1),background .25s ease,border-color .25s ease}
/* Marque DF, mark de marque assumee dans le disque (pas un filigrane). Deux
   calques empiles comme le preloader : un logo vide dessous, un logo or dessus
   revele par clip-path. */
.spec-play-logo{position:absolute;width:50px;height:50px;left:50%;top:50%;
  transform:translate(-50%,-50%)}
.lg-mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Logo DF blanc par defaut (etat vide), rempli en or au chargement. */
.lg-mark-dark{fill:#fff;opacity:.92}
/* Le remplissage or monte de bas en haut, pilote par --p (0..1) via clip-path,
   exactement comme #logoFill du preloader. Aucune dependance JS supplementaire. */
.lg-mark-gold{fill:url(#dfGold);clip-path:inset(calc((1 - var(--p,0)) * 100%) 0 0 0);
  transition:clip-path .25s cubic-bezier(.16,1,.3,1)}
.spec-play-lbl{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.spec-play-pct{display:none;font-size:.7rem;letter-spacing:.16em;color:var(--gold)}
.spec-play:hover .spec-play-disc{transform:translateY(-3px);background:rgba(243,238,229,.86);border-color:var(--gold)}
.spec-play:active .spec-play-disc{transform:translateY(-1px) scale(.97)}
/* Etat LOADING : le logo DF se remplit en or, le label devient le pourcentage. */
.spec-play.loading{cursor:default;pointer-events:none}
.spec-play.loading .spec-play-lbl{display:none}
.spec-play.loading .spec-play-pct{display:block}
.spec-play.loading .lg-mark-dark{opacity:.42}
/* Au clic (loading), le cercle conserve la couleur du hover. */
.spec-play.loading .spec-play-disc{background:rgba(243,238,229,.86);border-color:var(--gold)}
/* ---- Feedback de progression -- DANS LE LOGO UNIQUEMENT --
   DA : la couleur n'apparait QUE dans le logo. Le remplissage dore est pilote
   par --p depuis le JS (boot()), de facon STRICTEMENT MONOTONE : il ne fait que
   monter (fausse progression qui grimpe en decelerant + vraie progression du
   telechargement qui la tire vers le haut). Aucune oscillation, aucun halo. */
/* Phase progression reelle : remplissage pilote par --p, avec un petit plancher
   pour que le logo ne soit jamais totalement vide. */
.spec-play.loading.progressing .lg-mark-gold{clip-path:inset(calc((1 - max(var(--p,0),.10)) * 100%) 0 0 0)}
/* Etat ERREUR : sort de l'aspect loading fige, label "Reessayer" cliquable. */
.spec-play.retry{cursor:pointer;pointer-events:auto}
.spec-play.retry .spec-play-disc{background:rgba(243,238,229,.86);border-color:var(--gold)}
.spec-play.retry:hover .spec-play-disc{transform:translateY(-3px);border-color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .spec-poster,.spec-gate,.lg-mark-gold{transition:none}
  .spec-play:hover .spec-play-disc{transform:none}
  /* Pas d'animation : retour statique via le % et une base de remplissage doree. */
  .spec-play.loading:not(.progressing) .lg-mark-gold{animation:none;clip-path:inset(80% 0 0 0)}
}

/* Variante stage CLAIR (pas de poster sombre sous le gate, ex. empreinte) :
   libelle et calque vide du logo en encre au lieu de blanc, sinon illisibles
   sur le degrade creme du stage. Le libelle et le pourcentage recoivent une
   pastille creme floutee (meme langage que le disque) pour rester lisibles
   sur un poster charge / multicolore. */
.gate-on-light .spec-play-lbl,
.gate-on-light .spec-play-pct{color:var(--ink);background:rgba(243,238,229,.78);
  backdrop-filter:blur(6px);padding:6px 12px;border:1px solid rgba(154,122,62,.35);border-radius:2px}
.gate-on-light .lg-mark-dark{fill:var(--ink);opacity:.22}