/**
 * 3D Communication – Page d'accueil
 * -----------------------------------------------------------------------------
 * Styles spécifiques aux 7 sections de la Home, convertis fidèlement depuis le
 * composant React Home.tsx. Chargé uniquement sur la page d'accueil (perf).
 * Réutilise au maximum les primitives du design system ; n'ajoute ici que ce
 * qui est propre aux sections. Aucune valeur n'est réinventée.
 * -----------------------------------------------------------------------------
 */

/* ---- Utilitaires minimaux (préfixés, sans fuite vers Elementor) ---- */
.tc-center { text-align: center; }
.tc-mb-1 { margin-bottom: var(--tc-space-1); }
.tc-mb-3 { margin-bottom: var(--tc-space-3); }
.tc-mb-4 { margin-bottom: var(--tc-space-4); }
.tc-mb-5 { margin-bottom: var(--tc-space-5); }
.tc-mb-6 { margin-bottom: var(--tc-space-6); }
.tc-mb-8 { margin-bottom: var(--tc-space-8); }
.tc-mb-10 { margin-bottom: var(--tc-space-10); }
.tc-mb-12 { margin-bottom: var(--tc-space-12); }
.tc-mt-1 { margin-top: var(--tc-space-1); }

/* Colonne à deux volets (React : grid lg:grid-cols-2 gap-16 items-center). */
.tc-split {
	display: grid;
	gap: var(--tc-space-16);
	align-items: center;
}
@media (min-width: 1024px) {
	.tc-split { grid-template-columns: repeat(2, 1fr); }
}

/* Grille de 3 cartes (React : grid md:grid-cols-3 gap-8). */
.tc-cards-3 {
	display: grid;
	gap: var(--tc-space-8);
}
@media (min-width: 768px) {
	.tc-cards-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Empilement vertical avec espacement (React : space-y-6). */
.tc-stack-6 > * + * { margin-top: var(--tc-space-6); }

/* Rangée de boutons (React : flex flex-col sm:flex-row gap-4 justify-center). */
.tc-btn-row {
	display: flex;
	flex-direction: column;
	gap: var(--tc-space-4);
	justify-content: center;
}
@media (min-width: 640px) {
	.tc-btn-row { flex-direction: row; }
}

/* Paragraphe secondaire (React : text-gray-600 dark:text-gray-300 leading-relaxed). */
.tc-body-muted {
	color: var(--tc-muted);
	line-height: var(--tc-leading-relaxed);
}

/* Lead centré et borné (React : max-w-3xl mx-auto sur les intros de section). */
.tc-section-header .tc-lead {
	max-width: 48rem;
	margin-inline: auto;
}

/* Badge « CTA » sur fond sombre (React : bg-accent/20 border accent/50 accent-light font-medium). */
.tc-badge--cta {
	background-color: rgba(187, 159, 72, 0.2);
	border: 1px solid rgba(187, 159, 72, 0.5);
	color: var(--tc-accent-light);
	font-weight: var(--tc-weight-medium);
}

/* =========================================================================
 * HERO
 * ========================================================================= */
.tc-hero__inner {
	position: relative;
	z-index: 20;
}

.tc-hero__title {
	font-size: var(--tc-text-4xl);
	font-weight: var(--tc-weight-bold);
	line-height: var(--tc-leading-tight);
	margin-bottom: var(--tc-space-6);
}
@media (min-width: 1024px) {
	.tc-hero__title { font-size: var(--tc-text-6xl); }
}

.tc-hero__subtitle {
	font-size: var(--tc-text-xl);
	line-height: var(--tc-leading-relaxed);
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--tc-space-10);
}
@media (min-width: 1024px) {
	.tc-hero__subtitle { font-size: var(--tc-text-2xl); }
}

.tc-hero__fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 8rem; /* h-32 */
	z-index: 20;
	background: linear-gradient(to top, var(--tc-white), transparent);
}
.dark .tc-hero__fade {
	background: linear-gradient(to top, var(--tc-gray-900), transparent);
}

/* =========================================================================
 * À PROPOS (AboutSection)
 * ========================================================================= */
.tc-about__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--tc-space-6);
	margin-bottom: var(--tc-space-8);
}

.tc-about__media { position: relative; }

/* Paragraphes d'introduction « À propos » (React : text-lg gray-700, leading-relaxed). */
.tc-about__text {
	font-size: var(--tc-text-lg);
	color: var(--tc-muted-strong);
	line-height: var(--tc-leading-relaxed);
}

.tc-about__frame {
	position: relative;
	border-radius: var(--tc-radius-2xl);
	overflow: hidden;
	box-shadow: var(--tc-shadow-2xl);
}
.tc-about__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tc-about__frame-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(1, 45, 56, 0.5), transparent);
}

.tc-about__card {
	position: absolute;
	bottom: -1.5rem; /* -bottom-6 */
	left: -1.5rem;   /* -left-6 */
	max-width: 20rem; /* max-w-xs */
	padding: var(--tc-space-6);
	border-radius: var(--tc-radius-xl);
	background-color: var(--tc-accent-light);
	color: var(--tc-primary);
	box-shadow: var(--tc-shadow-xl);
}
.dark .tc-about__card {
	background-color: var(--tc-accent);
	color: var(--tc-white);
}
.tc-about__card-title {
	font-weight: var(--tc-weight-semibold);
	margin-bottom: var(--tc-space-1);
}
.tc-about__card-text {
	font-size: var(--tc-text-sm);
	color: rgba(1, 45, 56, 0.8);
}
.dark .tc-about__card-text {
	color: rgba(255, 255, 255, 0.8);
}

/* =========================================================================
 * SERVICES / lien « En savoir plus » spécifique (hover:gap-2 + arrow ml-1)
 * ========================================================================= */
.tc-link-arrow--svc {
	display: inline-flex;
	align-items: center;
	color: var(--tc-accent-text);
	font-weight: var(--tc-weight-medium);
	text-decoration: none;
	transition: var(--tc-transition-all);
}
.tc-link-arrow--svc .tc-icon { margin-left: 0.25rem; } /* ml-1 */
.tc-link-arrow--svc:hover { gap: var(--tc-space-2); } /* hover:gap-2 */

/* =========================================================================
 * FORMATION (FormationSection)
 * ========================================================================= */
.tc-formation {
	position: relative;
	overflow: hidden;
}
.tc-formation__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.05; /* opacity-5 */
}
.dark .tc-formation__bg { opacity: 0.1; } /* dark:opacity-10 */
.tc-formation__inner {
	position: relative;
	z-index: 10;
}

/* Bloc « fonctionnalité » à gauche. */
.tc-feature {
	display: flex;
	align-items: flex-start;
	gap: var(--tc-space-4);
	padding: var(--tc-space-4);
	border-radius: var(--tc-radius-lg);
}
.tc-feature--1 { background: linear-gradient(to right, rgba(252, 192, 132, 0.1), transparent); }
.tc-feature--2 { background: linear-gradient(to right, rgba(187, 159, 72, 0.1), transparent); }
.tc-feature--3 { background: linear-gradient(to right, rgba(1, 45, 56, 0.1), transparent); }
.tc-feature__icon {
	width: 3rem;  /* w-12 */
	height: 3rem;
	background-color: var(--tc-accent);
	border-radius: var(--tc-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Carte formation à droite. */
.tc-formation-card {
	background-color: var(--tc-card-bg);
	border: 2px solid var(--tc-gray-100);
	border-radius: var(--tc-radius-xl);
	padding: var(--tc-space-6);
	box-shadow: var(--tc-shadow-lg);
	transition: var(--tc-transition-all);
}
.dark .tc-formation-card {
	border-color: var(--tc-gray-700);
}
.tc-formation-card:hover {
	border-color: var(--tc-accent);
	box-shadow: var(--tc-shadow-xl);
}
.dark .tc-formation-card:hover {
	border-color: var(--tc-accent-light);
}
.tc-formation-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--tc-space-4);
}
.tc-formation-card__title-wrap {
	display: flex;
	align-items: center;
	gap: var(--tc-space-4);
}
.tc-formation-card__icon {
	width: 3.5rem; /* w-14 */
	height: 3.5rem;
	border-radius: var(--tc-radius-lg);
	background: linear-gradient(to bottom right, var(--tc-accent), var(--tc-accent-hover));
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--tc-duration) ease;
}
.tc-formation-card:hover .tc-formation-card__icon {
	transform: scale(1.1); /* group-hover:scale-110 */
}
.tc-formation-card__tags {
	display: flex;
	gap: var(--tc-space-3);
}
.tc-tag {
	padding: var(--tc-space-2) var(--tc-space-4);
	border-radius: var(--tc-radius-lg);
	font-weight: var(--tc-weight-medium);
}
.tc-tag--duration {
	background-color: rgba(252, 192, 132, 0.2);
	color: var(--tc-primary);
}
.dark .tc-tag--duration {
	background-color: rgba(252, 192, 132, 0.3);
	color: var(--tc-accent-light);
}
.tc-tag--level {
	background-color: rgba(1, 45, 56, 0.1);
	color: var(--tc-primary);
}
.dark .tc-tag--level {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--tc-white);
}

/* =========================================================================
 * BLOG (BlogSection) – variantes de carte média
 * ========================================================================= */
.tc-media-card__overlay--blog {
	background: linear-gradient(to top, rgba(1, 45, 56, 0.9), rgba(1, 45, 56, 0.4), transparent);
}
.tc-media-card__body--compact { padding: var(--tc-space-6); } /* p-6 */

.tc-media-card__tags {
	position: absolute;
	top: var(--tc-space-4);
	left: var(--tc-space-4);
	display: flex;
	gap: var(--tc-space-2);
	z-index: 1;
}
.tc-chip {
	padding: var(--tc-space-1) var(--tc-space-3);
	background-color: var(--tc-accent);
	color: var(--tc-white);
	border-radius: var(--tc-radius-full);
	font-size: var(--tc-text-sm);
	font-weight: var(--tc-weight-medium);
}
.tc-media-card__meta {
	position: absolute;
	bottom: var(--tc-space-4);
	left: var(--tc-space-4);
	color: var(--tc-white);
	z-index: 1;
}
.tc-media-card__meta-line {
	font-size: var(--tc-text-sm);
	margin-bottom: var(--tc-space-1);
}
.tc-media-card__date {
	font-size: var(--tc-text-sm);
	color: var(--tc-gray-500);
	margin-bottom: var(--tc-space-3);
}
.dark .tc-media-card__date { color: var(--tc-gray-400); }

.tc-media-card__title {
	font-size: var(--tc-text-xl);
	font-weight: var(--tc-weight-bold);
	line-height: var(--tc-leading-tight);
	color: var(--tc-heading);
	margin-bottom: var(--tc-space-3);
	transition: var(--tc-transition-colors);
}
.tc-media-card:hover .tc-media-card__title {
	color: var(--tc-accent-text); /* group-hover:text-accent / accent-light */
}

/* =========================================================================
 * TÉMOIGNAGES (TestimonialsSection)
 * ========================================================================= */
.tc-testimonials {
	position: relative;
	overflow: hidden;
	padding-block: var(--tc-space-24);
	background: linear-gradient(to bottom right, var(--tc-primary), var(--tc-primary-light));
}
.tc-testimonials__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.05;
}
.tc-testimonials__inner {
	position: relative;
	z-index: 10;
}
.tc-testimonials__title {
	font-size: var(--tc-text-3xl);
	font-weight: var(--tc-weight-bold);
	color: var(--tc-white);
	margin-bottom: var(--tc-space-6);
}
@media (min-width: 1024px) {
	.tc-testimonials__title { font-size: var(--tc-text-5xl); }
}
.tc-testimonials__lead {
	font-size: var(--tc-text-xl);
	line-height: var(--tc-leading-relaxed);
	color: rgba(255, 255, 255, 0.8);
	max-width: 48rem;
	margin-inline: auto;
}

.tc-testimonial {
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--tc-radius-2xl);
	padding: var(--tc-space-8);
	box-shadow: var(--tc-shadow-xl);
	transition: var(--tc-transition-all);
}
.tc-testimonial:hover {
	background-color: rgba(255, 255, 255, 0.15);
	transform: translateY(-0.5rem);
}
.tc-testimonial__stars {
	display: flex;
	align-items: center;
	gap: var(--tc-space-1);
	margin-bottom: var(--tc-space-6);
}
.tc-testimonial__star {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--tc-accent-light);
	line-height: 1;
}
.tc-testimonial__quote {
	width: 3rem;  /* w-12 */
	height: 3rem;
	color: rgba(187, 159, 72, 0.3);
	margin-bottom: var(--tc-space-4);
}
.tc-testimonial__text {
	font-size: var(--tc-text-lg);
	font-style: italic;
	line-height: var(--tc-leading-relaxed);
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--tc-space-6);
}
.tc-testimonial__author {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: var(--tc-space-6);
}
.tc-testimonial__name {
	font-size: var(--tc-text-lg);
	font-weight: var(--tc-weight-bold);
	color: var(--tc-white);
	margin-bottom: var(--tc-space-1);
}
.tc-testimonial__role {
	color: var(--tc-accent-light);
	font-weight: var(--tc-weight-medium);
}
.tc-testimonial__company {
	font-size: var(--tc-text-sm);
	color: rgba(255, 255, 255, 0.6);
	margin-top: var(--tc-space-1);
}

/* =========================================================================
 * CONTACT / CTA (ContactSection)
 * ========================================================================= */
.tc-cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--tc-radius-3xl);
	padding: var(--tc-space-12);
	color: var(--tc-white);
	text-align: center;
	box-shadow: var(--tc-shadow-2xl);
	background: linear-gradient(to bottom right, var(--tc-primary), var(--tc-primary-light), var(--tc-primary));
}
@media (min-width: 1024px) {
	.tc-cta { padding: var(--tc-space-16); } /* lg:p-16 */
}
.dark .tc-cta {
	background: linear-gradient(to bottom right, var(--tc-gray-800), var(--tc-gray-900), var(--tc-gray-800));
}
.tc-cta__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.1;
}
.tc-cta__inner {
	position: relative;
	z-index: 10;
}
.tc-cta__title {
	font-size: var(--tc-text-3xl);
	font-weight: var(--tc-weight-bold);
	line-height: var(--tc-leading-tight);
	margin-bottom: var(--tc-space-6);
}
@media (min-width: 1024px) {
	.tc-cta__title { font-size: var(--tc-text-5xl); }
}
.tc-cta__lead {
	font-size: var(--tc-text-xl);
	line-height: var(--tc-leading-relaxed);
	color: rgba(255, 255, 255, 0.9);
	max-width: 48rem;
	margin-inline: auto;
	margin-bottom: var(--tc-space-10);
}
.tc-cta__stats {
	margin-top: var(--tc-space-12);
	display: grid;
	gap: var(--tc-space-6);
	max-width: 48rem;
	margin-inline: auto;
}
@media (min-width: 768px) {
	.tc-cta__stats { grid-template-columns: repeat(3, 1fr); }
}
.tc-cta__stat {
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--tc-radius-lg);
	padding: var(--tc-space-4);
}
.tc-cta__stat-number {
	font-size: var(--tc-text-3xl);
	font-weight: var(--tc-weight-bold);
	color: var(--tc-accent-light);
	margin-bottom: var(--tc-space-1);
}
.tc-cta__stat-label {
	font-size: var(--tc-text-sm);
	color: rgba(255, 255, 255, 0.8);
}