/*
 * Mac & Pen · « Bulle verte »
 *
 * Chargée seulement quand la variation de style « Bulle verte » est choisie
 * (Apparence > Éditeur > Styles). La variation change les couleurs et les polices ;
 * cette feuille change les formes : bords en bulles qui remontent, en-tête en capsule,
 * planche 3D devant une bulle de lampe à lave, crochets en bulles, cadres tout ronds,
 * infos de l'à propos dans des bulles, contact vert nuit.
 * Tout est préfixé par body.da-bulle (classe ajoutée par functions.php).
 */

body.da-bulle {
	--bulle-verte: radial-gradient(circle at 32% 28%, #f3ffe9 0 7%, #9be88a 26%, #5fcf5f 62%, #3aa652 100%);
	--bulle-claire: radial-gradient(circle at 32% 28%, #ffffff 0 9%, #e3f9da 38%, #b6eba8 100%);
	--bulle-soleil: radial-gradient(circle at 32% 28%, #fffbe0 0 9%, #ffe97a 42%, #f2c632 100%);
	--bulle-forme: 42% 58% 63% 37% / 41% 44% 56% 59%;
	--vert: var(--wp--preset--color--vert, #6fd46a);
	--blanc: #ffffff;
/* masques:début (généré par outils/bulles.py) */
	--bulle-bord-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 72' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1280V62.8L1236.7 63.9A115 39.2 0 0 0 1006.7 66.6L968.4 65A95 42.8 0 0 0 778.4 63.3A95 41.4 0 0 0 588.4 66.1A75 41.5 0 0 0 438.4 65.9L420 62.2A95 42.6 0 0 0 230 66.8A115 35.5 0 0 0 0 62.8ZM971.6 46.9a8.7 8.7 0 1 0 17.4 0a8.7 8.7 0 1 0 -17.4 0ZM419.3 35.9a8.9 8.9 0 1 0 17.8 0a8.9 8.9 0 1 0 -17.8 0ZM1227 25.9a8.4 8.4 0 1 0 16.9 0a8.4 8.4 0 1 0 -16.9 0ZM442.4 17.8a7.4 7.4 0 1 0 14.8 0a7.4 7.4 0 1 0 -14.8 0ZM68.3 13.9a5.7 5.7 0 1 0 11.3 0a5.7 5.7 0 1 0 -11.3 0Z'/%3E%3C/svg%3E");
	--bulle-bord-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 72' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1280V62.3A25 22.4 0 0 0 1230 66.5A85 44.1 0 0 0 1060 65.2A70 41.1 0 0 0 920 64.5A40 30.4 0 0 0 840 65.5A105 36.4 0 0 0 630 63.7A85 40.6 0 0 0 460 65.3A105 36.6 0 0 0 250 63.9A40 26.7 0 0 0 170 65.1A85 35.4 0 0 0 0 62.3ZM634.5 24.6a9.9 9.9 0 1 0 19.8 0a9.9 9.9 0 1 0 -19.8 0ZM444.7 22.7a4.1 4.1 0 1 0 8.2 0a4.1 4.1 0 1 0 -8.2 0ZM155.4 33.1a4.6 4.6 0 1 0 9.2 0a4.6 4.6 0 1 0 -9.2 0ZM1216.7 19.2a9 9 0 1 0 17.9 0a9 9 0 1 0 -17.9 0ZM197.2 27.5a4.1 4.1 0 1 0 8.2 0a4.1 4.1 0 1 0 -8.2 0ZM1092.2 14.7a5.5 5.5 0 1 0 10.9 0a5.5 5.5 0 1 0 -10.9 0Z'/%3E%3C/svg%3E");
	--bulle-bord-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 72' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1280V65.4A48.3 41.1 0 0 0 1183.3 66.9A65 38.6 0 0 0 1053.3 65.1A65 42.8 0 0 0 923.3 64.2A80 43.2 0 0 0 763.3 63.3L719.9 65.2A80 43.3 0 0 0 559.9 65L520 63.7A80 32.3 0 0 0 360 65.3A50 36.7 0 0 0 260 65.2A65 40.7 0 0 0 130 66.4A65 40.8 0 0 0 0 65.4ZM543.6 46.7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0ZM737 34.9a4.3 4.3 0 1 0 8.5 0a4.3 4.3 0 1 0 -8.5 0ZM749 44.9a7 7 0 1 0 14 0a7 7 0 1 0 -14 0ZM521.6 48.5a6.2 6.2 0 1 0 12.3 0a6.2 6.2 0 1 0 -12.3 0ZM1061.3 17a7.7 7.7 0 1 0 15.3 0a7.7 7.7 0 1 0 -15.3 0Z'/%3E%3C/svg%3E");
	--bulle-bord-contact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 72' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1280V62.7A91.9 34.4 0 0 0 1096.3 66.6A85 36.2 0 0 0 926.3 64.9L880.3 64.1L850 64.2A100 41.6 0 0 0 650 62.4L630 65.4A55 42.2 0 0 0 520 62.6A40 26.8 0 0 0 440 65.4A40 29.9 0 0 0 360 63.2A40 28.3 0 0 0 280 64.7A40 33 0 0 0 200 65.6A100 32.3 0 0 0 0 62.7ZM110.3 17a7.2 7.2 0 1 0 14.4 0a7.2 7.2 0 1 0 -14.4 0ZM897.5 37.5a4 4 0 1 0 8 0a4 4 0 1 0 -8 0Z'/%3E%3C/svg%3E");
/* masques:fin */
}

body.da-bulle :focus-visible {
	outline: 3px dashed var(--wp--preset--color--encre);
	outline-offset: 3px;
}

/* ---------- Bords en bulles ----------
   La bande sous chaque section garde sa couleur, percée de bulles : la section suivante
   a l'air de remonter en bulles rondes. Pas de trait. */
body.da-bulle:not(.editor-styles-wrapper) :where(.wp-block-group.is-style-mou, #hero.alignfull, #expo.alignfull, #autres.alignfull, #apropos.alignfull, #contact.alignfull) {
	--vague: var(--bulle-bord-1);
	--vague-h: 72px;
	--vague-l: 1280px;
	--vague-x: 0px;
	--trait: transparent;
}

body.da-bulle:not(.editor-styles-wrapper) #hero.alignfull {
	--vague: var(--bulle-bord-1);
	--vague-x: 0px;
	--trait: transparent;
}

body.da-bulle:not(.editor-styles-wrapper) #expo.alignfull {
	--vague: var(--bulle-bord-2);
	--vague-x: -300px;
	--trait: transparent;
}

body.da-bulle:not(.editor-styles-wrapper) #autres.alignfull {
	--vague: var(--bulle-bord-3);
	--vague-x: -620px;
	--trait: transparent;
}

/* Autour du contact, le même motif, avec moins de bulles détachées. */
body.da-bulle:not(.editor-styles-wrapper) #apropos.alignfull,
body.da-bulle:not(.editor-styles-wrapper) #contact.alignfull,
body.da-bulle:not(.editor-styles-wrapper) .encre-contact {
	--vague: var(--bulle-bord-contact);
	--trait: transparent;
}

body.da-bulle:not(.editor-styles-wrapper) #contact.alignfull,
body.da-bulle:not(.editor-styles-wrapper) .encre-contact {
	--vague-x: -470px;
}

/* L'en-tête flotte en capsule : pas de bord sous lui. */
body.da-bulle:not(.editor-styles-wrapper) .encre-entete::before,
body.da-bulle:not(.editor-styles-wrapper) .encre-entete::after {
	display: none;
}

/* Le pied de page laisse la place aux bulles du contact. */
body.da-bulle .encre-pied {
	padding-top: 92px !important;
	background-image: none;
}

/* ---------- Couleurs de fond ---------- */
body.da-bulle #apropos.alignfull {
	background-color: var(--wp--preset--color--beurre, #fff6d6) !important;
}

body.da-bulle #contact.alignfull,
body.da-bulle .encre-contact {
	background-color: var(--wp--preset--color--nuit, #1e5c3f) !important;
}

/* ---------- Textes, étiquettes, tampons, boutons ---------- */
body.da-bulle :is(h1, h2, h3, h4) mark.has-inline-color:is([style*="ff48b0" i], [style*="255, 72, 176"], [style*="--rose)"], .has-rose-background-color) {
	display: inline-block;
	padding: 0 0.2em 0.08em;
	line-height: 0.92;
	background-color: var(--wp--preset--color--rose) !important;
	background-image: none;
	border-radius: 46% 54% 58% 42% / 58% 46% 54% 42%;
}

body.da-bulle .encre-hero h1 {
	font-size: clamp(3rem, 7.2vw, 6.6rem);
	line-height: 0.95;
}

body.da-bulle .encre-intro {
	font-size: 17px;
}

body.da-bulle p.is-style-etiquette {
	padding: 9px 16px;
	border: 2px solid var(--wp--preset--color--encre);
	background: var(--wp--preset--color--gris-clair);
	color: var(--wp--preset--color--encre);
	font-weight: 600;
}

body.da-bulle .has-encre-background-color p.is-style-etiquette {
	background: var(--wp--preset--color--papier);
}

body.da-bulle p.is-style-tampon {
	border-color: var(--wp--preset--color--encre);
	background: var(--bulle-soleil);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--titre);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

body.da-bulle .wp-block-button__link:hover {
	transform: translateY(-2px) scale(1.04) rotate(-1.5deg);
	box-shadow: 0 8px 0 0 var(--vert);
}

body.da-bulle .wp-block-button.is-style-contour .wp-block-button__link {
	background: var(--blanc);
	color: var(--wp--preset--color--encre);
	border-color: var(--wp--preset--color--encre);
}

body.da-bulle .wp-block-button.encre-bouton-ombre .wp-block-button__link,
body.da-bulle .encre-entete .encre-bouton-entete .wp-block-button__link {
	box-shadow: 0 6px 0 0 var(--vert);
}

body.da-bulle .wp-block-group.is-style-encadre {
	background: var(--blanc);
	border-radius: 28px;
}

/* ---------- En-tête en capsule ---------- */
body.da-bulle .encre-entete {
	padding-top: 18px !important;
	padding-bottom: 8px !important;
}

body.da-bulle .encre-entete > .wp-block-group {
	padding: 8px 10px 8px 24px;
	background: var(--blanc);
	border: 3px solid var(--wp--preset--color--encre);
	border-radius: 999px;
	box-shadow: 0 8px 0 var(--wp--preset--color--gris-pale);
}

body.da-bulle .encre-entete .wp-block-navigation .wp-block-navigation-item__content {
	border-radius: 999px;
	text-transform: none;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
}

body.da-bulle .encre-entete .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--gris-clair);
}

/* ---------- Vitrine 3D : la planche devant une bulle de lampe à lave ---------- */
body.da-bulle .macpen-vitrine__scene {
	height: 560px;
}

body.da-bulle .macpen-vitrine__bulle {
	width: min(94%, 540px);
	background: var(--bulle-verte);
	box-shadow: inset -22px -28px 0 rgba(18, 55, 42, 0.14);
}

body.da-bulle .macpen-vitrine__ombre {
	background: radial-gradient(ellipse at center, rgba(18, 55, 42, 0.24), transparent 68%);
	-webkit-mask: none;
	mask: none;
}

body.da-bulle .macpen-vitrine__tampon {
	display: none;
}

body.da-bulle .macpen-vitrine__barre {
	padding: 8px 8px 8px 22px;
	background: var(--blanc);
	border-radius: 999px;
	box-shadow: 0 7px 0 var(--wp--preset--color--gris-pale);
}

body.da-bulle .macpen-vitrine__nom {
	text-transform: none;
}

body.da-bulle .macpen-vitrine__modes {
	gap: 4px;
	padding: 4px;
	border: 0;
	background: var(--wp--preset--color--gris-clair);
}

body.da-bulle .macpen-vitrine__modes button {
	background: transparent;
	font: 600 15px/1 var(--mp-texte);
	text-transform: none;
}

body.da-bulle .macpen-vitrine__modes button[aria-pressed="true"] {
	background: var(--mp-encre);
	color: var(--mp-papier);
}

/* ---------- Le mur : crochets en bulles, la planche choisie dans une bulle verte ---------- */
body.da-bulle .macpen-mur__clou {
	top: -27px;
	width: 26px;
	height: 26px;
	margin-left: -13px;
	background: var(--bulle-soleil);
}

body.da-bulle .macpen-mur__dessin {
	filter: drop-shadow(0 14px 0 rgba(18, 55, 42, 0.16));
}

/* La planche choisie s'allume : un halo vert, doux, qui suit sa forme. */
body.da-bulle .macpen-mur__planche.est-choisie .macpen-mur__dessin {
	filter: drop-shadow(0 0 9px rgba(111, 212, 106, 1)) drop-shadow(0 0 18px rgba(111, 212, 106, 0.5));
}

body.da-bulle .macpen-mur__etiquette {
	border-radius: 999px;
	background: var(--blanc);
	box-shadow: 0 5px 0 var(--mp-encre);
}

body.da-bulle .macpen-mur__planche.est-choisie .macpen-mur__etiquette {
	background: var(--mp-rose);
}

body.da-bulle .macpen-mur__cartel-glisse {
	align-self: flex-start;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--blanc);
	font-family: var(--mp-texte);
	font-weight: 600;
}

body.da-bulle .macpen-mur__fiche {
	padding: 10px 10px 10px 12px;
	background: var(--blanc);
	border-radius: 999px;
	box-shadow: 0 10px 0 var(--vert);
}

body.da-bulle .macpen-mur__fleche {
	width: 54px;
	height: 54px;
	background: var(--bulle-verte);
	box-shadow: none;
}

body.da-bulle .macpen-mur__fleche:hover:not(:disabled) {
	background: var(--bulle-soleil);
}

body.da-bulle .macpen-mur__nom {
	text-transform: none;
}

body.da-bulle .macpen-mur__bouton {
	font: 600 16px/1 var(--mp-texte);
	letter-spacing: 0;
	text-transform: none;
}

body.da-bulle .macpen-mur__bouton.est-plein {
	box-shadow: 0 5px 0 var(--mp-rose);
}

/* ---------- Autres trucs : cadres tout ronds ---------- */
body.da-bulle .macpen-onglet {
	font: 600 16px/1 var(--mp-texte);
	letter-spacing: 0;
	text-transform: none;
	background: var(--blanc);
}

body.da-bulle .macpen-onglet[aria-pressed="true"] {
	background: var(--vert);
	color: var(--mp-encre);
	box-shadow: 0 5px 0 var(--mp-encre);
}

body.da-bulle .macpen-truc {
	rotate: 0deg;
	background: var(--blanc);
	border-radius: 42px;
	box-shadow: 0 10px 0 -2px var(--wp--preset--color--gris-pale);
}

body.da-bulle .macpen-truc:hover,
body.da-bulle .macpen-truc:focus-within {
	box-shadow: 0 18px 0 -2px var(--vert);
}

body.da-bulle .macpen-truc__image {
	border-radius: 32px;
}

body.da-bulle .macpen-truc__titre {
	font-size: 22px;
	text-transform: none;
}

body.da-bulle .macpen-truc__prix {
	font: 500 15px/1.2 var(--mp-texte);
}

body.da-bulle .macpen-truc__lien {
	border: 3px solid var(--mp-encre);
	background: var(--vert);
	color: var(--mp-encre);
	font: 600 15px/1 var(--mp-texte);
	letter-spacing: 0;
	text-transform: none;
}

body.da-bulle .macpen-truc__lien:hover {
	box-shadow: 0 4px 0 var(--mp-encre);
}

/* ---------- À propos : la photo dans une bulle, les infos dans des bulles ---------- */
body.da-bulle .encre-portrait::before,
body.da-bulle .encre-portrait::after {
	content: "";
	position: absolute;
	z-index: 1;
	border-radius: 50%;
	pointer-events: none;
	animation: encre-monte 14s ease-in-out infinite alternate;
}

body.da-bulle .encre-portrait::before {
	left: -26px;
	top: -14px;
	width: 74px;
	height: 74px;
	background: var(--bulle-verte);
}

body.da-bulle .encre-portrait::after {
	left: 40px;
	bottom: -34px;
	width: 40px;
	height: 40px;
	background: var(--bulle-soleil);
	--monte-x: 10px;
	animation-delay: -5s;
}

body.da-bulle .encre-portrait .wp-block-image::before {
	display: none;
}

body.da-bulle .encre-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 4px solid var(--wp--preset--color--encre);
	border-radius: var(--bulle-forme);
	box-shadow: 16px 18px 0 0 var(--vert);
	animation: encre-lave 13s ease-in-out infinite alternate;
}

body.da-bulle .encre-faits {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px;
}

body.da-bulle .encre-faits > .is-style-encadre {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 150px;
	height: 150px;
	box-sizing: border-box;
	padding: 14px;
	text-align: center;
	background: var(--bulle-verte);
	border-radius: var(--bulle-forme);
	animation: encre-lave 13s ease-in-out infinite alternate;
}

body.da-bulle .encre-faits > .is-style-encadre:nth-child(2) {
	width: 166px;
	height: 166px;
	margin-top: 24px;
	background: var(--bulle-claire);
	animation-delay: -4s;
}

body.da-bulle .encre-faits > .is-style-encadre:nth-child(3) {
	width: 140px;
	height: 140px;
	margin-top: 6px;
	background: var(--bulle-soleil);
	animation-delay: -8s;
}

body.da-bulle .encre-fait-label {
	color: var(--wp--preset--color--encre);
	font-weight: 600;
}

body.da-bulle .encre-fait-valeur {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.1;
}

/* ---------- Contact vert nuit : bulles verte et jaune qui montent ---------- */
body.da-bulle:not(.editor-styles-wrapper) .encre-contact > .wp-block-columns::before {
	background: var(--bulle-verte);
	opacity: 0.4;
}

body.da-bulle:not(.editor-styles-wrapper) .encre-contact > .wp-block-columns::after {
	top: 26%;
	background: var(--bulle-claire);
	opacity: 0.22;
}

body.da-bulle .encre-contact :is(.macpen-champ input, .macpen-champ select) {
	border-color: var(--wp--preset--color--gris-pale);
	border-radius: 999px;
	background-color: rgba(244, 249, 236, 0.1);
}

body.da-bulle .encre-contact .macpen-champ textarea {
	border-color: var(--wp--preset--color--gris-pale);
	border-radius: 30px;
	background-color: rgba(244, 249, 236, 0.1);
}

body.da-bulle .encre-contact .macpen-champ select option {
	color: #12372a;
}

body.da-bulle .macpen-contact__envoyer {
	border: 3px solid var(--wp--preset--color--encre);
	background: var(--bulle-soleil);
	color: var(--wp--preset--color--encre);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
	font: 700 18px/1 var(--mp-texte);
	letter-spacing: 0;
	text-transform: none;
}

body.da-bulle .macpen-contact__envoyer:hover {
	box-shadow: 0 9px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Bulles de déco en arrière-plan ----------
   Chaque section de l'accueil passe au-dessus de la suivante (z-index décroissant) :
   ses bords en bulles débordent sur elle, et ses bulles de déco (z-index -1) restent
   derrière son contenu. */
body.da-bulle:not(.editor-styles-wrapper) #hero.alignfull {
	z-index: 6;
}

body.da-bulle:not(.editor-styles-wrapper) #expo.alignfull {
	z-index: 5;
}

body.da-bulle:not(.editor-styles-wrapper) #autres.alignfull {
	z-index: 4;
}

body.da-bulle:not(.editor-styles-wrapper) #apropos.alignfull {
	z-index: 3;
}

body.da-bulle:not(.editor-styles-wrapper) #contact.alignfull,
body.da-bulle:not(.editor-styles-wrapper) .encre-contact {
	z-index: 2;
}

body.da-bulle:not(.editor-styles-wrapper) :is(
	.encre-hero > .wp-block-columns,
	#expo > .encre-entete-section,
	.macpen-mur,
	#autres > .encre-entete-section,
	#autres .macpen-autres,
	#apropos > .wp-block-columns
)::before,
body.da-bulle:not(.editor-styles-wrapper) :is(
	.encre-hero > .wp-block-columns,
	#expo > .encre-entete-section,
	.macpen-mur,
	#autres > .encre-entete-section
)::after {
	content: "";
	position: absolute;
	z-index: -1;
	aspect-ratio: 1;
	border-radius: var(--bulle-forme);
	pointer-events: none;
	animation: encre-lave 15s ease-in-out infinite alternate, encre-monte 22s ease-in-out infinite alternate;
}

/* Haut de page : un grand nuage pâle en haut à droite, une bulle qui monte au milieu. */
body.da-bulle:not(.editor-styles-wrapper) .encre-hero > .wp-block-columns::before {
	right: -170px;
	top: -150px;
	width: 560px;
	background: var(--bulle-claire);
	opacity: 0.7;
}

body.da-bulle:not(.editor-styles-wrapper) .encre-hero > .wp-block-columns::after {
	left: 44%;
	bottom: 70px;
	width: 96px;
	background: var(--bulle-claire);
	animation-delay: -6s, -9s;
}

/* L'expo : un nuage pâle à gauche, une bulle verte en haut à droite… */
body.da-bulle:not(.editor-styles-wrapper) #expo > .encre-entete-section::before {
	left: -130px;
	top: 220px;
	width: 380px;
	background: var(--bulle-claire);
	opacity: 0.8;
}

body.da-bulle:not(.editor-styles-wrapper) #expo > .encre-entete-section::after {
	right: 6%;
	top: 170px;
	width: 84px;
	background: var(--bulle-verte);
	opacity: 0.85;
	animation-delay: -3s, -14s;
}

/* …et trois bulles qui flottent entre les planches. */
body.da-bulle:not(.editor-styles-wrapper) .macpen-mur::before {
	left: 31%;
	top: 22%;
	width: 46px;
	background: var(--bulle-soleil);
	animation-delay: -5s, -2s;
}

body.da-bulle:not(.editor-styles-wrapper) .macpen-mur::after {
	right: 12%;
	bottom: 26%;
	width: 70px;
	background: var(--bulle-verte);
	opacity: 0.8;
	--monte-x: -20px;
	animation-delay: -10s, -7s;
}

body.da-bulle:not(.editor-styles-wrapper) #expo .macpen-mur__fiche::after {
	content: "";
	position: absolute;
	left: -30px;
	top: -26px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bulle-claire);
	pointer-events: none;
	animation: encre-monte 9s ease-in-out infinite alternate;
	--monte-x: -8px;
}

/* Autres trucs : une bulle jaune en haut à droite, une bulle claire en bas à gauche. */
body.da-bulle:not(.editor-styles-wrapper) #autres > .encre-entete-section::after {
	right: 3%;
	top: 150px;
	width: 150px;
	background: var(--bulle-soleil);
	opacity: 0.55;
	--monte-x: -18px;
}

body.da-bulle:not(.editor-styles-wrapper) #autres .macpen-autres::before {
	left: -70px;
	bottom: 40px;
	width: 130px;
	background: var(--bulle-claire);
	animation-delay: -8s, -11s;
}

/* À propos : un nuage pâle derrière le texte. */
body.da-bulle:not(.editor-styles-wrapper) #apropos > .wp-block-columns::before {
	right: -120px;
	top: 10%;
	width: 340px;
	background: var(--bulle-claire);
	opacity: 0.6;
	animation-delay: -4s, -16s;
}

/* ---------- Pages produit et catalogue ---------- */
body.da-bulle .encre-carte .wp-block-post-featured-image img,
body.da-bulle .encre-fiche .wp-block-post-featured-image img {
	border-radius: 36px;
}

body.da-bulle .macpen-fiche__bouton {
	font: 600 17px/1 var(--mp-texte);
	letter-spacing: 0;
	text-transform: none;
	box-shadow: 0 6px 0 var(--vert);
}

/* ---------- Téléphone ---------- */
@media (max-width: 600px) {
	body.da-bulle:not(.editor-styles-wrapper) :where(.wp-block-group.is-style-mou, #hero.alignfull, #expo.alignfull, #autres.alignfull, #apropos.alignfull, #contact.alignfull) {
		--vague-h: 44px;
		--vague-l: 780px;
	}

	body.da-bulle .encre-entete > .wp-block-group {
		padding: 6px 8px 6px 16px;
	}

	body.da-bulle .macpen-mur__fiche {
		border-radius: 34px;
	}

	body.da-bulle .encre-faits > .is-style-encadre {
		width: 118px;
		height: 118px;
	}

	body.da-bulle .encre-faits > .is-style-encadre:nth-child(2) {
		width: 128px;
		height: 128px;
		margin-top: 16px;
	}

	body.da-bulle .encre-faits > .is-style-encadre:nth-child(3) {
		width: 112px;
		height: 112px;
	}

	body.da-bulle .encre-fait-valeur {
		font-size: 16px;
	}

	body.da-bulle .macpen-vitrine__scene {
		height: 430px;
	}

	body.da-bulle .encre-pied {
		padding-top: 64px !important;
	}

	body.da-bulle:not(.editor-styles-wrapper) .encre-hero > .wp-block-columns::before {
		right: -150px;
		top: -110px;
		width: 300px;
	}

	body.da-bulle:not(.editor-styles-wrapper) #expo > .encre-entete-section::before,
	body.da-bulle:not(.editor-styles-wrapper) #apropos > .wp-block-columns::before {
		width: 200px;
	}

	body.da-bulle:not(.editor-styles-wrapper) #autres > .encre-entete-section::after {
		width: 90px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.da-bulle:not(.editor-styles-wrapper) :is(.encre-hero > .wp-block-columns, #expo > .encre-entete-section, .macpen-mur, #autres > .encre-entete-section, #autres .macpen-autres, #apropos > .wp-block-columns)::before,
	body.da-bulle:not(.editor-styles-wrapper) :is(.encre-hero > .wp-block-columns, #expo > .encre-entete-section, .macpen-mur, #autres > .encre-entete-section, #expo .macpen-mur__fiche)::after,
	body.da-bulle .encre-portrait img,
	body.da-bulle .encre-portrait::before,
	body.da-bulle .encre-portrait::after,
	body.da-bulle .encre-faits > .is-style-encadre {
		animation: none;
	}
}