/* CSS Document */
html, body {width: 98vw; height: 98%; }
body {
background: url("../img/herb.jpg") no-repeat #346702;
background-size: cover;
background-attachment: fixed;
top: 2px;
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 4.8rem 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 {
color: #6500CC;
text-decoration: none;
padding: 1px 3px;
background-color: #ECB200;
}
li a:active {
color: #FF0066;
text-decoration: none;
background: #CCFF00;
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;
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; align-self: start; margin-top:0}
.mnu2 { grid-column: 1 / 2; grid-row: 2 / 3; background-color: transparent; text-align: left; }
.main { grid-area: main; text-align: justify; display: grid; grid-template-columns: 0.9fr 1fr 0 1fr 0.9fr ; grid-template-rows: 50px 30px 200px 100px 200px 100px 200px 100px 200px 100px 200px 100px 200px 100px 200px 100px 200px 100px 200px 100px; grid-gap: 20px 0; align-items: center; justify-items: center;
grid-template-areas:
"titre titre titre titre titre"
"sstitre sstitre sstitre sstitre sstitre"
"foto1 foto1 . foto2 foto2"
"leg1 leg1 . leg2 leg2"
"foto3 foto3 . foto4 foto4"
"leg3 leg3 . leg4 leg4"
"foto5 foto5 . foto6 foto6"
"leg5 leg5 . leg6 leg6"
"foto7 foto7 . foto8 foto8"
"leg7 leg7 . leg8 leg8"
"foto9 foto9 . foto10 foto10"
"leg9 leg9 . leg10 leg10"
"foto11 foto11 . foto12 foto12"
"leg11 leg11 . leg12 leg12"
"foto13 foto13 . foto14 foto14"
"leg13 leg13 . leg14 leg14"
"foto15 foto15 . foto16 foto16"
"leg15 leg15 . leg16 leg16"
"foto17 foto17 . foto18 foto18"
"leg17 leg17 . leg18 leg18"
;
}
.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;}
.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}
.haut { grid-area: haut; 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; }
.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}
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; color:#C6B05B; font-size: 1.1em; font-weight: bold; text-decoration: underline; padding-left: 6%;}
#cont_NjMzNTR8NXwzfDN8NHxGRkZGRkZ8M3xGRkZGRkZ8Y3wx {text-align: center; margin: auto;}
.M1, .M2, .M3, .M4, .M5 {display: none}
@media only screen and (max-width: 1000px){
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; display: grid; grid-template-columns: 1fr; grid-template-rows: auto;
grid-template-areas:
"titre"
"foto1"
"leg1"
"foto2"
"leg2"
"foto3"
"leg3"
"foto4"
"leg4"
"foto5"
"leg5"
"foto6"
"leg6"
"foto7"
"leg7"
"foto8"
"leg8"
"foto9"
"leg9"
"foto10"
"leg10"
"foto11"
"leg11"
"foto12"
"leg12"
"foto13"
"leg13"
"foto14"
"leg14"
"foto15"
"leg15"
"foto16"
"leg16"
"foto17"
"leg17"
"foto18"
"leg18"
;
}
.titre {grid-area: titre; text-align: center; margin:1em 0 1.5em 0;}
.sstitre {grid-area: sstitre; display: none;}
.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;}
.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; align-self: center; }
.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, .mnu > img, .vdo > p {display: none}
.link {visibility: hidden;}
h1 {margin-top: 10px; color:#d6a3f1; font-size: 1.5em; 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.2em; font-weight: bold; text-decoration: underline; padding-left: 4%;}
#cont_NjMzNTR8NXwzfDN8NHxGRkZGRkZ8M3xGRkZGRkZ8Y3wx {display: none}
.lefty{text-align: left; margin: auto;}
.droty{text-align: right; margin: 0.2rem 6rem 0 0;}
}