/* RESETS */
.vef_shortcode * + * {
    margin-top: unset;
}

/* BASICS */

.vef_shortcode {
    /* Typographie */
    --vef_ff: Arial, Helvetica, sans-serif;
    --vef-fs: 10px;
    --vef-lh: 1.5em;
    --vef-fs-title: 1.6em;
    --vef-fs-base-size: 1.4em;
    --vef-fs-description: var(--vef-fs-base-size);
    --vef-fs-signature: 1.1em;

    /* Espacements shortcodes */
    --vef-margin-top: 2em;
    --vef-margin-bottom: 2em;
    --vef-elements-spacing: 1.5em;

    /* Couleurs */
    --vef-color-primary: #393939;
    --vef-color-secondary: #DDD;

    /* FICHE : titre */
    --vef-fiche-titre-fs: 20px;
    --vef-fiche-titre-lh: 1.2em;
    --vef-fiche-titre-color: inherit;
    --vef-fiche-titre-fw: bold;

    /* FICHE : illus */
    --vef-illus-ar: 16/10;

    /* FICHE : Tabs */
    --vef-tabs-fs: var(--vef-fs-base-size);
    --vef-tabs-padding: 0.75em;
    --vef-tabs-color: #888;
    --vef-tabs-bgcolor: #EEE;
    --vef-tabs-bgcolor-hover: var(--vef-color-secondary);
    --vef-tabs-bgcolor-active: var(--vef-color-primary);
    --vef-tabs-color-active: white;
    --vef-tabs-gap: 1px;
    --vef-tabs-content-border: 1px solid #EEE;
    --vef-tabs-content-padding: 15px;

    /* FICHE : contenu */
    --vef-fiche-content-fs: var(--vef-fs-base-size);
    --vef-fiche-content-lh: 1.3em;
    --vef-fiche-content-elements-spacing: 1em;
    --vef-fiche-content-padding: 1em;
    --vef-fiche-content-links-color: inherit;
    --vef-fiche-content-links-color-hover: inherit;
    --vef-fiche-content-links-td: underline;
    --vef-fiche-content-links-td-hover: none;
    --vef-fiche-content-links-td-thickness: 1px;
    --vef-fiche-content-links-td-color: inherit;


    /* FICHE : cta */
    --vef-fiche-cta-fs: var(--vef-fs-base-size);
    --vef-fiche-cta-bgcolor: var(--vef-color-secondary);
    --vef-fiche-cta-color: #393939;
    --vef-fiche-cta-bgcolor-hover: var(--vef-color-primary);
    --vef-fiche-cta-color-hover: white;




}


/* Reset pour contrer les styles comme .entry * + * { margin-top: 1.5em; } */
.vef_shortcode * + *,
.vef_shortcode ul.tabs,
.vef_shortcode ul.tabs > li {
    margin-top: 0 !important;
}

.vef_shortcode {
    all: initial;
    display: block;
    box-sizing: border-box !important;
    font: var(--vef-fs)/var(--vef-lh) var(--vef_ff);
    margin-top: var(--vef-margin-top);
    margin-bottom: var(--vef-margin-bottom);
}

.vef_shortcode * {
    margin: 0;
    padding: 0;
}

.vef_shortcode *,
.vef_shortcode *::before,
.vef_shortcode *::after {
    box-sizing: inherit !important;
}

/* Utilisation de :where() pour les éléments génériques */
.vef_shortcode :where(ul, ol, li, p, h1, h2, h3, h4, h5, h6) {
    margin: 0;
    padding: 0;
    line-height: inherit;
}


.vef_shortcode i.fa {
    font-family: 'FontAwesome' !important;
}

/* 	https://wabeo.fr/etendre-liens-javascript/ */
.vef_shortcode .expand {
    overflow: hidden;
    position: relative;
}

.vef_shortcode .expand a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: -250px;
}





/* COMMUNS */


.vef_shortcode .signature_vef {
    text-align: right !important;
    font-size: var(--vef-fs-signature);
}

.vef_shortcode .signature_vef a,
.vef_shortcode .signature_vef a:hover {
    text-decoration: inherit;
    color: inherit;
}



/* FICHES */
.vef_shortcode .vef_fiche {
    width: 100%;
}

.vef_shortcode .vef_fiche + .vef_fiche {
    margin-top: var(--vef-margin-top);
}

.vef_shortcode .vef_fiche * + .vef_fiche_illus,
.vef_shortcode .vef_fiche * + .vef_fiche_tabs,
.vef_shortcode .vef_fiche * + .vef_cta {
    margin-top: var(--vef-elements-spacing) !important;
}

.vef_shortcode .vef_fiche ul.vef_fiche_tabs {
    list-style-type: none !important;
    overflow: hidden;
    display: flex;
    gap: var(--vef-tabs-gap);
    justify-content: flex-start;
}

.vef_shortcode .vef_fiche ul.vef_fiche_tabs > li {}

.vef_shortcode .vef_fiche ul.vef_fiche_tabs > li {
    flex-grow: 0;
    flex-basis: 25% !important;
    font-size: var(--vef-tabs-fs);

    margin: 0;
    padding: 0;
    display: flex;
}

.vef_shortcode .vef_fiche ul.vef_fiche_tabs > li > a {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: var(--vef-tabs-padding);
    background-color: var(--vef-tabs-bgcolor) !important;
    color: var(--vef-tabs-color) !important;
    cursor: pointer;
}

.vef_shortcode .vef_fiche ul.vef_fiche_tabs > li > a,
.vef_shortcode .vef_fiche ul.vef_fiche_tabs > li > a:hover {
    text-decoration: none;
}

.vef_shortcode .vef_fiche .vef_fiche_content {
    display: none;
}


.vef_shortcode .vef_fiche ul.vef_fiche_tabs > li > a:focus,
.vef_shortcode .vef_fiche ul.vef_fiche_tabs > li > a:hover {
    background-color: var(--vef-tabs-bgcolor-hover) !important;
}

.vef_shortcode[data-description="false"] ul.vef_fiche_tabs > li:nth-of-type(2) > a,
.vef_shortcode .vef_fiche ul.vef_fiche_tabs > li > a.active {
    background-color: var(--vef-tabs-bgcolor-active) !important;
    color: var(--vef-tabs-color-active) !important;
}

/* Mécanique des différents éléments des onglets */
.vef_shortcode .vef_fiche #vef_types,
.vef_shortcode[data-description="true"] #vef_description,
.vef_shortcode .vef_fiche .vef_fiche_content:first-of-type {
    display: block;
}

.vef_shortcode[data-description="true"] ul.vef_fiche_tabs > li:first-child {
    display: flex;
}

.vef_shortcode[data-description="false"] ul.vef_fiche_tabs > li:first-child,
.vef_shortcode[data-description="false"] #vef_description,
.vef_shortcode[data-titre="false"] .vef_fiche_titre,
.vef_shortcode[data-photo="false"] .vef_fiche_illus,
.vef_shortcode[data-description="true"] #vef_types {
    display: none;
}


.vef_shortcode .vef_fiche .vef_fiche_illus {
    width: 100%;
    aspect-ratio: var(--vef-illus-ar);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
}

.vef_shortcode .vef_fiche_titre {
    font-size: var(--vef-fiche-titre-fs);
    line-height: var(--vef-fiche-titre-lh);
    font-weight: var(--vef-fiche-titre-fw);
    color: var(--vef-fiche-titre-color) !important;
}


.vef_shortcode .vef_fiche .vef_fiche_content {
    font-size: var(--vef-fiche-content-fs);
    line-height: var(--vef-fiche-content-lh);
    padding: var(--vef-fiche-content-padding);
    border: var(--vef-tabs-content-border);
}


.vef_shortcode .vef_fiche_content * + p,
.vef_shortcode .vef_fiche_content * + ul,
.vef_shortcode .vef_fiche_content * + div,
.vef_shortcode .vef_fiche_content * + details {
    margin-top: var(--vef-fiche-content-elements-spacing) !important;
}

.vef_shortcode .vef_fiche_content details + details {
    margin-top: 0.25em !important;
}

.vef_shortcode .vef_fiche .vef_fiche_content *:last-child {
    margin-bottom: 0 !important;
}

.vef_shortcode .vef_fiche_content a {
    color: var(--vef-fiche-content-links-color) !important;
    text-decoration: var(--vef-fiche-content-links-td) !important;
    text-decoration-color: var(--vef-fiche-content-links-td-color) !important;
    text-decoration-thickness: var(--vef-fiche-content-links-td-thickness) !important;
    cursor: pointer;
}

.vef_shortcode .vef_fiche_content a:hover,
.vef_shortcode .vef_fiche_content a:focus {
    color: var(--vef-fiche-content-links-color-hover) !important;
    text-decoration: var(--vef-fiche-content-links-td-hover) !important;

}


.vef_shortcode .vef_fiche_content details .reponse,
.vef_shortcode .vef_fiche_content details + details {
    margin-top: 3px;
}


.vef_shortcode .vef_fiche_content details {
    border: 1px solid #EEE;
    border-radius: 5px;
    font-size: 14px;
    --vef-content-elements-spacing: 0.75em;
}

.vef_shortcode .vef_fiche_content details summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.75em;
    background: #F5F5F5;
    cursor: pointer;
    padding-right: 15px;
}

.vef_shortcode .vef_fiche_content details summary:hover {
    background: #EEE;
}

.vef_shortcode .vef_fiche_content details > summary > * {
    font-size: var(--vef-content-font-size, 16px);
    line-height: 1 !important;
    font-weight: bold;
}




.vef_shortcode .vef_fiche_content details > .reponse {
    padding: 0.5em 0.75em 0.75em;
}


.vef_shortcode .vef_fiche_content details summary::after {
    content: '\f054';
    font-family: "FontAwesome";
    font-weight: 900;
    margin-left: 15px;
    transition: transform 0.3s ease;
}

.vef_shortcode .vef_fiche_content details[open] > summary::after {
    transform: rotate(90deg);
}


.vef_shortcode .vef_fiche_content .infobox {
    padding: 15px;
}

.vef_shortcode .vef_fiche .vef_cta {
    font-size: var(--vef-fiche-cta-fs);
    text-align: center;
}

.vef_shortcode .vef_fiche .vef_cta a {
    display: inline-block;
    margin-inline: auto;
    text-decoration: none;
    background-color: var(--vef-fiche-cta-bgcolor) !important;
    color: var(--vef-fiche-cta-color) !important;
    padding: 0.75em;
    margin-top: var(--vef-fiche-elements-spacing);
    cursor: pointer;
}

.vef_fiche .vef_cta a:hover {
    background-color: var(--vef-fiche-cta-bgcolor-hover) !important;
    color: var(--vef-fiche-cta-color-hover) !important;
    text-decoration: none;
}

.vef_shortcode[data-cta="false"] .vef_fiche .vef_cta {
    display: none;
}




/* MINIATURES */
.vef_miniatures {
    --vef_miniatures_gap: 10px;

    --vef_miniature_width: 100%;
    --vef_miniature_gap: 5px;
    --vef_miniature_flexdir: row;

    --vef_miniature_img_width: 80px;
    --vef_miniature_img_ar: 16/10;

    --vef_miniature_txt_gap: 2px;
    --vef_miniature_txt_title_font_size: 16px;
    --vef_miniature_txt_title_line-height: 1em;
    --vef_miniature_txt_title_a_color: var(--vef-color-primary);
    --vef_miniature_txt_title_a_td: none;
    --vef_miniature_txt_desc_font_size: 12px;
    --vef_miniature_txt_line_height: 1.2em;

    width: 100%;
}

.vef_miniatures.par_2 {
    --vef_miniature_width: 100%;
}

.vef_miniatures > ul {
    display: flex;
    flex-direction: column;
    gap: var(--vef_shortcode_miniatures_gap, 10px);
    margin: 0 !important;
    padding: 0 !important;
}

.vef_miniatures > ul > li:hover {
    background-color: #F7F7F7;
}


.vef_miniatures > ul > li.vef_miniature {
    width: var(--vef_miniature_width);
    gap: var(--vef_miniature_gap, 10px);
    display: flex;
    flex-direction: var(--vef_miniature_flexdir);
    align-items: flex-start;
    margin: 0 !important;
    padding: 0 !important;
}

.vef_miniatures > ul > li.vef_miniature .vef_miniature_img {
    aspect-ratio: var(--vef_miniature_img_ar);
    width: var(--vef_miniature_img_width);
    flex-shrink: 0;
}

.vef_miniatures > ul > li.vef_miniature .vef_miniature_txt {
    display: flex;
    flex-direction: column;
    gap: var(--vef_miniature_txt_gap);
}

.vef_miniatures > ul > li.vef_miniature p.vef_miniature_titre {
    font-size: var(--vef_miniature_txt_title_font_size);
    line-height: var(--vef_miniature_txt_title_line-height);
    font-weight: bold;
}

.vef_miniatures > ul > li.vef_miniature p.vef_miniature_titre a {
    color: var(--vef-color-primary);
    text-decoration: var(--vef_miniature_txt_title_a_td);
}

.vef_miniatures > ul > li.vef_miniature .vef_miniature_description {

    font-size: var(--vef_miniature_txt_desc_font_size);
    line-height: var(--vef_miniature_txt_line_height);
}

.vef_shortcode[data-description="false"] .vef_miniatures .vef_miniature_description {
    display: none;
}

.vef_shortcode:not([data-affid~="false"]) .signature_vef,
.vef_shortcode[data-affid ~ ="false"] .signature_vef {
    display: block;
}


@media (min-width:700px) {
    .vef_miniatures {
        --vef_miniatures_gap: 15px;
        --vef_miniature_gap: 5px;
        --vef_miniature_flexdir: column;

        --vef_miniature_width_half: calc((100% - var(--vef_miniatures_gap) *1) / 2);
        --vef_miniature_width_third: calc((100% - (var(--vef_miniatures_gap) * 2)) / 3);
        --vef_miniature_width: var(--vef_miniature_width_half);

        --vef_miniature_img_width: 100%;

        --vef_miniature_txt_gap: 5px;
        --vef_miniature_txt_title_font_size: 18px;
        --vef_miniature_txt_title_line-height: 1.1em;
        --vef_miniature_txt_desc_font_size: 14px;
        --vef_miniature_txt_line_height: 1.2em;
    }

    .vef_miniatures.par_2 {
        --vef_miniature_width: var(--vef_miniature_width_half);
    }

    .vef_miniatures > ul {
        flex-direction: row;
        justify-content: center;
        gap: var(--vef_miniatures_gap, 20px);
        flex-wrap: wrap;
    }

    .vef_miniatures > ul > li.vef_miniature {

        width: var(--vef_miniature_width);
        flex-direction: column;
        gap: var(--vef_miniature_gap, 10px);
    }
}