@import url('https://fonts.googleapis.com/css2?family=Sixtyfour+Convergence&display=swap');
/*  "Sixtyfour Convergence", sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Updock&display=swap');
/*  font-family: "Updock", cursive;  */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Pacifico&display=swap');
/* font-family: "Fira Sans Condensed", sans-serif; */
*
{
margin-top:5px;
margin-left:auto;
margin-right: auto;
}
body
{
background-color: darkgrey;
background-image:url(oiseaux.gif);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:100%;
height:auto;
}
h1
{
text-align: center;
font-family: "Sixtyfour Convergence", sans-serif;
font-size:3px,2vw,18rem;
text-shadow:4px 2px 2px black;
letter-spacing:3px;
}
.logo
 {
  display:block;
  margin: auto;
 }
.logo:hover
{
    transition:4s;
    background-image:url(petit\ menu.png);
    background-position:top;
}

#menu-accordeon {
  padding: 3px;
  margin-left:center;
  list-style:none;
  text-align: center;
  width:430px;
  background-color:rgba(128, 128, 128, 0.976);
  font-size:clamp(1rem,1vw,5rem);
  margin-top:20px;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  font-size:clamp(1rem,1vw.,5rem);
}
#menu-accordeon li {
   background-color:#729EBF; 
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333a40fc 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40;
   font-size:clamp(1rem,1vw,10rem);
}
#menu-accordeon li li {
  max-height:0;
  overflow: hidden;
  transition: all .5s;
  border-radius:0;
  background: #444;
  box-shadow: none;
  border:none;
  margin:0;

} 
#menu-accordeon a {
 display:block;
 text-decoration: none;
 color: #fff;
 padding: 8px 0;
 font-family: verdana;
 font-size:1.2em;
 font-size:clamp(1rem,1vw,5rem);
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:clamp(1rem,1vw,5rem); 
  
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}
#menu-accordeon ul li a:hover
{ 
  color:blue;
}
div.deroulant
{
  height:20vh;
  width: 100%;
  display:flex;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
  overflow:clip;
  color:black;
  font-size:clamp(1rem,1vw,5rem);
}
 .presentation
{
    font-family: "Updock", cursive;  
    max-width:750px;
    font-size:clamp(1rem,2.5vw,10rem);
    text-align:center;
    border-color: aquamarine;
    background-color: #999999b9;
    border:5px ridge red;
    border-radius:5px;
    
}
img.boston,.cherie
{
width:400px;
height:400px;
}

.image-container {
    position: relative;
    display: flex;
    justify-content: center;
 }
img.boston,.cherie
{
width:400px;
height:400px;
}


div.image-container
{
    display:flex;
    justify-content: center;
    position:relative;
    perspective:1000px; /*ouvre la 3D*/
    
}
div img,.boston,.cherie
{
    display: flex;
    justify-items: center;
    position: relative;
    perspective:1000px;
}
div.image-container:hover .cherie
{
transform:rotateY(0deg);
}
div.image-container:hover .boston
{
transform:rotateY(-180deg);
}
img.boston,.cherie
{
transition: transform 8s ease;
position:absolute;
}
div .boston,.cherie
{
transition: transform 8s ease;
position:absolute;
}

img.boston
{
z-index:1;  
backface-visibility:hidden; /*cache l'image 1 en hover*/
}

img.cherie
{
backface-visibility:hidden; /*pour cacher la face 2*/
transform:rotateY(-180deg);
}
.suite
{
  max-width:780px;
  font-size:1rem;
  text-align:center;
  background-color: rgba(240, 255, 240, 0.635);
  font-family: "Fira Sans Condensed", sans-serif;
  border-radius:15px;
  margin-top:450px;
}
iframe
{
    width: 380px;
    height:360px;
    margin:auto;
}


.atlas
{
width:380px;
height:360px;
border:solid 8px red;
display:flex;
justify-content:center;
align-items: center;
}
div ,.atlas
{
margin:auto;
}