/*CSS AMARRE SEPT2023*/

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

html 
{font-family: ABeeZee, Kosugi Maru}

.titre_section
{color:#71130B ;font-size:200%}

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

.txt
{color:#555555 ;font-size:90%; line-height:1.8;}



.boldtxt
{ color:#555555 ;font-size:75%; line-height:1.2; font-weight:bold}

.path
{ color:#555555 ;font-size:70%; letter-spacing:0.07em}

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



.defaultContentArea{
	background: #FEFEFE;
	padding-right:30px;
	padding-left:20px;
}

.defaultMarginTxt{
	padding-right:30px;
	padding-left:10px;
	padding-bottom: 20px;

}

.article_title{
  color:#DAC79C ;
  font-size:200%;
  padding-bottom: 8px;
  line-height:1.5;
}




.article_content{
  color:#555555 ;
  font-size:100%;
  text-align: justify;
}


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

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

A:hover{
	text-decoration: underline;
}


A.foot:link{
	color:#DAC79C;
	text-decoration:none;
}

A.foot:visited{
	color:#DAC79C;
	text-decoration:none;
}

A.foot:hover{
	text-decoration: underline;
}


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


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


#pageHeader {
  grid-area: header;
}

#pageFooter {
  grid-area: footer;
}

#mainArticle { 
  grid-area: article;      
}


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

#articleRight { 
  grid-area: articleRight; 
  margin-left:20px;
  margin-right:20px;
} 

#articleSpace { 
  grid-area: articleSpace;
  background-color: #6D071A; 
  width:2px;

} 


article {
  background: #FAFAFA;
}





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

body { 
  background-color: #DAC79C;
  display: grid;
  grid-template-areas: 
    "header"
    "article"
    "footer";
  grid-template-rows: 130px auto 60px;  
  grid-template-columns: 1fr;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  height: 100vh;
  margin: 0px 15% 0px 15%;
}  


footer {
  background-color: #6D071A;
  padding-right: 20px;
  padding-top: 20px; 
  text-align: right;
}


header {
  margin: 0px;
  position: relative;
  background-color: #6D071A;
}


.theArticleContainer {
  display: grid;
  grid-template-areas: 
    "articleLeft articleSpace articleRight";
  grid-template-columns: 75% auto 25%;
  margin: 0px
}














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


.responsiveLogo { 
  width: 80%;
  height: auto;
  max-width: 450px;
  bottom: 0px; 
  top: 28px; 
  left: 20px;
  margin: 0;
  position: absolute;
}

/* Stack the layout on small devices/viewports. */
@media all and (max-width: 800px) {
	
  body { 
    margin: 0;
 }
 
  .responsiveLogo {
  width: 100%;
  height: auto;
  max-width: 350px;
  bottom: 0; 
  top: 35px; 
  position: absolute;
 }
 
 #articleImg { 
  grid-area: articleImg; 
  margin-left:10px;
  margin-bottom:10px;
  background: #EEEEEE;
} 

 .theArticleContainer {
  grid-template-areas: 
    "articleLeft"
    "articleRight";
  	grid-template-columns: 1fr;
 }
 
  
}






/* Stack the layout on large screen. */
@media all and (min-width: 1400px) {
  body { 
    justify-content: center;
    grid-template-columns: 1000px;
    margin: 0px;
 }
}