html {
}

body {
 font-family: adobe-garamond-pro;
 font-size: 120%;
 background-size: cover;
 /* background-attachment: scroll;  */
 background-attachment: fixed;
 background-position: center;
 border: 0px;
 margin: 0px;
 color: #333333;
 min-height: 800px;
}

h1 {
 font-size:130%;
}

h2 {
 font-size:120%;
}

h3 {
 font-size:110%;
}

#tools {
 text-align: right;
 margin-right: 10px;
 margin-top: 10px;
}

#tools img {
  width: 50px;
  cursor: pointer;
}

#icone-menu {
 width: 50px;
 cursor: pointer;
}

#entete {
 display: flex;
 justify-content: center;
 align-items: flex-end;
}

.logo {
 display: inline;
 text-align:right;
 padding-right: 10px;
}
.nom {
 display: inline;
 padding-bottom: 10px;
 padding-left: 10px;
 color: #fff;
 text-shadow: 1px 1px #333333;
}

.logoimg {
 width: 80px;
}


.big {
 font-size: 130%;
 font-weight: bold;
}
.medium {
 font-size: 110%;
}

#menumobile {
 text-align:right;
 font-size: 150%;
}

#menumobile-zone {
 display: none;
}

#menumobile-panel {
 background-color: rgba(255,255,255,0.85);
 padding: 10px;
 display: inline-block;
}

#menumobile-panel .menuitem {
 margin-bottom: 10px;
}

#menubar {
 display: none;
 position: sticky;
 top: 0;
 width: 100%;
}

#menu {
 display: flex;
 background-color: rgba(255,255,255,0.85);
 padding: 5px;
}

#sousmenu {
 display: flex;
 flex-wrap: wrap;
 background-color: rgba(200,200,200,0.85);
 padding: 5px;
}

#menu .menuitem {
 flex-grow: 1;
 text-align: center;
}

.sousmenuitem {
 padding-left: 20px;
}

.menulink {
 text-decoration: none;
 color: #666;
 outline: 0;
}

.selected 
,.menulink:hover {
 color: #000;
}

.radius {
 border-radius: 5px;
}

.radius-top {
 border-radius: 5px 5px 0px 0px;
}

.radius-bottom {
 border-radius: 0px 0px 5px 5px;
}

.contenu {
 margin-top: 20px;
 margin-bottom: 20px;
}

.compact {
 margin-top: 30px;
 margin-bottom: 30px;
}


.bgtexte {
 background-color: rgba(255,255,255,0.85);
}

.contenu img{
 max-width: 100%;
}

.mosaique {
 margin: -10px;
 display: flex;
 align-items: stretch;
 flex-wrap: wrap;
}

.tuile {
 width: 100%;
 box-sizing: border-box;
 display: flex;
 align-items: stretch;
}

.tuile-content  {
 width: 100%;
 background-color: rgba(255,255,255,0.85);
 margin: 10px;
 padding: 10px;
}

.tuile-content:hover {
 background-color: rgba(221,221,221,0.85); /* #dddddd; */
 cursor: pointer;
}

.visuel {
 height: 200px;
 background-size: cover;
 background-position: center center;
}

.tuile .titre {
 font-weight: bold;
 margin-top: 5px;
}

.tuile .date_event {
 font-weight: bold;
 margin-top: 5px;
}

.tuile .date_blog {
 color: #888888;
}

.contenu .titre {
 font-weight: bold;
 margin-bottom: 10px;
}

.contenu .date {
 font-weight: bold;
 margin-bottom: 10px;
}
.contenu .lieu {
 font-weight: bold;
 font-style: italic;
 margin-bottom: 10px;
}


@media screen and (min-width: 600px) {
 .tuile {
  width: 50%;
 }
 #menubar {
  display: block;
 } 

 #menumobile {
  display:none;
 }

#tools img {
 width: 30px;
 }
}

@media screen and (min-width: 1024px) {
 .tuile {
  width: 33.333%;
 }
}

@media screen and (min-height: 800px) {
 body {
 background-attachment: fixed;
}
}