/**
    * Page de style pour tout le site
    *
    * php version 8.2
    *
    * @name : config/style.css
    * @author  : Héritier Samuel <tchoum@tchoum.ch>
    * @version : SVN:1
    * @standard : PSR2
    */

/* on définit les balise par défaut en premier */

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

a:link, a:visited {
    color: black;
}

main {
    padding: 2rem;
    flex-grow: 1;
    background-color: #F8FAFC;  
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #F8FAFC;
    color: #333;
}

footer {
    background: #B3C7D6;
    color: #1A3C5A;
    text-align: center;
    width: calc(100% - 30px);
    padding: 1rem;
    margin: auto;
    border-radius: 10px;
}   

header {
    background: linear-gradient(90deg, #E0F1FF, #4B9CD3);
    color: #1A3C5A;
    padding: 1rem 0;
}

header .header_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: fit-content  ;
    margin: 0 auto;
    padding: 0 1rem;
}

.header_content h1{
    padding-right: 20px;
}

hr {
    margin: 10px;
}

img {
    border: 0px;
}

input[type=button], input[type=submit] {
    padding: 3px 5px;
}

#nav_menu {
    display: flex;
    list-style: none;
}   

#nav_menu li {
    text-align: center; 
    padding: 0.7rem;
    cursor: pointer;
}       

#nav_menu a { 
    color: #1A3C5A;
    text-decoration: none;  
    display: block;     
    transition: color 0.3s ease;
}

#nav_menu a:hover {
    color: #000; 
}

/* On définit les ids */

#ballon {
    display: block;
    position: absolute;
    width: 130px;
}

#ballon_text{
    display: block;
    position: relative;
    top: 9ch;
    width: 125px;
}

#ballon_chauf{
    display: block;
    position: relative;
    top: 25px;
    left: 110px;
    width: 40px;
}

#ballon_energie {
    display: block;
    position: relative;
    top: 200px;
    white-space: nowrap;
    text-align: left;
}
#box_contenu {
    background: #e0f1ffd0;
    color: #333;
    width: 620px;
    text-align: left;
    padding: 20px;
    padding-top: 10px;
    margin-left: 25px;
    margin-top: 20px;
    border: 1px solid #4B9CD3;
    border-radius: 8px;
    box-shadow: #4b9cd36e 10px 7px 3px;
}

#box_contenu ul {
    margin: 15px 5px 15px 40px;
}

#box_contenu li {
    margin-top: 5px;
}

#box_contenu_petit {
    background: #e0f1ffd0;
    color: #333;
    width: 200px;
    text-align: left;
    padding: 20px;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border: 1px solid #4B9CD3;
    border-left: 1px dashed #4B9CD3;
    border-radius: 8px;
    box-shadow: #4b9cd36e 10px 7px 3px;
}

#contenu {
    padding: 2rem;
    background-color: #E0F1FF;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#contenu h2 {
    font-size: 1.5rem;
}

#contenu p {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: #333;
}

#completer_question{
    padding: 10px;
}

#fond_opaque {
    top: 0px;
    left: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #000000;
    opacity: 0.5;
    text-align: center;
    z-index: 100;
}

#formulaire_support, #datalog, #event, #logging, #Liste_esp, #status_esp, #session_expirer, #liste_utilisateurs {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;     
}

#datalog div, #logging div, #event div {
    text-align: left;
}

#datalog button {
    padding: 3px 30px;
    margin: 5px;
    margin-left: 100px;
}

#modifier_profil {
    display: grid;
    grid-template-columns: max-content auto 200px;
    width: fit-content;
    margin: auto;
    background: #E0F1FF;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
}

#formulaire_support > div:not(:nth-of-type(6n+11)),
#Liste_esp > div:not(:nth-of-type(5n+9)),
#liste_utilisateurs > div:not(:nth-of-type(5n+9)) {
    padding: 0.8rem;
    border: 1px solid #4B9CD3;
}

#modifier_profil > div:not(.line) {
    padding: 0.8rem;
}



#logging > div,
#datalog > div,
#event > div {
    padding: 0.5rem;
    border: 1px solid #4B9CD3;
}

#formulaire_support {
    display: grid;
    grid-template-columns: max-content auto max-content 150px max-content;
    width: calc(100% - 55px);
}

#datalog, #event {
    display: grid;
    grid-template-columns: max-content auto;
    padding: 5px 10px;
}

#datalog > div:nth-of-type(2n+3),
#event > div:nth-of-type(2n+3),
#logging > div:nth-of-type(3n+4)  {
    text-wrap: nowrap;
}

#logging {
    display: grid;
    grid-template-columns: max-content minmax(250px, auto) max-content;             
    padding: 5px 10px;
}

#Liste_esp {
    display: grid;
    grid-template-columns: 40px auto auto auto;
    min-width: calc(100% - 55px);
    padding: 5px 10px;
}

#liste_utilisateurs {
    display: grid;
    grid-template-columns: auto auto auto auto;
    min-width: calc(100% - 55px);
    padding: 10px;
}

#formulaire_support > :nth-child(-n+5),
#logging > :nth-child(-n+3),
#datalog > :nth-child(-n+2),
#event > :nth-child(-n+2),
#Liste_esp  > :nth-child(-n+5),
#liste_utilisateurs > :nth-child(-n+4) {
    background-color: #E0F1FF;
    color: #1A3C5A;
    font-weight: bold;
}

#status_esp {
    display: grid;
    grid-template-columns: 180px auto;
    min-height: 250px;
    text-align: center;
}

#info {
    background: #e0f1ffd0;      
    transition: transform 2s;
    -moz-transition: transform 2s; /* Firefox 4 */
    -webkit-transition: transform 2s; /* safari et chrome */
    -o-transition: transform 2s; /* Opera */
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
    padding: 10px 50px;
    text-align: center;
    cursor: pointer;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: rgba(0,0,0,0.2) 0px 4px 8px;
    border: 1px solid #4B9CD3;
    font-size: 16px;
    font-weight: bold;
    color: #1A3C5A;
    z-index: 130;
}

#legende {
    width: 100%;
    text-align: left;
}

#select_liste_esp {
    display: block;
    margin: auto;
    padding: 5px;
}

#logon-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Assombrit l'arrière-plan */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#logon {    
    background: #e0f1ffd0;
    padding: 20px 30px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 300px;
    text-align: center;
}

#logon h2 {
    margin-bottom: 20px;
    color: #333;
}

#logon label {
    display: block;
    font-weight: bold;
    margin: 10px 0 5px;
    color: #333;
}

#logon input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #B3C7D6;
    border-radius: 5px;
    font-size: 14px;
}

#logon input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}

#logon button {
    width: 100%;
    padding: 10px;
    background-color: #A8D5BA;
    color: #333;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#logon button:hover {
    background-color: #79cf9b;
}

#logon .close-popup {
    background-color: #e74c3c;
}

#logon .close-popup:hover {
    background-color: #c0392b;
}

#menu_user {
    background: #4B9CD3;
    color: #333;
    border-radius: 0 0 15px 15px;
    height: 0px;
    position: fixed;
    top: 112px;
    right: 0px;
    overflow: hidden;
    transition: height 0.5s ease;
}

#menu_user_titre {
    width: min-content;
}

#modifier_profil div input{
    margin: 3px;
    padding: 3px;
}

#nouveau_id_unite {
    width: max-content;
    height: 130px;
    overflow: auto;
    margin: 0px auto 10px auto;
    padding: 5px;
    text-align: left;
}

#password_view {
    position: relative;
    right: 35px;
    top: 7px;
}

#bouton_new_user {
    background-image: url("../images/ajouter.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 24px;

}

#operation_box input[type='checkbox'] {
    min-width: unset;
    margin: 3px;
}

#new_ticket {
    margin-left: 10px;
    color: red;
}


#operation_box, #message {
    background: #e0f1ffd0;        
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    display: none;
    width: max-content;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 110;
}

#message {
    display: block;
    transform: translate(-50%, -50%);
}

#operation_box h2,#message h2 {
    margin-bottom: 15px;
    color: #4B9CD3;
}

#operation_box h3 {
    font-size: 16px;
    color: #1A3C5A; /*#404040, A0A0A0*/
}

#operation_box button, #message button, .ligne_deroulante button, #modifier_profil button {
    padding: 10px 20px;
    background-color: #A8D5BA;
    color: #333;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#section_graph_header button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 14px;
    background-color: #A8D5BA;
    color: #333;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}   

#operation_box button:hover, #message button:hover, #modifier_profil button:hover, 
#section_graph_header button:hover {
    background-color: #79cf9b;
}

#section_graph_header img{
    position: absolute;
    width: 24px;
    transform: translate(-13px, -5px);
}

#section_graph_header fieldset {
    display: inline;
    padding: 0px 5px;
    margin: 5px;
    border-radius: 10px;
}

#operation_box .close-popup {
    background-color: #e74c3c;
}

#operation_box .close-popup:hover {
    background-color: #c0392b;
}

#submit {
    text-align: center;
    padding-top: 15px;
}

#status_ballon {
    min-height: 300px;
}

#section_graph_header select,
#section_graph_header input[type=datetime-local],
#section_graph_header input[type=date] {
    padding: 8px;
    margin: 5px;
    border: 1px solid #000000;
}

#titre_box {
    background: #096A09;
    background: -webkit-radial-gradient(30% 50%, closest-side, #00FF00, #096A09);
    background: -moz-radial-gradient(30% 50%, closest-side, #00FF00, #096A09);
    background: -ms-radial-gradient(30% 50%, closest-side, #00FF00, #096A09);
    border-bottom: 1px dashed black;
    height: 20px;
    padding: 10px;
    padding-left: 50px;
    font-family: 'centaur';
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
    color: #000000;
}

/* On définit ici les classes */

.align_center {
    align-content: center;
}

.arrow_asc {
    /*background-image: url(../images/arrow_down.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position-y: center;
    background-position-x: calc(100% - 5%);*/
    position: absolute;
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #096A09;
    border-right-color: #096A09;
    border-radius: 0 0 4px 0;
    transform: translate(50%, -20%) rotate(45deg);
/*     background: linear-gradient(to top right, transparent 50%, rgba(50,255,128,0.3) 50%, #1b4f08 100%) no-repeat 0 0/50% 100%, */
/*     linear-gradient(to top left, transparent 50%, rgba(50,255,128,0.3) 50%, rgba(27,79,8,1) 100%) no-repeat 100% 0/50% 100%; */
}

.arrow_desc {
    /*background-image: url(../images/arrow_up.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position-y: center;
    background-position-x: calc(100% - 5%);*/
    position: absolute;
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #096A09;
    border-left-color: #096A09;
    border-radius: 0 0 4px 0;
    transform: translate(50%, 20%) rotate(45deg);
/*     background: linear-gradient(to bottom right, transparent 50%, rgba(50,255,128,0.3) 50%, #1b4f08 100%) no-repeat 0 0/50% 100%, */
/*     linear-gradient(to bottom left, transparent 50%, rgba(50,255,128,0.3) 50%, rgba(27,79,8,1) 100%) no-repeat 100% 0/50% 100%; */
}

.btn {
    display: inline-block;
    background: #A8D5BA;
    color: #333;
    padding: 0.8rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
}

.btn:hover {
    background: #79cf9b;
}

.button_selected {
    background: #4B9CD3 !important;
}

.champs_pas_valide {
    border: 1px solid red;
}

.complement {
    max-width: 520px;
}

.consommation_barre {
    width: 100%;
    border: 1px solid #4B9CD3;
    border-radius: 10px;
    padding: 5px;
}

.detail_reponse {
    display: grid;
    grid-template-columns: auto auto auto max-content;
    grid-gap: 10px;
    padding: 8px;
    line-height: 27px;
}

.detail_reponse img {
    display: block;
    width: 48px;
    margin: 5px 0px;
}

.detail_reponse div {
    text-align: left;
    line-height: 2.2;
}

.detail_reponse input[type=number]{
    width: 70px;
    margin: 3px;
    padding: 3px;
}

.detail_reponse input[type=text]{
    width: 100px;
    margin: 3px;
    padding: 3px;
}

.detail_reponse select {
    margin: 3px;
    padding: 3px;
}

.grid_action {
    grid-column: 4;
    grid-row: 1 / span 2;
}

.grid_contact {
    grid-column: 1;
    grid-row: 1 / span 1;
}

.grid_compteur {
    grid-column: 2;
    grid-row: 1 / span 1;
}

.grid_tarif {
    grid-column: 3;
    grid-row: 1 / span 1;
}

.droite {
    text-align: right;
}

.hidden {
    display: none;
}

.hero {
    color: rgb(34, 33, 33);
    text-align: center;             
    padding: 3rem 1rem;
    margin-bottom: 2rem;
    border-radius: 10px;
}


.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255,255,255,0.65);
    border-radius: 10px;
}

#hero_accueil {
    background: url('../images/solar-panels-accueil.jpg') no-repeat top center/cover;
}

#hero_contact {
    background: url('../images/solar-panels2.jpg') no-repeat center center/cover;
}

#hero_produits {
    background: url('../images/solar-panels2.jpg') no-repeat center center/cover;
}


.icone{
    width: 48px;
    padding: 5px
}

.icone_petit{
    width: 24px;
}

.important {
    color: red !important;
    text-align: center;
    font-weight: bold;
}

.info_bulle {
    background: #e0f1ffd0;
    display: none;
    position: absolute;
    /*width: 250px;*/
    border: 1px solid #4B9CD3;
    padding: 0px 10px;
    border-radius: 6px;
    box-shadow: #333 10px 7px 3px;
}

.info_groupe {
    display: inline-block;
    white-space: nowrap;
}

.ligne_deroulante, .ligne_deroulante_utilisateur, .ligne_deroulante_esp{
    transition: height 1s, margin 1s, box-shadow 1s;
    -moz-transition: height 1s, margin 1s box-shadow 1s; /* Firefox 4 */
    -webkit-transition: height 1s, margin 1s box-shadow 1s; /* safari et chrome */
    -o-transition: height 1s, margin 1s box-shadow 1s; /* Opera */
    display: block;
    text-align: center;
    height: 0px;
    font-size: 14px;
    overflow: hidden;   
    grid-column: 1 / -1;
    margin: 0 2px;
    box-shadow: 0 0 0 0 #B3C7D6;
}

.ligne_deroulante, .ligne_deroulante_utilisateur, .ligne_deroulante_esp{
    padding: 0 0 0 8px;
    border-radius: 0 0 20px 20px;
    min-width: min-content;

}

.ligne_impair {
    background-color: #E0F1FF;
}

.line {
    grid-column: 1 / -1;
    border-top: 1px dashed #4B9CD3;
    padding: 5px;
    width: 100%;
}

.full_row {
    grid-column: 1 / -1;
}

.liste_text {
    /*display: flex;
    flex-wrap: wrap-reverse;*/
    align-content: center;
}

.liste_energie {
    display: inline-block;
    white-space: nowrap;
}

.menu_line{
    width: 35px;
    height: 7px;
    margin: 3px auto;
    border-radius: 6px;
    background-color: grey;
}

.menu_popup {
    display: none;  
    transform: translate(71px, -34px);
}

.menu_popup ul{
    z-index: 2;
    min-width: 230px;
    border-radius: 5px;
    background-color: #4B9CD3;
    box-shadow: rgba(150,150,150,0.5) 4px 4px 2px;
    padding: 2px;
    border: 1px solid #000000;
    list-style-type: none;
    position: absolute;
    right: 70px;
}

.menu_popup ul span {
    text-decoration: underline;
    line-height: 1.5;
}

.menu_popup a {
    color: #FFFFFF !important; /* #000000 */
}

.menu_popup li:hover {
    font-style: italic;
    padding-left: 8px;
}

.menu_popup li {
    line-height: 1.5;
    padding: 4px 4px;
    margin: 0px;
    cursor: pointer;
    text-align: left;
}

.online{
    width: 10px;
    height: 10px;
    margin: 3px auto;
    background-color: green;
    border-radius: 5px;

}

.offline{
    width: 10px;
    height: 10px;
    margin: 3px auto;
    background-color: darkred;
    border-radius: 5px;
}

.status_info {
    display: none;
    position: absolute;
    background: #e0f1ffd0;
    border: 1px solid #4B9CD3;
    padding: 4px 10px;
    border-radius: 10px;
    transform: translate(-35px, 20px);
}

.requetes_en_cours {
    z-index: 1;
    background-image: url(../images/time-left.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    animation-name: rotation_time;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    height: 24px;
}
@keyframes rotation_time {
    0% {rotate: 0deg;}
    100% {rotate: 360deg;}
}

.pointer {
    cursor: pointer;
}

.red {
    color: red;
}

.blue {
    color: #2196f3;
}

.orange {
    color: darkorange;
}

.green {
    color: green;
}

.show_max_1024{
    display: none;
}

.status_online_titre{
    display: inline-flex;
}

.valide {
    color: #00F000;
    text-align: center;
    font-weight: bold;
}



/* Responsiveness */
@media (max-width: 1122px) {
    #select_liste_esp {
        max-width: 210px;
    }    
}

@media (max-width: 1100px) {
    #Liste_esp {
        grid-template-columns: 40px auto auto auto;
    }

    .optionnel_1024 {
        display: none;
    }

    .show_1024 {
        display: block;
    }
}

@media (max-width: 805px) {

    #menu_mobile {
        background: url('../images/menus.png') no-repeat center center/cover;
        width: 32px;
        height: 32px;
        position: absolute;
        right: 80px;
    }

    nav {
        position: absolute;
        top: 112px;
        right: 0px;
        background: #4B9CD3;
        height: 0px;
        overflow: hidden;
        transition: height 0.5s ease;
        border-radius: 0 0 15px 15px;
        z-index: 99;
    }
    
    #Liste_esp {
        grid-template-columns: 40px auto auto;
    }

    #liste_utilisateurs {
        grid-template-columns: auto auto auto;
    }

    #modifier_profil {
        grid-template-columns: max-content auto;
    }

    #modifier_profil > div:not(.line) {
        padding: 0.4rem;
    }

    #status_esp {
        grid-template-columns: auto;
        justify-items: center;
        gap: 10px;
    }

    #status_ballon {
        min-height: 220px;
        width: 340px;
    }

    #ballon_energie {
        position: unset;
        white-space: nowrap;
        text-align: right;
    }

    .menu_popup ul{
        right: 40px;
    }

    .optionnel_805 {
        display: none;
    }

    #nav_menu {
        flex-direction: column;
        align-items: center;
        width: 100%;
        border-top: 1px dashed black;
    }

    #nav_menu li {
        display: flex;
        align-self: flex-start;
    }

    #nav_menu li img {
        height: 24px;
        margin-right: 4px;
    }

    #menu_user {
        position: unset;
        height: fit-content;
    }

    main, #contenu {
        padding: 1rem;
    }

    #logging {
        padding: 0.5rem;
    }

    #datalog div, #logging div, #event div {
        padding: 0.2rem;
        font-size: 0.8rem;
    }

    #contenu h2 {
        font-size: 1.3rem;
    }

    .hero h2 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .offline, .online {
        margin: auto;
    }
}

@media (max-width: 550px) {
    #menu_mobile {
        background: url('../images/menus.png') no-repeat center center/cover;
        width: 32px;
        height: 32px;
        position: absolute;
        right: 40px;
    }

    .detail_reponse {
        grid-template-columns: auto auto;
    }

    .detail_reponse div {
        padding: 5px;
    }

    .detail_reponse img {
        display: inline;
    }

    .grid_action {
        grid-column: unset;
        grid-row: unset;
    }
}