/* =========================================================================
   SOCLE VISUEL MERCURE
   Jetons et composants partagés par toutes les pages. À utiliser plutôt que
   de répéter des style="..." dans les vues.
   ========================================================================= */

:root {
    --mercure-navy: #2f3d71;
    --mercure-navy-dark: #26325d;
    --mercure-bg: #f4f7f6;
    --mercure-text: #333;
    --mercure-muted: #6c757d;

    --mercure-green: #20bf6b;
    --mercure-teal: #0fb9b1;
    --mercure-red: #eb3b5a;
    --mercure-orange: #fa8231;

    --mercure-radius: 20px;
    --mercure-radius-sm: 12px;
}

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

/* --- Boutons ---------------------------------------------------------- */

.btn-mercure {
    background-color: var(--mercure-navy);
    border-color: var(--mercure-navy);
    color: #fff;
}

.btn-mercure:hover,
.btn-mercure:focus {
    background-color: var(--mercure-navy-dark);
    border-color: var(--mercure-navy-dark);
    color: #fff;
}

/* --- Cartes ----------------------------------------------------------- */

.card-mercure {
    border: 0;
    border-radius: var(--mercure-radius);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

/* Carte "chiffre clé" en dégradé (soldes) */
.stat-hero {
    border: 0;
    border-radius: var(--mercure-radius);
    color: #fff;
    overflow: hidden;
}

.stat-hero .stat-label {
    font-size: .75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .75;
}

.stat-hero .stat-value {
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    line-height: 1.1;
}

/* Tuile secondaire posée sur un dégradé */
.stat-tile {
    background-color: rgba(255, 255, 255, .12);
    border-radius: var(--mercure-radius-sm);
    padding: .5rem .75rem;
}

.stat-tile small {
    display: block;
    font-size: .75rem;
    opacity: .8;
    line-height: 1.2;
}

.stat-tile .stat-tile-value {
    font-weight: 700;
    font-size: 1.05rem;
}

/* --- En-tête de page -------------------------------------------------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    color: var(--mercure-navy);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.3px;
    margin: 0;
}

.page-header .page-subtitle {
    color: var(--mercure-muted);
    font-size: .875rem;
    margin: .15rem 0 0;
}

/* --- Titres de section dans les cartes -------------------------------- */

.section-title {
    color: var(--mercure-navy);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

/* --- Formulaires centrés (même traitement que la page de connexion) ---- */

.form-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* --- Montants --------------------------------------------------------- */

.montant-positif {
    color: var(--mercure-green);
}

.montant-negatif {
    color: var(--mercure-red);
}

.amount-cell {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* --- État vide -------------------------------------------------------- */

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--mercure-muted);
}

.empty-state i {
    font-size: 2.5rem;
    opacity: .35;
    display: block;
    margin-bottom: .75rem;
}


#menu_right li{
    margin-right: 5px;
}

h2, h3{
    text-align: center;
    /* color: white; */
    margin: 20px;
}

#innoveduc{
    width: 350px;
    margin: 20px auto;
    padding: 3px;
    border-radius: 8px;
    font-family: monospace;
    background-color:darkslategray
}

/* Boutons modifier / supprimer */
.modsup {
    margin-right: 10px;
}

/* Ancien gabarit des vues "demandes" (legacy). Les tables en sont sorties :
   width:90% + text-align:center centrait tout le contenu des tableaux. */
.form {
    width: 90%;
    margin:auto;
    text-align: center;
    vertical-align: baseline;
}

.bouton, #tableorder{
    margin-bottom: 80px;
}

/* Gestion boutons modifier / supprimer */
.bouton{
    width: 90%;
    margin: auto;
    margin-top: 10px;
}

.validbutton{
    text-align: left;
}

/* Formulaire de connexion */
#connect {
    text-align: center;
    margin: auto;
    width: 20%;
    color: white;
    margin-top: 20px;
    background-color: #198754;
    border-radius: 5px;
}

/* Message d'alerte : largeur laissée au conteneur Bootstrap.
   Un width fixe en % réduisait l'alerte à ~105px de large sur mobile. */
.alert{
    margin-top: 10px;
    margin-bottom: 1rem;
}



/* Espacement des 2 tables */
.separator{
    margin: 40px;
}


.bottom{
    margin-top: 40px;
    height: 40px;
}


/* FORMULAIRE */

body {
    background-color: #f4f7f6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.btn {
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
}

.btn-warning {
    background-color: #ff9f43;
    border-color: #ff9f43;
    color: white;
}

.btn-warning:hover {
    background-color: #ee5253;
    border-color: #ee5253;
    color: white;
}

.navbar-brand {
    font-size: 1.4rem;
    letter-spacing: -0.5px;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #2f3d71;
}

.badge {
    padding: 0.5em 0.8em;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.container {
    animation: fadeIn 0.5s ease-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

.servdev{
    height: 60px;
}

/* image departement val d'oise */
.vdoise img{
    margin: auto;
    margin-left: 15px;
}

/* div service dev */
.servdev {
    display: flex;
    background-color:#325981;
    color: #fff !important;
    align-items: center;
    justify-content: center;
}

/* div principal formulaire */
.adddemande{
    width: 90%;
    margin: auto;

}

/* cadre "identification" */
.adddemande .identif{
    display: flex;
}

/* image "identification" */
.identif .imgidentif{
    width: 40%;
    margin: auto;
    margin-left: 10%;
}

/* champs "identification" */
.identif .identification{
    width: 100%;
    margin: auto 5%;
    /* margin-left: 30%; */
}

.identification .mb3>label{
    text-align: left;
}

/* champs formulaire et cadre "objet" */
.bg-white>.mb-3, .bg-white .local{
    width: 90%;
    margin: auto;
}


/* cadres "identification" et "objet" */
.bg-white{
    padding-bottom: 15px;
    margin: 20px;
    border-radius: 0.50rem;
}

/* titres cadres */
h5{
    border-radius: 0.25rem;
}


.adddemande form{
    width: auto;
    margin: auto 5%;
}

.adddemande form label{
    font-weight: bold;
}

/* champs usagers */
.usager{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0px 10px;
}

/* champs "objet" */
.local{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.usagesalle{
    margin-top: 100px;
    display: grid;
    grid-template-columns: 20% 80%;
    
}


#webtv .listmat{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 90%;
    margin: auto;
    border-radius:5px;
}

h6, .listmat{
    width: 90%;
    margin: auto;
    border-radius:5px;
}

.complement{
    width: 90%;
    margin: auto;
}

#infra, #usager, #desc, #decouverte, #webtv, #pro, #conception, #webradio{
    display: none;
}

/* ******************************ACCUEIL*********************** */

.cadreaccueil{
    display: grid;
    width: 80%;
    margin: 60px auto;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

.cadreaccueil .link .btn{
    width: 350px;
    margin: 20px;
    font-size: 18px;
}


/* *********************DETAIL DEMANDE************************ */

.detDem{
    width: 50%;
    margin: auto;
}

/* ******************************************************** */

@media screen and (max-width:960px){
    .identif, .usagesalle, .local, .listmat, .usager, .cadreaccueil {
        display: flex;
        flex-direction: column;
        margin: auto;
    }

    .adddemande{
        width: 100%;
        margin: auto;
    }

    .identif {
        width: 70%;
    }

    .cadreaccueil{
        width: auto;
    }

    .cadreaccueil .link .btn{
        margin: 10px auto;
    }

}