/**
 * Responsive JobBénin – PC, tablette, téléphone
 * Menus, pages, footer, tailles de texte
 *
 * Découpage :
 * - Petits écrans (mobile + tablette) = max-width 1199px → menu tiroir jb-mobile, logo/toggle alignés
 * - Ordinateur = min-width 1200px → menu horizontal
 */

/* ========== NAVBAR ORDINATEUR (écrans ≥ 1200px) ========== */
@media (min-width: 1200px) {
	.header-nav .jb-mobile { display: none !important; }
	/* Boutons Connexion / Déconnecter plus étroits */
	.site-header .extra-nav .extra-cell .btn {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

/* ========== TOUS LES PETITS ÉCRANS (mobile + tablette, < 1200px) ========== */
/* Extension du tiroir du thème (991px) jusqu'à 1199px pour inclure la tablette */
@media (min-width: 992px) and (max-width: 1199px) {
	.header-nav {
		overflow-y: auto;
		position: fixed !important;
		left: -235px;
		width: 60px;
		height: 100vh !important;
		top: 0;
		background-color: #fff;
		margin: 0;
		z-index: 99;
		transition: left 0.4s ease, width 0.4s ease;
	}
	.header-nav.show,
	.mo-left .header-nav.show {
		left: -1px;
		width: 235px !important;
		box-shadow: 4px 0 24px rgba(0,0,0,0.12);
	}
}
@media (max-width: 1199px) {
	.site-header .main-bar { padding: 8px 0 !important; }
	/* Logo et bouton menu sur la même ligne, alignés au centre */
	.site-header .main-bar .container {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
	}
	.site-header .main-bar .logo-header {
		float: none !important;
		display: flex !important;
		align-items: center !important;
		height: auto !important;
		min-height: 54px;
		width: auto;
		flex-shrink: 0;
	}
	.site-header .main-bar .logo-header a {
		display: flex !important;
		align-items: center !important;
	}
	.site-header .main-bar .extra-nav { order: 5; }
	.site-header .main-bar .navbar-toggler.navicon {
		float: none !important;
		order: 10;
		margin: 0 0 0 auto !important;
		flex-shrink: 0;
		width: 40px;
		height: 40px;
	}
	.site-header .logo-header .logo-dark img { max-height: 54px; width: auto; }
	/* Quand on défile et que la bande devient blanche (.sticky-header.is-fixed) : logo inchangé */
	.sticky-header.is-fixed .main-bar { padding: 8px 0 !important; }
	.sticky-header.is-fixed .main-bar .logo-header { min-height: 54px !important; }
	.sticky-header.is-fixed .logo-header img,
	.sticky-header.is-fixed .main-bar .logo-header .logo-dark img {
		max-height: 54px !important;
		height: auto !important;
		padding: 0 !important;
		width: auto;
		object-fit: contain;
	}
	/* Largeur réduite : override le thème (.mo-left .header-nav.show = 280px) */
	.header-nav.show,
	.mo-left .header-nav.show {
		width: 235px !important;
		max-width: 78vw !important;
		box-shadow: 4px 0 24px rgba(0,0,0,0.08);
		z-index: 99999 !important;
		filter: none !important;
		backdrop-filter: none !important;
		isolation: isolate;
	}
	/* Pas de flou sur le menu : seul le fond (page) doit être flouté/assombri, pas le tiroir */
	.header-nav.show .jb-mobile,
	.jb-mobile {
		filter: none !important;
		backdrop-filter: none !important;
	}

	/* Conteneur plein écran du menu mobile */
	.jb-mobile {
		display: flex !important;
		flex-direction: column !important;
		min-height: 100vh;
		height: 100%;
		background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
	}
	.jb-mobile__inner {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		padding: 0;
	}

	/* Logo en haut du menu */
	.jb-mobile__logo {
		flex-shrink: 0;
		padding: 20px 20px 16px;
		text-align: center;
		border-bottom: 1px solid rgba(0,0,0,0.06);
		background: rgba(255,255,255,0.5);
	}
	.jb-mobile__logo a {
		display: inline-block;
		text-decoration: none;
	}
	.jb-mobile__logo img {
		display: block;
		height: auto;
		max-height: 48px;
		width: auto;
		max-width: 160px;
		object-fit: contain;
	}

	/* Bloc utilisateur (si connecté) */
	.jb-mobile__user {
		flex-shrink: 0;
		padding: 20px 20px 16px;
	}
	.jb-mobile__user-link {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 18px;
		background: #fff;
		border-radius: 14px;
		text-decoration: none;
		color: #0f172a;
		font-weight: 600;
		font-size: 0.95rem;
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
		transition: box-shadow 0.2s, transform 0.2s;
		border: 1px solid rgba(0,0,0,0.06);
	}
	.jb-mobile__user-link:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		color: #0f172a;
	}
	.jb-mobile__user-link:active { transform: scale(0.99); }
	.jb-mobile__user-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
		color: #fff;
		border-radius: 12px;
		font-size: 1.1rem;
		flex-shrink: 0;
	}
	.jb-mobile__user-name {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.jb-mobile__user-arrow {
		color: #94a3b8;
		font-size: 0.75rem;
		transition: transform 0.2s;
	}
	.jb-mobile__user-link:hover .jb-mobile__user-arrow { transform: translateX(4px); }

	/* Navigation — liens tous identiques en taille (pas de décalage actif) */
	.jb-mobile__nav {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 12px 16px;
		gap: 4px;
		overflow-y: auto;
		min-height: 0;
	}
	.jb-mobile__link {
		display: block;
		padding: 14px 18px;
		border-radius: 12px;
		text-decoration: none;
		color: #334155;
		font-size: 0.9375rem;
		font-weight: 500;
		line-height: 1.35;
		transition: background 0.2s, color 0.2s;
		border: none;
		box-sizing: border-box;
		width: 100%;
		text-align: left;
	}
	.jb-mobile__link:hover {
		background: rgba(255,255,255,0.8);
		color: #0f172a;
	}
	.jb-mobile__link--active {
		background: #fff;
		color: #0f172a;
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
		border-left: 4px solid #0f172a;
		padding-left: 14px;
	}
	.jb-mobile__link--don {
		background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
		color: #713f12;
		font-weight: 600;
	}
	.jb-mobile__link--don:hover {
		background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
		color: #713f12;
	}
	.jb-mobile__link--don.jb-mobile__link--active {
		background: #fff;
		color: #0f172a;
		border-left-color: #0f172a;
	}

	/* Pied : Connexion / Déconnecter */
	.jb-mobile__footer {
		flex-shrink: 0;
		padding: 16px 16px 24px;
		background: rgba(255,255,255,0.5);
		border-top: 1px solid rgba(0,0,0,0.06);
	}
	.jb-mobile__form { margin: 0; }
	.jb-mobile__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		padding: 14px 20px;
		border: none;
		border-radius: 12px;
		font-size: 0.9375rem;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
		transition: background 0.2s, color 0.2s, box-shadow 0.2s;
	}
	.jb-mobile__btn--login {
		background: linear-gradient(135deg, #198754 0%, #157347 100%);
		color: #fff;
		box-shadow: 0 4px 12px rgba(25,135,84,0.35);
	}
	.jb-mobile__btn--login:hover {
		background: linear-gradient(135deg, #157347 0%, #146c43 100%);
		color: #fff;
		box-shadow: 0 6px 16px rgba(25,135,84,0.4);
	}
	.jb-mobile__btn--logout {
		background: #FF0000 !important;
		color: #fff !important;
		box-shadow: 0 4px 12px rgba(255,0,0,0.35);
	}
	.jb-mobile__btn--logout:hover {
		background: #cc0000 !important;
		color: #fff !important;
		box-shadow: 0 6px 16px rgba(255,0,0,0.4);
	}
	.jb-mobile__btn i { font-size: 1rem; }
}

@media (max-width: 575px) {
	.site-header .main-bar { padding: 6px 0 !important; }
	.site-header .logo-header .logo-dark img { max-height: 48px; }
	/* Bande blanche au scroll : même taille de logo sur petit mobile */
	.sticky-header.is-fixed .main-bar { padding: 6px 0 !important; }
	.sticky-header.is-fixed .main-bar .logo-header { min-height: 48px !important; }
	.sticky-header.is-fixed .logo-header img,
	.sticky-header.is-fixed .main-bar .logo-header .logo-dark img {
		max-height: 48px !important;
		height: auto !important;
		padding: 0 !important;
		object-fit: contain;
	}
	.navbar-toggler.navicon { margin: 10px 0 10px 10px; width: 38px; height: 38px; }
	.header-nav.show,
	.mo-left .header-nav.show { width: 215px !important; max-width: 72vw !important; }
	.jb-mobile__logo { padding: 16px 16px 12px; }
	.jb-mobile__logo img { max-height: 42px; max-width: 140px; }
	.jb-mobile__user { padding: 16px 16px 12px; }
	.jb-mobile__user-link { padding: 12px 14px; }
	.jb-mobile__user-avatar { width: 40px; height: 40px; font-size: 1rem; }
	.jb-mobile__nav { padding: 10px 12px; }
	.jb-mobile__link { padding: 12px 16px; font-size: 0.9rem; }
	.jb-mobile__link--active { padding-left: 12px; }
	.jb-mobile__footer { padding: 12px 12px 20px; }
	.jb-mobile__btn { padding: 12px 16px; font-size: 0.9rem; }
}

/* ========== PAGE CONTENT (padding, bande bleue) ========== */
@media (max-width: 991px) {
	.page-content { padding-top: 5rem !important; }
	.page-content .bnr-bleu-haut { margin-top: -5rem; padding-top: 5rem; min-height: 200px; }
}

@media (max-width: 767px) {
	.page-content { padding-top: 4.5rem !important; }
	.page-content .bnr-bleu-haut { margin-top: -4.5rem; padding-top: 4.5rem; min-height: 160px; }
	.page-content .bnr-bleu-haut .dz-bnr-inr-entry { padding-top: 0.5rem; }
}

@media (max-width: 575px) {
	.page-content { padding-top: 4rem !important; }
	.page-content .bnr-bleu-haut { margin-top: -4rem; padding-top: 4rem; min-height: 140px; }
	.page-content .bnr-bleu-haut .breadcrumb { font-size: 0.8rem; }
	.page-content .bnr-bleu-haut .breadcrumb-row { margin-top: 0.5rem !important; }
}

/* ========== ACCUEIL (bannière, titres, sections) ========== */
@media (max-width: 991px) {
	.main-bnr .sub-title { font-size: 0.9rem; }
	.main-bnr h1 { font-size: 1.75rem !important; line-height: 1.3; }
	.main-bnr .text.text-primary { font-size: 0.9rem; }
	.main-bnr .bottom-contact { font-size: 0.8rem; }
	.main-bnr .bottom-contact a { display: inline-block; margin: 2px 0; }
	.section-head .title { font-size: 1.5rem !important; }
	.section-head h2.title { font-size: 1.5rem !important; }
}

@media (max-width: 767px) {
	.main-bnr h1 { font-size: 1.5rem !important; }
	.main-bnr .bnr-search-bar .form-control { font-size: 0.9rem; }
	.main-bnr .btn { font-size: 0.9rem; padding: 0.6rem 1rem; }
	.main-bnr .bottom-contact { font-size: 0.75rem; }
	.section-head .text { font-size: 0.85rem; }
	.section-head .title,
	.section-head h2.title { font-size: 1.35rem !important; }
	.content-inner { padding-top: 2rem; padding-bottom: 2rem; }
	.icon-bx-wraper .icon-content .title { font-size: 0.95rem !important; }
	.icon-bx-wraper .icon-content .text { font-size: 0.8rem !important; }
}

@media (max-width: 575px) {
	.main-bnr h1 { font-size: 1.35rem !important; }
	.main-bnr .sub-title { font-size: 0.8rem; }
	.main-bnr .bottom-contact { font-size: 0.7rem; }
	.section-head .title,
	.section-head h2.title { font-size: 1.2rem !important; }
	.content-inner .row [class*="col-"] { margin-bottom: 0.75rem; }
}

/* ========== RÉDUCTION TAILLE DES CARTES (global) ========== */
@media (max-width: 991px) {
	.page-content .card,
	.page-content .dz-card .dz-info { padding: 1.25rem !important; }
	.page-content .job-bx.style-1,
	.page-content .dz-card { padding: 1rem !important; }
	.icon-bx-wraper.style-1 { padding: 24px !important; }
	.icon-bx-wraper.style-2 { padding: 20px 1.5rem !important; }
	.icon-bx-wraper.style-2 .icon-content .title { padding: 12px 0 !important; font-size: 1.1rem !important; }
}

@media (max-width: 767px) {
	.page-content .card,
	.page-content .dz-card .dz-info { padding: 1rem !important; }
	.page-content .job-bx.style-1,
	.page-content .dz-card { padding: 0.85rem !important; }
	.icon-bx-wraper.style-1 { padding: 18px !important; }
	.icon-bx-wraper.style-2 { padding: 14px 1rem !important; margin-bottom: 1rem !important; }
	.icon-bx-wraper.style-2 .icon-content .title { padding: 10px 0 !important; font-size: 1rem !important; }
	.dz-card.blog-grid .dz-info,
	.dz-card.blog-grid .dz-text { padding: 1rem !important; }
}

@media (max-width: 575px) {
	.page-content .card,
	.page-content .dz-card .dz-info { padding: 0.75rem !important; }
	.page-content .job-bx.style-1,
	.page-content .dz-card { padding: 0.65rem !important; }
	.icon-bx-wraper.style-1 { padding: 14px !important; }
	.icon-bx-wraper.style-2 { padding: 12px 0.75rem !important; margin-bottom: 0.75rem !important; }
	.icon-bx-wraper.style-2 .icon-content .title { padding: 8px 0 !important; font-size: 0.9rem !important; }
	.dz-card.blog-grid .dz-info,
	.dz-card.blog-grid .dz-text { padding: 0.75rem !important; }
}

/* ========== CARTES OFFRES (job-bx) ========== */
@media (max-width: 991px) {
	.job-bx.style-1 { padding: 14px !important; }
	.job-bx.style-1 .job-contant { margin-bottom: 14px !important; }
	.job-bx.style-1 .jobs-amount .btn { width: 34px; height: 34px; line-height: 34px; font-size: 0.85rem; }
}

@media (max-width: 767px) {
	.job-bx.style-1 { padding: 12px !important; }
	.job-bx.style-1 .job-contant h4 { font-size: 1rem; }
	.job-bx.style-1 .job-contant { margin-bottom: 10px !important; }
	.job-bx.style-1 .job-contant .text,
	.job-bx .job-contant p { font-size: 0.8rem !important; }
	.job-bx .jobs-amount .amount { font-size: 0.85rem; }
	.job-bx .jobs-amount .btn { width: 32px; height: 32px; line-height: 32px; font-size: 0.8rem; }
	.job-bx .btn { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
	.job-bx.style-1 ul li .job-time { padding: 3px 8px; font-size: 0.7rem; }
}

@media (max-width: 575px) {
	.job-bx.style-1 { padding: 10px !important; }
	.job-bx.style-1 .job-contant h4 { font-size: 0.95rem; }
	.job-bx.style-1 .job-contant { margin-bottom: 8px !important; }
	.job-bx .d-flex.m-b25 { margin-bottom: 0.4rem !important; }
	.job-bx.style-1 .media { font-size: 0.75rem; }
	.job-bx .jobs-amount .btn { width: 30px; height: 30px; line-height: 30px; font-size: 0.75rem; }
}

/* ========== ESPACEMENT CARTES OFFRES (accueil + nos offres) ========== */
@media (min-width: 992px) {
	.offres-cards-row .job-bx.style-1 { margin-bottom: 1rem !important; margin-top: 0.75rem !important; }
}
@media (max-width: 991px) {
	.offres-cards-row.row { --bs-gutter-y: 0.35rem; }
	.offres-cards-row [class*="col-"] { margin-bottom: 0.35rem !important; }
	.offres-cards-row .job-bx.style-1 { margin-bottom: 0.35rem !important; margin-top: 0.25rem !important; }
}
@media (max-width: 767px) {
	.offres-cards-row.row { --bs-gutter-y: 0.25rem; }
	.offres-cards-row [class*="col-"] { margin-bottom: 0.25rem !important; }
	.offres-cards-row .job-bx.style-1 { margin-bottom: 0.25rem !important; margin-top: 0.2rem !important; }
}
@media (max-width: 575px) {
	.offres-cards-row.row { --bs-gutter-y: 0.2rem; }
	.offres-cards-row [class*="col-"] { margin-bottom: 0.2rem !important; }
	.offres-cards-row .job-bx.style-1 { margin-bottom: 0.2rem !important; margin-top: 0.15rem !important; }
}

/* ========== PAGE OFFRES (liste + filtre) ========== */
@media (max-width: 991px) {
	.recherche-form .recherche-card { padding: 1.25rem 1rem; }
	.recherche-form .recherche-label { font-size: 0.75rem; }
}

@media (max-width: 767px) {
	.bnr-bleu-haut h1 { font-size: 1.5rem !important; }
	.recherche-form .recherche-card { padding: 1rem 0.75rem; }
	.recherche-form .recherche-input,
	.recherche-form .recherche-select,
	.recherche-form .recherche-field { font-size: 0.9rem; height: 42px; }
	.recherche-form .recherche-btn { padding: 0.7rem 1rem; font-size: 0.9rem; }
}

@media (max-width: 575px) {
	.bnr-bleu-haut h1 { font-size: 1.3rem !important; }
	.recherche-form .recherche-card { padding: 0.75rem 0.5rem; }
	.section-head.text-center.mb-4 .text { font-size: 0.8rem; }
}

/* ========== PAGE DÉTAIL OFFRE ========== */
@media (max-width: 767px) {
	.offre-detail-content .dz-title { font-size: 1.25rem !important; }
	.offre-detail-content .job-detail-content h5 { font-size: 1rem; }
	.offre-detail-content .dz-post-text .title { font-size: 1rem; }
	.offre-detail-content .dz-post-text p,
	.offre-detail-content .dz-post-text div { font-size: 0.9rem; }
	.offre-detail-content .side-bar .widget .title { font-size: 1rem; }
	.offre-detail-content .form-postuler-wrap h4 { font-size: 1.1rem; }
}

@media (max-width: 575px) {
	.offre-detail-content .blog-single { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
	.offre-detail-content .form-postuler-wrap { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
	.offre-detail-content .dz-info { margin-bottom: 1rem !important; }
}

/* ========== FOOTER ========== */
@media (max-width: 991px) {
	.site-footer .footer-top .row.p-50 { padding: 2rem 1rem !important; }
	.site-footer .footer-title { font-size: 1rem; margin-bottom: 0.75rem; }
	.site-footer .footer-top .widget ul li a,
	.site-footer .footer-top .widget_getintuch ul li { font-size: 0.85rem; }
	.site-footer .footer-top .widget p { font-size: 0.85rem; }
	.site-footer .footer-top .footer-logo img { max-width: 100px !important; }
}

@media (max-width: 767px) {
	.site-footer .footer-top .row.p-50 { padding: 1.5rem 0.75rem !important; }
	.site-footer .footer-top .widget { margin-bottom: 1.5rem; }
	.site-footer .footer-title { font-size: 0.95rem; }
	.site-footer .footer-top .widget ul li a { font-size: 0.8rem; }
	.site-footer .footer-top .widget p { font-size: 0.8rem; }
	.site-footer .footer-top .input-group .form-control { font-size: 0.9rem; }
	.site-footer .footer-top .input-group .btn { font-size: 0.85rem; padding: 0.5rem 0.75rem; }
	.site-footer .footer-bottom .copyright-text { font-size: 0.75rem !important; line-height: 1.5; }
}

@media (max-width: 575px) {
	.site-footer .footer-top .row.p-50 { padding: 1.25rem 0.5rem !important; }
	.site-footer .footer-top .footer-logo img { max-width: 90px !important; }
	.site-footer .footer-top .col-6 { margin-bottom: 0.5rem; }
	.site-footer .footer-bottom .copyright-text { font-size: 0.7rem !important; }
	.site-footer .footer-top .input-group { flex-wrap: wrap; }
	.site-footer .footer-top .input-group .form-control { min-width: 0; }
}

/* ========== PAGES INTERNES (À propos, Contact, etc.) ========== */
@media (max-width: 767px) {
	.page-content .content-inner .section-head .title { font-size: 1.4rem !important; }
	.page-content .content-inner h2 { font-size: 1.25rem; }
	.page-content .content-inner h3 { font-size: 1.1rem; }
}

@media (max-width: 575px) {
	.page-content .content-inner .section-head .title { font-size: 1.2rem !important; }
	.page-content .content-inner p { font-size: 0.9rem; }
}

/* ========== PAGE DON – espace carte / footer ========== */
.content-inner-don { padding-bottom: 1rem !important; }

/* ========== PAGE DON – boutons montant plus petits en mobile (5 sur une ligne) ========== */
@media (max-width: 767px) {
	.don-montant-btns .btn-montant {
		padding: 0.25rem 0.5rem;
		font-size: 0.8rem;
	}
}

/* ========== BOUTON SCROLL TOP ========== */
@media (max-width: 575px) {
	.scroltop.icon-up { width: 40px; height: 40px; font-size: 0.9rem; bottom: 15px; right: 15px; }
}