/* cmsms stylesheet: 1-Design modified: vendredi 4 septembre 2026 13:58:17 */
html
{
    width: 100%;
    margin: 0;
    padding: 0;
}

body
{
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: arial;
    background-color: #f2f2ff;
    color: #1A1A1A;
    font-size: 15px;
}

img
{
    max-width: 100%;
    max-height: auto;
}

input[type="text"],input[type="email"],input[type="tel"],select,input[type="password"]
{
    width: 100%;
    max-width: 350px;
}

input[type="number"]
{
    width: 100px;
}

input[type="text"],input[type="email"],input[type="date"],input[type="number"],input[type="tel"],select,input[type="time"],input[type="password"]
{
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #bbb;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

table
{
    width: 100%;
}


input:focus, select:focus, textarea:focus
{
    outline: none;
    border-color: #f4e669;
    box-shadow: 0 0 0 3px rgba(243, 150, 26, 0.22);
}

textarea
{
    width: 100%;
    min-height: 250px;
    padding: 8px 12px;
    border: 1px solid #bbb;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

input[type='radio']:after, input[type='checkbox']:after
{
    width: 15px;
    height: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #cccccc;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #121111;
}

input[type='radio']:checked:after, input[type='checkbox']:checked:after 
{
    width: 15px;
    height: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #4d64a5;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #121111;
}

input[type='radio']:disabled:after
{
    background-color: #000000;
}

fieldset 
{
    border: 1px solid rgba(18,17,17,0.35);
    border-radius: 16px;
    padding: 0px 12px 0px;
    margin: auto;
    margin-bottom: 10px;
    box-sizing: border-box;
}

legend 
{
    padding: 0 10px;
    font-weight: bold;
    font-size: 1rem;
    text-align: left;
}

label
{
    font-weight: bold;
    min-width: 80px;
}

a
{
    color: #4d64a5;
    transition: 400ms;
    text-decoration: none;
    font-weight: bold;
}

a:hover
{
    transition: 400ms;
    color: #274564;
}


.strong
{
    font-weight: bold;
}

.ligne:nth-child(odd)
{
    background-color: rgb(216,227,242,1);
    transition: all 200ms ease-in;
}

.ligne:nth-child(odd):hover
{
    background-color: rgb(216,227,242,0.3);
    transition: all 200ms ease-out;
}

.ligne:nth-child(even)
{
    background-color: transparent;
    transition: all 200ms ease-in;
}

.ligne:nth-child(even):hover
{
    background-color: rgb(255,255,255,1);
    transition: all 200ms ease-out;
}

.back-vert
{
    background-color: #99cc99!important;
}

.back-orange
{
    background-color: #ff9933!important;
}

.back-rouge
{
    background-color: #ff9999!important;
}

.rouge
{
    color: red;
    font-weight: bold;
}

.orange
{
    color: orange;
    font-weight: bold;
}

.vert
{
    color: green;
    font-weight: bold;
}


.Disponible
{
    color: #0000ff;
    font-weight: bold;
}

.Indisponible
{
    color: #666666;
    font-weight: bold;
}

.center
{
    text-align: center;
}

.left
{
    text-align: left;
}


.logo
{
    text-align: center;
}

.flex
{
    display: flex;
    align-items: center;
    gap: 15px;
}

.grid-2
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 10px;
}

.grid-3
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 5px;
}

.grid-4
{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 5px;
}

.grid-5
{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));;
    align-items: center;
    gap: 1px;
}

.fleche
{
    font-size: 1.5rem;
}

.bouton
{
    display: inline-block;
    padding: 15px;
    margin: 5px;
    box-sizing: border-box;
    border-radius: 16px;
    background-color: #4d64a5;
    border: 1px solid #4d64a5;
    color: white;
    transition: 200ms ease-in;
    font-weight: bold;
    font-size: 1rem
}

.bouton:hover
{
    background-color: #274564;
    border: 1px solid #121111;
    color: white;
    transition: 200ms ease-in;
    text-decoration: none;
}

.bouton-icone
{
    display: inline-flex;
    max-width: 250px;
    padding: 7px;
    margin: 5px;
    box-sizing: border-box;
    border-radius: 16px;
    background-color: #4d64a5;
    border: 1px solid #4d64a5;
    color: white;
    font-weight: bold;
    font-size: 1.00rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bouton-icone:hover
{
    transition: 200ms ease-in;
    text-decoration: none;
    color: white;
    transform: translateY(-1px) scale(1.00);
    box-shadow: 0 12px 35px rgba(0,0,0,0.18);
}

@media screen and (max-width: 851px)
{
.bouton-icone
{
    font-size: 0.8rem;
}

}

.warning
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 900px;
    padding: 12px 16px;
    margin: 18px 0;
    background: #faf6d4;
    border: 1px solid #274564;
    border-left: 5px solid #4d64a5;
    border-radius: 16px;
    line-height: 1.4;
}

.informations
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 900px;
    padding: 12px 16px;
    margin: 18px 0;
    background: #e9f7ff;
    border: 1px solid #274564;
    border-left: 5px solid #4d64a5;
    border-radius: 16px;
    line-height: 1.4;
}

.cercle
{
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    border-radius: 50%
}

.Information.cercle
{
    background-color: green;
}

.Incident.cercle
{
    background-color: red;
}

.Maintenance.cercle
{
    background-color: orange;
}

#header
{
    width: 100%;
    margin-bottom: 15px;
    border-bottom: 3px solid #4d64a5;
}

#header .flex
{ 
    justify-content: space-between;
}

#header .logo
{
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: box-sizing;
}

@media screen and (max-width: 851px)
{
#header .titre h1
{
    font-size: 1rem
}

#header .logo
{
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

}

.contenu
{
    width: 99%;
    margin: auto;
    min-height: 600px;
}


#compte
{
    text-align: left;
}


/* Gestion des tickets */
#tickets .options .grid-2
{
    align-items: stretch;
}

#tickets .infos
{
    font-size: 1rem;
}

#tickets .infos li
{
    list-style-type: none;
}


/* Liste des demandes */ 
#tickets .liste .description
{
    max-width: 450px!important;
}

#tickets .liste .reponse
{
    background-color: rgba(244,230,105, 0.3);
}

#tickets .liste table
{
    border-collapse: collapse;
    text-align: center;
    font-size: 1.05rem;
}

/* Liste des demandes */ 


/* Fiche */

#tickets .fiche
{
    width: 95%;
    margin: auto;
}

#tickets .fiche .grid-2
{
    gap: 50px;
}

#tickets .fiche .demande, #tickets .fiche .intervention
{
    align-self: start;
}

#tickets .fiche .demande img
{
    max-height: 300px;
}

#tickets .fiche .demande img:hover
{
    max-height: 1000px;
}

#tickets .historique
{
    max-height: 500px;
    overflow: auto;
}
/* Fiche */

/* Evènements */
#news
{
    width: 80%;
    margin: auto;
}
/* Evènements */


@media screen and (max-width: 851px)
{
#tickets .options .grid-2
{
    display: block;
    
}

#tickets .infos
{
    font-size: 0.9rem;
}

/* Liste */
    .table-responsive,
    .table-responsive tbody,
    .table-responsive tr,
    .table-responsive td
    {
        display: block;
        width: 100%;
    }

    .table-responsive thead
    {
        display: none;
    }

    .table-responsive tr
    {
        margin-bottom: 15px;
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 16px;
        background: #fff;
    }

    .table-responsive td
    {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;

        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid #eee;
    }

    .table-responsive td:last-child
    {
        border-bottom: 0;
    }

    .table-responsive td::before
    {
        content: attr(data-label);
        font-weight: bold;
        flex-shrink: 0;
    }
/* Liste */

/* Fiche */
#tickets .fiche
{
    width: 99%;
}

#tickets .fiche .grid-2
{
    display: block;
    gap: 15px;
}

#tickets .fiche .tox-tinymce
{
    max-width: 345px;
}
/* Fiche */

/* Evènements */
#news
{
    width: 80%;
    margin: auto;
}
/* Evènements */
}

/* Gestion des tickets */


#suivi .liste table
{
    width: 100%;
}


#footer
{
    width: 100%;
    margin-top: 15px;
    border-top: 3px solid #4d64a5;
}

#footer .flex
{ 
    justify-content: space-between;
}

#footer .block
{
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: box-sizing;
}

@media screen and (max-width: 851px)
{
#footer .block
{
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: box-sizing;
    text-align: center;
}
}