* {
box-sizing: border-box;
}
/* -----
// BODY
// ----- */
body {
font-size:0.9rem;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: black;
margin:0px;
line-height: 1.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.5rem;
}
h1 {
font-size: 2.5rem;
font-weight: bold;
line-height: 1.5rem;
color: #593d87;
}
h2 {
font-size: 2rem;
font-weight: bold;
line-height: 2rem;
color: #593d87;
}
a {
text-decoration: none;
}
a:link, a:visited {
/* color: #8094d6; */
color: #593d87;
}
a:hover, a:active {
color: #FF9933;
}
footer {
font-size: 0.7rem;
font-style: italic;
}
/* -------
// HEADER 
//--------*/
header {
color: #593d87;
background-color: lightblue;
padding: 0.5rem;
flex-direction: column;
justify-content: space-between;
align-items: center;
max-width:150rem;
}
header h1,h2 {
text-align: center;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;

}
header li {
margin: 0 0.5rem;
}
header a {
text-decoration: underline;
color: #593d87;
}
header img {
align-self: flex-start;
float: right;
}
/*  --------
// main
//--------- */
main {
padding: 0.5rem;
display:flex;
flex-direction: row;
justify-content: space-around;
align-content: flex-start;
flex-wrap: wrap;
}
section {
margin-bottom: 1rem;
justify-content: left;
/* min-width:200px; */
/* max-width:550px; */
max-width:35rem;
}
section h3 {
text-align: left;
font-size: 1rem;
margin-bottom: 0.5rem;
color: #593d87;
}
section p {
font-size: 1.5rem;
line-height: 1rem;
}
#Images {
	flex-direction: row;
}
#Images ul {
	list-style-type: none;
    padding: 0;
	flex-direction:row;
	flex-wrap:wrap;
	display: flex;
	justify-content: space-around;
}
#Images li {
            margin: 5px; 
        }

img a {
margin: 0.8rem;
text-decoration: none;
}
#d4 {
	font-size: 0.8rem;
	color:  #FF9933;
	font-style: italic;
	font-weight: bold;
	margin-top: 1rem;
}

/* ---------------
// Contact Styles
// --------------- */
#Suggestions {
padding: 1rem;
}
#Suggestions h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input,
textarea {
display: block;
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}

button {	
background-color: #593d87;
color: #fff;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}

button:hover {
background-color: #FF9933;
}

 .text-gradient {
   /* width: 400px;  Ajustez la largeur */
    height: 200px; /* Ajustez la hauteur */
    overflow: hidden;
    position: relative;
  }

 .text-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Hauteur du dégradé */

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
  }

/*--------------
// Survol Images
//--------------- 
// Grande image */  
  figure.image1 {
        position: relative;
        overflow: hidden;
        margin: 10px;
        min-width: 458px;
        max-width: 470px;
        max-height: 400px;
        width: 100%;
        color: #000; 
        text-align: center;
      }
  figure.image1 * {
        transition: all 0.3s ease-in-out;
      }
     figure.image1 img {
        max-width: 100%;
        position: relative;
        opacity: 1;
      } 
     
	 #texte1 {
        position: absolute;
        left: 5px;
        right: 5px;
        background: #fff;
      	transform: translate(0, -50%);
		padding: 0px;
        margin: 0;
        bottom: 2%;
		opacity: 0.8;
        font-size: 0.8rem;
	    text-align: center;
		display:none; 
      }
    figure.image1:hover img,
      figure.image1.hover img {
       opacity: 0.8;
       transform: scale(1.5);
      }
  	  figure.image1:hover #texte1,
      figure.image1.hover #texte1 { 
	  display: inline-block;
	  }
/*----------------
// Petites Images
//--------------- */
figure.image2 {
        position: relative;
        overflow: hidden;
        margin: 10px;
        min-width: 100px;
        max-width: 120px;
        max-height: 150px;
        width: 100%;
        color: #000; 
        text-align: center;
      }
      figure.image2 * {
        transition: all 0.3s ease-in-out;
      }
     figure.image2 img {
        max-width: 100%;
        position: relative;
        opacity: 1;
      } 
    
	 .texte2 {
        position: absolute;
        left: 5px;
        right: 5px;
        background: #fff;
      	transform: translate(0, -50%);
		padding: 0px;
        margin: 0;
        bottom: 2%;
		opacity: 0.8;
      font-size: 0.8rem;
	  text-align: center;
		display:none; 
      }
    figure.image2:hover img,
      figure.image2.hover img {
       opacity: 0.9;
       transform: scale(1.2);
      }
  	  figure.image2:hover .texte2,
      figure.image2.hover .texte2 { 
	  display: inline-block;
	  }
/*----------------
// Vignettes
//--------------- */
figure.image3 {
        position: relative;
        overflow: hidden;
        margin: 10px;
        min-width: 130px;
        max-width: 150px;
        max-height:200px;
        width: 100%;
        color: #000; 
        text-align: center;
      }
      figure.image3 * {
        transition: all 0.3s ease-in-out;
      }
     figure.image3 img {
        max-width: 100%;
        position: relative;
        opacity: 1;
      } 
    
	 .texte3 {
        position: absolute;
        left: 5px;
        right: 5px;
        background: #fff;
      	transform: translate(0, -50%);
		padding: 0px;
        margin: 0;
        bottom: 2%;
		opacity: 0.8;
      font-size: 0.7rem;
	  text-align: center;
		display:none; 
      }
    figure.image3:hover img,
      figure.image3.hover img {
       opacity: 0.9;
       transform: scale(1.5);
      }
  	  figure.image3:hover .texte3,
      figure.image3.hover .texte3 { 
	  display: inline-block;
	  }
/* -------------
// DIALOG
// ------------ */
dialog {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

dialog p {
font-size: 0.9rem;
line-height: 1rem;
}
#myDialog1{
	opacity: 0.9;
    max-width: 300px; 
}	

#B2{	
/* background-color: #593d87; */
background-color: lightblue;
color: #fff;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}

#B2:hover {
background-color: #FF9933;
}

/* ------------
// MEDIA screen
// ------------ */

/* @media screen and (min-width: 481px) { */
@media only screen and (min-device-width: 30rem) and (max-device-width: 150rem) and (orientation:portrait){
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center; 
flex-shrink : 1;
}
nav {
/* flex: 2; */
flex-shrink : 1;
}
main {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}

section {
/* flex: 2; */
flex-shrink : 1;
margin: 0 0.8rem;
}
.img a {
flex-shrink : 1;
margin: 0.8rem 0;
}
}