/*
 * Back-office de contenu Lentek : composants (F4e, cadres H4, H5, H6, H8).
 * Couleurs, tailles, rayons et ombres viennent UNIQUEMENT des jetons (lentek-tokens.css, copie générée) :
 * aucune valeur de couleur en dur ici (tests/test_ecrans.py le vérifie).
 */

/* ---------- Police (servie en local) ---------- */
@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url("../roboto/roboto-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url("../roboto/roboto-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url("../roboto/roboto-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 700; font-display: swap; src: url("../roboto/roboto-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 700; font-display: swap; src: url("../roboto/roboto-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Bootstrap habillé par les jetons ---------- */
:root {
  --bs-body-font-family: var(--ltk-font);
  --bs-body-font-size: var(--ltk-fs-16);
  --bs-body-line-height: var(--ltk-lh-body);
  --bs-body-color: var(--ltk-ink);
  --bs-body-bg: var(--ltk-bg-page);
  --bs-emphasis-color: var(--ltk-ink);
  --bs-secondary-color: var(--ltk-neutral-700);
  --bs-tertiary-bg: var(--ltk-neutral-100);
  --bs-border-color: var(--ltk-neutral-100);
  --bs-border-radius: var(--ltk-r-8);
  --bs-border-radius-lg: var(--ltk-r-12);
  --bs-link-color: var(--ltk-blue);
  --bs-link-hover-color: var(--ltk-blue-dark);
  --bs-primary: var(--ltk-blue);
  --bs-danger: var(--ltk-danger);
  --bs-success: var(--ltk-success-text);
  --bs-warning: var(--ltk-warning-text);
  --bs-secondary: var(--ltk-neutral-700);
  --bs-focus-ring-color: var(--ltk-bg-blue-strong);
}
body { font-family: var(--ltk-font); color: var(--ltk-ink); background: var(--ltk-bg-page); }
a { color: var(--ltk-blue); }
a:hover { color: var(--ltk-blue-dark); }
.text-muted, .text-secondary { color: var(--ltk-neutral-700) !important; }
.text-primary { color: var(--ltk-blue) !important; }
.text-danger { color: var(--ltk-danger) !important; }
.text-success { color: var(--ltk-success-text) !important; }
.text-warning { color: var(--ltk-warning-text) !important; }
.bg-primary { background-color: var(--ltk-blue) !important; }
.bg-secondary { background-color: var(--ltk-neutral-700) !important; }
.border-primary { border-color: var(--ltk-blue) !important; }
.table-secondary { --bs-table-bg: var(--ltk-neutral-100); --bs-table-color: var(--ltk-ink); }
:focus-visible { outline: 3px solid var(--ltk-blue); outline-offset: 2px; }

/* ---------- Boutons ---------- */
.btn { --bs-btn-font-weight: 700; --bs-btn-border-radius: var(--ltk-r-12); min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ltk-sp-2);
  transition: background-color var(--ltk-dur) var(--ltk-ease), box-shadow var(--ltk-dur) var(--ltk-ease); }
.btn-lg, .ltk-btn-principal { min-height: var(--ltk-tap); padding: 0 var(--ltk-sp-5); font-size: var(--ltk-fs-16); }
.btn-primary { --bs-btn-bg: var(--ltk-blue); --bs-btn-border-color: var(--ltk-blue); --bs-btn-color: var(--ltk-white);
  --bs-btn-hover-bg: var(--ltk-blue-dark); --bs-btn-hover-border-color: var(--ltk-blue-dark); --bs-btn-hover-color: var(--ltk-white);
  --bs-btn-active-bg: var(--ltk-blue-dark); --bs-btn-active-border-color: var(--ltk-blue-dark);
  --bs-btn-disabled-bg: var(--ltk-neutral-300); --bs-btn-disabled-border-color: var(--ltk-neutral-300); --bs-btn-disabled-color: var(--ltk-ink); }
.btn-outline-primary { --bs-btn-color: var(--ltk-blue); --bs-btn-border-color: var(--ltk-blue); --bs-btn-bg: var(--ltk-white);
  --bs-btn-hover-bg: var(--ltk-bg-blue-soft); --bs-btn-hover-color: var(--ltk-blue-dark); --bs-btn-hover-border-color: var(--ltk-blue-dark);
  --bs-btn-active-bg: var(--ltk-bg-blue); --bs-btn-active-color: var(--ltk-blue-dark); border-width: 2px; }
.btn-danger { --bs-btn-bg: var(--ltk-danger); --bs-btn-border-color: var(--ltk-danger); --bs-btn-color: var(--ltk-white);
  --bs-btn-hover-bg: var(--ltk-danger-text); --bs-btn-hover-border-color: var(--ltk-danger-text); --bs-btn-hover-color: var(--ltk-white); }
.btn-secondary, .btn-light { --bs-btn-bg: var(--ltk-white); --bs-btn-color: var(--ltk-ink); --bs-btn-border-color: var(--ltk-neutral-500);
  --bs-btn-hover-bg: var(--ltk-neutral-100); --bs-btn-hover-color: var(--ltk-ink); --bs-btn-hover-border-color: var(--ltk-neutral-500); }
/* Action de ligne (« Ouvrir », « Modifier », « Restaurer ») : pastille bleu pâle */
.ltk-action { display: inline-flex; align-items: center; gap: var(--ltk-sp-1); min-height: 32px; padding: 0 var(--ltk-sp-3);
  border-radius: var(--ltk-r-8); font-size: var(--ltk-fs-14); font-weight: 700; color: var(--ltk-blue);
  background: var(--ltk-bg-blue-soft); border: 0; text-decoration: none; }
.ltk-action:hover { color: var(--ltk-blue-dark); background: var(--ltk-bg-blue); }
.ltk-action-lien { background: transparent; }
.ltk-action-danger { color: var(--ltk-danger); background: transparent; }
.ltk-action-danger:hover { color: var(--ltk-danger-text); background: var(--ltk-bg-danger); }

/* ---------- Formulaires ---------- */
.form-control, .form-select { min-height: var(--ltk-tap); border: 1px solid var(--ltk-neutral-500); border-radius: var(--ltk-r-8);
  font-size: var(--ltk-fs-16); color: var(--ltk-ink); }
.form-control-sm, .form-select-sm { min-height: 40px; font-size: var(--ltk-fs-14); }
.form-control:focus, .form-select:focus { border: 2px solid var(--ltk-blue); box-shadow: none; }
.form-label, label { font-weight: 700; font-size: var(--ltk-fs-14); }
.form-check-input:checked { background-color: var(--ltk-blue); border-color: var(--ltk-blue); }
.invalid-feedback, .errorlist { color: var(--ltk-danger); font-size: var(--ltk-fs-14); }
.ltk-aide { color: var(--ltk-neutral-700); font-size: var(--ltk-fs-14); }

/* ---------- Barre de navigation (64 px) ---------- */
.ltk-nav { position: sticky; top: 0; z-index: 1030; height: 64px; display: flex; align-items: center; gap: var(--ltk-sp-6);
  padding: 0 var(--ltk-sp-6); background: var(--ltk-white); box-shadow: var(--ltk-shadow-1); }
.ltk-nav__marque { display: flex; align-items: center; gap: var(--ltk-sp-6); text-decoration: none; }
.ltk-nav__marque img { height: 32px; }
.ltk-nav__produit { color: var(--ltk-neutral-700); font-size: var(--ltk-fs-14); white-space: nowrap; }
.ltk-nav__modules { display: flex; gap: var(--ltk-sp-1); list-style: none; margin: 0; padding: 0; flex: 1; }
.ltk-nav__module > a, .ltk-nav__module > button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--ltk-sp-3);
  border-radius: var(--ltk-r-8); color: var(--ltk-ink); text-decoration: none; font-size: var(--ltk-fs-14); background: none; border: 0; }
.ltk-nav__module > a:hover, .ltk-nav__module > button:hover { background: var(--ltk-neutral-100); }
.ltk-nav__module.actif > a, .ltk-nav__module.actif > button { background: var(--ltk-bg-blue-soft); color: var(--ltk-blue); font-weight: 700; }
.ltk-nav .dropdown-menu { border: 0; border-radius: var(--ltk-r-12); box-shadow: var(--ltk-shadow-2); padding: var(--ltk-sp-2); }
.ltk-nav .dropdown-item { border-radius: var(--ltk-r-8); min-height: 40px; display: flex; align-items: center; gap: var(--ltk-sp-2); }
.ltk-nav .dropdown-item.active, .ltk-nav .dropdown-item:active { background: var(--ltk-bg-blue-soft); color: var(--ltk-blue); }
.ltk-utilisateur { display: flex; align-items: center; gap: var(--ltk-sp-2); color: var(--ltk-ink); text-decoration: none;
  min-height: var(--ltk-tap); background: none; border: 0; font-size: var(--ltk-fs-14); }
.ltk-avatar { width: 32px; height: 32px; border-radius: var(--ltk-r-full); background: var(--ltk-bg-blue-soft); color: var(--ltk-blue);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--ltk-fs-14); }
.ltk-role { color: var(--ltk-neutral-700); }

/* ---------- Page ---------- */
.ltk-page { max-width: 1040px; margin: 0 auto; padding: var(--ltk-sp-6) var(--ltk-sp-4) var(--ltk-sp-12); }
.ltk-page--large { max-width: 1280px; }
.ltk-fil { display: flex; flex-wrap: wrap; gap: var(--ltk-sp-2); list-style: none; margin: 0 0 var(--ltk-sp-5); padding: 0; font-size: var(--ltk-fs-14); }
.ltk-fil li + li::before { content: "/"; color: var(--ltk-neutral-700); margin-right: var(--ltk-sp-2); }
.ltk-fil a { color: var(--ltk-blue); text-decoration: none; }
.ltk-fil a:hover { text-decoration: underline; }
.ltk-fil [aria-current] { color: var(--ltk-ink); font-weight: 700; }
.ltk-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ltk-sp-4); margin-bottom: var(--ltk-sp-4); }
.ltk-entete h1 { font-size: var(--ltk-fs-24); line-height: var(--ltk-lh-tight); font-weight: 700; margin: 0; }
.ltk-entete__sous-titre { color: var(--ltk-neutral-700); font-size: var(--ltk-fs-14); margin: var(--ltk-sp-1) 0 0; }
.ltk-entete__actions { display: flex; flex-wrap: wrap; gap: var(--ltk-sp-3); align-items: center; }
.ltk-outils { display: flex; flex-wrap: wrap; gap: var(--ltk-sp-3); margin-bottom: var(--ltk-sp-4); align-items: stretch; }
.ltk-outils .ltk-recherche { flex: 1 1 320px; }
.ltk-outils .form-select { width: auto; }
.ltk-recherche { position: relative; }
.ltk-recherche i { position: absolute; left: var(--ltk-sp-3); top: 50%; transform: translateY(-50%); color: var(--ltk-neutral-700); }
.ltk-recherche .form-control { padding-left: 40px; }
.ltk-onglets { display: inline-flex; border: 1px solid var(--ltk-neutral-500); border-radius: var(--ltk-r-12); overflow: hidden; }
.ltk-onglets > * { min-height: var(--ltk-tap); padding: 0 var(--ltk-sp-4); display: inline-flex; align-items: center; gap: var(--ltk-sp-2);
  border: 0; background: var(--ltk-white); color: var(--ltk-blue); font-weight: 700; text-decoration: none; }
.ltk-onglets > .active, .ltk-onglets > [aria-selected="true"] { background: var(--ltk-blue); color: var(--ltk-white); }

/* ---------- Cartes, tableaux ---------- */
.ltk-carte { background: var(--ltk-white); border: 1px solid var(--ltk-neutral-100); border-radius: var(--ltk-r-12);
  box-shadow: var(--ltk-shadow-1); padding: var(--ltk-sp-4); }
.ltk-carte--plate { padding: 0; overflow: hidden; }
.ltk-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ltk-sp-6); }
.ltk-grille--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ltk-tableau { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--ltk-fs-14); }
.ltk-tableau th { text-transform: uppercase; font-size: var(--ltk-fs-12); letter-spacing: .04em; color: var(--ltk-neutral-700);
  font-weight: 700; padding: var(--ltk-sp-4); text-align: left; border-bottom: 1px solid var(--ltk-neutral-100); }
.ltk-tableau td { padding: var(--ltk-sp-3) var(--ltk-sp-4); border-bottom: 1px solid var(--ltk-neutral-100); vertical-align: middle; }
.ltk-tableau tr:last-child td { border-bottom: 0; }
.ltk-tableau tbody tr:hover { background: var(--ltk-neutral-100); }
.ltk-tableau .ltk-actions { white-space: nowrap; display: flex; gap: var(--ltk-sp-2); align-items: center; }
.ltk-sous-texte { color: var(--ltk-neutral-700); font-size: var(--ltk-fs-12); }

/* ---------- Pastilles de statut (jamais la couleur seule : texte + icône) ---------- */
.ltk-statut { display: inline-flex; align-items: center; gap: var(--ltk-sp-1); padding: 2px var(--ltk-sp-2); border-radius: var(--ltk-r-full);
  border: 1px solid var(--ltk-neutral-500); color: var(--ltk-neutral-700); background: var(--ltk-white); font-size: var(--ltk-fs-12); font-weight: 700; white-space: nowrap; }
.ltk-statut--succes { background: var(--ltk-bg-success); color: var(--ltk-success-text); border-color: var(--ltk-success); }
.ltk-statut--danger { background: var(--ltk-bg-danger); color: var(--ltk-danger-text); border-color: var(--ltk-danger); }
.ltk-statut--alerte { background: var(--ltk-bg-warning); color: var(--ltk-warning-text); border-color: var(--ltk-warning-text); }
.ltk-statut--info { background: var(--ltk-bg-blue-soft); color: var(--ltk-blue); border-color: var(--ltk-bg-blue-soft); }
.ltk-puce { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--ltk-sp-1);
  border-radius: var(--ltk-r-full); background: var(--ltk-neutral-700); color: var(--ltk-white); font-size: var(--ltk-fs-12); font-weight: 700; }
.ltk-puce--bleue { background: var(--ltk-bg-blue-soft); color: var(--ltk-blue); border-radius: var(--ltk-r-8); }
.ltk-badge { display: inline-flex; min-width: 24px; justify-content: center; padding: 0 var(--ltk-sp-2); border-radius: var(--ltk-r-full);
  background: var(--ltk-bg-blue-soft); color: var(--ltk-blue); font-size: var(--ltk-fs-12); font-weight: 700; }

/* ---------- Explorateur à dossiers (A06) ---------- */
.ltk-dossier { background: var(--ltk-white); border: 1px solid var(--ltk-neutral-100); border-radius: var(--ltk-r-12); box-shadow: var(--ltk-shadow-1);
  padding: var(--ltk-sp-6) var(--ltk-sp-4) var(--ltk-sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--ltk-sp-2);
  text-align: center; transition: box-shadow var(--ltk-dur) var(--ltk-ease); }
.ltk-dossier:hover, .ltk-dossier:focus-within { box-shadow: var(--ltk-shadow-2); }
.ltk-dossier__icone { width: 112px; height: 88px; object-fit: contain; }
.ltk-dossier__titre { display: flex; align-items: center; gap: var(--ltk-sp-2); font-size: var(--ltk-fs-20); font-weight: 700; color: var(--ltk-ink);
  text-decoration: none; line-height: var(--ltk-lh-tight); }
.ltk-dossier__titre:hover { color: var(--ltk-blue); }
.ltk-dossier__compteur { color: var(--ltk-neutral-700); font-size: var(--ltk-fs-14); }
.ltk-dossier__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ltk-sp-2); margin-top: var(--ltk-sp-2); }
.ltk-alerte-ligne { color: var(--ltk-warning-text); font-size: var(--ltk-fs-12); font-weight: 700; }

/* ---------- Pagination ---------- */
.ltk-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ltk-sp-3); margin-top: var(--ltk-sp-4);
  color: var(--ltk-neutral-700); font-size: var(--ltk-fs-14); }
.ltk-pagination ul { display: flex; gap: var(--ltk-sp-2); list-style: none; margin: 0; padding: 0; }
.ltk-pagination a, .ltk-pagination span.page { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px;
  padding: 0 var(--ltk-sp-2); border: 1px solid var(--ltk-neutral-500); border-radius: var(--ltk-r-8); color: var(--ltk-ink); text-decoration: none; background: var(--ltk-white); }
.ltk-pagination a:hover { background: var(--ltk-neutral-100); }
.ltk-pagination [aria-current] { background: var(--ltk-blue); border-color: var(--ltk-blue); color: var(--ltk-white); font-weight: 700; }
.ltk-pagination .desactive { color: var(--ltk-neutral-300); border-color: var(--ltk-neutral-300); }
.pagination { --bs-pagination-active-bg: var(--ltk-blue); --bs-pagination-active-border-color: var(--ltk-blue); --bs-pagination-color: var(--ltk-ink);
  --bs-pagination-border-color: var(--ltk-neutral-500); --bs-pagination-hover-bg: var(--ltk-neutral-100); --bs-pagination-hover-color: var(--ltk-ink); }

/* ---------- États (H8) ---------- */
.ltk-etat { text-align: center; padding: var(--ltk-sp-12) var(--ltk-sp-4); color: var(--ltk-neutral-700); display: flex; flex-direction: column;
  align-items: center; gap: var(--ltk-sp-3); }
.ltk-etat > i { font-size: var(--ltk-fs-48); color: var(--ltk-neutral-500); }
.ltk-etat__titre { font-size: var(--ltk-fs-20); font-weight: 700; color: var(--ltk-ink); margin: 0; }
.ltk-etat--erreur > i { color: var(--ltk-danger); }
.ltk-squelette { background: var(--ltk-neutral-100); border-radius: var(--ltk-r-8); min-height: 16px; animation: ltk-pulse 1.2s ease-in-out infinite; }
@keyframes ltk-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ltk-squelette { animation: none; } }

/* ---------- Messages ---------- */
.ltk-messages { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 1080; width: min(720px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: var(--ltk-sp-2); }
.ltk-message { display: flex; align-items: flex-start; gap: var(--ltk-sp-3); padding: var(--ltk-sp-3) var(--ltk-sp-4); border-radius: var(--ltk-r-12);
  box-shadow: var(--ltk-shadow-2); font-size: var(--ltk-fs-14); border-left: 4px solid var(--ltk-blue); background: var(--ltk-white); color: var(--ltk-ink); }
.ltk-message > i { margin-top: 3px; }
.ltk-message--success { background: var(--ltk-bg-success); border-color: var(--ltk-success); }
.ltk-message--success > i { color: var(--ltk-success-text); }
.ltk-message--error { background: var(--ltk-bg-danger); border-color: var(--ltk-danger); }
.ltk-message--error > i { color: var(--ltk-danger-text); }
.ltk-message--warning { background: var(--ltk-bg-warning); border-color: var(--ltk-warning-text); }
.ltk-message--warning > i { color: var(--ltk-warning-text); }
.ltk-message--info { background: var(--ltk-bg-blue-soft); }
.ltk-message .btn-close { margin-left: auto; }

/* ---------- Modales ---------- */
.modal-content { border: 0; border-radius: var(--ltk-r-12); box-shadow: var(--ltk-shadow-3); }
.modal-header, .modal-footer { border: 0; }
.modal-title { font-size: var(--ltk-fs-20); font-weight: 700; }
.modal-footer { gap: var(--ltk-sp-3); }

/* ---------- Connexion ---------- */
.ltk-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--ltk-sp-4);
  background: var(--ltk-navy) url("../images/fond-connexion.png") center / cover; position: relative; }
.ltk-connexion::before { content: ""; position: absolute; inset: 0; background: var(--ltk-navy); opacity: .72; }
.ltk-connexion__carte { position: relative; width: min(400px, 100%); background: var(--ltk-white); border-radius: var(--ltk-r-12); padding: var(--ltk-sp-8);
  box-shadow: var(--ltk-shadow-3); display: flex; flex-direction: column; gap: var(--ltk-sp-4); }
.ltk-connexion__logo { display: flex; flex-direction: column; align-items: center; gap: var(--ltk-sp-1); color: var(--ltk-neutral-700); }
.ltk-connexion__logo img { height: 64px; }
.ltk-connexion h1 { font-size: var(--ltk-fs-20); font-weight: 700; text-align: center; margin: 0; }

/* ---------- Tuiles d'accueil (PUB-P03) ---------- */
.ltk-tuile { display: flex; flex-direction: column; background: var(--ltk-white); border-radius: var(--ltk-r-12) var(--ltk-r-12) 48px var(--ltk-r-12);
  box-shadow: var(--ltk-shadow-1); overflow: hidden; text-decoration: none; color: var(--ltk-ink); transition: box-shadow var(--ltk-dur) var(--ltk-ease); }
.ltk-tuile:hover, .ltk-tuile:focus-visible { box-shadow: var(--ltk-shadow-3); color: var(--ltk-ink); }
.ltk-tuile__visuel { height: 110px; display: flex; align-items: center; justify-content: center; color: var(--ltk-white); font-size: var(--ltk-fs-32);
  background: var(--ltk-navy) url("../images/fond-connexion.png") center / cover; position: relative; }
.ltk-tuile__visuel::before { content: ""; position: absolute; inset: 0; background: var(--ltk-navy); opacity: .78; }
.ltk-tuile__visuel i { position: relative; }
.ltk-tuile__corps { padding: var(--ltk-sp-5); }
.ltk-tuile__titre { display: flex; justify-content: space-between; align-items: center; color: var(--ltk-blue); font-size: var(--ltk-fs-20); font-weight: 700; margin: 0 0 var(--ltk-sp-2); }
.ltk-tuile__texte { margin: 0; font-size: var(--ltk-fs-14); }

/* ---------- Divers ---------- */
.ltk-vignette { width: 56px; height: 56px; object-fit: contain; border-radius: var(--ltk-r-8); border: 1px solid var(--ltk-neutral-100); background: var(--ltk-white); }
.ltk-separateur { border: 0; border-top: 1px solid var(--ltk-neutral-100); margin: var(--ltk-sp-4) 0; }
.visually-hidden-focusable:focus { position: static !important; }
@media (max-width: 1100px) { .ltk-nav__produit { display: none; } }
@media (max-width: 900px) { .ltk-nav { gap: var(--ltk-sp-3); padding: 0 var(--ltk-sp-3); } .ltk-nav__modules { display: none; } .ltk-nav__menu-compact { display: inline-flex !important; } }
.ltk-nav__menu-compact { display: none !important; }

/* Champs rendus par Django sans classe (form.as_p) : même aspect que .form-control */
.ltk-connexion__carte input[type=text], .ltk-connexion__carte input[type=email], .ltk-connexion__carte input[type=password] {
  display: block; width: 100%; min-height: var(--ltk-tap); padding: 0 var(--ltk-sp-3); border: 1px solid var(--ltk-neutral-500);
  border-radius: var(--ltk-r-8); font-size: var(--ltk-fs-16); color: var(--ltk-ink); }
.ltk-connexion__carte input:focus { border: 2px solid var(--ltk-blue); outline: none; }
.ltk-connexion__carte .helptext, .ltk-connexion__carte ul:not(.errorlist) { color: var(--ltk-neutral-700); font-size: var(--ltk-fs-12); }
.form-control.is-invalid, .form-select.is-invalid { border: 2px solid var(--ltk-danger); background-image: none; }
.invalid-feedback { color: var(--ltk-danger); }
.ltk-entete__actions .ltk-recherche { width: 300px; }

/* ---------- Images d'une question (cases numérotées, H4/H5) ---------- */
.ltk-cases { display: flex; flex-wrap: wrap; gap: var(--ltk-sp-2); align-items: flex-end; }
.ltk-case { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ltk-case__position { font-size: var(--ltk-fs-12); color: var(--ltk-neutral-700); }
.ltk-case__image { position: relative; width: 48px; height: 48px; padding: 4px; border: 1px solid var(--ltk-neutral-100); border-radius: var(--ltk-r-8);
  background: var(--ltk-white); cursor: pointer; }
.ltk-case__image img { width: 100%; height: 100%; object-fit: contain; }
.ltk-case--reponse .ltk-case__image { border: 2px solid var(--ltk-success-text); }
.ltk-case__coche { position: absolute; top: -8px; right: -8px; color: var(--ltk-success-text); background: var(--ltk-white); border-radius: var(--ltk-r-full); font-size: var(--ltk-fs-16); line-height: 1; }
.ltk-case .dropdown-menu { min-width: 240px; }
.ltk-icone-action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--ltk-r-8);
  color: var(--ltk-neutral-700); background: none; border: 0; text-decoration: none; }
.ltk-icone-action:hover { background: var(--ltk-neutral-100); color: var(--ltk-ink); }
.ltk-icone-action--bleu { color: var(--ltk-blue); }
.ltk-icone-action--danger { color: var(--ltk-danger); }
.ltk-icone-action--danger:hover { background: var(--ltk-bg-danger); color: var(--ltk-danger-text); }

/* ---------- Leçons (LEC-P01, LEC-P02) ---------- */
.ltk-carte-lecon { background: var(--ltk-white); border: 1px solid var(--ltk-neutral-100); border-radius: var(--ltk-r-12); box-shadow: var(--ltk-shadow-1);
  padding: var(--ltk-sp-5) var(--ltk-sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--ltk-sp-2); text-align: center;
  cursor: pointer; transition: box-shadow var(--ltk-dur) var(--ltk-ease); width: 100%; color: var(--ltk-ink); }
.ltk-carte-lecon:hover, .ltk-carte-lecon:focus-visible { box-shadow: var(--ltk-shadow-2); }
.ltk-carte-lecon__icone { width: 96px; height: 112px; border: 4px solid var(--ltk-data-6); border-radius: var(--ltk-r-8); display: flex;
  align-items: center; justify-content: center; font-size: var(--ltk-fs-32); color: var(--ltk-data-6); }
.ltk-carte-lecon__icone--exercice { border-color: var(--ltk-data-5); color: var(--ltk-data-5); }
.ltk-carte-lecon__icone--vide { border-color: var(--ltk-neutral-300); color: var(--ltk-neutral-300); }
.ltk-carte-lecon__titre { display: flex; align-items: center; gap: var(--ltk-sp-2); font-size: var(--ltk-fs-16); font-weight: 700; margin: 0; }
.ltk-lecon { background: var(--ltk-white); border: 1px solid var(--ltk-neutral-100); border-radius: var(--ltk-r-12); box-shadow: var(--ltk-shadow-1); margin-bottom: var(--ltk-sp-3); }
.ltk-lecon__entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ltk-sp-3); padding: var(--ltk-sp-3) var(--ltk-sp-4); }
.ltk-lecon__titre { flex: 1 1 280px; min-width: 0; }
.ltk-lecon__titre h2 { font-size: var(--ltk-fs-16); font-weight: 700; margin: 0; display: flex; align-items: center; gap: var(--ltk-sp-2); }
.ltk-lecon__actions { display: flex; flex-wrap: wrap; gap: var(--ltk-sp-1); align-items: center; }
.ltk-lecon__corps { border-top: 1px solid var(--ltk-neutral-100); padding: var(--ltk-sp-4) var(--ltk-sp-4) var(--ltk-sp-4) 88px; }
.ltk-lecon__revision { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ltk-sp-2); margin-bottom: var(--ltk-sp-3); }
.ltk-questions { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--ltk-sp-3); }
.ltk-question { border: 1px solid var(--ltk-neutral-100); border-radius: var(--ltk-r-12); padding: var(--ltk-sp-3); display: flex; flex-direction: column; gap: var(--ltk-sp-2); }
.ltk-question__entete { display: flex; align-items: center; gap: var(--ltk-sp-2); font-size: var(--ltk-fs-14); }
.ltk-question__entete .ltk-question__libelle { font-weight: 700; flex: 1; min-width: 0; }
.ltk-puce-q { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--ltk-sp-2); border: 1px solid var(--ltk-blue); border-radius: var(--ltk-r-8);
  color: var(--ltk-blue); font-weight: 700; font-size: var(--ltk-fs-14); text-decoration: none; background: var(--ltk-white); }
.ltk-puce-q:hover { background: var(--ltk-bg-blue-soft); }
.ltk-fiche { width: 100%; border: 1px solid var(--ltk-neutral-100); border-radius: var(--ltk-r-8); border-collapse: separate; border-spacing: 0; font-size: var(--ltk-fs-14); }
.ltk-fiche th { width: 34%; color: var(--ltk-neutral-700); font-weight: 400; padding: var(--ltk-sp-2) var(--ltk-sp-3); border-bottom: 1px solid var(--ltk-neutral-100); vertical-align: top; }
.ltk-fiche td { padding: var(--ltk-sp-2) var(--ltk-sp-3); border-bottom: 1px solid var(--ltk-neutral-100); }
.ltk-fiche tr:last-child th, .ltk-fiche tr:last-child td { border-bottom: 0; }
.ltk-video { width: 100%; max-height: 60vh; border-radius: var(--ltk-r-8); background: var(--ltk-ink); }
.ltk-vignette-video { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--ltk-r-8); background: var(--ltk-ink); color: var(--ltk-white);
  display: flex; align-items: center; justify-content: center; font-size: var(--ltk-fs-48); }
.ltk-vignette-video:hover { background: var(--ltk-blue-dark); }
legend.form-label { font-size: var(--ltk-fs-14); font-weight: 700; }
.form-check-label { font-weight: 400; font-size: var(--ltk-fs-16); }
.form-check-input { width: 1.25em; height: 1.25em; margin-top: .15em; }
.ltk-tuile__corps { display: block; }
.ltk-tuile__visuel { display: flex; }
/* PUB-P04 : barre de publication collée en bas de la fenêtre */
.ltk-barre-publication { position: sticky; bottom: 0; z-index: 1020; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ltk-sp-4);
  background: var(--ltk-white); box-shadow: var(--ltk-shadow-3); border-radius: var(--ltk-r-12) var(--ltk-r-12) 0 0; padding: var(--ltk-sp-4) var(--ltk-sp-6);
  margin: 0 calc(-1 * var(--ltk-sp-4)); }

/* ---------- Médias (MED-P01 à P04) ---------- */
.ltk-grille--medias { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: var(--ltk-sp-4); }
.ltk-media { display: flex; flex-direction: column; gap: var(--ltk-sp-2); padding: var(--ltk-sp-3); }
.ltk-media__vignette { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--ltk-r-8); background: var(--ltk-neutral-100);
  display: flex; align-items: center; justify-content: center; padding: var(--ltk-sp-2); }
.ltk-media__vignette { overflow: hidden; }
.ltk-media__vignette img { width: 100%; height: 100%; object-fit: contain; }
.ltk-media .ltk-vignette-video { font-size: var(--ltk-fs-32); }
.ltk-media__titre { font-size: var(--ltk-fs-16); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.ltk-media__actions { display: flex; flex-wrap: wrap; gap: var(--ltk-sp-1); margin-top: auto; }
.ltk-media__actions .ltk-action { padding: 0 var(--ltk-sp-2); }
.ltk-depot { display: flex; flex-direction: column; align-items: center; gap: var(--ltk-sp-1); padding: var(--ltk-sp-6) var(--ltk-sp-4);
  border: 2px dashed var(--ltk-neutral-500); border-radius: var(--ltk-r-12); background: var(--ltk-neutral-100); text-align: center; cursor: pointer; }
.ltk-depot:hover, .ltk-depot:focus-within, .ltk-depot.survol { border-color: var(--ltk-blue); background: var(--ltk-bg-blue-soft); }
.ltk-depot > i { font-size: var(--ltk-fs-24); color: var(--ltk-neutral-700); }
.ltk-depot input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ltk-detail { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: var(--ltk-sp-6); align-items: start; }
@media (max-width: 900px) { .ltk-detail { grid-template-columns: 1fr; } }
.ltk-media--reponse { border: 2px solid var(--ltk-success-text); }

/* ---------- Sélection multiple (EXO-P03, EXO-P06) ---------- */
.ltk-selection-page { display: grid; grid-template-columns: 1fr 320px; gap: var(--ltk-sp-6); align-items: start; }
@media (max-width: 1000px) { .ltk-selection-page { grid-template-columns: 1fr; } }
.ltk-selection { position: sticky; top: 80px; display: flex; flex-direction: column; gap: var(--ltk-sp-3); }
.ltk-selection ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ltk-sp-2); }
.ltk-selection__ligne { display: flex; align-items: center; gap: var(--ltk-sp-2); padding: var(--ltk-sp-2); border: 1px solid var(--ltk-neutral-100); border-radius: var(--ltk-r-8); }
.ltk-choix { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--ltk-sp-1); width: 100%; padding: var(--ltk-sp-3);
  background: var(--ltk-white); border: 2px solid var(--ltk-neutral-100); border-radius: var(--ltk-r-12); box-shadow: var(--ltk-shadow-1); color: var(--ltk-ink); text-align: center; }
.ltk-choix:hover { box-shadow: var(--ltk-shadow-2); }
.ltk-choix::before { content: ""; position: absolute; top: var(--ltk-sp-2); left: var(--ltk-sp-2); width: 24px; height: 24px; border: 2px solid var(--ltk-blue);
  border-radius: 4px; background: var(--ltk-white); }
.ltk-choix.choisi { border-color: var(--ltk-blue); }
.ltk-choix.choisi::before { content: "\2713"; color: var(--ltk-white); background: var(--ltk-blue); font-weight: 700; line-height: 20px; }
.ltk-choix:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.ltk-choix:disabled::before { border-color: var(--ltk-neutral-300); }
.ltk-choix__vignette { width: 72px; height: 72px; object-fit: contain; border-radius: var(--ltk-r-8); background: var(--ltk-neutral-100); }

/* ---------- Comptes (ADM-M01, ADM-P05) ---------- */
.ltk-choix-role { display: flex; align-items: center; gap: var(--ltk-sp-3); padding: var(--ltk-sp-3) var(--ltk-sp-4); border: 1px solid var(--ltk-neutral-500);
  border-radius: var(--ltk-r-8); font-weight: 400; cursor: pointer; }
.ltk-choix-role:has(input:checked) { border: 2px solid var(--ltk-blue); background: var(--ltk-bg-blue-soft); }
.ltk-mot-de-passe { font-family: var(--bs-font-monospace); font-size: var(--ltk-fs-24); text-align: center; padding: var(--ltk-sp-3);
  border: 1px dashed var(--ltk-neutral-500); border-radius: var(--ltk-r-8); background: var(--ltk-neutral-100); letter-spacing: .05em; }