@viewport {
    width: device-width; /* largeur du viewport */
    zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}

body {
    background-size: 100% 100%;
    color: white;
    /*background-color: #414140;*/
    height: 100%;
    overflow-x: hidden;    
}

.orange-span {
    font-weight: bold;
    color: #ff9800;
}

.zone-principale {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 14% 80% 6%;
    grid-template-areas:
        "zone_recherche"    
        "tagsphere"
        "zone_barre";
    height: 815px;
    width: 100%;
    margin: 0px auto;
    background-color: #414140;
    overflow: hidden;
}

.zone-principale-mobile{
  display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 10% 83% 6%;
    grid-template-areas:
        "zone_recherche"
        "tagsphere"
        "zone_barre";
    height: auto;
    max-height: 500px;
    min-height: 375px;
    width: 100%;
    margin: 0px auto;
    background-color: #414140;
    overflow: hidden;
}

.sidebar {
    position: absolute;
    right: 41%;
    width: 0;
    /*display: none;*/
    z-index: 2;
    overflow-x: hidden;
    transition: 0.5s;
}

/* ajouter un pseudo-élément ::before à votre élément cible lorsque celui-ci est visé par une ancre (:target) */
:target::before {
  content: "";
  display: block;
  height: 200px; /* hauteur du menu fixe + marge désirée */
  margin: -150px 0 0; /* inverse de la hauteur + marge désirée */
}

.resnotice{
  padding: 16px 16px;
}

a:hover.resnotice{
  color: #000!important;
  background-color: #ccc!important;
}

.tags-list{
  padding: 25px;
  margin-top: 20px;
  max-height: 375px;
  overflow: auto;
  color: white;
}

#button-expand:focus {
    outline: none;
    box-shadow: none;
}

/* Pour les écrans de 475px et moins */
@media (max-width: 575px) {
    .resnotice figure{
        margin-bottom: 30px;
    }
}