/*==========================================================================
  THEME — Jawhar Al Islam
  Surcouche visuelle chargée après style.css / responsive.css.
  Pour revenir à l'ancien style : retirer le <link> vers ce fichier.
==========================================================================*/

:root {
	--green-950: #06201a;
	--green-900: #0b2e26;
	--green-800: #11402f;
	--green-700: #175440;
	--gold: #c9a24a;
	--gold-light: #e6c97a;
	--gold-dark: #9c7a2e;
	--cream: #fbf6ea;
	--cream-dark: #efe5cc;
	--ink: #1f2a26;
	--muted: #5b6b64;
	--radius: 12px;
	--shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/*---------------------------------- BASE ----------------------------------*/

body {
	color: var(--ink);
	font-family: 'Amiri', 'Aref Ruqaa', serif;
	font-size: 18px;
	line-height: 1.8;
	padding-top: 86px;
	background-color: var(--green-950);
	background-image:
		linear-gradient(rgba(6, 32, 26, 0.62), rgba(6, 32, 26, 0.74)),
		url("../../img/Zitouna.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

p {
	font-family: 'Amiri', serif;
	font-size: 19px;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.9;
}

h2 {
	font-size: 46px;
	line-height: 1.4;
	letter-spacing: 0;
}

a {
	transition: color 0.2s ease;
}

::selection {
	background: var(--gold);
	color: var(--green-950);
}

.section-padding {
	padding-top: 70px;
	padding-bottom: 70px;
}

/*------------------------------ SECTION TITLES ----------------------------*/

.heading-dark h2,
.heading-light h2,
.gallery-section h2 {
	color: var(--gold-light);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.heading-dark {
	margin-bottom: 45px;
}

/* ornement doré sous les titres : —— ✦ —— */
.heading-dark h2::after {
	content: "✦";
	display: block;
	width: 220px;
	margin: 14px auto 0;
	font-size: 16px;
	line-height: 1;
	color: var(--gold);
	background:
		linear-gradient(to left, transparent, var(--gold)) left center / 42% 1px no-repeat,
		linear-gradient(to right, transparent, var(--gold)) right center / 42% 1px no-repeat;
}

.border-heading {
	border-bottom: 3px solid var(--gold);
	width: 80px;
	margin-top: 14px;
	margin-bottom: 20px;
	border-radius: 2px;
}

/*--------------------------------- NAVBAR ---------------------------------*/

.black-menu.navbar.navbar-default {
	background: rgba(251, 246, 234, 0.96);
	border: none;
	border-bottom: 3px solid var(--gold);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	min-height: 0;
}

.black-menu .container-fluid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 8px 24px;
}

.black-menu .container-fluid::before,
.black-menu .container-fluid::after {
	display: none;
}

/* ordinateur : logo à droite, liens centrés sur la page (3 colonnes égales autour) */
@media (min-width: 768px) {
	.black-menu .container-fluid {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.black-menu .logo-image {
		justify-self: start;
	}
}

.logo-image {
	float: none;
	padding: 0;
}

.logo-image img {
	height: 56px;
	width: auto;
}

/* la barre ne dépend plus du JavaScript (désactivé) : menu toujours visible */
.black-navigation {
	float: none !important;
	display: block;
}

.black-menu .navbar-header {
	display: none;
}

.black-navigation .navbar-collapse {
	display: block !important;
	height: auto !important;
	border: none;
	box-shadow: none;
	background: transparent;
	padding: 0;
}

.black-navigation .black-nav.navbar-nav {
	position: static !important;
	transform: none !important;
	display: flex;
	gap: 6px;
	float: none;
	margin: 0;
	padding: 0;
}

.black-nav.navbar-nav > li {
	float: none;
}

.black-nav.navbar-nav > li > a,
.navTitle {
	font-family: 'Aref Ruqaa', serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--green-800) !important;
	padding: 8px 16px !important;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.navTitle:hover,
.black-nav.navbar-nav > li > a:hover,
.black-nav.navbar-nav > li > a:focus {
	font-size: 24px;
	color: var(--green-950) !important;
	background-color: rgba(201, 162, 74, 0.22) !important;
}

.black-nav.navbar-nav > li > a::after {
	display: none;
}

/*----------------------- NOUVEAU NUMÉRO / LISTE NUMÉROS -------------------*/

.section-1-bg {
	background-color: transparent;
}

.edu-row {
	padding-top: 0;
}

.work-col img,
.edu-row .work-col img {
	border-radius: 8px;
	border: 2px solid rgba(201, 162, 74, 0.6);
	box-shadow: var(--shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.edu-row .work-col a:hover img {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.edu-div-1 {
	margin-top: 40px;
}

.edu-heading {
	background: var(--cream);
	border-top: 4px solid var(--gold);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 26px 30px;
}

.edu-col h5,
.edu-title h5 {
	font-family: 'Aref Ruqaa', serif;
	font-size: 28px;
	line-height: 1.5;
	color: var(--green-900);
	padding: 0 0 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--cream-dark);
	text-transform: none;
}

.edu-title {
	cursor: default;
}

.edu-heading p {
	color: var(--muted);
	font-size: 20px;
}

/* bouton principal (télécharger / voir plus) */
.btn.arbtn {
	display: inline-block;
	font-family: 'Amiri', serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--green-950);
	background: linear-gradient(180deg, var(--gold-light), var(--gold));
	background-image: linear-gradient(180deg, var(--gold-light), var(--gold));
	border: 1px solid var(--gold-dark);
	border-radius: 999px;
	padding: 8px 26px 10px;
	margin-left: 8px;
	text-shadow: none;
	box-shadow: 0 4px 12px rgba(156, 122, 46, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn.arbtn:hover,
.btn.arbtn:focus {
	color: var(--green-950);
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(156, 122, 46, 0.45);
}

.btn.arbtn:focus-visible {
	outline: 3px solid var(--gold-light) !important;
	outline-offset: 3px;
}

/* boutons « تصفّح العدد » + « تحميل » */
.issue-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.issue-actions .btn.arbtn {
	margin-left: 0;
}

.issue-actions .fa {
	margin-left: 6px;
}

.btn.arbtn.arbtn-outline {
	color: var(--green-800);
	background: transparent;
	background-image: none;
	border: 1px solid var(--gold);
	box-shadow: none;
}

.btn.arbtn.arbtn-outline:hover,
.btn.arbtn.arbtn-outline:focus {
	color: var(--green-950);
	background: rgba(201, 162, 74, 0.18);
	box-shadow: none;
}

/*------------------------------- À PROPOS --------------------------------*/

.section-2-bg {
	background-color: rgba(17, 64, 47, 0.6);
	border-top: 1px solid rgba(201, 162, 74, 0.35);
	border-bottom: 1px solid rgba(201, 162, 74, 0.35);
}

.work-row {
	padding-top: 0;
}

.work-div-1 {
	margin-top: 0;
}

.work-heading {
	background: var(--cream);
	border-radius: var(--radius) var(--radius) 0 0;
	border-top: 4px solid var(--gold);
	box-shadow: none;
	padding: 22px 30px 4px;
}

.work-col h5,
.work-title h5 {
	font-family: 'Aref Ruqaa', serif;
	font-size: 28px;
	color: var(--green-900);
	padding: 0;
}

.work-title {
	cursor: default;
}

.work-title .down-arrow {
	display: none;
}

.work-ans {
	background: var(--cream);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow);
	padding: 10px 30px 26px;
	margin-top: 0;
	text-align: right;
}

.work-ans p {
	color: var(--ink);
	margin-bottom: 10px;
}

.work-ans p:nth-child(2) {
	color: var(--green-700);
	font-weight: 700;
	padding-right: 14px;
	border-right: 3px solid var(--gold);
}

/*------------------------------- GALERIE ---------------------------------*/

.gallery-section {
	background-color: transparent;
}

.gallery-section .heading-light h2 {
	font-size: 46px;
}

.gallery-section .first-para {
	color: rgba(251, 246, 234, 0.85);
	font-size: 20px;
	margin-bottom: 22px;
}

.gallery15-1-col {
	padding-left: 6px;
	padding-right: 6px;
}

.gallery15-1-space {
	padding-bottom: 12px;
}

.gallery-image {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(201, 162, 74, 0.5);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.gallery-inner img {
	transition: transform 0.4s ease;
}

.gallery-inner:hover img {
	transform: scale(1.06);
}

.gallery-inner .gallery-caption::before {
	background: rgba(6, 32, 26, 0.55);
	border: 1px solid var(--gold-light);
	border-radius: 6px;
}

.gallery-caption i {
	color: var(--gold-light);
	font-size: 34px;
}

/*------------------------------- FOOTER ----------------------------------*/

.contact-bgimage {
	background-image: none;
	background-color: var(--green-950);
	border-top: 3px solid var(--gold);
}

.contact-bgimage .footer12-col {
	padding: 10px 0 20px;
}

.contact-bgimage .footer12-col .text-right {
	display: inline-block;
	text-align: right;
}

.contact-bgimage .footer12-address-1 {
	padding-top: 8px;
	padding-bottom: 8px;
}

.contact-bgimage .footer12-address p,
.contact-bgimage .footer12-address p a {
	color: var(--cream);
	font-size: 20px;
	text-transform: none;
}

.contact-bgimage .footer12-address p a:hover {
	color: var(--gold-light);
}

.contact-bgimage .separator {
	border-bottom: 1px solid rgba(201, 162, 74, 0.35);
	margin: 20px auto 10px;
	width: 60%;
}

.copyright-9 p,
.contact-bgimage .bw-form > .content-spacing {
	color: rgba(251, 246, 234, 0.6);
	font-size: 16px;
	text-transform: none;
	text-align: center;
}

/*--------------------- PAGE « NUMÉROS PRÉCÉDENTS » -----------------------*/

.page-previous .work-section {
	padding-top: 22px;
	padding-bottom: 22px;
}

.page-previous .work-section:first-of-type,
.page-previous .work-section:has(.heading-dark) {
	padding-top: 60px;
}

.page-previous .edu-div-1 {
	margin-top: 28px;
}

/*------------------------------ RESPONSIVE --------------------------------*/

@media (max-width: 991px) {
	.gallery-section .heading-light {
		text-align: center;
	}

	.gallery-section .border-heading {
		margin-left: auto;
		margin-right: auto;
	}

	.gallery-section .col-md-4 {
		text-align: center;
	}
}

@media (max-width: 767px) {
	body {
		padding-top: 130px;
	}

	h2,
	.gallery-section .heading-light h2 {
		font-size: 36px;
	}

	.section-padding {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.black-menu .container-fluid {
		justify-content: center;
		gap: 4px;
		padding: 8px 12px;
	}

	.logo-image img {
		height: 44px;
	}

	.black-nav.navbar-nav > li > a,
	.navTitle,
	.navTitle:hover {
		font-size: 19px;
		padding: 6px 12px !important;
	}

	.edu-row .work-col {
		text-align: center;
	}

	.edu-row .work-col img {
		display: inline-block;
		max-width: 260px;
	}

	.edu-div-1,
	.page-previous .edu-div-1 {
		margin-top: 20px;
	}

	.edu-heading,
	.work-heading,
	.work-ans {
		padding-left: 20px;
		padding-right: 20px;
	}

	.edu-title h5 {
		display: block;
		text-align: right;
		font-size: 24px;
	}

	.work-row .work-col img {
		margin-bottom: 20px;
	}

	.contact-bgimage .footer12-address p,
	.contact-bgimage .footer12-address p a {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/*------------------------------- LIGHTBOX --------------------------------*/

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px 20px;
	background: rgba(6, 32, 26, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	cursor: zoom-out;
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border: 2px solid var(--gold);
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	cursor: default;
	transform: scale(0.96);
	transition: transform 0.25s ease;
}

.lightbox.is-open .lightbox-img {
	transform: scale(1);
}

.lightbox-close {
	position: absolute;
	top: 14px;
	left: 18px;
	width: 46px;
	height: 46px;
	font-size: 32px;
	line-height: 42px;
	text-align: center;
	color: var(--green-950);
	background: linear-gradient(180deg, var(--gold-light), var(--gold));
	border: 1px solid var(--gold-dark);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	padding: 0;
}

.lightbox-close:hover {
	filter: brightness(1.08);
}

.lightbox-close:focus-visible {
	outline: 3px solid var(--cream);
	outline-offset: 3px;
}

body.lightbox-lock {
	overflow: hidden;
}

a[href$=".png"] img,
a[href$=".jpg"] img {
	cursor: zoom-in;
}

/*------------------------- MENU : PAGE ACTIVE -----------------------------*/

.black-nav.navbar-nav > li > a[aria-current="page"] {
	background-color: rgba(201, 162, 74, 0.28) !important;
	box-shadow: inset 0 -2px 0 var(--gold);
}

/* les ancres (#contact…) ne passent pas sous le menu fixe */
[id] {
	scroll-margin-top: 90px;
}