:root { --bg:#0f172a; --panel:#111827; --muted:#94a3b8; --txt:#e5e7eb; --accent:#22c55e; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--txt); }
/*.container { max-width: 920px; margin: 2rem auto; padding: 0 1rem; }*/

.container{
  width: 100%;
  max-width: 1400px; 
  margin: 2rem auto;
  padding: 0 1rem;
}

.topbar { display:flex; align-items:center; justify-content:space-between; padding:1rem; background: var(--panel); border-bottom:1px solid #1f2937; position: sticky; top:0; }
.topbar .brand { font-weight:700; letter-spacing:.3px; }
nav a { color: var(--muted); margin-left: 1rem; text-decoration: none; }


h1, h2 { margin: 1rem 0; }
form {
  gap: .8rem;
}
label { display:grid; gap:.3rem; font-size:.95rem; }
input { padding:.6rem .7rem; border-radius: .5rem; border:1px solid #374151; background:#0b1220; color:var(--txt); }
button { padding:.7rem 1rem; border:0; border-radius:.6rem; background: var(--accent); color:#062d17; font-weight:700; cursor:pointer; }
.alert { background:#3f1d1d; border:1px solid #7f1d1d; padding:.8rem; border-radius:.5rem; color:#fecaca; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:1rem; margin:1rem 0 2rem; }
.card { background: var(--panel); padding:1rem; border-radius: .9rem; border:1px solid #1f2937; }
.kpi { font-size:.85rem; color: var(--muted); }
.val { font-size:2rem; font-weight:800; margin-top:.3rem; }

/* ---- Panel compétences OF ---- */

.competences-panel {
    margin-top: 2rem;
}

.comp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.comp-tab {
    border: 1px solid #3b82f6;
    background: #0f172a;
    color: #e5e7eb;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.comp-tab.active {
    background: #3b82f6;
    color: #0b1120;
}

.comp-contents {
    margin-top: 0.5rem;
}

.comp-block {
    display: none;
}

.comp-block.active {
    display: block;
}

.comp-table-wrapper {
    max-height: 220px;     
    overflow-y: auto;
    margin-top: 0.5rem;
    border: 1px solid #1f2937;
    border-radius: 4px;
    background: #020617;
}

.comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.comp-table th,
.comp-table td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid #1f2937;
}

.comp-table thead {
    position: sticky;
    top: 0;
    background: #0b1120;
}

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

.dashboard-page {
    max-width: 1100px;
    margin: 0 auto;
}

.dashboard-header {
    margin-bottom: 1.5rem;
}

.dashboard-header h2 {
    margin: 0 0 0.4rem 0;
}

.dashboard-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-card {
    background: var(--panel);
    border: 1px solid #1f2937;
    border-radius: 1rem;
    padding: 1.2rem 1.4rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dashboard-card-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.dashboard-card-value {
    font-size: 2rem;
    font-weight: 800;
}

.dashboard-card-desc {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0.2rem 0 0.5rem 0;
}

.dashboard-link {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--accent);
}

.dashboard-link:hover {
    text-decoration: underline;
}

.dashboard-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px dashed #4b5563;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ---- Dashboard : actions rapides ---- */

.dashboard-actions {
    margin-top: 1rem;
}

.dashboard-actions h3 {
    margin-bottom: 0.8rem;
}

.dashboard-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.9rem;
}

.quick-action {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #1f2937;
    background: #020617;
    text-decoration: none;
    color: var(--txt);
    font-size: 0.9rem;
}

.quick-action span {
    font-size: 0.8rem;
    color: var(--muted);
}

.quick-action:hover {
    border-color: var(--accent);
    background: #022c22;
}


/* ---- Layout global (sidebar + contenu) ---- */

.app {
    display: flex;
    min-height: 100vh;
}

/* Sidebar à gauche */
.sidebar {
    width: 230px;
    background: #020617;
    border-right: 1px solid #1f2937;
    padding: 0.9rem 1rem;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
}

/* Zone principale à droite */
.content {
    margin-left: 230px;   
    flex: 1;
    min-height: 100vh;
}

/* Logo */
.sidebar-logo h2 {
    margin: 0 0 0.6rem 0;
    font-size: 1.2rem;
}

/* Infos utilisateur */
.sidebar-user {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.8rem;
}

/* Navigation */
.sidebar-nav ul {
    list-style: none;     
    margin: 0;
    padding: 0;
}

.sidebar-nav li {
    margin: 0;
}

/* Titre de section : Paramètres / Gestion / Sécurité */
.sidebar-nav .nav-section {
    margin-top: 0.8rem;
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

/* Liens de menu */
.sidebar-nav a {
    display: block;
    padding: 0.18rem 0.1rem;
    font-size: 0.88rem;
    color: var(--txt);
    text-decoration: none;
    border-radius: 4px;
}

.sidebar-nav a:hover {
    background: #111827;
}


/* ---- Logo cliquable ---- */

.sidebar-logo-link {
    display: block;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    color: var(--txt);
    margin-bottom: 0.6rem;
}

/* ---- Contenu principal ---- */

.content-inner {
    padding: 1.5rem 2rem 2.5rem;
}

/* Pages gestion*/
.param-page{
  width: 100%;
  max-width: 1400px; 
  margin: 0 auto 2rem;
}


.param-page h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Blocs "formulaire" et "table" */

.param-form,
.param-table {
    background: var(--panel);
    border: 1px solid #1f2937;
    border-radius: 1rem;
    padding: 1rem 1.3rem;
    margin-bottom: 1.3rem;
}

/* Alignement horizontal dans les formulaires */

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

/* Inputs, selects, textarea harmonisés */

select,
textarea {
    padding: .6rem .7rem;
    border-radius: .5rem;
    border: 1px solid #374151;
    background: #0b1220;
    color: var(--txt);
    font-family: inherit;
    font-size: .9rem;
}

textarea {
    resize: vertical;
}

/* Tables */

.param-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.param-table th,
.param-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #1f2937;
    text-align: left;
}

.param-table thead th {
    font-weight: 600;
    color: var(--muted);
    background: #020617;
}

.param-table tbody tr:nth-child(even) {
    background: #020617;
}

/* Boutons dans les tableaux un peu plus petits */

.param-table button {
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
}

/* Lien Déconnexion discret */

.topbar-right a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
}

.topbar-right a:hover {
    text-decoration: underline;
}

/* ====== COMPETENCES NUMERIQUES (grille style manuel) ====== */

/* ===== UI Cards / Tabs ===== */
.card-box{
  background: rgba(17,24,39,.65);
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 18px;
  margin: 18px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.filters-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 760px;
}

.filters-grid select{
  width: 100%;
  padding: .6rem .7rem;
  border-radius: .6rem;
  border: 1px solid #374151;
  background: #0b1220;
  color: var(--txt);
}

.tabs{
  display: flex;
  gap: 10px;
  margin: 14px 0 6px;
  flex-wrap: wrap;
}

.tab{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #1f2937;
  background: rgba(2,6,23,.35);
  color: var(--muted);
  text-decoration: none;
  transition: transform .05s ease, background .15s ease;
}

.tab:hover{
  transform: translateY(-1px);
}

.tab.active{
  background: var(--accent);
  color: #05250f;
  font-weight: 800;
  border-color: rgba(34,197,94,.35);
}

.hint{ color: var(--muted); margin: 12px 0; }



/* Cellules */
.matrix th, .matrix td{
  border: 1px solid rgba(31,41,55,.65);
  background: rgba(15,23,42,.55);
  padding: 8px 10px;
  vertical-align: middle;

  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

/* Entêtes */
.matrix thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(11,18,32,.92);
  text-align: center;
}

/* Largeurs */
.matrix .col-comp{ width: 90px;  }
.matrix .col-sub { width: 240px; }
.matrix .col-ecu { width: 62px;  } 

/* Têtes ECU (UE / ECU) */
.matrix .head-ue{
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 2px;
  line-height: 1.1;
}

.matrix .head-ecu{
  font-size: .72rem;
  font-weight: 800;
  color: var(--txt);
  line-height: 1.1;
}

/* Sticky colonnes gauche */
.sticky-left{
  position: sticky;
  left: 0;
  z-index: 6;
  background: rgba(11,18,32,.92) !important;
}

.sticky-left-2{
  position: sticky;
  left: 90px;               
  z-index: 6;
  background: rgba(11,18,32,.92) !important;
}

/* Bande compétence */
.comp-row td{
  background: rgba(244,114,182,.12) !important;
}

/* Alignement */
.cell{ text-align: center; }

/* Select notes */
.note-select{
  width: 100%;
  min-width: 0;
  padding: 6px 6px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(2,6,23,.6);
  color: var(--txt);
  font-size: 0.75rem;
  position: relative;
  z-index: 50;               
}

.val{ font-weight: 800; }

/* ===== Boutons-liens (Actions dans les tableaux) ===== */
.btn-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .7rem;
  border-radius:.65rem;
  border:1px solid #334155;
  background: rgba(2,6,23,.45);
  color: var(--txt);
  text-decoration:none;
  font-weight:700;
  font-size:.85rem;
  line-height:1;
  transition: transform .05s ease, border-color .15s ease, background .15s ease;
}

.btn-link:hover{
  transform: translateY(-1px);
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
}

.btn-link:active{
  transform: translateY(0);
}

/* Option: version "secondary" (gris) */
.btn-link.secondary{
  border-color:#374151;
  background: rgba(15,23,42,.35);
  color: var(--muted);
}
.btn-link.secondary:hover{
  border-color:#64748b;
  background: rgba(148,163,184,.10);
  color: var(--txt);
}

/* Option: version "danger" (supprimer / actions risquées) */
.btn-link.danger{
  border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.10);
}
.btn-link.danger:hover{
  border-color: rgba(239,68,68,.75);
  background: rgba(239,68,68,.18);
}

/* Pour que les boutons/links dans la cellule actions soient bien alignés */
.actions-inline{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}

/* ====== COMPÉTENCES QUALIFIÉES ====== */


.table-wide{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;       
  overflow-y: hidden;
}

/* Table : reste dans le conteneur */
.qualif-table{
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.qualif-table th,
.qualif-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(31,41,55,.7);
  border-right: 1px solid rgba(31,41,55,.7);
  background: rgba(15,23,42,.55);
  vertical-align: middle;
  white-space: nowrap;         
}

.qualif-table thead th{
  position: sticky;   /* optionnel : reste visible en scroll vertical */
  top: 0;
  z-index: 2;
  white-space: nowrap; /* évite que "Sous-compétence" casse */
  text-overflow: ellipsis;
  overflow: hidden;
}

.qualif-table th:first-child,
.qualif-table td:first-child{
  border-left: 1px solid rgba(31,41,55,.7);
}

.qualif-table tr:first-child th{
  border-top: 1px solid rgba(31,41,55,.7);
}

/* Colonne Sous-compétence = on autorise le retour à la ligne */
.qualif-table .col-sub{
  white-space: normal;
  min-width: 420px;
  max-width: 680px;
}

/* Colonne “Compétence” plus petite */
.qualif-table .col-comp{
  min-width: 90px;
}

/* Select dans table (pour éviter qu'il passe derrière le sticky) */
.qualif-table select{
  position: relative;
  z-index: 10;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(2,6,23,.6);
  color: var(--txt);
}

/* Pages de gestion qui doivent prendre + de largeur (grilles) */
.page-wide .container{
  max-width: 1400px;   
}



/* ===== Responsive ===== */
@media (max-width: 860px){
  .filters-grid{ grid-template-columns: 1fr; }

  /* Sur petit écran on réduit la colonne sous-comp */
  .matrix .col-sub { width: 180px; }
  .matrix .col-ecu { width: 56px; }
}
/*



/* ==============================
   FIX SIDEBAR OVERFLOW (GLOBAL)
   ============================== */

:root{
  --sidebar-w: 230px;
}

/* sidebar au-dessus */
.sidebar{
  z-index: 1000;
}

/* le contenu prend exactement la largeur restante */
.content{
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  min-width: 0; /* important pour éviter les débordements */
}

/* topbar ne doit JAMAIS déborder sous la sidebar */
.topbar{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 900;
}

/* évite que les gros titres poussent hors du conteneur */
.topbar h1{
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-inner{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ==============================
   FIX TABLE COMPETENCES QUALIFIEES
   ============================== */

.table-wide{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 16px;
  border: 1px solid #1f2937;
  background: rgba(2,6,23,.45);
}

/* table stable + ne déborde pas */
.qualif-table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;       /* stabilité */
}

/* cellules lisibles */
.qualif-table th,
.qualif-table td{
  padding: 10px 12px;
  border: 1px solid rgba(31,41,55,.65);
  vertical-align: top;

  white-space: normal;       /* autorise retour ligne */
  word-break: break-word;
  overflow-wrap: anywhere;

  font-size: 14px;
  line-height: 1.25;
}

/* header sticky OK, mais sans passer sous la sidebar */
.qualif-table thead th{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11,18,32,.95);
}

/* valeurs : ne pas être énormes */
.qualif-table .val{
  font-size: 14px !important;
  font-weight: 700;
}

/* largeurs recommandées */
.qualif-table .col-comp{ width: 110px; }
.qualif-table .col-sub { width: 420px; }

/* =========================================================
   MATRICE COMPÉTENCES NUMÉRIQUES
========================================================= */

.page-wide .param-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 2rem;
}

.page-wide .card-box {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.page-wide .content-inner {
  width: 100%;
  max-width: 100%;
}

/* zone scrollable */
.grid-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 75vh;
  border: 1px solid #1f2937;
  border-radius: 14px;
  background: #0b1220;
}

/* table */
.matrix {
  border-collapse: collapse;
  table-layout: fixed;
  width: max-content;
  min-width: 1800px;
  font-size: 13px;
}

/* cellules */
.matrix th,
.matrix td {
  border: 1px solid #c7c7c7;
  padding: 6px 8px;
  vertical-align: middle;
  text-align: center;
}

/* en-têtes top gauche */
.matrix .matrix-top-left {
  background: #b3b3b3 !important;
  color: #111 !important;
  font-weight: 700;
}

/* en-têtes UE */
.matrix .ue-head {
  background: #6f73b4 !important;
  color: #fff !important;
  font-weight: 700;
  text-align: center;
  min-width: 260px;
  max-width: 260px;
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.2;
}

/* en-têtes ECU */
.matrix .ecu-head {
  background: #7d81c2 !important;
  color: #fff !important;
  font-weight: 700;
  text-align: center;
  min-width: 160px;
  max-width: 160px;
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.2;
}

.matrix .ecu-head .ecu-label {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
}

/* colonnes fixes à gauche */
.matrix .sticky-left {
  position: sticky;
  left: 0;
  z-index: 8;
}

.matrix .sticky-left-2 {
  position: sticky;
  left: 320px;
  z-index: 8;
}

.matrix thead .sticky-left,
.matrix thead .sticky-left-2 {
  z-index: 12;
}

.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* colonne compétence */
.matrix .col-comp {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  background: #1e293b !important;
  color: #ffffff !important;
  text-align: left;
  font-weight: 700;
  white-space: normal;
  line-height: 1.25;
}

/* colonne sous-compétence */
.matrix .col-sub {
  width: 420px;
  min-width: 420px;
  max-width: 420px;
  background: #0f172a !important;
  color: #f8fafc !important;
  text-align: left;
  font-weight: 600;
  white-space: normal;
  line-height: 1.25;
}

/* ligne bloc compétence */
.matrix .comp-row td {
  background: #d48ab1 !important;
  color: #111 !important;
  font-weight: 700;
  text-align: left;
}

/* cellules de notes */
.matrix .cell,
.matrix .cell-filled,
.matrix .cell-empty {
  width: 72px;
  min-width: 72px;
  height: 42px;
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
}

.matrix .cell-filled {
  background: #f3f4f6 !important;
  color: #111 !important;
}

.matrix .cell-empty {
  background: #b7b7b7 !important;
  color: #111 !important;
}

.matrix .val {
  font-size: 18px !important;
  font-weight: 800 !important;
  margin: 0;
}

/* select en mode saisie */
.note-select {
  width: 100%;
  min-width: 60px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #111;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  appearance: none;
}

/* responsive */
@media (max-width: 860px) {
  .matrix {
    min-width: 1500px;
  }

  .matrix .col-comp {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
  }

  .matrix .col-sub {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
  }

  .matrix .sticky-left-2 {
    left: 260px;
  }
}
/* ===== FIX FORM SAISIE MATRICE NUM ===== */

.matrix-form {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.matrix-form .grid-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* on garde les petits formulaires classiques limités */
.param-form form,
.card-box > form:not(.matrix-form) {
  max-width: 420px;
}

/* ===== BOUTON AGRANDIR MATRICE ===== */

.matrix-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.btn-expand-matrix {
  padding: 10px 14px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0b1220;
  color: #e5e7eb;
  font-weight: 700;
  cursor: pointer;
}

.btn-expand-matrix:hover {
  background: #111827;
}

/* ===== MODAL PLEIN ECRAN MATRICE (VERSION AVANCEE) ===== */

body.modal-open {
  overflow: hidden;
}

.matrix-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 5000;
}

.matrix-modal.is-open {
  display: block;
}

.matrix-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.82);
}

.matrix-modal-content {
  position: relative;
  z-index: 2;
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  margin: 20px;
  border-radius: 16px;
  border: 1px solid #1f2937;
  background: #0b1220;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.matrix-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #1f2937;
  background: #111827;
}

.matrix-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.matrix-modal-close {
  padding: 8px 12px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  color: #e5e7eb;
  font-weight: 700;
  cursor: pointer;
}

.matrix-modal-close:hover {
  background: #1e293b;
}

.matrix-modal-body {
  flex: 1;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
}

.modal-grid-mount {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* quand la vraie matrice est déplacée dans la modal */
.matrix-modal #matrixHost {
  width: 100%;
  height: 100%;
}

.matrix-modal #matrixHost .grid-wrap {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  overflow: auto !important;
}

.matrix-modal .matrix {
  min-width: 2200px !important;
}
/* =================================
   BARRE ENREGISTRER MATRICE
================================= */

.matrix-save-bar{
  position: sticky;
  bottom: 0;
  z-index: 40;

  display: flex;
  justify-content: flex-end;

  padding: 12px 16px;

  background: rgba(11,18,32,.95);
  border-top: 1px solid #1f2937;

  backdrop-filter: blur(6px);
}

/* bouton enregistrer */

.btn-save-matrix{
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #16a34a;

  background: #22c55e;
  color: #05250f;

  font-weight: 800;
  font-size: 14px;

  cursor: pointer;

  box-shadow: 0 6px 18px rgba(34,197,94,.25);
}

.btn-save-matrix:hover{
  background: #16a34a;
}
.matrix .comp-row td {
  background: #d48ab1 !important;
  height: 24px;
}

.aa-val{
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.aa-input{
  width: 100%;
  min-width: 120px;
  min-height: 68px;
  resize: vertical;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: rgba(255,255,255,.92);
  color: #111827;
  font-size: 12px;
  line-height: 1.2;
}

.matrix .cell{
  vertical-align: top;
  padding: 8px 6px;
}

.disp-val{
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.disp-input{
  width: 100%;
  min-width: 120px;
  min-height: 68px;
  resize: vertical;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: rgba(255,255,255,.92);
  color: #111827;
  font-size: 12px;
  line-height: 1.2;
}

.matrix .cell{
  vertical-align: top;
  padding: 8px 6px;
}

.cq-matrix .cell,
.cq-cell{
  vertical-align: middle;
  text-align: center;
  font-weight: 700;
  padding: 8px 6px;
}

.cq-val{
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.cq-validee{
  background: #00ff00 !important;
  color: #111 !important;
}

.cq-travaillee{
  background: #4169e1 !important;
  color: #111 !important;
}

.cq-initiee{
  background: #8c8ce8 !important;
  color: #111 !important;
}

.cq-tv{
  background: #00d084 !important;
  color: #111 !important;
}

.cq-neant{
  background: #e5e7eb !important;
  color: #111 !important;
}

.cq-empty{
  background: #f3f4f6 !important;
  color: #111 !important;
}

/* ==============================
   WORKFLOW CREATION OF
============================== */

.workflow-page{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 2rem;
}

.workflow-hero{
  padding: 1.4rem 1.5rem;
}

.workflow-badge{
  display: inline-block;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.workflow-hero h2{
  margin: 0 0 0.5rem 0;
}

.workflow-intro{
  margin: 0;
  color: var(--muted);
  max-width: 900px;
  line-height: 1.5;
}

.workflow-summary{
  margin-top: 1rem;
}

.workflow-summary p{
  margin: 0 0 1rem 0;
  color: var(--txt);
}

.workflow-metrics{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.workflow-metric{
  min-width: 120px;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: #020617;
  border: 1px solid #1f2937;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.metric-value{
  font-size: 1.4rem;
  font-weight: 800;
}

.metric-label{
  color: var(--muted);
  font-size: 0.85rem;
}

.workflow-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.workflow-card{
  position: relative;
  background: var(--panel);
  border: 1px solid #1f2937;
  border-radius: 1rem;
  padding: 1.2rem 1.2rem 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 240px;
}

.workflow-card h3{
  margin: 0;
  padding-right: 40px;
  font-size: 1.05rem;
}

.workflow-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  flex: 1;
}

.workflow-step-number{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #05250f;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(34,197,94,.25);
}

.workflow-card-final{
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 12px 30px rgba(34,197,94,.08);
}

.workflow-help{
  margin-top: 1rem;
}

.workflow-help h3{
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.workflow-help p{
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.wf-status{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  width: fit-content;
}

.wf-status.ok{
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.35);
  color: #86efac;
}

.wf-status.ko{
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  color: #fca5a5;
}

/* ==============================
   AUDIT / HISTORIQUE
============================== */

.audit-list{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.audit-item{
  border: 1px solid #1f2937;
  border-radius: 16px;
  background: rgba(2,6,23,.45);
  padding: 1rem 1.1rem;
}

.audit-item-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

.audit-item-left{
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.audit-item-right{
  color: var(--muted);
  font-size: .9rem;
}

.audit-entity{
  font-weight: 800;
  color: var(--txt);
}

.audit-id{
  color: var(--muted);
  font-size: .9rem;
}

.audit-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: .8rem;
}

.audit-summary{
  color: var(--txt);
  line-height: 1.5;
}

.audit-summary-meta{
  color: var(--txt);
}

.audit-change-list{
  margin: .4rem 0 0 1rem;
  padding-left: 1rem;
}

.audit-change-list li{
  margin-bottom: .25rem;
}

.audit-old{
  color: #fca5a5;
}

.audit-new{
  color: #86efac;
}

.audit-details{
  margin-top: .9rem;
  border-top: 1px solid #1f2937;
  padding-top: .8rem;
}

.audit-details summary{
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: .5rem;
}

.audit-details pre{
  margin: .5rem 0 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  background: #020617;
  border: 1px solid #1f2937;
  border-radius: 12px;
  padding: .9rem;
  color: #cbd5e1;
  font-size: .85rem;
}

.audit-empty{
  padding: 1rem;
  border: 1px dashed #334155;
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

.audit-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid transparent;
}

.audit-badge-create{
  background: rgba(34,197,94,.14);
  color: #86efac;
  border-color: rgba(34,197,94,.35);
}

.audit-badge-update{
  background: rgba(59,130,246,.14);
  color: #93c5fd;
  border-color: rgba(59,130,246,.35);
}

.audit-badge-delete{
  background: rgba(239,68,68,.14);
  color: #fca5a5;
  border-color: rgba(239,68,68,.35);
}

.audit-badge-default{
  background: rgba(148,163,184,.12);
  color: #cbd5e1;
  border-color: rgba(148,163,184,.35);
}

.audit-actions-row{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  align-items:center;
  margin-top:.9rem;
}

/* ==============================
   DASHBOARD V2
============================== */

.dashboard-hero{
  margin-bottom: 1.2rem;
}

.dashboard-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
}

.dashboard-hero-kicker{
  display:inline-block;
  margin-bottom:.45rem;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.dashboard-role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.12);
  color:var(--accent);
  font-weight:800;
  font-size:.82rem;
}

.dashboard-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1rem;
  margin-bottom:1.4rem;
}

.dashboard-kpi-card{
  background:var(--panel);
  border:1px solid #1f2937;
  border-radius:1rem;
  padding:1rem 1.1rem;
  box-shadow:0 10px 25px rgba(0,0,0,.22);
}

.dashboard-kpi-label{
  color:var(--muted);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:.35rem;
}

.dashboard-kpi-value{
  font-size:1.8rem;
  font-weight:800;
  line-height:1.1;
}

.dashboard-kpi-mini{
  margin-top:.25rem;
  color:var(--muted);
  font-size:.78rem;
}

.dashboard-main-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem;
  margin-bottom:1.4rem;
}

.dashboard-alert-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin-top:.35rem;
}

.dashboard-alert-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem .7rem;
  border-radius:.75rem;
  background:#020617;
  border:1px solid #1f2937;
}

.dashboard-alert-item span{
  color:var(--muted);
  font-size:.9rem;
}

.dashboard-alert-item strong{
  font-size:1rem;
  color:var(--txt);
}

.dashboard-section{
  margin-top:1.2rem;
}

.dashboard-section h3{
  margin-bottom:.8rem;
}

.dashboard-two-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:1.4rem;
}

.dashboard-activity-list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.dashboard-activity-item{
  border:1px solid #1f2937;
  border-radius:.8rem;
  padding:.75rem .85rem;
  background:#020617;
}

.dashboard-activity-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.25rem;
}

.dashboard-activity-top span{
  color:var(--muted);
  font-size:.82rem;
}

.dashboard-activity-sub{
  color:var(--muted);
  font-size:.86rem;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.25rem .55rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  border:1px solid transparent;
}

.status-ok{
  background:rgba(34,197,94,.14);
  color:#86efac;
  border-color:rgba(34,197,94,.35);
}

.status-draft{
  background:rgba(245,158,11,.14);
  color:#fcd34d;
  border-color:rgba(245,158,11,.35);
}

@media (max-width: 980px){
  .dashboard-two-cols{
    grid-template-columns:1fr;
  }
}


/* =========================================
   TABLEAU ECU - SAISIE
========================================= */

.ecu-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #1f2937;
  border-radius: 10px;
  background: #0b1324;
}

.ecu-table {
  width: 100%;
  min-width: 1350px; 
  border-collapse: collapse;
  table-layout: fixed;
}

.ecu-table th,
.ecu-table td {
  padding: 8px;
  border-bottom: 1px solid #1f2937;
  vertical-align: middle;
  text-align: left;
}

.ecu-table th {
  white-space: nowrap;
}

.ecu-table td input,
.ecu-table td select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ecu-table td input[type="number"] {
  min-width: 70px;
}

.ecu-table th:nth-child(1),
.ecu-table td:nth-child(1) {
  width: 55px; /* # */
}

.ecu-table th:nth-child(2),
.ecu-table td:nth-child(2) {
  width: 80px; /* ordre */
}

.ecu-table th:nth-child(3),
.ecu-table td:nth-child(3) {
  width: 120px; /* code */
}

.ecu-table th:nth-child(4),
.ecu-table td:nth-child(4) {
  width: 160px; /* libellé */
}

.ecu-table th:nth-child(5),
.ecu-table td:nth-child(5) {
  width: 110px; /* mode */
}

.ecu-table th:nth-child(6),
.ecu-table td:nth-child(6),
.ecu-table th:nth-child(7),
.ecu-table td:nth-child(7),
.ecu-table th:nth-child(8),
.ecu-table td:nth-child(8) {
  width: 90px; /* CM TD/TP TPE */
}

.ecu-table th:nth-child(9),
.ecu-table td:nth-child(9),
.ecu-table th:nth-child(10),
.ecu-table td:nth-child(10) {
  width: 70px; /* CTT CECT */
  text-align: center;
}

.ecu-table th:nth-child(11),
.ecu-table td:nth-child(11) {
  width: 170px; /* actions */
}

.ecu-actions-cell {
  white-space: normal;
}

.ecu-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.ecu-actions .btn-link,
.ecu-actions button {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* petit ajustement mobile */
@media (max-width: 1200px) {
  .ecu-table {
    min-width: 1250px;
  }
}

/* =========================================================
   PROGRAMME PREVIEW / EDITION
========================================================= */

.programme-preview-card {
  background: #0b1324;
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 18px;
  margin-top: 18px;
}

.programme-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.programme-preview-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.programme-preview-subtitle {
  margin: 6px 0 0 0;
  color: #94a3b8;
  font-size: 0.95rem;
}

.programme-validation-box {
  margin-top: 16px;
}

.programme-validation-box table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.programme-validation-box th,
.programme-validation-box td {
  padding: 10px 12px;
  border-bottom: 1px solid #1f2937;
  text-align: left;
}

.programme-validation-box th {
  background: #020817;
  color: #e5e7eb;
  font-weight: 700;
  white-space: nowrap;
}

.programme-validation-box td {
  background: #0f172a;
}

.programme-edit-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #1f2937;
  border-radius: 14px;
  background: #081122;
  margin-top: 14px;
}

.programme-edit-table {
  width: 100%;
  min-width: 1550px;
  border-collapse: collapse;
  table-layout: fixed;
}

.programme-edit-table th,
.programme-edit-table td {
  padding: 8px;
  border-bottom: 1px solid #1f2937;
  vertical-align: middle;
}

.programme-edit-table th {
  background: #020817;
  color: #e5e7eb;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.programme-edit-table td {
  background: #0b1324;
}

.programme-edit-table tr:nth-child(even) td {
  background: #0e172b;
}

.programme-edit-table input,
.programme-edit-table select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.programme-edit-table input[type="number"] {
  min-width: 70px;
}

.programme-edit-table th:nth-child(1),
.programme-edit-table td:nth-child(1) { width: 70px; }

.programme-edit-table th:nth-child(2),
.programme-edit-table td:nth-child(2) { width: 120px; }

.programme-edit-table th:nth-child(3),
.programme-edit-table td:nth-child(3) { width: 260px; }

.programme-edit-table th:nth-child(4),
.programme-edit-table td:nth-child(4) { width: 95px; }

.programme-edit-table th:nth-child(5),
.programme-edit-table td:nth-child(5) { width: 120px; }

.programme-edit-table th:nth-child(6),
.programme-edit-table td:nth-child(6) { width: 280px; }

.programme-edit-table th:nth-child(7),
.programme-edit-table td:nth-child(7),
.programme-edit-table th:nth-child(8),
.programme-edit-table td:nth-child(8),
.programme-edit-table th:nth-child(9),
.programme-edit-table td:nth-child(9) { width: 90px; }

.programme-edit-table th:nth-child(10),
.programme-edit-table td:nth-child(10),
.programme-edit-table th:nth-child(11),
.programme-edit-table td:nth-child(11) {
  width: 80px;
  text-align: center;
}

.programme-edit-table th:nth-child(12),
.programme-edit-table td:nth-child(12) { width: 180px; }

.programme-preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.programme-preview-actions .btn-link,
.programme-preview-actions button {
  min-width: 180px;
}

.programme-preview-note {
  color: #94a3b8;
  font-size: 0.92rem;
  margin-top: 10px;
}

@media (max-width: 1200px) {
  .programme-edit-table {
    min-width: 1450px;
  }
}

.welcome-hero {
  padding: 28px;
  border: 1px solid #1f2d4a;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12,24,52,.85), rgba(8,18,40,.95));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.welcome-text {
  max-width: 760px;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 20px;
}

.welcome-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-secondary {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #334155;
  color: #e5e7eb;
  text-decoration: none;
  background: transparent;
}

.btn-secondary:hover {
  border-color: #22c55e;
  color: #22c55e;
}

/* =========================
   AUTH / WELCOME PAGES
========================= */

.auth-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

.auth-form {
  max-width: 520px;
  margin-top: 18px;
}

.welcome-hero {
  padding: 34px 36px;
  border: 1px solid #1f2d4a;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(9, 26, 64, 0.96), rgba(7, 20, 48, 0.98));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.welcome-hero h2 {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 2.2rem;
  line-height: 1.2;
}

.welcome-text {
  max-width: 900px;
  line-height: 1.75;
  font-size: 1.15rem;
  color: #d7e3f4;
  margin-bottom: 26px;
}

.welcome-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================
   BOUTONS GLOBAUX
========================= */

.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease;
}

/* bouton principal vert */
.btn-primary,
a.btn-primary,
button.btn-primary {
  background: #22c55e;
  color: #04111f;
  border-color: #22c55e;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.22);
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  transform: translateY(-1px);
}

/* bouton secondaire foncé */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  background: rgba(255, 255, 255, 0.02);
  color: #f8fafc;
  border-color: #334155;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
  border-color: #22c55e;
  transform: translateY(-1px);
}

/* bouton danger */
.btn-danger,
a.btn-danger,
button.btn-danger {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}

.btn-danger:hover,
a.btn-danger:hover,
button.btn-danger:hover {
  background: #991b1b;
  border-color: #991b1b;
}

/* liens de bas de formulaire */
.auth-page p a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 600;
}

.auth-page p a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* champs du formulaire auth */
.auth-form .form-group {
  margin-bottom: 16px;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
  max-width: 520px;
}

/* carte simple pour blocs */
.card-box,
.param-form,
.param-table,
.card {
  border-radius: 20px;
}

/* responsive */
@media (max-width: 768px) {
  .auth-page {
    padding: 18px;
  }

  .welcome-hero {
    padding: 24px 20px;
  }

  .welcome-hero h2 {
    font-size: 1.8rem;
  }

  .welcome-text {
    font-size: 1rem;
  }

  .welcome-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .welcome-actions .btn {
    width: 100%;
  }
}
.auth-page h2 {
  font-size: 2rem;
  margin-bottom: 22px;
}

.auth-page h3 {
  font-size: 1.2rem;
  margin-bottom: 14px;
}

/* =========================
   DASHBOARD
========================= */

.dashboard-page {
  display: grid;
  gap: 1.25rem;
}

.dashboard-hero {
  padding: 1.5rem;
  border-radius: 18px;
}

.dashboard-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.dashboard-hero-kicker {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .9rem;
  color: #9fb4d9;
  margin-bottom: .65rem;
}

.dashboard-subtitle {
  margin-top: .6rem;
  color: #b8c5df;
  max-width: 780px;
  line-height: 1.6;
}

.dashboard-role-badge {
  display: inline-flex;
  align-items: center;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}

.dashboard-kpi-card {
  background: rgba(9, 18, 40, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.dashboard-kpi-label {
  color: #9fb4d9;
  font-size: .9rem;
  margin-bottom: .55rem;
}

.dashboard-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #f8fafc;
}

.dashboard-kpi-mini {
  margin-top: .5rem;
  font-size: .85rem;
  color: #94a3b8;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.dashboard-card {
  background: rgba(9, 18, 40, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  padding: 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.dashboard-card-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .9rem;
  color: #9fb4d9;
  margin-bottom: .8rem;
}

.dashboard-card-value {
  font-size: 2rem;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.1;
  margin-bottom: .75rem;
}

.dashboard-card-desc {
  color: #b8c5df;
  line-height: 1.6;
  margin-bottom: .8rem;
}

.dashboard-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #22c55e;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-link:hover {
  text-decoration: underline;
}

.dashboard-alert-list {
  display: grid;
  gap: .7rem;
}

.dashboard-alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .95rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.10);
}

.dashboard-alert-item span {
  color: #cbd5e1;
}

.dashboard-alert-item strong {
  color: #f8fafc;
  font-size: 1rem;
}

.dashboard-section {
  display: grid;
  gap: 1rem;
}

.dashboard-section h3 {
  margin: 0;
}

.dashboard-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.quick-action {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  text-decoration: none;
  color: #f8fafc;
  background: rgba(3, 10, 28, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.quick-action:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.quick-action span {
  color: #b8c5df;
  font-size: .95rem;
  line-height: 1.5;
}

.dashboard-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.dashboard-activity-list {
  display: grid;
  gap: .8rem;
}

.dashboard-activity-item {
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  padding: .9rem 1rem;
}

.dashboard-activity-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
  flex-wrap: wrap;
}

.dashboard-activity-top strong {
  color: #f8fafc;
}

.dashboard-activity-top span,
.dashboard-activity-sub {
  color: #aebcd5;
  font-size: .95rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
}

.status-ok {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.status-draft {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

/* Etudiant */
.dashboard-student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.dashboard-student-card {
  background: linear-gradient(180deg, rgba(7, 20, 48, 0.98), rgba(4, 12, 30, 0.98));
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 18px;
  padding: 1.2rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 980px) {
  .dashboard-two-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard-hero-top {
    flex-direction: column;
  }

  .dashboard-role-badge {
    align-self: flex-start;
  }

  .dashboard-card-value,
  .dashboard-kpi-value {
    font-size: 1.65rem;
  }
}

/* ===== Légende compétences qualifiées ===== */

.cq-legend-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;

  margin: 12px 0 16px;
  padding: 12px 16px;

  border: 1px solid #1f2937;
  border-radius: 14px;
  background: rgba(2,6,23,.45);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.cq-legend-title{
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--txt);
  white-space: nowrap;
}

.cq-legend-items{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.cq-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 0.9rem;
  color: var(--txt);
}

.cq-legend-swatch{
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(15,23,42,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  flex: 0 0 18px;
}

/* on réutilise les memes couleurs que la matrice */
.cq-legend-swatch.cq-validee{
  background: #00ff00;
}

.cq-legend-swatch.cq-travaillee{
  background: #4169e1;
}

.cq-legend-swatch.cq-initiee{
  background: #8c8ce8;
}

.cq-legend-swatch.cq-tv{
  background: #00d084;
}

.cq-legend-swatch.cq-neant{
  background: #e5e7eb;
}

@media (max-width: 860px){
  .cq-legend-bar{
    align-items:flex-start;
  }

  .cq-legend-items{
    gap:12px;
  }
}

.of-table {
  width: 100%;
  border-collapse: collapse;
}

.of-table th,
.of-table td {
  vertical-align: top;
}

.table-responsive {
  overflow-x: auto;
}

.badge {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-draft {
  background: #334155;
  color: #e2e8f0;
}

.badge-pending {
  background: #78350f;
  color: #fde68a;
}

.badge-approved {
  background: #14532d;
  color: #bbf7d0;
}

.badge-rejected {
  background: #7f1d1d;
  color: #fecaca;
}

.badge-neutral {
  background: #374151;
  color: #e5e7eb;
}

.of-comment-cell {
  min-width: 180px;
  max-width: 260px;
  font-size: 0.92rem;
  line-height: 1.35;
}

.of-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 170px;
}

.of-actions form {
  margin: 0;
}

.of-actions input[type="text"] {
  width: 100%;
}

.btn-success {
  background: #166534;
  color: #fff;
  border: none;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
}

.btn-warning {
  background: #b45309;
  color: #fff;
  border: none;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
}

.btn-danger {
  background: #b91c1c;
  color: #fff;
  border: none;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
}

.muted {
  opacity: 0.7;
}

.reject-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}