/* =============================================================
   TPB Chat Popup v1.1.0 — Styles widget (sans Tailwind)
   Tout est scopé dans #tpb-contact-widget — zéro impact global
   Développé par LEVEL 1 — www.lvl1.fr
   ============================================================= */

/* ── Variables par défaut (surchargées dynamiquement par PHP) ─ */
#tpb-contact-widget {
	--tpb-primary:       #f8c945;
	--tpb-secondary:     #1e1f20;
	--tpb-gray-50:       #f9fafb;
	--tpb-gray-100:      #f3f4f6;
	--tpb-gray-200:      #e5e7eb;
	--tpb-gray-300:      #d1d5db;
	--tpb-gray-400:      #9ca3af;
	--tpb-gray-500:      #6b7280;
	--tpb-gray-600:      #4b5563;
	--tpb-gray-700:      #374151;
	--tpb-gray-800:      #1f2937;
	--tpb-gray-900:      #111827;
	--tpb-green-400:     #4ade80;
	--tpb-yellow-300:    #fde047;
	--tpb-yellow-400:    #facc15;
	--tpb-r-lg:          8px;
	--tpb-r-xl:          12px;
	--tpb-r-2xl:         16px;
	--tpb-r-3xl:         24px;
	--tpb-r-full:        9999px;
}

/* ── Reset strict — n'affecte QUE le widget ─────────────────── */
#tpb-contact-widget,
#tpb-contact-widget * {
	box-sizing:     border-box !important;
	line-height:    normal     !important;
	letter-spacing: normal     !important;
}
#tpb-contact-widget p,
#tpb-contact-widget span,
#tpb-contact-widget div { margin-bottom: 0 !important; }

#tpb-contact-widget a,
#tpb-contact-widget a:hover,
#tpb-contact-widget a:focus {
	text-decoration: none   !important;
	border-bottom:   none   !important;
	box-shadow:      none   !important;
}

/* ── Widget root ─────────────────────────────────────────────── */
#tpb-contact-widget {
	position:       fixed;
	bottom:         80px;   /* bottom-20 */
	right:          16px;   /* right-4 */
	z-index:        9999;
	display:        none;   /* JS l'affiche */
	flex-direction: column;
	align-items:    flex-end;
	font-family:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size:      16px;
}
@media (min-width: 640px) {
	#tpb-contact-widget { bottom: 96px; right: 24px; }
}

/* Anti-FOUC */
@keyframes tpbFadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
.tpb-widget-ready {
	display:   flex !important;
	animation: tpbFadeIn .6s ease-out forwards;
}

/* ── Utilitaire d'état ───────────────────────────────────────── */
.tpb-hidden { display: none !important; }

/* ── Popup ───────────────────────────────────────────────────── */
#tpb-popup {
	width:           90vw;
	background:      #fff;
	border-radius:   var(--tpb-r-3xl);
	box-shadow:      0 10px 40px -10px rgba(0,0,0,.15);
	overflow:        hidden;
	margin-bottom:   12px;
	border:          1px solid var(--tpb-gray-100);
	transform-origin: bottom right;
	position:        relative;
}
@media (min-width: 640px) { #tpb-popup { width: 22rem; } }

/* Animations popup */
.tpb-popup-enter-active {
	opacity:    1;
	transform:  scale(1) translateY(0);
	transition: opacity 300ms ease, transform 300ms ease;
}
.tpb-popup-exit-active {
	opacity:    0;
	transform:  scale(.95) translateY(10px);
	transition: opacity 300ms ease, transform 300ms ease;
}

/* ── En-tête ─────────────────────────────────────────────────── */
.tpb-header {
	background:      linear-gradient(to bottom right, var(--tpb-gray-900), var(--tpb-secondary));
	color:           #fff;
	padding:         12px 16px;
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	position:        relative;
	overflow:        hidden;
}
@media (min-width: 640px) { .tpb-header { padding: 16px 24px; } }

.tpb-header__bg-icon {
	position:    absolute;
	right:       0;
	top:         0;
	opacity:     .1;
	transform:   translate(8px, -8px);
	font-size:   3rem;
	color:       #fff !important;
	line-height: 1 !important;
}
@media (min-width: 640px) { .tpb-header__bg-icon { font-size: 3.75rem; } }

.tpb-header__content {
	display:        flex;
	flex-direction: column;
	position:       relative;
	z-index:        1;
}
.tpb-header__title {
	font-weight:    800;
	font-size:      1.125rem;
	letter-spacing: -.025em !important;
	color:          #fff !important;
	display:        flex;
	align-items:    center;
	gap:            8px;
	margin:         0 !important;
	padding:        0 !important;
}
@media (min-width: 640px) { .tpb-header__title { font-size: 1.25rem; } }

.tpb-status-dot {
	width:         8px;
	height:        8px;
	border-radius: var(--tpb-r-full);
	background:    var(--tpb-green-400);
	flex-shrink:   0;
	animation:     tpbPulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes tpbPulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .5; }
}

.tpb-header__subtitle {
	color:       var(--tpb-gray-300) !important;
	font-size:   .625rem;
	font-weight: 500;
	margin:      2px 0 0 !important;
	padding:     0 !important;
}
@media (min-width: 640px) { .tpb-header__subtitle { font-size: .75rem; } }

.tpb-btn-close-popup {
	color:           var(--tpb-gray-400) !important;
	background:      rgba(255,255,255,.1);
	width:           28px;
	height:          28px;
	border-radius:   var(--tpb-r-full);
	display:         flex;
	align-items:     center;
	justify-content: center;
	border:          0 !important;
	cursor:          pointer;
	transition:      color .2s, background .2s;
	position:        relative;
	z-index:         1;
	flex-shrink:     0;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
@media (min-width: 640px) { .tpb-btn-close-popup { width: 32px; height: 32px; } }
.tpb-btn-close-popup:hover { color: #fff !important; background: rgba(255,255,255,.2); }

/* ── Zone de défilement ──────────────────────────────────────── */
.tpb-scroll-area {
	max-height:  65vh;
	overflow-y:  auto;
	position:    relative;
}
@media (min-width: 640px) { .tpb-scroll-area { max-height: 75vh; } }

.tpb-scroll-area::-webkit-scrollbar       { width: 5px; }
.tpb-scroll-area::-webkit-scrollbar-track { background: rgba(0,0,0,.03); border-radius: 10px; margin: 4px; }
.tpb-scroll-area::-webkit-scrollbar-thumb { background: rgba(248,201,69,.7); border-radius: 10px; }
.tpb-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--tpb-primary); }

/* ── Vues (téléphones / formulaire) ──────────────────────────── */
.tpb-view {
	padding:    16px 16px 32px;
	background: #fff;
	width:      100%;
}
@media (min-width: 640px) { .tpb-view { padding: 20px 20px 32px; } }

/* ── Bannière promo ──────────────────────────────────────────── */
.tpb-promo {
	background:    var(--tpb-gray-50);
	border-radius: var(--tpb-r-xl);
	padding:       12px;
	margin-bottom: 16px;
	border:        1px solid var(--tpb-gray-100);
	text-align:    center;
}
@media (min-width: 640px) { .tpb-promo { border-radius: var(--tpb-r-2xl); padding: 16px; } }

.tpb-promo__question {
	font-size:   .75rem;
	color:       var(--tpb-gray-600) !important;
	font-weight: 500;
	margin:      0 !important;
}
@media (min-width: 640px) { .tpb-promo__question { font-size: .875rem; } }

.tpb-promo__badge {
	margin-top:      6px;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	background:      color-mix(in srgb, var(--tpb-primary) 10%, transparent);
	color:           var(--tpb-secondary) !important;
	padding:         6px 8px;
	border-radius:   var(--tpb-r-lg);
	border:          1px solid color-mix(in srgb, var(--tpb-primary) 20%, transparent);
}
@media (min-width: 640px) { .tpb-promo__badge { margin-top: 8px; padding: 6px 12px; } }

.tpb-promo__badge i { color: var(--tpb-primary) !important; margin-right: 6px; font-size: .875rem; }
@media (min-width: 640px) { .tpb-promo__badge i { margin-right: 8px; } }

.tpb-promo__amount { font-size: .75rem; font-weight: 700; color: var(--tpb-secondary) !important; }
@media (min-width: 640px) { .tpb-promo__amount { font-size: .875rem; } }

.tpb-promo__suffix { font-size: .625rem; margin-left: 4px !important; opacity: .75; color: var(--tpb-secondary) !important; }
@media (min-width: 640px) { .tpb-promo__suffix { font-size: .75rem; } }

/* ── Boutons téléphone ───────────────────────────────────────── */
.tpb-phone {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	padding:         12px 16px;
	border-radius:   var(--tpb-r-xl);
	font-weight:     700;
	transition:      all .2s ease;
	text-decoration: none !important;
	border:          0 !important;
	cursor:          pointer;
}
@media (min-width: 640px) { .tpb-phone { padding: 14px 16px; } }

/* Téléphone principal */
.tpb-phone--primary {
	background:    var(--tpb-secondary);
	color:         #fff !important;
	box-shadow:    0 4px 6px -1px rgba(0,0,0,.2);
	margin-bottom: 10px;
}
@media (min-width: 640px) { .tpb-phone--primary { margin-bottom: 12px; } }
.tpb-phone--primary:hover { background: var(--tpb-gray-800); color: #fff !important; }

.tpb-phone__icon {
	background:      rgba(255,255,255,.1);
	padding:         6px;
	border-radius:   var(--tpb-r-lg);
	margin-right:    10px;
	transition:      transform .2s;
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
}
@media (min-width: 640px) { .tpb-phone__icon { padding: 8px; margin-right: 12px; } }
.tpb-phone--primary:hover .tpb-phone__icon { transform: scale(1.1); }
.tpb-phone__icon i { color: var(--tpb-primary) !important; font-size: .875rem; }
@media (min-width: 640px) { .tpb-phone__icon i { font-size: 1rem; } }

.tpb-phone__label { font-size: 1rem; letter-spacing: .025em !important; color: #fff !important; }
@media (min-width: 640px) { .tpb-phone__label { font-size: 1.125rem; } }

/* Téléphone secondaire */
.tpb-phone--secondary {
	background:    #fff;
	color:         var(--tpb-gray-700) !important;
	border:        2px solid var(--tpb-gray-200) !important;
	padding:       10px 16px;
	margin-bottom: 16px;
}
@media (min-width: 640px) { .tpb-phone--secondary { padding: 12px 16px; margin-bottom: 20px; } }
.tpb-phone--secondary:hover { border-color: var(--tpb-secondary) !important; }

.tpb-phone--secondary i {
	color:        var(--tpb-gray-400) !important;
	font-size:    1rem;
	margin-right: 10px;
	transition:   color .2s;
}
@media (min-width: 640px) { .tpb-phone--secondary i { font-size: 1.125rem; margin-right: 12px; } }
.tpb-phone--secondary:hover i { color: var(--tpb-secondary) !important; }

.tpb-phone__label-secondary {
	font-size:  .875rem;
	color:      var(--tpb-gray-700) !important;
	transition: color .2s;
}
@media (min-width: 640px) { .tpb-phone__label-secondary { font-size: 1rem; } }
.tpb-phone--secondary:hover .tpb-phone__label-secondary { color: var(--tpb-secondary) !important; }

/* ── Séparateur ──────────────────────────────────────────────── */
.tpb-divider {
	display:      flex;
	align-items:  center;
	padding:      8px 0;
	margin-bottom: 12px;
}
@media (min-width: 640px) { .tpb-divider { padding: 12px 0; margin-bottom: 16px; } }

.tpb-divider::before,
.tpb-divider::after { content: ''; flex: 1; border-top: 1px solid var(--tpb-gray-100); }

.tpb-divider__text {
	flex-shrink:    0;
	margin:         0 12px !important;
	color:          var(--tpb-gray-400) !important;
	font-size:      .625rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: .05em !important;
}
@media (min-width: 640px) { .tpb-divider__text { margin: 0 16px !important; font-size: .75rem; } }

/* ── Bouton CTA ──────────────────────────────────────────────── */
.tpb-cta-btn {
	width:           100%;
	background:      linear-gradient(to right, var(--tpb-primary), var(--tpb-yellow-400));
	color:           var(--tpb-secondary) !important;
	padding:         12px 16px;
	border-radius:   var(--tpb-r-xl);
	font-size:       .875rem;
	font-weight:     700;
	box-shadow:      0 4px 6px -1px color-mix(in srgb, var(--tpb-primary) 30%, transparent);
	transition:      transform .2s ease, box-shadow .2s ease;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border:          0 !important;
	cursor:          pointer;
}
@media (min-width: 640px) { .tpb-cta-btn { padding: 14px 16px; font-size: 1rem; } }
.tpb-cta-btn:hover { transform: translateY(-2px); }
.tpb-cta-btn i { margin-right: 8px; }

/* ── Vue formulaire / bouton retour ──────────────────────────── */
.tpb-back-btn {
	display:       flex;
	align-items:   center;
	font-size:     .75rem;
	color:         var(--tpb-gray-500) !important;
	font-weight:   600;
	margin-bottom: 16px;
	background:    transparent;
	border:        0 !important;
	padding:       0 !important;
	cursor:        pointer;
	transition:    color .2s;
}
@media (min-width: 640px) { .tpb-back-btn { font-size: .875rem; margin-bottom: 20px; } }
.tpb-back-btn:hover { color: var(--tpb-secondary) !important; }

.tpb-back-btn__icon {
	background:      var(--tpb-gray-100);
	padding:         6px;
	border-radius:   var(--tpb-r-full);
	margin-right:    8px;
	transition:      background .2s;
	display:         flex;
	align-items:     center;
	justify-content: center;
}
.tpb-back-btn__icon i { font-size: .625rem; }
@media (min-width: 640px) { .tpb-back-btn__icon i { font-size: .75rem; } }
.tpb-back-btn:hover .tpb-back-btn__icon { background: var(--tpb-gray-200); }

/* ── Gravity Forms dans le popup ─────────────────────────────── */
.tpb-gf-wrapper { font-size: .875rem; width: 100%; display: block; }
#tpb-contact-widget .gform_wrapper              { margin: 0 !important; display: block !important; }
#tpb-contact-widget .gform_wrapper form         { display: block !important; }
#tpb-contact-widget .gform_wrapper input,
#tpb-contact-widget .gform_wrapper textarea     { font-size: 14px !important; }

/* ── Indicateur de scroll ────────────────────────────────────── */
.tpb-scroll-fade {
	position:      absolute;
	bottom:        0;
	left:          0;
	width:         100%;
	height:        40px;
	background:    linear-gradient(to top, #fff 0%, rgba(255,255,255,.9) 50%, transparent 100%);
	pointer-events: none;
	z-index:       20;
	transition:    opacity .3s;
	border-radius: 0 0 var(--tpb-r-3xl) var(--tpb-r-3xl);
}

/* ── Rangée bulle + messages ─────────────────────────────────── */
.tpb-bottom-row {
	display:     flex;
	align-items: flex-end;
	gap:         12px;
	position:    relative;
}
@media (min-width: 640px) { .tpb-bottom-row { gap: 16px; } }

/* ── Messages bulles ─────────────────────────────────────────── */
#tpb-messages {
	display: none; /* JS ajoute .tpb-messages--visible après le délai */
}
@media (min-width: 640px) {
	#tpb-messages.tpb-messages--visible {
		display:        flex;
		flex-direction: column;
		align-items:    flex-end;
		gap:            8px;
		margin-bottom:  8px;
		position:       relative;
	}
}

/* Bouton fermer les messages */
#tpb-close-messages-btn {
	position:        absolute;
	top:             -24px;
	right:           0;
	color:           var(--tpb-gray-400) !important;
	background:      rgba(255,255,255,.9);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius:   var(--tpb-r-full);
	width:           24px;
	height:          24px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      0 1px 3px rgba(0,0,0,.1);
	border:          1px solid var(--tpb-gray-200) !important;
	z-index:         20;
	font-size:       .625rem;
	opacity:         0;
	transition:      opacity .3s, color .2s;
	cursor:          pointer;
}
@media (min-width: 640px) { #tpb-close-messages-btn { right: -8px; } }
#tpb-close-messages-btn:hover { color: var(--tpb-gray-600) !important; }

/* Bulles de message */
.tpb-msg {
	opacity:       0;
	transform:     translateY(16px);
	transition:    opacity .5s ease, transform .5s ease;
	padding:       8px 12px;
	border-radius: 16px 16px 2px 16px;
	border:        1px solid var(--tpb-gray-800);
	font-size:     .75rem;
	font-weight:   500;
	cursor:        pointer;
	background:    var(--tpb-secondary);
	box-shadow:    0 0 20px color-mix(in srgb, var(--tpb-primary) 50%, transparent);
	margin:        0 !important;
}
@media (min-width: 640px) { .tpb-msg { padding: 12px 16px; font-size: .875rem; } }
.tpb-msg:hover { background: var(--tpb-gray-900); }
.tpb-msg.tpb-msg--visible { opacity: 1; transform: translateY(0); }

#tpb-msg-1 { color: var(--tpb-primary) !important; }

#tpb-msg-2 {
	color:       #fff !important;
	display:     flex;
	align-items: center;
	gap:         8px;
	position:    relative;
}
.tpb-msg__badge {
	background:      color-mix(in srgb, var(--tpb-primary) 20%, transparent);
	padding:         4px;
	border-radius:   var(--tpb-r-full);
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
}
@media (min-width: 640px) { .tpb-msg__badge { padding: 6px; } }
.tpb-msg__badge i { color: var(--tpb-primary) !important; font-size: .625rem; }
@media (min-width: 640px) { .tpb-msg__badge i { font-size: .75rem; } }
#tpb-msg-2 strong { color: var(--tpb-primary) !important; font-weight: 700; }

.tpb-msg__tail {
	position:     absolute;
	right:        -5px;
	bottom:       10px;
	width:        10px;
	height:       10px;
	background:   var(--tpb-secondary);
	transform:    rotate(45deg);
	border-right: 1px solid var(--tpb-gray-800);
	border-top:   1px solid var(--tpb-gray-800);
}
@media (min-width: 640px) { .tpb-msg__tail { width: 12px; height: 12px; bottom: 14px; } }

/* ── Bulle principale ────────────────────────────────────────── */
#tpb-bubble-btn {
	width:           48px;
	height:          48px;
	flex-shrink:     0;
	background:      linear-gradient(to top right, var(--tpb-primary), var(--tpb-yellow-300));
	border-radius:   var(--tpb-r-full);
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--tpb-secondary) !important;
	box-shadow:      0 0 20px color-mix(in srgb, var(--tpb-primary) 50%, transparent);
	transition:      transform .3s ease, background .3s ease, box-shadow .3s ease;
	z-index:         10;
	position:        relative;
	border:          2px solid rgba(255,255,255,.5) !important;
	cursor:          pointer;
}
@media (min-width: 640px) { #tpb-bubble-btn { width: 64px; height: 64px; } }
#tpb-bubble-btn:hover { transform: scale(1.1) rotate(3deg); }

#tpb-bubble-btn.tpb-bubble--open {
	background: var(--tpb-secondary);
	color:      #fff !important;
	box-shadow: none;
}
#tpb-bubble-btn.tpb-bubble--open:hover { transform: scale(1.05); }

#tpb-icon-main {
	font-size:  1.25rem;
	opacity:    1;
	transform:  scale(1);
	transition: opacity .3s ease, transform .3s ease;
	position:   absolute;
}
@media (min-width: 640px) { #tpb-icon-main { font-size: 1.875rem; } }

#tpb-icon-close {
	font-size:  1.25rem;
	opacity:    0;
	transform:  scale(.5);
	transition: opacity .3s ease, transform .3s ease;
	position:   absolute;
}
@media (min-width: 640px) { #tpb-icon-close { font-size: 1.875rem; } }

/* ── Fix icônes SVG Elementor (étoiles Google, iHbox…) ────── */
.eael-google-reviews-business-rating svg,
.eael-google-review-rating svg,
.eael-google-reviews-list svg,
.cspt-ihbox-icon svg,
.cspt-ihbox-icon img,
.cspt-ihbox-icon picture,
.cspt-ihbox-icon-wrapper {
	display:        inline-block !important;
	vertical-align: middle       !important;
}

/* ── Accessibilité — respect des préférences utilisateur ──── */
@media (prefers-reduced-motion: reduce) {
	#tpb-contact-widget,
	#tpb-contact-widget * {
		animation-duration:       0.01ms !important;
		animation-iteration-count: 1     !important;
		transition-duration:       0.01ms !important;
	}
}