/**
 * 3D Communication – Pages internes
 * -----------------------------------------------------------------------------
 * Styles des sections des pages Services, Formation, Blog et Contact, convertis
 * fidèlement depuis le React. Réutilise les tokens du design system. Chargé sur
 * les pages Elementor et là où ces sections sont utilisées.
 * -----------------------------------------------------------------------------
 */

/* ---- Grilles ---- */
.tc-cards-2 { display: grid; gap: var(--tc-space-8); }
@media (min-width: 1024px) { .tc-cards-2 { grid-template-columns: repeat(2, 1fr); } }

.tc-cards-4 { display: grid; gap: var(--tc-space-8); }
@media (min-width: 768px)  { .tc-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tc-cards-4 { grid-template-columns: repeat(4, 1fr); } }
.tc-gap-6 { gap: var(--tc-space-6); }

/* ---- Titres de section « pages internes » (3xl / lg:4xl, sous-titre lg) ---- */
.tc-h2-inner {
	font-size: var(--tc-text-3xl);
	font-weight: var(--tc-weight-bold);
	line-height: var(--tc-leading-tight);
	color: var(--tc-heading);
}
@media (min-width: 1024px) { .tc-h2-inner { font-size: var(--tc-text-4xl); } }
.tc-lead-sm { font-size: var(--tc-text-lg); line-height: var(--tc-leading-normal); color: var(--tc-muted); }
.tc-section-header .tc-lead-sm { max-width: 42rem; margin-inline: auto; }
.tc-card-title { font-size: var(--tc-text-xl); font-weight: var(--tc-weight-semibold); color: var(--tc-heading); }
.tc-measure-2xl { max-width: 42rem; margin-inline: auto; }

/* =========================================================================
 * SERVICES – carte de service (liste)
 * ========================================================================= */
.tc-service-item {
	background-color: var(--tc-surface);
	border: 1px solid var(--tc-gray-100);
	border-radius: var(--tc-radius-xl);
	padding: var(--tc-space-8);
	box-shadow: var(--tc-shadow-lg);
	transition: var(--tc-transition-all);
}
.dark .tc-service-item { background-color: var(--tc-gray-800); }
.tc-service-item:hover { border-color: var(--tc-accent); }
.tc-service-item__head { display: flex; align-items: flex-start; gap: var(--tc-space-4); margin-bottom: var(--tc-space-6); }
.tc-icon-box {
	width: 3.5rem; height: 3.5rem; flex-shrink: 0;
	background-color: rgba(187, 159, 72, 0.1);
	border-radius: var(--tc-radius-lg);
	display: flex; align-items: center; justify-content: center;
	color: var(--tc-accent);
}
.tc-service-item__title { font-size: var(--tc-text-2xl); font-weight: var(--tc-weight-semibold); color: var(--tc-heading); margin-bottom: var(--tc-space-2); }

/* Liste à puces « check » (services + formations) */
.tc-feature-list { display: flex; flex-direction: column; gap: var(--tc-space-3); }
.tc-feature-item { display: flex; align-items: center; gap: var(--tc-space-3); }
.tc-feature-item .tc-icon { color: var(--tc-accent); flex-shrink: 0; }
.tc-feature-item span { color: var(--tc-gray-700); }
.dark .tc-feature-item span { color: var(--tc-gray-300); }

/* =========================================================================
 * SERVICES – Méthodologie (étapes numérotées)
 * ========================================================================= */
.tc-step {
	background-color: var(--tc-surface);
	border-radius: var(--tc-radius-xl);
	padding: var(--tc-space-6);
	box-shadow: var(--tc-shadow-lg);
	transition: box-shadow var(--tc-duration) ease;
}
.dark .tc-step { background-color: var(--tc-gray-800); }
.tc-step:hover { box-shadow: var(--tc-shadow-xl); }
.tc-step__number { font-size: var(--tc-text-5xl); font-weight: var(--tc-weight-bold); color: rgba(187, 159, 72, 0.2); margin-bottom: var(--tc-space-4); }

/* =========================================================================
 * FORMATION – Catalogue (carte de cours)
 * ========================================================================= */
.tc-course {
	background-color: var(--tc-surface);
	border: 1px solid var(--tc-gray-100);
	border-radius: var(--tc-radius-xl);
	padding: var(--tc-space-8);
	box-shadow: var(--tc-shadow-lg);
	transition: var(--tc-transition-all);
}
.dark .tc-course { background-color: var(--tc-gray-900); }
.tc-course:hover { border-color: var(--tc-accent); }
.tc-course__title { font-size: var(--tc-text-2xl); font-weight: var(--tc-weight-semibold); color: var(--tc-heading); margin-bottom: var(--tc-space-4); }
.tc-course__tags { display: flex; gap: var(--tc-space-3); margin-bottom: var(--tc-space-4); }
.tc-course__tag { padding: var(--tc-space-1) var(--tc-space-3); border-radius: var(--tc-radius-lg); font-size: var(--tc-text-sm); display: inline-flex; align-items: center; gap: var(--tc-space-2); }
.tc-course__tag--duration { background-color: rgba(187, 159, 72, 0.1); color: var(--tc-accent); }
.tc-course__tag--level { background-color: rgba(1, 45, 56, 0.1); color: var(--tc-primary); }
.dark .tc-course__tag--level { color: var(--tc-white); }
.tc-course__program { font-weight: var(--tc-weight-semibold); color: var(--tc-heading); margin-bottom: var(--tc-space-3); }

/* =========================================================================
 * FORMATION – Bénéfices
 * ========================================================================= */
.tc-benefit {
	background-color: var(--tc-surface);
	border-radius: var(--tc-radius-xl);
	padding: var(--tc-space-6);
	text-align: center;
	box-shadow: var(--tc-shadow-lg);
	transition: var(--tc-transition-all);
}
.dark .tc-benefit { background-color: var(--tc-gray-900); }
.tc-benefit:hover { box-shadow: var(--tc-shadow-xl); }
.tc-benefit__icon {
	width: 4rem; height: 4rem; margin: 0 auto var(--tc-space-4);
	background-color: rgba(187, 159, 72, 0.1);
	border-radius: var(--tc-radius-full);
	display: flex; align-items: center; justify-content: center;
	color: var(--tc-accent);
}

/* =========================================================================
 * FORMATION – Publics visés
 * ========================================================================= */
.tc-audience {
	background-color: var(--tc-surface-2);
	border: 1px solid var(--tc-gray-200);
	border-radius: var(--tc-radius-xl);
	padding: var(--tc-space-6);
	transition: var(--tc-transition-all);
}
.dark .tc-audience { background-color: var(--tc-gray-800); }
.tc-audience:hover { border-color: var(--tc-accent); }

/* =========================================================================
 * BLOG – barre latérale + cartes d'articles
 * ========================================================================= */
.tc-blog-layout { display: grid; gap: var(--tc-space-8); }
@media (min-width: 1024px) { .tc-blog-layout { grid-template-columns: repeat(4, 1fr); } }
.tc-blog-sidebar { grid-column: span 1; }
@media (min-width: 1024px) { .tc-blog-main { grid-column: span 3; } }
.tc-blog-widget { background-color: var(--tc-surface-2); border-radius: var(--tc-radius-xl); padding: var(--tc-space-6); position: sticky; top: var(--tc-space-24); }
.tc-blog-widget__title { font-size: var(--tc-text-xl); font-weight: var(--tc-weight-semibold); color: var(--tc-heading); margin-bottom: var(--tc-space-4); }
.tc-blog-cats { display: flex; flex-direction: column; gap: var(--tc-space-2); }
.tc-blog-cat { width: 100%; text-align: left; padding: var(--tc-space-2) var(--tc-space-4); border-radius: var(--tc-radius-lg); border: none; cursor: pointer; background-color: var(--tc-surface); color: var(--tc-gray-700); transition: var(--tc-transition-colors); font-family: inherit; font-size: var(--tc-text-base); }
.dark .tc-blog-cat { background-color: var(--tc-gray-900); color: var(--tc-gray-300); }
.tc-blog-cat:hover { background-color: var(--tc-gray-100); }
.tc-blog-cat.is-active { background-color: var(--tc-accent); color: var(--tc-white); }
.tc-blog-block { margin-top: var(--tc-space-8); }
.tc-input {
	width: 100%; padding: var(--tc-space-2) var(--tc-space-4);
	border: 1px solid var(--tc-gray-300); border-radius: var(--tc-radius-lg);
	background-color: var(--tc-surface); color: var(--tc-body-text);
	font-family: inherit; font-size: var(--tc-text-base);
}
.dark .tc-input { border-color: var(--tc-gray-600); background-color: var(--tc-gray-800); color: var(--tc-white); }
.tc-input:focus { outline: none; border-color: var(--tc-accent); }
.dark .tc-input:focus { border-color: var(--tc-accent-light); }
.tc-input--search { padding-left: 2.5rem; }
.tc-search { position: relative; }
.tc-search .tc-icon { position: absolute; left: var(--tc-space-3); top: 50%; transform: translateY(-50%); color: var(--tc-gray-400); }
.tc-blog-note { font-size: var(--tc-text-sm); color: var(--tc-muted); margin-bottom: var(--tc-space-4); }
.tc-blog-count { color: var(--tc-muted); margin-bottom: var(--tc-space-6); }
.tc-post-grid { display: grid; gap: var(--tc-space-8); }
@media (min-width: 768px) { .tc-post-grid { grid-template-columns: repeat(2, 1fr); } }

.tc-post-card {
	background-color: var(--tc-surface);
	border: 1px solid var(--tc-gray-100);
	border-radius: var(--tc-radius-xl);
	overflow: hidden;
	box-shadow: var(--tc-shadow-lg);
	transition: var(--tc-transition-all);
}
.dark .tc-post-card { background-color: var(--tc-gray-900); }
.tc-post-card:hover { box-shadow: var(--tc-shadow-xl); transform: translateY(-0.25rem); }
.tc-post-card__media { position: relative; height: 12rem; overflow: hidden; }
.tc-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-post-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(1, 45, 56, 0.8), transparent); }
.tc-post-card__body { padding: var(--tc-space-6); }
.tc-post-card__meta { display: flex; align-items: center; gap: var(--tc-space-2); margin-bottom: var(--tc-space-3); }
.tc-post-card__cat { padding: var(--tc-space-1) var(--tc-space-3); background-color: rgba(187, 159, 72, 0.1); color: var(--tc-accent); border-radius: var(--tc-radius-lg); font-size: var(--tc-text-sm); display: inline-flex; align-items: center; gap: var(--tc-space-1); }
.dark .tc-post-card__cat { color: var(--tc-accent-light); }
.tc-post-card__time { font-size: var(--tc-text-sm); color: var(--tc-gray-500); }
.tc-post-card__title { font-size: var(--tc-text-xl); font-weight: var(--tc-weight-semibold); color: var(--tc-heading); margin-bottom: var(--tc-space-3); transition: var(--tc-transition-colors); }
.tc-post-card:hover .tc-post-card__title { color: var(--tc-accent-text); }
.tc-post-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--tc-space-4); border-top: 1px solid var(--tc-gray-100); }
.dark .tc-post-card__footer { border-color: var(--tc-gray-800); }
.tc-post-card__author { display: flex; align-items: center; gap: var(--tc-space-3); font-size: var(--tc-text-sm); color: var(--tc-gray-500); }
.tc-post-card__author > span { display: inline-flex; align-items: center; gap: var(--tc-space-1); }
.tc-post-card__read { display: inline-flex; align-items: center; gap: var(--tc-space-1); color: var(--tc-accent-text); background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--tc-text-base); transition: var(--tc-transition-all); }
.tc-post-card__read:hover { gap: var(--tc-space-2); }

/* =========================================================================
 * CONTACT – formulaire + informations
 * ========================================================================= */
.tc-form { display: flex; flex-direction: column; gap: var(--tc-space-6); }
.tc-form__row { display: grid; gap: var(--tc-space-6); }
@media (min-width: 768px) { .tc-form__row { grid-template-columns: repeat(2, 1fr); } }
.tc-label { display: block; color: var(--tc-gray-700); margin-bottom: var(--tc-space-2); }
.dark .tc-label { color: var(--tc-gray-300); }
.tc-field .tc-input { padding: var(--tc-space-3) var(--tc-space-4); }
.tc-textarea { resize: none; }
.tc-contact-info { display: flex; flex-direction: column; gap: var(--tc-space-6); margin-bottom: var(--tc-space-8); }
.tc-contact-card { display: flex; align-items: flex-start; gap: var(--tc-space-4); padding: var(--tc-space-6); background-color: var(--tc-surface-2); border-radius: var(--tc-radius-xl); }
.dark .tc-contact-card { background-color: var(--tc-gray-800); }
.tc-contact-card__icon { width: 3rem; height: 3rem; flex-shrink: 0; background-color: rgba(187, 159, 72, 0.1); border-radius: var(--tc-radius-lg); display: flex; align-items: center; justify-content: center; color: var(--tc-accent); }
.tc-contact-card__title { font-weight: var(--tc-weight-semibold); color: var(--tc-heading); margin-bottom: var(--tc-space-2); }
.tc-contact-card a, .tc-contact-card p { color: var(--tc-muted); text-decoration: none; transition: var(--tc-transition-colors); }
.tc-contact-card a:hover { color: var(--tc-accent); }
.tc-quickbox { background: linear-gradient(to bottom right, var(--tc-primary), var(--tc-primary-light)); border-radius: var(--tc-radius-xl); padding: var(--tc-space-8); color: var(--tc-white); }
.tc-quickbox__title { font-size: var(--tc-text-2xl); font-weight: var(--tc-weight-semibold); margin-bottom: var(--tc-space-4); }
.tc-quickbox p { color: rgba(255, 255, 255, 0.9); margin-bottom: var(--tc-space-6); }

/* =========================================================================
 * CONTACT – carte (placeholder)
 * ========================================================================= */
.tc-map { background-color: var(--tc-surface); border-radius: var(--tc-radius-xl); overflow: hidden; box-shadow: var(--tc-shadow-lg); }
.tc-map__inner { width: 100%; height: 24rem; background: linear-gradient(to bottom right, var(--tc-gray-200), var(--tc-gray-300)); display: flex; align-items: center; justify-content: center; text-align: center; }

/* =========================================================================
 * CTA SIMPLE (bloc dégradé centré) – Services / Formation / Blog
 * ========================================================================= */
.tc-cta-simple {
	border-radius: var(--tc-radius-2xl);
	padding: var(--tc-space-12);
	text-align: center;
	color: var(--tc-white);
	background: linear-gradient(to bottom right, var(--tc-primary), var(--tc-primary-light));
}
.tc-cta-simple__title { font-size: var(--tc-text-3xl); font-weight: var(--tc-weight-bold); margin-bottom: var(--tc-space-6); }
@media (min-width: 1024px) { .tc-cta-simple__title { font-size: var(--tc-text-4xl); } }
.tc-cta-simple__lead { font-size: var(--tc-text-xl); color: rgba(255, 255, 255, 0.9); max-width: 42rem; margin-inline: auto; margin-bottom: var(--tc-space-8); }

/* =========================================================================
 * PONT ELEMENTOR – équivalents natifs des blocs de pages internes
 * (ne s'appliquent qu'aux éléments taggés « .tc-* »)
 * ========================================================================= */

/* Hero de page interne : image de fond Elementor + overlay via pseudo-élément. */
.elementor-element.tc-hero--compact { position: relative; overflow: hidden; padding: var(--tc-space-24) 0; }
.elementor-element.tc-hero--compact::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to right, rgba(1,45,56,.95), rgba(1,45,56,.85), rgba(1,45,56,.7));
}
.e-con.tc-hero__inner--compact { position: relative; z-index: 2; text-align: center; padding: 0; }

/* Sections et grilles. */
.e-con.tc-section--compact { padding: var(--tc-space-20) 0; }
.e-con.tc-cards-2 { display: grid; gap: var(--tc-space-8); padding: 0; }
@media (min-width: 1024px) { .e-con.tc-cards-2 { grid-template-columns: repeat(2, 1fr); } }
.e-con.tc-cards-4 { display: grid; gap: var(--tc-space-8); padding: 0; }
@media (min-width: 768px)  { .e-con.tc-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .e-con.tc-cards-4 { grid-template-columns: repeat(4, 1fr); } }

/* Titres / intros de section interne. */
.elementor-widget-heading.tc-h2-inner .elementor-heading-title {
	font-size: var(--tc-text-3xl); font-weight: var(--tc-weight-bold);
	line-height: var(--tc-leading-tight); color: var(--tc-heading);
}
@media (min-width: 1024px) {
	.elementor-widget-heading.tc-h2-inner .elementor-heading-title { font-size: var(--tc-text-4xl); }
}
.elementor-widget-text-editor.tc-lead-sm {
	font-size: var(--tc-text-lg); line-height: var(--tc-leading-normal);
	color: var(--tc-muted); max-width: 42rem; margin-inline: auto;
}
.elementor-widget-heading.tc-card-title .elementor-heading-title {
	font-size: var(--tc-text-xl); font-weight: var(--tc-weight-semibold); color: var(--tc-heading);
}

/* Étapes de méthodologie (natif). */
.e-con.tc-step {
	padding: var(--tc-space-6); border-radius: var(--tc-radius-xl);
	background-color: var(--tc-surface); box-shadow: var(--tc-shadow-lg);
	transition: box-shadow var(--tc-duration) ease;
}
.dark .e-con.tc-step { background-color: var(--tc-gray-800); }
.e-con.tc-step:hover { box-shadow: var(--tc-shadow-xl); }
.elementor-widget-heading.tc-step__number .elementor-heading-title {
	font-size: var(--tc-text-5xl); font-weight: var(--tc-weight-bold); color: rgba(187, 159, 72, 0.2);
}

/* Publics visés (natif). */
.e-con.tc-audience {
	padding: var(--tc-space-6); border-radius: var(--tc-radius-xl);
	background-color: var(--tc-surface-2); border: 1px solid var(--tc-gray-200);
	transition: var(--tc-transition-all);
}
.dark .e-con.tc-audience { background-color: var(--tc-gray-800); }
.e-con.tc-audience:hover { border-color: var(--tc-accent); }

/* Bénéfices (natif) : icône Elementor centrée dans une pastille. */
.e-con.tc-benefit {
	padding: var(--tc-space-6); border-radius: var(--tc-radius-xl); text-align: center;
	background-color: var(--tc-surface); box-shadow: var(--tc-shadow-lg);
	transition: var(--tc-transition-all);
}
.dark .e-con.tc-benefit { background-color: var(--tc-gray-900); }
.e-con.tc-benefit:hover { box-shadow: var(--tc-shadow-xl); }
.elementor-widget-icon.tc-benefit__icon .elementor-icon {
	width: 4rem; height: 4rem; background-color: rgba(187, 159, 72, 0.1);
	border-radius: var(--tc-radius-full); display: inline-flex; align-items: center; justify-content: center;
}

/* CTA simple (natif). */
.e-con.tc-cta-simple {
	border-radius: var(--tc-radius-2xl); padding: var(--tc-space-12); text-align: center; color: var(--tc-white);
	background: linear-gradient(to bottom right, var(--tc-primary), var(--tc-primary-light));
}
.elementor-widget-heading.tc-cta-simple__title .elementor-heading-title {
	font-size: var(--tc-text-3xl); font-weight: var(--tc-weight-bold); color: var(--tc-white);
}
@media (min-width: 1024px) {
	.elementor-widget-heading.tc-cta-simple__title .elementor-heading-title { font-size: var(--tc-text-4xl); }
}
.elementor-widget-text-editor.tc-cta-simple__lead {
	font-size: var(--tc-text-xl); color: rgba(255,255,255,.9); max-width: 42rem; margin-inline: auto;
}

/* Contact : encart « réponse rapide » (natif). */
.e-con.tc-quickbox {
	background: linear-gradient(to bottom right, var(--tc-primary), var(--tc-primary-light));
	border-radius: var(--tc-radius-xl); padding: var(--tc-space-8); color: var(--tc-white);
}
.elementor-widget-heading.tc-quickbox__title .elementor-heading-title {
	font-size: var(--tc-text-2xl); font-weight: var(--tc-weight-semibold); color: var(--tc-white);
}

/* Sous-titre de hero de page interne (text-xl, blanc/90, max-w-3xl, sans marge). */
.tc-hero__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;
}
.elementor-widget-text-editor.tc-hero__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;
}

/* Bouton : agrandissement au survol avec ombre lg (CTA des pages internes). */
.tc-btn--scale { box-shadow: var(--tc-shadow-lg); }
.tc-btn--scale:hover { transform: scale(1.05); }
.elementor-widget-button.tc-btn--scale .elementor-button { box-shadow: var(--tc-shadow-lg); }
.elementor-widget-button.tc-btn--scale .elementor-button:hover { transform: scale(1.05); }

/* Icône 2rem (w-8) – pastilles de bénéfices. */
.tc-icon--2xl { width: 2rem; height: 2rem; }

/* Icône 0.75rem (w-3) – puce de catégorie des cartes d'articles. */
.tc-icon--xs { width: 0.75rem; height: 0.75rem; }

/* Contact : écart de la grille (gap-12) et bouton d'envoi. */
.tc-gap-12 { gap: var(--tc-space-12); }
.tc-form__submit { width: 100%; }
@media (min-width: 768px) { .tc-form__submit { width: auto; } }

/* Contact : épingle de la carte (w-16, centrée). */
.tc-icon--4xl { width: 4rem; height: 4rem; }
.tc-map__pin { color: var(--tc-accent); display: block; margin: 0 auto var(--tc-space-4); }

/* =========================================================================
 * 404 – page non trouvée (template système du thème)
 * ========================================================================= */
.tc-404 {
	min-height: calc(100vh - var(--tc-header-height));
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--tc-surface-2);
}
.dark .tc-404 { background-color: var(--tc-gray-900); }
.tc-404__inner { max-width: 42rem; margin-inline: auto; text-align: center; }
.tc-404__code { font-size: var(--tc-text-9xl); font-weight: var(--tc-weight-bold); color: var(--tc-accent); margin-bottom: var(--tc-space-8); line-height: 1; }
.tc-404__title { font-size: var(--tc-text-4xl); font-weight: var(--tc-weight-bold); color: var(--tc-heading); margin-bottom: var(--tc-space-4); }
.tc-404__text { font-size: var(--tc-text-xl); color: var(--tc-muted); margin-bottom: var(--tc-space-8); }
.tc-btn--outline {
	background-color: var(--tc-white);
	color: var(--tc-primary);
	border: 2px solid var(--tc-primary);
}
.tc-btn--outline:hover { background-color: var(--tc-gray-50); }
.dark .tc-btn--outline { background-color: var(--tc-gray-900); color: var(--tc-white); }