/* =========================================================
   AN NÖOR — Charte "Ocre latérite"
   À charger APRÈS assets/css/style.css :
   <link rel="stylesheet" href="assets/css/an-noor-theme.css">

   Palette
   --------------------------------------------------------
   #8C3B22  Ocre latérite   bandeau, titres, icônes
   #A8492C  Ocre clair      survol
   #2A1F1B  Brun profond    bannière, pied de page
   #E8A33D  Doré            boutons et appels à l'action
   #F7F1E8  Sable           fonds de section
   #6E5F55  Brun doux       texte secondaire
   ========================================================= */

:root {
	--an-primary:   #8C3B22;
	--an-primary-h: #A8492C;
	--an-dark:      #2A1F1B;
	--an-accent:    #E8A33D;
	--an-accent-h:  #F2B558;
	--an-sand:      #F7F1E8;
	--an-muted:     #6E5F55;
}

/* ---------- Fonds ---------- */

.bg-theme,
.header-bottom.bg-theme,
.header-section .header-bottom {
	background-color: var(--an-primary) !important;
}

.bg-ash,
.footer-top.bg-ash,
.product-section.bg-ash,
.gallery-section.bg-ash,
.testimonial-section.bg-ash,
.sponsor-section.bg-ash {
	background-color: var(--an-sand) !important;
}

/* ---------- Couleur d'accent du texte ---------- */

.color-theme,
.section-header h3,
.about-title h2,
.card-title,
.st-content h6,
.lab-content h6,
.post-title h5,
.footer-location .icon-part i {
	color: var(--an-primary) !important;
}

.section-header p,
.card-text,
.service-bottom p,
.lab-content p,
.about-title p {
	color: var(--an-muted) !important;
}

a {
	color: var(--an-primary);
}

a:hover {
	color: var(--an-primary-h);
}

/* ---------- Boutons ---------- */

.lab-btn,
.lab-btn:focus,
.gallery-btn .lab-btn,
.cart-action .lab-btn {
	background-color: var(--an-accent) !important;
	border-color: var(--an-accent) !important;
	color: var(--an-dark) !important;
}

.lab-btn span,
.lab-btn:focus span {
	color: var(--an-dark) !important;
}

.lab-btn:hover {
	background-color: var(--an-accent-h) !important;
	border-color: var(--an-accent-h) !important;
}

.lab-btn:hover span {
	color: var(--an-dark) !important;
}

.text-btn a {
	color: var(--an-primary) !important;
}

.text-btn a:hover {
	color: var(--an-accent) !important;
}

/* ---------- Bannière ---------- */

.banner .overlay {
	background-color: rgba(42, 31, 27, 0.62) !important;
}

.banner-title,
.banner-content h1 {
	color: #ffffff !important;
}

.banner-slider .swiper-pagination-bullet-active {
	background-color: var(--an-accent) !important;
}

/* ---------- Menu ---------- */

.primary-menu .main-menu > ul > li > a,
.header-bottom .lab-ul > li > a {
	color: #ffffff !important;
}

.primary-menu .main-menu > ul > li > a:hover,
.header-bottom .lab-ul > li.active > a {
	color: var(--an-accent) !important;
}

.header-bottom .lab-ul ul.lab-ul {
	background-color: var(--an-dark) !important;
}

.header-bottom .lab-ul ul.lab-ul li a {
	color: #ffffff !important;
}

.header-bottom .lab-ul ul.lab-ul li a:hover {
	color: var(--an-accent) !important;
}

.ht-add-content span.text-bold {
	color: var(--an-dark) !important;
}

.ht-add-content span {
	color: var(--an-muted);
}

/* ---------- Mobile ---------- */

/* Bandeau supérieur du tiroir : reste ocre (logo blanc dessus) */
.mobile-menu nav.mobile-header {
	background-color: var(--an-primary) !important;
}

/* Panneau des rubriques : fond blanc, texte et lignes ocre */
.mobile-menu-area,
.mobile-menu nav.mobile-menu .mobile-menu-area,
.mobile-menu-area-inner {
	background-color: #ffffff !important;
}

.mobile-menu-area-inner .lab-ul li,
.mobile-menu-area-inner > .lab-ul > li {
	border-bottom: 1px solid rgba(140, 59, 34, 0.22) !important;
}

.mobile-menu-area-inner .lab-ul li:last-child {
	border-bottom: none !important;
}

.mobile-menu-area-inner .lab-ul li a {
	color: var(--an-primary) !important;
	background-color: transparent !important;
}

.mobile-menu-area-inner .lab-ul li a:hover,
.mobile-menu-area-inner .lab-ul li.active > a {
	color: var(--an-accent) !important;
	background-color: rgba(140, 59, 34, 0.05) !important;
}

.header-bar span {
	background-color: #ffffff !important;
}

/* ---------- Prix ---------- */

.product-price .d-price,
.media-body .price {
	color: var(--an-primary) !important;
}

.product-price del {
	color: var(--an-muted) !important;
}

/* ---------- Pied de page ---------- */

.footer-bottom {
	background-color: var(--an-dark) !important;
}

.footer-bottom p,
.footer-bottom a {
	color: #E4D9CE !important;
}

.footer-bottom a:hover {
	color: var(--an-accent) !important;
}

/* ---------- Divers ---------- */

.scrollToTop {
	background-color: var(--an-primary) !important;
	color: #ffffff !important;
}

.scrollToTop:hover {
	background-color: var(--an-accent) !important;
	color: var(--an-dark) !important;
}

.preloader-icon span {
	background-color: var(--an-primary) !important;
}

.rating span a,
.rating i {
	color: var(--an-accent) !important;
}

.social-share a:hover,
.post-item .m-1:hover {
	color: var(--an-accent) !important;
}

.addcart-overlay {
	background-color: rgba(140, 59, 34, 0.60) !important;
}

.service-item .lab-inner,
.card {
	border-color: rgba(140, 59, 34, 0.14) !important;
}

/* =========================================================
   CORRECTIF CARROUSEL — puces de pagination
   Problème : les slides ont des titres de longueur inégale.
   La plus courte ne remplissait pas la hauteur du carrousel,
   laissant une bande blanche où les puces devenaient invisibles.
   ========================================================= */

.banner .swiper-wrapper {
	align-items: stretch;
}

.banner .swiper-slide {
	height: auto;
	display: flex;
}

.banner .banner-slider-part {
	width: 100%;
	min-height: 620px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Les puces reviennent DANS l'image, et restent lisibles partout */

.banner .swiper-pagination,
.banner-slider .swiper-pagination {
	bottom: 28px !important;
	z-index: 3;
}

.banner .swiper-pagination-bullet,
.banner-slider .swiper-pagination-bullet {
	width: 11px;
	height: 11px;
	background-color: #ffffff !important;
	opacity: 0.55;
	border: 1px solid rgba(42, 31, 27, 0.35);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
	margin: 0 5px !important;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.banner .swiper-pagination-bullet-active,
.banner-slider .swiper-pagination-bullet-active {
	background-color: var(--an-accent) !important;
	border-color: rgba(42, 31, 27, 0.5);
	opacity: 1;
}

/* Écrans réduits */

@media (max-width: 991px) {
	.banner .banner-slider-part {
		min-height: 460px;
	}
}

@media (max-width: 575px) {
	.banner .banner-slider-part {
		min-height: 380px;
	}
	.banner .swiper-pagination,
	.banner-slider .swiper-pagination {
		bottom: 18px !important;
	}
}

/* =========================================================
   CORRECTIF EN-TÊTE COLLANT (sticky)
   Au défilement, le template réaffiche la barre de menu avec
   sa couleur orange d'origine. On force l'ocre dans tous les
   états possibles de la barre.
   ========================================================= */

.header-section.header-fixed .header-bottom,
.header-section.sticky .header-bottom,
.header-section.active .header-bottom,
.header-bottom.header-fixed,
.header-bottom.sticky,
.header-bottom.active,
.header-fixed .header-bottom,
.sticky .header-bottom,
.header-bottom .header-area,
.header-bottom .header-area.sticky,
.header-bottom .primary-menu,
header.header-fixed,
header.sticky {
	background-color: var(--an-primary) !important;
}

.header-section.header-fixed .lab-ul > li > a,
.header-bottom.sticky .lab-ul > li > a,
.header-fixed .header-bottom .lab-ul > li > a,
.sticky .header-bottom .lab-ul > li > a {
	color: #ffffff !important;
}

.header-section.header-fixed .lab-ul > li.active > a,
.header-section.header-fixed .lab-ul > li > a:hover,
.header-fixed .header-bottom .lab-ul > li.active > a,
.sticky .header-bottom .lab-ul > li.active > a {
	color: var(--an-accent) !important;
}

/* Le logo de la barre collante est sur fond ocre :
   il lui faut la version BLANCHE (assets/images/logo/02.png) */

/* =========================================================
   PAGES INTÉRIEURES — bandeau de titre
   ========================================================= */

.page-header {
	background-size: cover;
	background-position: center center;
}

.page-header .overlay {
	background-color: rgba(42, 31, 27, 0.66) !important;
}

.page-header .ph-title {
	color: #ffffff !important;
}

.page-header .lab-ul li a {
	color: #E4D9CE !important;
}

.page-header .lab-ul li a.active,
.page-header .lab-ul li a:hover {
	color: var(--an-accent) !important;
}

/* =========================================================
   FAQ — onglets et accordéon
   ========================================================= */

.faq-tab h5,
.faq-content > .tab-pane > h5 {
	color: var(--an-primary) !important;
}

.faq-tab .agri-ul li {
	display: block;
	width: 100%;
}

/* Fond blanc au repos ET en actif — l'onglet actif se repère au trait
   ocre et au texte plus appuyé, pas à un aplat de couleur. */
/* Le template cible ces liens via .nav-item, plus spécifique que
   .agri-ul li : sans !important le retrait n'est pas appliqué et le
   trait de l'onglet actif vient toucher la première lettre. */
.faq-tab .agri-ul li a,
.faq-tab .agri-ul li.nav-item a,
.faq-section .faq-tab .nav li a {
	display: block !important;
	width: 100% !important;
	padding: 12px 16px 12px 36px !important;
	color: var(--an-primary) !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border-left: 3px solid transparent;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.faq-tab .agri-ul li a.active,
.faq-tab .agri-ul li.nav-item a.active,
.faq-section .faq-tab .nav li a.active {
	background-color: #ffffff !important;
	color: var(--an-primary) !important;
	border-left-color: var(--an-primary) !important;
	font-weight: 500;
}

.faq-tab .agri-ul li a:hover,
.faq-tab .agri-ul li.nav-item a:hover,
.faq-section .faq-tab .nav li a:hover {
	background-color: var(--an-primary) !important;
	color: #ffffff !important;
	border-left-color: var(--an-primary) !important;
}

.faq-item {
	color: var(--an-primary) !important;
	background-color: transparent !important;
}

.faq-item:hover,
.faq-item:not(.collapsed) {
	color: var(--an-accent) !important;
}

.faq-section .card-body p {
	color: var(--an-muted) !important;
}

.faq-section .card,
.faq-section .card-header {
	border-color: rgba(140, 59, 34, 0.14) !important;
	background-color: transparent !important;
}

/* =========================================================
   GALERIE 2 — survol des vignettes
   ========================================================= */

.gallery-2 .grid-items a {
	display: block;
	position: relative;
	overflow: hidden;
}

.gallery-2 .grid-items img {
	width: 100%;
	transition: transform 0.35s ease, opacity 0.25s ease;
}

.gallery-2 .grid-items a:hover img {
	transform: scale(1.04);
	opacity: 0.88;
}

/* =========================================================
   HAUTEURS DE CARTES ÉGALES
   Sans cela, chaque carte prend la hauteur de son texte et
   la rangée devient irrégulière. On étire toutes les cartes
   d'une même rangée à la hauteur de la plus haute.
   ========================================================= */

/* Atouts, blocs de contenu, engagements, équipe :
   toutes les cartes d'une même rangée prennent la hauteur de la
   plus haute. Le !important est nécessaire : le CSS du template
   redéfinit .row et .lab-item avec une spécificité supérieure. */

.feature-section .row,
.service-content .row,
.testimonial-content .row,
.team-section .section-wrapper .row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
}

.feature-section .row > [class*="col-"],
.service-content .row > [class*="col-"],
.testimonial-content .row > [class*="col-"],
.team-section .section-wrapper .row > [class*="col-"] {
	display: flex !important;
	flex-direction: column !important;
	padding-bottom: 30px;
}

.feature-section .lab-item,
.service-content .service-item,
.testimonial-content .testi-item-2 {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

.feature-section .lab-item > .lab-inner,
.service-content .service-item > .lab-inner,
.testimonial-content .testi-item-2 > .lab-inner,
.team-section .card {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

/* La marge basse du template déborde de la colonne et colle les
   rangées entre elles : on la neutralise, l'écart vient du
   padding-bottom de la colonne ci-dessus. */
.feature-section .lab-item > .lab-inner,
.service-content .service-item > .lab-inner,
.testimonial-content .testi-item-2 > .lab-inner,
.team-section .card {
	margin-bottom: 0 !important;
}

/* Le dernier bloc de texte absorbe l'espace restant */
.feature-section .lab-content,
.service-content .service-bottom,
.testimonial-content .testi-bottom,
.team-section .card-body {
	flex: 1 1 auto !important;
}

/* Équipe */
.team-section .card-title {
	color: var(--an-primary) !important;
}

.team-section .card-text:first-of-type {
	color: var(--an-accent) !important;
	letter-spacing: 0.04em;
}

/* =========================================================
   MOBILE ET TABLETTE — centrage général
   Sur petit écran, les colonnes s'empilent et un texte calé
   à gauche paraît décentré. On centre l'ensemble, SAUF les
   éléments qui doivent rester alignés à gauche pour rester
   lisibles : listes à puces, questions/réponses de la FAQ,
   champs de formulaire et menu déroulant.
   ========================================================= */

@media (max-width: 991px) {

	/* Titres et textes de section */
	.about-wrapper,
	.about-title,
	.about-title h2,
	.about-title p,
	.about-content,
	.history-header,
	.history-header h2,
	.section-header,
	.section-header h3,
	.section-header p {
		text-align: center !important;
	}

	/* Blocs de contenu : icône au-dessus du titre, tout centré */
	.service-item .lab-inner,
	.service-bottom,
	.service-bottom p {
		text-align: center !important;
	}

	.service-top {
		flex-direction: column;
		align-items: center !important;
		justify-content: center !important;
	}

	.service-top .st-thumb {
		margin-right: 0 !important;
		margin-bottom: 10px;
	}

	/* Engagements */
	.testi-item-2 .lab-inner,
	.testi-bottom,
	.testi-bottom p,
	.testi-t-content {
		text-align: center !important;
	}

	.testi-top {
		flex-direction: column;
		align-items: center !important;
		justify-content: center !important;
	}

	.testi-top .testi-t-thumb {
		margin-right: 0 !important;
		margin-bottom: 10px;
	}

	/* Historique */
	.history-left,
	.history-right,
	.history-right p {
		text-align: center !important;
	}

	.history-navigation {
		display: flex;
		justify-content: center;
	}

	/* Pied de page */
	.footer-top .post-item,
	.footer-top .post-title,
	.footer-top .post-item p {
		text-align: center !important;
	}

	.footer-top .footer-logo,
	.footer-top .footer-gellary,
	.footer-top .lab-btn {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.footer-location li {
		justify-content: center;
		text-align: center;
	}

	/* Bandeau de titre et fil d'ariane */
	.page-header-content-area,
	.page-header .lab-ul {
		text-align: center !important;
		justify-content: center !important;
	}

	/* Blocs de contact */
	.contact-item,
	.contact-details,
	.contact-details p {
		text-align: center !important;
	}

	/* Boutons d'envoi du formulaire */
	.pc-actions {
		justify-content: center;
	}

	/* --- Éléments qui RESTENT alignés à gauche --- */
	.list-group-item,
	.about-content .lab-ul .list-group-item,
	.faq-item,
	.faq-section .card-body,
	.faq-section .card-body p,
	.mobile-menu-area-inner .lab-ul li a,
	.precommande-form input,
	.precommande-form textarea {
		text-align: left !important;
	}

	/* La liste à puces est calée à gauche, mais le bloc lui-même
	   est centré dans la colonne : lisible et visuellement aligné. */
	.about-content .lab-ul.list-group {
		display: inline-block;
		text-align: left;
	}
}


/* =========================================================
   PIED DE PAGE — icône collée à son information
   Sans contrainte, le bloc de texte occupe toute la largeur
   restante et l'icône se retrouve isolée à gauche.
   ========================================================= */

.footer-location li {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: flex-start;
}

.footer-location li .icon-part {
	flex: 0 0 auto !important;
	width: auto !important;
	margin-right: 12px;
}

.footer-location li .content-part {
	flex: 0 1 auto !important;
	width: auto !important;
}

.footer-location li .content-part p {
	margin-bottom: 2px;
}

/* =========================================================
   IMAGES DE SECTION — centrées dès la tablette
   ========================================================= */

@media (max-width: 991px) {

	.about-thumb,
	.location-map,
	.contact-form {
		text-align: center;
	}

	.about-thumb img {
		display: inline-block;
		margin-left: auto;
		margin-right: auto;
	}

	/* L'icône passe au-dessus de son texte et le tout est centré */
	.footer-location li {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.footer-location li .icon-part {
		margin-right: 0;
		margin-bottom: 6px;
	}
}

/* =========================================================
   TABLETTE ET MOBILE — recentrage réel des blocs de texte
   Le template applique des marges et des retraits latéraux
   prévus pour la mise en page à deux colonnes. Sur petit
   écran ils décalent le texte vers la gauche : le contenu
   paraît centré dans son bloc, mais le bloc lui-même ne
   l'est pas. On remet tout à plat.
   ========================================================= */

@media (max-width: 991px) {

	.about-wrapper,
	.about-title,
	.about-title h2,
	.about-title p,
	.about-content,
	.about-content p,
	.section-header,
	.section-header h3,
	.section-header p,
	.history-header,
	.contact-item,
	.contact-details,
	.post-item,
	.post-title {
		max-width: 100% !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Les boutons restent centrés sous leur bloc */
	.about-content .lab-btn,
	.section-header + .lab-btn,
	.gallery-btn .lab-btn {
		display: inline-block;
		margin-left: auto;
		margin-right: auto;
	}

	.about-content {
		text-align: center !important;
	}
}

/* =========================================================
   FAQ — navigation rapide sur tablette et téléphone
   La colonne latérale passe pleine largeur : une liste
   verticale calée à gauche y paraît décentrée. On la
   transforme en rangée d'onglets centrés, et le repère de
   l'onglet actif passe du trait gauche au trait dessous.
   ========================================================= */

@media (max-width: 991px) {

	.faq-tab {
		text-align: center;
	}

	.faq-tab h5 {
		text-align: center !important;
		margin-bottom: 14px;
	}

	.faq-tab .agri-ul {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 8px;
	}

	.faq-tab .agri-ul li {
		width: auto !important;
		display: inline-block !important;
	}

	.faq-tab .agri-ul li a {
		width: auto !important;
		padding: 8px 16px !important;
		text-align: center !important;
		border-left: none !important;
		border-bottom: 2px solid transparent;
	}

	.faq-tab .agri-ul li a.active {
		border-left: none !important;
		border-bottom-color: var(--an-primary);
	}

	.faq-tab .agri-ul li a:hover {
		border-left: none !important;
		border-bottom-color: var(--an-primary);
	}
}