/* ===========================
   Variables et styles globaux
   =========================== */

/* On utilise :root pour définir des variables CSS réutilisables partout. */
:root {
    --primary: #1a8cff;        /* Bleu principal (main bleue du logo). */
    --primary-light: #e3f2ff;  /* Bleu très clair pour les surbrillances. */
    --text-main: #2a2f35;      /* Gris très foncé pour le texte principal. */
    --text-muted: #7b8390;     /* Gris plus clair pour les textes secondaires. */
    --border-soft: #dde2ec;    /* Couleur de bordure légère. */
    --bg-main: #f5f7fb;        /* Fond général légèrement grisé. */
    --error: #e53935;          /* Rouge utilisé pour les messages d'erreur. */
    --radius-lg: 18px;         /* Rayon de bordure pour les cartes. */
    --radius-xl: 26px;         /* Rayon de bordure pour le conteneur principal. */
    --shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.12); /* Ombre douce dominante. */
    --transition-fast: 0.2s ease-out; /* Vitesse de transition pour les effets hover. */
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, sans-serif;   /* Pile de polices modernes pour le texte. */
}

/* On remet à zéro la box-sizing pour éviter les surprises sur les marges/paddings. */
* {
    box-sizing: border-box;
}

/* Style généraux du body (fond, police, centrage du contenu). */
body {
    margin: 0;                             /* On supprime les marges par défaut du body. */
    font-family: var(--font-main);         /* On applique la police définie dans :root. */
    background: var(--bg-main);            /* Fond général légèrement gris/bleu. */
    color: var(--text-main);               /* Couleur de texte principale. */
    min-height: 100vh;                     /* Hauteur minimale : 100% de la hauteur d'écran. */
    display: flex;                         /* On utilise flexbox pour centrer le contenu. */
    flex-direction: column;                /* On empile header, main, footer verticalement. */
}

/* Style pour les messages d'alerte */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-success {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}




/* ===========================
   Header du site
   =========================== */

/* Conteneur du header global. */
.site-header {
    width: 100%;                   /* Le header occupe toute la largeur. */
    background: #ffffff;           /* Fond blanc pour le header. */
    border-bottom: 1px solid #edf0f7; /* Fine bordure pour séparer du reste. */
}

/* Contenu interne du header centré. */
.site-header-inner {
    max-width: 1120px;             /* On limite la largeur maximale du contenu. */
    margin: 0 auto;                /* On centre horizontalement. */
    padding: 10px 20px;            /* On ajoute un peu d'espace autour du contenu. */
    display: flex;                 /* On utilise flex pour aligner le logo à gauche. */
    align-items: center;           /* Alignement vertical centré. */
}

/* Lien contenant le logo dans le header. */
.site-logo-link {
    display: inline-flex;          /* On affiche le lien comme un bloc flex. */
    align-items: center;           /* On aligne l'image verticalement au centre. */
    text-decoration: none;         /* On enlève le soulignement du lien. */
}

/* Image du logo dans le header. */
.site-logo-img {
    height: 40px;                  /* Hauteur du logo, largeur ajustée automatiquement. */
    width: auto;                   /* Largeur automatique pour respecter les proportions. */
}

/* ===========================
   Footer du site
   =========================== */

/* Conteneur principal du footer. */
.site-footer {
    background: transparent;        /* ❌ plus de fond gris/blanc spécifique */
    border-top: none;               /* ❌ plus de ligne de séparation forcée */
}

/* Contenu interne du footer centré. */
.site-footer-inner {
    max-width: 1120px;             /* Largeur max du contenu du footer. */
    margin: 0 auto;                /* Centrage horizontal. */
    padding: 12px 20px;            /* Marges internes. */
    text-align: center;             /* ✅ texte centré */
}

/* Texte du footer. */
.site-footer-text {
    margin: 0;                     /* On enlève la marge standard du paragraphe. */
    font-size: 0.85rem;            /* Taille de texte légèrement réduite. */
    color: var(--text-muted);      /* Couleur texte secondaire. */
}

/* Texte du footer pour la page index. */
.login-footer-text {
    margin-top: 25px;
    text-align: center;
    font-size: 0.85rem;
    color: #98A1B3; /* même style que footer */
    width: 100%;
}

/* Permet au footer dashboard d'être collé sous les tuiles et centré */
.site-footer-dashboard {
    text-align: center;         /* Centre le texte */
    padding: 20px 0 40px;       /* Espace équilibré */
    background: transparent;    /* Pas de bandeau */
    width: 100%;                /* Largeur totale */
    display: block;
}

/* Style du texte */
.site-footer-dashboard-text {
    font-size: 0.85rem;
    color: #9ca3af;             /* Gris doux */
}


/* ===========================
   Conteneur principal de la page de connexion
   =========================== */
/*    Centrage global de la page index.php (page de connexion)*/

/* Le body doit devenir un conteneur flex verticalement centré */
body.page-login {
    min-height: 100vh;                     /* Le body prend toute la hauteur de la fenêtre */
    display: flex;                         /* Active Flexbox */
    justify-content: center;               /* Centre horizontalement */
    align-items: center;                   /* Centre verticalement */
    background: #eef3ff;                   /* Fond doux pour toute la page */
    padding: 24px;                         /* Un peu d’air autour sur petit écran */
}

/* Sur la page de login uniquement, on enlève la marge du bloc .page */
body.page-login .page {
    margin: 0;  /* Le centrage est géré par body.page-login */
}


/* Bloc principal qui contient la colonne gauche (branding) et droite (auth). */
.page {
    display: flex;                     /* On utilise flex pour mettre les deux colonnes côte à côte. */
    width: 100%;                       /* La page prend toute la largeur disponible. */
    max-width: 1120px;                 /* On limite la largeur max pour garder un look "carte" centrée. */
    margin: 24px auto;                 /* On centre horizontalement, avec marge verticale. */
    background: #ffffff;               /* Fond blanc pour le bloc principal. */
    border-radius: var(--radius-xl);   /* Bords arrondis généreux. */
    overflow: hidden;                  /* On masque ce qui dépasse des bords arrondis. */
    box-shadow: var(--shadow-soft);    /* Ombre pour donner un effet de carte flottante. */
}

/* ===========================
   Colonne gauche (branding)
   =========================== */

/* Conteneur principal de la colonne gauche */
.brand-panel {
    flex: 1; /* La colonne prend la place disponible */
    display: flex; /* Active Flexbox */
    justify-content: center; /* Centre verticalement */
    align-items: center; /* Centre horizontalement */
    flex-direction: column; /* Empile verticalement */
    padding: 0 40px; /* Espacement latéral */
    background: radial-gradient(
        circle at top left,
        #ffffff 0%,
        #f4f7ff 40%,
        #e4eeff 100%
    );
    border-right: 1px solid #edf0f7; /* séparation visuelle */
}

/* Bloc interne centré */
.brand-content {
    text-align: center; /* Centre tout le texte */
    max-width: 420px; /* Largeur raisonnable */
}

/* Logo clik-la (taille maîtrisée) */
.brand-logo {
    max-width: 360px;   /* ← taille raisonnable en largeur */
    width: 100%;        /* s'adapte si plus petit */
    height: auto;       /* respecte les proportions */
    display: block;
    margin: 0 auto 20px; /* centre + petit espace dessous */
}

/* Titre "L'utile en 1 clic" */
.brand-title {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 18px 0 10px; /* Espace autour du titre */
    color: #28344A; /* gris foncé élégant */
}

/* Sous-titre */
.brand-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.45;
}
/* ===========================
   Colonne droite (connexion)
   =========================== */

/* Conteneur de la colonne droite. */
.auth-panel {
    flex: 0.95;                        /* Légèrement plus étroite que la colonne gauche. */
    padding: 40px 40px 32px;           /* Espacement intérieur. */
    display: flex;                     /* Flex pour centrer le formulaire. */
    align-items: center;               /* Centrage vertical. */
    justify-content: center;           /* Centrage horizontal. */
}

/* Carte contenant le formulaire de connexion. */
.auth-card {
    width: 100%;                       /* La carte prend 100% de la largeur dispo. */
    max-width: 360px;                  /* Largeur maximale de la carte. */
}

/* Titre "Connexion". */
.auth-title {
    font-size: 1.4rem;                 /* Taille de police du titre. */
    font-weight: 600;                  /* Gras moyen. */
    margin-bottom: 6px;                /* Espace sous le titre. */
}

/* Petit texte sous le titre. */
.auth-subtitle {
    font-size: 0.95rem;                /* Taille légèrement réduite. */
    color: var(--text-muted);          /* Couleur grisée. */
    margin-bottom: 24px;               /* Espace sous ce paragraphe. */
}

/* Formulaire : on empile les blocs. */
form {
    display: flex;                     /* Flex pour empiler les champs. */
    flex-direction: column;            /* Empilement vertical. */
    gap: 16px;                         /* Espace entre chaque bloc de champ. */
}

/* Label des champs. */
label {
    font-size: 0.9rem;                 /* Taille du texte du label. */
    font-weight: 500;                  /* Légèrement gras. */
    margin-bottom: 4px;                /* Espace sous le label. */
    display: inline-block;             /* On permet margin-bottom de s’appliquer proprement. */
}

/* Bloc contenant un champ de formulaire. */
.field {
    display: flex;                     /* Flex pour possiblement ajouter d'autres éléments. */
    flex-direction: column;            /* On empile label, input, erreur. */
}

/* Styles communs aux champs email et mot de passe. */
input[type="email"],
input[type="password"] {
    padding: 10px 12px;                /* Espacement intérieur. */
    border-radius: 999px;              /* Bords très arrondis (pill). */
    border: 1px solid var(--border-soft); /* Bordure légère. */
    font-size: 0.95rem;                /* Taille du texte du champ. */
    outline: none;                     /* On enlève le contour par défaut du navigateur. */
    transition: border var(--transition-fast),
                box-shadow var(--transition-fast),
                background var(--transition-fast); /* Transition pour les effets focus. */
    background: #fdfdff;               /* Fond légèrement teinté. */
}

/* Effet lors du focus sur un champ. */
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--primary);      /* Bordure devient bleue. */
    box-shadow: 0 0 0 3px var(--primary-light); /* Halo bleu clair autour. */
    background: #ffffff;               /* Fond devient blanc. */
}

/* Bloc alignant case à cocher et lien "mot de passe oublié". */
.field-inline {
    display: flex;                     /* Flex pour aligner sur une ligne. */
    align-items: center;               /* Alignement vertical centré. */
    justify-content: space-between;    /* Espacement entre la case et le lien. */
    margin-top: 4px;                   /* Petit espace au-dessus. */
    font-size: 0.85rem;                /* Texte un peu plus petit. */
}

/* On enlève la marge des labels dans ce contexte. */
.field-inline label {
    margin: 0;
    display: flex;                     /* On aligne case + texte. */
    align-items: center;
    gap: 6px;                          /* Espace entre la case et le texte. */
    font-weight: 400;                  /* Poids de police normal. */
    color: var(--text-muted);          /* Couleur moins forte. */
}

/* Taille de la case à cocher. */
.field-inline input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--primary);      /* Couleur de la coche dans les navigateurs compatibles. */
}

/* Liens dans le bloc inline (mot de passe oublié). */
.field-inline a {
    text-decoration: none;             /* On supprime le soulignement au repos. */
    color: var(--primary);             /* Bleu principal. */
}

/* Effet au survol sur le lien. */
.field-inline a:hover {
    text-decoration: underline;        /* Soulignement au survol. */
}

/* Bouton principal de connexion. */
.btn-connexion {
    margin-top: 8px;                   /* Espace au-dessus du bouton. */
    padding: 11px 14px;                /* Espacement interne. */
    border-radius: 999px;              /* Bouton très arrondi. */
    border: none;                      /* On enlève la bordure par défaut. */
    background: var(--primary);        /* Fond bleu. */
    color: #ffffff;                    /* Texte blanc. */
    font-size: 0.98rem;                /* Taille du texte. */
    font-weight: 600;                  /* Texte un peu plus gras. */
    cursor: pointer;                   /* Curseur en forme de main au survol. */
    display: inline-flex;              /* Permet d’aligner icône + texte. */
    align-items: center;               /* Alignement vertical centré. */
    justify-content: center;           /* Alignement horizontal centré. */
    gap: 8px;                          /* Espace entre texte et flèche. */
    transition: background var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast); /* Effets de survol. */
    box-shadow: 0 10px 20px rgba(26, 140, 255, 0.25); /* Ombre portée. */
}

/* Icône flèche à droite du texte du bouton. */
.icon-arrow {
    font-size: 1.1rem;                 /* Taille de l'icône. */
    transform: translateY(1px);        /* Légère translation vers le bas pour l’aligner optiquement. */
}

/* Effet hover du bouton. */
.btn-connexion:hover {
    background: #0f7ae0;               /* Bleu légèrement plus foncé. */
    transform: translateY(-1px);       /* Bouton qui "remonte" légèrement. */
    box-shadow: 0 14px 26px rgba(26, 140, 255, 0.3);
}

/* Effet active (clic). */
.btn-connexion:active {
    transform: translateY(0);          /* On annule la translation verticale. */
    box-shadow: 0 8px 16px rgba(26, 140, 255, 0.25);
}

/* Texte sous le bouton (lien vers inscription). */
.auth-footer {
    margin-top: 18px;                  /* Espace au-dessus. */
    font-size: 0.85rem;                /* Taille de texte réduite. */
    color: var(--text-muted);          /* Couleur grisée. */
}

/* Liens dans la zone auth-footer. */
.auth-footer a {
    color: var(--primary);             /* Bleu principal. */
    text-decoration: none;             /* Pas de soulignement au repos. */
    font-weight: 500;                  /* Un peu de gras pour mettre en avant. */
}

/* Effet au survol sur les liens du footer de l’auth. */
.auth-footer a:hover {
    text-decoration: underline;
}

/* Messages d'erreur sous les champs. */
.error-message {
    display: none;                     /* Masqués par défaut, affichés par JS si erreur. */
    margin-top: 4px;                   /* Espace au-dessus du message. */
    font-size: 0.83rem;                /* Texte un peu plus petit. */
    color: var(--error);               /* Rouge d'erreur. */
}

/* Message d'erreur global pour le login */
.login-error-message {
    margin-bottom: 16px;          /* Espace sous le message */
    padding: 10px 12px;           /* Espacement intérieur */
    border-radius: 8px;           /* Bords arrondis */
    background: #fdecea;          /* Fond rouge très pâle */
    color: #b71c1c;               /* Rouge foncé pour le texte */
    font-size: 0.9rem;            /* Taille de texte */
}

/* Message d'information (succès / info) pour les actions de login / reset */
.login-info-message {
    margin-bottom: 16px;           /* Espace sous le message */
    padding: 10px 12px;            /* Espacement intérieur */
    border-radius: 8px;            /* Bords arrondis */
    background: #e8f5e9;           /* Fond vert très clair */
    color: #1b5e20;                /* Vert foncé pour le texte */
    font-size: 0.9rem;             /* Taille du texte */
}



/* ===========================
   Responsivité (tablette / mobile)
   =========================== */

/* Adaptations pour les écrans avec largeur ≤ 880px (tablettes). */
@media (max-width: 880px) {
    .page {
        flex-direction: column;        /* On empile les colonnes au lieu de les mettre côte à côte. */
        max-width: 520px;              /* On réduit la largeur max. */
        margin: 16px auto;             /* Marges plus petites. */
    }

    .brand-panel {
        border-right: none;            /* On enlève la bordure droite. */
        border-bottom: 1px solid #edf0f7; /* On met une bordure en bas à la place. */
        padding: 24px 20px 20px;       /* On réduit les paddings. */
    }

    .auth-panel {
        padding: 24px 20px 20px;       /* Paddings adaptés pour mobile. */
    }

    .brand-highlights {
        grid-template-columns: 1fr;    /* Une seule colonne pour les points clés. */
    }

    .site-footer-text {
        text-align: center;            /* Footer centré sur les petits écrans. */
    }
}

/* Adaptations pour les très petits écrans (≤ 480px). */
@media (max-width: 480px) {
    .brand-title {
        font-size: 1.45rem;            /* Titre légèrement plus petit. */
    }

    .auth-title {
        font-size: 1.25rem;            /* Titre de la carte de connexion légèrement réduit. */
    }
}

/* =========================================
   Dashboard "hub" 
   ========================================= */

/* Page globale du dashboard hub */
.page-dashboard-hub {
    /* Fond blanc pur pour se rapprocher du design que tu as montré */
    background: #ffffff;
    auto;             /* S'adapte au contenu */
    padding: 24px 32px 40px;
    display: flex;
    flex-direction: column;
}

/* Sur petits écrans, on réduit les marges */
@media (max-width: 768px) {
    .page-dashboard-hub {
        padding: 16px 12px 32px;
    }
}

.hub-tile-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

/* ============================================================
   HEADER DU PORTAIL CLIK-LA — VERSION ALIGNEMENT EXTREME
   Logo collé à gauche, utilisateur collé à droite
   ============================================================ */


/* ---- Bandeau global du header ---- */
.portal-topbar {
    background: #ffffff;                       /* Fond blanc du header */
    border-bottom: 1px solid #e5e7eb;          /* Ligne fine pour séparer du contenu */
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04); /* Légère ombre pour relief */
    width: 100%;                                /* Occupe toute la largeur */
}


/* ---- Conteneur interne qui organise gauche ↔ droite ---- */
.portal-topbar-inner {
    width: 100%;                                /* Largeur totale */
    padding: 10px 28px;                         /* Marges internes (top/bottom + left/right) */
    display: flex;                              /* Flexible layout */
    flex-direction: row;                        /* Les éléments sont alignés à l’horizontale */
    align-items: center;                        /* Alignement vertical centré */
    justify-content: space-between;             /* Pousse la gauche à gauche et la droite à droite */
}


/* ------------------------------------------------------------
   ZONE GAUCHE DU HEADER : LOGO + TITRE DE LA PAGE
   ------------------------------------------------------------ */
.portal-topbar-left {
    display: flex;                              /* Affichage en ligne */
    align-items: center;                        /* Centré verticalement */
    gap: 14px;                                  /* Espace entre logo et titre */
}


/* ---- Lien contenant le logo ---- */
.portal-logo-link {
    display: flex;                              /* Permet d’aligner proprement le logo */
    align-items: center;
}


/* ---- Logo clik-la dans le header ---- */
.portal-logo-img {
    height: 56px;                               /* Taille raisonnable du logo */
    width: auto;                                /* Conserve les proportions */
    display: block;                             /* Évite les espaces parasites */
}


/* ---- Titre de la page (ex : "Tableau de bord") ---- */
.portal-topbar-title {
    font-size: 1rem;                            /* Taille de police standard */
    font-weight: 600;                           /* Texte en semi-gras */
    color: #111827;                             /* Gris très foncé (quasi noir) */
    white-space: nowrap;                        /* Empêche le retour à la ligne */
}


/* ------------------------------------------------------------
   ZONE DROITE DU HEADER : LIENS + UTILISATEUR
   ------------------------------------------------------------ */
.portal-topbar-right {
    display: flex;                              /* Alignement horizontal */
    align-items: center;                        /* Alignement vertical */
    gap: 20px;                                  /* Espace entre les éléments */
}


/* ---- Groupe utilisateur : avatar + nom + rôle + logout ---- */
.portal-topbar-user {
    display: flex;                              /* Ensemble sur une ligne */
    align-items: center;                        /* Alignement centré */
    gap: 10px;                                  /* Espace entre avatar et texte */
}


/* ---- Avatar rond contenant les initiales ---- */
.portal-user-avatar {
    width: 32px;                                /* Largeur de l’avatar */
    height: 32px;                               /* Hauteur identique pour faire un cercle */
    border-radius: 50%;                         /* Avatar parfaitement rond */
    background: #e0efff;                        /* Bleu très clair */
    color: #1d4ed8;                             /* Bleu profond pour les initiales */
    display: flex;                              /* Flex pour centrer le texte */
    justify-content: center;                    /* Centrer horizontalement */
    align-items: center;                        /* Centrer verticalement */
    font-weight: 600;                           /* Initiales en gras */
    font-size: 0.85rem;                         /* Taille réduite mais lisible */
}


/* ---- Bloc textes utilisateur (nom + rôle) ---- */
.portal-user-infos {
    display: flex;                              /* On empile verticalement */
    flex-direction: column;
    line-height: 1.1;                           /* Espacement serré entre nom & rôle */
}


/* ---- Nom de l’utilisateur ---- */
.portal-user-name {
    font-size: 0.9rem;                          /* Taille normale */
    font-weight: 600;                           /* Texte en gras */
    color: #111827;                             /* Gris très foncé */
}


/* ---- Rôle de l’utilisateur ---- */
.portal-user-role {
    font-size: 0.8rem;                          /* Plus petit que le nom */
    color: #6b7280;                             /* Gris moyen */
}


/*    Bouton / lien de Déconnexion---- */
.portal-logout-link {
    padding: 6px 12px;                          /* Espace intérieur */
    border-radius: 20px;                        /* Forme pilule */
    border: 1px solid rgba(239, 68, 68, 0.55);  /* Bordure rouge claire */
    background: #fef2f2;                        /* Fond légèrement rosé */
    color: #b91c1c;                             /* Rouge profond */
    font-size: 0.85rem;                         /* Taille de texte */
    font-weight: 500;                           /* Semi-gras */
    white-space: nowrap;                        /* Empêche de couper le texte */
    text-decoration: none;                      /* Pas de soulignement */
}

/* ---- Effet au survol du bouton logout ---- */
.portal-logout-link:hover {
    background: #fee2e2;                        /* Rouge plus visible */
}



/* ===========================
   Section centrale (logo + titre)
   =========================== */

.hub-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 32px;
}

/* Wrapper pour centrer le logo */
.hub-hero-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

/* Logo clik-la en "grand" au centre */
.hub-hero-logo {
    height: 80px;
    width: auto;
    filter: drop-shadow(0 8px 20px rgba(15, 23, 42, 0.06));
}

/* Titre principal */
.hub-hero-title {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    color: #111827;
}

/* Sous-titre / baseline */
.hub-hero-subtitle {
    margin: 8px 0 0 0;
    font-size: 1rem;
    color: #6b7280;
}

/* ===========================
   Grille de tuiles
   =========================== */

.hub-grid {
    /* On limite la largeur pour reproduire l'effet "galaxie" centré. */
    max-width: 1100px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

/* Sur écran moyen : 4 colonnes */
@media (max-width: 1200px) {
    .hub-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Sur écran plus petit : 3 colonnes */
@media (max-width: 992px) {
    .hub-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Sur mobile : 2 colonnes puis 1 */
@media (max-width: 768px) {
    .hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .hub-grid {
        grid-template-columns: 1fr;
    }
}

/* Tuile individuelle (une "app") */
.hub-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 16px;
    border-radius: 20px;
    background: #ffffff;
    text-decoration: none;
    color: #111827;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.12s ease;
}

/* Icône de la tuile (emoji ou icône SVG) */
.hub-tile-icon {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

/* Titre de la tuile */
.hub-tile-title {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Petit texte explicatif sous le titre */
.hub-tile-caption {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Effet hover sur les tuiles */
.hub-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
    background: #f9fafb;
}

/* Variante pour la tuile admin (bordure bleue) */
.hub-tile-admin {
    border: 2px solid rgba(37, 99, 235, 0.3); /* bleu léger */
}

/* ============================================================
   LAYOUT AVEC SIDEBAR (pages d'administration)
   ============================================================ */

/* Conteneur global : sidebar à gauche + contenu à droite */
.layout-sidebar {
    display: flex;                     /* Positionne aside + section côte à côte */
    min-height: calc(100vh - 60px);    /* Occupe la hauteur de la fenêtre (moins le header) */
    background: #f3f5fb;               /* Fond très léger derrière le contenu */
}

/* ------------------------------------------------------------
   SIDEBAR (bandeau de gauche)
   ------------------------------------------------------------ */

.sidebar {
    width: 240px;                      /* Largeur fixe de la barre latérale */
    background: #ffffff;               /* Fond blanc pour bien contraster */
    border-right: 1px solid #e5e7eb;   /* Ligne de séparation avec le contenu */
    display: flex;
    flex-direction: column;            /* Pour placer le footer en bas */
    padding: 18px 16px;
}

/* Bloc supérieur : logo + menu */
.sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Logo dans la sidebar */
.sidebar-logo-block {
    text-align: center;
}

.sidebar-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo-img {
    height: 42px;                      /* Taille du logo en sidebar */
    width: auto;
}

/* Navigation de la sidebar */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;                          /* Espace entre les liens */
}

/* Lien standard de la sidebar */
.sidebar-nav-link {
    display: block;
    padding: 8px 10px;
    border-radius: 999px;              /* Effet "pilule" */
    font-size: 0.92rem;
    color: #374151;
    text-decoration: none;
}

/* Lien actif (page en cours) */
.sidebar-nav-link-active {
    background: #e0efff;
    color: #1d4ed8;
    font-weight: 600;
}

/* Lien désactivé (placeholder) */
.sidebar-nav-link-disabled {
    opacity: 0.4;
    cursor: default;
}

/* Footer de la sidebar collé en bas */
.sidebar-footer {
    margin-top: auto;                  /* Pousse ce bloc vers le bas de la sidebar */
    text-align: center;
    padding-top: 16px;
}

.sidebar-footer-text {
    font-size: 0.8rem;
    color: #9ca3af;
}


/* Icônes Lucide dans la sidebar */
.sidebar-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
    margin-right: 8px;
    vertical-align: middle;
    color: #6b7280;
    flex-shrink: 0;
}

/* Changement de couleur sur hover */
.sidebar-nav-link:hover .sidebar-icon {
    color: #1d4ed8;
}

/* ------------------------------------------------------------
   CONTENU PRINCIPAL (colonne de droite)
   ------------------------------------------------------------ */

.sidebar-main {
    flex: 1;                           /* Prend tout l’espace restant */
    padding: 24px 32px 32px;
}

/* En-tête de la zone principale */
.sidebar-main-header {
    margin-bottom: 20px;
}

.sidebar-main-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.sidebar-main-subtitle {
    margin-top: 6px;
    font-size: 0.95rem;
    color: #6b7280;
}

/* ------------------------------------------------------------
   Carte formulaire de création d'utilisateur
   ------------------------------------------------------------ */

.form-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.06),
        0 4px 10px rgba(15, 23, 42, 0.02);
    padding: 20px 22px 24px;
}

/* Section du formulaire (fieldset) */
.form-section {
    border: none;                      /* On enlève la bordure par défaut du fieldset */
    padding: 0;
    margin: 0 0 18px;
}

/* Titre de section (legend) */
.form-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 10px;
}

/* Texte introductif sous le titre */
.form-section-intro {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 12px;
}

/* Grille à 2 colonnes pour les champs alignés */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

/* Champs du formulaire */
.field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #374151;
}

.field input,
.field select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    font-size: 0.9rem;
    outline: none;
    background: #f9fafb;
}

.field input:focus,
.field select:focus {
    border-color: #2563eb;
    background: #ffffff;
}

/* Petit texte d’aide sous un champ */
.field-help {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #9ca3af;
}

.rights-item-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none; /* empêche le clic sur toute la tuile */
}

.rights-item-disabled input[type="checkbox"] {
    cursor: not-allowed;
}


/* ------------------------------------------------------------
   Grille des droits / permissions
   ------------------------------------------------------------ */

.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 14px;
}

/* Chaque droit est une "puce" cliquable */
.rights-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
}

/* Label du droit (texte) */
.rights-label {
    color: #374151;
}

.role-switch-wrapper,
.role-switch-label {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}



.role-switch-text {
    font-weight: 500;
}

.role-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    line-height: 0;          /* ça évite que la pastille “descende” */
    vertical-align: middle;
}

.role-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.role-slider {
    position: absolute;
    inset: 0;
    background-color: #ccc;
    border-radius: 999px;
    transition: 0.2s;
}

.role-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.role-switch input:checked + .role-slider {
    background-color: #2563eb;
}

.role-switch input:checked + .role-slider:before {
    transform: translateX(24px);
}

/* Style du texte "Administrateur" pour l’harmoniser */
.role-switch-text {
    font-size: 0.95rem;       /* même taille que Compte actif */
    font-weight: 500;
    color: #374151;
    margin-right: 10px;       /* espace entre texte ↔ switch */
    display: inline-block;
}



.active-switch-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 1rem 0;
}

.active-switch-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

/* Texte */
.active-switch-text {
    font-weight: 500;
}

/* Le conteneur du switch */
.active-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

/* On cache la checkbox par défaut */
.active-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Rail du switch */
.active-slider {
    position: absolute;
    inset: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: 0.2s;
}

/* Bouton rond */
.active-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

/* ON = bleu + rond à droite */
.active-switch input:checked + .active-slider {
    background-color: #2563eb; /* bleu */
}

.active-switch input:checked + .active-slider:before {
    transform: translateX(24px);
}


/* ------------------------------------------------------------
   Messages de succès / erreur
   ------------------------------------------------------------ */

.form-alert {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.form-alert-success {
    background: #ecfdf3;
    border: 1px solid #22c55e;
    color: #166534;
}

.form-alert-error {
    background: #fef2f2;
    border: 1px solid #ef4444;
    color: #991b1b;
}
/* ============================================================
   Table de liste des utilisateurs (list_users.php)
   ============================================================ */

.users-table-wrapper {
    width: 100%;
    overflow-x: auto;                    /* Permet un scroll horizontal si table trop large */
}

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

.users-table th,
.users-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.users-table thead th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
}

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

.users-table-action-link {
    font-size: 0.85rem;
    color: #2563eb;
    text-decoration: none;
}

.users-table-action-link:hover {
    text-decoration: underline;
}

/* ============================================
   𝗨𝗻𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗱𝗲𝘀 𝗯𝗼𝘂𝘁𝗼𝗻𝘀 𝗱𝗲𝘀 𝗳𝗼𝗿𝗺𝘂𝗹𝗮𝗶𝗿𝗲𝘀
   ============================================ */

/* ============================
   Champ large de formulaire
   ============================ */
.form-textarea {
    background: #f7f9fc;
    border: 1px solid #d9dce3;
    border-radius: 14px; /* ou 9999px si tu veux un arrondi complet */
    padding: 0.75rem 1rem;
    width: 100%;
    min-height: 120px;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
}




/* ============================
   Boutons de formulaires
   ============================ */

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

/* Style commun aux deux boutons pilules */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.6rem;
    border-radius: 999px;
    font-size: 0.95rem;
    line-height: 1.2;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    width: auto;
    min-width: 0;
    min-height: 40px;   /* même hauteur pour les deux */
}

/* Bouton bleu (Créer / Enregistrer) */
.btn-primary {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    font-weight: 600;
}

/* Bouton blanc (Annuler) */
.btn-secondary {
    background: #ffffff;
    color: #111827;
    border-color: #d1d5db;
    font-weight: 400;
}

/* Au cas où un style global underline les liens */
a.btn-secondary {
    text-decoration: none;
}


/* Icônes plus petites dans la colonne Actions */
.users-action-icon {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2;
    color: #2563eb;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

/* Effet léger au survol */
.users-table-action-link:hover .users-action-icon {
    color: #1e40af;
}

/* --------------------- */
/* Calendrier de résa    */
/* --------------------- */

.calendar-wrapper {
    border-radius: 16px;
    background: #f7f9fc;
    border: 1px solid #d9dce3;
    padding: 1rem 1.25rem;
}

.calendar-timeline-room {
    margin-bottom: 1.5rem;
}

/* Conteneur "timeline" : heures en ligne + capsule */
.calendar-timeline {
    display: block;
    margin-top: 0.5rem;
}

/* Ligne d'heures HORIZONTALE au-dessus de la frise */
.calendar-timeline-hours {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #64748b;
    padding: 0 2rem 0.4rem 2rem;
}

.calendar-timeline-hours span {
    height: auto;
}

/* Capsule grise de la journée */
.calendar-timeline-bar {
    position: relative;
    background: #e5e8f0;
    border-radius: 9999px;
    height: 40px;
    margin: 0;
    overflow: hidden;
}

/* Traits verticaux des heures dans la capsule */
.calendar-timeline-hour-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.calendar-timeline-hour-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.6);
}

/* Conteneur des blocs de réservation */
.calendar-timeline-reservations {
    position: relative;
    height: 100%;
}

/* Bloc de réservation violet, aligné dans la capsule */
.calendar-reservation-block {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    border-radius: 999px;
    background-color: #4f46e5;
    color: #ffffff;
    font-size: 0.8rem;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

.calendar-reservation-block:hover {
    background-color: #4338ca;
}

/* Couleurs par salle (réutilisées en vue Jour) */
.calendar-reservation-block.room-color-1 {
    background-color: #4f46e5; /* violet */
}
.calendar-reservation-block.room-color-2 {
    background-color: #16a34a; /* vert */
}
.calendar-reservation-block.room-color-3 {
    background-color: #0ea5e9; /* bleu clair */
}
.calendar-reservation-block.room-color-4 {
    background-color: #f97316; /* orange */
}
.calendar-reservation-block.room-color-5 {
    background-color: #ec4899; /* rose */
}

/* Bloc brouillon créé par clic dans la frise */
.calendar-reservation-block--draft {
    background-color: #e5e7eb;   /* gris clair */
    color: #111827;
    border: 1px dashed #9ca3af;
    font-weight: 500;
}

/* Poignée de redimensionnement à droite du bloc brouillon */
.calendar-draft-resize-handle {
    display: inline-block;
    margin-left: 0.4rem;
    width: 6px;
    height: 16px;
    border-left: 2px solid rgba(55, 65, 81, 0.7);
    border-right: 2px solid rgba(55, 65, 81, 0.4);
    cursor: ew-resize;
}

.calendar-timeline-legend {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #7a7f8c;
}

/* ---------- Vue semaine ---------- */

.calendar-week-reservation {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.calendar-week-reservation-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.calendar-week-reservation-link:hover .calendar-week-reservation {
    background: #eef2ff;
    border-radius: 6px;
}

/* ---------- Vue mois ---------- */

.calendar-month-table .calendar-month-cell {
    vertical-align: top;
    padding: 0.5rem;
}

.calendar-month-cell-empty {
    background: #f9fafb;
}

.calendar-month-day-number {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.calendar-month-res-count {
    display: inline-block;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.calendar-month-res-item {
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
}


.calendar-month-res-more {
    font-size: 0.75rem;
    color: #7a7f8c;
}

.calendar-month-cell-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    padding: 0.25rem 0.15rem;
}

.calendar-month-cell-link:hover {
    background: #eef2ff;
}


/* Couleurs différentes par salle (vue Jour) */
.calendar-reservation-block.room-color-1 {
    background-color: #4f46e5; /* violet */
}
.calendar-reservation-block.room-color-2 {
    background-color: #16a34a; /* vert */
}
.calendar-reservation-block.room-color-3 {
    background-color: #0ea5e9; /* bleu clair */
}
.calendar-reservation-block.room-color-4 {
    background-color: #f97316; /* orange */
}
.calendar-reservation-block.room-color-5 {
    background-color: #ec4899; /* rose */
}

/* Nom de salle + bouton info */
.calendar-timeline-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-timeline-room-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.room-info-badge {
    border: none;
    background: #e5e7eb;
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.room-info-badge i {
    width: 14px;
    height: 14px;
}

.room-info-badge:hover {
    background: #d1d5db;
}

.room-info-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Bouton info, petit et discret */
.room-info-badge {
    border: none;
    background: #e5e7eb;
    border-radius: 999px;
    padding: 0.15rem 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.room-info-badge i {
    width: 12px;
    height: 12px;
}

.room-info-badge:hover {
    background: #d1d5db;
}

/* Infobulle personnalisée, petite et immédiate */
.room-info-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 140%;
    background: #111827;
    color: #ffffff;
    padding: 0.25rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.3);
    transition: opacity 0.1s ease-out;
    z-index: 20;
}

.room-info-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #111827 transparent transparent transparent;
}

/* Affichage immédiat au survol */
.room-info-wrapper:hover .room-info-tooltip {
    opacity: 1;
}

/* ---------- Lien sur les cellules semaine ---------- */

.calendar-week-cell-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0.25rem 0.15rem;
    border-radius: 8px;
}

.calendar-week-cell-link:hover {
    background: #eef2ff;
}

/* Ligne du haut : tabs + flèches */

.calendar-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
/* Boutons Mois / Semaine / Jour : on allège un peu */
.view-switch {
    display: flex;
    gap: 0.5rem;
}

.view-switch-btn {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    text-decoration: none;
}

/* Flèches de navigation type "bulle blanche" */
.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calendar-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    color: inherit;
}

.calendar-nav-btn:hover {
    background-color: #f9fafb;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.calendar-nav-btn i {
    width: 16px;
    height: 16px;
}

.calendar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.calendar-inner {
    flex: 1;
}

.calendar-month-table,
.calendar-week-table {
    width: 100%;
    table-layout: fixed;
}

/* Flèches latérales */
.calendar-arrow {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(15,23,42,0.1);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    color: inherit;
}

.calendar-arrow:hover {
    background-color: #f8fafc;
    box-shadow: 0 2px 6px rgba(15,23,42,0.15);
    transform: translateY(-1px);
}

.calendar-arrow i {
    width: 18px;
    height: 18px;
}

/* Semaine : cellules cliquables */
.calendar-week-cell-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 0.25rem 0.15rem;
}
.calendar-week-cell-link:hover {
    background: #eef2ff;
}

/* Mois : idem */
.calendar-month-cell-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    padding: 0.25rem 0.15rem;
}
.calendar-month-cell-link:hover {
    background: #eef2ff;
}


/* Reservations*/
.reservation-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.reservation-status-confirmed {
    background-color: #ecfdf3;
    color: #166534;
}

.reservation-status-cancelled {
    background-color: #fef2f2;
    color: #b91c1c;
}

.reservation-status-default {
    background-color: #eff6ff;
    color: #1d4ed8;
}