/* ===================================
   VARIABLES
=================================== */
:root{
--bg:#ffffff;
--bg-light:#f8f8f8;
--bg-soft:#f5f5f5;
--text:#0A0F2B;
--text-dark:#333333;
--muted:#666666;
--muted-light:#777777;
--accent:#75021A;
--accent-hover:#800000;
--accent-dark:#5c0014;
--yellow:#ffc400;
--yellow-hover:#ffd166;
--blue:#0277BD;
--blue-hover:#0288D1;
--success:#166534;
--success-bg:#e7f5e7;
--danger:#D62828;
--btn-border:6px;
--btn-radius:30px;
--radius-lg:18px;
--radius-md:12px;
--radius-card:15px;
--card-shadow:0 18px 35px rgba(0,0,0,.12);
--card-shadow-soft:0 5px 20px rgba(0,0,0,.08);
--container-max:1200px;
--content-max:1200px;
--text-max:900px;
--section-padding:80px 20px;
--section-padding-mobile:50px 20px;
--transition-fast:.25s ease;
--transition-medium:.35s cubic-bezier(.25,.46,.45,.94);
--focus:rgba(153,0,136,.18);
--glass:rgba(255,255,255,.92);
--border-light:rgba(10,15,43,.08);
--overlay-dark:rgba(10,15,43,.65);
--overlay-soft:rgba(10,15,43,.35);
--white-soft:rgba(255,255,255,.85);
--shadow-hover:0 25px 45px rgba(0,0,0,.15);
}

/* ===================================
   BASE
=================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;padding:0;font-family:var(--font-main,Arial,Helvetica,sans-serif);background:var(--bg);color:var(--text);line-height:1.6;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
button,input,textarea,select{font-family:inherit;}
.container{max-width:var(--container-max);width:100%;margin:0 auto;padding-left:20px;padding-right:20px;}
.section-title{text-align:center;font-size:42px;line-height:1.2;font-weight:800;color:var(--accent);margin:0 0 25px;}
.section-intro{max-width:var(--text-max);margin:0 auto 50px;text-align:center;font-size:16px;line-height:1.7;color:var(--muted);}
.card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--card-shadow-soft);}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:var(--btn-radius);font-weight:700;cursor:pointer;border:none;transition:var(--transition-fast);text-align:center;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-yellow{background:var(--yellow);color:#111;}
.btn-yellow:hover{background:var(--yellow-hover);}
input,select,textarea{border:1px solid #ddd;border-radius:8px;background:#fff;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus);}
.text-center{text-align:center;}
.hidden{display:none!important;}
@media(max-width:767px){
.container{padding-left:15px;padding-right:15px;}
.section-title{font-size:28px;}
.section-intro{font-size:14px;margin-bottom:35px;}
}

/* ===================================
   HEADER
=================================== */
.header{width:100%;background:var(--bg);position:relative;z-index:1000;transition:var(--transition-fast);}
.header-inner{max-width:var(--container-max);margin:0 auto;padding:15px 30px;display:flex;align-items:center;gap:30px;}
.header-left{display:flex;align-items:center;gap:25px;flex-shrink:0;}
.burger{display:flex;flex-direction:column;justify-content:center;align-items:center;background:none;border:0;padding:5px;cursor:pointer;}
.burger span{width:28px;height:3px;background:var(--text);margin:5px 0;border-radius:3px;}
.logo img{max-height:74px;width:auto;display:block;}
.recherche{flex:1;max-width:450px; margin-left:20px;}
.recherche input{width:100%;padding:13px 22px;border-radius:30px;border:1px solid #ddd;font-size:15px;}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:25px;}
.compte,
.panier{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap;}
.compte:hover,
.panier:hover{color:var(--accent);}
.language-switcher{position:relative;}
.language-button{width:44px;height:44px;border:0;background:none;font-size:26px;cursor:pointer;}
.language-dropdown{display:none;position:absolute;right:0;top:50px;width:300px;background:#fff;padding:10px;border-radius:12px;box-shadow:0 15px 40px rgba(0,0,0,.15);}
.language-dropdown.active{display:block;}
.language-dropdown a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;}
.language-dropdown a:hover{background:var(--bg-soft);}
.language-dropdown img{width:24px;height:16px;}

@media (min-width:768px) and (max-width:992px){
.header-inner{padding:12px 20px;gap:20px;}
.header-left{gap:15px;}
.logo img{max-height:55px;}
.recherche{max-width:220px;}
.header-actions{gap:12px;}
.compte,
.panier{font-size:14px;}
.language-button{width:38px;height:38px;font-size:22px;}
}

@media(max-width:767px){
.header-inner{padding:12px 15px;display:flex;flex-wrap:wrap;gap:15px;}
.header-left{order:1;width:auto;flex:1;}
.burger{flex-shrink:0;}
.logo img{max-height:55px;}
.language-switcher{order:2;}
.header-actions{order:3;width:100%;margin:0;justify-content:center;gap:25px;}
.compte,
.panier{font-size:14px;}
.recherche{order:4;flex-basis:100%;max-width:none;}
.recherche input{width:100%;padding:12px 18px;font-size:14px;}
}

/* ===================================
   MENU LATERAL
=================================== */


.overlay{

    position:fixed;

    inset:0;

    background:rgba(10,15,43,.55);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:1100;

}


.overlay.active{

    opacity:1;

    visibility:visible;

}





.side-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:85%;

    max-width:420px;

    height:100vh;

    background:#fff;

    padding:45px 40px;

    transition:.35s ease;

    z-index:1200;

    overflow-y:auto;

    box-shadow:-20px 0 50px rgba(0,0,0,.12);

}



.side-menu.active{

    right:0;

}





/* ===================================
   HEADER DU MENU
   LOGO + FERMETURE
=================================== */


.menu-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:40px;

}





.menu-logo{

    display:block;

}





.side-menu .menu-logo img{

    max-width:220px;

    height:auto;

    margin:0;

}





.side-menu .close{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #ddd;

    border-radius:50%;

    background:#fff;

    color:var(--accent);

    font-size:26px;

    cursor:pointer;

    margin:0;

    transition:.25s ease;

}



.side-menu .close:hover{

    background:var(--accent);

    color:#fff;

    border-color:var(--accent);

}





/* ===================================
   ITEMS MENU
=================================== */


.menu-item{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px 0;

    background:none;

    border:none;

    border-bottom:1px solid #eeeeee;

    font-size:16px;

    font-weight:700;

    color:var(--text);

    cursor:pointer;

    transition:.25s ease;

    text-align:left;

}



.menu-item:hover,
.menu-item.active{

    color:var(--accent);

}





.menu-item-left{

    display:flex;

    align-items:center;

    gap:15px;

}





.menu-icon{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

}





.menu-icon img{

    width:22px;

    height:22px;

    object-fit:contain;

}





.menu-label{

    line-height:1.3;

}





.arrow{

    font-size:30px;

    font-weight:300;

    color:var(--accent);

    transition:.25s ease;

}





.menu-item:hover .arrow{

    transform:translateX(5px);

}





/* ===================================
   SOUS MENUS
=================================== */


.submenu{

    display:none;

    padding:10px 0 20px 45px;

    overflow:hidden;

}



.submenu.active{

    display:block;

}



.submenu a{

    display:block;

    padding:10px 0;

    font-size:15px;

    color:#666;

    transition:.25s ease;

}



.submenu a:hover{

    color:var(--accent);

    padding-left:5px;

}





/* ===================================
   LANGUES MOBILE
=================================== */


.lang-mobile-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-top:40px;

}



.lang-mobile-grid .lang-mobile-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px;

    background:#f8f8f8;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    transition:.25s ease;

}



.lang-mobile-grid .lang-mobile-item:hover,
.lang-mobile-grid .lang-mobile-item.active-lang{

    background:#eee;

    color:var(--accent);

}





/* ===================================
   MOBILE PORTRAIT
   375px - 767px
=================================== */


@media(max-width:767px){


    .side-menu{

        width:85%;

        max-width:360px;

        padding:35px 25px;

    }


}





/* ===================================
   MOBILE PAYSAGE
=================================== */


@media(max-width:767px) and (orientation:landscape){


    .side-menu{

        width:60%;

        max-width:350px;

        padding:30px 25px;

    }


}

/* ===================================
   HERO
=================================== */
.hero {position:relative;height:600px;overflow:hidden;display:flex;align-items:center;}
.hero-picture {position:absolute;inset:0;z-index:1;}
.hero-img {width:100%;height:100%;object-fit:cover;object-position:center;}
.hero-overlay {position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.50),rgba(0,0,0,.10));}
.hero-content{position:relative;z-index:3;width:100%;max-width:800px;margin:0 auto;text-align:center;color:white;}
.hero-content h1{font-size:clamp(25px,2.5vw,40px);line-height:1.08;font-weight:800;margin:0 0 20px;letter-spacing:-1px;}
.hero-content .lead{max-width:650px;margin:0 auto;font-size:clamp(16px,1.8vw,21px);line-height:1.6;}

@media (min-width:768px) and (max-width:1024px){
.hero {height:520px;}
.hero-content {max-width:620px;margin-left:50px;}
.hero-content h1 {font-size:36px;}
.hero-content .lead {font-size:18px;}
}

@media(max-width:767px){
.hero {height:420px;}
.hero-img {object-position:center;}
.hero-overlay {background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65));}
.hero-content {margin:0 25px;text-align:center;max-width:100%;}
.hero-content h1 {font-size:clamp(20px,5.2vw,23px);line-height:1.1;margin-bottom:15px;}
.hero-content .lead {font-size:12px;line-height:1.45;max-width:320px;margin:auto;}
}

/* ===================================
   FOOTER
=================================== */
.site-footer{background:var(--accent);color:white;padding:45px 20px 20px;}
.footer-container{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.footer-column h3{font-size:20px;font-weight:800;margin:0 0 20px;color:white;}
.footer-column p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.85);margin:0;}
.footer-column ul{list-style:none;padding:0;margin:0;}
.footer-column li{margin-bottom:12px;}
.footer-column a{color:rgba(255,255,255,.9);text-decoration:none;}
.footer-column a:hover{color:var(--yellow);}
.footer-toggle{display:none;}
.footer-contact{width:max-content;}
.contact-line{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px!important;text-align:left;}
.footer-icon{width:18px;flex-shrink:0;}
.footer-bottom{max-width:var(--container-max);margin:50px auto 0;padding-top:25px;border-top:1px solid rgba(255,255,255,.2);text-align:center;}
.footer-bottom p{font-size:14px;color:rgba(255,255,255,.7);}

@media (min-width:768px) and (max-width:992px){
.footer-container{grid-template-columns:repeat(2,1fr);gap:35px;}
.footer-brand p{max-width:320px;}}

@media(max-width:767px){
.footer-container{display:block;}
.footer-brand{text-align:center;margin-bottom:30px;}
.desktop-title{display:none;}
.footer-accordion{border-bottom:1px solid rgba(255,255,255,.2);}
.footer-toggle{display:flex;width:100%;background:none;border:0;color:white;font-size:20px;font-weight:800;padding:20px 0;justify-content:space-between;align-items:center;cursor:pointer;}
.footer-toggle span{font-size:26px;}
.footer-content{display:none;padding-bottom:20px;}
.footer-accordion.active .footer-content{display:block;}
.footer-content ul{text-align:center;}
.footer-content li{margin-bottom:15px;}
.footer-contact{margin:0 auto;}
.footer-bottom{margin-top:35px;}
}