/* ============================================================================
   EFASTWORK TRAINING — Design system partagé (refonte UI/UX 2026)
   ----------------------------------------------------------------------------
   Identité reprise du site principal EFASTWORK :
   - Bleu marine structure   : #0f4c81
   - Vert accent / progression: #1a8a5a
   - Dégradé signature       : linear-gradient(135deg, #0f4c81, #1a8a5a)
   - Typographie             : Poppins (titres) / Inter (corps)
   Toutes les classes sont préfixées `training-` et ne visent que
   l'espace /training (portée : body.training-app). Aucune dépendance ajoutée.
   ============================================================================ */

/* 1. Design tokens --------------------------------------------------------- */

body.training-app {
    /* Couleurs de marque */
    --t-navy: #0f4c81;
    --t-navy-strong: #0c3f6b;
    --t-navy-deep: #093253;
    --t-navy-soft: #eaf2f9;
    --t-navy-softer: #f4f8fc;
    --t-green: #1a8a5a;
    --t-green-strong: #15734c;
    --t-green-soft: #e8f5ee;
    --t-grad: linear-gradient(135deg, #0f4c81 0%, #1a8a5a 100%);

    /* Neutres */
    --t-ink: #182b45;
    --t-muted: #5c6b80;
    --t-border: #dfe7f0;
    --t-border-soft: #ecf1f7;
    --t-bg: #f4f7fa;
    --t-surface: #ffffff;

    /* États */
    --t-warn: #96601a;
    --t-warn-soft: #fdf3e3;
    --t-danger: #b3261e;
    --t-danger-soft: #fdeceb;
    --t-info: #0f5f8a;
    --t-info-soft: #e9f4fa;
    --t-success-soft: #e8f5ee;

    /* Typographie */
    --t-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --t-font-heading: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Géométrie */
    --t-radius-s: 10px;
    --t-radius: 14px;
    --t-radius-l: 18px;
    --t-pill: 999px;

    /* Ombres */
    --t-shadow: 0 1px 2px rgba(15, 76, 129, .06), 0 10px 30px -12px rgba(15, 76, 129, .14);
    --t-shadow-hover: 0 2px 4px rgba(15, 76, 129, .08), 0 18px 40px -14px rgba(15, 76, 129, .22);

    /* Divers */
    --t-transition: 180ms cubic-bezier(.4, 0, .2, 1);
    --t-focus-ring: 0 0 0 3px rgba(15, 76, 129, .28);

    font-family: var(--t-font-body);
    color: var(--t-ink);
    background: var(--t-bg);
    -webkit-font-smoothing: antialiased;
}

body.training-app h1,
body.training-app h2,
body.training-app h3,
body.training-app h4,
body.training-app h5,
body.training-app h6,
body.training-app .training-h {
    font-family: var(--t-font-heading);
    font-weight: 600;
    color: var(--t-navy-deep);
    letter-spacing: -.01em;
}

/* Liens « nus » uniquement : garantit que les composants stylés (boutons,
   cartes, navigation) conservent leurs propres couleurs sans être écrasés. */
body.training-app a:not([class]) { color: var(--t-navy); }
body.training-app a:not([class]):hover { color: var(--t-navy-strong); }

body.training-app :focus-visible {
    outline: none;
    box-shadow: var(--t-focus-ring);
    border-radius: 6px;
}

/* 2. Structure globale ------------------------------------------------------ */

.training-shell {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

.training-layout {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    padding-block: 1.75rem 3rem;
}

.training-main {
    flex: 1 1 auto;
    min-width: 0; /* évite les débordements avec des tableaux longs */
}

/* 3. Navbar ------------------------------------------------------------------ */

.training-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--t-border-soft);
}

.training-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    flex-wrap: wrap;
    padding-block: .65rem;
}

.training-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
}

.training-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--t-grad);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 14px -6px rgba(15, 76, 129, .5);
    flex: none;
}

.training-brand-text {
    font-family: var(--t-font-heading);
    font-weight: 700;
    font-size: 1.06rem;
    color: var(--t-navy-deep);
    line-height: 1.15;
}

.training-brand-text small {
    display: block;
    font-family: var(--t-font-body);
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-muted);
}

.training-navbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.training-navbar-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-radius: var(--t-pill);
    font-weight: 500;
    font-size: .92rem;
    color: var(--t-navy-strong);
    text-decoration: none;
    transition: background var(--t-transition), color var(--t-transition);
}

.training-navbar-link:hover {
    background: var(--t-navy-soft);
    color: var(--t-navy-deep);
}

.training-navbar-link.is-active { background: var(--t-navy-soft); color: var(--t-navy-deep); font-weight: 600; }

.training-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .8rem .38rem .42rem;
    border-radius: var(--t-pill);
    background: var(--t-navy-softer);
    border: 1px solid var(--t-border-soft);
    font-size: .88rem;
    color: var(--t-ink);
}

.training-user-chip .training-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--t-grad);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    flex: none;
}

.training-user-chip .training-user-guard {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-green-strong);
    background: var(--t-green-soft);
    border-radius: var(--t-pill);
    padding: .14rem .5rem;
}

/* 4. Sidebar ------------------------------------------------------------------ */

.training-sidebar {
    width: 248px;
    flex: 0 0 248px;
    position: sticky;
    top: 84px;
    background: var(--t-surface);
    border: 1px solid var(--t-border-soft);
    border-radius: var(--t-radius-l);
    box-shadow: var(--t-shadow);
    padding: 1.1rem .9rem;
}

.training-sidebar-heading {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t-muted);
    padding: .25rem .75rem .6rem;
}

.training-sidenav { display: flex; flex-direction: column; gap: .25rem; }

.training-sidenav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .62rem .8rem;
    border-radius: var(--t-radius-s);
    color: var(--t-ink);
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: background var(--t-transition), color var(--t-transition);
}

.training-sidenav-link i {
    width: 1.25rem;
    text-align: center;
    font-size: .95rem;
    color: var(--t-muted);
    transition: color var(--t-transition);
}

.training-sidenav-link:hover {
    background: var(--t-navy-softer);
    color: var(--t-navy-deep);
}

.training-sidenav-link:hover i { color: var(--t-navy); }

.training-sidenav-link.is-active {
    background: var(--t-navy-soft);
    color: var(--t-navy-deep);
    font-weight: 600;
}

.training-sidenav-link.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: var(--t-green);
}

.training-sidenav-link.is-active i { color: var(--t-navy); }

/* 5. Boutons ------------------------------------------------------------------- */

.training-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .64rem 1.25rem;
    border-radius: var(--t-radius-s);
    border: 1px solid transparent;
    font-family: var(--t-font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-transition), border-color var(--t-transition),
                color var(--t-transition), box-shadow var(--t-transition), transform var(--t-transition);
}

.training-btn:active { transform: translateY(1px); }
.training-btn[disabled], .training-btn.disabled { opacity: .55; cursor: not-allowed; transform: none; }

.training-btn-primary {
    background: var(--t-navy);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(15, 76, 129, .55);
}
.training-btn-primary:hover:not([disabled]) {
    background: var(--t-navy-strong);
    color: #fff;
    box-shadow: 0 10px 22px -8px rgba(15, 76, 129, .6);
}

.training-btn-success {
    background: var(--t-green);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(26, 138, 90, .55);
}
.training-btn-success:hover:not([disabled]) { background: var(--t-green-strong); color: #fff; }

.training-btn-outline {
    background: var(--t-surface);
    border-color: var(--t-navy);
    color: var(--t-navy);
}
.training-btn-outline:hover:not([disabled]) {
    background: var(--t-navy-soft);
    color: var(--t-navy-deep);
}

.training-btn-ghost {
    background: transparent;
    color: var(--t-muted);
}
.training-btn-ghost:hover:not([disabled]) { background: var(--t-navy-softer); color: var(--t-navy); }

.training-btn-lg { padding: .8rem 1.6rem; font-size: 1.02rem; border-radius: var(--t-radius); }
.training-btn-sm { padding: .42rem .9rem; font-size: .85rem; }
.training-btn-block { width: 100%; }

/* 6. Cartes --------------------------------------------------------------------- */

.training-card {
    background: var(--t-surface);
    border: 1px solid var(--t-border-soft);
    border-radius: var(--t-radius-l);
    box-shadow: var(--t-shadow);
    transition: box-shadow var(--t-transition), transform var(--t-transition), border-color var(--t-transition);
}

.training-card-body { padding: 1.4rem 1.5rem; }
.training-card-body-sm { padding: 1rem 1.1rem; }

.training-card-header {
    padding: .95rem 1.5rem;
    border-bottom: 1px solid var(--t-border-soft);
    font-weight: 600;
    color: var(--t-navy-deep);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.training-card-quiet { box-shadow: none; }

a.training-card-link { text-decoration: none; display: block; height: 100%; }

.training-card-hover:hover {
    box-shadow: var(--t-shadow-hover);
    transform: translateY(-3px);
    border-color: var(--t-border);
}

.training-card-topband {
    height: 4px;
    border-radius: var(--t-radius-l) var(--t-radius-l) 0 0;
    background: var(--t-grad);
    opacity: .85;
}

/* 7. Badges ------------------------------------------------------------------------ */

.training-badge {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .26rem .7rem;
    border-radius: var(--t-pill);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.35;
    white-space: nowrap;
}

.training-badge-available { background: var(--t-green-soft); color: var(--t-green-strong); }
.training-badge-early     { background: var(--t-warn-soft); color: var(--t-warn); }
.training-badge-soon      { background: #eef1f5; color: #51617a; }
.training-badge-success   { background: var(--t-green-soft); color: var(--t-green-strong); }
.training-badge-danger    { background: var(--t-danger-soft); color: var(--t-danger); }
.training-badge-warn      { background: var(--t-warn-soft); color: var(--t-warn); }
.training-badge-info      { background: var(--t-info-soft); color: var(--t-info); }
.training-badge-neutral   { background: #eef1f5; color: #51617a; }
.training-badge-outline   { background: var(--t-surface); border: 1px solid var(--t-border); color: var(--t-muted); }

.training-meta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--t-muted);
}

/* 8. Alertes / messages flash --------------------------------------------------------- */

.training-alert {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1rem 1.2rem;
    border-radius: var(--t-radius);
    border: 1px solid transparent;
    font-size: .93rem;
    line-height: 1.55;
}

.training-alert i { margin-top: .18rem; font-size: 1.05rem; }

.training-alert-success { background: var(--t-success-soft); border-color: #cdeedd; color: #14532d; }
.training-alert-success i { color: var(--t-green-strong); }

.training-alert-info { background: var(--t-info-soft); border-color: #cfe6f2; color: #0c4a68; }
.training-alert-info i { color: var(--t-info); }

.training-alert-warning { background: var(--t-warn-soft); border-color: #f3e3c0; color: #7a4b10; }
.training-alert-warning i { color: var(--t-warn); }

.training-alert-danger { background: var(--t-danger-soft); border-color: #f5d4d1; color: #8c1d17; }
.training-alert-danger i { color: var(--t-danger); }

.training-alert .btn-close { margin-left: auto; flex: none; }

/* 9. Fil d'Ariane / en-têtes de page --------------------------------------------------- */

.training-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .55rem;
    font-size: .85rem;
    color: var(--t-muted);
    margin-bottom: .4rem;
}

.training-breadcrumb a { color: var(--t-muted); text-decoration: none; }
.training-breadcrumb a:hover { color: var(--t-navy); text-decoration: underline; }
.training-breadcrumb .training-breadcrumb-sep { color: #b7c3d2; font-size: .7rem; }
.training-breadcrumb .training-breadcrumb-current { color: var(--t-ink); font-weight: 600; }

.training-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.training-page-head h1,
.training-page-head h2 {
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
    margin: 0;
}

.training-page-head .training-page-sub {
    margin: .45rem 0 0;
    color: var(--t-muted);
    max-width: 62ch;
    line-height: 1.55;
    font-size: .97rem;
}

.training-page-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.training-section-title {
    font-size: 1.12rem;
    margin: 2.2rem 0 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.training-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--t-border-soft);
}

/* 10. Hero (accueil public) -------------------------------------------------------------- */

.training-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--t-radius-l);
    background:
        radial-gradient(1100px 420px at 85% -60%, rgba(26, 138, 90, .16), transparent 60%),
            radial-gradient(900px 380px at -10% 30%, rgba(15, 76, 129, .18), transparent 55%),
                linear-gradient(160deg, #f7fafd 0%, #eef4fa 100%);
    border: 1px solid var(--t-border-soft);
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.4rem, 4vw, 3.25rem);
    box-shadow: var(--t-shadow);
}

.training-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem .9rem;
    border-radius: var(--t-pill);
    background: #fff;
    border: 1px solid var(--t-border);
    color: var(--t-navy-strong);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

.training-hero-eyebrow i { color: var(--t-green); }

.training-hero h1 {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 .8rem;
    max-width: 24ch;
}

.training-hero p.training-hero-sub {
    color: var(--t-muted);
    font-size: clamp(.98rem, 1.4vw, 1.1rem);
    line-height: 1.6;
    max-width: 58ch;
    margin: 0 0 1.6rem;
}

.training-hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; }

/* 11. Parcours en étapes (accueil) ----------------------------------------------------------- */

.training-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.training-step {
    background: var(--t-surface);
    border: 1px solid var(--t-border-soft);
    border-radius: var(--t-radius);
    padding: 1.15rem 1.2rem;
    box-shadow: var(--t-shadow);
}

.training-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--t-navy-soft);
    color: var(--t-navy);
    font-family: var(--t-font-heading);
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .7rem;
}

.training-step h3 { font-size: .98rem; margin: 0 0 .35rem; }
.training-step p { margin: 0; color: var(--t-muted); font-size: .86rem; line-height: 1.5; }

/* 12. Cartes catalogue / compétences / exercices ------------------------------------------------ */

.training-exam-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.training-exam-card .training-exam-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.training-exam-card h3 { font-size: 1.08rem; margin: 0; }

.training-exam-card .training-exam-desc {
    color: var(--t-muted);
    font-size: .88rem;
    line-height: 1.55;
    flex: 1 1 auto;
    margin-bottom: .9rem;
}

.training-exam-card .training-exam-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1rem;
}

.training-exam-card .training-exam-hint {
    font-size: .8rem;
    color: var(--t-muted);
    border-left: 3px solid var(--t-border);
    padding-left: .7rem;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.training-exercise-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.training-exercise-card h3 { font-size: 1rem; margin: 0; }

.training-exercise-card .training-exercise-desc {
    color: var(--t-muted);
    font-size: .87rem;
    line-height: 1.55;
    flex: 1 1 auto;
    margin: .55rem 0 .9rem;
}

.training-exercise-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    font-size: .82rem;
    color: var(--t-muted);
    margin-bottom: 1rem;
}

.training-exercise-meta span { display: inline-flex; align-items: center; gap: .38rem; }
.training-exercise-meta i { color: var(--t-navy); font-size: .85rem; }

/* 13. Statistiques / KPI --------------------------------------------------------------------------- */

.training-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.training-stat {
    background: var(--t-surface);
    border: 1px solid var(--t-border-soft);
    border-radius: var(--t-radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--t-shadow);
}

.training-stat-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-muted);
    margin-bottom: .5rem;
}

.training-stat-label i { color: var(--t-green); font-size: .85rem; }
.training-stat-value { font-family: var(--t-font-heading); font-weight: 700; font-size: 1.5rem; color: var(--t-navy-deep); line-height: 1.2; }
.training-stat-value small { font-size: .8rem; font-weight: 500; color: var(--t-muted); }
.training-stat-hint { font-size: .82rem; color: var(--t-muted); margin: .3rem 0 0; line-height: 1.45; }

/* 14. Barres de progression -------------------------------------------------------------------------- */

.training-progressbar {
    height: 9px;
    border-radius: var(--t-pill);
    background: var(--t-navy-softer);
    border: 1px solid var(--t-border-soft);
    overflow: hidden;
}

.training-progressbar > span {
    display: block;
    height: 100%;
    border-radius: var(--t-pill);
    background: var(--t-grad);
    transition: width 400ms ease;
}

.training-progressbar-plain > span { background: var(--t-navy); }

.training-readiness {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.training-readiness .training-progressbar { flex: 1; min-width: 130px; }

/* 15. Questions / QCM --------------------------------------------------------------------------------- */

.training-question-dots {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.25rem;
}

.training-question-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .4rem;
    border-radius: 50%;
    border: 1px solid var(--t-border);
    background: var(--t-surface);
    color: var(--t-muted);
    font-size: .82rem;
    font-weight: 600;
}

.training-question-dot.is-answered { background: var(--t-green-soft); border-color: #bfe3d1; color: var(--t-green-strong); }
.training-question-dot.is-current { background: var(--t-navy); border-color: var(--t-navy); color: #fff; box-shadow: 0 6px 14px -6px rgba(15, 76, 129, .6); }

.training-question-text {
    font-size: 1.06rem;
    line-height: 1.65;
    font-weight: 500;
    color: var(--t-ink);
    margin-bottom: 1.4rem;
}

.training-option {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .95rem 1.1rem;
    border: 1.5px solid var(--t-border);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    cursor: pointer;
    transition: border-color var(--t-transition), background var(--t-transition), box-shadow var(--t-transition);
    margin-bottom: .7rem;
}

.training-option:hover { border-color: var(--t-navy); background: var(--t-navy-softer); }

.training-option input[type="radio"] {
    margin-top: .22rem;
    width: 1.12rem;
    height: 1.12rem;
    accent-color: var(--t-navy);
    flex: none;
    cursor: pointer;
}

.training-option.is-selected {
    border-color: var(--t-navy);
    background: var(--t-navy-soft);
    box-shadow: 0 0 0 3px rgba(15, 76, 129, .12);
}

.training-option .training-option-label {
    font-size: .98rem;
    line-height: 1.55;
    cursor: pointer;
    min-height: 1.4rem; /* cible tactile confortable */
}

/* Correction */

.training-correct-option {
    border-color: #bfe3d1;
    background: var(--t-green-soft);
}

.training-wrong-option {
    border-color: #f0c8c5;
    background: var(--t-danger-soft);
}

.training-correction-item + .training-correction-item { margin-top: .9rem; }

.training-result-score {
    font-family: var(--t-font-heading);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    line-height: 1;
    background: var(--t-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--t-navy);
    display: inline-block;
}

/* 16. Tableaux ------------------------------------------------------------------------------------------- */

.training-tablewrap {
    background: var(--t-surface);
    border: 1px solid var(--t-border-soft);
    border-radius: var(--t-radius-l);
    box-shadow: var(--t-shadow);
    overflow-x: auto;
}

.training-tablewrap .table { margin: 0; }
body.training-app .training-tablewrap .table thead th {
    background: var(--t-navy-softer);
    color: var(--t-navy-deep);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--t-border-soft);
    padding: .8rem 1.1rem;
    white-space: normal;
}

body.training-app .training-tablewrap .table tbody td {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--t-border-soft);
    font-size: .92rem;
    vertical-align: middle;
    color: var(--t-ink);
}

body.training-app .training-tablewrap .table tbody tr:last-child td { border-bottom: 0; }
body.training-app .training-tablewrap .table tbody tr:hover td { background: var(--t-navy-softer); }

/* 17. Formulaires ------------------------------------------------------------------------------------------ */

body.training-app .training-form .form-label,
body.training-app form .form-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--t-ink);
    margin-bottom: .4rem;
}

body.training-app .form-control,
body.training-app .form-select {
    border: 1.5px solid var(--t-border);
    border-radius: var(--t-radius-s);
    padding: .62rem .85rem;
    font-size: .95rem;
    color: var(--t-ink);
    background-color: var(--t-surface);
    transition: border-color var(--t-transition), box-shadow var(--t-transition);
}

body.training-app .form-control:focus,
body.training-app .form-select:focus {
    border-color: var(--t-navy);
    box-shadow: 0 0 0 3px rgba(15, 76, 129, .14);
}

body.training-app textarea.form-control { line-height: 1.6; }

.training-form-hint { font-size: .8rem; color: var(--t-muted); margin-top: .35rem; }
.training-form-error { font-size: .82rem; color: var(--t-danger); margin-top: .35rem; font-weight: 500; }

/* Fiches définition (dl) */

.training-dl {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: .8rem 1.5rem;
    margin: 0;
    align-items: baseline;
}

.training-dl dt {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t-muted);
}

.training-dl dd { margin: 0; font-size: .97rem; color: var(--t-ink); }

/* 18. États vides ---------------------------------------------------------------------------------------------- */

.training-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .55rem;
    padding: 2.6rem 1.5rem;
    border: 1.5px dashed var(--t-border);
    border-radius: var(--t-radius-l);
    background: var(--t-navy-softer);
    color: var(--t-muted);
}

.training-empty i {
    font-size: 1.8rem;
    color: var(--t-navy);
    opacity: .55;
}

.training-empty .training-empty-title {
    font-family: var(--t-font-heading);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--t-ink);
}

.training-empty p { margin: 0; font-size: .9rem; max-width: 46ch; line-height: 1.55; }

/* 19. Choix d'identité ------------------------------------------------------------------------------------------ */

.training-identity-choice {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.05rem 1.15rem;
    border: 1.5px solid var(--t-border);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    cursor: pointer;
    transition: border-color var(--t-transition), background var(--t-transition), box-shadow var(--t-transition);
    margin-bottom: .8rem;
}

.training-identity-choice:hover { border-color: var(--t-navy); background: var(--t-navy-softer); }
.training-identity-choice.is-selected { border-color: var(--t-navy); background: var(--t-navy-soft); box-shadow: 0 0 0 3px rgba(15, 76, 129, .12); }
.training-identity-choice input[type="radio"] { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--t-navy); flex: none; }

/* 20. Grille tarifaire ---------------------------------------------------------------------------------------------- */

.training-plan-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.training-plan-price {
    font-family: var(--t-font-heading);
    font-weight: 700;
    font-size: 2.1rem;
    color: var(--t-navy-deep);
    line-height: 1.05;
    display: flex;
    align-items: baseline;
    gap: .45rem;
    flex-wrap: wrap;
}

.training-plan-price small { font-size: .95rem; font-weight: 500; color: var(--t-muted); }

.training-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    flex: 1 1 auto;
}

.training-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .42rem 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--t-ink);
}

.training-plan-features i { color: var(--t-green); margin-top: .2rem; }

/* 21. Footer ---------------------------------------------------------------------------------------------------------- */

.training-footer {
    border-top: 1px solid var(--t-border-soft);
    background: var(--t-surface);
    padding-block: 1.4rem 1.6rem;
    margin-top: auto;
}

.training-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .7rem 1.5rem;
    font-size: .85rem;
    color: var(--t-muted);
}

.training-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--t-font-heading);
    font-weight: 600;
    color: var(--t-navy-deep);
}

.training-footer-brand .training-brand-mark { width: 26px; height: 26px; font-size: .75rem; border-radius: 8px; }

.training-footer-link {
    color: var(--t-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.training-footer-link:hover { color: var(--t-navy); }

/* 22. Utilitaires -------------------------------------------------------------------------------------------------------- */

.training-text-muted { color: var(--t-muted) !important; }
.training-text-navy { color: var(--t-navy) !important; }
.training-text-green { color: var(--t-green-strong) !important; }
.training-text-center { text-align: center; }
.training-mt-1 { margin-top: .5rem; } .training-mt-2 { margin-top: 1rem; } .training-mt-3 { margin-top: 1.75rem; }
.training-mb-1 { margin-bottom: .5rem; } .training-mb-2 { margin-bottom: 1rem; } .training-mb-3 { margin-bottom: 1.75rem; }
.training-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

body.training-app { display: flex; flex-direction: column; min-height: 100vh; }
body.training-app > .training-page { flex: 1 0 auto; }

/* 23. Responsive ------------------------------------------------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .training-layout { flex-direction: column; gap: 1.25rem; padding-block: 1.25rem 2.5rem; }

    /* En colonne, `align-items: flex-start` dimensionne la largeur au contenu :
       un tableau large ferait déborder toute la page au lieu de défiler dans son cadre. */
    .training-main { width: 100%; max-width: 100%; }

    .training-sidebar {
        position: static;
        width: 100%;
        flex: none;
        padding: .6rem;
        border-radius: var(--t-radius);
    }

    .training-sidebar-heading { display: none; }

    .training-sidenav {
        flex-direction: row;
        overflow-x: auto;
        gap: .35rem;
        padding-bottom: .15rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .training-sidenav-link { white-space: nowrap; padding: .5rem .85rem; }
    .training-sidenav-link.is-active::before { display: none; }

    .training-stats { grid-template-columns: 1fr; }
    .training-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .training-steps { grid-template-columns: 1fr; }

    .training-navbar-inner { padding-block: .55rem; }
    .training-brand-text small { display: none; }

    .training-card-body { padding: 1.15rem 1.1rem; }

    .training-hero-actions .training-btn { width: 100%; }

    .training-page-head { flex-direction: column; align-items: flex-start; }
    .training-page-actions { width: 100%; }
    .training-page-actions .training-btn { flex: 1 1 auto; }

    .training-actions { flex-direction: column; align-items: stretch; }
    .training-actions .training-btn { width: 100%; }

    .training-dl { grid-template-columns: 1fr; gap: .15rem .5rem; }
    .training-dl dt { margin-bottom: 0; }
    .training-dl dd { margin-bottom: .7rem; }

    /* Tableaux : défilement horizontal maîtrisé plutôt que débordement */
    .training-tablewrap { overflow-x: auto; }
    body.training-app .training-tablewrap .table { min-width: 560px; }

    body.training-app .training-tablewrap .table thead th,
    body.training-app .training-tablewrap .table tbody td { padding: .7rem .8rem; }
}

/* 24. Accessibilité : mouvement réduit --------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body.training-app *,
    body.training-app *::before,
    body.training-app *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}