/* ==========================================================================
   SERVICES PAGES — V1a refonte premium (2026-05-12)
   Cible : /services/ hub + 6 sous-services (sites-web/apps/ecom/cloud/design/seo)
   Chargé conditionnellement par inc/enqueue.php (body.ca-internal-page).
   Cyber + IA → V1b (patterns spéciaux : attack-timeline, démo chatbot).
   ========================================================================== */

/* ==========================================================================
   GLOBAL SECTION PADDING — reduce Elementor's baked padding values site-wide
   pour rapprocher les sections (tailles plus compactes premium).
   ========================================================================== */
.ca-internal-page section.elementor-section.elementor-top-section {
	padding-block: clamp(24px, 3vw, 40px) !important;
}
.ca-internal-page > .elementor section.elementor-top-section[class*="elementor-element"] {
	padding-top: clamp(24px, 3vw, 40px) !important;
	padding-bottom: clamp(24px, 3vw, 40px) !important;
}

/* Kill Elementor's default column padding 10px qui ajoute 20px entre 2 sections */
.ca-internal-page .elementor-widget-wrap.elementor-element-populated,
.ca-internal-page .elementor-element-populated {
	padding: 0 !important;
}

/* ==========================================================================
   FULL-BLEED FIX — appliquer --ca-bg-deep aux SECTIONS Elementor contenant
   les widgets DEEP, sinon le bg reste limité à la largeur 1325px du widget
   et les côtés affichent le bg crème de la page.
   ========================================================================== */
.ca-internal-page section.elementor-section:has(.ca-service-hero),
.ca-internal-page section.elementor-section:has(.ca-ptl),
.ca-internal-page section.elementor-section:has(.ca-ptl-section) {
	background: var(--ca-bg-deep) !important;
	color: #fff;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-block: 1px solid rgba(0,229,255,0.10);
}

/* Sections deep : padding piloté ici (pas par widget) — évite double padding */
.ca-internal-page section.elementor-section:has(.ca-service-hero) {
	padding-block: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 48px) !important;
}
.ca-internal-page section.elementor-section:has(.ca-ptl),
.ca-internal-page section.elementor-section:has(.ca-ptl-section) {
	padding-block: clamp(24px, 3vw, 40px) !important;
}
/* CTA — section transparente (fond clair), card visible sur la colonne.
   Padding bas seulement (la card a son propre padding interne, et la section
   précédente a déjà padding-bottom → pas besoin de doubler en padding-top). */
.ca-internal-page section.elementor-section:has(.ca-ctab) {
	background: var(--ca-bg-light) !important;
	padding-block: 0 clamp(24px, 3vw, 40px) !important;
}
/* Le widget .ca-ctab redevient la "card" visible avec son gradient + blobs */
.ca-internal-page .ca-ctab {
	background: linear-gradient(135deg, #0A0F1E 0%, #0D1A36 50%, #0A0F1E 100%) !important;
	border-radius: 28px !important;
	padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-inline: 0 !important;
	overflow: hidden !important;
	isolation: isolate;
	box-shadow: 0 32px 80px -24px rgba(10,15,30,0.35), 0 0 100px -30px rgba(0,229,255,0.25);
}
.ca-internal-page .ca-ctab::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 45% 50% at 18% 25%, rgba(0,229,255,0.18) 0%, transparent 65%),
		radial-gradient(ellipse 45% 55% at 82% 75%, rgba(27,108,242,0.20) 0%, transparent 65%),
		radial-gradient(ellipse 60% 40% at 50% 110%, rgba(123,47,247,0.12) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}
/* Z-index pour ramener le contenu au-dessus des blobs décoratifs (qui restent absolute) */
.ca-internal-page .ca-ctab .ca-ctab__inner {
	position: relative;
	z-index: 3;
}
.ca-internal-page .ca-ctab .ca-ctab__blob {
	position: absolute !important;
}
.ca-internal-page .ca-ctab .ca-ctab__blob--1 { top: -100px !important; right: -100px !important; }
.ca-internal-page .ca-ctab .ca-ctab__blob--2 { bottom: -80px !important; left: -80px !important; top: auto !important; }
.ca-internal-page .ca-ctab .ca-ctab__noise {
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none;
}

/* Les widgets internes deviennent transparents ET sans padding puisque la
   section porte le bg + le padding. Évite les "double backgrounds" et le
   double-padding qui crée des espaces vides en haut/bas de section. */
.ca-internal-page section.elementor-section:has(.ca-service-hero) .ca-service-hero,
.ca-internal-page section.elementor-section:has(.ca-ptl) .ca-ptl,
.ca-internal-page section.elementor-section:has(.ca-ptl-section) .ca-ptl-section,
.ca-internal-page .elementor-widget-clickapp-service-hero,
.ca-internal-page .elementor-widget-clickapp-process-timeline,
.ca-internal-page .elementor-widget-clickapp-cta-banner,
.ca-internal-page .elementor-widget-clickapp-comparison-table,
.ca-internal-page .elementor-widget-clickapp-faq-accordion,
.ca-internal-page .elementor-widget-clickapp-recognition-items,
.ca-internal-page .elementor-widget-clickapp-features-grid,
.ca-internal-page .elementor-widget-clickapp-services-pricing-blocks {
	background: transparent !important;
	border-block: none !important;
	padding-block: 0 !important;
	margin-block: 0 !important;
}

/* Et les widgets eux-mêmes — pas de padding interne supplémentaire qui doublonne
   (sauf .ca-ctab qui DOIT garder son padding card — voir top du fichier) */
.ca-internal-page .ca-service-hero,
.ca-internal-page .ca-ptl,
.ca-internal-page .ca-ptl-section,
.ca-internal-page .ca-cmp,
.ca-internal-page .ca-faq,
.ca-internal-page .ca-recog,
.ca-internal-page .ca-feat,
.ca-internal-page .ca-svcp {
	padding-block: 0 !important;
}

/* ==========================================================================
   §1 HERO — clickapp-service-hero (.ca-service-hero)
   Upgrade vers composition --ca-bg-deep + visuel deep + CTAs premium
   ========================================================================== */
.ca-internal-page .ca-service-hero {
	background: var(--ca-bg-deep) !important;
	padding: clamp(72px, 8vw, 110px) 0 clamp(56px, 7vw, 90px) !important;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ca-internal-page .ca-service-hero__orb--blue { opacity: 0.22 !important; }
.ca-internal-page .ca-service-hero__orb--cyan { opacity: 0.18 !important; }
.ca-internal-page .ca-service-hero__orb--purple { opacity: 0.14 !important; }

/* FIX double-background hero : neutraliser overlay décoratif du widget
   (.ca-service-hero__bg avec noise+grid+blobs) — la section parente porte déjà
   la composition deep-blue + glows, l'overlay créait un "card inner" visible. */
.ca-internal-page .ca-service-hero__bg,
.ca-internal-page .ca-service-hero__noise,
.ca-internal-page .ca-service-hero__grid,
.ca-internal-page .ca-service-hero__orb,
.ca-internal-page .ca-service-hero__blob {
	display: none !important;
}

.ca-internal-page .ca-service-hero__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 48px);
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	position: relative;
	z-index: 5;
}
@media (min-width: 980px) {
	.ca-internal-page .ca-service-hero__inner {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		align-items: center;
		gap: 64px;
	}
}

.ca-internal-page .ca-service-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--ca-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #00E5FF;
	margin-bottom: 20px;
}
.ca-internal-page .ca-service-eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: currentColor;
}

.ca-internal-page .ca-service-hero__title {
	font-size: var(--ca-fs-h1);
	line-height: 1.04;
	letter-spacing: -0.04em;
	font-weight: 700;
	margin: 0 0 24px;
	color: #fff;
}
.ca-internal-page .ca-service-hero__title em,
.ca-internal-page .ca-service-hero__title strong {
	background: var(--ca-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: normal;
	font-weight: inherit;
}

.ca-internal-page .ca-service-hero__lead {
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	color: rgba(255,255,255,0.78);
	max-width: 60ch;
	margin: 0 0 36px;
}

.ca-internal-page .ca-service-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 36px;
}
.ca-internal-page .ca-service-hero__cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #1B6CF2 0%, #00E5FF 100%);
	border-radius: 14px;
	text-decoration: none;
	min-height: 52px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 8px 32px rgba(0,229,255,0.30);
}
.ca-internal-page .ca-service-hero__cta-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(0,229,255,0.45);
}
.ca-internal-page .ca-service-hero__cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	font-weight: 600;
	color: #fff;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.15);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 14px;
	text-decoration: none;
	min-height: 52px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.ca-internal-page .ca-service-hero__cta-secondary:hover {
	border-color: rgba(0,229,255,0.40);
	background: rgba(0,229,255,0.06);
}

.ca-internal-page .ca-service-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	font-size: 13px;
	color: rgba(255,255,255,0.66);
}
.ca-internal-page .ca-service-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ca-internal-page .ca-service-hero__trust-item .iconify {
	color: #00E5FF;
	font-size: 16px;
}

.ca-internal-page .ca-service-hero__visual {
	position: relative;
	min-height: 320px;
}
.ca-internal-page .ca-service-hero__visual-rings {
	filter: drop-shadow(0 30px 80px rgba(27,108,242,0.30));
}

.ca-internal-page .ca-service-hero__float-card {
	background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(0,229,255,0.15);
	border-radius: 16px;
	padding: 14px 18px;
	color: #fff;
	box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.ca-internal-page .ca-service-hero__float-card__num {
	font-size: 1.5rem;
	font-weight: 700;
	background: var(--ca-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: 1;
}
.ca-internal-page .ca-service-hero__float-card__label {
	font-size: 11px;
	color: rgba(255,255,255,0.65);
	margin-top: 4px;
}

@media (max-width: 767px) {
	.ca-internal-page .ca-service-hero__cta-primary,
	.ca-internal-page .ca-service-hero__cta-secondary {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   §2 PROMESSE — clickapp-recognition-items (.ca-recog)
   Section light, 3 colonnes "Ce qu'on fait pour vous"
   ========================================================================== */
.ca-internal-page .ca-recog {
	padding: 0 !important;
	position: relative;
}
.ca-internal-page section.elementor-section:has(.ca-recog) {
	background: var(--ca-bg-light) !important;
	padding-block: clamp(24px, 3vw, 40px) !important;
}

.ca-internal-page .ca-recog .ca-container,
.ca-internal-page .ca-recog__inner {
	max-width: 1240px !important;
	margin-inline: auto !important;
	padding-inline: clamp(16px, 4vw, 48px) !important;
}

.ca-internal-page .ca-recog__head {
	text-align: left;
	margin-bottom: 32px;
	max-width: 720px;
}
.ca-internal-page .ca-recog__eyebrow {
	display: inline-block;
	font-size: var(--ca-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1B6CF2;
	margin-bottom: 16px;
}
.ca-internal-page .ca-recog__title {
	font-size: var(--ca-fs-h2);
	line-height: 1.06;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0 0 20px;
}
.ca-internal-page .ca-recog__title em,
.ca-internal-page .ca-recog__title strong {
	background: var(--ca-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: inherit;
	font-style: normal;
}

.ca-internal-page .ca-recog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 640px) {
	.ca-internal-page .ca-recog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 980px) {
	.ca-internal-page .ca-recog__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

.ca-internal-page .ca-recog__card {
	background: #fff;
	border: 1px solid rgba(10,15,30,0.06);
	border-radius: 20px;
	padding: 32px 28px;
	transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s, box-shadow 0.4s;
	box-shadow: var(--ca-shadow-card-light);
}
.ca-internal-page .ca-recog__card:hover {
	transform: translateY(-6px);
	border-color: rgba(27,108,242,0.20);
	box-shadow: var(--ca-shadow-card-hover-blue);
}

.ca-internal-page .ca-recog__card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.ca-internal-page .ca-recog__icon {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(27,108,242,0.10), rgba(0,229,255,0.06));
	border-radius: 12px;
	color: #1B6CF2;
	font-size: 24px;
	flex-shrink: 0;
}

.ca-internal-page .ca-recog__problem {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0;
	line-height: 1.3;
}

.ca-internal-page .ca-recog__answer {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ca-ink-2, #3A3A38);
	margin: 0;
}

/* ==========================================================================
   §3 PRICING — clickapp-services-pricing-blocks (.ca-svcp)
   Section light, 3 packs avec badge "Recommandé"
   ========================================================================== */
.ca-internal-page .ca-svcp {
	padding: 0 !important;
	position: relative;
}
.ca-internal-page section.elementor-section:has(.ca-svcp) {
	background: var(--ca-bg-light-soft) !important;
	padding-block: clamp(24px, 3vw, 40px) !important;
}

.ca-internal-page .ca-svcp .ca-container,
.ca-internal-page .ca-svcp__inner {
	max-width: 1240px !important;
	margin-inline: auto !important;
	padding-inline: clamp(16px, 4vw, 48px) !important;
}

.ca-internal-page .ca-svcp__head {
	text-align: center;
	margin-bottom: 36px;
	max-width: 720px;
	margin-inline: auto;
}
.ca-internal-page .ca-svcp__eyebrow {
	display: inline-block;
	font-size: var(--ca-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1B6CF2;
	margin-bottom: 16px;
}
.ca-internal-page .ca-svcp__title {
	font-size: var(--ca-fs-h2);
	line-height: 1.06;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0 0 16px;
}
.ca-internal-page .ca-svcp__lead {
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.55;
	color: var(--ca-ink-2, #3A3A38);
	margin: 0;
}

.ca-internal-page .ca-svcp__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.ca-internal-page .ca-svcp__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
		align-items: stretch;
	}
}

.ca-internal-page .ca-svcp__card {
	background: #fff;
	border: 1px solid rgba(10,15,30,0.08);
	border-radius: 24px;
	padding: 40px 32px;
	transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s, box-shadow 0.4s;
	box-shadow: var(--ca-shadow-card-light);
	position: relative;
	display: flex;
	flex-direction: column;
}
.ca-internal-page .ca-svcp__card:hover {
	transform: translateY(-8px);
	border-color: rgba(27,108,242,0.25);
	box-shadow: var(--ca-shadow-card-hover-blue);
}

.ca-internal-page .ca-svcp__card--featured,
.ca-internal-page .ca-svcp__card.is-featured {
	background: linear-gradient(180deg, #fff 0%, #F0F9FF 100%);
	border-color: rgba(0,229,255,0.35);
	box-shadow: 0 24px 60px rgba(0,229,255,0.18);
}
@media (min-width: 768px) {
	.ca-internal-page .ca-svcp__card--featured,
	.ca-internal-page .ca-svcp__card.is-featured {
		transform: scale(1.03);
	}
}

.ca-internal-page .ca-svcp__card-head {
	margin-bottom: 24px;
}

.ca-internal-page .ca-svcp__icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(27,108,242,0.10), rgba(0,229,255,0.06));
	border-radius: 10px;
	color: #1B6CF2;
	font-size: 20px;
	margin-bottom: 16px;
}

.ca-internal-page .ca-svcp__card-title {
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0 0 8px;
	letter-spacing: -0.02em;
}

.ca-internal-page .ca-svcp__card-desc {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--ca-ink-2, #3A3A38);
	margin: 0;
}

.ca-internal-page .ca-svcp__footer {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	align-items: stretch !important;
	margin-top: auto;
}
.ca-internal-page .ca-svcp__price {
	display: block;
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	line-height: 1.3;
	margin: 0;
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: normal;
}
.ca-internal-page .ca-svcp__cta {
	width: 100%;
	justify-content: center;
}
.ca-internal-page .ca-svcp__price small,
.ca-internal-page .ca-svcp__price span {
	font-size: 0.85em;
	font-weight: 500;
	color: var(--ca-ink-2, #3A3A38);
}

.ca-internal-page .ca-svcp__features {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.ca-internal-page .ca-svcp__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ca-ink, #0A0A09);
}
.ca-internal-page .ca-svcp__features li::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	background: linear-gradient(135deg, #1B6CF2, #00E5FF);
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.ca-internal-page .ca-svcp__footer { margin-top: auto; }

.ca-internal-page .ca-svcp__cta {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	font-weight: 700;
	color: #1B6CF2;
	background: rgba(27,108,242,0.06);
	border: 1px solid rgba(27,108,242,0.20);
	border-radius: 12px;
	text-decoration: none;
	min-height: 48px;
	transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.ca-internal-page .ca-svcp__cta:hover {
	background: linear-gradient(135deg, #1B6CF2, #00E5FF);
	color: #fff;
	transform: translateY(-2px);
}
.ca-internal-page .ca-svcp__card--featured .ca-svcp__cta,
.ca-internal-page .ca-svcp__card.is-featured .ca-svcp__cta {
	background: linear-gradient(135deg, #1B6CF2, #00E5FF);
	color: #fff;
	border-color: transparent;
}

/* ==========================================================================
   §4 FEATURES — clickapp-features-grid (.ca-feat)
   Section light, grid 4 cols icônes + titre + description
   ========================================================================== */
.ca-internal-page .ca-feat {
	padding: 0 !important;
	position: relative;
}
.ca-internal-page section.elementor-section:has(.ca-feat) {
	background: var(--ca-bg-light) !important;
	padding-block: clamp(24px, 3vw, 40px) !important;
}

.ca-internal-page .ca-feat .ca-container,
.ca-internal-page .ca-feat__inner {
	max-width: 1240px !important;
	margin-inline: auto !important;
	padding-inline: clamp(16px, 4vw, 48px) !important;
}

.ca-internal-page .ca-feat__head {
	text-align: center;
	margin-bottom: 36px;
	max-width: 720px;
	margin-inline: auto;
}
.ca-internal-page .ca-feat__eyebrow {
	display: inline-block;
	font-size: var(--ca-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #00E5FF;
	margin-bottom: 16px;
}
.ca-internal-page .ca-feat__title {
	font-size: var(--ca-fs-h2);
	line-height: 1.06;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0 0 16px;
}
.ca-internal-page .ca-feat__lead {
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.55;
	color: var(--ca-ink-2, #3A3A38);
	margin: 0;
}

.ca-internal-page .ca-feat__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 640px) {
	.ca-internal-page .ca-feat__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 980px) {
	.ca-internal-page .ca-feat__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

.ca-internal-page .ca-feat__item {
	background: #fff;
	border: 1px solid rgba(10,15,30,0.05);
	border-radius: 18px;
	padding: 28px 24px;
	transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s, box-shadow 0.4s;
	box-shadow: var(--ca-shadow-card-light);
}
.ca-internal-page .ca-feat__item:hover {
	transform: translateY(-4px);
	border-color: rgba(0,229,255,0.30);
	box-shadow: var(--ca-shadow-card-hover-cyan);
}

.ca-internal-page .ca-feat__icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(0,229,255,0.10), rgba(27,108,242,0.06));
	border-radius: 10px;
	color: #00E5FF;
	margin-bottom: 16px;
	font-size: 22px;
}
.ca-internal-page .ca-feat__item-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.ca-internal-page .ca-feat__item-desc {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--ca-ink-2, #3A3A38);
	margin: 0;
}

/* ==========================================================================
   §5 PROCESS — clickapp-process-timeline (.ca-ptl)
   Section deep, cards glassmorphism
   ========================================================================== */
.ca-internal-page .ca-ptl,
.ca-internal-page .ca-ptl-section {
	color: #fff !important;
	padding: 0 !important;
	position: relative;
	isolation: isolate;
}

.ca-internal-page .ca-ptl::before,
.ca-internal-page .ca-ptl-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0,229,255,0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,229,255,0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, #000 30%, transparent 90%);
	-webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, #000 30%, transparent 90%);
	pointer-events: none;
	z-index: 1;
}

.ca-internal-page .ca-ptl > *,
.ca-internal-page .ca-ptl-section > * {
	position: relative;
	z-index: 2;
}

.ca-internal-page .ca-ptl .ca-container,
.ca-internal-page .ca-ptl__inner {
	max-width: 1240px !important;
	margin-inline: auto !important;
	padding-inline: clamp(16px, 4vw, 48px) !important;
}

.ca-internal-page .ca-ptl__head,
.ca-internal-page .ca-ptl-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 36px;
}

.ca-internal-page .ca-ptl__section-title,
.ca-internal-page .ca-ptl__title {
	font-size: var(--ca-fs-h2);
	line-height: 1.06;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: #fff;
	margin: 0 0 16px;
}
.ca-internal-page .ca-ptl__section-title em,
.ca-internal-page .ca-ptl__title em,
.ca-internal-page .ca-ptl__section-title strong,
.ca-internal-page .ca-ptl__title strong {
	background: var(--ca-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: inherit;
	font-style: normal;
}
.ca-internal-page .ca-ptl__section-sub {
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.55;
	color: rgba(255,255,255,0.72);
	margin: 0;
}

.ca-internal-page .ca-ptl__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.ca-internal-page .ca-ptl__steps {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 20px;
	}
}

.ca-internal-page .ca-ptl__step,
.ca-internal-page .ca-ptl__card {
	background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(0,229,255,0.12);
	border-radius: 20px;
	padding: 28px 24px;
	color: #fff;
	transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s, box-shadow 0.4s;
	position: relative;
}
.ca-internal-page .ca-ptl__step:hover,
.ca-internal-page .ca-ptl__card:hover {
	transform: translateY(-6px);
	border-color: rgba(0,229,255,0.35);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.08) inset,
		var(--ca-shadow-card-hover-cyan);
}

.ca-internal-page .ca-ptl__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 14px;
	font-weight: 700;
	color: #00E5FF;
	background: rgba(0,229,255,0.10);
	border: 1px solid rgba(0,229,255,0.25);
	border-radius: 12px;
	margin-bottom: 18px;
}
.ca-internal-page .ca-ptl__icon {
	color: #00E5FF;
	margin-bottom: 14px;
	font-size: 22px;
}
.ca-internal-page .ca-ptl__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
.ca-internal-page .ca-ptl__desc {
	font-size: 0.9rem;
	line-height: 1.55;
	color: rgba(255,255,255,0.75);
	margin: 0;
}

/* ==========================================================================
   §6 COMPARISON — clickapp-comparison-table (.ca-cmp) — ajouté via Task 9
   Section light, 2 colonnes Eux/Nous
   ========================================================================== */
.ca-internal-page .ca-cmp {
	padding: 0 !important;
	position: relative;
	background: transparent !important;
}
.ca-internal-page section.elementor-section:has(.ca-cmp) {
	background: var(--ca-bg-light) !important;
	padding-block: clamp(24px, 3vw, 40px) !important;
}

.ca-internal-page .ca-cmp .ca-container,
.ca-internal-page .ca-cmp__inner {
	max-width: 1120px !important;
	margin-inline: auto !important;
	padding-inline: clamp(16px, 4vw, 48px) !important;
}

.ca-internal-page .ca-cmp__head {
	text-align: center;
	margin-bottom: 32px;
	max-width: 720px;
	margin-inline: auto;
}
.ca-internal-page .ca-cmp__eyebrow {
	display: inline-block;
	font-size: var(--ca-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1B6CF2;
	margin-bottom: 16px;
}
.ca-internal-page .ca-cmp__title {
	font-size: var(--ca-fs-h2);
	line-height: 1.06;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0;
}
.ca-internal-page .ca-cmp__title em,
.ca-internal-page .ca-cmp__title strong {
	background: var(--ca-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: inherit;
	font-style: normal;
}

.ca-internal-page .ca-cmp__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 768px) {
	.ca-internal-page .ca-cmp__grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
}

.ca-internal-page .ca-cmp__col {
	background: #fff !important;
	border: 1px solid rgba(10,15,30,0.06) !important;
	border-radius: 24px;
	padding: 36px 28px;
	box-shadow: var(--ca-shadow-card-light);
}
.ca-internal-page .ca-cmp__col--right {
	background: linear-gradient(145deg, #fff 0%, #F0F9FF 100%) !important;
	border-color: rgba(0,229,255,0.30) !important;
	box-shadow: 0 12px 40px rgba(0,229,255,0.12);
}

.ca-internal-page .ca-cmp__col-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}
.ca-internal-page .ca-cmp__col-icon {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(122,122,118,0.10);
	color: var(--ca-ink-3, #7A7A76);
	font-size: 18px;
}
.ca-internal-page .ca-cmp__col--right .ca-cmp__col-icon {
	background: linear-gradient(135deg, rgba(27,108,242,0.10), rgba(0,229,255,0.06));
	color: #1B6CF2;
}
.ca-internal-page .ca-cmp__col-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0;
}
.ca-internal-page .ca-cmp__col--right .ca-cmp__col-title {
	background: var(--ca-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ca-internal-page .ca-cmp__list,
.ca-internal-page .ca-cmp__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ca-internal-page .ca-cmp__list li,
.ca-internal-page .ca-cmp__items li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--ca-ink-2, #3A3A38);
	padding-bottom: 14px;
	border-bottom: 1px dashed rgba(10,15,30,0.06);
}
.ca-internal-page .ca-cmp__list li:last-child,
.ca-internal-page .ca-cmp__items li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
/* Icons are rendered by the widget itself (ca_icon x/check) — no ::before needed. */
.ca-internal-page .ca-cmp__list li .ca-icon,
.ca-internal-page .ca-cmp__items li .ca-icon {
	flex-shrink: 0;
	margin-top: 2px;
	width: 18px;
	height: 18px;
}
.ca-internal-page .ca-cmp__list li > span,
.ca-internal-page .ca-cmp__items li > span {
	flex: 1;
}
.ca-internal-page .ca-cmp__col-label .ca-icon {
	margin-right: 4px;
}

/* ==========================================================================
   §7 FAQ — clickapp-faq-accordion (.ca-faq)
   Section light, accordion expansible
   ========================================================================== */
.ca-internal-page .ca-faq {
	padding: 0 !important;
	position: relative;
}
.ca-internal-page section.elementor-section:has(.ca-faq) {
	background: var(--ca-bg-light-soft) !important;
	padding-block: clamp(24px, 3vw, 40px) !important;
}

.ca-internal-page .ca-faq .ca-container,
.ca-internal-page .ca-faq__inner {
	max-width: 880px !important;
	margin-inline: auto !important;
	padding-inline: clamp(16px, 4vw, 48px) !important;
}

.ca-internal-page .ca-faq__head {
	text-align: center;
	margin-bottom: 32px;
}
.ca-internal-page .ca-faq__eyebrow {
	display: inline-block;
	font-size: var(--ca-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1B6CF2;
	margin-bottom: 16px;
}
.ca-internal-page .ca-faq__title {
	font-size: var(--ca-fs-h2);
	line-height: 1.06;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0;
}

.ca-internal-page .ca-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ca-internal-page .ca-faq__item {
	background: #fff;
	border: 1px solid rgba(10,15,30,0.06);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ca-internal-page .ca-faq__item:hover {
	border-color: rgba(27,108,242,0.20);
}
.ca-internal-page .ca-faq__item[open] {
	border-color: rgba(27,108,242,0.35);
	box-shadow: 0 12px 32px rgba(27,108,242,0.08);
}

.ca-internal-page .ca-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ca-ink, #0A0A09);
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	min-height: 56px;
	transition: color 0.2s ease;
}
.ca-internal-page .ca-faq__q:hover {
	color: #1B6CF2;
}
.ca-internal-page .ca-faq__chevron {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(27,108,242,0.08);
	color: #1B6CF2;
	font-size: 18px;
	transition: transform 0.3s ease, background 0.2s ease;
}
.ca-internal-page .ca-faq__item[open] .ca-faq__chevron {
	transform: rotate(180deg);
	background: linear-gradient(135deg, #1B6CF2, #00E5FF);
	color: #fff;
}
.ca-internal-page .ca-faq__a {
	padding: 0 24px 22px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ca-ink-2, #3A3A38);
}

/* ==========================================================================
   §8 CTA BANNER — clickapp-cta-banner (.ca-ctab)
   Style "card" porté par .ca-ctab (section transparente, voir top du fichier)
   ========================================================================== */
.ca-internal-page .ca-ctab {
	color: #fff !important;
}

.ca-internal-page .ca-ctab__inner {
	max-width: 960px !important;
	margin-inline: auto !important;
	padding-inline: clamp(16px, 4vw, 48px) !important;
	text-align: center;
	position: relative;
	z-index: 2;
}

.ca-internal-page .ca-ctab__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: #00E5FF;
	background: rgba(0,229,255,0.10);
	border: 1px solid rgba(0,229,255,0.25);
	border-radius: 999px;
	margin-bottom: 24px;
}
.ca-internal-page .ca-ctab__title {
	font-size: clamp(2rem, 4vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -0.04em;
	font-weight: 700;
	color: #fff;
	margin: 0 0 20px;
}
.ca-internal-page .ca-ctab__title em,
.ca-internal-page .ca-ctab__title strong {
	background: var(--ca-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: inherit;
	font-style: normal;
}
.ca-internal-page .ca-ctab__sub {
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	line-height: 1.55;
	color: rgba(255,255,255,0.78);
	margin: 0 auto 36px;
	max-width: 56ch;
}

.ca-internal-page .ca-ctab__features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 20px;
	margin: 0 0 32px;
	font-size: 14px;
	color: rgba(255,255,255,0.72);
}
.ca-internal-page .ca-ctab__features li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ca-internal-page .ca-ctab__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.ca-internal-page .ca-ctab__actions .ca-btn,
.ca-internal-page .ca-ctab__actions a.ca-btn--primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 36px;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #1B6CF2 0%, #00E5FF 100%);
	border-radius: 14px;
	text-decoration: none;
	min-height: 56px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 12px 40px rgba(0,229,255,0.30);
}
.ca-internal-page .ca-ctab__actions .ca-btn:hover,
.ca-internal-page .ca-ctab__actions a.ca-btn--primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 50px rgba(0,229,255,0.50);
}

@media (max-width: 600px) {
	.ca-internal-page .ca-ctab__actions .ca-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   PER-PAGE COLOR ACCENTS — eyebrows colorisés par catégorie service
   287 sites-web=bleu | 288 apps=cyan | 289 ecom=orange
   290 cloud=violet  | 291 design=pink | 292 seo=amber
   ========================================================================== */

body.page-id-287 .ca-internal-page .ca-recog__eyebrow,
body.page-id-287 .ca-internal-page .ca-svcp__eyebrow,
body.page-id-287 .ca-internal-page .ca-cmp__eyebrow,
body.page-id-287 .ca-internal-page .ca-faq__eyebrow,
body.page-id-287 .ca-internal-page .ca-feat__eyebrow,
.page-id-287.ca-internal-page .ca-recog__eyebrow,
.page-id-287.ca-internal-page .ca-svcp__eyebrow,
.page-id-287.ca-internal-page .ca-cmp__eyebrow,
.page-id-287.ca-internal-page .ca-faq__eyebrow,
.page-id-287.ca-internal-page .ca-feat__eyebrow {
	color: #1B6CF2;
}

.page-id-288.ca-internal-page .ca-recog__eyebrow,
.page-id-288.ca-internal-page .ca-svcp__eyebrow,
.page-id-288.ca-internal-page .ca-cmp__eyebrow,
.page-id-288.ca-internal-page .ca-faq__eyebrow,
.page-id-288.ca-internal-page .ca-feat__eyebrow,
.page-id-288.ca-internal-page .ca-service-eyebrow {
	color: #00E5FF;
}

.page-id-289.ca-internal-page .ca-recog__eyebrow,
.page-id-289.ca-internal-page .ca-svcp__eyebrow,
.page-id-289.ca-internal-page .ca-cmp__eyebrow,
.page-id-289.ca-internal-page .ca-faq__eyebrow,
.page-id-289.ca-internal-page .ca-feat__eyebrow,
.page-id-289.ca-internal-page .ca-service-eyebrow {
	color: #FF7A00;
}
.page-id-289.ca-internal-page .ca-recog__icon,
.page-id-289.ca-internal-page .ca-feat__icon,
.page-id-289.ca-internal-page .ca-svcp__icon {
	background: linear-gradient(135deg, rgba(255,122,0,0.12), rgba(255,184,0,0.06));
	color: #FF7A00;
}

.page-id-290.ca-internal-page .ca-recog__eyebrow,
.page-id-290.ca-internal-page .ca-svcp__eyebrow,
.page-id-290.ca-internal-page .ca-cmp__eyebrow,
.page-id-290.ca-internal-page .ca-faq__eyebrow,
.page-id-290.ca-internal-page .ca-feat__eyebrow,
.page-id-290.ca-internal-page .ca-service-eyebrow {
	color: #7B2FF7;
}
.page-id-290.ca-internal-page .ca-recog__icon,
.page-id-290.ca-internal-page .ca-feat__icon,
.page-id-290.ca-internal-page .ca-svcp__icon {
	background: linear-gradient(135deg, rgba(123,47,247,0.12), rgba(27,108,242,0.06));
	color: #7B2FF7;
}

.page-id-291.ca-internal-page .ca-recog__eyebrow,
.page-id-291.ca-internal-page .ca-svcp__eyebrow,
.page-id-291.ca-internal-page .ca-cmp__eyebrow,
.page-id-291.ca-internal-page .ca-faq__eyebrow,
.page-id-291.ca-internal-page .ca-feat__eyebrow,
.page-id-291.ca-internal-page .ca-service-eyebrow {
	color: #FF2E8A;
}
.page-id-291.ca-internal-page .ca-recog__icon,
.page-id-291.ca-internal-page .ca-feat__icon,
.page-id-291.ca-internal-page .ca-svcp__icon {
	background: linear-gradient(135deg, rgba(255,46,138,0.12), rgba(255,122,0,0.06));
	color: #FF2E8A;
}

.page-id-292.ca-internal-page .ca-recog__eyebrow,
.page-id-292.ca-internal-page .ca-svcp__eyebrow,
.page-id-292.ca-internal-page .ca-cmp__eyebrow,
.page-id-292.ca-internal-page .ca-faq__eyebrow,
.page-id-292.ca-internal-page .ca-feat__eyebrow,
.page-id-292.ca-internal-page .ca-service-eyebrow {
	color: #FFB800;
}
.page-id-292.ca-internal-page .ca-recog__icon,
.page-id-292.ca-internal-page .ca-feat__icon,
.page-id-292.ca-internal-page .ca-svcp__icon {
	background: linear-gradient(135deg, rgba(255,184,0,0.12), rgba(255,122,0,0.06));
	color: #FFB800;
}

/* ==========================================================================
   PREMIUM CARDS UPGRADE — mirroring home services cards quality
   Hover translateY(-12px) + multi-layer tinted shadow with category glow
   ========================================================================== */

/* Default per-card tint (bleu) — override par page-id si différent */
.ca-internal-page {
	--card-glow: rgba(0,229,255,0.45);
	--card-tint: rgba(0,229,255,0.18);
	--card-accent: #00E5FF;
}
.page-id-287.ca-internal-page { --card-glow: rgba(27,108,242,0.45); --card-tint: rgba(27,108,242,0.18); --card-accent: #1B6CF2; }
.page-id-288.ca-internal-page { --card-glow: rgba(0,229,255,0.45); --card-tint: rgba(0,229,255,0.18); --card-accent: #00E5FF; }
.page-id-289.ca-internal-page { --card-glow: rgba(255,122,0,0.45); --card-tint: rgba(255,122,0,0.18); --card-accent: #FF7A00; }
.page-id-290.ca-internal-page { --card-glow: rgba(123,47,247,0.45); --card-tint: rgba(123,47,247,0.18); --card-accent: #7B2FF7; }
.page-id-291.ca-internal-page { --card-glow: rgba(255,46,138,0.45); --card-tint: rgba(255,46,138,0.18); --card-accent: #FF2E8A; }
.page-id-292.ca-internal-page { --card-glow: rgba(255,184,0,0.45); --card-tint: rgba(255,184,0,0.18); --card-accent: #FFB800; }

/* Recognition cards — premium upgrade */
.ca-internal-page .ca-recog__card {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
	border-radius: 22px;
	padding: 30px 26px;
	position: relative;
	overflow: hidden;
}
.ca-internal-page .ca-recog__card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--card-accent), transparent);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.ca-internal-page .ca-recog__card:hover {
	transform: translateY(-12px) !important;
	box-shadow:
		0 0 0 1px var(--card-tint),
		0 32px 60px -16px rgba(10,15,30,0.22),
		0 0 90px -20px var(--card-glow) !important;
}
.ca-internal-page .ca-recog__card:hover::before {
	opacity: 1;
}
.ca-internal-page .ca-recog__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	font-size: 26px;
	background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 60%, #fff));
	color: #fff;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--card-accent) 30%, transparent);
}

/* Features cards — premium upgrade */
.ca-internal-page .ca-feat__item {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
	border-radius: 20px;
	padding: 26px 22px;
	position: relative;
	overflow: hidden;
}
.ca-internal-page .ca-feat__item::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--card-accent), transparent);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.ca-internal-page .ca-feat__item:hover {
	transform: translateY(-10px) !important;
	box-shadow:
		0 0 0 1px var(--card-tint),
		0 28px 50px -16px rgba(10,15,30,0.20),
		0 0 80px -20px var(--card-glow) !important;
}
.ca-internal-page .ca-feat__item:hover::before {
	opacity: 1;
}
.ca-internal-page .ca-feat__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	font-size: 24px;
	background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 60%, #fff));
	color: #fff;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--card-accent) 30%, transparent);
}

/* Pricing cards — premium upgrade */
.ca-internal-page .ca-svcp__card {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
	border-radius: 24px;
}
.ca-internal-page .ca-svcp__card:hover {
	transform: translateY(-12px) !important;
	box-shadow:
		0 0 0 1px var(--card-tint),
		0 36px 70px -18px rgba(10,15,30,0.22),
		0 0 100px -22px var(--card-glow) !important;
}
.ca-internal-page .ca-svcp__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	font-size: 24px;
	background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 60%, #fff));
	color: #fff;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--card-accent) 30%, transparent);
}

/* Pricing featured card — accent border + glow toujours visible */
.ca-internal-page .ca-svcp__card--featured,
.ca-internal-page .ca-svcp__card.is-featured {
	background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--card-accent) 6%, #fff) 100%) !important;
	border-color: color-mix(in srgb, var(--card-accent) 35%, transparent) !important;
	box-shadow:
		0 0 0 1px var(--card-tint),
		0 24px 60px color-mix(in srgb, var(--card-accent) 18%, transparent) !important;
}

/* FAQ items — premium upgrade */
.ca-internal-page .ca-faq__item {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.35s !important;
}
.ca-internal-page .ca-faq__item:hover {
	transform: translateY(-2px);
	border-color: var(--card-accent) !important;
}
.ca-internal-page .ca-faq__item[open] {
	border-color: var(--card-accent) !important;
	box-shadow: 0 12px 32px color-mix(in srgb, var(--card-accent) 12%, transparent) !important;
}
.ca-internal-page .ca-faq__chevron {
	background: color-mix(in srgb, var(--card-accent) 10%, transparent);
	color: var(--card-accent);
}
.ca-internal-page .ca-faq__item[open] .ca-faq__chevron {
	background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 60%, #fff));
	color: #fff;
}

/* Comparison right column accent */
.ca-internal-page .ca-cmp__col--right {
	background: linear-gradient(145deg, #fff 0%, color-mix(in srgb, var(--card-accent) 8%, #fff) 100%) !important;
	border-color: color-mix(in srgb, var(--card-accent) 30%, transparent) !important;
	box-shadow: 0 12px 40px color-mix(in srgb, var(--card-accent) 12%, transparent) !important;
}
.ca-internal-page .ca-cmp__col--right .ca-cmp__col-title {
	background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 50%, #00E5FF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ==========================================================================
   "NOS 6 EXPÉRIENCES" — section ca-services sur /services/ hub
   Layout 3×2 (au lieu de 5+1 orphelin) + cartes proche du carré + premium
   Color-coded par nth-child : bleu | cyan | violet | orange | pink | amber
   ========================================================================== */

.ca-internal-page section.ca-services {
	background: var(--ca-bg-light) !important;
	padding: clamp(40px, 5vw, 64px) 0 !important;
	position: relative;
	overflow: hidden;
}

.ca-internal-page .ca-services > .ca-container,
.ca-internal-page section.ca-services .ca-container {
	max-width: 1240px !important;
	margin-inline: auto !important;
	padding-inline: clamp(16px, 4vw, 48px) !important;
}

.ca-internal-page .ca-services__head {
	text-align: center;
	margin-bottom: 36px;
	max-width: 720px;
	margin-inline: auto;
}
.ca-internal-page .ca-services__title {
	font-size: var(--ca-fs-h2);
	line-height: 1.06;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--ca-ink, #0A0A09);
	margin: 0 0 16px;
}
.ca-internal-page .ca-services__sub {
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.55;
	color: var(--ca-ink-2, #3A3A38);
	margin: 0;
}

/* Force 3 cols × 2 rows sur le hub services */
.ca-internal-page section.ca-services .ca-grid-3 {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 24px !important;
}
@media (min-width: 640px) {
	.ca-internal-page section.ca-services .ca-grid-3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (min-width: 980px) {
	.ca-internal-page section.ca-services .ca-grid-3 {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 28px !important;
	}
}

/* Cards carrées-ish (aspect 1:1 sur desktop ≥ 980px, libre en mobile) */
.ca-internal-page section.ca-services .ca-service-card {
	background: #fff !important;
	border: 1px solid rgba(10,15,30,0.06) !important;
	border-radius: 24px !important;
	padding: 36px 30px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	min-height: auto !important;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
	box-shadow: 0 12px 40px rgba(10,15,30,0.06);
	position: relative;
	overflow: hidden;
}
@media (min-width: 980px) {
	.ca-internal-page section.ca-services .ca-service-card {
		aspect-ratio: 1 / 1 !important;
		padding: 40px 32px !important;
	}
}

/* Toutes les cartes utilisent la palette bleu/cyan signature ClickApp */
.ca-internal-page section.ca-services .ca-service-card {
	--svc-accent: #1B6CF2;
	--svc-accent-2: #00E5FF;
	--svc-glow: rgba(0,229,255,0.40);
	--svc-tint: rgba(27,108,242,0.18);
}
/* Alternance bleu primary / cyan accent pour rythme visuel */
.ca-internal-page section.ca-services .ca-service-card:nth-child(odd) {
	--svc-accent: #1B6CF2;
	--svc-accent-2: #00E5FF;
}
.ca-internal-page section.ca-services .ca-service-card:nth-child(even) {
	--svc-accent: #00E5FF;
	--svc-accent-2: #1B6CF2;
}

/* Top accent bar gradient au hover */
.ca-internal-page section.ca-services .ca-service-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--svc-accent, #1B6CF2), transparent);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.ca-internal-page section.ca-services .ca-service-card:hover {
	transform: translateY(-12px) !important;
	box-shadow:
		0 0 0 1px var(--svc-tint, rgba(27,108,242,0.18)),
		0 32px 60px -16px rgba(10,15,30,0.22),
		0 0 90px -20px var(--svc-glow, rgba(27,108,242,0.45)) !important;
}
.ca-internal-page section.ca-services .ca-service-card:hover::before {
	opacity: 1;
}

/* Icon : gradient plein bleu→cyan + icône blanc + drop-shadow cyan */
.ca-internal-page section.ca-services .ca-service-card__icon {
	width: 60px !important;
	height: 60px !important;
	border-radius: 16px !important;
	font-size: 28px !important;
	background: linear-gradient(135deg, var(--svc-accent, #1B6CF2), var(--svc-accent-2, #00E5FF)) !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 0 !important;
	box-shadow: 0 10px 24px rgba(0,229,255,0.30);
	transition: transform 0.3s ease;
}
.ca-internal-page section.ca-services .ca-service-card:hover .ca-service-card__icon {
	transform: scale(1.08);
}

/* Titre carte */
.ca-internal-page section.ca-services .ca-service-card__title {
	font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.18;
	color: var(--ca-ink, #0A0A09);
	margin: 0 !important;
}

/* Description tronquée à 3 lignes */
.ca-internal-page section.ca-services .ca-service-card__desc {
	font-size: 0.92rem !important;
	line-height: 1.55 !important;
	color: var(--ca-ink-2, #3A3A38) !important;
	flex: 1 1 auto !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	margin: 0 !important;
}

/* Link "En savoir plus" — gradient bleu→cyan + flèche qui glisse */
.ca-internal-page section.ca-services .ca-service-card__link {
	font-size: 0.9rem !important;
	font-weight: 600;
	background: linear-gradient(90deg, #1B6CF2, #00E5FF);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	border-top: 1px solid rgba(228,228,224,0.7);
	padding-top: 14px !important;
	margin-top: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px;
	text-decoration: none;
	transition: filter 0.3s ease;
}
.ca-internal-page section.ca-services .ca-service-card__link::after,
.ca-internal-page section.ca-services .ca-service-card__link .arrow {
	content: '→';
	display: inline-block;
	background: linear-gradient(90deg, #1B6CF2, #00E5FF);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ca-internal-page section.ca-services .ca-service-card:hover .ca-service-card__link {
	filter: brightness(1.1);
}
.ca-internal-page section.ca-services .ca-service-card:hover .ca-service-card__link::after,
.ca-internal-page section.ca-services .ca-service-card:hover .ca-service-card__link .arrow {
	transform: translateX(8px);
}


/* ==========================================================================
   WIZARD CONTAINER OVERRIDE (V1 wizard premium — 2026-05-12)
   Centre + max-width sur pages internes où le wizard est embarqué
   ========================================================================== */
.ca-internal-page .caw-wiz {
	max-width: 960px;
	margin-inline: auto;
}