/*
Theme Name: Royal Elementor Kit Child
Description: thème enfant
Author: NEX STUDIO
Template: royal-elementor-kit
Version: 1.0
*/
/* Styles pour le bloc d'annonce */
.annonce {
    font-family: "DM Sans", Sans-serif;
    border: 1px solid #ccc; /* Bordure autour de chaque annonce */
    margin-bottom: 20px; /* Espacement entre les annonces */
    padding: 10px; /* Espace interne dans chaque annonce */
    background-color: #f9f9f9; /* Couleur de fond pour chaque annonce */
}

.annonce h1 {
    font-family: "DM Sans", Sans-serif;
    font-size: 1.8em; /* Taille de police pour la description de l'annonce */
}

.annonce h2 {
    font-family: "DM Sans", Sans-serif;
    font-size: 1.4em; /* Taille de police pour la description de l'annonce */
    float: right;
}

.annonce h5 {
    font-size: 18px; /* Taille de police pour le titre de l'annonce */
    margin-top: 0; /* Supprime la marge supérieure du titre */
}

.annonce p {
    font-size: 14px; /* Taille de police pour la description de l'annonce */
    text-align: justify;
}

.annonce .couverture {
    float: right;
    width: 33%;
    margin-left: 1em;
}

/* Styles pour contraindre l'image à être carrée */
.annonce .card-img-top {
    width: 100%; /* Garantit que l'image occupe toute la largeur disponible */
    height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
    max-width: 100%; /* Empêche l'image de déborder de son conteneur */
    aspect-ratio: 1; /* Définit le rapport hauteur/largeur pour créer un carré */
    object-fit: cover; /* Évite que l'image ne soit déformée en coupant le contenu excédentaire */
    margin-bottom:1em;
}

.annonce .slider-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;    
    display: flex;
    /* Ajoutez flex-direction: column; pour aligner les miniatures à droite */
}

.annonce  .slider {
    display: flex;
    overflow: hidden;
    flex-direction: row;
    max-width: 500px;
}

.annonce  .slide {
    flex: 0 0 100%;
    transition: transform 0.5s ease;
    box-sizing: border-box;
}
  
.annonce img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Ajuste la taille de l'image pour couvrir le conteneur tout en conservant les proportions */
  
}
  
.annonce .thumbnails-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* Utilisez flex-start pour aligner les miniatures à droite */
    margin-left: 10px; /* Ajoutez une marge à gauche pour l'espace entre les miniatures et les diapositives */
    width: 100%;
}
  
.annonce .thumbnail {
    flex: 0 0 80px;
    margin-bottom: 10px; /* Ajoutez une marge en bas pour l'espace entre les miniatures */
    cursor: pointer;
}
  
.annonce .thumbnail img {
    width: 100%;
    height: auto;
    border: 2px solid #333;
}
  
.annonce .thumbnail.active img {
    border-color: #ff6600;
}

.annonce .elementor-button.elementor-size-lg {
    padding: 10px 20px
}

#contactAnnonce input {
    padding: 0.5em;
    width: 100%;
    margin-bottom:1em;
}

#contactAnnonce textarea {
    padding: 0.5em;
    width: 100%;
    margin-bottom:1em;
    height:10em;
}