html {
     margin: 0;
     padding: 0;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }

 body {
     background-color: white;
     min-height: 100vh;
     overflow-x: clip;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     margin: O;
     padding: 0;
     width: 100vw;
 }

 ::-webkit-input-placeholder {
     text-align: center;
 }

 ::-moz-placeholder {
     text-align: center;
 }

 :-ms-input-placeholder {
     text-align: center;
 }

 ::-ms-input-placeholder {
     text-align: center;
 }

 ::placeholder {
     text-align: center;
 }

 .asterix {
     color: red;
 }

 #img_sae101 {
     display: -ms-grid;
     display: grid;
     -ms-grid-rows: (1fr)[5];
     grid-template-rows: repeat(5, 1fr);
     height: 500vh;
 }

 #img_sae101> :nth-child(1) {
     -ms-grid-row: 1;
     grid-row: 1;
     height: 100%;
     background-image: url(../trace/sae101/groupeC3_SAE101_livrable.pdf-1-1-1.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }

 #img_sae101> :nth-child(2) {
     -ms-grid-row: 2;
     grid-row: 2;
     height: 100%;
     background-image: url(../trace/sae101/groupeC3_SAE101_livrable.pdf-1-1-2.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }

 #img_sae101> :nth-child(3) {
     -ms-grid-row: 3;
     grid-row: 3;
     height: 100%;
     background-image: url(../trace/sae101/groupeC3_SAE101_livrable.pdf-1-1-3.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }

 #img_sae101> :nth-child(4) {
     -ms-grid-row: 4;
     grid-row: 4;
     height: 100%;
     background-image: url(../trace/sae101/groupeC3_SAE101_livrable.pdf-1-1-4.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }

 #img_sae101> :nth-child(5) {
     -ms-grid-row: 5;
     grid-row: 5;
     height: 100%;
     background-image: url(trace/sae101/groupeC3_SAE101_livrable.pdf-1-1-5.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
 #img_charte {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: (1fr)[6];
    grid-template-rows: repeat(6, 1fr);
    height: 600vh;
}

#img_charte> :nth-child(1) {
    -ms-grid-row: 1;
    grid-row: 1;
    height: 100%;
    background-image: url(trace/crea/charte-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#img_charte> :nth-child(2) {
    -ms-grid-row: 2;
    grid-row: 2;
    height: 100%;
    background-image: url(trace/crea/charte-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#img_charte> :nth-child(3) {
    -ms-grid-row: 3;
    grid-row: 3;
    height: 100%;
    background-image: url(trace/crea/charte-3.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#img_charte> :nth-child(4) {
    -ms-grid-row: 4;
    grid-row: 4;
    height: 100%;
    background-image: url(trace/crea/charte-4.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#img_charte> :nth-child(5) {
    -ms-grid-row: 5;
    grid-row: 5;
    height: 100%;
    background-image: url(trace/crea/charte-5.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#img_charte> :nth-child(6) {
    -ms-grid-row: 6;
    grid-row: 6;
    height: 100%;
    background-image: url(trace/crea/charte-6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
 #gabarit {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     height: 600vh;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }
 #img_corn {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: (1fr)[2];
    grid-template-rows: repeat(2, 1fr);
    height: 200vh;
}

#img_corn> :nth-child(1) {
    -ms-grid-row: 1;
    grid-row: 1;
    height: 100%;
    background-image: url(trace/crea/patron-corn.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#img_corn> :nth-child(2) {
    -ms-grid-row: 2;
    grid-row: 2;
    height: 100%;
    background-image: url(trace/crea/boite_corn.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
 #gabarit> :nth-child(2) {
     width: 50vw;
 }

 #gabarit> :nth-child(4) {
     max-width: 50vw;
 }

 #gabarit> :nth-child(5) {
     max-width: 50vw;
 }

 #gabarit> :nth-child(6) {
     max-width: 50vw;
 }

 #gabarit> :nth-child(7) {
     max-width: 50vw;
 }

 #gabarit> :nth-child(8) {
     max-width: 50vw;
 }

 #preview {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
 }

 #preview img {
     max-width: 60vw;
     border-radius: 10px;
 }

 #preview a {
     text-decoration: none;
     color: white;
     background-color: #27a47f;
     border-radius: 10px;
     padding: 1rem;
     margin: 1rem;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
 }

 #preview a:hover {
     scale: 120%;
 }

 #cont_2 a:hover {
     scale: 120%;
 }

 #cont_2 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     height: 100vh;
     width: 100vw;
     overflow: hidden;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -ms-grid-row: 2;
     grid-row: 2;
 }

 #cont_2 img {
     max-height: 15rem;
     margin: 2rem;
     border-radius: 10px;
 }

 #p_1,
 #p_2,
 #p_3,
 #p_4,
 #p_5 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
 }

 #cont_2 a {
     height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     background-color: #27a47f;
     border-radius: 15px;
     background-size: cover;
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
     color: white;
     font-size: 10pt;
     -webkit-transition: ease 1s;
     -o-transition: ease 1s;
     transition: ease 1s;
     text-decoration: none;
     padding: 5px 1rem;
 }

 footer {
     bottom: 0;
     left: 0;
     width: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     height: 40pt;
     font-size: large;
     list-style: none;
     margin-bottom: 0;
     margin-top: 1rem;
     padding-top: 5px;
     border-top: 4px solid;
     border-color: #57ae70;
     -ms-grid-row: 12;
     grid-row: 12;
 }

 #photo {
     height: 100px;
     margin-right: 1rem;
 }

 #cote {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 #con_titre {
     font-size: 30pt;
 }

 nav a {
     text-decoration: none;
     color: black;
     margin: 1rem;
     font-weight: 500;
 }

 nav ul {
     -ms-grid-row: 1;
     grid-row: 1;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     height: 60pt;
     font-size: 20pt;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     list-style: none;
     margin-top: 0;
     color: #18534F;
     border-bottom: 4px solid;
     border-color: #57ae70;
     max-width: 95vw;
 }

 .titre {
     text-align: center;
     margin: 5rem;
 }

 #cont_1 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -ms-grid-row: 1;
     grid-row: 1;
     width: 100%;
     right: 0;
     height: 100vh;
 }

 .material-symbols-outlined {
     font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
     color: #5eaf6e;
     text-align: center;
     width: 100%;
     font-size: 120pt !important;
     height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     bottom: 0;
     position: relative
 }

 h1 {
     font-size: 200px;
     background: -o-linear-gradient(150deg, #16a085 0%, #f4d03f 100%);
     background: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     text-align: center;
     font-family: 'elvetica';
     margin: 0;
 }

 #v_index {
     position: absolute;
     left: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -100;
     background-color: white;
     -webkit-filter: opacity(80%);
     filter: opacity(80%);
 }

 #v_index video {
     max-height: 500px;
     margin-top: 30px;
 }

 #charlie {
     font-size: 60px;
     margin: 0;
     color: black;
 }

 #dev {
     font-size: 30px;
     margin: 0;
     color: black;
 }

 #logo {
     height: 30px;
 }

 .container {
     display: -ms-grid;
     display: grid;
     -ms-grid-rows: (100vh)[2];
     grid-template-rows: repeat(2, 100vh);
     height: 200vh;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .material-symbols-outlined:hover {
     bottom: 0;
     -webkit-animation-duration: 2s;
     animation-duration: 2s;
     -webkit-animation-name: fleche;
     animation-name: fleche;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     animation-direction: alternate;
     position: relative;
 }

 @-webkit-keyframes fleche {
     0% {
         bottom: 0;
     }

     30% {
         bottom: 50px;
     }

     55% {
         bottom: 0;
     }

     75% {
         bottom: 50px;
     }

     100% {
         bottom: 0;
     }
 }

 @keyframes fleche {
     0% {
         bottom: 0;
     }

     30% {
         bottom: 50px;
     }

     55% {
         bottom: 0;
     }

     75% {
         bottom: 50px;
     }

     100% {
         bottom: 0;
     }
 }

 #cont_1 {
     -ms-grid-row: 1;
     grid-row: 1;
 }

 #contact {
     margin: 1rem 0 1rem 0;
     height: 90vh;
     -ms-grid-row: 3;
     grid-row: 3;
     text-align: center;
     padding-bottom: 1rem;
 }

 #form_contact:not(#prenom, #nom) {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     width: 40%;
     background-color: whitesmoke;
     margin: auto;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin-top: 1rem;
     border-radius: 10px;
     color: #0b002b;
 }

 #form_contact {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     height: 80%;
 }

 #message {
     height: 30%;
     width: 80%;
 }

 .l1 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     -webkit-box-align: cente;
     -ms-flex-align: cente;
     align-items: cente;
     margin: 1rem;
 }

 #form_contact_2 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 #contact_info,
 #contact_reclam,
 #contact_devis {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: distribute;
     -webkit-box-pack: end;
     justify-content: flex-end;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
     flex-direction: row-reverse;
     width: 100%;
 }

 .email {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     width: 80%;
     font-size: large;
     margin-bottom: 15pt;
     margin-top: 15pt;
 }

 #email {
     width: 100%;
 }

 .prenom {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     width: 35%;
     font-size: large;
 }

 .nom {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     width: 35%;
     font-size: large;
 }