/* ==========================================================================
   Compatibilité WordPress et ajustements finaux
   Chargée en dernier : cette feuille corrige les interactions entre le
   site, le cœur de WordPress et les blocs insérés dans l'éditeur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barre d'administration
   -------------------------------------------------------------------------- */

/* L'en-tête du site est collant : il doit passer sous la barre d'admin
   plutôt que par-dessus. */
body.admin-bar .header {
	top: 32px;
}

body.admin-bar .gp-blog-filters {
	top: 110px;
}

body.admin-bar .gp-article-sidebar {
	top: 132px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .header {
		top: 46px;
	}

	body.admin-bar .gp-blog-filters,
	body.admin-bar .gp-article-sidebar {
		top: auto;
	}
}

/* --------------------------------------------------------------------------
   2. Barre d'action mobile
   -------------------------------------------------------------------------- */

/* Réserve la hauteur de la barre fixe pour ne rien masquer en bas de page. */
@media (max-width: 767px) {
	body {
		padding-bottom: 64px;
	}

	/* Le pied de page ne doit pas passer sous la barre. */
	.mobile-bottom-bar {
		z-index: 998;
	}
}

/* --------------------------------------------------------------------------
   3. Archives de galeries
   -------------------------------------------------------------------------- */

.gp-gallery-archive {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

@media (min-width: 992px) {
	.gp-gallery-archive {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gp-galerie-card {
	background: #ffffff;
	border: 1px solid rgba(17, 17, 17, 0.07);
	border-radius: var(--gp-radius);
	overflow: hidden;
	transition: var(--transition);
}

@media (hover: hover) {
	.gp-galerie-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 40px rgba(17, 17, 17, 0.1);
		border-color: rgba(197, 160, 89, 0.35);
	}
}

.gp-galerie-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.gp-galerie-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #f2efe9;
	overflow: hidden;
}

.gp-galerie-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (hover: hover) {
	.gp-galerie-card:hover .gp-galerie-card-media img {
		transform: scale(1.05);
	}
}

.gp-galerie-card-count {
	position: absolute;
	bottom: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	background: rgba(17, 17, 17, 0.78);
	backdrop-filter: blur(6px);
	border-radius: 50px;
	color: #ffffff;
	font-size: 0.76rem;
	letter-spacing: 0.5px;
}

.gp-galerie-card-count i {
	color: var(--secondary-color);
}

.gp-galerie-card-body {
	padding: 22px 24px 24px;
}

.gp-galerie-card-meta {
	margin: 8px 0 0;
	font-size: 0.8rem;
	color: var(--text-muted-dark);
}

/* --------------------------------------------------------------------------
   4. En-tête de galerie seule
   -------------------------------------------------------------------------- */

.gp-galerie-header {
	padding-bottom: 55px;
}

.gp-galerie-meta {
	margin: 16px 0 0;
	font-size: 0.85rem;
	color: rgba(253, 252, 249, 0.65);
}

.gp-galerie-meta i {
	color: var(--secondary-color);
	margin-right: 4px;
}

.gp-galerie-intro {
	max-width: 800px;
	margin: 0 auto 45px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   5. Compteur d'archive
   -------------------------------------------------------------------------- */

.gp-archive-count {
	margin: 14px 0 0;
	font-size: 0.82rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(253, 252, 249, 0.5);
}

/* --------------------------------------------------------------------------
   6. Pagination des contenus
   -------------------------------------------------------------------------- */

.gp-page-links {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 30px 0;
	font-size: 0.9rem;
}

.gp-page-links-title {
	font-weight: 600;
	color: var(--text-muted-dark);
}

.gp-page-links a,
.gp-page-links > span:not(.gp-page-links-title) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid rgba(17, 17, 17, 0.12);
	border-radius: 50px;
	text-decoration: none;
	color: var(--text-dark);
}

.gp-page-links a:hover {
	border-color: var(--secondary-color);
	color: var(--secondary-dark);
}

/* --------------------------------------------------------------------------
   7. Images et médias insérés
   -------------------------------------------------------------------------- */

/* Empêche le débordement horizontal d'une image trop large. */
.gp-content-wrap img,
.gp-article-body img,
.entry-content img {
	max-width: 100%;
}

/* Une image seule dans le contenu est centrée et arrondie. */
.gp-article-body .wp-block-image img,
.entry-content .wp-block-image img {
	border-radius: 10px;
}

/* La légende d'une image du cœur reste discrète. */
.gp-article-body .wp-block-image figcaption {
	font-size: 0.82rem;
	color: var(--text-muted-dark);
	text-align: center;
	font-style: italic;
	margin-top: 8px;
}

/* Les vidéos et iframes intégrées restent responsives. */
.entry-content iframe,
.gp-article-body iframe,
.wp-block-embed iframe {
	max-width: 100%;
	border-radius: 10px;
}

/* --------------------------------------------------------------------------
   8. Bloc détails (FAQ native)
   -------------------------------------------------------------------------- */

.wp-block-details {
	margin: 18px 0;
	border: 1px solid rgba(197, 160, 89, 0.22);
	border-radius: var(--gp-radius);
	background: #ffffff;
	overflow: hidden;
}

.wp-block-details summary {
	padding: 20px 24px;
	cursor: pointer;
	font-family: var(--font-titles);
	font-weight: 600;
	color: var(--text-dark);
	list-style: none;
	position: relative;
	padding-right: 56px;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: '\f078';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--secondary-color);
	font-size: 0.8rem;
	transition: transform 0.3s ease;
}

.wp-block-details[open] summary::after {
	transform: translateY(-50%) rotate(180deg);
}

.wp-block-details > *:not(summary) {
	padding: 0 24px;
	margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   9. Accessibilité : cibles tactiles et lisibilité
   -------------------------------------------------------------------------- */

/* Toute cible tactile atteint au moins 44 px de haut sur mobile. */
@media (max-width: 768px) {
	.btn,
	button,
	.filter-btn,
	.gp-pagination .page-numbers,
	.gp-footer-legal a,
	.gp-footer-menu a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.gp-footer-menu a {
		min-height: 40px;
	}
}

/* Le texte reste lisible sur les fonds clairs. */
.gp-page-header p,
.gp-404-text,
.gp-hero-text {
	text-wrap: pretty;
}

/* Les titres longs ne créent pas de débordement. */
h1, h2, h3, h4 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* --------------------------------------------------------------------------
   10. Impression
   -------------------------------------------------------------------------- */

@media print {
	.header,
	.footer,
	.mobile-bottom-bar,
	.gp-cta,
	.gp-newsletter,
	.gp-article-sidebar,
	.gp-404-actions,
	.gp-blog-filters {
		display: none !important;
	}

	body {
		padding-bottom: 0;
		font-size: 11pt;
		color: #000;
	}

	.gp-article-header,
	.gp-page-header,
	.gp-404 {
		background: none !important;
		color: #000 !important;
		padding: 0 0 20pt;
	}

	.gp-article-header h1,
	.gp-page-header h1,
	.gp-404 h1 {
		color: #000 !important;
	}

	.entry-content a::after {
		content: ' (' attr(href) ')';
		font-size: 9pt;
		color: #555;
	}
}

/* --------------------------------------------------------------------------
   11. Retour en haut de page et progression de lecture
   -------------------------------------------------------------------------- */

.gp-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--secondary-color);
	border: 1px solid rgba(197, 160, 89, 0.35);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.gp-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gp-back-to-top:hover {
	background: var(--secondary-color);
	color: var(--primary-color);
}

/* Sur mobile, la barre d'action occupe déjà le bas de l'écran. */
@media (max-width: 767px) {
	.gp-back-to-top {
		right: 16px;
		bottom: 78px;
		width: 42px;
		height: 42px;
	}
}

/* Barre de progression de lecture. */
.gp-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 1002;
	background: transparent;
	pointer-events: none;
}

.gp-progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--secondary-dark), var(--secondary-color));
	transition: width 0.12s linear;
}

/* L'en-tête du site est collant : la barre de progression doit rester
   visible au-dessus de lui. */
body.admin-bar .gp-progress {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .gp-progress {
		top: 46px;
	}
}

/* Sous-menu ouvert au clavier : le CSS du site ne réagit qu'au survol. */
.dropdown.gp-dropdown-open .dropdown-content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown.gp-dropdown-open .dropbtn {
	color: var(--secondary-color);
}

.dropdown.gp-dropdown-open .dropbtn i {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   12. Sous-menus de navigation
   --------------------------------------------------------------------------
   Le conteneur des sous-menus est un `<ul>` et non un `<div>` : WordPress
   place chaque entrée dans un `<li>`, qui n'est valide que dans une liste.
   Les navigateurs appliquent par défaut une marge et un retrait aux
   listes : on les annule pour retrouver exactement la mise en page
   d'origine, où le conteneur était un `<div>`.
   -------------------------------------------------------------------------- */

.nav-list .dropdown-content {
	margin: 0;
	padding: 15px 0;
	list-style: none;
}

/* Sur mobile, la feuille du site anime les `<li>` du menu principal
   (opacité et décalage). Ces règles visaient aussi, par effet de bord, les
   entrées des sous-menus : on les limite aux entrées de premier niveau. */
@media (max-width: 1024px) {
	.nav-list > li {
		opacity: 0;
		transform: translateX(25px);
	}

	.nav-list.active > li {
		opacity: 1;
		transform: translateX(0);
	}

	.nav-list .dropdown-content li {
		opacity: 1;
		transform: none;
	}
}