:root {
  --bg: #eef1f7;
  --card: #ffffff;
  --border: #e2e8f0;
  --border-soft: #eef1f6;
  --text: #0f172a;
  --muted: #64748b;
  --muted-soft: #94a3b8;

  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #eef2ff;
  --primary-text: #4338ca;

  --success: #16a34a;
  --success-bg: #dcfce7;
  --error: #dc2626;
  --error-bg: #fee2e2;
  --warning: #b45309;
  --warning-bg: #fef3c7;

  --sidebar-bg: #111827;
  --sidebar-text: #9ca3af;
  --sidebar-text-active: #ffffff;
  --sidebar-border: #1f2937;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
}

* {
  box-sizing: border-box;
}

/* Garantit que l'attribut HTML "hidden" est toujours respecte, meme quand une regle plus bas
   (ex: .app-shell, .tab-content) fixe un display explicite (flex/block) sur le meme element. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
}
svg.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- Ecran de connexion / inscription ---------- */

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 15%, rgba(79, 70, 229, 0.16), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(79, 70, 229, 0.12), transparent 45%), var(--sidebar-bg);
}

.auth-card {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.auth-brand {
  background: linear-gradient(160deg, #4f46e5, #312e81);
  color: white;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.auth-brand h1 {
  margin: 6px 0 0;
  font-size: 1.6rem;
}
.auth-brand p {
  margin: 0;
  opacity: 0.85;
  line-height: 1.55;
  font-size: 0.95rem;
}

.auth-brand ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-brand li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  opacity: 0.9;
}
.auth-brand li svg {
  opacity: 0.9;
}

.auth-panel {
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tabs .tab-btn {
  flex: 1;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.auth-tabs .tab-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--primary);
  padding: 0;
  align-self: flex-start;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}
/* background: sinon la regle generale button:hover (fond bleu fonce) cachait le texte bleu. */
.link-btn:hover {
  background: none;
  color: var(--primary-dark);
  text-decoration: underline;
}

/* ---------- Coquille applicative: sidebar + topbar + contenu ---------- */

.app-shell {
  min-height: 100vh;
}

/* Le menu principal est un tiroir superpose (pas un panneau fixe dans la mise en page):
   il glisse par-dessus le contenu et se referme au clic sur un element ou en dehors. */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 248px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 8px;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  z-index: 50;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
}
.sidebar.open {
  transform: translateX(0);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 20px;
  color: white;
  font-weight: 700;
  font-size: 1.05rem;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--sidebar-text);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: white;
}
.nav-link.active {
  background: var(--primary);
  color: white;
  font-weight: 600;
}
.nav-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 999px;
}
.nav-link.active .nav-badge {
  background: rgba(255, 255, 255, 0.28);
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.user-chip:hover {
  background: rgba(255, 255, 255, 0.06);
}
.user-chip-edit {
  margin-left: auto;
  color: var(--sidebar-text);
  opacity: 0;
  flex-shrink: 0;
}
.user-chip:hover .user-chip-edit {
  opacity: 1;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  text-transform: uppercase;
  background-size: cover;
  background-position: center;
}
.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
}

.avatar-editor {
  display: flex;
  align-items: center;
  gap: 16px;
}
.avatar-editor-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.avatar-upload-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
#profile-avatar-remove {
  padding: 7px 14px;
  font-size: 0.82rem;
}

.login-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-history-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
}
.login-history-device {
  color: var(--text);
  font-weight: 500;
}
.login-history-meta {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}
.login-history-date {
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.danger-zone-title {
  color: var(--error);
}
.user-chip-email {
  font-size: 0.82rem;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip-role {
  font-size: 0.72rem;
  color: var(--sidebar-text);
}

.logout-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: transparent;
  color: var(--sidebar-text);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}
.logout-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: white;
}

.main-area {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 64px;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
}
.topbar h2 {
  margin: 0;
  font-size: 1.1rem;
}

.menu-toggle-btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 7px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -7px;
}
.menu-toggle-btn:hover {
  background: var(--bg);
}

.content {
  flex: 1;
  padding: 26px 28px 60px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

h2 {
  font-size: 1.1rem;
  margin: 28px 0 12px;
}
.content > .tab-content > h2:first-child {
  margin-top: 0;
}

.section-intro {
  color: var(--muted);
  font-size: 0.9rem;
  margin: -6px 0 20px;
}

/* ---------- Dashboard ---------- */

.dash-welcome {
  margin: 0 0 24px;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--sidebar-bg), #1e293b);
  box-shadow: var(--shadow-md);
}
.dash-welcome h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  color: white;
}
.dash-welcome p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-text);
}
.stat-icon.warn {
  background: var(--warning-bg);
  color: var(--warning);
}
.stat-icon.ok {
  background: var(--success-bg);
  color: var(--success);
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.stat-label {
  color: var(--muted);
  font-size: 0.85rem;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.quick-action:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.quick-action .stat-icon {
  background: var(--primary);
  color: white;
}
.quick-action-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.quick-action-sub {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 2px;
}

.dash-empty {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Formulaires et cartes (existant, restyle) ---------- */

form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: var(--shadow-sm);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--muted);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='file'],
select,
textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

textarea {
  resize: vertical;
}

button {
  align-self: flex-start;
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

button:hover {
  background: var(--primary-dark);
}
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.status {
  margin-left: 4px;
  font-size: 0.87rem;
}
.status.ok {
  color: var(--success);
}
.status.err {
  color: var(--error);
}

.progress-bar {
  margin-top: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.resource-cycle-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.resource-cycle-group + .resource-cycle-group {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.resource-cycle-title {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

/* Sans min-width:0, un flex-item garde la largeur de son contenu (titre long) et peut pousser
   .card-actions (les boutons) hors de la carte au lieu de les laisser passer a la ligne. */
.card > div:first-child {
  min-width: 0;
  flex: 1 1 220px;
}

.card-title {
  font-weight: 600;
}
.scope-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.scope-badge.scope-global {
  background: var(--primary-light);
  color: var(--primary-text);
}
.scope-badge.scope-personal {
  background: var(--bg);
  color: var(--muted);
}
.scope-badge.status-active {
  background: var(--success-bg);
  color: var(--success);
}
.scope-badge.status-disabled {
  background: var(--error-bg);
  color: var(--error);
}
.card-meta {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 3px;
}
.card-preview {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 8px;
}
.card-progress {
  font-size: 0.85rem;
  color: var(--primary);
  margin-top: 8px;
  font-style: italic;
}
.card-error {
  font-size: 0.85rem;
  color: var(--error);
  margin-top: 8px;
}
.card-warning {
  font-size: 0.8rem;
  color: var(--warning);
  margin-top: 8px;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.card-actions button {
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.card-actions button:hover {
  background: var(--border-soft);
}
.card-actions button.danger {
  background: var(--error-bg);
  color: var(--error);
  border-color: transparent;
}
.card-actions button.danger:hover {
  filter: brightness(0.96);
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal !important;
}
.checkbox-list label {
  font-weight: normal;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.9rem;
}
.hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 4px 0 0;
}
.hint code {
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 0.9em;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
  align-items: center;
}
.filter-bar input[type='search'] {
  flex: 1 1 100%;
}
.filter-bar select {
  flex: 1 1 auto;
  min-width: 0;
}
.filter-bar .btn-secondary {
  flex: 1 1 100%;
  text-decoration: none;
  text-align: center;
}

/* ---------- Administration/Utilisateurs: barre d'onglets horizontale + un panneau actif ---------- */

.admin-tabs,
.resource-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.admin-tabs .tab-btn,
.resource-tabs .tab-btn {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-tabs .tab-btn.active,
.resource-tabs .tab-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.subtab-panel {
  display: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.subtab-panel.active {
  display: block;
}
.subtab-panel h2 {
  margin-top: 0;
}

.scroll-panel {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 2px;
}

@media (max-width: 860px) {
  .scroll-panel {
    max-height: none;
    overflow-y: visible;
  }
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.stat-row .scope-badge {
  margin-left: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.stat-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.stat-tile-label {
  font-size: 0.78rem;
  color: var(--muted);
}
.stat-tile-value {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.stat-tile-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------- Tableau de bord general (administrateurs) ---------- */

.stats-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}
.stats-filters .field {
  flex: 1 1 150px;
  min-width: 0;
}
.stats-filters button {
  flex: 0 0 auto;
}
#stats-content.is-loading {
  opacity: 0.55;
  transition: opacity 0.15s;
}
.stats-period-label {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--muted);
}
.stats-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-top: 18px;
}
.stats-section h3 {
  margin: 0;
  font-size: 1.05rem;
}
.stats-section h4 {
  margin: 20px 0 8px;
  font-size: 0.9rem;
  color: var(--muted);
}
.stats-section .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (max-width: 480px) {
  .stats-section {
    padding: 14px;
  }
  .stats-section .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .stats-section .stat-tile {
    padding: 10px 12px;
  }
  .stats-section .stat-tile-value {
    font-size: 1.1rem;
  }
}
.stats-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 24px;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.stats-table td {
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
}
.stats-table td:last-child {
  text-align: right;
  font-weight: 600;
  padding-left: 12px;
}
.bar-chart {
  display: block;
  width: 100%;
  height: auto;
}
.bar-chart .chart-bar {
  fill: var(--primary);
}
.bar-chart .chart-point.active .chart-bar,
.bar-chart .chart-point:hover .chart-bar {
  fill: var(--primary-dark);
}
.bar-chart .chart-hit {
  fill: transparent;
  cursor: pointer;
}
.bar-chart .chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}
.bar-chart .chart-axis {
  fill: var(--muted);
  font-size: 13px;
}
.chart-readout {
  margin: 6px 0 0;
  min-height: 1.4em;
}
.chart-table summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--primary-text);
  margin-top: 4px;
}
.chart-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: 6px;
}
.chart-table td {
  padding: 5px 0;
  border-bottom: 1px solid var(--border-soft);
}
.chart-table td:last-child {
  text-align: right;
}

.audit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.audit-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.audit-item:last-child {
  border-bottom: none;
}
.audit-item-date {
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.field-autre {
  display: none;
  margin-top: 8px;
}
.field-autre.visible {
  display: block;
}

#generated-result,
#course-detail,
#explain-result {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 18px;
  line-height: 1.6;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
}

#explain-result {
  white-space: pre-wrap;
}

/* ---------- Vue d'un cours: barre d'actions + contenu editable ---------- */

.course-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.course-toolbar button,
.course-toolbar a {
  padding: 8px 14px;
  font-size: 0.85rem;
}

.course-close-btn {
  margin-left: auto;
  background: none;
  color: var(--muted);
  padding: 8px;
  align-self: flex-start;
}
.course-close-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.course-edit-textarea {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Fiche affichee "comme le PDF" (voir renderCourseDocHtml dans app.js): page blanche, titres,
   tableaux et encadre de regle aux memes couleurs que l'export PDF. */
.course-doc {
  background: #fff;
  color: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 28px 32px;
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.course-doc p {
  margin: 0 0 6px;
}
.course-doc-title {
  font-size: 1.35rem;
  margin: 0 0 2px;
}
.course-doc-meta {
  color: #555;
  margin-bottom: 18px !important;
}
.course-doc h3,
.course-doc h4,
.course-doc h5 {
  margin: 18px 0 6px;
  line-height: 1.3;
}
.course-doc h3 {
  font-size: 1.2rem;
}
.course-doc h4 {
  font-size: 1.08rem;
}
.course-doc h5 {
  font-size: 1rem;
}
.course-doc ul {
  margin: 4px 0 10px;
  padding-left: 22px;
}
.course-doc li {
  margin-bottom: 3px;
}
.course-doc-table {
  overflow-x: auto;
  margin: 8px 0 12px;
}
.course-doc table {
  border-collapse: collapse;
  min-width: 60%;
}
.course-doc th,
.course-doc td {
  border: 1px solid #d0d7e2;
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  /* jamais "2 / 5 / 0 / 0" sur 4 lignes: le tableau defile de cote sur telephone */
  overflow-wrap: normal;
  min-width: 3.5em;
}
.course-doc th {
  background: #eef2ff;
}
.course-doc hr {
  border: none;
  border-top: 1px solid #c7d2fe;
  margin: 18px 0;
}
.course-doc-quote {
  background: #eef2ff;
  border-left: 4px solid #4f46e5;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 8px 0 12px;
}
.course-doc-quote p:last-child {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .course-doc {
    padding: 18px 16px;
  }
}

.course-plot-img {
  display: block;
  max-width: 100%;
  width: 380px;
  height: auto;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.course-edit-textarea {
  width: 100%;
  min-height: 400px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.course-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.course-edit-status.err {
  color: var(--error);
}
.course-edit-status.ok {
  color: var(--success);
}

/* ---------- Impression ---------- */

.print-only {
  display: none;
}

@media print {
  body > *:not(#print-target) {
    display: none !important;
  }
  #print-target {
    display: block !important;
    padding: 24px;
  }
  #print-target h1 {
    font-size: 1.4rem;
    margin: 0 0 4px;
  }
  #print-target .print-meta {
    color: #555;
    margin: 0 0 20px;
  }
  #print-target .course-doc {
    border: none;
    box-shadow: none;
    padding: 0;
  }
}

/* ---------- Modales (profil, confirmation de deconnexion) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  background: var(--card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.modal.modal-sm {
  max-width: 400px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  padding: 5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-self: auto;
}
.modal-close:hover {
  background: var(--bg);
  color: var(--text);
}

.modal-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-body form {
  border: none;
  padding: 0;
  box-shadow: none;
  gap: 14px;
}
.modal-body h4 {
  margin: 4px 0 2px;
  font-size: 0.95rem;
}
.modal-body p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.modal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--border-soft);
}

.modal-actions button.danger {
  background: var(--error);
  color: white;
}
.modal-actions button.danger:hover {
  background: #b91c1c;
}

#generated-result:empty,
#course-detail:empty,
#explain-result:empty {
  display: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .auth-card {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .auth-brand {
    padding: 30px 28px;
  }

  .content {
    padding: 20px 16px 48px;
  }
}

/* Desktop / tablette large: le menu reste fixe et visible en permanence (pas un tiroir).
   Le comportement "tiroir qui se referme au clic" (voir app.js: openSidebar/closeSidebar)
   ne s'applique qu'en dessous de 861px, ou le bouton hamburger reste seul visible ici. */
@media (min-width: 861px) {
  .app-shell {
    display: flex;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: none !important;
    box-shadow: none;
    border-right: 1px solid var(--sidebar-border);
  }

  .sidebar-backdrop {
    display: none;
  }
  .menu-toggle-btn {
    display: none;
  }

  .main-area {
    flex: 1;
  }
}

.course-figure-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--error);
  color: var(--error);
}
.course-figure-banner[hidden] {
  display: none;
}

/* Champ de mot de passe avec le petit oeil (afficher/masquer). */
.password-wrap {
  position: relative;
  display: flex;
}
.password-wrap input {
  flex: 1;
  min-width: 0;
  padding-right: 46px;
}
.password-wrap .password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: auto;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
}
.password-wrap .password-toggle:hover {
  background: none;
  color: var(--primary);
}
.password-wrap .password-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -4px;
  border-radius: var(--radius-sm);
}

/* Fenetre de partage d'un cours: WhatsApp en premier. */
.share-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 14px;
}
.share-options .share-option {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
}
.share-options .share-option:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.share-options .share-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}
.share-options .share-whatsapp:hover {
  background: #1ebe5b;
  border-color: #1ebe5b;
}
#share-email-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
#share-email-form[hidden] {
  display: none;
}

.share-options .share-option:disabled {
  opacity: 0.55;
  cursor: wait;
}
.share-format {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--muted);
}
.share-format .share-format-btn {
  align-self: auto;
  min-height: 36px;
  padding: 6px 16px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
}
.share-format .share-format-btn:hover {
  background: var(--primary-light);
}
.share-format .share-format-btn[aria-pressed='true'] {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.share-whatsapp-open {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 0 12px;
  border-radius: var(--radius-sm);
  background: #25d366;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}
.share-whatsapp-open[hidden] {
  display: none;
}

/* ---------- Encadres: meme identite que la page d'accueil (landing.html, .lp-card) ---------- */
/* Bordure violette claire, ombre douce teintee, et relief au survol. Les petits encadres
   cliquables ou lisibles d'un coup d'oeil (cartes, chiffres, raccourcis) se soulevent; les grands
   blocs (formulaires, panneaux, cours) changent seulement de bordure, pour ne pas bouger sous la
   souris pendant la saisie. Les formulaires de connexion et des fenetres ne sont pas concernes. */
:root {
  --card-border: #c7d2fe;
  --card-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(49, 46, 129, 0.08);
  --card-shadow-hover: 0 2px 4px rgba(17, 24, 39, 0.05), 0 16px 32px rgba(49, 46, 129, 0.14);
}

body {
  background:
    radial-gradient(circle at 100% 0%, rgba(79, 70, 229, 0.07), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(79, 70, 229, 0.05), transparent 45%), var(--bg);
  background-attachment: fixed;
}

.stat-card,
.quick-action,
.card,
.stat-tile,
form:not(.auth-form),
.subtab-panel,
.stats-section,
#course-detail,
#explain-result {
  border: 2px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.stat-card:hover,
.quick-action:hover,
.card:hover,
.stat-tile:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

form:not(.auth-form):hover,
form:not(.auth-form):focus-within,
.subtab-panel:hover,
.stats-section:hover,
#course-detail:hover,
#explain-result:hover {
  border-color: var(--primary);
  box-shadow: var(--card-shadow-hover);
}

/* Un formulaire deja place dans un panneau encadre ne redessine pas un 2e cadre. */
.subtab-panel form,
.modal-body form {
  border: none;
  box-shadow: none;
  padding: 0;
}
.card-actions button:hover {
  box-shadow: none !important;
}
.subtab-panel form:hover,
.subtab-panel form:focus-within,
.modal-body form:hover,
.modal-body form:focus-within {
  box-shadow: none;
}

.dash-empty {
  border: 2px dashed var(--card-border);
}

/* Les raccourcis du tableau de bord sont des boutons: sans ceci ils heritent du texte blanc et du fond
   violet au survol des boutons pleins (titre invisible sur fond blanc). */
.quick-action,
.quick-action:hover {
  background: var(--card);
  color: var(--text);
}

.stat-icon {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
}
.quick-action .stat-icon {
  background: linear-gradient(135deg, #6366f1, #4338ca);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.dash-welcome {
  background: linear-gradient(135deg, #4f46e5, #312e81);
  box-shadow: 0 16px 40px rgba(49, 46, 129, 0.22);
}

/* Boutons principaux: leger relief au survol, comme les boutons de la page d'accueil. */
button {
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
/* Seulement les boutons pleins violets: les boutons discrets (onglets, fermer, menu, actions des
   cartes, boutons rouges...) gardent leur survol propre. */
button:not(:disabled):not(.btn-secondary):not(.tab-btn):not(.quick-action):not(.link-btn):not(.nav-link):not(.menu-toggle-btn):not(
    .course-close-btn
  ):not(.modal-close):not(.password-toggle):not(.share-format-btn):not(.danger):hover {
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .quick-action,
  .card,
  .stat-tile,
  form,
  .subtab-panel,
  .stats-section,
  button {
    transition: none;
  }
  .stat-card:hover,
  .quick-action:hover,
  .card:hover,
  .stat-tile:hover {
    transform: none;
  }
}

/* ---------- Lisibilite: textes plus grands et plus contrastes (personnes qui voient mal) ---------- */
/* Toutes les tailles de texte sont en rem: augmenter la taille de base agrandit tout le texte de
   l'application d'un coup (16px -> 17px), en respectant le reglage de taille du navigateur. */
html {
  font-size: 106.25%;
}

/* Textes secondaires plus fonces: gris #475569 = contraste 7,6:1 sur blanc (au lieu de 4,8:1),
   menu lateral #e5e7eb sur fond sombre = 14:1 (au lieu de 7:1). */
:root {
  --muted: #475569;
  --muted-soft: #64748b;
  --sidebar-text: #e5e7eb;
}

body {
  line-height: 1.5;
}

/* Les plus petits textes (pastilles, mentions sous les chiffres) restent lisibles. */
.nav-badge,
.user-chip-role,
.scope-badge {
  font-size: 0.8rem;
}
.login-history-meta,
.stat-tile-label,
.stat-tile-sub {
  font-size: 0.86rem;
}

.dash-welcome p {
  color: rgba(255, 255, 255, 0.92);
}

.field label {
  font-size: 0.9rem;
  color: var(--text);
}

::placeholder {
  color: #64748b;
  opacity: 1;
}

/* Choix du niveau dans Explique-moi: meme espacement que les autres champs du formulaire. */
#explain-level-block:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ---------- Plan de la journee (primaire): une matiere supplementaire par encadre ---------- */
.day-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.day-lesson {
  border: 2px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.day-lesson legend {
  font-weight: 700;
  padding: 0 6px;
}
.day-lesson-remove {
  align-self: flex-start;
}

/* ---------- Ecran de connexion sur telephone ----------
   Une colonne "1fr" ne descend pas sous la largeur naturelle de son contenu (les champs du
   formulaire, ~365px) : sur un Android de 320 a 390px, le cadre coupait alors le texte et les
   champs a droite. minmax(0, 1fr) + min-width: 0 laissent le cadre suivre la largeur de l'ecran. */
.auth-card {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.auth-card > * {
  min-width: 0;
}
input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='file'],
select,
textarea {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 860px) {
  .auth-card {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .auth-screen {
    padding: 12px;
  }
  .auth-brand {
    padding: 24px 20px;
  }
  .auth-panel {
    padding: 24px 18px;
  }
}