/* =========================================================
   INVENTAIRE CASERNE
   STYLE COMPLET
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;
}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #f3f4f6;

    color:
        #222;

}


button,
input,
textarea {
    font-family:
        inherit;
}


/* =========================================================
   PAGE
   ========================================================= */

.page {

    width: 100%;

    max-width: 900px;

    min-height: 100vh;

    margin: auto;

    padding:
        25px
        20px
        50px;

}


h1,
h2,
h3 {
    margin-top: 0;
}


h2 {
    margin-bottom: 20px;
}


h3 {
    margin-bottom: 12px;
}


/* =========================================================
   ACCUEIL
   ========================================================= */

.accueil-header {

    text-align: center;

    margin-bottom: 35px;

}


.accueil-header h1 {

    font-size: 30px;

    margin-bottom: 8px;

}


.accueil-header p {

    color:
        #6b7280;

    margin: 0;

}


/* =========================================================
   MENU PRINCIPAL
   ========================================================= */

.menu-principal {

    display: flex;

    flex-direction: column;

    gap: 15px;

}


.menu-button {

    width: 100%;

    min-height: 78px;

    border: none;

    border-radius: 14px;

    background:
        white;

    padding:
        15px
        20px;

    display: flex;

    align-items: center;

    gap: 18px;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, .08);

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}


.menu-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 16px
        rgba(0, 0, 0, .12);

}


.menu-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    border-radius: 12px;

    background:
        #f0f1f3;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

}


.menu-button > span:last-child {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.menu-button strong {

    font-size: 18px;

}


.menu-button small {

    color:
        #777;

    font-size: 13px;

}


/* =========================================================
   MENU ADMINISTRATION
   ========================================================= */

.menu-administration {

    display: flex;

    flex-direction: column;

    gap: 12px;

    width: 100%;

}


.menu-administration .menu-button {

    margin: 0;

}


/* =========================================================
   RETOUR
   ========================================================= */

.retour-button {

    border: none;

    background:
        transparent;

    padding:
        5px
        0;

    margin-bottom: 15px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

}


.retour-button:hover {

    text-decoration:
        underline;

}


/* =========================================================
   RECHERCHE
   ========================================================= */

.recherche {

    margin-bottom: 18px;

}


.recherche input {

    width: 100%;

    padding:
        13px
        15px;

    border:
        1px solid
        #d1d5db;

    border-radius: 10px;

    background:
        white;

    font-size: 16px;

    outline: none;

}


.recherche input:focus {

    border-color:
        #777;

}


/* =========================================================
   CATEGORIES
   ========================================================= */

.categorie-bloc {

    width: 100%;

    margin-bottom: 10px;

}


.categorie-titre {

    width: 100%;

    min-height: 57px;

    border: none;

    border-radius: 10px;

    background:
        white;

    padding:
        12px
        16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    text-align: left;

    font-size: 17px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .07);

}


.categorie-titre > span:first-child {

    display: flex;

    align-items: center;

    gap: 8px;

}


.categorie-titre small {

    background:
        #e5e7eb;

    color:
        #555;

    padding:
        3px
        8px;

    border-radius:
        20px;

    font-size: 12px;

}


.categorie-contenu {

    padding:
        10px
        0
        2px;

}


/* =========================================================
   CARTES INVENTAIRE
   PHOTO A DROITE
   ========================================================= */

.carte-materiel-horizontal {

    width: 100%;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        120px;

    align-items: center;

    column-gap: 18px;

    min-height: 130px;

}


.carte-materiel-horizontal
> .carte-texte {

    grid-column: 1;

    grid-row: 1;

    min-width: 0;

}


.carte-materiel-horizontal
> .carte-photo-droite {

    grid-column: 2;

    grid-row: 1;

}


.carte-texte {

    min-width: 0;

}


.carte-texte h3 {

    margin-bottom: 8px;

    font-size: 18px;

}


.carte-texte p {

    margin:
        6px
        0;

    color:
        #555;

    font-size: 14px;

}


.stock-ligne {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 9px;

}


.stock-ligne strong {

    font-size: 21px;

}


.categories-materiel {

    color:
        #777 !important;

    font-size:
        12px !important;

    margin-top:
        10px !important;

}


/* =========================================================
   PHOTO
   ========================================================= */

.carte-photo-droite {

    width: 120px;

    min-width: 120px;

    height: 120px;

    min-height: 120px;

    border-radius: 10px;

    overflow: hidden;

    background:
        #f0f1f2;

    display: flex;

    align-items: center;

    justify-content: center;

}


.photo-materiel {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.photo-vide {

    font-size: 38px;

}


/* =========================================================
   ALERTE STOCK
   ========================================================= */

.alerte-stock {

    display: inline-block;

    margin-top: 8px;

    padding:
        6px
        9px;

    border-radius: 8px;

    background:
        #fff3cd;

    color:
        #856404;

    font-size: 12px;

    font-weight: bold;

}


/* =========================================================
   MATERIEL GENERIQUE
   ========================================================= */

.materiel {

    width: 100%;

    background:
        white;

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 12px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .06);

}


.materiel h3 {

    margin-bottom: 8px;

}


.materiel p {

    margin:
        7px
        0;

    color:
        #555;

}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.formulaire {

    background:
        white;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 20px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .06);

}


.formulaire label {

    display: block;

    margin-bottom: 7px;

    font-weight: bold;

    text-align: left;

}


.formulaire input[type="text"],
.formulaire input[type="password"],
.formulaire input[type="number"],
.formulaire input[type="date"],
.formulaire input[type="file"],
.formulaire textarea {

    width: 100%;

    padding:
        12px;

    margin-bottom: 18px;

    border:
        1px solid
        #d1d5db;

    border-radius: 9px;

    background:
        white;

    font-size: 16px;

    outline: none;

}


.formulaire textarea {

    resize: vertical;

}


.formulaire input:focus,
.formulaire textarea:focus {

    border-color:
        #777;

}


/* =========================================================
   CATEGORIES DU FORMULAIRE
   ========================================================= */

.cases-categories {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    margin-bottom: 20px;

}


.case-categorie {

    width: 100%;

    min-height: 30px;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    padding:
        3px
        0;

    margin: 0;

    text-align: left;

    cursor: pointer;

    font-weight:
        normal !important;

}


.case-categorie
input[type="checkbox"] {

    width: 19px !important;

    height: 19px;

    min-width: 19px;

    margin:
        0 !important;

    padding:
        0 !important;

    cursor: pointer;

}


.case-categorie span {

    text-align: left;

    line-height: 1.3;

}


/* =========================================================
   PHOTO ADMIN
   ========================================================= */

.apercu-photo {

    display: block;

    width: 100%;

    max-height: 250px;

    object-fit: contain;

    border-radius: 10px;

    margin:
        5px
        0
        15px;

    background:
        #f0f1f2;

}


/* =========================================================
   BOUTON AJOUT
   ========================================================= */

.add-button {

    width: 100%;

    border: none;

    border-radius: 10px;

    padding:
        14px
        16px;

    background:
        #216e4a;

    color:
        white;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    margin-top: 5px;

}


.add-button:hover {

    opacity: .9;

}


/* =========================================================
   ACTIONS ADMIN
   ========================================================= */

.actions-materiel {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 15px;

}


.actions-materiel button {

    border: none;

    border-radius: 8px;

    padding:
        10px
        12px;

    background:
        #e5e7eb;

    font-weight: bold;

    cursor: pointer;

}


.actions-materiel button:hover {

    opacity: .85;

}


/* =========================================================
   QUANTITE RETOUR
   ========================================================= */

.quantite-controle {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 18px;

}


.quantite-controle button {

    width: 50px;

    height: 50px;

    border: none;

    border-radius: 50%;

    background:
        #e5e7eb;

    font-size: 29px;

    font-weight: bold;

    cursor: pointer;

}


.quantite-controle strong {

    min-width: 40px;

    text-align: center;

    font-size: 26px;

}


/* =========================================================
   RESUME
   ========================================================= */

.resume {

    width: 100%;

    background:
        white;

    border-radius: 12px;

    padding: 16px;

    margin:
        20px
        0;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .06);

}


.resume p {

    margin:
        8px
        0;

}


/* =========================================================
   HISTORIQUE TOTAL
   ========================================================= */

.historique-total {

    width: 100%;

    border: none;

    border-radius: 12px;

    background:
        white;

    padding:
        15px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 12px;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .06);

    transition:
        transform .12s ease,
        box-shadow .12s ease;

}


.historique-total:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, .09);

}


.historique-icone {

    width: 45px;

    height: 45px;

    min-width: 45px;

    border-radius: 10px;

    background:
        #f0f1f2;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}


.historique-nom {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.historique-nom small {

    color:
        #777;

}


.historique-chiffre {

    display: flex;

    flex-direction: column;

    align-items: center;

}


.historique-chiffre strong {

    font-size: 24px;

}


.historique-chiffre small {

    font-size: 9px;

    color:
        #777;

}


/* =========================================================
   STOCK MINIMUM EN ROUGE
   ========================================================= */

.historique-stock-faible {

    border:
        1px solid
        #f1b5b5;

}


.texte-stock-faible {

    color:
        #d00000 !important;

}


.texte-stock-faible strong,
.texte-stock-faible small {

    color:
        #d00000 !important;

}


.detail-stock-faible {

    border:
        1px solid
        #f1b5b5;

}


/* =========================================================
   INTERVENTIONS CLIQUABLES
   ========================================================= */

.titre-interventions {

    margin-top:
        30px;

}


.intervention-cliquable {

    appearance:
        none;

    -webkit-appearance:
        none;

    background:
        white;

    color:
        inherit;

    font:
        inherit;

    border:
        none;

    text-align:
        left;

}


.intervention-cliquable:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, .1);

}


.intervention-cliquable
> div:first-child {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.intervention-total {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 65px;

}


.intervention-total strong {

    font-size: 24px;

}


.intervention-total span {

    color:
        #777;

    font-size: 11px;

}


.intervention-cliquable small {

    color:
        #777;

    font-size: 11px;

}


.fleche-detail {

    font-size: 25px;

    color:
        #888;

}


/* =========================================================
   DETAIL
   ========================================================= */

.detail-header {

    background:
        white;

    border-radius: 12px;

    padding: 17px;

    margin-bottom: 15px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .06);

    display: flex;

    flex-direction: column;

    gap: 6px;

}


.detail-historique {

    width: 100%;

    background:
        white;

    border-radius: 11px;

    padding: 15px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .05);

}


.detail-historique
> div {

    display: flex;

    flex-direction: column;

    gap: 5px;

    flex: 1;

}


.detail-historique span {

    color:
        #777;

    font-size: 13px;

}


.detail-quantite {

    font-size: 25px;

}


/* =========================================================
   TELEPHONE / IPAD
   ========================================================= */

@media (
    max-width: 600px
) {

    .page {

        padding:
            18px
            12px
            40px;

    }


    .accueil-header h1 {

        font-size: 25px;

    }


    .menu-button {

        min-height: 72px;

        padding:
            12px
            14px;

    }


    .menu-icon {

        width: 42px;

        min-width: 42px;

        height: 42px;

        font-size: 23px;

    }


    .menu-button strong {

        font-size: 16px;

    }


    .menu-button small {

        font-size: 12px;

    }


    .carte-materiel-horizontal {

        grid-template-columns:
            minmax(0, 1fr)
            85px;

        column-gap:
            10px;

        min-height:
            100px;

    }


    .carte-materiel-horizontal
    > .carte-photo-droite {

        width:
            85px;

        min-width:
            85px;

        height:
            85px;

        min-height:
            85px;

    }


    .carte-texte h3 {

        font-size:
            16px;

    }


    .carte-texte p {

        font-size:
            12px;

    }


    .stock-ligne strong {

        font-size:
            18px;

    }


    .categories-materiel {

        font-size:
            11px !important;

    }


    .photo-vide {

        font-size:
            30px;

    }


    .actions-materiel {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

    }


    .actions-materiel
    button:last-child {

        grid-column:
            1 / -1;

    }


    .historique-chiffre strong {

        font-size:
            21px;

    }


    .quantite-controle {

        gap:
            13px;

    }


    .quantite-controle button {

        width:
            46px;

        height:
            46px;

    }


    .intervention-total {

        min-width:
            50px;

    }


    .intervention-total strong {

        font-size:
            20px;

    }

}


@media (
    max-width: 380px
) {

    .carte-materiel-horizontal {

        grid-template-columns:
            minmax(0, 1fr)
            72px;

    }


    .carte-materiel-horizontal
    > .carte-photo-droite {

        width:
            72px;

        min-width:
            72px;

        height:
            72px;

        min-height:
            72px;

    }


    .carte-texte h3 {

        font-size:
            15px;

    }


    .carte-texte p {

        font-size:
            11px;

    }

}