/* Importing the Poppins font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');

/* Resetting default margin, padding, and box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Styling the body */
body {
    background-color: #0b033b;
    height: 100vh;
    overflow: hidden;
}
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/* style transporter sur les autres pages html se fier controle+F AAAAA*/
/* Styling the header */
header {
    padding: 0 10%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: animation2 2s linear;
}

/* Styling h4 inside header */
header h4 {
    color: #fff;
    font-size: 18px;
}

/* Styling links inside header*/ 

header a {
    padding: 8px 30px;
    text-decoration: none;
    font-size: 12px;
    border: 2px solid#fff;
    color: #fff;
    transition: 0.5s;
    position: relative;

}

/* Adding hover effects to links inside header */
header a:hover::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50px;
    height: 15px;
    width: 15px;
    background-color: #5753cb;
    border: 2px solid #fff;
    border-radius: 50%;
}

header a:hover::before {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 50px;
    height: 15px;
    width: 15px;
    background-color: #5753cb;
    border: 2px solid #fff;
    border-radius: 50%;
}

header a:hover {
    background-color: #5753cb;
    border: 2px solid #fff;
    border-radius: 6px;
    transform: rotate(10deg);
    color: #fff;
}
/* style transporter sur les autres pages html se fier controle+F AAAAA*/
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/* Styling the .home section */
.home {
    display: flex;
    align-items: center;
    height: calc(100% - 80px);
}

/* Styling the .left_right section */
.left_right {
    padding: 0% 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Styling the .left section */
.left {
    width: 45%;
    animation-delay: 1s;
    animation: animation1 2s linear;
}

/* Styling elements inside .left section */
.left span {
    color: #20669D;
    font-size: 12px;
}

.left h1 {
    color: #fff;
    margin: 20px 0;
    font-size: 35px;
    animation-delay: 2s;
    animation: animation1 2s linear;


    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border: 2px solid #00c3ff; */
}

.left p {
    color: #999;
    font-size: 12px;
    
    
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border: 2px solid #e5ff00; */
}

.left .buttons {
    margin: 30px 0;
    animation-delay: 3s;
    animation: animation1 2s linear;
  
  
  
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border: 2px solid #ffffff; */
}

.left .buttons a {
    padding: 8px 30px;
    text-decoration: none;
    font-size: 12px;
    
    
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border: 2px solid ; */
}

/* Styling the .buttons section ///c'est secondary border///*/
.buttons a:first-child {
    border: 2px solid #5753cb;
    color: #5753cb;
}

.buttons a:last-child {
    background-color: #5753cb;
    color: #fff;
    border: 2px solid #5753cb;
    margin-left: 10px;
}

/* Styling the .right section */
/* .right {
    width: 40%;
    perspective: 1000px;
} */

/* Styling the image inside .right section */
.right img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    transition: 0.5s;
    transform-style: flat;


    /*La propriété CSS \\\transform-style\\\ détermine si les enfants d'un élément sont positionnés dans l'espace tridimensionnel ou s'ils sont aplatis dans le plan de l'élément.
    ///flat/// indicates that the children of the element are lying in the plane of the element itself.

La valeur ///preserve-3d ///indique que les enfants de l'élément doivent être positionnés dans l'espace 3D.

Cela signifie que les enfants de l'élément seront affectés par les transformations 3D appliquées à l'élément parent, comme les rotations, les translations et les ombrages. Cela permet de créer des effets visuels 3D intéressants..
 ////le setting de base est ///preserve-3D///   ////
*/
    border-radius: 0%;
    animation-delay: 2s;
    animation: animation1 2s linear;
    
    
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border: 2px solid #ee00ff; */
}

.right img:hover {
    transform: rotateY(180deg);
    
    
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border pour voir quoi est quoi *//* border pour voir quoi est quoi */
    /* border: 2px solid #ff0000; */
}

/* Keyframes for animation1 */


@keyframes animation1 {
    from {
        transform: translateX(-600px);
    }
    
}


/*Cette partie de code définit une animation CSS appelée animation1. L'animation a une seule étape, appelée from. Cette étape définit la propriété transform de l'élément animé à translateX(-600px). Cela signifie que l'élément animé sera déplacé de 600 pixels vers la gauche au début de l'animation.

Pour utiliser cette animation, vous devez d'abord l'associer à un élément. Vous pouvez le faire en utilisant la propriété animation-name. Par exemple, vous pouvez ajouter le code suivant à votre feuille de style CSS :
////////////////////////////////////////////////////////////////////////
CSS
.element {
  animation-name: animation1;
}  //////////////////////////////////////////////////////////////////

Une fois que l'animation est associée à un élément, vous pouvez la démarrer en utilisant la propriété animation-play-state. Par exemple, vous pouvez ajouter le code suivant à votre feuille de style CSS :
//////////////////////////////////////////////////////////////////
CSS
.element {
  animation-play-state: running;
}
//////////////////////////////////////////////////////////////////

L'animation commencera alors à jouer et l'élément animé se déplacera de 600 pixels vers la gauche.

Voici un exemple de ce que cette animation pourrait produire :
//////////////////////////////////////////////////////////////////
HTML
<div class="element">
  <h1>Mon titre</h1>
</div>
//////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////
CSS
.element {
  animation-name: animation1;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
//////////////////////////////////////////////////////////////////
Utilisez le code avec précaution. En savoir plus
Dans cet exemple, l'animation dure 2 secondes et utilise une fonction de temporisation de type ease-in-out. Cela signifie que l'élément animé se déplacera lentement vers la gauche au début de l'animation, puis plus rapidement vers la fin.

Vous pouvez modifier la valeur de la propriété transform dans l'étape from pour contrôler le mouvement de l'élément animé. Par exemple, vous pouvez utiliser la valeur translateY(-600px) pour déplacer l'élément animé vers le bas de 600 pixels.*/
/* Keyframes for animation2 */


/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/* style transporter sur les autres pages html se fier controle+F AAAAA*/


@keyframes animation2 {
    from {
        transform: translateY(-100px);
    }
 }               
 
 /*animation descente "ModelLogo" et "More informations" */


 /* style transporter sur les autres pages html */
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////*/



textarea {
    width: 1000px; /* Largeur du textarea */
    height: 200px; /* Hauteur du textarea */
}