@keyframes fadeIn {
            from {
                opacity: 0;
                transform: translate(-50%, -50%);
            }
            to {
                opacity: 1;
                transform: translate(-50%, -50%);
            }
        }

        body {
            background: #1a1a1a;
            color: #fff;
            font-family: 'Roboto', sans-serif;
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            overflow-x: hidden;
        }

.clock {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5em;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0);
    border-radius: 10px;
    transition: color 1s ease-in-out, text-shadow 1s ease-in-out;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.0);
    animation: fadeIn 4.2s ease-out;

    /* largeur personnalisée */
    width: 600px;         /* fixe la largeur */
    max-width: 90vw;      /* limite sur petits écrans */
}

        .clock .date {
            font-size: 1.2em;
            margin-top: 10px;
            font-weight: 300;
        }

        /* Icône plein écran */
        .fullscreen-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 10px;
            font-size: 2em;
            background: rgba(0, 0, 0, 0.6);
            border: none;
            color: #fff;
            border-radius: 25%;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        .fullscreen-btn:hover {
            background: rgba(0, 255, 255, 0.8);
            box-shadow: 0 0 20px rgba(0, 255, 255, 1);
        }

        .fullscreen-btn i {
            pointer-events: none;
        }

/* Bouton HALO — Rouge Neon Glass (compact) */
#toggle-halo {
  font-size: 14px;
  position: absolute;
  z-index: 1001;
  top: 150px;
  right: 10px;

  /* Taille réduite */
  width: 35px;
  height: 35px;

  border: none;
  border-radius: 50%;

  background: rgba(255, 70, 50, 0.15);
  backdrop-filter: blur(5px);

  color: #fff;
  cursor: pointer;

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

  /* Glow réduit (proportionnel à la nouvelle taille) */
  box-shadow:
    0 0 8px rgba(255, 80, 60, 0.6),
    inset 0 0 5px rgba(255, 140, 120, 0.3);

  transition: all 0.25s ease-in-out;
}

#toggle-halo:hover {
  transform: scale(1.15);

  box-shadow:
    0 0 14px rgba(255, 60, 40, 0.9),
    inset 0 0 8px rgba(255, 180, 160, 0.4);
}

#toggle-halo.off {
  background: rgba(100, 100, 100, 0.1);
  box-shadow:
    0 0 8px rgba(80, 80, 80, 0.6),
    inset 0 0 5px rgba(120, 120, 120, 0.4);
}

/* Conteneur des liens */
.links-container {
    flex-direction: column; align-items: center; /* Empile les liens “normaux” */
    margin-top: 35px; /* ajuste ici la hauteur entre l’horloge et les liens */
    position: fixed;
    display: flex;
    justify-content: center;
    gap: 15px;
    opacity: 0;
    animation: fadeInUp 1.2s ease-out forwards;
    flex-wrap: wrap;  /* Permet de faire passer les éléments à la ligne */
    max-width: 100%;   /* Limite la largeur du conteneur à 80% pour éviter qu'il soit trop large */
    z-index: 10; /* S'assurer que les liens sont bien au-dessus du canvas ou autres éléments */
}

/* Style général des liens */
.link-btn {
    display: inline-flex;
    align-items: center; /* Alignement des éléments à l'horizontale */
    padding: 12px 22px;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: 0.3s ease; /* Transition plus fluide */
    box-shadow: 0 0 20px rgb(79 79 79); /* Ombre par défaut */
    text-align: center;
    cursor: pointer;
    margin: 5px;  /* Ajoute un petit espacement entre les boutons */
}

.link-btn:hover {
    /* Utilisation de la variable CSS pour l'ombre */
    box-shadow: 0 0 20px var(--box-shadow-color);
}

/* Alignement des icônes à gauche du texte */
.link-btn i {
    margin-right: 10px; /* Espacement entre l'icône et le texte */
    font-size: 1.2em; /* Taille de l'icône ajustée */
    vertical-align: middle; /* Centrer l'icône verticalement */
}

/* Ajout de la bordure autour du bouton */
.link-btn::before, .link-btn::after {
    content: '';
    position: absolute;
    background: linear-gradient(45deg, #00d1b2, #ff6347, #ff6347, #00d1b2);
    transition: all 0.4s ease;
    opacity: 0;
}

.link-btn::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
}

.link-btn::after {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
}

.link-btn:hover::before, .link-btn:hover::after {
    opacity: 1;
    width: 100%;  /* Apparition de bordure */
}

/* Animation d'entrée des liens */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ligne spéciale pour forcer côte à côte */
.link-row{
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:nowrap;              /* côte à côte sur desktop */
}

/* Écrase les largeurs 100% héritées */
.link-row .link-btn{
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto;                 /* ne pas s’étirer */
}

/* Responsive : repasse l’un sous l’autre si écran étroit */
@media (max-width: 640px){
  .link-row{ flex-wrap:wrap; }
  .link-row .link-btn{ flex:1 1 100%; }
}

/* ================================
   1) Bouton utilisateur — neutre glass
   ================================ */
.btn-user-save {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(255,255,255,0.10);
    color: #e6e6e6;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: .3px;
    transition: all .25s ease-out;
    backdrop-filter: blur(4px);
}

.btn-user-save:hover {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(255,255,255,0.25);
    transform: scale(1.035);
}


/* ================================
   2) Bouton admin — chaud / affirmé
   ================================ */
.btn-admin-save {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(255,120,70,0.18);
    color: #ffdccc;
    font-weight: 600;
    border: 1px solid rgba(255,120,70,0.45);
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: .3px;
    box-shadow: 0 0 10px rgba(255,120,70,0.25);
    transition: all .25s ease-out;
    backdrop-filter: blur(4px);
}

.btn-admin-save:hover {
    background: rgba(255,120,70,0.32);
    box-shadow:
        0 0 16px rgba(255,140,90,0.45),
        0 0 26px rgba(255,120,70,0.30);
    color: #fff2e8;
    transform: scale(1.04);
}


/* ================================
   3) Boutons d'action — bleu
   (ex: Suivi / commentaires)
   ================================ */
.btn-action {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(70,150,255,0.20);
    color: #d8e7ff;
    font-weight: 600;
    border: 1px solid rgba(70,150,255,0.45);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all .25s ease-out;
    backdrop-filter: blur(4px);
}

.btn-action:hover {
    background: rgba(70,150,255,0.32);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(70,150,255,0.35);
    transform: scale(1.045);
}
/* ================================
   4) Danger — suppression
   ================================ */
.btn-danger {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(200, 0, 0, 0.18);
    color: #fb0000;
    font-weight: 600;
    border: 1px solid rgba(200, 0, 0, 0.45);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.9;
    letter-spacing: .3px;
    transition: all .25s ease-out;
    backdrop-filter: blur(4px);
}

.btn-danger:hover {
    background: rgba(200, 0, 0, 0.30);
    color: #fff0f0;
    box-shadow: 0 0 16px rgba(200, 0, 0, 0.45);
    box-shadow: 0 0 24px rgba(200, 20, 20, 0.30);
    transform: scale(1.045);
}
/* ================================
   5) Bouton "Retour au tableau"
   (déjà validé — conservé)
   ================================ */
.btn-action {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(0, 86, 179, 0.15); /* bleu transparent et lisible */
    color: #003c7a; /* bleu foncé lisible */
    font-weight: 600;
    border: 1px solid rgba(0, 86, 179, 0.45);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all .25s ease-out;
    backdrop-filter: blur(4px);
}

.btn-action:hover {
    background: rgba(0, 86, 179, 0.25);
    color: #001e3d; /* bleu encore plus lisible */
    box-shadow: 0 0 10px rgba(0, 86, 179, 0.35);
    transform: scale(1.045);
}

.btn-update {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(0, 120, 255, 0.22); /* bleu clair visible */
    color: #e9f2ff;                      /* texte très clair = lisible */
    font-weight: 600;
    border: 1px solid rgba(0, 120, 255, 0.55);
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: .3px;
    transition: all .25s ease-out;
    backdrop-filter: blur(4px);
}

.btn-update:hover {
    background: rgba(0, 150, 255, 0.35);
    color: #ffffff; /* blanc pur en hover pour contraste max */
    box-shadow:
        0 0 14px rgba(0, 150, 255, 0.55),
        0 0 24px rgba(0, 120, 255, 0.35);
    transform: scale(1.045);
}

#fullscreenBtn {
    position: fixed;
    bottom: 12px;
    right: 12px;

    /* Fond plus sombre, style du site */
    background-color: rgba(0, 0, 0, 0.35);

    /* Couleur de l’icône */
    color: #ff5733d0;

    border: none;

    /* Taille réduite */
    padding: 12px 14px;
    font-size: 22px; /* avant 30px */

    border-radius: 18%;
    cursor: pointer;
    z-index: 9999;

    opacity: 0.9;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;

    /* Glow léger orange/cyan comme ton thème */
    box-shadow: 0 0 6px rgba(255, 87, 51, 0.5),
                0 0 8px rgba(0, 255, 255, 0.15);
}

#fullscreenBtn:hover {
    background-color: rgba(0, 0, 0, 0.55);
    color: #ff5733; /* plus vif */
    transform: scale(1.08);

    box-shadow: 0 0 10px rgba(255, 87, 51, 0.7),
                0 0 14px rgba(0, 255, 255, 0.25);
}

.notif-sound-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1001;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    transition: 0.2s ease-in-out;
}

.notif-sound-btn.on {
    background: rgba(40, 167, 69, 0.9);   /* vert */
    border-color: rgba(200,255,200,0.8);
}

.notif-sound-btn.off {
    background: rgba(220, 53, 69, 0.9);   /* rouge */
    border-color: rgba(255,200,200,0.8);
}

.mail-status-indicator {
    font-weight: bold;
    pointer-events: auto;
}

.mail-status-indicator:hover {
    filter: brightness(1.4);
}

/* Badge statut : style unifié (même logique que badge-user-new) Liés aux fichiers fonctions */
.badge-statut {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #000;
}

/* Statut : En attente */
.badge-attente {
    background: #fd7e14; /* orange chaud */
}

/* Statut : En cours */
.badge-encours {
    background: #0dcaf0; /* bleu clair */
}

/* Statut : Terminé */
.badge-termine {
    background: #20c997; /* vert clair */
}

/* Cellule de statut (remplit toute la case) */
td.td-statut {
    text-align: center;
    font-weight: 600;
    padding: 6px 10px;
    color: #fff;
    white-space: nowrap;
    max-width: 140px;
    width: 140px;
    white-space: nowrap;
    text-align: center;
}

/* Icône dans la cellule */
td.td-statut i {
    margin-right: 6px;
}

/* Variantes */
td.td-statut.attente {
    background-color: #fd7e14; /* orange */
}

td.td-statut.encours {
    background-color: #28a745; /* bleu */
}

td.td-statut.termine {
    background-color: #28a745; /* vert */
}



/* Bouton HALO — Rouge Neon Glass (compact) */
#toggle-halo {
  font-size: 14px;
  position: absolute;
  z-index: 1001;
  top: 150px;
  right: 10px;

  /* Taille réduite */
  width: 35px;
  height: 35px;

  border: none;
  border-radius: 50%;

  background: rgba(255, 70, 50, 0.15);
  backdrop-filter: blur(5px);

  color: #fff;
  cursor: pointer;

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

  /* Glow réduit (proportionnel à la nouvelle taille) */
  box-shadow:
    0 0 8px rgba(255, 80, 60, 0.6),
    inset 0 0 5px rgba(255, 140, 120, 0.3);

  transition: all 0.25s ease-in-out;
}

#toggle-halo:hover {
  transform: scale(1.15);

  box-shadow:
    0 0 14px rgba(255, 60, 40, 0.9),
    inset 0 0 8px rgba(255, 180, 160, 0.4);
}

#toggle-halo.off {
  background: rgba(100, 100, 100, 0.1);
  box-shadow:
    0 0 8px rgba(80, 80, 80, 0.6),
    inset 0 0 5px rgba(120, 120, 120, 0.4);
}
/* =========================
   Lié au canvas 
   ========================= */
.btn-canvas-toggle {
    position: absolute;
    top: 190px;
    right: 5px;
    z-index: 300;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,0.6);
}

.btn-canvas-toggle:hover {
    background: rgba(20,20,20,0.9);
}

/* Quand on coupe le fond animé */
body.canvas-off {
    background: #000 !important;   /* fond noir simple */
}

/* Si ton canvas est positionné en full screen, on le coupe aussi visuellement */
body.canvas-off #bg-canvas {
    display: none !important;
}

#loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;              /* sera activé en JS */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-modal {
    background: #1f1f1f;
    padding: 20px 30px;
    border-radius: 10px;
    text-align: center;
    color: #f5f5f5;
    font-family: Arial, sans-serif;
    min-width: 260px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

.spinner {
    margin: 0 auto 12px auto;
    width: 40px;
    height: 40px;
    border: 4px solid #555;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 14px;
}

/* =========================
   NAVBAR
   ========================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, #262626, #333, #262626);
    color: #fff;
    padding: 8px 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.navbar a {
    color: #fff;
    text-decoration: none;
    padding: 8px 18px;
    font-size: 15px;
    display: inline-block;
    margin: 2px 6px;
    border-radius: 4px;
    transition:
        background-color 0.25s ease,
        transform 0.15s ease,
        box-shadow 0.25s ease;
    white-space: nowrap;
}

.navbar a:hover {
    background-color: #ff5733;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255,87,51,0.7);
}

.navbar a.active {
    background-color: #ff5733;
    color: #fff;
    box-shadow: 0 0 12px rgba(255,87,51,0.8);
}

.nav-online {
    position: relative;
    margin-left: 10px;
}

.badge-online-users {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #28a745; /* vert = utilisateurs présents */
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(40,167,69,0.7);
}