/*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;
}
.retour{
    margin: 3% 0 3% 40%;
}
.vignette{
    padding-bottom: 3%;  
    margin: 2% auto;
}

/*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%;
}

/*menus*/
.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*/

.conteneur_fondu{
    width:420px;
    position: relative;
    left: 20px;
    top:20px;
    height: 700px;
}

.conteneur_fondu img{
    position: absolute;
    left:0; 
}
.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%;
    place-items: center;
}

.titreettexte_contact h2{
    font-size: 26px;
    text-align: center;
}

/*blog accueil*/
.liste_blogs{
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    margin: 0 auto;
    gap:3%
}
.carre_blog{  
    position: relative;
    width:320px;
}
figure {
    display: flex;
    flex-flow: column; 
    width: 320px;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
  
figcaption {
    background-color: #222;
    color: #fff;
}
.date_blog { margin: 2%;}
.lire_blog{
    color:rgb(249, 16, 16) ;
    font-weight: 900;
    text-decoration: underline;
  position: absolute;
  bottom:0px
}
/*blog entier*/

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

/*404*/
.page_introuvable .liencontact{
  place-items: calc(2vmin);
}
.page_introuvable img{
    width:200px;
}