/* ==========================================================================
   Phase 2c — Header & Footer
   Palette : #36000C bordeaux · police proxima-nova
   ========================================================================== */

/* ------------------------------------------------------------------
   Container global
   ------------------------------------------------------------------ */
.hf-container {
	width: 83.33%;
	max-width: 1680px;
	margin: 0 auto;
	padding: 0;
}

/* ------------------------------------------------------------------
   Topbar
   ------------------------------------------------------------------ */
.header-topbar {
	background: #fff;
	font-family: 'proxima-nova', 'Helvetica Neue', Arial, sans-serif;
}
.header-topbar .hf-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #E5D9D4;
}
.header-topbar__left {
	display: flex;
	align-items: center;
	gap: 12px;
}
.header-topbar__left a {
	color: #444;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
}
.header-topbar__left a:hover { color: #36000C; }
body.light .header-topbar__left a { color: #36000C !important; }
.header-topbar__left .sep { color: #ccc; font-size: 16px; }
.header-topbar__right {
	display: flex;
	align-items: center;
	gap: 20px;
}
.header-topbar__icon-link {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #444;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
}
.header-topbar__icon-link:hover { color: #36000C; }

/* ------------------------------------------------------------------
   Header main (logo + recherche)
   ------------------------------------------------------------------ */
.header-main {
	background: #fff;
	padding: 18px 0;
}
.header-main .hf-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header-main__logo {
	flex-shrink: 0;
	text-decoration: none;
	display: block;
}
.header-main__logo img,
.header-main__logo .custom-logo {
	max-height: 58px;
	width: auto;
	display: block;
}
.header-main__logo-text {
	font-family: 'proxima-nova', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #36000C;
}
.header-main__search {
	width: 50%;
	max-width: 785px;
}
.header-main__search form {
	display: flex;
	align-items: center;
	border: 1px solid #410B1E;
	border-radius: 20px;
	overflow: hidden;
	padding: 0 15px;
	background: transparent;
	box-shadow: rgba(10, 10, 10, 0.1) 0px 1px 2px 0px inset;
	transition: border-color 0.2s;
}
.header-main__search form:focus-within {
	border-color: #36000C;
}
body .header-main__search input[type="search"] {
	flex: 1;
	border: none !important;
	outline: none;
	padding: 8px 0 !important;
	font-family: 'proxima-nova', sans-serif;
	font-size: 16px;
	color: #410B1E !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none;
}
body .header-main__search input[type="search"]::placeholder { color: #36000C !important; font-style: italic; font-family: 'proxima-nova', sans-serif; font-size: 16px; font-weight: 300; }
body.light .header-main__search button[type="submit"],
body .header-main__search button[type="submit"] {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	padding: 8px 0 8px 8px !important;
	color: #410B1E !important;
	display: flex;
	align-items: center;
	transition: color 0.2s;
	box-shadow: none !important;
}
body.light .header-main__search button[type="submit"]:hover,
body .header-main__search button[type="submit"]:hover { color: #36000C !important; }
.header-main__mobile-actions { display: none; }

/* ------------------------------------------------------------------
   Navigation principale desktop
   ------------------------------------------------------------------ */
.header-nav {
	background: #fff;
}
.header-nav .hf-container {
	display: flex;
	justify-content: center;
}
.header-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 36px;
}
.header-nav__list li a {
	display: block;
	padding: 14px 0;
	font-family: 'proxima-nova', 'Helvetica Neue', Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #36000C;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s;
}
.header-nav__list li a:hover,
.header-nav__list li.current-menu-item > a {
	color: #36000C;
}
.header-nav__list li.current-menu-item > a {
	border-bottom: 2px solid #36000C;
}

/* ------------------------------------------------------------------
   Hamburger + Drawer mobile
   ------------------------------------------------------------------ */
.header-hamburger {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 6px;
}
.header-hamburger__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: #36000C;
	border-radius: 2px;
	transition: background 0.2s;
}
.header-hamburger__label {
	font-family: 'proxima-nova', sans-serif;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 1px;
	color: #36000C;
	margin-top: 1px;
}
.header-mobile-drawer {
	position: fixed;
	top: 0;
	left: -300px;
	width: 280px;
	height: 100vh;
	background: #fff;
	z-index: 99999;
	transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	overflow-y: auto;
	box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}
.header-mobile-drawer.is-open { left: 0; }
.header-mobile-drawer__top {
	background: #781f48 !important;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header-mobile-drawer__menu-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: 'proxima-nova', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
}
.header-mobile-drawer__close {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'proxima-nova', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 0;
}
.header-mobile-drawer__nav { padding: 8px 0; }
.header-mobile-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.header-mobile-drawer__list li {
	border-bottom: 1px solid #f2ece9;
}
.header-mobile-drawer__list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	font-family: 'proxima-nova', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
	text-decoration: none;
}
.header-mobile-drawer__list li a::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid #aaa;
	border-bottom: 2px solid #aaa;
	transform: rotate(-45deg);
	flex-shrink: 0;
}
.header-mobile-drawer__list li a:hover { color: #36000C; }
.header-mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 99998;
}
.header-mobile-overlay.is-visible { display: block; }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer {
	background: #F2ECE9;
	font-family: 'proxima-nova', 'Helvetica Neue', Arial, sans-serif;
	margin-top: 60px;
}
.site-footer__inner {
	padding: 36px 24px 24px;
}
.site-footer__inner .hf-container {
	background: #fff;
	border-radius: 190px;
	padding: 50px 80px;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	align-items: start;
}
/* Col contact */
.site-footer__col--contact p {
	margin: 0 0 8px;
	font-size: 16px;
	color: #410B1E;
	line-height: 1.65;
	font-weight: 300;
}
.site-footer__col--contact a {
	color: #410B1E;
	text-decoration: none;
	font-weight: 500;
}
.site-footer__col--contact a:hover { color: #36000C; }
/* Col center */
.site-footer__col--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}
.site-footer__social {
	display: flex;
	align-items: center;
	gap: 14px;
}
.site-footer__social a {
	color: #888;
	text-decoration: none;
	border: 1.5px solid #ccc;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, color 0.2s;
}
.site-footer__social a:hover {
	color: #36000C;
	border-color: #36000C;
}
.site-footer__logo {
	display: block;
	text-decoration: none;
}
.site-footer__logo img,
.site-footer__logo .custom-logo {
	max-height: 50px;
	width: auto;
}
.site-footer__logo span {
	font-family: 'proxima-nova', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #36000C;
}
/* Col liens */
.site-footer__col--links {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}
.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}
.site-footer__links li { margin-bottom: 5px; }
.site-footer__links li a {
	font-size: 16px;
	color: #36000C;
	text-decoration: none;
	font-weight: 300;
}
.site-footer__links li a:hover { color: #36000C; }
/* Bas de footer */
.site-footer__bottom {
	text-align: center;
	padding: 14px 24px 28px;
}
.site-footer__bottom p {
	margin: 3px 0;
	font-size: 13px;
	color: #999;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   Surcharge : masquer le header parent si présent
   ------------------------------------------------------------------ */
.site-header + #page > .site-content { padding-top: 0 !important; }

/* ==================================================================
   MOBILE — max-width: 639px (39.9988em)
   ================================================================== */
@media (max-width: 39.9988em) {

	/* Container responsive */
	.hf-container {
		width: 100%;
		padding: 0 16px;
	}

	/* Topbar : centré, séparateur visible, pas de border-bottom */
	.header-topbar__right { display: none; }
	.header-topbar .hf-container { justify-content: center; border-bottom: none !important; }
	.header-topbar__left { justify-content: center; width: auto; gap: 25px; }
	.header-topbar__left a { font-size: 16px; color: #36000C !important; }
	.header-topbar__left .sep { display: inline; font-size: 12px; color: #ccc; }

	/* Header main : flex-wrap pour passer la recherche en dessous */
	.header-main { padding: 8px 0; }
	.header-main__logo img,
	.header-main__logo .custom-logo { max-height: 38px !important; }
	.header-main .hf-container {
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 0;
	}
	.header-main__logo { order: 1; }
	.header-main__search {
		display: block;
		width: 100%;
		max-width: 100%;
		order: 3;
		margin-top: 15px;
		padding-top: 15px;
		padding-bottom: 4px;
		border-top: 1px solid #E5D9D4;
	}
	.header-main__mobile-actions {
		display: flex;
		align-items: center;
		gap: 14px;
		order: 2;
	}
	.header-main__mobile-icon {
		color: #36000C !important;
		text-decoration: none;
		display: flex;
		align-items: center;
	}
	.header-main__mobile-icon:hover { color: #36000C !important; }

	/* Hamburger visible */
	.header-hamburger { display: flex; }

	/* Nav desktop cachée */
	.header-nav { display: none; }

	/* Drawer : supprimer chevron (liens simples sans sous-menu) */
	.header-mobile-drawer__list li a::after { display: none; }

	/* Footer mobile */
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.site-footer__inner .hf-container {
		padding: 32px 24px;
		border-radius: 20px;
	}
	.site-footer__col--links {
		align-items: flex-start;
	}
	.site-footer__links { text-align: left; }
}

/* ------------------------------------------------------------------
   Fix ordre flex sur pages PHP (single.php, page.php)
   SeoMag body est display:flex. Le parent CSS donne order:1 au .site-header
   et order:3 au .site-footer pour le layout Twig (où le contenu MAIN a order:2).
   Sur single.php/page.php, #page hérite order:0 et passe avant le header.
   On lui donne order:2 pour rétablir : header(1) → #page(2) → footer(3).
   ------------------------------------------------------------------ */
body.single #page,
body.page #page,
body.wp-singular #page {
	order: 2;
}

/* Fix : supprimer le margin-top injecté par .is_sticky sur <main> */
.is_sticky main {
	margin-top: 0 !important;
}
/* Loupe diagonale */
.header-main__search button img {
	transform: rotate(45deg);
	display: block;
}
/* Fond global toutes pages — aligne avec le footer */
body {
	background-color: #F2ECE9 !important;
}

/* ------------------------------------------------------------------
   Titres H2 catégories blog
   ------------------------------------------------------------------ */
main.blog .blog-categories .categories .category .header h2 {
	font-size: 2.8rem !important;
}

/* ------------------------------------------------------------------
   Section description — fond crème + typo harmonisée + séparateur
   ------------------------------------------------------------------ */
/* Masquer les guillemets décoratifs ::before générés par le thème */
.blog-description blockquote::before {
	content: none !important;
	display: none !important;
}
.blog-description {
	background-color: #F2ECE9 !important;
	position: relative;
	margin-top: 80px;
	padding-top: 80px !important;
}
/* Ligne courte centrée */
.blog-description::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 1px;
	background: rgba(54, 0, 12, 0.25);
}
/* Losange centré sur la ligne */
.blog-description::before {
	content: '◆';
	position: absolute;
	top: -0.55em;
	left: 50%;
	transform: translateX(-50%);
	background-color: #F2ECE9;
	color: rgba(54, 0, 12, 0.45);
	font-size: 11px;
	padding: 0 10px;
	line-height: 1;
	z-index: 1;
}
.blog-description .description h2,
.blog-description .description .h2custom {
	font-family: miller-display, Georgia, serif;
	font-style: italic;
	font-size: 30px;
	text-align: center;
	color: #36000C;
	margin-bottom: 20px;
}
.blog-description .description h3 {
	font-family: proxima-nova, 'Helvetica Neue', Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #36000C;
	margin-bottom: 12px;
}
.blog-description .description p,
.blog-description .description {
	font-family: proxima-nova, 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: #36000C;
}

/* ------------------------------------------------------------------
   Badges catégorie — bordeaux #36000C
   Override l'inline style background-color: #f2ece9
   ------------------------------------------------------------------ */
.blog-hero .category,
.blog-categories .post .details .category,
.post .details .category {
	background-color: #36000C !important;
	border-radius: 4px;
}
.blog-hero .category span,
.blog-categories .post .details .category span,
.post .details .category span {
	color: #fff !important;
}

/* ------------------------------------------------------------------
   Boutons page d'accueil — design identique au site prod (.mybtn)
   ------------------------------------------------------------------ */
.bouton2 > a,
.bouton1 {
	font-family: proxima-nova, 'Helvetica Neue', Arial, sans-serif;
	font-size: 19px;
	color: #fff !important;
	background-color: #36000C !important;
	font-weight: 300;
	padding: 0 40px;
	border: 1px solid #36000C !important;
	border-radius: 15px;
	display: block;
	width: fit-content;
	margin: 35px auto 0;
	cursor: pointer;
	transition: 0.4s;
	text-decoration: none;
}
.bouton2 > a:hover,
.bouton1:hover {
	color: #36000C !important;
	background-color: #fff !important;
	border-color: #36000C !important;
	text-decoration: none;
}
@media (max-width: 39.9988em) {
	.bouton2 > a,
	.bouton1 {
		padding: 0 30px;
		text-align: center;
	}
}

/* ------------------------------------------------------------------
   Séparateur ornemental — filet + losange bordeaux
   Classe utilitaire HTML : <div class="section-divider">...</div>
   ------------------------------------------------------------------ */
.section-divider {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 50px auto;
	max-width: 200px;
}
.section-divider__line {
	flex: 1;
	height: 1px;
	background-color: rgba(54, 0, 12, 0.25);
}
.section-divider__diamond {
	color: rgba(54, 0, 12, 0.5);
	font-size: 11px;
	flex-shrink: 0;
	line-height: 1;
}

/* Supprimer le padding-bottom 100px injecté par le thème sur .categories */
main.blog .blog-categories .categories {
	padding-bottom: 0 !important;
}

/* Séparateur automatique entre chaque bloc catégorie (généré par Twig)
   margin-top = padding-top → espacement symétrique au-dessus et en-dessous */
.blog-categories .categories .category + .category {
	position: relative;
	margin-top: 80px !important;
	padding-top: 80px;
}
/* Ligne courte centrée (≈ 1/3 de la largeur pleine) */
.blog-categories .categories .category + .category::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 1px;
	background: rgba(54, 0, 12, 0.25);
}
/* Losange centré sur la ligne */
.blog-categories .categories .category + .category::before {
	content: '◆';
	position: absolute;
	top: -0.55em;
	left: 50%;
	transform: translateX(-50%);
	background-color: #F2ECE9;
	color: rgba(54, 0, 12, 0.45);
	font-size: 11px;
	padding: 0 10px;
	line-height: 1;
	z-index: 1;
}

/* ------------------------------------------------------------------
   Classe utilitaire — rond décoratif blanc (réutilisable sur tout titre)
   Même effet que le H1 : cercle blanc positionné derrière le texte
   ------------------------------------------------------------------ */
.avec-rond {
	font-size: 55px !important;
	position: relative;
	width: fit-content;
	margin-left: auto !important;
	margin-right: auto !important;
}
.avec-rond::before {
	content: '';
	position: absolute;
	left: -30px;
	top: calc(0% - 15px);
	width: 130px;
	height: 130px;
	background: #fff;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Rond décoratif H1 — page d'accueil
   Même logique que le site prod : ::before sur le H1 directement,
   left: -30px pour déborder à gauche du texte, z-index: -1 derrière.
   ------------------------------------------------------------------ */
.blog-header h1 {
	position: relative;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
.blog-header h1::before {
	content: '';
	position: absolute;
	left: -30px;
	top: calc(0% - 15px);
	width: 130px;
	height: 130px;
	background: #fff;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Cadres articles — hauteur égale + texte aligné
   .gcol est déjà étiré par gridlex (align-items:stretch).
   On passe .post en flex colonne pour que .details remplisse le reste.
   min-height sur .title = 4 lignes (125px) pour aligner l'excerpt.
   ------------------------------------------------------------------ */
main.blog .blog-categories .posts .gcol-4_md-6_xs-12 .post {
	height: 100%;
	display: flex;
	flex-direction: column;
}
main.blog .blog-categories .posts .gcol-4_md-6_xs-12 .post .thumbnail {
	flex-shrink: 0;
}
/* Première ligne de l'excerpt alignée à gauche (suppression du text-indent du thème) */
main.blog .blog-categories .posts .gcol-4_md-6_xs-12 .post .details .excerpt p,
main.blog .blog-categories .posts .gcol-4_md-6_xs-12 .post .details .excerpt {
	text-indent: 0 !important;
}
main.blog .blog-categories .posts .gcol-4_md-6_xs-12 .post > a {
	flex: 1;
	display: flex !important;
	flex-direction: column;
}
main.blog .blog-categories .posts .gcol-4_md-6_xs-12 .post .details {
	flex: 1;
	justify-content: flex-start !important;
}
main.blog .blog-categories .posts .gcol-4_md-6_xs-12 .post .details .title {
	height: 100px !important;
	overflow: hidden;
}
main.blog .blog-categories .posts .gcol-4_md-6_xs-12 .post .details .title h3,
main.blog .blog-categories .posts .gcol-4_md-6_xs-12 .post .details .title .h2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* H2 catégories — taille mobile (après toutes les règles desktop pour gagner la cascade) */
@media (max-width: 39.9988em) {
	main.blog .blog-categories .categories .category .header h2 {
		font-size: 2.3rem !important;
	}
}

/* Fix universel : #page (templates PHP) apres le header */
#page { order: 2; }