div#header, div#footer {
    display: none;
}
@font-face {
    font-family: 'Helvetica Bold';
    src: url('../fonts/helve/HelveticaNeue-Bold.woff2') format('woff2'),
        url('../fonts/helve/HelveticaNeue-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
.helve-bold, h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Bold'; 
    font-weight: bold; 
    font-style: normal;
}
@font-face {
    font-family: 'Helvetica Regular';
    src: url('../fonts/helve/HelveticaNeue-Medium.woff2') format('woff2'),
        url('../fonts/helve/HelveticaNeue-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
.helve-regular {
    font-family: 'Helvetica Regular'; 
    font-weight: 500; 
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/helve/Helvetica.woff2') format('woff2'),
        url('../fonts/helve/Helvetica.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.helve,
.texte-footer p a,
.texte-footer p a {
    font-family: 'Helvetica'; 
    font-weight: normal; 
    font-style: normal;
}



/* Scroll bar  */
body,
.contenu-scroll {
    --sb-track-color: #EAEAEA;
    --sb-thumb-color: #1F2F79;
    --sb-size: 10px;
}
body::-webkit-scrollbar,
.contenu-scroll::-webkit-scrollbar {
    width: var(--sb-size)
}
body::-webkit-scrollbar-track,
.contenu-scroll::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 2px;
}
body::-webkit-scrollbar-thumb,
.contenu-scroll::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 2px;
}
@supports not selector(::-webkit-scrollbar) {
    body,
    .contenu-scroll {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}
/* .contenu-scroll {
    direction: rtl;
}
.contenu-scroll > * {
    direction: ltr; 
} */
/* Fin Scroll bar  */

/* curseur du site 
html, body {
    cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='48' viewBox='0 0 24 24'><path fill='%23FFF' stroke='%23009FDA' stroke-width='0.75' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z'/></svg>") 10 4, auto;
} 
fin curseur du site 

/* Fonts - Police  */


/* Fin Fonts - Police  */

/* Style de base  */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-weight: normal;
    color: inherit;
    background-color: transparent;
    overflow-x: hidden;
}
ul, ol {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
}
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
img, picture {
    max-width: 100%;
    height: auto;
    border-style: none;
}
input, button, textarea, select {
    font: inherit;
    border: none;
    outline: none;
    background: transparent !important;
}
button {
    cursor: pointer;
}
blockquote, figure {
    margin: 0;
}
input, button, textarea, select {
    font: inherit;
    border: none;
    outline: none;
    background: none;
}
input:focus,
textarea:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
input, select, textarea {
    width: 100%;
}
.en-after,
.en-before {
    position: relative;
}
.en-after::after,
.en-before::before {
    display: block;
    position: absolute;
    content: '';
}
.hover-el,
#backToTop.visible  {
    transition: transform 0.8s ease;
}
.hover-el:hover,
#backToTop.visible:hover {
    transform: translateY(-4px);
}
input::placeholder,
textarea::placeholder,
input:focus, 
input:active, 
input:target, input, 
input:valid,
textarea:focus, 
textarea:active, 
textarea:target, 
textarea, textarea:valid {
    color: #1F2F79;
}
#backToTop {
    z-index: 90;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border: 1px solid #F6F6F6;
    font-size: 0;
    width: 45px;
    height: 45px;
}
#backToTop::before {
    background-image: url('/wp-content/uploads/2025/06/ASECENT_back-to-top-fleche.png');
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: filter 0.5s ease;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#backToTop:hover::before {
    filter: invert(1);
}
#backToTop.visible {
    opacity: 1;
    visibility: visible;
}
#backToTop.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Fin Style de base  */
.color-bleu {
    color: #1F2F79;
}
.bg-bleu {
    background-color: #1F2F79;
}
.color-gris {
    color: #EAEAEA;
}
.bg-gris {
    background-color: #EAEAEA;
}
#mobile-menu {
    transition: transform 0.4s ease-in-out;
}
.titre-slider {
    line-height: 110.00000000000001%;
    letter-spacing: 0%;
    text-transform: uppercase;
    font-size: 48px;
}
.titre-h2 {
    font-size: 40px;
    line-height: 105%;
    letter-spacing: 0%;
    text-transform: uppercase;
}
.taille-menu {
    font-size: 20px;
    line-height: 114.99999999999999%;
    letter-spacing: 0%;
}
.menu-scroll {
    background: linear-gradient(90deg, #1f2f79f5 0%, #121d4da1 100%) !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.sliderBandeau .swiper-pagination span.swiper-pagination-bullet {
    width: 53px;
    height: 5px;
    border-radius: 4px;
    background: #ffffff;
}
.sliderBandeau .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 150px;
}
.sliderBandeau .trait-blanc::before {
    background-color: #ffffff;
    width: 200px;
    height: 6px;
    left: 0;
    bottom: -20px;
}
.trait-bleu::before,
.trait-blanc::before {
    width: 125px;
    height: 6px;
    left: 0;
    bottom: -20px;
}
.trait-bleu::before {
    background-color: #1f2f79;
}
.trait-blanc::before {
    background-color: #ffffff;
}
/* h1.trait-bleu::before {
    left: 144px;
} */
.les-chiffres {
    font-size: 68px;
    line-height: 110.00000000000001%;
    letter-spacing: -4%;
}
/* .texte-chiffre {
    font-size: 16px;
    line-height: 114.99999999999999%;
    letter-spacing: 0%;
    text-transform: uppercase;
} */
.titre-slider-galerie {
    font-size: 54.51px;
    line-height: 105%;
    letter-spacing: 0%;
    text-transform: uppercase;
}
.texte-slider-galerie {
    font-size: 40px;
    line-height: 105%;
    letter-spacing: 0%;
}
.avant-bleu::before {
    background-color: #1f2f79;
    height: 380px;
    width: 100%;
    bottom: 0;
}
.titre-h5 {
    font-size: 20px;
    line-height: 109.00000000000001%;
    letter-spacing: 0%;
    text-transform: uppercase;
}
.taille-p {
    font-size: 20px;
    line-height: 133%;
    letter-spacing: 0%;
}
.titre-h3,
footer h4 {
    font-size: 24px;
    line-height: 125%;
    letter-spacing: 0%;
    text-transform: uppercase;
}
footer h4 {
    margin-bottom: 35px;
}
.texte-footer p {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
}
.ele-cote::before,
.ele-cote::after {
    background-image: url('/wp-content/uploads/2026/04/PFO-angle-bleu.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    bottom: -40px;
    left: -30px;
}
.ele-cote::after {
    top: -40px;
    right: -30px;
    bottom: auto;
    left: auto;
    transform: rotate(180deg);
}
.metier-item {
    flex: 1;
    transition: flex 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
#metiers-accordion:not(:hover) .metier-item:first-child {
    flex: 2.5;
}
#metiers-accordion:not(:hover) .metier-item:first-child .overlay-gradient {
    opacity: 0.9;
}
#metiers-accordion:not(:hover) .metier-item:first-child .description-container {
    max-height: 300px;
    opacity: 1;
}
#metiers-accordion:not(:hover) .metier-item:first-child .taille-p {
    transform: translateY(0);
}
.metier-item:hover {
    flex: 2.5 !important; 
}
.content-wrapper {
    min-height: 120px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.un-chiffre::before,
.un-chiffre::after {
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-size: contain;
}
.un-chiffre:nth-child(1)::before {
    top: -15px;
    background-image: url('/wp-content/uploads/2026/04/PFO-Crochet.svg');
    left: -15px;
}
.un-chiffre:nth-child(1)::after {
    background-image: url('/wp-content/uploads/2026/04/PFO-Crochet-1.svg');
    top: -15px;
    right: -40px;
    width: 55px;
    height: 26px;
}
.un-chiffre:nth-child(2)::before {
    top: -15px;
    background-image: url('/wp-content/uploads/2026/04/PFO-Crochet.svg');
    right: -15px;
    transform: rotate(90deg);
}
.un-chiffre:nth-child(2)::after {
    bottom: -25px;
    right: -30px;
    background-image: url('/wp-content/uploads/2026/04/PFO-Crochet-1.svg');
    width: 55px;
    height: 26px;
    transform: rotate(90deg);
}
.un-chiffre:nth-child(3)::before {
    bottom: -15px;
    background-image: url('/wp-content/uploads/2026/04/PFO-Crochet.svg');
    left: -15px;
    transform: rotate(-90deg);
}
.un-chiffre:nth-child(3)::after {
    bottom: -15px;
    right: -35px;
    background-image: url('/wp-content/uploads/2026/04/PFO-Crochet-1.svg');
    transform: rotate(180deg);
    width: 55px;
    height: 26px;
}
.un-chiffre:nth-child(4)::before {
    top: -40px;
    background-image: url('/wp-content/uploads/2026/04/PFO-Crochet-3.svg');
    left: -40px;
    width: 55px;
    height: 55px;
}
.un-chiffre:nth-child(4)::after {
    bottom: -15px;
    background-image: url('/wp-content/uploads/2026/04/PFO-Crochet.svg');
    right: -15px;
    transform: rotate(180deg);
}
.trait-deg::before {
    width: 100%;
    height: 10px;
    bottom: -10px;
    background-image: url('https://pfo.akstudio.tech/wp-content/uploads/2026/04/PFO-Progress_bar.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
.lien-soul,
footer p a,
header li a {
    position: relative;
}
.lien-soul::after,
footer p a::after,
header li a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #1F2F79 0%, #42F942 100%);
    transition: transform 0.5s ease-out;
    transform-origin: bottom center;
}
.lien-soul:hover::after,
footer p a:hover::after,
header li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom center;
}
/* #metiers-container .metier-item {
    flex: 1;
    transition: flex 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
#metiers-container:not(:hover) .metier-item.is-default-open {
    flex: 2.5 !important;
}
#metiers-container:not(:hover) .metier-item.is-default-open .overlay-gradient {
    opacity: 0.9 !important;
}
#metiers-container:not(:hover) .metier-item.is-default-open .description-container {
    max-height: 400px !important;
    opacity: 1 !important;
}
#metiers-container:not(:hover) .metier-item.is-default-open .taille-p {
    transform: translateY(0) !important;
}
#metiers-container .metier-item:hover {
    flex: 2.5 !important;
} */





/* Gestion de l'affichage contrôlé du popup métiers */
#metier-overlay-container.flex {
    display: flex !important;
}

#metier-overlay-container .popup-metier {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* On s'assure que le contenu texte ne déborde pas de la boîte blanche */
.description-wysiwyg.contenu-scroll {
    overflow-y: auto;
}

/* Empêche les éléments internes de perturber le ciblage du clic */
.trigger-popup * {
    pointer-events: none;
}





/* Responsive */
@media (min-width: 1024px) {
    .metier-wrapper {
        flex: 1;
        width: auto !important; 
        transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    /* .metier-wrapper:hover {
        flex: 2;
    } */


    /* État initial caché et décalé vers le bas (25px) */
    .filtre-metier,
    .icone-metier {
        opacity: 0 !important;
        transform: translateY(25px);
        /* Transition ultra fluide synchrone pour l'opacité et le mouvement */
        transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* PAR DÉFAUT : Si la grille n'est PAS survolée, le 1er élément est actif (Opacité 1 et calé en bas) */
    #metiers-grille:not(:hover) .metier-wrapper:first-child .icone-metier,
    #metiers-grille:not(:hover) .metier-wrapper:first-child .filtre-metier {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* AU SURVOL : L'élément survolé remonte en douceur à sa position initiale (0) et apparaît */
    .metier-wrapper:hover .icone-metier,
    .metier-wrapper:hover .filtre-metier {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

} 

@media only screen and (max-width: 1535px) {
    .les-chiffres {
        font-size: 55px;
    }
}
@media only screen and (min-width: 1280px) and (max-width: 1300px) {
    .container {
        padding-left: 35px;
        padding-right: 35px;
    }
}
@media only screen and (max-width: 1300px) {
    .ele-cote::before, .ele-cote::after {
        display: none;
    }
}
@media only screen and (max-width: 1280px) {
    .les-chiffres {
        font-size: 45px;
    }
}
@media only screen and (max-width: 1024px) {
    .container {
        width: 768px !important;
    }
    .titre-h2,
    .titre-slider {
        font-size: 30px;
    }
    ul#menu-menu-principal a {
        color: #1F2F79;
    }
    .les-chiffres,
    .titre-slider-galerie {
        font-size: 25px;
    }
    .texte-chiffre {
        font-size: 14px;
    }
    .texte-slider-galerie {
        font-size: 18px;
    }
    #metiers-container .description-container {
        max-height: 600px !important;
        opacity: 1 !important;
    }
    #metiers-container .taille-p {
        transform: translateY(0) !important;
    }
    #metiers-container .overlay-gradient {
        opacity: 0.85 !important;
    }
    .titre-h3, footer h4 {
        font-size: 20px;
    }
}
@media only screen and (max-width: 768px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 25px;
    }
    .titre-h2, .titre-slider {
        font-size: 25px;
    }
    .sliderBandeau .swiper-pagination span.swiper-pagination-bullet {
        width: 35px;
    }
    .sliderBandeau .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 70px;
    }
    .taille-p {
        font-size: 18px;
    }
    .ele-cote::before, .ele-cote::after {
        display: none;
    }
    .texte-footer p {
        font-size: 16px;
    }
    .trait-deg::before {
        width: 65%;
    }
    footer h4 {
        margin-bottom: 15px;
    }
    @keyframes bounceHorizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    }
    .animate-bounce-horizontal {
        animation: bounceHorizontal 2s infinite;
    }

}