/* CSS Document */
html, body {width: 98vw; height: 98%; }
body {
	background: url("../img/herb.jpg") no-repeat #346702;
	background-size: cover;
	background-attachment: fixed;
	top: 1px;
	font-family: 'Trebuchet MS', Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;	
}
body p  {
	font-size: 0.9em;
	color: white;
	line-height:1.3em;
	padding: 0 6%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
  font-family: 'Trebuchet MS', Segoe, 'Segoe UI', 'DejaVu Sans', Verdana, 'sans-serif';
  font-size: 0.85em;
  line-height: 1.5em;
}
li {text-align: left; font-size: 1.1em;}

.mid {text-align: center; margin: auto;}
.mid img {margin: auto; padding: auto;}

.lefty{text-align: left; margin: auto;}
.droty{text-align: right; margin: 0.25rem 10.7rem 0 0;}


a:link {
	color: #556b44;
	text-decoration: none;
	padding: 1px 3px;
}
a:visited {
	color: #999966;
	text-decoration: none;
	padding: 1px 3px;
}
li a:hover, p.clik a:hover, span.clik a:hover {
	color: #6500CC; 
	text-decoration: none; 
	padding: 1px 3px; 
	background-color: #ECB200;

}

li a:active {
	color: #FF0066;
	text-decoration: none;
	background: #ECB200;
	padding: 1px 3px;
}
.M1 a:hover, .M2 a:hover, .M3 a:hover, .M4 a:hover, .M5  a:hover {color: #6500CC; text-decoration: none; padding: 1px 5px; background-color: #ECB200;}

#bg {
	background-color : #1b1b1b;
	width:94%;
	line-height: 1.5em;
	border: 1px solid #616161;
	margin:0 auto;
	-moz-box-shadow: 0 0 50px #3f2e20 inset;  
	-webkit-box-shadow: 0 0 50px #3f2e20 inset;  
	-o-box-shadow: 0 0 50px #3f2e20 inset;
	-ms-box-shadow: 0 0 50px #3f2e20 inset;
	box-shadow: 0 0 50px #3f2e20 inset;			
}

.grid-container {
  width: 75%;
  margin: auto;
  background: black;
  color: white;
  display: grid;
  align-content: stretch;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 67px 30px 30px 700px 1fr 30px 15px;
  gap: 0;
  grid-template-areas:
    "logo logo logo logo logo logo ."
    "c1 c2 c3 c4 c5 c6 c7"
    "date . . . . . heure"
    "mnu main main main main main vdo"
    "mnu main main main main main vdo"
    "ctc . . haut . . link"
    "ftr ftr ftr ftr ftr ftr ftr";
}
.logo { grid-area: logo; background: url(../img/pr-fleuri.jpg) no-repeat; max-height: 67px; }
.c1 { grid-area: c1; background-color: #CCCC99; }
.c2 { grid-area: c2; background-color: #CCCC66;}
.c3 { grid-area: c3; background-color: #CCCC33; }
.c4 { grid-area: c4; background-color: #CCCC00; }
.c5 { grid-area: c5; background-color: #999933; }
.c6 { grid-area: c6; background-color: #666600; }
.c7 { grid-area: c7; background-color: #999966; }
.date { grid-area: date; text-align: center; font-size: .8em; margin: auto;}
.heure { grid-area: heure; text-align: center; font-size: .8em; margin: auto; }
.mnu { grid-area: mnu; background-color: #CCCC99; display: grid; grid-template-columns: subgrid;}
.mnu1 { grid-column: 1 / 2; grid-row: 1 / 2; background-color: transparent;  text-align: left; position: sticky; position: -webkit-sticky;}
.mnu2 { grid-column: 1 / 2; grid-row: 2 / 3; background-color: transparent;  text-align: left; }
.main { grid-area: main; text-align: justify; }
.titre {grid-area: titre; text-align: center;}
.sstitre {grid-area: sstitre; text-align: center;}
.foto1 {grid-area: foto1; text-align: center; }
.leg1 {grid-area: leg1; text-align: center;}
.foto2 {grid-area: foto2; text-align: center; }
.leg2 {grid-area: leg2; text-align: center;}
.foto3 { grid-area: foto3; text-align: center; }
.leg3 {grid-area: leg3; text-align: center;}
.foto4 { grid-area: foto4; text-align: center; }
.leg4 {grid-area: leg4; text-align: center;}
.foto5 { grid-area: foto5; text-align: center; }
.leg5 {grid-area: leg5; text-align: center;}
.foto6 {grid-area: foto6; text-align: center; }
.leg6 {grid-area: leg6; text-align: center;}
.foto7 {grid-area: foto7; text-align: center; }
.leg7 {grid-area: leg7; text-align: center;}
.foto8 { grid-area: foto8; text-align: center; }
.leg8 {grid-area: leg8; text-align: center;}
.foto9 { grid-area: foto9; text-align: center; }
.leg9 {grid-area: leg9; text-align: center;}
.foto10 { grid-area: foto10; text-align: center; }
.leg10 {grid-area: leg10; text-align: center;}
.foto10 { grid-area: foto10; text-align: center; }
.leg10 {grid-area: leg10; text-align: center;}
.foto10 { grid-area: foto10; text-align: center; }
.leg10 {grid-area: leg10; text-align: center;}
.foto11 { grid-area: foto11; text-align: center; }
.leg11 {grid-area: leg11; text-align: center;}
.foto12 { grid-area: foto12; text-align: center; }
.leg12 {grid-area: leg12; text-align: center;}
.foto13 { grid-area: foto13; text-align: center; }
.leg13 {grid-area: leg13; text-align: center;}
.foto14 { grid-area: foto14; text-align: center; }
.leg14 {grid-area: leg14; text-align: center;}
.foto15 { grid-area: foto15; text-align: center; }
.leg15 {grid-area: leg15; text-align: center;}
.foto16 { grid-area: foto16; text-align: center; }
.leg16 {grid-area: leg16; text-align: center;}
.foto17 { grid-area: foto17; text-align: center; }
.leg17 {grid-area: leg17; text-align: center;}
.foto18 { grid-area: foto18; text-align: center; }
.leg18 {grid-area: leg18; text-align: center;}

.vdo { grid-area: vdo; background-color: #999966;}
.ctc { grid-area: ctc; max-height: 60px; text-align: center; align-self: center}
.link { grid-area: link; text-align: center;  font-size: 0.7em; margin: auto; max-height: 60px;}
.ftr { grid-area: ftr; background-color: #87ad00; }
.haut { grid-area: haut;  text-align: center; align-self: center; }
.vdo p:first-of-type {text-align: center; font-size: 1em; background: #666600; margin-top: 20px; }
.mnu1 p.rbq:first-of-type {text-align: center;font-size: 1em; background: #666600; margin-top: 0; }
.mnu1 p.rbq {text-align: center;font-size: 1em; background: #666600; margin: 1em 0 1em 0; }
.mnu1 li:last-of-type {text-align: left; padding-bottom: 1.2em;}

.main p {line-height: 1.5em; font-size: .9em; padding: 0 6%;}
.vdo p {text-align: center; position: relative}
.mnu1 {}
p.jak > .shdw {box-shadow: -4px 2px 15px 0 #333; transform: rotate(-1deg); border: 2px solid white; margin-bottom: 0;}
p.jak > .shdwb {box-shadow: -4px 2px 15px 0 #333; transform: rotate(1deg); border: 2px solid white; margin-bottom: 0;}
img.brdr {border: 4px solid white; border-radius: 0 8px 8px 8px;}
img.shdw {box-shadow: -4px 2px 15px 0 #333; transform: rotate(-1deg); border: 2px solid white; margin-bottom: 3em;}
img.shdwb {box-shadow: -4px 2px 15px 0 #333; transform: rotate(1deg); border: 2px solid white; margin-bottom: 3em;}
 h1 {margin-top: 20px;  color:#d6a3f1; font-size: 2em; font-weight: bold; text-decoration: underline; text-align: center;}
 h2 {color: #CCCC00; font-weight: 600; padding-left: 6%; text-transform:lowercase; font-size: 1.3em;}
 h3 {margin-top: 2em; margin-bottom: -1px; color:#87AD00; font-size: 1.1em; font-weight: bold; text-decoration: underline; padding-left: 6%;}
 
.pink {padding:0 6%; color:#EC3E91; margin-top: -5px; line-height:1.2em;}

#cont_NjMzNTR8NXwzfDN8NHxGRkZGRkZ8M3xGRkZGRkZ8Y3wx {text-align: center; margin: auto;}

.M1, .M2, .M3, .M4, .M5, .agd, .add {display: none}



@media only screen and (max-width: 1250px){
body {
	background: black;
	font-family: 'Trebuchet MS', Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: .9em;	
}

.grid-container {
  display: grid;
  width:93%;
  margin:auto;
  grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
  grid-template-rows: 67px 20px 30px 1fr 15px 8px;
  gap: 0px 0px;
  grid-template-areas:
    "logo logo logo logo logo logo logo"
    "c1 c2 c3 c4 c5 c6 c7"
    ". M1 M2 M3 M4 M5 ."
    "mnu main main main main main vdo"
    "ctc . . haut . . link"
    "ftr ftr ftr ftr ftr ftr ftr";
}
.logo { grid-area: logo; }
.c1 { grid-area: c1; background-color: #CCCC99; }
.c2 { grid-area: c2; background-color: #CCCC66;}
.c3 { grid-area: c3; background-color: #CCCC33; }
.c4 { grid-area: c4; background-color: #CCCC00; }
.c5 { grid-area: c5; background-color: #999933; }
.c6 { grid-area: c6; background-color: #666600; }
.c7 { grid-area: c7; background-color: #999966; }
.M1 { grid-area: M1; text-align: center; align-self: center; display:inline;}
.M2 { grid-area: M2; text-align: center; align-self: center; display:inline;}
.M3 { grid-area: M3; text-align: center; align-self: center; display:inline;}
.M4 { grid-area: M4; text-align: center; align-self: center; display:inline;}
.M5 { grid-area: M5; text-align: center; align-self: center; display:inline;}
.mnu { grid-area: mnu; background-color: #CCCC99;}
.main { grid-area: main; }
.vdo { grid-area: vdo; background-color: #999966; }
.ctc { grid-area: ctc; }
.haut { grid-area: haut;  text-align: center; align-self: center; }
.link { grid-area: link; }
.ftr { grid-area: ftr;  background-color: #87ad00;}

p.rbq, p.icon, ul, .date, .heure, .lrg, .mnu > img, .vdo > p {display: none}
.link {visibility: hidden;}

 h1 {margin-top: 10px;  color:#d6a3f1; font-size: 1.3em; font-weight: bold; text-decoration: underline; text-align: center;}
 h2 {color: #CCCC00; font-weight: 600; padding-left: 4%; text-transform:lowercase; font-size: 1.3em}
 h3 {margin-top: 2em;  color:#C6B05B; font-size: 1.1em; font-weight: bold; text-decoration: underline; padding-left: 4%;}

#cont_NjMzNTR8NXwzfDN8NHxGRkZGRkZ8M3xGRkZGRkZ8Y3wx {display: none}

.agd {margin: auto; padding: auto; display:block; text-align:center;}
.add {display: block; text-align:center; margin-top:2em;}

.lefty{text-align: left; margin: auto;}
.droty{text-align: center; margin: 0.2rem 0 0 0;}

}