/*
Theme Name: Il était une fois…
Theme URI: https://www.iletaitunefoismescolos.fr
Author: Association Il était une fois…
Description: Thème bloc du site de l’association, dans l’esprit des plaquettes : dessins au feutre et à l’aquarelle, taches de peinture, titres en capitales manuscrites (Amatic SC), notes au feutre (Gochi Hand), texte en Figtree. Polices et dessins embarqués, aucune ressource distante. Deux ambiances : Aquarelle et Veillée.
Version: 2.3.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: il-etait-une-fois
Tags: block-patterns, full-site-editing, style-variations, custom-colors, editor-style
*/


/* =================================================================================================================
   L'esprit des plaquettes : du papier blanc, des dessins au feutre et à l'aquarelle, des taches de peinture sous les
   textes, des titres en capitales manuscrites, des confettis. Les couleurs viennent de theme.json ; les taches
   tremblent grâce au filtre SVG #iuf-aquarelle posé dans l'en-tête (parts/header.html).
   ================================================================================================================= */
:root {
	--iuf-encre: var(--wp--preset--color--contrast);
	--iuf-main: var(--wp--custom--radius--control, 255px 18px 225px 18px / 18px 225px 18px 255px);
	--iuf-t1: var(--wp--preset--color--tuile-1);
	--iuf-t2: var(--wp--preset--color--tuile-2);
	--iuf-t3: var(--wp--preset--color--tuile-3);
	--iuf-t4: var(--wp--preset--color--tuile-4);
	--iuf-t5: var(--wp--preset--color--tuile-5);
	--iuf-manuscrite: var(--wp--preset--font-family--manuscrite, "Gochi Hand", cursive);
	--iuf-amatic: var(--wp--preset--font-family--amatic, "Amatic SC", cursive);
	/* Grain de l'aquarelle : de fines taches claires dans la couleur. */
	--iuf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.2 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	/* Pluie de confettis roses et petits coups de pinceau bleus, comme sur les plaquettes 2020 et 2023. */
	--iuf-confettis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120' fill='%23e98aa6'%3E%3Ccircle cx='12' cy='20' r='2.6'/%3E%3Ccircle cx='28' cy='9' r='2'/%3E%3Ccircle cx='40' cy='28' r='3'/%3E%3Ccircle cx='22' cy='42' r='2.2'/%3E%3Ccircle cx='55' cy='14' r='2.4'/%3E%3Ccircle cx='60' cy='40' r='1.8'/%3E%3Ccircle cx='75' cy='26' r='2.8'/%3E%3Ccircle cx='44' cy='56' r='2.3'/%3E%3Ccircle cx='88' cy='12' r='1.9'/%3E%3Ccircle cx='92' cy='44' r='2.5'/%3E%3Ccircle cx='70' cy='62' r='2'/%3E%3Ccircle cx='108' cy='28' r='2.2'/%3E%3Ccircle cx='30' cy='70' r='1.7'/%3E%3Ccircle cx='58' cy='82' r='2.4'/%3E%3Ccircle cx='86' cy='74' r='1.8'/%3E%3Ccircle cx='118' cy='56' r='2.6'/%3E%3Ccircle cx='104' cy='90' r='2'/%3E%3Ccircle cx='132' cy='40' r='1.8'/%3E%3Ccircle cx='14' cy='92' r='2.2'/%3E%3Ccircle cx='140' cy='76' r='2.3'/%3E%3C/svg%3E");
	--iuf-pinceau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%2393bfe4' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M14 18l9 4M40 10l8 6M64 22l10 2M26 40l9 6M52 44l8 3M80 38l9 7M18 66l9 3M44 70l8 6M70 62l10 4M96 58l7 6M30 92l9 4M58 94l8 5M86 86l9 3'/%3E%3C/svg%3E");
	--iuf-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 42' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 36C33 38 17 30 10 9'/%3E%3Cpath d='M3 15l7-8 8 6'/%3E%3C/svg%3E");
}

body {
	-webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3) {
	text-wrap: balance;
}
::selection {
	background: var(--iuf-t2);
	color: var(--iuf-encre);
}
:where(a):focus-visible,
:where(button):focus-visible {
	outline: 2px dashed var(--iuf-encre);
	outline-offset: 4px;
	border-radius: 4px;
}
/* Rien de décoratif ne doit faire défiler la page de côté. */
.wp-site-blocks {
	overflow-x: clip;
}

/* -----------------------------------------------------------------------------------------------------------------
   Briques réutilisables
   ----------------------------------------------------------------------------------------------------------------- */

/* Tache d'aquarelle sous un bloc (style de groupe « Tache d'aquarelle », ou classe iuf-tache). La couleur suit
   l'ordre (rose, jaune, sauge, ciel, pêche) ou se force avec iuf-c1 à iuf-c5. */
.iuf-tache,
.is-style-tache {
	--iuf-c: var(--iuf-t1);
	position: relative;
	isolation: isolate;
	padding: clamp(1.5rem, 3.5vw, 2.4rem) clamp(1.4rem, 3.5vw, 2.4rem) !important;
}
.iuf-tache::before,
.is-style-tache::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--iuf-grain), var(--iuf-c);
	border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
	box-shadow: inset 0 0 18px 2px color-mix(in srgb, var(--iuf-c) 70%, #6b4a3a);
	filter: url(#iuf-aquarelle);
	opacity: 0.88;
}
:is(.iuf-tache, .is-style-tache):nth-child(5n+2) { --iuf-c: var(--iuf-t2); }
:is(.iuf-tache, .is-style-tache):nth-child(5n+3) { --iuf-c: var(--iuf-t3); }
:is(.iuf-tache, .is-style-tache):nth-child(5n+4) { --iuf-c: var(--iuf-t4); }
:is(.iuf-tache, .is-style-tache):nth-child(5n+5) { --iuf-c: var(--iuf-t5); }
:is(.iuf-tache, .is-style-tache):nth-child(even)::before { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; }
:is(.iuf-tache, .is-style-tache):nth-child(3n)::before { border-radius: 40% 60% 48% 52% / 60% 40% 60% 40%; }
.iuf-c1 { --iuf-c: var(--iuf-t1) !important; }
.iuf-c2 { --iuf-c: var(--iuf-t2) !important; }
.iuf-c3 { --iuf-c: var(--iuf-t3) !important; }
.iuf-c4 { --iuf-c: var(--iuf-t4) !important; }
.iuf-c5 { --iuf-c: var(--iuf-t5) !important; }

/* Cadre en pointillés, comme les encadrés d'informations des plaquettes. */
.is-style-pointilles {
	border: 2px dotted color-mix(in srgb, var(--iuf-encre) 55%, transparent);
	padding: 1.25rem 1.5rem !important;
}

/* Note au feutre, penchée. */
.iuf-note {
	font-family: var(--iuf-manuscrite);
	font-size: 1.45rem;
	line-height: 1.15;
	color: var(--wp--preset--color--encre-rouge);
	display: inline-block;
	transform: rotate(-3deg);
	margin: 0;
}
.iuf-note-fleche {
	position: relative;
	margin-top: 1.4rem !important;
	padding-left: 58px;
}
.iuf-note-fleche::before {
	content: "";
	position: absolute;
	left: 0;
	top: -22px;
	width: 50px;
	height: 40px;
	background: currentColor;
	-webkit-mask: var(--iuf-fleche) center / contain no-repeat;
	mask: var(--iuf-fleche) center / contain no-repeat;
}

/* Pastille d'âge [6-10 ans] et tampon « Nouveau ! ». */
.iuf-age {
	display: inline-block;
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--wp--preset--color--encre-rouge);
	padding: 0.15rem 0.5rem;
	transform: rotate(-2deg);
}
.iuf-tampon {
	display: inline-block;
	font-family: var(--iuf-amatic);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wp--preset--color--encre-rouge);
	border: 2px solid currentColor;
	padding: 0.2rem 0.5rem 0.1rem;
	transform: rotate(-12deg);
	background: color-mix(in srgb, var(--iuf-t2) 55%, transparent);
}

/* Titres en couleur d'encre, comme « L'ASSOCIATION » en rouge, « MODE DE VIE » en bleu… */
.iuf-encre-bleu { color: var(--wp--preset--color--encre-bleu) !important; }
.iuf-encre-rouge { color: var(--wp--preset--color--encre-rouge) !important; }
.iuf-encre-vert { color: var(--wp--preset--color--encre-vert) !important; }
.iuf-encre-orange { color: var(--wp--preset--color--encre-orange) !important; }
.iuf-encre-violet { color: var(--wp--preset--color--encre-violet) !important; }

/* Pointillés sous un titre (les dates des plaquettes). */
.iuf-pointilles-dessous {
	padding-bottom: 0.35rem;
	background: radial-gradient(circle, currentColor 1.1px, transparent 1.4px) left bottom / 9px 4px repeat-x;
}

/* Confettis et coups de pinceau, à poser sur un groupe. */
.iuf-confettis,
.iuf-pinceau {
	position: relative;
}
.iuf-confettis::after,
.iuf-pinceau::after {
	content: "";
	position: absolute;
	width: clamp(110px, 16vw, 190px);
	aspect-ratio: 4 / 3;
	background: var(--iuf-confettis) center / contain no-repeat;
	pointer-events: none;
	z-index: 0;
	opacity: 0.85;
}
.iuf-confettis::after { top: 4%; right: 2%; }
.iuf-pinceau::after { background-image: var(--iuf-pinceau); bottom: 6%; left: 1%; aspect-ratio: 1; }

/* Les dessins sont détourés (WebP transparents) : posés tels quels, sans fondu ni mélange. */
.iuf-objet img {
	display: block;
}

/* -----------------------------------------------------------------------------------------------------------------
   Boutons : bord tracé à la main.
   ----------------------------------------------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	border: 2px solid var(--iuf-encre) !important;
	transition: transform 0.15s ease, background-color 0.15s ease;
	text-decoration: none;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: rotate(-1.5deg) scale(1.03);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--iuf-encre);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--iuf-t2);
	color: var(--iuf-encre);
}
.iuf-bouton-soleil .wp-block-button__link {
	background: var(--wp--preset--color--vif);
	color: var(--wp--preset--color--on-vif);
	white-space: nowrap;
}
.iuf-bouton-soleil .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--vif) 80%, white);
	color: var(--wp--preset--color--on-vif);
}

/* -----------------------------------------------------------------------------------------------------------------
   En-tête et pied de page
   ----------------------------------------------------------------------------------------------------------------- */
.iuf-entete {
	padding-top: 0.9rem;
	padding-bottom: 1.1rem;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--iuf-encre) 45%, transparent) 1.1px, transparent 1.5px);
	background-size: 10px 4px;
	background-repeat: repeat-x;
	background-position: left bottom;
}
.iuf-entete .wp-block-site-title a,
.iuf-pied .wp-block-site-title a {
	color: inherit;
}
.iuf-entete .wp-block-site-logo img {
	transition: transform 0.3s ease;
}
.iuf-entete .wp-block-site-logo:hover img {
	transform: rotate(-10deg);
}
.iuf-entete .wp-block-navigation-item__content {
	padding: 0.3rem 0.1rem;
	background: linear-gradient(var(--iuf-t2), var(--iuf-t2)) left 85% / 0 45% no-repeat;
	transition: background-size 0.25s ease;
}
.iuf-entete .wp-block-navigation-item__content:hover,
.iuf-entete .wp-block-navigation-item__content[aria-current="page"] {
	background-size: 100% 45%;
}
.iuf-entete .wp-block-navigation__submenu-container {
	border: 2px solid var(--iuf-encre) !important;
	border-radius: 14px 4px 16px 6px;
	padding: 0.4rem !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--iuf-encre) !important;
}

.iuf-pied a {
	color: inherit;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.iuf-pied a:hover {
	text-decoration-color: currentColor;
}
.iuf-pied-titre {
	font-family: var(--iuf-amatic);
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1;
	margin-bottom: 0.4rem;
}
.iuf-pied ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.iuf-pied li + li {
	margin-top: 0.3rem;
}
.iuf-pied-bas {
	background-image: radial-gradient(circle, color-mix(in srgb, currentColor 45%, transparent) 1.1px, transparent 1.5px);
	background-size: 10px 4px;
	background-repeat: repeat-x;
	background-position: left top;
}
/* Les sapins et la maison à l'aquarelle, posés au-dessus du pied. */
.iuf-sapins {
	margin: var(--wp--preset--spacing--40) auto -6px !important;
	max-width: 620px;
}
.iuf-sapins img {
	width: 100%;
	height: auto;
	display: block;
}

/* -----------------------------------------------------------------------------------------------------------------
   Accueil
   ----------------------------------------------------------------------------------------------------------------- */
.iuf-hero h1 {
	margin-top: 0.4rem;
	line-height: 0.98;
}
.iuf-hero .iuf-chapo {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	max-width: 34rem;
}
.iuf-surtitre {
	font-family: var(--iuf-manuscrite);
	font-size: 1.4rem;
	color: var(--wp--preset--color--encre-bleu);
	margin: 0;
}
.iuf-reve img {
	width: 100%;
	height: auto;
	display: block;
}

/* « Cet été, on fait quoi ? » : un dessin par thème, sur une tache, et son nom en capitales manuscrites. */
.iuf-themes {
	gap: clamp(1.5rem, 4vw, 3.25rem) clamp(1rem, 3.5vw, 2.75rem) !important;
	align-items: flex-start !important;
}
.iuf-theme {
	--iuf-c: var(--iuf-t1);
	position: relative;
	isolation: isolate;
	width: clamp(130px, 22vw, 176px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
}
.iuf-theme::before {
	content: "";
	position: absolute;
	inset: 4% -6% 22% -6%;
	z-index: -1;
	background: var(--iuf-grain), var(--iuf-c);
	border-radius: 52% 48% 58% 42% / 46% 56% 44% 54%;
	box-shadow: inset 0 0 16px 2px color-mix(in srgb, var(--iuf-c) 70%, #6b4a3a);
	filter: url(#iuf-aquarelle);
	transition: transform 0.4s ease;
}
.iuf-theme:nth-child(5n+2) { --iuf-c: var(--iuf-t2); margin-top: 1.75rem; }
.iuf-theme:nth-child(5n+3) { --iuf-c: var(--iuf-t3); }
.iuf-theme:nth-child(5n+4) { --iuf-c: var(--iuf-t4); margin-top: 1.75rem; }
.iuf-theme:nth-child(5n+5) { --iuf-c: var(--iuf-t5); }
.iuf-theme:nth-child(even)::before { border-radius: 44% 56% 40% 60% / 58% 42% 58% 42%; }
.iuf-theme:hover::before { transform: rotate(-6deg) scale(1.05); }
.iuf-theme .wp-block-image {
	margin: 0;
	height: clamp(120px, 18vw, 160px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}
.iuf-theme .wp-block-image img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
}
.iuf-theme:hover .wp-block-image { transform: rotate(-5deg) translateY(-4px); }
.iuf-theme-nom {
	font-family: var(--iuf-amatic);
	font-weight: 700;
	font-size: 2.1rem;
	line-height: 1;
	margin: 0.2rem 0 0;
	color: var(--iuf-encre);
}

/* Les quatre portes d'entrée : un dessin, un titre, une phrase ; toute la tache est cliquable. */
.iuf-portes {
	gap: clamp(1.5rem, 3vw, 2.25rem) !important;
}
.iuf-porte {
	text-align: center;
}
.iuf-porte .wp-block-image {
	margin: 0 auto 0.4rem;
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.iuf-porte .wp-block-image img {
	max-height: 100%;
	width: auto;
	transition: transform 0.3s ease;
}
.iuf-porte:hover .wp-block-image img,
.iuf-porte:focus-within .wp-block-image img {
	transform: rotate(-6deg) scale(1.06);
}
.iuf-porte h3 {
	margin: 0 0 0.3rem;
	font-size: 2.3rem;
}
.iuf-porte h3 a {
	color: var(--iuf-encre);
	text-decoration: none;
}
.iuf-porte h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.iuf-porte h3 a:focus-visible {
	outline: none;
}
.iuf-porte:focus-within::before {
	outline: 2px dashed var(--iuf-encre);
	outline-offset: 6px;
}
.iuf-porte p {
	margin: 0;
}

/* La vie à la colo : le grand dessin, légèrement de travers, et le texte des plaquettes. */
.iuf-grand-dessin img {
	border: 2px solid var(--iuf-encre);
	border-radius: 6px 14px 8px 18px;
	transform: rotate(-1.5deg);
	box-shadow: 0 18px 30px -18px rgb(43 45 58 / 0.45);
}
.iuf-grand-dessin figcaption {
	font-family: var(--iuf-manuscrite);
	font-size: 1.3rem;
	color: var(--wp--preset--color--muted);
	transform: rotate(-1.5deg);
	margin-top: 0.8rem;
}
.iuf-liste-colo {
	list-style: none;
	padding-left: 0;
}
.iuf-liste-colo li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.7rem;
}
.iuf-liste-colo li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50% 45% 55% 48%;
	background: var(--iuf-grain), var(--iuf-t2);
	filter: url(#iuf-aquarelle);
}
.iuf-liste-colo li:nth-child(5n+2)::before { background-color: var(--iuf-t1); }
.iuf-liste-colo li:nth-child(5n+3)::before { background-color: var(--iuf-t3); }
.iuf-liste-colo li:nth-child(5n+4)::before { background-color: var(--iuf-t4); }
.iuf-liste-colo li:nth-child(5n+5)::before { background-color: var(--iuf-t5); }

/* Chiffres clés */
.iuf-chiffre {
	margin: 0;
}
.iuf-chiffre strong {
	display: block;
	font-family: var(--iuf-amatic);
	font-weight: 700;
	font-size: clamp(2.6rem, 5vw, 3.4rem);
	line-height: 0.95;
}
.iuf-chiffre:nth-child(1) strong { color: var(--wp--preset--color--encre-rouge); }
.iuf-chiffre:nth-child(2) strong { color: var(--wp--preset--color--encre-bleu); }
.iuf-chiffre:nth-child(3) strong { color: var(--wp--preset--color--encre-vert); }
.iuf-chiffre span {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
}

.iuf-lien-fleche a {
	font-weight: 700;
	text-decoration: none;
	background: linear-gradient(var(--iuf-t2), var(--iuf-t2)) left 88% / 100% 40% no-repeat;
}
.iuf-lien-fleche a::after {
	content: " →";
}

/* Actualités : pas de cadre, la date au feutre bleu, le titre en capitales manuscrites. */
.iuf-actus .wp-block-post-template {
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.iuf-actu {
	padding-top: 1rem;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--iuf-encre) 45%, transparent) 1.1px, transparent 1.5px);
	background-size: 10px 4px;
	background-repeat: repeat-x;
	background-position: left top;
}
.iuf-actus .wp-block-post-title {
	margin: 0.2rem 0 0.4rem;
	font-size: 2.1rem;
}
.iuf-actus .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
}
.iuf-actus .wp-block-post-featured-image img {
	border-radius: 6px 14px 8px 18px;
	border: 2px solid var(--iuf-encre);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Infos pratiques, comme au dos des plaquettes. */
.iuf-infos h3 {
	font-size: 2.4rem;
	margin-bottom: 0.4rem;
}
.iuf-infos p {
	margin-top: 0.3rem;
}
.iuf-tel {
	font-family: var(--iuf-amatic);
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1;
	margin: 0.2rem 0 !important;
}
.iuf-tel a {
	color: var(--iuf-encre);
	text-decoration: none;
}

/* -----------------------------------------------------------------------------------------------------------------
   Pages et articles
   ----------------------------------------------------------------------------------------------------------------- */
/* Le titre de page sur une tache d'aquarelle (y compris le H1 placé en tête du contenu des pages héritées). */
.iuf-titre-page .wp-block-post-title,
.iuf-titre-page .wp-block-query-title,
.wp-block-post-content > h1.wp-block-heading:first-child {
	position: relative;
	isolation: isolate;
	display: block;
	width: fit-content;
	max-width: 100%;
	padding: 0.15em 0.45em 0.05em;
	margin-left: -0.45em;
	font-family: var(--iuf-amatic) !important;
	font-weight: 700 !important;
	font-style: normal !important;
	font-size: var(--wp--preset--font-size--xx-large) !important;
	text-transform: none !important;
	line-height: 1;
	color: var(--iuf-encre) !important;
}
.iuf-titre-page .wp-block-post-title::before,
.iuf-titre-page .wp-block-query-title::before,
.wp-block-post-content > h1.wp-block-heading:first-child::before {
	content: "";
	position: absolute;
	inset: 18% -2% 0 0;
	z-index: -1;
	background: var(--iuf-grain), var(--iuf-t2);
	border-radius: 48% 52% 40% 60% / 60% 46% 54% 40%;
	filter: url(#iuf-aquarelle);
	opacity: 0.9;
}
.wp-block-post-content > h1.wp-block-heading:first-child strong {
	font-weight: inherit;
}
/* Les titres hérités d'Astra (tailles et polices en ligne) reprennent la charte. */
.wp-block-post-content :is(h2, h3, h4)[style] {
	font-family: var(--iuf-amatic) !important;
	font-weight: 700 !important;
}
.wp-block-post-content :is(h2, h3) {
	margin-top: 2.2rem;
}
.wp-block-post-content iframe[id^="tuilage-"] {
	width: 100%;
	border: 0;
	display: block;
}
.wp-block-image.is-style-polaroid img {
	background: #fff;
	padding: 10px 10px 40px;
	box-shadow: 0 10px 24px rgb(0 0 0 / 0.14);
	transform: rotate(-2.5deg);
}
.wp-block-image.is-style-polaroid figcaption {
	font-family: var(--iuf-manuscrite);
	font-size: 1.3rem;
	color: #2a2a2a;
	position: relative;
	margin-top: -36px;
	transform: rotate(-2.5deg);
	text-align: center;
}
.wp-block-search__input {
	border-radius: 10px;
	border: 2px solid var(--iuf-encre);
	padding: 0.7rem 0.9rem;
}

@media (max-width: 781px) {
	.iuf-entete .iuf-bouton-soleil {
		display: none;
	}
	.iuf-theme:nth-child(n) {
		margin-top: 0;
	}
	.iuf-confettis::after,
	.iuf-pinceau::after {
		opacity: 0.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Le SVG des filtres est le premier enfant de l'en-tête : il ne doit pas décaler la ligne suivante. */
.iuf-entete > .iuf-filtres + * {
	margin-block-start: 0 !important;
}

/* Un mot passé au surligneur aquarelle (classe iuf-surligne, ou Surlignage dans l'éditeur). */
mark,
.iuf-surligne {
	background: linear-gradient(transparent 45%, color-mix(in srgb, var(--iuf-t2) 90%, transparent) 45%, color-mix(in srgb, var(--iuf-t2) 90%, transparent) 92%, transparent 92%);
	color: inherit;
	padding: 0 0.1em;
}

/* -----------------------------------------------------------------------------------------------------------------
   Les bonhommes haricots du grand dessin, posés çà et là (images à la classe iuf-haricot, placées par iuf-h-<lieu>).
   Le bord du contenu : max(16px, 50% - 600px) depuis le bord de la section.
   ----------------------------------------------------------------------------------------------------------------- */
.iuf-avec-haricot,
.iuf-hero,
.iuf-pinceau {
	position: relative;
}
.iuf-haricot {
	--iuf-bord: max(16px, calc(50% - 600px));
	position: absolute;
	z-index: 2;
	margin: 0 !important;
	pointer-events: none;
	max-width: none !important;
}
.iuf-haricot img {
	width: 100%;
	height: auto;
	display: block;
	transform-origin: 50% 100%;
	animation: iuf-dandine 4.5s ease-in-out infinite;
}
@keyframes iuf-dandine {
	0%, 100% { rotate: -3deg; }
	50% { rotate: 3deg; }
}
.iuf-h-hero { width: 112px; bottom: 34px; left: calc(50% + 10px); }
.iuf-h-themes { width: 128px; top: 18px; right: var(--iuf-bord); }
.iuf-h-themes img { animation-duration: 3.2s; }
.iuf-h-portes { width: 158px; top: 6px; left: var(--iuf-bord); }
.iuf-h-vie { width: 96px; bottom: 26px; right: var(--iuf-bord); }
.iuf-h-actus { width: 64px; top: 38px; right: calc(var(--iuf-bord) + 210px); }
.iuf-h-404 { width: 170px; bottom: 0; right: var(--iuf-bord); }
.iuf-h-404 img { animation: none; }

@media (max-width: 1100px) {
	.iuf-h-hero { left: auto; right: var(--iuf-bord); bottom: 8px; width: 88px; }
	.iuf-h-actus { display: none; }
}
@media (max-width: 781px) {
	.iuf-haricot { width: 72px; }
	.iuf-h-hero, .iuf-h-vie { display: none; }
	.iuf-h-themes { top: 0; width: 80px; }
	.iuf-h-portes { top: 0; width: 96px; }
	.iuf-h-404 { position: static; width: 120px; margin: 2rem auto 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
	.iuf-haricot img { animation: none; }
}

/* Huit thèmes : la couleur des taches tourne sur cinq, et les dessins larges (panneau, scieuse) gardent leur place. */
.iuf-themes { max-width: 1000px; margin-inline: auto !important; }
.iuf-theme-randonnee .wp-block-image img,
.iuf-theme-bricolage .wp-block-image img { max-width: 118%; }
/* L'introduction des thèmes reste au centre, loin du bonhomme à la casquette. */
.iuf-pinceau > p.has-text-align-center { max-width: 620px !important; margin-inline: auto !important; }