@charset "UTF-8";

/* ==========================================================================
   TABLE DES MATIÈRES
   ==========================================================================
   1. CONFIGURATION & VARIABLES GLOBALES (:root)
   2. RESET & STYLES DE BASE
   3. LAYOUT PRINCIPAL (Topbar, Sidebar, Section droite)
   4. COMPOSANTS COMMUNS (Toolbar, Cartes, Badges)
   5. SECTIONS SPÉCIFIQUES (Formulaires, Tableaux)
   6. RESPONSIVE DESIGN (breakpoints)
   7. HARMONISATION VUE-MULTISELECT / SELECT2
   8. LABELS & FORM HELP
   9. STYLES SPÉCIFIQUES AU TABLEAU #EXEMPLE
   ========================================================================== */


/* ==========================================================================
   1) CONFIGURATION & VARIABLES GLOBALES
   ========================================================================== */
[v-cloak]{display:none!important;}

:root{
  --primary-dark:#146354;
  --primary-main:#2FA885;
  --primary-light:#E9FBF6;

  --accent:#56B2A0;
  --success:#2FA885;
  --warning:#B38B00;
  --danger:#B24D4D;
  --ring-focus:rgba(47,168,133,.35);

  --neutral-bg:#F7FAF9;
  --neutral-card:#FFFFFF;
  --text-primary:#1A202C;
  --text-secondary:#4A5568;
  --border-color:#E2E8F0;
  --border-dark:#2c3e50;

  --card-max-width:920px;
  --card-padding:1.5rem;
  --row-gap:.875rem;

  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(20,99,84,.08);

  --color-message-success-bg:#e3fcec;
  --color-message-success-text:#1f9d55;
  --color-message-success-border:#51d88a;

  --color-message-warning-bg:#fffabc;
  --color-message-warning-text:#8d7b00;
  --color-message-warning-border:#d3b800;

  --color-message-error-bg:#fcebea;
  --color-message-error-text:#cc1f1a;
  --color-message-error-border:#ef5753;

  --color-message-info-bg:#eff8ff;
  --color-message-info-text:#2779bd;
  --color-message-info-border:#6cb2eb;
}

:root[data-theme="emerald"]{
  --primary-dark:#0F5132;
  --primary-main:#2E7D5B;
  --primary-light:#EAF6F0;
  --accent:#39A96B;
  --ring-focus:rgba(46,125,91,.35);
}

:root[data-theme="sage"]{
  --primary-dark:#3E5F50;
  --primary-main:#5E8A74;
  --primary-light:#EFF7F3;
  --accent:#8FBFA8;
  --ring-focus:rgba(94,138,116,.35);
}


/* ==========================================================================
   2) RESET & STYLES DE BASE
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background-color:var(--neutral-bg);
  color:var(--text-primary);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{text-decoration:none;color:inherit}


/* ==========================================================================
   3) LAYOUT PRINCIPAL
   ========================================================================== */

/* --- Topbar --- */
.topbar{
  background-color:var(--primary-dark);
  color:#fff;
  height:64px;
  display:flex;
  align-items:center;
  padding:0 24px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
}
.topbar-toggle{
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  cursor:pointer;
  margin-right:16px;
  padding:8px;
  border-radius:50%;
  transition:background-color .2s;
}
.topbar-toggle:hover{background-color:rgba(255,255,255,.1)}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:20px;
  font-weight:700;
  margin-right:24px;
  letter-spacing:-.5px;
}
.logo-icon{
  width:36px;
  height:36px;
  background-color:var(--primary-main);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.topbar-selects{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
  max-width:none;
}
.topbar-select{flex:1 1 240px;min-width:0}
.topbar-select select{
  width:100%;
  min-width:0;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:14px;
  cursor:pointer;
  transition:background-color .2s,border-color .2s;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.topbar-select select:hover{background:rgba(255,255,255,.2)}
.topbar-select select option{
  background:var(--primary-dark);
  color:#fff;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left:auto;
}

/* --- Notifications dropdown --- */
.notifications-container{position:relative}
.notifications-trigger{
  position:relative;
  cursor:pointer;
  padding:8px;
  border-radius:50%;
  transition:background-color .2s ease;
}
.notifications-trigger:hover{background-color:rgba(255,255,255,.1)}
.topbar-icon{color:#fff;font-size:20px}
.notifications-badge{
  position:absolute;
  top:0;
  right:0;
  background-color:#dc3545;
  color:#fff;
  font-size:10px;
  font-weight:600;
  width:16px;
  height:16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--primary-dark);
}
.notifications-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:380px;
  max-width:90vw;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
  border:1px solid var(--border-color);
  margin-top:5px;
  padding:0;
  display:none;
  z-index:1002;
  animation:fadeIn .2s ease-out;
  overflow:hidden;
}
.notifications-container.show .notifications-dropdown{display:block}
.notifications-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border-color);
  background:var(--neutral-bg);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.notifications-title{
  font-weight:600;
  color:var(--text-primary);
  font-size:1rem;
}
.notifications-actions{display:flex;gap:10px}
.notifications-action{
  background:none;
  border:none;
  color:var(--primary-main);
  font-size:.85rem;
  font-weight:500;
  cursor:pointer;
  padding:4px 8px;
  border-radius:4px;
  transition:background-color .2s;
}
.notifications-action:hover{background-color:rgba(47,168,133,.1)}
.notifications-list{
  max-height:400px;
  overflow-y:auto;
}
.notification-item{
  padding:16px 20px;
  border-bottom:1px solid var(--border-color);
  transition:background-color .2s;
  cursor:pointer;
  position:relative;
}
.notification-item:hover{background-color:#f8f9fa}
.notification-item.unread{
  background-color:rgba(233,251,246,.5);
  border-left:3px solid var(--primary-main);
}
.notification-content{display:flex;gap:12px}
.notification-icon{
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--primary-main);
  font-size:14px;
}
.notification-details{flex:1;min-width:0}
.notification-title{
  font-weight:600;
  color:var(--text-primary);
  font-size:.9rem;
  margin-bottom:4px;
}
.notification-message{
  color:var(--text-secondary);
  font-size:.85rem;
  line-height:1.4;
  margin-bottom:6px;
}
.notification-time{
  color:#a0aec0;
  font-size:.75rem;
  font-weight:500;
}
.notification-footer{
  padding:12px 20px;
  text-align:center;
  border-top:1px solid var(--border-color);
  background:var(--neutral-bg);
}
.notification-footer a{
  color:var(--primary-main);
  font-weight:500;
  font-size:.9rem;
}
.notification-footer a:hover{text-decoration:underline}
.notification-empty{
  padding:40px 20px;
  text-align:center;
  color:var(--text-secondary);
}
.notification-empty i{
  font-size:2rem;
  color:var(--border-color);
  margin-bottom:12px;
}
.notification-empty p{
  font-size:.9rem;
  margin:0;
}
.notification-success .notification-icon{
  background-color:rgba(47,168,133,.1);
  color:var(--success);
}
.notification-warning .notification-icon{
  background-color:rgba(179,139,0,.1);
  color:var(--warning);
}
.notification-error .notification-icon{
  background-color:rgba(178,77,77,.1);
  color:var(--danger);
}
.notification-info .notification-icon{
  background-color:rgba(86,178,160,.1);
  color:var(--accent);
}
.notification-status{
  position:absolute;
  top:16px;
  right:16px;
  width:8px;
  height:8px;
  border-radius:50%;
  background-color:var(--primary-main);
}
.notification-item.read .notification-status{display:none}

/* --- User info with dropdown --- */
.user-info{
  position:relative;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.user-dropdown-trigger{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:6px;
  transition:background-color .2s ease;
  white-space:nowrap;
}
.user-dropdown-trigger:hover{background-color:rgba(255,255,255,.1)}
.user-info.show .dropdown-arrow,
.notifications-container.show .dropdown-arrow{
  transform:rotate(180deg);
}
.user-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--primary-main);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:14px;
  color:#fff;
  flex-shrink:0;
}
.user-info span{
  margin-left:0;
  font-weight:500;
  color:#fff;
}
.user-info .child{color:#000}
.dropdown-arrow{
  font-size:12px;
  color:rgba(255,255,255,.8);
  transition:transform .3s ease;
  margin-left:4px;
}
.user-dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:260px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
  border:1px solid var(--border-color);
  margin-top:5px;
  padding:10px 0;
  display:none;
  z-index:1001;
  animation:fadeIn .2s ease-out;
}
.user-info.show .user-dropdown-menu{display:block}
.dropdown-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border-color);
  margin-bottom:5px;
}
.user-info-dropdown{
  display:flex;
  align-items:center;
  gap:12px;
}
.user-avatar-dropdown{
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary-main),var(--primary-dark));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:bold;
  font-size:1rem;
  flex-shrink:0;
}
.user-name{
  font-weight:600;
  color:var(--text-primary);
  font-size:.95rem;
}
.user-email{
  color:var(--text-secondary);
  font-size:.85rem;
  margin-top:2px;
}
.dropdown-item{
  display:flex;
  align-items:center;
  padding:12px 20px;
  color:var(--text-primary);
  transition:background-color .2s ease;
  gap:12px;
  font-size:.9rem;
  cursor:pointer;
}
.dropdown-item:hover{
  background-color:#f8f9fa;
  color:var(--text-primary);
}
.dropdown-icon{
  width:20px;
  text-align:center;
  color:var(--text-secondary);
  font-size:.9rem;
}
.dropdown-divider{
  height:1px;
  background-color:var(--border-color);
  margin:8px 0;
}
.logout-link{color:#dc3545}
.logout-link:hover{background-color:rgba(220,53,69,.1)}
.logout-link .dropdown-icon{color:#dc3545}
.dropdown-backdrop{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:1000;
  display:none;
  background:transparent;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* --- Layout --- */
.app-layout{
  display:flex;
  margin-top:64px;
  min-height:calc(100vh - 64px);
}

/* --- Sidebar --- */
.sidebar{
  width:250px;
  background:var(--neutral-card);
  border-right:1px solid var(--border-color);
  transition:width .3s ease,transform .3s ease;
  position:fixed;
  left:0;
  top:64px;
  bottom:0;
  overflow-y:auto;
  z-index:900;
  padding:16px 0;
}
.sidebar.collapsed{width:70px}
.sidebar.collapsed .menu-text,
.sidebar.collapsed .menu-arrow{display:none}
.sidebar.collapsed .menu-item{justify-content:center}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{
  background:var(--border-color);
  border-radius:3px;
}
.sidebar::-webkit-scrollbar-thumb:hover{background:#A0AEC0}

.menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  margin:4px 8px;
  border-radius:6px;
  color:var(--text-secondary);
  white-space:nowrap;
  cursor:pointer;
  transition:all .2s ease-in-out;
}
.menu-item:hover{
  background:var(--neutral-bg);
  color:var(--text-primary);
}
.menu-item.active{
  background:var(--primary-light);
  color:var(--primary-main);
  font-weight:600;
}
.menu-icon{
  font-size:18px;
  width:24px;
  text-align:center;
  flex-shrink:0;
}
.menu-text{
  flex:1;
  font-size:14px;
  font-weight:500;
}

/* --- Section principale --- */
.main-section{
  flex:1;
  margin-left:250px;
  transition:margin-left .3s ease;
  display:flex;
  flex-direction:column;
  min-width:0;
  max-width:100%;
}
.main-section.expanded{margin-left:70px}

.project-header{padding-left:10px}
.project-title{
  display:flex;
  float:left;
}
.project-title h1{
  font-size:16px;
  font-weight:600;
}

.exercice-container{
  display:flex;
  justify-content:end;
  padding-right:10px;
}

.main-content{
  flex:1;
  min-width:0;
  max-width:100%;
}

.sidebar-overlay{
  display:none;
  position:fixed;
  top:64px;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.5);
  z-index:850;
}
.sidebar-overlay.active{display:block}

.content-card,
.table-card,
.table-card-header,
.table-card-body{
  min-width:0;
  max-width:100%;
}


/* ==========================================================================
   4) COMPOSANTS COMMUNS
   ========================================================================== */

/* Toolbar */
.main-toolbar{
  padding:8px 16px;
  display:flex;
  gap:8px;
  align-items:center;
  min-height:52px;
  position:relative;
  background-color:#A5D4CC;
  flex-wrap:wrap;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible;
}

#toolbar-container{justify-content:center}

.main-toolbar .toolbar-container{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  flex-wrap:wrap;
  background-color:#A5D4CC;
  min-width:0;
}

.main-toolbar .toolbar-item-wrapper,
.toolbar-item-wrapper{
  position:relative;
  flex-shrink:0;
}

.main-toolbar .toolbar-logo{
  background:var(--primary-main);
  border-radius:8px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
}
.main-toolbar .toolbar-logo i{
  color:#fff;
  font-size:12px;
}

.main-toolbar .toolbar-btn,
.toolbar-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:8px 12px;
  background:var(--neutral-card);
  border:1px solid var(--border-color);
  border-radius:8px;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
  min-height:36px;
  flex-shrink:0;
}

.main-toolbar .toolbar-btn:hover,
.toolbar-btn:hover{
  background:var(--neutral-bg);
  border-color:var(--accent);
  color:var(--text-primary);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

.main-toolbar .toolbar-btn.open,
.toolbar-btn.open{
  background:var(--primary-light);
  border-color:var(--primary-main);
  color:var(--primary-main);
  box-shadow:0 0 0 3px var(--ring-focus);
}

.main-toolbar .toolbar-btn i:first-child,
.toolbar-btn i:first-child{
  font-size:16px;
  color:var(--primary-main);
  background-repeat:no-repeat;
}

.main-toolbar .dropdown-arrow{
  font-size:12px;
  color:var(--text-secondary);
  transition:transform .2s;
  margin-left:4px;
}
.main-toolbar .toolbar-btn.open .dropdown-arrow{
  transform:rotate(180deg);
}

.main-toolbar .dropdown-menu,
.dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:240px;
  background:var(--neutral-card);
  border-radius:8px;
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-md);
  padding:6px;
  animation:slideDown .2s ease-out;
  z-index:1102;
  max-height:400px;
  overflow-y:auto;
}

.main-toolbar .toolbar-btn.open + .dropdown-menu,
.toolbar-btn.open + .dropdown-menu{
  display:block;
}

.main-toolbar .dropdown-item,
.dropdown-menu .dropdown-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  color:var(--text-secondary);
  font-size:14px;
  border-radius:6px;
  transition:all .15s;
  white-space:nowrap;
}

.main-toolbar .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover{
  background:var(--primary-light);
  color:var(--primary-dark);
}

.main-toolbar .dropdown-item i,
.dropdown-menu .dropdown-item i{
  font-size:16px;
  width:20px;
  color:var(--accent);
  text-align:center;
}

@keyframes slideDown{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Bloc d'actions de toolbar */
.toolbar-actions-container{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:nowrap;
  margin-left:auto;
}

/* Bloc select + bouton + */
.toolbar-select-add-group{
  display:grid !important;
  grid-template-columns:minmax(200px,200px) 39px;
  align-items:center;
  column-gap:.5rem;
  margin-left:auto;
  white-space:nowrap;
  flex:0 0 auto;
}

.toolbar-select-form{
  display:block !important;
  width:100%;
  margin:0 !important;
}

.toolbar-select-form .form-group,
.toolbar-select-form .input,
.toolbar-select-form .input.select{
  margin:0 !important;
  width:100%;
}

.toolbar-select-input,
.toolbar-actions-container .toolbar-select-input.form-select,
.toolbar-actions-container .toolbar-select-input.form-select-sm{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:39px !important;
  min-height:39px !important;
  line-height:1.2 !important;
  margin:0 !important;
}

.toolbar-add-btn,
.toolbar-add-btn.btn,
.toolbar-add-btn.btn-secondary,
.toolbar-add-btn.btn-sm,
.toolbar-actions-container .toolbar-add-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:39px !important;
  min-width:39px !important;
  height:39px !important;
  min-height:39px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  vertical-align:middle !important;
  flex:0 0 39px !important;
}

.toolbar-add-btn i{
  margin:0 !important;
  line-height:1 !important;
}

.toolbar-actions-container > .btn,
.toolbar-actions-container > a.btn{
  align-self:center;
}

.btn-action-responsive{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 10px;
  border-radius:6px;
  font-size:13px;
  font-weight:500;
  transition:all .2s;
  white-space:nowrap;
  flex-shrink:0;
}
.btn-action-responsive:hover{
  transform:translateY(-1px);
}

/* Cartes de contenu */
.content-card{
  background:var(--neutral-card);
  border-radius:12px;
  padding:32px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.03);
  min-height:500px;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

.welcome-section{
  text-align:center;
  padding:60px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
}
.welcome-icon{
  font-size:48px;
  width:80px;
  height:80px;
  line-height:80px;
  background:var(--primary-light);
  color:var(--primary-main);
  border-radius:50%;
  margin-bottom:24px;
}
.welcome-section h2{
  font-size:28px;
  margin-bottom:12px;
  font-weight:700;
}
.welcome-section p{
  font-size:16px;
  color:var(--text-secondary);
  max-width:550px;
  margin:0 auto;
  line-height:1.6;
}

/* Badges & sélecteurs */
.module-badge{
  display:inline-block;
  background:var(--primary-main);
  color:#fff;
  padding:6px 16px;
  border-radius:20px;
  font-weight:600;
  margin-top:24px;
  font-size:13px;
}

.exercice-select{
  appearance:none;
  -webkit-appearance:none;
  padding:10px 40px 10px 16px;
  min-width:100px;
  background:var(--select-exercice-bg,#e4f2f3);
  border:1px solid var(--border-color);
  border-radius:4px;
  font-size:13px;
  font-weight:500;
  color:var(--text-primary);
  line-height:.7;
  cursor:pointer;
  transition:.3s;
  margin-bottom:5px;
  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='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px;
}
.exercice-select:hover{
  border-color:var(--warning);
  background:var(--neutral-card);
}
.exercice-select:focus{
  outline:none;
  border-color:var(--warning);
  background:var(--neutral-card);
  box-shadow:0 0 0 3px rgba(212,160,23,.1);
}


/* ==========================================================================
   5) SECTIONS SPÉCIFIQUES
   ========================================================================== */

/* --- Formulaires --- */
.form-card{
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--border-dark);
  background:var(--neutral-card);
  max-width:var(--card-max-width);
  width:95%;
  margin:0 auto;
}
@media (min-width:576px){.form-card{width:92%}}
@media (min-width:992px){.form-card{width:85%}}
@media (min-width:1200px){.form-card{width:70%}}

.form-card-header{
  background:rgba(70,180,151,.06);
  padding:1rem 1.25rem;
  border-bottom:1px solid rgba(70,180,151,.15);
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}
.form-icon-box{
  width:36px;
  height:36px;
  background:#fff;
  border:1px solid rgba(70,180,151,.25);
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.form-icon-box i{
  font-size:16px;
  color:#379b82;
}
.form-card-header h5{
  font-weight:600;
  font-size:1.1rem;
  margin:0;
  color:var(--border-dark);
}
.form-card-header small{
  color:var(--text-secondary);
  font-size:.875rem;
  display:block;
}
.form-card-body{padding:var(--card-padding)}
.form-label{
  font-weight:500;
  color:var(--text-secondary);
  margin-bottom:.375rem;
  font-size:.875rem;
}
.form-control,.form-select{
  border:1px solid var(--border-color);
  border-radius:6px;
  padding:.5rem .75rem;
  font-size:.9375rem;
  transition:border-color .15s ease;
  width:100%;
}
.form-control:focus,.form-select:focus{
  border-color:var(--primary-main);
  box-shadow:none;
  outline:none;
}
textarea.form-control{resize:vertical}
.form-card-footer{
  background:var(--neutral-bg);
  padding:1rem 1.5rem;
  border-top:1px solid var(--border-color);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}
.btn{
  padding:.5rem 1.25rem;
  border-radius:6px;
  font-size:.9375rem;
  font-weight:500;
  transition:all .2s;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-outline-secondary{
  border-color:var(--text-secondary);
  color:var(--text-secondary);
  background:transparent;
}
.btn-outline-secondary:hover{
  background:var(--text-secondary);
  color:#fff;
}
.btn-success{
  background:var(--primary-main);
  border-color:var(--primary-main);
  color:#fff;
}
.btn-success:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
}
.row.g-3{row-gap:var(--row-gap)!important}
.row.g-2{row-gap:.4rem!important}

.form-compact .form-card-header,
.form-compact .form-card-footer{
  padding-top:.4rem;
  padding-bottom:.4rem;
}
.form-compact .form-card-body{
  padding-top:1rem;
  padding-bottom:1rem;
}
.form-compact .form-label{
  margin-bottom:.25rem;
}
.form-compact .form-control,
.form-compact .form-select{
  padding-top:.375rem;
  padding-bottom:.375rem;
  font-size:.9rem;
}
.form-compact .row.g-3{row-gap:.3rem!important}

.form-ultracompact .form-card-header,
.form-ultracompact .form-card-footer{
  padding:.5rem 1.25rem;
}
.form-ultracompact .form-card-body{
  padding:.75rem 1.25rem;
}
.form-ultracompact .form-label{
  font-size:.8rem;
  margin-bottom:.1rem;
  line-height:1.15;
  font-weight:700;
}
.form-ultracompact .form-control,
.form-ultracompact .form-select{
  padding:.4rem .75rem;
  font-size:.875rem;
  line-height:1.2;
}
.form-ultracompact .row.g-3,
.form-ultracompact .row.g-2{
  row-gap:.3rem!important;
}
.form-ultracompact .form-icon-box{
  width:32px;
  height:32px;
}
.form-ultracompact .form-icon-box i{font-size:14px}
.form-ultracompact .form-card-header h5{font-size:1rem}

/* --- Tableaux & DataTables --- */
.table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  display:block;
  touch-action:pan-x;
}

.table-card-body{
  padding:8px;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible;
  position:relative;
}

.table-card{
  background:var(--neutral-card);
  border:1px solid var(--border-color);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease-in-out;
}
.table-card-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-bottom:1px solid var(--border-color);
  background:var(--neutral-bg);
  min-width:0;
  max-width:100%;
}
.table-card-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:var(--text-primary);
  font-size:16px;
  margin-right:auto;
}
.table-card-title i{
  color:var(--primary-main);
  font-size:18px;
}
.table-card-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.table>:not(caption)>*>*{
  padding:.8rem;
  vertical-align:middle;
}
.table-card .thead-soft thead th{
  background:var(--neutral-bg);
  color:var(--text-primary);
  font-weight:bolder;
  border-bottom-width:1px;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:.5px;
}
.table-card tbody tr:hover{background-color:rgba(47,168,133,.08)}

.table-compact>:not(caption)>*>*{padding:.30rem .55rem}
.table-compact thead th{padding:.48rem .55rem;font-size:13px}
.table.table-striped.table-striped-soft{--bs-table-striped-bg:rgba(47,168,133,.06)}

#exemple{
  width:max-content !important;
  min-width:100% !important;
}
#exemple th,
#exemple td{
  white-space:nowrap;
}
#exemple th:nth-child(3),
#exemple td:nth-child(3){
  white-space:normal !important;
  word-break:break-word;
}
#exemple th,
#exemple td{
  min-width:100px;
}

.dataTables_wrapper{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
.dataTables_wrapper .row{
  max-width:100%;
  min-width:0;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  max-width:100%;
}


/* ==========================================================================
   6) RESPONSIVE DESIGN
   ========================================================================== */
@media (min-width:1920px){
  .sidebar{width:280px}
  .main-section{margin-left:280px}
  .main-section.expanded{margin-left:70px}
  .topbar-selects{max-width:900px}
}
@media (min-width:1200px){
  :root{--card-max-width:980px}
}
@media (max-width:1199.98px){
  :root{--card-max-width:920px}
}
@media (max-width:991.98px){
  :root{
    --card-max-width:720px;
    --card-padding:1.25rem;
  }

  .topbar{
    height:56px;
    padding:0 12px;
  }
  .app-layout{
    margin-top:56px;
    min-height:calc(100vh - 56px);
  }
  .sidebar{
    top:56px;
    transform:translateX(-100%);
    width:260px;
    box-shadow:2px 0 8px rgba(0,0,0,.15);
  }
  .sidebar.mobile-open{transform:translateX(0)}
  .main-section,
  .main-section.expanded{
    margin-left:0;
  }

  .topbar-right{margin-left:8px}
  .topbar-selects{gap:8px}
  .exercice-select{display:none}
  .main-content{padding:16px}
  .content-card{
    padding:20px;
    border-radius:8px;
  }

  .user-dropdown-trigger span{display:none}
  .user-dropdown-trigger{padding:6px}
  .user-dropdown-menu{
    right:-10px;
    min-width:240px;
  }

  .notifications-dropdown{
    width:340px;
    right:-10px;
  }

  .main-toolbar{
    padding:6px 12px;
    gap:6px;
  }
  .main-toolbar .toolbar-container{gap:6px}

  .toolbar-btn{
    padding:6px 10px;
    font-size:13px;
  }
  .toolbar-btn span{
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .dropdown-menu{min-width:200px}

  .exercice-select{display:block !important}

  .table th:nth-child(1),
  .table td:nth-child(1){
    display:none;
    width:auto;
  }
}

@media (max-width:768px){
  :root{--card-padding:1rem}

  .topbar-right{flex-shrink:0}

  .mobile-selects{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px 16px;
    background:var(--primary-dark);
    order:-1;
  }
  .mobile-selects select{
    width:100%;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:6px;
    background:rgba(255,255,255,.1);
    color:#fff;
  }

  .form-card-footer{
    flex-direction:column;
    align-items:stretch;
  }
  .btn{width:100%}

  .user-dropdown-menu{
    position:fixed;
    top:56px;
    right:10px;
    left:10px;
    min-width:auto;
    max-width:280px;
    margin-right:0;
    margin-left:auto;
  }

  .dropdown-header{padding:12px 16px}
  .dropdown-item{padding:10px 16px}

  .notifications-dropdown{
    position:fixed;
    top:56px;
    right:10px;
    left:10px;
    width:auto;
    max-width:calc(100vw - 20px);
    margin:0 auto;
  }

  .notification-item{padding:12px 16px}

  .main-toolbar{
    flex-direction:row;
    align-items:stretch;
    padding:6px 12px;
  }
  .main-toolbar .toolbar-container{
    flex-direction:row;
    align-items:center;
  }
  .main-toolbar .toolbar-container .toolbar-logo{margin:0}

  .toolbar-btn span{
    max-width:none;
    font-size:12px;
  }

  .dropdown-menu{
    position:static;
    width:100%;
    margin-top:4px;
    min-width:auto;
    max-height:300px;
    font-size:12px;
  }
  .dropdown-menu .dropdown-item{font-size:12px}

  .toolbar-actions-container{
    justify-content:flex-start;
    flex-wrap:wrap;
    width:100%;
  }

  .toolbar-select-add-group{
    width:100%;
    grid-template-columns:1fr 39px;
    margin-left:0;
  }

  .toolbar-select-form{
    width:100%;
    min-width:0;
  }

  .toolbar-select-input,
  .toolbar-actions-container .toolbar-select-input.form-select,
  .toolbar-actions-container .toolbar-select-input.form-select-sm{
    width:100% !important;
  }

  .btn.btn-sm{
    padding:8px 12px;
    font-size:13px;
  }

  .exercice-container{
    min-height:40px;
    align-items:center;
    display:inline-block;
    width:100%;
  }
  .exercice-badge{
    margin-left:auto;
    margin-right:auto;
    width:100%;
  }
  .exercice-badge .exercice-select{width:100%}

  .table th:nth-child(1),
  .table td:nth-child(1){
    display:none;
  }

  .actions-column{min-width:120px}
  .actions{
    display:flex;
    flex-wrap:nowrap;
    gap:5px;
    justify-content:center;
  }
  .actions a{
    padding:6px 8px;
    font-size:13px;
    min-width:36px;
    text-align:center;
  }
}

@media (max-width:576px){
  .main-toolbar{padding:6px}
  .toolbar-btn{
    font-size:12px;
    padding:8px 10px;
  }
  .toolbar-btn i{font-size:14px}
  .dropdown-item{
    padding:8px 12px;
    font-size:13px;
  }

  .actions{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .actions a{
    width:100%;
    text-align:center;
    padding:6px;
    font-size:13px;
  }

  .table th,
  .table td{
    padding:.5rem;
    font-size:13px;
  }

  .table-card-body{padding:10px 5px}

  .table th:nth-child(1),
  .table td:nth-child(1){
    display:none;
  }
}

@media (max-width:480px){
  .sidebar{max-width:280px}
  .main-content{padding:12px}
  .content-card{padding:16px}

  .user-dropdown-menu{
    right:5px;
    left:5px;
    max-width:calc(100vw - 10px);
  }

  .notifications-dropdown{
    right:5px;
    left:5px;
    max-width:calc(100vw - 10px);
  }

  .notifications-header{padding:12px 16px}
  .notification-content{gap:10px}
  .notification-icon{
    width:32px;
    height:32px;
    font-size:13px;
  }
}

@media (max-width:375px){
  .toolbar-btn span{font-size:11px}
  .toolbar-btn i{font-size:12px}

  .table th:nth-child(1),
  .table td:nth-child(1){
    display:none;
  }
}

@media (hover:none) and (pointer:coarse){
  .toolbar-btn{
    min-height:44px;
    padding:10px 14px;
  }

  .dropdown-item{
    min-height:44px;
    padding:12px 16px;
  }

  .toolbar-btn::after{
    content:'';
    position:absolute;
    top:-8px;
    right:-8px;
    bottom:-8px;
    left:-8px;
  }
}


/* ==========================================================================
   7) HARMONISATION VUE-MULTISELECT / SELECT2
   ========================================================================== */
.multiselect{
  font-family:inherit;
  width:100%;
  position:relative;
}
.multiselect__tags{
  min-height:38px;
  padding:.4rem .75rem;
  border:1px solid var(--border-color);
  border-radius:6px;
  background:#fff;
  box-shadow:none;
  display:flex;
  align-items:center;
  gap:.35rem;
  transition:border-color .15s,box-shadow .15s;
}
.multiselect__placeholder,
.multiselect__single{
  margin:0;
  padding:0;
  line-height:1.2;
  font-size:.9375rem;
  color:var(--text-secondary);
}
.multiselect__input{
  margin:0;
  padding:0;
  height:24px;
  line-height:24px;
  font-size:.9375rem;
}
.multiselect--active .multiselect__tags,
.multiselect:focus-within .multiselect__tags{
  border-color:var(--primary-main);
  box-shadow:0 0 0 3px var(--ring-focus);
}
.multiselect__select{
  height:100%;
  width:36px;
}
.multiselect__select:before{
  border-color:var(--text-secondary) transparent transparent transparent;
}
.multiselect__content-wrapper{
  border:1px solid var(--border-color);
  border-radius:8px;
  box-shadow:var(--shadow-md);
  margin-top:6px;
  z-index:2005;
  background:var(--neutral-card);
}
.multiselect__option{
  padding:.5rem .75rem;
  font-size:.9375rem;
  color:var(--text-primary);
  transition:background-color .12s;
}
.multiselect__option--highlight{
  background:var(--primary-light);
  color:var(--primary-dark);
}
.multiselect__option--selected{
  background:rgba(0,0,0,.035);
  color:var(--text-primary);
}
.multiselect__tag{
  background:rgba(0,0,0,.06);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  border-radius:6px;
  padding:.15rem .45rem;
  font-size:.85rem;
  font-weight:500;
}
.multiselect__tag-icon:after{color:var(--text-secondary)}
.multiselect__tag-icon:focus,
.multiselect__tag-icon:hover{
  background:rgba(0,0,0,.08);
}
.multiselect--disabled .multiselect__tags{
  background:#f8f9fa;
  color:var(--text-secondary);
  opacity:.8;
}
.form-ultracompact .multiselect__tags{
  min-height:34px;
  padding:.3rem .6rem;
}
.form-ultracompact .multiselect__option{
  padding:.4rem .6rem;
  font-size:.875rem;
}

.select2-container .select2-dropdown{z-index:2005}


/* ==========================================================================
   8) LABELS & FORM HELP
   ========================================================================== */
.form-label,
label.form-label,
.form-card .form-label{
  display:inline-block;
  font-weight:600;
  color:var(--text-secondary);
  font-size:.9rem;
  line-height:1.25;
  margin-bottom:.35rem;
}
.form-ultracompact .form-label{
  font-size:.85rem;
  margin-bottom:.25rem;
}
.form-label.label-colon::after{content:' :'}
.form-label .req{
  color:var(--danger);
  margin-left:.2rem;
  font-weight:700;
}
.form-label .opt{
  margin-left:.35rem;
  padding:.05rem .35rem;
  border-radius:.35rem;
  background:rgba(0,0,0,.05);
  color:var(--text-secondary);
  font-size:.75rem;
  font-weight:600;
}
label + .multiselect,
label + .form-control,
label + .form-select{
  margin-top:0;
}
.multiselect__tags,
.form-control,
.form-select{
  min-height:38px;
}
.is-invalid,
.multiselect.is-invalid .multiselect__tags{
  border-color:var(--danger)!important;
  box-shadow:0 0 0 3px rgba(178,77,77,.08)!important;
}
.form-help{
  display:block;
  margin-top:.25rem;
  color:var(--text-secondary);
  font-size:.8rem;
}
.form-card .row [class*="col-"]{
  display:flex;
  flex-direction:column;
}

/* Flash messages */
.message{
  padding:.5rem 1rem;
  background:var(--color-message-info-bg);
  color:var(--color-message-info-text);
  border-color:var(--color-message-info-border);
  border-width:1px;
  border-style:solid;
  border-radius:4px;
  margin-bottom:1rem;
  cursor:pointer;
}
.message.hidden{display:none}
.message.success{
  background:var(--color-message-success-bg);
  color:var(--color-message-success-text);
  border-color:var(--color-message-success-border);
}
.message.warning{
  background:var(--color-message-warning-bg);
  color:var(--color-message-warning-text);
  border-color:var(--color-message-warning-border);
}
.message.error{
  background:var(--color-message-error-bg);
  color:var(--color-message-error-text);
  border-color:var(--color-message-error-border);
}


/* ==========================================================================
   9) STYLES SPÉCIFIQUES AU TABLEAU #EXEMPLE
   ========================================================================== */
#exemple .btn{
  padding:.15rem .4rem !important;
  font-size:.78rem !important;
  line-height:1.1 !important;
}
#exemple .btn i{font-size:.9em}

#exemple td:last-child,
#exemple td:nth-child(5){
  padding-top:.35rem !important;
  padding-bottom:.35rem !important;
  vertical-align:middle;
}

#exemple .action-icons{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  flex-wrap:nowrap;
}

#exemple .btn-icon{
  width:34px;
  height:34px;
  padding:0 !important;
  border:0 !important;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
#exemple .btn-icon i{
  font-size:14px;
  line-height:1;
}

#exemple .btn-icon--view{
  background:rgba(59,130,246,.14);
  color:#1d4ed8;
}
#exemple .btn-icon--edit{
  background:rgba(16,185,129,.16);
  color:#047857;
}
#exemple .btn-icon--delete{
  background:rgba(239,68,68,.16);
  color:#b91c1c;
}

#exemple .btn-icon:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  filter:brightness(.98);
}
#exemple .btn-icon:focus{outline:none}
#exemple .btn-icon:focus-visible{
  box-shadow:0 0 0 3px rgba(47,168,133,.25),0 6px 14px rgba(0,0,0,.08);
}

#exemple .btn-show-indics{
  min-width:38px;
  justify-content:center;
  font-weight:700;
  padding:.18rem .42rem !important;
  font-size:.78rem !important;
  line-height:1.1 !important;
  border-radius:.45rem !important;
}
#exemple .btn-add-indic{
  padding:.18rem .42rem !important;
  font-size:.78rem !important;
  line-height:1.1 !important;
  border-radius:.45rem !important;
}

#exemple .indic-icons{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:nowrap;
}

#exemple .btn-icon--count{
  background:rgba(100,116,139,.16);
  color:#334155;
  font-weight:800;
  font-size:13px;
}
#exemple .btn-icon--indics{
  background:rgba(59,130,246,.14);
  color:#1d4ed8;
}
#exemple .btn-icon--add{
  background:rgba(16,185,129,.16);
  color:#047857;
}

#exemple thead th,
#exemple tbody td{
  padding-top:.35rem !important;
  padding-bottom:.35rem !important;
  padding-left:.5rem !important;
  padding-right:.5rem !important;
  line-height:1.15 !important;
}
#exemple thead th{
  padding-top:.4rem !important;
  padding-bottom:.4rem !important;
}
#exemple.table-sm thead th,
#exemple.table-sm tbody td{
  padding-top:.5rem !important;
  padding-bottom:.5rem !important;
}