/*CSS FOODDIARY AUG25*/

/**********************************************************************/
/*                           TYPO DIV STYLES                          */
/**********************************************************************/

html 
{font-family: ABeeZee, Kosugi Maru}

.titre_header
{color:#FFFFFF ;font-size:250%}

.sous-titre_section
{color:#A30000 ;font-size:150%}

.txt
{color:#555555 ;font-size:100%}

.txtSmall
{color:#555555 ;font-size:75%}

.txtComments
{color:#A30000 ;font-size:90%; font-style:italic; margin-top:10px;}

.txtWeight
{color:#F7970C ;font-size:90%; font-style:italic; margin-top:10px;}

.pageSelect
{ color:#FF0000 ;font-size:75%; font-weight:bold}



.copyright
{ color:#FFFFFF ;font-size:90%}

.error
{ color:#71130B ;font-size:80%}





A:link{
	color:#A30000;
	text-decoration:none;
}

A:visited{
	color:#A30000;
	text-decoration:none;
}

A:hover{
	text-decoration: underline;
}




/**********************************************************************/
/*                          BLOC DEFINITIONS                          */
/**********************************************************************/


#pageHeader {
  grid-area: header;
}

#foodArea {
  grid-area: foodArea;
  padding-left:40px;
  padding-right:40px;
  background-color: #FFFFFF;
}

#pageFooter {
  grid-area: footer;
}







#articleImg { 
  grid-area: articleImg; 
  margin-right:10px;
  margin-left:10px;
} 


#articleTxt { 
  grid-area: articleTxt; 
  margin-left:10px;
  margin-right:10px;
} 

#articleType { 
  grid-area: articleType; 
  margin-left:10px;
  margin-right:10px;
} 

#articleDate { 
  grid-area: articleDate; 
  margin-left:10px;
  margin-right:10px;
} 




#nav { 
  grid-area: nav; 
  white-space: nowrap;
  text-align:center;
  background-color: #FFFFFF;

} 









#navElement1 { 
  grid-area: navElement1; 
  padding-top:10px;
  padding-left:10px;
  /*border-right: 1px solid #999999;*/
  text-align: left;
  
} 

#navElement2 { 
  grid-area: navElement2; 
  padding-top:10px;
  padding-left:10px;
  /*border-right: 1px solid #999999;*/
  text-align: left;
  
} 







/**********************************************************************/
/*                             CONTAINERS                             */
/**********************************************************************/

body { 
  background-color: #EEEEEE;
  display: grid;
  grid-template-areas: 
    "header"
    "nav"
    "foodArea"
    "footer";
  grid-template-rows: 80px 80px auto 40px;  
  grid-template-columns: 1fr;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  height: 100vh;
  margin: 0px 15% 0px 15%;
}  


header {
  margin: 0px;
  padding-top: 15px;
  padding-left: 20px;
  position: relative;
  background: #851800;
}


footer {
  padding-top: 15px;
  padding-left: 20px;
  background: #851800;
}





.theFoodContainer {
  display: grid;
  grid-template-areas: 
    "articleDate articleType articleTxt articleImg";
  grid-template-columns: 15% 15% 50% 20%;
  grid-column-gap: 5px;
  margin-top: 10px;
  border-top: 1px solid #851800;
  padding-bottom:10px;
  padding-top:10px;
}


.theFoodContainerNoImage {
  display: grid;
  grid-template-areas: 
    "articleDate articleType articleTxt";
  grid-template-columns: 15% 15% 70%;
  grid-column-gap: 5px;
  margin-top: 10px;
  border-top: 1px solid #851800;
  padding-bottom:10px;
  padding-top:10px;
}


.theFoodContainerBG {
  display: grid;
  grid-template-areas: 
    "articleDate articleType articleTxt articleImg";
  grid-template-columns: 15% 15% 50% 20%;
  grid-column-gap: 5px;
  margin-top: 10px;
  border-top: 1px solid #851800;
  padding-bottom:10px;
  padding-top:10px;
  background: #FFF1ED;
}


.theFoodContainerBGNoImage {
  display: grid;
  grid-template-areas: 
    "articleDate articleType articleTxt";
  grid-template-columns: 15% 15% 70%;
  grid-column-gap: 5px;
  margin-top: 10px;
  border-top: 1px solid #851800;
  padding-bottom:10px;
  padding-top:10px;
  background: #FFF1ED;
}






.imgArticleDecoration{
  border: 1px solid #A30000;
  width: 90%;
  height: auto;
  max-width: 100px;
  bottom: 0px; 
  left: 10px;
  margin: 0;
  border-radius: 5px;
}

.imgArticleDetailDecoration{
  width: 100%;
  height: auto;
  bottom: 0px; 
  top: 5px; 
  left: 10px;
  margin: 0;
  border-radius: 10px;
}

.theNavContainer {
  display: grid;
  grid-template-areas: 
    "navElement1 navElement2";
  grid-template-columns: 50% 50%;
  grid-column-gap: 0px;
  margin: 0px;

}










/**********************************************************************/
/*                             INPUT FORM                             */
/**********************************************************************/


.input_l {
  width:300px; 
  font-size:100%; 
  border:1px solid #999999; 
  padding:3px;
  padding-left:10px;
  border-radius: 7px;
  font-family:ABeeZee;
  color: #A30000;
}

.input_m {
  width:150px; 
  font-size:100%; 
  border:1px solid #999999; 
  padding:3px;
  padding-left:10px;
  border-radius: 7px;
  font-family:ABeeZee;
  color: #A30000;
}

.input_s {
  width:50px; 
  font-size:100%; 
  border:1px solid #999999; 
  padding:3px;
  padding-left:10px;
  border-radius: 7px;
  font-family:ABeeZee;
  color: #A30000;
}


/**********************************************************************/
/*                           RESPONSIVENESS                           */
/**********************************************************************/

/* Stack the layout on small devices/viewports. */
@media all and (max-width: 800px) {
	
	
	body { 
	  margin: 0;
	  grid-template-rows: 80px 100px auto 40px;
	}
 
	.txt
	{color:#555555 ;font-size:80%}
	
	.txtSmall
	{color:#555555 ;font-size:65%}
	
	.txtComments
	{color:#A30000 ;font-size:70%; font-style:italic; margin-top:10px;}
	
	.txtWeight
	{color:#F7970C ;font-size:70%; font-style:italic; margin-top:10px;}
 
	 #articleImg { 
	  grid-area: articleImg; 
	  margin-right:0px;
	  margin-left:0px;
	} 
	
	.imgArticleDecoration{
	  border: 1px solid #A30000;
	  width: 70%;
	  height: auto;
	  max-width: 75px;
	  bottom: 0px; 
	  left: 0px;
	  margin: 0;
	  border-radius: 5px;
	}
 
	.theNavContainer {
	  display: grid;
	  grid-template-areas: 
		"navElement1"
		"navElement2";
	  grid-template-columns: 100%;
	  grid-column-gap: 0px;
	  margin: 0px;
	
	}
	
	#foodArea {
	  grid-area: foodArea;
	  padding-left:0px;
	  padding-right:0px;
	  background-color: #FFFFFF;
	}
	
	.theFoodContainer {
	  display: grid;
	  grid-template-areas: 
		"articleDate articleType articleTxt articleImg";
	  grid-template-columns: 20% 15% auto 25%;
	  grid-column-gap: 1px;
	  margin-top: 10px;
	  border-top: 1px solid #851800;
	  padding-bottom:10px;
	  padding-top:10px;
	}
	
	.theFoodContainerNoImage {
	  display: grid;
	  grid-template-areas: 
		"articleDate articleType articleTxt";
	  grid-template-columns: 20% 15% 65%;
	  grid-column-gap: 1px;
	  margin-top: 10px;
	  border-top: 1px solid #851800;
	  padding-bottom:10px;
	  padding-top:10px;
	}
	
	
	.theFoodContainerBG {
	  display: grid;
	  grid-template-areas: 
		"articleDate articleType articleTxt articleImg";
	  grid-template-columns: 20% 15% auto 25%;
	  grid-column-gap: 1px;
	  margin-top: 10px;
	  border-top: 1px solid #851800;
	  padding-bottom:10px;
	  padding-top:10px;
	  background: #FFF1ED;
	}
	
	
	.theFoodContainerBGNoImage {
	  display: grid;
	  grid-template-areas: 
		"articleDate articleType articleTxt";
	  grid-template-columns: 20% 15% 65%;
	  grid-column-gap: 1px;
	  margin-top: 10px;
	  border-top: 1px solid #851800;
	  padding-bottom:10px;
	  padding-top:10px;
	  background: #FFF1ED;
	}


  
}








/**********************************************************************/
/*                               BUTTONS                              */
/**********************************************************************/


.btn_search {
  background-color: #FEFEFE;
  border: 1px solid #A30000;
  padding: 3px;
  border-radius: 7px;
  text-align: center;
  text-decoration: none;
  font-size:100%;
  color: #A30000;
  cursor: pointer;
}





.btn_readMore:hover {
  background-color: #DDDDDD;
  text-decoration: none;
  cursor: pointer;
}


.btn_container {
  position: relative;
  height:100px;
}



.btn_apply{
  display: inline-block;
  background-color: #FEFEFE;
  border: 1px solid #A30000;
  padding: 3px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  color: #A30000;
  margin: 4px 2px;
  cursor: pointer;
  float: left;
  border-radius: 7px;
}

.btn_apply:hover {
  background-color: #DDDDDD;
  text-decoration: none;
  cursor: pointer;
}


/**********************************************************************/
/*                               MODAL                              */
/**********************************************************************/

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.8);
      align-items: center;
      justify-content: center;
    }
    
    .modal-content {
      max-width: 80%;
      max-height: 80%;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    }
    
    .close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      font-weight: bold;
      color: white;
      cursor: pointer;
    }
    
    .close:hover {
      color: red;
    }
    
    
    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .gallery img {
      cursor: pointer;
      width: 150px;
      border-radius: 8px;
      transition: transform 0.2s;
    }
    .gallery img:hover {
      transform: scale(1.05);
    }