@charset "utf-8";

/* ================================================================
   TABLE DES MATIÈRES
   ================================================================
   1.  VARIABLES CSS & RESET
   2.  SCROLLBAR PERSONNALISÉE
   3.  POLICES (Nunito)
   4.  TYPOGRAPHIE & TAILLES DE BASE
   5.  LAYOUT GLOBAL (body, main, conteneurs)
   6.  SIDEBAR / MENU LATÉRAL
       6a. Boutons rapides sidebar
       6b. Menu principal
       6c. Sous-menus
   7.  CONTENU PRINCIPAL (.main-container, .main-titre)
   8.  BOUTONS GLOBAUX
   9.  FORMULAIRES
       9a. Page card (conteneur de page)
       9b. Lignes de formulaire (.form-row)
       9c. Groupes de champs (.form-group)
       9d. Inputs & selects
       9e. Textarea
       9f. Actions de formulaire
   10. TABLEAUX
       10a. Tableau principal (.custom-table)
       10b. Tableau slim (.custom-table-slim)
       10c. Légende de statut
   11. FILTRES
   12. INPUT TAGS & SUGGESTIONS
   13. PAGINATION
   14. NOTIFICATIONS (toasts)
   15. COMPOSANTS OPÉRATEUR (.op-*)
       15a. Sticky header
       15b. Briques & colonnes
       15c. Titres avec actions
       15d. Séparateurs & labels
       15e. Boutons colonne
       15f. Ports RJ45
   16. ÉDITEUR DE CODE (.code-editor)
   17. BLOC DE CODE (.code-block)
   18. TIMELINE
   19. CASES À COCHER (.cb-*)
   20. UTILITAIRES & ANIMATIONS
   21. BOUTONS SCROLL (flottants)
   22. PAGE D'IDENTIFICATION
   23. AVANT-VENTE
   24. VUE FICHIER
   25. STATISTIQUES OP
       25a. Briques
       25b. Graphiques
   26. DASHBOARD
   ================================================================ */


/* ================================================================
   1. VARIABLES CSS & RESET
   ================================================================ */

:root {
    --sidebar-width: 16rem;
    --sidebar-gap:   0rem;
}

*,
*::before,
*::after {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

/* Suppression des outlines/box-shadow par défaut au focus */
*:focus {
    box-shadow: none    !important;
    outline:    none    !important;
}


/* ================================================================
   2. SCROLLBAR PERSONNALISÉE
   ================================================================ */

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
    width:  8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background:    #0b0e18;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(245, 111, 69, 0.6);
    border-radius:    4px;
    border:           2px solid #0b0e18;
    transition:       background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #F56F45;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 111, 69, 0.6) #0b0e18;
}

*::-moz-scrollbar-thumb:hover {
    background-color: #F56F45;
}


/* ================================================================
   3. POLICES (Nunito)
   ================================================================ */

@font-face {
    font-family:   'Nunito';
    src:           url('/fonts/nunito/Nunito-Regular.ttf') format('truetype');
    font-weight:   400;
    font-style:    normal;
    font-display:  swap;
}

@font-face {
    font-family:   'Nunito';
    src:           url('/fonts/nunito/Nunito-SemiBold.ttf') format('truetype');
    font-weight:   600;
    font-style:    normal;
    font-display:  swap;
}

@font-face {
    font-family:   'Nunito';
    src:           url('/fonts/nunito/Nunito-Bold.ttf') format('truetype');
    font-weight:   700;
    font-style:    normal;
    font-display:  swap;
}

@font-face {
    font-family:   'Nunito';
    src:           url('/fonts/nunito/Nunito-ExtraBold.ttf') format('truetype');
    font-weight:   800;
    font-style:    normal;
    font-display:  swap;
}


/* ================================================================
   4. TYPOGRAPHIE & TAILLES DE BASE
   ================================================================ */

html {
    font-size:             16px;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 768px) {
    html { font-size: 18px; }
}

@media (min-width: 1024px) {
    html { font-size: 18px; }
}


/* ================================================================
   5. LAYOUT GLOBAL
   ================================================================ */

body,
html {
    font-family:      'Nunito', sans-serif;
    font-weight:      400;
    background-color: #071424;
    line-height:      1.5;
    margin:           0;
    padding:          0;
    color:            #FFFFFF;
    min-height:       100dvh;
}

body {
    display:        flex;
    flex-direction: column;
    font-size:      1rem;
}

/* Conteneur principal de page */
main {
    display:         flex;
    justify-content: flex-start;
    align-items:     flex-start;
    min-height:      100dvh;
    transition:      margin-left 0.28s cubic-bezier(.2, .9, .2, 1);
    margin-left:     0;
    padding-top:     1rem;
    box-sizing:      border-box;
}

/* Variante : contenu centré */
body.main,
main.centered {
    justify-content: center;
    align-items:     center;
    text-align:      center;
    padding-left:    0;
    padding-right:   0;
    padding-top:     0;
}

/* Variante : centré avec padding */
body.main,
main.page-centered {
    justify-content: center;
    align-items:     center;
    text-align:      center;
    padding:         4rem;
}

/* Colonne centrée générique */
.conteneur-column {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    width:           max-content;
}

/* Espace pour messages (chargement, erreurs…) */
.space-message {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           100%;
}

/* Message de notification inline (masqué par défaut) */
.notification-message {
    background-color: #040A12;
    padding:          0.5rem 1rem;
    border-radius:    0.5rem;
    color:            #E6ECF1;
    font-size:        0.85rem;
    text-align:       center;
    letter-spacing:   0.1rem;
    margin:           0.5rem 0;
    border:           0.125rem solid #0E1822;
    display:          none;
}


/* ================================================================
   6. SIDEBAR / MENU LATÉRAL
   ================================================================ */

/* --- 6a. Boutons d'accès rapide (icônes flottantes à gauche) --- */

.sidebar-button-block {
    position:   fixed;
    top:        4.3rem;
    left:       0;
    z-index:    1999;
    display:    flex;
    flex-direction: column;
    gap:        0.5rem;
    transition: left 0.28s cubic-bezier(.2, .9, .2, 1);
}

.sidebar-button-block .sidebar-link-btn {
    background-color:      #040A12;
    color:                 #E6ECF1;
    padding:               0.6rem;
    border-top-right-radius:    0.5rem;
    border-bottom-right-radius: 0.5rem;
    display:               flex;
    align-items:           center;
    justify-content:       center;
    text-decoration:       none;
    cursor:                pointer;
    transition:            background 0.2s;
}

.sidebar-button-block .sidebar-link-btn:hover {
    background-color: #F56F45;
}

/* Décalage des boutons quand la sidebar est ouverte */
body.sidebar-open .sidebar-button-block {
    left: calc(var(--sidebar-width) + var(--sidebar-gap));
}

/* --- 6b. Menu principal --- */

.sidebar {
    position:   fixed;
    top:        0;
    left:       0;
    width:      var(--sidebar-width);
    height:     100vh;
    background-color: #040A12;
    padding:    1rem;
    transform:  translateX(calc(-1 * var(--sidebar-width)));
    transition: transform 0.28s cubic-bezier(.2, .9, .2, 1);
    z-index:    1000;
    overflow:   hidden;
    will-change: transform;
    font-size:  0.90rem;
}

/* Sidebar visible */
body.sidebar-open .sidebar {
    transform: translateX(0);
}

/* Bouton toggle (hamburger) */
.sidebar-toggle-btn {
    position:   fixed;
    top:        1.5rem;
    left:       0;
    z-index:    2000;
    background-color:      #040A12;
    padding:               0.6rem;
    border-top-right-radius:    0.5rem;
    border-bottom-right-radius: 0.5rem;
    cursor:     pointer;
    color:      #E6ECF1;
    transition: left 0.28s cubic-bezier(.2, .9, .2, 1), background 0.2s;
    display:    flex;
    align-items:     center;
    justify-content: center;
}

body.sidebar-open #sidebar-toggle-btn {
    left: calc(var(--sidebar-width) + var(--sidebar-gap));
}

#sidebar-toggle-btn:hover {
    background-color: #F56F45;
}

/* En-tête de la sidebar */
.sidebar-header {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    margin-bottom: 1rem;
    color:         #E6ECF1;
}

.sidebar-title {
    font-size:      0.8rem;
    font-weight:    bold;
    letter-spacing: 0.08rem;
    color:          #F56F45;
}

/* Liste de liens */
.sidebar-links {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            0.7rem;
    margin:         0;
    padding:        0;
}

.sidebar-links a {
    color:           #E6ECF1;
    text-decoration: none;
    padding:         0.4rem 0.6rem;
    border-radius:   0.6rem;
    display:         flex;
    align-items:     center;
    gap:             0.7rem;
    transition:      background 0.12s;
}

.sidebar-links a:hover {
    background-color: #0E1822;
}

/* Icônes des liens */
.sidebar-links a i {
    color: #F56F45;
}

/* --- 6c. Sous-menus --- */

.submenu .submenu-items {
    display:        none;
    padding-left:   1rem;
    margin-top:     0.5rem;
    flex-direction: column;
    gap:            0.5rem;
}

.submenu.open .submenu-items {
    display:    flex;
    list-style: none;
}

.submenu.open .submenu-items li,
.submenu.open .submenu-items a {
    font-size:    0.85rem;
    color:        rgba(255, 255, 255, 0.8);
    padding-left: 0.50rem;
}

/* Flèche d'ouverture/fermeture */
.arrow {
    margin-left: auto;
    transition:  transform 0.18s;
}

.submenu .arrow {
    color:      inherit;
    transition: transform 0.18s;
}

.submenu.open .arrow {
    transform: rotate(180deg);
}

/* Décalage du contenu principal quand sidebar ouverte */
body.sidebar-open main {
    margin-left: var(--sidebar-width);
}

/* Sidebar plus étroite sur mobile */
@media (max-width: 600px) {
    :root { --sidebar-width: 14rem; }
}


/* ================================================================
   7. CONTENU PRINCIPAL
   ================================================================ */

/* Wrapper principal du contenu de page */
.main-container {
    width:           100%;
    max-width:       100%;
    box-sizing:      border-box;
    display:         flex;
    flex-direction:  column;
    color:           #FFFFFF;
    padding-left:    calc(4rem + var(--sidebar-gap));
    padding-right:   4rem;
}

/* Barre de titre de section */
.main-titre {
    background-color: #152536;
    padding:          0.70rem;
    border-radius:    1.3rem;
    color:            rgba(255, 255, 255, 0.8);
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    box-shadow:       0 0.75rem 1.875rem rgba(0, 0, 0, 0.5);
}

.titre-actions {
    display:     flex;
    gap:         0.7rem;
    margin-left: auto;
}

.main-titre form {
    margin: 0;
}

/* Bouton intégré dans la barre de titre */
.titre-btn {
    background-color: #1f3a53;
    border:           none;
    padding:          0.4rem 0.8rem;
    border-radius:    0.8rem;
    color:            white;
    cursor:           pointer;
    font-size:        0.9rem;
    text-decoration:  none;
    transition:       background-color 0.2s, transform 0.1s;
}

button.titre-btn,
a.titre-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0.4rem 0.8rem;
    line-height:     1;
}

.titre-btn:hover {
    background-color: #25445f;
}

.titre-btn i {
    color:        #F56F45;
    margin-right: 0.5rem;
}


/* ================================================================
   8. BOUTONS GLOBAUX
   ================================================================ */

/* Base commune */
.btn-global {
    padding:         0.55rem 1rem;
    font-size:       1rem;
    border-radius:   1.3rem;
    color:           #fff;
    border:          none;
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.625rem;
    transition:      background-color 0.2s, transform 0.1s;
    text-decoration: none;
}

.btn-global:active {
    transform: scale(0.97);
}

.btn-global i {
    font-size: 1.125rem;
}

/* Variante orange (primaire) */
.btn-orange {
    background-color: #F56F45;
    color:            #fff;
}

.btn-orange:hover {
    background-color: #e56139;
}

/* Variante grise (secondaire) */
.btn-gris {
    background-color: #7a7a7a;
    color:            #fff;
}

.btn-gris:hover {
    background-color: #5c5c5c;
}

/* Bouton désactivé */
button:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

/* Bouton d'action dans les tableaux */
.table-action-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0.50rem 0.7rem;
    font-size:       0.80rem;
    border-radius:   1.3rem;
    background-color: #F56F45;
    color:           #FFFFFF;
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    transition:      background-color 0.18s, transform 0.1s;
    white-space:     nowrap;
}

.table-action-btn:hover  { background-color: #e56139; }
.table-action-btn:active { transform: scale(0.96); }
.table-action-btn i      { font-size: 1rem; }


/* ================================================================
   9. FORMULAIRES
   ================================================================ */

/* --- 9a. Page card (conteneur de page) --- */

.page-card {
    background-color: #152536;
    padding:          2rem;
    border-radius:    1.5rem;
    width:            100%;
    max-width:        61rem; /* ~1100px */
    margin:           0 auto 10rem auto;
    display:          flex;
    flex-direction:   column;
    gap:              2rem;
    box-shadow:       0 0.75rem 1.875rem rgba(0, 0, 0, 0.5);
}

/* Variante plus large */
.page-card-70 {
    max-width: 70rem !important;
}

/* Variante pleine largeur */
.page-card-full {
    max-width: none;
    width:     calc(100% - 10rem);
    margin:    0 5rem 10rem 5rem;
}

/* Titre principal de la page card */
.page-card-title {
    font-size:   1.8rem;
    text-align:  center;
    color:       #F56F45;
    font-weight: 800;
}

/* Sous-titre de la page card */
.page-card-subtitle {
    text-align: center;
    font-size:  0.9rem;
    color:      #7A8A99;
}

/* Conteneur du formulaire */
.page-card-form {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

/* Ligne descriptive (info, avertissement…) */
.desc-row {
    padding:          0.75rem 1rem;
    border-radius:    1rem;
    background-color: #0E1822;
    align-items:      center;
    color:            #7A8A99;
    font-size:        0.9rem;
    text-align:       left;
}

/* --- 9b. Lignes de formulaire --- */

/* Ligne 2 colonnes égales */
.form-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.5rem;
    padding:               0.75rem 1rem;
    border-radius:         1rem;
    background-color:      #0E1822;
    align-items:           center;
}

/* Variante 1:2.7 */
.form-row-2 {
    grid-template-columns: 1fr 2.7fr !important;
}

/* Variante IP (adresse + masque) */
.form-row-ip {
    margin-top:            1rem;
    grid-template-columns: 2fr 1fr;
    gap:                   1rem;
}

/* Alternance de couleur des lignes */
.form-row:nth-child(odd) {
    background-color: #0E1822;
}

/* Responsive : 1 colonne sous 900px */
@media (max-width: 900px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Séparateur horizontal discret entre groupes */
.form-separator {
    display:           flex;
    justify-content:   flex-end;
    height:            0;
    margin-top:        1rem;
    margin-bottom:     1rem;
    border-top-style:  solid;
    border-top-color:  #7A8A99;
    border-top-width:  0.10rem;
}

/* --- 9c. Groupes de champs --- */

.form-group {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    text-align:     left;
}

.form-group label {
    color:       #E6ECF1;
    font-weight: 600;
    font-size:   0.95rem;
}

/* Texte d'aide sous le champ */
.form-group .field-description {
    font-size:  0.8rem;
    color:      #7A8A99;
    margin-top: 0.15rem;
}

/* Variante avec bouton inline */
.form-group button {
    width:      auto;
    align-self: flex-start;
}

.form-group-btn {
    width:          auto !important;
    display:        flex;
    flex-direction: row !important;
    align-items:    center !important;
}

.form-group-btn button {
    width: auto;
}

/* --- 9d. Inputs & selects --- */

.input-global {
    padding:          0.65rem 0.8rem    !important;
    border-radius:    0.7rem            !important;
    background-color: #040A12          !important;
    border:           1px solid #0E1822 !important;
    color:            #E6ECF1           !important;
    font-size:        1rem              !important;
    transition:       border 0.25s, background 0.25s !important;
}

.input-global:focus {
    border-color: #F56F45;
}

.input-global::placeholder {
    color:   #7A8A99 !important;
    opacity: 1       !important;
}

/* Champ désactivé */
.input-disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

/* Suppression visuelle de border */
.border-none {
    border:       none        !important;
    border-color: transparent !important;
}

/* --- 9e. Textarea --- */

.textarea-global {
    width:            100%;
    min-height:       10rem;
    resize:           vertical;
    padding:          0.75rem 0.9rem;
    border-radius:    1rem;
    background-color: #040A12;
    border:           0.125rem solid #0E1822;
    color:            #E6ECF1;
    font-family:      'Nunito', sans-serif;
    font-size:        0.95rem;
    line-height:      1.5;
    transition:       border-color 0.25s ease, box-shadow 0.25s ease;
}

.textarea-global:focus {
    border-color: #F56F45;
    box-shadow:   0 0 0 0.125rem rgba(245, 111, 69, 0.15);
}

.textarea-global::placeholder {
    color:   #7A8A99;
    opacity: 1;
}

.textarea-global::-webkit-scrollbar       { width: 0.375rem; }
.textarea-global::-webkit-scrollbar-thumb { background-color: rgba(245, 111, 69, 0.6); border-radius: 0.25rem; }

/* Label au-dessus d'une textarea */
.label-area {
    font-size:      0.9rem;
    font-weight:    bold;
    letter-spacing: 0.1rem;
    color:          rgba(255, 255, 255, 0.8);
    margin-bottom:  0.3rem;
    margin-top:     1rem;
    padding-left:   1rem;
}

/* Description sous la textarea */
.area-description {
    font-size:   0.8rem;
    color:       #7A8A99;
    margin-top:  0.15rem;
    margin-left: 1rem;
}

/* --- 9f. Actions de formulaire --- */

.form-actions {
    display:         flex;
    justify-content: flex-end;
    margin-top:      0.5rem;
    gap:             0.80rem;
}

.form-actions-center {
    justify-content: center !important;
}

.form-actions-gauche {
    justify-content: flex-start !important;
}

/* Champ de sélection de fichier */
.file-input-wrapper { position: relative; }

.file-input-zone {
    display:          flex;
    align-items:      center;
    gap:              0.6rem;
    padding:          0.55rem 0.8rem;
    border-radius:    0.7rem;
    background-color: #040A12;
    border:           1px solid #0E1822;
    color:            #7A8A99;
    font-size:        0.95rem;
    cursor:           pointer;
    transition:       border-color 0.25s, background 0.25s;
    min-height:       2.6rem;
    user-select:      none;
}

.file-input-zone:hover,
.file-input-zone.drag-over { border-color: #F56F45; background-color: rgba(245,111,69,0.04); }
.file-input-zone.drag-over { background-color: rgba(245,111,69,0.08); }
.file-input-zone.has-file  { color: #E6ECF1; border-color: #F56F45; }
.file-input-zone input[type="file"] { display: none; }

.file-icon {
    width:      18px;
    height:     18px;
    flex-shrink: 0;
    color:      #7A8A99;
    transition: color 0.2s;
}
.file-input-zone.has-file .file-icon,
.file-input-zone:hover .file-icon { color: #F56F45; }

.file-name {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-size:     0.9rem;
}

.file-clear {
    display:         none;
    align-items:     center;
    justify-content: center;
    background-color: transparent;
    color:           #F56F45;
    cursor:          pointer;
    font-size:       1rem;
    font-weight:     bold;
    flex-shrink:     0;
    transition:      all 0.2s ease;
    border:          none;
    padding:         0;
    line-height:     1;
    margin-top: 0.20rem;
}
.file-clear i {
    pointer-events: none;
}
.file-clear:hover                   { color: #fff; }
.file-input-zone.has-file .file-clear { display: flex; }

.file-meta {
    font-size:   0.75rem;
    color:       #7A8A99;
    margin-top:  0.2rem;
    padding-left: 0.5rem;
}


/* ================================================================
   10. TABLEAUX
   ================================================================ */

/* Wrapper scrollable horizontal */
.table-wrapper {
    width:         100%;
    overflow-x:    auto;
    margin-top:    1rem;
    text-align:    center;
    margin-bottom: 2rem;
}

/* --- 10a. Tableau principal --- */

.custom-table {
    width:            100%;
    font-size:        0.95rem;
    text-align:       left;
    border-collapse:  separate;
    border-spacing:   0;
}

.custom-table th,
.custom-table td {
    padding:       0.75rem 1rem;
    border-bottom: 1px solid #0E1822;
    color:         #E6ECF1;
}

.custom-table th {
    background-color: #0F1F33;
    font-weight:      600;
}

/* Coins arrondis du tableau */
.custom-table th:first-child          { border-top-left-radius:     1.3rem; }
.custom-table th:last-child           { border-top-right-radius:    1.3rem; }
.custom-table tr:last-child td:first-child { border-bottom-left-radius:  1.3rem; }
.custom-table tr:last-child td:last-child  { border-bottom-right-radius: 1.3rem; }

/* Alternance de couleur des lignes */
.custom-table tr.even { background-color: #0E1822; }
.custom-table tr.odd  { background-color: #152536; }
.custom-table tr:hover { background-color: #1f3a53; }

/* Lien dans une cellule de tableau */
.link-table          { color: #FFFFFF; text-decoration: none; transition: text-decoration 0.2s; }
.link-table:hover    { color: #FFFFFF; text-decoration: underline; }
.link-table:visited,
.link-table:active   { color: #FFFFFF; }

/* En-têtes triables */
.custom-table th a {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    text-decoration: none;
    color:           #E6ECF1;
    font-weight:     600;
    transition:      color 0.2s ease, transform 0.1s;
}

.custom-table th a:hover { color: #F56F45; }

.custom-table th a span.arrow {
    margin-left: 0.3rem;
    font-size:   0.75rem;
    transition:  transform 0.2s ease;
}

.custom-table th a.asc  span.arrow { transform: rotate(180deg); }
.custom-table th a.desc span.arrow { transform: rotate(0deg); }

@media (max-width: 768px) {
    .custom-table th,
    .custom-table td {
        padding:   0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* --- 10b. Tableau slim (logs, listes compactes) --- */

.custom-table-slim {
    width:            100%;
    border-collapse:  separate;
    border-spacing:   0;
    font-size:        0.85rem;
    color:            #E6ECF1;
    background-color: #0A141F;
    border-radius:    1rem;
    overflow:         hidden;
    table-layout:     fixed;
}

.custom-table-slim th,
.custom-table-slim td {
    padding:       0.45rem 0.75rem;
    text-align:    left;
    border-bottom: 1px solid #1C2C3D;
}

.custom-table-slim td {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.custom-table-slim thead th {
    background-color: #08101A;
    font-weight:      600;
    color:            #E6ECF1;
}

/* Largeurs des colonnes par défaut */
.custom-table-slim th:nth-child(1),
.custom-table-slim td:nth-child(1) { width: 40%; }

.custom-table-slim th:nth-child(2),
.custom-table-slim td:nth-child(2) { width: 15%; }

.custom-table-slim td:nth-child(3) {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* Colonne action à largeur minimale */
.custom-table-slim th.col-action,
.custom-table-slim td.col-action {
    min-width:       1%;
    white-space: nowrap;
    text-align:  right;
}

/* Annule la largeur fixe sur une colonne */
.custom-table-slim .no-width { width: auto !important; }

/* Variante : texte wrap sur colonne 3 */
.custom-table-slim td:nth-child(3).wrap-content {
    white-space:   normal   !important;
    word-wrap:     break-word !important;
    overflow:      visible  !important;
    text-overflow: clip     !important;
}

/* Lignes alternées */
.custom-table-slim tbody tr            { background-color: #0E1824; }
.custom-table-slim tbody tr:nth-child(even) { background-color: #0B1420; }
.custom-table-slim tbody tr:hover      { background-color: #162B40; }
.custom-table-slim tbody tr:last-child td  { border-bottom: none; }

/* Variantes de blocs (logs groupés) */
.block-even          { background-color: #0E1824 !important; }
.block-odd           { background-color: #0B1420 !important; }
.block-even:hover,
.block-odd:hover     { background-color: #162B40 !important; }

/* Séparateur entre blocs de logs */
.log-block-separator td {
    border-bottom:    2px solid #162B40;
    padding:          0;
    height:           0;
    background-color: transparent;
}

/* Bouton d'action dans le tableau slim */
.btn-table-slim {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45rem;
    padding:         0.35rem 0.7rem;
    border-radius:   0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    color:           #F56F45;
    border:          none;
    cursor:          pointer;
    font-size:       0.8rem;
    white-space:     nowrap;
    transition:      background-color 0.2s ease, color 0.2s ease;
}

.btn-table-slim i         { font-size: 0.75rem; }
.btn-table-slim:hover     { background-color: #F56F45; color: #FFFFFF; }

/* --- 10c. Légende de statut (tableau) --- */

.status-legend-wrapper {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    gap:             0.5rem;
    margin-top:      1rem;
    flex-wrap:       wrap;
}

.legend-title {
    font-size:   0.9rem;
    color:       #E6ECF1;
    font-weight: 600;
}

.status-legend {
    display:   flex;
    gap:       1rem;
    flex-wrap: wrap;
}

.legend-item {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.85rem;
    color:       #E6ECF1;
}

.legend-color {
    display:       inline-block;
    width:         1rem;
    height:        1rem;
    border-radius: 0.3rem;
    border:        1px solid #0E1822;
}

/* Cellule contenant plusieurs indicateurs de statut */
.status-cell .status-list {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.status-item {
    display:     flex;
    flex-direction: row;
    align-items: center;
    gap:         0.4rem;
}

/* Barre colorée d'indicateur */
.status-bar {
    display:       block;
    width:         0.3rem;
    height:        1rem;
    border-radius: 0.3rem;
    cursor:        default;
}

.status-bar.disabled {
    background-color: rgba(235, 234, 240, 0.25);
    box-shadow:       inset 0 0 0.15rem rgba(255, 255, 255, 0.15);
    cursor:           default;
}

.status-label {
    font-size:   0.75rem;
    color:       #E6ECF1;
    white-space: nowrap;
    padding-top: 0.1rem;
}


/* ================================================================
   11. FILTRES
   ================================================================ */

.filter-container {
    width:  100%;
    margin: 2rem 0;
}

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

/* Élément de filtre standard */
.filter-item {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    flex:           1 1 calc(33.333% - 1rem);
    min-width:      10rem;
    position:       relative;
}

.filter-item label {
    font-size:      0.9rem;
    font-weight:    bold;
    letter-spacing: 0.1rem;
    color:          rgba(255, 255, 255, 0.8);
    margin-bottom:  0.3rem;
    padding-left:   0.8rem;
}

.filter-item input {
    padding:          0.5rem 0.75rem;
    border-radius:    1rem;
    border:           0.125rem solid #0E1822;
    background-color: #040A12;
    color:            #E6ECF1;
    font-size:        0.9rem;
    transition:       border-color 0.3s ease;
}

.filter-item input:focus {
    border-color: #032859;
}

/* Variante sans style particulier (ns = no-style override) */
.filter-item-ns {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    flex:           1 1 calc(33.333% - 1rem);
    min-width:      10rem;
    position:       relative;
}

.filter-item-ns label {
    font-size:      0.9rem;
    font-weight:    bold;
    letter-spacing: 0.1rem;
    color:          rgba(255, 255, 255, 0.8);
    margin-bottom:  0.3rem;
    padding-left:   0.8rem;
}

.filter-item-ns input {
    padding:          0.5rem 0.75rem;
    border-radius:    1rem;
    border:           0.125rem solid #0E1822;
    background-color: #040A12;
    color:            #E6ECF1;
    font-size:        0.9rem;
    transition:       border-color 0.3s ease;
}

.filter-item-ns input:focus {
    border-color: #032859;
}

/* Variante 4 colonnes */
.filter-col-4 {
    flex: 1 1 calc(25% - 1rem) !important;
}

/* Boutons d'action (appliquer / réinitialiser) */
.filter-actions {
    display:         flex;
    justify-content: flex-end;
    width:           100%;
    margin-top:      0.75rem;
}

.filter-actions .btn-global {
    padding:         0.55rem 1rem;
    border-radius:   1rem;
    font-size:       1rem;
    border:          none;
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.2s, transform 0.1s;
}

.filter-actions .btn-orange        { background-color: #F56F45; color: #fff; }
.filter-actions .btn-orange:hover  { background-color: #e56139; }
.filter-actions .btn-global:active { transform: scale(0.97); }

/* Responsive filtres */
@media (max-width: 900px) {
    .filter-item { flex: 1 1 calc(50% - 1rem); }
}

@media (max-width: 600px) {
    .filter-item { flex: 1 1 100%; }
}


/* ================================================================
   12. INPUT TAGS & SUGGESTIONS
   ================================================================ */

/* Champ avec tags (type tokenfield) */
.tags-input {
    display:          flex;
    flex-wrap:        wrap;
    gap:              0.4rem;
    padding:          0.15rem;
    padding-left:     0.35rem;
    border:           0.125rem solid #0E1822;
    border-radius:    1rem;
    background-color: #040A12;
    min-height:       2.5rem;
    align-items:      center;
    vertical-align:   middle;
}

.tags-input input {
    border:     none;
    outline:    none;
    background: transparent;
    color:      #E6ECF1;
    font-size:  0.9rem;
    flex:       1;
    min-width:  6rem;
}

/* Badge de tag */
.tag {
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    background-color: #F56F45;
    color:           white;
    padding:         0.2rem 0.5rem;
    border-radius:   0.5rem;
    font-size:       0.85rem;
}

.tag .remove-tag {
    cursor:      pointer;
    font-weight: bold;
}

/* Dropdown de suggestions */
.suggestions-container {
    position:   absolute;
    top:        calc(100% + 0.2rem);
    left:       0;
    width:      100%;
    background-color: #0b0e18;
    border-radius:    0.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    z-index:    50;
    display:    none;
    flex-direction: column;
    padding:    0.2rem 0;
    max-height: 200px;
    overflow-y: auto;
}

.suggestions-container .suggestions {
    padding:    0.4rem 0.6rem;
    color:      #E6ECF1;
    cursor:     pointer;
    font-size:  0.9rem;
    text-align: left;
}

.suggestions-container .suggestions:hover {
    background-color: #1f2233;
}


/* ================================================================
   13. PAGINATION
   ================================================================ */

.pagination-wrapper {
    display:         flex;
    justify-content: center;
    margin-top:      1rem;
    margin-bottom:   2rem;
    gap:             0.5rem;
    flex-wrap:       wrap;
}

.pagination-wrapper a,
.pagination-wrapper span {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       2.5rem;
    height:          2.5rem;
    padding:         0 0.5rem;
    background-color: #040A12;
    color:           #E6ECF1;
    border:          1px solid #0E1822;
    border-radius:   0.6rem;
    font-size:       0.9rem;
    text-decoration: none;
    cursor:          pointer;
    transition:      background-color 0.2s, transform 0.1s;
}

.pagination-wrapper a:hover      { background-color: #1f3a53; }
.pagination-wrapper a:active     { transform: scale(0.95); }

/* Page active */
.pagination-wrapper .active {
    background-color: #F56F45;
    color:            #FFFFFF;
    font-weight:      700;
    cursor:           default;
}

/* Page désactivée (précédent/suivant aux extrêmes) */
.pagination-wrapper .disabled {
    opacity: 0.4;
    cursor:  default;
}


/* ================================================================
   14. NOTIFICATIONS (toasts flottants)
   ================================================================ */

#notifications {
    position: fixed;
    top:      1.25rem;
    right:    1.25rem;
    z-index:  9999;
}

.notification {
    padding:       0.9375rem 1.25rem;
    margin-bottom: 0.625rem;
    border-radius: 0.5rem;
    color:         #fff;
    font-size:     0.90rem;
    box-shadow:    0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    opacity:       0;
    transform:     translateX(100%);
    transition:    all 0.4s ease;
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
}

.notification i {
    font-size:      1rem;
    vertical-align: middle;
    line-height:    1;
}

/* Entrée animée */
.notification.show {
    opacity:   1;
    transform: translateX(0);
}

/* Variantes sémantiques */
.notification.success { background: #27ae60; }
.notification.error   { background: #e74c3c; }
.notification.info    { background: #3498db; }


/* ================================================================
   15. COMPOSANTS OPÉRATEUR (.op-*)
   ================================================================ */

/* --- 15a. Sticky header (bandeau d'infos fixé en haut) --- */

.op-sticky-top {
    position:          sticky;
    top:               0;
    z-index:           2000;
    padding:           0.75rem 0;
    background:        linear-gradient(180deg, #071424 0%, rgba(7, 20, 36, 0.95) 100%);
    backdrop-filter:   blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.op-sticky-inner {
    background:   #040A12;
    border-radius: 0.75rem;
    color:        #fff;
    box-sizing:   border-box;
    border:       1px solid rgba(255, 255, 255, 0.08);
    overflow:     hidden;
    position:     relative;
    box-shadow:   0 4px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Barres de statut colorées (gauche et droite) */
.op-sticky-inner::before {
    content:  '';
    position: absolute;
    top:      0; left: 0; bottom: 0;
    width:    3px;
    background: var(--border-color, #3b82f6);
}

.op-sticky-inner::after {
    content:  '';
    position: absolute;
    top:      0; right: 0; bottom: 0;
    width:    3px;
    background: var(--border-color, #3b82f6);
}

/* Grille 4 colonnes */
.op-sticky-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0;
}

.op-sticky-item {
    display:       flex;
    align-items:   center;
    gap:           0.6rem;
    padding:       0.65rem 1rem;
    border-right:  1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition:    background 0.2s ease;
    min-width:     0;
}

.op-sticky-item:nth-child(4n)       { border-right:  none; }
.op-sticky-item:nth-last-child(-n+4){ border-bottom: none; }
.op-sticky-item:hover               { background: rgba(255, 255, 255, 0.03); }

/* Icône de l'item */
.op-item-icon {
    width:           28px;
    height:          28px;
    border-radius:   6px;
    background:      rgba(255, 255, 255, 0.05);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--border-color, #3b82f6);
    font-size:       0.8rem;
    flex-shrink:     0;
}

/* Contenu texte de l'item */
.op-item-content {
    min-width: 0;
    flex:      1;
}

.op-item-label {
    display:        block;
    font-size:      0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          rgba(255, 255, 255, 0.4);
    line-height:    1.2;
}

.op-item-value {
    display:       block;
    font-size:     0.8rem;
    font-weight:   500;
    color:         #fff;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    line-height:   1.3;
}

/* Responsive sticky header */
@media (max-width: 1200px) {
    .op-sticky-grid { grid-template-columns: repeat(2, 1fr); }
    .op-sticky-item:nth-child(2n) { border-right: none; }
}

@media (max-width: 768px) {
    .op-sticky-grid { grid-template-columns: 1fr; }
    .op-sticky-item { border-right: none !important; }
}

/* --- 15b. Briques & colonnes --- */

/* Conteneur de briques (grille externe) */
.op-briques-container {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1rem;
    margin-bottom:         1rem;
    align-items:           stretch;
    min-width:             0;
}

.op-briques-container.op-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-briques-container.op-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-briques-container.op-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Brique individuelle */
.op-brique {
    background-color: #152536;
    border-radius:    1rem;
    color:            #fff;
    box-sizing:       border-box;
    transition:       all 0.3s ease;
    overflow:         hidden;
    min-width:        0;
    display:          flex;
    flex-direction:   column;
}

/* Grille interne d'une brique */
.op-colonnes {
    display:               grid;
    grid-template-columns: 1fr;
    grid-auto-rows:        min-content;
    min-width:             0;
    flex:                  1;
}

.op-colonnes[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-colonnes[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-colonnes[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-colonnes[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.op-colonnes[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.op-colonnes[data-cols="7"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Cellule d'une brique */
.op-colonne {
    min-width:  0;
    color:      #fff;
    padding:    0.5rem 0.75rem;
    box-sizing: border-box;
    font-size:  0.90rem;
    display:    flex;
    align-items: center;
    gap:        0.5rem;
    overflow:   hidden;
}

.op-colonne-hdtable { background-color: #0b0e18; }
.op-colonne.dcolor  { background-color: #0F1A26; }
.op-colonne.center  { justify-content: center; }

/* Image CPE dans une cellule */
.img-cpe {
    width:              100%;
    max-width:          100%;
    max-height:         10rem;
    aspect-ratio:       4 / 3;
    background-size:    contain;
    background-position: center;
    background-repeat:  no-repeat;
    flex-shrink:        1;
}

/* Grille 12 colonnes pour briques custom */
.op-briques-container.op-custom {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Tailles de span disponibles (1 à 12) */
.op-brique.op-col-1  { grid-column: span 1;  }
.op-brique.op-col-2  { grid-column: span 2;  }
.op-brique.op-col-3  { grid-column: span 3;  }
.op-brique.op-col-4  { grid-column: span 4;  }
.op-brique.op-col-5  { grid-column: span 5;  }
.op-brique.op-col-6  { grid-column: span 6;  }
.op-brique.op-col-7  { grid-column: span 7;  }
.op-brique.op-col-8  { grid-column: span 8;  }
.op-brique.op-col-9  { grid-column: span 9;  }
.op-brique.op-col-10 { grid-column: span 10; }
.op-brique.op-col-11 { grid-column: span 11; }
.op-brique.op-col-12 { grid-column: span 12; }

/* Mode tableau dans une brique (label / valeur alignés) */
.op-colonnes.op-table .op-colonne {
    display:               grid;
    grid-template-columns: minmax(auto, max-content) minmax(0, 1fr);
    gap:                   0.5rem;
}

.op-colonnes.op-table .op-span-label  { margin-right: 0; justify-self: start; }
.op-colonnes.op-table .op-span-value  { justify-self: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Variante label à largeur fixe */
.op-colonnes.op-table-fixed .op-colonne {
    display:               grid;
    grid-template-columns: min(10rem, 40%) minmax(0, 1fr);
    gap:                   0.5rem;
}

.op-colonnes.op-table-fixed .op-span-label  { margin-right: 0; }
.op-colonnes.op-table-fixed .op-span-value  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Titre et HR hors grille dans les modes tableau */
.op-colonnes.op-table .op-colonne-titre,
.op-colonnes.op-table-fixed .op-colonne-titre { grid-template-columns: none; display: flex; }

.op-colonnes.op-table .op-hr,
.op-colonnes.op-table-fixed .op-hr            { grid-template-columns: none; }

/* Scroll horizontal sur une brique */
.op-brique.op-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
}

.op-brique.op-scroll-x > .op-colonnes {
    min-width: 100%;
    width:     max-content;
}

.op-brique.op-scroll-x > .op-colonnes[data-cols="2"] { grid-template-columns: repeat(2, minmax(1rem, auto)); }
.op-brique.op-scroll-x > .op-colonnes[data-cols="3"] { grid-template-columns: repeat(3, minmax(1rem, auto)); }
.op-brique.op-scroll-x > .op-colonnes[data-cols="4"] { grid-template-columns: repeat(4, minmax(1rem, auto)); }
.op-brique.op-scroll-x > .op-colonnes[data-cols="5"] { grid-template-columns: repeat(5, minmax(1rem, auto)); }
.op-brique.op-scroll-x > .op-colonnes[data-cols="6"] { grid-template-columns: repeat(6, minmax(1rem, auto)); }
.op-brique.op-scroll-x > .op-colonnes[data-cols="7"] { grid-template-columns: repeat(7, minmax(1rem, auto)); }
.op-brique.op-scroll-x .op-colonne { white-space: nowrap; }

/* Responsive briques */
@media (max-width: 75rem) {
    .op-briques-container.op-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .op-briques-container.op-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 62rem) {
    .op-briques-container.op-2,
    .op-briques-container.op-3,
    .op-briques-container.op-4,
    .op-briques-container.op-custom { grid-template-columns: 1fr; }

    .op-brique[class*="op-col-"]   { grid-column: span 1; }

    .op-colonnes[data-cols="2"],
    .op-colonnes[data-cols="3"],
    .op-colonnes[data-cols="4"],
    .op-colonnes[data-cols="5"],
    .op-colonnes[data-cols="6"],
    .op-colonnes[data-cols="7"]    { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
    .op-colonnes.op-table .op-colonne,
    .op-colonnes.op-table-fixed .op-colonne { grid-template-columns: 1fr; }

    .op-colonnes.op-table .op-span-label,
    .op-colonnes.op-table-fixed .op-span-label,
    .op-colonnes.op-table .op-span-value,
    .op-colonnes.op-table-fixed .op-span-value { white-space: normal; }
}

/* --- 15c. Titres avec actions --- */

.op-colonne-titre {
    grid-column:     1 / -1;
    color:           #F56F45;
    background-color: #040A12;
    font-weight:     600;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.op-titre-text {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.op-titre-actions {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    margin-left: auto;
}

/* Bouton icône dans le titre */
.op-titre-actions a,
.op-titre-actions button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           1.75rem;
    height:          1.75rem;
    border-radius:   0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    transition:      all 0.2s ease;
    text-decoration: none;
    font-size:       0.8rem;
}

.op-titre-actions a:hover,
.op-titre-actions button:hover {
    background-color: #F56F45;
    color:            #fff;
}

/* Variante bouton avec texte */
.op-titre-actions .op-btn-text {
    width:   auto;
    padding: 0 0.75rem;
    gap:     0.35rem;
    font-size: 0.75rem;
}

/* --- 15d. Séparateurs & labels --- */

/* Séparateur dégradé (utilise --border-color) */
.op-hr {
    grid-column: 1 / -1;
    border:      none;
    height:      1px;
    margin:      0;
    background:  linear-gradient(
            to right,
            transparent,
            var(--border-color, rgba(255, 255, 255, 0.3)),
            transparent
    );
}

/* Séparateur solide */
.op-hr-sep {
    grid-column:     1 / -1;
    border:          none;
    height:          1px;
    margin:          0;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Label descriptif (clé) */
.op-span-label {
    color:           #a0a8b0;
    font-weight:     500;
    display:         inline-flex;
    align-items:     center;
    gap:             0.35rem;
    margin-right:    0.25rem;
    font-size:       0.90rem;
    white-space:     nowrap;
}

.op-span-label i { font-size: 0.75rem; }

/* Lien texte discret */
.lien-txt-op {
    color:           #fff;
    text-decoration: none;
    transition:      color 0.3s ease;
    cursor:          pointer;
}

.lien-txt-op:hover { color: #F56F45; }

/* --- 15e. Boutons de colonne --- */

.op-colonne-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           1.75rem;
    height:          1.75rem;
    border-radius:   0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    color:           #F56F45;
    border:          none;
    cursor:          pointer;
    transition:      all 0.2s ease;
    font-size:       0.8rem;
}

/* Variante pleine largeur */
.op-colonne-btn-full {
    width:         auto !important;
    padding-left:  0.5rem;
    padding-right: 0.5rem;
}

.op-colonne-btn:hover { background-color: #F56F45; color: #fff; }
.op-colonne-btn i     { pointer-events: none; }

/* Variantes sémantiques */
.op-btn-success { background-color: #28a745 !important; color: #fff; }
.op-btn-error   { background-color: #dc3545 !important; color: #fff; }

/* Bloc de config masqué par défaut */
.op-config-hide {
    margin-top: 5rem;
    display:    none;
}

/* --- 15f. Ports RJ45 --- */

.op-ports-container {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.5rem;
    padding:         0.5rem;
    justify-content: center;
}

.op-port {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.25rem;
}

/* Corps du port */
.op-port-rj45 {
    width:         3.2rem;
    height:        3rem;
    background:    linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border:        2px solid #444;
    border-radius: 0.30rem;
    position:      relative;
    cursor:        pointer;
    transition:    all 0.2s ease;
}

/* Encoche du port */
.op-port-rj45::before {
    content:   '';
    position:  absolute;
    top:       4px;
    left:      50%;
    transform: translateX(-50%);
    width:     2.3rem;
    height:    1.7rem;
    background: #080808;
    border:    1px solid #222;
    border-radius: 2px;
}

/* LED du port */
.op-port-rj45::after {
    content:   '';
    position:  absolute;
    bottom:    2px;
    left:      50%;
    transform: translateX(-50%);
    width:     0.8rem;
    height:    0.3rem;
    background: #333;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.op-port-label {
    font-size:   0.65rem;
    color:       #888;
    font-weight: 500;
}

/* États des ports */
.op-port-rj45.active::after   { background: #00ff00; box-shadow: 0 0 6px #00ff00; }
.op-port-rj45.activity::after { background: #00ff00; box-shadow: 0 0 6px #00ff00; animation: blink 0.5s infinite; }
.op-port-rj45.error::after    { background: #ff3333; box-shadow: 0 0 6px #ff3333; }
.op-port-rj45.disabled        { opacity: 0.4; cursor: not-allowed; }
.op-port-rj45.poe             { border-color: #F56F45; }
.op-port-rj45:hover:not(.disabled) { border-color: #666; transform: translateY(-2px); }
.op-port-rj45.selected        { border-color: #F56F45; box-shadow: 0 0 8px rgba(245, 111, 69, 0.5); }


/* ================================================================
   16. ÉDITEUR DE CODE (.code-editor)
   ================================================================ */

.code-editor-wrapper {
    margin-top: 1.5rem;
}

.code-editor {
    display:          flex;
    background-color: #040A12;
    border:           0.125rem solid #0E1822;
    border-radius:    1rem;
    min-height:       30rem;
    font-family:      'Fira Code', 'Consolas', monospace;
}

/* Numéros de ligne */
.line-numbers {
    width:         3.5rem;
    background-color: #0E1822;
    color:         #7A8A99;
    text-align:    right;
    padding:       0.75rem 0.5rem;
    font-size:     0.90rem;
    line-height:   1.6rem;
    user-select:   none;
    overflow:      hidden;
    flex-shrink:   0;
    border-radius: 1rem 0 0 1rem;
}

.line-numbers div   { height: 1.5rem; }
.line-numbers .active {
    color:         #E6ECF1;
    background:    rgba(255, 255, 255, 0.06);
    border-radius: 0.25rem;
}

/* Zone de code */
.code-area {
    flex:     1;
    position: relative;
    overflow: hidden;
}

/* Couche de coloration syntaxique (lecture seule) */
.code-highlight {
    position:      absolute;
    inset:         0;
    padding:       0.75rem;
    margin:        0;
    border:        none;
    font:          inherit;
    font-size:     0.90rem;
    line-height:   1.5rem;
    color:         #E6ECF1;
    background:    transparent;
    white-space:   pre;
    overflow:      hidden;
    pointer-events: none;
    z-index:       1;
    tab-size:      4;
    -moz-tab-size: 4;
}

.code-highlight-content {
    display:    inline-block;
    white-space: pre;
    width:      max-content;
    min-width:  100%;
    will-change: transform;
}

/* Textarea transparent (saisie réelle) */
.code-textarea {
    position:   relative;
    z-index:    2;
    display:    block;
    width:      100%;
    min-height: 100%;
    border:     none;
    resize:     none;
    padding:    0.75rem;
    margin:     0;
    background: transparent;
    color:      transparent; /* texte masqué, on voit le highlight */
    font:       inherit;
    font-size:  0.90rem;
    line-height: 1.5rem;
    outline:    none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: pre;
    word-break: normal;
    caret-color: #E6ECF1;
    tab-size:   4;
    -moz-tab-size: 4;
}

.code-textarea::selection { background: rgba(100, 160, 255, 0.25); }

.code-textarea::-webkit-scrollbar       { width: 0.35rem; height: 0.35rem; }
.code-textarea::-webkit-scrollbar-track { background: transparent; }
.code-textarea::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 1rem; }
.code-textarea::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }

/* Mise en évidence des accolades */
.brace-highlight { background: rgba(245, 111, 69, 0.20); color: #F56F45; }
.brace-char      { color: #F56F45; }

/* Bouton de marqueur de template */
.marqueur-btn {
    display:      inline-block;
    padding:      5px 12px;
    border-radius: 6px;
    background:   rgba(245, 111, 69, 0.20);
    color:        #F56F45;
    font-weight:  bold;
    cursor:       pointer;
    transition:   background 0.3s, color 0.3s;
    user-select:  none;
}

.marqueur-btn:hover {
    background: rgba(245, 111, 69, 0.40);
    color:      #F56F45;
}


/* ================================================================
   17. BLOC DE CODE (.code-block, lecture seule)
   ================================================================ */

.code-block {
    border:           0.125rem solid #0E1822;
    border-radius:    1rem;
    overflow:         hidden;
    background-color: #040A12;
    font-family:      'Fira Code', 'Consolas', 'Monaco', monospace;
}

/* En-tête du bloc (titre + bouton copier) */
.code-block-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.65rem 1rem;
    background-color: #0E1822;
    border-bottom:   0.0625rem solid #1A2736;
    user-select:     none;
}

.code-block-title {
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
    color:          #7A8A99;
    font-size:      0.8rem;
    font-weight:    500;
    letter-spacing: 0.02em;
}

.code-block-title-icon {
    width:   1rem;
    height:  1rem;
    opacity: 0.6;
}

/* Bouton de copie */
.code-block-copy-btn {
    display:          flex;
    align-items:      center;
    gap:              0.4rem;
    padding:          0.35rem 0.75rem;
    border:           0.0625rem solid #1A2736;
    border-radius:    0.5rem;
    background:       rgba(255, 255, 255, 0.03);
    color:            #7A8A99;
    font-size:        0.75rem;
    font-family:      inherit;
    cursor:           pointer;
    transition:       all 0.2s ease;
}

.code-block-copy-btn:hover  { background: rgba(255, 255, 255, 0.08); color: #E6ECF1; border-color: #2A3A4A; }
.code-block-copy-btn:active { transform: scale(0.96); }
.code-block-copy-btn.copied { color: #4ADE80; border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.08); }
.code-block-copy-btn svg    { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }

/* Corps du bloc */
.code-block-body {
    display:  flex;
    overflow: hidden;
}

/* Numéros de ligne (lecture seule) */
.code-block-lines {
    width:         3.5rem;
    background-color: #0A1018;
    color:         #3A4A5A;
    text-align:    right;
    padding:       0.75rem 0.6rem;
    font-size:     0.78rem;
    line-height:   1.5rem;
    user-select:   none;
    flex-shrink:   0;
    border-right:  0.0625rem solid #0E1822;
    overflow:      hidden;
}

.code-block-lines div { height: 1.5rem; }

/* Contenu du code */
.code-block-content {
    flex:       1;
    overflow-x: auto;
    overflow-y: hidden;
    padding:    0.75rem 1rem;
}

.code-block-content::-webkit-scrollbar       { height: 0.3rem; }
.code-block-content::-webkit-scrollbar-track { background: transparent; }
.code-block-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 1rem; }
.code-block-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }

.code-block-content pre {
    margin:      0;
    padding:     0;
    font:        inherit;
    font-size:   0.85rem;
    line-height: 1.5rem;
    color:       #E6ECF1;
    white-space: pre;
    tab-size:    4;
    -moz-tab-size: 4;
}


/* ================================================================
   18. TIMELINE
   ================================================================ */

/* Conteneur principal */
.timeline-wrapper {
    background:    #040A12;
    border-radius: 1rem;
    padding:       0;
    max-width:     100%;
    margin:        1rem auto;
    border:        1px solid rgba(255, 255, 255, 0.08);
    overflow:      hidden;
}

/* Bandeau titre */
.timeline-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.6rem 1.2rem;
    background:      #040A12;
    border-bottom:   1px solid rgba(255, 255, 255, 0.06);
}

.timeline-header-text {
    font-size:   0.85rem;
    font-weight: 600;
    color:       #F56F45;
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.timeline-header-actions {
    display: flex;
    gap:     0.4rem;
}

/* Boutons du header */
.timeline-header-actions a,
.timeline-header-actions button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           1.75rem;
    height:          1.75rem;
    border-radius:   0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    transition:      all 0.2s ease;
    text-decoration: none;
    font-size:       0.8rem;
}

.timeline-header-actions a:hover,
.timeline-header-actions button:hover {
    background-color: #F56F45;
    color:            #fff;
}

/* Corps */
.timeline-body { padding: 1rem 2rem; }

/* Rangée d'étapes */
.timeline {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    position:        relative;
    padding-top:     0.5rem;
}

/* Barre de fond */
.timeline-track {
    position:      absolute;
    top:           1.55rem;
    left:          4%;
    right:         4%;
    height:        0.35rem;
    background:    #0E1E2E;
    border-radius: 1rem;
    z-index:       0;
}

/* Barre de progression (largeur via CSS var --progress) */
.timeline-track-fill {
    position:      absolute;
    top:           0;
    left:          0;
    height:        100%;
    width:         var(--progress, 0%);
    background:    var(--accent, #2196F3);
    border-radius: 1rem;
    transition:    width 0.6s ease;
    box-shadow:    0 0 8px var(--accent, #2196F3),
    0 0 18px color-mix(in srgb, var(--accent, #2196F3) 40%, transparent);
}

/* Étape individuelle */
.timeline-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.5rem;
    position:       relative;
    z-index:        1;
    flex:           1;
}

/* Bulle icône */
.timeline-step-icon {
    width:         2.6rem;
    height:        2.6rem;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    #0E1E2E;
    border:        2px solid #1A2E42;
    transition:    background 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease, transform 0.35s ease;
}

.timeline-step-icon i {
    font-size:  1rem;
    color:      #2A3F54;
    transition: color 0.35s ease;
}

/* Label de l'étape */
.timeline-step-label {
    font-size:      0.7rem;
    font-weight:    500;
    color:          #2A3F54;
    text-align:     center;
    line-height:    1.2;
    letter-spacing: 0.02em;
    transition:     color 0.35s ease;
}

/* État : terminé */
.timeline-step.done .timeline-step-icon {
    background:   color-mix(in srgb, var(--accent, #2196F3) 12%, #0E1E2E);
    border-color: var(--accent, #2196F3);
}
.timeline-step.done .timeline-step-icon i  { color: var(--accent, #2196F3); }
.timeline-step.done .timeline-step-label   { color: color-mix(in srgb, var(--accent, #2196F3) 70%, #fff); }

/* État : actif */
.timeline-step.active .timeline-step-icon {
    background:   var(--accent, #2196F3);
    border-color: var(--accent, #2196F3);
    transform:    scale(1.15);
    box-shadow:   0 0 0 4px  color-mix(in srgb, var(--accent, #2196F3) 20%, transparent),
    0 0 14px   color-mix(in srgb, var(--accent, #2196F3) 45%, transparent);
}
.timeline-step.active .timeline-step-icon i { color: #fff; }
.timeline-step.active .timeline-step-label  { color: #fff; font-weight: 700; }


/* ================================================================
   19. CASES À COCHER (.cb-*)
   ================================================================ */

/* Masquer la checkbox native */
input[type="checkbox"] {
    display: none;
}

/* Label cliquable */
.cb-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    user-select: none;
}

/* Carré de la checkbox */
.cb-box {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #0E1822;
    background: #040A12;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Hover effect */
.cb-label:hover .cb-box {
    border-color: #F56F45;
    background: rgba(245, 111, 69, 0.08);
}

/* Checkmark */
.cb-checkmark {
    width: 12px;
    height: 10px;
    stroke: white;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: scale(0);
    opacity: 0;
    transition: all 0.2s ease;
}

/* Checkbox cochée */
.cb-label input:checked ~ .cb-box {
    background: #F56F45;
    border-color: #F56F45;
}

.cb-label input:checked ~ .cb-box .cb-checkmark {
    transform: scale(1);
    opacity: 1;
}

/* État indéterminé */
.cb-label.indeterminate .cb-box {
    background: #F56F45;
    border-color: #F56F45;
}

.cb-label.indeterminate .cb-dash {
    opacity: 1;
}

/* Dash pour indéterminé */
.cb-dash {
    position: absolute;
    width: 12px;
    height: 2px;
    background: white;
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* État désactivé */
.cb-label.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Classe pour doubler la taille */
.cb-large .cb-box {
    width: 44px;    /* 22px x2 */
    height: 44px;
    border-radius: 12px; /* doublé également */
}

.cb-large .cb-box .cb-checkmark {
    width: 24px;    /* 12px x2 */
    height: 20px;   /* 10px x2 */
}

.cb-large .cb-dash {
    width: 24px;
    height: 4px;
    border-radius: 2px;
}

.cb-large {
    font-size: 20px; /* texte légèrement plus grand pour équilibre */
}


/* ================================================================
   20. UTILITAIRES & ANIMATIONS
   ================================================================ */

/* Rotation infinie (icône de chargement) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.rotate-sync {
    animation: spin 1s linear infinite;
}

/* Clignotement (LED de port) */
@keyframes blink {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.3; }
}

/* Pre formaté (informations / liens) */
.informations_liens_pre {
    margin:      0;
    padding:     1rem;
    font-family: 'Nunito', sans-serif;
    font-size:   1rem;
    line-height: 1.5rem;
    color:       #E6ECF1;
    white-space: pre-wrap;
    tab-size:    4;
    -moz-tab-size: 4;
}


/* ================================================================
   21. BOUTONS SCROLL (flottants bas-droite)
   ================================================================ */

.scroll-controls {
    position:       fixed;
    right:          1.0rem;
    bottom:         1.5rem;
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
    z-index:        3000;
}

.scroll-controls button {
    width:         2.0rem;
    height:        2.0rem;
    border-radius: 50%;
    background-color: #040A12;
    border:        1px solid #0E1822;
    color:         #F56F45;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 0.4rem 1rem rgba(0, 0, 0, 0.6);
    transition:    background-color 0.2s, transform 0.15s, opacity 0.2s;
    opacity:       0;
    pointer-events: none;
}

.scroll-controls button i  { font-size: 1rem; }

.scroll-controls button:hover {
    background-color: #F56F45;
    color:            #FFFFFF;
    transform:        translateY(-2px);
}

.scroll-controls button:active { transform: scale(0.92); }

/* Visible (ajouté par JS au scroll) */
.scroll-controls.show button {
    opacity:       1;
    pointer-events: auto;
}

@media (max-width: 600px) {
    .scroll-controls { right: 0.7rem; bottom: 1rem; }
}


/* ================================================================
   22. PAGE D'IDENTIFICATION (login, accueil)
   ================================================================ */

.identification-logo {
    width:        min(15rem, 60%);
    height:       auto;
    margin-left:  auto;
    margin-right: auto;
}

.identification-titre {
    color:          #FFFFFF;
    font-size:      2rem;
    letter-spacing: 0.2rem;
    word-spacing:   0.2rem;
    text-align:     center;
}

.identification-titre,
.identification-input {
    width:  min(30rem, 90%);
    margin: 0 auto;
}

.identification-input {
    background-color: #040A12;
    padding:          0.75rem;
    border-radius:    1.3rem;
    color:            #E6ECF1;
    font-size:        1rem;
    text-align:       center;
    letter-spacing:   0.1rem;
    margin-top:       1rem;
    border:           0.125rem solid #0E1822;
    transition:       border-color 0.3s ease;
}

.identification-input:focus          { border-color: #032859; }
.identification-input::placeholder   { color: #7A8A99; opacity: 1; }

/* Cartouche / badge mis en évidence (ex : version, rôle) */
.identification-cartouche {
    background-color: #F56F45;
    color:            #ffffff;
    padding:          0.20rem 0.40rem;
    border-radius:    0.6rem;
    display:          inline-flex;
    vertical-align:   middle;
    align-items:      center;
    justify-content:  center;
    font-weight:      700;
    text-align:       center;
    letter-spacing:   0;
    word-spacing:     0;
    line-height:      1;
}

/* ================================================================
   23. AVANT-VENTE
   ================================================================ */
.projet-content {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.form-row-separator {
    display: flex;
    gap: 1.5rem;
    padding: 0.50rem;
    border-radius: 1rem;
    background-color: #C45A2F;
    font-size: 1.3rem;
    font-weight: bold;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Icône propre */
.form-row-separator .arrow {
    transition: transform 0.3s ease;
    transform: translateY(1px);
}

/* Rotation quand ouvert */
.form-row-separator.active .arrow {
    transform: rotate(180deg);
}

/* Hover sympa */
.form-row-separator:hover {
    background-color: #d96a3f;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Effet clic */
.form-row-separator:active {
    transform: scale(0.98);
}

/* Etat ouvert */
.form-row-separator.active {
    background-color: #a94a25;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* ================================================================
   23. GESTION DES FICHIERS
   ================================================================ */
/* Container ligne fichier */
.file-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    background-color: #040A12;
    border: 2px solid #0E1822;
    border-radius: 12px;

    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
}

/* Hover sur la ligne */
.file-row:hover {
    border-color: #F56F45;
    background-color: rgba(245, 111, 69, 0.05);
}

/* Icône fichier */
.file-icon-look {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #F56F45;

    font-size: 0.9rem;
}

/* Infos fichier */
.file-info {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;

    flex: 1;
    min-width: 0;
}

/* Nom de fichier */
.file-name {
    color: #E6ECF1;
    font-size: 0.85rem;
    font-weight: 500;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Extension */
.file-ext {
    color: #7A8A99;
    font-size: 0.75rem;
}

/* Actions (boutons) */
.file-actions {
    display: flex;
    gap: 0.4rem;
}

/* Boutons individuels */
.file-actions a,
.file-actions button {
    width: 1.8rem;
    height: 1.8rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 0.4rem;
    border: none;

    background-color: rgba(255, 255, 255, 0.08);
    color: #7A8A99;

    cursor: pointer;
    transition: all 0.2s ease;

    text-decoration: none; /* pour les liens */
}

/* Hover bouton download / général */
.file-actions a:hover,
.file-actions button:hover:not(.danger) {
    background-color: #F56F45;
    color: #fff;
}

/* Bouton danger */
.file-actions button.danger:hover {
    background-color: #dc3545;
    color: #fff;
}

/* Icônes dans les boutons */
.file-actions a i,
.file-actions button i {
    font-size: 0.9rem;
}

/* Si tu veux forcer la couleur de l’icône download */
.file-actions a i {
    color: #F56F45;
}
.file-actions a:hover i {
    color: #fff; /* icône devient blanc sur hover */
}

/* ================================================================
   25. STATISTIQUES OP
   ================================================================ */

/* --- 25a. Briques --- */
.bricks-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    padding: 1rem 0;
}

.brick {
    background-color: #152536;
    border-radius: 1.3rem;
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Barre d'accentuation gauche */
.brick::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background-color: var(--brick-color, #F56F45);
    border-radius: 1.3rem 0 0 1.3rem;
}

.brick-icon  { font-size: 16px; color: rgba(255, 255, 255, 0.75); margin-bottom: 0.2rem; }
.brick-value { font-size: 2rem; font-weight: 600; color: #F56F45; line-height: 1; }
.brick-label { font-size: 0.78rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; }
.brick-desc  { font-size: 0.82rem; color: rgba(255,255,255,0.75); margin-top: 0.25rem; line-height: 1.4; }

.brick-trend { font-size: 0.78rem; display: flex; align-items: center; gap: 4px; margin-top: 0.2rem; }
.trend-up    { color: #4cd68a; }
.trend-down  { color: #f05e5e; }

.trend-dot          { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.trend-up   .trend-dot { background: #4cd68a; }
.trend-down .trend-dot { background: #f05e5e; }


/* --- 25b. Graphiques --- */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    padding: 1rem 0;
}


.chart-brick {
    background-color: #152536;
    border-radius: 1.3rem;
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.chart-brick::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background-color: #F56F45;
    border-radius: 1.3rem 0 0 1.3rem;
}

.chart-brick-titre {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

.chart-wrapper {
    max-height: 250px;
    width: 100%;
}
.chart-brick.col-2 { grid-column: span 2; } /* 33 % */
.chart-brick.col-3 { grid-column: span 3; } /* 50 % */
.chart-brick.col-4 { grid-column: span 4; } /* 66 % */
.chart-brick.col-6 { grid-column: span 6; } /* 100 % */



/* ================================================================
   26. DASHBOARD
   ================================================================ */

/* ── Fond animé sur la page dashboard ── */
body.page-dashboard::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
            radial-gradient(ellipse 60% 40% at 20% 10%, rgba(245,111,69,0.07) 0%, transparent 60%),
            radial-gradient(ellipse 50% 60% at 80% 80%, rgba(21,37,54,0.8) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* ── Wrapper général du dashboard ── */
.dashboard-wrapper {
    display:        flex;
    flex-direction: column;
    gap:            2rem;
    width:          100%;
    padding-top:    1rem;
    padding-bottom: 4rem;
    position:       relative;
    z-index:        1;
}

/* ── Bandeau connexion ── */
.connexion-banner {
    background-color: #040A12;
    border:           1px solid #0E1822;
    border-radius:    1rem;
    padding:          0.6rem 1.2rem;
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    font-size:        0.82rem;
    color:            #7A8A99;
    gap:              1rem;
    flex-wrap:        wrap;
}

.connexion-banner .cb-item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.connexion-banner .cb-item i {
    color:     #F56F45;
    font-size: 0.85rem;
}

.connexion-banner .cb-val {
    color:       #E6ECF1;
    font-weight: 600;
}

/* ── Section Hello ── */
.hello-section {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.3rem;
}

.hello-label {
    font-size:      0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color:          #7A8A99;
}

.hello-title {
    font-size:   clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    color:        #fff;
    line-height:  1.1;
    min-height:   1.2em;
}

.hello-title .typed-cursor {
    display:          inline-block;
    width:            3px;
    height:           0.85em;
    background:       #F56F45;
    margin-left:      4px;
    vertical-align:   middle;
    animation:        dash-blink-cursor 0.75s steps(1) infinite;
    border-radius:    2px;
}

@keyframes dash-blink-cursor {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.hello-sub {
    font-size:  0.95rem;
    color:      #7A8A99;
    margin-top: 0.4rem;
}

/* ── Séparateur de section ── */
.dash-sep {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    color:          #7A8A99;
    font-size:      0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.dash-sep::before,
.dash-sep::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: linear-gradient(to right, transparent, rgba(245,111,69,0.3), transparent);
}

/* ── Grille de cartes d'accès rapide ── */
.quick-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap:                   1rem;
}

/* ── Carte d'accès ── */
.quick-card {
    background-color: #152536;
    border-radius:    1.3rem;
    padding:          1.4rem 1.6rem;
    display:          flex;
    flex-direction:   column;
    gap:              0.75rem;
    text-decoration:  none;
    color:            #fff;
    position:         relative;
    overflow:         hidden;
    transition:       transform 0.22s cubic-bezier(.2,.9,.2,1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
    border:           1px solid transparent;
    box-shadow:       0 0.5rem 1.5rem rgba(0,0,0,0.35);
}

/* Barre colorée gauche */
.quick-card::before {
    content:       '';
    position:      absolute;
    top: 0; left: 0;
    width:         4px;
    height:        100%;
    background-color: var(--qc-color, #F56F45);
    border-radius: 1.3rem 0 0 1.3rem;
    transition:    width 0.25s ease;
}

/* Glow de fond */
.quick-card::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     radial-gradient(circle at 80% 20%, var(--qc-glow, rgba(245,111,69,0.06)) 0%, transparent 65%);
    pointer-events: none;
    transition:     opacity 0.3s;
    opacity:        0;
}

.quick-card:hover {
    transform:    translateY(-4px) scale(1.01);
    box-shadow:   0 1.2rem 2.5rem rgba(0,0,0,0.5),
    0 0 0 1px var(--qc-color, #F56F45);
    border-color: var(--qc-color, #F56F45);
    color:        #fff;
}

.quick-card:hover::before { width: 6px; }
.quick-card:hover::after  { opacity: 1; }
.quick-card:active        { transform: scale(0.97); }

/* Icône de la carte */
.qc-icon-wrap {
    width:            2.6rem;
    height:           2.6rem;
    border-radius:    0.75rem;
    background-color: var(--qc-dim, rgba(245,111,69,0.12));
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.1rem;
    color:            var(--qc-color, #F56F45);
    transition:       transform 0.2s ease;
}

.quick-card:hover .qc-icon-wrap {
    transform: rotate(-6deg) scale(1.15);
}

.qc-label {
    font-size:      0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          #7A8A99;
}

.qc-title {
    font-size:   1rem;
    font-weight: 700;
    color:       #fff;
    line-height: 1.25;
}

.qc-desc {
    font-size:   0.8rem;
    color:       #7A8A99;
    line-height: 1.4;
    flex:        1;
}

.qc-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto;
}

.qc-footer span {
    font-size:      0.72rem;
    color:          var(--qc-color, #F56F45);
    font-weight:    600;
    letter-spacing: 0.05em;
}

.qc-footer i {
    color:      var(--qc-color, #F56F45);
    font-size:  0.85rem;
    transition: transform 0.2s ease;
}

.quick-card:hover .qc-footer i {
    transform: translateX(5px);
}

/* ── Briques de statistiques ── */
.dash-stats-row {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap:                   1rem;
}

/* ── Animations d'entrée ── */
@keyframes dash-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.dash-anim               { animation: dash-fade-up 0.45s cubic-bezier(.2,.9,.2,1) both; }
.dash-anim.delay-1       { animation-delay: 0.05s; }
.dash-anim.delay-2       { animation-delay: 0.12s; }
.dash-anim.delay-3       { animation-delay: 0.20s; }
.dash-anim.delay-4       { animation-delay: 0.28s; }
.dash-anim.delay-5       { animation-delay: 0.36s; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .quick-grid      { grid-template-columns: 1fr 1fr; }
    .dash-stats-row  { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .quick-grid      { grid-template-columns: 1fr; }
    .dash-stats-row  { grid-template-columns: repeat(2, 1fr); }
    .connexion-banner { flex-direction: column; align-items: flex-start; }
}