/**
 * BIP — Menu off-canvas mobile (design dedie) + menu du panneau lateral.
 * Selecteurs prefixes `html` pour passer devant les regles !important de header.php.
 */

/* ===== Menu de navigation dans le panneau lateral (#spnc_panelSidebar) ===== */
.spnc_sidebar_panel .bip-panel-nav,
.spnc_sidebar_panel .bip-panel-nav .sub-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.spnc_sidebar_panel .bip-panel-nav li { width: 100% !important; float: none !important; }
.spnc_sidebar_panel .bip-panel-nav > li > a {
	display: block !important;
	padding: 14px 6px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #1a1a1a !important;
	text-decoration: none !important;
	border-bottom: 1px solid #f1f1f1 !important;
	transition: background .15s, color .15s, padding-left .15s;
}
.spnc_sidebar_panel .bip-panel-nav > li > a:hover,
.spnc_sidebar_panel .bip-panel-nav > li > a:focus {
	background: #fff0f1 !important;
	color: #E3001B !important;
	padding-left: 14px !important;
}
.spnc_sidebar_panel .bip-panel-nav .current-menu-item > a { color: #E3001B !important; box-shadow: inset 4px 0 0 #E3001B; }
.spnc_sidebar_panel .bip-panel-nav .sub-menu { background: #fafafa !important; }
.spnc_sidebar_panel .bip-panel-nav .sub-menu > li > a {
	display: block !important;
	padding: 11px 6px 11px 22px !important;
	font-size: 14px !important;
	color: #555 !important;
	text-decoration: none !important;
	border-bottom: 1px solid #f1f1f1 !important;
}
.spnc_sidebar_panel .bip-panel-nav .sub-menu > li > a:hover { color: #E3001B !important; background: #fff0f1 !important; }


@media (max-width: 1100px) {

	/* ===== Hamburger : 3 barres animees -> X (sans Font Awesome) ===== */
	html .custom-radio-header .bip-burger .bip-burger-box { display: block; position: relative; width: 18px; height: 12px; }
	html .custom-radio-header .bip-burger .bip-burger-inner,
	html .custom-radio-header .bip-burger .bip-burger-inner::before,
	html .custom-radio-header .bip-burger .bip-burger-inner::after {
		content: ""; position: absolute; left: 0; width: 18px; height: 2px;
		background: #fff; border-radius: 2px;
		transition: transform .3s ease, top .3s ease, background .15s ease;
	}
	/* barres espacees de +/- 5px autour de la barre centrale (top relatif a .bip-burger-inner) */
	html .custom-radio-header .bip-burger .bip-burger-inner { top: 5px; }
	html .custom-radio-header .bip-burger .bip-burger-inner::before { top: -5px; }
	html .custom-radio-header .bip-burger .bip-burger-inner::after { top: 5px; }
	html.bip-menu-open .custom-radio-header .bip-burger .bip-burger-inner { background: transparent; }
	html.bip-menu-open .custom-radio-header .bip-burger .bip-burger-inner::before { top: 0; transform: rotate(45deg); }
	html.bip-menu-open .custom-radio-header .bip-burger .bip-burger-inner::after  { top: 0; transform: rotate(-45deg); }

	/* ===== Panneau off-canvas (positionnement) ===== */
	html .custom-radio-header .collapse.spnc-collapse { display: block !important; }
	html .custom-radio-header .collapse.spnc-collapse.bip-offcanvas {
		width: 80vw !important;
		max-width: 80vw !important;
		left: -80vw !important; /* hors ecran (80% de largeur) ; .spnc-container ayant un transform, on force en vw */
		background: #f7f8fa !important;
		padding: 0 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		box-shadow: none !important;
		transition: left .38s cubic-bezier(.22, 1, .36, 1) !important; /* glissement fluide */
	}
	/* Le parent (.header-sidebar) masque le panneau via opacity:0 + transform ;
	   on force donc l'affichage complet a l'ouverture. */
	html.bip-menu-open .custom-radio-header .collapse.spnc-collapse {
		left: 0 !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* .spnc-container a un transform => contexte d'empilement qui PIEGE le
	   z-index:9999 du panneau ; sans ca l'overlay (frere, z-index:9998) peint
	   au-dessus et intercepte tous les clics. On eleve le conteneur (et donc le
	   panneau qu'il contient) au-dessus de l'overlay quand le menu est ouvert. */
	html.bip-menu-open .custom-radio-header .spnc-container { position: relative !important; z-index: 10000 !important; }

	/* Overlay + verrou de defilement */
	html.bip-menu-open .spnc-nav-menu-overlay { opacity: 1 !important; visibility: visible !important; }
	html.bip-menu-open, html.bip-menu-open body { overflow: hidden !important; }

	/* ===== En-tete rouge : logo a GAUCHE, seuls titre + slogan centres ===== */
	.bip-oc-head {
		position: relative;
		background: #E3001B; color: #fff;
		display: block;
		padding: 18px 56px; border-radius: 0 !important; /* pas de coins arrondis */
		text-align: center;
		min-height: 48px;
	}
	.bip-oc-brand { display: block; }
	.bip-oc-logo {
		position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
		width: 48px; height: 48px; border-radius: 12px; background: #fff;
		display: flex; align-items: center; justify-content: center; overflow: hidden;
	}
	.bip-oc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
	.bip-oc-titles { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
	.bip-oc-titles strong { font-size: 20px; font-weight: 800; letter-spacing: .3px; }
	.bip-oc-titles small { font-size: 12.5px; opacity: .92; margin-top: 2px; }
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-close {
		position: absolute !important; top: 14px !important; right: 14px !important;
		width: 34px !important; height: 34px !important;
		flex-shrink: 0; background: transparent !important; border: 0 !important; color: #fff !important;
		display: flex !important; align-items: center !important; justify-content: center !important;
		cursor: pointer; border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
	}
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-close:hover { background: rgba(255, 255, 255, .16) !important; }
	.bip-oc-close svg { width: 22px; height: 22px; display: block; }

	/* ===== Corps ===== */
	.bip-oc-body { padding: 6px 14px 16px; }
	.bip-oc-section { margin-top: 16px; }
	.bip-oc-label {
		font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
		color: #9a9a9a; padding: 4px 6px 8px;
	}
	.bip-oc-card {
		background: #fff; border: 1px solid #fbe0e3; border-radius: 16px; overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	}
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-item {
		display: flex !important; align-items: center; gap: 14px;
		padding: 13px 14px !important; text-decoration: none !important;
		color: #1f2430 !important; border-bottom: 1px solid #fdecee !important;
		transition: background .15s;
	}
	.bip-oc-card .bip-oc-item:last-child { border-bottom: 0 !important; }
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-item:hover,
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-item:focus { background: #fff6f7 !important; }

	/* ===== Accordeon : lien parent cliquable, fleche devant le texte ===== */
	/* La fleche est DANS le lien parent, entre la pastille et le texte (devant le
	   texte, collee a lui). Elle deroule le sous-menu ; le reste du lien navigue. */
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-acc-link { gap: 0 !important; }
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-acc-link .bip-oc-ico { margin-right: 12px; }
	/* le texte ne s'etire pas => la fleche se colle juste apres lui */
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-acc-link .bip-oc-text { flex: 0 1 auto !important; }
	.bip-oc-acc-chev {
		display: flex; align-items: center; flex: 0 0 auto;
		color: #b0b4bc; cursor: pointer;
		padding: 6px 2px; margin-left: 7px;
	}
	.bip-oc-acc-chev svg { width: 15px; height: 15px; transition: transform .28s ease; }
	.bip-oc-acc-chev:hover { color: #E3001B; }
	.bip-oc-acc.open .bip-oc-acc-chev { color: #E3001B; }
	.bip-oc-acc.open .bip-oc-acc-chev svg { transform: rotate(90deg); }
	.bip-oc-acc-body {
		max-height: 0;
		overflow: hidden;
		background: #faf7f7;
		transition: max-height .3s ease;
	}
	.bip-oc-acc.open .bip-oc-acc-body { max-height: 1500px; }
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-acc-body .bip-oc-item {
		padding-left: 30px !important;
		font-size: 15px !important;
		font-weight: 500 !important;
	}
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-acc-body .bip-oc-item .bip-oc-ico {
		width: 32px; height: 32px;
	}
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-acc-body .bip-oc-item .bip-oc-ico svg { width: 17px; height: 17px; }
	.bip-oc-ico {
		width: 42px; height: 42px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	}
	.bip-oc-ico svg { width: 22px; height: 22px; display: block; }
	.bip-oc-text { flex: 1; font-size: 16px; font-weight: 600; min-width: 0; }
	.bip-oc-chev { color: #cdced3; display: flex; align-items: center; flex-shrink: 0; }
	.bip-oc-chev svg { width: 18px; height: 18px; }
	.bip-oc-footer { text-align: center; color: #9a9a9a; font-size: 12.5px; padding: 16px 10px 8px; }

	/* ===== Reseaux sociaux (rangee horizontale) ===== */
	.bip-oc-social {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		padding: 22px 14px 6px;
		margin-top: 6px;
	}
	html .custom-radio-header .collapse.spnc-collapse .bip-oc-social .bip-social-link {
		width: 44px; height: 44px;
		border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		color: #fff !important;
		text-decoration: none !important;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
		transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
	}
	.bip-oc-social .bip-social-link svg { width: 20px; height: 20px; fill: currentColor; display: block; }
	.bip-oc-social .bip-social-link:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); opacity: .95; }
	.bip-oc-social .bip-social-link:active { transform: translateY(-1px) scale(.96); }
	.bip-oc-social .facebook  { background: #1877F2; }
	.bip-oc-social .x         { background: #000; }
	.bip-oc-social .instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
	.bip-oc-social .youtube   { background: #FF0000; }
	.bip-oc-social .tiktok    { background: #010101; }
	.bip-oc-social .linkedin  { background: #0A66C2; }
	.bip-oc-social .whatsapp  { background: #25D366; }
	.bip-oc-social .telegram  { background: #229ED9; }

	/* Couleurs des pastilles d'icones */
	.bip-oc-ico.red    { background: #ffe5e7; color: #E3001B; }
	.bip-oc-ico.green  { background: #e3f7ec; color: #16a34a; }
	.bip-oc-ico.blue   { background: #e6f0fd; color: #2563eb; }
	.bip-oc-ico.purple { background: #f1e9fc; color: #8b5cf6; }
	.bip-oc-ico.orange { background: #fff0e0; color: #f59e0b; }
	.bip-oc-ico.pink   { background: #ffe6f0; color: #ec4899; }
	.bip-oc-ico.indigo { background: #ebe9fe; color: #6d28d9; }
	.bip-oc-ico.teal   { background: #e0f5f1; color: #14b8a6; }
	.bip-oc-ico.amber  { background: #fff4e0; color: #f59e0b; }
}