@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Source+Sans+3:wght@300;400;600&display=swap');

.ocre-gras {
  color: #C49A2C;
  font-weight: bold;
}

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

  /* Permet de supprimer les contours sur les liens */
  A:link {text-decoration: none;color: white;border:0; }
  A:visited {text-decoration: none;color: white; border:0;}
  A:active {text-decoration: none;color: white; border:0;outline:none;}
  A:hover {text-decoration: none;color: white; border:0;}
  A:focus {outline:none;}
  

/* Mobile Layout: 480px and below. */
.gridContainer {
   position: relative;
   width: 400px;
   margin:auto; 
   min-height: 400px;
  /* background-color : red;  */
   background-image:url(images/fond.png);
   background-attachment: fixed; 
   /*  background-size: 100% 100%;  */
   -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
   -o-background-size: 100% 100%;           /* Opera 9.5 */
   -webkit-background-size: 100% 100%;           /* Safari 3.0 */
   background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) et les autres navigateurs gérant CSS3 */
   -moz-border-image: url(images/fond.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
     /* IE5.5 and upper */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/fond.png', sizingMethod='scale');       /* IE7 and under */
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/fond.png', sizingMethod='scale')"; /* IE 8 */
 
   background-repeat:no-repeat; 
 /*   z-index:0; */
/*	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
*/
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
a#ref_mil {
    z-index:1000;
    font-size: 1em;
    margin-right:10px;
    background-color:#9a8c7e;
    color:black;
    border-width:3px;
    border-color:black; 
    border-radius:3px;
    padding:2px;
}
a#ref_mil:hover{
    background-color: white;
}

a#ref_car_mil {
    z-index:1000;
    font-size: 1em;
    margin-right:10px;
    background-color:#9a8c7e;
    color:black;
    border-width:3px;
    border-color:black; 
    border-radius:3px;
    padding:2px;
}
a#ref_car_mil:hover{
    background-color: white;
}

a#ref_carignan {
    position: relative;
    z-index:1000;
    font-size: 1em;
    margin-left:40px;
    background-color:#9a8c7e;
    color:black;
    border-width:3px;
    border-color:black; 
    border-radius:3px;
    padding:2px;
}
a#ref_carignan:hover{
    background-color: white;
}
a#ref_gre_mil {
    z-index:1000;
    font-size: 1em;
    margin-right:10px;
    background-color:#9a8c7e;
    color:black;
    border-width:3px;
    border-color:black; 
    border-radius:3px;
    padding:2px;
}
a#ref_gre_mil:hover{
    background-color: white;
}

a#ref_grenache {
    position: relative;
    z-index:1000;
    font-size: 1em;
    margin-left:40px;
    background-color:#9a8c7e;
    color:black;
    border-width:3px;
    border-color:black; 
    border-radius:3px;
    padding:2px;
}
a#ref_grenache:hover{
    background-color: white;
}
a#ref_corp_mil {
    z-index:1000;
    font-size: 1em;
    margin-right:10px;
    background-color:#9a8c7e;
    color:black;
    border-width:3px;
    border-color:black; 
    border-radius:3px;
    padding:2px;
}
a#ref_corp_mil:hover{
    background-color: white;
}

a#ref_as_mil {
    z-index:1000;
    font-size: 1em;
    margin-right:10px;
    background-color:#9a8c7e;
    color:black;
    border-width:3px;
    border-color:black; 
    border-radius:3px;
    padding:2px;
}
a#ref_as_mil:hover{
    background-color: white;
}
a#ref_grigris_mil {
    z-index:1000;
    font-size: 1em;
    margin-right:10px;
    background-color:#9a8c7e;
    color:black;
    border-width:3px;
    border-color:black; 
    border-radius:3px;
    padding:2px;
}
a#ref_grigris_mil:hover{
    background-color: white;
}
div#language {
   position:absolute;
   top:0;
   bottom:80%;
   left:0;
   right:0;
   margin:auto;
   padding-top:30px;
   color: white;
   z-index:2;
   width:100%;
   height:100px;
   font-family:arial;
   font-size: 1.2em;
   text-align:center;
   /* background-color : red;  */
}

 .main_title{
   float : left;
 }
 
 .left {
   float : left;
   width : 200px; 
   height: 100%;
  /* background-color : blue; */
 }
 
  div#left {
   margin-top: 20px;
   float : left;
  /* background-color : blue; */
   width : 130px;
   position:relative; 
   z-index: 1000;
 }
img#titre {
   width: 20%;
   position:absolute;
   bottom: 20px;
   left: 20px;
   z-index:1;
}
  div#acceuil_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  200px;
  }
  
   div#presentation_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  200px;
    }
    
   div#vins_blancs_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  280px;
    }
    
   div#vins_rouges_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  300px;
    }
    
   div#contacts_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  80px;
    }
div#bandeau_fond {
    width:100%;
    height:50px;
    background-color : #464d53; 
    text-align:center;     /* Centrer l'image contenue */
}
img#logo {
   position:absolute;
   top:0;
   bottom:0;
   left:10px;
   right:0;
   width: 200px; 
   height: 200px; 
   margin:auto;
   z-index:1;
   opacity : 0.2;
   /* IE 7 and Earlier */
   /*filter: alpha(opacity=75); */
   /* Next 2 lines IE8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
   display: inline-block;
}

/* Pour tout les menus */
.menu a:hover .menu_button img {
    transform: scale(1.2); /* Effet zoom sur l'image */
    transition: transform 0.2s;
}

ul {
    list-style: none; /* Supprime les puces */
    padding: 0; /* Supprime les marges internes */
    margin: 0;  /* Supprime les marges externes */
}
.submenu_item {
    /*border-left: 2px solid #ccc; */ /* Ajoute une ligne pour indiquer la hiérarchie */ 
    padding-left: 15px;
    margin-left: 10px;
}

.submenu_text{
    /*border-left: 2px solid #ccc; */ /* Ajoute une ligne pour indiquer la hiérarchie */ 
    padding-left: 15px;
    margin-left: 10px;
}

.menu_button_next {
    float: right;
    margin-left: 10px;
    height: 25px;
    width: 50px; 
}

.menu_button_prev {
    height: 25px;
    width: 50px; 
}
 /* .button_millesime{ 
     height: 5px; 
  }*/
  .menu_button {
  float : left;
  margin-left: 10px;
  margin-right: 10px;
  width: 15px; 
  height: 15px; 
  }
  
 .menu_item {
   color:white;
   font:1.2em/1em papyrus; 
  }
 
  .submenu_text {
   color:white;
   font:1.2em/1em papyrus; 
  }
  .menu{
  /* margin-top: 15px;
   height: 20px;*/
   /* display: flex;  */
  }
  
  div#article{
    margin-left: 130px;
    margin-right: 10px;
    margin-top:  20px;
    height:  750px;
    /* border: 1px solid #464d53; */
    /* background-color : white;  */
  }
  
  .main_txt{
    color : white;
    /*font:1em/1em "Book Antiqua",arial;  */
    font:1em/1em "Source Sans 3", arial, sans-serif;
    /* line-height: 1.6; */
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  
  div#contatcs_corps {
    margin-top:  30px; 
    margin-left: 20px;
  }
   img#acceuil_img{
    margin-left: 10px;
    margin-top: 20px;
    height:  130px;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  img#grenache_img{
    margin-right: 10px;
    margin-left: 30px;
    height:  200px;
     z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  img#carignan_img{
    margin-right: 10px;
    margin-left: 10px;
    height:  200px;
     z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
    img#grigris_img{
    margin-right: 10px;
    margin-left: 400px;
    height:  200px;
     z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  id#contacts_img_container{
 
  }
  
  img#contacts_img{
    margin-right: 20px;
    margin-left: 30px;
    height:  260px;
    z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
   position: relative;
   width: 600px;
   margin:auto; 
   min-height: 400px;
  /* background-color : red;  */
   background-image:url(images/fond.png);
   background-attachment: fixed; 
   /*  background-size: 100% 100%;  */
   /*  background-size: 100% 100%;  */
   -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
   -o-background-size: 100% 100%;           /* Opera 9.5 */
   -webkit-background-size: 100% 100%;           /* Safari 3.0 */
   background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) et les autres navigateurs gérant CSS3 */
   -moz-border-image: url(images/fond.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
    /* IE5.5 and upper */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/fond.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/fond.png', sizingMethod='scale')";

   background-repeat:no-repeat; 
 /*  z-index:0; */
     /*
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
    */
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

a#ref_carignan {
    margin-left:150px;
}
a#ref_grenache {
    margin-left:150px;
}

div#language {
   position:absolute;
   top:0;
   bottom:80%;
   left:0;
   right:0;
   margin:auto;
   color: white;
   z-index:2;
   width:100%;
   height:100px;
   font-family:arial;
   font-size: 1.5em;
   text-align:center;
   /* background-color : red;  */
}
 .left {
   float : left;
   width : 200px; 
   height: 100%;
  /* background-color : blue; */
   position:relative; 
   z-index: 1000;
 }
 
  div#left {
   margin-top: 20px;
   float : left;
  /* background-color : blue; */
   width : 200px;
 }
img#titre {
   width: 20%;
   position:absolute;
   bottom: 20px;
   left: 20px;
   z-index:1;
}
  div#acceuil_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  200px;
  }
  
   div#presentation_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  200px;
    }
    
   div#vins_blancs_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  200px;
    }
    
   div#vins_rouges_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  230px;
    }
    
   div#contacts_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  80px;
    }
    
div#bandeau_fond {
    width:100%;
    height:50px;
    background-color : #464d53; 
    text-align:center;     /* Centrer l'image contenue */
}
img#logo {
   position:absolute;
   top:0;
   bottom:0;
   left:10px;
   right:0;
   width: 250px; 
   height: 250px; 
   margin:auto;
   z-index:1;
   opacity : 0.2;
   /* IE 7 and Earlier */
   /*filter: alpha(opacity=75); */
   /* Next 2 lines IE8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
   display: inline-block;
    font-family: 'Times New Roman',Times,serif;
}
  .menu_button {
  float : left;
  margin-left: 10px;
  margin-right: 10px;
  width: 21px; 
  height: 21px; 
  }
  
  .menu_item {
   color:white;
   font:1.5em/1em papyrus; 
  }
  .menu{
  /* margin-top: 15px;
   height: 25px; */
 /*  display: flex; */
  }
  
  div#article{
    margin-left: 180px;
    margin-right: 10px;
    margin-top:  20px;
    height:  600px;
    /* border: 1px solid #464d53; */
    /* background-color : white;  */
  }
  
  .main_txt{
    color : white;
    /* font:1.1em/1em "Book Antiqua",arial;  */
    font:1.1em/1em "Source Sans 3", arial, sans-serif;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  
  div#contatcs_corps {
    margin-top:  10px; 
  }
   img#acceuil_img{
    margin-left: 10px;
    margin-top: 20px;
    height:  200px;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  img#grenache_img{
    margin-right: 10px;
    margin-left: 50px;
    height:  280px;
     z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  img#carignan_img{
    margin-right: 10px;
    margin-left: 10px;
    height:  280px;
     z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
   img#grigris_img{
    margin-right: 10px;
    margin-left: 400px;
    height:  250px;
     z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  id#contacts_img_container{
 
  }
  
  img#contacts_img{
    margin-right: 20px;
    margin-left: 60px;
    height:  320px;
    z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
   position: relative;
   width: 1024px;
   margin:auto; 
   min-height: 800px;
 
   background-image:url(images/fond.png);
   background-attachment: fixed; 
   /* background-size: 100% 100%;   */
   /*  background-size: 100% 100%;  */
   -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
   -o-background-size: 100% 100%;           /* Opera 9.5 */
   -webkit-background-size: 100% 100%;           /* Safari 3.0 */
   background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) et les autres navigateurs gérant CSS3 */
   -moz-border-image: url(images/fond.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
   background-repeat:no-repeat; 
   /* z-index:0; */
   /* IE5.5 and upper */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/fond.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/fond.png', sizingMethod='scale')";
      /*
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
    */
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
    
}
a#ref_carignan {
    margin-left:350px;
}
a#ref_grenache {
    margin-left:350px;
}
div#language {
   position:absolute;
   top:0;
   bottom:80%;
   left:0;
   right:0;
   margin:auto;
   color: white;
   z-index:2;
   width:100%;
   height:100px;
   font-family:arial;
   font-size: 2em;
   text-align:center;
   /* background-color : red;  */
}

 .left {
   float : left;
   width : 300px; 
	height: 100%;
  /* background-color : blue; */
   position:relative; 
   z-index: 1000;
 }
 
 div#left {
   margin-top: 20px;
   float : left;
  /* background-color : blue; */
   width : 300px;
 }
   
img#titre {
   width: 20%;
   position:absolute;
   bottom: 20px;
   left: 20px;
   z-index:1;
}
div#bandeau_fond {
    width:100%;
    height:100px;
    background-color : #464d53; 
    text-align:center;     /* Centrer l'image contenue */
}
img#logo {
   position:absolute;
   top:0;
   bottom:0;
   left:10px;
   right:0;
   width: 500px; 
   height: 500px; 
   margin:auto;
   z-index:0;
   opacity : 0.2;
   /* IE 7 and Earlier */
   /*filter: alpha(opacity=75); */
   /* Next 2 lines IE8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
   display: inline-block;
}
  .menu_button {
  float : left;
  margin-left: 20px;
  margin-right: 20px;
  width: 42px; 
  height: 42px; 
  }
  
.menu_item {
   padding-top:10px;
   height: 42px;
   color:white;
   font:2em/1em papyrus; 
  }
.submenu_text {
   padding-top:10px;
   height: 42px;
   color:white;
   font:1.5em/1em papyrus; 
  }
  .menu{
  /* margin-top: 30px;
   margin-bottom: 10px;
   height: 50px;*/
  /* display: flex;*/
  }
  
  div#article{
    margin-left: 320px;
    margin-right: 20px;
    margin-top:  20px;
    height:  600px;
    /* border: 1px solid #464d53; */
    /* background-color : white;  */
  }
  
  .main_txt{
    color : white;
    /* font:1.5em/1em "Book Antiqua",arial;   */
    font:1.3em/1em "Source Sans 3", arial, sans-serif;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  

    div#titre{
   position:absolute;
   bottom: 20px;
   left: 20px;
   z-index:1;
   background-color : green; 
   }
   
   div#acceuil_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  200px;
   }
  
   div#presentation_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  200px;
    }
    
   div#vins_blancs_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  220px;
    }
    
   div#vins_rouges_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  300px;
    }
    
   div#contacts_main_p{
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  20px;
    height:  150px;
    }
    
  div#contatcs_corps {
    float:left;
    margin-top:  150px; 
  }
   /* Les images */
   img#acceuil_img{
    margin-left: 20px;
    margin-top: 20px;
    height:  340px;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  
  img#vignoble_img{
    margin-left: 30px;
    margin-top: 20px;
    height:  400px;
  }
  img#vigne_img{
    margin-left: 130px;
    margin-top: 20px;
    height:  400px;
  }
  img#jardin_img{
    margin-left: 100px;
    margin-top: 20px;
    height:  400px;
  }
  img#agriculture_img{
    margin-left: 40px;
    margin-top: 20px;
    height:  400px;
  }
  img#temps_img{
    margin-left: 40px;
    margin-top: 20px;
    height:  350px;
  }
  img#cepages_img{
    margin-left: 180px;
    margin-top: 20px;
    height:  380px;
  }
  img#vins_img{
    margin-left: 80px;
    margin-top: 20px;
    height:  330px;
  }
  
  img#grenache_img{
    margin-right: 20px;
    margin-left: 180px;
    height:  330px;
     z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  img#carignan_img{
    margin-right: 20px;
    margin-left: 180px;
    height:  330px;
     z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
   img#grigris_img{
    margin-right: 10px;
    margin-left: 400px;
    height:  280px;
     z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
  id#contacts_img_container{
      
    margin-left: 400px;
  }
  
  img#contacts_img{
    margin-right: 20px;
    margin-left: 70px;
    height:  350px;
    z-index:3;
   /* border: 1px solid #464d53;
    background-color : red;  */
  }
}

 html,body {
	margin: 0;
	padding: 0;
	height: 100%;
}
   .orange{
    color:#ff9933;
   }
   .vert{
    color: #00cc00;
   }
   .rouge{
    color: #ff2b0b;
   }

  .right {
   float : right;
   width : 230px;
   background-color : black;
   }
  .center {
   margin-bottom: 0;
   background-color : blue;
  }

div#main_container {
   width: 90%;
    margin:auto; 
   min-height: 100%;
  /* background-color : red;  */
   background-image:url(images/fond.png);
   background-attachment: fixed; 
   background-size: 100% 100%;  
   background-repeat:no-repeat; 
   z-index:0;
}

#pdf canvas{
  width:auto;
  height:650px;
  display:block;
}


img#bandeau {

}

   div#titre{
   position:absolute;
   bottom: 20px;
   left: 20px;
   z-index:1;
   background-color : green; 
   }