/* Thotis Articles Recents
   Palette : navy #010538, bleu accent #5062FC, blanc.
   Reproduit la maquette WPBakery (image arrondie, date bleue,
   titre italique gras, boutons contour navy et bouton plein navy). */

.thotis-ar {
    --thotis-ar-navy: #010538;
    --thotis-ar-blue: #5062FC;
    --thotis-ar-radius: 14px;
    --thotis-ar-gap: 48px;

    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: inherit;
}

.thotis-ar *,
.thotis-ar *::before,
.thotis-ar *::after {
    box-sizing: border-box;
}

/* Titre H2 : "Les dernières actus Thotis" */
.thotis-ar__heading {
    margin: 0 0 40px;
    font-style: italic;
    text-align: center;
}

.thotis-ar__heading-accent {
    text-decoration: underline;
    text-decoration-color: var(--thotis-ar-blue);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.195em;
    text-decoration-skip-ink: auto;
}

/* Grille */
.thotis-ar__grid {
    display: grid;
    grid-template-columns: repeat(var(--thotis-ar-cols, 2), minmax(0, 1fr));
    gap: var(--thotis-ar-gap);
}

/* Carte */
.thotis-ar__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Media (image) : l'arrondi et l'aspect viennent de l'element WPBakery
   vc_single_image (style vc_box_rounded). On force juste l'image a remplir
   la largeur de sa colonne. */
.thotis-ar .thotis-ar__media {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    line-height: 0;
}

/* Structure generee par WPBakery : on annule les marges et on etire a 100% */
.thotis-ar .thotis-ar__media .wpb_single_image,
.thotis-ar .thotis-ar__media .wpb_single_image .vc_figure,
.thotis-ar .thotis-ar__media .wpb_single_image figure,
.thotis-ar .thotis-ar__media .vc_single_image-wrapper {
    display: block;
    width: 100%;
    margin: 0;
}

.thotis-ar .thotis-ar__media img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Lien qui enveloppe l'image */
.thotis-ar .thotis-ar__media-link {
    display: block;
    width: 100%;
    line-height: 0;
    text-decoration: none;
}

.thotis-ar .thotis-ar__img--placeholder {
    aspect-ratio: 16 / 10;
    border-radius: var(--thotis-ar-radius);
    background: linear-gradient(135deg, #2a2470, var(--thotis-ar-navy));
}

/* Corps texte */
.thotis-ar__body {
    display: flex;
    flex-direction: column;
}

.thotis-ar__date {
    margin: 0 0 10px;
    color: var(--thotis-ar-blue);
    font-weight: 700;
    font-size: 23px;
    line-height: 1;
    text-align: left;
}

.thotis-ar__title {
    margin: 0 0 14px;
    font-size: 25px;
    line-height: 1.5;
    font-style: italic;
    font-weight: 700;
    color: var(--thotis-ar-navy);
}

.thotis-ar__title a {
    color: inherit;
    text-decoration: none;
}

.thotis-ar__title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--thotis-ar-blue);
    text-underline-offset: 3px;
}

/* Boutons */
.thotis-ar__btn {
    display: block;
    width: 100%;
    padding: 15px 28px;
    border: 2px solid var(--thotis-ar-navy);
    border-radius: 4px;
    background: transparent;
    color: var(--thotis-ar-navy);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.thotis-ar__btn:hover,
.thotis-ar__btn:focus {
    background: var(--thotis-ar-navy);
    color: #fff;
}

/* Footer : bouton plein navy vers toute la categorie */
.thotis-ar__footer {
    margin-top: 40px;
}

.thotis-ar__btn--all {
    border-radius: 5px;
    border-color: var(--thotis-ar-navy);
    background: var(--thotis-ar-navy);
    color: #fff;
}

.thotis-ar__btn--all:hover,
.thotis-ar__btn--all:focus {
    background: var(--thotis-ar-blue);
    border-color: var(--thotis-ar-blue);
    color: #fff;
}

/* Disposition horizontale (col="1") : image a gauche, texte a droite, alignes en bas */
.thotis-ar__grid.is-horizontal .thotis-ar__card {
    flex-direction: row;
    align-items: flex-end;
    gap: 40px;
}

.thotis-ar__grid.is-horizontal .thotis-ar__media {
    flex: 0 0 50%;
    max-width: 50%;
}

.thotis-ar__grid.is-horizontal .thotis-ar__body {
    flex: 1 1 50%;
}

/* Responsive : une seule colonne verticale sur mobile/tablette */
@media (max-width: 900px) {
    .thotis-ar__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .thotis-ar__grid.is-horizontal .thotis-ar__card {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .thotis-ar__grid.is-horizontal .thotis-ar__media,
    .thotis-ar__grid.is-horizontal .thotis-ar__body {
        flex: none;
        max-width: 100%;
    }

    .thotis-ar__title {
        font-size: 21px;
    }
}