/* ==========================================================
   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: 350px;
   --logo3d-accueil-height: 320px;
*/

:root {
    --logo3d-accueil-width: 416px;
    --logo3d-accueil-height: 377px;
}


/* ==========================================================
   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;
}


/* ==========================================================
   IFRAME HTML - SURFACE DE RENDU 3D
   ========================================================== */

/*
   L'iframe occupe entièrement la zone définie ci-dessus.

   Son fond reste transparent. Le fichier HTML embarqué doit lui aussi
   conserver un fond transparent pour laisser apparaître le fond du site.
*/

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

    display: block;
    border: 0;

    background: transparent;

    touch-action: none;

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

/* ==========================================================
   PAGE D'ACCUEIL - AJUSTEMENTS VISUELS P2-17
   ========================================================== */

/* Réduction de 30 % du titre de marque, limitée aux pages d'accueil. */
.page-accueil .brand-title .word-athreo {
    font-size: 2.8rem;
}

.page-accueil .brand-title .word-consulting {
    font-size: 1.4rem;
}

/* Le logo conserve son agrandissement de 30 % tant que la largeur disponible le permet. */
@media (max-width: 456px) {
    .logo3d-accueil-wrapper {
        width: calc(100vw - 40px);
        height: auto;
        aspect-ratio: 320 / 290;
        min-width: 0;
        min-height: 0;
    }
}