body{
    margin: 0;
}
header{
    background-color: rgb(3, 74, 128) ;

}

.rouge{
    background-color: rgb(166, 35, 25);
    padding: 0.2em;
}
.jaunne{
    background-color: rgb(245, 179, 57);
    padding: 0.2em;
}

/* menu déroulant */
.check-menu {
  display: none;
}

.avantderoulant {
  margin-bottom: 0.2em;
}

.label-menu {
  display: inline-block;
  margin-left: 1.6em;
  color: white;
  cursor: pointer;
  font-size: clamp(14px, 1.5vw, 24px);
  text-decoration: none;
  cursor: pointer;
}

/* Wrapper à ajouter autour de .sous-menu dans ton HTML */
.sous-menu-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.2s ease;
}

.sous-menu {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-left: 2.5em;
  margin-bottom: 0;
  overflow: hidden; /* obligatoire pour grid-template-rows */
}

.check-menu:checked ~ .sous-menu-wrapper {
  grid-template-rows: 1fr;
  opacity: 1;
}

.apresderoulant {
  margin-top: 0.2em;
}

/* menu burger */
button{
    background: none;
    border: none;
    float: right;
    margin: 2em;
    cursor: pointer;

    svg{
        color: white;
        width: 70px;
        height: 70px;
    }
}

nav{
    font-family: Arial, Helvetica, sans-serif;
    width: 10%;
    left: auto;
    bottom: auto;
    background-color: rgb(3, 74, 128) ;
    border: none;
    height: 100vh;
    translate: 100% 0 ;
    transition: translate 0.5s, display 0.5s ease-out allow-discrete;

    &:popover-open{
        translate: 0 0;

        @starting-style{
            translate: 100% 0;
        }
    }

    ul{
        list-style-type: none;
        margin-top: 7em; ;

        li{
            padding: 0.2em 0;

            a{
                font-size: clamp(14px, 1.5vw, 24px);
                text-decoration: none;
                color: white;
            }
            .car{
                font-size: 15px;
            }
        }
    }
}

/* partie description des voitures */

.description{
margin: 2em;
border-radius: 1em;
font-family: 'Jockey One', sans-serif ;
    
    .traits{
        display: flex;
    }
    .trait{
        padding: 2px;
        background-color: black;
        margin-bottom: 4em;
        margin-right: 30em;
    }
    .traitcoter{
        background-color: black;
        padding: 2px;
        margin-top: 1.5em;
    }
    h1{
        font-size: clamp(20px, 4vw, 50px);
        margin-left: 1.2em;
    }
    .aprestitre{
        margin-top: -3.5em;
        padding-bottom: 1.5em;
        font-size: clamp(11px, 1.8vw, 20px);
    }
    #ageraapres{
        padding-left: 28em;
    }
    #regeraapres{
    padding-left: 27em;
    }
    #sadairapres{
    padding-left: 32em;
    }
    #oneapres{
        padding-left: 25em;
    }
    .text{
        font-size: clamp(14px, 2.5vw, 30px);
        margin-top: -2em;
        margin-left: 2em;
        display: flex;
        p{
            margin-right: 3em;
        }
    }
}
.titrebas{
    font-family: 'Jockey One', sans-serif ;
    font-size: clamp(25px, 5vw, 60px);
    margin-left: 1em;
    display: flex;

    .traitfin{
        padding: 3px;
        margin-bottom: 0.3em;
    }

    #jaunne{
        background-color: rgb(250, 213, 100);
    }
    
    #bleu{
        background-color: rgb(11, 116, 207);
        margin-right: 5px;
    }
    #noir{
        background-color: rgb(85, 85, 85);
    }
    #rouge{
        background-color: red;
        margin-right: 5px;
    }
    #bleuclair{
    background-color: #1c407a; 
    }
    #gris{
        background-color: #d8d8d8;
        margin-right: 5px;
    }
    #brun{
        background-color: #5A2E1F;
    }
    #orange{
        background-color: rgb(255, 126, 20);
    }
}
.soustitre{
    font-family: 'Island Moments', cursive;
    font-size: clamp(18px, 3.5vw, 40px);
    font-style: italic;
    margin-top: -1.8em;
    padding-bottom: 1em;
}
#sousjesko{
    margin-left: 6.8em;
}
#sousagera{
    margin-left: 7.2em;
}
#sousregera{
    margin-left: 7.9em;
}
#soussadair{
    margin-left: 11.45em;
}
#sousone{
    margin-left: 7em;
}


/* footer */

footer{
    background-color: rgb(3, 74, 128) ;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-bottom: 3em;
    
    .logofooter{
        display: flex;
        justify-content: space-between;
        padding: 1em;
        margin-left: 10em;
        margin-right: 1em;
        padding-top: 5em;
    }

    .trait{
        background-color: white;
        padding: 0.5px;
        margin-left: 11em;
        margin-right: 4em;
        margin-bottom: 1em;
    }
    .basfooter{
        display: flex;
        justify-content: space-between;
        margin-left: 11em;
        margin-right: 4em;
        a{
            text-decoration: none;
            color: white;
            padding-left: 1.5em;
        }
        a:hover{
            color: rgb(245, 179, 57);
        }
    }
}

/* responsive pour le header et le footer */

@media (max-width:400px ){

    header{
        img{
            width: 50%;
        }
    }
    button{
    margin: 1em;
    svg{
        width: 30px;
        height: 30px;
    }
    }

    .rouge{
    padding: 0.1em;
    }
    .jaunne{
    padding: 0.1em;
    }  

    .label-menu{
    margin-left: 2.8em;
}

    nav{
        width: 30%;
        height: 100%;
        text-align: start;
        ul{
            margin-top: 1em; ;

            li{
                padding: 0em;

                a{
                    font-size: clamp(11px, 1.8vw, 20px);
                }
                .car{
                    font-size: 11px;
                }
            }
        }
    }

    footer{
    padding-bottom: 1em;
    .logofooter{

        padding: 1em;
        margin-left: 2em;
        margin-right: 0em;
        padding-top: 2em;
    }
    .trait{
        padding: 0.5px;
        margin-left: 3em;
        margin-right: 3em;
        margin-bottom: 1em;
    }
    .basfooter{
        margin-left: 3em;
        margin-right: 3em;
    }
    }   
}

/* responsive pour la partie voitures */

@media (max-width:400px ){


    .description{
        margin: 1em;
        border-radius: 1em;
            .traits{
                display: flex;
            }
            .trait{
                padding: 0px;
                margin-bottom: 2em;
                margin-right: 1em;
            }
            .traitcoter{
                background-color: rgb(0, 0, 0);
                padding: 0px;
            }
            h1{
                margin-left: 1.2em;
                margin-bottom: 0;
            }
            .aprestitre{
                padding-left: 15em;
                margin-top: -1.6em;
                padding-bottom: 1.5em;
            }
            #ageraapres{
                padding-left: 21em;
            }
            #regeraapres{
                padding-left: 20em;
            }
            #sadairapres{
                padding-left: 24em;
            }
            #oneapres{
                padding-left: 19em;
            }
            .text{
                margin-top: 0em;
                margin-left: 0em;
                display: flex;
                flex-direction: column;
                p{
                    margin-right: 0em;
                    padding-left: 1.4em;
                    margin-bottom: 0em;
                }
            }
    }

    .titrebas{
        margin-left: 1em;
        display: flex;

        .jaunne{
            background-color: rgb(250, 213, 100);
            padding: 3px;
            margin-bottom: 0.3em;
        }
        
        .bleu{
            padding: 3px;
            background-color: rgb(11, 116, 207);
            margin-right: 5px;
            margin-bottom: 0.3em;
        }
    }
    .soustitre{
        font-family: 'Island Moments', cursive;
        margin-left: 6.7em;
        margin-top: -1.7em;
        padding-bottom: 0em;
    }
    #sousjesko{
    margin-left: 6.7em;
    }
    #sousagera{
        margin-left: 7.3em;
    }
    #sousregera{
        margin-left: 8em;
    }
    #soussadair{
        margin-left: 11.2em;
    }
    #sousone{
    margin-left: 7em;
}

}