:root {
      --bg: #FAFAF7;
      --header: #2C1810;
      --primary: #C8902A;
      --primary-light: #FDF3E0;
      --border: #E0D5C5;
      --text: #1A1A1A;
      --muted: #888;
      --white: #FFFFFF;
      --TB: #16A34A; --TB-bg: #F0FDF4;
      --B:  #2563EB; --B-bg:  #EFF6FF;
      --EC: #F97316; --EC-bg: #FFF7ED;
      --I:  #DC2626; --I-bg:  #FEF2F2;
      --radius: 12px;
      --shadow: 0 2px 10px rgba(0,0,0,0.08);

      /* ── DESIGN SYSTEM MITRONÉO v1 ─────────── */
      /* Typographie */
      --text-xs:   0.65rem;  --text-sm:   0.75rem;  --text-ui:   0.80rem;
      --text-base: 0.88rem;  --text-md:   1rem;     --text-lg:   1.2rem;
      --text-xl:   1.4rem;   --text-hero: 1.8rem;
      /* Gris sémantiques */
      --gray-100: #F5F3EF;  --gray-200: #EDE8E0;
      --gray-400: #B8B0A4;  --gray-600: #7A7269;  --gray-800: #3D3428;
      /* Fonds secondaires */
      --bg-secondary: #F2EDE4;
      --bg-elevated:  #FFFFFF;
      /* Alias couleurs sémantiques */
      --danger:  #DC2626;  --success: #16A34A;
      --warning: #F97316;  --info:    #2563EB;
      /* Boutons */
      --btn-primary-bg: #2f241b;
    }

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0; padding: 0;
      -webkit-tap-highlight-color: transparent; /* supprime le flash bleu natif iOS/Android */
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── TACTILE iOS — réactivité immédiate (supprime délai 300ms) ── */
    button, a, input, textarea, select, summary,
    [role="button"], [role="tab"], [role="option"],
    label[for], .cursor-pointer {
      touch-action: manipulation;
    }

    /* ── HEADER ─────────────────────────────────── */
    header {
      background: var(--header);
      color: white;
      padding: 12px 16px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      gap: 8px;
    }
    .header-ctx { display: flex; flex-direction: column; }
    .header-sub { font-size: 0.68rem; opacity: 0.6; margin-bottom: 1px; }
    header h1 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }

    .header-right { display: flex; align-items: center; gap: 6px; }
    .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #4CAF50; flex-shrink: 0; }
    .sync-dot.syncing { background: #FF9800; animation: blink 0.8s infinite; }
    .sync-dot.error   { background: #E53935; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

    .btn-icon {
      background: rgba(255,255,255,0.15);
      border: none;
      color: white;
      height: 32px;
      padding: 0 10px;
      border-radius: var(--radius-md);
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      white-space: nowrap;
    }
    .btn-icon.icon-only { width: 32px; padding: 0; font-size: 1rem; }

    /* ── NAV ─────────────────────────────────────── */
    nav {
      display: flex;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    nav::-webkit-scrollbar { display: none; }
    nav button {
      flex: 1;
      min-width: 72px;
      padding: 11px 6px;
      border: none;
      background: none;
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 500;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      white-space: nowrap;
      transition: color .15s;
    }
    nav button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }

    /* ── MAIN ────────────────────────────────────── */
    main { flex: 1; overflow: clip; min-height: 0; }

    .screen { display: none; padding: 14px 16px; }
    .screen.active { display: block; overflow-y: auto; height: 100%; scrollbar-gutter: stable; }

    /* ── HOME SCREEN ─────────────────────────────── */
    #home-screen {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100dvh;
      padding: 24px 20px;
      background: linear-gradient(150deg, #0f0804 0%, #160a04 55%, #1a0c04 100%);
      position: relative;
      overflow: hidden;
    }

    /* ── Couche scènes : conteneur + photo + overlay + glows ── */
    #home-scene-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    /* Images de fond — deux couches pour crossfade sans flash noir */
    .hs-img-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 2.8s ease;
      animation: hs-kenburns 38s ease-in-out infinite alternate;
      filter: blur(0.5px);          /* légère douceur analogique */
      will-change: transform, opacity;
    }
    #hs-img-b { animation-delay: -19s; } /* offset demi-cycle pour Ken Burns désynchronisé */
    @keyframes hs-kenburns {
      0%   { transform: scale(1.06) translate(0%,    0%   ); }
      100% { transform: scale(1.00) translate(-1.5%, 0.8%); }
    }
    /* Voile sombre — lisibilité du texte */
    #hs-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.52);
      pointer-events: none;
      transition: background 1.5s ease;
    }
    .hs-g {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      will-change: transform, opacity;
    }
    /* Animations des poches de lumière */
    @keyframes hs-breathe {
      0%, 100% { transform: scale(1)    translateY(0);    opacity: .80; }
      50%      { transform: scale(1.28) translateY(-18px); opacity: 1;  }
    }
    @keyframes hs-drift {
      0%, 100% { transform: translate(0,   0  ); }
      33%      { transform: translate(22px,-16px); }
      66%      { transform: translate(-12px, 20px); }
    }
    @keyframes hs-flicker {
      0%, 100% { opacity: .90; transform: scale(1);    }
      15%      { opacity: .68; transform: scale(1.06); }
      32%      { opacity: 1;   transform: scale(.96);  }
      58%      { opacity: .82; transform: scale(1.09); }
      80%      { opacity: .97; transform: scale(1.02); }
    }
    @keyframes hs-rise {
      0%, 100% { transform: translateY(0)   scale(1);    opacity: .68; }
      50%      { transform: translateY(-52px) scale(1.22); opacity: 1;  }
    }

    /* ── Grain film ── */
    #home-grain {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: .030;
      background-repeat: repeat;
      mix-blend-mode: overlay;
    }

    /* ── Vignette cinématique ── */
    #home-vignette {
      position: absolute;
      inset: 0;
      z-index: 3;
      background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(0,0,0,.52) 100%);
      pointer-events: none;
    }

    /* ── Contenu (logo, titre, cartes) ── */
    #home-content {
      position: relative;
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    @keyframes hs-wordmark-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .home-wordmark {
      font-size: 2.8rem; font-weight: 200; letter-spacing: 0.22em;
      color: rgba(255,255,255,0.9); margin-bottom: 28px;
      animation: hs-wordmark-in 0.9s cubic-bezier(.22,.68,0,1.2) both;
      text-transform: uppercase;
    }
    .wm-accent { color: var(--primary); font-weight: 400; }
    .home-slogan { font-size: .55rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(200,145,42,.85); margin-bottom: 48px; text-align: center; font-weight: 400; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
    /* Sidebar logo — glow au hover uniquement */
    #desktop-sidebar .ds-header img {
      transition: box-shadow .5s ease;
    }
    #desktop-sidebar .ds-header:hover img {
      box-shadow: 0 0 10px rgba(180,60,20,.3);
    }
    .ds-logo-accent { color: var(--primary); font-weight: 400; }
    .home-title { display: none; }
    .home-sub { color: rgba(255,255,255,.55); font-size: 0.82rem; margin-bottom: 36px; text-align: center; }
    .home-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 540px; }
    .home-card {
      flex: 1; min-width: 220px; max-width: 260px;
      background: rgba(255,255,255,.07);
      border: 1.5px solid rgba(255,255,255,.15);
      border-radius: var(--radius-xl);
      padding: 28px 20px 24px;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      cursor: pointer; transition: background .15s, transform .12s;
      text-align: center;
    }
    .home-card:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
    .home-card:active { transform: translateY(0); }
    .home-card-icon { font-size: 2.8rem; line-height: 1; }
    .home-card-title { color: white; font-size: 1.05rem; font-weight: 800; }
    .home-card-desc { color: rgba(255,255,255,.5); font-size: 0.73rem; line-height: 1.5; }
    .home-card.card-recettes { border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.12); }
    .home-card.card-recettes:hover { background: rgba(124,58,237,.22); }

    /* ── SETUP / CONTEXT SCREENS ─────────────────── */
    #setup-screen, #context-screen {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100dvh;
      padding: 24px 18px;
      background: var(--bg);
    }
    .setup-logo { font-size: 3rem; margin-bottom: 8px; text-align: center; }
    .setup-card {
      background: var(--white);
      border-radius: var(--radius-xl);
      padding: 28px;
      box-shadow: var(--shadow-md);
      width: 100%;
      max-width: 460px;
    }
    .setup-card h2 { font-size: 1.2rem; margin-bottom: 4px; color: var(--header); }
    .setup-card .setup-desc { color: var(--muted); font-size: 0.85rem; margin-bottom: 20px; line-height: 1.6; }

    .info-box {
      background: #FFF8E1;
      border-left: 4px solid #FFC107;
      border-radius: var(--radius-sm);
      padding: 12px;
      font-size: 0.82rem;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; color: var(--header); }
    input, textarea, select {
      width: 100%;
      padding: 9px 12px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-md);
      font-size: 0.9rem;
      margin-bottom: 14px;
      font-family: inherit;
      background: var(--white);
      transition: border-color var(--dur-sm) var(--ease-out);
      color: var(--text);
    }
    input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: var(--glow-subtle); }
    textarea { resize: vertical; }

    /* Context screen diplome grid */
    .diploma-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      margin-bottom: 14px;
    }
    .diploma-card {
      background: var(--bg);
      border: 2px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 14px 10px;
      text-align: center;
      cursor: pointer;
      transition: var(--transition-fast);
      user-select: none;
    }
    .diploma-card:hover { border-color: var(--primary); }
    .diploma-card.selected { border-color: var(--primary); background: var(--primary-light); }
    .diploma-card .d-icon { font-size: 1.7rem; margin-bottom: 4px; }
    .diploma-card .d-name { font-size: 0.72rem; font-weight: 700; color: var(--header); line-height: 1.3; }
    .diploma-card .d-sub  { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }

    #annee-block { margin-bottom: 4px; }

    /* ── BUTTONS ─────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 18px;
      border: none;
      border-radius: var(--radius-md);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      text-decoration: none;
    }
    .btn:active { opacity: 0.82; transform: scale(0.98); }
    .btn-primary {
      background: var(--btn-primary-bg);
      color: white;
      width: 100%;
      border-radius: 999px;
      padding: 13px 22px;
      font-weight: 700;
      box-shadow: var(--shadow-warm);
      letter-spacing: -0.01em;
    }
    .btn-sm { padding: 7px 12px; font-size: 0.78rem; border-radius: var(--radius-md); }
    .btn-outline { background: var(--white); border: 1.5px solid var(--border); color: var(--text);; transition: var(--transition-fast); }
    .btn-danger { background: var(--I); color: white; border: none; }
    .btn-danger-outline { background: var(--white); border: 1.5px solid var(--I); color: var(--I); }

    #config-error { color: var(--I); font-size: 0.82rem; margin-top: 10px; display: none; }

    /* ── GROUPE TABS ─────────────────────────────── */
    .gtabs {
      display: flex;
      gap: 7px;
      margin-bottom: 14px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .gtabs::-webkit-scrollbar { display: none; }
    .gtab {
      padding: 8px 16px;
      border-radius: var(--radius-xl);
      border: 2px solid var(--border);
      background: var(--white);
      font-weight: 700;
      font-size: 0.82rem;
      cursor: pointer;
      white-space: nowrap;
      color: var(--muted);
      transition: var(--transition-fast);
      flex-shrink: 0;
    }
    .gtab.active { background: var(--primary); color: white; border-color: var(--primary); }
    .gtab-full  { display: inline; }   /* label complet — visible desktop */
    .gtab-short { display: none;   }   /* label court  — visible mobile  */

    /* ── CARD ────────────────────────────────────── */
    .card {
      background: var(--white);
      border-radius: var(--radius);
      padding: 14px 16px;
      box-shadow: var(--shadow);
      margin-bottom: 12px;
    }
    .card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .card-title strong { font-size: 0.9rem; }

    /* ── SÉANCES GRID ────────────────────────────── */
    .seances-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 7px;
    }
    @media (min-width: 500px) { .seances-grid { grid-template-columns: repeat(10, 1fr); } }

    .seance-btn {
      padding: 10px 2px 8px;
      border: 2px solid var(--border);
      border-radius: 9px;
      background: var(--white);
      text-align: center;
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--muted);
      transition: var(--transition-fast);
    }
    .seance-btn:hover { border-color: var(--primary); color: var(--primary); }
    .seance-btn.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
    .seance-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #DDD;
      margin: 4px auto 0;
    }
    .seance-btn.has-data .seance-dot { background: var(--TB); }
    .seance-btn.partial .seance-dot  { background: var(--EC); }

    /* ── PRODUCTIONS ─────────────────────────────── */
    .prod-list { display: flex; flex-direction: column; gap: 6px; }
    .eval-acc { border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:6px;overflow:hidden }
    .eval-acc > summary { list-style:none;padding:9px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;background:var(--bg);-webkit-font-smoothing:antialiased;transform:translateZ(0) }
    .eval-acc > summary::-webkit-details-marker { display:none }
    .eval-acc[open] > summary { background:#F0F4FF }
    .eval-acc > summary strong { transform:translateZ(0);display:block }
    .eval-arr { display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#E2E8F0;border-radius:50%;font-size:0.7rem;color:var(--muted);flex-shrink:0;will-change:transform }
    .eval-acc[open] .eval-arr { transform:rotate(90deg) }
    .prod-item {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg);
      padding: 9px 13px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
    }
    .prod-item .prod-num {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--primary);
      background: var(--primary-light);
      padding: 2px 7px;
      border-radius: 10px;
    }
    .prod-item span { flex: 1; font-size: 0.88rem; font-weight: 500; }

    .no-items { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 14px; }

    /* ── STUDENT LIST ────────────────────────────── */
    .student-list { display: flex; flex-direction: column; gap: 7px; }
    .student-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 15px;
      background: var(--white);
      border-radius: 10px;
      border: 2px solid var(--border);
      cursor: pointer;
      transition: border-color var(--dur-sm) var(--ease-out);
      gap: 10px;
    }
    .student-row:hover, .student-row:active { border-color: var(--primary); }
    .student-name { font-weight: 600; font-size: 0.9rem; }
    .student-score {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--primary);
      flex-shrink: 0;
    }
    .student-score.high { color: var(--TB); }
    .student-score.low  { color: var(--I); }
    .student-score.none { color: #CCC; font-size: 0.9rem; font-weight: 400; }

    /* ── Élève absent dans la liste évaluation ── */
    .student-row.row-absent { background: #f3f4f6; cursor: default; opacity: .72; }
    .student-row.row-absent:hover,
    .student-row.row-absent:active { border-color: var(--border); }

    /* ── Badge "À évaluer" ── */
    .eval-todo-pill {
      display: inline-block; padding: 2px 8px; border-radius: var(--radius-xl);
      background: rgba(245,158,11,0.10); color: #B45309;
      font-size: 0.64rem; font-weight: 700;
      border: 1px solid rgba(245,158,11,0.22); white-space: nowrap;
    }

    /* ── Barre de progression séance ── */
    .eval-progress {
      display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
      font-size: 0.72rem; font-weight: 600; color: var(--muted);
      padding: 4px 0 10px;
    }
    .eval-progress:empty { display: none; }
    .eval-progress-item { display: flex; align-items: center; gap: 5px; }
    .eval-progress-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .eval-progress-dot--ok      { background: #10B981; }
    .eval-progress-dot--neutral { background: #6B7280; }
    .eval-progress-dot--absent  { background: #DC2626; }
    .eval-progress-sep { color: rgba(47,36,27,0.18); }

    /* ── Aménagements dans le panel évaluation ── */
    .panel-amena-row {
      display: flex; flex-wrap: wrap; gap: 5px;
      margin: 6px 0 0;
    }
    .panel-amena-row:empty { margin: 0; }

    /* ── Indicateur "non enregistré" dans le panel ──── */
    .eval-dirty-dot {
      display: none;
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--primary);
      box-shadow: 0 0 0 2.5px rgba(200,144,42,0.22);
      flex-shrink: 0; align-self: center;
      animation: dirtyPulse 1.8s ease-in-out infinite;
    }
    .eval-dirty-dot.visible { display: inline-block; }
    @keyframes dirtyPulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:0.5; transform:scale(0.80); }
    }

    /* ── Indicateur de sauvegarde automatique ────────── */
    .eval-save-status {
      font-size: 0.67rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      opacity: 0;
      transition: opacity 0.25s ease, color 0.25s ease;
      pointer-events: none;
      white-space: nowrap;
    }
    .eval-save-status:not(:empty) { opacity: 1; }
    .eval-save-status.ess-modified { color: var(--primary); }
    .eval-save-status.ess-saving   { color: var(--muted);   }
    .eval-save-status.ess-saved    { color: var(--er-green); }
    .eval-save-status.ess-offline  { color: var(--primary); }

    /* ── Panel évaluation — header sticky ───────────── */
    /* Override du padding du sheet pour permettre le sticky */
    .eval-panel-sheet { padding: 0 !important; }
    .eval-sticky-header {
      position: sticky; top: 0; z-index: 20;
      background: rgba(253,250,245,0.97);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(120,72,32,0.10);
      padding: 16px 20px 12px;
    }
    .eval-sh-main {
      display: flex; align-items: center; gap: 10px;
    }
    .eval-sh-info { flex: 1; min-width: 0; }
    .eval-sh-score { text-align: right; flex-shrink: 0; }
    .eval-panel-body { padding: 16px 20px 20px; }
    /* Boutons ← → navigation élève */
    .eval-nav-btn {
      width: 36px; height: 36px; border-radius: 50%;
      border: 1.5px solid rgba(120,72,32,0.22);
      background: transparent; cursor: pointer;
      font-size: 1.05rem; color: rgba(47,36,27,0.50);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: all 150ms cubic-bezier(0.4,0,0.2,1);
      line-height: 1;
    }
    .eval-nav-btn:hover:not(:disabled) {
      background: rgba(200,144,42,0.10); color: #5a3010;
      border-color: rgba(200,144,42,0.35); transform: translateY(-1px);
    }
    .eval-nav-btn:active:not(:disabled) {
      transform: scale(0.90); transition-duration: 0.08s;
    }
    .eval-nav-btn:disabled { opacity: 0.22; cursor: default; }

    /* ── Barre de contexte séance/groupe (Évaluer / Présence / Résultats) ── */
    .seance-ctx-bar {
      display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
      padding: 6px 14px;
      background: rgba(200,144,42,0.07);
      border: 1px solid rgba(200,144,42,0.16);
      border-radius: 10px;
      font-size: 0.75rem; font-weight: 600; color: rgba(47,36,27,0.60);
      margin-bottom: 10px;
    }
    .seance-ctx-bar:empty { display: none; }
    .seance-ctx-sep { color: rgba(47,36,27,0.22); font-weight: 400; }
    .seance-ctx-strong { color: rgba(47,36,27,0.82); font-weight: 700; }

    /* ── EVAL PANEL ──────────────────────────────── */
    .panel-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--overlay-bg);
      z-index: 200;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .panel-overlay.open { display: flex; align-items: flex-end; }
    @media (min-width: 700px) { .panel-overlay.open { align-items: center; } }

    .panel-sheet {
      background: var(--bg);
      border-radius: var(--modal-radius) var(--modal-radius) 0 0;
      width: 100%;
      max-height: 92dvh;
      overflow-y: auto;
      padding: 20px;
      -webkit-overflow-scrolling: touch;
    }
    @media (min-width: 700px) {
      .panel-sheet {
        border-radius: var(--modal-radius);
        max-width: 580px;
        margin: auto;
        max-height: 85dvh;
      }
    }

    .panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 20px;
      gap: 12px;
    }
    .panel-student { font-size: 1.15rem; font-weight: 800; }
    .panel-context { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
    .panel-score-box {
      background: var(--primary);
      color: white;
      font-size: 1.6rem;
      font-weight: 800;
      padding: 8px 16px;
      border-radius: var(--radius-lg);
      text-align: center;
      flex-shrink: 0;
      line-height: 1;
    }
    .panel-score-box small { font-size: 0.6rem; opacity: 0.75; display: block; }

    /* ── GRADE SECTION ───────────────────────────── */
    .section-title {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 12px;
    }
    .crit-block { margin-bottom: 12px; }
    .crit-label {
      font-size: 0.88rem;
      font-weight: 700;
      margin-bottom: 3px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .crit-desc { font-size: 0.73rem; color: var(--muted); margin-bottom: 7px; line-height: 1.4; }

    /* ── PHASE A — CONTEXTE PÉDAGOGIQUE ─────────────── */
    /* Bandeau contextuel en tête du panel évaluation    */
    .eval-ped-ctx {
      background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%);
      color: white;
      border-radius: 10px;
      padding: 11px 14px;
      margin-bottom: 14px;
    }
    .eval-ped-ctx-row1 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 5px;
      flex-wrap: wrap;
    }
    .eval-ped-ctx-periode {
      background: rgba(255,255,255,.18);
      border-radius: var(--radius-xl);
      padding: 2px 10px;
      font-size: 0.68rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .eval-ped-ctx-title {
      font-size: 0.78rem;
      font-weight: 700;
    }
    .eval-ped-ctx-source {
      font-size: 0.63rem;
      opacity: .65;
      margin-left: auto;
      white-space: nowrap;
    }
    .eval-ped-ctx-codes {
      font-size: 0.7rem;
      opacity: .82;
      font-weight: 600;
      letter-spacing: .02em;
    }
    /* Compétence ciblée cette séance */
    .crit-block--targeted {
      background: #F0F4FF;
      border: 1.5px solid #BFDBFE;
      border-left: 3px solid #1D4ED8;
      border-radius: 9px;
      padding: 10px 12px;
      margin-bottom: 10px;
    }
    /* Autres compétences (toujours accessibles, visuellement secondaires) */
    .crit-block--other {
      margin-bottom: 12px;
    }
    /* Badge "🎯 Ciblée" */
    .crit-targeted-badge {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      background: #1D4ED8;
      color: white;
      font-size: 0.62rem;
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 10px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* Badge niveau attendu */
    .niv-attendu-badge {
      display: inline-flex;
      align-items: center;
      font-size: 0.63rem;
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 10px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* Séparateur "Autres compétences" */
    .trans-other-sep {
      font-size: 0.64rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .07em;
      text-align: center;
      margin: 10px 0 10px;
      opacity: .6;
    }
    /* Bouton toggle "Voir toutes les compétences" */
    .eval-autres-btn {
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.35);
      color: rgba(255,255,255,.9);
      border-radius: var(--radius-sm);
      padding: 3px 11px;
      font-size: 0.66rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      transition: background .15s;
    }
    .eval-autres-btn:hover {
      background: rgba(255,255,255,.25);
    }
    /* Phase B — Indicateur pédagogique */
    .ped-status-indicator { margin-top: 5px; min-height: 14px; }
    .ped-status {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 0.64rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: var(--radius-xl);
    }
    .ped-status--ok    { background: #D1FAE5; color: #065F46; }
    .ped-status--above { background: #EDE9FE; color: #5B21B6; }
    .ped-status--below { background: #FEF3C7; color: #92400E; }
    /* ── Phase C — Modale progression ──────────────────────────────── */
    #progression-modal {
      display: none; position: fixed; inset: 0;
      background: var(--overlay-bg); z-index: 9500;
      align-items: center; justify-content: center; padding: 16px;
    }
    #progression-modal.open { display: flex; }
    .prog-modal-box {
      background: var(--white); border-radius: var(--modal-radius);
      width: 100%; max-width: 600px; max-height: 90vh;
      overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25);
    }
    .prog-modal-header {
      background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%);
      color: white; padding: var(--modal-header-padding); border-radius: var(--modal-radius) var(--modal-radius) 0 0;
      display: flex; align-items: center; gap: 10px; position: sticky; top: 0;
    }
    .prog-modal-title { font-size: 0.9rem; font-weight: 700; flex: 1; }
    .prog-modal-close {
      background: rgba(255,255,255,.18); border: none; color: white;
      border-radius: var(--radius-xl); padding: 3px 10px; font-size: 1rem; cursor: pointer;
    }
    .prog-modal-body { padding: var(--modal-padding); }
    .prog-comp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .prog-comp-pill {
      border: 1.5px solid var(--border); background: var(--white); color: var(--text);
      border-radius: var(--radius-xl); padding: 3px 10px; font-size: 0.68rem; font-weight: 700;
      cursor: pointer; font-family: inherit; transition: var(--transition-fast);
    }
    .prog-comp-pill.targeted { border-color: #1D4ED8; background: #EFF6FF; color: #1D4ED8; }
    .prog-comp-pill.active   { background: #1D4ED8; border-color: #1D4ED8; color: white; }
    .prog-timeline {
      display: flex; gap: 8px; overflow-x: auto;
      padding: 8px 0 6px; margin-bottom: 4px;
    }
    .prog-dot-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 40px; }
    .prog-dot-label { font-size: 0.6rem; color: var(--muted); font-weight: 700; }
    .prog-dot {
      width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.62rem; font-weight: 800; color: white; flex-shrink: 0;
    }
    .prog-dot--empty { background: var(--border); color: var(--muted); }
    .prog-dot--TB    { background: var(--TB); }
    .prog-dot--B     { background: var(--B); }
    .prog-dot--ECA   { background: var(--EC); }
    .prog-dot--I     { background: var(--I); }
    .prog-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: var(--table-font-size); }
    .prog-table th {
      text-align: left; font-size: var(--table-header-font-size); text-transform: uppercase;
      letter-spacing: .05em; color: var(--muted);
      padding: var(--table-padding-y-tight) var(--table-padding-x);
      border-bottom: 1.5px solid var(--border);
    }
    .prog-table td {
      padding: var(--table-padding-y-tight) var(--table-padding-x);
      border-bottom: 1px solid var(--border); vertical-align: middle;
    }
    .prog-table tr:last-child td { border-bottom: none; }
    .prog-table tbody tr:nth-child(even) td { background: var(--table-zebra); }
    .prog-table tbody tr:hover td { background: var(--table-row-hover); }
    .prog-tendance {
      margin-top: 14px; padding: 9px 12px; border-radius: var(--radius-md);
      font-size: 0.74rem; font-weight: 600;
      background: #F8FAFC; border: 1px solid var(--border);
    }
    /* ── Direction 2 — Fiche bilan élève ────────────────────────────── */
    #student-bilan-modal {
      display: none; position: fixed; inset: 0;
      background: var(--overlay-bg); z-index: 9600;
      align-items: center; justify-content: center; padding: 16px;
    }
    #student-bilan-modal.open { display: flex; }
    .bilan-modal-box {
      background: var(--white); border-radius: var(--modal-radius);
      width: 100%; max-width: 640px; max-height: 92vh;
      overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25);
    }
    .bilan-modal-header {
      background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%);
      color: white; padding: var(--modal-header-padding); border-radius: var(--modal-radius) var(--modal-radius) 0 0;
      display: flex; align-items: center; gap: 8px;
      position: sticky; top: 0; z-index: 1;
    }
    .bilan-modal-title { font-size: 0.9rem; font-weight: 700; flex: 1; }
    .bilan-modal-body  { padding: var(--modal-padding); }

    /* ── Segmented control de période (bilan élève) ───────────────────── */
    #bilan-periode-bar {
      padding: 10px 18px 8px;
      border-bottom: 1px solid var(--border);
      background: var(--white);
      /* sticky juste sous le header */
      position: sticky;
      top: 53px;   /* hauteur du .bilan-modal-header */
      z-index: 1;
    }
    .bilan-seg-ctrl {
      display: flex;
      background: #E8ECF4;
      border-radius: 10px;
      padding: 3px;
      gap: 2px;
      width: 100%;
    }
    .bilan-seg-btn {
      /* layout immuable */
      flex: 1;
      height: 32px;
      padding: 0;
      margin: 0;
      border: none;
      border-radius: 7px;
      font-size: 0.72rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* seules ces propriétés varient sur :active/.active */
      background: transparent;
      color: #5B6680;
      box-shadow: none;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .bilan-seg-btn.active {
      background: #ffffff;
      color: #1D4ED8;
      font-weight: 700;
      box-shadow: 0 1px 4px rgba(0,0,0,.13);
    }
    .bilan-seg-btn:disabled {
      opacity: 0.38;
      cursor: not-allowed;
    }
    .bilan-seg-btn:not(:disabled):hover:not(.active) {
      background: rgba(255,255,255,0.5);
      color: #374151;
    }

    .bilan-stats-row   { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
    .bilan-stat        { background: #F8FAFC; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 14px; text-align: center; }
    .bilan-stat-val    { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
    .bilan-stat-label  { font-size: 0.6rem; color: var(--muted); font-weight: 600; margin-top: 1px; }
    .bilan-section-title {
      font-size: 0.63rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: var(--muted); margin: 16px 0 7px;
      padding-bottom: 4px; border-bottom: 1.5px solid var(--border);
    }
    .bilan-comp-row {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 0; border-bottom: 1px solid var(--border);
    }
    .bilan-comp-row:last-child { border-bottom: none; }
    .bilan-comp-label  { font-size: 0.72rem; font-weight: 600; flex: 1; min-width: 0; }
    .bilan-bar-track   { background: var(--border); border-radius: var(--radius-xl); height: 6px; width: 70px; flex-shrink: 0; overflow: hidden; }
    .bilan-bar-fill    { height: 100%; border-radius: var(--radius-xl); }
    .bilan-grade-chip  { font-size: 0.68rem; font-weight: 800; width: 34px; text-align: center; border-radius: 5px; padding: 2px 0; flex-shrink: 0; }
    .bilan-trend       { font-size: 0.78rem; font-weight: 800; flex-shrink: 0; width: 14px; text-align: center; }
    .bilan-tags        { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
    .bilan-tag         { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-xl); white-space: nowrap; }
    .name-cell-link    { cursor: pointer; }
    .name-cell-link:hover { color: var(--primary); text-decoration: underline; }

    /* ── Direction 1 — Vue Profil Compétences ── */
    .res-view-switch { display:inline-flex; gap:2px; background:var(--border); border-radius:var(--radius-md); padding:2px; }
    .res-view-btn { background:none; border:none; border-radius:var(--radius-sm); padding:5px 13px; font-size:0.74rem; font-weight:600; cursor:pointer; color:var(--muted); font-family:inherit; transition:background .12s,color .12s,box-shadow .12s; white-space:nowrap; }
    .res-view-btn.active { background:var(--white); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
    /* ── Filtre semestriel ──────────────────────────────────────────── */
    .res-sem-bar { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
    .res-sem-switch { display:inline-flex; gap:2px; background:var(--border); border-radius:var(--radius-sm); padding:2px; }
    .res-sem-btn { background:none; border:none; border-radius:4px; padding:3px 10px; font-size:0.7rem; font-weight:600; cursor:pointer; color:var(--muted); font-family:inherit; transition:background .12s,color .12s,box-shadow .12s; white-space:nowrap; }
    .res-sem-btn.active { background:var(--primary); color:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,.18); }
    .res-sem-btn:disabled { opacity:0.35; cursor:not-allowed; }
    .res-sem-hint { font-size:0.68rem; color:var(--muted); font-style:italic; }
    .comp-cell     { text-align:center; font-size:0.72rem; font-weight:700; padding:5px 4px; white-space:nowrap; }
    .comp-cell--TB  { color:var(--TB);  }
    .comp-cell--B   { color:var(--B);   }
    .comp-cell--ECA { color:var(--EC);  }
    .comp-cell--I   { color:var(--I);   }
    .comp-cell--empty { color:var(--border); font-weight:400; }
    .comp-th { text-align:center; font-size:0.68rem; font-weight:700; min-width:52px; padding:6px 3px; white-space:nowrap; }
    .comp-th--trans { border-top:2px solid var(--primary); }
    .comp-th--tech  { border-top:2px solid #6366F1; }
    /* ── Direction 4 — Heatmap classe ── */
    /* Fonds adoucis via --*-bg (même variables que le panel Évaluer) → dark mode auto */
    .heat-cell      { text-align:center; font-size:0.67rem; font-weight:800; padding:5px 3px; white-space:nowrap; cursor:default; }
    .heat-cell--TB  { background:var(--TB-bg); color:var(--TB); }
    .heat-cell--B   { background:var(--B-bg);  color:var(--B);  }
    .heat-cell--ECA { background:var(--EC-bg); color:var(--EC); }
    .heat-cell--I   { background:var(--I-bg);  color:var(--I);  }
    .heat-cell--none { background:var(--border); color:var(--muted); font-weight:400; }
    /* Empêcher le zébrage global (tr:nth-child(even)) d'écraser les couleurs heatmap */
    tr:nth-child(even) td.heat-cell--TB   { background:var(--TB-bg); }
    tr:nth-child(even) td.heat-cell--B    { background:var(--B-bg);  }
    tr:nth-child(even) td.heat-cell--ECA  { background:var(--EC-bg); }
    tr:nth-child(even) td.heat-cell--I    { background:var(--I-bg);  }
    tr:nth-child(even) td.heat-cell--none { background:var(--border);}
    .heat-synth { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; padding:8px 12px; background:var(--primary-light); border-radius:var(--radius-md); align-items:center; }
    /* ── Export PDF dropdown ── */
    .export-dropdown-wrap { position:relative; }
    .export-dropdown-menu { position:absolute; right:0; top:calc(100% + 4px); background:var(--white); border:1px solid var(--border); border-radius:var(--modal-radius-sm); box-shadow:0 4px 16px rgba(0,0,0,.12); min-width:230px; z-index:200; overflow:hidden; }
    .export-dd-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 14px; font-size:0.76rem; font-weight:500; cursor:pointer; color:var(--text); transition:background .1s; font-family:inherit; background:none; border:none; width:100%; text-align:left; }
    .export-dd-item:hover { background:var(--primary-light); }
    .export-dd-sep { height:1px; background:var(--border); margin:3px 0; }
    .export-dd-label { font-size:0.63rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:6px 14px 2px; }
    .export-count { font-size:0.63rem; font-weight:700; background:var(--border); color:var(--muted); border-radius:var(--radius-xl); padding:1px 7px; flex-shrink:0; }
    .heat-chip-fragile { font-size:0.65rem; font-weight:700; padding:2px 8px; border-radius:var(--radius-xl); background:var(--I-bg); color:var(--I); white-space:nowrap; }
    .heat-chip-solide  { font-size:0.65rem; font-weight:700; padding:2px 8px; border-radius:var(--radius-xl); background:var(--TB-bg); color:var(--TB); white-space:nowrap; }
    /* ── Direction 5 — Alerte élève ── */
    .eleve-alert { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; background:var(--I); color:white; border-radius:50%; font-size:0.56rem; font-weight:800; margin-right:4px; flex-shrink:0; vertical-align:middle; cursor:default; }

    @media print {
      body > *:not(#student-bilan-modal) { display: none !important; }
      #student-bilan-modal { display: block !important; position: static !important; background: none !important; padding: 0 !important; }
      .bilan-modal-box { max-height: none !important; box-shadow: none !important; border-radius: 0 !important; }
      .bilan-modal-header { border-radius: 0 !important; position: static !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .prog-modal-close, .bilan-print-btn { display: none !important; }
    }

    .coeff-badge {
      display: inline-block;
      background: var(--primary-light);
      color: var(--primary);
      font-size: var(--text-xs);
      font-weight: 700;
      padding: 3px 8px;
      border-radius: var(--radius-md);
    }

    /* ── GRADE BUTTONS ───────────────────────────── */
    .grade-row { display: flex; gap: 7px; }
    .grade-btn {
      flex: 1;
      padding: 10px 4px;
      border: 2px solid;
      border-radius: var(--radius-md);
      font-weight: 800;
      font-size: 0.88rem;
      cursor: pointer;
      transition: var(--transition-fast);
      background: var(--white);
      font-family: inherit;
    }
    .grade-btn[data-g="TB"]  { color: var(--TB); border-color: var(--TB); }
    .grade-btn[data-g="B"]   { color: var(--B);  border-color: var(--B);  }
    .grade-btn[data-g="ECA"] { color: var(--EC); border-color: var(--EC); }
    .grade-btn[data-g="I"]   { color: var(--I);  border-color: var(--I);  }
    .grade-btn.sel[data-g="TB"]  { background: var(--TB); color: white; }
    .grade-btn.sel[data-g="B"]   { background: var(--B);  color: white; }
    .grade-btn.sel[data-g="ECA"] { background: var(--EC); color: white; }
    .grade-btn.sel[data-g="I"]   { background: var(--I);  color: white; }

    /* ── PRODUCTION CARD (dans panel) ────────────── */
    .prod-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 13px;
      margin-bottom: 10px;
    }
    .prod-card-title {
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--header);
      margin-bottom: 11px;
      padding-bottom: 9px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .prod-card-title::before {
      content: '';
      display: inline-block;
      width: 4px; height: 18px;
      background: var(--primary);
      border-radius: 2px;
      flex-shrink: 0;
    }
    /* Compétence technique ciblée — même traitement premium que .crit-block--targeted */
    .tech-row--targeted {
      background: #F0F4FF;
      border: 1.5px solid #BFDBFE;
      border-left: 3px solid #1D4ED8;
      border-radius: 9px;
      padding: 10px 12px;
      margin-bottom: 9px;
    }
    /* Compétence technique secondaire */
    .tech-row--other {
      border: 1px solid var(--border);
      border-left: 3px solid var(--border);
      border-radius: 9px;
      padding: 9px 12px;
      margin-bottom: 9px;
    }
.tech-label { font-size: 0.88rem; font-weight: 700; margin-bottom: 4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .tech-desc  { font-size: 0.73rem; color: var(--muted); margin-bottom: 7px; line-height: 1.4; }

    /* ── SEPARATOR ───────────────────────────────── */
    .sep { height: 1px; background: var(--border); margin: 16px 0; }

    /* ── APPRÉCIATIONS ───────────────────────────── */
    .appre-per-btn {
      padding: 5px 12px; border-radius: var(--radius-xl); border: 1.5px solid var(--border);
      background: white; color: var(--muted); font-size: 0.78rem; font-weight: 600;
      cursor: pointer; transition: var(--transition-fast);
    }
    .appre-per-btn.active, .appre-per-btn:hover {
      border-color: var(--primary); background: var(--primary-light); color: var(--primary);
    }
    .ai-prov-btn {
      flex: 1; padding: 8px 6px; border-radius: var(--radius-md); border: 1.5px solid var(--border);
      background: white; font-size: 0.75rem; font-weight: 600; cursor: pointer;
      color: var(--text); transition: var(--transition-fast);
    }
    .ai-prov-btn.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
    .appre-card {
      background: white; border-radius: var(--radius-lg); border: 1px solid var(--border);
      padding: 12px 14px; margin-bottom: 10px;
    }
    .appre-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .appre-student-name { font-weight: 700; font-size: 0.9rem; flex: 1; }
    .appre-score-badge {
      font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-xl);
      background: var(--primary-light); color: var(--primary);
    }
    .appre-obs-list { font-size: 0.72rem; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
    .appre-textarea {
      width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-md);
      padding: 8px 10px; font-size: 0.82rem; font-family: inherit;
      resize: vertical; min-height: 64px; line-height: 1.5;
      transition: border-color var(--dur-sm) var(--ease-out);
    }
    .appre-textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--glow-subtle); }
    .appre-actions { display: flex; gap: 6px; margin-top: 8px; }
    .btn-ai { background: linear-gradient(135deg,#7C3AED,#4F46E5); color: white; border: none;
      border-radius: var(--radius-md); padding: 6px 12px; font-size: 0.78rem; font-weight: 700;
      cursor: pointer; display: flex; align-items: center; gap: 5px; }
    .btn-ai:disabled { opacity: .5; cursor: not-allowed; }
    .appre-classe-card {
      background: linear-gradient(135deg,#F0FDF4,#ECFDF5); border: 1.5px solid #86EFAC;
      border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 12px;
    }

    /* ── SETTINGS WINDOW (iOS-style) ───────────── */
    .settings-overlay {
      display: none; position: fixed; inset: 0;
      background: var(--overlay-bg); z-index: 200;
      align-items: flex-end; justify-content: center;
    }
    .settings-overlay.open { display: flex; }
    @media (min-width: 600px) { .settings-overlay.open { align-items: center; } }

    .settings-window {
      background: #EFEFF4; border-radius: var(--modal-radius) var(--modal-radius) 0 0;
      width: 100%; height: 82dvh; max-height: 96dvh;
      display: flex; flex-direction: column; overflow: hidden;
      position: relative; box-shadow: 0 -4px 40px rgba(0,0,0,.22);
      transition: border-radius .2s;
    }
    .settings-window.fullscreen {
      height: 100dvh !important; max-height: 100dvh; border-radius: 0;
    }
    @media (min-width: 600px) {
      .settings-window {
        width: min(88vw, 1400px); max-width: none;
        height: min(88vh, 900px); border-radius: var(--modal-radius);
      }
      .settings-window.fullscreen { width: 100vw; max-width: 100vw; height: 100dvh; border-radius: 0; }
    }

    /* Drag handles */
    .sw-resize-handle {
      position: absolute; top: 0; left: 0; right: 0; height: 8px;
      cursor: ns-resize; z-index: 10; border-radius: var(--radius-xl) 20px 0 0;
    }
    .sw-resize-right {
      position: absolute; top: 8px; right: 0; bottom: 20px; width: 6px;
      cursor: ew-resize; z-index: 10;
    }
    .sw-resize-corner {
      position: absolute; bottom: 0; right: 0; width: 20px; height: 20px;
      cursor: nwse-resize; z-index: 10;
      background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.15) 50%);
      border-radius: 0 0 18px 0;
    }
    .sw-drag-pill {
      width: 36px; height: 4px; background: rgba(0,0,0,.18);
      border-radius: 2px; margin: 8px auto 0; pointer-events: none;
    }

    /* Titlebar */
    .sw-titlebar {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px 8px; flex-shrink: 0; user-select: none;
    }
    /* Traffic lights */
    .sw-trafficlights { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
    .sw-tl {
      width: 13px; height: 13px; border-radius: 50%; cursor: pointer;
      border: none; flex-shrink: 0; transition: filter .12s;
    }
    .sw-tl:hover { filter: brightness(.85); }
    .sw-tl-red    { background: #FF5F57; }
    .sw-tl-yellow { background: #FFBD2E; }
    .sw-tl-green  { background: #28C840; }
    .sw-title {
      position: absolute; left: 50%; transform: translateX(-50%);
      font-size: 0.95rem; font-weight: 700; color: var(--text);
      white-space: nowrap; pointer-events: none;
    }

    /* Body: sidebar + content */
    .sw-body { display: flex; flex: 1; overflow: hidden; }

    .sw-sidebar {
      width: 210px; min-width: 210px; background: #F2F2F7;
      border-right: 1px solid rgba(0,0,0,.1);
      overflow-y: auto; padding: 6px 0 12px;
    }
    .sw-sidebar-group { margin-bottom: 4px; }
    .sw-sidebar-label {
      font-size: 0.67rem; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .06em;
      padding: 10px 16px 4px;
    }
    .sw-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px 10px 16px; cursor: pointer;
      transition: background var(--dur-xs) var(--ease-out); border-radius: 0;
    }
    .sw-item:hover { background: rgba(0,0,0,.05); }
    .sw-item.active { background: rgba(200,144,42,.13); }
    .sw-item-icon {
      font-size: 1rem; width: 26px; height: 26px; border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; background: var(--primary); font-size: 0.82rem;
    }
    .sw-item-label { flex: 1; font-size: 0.85rem; font-weight: 500; color: var(--text); }
    .sw-item-chevron { color: #C7C7CC; font-size: 1rem; line-height: 1; }
    .sw-sidebar-sep { height: 1px; background: rgba(0,0,0,.08); margin: 4px 0; }

    .sw-content {
      flex: 1; overflow-y: auto; padding: 14px 16px;
      background: #EFEFF4; -webkit-overflow-scrolling: touch;
    }
    .sw-content-empty {
      display: flex; align-items: center; justify-content: center;
      height: 100%; color: var(--muted); font-size: 0.85rem;
    }

    /* Cards inside content */
    .sw-card {
      background: var(--white); border-radius: var(--radius-lg);
      border: 1px solid rgba(0,0,0,.08); padding: 14px 16px; margin-bottom: 10px;
    }
    .sw-card:last-child { margin-bottom: 0; }
    .sw-card-title {
      font-size: 0.68rem; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px;
    }

    /* Mobile: push navigation */
    @media (max-width: 599px) {
      .sw-sidebar { width: 100%; min-width: 100%; border-right: none; }
      .sw-content { display: none; }
      .sw-body.show-content .sw-sidebar { display: none; }
      .sw-body.show-content .sw-content { display: block; }
    }

    .period-mode-btn {
      flex: 1; padding: 10px 8px; border-radius: 10px; border: 1.5px solid var(--border);
      background: white; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--muted);
      transition: var(--transition-fast); text-align: center;
    }
    .period-mode-btn.active {
      border-color: var(--primary); background: var(--primary-light); color: var(--primary);
    }

    /* ── Nav order UI (Paramètres › Interface) ───── */
    .nav-order-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; background: var(--white);
      border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 6px;
      transition: box-shadow .15s;
    }
    .nav-order-item:last-child { margin-bottom: 0; }
    .nav-order-drag { color: var(--muted); font-size: 1rem; cursor: grab; opacity: .55; user-select: none; }
    .nav-order-icon { font-size: 1.15rem; flex-shrink: 0; }
    .nav-order-label { flex: 1; font-size: 0.85rem; font-weight: 500; }
    .nav-order-badge {
      font-size: 0.6rem; font-weight: 700; padding: 1px 5px; border-radius: 99px;
      background: #e5e7eb; color: #6b7280; white-space: nowrap;
    }
    .nav-order-badge.tiroir { background: #ede9fe; color: #7c3aed; }
    .nav-order-arrows { display: flex; flex-direction: column; gap: 2px; }
    .nav-order-arrows button {
      padding: 2px 6px; font-size: 0.65rem; border: 1px solid var(--border);
      border-radius: 4px; background: var(--white); color: var(--text); cursor: pointer; line-height: 1.3;
      transition: background var(--dur-xs) var(--ease-out);
    }
    .nav-order-arrows button:disabled { opacity: .3; cursor: not-allowed; }
    .nav-order-arrows button:not(:disabled):hover { background: var(--bg, #f5f5f5); }
    .nav-order-item.nav-drag-active { opacity: .35; }
    .nav-order-item.nav-drag-over-top    { border-top: 2px solid var(--primary) !important; }
    .nav-order-item.nav-drag-over-bottom { border-bottom: 2px solid var(--primary) !important; }

    /* ── PLANNING ────────────────────────────────── */
    .plan-item {
      background: var(--white);
      border-radius: 10px;
      border: 1px solid var(--border);
      padding: 12px 14px;
      margin-bottom: 8px;
    }
    .plan-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .plan-seance-num { font-weight: 800; font-size: 0.95rem; }
    .plan-count { font-size: 0.75rem; color: var(--muted); }
    .plan-tags { display: flex; flex-wrap: wrap; gap: 5px; }
    .tag {
      background: var(--primary-light);
      color: var(--primary);
      font-size: var(--text-sm);
      font-weight: 600;
      padding: 3px 8px;
      border-radius: var(--radius-md);
    }

    /* ── RÉSULTATS TABLE ─────────────────────────── */
    .results-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { width: 100%; border-collapse: collapse; font-size: 0.78rem; min-width: 520px; }
    th, td { padding: 8px 9px; border: 1px solid var(--border); text-align: center; white-space: nowrap; }
    th { background: var(--header); color: white; font-weight: 600; font-size: 0.75rem; }
    tr:nth-child(even) td { background: #F9F6F2; }
    td.name-cell { text-align: left; font-weight: 600; min-width: 130px; }
    td.note-cell { font-weight: 700; }
    .note-high { color: var(--TB); }
    .note-low  { color: var(--I); }
    td.moy-cell { background: var(--primary-light) !important; font-weight: 800; color: var(--primary); }

    /* ── RÉSULTATS — Bandeau stats + ligne moy. classe ──────────────────── */
    .notes-stats-bar {
      display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
      background: var(--primary-light); border-radius: var(--radius-md);
      padding: 8px 14px; margin-bottom: 10px; font-size: 0.76rem;
    }
    .notes-stat-pill {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius-xl); padding: 3px 10px; white-space: nowrap;
      color: var(--muted);
    }
    .notes-stat-pill strong { font-weight: 800; font-size: 0.82rem; }
    /* Ligne tfoot — fond navy fixe (même en dark mode, comme le thead) */
    .notes-tfoot-row td {
      background: #1E3A8A !important; color: #ffffff !important;
      font-weight: 800; font-size: 0.74rem; padding: 6px 10px;
      border: 1px solid #1a3275; text-align: center; white-space: nowrap;
    }
    .notes-tfoot-row td:first-child { text-align: left; border-right: 2px solid #3B5FC0; }
    .notes-tfoot-row .tfoot-moy { background: #BFDBFE !important; color: #1E3A8A !important; }
    .notes-tfoot-row .tfoot-dim { color: #93C5FD !important; font-weight: 600; }

    /* ── ÉLÈVES ──────────────────────────────────── */
    .import-zone {
      border: 2px dashed var(--border);
      border-radius: var(--radius);
      padding: 24px;
      text-align: center;
      cursor: pointer;
      transition: border-color var(--dur-sm) var(--ease-out);
      margin-bottom: 12px;
    }
    .import-zone:hover { border-color: var(--primary); }
    .import-icon { font-size: 2rem; margin-bottom: 6px; }
    .import-zone p { color: var(--muted); font-size: 0.85rem; }

    .eleve-group-title {
      font-weight: 800;
      color: var(--primary);
      font-size: 0.88rem;
      margin: 14px 0 7px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .eleve-group-count { font-weight: 400; font-size: 0.75rem; color: var(--muted); }
    .eleve-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: var(--bg);
      border-radius: 7px;
      margin-bottom: 4px;
      font-size: 0.88rem;
    }

    /* ── EXPORT ──────────────────────────────────── */
    .export-info li { margin-bottom: 5px; font-size: 0.85rem; color: var(--muted); padding-left: 16px; position: relative; }
    .export-info li::before { content: '▸'; position: absolute; left: 0; color: var(--primary); }

    /* ── TOAST ───────────────────────────────────── */
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: rgba(30,30,30,0.92);
      color: white;
      padding: 10px 20px;
      border-radius: var(--radius-xl);
      font-size: 0.85rem;
      z-index: 999;
      opacity: 0;
      transition: opacity .25s, transform .25s;
      pointer-events: none;
      white-space: nowrap;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ── LOADING ─────────────────────────────────── */
    .loading-text { color: var(--muted); text-align: center; padding: 32px; font-size: 0.9rem; }

    /* ── LEGEND ──────────────────────────────────── */
    .legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; }
    .legend-dot { width: 10px; height: 10px; border-radius: 3px; }

    /* ── NIVEAU LEGEND (panel évaluation) ───────── */
    .niv-legend {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      margin-bottom: 16px;
    }
    .niv-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 7px 3px 5px;
      border-radius: 9px;
      border: 1.5px solid var(--border);
      background: var(--white);
    }
    .niv-code {
      font-weight: 800;
      font-size: 0.82rem;
      letter-spacing: -0.01em;
    }
    .niv-desc {
      font-size: 0.55rem;
      color: var(--muted);
      line-height: 1.25;
      margin: 3px 0 4px;
    }
    .niv-val {
      font-size: 0.7rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: var(--radius-md);
      background: var(--bg);
    }
    .niv-item[data-g="TB"]  .niv-code,
    .niv-item[data-g="TB"]  .niv-val  { color: var(--TB); }
    .niv-item[data-g="B"]   .niv-code,
    .niv-item[data-g="B"]   .niv-val  { color: var(--B); }
    .niv-item[data-g="ECA"] .niv-code,
    .niv-item[data-g="ECA"] .niv-val  { color: var(--EC); }
    .niv-item[data-g="I"]   .niv-code,
    .niv-item[data-g="I"]   .niv-val  { color: var(--I); }

    /* Panel score breakdown (Trans / Tech) */
    .panel-breakdown {
      font-size: 0.65rem;
      color: rgba(255,255,255,0.65);
      margin-top: 3px;
      text-align: right;
      white-space: nowrap;
    }

    /* ── FICHE TP — ÉDITEUR ──────────────────── */
    .fiche-section-title {
      font-size: 0.75rem; font-weight: 700; color: var(--primary);
      text-transform: uppercase; letter-spacing: 0.04em;
      margin: 14px 0 7px; padding-bottom: 4px;
      border-bottom: 1px solid var(--border);
    }
    .ing-row, .step-row {
      display: flex; gap: 5px; margin-bottom: 5px; align-items: center;
    }
    .ing-row input, .step-row input {
      padding: 7px 8px; font-size: 0.8rem; margin-bottom: 0;
    }
    .ing-nom  { flex: 2.2; min-width: 0; }
    .ing-coef { flex: 0.7; min-width: 36px; text-align: center; }
    .ing-qte  { flex: 0.9; min-width: 44px; text-align: center; }
    .ing-unit { flex: 0.8; min-width: 36px; }
    .ing-catalog-fam-hdr { padding:5px 10px;font-weight:700;font-size:0.75rem;letter-spacing:0.04em;text-transform:uppercase;color:#374151; }
    .step-label { flex: 2.5; } .step-duree { flex: 1.5; } .step-temp { flex: 1.5; } .step-notes { flex: 2.5; }
    .row-del { background: none; border: none; color: var(--I); cursor: pointer; font-size: 1rem; padding: 4px; flex-shrink: 0; }
    /* ── COMMANDE MULTI-LIGNES ── */
    .cmd-row { display: flex; gap: 5px; margin-bottom: 4px; align-items: center; }
    .cmd-row input { padding: 7px 8px; font-size: 0.8rem; margin-bottom: 0; }
    .cmd-qte   { flex: 0.7; min-width: 42px; text-align: center; }
    .cmd-nom   { flex: 2.8; }
    .cmd-poids { flex: 0.9; min-width: 52px; text-align: center; }
    .cmd-total { flex: 0.9; min-width: 52px; text-align: center;
                 background: #EFF6FF !important; color: #2563EB !important;
                 font-weight: 600; cursor: default; border-color: #BFDBFE !important; }
    .btn-add-row {
      display: flex; align-items: center; gap: 5px;
      background: none; border: 1.5px dashed var(--border);
      border-radius: var(--radius-md); color: var(--muted); font-size: 0.78rem;
      padding: 6px 12px; cursor: pointer; width: 100%; font-family: inherit; margin-top: 4px;
    }
    .btn-add-row:hover { border-color: var(--primary); color: var(--primary); }
    .temps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
    .temps-grid label { margin-bottom: 3px; font-size: 0.75rem; }
    .temps-grid input { margin-bottom: 0; }
    .prod-fiche-badge {
      font-size: 0.65rem; padding: 2px 6px; border-radius: var(--radius-md);
      background: var(--primary-light); color: var(--primary); font-weight: 600;
    }

    /* ── FICHE TP — BOUTON GÉNÉRER ───────────── */
    .gen-tp-bar {
      display: flex; gap: 8px; margin-top: 10px; padding-top: 10px;
      border-top: 1px solid var(--border);
    }

    /* ══════════════════════════════════════════
       CONTEXT SCREEN v2 — HERO + CARDS
    ══════════════════════════════════════════ */
    #context-screen {
      justify-content: flex-start !important;
      padding: 0 !important;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .ctx-hero {
      background: linear-gradient(150deg, #1a0e08 0%, #2C1810 40%, #7A4A10 80%, #C8902A 100%);
      color: white;
      text-align: center;
      padding: 48px 24px 56px;
      width: 100%;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
    .ctx-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 70% 50%, rgba(200,144,42,0.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .ctx-hero-icon {
      display: none;
    }
    .ctx-hero-wordmark {
      display: block; margin-bottom: 10px;
      font-size: 2rem; font-weight: 200; letter-spacing: 0.22em;
      color: rgba(255,255,255,0.9); text-transform: uppercase;
      animation: hs-wordmark-in 0.7s cubic-bezier(.22,.68,0,1.2) both;
    }
    .ctx-hero-title { display: none; }
    .ctx-hero-sub {
      font-size: 0.72rem; opacity: 0.6; letter-spacing: 0.16em;
      text-transform: uppercase; position: relative;
      font-weight: 400;
    }
    .ctx-card {
      background: var(--white);
      border-radius: 24px 24px 0 0;
      margin-top: -22px;
      width: 100%;
      max-width: 520px;
      padding: 30px 22px 44px;
      box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
      flex: 1;
      align-self: center;
    }
    .ctx-section { margin-bottom: 24px; }
    .ctx-label {
      font-size: 0.65rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--muted); margin-bottom: 10px; display: block;
    }
    .year-pills { display: flex; gap: 8px; flex-wrap: wrap; }
    .year-pill {
      padding: 9px 16px; border-radius: var(--radius-xl);
      border: 2px solid var(--border);
      background: var(--white); color: #6B7280;
      font-size: 0.82rem; font-weight: 700;
      cursor: pointer; transition: var(--transition-fast); font-family: inherit;
    }
    .year-pill:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
    .year-pill.active {
      background: var(--primary); color: white;
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(200,144,42,0.35);
    }
    .diploma-card {
      border-radius: 14px;
      transition: var(--transition-fast);
    }
    .diploma-card.selected {
      box-shadow: 0 2px 12px rgba(200,144,42,0.25);
    }

    /* ══════════════════════════════════════════
       SETUP SCREEN improvements
    ══════════════════════════════════════════ */
    #setup-screen {
      background: linear-gradient(150deg, #1a0e08 0%, #2C1810 50%, #4a2410 100%) !important;
    }
    .setup-logo { color: white; }
    .setup-card {
      border-radius: 18px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.18);
      border: none;
    }
    .setup-card h2 { font-size: 1.3rem; }

    /* ══════════════════════════════════════════
       HEADER improvements
    ══════════════════════════════════════════ */
    header {
      background: linear-gradient(135deg, #2C1810 0%, #3d2012 100%);
      padding: 13px 16px 11px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    }
    .header-yr-badge {
      font-size: 0.68rem; font-weight: 700;
      padding: 3px 9px; border-radius: 10px;
      background: rgba(200,144,42,0.28);
      color: #F5C45E;
      white-space: nowrap; border: 1px solid rgba(200,144,42,0.3);
    }

    /* ══════════════════════════════════════════
       NAV improvements
    ══════════════════════════════════════════ */
    nav {
      background: var(--white);
      box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,0.04);
    }
    nav button {
      padding: 11px 6px 10px;
      font-size: 0.74rem;
      font-weight: 600;
      border-bottom: 3px solid transparent;
      transition: color .12s, background .12s;
    }
    nav button.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
      background: linear-gradient(to bottom, transparent, rgba(200,144,42,0.06));
      font-weight: 800;
    }

    /* ══════════════════════════════════════════
       CARD improvements
    ══════════════════════════════════════════ */
    .card {
      border-radius: 16px;
      box-shadow: 0 2px 8px rgba(60,40,20,0.06), 0 4px 16px rgba(60,40,20,0.04);
      border: 1px solid rgba(200,144,42,0.10);
    }
    .card-title strong { font-size: 0.92rem; font-weight: 800; color: var(--header); letter-spacing: -0.01em; }
    .card-title { font-size: 0.88rem; font-weight: 700; color: var(--header); }

    /* ══════════════════════════════════════════
       STUDENT LIST improvements
    ══════════════════════════════════════════ */
    .student-row {
      border-radius: var(--radius-lg);
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    .student-score { font-size: 1.4rem; }

    /* ══════════════════════════════════════════
       SEANCES GRID improvements
    ══════════════════════════════════════════ */
    .seance-btn {
      border-radius: 10px;
      transition: var(--transition-fast);
    }
    .seance-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
      box-shadow: 0 2px 8px rgba(200,144,42,0.35);
    }
    .seance-btn.active .seance-dot { background: rgba(255,255,255,0.6) !important; }

    /* ══════════════════════════════════════════
       GTABS improvements
    ══════════════════════════════════════════ */
    .gtab {
      border-radius: var(--radius-xl);
      font-size: 0.8rem;
      transition: var(--transition-fast);
    }
    .gtab.active {
      box-shadow: 0 2px 8px rgba(200,144,42,0.3);
    }

    /* ══════════════════════════════════════════
       RESULTS TABLE improvements
    ══════════════════════════════════════════ */
    th { background: var(--header); letter-spacing: 0.02em; }
    th:first-child { border-radius: 0; }

    /* ══════════════════════════════════════════
       PANEL improvements
    ══════════════════════════════════════════ */
    .panel-sheet {
      border-radius: var(--modal-radius) var(--modal-radius) 0 0;
      box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    }
    @media (min-width: 700px) {
      .panel-sheet { border-radius: var(--modal-radius); }
    }
    .panel-score-box { border-radius: 14px; }

    /* ══════════════════════════════════════════
       SECTION HEADING (screens)
    ══════════════════════════════════════════ */
    .screen-heading {
      font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--muted);
      margin-bottom: 10px; padding: 0 2px;
    }

    /* ══════════════════════════════════════════
       MODULE RECETTES — Thème couleurs
       Palette interne du module
    ══════════════════════════════════════════ */
    :root {
      --er-navy:   #1A3A6B;   /* bleu marine foncé — header & sidebar */
      --er-cyan:   #00BFFF;   /* cyan vif — texte sidebar actif */
      --er-gray:   #D0D0D0;   /* gris fond principal */
      --er-white:  #FFFFFF;
      --er-purple: #7B2D9E;   /* violet — colonnes Recette / Kg */
      --er-green:  #2E7D32;   /* vert — colonne Pièce/Portion */
      --er-pink:   #CC00AA;   /* magenta — Poids Net */
      --er-blue:   #0000CC;   /* bleu — Coût Matière */
      --er-red:    #CC0000;   /* rouge — Prix HT */
      --er-row-alt:#F0F4F8;   /* gris très clair — lignes alternées */
      --er-sel:    #4472C4;   /* bleu sélection */
    }

    /* ── Écran global ── */
    #screen-recettes {
      background: var(--er-gray);
      padding: 0 !important;
      display: flex; flex-direction: column;
    }
    /* .screen.active force display:block + overflow-y:auto → on rétablit flex et on bloque le scroll ici */
    #screen-recettes.active {
      display: flex !important;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      overflow: clip !important; /* clip = coupe le contenu SANS créer un scroll-container → sticky fonctionne */
    }

    /* ── Sous-navigation ── */
    .rec-subnav {
      display: flex;
      background: var(--er-navy);
      flex-shrink: 0;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 4px solid #0D2247;
    }
    .rec-subnav::-webkit-scrollbar { display: none; }
    .rec-subbtn {
      flex: 1; min-width: 90px; padding: 11px 14px;
      border: none; background: transparent;
      font-size: 0.82rem; font-weight: 600;
      color: rgba(255,255,255,.82); cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -3px; white-space: nowrap;
      transition: color .15s, border-color .15s;
      letter-spacing: 0.01em;
    }
    .rec-subbtn:hover { color: white; }
    .rec-subbtn.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
      background: rgba(200,144,42,0.12);
      font-weight: 700;
    }

    /* ── Liste de recettes ── */
    .rec-list { display: flex; flex-direction: column; gap: 0; }
    .rec-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 14px; background: var(--er-white);
      border-bottom: 1px solid #DADADA;
      cursor: pointer; transition: background var(--dur-xs) var(--ease-out);
    }
    .rec-item:nth-child(even) { background: var(--er-row-alt); }
    .rec-item:hover { background: #D0E4FF; }
    .rec-item.selected { background: var(--er-sel) !important; color: white; }
    .rec-item.selected .rec-item-name,
    .rec-item.selected .rec-item-sub,
    .rec-item.selected .rec-item-badge { color: white; }
    .rec-item-icon {
      width: 32px; height: 32px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; flex-shrink: 0;
      background: rgba(26,58,107,.12);
    }
    .rec-item-main { flex: 1; min-width: 0; }
    .rec-item-name { font-weight: 700; font-size: 0.88rem; color: var(--er-navy); }
    .rec-item-sub  { font-size: 0.73rem; color: #666; margin-top: 1px; }
    .rec-item-badge {
      font-size: 0.68rem; font-weight: 700; padding: 2px 6px;
      border-radius: 4px; white-space: nowrap;
      background: rgba(26,58,107,.1); color: var(--er-navy);
    }
    .rec-tag {
      display: inline-block; font-size: 0.68rem; font-weight: 700;
      padding: 2px 7px; border-radius: 20px; margin-right: 4px;
      background: #F1F5F9; color: #475569;
    }
    .rec-allergen-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 5px 10px; border-radius: 8px; font-size: 0.78rem;
      font-weight: 600; cursor: pointer; border: 2px solid #e5e7eb;
      background: white; color: #374151; transition: var(--transition-fast);
    }
    .rec-allergen-btn.on {
      background: #FEF3C7; border-color: #F59E0B; color: #92400E;
    }
    /* Recipe editor panel (full screen overlay) */
    #rec-recipe-panel {
      position: fixed; inset: 0; z-index: 400;
      background: var(--bg); display: flex; flex-direction: column;
      overflow: hidden;
    }
    /* ── Éditeur de recette (plein écran) ── */
    .rec-editor-header {
      background: var(--er-navy); color: white;
      padding: 10px 14px; display: flex; align-items: center; gap: 10px;
      flex-shrink: 0; border-bottom: 3px solid #0D2247;
    }
    .rec-toolbar {
      background: #E8EEF5; border-bottom: 1px solid #C0CCE0;
      padding: 4px 10px; display: flex; align-items: center; gap: 4px;
      flex-shrink: 0; flex-wrap: wrap;
    }
    .rec-tb-btn {
      background: white; border: 1px solid #B0BCC8; border-radius: 4px;
      padding: 5px 10px; cursor: pointer; font-size: 0.75rem; color: #2A3F5F;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      min-width: 70px; transition: background .12s;
    }
    .rec-tb-btn:hover { background: #D8E8F8; border-color: var(--er-navy); }
    .rec-tb-btn .tb-icon { font-size: 1.1rem; line-height: 1; }
    .rec-tb-sep { width: 1px; height: 36px; background: #B0BCC8; margin: 0 3px; }

    /* Méta-données (Type / Poste) */
    #rec-recipe-panel > div:nth-child(2) {
      background: #F0F4F8;
      border-bottom: 1px solid #C8D4E0;
    }

    /* ── Onglets ── */
    .rec-editor-tabs {
      display: flex; background: #EBEBEB;
      border-bottom: 2px solid #C8C8C8;
      flex-shrink: 0;
    }
    .rec-editor-tab {
      flex: 1; padding: 9px 6px; border: none; background: transparent;
      font-size: 0.78rem; font-weight: 600; color: #555; cursor: pointer;
      border-bottom: 3px solid transparent; margin-bottom: -2px;
      white-space: nowrap; transition: color .1s;
    }
    .rec-editor-tab:hover { color: var(--er-navy); background: rgba(26,58,107,.06); }
    .rec-editor-tab.active {
      color: var(--er-navy); border-bottom-color: var(--er-navy);
      background: white; font-weight: 700;
    }

    /* ── Tableau des ingrédients ── */
    #rec-tab-ingredients { background: white; }
    #rec-lignes-list tr td { border-bottom: 1px solid #E8E8E8; }
    #rec-lignes-list tr:nth-child(even) { background: var(--er-row-alt); }
    #rec-lignes-list tr:hover { background: #D0E4FF; }
    #rec-lignes-foot td { background: #E8E8E8; border-top: 2px solid #C0C0C0; }
    .rl-computed { color: #333; }

    /* ── Panneau financier 3 colonnes ── */
    .rfin-lbl {
      padding: 5px 10px; font-size: 0.78rem; font-weight: 600;
      border-bottom: 1px solid #D0D0D0; white-space: nowrap; color: #222;
      background: #E8E8E8;
    }
    .rfin-val {
      padding: 5px 8px; font-size: 0.8rem; font-weight: 700;
      text-align: right; border-left: 1px solid #D0D0D0;
      border-bottom: 1px solid #D0D0D0; white-space: nowrap;
      background: white;
    }

    /* Couleurs spécifiques des libellés */
    .rfin-pn-lbl  { color: var(--er-pink) !important; font-weight: 800 !important; background: #FAF0FA !important; }
    .rfin-pn-val  { color: var(--er-pink) !important; font-weight: 800 !important; background: #FAF0FA !important; }
    .rfin-cm-lbl  { color: var(--er-blue) !important; font-weight: 700 !important; }
    .rfin-ht-lbl  { color: var(--er-navy) !important; font-weight: 800 !important; }
    .rfin-ht-val  { color: var(--er-navy) !important; font-weight: 800 !important; background: #EEF4FF !important; }
    .rfin-ttc-lbl { color: var(--er-green) !important; font-weight: 800 !important; background: #F0FAF0 !important; }
    .rfin-ttc-val { color: var(--er-green) !important; font-weight: 800 !important; background: #F0FAF0 !important; }
    .rfin-pe-lbl  { color: #CC3300 !important; }
    .rfin-pe-val  { color: #CC3300 !important; background: #FFF8F6 !important; }

    /* Colonne "Recette" et "Kg" → en-têtes violets, "Pièce/Portion" → vert */
    .rfin-col-recette { color: var(--er-purple) !important; font-weight: 800 !important; text-decoration: underline; }
    .rfin-col-kg      { color: var(--er-purple) !important; font-weight: 800 !important; text-decoration: underline; }
    .rfin-col-piece   { color: var(--er-green)  !important; font-weight: 800 !important; text-decoration: underline; }

    /* Héritage des couleurs inutilisées */
    .rec-summary-bar { display: none; }
    .rec-sum-item, .rec-sum-label, .rec-sum-val { display: none; }
    .rec-ing-row {
      display: grid; gap: 6px; padding: 7px 10px;
      border-bottom: 1px solid #f1f5f9; align-items: center;
      grid-template-columns: 1fr 70px 70px auto auto;
    }
    .rec-ing-row:nth-child(even) { background: #FAFAFA; }
    .rfin-lbl {
      padding: 5px 12px; font-size: 0.78rem; font-weight: 600;
      border-bottom: 1px solid #E8E0D0; white-space: nowrap; color: #374151;
    }
    .rfin-val {
      padding: 5px 10px; font-size: 0.8rem; font-weight: 700;
      text-align: right; border-left: 1px solid #E8E0D0;
      border-bottom: 1px solid #E8E0D0; white-space: nowrap;
    }
    /* Ingredient table rows */
    #rec-lignes-list tr td { padding: 5px 6px; border-bottom: 1px solid #F1F5F9; font-size: 0.8rem; vertical-align: middle; }
    #rec-lignes-list tr:nth-child(even) { background: #FAFAFA; }
    #rec-lignes-list tr:hover { background: #FDF8F0; }
    .rec-calc-result { background: white; border-radius: 8px; padding: 14px; margin: 10px; border: 1px solid #C8C8C8; }
    .rec-calc-result {
      background: white; border-radius: 12px; padding: 16px;
      margin: 12px; border: 1px solid var(--border);
    }
    .rec-calc-row {
      display: flex; justify-content: space-between;
      padding: 5px 0; font-size: 0.85rem;
      border-bottom: 1px solid #f1f5f9;
    }
    .rec-calc-row:last-child { border-bottom: none; }
    .rec-calc-row.total {
      font-weight: 800; font-size: 0.95rem; color: var(--primary);
      border-top: 2px solid var(--border); padding-top: 8px; margin-top: 4px;
    }
    /* ── ÉCONOMAT — TABLE EXCEL ─────────────────── */
    #rec-sub-economat { display: flex; flex-direction: column; flex: 1; overflow: clip; min-height: 0; }
    .eco-toolbar {
      display: flex; align-items: center; gap: 4px;
      background: var(--er-navy); padding: 6px 10px;
      flex-shrink: 0; flex-wrap: wrap; border-bottom: 2px solid #0D2247;
    }
    .eco-tbtn {
      background: #2D4F8A; border: 1px solid #4A6FAD; color: white;
      border-radius: 3px; padding: 5px 10px; font-size: 0.77rem; font-weight: 600;
      cursor: pointer; white-space: nowrap; transition: background .12s;
    }
    .eco-tbtn:hover:not([disabled]) { background: #3D62A0; }
    .eco-tbtn-new  { background: #1E6B3A; border-color: #2E8A4A; }
    .eco-tbtn-new:hover  { background: #277A44 !important; }
    .eco-tbtn-del:hover:not([disabled]) { background: #8A1A1A !important; border-color: #B02020; }
    .eco-tbtn-exp  { background: #1D6045; border-color: #2A7A59; }
    .eco-tbtn-exp:hover  { background: #256A4F !important; }
    .eco-tbtn[disabled]  { opacity: 0.38; cursor: default; }
    .eco-tb-sep { width: 1px; height: 22px; background: rgba(255,255,255,.22); margin: 0 3px; flex-shrink: 0; }
    .eco-filter-sel {
      padding: 4px 8px; background: white; border: 1px solid #AAA;
      border-radius: 3px; font-size: 0.77rem; cursor: pointer; color: #222;
    }
    .eco-filter-inp {
      padding: 4px 10px; background: white; border: 1px solid #AAA;
      border-radius: 3px; font-size: 0.77rem; width: 150px;
    }
    .eco-statusbar {
      background: #E8EDF5; border-bottom: 1px solid #C8D0DC;
      padding: 3px 12px; font-size: 0.73rem; color: #445; flex-shrink: 0;
    }
    .eco-table-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
    .eco-table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: auto; /* auto d'abord → JS mesure → passe en fixed après */
      font-size: 0.8rem; background: white;
    }
    .eco-table thead tr {
      background: var(--er-navy); color: white;
    }
    .eco-table thead th {
      padding: 7px 9px; text-align: center; font-size: 0.75rem; font-weight: 700;
      border-right: 1px solid rgba(255,255,255,.15); white-space: nowrap;
      background: var(--er-navy); overflow: hidden; user-select: none;
    }
    /* Poignée de redimensionnement des colonnes */
    .eco-th-resize {
      position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
      cursor: col-resize; z-index: 10; background: transparent;
    }
    .eco-th-resize:hover, .eco-th-resize.resizing {
      background: var(--er-cyan); opacity: .75;
    }
    .eco-table-resizing { cursor: col-resize !important; user-select: none !important; }
    .eco-table-resizing * { cursor: col-resize !important; }
    .eco-row { cursor: pointer; }
    .eco-row:hover td { background: #D8E4F4 !important; color: inherit !important; }
    .eco-row-alt td { background: #F4F7FC; }
    .eco-row-sel td { background: #4472C4 !important; color: white !important; }
    .eco-row-sel .eco-cell-nom   { color: white !important; }
    .eco-row-sel .eco-cell-prix  { color: #FFD0D0 !important; }
    .eco-row-sel .eco-cell-muted { color: rgba(255,255,255,0.75) !important; }
    .eco-row-sel .eco-cell-dim   { color: rgba(255,255,255,0.55) !important; }
    .eco-row-sel .eco-allerg-badge { background: rgba(255,255,255,.25) !important; color: white !important; }

    /* ── Cellule de base ─────────────────────── */
    .eco-cell {
      padding: 6px 10px;
      border-bottom: 1px solid #E2E7EE;
      border-right: 1px solid #EAECF2;
      vertical-align: middle;
      text-align: center;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: 0.81rem;
      color: #2A2E38;
    }
    .eco-table thead th:first-child { border-left: 1px solid rgba(255,255,255,.15); }
    .eco-table tbody td:first-child  { border-left: 1px solid #EAECF2; }

    /* ── Classes sémantiques (jamais inline) ─── */
    .eco-cell-num   { color: #A8AEBA; font-size: 0.72rem; }
    .eco-cell-nom   { font-weight: 600; color: var(--er-navy); text-align: left; }
    .eco-cell-prix  { font-weight: 700; color: var(--er-red); font-family: monospace; }
    .eco-cell-unite { color: #4A5568; text-align: center; }
    .eco-cell-muted { color: #4A5568; text-align: left; }   /* famille, fournisseur */
    .eco-cell-dim   { color: #7A8395; font-size: 0.74rem; } /* TVA, modifié le */
    .eco-cell-right { text-align: right; }
    .eco-cell-allerg { text-align: left; white-space: nowrap; }
    .eco-allerg-badge {
      display: inline-block; background: #FEF3C7; color: #92400E;
      border-radius: 4px; padding: 1px 6px; font-size: 0.68rem; font-weight: 700;
      margin: 1px 2px; white-space: nowrap; letter-spacing: 0.01em;
    }
    .eco-cell-rem { color: #5A6578; font-style: italic; font-size: 0.78rem; text-align: left; }
    .eco-dash     { color: #C4CADB; }  /* tiret — valeur vide */

    /* ── Historique prix table (Économat + Catalog) ────────────────── */
    .hist-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
    .hist-thead tr { background:var(--er-navy); color:white; position:sticky; top:0; z-index:2; }
    .hist-thead th { padding:7px 10px; text-align:left; white-space:nowrap; }
    .hist-thead th.r { text-align:right; }
    .hist-tbody tr.hist-row-odd  { background:#F8F9FB; }
    .hist-tbody tr.hist-row-even { background:white; }
    .hist-cell       { padding:5px 10px; vertical-align:middle; text-align:left; }
    .hist-cell-date  { font-size:0.74rem; color:#5A6578; white-space:nowrap; }
    .hist-cell-prix  { text-align:right; font-family:monospace; font-weight:700; color:var(--er-red); }
    .hist-cell-dash  { color:#C4CADB; font-family:monospace; }
    .hist-cell-four  { color:#4A5568; }
    .hist-cell-note  { color:#7A8395; font-style:italic; font-size:0.77rem; }
    .hist-empty      { text-align:center; padding:36px; color:#AAA; font-size:0.88rem; }

    /* ── Calcul de Recette — détail composition SF ─────────────── */
    .calc-sf-subheader,
    .calc-sf-detail {
      width: 420px;
      margin-left: auto;
      margin-right: auto;
    }
    .calc-sf-subheader {
      display: block;
      text-align: left;
      font-size: 0.72rem;
      font-style: italic;
      color: #92400E;
    }
    .calc-sf-detail {
      display: grid;
      grid-template-columns: 28px 1fr;
      align-items: center;
    }
    .calc-sf-arrow {
      width: 28px;
      text-align: center;
      opacity: 0.6;
      font-size: 0.75rem;
      color: var(--muted);
    }
    .calc-sf-name {
      text-align: left;
      font-size: 0.75rem;
      color: var(--muted);
    }
    @media (max-width: 699px) {
      .calc-sf-subheader,
      .calc-sf-detail {
        width: min(320px, 92%);
      }
    }

    /* ── Mode Élève — masquage données financières ──────────────── */
    /* Colonnes prix onglet Recette */
    body.er-mode-eleve .rec-col-prix-ht,
    body.er-mode-eleve .rec-col-pct-prix { display: none !important; }
    /* Lignes financières panneau résumé */
    body.er-mode-eleve .rfin-financial-row { display: none !important; }
    /* Colonne prix + lignes résumé calcul */
    body.er-mode-eleve .cc-col-prix { display: none !important; }
    body.er-mode-eleve .cc-financial { display: none !important; }
    /* Bouton actif */
    body.er-mode-eleve #btn-mode-eleve {
      background: #1D4ED8 !important;
      color: white !important;
      border-color: #1D4ED8 !important;
    }

    /* Ingredient editor modal */
    #rec-ing-panel {
      position: fixed; inset: 0; z-index: 500;
      background: rgba(0,0,0,.5); display: flex;
      align-items: flex-end; justify-content: center;
    }
    .rec-ing-modal {
      background: white; border-radius: var(--modal-radius) var(--modal-radius) 0 0;
      padding: var(--modal-padding); width: 100%; max-width: 560px;
      max-height: 90dvh; overflow-y: auto;
    }
    @media (min-width: 600px) {
      .rec-ing-modal {
        border-radius: var(--modal-radius); margin: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,.3);
      }
    }
    .rec-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
    .rec-field label { font-size: 0.78rem; font-weight: 700; color: #374151; }
    .rec-field input, .rec-field select, .rec-field textarea {
      padding: 9px 12px; border: 2px solid var(--border); border-radius: 9px;
      font-size: 0.88rem; font-family: inherit; transition: border-color var(--dur-sm) var(--ease-out);
    }
    .rec-field input:focus, .rec-field select:focus, .rec-field textarea:focus {
      outline: none; border-color: var(--primary);
    }
    /* ── ÉCONOMAT v2 ─────────────────────────────── */
    /* Ingredient form — wider modal */
    .rec-ing-modal { max-width: 700px !important; }
    .rec-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .rec-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
    .rec-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
    .rec-field-row { display: flex; gap: 6px; align-items: flex-end; }
    .rec-field-row .rec-field { flex: 1; margin-bottom: 0; }
    .rec-add-btn {
      background: var(--er-navy); color: white; border: none;
      border-radius: 8px; padding: 0 10px; height: 38px;
      cursor: pointer; font-size: 1rem; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .rec-field-calc { background: #F4F6FA; color: #555; border-color: #D0D5DD !important; cursor: default; }
    /* Sort icons in table headers */
    .eco-th-sort { cursor: pointer; position: relative; padding-right: 20px !important; }
    .eco-th-sort::after { content: ' ⇅'; opacity: 0.4; font-size: 0.7em; }
    .eco-th-sort.asc::after  { content: ' ↑'; opacity: 1; color: var(--er-cyan); }
    .eco-th-sort.desc::after { content: ' ↓'; opacity: 1; color: var(--er-cyan); }
    /* Usage eye button */
    .eco-eye-btn {
      background: none; border: none; cursor: pointer;
      color: var(--er-navy); font-size: 1rem; padding: 2px 4px;
      border-radius: 4px; transition: background var(--dur-xs) var(--ease-out);
    }
    .eco-eye-btn:hover { background: rgba(26,58,107,.12); }
    /* Usages popup */
    #eco-usages-popup {
      position: fixed; z-index: 600; background: white;
      border: 1.5px solid var(--er-navy); border-radius: var(--modal-radius-sm);
      box-shadow: 0 8px 30px rgba(0,0,0,.2);
      padding: 16px; min-width: 480px; max-width: 620px;
      max-height: 70dvh; overflow-y: auto;
    }
    /* Filter panel dropdown */
    .eco-filter-panel-wrap { position: relative; }
    #eco-filter-panel,
    .eco-filter-panel {
      position: absolute; top: 100%; left: 0; z-index: 400;
      background: white; border: 1.5px solid var(--border);
      border-radius: var(--modal-radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.15);
      padding: 14px; min-width: 280px;
    }
    #eco-filter-panel { display: none; }
    /* ── Settings Panel ── */
    #eco-settings-panel {
      position: fixed; inset: 0; z-index: 550;
      background: var(--overlay-bg); display: flex;
      align-items: center; justify-content: center;
    }
    .eco-settings-modal {
      background: white; border-radius: var(--modal-radius);
      width: 94vw; max-width: 920px; height: 86dvh;
      display: flex; flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden;
    }
    .eco-settings-header {
      background: var(--er-navy); color: white;
      padding: var(--modal-header-padding); display: flex; align-items: center;
      justify-content: space-between; flex-shrink: 0;
    }
    .eco-settings-body { display: flex; flex: 1; min-height: 0; }
    .eco-settings-sidebar {
      width: 162px; flex-shrink: 0; background: #F2F4F8;
      border-right: 2px solid #DDE2EC;
      display: flex; flex-direction: column;
      padding: 10px 7px; gap: 3px; overflow-y: auto;
    }
    .eco-stab {
      background: transparent; border: none; border-radius: 8px;
      padding: 10px 12px; text-align: left; cursor: pointer;
      font-size: 0.8rem; font-weight: 600; color: #555;
      transition: background .12s, color .12s;
    }
    .eco-stab:hover { background: #E2E8F4; color: var(--er-navy); }
    .eco-stab.active { background: var(--er-navy); color: white; }
    .eco-settings-content { flex: 1; overflow-y: auto; padding: 18px; min-height: 0; }
    /* Fournisseur form */
    .fourn-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .fourn-form-field { display: flex; flex-direction: column; gap: 3px; }
    .fourn-form-field label { font-size: 0.72rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .03em; }
    .fourn-form-field input {
      padding: 7px 10px; border: 1.5px solid var(--border);
      border-radius: 8px; font-size: 0.84rem; font-family: inherit;
    }
    .fourn-form-field input:focus { border-color: var(--er-navy); outline: none; }
    /* Column order items */
    .col-order-item {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 10px; margin-bottom: 4px;
      background: #F8F9FB; border: 1.5px solid #E0E4EA;
      border-radius: 7px; cursor: grab; user-select: none;
      transition: background .1s, border-color .1s;
    }
    .col-order-item:hover { background: #EEF2FF; border-color: var(--er-navy); }
    .col-order-item.dragging { opacity: .45; border-style: dashed; }
    .col-order-item.drag-over { background: #DBEAFE; border-color: var(--er-cyan); }
    .col-order-item.fixed-col { background: #F0F0F0; cursor: default; color: #999; }
    .col-drag-handle { color: #BBB; font-size: 1.1rem; cursor: grab; flex-shrink: 0; }
    .col-label { flex: 1; font-size: 0.83rem; font-weight: 600; color: var(--er-navy); }
    .col-move-btns { display: flex; gap: 2px; }
    .col-move-btn {
      background: white; border: 1px solid #DDD; border-radius: 4px;
      padding: 2px 6px; cursor: pointer; font-size: 0.75rem; color: #555;
    }
    .col-move-btn:hover { background: var(--er-navy); color: white; border-color: var(--er-navy); }
    /* Fourn item list */
    .fourn-item {
      padding: 9px 12px; cursor: pointer; font-size: 0.85rem;
      border-bottom: 1px solid #F0F0F0; transition: background var(--dur-xs) var(--ease-out);
    }
    .fourn-item:hover { background: #EEF2FF; }
    .fourn-item.sel { background: var(--er-navy); color: white; font-weight: 700; }

    /* ══════════════════════════════════════════════════════════════
       MICRO-INTERACTIONS — v2.0
       Animations légères, 60fps garanti, jamais gadget
    ══════════════════════════════════════════════════════════════ */

    /* ── 1. BOUNCE — feedback clic tactile ──────────────────────── */
    @keyframes ic-bounce {
      0%   { transform: scale(1);    }
      30%  { transform: scale(0.87); }
      65%  { transform: scale(1.09); }
      100% { transform: scale(1);    }
    }
    .ic-bounce {
      animation: ic-bounce 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* ── 2. PULSE — boutons d'ajout (Nouveau / +) ───────────────── */
    @keyframes ic-pulse {
      0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(200,144,42,0); }
      50%  { transform: scale(1.15); box-shadow: 0 0 0 8px  rgba(200,144,42,0.30); }
      100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(200,144,42,0); }
    }
    .ic-pulse {
      animation: ic-pulse 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* ── 3. RIPPLE — vague au clic (desktop) ───────────────────── */
    @keyframes ic-ripple {
      0%   { transform: scale(0); opacity: 0.35; }
      100% { transform: scale(2.4); opacity: 0; }
    }
    .ic-ripple-wrap { position: relative; overflow: hidden; }
    .ic-ripple-dot {
      position: absolute; border-radius: 50%;
      background: rgba(255,255,255,0.45);
      width: 40px; height: 40px;
      margin-left: -20px; margin-top: -20px;
      pointer-events: none;
      animation: ic-ripple 380ms ease-out forwards;
    }

    /* ── 4. NAV principale — onglet actif amélioré ──────────────── */
    #main-nav {
      position: relative;
    }
    #main-nav button {
      position: relative;
      transition: color .18s ease, background .18s ease, transform .15s ease;
      transform-origin: center bottom;
    }
    #main-nav button:not(.active):hover {
      color: var(--primary);
      background: rgba(200,144,42,0.05);
      transform: translateY(-1px);
    }
    #main-nav button.active {
      color: var(--primary);
      font-weight: 800;
      transform: scale(1.04);
      background: linear-gradient(to bottom, transparent, rgba(200,144,42,0.07));
    }
    /* Indicateur actif : pill luisant */
    #main-nav button.active::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 28px; height: 3px;
      background: var(--primary);
      border-radius: 3px 3px 0 0;
      box-shadow: 0 0 6px rgba(200,144,42,0.55);
      animation: nav-indicator-in 200ms cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes nav-indicator-in {
      from { width: 0; opacity: 0; }
      to   { width: 28px; opacity: 1; }
    }

    /* ── 5. SOUS-NAV Recettes — subbtn actif ────────────────────── */
    .rec-subbtn {
      transition: color .15s ease, background .15s ease, transform .15s ease !important;
      transform-origin: center bottom;
      position: relative;
    }
    .rec-subbtn:not(.active):hover {
      color: white !important;
      background: rgba(255,255,255,0.06) !important;
      transform: translateY(-1px);
    }
    .rec-subbtn.active {
      transform: scale(1.05) !important;
    }
    /* Pas de ::after pill — le border-bottom pleine largeur suffit */
    .rec-subbtn.active::after { display: none !important; }

    /* ── 6. BOUTONS TOOLBAR (eco-tbtn) — hover & clic ───────────── */
    .eco-tbtn {
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease !important;
      transform-origin: center;
    }
    .eco-tbtn:not([disabled]):hover {
      filter: brightness(1.15);
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    }
    .eco-tbtn:not([disabled]):active {
      transform: scale(0.93) translateY(0);
      filter: brightness(0.95);
    }
    /* Bouton Nouveau : lueur verte au hover */
    .eco-tbtn-new:not([disabled]):hover {
      box-shadow: 0 3px 12px rgba(30,107,58,0.35);
    }
    /* Bouton Export : lueur verte */
    .eco-tbtn-exp:not([disabled]):hover {
      box-shadow: 0 3px 12px rgba(29,96,69,0.35);
    }
    /* Bouton supprimer : lueur rouge */
    .eco-tbtn-del:not([disabled]):hover {
      box-shadow: 0 3px 12px rgba(139,26,26,0.35);
    }

    /* ── 7. HOME CARDS — hover lift premium ─────────────────────── */
    .home-card {
      transition: background .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease !important;
    }
    .home-card:hover {
      transform: translateY(-2px) !important;
      box-shadow: var(--shadow-md) !important;
    }
    .home-card:active {
      transform: translateY(-1px) scale(0.98) !important;
    }

    /* ── 8. TABLEAU — ligne sélectionnée spring ─────────────────── */
    .eco-row {
      transition: background .1s ease;
    }
    .eco-row-sel {
      animation: row-select-in 180ms cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes row-select-in {
      from { background: rgba(200,144,42,0); }
      50%  { background: rgba(200,144,42,0.18); }
      to   { background: var(--er-sel); }
    }

    /* ── 9. BTN-ICON (header) — hover ───────────────────────────── */
    .btn-icon {
      transition: background .12s ease, transform .12s ease !important;
    }
    .btn-icon:hover {
      background: rgba(255,255,255,0.25) !important;
      transform: translateY(-1px);
    }
    .btn-icon:active {
      transform: scale(0.92);
    }

    /* ── 10. TOAST — entrée spring ──────────────────────────────── */
    @keyframes toast-in {
      from { transform: translateX(-50%) translateY(16px) scale(0.92); opacity: 0; }
      60%  { transform: translateX(-50%) translateY(-3px)  scale(1.02); }
      to   { transform: translateX(-50%) translateY(0)     scale(1);    opacity: 1; }
    }
    @keyframes toast-out {
      from { transform: translateX(-50%) translateY(0) scale(1);    opacity: 1; }
      to   { transform: translateX(-50%) translateY(8px) scale(0.94); opacity: 0; }
    }
    .toast-enter { animation: toast-in  260ms cubic-bezier(.34,1.56,.64,1) both; }
    .toast-leave { animation: toast-out 180ms ease-in both; }

    /* ══════════════════════════════════════════════════════════════
       PREMIUM UI SYSTEM v4.0 — MITRONÉO
       Couverture universelle · 60fps · CSS-first · < 200ms
       Philosophie : chaque élément cliquable donne un retour physique
    ══════════════════════════════════════════════════════════════ */

    /* ── Variables temporelles & courbes premium ─────────────────── */
    :root {
      --ease-out    : cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring : cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-smooth : cubic-bezier(0.4, 0, 0.2, 1);
      --dur-xs : 80ms;
      --dur-sm : 150ms;
      --dur-md : 200ms;
      --dur-lg : 300ms;
      /* Radius généreux — style boulangerie moderne */
      --radius      : 18px;
      --radius-pill : 50px;
      /* Ombres premium chaudes */
      --shadow-sm : 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-md : 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
      --shadow-lg : 0 10px 32px rgba(0,0,0,0.12), 0 3px 10px rgba(0,0,0,0.06);
      --shadow-warm : 0 4px 20px rgba(200,144,42,0.15), 0 1px 4px rgba(0,0,0,0.06);
      --glow-primary : 0 0 0 3px rgba(200,144,42,0.22);
      --glow-subtle  : 0 0 0 3px rgba(200,144,42,0.12);
      /* Radius unifié */
      --radius-sm: 6px;   --radius-md: 8px;
      --radius-lg: 12px;  --radius-xl: 20px;
      /* Transitions raccourcis */
      --transition-fast:   all var(--dur-sm) var(--ease-out);
      --transition-smooth: all var(--dur-md) var(--ease-smooth);
      /* ── MODAL SYSTEM v1 ────────────────────────────────────────── */
      --modal-radius      : 18px;   /* modales centrées (bilan, prog, settings) */
      --modal-radius-sm   : 10px;   /* dropdowns légers (filter, usages, export) */
      --modal-padding     : 20px;   /* padding body standard */
      --modal-header-padding : 14px 20px; /* padding header interne */
      --modal-footer-gap  : 16px 20px;    /* padding footer / zone boutons */
      --overlay-bg        : rgba(0,0,0,0.48); /* fond overlay générique */
      /* ── TABLE SYSTEM v1 ────────────────────────────────────────── */
      --table-padding-y       : 9px;      /* cellule standard */
      --table-padding-x       : 12px;
      --table-padding-y-tight : 5px;      /* cellule compacte (prog-table) */
      --table-font-size       : 0.82rem;
      --table-header-font-size: 0.72rem;
      --table-row-hover       : rgba(200,144,42,0.06);
      --table-zebra           : rgba(0,0,0,0.025);
      --table-radius          : 12px;
    }

    /* ── A. BOUTONS — feedback tactile iOS ──────────────────────── */
    .btn {
      transition:
        transform   0.18s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow  0.18s cubic-bezier(0.4, 0, 0.2, 1),
        opacity     var(--dur-xs) var(--ease-smooth),
        filter      var(--dur-sm) var(--ease-smooth),
        background  var(--dur-sm) var(--ease-smooth) !important;
      will-change: transform;
    }
    .btn:active {
      transform: scale(0.92) !important;
      opacity: 0.84 !important;
    }
    @media (hover: hover) {
      .btn-primary:hover {
        background: #3d2f22 !important;
        box-shadow: 0 14px 36px rgba(47,36,27,0.32) !important;
        transform: translateY(-2px) !important;
      }
      .btn-outline:hover {
        border-color: var(--primary) !important;
        color: var(--primary) !important;
        transform: translateY(-2px) !important;
        box-shadow: var(--shadow-sm) !important;
      }
    }

    /* ── B. ONGLETS GROUPES (gtab) — pill premium ───────────────── */
    .gtab {
      transition:
        background  var(--dur-sm) var(--ease-smooth),
        color       var(--dur-sm) var(--ease-smooth),
        border-color var(--dur-sm) var(--ease-smooth),
        transform   var(--dur-sm) var(--ease-spring),
        box-shadow  var(--dur-sm) var(--ease-smooth) !important;
      will-change: transform;
    }
    .gtab:active {
      transform: scale(0.92) !important;
      transition-duration: var(--dur-xs) !important;
    }
    .gtab.active {
      box-shadow: 0 3px 14px rgba(200,144,42,0.40) !important;
    }
    @media (hover: hover) {
      .gtab:not(.active):hover {
        border-color: var(--primary) !important;
        color: var(--primary) !important;
        transform: translateY(-1px) !important;
        box-shadow: var(--shadow-sm) !important;
      }
    }

    /* ── C. LISTE ÉLÈVES — ligne interactive ────────────────────── */
    .student-row {
      transition:
        border-color var(--dur-sm) var(--ease-smooth),
        transform    var(--dur-sm) var(--ease-spring),
        box-shadow   var(--dur-sm) var(--ease-smooth) !important;
      will-change: transform;
    }
    .student-row:active {
      transform: scale(0.99) !important;
      transition-duration: var(--dur-xs) !important;
    }
    @media (hover: hover) {
      .student-row:hover {
        border-color: var(--primary) !important;
        transform: translateY(-1px) !important;
        box-shadow: var(--shadow-md) !important;
      }
    }

    /* ── D. BOUTONS SÉANCE — feedback spring ────────────────────── */
    .seance-btn {
      transition:
        border-color var(--dur-sm) var(--ease-smooth),
        background   var(--dur-sm) var(--ease-smooth),
        color        var(--dur-sm) var(--ease-smooth),
        transform    var(--dur-sm) var(--ease-spring) !important;
      will-change: transform;
    }
    .seance-btn:active {
      transform: scale(0.9) !important;
      transition-duration: var(--dur-xs) !important;
    }
    .seance-btn.active {
      transform: scale(1.08) !important;
      box-shadow: 0 3px 14px rgba(200,144,42,0.42) !important;
    }
    @media (hover: hover) {
      .seance-btn:not(.active):hover {
        border-color: var(--primary) !important;
        color: var(--primary) !important;
        transform: translateY(-1px) !important;
      }
    }

    /* ── E. DIPLOMA CARDS — spring au clic ─────────────────────── */
    .diploma-card {
      transition:
        border-color var(--dur-sm) var(--ease-smooth),
        background   var(--dur-sm) var(--ease-smooth),
        transform    var(--dur-sm) var(--ease-spring) !important;
    }
    .diploma-card:active {
      transform: scale(0.95) !important;
      transition-duration: var(--dur-xs) !important;
    }
    .diploma-card.selected {
      transform: scale(1.02) !important;
      box-shadow: 0 2px 14px rgba(200,144,42,0.25) !important;
    }

    /* ── F. CARTES — hover lift (desktop) ───────────────────────── */
    @media (hover: hover) {
      .card {
        transition: box-shadow var(--dur-sm) var(--ease-smooth),
                    transform  var(--dur-sm) var(--ease-smooth) !important;
      }
      .card:hover {
        box-shadow: var(--shadow-lg) !important;
        transform: translateY(-2px) !important;
      }
    }

    /* ── G. INPUTS — focus ring premium ────────────────────────── */
    input, textarea, select {
      transition:
        border-color var(--dur-sm) var(--ease-smooth),
        box-shadow   var(--dur-sm) var(--ease-smooth) !important;
    }
    input:focus, textarea:focus, select:focus {
      outline: none;
      border-color: var(--primary) !important;
      box-shadow: var(--glow-subtle) !important;
    }

    /* ── H. TRANSITIONS ÉCRANS — entrée douce ───────────────────── */
    @keyframes screen-enter {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0);    }
    }
    .screen.active {
      animation: screen-enter var(--dur-md) var(--ease-out) both;
    }

    /* ── I. PANEL SHEET — slide-up premium ──────────────────────── */
    @keyframes panel-slide-up {
      from { transform: translateY(20px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    .panel-sheet {
      animation: panel-slide-up var(--dur-lg) var(--ease-out) both;
    }

    /* ── J. MODAL ENTER — fade + rise discret ───────────────────── */
    @keyframes modal-enter {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0);   }
    }
    .bilan-modal-box,
    .prog-modal-box,
    .settings-window:not(.fullscreen),
    .eco-settings-modal,
    .rec-ing-modal {
      animation: modal-enter 200ms var(--ease-out) both;
    }

    /* ── K. HOME CARD — hover lift premium (override v2) ────────── */
    .home-card {
      transition:
        background  var(--dur-sm) var(--ease-smooth),
        transform   var(--dur-md) var(--ease-spring),
        box-shadow  var(--dur-sm) var(--ease-smooth) !important;
    }
    @media (hover: hover) {
      .home-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: var(--shadow-md) !important;
      }
    }
    .home-card:active {
      transform: scale(0.95) !important;
      transition-duration: var(--dur-xs) !important;
    }

    /* ══════════════════════════════════════════════════════════════
       DESKTOP LAYOUT — Sidebar + Grid (≥700px)
    ══════════════════════════════════════════════════════════════ */

    /* Sidebar invisible sur mobile */
    #desktop-sidebar { display: none; }

    @media (min-width: 700px) {

      /* ── App : grille 2 colonnes ─────────────────────────────── */
      #app {
        display: grid !important;
        grid-template-columns: 220px 1fr;
        grid-template-rows: 56px 1fr;
        height: 100dvh;
        overflow: hidden;
      }

      /* ── Sidebar ─────────────────────────────────────────────── */
      #desktop-sidebar {
        display: flex;
        flex-direction: column;
        grid-column: 1;
        grid-row: 1 / 3;       /* couvre header + main */
        height: 100dvh;
        background: #FFFBF4;
        border-right: 1px solid rgba(200,144,42,0.13);
        padding: 10px 7px 8px;        /* compressé : 16/10/12 → 10/7/8 */
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        z-index: 10;
        flex-shrink: 0;
      }
      #desktop-sidebar::-webkit-scrollbar { display: none; }

      .ds-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px 10px;       /* compressé : 10/12/18 → 6/10/10 */
      }
      .ds-logo-name {
        display: block;
        font-size: 0.92rem;           /* compressé : 1rem → 0.92rem */
        font-weight: 800;
        color: var(--header);
        letter-spacing: -0.02em;
      }
      .ds-logo-sub  {
        display: block;
        font-size: 0.56rem;           /* compressé : 0.62rem → 0.56rem */
        color: var(--muted);
        letter-spacing: 0.02em;
        margin-top: 1px;
      }

      .ds-nav { flex: 1; display: flex; flex-direction: column; gap: 1px; }

      .ds-btn {
        display: flex;
        align-items: center;
        gap: 9px;                     /* compressé : 10 → 9 */
        padding: 6px 11px;            /* compressé : 9/14 → 6/11 */
        border-radius: 10px;          /* compressé : 12 → 10 */
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 0.78rem;           /* compressé : 0.83 → 0.78 */
        font-weight: 500;
        color: var(--text);
        opacity: 0.55;
        text-align: left;
        width: 100%;
        transition:
          background  120ms var(--ease-smooth),
          opacity     120ms var(--ease-smooth),
          color       120ms var(--ease-smooth),
          transform   100ms var(--ease-spring);
        font-family: inherit;
        white-space: nowrap;
      }
      .ds-btn:hover {
        background: rgba(200,144,42,0.09);
        opacity: 0.85;
        transform: translateX(2px);
      }
      .ds-btn:active {
        transform: scale(0.96) translateX(0) !important;
        transition-duration: 80ms !important;
      }
      .ds-btn.active {
        background: rgba(200,144,42,0.13);
        color: #5a3010;
        font-weight: 700;
        opacity: 1;
        border-left: 3px solid var(--primary);
        padding-left: 8px;            /* ajusté : 11 - 3px border = 8 */
      }
      .ds-btn.active .ds-icon { filter: drop-shadow(0 0 4px rgba(200,144,42,0.45)); }

      .ds-icon  { font-size: 0.98rem; flex-shrink: 0; line-height: 1; }
      .ds-label { font-size: 0.78rem; }

      .ds-footer {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(0,0,0,0.06);
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .ds-sync-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 3px 11px;
        margin-top: 1px;
        font-size: 0.72rem;
      }
      .ds-sync-label { font-size: 0.68rem; color: var(--muted); }

      /* ── Header desktop — barre légère ───────────────────────── */
      #app > header {
        grid-column: 2;
        grid-row: 1;
        background: var(--bg) !important;
        border-bottom: 1px solid var(--border);
        padding: 0 20px;
        height: 56px;
        min-height: 56px;
        box-shadow: none;
      }
      #app > header h1    { color: var(--header) !important; font-size: 1rem; }
      #app > header .header-sub { color: var(--muted) !important; }
      #app > header .btn-icon {
        background: rgba(44,24,16,0.07) !important;
        color: var(--header) !important;
        border-radius: 10px;
      }
      #app > header .btn-icon:hover { background: rgba(200,144,42,0.12) !important; }
      /* Masque le bouton home (déjà dans la sidebar) */
      #app > header > button:first-child { display: none !important; }

      /* ── Nav principale — masquée sur desktop ─────────────────── */
      #app > nav#main-nav {
        display: none !important;
      }

      /* ── Main — prend la deuxième colonne/ligne ───────────────── */
      #app > main {
        grid-column: 2;
        grid-row: 2;
        overflow: hidden;
      }

      /* ── FAB — repositionné (pas de bottom nav sur desktop) ──── */
      #main-fab { bottom: 24px !important; right: 24px !important; }

      /* ── Dashboard content padding ───────────────────────────── */
      #dashboard-content { padding: 20px 24px 80px !important; }
    }

    /* ── Dark mode sidebar ─────────────────────────────────────── */
    @media (min-width: 700px) and (prefers-color-scheme: dark) {
      #desktop-sidebar {
        background: #181411 !important;
        border-right-color: #2E2820 !important;
      }
      .ds-btn { color: #D0CBB8; }
      .ds-btn:hover { background: rgba(200,144,42,0.10) !important; }
      .ds-btn.active {
        background: rgba(200,144,42,0.18) !important;
        color: var(--primary);
      }
      .ds-logo-name { color: #EDE8E0; }
      .ds-footer { border-top-color: rgba(255,255,255,0.07); }
      #app > header { background: #1D1A16 !important; border-bottom-color: #342E26 !important; }
      #app > header h1 { color: #EDE8E0 !important; }
    }

    /* ══════════════════════════════════════════════════════════════
       DASHBOARD HERO + CARDS D'ACTION
    ══════════════════════════════════════════════════════════════ */
    .dash-hero {
      background: linear-gradient(135deg, #fffdf8 0%, #f6eadb 100%);
      border-radius: 32px;
      padding: 42px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      box-shadow: 0 18px 45px rgba(80,50,20,0.10);
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(120,72,32,0.08);
    }
    .dash-hero::before { content: none; }
    .dash-hero::after  { content: none; }

    /* Pré-titre — masqué, conservé pour usage futur */
    .dash-hero-pretitle { display: none; }

    .dash-hero-title {
      font-size: 2.125rem;
      font-weight: 800;
      color: #2f241b;
      line-height: 1.1;
      letter-spacing: -0.04em;
      margin-bottom: 10px;
    }
    .dash-hero-subtitle {
      font-size: 1rem;
      color: rgba(47,36,27,0.68);
      font-weight: 400;
      line-height: 1.55;
      max-width: 560px;
    }
    .dash-hero-badge {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--primary);
      margin-top: 16px;
      background: rgba(200,144,42,0.09);
      border-radius: 50px;
      padding: 5px 14px;
      display: inline-block;
      border: 1px solid rgba(200,144,42,0.16);
    }
    .dash-hero-illustration {
      font-size: 3.6rem;
      flex-shrink: 0;
      filter: drop-shadow(0 3px 8px rgba(120,72,32,0.15));
      transform: rotate(-8deg);
      opacity: 0.80;
    }

    /* ── Section "Dernière activité" ────────────────────────────── */
    .dash-activity-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
    }
    @media (max-width: 500px) {
      .dash-activity-row { grid-template-columns: 1fr; }
    }
    .dash-activity-card {
      background: rgba(255,255,255,0.85);
      border-radius: 18px;
      padding: 16px 18px;
      border: 1px solid rgba(120,72,32,0.08);
      box-shadow: 0 4px 14px rgba(60,40,20,0.05);
    }
    .dact-label {
      font-size: 0.67rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      color: rgba(107,63,29,0.50);
      margin-bottom: 8px;
    }
    .dact-main {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--header);
      letter-spacing: -0.01em;
      line-height: 1.3;
      margin-bottom: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dact-meta {
      font-size: 0.72rem;
      color: var(--muted);
      opacity: 0.80;
      line-height: 1.4;
    }
    .dact-badge {
      display: inline-block;
      font-size: var(--text-xs);
      font-weight: 700;
      padding: 3px 8px;
      border-radius: var(--radius-pill);
      background: rgba(22,163,74,0.10);
      color: var(--success);
      border: 1px solid rgba(22,163,74,0.20);
      margin-left: 6px;
    }
    .dact-empty {
      font-size: 0.80rem;
      color: var(--muted);
      opacity: 0.60;
      font-style: italic;
    }

    /* ── Mini-dashboard métier ──────────────────────────────────── */
    .dash-kpi-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 0;
    }
    .dash-kpi-card {
      background: rgba(255,255,255,0.88);
      border-radius: var(--radius-xl);
      padding: 18px 18px 14px;
      border: 1px solid rgba(120,72,32,0.08);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition:
        transform  var(--dur-md) var(--ease-smooth),
        box-shadow var(--dur-md) var(--ease-smooth);
      text-align: left;
      backdrop-filter: blur(4px);
    }
    .dash-kpi-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: rgba(200,144,42,0.20);
    }
    .dash-kpi-card:active {
      transform: scale(0.97) !important;
      transition-duration: 70ms !important;
    }
    .dkpi-value {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--header);
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 5px;
    }
    .dkpi-label {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--header);
      letter-spacing: -0.01em;
    }
    .dkpi-sub {
      font-size: 0.67rem;
      color: var(--muted);
      opacity: 0.72;
      margin-top: 2px;
    }

    /* ── Accès rapides ──────────────────────────────────────────── */
    .dash-quick-access {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 22px;
    }
    @media (max-width: 600px) {
      .dash-quick-access { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 380px) {
      .dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
      .dash-kpi-row .dash-kpi-card:last-child { grid-column: 1 / -1; }
    }
    .dqa-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 14px;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(120,72,32,0.09);
      border-radius: 14px;
      font-size: 0.79rem;
      font-weight: 600;
      color: var(--header);
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      transition:
        background   140ms var(--ease-smooth),
        transform    140ms var(--ease-spring),
        box-shadow   140ms var(--ease-smooth),
        border-color 140ms var(--ease-smooth);
      box-shadow: 0 2px 8px rgba(60,40,20,0.05);
    }
    .dqa-btn:hover {
      background: #fff8ee;
      border-color: rgba(200,144,42,0.25);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(60,40,20,0.10);
    }
    .dqa-btn:active {
      transform: scale(0.95) !important;
      transition-duration: 60ms !important;
    }
    .dqa-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }

    /* ── Cartes d'action Apple-like ────────────────────────────── */
    .dash-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 32px;
    }
    @media (max-width: 560px) {
      .dash-actions { grid-template-columns: 1fr; gap: 12px; }
    }
    .dash-action-card {
      background: rgba(255,255,255,0.86);
      border-radius: var(--radius-xl);
      padding: 28px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      border: 1px solid rgba(120,72,32,0.07);
      transition:
        transform    var(--dur-md) var(--ease-smooth),
        box-shadow   var(--dur-md) var(--ease-smooth),
        border-color var(--dur-md) var(--ease-out);
      box-shadow: var(--shadow-md);
      position: relative;
    }
    .dash-action-card::after { content: none; }
    .dash-action-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: rgba(200,144,42,0.22);
    }
    .dash-action-card:active {
      transform: scale(0.97) !important;
      transition-duration: 80ms !important;
    }
    .dac-icon  {
      font-size: 2.2rem;
      line-height: 1;
      margin-bottom: 4px;
    }
    .dac-title {
      font-size: 0.97rem;
      font-weight: 700;
      color: #2f241b;
      letter-spacing: -0.015em;
      line-height: 1.25;
    }
    .dac-desc  {
      font-size: 0.78rem;
      color: var(--muted);
      line-height: 1.45;
      opacity: 0.72;
    }

    /* Carte principale — fond légèrement plus chaud, sans scale */
    .dash-action-card--primary {
      background: #fffbf4 !important;
      border: 1px solid rgba(200,144,42,0.14) !important;
      box-shadow: 0 12px 36px rgba(120,72,32,0.10) !important;
    }
    .dash-action-card--primary .dac-title { color: #3d2210; }
    @media (hover: hover) {
      .dash-action-card--primary:hover {
        box-shadow: var(--shadow-warm) !important;
        transform: translateY(-2px) !important;
      }
    }
    .dash-action-card--primary:active { transform: scale(0.97) !important; }

    /* Titre de section dashboard */
    .dash-section-title {
      font-size: 0.70rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(107,63,29,0.55);
      margin-bottom: 14px;
      padding-left: 4px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .dash-section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(200,144,42,0.15);
      border-radius: 1px;
    }

    /* Profondeur visuelle — blocs de section */
    .dash-section-block {
      background: rgba(255,252,246,0.72);
      border-radius: 24px;
      padding: 20px;
      margin-bottom: 16px;
      border: 1px solid rgba(200,144,42,0.07);
      box-shadow: 0 2px 12px rgba(60,40,20,0.04);
    }

    /* Dark mode dashboard */
    @media (prefers-color-scheme: dark) {
      .dash-hero {
        background: linear-gradient(135deg, #231c14 0%, #2e1e0e 100%);
        border-color: rgba(200,144,42,0.12);
        box-shadow: 0 18px 45px rgba(0,0,0,0.32);
      }
      .dash-hero-title    { color: #EDE8E0; }
      .dash-hero-subtitle { color: rgba(237,232,224,0.55); }
      .dash-hero-badge { color: var(--primary); background: rgba(200,144,42,0.13); border-color: rgba(200,144,42,0.22); }
      .dash-kpi-card {
        background: rgba(29,26,22,0.90);
        border-color: rgba(120,72,32,0.15);
      }
      .dkpi-value { color: #EDE8E0; }
      .dkpi-label { color: #D0CBB8; }
      .dqa-btn {
        background: rgba(29,26,22,0.75);
        border-color: rgba(120,72,32,0.14);
        color: #D0CBB8;
      }
      .dqa-btn:hover { background: rgba(51,34,18,0.90); border-color: rgba(200,144,42,0.28); }
      .dash-action-card {
        background: rgba(29,26,22,0.95);
        border-color: rgba(120,72,32,0.18);
        box-shadow: 0 8px 24px rgba(0,0,0,0.30);
        backdrop-filter: none;
      }
      .dash-action-card:hover {
        box-shadow: 0 16px 40px rgba(0,0,0,0.45);
        border-color: rgba(200,144,42,0.40);
      }
      .dac-title { color: #EDE8E0; }
      .dash-section-block {
        background: rgba(29,26,22,0.55);
        border-color: rgba(200,144,42,0.08);
      }
    }

    /* ── K. NAV SLIDER — indicateur glissant desktop ───────────── */
    #nav-slider {
      position: absolute;
      bottom: 0; left: 0;
      height: 3px;
      background: var(--primary);
      border-radius: 3px 3px 0 0;
      box-shadow: 0 0 12px rgba(200,144,42,0.70), 0 -1px 6px rgba(200,144,42,0.35);
      pointer-events: none;
      width: 0; opacity: 0;
      transition:
        transform var(--dur-md) var(--ease-smooth),
        width     var(--dur-md) var(--ease-smooth),
        opacity   var(--dur-sm) var(--ease-smooth);
      will-change: transform, width;
    }
    @media (max-width: 699px) {
      #nav-slider { display: none !important; }
    }

    /* ── L. NAV DESKTOP — inactive opacity + suppression scale ──── */
    @media (min-width: 700px) {
      /* Transition premium pour tous les boutons nav */
      #main-nav button {
        transition:
          color      var(--dur-sm) var(--ease-smooth),
          background var(--dur-sm) var(--ease-smooth),
          opacity    var(--dur-md) var(--ease-smooth),
          transform  var(--dur-xs) var(--ease-smooth) !important;
      }
      /* Icône : transition spring + filtre */
      #main-nav .nav-icon {
        transition:
          transform var(--dur-sm) var(--ease-spring),
          filter    var(--dur-sm) var(--ease-smooth);
        display: inline-block;
      }
      /* Onglets inactifs : clairement estompés */
      #main-nav button:not(.active) { opacity: 0.42; }
      /* Onglet actif : icône mise en valeur */
      #main-nav button.active {
        opacity: 1;
        transform: none !important;
      }
      #main-nav button.active .nav-icon {
        transform: scale(1.20) translateY(-1px);
        filter: drop-shadow(0 0 5px rgba(200,144,42,0.55));
      }
      /* Feedback clic sur l'icône nav */
      #main-nav button:active .nav-icon {
        transform: scale(0.84) !important;
        transition-duration: var(--dur-xs) !important;
      }
      /* Supprimer le ::after pill — remplacé par #nav-slider */
      #main-nav button.active::after { display: none !important; }
    }

    /* ── M. UNIVERSEL — button:active (aucune spécificité, 0,0,0) ── */
    /* :where() neutralise la spécificité → toute règle plus précise gagne */
    :where(button:active:not([disabled])) {
      transform: scale(0.93) !important;
      filter: brightness(0.89) !important;
      transition-duration: var(--dur-xs) !important;
    }

    /* ── N. ÉLÉMENTS COMPLÉMENTAIRES — hover & active ────────────── */
    /* Grade buttons */
    .grade-btn {
      transition:
        border-color var(--dur-sm) var(--ease-smooth),
        background   var(--dur-sm) var(--ease-smooth),
        transform    var(--dur-xs) var(--ease-spring) !important;
      will-change: transform;
    }
    .grade-btn:active {
      transform: scale(0.90) !important;
      filter: brightness(0.88) !important;
      transition-duration: var(--dur-xs) !important;
    }
    /* Year pills */
    .year-pill {
      transition:
        background   var(--dur-sm) var(--ease-smooth),
        border-color var(--dur-sm) var(--ease-smooth),
        color        var(--dur-sm) var(--ease-smooth),
        transform    var(--dur-xs) var(--ease-spring) !important;
    }
    .year-pill:active {
      transform: scale(0.94) !important;
      transition-duration: var(--dur-xs) !important;
    }
    /* Period mode / appréciation / allergen / AI prov buttons */
    .period-mode-btn, .appre-per-btn, .ai-prov-btn, .rec-allergen-btn {
      transition:
        border-color var(--dur-sm) var(--ease-smooth),
        background   var(--dur-sm) var(--ease-smooth),
        color        var(--dur-sm) var(--ease-smooth),
        transform    var(--dur-xs) var(--ease-spring) !important;
    }
    .period-mode-btn:active, .appre-per-btn:active,
    .ai-prov-btn:active, .rec-allergen-btn:active {
      transform: scale(0.92) !important;
      filter: brightness(0.90) !important;
      transition-duration: var(--dur-xs) !important;
    }
    @media (hover: hover) {
      .grade-btn:hover {
        filter: brightness(1.08) !important;
        transform: translateY(-1px) !important;
      }
      .year-pill:not(.active):hover {
        border-color: var(--primary) !important;
        color: var(--primary) !important;
        transform: translateY(-1px) !important;
      }
      .period-mode-btn:not(.active):hover,
      .appre-per-btn:not(.active):hover {
        border-color: var(--primary) !important;
        color: var(--primary) !important;
        transform: translateY(-1px) !important;
      }
    }

    /* ── O. FAB — Bouton flottant principal ─────────────────────── */
    #main-fab {
      position: fixed;
      bottom: calc(72px + env(safe-area-inset-bottom, 4px));
      right: 20px;
      width: 58px; height: 58px;
      border-radius: 50%;
      background: var(--primary);
      color: white;
      font-size: 1.8rem;
      font-weight: 200;
      line-height: 1;
      border: none;
      cursor: pointer;
      z-index: 145;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 20px rgba(200,144,42,0.48), 0 2px 6px rgba(0,0,0,0.14);
      transition:
        transform  160ms var(--ease-spring),
        box-shadow 160ms var(--ease-smooth),
        opacity    200ms var(--ease-smooth);
      will-change: transform;
    }
    @media (min-width: 700px) {
      #main-fab { bottom: 24px; }
    }
    #main-fab:hover {
      transform: scale(1.10) rotate(90deg);
      box-shadow: 0 10px 30px rgba(200,144,42,0.58), 0 3px 10px rgba(0,0,0,0.18);
    }
    #main-fab:active {
      transform: scale(0.90) !important;
      transition-duration: 80ms !important;
      box-shadow: 0 3px 10px rgba(200,144,42,0.35) !important;
    }
    #main-fab.fab-hidden {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.5) !important;
    }
    /* Dark mode FAB */
    @media (prefers-color-scheme: dark) {
      #main-fab {
        box-shadow: 0 6px 24px rgba(200,144,42,0.55), 0 2px 8px rgba(0,0,0,0.4);
      }
    }

    /* ── P. CAPSULE BUTTONS & RADIUS GÉNÉRAL ─────────────────────── */
    /* Boutons style iOS — forme capsule */
    .btn       { border-radius: var(--radius-pill) !important; }
    .btn-sm    { border-radius: var(--radius-pill) !important; }
    /* Cartes : ombre chaude + radius plus généreux */
    .card {
      border-radius: var(--radius) !important;
      box-shadow: var(--shadow-warm) !important;
    }
    @media (hover: hover) {
      .card:hover {
        box-shadow: 0 8px 28px rgba(200,144,42,0.14), 0 2px 8px rgba(0,0,0,0.07) !important;
        transform: translateY(-2px) !important;
      }
    }
    /* Input focus — rayon premium */
    input, textarea, select { border-radius: var(--radius-lg) !important; }
    /* Gtab — capsule déjà, augmente juste le rayon */
    .gtab { border-radius: var(--radius-pill) !important; }
    /* Seance btn — coins plus généreux */
    .seance-btn { border-radius: 14px !important; }
    /* Diploma card */
    .diploma-card { border-radius: 20px !important; }

    /* ══════════════════════════════════════════════════════════════
       NAV PRINCIPALE — onglets restructurés icon + label
    ══════════════════════════════════════════════════════════════ */
    #main-nav button {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    #main-nav .nav-icon  { font-size: 1rem; line-height: 1; flex-shrink: 0; }
    #main-nav .nav-label { font-size: 0.73rem; }

    /* ══════════════════════════════════════════════════════════════
       ÉLÉMENTS MOBILE-ONLY — masqués sur desktop, visibles sur mobile
    ══════════════════════════════════════════════════════════════ */
    [data-mobile-only] { display: none !important; }

    /* ── "Plus" — tiroir modules secondaires ─────────────────────── */
    #nav-more-drawer {
      display: none;
      position: fixed; inset: 0; z-index: 310;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      align-items: flex-end;
    }
    #nav-more-drawer.open { display: flex; }
    #nav-more-sheet {
      width: 100%;
      background: var(--white);
      border-radius: var(--modal-radius) var(--modal-radius) 0 0;
      padding: 12px 16px 16px;
      padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
      animation: navMoreIn 260ms var(--ease-out) both;
    }
    @keyframes navMoreIn {
      from { transform: translateY(100%); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    .nav-more-handle {
      width: 36px; height: 4px; border-radius: 2px;
      background: var(--border); margin: 0 auto 14px;
    }
    .nav-more-title {
      font-size: 0.70rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--muted); margin-bottom: 10px; text-align: center;
    }
    .nav-more-items { display: flex; flex-direction: column; gap: 6px; }
    .nav-more-item {
      display: flex; align-items: center; gap: 14px;
      width: 100%; padding: 14px 16px;
      background: var(--bg); border-radius: 12px;
      border: none; cursor: pointer; font-family: inherit;
      font-size: 0.95rem; font-weight: 600;
      text-align: left; min-height: 56px;
      transition: background 140ms, transform 100ms;
    }
    .nav-more-item:hover  { background: rgba(200,144,42,0.07); }
    .nav-more-item:active { transform: scale(0.97); background: rgba(200,144,42,0.12); }
    .nav-more-icon   { font-size: 1.3rem; flex-shrink: 0; }
    .nav-more-label  { flex: 1; color: var(--text); }
    .nav-more-chevron { color: var(--muted); font-size: 1rem; }
    .nav-more-item.active-item .nav-more-label { color: var(--primary); font-weight: 700; }
    .nav-more-item.active-item .nav-more-icon { filter: drop-shadow(0 0 4px rgba(200,144,42,0.55)); }

    /* ── Légende niveaux — collapsible sur mobile ────────────────── */
    .niv-legend-wrap { margin-bottom: 16px; }
    .niv-legend-wrap .niv-legend { margin-bottom: 0 !important; }
    .niv-legend-header { display: none; } /* visible seulement sur mobile */

    /* ── Labels courts présence (P/A/R) — cachés sur desktop ─────── */
    .pres-short-label { display: none; }

    /* ── Résultats — indicateur scroll horizontal ─────────────────── */
    .results-wrap { position: relative; }

    /* ── SGE — liste de cartes (vue mobile, masquée sur desktop) ─── */
    .sge-card-list {
      display: none;
      flex-direction: column;
      gap: 10px;
      padding: 2px 0 12px;
    }
    .sge-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px 12px 12px 14px;
      transition: box-shadow 140ms, transform 100ms;
    }
    .sge-card:active { transform: scale(0.988); }
    .sge-card-avatar-wrap {
      flex-shrink: 0;
    }
    .sge-card-avatar-wrap .sge-photo-cell { margin: 0; }
    .sge-card-avatar-wrap .sge-avatar {
      width: 46px !important; height: 46px !important;
      border-radius: 13px !important;
      font-size: 0.88rem !important;
      margin: 0 !important;
    }
    .sge-card-avatar-wrap .sge-avatar-cam {
      border-radius: 13px !important;
    }
    .sge-card-avatar-wrap .sge-photo-img {
      width: 46px !important; height: 46px !important;
      border-radius: 13px !important;
    }
    .sge-card-body {
      flex: 1;
      min-width: 0;
    }
    .sge-card-name {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--header);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: -0.01em;
      cursor: pointer;
    }
    .sge-card-name:active { color: var(--primary); }
    .sge-card-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 3px;
      flex-wrap: wrap;
    }
    .sge-card-groupe {
      font-size: 0.70rem;
      font-weight: 600;
      color: var(--primary);
      background: rgba(200,144,42,0.10);
      border-radius: 50px;
      padding: 2px 8px;
      border: 1px solid rgba(200,144,42,0.18);
      white-space: nowrap;
    }
    .sge-card-statut-inactif {
      font-size: 0.68rem;
      color: var(--muted);
      background: rgba(107,114,128,0.10);
      border-radius: 50px;
      padding: 2px 8px;
      border: 1px solid rgba(107,114,128,0.18);
    }
    .sge-card-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 5px;
    }
    .sge-card-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
    }
    .sge-card-btn {
      width: 38px; height: 38px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg);
      font-size: 1.05rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 120ms, transform 80ms;
    }
    .sge-card-btn:active { transform: scale(0.88); background: var(--border); }

    /* ══════════════════════════════════════════════════════════════
       MOBILE BOTTOM NAV — ≤699px
       Frosted glass · Pill indicator · 6 tabs max
    ══════════════════════════════════════════════════════════════ */
    @media (max-width: 699px) {

      /* 1. Masquer les onglets secondaires */
      #main-nav button[data-mobile-hide] { display: none !important; }

      /* 2. Repositionner le nav en bas de l'écran */
      #main-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 150;
        height: auto;
        border-top: 1px solid rgba(0,0,0,0.07);
        border-bottom: none !important;
        background: rgba(250,250,247,0.88);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        padding: 2px 0 env(safe-area-inset-bottom, 6px);
        gap: 0;
        overflow: visible;
      }

      /* 3. Boutons verticaux */
      #main-nav button {
        flex-direction: column;
        gap: 1px;
        padding: 7px 4px 5px;
        border-bottom: none !important;
        border-top: 3px solid transparent;
        border-radius: 0;
        min-width: 0;
        transition:
          color          var(--dur-sm) var(--ease-smooth),
          border-top-color var(--dur-sm) var(--ease-smooth),
          opacity        var(--dur-md) var(--ease-smooth) !important;
      }

      /* 4. Icône mobile — taille + spring */
      #main-nav .nav-icon {
        font-size: 1.35rem;
        display: inline-block;
        transition: transform var(--dur-sm) var(--ease-spring), filter var(--dur-sm) var(--ease-smooth);
      }
      #main-nav .nav-label { font-size: 0.58rem; letter-spacing: 0.01em; }

      /* 5. Inactifs clairement estompés */
      #main-nav button:not(.active) { opacity: 0.42; }

      /* 6. État actif — indicateur + icône mise en avant */
      #main-nav button.active {
        opacity: 1 !important;
        border-top-color: var(--primary) !important;
        background: transparent !important;
        transform: none !important;
      }
      #main-nav button.active .nav-icon {
        transform: translateY(-3px) scale(1.22);
        filter: drop-shadow(0 0 4px rgba(200,144,42,0.50));
      }
      #main-nav button.active .nav-label {
        color: var(--primary);
        font-weight: 700;
      }

      /* 7. Supprimer le ::after */
      #main-nav button.active::after { display: none !important; }

      /* 8. Touch feedback fort */
      #main-nav button:active .nav-icon {
        transform: scale(0.82) !important;
        filter: none !important;
        transition-duration: var(--dur-xs) !important;
      }

      /* 8. Hover (tablette) */
      @media (hover: hover) {
        #main-nav button:not(.active):hover {
          color: var(--primary);
          background: rgba(200,144,42,0.06);
          transform: none;
        }
      }

      /* 9. Compenser la hauteur du nav en bas */
      #app > main {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
      }

      /* ── 10. Bouton "Plus" visible sur mobile ─────────────────── */
      [data-mobile-only] { display: flex !important; }

      /* ── 11. Zones tactiles — minimum 44px ───────────────────── */
      #main-nav button { min-height: 44px; }
      .btn, .btn-primary, .btn-outline, .sge-btn,
      .eval-nav-btn, .gtab, .seance-btn, .grade-btn,
      .eco-tbtn, .rec-tb-btn, .appre-per-btn { min-height: 44px; }

      /* ── 12. Boutons icônes (✏️ 🗑️) — 40px min ──────────────── */
      .sge-action-btn { width: 40px !important; height: 40px !important; }

      /* ── 13. Boutons ← → navigation élève — 40px ──────────────── */
      .eval-nav-btn { width: 40px !important; height: 40px !important; }

      /* ── 14. Grille des séances — 4 colonnes max ──────────────── */
      .seances-grid {
        grid-template-columns: repeat(4, 1fr) !important;
      }
      .seance-btn { padding: 11px 2px 9px !important; }

      /* ── 15. Légende niveaux — collapsible ───────────────────── */
      .niv-legend-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 9px 14px;
        background: var(--white); border: 1.5px solid var(--border);
        border-radius: 10px; margin-bottom: 8px;
        cursor: pointer; user-select: none;
        transition: background 140ms;
      }
      .niv-legend-header:active { background: var(--bg); }
      .niv-legend-pills { display: flex; gap: 10px; align-items: center; }
      .niv-legend-toggle-chevron { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
      .niv-legend-wrap.collapsed .niv-legend { display: none !important; }
      .niv-legend-wrap.collapsed .niv-legend-header { border-radius: 10px; margin-bottom: 0; }

      /* ── 16. Barre contexte — masquer la date ─────────────────── */
      .seance-ctx-date-group { display: none !important; }

      /* ── 17. Présence — table 100 % + boutons P/A/R tous visibles ─ */
      /* Bloquer l'overflow du conteneur pour que width:100% = viewport */
      #presence-content .results-wrap {
        overflow-x: hidden !important;
      }
      /* Force la table à la largeur visible du conteneur */
      #presence-content .pres-table {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 0 !important;     /* annule la règle globale min-width:520px */
      }
      /* Colonne nom — largeur fixe + troncature (sans white-space:nowrap
         pour ne pas forcer la min-content > width) */
      #presence-content .pres-table th:first-child {
        width: 145px !important;
        white-space: normal !important;  /* annule width:1px;white-space:nowrap du JS */
      }
      #presence-content .pres-table td:first-child {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 145px !important;
      }
      /* Colonne statut — 345-145=200px → 3 boutons à ~64px chacun */
      #presence-content .pres-status-cell,
      #presence-content .pres-table th:nth-child(2) {
        width: 200px !important;
      }
      /* Masquer labels longs, ne garder que la lettre */
      .pres-full-label  { display: none   !important; }
      .pres-short-label { display: inline !important; }
      /* Boutons compacts — lettres P / A / R visibles et tactiles */
      .pres-status-btn {
        min-height: 44px !important;
        padding: 6px 2px !important;
        flex: 1 !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--muted) !important;
        border-color: var(--border) !important;
      }
      /* Rétablir les couleurs des boutons actifs */
      .pres-status-btn[style*="#16a34a"] { color: #16a34a !important; border-color: #16a34a !important; }
      .pres-status-btn[style*="#dc2626"], .pres-status-btn[style*="#DC2626"] { color: #dc2626 !important; border-color: #dc2626 !important; }
      .pres-status-btn[style*="#d97706"], .pres-status-btn[style*="#D97706"], .pres-status-btn[style*="#f59e0b"] { color: #d97706 !important; border-color: #d97706 !important; }
      .pres-btns-wrap { gap: 3px !important; width: 100% !important; }
      .pres-obs-col { display: none !important; }

      /* ── 18. Résultats — gradient scroll horizontal ───────────── */
      .results-wrap::after {
        content: '';
        position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
        background: linear-gradient(to left, var(--white) 10%, transparent 100%);
        pointer-events: none; z-index: 2;
      }

      /* ── 19. SGE — tableau masqué, cartes visibles ────────────── */
      .sge-table-wrap { display: none !important; }
      .sge-card-list  { display: flex !important; }

      /* ── 22. Évaluation — header sticky compact ───────────────── */
      .eval-sticky-header {
        padding: 11px 14px 9px !important;
      }
      .eval-panel-body {
        padding: 12px 14px 18px !important;
      }
      .panel-student {
        font-size: 0.96rem !important;
      }
      .panel-score-box {
        font-size: 1.28rem !important;
        padding: 6px 12px !important;
        border-radius: 10px !important;
      }
      .eval-sh-main { gap: 7px !important; }

      /* ── 23. Recettes — grilles multi-colonnes → 1 colonne ───── */
      .rec-grid-2,
      .rec-grid-3,
      .rec-grid-4 {
        grid-template-columns: 1fr !important;
      }
      /* Rangées flex (quantité + unité) → wrap + 2 colonnes */
      .rec-field-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
      }
      .rec-field-row .rec-field {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 80px !important;
      }

      /* ── 24. Temps/planning — 1 colonne sur mobile ────────────── */
      .temps-grid {
        grid-template-columns: 1fr !important;
      }

      /* ── 20. Dashboard hero — fidèle au desktop, légèrement compact ── */
      .dash-hero {
        padding: 28px 24px !important;
        border-radius: 26px !important;
        margin-bottom: 14px !important;
        gap: 16px !important;
      }
      .dash-hero-title    { font-size: 1.65rem !important; margin-bottom: 8px !important; }
      .dash-hero-subtitle { font-size: 0.88rem !important; max-width: none !important; }
      .dash-hero-badge    { margin-top: 12px !important; }
      .dash-hero-illustration { font-size: 2.8rem !important; }

      /* ── KPI row — 3 colonnes même sur petit écran ────────────── */
      .dash-kpi-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-top: 14px !important;
      }
      /* Annuler la règle "dernière carte pleine largeur" héritée */
      .dash-kpi-row .dash-kpi-card:last-child { grid-column: auto !important; }
      .dash-kpi-card { padding: 13px 8px 10px !important; border-radius: 14px !important; }
      .dkpi-value { font-size: 1.45rem !important; }
      .dkpi-label { font-size: 0.68rem !important; }
      .dkpi-sub   { font-size: 0.60rem !important; }

      /* ── 21. Section titres dashboard — plus compact ──────────── */
      .dash-section-title {
        font-size: 0.68rem !important;
        margin: 16px 0 8px !important;
      }

      /* ── 25. Recettes — onglets éditeur défilables ──────────── */
      .rec-editor-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
      }
      .rec-editor-tabs::-webkit-scrollbar { display: none; }
      .rec-editor-tab {
        flex: none !important;
        padding: 9px 14px !important;
      }

      /* ── 26. Recettes — sous-onglets principaux défilables ──── */
      .rec-subbtn-bar, .rec-sub-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
      }
      .rec-subbtn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
      }

      /* ── 27. Recettes — header éditeur : wrap sur mobile ────── */
      .rec-editor-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 10px !important;
      }
      /* L'input nom reste sur la première ligne avec le bouton Retour */
      .rec-editor-header input[type="text"] {
        flex: 1 1 auto !important;
        min-width: 120px !important;
      }

      /* ── 28. Recettes/Économat — indicateur scroll ───────────────── */
      /* Fade droit sur les tableaux scrollables (eco-table-wrap) */
      .eco-table-wrap { position: relative !important; }
      .eco-table-wrap::after {
        content: '';
        position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
        background: linear-gradient(to left, var(--white) 5%, transparent 100%);
        pointer-events: none; z-index: 5;
      }
      /* Idem pour le wrapper résultats (déjà défini, mais harmonisation) */
      .results-wrap { position: relative !important; }

      /* ── 29. SGE cartes — boutons ✏️ / 🗑️ agrandis ──────────────── */
      .sge-card-btn {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        font-size: 1.1rem !important;
      }

      /* ── 30. Boutons .btn-sm — zone tactile 40 px min ───────────── */
      .btn-sm {
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
      }

      /* ── 31. Appréciations — Enregistrer agrandi + textarea ──────── */
      .appre-actions .btn,
      .appre-actions .btn-outline,
      .appre-actions .btn-ai {
        min-height: 44px !important;
        padding: 9px 18px !important;
        font-size: 0.88rem !important;
        border-radius: 10px !important;
        flex: 1 !important;
      }
      .appre-textarea {
        min-height: 80px !important;
        font-size: 0.9rem !important;
        border-radius: var(--radius-md) !important;
        padding: 9px 12px !important;
      }

      /* ── 32. Présence — select séance : zone tactile ─────────────── */
      /* Le select est dans #screen-presence, pas #presence-content */
      #presence-seance-sel {
        height: 46px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        padding: 8px 12px !important;
        width: auto !important;
        min-width: 160px !important;
      }

      /* ── 33. Évaluer — lignes élèves : zone tactile agrandie ──────── */
      .student-row {
        min-height: 58px !important;
        padding: 14px 15px !important;
      }

      /* ── 34. Paramètres Aménagements — carte 2 niveaux sur mobile ── */
      .sge-amgr-row {
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        padding: 10px 12px !important;
      }
      .sge-amgr-dot { align-self: center !important; }
      .sge-amgr-label {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 0.92rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        align-self: center !important;
      }
      .sge-amgr-actions {
        width: 100% !important;
        justify-content: flex-end !important;
        gap: 5px !important;
      }
      .sge-amgr-btn {
        padding: 5px 8px !important;
        font-size: 0.72rem !important;
      }

      /* ── 35. Groupe tabs — label court sur mobile ──────────────── */
      .gtab-full  { display: none   !important; }
      .gtab-short { display: inline !important; }

      /* ── 36. Séance — boutons d'action en grille 2×2 sur mobile ── */
      .seance-card-title {
        flex-direction: column !important;
        align-items:    stretch !important;
        gap:            8px    !important;
      }
      .seance-actions {
        display:   flex     !important;
        flex-wrap: wrap     !important;
        gap:       5px      !important;
      }
      .seance-actions .btn {
        flex:             1 1 calc(50% - 3px) !important;
        justify-content:  center              !important;
        text-align:       center              !important;
        min-width:        0                   !important;
      }

    }

    /* ── Semi-finis — wrapper + carte aperçu (mobile-first) ───────── */
    .sf-preview {
      width: 100%;
      margin-top: 6px;
    }
    .sf-preview-card {
      padding: 7px 10px;
      background: #F8FAFC;
      border: 1px solid #DDE3EF;
      border-radius: 7px;
      color: #3A4A5A;
      width: 100%;
      box-sizing: border-box;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }
    .sf-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 6px;
      border-radius: 4px;
    }

    /* ── Semi-finis — centrage grand écran (≥ 1024px) ─────────── */
    @media (min-width: 1024px) {
      .sf-preview {
        display: flex;
        justify-content: center;
        margin-top: 8px;
      }
      .sf-preview-card {
        width: min(560px, 90%);
        margin-left: auto;
        margin-right: auto;
        transform: none;
      }
    }

    /* ── ÉCRANS TACTILES — tap targets ergonomiques (iPad, tablettes) ── */
    @media (pointer: coarse) {

      /* ── Navigation principale ─────────────────────────────────── */
      #main-nav button { min-height: 44px; }

      /* ── Boutons standards ─────────────────────────────────────── */
      .btn, .btn-primary, .btn-outline, .btn-sm,
      .btn-add-row, .sge-btn,
      .eco-tbtn, .rec-tb-btn, .appre-per-btn {
        min-height: 44px;
      }

      /* ── Boutons header icônes ─────────────────────────────────── */
      .btn-icon           { min-height: 44px; }
      .btn-icon.icon-only { min-height: 44px; min-width: 44px; }

      /* ── Navigation évaluation ← → (cercles) ──────────────────── */
      .eval-nav-btn { min-height: 44px; min-width: 44px; }

      /* ── Boutons de notation TB / B / ECA / I ──────────────────── */
      .grade-btn { min-height: 44px; }

      /* ── Séances + onglets groupes ─────────────────────────────── */
      .seance-btn, .gtab { min-height: 44px; }

      /* ── Segmented control bilan élève ─────────────────────────── */
      .bilan-seg-btn { min-height: 44px; }

      /* ── Actions SGE (✏️ 🗑️) ─────────────────────────────────── */
      .sge-action-btn { min-height: 44px; min-width: 44px; }

      /* ── Close buttons ─────────────────────────────────────────── */
      .sge-fiche-close,
      .sge-import-close  { min-height: 44px; min-width: 44px; }

      /* ── Boutons icon-only SGE secondaires ─────────────────────── */
      .sge-fiche-open-btn,
      .sge-amgr-icon-btn,
      .sge-card-btn       { min-height: 44px; min-width: 44px; }

      /* ── Photo élève (déclencheur upload) ──────────────────────── */
      .sge-photo-img      { min-height: 44px; min-width: 44px; }

    }

    /* ── 11. DARK MODE — complet ────────────────────────────────── */
    @media (prefers-color-scheme: dark) {

      /* Variables globales */
      :root {
        --bg:            #131110;
        --white:         #1D1A16;
        --border:        #342E26;
        --text:          #EDE8E0;
        --muted:         #9A9080;
        --primary-light: #271C08;
        --shadow:        0 2px 12px rgba(0,0,0,0.55);
        /* Premium system — dark overrides */
        --shadow-sm : 0 1px 3px rgba(0,0,0,0.3);
        --shadow-md : 0 4px 16px rgba(0,0,0,0.4);
        --shadow-lg : 0 8px 32px rgba(0,0,0,0.5);
        --glow-primary : 0 0 0 3px rgba(200,144,42,0.3);
        /* Redéfinition variables grade (TB/B/ECA/I) pour dark — couleurs plus claires */
        --TB:    #4ADE80; --TB-bg: #052E16;
        --B:     #60A5FA; --B-bg:  #172554;
        --EC:    #FB923C; --EC-bg: #431407;
        --I:     #F87171; --I-bg:  #450A0A;
        /* Redéfinition variables Économat pour dark */
        --er-navy:       #3A6EA0;  /* bleu moyen-foncé, contraste blanc ≈ 4.6:1 */
        --er-cyan:       #00D4FF;
        --er-white:      #1D1A16;
        --er-row-alt:    #17140F;
        --er-sel:        #1E3D78;
        --er-red:        #FF8A8A;  /* rouge clair pour les prix */
        --er-gray:       #181512;
        --er-purple:     #C080F0;
        --er-green:      #5BBF62;
        --er-pink:       #F070C8;
        --er-blue:       #6090F0;
      }

      /* ── Fond général & nav ─────────────────────── */
      body { background: var(--bg); }
      nav  { background: #1D1A16; box-shadow: 0 1px 0 #342E26; }
      nav button:not(.active) { color: #B8AFA0 !important; }
      nav button:not(.active):hover { color: #EDE8E0 !important; }
      main { background: var(--bg); }

      /* ── Inputs, selects, textareas ─────────────── */
      input, textarea, select {
        background: #181411 !important;
        color: #EDE8E0 !important;
        border-color: #342E26 !important;
      }
      input::placeholder, textarea::placeholder { color: #6A6050 !important; }
      input:focus, textarea:focus, select:focus  { border-color: var(--primary) !important; }

      /* ── Économat / Catalogue : toolbar ─────────── */
      .eco-toolbar {
        background: #16130E !important;
        border-bottom-color: #0D0A06 !important;
      }
      .eco-tbtn {
        background: #252018 !important;
        border-color: #3A3228 !important;
        color: #D0C4AE !important;
      }
      .eco-tbtn:not([disabled]):hover {
        background: #302820 !important;
        filter: brightness(1.12) !important;
      }
      .eco-tbtn-new  { background: #0F3D20 !important; border-color: #1A5C32 !important; }
      .eco-tbtn-exp  { background: #0D3526 !important; border-color: #154A38 !important; }
      .eco-tbtn[disabled] { opacity: 0.3 !important; }

      /* ── Statusbar ─────────────────────────────── */
      .eco-statusbar {
        background: #1A1610 !important;
        border-bottom-color: #2A2318 !important;
        color: #8A8070 !important;
      }

      /* ── Table fond & bordures ──────────────────── */
      .eco-table { background: #1D1A16 !important; }
      .eco-cell {
        border-bottom-color: #272218 !important;
        border-right-color:  #272218 !important;
        color: #CCC4B4 !important;
      }
      .eco-table tbody td:first-child { border-left-color: #272218 !important; }

      /* ── Lignes alternées & hover ───────────────── */
      .eco-row td            { background: #1D1A16 !important; }
      .eco-row-alt td        { background: #17140F !important; }
      .eco-row:hover td      { background: #242018 !important; color: #EDE8E0 !important; }
      .eco-row-sel td        { background: #1E3D78 !important; color: #D8E8FF !important; }
      .eco-row-sel .eco-cell-prix { color: #FFB0B0 !important; }

      /* ── Cellules avec couleurs spécifiques ─────── */
      .eco-cell       { color: #D0CBB8 !important; }   /* texte de base clair */
      .eco-cell-nom   { color: #7AACDF !important; }   /* bleu clair lisible */
      .eco-cell-num   { color: #4E4840 !important; }   /* numéro discret */
      .eco-cell-prix  { color: #FF8A8A !important; }   /* rouge clair */
      .eco-cell-unite { color: #9890A0 !important; }   /* unité */
      .eco-cell-muted { color: #9890A0 !important; }   /* famille / fournisseur */
      .eco-cell-dim   { color: #6A6258 !important; }   /* TVA, date */
      .eco-cell-rem   { color: #7A7060 !important; }   /* remarques */
      .eco-dash       { color: #3A3428 !important; }   /* tirets vides */

      /* ── Badges allergènes ───────────────────────── */
      .eco-allerg-badge {
        background: #3A2A08 !important;
        color: #D4A040 !important;
        border: 1px solid #5A4210;
      }

      /* ── Recettes — liste gauche ─────────────────── */
      .rec-item { background: #1D1A16 !important; border-bottom-color: #272218 !important; }
      .rec-item:nth-child(even) { background: #17140F !important; }
      .rec-item:hover           { background: #242018 !important; }
      .rec-item.selected        { background: #1E3D78 !important; }
      .rec-item-name            { color: #7AACDF !important; }
      .rec-item-sub             { color: #7A7060 !important; }
      .rec-item-icon            { background: rgba(122,172,223,0.12) !important; color: #7AACDF !important; }
      .rec-item-badge           { color: #9A9080 !important; }

      /* ── Tableau lignes de recette (editor) ───────── */
      #rec-lignes-list tr       { background: #1D1A16 !important; }
      #rec-lignes-list tr:nth-child(even) { background: #17140F !important; }
      #rec-lignes-list td       { border-color: #272218 !important; color: #CCC4B4 !important; }

      /* ── Bouton œil (historique / usages) ────────── */
      .eco-eye-btn {
        background: transparent !important;
        color: #6A6050 !important;
        border-color: #3A3228 !important;
      }
      .eco-eye-btn:hover { background: rgba(122,172,223,0.12) !important; color: #7AACDF !important; }

      /* ── Filtre panel ───────────────────────────── */
      .eco-filter-panel, #eco-filter-panel {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
        color: #EDE8E0 !important;
      }

      /* ── Modals / panneaux ─────────────────────── */
      /* ── Popup Paramètres (roue crantée) ────────────── */
      .settings-window {
        background: #1A1714 !important;
        box-shadow: 0 -4px 40px rgba(0,0,0,.6) !important;
      }
      .sw-drag-pill   { background: rgba(255,255,255,.18) !important; }
      .sw-sidebar {
        background: #131110 !important;
        border-right-color: #2E2820 !important;
      }
      .sw-sidebar-label { color: #6A6050 !important; }
      .sw-sidebar-sep   { background: rgba(255,255,255,.07) !important; }
      .sw-item-label    { color: #D0CBB8 !important; }
      .sw-item-chevron  { color: #4A4438 !important; }
      .sw-item:hover    { background: rgba(255,255,255,.06) !important; }
      .sw-item.active   { background: rgba(200,144,42,.18) !important; }
      .sw-content {
        background: #1A1714 !important;
      }
      .sw-card {
        background: #221F1B !important;
        border-color: #2E2820 !important;
        color: #D0CBB8 !important;
      }
      .sw-card-title { color: #6A6050 !important; }
      .sw-titlebar   { border-bottom-color: #2E2820 !important; }

      /* ── Eco-settings panel (⚙ Économat) ───────────── */
      .rec-ing-modal, .eco-settings-modal {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
      }
      .eco-settings-header  { background: #131110 !important; border-color: #2E2820 !important; }
      .eco-settings-sidebar { background: #161310 !important; border-right-color: #2E2820 !important; }
      .eco-stab             { background: transparent !important; color: #9A9080 !important; }
      .eco-stab:hover       { background: rgba(255,255,255,.06) !important; color: #D0CBB8 !important; }
      .eco-stab.active      { background: rgba(200,144,42,.2) !important; color: var(--primary) !important; font-weight: 700; }
      #eco-settings-content { color: #D0CBB8 !important; background: #1D1A16 !important; }
      .eco-settings-content label,
      .fourn-form-field label { color: #8A8070 !important; }
      .fourn-item           { color: #D0CBB8 !important; border-bottom-color: #2E2820 !important; }
      .fourn-item.sel       { background: rgba(200,144,42,.2) !important; color: var(--primary) !important; }

      /* ── Panel settings cat + hist ───────────────── */
      #cat-form-modal > div,
      #cat-settings-modal > div,
      #cat-hist-panel > div    { background: #1D1A16 !important; }
      #cat-settings-body       { color: #EDE8E0 !important; }

      /* ── Historique prix tables (dark) ────────────── */
      #eco-historique-panel > div,
      #cat-hist-panel > div    { background: #1D1A16 !important; border-color: #342E26 !important; }
      .hist-thead tr           { background: #2A3A5A !important; }
      .hist-tbody tr.hist-row-odd  { background: #1D1A16 !important; }
      .hist-tbody tr.hist-row-even { background: #17140F !important; }
      .hist-cell-date  { color: #6A6258 !important; }
      .hist-cell-prix  { color: #FF8A8A !important; }
      .hist-cell-dash  { color: #3A3428 !important; }
      .hist-cell-four  { color: #9890A0 !important; }
      .hist-cell-note  { color: #7A7060 !important; }
      .hist-empty      { color: #6A6258 !important; }
      .ing-catalog-fam-hdr { color: #9890A0 !important; }

      /* ── Cartes home ──────────────────────────────── */
      .home-card {
        background: rgba(255,255,255,.05) !important;
        border-color: rgba(255,255,255,.1) !important;
      }
      .home-card:hover { background: rgba(255,255,255,.1) !important; }

      /* ── Info boxes & cards ────────────────────────── */
      .card { background: #1D1A16 !important; border-color: #342E26 !important; }
      .info-box { background: #271E08 !important; border-color: #5A4210 !important; color: #D4A040 !important; }

      /* ── Recettes settings (colonnes) ─────────────── */
      .col-order-item {
        background: #252018 !important;
        border-color: #342E26 !important;
        color: #CCC4B4 !important;
      }
      .col-order-item.drag-over { background: #1A3D6B !important; }

      /* ── Rec-subnav ───────────────────────────────── */
      /* Le fond doit rester un vrai bleu foncé — pas var(--er-navy) qui devient clair en dark */
      .rec-subnav { background: #0F2540 !important; border-bottom-color: #1A3A6B !important; }

      /* ── Ripple adapté ───────────────────────────── */
      .ic-ripple-dot { background: rgba(200,144,42,0.28); }

      /* ── Selects & inputs dans éditeur recette ────── */
      select[style*="background:white"],
      select[style*="background: white"] {
        background: #1D2535 !important;
        color: #D0CBB8 !important;
        border-color: #3A4055 !important;
      }

      /* ── Usages popup (non utilisé dans recette) ───── */
      #eco-usages-popup { background: #1D1A16 !important; border-color: #342E26 !important; color: #D0CBB8 !important; }

      /* ══════════════════════════════════════════════════════════
         CORRECTIONS DARK MODE — AUDIT COMPLET (toute l'app)
         ══════════════════════════════════════════════════════════ */

      /* ── A. label : --header (#2C1810) invisible sur fond sombre ── */
      /* --header non redéfini en dark → brun foncé sur fond sombre = invisible */
      label { color: #C8C0B0 !important; }
      .rec-field label { color: #9A9080 !important; }
      .setup-card h2, .diploma-card .d-name { color: #EDE8E0 !important; }
      .prod-card-title { color: #D0CBB8 !important; }
      /* Inline style="color:var(--header)" partout dans l'app */
      [style*="color:var(--header)"] { color: #D0CBB8 !important; }

      /* ── B. Appréciations ─────────────────────────────────────── */
      .appre-per-btn {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
      }
      .ai-prov-btn {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
        color: #D0CBB8 !important;
      }
      .appre-card { background: #1D1A16 !important; }
      .appre-classe-card {
        background: linear-gradient(135deg,#0C1F10,#0A1A15) !important;
        border-color: #1A4A28 !important;
      }

      /* ── C. Bouton mode période ───────────────────────────────── */
      .period-mode-btn { background: #1D1A16 !important; }

      /* ── D. Éditeur de recette ────────────────────────────────── */
      .rec-toolbar {
        background: #151D2A !important;
        border-bottom-color: #232B3A !important;
      }
      .rec-tb-btn {
        background: #1A2535 !important;
        border-color: #2A3A55 !important;
        color: #C0C8D8 !important;
      }
      .rec-tb-btn:hover { background: #22304A !important; }
      .rec-tb-sep { background: #2A3A55 !important; }
      #rec-recipe-panel > div:nth-child(2) {
        background: #10181F !important;
        border-bottom-color: #1E2A35 !important;
      }
      .rec-editor-tabs {
        background: #101820 !important;
        border-bottom-color: #1A2530 !important;
      }
      .rec-editor-tab { color: #9A9080 !important; }
      .rec-editor-tab.active {
        color: #7AACDF !important;
        background: #1A2535 !important;
        border-bottom-color: #7AACDF !important;
      }
      #rec-tab-ingredients { background: #1D1A16 !important; }
      #rec-lignes-foot td {
        background: #252018 !important;
        border-top-color: #3A3228 !important;
      }
      #rec-lignes-list tr:hover { background: #1E3050 !important; }
      .rec-allergen-btn {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
        color: #D0CBB8 !important;
      }
      .rec-allergen-btn.on {
        background: #261E08 !important;
        border-color: #8B6A1A !important;
        color: #D4A040 !important;
      }

      /* ── E. Panneau financier (rfin) ─────────────────────────── */
      .rfin-val {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
      }
      .rfin-lbl {
        border-color: #342E26 !important;
        color: #D0CBB8 !important;
        background: #221E18 !important;
      }
      .rfin-pn-lbl, .rfin-pn-val { background: #1A0D1A !important; }
      .rfin-ht-val { background: #0D1828 !important; }
      .rfin-ttc-lbl, .rfin-ttc-val { background: #0A1A0A !important; }
      .rfin-pe-val { background: #1A0A0A !important; }
      .rec-calc-result {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
      }
      .rec-calc-row { border-bottom-color: #272218 !important; }
      .rec-ing-row:nth-child(even) { background: #17140F !important; }

      /* ── F. Filtres toolbar ───────────────────────────────────── */
      .eco-filter-sel, .eco-filter-inp {
        background: #1D2535 !important;
        border-color: #3A4055 !important;
        color: #D0CBB8 !important;
      }

      /* ── G. Champ calculé (grisé) ────────────────────────────── */
      .rec-field-calc {
        background: #14120E !important;
        color: #6A6258 !important;
        border-color: #2A2418 !important;
      }

      /* ── H. Tri/drag colonnes ─────────────────────────────────── */
      .col-order-item:hover { background: #1A2540 !important; }
      .col-order-item.fixed-col { background: #181510 !important; color: #6A6258 !important; }
      .col-drag-handle { color: #4A4438 !important; }
      .col-move-btn {
        background: #252018 !important;
        border-color: #342E26 !important;
        color: #B0A898 !important;
      }

      /* ── I. Onglets Emballage / Étiquette / Calcul ───────────── */
      #rec-tab-emballage,
      #rec-tab-etiquette { background: #1A1710 !important; }
      #rec-tab-calcul { background: #181510 !important; }
      #rec-tab-calcul > div:first-child {
        background: #141210 !important;
        border-bottom-color: #2A2518 !important;
      }
      #rec-tab-calcul [style*="background:#E0E0E0"] {
        background: #252018 !important;
        border-color: #3A3228 !important;
        color: #D0CBB8 !important;
      }

      /* ── J. Boutons sélecteur nb jours organigramme ──────────── */
      [id^="rec-orga-nj-"][style*="background:white"] {
        background: rgba(255,255,255,.28) !important;
        color: white !important;
      }
      [id^="orga-nj-"][style*="background:white"] {
        background: rgba(255,255,255,.28) !important;
        color: white !important;
      }

      /* ── K. Modale ajout rapide ingrédient ───────────────────── */
      #rec-quick-ing-modal > div { background: #1D1A16 !important; }
      #rec-quick-ing-modal [style*="color:#374151"] { color: #D0CBB8 !important; }
      #rec-quick-ing-modal [style*="background:#F1F5F9"] {
        background: #252018 !important;
        color: #C0B8A8 !important;
      }

      /* ── L. Dialog ajout unité ───────────────────────────────── */
      #unite-dialog > div { background: #1D1A16 !important; }
      #unite-dialog [style*="background:#F1F5F9"] { background: #252018 !important; }
      #rec-import-modal > div { background: #1D1A16 !important; }
      #rec-import-modal [style*="background:#F0F4FA"] { background: #1A2030 !important; }
      #rec-import-modal [style*="background:#F8FAF5"] { background: #182018 !important; }
      #rec-import-modal [style*="background:#FAFAFA"] { background: #151210 !important; }
      #rec-import-modal [style*="background:white"] { background: #1D1A16 !important; }
      #rec-import-modal code { color: #B8C8D8 !important; }
      #rec-import-modal textarea { background: #131010 !important; color: #D0C8B8 !important; }
      #rec-import-modal input[type="text"] { background: #131010 !important; color: #D0C8B8 !important; border-color: #3A3530 !important; }
      #rec-import-modal select { background: #1D1A16 !important; color: #D0C8B8 !important; border-color: #3A3530 !important; }
      #rec-import-tab-btn-csv, #rec-import-tab-btn-xls { background: #1A2030 !important; color: #9AB !important; }
      #rec-import-tab-btn-csv[style*="background:white"], #rec-import-tab-btn-xls[style*="background:white"] { background: #1D1A16 !important; color: #B8C8E8 !important; }
      #rec-xls-preview table thead tr { background: #1A2030 !important; }
      #rec-xls-preview td, #rec-xls-preview th { border-color: #2A2820 !important; color: #C8C0B0 !important; }
      #rec-import-modal [style*="background:#FFF8E8"] { background: #282010 !important; }
      #rec-import-modal [style*="border:1.5px solid #F5C842"] { border-color: #806820 !important; }
      #rec-json-stats { background: #182018 !important; border-color: #2A4020 !important; }
      #rec-json-preview { background: #151210 !important; border-color: #2A2820 !important; color: #C0B8A8 !important; }
      #rec-import-tab-btn-json { background: #1A2030 !important; color: #9AB !important; }
      #rec-import-tab-btn-json[style*="background:white"] { background: #1D1A16 !important; color: #B8C8E8 !important; }

      /* ── M. Sélecteur activité (popup orga) ─────────────────── */
      #orga-picker {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
      }

      /* ── N. Modales dynamiques (dates, duplication séance) ──── */
      #date-modal > div, #dup-modal > div { background: #1D1A16 !important; }
      #date-modal [style*="color:var(--header)"],
      #dup-modal  [style*="color:var(--header)"] { color: #D0CBB8 !important; }
      #date-modal [style*="background:white"],
      #dup-modal  [style*="background:white"] { background: #1D1A16 !important; }

      /* ── O. Bouton fermer dans l'éditeur ingrédient ─────────── */
      #rec-ing-panel [style*="background:#F1F5F9"] {
        background: #252018 !important;
        color: #B0A898 !important;
      }
      #rec-ing-panel [style*="color:#555"] { color: #9A9080 !important; }
      #rec-ing-panel [style*="color:#999"] { color: #6A6258 !important; }

      /* ── P. Eco-settings content (généré dynamiquement) ─────── */
      #eco-settings-content [style*="background:#F8F9FB"],
      #eco-settings-content [style*="background:#F4F6FA"],
      #eco-settings-content [style*="background:#F9FAFB"],
      #eco-settings-content [style*="background:#F0F7FF"],
      #eco-settings-content [style*="background:#F0F4FF"],
      #eco-settings-content [style*="background:white"] {
        background: #252018 !important;
        border-color: #342E26 !important;
      }
      #eco-settings-content [style*="background:#E8EDF5"] {
        background: #1A2035 !important;
        color: #90A8D0 !important;
      }
      #eco-settings-content [style*="background:#F1F5F9"],
      #cat-settings-body    [style*="background:#F1F5F9"] {
        background: #252018 !important;
        color: #C0B8A8 !important;
        border-color: #3A3228 !important;
      }
      #eco-settings-content [style*="background:#DCFCE7"] {
        background: #0A2015 !important;
        color: #5BBF62 !important;
        border-color: #1A4028 !important;
      }
      #eco-settings-content [style*="background:#FEF9C3"] {
        background: #261E00 !important;
        color: #C8A020 !important;
        border-color: #3A2E00 !important;
      }
      #eco-settings-content [style*="color:#777"] { color: #8A8070 !important; }
      #eco-settings-content [style*="color:#374151"] { color: #D0CBB8 !important; }
      #eco-settings-content [style*="color:#999"],
      #eco-settings-content [style*="color:#AAA"] { color: #6A6258 !important; }
      #eco-settings-content [style*="color:#444"] { color: #C0B8A8 !important; }
      #eco-settings-content [style*="color:#555"] { color: #B0A890 !important; }
      #eco-settings-content [style*="border-right:2px solid #E0E4EA"] {
        border-right-color: #2E2820 !important;
      }
      #eco-settings-content [style*="border:1px solid #E0E4EA"] { border-color: #2E2820 !important; }
      #eco-settings-content [style*="border-bottom:1px solid #EEE"],
      #eco-settings-content [style*="border-bottom:1px solid #F0F0F0"],
      #eco-settings-content [style*="border-top:1px solid #EEE"] { border-color: #2E2820 !important; }
      #cat-settings-body [style*="border-bottom:1px solid #F4F4F0"] {
        border-bottom-color: #272218 !important;
      }
      #cat-settings-body [style*="color:#777"] { color: #8A8070 !important; }
      #cat-settings-body [style*="color:#555"] { color: #9A9080 !important; }

      /* ── Q. Rec-settings content (Postes, Auteurs, Activités) ── */
      #rec-settings-content [style*="background:#F8F9FB"],
      #rec-settings-content [style*="background:white"],
      #rec-settings-content [style*="background:#F0F4FF"] {
        background: #252018 !important;
        border-color: #342E26 !important;
      }
      #rec-settings-content [style*="background:#DCFCE7"] {
        background: #0A2015 !important;
        color: #5BBF62 !important;
        border-color: #1A4028 !important;
      }
      #rec-settings-content [style*="background:#FEF9C3"] {
        background: #261E00 !important;
        color: #C8A020 !important;
        border-color: #3A2E00 !important;
      }
      #rec-settings-content [style*="color:#777"] { color: #8A8070 !important; }
      #rec-settings-content [style*="color:#374151"] { color: #D0CBB8 !important; }
      #rec-settings-content [style*="color:#999"] { color: #6A6258 !important; }

      /* ── S. Liste élèves — onglet Évaluer — ligne absent ────── */
      .student-row[style*="background:#f3f4f6"] {
        background: #241010 !important;
        /* opacity conservée via l'inline style */
      }

      /* ── T. Écran Présence ───────────────────────────────────── */
      /* Lignes alternées + barre résumé (background:#F9FAFB) */
      #presence-content [style*="background:#F9FAFB"] { background: #17140F !important; }
      /* Boutons statut INACTIFS (background:white) */
      #presence-content button[style*="background:white"] {
        background: #1D1A16 !important;
        border-color: #3A3428 !important;
        color: #7A7060 !important;
      }
      /* Bouton Présent ACTIF (vert clair → vert sombre) */
      #presence-content button[style*="background:#dcfce7"] {
        background: #0A2A12 !important;
        border-color: #16a34a !important;
      }
      /* Bouton Absent ACTIF (rouge clair → rouge sombre) */
      #presence-content button[style*="background:#fee2e2"] {
        background: #2A0808 !important;
        border-color: #dc2626 !important;
      }
      /* Bouton Retard ACTIF (jaune clair → ambre sombre) */
      #presence-content button[style*="background:#fef3c7"] {
        background: #261800 !important;
        border-color: #d97706 !important;
      }

      /* ── U. Résultats — cellules colorées par présence ──────── */
      #resultats-content td[style*="background:#fee2e2"] { background: #2A0808 !important; }
      #resultats-content td[style*="background:#fef3c7"] { background: #261800 !important; }

      /* ── R. Dashboard / Onglet Accueil ───────────────────────── */
      #dashboard-content [style*="background:white"] {
        background: #1D1A16 !important;
        color: #D0CBB8 !important;
        border-color: #342E26 !important;
      }
      #dashboard-content [style*="background:#F8F7F4"] { background: #1D1A16 !important; }
      #dashboard-content [style*="background:#E5E7EB"] { background: #2A2520 !important; }
      #dashboard-content [style*="color:var(--header)"] { color: #90A8C0 !important; }
      #dashboard-content [style*="border-bottom:1px solid #F3F4F6"] {
        border-color: #272218 !important;
      }
      /* Fond du badge contexte en haut du dashboard */
      #dashboard-content [style*="background:var(--header)"] {
        background: #2A2018 !important;
        border: 1px solid #3A3020;
      }

      /* ── V. Organigramme — plages horaires J2–J5 (fond bleu clair) */
      [id^="orga-time-j"][style*="background:#EFF6FF"] {
        background: #0A1830 !important;
        border-color: #1A3060 !important;
      }
      [id^="orga-time-j"][style*="background:#F0FFF4"] {
        background: #071A10 !important;
        border-color: #1A4028 !important;
      }
      [id^="orga-time-j"][style*="background:#FFF7ED"] {
        background: #1A1000 !important;
        border-color: #3A2800 !important;
      }
      [id^="orga-time-j"][style*="background:#FFF1F2"] {
        background: #1A0A0A !important;
        border-color: #3A1A1A !important;
      }
      /* Onglets jours "idle" (background:white via JS) */
      #orga-day-tabs button[style*="background:white"] {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
        color: #C0B8A8 !important;
      }

      /* ── W. Onglet Calcul — boîtes coefficient (background:white) */
      #rec-tab-calcul [style*="background:white"] {
        background: #1A1A28 !important;
        border-color: #2A3A55 !important;
        color: #C0C8D8 !important;
      }
      #rec-tab-calcul [style*="background:#EFF6FF"],
      #rec-tab-calcul [style*="background:#f8f9fa"],
      #rec-tab-calcul [style*="background:#fff"] {
        background: #141420 !important;
      }
      #rec-tab-calcul [style*="background:#FEF9C3"] {
        background: #261E00 !important;
        border-color: #3A2E00 !important;
      }
      #rec-tab-calcul [style*="color:#374151"],
      #rec-tab-calcul [style*="color:#6B7280"] { color: #C0C8D8 !important; }
      #rec-tab-calcul [style*="color:#92400E"] { color: #D0A060 !important; }

      /* ── X. Cat-form-modal — select et bouton Annuler (#fff) ───── */
      #cat-form-modal select[style*="background:#fff"],
      #cat-form-modal button[style*="background:#fff"] {
        background: #1D1A16 !important;
        color: #D0CBB8 !important;
        border-color: #342E26 !important;
      }

      /* ── Y. Liste activités perso (rec-settings) ────────────────── */
      /* Ligne background:white + border #DBEAFE */
      #rec-settings-content [style*="background:white"][style*="DBEAFE"],
      #rec-orga-acts-list    [style*="background:white"] {
        background: #1A1D28 !important;
        border-color: #2A3450 !important;
      }
      /* Même chose dans rsac (planification) */
      [id^="rsac-"][style*="background:white"] {
        background: #1A1D28 !important;
      }

      /* ── Z. Popup info ingrédient (rec-ing-popup) ───────────────── */
      .rec-ing-popup[style*="background:white"] {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
        color: #D0CBB8 !important;
      }

      /* ── ZA. Modale liaison recette-production ──────────────────── */
      .modal-overlay > div[style*="background:white"] {
        background: #1D1A16 !important;
        color: #D0CBB8 !important;
      }

      /* ── ZB. Lignes paires des tables (règle CSS globale #F9F6F2) ── */
      /* S'applique à Résultats ET Présence */
      #resultats-content tr:nth-child(even) td,
      #presence-content  tr:nth-child(even) td {
        background: #1D1A16 !important;
      }
      /* La cellule présence colorée (absent/retard) doit garder sa couleur */
      #resultats-content tr:nth-child(even) td[style*="background:#fee2e2"] {
        background: #2A0808 !important;
      }
      #resultats-content tr:nth-child(even) td[style*="background:#fef3c7"] {
        background: #261800 !important;
      }
      /* Heatmap : restaurer les couleurs --*-bg sur lignes paires (corrige l'écrasement !important) */
      #resultats-content tr:nth-child(even) td.heat-cell--TB   { background: var(--TB-bg)  !important; }
      #resultats-content tr:nth-child(even) td.heat-cell--B    { background: var(--B-bg)   !important; }
      #resultats-content tr:nth-child(even) td.heat-cell--ECA  { background: var(--EC-bg)  !important; }
      #resultats-content tr:nth-child(even) td.heat-cell--I    { background: var(--I-bg)   !important; }
      #resultats-content tr:nth-child(even) td.heat-cell--none { background: var(--border) !important; }
      /* Paramètres → Élèves : même correction zèbre */
      #settings-window tr:nth-child(even) td {
        background: #1D1A16 !important;
      }
      /* Note de bas de tableau Élèves — couleur lisible en dark */
      .sge-note {
        color: #9A9080 !important;
      }

      /* ── ZC. Présence — textarea Observations ────────────────────── */
      /* Sans observation : background:white (couvert par input/textarea global) */
      /* Avec observation : background:#fffbeb (ambre clair → ambre sombre)     */
      #presence-content textarea[style*="background:#fffbeb"] {
        background: #261E00 !important;
      }

      /* ── ZD. Éditeur recette — corrections audit dark mode ───── */

      /* Toolbar Type de Recette / Poste (4ème enfant de rec-recipe-panel) */
      #rec-recipe-panel > div:nth-child(4) {
        background: #10181F !important;
        border-bottom-color: #1E2A35 !important;
      }
      /* Panneau financier bas (conteneur global) */
      #rec-financial-panel {
        background: #181510 !important;
        border-top-color: #2A3A55 !important;
      }
      /* Ligne d'en-tête du tableau financier */
      #rec-financial-panel tr[style*="background:#D8D8D8"] {
        background: #1A2030 !important;
      }
      /* En-têtes colonnes Recette / Kg (lavande) */
      .rfin-col-recette, .rfin-col-kg {
        background: #1A1A30 !important;
        border-color: #2A2A50 !important;
      }
      /* En-tête colonne Pièce/Portion (vert menthe) */
      .rfin-col-piece {
        background: #0E1E0E !important;
        border-color: #1A3A1A !important;
      }
      /* Cellule Poids Brut / labels gauche (gris moyen) */
      #rec-financial-panel td[style*="background:#C8C8C8"],
      #rec-financial-panel td[style*="background:#D0D0D0"],
      #rec-financial-panel td[style*="background:#E0E0E0"] {
        background: #1E2028 !important;
        color: #C8C0B0 !important;
        border-color: #2A2830 !important;
      }
      /* Cellule Coef Min / Remarques (beige) */
      #rec-financial-panel td[style*="background:#F0EAD6"],
      #rec-financial-panel td[style*="background:#FAF6EC"],
      #rec-financial-panel td[style*="background:#E8E4DC"],
      #rec-financial-panel td[style*="background:#EEE8DC"] {
        background: #201A10 !important;
        border-color: #3A3020 !important;
        color: #C8C0A8 !important;
      }
      /* Cellule coefficient × (fond très clair) */
      #rec-financial-panel td[style*="background:#F5F5F5"],
      #rec-financial-panel td[style*="background:#F8F8F8"],
      #rec-financial-panel td[style*="background:#FAFAFA"] {
        background: #181510 !important;
        border-color: #272218 !important;
      }
      /* Ligne PV T.T.C. avec Emballage (fond vert très clair) */
      #rec-financial-panel tr[style*="background:#E8F5E9"],
      #rec-financial-panel tr[style*="background:#F0FDF4"],
      #rec-financial-panel tr[style*="background:#ECFDF5"] {
        background: #071A0E !important;
      }
      /* Filtre panel recettes */
      #rec-filter-panel {
        background: #1D1A16 !important;
        border-color: #342E26 !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
        color: #EDE8E0 !important;
      }
      #rec-filter-panel select,
      #rec-filter-panel input {
        background: #1D2535 !important;
        color: #D0CBB8 !important;
        border-color: #3A4055 !important;
      }
      /* Boutons ▲/▼ (tri lignes ingrédients) */
      #rec-lignes-list button[style*="background:#E5E7EB"] {
        background: #252018 !important;
        color: #6A6258 !important;
      }
      /* Bouton ➕ ajouter ingrédient */
      #rec-recipe-panel button[style*="background:#EFF6FF"] {
        background: #0D1828 !important;
        color: #7AACDF !important;
        border-color: #1A3A6B !important;
      }
      /* Bouton unité (fond bleu très clair) */
      #rec-lignes-list button[style*="background:#E0E7FF"] {
        background: #1A1A38 !important;
        color: #9090D8 !important;
        border-color: #2A2A50 !important;
      }
      /* Légende organigramme — fond barre + badges pastel */
      #rec-orga-legend {
        background: #1A1714 !important;
        border-bottom-color: #2A2418 !important;
      }
      #rec-orga-legend span[style*="background:#"] {
        filter: brightness(0.6) saturate(1.8) !important;
        color: #fff !important;
        text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.8) !important;
      }
      /* Règle globale tr:nth-child(even) td surcharge le TR dark — correction ciblée */
      #rec-lignes-list tr:nth-child(even) td {
        background: #17140F !important;
      }
      #rec-lignes-list tr:nth-child(odd) td {
        background: #1D1A16 !important;
      }
      /* Bouton ✕ supprimer ingrédient (rouge clair → rouge sombre) */
      #rec-recipe-panel button[style*="background:#FEE2E2"] {
        background: #2A0808 !important;
        color: #FF8A8A !important;
        border-color: #4A1010 !important;
      }
      /* Barre sous-onglets Procédé / Organigramme */
      #rec-tab-procede > div[style*="background:#F8FAFC"],
      #rec-tab-procede > div[style*="background:#F8F9FC"] {
        background: #101820 !important;
        border-bottom-color: #1A3060 !important;
      }
      /* Grille organigramme recette */
      #rec-orga-grid {
        background: #131110 !important;
      }
      #rec-orga-grid [style*="background:#F2F4F8"],
      #rec-orga-grid [style*="background:var(--er-row-alt)"] {
        background: #17140F !important;
      }
      /* Lignes activité organigramme — TR + TD sticky label column */
      #rec-orga-grid tr[style*="background:#fff"],
      #rec-orga-grid tr[style*="background:white"],
      #rec-orga-grid td[style*="background:#fff"],
      #rec-orga-grid td[style*="background:white"] {
        background: #1A2030 !important;
        opacity: 1 !important;
        color: #C0C8D8 !important;
      }
      #rec-orga-grid tr[style*="background:#FAFAFA"],
      #rec-orga-grid tr[style*="background:#fafafa"],
      #rec-orga-grid td[style*="background:#FAFAFA"],
      #rec-orga-grid td[style*="background:#fafafa"] {
        background: #151210 !important;
        opacity: 1 !important;
        color: #B8B0A0 !important;
      }
      /* En-têtes colonnes (grille temps) */
      #rec-orga-grid th[style*="background:#F2F4F8"] {
        background: #1A2030 !important;
        border-color: #2A3050 !important;
      }
      /* Labels heures (spans absolus) */
      #rec-orga-grid span[style*="background:#F2F4F8"] {
        background: #1A2030 !important;
        color: #8AAAC8 !important;
        border-color: #2A3050 !important;
      }

      /* ── Onglet Calcul de Recette — lignes alternées ─────── */
      /* La règle globale tr:nth-child(even) td à ligne 827 override les TR */
      #rec-tab-calcul tr:nth-child(even) td {
        background: #14121E !important;
        color: #C8C0D8 !important;
      }
      #rec-tab-calcul tr:nth-child(odd) td {
        background: #0E0D18 !important;
        color: #B0A8C8 !important;
      }
      /* Fond du container résultat et titres */
      #rec-calc-result [style*="background:#fff"],
      #rec-calc-result [style*="background:white"],
      #rec-calc-result [style*="background:#F9F6F2"],
      #rec-calc-result [style*="background:#FAFAFA"] {
        background: #0E0D18 !important;
      }
      /* Titres "Pour : Xgrs de …" */
      #rec-tab-calcul [style*="color:var(--er-navy)"],
      #rec-tab-calcul [style*="color:#1A3A6B"],
      #rec-tab-calcul b[style*="color"] {
        color: #7AACDF !important;
      }

      /* ── Mobile bottom nav — dark mode ─────────────────────── */
      @media (max-width: 699px) {
        #main-nav {
          background: rgba(19,17,16,0.90) !important;
          border-top-color: rgba(255,255,255,0.08) !important;
        }
        #main-nav button.active {
          border-top-color: var(--primary) !important;
          color: var(--primary) !important;
        }
      }

      /* ── Semi-finis — bouton → (amber) ────────────────────── */
      #rec-lignes-list button[style*="background:#FEF3C7"] {
        background: #2A1A00 !important;
        color: #FCD34D !important;
        border-color: #7A5010 !important;
      }
      /* ── Semi-finis — carte aperçu ──────────────────────── */
      .sf-preview-card {
        background: #0E1825 !important;
        border-color: #1E2E40 !important;
        color: #8AAABB !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
      }
      /* Quantités dans la carte */
      .sf-preview-card span[style*="color:#1A3A6B"] {
        color: #7AACDF !important;
      }
      /* Badge coefficient */
      .sf-preview-card span[style*="color:#1A6B3A"] {
        color: #5BBF8A !important;
        background: #091A10 !important;
        border-color: #1A4A2A !important;
      }
      /* Zébrage dark : lignes paires légèrement plus claires */
      .sf-preview-card .sf-row[style*="background:rgba(0,0,0,.03)"] {
        background: rgba(255,255,255,.04) !important;
      }
      /* ── Breadcrumb semi-finis ──────────────────────────── */
      #rec-breadcrumb {
        background: #0A1420 !important;
        border-bottom-color: #1A2F4F !important;
      }
      #rec-breadcrumb a { color: #7AACDF !important; }

      /* ══════════════════════════════════════════════════════════
         CORRECTIONS DARK MODE — ÉVALUATION, GESTION ÉLÈVES, SGE
         ══════════════════════════════════════════════════════════ */

      /* ── Panel évaluation — header sticky ───────────────────── */
      .eval-sticky-header {
        background: rgba(29,26,22,0.97) !important;
        border-bottom-color: rgba(237,232,224,0.08) !important;
      }

      /* ── Boutons navigation ← → ─────────────────────────────── */
      .eval-nav-btn {
        border-color: rgba(237,232,224,0.20) !important;
        color: rgba(237,232,224,0.45) !important;
      }
      .eval-nav-btn:hover:not(:disabled) {
        background: rgba(200,144,42,0.12) !important;
        color: #EDE8E0 !important;
        border-color: rgba(200,144,42,0.38) !important;
      }

      /* ── Barre contexte séance/groupe ───────────────────────── */
      .seance-ctx-bar {
        background: rgba(200,144,42,0.06) !important;
        border-color: rgba(200,144,42,0.14) !important;
        color: rgba(237,232,224,0.65) !important;
      }
      .seance-ctx-sep    { color: rgba(237,232,224,0.25) !important; }
      .seance-ctx-strong { color: rgba(237,232,224,0.88) !important; }

      /* ── Badge "À évaluer" ──────────────────────────────────── */
      .eval-todo-pill {
        background: rgba(245,158,11,0.12) !important;
        color: #F59E0B !important;
        border-color: rgba(245,158,11,0.28) !important;
      }

      /* ── Séparateur barre progression ──────────────────────── */
      .eval-progress-sep { color: rgba(237,232,224,0.18) !important; }

      /* ── Dots barre progression (couleurs claires pour dark) ── */
      .eval-progress-dot--ok      { background: #34D399 !important; }
      .eval-progress-dot--neutral { background: #9CA3AF !important; }
      .eval-progress-dot--absent  { background: #F87171 !important; }

      /* ── Gestion élèves — boutons icône Actions (✏️ 🗑️) ────── */
      .sge-action-btn-edit { color: rgba(237,232,224,0.38) !important; }
      .sge-action-btn-edit:hover {
        background: rgba(237,232,224,0.08) !important;
        color: #EDE8E0 !important;
      }
      .sge-action-btn-del { color: rgba(248,113,113,0.38) !important; }
      .sge-action-btn-del:hover {
        background: rgba(220,38,38,0.12) !important;
        color: #F87171 !important;
      }

      /* ── Tableau élèves — wrap + en-tête sticky ─────────────── */
      .sge-table-wrap {
        background: #1D1A16 !important;
        border-color: rgba(120,72,32,0.18) !important;
      }
      .sge-table th {
        background: rgba(31,27,22,0.97) !important;
        color: rgba(237,232,224,0.88) !important;
        box-shadow: 0 1px 0 rgba(120,72,32,0.18) !important;
      }
      .sge-table thead tr    { border-bottom-color: rgba(120,72,32,0.20) !important; }
      .sge-table tbody tr    { border-bottom-color: rgba(120,72,32,0.10) !important; }
      .sge-table tbody tr:hover { background: rgba(200,144,42,0.05) !important; }
      .sge-td-name           { color: #EDE8E0 !important; }

      /* ── Cartes SGE (vue mobile) ─────────────────────────────── */
      .sge-card {
        background: #1D1A16 !important;
        border-color: rgba(120,72,32,0.20) !important;
      }
      .sge-card-name  { color: #EDE8E0 !important; }
      .sge-card-groupe {
        color: var(--primary) !important;
        background: rgba(200,144,42,0.12) !important;
        border-color: rgba(200,144,42,0.22) !important;
      }
      .sge-card-statut-inactif {
        color: rgba(237,232,224,0.38) !important;
        background: rgba(237,232,224,0.06) !important;
        border-color: rgba(237,232,224,0.12) !important;
      }
      .sge-card-btn {
        background: rgba(37,32,24,0.70) !important;
        border-color: rgba(120,72,32,0.22) !important;
      }

      /* ── Barre de stats ─────────────────────────────────────── */
      .sge-stats          { color: rgba(237,232,224,0.45) !important; }
      .sge-stats strong   { color: #EDE8E0 !important; }

      /* ── Carte import ───────────────────────────────────────── */
      .sge-import-card {
        background: rgba(37,32,24,0.55) !important;
        border-color: rgba(120,72,32,0.18) !important;
      }
      .sge-import-card-title { color: #EDE8E0 !important; }
      .sge-import-close {
        background: rgba(237,232,224,0.08) !important;
        color: #EDE8E0 !important;
      }

      /* ── Carte ajout élève ──────────────────────────────────── */
      .sge-add-card {
        background: linear-gradient(135deg,#1D1A16,#221A0E) !important;
        border-color: rgba(200,144,42,0.22) !important;
      }
      .sge-add-card-title { color: #EDE8E0 !important; }
      .sge-add-field label {
        color: rgba(237,232,224,0.50) !important;
      }
      .sge-add-field input, .sge-add-field select {
        background: #181411 !important;
        color: #EDE8E0 !important;
        border-color: rgba(120,72,32,0.22) !important;
      }

      /* ── Boutons outline SGE ────────────────────────────────── */
      .sge-btn-outline {
        color: #EDE8E0 !important;
        border-color: rgba(237,232,224,0.22) !important;
      }
      .sge-btn-outline:hover {
        background: rgba(237,232,224,0.06) !important;
        border-color: rgba(237,232,224,0.40) !important;
      }

      /* ── Aménagements — liste (Réglages) ────────────────────── */
      .sge-amgr-row {
        background: rgba(37,32,24,0.70) !important;
        border-color: rgba(120,72,32,0.18) !important;
      }
      .sge-amgr-label { color: #EDE8E0 !important; }
      .sge-amgr-label-input {
        background: #181411 !important;
        color: #EDE8E0 !important;
      }
      .sge-amgr-btn {
        color: rgba(237,232,224,0.55) !important;
        border-color: rgba(237,232,224,0.14) !important;
      }
      .sge-amgr-btn:hover {
        background: rgba(237,232,224,0.06) !important;
        color: #EDE8E0 !important;
      }
      .sge-amgr-btn.reactivate {
        color: #34D399 !important;
        border-color: rgba(52,211,153,0.28) !important;
      }
      .sge-amgr-btn.reactivate:hover { background: rgba(52,211,153,0.08) !important; }
      .sge-amgr-btn.danger {
        color: #F87171 !important;
        border-color: rgba(248,113,113,0.22) !important;
      }
      .sge-amgr-btn.danger:hover { background: rgba(220,38,38,0.08) !important; }

      /* ── Boutons icône (couleur / supprimer) ─────────────────── */
      .sge-amgr-icon-btn {
        color: rgba(237,232,224,0.45) !important;
        border-color: rgba(237,232,224,0.14) !important;
      }
      .sge-amgr-icon-btn:hover {
        background: rgba(237,232,224,0.06) !important;
        color: #EDE8E0 !important;
      }
      .sge-amgr-icon-btn.del-btn {
        color: rgba(248,113,113,0.45) !important;
        border-color: rgba(248,113,113,0.18) !important;
      }
      .sge-amgr-icon-btn.del-btn:hover {
        background: rgba(220,38,38,0.10) !important;
        color: #F87171 !important;
      }

      /* ── Palette de couleurs (popup) ─────────────────────────── */
      .sge-amgr-palette {
        background: #1D1A16 !important;
        border-color: rgba(237,232,224,0.12) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 1.5px 4px rgba(0,0,0,0.25) !important;
      }
      .sge-amgr-palette-label { color: rgba(237,232,224,0.40) !important; }
      .sge-amgr-palette-swatch.active { border-color: rgba(237,232,224,0.70) !important; }

      /* ── Zone ajout aménagement ──────────────────────────────── */
      .sge-amgr-add-zone { border-top-color: rgba(120,72,32,0.14) !important; }
      .sge-amgr-add-input {
        background: #181411 !important;
        color: #EDE8E0 !important;
        border-color: rgba(120,72,32,0.22) !important;
      }
      .sge-amgr-add-input::placeholder { color: rgba(237,232,224,0.30) !important; }

      /* ── Badge "aucun aménagement" ───────────────────────────── */
      .sge-amena-none {
        color: rgba(237,232,224,0.30) !important;
        border-color: rgba(237,232,224,0.18) !important;
      }

      /* ── Toggles aménagements (fiche élève) ─────────────────── */
      .sge-amena-toggle {
        background: #1D1A16 !important;
        border-color: rgba(120,72,32,0.22) !important;
        color: rgba(237,232,224,0.60) !important;
      }
      .sge-amena-toggle .sge-toggle-dot { background: rgba(237,232,224,0.22) !important; }
      .sge-amena-toggle:hover {
        border-color: rgba(120,72,32,0.40) !important;
        background: rgba(37,32,24,0.70) !important;
      }

      /* ── Fiche élève (panneau latéral) ───────────────────────── */
      #sge-fiche-panel {
        background: #1D1A16 !important;
        box-shadow: -8px 0 48px rgba(0,0,0,0.60) !important;
      }
      .sge-fiche-header { border-bottom-color: rgba(120,72,32,0.14) !important; }
      .sge-fiche-close {
        background: rgba(237,232,224,0.08) !important;
        color: #EDE8E0 !important;
      }
      .sge-fiche-close:hover { background: rgba(237,232,224,0.14) !important; }
      .sge-fiche-title, .sge-fiche-name-big { color: #EDE8E0 !important; }
      .sge-fiche-meta { color: rgba(237,232,224,0.35) !important; }
      .sge-fiche-photo-area { background: rgba(37,32,24,0.55) !important; }
      .sge-fiche-section-title { color: rgba(200,144,42,0.60) !important; }
      .sge-fiche-field label { color: rgba(237,232,224,0.50) !important; }
      .sge-fiche-input, .sge-fiche-select, .sge-fiche-textarea {
        background: #181411 !important;
        color: #EDE8E0 !important;
        border-color: rgba(120,72,32,0.22) !important;
      }
      .sge-fiche-footer { border-top-color: rgba(120,72,32,0.10) !important; }
      .sge-fiche-open-btn {
        color: rgba(237,232,224,0.40) !important;
      }
      .sge-fiche-open-btn:hover {
        background: rgba(200,144,42,0.12) !important;
        color: #EDE8E0 !important;
      }

      /* ── Phase A — Contexte pédagogique (dark) ── */
      .crit-block--targeted {
        background: rgba(29,78,216,.15) !important;
        border-color: rgba(147,197,253,.25) !important;
        border-left-color: #60A5FA !important;
      }
      .crit-targeted-badge {
        background: #2563EB !important;
      }

    } /* fin @media dark */

    /* ── 12. Prefer reduced motion ──────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .ic-bounce, .ic-pulse, .ic-ripple-dot,
      .eco-tbtn, .home-card, .btn-icon,
      .rec-subbtn, #main-nav button,
      .eco-row-sel, .toast-enter, .toast-leave {
        animation: none !important;
        transition: none !important;
      }
      /* Modales — modal-enter désactivée */
      .bilan-modal-box, .prog-modal-box,
      .settings-window, .eco-settings-modal, .rec-ing-modal,
      .panel-sheet, #nav-more-sheet, #sge-fiche-panel {
        animation: none !important;
      }
      #main-nav button.active::after,
      .rec-subbtn.active::after {
        animation: none !important;
      }
      /* Alerte élève : --I devient rouge clair en dark → texte foncé pour contraste suffisant */
      .eleve-alert { color: #7F1D1D !important; }
    }
  /* ══════════════════════════════════════════════
     GESTION ÉLÈVES (Réglages) — .sge-*
  ══════════════════════════════════════════════ */

  /* ─── Toolbar ─── */
  .sge-toolbar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px; margin-bottom: 14px;
  }
  .sge-toolbar-left  { display: flex; gap: 8px; flex: 1; min-width: 0; }
  .sge-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .sge-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 16px; border-radius: 50px;
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer; border: none; white-space: nowrap;
    transition: background 160ms, box-shadow 160ms, transform 100ms;
  }
  .sge-btn-primary {
    background: var(--btn-primary-bg); color: #fff;
    box-shadow: 0 4px 14px rgba(47,36,27,0.22);
  }
  .sge-btn-primary:hover {
    background: #3d2f22;
    box-shadow: 0 6px 18px rgba(47,36,27,0.30);
    transform: translateY(-1px);
  }
  .sge-btn-outline {
    background: transparent; color: #2f241b;
    border: 1.5px solid rgba(47,36,27,0.22);
  }
  .sge-btn-outline:hover {
    background: rgba(47,36,27,0.06);
    border-color: rgba(47,36,27,0.40);
  }
  .sge-btn-danger {
    background: transparent; color: var(--danger);
    border: 1.5px solid rgba(220,38,38,0.25);
    font-size: 0.78rem; padding: 6px 14px;
  }
  .sge-btn-danger:hover { background: rgba(220,38,38,0.07); }

  /* ─── Search + Group filter ─── */
  .sge-search-wrap {
    position: relative; display: flex; align-items: center;
  }
  .sge-search-icon {
    position: absolute; left: 10px;
    font-size: 0.8rem; color: rgba(47,36,27,0.40);
    pointer-events: none; z-index: 1;
  }
  .sge-search {
    padding: 7px 12px 7px 30px;
    border: 1.5px solid rgba(120,72,32,0.16);
    border-radius: 50px; background: #fff;
    font-size: 0.82rem; color: #2f241b;
    width: 160px; outline: none;
    transition: border-color 180ms, box-shadow 180ms, width 200ms;
    box-sizing: border-box;
  }
  .sge-search:focus {
    border-color: var(--primary); width: 200px;
    box-shadow: var(--glow-subtle);
  }
  .sge-search::placeholder { color: rgba(47,36,27,0.35); }
  .sge-filter-select {
    padding: 7px 28px 7px 10px;
    border: 1.5px solid rgba(120,72,32,0.16);
    border-radius: 50px; background: #fff;
    font-size: 0.82rem; font-weight: 500; color: #2f241b;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a3010' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    cursor: pointer; outline: none;
    transition: border-color 180ms;
  }
  .sge-filter-select:focus { border-color: var(--primary); box-shadow: var(--glow-subtle); }

  /* ─── Stats bar ─── */
  .sge-stats {
    font-size: 0.75rem; color: rgba(47,36,27,0.50);
    margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap;
  }
  .sge-stats strong { color: #2f241b; }

  /* ─── Import card (collapsible) ─── */
  .sge-import-card {
    background: rgba(247,240,230,0.55);
    border: 1px solid rgba(120,72,32,0.10);
    border-radius: 16px; padding: 16px;
    margin-bottom: 14px;
  }
  .sge-import-card-header {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 10px;
  }
  .sge-import-card-title {
    font-size: 0.88rem; font-weight: 700; color: #2f241b;
  }
  .sge-import-close {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(47,36,27,0.08); border: none;
    cursor: pointer; font-size: 0.85rem; color: #2f241b;
    display: flex; align-items: center; justify-content: center;
  }

  /* ─── Add form card ─── */
  .sge-add-card {
    background: linear-gradient(135deg, #fffdf8, #f6eadb);
    border: 1.5px solid rgba(200,144,42,0.22);
    border-radius: 16px; padding: 16px 18px;
    margin-bottom: 14px;
  }
  .sge-add-card-title {
    font-size: 0.9rem; font-weight: 800; color: #2f241b;
    margin-bottom: 12px; letter-spacing: -0.02em;
  }
  .sge-add-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px; margin-bottom: 12px;
  }
  @media (max-width: 480px) { .sge-add-fields { grid-template-columns: 1fr 1fr; } }
  .sge-add-field label {
    display: block; font-size: 0.72rem; font-weight: 700;
    color: rgba(47,36,27,0.55); margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .sge-add-field input, .sge-add-field select {
    width: 100%; padding: 8px 10px;
    border: 1.5px solid rgba(120,72,32,0.18);
    border-radius: 10px; background: #fff;
    font-size: 0.85rem; color: #2f241b; outline: none;
    box-sizing: border-box;
    transition: border-color 180ms, box-shadow 180ms;
  }
  .sge-add-field input:focus, .sge-add-field select:focus {
    border-color: var(--primary);
    box-shadow: var(--glow-subtle);
  }
  .sge-add-actions { display: flex; gap: 8px; }

  /* ─── Table ─── */
  .sge-table-wrap {
    overflow-x: auto;       /* scroll horizontal uniquement si vraiment nécessaire */
    overflow-y: auto;
    border-radius: var(--table-radius);
    border: 1px solid rgba(120,72,32,0.10);
    background: #fff;
    max-height: calc(90vh - 320px);
  }
  .sge-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;     /* tailles calculées selon le contenu */
  }
  /* ── En-tête sticky ── */
  .sge-table thead tr {
    border-bottom: 1.5px solid rgba(120,72,32,0.12);
  }
  .sge-table th {
    position: sticky; top: 0; z-index: 2;
    background: rgba(244,237,226,0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: var(--table-padding-y) var(--table-padding-x); text-align: left;
    font-size: 0.80rem; font-weight: 700;
    color: rgba(35,18,5,0.88); text-transform: none;
    letter-spacing: 0.01em; white-space: nowrap;
    box-shadow: 0 1px 0 rgba(120,72,32,0.12);
  }
  /* ── Lignes corps ── */
  .sge-table tbody tr {
    border-bottom: 1px solid rgba(120,72,32,0.06);
    transition: background 120ms;
  }
  .sge-table tbody tr:last-child { border-bottom: none; }
  .sge-table tbody tr:nth-child(even) { background: var(--table-zebra); }
  .sge-table tbody tr:hover { background: var(--table-row-hover); }
  /* ── Cellules ── */
  .sge-table td {
    padding: var(--table-padding-y) var(--table-padding-x); vertical-align: middle;
  }
  /* ── Colonnes sémantiques ── */
  .sge-col-avatar              { width: 60px; min-width: 60px; padding-left: 12px; text-align: center; }
  .sge-col-nom                 { min-width: 160px; }
  .sge-col-prenom              { min-width: 120px; }
  .sge-col-groupe              { min-width: 140px; white-space: nowrap; }
  .sge-col-statut              { min-width: 130px; white-space: nowrap; }
  .sge-col-amena               { min-width: 180px; }
  .sge-col-actions             { min-width: 84px; width: 84px; text-align: center; }
  /* Avatar cell */
  .sge-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #e8d5b8 0%, #d4a96a 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 800; color: #5a3010;
    flex-shrink: 0; letter-spacing: -0.01em;
    margin: 0 auto;
  }
  .sge-avatar.inactif {
    background: #e5e7eb; color: #6b7280; opacity: 0.65;
  }
  /* Inline inputs in table */
  .sge-td-input {
    width: 100%; padding: 6px 8px;
    border: 1.5px solid transparent;
    border-radius: 8px; background: transparent;
    font-size: 0.85rem; color: #2f241b; outline: none;
    box-sizing: border-box;
    transition: border-color 150ms, background 150ms, box-shadow 150ms;
    font-family: inherit;
  }
  .sge-td-input:hover {
    border-color: rgba(120,72,32,0.18);
    background: rgba(247,240,230,0.50);
  }
  .sge-td-input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: var(--glow-subtle);
  }
  .sge-td-select {
    padding: 5px 24px 5px 8px;
    border: 1.5px solid transparent;
    border-radius: 8px; background: transparent;
    font-size: 0.82rem; font-weight: 600; color: #2f241b;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3 3.5-3' stroke='%235a3010' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 6px center;
    cursor: pointer; outline: none; width: 100%;
    transition: border-color 150ms, background 150ms;
    font-family: inherit;
  }
  .sge-td-select:hover {
    border-color: rgba(120,72,32,0.18);
    background-color: rgba(247,240,230,0.50);
  }
  .sge-td-select:focus {
    border-color: var(--primary);
    background-color: #fff;
    box-shadow: var(--glow-subtle);
  }
  /* Statut badges */
  .sge-statut-actif   { color: var(--success); font-weight: 700; }
  .sge-statut-inactif { color: #9CA3AF; font-weight: 600; }
  /* ─── Cellule actions (icônes seules) ─── */
  .sge-actions-cell {
    display: flex; gap: 4px; align-items: center; justify-content: center;
  }
  .sge-action-btn {
    width: 34px; height: 34px; border-radius: 10px;
    border: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; line-height: 1; cursor: pointer; flex-shrink: 0;
    outline: none;
    transition:
      background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1),
      transform       0.16s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow      0.16s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sge-action-btn:focus-visible {
    box-shadow: 0 0 0 2.5px rgba(200,144,42,0.40);
  }
  .sge-action-btn:active {
    transform: scale(0.92) !important;
    transition-duration: 0.08s !important;
  }
  /* Modifier — action neutre */
  .sge-action-btn-edit {
    color: rgba(47,36,27,0.45);
  }
  .sge-action-btn-edit:hover {
    background: rgba(120,72,32,0.08);
    color: #6b3f1d;
    transform: translateY(-1px);
  }
  /* Supprimer — danger discret */
  .sge-action-btn-del {
    color: rgba(220,38,38,0.35);
  }
  .sge-action-btn-del:hover {
    background: rgba(220,38,38,0.10);
    color: #b91c1c;
    transform: translateY(-1px);
  }
  /* Empty state */
  .sge-empty {
    text-align: center; padding: 28px 16px;
    color: rgba(47,36,27,0.40); font-size: 0.88rem;
  }
  .sge-empty-icon { font-size: 1.8rem; margin-bottom: 6px; }

  /* ─── Photo élève ─── */
  .sge-photo-cell {
    display: flex; align-items: center; justify-content: center;
  }
  /* Avatar cliquable → ouvrir photo */
  .sge-avatar {
    position: relative; cursor: pointer;
    transition: opacity 160ms;
  }
  .sge-avatar:hover { opacity: 0.82; }
  .sge-avatar-cam {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: rgba(30,15,5,0.40);
    display: none; align-items: center; justify-content: center;
    font-size: 0.72rem;
  }
  .sge-avatar:hover .sge-avatar-cam { display: flex; }
  /* Photo réelle */
  .sge-photo-wrap {
    position: relative; display: inline-flex;
    align-items: center; justify-content: center;
  }
  .sge-photo-img {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; cursor: pointer; display: block;
    border: 2px solid rgba(120,72,32,0.15);
    transition: opacity 160ms;
  }
  .sge-photo-img:hover { opacity: 0.82; }
  .sge-photo-del {
    position: absolute; top: -5px; right: -5px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--danger); color: white; border: 1.5px solid white;
    font-size: 0.58rem; cursor: pointer; padding: 0;
    display: none; align-items: center; justify-content: center;
    line-height: 1;
  }
  .sge-photo-wrap:hover .sge-photo-del { display: flex; }

  /* Danger zone */
  .sge-danger-zone {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(120,72,32,0.08);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
  }
  .sge-note {
    font-size: 0.72rem; color: rgba(47,36,27,0.40); line-height: 1.4;
  }


  /* ─── Gestion des aménagements globaux ─── */
  .sge-amgr-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 14px;
  }
  .sge-amgr-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px 8px 12px;
    background: rgba(247,240,230,0.50);
    border-radius: 10px;
    border: 1px solid rgba(120,72,32,0.08);
    transition: background 140ms;
  }
  .sge-amgr-row.inactive { opacity: 0.50; }
  /* Pastille couleur — cliquable pour changer */
  .sge-amgr-dot {
    width: 14px; height: 14px; border-radius: 50%;
    flex-shrink: 0; cursor: pointer;
    transition: transform 150ms, box-shadow 150ms;
    box-shadow: 0 0 0 0 transparent;
  }
  .sge-amgr-dot:hover {
    transform: scale(1.25);
    box-shadow: 0 0 0 3px rgba(120,72,32,0.14);
  }
  .sge-amgr-label {
    flex: 1; font-size: 0.88rem; font-weight: 600; color: #2f241b;
    min-width: 0;
  }
  .sge-amgr-label-input {
    flex: 1; padding: 4px 8px;
    border: 1.5px solid var(--primary); border-radius: 6px;
    font-size: 0.88rem; font-weight: 600; color: #2f241b;
    background: #fff; outline: none; font-family: inherit;
    box-shadow: var(--glow-subtle);
    min-width: 0;
  }
  /* Groupe d'actions */
  .sge-amgr-actions {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  }
  .sge-amgr-btn {
    padding: 4px 9px; border-radius: 6px;
    border: 1px solid rgba(120,72,32,0.18);
    background: transparent; cursor: pointer;
    font-size: 0.73rem; font-weight: 600; color: rgba(47,36,27,0.55);
    transition: all 130ms; font-family: inherit; white-space: nowrap;
  }
  .sge-amgr-btn:hover { background: rgba(47,36,27,0.06); color: #2f241b; }
  .sge-amgr-btn.active-off { color: rgba(47,36,27,0.50); }
  .sge-amgr-btn.reactivate {
    color: #059669; border-color: rgba(5,150,105,0.25);
  }
  .sge-amgr-btn.reactivate:hover { background: rgba(5,150,105,0.07); }
  .sge-amgr-btn.danger { color: var(--danger); border-color: rgba(220,38,38,0.20); }
  .sge-amgr-btn.danger:hover { background: rgba(220,38,38,0.06); }
  /* Bouton icône (couleur / supprimer) */
  .sge-amgr-icon-btn {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid rgba(120,72,32,0.16);
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; color: rgba(47,36,27,0.50);
    transition: all 130ms; flex-shrink: 0;
  }
  .sge-amgr-icon-btn:hover { background: rgba(47,36,27,0.06); color: #2f241b; }
  .sge-amgr-icon-btn.del-btn { color: rgba(220,38,38,0.40); border-color: rgba(220,38,38,0.16); }
  .sge-amgr-icon-btn.del-btn:hover { background: rgba(220,38,38,0.07); color: var(--danger); }
  /* ── Palette de couleurs (popup fixed) ── */
  .sge-amgr-palette {
    background: #fff;
    border: 1px solid rgba(120,72,32,0.14);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 1.5px 4px rgba(0,0,0,0.06);
    padding: 10px;
    display: grid; grid-template-columns: repeat(4, 28px); gap: 7px;
    z-index: 600;
  }
  .sge-amgr-palette-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer; transition: transform 130ms, border-color 130ms;
  }
  .sge-amgr-palette-swatch:hover { transform: scale(1.15); }
  .sge-amgr-palette-swatch.active {
    border-color: rgba(47,36,27,0.55);
    transform: scale(1.10);
  }
  .sge-amgr-palette-label {
    grid-column: 1 / -1;
    font-size: 0.70rem; font-weight: 600;
    color: rgba(47,36,27,0.45); text-transform: uppercase;
    letter-spacing: 0.04em; text-align: center; margin-bottom: 2px;
  }
  .sge-amgr-add-zone {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 0 0;
    border-top: 1px solid rgba(120,72,32,0.08);
  }
  .sge-amgr-add-input {
    flex: 1; padding: 8px 12px;
    border: 1.5px solid rgba(120,72,32,0.16);
    border-radius: 10px; background: #fff;
    font-size: 0.88rem; color: #2f241b; outline: none;
    font-family: inherit;
    transition: border-color 180ms, box-shadow 180ms;
  }
  .sge-amgr-add-input:focus {
    border-color: var(--primary);
    box-shadow: var(--glow-subtle);
  }
  .sge-amgr-add-input::placeholder { color: rgba(47,36,27,0.35); }

  /* ─── Cellule nom/prénom cliquable ─── */
  .sge-td-name {
    font-size: 0.88rem; font-weight: 600; color: #2f241b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; padding: 7px 8px; border-radius: 8px;
    transition: background 130ms, color 130ms;
    display: block;
  }
  .sge-td-name:hover {
    background: rgba(200,144,42,0.10); color: #7a4512;
  }
  .sge-td-name-sub {
    font-size: 0.78rem; font-weight: 400;
    color: rgba(47,36,27,0.50);
  }

  /* ─── Badges aménagements ─── */
  .sge-amena-cell {
    display: flex; flex-wrap: wrap; gap: 4px;
    align-items: center; padding: 4px 0;
  }
  .sge-amena-badge {
    display: inline-flex; align-items: center;
    padding: 3px 8px; border-radius: 50px;
    font-size: 0.70rem; font-weight: 700;
    white-space: nowrap; letter-spacing: 0.01em;
    opacity: 0.92;
  }
  .sge-amena-none {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem; color: rgba(47,36,27,0.30);
    cursor: pointer; padding: 3px 8px; border-radius: 50px;
    border: 1px dashed rgba(47,36,27,0.18);
    transition: all 140ms;
  }
  .sge-amena-none:hover {
    color: var(--primary); border-color: var(--primary);
    background: rgba(200,144,42,0.06);
  }
  .sge-fiche-open-btn {
    width: 28px; height: 28px; border-radius: 8px;
    background: transparent; border: none;
    color: rgba(47,36,27,0.40); font-size: 1rem;
    cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; flex-shrink: 0;
    transition: background 140ms, color 140ms;
  }
  .sge-fiche-open-btn:hover {
    background: rgba(200,144,42,0.12); color: #7a4512;
  }

  /* ─── Fiche élève (panneau latéral) ─── */
  #sge-fiche-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(20,10,5,0.35);
    display: none; justify-content: flex-end;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
  #sge-fiche-overlay.open { display: flex; }

  #sge-fiche-panel {
    width: min(460px, 95vw);
    height: 100%;
    background: #fffdf8;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: -8px 0 48px rgba(47,36,27,0.20);
    animation: sgeFicheIn 300ms var(--ease-out) both;
  }
  @keyframes sgeFicheIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  .sge-fiche-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(120,72,32,0.08);
    flex-shrink: 0;
  }
  .sge-fiche-close {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(47,36,27,0.08); border: none;
    cursor: pointer; font-size: 0.9rem; color: #2f241b;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms; flex-shrink: 0;
  }
  .sge-fiche-close:hover { background: rgba(47,36,27,0.16); }
  .sge-fiche-title {
    font-size: 1rem; font-weight: 800; color: #2f241b;
    letter-spacing: -0.03em; flex: 1;
  }
  .sge-fiche-body {
    flex: 1; overflow-y: auto; padding: 20px;
  }
  .sge-fiche-body::-webkit-scrollbar { width: 4px; }
  .sge-fiche-body::-webkit-scrollbar-thumb {
    background: rgba(120,72,32,0.18); border-radius: 99px;
  }

  /* Fiche : section photo */
  .sge-fiche-photo-area {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px;
    background: rgba(247,240,230,0.55);
    border-radius: 16px; margin-bottom: 16px;
  }
  .sge-fiche-photo-large {
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; cursor: pointer; flex-shrink: 0;
    border: 2.5px solid rgba(120,72,32,0.15);
    transition: opacity 160ms;
  }
  .sge-fiche-photo-large:hover { opacity: 0.78; }
  .sge-fiche-avatar-large {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #e8d5b8 0%, #d4a96a 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 800; color: #5a3010;
    flex-shrink: 0; cursor: pointer; position: relative;
    transition: opacity 160ms;
  }
  .sge-fiche-avatar-large:hover { opacity: 0.80; }
  .sge-fiche-avatar-large.inactif { background: #e5e7eb; color: #6b7280; }
  .sge-fiche-photo-info { flex: 1; min-width: 0; }
  .sge-fiche-name-big {
    font-size: 1.05rem; font-weight: 800; color: #2f241b;
    letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 4px;
  }
  .sge-fiche-photo-actions {
    display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap;
  }
  .sge-fiche-photo-btn {
    font-size: 0.72rem; font-weight: 600;
    color: var(--primary); cursor: pointer; background: none; border: none;
    padding: 0; text-decoration: underline; text-underline-offset: 2px;
    transition: opacity 140ms;
  }
  .sge-fiche-photo-btn:hover { opacity: 0.70; }
  .sge-fiche-photo-btn.danger { color: var(--danger); }

  /* Fiche : section générique */
  .sge-fiche-section {
    margin-bottom: 20px;
  }
  .sge-fiche-section-title {
    font-size: 0.70rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.10em; color: rgba(107,63,29,0.55);
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  }
  .sge-fiche-section-title::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(200,144,42,0.15); border-radius: 1px;
  }
  .sge-fiche-field {
    margin-bottom: 10px;
  }
  .sge-fiche-field label {
    display: block; font-size: 0.72rem; font-weight: 700;
    color: rgba(47,36,27,0.50); margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .sge-fiche-input {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid rgba(120,72,32,0.16);
    border-radius: 10px; background: #fff;
    font-size: 0.90rem; color: #2f241b; outline: none;
    box-sizing: border-box; font-family: inherit;
    transition: border-color 180ms, box-shadow 180ms;
  }
  .sge-fiche-input:focus {
    border-color: var(--primary);
    box-shadow: var(--glow-subtle);
  }
  .sge-fiche-select {
    width: 100%; padding: 9px 30px 9px 12px;
    border: 1.5px solid rgba(120,72,32,0.16);
    border-radius: 10px; background: #fff;
    font-size: 0.90rem; font-weight: 600; color: #2f241b;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a3010' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    cursor: pointer; outline: none; box-sizing: border-box; font-family: inherit;
    transition: border-color 180ms;
  }
  .sge-fiche-select:focus { border-color: var(--primary); box-shadow: var(--glow-subtle); }
  .sge-fiche-textarea {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid rgba(120,72,32,0.16);
    border-radius: 10px; background: #fff;
    font-size: 0.88rem; color: #2f241b; outline: none;
    resize: vertical; min-height: 72px; box-sizing: border-box;
    font-family: inherit; line-height: 1.5;
    transition: border-color 180ms, box-shadow 180ms;
  }
  .sge-fiche-textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--glow-subtle);
  }

  /* Aménagements : grille de toggles */
  .sge-amena-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .sge-amena-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 12px;
    border: 1.5px solid rgba(120,72,32,0.14);
    background: #fff; cursor: pointer; font-family: inherit;
    font-size: 0.84rem; font-weight: 600; color: rgba(47,36,27,0.60);
    transition: all 180ms; text-align: left;
  }
  .sge-amena-toggle .sge-toggle-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(47,36,27,0.20); flex-shrink: 0;
    transition: background 160ms;
  }
  .sge-amena-toggle:hover {
    border-color: rgba(120,72,32,0.28);
    background: rgba(247,240,230,0.60);
  }
  .sge-amena-toggle.on {
    border-color: transparent; color: white; font-weight: 700;
  }
  .sge-amena-toggle.on .sge-toggle-dot {
    background: rgba(255,255,255,0.55);
  }

  /* Fiche : meta + footer */
  .sge-fiche-meta {
    font-size: 0.72rem; color: rgba(47,36,27,0.35);
    margin-bottom: 20px; margin-top: -8px;
  }
  .sge-fiche-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(120,72,32,0.08);
    flex-shrink: 0;
  }

  /* Mobile : panel du bas */
  @media (max-width: 700px) {
    #sge-fiche-overlay { align-items: flex-end; }
    #sge-fiche-panel {
      width: 100%; height: 88dvh;
      border-radius: 24px 24px 0 0;
      animation-name: sgeFicheInMobile;
    }
    @keyframes sgeFicheInMobile {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
  }

/* ══════════════════════════════════════════
   PÉNALITÉS ATELIER
   ══════════════════════════════════════════ */
.pen-section { margin-top: 20px; }
.pen-section-title {
  font-size: 0.78rem; font-weight: 700; color: var(--header);
  letter-spacing: -0.01em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.pen-cat-block { margin-bottom: 14px; }
.pen-cat-header {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px; opacity: 0.75;
}
.pen-cat-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.pen-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  transition: background 0.15s; margin-bottom: 3px;
}
.pen-item:hover { background: rgba(0,0,0,0.03); }
.pen-item.pen-active { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.18); }
.pen-item input[type=checkbox] {
  margin-top: 2px; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0;
  accent-color: #EF4444;
}
.pen-item-label { flex: 1; font-size: 0.8rem; color: var(--text); line-height: 1.35; }
.pen-item-pts {
  font-size: 0.75rem; font-weight: 700; color: #EF4444;
  white-space: nowrap; min-width: 38px; text-align: right; margin-top: 1px;
}
.pen-obs-input {
  width: 100%; margin-top: 5px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.75rem; font-family: inherit; resize: none;
  background: #FFFBEB; line-height: 1.35; color: var(--text);
}
.pen-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 10px 2px; border-top: 1px solid var(--border); margin-top: 8px;
}
.pen-total-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.pen-total-val { font-size: 0.88rem; font-weight: 700; color: #EF4444; }
.pen-total-val.pen-total-zero { color: var(--muted); }
/* Sticky header — note finale 3 lignes */
.panel-score-detail {
  font-size: 0.62rem; color: var(--muted); line-height: 1.5;
  text-align: right; margin-top: 1px;
}
.panel-score-detail .pen-neg { color: #EF4444; font-weight: 600; }

/* ── Appréciation de séance ── */
.apprecseance-section { margin-top: 20px; }
.apprecseance-section .pen-section-title { color: #1D4ED8; }
.apprecseance-textarea {
  width: 100%; border: 1.5px solid #BFDBFE; border-radius: 8px;
  padding: 9px 11px; font-size: 0.82rem; font-family: inherit;
  resize: vertical; line-height: 1.55; background: #F0F7FF;
  color: var(--text); margin-bottom: 7px; transition: border-color var(--dur-sm) var(--ease-out);
  min-height: 88px;
}
.apprecseance-textarea:focus { outline: none; border-color: #3B82F6; background: #fff; }
.apprecseance-textarea::placeholder { color: #93C5FD; font-style: italic; }
.apprecseance-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.apprecseance-counter { font-size: 0.72rem; color: #6B7280; font-variant-numeric: tabular-nums; }
.apprecseance-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS PHASE 1 — CSS pur, sans logique JS
   Hover/press premium Apple-like sur tous les éléments interactifs
══════════════════════════════════════════════════════════════ */

/* ── 1. btn-icon (header mobile) — transition + hover lift + press ── */
.btn-icon {
  transition:
    background  var(--dur-sm) var(--ease-out),
    transform   var(--dur-sm) var(--ease-spring),
    box-shadow  var(--dur-sm) var(--ease-out);
}
@media (hover: hover) {
  .btn-icon:hover {
    background: rgba(255,255,255,0.28);
    transform: translateY(-1px);
  }
}
.btn-icon:active {
  transform: scale(0.94) !important;
  transition-duration: var(--dur-xs) !important;
}
.btn-icon:focus-visible {
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 2px;
}

/* ── 2. .btn base — transition + hover lift + focus-visible ── */
.btn {
  transition:
    background  var(--dur-sm) var(--ease-out),
    transform   var(--dur-md) var(--ease-spring),
    box-shadow  var(--dur-sm) var(--ease-out),
    opacity     var(--dur-sm) var(--ease-out);
}
@media (hover: hover) {
  .btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ── 3. btn-primary — glow warm au hover ── */
@media (hover: hover) {
  .btn-primary:not(:disabled):hover {
    box-shadow: var(--shadow-warm), var(--glow-subtle);
  }
}

/* ── 4. btn-outline — bordure dorée + lift au hover ── */
@media (hover: hover) {
  .btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
  }
}

/* ── 5. btn-danger — lift + luminosité au hover ── */
.btn-danger, .btn-danger-outline {
  transition: var(--transition-fast);
}
@media (hover: hover) {
  .btn-danger:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}

/* ── 6. Desktop header btn-icon — transition + active press ── */
#app > header .btn-icon {
  transition:
    background  var(--dur-sm) var(--ease-out),
    transform   var(--dur-sm) var(--ease-spring) !important;
}
#app > header .btn-icon:active {
  transform: scale(0.93) !important;
  transition-duration: var(--dur-xs) !important;
}
#app > header .btn-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── 7. ds-btn sidebar — glow actif + focus-visible ── */
.ds-btn.active {
  box-shadow: 0 2px 10px rgba(200,144,42,0.10);
}
.ds-btn:focus-visible {
  outline: 2px solid rgba(200,144,42,0.45);
  outline-offset: -2px;
  border-radius: 10px;
}

/* ── 8. gtab — hover lift + press ── */
@media (hover: hover) {
  .gtab:not(.active):hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}
.gtab:active {
  transform: scale(0.96) !important;
  transition-duration: var(--dur-xs) !important;
}

/* ── 9. seance-btn — lift + press ── */
@media (hover: hover) {
  .seance-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}
.seance-btn:active {
  transform: scale(0.96) !important;
  transition-duration: var(--dur-xs) !important;
}

/* ── 10. eval-acc summary — transition background douce ── */
.eval-acc > summary {
  transition: background var(--dur-sm) var(--ease-out);
}
@media (hover: hover) {
  .eval-acc > summary:hover {
    background: var(--gray-100);
  }
}

/* ── 11. eval-arr (flèche accordéon) — rotation fluide ── */
.eval-arr {
  transition: transform var(--dur-md) var(--ease-spring);
}

/* ── 12. prefers-reduced-motion — respect systématique ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   QA QUICK WINS — 6 corrections pré-présentation
   CSS pur · sans modification JS · sans refactor
══════════════════════════════════════════════════════════════ */

/* QW1 — États disabled : tous les boutons */
.btn:disabled,
.btn[disabled],
.btn-primary:disabled,
.btn-outline:disabled,
.btn-danger:disabled,
.btn-danger-outline:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* QW2 — .info-box dark mode : fond sombre chaud + bordure dorée */
@media (prefers-color-scheme: dark) {
  .info-box {
    background: #2A1E08 !important;
    border-left-color: var(--primary) !important;
    color: #E8D5A0 !important;
  }
  .info-box strong { color: #F4C96A !important; }
}

/* QW3 — .eval-acc[open] summary : remplacer bleu #F0F4FF par variable sémantique */
.eval-acc[open] > summary {
  background: var(--primary-light) !important;
}
@media (prefers-color-scheme: dark) {
  .eval-acc[open] > summary {
    background: rgba(200,144,42,0.13) !important;
  }
}

/* QW4 — Débordements texte : ellipsis sur noms longs */
.prod-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appre-student-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* QW5 — Focus-visible : ring doré cohérent sur éléments interactifs */
.gtab:focus-visible,
.seance-btn:focus-visible,
.student-row:focus-visible,
.nav-more-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: inherit;
}

/* QW6 — Header padding : symétrique vertical */
header {
  padding: 12px 16px;
}


/* ═══════════════════════════════════════════════════════════════
   AUTH SCREEN — login + signup (utilise les styles de setup-screen)
   ═══════════════════════════════════════════════════════════════ */

#auth-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  background: linear-gradient(135deg, #1F100A 0%, #2C1810 70%);
  gap: 20px;
}
#auth-screen[style*="display:flex"],
#auth-screen[style*="display: flex"] {
  display: flex;
}
#auth-screen .setup-logo {
  margin: 0;
  text-align: center;
}

.auth-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  width: 100%;
  max-width: 420px;
  margin: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}

.auth-card h2 {
  margin: 0 0 18px;
  text-align: center;
  color: var(--header, #2C1810);
  font-size: 1.5rem;
  font-weight: 700;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border, #E0D5C5);
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted, #888);
  cursor: pointer;
  margin-bottom: -1px;
  transition: all .15s;
}
.auth-tab:hover {
  color: var(--header, #2C1810);
}
.auth-tab.active {
  color: var(--header, #2C1810);
  border-bottom-color: var(--primary, #C8902A);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-form label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #888);
  margin: 10px 0 4px;
}
.auth-form input {
  padding: 10px 14px;
  border: 2px solid var(--border, #E0D5C5);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text, #1A1A1A);
  outline: none;
  transition: border-color .15s;
}
.auth-form input:focus {
  border-color: var(--primary, #C8902A);
}
.auth-form .btn-primary {
  margin-top: 16px;
  padding: 12px;
  background: var(--primary, #C8902A);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.auth-form .btn-primary:hover  { opacity: .9; }
.auth-form .btn-primary:active { opacity: .8; }
.auth-form .btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.auth-link {
  background: none;
  border: none;
  color: var(--primary, #C8902A);
  font-size: 0.85rem;
  cursor: pointer;
  margin-top: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-link:hover { color: var(--header, #2C1810); }

.auth-error {
  margin-top: 16px;
  padding: 10px 12px;
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
  border-radius: 8px;
  font-size: 0.85rem;
}
.auth-ok {
  margin-top: 16px;
  padding: 10px 12px;
  background: #F0FDF4;
  color: #16A34A;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  font-size: 0.85rem;
}

/* Menu utilisateur (déconnexion) — petit chip dans la nav */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
  margin-left: 8px;
  transition: background .15s;
}
.user-chip:hover {
  background: rgba(255,255,255,0.12);
}
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary, #C8902A);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  color: var(--text, #1A1A1A);
  border: 1px solid var(--border, #E0D5C5);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  min-width: 200px;
  padding: 6px;
  z-index: 1000;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.88rem;
  border-radius: 6px;
  color: var(--text, #1A1A1A);
}
.user-menu-item:hover {
  background: var(--bg, #FAFAF7);
}
.user-menu-item.danger {
  color: #DC2626;
}
.user-menu-email {
  padding: 8px 12px 10px;
  font-size: 0.75rem;
  color: var(--muted, #888);
  border-bottom: 1px solid var(--border, #E0D5C5);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — surcharge des variables CSS quand .dark-mode actif
   ═══════════════════════════════════════════════════════════════ */

html.dark-mode {
  --bg:            #14100c;
  --bg-secondary:  #1d1814;
  --bg-elevated:   #221c17;
  --header:        #f5e6d3;
  --primary:       #E8A845;
  --primary-light: rgba(232,168,69,.14);
  --border:        #3a2e23;
  --text:          #ede4d5;
  --muted:         #9e948a;
  --white:         #1a1410;
  --gray-100:      #221c17;
  --gray-200:      #2a221c;
  --gray-400:      #6e655c;
  --gray-600:      #b8b0a4;
  --gray-800:      #ede4d5;
  --shadow:        0 2px 14px rgba(0,0,0,.45);
  --btn-primary-bg: #E8A845;

  color-scheme: dark;
}

/* Body et fonds */
html.dark-mode body { background: var(--bg); color: var(--text); }

/* Headers, sidebars, cards */
html.dark-mode header,
html.dark-mode .sidebar,
html.dark-mode .topbar { background: #221c17; color: var(--text); border-color: var(--border); }
html.dark-mode .header-ctx h1,
html.dark-mode .header-ctx .header-sub { color: var(--text); }
html.dark-mode .header-ctx .header-sub span { color: var(--muted); }

/* Inputs, selects, textarea — fond sombre lisible */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode button:not(.btn-primary):not(.icon-only):not(.btn-icon):not(.auth-tab):not([class*="primary"]) {
  background: #2a221c;
  color: var(--text);
  border-color: var(--border);
}
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus { border-color: var(--primary); }

/* Tables */
html.dark-mode table,
html.dark-mode th,
html.dark-mode td { border-color: var(--border); color: var(--text); }
html.dark-mode thead,
html.dark-mode th { background: #1d1814; }
html.dark-mode tr:nth-child(even) { background: rgba(255,255,255,0.02); }
html.dark-mode tbody tr:hover { background: rgba(232,168,69,.06); }

/* Setup / Auth screen — déjà sombre, ajustements minimes */
html.dark-mode .setup-card,
html.dark-mode .auth-card { background: #221c17; color: var(--text); }
html.dark-mode .setup-card h2,
html.dark-mode .auth-card h2 { color: var(--text); }
html.dark-mode .auth-tabs { border-bottom-color: var(--border); }

/* Cards diverses (TP, recettes, économat...) */
html.dark-mode .card,
html.dark-mode [class*="card"],
html.dark-mode .panel,
html.dark-mode .modal,
html.dark-mode .dropdown,
html.dark-mode .menu-popup { background: #221c17; color: var(--text); border-color: var(--border); }

/* User chip + menu — restaure contraste */
html.dark-mode .user-menu { background: #221c17; color: var(--text); border-color: var(--border); }
html.dark-mode .user-menu-item { color: var(--text); }
html.dark-mode .user-menu-item:hover { background: #2a221c; }
html.dark-mode .user-menu-email { color: var(--muted); border-bottom-color: var(--border); }

/* Badges niveau (TB/B/EC/I) — fonds adoucis pour contraste */
html.dark-mode { --TB-bg: rgba(22,163,74,.18); --B-bg: rgba(37,99,235,.18); --EC-bg: rgba(249,115,22,.18); --I-bg: rgba(220,38,38,.18); }

/* Boutons icônes du header */
html.dark-mode .btn-icon { color: var(--text); }
html.dark-mode .btn-icon:hover { background: rgba(232,168,69,.12); }

/* Liens */
html.dark-mode a { color: var(--primary); }
html.dark-mode a:hover { color: #f5b964; }

/* Scrollbars sombres */
html.dark-mode ::-webkit-scrollbar-track { background: #14100c; }
html.dark-mode ::-webkit-scrollbar-thumb { background: #3a2e23; border-radius: 4px; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #5a4736; }

/* Petites animations sur le toggle */
#theme-toggle-btn { transition: transform .3s ease; }
#theme-toggle-btn:active { transform: rotate(180deg); }

/* ── Bouton ← Accueil sur le context-screen (page de sélection diplôme/année/groupe) ── */
#context-screen { position: relative; }
.ctx-back-btn {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255,255,255,0.85);
  color: var(--header);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s, transform .15s;
}
.ctx-back-btn:hover { background: white; transform: translateX(-2px); }
.ctx-back-btn:active { transform: translateX(-1px); }
html.dark-mode .ctx-back-btn {
  background: rgba(34,28,23,.85);
  color: var(--text);
  border-color: var(--border);
}
html.dark-mode .ctx-back-btn:hover { background: #2a221c; }

@media (max-width: 640px) {
  .ctx-back-btn { top: 12px; left: 12px; font-size: 0.76rem; padding: 5px 12px; }
}