/* =========================================
   GLOBALS
========================================= */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
}

.sec-page, .thi-page, .fou-page, .fif-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text-section-sec, .text-section-thi, .text-section-fou, .text-section-fif {
    height: 10vh;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 10vw;
    gap: 3vw;
}

.ts-text-divider {
    height: 0.6vh;
    width: 4vw;
    background-color: var(--terracotta);
    border-radius: 99px;
}

.ts-text {
    font: var(--typo-h3-tag);
    color: var(--terracotta);
}

/* =========================================
   NAVBAR
========================================= */
.navbar {
    width: 100vw;
    height: 7vh;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    background: transparent;
    border-bottom: var(--border-light);
    transition: var(--transition-base);
    overflow: visible;
}

.navbar.scrolled {
    background-color: var(--blanc-neige);
    border-bottom: var(--border-dark);
    box-shadow: var(--shadow-soft);
}

.nav-text {
    display: flex;
    align-items: center;
    gap: 3vw;
}

.nav-icon img { height: 10vh; aspect-ratio: 1/1; }

.nav-text span {
    font: var(--typo-nav);
    color: var(--main-color);
    transition: var(--transition-base);
}

.navbar.scrolled .nav-text span { color: var(--main-text); }
.nav-text span:hover, .navbar.scrolled .nav-text span:hover { color: var(--ocre-dore); }

.nav-cta {
    width: 10vw;
    height: 4.5vh;
    background-color: var(--ocre-dore);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-btn);
    transition: var(--transition-base);
}
.nav-cta:hover { box-shadow: var(--shadow-hover); }
.nav-cta span { font: var(--typo-btn); color: var(--blanc-neige); }

/* =========================================
   BURGER MENU & MOBILE NAV (Responsive)
========================================= */

.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative; 
    z-index: 1000;
}

.burger-line {
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    border-radius: 10px;
    transition: var(--transition-base);
}

.navbar.scrolled .burger-line {
    background-color: var(--vert-sapin);
}

.burger-menu.open .burger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background-color: var(--main-color); 
}
.burger-menu.open .burger-line:nth-child(2) {
    opacity: 0;
}
.burger-menu.open .burger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background-color: var(--main-color);
}

.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(30, 58, 43, 0.96); 
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    z-index: 998;
}

.mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vh;
    transform: translateY(30px);
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-overlay.open .mobile-nav-links {
    transform: translateY(0);
}

.mobile-link {
    font: var(--typo-h2);
    color: var(--blanc-neige);
    transition: var(--transition-base);
}

.mobile-link:hover {
    color: var(--ocre-dore);
    transform: scale(1.05);
}

.mobile-cta {
    margin-top: 3vh;
    padding: 2vh 8vw;
    background-color: var(--ocre-dore);
    border-radius: var(--radius-btn);
    font: var(--typo-btn-large);
    color: var(--blanc-neige);
    transition: var(--transition-base);
}

.mobile-cta:hover {
    box-shadow: var(--shadow-hover);
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    
    .nav-text, .nav-cta {
        display: none !important;
    }
    
    .burger-menu {
        display: flex;
    }
}

/* =========================================
   ACCUEIL
========================================= */
.fir-page {
    height: 100vh;
    background-image: linear-gradient(to bottom, rgba(30, 58, 43, 0.6), var(--vert-sapin)), url('../../src/img/montains_background.avif');
    background-position: bottom; 
    background-size: cover; 
    display: flex;
    align-items: center;
    padding-left: 7vw;
    width: 100%;
}
.fir-page span {
    font: var(--typo-hero);
    color: var(--blanc-neige);
    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.1));
    overflow: hidden;
}

/* =========================================
   LE PROJET
========================================= */
.sec-page { height: auto; background-color: var(--vert-sapin); }
.container-section-sec { height: auto; width: 100%; display: flex; flex-direction: row; }
.cs-text-sec { width: 50%; height: 100%; display: flex; flex-direction: column; padding: var(--pad-section); gap: 3vh; }

.cs-text-sec span:nth-child(1) { font: var(--typo-h1); color: var(--ocre-dore); }
.cs-text-sec span:nth-child(2) { font: var(--typo-body); color: var(--blanc-neige); }

.cs-image-sec { display: flex; justify-content: center; align-items: center; padding-bottom: 7vh; }

/* Carrousel */
:root { --items: 5; --gap: 0.75rem; --fill-active: hsla(204, 22%, 95%, 0.458); }
.image-thumbnail-carousel { padding: 1rem; width: clamp(360px, 90vw, 620px); display: flex; flex-flow: column; gap: 1rem; position: relative; }
.image-display { border-radius: 20px; overflow: hidden; min-height: 30vmin; aspect-ratio: 16 / 9; box-shadow: 0 0.5em 1.3em #0002; }
.screen { block-size: 100%; display: flex; background-image: linear-gradient(12deg, #aaa, #eee); position: relative; user-select: none; }
.thumbnail-carousel { display: flex; gap: var(--gap); block-size: 100%; }
.carousel__btn { flex: 1 0 max(2.75rem, 5.834%); background: transparent; border: none; cursor: pointer; display: flex; align-items: center; }
.arrow-icon { margin-inline: auto; width: max(80%, 1.5rem); fill: var(--blanc-neige); }
.carousel__btn:hover .arrow-icon { fill: var(--fill-active); }
.carousel__btn:disabled { opacity: 0.1; pointer-events: none; }
.carousel__slider { flex-grow: 999; list-style: none; display: flex; gap: var(--gap); padding: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel__slide { cursor: pointer; border-radius: 8px; overflow: hidden; scroll-snap-align: center; flex: 1 0 calc((100% / var(--items)) - 10px); aspect-ratio: 16 / 9; display: flex; align-items: center; }
.active.carousel__slide { outline: 2px solid var(--blanc-neige); outline-offset: -5px; }

/* =========================================
   LES PILIERS
========================================= */
.thi-page { height: auto; background-color: var(--main-color); }
.container-section-thi {
    height: auto;
    width: 100%;
    display: grid;
    grid-template-areas: "fr se" "th fo" "fi fi";
    padding-bottom: 5vh;
    grid-template-columns: 50% 50%;
}
.container-section-thi [class*="cs-case-thi-"] {
    border: var(--border-dark);
    margin: 2vh 2vw;
    border-radius: var(--radius-card);
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
}
.container-section-thi [class*="cs-case-thi-"]:hover { box-shadow: var(--shadow-hover); }

.cs-case-thi-1 { grid-area: fr; background-color: rgba(62, 126, 204, 0.1); }
.cs-case-thi-2 { grid-area: se; background-color: rgba(178, 151, 42, 0.1); }
.cs-case-thi-3 { grid-area: th; background-color: rgba(30, 58, 43, 0.1); }
.cs-case-thi-4 { grid-area: fo; background-color: rgba(16, 185, 129, 0.1); }
.cs-case-thi-5 { grid-area: fi; background-color: rgba(193, 92, 61, 0.1); flex-direction: row !important; }

.cs-case-top-thi { height: 12vh; display: flex; flex-direction: row; padding: 3vh 3vw; }
.cs-case-top-logo-thi { height: 100%; aspect-ratio: 1/1; border-radius: 0.75rem; display: flex; justify-content: center; align-items: center; }
.cs-case-top-logo-thi svg { height: 70%; }

.cs-case-thi-1 .cs-case-top-logo-thi { background-color: rgba(62, 126, 204, 0.3); }
.cs-case-thi-2 .cs-case-top-logo-thi { background-color: rgba(178, 151, 42, 0.3); }
.cs-case-thi-3 .cs-case-top-logo-thi { background-color: rgba(30, 58, 43, 0.3); }
.cs-case-thi-4 .cs-case-top-logo-thi { background-color: rgba(16, 185, 129, 0.3); }
.cs-case-thi-5 .cs-case-top-logo-thi { background-color: rgba(193, 92, 61, 0.3); }

.cs-case-top-title-thi { display: flex; align-items: center; padding-left: 3vw; }
.cs-case-top-title-thi span { font: var(--typo-h3-tag); color: var(--vert-sapin); }

.cs-case-bottom-thi { margin-bottom: 4vh; height: 75%; padding: 0 3.5vw; text-align: justify; }
.cs-case-bottom-thi span { font: var(--typo-body); color: var(--main-text); }
.cs-case-bottom-thi #cs-case-bottom-bold-thi { font: var(--typo-body-bold); color: var(--vert-sapin); }
.cs-case-bottom-thi a { font: var(--typo-body-bold); color: var(--vert-sapin); text-decoration: underline; transition: var(--transition-base); }
.cs-case-bottom-thi a:hover { color: var(--main-text); }

.cs-case-left-thi-5 { width: 70%; }
.cs-case-right-thi-5 { width: 30%; padding: 3vh 2vw; }
.cs-case-right-thi-5 img { border-radius: var(--radius-card); }
.cs-case-bottom-more-thi-5 { display: flex; flex-direction: row; padding-top: 5vh; align-items: center; gap: 5vw; }
.cs-case-bottom-more-thi-5 img { width: 10vw; aspect-ratio: 1/1; }

/* =========================================
   NOUS AIDER
========================================= */
.fou-page { height: auto; background-color: var(--main-color); }
.fou-page .text-section-fou { border-top: var(--border-dark); box-shadow: var(--shadow-soft); height: 8.5vh; }
.container-section-fou { height: auto; width: 100%; display: flex; flex-direction: column; }
.cs-first-fou, .cs-second-fou { height: auto; display: flex; flex-direction: row; margin: 5vh 0; width: 100%; }

.cs-fir-image-fou, .cs-sec-image-fou { width: 50%; padding: 0 8vw; display: flex; justify-content: center; align-items: center;}
.cs-fir-text-fou, .cs-sec-text-fou, .cs-thi-text-fou { width: 50%; display: flex; flex-direction: column; gap: 3vh; padding: var(--pad-section); }

.cs-fir-text-fou #cs-fir-text-one-fou, 
.cs-sec-text-fou #cs-sec-text-one-fou, 
.cs-thi-text-fou #cs-thi-text-one-fou { font: var(--typo-h2); color: var(--vert-sapin); }

.cs-fir-text-fou span, .cs-sec-text-fou span, .cs-thi-text-fou span { font: var(--typo-body); color: var(--main-text); overflow: hidden;}
.cs-fir-text-fou ul{ overflow: hidden;}
.cs-fir-text-fou ul li, .cs-sec-text-fou ul li { list-style: inside; margin-top: 1vh; overflow: hidden;}
.cs-fir-text-fou ul li #cs-first-text-bold-fou, 
.cs-sec-text-fou ul li #cs-second-text-bold-fou, 
.cs-thi-text-fou span #cs-third-text-bold-fou { font: var(--typo-body-bold); color: var(--vert-sapin); }

.cs-third-fou { height: auto; display: flex; flex-direction: row; border-top: var(--border-dark); box-shadow: var(--shadow-soft); width: 100%;}
.cs-thi-text-fou { text-align: justify; width: 100%; }
.cs-thi-text-fou #cs-thi-text-one-fou { margin-left: 25%; }

.cs-thi-cta-fou { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh; }
.cs-thi-cta-first-fou { width: 25vw; height: 10vh; background-color: var(--ocre-dore); display: flex; justify-content: center; align-items: center; border-radius: var(--radius-btn); transition: var(--transition-base); }
.cs-thi-cta-first-fou:hover { box-shadow: var(--shadow-hover); }
.cs-thi-cta-first-fou span { font: var(--typo-btn-large); color: var(--blanc-neige); }
.cs-thi-cta-second-fou{overflow: hidden; height: 5vh; display: flex;}
.cs-thi-cta-second-fou a { font: var(--typo-body-bold); color: var(--vert-sapin); text-decoration: underline; transition: var(--transition-base); overflow: hidden; }
.cs-thi-cta-second-fou a:hover { color: var(--main-text); }

/* Animation Logos */
.cs-fourth-fou { height: 23vh; border-top: var(--border-dark); border-bottom: var(--border-dark); box-shadow: var(--shadow-soft); overflow: hidden; width: 100%;}
.cs-fourth-fou .container { --s: 150px; --d: 8s; --n: 4; display: flex; mask: linear-gradient(90deg, #0000, #000 10% 90%, #0000); padding-block: 5px; }
.cs-fourth-fou .container img { width: var(--s); offset: shape(from calc(var(--s)/-2) 50%, hline by calc(sibling-count()*max(100%/var(--n),var(--s) + 10px))); animation: x var(--d) linear infinite calc(-1*sibling-index()*var(--d)/sibling-count()); }
@keyframes x { to { offset-distance: 100% } }
.container:hover img { animation-play-state: paused; }
:nth-child(2 of .container) img { animation-direction: reverse; }

/* =========================================
   CONTACT
========================================= */
.fif-page { height: auto; background-color: var(--main-color); }
.container-section-fif { height: auto; width: 100%; display: flex; flex-direction: column; }
.cs-form-fif { height: 90vh; width: 100%; display: flex; justify-content: center; align-items: center; padding: 5vh 30vw; }

.cs-form-send-area-fif { height: 90%; width: 100%; display: grid; grid-template-rows: 20% 20% 45% 15%; grid-template-areas: "na" "ma" "te" "bu"; }
.cs-form-sa-name-fif textarea, .cs-form-sa-mail-fif textarea, .cs-form-sa-text-fif textarea { width: 100%; border-radius: var(--radius-input); resize: none; border: none; background-color: rgba(223, 164, 96, 0.2); font: var(--typo-body); transition: var(--transition-base); padding: 3% 6%; color: var(--vert-sapin); }
.cs-form-sa-text-fif textarea { grid-area: te; height: 80%; padding: 6%; color: var(--main-text); }
.cs-form-sa-name-fif textarea { grid-area: na; height: 70%; }
.cs-form-sa-mail-fif textarea { grid-area: ma; height: 70%; }

.cs-form-sa-name-fif textarea:focus, .cs-form-sa-mail-fif textarea:focus, .cs-form-sa-text-fif textarea:focus { outline: none; box-shadow: -3px 3px 2px rgba(0,0,0,0.5) inset; background-color: var(--ocre-dore); color: var(--main-color); }

.cs-form-sa-send-button-fif { cursor: pointer;grid-area: bu; width: 25%; height: 60%; left: 75%; position: relative; background-color: var(--ocre-dore); border-radius: var(--radius-btn); display: flex; justify-content: center; align-items: center; transition: var(--transition-base); }
.cs-form-sa-send-button-fif button { cursor: pointer;border: none; font: var(--typo-btn); color: var(--blanc-neige); background: transparent; }
.cs-form-sa-send-button-fif:hover { box-shadow: var(--shadow-hover); }

.cs-info-fif { height: auto; width: 100%; display: grid; grid-template-rows: 7vh 13vh 10vh 70vh; justify-content: center; }
.cs-info-first-fif, .cs-info-second-fif, .cs-info-third-fif, .cs-info-fourth-fif { width: 100vw; display: flex; justify-content: center; }
.cs-info-first-fif span { font: var(--typo-h2); color: var(--vert-sapin); }
.cs-info-second-fif { align-items: flex-end; padding-bottom: 2vh; }
.cs-info-second-fif span { font: var(--typo-body-bold); color: var(--vert-sapin); }

.cs-info-third-fif { flex-direction: row; gap: 3vw; padding: 2vh 0; }
.cs-info-third-fif a { height: 100%; aspect-ratio: 1/1; border-radius: 10px; display: flex; justify-content: center; align-items: center; transition: var(--transition-base); border: var(--border-dark); }
.cs-info-third-fif a:hover { box-shadow: var(--shadow-hover); }
.cs-info-third-fif a img { height: 100%; width: 100%;  }
.cs-info-third-fif a:nth-child(1) img{ width: 150%; height: 150%;}
.cs-info-third-fif a:nth-child(4) img{ width: 170%; height: 170%;}

.cs-info-fourth-fif { flex-direction: row; gap: 4vw; padding: 14vh 0; }
.cs-info-fourth-one-fif, .cs-info-fourth-two-fif, .cs-info-fourth-three-fif { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 10/16; }
.cs-info-fourth-one-fif span:nth-child(1), .cs-info-fourth-two-fif span:nth-child(1), .cs-info-fourth-three-fif span:nth-child(1) { font: var(--typo-body-bold); color: var(--vert-sapin); }
.cs-info-fourth-one-fif span, .cs-info-fourth-two-fif span, .cs-info-fourth-three-fif span { font: var(--typo-body); color: var(--main-text); padding: 1vh; }
.cs-info-fourth-one-fif img, .cs-info-fourth-two-fif img, .cs-info-fourth-three-fif img { background-color: rgb(172, 169, 169); border-radius: 30px; width: 100%; }

/* =========================================
   FOOTER
========================================= */
.footer-container { height: 40vh; background-color: var(--vert-sapin); border-top: 4px solid var(--terracotta); display: flex; flex-direction: column; overflow: hidden;}
.fc-top-case { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-areas: "le le mi ri"; width: 92vw; height: 28vh; align-items: center; border-bottom: var(--border-light); margin: 0 4vw; overflow: hidden;}
.fc-top-left-case { grid-area: le; padding-left: 5vw; }
.fc-top-left-case img { width: 50%; }
.fc-top-middle-case { grid-area: mi; } .fc-top-right-case { grid-area: ri; }
.fc-top-middle-case, .fc-top-right-case { display: flex; flex-direction: column; gap: 3vh; }
.fc-top-middle-case span, .fc-top-right-case span { font: var(--typo-h3-tag); color: var(--blanc-neige); transition: var(--transition-base);}
.fc-top-middle-case ul, .fc-top-right-case ul { display: flex; flex-direction: column; gap: 1vh; }
.fc-top-middle-case ul li a span, .fc-top-right-case ul li a span { font: var(--typo-body); color: rgba(248, 249, 250, 0.6); transition: var(--transition-base); }
.fc-bottom-case span{ font: var(--typo-body-small);color: rgb(248 249 250 / 0.4);transition: var(--transition-base);}
.fc-top-middle-case ul li span:hover, .fc-top-right-case ul li span:hover, .fc-bottom-case a span:hover { color: var(--ocre-dore); }

.fc-bottom-case { display: flex; width: 92vw; height: 12vh; justify-content: space-between; align-items: flex-end; margin: 0 4vw; padding-bottom: 3vh; }
.fc-bottom-middle-case a span { text-decoration: underline; }
.fc-bottom-right-case { display: flex; gap: 2vw; }

/* =========================================
   RESPONSIVE
========================================= */

/* ========== IPHONE 16 ========== */

@media screen and (max-width: 400px) {
/* ===== NAVBAR ===== */
/* ===== ACCEUIL ===== */
.fir-page{padding-left: 4vw;}
.fir-page span{color: rgba(255, 255, 255, 0.624);}

/* ===== LE PROJET ===== */
.container-section-sec{flex-direction: column;}
.cs-text-sec{width: 100%;height: 50vh;overflow: hidden;}
.cs-image-sec{overflow: hidden;}
.thumbnail-carousel{gap: 0;}
.arrow-icon {width: 70%;height: 100%;}

/* ===== LES PILLIERS ===== */
.container-section-thi { grid-template-areas: "fr" "se" "th" "fo" "fi"; grid-template-columns: 100%; }
.container-section-thi [class*="cs-case-thi-"]{ padding: 0 2vw;}
.cs-case-thi-5{flex-direction: column !important; }
.cs-case-left-thi-5{width: 100%; overflow: hidden;}
.cs-case-right-thi-5{ width: 50%;}
.cs-case-bottom-thi{height: 100%;}

/* ===== NOUS AIDER ===== */
/* .container-section-fou{height: 390vh;} */
/* .cs-first-fou{height: 100vh;}
.cs-second-fou{height: 100vh;}
.cs-third-fou{height: 120vh;} */
.cs-thi-text-fou{align-items: center;}
.cs-thi-text-fou #cs-thi-text-one-fou{margin-left: 0;}
.cs-thi-cta-first-fou{width: 50vw;}
.cs-thi-cta-fou{padding-bottom: 2vh;}
.cs-first-fou,.cs-third-fou{flex-direction: column-reverse;}
.cs-second-fou{flex-direction: column;}
.cs-fir-image-fou, .cs-sec-image-fou,.cs-fir-text-fou, .cs-sec-text-fou, .cs-thi-text-fou {width: 100%; height: 100%;}
.cs-fir-image-fou, .cs-sec-image-fou{height: 50%;}
.cs-fourth-fou {height: auto;}

/* ===== CONTACT ===== */
.cs-form-fif{padding: 0 10vw;}
.cs-form-sa-send-button-fif{width: 40%; left: 60%;}
.cs-form-sa-send-button-fif button{font: var(--typo-nav);}
.cs-info-fourth-fif{flex-direction: column;padding: 5vh 0; align-items: center;}
.cs-info-fourth-one-fif, .cs-info-fourth-two-fif, .cs-info-fourth-three-fif{flex-direction: row; overflow: hidden;display: grid;grid-template-areas: "fi th""se th""fo th""ff th"; width: 94vw; column-gap: 3vw;}
.cs-info-fourth-one-fif span:nth-child(1), .cs-info-fourth-two-fif span:nth-child(1), .cs-info-fourth-three-fif span:nth-child(1){grid-area: fi;}
.cs-info-fourth-one-fif span:nth-child(2), .cs-info-fourth-two-fif span:nth-child(2), .cs-info-fourth-three-fif span:nth-child(2){grid-area: se;}
.cs-info-fourth-one-fif span:nth-child(4), .cs-info-fourth-two-fif span:nth-child(4), .cs-info-fourth-three-fif span:nth-child(4){grid-area: fo;}
.cs-info-fourth-one-fif span:nth-child(5), .cs-info-fourth-two-fif span:nth-child(5), .cs-info-fourth-three-fif span:nth-child(5){grid-area: ff;}
.cs-info-fourth-one-fif img, .cs-info-fourth-two-fif img, .cs-info-fourth-three-fif img{grid-area: th;}

/* ===== FOOTER ===== */
.fc-top-case{grid-template-areas: "le le ri ri";}
.fc-top-middle-case{display: none;}
.fc-top-left-case{padding-left: 0;}
.fc-top-left-case img{width: 100%;}
.fc-top-right-case{padding-left: 3vw;}

.fc-bottom-case{display: grid;grid-template-areas:"mi ri""le le";justify-content: center; gap: 3vw;}
.fc-bottom-left-case{grid-area: le;display: flex;justify-content: center;}
.fc-bottom-middle-case{grid-area: mi;}
.fc-bottom-right-case{grid-area: ri;}

}