body, html {
    margin: 0;
    padding: 0;
    background: linear-gradient(125deg, #003F53 70%, #00596e 100%);
    /*  #00596e est un ton plus clair dérivé du Bleu Barkene */
    min-height: 100vh;
    font-family: 'Inter', Arial, sans-serif;
    position: relative;
    overflow-x: hidden;
}


/* ---- Fond bulles animées ---- */
.bubble-bg {
    pointer-events: none;
    z-index: 0;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: hidden;
}
.bubble-bg span {
    position: absolute;
    border-radius: 50%;
    opacity: 0.19;
    filter: blur(11px);
    mix-blend-mode: lighten;
    animation: floatbubble 18s infinite alternate cubic-bezier(.6,.3,.7,1);
    will-change: transform;
}
.bubble-bg .b1 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, #b1ecff 60%, #4cb5df 100%);
    left: 3vw; top: -60px;
    animation-delay: 0s;
    animation-duration: 19s;
}
.bubble-bg .b2 {
    width: 160px; height: 160px;
    background: radial-gradient(circle, #bbffe7 60%, #2cd3b0 100%);
    left: 64vw; top: 7vh;
    animation-delay: 3s;
    animation-duration: 22s;
}
.bubble-bg .b3 {
    width: 190px; height: 190px;
    background: radial-gradient(circle, #e1d7fa 60%, #9c7ede 100%);
    left: 85vw; top: 55vh;
    animation-delay: 2s;
    animation-duration: 17s;
}
.bubble-bg .b4 {
    width: 120px; height: 120px;
    background: radial-gradient(circle, #c3ffdd 70%, #00b78e 100%);
    left: 8vw; top: 74vh;
    animation-delay: 7s;
    animation-duration: 14s;
}
.bubble-bg .b5 {
    width: 90px; height: 90px;
    background: radial-gradient(circle, #ffeec6 70%, #edbe4c 100%);
    left: 53vw; top: 92vh;
    animation-delay: 12s;
    animation-duration: 25s;
}
@keyframes floatbubble {
    0%   { transform: translateY(0) scale(1);}
    20%  { transform: translateY(-15px) scale(1.06);}
    50%  { transform: translateY(38px) scale(1.14);}
    80%  { transform: translateY(-13px) scale(1.06);}
    100% { transform: translateY(35px) scale(1.1);}
}

/* ---- Anim logo Barkene SVG ---- */
.bg-logo-bubble {
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.barkene-bubble {
  position: absolute;
  left: 12vw;
  top: 16vh;
  width: 340px;
  height: 110px;
  opacity: 0.13;
  filter: blur(1.5px);
  animation: floatBarkene 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.barkene-bubble.second { left: 68vw; top: 62vh; width: 180px; animation-delay: 8s;}
@keyframes floatBarkene {
  0% { transform: translateY(0) scale(1); opacity: 0.13; }
  36% { transform: translateY(28px) scale(1.04) rotate(-4deg);}
  60% { transform: translateY(-26px) scale(0.97) rotate(3deg);}
  100% { transform: translateY(0px) scale(1.03) rotate(-1deg);}
}

/* ---- Header/Box ---- */
.header-box {
    width: 95%;              /* occupe presque toute la largeur de la fenêtre */
    max-width: 1800px;       /* limite maxi cohérente avec le cadre principal */
    margin: 38px auto 0 auto;
    background: rgba(255,255,255,0.87);
    box-shadow: 0 8px 40px #003f5340, 0 2px 8px #003f5310;
    border-radius: 24px;
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    padding: 0 20px;          /* un peu de marge interne */
}

/* Conteneur du tableau */
/* Conteneur du tableau */
.table-wrapper {
    max-width: 100%;            /* Prend presque toute la largeur du cadre blanc */
    margin: 20px auto;
    padding: 0;
}




/* Cellules du tableau */
table tbody td {
    background: #ffffff;
    padding: 10px 12px;
    border-bottom: 1px solid #ddd;
}

/* Lignes alternées pour meilleure lisibilité */
table tbody tr:nth-child(even) td {
    background: #f7fbfc;
}

/* Ajustement des boutons dans les cellules */
table tbody td button,
table tbody td input[type="date"],
table tbody td input[type="password"] {
    font-size: 0.9rem;
    padding: 5px 8px;
}

/* Boutons Supprimer */
table tbody td .delete-single {
    background: #c62828;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
}

table tbody td .delete-single:hover {
    background: #e53935;
}


/* Tableau lui-même */
.table-wrapper table {
    width: 100%;          /* prend toute la largeur disponible */
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1rem;
}
/* Forcer les en-têtes à rester horizontaux et ne pas se couper */
table th {
    white-space: nowrap !important;  /* Empêche le passage en ligne verticale */
    overflow: hidden;
    text-overflow: ellipsis;         /* Ajoute "..." si trop long */
}

/* Ajuster la largeur minimale de chaque colonne */
table th,
table td {
    min-width: 120px;  /* Largeur minimale pour éviter le vertical */
}


/* === FORCER LES LARGEURS SPÉCIFIQUES === */

/* Annuler tout fixed layout */
.table-wrapper table {
    table-layout: auto !important;
    width: 100% !important;
}

/* Agrandir colonne "Nom du fichier" (2ème colonne après checkbox) */
.table-wrapper table th:nth-child(2),
.table-wrapper table td:nth-child(2) {
    width: 50% !important;       /* Largeur principale */
    min-width: 450px !important; /* Minimum garanti */
    white-space: normal !important;
    word-break: break-word !important;
}

/* Agrandir colonne "Mot de passe" (6ème colonne) */
.table-wrapper table th:nth-child(6),
.table-wrapper table td:nth-child(6) {
    width: 20% !important;
    min-width: 220px !important;
}

/* Les autres colonnes se répartissent automatiquement */


/* Les autres colonnes s'ajustent automatiquement */

/* Style visuel des en-têtes */
table thead th {
    background-color: #00596e;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

/* Cellules et entêtes pour rester lisibles */
.table-wrapper th,
.table-wrapper td {
    padding: 10px 14px;
    border: 1px solid #d0d7de;
    text-align: left;
}

/* En-tête */
.table-wrapper th {
    background-color: #003F53;
    color: #fff;
    font-weight: 600;
}


header.admin-header {
    background: transparent;
    color: #003F53;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 24px 24px 0 0;
    padding: 18px 34px 10px 22px;
    min-height: 62px;
    box-shadow: none;
    position: relative;
}
.admin-logo-title img.logo {
    max-width: 104px;
    max-height: 34px;
    margin: 0;
    transition: max-width 0.14s;
    filter: drop-shadow(0 1px 1px #003f5320);
    background: none;
}
.admin-info {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 1em;
}
.welcome-text {
    font-weight: 500;
    color: #003F53;
    background: #eaf6fb;
    padding: 2px 12px;
    border-radius: 10px;
    margin-right: 3px;
    box-shadow: 0 1px 5px #003f5324;
}
.welcome-text a {
    color: #00596e;            /* Bleu Barkene */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.welcome-text a:hover {
    color: #00a0c6;            /* Bleu Barkene plus clair au survol */
    text-decoration: underline;
}


.admin-info a.logout-link {
    background: #003F53;
    color: #fff;
    border-radius: 9px;
    text-decoration: none;
    padding: 6px 18px;
    font-weight: 1000;
    font-size: 1.05em;
    box-shadow: 0 1px 8px #003f5331;
    border: none;
    outline: none;
    transition: background 0.16s, color 0.16s;
    letter-spacing: 0.01em;
}
.admin-info a.logout-link:hover {
    background: #007bff;
    color: #fff;
    text-decoration: none;
}

/* ---- MENU BLEU ---- */
/* === MENU PLUS COMPACT === */
nav.menu {
    gap: 18px !important;
    min-height: 54px !important;
    padding: 0 7px !important;
}
nav.menu a {
    min-width: 56px !important;
    padding: 4px 4px 3px 4px !important;
    font-size: 0.96em !important;
}
nav.menu .icon {
    font-size: 1.22em !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin-bottom: 2px !important;
}
nav.menu img {
    max-height: 24px !important;
    max-width: 24px !important;
    margin-bottom: 2px !important;
}
nav.menu .label {
    font-size: 0.96em !important;
    margin-top: 1px;
    font-weight: 600;
    line-height: 1.08em;
}
@media (max-width: 700px) {
  nav.menu {
    gap: 6px !important;
    min-height: 36px !important;
    padding: 0 2px !important;
  }
  nav.menu a {
    font-size: 0.92em !important;
    min-width: 42px !important;
    padding: 3px 1px 2px 1px !important;
  }
  nav.menu .icon {
    font-size: 1.07em !important;
    max-height: 18px !important;
  }
  nav.menu img {
    max-height: 18px !important;
    max-width: 18px !important;
  }
}
a {
    color: #00596e;          /* Bleu Barkene */
    text-decoration: none;   /* Pas de soulignement par défaut */
    font-weight: 600;        /* Texte un peu plus épais */
    transition: color 0.2s ease;
}

a:hover {
    color: #00a0c6;          /* Bleu plus clair au survol */
    text-decoration: underline;
}


.welcome-text a:hover {
    color: #b1ecff;          /* Bleu clair au survol */
}


/* ---- Main/box ---- */
main {
    max-width: 2000px !important; /* Étend la largeur max */
    width: 98% !important;        /* Presque toute la largeur de l’écran */           /* occupe 95% de la largeur écran */
    margin: 44px auto 0 auto;
    padding: 50px 40px;     /* plus d'espace interne */
    background: rgba(255,255,255,0.97);
    border-radius: 24px;
    box-shadow: 0 2px 24px #003F5314, 0 1.5px 7px #003f5310;
    min-height: 500px;      /* un peu plus haut */
    position: relative;
    z-index: 2;
}


/* ---- Footer ---- */
footer.footer {
    background: rgba(255,255,255,0.96);
    color: #003F53;
    text-align: center;
    padding: 15px 15px 13px 15px;
    border-radius: 0 0 22px 22px;
    font-size: 1em;
    max-width: 1000px;
    margin: 18px auto 8px auto;
    border-top: 1px solid #e6eef5;
    box-shadow: 0 -1px 7px #003f5313;
    z-index: 1;
}

/* --- MOBILE --- */
@media (max-width: 700px) {
    .header-box, main, footer.footer {
        border-radius: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        max-width: 100vw;
        width: 100vw;
    }
    header.admin-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 9px 5vw 8px 5vw;
        min-height: 36px;
        border-radius: 0 !important;
    }
    .admin-logo-title {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
    .admin-logo-title img.logo {
        max-width: 33vw;
        min-width: 48px;
        max-height: 26px;
        margin-left: 2vw;
    }
    .admin-info {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
        gap: 6px;
        font-size: 0.99em;
        margin: 7px 0 0 0;
        padding-left: 1vw;
    }
nav.menu a {
    color: #00596e;
    font-weight: 600;
    text-decoration: none;
}

nav.menu a:hover {
    color: #00a0c6;
    background: #e8f3ff;
    border-bottom: 2px solid #00a0c6;
}

    main {
        border-radius: 0;
        margin: 0;
        padding: 11px 2vw 22px 2vw;
    }
}
.admin-logo-title img.logo {
  /* on neutralise d’abord la couleur d’origine */
  filter:
    brightness(0)       /* tout devient noir */
    saturate(100%)      /* maximise la saturation */
    invert(18%)         /* passe au bleu clair */
    sepia(70%)          /* renforce la teinte chaude */
    saturate(1271%)     /* augmente la saturation globale */
    hue-rotate(158deg)  /* oriente vers le bleu Barkene */
    brightness(91%)     /* ajuste la luminosité */
    contrast(103%)      /* ajuste le contraste */
    drop-shadow(0 1px 1px rgba(0,63,83,0.13));
}
/* ============= Recoloration en Bleu Barkene ============= */
  
/* 1) Logo principal dans le header */
.admin-logo-title img.logo,
  
/* 2) Logos animés en fond (les <image> à l’intérieur des SVG) */
.bg-logo-bubble .barkene-bubble image {
  /* même chaîne de filtres que vous aviez, pour passer au #003F53 */
  filter:
    brightness(0)
    saturate(100%)
    invert(18%)
    sepia(70%)
    saturate(1271%)
    hue-rotate(158deg)
    brightness(91%)
    contrast(103%)
  !important;  /* pour s’assurer de passer avant tout style inline */
}

.profile-card {
    background: #f9fbfc;
    border-radius: 24px;
    padding: 2rem 2.5rem;
    margin: 32px auto 0 auto;
    max-width: 640px;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
}

.profile-card > div, .profile-card > form {
    margin-bottom: 10px;
    text-align: center;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: flex-start;
}

.profile-form label {
    font-weight: 600;
    color: #003f53;
    margin-bottom: 0.2rem;
}

.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="password"],
.profile-form input[type="tel"],
.profile-form select {
    width: 320px;
    max-width: 100%;
    padding: 0.48rem 0.62rem;
    border: 1.5px solid #b5c7cf;
    border-radius: 7px;
    background: #f3f7fa;
    color: #194452;
    font-size: 1.01rem;
    transition: border-color 0.18s;
}

.profile-form input[disabled] {
    background: #e6e8ea;
    color: #97a0a8;
    cursor: not-allowed;
}

.profile-form input:focus, .profile-form select:focus {
    border-color: #0198c7;
    outline: none;
}

.profile-form button[type="submit"] {
    margin-top: 1.1rem;
    background: #0198c7;
    color: #fff;
    border: none;
    padding: 0.7rem 1.3rem;
    border-radius: 7px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 1px 8px 0 rgba(1,152,199,0.08);
    transition: background 0.16s;
}
.profile-form button[type="submit"]:hover {
    background: #00719d;
}
.profile-notif, .profile-error {
    margin-bottom: 0.7rem;
    font-weight: 600;
}
.profile-notif { color: #147d27; }
.profile-error { color: #ba3030; }
.logo-float-bottom { display: none !important; }

.site-title {
    font-size: 1.3em;
    font-weight: 700;
    color: #00596e;          /* Bleu Barkene principal */
    margin-left: 16px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.site-title:hover {
    color: #00a0c6;          /* Bleu Barkene plus clair au survol */
}
/* Forcer tableau plus large */
.table-wrapper {
    max-width: 100% !important;
    width: 100% !important;
}

/* Nom du fichier : très large */
.table-wrapper table th:nth-child(2),
.table-wrapper table td:nth-child(2) {
    width: 65% !important;
    min-width: 700px !important; /* très large */
    white-space: normal !important;
    word-break: break-word !important;
}

/* Taille + Date + Téléchargement + Téléchargements + Expiration + Supprimer */
.table-wrapper table th:nth-child(3),
.table-wrapper table td:nth-child(3),
.table-wrapper table th:nth-child(4),
.table-wrapper table td:nth-child(4),
.table-wrapper table th:nth-child(5),
.table-wrapper table td:nth-child(5),
.table-wrapper table th:nth-child(7),
.table-wrapper table td:nth-child(7),
.table-wrapper table th:nth-child(8),
.table-wrapper table td:nth-child(8) {
    width: auto !important;
    min-width: 80px !important;
}

/* Mot de passe : large mais pas trop */
.table-wrapper table th:nth-child(6),
.table-wrapper table td:nth-child(6) {
    width: 20% !important;
    min-width: 250px !important;
}