body{
    background: linear-gradient(rgb(241, 140, 191), rgb(218, 195, 195), rgb(135, 245, 245));
    background-attachment: fixed; /*Pour que le motif de l'arrière plan de se répète pas*/
    font-family: cursive;
}
.ruban_acceuil{
    background-color: rgb(9, 9, 226);
    border-radius: 25px; /* Les coins + ou - arrondis */
    position: sticky; /* Colle quand on scrolle (donc le ruban ne disparait pas) */
    top: 8px; /* Indispensable de préciser : top, bottom, left ou right pour utiliser 'sticky'. Décale l'élément vers le bas de 8px */
    z-index: 3; /*La position z (1er plan, arrière plan...) par rapport aux autres éléments : + -> rapproche du 1er plan*/
}
.a_ruban_acceuil:hover:not(.a_ruban_acceuil:hover[id="1"]){ /* :not() -> sauf pour */
    background-color: darkblue;
    color: rgb(0, 255, 213); /* Couleur du texte */
}
.a_ruban_acceuil{
    font-style: normal;
    text-decoration: none;
    padding: 20px;
    padding-inline: 50px;
    color: aquamarine;
}
ul{ /*Ul -> une liste qui contient des éléments non ordonnée (sans ordre particulier : 1, 2, 3...) */
    display: flex;
    font-size: large;
    font-weight: 700;
    font-family: 'Franklin Gothic Medium', sans-serif;
    justify-content: center;
}
.a_ruban_acceuil[id="1"]{/* Seulement pour l'élément ayant l'id "1" */
    background-color: rgb(109, 109, 217);
    color: aqua;
    text-decoration: underline; /* Souligne le texte */
}
.a_ruban_acceuil:hover[id="1"]{
    cursor: initial /* L'apparence du curseur de la souris */
}

.section_intro_commerce{
    height: fit-content;
    width: 99%;
    background: linear-gradient(orange, orangered);
    border-radius: 8px;
    border: 5px solid red; /*La bordure a une épaisseur de 5px et est rouge*/
    font-size: large;
}
.imgEssor{
    width: 100%;
    position: relative;
    left: 52%;
}
.ref{
    text-decoration: none;
    font-size: larger;
}
.aIMG{
    display: flex;
    justify-content: center;
    width: 50%;
}
.imgIA{
    width: 30%;
    margin-left: 36%; /*Le décalage de la marge gauche*/
}
.imgCommerce{
    margin-left: 25%;
    width: 50%;
}
table{
    border: 0.5px solid black;
    width: 50%;
    background-color: black;
}
@media (max-width: 750px) { /* Quand la taille de l'écran est < que 750px */
    ul{
      flex-direction: column;
      text-align: center;
      width: 100%;
      padding: 0;
    }
    .ruban_acceuil{
        display: flex;
        top: 4px;
    }
    .imgIA{
        width: 50%; 
        margin-left: 25%;
    }
    .imgCommerce{
        margin-left: 15%;
        width: 75%;
    }
    .imgEssor{
        width: 375px;
    }
    .a_ruban_acceuil{
        padding-block: 2.5%;
    }
    table{
        border: 0.5px solid black;
        width: 75%;
        background-color: black;
    }
}
.liSquare{
    list-style-type:square; /* Change l'apparence de la puce de la liste */
}
li{
    text-align: center;
    list-style-position: inside; /* Rapproche et met avant le texte les puces des listes */
}
h2{
    text-align: center;
    text-decoration: underline;
}
.lien{
    color: blue;
}
.lien:hover{
    text-decoration: none;
    font-weight: 600; /* C'est l'épaisseur du texte (augmente de 100 en 100 : 100 --> 900)*/
}
p{
    padding-inline: 4%; /* Padding : crée un espace autour d'un élément (padding-inline = padding gauche et droit) */
}
footer{ /* Pied de page */
    display: flex;
    flex-direction: column; /* Le contenu est orientée en colonne */
}
.section_intro_IA{
    height: fit-content;
    width: 99%;
    background: linear-gradient(rgb(245, 74, 196),rgb(199, 102, 240));
    border-radius: 8px;
    border: 5px solid rgb(38, 0, 255);
    font-size: large;
}
.section_IA_pos{
    width: 99%;
    height: fit-content;
    padding-block-end: 1%;
    background: linear-gradient(rgb(6, 135, 6), chartreuse);
    border: 5px solid darkgreen;
    border-radius: 8px;
    font-size: large;
}
.section_neg_Secure{
    width: 99%;
    height: fit-content;
    background: linear-gradient(orange, yellow);
    border: 5px solid orangered;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block-end: 1%; /* Padding block : le padding sur la verticale */
}
.imgSecure{
    width: 38%;
    margin-left: 31%;
}
.section_IA_Name{
    background: linear-gradient(rgb(197, 48, 7), chocolate);
    width: 99%;
    border: 5px solid red;
    border-radius: 8px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block-end: 1%;
}
.dropDownIA{
    text-align: center;
    background-color: rgba(0, 0, 0, 0.112);
    padding-inline: 1%;
    padding-block-end: 1%;
}
.iaNameLi{
    list-style-type: none; /* Enlève la puce de la liste */
    display: none; /* Permet de cacher l'élément et de faire que le contenu de la page s'affiche comme si l'élément était supprimer*/
    padding: 3%;
    padding-inline: 10px;
    border: 2px solid rgba(0, 0, 0, 0);
}
.dropDownIA:hover .iaNameLi{ /* Quand je survole la div, le contenu s'affiche */
    display: block;
    font-family: Arial, sans-serif;
}
.iaNameLi:hover{
    background-color: rgb(0, 246, 164);
    cursor: cell; /* Change l'apparence du curseur pour une croix */
    border: 2px solid aqua;
    font-weight: 600;
}
.IAh4{
    color: rgb(249, 153, 136);
}
.lienIAName{
    color: black;
    text-decoration: none; 
}
h3, h4{
    text-decoration: underline;
}
td{
    border: 1px solid black;
}
td, tr{
    padding: 1.5%;
    text-align: center;
}
.tdPos{
    background-color: rgb(0, 162, 255);
    cursor:zoom-in;
}
.tdNeg{
    background-color: tomato;
    cursor: zoom-out;
}
.Pos{
    background-color: blue;
    font-weight: 900;
    cursor: zoom-in;
}
.Neg{
    background-color: red;
    font-weight: 900;
    cursor: zoom-out;
}
.section_tab_recap{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid black;
    border-radius: 8px;
    width: 99%;
    height: fit-content;
    padding-block-end: 1%;
    background: linear-gradient(rgb(60, 51, 51), gray);
}


.div-arrow_right{
    height: 60px;
    width: 60px;
    border-radius: 60px;
    background-color: rgb(0, 47, 255);
    justify-content: center;
    align-items: center;
    display: flex;
}
.line-arrow_right{
    height: 5px;
    width: 35px;
    background-color: rgb(0, 0, 0);
}
.arrow_right{
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-width: 5px;
    border-bottom: 0px;
    border-left: 0px;
    height: 22px;
    width: 22px;
    margin-left: 10px;
    position: absolute;
    rotate: 45deg;
}
.div-arrow_right:hover .arrow_right{
    border-color: rgb(177, 252, 184);
}
.div-arrow_right:hover .line-arrow_right{
    background-color: rgb(177, 252, 184);
}
.div-arrow_right:hover{
    animation: fleche_right 0.5s;
    animation-fill-mode: forwards;
}
@keyframes fleche_right{
    from{
        background-color: rgb(0, 47, 255);
    }to{
        background: radial-gradient(rgb(7, 212, 7), rgb(9, 87, 9));
    }
}
.div-arrow_right:active{
    height: 55px;
    width: 55px;
    border: 3.5px solid darkgreen;
}
.div-arrow_right:active .arrow_right{
    border-color: rgb(27, 58, 32);
}
.div-arrow_right:active .line-arrow_right{
    background-color: rgb(27, 58, 32);
}

.div-arrow_left{
    height: 60px;
    width: 60px;
    border-radius: 60px;
    background-color: rgb(255, 55, 55);
    justify-content: center;
    align-items: center;
    display: flex;
}
.line-arrow_left{
    height: 5px;
    width: 35px;
    background-color: rgb(0, 0, 0);
}
.arrow_left{
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-width: 5px;
    border-bottom: 0px;
    border-left: 0px;
    height: 22px;
    width: 22px;
    margin-right: 10px;
    position: absolute;
    rotate: 225deg;
}
.div-arrow_left:hover .arrow_left{
    border-color: rgb(247, 177, 252);
}
.div-arrow_left:hover .line-arrow_left{
    background-color: rgb(247, 177, 252);
}
.div-arrow_left:hover{
    animation: fleche_left 0.5s;
    animation-fill-mode: forwards;
}
@keyframes fleche_left{
    from{
        background-color: rgb(255, 55, 55)
    }to{
        background: radial-gradient(rgb(255, 27, 205), purple);
    }
}
.div-arrow_left:active{
    height: 55px;
    width: 55px;
    border: 3.5px solid rgb(81, 8, 56);
}
.div-arrow_left:active .arrow_left{
    border-color: rgb(58, 27, 55);
}
.div-arrow_left:active .line-arrow_left{
    background-color: rgb(58, 27, 55);
}
.section_arrow{
    display: flex;
    gap: 65%;
    justify-content: center;
    margin-top: 1%;
}
.sectionConclusion{
    width: 99%;
    height: fit-content;
    background: linear-gradient(rgb(209, 114, 63), rgb(199, 88, 14));
    border: 3px solid black;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block-end: 1%;
    cursor: -moz-grab;
}
.imgEntente{
    width: 30%;
    cursor:-moz-grabbing;
    border-radius: 50%;
}