/*
 * Styles globaux du front — portés verbatim du <style> global de la maquette
 * (Colonie Basses Pierres (standalone).html), avec substitution des couleurs
 * brutes par les variables de presets theme.json.
 */

*{ box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Éditeur de blocs uniquement : neutralise les clics dans l'aperçu des blocs
 * (liens, boutons, champs) pour ne pas « naviguer » en cliquant sur un bloc.
 * La classe .editor-styles-wrapper n'existe que dans l'éditeur, jamais sur le front. */
.editor-styles-wrapper a,
.editor-styles-wrapper button,
.editor-styles-wrapper input,
.editor-styles-wrapper select,
.editor-styles-wrapper textarea,
.editor-styles-wrapper [data-wp-on--click],
.editor-styles-wrapper [data-wp-on--submit] { pointer-events: none !important; }

/* Sélection de texte : accent de la variation active. */
::selection { background: var(--wp--preset--color--accent); color: #fff; }

/* Masque la barre de défilement du carrousel témoignages. */
[data-testi-track]::-webkit-scrollbar { display: none; }

/* Champs de formulaire : héritent de la police, focus visible primaire. */
input, select, button, textarea { font-family: inherit; }
input:focus, textarea:focus { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }

/* Anneau de focus clavier global (accent doré : visible sur fond clair, teal et sombre). */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ----- Animations partagées (hero, galerie, témoignages) ----- */
@keyframes bp-fade   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bp-wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes bp-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes bp-float2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(12px) rotate(8deg); } }
@keyframes bp-pop    { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes bp-pan    { 0% { background-position: 0% 0%; } 100% { background-position: 120% 120%; } }
@keyframes bp-marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Indice de zoom des images cliquables (galerie / fiche activité). */
.bp-zoomable .bp-zoomcue { opacity: 0; transform: scale(.82); transition: opacity .22s ease, transform .22s ease; }
@media (hover: hover) {
	.bp-zoomable:hover .bp-zoomcue { opacity: 1; transform: scale(1); }
}

/* Respect des préférences de mouvement réduit (RGAA / WCAG). */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
 * EN-TÊTE (parts/header.html) — porté verbatim de la maquette.
 * ============================================================ */
/* Le bloc template-part enveloppe l'en-tête ; c'est lui qui doit être sticky
 * (sinon le contexte de l'en-tête se limite à ce wrapper et le sticky ne prend pas). */
header.wp-block-template-part,
.wp-block-template-part:has(.cbp-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}
.cbp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.cbp-header__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	flex-wrap: wrap;
}
.cbp-header__inner > * { margin: 0; }
.cbp-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.cbp-header__mark {
	width: 40px; height: 40px; border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--primary);
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.cbp-header__tri {
	width: 0; height: 0;
	border-left: 9px solid transparent; border-right: 9px solid transparent;
	border-bottom: 16px solid var(--wp--preset--color--accent); display: block;
}
.cbp-header__id { display: flex; flex-direction: column; line-height: 1.15; gap: 1px; }
.cbp-header__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 18px; color: var(--wp--preset--color--contrast); white-space: nowrap;
}
.cbp-header__tagline {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
/* Navigation native, restylée pour coller à la maquette. */
.cbp-header__nav { flex: 1 1 auto; }
.cbp-header__nav .wp-block-navigation__container { gap: 14px 18px; flex-wrap: wrap; justify-content: center; }
.cbp-header__nav .wp-block-navigation-item__content {
	font-size: 15px; padding: 6px 0; color: var(--wp--preset--color--contrast);
	font-weight: 500; border-bottom: 2px solid transparent; text-decoration: none;
}
.cbp-header__nav .wp-block-navigation-item__content:hover,
.cbp-header__nav .current-menu-item > .wp-block-navigation-item__content,
.cbp-header__nav .current-menu-item > a {
	color: var(--wp--preset--color--primary); font-weight: 700;
	border-bottom-color: var(--wp--preset--color--primary);
}
.cbp-header__cta {
	flex: 0 0 auto;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-ink);
	border: none; border-radius: var(--wp--custom--radius--pill);
	padding: 11px 22px; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.cbp-header__cta:hover, .cbp-header__cta:focus-visible { transform: translateY(-1px); }

/* --- En-tête responsive --- */
/* Tablette : la navigation passe sur sa propre ligne, centrée, sous la marque + CTA. */
@media (min-width: 601px) and (max-width: 980px) {
	.cbp-header__nav { flex: 1 1 100%; order: 3; }
	.cbp-header__nav .wp-block-navigation__container { justify-content: center; }
}
/* Mobile : marque à gauche, CTA + menu (hamburger) à droite ; tagline masquée. */
@media (max-width: 600px) {
	.cbp-header__inner { padding: 12px 16px; gap: 12px; }
	.cbp-header__brand { margin-right: auto; }
	.cbp-header__cta { order: 2; padding: 9px 16px; }
	.cbp-header__nav { flex: 0 0 auto; order: 3; }
	.cbp-header__tagline { display: none; }

	/* Menu hamburger ouvert : tiroir plein hauteur, ~80 % de largeur, à droite. */
	.cbp-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0 0 0 auto;            /* haut/bas, collé à droite */
		width: 80%;
		max-width: 360px;
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		background: var(--wp--preset--color--base);
		padding: 76px 26px 32px;
		box-shadow: -10px 0 40px -12px rgba(0, 0, 0, .35);
	}
	.cbp-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
	}
	.cbp-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column; align-items: flex-start; gap: 20px;
	}
	.cbp-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 18px;
	}
}

/* ============================================================
 * PIED DE PAGE (parts/footer.html) — porté verbatim de la maquette.
 * ============================================================ */
/* Pas d'espace blanc au-dessus du pied de page / contenu / bandeaux pleine largeur
 * (gouttière blockGap par défaut). */
.wp-block-template-part,
main.wp-block-group,
.wp-block-cbp-cta,
.wp-block-cbp-bandeau-publics { margin-top: 0; margin-block-start: 0; }
.cbp-footer { background: var(--wp--preset--color--contrast); color: rgba(255, 255, 255, .8); margin-top: 0; margin-block-start: 0; }
.cbp-footer__inner {
	max-width: 1180px; margin: 0 auto; padding: 56px 28px 40px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px;
}
.cbp-footer__brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cbp-footer__mark {
	width: 36px; height: 36px; border-radius: 10px; background: var(--wp--preset--color--primary);
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.cbp-footer__tri {
	width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
	border-bottom: 14px solid var(--wp--preset--color--accent); display: block;
}
.cbp-footer__name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 18px; color: #fff; }
.cbp-footer__desc { margin: 0; font-size: 15px; max-width: 340px; color: rgba(255, 255, 255, .6); }
.cbp-footer__h { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 14px; }
.cbp-footer__contact { display: flex; flex-direction: column; gap: 11px; font-size: 15px; line-height: 1.45; align-items: flex-start; }
.cbp-footer__link { color: rgba(255, 255, 255, .8); text-decoration: none; display: inline-flex; align-items: flex-start; gap: 9px; }
.cbp-footer__link:hover { color: #fff; }
.cbp-footer__ic { color: var(--wp--preset--color--accent); flex: 0 0 auto; }
.cbp-footer__email { color: var(--wp--preset--color--accent); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.cbp-footer__email:hover { text-decoration: underline; }
.cbp-footer__muted { color: rgba(255, 255, 255, .55); }
.cbp-footer__links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cbp-footer__navlink { color: rgba(255, 255, 255, .8); font-size: 15px; text-decoration: none; }
.cbp-footer__navlink:hover { color: #fff; }
.cbp-footer__navlink--accent { color: var(--wp--preset--color--accent); font-weight: 700; }
.cbp-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.cbp-footer__bottom-inner {
	max-width: 1180px; margin: 0 auto; padding: 18px 28px; font-size: 13px; color: rgba(255, 255, 255, .5);
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px;
}
.cbp-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.cbp-footer__legal a,
.cbp-footer__legal-btn { color: rgba(255, 255, 255, .55); font-size: 13px; text-decoration: none; }
.cbp-footer__legal a:hover,
.cbp-footer__legal-btn:hover { color: #fff; }
.cbp-footer__legal-btn { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }