/* dossier 6 Chemins*/

.chemin  {

display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 40% 40%;
  grid-gap: 1rem;
  grid-template-areas:
      "titre  titre"
      "image  texte";
}

.titre {
grid-area: titre;

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  color: #000000;
  border-radius: 15px;
  border: 3px solid grey;
  padding: 15px;
  margin: 15px;

}

.image {
grid-area: image;



}

.texte {
grid area: texte;


}
/* slideshow simple */

/* fin slideshow */

.boutonsuite {
width: 15%;
margin-left: auto; 
margin-right: auto;
}

.imageagauche {
float:left; 
margin:0 5px 0 10px;
}

.containerindex 
{
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 200px 500px 500px;
  grid-template-rows: 260px 500px 1fr 300px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
       "sidebar content-3 content-4"
      "footer footer footer";
}

.containerindexarchive01 
{
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 200px 500px 500px;
  grid-template-rows: 260px 1fr 300px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
       "sidebar content-3 content-4"
      "footer footer footer";
}

.containerdossier 
{
display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 260px 1fr 300px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header"
      "content-1 content-1"
      "footer footer";
}

.containerarchives {
display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 260px 3030px 900px 1fr 300px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "content-1 content-1 content-1"
      "content-2 content-2 content-2"
	 "content-3 content-3 content-3"
      "footer footer footer";
}
      
.dossier{
display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 260px 1fr 300px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "content-1 content-1 content-1"
      "footer footer footer";
}

.listedossier{

display: flex column;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  color: #000000;
  border-radius: 15px;
  border: 3px solid grey;
  padding: 15px;
}


.listedossier h1 {
font-size: 30px;
text-align: center;
}

.listedossier h3 {
font-size: 15px;
text-align: center;
}


.histoire{
display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 260px 400px  1fr 1fr 300px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header "
      "content-1 content-1"
      "content-2 content-3"
      "content-4 content-5" 
      "footer footer";
  }

.photoancienne{
display: grid;
 
 grid-template-columns: 1fr 1fr;
  grid-template-rows: 260px 1fr 300px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header "
      "content-1 content-1"
       "footer footer";
   }   


.header {
  grid-area: header;
  width: 1200px;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.content-4 {
  grid-area: content-4;
}

.content-5 {
  grid-area: content-5;
}

.content-6 {
  grid-area: content-6;
}

.footer {
  grid-area: footer;
}
      
/* OTHER STYLES */

body {
  background-color: white;
  display: flex;
  justify-content: center;
  padding: 50px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 
  "Segoe UI Symbol";
}

.item {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  color: #000000;
  border-radius: 15px;
  border: 3px solid grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  /*--justify-content: center;--*/
  /*--align-items: center;--*/
  /*--font-weight: bold;--*/
}

.header {
  background-image: url(images/image01.jpg);
  background-color: white;
  padding: 15 px;
  display: flex;
  flex-direction: column;
}

.sidebar {
  background-image: /*--linear-gradient(203deg, #3EDFD7 0%, #29A49D 90%)--*/ white;
}

.content-1,
.content-2,
.content-3, 
.content-4,
.content-5,
.content-6
 {
  background-image: linear-gradient(130deg, #fcf9f9 0%, #e6e3e3 60%,  #a08f8f 100%); 
  /*--linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);--*/ 
}

.footer {
  background-color: #e9e9e9;
  /*--background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);--*/
}


h1 {
font-family:georgia;
text-shadow:2px 2px 5px gray;
font-size:40px;
color:blue; /* Les paragraphes seront en bleu */
background-color:transparent;
text-align:center;
}
h2 {
font-family:georgia;
text-shadow:2px 2px 5px gray;
font-size:30px;
color:navy;
background-color:transparent;
padding:2px;
text-align:left;
}

h3 {
font-family:arial narrow;
font-size:25px;
color:black;
background-color:transparent;
text-align:center;
}

h4 {
font-family:georgia;
font-size:25px;
color:white;
background-color:transparent;
text-align:center;
}

h5 {
font-family:georgia;
font-size:18px;
color:black;
background-color:transparent;
text-align:left;
}

p {
font-family:georgia;
font-size:1.1rem;
color:black;
background-color:transparent;
text-align:justify;
}


/*-- lire la suite --*/
.menusuite
{
font-family: arial;
font-size: 20px;
display: inline-block;
}

/*-- boutons  verts --*/

a.menusuite1 
{
display: inline-block;
text-decoration: none;
font-family: arial,sans-serif;
font-weight:bold;
font-size: 1.2em; 
width: 350px; 
height: 40px; 
padding-top: 5px; /*permet le centrage vertical*/ 
text-align: center; 
color: #000; 
background: #459c43; 
border-radius: 5px;/**/ 
text-shadow: 0px 2px 2px rgba( 255, 255, 255, 1);/**/
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 
			0 -1px 0 rgba( 255, 255, 255, 0.4);/**/
}

a.menusuite1:hover   
{
 color: #fff; 
 background: #459c43; 
 background: linear-gradient( #70fb6c, #fff);
}

a.menusuite1:active
{ 
color: #fff; 
background: #459c43; 
background: linear-gradient( #70fb6c, #fff); 
box-shadow: 1px 1px 10px black inset, 
			0 1px 0 rgba( 255, 255, 255, 0.4); 
} 

/*-- boutons liens rouge --*/

a.menusuite2 
{
display: inline-block;
text-decoration: none;
font-family: arial,sans-serif;
font-weight:bold;
font-size: 1.2em; 
width: 350px; 
height: 40px; 
padding-top: 5px; /*permet le centrage vertical*/ 
text-align: center; 
color: #000; 
background: red; 
border-radius: 5px;/**/ 
text-shadow: 0px 2px 2px rgba( 255, 255, 255, 1);/**/
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 
			0 -1px 0 rgba( 255, 255, 255, 0.4);/**/
}

a.menusuite2:hover   
{
 color: #fff; 
 background: red; 
 background: linear-gradient( #ffbbbb, #fff);
}

a.menusuite2:active
{ 
color: #fff; 
background: red; 
background: linear-gradient( #ffbbbb, #fff); 
box-shadow: 1px 1px 10px black inset, 
			0 1px 0 rgba( 255, 255, 255, 0.4); 
} 

/*-- boutons du menu en haut de page --*/

.menu
{
font-family: georgia bold;
font-size: 20px;
display: inline-block;
}


a.menu1  
{
display: inline-block;
text-decoration: none;
font-family: Georgia,sans-serif;
font-weight:bold;
font-size: 1.2em; 
width: 190px; 
height: 40px; 
padding-top: 5px; /*permet le centrage vertical*/ 
text-align: center; 
color: #fff; 
background: #000a9b; 
border-radius: 5px;/**/ 
text-shadow: 0px 2px 2px rgba( 255, 255, 255, 1);/**/
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 
			0 -1px 0 rgba( 255, 255, 255, 0.4);/**/
}

a.menu1:hover   
{
 color: #fff; 
 background: #888fff; 
 background: linear-gradient( #888fff, #fff);
}

a.menu1:active
{ 
color: #fff; 
background: #888fff; 
background: linear-gradient( #888fff, #fff); 
box-shadow: 1px 1px 10px black inset, 
			0 1px 0 rgba( 255, 255, 255, 0.4); 
} 

/*série image zoomées dans index*/ 

.zoom 
{
height:300px;
display: flex;
justify-content: space-between;
}
.zoom p 
{
text-align:center;
}
.zoom img 
{
width:100px;
height:75px;
}
.zoom img:active
 {
width:400px;
height:300px;
}

.flotte 
{
float:right;
}	

.contenu {
  display:flex;
  justify-content: space-around;
  
}

/*animation du bouton suite*/

#suite a {
	display: inline-block;
	background: url("suitebalay.jpg") no-repeat;
}

#suite a:hover img {
	visibility: hidden;
}


/*animation du bouton webmaster*/

#webmaster a {
	display: inline-block;
	background: url("images/logomoigris.png") no-repeat;
}

#webmaster a:hover img {
	visibility: hidden;
}




/*animation du bouton agglo*/

#agglo a {
	display: inline-block;
	background: url("images/logoagglogris.png") no-repeat;
}

#agglo a:hover img {
	visibility: hidden;
}

/*animation du bouton cd02*/

#cd02 a {
	display: inline-block;
	background: url("images/logoaisnegris.png") no-repeat;
}

#cd02 a:hover img {
	visibility: hidden;
}


/*animation du bouton région*/

#region a {
	display: inline-block;
	background: url("images/logohdfgris.png") no-repeat;
}

#region a:hover img {
	visibility: hidden;
}



#pieddepage{
display: flex;
flex-wrap: wrap;
justify-content: center;
background: blue;
text-align: center;
}

/*animation du bouton scrolltop*/

#scroll_to_top {
  position: fixed;
  width: 35px;
  height: 25px;
  bottom: 50px;
  right: 30px;
}
#scroll_to_top img {
  width: 35px;
}

/*diaporama photos anciennes*/	

.cadre-diapo{
margin-top: 50px;
margin-left: 100px;
min-height: 600px;
max-height:800px;
max-width:900px;
position:relative;
	}

.cadre-diapo1{
margin-top: -50px;
margin-left: 100px;
min-height: 600px;
max-height:800px;
max-width:900px;
position:relative;
	}	
	
.diapo {
	
opacity:0;
position:absolute;
left:50%;
top:50%;transform:translate(-50%,-50%);
transition:opacity 1s;
width:80%;
max-width:900px;	
}
	
.diapo1 {
	
opacity:0;
position:absolute;
left:50%;
top:50%;transform:translate(-50%,-50%);
transition:opacity 1s;
width:80%;
max-width:900px;	
}


 button{	
border: none;
cursor: pointer
}
	
.precedent ,
.suivant{
color: silver;
transition:color .4s linear;
top:50%;transform:translatey(-50%);
padding:.5rem;
font-size:2rem;
background:#eee;
position:absolute	
	}

.precedent{left:0}
.suivant{right:0}

.precedent:hover ,
.suivant:hover{color:#555}

#noel{
	display: flex;
	}


/*animation du bouton corbeau*/

#corbeau a {
	display: inline-block;
	background: url("images/lettrecorbeauc.jpg") no-repeat;
}
	
#corbeau a:hover img {
	visibility: hidden;
}