@font-face {
  font-family: "Saira Stencil One";
  src:
    url("../fonts/SairaStencilOne-x1no0L2.woff2") format("woff2"),
    url("../fonts/SairaStencilOne-RRLyOaC.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root{
    /* color */--ocre: #CE8A2A;--epicea: #0E3B36;--text:#eaf2ec;--muted:#b3c2b8;--bg:rgba(6,25,21,0.80);
  /* Font size */--h1:clamp(30px, 5.2vw, 35px);--h2:clamp(24px, 2.8vw, 32px);--h3:clamp(18px, 2.2vw, 22px);--lh: 1.55;
  /* Font family */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --display: "Saira Stencil One", var(--sans); 
}

body {
    height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 18px;
    letter-spacing: 1px;
    scroll-behavior: smooth;
    }
/* Background image */
.contenair{
    background:url("../img/forest4-WGz9oHb.jpg") no-repeat center / cover ;background-attachment: fixed;
    filter: saturate(110%) contrast(105%) brightness(105%);
    position: relative;}
/* NAVBAR */
header{
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 20;
    background: rgba(6,25,21, 0.90);
    backdrop-filter: blur(5px);}
.content_navbar{display: flex;align-items:center;justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    padding: 8px 30px;}
.content_logo{display:flex;flex-direction: column;text-align: center;margin: 0 30px 0 0;width: 250px;}
.content_logo span{color: var(--muted);}
.logo{padding: 5px;width: 250px;height: 70px;}
.logo img{width: 95%;height: 80px;}
#span_header{padding-bottom: 5px;margin-left: 57px;}
nav{width: 100%;margin: 0px 20px}
.desktop-nav {flex: 1;}
.navbar_mobile{display: none;}
.nav_button{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
    width: 100%;
    padding: 0 20px;
    margin: 0;
}
.nav_button a{
    background: none;
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 1px;
    font-weight:100;
    font-size: 18px;
    padding: 5px;
    color: var(--muted);
    text-decoration: none;
    transition: background .4s  ease, color .4s ease, transform .6s ease;
    border: 1px solid transparent;
    border-radius: 12px;
    margin: 5px;
}
.nav_button a:hover{color: var(--ocre);border-radius: 10px;width: 60px;background:rgba(232,239,233,.06);}
.action{display: flex;flex-direction: row;justify-content: space-around;list-style: none;padding: 0 20px;width: 80%;  }
.action a{text-decoration: none;font-family: var(--display);font-size: 15px;font-weight: 100;letter-spacing: 1px;transition: transform 0.5s ease;}
.action a:hover{border-radius: 10px;transform:translateY(-5px, -5px);transform: scale(1.1);}
/* Button */
.btn_primary{background-color: var(--ocre);color:black;padding: 8px;border-radius: 12px;}
.btn_secondary{background-color: transparent;color:var(--text);border: 1px solid var(--muted);padding: 8px;border-radius: 12px;}
.btn_secondary:hover{color: var(--ocre);border: 1px solid var(--ocre);}
/* Toggle switch */
.burger {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 30;
}
.burger span, .burger span::before, .burger span::after {
    content: "";
    display: block;
    width: 30px;
    height: 4px;
    border-radius: 999px;
    background: var(--ocre);
    position: absolute;
    left: 7px;
    transition: 0.3s ease;}
.burger span {top: 20px;}
.burger span::before {top: -10px;left: 0;}
.burger span::after {top: 10px;left: 0;}
.burger.is-open span {background: transparent;}
.burger.is-open span::before {top: 0;transform: rotate(45deg);}
.burger.is-open span::after {top: 0;transform: rotate(-45deg);}
/* Navbar mobile and toggle switch*/
@media screen and (max-width: 1150px) {
    .action {flex-direction: row;align-items: center;}
    .action a{font-size: 12px;width: 135px;margin: 3px;text-align: center;padding: 4px;}
    .logo{padding: 0;height: 76px;}
    #span_header {font-size: 14px;margin-left: 50px;}  
}
@media screen and (max-width: 1115px) {
    .desktop-nav {display: none;}
    .burger {display: block;}
    .navbar_mobile {
        display: none;
        position: absolute;
        top: 118px;
        right: 20px;
        width: 260px;
        background: #0a2e2a;
        border-radius: 16px;
        padding: 20px;
        z-index: 25;
        box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    .navbar_mobile.is-open {display: block;}
    .mobile_nav_button {display: flex;flex-direction: column;gap: 12px;padding: 0;margin: 0;}
    .mobile_nav_button li {list-style: none;}
    .mobile_nav_button a {display: block;width: 100%;text-align: left;}
    .logo{padding: 0;height: 76px;}
    #span_header {font-size: 14px;margin-left: 50px;}
    .navbar_mobile {right: 0px;width: 119px;}
    .mobile_nav_button {gap: 0px;align-items: center;} 
    .nav_button a:hover{width: 100px; text-align: center;}
}
@media screen and (max-width: 700px) {
    .action {flex-direction: column;align-items: center;}
    .action a{font-size: 12px;width: 135px;margin: 5px;text-align: center;}
    .logo{padding: 0;height: 76px;}
    #span_header {font-size: 14px;margin-left: 50px;}
}
@media screen and (max-width: 600px) {
    .action{display: none}
    .content_logo {width: 240px;}
    .logo img {height: 60px;}
    .logo{padding: 0;height: 59px;}
    #span_header {font-size: 14px;margin-left: 58px;}
}
@media screen and (max-width: 400px) {
    .logo img {width: 70%;height: 40px;}
    .navbar_mobile {right: 0px;width: 119px;}
    .logo{height: 44px;}
    #span_header{margin-left: 41px;}
    .mobile_nav_button {gap: 0px;align-items: center;} 
    .nav_button a:hover{width: 100px; text-align: center;}
}

/* Footer */
footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: rgba(6,25,21, 0.90);
    backdrop-filter: blur(5px);
}
.content_logo_footer{display: flex;flex-direction: column;text-align: center;}
.logo_footer{padding: 5px;height: 76px;}
#logo_img_footer{width: 450px;height: 90px;}
#span_footer{padding-bottom: 5px;margin-left: 57px;color: var(--muted);}
.wrap_footer{display: flex;flex-direction: column;align-items: center;}
.links{display: flex;font-family: var(--display);}
.links a, .list_link_info a{
    color: var(--muted);
    text-decoration: none;
    padding: 5px;
    transition: background .4s  ease, color .4s ease, transform .6s ease;
    border: 1px solid transparent;
    border-radius: 12px;margin: 5px;}
.links a:hover{color: var(--ocre);border-radius: 10px;background:rgba(232,239,233,.06);padding: 5px;}
.content_link_info{display: flex;align-items: center;}
.list_link_info{width: 100%;display: flex;flex-direction: row;justify-content: space-around;font-family: var(--display);}
.link_info{list-style: none;}
.link_info a:hover{color: var(--ocre);border-radius: 10px;background:rgba(232,239,233,.06);padding: 5px;}

@media screen and (max-width: 1150px) {
    footer{flex-direction: column;}}
@media screen and (max-width: 700px) {.wrap_footer{font-size: 15px;}}
@media screen and (max-width: 620px) {.wrap_footer{font-size: 12px;}.list_link_info{padding: 0;}}
@media screen and (max-width: 500px) {
    .wrap_footer{flex-direction: row;}
    .links{flex-direction: column;align-items: center;}
    .list_link_info{flex-direction: column;align-items: center;}
    .link_info{margin: 12px;}
    #logo_img_footer{width: 290px;height: 85px;}}

    /* CARDS */

.cards_section{padding: 2rem;display: flex;justify-content: center;margin-bottom: 1rem;}
.cards_grid{display: grid;grid-template-columns: repeat(3, minmax(0,1fr));gap: 1.5em;align-items: stretch;}
.card{
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 16px;
  background: var(--bg);
  height: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.card_content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Page Home */

/* BLOC 1 */

.home_section_1 {margin: 0 50px;padding: 4rem 0;display: flex;flex-direction: row;gap: 4rem;justify-content: center;}
#hero_img_home, .product_img{
    border-radius: 15px;
    padding: 20px;
    background:
        radial-gradient(circle at 22% 18%, rgba(206, 138, 42, .32), transparent 34%),
        linear-gradient(145deg, rgba(6, 25, 21, .72), rgba(6, 25, 21, .28));
    border: 2px solid var(--ocre);
}
.content_dotext{height: 30px;display: inline-flex;align-items: center;gap: 12px;}
.dot{width: 10px;height: 10px;background: var(--ocre);border-radius: 50%;margin-left: 5px;box-shadow: 0 0 0 4px rgba(206,138,42,.18);}
.dot_text{border: 1px solid var(--muted);padding: 7px;border-radius: 22px;color: var(--text);font-family: var(--display);font-size: 15px;}
h1{font-size: var(--h1);font-family: var(--display);color: var(--text);text-transform: uppercase;margin: 5px;font-weight: 400;}
.text{font-size: 18px;color: var(--text);font-family: var(--sans);margin: 0;padding: 10px;text-align: center;list-style: none;line-height: 1.5;}
.hero_article {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    max-width: 35%;
    text-align: center;background: var(--bg);border-radius: 20px;padding: 20px;} 
.hero_img img{width: 400px;height: 100%;border-radius: 15px;}
.hero_image_frame {position: relative;overflow: hidden;border-radius: 22px;height: 100%;}
.hero_image_badge {
    position: absolute;
    left: 220px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .7rem .9rem;
    border: 1px solid rgba(206, 138, 42, .55);
    border-radius: 16px;
    background: rgba(6, 25, 21, .72);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.hero_image_badge span {color: var(--muted);font-family: var(--sans);font-size: 12px;letter-spacing: .8px;text-transform: uppercase;}
.hero_image_badge strong {color: var(--ocre);font-family: var(--display);font-size: 15px;font-weight: 400;letter-spacing: 1px;}
.content_cta{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;font-size: 15px;gap:15px;margin-top: 10px;}
.content_cta a{transition: transform 0.5s ease;}
.content_cta a:hover{transform: scale(1.1);}
.cta_primary{
    text-decoration: none;
    letter-spacing: 1px;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 100;
    background-color: var(--ocre);
    color: black;
    padding: 8px;
    border-radius: 12px;  
}
.cta_secondary{
    text-decoration: none;
    letter-spacing: 1px;
    font-family: var(--display);
    font-size: 15px;
    background-color: transparent;
    color: var(--text);
    border: 1px solid var(--muted);
    padding: 8px;
    border-radius: 12px;
}
.cta_secondary:hover{color: var(--ocre);border: 1px solid var(--ocre);}
@media screen and (max-width: 1130px) {
    .home_section_1 {flex-direction: column;margin: 0;}
    .hero_article {max-width: 85%;margin: 0 auto;}
    #hero_img_home{margin: 0 auto;}
    .content_cta{gap: 15px;}
    } 
@media screen and (max-width: 500px){
    .hero_img img{width: 290px;height: 500px;}
    .hero_image_badge{left: 130px;padding: .2rem .4rem;border-radius: 10px;}
}

/* BLOC 2 */
.prologue{margin: 0 auto;background: var(--bg);border-radius: 20px;padding: 20px;width: 36rem;text-align: center;margin-top: 15px;}
.prologue p{margin: 0;padding: 0;}
.cards_grid_b2{display: grid;grid-template-columns: repeat(2, minmax(0,1fr));gap: 1.5em;align-items: stretch;margin-bottom: 1rem;width: 80%;}
.h2{font-family: var(--display);font-size: var(--h2);color: var(--ocre);margin: 0;font-weight: 400;}
.h3{font-family: var(--display);font-size: var(--h3);color: var(--ocre);text-align: center;font-weight: 400;}
@media screen and (max-width: 1080px) {.card{align-items: center;padding: 0;padding-bottom: 15px;}.content_cta{flex-direction: column;width: 80%;}.content_cta a{text-align: center;}}
@media screen and (max-width: 950px) {.cards_section{margin: 0;}}
@media screen and (max-width: 700px) {.cards_grid_b2{width: 90%;grid-template-columns: repeat(1, minmax(0, 1fr))}.prologue{width: 25rem;}.card{padding: 0;padding-bottom: 15px;}}
@media screen and (max-width: 500px) {.prologue{width: 18rem;}}
/* BLOC 3 */
.home_section_3{display: flex;flex-direction: row;justify-content: center;flex-wrap: wrap;gap: 60px;margin:2rem;}
.content_argument{display: flex;flex-direction: column;align-items: center;position: relative;width: 340px;border-radius: 16px;}
.content_argument img{display: block;object-fit: cover;width: 340px;height: 325px;margin-bottom: 20px;border-radius: 20px;border: 2px solid var(--ocre);background: var(--bg);}
.img_argument{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    position: absolute;
    inset: 0 -18px;
    padding: 1.25rem;
    margin-top: 35px;
    color: var(--text);
    z-index: 1;
    width: 21rem;
    min-height: 17rem;
    text-align: center;
    border-radius: 20px; 
}
.title_argument{font-family: var(--display);font-size: var(--h3);color: var(--ocre);text-align: center;margin: 0;font-weight: 400;}
.sub_title_argument{color: var(--ocre);letter-spacing: 2px;font-family: var(--sans);font-weight: 500;}
.argument{color: var(--text);letter-spacing: 2px;font-family: var(--sans);padding:0 10px;font-size: 15px;line-height: 1.5;}
.spec_argument{
     width: 21rem;
    min-height: 12rem;
    background: rgba(6,25,21, 0.60);
    backdrop-filter: blur(16px);
    text-align: center;
    border-radius: 20px; 
    margin-bottom: 20px;
    border: 1px solid var(--ocre);
    line-height: 1.5;}
.card__overlay {position: absolute;max-height: 327px;inset: 0;background: linear-gradient(to top,rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.25));border-radius: 20px;}
@media screen and (max-width: 450px) {
    .home_section_3{margin: 1rem;}
    .content_argument img{max-height: 320px;}
    .content_argument:hover{zoom: 0%;}
    .card__overlay{max-height: 322px;}
    .img_argument{width: 336px;}
    .spec_argument{width: 16rem;}}
@media screen and (max-width: 400px) {.img_argument{width: 267px;padding: 0.25rem;inset: 0 15px;}}
/* BLOC 4 / BLOC 5*/
@media screen and (max-width:950px) {.cards_grid{grid-template-columns: repeat(1, minmax(0, 1fr));}.cards_section{margin: 0;}}
@media screen and (max-width: 650px) {.cards_section{margin: 0;}.brand{padding: 0.5rem;}.home{padding: 1rem;}}
/* Conclusion */
.cards_grid_conclusion{display:grid;grid-template-columns: repeat(1,minmax(0, 1fr));padding: 1rem;border-radius: 15px;}
@media screen and (max-width: 400px) {.cards_grid_conclusion{padding: 0;}}
/* Page Product */
/* Bloc 1 */
.product_img img{width: 100%;height: 100%;border-radius: 15px;filter: brightness(0.80);}
.guides_img img{height: 100%;/*width:100%;*/border-radius: 15px;}
/* Bloc 2 */
@media screen and (max-width: 1250px) {.product_img{margin-bottom: 33px;width: 80%;height: 100%;}.guides_img img{width: 500px;}}
@media screen and (max-width: 600px) {.guides_img img{width: 340px;}}
@media screen and (max-width: 450px) {.guides_img img{width: 280px;}}
/* Bloc 3 */
.product_argument{width:21rem;min-height: 9rem;background: rgba(6, 25, 21, 0.60);backdrop-filter: blur(16px);text-align: center;border-radius: 20px;margin-bottom: 20px;border: 1px solid var(--ocre);}
@media screen and (max-width: 400px) {.content_prod{width: 305px;}.macro{width: 19rem;}}    
/* Bloc 4 */
.faq{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
    background: var(--bg);
    border-radius: 20px;
    width: 85%;
    border: 1px solid var(--muted);
    border-radius: 15px;
}
.faq details:first-child{border-top: 0px;}
.faq details{display: flex;flex-direction: column;justify-content: flex-start;color: var(--text);font-family: var(--sans);border-top: 1px solid var(--muted);padding: 8px;}    
.pill{right:155px;position: absolute;font-size: 12px;border: 1px solid var(--muted);border-radius: 15px;padding: 5px;}
.faq summary{padding: 10px;}
.ans{text-align: center;line-height: 2;}
@media screen and (max-width: 1500px) {.pill{right:135px}}
@media screen and (max-width: 1200px) {.pill{right:110px}}
@media screen and (max-width: 800px) {.pill{right:80px}}
@media screen and (max-width: 570px) {.pill{display: none;}}
/* Bloc 3 */
.pink{color: #CE8A2A;font-weight: 900;}
.list_summary{text-align: start;line-height: 2;}
#hero-sav{background: var(--bg);border-radius: 15px;border: 1px solid #ddd;margin-bottom: 2rem;}
#hero-sav img{height: 250px;}

/* Message d'erreur */
.alert-success{font-family: var(--display);font-size: 20px;color: greenyellow;}
.alert-danger{font-family: var(--display);font-size: 20px;color: red;}
.form-error ul {font-family: var(--display);margin: 6px 0 0;padding-left: 0;list-style: none;}
.form-error li {font-family: var(--display);color: red;font-size: 20px;font-weight: 500;}