/**
  * Espace Numérique - back-office (connexion et gestion des actualités)
*/
:root {
    --violet      : #951b81;
    --violet-fonce: #6d1260;
    --vert        : #12a650;
    --vert-fonce  : #0e8640;
    --texte       : #2c3e50;
    --texte-doux  : #7f8c8d;
    --bordure     : #e5e8ec;
    --fond        : #f3f5f7;
    --blanc       : #ffffff;
    --rouge       : #c0392b;
    --rayon       : 12px;
}

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

body {
    font-family     : 'Inter', sans-serif;
    font-size       : 15px;
    line-height     : 1.5;
    color           : var(--texte);
    background-color: var(--fond);
}

a {
    color          : var(--violet);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
}

.masque {
    display: none;
}

/* Boutons
--------------------------------------------------------------*/
.bouton {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    padding        : 11px 20px;
    border         : 2px solid transparent;
    border-radius  : 8px;
    font-family    : inherit;
    font-size      : 14px;
    font-weight    : 600;
    cursor         : pointer;
    transition     : all 0.25s ease;
}

.bouton:hover {
    text-decoration: none;
}

.bouton-principal {
    color           : var(--blanc);
    background-color: var(--vert);
}

.bouton-principal:hover {
    background-color: var(--vert-fonce);
    box-shadow      : 0 8px 18px rgba(18, 166, 80, 0.3);
}

.bouton-secondaire {
    color           : var(--texte);
    background-color: var(--blanc);
    border-color    : var(--bordure);
}

.bouton-secondaire:hover {
    border-color: var(--violet);
    color       : var(--violet);
}

.bouton-bloc {
    width: 100%;
}

.bouton-icone {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 34px;
    height          : 34px;
    border          : 1px solid var(--bordure);
    border-radius   : 8px;
    color           : var(--texte);
    background-color: var(--blanc);
    cursor          : pointer;
    transition      : all 0.2s ease;
}

.bouton-icone:hover {
    color          : var(--violet);
    border-color   : var(--violet);
    text-decoration: none;
}

.bouton-icone.danger:hover {
    color       : var(--rouge);
    border-color: var(--rouge);
}

/* Alertes
--------------------------------------------------------------*/
.alerte {
    display      : flex;
    gap          : 10px;
    align-items  : flex-start;
    padding      : 13px 16px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-left  : 4px solid;
    font-size    : 14px;
}

.alerte i {
    margin-top: 3px;
}

.alerte ul {
    margin: 5px 0 0 18px;
}

.alerte-erreur {
    color           : #8a1c1c;
    background-color: #fbeaea;
    border-color    : var(--rouge);
}

.alerte-succes {
    color           : #0e6b34;
    background-color: #e7f5ec;
    border-color    : var(--vert);
}

/* Formulaires
--------------------------------------------------------------*/
.champ {
    margin-bottom: 20px;
}

.champ label {
    display      : block;
    margin-bottom: 7px;
    font-size    : 13px;
    font-weight  : 600;
}

.requis {
    color: var(--rouge);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="time"],
select,
textarea {
    width           : 100%;
    padding         : 11px 14px;
    border          : 2px solid var(--bordure);
    border-radius   : 8px;
    font-family     : inherit;
    font-size       : 15px;
    color           : var(--texte);
    background-color: #f8f9fa;
    transition      : border-color 0.2s ease, background-color 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline         : none;
    border-color    : var(--vert);
    background-color: var(--blanc);
}

textarea {
    resize: vertical;
}

.aide {
    display   : block;
    margin-top: 6px;
    font-size : 13px;
    color     : var(--texte-doux);
}

/* Page de connexion
   Cartographie des espaces en plein cadre, voilée de violet, carte blanche flottante à droite
--------------------------------------------------------------*/
.page-connexion {
    min-height: 100vh;
    margin    : 0;
    background: var(--violet-fonce);
}

.connexion {
    position     : relative;
    display      : flex;
    gap          : 14px;
    width        : 100%;
    min-height   : 100vh;
    padding      : 16px;
    overflow     : hidden;
    background   : #1d0b1a;
}

/* Fond cartographique (Leaflet, non interactif) */
.connexion-carte {
    position  : absolute;
    inset     : 0;
    z-index   : 0;
    background: #1d0b1a;
}

/* Fond OpenStreetMap passé en version sombre */
.connexion-carte .leaflet-tile-pane {
    filter: grayscale(1) invert(1) brightness(0.75) contrast(1.15);
}

/* Voile violet posé dans un volet Leaflet entre les tuiles et les repères */
.connexion-carte .leaflet-voile-pane {
    pointer-events: none;
}

.connexion-carte .leaflet-voile-pane::before {
    content   : "";
    position  : absolute;
    left      : -5000px;
    top       : -5000px;
    width     : 10000px;
    height    : 10000px;
    background: rgba(74, 12, 66, 0.72);
}

.connexion-gauche,
.connexion-droite {
    position: relative;
    z-index : 2;
}

/* La colonne gauche laisse passer la souris vers la carte (sauf ses liens) */
.connexion-gauche {
    pointer-events: none;
}

.connexion-gauche a {
    pointer-events: auto;
}

/* Liaisons entre universités */
.connexion-carte .carte-lien {
    fill            : none;
    stroke          : var(--vert);
    stroke-width    : 1.5;
    stroke-opacity  : 0.7;
    stroke-dasharray: 4 6;
    animation       : connexion-flux 1.6s linear infinite;
}

@keyframes connexion-flux {
    to { stroke-dashoffset: -20; }
}

/* Points des universités */
.connexion-carte .carte-point {
    background: none;
    border    : 0;
}

.connexion-carte .carte-point span {
    position     : relative;
    display      : block;
    width        : 14px;
    height       : 14px;
    border       : 2px solid var(--blanc);
    border-radius: 50%;
    background   : var(--vert);
    box-shadow   : 0 0 12px rgba(18, 166, 80, 0.9);
    transition   : transform 0.3s ease, background-color 0.3s ease;
}

.connexion-carte .carte-point span::after {
    content      : "";
    position     : absolute;
    inset        : -2px;
    border-radius: 50%;
    border       : 2px solid var(--vert);
    animation    : connexion-onde 2.4s ease-out infinite;
}

.connexion-carte .carte-point.actif {
    z-index: 1000 !important;
}

.connexion-carte .carte-point.actif span {
    transform : scale(1.35);
    background: var(--violet);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.7);
}

.connexion-carte .carte-point.actif span::after {
    border-color: var(--blanc);
}

@keyframes connexion-onde {
    from { transform: scale(1); opacity: 0.9; }
    to   { transform: scale(3.2); opacity: 0; }
}

/* Étiquettes des universités : sigle et nombre d'espaces */
.connexion-carte .carte-etiquette {
    padding      : 4px 9px;
    border       : 0;
    border-radius: 6px;
    font-family  : inherit;
    font-size    : 12px;
    line-height  : 1.35;
    color        : var(--texte);
    background   : rgba(255, 255, 255, 0.92);
    white-space  : nowrap;
    box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Pas de marge automatique de Leaflet : le décalage est géré dans placerEtiquettes() */
.connexion-carte .leaflet-tooltip-top,
.connexion-carte .leaflet-tooltip-bottom,
.connexion-carte .leaflet-tooltip-left,
.connexion-carte .leaflet-tooltip-right {
    margin: 0;
}

.connexion-carte .carte-etiquette::before {
    display: none;
}

.connexion-carte .carte-etiquette strong {
    color: var(--violet);
}

.connexion-carte .carte-etiquette b {
    display         : inline-block;
    min-width       : 18px;
    margin-left     : 4px;
    padding         : 0 5px;
    border-radius   : 9px;
    font-size       : 11px;
    text-align      : center;
    color           : var(--blanc);
    background-color: var(--vert);
}

.connexion-carte .carte-etiquette.actif {
    z-index         : 10;
    color           : var(--blanc);
    background-color: var(--violet);
}

.connexion-carte .carte-etiquette.actif strong {
    color: var(--blanc);
}

.connexion-carte .leaflet-control-attribution {
    margin    : 0 0 6px 10px;
    font-size : 10px;
    color     : rgba(255, 255, 255, 0.55);
    background: transparent;
}

.connexion-carte .leaflet-control-attribution a {
    color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    .connexion-carte .carte-lien,
    .connexion-carte .carte-point span::after {
        animation: none;
    }
}

.connexion-gauche {
    flex           : 1.1;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    padding        : 34px 48px 56px;
    color          : var(--blanc);
}

.connexion-haut {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 16px;
}

.connexion-marque {
    display    : inline-flex;
    align-items: center;
    gap        : 12px;
    font-size  : 21px;
    font-weight: 700;
    color      : var(--blanc);
}

.connexion-marque:hover {
    color: var(--blanc);
}

.connexion-logo {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 42px;
    height          : 42px;
    padding         : 6px;
    border-radius   : 10px;
    background-color: var(--blanc);
}

.connexion-logo img {
    max-width : 100%;
    max-height: 100%;
}

.connexion-retour {
    font-size: 14px;
    color    : var(--blanc);
    opacity  : 0.9;
}

.connexion-retour i {
    margin-right: 6px;
}

.connexion-retour:hover {
    color  : var(--blanc);
    opacity: 1;
}

.connexion-accroche {
    text-shadow: 0 2px 12px rgba(20, 4, 18, 0.8);
}

.connexion-accroche h2 {
    margin       : 0 0 18px;
    font-size    : 40px;
    font-weight  : 700;
    line-height  : 1.15;
    letter-spacing: -0.5px;
    color        : var(--blanc);
}

.connexion-accroche p {
    max-width  : 460px;
    margin     : 0;
    font-size  : 15px;
    line-height: 1.7;
    opacity    : 0.88;
}

.connexion-droite {
    flex            : 0 0 500px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 36px 44px;
    border-radius   : 14px;
    background-color: var(--blanc);
}

.connexion-formulaire {
    width    : 100%;
    max-width: 380px;
}

.connexion-droite h1 {
    margin        : 0 0 8px;
    font-size     : 28px;
    font-weight   : 700;
    letter-spacing: -0.5px;
    color         : #1c1c1c;
}

.connexion-droite h1 i {
    margin-right: 6px;
    font-size   : 23px;
    color       : var(--violet);
}

.connexion-intro {
    margin-bottom: 32px;
    color        : var(--texte-doux);
}

.connexion-droite .champ {
    margin-bottom: 14px;
}

.connexion-droite .champ label {
    font-weight: 500;
    color      : #1c1c1c;
}

.connexion-droite input[type="email"],
.connexion-droite input[type="password"],
.connexion-droite input[type="text"],
.connexion-droite input[type="tel"],
.connexion-droite select {
    height          : 40px;
    padding         : 0 16px;
    border          : 1px solid #dcdfe4;
    border-radius   : 10px;
    background-color: var(--blanc);
}

.connexion-droite input:focus {
    border-color: var(--violet);
    box-shadow  : 0 0 0 3px rgba(149, 27, 129, 0.12);
}

.champ-saisie {
    position: relative;
}

.champ-saisie input[type="password"],
.champ-saisie input#password {
    padding-right: 48px;
}

.voir-mdp {
    position  : absolute;
    top       : 50%;
    right     : 8px;
    transform : translateY(-50%);
    padding   : 6px 8px;
    border    : 0;
    background: none;
    color     : var(--texte-doux);
    cursor    : pointer;
}

.voir-mdp:hover {
    color: var(--violet);
}

.connexion-droite .bouton {
    height          : 44px;
    margin-top      : 10px;
    border          : 0;
    border-radius   : 999px;
    font-size       : 15px;
    font-weight     : 600;
    background-color: var(--vert);
}

.connexion-droite .bouton:hover {
    background-color: var(--vert-fonce);
}

/* Libellé et lien sur une même ligne (Mot de passe / Mot de passe oublié ?) */
.champ-etiquette {
    display        : flex;
    align-items    : baseline;
    justify-content: space-between;
    gap            : 10px;
}

.lien-discret {
    padding    : 0;
    border     : 0;
    background : none;
    font-family: inherit;
    font-size  : 13px;
    font-weight: 500;
    color      : var(--violet);
    cursor     : pointer;
}

.lien-discret:hover {
    color          : var(--violet-fonce);
    text-decoration: underline;
}

.lien-discret i {
    margin-right: 4px;
    font-size   : 12px;
}

.connexion-actions {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: space-between;
    gap            : 10px;
    margin-top     : 18px;
}

.connexion-actions:has(> :only-child) {
    justify-content: center;
}

.formulaire-lien {
    margin: 0;
}

/* Code de vérification à 6 chiffres */
.connexion-droite input.champ-code {
    height        : 58px;
    font-family   : 'Courier New', monospace;
    font-size     : 28px;
    font-weight   : 700;
    letter-spacing: 10px;
    text-align    : center;
}

.connexion-pied {
    margin    : 32px 0 0;
    text-align: center;
    font-size : 13px;
    color     : var(--texte-doux);
}

@media (max-width: 900px) {
    .connexion {
        flex-direction: column;
        gap           : 12px;
        padding       : 12px;
    }

    /* Bandeau cartographique : prend la place laissée libre au-dessus du formulaire */
    .connexion-gauche {
        flex     : 1 1 auto;
        min-height: 340px;
        padding  : 14px 8px 18px;
    }

    .connexion-accroche h2 {
        margin   : 0;
        font-size: 26px;
    }

    .connexion-accroche p {
        display: none;
    }

    .connexion-droite {
        flex   : 0 0 auto;
        padding: 30px 22px;
    }

    .connexion-droite h1 {
        font-size: 24px;
    }

    .connexion-droite h1 i {
        font-size: 20px;
    }

    .connexion-intro {
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    .connexion-marque {
        gap      : 10px;
        font-size: 18px;
    }

    .connexion-logo {
        width : 38px;
        height: 38px;
    }

    /* Retour au site : icône seule */
    .connexion-retour span {
        display: none;
    }

    .connexion-retour {
        display        : inline-flex;
        align-items    : center;
        justify-content: center;
        width          : 38px;
        height         : 38px;
        border         : 1px solid rgba(255, 255, 255, 0.35);
        border-radius  : 50%;
    }

    .connexion-retour i {
        margin: 0;
    }

    .connexion-accroche h2 {
        font-size: 23px;
    }
}

/* Mobile : la carte devient un bandeau, le formulaire tient en entier dans l'écran */
@media (max-width: 575px) {
    .connexion {
        gap    : 10px;
        padding: 10px;
    }

    /* Le bandeau occupe la hauteur restante au-dessus du formulaire (230px au minimum) */
    .connexion-gauche {
        flex      : 1 1 auto;
        min-height: 230px;
        padding   : 10px 6px 14px;
    }

    /* Accroche sur une ligne */
    .connexion-accroche h2 {
        font-size: 19px;
    }

    .connexion-accroche h2 br {
        display: none;
    }

    .connexion-droite {
        padding: 24px 18px 18px;
    }

    .connexion-droite h1 {
        font-size: 22px;
    }

    .connexion-intro {
        margin-bottom: 18px;
        font-size    : 14px;
    }

    .connexion-pied {
        margin-top: 18px;
    }
}

/* Mise en page du back-office
   Barre latérale sombre reprise du CFI (thème « dark-sidebar »), réductible aux icônes
--------------------------------------------------------------*/
.admin {
    --menu-largeur       : 265px;
    --menu-largeur-reduit: 86px;
    --menu-fond          : #262932;
    --menu-texte         : rgba(255, 255, 255, 0.8);
    --menu-titre         : rgba(255, 255, 255, 0.6);
    --menu-separateur    : rgba(255, 255, 255, 0.1);
    display   : flex;
    min-height: 100vh;
}

.admin-menu {
    position        : sticky;
    top             : 0;
    z-index         : 30;
    flex            : 0 0 var(--menu-largeur);
    width           : var(--menu-largeur);
    height          : 100vh;
    overflow-x      : hidden;
    overflow-y      : auto;
    background-color: var(--menu-fond);
    box-shadow      : 0 0 21px 0 rgba(89, 102, 122, 0.1);
    transition      : flex-basis 0.3s ease, width 0.3s ease, left 0.3s ease;
    scrollbar-width : thin;
    scrollbar-color : rgba(18, 166, 80, 0.5) transparent;
}

/* Logo et bouton de réduction */
.admin-menu-logo {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 10px;
    padding        : 22px 24px 22px 30px;
    box-shadow     : -9px 0 20px rgba(89, 102, 122, 0.1);
}

.admin-marque {
    display         : flex;
    align-items     : center;
    padding         : 6px 10px;
    border-radius   : 8px;
    background-color: var(--blanc);
}

.admin-marque:hover {
    text-decoration: none;
}

.admin-marque img {
    display: block;
    height : 32px;
    width  : auto;
}

.admin-marque .logo-icone {
    display: none;
    height : 28px;
}

/* Bouton de réduction : icône « grid » verte de 20px et cercle au survol, comme dans le CFI */
.admin-menu-bascule {
    position       : relative;
    z-index        : 0;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 40px;
    height         : 40px;
    padding        : 0;
    border         : 0;
    color          : var(--vert);
    background     : transparent;
    cursor         : pointer;
}

.admin-menu-bascule svg {
    width : 20px;
    height: 20px;
}

.admin-menu-bascule::before {
    content         : "";
    position        : absolute;
    inset           : 0;
    z-index         : -1;
    border-radius   : 100%;
    background-color: rgba(115, 102, 255, 0.1);
    transform       : scale(0);
    transition      : transform 0.3s ease;
}

.admin-menu-bascule:hover::before {
    transform: scale(1);
}

/* Liens */
.admin-menu-liens {
    list-style: none;
    padding   : 0 0 25px;
}

.admin-menu-titre {
    position: relative;
    padding : 25px 20px 6px;
}

.admin-menu-titre::before {
    content   : "";
    position  : absolute;
    top       : 0;
    left      : 50%;
    width     : calc(100% - 40px);
    height    : 1px;
    transform : translateX(-50%);
    background: var(--menu-separateur);
}

.admin-menu-titre:first-child {
    padding-top: 10px;
}

.admin-menu-titre:first-child::before {
    display: none;
}

.admin-menu-titre h6 {
    margin        : 0;
    font-size     : 12px;
    font-weight   : 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space   : nowrap;
    color         : var(--menu-titre);
}

.admin-menu-liens > li:not(.admin-menu-titre) {
    position: relative;
    padding : 0 15px;
}

/* Lien principal (valeurs du CFI : 12px 15px, icône puis libellé) */
.admin-menu-liens > li > a {
    position     : relative;
    display      : flex;
    align-items  : center;
    gap          : 12px;
    margin-top   : 2px;
    padding      : 10px 15px;
    border-radius: 6px;
    font-size    : 14px;
    font-weight  : 500;
    white-space  : nowrap;
    color        : var(--menu-texte);
    transition   : all 0.3s ease;
}

.admin-menu-liens > li > a > i:first-child {
    flex      : 0 0 18px;
    font-size : 15px;
    text-align: center;
}

.admin-menu-liens > li > a:hover {
    text-decoration: none;
    color          : var(--vert);
}

/* Lien actif : fond vert translucide et barre violette à gauche, comme dans le CFI */
.admin-menu-liens > li > a.actif {
    margin-bottom   : 6px;
    color           : var(--vert);
    background-color: rgba(18, 166, 80, 0.15);
}

.admin-menu-liens > li > a.actif::after {
    content      : "";
    position     : absolute;
    top          : 50%;
    left         : -15px;
    width        : 4px;
    height       : 30px;
    border-radius: 0 5px 5px 0;
    transform    : translateY(-50%);
    background   : #92278f;
}

/* Flèche des rubriques à sous-liens */
.admin-menu-fleche {
    margin-left: auto;
    font-size  : 13px;
    color      : var(--menu-titre);
    transition : transform 0.3s ease;
}

.admin-menu-parent.actif .admin-menu-fleche {
    color: var(--vert);
}

.admin-menu-groupe.ouvert .admin-menu-fleche {
    transform: rotate(90deg);
}

/* Sous-liens : trait vertical et petits tirets, comme dans le CFI */
.admin-sous-menu {
    position  : relative;
    display   : none;
    list-style: none;
    padding   : 0 0 6px;
}

.admin-menu-groupe.ouvert .admin-sous-menu {
    display: block;
}

.admin-sous-menu::before {
    content   : "";
    position  : absolute;
    top       : -6px;
    bottom    : 10px;
    left      : 27px;
    width     : 1px;
    background: rgba(255, 255, 255, 0.2);
}

.admin-sous-menu a {
    position     : relative;
    display      : block;
    padding      : 6px 15px 6px 48px;
    font-size    : 13px;
    font-weight  : 500;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
    color        : rgba(255, 255, 255, 0.6);
    transition   : all 0.3s ease;
}

.admin-sous-menu a::after {
    content   : "";
    position  : absolute;
    top       : 48%;
    left      : 27px;
    width     : 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.admin-sous-menu a:hover {
    text-decoration: none;
    color          : var(--vert);
}

.admin-sous-menu a.actif {
    font-weight: 600;
    color      : var(--vert);
}

.admin-sous-menu a.actif::after {
    border-top-color: var(--vert);
}

/* Menu réduit aux icônes (grand écran) */
@media (min-width: 992px) {
    .menu-reduit .admin-menu {
        flex-basis: var(--menu-largeur-reduit);
        width     : var(--menu-largeur-reduit);
    }

    .menu-reduit .admin-menu-logo {
        flex-direction: column;
        padding       : 18px 0;
    }

    .menu-reduit .admin-marque .logo-complet {
        display: none;
    }

    .menu-reduit .admin-marque .logo-icone {
        display: block;
    }

    .menu-reduit .admin-menu-titre {
        padding: 12px 20px 0;
    }

    .menu-reduit .admin-menu-titre h6 {
        display: none;
    }

    .menu-reduit .admin-menu-titre:first-child {
        padding-top: 0;
    }

    .menu-reduit .admin-menu-liens a {
        justify-content: center;
        padding        : 10px 0;
    }

    .menu-reduit .admin-menu-liens > li > a span,
    .menu-reduit .admin-menu-fleche,
    .menu-reduit .admin-sous-menu,
    .menu-reduit .admin-menu-groupe.ouvert .admin-sous-menu {
        display: none;
    }

    /* Panneau flottant des sous-liens au survol d'une rubrique */
    .menu-reduit .admin-menu {
        overflow: visible;
    }

    .menu-reduit .admin-menu-groupe:hover .admin-sous-menu {
        display         : block;
        position        : absolute;
        top             : 0;
        left            : 100%;
        z-index         : 40;
        min-width       : 210px;
        padding         : 8px 0;
        border-radius   : 0 8px 8px 0;
        background-color: var(--menu-fond);
        box-shadow      : 8px 6px 24px rgba(0, 0, 0, 0.25);
    }

    .menu-reduit .admin-menu-groupe:hover .admin-sous-menu::before {
        display: none;
    }

    .menu-reduit .admin-sous-menu a {
        padding: 8px 18px 8px 34px;
    }

    .menu-reduit .admin-sous-menu a::after {
        left: 18px;
    }

    .menu-reduit .admin-menu-groupe:hover .admin-sous-menu-titre {
        display: block;
    }
}

/* Titre du panneau flottant (masqué dans le menu déplié) */
.admin-sous-menu-titre {
    display       : none;
    padding       : 6px 18px 8px;
    margin-bottom : 4px;
    border-bottom : 1px solid var(--menu-separateur);
    font-size     : 12px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color         : var(--menu-titre);
}

.admin-principal {
    flex     : 1;
    min-width: 0;
}

/* En-tête : fond blanc et ombre douce, comme le « page-header » du CFI */
.admin-entete {
    position        : sticky;
    top             : 0;
    z-index         : 15;
    display         : flex;
    align-items     : center;
    gap             : 20px;
    padding         : 12px 30px;
    background-color: var(--blanc);
    box-shadow      : 0 4px 40px rgba(39, 32, 120, 0.1);
}

.admin-burger {
    display   : none;
    border    : 0;
    background: none;
    font-size : 20px;
    color     : var(--texte);
    cursor    : pointer;
}

.admin-voile {
    display: none;
}

/* Message d'information à gauche (emplacement de la « notification-slider » du CFI) */
.admin-entete-message {
    display    : flex;
    align-items: center;
    gap        : 10px;
    flex       : 1;
    min-width  : 0;
    font-size  : 14px;
    color      : var(--texte-doux);
}

.admin-entete-message i {
    color: var(--vert);
}

.admin-entete-message span {
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
}

.admin-entete-badge {
    flex-shrink     : 0;
    padding         : 3px 10px;
    border-radius   : 4px;
    font-size       : 12px;
    font-weight     : 600;
    color           : var(--blanc);
    background-color: var(--vert);
}

.admin-entete-badge:hover {
    text-decoration : none;
    color           : var(--blanc);
    background-color: var(--vert-fonce);
}

/* Profil : avatar à coins arrondis, nom, email et menu au survol */
.admin-profil {
    position: relative;
    padding : 6px 0 6px 10px;
    cursor  : pointer;
}

.admin-profil-media {
    display    : flex;
    align-items: center;
}

.admin-avatar {
    display         : inline-flex;
    flex-shrink     : 0;
    align-items     : center;
    justify-content : center;
    width           : 38px;
    height          : 38px;
    border-radius   : 10px;
    font-weight     : 700;
    font-size       : 14px;
    color           : var(--blanc);
    background      : linear-gradient(135deg, var(--vert-fonce), var(--vert));
}

.admin-profil-texte {
    margin-left: 15px;
}

.admin-profil-texte span {
    display    : block;
    font-size  : 14px;
    font-weight: 500;
    line-height: 1.4;
    color      : var(--texte);
}

.admin-profil-texte p {
    margin     : 0;
    font-size  : 12px;
    line-height: 1;
    color      : rgba(47, 47, 59, 0.7);
}

.admin-profil-texte p i {
    margin-left: 3px;
}

.admin-profil-menu {
    position        : absolute;
    top             : calc(100% + 12px);
    right           : 0;
    z-index         : 20;
    width           : 180px;
    padding         : 6px 10px;
    list-style      : none;
    border-radius   : 8px;
    background-color: var(--blanc);
    box-shadow      : 0 0 20px rgba(89, 102, 122, 0.15);
    opacity         : 0;
    visibility      : hidden;
    transform       : translateY(10px);
    transition      : all 0.25s ease;
}

/* Zone tampon pour garder le menu ouvert en descendant la souris */
.admin-profil-menu::before {
    content : "";
    position: absolute;
    top     : -14px;
    left    : 0;
    right   : 0;
    height  : 14px;
}

.admin-profil:hover .admin-profil-menu,
.admin-profil:focus-within .admin-profil-menu {
    opacity   : 1;
    visibility: visible;
    transform : translateY(0);
}

.admin-profil-menu li a,
.admin-profil-menu li button {
    display    : flex;
    align-items: center;
    gap        : 10px;
    width      : 100%;
    padding    : 10px;
    border     : 0;
    background : none;
    font-family: inherit;
    font-size  : 14px;
    color      : var(--texte);
    cursor     : pointer;
}

.admin-profil-menu li + li {
    border-top: 1px solid var(--bordure);
}

.admin-profil-menu li a:hover,
.admin-profil-menu li button:hover {
    text-decoration: none;
    color          : var(--vert);
}

.admin-profil-menu li i {
    width     : 16px;
    text-align: center;
}

/* Barre de titre de la page avec fil d'Ariane (« page-title » du CFI) */
.admin-titre-page {
    display         : flex;
    flex-wrap       : wrap;
    align-items     : center;
    justify-content : space-between;
    gap             : 10px;
    padding         : 15px 30px;
    background-color: var(--blanc);
    border-top      : 1px solid var(--bordure);
}

.admin-titre-page h4 {
    margin     : 0;
    font-size  : 18px;
    font-weight: 600;
}

.admin-fil {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    list-style : none;
    font-size  : 13px;
    color      : var(--texte-doux);
}

.admin-fil li + li::before {
    content: "/";
    padding: 0 8px;
    color  : var(--texte-doux);
}

.admin-fil a {
    color: #2c323f;
}

.admin-fil a:hover {
    color          : var(--vert);
    text-decoration: none;
}

.admin-fil .actif {
    color: var(--vert);
}

.admin-contenu {
    padding: 28px 30px;
}


/* Petit écran : menu en surimpression, ouvert par le bouton de l'en-tête */
@media (max-width: 991px) {
    .admin-menu {
        position: fixed;
        left    : calc(-1 * var(--menu-largeur) - 20px);
    }

    .menu-ouvert .admin-menu {
        left: 0;
    }

    .menu-ouvert .admin-voile {
        display         : block;
        position        : fixed;
        inset           : 0;
        z-index         : 25;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .admin-burger {
        display: block;
    }

    .admin-profil-texte,
    .admin-entete-message span {
        display: none;
    }

    .admin-entete,
    .admin-titre-page,
    .admin-contenu {
        padding-left : 18px;
        padding-right: 18px;
    }
}

@media (max-width: 575px) {
    .admin-fil {
        display: none;
    }
}

/* Cartes
--------------------------------------------------------------*/
.carte {
    margin-bottom   : 24px;
    padding         : 22px 24px;
    border-radius   : var(--rayon);
    background-color: var(--blanc);
    box-shadow      : 0 4px 18px rgba(0, 0, 0, 0.04);
}

.carte-entete {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: space-between;
    gap            : 12px;
    margin-bottom  : 18px;
}

.carte-entete h2 {
    font-size: 17px;
}

.lien {
    font-size  : 14px;
    font-weight: 600;
}

.grille-2 {
    display              : grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap                  : 24px;
}

.grille-formulaire {
    display              : grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap                  : 24px;
    align-items          : start;
}

@media (max-width: 1100px) {
    .grille-2,
    .grille-formulaire {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Statistiques */
.stats {
    display              : grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap                  : 20px;
    margin-bottom        : 24px;
}

.stat {
    display         : flex;
    align-items     : center;
    gap             : 16px;
    padding         : 20px;
    border-radius   : var(--rayon);
    background-color: var(--blanc);
    box-shadow      : 0 4px 18px rgba(0, 0, 0, 0.04);
    color           : var(--texte);
}

.stat strong {
    display    : block;
    font-size  : 26px;
    line-height: 1.1;
}

.stat span {
    font-size: 14px;
    color    : var(--texte-doux);
}

/* Total rappelé à côté du chiffre (ex. « 12 / 14 ») */
.stat strong small {
    font-size  : 60%;
    font-weight: 600;
    color      : var(--texte-doux);
}

.stat-icone {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
    width           : 50px;
    height          : 50px;
    border-radius   : 12px;
    font-size       : 20px;
}

.stat-icone.violet { color: var(--violet); background-color: rgba(149, 27, 129, 0.1); }
.stat-icone.vert   { color: var(--vert); background-color: rgba(18, 166, 80, 0.1); }
.stat-icone.gris   { color: var(--texte-doux); background-color: #eef0f2; }
.stat-icone.blanc  { color: var(--vert); background-color: var(--blanc); }

.stat-action {
    background: linear-gradient(135deg, var(--vert-fonce), var(--vert));
    transition: transform 0.25s ease;
}

.stat-action strong,
.stat-action span {
    color: var(--blanc);
}

.stat-action:hover {
    text-decoration: none;
    transform      : translateY(-3px);
}

@media (max-width: 1100px) {
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Listes simples (tableau de bord) */
.liste-simple {
    list-style: none;
}

.liste-simple li {
    display    : flex;
    align-items: center;
    gap        : 14px;
    padding    : 12px 0;
    border-top : 1px solid var(--bordure);
}

.liste-simple li:first-child {
    border-top: 0;
}

.liste-simple li > div {
    flex     : 1;
    min-width: 0;
}

.liste-simple li img {
    width        : 56px;
    height       : 42px;
    border-radius: 6px;
    object-fit   : cover;
}

.liste-simple a,
.liste-simple span {
    display      : block;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
    font-weight  : 500;
}

.liste-simple small {
    color: var(--texte-doux);
}

.liste-simple .badge {
    display: inline-block;
}

.point {
    flex         : 0 0 10px;
    height       : 10px;
    border-radius: 50%;
}

.point-vert  { background-color: var(--vert); }
.point-rouge { background-color: var(--rouge); }

.vide {
    padding   : 25px 0;
    text-align: center;
    color     : var(--texte-doux);
}

/* Badges */
.badge {
    display      : inline-block;
    padding      : 4px 10px;
    border-radius: 20px;
    font-size    : 12px;
    font-weight  : 600;
    white-space  : nowrap;
}

.badge-vert  { color: var(--vert-fonce); background-color: rgba(18, 166, 80, 0.12); }
.badge-gris  { color: #5d6d7e; background-color: #eef0f2; }
.badge-rouge { color: var(--rouge); background-color: rgba(192, 57, 43, 0.1); }

/* Tableau des actualités
--------------------------------------------------------------*/
.tableau-conteneur {
    overflow-x: auto;
}

.tableau {
    width          : 100%;
    border-collapse: collapse;
}

.tableau th {
    padding       : 12px 14px;
    text-align    : left;
    font-size     : 12px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color         : var(--texte-doux);
    background    : #f8f9fa;
}

.tableau td {
    padding       : 14px;
    border-top    : 1px solid var(--bordure);
    vertical-align: middle;
}

.tableau tr:hover td {
    background-color: #fbfbfc;
}

.tableau-actu {
    display    : flex;
    align-items: center;
    gap        : 14px;
    min-width  : 320px;
}

.tableau-actu img {
    flex         : 0 0 72px;
    width        : 72px;
    height       : 52px;
    border-radius: 8px;
    object-fit   : cover;
}

.tableau-actu a {
    font-weight: 600;
    color      : var(--texte);
}

.tableau-actu a:hover {
    color: var(--violet);
}

.tableau-actu small {
    display: block;
    color  : var(--texte-doux);
}

.nowrap {
    white-space: nowrap;
}

.tableau .actions {
    text-align : right;
    white-space: nowrap;
}

.inline {
    display: inline;
}

/* DataTables (liste des actualités) : couleurs du back-office, angles droits
--------------------------------------------------------------*/
.carte-tableau {
    border-radius: 0;
}

.compteur {
    display         : inline-block;
    min-width       : 26px;
    margin-left     : 6px;
    padding         : 1px 8px;
    font-size       : 12px;
    text-align      : center;
    color           : var(--vert-fonce);
    background-color: rgba(18, 166, 80, 0.12);
}

.dataTables_wrapper {
    font-size: 14px;
    color    : var(--texte);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px;
    color        : var(--texte-doux);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    width           : auto;
    margin          : 0 6px;
    padding         : 7px 10px;
    border          : 1px solid var(--bordure);
    border-radius   : 0;
    font-size       : 14px;
    background-color: var(--blanc);
}

.dataTables_wrapper .dataTables_filter input {
    width      : 240px;
    margin-right: 0;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--vert);
}

/* Le tableau garde sa présentation (pas de bordures DataTables) */
table.dataTable.tableau {
    margin       : 0 !important;
    border-bottom: 1px solid var(--bordure);
}

table.dataTable.tableau thead th {
    padding      : 12px 14px;
    border-bottom: 0;
}

table.dataTable.tableau thead .sorting,
table.dataTable.tableau thead .sorting_asc,
table.dataTable.tableau thead .sorting_desc {
    padding-right: 26px;
}

table.dataTable.tableau thead .sorting_asc,
table.dataTable.tableau thead .sorting_desc {
    color: var(--vert-fonce);
}

table.dataTable.tableau tbody td {
    padding: 14px;
}

table.dataTable.tableau.no-footer {
    border-bottom: 1px solid var(--bordure);
}

.dataTables_wrapper .dataTables_info {
    padding-top: 16px;
    color      : var(--texte-doux);
}

/* Pagination
   Préfixe « body » : l'emporte sur jquery.dataTables.min.css (CDN), chargé après ce fichier,
   dont le « color: white !important » au survol rendait le numéro invisible sur fond blanc */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width    : 36px;
    margin-left  : 4px;
    padding      : 6px 12px;
    border       : 1px solid var(--bordure) !important;
    border-radius: 0;
    color        : var(--texte) !important;
    background   : var(--blanc) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color       : var(--vert) !important;
    border-color: var(--vert) !important;
    background  : var(--blanc) !important;
    box-shadow  : none;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color       : var(--blanc) !important;
    border-color: var(--vert) !important;
    background  : var(--vert) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color       : #b5bcc4 !important;
    border-color: var(--bordure) !important;
    background  : #f8f9fa !important;
    cursor      : default;
}

/* Pas d'arrondis dans le tableau (vignettes, badges, boutons d'action) */
.carte-tableau .tableau-actu img,
.carte-tableau .badge,
.carte-tableau .bouton-icone,
.carte-tableau .bouton {
    border-radius: 0;
}

@media (max-width: 767px) {
    /* Contrôles DataTables alignés à gauche, recherche sur toute la largeur
       (préfixe body : la feuille de DataTables les centre sous 640px) */
    body .dataTables_wrapper .dataTables_length,
    body .dataTables_wrapper .dataTables_filter,
    body .dataTables_wrapper .dataTables_info,
    body .dataTables_wrapper .dataTables_paginate {
        float     : none;
        text-align: left;
    }

    body .dataTables_wrapper .dataTables_filter label {
        display: block;
        width  : 100%;
    }

    body .dataTables_wrapper .dataTables_filter input {
        display: block;
        width  : 100%;
        margin : 6px 0 0;
    }

    body .dataTables_wrapper .dataTables_paginate {
        margin-top: 10px;
    }

    /* Tableaux en cartes : une carte par ligne, l'intitulé de la colonne à gauche de chaque valeur
       (data-label posé par le script du gabarit). Le tableau d'édition des chiffres garde son défilement. */
    .tableau:not(.tableau-edition) {
        width: 100% !important;
    }

    .tableau:not(.tableau-edition) thead {
        display: none;
    }

    .tableau:not(.tableau-edition),
    .tableau:not(.tableau-edition) tbody,
    .tableau:not(.tableau-edition) tr {
        display: block;
    }

    .tableau:not(.tableau-edition) tr {
        margin-bottom   : 12px;
        padding         : 4px 14px;
        border          : 1px solid var(--bordure);
        background-color: var(--blanc);
    }

    .tableau:not(.tableau-edition) tr:hover td {
        background-color: transparent;
    }

    .tableau:not(.tableau-edition) td {
        position     : relative;
        display      : block;
        min-height   : 38px;
        padding      : 10px 0 10px 40% !important; /* DataTables impose son propre padding */
        border-top   : 1px solid #f1f2f4;
        text-align   : left;
        white-space  : normal;
        overflow-wrap: anywhere;
    }

    .tableau:not(.tableau-edition) td:first-child {
        border-top: 0;
    }

    .tableau:not(.tableau-edition) td::before {
        content       : attr(data-label);
        position      : absolute;
        top           : 11px;
        left          : 0;
        width         : 37%;
        font-size     : 11px;
        font-weight   : 600;
        line-height   : 1.4;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color         : var(--texte-doux);
    }

    /* Sans intitulé : colonne principale (vignette + titre), actions, ligne « aucun résultat » */
    .tableau:not(.tableau-edition) td[data-label=""],
    .tableau:not(.tableau-edition) td:has(> .tableau-actu),
    .tableau:not(.tableau-edition) td:has(> .tableau-contact),
    .tableau:not(.tableau-edition) td.actions,
    .tableau:not(.tableau-edition) td.dataTables_empty {
        padding-left: 0 !important;
    }

    .tableau:not(.tableau-edition) td[data-label=""]::before,
    .tableau:not(.tableau-edition) td:has(> .tableau-actu)::before,
    .tableau:not(.tableau-edition) td:has(> .tableau-contact)::before,
    .tableau:not(.tableau-edition) td.actions::before,
    .tableau:not(.tableau-edition) td.dataTables_empty::before {
        display: none;
    }

    .tableau:not(.tableau-edition) td.actions {
        text-align: right;
    }

    .tableau:not(.tableau-edition) td.dataTables_empty {
        text-align: center;
    }

    .tableau:not(.tableau-edition) .tableau-actu,
    .tableau:not(.tableau-edition) .tableau-contact,
    .tableau:not(.tableau-edition) .tableau-contact > div {
        min-width: 0;
    }

    .tableau:not(.tableau-edition) .badge {
        white-space: normal;
    }
}

/* Formulaire d'actualité
--------------------------------------------------------------*/
.boutons {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    margin-top    : 10px;
}

.couverture {
    display         : flex;
    align-items     : center;
    justify-content : center;
    aspect-ratio    : 16 / 10;
    margin-bottom   : 14px;
    overflow        : hidden;
    color           : var(--texte-doux);
    background-color: #f1f3f5;
}

.couverture img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.zone-depot {
    display         : flex !important;
    flex-direction  : column;
    align-items     : center;
    gap             : 6px;
    padding         : 28px 20px;
    border          : 2px dashed var(--bordure);
    text-align      : center;
    font-weight     : 500 !important;
    color           : var(--texte-doux);
    background-color: #fafbfc;
    cursor          : pointer;
    transition      : border-color 0.2s ease;
}

.zone-depot:hover {
    border-color: var(--vert);
}

.zone-depot i {
    font-size: 28px;
    color    : var(--vert);
}

.apercus,
.galerie-admin {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap                  : 10px;
    margin-top           : 12px;
}

.apercus img {
    width       : 100%;
    aspect-ratio: 4 / 3;
    object-fit  : cover;
}

.galerie-admin {
    margin-bottom: 20px;
}

.galerie-admin-item {
    position: relative;
    display : block;
    overflow: hidden;
    cursor  : pointer;
}

.galerie-admin-item img {
    display     : block;
    width       : 100%;
    aspect-ratio: 4 / 3;
    object-fit  : cover;
    transition  : opacity 0.2s ease;
}

.galerie-admin-item input {
    position: absolute;
    top     : 8px;
    left    : 8px;
    width   : 18px;
    height  : 18px;
}

.galerie-admin-retirer {
    position        : absolute;
    inset           : 0;
    display         : none;
    align-items     : center;
    justify-content : center;
    font-size       : 22px;
    color           : var(--blanc);
    background-color: rgba(192, 57, 43, 0.55);
    pointer-events  : none;
}

.galerie-admin-item input:checked ~ .galerie-admin-retirer {
    display: flex;
}

/* Galerie triable : numéro de position, poignée et emplacement pendant le glisser */
.galerie-admin-item {
    cursor: grab;
}

.galerie-admin-numero {
    position        : absolute;
    bottom          : 6px;
    left            : 6px;
    min-width       : 22px;
    padding         : 1px 6px;
    font-size       : 12px;
    font-weight     : 700;
    text-align      : center;
    color           : var(--blanc);
    background-color: rgba(0, 0, 0, 0.6);
}

.galerie-admin-poignee {
    position        : absolute;
    top             : 6px;
    right           : 6px;
    padding         : 3px 6px;
    font-size       : 12px;
    color           : var(--blanc);
    background-color: rgba(0, 0, 0, 0.5);
}

.galerie-admin-fantome {
    opacity: 0.35;
    outline: 2px dashed var(--vert);
}

.lien-apercu {
    margin-bottom: 6px;
}

/* Éditeur Summernote aux couleurs du back-office */
.note-editor.note-frame {
    border       : 2px solid var(--bordure) !important;
    border-radius: 0 !important;
}

.note-editor .note-toolbar {
    border-radius: 0;
}

/* Contacts, chiffres clés et témoignages
--------------------------------------------------------------*/
/* Badge du nombre de messages non lus dans la barre latérale (comme les badges du CFI) */
.admin-menu-badge {
    margin-left     : auto;
    min-width       : 20px;
    padding         : 1px 6px;
    font-size       : 11px;
    font-weight     : 700;
    line-height     : 18px;
    text-align      : center;
    color           : var(--blanc);
    background-color: var(--violet);
}

@media (min-width: 992px) {
    .menu-reduit .admin-menu-badge {
        position : absolute;
        top      : 4px;
        right    : 14px;
        min-width: 16px;
        padding  : 0 4px;
        font-size: 10px;
        line-height: 16px;
    }
}

.badge-violet {
    color           : var(--violet);
    background-color: rgba(149, 27, 129, 0.1);
}

.point-gris   { background-color: #c5ccd3; }
.point-violet { background-color: var(--violet); }

a.stat {
    color: var(--texte);
}

a.stat:hover {
    text-decoration: none;
}

.grille-1 {
    display: block;
}

.aide-bloc {
    margin: -6px 0 18px;
}

/* Liste des messages */
.tableau-contact {
    display    : flex;
    align-items: center;
    gap        : 12px;
    min-width  : 220px;
}

.tableau-contact a,
.lien-fort {
    font-weight: 600;
    color      : var(--texte);
}

.tableau-contact a:hover,
.lien-fort:hover {
    color: var(--violet);
}

.tableau-contact small,
small.bloc {
    display: block;
    color  : var(--texte-doux);
}

.tableau-objet {
    display    : block;
    font-weight: 500;
}

.tableau-extrait {
    display  : block;
    max-width: 420px;
    font-size: 13px;
    color    : var(--texte-doux);
}

.tableau tr.non-lu td {
    background-color: rgba(149, 27, 129, 0.03);
}

.tableau tr.non-lu .tableau-contact a,
.tableau tr.non-lu .tableau-objet {
    font-weight: 700;
}

/* Fiche d'un message */
.message-contenu {
    padding         : 20px;
    font-size       : 15px;
    line-height     : 1.8;
    white-space     : normal;
    background-color: #f8f9fa;
    border-left     : 4px solid var(--violet);
}

.fiche-contact {
    list-style   : none;
    margin-bottom: 18px;
}

.fiche-contact li {
    display    : flex;
    align-items: center;
    gap        : 12px;
    padding    : 10px 0;
    border-top : 1px solid var(--bordure);
    word-break : break-all;
}

.fiche-contact li:first-child {
    border-top: 0;
}

.fiche-contact i {
    flex      : 0 0 18px;
    text-align: center;
    color     : var(--vert);
}

.bouton-danger {
    color           : var(--rouge);
    background-color: var(--blanc);
    border-color    : rgba(192, 57, 43, 0.35);
}

.bouton-danger:hover {
    color           : var(--blanc);
    background-color: var(--rouge);
}

.boutons form {
    margin: 0;
}

/* Tableau éditable des chiffres clés */
.tableau-edition td {
    padding: 10px 8px;
}

.tableau-edition input[type="text"],
.tableau-edition input[type="number"],
.tableau-edition select {
    width    : 100%;
    padding  : 8px 10px;
    border   : 1px solid #ced4da;
    font-size: 14px;
}

.tableau-edition .col-ordre   { width: 80px; }
.tableau-edition .col-icone   { width: 230px; }
.tableau-edition .col-valeur  { width: 120px; }
.tableau-edition .col-suffixe { width: 90px; }

.tableau-edition tr.ligne-ajout td {
    background-color: rgba(18, 166, 80, 0.04);
}

.col-ordre {
    width: 70px;
}

.choix-icone {
    display    : flex;
    align-items: center;
    gap        : 8px;
}

.choix-icone-apercu {
    display         : inline-flex;
    flex            : 0 0 38px;
    align-items     : center;
    justify-content : center;
    height          : 38px;
    color           : var(--blanc);
    background-color: var(--vert);
}

.case-supprimer {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
    color      : var(--rouge);
    cursor     : pointer;
}

.case-supprimer input {
    width : 16px;
    height: 16px;
}

.boutons-ligne {
    display        : flex;
    justify-content: flex-end;
    margin-top     : 20px;
}

/* Case à cocher avec libellé */
.case {
    display    : flex !important;
    align-items: center;
    gap        : 10px;
    font-weight: 500 !important;
    cursor     : pointer;
}

.case input {
    width : 18px;
    height: 18px;
}

/* Journal des connexions : filtres
--------------------------------------------------------------*/
.filtres {
    display              : grid;
    grid-template-columns: 150px 170px 170px minmax(0, 1fr) auto;
    gap                  : 14px;
    align-items          : end;
    margin-bottom        : 20px;
    padding              : 18px;
    background-color     : #f8f9fa;
    border-left          : 4px solid var(--vert);
}

.filtres .champ {
    margin-bottom: 0;
}

.filtres input,
.filtres select {
    padding         : 9px 12px;
    border          : 1px solid #ced4da;
    font-size       : 14px;
    background-color: var(--blanc);
}

.filtres-boutons {
    display: flex;
    gap    : 8px;
}

@media (max-width: 1100px) {
    .filtres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filtres .champ-large,
    .filtres-boutons {
        grid-column: span 2;
    }
}

.stat-icone.rouge { color: var(--rouge); background-color: rgba(192, 57, 43, 0.1); }

.carte-entete-interne {
    margin-top : 10px;
    padding-top: 20px;
    border-top : 1px solid var(--bordure);
}

.tableau-contact .badge {
    margin-left: 6px;
}

/* Formulaire d'espace numérique
--------------------------------------------------------------*/
.grille-champs {
    display              : grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap                  : 0 20px;
}

.grille-champs-ajout {
    margin-top: 6px;
}

@media (max-width: 767px) {
    .grille-champs {
        grid-template-columns: minmax(0, 1fr);
    }
}

.carte-choix {
    height    : 320px;
    border    : 1px solid #ced4da;
    cursor    : crosshair;
}

.galerie-espace {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.galerie-espace-item select {
    width    : 100%;
    margin-top: 4px;
    padding  : 4px 6px;
    border   : 1px solid #ced4da;
    font-size: 12px;
}

.case-retirer {
    margin: 10px 0 4px;
}

/* Mon profil
--------------------------------------------------------------*/
.alerte-avertissement {
    color           : #7a5300;
    background-color: #fff6db;
    border-color    : #f0ad00;
}

.carte-entete h2 i {
    margin-right: 6px;
    color       : var(--vert);
}

.profil-resume {
    display      : flex;
    align-items  : center;
    gap          : 15px;
    margin-bottom: 22px;
    padding      : 15px;
    background   : #f8f9fa;
}

.profil-resume strong,
.profil-resume small {
    display: block;
}

.profil-resume small {
    color: var(--texte-doux);
}

.admin-avatar-grand {
    width    : 54px;
    height   : 54px;
    font-size: 18px;
}

/* Back-office sans arrondis (cartes, champs, boutons, badges…), comme le CFI.
   Seuls l'avatar et les pastilles d'état restent arrondis.
--------------------------------------------------------------*/
.admin-contenu .carte,
.admin-contenu .stat,
.admin-contenu .stat-icone,
.admin-contenu .bouton,
.admin-contenu .bouton-icone,
.admin-contenu .badge,
.admin-contenu .alerte,
.admin-contenu input,
.admin-contenu select,
.admin-contenu textarea,
.admin-contenu .liste-simple img,
.admin-contenu .tableau-actu img {
    border-radius: 0;
}

.admin-contenu .carte,
.admin-contenu .stat {
    box-shadow: 0 9px 20px rgba(46, 35, 94, 0.07);
}

.carte-entete-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Slider et composantes de l'accueil */
.tableau-bandeau img {
    flex  : 0 0 120px;
    width : 120px;
    height: 44px;
}

.couverture-bandeau {
    aspect-ratio: 2000 / 720;
}

.choix-theme {
    display       : flex;
    flex-direction: column;
    gap           : 8px;
}

.texte-alerte {
    color      : #b7791f;
    font-weight: 600;
}

/* Gestion des droits */
.jauge {
    width     : 120px;
    height    : 6px;
    margin-bottom: 4px;
    background: #eef0f2;
}

.jauge span {
    display   : block;
    height    : 100%;
    background: var(--vert);
}

.matrice-permissions {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap                  : 18px;
}

.groupe-permissions {
    padding    : 14px 16px;
    border     : 1px solid var(--bordure);
    border-left: 4px solid var(--violet);
}

.groupe-permissions legend {
    padding    : 0 6px;
    font-size  : 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color      : var(--violet);
}

.groupe-permissions .case {
    margin   : 8px 0;
    font-size: 14px;
}

.acces-refuse {
    max-width : 560px;
    margin    : 40px auto;
    padding   : 40px;
    text-align: center;
}

.acces-refuse-icone {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 70px;
    height          : 70px;
    margin-bottom   : 18px;
    font-size       : 28px;
    color           : var(--blanc);
    background-color: var(--rouge);
    border-radius   : 50%;
}

.acces-refuse h2 {
    margin-bottom: 12px;
}

.acces-refuse p {
    margin-bottom: 10px;
    color        : var(--texte-doux);
}

.acces-refuse .bouton {
    margin-top: 10px;
}

/* Fenêtre modale (confirmation de déconnexion) */
.modal {
    position       : fixed;
    inset          : 0;
    z-index        : 1000;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 16px;
}

.modal[hidden] {
    display: none;
}

.modal-fond {
    position        : absolute;
    inset           : 0;
    background-color: rgba(38, 41, 50, 0.55);
    animation       : modal-fondu 0.2s ease;
}

.modal-boite {
    position        : relative;
    width           : 100%;
    max-width       : 420px;
    padding         : 30px 28px 24px;
    text-align      : center;
    background-color: var(--blanc);
    box-shadow      : 0 20px 50px rgba(0, 0, 0, 0.25);
    animation       : modal-entree 0.25s ease;
}

.modal-icone {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 58px;
    height          : 58px;
    margin-bottom   : 14px;
    font-size       : 22px;
    color           : var(--rouge);
    border-radius   : 50%;
    background-color: rgba(192, 57, 43, 0.1);
}

.modal-boite h3 {
    margin-bottom: 8px;
    font-size    : 19px;
    font-weight  : 700;
}

.modal-boite p {
    margin-bottom: 22px;
    font-size    : 14px;
    color        : var(--texte-doux);
}

.modal-boutons {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 10px;
}

.modal-boutons .bouton {
    justify-content: center;
}

body.modal-ouverte {
    overflow: hidden;
}

@keyframes modal-fondu {
    from { opacity: 0; }
}

@keyframes modal-entree {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
}
.modal-boutons .bouton-danger {
    color           : var(--blanc);
    background-color: var(--rouge);
    border-color    : var(--rouge);
}

.modal-boutons .bouton-danger:hover {
    background-color: #a93226;
    border-color    : #a93226;
}

/* Page Statistiques */
.stats-auto {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.grille-stats {
    display              : grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap                  : 0 24px;
}

.grille-stats .carte-entete .aide {
    font-size: 13px;
}

.graphique {
    position: relative;
    height  : 280px;
}

.tableau th.nombre,
.tableau td.nombre {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .grille-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

.stats-periode {
    display      : flex;
    align-items  : center;
    justify-content: flex-end;
    gap          : 10px;
    margin-bottom: 18px;
    font-size    : 14px;
    font-weight  : 600;
}

.stats-periode select {
    width: auto;
    min-width: 180px;
}

/* Tableau de bord
-------------------------------------------------------------- */
.accueil-bandeau {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    justify-content: space-between;
    gap            : 20px;
    margin-bottom  : 20px;
    padding        : 26px 28px;
    color          : var(--blanc);
    background     : linear-gradient(120deg, var(--violet-fonce) 0%, var(--violet) 55%, #b02a99 100%);
    box-shadow     : 0 10px 30px rgba(149, 27, 129, 0.25);
}

.accueil-bandeau h2 {
    margin    : 4px 0 2px;
    font-size : 24px;
    font-weight: 700;
}

.accueil-bandeau p {
    font-size: 14px;
    opacity  : 0.9;
}

.accueil-date {
    font-size     : 13px;
    letter-spacing: 0.2px;
    opacity       : 0.85;
}

.accueil-actions {
    display  : flex;
    flex-wrap: wrap;
    gap      : 10px;
}

.bouton-blanc {
    color           : var(--violet);
    background-color: var(--blanc);
}

.bouton-blanc:hover {
    color           : var(--violet-fonce);
    background-color: #f7eef6;
}

.bouton-contour {
    color       : var(--blanc);
    border-color: rgba(255, 255, 255, 0.55);
}

.bouton-contour:hover {
    color           : var(--blanc);
    border-color    : var(--blanc);
    background-color: rgba(255, 255, 255, 0.12);
}

/* Points à traiter */
.a-traiter {
    display      : flex;
    flex-wrap    : wrap;
    align-items  : center;
    gap          : 10px;
    margin-bottom: 20px;
}

.a-traiter-titre {
    margin-right: 4px;
    font-size   : 13px;
    font-weight : 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color       : var(--texte-doux);
}

.a-traiter-point {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    padding         : 8px 14px;
    font-size       : 13.5px;
    font-weight     : 600;
    background-color: var(--blanc);
    border-left     : 3px solid currentColor;
    box-shadow      : 0 2px 10px rgba(0, 0, 0, 0.05);
    transition      : transform 0.2s ease;
}

.a-traiter-point:hover {
    text-decoration: none;
    transform      : translateY(-2px);
}

.a-traiter-point .fa-arrow-right {
    font-size: 11px;
    opacity  : 0.6;
}

.a-traiter-rouge  { color: var(--rouge); }
.a-traiter-violet { color: var(--violet); }
.a-traiter-gris   { color: #5d6d7e; }

.stats-auto .stat:hover {
    text-decoration: none;
    box-shadow     : 0 8px 24px rgba(0, 0, 0, 0.08);
}

.grille-accueil {
    display              : grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap                  : 0 24px;
    align-items          : start;
}

.graphique-bas {
    height: 220px;
}

.point-violet { background-color: var(--violet); }

@media (max-width: 1100px) {
    .grille-accueil {
        grid-template-columns: minmax(0, 1fr);
    }
}

.stats-accueil {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.stats-accueil .stat {
    padding: 18px;
}

input:disabled,
select:disabled,
textarea:disabled {
    color           : var(--texte-doux);
    background-color: #f3f5f7;
    cursor          : not-allowed;
}

/* Formulaire utilisateur : Prénoms plus large que Nom, blocs de même hauteur */
.grille-champs-nom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

.grille-egale {
    align-items: stretch;
}

.grille-egale > .carte {
    display       : flex;
    flex-direction: column;
}

.grille-egale > .carte > .boutons {
    margin-top: auto;
}

@media (max-width: 767px) {
    .grille-champs-nom {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tableau de bord : colonnes de même hauteur (le dernier bloc de chaque colonne s'étire) */
.grille-accueil {
    align-items: stretch;
}

.colonne-accueil {
    display       : flex;
    flex-direction: column;
}

.colonne-accueil > .carte:last-child {
    flex: 1;
}

/* Bloc sans contenu : message et icône centrés dans toute la hauteur du bloc */
.carte-etat-vide {
    display       : flex;
    flex-direction: column;
}

.carte-etat-vide .liste-simple {
    display        : flex;
    flex           : 1;
    align-items    : center;
    justify-content: center;
}

.liste-simple li.etat-vide {
    flex-direction : column;
    justify-content: center;
    gap            : 14px;
    padding        : 30px 0;
    text-align     : center;
    border-top     : 0;
}

.etat-vide i {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 64px;
    height          : 64px;
    font-size       : 26px;
    color           : var(--violet);
    border-radius   : 50%;
    background-color: rgba(149, 27, 129, 0.08);
}

.etat-vide p {
    color: var(--texte-doux);
}

/* Logo de la barre latérale suivi de « Espace Numérique », comme sur le site */
.admin-menu-logo {
    padding-left : 20px;
    padding-right: 16px;
}

.admin-marque {
    gap: 9px;
}

.admin-marque-texte {
    display       : flex;
    flex-direction: column;
    padding-left  : 9px;
    font-size     : 10px;
    font-weight   : 500;
    line-height   : 1.2;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color         : #6b6b6b;
    border-left   : 2px solid #eee;
}

.admin-marque-texte strong {
    font-size     : 12.5px;
    font-weight   : 700;
    letter-spacing: 0.4px;
    color         : var(--violet);
}

@media (min-width: 992px) {
    .menu-reduit .admin-marque-texte {
        display: none;
    }
}

/* Fréquentation : filtres rechargés à la volée, tableaux chargés par le serveur */
.filtres-auto {
    grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
}

.dataTables_wrapper .dataTables_processing {
    top             : 40px;
    padding         : 10px;
    font-weight     : 600;
    color           : var(--violet);
    background      : rgba(255, 255, 255, 0.92);
    box-shadow      : 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Recherche de membre (Tom Select) aux couleurs du back-office */
.ts-wrapper .ts-control {
    padding     : 11px 14px;
    font-size   : 14px;
    border-color: #ced4da;
    border-radius: 0;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--vert);
    box-shadow  : none;
}

.ts-dropdown .option.active {
    color           : var(--texte);
    background-color: #faf3f9;
}

.ts-dropdown small.bloc,
.tableau small.bloc {
    display  : block;
    font-size: 12px;
    color    : var(--texte-doux);
}
/* Statistiques : graphiques Highcharts (menu d'export en haut à droite de chaque graphique) */
.stats-section {
    display    : flex;
    align-items: baseline;
    gap        : 10px;
    margin     : 8px 0 16px;
    font-size  : 18px;
    font-weight: 700;
    color      : var(--texte);
}

.stats-section i {
    color: var(--violet);
}

.stats-section small {
    font-size  : 13px;
    font-weight: 500;
    color      : var(--texte-doux);
}

.graphique-hc {
    min-height: 320px;
}

.grille-stats .carte-graphique-large {
    grid-column: 1 / -1;
}

.highcharts-data-table table {
    width          : 100%;
    margin-top     : 12px;
    font-size      : 13px;
    border-collapse: collapse;
}

.highcharts-data-table th,
.highcharts-data-table td {
    padding    : 6px 10px;
    text-align : left;
    border-top : 1px solid var(--bordure);
}

.highcharts-data-table caption {
    display: none;
}

/* Formulaire d'espace : salles de réservation rattachées */
.liste-salles {
    display       : flex;
    flex-direction: column;
    gap           : 8px;
    max-height    : 300px;
    overflow-y    : auto;
}

.liste-salles-lecture {
    margin    : 0 0 8px;
    list-style: none;
}

.liste-salles-lecture li {
    padding: 4px 0;
}

.liste-salles-lecture i {
    margin-right: 6px;
    color       : var(--vert);
}
/* Filtre aux libellés longs (ex. noms d'universités) : deux colonnes */
.filtres-auto .champ-double {
    grid-column: span 2;
}

@media (max-width: 575px) {
    .filtres-auto .champ-double {
        grid-column: auto;
    }
}

/* Tableau de bord : visites du jour */
.jour .carte-entete h2 i {
    margin-right: 6px;
    color       : var(--violet);
}

.jour .carte-entete h2 small {
    margin-left: 6px;
    font-size  : 13px;
    font-weight: 500;
    color      : var(--texte-doux);
}

.jour-actions {
    display    : flex;
    align-items: center;
    gap        : 18px;
}

.jour-chiffres {
    display              : grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom        : 22px;
    border               : 1px solid var(--bordure);
}

.jour-chiffre {
    padding: 16px 20px;
}

.jour-chiffre + .jour-chiffre {
    border-left: 1px solid var(--bordure);
}

.jour-chiffre strong {
    display    : block;
    font-size  : 28px;
    line-height: 1.1;
    color      : var(--violet);
}

.jour-chiffre span {
    display  : block;
    font-size: 14px;
    color    : var(--texte);
}

.jour-chiffre small {
    display    : block;
    margin-top : 4px;
    font-size  : 12.5px;
    font-weight: 600;
    color      : var(--texte-doux);
}

.jour-chiffre small.hausse { color: var(--vert-fonce); }
.jour-chiffre small.baisse { color: var(--rouge); }

.jour-details {
    display              : grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap                  : 30px;
}

.jour-details h3 {
    margin-bottom : 12px;
    font-size     : 13px;
    font-weight   : 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color         : var(--texte-doux);
}

.jour-salles {
    list-style: none;
}

.jour-salles li {
    display              : grid;
    grid-template-columns: 130px minmax(0, 1fr) 40px;
    align-items          : center;
    gap                  : 12px;
    padding              : 7px 0;
    font-size            : 14px;
}

.jour-salle-nom {
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
}

.jour-barre {
    height          : 8px;
    background-color: #f0f1f3;
}

.jour-barre span {
    display         : block;
    height          : 100%;
    min-width       : 2px;
    background-color: var(--violet);
}

.jour-salles strong {
    text-align: right;
}

.jour-heure {
    flex       : 0 0 auto;
    padding    : 4px 8px;
    font-size  : 13px;
    font-weight: 700;
    color      : var(--violet);
    background-color: rgba(149, 27, 129, 0.08);
}

.jour-vide {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 12px;
    padding        : 30px 0;
    text-align     : center;
}

@media (max-width: 1100px) {
    .jour-chiffres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jour-chiffre:nth-child(3) {
        border-left: 0;
    }

    .jour-chiffre:nth-child(n + 3) {
        border-top: 1px solid var(--bordure);
    }

    .jour-details {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tableau de bord : réservations du jour */
.jour-resume {
    margin-bottom: 14px;
    font-size    : 14px;
    color        : var(--texte-doux);
}

.jour-resume strong {
    color: var(--texte);
}

.texte-vert  { font-weight: 600; color: var(--vert-fonce); }
.texte-rouge { font-weight: 600; color: var(--rouge); }

/* Tableau de bord : visites et réservations du jour côte à côte (pleine largeur si une seule carte) */
.grille-jour {
    display    : flex;
    gap        : 24px;
    align-items: stretch;
}

.grille-jour > .carte {
    flex     : 1 1 0;
    min-width: 0;
}

/* Les 4 chiffres restent sur une ligne, en plus compact */
.grille-jour > .carte:not(:only-child) .jour-chiffre {
    padding: 12px 14px;
}

.grille-jour > .carte:not(:only-child) .jour-chiffre strong {
    font-size: 24px;
}

.grille-jour > .carte:not(:only-child) .jour-chiffre span {
    font-size  : 13px;
    line-height: 1.35;
}

.grille-jour > .carte:not(:only-child) .jour-chiffre small {
    font-size: 11.5px;
}

.grille-jour > .carte:not(:only-child) .jour-details {
    grid-template-columns: minmax(0, 1fr);
    gap                  : 22px;
}

.grille-jour .tableau small.bloc i {
    margin-right: 3px;
    font-size   : 10px;
}

@media (max-width: 1200px) {
    .grille-jour {
        flex-direction: column;
        gap           : 0;
    }
}

/* Chiffres du jour : chiffre en haut, libellé juste en dessous, centrés et alignés d'une case à l'autre */
.jour-chiffre {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    text-align    : center;
}

.jour-chiffre strong {
    margin-bottom: 6px;
}

.jour-chiffre span {
    max-width: 120px;
}

.jour-chiffre small {
    margin-top: 6px;
}

/* Visites du jour : « Par salle » seul sous les chiffres, sur toute la largeur */
.jour-details {
    grid-template-columns: minmax(0, 1fr);
}

/* Visites / réservations du jour : mêmes colonnes que Dernières actualités / Derniers messages */
.grille-jour {
    display              : grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap                  : 0 24px;
}

.grille-jour > .carte:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .grille-jour {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tableau de bord : icône devant le titre des blocs (comme Visites du jour) */
.grille-accueil .carte-entete h2 i {
    margin-right: 6px;
    color       : var(--violet);
}

/* Barre latérale plus compacte : moins d'espace entre les rubriques et entre les sections */
.admin-menu-titre {
    padding: 16px 20px 4px;
}

.admin-menu-titre:first-child {
    padding-top: 6px;
}

.admin-menu-liens > li > a {
    margin-top: 1px;
    padding   : 8px 15px;
}

@media (min-width: 992px) {
    .menu-reduit .admin-menu-titre {
        padding: 8px 20px 0;
    }

    .menu-reduit .admin-menu-liens a {
        padding: 9px 0;
    }
}

/* Filtres sur une seule ligne (page Visites : salle, prestation, du, au) */
.filtres.filtres-ligne {
    display    : flex;
    flex-wrap  : nowrap;
    align-items: flex-end;
}

.filtres-ligne .champ {
    flex     : 1 1 180px;
    min-width: 0;
}

.filtres-ligne .champ-double {
    flex: 1.6 1 260px;
}

.filtres-ligne .champ:has(input[type="date"]) {
    flex: 0 0 170px;
}

@media (max-width: 1100px) {
    .filtres.filtres-ligne {
        flex-wrap: wrap;
    }
}

.tableau small.bloc i.fa-phone-alt {
    margin-right: 3px;
    font-size   : 10px;
}

/* Boutons d'action d'une ligne côte à côte */
.tableau td.actions {
    white-space: nowrap;
}

.tableau td.actions form.inline {
    display: inline-block;
}

.tableau td.actions > .bouton-icone,
.tableau td.actions > form.inline {
    vertical-align: middle;
}

/* Tableaux DataTables : toujours à la largeur du conteneur (pas de barre de défilement pour quelques pixels) */
.tableau-conteneur table.dataTable {
    width: 100% !important;
}

/* Emails et libellés longs : passage à la ligne autorisé pour que le tableau tienne sur les écrans étroits */
.tableau td small.bloc,
.tableau td strong {
    overflow-wrap: anywhere;
}

/* Profil : double authentification
--------------------------------------------------------------*/
#double-authentification {
    margin-top: 24px;
}

#double-authentification .carte-entete {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 12px;
}

.totp-options {
    margin-top: 18px;
}

.totp-option {
    padding         : 20px;
    border          : 1px solid var(--bordure);
    border-radius   : var(--rayon);
    background-color: #fafbfc;
}

.totp-option.actif {
    border-color    : var(--violet);
    background-color: #fbf5fa;
}

.totp-option h3 {
    margin   : 0 0 8px;
    font-size: 16px;
}

.totp-option h3 i {
    margin-right: 6px;
    color       : var(--violet);
}

.totp-option p {
    margin   : 0 0 14px;
    font-size: 14px;
    color    : var(--texte-doux);
}

.totp-configuration {
    margin-top: 18px;
}

.totp-etapes {
    margin      : 0 0 18px;
    padding-left: 20px;
    line-height : 1.7;
}

.totp-etapes li {
    margin-bottom: 16px;
}

.totp-qr {
    display         : block;
    width           : max-content;
    margin          : 12px 0;
    padding         : 12px;
    border          : 1px solid var(--bordure);
    border-radius   : 10px;
    background-color: var(--blanc);
}

.totp-qr img,
.totp-qr canvas {
    display: block;
}

.totp-cle {
    display         : inline-block;
    padding         : 4px 10px;
    border-radius   : 6px;
    font-size       : 15px;
    letter-spacing  : 1px;
    background-color: #f3e6f1;
    color           : var(--violet-fonce);
    word-break      : break-all;
}

.totp-confirmation {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : 10px;
    margin-top : 8px;
}

.totp-confirmation input.champ-code {
    max-width     : 220px;
    font-family   : 'Courier New', monospace;
    font-size     : 22px;
    font-weight   : 700;
    letter-spacing: 8px;
    text-align    : center;
}

.totp-desactivation {
    max-width  : 420px;
    margin-top : 20px;
    padding-top: 18px;
    border-top : 1px solid var(--bordure);
}

/* Historique des actions : champs modifiés (avant -> après)
--------------------------------------------------------------*/
.historique-modifications {
    margin    : 6px 0 0;
    padding   : 0;
    list-style: none;
    font-size : 13px;
}

.historique-modifications li {
    margin-top: 3px;
}

.historique-modifications del {
    color: var(--rouge);
}

.historique-modifications ins {
    text-decoration: none;
    font-weight    : 600;
    color          : var(--vert-fonce);
}

.historique-modifications i {
    margin   : 0 4px;
    font-size: 10px;
    color    : var(--texte-doux);
}

/* Espace membre : deux champs côte à côte (inscription, profil, réservation)
--------------------------------------------------------------*/
.grille-champs-membre {
    display              : grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap                  : 0 14px;
}

.aide-mdp {
    display  : block;
    margin   : -8px 0 14px;
}

.connexion-actions .aide {
    font-size: 13px;
}

@media (max-width: 480px) {
    .grille-champs-membre {
        grid-template-columns: minmax(0, 1fr);
    }
}

.facultatif {
    font-weight: 400;
    color      : var(--texte-doux);
}

/* Inscription en deux étapes
--------------------------------------------------------------*/
.etapes-inscription {
    display      : flex;
    gap          : 8px;
    margin       : -10px 0 22px;
    padding      : 0;
    list-style   : none;
    counter-reset: none;
}

.etapes-inscription li {
    display      : flex;
    flex         : 1;
    align-items  : center;
    gap          : 8px;
    padding-top  : 10px;
    border-top   : 3px solid var(--bordure);
    font-size    : 13px;
    font-weight  : 600;
    color        : #a0a6ad;
}

.etapes-inscription li span {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 24px;
    height          : 24px;
    border-radius   : 50%;
    font-size       : 12px;
    color           : var(--blanc);
    background-color: #c4c9cf;
}

.etapes-inscription li.actif {
    border-top-color: var(--violet);
    color           : var(--violet);
}

.etapes-inscription li.actif span {
    background-color: var(--violet);
}

.etapes-inscription li.fait {
    border-top-color: var(--vert);
    color           : var(--vert-fonce);
}

.etapes-inscription li.fait span {
    background-color: var(--vert);
}

.etape-inscription {
    min-width: 0;
    margin   : 0;
    padding  : 0;
    border   : 0;
}

.etape-inscription .bouton i {
    margin-left: 6px;
}

.boutons-etape {
    display: flex;
    gap    : 10px;
}

.boutons-etape .bouton {
    height       : 44px;
    margin-top   : 10px;
    border-radius: 999px;
}

.boutons-etape .bouton-secondaire {
    flex: 0 0 auto;
    padding: 0 20px;
}

.boutons-etape .bouton-secondaire i {
    margin: 0 6px 0 0;
}

.boutons-etape .bouton-principal {
    flex: 1;
}

.sr-only {
    position   : absolute;
    width      : 1px;
    height     : 1px;
    padding    : 0;
    margin     : -1px;
    overflow   : hidden;
    clip       : rect(0, 0, 0, 0);
    white-space: nowrap;
    border     : 0;
}

.connexion-droite .boutons-etape .bouton-secondaire {
    border          : 1px solid var(--bordure);
    color           : var(--texte);
    background-color: var(--blanc);
}

.connexion-droite .boutons-etape .bouton-secondaire:hover {
    border-color    : var(--violet);
    color           : var(--violet);
    background-color: var(--blanc);
}

/* Événements et formations
--------------------------------------------------------------*/
.evenement-vignette {
    display         : flex;
    flex            : 0 0 auto;
    align-items     : center;
    justify-content : center;
    width           : 56px;
    height          : 42px;
    border-radius   : 8px;
    font-size       : 18px;
    color           : var(--blanc);
    background-color: var(--violet);
}

.evenement-vignette.type-formation   { background-color: var(--vert); }
.evenement-vignette.type-competition { background-color: #e67e22; }
.evenement-vignette.type-conference  { background-color: #2980b9; }
.evenement-vignette.type-autre       { background-color: #7f8c8d; }

.ligne-passee td {
    opacity: 0.6;
}

.case-mise-en-avant {
    align-items     : flex-start;
    margin-bottom   : 16px;
    padding         : 12px 14px;
    border          : 1px solid #e7cfe2;
    border-radius   : 10px;
    background-color: #fbf5fa;
}

.case-mise-en-avant small {
    color: var(--texte-doux);
}

.avancement-envoi {
    margin-bottom   : 16px;
    padding         : 12px 14px;
    border-radius   : 10px;
    background-color: #f2faf5;
}

.avancement-envoi strong i {
    color: var(--vert);
}

.avancement-envoi .barre {
    height          : 8px;
    margin          : 8px 0 6px;
    overflow        : hidden;
    border-radius   : 999px;
    background-color: #dbeee2;
}

.avancement-envoi .barre span {
    display         : block;
    height          : 100%;
    background-color: var(--vert);
}

.avancement-envoi small {
    color: var(--texte-doux);
}

.apercu-affiche {
    display      : block;
    width        : 100%;
    margin-bottom: 12px;
    border-radius: 10px;
}

/* Saisie d'une visite : fiche d'identité du membre (photo) */
.fiche-membre {
    display         : flex;
    align-items     : center;
    gap             : 18px;
    margin-bottom   : 18px;
    padding         : 16px;
    border          : 1px solid var(--bordure);
    border-radius   : var(--rayon);
    background-color: #fafbfc;
}

.fiche-membre.scannee {
    border-color    : var(--vert);
    background-color: #f2faf5;
}

.fiche-membre.vide {
    opacity: 0.7;
}

.fiche-membre-photo img,
.fiche-membre-photo span {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 110px;
    height         : 110px;
    border-radius  : 14px;
    object-fit     : cover;
    border         : 3px solid var(--blanc);
    box-shadow     : 0 4px 14px rgba(0, 0, 0, 0.12);
}

.fiche-membre-photo span {
    font-size       : 42px;
    font-weight     : 700;
    color           : var(--blanc);
    background-color: var(--violet);
}

.fiche-membre-photo [hidden] {
    display: none;
}

.fiche-membre-infos {
    display       : flex;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 3px;
    min-width     : 0;
}

.fiche-membre-infos strong {
    font-size: 18px;
}

.fiche-membre-infos span,
.fiche-membre-infos small {
    font-size: 13px;
    color    : var(--texte-doux);
}

.fiche-membre-infos .badge {
    margin-bottom: 4px;
}

.fiche-membre-alerte,
.fiche-membre-verif {
    margin     : 6px 0 0;
    font-size  : 13px;
    font-weight: 600;
}

.fiche-membre-alerte {
    color: #b9650b;
}

.fiche-membre-verif {
    color: var(--vert-fonce);
}

.fiche-membre-alerte[hidden] {
    display: none;
}

.option-membre {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.option-membre img,
.option-membre > span {
    display        : flex;
    flex           : 0 0 32px;
    align-items    : center;
    justify-content: center;
    height         : 32px;
    border-radius  : 50%;
    object-fit     : cover;
    font-weight    : 700;
    color          : var(--blanc);
    background     : var(--violet);
}

/* Formulaire d'événement : aide sous l'université, avant le lieu */
.aide-universite {
    margin: -12px 0 16px;
}

/* Mobile : deux cartes compactes par ligne (petite icône à gauche, chiffre et libellé à droite) */
@media (max-width: 575px) {
    .stats,
    .stats.stats-auto,
    .stats.stats-accueil {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap                  : 10px;
        margin-bottom        : 16px;
    }

    .stats .stat,
    .stats-accueil .stat {
        gap      : 10px;
        min-width: 0;
        padding  : 12px;
    }

    .stat > div {
        min-width    : 0;
        overflow-wrap: anywhere;
    }

    .stat-icone {
        width        : 34px;
        height       : 34px;
        border-radius: 9px;
        font-size    : 14px;
    }

    .stat strong {
        font-size  : 19px;
        white-space: nowrap; /* une date (14/10/2026) ne se coupe pas */
    }

    .stat > div span {
        display    : block;
        font-size  : 12px;
        line-height: 1.3;
    }

    /* Bandeau d'accueil compact */
    .accueil-bandeau {
        gap          : 14px;
        margin-bottom: 14px;
        padding      : 16px 18px;
    }

    .accueil-bandeau h2 {
        font-size: 20px;
    }

    .accueil-bandeau p {
        font-size: 13px;
    }

    .accueil-actions {
        gap: 8px;
    }

    .accueil-actions .bouton {
        padding  : 7px 12px;
        font-size: 13px;
    }
}

/* Pages de connexion, inscription et mot de passe oublié sur mobile : pas de carte (illisible à cette taille),
   bandeau compact (logo, retour, accroche) sur fond violet, formulaire juste en dessous */
@media (max-width: 767px) {
    .connexion {
        background: linear-gradient(165deg, #6d1260 0%, #3a0a35 40%, #1d0b1a 100%);
    }

    .connexion-carte {
        display: none;
    }

    .connexion-gauche {
        flex      : 0 0 auto;
        min-height: 0;
        padding   : 6px 4px 8px;
    }

    .connexion-accroche {
        margin-top: 22px;
    }
}

@media (max-width: 420px) {
    .stat strong {
        font-size: 17px;
    }
}

/* Tableau de bord, mobile : version resserrée
   - bandeau : « Voir le site » masqué (déjà dans la barre du haut), deux boutons sur une ligne
   - chiffres clés : 3 par ligne, sans icône
   - visites du jour : 4 cases sur une ligne */
@media (max-width: 575px) {
    .accueil-bandeau {
        gap    : 10px;
        padding: 14px 16px;
    }

    .accueil-date {
        font-size: 12px;
    }

    .accueil-bandeau h2 {
        margin   : 2px 0 0;
        font-size: 18px;
    }

    .accueil-bandeau p {
        font-size: 12px;
    }

    .accueil-actions a[target="_blank"] {
        display: none;
    }

    .accueil-actions .bouton {
        padding  : 6px 10px;
        font-size: 12.5px;
    }

    .stats.stats-accueil {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap                  : 8px;
    }

    .stats.stats-accueil .stat {
        display: block;
        padding: 10px;
    }

    .stats.stats-accueil .stat-icone {
        display: none;
    }

    .stats.stats-accueil .stat strong {
        font-size: 18px;
    }

    .stats.stats-accueil .stat > div span {
        font-size: 11px;
    }

    .jour-chiffres {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom        : 14px;
    }

    .jour-chiffres .jour-chiffre {
        padding: 10px 6px;
        border : 0;
    }

    .jour-chiffres .jour-chiffre + .jour-chiffre {
        border-left: 1px solid var(--bordure);
    }

    .jour-chiffre strong {
        font-size: 20px;
    }

    .jour-chiffre span {
        font-size  : 11px;
        line-height: 1.3;
    }
}

/* Champ piège anti-robot (inscription) : hors de l'écran, pas display:none (que certains robots ignorent) */
.champ-piege {
    position: absolute;
    left    : -10000px;
    width   : 1px;
    height  : 1px;
    overflow: hidden;
}