/* Css des cartes de personnes */
.carte-global{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    flex-direction: column;

    &:hover {
        filter:
          drop-shadow(0 0 6px var(--couleur-accent-tertiaire))
          drop-shadow(0 0 12px var(--couleur-accent-tertiaire));
        transform: scale(1.05);
    }
    
    .carte{
        /* Apparence générale de la carte */
        z-index: 2;
        position: relative;
        display: flex;
        flex-direction:column;
        align-items: center;
        width: 384px;
        justify-content: center;
        background-color:var(--main-couleur-fond-principale);
        color: var(--main-couleur-texte-principale);
        border-radius: 22px;
        font-family: var(--police-secondaire);
        filter: drop-shadow(6px 6px 0px var(--couleur-accent-secondaire));
        border: solid #fff;
        

        /* Les boutons décoratifs */
        .boutons-carte{
            background-color: var(--couleur-accent-tertiaire);
            display: flex;
            width: 100%;
            align-items: center;
            justify-content:space-between;
            border-radius: 19px 19px 0px 0px;
            padding: 10px 0px;
            border-bottom: solid #fff;

            .moins-carte, .gros-petit-carte, .trois-points-carte{
                opacity: 26%;
            }

            .trois-points-carte{
                margin:0 0px 0 20px;
                filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(329deg) brightness(1%) contrast(100%);
            }

            .moins-carte{
                width: 21px;
            }

            .gros-petit-carte{
                width: 25px;
                filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(329deg) brightness(1%) contrast(100%);
            }

            .trois-icones-carte{
                gap: 20px;
                display: flex;
                align-items: center;
            }

            .retour-carte{
                border: none;
                text-decoration: none;
                background:none;
                margin:0 20px 0 0;
                padding:0;
                width: 23px;
                opacity: 25%;
                cursor: inherit;
                filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(329deg) brightness(1%) contrast(100%);
            }
            
        }

        .couleur-boutons-cetim{
            background-color: var(--couleur-accent-primaire);
        }

        .couleur-boutons-credits{
            background: linear-gradient(91deg, #D4A565 1.21%, #FADCB2 50.36%, #D5A768 93.14%);
        }

        /* Contenu texte et image de la carte --------------------------------------------------- */
        /* description de la personne (fausse barre de recherche) */
        .contenu-carte{
            margin: 0.5rem;
            width: fit-content;
            height: fit-content;

            .resume-carte{
                background-color: var(--main-couleur-fond-secondaire);
                border: none;
                text-align: center;
                text-decoration: none;
                display: flex;
                border-radius: 50px;
                flex-direction: row;
                align-items: center;
                gap: 20px;
                width: 22rem;
                margin-bottom: 0.5rem;

                .cercle-carte{
                    background-color: var(--main-couleur-fond-principale);
                    border-radius: 50%;
                    width: 28px;
                    height: 28px;
                    aspect-ratio: 1;
                    margin: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .logo-carte-tim{
                    width: 70%;
                }

                p{
                    margin: 2%;
                    font-size: var(--mobile-taille-petitsTextes);
                }
            }
        }

        .contenu-carte-gros{
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }

        /* Infos importantes (image, nom, etc) */
        .infos-carte{
            display: flex;
            align-items: center;
            gap: 16px;
            justify-content: flex-start;
            width: fit-content;
            height: fit-content;

            .image-personne{
                width: 8rem;
                height: 10rem;
                border-radius: 5px;
                object-fit: cover;
                background-color: var(--main-couleur-fond-secondaire);
            }

            .image-personne-prof{
                height: 19rem;
            }

            &:hover .image-personne-un{
                display:none;
            }

            &:hover .image-personne-deux{
                display:block;
            }

            .image-personne-un{
                display:block;
            }

            .image-personne-deux{
                display:none;
            }


            .texte-carte{
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                text-wrap: wrap;
                width: 100%;

                .nom-carte{
                    font-size: var(--mobile-taille-liens);
                    font-weight: var(--graisseur-normal);
                    font-family: var(--police-titres);
                    margin: 0;
                }

                .titre-carte{
                    font-size: var(--mobile-taille-petitsTextes);
                    font-weight: var(--graisseur-mince);
                    margin-bottom: 0;
                }

                hr{
                    width: 100%;
                }

                .courriel-carte, .autres-infos-carte{
                    font-size: var(--mobile-taille-petitsTextes);
                    font-weight: var(--graisseur-mince);
                    margin: 2px;
                }

                .autres-infos-espace-carte{
                    margin-bottom: 1rem;
                }

                .description-generale{
                    margin-bottom: 4rem;
                    font-weight: bold;
                }

                .carte-portfolio{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 1rem;
                    height: 4rem;

                    img{
                        width: 2rem;
                        height: 2rem;
                        /* object-fit: cover; */
                    }

                }
            }
        }
 }
}

/* Changements de couleur du hover pour credits et CÉTIM */
.carte-global-cetim{
    cursor: inherit;
    margin-bottom: 3rem;
    &:hover {
        filter:
          drop-shadow(0 0 6px var(--couleur-accent-primaire))
          drop-shadow(0 0 12px var(--couleur-accent-primaire));
        transform: scale(1.05);
      }
}

.carte-global-credits{
    margin: 3rem;
    &:hover {
        filter:
          drop-shadow(0 0 6px var(--couleur-accent-quaternaire))
          drop-shadow(0 0 12px var(--couleur-accent-quaternaire));
        transform: scale(1.05);
      }
}