/*
Theme Name: Hello Ethicweb
...
*/

/* ============================================
   VARIABLES GLOBALES
   ============================================ */

:root {
    /* Pictos */
    --blue-arrow: url('/wp-content/uploads/2026/06/Fleche-Bleu.svg');
    --white-arrow: url('/wp-content/uploads/2026/06/Fleche-Blanc.svg');

    /*Décoration*/
    --fg-deco-tache-1 :  url('/wp-content/themes/hello-ethicweb/assets/src/tache-1.svg');
    --fg-deco-tache-2 :  url('/wp-content/themes/hello-ethicweb/assets/src/tache-2.svg');
    
    --fg-deco-tilt-1 : url('/wp-content/themes/hello-ethicweb/assets/src/tilt-1.svg');
    --fg-deco-tilt-2 : url('/wp-content/themes/hello-ethicweb/assets/src/tilt-2.svg');
    --fg-deco-tilt-3 : url('/wp-content/themes/hello-ethicweb/assets/src/tilt-3.svg');
    --fg-deco-tilt-4 : url('/wp-content/themes/hello-ethicweb/assets/src/tilt-4.svg');


    /* Fonts */
    --fg-primary-font: Helvetica NEUE PRO;

    /* Couleurs projet */
    --fg-primary: var(--fg-project-color, var(--fg-blue));
    --fg-primary-light: rgb(from var(--fg-primary) r g b / 0.2);
    --fg-primary-ultralight: rgb(from var(--fg-primary) r g b / 0.1);

}

/* ============================================
   BASE / UTILITAIRES
   ============================================ */

html,
body {
    /* max-width: 100%; */
}
body{
    overflow-x: hidden;
}
body:has(#wpadminbar) header{
    margin-top:32px;
}

.e-paragraph-base:not(.fg-link--read-more) a,
.elementor-widget-text-editor:not(.fg-link--read-more) a {
    font-family: inherit;
    color:inherit!important;
    text-decoration: underline 0.01em dotted !important;
}
.fg-blue {
    color: var(--fg-blue);
}

.fg-title--primary,
.fg-primary-color {
    color: var(--fg-primary)!important;
}

.fg-title--colored {
    color: var(--fg-project-color, var(--fg-black)) !important;
}

.trigger,
.trigger-submenu,
.killswitch-submenu,
.killswitch {
    cursor: pointer;
}

ul{
    padding-left:25px;
}
  
li::marker{
    font-size: 25px;
    color: var(--fg-primary);
}
/* ============================================
   DÉCORATION
   ============================================ */
.fg-deco > * {
    position: relative;
    z-index: 1;
}

.fg-deco {
    --fg-deco-width: 20px;
    --fg-deco-height: 20px;
    --fg-deco-mask: var(--fg-deco-tilt-1);
    --fg-deco-color: var(--fg-primary);


    --fg-deco-position-horizontal: calc(0px - var(--fg-deco-width));
    --fg-deco-z-index: 0;

    --fg-deco-top: auto;
    --fg-deco-right: auto;
    --fg-deco-bottom: auto;
    --fg-deco-left: auto;

    --fg-deco-offset-horizontal: 0px;
    --fg-deco-offset-vertical: 0px;

    /*
     * Décalage propre à la forme :
     * sera inversé automatiquement entre gauche et droite.
     */
    --fg-deco-shape-shift-x: 0px;
    --fg-deco-side-shift-x: 0px;

    --fg-deco-translate-x: 0px;
    --fg-deco-translate-y: 0px;
    --fg-deco-rotate: 0deg;
    --fg-deco-scale: 1;

    --fg-deco-z-index: -1;
    --fg-deco-opacity: 1;

    position: relative;
    isolation: isolate;
    overflow: visible;

    &::before,
    &::after {
        content: none;
        display: block;

        position: absolute;
        width: var(--fg-deco-width)!important;
        height: var(--fg-deco-height)!important;

        top: var(--fg-deco-top);
        right: var(--fg-deco-right);
        bottom: var(--fg-deco-bottom);
        left: var(--fg-deco-left);

        background-color: var(--fg-deco-color);

        mask: var(--fg-deco-mask) center / contain no-repeat;
        -webkit-mask: var(--fg-deco-mask) center / contain no-repeat;

        transform:
            translate(
                calc(
                    var(--fg-deco-translate-x)
                    + var(--fg-deco-side-shift-x)
                    + var(--fg-deco-offset-horizontal)
                ),
                calc(
                    var(--fg-deco-translate-y)
                    + var(--fg-deco-offset-vertical)
                )
            )
            rotate(var(--fg-deco-rotate))
            scale(var(--fg-deco-scale));

        opacity: var(--fg-deco-opacity);
        pointer-events: none;
        z-index: var(--fg-deco-z-index);
    }

    &.fg-deco--right {
        --fg-deco-right: var(--fg-deco-position-horizontal);
        --fg-deco-left: auto;
        --fg-deco-side-shift-x: var(--fg-deco-shape-shift-x);

        &::after {
            content: "";
        }
    }

    &.fg-deco--left {
        --fg-deco-right: auto;
        --fg-deco-left: var(--fg-deco-position-horizontal);
        --fg-deco-side-shift-x: calc(0px - var(--fg-deco-shape-shift-x));

        &::before {
            content: "";
        }
    }

    &.fg-deco--center {
        --fg-deco-top: 50%;
        --fg-deco-translate-y: -50%;

    }

    &.fg-deco--top {
        --fg-deco-top: 0;
        --fg-deco-bottom: auto;
        
    }

    &.fg-deco--bottom {
        --fg-deco-top: auto;
        --fg-deco-bottom: 0;
    }

    /* =========================
       Formes
       ========================= */

    &.fg-deco--tilt-1 {
        --fg-deco-mask: var(--fg-deco-tilt-1);
        --fg-deco-width: 100px;
        --fg-deco-height: 120px;
    }

    &.fg-deco--tilt-2 {
        --fg-deco-mask: var(--fg-deco-tilt-2);
        --fg-deco-width: 100px;
        --fg-deco-height: 120px;
    }

    &.fg-deco--tilt-3 {
        --fg-deco-mask: var(--fg-deco-tilt-3);
        --fg-deco-width: 100px;
        --fg-deco-height: 120px;
    }

    &.fg-deco--tilt-4 {
        --fg-deco-mask: var(--fg-deco-tilt-4);
        --fg-deco-width: 100px;
        --fg-deco-height: 120px;
    }

    &.fg-deco--tache-1,
    &.fg-deco--tache-2 {
        --fg-deco-height: clamp(120px, 80%, 240px);
        --fg-deco-width: calc( var(--fg-deco-height) * 0.8 );
        --fg-deco-offset-horizontal : calc(var(--fg-deco-width) * -0.8 );
        
        &.fg-deco--bottom{
            --fg-deco-offset-vertical : calc(var(--fg-deco-width) * 0.5 );
        }
        &.fg-deco--top{
            --fg-deco-offset-vertical : calc(var(--fg-deco-width) * -0.8 );
        }

    }

    &.fg-deco--tache-1 {
        --fg-deco-mask: var(--fg-deco-tache-1);
    }

    &.fg-deco--tache-2 {
        --fg-deco-mask: var(--fg-deco-tache-2);
    }
    /* =========================
       Colors
       ========================= */
     &.fg-deco--white {
        --fg-deco-color : white!important;
        
    }

    /* =========================
       Transformations
       ========================= */

    &.fg-deco--rotate-90 {
        --fg-deco-rotate: 90deg;
    }

    &.fg-deco--rotate-180 {
        --fg-deco-rotate: 180deg;
    }

    &.fg-deco--rotate-270 {
        --fg-deco-rotate: 270deg;
    }

    &.fg-deco--scale-small {
        --fg-deco-scale: 0.75;
    }
    &.fg-deco--scale-medium {
        --fg-deco-scale: 1;
    }

    &.fg-deco--scale-large {
        --fg-deco-scale: 2;
    }

    /* =========================
       Plans
       ========================= */

    &.fg-deco--front {
        --fg-deco-z-index: 2;
    }

    &.fg-deco--back {
        --fg-deco-z-index: -1;
    }
}

.fg-deco--double-tilt{
    @media(min-width : 767px){
        &::before{
            content : var(--fg-deco-tilt-2)!important;
            position: absolute!important;
            left: -70px!important;
            top:20px!important;
        }
        
        &::after{
            content : var(--fg-deco-tilt-4);
            position: absolute;
            right: -80px;
            top: 45%;
            transform : translatey(-50%);
        }
    }
}
/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: oklch(from var(--fg-primary) calc(l * 1.1) c h);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--fg-primary);
}

/* ============================================
   TITRES
   ============================================ */

h2,
.fg-title--h2,
.fg-title__blue-bar,
.fg-project-content h2 {

    --fg-bar-height: 10px;
    --fg-bar-width: 100px;
    margin-top: 0!important;
    font-size : clamp(1.2rem, 2vw, 1.65rem);

    &::after {
        content: '';
        display: block;
        width: var(--fg-bar-width);
        height: var(--fg-bar-height);
        margin-top: 10px;
        background-color: var(--fg-primary);
    }
}

h3{
    text-transform: none;
    color: var(--fg-primary);
    font-size: 1.2rem;
}
/* ============================================
   BOUTONS
   ============================================ */
.fg-button,
.elementor button.fg-button,
.elementor a.fg-button {
    
    color: var(--fg-button-secondary-color, var(--fg-primary));
    background-color: var(--fg-button-primary-color, var(--fg-primary));
    border : 2px solid var(--fg-button-primary-color, var(--fg-primary)); 

    &:hover {
        color: var(--fg-button-primary-color, var(--fg-primary));
        background-color: var(--fg-button-secondary-color, white);
        border-color : var(--fg-button-primary-color, var(--fg-primary));
    }
}


.fg-button.fg-button--border,
.elementor button.fg-button.fg-button--border,
.elementor a.fg-button.fg-button--border,
button.fg-button.filter-active {
    background-color: transparent;
    border-color: var(--fg-button-primary-color, var(--fg-primary));
    color: var(--fg-button-primary-color, var(--fg-primary));

    &:hover {
        color: var(--fg-button-secondary-color, var(--fg-primary));
        background-color: var(--fg-button-primary-color, white);
        border-color: var(--fg-button-primary-color, var(--fg-primary));
    }
}

.fg-button.fg-button--border.fg-button--white,
.fg-button.fg-button--white{
    --fg-button-primary-color : white;
    --fg-button-secondary-color : var(--fg-primary);
}

.fg-button.fg-button--border.fg-button--blue,
.fg-button.fg-button--blue{
    --fg-button-primary-color : var(--fg-primary);
    --fg-button-secondary-color : white;
}


.fg-button.fg-button--small,
.elementor button.fg-button.fg-button--small,
.elementor a.fg-button.fg-button--small {
    padding: 5px 10px;
    font-size: 0.7rem;
}

.fg-button.fg-button--with-arrow,
.elementor button.fg-button.fg-button--with-arrow,
.elementor a.fg-button.fg-button--with-arrow{

    &::after{
        content :  var(--arrow);
    }
}

/* Couleurs */

.fg-button.fg-button--white,
.elementor button.fg-button.fg-button--white,
.elementor a.fg-button.fg-button--white {
    --fg-button-primary-color: white;
    --fg-button-secondary-color: var(--fg-primary);
}

.fg-button.fg-button--blue,
.elementor button.fg-button.fg-button--blue,
.elementor a.fg-button.fg-button--blue {
    --fg-button-primary-color: var(--fg-primary);
    --fg-button-secondary-color: white;
}

/* Bouton "À la une" avec éclair */
.fg-button.fg-button--yellow,
.elementor button.fg-button.fg-button--yellow,
.elementor a.fg-button.fg-button--yellow {
    --fg-button-primary-color: var(--fg-yellow);
    --fg-button-secondary-color: var(--fg-dark-yellow);

    color: var(--fg-black) !important;
    position: relative;
    padding: 5px 10px 5px 25px !important;
    line-height: 1em;

    &:hover {
        background-color: var(--fg-button-primary-color) !important;
        border-color: var(--fg-button-secondary-color) !important;
    }

    &::before {
        content: url('https://fage26.ethicweb.fr/wp-content/uploads/2026/06/Eclair-BTN-Menu-Actu-Elections.svg');
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
    }

    &::after {
        content: 'À la une';
        display: block;
        color: var(--fg-dark-yellow);
        font-size: 0.8rem;
        font-weight: bold;
        text-transform: uppercase;
    }

    @media (max-width: 767px) {
        padding: 5px 10px !important;

        &::before,
        &::after {
            display: none;
        }
    }
}

/* ============================================
   CARTES / COMPOSANTS GÉNÉRIQUES
   ============================================ */

/* Card article */
.fg-card__article {
    &:hover .fg-link--read-more::after {
        transform: translateX(15px);
    }
}

.fg-link--read-more {
    &::after {
        content: var(--blue-arrow);
        width: 20px;
        display: inline-block;
        transition: 0.2s ease;
        margin-left : 20px;
    }
}

.fg-tag a {
    padding: 5px 15px;
    background-color: var(--fg-blue);
    border-radius: 5px;
}

/* Card blanche générique */
.fg-card--white {
    --fg-card-background-primary : white;
    --fg-card-background-secondary : transparent;

    display:flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    padding: 15px ;
    border-radius: 10px;
    border-width: 1px;
    border-color: var(--fg-primary);
    border-style: solid;
    background-color: var(--fg-card-background-primary);

    .fg-card--white__inner_container {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .fg-card--white__content{
        padding: 0px;
        flex-direction: column;
        gap: 10px;
        justify-content: space-between;
    }

    .fg-card--white__icon{
        width: 30%;
        height: 100%;
        max-width: 65px;
        max-height: 55px;
    }

    h3.fg-title--h3 {
        color: var(--fg-primary);
        font-family: var(--fg-primary-font);
        font-weight: 700;
        margin-top: 0;
        font-size: 1rem;
        color: var(--fg-blue);
        text-transform: uppercase;
    }

    p{
        font-family: var(--fg-primary-font);
        font-weight: 400;
        font-size: 0.8rem;
        line-height: var(--bas-line-height);
    }

    &:hover {
        /* background-color: var(--fg-card-background-secondary) !important; */

        h3.fg-title--h3 {
            color: black!important;
            transform: translateY(20px);
            transition: 0.2s ease !important;
        }

        p {
            opacity: 0;
        }
    }
}

/* Card "À propos" */
.fg-about__card {
    --bg-primary-size: 75px;
    --bg-secondary-size: 23px;

    .fg-icon--round {
        --primary-color: var(--fg-blue);
        --secondary-color: white;

        svg path {
            fill: var(--secondary-color);
        }
    }

    .fg-icon--round__background {
        top: 0;
        left: 0;
        transition: all 0.2s ease !important;
    }

    &:hover {
        .fg-icon--round {
            width: var(--bg-primary-size);

            svg path {
                fill: var(--fg-blue);
            }
        }

        .fg-icon--round__background {
            top: calc(100% - var(--bg-secondary-size));
            left: calc(50% - (var(--bg-secondary-size) / 2));
            width: var(--bg-secondary-size);
            min-width: var(--bg-secondary-size);
            max-width: var(--bg-secondary-size);
            height: var(--bg-secondary-size);
            min-height: var(--bg-secondary-size);
            max-height: var(--bg-secondary-size);
        }
    }
}

/* ============================================
   HEADER — GÉNÉRAL
   ============================================ */

header:has(.fg-menu) {
    --menu-height: 160px;
    --fg-topbar-height :50px;

    position: fixed;
    width: 100vw;
    top:0;
    left:0;
    z-index: 100;
    transition:  all 0.4s ease!important;

    .elementor-widget-theme-site-logo img{
        transition:  all 0.4s ease!important;
    }
}

header .fg-overlay{
    pointer-events: none;
}

header:has(.fg-searchbar.active) .fg-overlay{
    pointer-events: visible;
}
header:not(.open).mutated{
    .elementor-widget-theme-site-logo img{
        max-width: 180px!important;

        @media(min-width:1024px){
            max-width: 120px!important;
        }
        @media(max-width:1023px){
            transform: translateY(-10px)!important;
        }
    }
    
}

header:not(.open).scroll-down:not(:has(.fg-searchbar.active)){
    transform: translateY( calc( var(--fg-menu-height) * -1 ));
}

header:not(.open).scroll-up.mutated:not(:has(.fg-searchbar.active)){

    transform: translateY( calc( var(--fg-topbar-height) * -1 ));
}

/* Masque l'overlay dans l'éditeur Elementor */
.elementor-editor-active .fg-overlay {
    display: none !important;
}

/* Overlay sombre derrière la searchbar */
header .fg-overlay {
    position: absolute !important;
    top: 0;
    width: 100vw;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    z-index: -1;
}

header:has(.fg-searchbar.active) .fg-overlay {
    opacity: 1;
    z-index: 1;
}

/* Searchbar animée hors éditeur */
body:not(:has(.elementor-editor-active.postid-16)) header .fg-searchbar {
    position: absolute;
    z-index: 1001;
    transform: translateY(-100%);
    transition: 0.4s ease;

    &.active {
        transform: translateY(0);
    }
}
body.elementor-editor-active:not(.postid-16) header  {
    display: none;
}
/* ============================================
   HEADER — NAVIGATION PRINCIPALE
   ============================================ */

  
.fg-menu__navigation .fg-menu__navigation__inner-container {
    display: flex;
    gap: 50px 0;
    padding: 0;
    line-height: 1em;
}

.fg-menu__navigation .fg-menu-item {
    position: relative;
    padding: 0 10px;
    color: black;
    font-family: Arial, sans-serif;
    font-size: clamp(1.1rem, 1vw, 1.3rem);
    font-weight: bold;
    list-style: none;

    @media (max-width: 1023px) {
        padding: 0 20px;
        border-left: 2px solid var(--fg-blue);
        line-height: 1em;
    }

    @media (min-width: 1024px) {
        font-size: clamp(0.7rem, 1vw, 1rem);

        &:not(:last-child) {
            border-right: 2px solid var(--fg-blue);
        }

        &::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 10px;
            width: 0;
            height: clamp(3px, 0.5vh, 5px);
            background-color: var(--fg-blue);
            transition: 0.2s ease;
        }

        &:hover::after {
            width: 30px;
        }
    }
}

/* Soulignement animé sur les liens du menu secondaire */
.fg-menu .menu-item a {
    position: relative;
    display: block;

    &::after {
        content: '';
        position: absolute;
        left: 20px;
        width: 0;
        height: 4px;
        background-color: var(--fg-blue) !important;
    }

    &:hover::after {
        width: 50px;
    }
}
header:has(.fg-menu .fg-menu-item.active) .fg-menu-item:not(.active){
    opacity: 0.5;
}
/* ============================================
   HEADER — MOBILE
   ============================================ */

@media (max-width: 1023px) {
    header.open {
        max-height: 100vh !important;
    }
    header.open .elementor-widget-theme-site-logo{
        transform: translateY(-30%);
    }
    .fg-menu__navigation-container {
        transform: translateX(100%);
    }

    .fg-menu__navigation .fg-menu__navigation__inner-container {
        flex-direction: column;
    }

    header.open .fg-menu {
        position: relative;
    }

    header.open .fg-menu__navigation-container {
        transform: translateX(0);
    }

    /* Hamburger vers croix */
    header.open .fg-menu .fg-hamburger {
        position: fixed;
        top: 30px;
        right: 30px;

        .fg-stripe {
            position: absolute;
            transition: 0.2s ease;
        }

        .fg-stripe:nth-child(1) {
            transform: rotate(-45deg);
        }

        .fg-stripe:nth-child(2) {
            display: none;
        }

        .fg-stripe:nth-child(3) {
            transform: rotate(45deg);
        }
    }

    /* Boutons extra en bas de l'écran */
    header.open .fg-menu__extra-buttons__container {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        justify-content: space-around !important;
        width: 100vw !important;
        padding: var(--fg-gap-medium) !important;
        background-color: var(--fg-grey);
    }

    header.open .fg-menu__extra-buttons__container .fg-button--yellow,
    header.open .fg-menu__extra-buttons__container .fg-button--open-search {
        display: none;
    }

    header.open .fg-menu__extra-buttons__container .fg-button {
        width: 40%;
        height: 42px;
        max-width: 40%;
        font-size: 0.8rem;
    }

    header:has(.submenu-open) .fg-megamenu {
        transform: translateX(-100%) !important;

        .fg-submenu {
            transform: translateX(50%) !important;
        }
    }
    
    header:has(.fg-megamenu.active) .fg-megamenu.active{
        /* padding-bottom: 100px; */
    }
    
    
}

/* Bouton hamburger */
.fg-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 38px;
    height: 34px;
    padding: 0;
    background-color: transparent;
    border: none;
    z-index: 1000;

    &:hover,
    &:focus {
        background-color: transparent;
    }

    .fg-stripe {
        width: 100%;
        height: 4px;
        background-color: var(--fg-blue);
    }
}

/* ============================================
   MEGA MENU
   ============================================ */

.elementor-editor-wp-page .fg-megamenu {
    display: none !important;
}

body:not(.elementor-editor-active) header {
    .fg-megamenu {
        --top: var(--menu-height);
        --translate-y: -100%;
        --translate-x: -50%;

        position: fixed !important;
        top: var(--top);
        left: 50%;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        transform: translateY(var(--translate-y)) translateX(var(--translate-x));
        transition: 0.4s ease;

        &.active {
            opacity: 1;
            pointer-events: auto;
            z-index: 10;
            transform: translateY(0) translateX(-50%);
        }

        @media (max-width: 767px) {
            --top: 0;
            --translate-y: 0;
            --translate-x: 100%;

            width: 100vw;
            height: 100vh;
            border-radius: 0;
        }
    }

    .fg-submenu {
        @media (max-width: 767px) {
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100vw !important;
            height: 100vh !important;
            padding-top: 200px;
            background-color: var(--fg-white);
            transform: translateX(100%);
            transition: 0.4s ease;

            &.submenu-open {
                z-index: 100;
                transform: translateX(0);
            }
        }
    }
}


.fg-megamenu__link--card {
    cursor: pointer;

    .fg-megamenu__link--card__arrow svg path {
        fill: var(--fg-blue);
    }

    .fg-megamenu__link--card__picto svg path {
        fill: black;
    }
}

header.open .fg-megamenu__links-column{
    @media(max-width : 1023px){

        position:fixed;
        bottom:0;
        z-index: 100;
    }
}

/* ============================================
   SLIDERS
   ============================================ */

.fg-slider {
    .elementor-swiper-button-prev {
        display: none !important;
    }
}

.fg-slider--custom-1 {
    .swiper-slide {
        padding: 10px;
    }

    article {
        margin: 0;
    }

    .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
        background-color: transparent;
        border: 1px solid var(--fg-dark-blue) !important;
    }

    .elementor-swiper-button.elementor-swiper-button-next {
        border: 1px solid var(--fg-grey-2);
    }
}

.custom-swiper{

    padding-right : var(--fg-swiper-arrow-size);

    .fg-card--white{
        --fg-card-background-secondary : white;
    }
    .swiper-wrapper{
        display: flex;
        flex-direction: row!important;
        align-content: center;
        align-items: center;
    }
}
body:has(.swiper) .swiper-custom-button-prev,
body:has(.swiper) .swiper-custom-button-next{
    --fg-swiper-arrow-size : 56px;
    
    position:absolute;
    display:flex;
    justify-content: center;
    align-items: center;
    top: 20px!important;
    right: 0;
    left:auto;
    background-color: var(--fg-primary);
    border-radius: 100px;
    width: var(--fg-swiper-arrow-size);
    height: var(--fg-swiper-arrow-size);
    color: white;

    &.swiper-button-disabled{
        display:none;
    }
    &::after{
        font-size: 1.2rem;
    }
    svg{
        width: 60%;
        height: 60%;
    }
}
body:has(.swiper) .swiper-custom-button-prev{
    z-index: 0;
}
body:has(.swiper) .swiper-custom-button-next{
    z-index: 1;
}

body:has(.swiper) .swiper-custom-pagination{
    margin-top: 10px;
    position: static;

    .swiper-pagination-bullet{
        width: 15px;
        height: 15px;
        border-radius: 0;
        border: 1px solid var(--fg-primary);
        background-color: transparent;
    }
    .swiper-pagination-bullet-active{
        background-color: var(--fg-project-color, --fg-blue);
    }
}


/* ============================================
   SECTIONS PROJET
   ============================================ */
.fg-project-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fg-gap-medium);
}

.fg-project-content > .fg-content__section {
    grid-column: 1 / -1; /* prend les 2 colonnes */
    width: 100%;
}

.fg-project-content > .fg-flexible__objectifs {
    height: auto !important;
}

.fg-numbers__card:hover svg path {
    fill: black;
    transition: 0.2s ease;
}

.fg-project-content {
    counter-reset: h2-count;

    h2 {
        counter-increment: h2-count;

        &::before {
            content: counter(h2-count, upper-roman) '. ';
        }
    }
}

.fg-project-numbers__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.fg-project-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    padding: 20px;
    color: white;
    text-align: center;
    fill: white;
    background-color: var(--fg-primary);
    border-radius: 20px;

    .fg-project-number__icon {
        height: 60px;
    }

    .fg-project-number__number {
        margin: 0;
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1.2em;
    }

    .fg-project-number__text {
        margin: 0;
        font-size: 1rem;
        font-weight: 300;
    }
}

.fg-block--border,
.fg-block--plain {

    ul{
        padding-left:25px;
    }
  
    li::marker{
        font-size: 25px;
        color: var(--fg-primary);
    }
}

.fg-block--border {

    li::marker,
    h3 {
        color: var(--fg-primary)!important;
    }
}
.fg-strong--condensed{
    strong{
        font-family : Helvetica Condensed;
    }
}
.fg-marker--dot{
    --fg-dot-size : 8px;

    &::before{
        content : "";
        display: inline-block;
        width: var(--fg-dot-size);
        height: var(--fg-dot-size);
        background-color: var(--fg-primary);
        border-radius: var(--fg-dot-size);
        margin-right: 20px;
    }
}

.fg-block--scroll{
    --fg-gradient: linear-gradient(to bottom, black 0%, black 38%, transparent 100%, transparent 100%);
    
    max-height: clamp(150px, 8vh, 300px);
    overflow-y: scroll;
    padding-bottom : 20px;
    
    -webkit-mask-image: var(--fg-gradient);
    mask-image: var(--fg-gradient);
}

.fg-border--primary {
    border-color: var(--fg-primary);
}

.fg-block--plain {
    background-color: var(--fg-primary);
    color: white;

    li::marker, h3{
        color:white!important;
    }

    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--fg-primary);
    }

    ::-webkit-scrollbar-thumb {
        background: oklch(from var(--fg-white) calc(l * 1.1) c h);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--fg-primary);
    }
}

/* CTA projet */
.fg-project__cta {
    position: relative;
    display: flex;
    gap: 20px;

    .fg-project_cta__column--image {
        width: 60%;
        border-radius: 5px;
    }

    .fg-project_cta__column--content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 40%;
        min-height: 290px;
        padding: 40px;
        text-align: center;
        background-color: white;
        border: 2px solid var(--fg-primary);
        border-radius: 5px;

        &:hover {
            border-color: black;

            .fg-project_cta__text {
                height: 0;
                overflow: hidden;
            }
        }
    }

    .fg-project_cta__text {
        height: 100%;
        transition: 0.2s ease;
    }

    .fg-decoration--stain {
        position: absolute;
        right: -60px;
        bottom: -60px;
        z-index: -1;
    }

    .fg-project_cta__button.fg-button--border {
        color: var(--fg-primary) !important;
        font-size: 0.8rem !important;
        text-transform: uppercase;
        border: 1px solid var(--fg-primary) !important;

        &:hover {
            color: white !important;
            background-color: var(--fg-primary);
        }
    }

    .fg-project__partner__item {
        width: auto;
        max-width: 200px;
    }
}

/* ============================================
   TABLE DES MATIÈRES PROJET
   ============================================ */

/* Évite que les parents bloquent l'overflow horizontal */
.fg-project__content-table,
.fg-project__content-table .elementor-widget-container,
.fg-project__content-table .elementor-toc,
.fg-project__content-table .elementor-toc__body {
    min-width: 0;
    max-width: 100%;
}

.fg-project__content-table {
    .elementor-toc__list-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 20px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        list-style: none !important;
        cursor: grab;
        scroll-behavior: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;

        &::-webkit-scrollbar {
            display: none;
        }

        &.is-dragging {
            cursor: grabbing;
            user-select: none;
        }
    }

    .elementor-toc__list-item {
        flex: 0 0 200px;
        min-width: 200px;
    }

    .elementor-toc__list-item a {
        display: block;
        user-select: none;
        -webkit-user-drag: none;

        &::before {
            content: counter(item, upper-roman) '. ';
        }
    }
    &:has(.elementor-item-active) .elementor-toc__list-item{
        position:relative;

        &:after{
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            background-color: var(--fg-primary);
            height: 10px;
            bottom: -50px;
            left: 0;
            z-index: 10;
        }
    }
    ol.elementor-toc__list-wrapper .elementor-toc__list-item-text-wrapper::before {
        display: none;
    }

    @media(max-width : 767px){
        height: 60px;
    }
}

/* ============================================
   RESSOURCES PROJET
   ============================================ */

.fg-project__ressources__container {
    background-color: var(--fg-primary-light);
    max-height: calc(100vh - var(--fg-header-height));
    overflow: hidden!important;
    
}
.fg-project__side-column h2{
    font-size: 1.5rem;
}


/* CTA */ 

.fg-cta--border-double{
    position: relative;
    transition: all 0.2s ease-out;
    border-color: var(--fg-primary);
    background-color :  var(--fg-primary-light);
    
    &::before{
        content:'';
        position:absolute;
        border : inherit;
        border-radius: 5px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        transform-origin: center;
        width: calc(100% + 15px);
        height: calc(100% + 15px);
        z-index: -1;
    }

    &:hover{
        background-color: transparent;
  
        &::before{
            transform: translate(-50%, -50%) scale(1.05);

        }
    }
}

.fg-title--askew{
    transform : rotate(-2deg);
}

#fg-map{
    height: 100%;
    min-height: 350px;
    border-radius:  var(--fg-border-radius-small);
}

@media(max-width: 767px ){
    .fg-map__details-container.active{
         position:static;
         transform: translate(0);
         max-height:400px;
    }
}

.swiper.swiper-partners .swiper-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.fg-project__partners{
    position : relative;
}

.swiper-partners-button-prev,
.swiper-partners-button-next{

    --fg-swiper-arrow-size : 70px;

    position:absolute;
    top: 70%;
    transform: translateY(-50%);
    right: calc(var(--fg-swiper-arrow-size) * -1);
    left:auto;
    background-color: var(--fg-project-color, --fg-blue);
    border-radius: 100px;
    width: var(--fg-swiper-arrow-size);
    height: var(--fg-swiper-arrow-size);
    color:white;
    z-index: 1;
    font-size : 2rem;
    &.swiper-button-disabled{
        display:none;
    }
}
.swiper.swiper-partners .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.swiper.swiper-partners .swiper-slide img{
    object-fit: contain;

}

.fg-contact-infos__adress-block p{
    margin: 0;
}


.fg-content__text-block{
    h2{
        margin-bottom : 16px!important;
    }
}


/* flexible */

.fg-flexible__objectifs{

    h3{
        font-size : 1rem;
    }
}


/*Global elementor class*/
.fg-block {
    padding: var(--fg-padding-medium);
    border-radius: var(--fg-border-radius-small);
    flex-direction: column;
    gap: var(--fg-padding-medium);
}

.fg-border--small {
    border-width: 1px;
    border-color: var(--fg-light-medium-grey);
    border-style: solid;
}

.fg-block--border {
    padding: 30px;
    border-radius: var(--fg-border-radius-small);
    border-style: solid;
    flex-direction: column;
    gap: 15px;
    align-self: center;
}

.fg-block--plain {
    background-color: var(--fg-primary);
    color: white;
}

.fg-content__section--cta-1__img {
    object-fit: cover;
    border-radius: var(--fg-border-radius-medium)!important;
}


.fg-content__section--cta-1{
    max-height: 250px;

    .fg-card--white{
        width: auto;
        max-width: 300px;
        min-width: 200px;
        border-radius: 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--fg-primary);
        
    }
    .fg-card--white__inner_container{
        flex-direction: column;
        align-items: center;
    }
    .fg-deco {
        display:flex;
        gap: var(--fg-gap-medium)
    }
    img{
        width: auto!important;
        max-width: 70%!important;
    }
}

.fg-content__section--cta-2{

    padding: var(--fg-padding-medium)!important;
    gap: var(--fg-gap-medium)!important;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    transition: all 0.2s ease-out;
    border: 2px solid var(--fg-primary);
    background-color: var(--fg-primary-light);
    border-radius: 5px;

    h2{
        width:100%
    }
    p{
        width: 50%;
    }
    
    &::before {
        content: '';
        position: absolute;
        border: inherit;
        border-radius: 10px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-origin: center;
        width: calc(100% + 15px);
        height: calc(100% + 15px);
        z-index: -1;
    }
    &:hover{
        background-color: var(--fg-white);

        &::before {
            width: calc(100% + 20px);
            height: calc(100% + 20px);
        }
    }
}

.fg-sidebar{

    @media(max-width: 1023px){
        width:100vw!important;
        height:100vh!important;
        max-width:100vw!important;
        max-height : 100vh !important;
        position:fixed!important;
        top:0;
        left:0;
        background-color: var(--fg-primary);
        transform: translatex(-100%);
        z-index:10!important;

        &.fg-sidebar--open{
            
            transform: translatex(0);

        }
    }
}

.fg-social{
    display: flex;
    gap: var(--fg-gap-small);

    a{ width: fit-content }
    
    .fg-social__network-icon{
        object-fit: contain;
        width: 36px;
        height: 36px;
        padding: 5px;
        background-color: var(--fg-primary);
        border-radius: 100px;

    }
}   

.fg-filters{
    display:flex;
    flex-wrap : wrap; 
    gap: var(--fg-gap-small);

    --fg-gradient: linear-gradient(to right, black 0%, black 90%, transparent 100%, transparent 100%);
    
    overflow-x : auto;
    flex-wrap : nowrap; 
    scrollbar-width: none;   
    -ms-overflow-style: none; 
    -webkit-mask-image: var(--fg-gradient);
    mask-image: var(--fg-gradient);

    &::-webkit-scrollbar{
        display: none;     
    }
    .fg-filter__item{
        width: fit-content!important;
    }
    
}

body:not(.elementor-editor-active) .instances-nationales .swiper-slide:not(.filter-active){
    display:none;
}
.instances-nationales .fg-filters{
    width : 80%;
    margin-left : 20px;
    transform: translatey(-50px);
    cursor: grab;

    @media(min-width: 1024px){
        width : 90%;
    }
}

.fg-slider--instances-nationales{
    min-height: clamp(300px,50vh, 450px);

    .swiper-slide{
        width:fit-content!important;
    }
}

.fg-membre__content{
    h2{
        margin-top: var(--fg-padding-big)!important;
    }
    h3{
        text-transform: none;
        color: var(--fg-primary);
        font-size: 1.2rem;
    }
}
.fg-column--50{
    width: 48%!important;
}

.fg-map select,
.fg-map input{
    border: 1px solid black;
    border-radius: 5px;
    padding: 0.25rem 1rem!important;
    transition: all .3s;
    min-height : 0!important;
    
}
.fg-map button{
    min-height : 0;
    background-color: var(--fg-primary);
    border: 1px solid var(--fg-primary);
    padding: 0;
    
    &:hover{
        background-color: transparent;
        color: var(--fg-primary);
    }
    &:focus{
        background-color: none;
    }
}

.fg-map select,
.fg-map select::picker(select){
  appearance: base-select;
}

.fg-map select{
    position:relative;
    background-color: white;
    line-height: 1em;
    font-size : clamp(14px, 1vw, 1rem);

    &::picker-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        content: url('/wp-content/uploads/2026/06/Fleche-Slider-Bleu.svg');
        width:10px;
        height: 10px;
        transform: translateY(-50%) rotate(90deg);
        margin: 0;

    }
    option::checkmark {
        display:none;
    }
    &::picker(select) {
        background-color: white;
        border: 1px solid black;
        border-radius: 5px;
        padding: 20px;
    }

    &.active,
    &:hover{
        background-color: var(--fg-blue);
        border: 1px solid var(--fg-blue);
        color: white;

        &::picker-icon {
            content: url('/wp-content/uploads/2026/06/Fleche-Slider-Blanc.svg');
        }
    }
}
.fg-map .etw-map__marker{
    background-color: var(--fg-primary);
    border:none;
}
.fg-map .etw-map__marker--federation-de-filiere{
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border-radius: 0;
    
}
.fg-map .etw-map__marker--associations-locales{
    border-radius: 0;
}
.fg-map .etw-map__marker--federations-de-territoire{
    
}
.fg-map .etw-map__marker--agorae{
    
}

.fg-filters--structures select,
.fg-filters--structures input{
    border: 1px solid black;
    border-radius: 5px;
    padding: 0.25rem 2.5rem 0.25rem 1rem!important;
    transition: all .3s;
    min-height : 0;
    
    
}
.fg-filters--structures button{
    min-height : 0;
    background-color: var(--fg-primary);
    border: 1px solid var(--fg-primary);
    padding: 0.25rem 1rem;
    color: white
    ;
    
    &:hover{
        background-color: transparent;
        color: var(--fg-primary);
    }
    &:focus{
        background-color: none;
    }
}

.fg-filters--structures select,
.fg-filters--structures select::picker(select){
  appearance: base-select;
}

.fg-filters--structures select{
    position:relative;
    background-color: white;
    line-height: 1em;
    font-size : clamp(14px, 1vw, 1rem);

    &::picker-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        content: url('/wp-content/uploads/2026/06/Fleche-Slider-Bleu.svg');
        width:10px;
        height: 10px;
        transform: translateY(-50%) rotate(90deg);
        margin: 0;

    }
    option::checkmark {
        display:none;
    }
    &::picker(select) {
        background-color: white;
        border: 1px solid black;
        border-radius: 5px;
        padding: 20px;
    }

    &.active,
    &:hover{
        background-color: var(--fg-blue);
        border: 1px solid var(--fg-blue);
        color: white;

        &::picker-icon {
            content: url('/wp-content/uploads/2026/06/Fleche-Slider-Blanc.svg');
        }
    }
}