@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap');
:root {
  --bleu:#1e40af;--bleu-med:#2563eb;--bleu-clair:#dbeafe;--bleu-pale:#eff6ff;
  --vert:#15803d;--vert-clair:#dcfce7;--ambre:#b45309;--ambre-clair:#fef3c7;
  --rouge:#dc2626;--rouge-clair:#fee2e2;
  --gris-900:#111827;--gris-700:#374151;--gris-500:#6b7280;--gris-300:#d1d5db;
  --gris-100:#f3f4f6;--gris-50:#f9fafb;--blanc:#fff;
  --rayon:8px;--rayon-lg:12px;
  --ombre:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --ombre-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --ombre-lg:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
  --transition:.2s ease;
  --font-titre:'Playfair Display',Georgia,serif;
  --font-corps:'Source Sans 3',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-corps);color:var(--gris-900);background:var(--gris-50);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--bleu-med);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--bleu);text-decoration:underline}
img{max-width:100%}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.container--sm{max-width:720px}.container--md{max-width:960px}
main{flex:1;padding:32px 0 64px}
.navbar{background:var(--blanc);border-bottom:1px solid var(--gris-300);box-shadow:var(--ombre);position:sticky;top:0;z-index:100}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.navbar__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-titre);font-size:1.35rem;color:var(--bleu);font-weight:700;text-decoration:none}
.navbar__brand:hover{color:var(--bleu);text-decoration:none}
.navbar__brand-icon{width:36px;height:36px;background:var(--bleu-med);border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;font-size:1.1rem}
.navbar__nav{display:flex;align-items:center;gap:4px}
.navbar__link{padding:6px 14px;border-radius:var(--rayon);color:var(--gris-700);font-size:.9rem;font-weight:500;transition:background var(--transition),color var(--transition);text-decoration:none}
.navbar__link:hover{background:var(--gris-100);color:var(--gris-900);text-decoration:none}
.navbar__link--active{background:var(--bleu-pale);color:var(--bleu-med)}
.navbar__avatar{width:34px;height:34px;border-radius:50%;background:var(--bleu-med);display:flex;align-items:center;justify-content:center;color:white;font-size:.85rem;font-weight:600;overflow:hidden;cursor:pointer;border:2px solid var(--bleu-clair)}
.navbar__avatar img{width:100%;height:100%;object-fit:cover}
.hero{background:linear-gradient(135deg,var(--bleu) 0%,var(--bleu-med) 60%,#3b82f6 100%);color:white;padding:64px 0;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E")}
.hero__content{position:relative;z-index:1}
.hero h1{font-family:var(--font-titre);font-size:2.6rem;line-height:1.2;margin-bottom:16px}
.hero p{font-size:1.15rem;opacity:.9;max-width:560px;margin-bottom:32px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.card{background:var(--blanc);border:1px solid var(--gris-300);border-radius:var(--rayon-lg);box-shadow:var(--ombre);transition:box-shadow var(--transition),transform var(--transition);overflow:hidden}
.card:hover{box-shadow:var(--ombre-md);transform:translateY(-1px)}
.card__header{padding:16px 20px 12px;border-bottom:1px solid var(--gris-100);display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card__body{padding:16px 20px}
.card__footer{padding:12px 20px;border-top:1px solid var(--gris-100);background:var(--gris-50)}
.card__titre{font-family:var(--font-titre);font-size:1.05rem;color:var(--gris-900);font-weight:600;line-height:1.3;flex:1}
.card__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:.78rem;color:var(--gris-500)}
.card__actions{display:flex;gap:6px;flex-shrink:0}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:99px;font-size:.72rem;font-weight:600;letter-spacing:.03em}
.badge--bleu{background:var(--bleu-clair);color:var(--bleu)}
.badge--vert{background:var(--vert-clair);color:var(--vert)}
.badge--ambre{background:var(--ambre-clair);color:var(--ambre)}
.badge--rouge{background:var(--rouge-clair);color:var(--rouge)}
.badge--gris{background:var(--gris-100);color:var(--gris-700)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--rayon);font-family:var(--font-corps);font-size:.9rem;font-weight:600;cursor:pointer;border:none;outline:none;transition:all var(--transition);text-decoration:none;line-height:1.4;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--bleu-med);outline-offset:2px}
.btn--primary{background:var(--bleu-med);color:white}.btn--primary:hover{background:var(--bleu);color:white;text-decoration:none}
.btn--vert{background:var(--vert);color:white}.btn--vert:hover{background:#166534;color:white;text-decoration:none}
.btn--ambre{background:var(--ambre);color:white}.btn--ambre:hover{background:#92400e;color:white;text-decoration:none}
.btn--outline{background:transparent;color:var(--bleu-med);border:1.5px solid var(--bleu-med)}.btn--outline:hover{background:var(--bleu-pale);text-decoration:none}
.btn--ghost{background:transparent;color:var(--gris-700)}.btn--ghost:hover{background:var(--gris-100);text-decoration:none;color:var(--gris-900)}
.btn--danger{background:var(--rouge);color:white}.btn--danger:hover{background:#b91c1c;text-decoration:none}
.btn--white{background:white;color:var(--bleu-med)}.btn--white:hover{background:var(--bleu-pale);text-decoration:none}
.btn--sm{padding:5px 12px;font-size:.8rem}.btn--lg{padding:12px 24px;font-size:1rem}.btn--icon{padding:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.88rem;font-weight:600;color:var(--gris-700);margin-bottom:6px}
.form-group label span.required{color:var(--rouge);margin-left:3px}
.form-hint{font-size:.8rem;color:var(--gris-500);margin-top:4px}
.form-error-msg{font-size:.8rem;color:var(--rouge);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;padding:9px 13px;border:1.5px solid var(--gris-300);border-radius:var(--rayon);font-family:var(--font-corps);font-size:.9rem;color:var(--gris-900);background:var(--blanc);transition:border-color var(--transition),box-shadow var(--transition);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--bleu-med);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
input.error,select.error,textarea.error{border-color:var(--rouge)}
textarea{resize:vertical;min-height:90px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.form-check{display:flex;align-items:center;gap:8px;cursor:pointer}
.form-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--bleu-med)}
.form-check label{font-size:.88rem;font-weight:400;margin:0;color:var(--gris-700);cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-ro{padding:8px 13px;background:var(--gris-50);border:1px solid var(--gris-300);border-radius:var(--rayon);font-size:.9rem;color:var(--gris-700);min-height:36px}
.table-wrap{overflow-x:auto;border-radius:var(--rayon-lg);border:1px solid var(--gris-300)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{background:var(--gris-50);padding:10px 14px;text-align:left;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris-500);border-bottom:1px solid var(--gris-300)}
td{padding:10px 14px;border-bottom:1px solid var(--gris-100);color:var(--gris-700);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--gris-50)}
.alert{padding:12px 16px;border-radius:var(--rayon);font-size:.88rem;margin-bottom:20px;display:flex;align-items:flex-start;gap:10px;border-left:4px solid}
.alert--success{background:var(--vert-clair);border-color:var(--vert);color:#14532d}
.alert--error{background:var(--rouge-clair);border-color:var(--rouge);color:#7f1d1d}
.alert--info{background:var(--bleu-pale);border-color:var(--bleu-med);color:var(--bleu)}
.alert--warn{background:var(--ambre-clair);border-color:var(--ambre);color:#78350f}
.tabs{border-bottom:2px solid var(--gris-300);display:flex;gap:2px;margin-bottom:24px}
.tab-btn{padding:10px 18px;border:none;background:transparent;font-family:var(--font-corps);font-size:.9rem;font-weight:500;color:var(--gris-500);cursor:pointer;position:relative;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--transition)}
.tab-btn:hover{color:var(--gris-900)}
.tab-btn.active{color:var(--bleu-med);border-bottom-color:var(--bleu-med);font-weight:600}
.tab-panel{display:none}.tab-panel.active{display:block}
.fiche-header{background:white;border:1px solid var(--gris-300);border-radius:var(--rayon-lg);padding:24px;margin-bottom:24px;box-shadow:var(--ombre)}
.fiche-header h1{font-family:var(--font-titre);font-size:1.8rem;color:var(--gris-900)}
.fiche-section{background:white;border:1px solid var(--gris-300);border-radius:var(--rayon-lg);margin-bottom:20px;box-shadow:var(--ombre);overflow:hidden}
.fiche-section__title{padding:12px 20px;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;background:var(--gris-50);color:var(--gris-700);border-bottom:1px solid var(--gris-300)}
.fiche-section--bleu .fiche-section__title{background:var(--bleu-pale);color:var(--bleu)}
.fiche-section--vert .fiche-section__title{background:var(--vert-clair);color:var(--vert)}
.fiche-section--ambre .fiche-section__title{background:var(--ambre-clair);color:var(--ambre)}
.fiche-section__body{padding:16px 20px}
.fiche-field{margin-bottom:14px}
.fiche-field label{font-size:.8rem;font-weight:600;color:var(--gris-500);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px}
.fiche-field p{font-size:.92rem;color:var(--gris-900);white-space:pre-wrap}
.fiche-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.seances-list{display:flex;flex-direction:column;gap:12px}
.seance-item{background:white;border:1px solid var(--gris-300);border-radius:var(--rayon);padding:14px 18px;display:flex;align-items:center;gap:14px;transition:box-shadow var(--transition)}
.seance-item:hover{box-shadow:var(--ombre-md)}
.seance-item__num{width:36px;height:36px;background:var(--bleu-med);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:.9rem;flex-shrink:0}
.seance-item__info{flex:1}
.seance-item__titre{font-weight:600;color:var(--gris-900)}
.seance-item__meta{font-size:.8rem;color:var(--gris-500);margin-top:2px}
.situations-list{display:flex;flex-direction:column;gap:10px}
.situation-item{border:1px solid var(--ambre-clair);border-left:4px solid var(--ambre);border-radius:var(--rayon);padding:12px 16px;background:#fffbeb}
.dyn-table{width:100%;border-collapse:collapse}
.dyn-table th{font-size:.78rem;text-transform:uppercase;color:var(--gris-500);padding:6px 10px;border-bottom:2px solid var(--gris-300);text-align:left}
.dyn-table td{padding:6px 8px;border-bottom:1px solid var(--gris-100);vertical-align:top}
.dyn-table td input,.dyn-table td textarea{padding:5px 8px;font-size:.85rem}
.dyn-table td:last-child{width:40px;text-align:center}
.prog-tree{border:1.5px solid var(--gris-300);border-radius:var(--rayon);max-height:280px;overflow-y:auto;padding:8px}
.prog-tree__group{font-size:.78rem;font-weight:700;text-transform:uppercase;color:var(--gris-500);padding:6px 8px 2px;letter-spacing:.07em}
.prog-tree__item{display:flex;align-items:flex-start;gap:8px;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:.85rem}
.prog-tree__item:hover{background:var(--bleu-pale)}
.prog-tree__item.selected{background:var(--bleu-clair)}
.prog-tree__item input{margin-top:2px;flex-shrink:0;accent-color:var(--bleu-med)}
.prog-tree__sub{padding-left:20px}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--gris-500);margin-bottom:20px;flex-wrap:wrap}
.breadcrumb a{color:var(--gris-500);text-decoration:none}
.breadcrumb a:hover{color:var(--bleu-med);text-decoration:underline}
.breadcrumb__sep{color:var(--gris-300)}
.empty-state{text-align:center;padding:64px 24px;color:var(--gris-500)}
.empty-state__icon{font-size:3rem;margin-bottom:16px;opacity:.4}
.empty-state h3{font-size:1.1rem;font-weight:600;color:var(--gris-700);margin-bottom:8px}
.empty-state p{font-size:.9rem;margin-bottom:24px}
.pagination{display:flex;gap:4px;align-items:center;justify-content:center;padding:24px 0}
.page-btn{padding:6px 13px;border:1.5px solid var(--gris-300);border-radius:var(--rayon);background:white;color:var(--gris-700);font-size:.88rem;cursor:pointer;transition:all var(--transition);text-decoration:none}
.page-btn:hover{border-color:var(--bleu-med);color:var(--bleu-med);text-decoration:none}
.page-btn.active{background:var(--bleu-med);border-color:var(--bleu-med);color:white}
.page-btn[disabled]{opacity:.4;cursor:not-allowed}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:white;border-radius:var(--rayon-lg);box-shadow:var(--ombre-lg);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(12px);transition:transform .2s}
.modal-overlay.open .modal{transform:translateY(0)}
.modal__header{padding:20px 24px;border-bottom:1px solid var(--gris-300);display:flex;align-items:center;justify-content:space-between}
.modal__header h3{font-family:var(--font-titre);font-size:1.15rem}
.modal__body{padding:20px 24px}
.modal__footer{padding:14px 24px;border-top:1px solid var(--gris-300);display:flex;justify-content:flex-end;gap:10px}
footer{background:white;border-top:1px solid var(--gris-300);padding:28px 0;text-align:center;font-size:.82rem;color:var(--gris-500)}
.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--gris-500)}.text-sm{font-size:.82rem}.text-bleu{color:var(--bleu-med)}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.hidden{display:none !important}
@media(max-width:768px){.hero h1{font-size:1.8rem}.cards-grid{grid-template-columns:1fr}.fiche-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .3s ease both}
.skeleton{background:linear-gradient(90deg,var(--gris-100) 25%,var(--gris-50) 50%,var(--gris-100) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:4px}
@keyframes shimmer{to{background-position:-200% center}}

/* ── Variables locales ───────────────────────────────────────── */
:root {
  --border-light: #e5e7eb;
  --row-hover:    #f8fafc;
}

/* ── Layout ──────────────────────────────────────────────────── */
.admin-prog { padding-bottom: 60px; }

/* ── Bloc Cycle ──────────────────────────────────────────────── */
.cycle-block {
  margin-bottom: 36px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border-light);
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.cycle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  color: white;
}
.cycle-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}
.cycle-count-badge {
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.35);
  color: white;
  border-radius: 99px;
  padding: 3px 13px;
  font-size: .78rem;
  font-weight: 600;
}

/* ── Bloc Année ──────────────────────────────────────────────── */
.annee-block {
  background: white;
  border-bottom: 1.5px solid var(--border-light);
}
.annee-block:last-child { border-bottom: none; }

.annee-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: #f0f4ff;
  border-bottom: 1px solid #c7d2fe;
  cursor: pointer;
  user-select: none;
  transition: background .14s;
}
.annee-header:hover { background: #e0e7ff; }
.annee-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #3730a3;
}
.annee-pill .pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6366f1;
  display: inline-block;
  flex-shrink: 0;
}
.annee-pill.nouveau { color: #15803d; }
.annee-pill.nouveau .pill-dot { background: #16a34a; }
.badge-new {
  font-size: .72rem;
  font-weight: 700;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  border-radius: 99px;
  padding: 2px 10px;
}
.annee-toggle { margin-left: auto; font-size: .82rem; color: #6b7280; transition: transform .2s; }
.annee-body { display: block; }
.annee-body.collapsed { display: none; }

/* ── Matière ─────────────────────────────────────────────────── */
.matiere-section {
  border-bottom: 1px solid #f3f4f6;
}
.matiere-section:last-child { border-bottom: none; }

.matiere-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px 9px 44px;
  background: #fafbfc;
  border-bottom: 1px solid #f3f4f6;
}
.matiere-edit-input {
  font-size: .88rem;
  font-weight: 700;
  color: #1e3a5f;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 5px;
  padding: 3px 7px;
  flex: 1;
  max-width: 380px;
  font-family: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.matiere-edit-input:focus {
  border-color: #2563eb;
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.code-input {
  font-size: .78rem;
  font-weight: 600;
  color: #6366f1;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 5px;
  padding: 3px 7px;
  width: 50% !important;
  font-family: monospace;
  transition: border-color .15s, background .15s;
}
.code-input:focus {
  border-color: #6366f1;
  background: white;
  outline: none;
}

/* ── Tableau classes/versions ────────────────────────────────── */
.classes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}
.classes-table thead th {
  background: #f8fafc;
  padding: 7px 12px;
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
}
.classes-table thead th:first-child { padding-left: 60px; }
.classes-table tbody tr { transition: background .1s; }
.classes-table tbody tr:hover { background: var(--row-hover); }
.classes-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f9fafb;
  vertical-align: middle;
  color: #374151;
}
.classes-table tbody tr:last-child td { border-bottom: none; }
.classes-table tbody td:first-child { padding-left: 60px; }

/* ── Inline inputs dans le tableau ──────────────────────────── */
.inline-input {
  border: 1.5px solid transparent;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: .84rem;
  font-family: inherit;
  color: #374151;
  background: transparent;
  width: 100%;
  max-width: 340px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.inline-input:focus {
  border-color: #2563eb;
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.inline-input--annee {
  max-width: 72px;
  text-align: center;
}
.inline-input--notes {
  max-width: 260px;
  color: #6b7280;
  font-size: .82rem;
}

/* ── Vigueur toggle button ───────────────────────────────────── */
.vigueur-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 99px;
  padding: 5px 14px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid;
  transition: all .15s;
  white-space: nowrap;
  font-family: inherit;
}
.vigueur-btn.active {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}
.vigueur-btn.active:hover {
  background: #bbf7d0;
  border-color: #4ade80;
}
.vigueur-btn.inactive {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
}
.vigueur-btn.inactive:hover {
  background: #e5e7eb;
  color: #6b7280;
  border-color: #d1d5db;
}
.vigueur-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.vigueur-btn.active .vigueur-dot   { background: #16a34a; }
.vigueur-btn.inactive .vigueur-dot { background: #9ca3af; }

/* ── Action buttons ──────────────────────────────────────────── */
.action-cell { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1.5px solid #e5e7eb;
  background: white;
  cursor: pointer;
  font-size: .82rem;
  color: #6b7280;
  transition: all .14s;
  text-decoration: none;
}
.btn-ico:hover              { border-color: #2563eb; color: #2563eb; background: #eff6ff; text-decoration: none; }
.btn-ico.danger:hover       { border-color: #dc2626; color: #dc2626; background: #fee2e2; }

/* ── Add-row zone ────────────────────────────────────────────── */
.add-row-zone {
  padding: 7px 22px 7px 60px;
  border-top: 1px dashed #e5e7eb;
  background: #fafbfc;
}
.add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: #2563eb;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  font-family: inherit;
  transition: background .14s;
}
.add-row-btn:hover { background: #eff6ff; }

/* ── Archivé row style ───────────────────────────────────────── */
.row-archived { opacity: .52; }
.row-archived:hover { opacity: .75; }

/* ── Toast ───────────────────────────────────────────────────── */
#admin-toast {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast-item {
  background: #1e3a5f;
  color: white;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: .84rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  animation: toastIn .22s ease;
  pointer-events: all;
}
.toast-item.err { background: #dc2626; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* ============================================================
   RESPONSIVE MOBILE — à ajouter à la fin de app.css
   Couvre : sidebar, topbar, layout connecté, fiches, forms, tables
   ============================================================ */

/* ── Tablette (≤ 1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {

  /* Sidebar rétrécie */
  aside {
    width: 200px !important;
  }

  /* Réduction des paddings conteneur */
  .container {
    padding: 0 16px;
  }

  /* Grilles de fiches : 2 colonnes max */
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  /* Grille fiche 2fr/1fr → colonnes égales */
  .fiche-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Formulaire : colonnes latérales en 3fr/1fr */
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 3fr 1fr !important;
  }
}

/* ── Mobile (≤ 768px) ────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Sidebar cachée, navigation en bas d'écran ── */
  aside {
    display: none !important;
  }

  /* ── Layout principal pleine largeur ── */
  div[style*="display:flex;min-height:100vh"],
  div[style*="display: flex; min-height: 100vh"] {
    flex-direction: column !important;
  }

  div[style*="flex:1;min-width:0;display:flex;flex-direction:column"],
  div[style*="flex: 1; min-width: 0"] {
    width: 100% !important;
  }

  /* ── Topbar ── */
  div[style*="height:56px"] {
    padding: 0 16px !important;
  }

  /* Masquer "Nouvelle séquence" dans la topbar sur très petit écran */
  div[style*="height:56px"] .btn--primary {
    display: none;
  }

  /* ── Page body padding réduit ── */
  div[style*="padding:28px 28px 64px"] {
    padding: 16px 16px 80px !important;
  }

  /* ── Conteneurs ── */
  .container,
  .container--sm,
  .container--md {
    padding: 0 14px;
    max-width: 100%;
  }

  /* ── Typographie ── */
  h1[style*="font-size:1.75rem"] { font-size: 1.35rem !important; }
  h1[style*="font-size:1.8rem"]  { font-size: 1.4rem  !important; }
  h1[style*="font-size:1.6rem"]  { font-size: 1.3rem  !important; }
  h1[style*="font-size:2.5rem"]  { font-size: 1.8rem  !important; }

  /* ── Hero ── */
  .hero { padding: 40px 0; }
  .hero h1 { font-size: 1.7rem; }
  .hero p  { font-size: 1rem; }
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__actions .btn { justify-content: center; width: 100%; }

  /* ── Cards grid → 1 colonne ── */
  .cards-grid {
    grid-template-columns: 1fr;
  }

  /* ── Formulaires : form-row → 1 colonne ── */
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* ── Grilles fiche → 1 colonne ── */
  .fiche-grid {
    grid-template-columns: 1fr;
  }

  /* ── Layout show/edit : grille 2fr+1fr → 1 colonne ── */
  div[style*="display:grid;grid-template-columns:2fr 1fr"],
  div[style*="display: grid; grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Colonne sticky droite (actions) dépliée */
  div[style*="position:sticky;top:80px"] {
    position: static !important;
  }

  /* ── En-tête fiche : wrap les boutons d'action ── */
  .fiche-header div[style*="display:flex;align-items:flex-start;justify-content:space-between"] {
    flex-direction: column !important;
  }

  .fiche-header div[style*="display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0"] {
    flex-wrap: wrap !important;
    width: 100%;
  }

  .fiche-header .btn {
    flex: 1;
    justify-content: center;
    min-width: 80px;
  }

  /* ── Tableaux : scroll horizontal ── */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 480px;
  }

  /* Exception : petites tables dyn-table dans les fiches */
  .dyn-table {
    min-width: 320px;
  }

  th, td {
    padding: 8px 10px;
    font-size: .82rem;
  }

  /* ── Breadcrumb compact ── */
  .breadcrumb {
    font-size: .75rem;
    gap: 4px;
    margin-bottom: 14px;
  }

  /* ── Cards ── */
  .card__body  { padding: 14px 16px; }
  .card__header{ padding: 12px 16px 10px; }
  .card__footer{ padding: 10px 16px; }

  /* ── Séances list ── */
  .seance-item {
    flex-wrap: wrap;
    gap: 10px;
  }

  .seance-item div[style*="display:flex;flex-direction:column"] {
    width: 100%;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
  }

  /* ── Situations ── */
  .situation-item div[style*="display:flex;align-items:center;justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* ── Dashboard : section 2 colonnes → 1 colonne ── */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Stats rapides : 2 par ligne minimum ── */
  div[style*="grid-template-columns:repeat(auto-fill,minmax(180px,1fr))"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Filtres explorer : stack vertical ── */
  form[action="/explorer"] div[style*="grid-template-columns:2fr 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Modals ── */
  .modal {
    max-width: 100%;
    margin: 0;
    border-radius: var(--rayon-lg) var(--rayon-lg) 0 0;
    max-height: 92vh;
  }

  .modal-overlay {
    align-items: flex-end !important;
    padding: 0;
  }

  .modal__header { padding: 16px 18px; }
  .modal__body   { padding: 16px 18px; }
  .modal__footer { padding: 12px 18px; }

  /* ── Boutons : plus grandes zones tactiles ── */
  .btn {
    min-height: 40px;
  }

  .btn--sm {
    min-height: 34px;
    padding: 5px 11px;
  }

  /* ── Inputs : taille confortable sur mobile ── */
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  select,
  textarea {
    font-size: 16px; /* évite le zoom auto iOS */
  }

  /* ── Programme items tree : hauteur réduite ── */
  .prog-tree {
    max-height: 220px;
  }

  /* ── Pagination ── */
  .pagination {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── Empty state ── */
  .empty-state {
    padding: 40px 16px;
  }

  /* ── Sections form : séances / situations ── */
  .fiche-section__body {
    padding: 12px 14px;
  }

  /* ── Header actions bar (top de page) ── */
  div[style*="display:flex;align-items:center;justify-content:space-between;margin-bottom:28px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* ── Admin programmes edit_tree ── */
  .tree-node input[type=text].input-label {
    font-size: .85rem;
  }
}

/* ── Navigation mobile en bas d'écran ─────────────────────── */
/* Barre de navigation flottante pour accès rapide sur mobile  */
@media (max-width: 768px) {

  /* Création de la bottom nav */
  body::after {
    content: '';
    display: block;
    height: 68px; /* espace réservé pour la barre fixe */
  }

  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e3a5f;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    z-index: 200;
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  }

  .mobile-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: rgba(255,255,255,.55);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 8px;
    transition: color .15s, background .15s;
    min-width: 52px;
  }

  .mobile-nav__item:hover,
  .mobile-nav__item--active {
    color: white;
    text-decoration: none;
    background: rgba(255,255,255,.1);
  }

  .mobile-nav__item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
  }

  .mobile-nav__item--add {
    background: #2563eb;
    color: white !important;
    border-radius: 14px;
    padding: 6px 14px;
    box-shadow: 0 2px 10px rgba(37,99,235,.5);
  }

  .mobile-nav__item--add:hover {
    background: #1d4ed8;
  }
}

/* ── Très petit écran (≤ 375px) ─────────────────────────── */
@media (max-width: 375px) {

  .hero h1 { font-size: 1.45rem; }

  .btn {
    font-size: .82rem;
    padding: 8px 14px;
  }

  .badge {
    font-size: .68rem;
    padding: 2px 8px;
  }

  th, td {
    padding: 6px 8px;
    font-size: .78rem;
  }

  .card__body {
    padding: 12px 13px;
  }

  /* Stats dashboard : 1 par ligne */
  div[style*="grid-template-columns:repeat(auto-fill,minmax(180px,1fr))"] {
    grid-template-columns: 1fr !important;
  }

  .mobile-nav__item {
    font-size: .6rem;
    padding: 4px 6px;
    min-width: 44px;
  }

  .mobile-nav__item svg {
    width: 20px;
    height: 20px;
  }
}

/* ── Orientation paysage sur mobile ─────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {

  .hero {
    padding: 28px 0;
  }

  .hero h1 {
    font-size: 1.4rem;
  }

  .modal {
    max-height: 80vh;
    border-radius: var(--rayon-lg);
  }

  .modal-overlay {
    align-items: center !important;
    padding: 16px;
  }

  body::after {
    height: 56px;
  }

  .mobile-nav {
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  }
}

/* ── Support encoche / safe area (iPhone X+) ─────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .mobile-nav {
      padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
  }
}


/* ── Page Programmes : transformation en cartes sur mobile ── */
@media (max-width: 768px) {

  /* Masquer le tableau, afficher les cartes */
  .programmes-table-wrap table,
  .programmes-table-wrap thead,
  .programmes-table-wrap tbody,
  .programmes-table-wrap th,
  .programmes-table-wrap td,
  .programmes-table-wrap tr {
    display: block;
  }

  .programmes-table-wrap thead {
    display: none; /* cacher les en-têtes */
  }

  .programmes-table-wrap tr {
    background: white;
    border: 1px solid var(--gris-300);
    border-radius: var(--rayon);
    margin-bottom: 10px;
    padding: 12px 14px;
    min-width: unset !important;
  }

  .programmes-table-wrap td {
    border: none;
    padding: 4px 0;
    font-size: .85rem;
  }

  .programmes-table-wrap td::before {
    content: attr(data-label);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris-500);
    display: block;
    margin-bottom: 2px;
  }
}

/* ── Programmes : layout desktop/mobile ── */
.prog-matiere-block {
  border-bottom: 1px solid var(--gris-100);
}
.prog-matiere-block:last-child {
  border-bottom: none;
}

.prog-matiere-titre {
  padding: 10px 20px;
  font-weight: 700;
  font-size: .88rem;
  color: var(--bleu);
  background: var(--bleu-pale);
  border-bottom: 1px solid var(--gris-100);
}

.prog-table-wrap {
  overflow-x: auto;
}

.prog-table-wrap table {
  min-width: unset;
}

/* Sur desktop : tableau visible, cartes cachées */
.prog-cards-mobile {
  display: none;
}

/* Sur mobile : tableau caché, cartes visibles */
@media (max-width: 768px) {
  .prog-table-wrap {
    display: none;
  }

  .prog-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
  }

  .prog-card-mobile {
    background: var(--gris-50);
    border: 1px solid var(--gris-300);
    border-left: 3px solid var(--bleu-med);
    border-radius: var(--rayon);
    padding: 12px 14px;
  }

  .prog-matiere-titre {
    padding: 10px 14px;
    font-size: .85rem;
  }
}


.mobile-nav {
  display: none;
}

/* L'afficher seulement sur mobile */
@media (max-width: 768px) {
  .mobile-nav {
    display: flex;
  }
}