/*
 Theme Name:   TooFrench Child
 Theme URI:    https://too-french.com
 Description:  Thème enfant GeneratePress pour Too French — Apprenants FLE
 Author:       Too French
 Author URI:   https://too-french.com
 Template:     generatepress
 Version:      2.4.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  toofrench-child
*/

/* ==========================================================================
   1. Design System — Variables CSS
   Palette « Marine & Émeraude » — Confiance, Innovation, Réussite
   Strictement : bleu marine, blanc, vert émeraude, gris clair
   ========================================================================== */

:root {
  /* Couleurs principales — Bleu marine (confiance, autorité, profondeur) */
  --tf-primary: #1C2E4A;
  --tf-primary-light: #2A4570;
  --tf-primary-dark: #0E1A2D;

  /* CTA — Vert émeraude (action, croissance, réussite) */
  --tf-secondary: #2D8F6F;
  --tf-secondary-light: #3AAE88;
  --tf-secondary-dark: #1E6B50;

  /* Accents (palette limitée : émeraude = accent = success) */
  --tf-accent: #2D8F6F;
  --tf-success: #2D8F6F;
  --tf-warning: #D4A843;       /* Or doux — étoiles uniquement */

  /* Neutres — Gris bleutés (harmonie avec le marine) */
  --tf-white: #FFFFFF;
  --tf-gray-50: #F5F7FA;
  --tf-gray-100: #EDF0F5;
  --tf-gray-200: #DEE3EB;
  --tf-gray-300: #C5CCD7;
  --tf-gray-500: #6B7A8D;
  --tf-gray-600: #4A5668;
  --tf-gray-700: #334155;
  --tf-gray-900: #0F1A2D;
  --tf-black: #060D16;

  /* Typographie — Plus Jakarta Sans (headings) + Inter (body) */
  --tf-font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --tf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --tf-font-size-xs: 0.75rem;
  --tf-font-size-sm: 0.875rem;
  --tf-font-size-base: 1rem;
  --tf-font-size-lg: 1.125rem;
  --tf-font-size-xl: 1.25rem;
  --tf-font-size-2xl: 1.5rem;
  --tf-font-size-3xl: 2rem;
  --tf-font-size-4xl: 2.5rem;
  --tf-font-size-5xl: 3.5rem;

  /* Espacement */
  --tf-space-xs: 0.25rem;
  --tf-space-sm: 0.5rem;
  --tf-space-md: 1rem;
  --tf-space-lg: 1.5rem;
  --tf-space-xl: 2rem;
  --tf-space-2xl: 3rem;
  --tf-space-3xl: 4rem;
  --tf-space-4xl: 6rem;
  --tf-space-5xl: 8rem;

  /* Bordures et ombres */
  --tf-radius-sm: 0.375rem;
  --tf-radius-md: 0.5rem;
  --tf-radius-lg: 0.75rem;
  --tf-radius-xl: 1rem;
  --tf-radius-2xl: 1.5rem;
  --tf-radius-full: 9999px;
  --tf-shadow-sm: 0 1px 3px rgba(14, 26, 45, 0.04);
  --tf-shadow-md: 0 4px 12px rgba(14, 26, 45, 0.08);
  --tf-shadow-lg: 0 8px 24px rgba(14, 26, 45, 0.12);
  --tf-shadow-xl: 0 16px 40px rgba(14, 26, 45, 0.16);
  --tf-shadow-glow: 0 0 30px rgba(45, 143, 111, 0.15);

  /* Transitions */
  --tf-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tf-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --tf-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Container */
  --tf-container-max: 1200px;
  --tf-container-narrow: 720px;
}

/* ==========================================================================
   2. Base — Typographie et fondations
   ========================================================================== */

body {
  font-family: var(--tf-font-body);
  color: var(--tf-gray-900);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tf-font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tf-primary-dark);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--tf-font-size-5xl); font-weight: 800; }
h2 { font-size: var(--tf-font-size-3xl); font-weight: 800; }
h3 { font-size: var(--tf-font-size-xl); }

p { color: var(--tf-gray-600); }

/* ==========================================================================
   3. Layout — Container et sections
   ========================================================================== */

.tf-container {
  max-width: var(--tf-container-max);
  margin: 0 auto;
  padding: 0 var(--tf-space-xl);
}

.tf-section {
  padding: var(--tf-space-4xl) 0;
}

.tf-section--alt {
  background: var(--tf-gray-50);
}

.tf-section-header {
  text-align: center;
  margin-bottom: var(--tf-space-3xl);
}

.tf-section-header h2 {
  font-size: var(--tf-font-size-3xl);
  position: relative;
  display: inline-block;
}

.tf-section-header h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--tf-primary), var(--tf-secondary));
  margin: var(--tf-space-md) auto 0;
  border-radius: var(--tf-radius-full);
}

.tf-section-header__subtitle {
  color: var(--tf-gray-600);
  max-width: var(--tf-container-narrow);
  margin: var(--tf-space-sm) auto 0;
  font-size: var(--tf-font-size-lg);
}

@media (max-width: 768px) {
  .tf-container {
    padding: 0 var(--tf-space-md);
  }
  .tf-section {
    padding: var(--tf-space-2xl) 0;
  }
}

/* ==========================================================================
   4. Composants — Boutons
   ========================================================================== */

.tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-sm);
  padding: 0.75rem 1.75rem;
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--tf-radius-lg);
  cursor: pointer;
  transition: all var(--tf-transition-fast);
}

.tf-btn,
.tf-btn:visited {
  text-decoration: none !important;
}

.tf-btn--primary {
  background: linear-gradient(135deg, var(--tf-secondary) 0%, var(--tf-secondary-dark) 100%);
  color: var(--tf-white);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(45, 143, 111, 0.3);
}

.tf-btn--primary,
.tf-btn--primary:visited {
  color: var(--tf-white) !important;
}

.tf-btn--primary:hover,
.tf-btn--primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 143, 111, 0.4);
}

.tf-btn--outline {
  background-color: transparent;
  color: var(--tf-primary);
  border-color: var(--tf-primary);
}

a.tf-btn--outline:visited {
  color: var(--tf-primary) !important;
}

.tf-btn--outline:hover,
.tf-btn--outline:focus {
  background-color: var(--tf-primary);
  color: var(--tf-white);
  border-color: var(--tf-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(28, 46, 74, 0.3);
}

.tf-btn--outline-white {
  background-color: transparent;
  color: var(--tf-white);
  border-color: rgba(255, 255, 255, 0.4);
}

a.tf-btn--outline-white,
a.tf-btn--outline-white:visited {
  color: var(--tf-white) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

a.tf-btn--outline-white:hover {
  background-color: var(--tf-white) !important;
  color: var(--tf-primary-dark) !important;
  border-color: var(--tf-white) !important;
}

.tf-btn--lg {
  padding: 1rem 2.25rem;
  font-size: var(--tf-font-size-lg);
  border-radius: var(--tf-radius-xl);
}

/* Bouton blanc plein (pour CTA section sombre) */
.tf-btn--white {
  background-color: var(--tf-white);
  color: var(--tf-primary-dark);
  border-color: var(--tf-white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.tf-btn--white:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   5. Composants — Hero Section
   ========================================================================== */

.tf-hero {
  padding: var(--tf-space-5xl) 0 var(--tf-space-4xl);
  background: linear-gradient(135deg, #060D16 0%, #0E1A2D 35%, #1C2E4A 65%, #0E1A2D 100%);
  color: var(--tf-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Orbes lumineux decoratifs */
.tf-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 69, 112, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.tf-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 143, 111, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.tf-hero .tf-container {
  position: relative;
  z-index: 1;
}

.tf-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--tf-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.375rem 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--tf-radius-full);
  margin-bottom: var(--tf-space-xl);
  color: rgba(255, 255, 255, 0.9);
}

.tf-hero__title {
  font-size: var(--tf-font-size-5xl);
  font-weight: 800;
  color: var(--tf-white);
  max-width: var(--tf-container-narrow);
  margin: 0 auto;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.tf-hero__subtitle {
  font-size: var(--tf-font-size-xl);
  color: rgba(255, 255, 255, 0.8);
  max-width: var(--tf-container-narrow);
  margin: var(--tf-space-lg) auto 0;
  font-weight: 400;
  line-height: 1.6;
}

.tf-hero__cta {
  margin-top: var(--tf-space-2xl);
  display: flex;
  gap: var(--tf-space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Home Hero — Texte + Image */
.tf-home-hero {
  padding: var(--tf-space-4xl) 0 var(--tf-space-3xl);
  background: linear-gradient(135deg, #F0F4FA 0%, #E4ECF5 50%, #EDF3F0 100%);
  position: relative;
  overflow: hidden;
}

.tf-home-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 143, 111, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.tf-home-hero::after {
  content: '';
  position: absolute;
  bottom: -25%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 46, 74, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.tf-home-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-2xl);
  align-items: start;
  position: relative;
  z-index: 1;
}

.tf-home-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tf-home-hero__eyebrow {
  position: relative;
  z-index: 1;
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1b3357;
  margin: 0 0 var(--tf-space-lg);
  white-space: nowrap;
}

.tf-home-hero__title {
  font-family: var(--tf-font-heading);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 800;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tf-home-hero__subtitle {
  font-size: var(--tf-font-size-lg);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0 0 var(--tf-space-xl);
  max-width: 520px;
}

.tf-home-hero__bottom {
  display: flex;
  align-items: center;
  gap: var(--tf-space-lg);
  flex-wrap: nowrap;
}

.tf-home-hero__proof {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--tf-space-md);
  white-space: nowrap;
}

.tf-home-hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tf-gray-500);
}

.tf-home-hero__proof li svg {
  color: var(--tf-secondary);
  flex-shrink: 0;
}

.tf-home-hero__visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.tf-home-hero__image {
  max-width: 100%;
  height: auto;
  border-radius: var(--tf-radius-xl);
  filter: drop-shadow(0 8px 24px rgba(28, 46, 74, 0.12));
}

@media (max-width: 768px) {
  .tf-home-hero {
    padding: var(--tf-space-2xl) 0;
  }

  .tf-home-hero__eyebrow {
    white-space: normal;
    text-align: center;
  }

  .tf-home-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--tf-space-xl);
    text-align: center;
  }

  .tf-home-hero__content {
    align-items: center;
  }

  .tf-home-hero__visual {
    order: -1;
  }

  .tf-home-hero__image {
    max-width: 300px;
  }

  .tf-home-hero__bottom {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tf-space-md);
  }

  .tf-home-hero__proof {
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* --- Hero vidéo variant --- */

.tf-home-hero--video {
  position: relative;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tf-space-5xl) 0 var(--tf-space-5xl);
  background: var(--tf-primary-dark);
}

.tf-home-hero--video::before,
.tf-home-hero--video::after {
  display: none;
}

.tf-home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tf-home-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tf-home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 13, 22, 0.65) 0%,
    rgba(28, 46, 74, 0.75) 100%
  );
}

.tf-home-hero--video .tf-home-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.tf-home-hero--video .tf-home-hero__eyebrow {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--tf-space-xl);
}

.tf-home-hero--video .tf-home-hero__title {
  color: var(--tf-white);
}

.tf-home-hero--video .tf-home-hero__subtitle {
  color: rgba(255, 255, 255, 0.8);
  max-width: 100%;
  margin-top: var(--tf-space-lg);
  margin-bottom: var(--tf-space-3xl);
}

.tf-home-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tf-space-md);
  margin-bottom: var(--tf-space-xl);
}

.tf-home-hero__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--tf-font-size-base);
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--tf-space-lg);
  font-weight: 500;
}

.tf-home-hero__rating svg {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tf-home-hero__video {
    display: none;
  }
  .tf-home-hero__media {
    background: url('assets/img/placeholder-hero.jpg') center / cover no-repeat;
  }
}

@media (max-width: 768px) {
  .tf-home-hero--video {
    min-height: 70vh;
    padding: var(--tf-space-3xl) 0 var(--tf-space-2xl);
  }

  .tf-home-hero__video {
    display: none;
  }

  .tf-home-hero--video .tf-home-hero__media {
    background: url('assets/img/placeholder-hero.jpg') center / cover no-repeat;
  }
}

/* ==========================================================================
   5b. Homepage — Barre de confiance
   ========================================================================== */

.tf-trust-bar {
  background: var(--tf-white);
  border-bottom: 1px solid var(--tf-gray-100);
  padding: var(--tf-space-md) 0;
}

.tf-trust-bar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--tf-space-xl);
  flex-wrap: wrap;
}

.tf-trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--tf-font-size-xs);
  font-weight: 600;
  color: var(--tf-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tf-trust-bar__item svg {
  color: var(--tf-secondary);
  flex-shrink: 0;
}

/* ==========================================================================
   5c. Homepage — La Méthode Too French
   ========================================================================== */

.tf-method__intro {
  max-width: 800px;
  margin: 0 auto var(--tf-space-2xl);
  text-align: center;
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-600);
  line-height: 1.7;
}

.tf-method__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tf-space-xl);
  margin-bottom: var(--tf-space-2xl);
}

.tf-method__card {
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  padding: var(--tf-space-xl);
  border: 1px solid var(--tf-gray-100);
  text-align: center;
  transition: all var(--tf-transition-base);
}

.tf-method__card:hover {
  border-color: var(--tf-gray-200);
  box-shadow: var(--tf-shadow-md);
  transform: translateY(-2px);
}

.tf-method__card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--tf-radius-lg);
  background: rgba(28, 46, 74, 0.06);
  color: var(--tf-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tf-space-md);
}

.tf-method__card-icon--secondary {
  background: rgba(45, 143, 111, 0.08);
  color: var(--tf-secondary);
}

.tf-method__card-icon--accent {
  background: rgba(99, 102, 241, 0.08);
  color: #6366F1;
}

.tf-method__card-title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
}

.tf-method__card-text {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0;
}

/* Comparaison Apps vs Too French */
.tf-method__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-lg);
  max-width: 700px;
  margin: 0 auto;
}

.tf-method__compare-col {
  border-radius: var(--tf-radius-xl);
  padding: var(--tf-space-xl);
}

.tf-method__compare-col h4 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-base);
  font-weight: 700;
  margin: 0 0 var(--tf-space-md);
}

.tf-method__compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tf-method__compare-col ul li {
  padding: 0.4rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: var(--tf-font-size-sm);
  line-height: 1.5;
}

.tf-method__compare-col--other {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.12);
}

.tf-method__compare-col--other h4 {
  color: var(--tf-gray-500);
}

.tf-method__compare-col--other ul li {
  color: var(--tf-gray-500);
}

.tf-method__compare-col--other ul li::before {
  content: "\2717";
  position: absolute;
  left: 0;
  color: #EF4444;
  font-weight: 700;
}

.tf-method__compare-col--tf {
  background: rgba(45, 143, 111, 0.04);
  border: 1px solid rgba(45, 143, 111, 0.15);
}

.tf-method__compare-col--tf h4 {
  color: var(--tf-secondary);
}

.tf-method__compare-col--tf ul li {
  color: var(--tf-gray-700);
}

.tf-method__compare-col--tf ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--tf-secondary);
  font-weight: 700;
}

/* --- Method footer (conclusion + CTA) --- */

.tf-method__footer {
  text-align: center;
  margin-top: var(--tf-space-2xl);
}

.tf-method__conclusion {
  font-size: var(--tf-font-size-lg);
  color: var(--tf-gray-600);
  margin: 0 0 var(--tf-space-lg);
}

.tf-method__conclusion strong {
  color: var(--tf-primary);
}

/* ==========================================================================
   5d. Homepage — Résultats concrets
   ========================================================================== */

.tf-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tf-space-xl) var(--tf-space-3xl);
  max-width: 700px;
  margin: 0 auto;
}

.tf-results-grid--compact {
  row-gap: 0;
}

.tf-result-card {
  text-align: center;
  padding: var(--tf-space-lg) var(--tf-space-lg);
  background: transparent;
  border: none;
  position: relative;
}

.tf-result-card + .tf-result-card::before {
  /* Séparateur subtil entre les colonnes gauche/droite */
}

.tf-result-card__number {
  display: block;
  font-family: var(--tf-font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--tf-secondary);
  line-height: 1.1;
  margin-bottom: var(--tf-space-xs);
}

.tf-result-card__number small {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--tf-secondary);
  opacity: 0.7;
}

.tf-result-card__label {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-600);
  line-height: 1.4;
  font-weight: 500;
}

/* --- Résultats: bloc NDA / Marianne --- */

.tf-results-nda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-sm);
  margin: var(--tf-space-xl) auto 0;
  padding: 0.6rem 1.25rem;
  background: rgba(45, 143, 111, 0.06);
  border-radius: var(--tf-radius-full);
  border: 1px solid rgba(45, 143, 111, 0.25);
  max-width: fit-content;
}

/* Centrage du badge dans son parent */
.tf-results-nda {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.tf-results-nda__logo {
  flex-shrink: 0;
  height: 36px;
  width: auto;
  object-fit: contain;
}

.tf-results-nda__text {
  display: flex;
  flex-direction: column;
  font-size: var(--tf-font-size-xs);
  color: var(--tf-gray-600);
  line-height: 1.4;
  text-align: left;
}

.tf-results-nda__ref {
  font-weight: 600;
  color: var(--tf-primary-dark);
  font-size: var(--tf-font-size-xs);
}

/* ==========================================================================
   5e. Homepage — Parcours (cartes enrichies)
   ========================================================================== */

.tf-parcours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tf-space-xl);
  align-items: stretch;
}

.tf-parcours-card {
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  overflow: hidden;
  border: 1px solid var(--tf-gray-100);
  display: flex;
  flex-direction: column;
  transition: all var(--tf-transition-base);
}

.tf-parcours-card:hover {
  box-shadow: var(--tf-shadow-lg);
  transform: translateY(-4px);
}

.tf-parcours-card__header {
  padding: var(--tf-space-lg) var(--tf-space-xl);
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, #2a4a6b 100%);
  color: var(--tf-white);
  text-align: center;
}

.tf-parcours-card__title {
  font-family: var(--tf-font-heading);
  font-size: clamp(1.35rem, 2.5vw, 1.6rem);
  font-weight: 700;
  margin: 0;
  color: var(--tf-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tf-parcours-card__body {
  padding: var(--tf-space-xl);
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.tf-parcours-card__headline {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 0.25rem;
}

.tf-parcours-card__subline {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  margin: 0 0 var(--tf-space-lg);
  min-height: 1.4em;
}

.tf-parcours-card__tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  margin: 0 0 var(--tf-space-md);
}

/* Carte 1 : 6 tags → grille 3 colonnes */
.tf-parcours-card:first-child .tf-parcours-card__tags {
  grid-template-columns: repeat(3, 1fr);
}

.tf-parcours-card__tag {
  font-size: var(--tf-font-size-xs);
  font-weight: 600;
  color: var(--tf-gray-600);
  background: var(--tf-gray-50, #f8f9fa);
  border: 1px solid var(--tf-gray-200, #e5e7eb);
  border-radius: var(--tf-radius-full);
  padding: 0.3rem 0.85rem;
  text-align: center;
}

.tf-parcours-card__cta {
  width: 100%;
  margin-top: auto;
}

.tf-parcours-card__price {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-base);
  font-weight: 700;
  color: var(--tf-secondary);
  margin: var(--tf-space-sm) 0 0;
  text-align: center;
}

/* --- Parcours: micro-témoignage --- */

.tf-parcours-card__testimonial {
  margin: var(--tf-space-lg) 0 0;
  padding: var(--tf-space-md);
  border-top: 1px solid var(--tf-gray-100);
  font-size: var(--tf-font-size-sm);
}

.tf-parcours-card__testimonial p {
  font-style: italic;
  color: var(--tf-gray-600);
  margin: 0 0 0.25rem;
  line-height: 1.5;
}

.tf-parcours-card__testimonial cite {
  font-style: normal;
  font-weight: 600;
  font-size: var(--tf-font-size-xs);
  color: var(--tf-gray-500);
}

/* ==========================================================================
   5e-bis. Homepage — Tutorat
   ========================================================================== */

.tf-section:has(.tf-tutorat) {
  padding-top: 0;
}

.tf-tutorat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-3xl);
  align-items: center;
}

.tf-tutorat--reversed {
  direction: ltr;
}

.tf-tutorat--reversed > .tf-tutorat__content {
  order: 1;
}

.tf-tutorat--reversed > .tf-tutorat__visual {
  order: 2;
}

.tf-tutorat__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--tf-radius-2xl);
  object-fit: cover;
  max-height: 520px;
}

.tf-tutorat__badge {
  display: inline-block;
  background: rgba(45, 143, 111, 0.1);
  color: var(--tf-secondary);
  font-size: var(--tf-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: var(--tf-radius-full);
  margin-bottom: var(--tf-space-md);
}

.tf-tutorat__content h2 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-3xl);
  font-weight: 800;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
  line-height: 1.2;
}

.tf-tutorat__intro {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-600);
  line-height: 1.7;
  margin: 0 0 var(--tf-space-xl);
}

.tf-tutorat__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tf-space-xl);
}

.tf-tutorat__features li {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  padding: 0.5rem 0;
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-700);
  font-weight: 500;
}

.tf-tutorat__features li svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .tf-tutorat {
    grid-template-columns: 1fr;
    gap: var(--tf-space-xl);
  }

  .tf-tutorat__visual {
    order: -1;
  }

  .tf-tutorat__visual img {
    max-height: 300px;
  }

  .tf-tutorat__content h2 {
    font-size: var(--tf-font-size-2xl);
  }
}

/* ==========================================================================
   5f. Homepage — Timeline (Comment ça marche)
   ========================================================================== */

.tf-timeline {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

.tf-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 27px;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--tf-secondary) 0%, var(--tf-gray-200) 100%);
}

.tf-timeline__step {
  display: flex;
  gap: var(--tf-space-lg);
  padding-bottom: var(--tf-space-2xl);
  position: relative;
}

.tf-timeline__step:last-child {
  padding-bottom: 0;
}

.tf-timeline__number {
  width: 56px;
  height: 56px;
  border-radius: var(--tf-radius-full);
  background: var(--tf-white);
  border: 2px solid var(--tf-gray-200);
  color: var(--tf-gray-400);
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.tf-timeline__step--highlight .tf-timeline__number {
  background: linear-gradient(135deg, var(--tf-primary), var(--tf-secondary));
  border-color: transparent;
  color: var(--tf-white);
  box-shadow: 0 4px 12px rgba(45, 143, 111, 0.3);
}

.tf-timeline__content {
  padding-top: var(--tf-space-sm);
}

.tf-timeline__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-xs);
}

.tf-timeline__text {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
  line-height: 1.6;
  margin: 0 0 var(--tf-space-xs);
}

.tf-timeline__detail {
  font-size: var(--tf-font-size-xs);
  color: var(--tf-secondary);
  font-weight: 600;
  margin: 0 0 var(--tf-space-sm);
}

/* ==========================================================================
   5g. Homepage — Témoignages premium
   ========================================================================== */

.tf-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tf-space-xl);
}

.tf-testimonial-card {
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  padding: var(--tf-space-xl);
  border: 1px solid var(--tf-gray-100);
  display: flex;
  flex-direction: column;
}

.tf-testimonial-card__stars {
  color: #DAA520;
  font-size: var(--tf-font-size-lg);
  letter-spacing: 2px;
  margin-bottom: var(--tf-space-md);
}

.tf-testimonial-card__quote {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-700);
  line-height: 1.7;
  font-style: italic;
  margin: 0 0 var(--tf-space-md);
  flex: 1;
}

.tf-testimonial-card__result {
  display: inline-block;
  font-size: var(--tf-font-size-xs);
  font-weight: 700;
  color: var(--tf-secondary);
  background: rgba(45, 143, 111, 0.08);
  padding: 0.3rem 0.75rem;
  border-radius: var(--tf-radius-full);
  margin-bottom: var(--tf-space-lg);
}

.tf-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  border-top: 1px solid var(--tf-gray-100);
  padding-top: var(--tf-space-md);
}

.tf-testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--tf-radius-full);
  background: linear-gradient(135deg, var(--tf-primary), var(--tf-secondary));
  color: var(--tf-white);
  font-weight: 700;
  font-size: var(--tf-font-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tf-testimonial-card__name {
  font-weight: 600;
  color: var(--tf-primary-dark);
  font-size: var(--tf-font-size-sm);
}

.tf-testimonial-card__course {
  font-size: var(--tf-font-size-xs);
  color: var(--tf-gray-500);
}

/* --- Testimonial enrichments --- */

.tf-testimonials__score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-sm);
  margin-top: var(--tf-space-md);
}

.tf-testimonials__score-stars {
  color: var(--tf-warning);
  font-size: var(--tf-font-size-lg);
  letter-spacing: 0.1em;
}

.tf-testimonials__score-value {
  font-family: var(--tf-font-heading);
  font-weight: 800;
  font-size: var(--tf-font-size-xl);
  color: var(--tf-primary-dark);
}

.tf-testimonials__score-count {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
}

.tf-testimonial-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tf-space-md);
}

.tf-testimonial-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--tf-font-size-xs);
  font-weight: 600;
  color: var(--tf-secondary);
}

.tf-testimonial-card__verified svg {
  color: var(--tf-secondary);
}

.tf-testimonial-card__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tf-gray-100);
}

/* Mobile: horizontal scroll carousel for 6 testimonials */
@media (max-width: 768px) {
  .tf-testimonials-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--tf-space-md);
    padding-bottom: var(--tf-space-md);
  }

  .tf-testimonials-grid::-webkit-scrollbar {
    display: none;
  }

  .tf-testimonial-card {
    min-width: 300px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   5h. Homepage — Garanties
   ========================================================================== */

.tf-guarantees-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tf-space-lg);
}

.tf-guarantee-card {
  text-align: center;
  padding: var(--tf-space-xl) var(--tf-space-lg);
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  border: 1px solid var(--tf-gray-100);
  transition: all var(--tf-transition-base);
}

.tf-guarantee-card:hover {
  border-color: var(--tf-gray-200);
  box-shadow: var(--tf-shadow-md);
}

.tf-guarantee-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--tf-radius-full);
  background: rgba(45, 143, 111, 0.08);
  color: var(--tf-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tf-space-md);
}

.tf-guarantee-card__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-base);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
}

.tf-guarantee-card__text {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   5i. Homepage — Pricing alt CTA
   ========================================================================== */

.tf-pricing-alt-cta {
  text-align: center;
  margin-top: var(--tf-space-xl);
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
}

.tf-pricing-alt-cta a {
  color: var(--tf-secondary);
  font-weight: 600;
  text-decoration: underline;
}

/* Pricing enrichments — moved to Section 11 (Composants Pricing) */

/* ==========================================================================
   5i-bis. Tarifs — Bloc Test de niveau
   ========================================================================== */

/* Réduire l'espace entre la grille pricing et ce bloc */
.tf-section:has(.tf-tarifs-test) {
  padding-top: 0;
}

.tf-tarifs-test {
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-200);
  border-radius: var(--tf-radius-xl);
  padding: var(--tf-space-2xl) var(--tf-space-2xl);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--tf-space-2xl);
  align-items: center;
  position: relative;
}

/* Partie gauche : icône + texte */
.tf-tarifs-test__left {
  display: flex;
  align-items: flex-start;
  gap: var(--tf-space-lg);
}

.tf-tarifs-test__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 143, 111, 0.1);
  color: var(--tf-secondary);
  border-radius: var(--tf-radius-lg);
}

.tf-tarifs-test__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-xs);
}

.tf-tarifs-test__desc {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-600);
  line-height: 1.6;
  margin: 0;
  max-width: 520px;
}

/* Partie droite : prix + CTA */
.tf-tarifs-test__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tf-space-md);
  flex-shrink: 0;
}

.tf-tarifs-test__price {
  text-align: center;
}

.tf-tarifs-test__amount {
  font-family: var(--tf-font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--tf-primary-dark);
  line-height: 1;
}

.tf-tarifs-test__amount small {
  font-size: 1.2rem;
  font-weight: 600;
}

.tf-tarifs-test__unit {
  display: block;
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  margin-top: 2px;
}

.tf-tarifs-test__cta {
  white-space: nowrap;
}

/* Bandeau « offert » pleine largeur en bas */
.tf-tarifs-test__badge {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-sm);
  background: rgba(45, 143, 111, 0.07);
  color: var(--tf-secondary);
  font-size: var(--tf-font-size-sm);
  font-weight: 600;
  padding: var(--tf-space-sm) var(--tf-space-lg);
  border-radius: var(--tf-radius-md);
  margin-top: calc(-1 * var(--tf-space-sm));
}

.tf-tarifs-test__badge svg {
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .tf-tarifs-test {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tf-tarifs-test__left {
    flex-direction: column;
    align-items: center;
  }

  .tf-tarifs-test__desc {
    max-width: none;
  }

  .tf-tarifs-test__right {
    align-items: center;
  }
}

/* ==========================================================================
   5j. Homepage — FAQ extras
   ========================================================================== */

.tf-section-header__subtitle--italic {
  font-style: italic;
}

.tf-section-header__subtitle--bold {
  color: var(--tf-gray-900, #1a1a1a);
  font-weight: 700;
  font-style: normal;
}

.tf-faq__contact {
  text-align: center;
  margin-top: var(--tf-space-xl);
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
}

.tf-faq__contact a {
  color: var(--tf-secondary);
  font-weight: 600;
}

/* ==========================================================================
   5k. Homepage — CTA final
   ========================================================================== */

.tf-home-cta-final {
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, #1a2740 50%, #0f1d30 100%);
  text-align: center;
  padding: 5rem 0 !important;
}

.tf-home-cta-final__title {
  font-family: var(--tf-font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--tf-white);
  margin: 0 0 var(--tf-space-md);
}

.tf-home-cta-final__text {
  font-size: var(--tf-font-size-lg);
  color: rgba(255, 255, 255, 0.7);
  max-width: 560px;
  margin: 0 auto var(--tf-space-xl);
  line-height: 1.6;
}

.tf-home-cta-final__btn {
  background: var(--tf-secondary) !important;
  color: var(--tf-white) !important;
  border-color: var(--tf-secondary) !important;
  font-size: var(--tf-font-size-lg) !important;
  padding: 1rem 2.5rem !important;
}

.tf-home-cta-final__btn:hover {
  background: #247a5e !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 143, 111, 0.4);
}

.tf-home-cta-final__reassurance {
  margin-top: var(--tf-space-md);
  font-size: var(--tf-font-size-sm);
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   5l. Homepage — Responsive mobile
   ========================================================================== */

@media (max-width: 768px) {
  .tf-trust-bar__inner {
    gap: var(--tf-space-md);
    justify-content: center;
  }

  .tf-method__grid,
  .tf-parcours-grid,
  .tf-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .tf-results-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tf-space-lg) var(--tf-space-xl);
  }

  .tf-guarantees-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tf-method__compare {
    grid-template-columns: 1fr;
  }

  .tf-timeline::before {
    left: 19px;
  }

  .tf-timeline__number {
    width: 40px;
    height: 40px;
    font-size: var(--tf-font-size-base);
  }
}

@media (max-width: 480px) {
  .tf-guarantees-grid {
    grid-template-columns: 1fr;
  }

  .tf-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   6. Composants — Social Proof (chiffres cles)
   ========================================================================== */

.tf-social-proof {
  display: flex;
  justify-content: center;
  gap: var(--tf-space-3xl);
  padding: var(--tf-space-2xl) 0;
  flex-wrap: wrap;
}

.tf-stat {
  text-align: center;
}

.tf-stat__number {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-4xl);
  font-weight: 800;
  display: block;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tf-stat__label {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-top: var(--tf-space-xs);
  display: block;
}

/* ==========================================================================
   7. Composants — Cards de cours
   ========================================================================== */

.tf-course-card {
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  box-shadow: var(--tf-shadow-md);
  overflow: hidden;
  transition: all var(--tf-transition-base);
  border: 1px solid var(--tf-gray-100);
  border-top: 4px solid var(--tf-gray-300);
  display: flex;
  flex-direction: column;
}

.tf-course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tf-shadow-xl);
}

/* Variantes couleur */
.tf-course-card--general { border-top-color: var(--tf-primary); }
.tf-course-card--specific { border-top-color: var(--tf-secondary); }
.tf-course-card--exams { border-top-color: var(--tf-primary-light); }

.tf-course-card__body {
  padding: var(--tf-space-2xl);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tf-course-card__level {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.875rem;
  font-size: var(--tf-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--tf-radius-full);
  background-color: var(--tf-primary);
  color: var(--tf-white);
  align-self: flex-start;
}

/* Couleur du badge selon la variante */
.tf-course-card--specific .tf-course-card__level { background-color: var(--tf-secondary); }
.tf-course-card--exams .tf-course-card__level { background-color: var(--tf-primary-light); }

.tf-course-card__title {
  margin-top: var(--tf-space-md);
  font-size: var(--tf-font-size-xl);
  color: var(--tf-gray-900);
}

.tf-course-card__description {
  margin-top: var(--tf-space-sm);
  color: var(--tf-gray-600);
  font-size: var(--tf-font-size-sm);
  line-height: 1.7;
  flex: 1;
}

.tf-course-card__price {
  margin-top: var(--tf-space-lg);
  font-size: var(--tf-font-size-base);
  font-weight: 700;
  color: var(--tf-secondary);
}

.tf-course-card__cta {
  margin-top: var(--tf-space-md);
}

/* ==========================================================================
   8. Composants — Steps (Comment ca marche)
   ========================================================================== */

.tf-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tf-space-xl);
  position: relative;
}

/* Ligne de connexion entre les steps */
.tf-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, var(--tf-primary-light), var(--tf-secondary));
  opacity: 0.3;
  z-index: 0;
}

.tf-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.tf-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--tf-radius-xl);
  background: linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-primary-light) 100%);
  color: var(--tf-white);
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 800;
  margin-bottom: var(--tf-space-lg);
  box-shadow: 0 4px 14px rgba(28, 46, 74, 0.25);
}

.tf-step__title {
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-gray-900);
  margin-bottom: var(--tf-space-sm);
}

.tf-step__text {
  color: var(--tf-gray-600);
  font-size: var(--tf-font-size-sm);
  line-height: 1.7;
}

@media (max-width: 992px) {
  .tf-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .tf-steps::before {
    display: none;
  }
}

@media (max-width: 600px) {
  .tf-steps {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   9. Composants — Temoignages
   ========================================================================== */

.tf-testimonial {
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  padding: var(--tf-space-2xl);
  position: relative;
  border: 1px solid var(--tf-gray-100);
  box-shadow: var(--tf-shadow-sm);
  transition: all var(--tf-transition-base);
}

.tf-testimonial:hover {
  box-shadow: var(--tf-shadow-md);
}

/* Guillemet decoratif */
.tf-testimonial::before {
  content: '\201C';
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 4.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--tf-secondary);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
}

.tf-testimonial__stars {
  color: var(--tf-warning);
  font-size: var(--tf-font-size-sm);
  margin-bottom: var(--tf-space-sm);
  letter-spacing: 0.1em;
}

.tf-testimonial__quote {
  font-size: var(--tf-font-size-base);
  font-style: italic;
  color: var(--tf-gray-700);
  line-height: 1.75;
  position: relative;
}

.tf-testimonial__author {
  margin-top: var(--tf-space-lg);
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  padding-top: var(--tf-space-md);
  border-top: 1px solid var(--tf-gray-100);
}

.tf-testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--tf-radius-full);
  object-fit: cover;
  background: linear-gradient(135deg, var(--tf-primary), var(--tf-secondary));
}

.tf-testimonial__name {
  font-family: var(--tf-font-heading);
  font-weight: 700;
  color: var(--tf-gray-900);
  font-size: var(--tf-font-size-sm);
}

.tf-testimonial__origin {
  font-size: var(--tf-font-size-xs);
  color: var(--tf-gray-500);
}

/* ==========================================================================
   9b. Composants — Catalogue des cours (/cours/)
   ========================================================================== */

/* Hero catalogue — texte à gauche, image à droite */
.tf-catalogue-hero {
  padding: var(--tf-space-3xl) 0 var(--tf-space-2xl);
}

.tf-catalogue-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-3xl);
  align-items: center;
}

.tf-catalogue-hero__title {
  font-family: var(--tf-font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
  line-height: 1.15;
}

.tf-catalogue-hero__subtitle {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0 0 var(--tf-space-xl);
  max-width: 480px;
}

.tf-catalogue-hero__nav {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-sm);
}

.tf-catalogue-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tf-space-sm);
  padding: 0.65rem 1.25rem;
  border-radius: var(--tf-radius-lg);
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-100);
  color: var(--tf-primary-dark);
  font-size: var(--tf-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tf-catalogue-hero__pill svg {
  color: var(--pill-color, var(--tf-secondary));
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.tf-catalogue-hero__pill:hover {
  border-color: var(--pill-color, var(--tf-secondary));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
  color: var(--tf-primary-dark);
}

.tf-catalogue-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tf-catalogue-hero__image {
  max-width: 100%;
  height: auto;
  border-radius: var(--tf-radius-xl);
}

/* Section thématique */
.tf-catalogue__section {
  padding: var(--tf-space-3xl) 0;
}

.tf-catalogue__section:nth-child(even) {
  background: var(--tf-gray-50);
}

/* En-tête thématique */
.tf-catalogue__header {
  display: flex;
  align-items: flex-start;
  gap: var(--tf-space-lg);
  margin-bottom: var(--tf-space-2xl);
  flex-wrap: wrap;
}

.tf-catalogue__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--tf-radius-lg);
  flex-shrink: 0;
}

.tf-catalogue__header-text {
  flex: 1;
  min-width: 200px;
}

.tf-catalogue__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-2xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-xs);
}

.tf-catalogue__title a {
  color: inherit;
  text-decoration: none;
}

.tf-catalogue__title a:hover {
  color: var(--tf-secondary);
}

.tf-catalogue__subtitle {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-500);
  margin: 0;
  line-height: 1.5;
}

.tf-catalogue__price {
  font-size: var(--tf-font-size-sm);
  font-weight: 600;
  color: var(--tf-secondary);
  background: rgba(45, 143, 111, 0.08);
  padding: 0.4rem 1rem;
  border-radius: var(--tf-radius-full);
  white-space: nowrap;
  align-self: center;
}

/* Grille des cartes (Général, Spécifique, Ateliers) */
.tf-catalogue__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--tf-space-lg);
}

.tf-catalogue__card {
  background: var(--tf-white);
  border-radius: var(--tf-radius-lg);
  padding: var(--tf-space-xl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.tf-catalogue__card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.tf-catalogue__card-level {
  display: inline-block;
  font-size: var(--tf-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--tf-radius-full);
  margin-bottom: var(--tf-space-sm);
  width: fit-content;
}

.tf-catalogue__card-title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 600;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
  line-height: 1.3;
}

.tf-catalogue__card-title a {
  color: inherit;
  text-decoration: none;
}

.tf-catalogue__card-title a:hover {
  color: var(--tf-secondary);
}

.tf-catalogue__card-desc {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  line-height: 1.5;
  margin: 0 0 var(--tf-space-lg);
  flex: 1;
}

.tf-catalogue__card-actions {
  display: flex;
  gap: var(--tf-space-sm);
  margin-top: auto;
}

.tf-catalogue__card-actions .tf-btn {
  flex: 1;
  text-align: center;
  justify-content: center;
}

/* Grille examens : regroupement par famille */
.tf-catalogue__exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--tf-space-xl);
}

.tf-catalogue__exam-family {
  background: var(--tf-white);
  border-radius: var(--tf-radius-lg);
  padding: var(--tf-space-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tf-catalogue__exam-family-title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  margin: 0 0 var(--tf-space-md);
  padding-bottom: var(--tf-space-sm);
  border-bottom: 2px solid currentColor;
}

.tf-catalogue__exam-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tf-catalogue__exam-link {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  padding: 0.6rem 0.75rem;
  border-radius: var(--tf-radius-md);
  text-decoration: none;
  color: var(--tf-gray-700);
  transition: background 0.15s;
}

.tf-catalogue__exam-link:hover {
  background: var(--tf-gray-50);
  color: var(--tf-primary-dark);
}

.tf-catalogue__exam-level {
  font-weight: 600;
  font-size: var(--tf-font-size-sm);
  color: var(--tf-primary-dark);
  white-space: nowrap;
  min-width: 80px;
}

.tf-catalogue__exam-desc {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  flex: 1;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tf-catalogue__arrow {
  flex-shrink: 0;
  color: var(--tf-gray-300);
  transition: color 0.15s, transform 0.15s;
}

.tf-catalogue__exam-link:hover .tf-catalogue__arrow {
  color: var(--tf-secondary);
  transform: translateX(2px);
}

/* Carte "Voir tous les..." intégrée dans la grille */
.tf-catalogue__card--see-all {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--tf-gray-50);
  border: 2px dashed var(--tf-gray-200) !important;
  border-top: 3px solid !important;
  min-height: 180px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.tf-catalogue__card--see-all:hover {
  background: var(--tf-white);
  border-color: var(--tf-gray-300) !important;
  transform: translateY(-2px);
}

.tf-catalogue__see-all-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tf-space-sm);
  font-size: var(--tf-font-size-base);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.tf-catalogue__see-all-inner svg {
  transition: transform 0.2s;
}

.tf-catalogue__card--see-all:hover .tf-catalogue__see-all-inner svg {
  transform: translateX(4px);
}

/* Responsive catalogue */
@media (max-width: 768px) {
  .tf-catalogue__header {
    flex-direction: column;
    gap: var(--tf-space-md);
  }

  .tf-catalogue__price {
    align-self: flex-start;
  }

  .tf-catalogue__grid,
  .tf-catalogue__exam-grid {
    grid-template-columns: 1fr;
  }

  .tf-catalogue__card-actions {
    flex-direction: column;
  }

  .tf-catalogue__exam-desc {
    display: none;
  }

  .tf-catalogue-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--tf-space-xl);
  }

  .tf-catalogue-hero__visual {
    order: -1;
  }

  .tf-catalogue-hero__image {
    max-width: 280px;
  }

  .tf-catalogue-hero__nav {
    flex-direction: column;
  }
}

/* Hub Hero — Page thématique (/cours/francais-general/, etc.) */
.tf-hub-hero {
  padding: var(--tf-space-3xl) 0 var(--tf-space-2xl);
}

.tf-hub-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-3xl);
  align-items: center;
}

.tf-hub-hero__grid--no-image {
  grid-template-columns: 1fr;
  max-width: 720px;
}

.tf-hub-hero__title {
  font-family: var(--tf-font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
  line-height: 1.15;
}

.tf-hub-hero__subtitle {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0 0 var(--tf-space-lg);
  max-width: 480px;
}

.tf-hub-hero__price {
  font-size: var(--tf-font-size-lg);
  font-weight: 600;
  color: var(--tf-secondary);
  margin: 0 0 var(--tf-space-xl);
}

.tf-hub-hero__actions {
  display: flex;
  gap: var(--tf-space-md);
  flex-wrap: wrap;
}

.tf-hub-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tf-hub-hero__image {
  max-width: 100%;
  height: auto;
  border-radius: var(--tf-radius-xl);
}

/* Hub — Grille des cours */
.tf-hub-courses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--tf-space-xl);
}

.tf-hub-courses__grid .tf-course-card__cta {
  display: flex;
  gap: var(--tf-space-sm);
  margin-top: auto;
}

@media (max-width: 768px) {
  .tf-hub-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--tf-space-xl);
  }

  .tf-hub-hero__visual {
    order: -1;
  }

  .tf-hub-hero__image {
    max-width: 280px;
  }

  .tf-hub-hero__actions {
    flex-direction: column;
  }

  .tf-hub-courses__grid {
    grid-template-columns: 1fr;
  }

  .tf-hub-courses__grid .tf-course-card__cta {
    flex-direction: column;
  }
}

/* ==========================================================================
   9c. Composants — Blog / Le Journal
   ========================================================================== */

/* Hero Blog */
.tf-blog-hero {
  position: relative;
  background: linear-gradient(135deg, #E8EEF8 0%, #D6E4F5 100%);
  padding: var(--tf-space-3xl) 0;
  overflow: hidden;
}

.tf-blog-hero__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-4xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-xs);
}

.tf-blog-hero__subtitle {
  font-size: var(--tf-font-size-lg);
  color: var(--tf-gray-500);
  margin: 0;
}

.tf-blog-hero__decor {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(28, 46, 74, 0.06);
}

/* Article à la une */
.tf-blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s;
}

.tf-blog-featured:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.tf-blog-featured__image-link {
  display: block;
  overflow: hidden;
}

.tf-blog-featured__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}

.tf-blog-featured:hover .tf-blog-featured__image {
  transform: scale(1.03);
}

.tf-blog-featured__content {
  padding: var(--tf-space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--tf-space-md);
}

.tf-blog-featured__cats {
  display: flex;
  gap: var(--tf-space-xs);
  flex-wrap: wrap;
}

.tf-blog-featured__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-2xl);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.tf-blog-featured__title a {
  color: var(--tf-primary-dark);
  text-decoration: none;
}

.tf-blog-featured__title a:hover {
  color: var(--tf-secondary);
}

.tf-blog-featured__excerpt {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0;
}

.tf-blog-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--tf-space-xs);
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-400);
}

.tf-blog-featured__meta-sep {
  color: var(--tf-gray-200);
}

.tf-blog-featured__content .tf-btn {
  align-self: flex-start;
}

/* Tag / Badge catégorie */
.tf-blog-tag {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: var(--tf-radius-full);
  background: rgba(28, 46, 74, 0.06);
  color: var(--tf-primary);
  font-size: var(--tf-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.2s;
}

.tf-blog-tag:hover {
  background: rgba(28, 46, 74, 0.12);
  color: var(--tf-primary-dark);
}

.tf-blog-tag--sm {
  padding: 0.2rem 0.6rem;
  font-size: 0.65rem;
}

/* Titre de section blog */
.tf-blog-section-title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-2xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-xl);
}

/* Grille d'articles */
.tf-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tf-space-xl);
}

/* Carte article */
.tf-blog-card {
  background: var(--tf-white);
  border-radius: var(--tf-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s, transform 0.3s;
}

.tf-blog-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.tf-blog-card__image-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.tf-blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}

.tf-blog-card:hover .tf-blog-card__image {
  transform: scale(1.05);
}

.tf-blog-card__body {
  padding: var(--tf-space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tf-blog-card__cats {
  display: flex;
  gap: var(--tf-space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--tf-space-xs);
}

.tf-blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--tf-space-xs);
  font-size: var(--tf-font-size-xs);
  color: var(--tf-gray-400);
  margin-bottom: var(--tf-space-sm);
}

.tf-blog-card__meta-sep {
  color: var(--tf-gray-200);
}

.tf-blog-card__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--tf-space-sm);
}

.tf-blog-card__title a {
  color: var(--tf-primary-dark);
  text-decoration: none;
}

.tf-blog-card__title a:hover {
  color: var(--tf-secondary);
}

.tf-blog-card__excerpt {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  line-height: 1.5;
  margin: 0 0 var(--tf-space-lg);
  flex: 1;
}

.tf-blog-card__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Pagination blog */
.tf-blog-pagination {
  margin-top: var(--tf-space-3xl);
  display: flex;
  justify-content: center;
}

.tf-blog-pagination ul {
  list-style: none;
  display: flex;
  gap: var(--tf-space-xs);
  padding: 0;
  margin: 0;
}

.tf-blog-pagination li {
  display: inline-block;
}

.tf-blog-pagination a,
.tf-blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--tf-space-sm);
  border-radius: var(--tf-radius-md);
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.tf-blog-pagination a {
  color: var(--tf-gray-600);
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-200);
}

.tf-blog-pagination a:hover {
  background: var(--tf-primary);
  color: var(--tf-white);
  border-color: var(--tf-primary);
}

.tf-blog-pagination span.current {
  background: var(--tf-primary);
  color: var(--tf-white);
  border: 1px solid var(--tf-primary);
}

/* Responsive blog */
@media (max-width: 992px) {
  .tf-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .tf-blog-hero__title {
    font-size: var(--tf-font-size-3xl);
  }

  .tf-blog-featured {
    grid-template-columns: 1fr;
  }

  .tf-blog-featured__image {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .tf-blog-featured__content {
    padding: var(--tf-space-xl);
  }

  .tf-blog-featured__title {
    font-size: var(--tf-font-size-xl);
  }

  .tf-blog-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   10. Composants — Section CTA
   ========================================================================== */

.tf-cta-section {
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, var(--tf-primary) 50%, var(--tf-primary-light) 100%);
  color: var(--tf-white);
  text-align: center;
  padding: var(--tf-space-4xl) var(--tf-space-xl);
  border-radius: var(--tf-radius-2xl);
  margin: var(--tf-space-3xl) 0;
  position: relative;
  overflow: hidden;
}

/* Orbe decoratif */
.tf-cta-section::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 143, 111, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.tf-cta-section__title {
  font-size: var(--tf-font-size-3xl);
  color: var(--tf-white);
  position: relative;
}

.tf-cta-section__text {
  color: rgba(255, 255, 255, 0.8);
  margin: var(--tf-space-md) auto 0;
  max-width: var(--tf-container-narrow);
  font-size: var(--tf-font-size-lg);
  position: relative;
}

.tf-cta-section__actions {
  margin-top: var(--tf-space-xl);
  position: relative;
}

/* ==========================================================================
   10d. Composants — Tarifs Hero
   ========================================================================== */

.tf-tarifs-hero {
  padding: var(--tf-space-3xl) 0 var(--tf-space-2xl);
  background: linear-gradient(135deg, #F0F4FA 0%, #E4ECF5 50%, #EDF3F0 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tf-tarifs-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 143, 111, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.tf-tarifs-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--tf-container-narrow);
  margin: 0 auto;
}

.tf-tarifs-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: var(--tf-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.375rem 1.25rem;
  background: rgba(45, 143, 111, 0.1);
  border: 1px solid rgba(45, 143, 111, 0.2);
  border-radius: var(--tf-radius-full);
  margin-bottom: var(--tf-space-lg);
  color: var(--tf-secondary);
}

.tf-tarifs-hero__title {
  font-family: var(--tf-font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
  line-height: 1.1;
}

.tf-tarifs-hero__subtitle {
  font-size: var(--tf-font-size-lg);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   10e. Composants — Pricing Toggle
   ========================================================================== */

.tf-pricing-toggle-wrapper {
  text-align: center;
  margin-bottom: var(--tf-space-2xl);
}

.tf-pricing-toggle {
  display: inline-flex;
  background: var(--tf-gray-100);
  border-radius: var(--tf-radius-full);
  padding: 4px;
  gap: 2px;
}

.tf-pricing-toggle__btn {
  padding: 0.625rem 1.75rem !important;
  border: none !important;
  border-radius: var(--tf-radius-full) !important;
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  background: transparent !important;
  color: var(--tf-gray-500) !important;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: none !important;
}

.tf-pricing-toggle__btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--tf-gray-700) !important;
}

.tf-pricing-toggle__btn.is-active {
  background: var(--tf-primary-dark) !important;
  color: var(--tf-white) !important;
  box-shadow: 0 2px 8px rgba(28, 46, 74, 0.2) !important;
}

.tf-pricing-toggle__btn.is-active:hover {
  background: var(--tf-primary-dark) !important;
  color: var(--tf-white) !important;
}

.tf-pricing-toggle__badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--tf-secondary);
  background: rgba(45, 143, 111, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: var(--tf-radius-full);
}

.tf-pricing-toggle__btn.is-active .tf-pricing-toggle__badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--tf-white);
}

/* ==========================================================================
   10f. Composants — Feature Cards (Ce qui est inclus)
   ========================================================================== */

.tf-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tf-space-xl);
  max-width: var(--tf-container-max);
  margin: 0 auto;
}

.tf-feature-card {
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  padding: var(--tf-space-xl) var(--tf-space-lg);
  text-align: center;
  border: 1px solid var(--tf-gray-100);
  transition: all var(--tf-transition-base);
}

.tf-feature-card:hover {
  border-color: var(--tf-gray-200);
  box-shadow: var(--tf-shadow-md);
  transform: translateY(-2px);
}

.tf-feature-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--tf-radius-lg);
  background: rgba(28, 46, 74, 0.06);
  color: var(--tf-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tf-space-md);
}

.tf-feature-card__icon--secondary {
  background: rgba(45, 143, 111, 0.08);
  color: var(--tf-secondary);
}

.tf-feature-card__icon--accent {
  background: rgba(99, 102, 241, 0.08);
  color: #6366F1;
}

.tf-feature-card__icon--info {
  background: rgba(59, 130, 246, 0.08);
  color: #3B82F6;
}

.tf-feature-card__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
}

.tf-feature-card__text {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   10g. Composants — Tutorat
   ========================================================================== */

.tf-tutorat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-3xl);
  align-items: center;
  max-width: var(--tf-container-max);
  margin: 0 auto;
}

.tf-tutorat__eyebrow {
  display: inline-flex;
  font-size: var(--tf-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 1rem;
  background: rgba(99, 102, 241, 0.08);
  color: #6366F1;
  border-radius: var(--tf-radius-full);
  margin-bottom: var(--tf-space-md);
}

.tf-tutorat__title {
  font-family: var(--tf-font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
  line-height: 1.15;
}

.tf-tutorat__text {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0;
}

.tf-tutorat__card {
  background: linear-gradient(135deg, #F8FAFD 0%, #F0F4FA 100%);
  border: 2px solid var(--tf-gray-200);
  border-radius: var(--tf-radius-xl);
  padding: var(--tf-space-2xl);
  text-align: center;
}

.tf-tutorat__card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--tf-radius-full);
  background: linear-gradient(135deg, var(--tf-primary), var(--tf-secondary));
  color: var(--tf-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tf-space-md);
}

.tf-tutorat__card-title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-lg);
}

.tf-tutorat__card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tf-space-xl);
  text-align: left;
}

.tf-tutorat__card-list li {
  padding: 0.5rem 0;
  padding-left: 1.75rem;
  position: relative;
  color: var(--tf-gray-700);
  font-size: var(--tf-font-size-sm);
}

.tf-tutorat__card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 18px;
  height: 18px;
  border-radius: var(--tf-radius-full);
  background: rgba(45, 143, 111, 0.1);
}

.tf-tutorat__card-list li::after {
  content: "\2713";
  position: absolute;
  left: 3px;
  top: 0.55rem;
  color: var(--tf-success);
  font-weight: 700;
  font-size: var(--tf-font-size-xs);
}

/* Pricing card — Strikethrough price (3-month mode) */
.tf-pricing-card__strike {
  font-size: var(--tf-font-size-base);
  font-weight: 400;
  color: var(--tf-gray-400);
  text-decoration: line-through;
  margin-right: var(--tf-space-sm);
  display: inline;
}

@media (max-width: 768px) {
  .tf-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tf-space-md);
  }

  .tf-tutorat {
    grid-template-columns: 1fr;
    gap: var(--tf-space-xl);
  }
}

@media (max-width: 480px) {
  .tf-features-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   11. Composants — Pricing (refonte v2)
   ========================================================================== */

.tf-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tf-space-sm);   /* gap réduit pour donner plus de place aux cartes */
  max-width: var(--tf-container-max);
  margin: 0 auto;
  align-items: stretch;
}

/* --- Carte de base --- */
.tf-pricing-card {
  background: var(--tf-white);
  border-radius: 16px;
  border: 1px solid var(--tf-gray-200);
  box-shadow: 0 2px 16px rgba(27, 51, 87, 0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Barre de couleur en haut de chaque carte */
.tf-pricing-card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--tf-primary) 0%, var(--tf-secondary) 100%);
}

.tf-pricing-card:hover {
  box-shadow: 0 8px 32px rgba(27, 51, 87, 0.13);
  transform: translateY(-3px);
}

/* --- En-tête de carte (nom + desc) --- */
.tf-pricing-card__header {
  padding: var(--tf-space-md) var(--tf-space-md) var(--tf-space-xs);
  background: transparent;
  border-bottom: none;
  position: relative;
}

/* --- Pas de "featured" — toutes les cartes sont égales --- */
.tf-pricing-card--featured {
  border-color: var(--tf-gray-200);
  box-shadow: 0 2px 16px rgba(27, 51, 87, 0.07);
}

.tf-pricing-card__name {
  font-size: var(--tf-font-size-xl);
  font-family: var(--tf-font-heading);
  font-weight: 700;
  color: var(--tf-gray-900);
  margin: 0;
}

.tf-pricing-card__desc {
  color: var(--tf-gray-500);
  font-size: var(--tf-font-size-sm);
  margin: var(--tf-space-xs) 0 0;
  line-height: 1.4;
}

/* --- Corps de carte --- */
.tf-pricing-card__body {
  padding: var(--tf-space-sm) var(--tf-space-md) var(--tf-space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* --- Bloc prix --- */
.tf-pricing-card__price-block {
  text-align: center;
  padding-bottom: var(--tf-space-lg);
  margin-bottom: var(--tf-space-lg);
  border-bottom: 1px solid var(--tf-gray-100);
}

.tf-pricing-card__price {
  font-family: var(--tf-font-heading);
  font-weight: 800;
  color: var(--tf-gray-900);
  display: flex;
  flex-wrap: wrap;          /* 1 — permet au strike de passer à la ligne au-dessus */
  align-items: baseline;
  justify-content: center;
  gap: 0;
  line-height: 1;
  margin-bottom: var(--tf-space-xs);
}

.tf-pricing-card__amount {
  font-size: 3rem;
  line-height: 1;
  color: var(--tf-gray-900);
}

/* 2 — Prix discounté en vert gras (mode 3 mois) */
.tf-pricing-card__price--discounted .tf-pricing-card__amount,
.tf-pricing-card__price--discounted .tf-pricing-card__currency {
  color: var(--tf-secondary);
  font-weight: 800;
}

/* € : plus petit, s'aligne naturellement à la baseline du grand chiffre */
.tf-pricing-card__currency {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tf-gray-700);
  /* pas d'align-self ni padding : baseline suffit */
}

/* /mois : léger, taille réduite, s'aligne aussi à la baseline */
.tf-pricing-card__period {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--tf-gray-400);
  margin-left: 0.15rem;
}

.tf-pricing-card__per-day {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--tf-font-size-sm);
  color: var(--tf-white);
  background: var(--tf-secondary);
  padding: 0.2rem 0.75rem;
  border-radius: var(--tf-radius-full);
  font-weight: 500;
  margin: var(--tf-space-xs) auto var(--tf-space-sm);
}

.tf-pricing-card__per-day-amount {
  font-weight: 700;
}

.tf-pricing-card__alt-price {
  color: var(--tf-gray-400);
  font-size: var(--tf-font-size-xs);
  margin: 0;
}

/* --- Liste features --- */
.tf-pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tf-space-md);
  text-align: left;
  flex: 1;
}

.tf-pricing-card__features li {
  padding: 0.45rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--tf-gray-700);
  font-size: var(--tf-font-size-sm);
  border-bottom: 1px solid var(--tf-gray-100);
}

.tf-pricing-card__features li:last-child {
  border-bottom: none;
}

.tf-pricing-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: var(--tf-radius-full);
  background: rgba(45, 143, 111, 0.12);
}

.tf-pricing-card__features li::after {
  content: "\2713";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tf-success);
  font-weight: 800;
  font-size: 0.65rem;
  line-height: 1;
}

/* --- CTA --- */
.tf-pricing-card__cta {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* --- Réassurance sous CTA --- */
.tf-pricing-card__reassurance {
  text-align: center;
  font-size: var(--tf-font-size-xs);
  color: var(--tf-gray-400);
  margin: var(--tf-space-sm) 0 0;
}

/* --- Strike (mode 3 mois) --- */
/* 1 — Strike : ligne entière au-dessus du prix remisé */
.tf-pricing-card__strike {
  flex: 0 0 100%;           /* occupe toute la largeur → passe à la ligne du dessus */
  text-align: center;
  font-size: var(--tf-font-size-sm);
  font-weight: 400;
  color: var(--tf-gray-400);
  text-decoration: line-through;
  margin-bottom: 0.15rem;
  display: block;
}

/* ==========================================================================
   12. Composants — FAQ Accordion
   ========================================================================== */

.tf-faq__item {
  border-bottom: 1px solid var(--tf-gray-200);
}

.tf-faq__question {
  width: 100%;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: var(--tf-space-lg) 0 !important;
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 600;
  color: var(--tf-gray-900) !important;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--tf-transition-fast);
  box-shadow: none !important;
  outline: none;
}

.tf-faq__question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--tf-gray-400);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-left: var(--tf-space-md);
}

.tf-faq__question[aria-expanded="true"]::after {
  content: '\2212';
  color: var(--tf-secondary);
}

.tf-faq__question:hover,
.tf-faq__question:focus {
  color: var(--tf-secondary) !important;
  background: transparent !important;
  background-color: transparent !important;
}

.tf-faq__question:active {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--tf-secondary) !important;
}

.tf-faq__answer {
  padding: 0 0 var(--tf-space-lg);
  color: var(--tf-gray-600);
  line-height: 1.75;
}

/* ==========================================================================
   13. Header — Fixed avec glass morphism
   ========================================================================== */

.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(14, 26, 45, 0.06);
  transition: box-shadow var(--tf-transition-base);
}

/* Compenser la hauteur du header fixe */
body {
  padding-top: 70px;
}

/* Admin bar */
body.admin-bar .site-header {
  top: 32px;
}

body.admin-bar {
  padding-top: 102px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
  body.admin-bar {
    padding-top: 116px;
  }
  body {
    padding-top: 56px;
  }
}

/* Container du header */
.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--tf-space-xl);
  min-height: 70px;
  max-width: var(--tf-container-max);
  margin: 0 auto;
}

/* Branding / Logo */
.site-header .site-branding {
  flex-shrink: 0;
}

.site-header .main-title {
  margin: 0;
  font-size: var(--tf-font-size-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.site-header .main-title a {
  color: var(--tf-primary-dark) !important;
  text-decoration: none !important;
}

.site-header .main-title a:hover {
  color: var(--tf-secondary) !important;
}

/* Navigation principale */
.main-navigation .main-nav > ul > li > a {
  color: var(--tf-gray-700) !important;
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  text-decoration: none !important;
  transition: color var(--tf-transition-fast);
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a {
  color: var(--tf-secondary) !important;
}

/* Sous-menu / dropdown */
.main-navigation ul ul {
  background-color: var(--tf-white) !important;
  border: 1px solid var(--tf-gray-100) !important;
  border-radius: var(--tf-radius-lg) !important;
  box-shadow: var(--tf-shadow-lg) !important;
  padding: var(--tf-space-sm) 0 !important;
  min-width: 220px;
}

.main-navigation ul ul a {
  color: var(--tf-gray-600) !important;
  font-size: var(--tf-font-size-sm) !important;
  padding: 0.5rem 1rem !important;
  transition: all var(--tf-transition-fast);
}

.main-navigation ul ul a:hover {
  color: var(--tf-secondary) !important;
  background-color: var(--tf-gray-50) !important;
}

.main-navigation ul ul ul {
  border-radius: var(--tf-radius-lg) !important;
}

/* Fleches de dropdown */
.main-navigation .dropdown-menu-toggle .gp-icon svg {
  fill: var(--tf-gray-500);
  width: 0.7em;
  height: 0.7em;
}

/* Lien CTA dans la navigation (Test de niveau) — style texte simple */
.main-navigation .main-nav > ul > li.tf-nav-highlight > a {
  background: none !important;
  color: var(--tf-secondary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.main-navigation .main-nav > ul > li.tf-nav-highlight > a:hover {
  color: var(--tf-secondary-dark) !important;
}

/* Lien Mon compte / Connexion dans le header */
.main-navigation .main-nav > ul > li.tf-nav-account > a,
.main-navigation .main-nav > ul > li.tf-nav-login > a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tf-secondary) !important;
  font-weight: 600 !important;
}

.main-navigation .main-nav > ul > li.tf-nav-account > a:hover,
.main-navigation .main-nav > ul > li.tf-nav-login > a:hover {
  color: var(--tf-secondary-dark) !important;
}

/* Bouton déconnexion dans le header — <span> avec JS onclick */
.tf-nav-logout-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 8px;
  color: var(--tf-gray-400);
  cursor: pointer;
  transition: color var(--tf-transition-fast);
}

.tf-nav-logout-btn:hover {
  color: var(--tf-danger, #e53e3e);
}

/* Menu burger (mobile) */
.menu-toggle {
  color: var(--tf-primary-dark) !important;
  padding: var(--tf-space-sm);
}

/* ==========================================================================
   14. Footer — Multi-colonnes TooFrench
   ========================================================================== */

.tf-footer {
  background: linear-gradient(180deg, var(--tf-primary-dark) 0%, #060D16 100%);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--tf-space-4xl) 0 var(--tf-space-2xl);
}

.tf-footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: all var(--tf-transition-fast);
}

.tf-footer a:hover {
  color: var(--tf-white);
}

/* --------------------------------------------------------------------------
   Layout principal : Brand (col 1) | Partie droite (cols 2-4 + ligne 2)
   -------------------------------------------------------------------------- */

/* Conteneur max-width + padding horizontal */
.tf-footer__inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--tf-space-3xl);
  max-width: var(--tf-container-max);
  margin: 0 auto;
  padding: 0 var(--tf-space-xl);
}

/* Colonne 1 — Marque */
.tf-footer__brand h3 {
  color: var(--tf-white);
  font-size: var(--tf-font-size-xl);
  margin-bottom: var(--tf-space-md);
}

.tf-footer__brand > p {
  font-size: var(--tf-font-size-sm);
  line-height: 1.75;
  margin-bottom: var(--tf-space-xl);
}

/* Bloc organisme de formation */
.tf-footer__of {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tf-space-sm);
  padding-top: var(--tf-space-lg);
}

.tf-footer__of img {
  width: 72px;
  height: auto;
  background: #fff;
  padding: 6px 8px;
  border-radius: 4px;
}

.tf-footer__of-text {
  font-size: var(--tf-font-size-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.tf-footer__of-text p {
  margin: 0 0 2px;
}

.tf-footer__of-text strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* Nos autres sites */
.tf-footer__sites {
  margin-top: var(--tf-space-lg);
  padding-top: var(--tf-space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tf-footer__sites h4 {
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  color: var(--tf-white);
  margin: 0 0 var(--tf-space-xs);
}

.tf-footer__sites ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tf-footer__sites a {
  font-size: var(--tf-font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.tf-footer__sites a:hover {
  color: var(--tf-white);
}

/* Partie droite : grille 3 cols (ligne 1) + ligne 2 */
.tf-footer__right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Ligne 1 : 3 colonnes cours (Français général | Spécifique | Examens) */
.tf-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--tf-space-2xl);
}

/* Ligne 2 : Informations | Test de niveau */
.tf-footer__mid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--tf-space-2xl);
  margin-top: var(--tf-space-2xl);
  padding-top: var(--tf-space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Colonnes — styles communs */
.tf-footer__col h4 {
  color: var(--tf-white);
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  margin-bottom: var(--tf-space-lg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Le titre de colonne peut être un lien */
.tf-footer__col h4 a {
  color: var(--tf-white);
  text-decoration: none;
}

.tf-footer__col h4 a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.tf-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tf-footer__col ul li {
  margin-bottom: var(--tf-space-sm);
}

.tf-footer__col ul li a {
  font-size: var(--tf-font-size-sm);
}

.tf-footer__col ul li a:hover {
  padding-left: 4px;
}

/* Masquer l'ancien footer widgets GeneratePress */
.footer-widgets,
.site-footer .footer-widgets-container,
.footer-widgets-container {
  display: none !important;
}

/* Masquer WPML footer */
.site-info .wpml-ls-statics-footer,
footer .wpml-ls-statics-footer {
  display: none !important;
}

/* Barre de copyright (footer GP) */
.site-info {
  background-color: #040A12 !important;
  padding: var(--tf-space-md) 0 !important;
}

.site-info .inside-site-info {
  max-width: var(--tf-container-max);
  margin: 0 auto;
  padding: 0 var(--tf-space-xl);
}

.site-info .copyright-bar {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: var(--tf-font-size-xs);
  text-align: center;
}

.site-info .copyright-bar a {
  color: rgba(255, 255, 255, 0.4) !important;
  text-decoration: none;
}

.site-info .copyright-bar a:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Barre basse du footer : liens légaux + icônes sociales */
.tf-footer__bottom {
  margin-top: var(--tf-space-2xl);
  padding-top: var(--tf-space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--tf-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tf-space-xl);
  padding-right: var(--tf-space-xl);
}

.tf-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--tf-space-md);
  flex-wrap: wrap;
}

.tf-footer__legal a {
  font-size: var(--tf-font-size-xs);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--tf-transition-fast);
}

.tf-footer__legal a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.tf-footer__legal span {
  color: rgba(255, 255, 255, 0.25);
  font-size: var(--tf-font-size-xs);
}

.tf-footer__social {
  display: flex;
  gap: var(--tf-space-sm);
}

.tf-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tf-radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  transition: all var(--tf-transition-fast);
}

.tf-footer__social a:hover {
  background: rgba(45, 143, 111, 0.5);
  color: var(--tf-white);
  transform: translateY(-2px);
}

/* ==========================================================================
   15. Override GeneratePress — Pleine largeur sur TOUS nos templates
       Utilise body.page-template (classe ajoutée par WP sur toute page
       avec template custom, fiable quelle que soit la structure de chemin)
   ========================================================================== */

body.page-template .site.grid-container {
  max-width: 100% !important;
  padding: 0 !important;
}

body.page-template .site-content {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.page-template .content-area {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

body.page-template .inside-article,
body.page-template .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.page-template .entry-header {
  display: none !important;
}

body.page-template #right-sidebar {
  display: none !important;
}

body.page-template.separate-containers .inside-article {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

body.page-template .wp-block-group__inner-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Fond de page blanc — écrase la couleur GP du body visible sur les côtés */
body.page-template {
  background-color: #fff !important;
}

/* Override GP pour le blog (body.blog = page listing des articles) */
body.blog .site.grid-container {
  max-width: 100% !important;
  padding: 0 !important;
}

body.blog .site-content {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.blog .content-area {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

body.blog .inside-article,
body.blog .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.blog .entry-header {
  display: none !important;
}

body.blog #right-sidebar {
  display: none !important;
}

/* Single post — forcer pleine largeur (supprimer sidebar + flex row) */
body.single .site-content {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single .content-area {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

body.single .inside-article,
body.single .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single .entry-header {
  display: none !important;
}

body.single #right-sidebar {
  display: none !important;
}

body.blog.separate-containers .inside-article {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   16. Grilles utilitaires
   ========================================================================== */

.tf-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--tf-space-xl) !important;
  align-items: stretch !important;
}

.tf-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--tf-space-xl) !important;
}

@media (max-width: 992px) {
  .tf-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tf-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .tf-grid-3,
  .tf-grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   17. Utilitaires — Badges, labels
   ========================================================================== */

.tf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--tf-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--tf-radius-full);
  line-height: 1.4;
}

.tf-badge--primary {
  background: rgba(28, 46, 74, 0.08);
  color: var(--tf-primary);
}

.tf-badge--accent {
  background: rgba(45, 143, 111, 0.08);
  color: var(--tf-secondary);
}

.tf-badge--cta {
  background: rgba(45, 143, 111, 0.08);
  color: var(--tf-secondary);
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

/* Tablette — pricing passe en 1 colonne dès que les 3 cartes sont trop étroites */
@media (max-width: 960px) {
  .tf-pricing {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .tf-hero {
    padding: var(--tf-space-3xl) 0 var(--tf-space-2xl);
  }

  .tf-hero__title {
    font-size: var(--tf-font-size-3xl);
    letter-spacing: -0.02em;
  }

  .tf-hero__subtitle {
    font-size: var(--tf-font-size-base);
  }

  .tf-hero__eyebrow {
    font-size: var(--tf-font-size-xs);
  }

  .tf-section-header h2 {
    font-size: var(--tf-font-size-2xl);
  }

  .tf-pricing {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .tf-pricing-card--featured {
    transform: none;
  }

  .tf-social-proof {
    gap: var(--tf-space-xl);
  }

  .tf-stat__number {
    font-size: var(--tf-font-size-2xl);
  }

  /* Header mobile */
  .site-header .inside-header {
    min-height: 56px;
    padding: 0 var(--tf-space-md);
  }

  /* Footer responsive (≤ 768px) */
  .tf-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--tf-space-2xl);
    padding: 0 var(--tf-space-md);
  }

  .tf-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--tf-space-xl);
  }

  .tf-footer__mid {
    grid-template-columns: 1fr 1fr;
    gap: var(--tf-space-xl);
  }

  .tf-footer__bottom {
    flex-direction: column;
    gap: var(--tf-space-md);
    text-align: center;
    padding-left: var(--tf-space-md);
    padding-right: var(--tf-space-md);
  }

  .tf-footer__legal {
    justify-content: center;
  }

  /* CTA section */
  .tf-cta-section {
    padding: var(--tf-space-2xl) var(--tf-space-lg);
    border-radius: var(--tf-radius-xl);
    margin: var(--tf-space-xl) var(--tf-space-md);
  }

  .tf-cta-section__title {
    font-size: var(--tf-font-size-2xl);
  }
}

@media (max-width: 480px) {
  .tf-footer__cols,
  .tf-footer__mid {
    grid-template-columns: 1fr;
  }

  .tf-hero__cta {
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================================================
   20. Zone Membre — Authentification (Connexion / Inscription)
   ========================================================================== */

.tf-auth-section {
  padding: var(--tf-space-4xl) 0;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.tf-container--narrow {
  max-width: var(--tf-container-narrow);
  margin: 0 auto;
  padding: 0 var(--tf-space-lg);
}

.tf-auth-card {
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  box-shadow: var(--tf-shadow-lg);
  padding: var(--tf-space-2xl);
  border: 1px solid var(--tf-gray-100);
}

.tf-auth-card__header {
  text-align: center;
  margin-bottom: var(--tf-space-2xl);
}

.tf-auth-card__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-3xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
}

.tf-auth-card__subtitle {
  font-size: var(--tf-font-size-lg);
  color: var(--tf-gray-500);
  margin: 0;
}

.tf-auth-card__footer {
  margin-top: var(--tf-space-xl);
  padding-top: var(--tf-space-lg);
  border-top: 1px solid var(--tf-gray-100);
  text-align: center;
}

.tf-auth-card__switch {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  margin: 0;
}

.tf-auth-card__switch a {
  color: var(--tf-secondary);
  font-weight: 600;
  text-decoration: none;
}

.tf-auth-card__switch a:hover {
  color: var(--tf-secondary-dark);
  text-decoration: underline;
}

/* ==========================================================================
   21. Zone Membre — Formulaires
   ========================================================================== */

.tf-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-lg);
}

.tf-auth-form__info {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
  margin: 0;
  padding: var(--tf-space-md);
  background: var(--tf-gray-50);
  border-radius: var(--tf-radius-md);
}

.tf-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-md);
}

.tf-form-grid--single {
  grid-template-columns: 1fr;
}

.tf-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-xs);
}

.tf-form-group label {
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  color: var(--tf-gray-700);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.tf-form-group__link {
  font-size: var(--tf-font-size-xs);
  color: var(--tf-secondary);
  text-decoration: none;
  font-weight: 400;
}

.tf-form-group__link:hover {
  text-decoration: underline;
}

.tf-form-group input[type="text"],
.tf-form-group input[type="email"],
.tf-form-group input[type="password"],
.tf-form-group input[type="tel"],
.tf-form-group select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--tf-gray-200);
  border-radius: var(--tf-radius-md);
  font-family: var(--tf-font-body);
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-900);
  background: var(--tf-white);
  transition: border-color var(--tf-transition-fast), box-shadow var(--tf-transition-fast);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.tf-form-group input:focus,
.tf-form-group select:focus {
  border-color: var(--tf-secondary);
  box-shadow: 0 0 0 3px rgba(45, 143, 111, 0.12);
}

.tf-form-group input::placeholder {
  color: var(--tf-gray-300);
}

.tf-form-group--checkbox {
  flex-direction: row;
  align-items: center;
}

.tf-form-group--checkbox label {
  flex-direction: row;
  gap: var(--tf-space-sm);
  align-items: center;
  cursor: pointer;
  font-weight: 400;
}

.tf-form-group--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--tf-secondary);
  cursor: pointer;
}

.tf-required {
  color: var(--tf-secondary);
}

.tf-form-actions {
  display: flex;
  align-items: center;
  gap: var(--tf-space-md);
  margin-top: var(--tf-space-md);
}

.tf-form-message {
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
}

.tf-form-message--success {
  color: var(--tf-secondary);
}

.tf-form-message--error {
  color: #DC2626;
}

/* Boutons spécifiques */
.tf-btn--full {
  width: 100%;
  justify-content: center;
}

.tf-btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--tf-font-size-sm);
}

.tf-btn--danger {
  background: #DC2626;
  color: var(--tf-white);
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: var(--tf-radius-md);
  font-family: var(--tf-font-body);
  font-weight: 600;
  font-size: var(--tf-font-size-sm);
  cursor: pointer;
  transition: background var(--tf-transition-fast);
}

.tf-btn--danger:hover {
  background: #B91C1C;
}

.tf-btn__loader {
  display: inline-flex;
  align-items: center;
}

/* Alertes */
.tf-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--tf-radius-md);
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  line-height: 1.5;
}

.tf-alert--success {
  background: rgba(45, 143, 111, 0.08);
  color: var(--tf-secondary-dark);
  border: 1px solid rgba(45, 143, 111, 0.2);
}

.tf-alert--error {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.tf-alert--warning {
  background: #FFF8E1;
  color: #7A5D00;
  border: 1px solid #FFE082;
  text-align: left;
  max-width: 540px;
  margin: 0 auto var(--tf-space-xl);
}

/* ==========================================================================
   22. Zone Membre — Dashboard
   ========================================================================== */

.tf-dashboard-section {
  padding: var(--tf-space-3xl) 0 var(--tf-space-4xl);
}

.tf-dashboard__header {
  display: flex;
  align-items: center;
  gap: var(--tf-space-lg);
  margin-bottom: var(--tf-space-2xl);
}

.tf-dashboard__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--tf-radius-full);
  background: linear-gradient(135deg, var(--tf-primary), var(--tf-primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tf-dashboard__initials {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 700;
  color: var(--tf-white);
  letter-spacing: 1px;
}

.tf-dashboard__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-2xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0;
}

.tf-dashboard__subtitle {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-500);
  margin: var(--tf-space-xs) 0 0;
}

/* Onglets */
.tf-dashboard__tabs {
  display: flex;
  gap: var(--tf-space-xs);
  border-bottom: 2px solid var(--tf-gray-100);
  margin-bottom: var(--tf-space-2xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tf-tab {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  padding: var(--tf-space-md) var(--tf-space-lg);
  border: none;
  background: none;
  font-family: var(--tf-font-body);
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  color: var(--tf-gray-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--tf-transition-fast), border-color var(--tf-transition-fast);
  white-space: nowrap;
}

.tf-tab--active {
  color: var(--tf-secondary);
  border-bottom-color: var(--tf-secondary);
  font-weight: 600;
}


.tf-tab__icon {
  display: flex;
  align-items: center;
}

.tf-tab__icon svg {
  width: 18px;
  height: 18px;
}

/* Panels */
.tf-tab-panel {
  display: none;
  animation: tfFadeIn 0.3s ease;
}

.tf-tab-panel--active {
  display: block;
}

@keyframes tfFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Footer dashboard */
.tf-dashboard__footer {
  margin-top: var(--tf-space-3xl);
  padding-top: var(--tf-space-xl);
  border-top: 1px solid var(--tf-gray-100);
  text-align: center;
}

.tf-dashboard__footer-text {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  margin: 0;
}

.tf-dashboard__footer-text a {
  color: var(--tf-secondary);
  text-decoration: none;
  font-weight: 500;
}

/* ==========================================================================
   22b. Header Zone Membre
   ========================================================================== */

/* Zone membre — Reset GP defaults */
.tf-member-area {
  padding-top: 0 !important;
}

.tf-member-area .site-header,
.tf-member-area .site-footer,
.tf-member-area #generate-slideout-menu,
.tf-member-area .tf-nav-logout-btn,
.tf-member-area .no-wpr-lazyrender.site-footer,
.tf-member-area .tf-footer {
  display: none !important;
}

.tf-header-member {
  background: var(--tf-primary-dark, #0F1D32);
  color: var(--tf-white);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.tf-header-member__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: center;
  padding: var(--tf-space-md) 0;
}

.tf-header-member__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.tf-header-member__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tf-space-lg);
  padding-right: var(--tf-space-xl);
}

.tf-header-member__logo-img {
  height: 36px;
  width: auto;
  background: var(--tf-white);
  padding: 6px 16px;
  border-radius: var(--tf-radius-md);
}

.tf-header-member__logo-text {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 800;
  color: var(--tf-white);
}

.tf-header-member__link {
  display: flex;
  align-items: center;
  gap: var(--tf-space-xs);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  transition: color var(--tf-transition-fast);
}

.tf-header-member__link:hover {
  color: var(--tf-white);
}

.tf-header-member__user {
  display: flex;
  align-items: center;
  gap: var(--tf-space-xs);
  color: var(--tf-white);
  font-size: var(--tf-font-size-sm);
  font-weight: 600;
}

.tf-header-member__logout {
  color: rgba(255, 255, 255, 0.5);
  padding: var(--tf-space-xs);
  border-radius: var(--tf-radius-sm);
  transition: color var(--tf-transition-fast), background var(--tf-transition-fast);
}

.tf-header-member__logout:hover {
  color: var(--tf-white);
  background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   22c. Dashboard Layout — Sidebar + Main
   ========================================================================== */

.tf-dashboard-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 64px);
}

/* Sidebar */
.tf-dashboard__sidebar {
  background: var(--tf-gray-50);
  border-right: 1px solid var(--tf-gray-100);
  padding: var(--tf-space-xl) 0;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.tf-dashboard__sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--tf-space-md);
  padding: 0 var(--tf-space-lg) var(--tf-space-xl);
  border-bottom: 1px solid var(--tf-gray-200);
  margin-bottom: var(--tf-space-lg);
}

.tf-dashboard__user-info {
  display: flex;
  flex-direction: column;
}

.tf-dashboard__user-name {
  font-family: var(--tf-font-heading);
  font-weight: 700;
  font-size: var(--tf-font-size-base);
  color: var(--tf-primary-dark);
}

.tf-dashboard__user-role {
  font-size: var(--tf-font-size-xs);
  color: var(--tf-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.tf-dashboard__user-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--tf-space-xs);
  padding: 2px 10px;
  background: rgba(45, 143, 111, 0.1);
  color: var(--tf-secondary);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--tf-radius-full);
  letter-spacing: 0.3px;
}

.tf-dashboard__user-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tf-secondary);
}

.tf-dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-2xs, 2px);
}

.tf-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--tf-space-md);
  padding: var(--tf-space-md) var(--tf-space-lg);
  border: none;
  background: none;
  font-family: var(--tf-font-body);
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  color: var(--tf-gray-600);
  cursor: pointer;
  transition: all var(--tf-transition-fast);
  text-align: left;
  width: 100%;
  border-left: 3px solid transparent;
}

.tf-sidebar-link:hover {
  background: var(--tf-gray-100);
  color: var(--tf-primary-dark);
}

.tf-sidebar-link--active {
  background: rgba(45, 143, 111, 0.08);
  color: var(--tf-secondary);
  font-weight: 600;
  border-left-color: var(--tf-secondary);
}

.tf-sidebar-link__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tf-sidebar-link__icon svg {
  width: 20px;
  height: 20px;
}

.tf-sidebar-divider {
  height: 1px;
  background: var(--tf-gray-200);
  margin: var(--tf-space-md) var(--tf-space-lg);
}

/* Main content */
.tf-dashboard__main {
  padding: var(--tf-space-2xl) var(--tf-space-3xl);
  max-width: 960px;
}

/* ==========================================================================
   22d. Page d'accueil zone membre
   ========================================================================== */

.tf-welcome__hero {
  margin-bottom: var(--tf-space-2xl);
}

.tf-welcome__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-3xl);
  font-weight: 800;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
}

.tf-welcome__text {
  font-size: var(--tf-font-size-lg);
  color: var(--tf-gray-500);
  line-height: 1.7;
  margin: 0;
  max-width: 640px;
}

.tf-welcome__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tf-space-lg);
}

.tf-welcome-card {
  display: flex;
  flex-direction: column;
  padding: var(--tf-space-xl);
  border-radius: var(--tf-radius-lg);
  border: 1px solid var(--tf-gray-100);
  background: var(--tf-white);
  text-decoration: none;
  color: inherit;
  transition: all var(--tf-transition-base);
  position: relative;
  overflow: hidden;
}

.tf-welcome-card:hover {
  border-color: var(--tf-gray-200);
  box-shadow: var(--tf-shadow-md);
  transform: translateY(-2px);
}

.tf-welcome-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--tf-radius-md);
  margin-bottom: var(--tf-space-lg);
}

.tf-welcome-card--emerald .tf-welcome-card__icon {
  background: rgba(45, 143, 111, 0.1);
  color: #2D8F6F;
}

.tf-welcome-card--blue .tf-welcome-card__icon {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.tf-welcome-card--purple .tf-welcome-card__icon {
  background: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
}

.tf-welcome-card--orange .tf-welcome-card__icon {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.tf-welcome-card__icon svg {
  width: 24px;
  height: 24px;
}

.tf-welcome-card__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
}

.tf-welcome-card__desc {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.tf-welcome-card__arrow {
  display: inline-block;
  margin-top: var(--tf-space-lg);
  font-size: var(--tf-font-size-lg);
  color: var(--tf-gray-300);
  transition: color var(--tf-transition-fast), transform var(--tf-transition-fast);
}

.tf-welcome-card:hover .tf-welcome-card__arrow {
  color: var(--tf-secondary);
  transform: translateX(4px);
}

/* ==========================================================================
   22f. Catalogue cours — Zone membre
   ========================================================================== */

.tf-catalog__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-2xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-lg);
}

.tf-catalog__filters {
  display: flex;
  gap: var(--tf-space-sm);
  margin-bottom: var(--tf-space-xl);
  flex-wrap: wrap;
}

.tf-catalog__filter {
  padding: var(--tf-space-sm) var(--tf-space-lg);
  border: 1px solid var(--tf-gray-200);
  border-radius: var(--tf-radius-full);
  background: var(--tf-white);
  font-family: var(--tf-font-body);
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  color: var(--tf-gray-600);
  cursor: pointer;
  transition: all var(--tf-transition-fast);
}

.tf-catalog__filter:hover {
  border-color: var(--tf-secondary);
  color: var(--tf-secondary);
}

.tf-catalog__filter--active {
  background: var(--tf-secondary);
  border-color: var(--tf-secondary);
  color: var(--tf-white);
}

.tf-catalog__section {
  margin-bottom: var(--tf-space-2xl);
}

.tf-catalog__section[hidden] {
  display: none;
}

.tf-catalog__section-title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-lg);
  padding-bottom: var(--tf-space-sm);
  border-bottom: 2px solid var(--tf-gray-100);
}

.tf-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tf-space-md);
}

.tf-catalog-card {
  padding: var(--tf-space-lg);
  border: 1px solid var(--tf-gray-100);
  border-radius: var(--tf-radius-lg);
  background: var(--tf-white);
  transition: all var(--tf-transition-base);
  display: flex;
  flex-direction: column;
}

.tf-catalog-card:hover {
  border-color: var(--tf-gray-200);
  box-shadow: var(--tf-shadow-sm);
}

.tf-catalog-card[hidden] {
  display: none;
}

.tf-catalog-card__level {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tf-secondary);
  background: rgba(45, 143, 111, 0.08);
  padding: 3px 10px;
  border-radius: var(--tf-radius-full);
  margin-bottom: var(--tf-space-sm);
  align-self: flex-start;
}

.tf-catalog-card__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-base);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
  line-height: 1.3;
}

.tf-catalog-card__desc {
  font-size: var(--tf-font-size-xs);
  color: var(--tf-gray-500);
  line-height: 1.5;
  margin: 0 0 var(--tf-space-md);
  flex: 1;
}

.tf-catalog-card .tf-btn {
  align-self: flex-start;
}

/* ==========================================================================
   22g. Détail cours — Zone membre
   ========================================================================== */

.tf-member-course__hero {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--tf-space-2xl);
  margin-bottom: var(--tf-space-3xl);
}

.tf-member-course__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-2xl);
  font-weight: 800;
  color: var(--tf-primary-dark);
  margin: var(--tf-space-md) 0;
}

.tf-member-course__desc {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-500);
  line-height: 1.7;
  margin: 0 0 var(--tf-space-lg);
}

.tf-member-course__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tf-space-lg);
  margin-top: var(--tf-space-xl);
}

.tf-member-course__trust span {
  display: flex;
  align-items: center;
  gap: var(--tf-space-xs);
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
}

.tf-member-course__card {
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-100);
  border-radius: var(--tf-radius-xl);
  padding: var(--tf-space-xl);
  box-shadow: var(--tf-shadow-lg);
  height: fit-content;
  position: sticky;
  top: 80px;
}

.tf-member-course__section {
  margin-bottom: var(--tf-space-3xl);
}

.tf-member-course__section h3 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: var(--tf-space-sm) 0 var(--tf-space-lg);
}

/* Breadcrumb zone membre */
.tf-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  margin-bottom: var(--tf-space-xl);
  font-size: var(--tf-font-size-sm);
}

.tf-breadcrumb__link {
  color: var(--tf-secondary);
  text-decoration: none;
  font-weight: 500;
}

.tf-breadcrumb__link:hover {
  text-decoration: underline;
}

.tf-breadcrumb__sep {
  color: var(--tf-gray-300);
}

.tf-breadcrumb__current {
  color: var(--tf-gray-500);
}

/* ==========================================================================
   22e. Responsive — Zone membre
   ========================================================================== */

@media (max-width: 768px) {
  .tf-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .tf-dashboard__sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--tf-gray-100);
    padding: var(--tf-space-md) 0;
  }

  .tf-dashboard__sidebar-header {
    padding: 0 var(--tf-space-md) var(--tf-space-md);
    margin-bottom: var(--tf-space-sm);
  }

  .tf-dashboard__nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--tf-space-md);
    gap: 0;
  }

  .tf-sidebar-link {
    flex-direction: column;
    gap: var(--tf-space-2xs, 2px);
    padding: var(--tf-space-sm) var(--tf-space-md);
    white-space: nowrap;
    font-size: var(--tf-font-size-xs);
    border-left: none;
    border-bottom: 2px solid transparent;
  }

  .tf-sidebar-link--active {
    border-left-color: transparent;
    border-bottom-color: var(--tf-secondary);
  }

  .tf-sidebar-divider {
    width: 1px;
    height: 24px;
    margin: 0 var(--tf-space-xs);
    align-self: center;
  }

  .tf-dashboard__main {
    padding: var(--tf-space-lg) var(--tf-space-md);
  }

  .tf-welcome__grid {
    grid-template-columns: 1fr;
  }

  .tf-welcome__title {
    font-size: var(--tf-font-size-2xl);
  }

  .tf-header-member__inner {
    padding: var(--tf-space-sm) var(--tf-space-md);
    grid-template-columns: 1fr;
  }

  .tf-catalog__grid {
    grid-template-columns: 1fr;
  }

  .tf-catalog__filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .tf-member-course__hero {
    grid-template-columns: 1fr;
  }

  .tf-member-course__card {
    position: static;
  }
}

/* Placeholder badge "Bientôt disponible" */
.tf-placeholder__badge {
  display: inline-block;
  padding: var(--tf-space-xs) var(--tf-space-lg);
  background: var(--tf-gray-50);
  color: var(--tf-gray-500);
  border: 1px solid var(--tf-gray-200);
  border-radius: var(--tf-radius-full);
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  margin-top: var(--tf-space-lg);
}

/* Placeholder note sous le bouton */
.tf-placeholder__note {
  font-size: var(--tf-font-size-xs);
  color: var(--tf-gray-400);
  margin-top: var(--tf-space-sm);
  font-style: italic;
}

/* Galerie professeurs preview */
.tf-tutors-preview {
  margin-top: var(--tf-space-xl);
  padding-top: var(--tf-space-xl);
  border-top: 1px solid var(--tf-gray-100);
}

.tf-tutors-preview__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 600;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-lg);
}

.tf-tutors-preview__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tf-space-lg);
}

.tf-tutor-card {
  text-align: center;
}

.tf-tutor-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--tf-gray-100);
  color: var(--tf-gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 600;
  margin: 0 auto var(--tf-space-sm);
}

.tf-tutor-card--placeholder .tf-tutor-card__avatar {
  border: 2px dashed var(--tf-gray-200);
  background: var(--tf-white);
}

.tf-tutor-card__name {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-400);
  margin: 0;
}

/* ==========================================================================
   23. Zone Membre — Profil
   ========================================================================== */

.tf-profile {
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-100);
  border-radius: var(--tf-radius-lg);
  padding: var(--tf-space-xl);
  margin-bottom: var(--tf-space-xl);
}

.tf-profile__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 600;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-lg);
  padding-bottom: var(--tf-space-md);
  border-bottom: 1px solid var(--tf-gray-50);
}

.tf-profile__meta {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  text-align: center;
  margin-top: var(--tf-space-md);
}

/* ==========================================================================
   24. Zone Membre — Achats / Abonnements
   ========================================================================== */

.tf-subscription-card {
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-100);
  border-radius: var(--tf-radius-lg);
  overflow: hidden;
  margin-bottom: var(--tf-space-xl);
}

.tf-subscription-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tf-space-lg) var(--tf-space-xl);
  background: var(--tf-gray-50);
  border-bottom: 1px solid var(--tf-gray-100);
}

.tf-subscription-card__header h3 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 600;
  color: var(--tf-primary-dark);
  margin: 0;
}

.tf-subscription-card__body {
  padding: var(--tf-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-md);
}

.tf-subscription-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tf-space-sm) 0;
}

.tf-subscription-detail__label {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
}

.tf-subscription-detail__value {
  font-weight: 600;
  color: var(--tf-primary-dark);
}

.tf-subscription-card__actions {
  display: flex;
  gap: var(--tf-space-md);
  padding: var(--tf-space-lg) var(--tf-space-xl);
  border-top: 1px solid var(--tf-gray-100);
}

/* Badges */
.tf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--tf-radius-full);
  font-size: var(--tf-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tf-badge--success {
  background: rgba(45, 143, 111, 0.1);
  color: var(--tf-secondary-dark);
}

.tf-badge--warning {
  background: rgba(212, 168, 67, 0.1);
  color: #92711D;
}

.tf-badge--danger {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

/* Tableau factures */
.tf-invoices {
  margin-top: var(--tf-space-xl);
}

.tf-invoices h3 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 600;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-lg);
}

.tf-table-wrapper {
  overflow-x: auto;
  border-radius: var(--tf-radius-lg);
  border: 1px solid var(--tf-gray-100);
}

.tf-table {
  width: 100%;
  border-collapse: collapse;
}

.tf-table th {
  background: var(--tf-gray-50);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: var(--tf-font-size-xs);
  font-weight: 600;
  color: var(--tf-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tf-table td {
  padding: 0.75rem 1rem;
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-700);
  border-top: 1px solid var(--tf-gray-50);
}

.tf-table tbody tr:hover {
  background: var(--tf-gray-50);
}

.tf-link {
  color: var(--tf-secondary);
  text-decoration: none;
  font-weight: 500;
}

.tf-link:hover {
  text-decoration: underline;
}

/* Upsells */
.tf-upsells {
  margin-top: var(--tf-space-2xl);
}

.tf-upsells__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 600;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-lg);
}

.tf-upsells__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-lg);
}

.tf-upsell-card {
  background: var(--tf-gray-50);
  border: 1px solid var(--tf-gray-100);
  border-radius: var(--tf-radius-lg);
  padding: var(--tf-space-xl);
  position: relative;
}

.tf-upsell-card h4 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 600;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
}

.tf-upsell-card p {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
  margin: 0 0 var(--tf-space-md);
}

.tf-upsell-card__badge {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  background: rgba(45, 143, 111, 0.1);
  color: var(--tf-secondary-dark);
  font-size: var(--tf-font-size-xs);
  font-weight: 600;
  border-radius: var(--tf-radius-full);
}

/* ==========================================================================
   25. Zone Membre — Placeholders (cours/tests)
   ========================================================================== */

.tf-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--tf-space-3xl) var(--tf-space-xl);
}

.tf-placeholder__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--tf-radius-full);
  background: var(--tf-gray-50);
  color: var(--tf-gray-300);
  margin-bottom: var(--tf-space-xl);
}

.tf-placeholder__icon--success {
  background: rgba(45, 143, 111, 0.08);
  color: var(--tf-secondary);
}

.tf-placeholder__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 600;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
}

.tf-placeholder__text {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-500);
  max-width: 480px;
  margin: 0 0 var(--tf-space-xl);
  line-height: 1.6;
}

.tf-placeholder__features {
  display: inline-flex;
  flex-direction: column;
  gap: var(--tf-space-sm);
  text-align: left;
  margin-bottom: var(--tf-space-xl);
}

.tf-placeholder__feature {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
}

.tf-placeholder__feature-icon {
  color: var(--tf-secondary);
  font-weight: 700;
}

/* ==========================================================================
   26. Zone Membre — Skeleton Loaders
   ========================================================================== */

.tf-skeleton {
  background: linear-gradient(90deg,
    var(--tf-gray-50) 25%,
    var(--tf-gray-100) 50%,
    var(--tf-gray-50) 75%
  );
  background-size: 200% 100%;
  animation: tfSkeleton 1.5s ease-in-out infinite;
  border-radius: var(--tf-radius-md);
}

.tf-skeleton--card {
  height: 200px;
  margin-bottom: var(--tf-space-lg);
}

.tf-skeleton--table {
  height: 300px;
}

.tf-skeleton--list {
  height: 400px;
}

@keyframes tfSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   27. Zone Membre — Modale de confirmation
   ========================================================================== */

.tf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 26, 45, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tf-transition-base), visibility var(--tf-transition-base);
}

.tf-modal-overlay--active {
  opacity: 1;
  visibility: visible;
}

.tf-modal {
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  padding: var(--tf-space-2xl);
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: var(--tf-shadow-xl);
  transform: scale(0.95);
  transition: transform var(--tf-transition-base);
}

.tf-modal-overlay--active .tf-modal {
  transform: scale(1);
}

.tf-modal__title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 600;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
}

.tf-modal__text {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
  margin: 0 0 var(--tf-space-xl);
  line-height: 1.6;
}

.tf-modal__actions {
  display: flex;
  gap: var(--tf-space-md);
  justify-content: center;
}

/* ==========================================================================
   28. Zone Membre — Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .tf-auth-card {
    padding: var(--tf-space-xl);
  }

  .tf-auth-card__title {
    font-size: var(--tf-font-size-2xl);
  }

  .tf-form-grid {
    grid-template-columns: 1fr;
  }

  .tf-dashboard__header {
    flex-direction: column;
    text-align: center;
    gap: var(--tf-space-md);
  }

  .tf-dashboard__tabs {
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tf-dashboard__tabs::-webkit-scrollbar {
    display: none;
  }

  .tf-tab {
    flex: 0 0 auto;
    justify-content: center;
    padding: var(--tf-space-sm) var(--tf-space-md);
    font-size: var(--tf-font-size-xs);
  }

  .tf-tab__label {
    display: none;
  }

  .tf-tab__icon svg {
    width: 22px;
    height: 22px;
  }

  .tf-tutors-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tf-subscription-card__actions {
    flex-direction: column;
  }

  .tf-upsells__grid {
    grid-template-columns: 1fr;
  }

  .tf-profile {
    padding: var(--tf-space-lg);
  }
}

@media (max-width: 480px) {
  .tf-auth-section {
    padding: var(--tf-space-2xl) 0;
  }

  .tf-auth-card {
    border-radius: var(--tf-radius-lg);
    padding: var(--tf-space-lg);
  }

  .tf-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tf-subscription-detail {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tf-space-xs);
  }
}

/* ==========================================================================
   29. Page Cours Détail — Landing page complète
   ========================================================================== */

.tf-course-detail {
  display: block;
  background: var(--tf-white);
}

/* --------------------------------------------------------------------------
   Hero — fond sombre pleine largeur, grille 2 colonnes
   -------------------------------------------------------------------------- */
.tf-course-detail__hero {
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, #2a4a6b 100%);
  color: var(--tf-white);
  padding: var(--tf-space-xl) 0;
  position: relative;
  overflow: hidden;
}

.tf-course-detail__hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,143,111,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.tf-course-detail__hero::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.tf-course-detail__hero .tf-container {
  position: relative;
  z-index: 1;
}

/* Breadcrumb dans le hero */
.tf-breadcrumb--hero {
  margin-bottom: var(--tf-space-xl);
}

.tf-breadcrumb--hero a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: var(--tf-font-size-sm);
  transition: color 0.2s;
}

.tf-breadcrumb--hero a:hover {
  color: rgba(255, 255, 255, 0.9);
}

.tf-breadcrumb--hero .tf-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.25);
  margin: 0 0.4em;
}

.tf-breadcrumb--hero .tf-breadcrumb__current {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--tf-font-size-sm);
}

/* Grille hero : texte gauche + carte droite */
.tf-course-detail__hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--tf-space-3xl);
  align-items: center;
}

/* Badge niveau */
.tf-course-detail__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(45, 143, 111, 0.25);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.3);
  padding: 0.4em 1em;
  border-radius: var(--tf-radius-full, 999px);
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--tf-space-md);
}

/* Titre et description */
.tf-course-detail__title {
  font-family: var(--tf-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--tf-white);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 var(--tf-space-md);
}

.tf-course-detail__desc {
  font-size: var(--tf-font-size-lg);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  max-width: 540px;
  margin: 0 0 var(--tf-space-xl);
}

/* CTAs dans le hero */
.tf-course-detail__hero-ctas {
  display: flex;
  gap: var(--tf-space-md);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--tf-space-xl);
}

/* Bouton blanc (fond sombre) */
.tf-btn--white {
  background: var(--tf-white);
  color: var(--tf-primary);
  border: 2px solid transparent;
}

.tf-btn--white:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--tf-primary-dark);
}

/* Bouton outline blanc */
.tf-btn--outline-white {
  background: rgba(255, 255, 255, 0.08);
  color: var(--tf-white);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  padding: 0.7rem 1.5rem;
  border-radius: var(--tf-radius-full, 999px);
  font-family: var(--tf-font-heading);
  font-weight: 600;
  font-size: var(--tf-font-size-base);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.tf-btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Trust items sous les CTAs */
.tf-course-detail__hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tf-space-lg);
  padding-top: var(--tf-space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tf-course-detail__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Carte prix flottante (dans le hero)
   -------------------------------------------------------------------------- */
.tf-course-detail__hero-card {
  position: relative;
}

.tf-course-detail__card {
  background: var(--tf-gray-50);
  border-radius: 20px;
  padding: var(--tf-space-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tf-course-detail__card-title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 700;
  color: var(--tf-primary);
  margin: 0 0 var(--tf-space-md);
}

.tf-course-detail__card-subtitle {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  margin: 0 0 var(--tf-space-md);
}

.tf-course-detail__card-price-wrap {
  margin-bottom: var(--tf-space-md);
}

.tf-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-space-md);
  flex-wrap: wrap;
}

.tf-price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.tf-price-compare {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tf-price-strike {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-400);
  text-decoration: line-through;
  font-weight: 500;
}

.tf-price-badge {
  background: rgba(45, 143, 111, 0.12);
  color: var(--tf-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--tf-radius-full, 999px);
  border: 1px solid rgba(45, 143, 111, 0.25);
  white-space: nowrap;
}

.tf-course-detail__card-amount {
  font-family: var(--tf-font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tf-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.tf-course-detail__card-period {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-400);
  font-weight: 500;
}

.tf-course-detail__card-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tf-space-lg);
  display: grid;
  gap: 8px;
}

.tf-course-detail__card-perks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--tf-gray-700);
  line-height: 1.4;
  font-weight: 500;
}

.tf-course-detail__card-perks svg {
  flex-shrink: 0;
  margin-top: 1px;
  width: 15px;
  height: 15px;
}

/* Toggle 1m / 3m */
.tf-card-toggle {
  display: flex;
  background: var(--tf-gray-100);
  border-radius: var(--tf-radius-full, 999px);
  padding: 3px;
  margin-bottom: var(--tf-space-md);
}

.tf-card-toggle__btn {
  flex: 1;
  padding: 5px 10px;
  border: none;
  background: transparent;
  border-radius: var(--tf-radius-full, 999px);
  font-family: var(--tf-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tf-gray-500);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.tf-card-toggle__btn--active {
  background: var(--tf-white);
  color: var(--tf-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Prix détail */
.tf-card-price-detail {
  font-size: 0.72rem;
  color: var(--tf-secondary);
  margin: -4px 0 var(--tf-space-md);
  font-weight: 600;
}

.tf-course-detail__card-btn {
  display: block;
  width: 100%;
  text-align: center;
}

.tf-course-detail__card-reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--tf-gray-400);
  margin-top: var(--tf-space-xs, 0.5rem);
}

/* --------------------------------------------------------------------------
   Section "Ce que vous allez maîtriser" — benefit cards
   -------------------------------------------------------------------------- */
.tf-course-detail__benefits {
  background: var(--tf-white);
}

.tf-course-detail__section-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--tf-space-3xl);
}

.tf-badge-label {
  display: inline-block;
  color: var(--tf-secondary);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--tf-space-sm);
}

.tf-course-detail__section-header h2 {
  font-family: var(--tf-font-heading);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--tf-primary);
  letter-spacing: -0.02em;
  margin: 0 0 var(--tf-space-sm);
}

.tf-course-detail__section-header p {
  color: var(--tf-gray-500);
  font-size: var(--tf-font-size-base);
  line-height: 1.7;
  margin: 0;
}

.tf-course-detail__benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tf-space-lg);
}

.tf-course-detail__benefit-card {
  background: var(--tf-gray-50);
  border: 1px solid var(--tf-gray-100);
  border-radius: 20px;
  padding: var(--tf-space-lg) var(--tf-space-lg) var(--tf-space-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.tf-course-detail__benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1);
  border-color: rgba(45, 143, 111, 0.3);
  background: var(--tf-white);
}

.tf-course-detail__benefit-icon {
  width: 56px;
  height: 56px;
  background: rgba(45, 143, 111, 0.1);
  color: var(--tf-secondary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tf-space-md);
}

.tf-course-detail__benefit-card h3 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-base);
  font-weight: 700;
  color: var(--tf-primary);
  line-height: 1.4;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Section Programme — accordéon
   -------------------------------------------------------------------------- */
.tf-course-detail__programme {
  background: var(--tf-gray-50);
}

.tf-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.tf-accordion__item {
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-200);
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.tf-accordion__item:hover {
  border-color: var(--tf-gray-300);
}

.tf-accordion__item--active {
  border-color: var(--tf-secondary);
  box-shadow: 0 8px 20px -4px rgba(45, 143, 111, 0.12);
}

.tf-accordion__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-base);
  font-weight: 600;
  color: var(--tf-primary);
  text-align: left;
  gap: var(--tf-space-md);
  transition: color 0.2s;
}

.tf-accordion__header:hover {
  color: var(--tf-secondary);
}

.tf-accordion__item--active .tf-accordion__header,
.tf-accordion__item--active .tf-accordion__header:hover {
  color: var(--tf-secondary);
}

.tf-accordion__chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.2s;
  color: var(--tf-gray-300);
}

.tf-accordion__header:hover .tf-accordion__chevron {
  color: var(--tf-secondary);
}

.tf-accordion__item--active .tf-accordion__chevron {
  transform: rotate(180deg);
  color: var(--tf-secondary);
}

.tf-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.tf-accordion__item--active .tf-accordion__content {
  max-height: 600px;
}

.tf-accordion__body {
  padding: 0 28px 24px;
  color: var(--tf-gray-700);
  font-size: var(--tf-font-size-base);
  line-height: 1.8;
}

.tf-accordion__body p {
  margin: 0 0 var(--tf-space-sm);
}

.tf-accordion__body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.tf-course-detail__cta-final {
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, var(--tf-primary) 100%);
  padding: var(--tf-space-3xl) 0;
  text-align: center;
}

.tf-course-detail__cta-final h2 {
  font-family: var(--tf-font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--tf-white);
  letter-spacing: -0.02em;
  margin-bottom: var(--tf-space-sm);
}

.tf-course-detail__cta-final p {
  font-size: var(--tf-font-size-base);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--tf-space-xl);
}

/* Lien retour */
.tf-course-detail__back-wrap {
  padding: var(--tf-space-lg) 0;
  background: var(--tf-white);
  border-top: 1px solid var(--tf-gray-100);
}

.tf-course-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tf-gray-500);
  font-size: var(--tf-font-size-sm);
  text-decoration: none;
  transition: color 0.2s;
}

.tf-course-detail__back-link:hover {
  color: var(--tf-secondary);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tf-course-detail__hero-grid {
    grid-template-columns: 1fr;
    gap: var(--tf-space-2xl);
  }

  .tf-course-detail__card {
    transform: none;
    max-width: 500px;
    margin: 0 auto;
  }

  .tf-course-detail__benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .tf-course-detail__hero {
    padding: var(--tf-space-lg) 0 var(--tf-space-2xl);
  }

  .tf-course-detail__hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .tf-course-detail__hero-ctas .tf-btn {
    text-align: center;
    justify-content: center;
  }

  .tf-course-detail__hero-trust {
    gap: var(--tf-space-md);
  }

  .tf-course-detail__benefits-grid {
    grid-template-columns: 1fr;
  }

  .tf-accordion__header {
    padding: 16px 20px;
  }

  .tf-accordion__body {
    padding: 0 20px 20px;
  }
}

/* (ancien bloc cours-detail supprimé — voir section 29 ci-dessus) */


/* ==========================================================================
   31. Page Souscrire (Checkout)
   ========================================================================== */

.tf-checkout__hero {
  padding: var(--tf-space-xl) 0 var(--tf-space-lg);
  text-align: center;
}

.tf-checkout__title {
  font-size: var(--tf-font-size-3xl);
  margin-bottom: var(--tf-space-xs);
}

.tf-checkout__desc {
  max-width: 600px;
  margin: 0 auto;
}

.tf-checkout__section-title {
  text-align: center;
  font-size: var(--tf-font-size-xl);
  margin-bottom: var(--tf-space-xl);
  color: var(--tf-text);
}

.tf-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-lg);
  max-width: 780px;
  margin: 0 auto;
}

.tf-checkout__plan {
  position: relative;
  background: var(--tf-white);
  border: 2px solid var(--tf-gray-200);
  border-radius: var(--tf-radius-lg);
  padding: var(--tf-space-xl);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tf-checkout__plan:hover {
  border-color: var(--tf-secondary);
  box-shadow: var(--tf-shadow-md);
}

.tf-checkout__plan--featured {
  border-color: var(--tf-secondary);
  box-shadow: var(--tf-shadow-lg);
}

.tf-checkout__plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tf-secondary);
  color: var(--tf-white);
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  padding: var(--tf-space-xs) var(--tf-space-xl);
  border-radius: 50px;
  white-space: nowrap;
}

.tf-checkout__plan-header {
  margin-bottom: var(--tf-space-md);
}

.tf-checkout__plan-name {
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary);
  margin: 0 0 var(--tf-space-2xs);
}

.tf-checkout__plan-flexibility {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-text-light);
  margin: 0;
}

.tf-checkout__plan-price {
  margin-bottom: var(--tf-space-xs);
  line-height: 1;
}

.tf-checkout__plan-amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--tf-primary);
}

.tf-checkout__plan-currency {
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary);
}

.tf-checkout__plan-period {
  font-size: var(--tf-font-size-base);
  color: var(--tf-text-light);
}

.tf-checkout__plan-equiv {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-secondary);
  font-weight: 600;
  margin: 0 0 var(--tf-space-xs);
}

/* Prix barré + badge -XX% */
.tf-checkout__plan-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-sm);
  margin-bottom: var(--tf-space-md);
}

.tf-checkout__plan-strike {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-400);
  text-decoration: line-through;
  font-weight: 500;
}

.tf-checkout__plan-discount {
  display: inline-block;
  background: rgba(45, 143, 111, 0.12);
  color: var(--tf-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(45, 143, 111, 0.25);
}

/* Grille single (test de niveau — 1 seule carte centrée) */
.tf-checkout__grid--single {
  display: flex;
  justify-content: center;
}

.tf-checkout__grid--single .tf-checkout__plan {
  max-width: 420px;
  width: 100%;
}

/* Rappel "offert avec un parcours" */
.tf-checkout__offert-reminder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-sm);
  margin-top: var(--tf-space-xl);
  padding: var(--tf-space-md) var(--tf-space-xl);
  background: var(--tf-gray-50);
  border-radius: var(--tf-radius-lg);
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
}

.tf-checkout__offert-reminder svg {
  flex-shrink: 0;
  color: var(--tf-secondary);
}

.tf-checkout__offert-reminder a {
  color: var(--tf-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
}

.tf-checkout__plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tf-space-lg);
  flex-grow: 1;
}

.tf-checkout__plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--tf-space-xs);
  font-size: var(--tf-font-size-sm);
  color: var(--tf-text);
  padding: var(--tf-space-xs) 0;
  border-top: 1px solid var(--tf-gray-100);
}

.tf-checkout__plan-features li:last-child {
  border-bottom: 1px solid var(--tf-gray-100);
}

.tf-checkout__plan-features svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.tf-checkout__plan-btn {
  width: 100%;
  text-align: center;
}

/* Garanties */
.tf-checkout__guarantees {
  display: flex;
  justify-content: center;
  gap: var(--tf-space-xl);
  margin-top: var(--tf-space-2xl);
  padding-top: var(--tf-space-xl);
  border-top: 1px solid var(--tf-gray-200);
}

.tf-checkout__guarantee {
  display: flex;
  align-items: center;
  gap: var(--tf-space-xs);
  font-size: var(--tf-font-size-sm);
  color: var(--tf-text-light);
}

/* ==========================================================================
   32. Page Confirmation / Annulation paiement
   ========================================================================== */

.tf-confirmation {
  display: block;
}

.tf-confirmation .tf-section {
  padding: var(--tf-space-3xl) 0;
}

.tf-confirmation__card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--tf-white);
  padding: var(--tf-space-2xl);
  border-radius: var(--tf-radius-lg);
  box-shadow: var(--tf-shadow-md);
}

.tf-confirmation__icon {
  margin-bottom: var(--tf-space-lg);
  color: var(--tf-secondary);
}

.tf-confirmation__icon--warning {
  color: #e67e22;
}

.tf-confirmation__title {
  font-size: var(--tf-font-size-2xl);
  color: var(--tf-primary);
  margin: 0 0 var(--tf-space-md);
}

.tf-confirmation__text {
  font-size: var(--tf-font-size-base);
  color: var(--tf-text);
  margin: 0 0 var(--tf-space-sm);
}

.tf-confirmation__text--secondary {
  color: var(--tf-text-light);
  font-size: var(--tf-font-size-sm);
}

.tf-confirmation__actions {
  display: flex;
  gap: var(--tf-space-md);
  justify-content: center;
  margin-top: var(--tf-space-xl);
}

/* ==========================================================================
   33. Responsive — Checkout & Confirmation
   ========================================================================== */

@media (max-width: 768px) {
  .tf-checkout__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .tf-checkout__guarantees {
    flex-direction: column;
    align-items: center;
    gap: var(--tf-space-md);
  }

  .tf-confirmation__actions {
    flex-direction: column;
  }

  .tf-confirmation__actions .tf-btn {
    width: 100%;
  }
}

/* ==========================================================================
   30. Page À propos
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */
.tf-a-propos {
  display: block;
  background: var(--tf-white);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.tf-a-propos__hero {
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, var(--tf-primary) 70%, #1a4a3a 100%) !important;
  padding: var(--tf-space-3xl) 0 var(--tf-space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tf-a-propos__hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,143,111,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.tf-a-propos__eyebrow {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tf-secondary);
  margin: 0 0 var(--tf-space-md);
}

.tf-a-propos__hero-title {
  font-family: var(--tf-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--tf-white);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 var(--tf-space-lg);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.tf-a-propos__hero-desc {
  font-size: var(--tf-font-size-lg);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Piliers
   -------------------------------------------------------------------------- */
.tf-a-propos__piliers {
  background: var(--tf-white);
}

.tf-a-propos__piliers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tf-space-xl);
}

.tf-a-propos__pilier {
  background: var(--tf-gray-50);
  border-radius: var(--tf-radius-lg, 16px);
  padding: var(--tf-space-xl);
  text-align: center;
  border: 1px solid var(--tf-gray-100);
  transition: box-shadow 0.25s, transform 0.25s;
}

.tf-a-propos__pilier:hover {
  box-shadow: 0 12px 32px rgba(28, 46, 74, 0.1);
  transform: translateY(-4px);
}

.tf-a-propos__pilier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(45, 143, 111, 0.1);
  color: var(--tf-secondary);
  border-radius: 50%;
  margin-bottom: var(--tf-space-lg);
}

.tf-a-propos__pilier-title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
  line-height: 1.25;
}

.tf-a-propos__pilier-desc {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-600);
  line-height: 1.7;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Chiffres clés
   -------------------------------------------------------------------------- */
.tf-a-propos__chiffres {
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, var(--tf-primary) 70%, #1a4a3a 100%);
  padding: var(--tf-space-4xl) 0;
}

.tf-a-propos__chiffres-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tf-space-xl);
  text-align: center;
}

.tf-a-propos__chiffre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tf-space-xs, 6px);
}

.tf-a-propos__chiffre-number {
  font-family: var(--tf-font-heading);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--tf-white);
  letter-spacing: -0.03em;
  line-height: 1;
}

.tf-a-propos__chiffre-label {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-base);
  font-weight: 700;
  color: var(--tf-secondary);
}

.tf-a-propos__chiffre-sub {
  font-size: var(--tf-font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.tf-a-propos__cta {
  background: var(--tf-white);
  text-align: center;
}

.tf-a-propos__cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.tf-a-propos__cta-title {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-3xl);
  font-weight: 800;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-md);
}

.tf-a-propos__cta-desc {
  font-size: var(--tf-font-size-lg);
  color: var(--tf-gray-600);
  margin: 0 0 var(--tf-space-xl);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tf-a-propos__piliers-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

  .tf-a-propos__chiffres-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tf-space-2xl);
  }
}

@media (max-width: 768px) {
  .tf-a-propos__hero {
    padding: var(--tf-space-2xl) 0 var(--tf-space-xl);
  }

  .tf-a-propos__chiffres-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tf-a-propos__cta-title {
    font-size: var(--tf-font-size-2xl);
  }
}

/* ==========================================================================
   31. Page Test de niveau
   ========================================================================== */

.tf-test {
  display: block;
  background: var(--tf-white);
}

/* Eyebrow partagé */
.tf-test__eyebrow {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tf-secondary);
  margin: 0 0 var(--tf-space-md);
}

.tf-test__eyebrow--dark {
  color: var(--tf-secondary);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.tf-test__hero {
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, var(--tf-primary) 70%, #1a4a3a 100%) !important;
  padding: var(--tf-space-3xl) 0 var(--tf-space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tf-test__hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,143,111,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.tf-test__hero-title {
  font-family: var(--tf-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--tf-white);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 auto var(--tf-space-lg);
  max-width: 720px;
}

.tf-test__hero-desc {
  font-size: var(--tf-font-size-lg);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto var(--tf-space-xl);
}

.tf-test__hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--tf-space-md);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Bloc offre
   -------------------------------------------------------------------------- */
.tf-test__offre {
  background: var(--tf-white);
  padding: var(--tf-space-xl) 0;
}

.tf-test__offre-inner {
  display: flex;
  align-items: center;
  gap: var(--tf-space-lg);
  background: linear-gradient(135deg, rgba(45,143,111,0.08) 0%, rgba(45,143,111,0.04) 100%);
  border: 1.5px solid rgba(45,143,111,0.25);
  border-radius: var(--tf-radius-lg, 16px);
  padding: var(--tf-space-xl);
  flex-wrap: wrap;
}

.tf-test__offre-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(45,143,111,0.12);
  color: var(--tf-secondary);
  border-radius: 50%;
}

.tf-test__offre-content {
  flex: 1;
  min-width: 200px;
}

.tf-test__offre-title {
  display: block;
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin-bottom: 6px;
}

.tf-test__offre-desc {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
  line-height: 1.6;
  margin: 0;
}

.tf-test__offre-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.tf-test__offre-strike {
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-400);
  text-decoration: line-through;
  font-weight: 600;
}

.tf-test__offre-gratuit {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 800;
  color: var(--tf-secondary);
}

/* --------------------------------------------------------------------------
   6 compétences
   -------------------------------------------------------------------------- */
.tf-test__competences {
  background: var(--tf-white);
}

.tf-test__comp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--tf-gray-100);
  border-radius: var(--tf-radius-lg, 16px);
  overflow: hidden;
  background: var(--tf-gray-100);
}

.tf-test__comp-card {
  background: var(--tf-white);
  padding: var(--tf-space-xl);
}

.tf-test__comp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  margin-bottom: var(--tf-space-md);
}

.tf-test__comp-icon--blue   { background: rgba(59,130,246,0.1);  color: #3b82f6; }
.tf-test__comp-icon--purple { background: rgba(139,92,246,0.1);  color: #8b5cf6; }
.tf-test__comp-icon--green  { background: rgba(16,185,129,0.1);  color: #10b981; }
.tf-test__comp-icon--orange { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.tf-test__comp-icon--pink   { background: rgba(239,68,68,0.1);   color: #ef4444; }
.tf-test__comp-icon--cyan   { background: rgba(6,182,212,0.1);   color: #06b6d4; }

.tf-test__comp-card h3 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
}

.tf-test__comp-card p {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
  line-height: 1.65;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Profil résultats
   -------------------------------------------------------------------------- */
.tf-test__profil-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--tf-space-4xl);
  align-items: center;
}

.tf-test__profil-text h2 {
  font-size: var(--tf-font-size-3xl);
  margin-bottom: var(--tf-space-md);
}

.tf-test__profil-list {
  list-style: none;
  padding: 0;
  margin: var(--tf-space-xl) 0 0;
  display: grid;
  gap: var(--tf-space-md);
}

.tf-test__profil-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--tf-font-size-base);
  color: var(--tf-gray-700);
  font-weight: 500;
}

/* Mockup navigateur */
.tf-test__mockup-browser {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(28,46,74,0.18);
  border: 1px solid var(--tf-gray-100);
}

.tf-test__mockup-bar {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tf-test__mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
}

.tf-test__mockup-url {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  margin-left: var(--tf-space-sm);
  font-family: monospace;
}

.tf-test__mockup-body {
  background: var(--tf-white);
  padding: var(--tf-space-lg);
}

.tf-test__mockup-level {
  display: flex;
  align-items: flex-start;
  gap: var(--tf-space-md);
  margin-bottom: var(--tf-space-lg);
  padding-bottom: var(--tf-space-lg);
  border-bottom: 1px solid var(--tf-gray-100);
}

.tf-test__mockup-badge {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--tf-secondary);
  color: var(--tf-white);
  font-family: var(--tf-font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tf-test__mockup-cecrl {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tf-gray-400);
  margin: 0 0 2px;
}

.tf-test__mockup-levelname {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 6px;
}

.tf-test__mockup-bar-score {
  height: 6px;
  background: var(--tf-gray-100);
  border-radius: 99px;
  width: 160px;
  overflow: hidden;
}

.tf-test__mockup-bar-fill {
  height: 100%;
  background: var(--tf-secondary);
  border-radius: 99px;
}

.tf-test__mockup-pct {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tf-gray-500);
}

.tf-test__mockup-skills {
  display: grid;
  gap: 8px;
}

.tf-test__mockup-skill {
  display: grid;
  grid-template-columns: 36px 1fr 1fr 36px;
  align-items: center;
  gap: 8px;
}

.tf-test__mockup-skill-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  text-align: center;
}

.tf-test__mockup-skill-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tf-gray-700);
}

.tf-test__mockup-skill-bar {
  height: 6px;
  background: var(--tf-gray-100);
  border-radius: 99px;
  overflow: hidden;
}

.tf-test__mockup-skill-fill {
  height: 100%;
  border-radius: 99px;
}

.tf-test__mockup-skill-pct {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Étapes
   -------------------------------------------------------------------------- */
.tf-test__steps {
  background: var(--tf-white);
}

.tf-test__steps-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--tf-space-3xl);
}

.tf-test__step {
  flex: 1;
  text-align: center;
  padding: 0 var(--tf-space-md);
  position: relative;
}

.tf-test__step-num {
  font-family: var(--tf-font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--tf-white);
  background: var(--tf-primary);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tf-space-md);
}

.tf-test__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: rgba(45,143,111,0.08);
  color: var(--tf-secondary);
  border-radius: 16px;
  margin-bottom: var(--tf-space-md);
}

.tf-test__step h3 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-base);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: 0 0 var(--tf-space-sm);
}

.tf-test__step p {
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  line-height: 1.6;
  margin: 0;
}

.tf-test__step-connector {
  flex-shrink: 0;
  width: 40px;
  height: 2px;
  background: var(--tf-gray-200);
  margin-top: 48px;
  position: relative;
}

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.tf-test__cta-final {
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, var(--tf-primary) 70%, #1a4a3a 100%);
  padding: var(--tf-space-4xl) 0;
  text-align: center;
}

.tf-test__cta-title {
  font-family: var(--tf-font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--tf-white);
  margin: 0 0 var(--tf-space-md);
  letter-spacing: -0.03em;
}

.tf-test__cta-desc {
  font-size: var(--tf-font-size-lg);
  color: rgba(255,255,255,0.72);
  margin: 0 0 var(--tf-space-xl);
}

.tf-test__cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--tf-space-md);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tf-test__comp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tf-test__profil-inner {
    grid-template-columns: 1fr;
    gap: var(--tf-space-2xl);
  }

  .tf-test__steps-row {
    flex-direction: column;
    align-items: center;
    gap: var(--tf-space-xl);
  }

  .tf-test__step-connector {
    width: 2px;
    height: 24px;
    margin: 0;
  }

  .tf-test__step {
    max-width: 320px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .tf-test__comp-grid {
    grid-template-columns: 1fr;
  }

  .tf-test__offre-inner {
    flex-direction: column;
    text-align: center;
  }

  .tf-test__offre-price {
    flex-direction: row;
    align-items: center;
    gap: var(--tf-space-md);
  }
}

/* ==========================================================================
   32. Pages légales (Mentions légales, Politique de confidentialité, CGU)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.tf-legal__hero {
  background: linear-gradient(135deg, var(--tf-primary-dark) 0%, var(--tf-primary) 70%, #1a4a3a 100%) !important;
  padding: var(--tf-space-3xl) 0 var(--tf-space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tf-legal__hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 143, 111, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.tf-legal__hero-inner {
  max-width: var(--tf-container-max);
  margin: 0 auto;
  padding: 0 var(--tf-space-xl);
  position: relative;
  z-index: 1;
}

.tf-legal__hero .tf-eyebrow {
  color: var(--tf-secondary);
  margin-bottom: var(--tf-space-sm);
}

.tf-legal__hero-title {
  font-family: var(--tf-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--tf-white);
  margin: 0;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   Contenu
   -------------------------------------------------------------------------- */
.tf-legal__content-section {
  background: var(--tf-gray-50);
  padding: var(--tf-space-4xl) 0 var(--tf-space-5xl);
}

.tf-legal__container {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--tf-space-xl);
}

/* Date de mise à jour */
.tf-legal__updated {
  display: inline-block;
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-200);
  border-radius: var(--tf-radius-md);
  padding: 4px 12px;
  margin-bottom: var(--tf-space-2xl);
}

/* Corps du contenu WP */
.tf-legal__body {
  background: var(--tf-white);
  border-radius: var(--tf-radius-xl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  padding: var(--tf-space-3xl) var(--tf-space-3xl);
}

.tf-legal__body h2 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: var(--tf-space-3xl) 0 var(--tf-space-md);
  padding-top: var(--tf-space-xl);
  border-top: 2px solid var(--tf-gray-100);
}

.tf-legal__body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.tf-legal__body h3 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-lg);
  font-weight: 600;
  color: var(--tf-gray-800);
  margin: var(--tf-space-xl) 0 var(--tf-space-sm);
}

.tf-legal__body p {
  font-size: var(--tf-font-size-base);
  line-height: 1.8;
  color: var(--tf-gray-700);
  margin-bottom: var(--tf-space-md);
}

.tf-legal__body ul,
.tf-legal__body ol {
  padding-left: var(--tf-space-xl);
  margin-bottom: var(--tf-space-md);
}

.tf-legal__body li {
  font-size: var(--tf-font-size-base);
  line-height: 1.8;
  color: var(--tf-gray-700);
  margin-bottom: var(--tf-space-xs);
}

.tf-legal__body a {
  color: var(--tf-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tf-legal__body a:hover {
  color: var(--tf-primary);
}

.tf-legal__body strong {
  font-weight: 600;
  color: var(--tf-gray-800);
}

.tf-legal__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--tf-space-lg);
  font-size: var(--tf-font-size-sm);
}

.tf-legal__body table th {
  background: var(--tf-gray-50);
  color: var(--tf-gray-800);
  font-weight: 600;
  padding: var(--tf-space-sm) var(--tf-space-md);
  border: 1px solid var(--tf-gray-200);
  text-align: left;
}

.tf-legal__body table td {
  padding: var(--tf-space-sm) var(--tf-space-md);
  border: 1px solid var(--tf-gray-200);
  color: var(--tf-gray-700);
  vertical-align: top;
}

.tf-legal__body table tr:nth-child(even) td {
  background: var(--tf-gray-50);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .tf-legal__body {
    padding: var(--tf-space-xl) var(--tf-space-lg);
  }

  .tf-legal__body h2 {
    font-size: var(--tf-font-size-lg);
  }
}

/* ==========================================================================
   VOUCHER CARD — Code d'accès TestFR
   ========================================================================== */

.tf-voucher-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tf-space-sm);
  padding: var(--tf-space-xl);
  margin: var(--tf-space-lg) 0;
  background: var(--tf-gray-50);
  border: 2px dashed var(--tf-secondary, #10b981);
  border-radius: var(--tf-radius-xl, 12px);
  text-align: center;
}

.tf-voucher-card__label {
  font-size: var(--tf-font-size-sm);
  font-weight: 600;
  color: var(--tf-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tf-voucher-card__code {
  font-size: 1.75rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  color: var(--tf-primary, #1c2e4a);
  letter-spacing: 0.08em;
  padding: var(--tf-space-sm) var(--tf-space-lg);
  background: white;
  border-radius: var(--tf-radius-md);
  border: 1px solid var(--tf-gray-200);
  user-select: all;
}

.tf-voucher-card__steps {
  text-align: left;
  margin: var(--tf-space-md) 0;
  padding: var(--tf-space-md) var(--tf-space-lg);
  background: var(--tf-gray-50);
  border-radius: var(--tf-radius-lg, 8px);
  width: 100%;
  max-width: 480px;
}

.tf-voucher-card__steps p {
  margin: 0 0 var(--tf-space-xs);
  font-size: var(--tf-font-size-sm);
}

.tf-voucher-card__steps ol {
  margin: 0;
  padding-left: 1.25em;
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
}

.tf-voucher-card__steps ol li {
  margin-bottom: var(--tf-space-xs);
}

/* ==========================================================================
   TEST RESULTS — Résultats TestFR
   ========================================================================== */

.tf-test-results {
  max-width: 720px;
}

/* Header avec badge niveau */
.tf-test-results__header {
  display: flex;
  align-items: center;
  gap: var(--tf-space-xl);
  padding: var(--tf-space-xl);
  background: linear-gradient(135deg, var(--tf-primary, #1c2e4a) 0%, #2a4a7f 100%);
  border-radius: var(--tf-radius-xl, 12px);
  color: white;
  margin-bottom: var(--tf-space-xl);
}

.tf-test-results__level-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 3px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.tf-test-results__level {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.tf-test-results__sublevel {
  font-size: var(--tf-font-size-xs);
  opacity: 0.8;
  margin-top: 2px;
}

.tf-test-results__meta {
  flex: 1;
}

.tf-test-results__title {
  margin: 0 0 var(--tf-space-xs);
  font-size: var(--tf-font-size-lg);
  color: white;
}

.tf-test-results__score {
  margin: 0;
  font-size: var(--tf-font-size-md);
  opacity: 0.9;
}

.tf-test-results__date {
  margin: var(--tf-space-xs) 0 0;
  font-size: var(--tf-font-size-sm);
  opacity: 0.7;
}

/* Grille des compétences */
.tf-test-results__sections {
  margin-bottom: var(--tf-space-xl);
}

.tf-test-results__sections h4 {
  margin: 0 0 var(--tf-space-md);
  font-size: var(--tf-font-size-md);
  color: var(--tf-primary, #1c2e4a);
}

.tf-test-results__grid {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-md);
}

.tf-test-results__skill {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--tf-space-xs) var(--tf-space-md);
  align-items: center;
}

.tf-test-results__skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-column: 1 / -1;
}

.tf-test-results__skill-name {
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  color: var(--tf-gray-700);
}

.tf-test-results__skill-level {
  font-size: var(--tf-font-size-xs);
  font-weight: 700;
  color: var(--tf-primary, #1c2e4a);
  background: var(--tf-gray-100);
  padding: 2px 8px;
  border-radius: var(--tf-radius-sm);
}

.tf-test-results__bar {
  height: 8px;
  background: var(--tf-gray-100);
  border-radius: 4px;
  overflow: hidden;
}

.tf-test-results__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tf-secondary, #10b981), #34d399);
  border-radius: 4px;
  transition: width 0.8s ease-out;
}

.tf-test-results__skill-score {
  font-size: var(--tf-font-size-sm);
  font-weight: 600;
  color: var(--tf-gray-600);
  min-width: 36px;
  text-align: right;
}

/* Feedback : points forts / axes d'amélioration */
.tf-test-results__feedback {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-space-lg);
  margin-bottom: var(--tf-space-xl);
}

.tf-test-results__feedback-col h4 {
  margin: 0 0 var(--tf-space-sm);
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  color: var(--tf-primary, #1c2e4a);
}

.tf-test-results__feedback-col ul {
  margin: 0;
  padding-left: 1.25em;
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
}

.tf-test-results__feedback-col ul li {
  margin-bottom: var(--tf-space-xs);
}

/* Recommandations */
.tf-test-results__recommendations {
  padding: var(--tf-space-lg);
  background: var(--tf-gray-50);
  border-radius: var(--tf-radius-lg, 8px);
  margin-bottom: var(--tf-space-xl);
}

.tf-test-results__recommendations h4 {
  margin: 0 0 var(--tf-space-sm);
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  color: var(--tf-primary, #1c2e4a);
}

.tf-test-results__recommendations ul {
  margin: 0;
  padding-left: 1.25em;
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-600);
}

.tf-test-results__recommendations ul li {
  margin-bottom: var(--tf-space-xs);
}

/* Actions */
.tf-test-results__actions {
  display: flex;
  gap: var(--tf-space-md);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Responsive — Voucher & Results
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .tf-voucher-card__code {
    font-size: 1.25rem;
  }

  .tf-test-results__header {
    flex-direction: column;
    text-align: center;
  }

  .tf-test-results__feedback {
    grid-template-columns: 1fr;
  }

  .tf-test-results__actions {
    flex-direction: column;
  }

  .tf-test-results__actions .tf-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   Article Single — single.php
   ========================================================================== */

.tf-article {
  padding-bottom: var(--tf-space-3xl);
}

/* Header */
.tf-article__header {
  padding: var(--tf-space-3xl) 0 var(--tf-space-xl);
  text-align: center;
}

.tf-article__cats {
  display: flex;
  gap: var(--tf-space-xs);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--tf-space-md);
}

.tf-article__title {
  font-family: var(--tf-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--tf-primary-dark);
  line-height: 1.2;
  margin: 0 0 var(--tf-space-md);
}

.tf-article__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--tf-space-xs);
  font-size: var(--tf-font-size-sm);
  color: var(--tf-gray-500);
}

.tf-article__meta-sep {
  color: var(--tf-gray-300);
}

.tf-article__author {
  font-weight: 600;
  color: var(--tf-primary);
}

/* Hero image */
.tf-article__hero {
  margin-bottom: var(--tf-space-2xl);
}

.tf-article__hero-image {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--tf-radius-xl);
  display: block;
}

/* Body / Content */
.tf-article__body {
  padding: var(--tf-space-xl) 0;
}

.tf-article__body .tf-container--narrow {
  font-size: var(--tf-font-size-base);
  line-height: 1.85;
  color: var(--tf-gray-700);
}

.tf-article__body h2 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-2xl);
  font-weight: 700;
  color: var(--tf-primary-dark);
  margin: var(--tf-space-2xl) 0 var(--tf-space-md);
}

.tf-article__body h3 {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-xl);
  font-weight: 700;
  color: var(--tf-primary);
  margin: var(--tf-space-xl) 0 var(--tf-space-sm);
}

.tf-article__body p {
  margin: 0 0 var(--tf-space-md);
}

.tf-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--tf-radius-lg);
  margin: var(--tf-space-lg) 0;
}

.tf-article__body blockquote {
  border-left: 4px solid var(--tf-secondary);
  margin: var(--tf-space-xl) 0;
  padding: var(--tf-space-md) var(--tf-space-lg);
  background: var(--tf-gray-50);
  border-radius: 0 var(--tf-radius-md) var(--tf-radius-md) 0;
  font-style: italic;
  color: var(--tf-gray-600);
}

.tf-article__body ul,
.tf-article__body ol {
  margin: 0 0 var(--tf-space-md);
  padding-left: var(--tf-space-lg);
}

.tf-article__body li {
  margin-bottom: var(--tf-space-xs);
}

.tf-article__body a {
  color: var(--tf-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tf-article__body a:hover {
  color: var(--tf-secondary-dark);
}

/* Tags */
.tf-article__tags {
  padding: var(--tf-space-lg) 0;
  border-top: 1px solid var(--tf-gray-100);
}

.tf-article__tags .tf-container--narrow {
  display: flex;
  gap: var(--tf-space-xs);
  flex-wrap: wrap;
}

/* Share */
.tf-article__share {
  padding: var(--tf-space-xl) 0;
  border-top: 1px solid var(--tf-gray-100);
}

.tf-article__share-label {
  font-family: var(--tf-font-heading);
  font-size: var(--tf-font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tf-gray-500);
  margin: 0 0 var(--tf-space-sm);
}

.tf-article__share-buttons {
  display: flex;
  gap: var(--tf-space-sm);
  flex-wrap: wrap;
}

.tf-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tf-space-xs);
  padding: 10px 18px;
  border-radius: var(--tf-radius-full);
  font-size: var(--tf-font-size-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--tf-white);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.tf-share-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.tf-share-btn--facebook {
  background: #1877F2;
}

.tf-share-btn--x {
  background: #000;
}

.tf-share-btn--linkedin {
  background: #0A66C2;
}

.tf-share-btn--whatsapp {
  background: #25D366;
  color: #fff;
}

.tf-share-btn--copy {
  background: var(--tf-gray-100);
  color: var(--tf-gray-700);
}

.tf-share-btn--copy:hover {
  background: var(--tf-gray-200);
}

/* Related articles — uses existing tf-blog-card styles from blog page */

/* Responsive (≤ 768px) */
@media (max-width: 768px) {
  .tf-article__title {
    font-size: 1.6rem;
  }

  .tf-article__hero-image {
    border-radius: var(--tf-radius-md);
    max-height: 300px;
  }

  .tf-article__meta {
    gap: 6px;
  }

  .tf-share-btn span {
    display: none;
  }

  .tf-share-btn {
    padding: 10px;
    border-radius: 50%;
  }
}

/* Language switcher — géré nativement par Weglot via le menu */

/* ==================================================================
   Bloc code promo de bienvenue
   ================================================================== */

.tf-promo-block {
  display: flex;
  align-items: flex-start;
  gap: var(--tf-space-lg);
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
  border: 2px solid var(--tf-green-200, #bbf7d0);
  border-radius: var(--tf-radius-xl, 16px);
  padding: var(--tf-space-xl) var(--tf-space-2xl);
  margin-bottom: var(--tf-space-2xl);
  position: relative;
  overflow: hidden;
}

.tf-promo-block::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: var(--tf-green-100, #dcfce7);
  border-radius: 50%;
  opacity: 0.5;
}

.tf-promo-block--used {
  background: var(--tf-gray-50, #f9fafb);
  border-color: var(--tf-gray-200, #e5e7eb);
}

.tf-promo-block--used::before {
  display: none;
}

.tf-promo-block__icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.tf-promo-block__content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.tf-promo-block__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tf-gray-900, #111827);
  margin: 0 0 4px 0;
}

.tf-promo-block__text {
  font-size: 0.95rem;
  color: var(--tf-green-700, #15803d);
  font-weight: 600;
  margin: 0 0 var(--tf-space-md) 0;
}

.tf-promo-block--used .tf-promo-block__text {
  color: var(--tf-gray-500, #6b7280);
  font-weight: 400;
}

.tf-promo-block__code-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--tf-space-sm);
  background: #fff;
  border: 2px dashed var(--tf-green-400, #4ade80);
  border-radius: var(--tf-radius-lg, 12px);
  padding: var(--tf-space-sm) var(--tf-space-lg);
  margin-bottom: var(--tf-space-sm);
}

.tf-promo-block__code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tf-green-700, #15803d);
  letter-spacing: 0.05em;
  user-select: all;
  background: transparent;
  padding: 0;
}

.tf-promo-block__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tf-green-50, #f0fdf4);
  border: 1px solid var(--tf-green-300, #86efac);
  border-radius: var(--tf-radius-md, 8px);
  padding: 6px 12px;
  cursor: pointer;
  color: var(--tf-green-700, #15803d);
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.2s;
}

.tf-promo-block__copy:hover {
  background: var(--tf-green-100, #dcfce7);
}

.tf-promo-block__copy.copied {
  background: var(--tf-green-600, #16a34a);
  color: #fff;
  border-color: var(--tf-green-600, #16a34a);
}

.tf-promo-block__hint {
  font-size: 0.8rem;
  color: var(--tf-gray-500, #6b7280);
  margin: var(--tf-space-xs) 0 0 0;
}

@media (max-width: 640px) {
  .tf-promo-block {
    flex-direction: column;
    text-align: center;
    padding: var(--tf-space-lg);
  }
  .tf-promo-block__code-wrap {
    flex-direction: column;
  }
  .tf-promo-block__code {
    font-size: 1.2rem;
  }
}

/* ── Course/Atelier Detail Layout ── */
.tf-course-detail__header {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--tf-space-xl, 2rem);
    align-items: start;
    margin-bottom: var(--tf-space-2xl, 3rem);
}
.tf-course-detail__level {
    display: inline-block;
    background: var(--tf-green-50, #ecfdf5);
    color: var(--tf-green-700, #047857);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--tf-radius-full, 50px);
    margin-bottom: var(--tf-space-sm, 0.5rem);
}
.tf-course-detail__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: var(--tf-space-sm, 0.5rem);
}
.tf-course-detail__desc {
    color: var(--tf-gray-600, #4b5563);
    line-height: 1.6;
}
.tf-course-detail__badges {
    display: flex;
    gap: var(--tf-space-md, 1rem);
    flex-wrap: wrap;
}
.tf-course-detail__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--tf-gray-600, #4b5563);
}
.tf-course-detail__card {
    background: #fff;
    border: 1px solid var(--tf-gray-200, #e5e7eb);
    border-radius: var(--tf-radius-xl, 16px);
    padding: var(--tf-space-xl, 2rem);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.tf-course-detail__card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: var(--tf-space-sm, 0.5rem);
}
.tf-course-detail__card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tf-course-detail__card-features li {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--tf-gray-700, #374151);
}
.tf-course-detail__card-features .tf-check {
    color: var(--tf-green-600, #059669);
    margin-right: 0.3rem;
}
.tf-course-detail__section-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tf-green-600, #059669);
    margin-bottom: var(--tf-space-xs, 0.25rem);
}
@media (max-width: 768px) {
    .tf-course-detail__header {
        grid-template-columns: 1fr;
    }
}