.vignette_detail {
    --annuaire-list-border: 1px;
    --annuaire-list-padding: 10px;
    --annuaire-list-image: 30vw;
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    min-height: 38vh;
    width: 100%;
}
.vignette_detail, .vignette_detail :is(.vignette_header,.vignette_description ) {
    transition: all 300ms linear 0s;
}
.vignette_detail .vignette_header,.vignette_detail:is(:hover,:focus) .vignette_description {
    transform: rotateY(0);
    visibility: visible;
    opacity: 1;
    position: absolute;
    text-align: center;
}
.vignette_detail:is(:hover,:focus) .vignette_header,.vignette_detail .vignette_description {
    transform: rotateY(90deg);
    visibility: hidden;
    opacity: 0;
}
.vignette_detail:is(:hover,:focus) {
    background: var(--bs-primary);
    color: var(--bs-white) ;
}
.vignette_detail a{
    color: var(--bs-white);
}
#main .vignette_detail , #main .vignette_detail .vignette_header img{
    border-radius: 2rem;
 } 
.vignette_detail a:hover{
   text-decoration: underline;
   color: var(--bs-white);
}
.vignette_detail a::before{
    content: "";
    background: transparent url("./picto-link-white.svg") no-repeat center;
     display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    position: relative;
    background-size: 2.5rem; 
    background-position: center;
    margin-right: 1rem;
    vertical-align: middle;
}
.vignette_detail h3{
    margin:1rem 0 2rem 0;
    color: var(--marron-fonce);
    text-align: left;
    font-size: 2.2rem;
}
.vignette_detail .vignette_header h3::before,
.vignette_detail .vignette_description h3::before{
    content:none;
}

.vignette_detail .vignette_header h3::after {
    content: '';
    background: var(--bs-secondary);
    width: 4.3rem;
    height: 0.2rem;
    display: block;
    margin-top: 1rem;
}
.vignette_detail .vignette_description {
    margin:1rem 2rem;
}
.vignette_detail .vignette_description h3{
    margin:1rem 0 2rem 0;
    color: var(--bs-white);
    text-align: left;
}
.vignette_detail .vignette_description p{
     font-weight: 400;
     font-size: 1.6rem;
     text-align: left;
}
.vignette_detail .vignette_description .tarif{
    text-align: right;
    font-style: italic;
     font-size: 1.5rem;
}

 
/* Large devices (desktops, 992px / 62em and up) */
@media (min-width: 62em) { 
  
    .vignette_detail {
    min-height: 30vh;
    }
}

/* X-Large devices (large desktops, 1200px / 75em and up) */
@media (min-width: 75em) {   
  .vignette_detail {
    min-height: 30vh;
    }
   
}

/* XX-Large devices (large desktops, 1400px / 87.5em and up) */
@media (min-width: 87.5em) {

.vignette_detail {
    min-height: 38vh;
    }
}

/* XXX-Large devices (larger desktops, 1600px / 100em and up) */
@media (min-width: 100em) {
  
   .vignette_detail {
    min-height: 25vh;
    }
}