/* ============================================================
   remind-r.eu -- Espace Formateur -- Layout & composants
   Mobile-first. Ombres portees, JAMAIS de bordures de couleur.
   Depend de : variables.css, reset.css, components.css, dark-mode.css.
   ============================================================ */

.tr-shell { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }

/* ---------------- Top app bar ---------------- */
.tr-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.tr-brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
/* Co-branding topbar : le lockup gere ses propres tailles de SVG. On NE force PAS
   svg{width/height} (sinon la marque idewe -- viewBox 62x120 -- serait ecrasee). */
.tr-brand-cobrand .cobrand { gap: 0.5rem; }
.tr-brand .wm { font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; color: var(--text-primary); letter-spacing: -0.02em; }
.tr-brand .wm .accent { color: var(--amber-400); }
.tr-space-tag {
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--navy-600); background: var(--navy-50); padding: 0.15rem 0.5rem; border-radius: var(--radius-full);
}

.tr-topnav { display: none; margin-left: 1rem; gap: 0.25rem; }
.tr-topnav a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.8rem; border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: 0.875rem; font-weight: 500;
  text-decoration: none; transition: background var(--transition-normal), color var(--transition-normal);
}
.tr-topnav a svg { width: 17px; height: 17px; }
.tr-topnav a:hover { background: var(--n50); color: var(--text-primary); }
.tr-topnav a.active { background: var(--navy-50); color: var(--navy-600); }

.tr-top-actions { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.tr-iconbtn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--text-secondary);
  border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal);
}
.tr-iconbtn:hover { background: var(--n50); color: var(--text-primary); }
.tr-iconbtn svg { width: 19px; height: 19px; }

.tr-lang { display: inline-flex; gap: 0.15rem; }
.tr-lang a {
  padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
  font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary);
  text-decoration: none; transition: all var(--transition-normal);
}
.tr-lang a.active { background: var(--navy-500); color: #fff; }

.tr-avatar {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8125rem;
  background: var(--navy-500); box-shadow: var(--shadow-sm); border: none; cursor: pointer;
}
.tr-menu { position: relative; }
.tr-menu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 0.5rem; z-index: var(--z-dropdown); display: none;
}
.tr-menu-pop.open { display: block; }
.tr-menu-pop .who { padding: 0.5rem 0.65rem 0.65rem; }
.tr-menu-pop .who strong { display: block; font-size: 0.875rem; color: var(--text-primary); }
.tr-menu-pop .who span { font-size: 0.75rem; color: var(--text-tertiary); }
.tr-menu-pop hr { border: none; height: 1px; background: var(--border); margin: 0.35rem 0; }
.tr-menu-pop a {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-size: 0.875rem;
}
.tr-menu-pop a svg { width: 16px; height: 16px; }
.tr-menu-pop a:hover { background: var(--n50); color: var(--text-primary); }
.tr-menu-pop a.danger:hover { background: var(--danger-light); color: var(--danger-dark); }

/* ---------------- Main ---------------- */
.tr-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 1.25rem 1rem 6rem; }
@media (min-width: 768px) { .tr-main { padding: 1.75rem 1.5rem 2.5rem; } }

.tr-page-head { margin-bottom: 1.25rem; }
.tr-page-head h1 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.tr-page-head p { color: var(--text-secondary); font-size: 0.9375rem; margin-top: 0.2rem; }
.tr-back { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--navy-400); font-size: 0.8125rem; font-weight: 600; text-decoration: none; margin-bottom: 0.75rem; }
.tr-back svg { width: 15px; height: 15px; }

/* ---------------- Toasts ---------------- */
.tr-toasts { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.tr-toast { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); font-size: 0.875rem; }
.tr-toast .ti svg { width: 18px; height: 18px; }
.tr-toast .tt { flex: 1; color: var(--text-primary); }
.tr-toast.ok .ti { color: var(--success); }
.tr-toast.bad .ti { color: var(--danger); }
.tr-toast.warn .ti { color: var(--warning); }
.tr-toast.info .ti { color: var(--info); }
.tr-toast-close { border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; padding: 0.2rem; }
.tr-toast-close svg { width: 16px; height: 16px; }

/* ---------------- Hero (prochaine session) ---------------- */
.tr-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl); padding: 1.5rem; color: #fff; margin-bottom: 1.5rem;
  background: radial-gradient(130% 130% at 0% 0%, var(--navy-500) 0%, var(--navy-700) 60%, var(--navy-800) 100%);
  box-shadow: var(--shadow-lg);
}
.tr-hero::after { content: ''; position: absolute; width: 320px; height: 320px; right: -120px; bottom: -140px; border-radius: var(--radius-full); background: radial-gradient(circle, rgba(245,166,35,0.22) 0%, rgba(245,166,35,0) 70%); }
.tr-hero .eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber-300); font-weight: 600; }
.tr-hero h2 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; margin: 0.35rem 0 0.65rem; position: relative; z-index: 1; }
.tr-hero .meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; color: rgba(255,255,255,0.88); position: relative; z-index: 1; }
.tr-hero .meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tr-hero .meta svg { width: 15px; height: 15px; color: var(--amber-300); }
.tr-hero .hero-actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; position: relative; z-index: 1; }

/* ---------------- KPI ---------------- */
.tr-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .tr-kpis { grid-template-columns: repeat(4, 1fr); } }
.tr-kpi { background: var(--surface); border-radius: var(--radius-lg); padding: 0.7rem 0.9rem; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 0.75rem; }
.tr-kpi .ic { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; }
.tr-kpi .ic svg { width: 20px; height: 20px; }
.tr-kpi .ic.navy { background: rgba(30,58,110,0.08); color: var(--navy-500); }
.tr-kpi .ic.amber { background: rgba(245,166,35,0.12); color: var(--amber-500); }
.tr-kpi .ic.success { background: rgba(16,185,129,0.10); color: var(--success); }
.tr-kpi .v { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1; }
.tr-kpi .l { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.15rem; }

/* ---------------- Section head ---------------- */
.tr-section-head { display: flex; align-items: center; justify-content: space-between; margin: 1.5rem 0 0.85rem; }
.tr-section-head h2 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.tr-section-head a { font-size: 0.8125rem; font-weight: 600; color: var(--navy-400); text-decoration: none; }

/* ---------------- Session list ---------------- */
.tr-list { display: flex; flex-direction: column; gap: 0.75rem; }
.tr-srow {
  display: flex; align-items: stretch; gap: 0.9rem; text-decoration: none;
  background: var(--surface); border-radius: var(--radius-lg); padding: 0.9rem 1rem;
  box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.tr-srow:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.tr-srow .date-chip {
  flex: 0 0 auto; width: 54px; border-radius: var(--radius-md); padding: 0.4rem 0; text-align: center;
  background: var(--navy-50); box-shadow: inset 3px 0 0 var(--cat, var(--navy-500));
}
.tr-srow .date-chip .d { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--navy-600); line-height: 1; }
.tr-srow .date-chip .m { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-top: 0.15rem; }
.tr-srow .body { flex: 1; min-width: 0; }
.tr-srow .body .t { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.tr-srow .body .sub { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.2rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.tr-srow .body .sub span { display: inline-flex; align-items: center; gap: 0.3rem; }
.tr-srow .body .sub svg { width: 13px; height: 13px; }
.tr-srow .end { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.3rem; text-align: right; }
.tr-srow .end .count { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--navy-500); }
.tr-srow .end .clab { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); }

/* ---------------- Tabs ---------------- */
.tr-tabs { display: flex; gap: 0.25rem; background: var(--surface); padding: 0.3rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; }
.tr-tabs a { flex: 1; text-align: center; padding: 0.5rem; border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: all var(--transition-normal); }
.tr-tabs a.active { background: var(--navy-500); color: #fff; box-shadow: var(--shadow-sm); }

/* ---------------- Cards & grid ---------------- */
.tr-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .tr-grid.two { grid-template-columns: 1.7fr 1fr; align-items: start; } }
.tr-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.25rem; }
.tr-card.flush { padding: 0; overflow: hidden; }
.tr-card h3 { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.45rem; }
.tr-card h3 svg { width: 18px; height: 18px; color: var(--navy-400); }
.tr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.tr-card-head .ttl { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.45rem; }
.tr-card-head .ttl svg { width: 18px; height: 18px; color: var(--navy-400); }
.tr-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); background: var(--n25); flex-wrap: wrap; }

.tr-deflist { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; font-size: 0.875rem; }
.tr-deflist dt { color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 0.4rem; }
.tr-deflist dt svg { width: 14px; height: 14px; }
.tr-deflist dd { color: var(--text-primary); font-weight: 500; text-align: right; }

.tr-note { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.8rem 0.9rem; border-radius: var(--radius-md); font-size: 0.875rem; box-shadow: var(--shadow-xs); }
.tr-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.tr-note.ok { background: var(--success-light); color: var(--success-dark); }
.tr-note.warn { background: var(--warning-light); color: var(--warning-dark); }
.tr-note.info { background: var(--info-light); color: var(--info-dark); }
.tr-note.bad { background: var(--danger-light); color: var(--danger-dark); }

/* ---------------- Attendance (flag absents) ---------------- */
.tr-att-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--border-subtle); transition: background var(--transition-fast); cursor: pointer; }
.tr-att-row:hover { background: var(--n25); }
.tr-att-row:last-child { border-bottom: none; }
.tr-att-check { width: 24px; height: 24px; accent-color: var(--success); cursor: pointer; flex-shrink: 0; }
.tr-att-num { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--n100); display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
.tr-att-av { width: 32px; height: 32px; border-radius: var(--radius-full); display: grid; place-items: center; font-size: 0.625rem; font-weight: 700; font-family: var(--font-heading); color: #fff; flex-shrink: 0; }
.tr-att-id { flex: 1; min-width: 0; }
.tr-att-id .n { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tr-att-id .m { font-size: 0.6875rem; color: var(--text-tertiary); display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tr-att-badges { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }

/* Pastille info sante (ombre + fond doux, jamais de bordure coloree) */
.tr-health-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.625rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: var(--radius-full); background: var(--warning-light); color: var(--warning-dark); box-shadow: var(--shadow-xs); }
.tr-health-chip svg { width: 12px; height: 12px; }
.tr-health-detail { margin: 0 1.25rem 0.7rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-md); background: var(--warning-light); color: var(--warning-dark); font-size: 0.8125rem; box-shadow: var(--shadow-xs); display: flex; gap: 0.5rem; align-items: flex-start; }
.tr-health-detail svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

/* ---------------- Documents (multi-upload) ---------------- */
.tr-doc { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.tr-doc:last-child { border-bottom: none; }
.tr-doc .dic { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--navy-50); color: var(--navy-500); display: grid; place-items: center; flex-shrink: 0; }
.tr-doc .dic svg { width: 18px; height: 18px; }
.tr-doc .dbody { flex: 1; min-width: 0; }
.tr-doc .dbody .t { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-doc .dbody .m { font-size: 0.6875rem; color: var(--text-tertiary); }
.tr-doc .dactions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.tr-doc-type { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: var(--radius-full); background: var(--n100); color: var(--n600); }

.tr-dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem; border-radius: var(--radius-md); background: var(--n25); box-shadow: var(--shadow-inner); text-align: center; cursor: pointer; transition: background var(--transition-normal); }
.tr-dropzone:hover { background: var(--navy-50); }
.tr-dropzone svg { width: 26px; height: 26px; color: var(--navy-400); }
.tr-dropzone .dz-main { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.tr-dropzone .dz-sub { font-size: 0.75rem; color: var(--text-tertiary); }
.tr-dropzone input[type=file] { display: none; }
.tr-file-name { font-size: 0.8125rem; color: var(--navy-600); font-weight: 600; margin-top: 0.5rem; }

/* ---------------- Icon button (row action) ---------------- */
.tr-iconaction { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; background: transparent; color: var(--text-tertiary); border: none; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; }
.tr-iconaction:hover { background: var(--n100); color: var(--text-primary); }
.tr-iconaction.danger:hover { background: var(--danger-light); color: var(--danger-dark); }
.tr-iconaction svg { width: 16px; height: 16px; }

/* ---------------- Empty state ---------------- */
.tr-empty { padding: 2.5rem 1rem; text-align: center; }
.tr-empty .ei { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--n50); display: grid; place-items: center; margin: 0 auto 0.75rem; color: var(--text-tertiary); }
.tr-empty .ei svg { width: 24px; height: 24px; }
.tr-empty .et { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.tr-empty .es { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }

/* ---------------- Bottom nav (mobile) ---------------- */
.tr-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky);
  display: flex; background: var(--surface); box-shadow: 0 -2px 10px rgba(15,32,64,0.07);
  padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
}
.tr-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.35rem 0; text-decoration: none; color: var(--text-tertiary); font-size: 0.625rem; font-weight: 600; }
.tr-bottomnav a svg { width: 21px; height: 21px; }
.tr-bottomnav a.active { color: var(--navy-600); }

@media (min-width: 768px) {
  .tr-topnav { display: flex; }
  .tr-bottomnav { display: none; }
  .tr-main { padding-bottom: 2.5rem; }
}

/* ---------------- Utils ---------------- */
.tr-muted { color: var(--text-tertiary); font-size: 0.8125rem; }
.tr-stack { display: flex; flex-direction: column; gap: 1rem; }
.tr-row-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mt1 { margin-top: 0.75rem; } .mt2 { margin-top: 1.25rem; }

/* ---------------- Login ---------------- */
.tr-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); padding: 2rem 1rem; }
.tr-auth-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 2.25rem 2rem; }
.tr-auth-head { text-align: center; margin-bottom: 1.75rem; }
.tr-auth-head .brand { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.tr-auth-head .brand svg { width: 34px; height: 34px; }
.tr-auth-head .brand .wm { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--text-primary); }
.tr-auth-head .brand .wm .accent { color: var(--amber-400); }
.tr-auth-head .eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy-500); }
.tr-auth-head h1 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-top: 0.35rem; }
.tr-auth-head p { font-size: 0.9375rem; color: var(--text-secondary); margin-top: 0.25rem; }
.tr-auth-alert { display: none; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; border-radius: var(--radius-md); background: var(--danger-light); color: var(--danger-dark); font-size: 0.8125rem; margin-bottom: 1rem; box-shadow: var(--shadow-xs); }
.tr-auth-alert.show { display: flex; }
.tr-auth-alert svg { width: 17px; height: 17px; flex-shrink: 0; }
.tr-auth form .form-group { margin-bottom: 1rem; }
.tr-input-wrap { position: relative; }
.tr-input-wrap .ic { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); width: 17px; height: 17px; pointer-events: none; }
.tr-input-wrap .form-input { padding-left: 2.2rem; }
.tr-auth-options { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; margin-bottom: 1.25rem; }
.tr-auth-options a { color: var(--navy-400); font-weight: 500; text-decoration: none; }
.tr-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--text-tertiary); font-size: 0.8125rem; }
.tr-divider::before, .tr-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tr-sso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tr-sso { display: flex; align-items: center; justify-content: center; gap: 0.5rem; height: 42px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all var(--transition-normal); }
.tr-sso:hover { background: var(--n50); box-shadow: var(--shadow-sm); }
.tr-sso svg { width: 16px; height: 16px; }
.tr-biometric { width: 100%; height: 44px; margin-top: 0.75rem; border-radius: var(--radius-md); border: 1px dashed var(--border); background: transparent; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all var(--transition-normal); }
.tr-biometric:hover { border-color: var(--navy-400); color: var(--navy-600); background: var(--navy-50); }
.tr-auth-foot { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.tr-auth-foot .lang { display: flex; gap: 0.25rem; }
.tr-auth-foot .lang a { padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-tertiary); font-size: 0.6875rem; font-weight: 600; text-decoration: none; }
.tr-auth-foot .lang a.active { background: var(--navy-500); color: #fff; border-color: var(--navy-500); }
.tr-auth-foot .legal { display: flex; gap: 1rem; font-size: 0.75rem; }
.tr-auth-foot .legal a { color: var(--text-tertiary); text-decoration: none; }
.tr-demo-hint { margin-top: 1rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-md); background: var(--info-light); color: var(--info-dark); font-size: 0.75rem; box-shadow: var(--shadow-xs); text-align: center; }

/* ============================================================
   CO-BRANDING remind-r x idewe -- Espace formateur
   Reutilise cobrand_lockup() (helpers) -> .cobrand / .brand-* / .idewe-*.
   On adapte uniquement l'echelle/l'espacement aux contextes formateur.
   Aucune bordure de couleur : profondeur par l'ombre + separateur neutre.
   ============================================================ */

/* --- Lockup dans l'en-tete du login (centre, sur carte claire) --- */
.tr-cobrand-auth { display: flex; justify-content: center; margin-bottom: 1rem; }
.tr-cobrand-auth .cobrand { gap: 0.7rem; }
.tr-cobrand-auth .cobrand-rmr { gap: 0.5rem; }
.tr-cobrand-auth .brand-word-rmr { font-size: 1.25rem; }
.tr-cobrand-auth .cobrand-sep { height: 1.8rem; }
.tr-cobrand-auth .brand-word-idewe { font-size: 1.15rem; }

/* --- Lockup dans le menu profil (compact : marque rmr + logo idewe) --- */
.tr-menu-cobrand { display: flex; justify-content: center; padding: 0.15rem 0.65rem 0.45rem; }
.tr-menu-cobrand .cobrand { gap: 0.55rem; }
.tr-menu-cobrand .cobrand-sep { height: 1.25rem; }
.tr-menu-cobrand .brand-word-idewe { font-size: 0.95rem; }

/* ============================================================
   MARKETING SENSORIEL -- mobile-first terrain
   Objectif : pointer present/absent au pouce en < 3 s.
   Profondeur tactile, cibles >= 44px, halo CTA, feedback immediat,
   focus nets, zone de signature confortable. prefers-reduced-motion respecte.
   (Les micro-interactions de base des .btn/.form-input/.card viennent de
   components.css ; on enrichit ici les composants propres au formateur.)
   ============================================================ */

/* --- Carte login : matiere plus presente au repos --- */
.tr-auth-card { box-shadow: var(--shadow-xl); }

/* --- Hero "prochaine session" : profondeur + reflet anime au survol --- */
.tr-hero { box-shadow: var(--shadow-xl); transition: transform var(--dur-3, 0.32s) var(--ease-out-soft, ease), box-shadow var(--dur-3, 0.32s) var(--ease-out-soft, ease); }
.tr-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--sheen); transform: translateX(-130%);
  transition: transform var(--dur-4, 0.5s) var(--ease-out-soft, ease);
}
.tr-hero:hover { transform: translateY(var(--lift-2, -3px)); box-shadow: var(--shadow-2xl); }
.tr-hero:hover::before { transform: translateX(130%); }
.tr-hero .hero-actions .btn-accent:hover { box-shadow: var(--shadow-md), var(--glow-amber); }

/* --- KPI : reaction au survol (toucher visuel) --- */
.tr-kpi { transition: transform var(--dur-2, 0.2s) var(--ease-out-soft, ease), box-shadow var(--dur-2, 0.2s) var(--ease-out-soft, ease); }
.tr-kpi:hover { transform: translateY(var(--lift-1, -1px)); box-shadow: var(--shadow-md); }
.tr-kpi .ic { transition: transform var(--dur-2, 0.2s) var(--ease-spring, ease); }
.tr-kpi:hover .ic { transform: scale(1.06); }

/* --- Lignes de session : enfoncement satisfaisant au tap --- */
.tr-srow:active { transform: translateY(var(--press-1, 1px)) scale(0.997); box-shadow: var(--shadow-press); }
.tr-srow .date-chip { transition: background var(--dur-2, 0.2s) ease; }
.tr-srow:hover .date-chip { background: var(--navy-100, var(--navy-50)); }

/* --- POINTAGE PRESENCE : coeur de l'experience terrain ---
   Rangee tactile, cible large, feedback present/absent immediat. */
.tr-att-row {
  min-height: 56px;                /* confort pouce */
  gap: 0.85rem;
  transition: background var(--dur-1, 0.12s) var(--ease-out-soft, ease),
              box-shadow var(--dur-1, 0.12s) ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.tr-att-row:active { background: var(--navy-50); }
/* Etat "present" (case cochee) : liseré ambre par ombre interne, jamais de bordure */
.tr-att-row:has(.tr-att-check:checked) {
  background: var(--success-light);
  box-shadow: inset 4px 0 0 var(--success);
}
.tr-att-row:has(.tr-att-check:checked):hover { background: var(--success-light); }
/* Etat "absent" (decoche) : signal doux cote danger */
.tr-att-row:has(.tr-att-check:not(:checked)) {
  box-shadow: inset 4px 0 0 var(--n100);
}
/* Cible de pointage genereuse + halo focus net au clavier */
.tr-att-check {
  width: 28px; height: 28px;
  transition: transform var(--dur-1, 0.12s) var(--ease-spring, ease);
}
.tr-att-check:active { transform: scale(0.88); }
.tr-att-check:focus-visible { outline: none; box-shadow: var(--glow-amber); border-radius: var(--radius-xs, 4px); }
/* Pastille avatar : reaction vivante */
.tr-att-av { transition: transform var(--dur-2, 0.2s) var(--ease-spring, ease); }
.tr-att-row:hover .tr-att-av { transform: scale(1.05); }

/* --- Boutons "tout present / tout absent" : cibles >= 44px au tap --- */
.tr-card-head + div .btn-sm,
.tr-card .btn-sm { min-height: 38px; }
@media (hover: none) { .tr-card .btn-sm, .tr-row-btns .btn { min-height: 44px; } }

/* --- CTA validation : halo ambre + barre d'action collante sur mobile --- */
.tr-card-foot .btn-primary:focus-visible { outline: none; box-shadow: var(--shadow-sm), var(--glow-navy); }
.tr-card-foot { transition: box-shadow var(--dur-2, 0.2s) ease; }

/* --- Dropzone documents : profondeur "creuse" + accueil au survol --- */
.tr-dropzone { transition: background var(--dur-2, 0.2s) ease, box-shadow var(--dur-2, 0.2s) ease, transform var(--dur-2, 0.2s) var(--ease-out-soft, ease); }
.tr-dropzone:hover { box-shadow: var(--shadow-inner), var(--glow-navy); transform: translateY(var(--lift-1, -1px)); }
.tr-dropzone:active { transform: translateY(var(--press-1, 1px)); }

/* --- Actions d'icone (lignes documents) : feedback tactile --- */
.tr-iconaction:active, .tr-iconbtn:active { transform: scale(0.9); }
.tr-iconbtn:focus-visible { outline: none; box-shadow: var(--glow-navy); }

/* --- Bottom nav (terrain) : etat actif + tap net, cible >= 56px --- */
.tr-bottomnav a { min-height: 52px; justify-content: center; transition: color var(--dur-2, 0.2s) ease, transform var(--dur-1, 0.12s) var(--ease-spring, ease); position: relative; }
.tr-bottomnav a:active { transform: scale(0.94); }
.tr-bottomnav a.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: var(--radius-full);
  background: var(--amber-400);
}
.tr-bottomnav a svg { transition: transform var(--dur-2, 0.2s) var(--ease-spring, ease); }
.tr-bottomnav a.active svg { transform: translateY(-1px); }

/* --- Toasts : entree vivante (apparition douce, jamais de bordure) --- */
.tr-toast { box-shadow: var(--shadow-lg); animation: tr-toast-in var(--dur-3, 0.32s) var(--ease-spring, ease) both; }
@keyframes tr-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* --- Pastille info sante : apparition maitrisee --- */
.tr-health-chip { animation: tr-chip-in var(--dur-2, 0.2s) var(--ease-spring, ease) both; }
@keyframes tr-chip-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* ============================================================
   RESPONSIVE -- 6 breakpoints canoniques
   480 / 768 / 1024 / 1280 / 1440 / 1920. Mobile-first.
   Le base (<=479) est deja pense pour le pouce ci-dessus.
   ============================================================ */

/* --- Fluides (toutes tailles) : titres et hero s'adaptent sans paliers durs --- */
.tr-page-head h1 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem); }
.tr-hero h2 { font-size: clamp(1.25rem, 1.0rem + 1.4vw, 1.9rem); }
.tr-auth-card { max-width: min(420px, 100%); }

/* --- >= 480px : petits telephones paysage / grands telephones --- */
@media (min-width: 480px) {
  .tr-main { padding: 1.4rem 1.25rem 6rem; }
  .tr-att-row { padding-left: 1.5rem; padding-right: 1.5rem; }
  .tr-hero { padding: 1.75rem; }
  .tr-auth-card { padding: 2.25rem 2.25rem; }
}

/* --- >= 768px : tablette portrait -> bascule topnav, fin du bottom nav --- */
@media (min-width: 768px) {
  .tr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tr-att-row { min-height: 52px; }          /* souris : un peu plus dense */
  .tr-att-check { width: 24px; height: 24px; }
  /* CTA validation : aligne a droite, respire */
  .tr-card-foot { padding: 1rem 1.5rem; }
}

/* --- >= 1024px : tablette paysage / petit laptop --- */
@media (min-width: 1024px) {
  .tr-main { max-width: 1120px; padding-left: 1.75rem; padding-right: 1.75rem; }
  .tr-grid.two { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .tr-hero { padding: 2rem 2.25rem; }
  .tr-hero h2 { margin-top: 0.45rem; }
  /* Documents : upload sur une ligne confortable */
  .tr-doc { padding-top: 0.85rem; padding-bottom: 0.85rem; }
}

/* --- >= 1280px : laptop standard --- */
@media (min-width: 1280px) {
  .tr-main { max-width: 1200px; padding-top: 2rem; }
  .tr-kpis { gap: 1rem; }
  .tr-list { gap: 0.85rem; }
}

/* --- >= 1440px : grand laptop / desktop --- */
@media (min-width: 1440px) {
  .tr-main { max-width: 1320px; }
  .tr-page-head { margin-bottom: 1.5rem; }
  .tr-srow { padding: 1rem 1.15rem; }
  .tr-kpi { padding: 1.15rem; }
}

/* --- >= 1920px : tres grand ecran -> on borne la mesure de lecture --- */
@media (min-width: 1920px) {
  .tr-main { max-width: 1440px; }
  .tr-hero { padding: 2.4rem 2.75rem; }
  .tr-page-head h1 { font-size: 1.9rem; }
}

/* ============================================================
   ACCESSIBILITE -- neutralise le mouvement si demande.
   (complete la regle de components.css pour les composants formateur)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tr-hero, .tr-hero::before, .tr-kpi, .tr-kpi .ic, .tr-srow, .tr-att-row,
  .tr-att-check, .tr-att-av, .tr-dropzone, .tr-iconaction, .tr-iconbtn,
  .tr-bottomnav a, .tr-bottomnav a svg, .tr-toast, .tr-health-chip {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .tr-hero::before { display: none; }
}