*{margin:0;padding:0;box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}input,select{height:50px;font-size:1.2em;border:none;box-shadow:0px 4px 14px rgba(0,0,0,.09)}input[type=submit],button{font-family:"Syne";font-weight:700;height:50px;color:#fff;background-color:#1d6154;margin:2em auto;width:180px;text-align:center;border-radius:60px}button{cursor:pointer;display:flex;align-items:center;justify-content:center}li a{text-decoration:none;color:#000}li:hover,li a:hover{font-weight:bolder;font-weight:1000;color:#93532f}ol,ul{cursor:pointer;list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{display:flex;align-items:center;flex-direction:column;line-height:1;max-width:100%;margin:auto;font-family:"Work Sans";font-size:14px;overflow-x:hidden}section{margin:50px 0;width:100%;max-width:1140px;margin:0 auto;padding:0 20px;box-sizing:border-box;max-width:100%;overflow-x:hidden}header{display:flex;justify-content:space-between;width:100%;max-width:1140px;margin:0 auto 50px;padding:0 20px;box-sizing:border-box}@media screen and (max-width: 1024px){header{padding:0 15px}}@media screen and (max-width: 768px){header{flex-direction:column;align-items:center;gap:20px;padding:0 10px}}header h1{display:flex;flex-direction:column;font-family:"Syne";font-size:22px;font-weight:800;color:#b1663c;text-align:center}@media screen and (max-width: 768px){header h1{font-size:18px}}header h1 span{font-family:"Work Sans";font-size:10px;letter-spacing:.1em}header nav ul{display:flex;align-items:center;list-style-type:none;flex-wrap:wrap;justify-content:center;gap:10px}@media screen and (max-width: 768px){header nav ul{gap:5px}}header nav ul li{padding:0 10px;font-size:1.2em}@media screen and (max-width: 768px){header nav ul li{font-size:1em;padding:0 5px}}header nav ul li img{width:20px;height:20px}header nav ul li:hover{color:#b1663c}.header_nav{display:flex;width:100%;justify-content:space-between;max-width:1140px;margin:0 auto;padding:0 20px;box-sizing:border-box}@media screen and (max-width: 1024px){.header_nav{padding:0 15px}}@media screen and (max-width: 768px){.header_nav{padding:0 10px;flex-direction:column;align-items:center;gap:15px}}.main_login{margin-top:50px;max-width:1440px;max-height:1024px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;box-sizing:border-box;width:100%}@media screen and (max-width: 1024px){.main_login{padding:15px}}@media screen and (max-width: 768px){.main_login{padding:10px;margin-top:30px}}.form-popup{display:flex;flex-direction:column;text-align:center;width:50%;margin:0 auto;padding:20px;box-sizing:border-box}@media screen and (max-width: 1024px){.form-popup{width:70%;padding:15px}}@media screen and (max-width: 768px){.form-popup{width:90%;padding:10px}}.form-popup p{color:red}.form-popup .inputErrorLogin{border:1px solid red}.form-popup h2,.form-popup a{text-align:center}.form-popup form{display:flex;flex-direction:column;gap:15px;margin-top:20px;width:100%;max-width:400px;margin-left:auto;margin-right:auto}.form-popup form input{padding:10px;border:1px solid #ccc;border-radius:4px;width:100%;box-sizing:border-box}.form-popup form button{padding:10px;background:#1d6154;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:bold;width:100%;max-width:200px;margin:0 auto}.form-popup form button:hover{background:#2a7a6a}.container-modale{display:flex;display:none;justify-content:center;align-items:center;position:fixed;width:1440px;height:100vh;background:rgba(179,178,175,.9);transform:translateY(-50px)}.container-modale .catalogueModal{z-index:50;background:#fff;width:40%;height:670px;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative}.container-modale .catalogueModal h2{font-family:"work sans";font-size:26px;color:#000;margin:60px 0 50px;font-family:"Work Sans";font-style:normal;font-weight:400;font-size:26px;line-height:30px;text-align:center}.container-modale .catalogueModal .fa-xmark{position:absolute;font-size:1.5rem;top:24px;right:24px;cursor:pointer}.container-modale .catalogueModal .fa-arrow-left{position:absolute;font-size:1.5rem;top:24px;left:24px;cursor:pointer}.container-modale .thumbnail-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;margin:0 100px;gap:30px 10px}.container-modale .thumbnail-grid figure{position:relative}.container-modale .thumbnail-grid figure img{width:76px;height:102px}.container-modale .thumbnail-grid figure .fa-trash-can{position:absolute;top:10px;right:5px;background:#000;color:#fff;padding:5px;cursor:pointer}.container-modale .insert-image{display:flex;flex-direction:column;width:420px;align-items:center;justify-content:center;border-radius:3px}.container-modale .img-chooser{background:#e8f1f7;width:420px;height:169px;display:flex;flex-direction:column;align-items:center;justify-content:center}.container-modale .img-chooser .fa-image{margin-top:20px;font-size:4rem;color:#b8c5cd}.container-modale .img-chooser #file{display:none}.container-modale .img-chooser .add-img{background:#b8c5cd;height:36px;border-radius:50px;border:none;margin:10px 0;color:#316785;display:flex;align-items:center;padding:0 20px;cursor:pointer}.container-modale .img-chooser #prev-img{height:169px;position:absolute;top:140px}.container-modale .img-chooser p{margin-bottom:10px;font-size:.625rem}.container-modale .form-container{display:flex;flex-direction:column}.container-modale .form-container #label-title{font-family:"Work Sans";font-style:normal;font-weight:500;font-size:14px;line-height:16px;position:absolute;width:32px;height:16px;top:330px;color:#3d3d3d}.container-modale .form-container #label-category{font-family:"Work Sans";font-style:normal;font-weight:500;font-size:14px;line-height:16px;position:absolute;width:32px;height:16px;top:430px;color:#3d3d3d}.container-modale .form-container #addTitle{margin-top:50px;width:420px}.container-modale .form-container #addCategory{margin-top:50px;width:420px}.container-modale #msg_err{font-size:1.5rem;margin-top:20px;color:red}.container-modale .container_insert-button #insert-button{width:237px;height:36px;position:relative;cursor:pointer;border:none}.container-modale .container_insert-button #insert-button::before{content:"";position:absolute;width:420px;height:2px;background:#b3b3b3;transform:translateY(-50px)}.container-modale #submit-button{display:none;width:237px;height:36px;cursor:pointer;border:none;background:gray}footer nav ul{display:flex;justify-content:flex-end;margin:2em}.barre{display:flex;gap:15px;align-items:center;justify-content:center;margin-bottom:10px;width:100%;height:59px;background:#000;transform:translateY(-70px)}@media screen and (max-width: 1024px){.barre{transform:translateY(-50px)}}.barre p{font-size:1rem;color:#fff}#introduction{display:flex;align-items:center;gap:30px;width:60%;margin:0 auto}#introduction h2{font-family:"Syne";font-weight:700;font-size:30px;color:#1d6154;text-align:center;margin-bottom:1em}@media screen and (max-width: 1024px){#introduction h2{font-size:26px}}@media screen and (max-width: 768px){#introduction h2{font-size:22px;margin-bottom:.8em}}@media screen and (max-width: 1024px){#introduction{width:80%}}@media screen and (max-width: 768px){#introduction{flex-direction:column;width:90%;text-align:center}}#introduction figure{flex:1}#introduction img{display:block;margin:auto;width:80%;max-width:300px;height:auto}#introduction article{flex:1}#introduction #mesprojets{font-family:"Syne";font-weight:700;font-size:30px;color:#1d6154;text-align:center;margin-bottom:1em}@media screen and (max-width: 1024px){#introduction #mesprojets{font-size:26px}}@media screen and (max-width: 768px){#introduction #mesprojets{font-size:22px;margin-bottom:.8em}}#introduction p{margin-bottom:.5em}#portfolio{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 20px;box-sizing:border-box}@media screen and (max-width: 1024px){#portfolio{padding:0 10px}}#portfolio h2{font-family:"Syne";font-weight:700;font-size:30px;color:#1d6154;text-align:center;margin-bottom:1em}@media screen and (max-width: 1024px){#portfolio h2{font-size:26px}}@media screen and (max-width: 768px){#portfolio h2{font-size:22px;margin-bottom:.8em}}#portfolio .edition-mode{align-items:center;width:100%;text-align:center}#portfolio .edition-mode p{margin-bottom:50px;color:#000;font-size:1rem;cursor:pointer;visibility:hidden}#portfolio .navProjets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:50px;padding:0 10px}#portfolio .navProjets .projets{width:auto;font-size:14px;padding:8px 10px;border:1px solid;background:none;color:#1d6154;cursor:pointer;padding:10px 15px;border-radius:60px;text-align:center;font-family:"Syne";font-style:normal;font-weight:700;font-size:16px;line-height:19px}@media screen and (max-width: 768px){#portfolio .navProjets .projets{font-size:14px;padding:8px 12px}}#portfolio .navProjets .projets:hover{background:#1d6154;color:#fff}.gallery{width:100%;display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:20px;padding:0 20px;box-sizing:border-box}@media screen and (max-width: 1024px){.gallery{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));padding:0 10px}}@media screen and (max-width: 768px){.gallery{grid-template-columns:1fr;gap:15px}}.gallery img{width:100%;height:auto;object-fit:cover;aspect-ratio:1.5}.contact{width:50%;margin:auto;padding:0 20px;box-sizing:border-box}@media screen and (max-width: 1024px){.contact{width:75%}}@media screen and (max-width: 768px){.contact{width:100%;padding:0 10px}}.contact h2{margin-bottom:20px;text-align:center}.contact form{text-align:left;margin-top:30px;display:flex;flex-direction:column;gap:20px}.contact form input,.contact form textarea{width:100%;box-sizing:border-box}.contact label{margin:2em 0 1em 0}.contact textarea{border:none;box-shadow:0px 4px 14px rgba(0,0,0,.09);min-height:100px}.contact>*{text-align:center}