/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                  CSS Sur Toutes Les Pages                                                                        */
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Animation fade-in + slide-up au chargement de la page */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation pour le header qui glisse depuis le haut */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse discret sur le bouton actif */
@keyframes activePulse {
    0%, 100% { box-shadow: 0px 4px 10px #00000050; }
    50%       { box-shadow: 0px 4px 18px #cd5c5c80; }
}

/* règle la taille du logo */
.logo {
    height: 150px;
    width: 230px;
    transition: 0.3s all;
}

/* effet de hover sur le logo */
.logo:hover {
    transform: translateY(-10px); /* fait monter le logo de 10px */
}
/* affichage du body */
body {
    background-color: #d3ccc9;
    font-family: 'Itim', cursive; /* utilise la fonte de texte "itim" pour rendre le texte plus fluide et lisible */
    min-height: 100vh;
    display: grid; /* active le mode grille */
    grid-template-rows: auto 1fr auto;
    margin: 0;
}
/* fait l'affichage pour le menu de la liste de navigation entre les different .html */
.menu-accueil {
    display: flex; /* utilise le display:flex */
    padding-top: 30px;
    gap: 50px;
    text-align: center; /* centre le texte en fonction de la page */
    font-size: 22px;
    font-weight: bold; /* mets en gras le texte */
}
/* affichage de la liste de navigation entre les -html */
nav ul li {
    list-style: none; /* utiliser pour ne pas afficher les puces automatiquement mise */
    background-color: #dad8d3;
    display: inline-block; /* utiliser pour mettre la liste en horizontal et pas vertical */
    padding: 15px 20px;
    border-radius: 12px;
    transition: 0.3s ease;
}
/* ajoute une animation de hover au boutton qui ne sont pas actif */
nav ul li:not(.active):hover {
    background-color: #f0f0f0;
    transform: translateY(-2px); /* quand on passe dessus sa monte de 2px le boutton */
    transition: 0.3s; /* sa prend 0.3seconde pour faire l'animation */
}
/* en fonction de la page ou on est le boutton devient rouge */
li.active{
    background-color: indianred;
    box-shadow: 0px 4px 10px #00000050; /* crée une ombre au boutton */
    animation: activePulse 2.5s ease-in-out infinite;
}
/* gere le header */
.header-accueil {
    display: flex;
    padding-top: 10px;
    border-radius: 12px;
    background-color: #dad8d3;
    box-shadow: 0px 4px 10px #00000080;
    animation: slideDown 0.5s ease both;
}
a {
    text-decoration: none;
    color: black;
}
/* affichage de tout les h1 */
h1, h3 {
    padding-left: 10px;
    text-decoration: underline; /* souligne le texte */
    text-underline-offset: 4px; /* cela veut dire que le soulignement se fait 4px en dessous de la position normal */
    transition: color 0.3s ease, text-underline-offset 0.3s ease;
}
h1:hover, h3:hover {
    color: indianred;
    text-underline-offset: 8px;
}
/* affichage du main */
main {
    padding-left: 5px;
    animation: fadeInUp 0.6s ease 0.2s both;
}
/* affichage du footer */
footer {
    text-align: center;
    animation: fadeInUp 0.6s ease 0.4s both;
}
p:Hover {
    transform: translateY(-2px); /* quand on passe dessus sa monte de 2px le boutton */
    transition: 0.25s ease; /* transition plus fluide */
    background-color: #dad8d3;
    font-size: 21px;
    border-radius: 6px;
}
.pfont {
    font-size: 20px;
    padding-left: 5px;
}
h2 {
    padding-left: 5px;
    text-decoration: underline;
    text-underline-offset: 4px;
}
h2:hover {
    transform: translateY(-3px);
}
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                  CSS Pour Le Main.html                                                                             */
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/

/* fait l'affichage des paragraphe pour le main.html */
.mainP {
    padding-left: 5px;
    padding-bottom: 15px;
    font-size: 20px; /* regle la taille du texte a 20px */
}
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                  TOP PERFORMANCE CSS                                                                             */
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/

.TopPerfBody {
    text-align: center;
}
/* permet de faire le container pour contenir la grille et les boites */
.TopPerfContainer {
    display: grid; /* active le mode grid */
    grid-template-columns: repeat(3, 1fr); /* un template de grille qui dis mettre 3 boite sur chaque ligne */
    gap: 150px;
    padding: 25px;
    max-width: 100%;
    row-gap: 135px; /* espacement entre les lignes de la grille */
    margin: auto;
}
/* pour centrer la derniere boite au millieu de l'écran */
.TopPerfBoite:last-child {
    grid-column: 2; /* sers a centrer l'image en disant qu'elle doit aller sur la 2ieme case de la grid */
}
/* l'affichage de la boîte */
.TopPerfBoite {
    background-color: rgb(230, 230, 230);
    border-radius: 15px; /* pour faire des coins arrondis de 15px */
    padding : 5px;
    border: 1px solid #ddd; /* dessine une bordure de 1px autour de la boite */
    text-align: center;
    box-shadow: 0px 4px 10px #00000050; /* crée une ombre autour de la boite pour faire un effet de profondeur */
    font-size : 25px;
    background-image: linear-gradient(135deg, #e6e6e6 0%, #ffffff 50%, #dcdcdc 100%);
    background-size: 300% 300%;
    background-position: 0% 0%;
    transition: background-position 0.8s ease, box-shadow 0.5s ease, border 0.5s ease;
}
/* Création de l'animation de lévitation */
@keyframes levitation {
    0% { transform: translateY(-10px); }   /* Position haute de départ */
    50% { transform: translateY(-4px); }   /* On redescend un petit peu (effet de poids) */
    100% { transform: translateY(-10px); } /* On remonte à la position haute */
}
.TopPerfBoite:hover {
    transform: translateY(-10px); /* Soulève la boîte vers le haut de 10px */
    box-shadow: 0px 15px 30px #00000070; /* Rend l'ombre plus floue et plus grande pour accentuer la hauteur */
    border: 1px solid indianred; /* Change la bordure pour une couleur plus "sport" (ex: orange ou bleu) */
    background-position: 100% 100%;
    animation: levitation 2s ease-in-out infinite;
}
/* l'affichage des images dans les boites */
.TopPerfImg{
    border-radius: 15px; /* pour faire des coins arrondis */
    max-width: 300px;
    height: auto; /* regle la hauteur automatiquement */
    transition: transform 0.4s ease;
}
.TopPerfBoite:hover .TopPerfImg {
    transform: scale(1.05);
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                  Concepts Car CSS                                                                                */
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/

.ConceptP {
    padding-left: 5px;
    margin-bottom: 35px;
    font-size: 20px;
}
.ConceptUL {
    font-size: 18px;
    padding-bottom: 15px;
}
.ConceptBold {
    font-weight: bold;
}