.header-section{position:relative;width:100%;height:auto;min-height:100vh;overflow:visible;display:flex;justify-content:center;align-items:center;padding:100px 0 0;box-sizing:border-box;max-width:100%;will-change:transform}
.header-background{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('/images/index/Coquelicot.webp');background-size:cover;background-position:center;z-index:0;transition:background-image .5s ease-in-out;overflow:visible;margin-top:-20px;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.header-background::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.3) 100%);z-index:1;will-change:opacity}
.header-content{position:relative;z-index:2;text-align:center;color:var(--base-white-color);padding:1rem;max-width:var(--max-width-lg);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;width:100%;box-sizing:border-box;overflow:visible;will-change:transform}
.header-logo{max-width:120px;width:60%;height:auto;margin:0 auto .5rem;display:block;animation:1s ease-out fadeInUp;will-change:transform,opacity}
.header-title{font-size:2.2rem;font-weight:700;margin-bottom:.5rem;line-height:1.1;width:100%;text-align:center;animation:1s ease-out .3s both fadeInUp;color:var(--base-beige-color);text-shadow:2px 2px 4px rgba(0,0,0,.5);font-family:var(--global-font-family-titre)}
.header-subtitle{font-size:1.1rem;max-width:90%;margin:0 auto .8rem;padding:0 .5rem;line-height:1.3;width:100%;text-align:center;animation:1s ease-out .6s both fadeInUp;font-family:var(--global-font-family)}
.header-cta{display:inline-block;padding:.8rem 1.5rem;font-size:var(--font-size-button-mobile);font-family:var(--global-font-family);background-color:var(--base-beige-color);color:var(--base-noir-color);text-decoration:none;border-radius:var(--border-radius-full);font-weight:600;transition:var(--transition-base);min-width:200px;max-width:280px;margin:.5rem auto;animation:1s ease-out .9s both fadeInUp}
.header-cta:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.scroll-indicator{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:var(--base-beige-color);text-decoration:none;animation:2s infinite bounce;z-index:2}
.scroll-indicator svg{width:25px;height:25px;fill:currentColor}
.scroll-indicator span{margin-top:.5rem;font-size:var(--font-size-normal);text-shadow:1px 1px 2px rgba(0,0,0,.5)}
@media (max-width:320px){
.header-section{padding:90px 0 50px}
.header-logo{max-width:180px}
.header-title{font-size:calc(var(--font-size-h1-mobile) * .8);margin-bottom:.3rem}
.header-subtitle{font-size:calc(var(--font-size-h3-mobile) * .9);margin-bottom:.5rem}
.header-cta{padding:.7rem 1.2rem;font-size:calc(var(--font-size-button-mobile) * .9);min-width:180px}
}
@media (min-width:576px) and (max-width:767px){
.header-section{height:80vh;min-height:500px}
.header-content{padding:1.5rem}
.header-logo{max-width:300px;width:70%}
.header-title{font-size:var(--font-size-h1-mobile);margin-bottom:1rem}
.header-subtitle{font-size:var(--font-size-h3-mobile);max-width:450px;margin:0 auto 1.5rem}
.header-cta{padding:.8rem 1.8rem}
}
@media (min-width:768px) and (max-width:1023px){
.header-section{height:85vh;min-height:600px}
.header-content{padding:2rem 3rem}
.header-logo{max-width:350px;width:65%}
.header-title{font-size:var(--font-size-h1)}
.header-subtitle{font-size:var(--font-size-h3);max-width:600px;margin:0 auto 2rem}
.header-cta{padding:.9rem 2rem}
}
@media (min-width:1024px) and (max-width:1399px){
.header-section{height:90vh;min-height:700px}
.header-content{max-width:var(--max-width-lg);padding:2rem 4rem}
.header-logo{max-width:400px;width:55%}
}
@media (min-width:1400px){
.header-section{height:100vh;min-height:800px}
.header-content{max-width:var(--max-width-xl)}
.header-logo{max-width:500px;width:50%}
.header-title{font-size:calc(var(--font-size-h1) * 1.2);margin-bottom:1.5rem}
.header-subtitle{font-size:calc(var(--font-size-h3) * 1.2);max-width:800px;margin:0 auto 2.5rem}
.header-cta{padding:1.2rem 2.5rem;font-size:calc(var(--font-size-button) * 1.1)}
}
@media (max-height:600px) and (orientation:landscape){
.header-section{height:auto;min-height:100vh;padding:90px 0 40px}
.header-content{gap:1rem}
.header-logo{max-width:160px;margin-bottom:.5rem}
.header-title{font-size:var(--font-size-h1-mobile);margin-bottom:.3rem}
.header-subtitle{font-size:var(--font-size-h3-mobile);margin-bottom:.5rem;max-width:500px}
.header-cta{padding:.6rem 1.2rem}
.scroll-indicator{display:none}
}
@keyframes bounce{
0%,100%,20%,50%,80%{transform:translateY(0) translateX(-50%)}
40%{transform:translateY(-10px) translateX(-50%)}
60%{transform:translateY(-5px) translateX(-50%)}
}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.image-toggle{position:absolute;bottom:20px;right:20px;background-color:rgba(255,255,255,.2);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;z-index:10}
.image-toggle i{color:var(--base-rouge-color);font-size:1.2rem;transition:var(--transition-base)}
.image-toggle:hover{transform:scale(1.1);background-color:var(--base-rouge-color)}
.image-toggle:hover i{color:var(--base-beige-color)}
.image-toggle.active{background-color:var(--base-rouge-color)}
.image-toggle.active i{color:var(--base-beige-color)}
@media (max-width:768px){
.image-toggle{bottom:15px;right:15px;width:35px;height:35px}
}
.header-inner{position:relative;width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}
@media (max-width:768px){
.header-inner{max-width:95vw;min-height:40vh}
}
@media (max-width:480px){
.header-section{padding:60px 0 30px}
.header-inner{max-width:98vw;min-height:30vh}
.header-logo{max-width:80px}
.header-title{font-size:1.3rem}
.header-subtitle{font-size:.95rem;max-width:98%}
.image-toggle{bottom:10px;right:10px;width:30px;height:30px}
}
@media (min-width:481px) and (max-width:767px){
.header-section{padding:70px 0 40px}
.header-inner{max-width:95vw;min-height:35vh}
.header-logo{max-width:100px}
.header-title{font-size:1.7rem}
.header-subtitle{font-size:1.05rem;max-width:96%}
.image-toggle{bottom:15px;right:15px;width:32px;height:32px}
}
@media (min-width:768px) and (max-width:991px){
.header-section{padding:80px 0 50px}
.header-inner{max-width:90vw;min-height:40vh}
.header-logo{max-width:130px}
.header-title{font-size:2rem}
.header-subtitle{font-size:1.15rem;max-width:94%}
.image-toggle{bottom:20px;right:20px;width:35px;height:35px}
}
@media (min-width:992px) and (max-width:1199px){
.header-section{padding:90px 0 60px}
.header-inner{max-width:800px;min-height:50vh}
.header-logo{max-width:150px}
.header-title{font-size:2.3rem}
.header-subtitle{font-size:1.2rem;max-width:90%}
.image-toggle{bottom:25px;right:25px;width:38px;height:38px}
}
@media (min-width:1200px) and (max-width:1599px){
.header-section{padding:100px 0 70px}
.header-inner{max-width:900px;min-height:60vh}
.header-logo{max-width:180px}
.header-title{font-size:2.7rem}
.header-subtitle{font-size:1.3rem;max-width:85%}
.image-toggle{bottom:30px;right:30px;width:40px;height:40px}
}
@media (min-width:1600px){
.header-section{padding:120px 0 90px}
.header-inner{max-width:1100px;min-height:70vh}
.header-logo{max-width:220px}
.header-title{font-size:3.2rem}
.header-subtitle{font-size:1.5rem;max-width:80%}
.image-toggle{bottom:35px;right:35px;width:45px;height:45px}
}