/* CUSTOM Classes */
/* ========== FONTS @font-face ========== */

/* === Fonts via CDN === */

/* Passion One Regular */
.passion-one {
    font-family: 'Passion One', cursive;
    font-weight: 400;
}

/* Passion One Black */
.passion-one-black {
    font-family: 'Passion One', cursive;
    font-weight: 900;
}

/* Source Sans Pro Regular */
.source-sans-pro {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
}

/* Source Sans Pro Bold */
.source-sans-pro-bold {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
}

/* Helvetica Neue LT Pro 95 Black remplacée par Roboto Bold */
.helvetica-replacement {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}
.section-actus h2,
.section-title-card h2 {
    font-family: 'Passion One', sans-serif;
}

h1,
.titre-noire {
    font-family: 'Helvetica', sans-serif;
    font-weight: 900;
}

.swiper-slide .div-content h2 strong,
h2 strong {
    font-family: 'Helvetica', sans-serif;
}
section h3{
    font-size:24px!important;
}
section h2{
    font-size:35px!important;
}
.title-div,
.section-slider-content p {
    font-family: 'Source Sans Pro', sans-serif;
}


.custom-swiper-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: white;
    border-radius: 9999px;
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
}
.swiper-button-prev {
    left: -20px;
}
.swiper-button-next {
    right: -20px;
}

#menu-item-395{
    color: #fff;
    height: fit-content;
    border-radius: 7px;
    background-color: #041236;
    width: 140px !important;
    &:hover{
        color: black !important;
        border: 1px solid #041236 !important;
        background-color: #fff !important;
    }
    a{
        width: 140px !important;
        color: unset!important;
        border-radius: unset!important;
        background-color: unset!important;
        color: white !important;
        &:hover{
            color: black !important;
            border:unset!important;
            background-color:unset !important;
        }
    }
}

#trp-floater-ls{
    display: none !important;
}
#primary-menu, #anglais-menu{
    li {
        position: relative;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        flex-wrap: wrap;
        width: min-content;
        min-width: 115px;
        align-items: center;
        justify-content: center;
        a{
            font-weight: bold;
        }
    }
}

.wrapper{
    overflow: hidden;
}
p{
    margin-bottom: 0;
}
.container{
    max-width: 90% !important;
    @media(max-width: 960px ){
        max-width: 95% !important;
    }
}
html{
    margin-top: 0 !important;
}
header{
    top: 0;
    width: 100%;
    position: fixed;
}
#menu-item-13{
    border-radius: 999px;
    background-color: #04362d;
    color: #fff;
    padding: 2.5px 10px;
}
.menu-item a:hover{
    transition: 0.2s;
    color: white !important;
    background-color: #04362d !important;
}
#wpadminbar{
    display: none;
}
.lien-acf-content{
    transition: 0.2s !important;
    &:hover{
        transition: 0.2s !important;
        padding-right:40px;
    }
    .active {
        background-color: #cde7ff !important;
        font-weight: bold;
    }
}
.lien-acf-content.active {
    background-color: #cde7ff !important;
    font-weight: 700 !important; }
.hero-home{
    strong {
        font-family: 'Helvetica Neue LT Pro', sans-serif;
    }
}
section, .block-editor-block-list__layout {
    h1 {
        @apply text-7xl;
        font-weight: 700
    }

    h2 {
        @apply text-3xl;
    }

    h3 {
        @apply text-lg;
    }

    p, ul, ol {
        a {
            @apply text-blue-500 underline;

            &:hover {
                @apply no-underline;
            }
        }

        @apply mb-8;
    }

    ul:not(.block-editor-block-variation-picker__variations) {
        li {
            @apply list-disc list-inside;
        }
    }

    ol {
        li {
            @apply list-decimal list-inside;
        }
    }
}


.mobile-only{
    @media(max-width: 780px) {
        display: flex !important;
        align-items: center;
        padding: 0;
        .swiper-button-prev, .swiper-button-next {
            position: inherit;
        }
    }
}
.card-section {
    height: auto;
    @media(max-width: 780px){
        .swiper-button-prev, .swiper-button-next {
            position: inherit;
        }
    }
    .cards {
        height: 550px;
        position: relative;
        transition: 0.2s;
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        justify-content: flex-end;
        color: white;
        overflow: revert;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(4, 18, 54, 0.35) 0%, #041236 100%);
            opacity: 0;
            transition: opacity 0.2s ease-in-out;
            z-index: 1;
        }

        >* {
            z-index: 2;
        }

        h5 {
            font-size: 2rem;
            display: none;
            width: max-content;
            color: #e6471f;
 
        }
        img {
            font-size: 1.2rem;
            display: none;
        }
        p{
            font-size: 1.2rem;
            display: none;
            width: 100%;
        }

        &:hover {
            height: 600px;
            width: 320px;
            margin-left: 50px;
             
            &::before {
                opacity: 1;
            }
            img {
                display: block;
                color: white;
                font-weight: 100;
            }
            p{
                display: block;
                color: white;
                font-weight: 100;
            }

        
        }
        .div-content p {
            line-height: normal;
        }
    }
    .swiper-pagination{
        top: 0;
        position: relative;
    }
}
.cards {
    overflow: hidden;
}

.cards h5 {
    position: absolute;
    top: 50%;
    left: -8%;
    transform: translate(-50%, -50%) rotate(-0.25turn);
    width: 200px;
    text-align: center;
    display: none;
}

.cards:hover h5 {
    display: block;
    transition: 0 !important;
}
.card-reseaux{
    p{
        font-weight: bold;
        margin-bottom: 0 !important;
        a{
            color: #041236;
        }
    }
}
.card-actualites{
    box-shadow: 0px 2px 10px #00000059;
    .img-illustration{
        position: inherit;
        z-index: 900;
        transition: 0.2s
    }
    p{
        margin: 0 !important;
    }
    &:hover{
        .img-illustration{
            transition: 0.2s;
            box-shadow: 0px 2px 5px #00000059;
        }
    }
}

footer{
    ul li{
        color: white;
    }
}

.swiper-button-prev{
    margin-right: 5px;
}
.swiper-button-next{
    margin-left: 5px;
}

.hero-home{
    h3{
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }
}
 


.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: 'none' !important;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: 'none' !important;
}

.swiper-button-prev, .swiper-button-next{
    img{
        width: 3rem;
        height: 3rem;
        visibility: visible;
        max-width: fit-content !important;
        border-radius: 25px !important;
    }
}
.img-slide{
    border-radius: 25px !important;
}
.slider-content-section .swiper-slide{
    border-radius: 25px !important;
}

a{
    text-decoration: none !important;
}

.bouton-telecharger{
    content: '';
    background-color: #CDE7FF;
    color: black;
    box-shadow: 2px 6px 14px -4px #00000057;
    padding: 5px 40px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 20px;
    transition: 0.2s;
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    &:hover{
        transition: 0.2s;
        color: #fff;
        background-color: #041236;
    }
    &::after {
        margin-left: 15px;
        content: url('http://localhost/vf-groupe/web/app/uploads/2025/05/Download.png');
    }
}

/* page actualités */

.thumb_news{
    img{
        width: 100%;
    }
}

.btn-catalogue{
    border-radius: 0.5rem !important;
    background-color: #e5e7eb !important;
    font-size: 1.25rem !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    transition: background-color 0.2s ease;
    color: black !important;
    transition: 0.2s !important;
    &:hover {
        font-weight: 700 !important;
        transition: 0.2s !important;
        color: black !important;
        font-size: 1.25rem !important;
        background-color: #cde7ff !important;
    }
}
.lien-acf-content {
  position: relative;
  display: inline-block;
  padding-right: 30px;
}
.lien-acf-content::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  background-image: url('http://staging-vf-group.lach3172.odns.fr/app/themes/DWF/img/icons/blue-arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateX(-5px);
  opacity: 0;
  transition: all 0.3s ease;
}
.lien-acf-content:hover::after {
  transform: translateX(0);
  opacity: 1;
}
.primary-menu li.current-menu-item > a,
.primary-menu li.current-cat > a,
.primary-menu li.current-menu-parent > a,
.primary-menu li.current-cat-parent > a,
.primary-menu li.current-menu-ancestor > a {
    border-bottom: 2px solid #28a745;
    padding-bottom: 4px;
    border-radius: 0 !important;
}

/* CUSTOM */
.a_class{
    padding:6px;
    display:flex;
    flex-direction: row-reverse;
    gap: 5px;
    align-items:center;
    font-weight: bold;
    font-size:16.7px;
    border-radius:0 0 5px 5px;
}
.a_class_bot{
    padding:6px;
    display:flex;
    flex-direction: row-reverse;
    align-items:center;
    font-weight: bold;
    font-size:16.7px;
    border-radius:5px 5px 5px 5px; 
    white-space: normal;
}
#mobile-menu-panel-green .mobile-menu-columns li a {
    color: #40662b; 
    font-weight: bold;
}
hr {
    border: 1px solid black; 
    margin: 15px 80px !important;
}
#mobile-menu-panel, #mobile-menu-panel-green, #trait{
    display: none;
}
@media (max-width: 899px) {
    a.a_class[lang="en-GB"] {
        display:flex !important;
        flex-direction: row-reverse!important;
    }
    a.a_class[lang="en-GB"] span{
        margin:0!important;
        margin-left:0!important;
    }
    a.a_class[lang="fr-FR"] {
        display:flex !important;
        flex-direction: row-reverse!important;
    }
    a.a_class[lang="fr-FR"] span{
        margin:0!important;
        margin-left:0!important;
    }
    .mobile-menu-columns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;     
        text-align: center !important;         
        row-gap: 18px !important;
    }
    .mobile-menu-columns .a_class,
    .mobile-menu-columns .a_class_bot {
        justify-content: center !important;
        flex-direction: row !important;
        text-align: center !important;
    }
    .mobile-menu-columns .a_class a,
    .mobile-menu-columns .a_class_bot a {
        margin: 0 auto;
    }
}
@media (min-width: 900px) and (max-width: 1279px) {
    a.a_class[lang="en-GB"] {
        display:flex !important;
        flex-direction: row-reverse!important;
    }
    a.a_class[lang="en-GB"] span{
        margin:0!important;
        margin-left:0!important;
    }
    a.a_class[lang="fr-FR"] {
        display:flex !important;
        flex-direction: row-reverse!important;
    }
    a.a_class[lang="fr-FR"] span{
        margin:0!important;
        margin-left:0!important;
    }
    .mobile-div{
        display:flex!important;
        flex-direction: row;
        padding:25px;
    }
    #trait{
        border-top: none;
        border-left: 1px solid black;
        height: 120px; 
        width: 1px;
        margin: 0 20px;
    }
    #mobile-menu-panel .mobile-menu-columns ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;                 
        gap: 15px;  
        margin: 0 auto;
        text-align: left;
    }
    .mobile-menu-columns ul li {
        display: flex !important;
        justify-content: start !important;
        align-items:flex-start !important;
    }
    .mobile-menu-columns .a_class,
    .mobile-menu-columns .a_class_bot {
        justify-content: center !important;
        flex-direction: row !important;
        text-align: left !important;
    }
    .mobile-menu-columns .a_class a,
    .mobile-menu-columns .a_class_bot a {
        margin: 0 auto;
    }
}
.current-underlined a {
    text-decoration: none; 
    border-bottom: 3px solid #40662b;
    padding-bottom: 4px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
}
.top_menu, .bot-menu{
    display: none;
}

.top_menu, .bot-menu{
    li{
        margin:6px!important;
    }
}

@media screen and (min-width: 1280px){
    .top_menu, .bot-menu{
        display: flex;
    }
}

footer {
    position: relative;
}
@media (min-width: 768px) {
    footer .bottom-links {
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 40px;
    }
}

@media (max-width: 767px) {
    footer .bottom-links {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        margin-top: 30px;
        gap: 20px;
    }
}

img.pll-flag {
  width: 32px !important;
  height: 20px !important;
}

/* ==========================================================================
   Articles / Single Post Display: Text strictly under images
   ========================================================================== */
.single-post-article .section-blocs.container,
.single-post-article .columns.container,
.single-post-article .bloc_full {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force illustration photos, figures and block images to have the EXACT SAME WIDTH as the text column (100%) */
.single-post-article figure,
.single-post-article figure img,
.single-post-article .wp-block-image,
.single-post-article .wp-block-image img,
.single-post-article .wp-caption,
.single-post-article .wp-caption img,
.single-post-article p > img:only-child:not(.emoji):not(.wp-smiley):not(.icon):not(.icone):not(.no-full-width),
.single-post-article .bloc_full p > img:only-child:not(.emoji):not(.wp-smiley):not(.icon):not(.icone):not(.no-full-width),
.single-post-article img.size-medium:not(.emoji):not(.icon):not(.icone):not(.no-full-width),
.single-post-article img.size-large:not(.emoji):not(.icon):not(.icone):not(.no-full-width),
.single-post-article img.size-full:not(.emoji):not(.icon):not(.icone):not(.no-full-width),
.single-post-article [class*="alignleft"]:not(.emoji):not(.icon):not(.icone):not(.no-full-width),
.single-post-article [class*="alignright"]:not(.emoji):not(.icon):not(.icone):not(.no-full-width),
.single-post-article [class*="aligncenter"]:not(.emoji):not(.icon):not(.icone):not(.no-full-width),
.single-post-article [class*="alignnone"]:not(.emoji):not(.icon):not(.icone):not(.no-full-width) {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* Emojis (e.g. 📍) and smileys: must stay inline at text font size */
.single-post-article img.emoji,
.single-post-article img.wp-smiley,
img.emoji,
img.wp-smiley {
    display: inline !important;
    width: 1.15em !important;
    height: 1.15em !important;
    max-width: none !important;
    vertical-align: -0.15em !important;
    margin: 0 0.15em !important;
    float: none !important;
    clear: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Custom icons, logos or images marked with class 'icon', 'icone' or 'no-full-width' */
.single-post-article img.icon,
.single-post-article img.icone,
.single-post-article img.no-full-width,
.single-post-article .icon img,
.single-post-article .icone img {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 6px !important;
    vertical-align: middle !important;
    clear: none !important;
    border-radius: 0 !important;
}

/* Inline images placed inside paragraphs with surrounding text */
.single-post-article p:not(:has(> img:only-child)) img:not(.size-full):not(.size-large):not(.size-medium) {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    vertical-align: middle !important;
    margin: 0 4px !important;
    clear: none !important;
}

/* Homogeneous vertical margins above and below block images */
.single-post-article figure,
.single-post-article .wp-block-image,
.single-post-article .wp-caption,
.single-post-article p:has(> img:only-child:not(.emoji):not(.wp-smiley):not(.icon):not(.icone):not(.no-full-width)),
.single-post-article > img:not(.emoji):not(.icon):not(.icone):not(.no-full-width),
.single-post-article .page-content > img:not(.emoji):not(.icon):not(.icone):not(.no-full-width),
.single-post-article .bloc_full > img:not(.emoji):not(.icon):not(.icone):not(.no-full-width) {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Reset inner img margins inside wrappers so margins don't compound */
.single-post-article figure img,
.single-post-article .wp-block-image img,
.single-post-article .wp-caption img,
.single-post-article p > img:only-child:not(.emoji):not(.wp-smiley):not(.icon):not(.icone):not(.no-full-width) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 12px !important;
}

/* Media & Text Gutenberg Block */
.single-post-article .wp-block-media-text {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2rem 0 !important;
    gap: 1.25rem !important;
    clear: both !important;
}

.single-post-article .wp-block-media-text .wp-block-media-text__media {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.single-post-article .wp-block-media-text .wp-block-media-text__media img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

.single-post-article .wp-block-media-text .wp-block-media-text__content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.single-post-article .wp-block-media-text .wp-block-media-text__content p:last-child {
    margin-bottom: 0 !important;
}

/* Columns Block */
.single-post-article .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

.single-post-article .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Captions under images */
.single-post-article figcaption,
.single-post-article .wp-caption-text,
.single-post-article .wp-element-caption {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    clear: both !important;
}

/* Hide empty paragraphs/spacers */
.single-post-article p:empty {
    display: none !important;
}

/* Clearfix and typography inside single articles */
.single-post-article .page-content > *,
.single-post-article .bloc_full > * {
    clear: both !important;
}

.single-post-article p {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.75 !important;
    color: #374151;
}

.single-post-article h2,
.single-post-article h3,
.single-post-article h4 {
    color: #041236 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
    clear: both !important;
}

/* ==========================================================================
   Rubrique Contact: Hover effect on email addresses
   ========================================================================== */
.emails-commerciaux a,
.collapsible-content a[href^="mailto:"],
.collapsible-content .emails-commerciaux a,
a[href^="mailto:"] {
    color: #041236;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    cursor: pointer;
}

.emails-commerciaux a:hover,
.collapsible-content a[href^="mailto:"]:hover,
.collapsible-content .emails-commerciaux a:hover,
a[href^="mailto:"]:hover {
    color: #dc2626 !important;
    text-decoration: underline !important;
}