@charset "utf-8";
/* CSS Document */

/*
beige : #CFAB79;
gris typo : #333333 */



/* écran cible ordi : 1200px - tablette : entre 768px et 1200px - smartphone : <768px */



/*****************************************
                     ENSEMBLE DES PAGES
**********************************************/

*{
	margin: 0px;
	padding: 0px;
}

html, body{
	font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
	color: #333333;
	
}

#page{
	width: 50%; /* écran cible:1200px */
	margin: 0 auto;
	display: flex;
	flex-direction: column;	
		
}

#titre-page{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 1.00em; /* 16px */
    font-weight: 600; /* demi-bold */
	text-align: right;
	margin-bottom: 0.88em;/* 14px */
}

#wrapper{
	width: 100%; /* 100% de #page */
	display: flex;
	flex-direction: column;
}

#retour{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
#fleche{
    width: 100px;
    height: 200px;
}
#fleche img{
    width: 100%;
}
.visuel img{
	width: 100%;
}

a{
	color: #333333;
	text-decoration: none;
}
a:hover{
	color:#CFAB79; 
	text-decoration: none;
}




/**********************************************************************
                     ENSEMBLE DES PAGES / HEADER
***********************************************************************/
header{
	width: 100%;
	height:140px;
	padding:1.88em 0em 0.75em ; /* 30px 0px 65px 0px */
	display: flex; /* valeur par défaut : se met en row */
	justify-content:space-between;
	 
	
}

#logo{
	width:450px;
    background-image: url("../imgs/Logo-Cairn.svg");
    background-repeat: no-repeat;
    
}



#logo img{
	width: 100%;
}
#menu{
	align-self: flex-end;
    
}
	
.menu ul{
    list-style:none;
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	
	
	
}
.menu ul li {
	font-size: 0.75em;
	margin-right: 8%;
}

.menu ul a{ 
	text-decoration: none;
	color: #333333;
}
.menu ul a:hover {color: #CFAB79;
}
.menu ul a:visited {color: #CFAB79;
}

.menu img{
	display: none;
	}

#ariane{
	padding-bottom: 4.06em;
	
	font-size: 10px;
}




/*****************************************
                    FIL
**********************************************/
#fil{
	width: 50%; /* 50% de #page */
	margin: auto;
	padding-top: 0.5%;
	padding-bottom: 2%;
	
	color: #CFAB79; 
	
	
	
}

/*****************************************
                     ACCUEIL
**********************************************/

/* header : idem pour toutes les pages */
/* #wrapper : idem pour toutes les pages */
/* #titre-page : idem pour toutes les pages */ 

#slider{
	margin-bottom: 2.00em; 
}
#slider img {
	width: 100%;/* 100% de slider */
	
}
#intro{
    margin-bottom: 1.0em;
}


#intro h3 {
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 0.75em; /* 12px */
	font-weight: normal;
	
	
}
.encours{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 1.00em; /* 16px */
	font-weight:600;
	text-align: right;
	margin: 30px 0px 10px 0px;
}

aside{
	display: flex;
	flex-direction: column;
}

aside img{width: 100%;
	
}

.actus{
	display: flex;
	flex-direction: column;
}
figcaption{
	display: flex;
	flex-direction: row;
    justify-content:flex-start;
	margin: 0.25em 0 1.0em 0;
	
}


.LegNom{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-weight: 600;
	margin-right: 0.50em; /* 8px */
	font-size: 0.88em; /* 14px */
		
	}
.LegNom a{
	color: #333333;
	text-decoration: none;
}
.LegNom a:hover{
	color:#CFAB79; 
	text-decoration: none;
}
	
.LegLieu{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 0.88em; /* 14px */
	}


/*****************************************
                     PRÉSENTATION
**********************************************/


/* header : idem pour toutes les pages */
/* #wrapper : idem pour toutes les pages */

.equipe{
	margin-bottom: 2.00em;
	
}
.equipe img{
	width: 100%;
	
}
.presentation h2{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 0.75em; /* 12px */
	font-weight: 600;
	color: #CFAB79;
	margin-bottom: 0.88em; /* 14px */
}
.presentation h3, p{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 0.75em;
	font-weight: 400;
	
}
.nom{
	margin-bottom: 1.25em;
}





/*****************************************
                     TYPE PROJETS 
**********************************************/

/* header : idem pour toutes les pages */
/* #wrapper : idem pour toutes les pages */
/* figcaption : idem accueil */
/* .legNom : idem accueil */





/*****************************************
                     FOOTER
**********************************************/
footer{
	margin-top: 12.50em; 
	border-top: #CFAB7A thin solid;
}
#mentions{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-weight: 400;
	font-size: 0.63em; /*10px */
    
}


/*****************************************
                     DETAIL DES PROJETS
*********************************************/
#titre-detail{
	display: flex;
	flex-direction: row;
	justify-content:flex-start;
    align-self: flex-end;
    margin-bottom: 10px;
    
	
}
#titre-detail h1{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-weight: 600;
	font-size: 1.00em; /* 16px */
	margin-right: 0.50em; /* 8px */
		
}
#titre-detail h2{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-weight: 400;
	font-size: 1.00em; /*16px */	
   
}

#detail{
	margin: 1.20em 0em;
}



.ours{
	display:flex;
	flex-direction: row;
	justify-content:space-between;
	
}
.ours h4{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	width : 18%;
	color : #CFAB79;
	font-size: 0.75em; /* 14px */
	font-weight: 600;
	margin-right: 0.50em; /* 8px */
	
		
}
.ours h5{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	width: 82%;
	font-weight: 400;
	font-size: 0.75em; /* 14px */
	
}
#masquer{
    
    display: flex;
    flex-direction: column
}
/*h6{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 0.88em;
	font-weight: 600;
	margin-bottom: 0.50em;
    
    
}*/
h6 a:hover{
    color: #CFAB79;
}

#cache /*texte de en savoir plus*/
{
    display:none;
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 0.75em;
	font-weight: 400;
	margin-bottom: 1.0em;
}
#afficher:target #cache {
   display:block
}
.masquer {
   display:none;
}
#afficher:target .masquer {
   display:inline;
}
#afficher:target .afficher {
   display:none;
}






    
   


/*****************************************
                     CONTACT
*********************************************/
/* header : idem pour toutes les pages */
/* #wrapper : idem pour toutes les pages */

#contact{
	margin-top: 32px;
}
#contact h2{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 0.75em; /* 12px */
	font-weight:600;
	color: #CFAB79;
	margin-bottom: 0.50em; /* 8px */
}
#contact h3{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 0.75em; /* 12px */
	font-weight: 600;
	
}

#contact p{
    font-family: futura-pt, sans-serif;
    font-style: normal;
	font-size: 0.75em; /* 12px */
	margin-bottom: 0.75em; /* 12px */
}

iframe{
width : 100%;
height: 37.500em; /*(600px;)*/
margin: 2.00em 0 ;
}


/*****************************************
                     MENTIONS LÉGALES
**********************************************/

#ml-infos{
    margin-bottom: 1%;
}
.ml-titre{
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 600;
	margin-right: 0.50em; /* 8px */
	font-size: 0.88em; /* 14px */  
}
.ml-soustitre{
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-size: 0.88em; /* 14px */
    color: #CFAB79;
    
    
}
.ml{
    margin-bottom: 0.88em;/* 14px */
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-size: 0.75em; /* 14px */
    
}



/*****************************************
                     AFFICHAGE TABLETTE
*********************************************/

@media screen and (min-width:768px) and (max-width: 1200px)
	{
			#page{
				width: 80%;
				}
			.menu ul{
    			list-style:none;
				display: flex;
				flex-direction:column;
				justify-content: center;
				align-items: flex-end;	
				}
        #titre-detail{
	            flex-direction:column;
	            }
			
	}/* /@media screen and (min-width:768px) and (max-width: 1200px) */	




/*****************************************
                     AFFICHAGE SMARTPHONE
*********************************************/
	
@media screen and (max-width:767px)
		{
			#page{	
				width: 95%; 
				}
			figcaption{
				display: flex;
				flex-direction: column;
				margin: 4px 0 16px 0;	
				}
            #logo{
	            width:450px;
                background-image: url("../imgs/Logo-Cairn-smartphone.svg");
                background-repeat: no-repeat;
                }
           
			.menu ul{
    			list-style:none;
				display: flex;
				flex-direction:column;
				justify-content: center;
				align-items: flex-end;	
				}
			#titre-detail{
				flex-direction:column;
				}
            #titre-detail h1{
                margin-right: 0em; /* 8px */
		
                }
            .ours{
	            display:flex;
	            flex-direction: column;
	            justify-content:flex-start;
                }
            .ours h4{    
	            width : 100%;
	            margin-right: 0em; /* 8px */
                }
            .ours h5{
	            width: 100%;
                }
           
		}/* /@media screen and (max-width:767px) */