/* ============================================================
   TrouveTonCoach.com — CSS Modernisation
   Thème : My Listing 2.11.9 (27collective)
   Version : 1.0 — Mars 2026
   
   INSTALLATION (3 options au choix) :
   
   A) Apparence > Personnaliser > CSS additionnel
      (coller tout le contenu de ce fichier)
   
   B) Child theme > style.css (après le @import du parent)
   
   C) Elementor > Réglages Elementor > CSS personnalisé
   
   PRÉREQUIS — Ajouter dans Apparence > Personnaliser > 
   "En-tête additionnel" (ou via un plugin comme Insert Headers):
   
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   
   ============================================================ */


/* ============================================================
   1. VARIABLES — Nouvelle palette
   ============================================================ */
:root {
  /* On garde le bleu du thème mais on l'enrichit */
  --accent: #2563eb;

  /* Nouvelles variables custom */
  --ttc-primary: #2563eb;
  --ttc-primary-dark: #1d4ed8;
  --ttc-primary-light: #dbeafe;
  --ttc-accent: #7c3aed;
  --ttc-gray-50: #f8fafc;
  --ttc-gray-100: #f1f5f9;
  --ttc-gray-200: #e2e8f0;
  --ttc-gray-500: #64748b;
  --ttc-gray-700: #334155;
  --ttc-gray-900: #0f172a;
  --ttc-radius: 12px;
  --ttc-shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --ttc-shadow-md: 0 4px 20px rgba(0,0,0,0.06);
  --ttc-shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
  --ttc-shadow-hover: 0 16px 48px rgba(37,99,235,0.12);
}


/* ============================================================
   2. TYPOGRAPHIE — Upgrade de GlacialIndifference vers Inter
   ============================================================ */

/* Override les fonts Elementor globales */
body,
.elementor-widget-text-editor,
.elementor-widget-theme-post-content,
p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--ttc-gray-700) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings : font seulement — PAS de couleur globale
   Chaque contexte gère sa propre couleur ci-dessous */
h1, h2, h3, h4, h5, h6,
.case27-primary-text,
.case27-secondary-text,
.elementor-heading-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

/* Couleur sombre UNIQUEMENT sur les contenus de page (pas les overlays) */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.blogpost-section h1,
.blogpost-section h2,
.blogpost-section h3,
.blogpost-section h4,
.c27-content-wrapper h1,
.c27-content-wrapper h2,
.c27-content-wrapper h3,
.c27-content-wrapper h4,
.section-title h2,
.element .title-style-1 h5,
.element .title-style-2 h5,
.profile-header .profile-name h1,
.lf-item-info-2 h4,
.sbf-title a {
  color: var(--ttc-gray-900) !important;
}

/* BLANC : tout ce qui est sur fond image/sombre */
.listing-cat .lc-info h4,
.listing-cat .lc-info h4.case27-secondary-text,
.listing-cat .lc-info h6,
.listing-main-info h1,
.listing-main-info h1.case27-primary-text,
.listing-main-info h2,
.listing-main-info h2.profile-tagline,
.listing-main-info .profile-name h1,
.listing-main-info .profile-name h2,
.lf-item-info h4,
.lf-item-info h4.case27-primary-text,
.lf-item-info > h4,
h4.listing-preview-title {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.section-title h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
}

.section-title p {
  font-size: 15px !important;
  color: var(--ttc-gray-500) !important;
}


/* ============================================================
   3. HERO SECTION — Lisibilité du texte sur image de fond
   ============================================================ */

/*
 * On cible la première section Elementor de la page d'accueil.
 * Si tu connais l'ID Elementor de la section (ex: data-id="abc123"),
 * remplace le sélecteur par .elementor-element-abc123
 */

/* Overlay sombre sur l'image de fond pour contraste */
body.home .elementor-top-section:first-child > .elementor-background-overlay,
body.page-id-2 .elementor-top-section:first-child > .elementor-background-overlay {
  background: linear-gradient(
    180deg, 
    rgba(15, 23, 42, 0.55) 0%, 
    rgba(15, 23, 42, 0.7) 50%,
    rgba(15, 23, 42, 0.85) 100%
  ) !important;
  opacity: 1 !important;
}

/* Si pas d'overlay Elementor, on en crée un via ::before */
body.home .elementor-top-section:first-child,
body.page-id-2 .elementor-top-section:first-child {
  position: relative !important;
}

body.home .elementor-top-section:first-child::before,
body.page-id-2 .elementor-top-section:first-child::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg, 
    rgba(15, 23, 42, 0.5) 0%, 
    rgba(15, 23, 42, 0.7) 50%,
    rgba(15, 23, 42, 0.85) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Tous les contenus de la hero passent au-dessus de l'overlay */
body.home .elementor-top-section:first-child > .elementor-container,
body.page-id-2 .elementor-top-section:first-child > .elementor-container {
  position: relative !important;
  z-index: 2 !important;
}

/* TEXTE BLANC sur la hero section */
body.home .elementor-top-section:first-child h1,
body.home .elementor-top-section:first-child h2,
body.home .elementor-top-section:first-child h3,
body.home .elementor-top-section:first-child p,
body.home .elementor-top-section:first-child span,
body.home .elementor-top-section:first-child .elementor-heading-title,
body.home .elementor-top-section:first-child .elementor-widget-text-editor,
body.page-id-2 .elementor-top-section:first-child h1,
body.page-id-2 .elementor-top-section:first-child h2,
body.page-id-2 .elementor-top-section:first-child h3,
body.page-id-2 .elementor-top-section:first-child p,
body.page-id-2 .elementor-top-section:first-child span,
body.page-id-2 .elementor-top-section:first-child .elementor-heading-title,
body.page-id-2 .elementor-top-section:first-child .elementor-widget-text-editor {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Sous-titre légèrement transparent */
body.home .elementor-top-section:first-child h2,
body.home .elementor-top-section:first-child p:not(button p),
body.page-id-2 .elementor-top-section:first-child h2,
body.page-id-2 .elementor-top-section:first-child p:not(button p) {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Formulaire de recherche : fond blanc + ombre pour ressortir */
body.home .elementor-top-section:first-child .search-form,
body.home .elementor-top-section:first-child [class*="finder"],
body.home .elementor-top-section:first-child [class*="search"],
body.home .elementor-top-section:first-child .explore-filter,
body.home .elementor-top-section:first-child .cts-explore-wrapper {
  position: relative !important;
  z-index: 3 !important;
}

/* Labels des onglets (Coach, Événements, Formations) */
body.home .elementor-top-section:first-child .listing-type-tab,
body.home .elementor-top-section:first-child [class*="type-tab"],
body.home .elementor-top-section:first-child .types-nav a,
body.home .elementor-top-section:first-child .types-nav span {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.home .elementor-top-section:first-child .listing-type-tab.active,
body.home .elementor-top-section:first-child .types-nav .active,
body.home .elementor-top-section:first-child .types-nav .active span {
  color: #ffffff !important;
}


/* ============================================================
   3b. FOND & CONTENEUR GLOBAL
   ============================================================ */

/* Fond légèrement plus clair et moderne */
body,
#c27-site-wrapper {
  background: var(--ttc-gray-50) !important;
}

/* 
 * PAS de padding global sur .elementor-section ni .i-section
 * Le thème My Listing gère ses propres espacements.
 * On intervient uniquement là où c'est nécessaire.
 */

/* ============================================================
   3c. IMAGE STICKY — Colonnes avec image + texte long
   L'image reste visible pendant le scroll du texte à côté.
   
   OPTION RECOMMANDÉE : dans Elementor, ajoute la classe CSS 
   "ttc-sticky-img" sur la section concernée 
   (Section > Avancé > Classes CSS). Le CSS ci-dessous 
   s'active alors automatiquement.
   
   En attendant, le sélecteur générique cible les colonnes 
   contenant un widget image seul.
   ============================================================ */

@media (min-width: 768px) {

  /* --- Méthode 1 : via classe custom (recommandé) --- */
  .ttc-sticky-img > .elementor-container > .elementor-row,
  .ttc-sticky-img > .elementor-container {
    align-items: flex-start !important;
  }

  .ttc-sticky-img .elementor-column:first-child > .elementor-widget-wrap,
  .ttc-sticky-img .elementor-column:first-child > .elementor-element-populated {
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
  }

  /* --- Méthode 2 : auto-détection (fallback) ---
       Cible les colonnes dont le seul enfant est un widget image */
  .elementor-widget-image:only-child {
    position: sticky !important;
    top: 100px !important;
  }
}


/* ============================================================
   4. HEADER — Plus propre, plus aéré
   ============================================================ */

/* Header background : un peu plus opaque et clean */
.c27-main-header .header-skin {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Navigation items */
.c27-main-header .main-nav > li > a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.c27-main-header .main-nav > li > a:hover {
  background: rgba(37, 99, 235, 0.08) !important;
}

/* Bouton "Publier" (call-to-action header) */
.header-right .buttons.button-2,
.mobile-nav-button .buttons.button-2 {
  background: linear-gradient(135deg, var(--ttc-primary), var(--ttc-accent)) !important;
  border-radius: var(--ttc-radius) !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.header-right .buttons.button-2:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3) !important;
}

/* Sign-in link */
.signin-area a {
  font-weight: 500 !important;
  font-size: 14px !important;
}


/* ============================================================
   4b. CARTES DE CATÉGORIES (.listing-cat)
   ============================================================ */

/* Conteneur de catégorie */
.listing-cat {
  border-radius: var(--ttc-radius) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--ttc-shadow-sm) !important;
}

.listing-cat:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ttc-shadow-hover) !important;
}

/* MASQUER l'overlay natif du thème (gradients colorés) */
.listing-cat .overlay {
  display: none !important;
}

/* NOUVEL OVERLAY via ::after sur le lien — indépendant du thème */
.listing-cat > a {
  position: relative !important;
  display: block !important;
}

.listing-cat > a::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.1) 0%,
    rgba(15, 23, 42, 0.45) 50%,
    rgba(15, 23, 42, 0.85) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: background 0.3s ease !important;
}

.listing-cat:hover > a::after {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.15) 0%,
    rgba(15, 23, 42, 0.5) 50%,
    rgba(15, 23, 42, 0.9) 100%
  ) !important;
}

/* Texte et icônes AU-DESSUS de l'overlay */
.listing-cat .lc-info,
.listing-cat .lc-icon {
  position: relative !important;
  z-index: 2 !important;
}

/* Texte des catégories : blanc + ombre */
.listing-cat .lc-info h4,
.listing-cat .lc-info h4.case27-secondary-text {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}

.listing-cat .lc-info h6 {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Icônes des catégories */
.listing-cat .lc-icon {
  opacity: 0.95 !important;
}

.listing-cat .lc-icon i {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Image de fond */
.listing-cat .lc-background {
  transition: transform 0.4s ease !important;
}

.listing-cat:hover .lc-background {
  transform: scale(1.05) !important;
}


/* ============================================================
   5. CARTES DES LISTINGS (coachs)
   ============================================================ */

/* Conteneur de la carte */
.lf-item-container {
  border-radius: var(--ttc-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--ttc-shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  border: 1px solid var(--ttc-gray-200) !important;
}

.lf-item-container:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ttc-shadow-hover) !important;
  border-color: var(--ttc-primary) !important;
}

/* Image de fond : transition plus smooth au hover */
.lf-item-container:hover .lf-background {
  transform: scale(1.03) !important;
}

/* Overlay moins opaque pour laisser voir l'image */
.lf-item .overlay {
  opacity: 0.35 !important;
  background: linear-gradient(180deg, transparent 30%, rgba(15, 23, 42, 0.85) 100%) !important;
}

.lf-item > a:hover .overlay {
  opacity: 0.5 !important;
}

/* Titre du listing */
.lf-item-info > h4,
h4.listing-preview-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Avatar/logo dans les cartes */
.lf-avatar {
  border: 3px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Info secondaire sous les cartes (type 2) */
.lf-item-info-2 {
  border-top: 1px solid var(--ttc-gray-200) !important;
}

.lf-item-info-2 h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ttc-gray-900) !important;
}

.lf-item-info-2 h6 {
  color: var(--ttc-gray-500) !important;
  font-size: 13px !important;
}

/* Footer de carte (détails, catégories) */
.c27-footer-section.listing-details {
  border-top: 1px solid var(--ttc-gray-200) !important;
}

.listing-details .category-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ttc-gray-700) !important;
}

/* Head buttons (badges promoted, featured, open/close) */
.lf-head-btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  backdrop-filter: blur(8px) !important;
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.25) !important;
}


/* ============================================================
   6. BOUTONS GÉNÉRAUX
   ============================================================ */

.buttons {
  border-radius: var(--ttc-radius) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  transition: all 0.25s ease !important;
}

/* Bouton primary (accent) */
.button-2,
.buttons.button-2 {
  background: linear-gradient(135deg, var(--ttc-primary), var(--ttc-accent)) !important;
  border: none !important;
  color: #fff !important;
}

.button-2:hover,
.buttons.button-2:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3) !important;
}

/* Bouton secondary */
.button-1,
.buttons.button-1 {
  background: #fff !important;
  color: var(--ttc-primary) !important;
  border: 1.5px solid var(--ttc-gray-200) !important;
}

.button-1:hover {
  border-color: var(--ttc-primary) !important;
  background: var(--ttc-primary-light) !important;
}

/* Bouton outline */
.button-3 {
  border: 2px solid var(--ttc-primary) !important;
  border-radius: var(--ttc-radius) !important;
}

/* Pagination */
nav.job-manager-pagination ul li a,
nav.job-manager-pagination ul li span {
  border-radius: var(--ttc-radius) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}


/* ============================================================
   7. BLOCS DE CONTENU (.element)
   ============================================================ */

.element {
  border-radius: var(--ttc-radius) !important;
  box-shadow: var(--ttc-shadow-sm) !important;
  border: 1px solid var(--ttc-gray-200) !important;
  transition: box-shadow 0.2s ease !important;
}

.element:hover {
  box-shadow: var(--ttc-shadow-md) !important;
}

/* Titres dans les blocs */
.element .title-style-1 h5 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}


/* ============================================================
   8. FORMULAIRES & INPUTS
   ============================================================ */

input, textarea, select {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
}

input:focus, textarea:focus {
  border-color: var(--ttc-primary) !important;
  box-shadow: 0 0 0 3px var(--ttc-primary-light) !important;
}

/* Select2 dropdowns */
.select2-dropdown {
  border-radius: var(--ttc-radius) !important;
  box-shadow: var(--ttc-shadow-lg) !important;
  border: 1px solid var(--ttc-gray-200) !important;
}

.select2-results__option {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
}


/* ============================================================
   9. CATEGORIES (shortcode listing-categories)
   ============================================================ */

/* Les catégories d'icônes dans le grid */
.cat-icon {
  background: var(--ttc-primary-light) !important;
  transition: all 0.2s ease !important;
}

.cat-icon i {
  color: var(--ttc-primary) !important;
}

/* Au hover : inversion */
.listing-details li a:hover .cat-icon,
.details-list li a:hover i {
  background: var(--ttc-primary) !important;
  color: #fff !important;
}


/* ============================================================
   10. SECTION "EXPLORE" (recherche/filtres)
   ============================================================ */

/* Labels des filtres */
.explore-filter > label,
.checkboxes-filter > label,
.range-filter > label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ttc-gray-700) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* Range filter list */
.range-list a {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.range-list a.active {
  background: var(--ttc-primary) !important;
}


/* ============================================================
   11. FOOTER
   ============================================================ */

footer.footer {
  border-top: 1px solid var(--ttc-gray-200) !important;
}

footer.footer .footer-bottom {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

footer.footer .footer-bottom p {
  font-size: 13px !important;
  color: var(--ttc-gray-500) !important;
}

/* Liens du footer */
.social-nav li a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

.social-nav li a:hover i {
  background: var(--ttc-primary) !important;
  border-color: var(--ttc-primary) !important;
}


/* ============================================================
   12. BLOG — Cartes d'articles et page blog
   ============================================================ */

/* Carte article */
.single-blog-feed .sbf-container {
  border-radius: var(--ttc-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--ttc-shadow-sm) !important;
  border: 1px solid var(--ttc-gray-200) !important;
  transition: all 0.3s ease !important;
  background: #fff !important;
}

.single-blog-feed .sbf-container:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ttc-shadow-hover) !important;
  border-color: var(--ttc-primary) !important;
}

/* Image de l'article */
.single-blog-feed .sbf-thumb {
  overflow: hidden !important;
}

.single-blog-feed .sbf-background {
  transition: transform 0.4s ease !important;
}

.single-blog-feed .sbf-container:hover .sbf-background {
  transform: scale(1.05) !important;
}

/* Badge date */
.single-blog-feed .lf-head-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--ttc-gray-900) !important;
  border: none !important;
  border-radius: 8px !important;
  backdrop-filter: blur(8px) !important;
  font-weight: 600 !important;
}

.single-blog-feed .lf-head-btn .e-month {
  color: var(--ttc-primary) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

.single-blog-feed .lf-head-btn .e-day {
  color: var(--ttc-gray-900) !important;
  font-weight: 700 !important;
}

/* Titre de l'article */
.single-blog-feed .sbf-title a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--ttc-gray-900) !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

.single-blog-feed .sbf-title a:hover {
  color: var(--ttc-primary) !important;
}

/* Extrait de l'article */
.single-blog-feed .sbf-title p {
  font-size: 14px !important;
  color: var(--ttc-gray-500) !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

/* Catégorie en bas de carte */
.single-blog-feed .listing-details {
  border-top: 1px solid var(--ttc-gray-200) !important;
  padding: 12px 15px !important;
}

.single-blog-feed .listing-details .category-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ttc-primary) !important;
}

/* --- Page article (single blog post) --- */

/* Titre principal de l'article */
.blogpost-section .blog-title {
  padding-bottom: 40px !important;
}

.blogpost-section .blog-title h1,
.blogpost-section .blog-title h1.case27-primary-text {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(28px, 5vw, 44px) !important;
  font-weight: 800 !important;
  color: var(--ttc-gray-900) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
}

/* Barre d'infos (catégorie, date, partage) */
.post-cover-buttons > ul > li > a,
.post-cover-buttons > ul > li > div {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ttc-gray-500) !important;
}

.post-cover-buttons > ul > li > a:hover {
  color: var(--ttc-primary) !important;
}

.post-cover-buttons > ul > li > a > i,
.post-cover-buttons > ul > li > div > i {
  color: var(--ttc-primary) !important;
  opacity: 0.7 !important;
  font-size: 16px !important;
}

/* Badge catégorie stylé */
.post-cover-buttons > ul > li:first-child > a {
  background: var(--ttc-primary-light) !important;
  color: var(--ttc-primary) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.post-cover-buttons > ul > li:first-child > a > i {
  color: var(--ttc-primary) !important;
  opacity: 1 !important;
}

/* Image featured */
.blog-featured-image {
  margin-bottom: 48px !important;
}

.blog-featured-image img {
  border-radius: var(--ttc-radius) !important;
  box-shadow: var(--ttc-shadow-md) !important;
}

/* --- Corps de l'article --- */

/* Contenu texte */
.blogpost-section .c27-content-wrapper,
.blogpost-section .section-body {
  font-family: 'Inter', sans-serif !important;
}

.blogpost-section .section-body p,
.blogpost-section .c27-content-wrapper p {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: var(--ttc-gray-700) !important;
  margin-bottom: 1.5em !important;
}

/* Liens dans l'article */
.blogpost-section .section-body p a,
.blogpost-section .c27-content-wrapper p a {
  color: var(--ttc-primary) !important;
  border-bottom: 2px solid var(--ttc-primary-light) !important;
  transition: border-color 0.2s ease !important;
}

.blogpost-section .section-body p a:hover,
.blogpost-section .c27-content-wrapper p a:hover {
  border-bottom-color: var(--ttc-primary) !important;
}

/* Headings dans le contenu */
.blogpost-section .c27-content-wrapper h2,
.blogpost-section .section-body h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ttc-gray-900) !important;
  margin-top: 2.5em !important;
  margin-bottom: 0.75em !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.blogpost-section .c27-content-wrapper h3,
.blogpost-section .section-body h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ttc-gray-900) !important;
  margin-top: 2em !important;
  margin-bottom: 0.5em !important;
  line-height: 1.35 !important;
}

.blogpost-section .c27-content-wrapper h4,
.blogpost-section .section-body h4 {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ttc-gray-900) !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
}

/* Listes dans l'article */
.blogpost-section .section-body ol,
.blogpost-section .section-body ul,
.blogpost-section .c27-content-wrapper ol,
.blogpost-section .c27-content-wrapper ul {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: var(--ttc-gray-700) !important;
  margin-bottom: 1.5em !important;
}

.blogpost-section .section-body li,
.blogpost-section .c27-content-wrapper li {
  margin-bottom: 0.5em !important;
}

/* Blockquote — style moderne */
.blogpost-section blockquote,
.blogpost-section .c27-content-wrapper blockquote {
  border-left: 4px solid var(--ttc-primary) !important;
  background: var(--ttc-gray-50) !important;
  padding: 24px 28px !important;
  margin: 2em 0 !important;
  border-radius: 0 var(--ttc-radius) var(--ttc-radius) 0 !important;
}

.blogpost-section blockquote p,
.blogpost-section .c27-content-wrapper blockquote p {
  font-size: 18px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--ttc-gray-900) !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

.blogpost-section blockquote p::before {
  content: none !important;
}

/* Strong/bold dans l'article */
.blogpost-section .c27-content-wrapper strong,
.blogpost-section .section-body strong {
  color: var(--ttc-gray-900) !important;
  font-weight: 700 !important;
}

/* --- Tags --- */
ul.tags li a,
.blogpost-section .tags-list .tags li a {
  border: 1.5px solid var(--ttc-gray-200) !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--ttc-gray-700) !important;
  transition: all 0.2s ease !important;
}

ul.tags li a:hover,
.blogpost-section .tags-list .tags li a:hover {
  background: var(--ttc-primary) !important;
  border-color: var(--ttc-primary) !important;
  color: #fff !important;
}

/* --- Navigation prev/next --- */
.c27-post-changer {
  display: flex !important;
  margin-top: 48px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--ttc-gray-200) !important;
}

.c27-post-changer a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ttc-gray-700) !important;
  transition: color 0.2s ease !important;
}

.c27-post-changer a:hover {
  color: var(--ttc-primary) !important;
}

/* --- Section commentaires --- */
.blogpost-section + .i-section {
  padding-top: 40px !important;
}

.blogpost-section + .i-section .section-title h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

.comment-container {
  border-radius: var(--ttc-radius) !important;
  border: 1px solid var(--ttc-gray-200) !important;
  box-shadow: none !important;
  padding: 24px 24px 24px 75px !important;
}

.comment-head h5 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

span.comment-date {
  font-size: 13px !important;
  color: var(--ttc-gray-500) !important;
}

/* Formulaire de commentaire */
.comments-list #respond {
  border-radius: var(--ttc-radius) !important;
  border: 1px solid var(--ttc-gray-200) !important;
  box-shadow: none !important;
}

/* --- Responsive article --- */
@media (max-width: 768px) {
  .blogpost-section .blog-title h1,
  .blogpost-section .blog-title h1.case27-primary-text {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  .blogpost-section .section-body p,
  .blogpost-section .c27-content-wrapper p {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .blogpost-section .c27-content-wrapper h2,
  .blogpost-section .section-body h2 {
    font-size: 22px !important;
  }

  .blogpost-section .c27-content-wrapper h3,
  .blogpost-section .section-body h3 {
    font-size: 18px !important;
  }

  .blogpost-section blockquote {
    padding: 18px 20px !important;
    margin: 1.5em 0 !important;
  }

  .blog-featured-image {
    margin-bottom: 32px !important;
  }
}

/* Infos auteur et date (ancien) */
.blogTitle h6 {
  font-size: 13px !important;
  color: var(--ttc-gray-500) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Pagination du blog (page liste) */
.blog-footer .page-numbers {
  font-family: 'Inter', sans-serif !important;
}

.blog-footer .page-numbers li a,
.blog-footer .page-numbers li span {
  border-radius: 8px !important;
}


/* ============================================================
   13. SINGLE LISTING (page coach)
   ============================================================ */

/* --- Cover image overlay : plus sombre pour lisibilité --- */
.profile-cover .overlay,
.single-listing .cover-image .overlay,
.profile-cover-image .overlay {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.1) 0%,
    rgba(15, 23, 42, 0.35) 40%,
    rgba(15, 23, 42, 0.75) 100%
  ) !important;
  opacity: 1 !important;
}

/* --- Nom du coach --- */
.listing-main-info h1,
.listing-main-info .profile-name h1,
.listing-main-info .profile-name h1.case27-primary-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.3 !important;
}

/* --- Tagline du coach --- */
.listing-main-info h2,
.listing-main-info .profile-name h2,
.listing-main-info .profile-tagline,
h2.profile-tagline.listing-tagline-field {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

/* --- Zone info : fond semi-transparent pour renforcer le contraste --- */
.listing-main-info {
  background: linear-gradient(
    0deg,
    rgba(15, 23, 42, 0.5) 0%,
    transparent 100%
  ) !important;
  padding: 30px 40px 40px !important;
  border-radius: 0 !important;
}

/* Sur mobile, le listing-main-info passe en fond blanc */
@media (max-width: 1200px) {
  .listing-main-info {
    background: #fff !important;
    padding: 15px 15px 0 !important;
  }
  
  .listing-main-info h1,
  .listing-main-info .profile-name h1,
  .listing-main-info .profile-name h1.case27-primary-text {
    color: var(--ttc-gray-900) !important;
    text-shadow: none !important;
    font-size: 26px !important;
  }
  
  .listing-main-info h2,
  .listing-main-info .profile-tagline,
  h2.profile-tagline.listing-tagline-field {
    color: var(--ttc-gray-500) !important;
    text-shadow: none !important;
  }
}

/* --- Avatar du coach --- */
.profile-avatar {
  border: 3px solid #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* --- Rating stars --- */
.profile-name .listing-rating i {
  color: #fbbf24 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* --- CTA buttons (cover details) --- */
.listing-main-buttons .lmb-calltoaction > a {
  border-radius: var(--ttc-radius) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: linear-gradient(135deg, var(--ttc-primary), var(--ttc-accent)) !important;
}

.listing-main-buttons .price-or-date .lmb-label {
  color: rgba(255, 255, 255, 0.7) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.listing-main-buttons .price-or-date .value {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 1200px) {
  .listing-main-buttons .price-or-date .lmb-label {
    color: var(--ttc-gray-500) !important;
    text-shadow: none !important;
  }
  
  .listing-main-buttons .price-or-date .value {
    color: var(--ttc-gray-900) !important;
    text-shadow: none !important;
  }
}

/* --- Profile header (onglets Profil, Avis, Événements) --- */
.profile-header {
  background: #fff !important;
  border-bottom: 1px solid var(--ttc-gray-200) !important;
  box-shadow: none !important;
}

.profile-header .profile-menu ul li a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--ttc-gray-500) !important;
}

.profile-header .profile-menu ul li.active a {
  color: var(--ttc-gray-900) !important;
  font-weight: 600 !important;
}

.profile-header .profile-menu ul li a:after,
.profile-header .profile-menu ul li.active a:after {
  background: var(--ttc-primary) !important;
}

.items-counter {
  background: var(--ttc-gray-100) !important;
  border: none !important;
  font-weight: 600 !important;
  color: var(--ttc-gray-500) !important;
}

/* --- Quick action buttons (Itinéraire, Site web, Favoris, etc.) --- */
.quick-listing-actions > ul > li > a {
  border-radius: var(--ttc-radius) !important;
  border: 1.5px solid var(--ttc-gray-200) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.quick-listing-actions > ul > li > a:hover {
  border-color: var(--ttc-primary) !important;
  background: var(--ttc-primary-light) !important;
}

.quick-listing-actions > ul > li > a:hover i {
  color: var(--ttc-primary) !important;
}

/* --- Content blocks --- */
.single-job-listing .element {
  border-radius: var(--ttc-radius) !important;
  box-shadow: var(--ttc-shadow-sm) !important;
  border: 1px solid var(--ttc-gray-200) !important;
}

.single-job-listing .element .title-style-1 h5 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* Verified badge */
img.verified-listing {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
}

/* Edit listing icon — on desktop only */
@media (min-width: 1201px) {
  .profile-name .edit-listing i {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
  }
}


/* ============================================================
   14. LOADING SCREEN
   ============================================================ */

.main-loader.loader-bg {
  background-color: #fff !important;
}


/* ============================================================
   15. RESPONSIVE TWEAKS
   ============================================================ */

@media (max-width: 767px) {
  .section-title h2 {
    font-size: 22px !important;
  }

  .section-title {
    margin-bottom: 24px !important;
  }
  
  /* Cards stack mieux sur mobile */
  .lf-item-container {
    margin-bottom: 16px !important;
  }
  
  .lf-item-container:hover,
  .listing-cat:hover {
    transform: none !important;
  }
}

@media (max-width: 480px) {
  body, p {
    font-size: 14px !important;
  }
}


/* ============================================================
   16. SCROLLBAR CUSTOM (desktop)
   ============================================================ */

@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--ttc-gray-100);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--ttc-gray-300);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--ttc-gray-500);
  }
}


/* ============================================================
   17. SMOOTH TRANSITIONS GLOBALES
   ============================================================ */

a, .buttons, .element, .lf-item-container, 
.cat-icon, .lf-head-btn, input, select, textarea {
  transition: all 0.2s ease !important;
}

/* Disable transform sur prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}