/* Popup contact Poupette. Tout est scopé sur #pc-contact (leçon TPB : jamais de styles globaux).
   Visibilité pilotée uniquement par la classe pc-contact--ouvert : rien d'ouvert au chargement. */

#pc-contact {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99990;
	font-size: 15px;
	line-height: 1.45;
	color: #305f72;
}

/* ── Le bouton rond ─────────────────────────────────────────────────────── */

#pc-contact .pc-contact__bouton {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border: 0;
	border-radius: 50%;
	background: #dd6688;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(48, 95, 114, .3);
	transition: box-shadow .15s ease, background .15s ease;
	animation: pc-contact-respire 3.4s ease-in-out infinite;
}

#pc-contact .pc-contact__bouton:hover {
	box-shadow: 0 6px 18px rgba(48, 95, 114, .38);
	background: #c9557a;
}

/* Respiration douce du bouton, en continu */
@keyframes pc-contact-respire {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

/* Onde discrète qui s'échappe du bouton */
#pc-contact .pc-contact__bouton::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(221, 102, 136, .4);
	animation: pc-contact-onde 3.4s ease-out infinite;
	pointer-events: none;
}

@keyframes pc-contact-onde {
	0%        { box-shadow: 0 0 0 0 rgba(221, 102, 136, .4); }
	60%, 100% { box-shadow: 0 0 0 16px rgba(221, 102, 136, 0); }
}

/* Tailles forcées en CSS : le thème Kidz stylise tous les svg, on reprend la main */
#pc-contact .pc-contact__ico-chat {
	width: 38px !important;
	height: 38px !important;
	animation: pc-contact-balance 7s ease-in-out infinite;
	transform-origin: 50% 60%;
}

#pc-contact .pc-contact__ico-fermer {
	width: 28px !important;
	height: 28px !important;
}

@keyframes pc-contact-balance {
	0%, 86%, 100% { transform: rotate(0); }
	89%           { transform: rotate(-12deg); }
	92%           { transform: rotate(9deg); }
	95%           { transform: rotate(-5deg); }
	98%           { transform: rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
	#pc-contact .pc-contact__ico-chat,
	#pc-contact .pc-contact__bouton,
	#pc-contact .pc-contact__bouton::after {
		animation: none;
	}
}

/* Bouton = croix quand le panneau est ouvert */
#pc-contact .pc-contact__ico-fermer {
	display: none !important;
}

#pc-contact.pc-contact--ouvert .pc-contact__ico-chat {
	display: none !important;
}

#pc-contact.pc-contact--ouvert .pc-contact__ico-fermer {
	display: block !important;
}

/* ── Le teaser : deux messages qui arrivent comme une conversation ──────── */

#pc-contact .pc-contact__teaser {
	position: absolute;
	right: 76px;
	bottom: 8px;
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	width: max-content;
}

#pc-contact.pc-contact--teaser .pc-contact__teaser {
	display: flex;
}

#pc-contact .pc-contact__teaser-bulle {
	display: none;
	border: 0;
	background: #fff;
	color: #305f72;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	white-space: nowrap;
	padding: 9px 14px;
	border-radius: 14px 14px 3px 14px;
	box-shadow: 0 4px 16px rgba(48, 95, 114, .25);
	cursor: pointer;
	opacity: 0;
}

#pc-contact.pc-contact--teaser .pc-contact__teaser-bulle--1,
#pc-contact.pc-contact--teaser2 .pc-contact__teaser-bulle--2 {
	display: block;
	animation: pc-contact-message .3s ease-out forwards;
}

@keyframes pc-contact-message {
	from { opacity: 0; transform: translateY(6px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

#pc-contact .pc-contact__teaser-bulle:hover {
	color: #dd6688;
}

/* Croix ronde : tout est verrouillé car le thème impose padding et
   min-width à ses boutons, ce qui la déformait en ovale. */
#pc-contact .pc-contact__teaser-fermer {
	position: absolute;
	top: -10px;
	right: -8px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 22px !important;
	height: 22px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #a7b6be;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(48, 95, 114, .25);
}

#pc-contact .pc-contact__teaser-fermer:hover {
	color: #305f72;
}

@media (prefers-reduced-motion: reduce) {
	#pc-contact.pc-contact--teaser .pc-contact__teaser-bulle--1,
	#pc-contact.pc-contact--teaser2 .pc-contact__teaser-bulle--2 {
		animation: none;
		opacity: 1;
	}
}

/* ── Le panneau ─────────────────────────────────────────────────────────── */

#pc-contact .pc-contact__panneau {
	position: absolute;
	right: 0;
	bottom: 72px;
	width: 340px;
	max-width: calc(100vw - 48px);
	max-height: min(540px, calc(100vh - 120px));
	display: none;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 34px rgba(48, 95, 114, .3);
}

#pc-contact.pc-contact--ouvert .pc-contact__panneau {
	display: flex;
	animation: pc-contact-ouverture .22s ease-out;
}

@keyframes pc-contact-ouverture {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	#pc-contact.pc-contact--ouvert .pc-contact__panneau,
	#pc-contact.pc-contact--teaser .pc-contact__teaser {
		animation: none;
	}
}

#pc-contact .pc-contact__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #305f72;
	color: #fff;
	padding: 12px 16px;
}

#pc-contact .pc-contact__titre {
	margin: 0;
	font-weight: 700;
}

#pc-contact .pc-contact__fermer {
	border: 0;
	background: none;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	opacity: .8;
}

#pc-contact .pc-contact__fermer:hover {
	opacity: 1;
}

#pc-contact .pc-contact__corps {
	padding: 14px 16px 16px;
	overflow-y: auto;
}

#pc-contact .pc-contact__texte {
	margin: 0 0 12px;
}

/* Téléphone */
#pc-contact .pc-contact__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f4f8ff;
	border: 1px solid #cfe0ea;
	border-radius: 10px;
	padding: 10px 14px;
	color: #305f72;
	font-weight: 700;
	text-decoration: none;
}

#pc-contact .pc-contact__tel:hover {
	border-color: #dd6688;
	color: #dd6688;
}

/* Séparateur "ou par message" */
#pc-contact .pc-contact__separateur {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 10px;
	color: #787c82;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

#pc-contact .pc-contact__separateur::before,
#pc-contact .pc-contact__separateur::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: #e6ecef;
}

/* Formulaire CF7 : champs harmonisés sans toucher au reste du site */
#pc-contact .pc-contact__form input[type="text"],
#pc-contact .pc-contact__form input[type="email"],
#pc-contact .pc-contact__form input[type="tel"],
#pc-contact .pc-contact__form textarea {
	width: 100%;
	border: 1px solid #c8c8c8;
	border-radius: 8px;
	padding: 8px 10px;
	margin: 2px 0 8px;
}

#pc-contact .pc-contact__form textarea {
	max-height: 120px;
	resize: vertical;
}

#pc-contact .pc-contact__form input:focus,
#pc-contact .pc-contact__form textarea:focus {
	border-color: #dd6688;
	outline: none;
}

#pc-contact .pc-contact__form input[type="submit"],
#pc-contact .pc-contact__form button[type="submit"] {
	background: #dd6688;
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 600;
	cursor: pointer;
}

#pc-contact .pc-contact__form input[type="submit"]:hover,
#pc-contact .pc-contact__form button[type="submit"]:hover {
	background: #c9557a;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	#pc-contact {
		right: 14px;
		bottom: 14px;
	}

	#pc-contact .pc-contact__bouton {
		width: 60px;
		height: 60px;
	}

	#pc-contact .pc-contact__ico-chat {
		width: 34px !important;
		height: 34px !important;
	}

	#pc-contact .pc-contact__teaser {
		right: 68px;
		width: auto;
		max-width: calc(100vw - 110px);
	}

	#pc-contact .pc-contact__teaser-bulle {
		white-space: normal;
	}

	#pc-contact .pc-contact__panneau {
		bottom: 64px;
		width: calc(100vw - 28px);
		max-height: calc(100vh - 100px);
	}
}