/* =============================================================================
   Tigre Bois — css/objet3d.css
   Le cadre des trophées en volume (js/objet3d.js).

   Le cadre a des dimensions fixes AVANT que quoi que ce soit n'arrive : ni le
   chargement de l'affiche, ni celui du modèle ne doivent décaler la page.
   L'affiche et la vue 3D se superposent dans le même carré, la seconde
   recouvrant la première dès qu'elle est prête.

   Aucune couleur en dur : uniquement les variables de css/tokens.css.
   ============================================================================= */

.tb-objet3d {
  --tb-objet3d-taille: 220px;
  /* Forme du cadre, largeur / hauteur. Posée par js/objet3d.js d'après le
     catalogue : une casquette est large, une coupe est haute. `--tb-objet3d-
     taille` désigne toujours la LARGEUR ; la hauteur en découle. */
  --tb-objet3d-rapport: 1;

  position: relative;
  display: block;
  width: var(--tb-objet3d-taille);
  flex: 0 0 auto;
  /* La place est réservée dès le premier calcul de mise en page. */
  aspect-ratio: var(--tb-objet3d-rapport);
  border-radius: var(--tb-r3);
  overflow: hidden;
  /* Le halo sert de socle : sans lui l'objet flotte dans le vide. */
  background-image: var(--tb-halo-or);
  background-color: color-mix(in srgb, var(--tb-or) 8%, transparent);
}

/* --- L'affiche : elle tient la place, puis s'efface -------------------- */

/* Largeur et hauteur sont posées explicitement, et non déduites des quatre
   décalages : <model-viewer> se donne une taille par défaut de 300 x 150 dans
   son propre CSS d'hôte, que de simples `inset` ne suffisent pas à annuler.
   L'affiche suit la même règle pour rester exactement superposée à la vue. Le
   retrait du bas laisse son air à l'invite. */
.tb-objet3d__affiche {
  position: absolute;
  inset: 0 0 var(--tb-e4) 0;
  width: 100%;
  height: calc(100% - var(--tb-e4));
  object-fit: contain;
  transition: opacity var(--tb-d2) var(--tb-ease);
}

.tb-objet3d[data-etat='pret'] .tb-objet3d__affiche { opacity: 0; }

/* --- La vue 3D --------------------------------------------------------- */

.tb-objet3d__vue {
  position: absolute;
  inset: 0 0 var(--tb-e4) 0;
  width: 100%;
  height: calc(100% - var(--tb-e4));
  background: transparent;
  /* Le curseur annonce que l'objet se saisit. */
  cursor: grab;
  --poster-color: transparent;   /* l'affiche du site fait déjà le travail */
}

.tb-objet3d__vue:active { cursor: grabbing; }

.tb-objet3d__vue::part(default-progress-bar) { display: none; }

.tb-objet3d__vue:focus-visible {
  outline: var(--tb-focus-trait) solid var(--tb-focus-couleur);
  outline-offset: var(--tb-focus-ecart);
}

/* --- L'invite : « prenez-la et tournez-la » ---------------------------- */

/* Une ligne discrète sous l'objet, qui disparaît dès la première prise en
   main. Sans elle, rien n'indique que l'objet est manipulable. */
.tb-objet3d__invite {
  position: absolute;
  inset-inline: 0;
  bottom: var(--tb-e2);
  margin: 0;
  text-align: center;
  font-family: var(--tb-font-texte);
  font-size: var(--tb-t-micro);
  letter-spacing: .06em;
  /* La couleur se déduit de la carte qui accueille l'objet : encre sur fond
     clair, crème sur fond vert, sans avoir à énumérer les contextes. Le
     mélange tient lieu d'atténuation, ce qui laisse `opacity` libre pour
     l'apparition. */
  color: color-mix(in srgb, currentColor 62%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tb-d2) var(--tb-ease);
}

.tb-objet3d[data-etat='pret'] .tb-objet3d__invite { opacity: 1; }
.tb-objet3d[data-touche] .tb-objet3d__invite { opacity: 0; }

/* --- Tailles selon l'emplacement --------------------------------------- */

/* Récompense mise en avant : format intermédiaire, elle vit dans une grille. */
.tb-recompense--vedette .tb-objet3d { --tb-objet3d-taille: clamp(150px, 30vw, 200px); }

/* La casquette du règlement porte les DEUX classes (--vedette et --une) et les
   deux règles ont la même spécificité : c'est donc l'ordre qui tranche, et
   celle-ci doit rester la dernière. C'est la pièce maîtresse de la page, elle
   a droit à la plus grande taille que la colonne autorise. */
.tb-recompense--une .tb-objet3d { --tb-objet3d-taille: clamp(180px, 34vw, 280px); }

/* Sur téléphone, la carte prend toute la largeur : l'objet peut enfin
   grandir. Les sélecteurs sont repris tels quels — une règle sur la seule
   classe `.tb-objet3d` serait battue en spécificité par celles ci-dessus,
   media query ou pas. */
@media (max-width: 599.98px) {
  .tb-objet3d,
  .tb-recompense--vedette .tb-objet3d,
  .tb-recompense--une .tb-objet3d { --tb-objet3d-taille: min(64vw, 250px); }
}

/* --- Mouvement réduit --------------------------------------------------- */

/* La rotation automatique est déjà coupée côté JS. Ici on fige le reste :
   l'objet demeure attrapable, il ne bouge simplement plus tout seul. */
@media (prefers-reduced-motion: reduce) {
  .tb-objet3d__affiche,
  .tb-objet3d__invite { transition: none; }
}

/* --- Impression --------------------------------------------------------- */

/* Sur papier, seule l'affiche a un sens. */
@media print {
  .tb-objet3d__vue,
  .tb-objet3d__invite { display: none; }
  .tb-objet3d__affiche { opacity: 1 !important; }
}