/* ==========================================================
   ATHREO CONSULTING
   LOGO 3D DES PAGES D'ACCUEIL
   ========================================================== */


/* ==========================================================
   PANNEAU DE RÉGLAGES MANUELS - DIMENSIONS
   ========================================================== */

/*
   Par défaut, le composant reprend les dimensions déjà utilisées
   par le grand logo actuel du site via --logo-width et --logo-height.

   Cela permet de préserver la géométrie actuelle des pages d'accueil.

   Pour imposer ultérieurement une taille spécifique au logo 3D,
   remplacer par exemple :

   --logo3d-accueil-width: 320px;
   --logo3d-accueil-height: 320px;
*/

:root {
    --logo3d-accueil-width: var(--logo-width, 320px);
    --logo3d-accueil-height: var(--logo-height, 330px);
}


/* ==========================================================
   CONTENEUR PRINCIPAL DU LOGO 3D
   ========================================================== */

/*
   Cette classe sera ajoutée au conteneur media-wrapper existant.

   Elle permet au nouveau logo 3D de conserver par défaut
   l'encombrement du logo actuel.
*/

.logo3d-accueil-wrapper {
    width: var(--logo3d-accueil-width);
    height: var(--logo3d-accueil-height);
}


/* ==========================================================
   ZONE D'INTERACTION SOURIS / TACTILE
   ========================================================== */

/*
   Cette zone reçoit les mouvements de la souris ou du doigt.

   touch-action: none empêche le navigateur d'interpréter le geste
   effectué directement sur le logo comme un geste de navigation
   tactile pendant la manipulation du modèle.
*/

.logo3d-accueil-zone {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    touch-action: none;
}


/* ==========================================================
   MODEL-VIEWER - SURFACE DE RENDU 3D
   ========================================================== */

/*
   Le model-viewer occupe entièrement la zone définie ci-dessus.

   Le fond reste transparent afin de conserver le fond actuel
   des pages d'accueil.
*/

.logo3d-accueil-viewer {
    width: 100%;
    height: 100%;

    display: block;

    background: transparent;
    --poster-color: transparent;

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;

    cursor: grab;
}


/* ==========================================================
   CURSEUR PENDANT LA MANIPULATION
   ========================================================== */

.logo3d-accueil-zone.is-dragging .logo3d-accueil-viewer {
    cursor: grabbing;
}