/* Configuration des couleurs et tailles de police */

/* Couleur et taille de la police pour tous les liens de la breadcrumb */
.category-columns .breadcrumb a, .category-columns .breadcrumb p, .category-columns .breadcrumb {
    font-size: 14px;
    color: var(--secondaire);
    margin-bottom: 20px;
}

/* Taille de la police pour les titres des cartes d'articles en une colonne */
.category-grid.columns-1 .catitem-title {
    font-size: 1.2em;
    margin-top: 5px;
}

.category-grid .catitem-title {
    margin: 30px 10px 0 10px;
    font-size: 1em;
}

/* Couleur des éléments de l'article au survol */
.category-grid .catitem:hover .catitem-title,
.category-grid .catitem:hover .catitem-excerpt,
.category-grid .catitem:hover .catitem-date {
    color: inherit; /* Ne change pas la couleur du texte */
}

/* Style des prix pour les produits WooCommerce */
.catitem-price {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.sale-price {
    color: red;
}
.regular-price del {
    color: #999;
}

/* Couleurs et police pour le bouton d'achat */
.buy-button {
    background-color: #0073aa;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.buy-button:hover {
    background-color: #005177;
}

/* Style pour les liens de position actuelle */
.current_position {
  opacity: 0.3 !important;
}

/* Style pour les nouveaux articles */
.category-grid .newarticle {
  
}

.category-grid .newarticle h2 {
  
}

/* Style des liens des sous-catégories */
.child-category a {
    color: #313131 !important;
    font-size: 0.8em !important;
}
.child-category-title.active {
    font-weight: bold;
}

/* Style des liens d'articles */
.catitem a {
    color: var(--secondaire) !important;
    font-size: 1.1em;
}

/* Style du texte de résumé des articles */
.category-grid .catitem-excerpt {
    font-size: 1em;
    line-height: 1.4em;
}

.category-grid a:hover {
    color: #555;
}

.category-grid .catitem:hover {
    transform: scale(1.05); /* léger effet de zoom */
}

.category-grid .current_position {
  pointer-events: none;
}

/* Style pour les dates des articles */
.catitem-date {
    font-size: 0.9em;
    margin: -60px 10px 0 auto !important;
    padding: 0 10px;
    color: #111 !important;
}

/* Style des champs de recherche */
.search-input {
    font-size: 0.8em;
}

.autres_articles {
    font-weight: 500;
}

/* ne rien éditer en dessous de cette ligne */

/* Style général pour le conteneur des articles */
.category-grid {
    display: grid;
    gap: 20px;
}

.term-description {
    min-height: 20px;
    display: block;
    margin-bottom: 50px;
}

/* Styles spécifiques pour les cartes d'articles */
.catitem {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background: #fff;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease-in-out; /* pour l'effet de zoom */
}

.category-columns .breadcrumb a {
  color: var(--secondaire);
}

.category-grid a {
    display: block;
    position: relative;
    text-decoration: none !important;
    color: inherit;
}

.category-grid .current_position {
  pointer-events: none;
}

.category-grid.columns-1 {
    grid-template-columns: 1fr;
}

.category-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.category-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.category-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.category-grid.columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.category-grid.columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Responsive styles */

@media (max-width: 1700px) {
    .category-grid.columns-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    .post-list a:nth-child(n+4) {
      display: none;
    }
}

@media (max-width: 1500px) {
    .category-grid.columns-6,
    .category-grid.columns-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 981px) {
    .category-grid.columns-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 786px) {
    .category-grid.columns-3,
    .category-grid.columns-2,
    .category-grid.columns-4,
    .category-grid.columns-5,
    .category-grid.columns-6 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 786px) {
  .category-columns {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Style pour les cartes en colonne unique */
.category-grid.columns-1 .catitem {
    display: flex;
}

.category-grid.columns-1 .catitem-image-wrapper,
.category-grid.columns-1 .catitem-date,
.category-grid.columns-1 .catitem-title,
.category-grid.columns-1 .catitem-excerpt {
    margin-left: 10px;
}

.category-grid.columns-1 .catitem-excerpt {
    margin-top: 5px;
}

/* Styles pour les cartes de 2 à 6 colonnes */
.category-grid.columns-2 .catitem,
.category-grid.columns-3 .catitem,
.category-grid.columns-4 .catitem,
.category-grid.columns-5 .catitem,
.category-grid.columns-6 .catitem {
    text-align: left;
}

.category-grid .catitem-image-wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.category-grid .catitem-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cartitem {
    color: #515151 !important;
}

.category-grid .catitem-excerpt {
    margin-top: 20px;
    text-align: left;
    padding: 0 10px;
}

/* Style pour la zone des sous-catégories */
.category-children-wrapper {
    margin: 0px 0;
    flex: 1;
}

.subcategories-title {
    font-weight: 300;
    margin-bottom: 10px;
    display: block;
    text-transform: uppercase;
    font-size: 0.8em;
}

.category-children {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.child-category a {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
    color: #313131 !important;
}

.child-category  {
    margin: 0px !important;
}

.child-category a:hover {
    text-decoration: none !important;
    border: 1px solid #aee2e580 !important;
    color: #111 !important;
    background: #aee2e540;
}

.child-category-image {
    margin-right: 5px;
}

.child-category-title {
    font-size: 1em;
    margin: 0;
}

.child-category-title a {
    color: inherit;
}

.catitem {
    margin-bottom: 10px;
}

.catitem-date {
    margin-top: 5px;
    z-index: 9;
    position: relative;
    width: 125px !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
}

/* Style pour la zone de recherche */
.search-wrapper {
    display: flex;
    justify-content: flex-start;
    flex: 0 0 250px;
    padding-top: 0px;
    height: 27px;
}

.search-input {
    padding: 2px;
    width: 230px;
    border: 1px solid #ccc;
    margin-top: 0px;
    border-radius: 5px;
}

.breadcrumb-search-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-direction: row-reverse;
}

@media (max-width: 786px) {
    .breadcrumb-search-wrapper {
        flex-direction: column;
        gap: 10px;
    }

    .search-wrapper {
        justify-content: center;
        margin-top: 10px;
        width: 100%;
        flex: 0;
        order: 2;
        justify-content: flex-start;
    }

    .category-children-wrapper {
        order: 1;
    }
    
    .search-input {
        padding: 2px;
        width: 250px !important;
        border: 1px solid #ccc;
        margin-top: 0px;
        border-radius: 5px;
        height: 27px !important;
    }
}


.alt-text-input {
    width: 100%;
    box-sizing: border-box;
}

/* SUGGEST OTHER BLOG ARTICLE */


/* Bloc CSS dédié pour le module "suggest_other_article" */
.lireaussi {
    margin: 45px 0 15px 0 !important;
    font-weight: 700;
    font-size: 1.2em;
}

.suggested-article-excerpt:after {
  display: block !important;
  content: "lire la suite..." !important;
  font-size: 0.8em;
  text-transform: uppercase;
  color: var(--contrast);
  
}

.suggested-article-container {
    margin-bottom: 45px !important;
    display: flex;
    align-items: stretch; /* Assure que les éléments enfants occupent toute la hauteur */
    border-style: solid;
    border-color: #dfdfdf;
    border-width: 1px;
    padding: 10px;
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    transition: margin-left 0.5s ease-in-out;
    cursor: pointer; /* Rend la cartouche clickable */
}
.suggested-article-container:hover {
    margin-left: 30px;
}

.suggested-article-container:before {
    content: "";
    display: block;
    background: var(--contrast);
    position: absolute;
    margin-top: -20px;
    margin-left: -20px;
    width: 30px;
    height: 60px;
}

@media (max-width: 756px) {
    .suggested-article-container:hover {
        width: 100%;
        margin-left: 0px;
    }
}

.suggested-article-image {
    flex: 0 0 150px;
    max-width: 150px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    min-height: 150px;
    margin: -10px 20px -10px -10px;
}

.suggested-article-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover; /* Assure que l'image remplit toute la hauteur de la zone */
}

.suggested-article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.suggested-article-title {
    font-size: 1.25em;
    margin: 0 0 10px 0;
}

.suggested-article-excerpt {
    font-size: 1em;
    margin: 0 0 10px 0;
    line-height: 1.4em;
}

.cta_button {
    font-size: 1em;
    margin: 0 0 10px 0;
    color: #0073aa;
}

.cta_button:hover {
    text-decoration: underline;
}

.suggested-article-tags {
    font-size: 0.9em;
}

.suggested-article-tags a {
    text-decoration: none;
    margin-right: 5px;
    border: 1px solid #dfdfdf !important;
    padding: 1px 5px;
    background: white;
    border-radius: 50px;
    color: #222 !important;
    white-space: nowrap;
}

.suggested-article-tags a:hover {
    text-decoration: none;
    border: 1px solid var(--contrast) !important;
}

@media (max-width: 500px) {
    .suggested-article-image {
        flex: 0 0 80px;
        max-width: 80px;
    }

    .suggested-article-image img {
        width: 100%;
        height: 100%;
    }
}