@charset "UTF-8";
/* no cache */



/* =========================================================
   BASE DU SITE
========================================================= */

body {
    background: url(images/fond.png) no-repeat center center fixed;
    background-size: cover;
    color: #F9CD71;
    margin: 0;
    padding: 0;
    font-family: 'Cinzel', serif;
}

img {
    filter: drop-shadow(0 0 6px rgba(217,183,107,0.25));
}


/* =========================================================
   TITRES
========================================================= */
.enTete,
.enTete-contact,
.enTete-presentation{
    text-align: center;
}

.enTete h1,
.enTete-contact h1,
.enTete-presentation  h1{
        font-size: 7vw;
        letter-spacing: 2.5px;

    }
.enTete p,
.enTete-contact p,
.enTete-presentation p{
        font-size:4vw;

    }
    .divider{
        width: 18vw;
        height: 0.1px;
        margin: 0px auto;
        background-color: #F9CD71 ;



    }

    .photo1 {
    display: flex;
    flex-direction: column;  /* empiler verticalement */
    justify-content: center;
    align-items: center;
    gap: 40px; /* espace entre les images */
}
    .photo2-left{display:none;}
    .photo1-right{width: 35%;
                    margin-bottom:15%;}
    .photo1-left{width: 35%;
                 margin-top: 5%;
                 margin-bottom: 5%;}





     .photo2 {text-align: center;}

     .photo2 a{
         font-size: 20px;
        color:#F9CD71;
        text-decoration:none;


     }




/*___________Presentation--------------*/

.menus,
.menue{
        display: inline-block;
        margin-top: 6vw;
        color:#F9CD71;
        text-align: center;
        text-decoration:none;
        }
.presentation-container{
    margin-left:6vw;
    margin-right:6vw;

}

.contact-container{
    margin-left:16vw;
    margin-right:16vw;
    letter-spacing: 0.12vw;
    }
.contact-container a{
    color:#F9CD71;
    text-decoration:none;
}

.enTete img{
        width: 25vw;
      text-align: center;
}
.bloc-bas img{
     width: 35vw;
     display: block;
     margin-left: auto;
    margin-right: auto;
}
.contact-logo{
    width: 27vw;
    margin-bottom:2.5vw;
}

/*============================================================
  PC version
==============================================================*/

/*====index====*/

@media (min-width: 769px){

.enTete h1{
     font-size: 3vw;
     padding-top: 2vw !important;
}

.enTete p{
     font-size:2vw;
}


.photo1{
    flex-direction: row;
    gap:10vw;
    margin-bottom:6vw;
}


.photo1-left{
    width:20vw;
    margin-top: -1vw;
    margin-bottom: 15%;
    margin-bottom: 0 !important;

}


.photo1-right{
    width:15vw;
    margin-top: 5vw;
    margin-bottom: 15%;
    margin-bottom: 0 !important;
}




/*--block2--*/

.photo2{
        display: flex;
        flex-direction: row;   /* image + liens côte à côte */
        align-items: center;   /* centres verticalement */
        justify-content: center; /* centres horizontalement */
        text-align: left;      /* liens alignés proprement */
        gap: 12.5vw;

}


.photo2-left{
    width:20vw;
    display:block;
     margin-right: 0vw;
    text-align:center;

}




.liens a{
    font-size: 2vw;
}
/*----presentation---*/

.enTete-contact,
.enTete-presentation{
        text-align: center;
        margin-top:.1vw;

}
.menus,
.menue{

        font-size: 1.3vw;
        color:#F9CD71;
        text-decoration:none;
        letter-spacing: 2px;
}
.enTete-contact  h1{
        margin-top: 2.5vw;
        font-size: 2vw;
        margin-bottom:2.5vw;
        letter-spacing: 2.5px;
}
.enTete-contact  img{

    width: 12vw;
    margin-bottom: 2.5vw;
}

.presentation-container{text-align: justify;
}
.presentation-container p{
     font-size: 1.6vw;
     max-width: 55vw;
     margin: 0 auto;
     line-height: 1.6;
     margin-bottom: 1.4vw;
}

.decor {
    width: 100%;
    margin: 4vw 0;
    text-align: center;
    color: #F9CD71;
    font-size: 2vw;
}

.decor::before {
    content: "──────────  ✦  ──────────";
    letter-spacing: 2px;
}

  /*-----contact----*/

.enTete-presentation  h1{
        margin-top: 3vw;
        font-size: 2vw;
        margin-bottom:2.5vw;
        letter-spacing: 2.5px;
}
.enTete-presentation  img{

    width: 14vw;
    margin-bottom: 6vw;
}

.contact-container{

    font-size: 1.6vw;
     width:55vw;
     margin: 0 auto;
     letter-spacing: 0.12vw;

}

.bloc-bas img{
    width:15vw;
    margin-top: 3.5vw;
}
.contact-container a{
    color: #F9CD71;
    text-decoration:none;
}

}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes flottement {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

@keyframes flottement-horizontal {
    0% { transform: translateX(0); }
    50% { transform: translateX(8px); }
    100% { transform: translateX(0); }
}

.flotte-vertical {
    animation: flottement 4s ease-in-out infinite;
}

.flotte-horizontal {
    animation: flottement-horizontal 4s ease-in-out infinite;
}
@keyframes flottement2-horizontal {
    0% { transform: translateX(-18px); }
    50% { transform: translateX(18px); }
    100% { transform: translateX(-18px); }
}
.flotte2-horizontal {
    animation: flottement2-horizontal 4s ease-in-out infinite;

}
@media (max-width: 768px) {
    .contact-container img {
        width: 70vw !important;
    }
}