/* ============================================================
   Paris 2024 Solutions - Socle accessibilite RGAA (3D Vista)
   Feuille custom, chargee depuis index.htm.
   ============================================================ */

/* Masquage visuel tout en restant lisible par les lecteurs d'ecran. */
.a11y-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Liens des regions nav/footer : masques, mais VISIBLES a la prise de focus. */
.a11y-skip {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.a11y-skip:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  z-index: 100000;
  padding: 10px 16px;
  background: #000091;
  color: #ffffff;
  font: 600 14px/1.2 'Marianne', Arial, Helvetica, sans-serif;
  text-decoration: underline;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  outline: 2px solid #ffffff;
}

/* Lien d'evitement (12.7) - motif DSFR : barre en haut, masquee par defaut,
   visible quand le lien recoit le focus clavier. */
.a11y-skiplinks {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 100001;
  background: #000091;
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}
.a11y-skiplinks:focus-within {
  transform: translateY(0);
}
.a11y-skiplink {
  display: inline-block;
  padding: 12px 20px;
  background: #000091;
  color: #ffffff;
  font: 600 15px/1.2 'Marianne', Arial, Helvetica, sans-serif;
  text-decoration: underline;
}
.a11y-skiplink:focus {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* Focus visible (10.7) sur les controles de l'experience : indicateur fort,
   lisible sur n'importe quel fond (anneau blanc + halo bleu Marianne).
   Au clavier uniquement (:focus-visible) pour ne pas gener a la souris. */
#viewer [role="button"]:focus-visible,
#viewer [tabindex]:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 6px #000091 !important;
  border-radius: 2px;
}

/* BLOCAGE PORTRAIT SUR TABLETTE - voile plein ecran invitant a passer en paysage.
   Affiche/masque par a11y.js (uniquement tablette tactile en portrait). */
#a11y-rotate {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2147483647;            /* au-dessus de tout le player */
  display: none;                  /* bascule en flex par a11y.js */
  align-items: center;
  justify-content: center;
  background: #000091;
  color: #ffffff;
  padding: 24px;
  text-align: center;
}
#a11y-rotate:focus { outline: none; }
#a11y-rotate .a11y-rotate-box { max-width: 420px; }
#a11y-rotate .a11y-rotate-ico {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 20px;
  display: inline-block;
  animation: a11y-rotate-pulse 1.6s ease-in-out infinite;
}
#a11y-rotate p {
  margin: 0 0 10px;
  font: 600 18px/1.4 'Marianne', Arial, Helvetica, sans-serif;
}
#a11y-rotate p[lang="en"] {
  font-weight: 400;
  font-size: 16px;
  opacity: 0.85;
}
@keyframes a11y-rotate-pulse {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}

/* ANNEAU DE VISIBILITE DU POINTEUR (mode "navigation clavier") - le reticule
   (point) est peint DANS le canvas 3D par 3D Vista, donc non stylable. On
   superpose notre propre anneau rouge vif, CREUX (centre transparent -> le point
   du player, orange sur un cliquable, reste visible dedans). Centre transparent
   (pas de remplissage) + fin lisere sombre pour le contraste. Centre de la fenetre (= centre du
   reticule), donc cale quelle que soit la taille d'ecran. Affiche/masque par
   a11y.js selon l'etat du bouton "navigation clavier". Ne bloque jamais le clic. */
#a11y-reticle {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 4px solid #e1000f;            /* rouge vif (rouge Marianne) */
  border-radius: 50%;
  background: transparent;              /* creux : centre transparent, laisse voir le point du player */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); /* fin lisere sombre, sans blanc */
  pointer-events: none;                 /* n'intercepte jamais l'interaction */
  z-index: 2147483646;                  /* au-dessus du player, sous l'overlay rotation */
  display: none;                        /* bascule en block par a11y.js */
}