/* CSS Document */

html {
	font-size: 100%;
	clear: both;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box}	
 
 body {
	width: 100%;
	background-color: #fff;
	margin:0;
	overflow-x: hidden}
	

	
/*
 * CADRES
 */

.container {  
	display: grid;
	grid-template-areas:	"a a"
							"b c"
							"d d";
	grid-template-columns: 2fr 1fr;  
	grid-gap: .5rem;
	font-family: 'Molengo', Georgia, Times, serif}

.header {
	grid-area: a;
	font-size: 1.3rem;
	font-weight: 400;
	text-align: center}

.content {  
	grid-area: b;
	font-weight: 400;
	margin: 3rem 0 0 4rem;
	font-size: 1em;
	line-height: 1.4rem;
	text-decoration: none}

.aside {
	grid-area: c;
	margin: 3rem 4rem 0 0 ;
	font-size: 1.3rem;
	line-height: 1.4rem;
	font-weight: 400}

.footer {
	grid-area: d;
	text-align: center;
	font-size: .8rem;
	font-weight: 400;
	color: #848484}
 

 
/*
 * TITRES
 */

.header h1 {
	font-size: 1.7rem;
	line-height: 0.9rem;
	font-weight: 400;
	color: #000000}
	
.header p {
	margin-top: -10px}	

h2 {
	font-size: 1.5rem;
	line-height: 1.3rem;
	font-weight: 400;
	color: #000000}
 
h3 {
	font-size: 1.3rem;
	line-height: 1.3rem;
	font-weight: 400;
	color: #000000}
 

.titre:after {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: #000000 transparent transparent;
	border-image: none;
	border-style: solid;
	border-width: 7px;
	content: "";
	height: 0;
	left: 50%;
	margin-left: -7px;
	position: absolute;
	top: 100%;
	width: 0}
	
.titre {
	background-color: #000000;
	color: #fff;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 1px;
	margin-bottom: 25px;
	padding: 8px 0;
	position: relative;
	text-align: center;
	text-transform: uppercase}
 

 
/*
 * TEXTES ET IMAGES
 */
 
.bold {
	font-weight: bold}
	
.italic {
	font-weight: italic}
	
.center {
	text-align: center}

.float {
 float: right;
 list-style-type: none}

img {
	max-width: 100%;
	height: auto;
	width: auto}
 
.tooltip {
	position: relative;
	display: inline-block}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 140px;
	background-color: #179E9A;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: 20px;
	left: 110%}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent #179E9A transparent transparent}

.tooltip:hover .tooltiptext {
	visibility: visible}

	

/*
 * PHOTOGRAPHIES
 */ 

*,*::after,*::before{box-sizing:border-box}

img{max-width: 100%}
	
	
.diapo{
	
max-width:800px;
padding:0;
margin:auto;
list-style-type: none;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
gap:1rem;
	
	}
	
.diapo li >a{display: block;}
  
.diapo li >a img{

display:block;
width: 100%;
object-fit: cover;
aspect-ratio: 9/10;
box-shadow: 0 0 5px hsla(0,0%,0%,.4)
	
	}


/*lightbox*/

/*description image*/
.des{

position: absolute;
left: 0;
right:0;
bottom: 0;

	
	}


/* lightbox */	
	
.trans-image{
	
display:none;
opacity:0;
transition:display .8s,opacity .8s;
	
}
	
	
.trans-image:target{


display: flex;
background: hsla(0,0%,0%,.8);
inset:0;
position: fixed;
opacity:1;

}
	
.trans-image div{
	
margin:auto;
position:relative;
	
	}

	
.trans-image:target div img{

max-height: 80vh;


	
	}	
	
.suivant,
.precedent{

width: 3vmin;
aspect-ratio: 1;
margin-top: -1.5vmin;
top: 50%;
position: absolute;
border-width: .5vmin .5vmin 0 0;
border-style: solid;
border-color: white;

	}	
	
 .precedent{
	
rotate:-135deg;
left: 1rem;
	
	}

	
 .suivant{

right: 1rem;
rotate:45deg;
	
	}
	
  .ferm{

display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 1rem;
top: 1rem;
width: 5vmin;
aspect-ratio: 1;	
	}
	
.ferm::after {
	
  rotate:-45deg;
}
	
.ferm::before, 
.ferm::after {
	
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #FFF;
  border-radius: 4px;
}
	
.ferm::before {
	
rotate:45deg;
	
}	
	

.trans-image:target div .des{
	
padding: 10px;
color: #fff;
text-align: center;
background: hsla(0,0%,0%,.5);	

	
	}

@supports not (aspect-ratio: 1)	{
	
.suivant,
.precedent{height:3vmin}
.ferm{height:5vmin}
	
	}
	
	
@starting-style {

.trans-image:target {

opacity:0

}}



/*
 * LIENS
 */

a:link {color: #179E9A;}
a:visited {color: #179E9A;}
a:hover {color:#000000;}

a {text-decoration: none;}

.nav {
	list-style-type: none;
	display: block;
	text-align: left;}

.nav li { 
	margin-bottom: 1em;} 

.nav a:link {color: #000000;}
.nav a:visited {color: #000000;}
.nav a:hover {color: #179E9A;}
.nav #en-cours a {color: #179E9A;} 

.main-nav a:link {color: #000000;}
.main-nav a:visited {color: #000000;}
.main-nav a:hover {color:#179E9A;}
.main-nav #en-cours a {color: #179E9A;}
    
.main-nav {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	border-top: 1px solid rgba(0, 0, 0, 0.1);}
    
input {
	position:absolute;
	left:-99999px;}
	
.cadre ul {
	display: grid; 
	transition: grid-template-rows .4s;	
	visibility: hidden;
	grid-template-rows: repeat(5,0);
	grid-template-columns: 1fr}

.cadre ul {
	list-style-type: none;
	padding: 0;
	margin: 0} 
 
.cadre li a {
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 8px 0;}
	
label[for="menu"] {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #179E9A;}
	
label[for="menu"]:before {
	content:'☰';}
    
#menu:checked ~ label[for="menu"]:before {
	content:'╳'}

#menu:checked ~ .cadre ul {
	visibility: visible;
	grid-template-rows:repeat(5,calc(160px/5));}


/*
 * TABLETTES ET TEL
 */ 	

    
@media screen and (max-width:37.5rem) {} 


@media screen and (min-width:48.125rem) {
    
label[for="menu"]{	
	display: none}
	
#menu:checked ~ .cadre, .cadre, article ul {
	grid-template-columns: initial}	
	
.cadre ul {	
	visibility:visible;
	grid-template-rows:initial;}
	
#menu:checked ~ .cadre ul {
	grid-template-rows: auto}
	
#menu:checked ~ .cadre{	
	grid-gap: 0}
	
.cadre ul {
	display: grid;
	grid-template-columns: repeat(5,1fr);
	margin: 0 10%}}
	


@media only screen and (max-width:62.75rem) {
	
.container {
    grid-template-areas: "a a" "b b" "c c" "d d";
    grid-template-columns: 1fr}

.content { 	
	margin: 0 1rem}

.content_foto {
	margin: 0 -1rem}	

.aside {	
	margin: 0 2rem 0 -1rem}
		
p {
	word-wrap: break-word; 
	-webkit-hyphens: auto; 
	-moz-hyphens: auto;
	hyphens: auto;}}