/*pages individuelles*/

/*carte*/
.conteneurcarte{ 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3,1fr);
    max-width:1000px;
    margin: 2% auto;
    overflow-x:hidden;
}
.presentation_carte{
    max-width: 900px;
    margin: 0 auto;
    padding:0 3% 4% 3%;
    display: flex;
    flex-direction: row;
}
.presentation_carte p{
    margin: 6%;
    text-align: left;
}
.vignette{
    padding-bottom: 3%;  
    text-align: center;
    margin: 2% auto;
}
.imagevignette{
    box-shadow: 6px 5px 5px black;
}

/*modal carte*/
.modal {
    max-width:100%;
    max-height:none;
    visibility:hidden;
    opacity:0;
    position: fixed;
    top :0;
    bottom: 0;
    right: 0;
    left:0;
    background: rgba(77,77,77,0.7);
    transition: .4s;
    overflow: hidden;
    z-index: 1; /* Sit on top */
    overscroll-behavior: None;
}
.modal:target {
    visibility: visible;
    opacity: 1;
}
.modal_content {
    width: 80%;
    max-width: 800px;
    height:auto;
    max-height: 80%;
    padding:6% ;
    box-sizing: border-box;
    text-align: center;
    margin: 8% auto;
    border-radius: 4px;
    position: relative;
    background-color:white;
    overflow: auto; 
}

.modal_content table {
    font-family: 'Rajdhani',sans-serif;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 1px solid #ddd;
    width: 100%;
}

.modal_content table th:nth-child(1){
    width: 60%;
}
.modal_content table td {
    font-family: 'Rajdhani',sans-serif ;
    border-top: 1px solid #ddd;
    padding-top: 15px;
    padding-bottom: 15px;
    flex-wrap:nowrap;
}

.modal_close {
    position: absolute;
    right: calc(2vmin + 9px);
    top:calc(2vmin + 9px);
    font-size:calc(2vmin + 9px);
    color :rgb(13, 5, 5);
    text-decoration: none;
    padding: 0 1% 0 1%;
    background-color:  rgb(216, 52, 52);
    border-radius: 20%;
}

/*menu*/
.conteneur_menus { 
    max-width: 1200px;
    margin: 0 auto;
}
.titre_lanternes{
    max-width: 700px;
    margin: 0 auto;
    display: flex;
}

.menus{
    border-right:4px solid white;
    border-left:4px solid white;
    display: flex;
    align-items: stretch;
    margin-bottom: 8%;
    margin-top: 3%;
}
.menu_detail{
    border-top:2.5px solid rgb(195, 41, 41);
    box-sizing: border-box ;
   padding-left: 2% ;
}
.menu_detail:nth-child(1){
    border-right:4px solid white;
}

/*apropos*/

.conteneurapropos{
    max-width: 900px;
    margin: 0 auto;
    padding: 2%;
}
.titre_apropos, .textapropos table{
    text-align: left;
}
.textapropos{
    text-align: center;
}
.img_dragon{
   margin: 3%;
   border-radius: 3%;
}
.conteneur_fondu{
    width: 380px;
    position: relative;
    height:500px;
}
.conteneur_fondu img{
    position: absolute;
    left:0; 
}

.img_fondu, .imgpav{
    box-shadow: 6px 5px 5px black; }

.conteneur_fondu img.image_de_dessus, .conteneur_fondu img.image_intermediaire{
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}
 
.conteneur_fondu img.image_de_dessus{ animation-name: fondu-in-out1;}
  @keyframes fondu-in-out1{
    0%   {opacity:1;}
    10%  {opacity:1;}
    40%  {opacity:0;}
    65%  {opacity:0;}
    95%  {opacity:1;}
    100% {opacity:1;}
}
.conteneur_fondu img.image_intermediaire{ animation-name: fondu-in-out2;}
@keyframes fondu-in-out2{
    0%   {opacity:1; }
    10%  {opacity:1; }
    35%  {opacity:1; }
    65%  {opacity:0; }
    100% {opacity:0; }
}

/*contact*/

.conteneur_contact {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    max-width: 1000px;
    margin: 0 auto;
    word-break: break-word;
    hyphens: auto;
    padding: 4%;
}
.titreettexte_contact{
    border-top :2.5px solid rgb(195, 41, 41) ;
    font-family: 'Rajdhani', serif;
    font-weight: 600;
    break-inside: avoid-column;
    gap:2%;
}

.carrecontact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 4%;
}

.contenucontact {
    flex-grow: 1;
}

.contenucontact table td, .contenucontact table {
    border-top: none;
}

/*404*/
.page_introuvable {
   max-width: 1100px;
   margin: 0 auto;
   padding-bottom: 5%;
   text-align: center;
}
.page_introuvable .liencontact{
  place-items: calc(2vmin);
}
.page_introuvable img{
    width:200px;
}

/*blog*/
.liste_blogs{
  column-count: 2;
  max-width: 900px;
  margin: 0 auto;
}
.carre_blog{  
    width:320px;
}

figure {
    display: flex;
    flex-flow: column; 
    width: 300px;
    border-top :2.5px solid rgb(195, 41, 41) ;
    margin-inline-start: 0;
}
  
figcaption {
    background-color: #222;
    color: #fff;
}
.date_blog { margin: 2%;}

.carre_blog h2,.conteneurblogentier p{ text-align: left;}

.carre_blog a{ color: #fff;}

/*blog entier*/
.conteneurblogentier{
    max-width: 1000px ;
    margin: 0 auto;
    padding: 2%;
}

.int_content table {
    margin: 0 auto;
}
.int_content table th{
    font-size: 18px;
}
.int_content h4{
    text-align: left;
    width:400px;
    border-top:2.5px solid rgb(195, 41, 41);
}

/*mentions légales */
.conteneur_mentions{
    max-width: 900px;
    margin: 0 auto;
    padding:  2%;
}