/* ================================================================
   CSS TEDCRAFT - TON ATELIER - VERSION OPTIMISÉE (Réécriture BEM)
   Ce fichier contient les styles globaux et les styles spécifiques
   pour les ateliers et le journal, incluant les dernières mises à jour.
   Organisation BEM et suppression des doublons 'RUNNER.JS'.
   ================================================================ */

/* ================================================================
   1. IMPORTS & VARIABLES CSS (ROOT)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined'); /* Assurez-vous que cette ligne est présente pour les icônes */

:root {
  /* Palette couleurs */
  --tc-sage-50: #f9f8f6;
  --tc-sage-100: #f4f2ee;
  --tc-sage-200: #ede8e0;
  --tc-sage-300: #d8cfc2;
  --tc-sage-400: #92a67f;
  --tc-sage-500: #6b7c5a;
  --tc-sage-600: #5a6b49;
  --tc-sage-700: #4d5a3f;
  --tc-sage-800: #404a35;
  
  --tc-stone-50: #fdfcfa;
  --tc-stone-100: #f7f5f2;
  --tc-stone-200: #efebe6;
  --tc-stone-300: #e2ddd6;
  --tc-stone-400: #c4bab0;
  --tc-stone-500: #8f8075;
  --tc-stone-600: #6b5d52;
  --tc-stone-700: #544840;
  --tc-stone-800: #3d322a;

  --tc-copper-500: #c08552; /* Cuivre */
  --tc-red-500: #ef4444; /* Rouge pour erreurs ou alertes (utilisé dans les animations par ex) */
  --tc-red-600: #dc2626;

  /* Couleurs pour RGB (pour les transparences) */
  --tc-sage-500-rgb: 107, 124, 90;
  --tc-red-500-rgb: 239, 68, 68;
  --tc-stone-50-rgb: 253, 252, 250;

  /* Typographie */
  --tc-font-serif: 'Crimson Text', Georgia, serif;
  --tc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espacements */
  --tc-space-1: 0.25rem; /* 4px */
  --tc-space-2: 0.5rem;  /* 8px */
  --tc-space-3: 0.75rem; /* 12px */
  --tc-space-4: 1rem;    /* 16px */
  --tc-space-5: 1.25rem; /* 20px */
  --tc-space-6: 1.5rem;  /* 24px */
  --tc-space-8: 2rem;    /* 32px */
  --tc-space-10: 2.5rem; /* 40px */
  --tc-space-12: 3rem;   /* 48px */
  --tc-space-16: 4rem;   /* 64px */

  /* Ombres */
  --tc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Rayons */
  --tc-radius-sm: 8px;
  --tc-radius-md: 12px;
  --tc-radius-lg: 16px;
  --tc-radius-xl: 20px;
  --tc-radius-2xl: 24px;

  /* Transitions */
  --tc-transition-fast: 0.2s ease;
  --tc-transition-normal: 0.3s ease;
  --tc-transition-slow: 0.5s ease;

  /* Configuration de base */
  font-family: var(--tc-font-sans);
  color: var(--tc-stone-700);
  background-color: var(--tc-stone-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   2. BASE & RESET LÉGER
   ================================================================ */
body {
    margin: 0;
    padding: 0;
    font-family: var(--tc-font-sans);
    color: var(--tc-stone-700);
    background-color: var(--tc-stone-50);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}


/* Material Symbols - Styles de base */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 24px; /* Taille par défaut */
  color: currentColor; /* Hérite de la couleur du parent par défaut */
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   3. UTILITIES & HELPERS
   ================================================================ */
.tc-container {
    max-width: 1000px; /* Limite la largeur du contenu principal */
    margin: 0 auto;
    padding: var(--tc-space-8) var(--tc-space-6);
}

.tc-text-center { text-align: center; }
.tc-text-left { text-align: left; }
.tc-text-right { text-align: right; }
.tc-text-bold { font-weight: 600; color: var(--tc-stone-800); }
.tc-mt-8 { margin-top: var(--tc-space-8); }


/* ================================================================
   4. ANIMATIONS
   ================================================================ */
@keyframes tc-fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tc-scaleUp {
  from { transform: scale(0.9); }
  to { transform: scale(1); }
}

@keyframes tc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes tc-slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tc-slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tc-pulse { /* Nouvelle animation pour les séparateurs */
  0%, 100% { box-shadow: 0 0 0 1px var(--tc-sage-200), 0 2px 8px rgba(var(--tc-sage-500-rgb), 0.25); }
  50% { box-shadow: 0 0 0 4px rgba(var(--tc-sage-200-rgb), 0.2), 0 2px 12px rgba(var(--tc-sage-500-rgb), 0.4); }
}

/* Animations spécifiques aux processus */
@keyframes tc-iconFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes tc-orbitSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes tc-particleFloat {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.7; }
  50% { transform: translateY(-12px) scale(1.2); opacity: 1; }
}

@keyframes tc-sparkleFloat {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes tc-energyPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes tc-patternMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}


/* ================================================================
   5. COMPOSANTS GÉNÉRIQUES (BEM)
   ================================================================ */

/* ----------------------------------------------------------------
   BLOC: tc-button
   ---------------------------------------------------------------- */
.tc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tc-space-2);
    padding: var(--tc-space-3) var(--tc-space-6);
    border-radius: var(--tc-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--tc-transition-normal);
    box-shadow: var(--tc-shadow-sm);
    cursor: pointer;
    border: none;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}
/* MODIFICATEUR: tc-button--small */
.tc-button-small {
    padding: var(--tc-space-2) var(--tc-space-4);
    font-size: 0.85rem;
}

/* MODIFICATEUR: tc-button--primary */
.tc-button-primary {
    background: linear-gradient(135deg, var(--tc-sage-500), var(--tc-sage-600));
    color: white;
}
.tc-button-primary:hover {
    background: linear-gradient(135deg, var(--tc-sage-600), var(--tc-sage-700));
    transform: translateY(-2px);
    box-shadow: var(--tc-shadow-md);
    color: white;
}

/* MODIFICATEUR: tc-button--secondary */
.tc-button-secondary {
    background: var(--tc-sage-100);
    color: var(--tc-stone-700);
    border: 1px solid var(--tc-sage-200);
}
.tc-button-secondary:hover {
    background: var(--tc-sage-200);
    transform: translateY(-2px);
    box-shadow: var(--tc-shadow-md);
    color: var(--tc-stone-800);
}

/* ----------------------------------------------------------------
   BLOC: tc-card
   ---------------------------------------------------------------- */
.tc-card {
    background-color: var(--tc-sage-50);
    padding: var(--tc-space-6);
    border-radius: var(--tc-radius-md);
    margin-bottom: var(--tc-space-8);
    box-shadow: var(--tc-shadow-sm);
    border: 1px solid var(--tc-sage-200);
    animation: tc-fadeIn var(--tc-transition-normal) forwards;
    opacity: 0;
}

/* ----------------------------------------------------------------
   BLOC: tc-input-field (textarea, input[type="text/number"])
   ---------------------------------------------------------------- */
.tc-input-field {
    width: 100%;
    padding: var(--tc-space-3);
    border: 1px solid var(--tc-sage-300);
    border-radius: var(--tc-radius-sm);
    font-size: 1rem;
    color: var(--tc-stone-500);
    background-color: white;
    transition: all var(--tc-transition-normal);
    min-height: 100px; /* Pour les textareas */
    resize: vertical; /* Permet uniquement le redimensionnement vertical */
    line-height: 1.5;
    margin-top: 1rem;
}

.tc-input-field::placeholder {
    color: var(--tc-stone-400);
}

.tc-input-field:focus {
    border-color: var(--tc-sage-500);
    outline: none;
    box-shadow: var(--tc-shadow-md);
}

/* MODIFICATEUR: tc-input-field--saving */
.tc-input-field.saving {
    border-color: var(--tc-copper-500);
    box-shadow: 0 0 0 3px rgba(192, 133, 82, 0.1);
}

/* MODIFICATEUR: tc-input-field--saved */
.tc-input-field.saved {
    border-color: var(--tc-sage-500);
    box-shadow: 0 0 0 3px rgba(var(--tc-sage-500-rgb), 0.1);
}

/* MODIFICATEUR: tc-input-field--error */
.tc-input-field.error {
    border-color: var(--tc-red-500);
    box-shadow: 0 0 0 3px rgba(var(--tc-red-500-rgb), 0.1);
}

/* ÉLÉMENT: tc-input-field__radar-score */
/* Note: `tc-radar-score-input` est considéré comme un MODIFICATEUR ici,
   mais comme il est aussi un sélecteur indépendant dans l'original,
   il est conservé comme un "élément" spécifique pour l'organisation */
.tc-radar-score-input { /* L'input de type number */
    color: transparent; /* Masque le texte dans l'input */
    background-color: var(--tc-sage-100); /* Donne une couleur de fond */
    border: 2px solid var(--tc-sage-300);
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    max-width: 80px;
}
.tc-radar-score-input:focus {
    color: var(--tc-stone-800) !important;
    background-color: white;
    border-color: var(--tc-sage-500);
}

/* ÉLÉMENT: tc-input-field__radar-score-wrapper */
.tc-radar-score-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--tc-space-2);
    width: 100%;
}

/* ÉLÉMENT: tc-input-field__radar-score-value */
.tc-radar-score-value {
    font-weight: 600;
    color: var(--tc-stone-800);
    font-size: 1.1em;
    min-width: 25px; /* Pour garder l'alignement stable */
    text-align: center;
    flex-shrink: 0;
    padding: var(--tc-space-2);
    background: var(--tc-sage-50);
    border-radius: var(--tc-radius-sm);
    border: 1px solid var(--tc-sage-200);
    transition: all var(--tc-transition-normal);
}

/* MODIFICATEUR: tc-radar-score-value--low */
.tc-radar-score-value.score-low {
    background-color: rgba(var(--tc-red-500-rgb), 0.1);
    color: var(--tc-red-600);
    padding: var(--tc-space-1) var(--tc-space-2);
    border-radius: var(--tc-radius-sm);
    transition: all var(--tc-transition-fast);
    border: 1px solid rgba(var(--tc-red-500-rgb), 0.3);
}

/* MODIFICATEUR: tc-radar-score-value--medium */
.tc-radar-score-value.score-medium {
    background-color: rgba(192, 133, 82, 0.1);
    color: var(--tc-copper-500);
    padding: var(--tc-space-1) var(--tc-space-2);
    border-radius: var(--tc-radius-sm);
    transition: all var(--tc-transition-fast);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* MODIFICATEUR: tc-radar-score-value--high */
.tc-radar-score-value.score-high {
    background-color: rgba(16, 185, 129, 0.1);
    color: #047857;
    padding: var(--tc-space-1) var(--tc-space-2);
    border-radius: var(--tc-radius-sm);
    transition: all var(--tc-transition-fast);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* MODIFICATEUR: tc-radar-score-value--excellent */
.tc-radar-score-value.score-excellent {
    background-color: rgba(34, 197, 94, 0.1);
    color: rgb(21, 128, 61);
    padding: var(--tc-space-1) var(--tc-space-2);
    border-radius: var(--tc-radius-sm);
    transition: all var(--tc-transition-fast);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ÉLÉMENT: tc-input-field (textarea) */
.tc-input-field {
    min-height: 100px; /* Pour les textareas */
    resize: vertical; /* Permet uniquement le redimensionnement vertical */
}

/* ----------------------------------------------------------------
   BLOC: tc-info-box
   ---------------------------------------------------------------- */
.tc-info-box {
    background-color: var(--tc-sage-50);
    border-left: 5px solid var(--tc-sage-400);
    padding: var(--tc-space-6);
    margin: var(--tc-space-8) auto; /* Centré par défaut */
    border-radius: var(--tc-radius-md);
    box-shadow: var(--tc-shadow-sm);
    animation: tc-fadeIn var(--tc-transition-normal) forwards;
    opacity: 0;
    max-width: 750px; /* Largeur max pour le contenu texte */
}

/* MODIFICATEUR: tc-info-box--blue */
.tc-info-box.blue {
    border-color: var(--tc-sage-500);
    background-color: rgba(var(--tc-sage-500-rgb), 0.1);
}

/* ÉLÉMENT: tc-info-box__title */
.tc-info-box-title {
    font-family: var(--tc-font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tc-stone-800);
    margin-top: 0;
    margin-bottom: var(--tc-space-4);
    line-height: 1.2;
}

/* ----------------------------------------------------------------
   BLOC: tc-download-box
   ---------------------------------------------------------------- */
.tc-download-box {
    display: flex;
    align-items: center;
    gap: var(--tc-space-6);
    background-color: var(--tc-stone-100);
    border: 1px solid var(--tc-sage-200);
    padding: var(--tc-space-6);
    border-radius: var(--tc-radius-lg);
    box-shadow: var(--tc-shadow-md);
    margin: var(--tc-space-10) auto; /* Centré */
    animation: tc-fadeIn var(--tc-transition-normal) forwards;
    opacity: 0;
    max-width: 80%; /* Limite la largeur */
    flex-direction: column; /* Par défaut en colonne pour les petits écrans */
    text-align: center;
}

/* ÉLÉMENT: tc-download-box__icon */
.tc-download-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--tc-sage-200), var(--tc-sage-300));
    border-radius: var(--tc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--tc-space-3); /* Marge pour le mode colonne */
    box-shadow: var(--tc-shadow-sm);
}
.tc-download-icon svg {
    width: 32px;
    height: 32px;
    color: var(--tc-stone-700);
}
.tc-download-icon .material-symbols-outlined { /* Pour les icônes material dans les download boxes */
    font-size: 32px;
    color: var(--tc-stone-700);
}

/* ÉLÉMENT: tc-download-box__content */
.tc-download-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le contenu textuel du bloc de contenu */
    text-align: center;
    width: 100%; /* Prend toute la largeur disponible */
}
.tc-download-content p {
    font-size: 0.95rem;
    color: var(--tc-stone-600);
    margin-bottom: var(--tc-space-4);
    line-height: 1.5;
}

/* ÉLÉMENT: tc-download-box__title */
.tc-download-title {
    font-family: var(--tc-font-sans);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--tc-stone-800);
    margin-top: 0;
    margin-bottom: var(--tc-space-3);
}

/* ----------------------------------------------------------------
   BLOC: tc-list
   ---------------------------------------------------------------- */
/* ÉLÉMENT GÉNÉRIQUE: list base */
.tc-list-steps,
.tc-list-items,
.tc-list-benefits {
    list-style: none; /* Supprime les puces par défaut */
    padding-left: 0;
    margin-top: var(--tc-space-3);
}
.tc-list-steps li,
.tc-list-items li,
.tc-list-benefits li {
    position: relative;
    text-align: left;
    padding-left: var(--tc-space-6); /* Espace pour la puce personnalisée */
    margin-bottom: var(--tc-space-2);
    line-height: 1.6;
    color: var(--tc-stone-700);
    font-size: 0.95rem;
    counter-increment: list-counter;
}

/* MODIFICATEUR: tc-list--steps (numérotée) */
.tc-list-steps { 
    counter-reset: list-counter; 
}
.tc-list-steps li::before {
    content: counter(list-counter) '. '; 
    position: absolute;
    left: 0;
    top: 0;
    color: var(--tc-sage-600);
    font-weight: 600;
    font-size: 1em;
    line-height: inherit;
    width: var(--tc-space-2); 
    text-align: right;
}

/* MODIFICATEUR: tc-list--items (checkmark) */
.tc-list-items li::before,
.tc-list-benefits li::before { /* tc-list-benefits utilise le même checkmark */
    content: '\2713'; /* Icône de checkmark (✓) */
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--tc-sage-500);
    font-size: 1.1em;
    line-height: inherit;
}

/* ----------------------------------------------------------------
   BLOC: tc-quote
   ---------------------------------------------------------------- */
.tc-quote-style {
    font-family: var(--tc-font-sans);
    font-size: 1rem;
    font-style: italic;
    color: var(--tc-stone-700);
    margin: var(--tc-space-4) auto; /* Centré */
    padding: var(--tc-space-4);
    border-left: 3px solid var(--tc-copper-500);
    background-color: var(--tc-stone-200);
    border-radius: var(--tc-radius-sm);
    max-width: 800px; /* Limite la largeur */
}

/* ----------------------------------------------------------------
   BLOC: tc-spinner (Loader)
   ---------------------------------------------------------------- */
#tc-full-spinner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(var(--tc-stone-50-rgb), 0.95);
    z-index: 30000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity var(--tc-transition-normal);
}
/* MODIFICATEUR: tc-full-spinner--hidden */
#tc-full-spinner.hidden {
    opacity: 0;
    pointer-events: none;
}
/* ÉLÉMENT: tc-spinner__inner */
.tc-spinner-inner {
    border: 5px solid var(--tc-sage-200);
    border-top: 5px solid var(--tc-sage-500);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: tc-spin 1s linear infinite;
}
/* ÉLÉMENT: tc-spinner__msg */
.tc-spinner-msg {
    margin-top: var(--tc-space-6);
    font-size: 1.15rem;
    color: var(--tc-stone-700);
}

/* ----------------------------------------------------------------
   BLOC: tc-toast (Notifications)
   ---------------------------------------------------------------- */
.tc-toast {
    position: fixed;
    z-index: 20000;
    right: var(--tc-space-8);
    top: var(--tc-space-8);
    min-width: 180px;
    max-width: 340px;
    padding: var(--tc-space-4) var(--tc-space-5);
    border-radius: var(--tc-radius-md);
    box-shadow: var(--tc-shadow-lg);
    font-weight: 600;
    font-size: 1.05rem;
    opacity: 0.98;
    transition: opacity var(--tc-transition-normal);
    color: white;
}
/* MODIFICATEUR: tc-toast--info */
.tc-toast-info { background-color: var(--tc-stone-700); }
/* MODIFICATEUR: tc-toast--success */
.tc-toast-success { background-color: var(--tc-sage-600); }
/* MODIFIC ATEUR: tc-toast--error */
.tc-toast-error { background-color: var(--tc-red-500); }


/* ================================================================
   6. STYLES SPÉCIFIQUES POUR LA PAGE D'ACCUEIL DU JOURNAL
   (.tc-journal-accueil-page)
   ================================================================ */

/* ----------------------------------------------------------------
   BLOC: tc-journal-accueil-page (Block principal)
   ---------------------------------------------------------------- */
.tedcraft-custom-page.tc-journal-accueil-page {
    background-color: var(--tc-stone-50);
    box-shadow: none;
    padding: 0; /* Pas de padding global sur ce wrapper */
    max-width: 1200px;
    margin: var(--tc-space-8) auto;
    border-radius: var(--tc-radius-lg);
    overflow: hidden;
}

/* ----------------------------------------------------------------
   BLOC: tc-introduction-section
   ---------------------------------------------------------------- */
.tc-introduction-section {
    margin-bottom: var(--tc-space-12);
    text-align: center;
    padding: var(--tc-space-8) var(--tc-space-6); /* Padding interne */
}

/* ÉLÉMENT: tc-introduction-section__title-1 */
.tc-introduction-section .tc-title-1 { /* Titre dans l'intro */
    margin-bottom: var(--tc-space-6);
}

/* ÉLÉMENT: tc-introduction-section__body-lg */
.tc-introduction-section .tc-body-lg {
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 800px;
    margin: var(--tc-space-4) auto;
}

/* ----------------------------------------------------------------
   BLOC: tc-journal-access-box
   ---------------------------------------------------------------- */
.tc-journal-access-box {
    display: flex;
    align-items: center;
    gap: var(--tc-space-6);
    background-color: var(--tc-stone-100);
    border: 1px solid var(--tc-sage-200);
    padding: var(--tc-space-6);
    border-radius: var(--tc-radius-lg);
    box-shadow: var(--tc-shadow-md);
    margin: var(--tc-space-10) auto;
    max-width: 700px;
    animation: tc-fadeIn var(--tc-transition-normal) forwards;
    opacity: 0;
}

/* ÉLÉMENT: tc-journal-access-box__icon */
.tc-journal-access-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--tc-sage-200), var(--tc-sage-300));
    border-radius: var(--tc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tc-shadow-sm);
}
.tc-journal-access-icon svg {
    width: 32px;
    height: 32px;
    color: var(--tc-stone-50);
}
.tc-journal-access-icon .material-symbols-outlined { /* Pour les icônes dans les access boxes */
    font-size: 32px;
    color: var(--tc-stone-50);
}

/* ÉLÉMENT: tc-journal-access-box__content */
.tc-journal-access-content h4 {
    font-family: var(--tc-font-sans);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--tc-stone-800);
    margin-top: 0;
    margin-bottom: var(--tc-space-3);
}
.tc-journal-access-content p {
    font-size: 0.95rem;
    color: var(--tc-stone-600);
    margin-bottom: var(--tc-space-4);
    line-height: 1.5;
}

/* ----------------------------------------------------------------
   BLOC: tc-atelier-grid (Grille des ateliers et dispositifs)
   ---------------------------------------------------------------- */
.tc-atelier-grid-container {
    margin-top: var(--tc-space-12);
    padding-top: var(--tc-space-6);
    border-top: 1px solid var(--tc-sage-100);
}
.tc-atelier-grid-container .tc-title-1 {
    margin-bottom: var(--tc-space-8);
}
.tc-atelier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--tc-space-8);
    margin-top: var(--tc-space-8);
}
/* MODIFICATEUR: tc-grid--dispositifs */
.tc-dispositifs-grid { /* Même grille mais pour les dispositifs */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--tc-space-8);
    margin-top: var(--tc-space-8);
}

/* ----------------------------------------------------------------
   BLOC: tc-atelier-card / tc-dispositif-card
   ---------------------------------------------------------------- */
.tc-atelier-card, .tc-dispositif-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--tc-radius-lg);
    border: 1px solid var(--tc-sage-200);
    box-shadow: var(--tc-shadow-sm);
    transition: all var(--tc-transition-normal);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}
.tc-atelier-card:hover, .tc-dispositif-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--tc-shadow-xl);
    border-color: var(--tc-sage-300);
    text-decoration: none;
}
/* ÉLÉMENT: tc-atelier-card__image */
.tc-atelier-card-image { /* Si des images de couverture sont utilisées */
    width: 100%;
    height: 180px;
    background-color: var(--tc-stone-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--tc-sage-200);
}
/* ÉLÉMENT: tc-atelier-card__img (image réelle) */
.tc-atelier-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tc-transition-normal);
}
.tc-atelier-card:hover .tc-atelier-card-img {
    transform: scale(1.05);
}
/* ÉLÉMENT: tc-atelier-card__placeholder-icon */
.tc-atelier-placeholder-icon { /* Icône de placeholder si pas d'image */
    font-size: 64px;
    color: var(--tc-sage-500);
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
/* ÉLÉMENT: tc-atelier-card__head */
.tc-atelier-card-head { /* Pour nom et ordre atelier */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--tc-space-4) var(--tc-space-5) var(--tc-space-2);
}
.tc-atelier-card-head h3 {
    font-family: var(--tc-font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tc-stone-800);
    margin: 0;
    line-height: 1.3;
}
/* ÉLÉMENT: tc-atelier-card__ordre */
.tc-atelier-ordre {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tc-sage-600);
    background-color: var(--tc-sage-100);
    padding: var(--tc-space-1) var(--tc-space-3);
    border-radius: var(--tc-radius-sm);
}
/* ÉLÉMENT: tc-atelier-card__desc */
.tc-atelier-card-desc {
    font-size: 0.95rem;
    color: var(--tc-stone-600);
    line-height: 1.5;
    padding: 0 var(--tc-space-5) var(--tc-space-4);
    flex-grow: 1; /* Permet à la description de prendre l'espace */
}
.tc-atelier-card .tc-btn { /* Bouton à l'intérieur de la carte */
    margin: 0 var(--tc-space-5) var(--tc-space-5);
    align-self: flex-start; /* Aligne le bouton à gauche */
}

/* ÉLÉMENT: tc-dispositif-card__title */
.tc-dispositif-title {
    padding: var(--tc-space-5);
    background-color: var(--tc-stone-100);
    border-bottom: 1px solid var(--tc-stone-200);
}
.tc-dispositif-title h3 {
    font-family: var(--tc-font-sans);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tc-stone-800);
    margin: 0;
}
/* ÉLÉMENT: tc-dispositif-card__desc */
.tc-dispositif-desc {
    font-size: 1rem;
    color: var(--tc-stone-600);
    line-height: 1.5;
    padding: var(--tc-space-5);
    flex-grow: 1;
}
.tc-dispositif-card .tc-btn {
    margin: 0 var(--tc-space-5) var(--tc-space-5);
    align-self: flex-start;
}

/* ----------------------------------------------------------------
   BLOC: tc-empty-state
   ---------------------------------------------------------------- */
.tc-empty-state {
    text-align: center;
    font-size: 1.15rem;
    color: var(--tc-stone-500);
    padding: var(--tc-space-10);
    background-color: var(--tc-stone-100);
    border-radius: var(--tc-radius-lg);
    border: 1px dashed var(--tc-sage-200);
    margin: var(--tc-space-8) auto;
    max-width: 600px;
}

/* ----------------------------------------------------------------
   BLOC: tc-dashboard
   ---------------------------------------------------------------- */
.tc-dashboard-welcome {
  background: linear-gradient(135deg, var(--tc-sage-100), var(--tc-sage-50));
  padding: var(--tc-space-8);
  border-radius: var(--tc-radius-lg);
  margin-bottom: var(--tc-space-12);
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
/* ÉLÉMENT: tc-dashboard__stats */
.tc-dashboard-stats {
    display: flex;
    justify-content: space-evenly;
    gap: var(--tc-space-4);
    margin-top: var(--tc-space-6);
    flex-wrap: wrap;
}
.tc-dashboard-stats div {
    font-size: 1.1rem;
    color: var(--tc-stone-700);
    background-color: white;
    padding: var(--tc-space-3) var(--tc-space-5);
    border-radius: var(--tc-radius-md);
    box-shadow: var(--tc-shadow-sm);
    border: 1px solid var(--tc-sage-100);
}
.tc-dashboard-stats strong {
    color: var(--tc-copper-500);
    font-size: 1.2em;
}
/* ÉLÉMENT: tc-dashboard__last-activity */
.tc-dashboard-last-activity {
    margin-top: var(--tc-space-6);
    font-size: 0.95rem;
    color: var(--tc-stone-600);
    font-style: italic;
}
/* ÉLÉMENT: tc-dashboard__progress-bar-wrapper */
.tc-dashboard-progress-bar-wrapper {
    background-color: var(--tc-stone-200);
    border-radius: var(--tc-radius-md);
    height: 12px;
    margin: var(--tc-space-6) auto var(--tc-space-3);
    overflow: hidden;
    max-width: 600px;
}
/* ÉLÉMENT: tc-dashboard__progress-bar */
.tc-dashboard-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--tc-sage-400), var(--tc-sage-600));
    border-radius: var(--tc-radius-md);
    width: 0%; /* Contrôlé par JS */
    transition: width 1s ease-out;
}
/* ÉLÉMENT: tc-dashboard__progress-text */
.tc-dashboard-progress-text {
    font-size: 0.9rem;
    color: var(--tc-stone-600);
    text-align: center;
}

/* ================================================================
   7. STYLES SPÉCIFIQUES AUX ATELIERS INDIVIDUELS
   ================================================================ */

/* ----------------------------------------------------------------
   BLOC: tedcraft-custom-page (Conteneur principal de l'atelier)
   ---------------------------------------------------------------- */
.tedcraft-custom-page {
    font-family: var(--tc-font-sans);
    color: var(--tc-stone-700);
    line-height: 1.6;
    padding: var(--tc-space-8);
    background-color: var(--tc-stone-50);
    border-radius: var(--tc-radius-lg);
    box-shadow: var(--tc-shadow-lg);
    margin: var(--tc-space-8) auto;
    max-width: 90vh;
    width: 100%
}

/* ÉLÉMENT: tc-atelier-title-main (Titre H1 de l'atelier) */
.tedcraft-custom-page .tc-atelier-title-main {
    font-family: var(--tc-font-sans);
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 600;
    color: var(--tc-stone-800);
    margin-bottom: var(--tc-space-4);
    line-height: 1.2;
    text-align: center;
}

/* ÉLÉMENT: tc-atelier-intro-text (Paragraphes de l'introduction) */
.tedcraft-custom-page .tc-atelier-intro-text {
    font-size: 1rem;
    text-align: justify;
    color: var(--tc-stone-600);
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
    margin-bottom: var(--tc-space-4);
}

/* ÉLÉMENT: tc-atelier-body-container (Conteneur principal du corps de l'atelier) */
.tedcraft-custom-page .tc-atelier-body-container {
    max-width: 850px; /* Adapte la largeur des étapes */
    margin: var(--tc-space-12) auto; /* Centre le corps de l'atelier */
    padding: 0; /* Pas de padding car le conteneur a déjà un padding */
}

/* ÉLÉMENT: tc-title-1 (Titres d'étape H2) */
.tedcraft-custom-page .tc-title-1 {
    font-family: var(--tc-font-sans);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 600;
    color: var(--tc-sage-700);
    margin-top: var(--tc-space-12);
    margin-bottom: var(--tc-space-6);
    padding-bottom: var(--tc-space-3);
    border-bottom: 1px solid var(--tc-sage-200);
    text-align: center; /* Centre les titres d'étape */
}

/* ÉLÉMENT: tc-body (Paragraphes de contenu) */
.tedcraft-custom-page .tc-body {
    font-size: 1rem;
    color: var(--tc-stone-700);
    margin-bottom: var(--tc-space-3);
    line-height: 1.6;
    text-align: justify;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
}

/* ----------------------------------------------------------------
   BLOC: tc-section-separator
   ---------------------------------------------------------------- */
.tedcraft-custom-page .tc-section-separator {
    position: relative;
    margin: var(--tc-space-12) auto;
    text-align: center;
    max-width: 800px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tedcraft-custom-page .tc-section-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--tc-sage-200) 20%,
        var(--tc-sage-300) 50%,
        var(--tc-sage-200) 80%,
        transparent 100%
    );
    opacity: 0;
    animation: tc-fadeIn 0.8s ease-out 0.3s both;
}
.tedcraft-custom-page .tc-section-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, var(--tc-sage-500), var(--tc-sage-600));
    border-radius: 50%;
    border: 3px solid var(--tc-stone-50);
    box-shadow: 0 0 0 1px var(--tc-sage-200), 0 2px 8px rgba(var(--tc-sage-500-rgb), 0.25);
    opacity: 0;
    animation: tc-fadeIn 0.8s ease-out 0.5s both, tc-pulse 3s ease-in-out 1s infinite;
    z-index: 10;
}

/* ----------------------------------------------------------------
   BLOC: tc-examples-container
   ---------------------------------------------------------------- */
.tedcraft-custom-page .tc-examples-container {
    background-color: var(--tc-stone-100);
    border: 1px solid var(--tc-stone-200);
    border-radius: var(--tc-radius-md);
    padding: var(--tc-space-6);
    margin: var(--tc-space-8) auto;
    max-width: 750px;
    box-shadow: var(--tc-shadow-sm);
}
/* ÉLÉMENT: tc-examples-container__list */
.tedcraft-custom-page .tc-list-examples {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tedcraft-custom-page .tc-list-examples li {
    position: relative;
    padding-left: var(--tc-space-8);
    margin-bottom: var(--tc-space-3);
    font-size: 1rem;
    color: var(--tc-stone-700);
    line-height: 1.5;
}
.tedcraft-custom-page .tc-list-examples li::before {
    content: '💡';
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    position: absolute;
    left: 0;
    top: 0.1em;
    color: var(--tc-copper-500);
    font-size: 1.2em;
    line-height: 1;
}

/* ----------------------------------------------------------------
   BLOC: tc-etape-notes
   ---------------------------------------------------------------- */
.tedcraft-custom-page .tc-etape-notes {
    background-color: var(--tc-sage-50);
    border-left: 4px solid var(--tc-sage-300);
    padding: var(--tc-space-4) var(--tc-space-6);
    margin: var(--tc-space-8) auto;
    border-radius: var(--tc-radius-md);
    box-shadow: var(--tc-shadow-sm);
    font-size: 0.95rem;
    color: var(--tc-stone-600);
    font-style: normal;
    max-width: 750px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: var(--tc-space-3);
}
.tedcraft-custom-page .tc-etape-notes::before {
    content: '📌';
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    font-size: 1.2em;
    color: var(--tc-sage-500);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   BLOC: tc-highlight-action (Texte mis en valeur)
   ---------------------------------------------------------------- */
.tedcraft-custom-page .tc-highlight-action {
    display: block;
    font-family: var(--tc-font-sans);
    font-size: 1.3em;
    font-weight: 700;
    color: var(--tc-copper-500);
    margin-top: var(--tc-space-4);
    padding: var(--tc-space-3);
    background-color: var(--tc-stone-100);
    border-radius: var(--tc-radius-md);
    border: 1px solid var(--tc-copper-500);
    text-align: center;
    animation: tc-fadeIn 0.8s ease-out forwards;
    box-shadow: var(--tc-shadow-sm);
}

/* ----------------------------------------------------------------
   BLOC: tc-questions-block (Conteneur de questions)
   ---------------------------------------------------------------- */
.tedcraft-custom-page .tc-questions-block {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tc-space-6);
    align-items: flex-start; /* Aligne les cartes en haut */
    margin-top: var(--tc-space-8);
}

/* ÉLÉMENT: tc-questions-block__pair-container */
.tedcraft-custom-page .tc-question-pair-container {
    display: flex; /* Utilisé `flex` au lieu de `grid` pour une meilleure flexibilité sur les points de rupture */
    flex-wrap: wrap;
    gap: var(--tc-space-6);
    width: 100%;
    margin-bottom: var(--tc-space-8);
}
.tedcraft-custom-page .tc-question-pair-container .tc-question-card:first-child { /* Boîte de la note */
    flex-basis: calc(20% - var(--tc-space-3)); /* Environ 1/5 - la moitié du gap */
    max-width: calc(20% - var(--tc-space-3));
    min-width: 100px; /* Largeur minimale pour les notes */
}
.tedcraft-custom-page .tc-question-pair-container .tc-question-card:last-child { /* Boîte de la justification */
    flex-basis: calc(80% - var(--tc-space-3)); /* Environ 4/5 - la moitié du gap */
    max-width: calc(80% - var(--tc-space-3));
    min-width: 250px; /* Largeur minimale pour le texte */
}
/* S'assurer que les cartes qui ne sont PAS dans des paires prennent toute la largeur */
.tedcraft-custom-page .tc-questions-block > .tc-card:not(.tc-question-pair-container *) {
    width: 100%;
    max-width: none;
    flex-basis: auto;
}

/* ÉLÉMENT: tc-question-card (Styles spécifiques aux cartes de questions) */
.tedcraft-custom-page .tc-question-card {
    flex-grow: 1; /* Permet aux cartes de grandir */
    flex-shrink: 0; /* Empêche les cartes de rétrécir trop */
    margin-bottom: 0; /* Annule la marge inférieure du .tc-card si elle est déjà dans un gap */
}

/* ÉLÉMENT: tc-question-card__header */
.tedcraft-custom-page .tc-question-header {
    margin-bottom: var(--tc-space-4);
}
/* ÉLÉMENT: tc-question-card__label */
.tedcraft-custom-page .tc-question-label {
    font-family: var(--tc-font-sans);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--tc-stone-800);
    display: block;
    margin-bottom: var(--tc-space-2);
    line-height: 1.4;
}
/* ÉLÉMENT: tc-question-card__description */
.tedcraft-custom-page .tc-question-description {
    font-size: 0.9rem;
    color: var(--tc-stone-600);
    font-style: italic;
    margin-top: var(--tc-space-1);
    margin-bottom: var(--tc-space-4);
}

/* ----------------------------------------------------------------
   BLOC: tc-axe (Modules spécifiques Radar)
   ---------------------------------------------------------------- */

/* ÉLÉMENT: tc-axe__table */
.tedcraft-custom-page .tc-axe-table {
    width: 100%;
    border-collapse: separate; /* Pour les border-radius sur les cellules */
    border-spacing: 0;
    margin: var(--tc-space-10) auto; /* Centré */
    font-size: 0.95rem;
    box-shadow: var(--tc-shadow-sm);
    border-radius: var(--tc-radius-md);
    overflow: hidden; /* Pour que les border-radius s'appliquent */
    display: table; /* Force le comportement de table */
    max-width: 800px; /* Limite la largeur de la table */
}
.tedcraft-custom-page .tc-axe-table th,
.tedcraft-custom-page .tc-axe-table td {
    padding: var(--tc-space-4) var(--tc-space-5);
    text-align: left;
    border-bottom: 1px solid var(--tc-sage-100);
}
.tedcraft-custom-page .tc-axe-table th {
    background-color: var(--tc-sage-100);
    color: var(--tc-stone-700);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}
.tedcraft-custom-page .tc-axe-table tbody tr:nth-child(even) {
    background-color: var(--tc-stone-50);
}
.tedcraft-custom-page .tc-axe-table tbody tr:hover {
    background-color: var(--tc-sage-50);
}
.tedcraft-custom-page .tc-axe-table td {
    color: var(--tc-stone-600);
}
.tedcraft-custom-page .tc-axe-table td strong {
    color: var(--tc-stone-800);
}
/* ÉLÉMENT: tc-axe__list-mobile (Sera affiché via JS pour mobile) */
.tedcraft-custom-page .tc-axe-list-mobile {
    display: none;
    flex-direction: column;
    gap: var(--tc-space-6);
    margin-top: var(--tc-space-8);
}
/* ÉLÉMENT: tc-axe__card */
.tedcraft-custom-page .tc-axe-card {
    background-color: var(--tc-stone-50);
    border: 1px solid var(--tc-sage-200);
    padding: var(--tc-space-5);
    border-radius: var(--tc-radius-md);
    box-shadow: var(--tc-shadow-sm);
}
.tedcraft-custom-page .tc-axe-card h4 {
    font-family: var(--tc-font-sans);
    font-size: 1.1em;
    font-weight: 600;
    color: var(--tc-stone-800);
    margin-bottom: var(--tc-space-3);
}
/* ÉLÉMENT: tc-axe__card-section */
.tedcraft-custom-page .tc-axe-card-section {
    margin-bottom: var(--tc-space-2);
}
.tedcraft-custom-page .tc-axe-card-section h5 {
    font-size: 0.85em;
    color: var(--tc-stone-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--tc-space-1);
}
.tedcraft-custom-page .tc-axe-card-section p {
    font-size: 0.95em;
    color: var(--tc-stone-700);
    line-height: 1.4;
}

/* ----------------------------------------------------------------
   BLOC: tc-chart (Graphique Radar)
   ---------------------------------------------------------------- */
/* ÉLÉMENT: tc-chart__container */
.tedcraft-custom-page .tc-chart-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 400px;
    margin: var(--tc-space-10) auto;
}

/* ----------------------------------------------------------------
   BLOC: tc-cercle (Modules spécifiques Cercle)
   ---------------------------------------------------------------- */
.tedcraft-custom-page .tc-cercle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tc-space-8);
    margin: var(--tc-space-10) auto;
    padding: var(--tc-space-6);
    border: 1px dashed var(--tc-sage-200);
    border-radius: var(--tc-radius-md);
    background-color: var(--tc-stone-50);
    max-width: 600px;
}
/* ÉLÉMENT: tc-cercle__viz-container */
.tedcraft-custom-page .tc-cercle-viz-container {
    position: relative;
    width: 350px; /* Taille du conteneur visuel */
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ÉLÉMENT: tc-cercle__graphic */
.tedcraft-custom-page .tc-cercle-graphic {
    position: absolute;
    width: 300px; /* Taille du cercle intérieur */
    height: 300px;
    background-color: rgba(var(--tc-sage-500-rgb), 0.15);
    border: 2px solid var(--tc-sage-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--tc-stone-700);
    text-align: center;
    box-shadow: var(--tc-shadow-sm);
    z-index: 1;
    font-size: 1.2em;
    line-height: 1.4;
    padding: var(--tc-space-4);
}
/* ÉLÉMENT: tc-cercle__center-text (ID spécifique) */
.tedcraft-custom-page #cercle-center-text {
    display: block;
}
/* ÉLÉMENT: tc-cercle__outside-list-container */
.tedcraft-custom-page .tc-cercle-outside-list-container {
    text-align: center;
    width: 100%;
    margin-top: var(--tc-space-6);
}
/* ÉLÉMENT: tc-cercle__outside-title */
.tedcraft-custom-page .tc-cercle-outside-title {
    font-size: 1.15rem;
    color: var(--tc-stone-800);
    margin-bottom: var(--tc-space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tc-space-2);
}
.tedcraft-custom-page .tc-cercle-outside-title .material-symbols-outlined {
    font-size: 1.2em;
    vertical-align: middle;
    color: var(--tc-red-500) !important;
}
/* ÉLÉMENT: tc-cercle__inputs-container */
.tedcraft-custom-page .tc-cercle-inputs-container {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-6);
    width: 100%;
    max-width: 450px;
    margin: var(--tc-space-8) auto;
}
/* ÉLÉMENT: tc-cercle__input-group */
.tedcraft-custom-page .tc-cercle-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-3);
}
/* ÉLÉMENT: tc-cercle__label */
.tedcraft-custom-page .tc-cercle-label {
    font-weight: 600;
    color: var(--tc-stone-700);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--tc-space-2);
}
.tedcraft-custom-page .tc-cercle-label .material-symbols-outlined {
    font-size: 1.1em;
    vertical-align: middle;
    color: var(--tc-sage-600)! important;
}
/* ÉLÉMENT: tc-input-addon */
.tedcraft-custom-page .tc-input-addon {
    display: flex;
    gap: var(--tc-space-3);
}
.tedcraft-custom-page .tc-input-addon .tc-input-field {
    flex: 1;
}
/* ÉLÉMENT: tc-cercle__interactive-list */
.tedcraft-custom-page .tc-interactive-list { /* Listes interactives (inside/outside du cercle) */
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: var(--tc-space-4);
}
/* ÉLÉMENT: tc-dynamic-list-item (utilisé aussi par trace une ligne) */
.tedcraft-custom-page .tc-interactive-list .tc-dynamic-list-item {
    /* Styles communs aux items du cercle (ex: fond blanc, bordure) */
    background-color: white;
    border: 1px solid var(--tc-sage-100);
    padding: var(--tc-space-2) var(--tc-space-3);
    margin-bottom: var(--tc-space-2);
    border-radius: var(--tc-radius-sm);
    font-size: 0.95rem;
    color: var(--tc-stone-700);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* MODIFICATEUR: tc-cercle__dynamic-list-item--outside (id spécifique) */
.tedcraft-custom-page #cercle-outside-visual.tc-interactive-list .tc-dynamic-list-item,
.tedcraft-custom-page #cercle-outside-visual .tc-dynamic-list-item {
    background-color: rgba(var(--tc-red-500-rgb), 0.05) !important;
    border-color: rgba(var(--tc-red-500-rgb), 0.2) !important;
}
/* MODIFICATEUR: tc-cercle__dynamic-list-item--inside (id spécifique) */
.tedcraft-custom-page #cercle-inside-visual.tc-interactive-list .tc-dynamic-list-item,
.tedcraft-custom-page #cercle-inside-visual .tc-dynamic-list-item {
    background-color: rgba(var(--tc-sage-500-rgb), 0.05) !important; /* Fond vert très léger */
    border-color: rgba(var(--tc-sage-500-rgb), 0.2) !important; /* Bordure légèrement verte */
}

/* ----------------------------------------------------------------
   BLOC: tc-navigation-links (Navigation bas de page)
   ---------------------------------------------------------------- */
.tedcraft-custom-page .tc-navigation-links-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: var(--tc-space-12);
      padding-top: var(--tc-space-6);
      border-top: 1px solid var(--tc-sage-200);
    position: relative;
}
/* ÉLÉMENT: tc-navigation-links__button */
.tedcraft-custom-page .tc-navigation-button {
    text-align: center;
    display: flex; /* <--- AJOUT IMPORTANT : Pour que justify-content et align-items fonctionnent à l'intérieur */
    align-items: center;
    padding: var(--tc-space-4) var(--tc-space-6);
    border-radius: var(--tc-radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--tc-transition-normal);
}
.tedcraft-custom-page .tc-navigation-button .material-symbols-outlined {
    font-size: 1.2em;
    color: inherit;
}
/* MODIFICATEUR: tc-navigation-links__button--prev */
.tedcraft-custom-page .tc-navigation-button.tc-navigation-prev {
  justify-content: flex-start;
  background: var(--tc-sage-100);
  color: var(--tc-stone-700);
  border: 1px solid var(--tc-sage-200);
}
.tedcraft-custom-page .tc-navigation-prev .material-symbols-outlined {
    margin-right: var(--tc-space-2);
    order: -1;
}
.tedcraft-custom-page .tc-navigation-prev:hover {
  background: var(--tc-sage-200);
  transform: translateX(-2px);
  color: var(--tc-stone-800);
}
/* MODIFICATEUR: tc-navigation-links__button--next */
.tedcraft-custom-page .tc-navigation-button.tc-navigation-next {
    justify-content: flex-end;
    background: linear-gradient(135deg, var(--tc-sage-500), var(--tc-sage-600));
    color: white;
}
.tedcraft-custom-page .tc-navigation-next .material-symbols-outlined {
    margin-left: var(--tc-space-2);
    order: 1;
}
.tedcraft-custom-page .tc-navigation-next:hover {
  background: linear-gradient(135deg, var(--tc-sage-600), var(--tc-sage-700));
  transform: translateX(2px);
  color: white;
}


/* ================================================================
   8. STYLES SPÉCIFIQUES POUR LES LISTES DYNAMIQUES (TRACE UNE LIGNE)
   ================================================================ */

/* ----------------------------------------------------------------
   BLOC: tc-separation-main-container (Conteneur principal de toute la section "Trace une ligne")
   ---------------------------------------------------------------- */
.tedcraft-custom-page .tc-separation-main-container {
    position: relative;
    margin: var(--tc-space-10) auto;
    max-width: 900px;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ÉLÉMENT: tc-separation-main-container__lists-flex-container (Conteneur Flex pour les deux blocs de liste seulement) */
.tedcraft-custom-page .tc-lists-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: var(--tc-space-6);
    position: relative;
    z-index: 1;
}

/* ÉLÉMENT: tc-separation-main-container__dynamic-list-container (Styles pour chaque bloc de liste) */
.tedcraft-custom-page .tc-dynamic-list-container {
    flex-basis: 48%;
    flex-shrink: 0;
    background-color: var(--tc-stone-50);
    border: 1px solid var(--tc-sage-200);
    border-radius: var(--tc-radius-md);
    padding: var(--tc-space-6);
    box-shadow: var(--tc-shadow-sm);
    display: flex;
    flex-direction: column;
}

/* ÉLÉMENT: tc-separation-main-container__line-visual (La ligne visuelle elle-même) */
.tedcraft-custom-page .tc-separation-line-visual {
    width: 3px; /* Largeur de la ligne */
    background: linear-gradient(
        to bottom,
        var(--tc-sage-300),
        var(--tc-copper-500),
        var(--tc-sage-300)
    );
    height: 100%;
    border-radius: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* CENTRAGE PARFAIT sur l'axe X */
    transform: translateX(-50%); /* Ajustement pour un centrage parfait */
    z-index: 2; /* AU-DESSUS des listes */
}

/* ÉLÉMENT: tc-separation-main-container__line-markers-container (Conteneur des marqueurs) */
.tedcraft-custom-page .tc-line-markers-container {
    position: absolute; /* Reste absolu par rapport à .tc-separation-main-container */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none; /* Permet de cliquer à travers pour atteindre les listes */
    z-index: 3; /* AU-DESSUS de la ligne et des listes */
}

/* ÉLÉMENT: tc-separation-main-container__line-marker (Style de chaque marqueur individuel) */
.tedcraft-custom-page .tc-line-marker {
    position: absolute; /* Reste absolu, le 'top' est défini par JavaScript */
    display: flex;
    align-items: center;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    transform: translateY(-50%); /* Centre le marqueur verticalement sur son point 'top' */
    pointer-events: auto; /* Rend le marqueur cliquable/interagissable */
    font-size: 0.9em;
    font-weight: 500;
    color: var(--tc-stone-700);
    opacity: 0; /* Commence caché */
    animation: tc-fadeIn 0.5s ease-out forwards; /* Animation d'apparition */
}

/* ÉLÉMENT: tc-separation-main-container__marker-text (Style du texte à l'intérieur du marqueur) */
.tedcraft-custom-page .tc-marker-text {
    background: white;
    padding: var(--tc-space-1) var(--tc-space-2);
    border-radius: var(--tc-radius-sm);
    box-shadow: var(--tc-shadow-sm);
    border: 1px solid var(--tc-sage-200);
}

/* MODIFICATEUR: tc-line-marker--left (Styles spécifiques pour le marqueur de GAUCHE) */
.tedcraft-custom-page .tc-marker-left {
    /* Positionne le bord droit du texte du marqueur à gauche du centre de la ligne, avec un espace */
    right: calc(50% + var(--tc-space-3) + 1px); /* 50% = centre de la ligne, +espace, +moitié de la largeur de la ligne */
}
.tedcraft-custom-page .tc-marker-left .tc-marker-text {
    border-right: none; /* Pas de bordure sur le côté de la ligne */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.tedcraft-custom-page .tc-marker-left::after {
    content: '';
    position: absolute;
    right: -21.5px; /* Décalage pour centrer le point de 15px sur la ligne de 3px */
    width: 15px; /* Taille du point */
    height: 15px; /* Taille du point */
    background-color: var(--tc-copper-500); /* Couleur du point pour la liste "laisser partir" */
    border-radius: 50%;
    border: 2px solid white; /* Petite bordure blanche autour du point */
    box-shadow: 0 0 0 1px var(--tc-sage-300); /* Ombre légère */
    top: 50%; /* Centre verticalement le point */
    transform: translateY(-50%); /* Ajustement pour un centrage parfait */
}

/* MODIFICATEUR: tc-line-marker--right (Styles spécifiques pour le marqueur de DROITE) */
.tedcraft-custom-page .tc-marker-right {
    /* Positionne le bord gauche du texte du marqueur à droite du centre de la ligne, avec un espace */
    left: calc(50% + var(--tc-space-3) + 1.5px);
}
.tedcraft-custom-page .tc-marker-right .tc-marker-text {
    border-left: none; /* Pas de bordure sur le côté de la ligne */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.tedcraft-custom-page .tc-marker-right::after {
    content: '';
    position: absolute;
    left: -20.5px;
    width: 15px;
    height: 15px;
    background-color: var(--tc-sage-500); /* Couleur du point pour la liste "actions concrètes" */
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--tc-sage-300);
    top: 50%;
    transform: translateY(-50%);
}

/* ÉLÉMENT: tc-dynamic-list__title */
.tedcraft-custom-page .tc-dynamic-list-title {
    font-family: var(--tc-font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tc-stone-800);
    margin-top: 0;
    margin-bottom: var(--tc-space-4);
}

/* ÉLÉMENT: tc-dynamic-list */
.tedcraft-custom-page .tc-dynamic-list {
    list-style: none;
    padding: 0;
    margin-bottom: var(--tc-space-4);
    min-height: 50px; /* Hauteur minimale pour que la liste soit visible */
}

/* ÉLÉMENT: tc-dynamic-list__item */
.tedcraft-custom-page .tc-dynamic-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border: 1px solid var(--tc-sage-100);
    padding: var(--tc-space-2) var(--tc-space-3);
    margin-bottom: var(--tc-space-2);
    border-radius: var(--tc-radius-sm);
    font-size: 0.95rem;
    color: var(--tc-stone-700);
    animation: tc-slideInLeft 0.3s ease-out;
}

.tedcraft-custom-page .tc-dynamic-list-item:hover {
  background-color: var(--tc-sage-50);
  border-color: var(--tc-sage-200);
}

.tedcraft-custom-page .tc-dynamic-list-item span {
  flex: 1;
}

/* ÉLÉMENT: tc-dynamic-list__remove-btn */
.tedcraft-custom-page .tc-remove-item-btn {
    background: none;
    border: none;
    color: var(--tc-stone-500);
    font-size: 1.2em; /* Taille de l'icône de la croix */
    cursor: pointer;
    padding: 0 var(--tc-space-1);
    transition: color var(--tc-transition-fast);
}
.tedcraft-custom-page .tc-remove-item-btn:hover {
    color: var(--tc-red-500);
}
.tedcraft-custom-page .tc-remove-item-btn .material-symbols-outlined {
    font-size: 1.1em;
    color: inherit;
}


/* ================================================================
   9. STYLES SPÉCIFIQUES POUR LES SECTIONS SUMMARY
   ================================================================ */

/* ----------------------------------------------------------------
   BLOC: tc-summary-section (Section summary principale)
   ---------------------------------------------------------------- */
.tc-summary-section {
    margin: var(--tc-space-10) auto;
    max-width: 750px;
}

/* ÉLÉMENT: tc-summary-section__display-box (Boîte d'affichage du résumé) */
.tc-summary-display-box {
    background: linear-gradient(135deg, rgba(var(--tc-sage-500-rgb), 0.05), rgba(var(--tc-sage-500-rgb), 0.1));
    border: 2px solid var(--tc-sage-400);
    border-radius: var(--tc-radius-lg);
    padding: var(--tc-space-8);
    margin: var(--tc-space-8) auto;
    box-shadow: var(--tc-shadow-md);
}

/* ÉLÉMENT: tc-summary-section__fields-container (Conteneur des champs de résumé) */
.tc-summary-fields-container {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-6);
}

/* ÉLÉMENT: tc-summary-section__item-card (Carte individuelle pour chaque champ) */
.tc-summary-item-card {
    background: white;
    border: 1px solid var(--tc-sage-200);
    border-radius: var(--tc-radius-md);
    padding: var(--tc-space-5);
    box-shadow: var(--tc-shadow-sm);
    transition: all var(--tc-transition-fast);
}
.tc-summary-item-card:hover {
    box-shadow: var(--tc-shadow-md);
    transform: translateY(-2px);
}

/* ÉLÉMENT: tc-summary-section__label (Label du champ) */
.tc-summary-label {
    font-family: var(--tc-font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--tc-stone-700);
    margin: 0 0 var(--tc-space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

/* ÉLÉMENT: tc-summary-section__value-display (Affichage de la valeur) */
.tc-summary-value-display {
    font-family: var(--tc-font-sans);
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--tc-stone-800);
    min-height: 2em;
    display: flex;
    align-items: center;
}

/* MODIFICATEUR: tc-summary-section__value-display--highlight-action */
.tc-summary-value-display .tc-highlight-action {
    background: linear-gradient(135deg, rgba(var(--tc-copper-500-rgb), 0.1), rgba(var(--tc-copper-500-rgb), 0.05));
    color: var(--tc-copper-500);
    padding: var(--tc-space-2) var(--tc-space-4);
    border-radius: var(--tc-radius-md);
    border: 1px solid rgba(var(--tc-copper-500-rgb), 0.2);
    font-weight: 600;
    box-shadow: var(--tc-shadow-sm);
    margin-left: auto;
    margin-right: auto;
}

/* MODIFICATEUR: tc-summary-section__value-display--empty-state */
.tc-summary-value-display:has([data-field-key]) {
    position: relative;
}
.tc-summary-value-display span[data-field-key]:empty::after,
.tc-summary-value-display span[data-field-key]:contains("_________")::after {
    content: "À compléter dans les étapes précédentes";
    color: var(--tc-stone-500);
    font-style: italic;
    font-size: 0.9rem;
    background: var(--tc-stone-100);
    padding: var(--tc-space-2) var(--tc-space-3);
    border-radius: var(--tc-radius-sm);
    border: 1px dashed var(--tc-stone-300);
}


/* ================================================================
   10. NOUVELLES AMÉLIORATIONS UX (Issues de la section 'runner.js' et non-dupliquées)
   ================================================================ */

/* ----------------------------------------------------------------
   BLOC: tc-loading-overlay
   ---------------------------------------------------------------- */
.tc-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--tc-stone-50-rgb), 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: inherit;
}
/* ÉLÉMENT: tc-loading-overlay__content */
.tc-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tc-space-4);
}
/* ÉLÉMENT: tc-loading-overlay__text */
.tc-loading-text {
    font-size: 0.9rem;
    color: var(--tc-stone-600);
    font-weight: 500;
}

/* ----------------------------------------------------------------
   BLOC: tc-field (États de validation des champs)
   ---------------------------------------------------------------- */
/* MODIFICATEUR: tc-field--valid */
.tc-field-valid {
    border-color: var(--tc-sage-500) !important;
    box-shadow: 0 0 0 3px rgba(var(--tc-sage-500-rgb), 0.1) !important;
}
/* MODIFICATEUR: tc-field--warning */
.tc-field-warning {
    border-color: var(--tc-copper-500) !important;
    box-shadow: 0 0 0 3px rgba(192, 133, 82, 0.1) !important;
}
/* MODIFICATEUR: tc-field--error */
.tc-field-error {
    border-color: var(--tc-red-500) !important;
    box-shadow: 0 0 0 3px rgba(var(--tc-red-500-rgb), 0.1) !important;
}

/* ----------------------------------------------------------------
   BLOC: tc-field-feedback (Messages de feedback)
   ---------------------------------------------------------------- */
.tc-field-feedback {
    margin-top: var(--tc-space-2);
    padding: var(--tc-space-2) var(--tc-space-3);
    border-radius: var(--tc-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--tc-transition-fast);
    display: flex;
    align-items: center;
    gap: var(--tc-space-2);
}
/* MODIFICATEUR: tc-field-feedback--show */
.tc-field-feedback.show {
    opacity: 1;
    transform: translateY(0);
}
/* MODIFICATEUR: tc-field-feedback--success */
.tc-feedback-success {
    background-color: rgba(var(--tc-sage-500-rgb), 0.1);
    color: var(--tc-sage-700);
    border: 1px solid rgba(var(--tc-sage-500-rgb), 0.2);
}
.tc-feedback-success::before {
    content: '✓';
    font-weight: bold;
    color: var(--tc-sage-600);
}
/* MODIFICATEUR: tc-field-feedback--warning */
.tc-feedback-warning {
    background-color: rgba(192, 133, 82, 0.1);
    color: var(--tc-copper-500);
    border: 1px solid rgba(192, 133, 82, 0.2);
}
.tc-feedback-warning::before {
    content: '⚠';
    color: var(--tc-copper-500);
}
/* MODIFICATEUR: tc-field-feedback--error */
.tc-feedback-error {
    background-color: rgba(var(--tc-red-500-rgb), 0.1);
    color: var(--tc-red-600);
    border: 1px solid rgba(var(--tc-red-500-rgb), 0.2);
}
.tc-feedback-error::before {
    content: '✕';
    font-weight: bold;
    color: var(--tc-red-500);
}

/* ----------------------------------------------------------------
   BLOC: tc-error-message
   ---------------------------------------------------------------- */
.tc-error-message {
    text-align: center;
    padding: var(--tc-space-8);
    background-color: rgba(var(--tc-red-500-rgb), 0.05);
    border: 1px solid rgba(var(--tc-red-500-rgb), 0.2);
    border-radius: var(--tc-radius-md);
    color: var(--tc-stone-700);
}
.tc-error-message p {
    margin-bottom: var(--tc-space-4);
    color: var(--tc-red-600);
    font-weight: 500;
}

/* ----------------------------------------------------------------
   BLOC: tc-button-add (Boutons spécifiques)
   ---------------------------------------------------------------- */
.tedcraft-custom-page .tc-button-add {
  background: var(--tc-sage-200);
  padding: var(--tc-space-3) var(--tc-space-4);
  margin-top: var(--tc-space-2);
}
.tedcraft-custom-page .tc-button-add:hover {
  background: var(--tc-stone-200);
  transform: translateY(-1px);
}


/* ================================================================
   11. RESPONSIVE DESIGN GÉNÉRAL
   ================================================================ */

/* TABLETTE - 768px et moins */
@media (max-width: 768px) {
    .tc-container {
        padding: var(--tc-space-6);
    }
    .tedcraft-custom-page { /* Styles du conteneur principal de l'atelier */
        padding: var(--tc-space-6);
        margin: var(--tc-space-6) auto;
        max-width: 900px; /* Ajuste la largeur max */
    }

    /* Navigation principale */
    .tc-nav-tabs {
        flex-direction: column;
        align-items: center;
        gap: var(--tc-space-3);
    }
    .tc-nav-tab {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    /* Section Hero / Présentation */
    .tc-symptoms-grid {
        grid-template-columns: 1fr;
        gap: var(--tc-space-4);
    }
    .tc-symptom-card { text-align: center; }
    .tc-symptom-header { flex-direction: column; gap: var(--tc-space-3); text-align: center; align-items: center; }
    .tc-reality-check { flex-direction: column; align-items: center; gap: var(--tc-space-4); }
    .tc-reality-item { width: 100%; max-width: 280px; justify-content: center; }
    .tc-reality-item p { white-space: normal; text-align: center; }
    .tc-question-bubble { padding: var(--tc-space-4) var(--tc-space-6); text-align: center; }
    .tc-hero-quote-main, .tc-solution-header { padding: var(--tc-space-4); }

    /* Philosophy cards */
    .tc-solution-philosophy { grid-template-columns: 1fr; gap: var(--tc-space-4); }
    .tc-philosophy-card { text-align: center; }
    .tc-philosophy-header { flex-direction: column; gap: var(--tc-space-3); text-align: center; align-items: center; }

    /* Process flow */
    .tc-process-flow-spectacular {
        grid-template-columns: 1fr;
        gap: var(--tc-space-6);
    }
    .tc-process-card { text-align: center; max-width: 100%; }
    .tc-process-header-spectacular { flex-direction: column; gap: var(--tc-space-4); text-align: center; align-items: center; }
    .tc-process-icon-spectacular { align-self: center; }
    .tc-blocage-item, .tc-solution-item { flex-direction: column; gap: var(--tc-space-3); text-align: center; align-items: center; }
    .tc-transformation-bridge { order: 2; margin: var(--tc-space-6) auto; } /* Ordre pour s'afficher entre les cartes sur mobile */
    .tc-energy-flow { /* Ligne d'énergie entre les cartes */
        top: -30px; bottom: -30px; left: 50%; right: auto;
        width: 2px; height: 60px; /* Devient vertical et plus court */
        background: linear-gradient(180deg, transparent 0%, var(--tc-copper-500) 25%, var(--tc-copper-500) 75%, transparent 100%);
        transform: translateX(-50%);
    }

    /* Benefits */
    .tc-benefits-grid { grid-template-columns: 1fr; gap: var(--tc-space-4); }
    .tc-benefit-item { flex-direction: column; text-align: center; }
    .tc-benefit-icon { align-self: center; }

    /* Entry paths */
    .tc-entry-content { grid-template-columns: 1fr; gap: var(--tc-space-6); text-align: center; }
    .tc-entry-separator { order: 2; flex-direction: row; width: 100%; margin: var(--tc-space-4) 0; }
    .tc-separator-line { width: 100px; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--tc-sage-300) 20%, var(--tc-sage-400) 50%, var(--tc-sage-300) 80%, transparent 100%); }
    .tc-entry-option.primary { order: 1; }
    .tc-entry-option.secondary { order: 3; }

    /* Grilles de contenu (Ateliers, Dispositifs) */
    .tc-content-grid { grid-template-columns: 1fr; gap: var(--tc-space-6); }

    /* Dashboard */
    .tc-dashboard-welcome { padding: var(--tc-space-6); }
    .tc-dashboard-stats { flex-direction: column; } /* Stats empilées */
    .tc-dashboard-stats div { width: 100%; }

    /* Page Journal d'Atelier (Host) */
    .tc-journal-access-box { flex-direction: column; text-align: center; }
    .tc-journal-access-icon { margin-bottom: var(--tc-space-4); }
    .tc-atelier-grid { grid-template-columns: 1fr; }
    .tc-atelier-card-image { height: 150px; }

    /* Styles spécifiques aux ateliers individuels (dans .tedcraft-custom-page) */
    .tedcraft-custom-page .tc-atelier-title-main { font-size: clamp(1.8rem, 5vw, 2.8rem); }
    .tedcraft-custom-page .tc-atelier-intro-text { font-size: 1.05rem; }
    .tedcraft-custom-page .tc-title-1 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
    .tedcraft-custom-page .tc-body { text-align: left; } /* Justification retirée pour mobile */

    /* Questions */
    .tedcraft-custom-page .tc-questions-block { flex-direction: column; gap: var(--tc-space-6); }
    .tedcraft-custom-page .tc-card.tc-question-card { width: 100%; max-width: none; flex-basis: auto; margin-bottom: var(--tc-space-6); }
    .tedcraft-custom-page .tc-question-pair-container { flex-direction: column; }
    .tedcraft-custom-page .tc-question-pair-container .tc-question-card:nth-child(odd),
    .tedcraft-custom-page .tc-question-pair-container .tc-question-card:nth-child(even) { flex-basis: auto; max-width: none; width: 100%; }

    /* Radar Mobile adjustments */
    .tedcraft-custom-page .tc-axe-table { display: none; } /* Cache la table sur mobile */
    .tedcraft-custom-page .tc-axe-list-mobile { display: flex; } /* Affiche la liste mobile */

    /* Cercle Mobile adjustments */
    .tedcraft-custom-page .tc-cercle-graphic { width: 200px; height: 200px; font-size: 1em; }
    .tedcraft-custom-page .tc-cercle-viz-container { width: 300px; height: 300px; } /* Ajuste la taille du conteneur visuel */
    .tedcraft-custom-page .tc-cercle-inputs-container { max-width: 100%; }

    /* Dynamic Lists (Trace une Ligne) - Mobile Adjustments */
    .tedcraft-custom-page .tc-separation-main-container {
        flex-direction: column; /* Empile tous les éléments (listes, ligne, marqueurs) */
        align-items: center; /* Centre les éléments dans la colonne */
        min-height: 400px;
        padding: 0; /* Annule le padding horizontal du desktop */
    }
    .tedcraft-custom-page .tc-lists-flex-container {
        flex-direction: column;
        justify-content: center;
        align-items: center; /* Empile les listes l'une sous l'autre */
        width: 100%;
        max-width: 350px; /* Limite la largeur max pour la lisibilité */
        gap: var(--tc-space-6);
        order: 1; /* Les listes avant la ligne */
    }
    .tedcraft-custom-page .tc-dynamic-list-container {
        width: 100%;
        flex-basis: auto;
    }
    .tedcraft-custom-page .tc-separation-line-visual {
        height: 3px; /* La ligne devient horizontale */
        width: 80%; /* Prend 80% de la largeur du conteneur principal */
        min-height: auto;
        background: linear-gradient(
            to right,
            var(--tc-sage-300),
            var(--tc-copper-500),
            var(--tc-sage-300)
        );
        position: relative; /* Positionnement relatif pour s'insérer dans le flux normal de la colonne */
        left: auto; transform: none; top: auto; bottom: auto; /* Annule les positions absolues */
        order: 2; /* Place la ligne entre les listes et les marqueurs */
        margin: var(--tc-space-6) 0; /* Ajoute une marge verticale */
    }
    .tedcraft-custom-page .tc-line-markers-container {
        position: relative; /* Le conteneur des marqueurs devient relatif pour s'insérer dans le flux vertical */
        left: auto; right: auto; top: auto; bottom: auto; /* Annule les positions absolues */
        order: 3; /* Placé après la ligne */
        display: flex; /* Utilise flexbox pour distribuer les marqueurs horizontalement */
        align-items: flex-start; /* Aligne les marqueurs en haut de leur ligne si le texte est multi-ligne */
        justify-content: center; /* Centre les marqueurs s'il n'y en a pas assez pour remplir l'espace */
        flex-wrap: wrap; /* Permet aux marqueurs de passer à la ligne si l'espace est insuffisant */
        gap: var(--tc-space-4);
        padding: var(--tc-space-4) 0;
        width: 100%;
    }
    .tedcraft-custom-page .tc-line-marker {
        position: relative;
        top: auto !important;
        left: -70px !important; right: auto !important; transform: none; /* Annule les transformations */
        flex-direction: column;
        justify-content: center; align-items: center;
        margin: 0; padding-top: var(--tc-space-4); padding-bottom: var(--tc-space-2);
        max-width: 45%;
    }
    .tedcraft-custom-page .tc-marker-left::after, .tedcraft-custom-page .tc-marker-right::after {
        top: -40px; left: 50%; transform: translateX(-50%) translateY(-50%); right: auto; /* Point au-dessus du marqueur */
        width: 12px; height: 12px;
    }

    /* Toast mobile */
    .tc-toast {
        right: var(--tc-space-4);
        left: var(--tc-space-4);
        width: auto;
        max-width: none;
        top: var(--tc-space-4);
        text-align: center;
    }

   
    /* Contact mobile */
    .tedcraft-custom-page .tc-contact-box {
        flex-direction: column;
    }

 /* Navigation mobile */
    .tedcraft-custom-page .tc-navigation-links-wrapper {
        flex-direction: column;
        gap: var(--tc-space-4);
   
    }
    .tedcraft-custom-page .tc-navigation-button {
        width: 100%;
        max-width: 200px;
        justify-content: center;
    }

}

/* MOBILE - 480px et moins */
@media (max-width: 480px) {
    .tc-container { padding: var(--tc-space-4); }
    .tedcraft-custom-page { padding: var(--tc-space-4); }

    .tedcraft-custom-page .tc-atelier-title-main { font-size: clamp(1.6rem, 6vw, 2.4rem); }
    .tedcraft-custom-page .tc-atelier-intro-text { font-size: 1rem; }
    .tedcraft-custom-page .tc-title-1 { font-size: clamp(1.2rem, 4.5vw, 1.8rem); }

    .tc-download-box, .tc-card { padding: var(--tc-space-4); }
    .tc-toast { font-size: 0.95rem; padding: var(--tc-space-3); }

    /* Process flow mobile très petit */
    .tc-process-flow-spectacular { grid-template-columns: 1fr; gap: var(--tc-space-4); }
    .tc-process-card { padding: var(--tc-space-4); }
    .tc-process-icon-spectacular { width: 64px; height: 64px; }
    .tc-icon-orbit { width: 48px; height: 48px; }
    .tc-icon-orbit .material-symbols-outlined { font-size: 24px; }
    .tc-magic-wand { width: 48px; height: 48px; }
    .tc-magic-wand .material-symbols-outlined { font-size: 24px; }
    .tc-process-title-spectacular h4 { font-size: 1.125rem; }
    .tc-subtitle-accent { font-size: 0.875rem; }
    .tc-transformation-text { font-size: 0.75rem; letter-spacing: 1px; }

    /* Moins de particules sur mobile très petit */
    .tc-icon-particles .tc-particle:nth-child(n+3) { display: none; }
    .tc-magic-sparkles .tc-sparkle:nth-child(n+4) { display: none; }
    .tc-process-background-pattern { opacity: 0.01; }

    /* Journal Access Box mobile très petit */
    .tc-journal-access-box { padding: var(--tc-space-4); }
    .tc-introduction-section .tc-title-1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
    .tc-introduction-section .tc-body-lg { font-size: 1rem; }
}

/* MOBILE PAYSAGE - Spécifique pour les écrans larges et courts */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
    .tc-process-flow-spectacular { grid-template-columns: 1fr auto 1fr; gap: var(--tc-space-4); }
    .tc-transformation-bridge { order: initial; margin: 0; }
    .tc-energy-flow { /* Ligne d'énergie redevient horizontale */
        top: 50%; bottom: auto; left: -30px; right: -30px;
        width: 60px; height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--tc-copper-500) 25%, var(--tc-copper-500) 75%, transparent 100%);
        transform: translateY(-50%);
    }
}

/* ACCESSIBILITÉ */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { /* Cible tous les éléments */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; /* Défilement instantané */
  }
}

/* GPU ACCELERATION POUR PERFORMANCES MOBILES */
@media (max-width: 768px) {
  .tc-magic-wand,
  .tc-icon-orbit,
  .tc-energy-flow {
    will-change: transform;
    backface-visibility: hidden;
  }
  .tc-process-background-pattern { animation-duration: 40s; }
  .tc-process-card { contain: layout style paint; }
}