/* ==========================================================
   CMS AKONO
   ADMIN.CSS
   Version 3.0 Premium
   Partie 1 : Variables + Reset + Structure
   ========================================================== */

/* ==========================================================
   VARIABLES
   ========================================================== */

:root {

    --primary: #0F4C81;
    --primary-dark: #0A3559;

    --secondary: #D4AF37;

    --success: #28a745;

    --danger: #dc3545;

    --warning: #ffc107;

    --info: #17a2b8;

    --white: #ffffff;

    --light: #f8f9fa;

    --gray: #6c757d;

    --dark: #212529;

    --border: #e5e7eb;

    --shadow: 0 8px 25px rgba(0, 0, 0, .08);

    --radius: 14px;

    --sidebar-width: 280px;

    --topbar-height: 80px;

    --transition: .30s ease;

}


/* ==========================================================
   RESET
   ========================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Poppins', sans-serif;

    background: #f5f7fb;

    color: #333;

    overflow-x: hidden;

}


/* ==========================================================
   LIENS
   ========================================================== */

a {

    text-decoration: none;

    transition: var(--transition);

}

a:hover {

    text-decoration: none;

}


/* ==========================================================
   LISTES
   ========================================================== */

ul {

    list-style: none;

    margin: 0;

    padding: 0;

}


/* ==========================================================
   IMAGES
   ========================================================== */

img {

    max-width: 100%;

    display: block;

}


/* ==========================================================
   ADMIN WRAPPER
   ========================================================== */

.admin-wrapper {

    display: flex;

    min-height: 100vh;

    width: 100%;

}


/* ==========================================================
   CONTENU PRINCIPAL
   ========================================================== */

.ak-content {

    flex: 1;

    margin-left: var(--sidebar-width);

    padding: 100px 35px 35px;

    min-height: 100vh;

    background: #f5f7fb;

    transition: var(--transition);

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.container-fluid {

    width: 100%;

}


/* ==========================================================
   SECTIONS
   ========================================================== */

.dashboard-section {

    margin-bottom: 30px;

}


/* ==========================================================
   CARTES
   ========================================================== */

.ak-card {

    background: var(--white);

    border-radius: var(--radius);

    padding: 25px;

    box-shadow: var(--shadow);

    border: 1px solid var(--border);

}


/* ==========================================================
   TITRES
   ========================================================== */

.dashboard-title {

    font-size: 24px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 20px;

}

.ak-card h2 {

    color: var(--primary);

    font-size: 24px;

    margin-bottom: 20px;

}

.ak-card h3 {

    color: var(--primary);

    font-size: 20px;

    margin-bottom: 15px;

}


/* ==========================================================
   PARAGRAPHES
   ========================================================== */

p {

    color: #555;

    line-height: 1.7;

}


/* ==========================================================
   ESPACEMENTS
   ========================================================== */

.mb-10 {

    margin-bottom: 10px;

}

.mb-20 {

    margin-bottom: 20px;

}

.mb-30 {

    margin-bottom: 30px;

}

.mt-20 {

    margin-top: 20px;

}

.mt-30 {

    margin-top: 30px;

}
/* ==========================================================
   PARTIE 2
   SIDEBAR PREMIUM
   ========================================================== */

.ak-sidebar {

    position: fixed;

    top: 0;

    left: 0;

    width: var(--sidebar-width);

    height: 100vh;

    background: linear-gradient(180deg, #0F4C81, #0A3559);

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow-y: auto;

    z-index: 1000;

    box-shadow: 4px 0 20px rgba(0, 0, 0, .15);

}

/* ==========================================================
   LOGO
   ========================================================== */

.sidebar-logo {

    padding: 30px 20px;

    text-align: center;

    border-bottom: 1px solid rgba(255, 255, 255, .12);

}

.sidebar-logo img {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: #fff;

    padding: 6px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);

}

.sidebar-logo h2 {

    margin-top: 18px;

    color: #fff;

    font-size: 22px;

    font-weight: 700;

}

.sidebar-logo span {

    display: block;

    margin-top: 6px;

    color: rgba(255, 255, 255, .75);

    font-size: 13px;

}

/* ==========================================================
   MENU
   ========================================================== */

.sidebar-menu {

    flex: 1;

    padding: 20px 0;

}

.sidebar-menu ul {

    padding: 0;

    margin: 0;

}

.sidebar-menu li {

    margin: 5px 12px;

}

.sidebar-menu a {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 14px 18px;

    border-radius: 12px;

    color: #fff;

    font-size: 15px;

    font-weight: 500;

    transition: all .30s ease;

}

.sidebar-menu a i {

    width: 22px;

    text-align: center;

    font-size: 18px;

}

/* ==========================================================
   SURVOL
   ========================================================== */

.sidebar-menu a:hover {

    background: rgba(255, 255, 255, .12);

    transform: translateX(6px);

}

/* ==========================================================
   LIEN ACTIF
   ========================================================== */

.sidebar-menu a.active {

    background: #D4AF37;

    color: #0F4C81;

    font-weight: 700;

    box-shadow: 0 10px 25px rgba(212, 175, 55, .35);

}

.sidebar-menu a.active i {

    color: #0F4C81;

}

/* ==========================================================
   FOOTER
   ========================================================== */

.sidebar-footer {

    padding: 20px;

    border-top: 1px solid rgba(255, 255, 255, .12);

}

.logout-btn {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 14px;

    border-radius: 12px;

    background: #dc3545;

    color: #fff;

    font-weight: 600;

    transition: .3s;

}

.logout-btn:hover {

    background: #bb2d3b;

    color: #fff;

}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

.ak-sidebar::-webkit-scrollbar {

    width: 8px;

}

.ak-sidebar::-webkit-scrollbar-track {

    background: transparent;

}

.ak-sidebar::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, .25);

    border-radius: 20px;

}

.ak-sidebar::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, .45);

}
/* ==========================================================
   PARTIE 3
   TOPBAR PREMIUM
   ========================================================== */

.ak-topbar {

    position: fixed;

    top: 0;

    left: var(--sidebar-width);

    right: 0;

    height: var(--topbar-height);

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 35px;

    border-bottom: 1px solid var(--border);

    box-shadow: 0 3px 12px rgba(0, 0, 0, .05);

    z-index: 900;

}

/* ==========================================================
   CÔTÉ GAUCHE
   ========================================================== */

.topbar-left {

    display: flex;

    align-items: center;

    gap: 20px;

}

.topbar-title {

    font-size: 24px;

    font-weight: 700;

    color: var(--primary);

    margin: 0;

}

.topbar-subtitle {

    display: block;

    font-size: 13px;

    color: var(--gray);

    margin-top: 2px;

}

/* ==========================================================
   CÔTÉ DROIT
   ========================================================== */

.topbar-right {

    display: flex;

    align-items: center;

    gap: 20px;

}
.topbar-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 15px;

    color: #555;

}

.topbar-user {

    display: flex;

    align-items: center;

    gap: 12px;

}

.topbar-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

}

.topbar-user-info {

    display: flex;

    flex-direction: column;

    line-height: 1.25;

}

.topbar-user-info strong {

    font-size: 15px;

    color: #222;

}

.topbar-user-info small {

    font-size: 12px;

    color: #777;

}

/* ==========================================================
   DATE ET HEURE
   ========================================================== */

.topbar-date {

    text-align: right;

}

.topbar-date .date {

    display: block;

    font-size: 14px;

    font-weight: 600;

    color: var(--dark);

}

.topbar-date .time {

    display: block;

    font-size: 13px;

    color: var(--gray);

}

/* ==========================================================
   PROFIL UTILISATEUR
   ========================================================== */

.user-box {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 15px;

    border-radius: 50px;

    background: #f5f7fb;

    transition: .3s;

    cursor: pointer;

}

.user-box:hover {

    background: #eef3fa;

}

.user-avatar {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    overflow: hidden;

    border: 2px solid var(--secondary);

}

.user-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.user-info {

    display: flex;

    flex-direction: column;

}

.user-name {

    font-size: 15px;

    font-weight: 700;

    color: var(--primary);

}

.user-role {

    font-size: 12px;

    color: var(--gray);

}

/* ==========================================================
   NOTIFICATIONS
   ========================================================== */

.notification-btn {

    position: relative;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f5f7fb;

    color: var(--primary);

    font-size: 18px;

    transition: .3s;

    cursor: pointer;

}

.notification-btn:hover {

    background: var(--primary);

    color: #fff;

}

.notification-count {

    position: absolute;

    top: 4px;

    right: 4px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--danger);

    color: #fff;

    font-size: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

}

/* ==========================================================
   BOUTON MENU MOBILE
   ========================================================== */

.menu-toggle {

    display: none;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 10px;

    background: var(--primary);

    color: #fff;

    font-size: 20px;

    cursor: pointer;

    transition: .3s;

}

.menu-toggle:hover {

    background: var(--primary-dark);

}

/* ==========================================================
   CHAMP DE RECHERCHE
   ========================================================== */

.topbar-search {

    position: relative;

    width: 320px;

}

.topbar-search input {

    width: 100%;

    height: 46px;

    border: 1px solid var(--border);

    border-radius: 30px;

    padding: 0 18px 0 45px;

    outline: none;

    background: #f8f9fb;

    transition: .3s;

}

.topbar-search input:focus {

    border-color: var(--primary);

    background: #fff;

    box-shadow: 0 0 0 3px rgba(15, 76, 129, .08);

}

.topbar-search i {

    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--gray);

}

/* ==========================================================
   BOUTONS RAPIDES
   ========================================================== */

.quick-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}

.quick-actions a {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f5f7fb;

    color: var(--primary);

    transition: .3s;

}

.quick-actions a:hover {

    background: var(--primary);

    color: #fff;

}
/* ==========================================================
   PARTIE 4
   DASHBOARD PREMIUM
   ========================================================== */

/* ==========================================================
   GRILLE PRINCIPALE
   ========================================================== */

.dashboard-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 25px;

    margin-bottom: 30px;

}

/* ==========================================================
   CARTES STATISTIQUES
   ========================================================== */

.stat-card {

    background: #fff;

    border-radius: 18px;

    padding: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: var(--shadow);

    border: 1px solid var(--border);

    transition: .3s;

}

.stat-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 35px rgba(0, 0, 0, .10);

}

.stat-content {

    flex: 1;

}

.stat-title {

    font-size: 14px;

    color: var(--gray);

    margin-bottom: 8px;

    text-transform: uppercase;

    letter-spacing: .5px;

}

.stat-number {

    font-size: 34px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 8px;

}

.stat-text {

    font-size: 13px;

    color: var(--success);

    font-weight: 600;

}

.stat-icon {

    width: 75px;

    height: 75px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    color: #fff;

}

.bg-primary {

    background: linear-gradient(135deg, #0F4C81, #1976d2);

}

.bg-success {

    background: linear-gradient(135deg, #28a745, #5cb85c);

}

.bg-warning {

    background: linear-gradient(135deg, #ffc107, #ff9800);

}

.bg-danger {

    background: linear-gradient(135deg, #dc3545, #ff5f6d);

}

.bg-info {

    background: linear-gradient(135deg, #17a2b8, #00c6ff);

}

/* ==========================================================
   WIDGETS
   ========================================================== */

.widget-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 25px;

    margin-bottom: 30px;

}

.widget {

    background: #fff;

    border-radius: 18px;

    padding: 25px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

}

.widget-title {

    font-size: 20px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 20px;

}

/* ==========================================================
   ACTIVITÉS RÉCENTES
   ========================================================== */

.activity-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.activity-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 18px;

    border-bottom: 1px solid #eee;

}

.activity-item:last-child {

    border: none;

    padding-bottom: 0;

}

.activity-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef4fb;

    color: var(--primary);

    font-size: 20px;

}

.activity-content {

    flex: 1;

}

.activity-title {

    font-size: 15px;

    font-weight: 600;

    color: var(--dark);

}

.activity-time {

    font-size: 12px;

    color: var(--gray);

}

/* ==========================================================
   RACCOURCIS
   ========================================================== */

.quick-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

}

.quick-card {

    background: #f8f9fa;

    border-radius: 15px;

    padding: 22px;

    text-align: center;

    transition: .3s;

    cursor: pointer;

}

.quick-card:hover {

    background: var(--primary);

    transform: translateY(-5px);

}

.quick-card:hover i,

.quick-card:hover h4,

.quick-card:hover p {

    color: #fff;

}

.quick-card i {

    font-size: 32px;

    color: var(--primary);

    margin-bottom: 12px;

}

.quick-card h4 {

    font-size: 16px;

    color: var(--dark);

    margin-bottom: 6px;

}

.quick-card p {

    font-size: 13px;

    color: var(--gray);

}

/* ==========================================================
   BARRE DE PROGRESSION
   ========================================================== */

.progress-box {

    margin-top: 20px;

}

.progress-label {

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

}

.progress {

    width: 100%;

    height: 10px;

    border-radius: 10px;

    background: #e9ecef;

    overflow: hidden;

}

.progress-bar {

    height: 100%;

    background: linear-gradient(90deg, #0F4C81, #D4AF37);

    border-radius: 10px;

}

/* ==========================================================
   TABLEAU DE BORD INFOS
   ========================================================== */

.info-box {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px;

    border-radius: 15px;

    background: #f8f9fb;

    margin-bottom: 15px;

}

.info-box:last-child {

    margin-bottom: 0;

}

.info-left {

    display: flex;

    align-items: center;

    gap: 15px;

}

.info-left i {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: #eef4fb;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}

.info-title {

    font-weight: 600;

    color: var(--dark);

}

.info-value {

    font-size: 20px;

    font-weight: 700;

    color: var(--primary);

}

/* ==========================================================
   GRAPHIQUE
   ========================================================== */

.chart-container {

    width: 100%;

    min-height: 350px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.chart-placeholder {

    color: #999;

    font-size: 15px;

    text-align: center;

}
/* ==========================================================
   PARTIE 5
   WIDGETS PREMIUM - TIMELINE - PANELS
   ========================================================== */


/*==========================================================
  SECTION
==========================================================*/

.section-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}

.section-title h2 {

    font-size: 24px;

    color: var(--primary);

    font-weight: 700;

}

.section-title p {

    color: #777;

    font-size: 14px;

}


/*==========================================================
  ACTION CARD
==========================================================*/

.action-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;

}

.action-card {

    background: #fff;

    border-radius: 18px;

    padding: 30px;

    text-align: center;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    transition: .35s;

}

.action-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);

}

.action-card i {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto;

    font-size: 34px;

    color: #fff;

    margin-bottom: 20px;

    background: linear-gradient(135deg, #0F4C81, #1976d2);

}

.action-card h3 {

    font-size: 20px;

    color: var(--primary);

    margin-bottom: 10px;

}

.action-card p {

    font-size: 14px;

    color: #666;

    margin-bottom: 20px;

}


/*==========================================================
  MINI WIDGETS
==========================================================*/

.mini-widget-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 18px;

}

.mini-widget {

    background: #fff;

    border-radius: 16px;

    padding: 20px;

    text-align: center;

    border: 1px solid var(--border);

    transition: .3s;

}

.mini-widget:hover {

    transform: translateY(-6px);

}

.mini-widget i {

    font-size: 28px;

    color: var(--secondary);

    margin-bottom: 10px;

}

.mini-widget h4 {

    font-size: 26px;

    color: var(--primary);

    margin-bottom: 5px;

}

.mini-widget span {

    color: #777;

    font-size: 13px;

}


/*==========================================================
  TIMELINE
==========================================================*/

.timeline {

    position: relative;

    margin-top: 20px;

    padding-left: 30px;

}

.timeline::before {

    content: "";

    position: absolute;

    left: 8px;

    top: 0;

    bottom: 0;

    width: 3px;

    background: #d7d7d7;

}

.timeline-item {

    position: relative;

    margin-bottom: 30px;

}

.timeline-item:last-child {

    margin-bottom: 0;

}

.timeline-dot {

    position: absolute;

    left: -30px;

    top: 3px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--secondary);

    border: 4px solid #fff;

    box-shadow: 0 0 0 3px rgba(212, 175, 55, .3);

}

.timeline-content {

    background: #fff;

    border-radius: 15px;

    padding: 18px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

}

.timeline-content h4 {

    color: var(--primary);

    margin-bottom: 8px;

}

.timeline-content p {

    font-size: 14px;

    color: #666;

}

.timeline-date {

    display: inline-block;

    margin-top: 10px;

    font-size: 12px;

    color: #999;

}


/*==========================================================
  PANELS
==========================================================*/

.panel {

    background: #fff;

    border-radius: 18px;

    padding: 25px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

}

.panel-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.panel-header h3 {

    color: var(--primary);

    font-size: 20px;

}

.panel-tools {

    display: flex;

    gap: 10px;

}

.panel-tools button {

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    background: #f4f4f4;

    transition: .3s;

}

.panel-tools button:hover {

    background: var(--primary);

    color: #fff;

}


/*==========================================================
  ANNONCES
==========================================================*/

.notice {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 18px;

    border-radius: 15px;

    margin-bottom: 15px;

}

.notice:last-child {

    margin-bottom: 0;

}

.notice i {

    font-size: 26px;

}

.notice-success {

    background: #eaf8ef;

    color: #28a745;

}

.notice-warning {

    background: #fff8e6;

    color: #ff9800;

}

.notice-danger {

    background: #fdeaea;

    color: #dc3545;

}

.notice-info {

    background: #eaf6fc;

    color: #17a2b8;

}


/*==========================================================
  ETAT SERVEUR
==========================================================*/

.server-status {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;

}

.server-card {

    background: #fff;

    border-radius: 15px;

    padding: 20px;

    border: 1px solid var(--border);

    text-align: center;

}

.server-card h5 {

    color: #666;

    margin-bottom: 10px;

}

.server-value {

    font-size: 32px;

    font-weight: 700;

    color: var(--primary);

}


/*==========================================================
  BADGE ETAT
==========================================================*/

.status-online {

    color: #28a745;

    font-weight: 700;

}

.status-offline {

    color: #dc3545;

    font-weight: 700;

}

.status-warning {

    color: #ff9800;

    font-weight: 700;

}


/*==========================================================
  DIVIDER
==========================================================*/

.divider {

    width: 100%;

    height: 1px;

    background: #ececec;

    margin: 30px 0;

}


/*==========================================================
  HOVER GENERAL
==========================================================*/

.hover-lift {

    transition: .35s;

}

.hover-lift:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);

}
/* ==========================================================
   PARTIE 6
   FORMULAIRES PREMIUM
   ========================================================== */

/* ==========================================================
   CONTENEUR FORMULAIRE
   ========================================================== */

.form-container {

    background: #fff;

    border-radius: 18px;

    padding: 35px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    margin-bottom: 30px;

}

/* ==========================================================
   TITRE
   ========================================================== */

.form-title {

    font-size: 24px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 8px;

}

.form-subtitle {

    color: #777;

    margin-bottom: 30px;

}

/* ==========================================================
   GRILLE
   ========================================================== */

.form-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 25px;

}

/* ==========================================================
   GROUPES
   ========================================================== */

.form-group {

    display: flex;

    flex-direction: column;

    margin-bottom: 22px;

}

.form-group.full {

    grid-column: 1/-1;

}

/* ==========================================================
   LABEL
   ========================================================== */

.form-group label {

    font-size: 14px;

    font-weight: 600;

    color: var(--dark);

    margin-bottom: 8px;

}

/* ==========================================================
   INPUT
   ========================================================== */

.form-control {

    width: 100%;

    height: 50px;

    border: 1px solid #dcdcdc;

    border-radius: 12px;

    padding: 0 15px;

    font-size: 15px;

    background: #fff;

    transition: .3s;

}

.form-control:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(15, 76, 129, .08);

}

/* ==========================================================
   TEXTAREA
   ========================================================== */

textarea.form-control {

    height: 170px;

    resize: vertical;

    padding: 15px;

}

/* ==========================================================
   SELECT
   ========================================================== */

select.form-control {

    cursor: pointer;

}

/* ==========================================================
   INPUT FILE
   ========================================================== */

input[type=file].form-control {

    padding: 10px;

    height: auto;

}

/* ==========================================================
   CHECKBOX
   ========================================================== */

.checkbox-group {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 10px;

}

.checkbox-group input {

    width: 18px;

    height: 18px;

}

/* ==========================================================
   RADIO
   ========================================================== */

.radio-group {

    display: flex;

    gap: 20px;

    margin-top: 10px;

}

.radio-group label {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

}

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

.form-actions {

    display: flex;

    justify-content: flex-end;

    gap: 15px;

    margin-top: 35px;

}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 24px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    font-size: 15px;

    font-weight: 600;

    transition: .3s;

}

.btn-primary {

    background: var(--primary);

    color: #fff;

}

.btn-primary:hover {

    background: var(--primary-dark);

}

.btn-success {

    background: var(--success);

    color: #fff;

}

.btn-success:hover {

    opacity: .9;

}

.btn-danger {

    background: var(--danger);

    color: #fff;

}

.btn-danger:hover {

    opacity: .9;

}

.btn-warning {

    background: var(--warning);

    color: #212529;

}

.btn-warning:hover {

    opacity: .9;

}

.btn-light {

    background: #eef2f7;

    color: var(--dark);

}

.btn-light:hover {

    background: #dde5ef;

}

/* ==========================================================
   AIDE
   ========================================================== */

.form-help {

    margin-top: 6px;

    font-size: 12px;

    color: #888;

}

/* ==========================================================
   MESSAGE ERREUR
   ========================================================== */

.input-error {

    border-color: var(--danger) !important;

}

.error-text {

    color: var(--danger);

    font-size: 12px;

    margin-top: 6px;

}

/* ==========================================================
   MESSAGE SUCCÈS
   ========================================================== */

.input-success {

    border-color: var(--success) !important;

}

/* ==========================================================
   UPLOAD IMAGE
   ========================================================== */

.upload-box {

    border: 2px dashed #cfd8dc;

    border-radius: 15px;

    padding: 40px;

    text-align: center;

    background: #fafafa;

    transition: .3s;

    cursor: pointer;

}

.upload-box:hover {

    border-color: var(--primary);

    background: #f4f9ff;

}

.upload-box i {

    font-size: 48px;

    color: var(--primary);

    margin-bottom: 15px;

}

.upload-box p {

    color: #666;

    margin: 0;

}

/* ==========================================================
   APERÇU IMAGE
   ========================================================== */

.image-preview {

    margin-top: 20px;

    text-align: center;

}

.image-preview img {

    max-width: 220px;

    border-radius: 15px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

}

/* ==========================================================
   CHAMPS OBLIGATOIRES
   ========================================================== */

.required {

    color: var(--danger);

    margin-left: 4px;

}

/* ==========================================================
   BLOCS
   ========================================================== */

.form-section {

    margin-bottom: 35px;

    padding-bottom: 25px;

    border-bottom: 1px solid #ececec;

}

.form-section:last-child {

    border: none;

    margin-bottom: 0;

    padding-bottom: 0;

}

.form-section h3 {

    color: var(--primary);

    margin-bottom: 20px;

    font-size: 18px;

}
/* ==========================================================
   PARTIE 7
   TABLES INTELLIGENTES
   ========================================================== */

/*==========================================================
  BARRE D'OUTILS
==========================================================*/

.table-toolbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 25px;

}

.table-title {

    font-size: 24px;

    font-weight: 700;

    color: var(--primary);

}

.table-tools {

    display: flex;

    gap: 15px;

    align-items: center;

}

/*==========================================================
  RECHERCHE
==========================================================*/

.search-box {

    position: relative;

    width: 320px;

}

.search-box input {

    width: 100%;

    height: 48px;

    border: 1px solid var(--border);

    border-radius: 30px;

    padding: 0 18px 0 48px;

    background: #fff;

    transition: .3s;

}

.search-box input:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(15, 76, 129, .08);

}

.search-box i {

    position: absolute;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: #999;

}

/*==========================================================
  TABLE CONTAINER
==========================================================*/

.table-container {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

}

/*==========================================================
  TABLE
==========================================================*/

.ak-table {

    width: 100%;

    border-collapse: collapse;

}

.ak-table thead {

    background: var(--primary);

}

.ak-table thead th {

    color: #fff;

    padding: 18px;

    text-align: left;

    font-size: 14px;

    font-weight: 600;

}

.ak-table tbody tr {

    transition: .25s;

    border-bottom: 1px solid #ececec;

}

.ak-table tbody tr:hover {

    background: #f8fbff;

}

.ak-table tbody td {

    padding: 16px 18px;

    font-size: 14px;

    color: #444;

    vertical-align: middle;

}

.ak-table tbody tr:last-child {

    border-bottom: none;

}

/*==========================================================
  IMAGE
==========================================================*/

.table-image {

    width: 60px;

    height: 60px;

    border-radius: 12px;

    object-fit: cover;

    border: 1px solid #ddd;

}

/*==========================================================
  BADGES
==========================================================*/

.badge {

    display: inline-block;

    padding: 6px 14px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: 700;

}

.badge-success {

    background: #dff6e5;

    color: #28a745;

}

.badge-danger {

    background: #fde8e8;

    color: #dc3545;

}

.badge-warning {

    background: #fff5d8;

    color: #ff9800;

}

.badge-info {

    background: #e7f5fb;

    color: #17a2b8;

}

.badge-primary {

    background: #e8eef8;

    color: var(--primary);

}

/*==========================================================
  ACTIONS
==========================================================*/

.table-actions {

    display: flex;

    gap: 10px;

}

.btn-icon {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: .3s;

    color: #fff;

}

.btn-view {

    background: #17a2b8;

}

.btn-edit {

    background: #ffc107;

    color: #222;

}

.btn-delete {

    background: #dc3545;

}

.btn-view:hover {

    transform: scale(1.08);

}

.btn-edit:hover {

    transform: scale(1.08);

}

.btn-delete:hover {

    transform: scale(1.08);

}

/*==========================================================
  PAGINATION
==========================================================*/

.pagination {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 25px;

}

.pagination a {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    background: #fff;

    border: 1px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-weight: 600;

    transition: .3s;

}

.pagination a:hover {

    background: var(--primary);

    color: #fff;

}

.pagination a.active {

    background: var(--primary);

    color: #fff;

}

/*==========================================================
  LIGNES VIDES
==========================================================*/

.empty-table {

    text-align: center;

    padding: 60px 20px;

}

.empty-table i {

    font-size: 60px;

    color: #c8c8c8;

    margin-bottom: 20px;

}

.empty-table h3 {

    color: #666;

    margin-bottom: 10px;

}

.empty-table p {

    color: #999;

}

/*==========================================================
  TRI
==========================================================*/

.sort-link {

    color: #fff;

    display: flex;

    align-items: center;

    gap: 8px;

}

.sort-link:hover {

    color: #D4AF37;

}

/*==========================================================
  NOMBRE D'ÉLÉMENTS
==========================================================*/

.table-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

    color: #666;

    font-size: 14px;

}

/*==========================================================
  HIGHLIGHT
==========================================================*/

.highlight {

    background: #fff7d6;

    padding: 2px 5px;

    border-radius: 4px;

}

/*==========================================================
  MENU D'ACTIONS
==========================================================*/

.dropdown-actions {

    position: relative;

}

.dropdown-menu {

    position: absolute;

    top: 45px;

    right: 0;

    min-width: 180px;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);

    border: 1px solid var(--border);

    display: none;

    overflow: hidden;

    z-index: 100;

}

.dropdown-menu a {

    display: block;

    padding: 14px 18px;

    color: #444;

    transition: .25s;

}

.dropdown-menu a:hover {

    background: #f5f7fb;

    color: var(--primary);

}

.dropdown-actions:hover .dropdown-menu {

    display: block;

}
/* ==========================================================
   PARTIE 8
   COMPOSANTS PREMIUM
   Alertes - Notifications - Modales - Boutons
   ========================================================== */


/*==========================================================
  ALERTES
==========================================================*/

.alert {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px 22px;

    border-radius: 14px;

    margin-bottom: 20px;

    border-left: 5px solid transparent;

}

.alert i {

    font-size: 24px;

}

.alert-success {

    background: #eaf8ef;

    color: #28a745;

    border-color: #28a745;

}

.alert-danger {

    background: #fdecec;

    color: #dc3545;

    border-color: #dc3545;

}

.alert-warning {

    background: #fff7df;

    color: #ff9800;

    border-color: #ff9800;

}

.alert-info {

    background: #e8f6fb;

    color: #17a2b8;

    border-color: #17a2b8;

}


/*==========================================================
  NOTIFICATIONS
==========================================================*/

.notification {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px;

    border-radius: 15px;

    background: #fff;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    margin-bottom: 15px;

}

.notification:hover {

    background: #f9fbff;

}

.notification-title {

    font-weight: 700;

    color: var(--primary);

}

.notification-time {

    font-size: 12px;

    color: #888;

}


/*==========================================================
  TOAST
==========================================================*/

.toast {

    position: fixed;

    right: 25px;

    top: 100px;

    width: 320px;

    background: #fff;

    border-radius: 15px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);

    padding: 18px;

    z-index: 5000;

}


/*==========================================================
  MODALE
==========================================================*/

.modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .45);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 6000;

}

.modal {

    width: 600px;

    max-width: 95%;

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 25px 50px rgba(0, 0, 0, .25);

}

.modal-header {

    padding: 20px 25px;

    background: var(--primary);

    color: #fff;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.modal-header h3 {

    color: #fff;

    margin: 0;

}

.modal-body {

    padding: 30px;

}

.modal-footer {

    display: flex;

    justify-content: flex-end;

    gap: 15px;

    padding: 20px 25px;

    background: #fafafa;

}


/*==========================================================
  BREADCRUMB
==========================================================*/

.breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    font-size: 14px;

}

.breadcrumb a {

    color: var(--primary);

}

.breadcrumb span {

    color: #777;

}


/*==========================================================
  LOADER
==========================================================*/

.loader {

    width: 55px;

    height: 55px;

    border: 5px solid #eee;

    border-top: 5px solid var(--primary);

    border-radius: 50%;

    animation: spin 1s linear infinite;

    margin: auto;

}


/*==========================================================
  TOOLTIP
==========================================================*/

.tooltip {

    position: relative;

    cursor: pointer;

}

.tooltip::after {

    content: attr(data-title);

    position: absolute;

    bottom: 120%;

    left: 50%;

    transform: translateX(-50%);

    background: #222;

    color: #fff;

    padding: 8px 12px;

    border-radius: 8px;

    white-space: nowrap;

    font-size: 12px;

    opacity: 0;

    pointer-events: none;

    transition: .3s;

}

.tooltip:hover::after {

    opacity: 1;

}


/*==========================================================
  AVATAR
==========================================================*/

.avatar {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    overflow: hidden;

}

.avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/*==========================================================
  CARTES COLORÉES
==========================================================*/

.card-primary {

    background: linear-gradient(135deg, #0F4C81, #1565c0);

    color: #fff;

}

.card-success {

    background: linear-gradient(135deg, #28a745, #4caf50);

    color: #fff;

}

.card-warning {

    background: linear-gradient(135deg, #ff9800, #ffc107);

    color: #fff;

}

.card-danger {

    background: linear-gradient(135deg, #dc3545, #ff5b6e);

    color: #fff;

}


/*==========================================================
  BOUTONS PREMIUM
==========================================================*/

.btn-gradient {

    background: linear-gradient(135deg, #0F4C81, #1976d2);

    color: #fff;

}

.btn-gradient:hover {

    opacity: .9;

}

.btn-round {

    border-radius: 50px;

}

.btn-shadow {

    box-shadow: 0 12px 25px rgba(0, 0, 0, .15);

}


/*==========================================================
  ICÔNES RONDES
==========================================================*/

.icon-circle {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef4fb;

    color: var(--primary);

    font-size: 22px;

}


/*==========================================================
  BADGE FLOTTANT
==========================================================*/

.badge-floating {

    position: absolute;

    top: -8px;

    right: -8px;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: var(--danger);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 11px;

    font-weight: 700;

}


/*==========================================================
  LISTES PREMIUM
==========================================================*/

.list-group {

    background: #fff;

    border-radius: 15px;

    overflow: hidden;

    border: 1px solid var(--border);

}

.list-group-item {

    padding: 18px 22px;

    border-bottom: 1px solid #eee;

}

.list-group-item:last-child {

    border: none;

}

.list-group-item:hover {

    background: #f8fbff;

}


/*==========================================================
  ETIQUETTES
==========================================================*/

.tag {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 30px;

    background: #eef4fb;

    color: var(--primary);

    font-size: 12px;

    margin: 3px;

}


/*==========================================================
  OMBRES
==========================================================*/

.shadow-sm {

    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);

}

.shadow {

    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);

}

.shadow-lg {

    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);

}
/* ==========================================================
   PARTIE 9
   RESPONSIVE DESIGN
   ========================================================== */

/* ==========================================================
   ECRANS <= 1400px
   ========================================================== */

@media screen and (max-width:1400px) {

    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .widget-grid {
        grid-template-columns: 1fr;
    }

    .quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ==========================================================
   ECRANS <= 1200px
   ========================================================== */

@media screen and (max-width:1200px) {

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .action-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mini-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .table-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-box {
        width: 100%;
    }

}

/* ==========================================================
   TABLETTE
   ========================================================== */

@media screen and (max-width:992px) {

    .ak-sidebar {

        left: -280px;

        transition: .3s;

    }

    .ak-sidebar.active {

        left: 0;

    }

    .ak-content {

        margin-left: 0;

        padding: 95px 20px 20px;

    }

    .ak-topbar {

        left: 0;

        padding: 0 20px;

    }

    .menu-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .topbar-search {

        display: none;

    }

    .dashboard-grid {

        grid-template-columns: 1fr;

    }

    .widget-grid {

        grid-template-columns: 1fr;

    }

    .quick-grid {

        grid-template-columns: 1fr;

    }

    .server-status {

        grid-template-columns: 1fr;

    }

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width:768px) {

    .dashboard-title {

        font-size: 22px;

    }

    .topbar-title {

        font-size: 20px;

    }

    .topbar-right {

        gap: 10px;

    }

    .user-info {

        display: none;

    }

    .notification-btn {

        width: 42px;

        height: 42px;

    }

    .stat-card {

        flex-direction: column;

        text-align: center;

        gap: 20px;

    }

    .stat-icon {

        width: 65px;

        height: 65px;

        font-size: 28px;

    }

    .table-container {

        overflow-x: auto;

    }

    .ak-table {

        min-width: 850px;

    }

    .pagination {

        justify-content: center;

        flex-wrap: wrap;

    }

    .form-actions {

        flex-direction: column;

    }

    .form-actions .btn {

        width: 100%;

    }

    .btn {

        justify-content: center;

    }

    .modal {

        width: 95%;

    }

}

/* ==========================================================
   PETITS MOBILES
   ========================================================== */

@media screen and (max-width:576px) {

    .ak-content {

        padding: 90px 15px 15px;

    }

    .form-container {

        padding: 20px;

    }

    .panel {

        padding: 20px;

    }

    .widget {

        padding: 20px;

    }

    .stat-card {

        padding: 20px;

    }

    .table-toolbar {

        gap: 15px;

    }

    .table-title {

        font-size: 20px;

    }

    .dashboard-title {

        font-size: 20px;

    }

    .section-title {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }

    .action-card {

        padding: 20px;

    }

    .upload-box {

        padding: 25px;

    }

    .timeline {

        padding-left: 20px;

    }

    .timeline-dot {

        left: -20px;

    }

}

/* ==========================================================
   TRES PETITS ECRANS
   ========================================================== */

@media screen and (max-width:400px) {

    .dashboard-title {

        font-size: 18px;

    }

    .topbar {

        padding: 0 10px;

    }

    .btn {

        font-size: 14px;

        padding: 10px 15px;

    }

    .stat-number {

        font-size: 28px;

    }

    .table-title {

        font-size: 18px;

    }

}

/* ==========================================================
   IMPRESSION
   ========================================================== */

@media print {

    .ak-sidebar,
    .ak-topbar,
    .btn,
    .pagination,
    .table-toolbar {

        display: none !important;

    }

    .ak-content {

        margin: 0;

        padding: 0;

        background: #fff;

    }

    .ak-card,
    .panel,
    .widget {

        box-shadow: none;

        border: 1px solid #ccc;

    }

}
/* ==========================================================
   PARTIE 10
   ANIMATIONS - EFFETS - UTILITAIRES
   ========================================================== */


/*==========================================================
  KEYFRAMES
==========================================================*/

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes slideLeft {

    from {

        opacity: 0;

        transform: translateX(-40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes slideRight {

    from {

        opacity: 0;

        transform: translateX(40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(.8);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

@keyframes spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-10px);

    }

    60% {

        transform: translateY(-5px);

    }

}


/*==========================================================
  CLASSES D'ANIMATION
==========================================================*/

.fade-in {

    animation: fadeIn .6s ease;

}

.slide-up {

    animation: slideUp .6s ease;

}

.slide-down {

    animation: slideDown .6s ease;

}

.slide-left {

    animation: slideLeft .6s ease;

}

.slide-right {

    animation: slideRight .6s ease;

}

.zoom-in {

    animation: zoomIn .4s ease;

}

.pulse {

    animation: pulse 2s infinite;

}

.bounce {

    animation: bounce 2s infinite;

}


/*==========================================================
  HOVER PREMIUM
==========================================================*/

.hover-grow {

    transition: .3s;

}

.hover-grow:hover {

    transform: scale(1.04);

}

.hover-shadow {

    transition: .3s;

}

.hover-shadow:hover {

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}

.hover-primary {

    transition: .3s;

}

.hover-primary:hover {

    background: var(--primary);

    color: #fff;

}


/*==========================================================
  TRANSITIONS
==========================================================*/

.transition {

    transition: .3s;

}

.transition-fast {

    transition: .15s;

}

.transition-slow {

    transition: .6s;

}


/*==========================================================
  OPACITÉ
==========================================================*/

.opacity-25 {

    opacity: .25;

}

.opacity-50 {

    opacity: .5;

}

.opacity-75 {

    opacity: .75;

}

.opacity-100 {

    opacity: 1;

}


/*==========================================================
  ALIGNEMENTS
==========================================================*/

.text-center {

    text-align: center;

}

.text-left {

    text-align: left;

}

.text-right {

    text-align: right;

}


/*==========================================================
  FLEX
==========================================================*/

.d-flex {

    display: flex;

}

.flex-column {

    flex-direction: column;

}

.align-center {

    align-items: center;

}

.justify-center {

    justify-content: center;

}

.justify-between {

    justify-content: space-between;

}

.flex-wrap {

    flex-wrap: wrap;

}

.gap-10 {

    gap: 10px;

}

.gap-20 {

    gap: 20px;

}

.gap-30 {

    gap: 30px;

}


/*==========================================================
  LARGEURS
==========================================================*/

.w-100 {

    width: 100%;

}

.w-75 {

    width: 75%;

}

.w-50 {

    width: 50%;

}

.h-100 {

    height: 100%;

}


/*==========================================================
  MARGES
==========================================================*/

.m-0 {
    margin: 0;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-20 {
    margin-left: 20px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-20 {
    margin-right: 20px;
}


/*==========================================================
  PADDINGS
==========================================================*/

.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px;
}


/*==========================================================
  RAYONS
==========================================================*/

.rounded {

    border-radius: 12px;

}

.rounded-lg {

    border-radius: 20px;

}

.rounded-circle {

    border-radius: 50%;

}


/*==========================================================
  CURSEUR
==========================================================*/

.pointer {

    cursor: pointer;

}


/*==========================================================
  BORDURES
==========================================================*/

.border {

    border: 1px solid var(--border);

}

.border-top {

    border-top: 1px solid var(--border);

}

.border-bottom {

    border-bottom: 1px solid var(--border);

}


/*==========================================================
  COULEURS TEXTE
==========================================================*/

.text-primary {

    color: var(--primary);

}

.text-success {

    color: var(--success);

}

.text-danger {

    color: var(--danger);

}

.text-warning {

    color: var(--warning);

}

.text-info {

    color: var(--info);

}

.text-muted {

    color: #777;

}


/*==========================================================
  COULEURS FOND
==========================================================*/

.bg-white {

    background: #fff;

}

.bg-light {

    background: #f8f9fa;

}

.bg-primary-light {

    background: #eef4fb;

}

.bg-success-light {

    background: #eaf8ef;

}

.bg-danger-light {

    background: #fdecec;

}

.bg-warning-light {

    background: #fff7df;

}


/*==========================================================
  SCROLLBAR GLOBALE
==========================================================*/

::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}

::-webkit-scrollbar-track {

    background: #f3f3f3;

}

::-webkit-scrollbar-thumb {

    background: var(--primary);

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--primary-dark);

}


/*==========================================================
  FIN DU FICHIER
==========================================================*/