/* =====================================================================
   TattooClub Pro — page /professionnels/ (ID 309) + tunnel de devis.
   Chargé uniquement sur cette page (cf. tattooclub-b2b.php).

   Charte : mêmes tokens, typos et composants que les pages déjà en
   ligne — titres/eyebrows/cartes/boutons de « À propos » (about.css),
   champs + sélecteur de sujet de « Nous contacter » (contact.css),
   modale de l'aperçu rapide (quickview.css), boutons système (system.css).

   Structure Elementor : seules les sections de premier niveau sont
   « boxed » (enveloppe .e-con-inner) ; tous les conteneurs imbriqués
   sont en pleine largeur, donc la mise en page s'applique directement
   sur leur classe.
   Les widgets Elementor portent la classe sur leur enveloppe : on cible
   l'élément réellement rendu (.elementor-heading-title, .elementor-button,
   .elementor-icon-box-*), avec !important, comme sur les autres pages.
   ===================================================================== */

:root {
	--pro-ink: #111111;
	--pro-lime: #B7E41C;
	--pro-lime-hover: #A6D014;
	--pro-lime-ink: #4F7A00;
	--pro-ivory: #F9F5EF;
	--pro-line: #E8E4DC;
	--pro-field: #DAD4C8;
	--pro-muted: #68645E;
	--pro-soft: #D9D4CB;
	--pro-red: #C62828;
	--pro-h: 'Archivo Black', 'Space Grotesk', sans-serif;
	--pro-b: 'Space Grotesk', system-ui, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Sections — socle commun                                            */
/* ------------------------------------------------------------------ */

:is(.tc-pro-hero, .tc-pro-audience, .tc-pro-solutions, .tc-pro-volume, .tc-pro-process, .tc-pro-cta) {
	--padding-top: clamp(56px, 7vw, 104px) !important;
	--padding-bottom: clamp(56px, 7vw, 104px) !important;
	--padding-left: clamp(20px, 4vw, 40px) !important;
	--padding-right: clamp(20px, 4vw, 40px) !important;
	font-family: var(--pro-b);
	color: var(--pro-ink);
	scroll-margin-top: 110px;
}
:is(.tc-pro-hero, .tc-pro-audience, .tc-pro-solutions, .tc-pro-volume, .tc-pro-process, .tc-pro-cta) > .e-con-inner {
	min-width: 0;
}
:is(.tc-pro-hero, .tc-pro-audience, .tc-pro-solutions, .tc-pro-volume, .tc-pro-process, .tc-pro-cta, .tc-pro-funnel) .e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 0px;
	--width: auto;
	min-width: 0;
}
:is(.tc-pro-hero, .tc-pro-audience, .tc-pro-solutions, .tc-pro-volume, .tc-pro-process, .tc-pro-cta, .tc-pro-funnel) .elementor-widget {
	margin: 0 !important;
	min-width: 0;
	max-width: 100%;
}
:is(.tc-pro-hero, .tc-pro-audience, .tc-pro-solutions, .tc-pro-volume, .tc-pro-process, .tc-pro-cta) .elementor-widget-text-editor p {
	margin: 0;
}

/* En-têtes de section centrés (titre + intro) */
:is(.tc-pro-audience, .tc-pro-solutions, .tc-pro-process) > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 14px !important;
}

.tc-pro-sec-title .elementor-heading-title {
	font-family: var(--pro-h) !important;
	font-weight: 400 !important;
	font-size: clamp(28px, 3.6vw, 46px) !important;
	line-height: 1.02 !important;
	letter-spacing: -.01em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: var(--pro-ink) !important;
	margin: 0 !important;
	overflow-wrap: break-word;
}
/* Titres : retours à la ligne équilibrés (pas de mot orphelin) */
:is(.tc-pro-sec-title, .tc-pro-hero__title, .tc-pro-cta__title, .tc-pro-process-step__title) .elementor-heading-title,
.tc-pro-card .elementor-icon-box-title,
.tc-pro-step__title { text-wrap: balance; }

.elementor-widget.tc-pro-sec-sub { max-width: 640px; text-align: center; }
.tc-pro-sec-sub,
.tc-pro-sec-sub p {
	font-family: var(--pro-b) !important;
	font-size: clamp(16px, 1.3vw, 18px) !important;
	line-height: 1.6 !important;
	color: var(--pro-muted) !important;
}

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* Elementor : la classe .tc-pro-btn est sur l'enveloppe du widget,    */
/* le vrai lien est .elementor-button. Tunnel : vrais <button>/<a>.    */
/* ------------------------------------------------------------------ */

.elementor-widget-button.tc-pro-btn .elementor-button,
button.tc-pro-btn,
a.tc-pro-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px;
	min-height: 52px;
	padding: 0 24px !important;
	border-radius: 8px !important;
	border: 1.5px solid transparent !important;
	font-family: var(--pro-b) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.elementor-widget-button.tc-pro-btn .elementor-button:focus-visible,
button.tc-pro-btn:focus-visible,
a.tc-pro-btn:focus-visible {
	outline: 3px solid var(--pro-lime);
	outline-offset: 3px;
}
.elementor-widget-button.tc-pro-btn--lg .elementor-button,
button.tc-pro-btn--lg {
	min-height: 56px;
	padding: 0 28px !important;
}

/* Lime — sur fond sombre (hero, volume) : survol blanc, comme « À propos » */
.elementor-widget-button.tc-pro-btn--primary .elementor-button {
	background: var(--pro-lime) !important;
	color: var(--pro-ink) !important;
	border-color: var(--pro-lime) !important;
}
.elementor-widget-button.tc-pro-btn--primary .elementor-button:hover {
	background: #fff !important;
	color: var(--pro-ink) !important;
	border-color: #fff !important;
}

/* Contour clair — fond sombre du hero */
.elementor-widget-button.tc-pro-btn--ghost .elementor-button {
	background: transparent !important;
	color: var(--pro-ivory) !important;
	border-color: rgba(249, 245, 239, .4) !important;
}
.elementor-widget-button.tc-pro-btn--ghost .elementor-button:hover {
	background: var(--pro-ivory) !important;
	color: var(--pro-ink) !important;
	border-color: var(--pro-ivory) !important;
}

/* Bloc final (fond lime) : bouton encre */
.tc-pro-cta .elementor-widget-button.tc-pro-btn .elementor-button {
	background: var(--pro-ink) !important;
	color: #fff !important;
	border-color: var(--pro-ink) !important;
}
.tc-pro-cta .elementor-widget-button.tc-pro-btn .elementor-button:hover {
	background: #fff !important;
	color: var(--pro-ink) !important;
	border-color: var(--pro-ink) !important;
}
.tc-pro-cta .elementor-widget-button.tc-pro-btn .elementor-button:focus-visible { outline-color: var(--pro-ink); }

/* Tunnel (fond blanc) — mêmes rendus que le formulaire de contact */
button.tc-pro-btn--primary,
a.tc-pro-btn--primary {
	background: var(--pro-lime) !important;
	color: var(--pro-ink) !important;
	border-color: var(--pro-lime) !important;
}
button.tc-pro-btn--primary:hover:not(:disabled),
a.tc-pro-btn--primary:hover {
	background: var(--pro-ink) !important;
	color: var(--pro-lime) !important;
	border-color: var(--pro-ink) !important;
}
button.tc-pro-btn--ghost,
a.tc-pro-btn--ghost {
	background: #fff !important;
	color: var(--pro-ink) !important;
	border-color: var(--pro-ink) !important;
}
button.tc-pro-btn--ghost:hover,
a.tc-pro-btn--ghost:hover {
	background: var(--pro-lime) !important;
	border-color: var(--pro-lime) !important;
}
button.tc-pro-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}
button.tc-pro-btn:focus-visible,
a.tc-pro-btn:focus-visible { outline-color: var(--pro-ink); }

/* ------------------------------------------------------------------ */
/* 1. Hero (fond encre)                                                */
/* ------------------------------------------------------------------ */

.tc-pro-hero {
	background: var(--pro-ink) !important;
	--padding-top: clamp(48px, 6vw, 88px) !important;
	--padding-bottom: clamp(56px, 7vw, 96px) !important;
	overflow: hidden;
}
.tc-pro-hero__inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: clamp(32px, 5vw, 72px) !important;
	width: 100%;
}
.tc-pro-hero__text {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	flex: 1 1 52% !important;
	gap: 22px !important;
}
.tc-pro-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--pro-b) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .2em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	color: var(--pro-lime) !important;
	margin: 0 !important;
}
.tc-pro-eyebrow .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 3px;
	border-radius: 3px;
	background: var(--pro-lime);
}
.tc-pro-hero__title .elementor-heading-title {
	font-family: var(--pro-h) !important;
	font-weight: 400 !important;
	font-size: clamp(38px, 5.2vw, 72px) !important;
	line-height: .96 !important;
	letter-spacing: -.015em !important;
	text-transform: uppercase !important;
	color: var(--pro-ivory) !important;
	margin: 0 !important;
}
.elementor-widget.tc-pro-hero__lead { max-width: 46ch; }
.tc-pro-hero__lead,
.tc-pro-hero__lead p {
	font-family: var(--pro-b) !important;
	font-size: clamp(16px, 1.35vw, 19px) !important;
	line-height: 1.6 !important;
	color: var(--pro-soft) !important;
}
.tc-pro-hero__ctas {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: 6px !important;
}
.tc-pro-hero__trust {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px !important;
	width: 100%;
	margin-top: 10px !important;
	padding-top: 24px !important;
	border-top: 1px solid rgba(249, 245, 239, .14);
}
.tc-pro-trust-item .elementor-icon-box-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
	text-align: left !important;
}
.tc-pro-trust-item .elementor-icon-box-icon {
	margin: 0 !important;
	display: inline-flex;
	flex: none;
}
.tc-pro-trust-item .elementor-icon {
	width: 38px;
	height: 38px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(183, 228, 28, .12);
	color: var(--pro-lime) !important;
	font-size: 17px !important;
}
.tc-pro-trust-item .elementor-icon svg {
	width: 17px !important;
	height: 17px !important;
	fill: var(--pro-lime) !important;
}
.tc-pro-trust-item .elementor-icon-box-title {
	font-family: var(--pro-b) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--pro-ivory) !important;
	margin: 0 !important;
}
.tc-pro-trust-item .elementor-icon-box-description { display: none; }

.elementor-widget.tc-pro-hero__img {
	flex: 1 1 44% !important;
	max-width: 520px;
	position: relative;
	isolation: isolate;
}
.tc-pro-hero__img img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 18px;
}
.tc-pro-hero__img::after {
	content: "";
	position: absolute;
	left: -14px;
	bottom: -14px;
	width: 38%;
	height: 38%;
	border: 3px solid var(--pro-lime);
	border-radius: 18px;
	z-index: -1;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* 2–3. « Vous êtes… » (blanc) + « Nos solutions » (ivoire)           */
/* ------------------------------------------------------------------ */

.tc-pro-audience { background: #fff !important; }
.tc-pro-solutions { background: var(--pro-ivory) !important; }

.tc-pro-audience__grid,
.tc-pro-solutions__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px !important;
	width: 100%;
	max-width: 1240px;
	margin-top: clamp(18px, 3vw, 34px) !important;
}

.tc-pro-card .elementor-widget-container { height: 100%; }
.tc-pro-card .elementor-icon-box-wrapper {
	height: 100%;
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 14px;
	padding: 26px 24px;
	text-align: left !important;
	background: #fff;
	border: 1px solid var(--pro-line);
	border-radius: 14px;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tc-pro-card .elementor-icon-box-wrapper:hover {
	border-color: var(--pro-ink);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(17, 17, 17, .07);
}
.tc-pro-card .elementor-icon-box-icon {
	margin: 0 !important;
	display: inline-flex;
}
.tc-pro-card .elementor-icon {
	width: 48px;
	height: 48px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--pro-lime);
	color: var(--pro-ink) !important;
	font-size: 20px !important;
}
.tc-pro-card .elementor-icon svg {
	width: 20px !important;
	height: 20px !important;
	fill: var(--pro-ink) !important;
}
.tc-pro-solutions .tc-pro-card .elementor-icon { background: var(--pro-ink); color: var(--pro-lime) !important; }
.tc-pro-solutions .tc-pro-card .elementor-icon svg { fill: var(--pro-lime) !important; }
.tc-pro-card .elementor-icon-box-content { min-width: 0; }
.tc-pro-card .elementor-icon-box-title {
	font-family: var(--pro-h) !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 1.15 !important;
	text-transform: uppercase !important;
	color: var(--pro-ink) !important;
	margin: 0 0 6px !important;
}
.tc-pro-card .elementor-icon-box-description {
	font-family: var(--pro-b) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--pro-muted) !important;
	margin: 0 !important;
}

/* Cartes « Vous êtes… » cliquables (ouvrent le tunnel pré-rempli) */
.tc-pro-card--clickable { cursor: pointer; border-radius: 14px; }
.tc-pro-card--clickable .elementor-icon-box-wrapper { position: relative; padding-right: 52px; }
.tc-pro-card--clickable .elementor-icon-box-wrapper::after {
	content: "";
	position: absolute;
	right: 24px;
	bottom: 28px;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	color: var(--pro-muted);
	transform: rotate(45deg);
	transition: transform .15s ease, color .15s ease;
}
.tc-pro-card--clickable:hover .elementor-icon-box-wrapper::after {
	color: var(--pro-ink);
	transform: translateX(3px) rotate(45deg);
}
.tc-pro-card--clickable:focus-visible {
	outline: 3px solid var(--pro-ink);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* 4. Volume (fond encre)                                              */
/* ------------------------------------------------------------------ */

.tc-pro-volume { background: var(--pro-ink) !important; }
.tc-pro-volume > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: clamp(28px, 4vw, 48px) !important;
}
.tc-pro-volume__intro {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 14px !important;
	max-width: 680px;
	text-align: center;
}
.tc-pro-volume__intro .elementor-widget-button { margin-top: 10px !important; }
.tc-pro-volume .tc-pro-sec-title .elementor-heading-title { color: var(--pro-ivory) !important; }
.tc-pro-volume .tc-pro-sec-sub,
.tc-pro-volume .tc-pro-sec-sub p { color: var(--pro-soft) !important; }

.tc-pro-volume__tiers {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px !important;
	width: 100%;
	max-width: 1240px;
}
.tc-pro-tier {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 28px 20px !important;
	text-align: center;
	background: rgba(249, 245, 239, .04);
	border: 1px solid rgba(249, 245, 239, .14);
	border-radius: 14px;
	transition: border-color .2s ease;
}
.tc-pro-tier:hover { border-color: var(--pro-lime); }
.tc-pro-tier__qty .elementor-heading-title {
	font-family: var(--pro-h) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 3.2vw, 44px) !important;
	line-height: 1 !important;
	letter-spacing: -.01em !important;
	color: var(--pro-lime) !important;
	margin: 0 !important;
}
.tc-pro-tier__unit,
.tc-pro-tier__unit p {
	font-family: var(--pro-b) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	color: var(--pro-soft) !important;
}
.tc-pro-volume .tc-pro-tier__price { margin-top: 12px !important; }
.tc-pro-tier__price p {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(183, 228, 28, .12);
	font-family: var(--pro-b) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--pro-lime) !important;
}

/* ------------------------------------------------------------------ */
/* 5. Processus « Ton logo. Ton design. Ton tattoo. » (blanc)         */
/* Frise pointillée + pastilles, comme l'histoire de « À propos ».    */
/* ------------------------------------------------------------------ */

.tc-pro-process { background: #fff !important; }
.tc-pro-process__grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px !important;
	width: 100%;
	max-width: 1240px;
	margin-top: clamp(18px, 3vw, 34px) !important;
	background: repeating-linear-gradient(90deg, rgba(17, 17, 17, .28) 0 8px, transparent 8px 14px) 50% 28px / 75% 2px no-repeat !important;
}
.tc-pro-process-step {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	text-align: center;
}
.tc-pro-process .tc-pro-process-step__num { margin-bottom: 10px !important; }
.tc-pro-process-step__num .elementor-heading-title {
	width: 56px;
	height: 56px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pro-ink);
	box-shadow: 0 0 0 8px #fff;
	font-family: var(--pro-h) !important;
	font-weight: 400 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	color: var(--pro-lime) !important;
	margin: 0 !important;
}
.tc-pro-process-step:nth-child(even) .tc-pro-process-step__num .elementor-heading-title {
	background: var(--pro-lime);
	color: var(--pro-ink) !important;
}
.tc-pro-process-step__title .elementor-heading-title {
	font-family: var(--pro-h) !important;
	font-weight: 400 !important;
	font-size: 19px !important;
	line-height: 1.15 !important;
	text-transform: uppercase !important;
	color: var(--pro-ink) !important;
	margin: 0 !important;
}
.elementor-widget.tc-pro-process-step__text { max-width: 28ch; }
.tc-pro-process-step__text,
.tc-pro-process-step__text p {
	font-family: var(--pro-b) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--pro-muted) !important;
}

/* ------------------------------------------------------------------ */
/* 6. Appel final (fond lime)                                          */
/* ------------------------------------------------------------------ */

.tc-pro-cta {
	background: var(--pro-lime) !important;
	--padding-top: clamp(64px, 8vw, 112px) !important;
	--padding-bottom: clamp(64px, 8vw, 112px) !important;
}
.tc-pro-cta > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 16px !important;
	text-align: center;
}
.tc-pro-cta__title .elementor-heading-title {
	font-family: var(--pro-h) !important;
	font-weight: 400 !important;
	font-size: clamp(30px, 4.2vw, 56px) !important;
	line-height: .98 !important;
	letter-spacing: -.01em !important;
	text-transform: uppercase !important;
	color: var(--pro-ink) !important;
	margin: 0 !important;
}
.elementor-widget.tc-pro-cta__text { max-width: 52ch; }
.tc-pro-cta__text,
.tc-pro-cta__text p {
	font-family: var(--pro-b) !important;
	font-size: clamp(16px, 1.3vw, 18px) !important;
	line-height: 1.6 !important;
	color: var(--pro-ink) !important;
}
.tc-pro-cta .elementor-widget-button { margin-top: 8px !important; }

/* ------------------------------------------------------------------ */
/* Tunnel de devis — modale (même cadre que l'aperçu rapide)           */
/* ------------------------------------------------------------------ */

.tc-pro-funnel {
	position: fixed !important;
	inset: 0;
	z-index: 9999;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 32px !important;
	background: rgba(17, 17, 17, .55) !important;
	font-family: var(--pro-b);
	color: var(--pro-ink);
}
.tc-pro-funnel.is-open { display: flex !important; }
/* l'enveloppe auto d'Elementor ne doit pas s'intercaler entre le voile et le panneau */
.tc-pro-funnel > .e-con-inner { display: contents !important; }

.tc-pro-funnel__panel {
	position: relative !important;
	display: block !important;
	width: min(720px, 100%) !important;
	max-height: min(860px, calc(100vh - 64px));
	max-height: min(860px, calc(100dvh - 64px));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(24px, 4vw, 40px) !important;
	background: #fff !important;
	border-radius: 18px;
	box-shadow: 0 30px 80px rgba(17, 17, 17, .35);
	animation: tc-pro-panel-in .3s cubic-bezier(.2, .8, .2, 1);
}
.tc-pro-funnel__panel:focus { outline: none; }
@keyframes tc-pro-panel-in {
	from { opacity: 0; transform: translateY(12px) scale(.985); }
	to { opacity: 1; transform: none; }
}

/* Bouton fermer (widget icône Elementor) */
.tc-pro-funnel__close {
	position: absolute !important;
	top: 14px;
	right: 14px;
	z-index: 5;
	width: auto !important;
	cursor: pointer;
}
.tc-pro-funnel__close .elementor-icon-wrapper { line-height: 0; }
.tc-pro-funnel__close .elementor-icon {
	width: 40px;
	height: 40px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pro-ivory);
	color: var(--pro-ink) !important;
	font-size: 15px !important;
	transition: background-color .15s ease;
}
.tc-pro-funnel__close .elementor-icon svg {
	width: 15px !important;
	height: 15px !important;
	fill: var(--pro-ink) !important;
}
.tc-pro-funnel__close:hover .elementor-icon { background: var(--pro-line); }
.tc-pro-funnel__close:focus-visible { outline: none; }
.tc-pro-funnel__close:focus-visible .elementor-icon { outline: 3px solid var(--pro-ink); outline-offset: 2px; }

/* Étapes */
.tc-pro-funnel .tc-pro-funnel__steps { margin: 0 52px 28px 0 !important; }
.tc-pro-stepnav ol {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.tc-pro-stepnav__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	text-align: center;
}
.tc-pro-stepnav__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 14px;
	left: calc(50% + 20px);
	right: calc(-50% + 20px);
	height: 2px;
	border-radius: 2px;
	background: var(--pro-line);
}
.tc-pro-stepnav__item.is-done::after { background: var(--pro-ink); }
.tc-pro-stepnav__num {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid var(--pro-line);
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--pro-muted);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tc-pro-stepnav__item.is-active .tc-pro-stepnav__num {
	background: var(--pro-lime);
	border-color: var(--pro-lime);
	color: var(--pro-ink);
}
.tc-pro-stepnav__item.is-done .tc-pro-stepnav__num {
	background: var(--pro-ink);
	border-color: var(--pro-ink);
	color: var(--pro-lime);
}
.tc-pro-stepnav__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--pro-muted);
}
.tc-pro-stepnav__item.is-active .tc-pro-stepnav__label { color: var(--pro-ink); }

.tc-pro-step-panel { display: none !important; }
.tc-pro-step-panel.is-active { display: block !important; }

.tc-pro-step__title {
	margin: 0 0 8px;
	font-family: var(--pro-h);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.08;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--pro-ink);
}
.tc-pro-step__title[tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; }
.tc-pro-step__sub {
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pro-muted);
}
.tc-pro-step__sub strong { color: var(--pro-ink); font-weight: 700; }

.tc-pro-step__actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}
.tc-pro-step__actions .tc-pro-btn--ghost { margin-right: auto; }
.tc-pro-step__actions--center { justify-content: center; }
.tc-pro-step__actions--center .tc-pro-btn--ghost { margin-right: 0; }

/* Étape 1 — choix du projet (même composant que les sujets du contact) */
.tc-pro-type-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
/* 7 choix sur 2 colonnes : le dernier prend toute la ligne au lieu de laisser un trou */
.tc-pro-type-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tc-pro-type-btn {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	margin: 0;
	padding: 14px 48px 14px 18px;
	text-align: left;
	background: #fff;
	border: 1.5px solid var(--pro-line);
	border-radius: 14px;
	font-family: var(--pro-b);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--pro-ink);
	cursor: pointer;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.tc-pro-type-btn:hover {
	border-color: var(--pro-ink);
	background: #fff;
	color: var(--pro-ink);
	transform: translateY(-2px);
}
.tc-pro-type-btn:focus-visible {
	outline: 3px solid var(--pro-ink);
	outline-offset: 3px;
}
.tc-pro-type-btn.is-selected {
	border-color: var(--pro-lime);
	background: rgba(183, 228, 28, .08);
	box-shadow: 0 0 0 1px var(--pro-lime) inset;
	transform: none;
}
.tc-pro-type-btn.is-selected::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 22px;
	height: 22px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--pro-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 12px;
}

/* Étape 2 — champs (mêmes réglages que le formulaire de contact) */
.tc-pro-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.tc-pro-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
}
.tc-pro-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
/* les champs conditionnels sont pilotés par l'attribut [hidden] */
.tc-pro-field[hidden] { display: none !important; }
.tc-pro-field--full,
.tc-pro-field--check,
.tc-pro-field--file { grid-column: 1 / -1; }

.tc-pro-field > label {
	margin: 0;
	font-family: var(--pro-b);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pro-ink);
}
.tc-pro-field input[type="text"],
.tc-pro-field input[type="email"],
.tc-pro-field input[type="tel"],
.tc-pro-field input[type="date"],
.tc-pro-field textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid var(--pro-field);
	border-radius: 10px;
	font-family: var(--pro-b);
	font-size: 16px;
	line-height: 1.4;
	color: var(--pro-ink);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tc-pro-field input::placeholder,
.tc-pro-field textarea::placeholder { color: #94908A; opacity: 1; }
.tc-pro-field textarea { min-height: 130px; resize: vertical; }
.tc-pro-field input[type="date"] { -webkit-appearance: none; appearance: none; }
.tc-pro-field input:focus,
.tc-pro-field textarea:focus {
	outline: none;
	border-color: var(--pro-ink);
	box-shadow: 0 0 0 3px rgba(183, 228, 28, .55);
}
.tc-pro-field .tc-fv-invalid {
	border-color: var(--pro-red) !important;
	background: #FFF7F7 !important;
	box-shadow: 0 0 0 1px var(--pro-red) inset !important;
}
.tc-pro-field .tc-fv-valid { border-color: #8DB510 !important; }
.tc-pro-field .tc-fv-error {
	display: block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pro-red);
}
.tc-pro-field .tc-fv-error:empty { display: none; }
.tc-pro-field .tc-fv-error:not(:empty)::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--pro-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	vertical-align: 1px;
}

.tc-pro-checklabel {
	display: flex !important;
	align-items: center;
	gap: 10px;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	cursor: pointer;
}
.tc-pro-checklabel input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--pro-ink);
	cursor: pointer;
}

/* La validation partagée marque aussi la case à cocher : rien à valider ici. */
.tc-pro-checklabel input[type="checkbox"].tc-fv-valid,
.tc-pro-checklabel input[type="checkbox"].tc-fv-invalid { box-shadow: none !important; background: none !important; }

.tc-pro-field input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
	background: var(--pro-ivory);
	border: 1.5px dashed var(--pro-field);
	border-radius: 10px;
	font-family: var(--pro-b);
	font-size: 14px;
	color: var(--pro-muted);
	cursor: pointer;
}
.tc-pro-field input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--pro-ink);
	color: #fff;
	font-family: var(--pro-b);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.tc-pro-field input[type="file"]:hover::file-selector-button { background: var(--pro-lime); color: var(--pro-ink); }
.tc-pro-field input[type="file"]:focus-visible { outline: 3px solid var(--pro-ink); outline-offset: 2px; }
.tc-pro-field__hint {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--pro-muted);
}

/* Étape 3 — récapitulatif */
.tc-pro-recap {
	margin: 0 0 20px;
	padding: 4px 20px;
	background: var(--pro-ivory);
	border-radius: 14px;
}
.tc-pro-recap__row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pro-line);
}
.tc-pro-recap__row:last-child { border-bottom: 0; }
.tc-pro-recap__row[hidden] { display: none; }
.tc-pro-recap__row--full { grid-template-columns: 1fr; gap: 6px; }
.tc-pro-recap__row dt {
	margin: 0;
	padding: 0 !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--pro-muted);
}
.tc-pro-recap__row dd {
	margin: 0;
	padding: 0 !important;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--pro-ink);
	overflow-wrap: anywhere;
	white-space: pre-line;
}

/* Étape 4 — confirmation (même rendu que le succès du contact) */
.tc-pro-confirm {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 8px 0 4px;
}
.tc-pro-confirm__icon {
	width: 76px;
	height: 76px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 18px;
	border-radius: 50%;
	background: var(--pro-lime);
	color: var(--pro-ink);
	animation: tc-pro-pop .35s ease-out;
}
.tc-pro-confirm__icon svg { width: 36px; height: 36px; }
@keyframes tc-pro-pop {
	from { opacity: 0; transform: scale(.6); }
	to { opacity: 1; transform: none; }
}
.tc-pro-confirm .tc-pro-step__sub { max-width: 46ch; }
.tc-pro-confirm .tc-pro-step__actions { margin-top: 8px; }

/* ------------------------------------------------------------------ */
/* Tablette (≤ 1024px)                                                 */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.tc-pro-audience__grid,
	.tc-pro-solutions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tc-pro-volume__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tc-pro-process__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 24px !important;
		background: none !important;
	}

	.tc-pro-hero__trust { grid-template-columns: minmax(0, 1fr); gap: 14px !important; }
}

/* ------------------------------------------------------------------ */
/* Petite tablette / mobile (≤ 880px) — hero empilé, comme « À propos » */
/* ------------------------------------------------------------------ */

@media (max-width: 880px) {
	.tc-pro-hero__inner {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.tc-pro-hero__text,
	.elementor-widget.tc-pro-hero__img {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: none;
	}
	.tc-pro-hero .tc-pro-hero__img { margin-bottom: 14px !important; }
	.tc-pro-hero__img img { aspect-ratio: 4 / 3; object-position: center 30%; }
	.tc-pro-hero__img::after { left: -8px; bottom: -8px; }
	.tc-pro-hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Mobile (≤ 767px)                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.tc-pro-hero__ctas { flex-direction: column !important; width: 100%; }
	.tc-pro-hero__ctas .elementor-widget-button,
	.elementor-widget-button.tc-pro-btn .elementor-button { width: 100%; }
	.tc-pro-hero__trust { grid-template-columns: minmax(0, 1fr); }

	.tc-pro-audience__grid,
	.tc-pro-solutions__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 12px !important;
	}
	.tc-pro-card .elementor-icon-box-wrapper {
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 14px;
		padding: 18px 16px;
	}
	.tc-pro-card--clickable .elementor-icon-box-wrapper { padding-right: 40px; }
	.tc-pro-card--clickable .elementor-icon-box-wrapper::after { right: 18px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg); }
	.tc-pro-card--clickable:hover .elementor-icon-box-wrapper::after { transform: translateY(-50%) rotate(45deg); }
	.tc-pro-card .elementor-icon { width: 42px; height: 42px; font-size: 18px !important; }
	.tc-pro-card .elementor-icon svg { width: 18px !important; height: 18px !important; }
	.tc-pro-card .elementor-icon-box-content { flex: 1 1 auto; }
	.tc-pro-card .elementor-icon-box-title { font-size: 17px !important; margin-bottom: 4px !important; }
	.tc-pro-card .elementor-icon-box-wrapper:hover { transform: none; }

	.tc-pro-volume__intro .elementor-widget-button { width: 100%; }
	.tc-pro-volume__tiers { gap: 10px !important; }
	.tc-pro-tier { padding: 22px 12px !important; }
	.tc-pro-tier__price p { font-size: 12px !important; padding: 5px 10px; }

	/* frise verticale, comme « À propos » */
	.tc-pro-process__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px !important;
		background: repeating-linear-gradient(180deg, rgba(17, 17, 17, .28) 0 8px, transparent 8px 14px) 27px 20px / 2px calc(100% - 40px) no-repeat !important;
	}
	.tc-pro-process-step {
		display: grid !important;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 4px !important;
		align-items: start !important;
		text-align: left;
	}
	.tc-pro-process .tc-pro-process-step__num { grid-row: 1 / span 2; margin-bottom: 0 !important; }
	.tc-pro-process-step__title { padding-top: 6px; }
	.elementor-widget.tc-pro-process-step__text { grid-column: 2; max-width: none; }

	.tc-pro-cta .elementor-widget-button { width: 100%; }

	/* Tunnel plein écran */
	.tc-pro-funnel { padding: 0 !important; align-items: stretch !important; }
	.tc-pro-funnel__panel {
		width: 100% !important;
		height: 100%;
		max-height: none;
		border-radius: 0;
		padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
	}
	.tc-pro-funnel__close { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
	.tc-pro-funnel .tc-pro-funnel__steps { margin-bottom: 22px !important; }
	.tc-pro-stepnav__label { display: none; }
	.tc-pro-stepnav__item:not(:last-child)::after { left: calc(50% + 18px); right: calc(-50% + 18px); }

	.tc-pro-type-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.tc-pro-type-btn:hover { transform: none; }
	.tc-pro-field-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.tc-pro-field { grid-column: 1 / -1; }

	.tc-pro-step__actions { flex-direction: column-reverse; }
	.tc-pro-step__actions .tc-pro-btn { width: 100%; }
	.tc-pro-step__actions .tc-pro-btn--ghost { margin-right: 0; }

	.tc-pro-recap { padding: 2px 16px; }
	.tc-pro-recap__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (max-width: 360px) {
	.tc-pro-hero__title .elementor-heading-title { font-size: 34px !important; }
	.tc-pro-sec-title .elementor-heading-title { font-size: 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.tc-pro-funnel__panel,
	.tc-pro-confirm__icon { animation: none; }
	.tc-pro-card .elementor-icon-box-wrapper,
	.tc-pro-type-btn,
	.tc-pro-tier,
	.tc-pro-btn,
	.elementor-widget-button.tc-pro-btn .elementor-button { transition: none !important; }
}