html {
    background-color: #f7f7f7 ;
}

#html-form {
    background-color: white ;
}

html.menu-ouvert {
    background-color: #ffffff ;
}

body {
    margin: 0 ;
}

header {
    position: fixed;
    top : 0% ;
    z-index: 10;
    
    height: 50px ;
    width: 100% ;
    background-color: white ;
}

footer {
    bottom: 0%;
    background-color: white;
    padding-top: 45px ;
    width: 100%;
    height: 300px ;
    text-align: center;
    opacity: 1;
    transition : opacity 0.5s; 
    transform: translateY(0) ;
}

footer.caché {
    transform: translateY(100%) ;
    opacity: 0 ;
    transition : opacity 0.5s; 
}

main {
    margin-top: 50px;
    opacity: 1;
    transition : opacity 0.5s; 
    transform: translateY(0) ;
}

#main-acceuil {
    margin : 55px auto 0 auto ;
    max-width: 1140px ;
}

main.caché {
    transform: translateY(100%) ;
    opacity: 0 ;
    transition : opacity 0.5s; 
}

/* Barre de Naviguation */

#bar-nav {
    max-width: 1140px ;
    margin: auto;

    position: relative;
    
    display: flex ;
    align-items: center;

    height: 50px ;
}

#bar-nav p {
    font-family: "Roboto", sans-serif ;
    font-size: 18px ;
    color : #002a7f ;
    margin : 0 ;
    line-height: 21px;
}

#icone-menu-interagir{
    width : 21px ;
    height: 21px ;
    margin-right: 10px ;

    cursor: pointer;
}

#logo-suzuki {
    position: absolute;
    left : 50% ;
    transform : translateX(-50%) ;
    top : 10px ;
    width: 132px ;
    height: 25px ;
}

/* MENU */

#menu.caché {
    transform: translateY(-100%) ;
    opacity: 0 ;
    transition : transform 0.8s , opacity 0.8s; 
}

#menu {
    transform: translateY(9%) ;

    height: 550px ;
    max-width: 1140px ;
    margin: auto;
    border-top : 1px  solid #dedede ;

    display: flex;
    overflow: hidden;
    position: absolute ;
    top : 0 ;
    left: 0;
    right: 0;

    opacity: 1 ;
    transition : transform 0.8s , opacity 0.8s ; 
}

#onglets-menu {
    list-style: none ;
    margin: 0 ;
    padding : 0 ;
    width: 200px ;
}

#onglets-menu li {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 200px ;
    height: 39px ;
}

#onglets-menu li img.fleche {
    width: 12px ;
    height: 12px ;
    padding: 0 15px 5px 0;
}

#onglets-menu li:hover {
    background-color: #f7f7f7;
}

#onglets-menu li:hover .onglet {
    text-decoration: underline;
    color: black;
    font-weight: bold;
}

#onglets-menu li:hover #demande-essai {
    text-decoration: none ;
}

.onglet {
    padding-left: 10px ;
    color: #1e2e7c;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 17px;
    font-weight: 300;
    cursor: pointer;
}

#demande-essai a {
    text-decoration: none;
    color: inherit;
    display: flex ;
}

#demande-essai a img {
    width: 20px ;
}

#demande-essai a p {
    font-weight: bold;
    color:black;
    font-size: 12px ;
    padding-left: 10px;
}

#fleche-droite , #fleche-gauche {
    width: 35px;
    height: 56px;
    padding: 15px 5px 15px 5px ;
    box-sizing: border-box;
    background : #ffffff;
    position: absolute;
    opacity: 0.6 ;
    top : 27% ;
    z-index: 10 ;
}

#fleche-droite { right: 0% ;}

#fleche-gauche { 
    left : 200px ;
    transform: rotateY(180deg);
}

#fleche-droite:hover , #fleche-gauche:hover {
    opacity: 1 ;
}

#v-strom {
    width: 490px ;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap : 0px ;
    margin-right : 10px ;
}

#v-strom > img {
    width: 100% ;
    height: 451px ;
    object-fit: cover;
}

#v-strom .caption {
    height: 54px;
}

.caption {
    height: 51px ;
    padding: 19px 14px 19px 14px;
    box-sizing: border-box;
    display: flex ;
    justify-content: space-between;
    align-items: center;
    background-color: #e2e2e2;
    margin-bottom: 10px ;
}

.caption h6 {
    margin : 0 ;
    color: #1e2e7c;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 15px;
    font-weight: bold;
}

.caption img {
    width: 21px ;
    height: 21px ;
}

#v-strom img, .caption h6 , .onglet-menu img{
    cursor: pointer;
}

#v-strom > img:hover , .onglet-menu > img:hover {
    filter: contrast(80%);
}

.onglet-menu {
    width: 315px ;
    min-width: 315px; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-right : 10px ;
}

.onglet-menu > img {
    width: 100% ;
    height: 196px ;
    object-fit: cover;
}

/* FOOTER */

#rectangle-gris {
    max-width: 1140px;
    margin: 0 auto;
    background-color: #F7F7F7;
    text-align: center;
}

#rectangle-gris p {
    padding-top: 34px ;
    line-height: 14px ;
    margin: 0 ;

    font-size: 14px ;
    font-weight: 500 ;
    font-family: "Montserrat" , sans-serif;
}

.case-reseau {
    width : 9.08% ;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reseau {
    display: flex;
    justify-content: center;

    height: 84px ;
}

#reseau a {
    text-decoration: none;
}

.icone-reseau {
    width: 36px;
    height: 36px;
}

.icone-reseau:hover {
    fill : #FF2943 ;
}

#extras {
    display: flex;
    justify-content: center;
    align-items: center;

    max-width: 1140px ;
    margin: 18px auto 0 auto ;
}

.extra {
    width: 165px;
    text-align: center;
}

#logo-extra {
    width: 475px ;
    text-align: center;
}

.extra p{
    cursor: pointer;
    font-family: "Roboto", sans-serif ;
    font-size: 13px ;
    font-weight: 350;
}

footer p {
    font-family: "Roboto", sans-serif ;
    font-size: 14px ;
    font-weight: 350;
}

/* ACCEUIL */

#carroussel-suzuki {
    max-width: 1140px ;
    height: 760px ;
    margin: auto;

    background-image: url(images/SUZUKI/1140x760_visuel_7GX.jpg);
    position: relative;
}

#carroussel-suzuki img {
    width: 20px ;
    aspect-ratio: 1/1 ;
    position: absolute;
    top : 50% ;
    opacity: 0.6 ;
    cursor: pointer;
}

#fleche-gactu {
    left: 10px ; 
    transform: translateY(-50%) rotateY(180deg); 
}

#fleche-dactu {
    right: 10px ;
    transform: translateY(-50%); 
}

#carroussel-suzuki p {
    position: absolute;
    bottom: 25px ;
    left : 50% ;
    transform: translateX(-50%);
    font-family: "Montserret" , sans-serif ;
    font-weight: 800 ;
    color : white ;
    border : 2px solid white ;
    font-size: 15px ;
    line-height: 15px ;
    padding: 12px 24px ;
    border-radius: 3px ;
    cursor: pointer;
}

#carroussel-suzuki p:hover {
    opacity: 0.75 ;
}

#carroussel-suzuki span {
    position: absolute;
    bottom: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
}

#page1 {
    opacity: 1;
}

.point-page {
    width: 6px;
    height: 6px;
    background-color: black;
    margin: 6px;
    border-radius: 50%;
    opacity: 0.3 ;
    cursor: pointer;
}

#main-acceuil h3 {
    margin: 0;
    padding: 40px 0 20px 10px ;
    color : #002a7f ;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 24px ;
}

#offre-suzuki {
    display: flex;
    margin-top: 5px ;
    height: 570px ;
}

#offre-suzuki img {
    width: 50% ;
    margin: 5px ;
    cursor: pointer;
}

#offre-suzuki img:hover {
    filter: brightness(110%);
}

#actu-suzuki {
    display: flex;
}

.actu {
    padding : 10px ;
    width: 50% ;
    display: flex ;
    flex-direction: column;

}
.actu img{
    width: 100%;
    cursor: pointer;
}

.actu img:hover {
    filter: brightness(110%);
}

.texte-actu {
    display: flex ;
    background-color: white ;
    width: 100% ;
    height: 152px ;
}

.actu-conteneur-texte {
    width: 80% ;
    height: 152px ;

    display: flex;
    align-items: center;
    padding-left: 25px ;
}

.actu-conteneur-texte p {
    font-family: "Montserret" , sans-serif ;
    font-weight: 200 ;
    font-size : 17px ;
    line-height: 1.7 ;
    margin: 0;
    color : #003145 ;
}

.actu-conteneur-texte p strong {
    font-weight: bold ;
}

.actu-conteneur-fleche {
    width : 20% ;
    height: auto ;
    padding: 10px ;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.fleche-caption {
    transform: translateY(-50%);
    width: 100%;
}

.actu-conteneur-fleche img {
    width : 21px ;
    height: 35px ;
    transform: rotateY(180deg);
    cursor: pointer;
}

/* EXPERIENCE TOUR */

#experience-tour-img {
    max-width: 1120px ;
    margin : 60px auto 0 auto ;
}

#experience-tour-img img{
    width: 100%;
}

#programme-exptour {
    padding: 10px 10px 10px 10px ;
    max-width: 1140px ;
    margin: auto;
    font-weight: 900 ;
    height: 195px ;

    display: flex;
    justify-content: space-between;
    text-align: center;
    box-sizing: border-box;
}

#programme-exptour h1 {

    margin: 0;
    color: #002a7f;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 40px;
    line-height: 70px ;
    text-transform: uppercase;
    text-align: left;
    padding-left: 50px;
}

#conteneur-bouton a {
    margin: 0;
    padding: 20px;
    color: #ffffff;
    text-decoration: none;
    background-color: #002a7f ;
    font-family: "Montserrat", Sans-serif;
    font-size: 16px;
    line-height: 16px ;
    text-transform: uppercase;
    height: 56px ;
    width: 286px ;
    box-sizing: border-box;
    font-weight: 400;
    border-radius: 5px ;
}

#conteneur-bouton a:hover {
    background-color: #2851c4 ;
}

#conteneur-bouton {
    display: flex ;
    padding-bottom: 10px;
    align-items: center;
    justify-content: center;

    width: 360px;
}

.presentation {
    max-width: 1140px;
    margin: auto ;
    height: 425px ;
    display: flex;
}

.image-exptour {
    position: relative;
    width: 570px;
    height: 100% ;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-exptour img{
    width: 100% ;
}

.image-exptour span {
    margin-top: 8px;
    display: flex;
    align-items: center;
    height: 27px ;
}

.image-exptour .fleche-gexp {
    width: 20px ;
    aspect-ratio: 1/1 ;
    position: absolute;
    top : 50% ;
    opacity: 0.7 ;
    cursor: pointer;

    left: 20px ; 
    transform: translateY(-50%) rotateY(180deg); 
}

.image-exptour .fleche-dexp {
    width: 20px ;
    aspect-ratio: 1/1 ;
    position: absolute;
    top : 50% ;
    opacity: 0.7 ;
    cursor: pointer;

    right: 20px ;
    transform: translateY(-50%); 
}

.texte-exptour {
    box-sizing: border-box;
    width: 570px;
    height: 100% ;
    padding : 10px ;
    align-content: center;
}

.texte-exptour p {
    font-family: "Montserrat", Sans-serif;
    color : #003145 ;
    font-weight: 400;
    font-size: 16px ;
    margin-bottom : 30px ;
    line-height: 1.7 ;
}

/* TEST */ 

#test-bouton {
    text-align: center;
    width: 100% ;
    margin-top : 200px;

    font-family: "Montserrat", Sans-serif;
    color : #003145 ;
    font-weight: 400;
    font-size: 16px ;
    margin-bottom : 30px ;
    line-height: 1.7 ;
}

#test-page {
    position: absolute;
    bottom : 0 ;
}