@font-face {
    font-family: Raleway;
    src: url('typo/Raleway/static/Raleway-Bold.ttf') format('truetype');
}

@font-face {
    font-family: RalewaySousTitre;
    src: url('typo/Raleway/static/Raleway-Italic.ttf') format('truetype');
}

@font-face {
    font-family: RalewayLight;
    src: url('typo/Raleway/static/Raleway-Light.ttf') format('truetype');
}

@font-face {
    font-family: RalewayMediumItalic;
    src: url('typo/Raleway/static/Raleway-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: RalewayMedium;
    src: url('typo/Raleway/static/Raleway-Medium.ttf') format('truetype');
}

@font-face {
    font-family: RalewaySemiBold;
    src: url('typo/Raleway/static/Raleway-SemiBold.ttf') format('truetype');
}

/* 🎯 Header */
header {
    display: flex;
    justify-content: space-between; /* Espacement entre le texte et le contact */
    align-items: center; /* Centre verticalement */
    width: 90%; /* Limite la largeur pour ne pas s’étirer trop */
    max-width: 1200px; /* Largeur maximale pour les grands écrans */
    margin: auto; /* Centre horizontalement */
    padding: 2% 3%; /* Ajoute un peu d’espace autour */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
}

/* 📎 Header Link (Image + Texte) */
#header-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex: 1; /* Prend l’espace restant */
    max-width: 100%; /* Évite qu'il dépasse */
}

/* 📷 Photo */
#photo img {
    width: clamp(80px, 10vw, 120px); /* Ajuste la taille de l’image de façon responsive */
    height: auto;
    margin-right: 15px;
}

/* 📜 Texte */
#textcontainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1; /* Prend l’espace restant */
}

/* ☎️ Contact */
#contact {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-left: 2%;
    background-color: #FF008C;
    border-radius: 12px;
    padding: 1%;
}

#contact button {
    padding: 8px;
    margin-top: 8px;
    width: 80%;
}

a {
    text-decoration: none;
    color: inherit;
    display: block;
}

#contact p{
    margin: 0%;
    font-family: RalewayMedium, sans-serif;
    color: white;
}

.info{
    margin: 0%;
    font-family: Raleway, sans-serif;
    font-size: clamp(0.3rem, 2.5vw, 1.5rem);
    color: white;

}



h1 {
    font-family: Raleway, sans-serif;
    font-size: clamp(1.3rem, 3.5vw, 2.5rem);
    color: #FF0088;
    text-transform: uppercase;
    margin: 0;
    display: inline;
}

h4 {
    font-family: RalewayLight;
    font-size: clamp(0.5rem, 1.2vw, 0.8rem);
    color: #121110;
    margin: 0;
}

#line {
    width: 100%;
    height: 0.2px;
    background-color: #121110;
    margin-bottom: 2%;
}


.button{
    border-radius: 12px;
    background-color:#FF0088;
    padding: 0.5%;
    font-size: clamp(0.5rem, 1.5vw, 1rem) ;
    color: white;
    font-family: Raleway, sans-serif;
    display: inline;
    margin-bottom: 1%;
    justify-content: center;

}

.mail{
    color: white;
    font-family: RalewaySemiBold;

}

#categories{
    display: flex;
    flex-direction: row;
    gap: 5%;
    flex-wrap: wrap; /* Permet aux catégories de passer à la ligne si nécessaire */
}

#galerieprojets{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 90%;
    margin: 20px auto;
}

/* Bloc principal de l'image */
.imageBlock {
    position: relative; /* Nécessaire pour l'overlay */
    display: block;
    min-width: calc(33% - 30px);
    height: 300px;
   /* border-radius: 10px; */
   border: 5px solid white;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(7, 32, 24, 0.1);
    transition: transform 0.3s ease; /* Animation de zoom au survol */
}

.imageBlock:hover {
    transform: scale(1.05); /* Effet de zoom */
}

#minou:hover{
    background-image: url("media/AHauteurDeChat/mockups.jpg");
    background-size: cover; /* Ajuste l'image pour couvrir tout le bloc */
    background-position: center; /* Centre l'image */
}

#SP:hover{
    background-image: url("media/SuperDemain/groupe.jpg");
    background-size: cover; /* Ajuste l'image pour couvrir tout le bloc */
    background-position: center; /* Centre l'image */
}

#Loomy:hover{
    background-image: url("media/ProjetDiplome/hover.jpg");
    background-size: cover; /* Ajuste l'image pour couvrir tout le bloc */
    background-position: center; /* Centre l'image */
}

#Atmos:hover{
    background-image: url("media/Atmospharia/Identite.jpg");
    background-size: cover; /* Ajuste l'image pour couvrir tout le bloc */
    background-position: center; /* Centre l'image */
}

#Axo:hover{
    background-image: url("media/Axonaute/over.jpg");
    background-size: cover; /* Ajuste l'image pour couvrir tout le bloc */
    background-position: center; /* Centre l'image */
}

#Enedis:hover{
    background-image: url("media/Enedis/MockupData.jpg");
    background-size: cover; /* Ajuste l'image pour couvrir tout le bloc */
    background-position: center; /* Centre l'image */
}

#Alternance:hover{
    background-image: url("media/Alternance/Playing\ Cards\ Mockup.png");
    background-size: cover; /* Ajuste l'image pour couvrir tout le bloc */
    background-position: center; /* Centre l'image */
}

#mission:hover{
    background-image: url("media/MissionLab/InterfaceAccueil.png");
    background-size: cover; /* Ajuste l'image pour couvrir tout le bloc */
    background-position: center; /* Centre l'image */
}

/* Image dans chaque bloc */
.imageBlock img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit le bloc tout en gardant ses proportions */
    transition: opacity 0.3s ease; /* Animation pour l'effet d'assombrissement */
}

.imageBlock:hover img {
    opacity: 0; /* Réduit l'opacité de l'image au survol */
}

/* Conteneur du texte superposé */
.imageOverlay {
    position: absolute;
    top: 0; /* Superpose l'overlay sur tout le bloc */
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fond blanc semi-transparent */
    color: #524B42; /* Couleur du texte */
    text-align: left; /* Texte ferré à gauche */
    padding: 0px; /* Espacement intérieur */
    display: flex;
    flex-direction: column; /* Permet d'aligner le texte en colonne */
    justify-content: flex-end; /* Aligne le texte vers le bas */
    opacity: 0; /* Masqué par défaut */
    transition: opacity 0.3s ease; /* Animation pour faire apparaître */
}

/* Au survol, l'overlay apparaît */
.imageBlock:hover .imageOverlay {
    opacity: 1; /* Rend l'overlay visible */
}

/* Styles pour le titre */
.imageOverlay h3 {
    font-family: Raleway, sans-serif;
    font-size: clamp(0.5rem, 1.5vw, 1rem);
    margin: 0 0 0px; /* Marge en bas pour espacer le titre et les mots-clés */
    text-transform: uppercase;
}

/* Styles pour les mots-clés */
.imageOverlay h2 {
    font-family: RalewayLight;
    font-size: clamp(0.5rem, 1.5vw, 1rem);
    margin-left: 2%; /* Supprime les marges par défaut */
    margin-top: 0px;
}

.imageOverlay h3,
.imageOverlay p {
    margin-left: 2%; /* Supprime les marges par défaut */
    padding: 2px 0; /* Ajoute un espacement vertical entre les lignes de texte */
}

/*------------PAGE PAR PAGE------------*/

#projet{
    margin: 5%;
}

#buttonreturn{
    font-family: Raleway;
    font-size: 20px;
}


#presentation{
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    gap: 10%;
}

#text{
    flex: 1;
    display: flex;
    flex-direction: column;
}

h5{

    font-family: Raleway, sans-serif;
    font-size: 2vw;
    color:#FF0088;
    margin: 5px;

}
p1{
    font-family: RalewayMediumItalic, sans-serif;
    font-size: 0.8vw;
    color: #121110;
    margin-bottom: 0;
}

p2{
    font-family: RalewayMedium, sans-serif;
    font-size: 1.1vw;
    color: #121110;
    margin-top: 2%;
}

p3{
    font-family:  RalewayMediumItalic, sans-serif;
    font-size: 1vw;
    color: #121110;
    margin-top: 1%;
}

#visuel{
    flex: 1; /* Prend l’espace restant */
    width: 50%; /* Évite qu'elle ne devienne trop grande */
    height: auto;
}

#galerieimage{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes maximum */
    gap: 20px;
    width: 90%;
    margin: 20px auto;
}


.image{

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
}

.image img {
    width: 100%; /* Remplit le conteneur */
    height: 250px; /* Hauteur fixe */
    object-fit: cover; /* Coupe l'image pour la garder proportionnelle */
}

#cv{

    font-family: Raleway;
    font-size: 24px;
    margin: 10px;
}

p{
    font-family: RalewayLight;
    font-size: clamp(0.5rem, 1.5vw, 1rem);
}

#droitauteur{
    font-family: RalewayLight;
    font-size: clamp(0.7rem, 0.8vw, 1rem);
    justify-content: center;
    align-items: center;
    text-align: center;
}



/*------------RESPONSIVE------------*/
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Passe en colonne sur petits écrans */
        text-align: center;
    }

    #categories {
        flex-direction: column; /* Les catégories passent en colonne */
        align-items: center;
    }

    #galerieimage {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Réduit la taille des colonnes */
    }

    .image img {
        height: 200px; /* Réduit la hauteur sur petit écran */
    }

    #presentation {
        flex-direction: column; /* Passe en colonne */
        align-items: center; /* Centre les éléments */
        text-align: center; /* Aligne le texte */
    }

    #visuel {
        width: 80%; /* Ajuste la taille de l’image */
        max-width: 400px;
    }

    h5 {
        font-size: 4vw; /* Agrandit légèrement sur tablettes */
    }

    p1, p2, p3 {
        font-size: 2vw; /* Ajuste la lisibilité */
    }
}