/**************** BACK OFFICE *******************/

header.bo { width:100%; height:60px; top:0; left:0; position:fixed; z-index: 1000; padding: 0 80px; display: flex; align-items: center; justify-content: space-between; background: #231f20;
color: #fff; transition: background 0.3s, height 0.3s; box-shadow:5px 0px 20px rgba(0,0,0,0.4); }

header.bo  #logo_accueil { background:URL(../img/logo_jaune.png) no-repeat; background-size:30px 30px; background-position:0 15px; padding-left:35px;}
header.bo  #logo_accueil span {color:#f3ca2a; font-size:20px; display:block;}

.hamburger-bo { display: block; cursor: pointer; width: 27px; height: 21px; position: relative;  display: flex; flex-direction: column; justify-content: space-between; pointer-events: auto; }
.hamburger-bo span { background: #fff; height: 2px; width: 100%; display: block; transition: 0.3s; border-radius:10px; }
.hamburger-bo :nth-child(1) { transform-origin: 0% 0%; }
.hamburger-bo :nth-child(3) { transform-origin: 0% 100%;}
.hamburger-bo.active span:nth-child(1) { transform: rotate(45deg); }
.hamburger-bo.active span:nth-child(2) { opacity: 0; }
.hamburger-bo.active span:nth-child(3) { transform: rotate(-45deg); }

.nav-bo-cols {display: grid; grid-template-columns: 1fr;  gap: 20px; padding: 0 20px;} 
/* Responsive : plus de colonnes selon la largeur */
@media (min-width: 480px) {
    .nav-bo-cols {
        grid-template-columns: 1fr 1fr; /* 2 colonnes */
    }
}
@media (min-width: 768px) {
    .nav-bo-cols {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    }
}
@media (min-width: 1024px) {
    .nav-bo-cols {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur grand écran */
    }
}
.nav-bo-col {display: flex; flex-direction: column;} 
.nav-bo-col h4 {    margin: 10px 0;    padding: 0 20px;    font-size: 16px;    color: #231f20;    font-weight: bold;    text-transform: uppercase;    letter-spacing: 0.5px;}
.nav-bo { position: absolute; top: 60px; left: 0; width: 100%; background: #fff; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.nav-bo.open { max-height: 500px; }
.nav-bo a { padding: 5px 20px; color: #231f20; border-bottom: 1px solid rgba(255,255,255,0.1); /*display: block;*/}
.nav-bo a:hover { color:#f3ca2a;}


.account-bo-btn { background: none; border: none; cursor: pointer; padding:0;}
.account-bo-btn span {color:#f3ca2a !important; display:block !important;}
.account-bo-dropdown { position: absolute; top:60px; right: 0; left: auto;}
.account-bo-btn .ico {filter:none !important;}


/*********************** FRONT OFFICE ***************************/
header {width: 100%;height: 120px; top: 0; left: 0; position: fixed;  z-index: 1000; padding: 0 80px; display: flex; align-items: center; justify-content: space-between; background: #231f20;
color: #fff; transition: background 0.3s, height 0.3s; box-shadow:5px 0px 20px rgba(0,0,0,0.4); }

.nav-main { display: flex; gap: 30px;}
/*.nav-main a { color: #fff; text-decoration: none; font-size: 18px;}
.nav-main a:hover { opacity: 0.8;}*/

body.home header { background: #f3ca2a; box-shadow :none;}

body.home #logo_accueil { background:URL(../img/logo_noir.png) no-repeat; background-size:60px 60px; background-position:0 30px; padding-left:65px;}
body.home #logo_accueil span {color:#231f20; }

body.home .account-btn span { font-size: 16px; font-weight:600; color:#231f20; }
body.home .account-btn .ico { filter:grayscale(100%) brightness(0);}

header.scrolled { background: #231f20 !important; box-shadow:5px 0px 20px rgba(0,0,0,0.4) !important;}
header.scrolled .nav-main a { color: #fff !important; &::before { color: #f3ca2a !important;} }
header.scrolled #logo_accueil { background:URL(../img/logo_jaune.png) no-repeat; background-size:60px 60px; background-position:0 30px; padding-left:65px;}
header.scrolled #logo_accueil span {color:#f3ca2a;}
header.scrolled .account-btn span {color:#f3ca2a !important;}
header.scrolled .account-btn .ico {filter:none;}


#logo_accueil { height:100%; display: flex; align-items: center;  background:URL(../img/logo_jaune.png) no-repeat; background-size:60px 60px; background-position:0 30px; padding-left:65px;}
#logo_accueil span {font-family:"Inter", sans-serif; font-weight:600; font-size:50px; color:#f3ca2a; margin:0;}


/* Wrapper pour le bloc compte (bouton + dropdown) */
.account-wrapper { position: relative;  }
.account-btn { background: none; border: none; cursor: pointer; padding:0;}
.account-btn span { font-size: 16px; font-weight:600; color:#f3ca2a; }
.account-btn .ico { filter:none;}


/* Dropdown générique */
.dropdown { position: absolute; top: 100%; background: #fff; min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;}
.dropdown a { display: block; padding: 12px 20px; color: #231f20; text-decoration: none; font-size:20px;}
.dropdown a:hover { /*background: #f1f1f1;*/ color:#f3ca2a;}

/* Menu Mon compte aligné à droite sur desktop */
.account-dropdown { right: 0; left: auto;}

/* Hover desktop pour tous les dropdowns */
.has-dropdown:hover .dropdown, .account-wrapper:hover .dropdown { opacity: 1; visibility: visible;}

/* Tablette*/
@media 	(max-width: 1200px) {
	header #logo_accueil span {display:none;}
}

/* Mobile */
@media (max-width: 1000px) { 
	header { height: 60px; padding: 0 10px !important; background: #231f20 !important;  }
	header #logo_accueil { background:URL(../img/logo_jaune.png) no-repeat; background-size:30px 30px; background-position:0 15px; padding-left:35px;}
	header #logo_accueil span {color:#f3ca2a; font-size:20px; display:block}
	
	header.bo {padding: 0 10px !important;}

	.nav-main { position: absolute; top: 60px; left: 0; width: 100%; background: #fff; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
	.nav-main.open { max-height: 500px; }
	.nav-main a { padding: 15px 20px; color: #231f20; border-bottom: 1px solid rgba(255,255,255,0.1); display: block; font-size:20px;}
	.nav-main a:hover { color:#f3ca2a;}
	
	.hamburger { display: block; cursor: pointer; width: 27px; height: 21px; position: relative;  display: flex; flex-direction: column; justify-content: space-between; }
	.hamburger span { background: #fff; height: 2px; width: 100%; display: block; transition: 0.3s; border-radius:10px; }
	.hamburger :nth-child(1) { transform-origin: 0% 0%; }
	.hamburger :nth-child(3) { transform-origin: 0% 100%;}
	.hamburger.active span:nth-child(1) { transform: rotate(45deg); }
	.hamburger.active span:nth-child(2) { opacity: 0; }
	.hamburger.active span:nth-child(3) { transform: rotate(-45deg); }
	
	.account-btn span {display:none;}
	.account-dropdown { position: absolute; top:60px; }
	.account-btn .ico, body.home .account-btn .ico {filter:none;}
}

@media (min-width: 1001px) { 
	.hamburger { display: none; }
	
	
	
	.nav-main a { 
		text-decoration: none; color: #fff; font-size: 20px; transition: all 0.5s ease-in-out; position: relative; white-space:nowrap;
		&::before { content: attr(data-text); transition: 0.5s; color: #f3ca2a; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 0; overflow: hidden; }
		&:hover {
			&::before { width: 100%; transition: all 0.5s ease-in-out;}
		}
	}
	
	body.home .nav-main a { 
		text-decoration: none; color: #231f20; font-size: 20px; transition: all 0.5s ease-in-out; position: relative; white-space:nowrap;
		&::before { content: attr(data-text); transition: 0.5s; color: #fff; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 0; overflow: hidden; }
		&:hover {
			&::before { width: 100%; transition: all 0.5s ease-in-out;}
		}
	}
}

/* Classe JS pour ouverture forcée sur mobile */
.open-dropdown { opacity: 1 !important; visibility: visible !important;}