a {color: #CC7569;}
a:hover {color : #000000; text-decoration : underline;}

.page{
display: grid;
  grid-template-columns: 550px 449px;
  grid-template-rows: 70px 608px minmax(max-content,max-content) auto auto 1px;
  justify-content: center;
  align-content: start;
  grid-gap: 0px;
  grid-template-areas:  "gridbanniere gridbanniere"
                        "gridvideo gridvideo"
                        "gridarticle gridslogan"
                        "gridarticle gridcommande"
                        "gridfooter gridfooter"
                        "gridvideo2 gridvideo2";
}

@font-face{font-family:'barna';src:url("Barna-Regular.woff2") format("woff2");font-weight:500;font-style:normal}
@font-face{font-family:'barna';src:url("Barna-Bold.woff2") format("woff2");font-weight:1000;font-style:normal}
@font-face{font-family:'barna-stencil';src:url("BarnaStencil-Regular.woff2") format("woff2");font-weight:normal;font-style:normal}
@font-face{font-family:'barna-stencil';src:url("BarnaStencil-Bold.woff2") format("woff2");font-weight:bold;font-style:normal}

.hcentre
{
text-align: center;
}

.hgauche
{
text-align: left;
}

.hdroite
{
text-align: right;
}

.gauche {
float: left;
margin-right: 6px;
margin-top: 6px;
margin-bottom: 6px;

}

.droite {
float: right;
margin-left: 6px;
margin-top: 6px;
margin-bottom: 6px;
text-align: right

}

.gridbanniere
{
  grid-area: gridbanniere;
  display: none;
}
 
.gridarticle
{
  grid-area: gridarticle;
  background: #F6F3F0;
}

.gridslogan
{
  grid-area: gridslogan;
padding-left: 10px;
padding-right: 10px;
  background: #F6F3F0;
}

.gridcommande
{
  grid-area: gridcommande;
padding-left: 10px;
padding-right: 10px;
  background: #F6F3F0;
}

.gridvideo
{
  grid-area: gridvideo;
}

.gridfooter
{
  grid-area: gridfooter;
padding-left: 20px;
padding-right: 20px;
    background: #F6F3F0;
}

.gridvideo2
{
  grid-area: gridvideo2;
  display: none;
}

.tabgrille {
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.tableauentetemob {
  display: grid;
  grid-template-columns: 60px auto;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  z-index: 10000;
  }

.tab2col {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 8px;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.tableaucom
{
  display: grid;
  grid-template-columns: auto auto 1px auto auto;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-gap: 8px;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.videocontainer {
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
z-index: 9999;
}

.videocontainer iframe {
width: 100%!important;
height: 100%!important;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
}

.arrondiencart
{
border: 1px solid #E8E8E8;
border-top-left-radius: 20px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 20px;
box-shadow: 1px 1px 2px #CFCFCF;
background: white;
}

.arrondiencart2
{
border: 1px solid #FF6666;
border-top-left-radius: 20px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 20px;
box-shadow: 1px 1px 1px #CFCFCF;
background: white;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 10px;
margin-bottom: 5px;
}

.marge-encart
{
padding-top: 5px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 5px;
}


.pitto1
{
	font-family: "Bellota Text", "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 15px;
	color: #202020;
	font-weight: normal;
	line-height: 105%;
}

.pitto2
{
	font-family: "Bellota Text", "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 17px;
	color: #505050;
	font-weight: normal;
	line-height: 105%;
	padding-left: 20px;
	padding-right: 20px;
}

.pitto2b
{
	font-family: "Bellota Text", "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 19px;
	font-style: normal;
	color: #505050;
	font-weight: normal;
	line-height: 105%;
}

.titre
{
	font-family: "Bellota Text", "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 26px;
	color: #CC7569;
	font-weight: bold;
	font-style: italic;
	line-height: 105%;
}

.titre0
{
	font-family: "Bellota Text", "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 17px;
	color: #FF6666;
	font-weight: bold;
	font-style: italic;
	line-height: 105%;
}

.titre2
{
	font-family: "Bellota Text", "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 32px;
	color: white;
	background: #0092C2;
	font-weight: bold;
	line-height: 105%;
}

.cit
{
	font-family: "Bellota Text", "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 26px;
	color: black;
	font-weight: bold;
	font-style: italic;
	line-height: 105%;
}

.cit2
{
	font-family: "Bellota Text", "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 23px;
	color: black;
	line-height: 105%;
}

.cit2b
{
	font-family: "Bellota Text", "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 17px;
	color: black;
	line-height: 105%;
}

#logo {
  position:relative;
  height:60px;
  width:60px;
}

#logo img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#logo img.miximg {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}

.textquest
{height: 16;
 font-family: Verdana,Arial,sans-serif;
 font-size: 10px;
 text-decoration: none;
 color: black; 
 background: #E5E5CA; 
 border-top: 1px solid #C0C0C0;
 border-bottom: 1px solid #C0C0C0;
 border-left: 1px solid #C0C0C0;
 border-right: 1px solid #C0C0C0;}

.textquest2
{height: 20;
 font-family: "Trebuchet MS",Arial,sans-serif;
 font-size: 18px;
 font-weight: bold;
 font-style: italic;
 text-decoration: none;
 color: black; 
 background: #FFFFFF; 
 border-top: 1px solid white;
 border-bottom: 1px solid white;
 border-left: 1px solid white;
 border-right: 1px solid white;}

.pittolettre1
{
font-family: "Trebuchet MS",Arial,sans-serif;
font-size: 18px;
font-weight: bold;
font-style: italic;
color: #000000;
letter-spacing: -1px;
line-height: 115%;
}

.espace
{
font-family: "Trebuchet MS",Arial,sans-serif;
font-size: 12px;
line-height: 115%;
}

.mentions
{
 font-family: "Bellota Text", "Century Gothic", Verdana, Arial, sans-serif;
 font-size: 13px;
 line-height: 15px;
 text-decoration: none;
 color: black;}

.mentions2
{
 font-family: "Bellota Text", "Century Gothic", Verdana, Arial, sans-serif;
 font-size: 11px;
 line-height: 13px;
 text-decoration: none;
 color: #444444;
}

.btnradio
{cursor: hand}

.btncase
{cursor: hand}

/* Styles media queries pour le responsive*/
@media screen and (max-width : 1024px){

BODY {
background: #F6F3F0;
}

.page{
display: grid;
  grid-template-columns: auto 1px;
  grid-template-rows: 75px auto auto auto auto auto;
  justify-content: center;
  align-content: start;
  grid-gap: 0px;
  grid-template-areas:  "gridbanniere gridbanniere"
                        "gridvideo2 gridvideo2"
                        "gridarticle gridarticle"
                        "gridcommande gridcommande"
                        "gridslogan gridslogan"
                        "gridfooter gridfooter";
}

#nav {
position: fixed;
}

.gridbanniere
{
display: inline-block;
}

.gridvideo
{
display: none;
}

.gridvideo2
{
display: inline-block;
}

}