@font-face {
	font-family: "Barokah";
	src: url("fonts/Barokah.ttf") format("truetype");
}
@font-face {
	font-family: "Mak Dah";
	src: url("fonts/Mak Dah.ttf") format("truetype");
}

body {
    margin: 0;
    margin-left:auto;
    margin-right:auto;
    padding: 0;
    font-family: 'Trebuchet MS';
    /*background: rgb(94,18,36);*/
    background-image: url("images/background.jpg");
    background-repeat: repeat;
    background-size: 100%;
    /*max-width: 1620px;*/
    height: fit-content;
    width: 100%;
    z-index: 0;
}

header {
    position: sticky;
    top: 0;
    height: min(10vw,13vh,115px);
    z-index: 3;
    max-height: 13vh;
}
.containerheader {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
}
.containerheadersticky {
    position: sticky;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    box-shadow: 0px 10px 20px black;
    height: 100%;
    width: 100%;
}
.undercontainer {
	font-family: "Mak Dah";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: min(10vw,13vh,115px);
    color: aliceblue;
    font-size: min(4vw,300%);
    padding-left: 2%;
    padding-right: 2%;
}
.lifnavigator {
    gap: 2.5rem;
    font-family: 'Trebuchet MS';
}
.navigator {
    font-size: 1.5rem;
}
.navigator a {
    color: white;
    text-decoration: none;
    padding: 10px;
}
.navigator a:hover {
    font-weight: bold;
    padding-left:6px;
    padding-right:6px;
}

.IMGlogo {
    width: min(10vw,13vh,115px);
}
.imagelogonav {
    width: 3vw;
}
.gapnavigator {
    margin-left: 3rem;
    gap:0.5rem;
}


.menu {
    /* Pour que le menu reste en place quand on scroll */
    position: fixed;
    /* Pour que le menu ne soit pas sur le texte et que ce dernier puisse être sélectionné */
    width: 0px;
    margin-top: min(2vw,20px);
    left: 2vw;
    z-index: 1;
}

#hamburger {
    /* Pour que la checkbox ne s'affiche pas */
    display: none;
}

#hamburger-logo {
    /* Pour que le curseur soit un pointeur */
    cursor: pointer;
    /* width: 5rem; */
    display : block;
    color: white;
    /* Pour que le menu hamburger s'affiche toujours */
    padding: 0;
    font-size: min(3vw,200%);
}

nav {
    display: none;
    background: black;
    overflow: hidden;
    width: 200px;
}

#hamburger-logo,
nav {
    /* Pour qu'il y ait une animation */
    transition: 0.7s;
    padding: 0;
}

/* Lorsque #hamburger est coché, le #hamburger-logo et le nav qui sont dans le même parent changent de propriété */
#hamburger:checked ~ #hamburger-logo,
#hamburger:checked ~ nav {
    /* Changement de la position pour afficher les menus */
    transform: translate(0);
    display: flex;
    flex-direction: column;
    align-self: center;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #444;
}



main {
    height: min(100%,77vh);
    max-height: 77vh;
}
.containermain {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: min(45vw,77vh);
    max-height: 77vh;
    width: 100%;
}

.containermain .etoilerouge {
    color:red;
    margin-left: 5px;
    margin-right: 5px;
    font-weight: 700;
}
.containermain .etoiletransparente {
    color: rgba(255, 0, 0,0);
    margin-left: 5px;
    margin-right: 5px;
    font-weight: 700;
}

.undercontainer451 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 45vw;
    height: min(45vw,77vh);
    max-height: 77vh;
}
.undercontainer451haut {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 20%;
    color: aliceblue;
    font-family: 'Barokah';
    font-weight: bold;
    font-size: min(2.5vw,4vh);
    margin-top: 2vh;
}
.undercontainer451bas {
    display: flex;
    justify-content: center;
    align-items: center;
    height: min(22.4vw,50vh);
    width: min(100vh,100%,40vw);
    position: relative;
    overflow: hidden;
    background-color: aliceblue;
    margin-top: -4vh;
}
.undercontainer10 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10vw;
    height: min(45vw,77vh);
    max-height: 77vh;
}
.containergaucheC {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    min-height: 100%;
    max-height: 100%;
    margin-top: 4vh;
}
.containerdroiteC {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 50%;
    height: 100%;
    color: aliceblue;
    font-weight: bold;
    font-size: 2rem;
    margin-top: 4vh;
}
.containerdroitehaut {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: aliceblue;
    font-weight: bold;
    font-size: 1rem;
    margin-top: 4vh;
}
.containerdroitebas {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55%;
}

.contactez-nous {
    width: 70%;
    height: 95%;
    padding: 0 50px 0 50px;
    color : aliceblue; 
}

.mailEnvoi {
    color: aliceblue;
    margin-bottom: 4vh;
}

.containerdroitehaut > h1 {
    display:flex;
    justify-content: center;
    font-weight: 700;
    margin: 0;
    font-family: 'Barokah';
}

.containerdroitehaut > span {
    display: flex;
    margin-bottom: 1rem;
}
.containerdroitebas > img {
    height: 100%;
    width: 100%;
    border-color: aliceblue;
    box-shadow: 0px 0px 15px 1px aliceblue;
    border-style: solid;
    border-radius: 10px;
    border-width: 0px;
}

form div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 1.5rem;
}

form div > label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 700;
    width : 35%;
    font-size: 1.1rem;
}
.fullWidth {
    min-width:fit-content;
    margin-right: 1vw;
}

form div > input, form div > select, form div > textarea {
    display: inline;
    background: #E8DCC4;
    border: none;
    border-radius: 5px;
    width: 65%;
    font-size: 1rem;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
}

form div > input, form div > select {
    height: 2rem;
    padding-left: 10px;
}

form div > select {
    appearance: none;
    background-size: 15px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDIxMy4zMzMgMjEzLjMzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8Zz4KCQk8cG9seWdvbiBwb2ludHM9IjAsNTMuMzMzIDEwNi42NjcsMTYwIDIxMy4zMzMsNTMuMzMzICAgIiBmaWxsPSIjMzAzMDMwIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIiBjbGFzcz0iIj48L3BvbHlnb24+Cgk8L2c+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPC9nPjwvc3ZnPg==');
    background-position: right 10px top 50%;
    background-repeat: no-repeat;
}

form div > textarea {
    height: 10rem;
    padding: 10px 0px 0px 10px;
}

form div > select option {
    background: white;
    color: #303030;
}

form div:last-child {
    align-items:center;
    margin-top: 50px;
}

form button {
    width: fit-content;
    position : relative;
    font-weight: 700;
    font-size: 2rem;
    background: white;
    border-radius: 15px;
    background-color: #E8DCC4;
    box-shadow: 0px 4px #a7987b;
    text-align: center;
    outline: none;
    border: none;
    padding : 5px 2vw 5px 2vw;
}

form button:active {
    box-shadow: 0px 0px #a7987b;
    top: 4px;
}

.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:2vw;
}
.imagelogo{
    width: 4vw;
}
.log.a {
    margin:0;
}
.actualitecaroussel {
    position: absolute;
    left: 0;
    z-index: 30;
    width: min(100vh,100%,40vw);
    bottom: 0;
    text-align: center;
}
.actualitecaroussel label {
    cursor: pointer;
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #000000;
    border-radius: 50px;
    margin: 0 0.2em 1em;
    border-style: solid;
    border-width: 2px;
    border-color: #ffffff;
}
.actualitecaroussel label:hover,.actualitecaroussel label:focus {
    background: #ffffff;
    border-style: solid;
    border-width: 2px;
    border-color: #000000;
}
.texthiden {
    display: none;
    width: min(100vh,100%,40vw);
    height: min(22.5242vw,50vh);
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    transition: left 0s 0.75s;
}
.slide-input{
    opacity: 0;
}
.slide-img {
    width: min(100vh,100%,40vw);
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    /*transition: left 0s 0.75s;*/
    transition: left 0s 0.75s;
}
.slide-noimg {
    width: min(100vh,100%,40vw);
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    /*transition: left 0s 0.75s;*/
    transition: left 0s 0.75s;
}
[id^="texthiden"]:hover + .texthiden {
    left:0;
    text-align: justify;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    margin: 20px;
    display : flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: left 0.65s ease-out;
    opacity: 1;
}
[id^="slide"]:checked + .slide-img {
    left: 0;
    z-index: 3;
    transition: left 0.65s ease-out;
}
[id^="slide"]:checked + .slide-noimg {
    left: 0;
    z-index: 3;
    transition: left 0.65s ease-out;
}
[id^="label"]:checked > .slide-input {
    background: #ffffff;
    border-style: solid;
    border-width: 2px;
    border-color: #000000;
}
.slide-img:hover{
    opacity: 10%;
}
.slide-noimg:hover{
    opacity: 100%;
}

.undercontainer45 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45vw;
    height: min(45vw,77vh);
    max-height: 77vh;
    /*background-image: url("images/enConstruction.jpg");*/
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}
.construction{
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    font-family: 'Barokah';
    font-weight: 900;
    font-size: 1.7rem;
    text-shadow: -5px 0 black, 0 5px black, 5px 0 black, 0 -5px black;
    z-index: 1;
}

.undercontainer452 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    text-align: center;
    z-index: 2;
}
.cellimpaire452{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14vw;
    width: 14vw;
    background-image: url(images/bouteille.png);
    max-width: min(25vh,14vw);
    max-height: min(25vh,14vw);
}
.spanimpaire452{
    color: aliceblue;
    font-family: 'Barokah';
    font-weight: 900;
    font-size: min(1.4vw,150%,2.5vh);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    transition: transform .7s;
}
.cellpaire452{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14vw;
    width: 14vw;
    background-color: #e6ddc0 ;
    max-width: min(25vh,14vw);
    max-height: min(25vh,14vw);
}
.spanpaire452{
    color: black;
    font-family: 'Barokah';
    font-weight: 900;
    font-size: min(1.4vw,150%,2.5vh);
    text-shadow: -2px 0 aliceblue, 0 2px aliceblue, 2px 0 aliceblue, 0 -2px aliceblue;
    transition: transform .7s;
}
.cellmilieu452{
    height: 14vw;
    width: 14vw;
    transition: transform .2s;
    box-shadow: 0px 0px 10px 2px black;
    z-index: 2;
    max-width: min(25vh,14vw);
    max-height: min(25vh,14vw);
}
.imagealex{
    height: 100%;
    width: 100%;
}
.cellmilieu452:hover{
    transform: scale(1.2);
    z-index: 2;
}
.cellimpaire452:hover > .spanimpaire452{
    transform: scale(1.25);
    z-index: 2;
    font-weight: 900;
}
.cellpaire452:hover > .spanpaire452{
    transform: scale(1.25);
    z-index: 2;
    font-weight: 900;
}
.blanc:link {
    color: black;
}
.blanc:visited {
    color: black;
}
.noir:link {
    color: aliceblue;
}
.noir:visited {
    color: aliceblue;
}

.undercontainergaucheAW {
    display: flex;
    justify-content:flex-end ;
    align-items: center;
    width: 25vw;
    height: 100%;
}
.itemleft {
    width: 80%;
    aspect-ratio: 1/1;
    /*border: dashed yellow;*/
}
.undercontainermilieuAW {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50vw;
    height: 100%;
    /*margin-top: 25vh;*/
}
.itemmiddleAW {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 80%;
    aspect-ratio: 4.5/3;
    /*border-style: solid dotted;*/
    /*border: dashed yellow;*/
}
.itemmiddletopAW {
    display: flex;
    height:25%;
}
.itemmiddlebottomAW {
    display: flex;
    height:75%;
}
.undercontainerdroiteAW {
    display: flex;
    justify-content:flex-start ;
    align-items: flex-end;
    width: 25vw;
    height: 100%;
}
.itemright {
    width: 65%;
    aspect-ratio: 1/2;
    /*border-style: solid dotted;*/
    /*border: dashed yellow;*/
}

.undercontainergaucheM {
    display: flex;
    justify-content:flex-end ;
    align-items: flex-end;
    width: 25vw;
    height: 100%;
}
.itemleftM {
    width: 65%;
    aspect-ratio: 1/2;
    /*border: dashed yellow;*/
}
.undercontainermilieuM {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50vw;
    height: 100%;
    /*margin-top: 25vh;*/
}
.itemmiddleM {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 80%;
    aspect-ratio: 4.5/3;
    /*border-style: solid dotted;*/
    /*border: dashed yellow;*/
}
.itemmiddletopM {
    display: flex;
    height:25%;
}
.texthautmiddle {
    padding-top: 4%;
    font-family: 'Barokah';
    font-size: 2rem;
    color: aliceblue;
}
.itemmiddlebottomM {
    display: flex;
    justify-content: center;
    align-items: center;
    height:75%;
    vertical-align: middle;
}
.textbasmiddle {
    font-size: 1.5rem;
    color: aliceblue;
    text-align: center;
}
.undercontainerdroiteM {
    display: flex;
    justify-content:flex-start ;
    align-items: center;
    width: 25vw;
    height: 100%;
}
.itemrightM {
    width: 80%;
    aspect-ratio: 1/1;
    /*border-style: solid dotted;*/
    /*border: dashed yellow;*/
}

.undercontainergaucheA {
    display: flex;
    justify-content: center ;
    align-items: center;
    flex-direction: column;
    width: 50vw;
    height: 100%;
}
.itemleftA {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 80%;
    height: min(45vw,77vh);
    max-height: 77vh;
}
.itemlefthautA {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height:30%;
}
.textgauchehautA {
    padding-top: 4%;
    font-family: 'Barokah';
    font-size: 2rem;
    color: aliceblue;
}
.itemleftmiddleA {
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    height:45%;
}
.textgauchemilieuA {
    font-size: 1.5rem;
    color: aliceblue;
    text-align: center;
}
.itemleftbottomA {
    display: flex;
    height:25%;
}
.textgauchebasA {
    padding-top: 4%;
    font-family: 'Barokah';
    font-size: 2rem;
    color: aliceblue;
}
.undercontainerdroiteA {
    display: flex;
    justify-content:flex-start ;
    align-items: center;
    width: 50vw;
    height: 100%;
    margin-left:1vw;
}
.itemrightA {
    width: 88%;
    height: 100%;
}

footer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 10vh;
}
.footergauche {
    display: flex;
    width: 45vw;
    color: aliceblue;
    font-size: min(1.5rem,2.5vw,4vh);
    justify-content: center;
    margin-bottom: 1%;
}
ul {
    display: flex;
    list-style: none;
    gap: 4rem;
    margin:0;
    padding: 0;
}
a.whitehref:link {
    color: aliceblue;
    background-color: transparent;
    text-decoration: none;
}
a.whitehref:hover {
    color: aliceblue;
    background-color: transparent;
    text-decoration: underline;
}
a.whitehref:visited {
    color: aliceblue;
    background-color: transparent;
    text-decoration: none;
}
.footermilieu {
    display: flex;
    width: 10vw;
}
.footerdroite {
    display: flex;
    width: 45vw;
    color: aliceblue;
    font-size: min(1rem,2vw,3vh);
    justify-content: center;
    margin-bottom: 1%;
    text-align: center;
}
.sixDIV {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2vw;
}
.six1DIV {
    display: flex;
    background-image: url("images/enConstruction.jpg");
    background-position: center top;
    /*background-size: auto 100%;*/
    background-size: 100% auto;
    border-radius: 2em;
    margin: 2% 1% 2% 1%;
    height: 77vh;
    flex-grow: 1;
    width: 33%;
    transition: width 300ms ease;
    flex-shrink: 1;
    border: 0.25em solid white;
}
.six1DIV:hover {
    z-index: 2;
    box-shadow: 0px 0px 10px 2px rgb(175, 175, 175);
    width: 150%;
}
.six1DIV:hover .sixTexteSPAN {
    display:inline;
    text-align: justify;
}
.sixTitreSPAN {
    writing-mode: vertical-lr;
    text-orientation: upright;
    font-size: clamp(1rem,4vw,3.5em);
    font-family: Arial;
    font-weight: bold;
    height: 100%;
    width:20%;
    text-align: center;
    color: aliceblue;
    -webkit-text-stroke: 1px black;
    text-shadow: black -1px 0px 20px;
    padding-left: 5%;
}
.sixTitreFLEX {
    display: flex;
    align-items: center;
    flex: 20%;
}
.sixTexteFLEX {
    display: flex;
    align-items: center;
    flex: 80%;
}
.sixTexteDIV {
    text-align: justify;
    margin-right: 5%;
}
.sixTexteSPAN {
    font-size: 22px;
    font-weight: bold;;
    margin-left: 5%;
    color: white;
    background-color: rgba(94,18,36,75%);
    text-shadow: 0 0 20px rgb(0, 0, 0);
    display: none;
}

@media all and (max-width:800px) {
    main {
        max-height: none;
        margin-top: 2vh;
    }
    header {
        background-color: #141414;
    }
    .logo {
        flex-direction:row;
        align-content: center;
    }
    .texthiden {
        font-size: 0.8rem;
    }
    .containermain {
        flex-direction: column;
    }
    .undercontainer {
        margin-top: 0;
    }
    .undercontainer451{
        width:100%;
        justify-content: flex-start;
        height: fit-content;
    }
    .undercontainer451haut {
        font-size: 1rem;
        height: auto;
        margin-top: 0;
    }
    .undercontainer451bas {
        height: 56.31vw;
        width: 100vw;
        margin-top: -2vh;
        z-index: 0;
    }
    .slide-img {
        width: 100vw;
    }
    .slide-noimg {
        width: 100vw;
    }
    .actualitecaroussel {
        width: 100vw;
    }
    .undercontainer10 {
        margin-top: 1vh;
        margin-bottom: 1vh;
        width: 100%;
        height: 10vw;
    }
    .undercontainer10 {
    }
    .undercontainer45 {
        width: 100%;
        height: fit-content;
        max-height: none;
    }
    .undercontainer452 {
    }
    .cellpaire452 {
        height: 33.33vw;
        width: 33.33vw;
        max-width: none;
        max-height: none;
    }
    .cellimpaire452 {
        height: 33.33vw;
        width: 33.33vw;
        max-width: none;
        max-height: none;
    }
    .cellmilieu452 {
        height: 33.33vw;
        width: 33.33vw;
        max-width: none;
        max-height: none;
    }
    .spanimpaire452 {
        font-size: 3vw;
    }
    .spanpaire452 {
        font-size: 3vw;
    }
    .cellmilieu452:hover{
    }
    .cellimpaire452:hover > .spanimpaire452{
    }
    .cellpaire452:hover > .spanpaire452{
    }
    #hamburger-logo {
        font-size: min(3.5vw,300%);
    }
    .menu {
        margin-top: 2vw;
        margin-left: 1vw;
    }
    footer {
        height: fit-content;
        align-items: center;
        flex-direction: column-reverse;
        width: 100%;
    }
    .footergauche {
        margin-top: 1vh;
        font-size: 1.3rem;
        width: 100%;
    }
    .footermilieu {
        display: none;
    }
    .footerdroite {
        margin-top: 2vh;
        font-size: 1rem;
        width: 100%;
    }
}

/*@media all and (max-width:500px) {
    .main {
        height: fit-content;
    }
    header {
        height: 5vh;
    }
    .texthiden {
        font-size: 0.6rem;
    }
    .containermain {
        flex-direction: column;
    }
    .undercontainer {
        margin-top: 0;
    }
    .undercontainer451{
        width:100%;
        justify-content: flex-start;
    }
    .undercontainer451haut {
        font-size: 1rem;
        height: auto;
        margin-top: 0;
    }
    .undercontainer451bas {
        height: 46.45625vw;
        width: 82.5vw;
        margin-top: -2vh;
        z-index: 0;
    }
    .undercontainer10 {
        margin-top: 1vh;
        margin-bottom: 1vh;
        width: 100%;
    }
    .undercontainer45 {
        width: 100%;
    }
    .undercontainer452 {
    }
    .cellpaire452 {
    }
    .cellimpaire452 {
    }
    .cellmilieu452 {
    }
    .spanimpaire452 {
    }
    .spanpaire452 {
    }
    .cellmilieu452:hover{
        transform: none;
    }
    .cellimpaire452:hover > .spanimpaire452{
        transform: none;
    }
    .cellpaire452:hover > .spanpaire452{
        transform: none;
    }
    .logo {
        flex-direction:row;
        align-content: center;
    }
    #hamburger-logo {
        font-size: medium;
    }
    .menu {
        margin-top: 1vh;
        margin-left: 1vw;
    }
    footer {
        height: fit-content;
        align-items: center;
        flex-direction: column-reverse;
        width: 100%;
    }
    .footergauche {
        margin-top: 1vh;
        font-size: 1rem;
        width: 100%;
    }
    .footermilieu {
        display: none;
    }
    .footerdroite {
        margin-top: 2vh;
        font-size: 0.7rem;
        width: 100%;
    }
}