/* PeeweePaw — flux Instagram (extension Smash Balloon, #sb_instagram) : grande carte blanche sur fond rose pâle, photos arrondies, boutons assortis. */
:root {
	--pwpi-bg: #fbeee8;
	--pwpi-line: #f2e1d8;
	--pwpi-terra: #de8b6a;
	--pwpi-accent: #b0603f;
	--pwpi-text: #555;
	--pwpi-btn: #6f8763;
	--pwpi-btn-dark: #56694c;
	--pwpi-btn-light: #edf2ea;
}

/* Ligne SiteOrigin qui contient le flux : fond rose pâle */
.panel-row-style:has(#sb_instagram) {
	background-color: var(--pwpi-bg) !important;
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

/* Le flux prend toute la largeur de la ligne (comme les 3 cartes « avantages ») : les colonnes vides de chaque côté sont masquées */
.panel-row-style:has(#sb_instagram) > .panel-grid-cell:not(:has(#sb_instagram)) {
	display: none !important;
}

.panel-row-style:has(#sb_instagram) > .panel-grid-cell:has(#sb_instagram) {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Le flux dans une carte */
#sb_instagram.sbi {
	box-sizing: border-box;
	padding: 28px 28px 24px !important;
	border: 1px solid var(--pwpi-line);
	border-radius: 16px;
	background: #fff;
}

/* En-tête : photo de profil cerclée, nom en petites majuscules, texte aéré */
#sb_instagram .sb_instagram_header {
	padding: 0 0 20px !important;
	margin: 0 !important;
}

#sb_instagram .sb_instagram_header .sbi_header_text {
	display: flex;
	align-items: center;
	gap: 18px;
}

#sb_instagram .sb_instagram_header .sbi_header_img {
	flex: 0 0 auto;
	position: relative;
	width: 72px !important;
	height: 72px !important;
	margin: 0 !important;
	padding: 3px;
	border: 2px solid var(--pwpi-terra);
	border-radius: 50%;
	box-sizing: border-box;
	background: #fff;
}

#sb_instagram .sb_instagram_header .sbi_header_img img {
	width: 100% !important;
	height: 100% !important;
	border-radius: 50%;
	object-fit: cover;
}

#sb_instagram .sb_instagram_header .sbi_feedtheme_header_text {
	padding: 0 !important;
}

#sb_instagram .sb_instagram_header h3 {
	margin: 0 0 6px !important;
	font-family: Montserrat, sans-serif;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 1.3 !important;
	letter-spacing: .88px;
	text-transform: uppercase;
	color: var(--pwpi-accent) !important;
}

#sb_instagram .sb_instagram_header h3::before {
	content: "@";
}

#sb_instagram .sb_instagram_header .sbi_bio {
	margin: 0 !important;
	font-family: Montserrat, sans-serif;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--pwpi-text) !important;
}

/* Photos arrondies, léger zoom au survol */
#sb_instagram #sbi_images .sbi_photo_wrap,
#sb_instagram #sbi_images .sbi_photo {
	border-radius: 12px;
	overflow: hidden;
}

#sb_instagram #sbi_images .sbi_photo img {
	transition: transform .35s ease;
}

#sb_instagram #sbi_images .sbi_photo:hover img,
#sb_instagram #sbi_images .sbi_photo:focus img {
	transform: scale(1.04);
}

/* Boutons verts (même vert que le bouton newsletter du pied de page) : « En voir plus » en contour, « Suivre » plein */
#sb_instagram #sbi_load {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}

#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram #sbi_load .sbi_follow_btn a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 11px 20px !important;
	border: 2px solid var(--pwpi-btn) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	font-family: Montserrat, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .88px;
	text-transform: uppercase;
	transition: background-color .15s, color .15s;
}

#sb_instagram #sbi_load .sbi_load_btn {
	background: #fff !important;
	color: var(--pwpi-btn-dark) !important;
}

#sb_instagram #sbi_load .sbi_load_btn:hover,
#sb_instagram #sbi_load .sbi_load_btn:focus {
	background: var(--pwpi-btn-light) !important;
}

#sb_instagram #sbi_load .sbi_follow_btn {
	margin: 0 !important;
}

#sb_instagram #sbi_load .sbi_follow_btn a {
	background: var(--pwpi-btn) !important;
	color: #fff !important;
}

#sb_instagram #sbi_load .sbi_follow_btn a:hover,
#sb_instagram #sbi_load .sbi_follow_btn a:focus {
	background: var(--pwpi-btn-dark) !important;
	border-color: var(--pwpi-btn-dark) !important;
}

#sb_instagram #sbi_load .sbi_follow_btn svg {
	width: 14px;
	height: 14px;
	margin: 0 !important;
}

/* Téléphone : carte moins rembourrée, en-tête en colonne */
@media screen and (max-width: 640px) {
	.panel-row-style:has(#sb_instagram) {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	#sb_instagram.sbi {
		padding: 18px 16px 16px !important;
	}

	#sb_instagram .sb_instagram_header .sbi_header_text {
		align-items: flex-start;
		gap: 14px;
	}

	#sb_instagram .sb_instagram_header .sbi_header_img {
		width: 56px !important;
		height: 56px !important;
	}

	#sb_instagram .sb_instagram_header .sbi_bio {
		font-size: 13px !important;
	}
}