/* Appliquer une mise en page par défaut au body */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    font-size: large;
    background: linear-gradient(135deg, rgb(21, 21, 21), rgb(8, 8, 8));

}

/* Styliser la section principale pour occuper toute la hauteur */
.MainSection {
    background: linear-gradient(135deg, rgb(21, 21, 21), rgb(8, 8, 8));

    color: rgb(255, 255, 255);
    width: 100%;       /* Prendre toute la largeur */
    height: 100vh;     /* Prendre toute la hauteur de l'écran */
    display: flex;
    flex-direction: column;  /* Disposer le contenu verticalement */
    justify-content: center;  /* Centrer le contenu verticalement */
    align-items: center;      /* Centrer le contenu horizontalement */
    padding: 10%;  /* Ajuster le padding */
    box-sizing: border-box;  /* Inclure le padding dans les dimensions */
}

.is-small {
    width: 200px;
    height: 200px;
}

.small-text{
    font-size: medium;
}
/* Style pour le titre principal */
.maintitle {
    font-size: 3em;
    margin: 0;
}

/* Style pour le sous-titre */
.subtitle {
    font-size: 1.5em;
    margin: 0;
}

/* Styliser la section d'information pour occuper l'espace disponible */
.InfoSection {
    background: linear-gradient(135deg, rgb(34, 34, 34), rgb(8, 8, 8));
    color: rgb(203, 203, 203);
    width: 100%;
    padding: 5%;
    box-sizing: border-box;  /* Inclure le padding dans la largeur */
    font-size: 1.2em;
}

.InfoSection.variante{
    background: linear-gradient(135deg, rgb(69, 69, 69), rgb(8, 8, 8));
    color: rgb(214, 214, 214);

}
/* Conteneur de la grille */
/* Conteneur de la grille */
.bento-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes de tailles égales */
    gap: 20px; /* Espacement entre les cartes */
}

/* Taille par défaut des bento-cards */
.bento-card {
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgb(136, 147, 156), rgb(94, 104, 112)); /* Dégradé linéaire */
    border-radius: 5%;
    padding: 5%;
    margin: 1%; /* Réduction de la marge pour moins d'espace entre les cartes */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2), /* Ombre de base */
                -5px -5px 15px rgba(255, 255, 255, 0.1); /* Ombre légère pour l'effet 3D */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Pour les effets d'animation */
}

/* Effet 3D en hover */
.bento-card:hover {
    transform: translateY(-10px); /* Soulève légèrement la carte */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), /* Ombre plus prononcée */
                -10px -10px 20px rgba(255, 255, 255, 0.1); /* Ombre de lumière plus grande */
}

.bento-card-picture{
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 5%;
    background-position: center;
    background-size: cover;
    height: 200px; /* Ajustez la hauteur selon vos besoins */
    border-radius: 5%;  
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Pour les effets d'animation */  
    
}

.bento-card-picture:hover {
    transform: translateY(-10px); /* Soulève légèrement la carte */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), /* Ombre plus prononcée */
                -10px -10px 20px rgba(255, 255, 255, 0.1); /* Ombre de lumière plus grande */
}

.bento-card-picture.computeur{
    background-image: url(image/Illu/Computer.png);
    max-width: 80%; /* Ajustez la taille de l'image */
    height: auto;
    margin-top: 10px;
        
}

.bento-card-picture.book{
    background-image: url(image/Illu/book.png);
    max-width: 80%; /* Ajustez la taille de l'image */
    height: auto;
    margin-top: 10px;
        
}
/* Style du bouton principal */
.main-bouton {
    background-color: rgb(0, 0, 0);  /* Couleur de fond blanche */
    color: rgb(255, 255, 255);             /* Couleur du texte noire */
    border: none;             /* Pas de bordure */
    padding: 10px 20px;      /* Espacement autour du texte */
    font-size: 1.2em;        /* Taille de police */
    border-radius: 5px;      /* Coins arrondis */
    cursor: pointer;          /* Curseur en forme de main au survol */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Ombre pour l'effet 3D */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Effets d'animation */
}

/* Effet au survol pour le bouton principal */
.main-bouton:hover {
    transform: translateY(-3px); /* Lève légèrement le bouton */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.7); /* Ombre plus prononcée au survol */
}

/* Style du bouton secondaire */
.secondary-bouton {
    background-color: white;  /* Couleur de fond blanche */
    color: black;             /* Couleur du texte noire */
    border: none;             /* Pas de bordure */
    padding: 10px 20px;      /* Espacement autour du texte */
    font-size: 1.2em;        /* Taille de police */
    border-radius: 5px;      /* Coins arrondis */
    cursor: pointer;          /* Curseur en forme de main au survol */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Ombre pour l'effet 3D */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Effets d'animation */
}

/* Effet au survol pour le bouton secondaire */
.secondary-bouton:hover {
    transform: translateY(-3px); /* Lève légèrement le bouton */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.5); /* Ombre plus prononcée au survol */
}

.center {
    display: flex;            /* Utilisation de flexbox */
    justify-content: center;  /* Centre horizontalement */
    align-items: center;      /* Centre verticalement */
    height: 100%;             /* S'assure que la carte a une hauteur pour centrer verticalement */
    text-align: center;       /* Centre le texte */
}   


/* Taille des bento-cards en fonction de leur classe */
/* Une bento-card occupe 1, 2, ou 3 colonnes */
.bento-card.size-col-1 {
    grid-column: span 1;
}
.bento-card.size-col-2 {
    grid-column: span 2;
}
.bento-card.size-col-3 {
    grid-column: span 3;
}

/* Une bento-card occupe 1, 2, ou 3 lignes */
.bento-card  {
    grid-row: span 1;
}
.bento-card.size-row-2 {
    grid-row: span 2;
}
.bento-card.size-row-3 {
    grid-row: span 3;
}

.NumberInfo {
    flex: 1;                         /* Permet à l'élément de prendre tout l'espace disponible */
    display: flex;                  /* Utiliser flexbox pour centrer le texte */
    justify-content: center;        /* Centrer horizontalement */
    align-items: center;            /* Centrer verticalement */
    font-size: 2.5em;               /* Taille du texte, ajustez selon vos préférences */
    color: white;                   /* Couleur du texte */
    border-radius: 5%;              /* Coins arrondis pour un look soigné */
    margin: 0;                      /* Enlever les marges */
    padding: 10px;                  /* Ajout d'un padding */
}
/* navbar.css */
.navbar {
    position: fixed;                /* Rendre la navbar fixe */
    top: 0;                        /* Positionner en haut de l'écran */
    left: 0;                       /* Positionner à gauche */
    width: 100%;                   /* Prendre toute la largeur */
    background: rgba(0, 0, 0, 0.7); /* Couleur de fond noire avec transparence */
    color: white;                  /* Couleur du texte blanche */
    z-index: 1000;                 /* S'assurer qu'elle est au-dessus du contenu */
    padding: 10px 20px;            /* Espacement */
    backdrop-filter: blur(10px);    /* Flou en arrière-plan pour un effet de profondeur */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), /* Ombre portée */
                0 8px 20px rgba(0, 0, 0, 0.3); /* Ombre plus diffuse */
    transition: background 0.3s;   /* Transition pour le changement de fond */
}

.navbar:hover {
    background: rgba(0, 0, 0, 0.9); /* Assombrir le fond au survol */
}

.navbar ul {
    list-style: none;              /* Retirer les puces */
    padding: 0;                    /* Enlever le padding par défaut */
    margin: 0;                     /* Enlever la marge par défaut */
    display: flex;                 /* Disposer les éléments en ligne */
}

.navbar li {
    margin-right: 20px;            /* Espacement entre les éléments */
}

.navbar a {
    color: white;                  /* Couleur du lien */
    text-decoration: none;          /* Retirer le soulignement */
    padding: 5px 10px;             /* Espacement autour du texte */
    border-radius: 5px;            /* Coins arrondis pour les liens */
    transition: background 0.3s;   /* Transition pour le changement de fond */
}

.navbar a:hover {
    background: rgba(255, 255, 255, 0.1); /* Légère couleur au survol */
    text-decoration: underline;     /* Soulignement au survol */
}
/* Version mobile */
@media (max-width: 768px) {
    /* Réduire la taille de la police dans le body */
    body {
        font-size: medium; /* Taille de police plus petite */
    }

    /* Ajuster les styles de la section principale */
    .MainSection {
        padding: 5%; /* Réduire le padding */
        height: auto; /* Ajuster la hauteur pour le contenu */
    }

    /* Ajuster les styles des titres */
    .maintitle {
        font-size: 2.5em; /* Réduire la taille du titre */
    }

    .subtitle {
        font-size: 1.2em; /* Réduire la taille du sous-titre */
    }

    /* Ajuster les cartes bento pour qu'elles s'affichent en colonne */
    .bento-container { /* Une seule colonne */
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-card.size-col-3 {
        grid-column: span 1;
    }

    .bento-card.size-col-2 {
        grid-column: span 1;
    }
    /* Ajuster les cartes bento pour qu'elles s'adaptent à la largeur */
    .bento-card {
        margin: 5%; /* Ajuster la marge pour moins d'espace entre les cartes */
    }

    /* Ajuster la taille des images */
    .is-small {
        width: 100px; /* Prendre toute la largeur */
        height: auto; /* Garder les proportions */
    }
    .is-medium{
        width: 150px; /* Prendre toute la largeur */
        height: auto; /* Garder les proportions */
    }

    /* Ajuster la taille du texte dans NumberInfo */
    .NumberInfo {
        font-size: 2em; /* Réduire la taille du texte pour l'adapter à un petit écran */
    }

    /* Ajuster les boutons */
    .main-bouton, .secondary-bouton {
        width: 100%; /* Prendre toute la largeur */
        font-size: 1em; /* Réduire la taille de police */
        padding: 10px; /* Ajuster le padding */
    }

    /* Réduire les marges et paddings des sections d'informations */
    .InfoSection {
        padding: 2%; /* Ajuster le padding */
    }

    /* Réduire les marges des titres dans les sections d'informations */
    .maintitle {
        margin: 10px 0; /* Ajuster la marge */
    }

    /* Ajuster les styles de la navbar pour mobile */
    .navbar {
        padding: 10px 15px; /* Réduire le padding */
    }

    .navbar ul {
        flex-direction: column; /* Aligner les éléments en colonne */
    }

    .navbar li {
        margin-bottom: 10px; /* Espacement entre les éléments */
    }
}