/*
 * Bonjour Bokã V2 : compléments CSS de theme.json.
 * Uniquement ce que theme.json ne sait pas exprimer : pseudo-éléments, survol animé,
 * grain, lien étiré des cartes, mouvement réduit. Toutes les valeurs sont des tokens.
 */

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
a:where(:not(.wp-element-button)) { text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--wp--custom--focus); outline-offset: 3px; }

/* Surlignage jaune (format natif « Surligner », couleur de fond jaune) */
mark.has-inline-color:not([style*="rgba(0, 0, 0, 0)"]) {
	padding: 0 0.14em;
	border-radius: var(--wp--preset--border-radius--sm);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------- En-tête flottant ---------- */
.boka-header { z-index: var(--wp--custom--z--nav); }
.boka-header .is-style-nav-pilule { max-width: 1280px; margin-inline: auto; }
.boka-header .wp-block-navigation__submenu-container {
	border: var(--wp--custom--border-w) solid var(--wp--custom--bordure) !important;
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--franche);
	padding: var(--wp--preset--spacing--2);
}
.boka-header .wp-block-navigation-item__content { padding-block: 8px; border-bottom: 2px solid transparent; transition: border-color var(--wp--custom--duration) var(--wp--custom--ease); }
.boka-header .wp-block-navigation-item__content:hover,
.boka-header .current-menu-item > .wp-block-navigation-item__content,
.boka-header [aria-current] { border-bottom-color: var(--wp--custom--accent); }
.boka-header .wp-block-button__link { box-shadow: none; }
.boka-header .wp-block-button__link:hover { box-shadow: var(--wp--preset--shadow--franche); }

/* ---------- Boutons : l'ombre franche réagit au survol et à l'appui ---------- */
.wp-element-button,
.wp-block-button__link {
	transition: transform var(--wp--custom--duration) var(--wp--custom--ease), box-shadow var(--wp--custom--duration) var(--wp--custom--ease), background-color var(--wp--custom--duration) var(--wp--custom--ease);
	min-height: 44px;
}
.wp-element-button:hover,
.wp-block-button__link:hover { transform: translate(-2px, -2px); }
.wp-element-button:active,
.wp-block-button__link:active { transform: translate(4px, 4px); box-shadow: none; }
.wp-block-button.is-style-fantome .wp-block-button__link:hover,
.wp-block-button.is-style-fantome .wp-block-button__link:active { transform: none; box-shadow: none; }
.wp-block-button.is-style-noir .wp-block-button__link:active { background-color: var(--wp--preset--color--noir); }
.wp-block-button.is-style-pastille .wp-block-button__link { min-height: 0; }
.wp-block-button.is-style-pastille .wp-block-button__link:hover { box-shadow: var(--wp--preset--shadow--franche); }

/* Boutons sur fond sombre et dans le bandeau jaune : ombre crème ou blanche */
:where(.is-style-bandeau-sombre, .is-style-offre-noire) .wp-block-button__link { box-shadow: var(--wp--custom--ombre-sur-sombre); }
:where(.is-style-bandeau-sombre, .is-style-offre-noire) .wp-block-button__link:hover { box-shadow: var(--wp--custom--ombre-sur-sombre-haute); }
.is-style-bandeau-cta .wp-block-button__link { box-shadow: 4px 4px 0 0 var(--wp--preset--color--blanc); }
.is-style-bandeau-cta .wp-block-button__link:hover { box-shadow: 8px 8px 0 0 var(--wp--preset--color--blanc); }
:where(.is-style-bandeau-sombre, .is-style-offre-noire, .is-style-bandeau-cta) .wp-block-button__link:active { box-shadow: none; }

/* ---------- Chips, légendes ---------- */
p.is-style-chip,
p.is-style-chip-jaune { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--2); width: fit-content; }
p.is-style-chip::before,
p.is-style-chip-jaune::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--custom--accent); border: 1.5px solid var(--wp--custom--bordure); }
p.is-style-chip-jaune::before { background: var(--wp--preset--color--noir); border-color: var(--wp--preset--color--noir); }
p.is-style-avatar { flex: none; overflow: hidden; }
.is-style-bandeau-sombre :is(.is-style-legende, .is-style-chapo),
.is-style-offre-noire :is(.is-style-legende, .is-style-chapo) { color: var(--wp--preset--color--creme-200); }
:is(.is-style-offre-jaune, .is-style-chiffre-cle-jaune, .is-style-bandeau-cta) :is(.is-style-legende, .is-style-chapo) { color: var(--wp--custom--on-accent); }
.is-style-bandeau-sombre .is-style-chiffre { color: var(--wp--preset--color--jaune); }

/* ---------- Liste à coches ---------- */
ul.is-style-coches { list-style: none; display: grid; gap: var(--wp--preset--spacing--2); margin-block: 0; }
ul.is-style-coches > li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin: 0; }
ul.is-style-coches > li::before {
	content: "\2713"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
	background: var(--wp--preset--color--noir); color: var(--wp--preset--color--jaune);
	font: 700 12px/1 var(--wp--preset--font-family--inter); margin-top: 1px;
}
:where(.is-style-offre-noire, .is-style-bandeau-sombre) ul.is-style-coches > li::before { background: var(--wp--preset--color--jaune); color: var(--wp--preset--color--noir); }

/* ---------- Cartes d'offre : survol et carte entièrement cliquable (un seul lien) ---------- */
:where(.is-style-offre, .is-style-offre-jaune, .is-style-offre-noire) {
	position: relative;
	transition: transform var(--wp--custom--duration) var(--wp--custom--ease), box-shadow var(--wp--custom--duration) var(--wp--custom--ease);
}
:where(.is-style-offre, .is-style-offre-jaune, .is-style-offre-noire):hover { transform: translate(-2px, -2px); box-shadow: var(--wp--preset--shadow--haute) !important; }
:where(.is-style-offre, .is-style-offre-jaune, .is-style-offre-noire) .wp-block-buttons { margin-top: auto; }
:where(.is-style-offre, .is-style-offre-jaune, .is-style-offre-noire) .wp-block-button__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--wp--preset--border-radius--lg); }
:where(.is-style-offre, .is-style-offre-jaune, .is-style-offre-noire):has(.wp-block-button__link:focus-visible) { outline: 3px solid var(--wp--custom--focus); outline-offset: 3px; }
:where(.is-style-offre, .is-style-offre-jaune, .is-style-offre-noire) .wp-block-button__link:focus-visible { outline: none; }
.editor-styles-wrapper :where(.is-style-offre, .is-style-offre-jaune, .is-style-offre-noire) .wp-block-button__link::after { display: none; }

/* ---------- Grain discret sur les fonds noirs uniquement ---------- */
:where(.is-style-bandeau-sombre, .is-style-offre-noire) { position: relative; isolation: isolate; }
:where(.is-style-bandeau-sombre, .is-style-offre-noire)::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0.08; pointer-events: none; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Témoignage ---------- */
.wp-block-quote.is-style-temoignage { margin-inline: 0; display: grid; }
.wp-block-quote.is-style-temoignage > p:first-child { font-size: var(--wp--preset--font-size--chapo); line-height: 1.5; }
.wp-block-quote.is-style-temoignage cite { font-style: normal; }

/* ---------- FAQ (accordéon natif) ---------- */
.wp-block-accordion.is-style-faq .wp-block-accordion-item { transition: box-shadow var(--wp--custom--duration) var(--wp--custom--ease); }
.wp-block-accordion.is-style-faq .wp-block-accordion-item.is-open { box-shadow: var(--wp--preset--shadow--franche); }
.wp-block-accordion.is-style-faq .wp-block-accordion-heading { margin: 0; }
.wp-block-accordion.is-style-faq .wp-block-accordion-heading__toggle { padding-block: var(--wp--preset--spacing--5); gap: var(--wp--preset--spacing--4); }
.wp-block-accordion.is-style-faq .wp-block-accordion-heading__toggle-icon {
	flex: none; width: 32px; height: 32px; border-radius: 50%;
	background: var(--wp--custom--accent); color: var(--wp--custom--on-accent);
	border: var(--wp--custom--border-w) solid var(--wp--preset--color--noir);
	font: 700 1.125rem/1 var(--wp--preset--font-family--inter);
}

/* ---------- Communes (version dynamique, boucle de requête) ---------- */
.boka-communes .wp-block-post-template { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); list-style: none; padding: 0; }
.boka-communes .wp-block-post-title { margin: 0; font: 700 var(--wp--preset--font-size--legende)/1.2 var(--wp--preset--font-family--inter); letter-spacing: 0.08em; text-transform: uppercase; }
.boka-communes .wp-block-post-title a {
	display: inline-flex; padding: 8px 14px; text-decoration: none; color: var(--wp--custom--texte);
	background: var(--wp--custom--surface-raised); border: var(--wp--custom--border-w) solid var(--wp--custom--bordure); border-radius: var(--wp--preset--border-radius--pill);
	transition: box-shadow var(--wp--custom--duration) var(--wp--custom--ease);
}
.boka-communes .wp-block-post-title a:hover { box-shadow: var(--wp--preset--shadow--franche); }

/* ---------- Apparition des sections (sans JS, amélioration progressive) ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.boka-apparition { animation: boka-fondu-montant linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
	}
}
@keyframes boka-fondu-montant { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button, .wp-block-button__link,
	:where(.is-style-offre, .is-style-offre-jaune, .is-style-offre-noire),
	.wp-block-accordion-item, .wp-block-accordion-heading__toggle-icon { transition: none !important; }
	.wp-element-button:hover, .wp-block-button__link:hover, .wp-element-button:active, .wp-block-button__link:active,
	:where(.is-style-offre, .is-style-offre-jaune, .is-style-offre-noire):hover { transform: none !important; }
}

/* ---------- Bandeau de réassurance : engagements en pastilles ---------- */
ul.is-style-engagements { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); margin-block: 0; }
ul.is-style-engagements > li {
	display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px;
	border: var(--wp--custom--border-w) solid var(--wp--preset--color--creme-200); border-radius: var(--wp--preset--border-radius--pill);
}
ul.is-style-engagements > li::before {
	content: "\2713"; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
	background: var(--wp--preset--color--jaune); color: var(--wp--preset--color--noir); font: normal 700 12px/1 var(--wp--preset--font-family--inter);
}
:where(:not(.is-style-bandeau-sombre)) > ul.is-style-engagements > li { border-color: var(--wp--custom--bordure); }

/* ---------- Emplacements d'image vides (motifs) ---------- */
.wp-block-image img:not([src]) {
	display: block; width: 100%; min-height: 200px;
	background: repeating-linear-gradient(135deg, var(--wp--preset--color--creme-200) 0 12px, var(--wp--preset--color--creme) 12px 24px);
}

/* ---------- Pied de page ---------- */
.boka-footer .wp-block-social-links .wp-social-link { color: var(--wp--preset--color--jaune); }
.boka-footer .wp-block-navigation a { color: var(--wp--custom--texte-sur-sombre); }

/* ---------- Compatibilité : contenus de l'ancien thème (BOKÃ OPTIONS, brouillons) ----------
 * L'ancienne palette (accent, foreground, background), les anciennes tailles et ombres n'existent plus.
 * Ces alias évitent un texte invisible tant que ces contenus ne sont pas reconstruits. À retirer ensuite. */
:root {
	--wp--preset--color--accent: var(--wp--preset--color--jaune);
	--wp--preset--color--foreground: var(--wp--preset--color--noir);
	--wp--preset--color--background: var(--wp--preset--color--creme);
	--wp--preset--shadow--crisp: var(--wp--preset--shadow--franche);
	--wp--preset--shadow--outlined: var(--wp--preset--shadow--franche);
}
.has-accent-color { color: var(--wp--preset--color--jaune) !important; }
.has-foreground-color { color: var(--wp--preset--color--noir) !important; }
.has-background-color { color: var(--wp--preset--color--creme) !important; }
.has-accent-background-color { background-color: var(--wp--preset--color--jaune) !important; }
.has-foreground-background-color { background-color: var(--wp--preset--color--noir) !important; }
.has-background-background-color { background-color: var(--wp--preset--color--creme) !important; }
.has-small-font-size { font-size: 1rem !important; }
.has-medium-font-size { font-size: 1.125rem !important; }
.has-large-font-size { font-size: 1.75rem !important; }
.has-x-large-font-size { font-size: clamp(1.75rem, 3vw, 2.25rem) !important; }
.has-huge-font-size { font-size: clamp(1.875rem, 4vw, 2.75rem) !important; }