/* Couleurs principales */
* {
--mainPlum: #63003C;
--mainDarkBlue: #313E48;
--mainLightGrey: #D6DBDF;
--mainDarkGrey: #7C8790;
--mainBlack: #373737;

/* Couleurs secondaires */
--secondaryMagenta: #C60B46;
--secondaryLightMagenta: #ED145B;
--secondaryOrange: #EE3524;
--secondaryLightOrange: #F37320;
--secondaryPurple: #7C2A90;
--secondaryLightPurple: #7D6AAF;
--secondaryYellow: #FEBC18;
--secondaryLightYellow: #D5DF3D;
--secondaryBlue: #004E7D;
--secondaryLightBlue: #0E87C9;
--secondaryDarkGreen: #00807A;
--secondaryGreen: #40B769;
--secondaryLightGreen: #8CC63E;

/* Couleurs tertiaires */
--tertiaryMagenta: #EC008C;
--tertiaryYellow: #FFF200;
--tertiaryPurple: #5C0F8B;
--tertiaryOrange: #F7932A;
--tertiaryCyan: #00AEEF;
--tertiaryLightGreen: #A0D294;
}



@font-face {
    font-family: "Open Sans Regular";
    src: url(/build/fonts/OpenSans-Regular.1b0809d5.ttf);
}


@font-face {
    font-family: "Open Sans SemiBold";
    src: url(/build/fonts/OpenSans-SemiBold.a16d8201.ttf);
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Open Sans Regular';
}

/* Bloc haut - (Partie gauche: logo,meteo,qrcode + Partie droite: image) */
#box-top {
    height: 70%;
    width: 100%;
}

/* Bloc haut - partie gauche */
#box-top-left {
    width: 20%;
    height: 100%;
}

/* Bloc haut - partie gauche - logo */
#box-top-left-logo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 35%;
}

#box-top-left-info {
    width: 100%;
    height: 65%;
}

#box-top-left-info-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10%;
    font-size: 1.2em;
    background-color: blue;
    color: white;
}

#box-top-left-info-content {
    height: 100%;
}

#box-top-left-info-content-qrcode {
    width: 100%;
}

#box-top-left-info-content-qrcode img {
    width: 50%;
}

/* Bloc haut - partie droite */
#box-right {
    width: 80%;
    background-color: #000;
}

/* Bloc bas */
#box-bottom {
    height: 30%;
}

/* Bloc bas - partie catégorie */
#box-category {
    display: flex;
    border: 1px solid lightgray;
    align-items: center;
    height: 17%;
    width: 100%;
    padding-top: 2px;
    padding-left: 10px;
}

#box-category-title {
    font-weight: 600;
}

#box-category-information-counter {
    color: #fff;
}

/* Dans les informations, habillage lorsqu'il n'y a pas d'image  */
.fake-img {
    width: 200px;
    height: 150px;
    border: 1px solid lightgray;
}

/* Dans le template information index */
.div-content {
    display: flex;
    align-items: center;
    min-height: 150px;
}

/* Affichage du contenu de l'information */
#box-information-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.champ {
    display: flex;
    justify-content: center;
    width: 100%;
}

.champ p {
    margin: 0;
}

#form-champ1, #form-champ2, #form-champ3, #form-champ4 {
    display: flex;
    align-items: center;
    height: 35px;
    width: 100%;
    border: 1px solid lightgray;
    border-radius: 5px;
}

.server-error {
    background-color: var(--mainDarkBlue);
    color: #fff;
    width: 50%;
    height: 20%;
    text-align: center;
    padding: 10px;
}
#icon-information {
    background-color: var(--secondaryLightBlue);
    padding: 3px;
}
#icon-information>a>i {
    color: white;
    text-decoration: none;
}

#icon-rubrique {
    background-color: var(--secondaryBlue);
    padding: 3px;
}

#icon-rubrique>a>i {
    color: white;
    text-decoration: none;
}

#icon-image {
    background-color: var(--secondaryMagenta);
    padding: 3px;
}

#icon-image>a>i {
    color: white;
    text-decoration: none;
}

#icon-tempo {
    background-color: var(--tertiaryLightGreen);
    padding: 3px;
}

#icon-tempo>a>i {
    color: white;
    text-decoration: none;
}

#icon-user {
    background-color: var(--mainDarkBlue);
    padding: 3px;
}

#icon-user>a>i {
    color: white;
    text-decoration: none;
}

#icon-role {
    background-color: var(--mainDarkGrey);
    padding: 3px;
}

#icon-role>a>i {
    color: white;
    text-decoration: none;
}

#icon-tv {
    background-color: var(--tertiaryCyan);
    padding: 3px;
}

#icon-tv>a>i {
    color: white;
    text-decoration: none;
}
/* Style par défaut (écran large) */
.wrapper {
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 3fr 2fr;
    gap: 0px;
    height: 100vh;
    box-sizing: border-box;
}

.logo {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background: #f0f0f0;
    text-align: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.image {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    background: #f0f0f0;
    text-align: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
    max-height: 860px;
    max-width: 2560px;
}

.info-image {
    width: 100%;
    height: 100%;
}

.contenu {
    grid-column: 1 / 4;
    background: #f0f0f0;
    text-align: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Style pour smartphones */
@media (max-width: 768px) {
    .wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
        "logo"
        "contenu";
    }

    .image {
        display: none;
    }
}

/*@import './adaptive/_less480';
@import './adaptive/_less1024';
@import './adaptive/_more1200';
@import './adaptive/_more3200';
*/