/*
Theme Name: Black Peat
Theme URI: https://blackpeat.fr
Author: Nicolas Fermini
Description: Thème bloc sur mesure pour The Black Peat — pub bistrot à Angers. Palette tourbe / or / crème, typographies auto-hébergées (RGPD), en-tête transparent qui se fonce au défilement, bandeau de commande fixe.
Version: 1.4.1
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blackpeat
*/

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

/* =========================================================
   Mise en page : sections bord à bord, sans interstice
   (la pleine largeur est gérée nativement par WordPress :
   <main> en flux + contenu contraint, comme Twenty Twenty-Four)
   ========================================================= */
body .wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks .entry-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }

/* Une page qui ne commence pas par un bandeau photo
   (pages légales) ne doit pas passer sous l'en-tête fixe */
.wp-site-blocks .entry-content > :first-child:not(.alignfull) { margin-block-start: 7rem; }

/* Héros : hauteur d'écran réelle (barre d'URL mobile comprise) */
.home .entry-content > .wp-block-cover:first-child { min-height: 100svh !important; }
/* Pages internes : bandeau d'en-tête sous l'en-tête fixe, sans plein écran */
.entry-content > .wp-block-cover:first-child { padding-top: 6rem; }

/* =========================================================
   En-tête : transparent, se fonce au défilement
   ========================================================= */
.bp-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: transparent;
	transition: background-color .35s ease, box-shadow .35s ease;
}
.bp-header.bp-scrolled {
	background-color: rgba(31, 17, 1, .96);
	box-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
/* Voile dégradé derrière logo et menu tant que l'en-tête est transparent :
   garantit le contraste quelle que soit la photo du héros */
.bp-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
	transition: opacity .35s ease;
}
.bp-header.bp-scrolled::before { opacity: 0; }
.admin-bar .bp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bp-header { top: 46px; } }

/* Menu burger jusqu'à 960 px (WordPress ne bascule qu'à 600 px) */
@media (min-width: 600px) and (max-width: 960px) {
	.bp-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.bp-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Menu ouvert : plein écran, fond tourbe */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	padding-top: 5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.4rem; }

/* =========================================================
   Bandeau de commande fixe en bas
   Desktop : « Commande en livraison » + 2 boutons + réseaux
   Mobile  : 3 boutons égaux sur une ligne (Appeler en tête)
   ========================================================= */
.bp-bandeau {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 998;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .3);
}
.bp-bandeau p { margin: 0; text-transform: uppercase; letter-spacing: .03em; }
.bp-bandeau .wp-block-button__link {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: .85rem;
	padding: .55rem 1.2rem;
	border-radius: 8px;
}
.bp-mobile-only { display: none !important; }
body { padding-bottom: 64px; }

/* =========================================================
   Boutons : la police choisie sur le bloc s'applique au lien
   ========================================================= */
.wp-block-button[class*="-font-family"] > .wp-block-button__link { font-family: inherit; }
.wp-block-button.has-heading-font-family > .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: .03em;
}
/* Boutons noirs posés sur une photo : filet blanc, comme l'original */
.wp-block-cover .wp-block-button > .has-noir-background-color { border: 2px solid var(--wp--preset--color--blanc); }

/* Style de bouton « Or » */
.wp-block-button.is-style-or > .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-or > .wp-block-button__link:hover,
.wp-block-button.is-style-or > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* =========================================================
   Accordéons FAQ : cases sombres à filet clair
   ========================================================= */
.wp-block-details {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	padding: .85rem 1.1rem;
	margin-bottom: -1px;
}
.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--abel);
	position: relative;
	padding-right: 1.8rem;
	min-height: 48px;
	display: flex;
	align-items: center;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: .2rem;
	top: 50%;
	width: .5em;
	height: .5em;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.wp-block-details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

/* =========================================================
   Styles de blocs sur mesure (proposés au client dans l'éditeur)
   ========================================================= */
.is-style-encadre-or {
	border: 1px solid var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.is-style-filet-or {
	border-left: 4px solid var(--wp--preset--color--primary);
	padding: .8rem 1.1rem;
}
.is-style-lien-or a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 3px solid var(--wp--preset--color--primary);
	padding-bottom: .15em;
}
.wp-block-gallery.is-style-grille-serree { gap: 8px; }
.wp-block-gallery.is-style-grille-serree .wp-block-image img { border-radius: 8px; }

/* Carrousel : une page à la fois, défilement au doigt, sans script */
.wp-block-gallery.is-style-carrousel {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 1rem;
	padding-bottom: .75rem;
	-webkit-overflow-scrolling: touch;
}
.wp-block-gallery.is-style-carrousel > .wp-block-image {
	flex: 0 0 min(780px, 88%) !important;
	width: auto !important;
	scroll-snap-align: center;
}
.wp-block-gallery.is-style-carrousel .wp-block-image img {
	height: auto !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
}

/* Intégrations (Instagram, Tally) centrées */
.bp-embed { max-width: 540px; margin-inline: auto; }
.bp-embed iframe { width: 100%; border: 0; }

/* Sections claires : liens lisibles */
.has-clair-background-color a,
.has-contrast-background-color a { color: var(--wp--preset--color--secondary); }




/* =========================================================
   Cibles tactiles (WCAG 2.2 · Apple 44 pt · Material 48 dp)
   ========================================================= */
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
footer.wp-block-template-part p a { display: inline-block; padding-block: .6rem; }

/* =========================================================
   Photos de section : cadrage homogène, jamais démesuré
   ========================================================= */
.wp-block-cover .wp-block-gallery .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: auto !important;
	flex: none !important;
}

/* =========================================================
   Mobile (90 % du trafic)
   ========================================================= */
@media (max-width: 960px) {
	/* logo à gauche, Réserver + burger à droite */
	.bp-header .wp-block-navigation { order: 3; }
	.bp-header .wp-block-buttons { margin-left: auto; }
}

@media (max-width: 781px) {
	/* Héros : la section suivante « dépasse » pour inviter au défilement */
	.home .entry-content > .wp-block-cover:first-child { min-height: 86svh !important; }
	body:not(.home) .entry-content > .wp-block-cover:first-child { min-height: 48svh !important; }

	/* En-tête compact */
	.bp-header { padding-left: 1rem !important; padding-right: 1rem !important; gap: .75rem; }
	.bp-header .wp-block-site-logo img { width: 96px; height: auto; }
	.bp-header .wp-block-button__link { padding: .5rem 1rem; font-size: .9rem; }

	/* Bandeau : une seule ligne, trois boutons égaux */
	.bp-desktop-only { display: none !important; }
	.bp-mobile-only { display: block !important; }
	.bp-bandeau { padding: 8px 10px !important; }
	.bp-bandeau-groupe, .bp-bandeau-actions { width: 100%; }
	.bp-bandeau-actions { gap: 8px !important; }
	.bp-bandeau-actions > .wp-block-button { flex: 1 1 0; min-width: 0; }
	.bp-bandeau .wp-block-button__link {
		width: 100%;
		min-height: 48px;
		font-size: .78rem;
		padding: .5rem .35rem;
		white-space: nowrap;
	}
	body { padding-bottom: 68px; }

	/* Sections image + texte : la photo toujours en premier, format 4:3 */
	.entry-content .wp-block-columns > .wp-block-column:has(> .wp-block-gallery) { order: -1; }
	.wp-block-cover .wp-block-gallery .wp-block-image img { aspect-ratio: 4 / 3; }

	/* Grilles de photos seules (événements) : côte à côte, carrées */
	.entry-content .wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) {
		flex-wrap: nowrap !important;
		gap: .5rem;
	}
	.entry-content .wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
		min-width: 0;
	}
	.entry-content .wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
		width: 100%;
		height: auto;
	}

	/* Rythme vertical */
	.wp-block-columns { gap: var(--wp--preset--spacing--40); }
	.wp-block-buttons { justify-content: center; }
	.wp-block-button__link { white-space: normal; }
	.wp-block-details { padding: .55rem .9rem; }
}

@media (max-width: 360px) {
	.bp-bandeau .wp-block-button__link { font-size: .7rem; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bp-header, .bp-header::before, .wp-block-details summary::after { transition: none; }
}


/* =========================================================
   Pied de page
   ========================================================= */
.bp-footer a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-footer a:hover, .bp-footer a:focus { color: var(--wp--preset--color--primary); }
.bp-footer h3 { margin-bottom: .6rem; letter-spacing: .04em; text-transform: uppercase; }
.bp-footer p { line-height: 1.9; }
.bp-footer .bp-footer-logo { margin-bottom: .5rem; }
.bp-footer-bas p { margin: 0; opacity: .75; }
@media (max-width: 781px) {
	.bp-footer-cols { text-align: center; gap: var(--wp--preset--spacing--50) !important; }
	.bp-footer .bp-footer-logo { margin-inline: auto; }
	.bp-footer .wp-block-social-links { justify-content: center; }
	.bp-footer-bas { justify-content: center !important; text-align: center; gap: .4rem; }
}

/* =========================================================
   Photos des sections texte + photo : même cadrage partout
   (aussi hors bandeaux photo : sections tourbe ou noires)
   ========================================================= */
.entry-content .wp-block-columns .wp-block-gallery .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: auto !important;
	flex: none !important;
	border-radius: 6px;
}
.entry-content .wp-block-columns .wp-block-gallery.is-style-carrousel .wp-block-image img { aspect-ratio: auto; border-radius: 0; }
@media (max-width: 781px) {
	.entry-content .wp-block-columns .wp-block-gallery .wp-block-image img { aspect-ratio: 4 / 3; }
}