#section-filieres ::-webkit-scrollbar {
    width: 16px;
}

#section-filieres ::-webkit-scrollbar-track {
    background: #f8f9fa;

    border-radius: 10px;
    border: 2px solid #e9ecef;
}
/* Réduction de la largeur de la scrollbar sur mobile */



#section-filieres ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgb(158, 246, 229) 0%,rgb(158, 246, 229) 100%);
    border-radius: 10px;
    border: 2px solid #f8f9fa;
    position: relative;
}

#section-filieres ::-webkit-scrollbar-thumb::before {
    content: "☐ ☐ ☐";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

#section-filieres ::-webkit-scrollbar-thumb:hover::before {
    content: "☑ ☑ ☑";
}

/*#section-filieres ::-webkit-scrollbar-thumb:hover {*/
/*    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);*/
/*}*/

/* Pour Firefox */
#section-filieres {


    scrollbar-width: thin;
    scrollbar-color: rgb(158, 246, 229)
    rgba(37, 37, 68, 0);
}

.filieres-title{

    font-weight: 200;
    color: #292929;
    font-family: 'Anton', sans-serif;
    letter-spacing:.04em;
    font-size:42px ;

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


    #section-filieres container {

    }
    #section-filieres {
        margin-left: 0px;
        padding: 0px; /* Supprimer le padding autour du conteneur */
        background: transparent; /* S'assurer que le fond est transparent */
    }

    #section-filieres h2 {
        font-size: 1.8rem; /* Ajuster la taille du titre */
        /*margin-bottom: 1rem;*/
    }

    .f-tabs {
        width: 100%;
        margin-top: -10px;
        margin-bottom: -10px;
        margin-left: 0px;
        display: flex;
        justify-content: space-between; /* Répartir les onglets sur toute la largeur */
        flex-wrap: nowrap; /* Empêcher l'enroulement des onglets */
        gap: 5px; /* Réduire l'espace entre les onglets */

        overflow: hidden; /* Masquer les débordements */
        background: transparent; /* Supprimer l'arrière-plan */
    }

    .f-tabs button {
        font-weight: 600;
        font-size: 0.5rem; /* Réduire la taille de la police pour mobile */
        white-space: nowrap; /* Empêcher la coupe des mots */
        padding: 2px 5px; /* Réduire la taille des boutons pour gagner de la place */
        flex: 1 1 20%; /* Permet aux boutons de prendre une largeur égale */
        background: white; /* Fond transparent */
       /* Bordure légère pour la séparation des onglets */
        border-radius: 5px; /* Coins arrondis */
        color: #292929; /* Couleur du texte */
        transition: all 0.3s ease; /* Animation fluide pour les transitions */
    }

    .f-tabs button.active {
        background-color: rgb(158, 246, 229); /* Fond coloré pour l'onglet actif */
        color: #292929; /* Texte sur fond actif */
    }

    .f-slider {
        display: flex; /* Utiliser flex pour organiser les cartes en ligne */
        gap: 5px; /* Espacement entre les cartes */
        overflow: hidden; /* Masquer la partie excédentaire des cartes */
    }

    .f-card{ min-width:100px; max-width:100px; background:#fff; border-radius:5px; overflow:hidden; border:1px solid #eee; box-shadow:0 8px 24px rgba(0,0,0,.05); scroll-snap-align:start; }



}


@media (max-width: 767px) {
    /* Pour le conteneur qui défile horizontalement */
    .f-slider, .f-tabs, #section-filieres .container {
        -ms-overflow-style: none; /* IE/Edge */
        scrollbar-width: none; /* Firefox */
    }

    .f-slider::-webkit-scrollbar,
    .f-tabs::-webkit-scrollbar,
    #section-filieres .container::-webkit-scrollbar {
        display: none;
    }
}

#section-lives {
    scrollbar-width: thin;
    scrollbar-color: #A5FDEC7C rgba(37, 37, 68, 0);
}
#section-jobs {
    scrollbar-width: thin;
    scrollbar-color: #84f1da rgba(37, 37, 68, 0);
}
    /* ===== CTA Join ===== */
.cta-join{
    position:relative;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    padding:clamp(90px, 12vw, 200px) 0;
    isolation:isolate;
}
@media (max-width: 991.98px){
    .cta-join{ background-attachment:scroll; }
}

.cta-overlay{
    position:absolute; inset:0;
    /*background:*/
            /*radial-gradient(80% 120% at 15% 15%, rgba(0,255,234,.18) 0%, rgba(0,0,0,0) 45%) ,*/
            /*radial-gradient(70% 120% at 85% 25%, rgba(0, 0, 0, 0) 0%, rgba(0,0,0,0) 50%) ,*/
            /*linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.50) 100%);*/
    z-index:0;
}
.cta-inner{ position:relative; z-index:1; }
.cta-title{font-family: 'Anton', sans-serif;
    color:#fff; margin:0 0 26px; text-transform:uppercase; font-weight:300; letter-spacing:.02em;
    line-height:1.08; font-size:clamp(1.6rem, 2.2vw + 1.4rem, 3.2rem);
}
.cta-panel{
    display:inline-flex; gap:18px; background:rgba(18, 16, 22, .58);font-family: 'Anton', sans-serif;
    border:1px solid rgba(255,255,255,.12); border-radius:3px; padding:18px;
    backdrop-filter:blur(8px); box-shadow:0 10px 30px rgba(0,0,0,.25);
}
@supports not (backdrop-filter: blur(8px)) {.cta-panel{ background:rgba(18,16,22,.80); }}
.cta-btn{
    display:inline-flex; align-items:center; justify-content:center; letter-spacing:.04em;
    padding:14px 26px; border-radius:999px; font-weight:400; color:#fff; text-decoration:none; white-space:nowrap;
    background:linear-gradient(135deg, #0b45c3 0%, #0b45c3 55%, #9ef6e5 100%);
    box-shadow:0 8px 22px #0b45c3;
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cta-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0, 0, 0, 0); filter:saturate(1.08); }
/* ===== CTA Join - CORRECTIONS MOBILE ===== */
@media (max-width: 991.98px) {
    .cta-join {
        background-attachment: scroll !important; /* Fixe le parallaxe sur mobile */
        padding: 40px 15px !important; /* Réduit l'espace haut/bas */
        margin: 0 !important; /* Supprime les marges */
        min-height: auto !important; /* Évite la hauteur excessive */
    }

    .cta-overlay {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.47) 0%, rgba(0, 0, 0, 0.55) 100%) !important;
    }

    .cta-inner {
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .cta-title {
        font-size: 1.5rem !important; /* Taille réduite */
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        padding: 0 10px !important;
        text-align: center !important;
    }

    .cta-panel {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        border-radius: 14px !important;
        background: rgba(18, 16, 22, 0.4) !important;
    }

    .btn-blog {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 0.7rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Pour les très petits mobiles */
@media (max-width: 480px) {
    .cta-join {
        padding: 35px 12px !important;
    }

    .cta-title {
        font-size: 1.3rem !important;
        margin-bottom: 16px !important;
        padding: 0 5px !important;
    }

    .cta-panel {
        max-width: 280px !important;
        padding: 14px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }

    .btn-blog {
        padding: 13px 18px !important;
        font-size: 0.9rem !important;
    }
}

/* Correction pour les iPhones et petits écrans */
@media (max-width: 375px) {
    .cta-join {
        padding: 30px 10px !important;
    }

    .cta-title {
        font-size: 1.2rem !important;
    }

    .cta-panel {
        max-width: 260px !important;
        padding: 12px !important;
    }
}
/* ===== BLOG ===== */
#section-blog{  background: #f5f0ee }

.blog-title{
    font-size: 42px;
    font-weight: 200;
    color: #292929;
    font-family: 'Anton', sans-serif;
    letter-spacing: .04em;
    text-align: center;
    text-transform:uppercase;
}


/* Cacher les barres de défilement uniquement sur les écrans de moins de 991px */
@media (max-width: 991.98px) {
    #section-lives {
        overflow: hidden;  /* Cache les barres de défilement globalement */
    }

    .lives-rail {
        overflow-x: auto;  /* Permet le défilement horizontal */
        -ms-overflow-style: none;  /* Pour Internet Explorer et Edge */
        scrollbar-width: none;      /* Pour Firefox */
    }

    /* Cacher la barre de défilement sur Webkit (Chrome, Safari, Opera) */
    .lives-rail::-webkit-scrollbar {
        display: none; /* Masque la barre de défilement */
    }

    /* Empêcher l'affichage du scroll sur la section lives */
    .lives-scroller {
        overflow: hidden; /* Cache les barres de défilement */
    }
}

#section-blog .blog-subtitle{     font-family: 'Helvetica', sans-serif;color: #5d5f62; }
.blog-rail{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
@media (max-width: 991.98px){
    .blog-rail{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
    .post-card{ min-width:82vw; scroll-snap-align:start; }
}
.post-card{
    background:#fff; border:1px solid #e5e7eb; border-radius:10px;
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 16px rgba(16,24,40,.06);
    transition:transform .18s ease, box-shadow .18s ease;    font-family: 'Anton', sans-serif;
}
.post-card:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(16,24,40,.12); }
.post-link{ font-family:"Helvetica Neue";display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }
.post-cover{ position:relative; overflow:hidden; border-radius:10px 10px 0 0; aspect-ratio:16/9; background:#f3f4f6; }
.post-cover img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform .4s ease; }
.post-card:hover .post-cover img{ transform:scale(1.03); }
.post-cover::after{ content:""; position:absolute; inset:auto 0 0 0; height:38%;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 100%); pointer-events:none; }
.post-badge{font-family: Helvetica;letter-spacing: .04em; position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:3px; font-weight:300; font-size:.72rem; color:#fff; }
.badge-entreprise{ background: #0b45c3; }  .badge-candidat{background:#06b6d4;}  .badge-salaire{background:#f59e0b;}
.post-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.post-desc{font-family: 'Helvetica';}
.post-title{    font-family: 'Helvetica', sans-serif;margin:0; color:#0f172a; font-weight:500; line-height:1.25; font-size:20px; }
.post-excerpt{
    margin:0; color:#475569; font-family: 'Helvetica', sans-serif;

    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px;
}
.post-meta{      font-family: 'Helvetica', sans-serif;display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:#6b7280; font-size:.9rem; }
.post-meta .meta-brand{ color:#0f172a; font-weight:300; }
.dot{     font-family: 'Helvetica', sans-serif;width:4px; height:4px; border-radius:50%; background:#cbd5e1; display:inline-block; }

.btn-blog{
    display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:3px; font-weight:400;
    background: #0b45c3; color:#fff; text-decoration:none; box-shadow:0 6px 18px rgba(0, 255, 204, 0);
    transition:transform .15s ease, box-shadow .15s ease; letter-spacing:.04em;
}
.btn-blog:hover,
.btn-blog:focus,
.btn-blog:active {
    text-decoration: none;         /* enlève tout soulignement */
    transform: translateY(-2px);   /* effet léger au hover (optionnel) */
}
.btn-brochure:hover,
.btn-brochure:focus,
.btn-brochure:active{
    background-color: rgba(11, 69, 195, 0);
    border-color: #ffffff !important;
    color: #ffffff;

}

/* empêcher le lien "visited" de changer (souvent violet/noir) */

@media (max-width: 768px) {
    /* 1. TITRES PRINCIPAUX - Alignés à gauche et taille réduite */
    .blog-title {
        font-family: 'Anton', sans-serif;
        color: #292929;
        text-align: left;
        font-size: 1.6rem;
        line-height: 1.4;

    }

    .blog-subtitle {
        text-align: left !important; /* Aligné à gauche */

        margin-bottom: 1.5rem;
        color: #5d5f62;
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* 2. CARTES - Plus compactes */
    .blog-rail {
        gap: 12px; /* Espacement réduit */
        padding-bottom: 8px;
    }

    .post-card {
        min-width: 85vw; /* Légèrement plus large pour moins de vide */
        max-width: 320px;
        border-radius: 14px;
    }

    /* 3. CONTENU DES CARTES - Texte plus petit et aligné à gauche */
    .post-body {
        padding: 12px 14px 14px; /* Padding réduit */
        gap: 8px;
    }

    .post-title {
        font-size: 0.95rem; /* Réduit (était clamp) */
        line-height: 1.2;
        text-align: left;
        margin-bottom: 4px;
    }

    .post-desc {
        font-size: 0.75rem; /* Texte de description plus petit */
        line-height: 1.4;
        text-align: left;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limité à 3 lignes */
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: auto; /* Retiré hauteur minimale fixe */
    }

    .post-meta {
        font-size: 0.7rem; /* Métadonnées plus petites */
        gap: 6px;
        text-align: left;
        justify-content: flex-start; /* Aligner à gauche */
    }

    .post-meta .meta-brand {
        font-size: 0.7rem; /* Marque plus petite */
    }

    /* 4. COUVERTURE ET BADGES */
    .post-cover {
        border-radius: 14px 14px 0 0;
        aspect-ratio: 16/9; /* Conserver le ratio */
    }

    .post-badge {
        font-size: 0.6rem; /* Badge plus petit */
        padding: 4px 8px;
        left: 8px;
        top: 8px;
    }

    /* 5. BOUTON PRINCIPAL - Plus compact */
    .btn-blog {
        padding: 10px 16px;
        font-size: 0.4rem;
        min-height: 20px;
        margin-top: 0.5rem;
    }

    /* 6. MASQUER LA SCROLLBAR (optionnel) */
    .blog-rail {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .blog-rail::-webkit-scrollbar {
        display: none;
    }
}
/*.btn-blog:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,185,129,.35); }*/

/* ==== ÉTAPES D’ADMISSION ==== */
#section-steps{ position: relative; background: linear-gradient(180deg, #292929 0%, #565555 100%);; color:#f5f0ee; }

.steps-title{    text-align:center;font-family: 'Anton', sans-serif;color: white; font-weight:300; letter-spacing:.04em; text-transform:uppercase; }

/* Ruban turquoise en haut à gauche */
/*#section-steps::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 60px;          !* ajuste pour monter/descendre le ruban *!*/
/*    left: 0;*/
/*    width: 130px;*/
/*    height: 50px;*/
/*    background: #00ffcc;*/
/*    !* bord droit en biais, comme sur ton maquettage *!*/
/*    clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%);*/
/*    z-index: 0;*/
/*}*/

/*!* Ruban turquoise en bas à droite *!*/
/*#section-steps::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    right: 0;*/
/*    bottom: -40px;      !* pour qu'il déborde sur le blanc comme sur l'image *!*/
/*    width: 80px;*/
/*    height: 80px;*/
/*    background: #00ffcc;*/
/*    !* bord gauche en biais, pointe vers la gauche *!*/
/*    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);*/
/*    z-index: 0;*/
/*}*/

/* le contenu (titre + cartes) doit passer au-dessus des rubans */
#section-steps > .container{
    position: relative;
    z-index: 1;
}




.steps-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:26px; }
.step-card{    font-family: 'Anton', sans-serif;
    background: #f5f0ee; border:1px solid #f5f0ee; border-radius:3px; padding:26px 22px 28px;
    box-shadow:0 16px 40px rgba(0,0,0,.22); transition:.18s ease; }
.step-card:hover{ transform: translateY(-4px); border-color:#3a403d; box-shadow:0 22px 56px rgba(0,0,0,.28); }
.step-icon{     font-family: 'Anton', sans-serif;width:56px; height:56px; margin:0 auto 14px; border-radius:12px; display:grid; place-items:center; background: rgba(0, 0, 0, 0.16); color: rgba(0, 0, 0, 0.88); }
.step-heading{     letter-spacing:.04em; font-family: 'Helvetica', sans-serif;margin:6px 0 10px; color:#292929; font-weight:300; text-transform:uppercase; letter-spacing:.04em; font-size: clamp(1rem, .9rem + .3vw, 1.1rem); }
.step-text{     font-family: 'Helvetica now', sans-serif;color: #292e32; max-width: 34ch; margin:0 auto; line-height:1.6; font-size:.98rem; letter-spacing:.04em; }



@media (max-width: 768px) {

    .steps-title{    font-size: 1.6rem;
        line-height: 1.4;text-align:center;font-family: 'Anton', sans-serif;color: #ffffff;   text-transform:uppercase; }



    .steps-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:26px; }
    .step-card{    font-family: 'Helvetica', sans-serif; font-size:15px;
        background: #f5f0ee; border:1px solid #292929; border-radius:3px; padding:26px 22px 28px;
        box-shadow:0 16px 40px rgba(0,0,0,.22); transition:.18s ease; }
    .step-card:hover{ transform: translateY(-4px); border-color:#3a403d; box-shadow:0 22px 56px rgba(0,0,0,.28); }
    .step-icon{     font-family: 'Helvetica', sans-serif;width:56px; height:56px; margin:0 auto 14px; border-radius:12px; display:grid; place-items:center; background: rgba(222, 221, 221, 0.88); color: #000000; }
    .step-heading{   font-size:13px;  letter-spacing:.04em; font-family: 'Helvetica', sans-serif;margin:6px 0 10px; color:#292929; font-weight:300; text-transform:uppercase;}
    .step-text{      font-size:13px;font-family: 'Helvetica now', sans-serif;color:#292929; max-width: 34ch; margin:0 auto; line-height:1.6; letter-spacing:.04em; }

}
@media (max-width: 991.98px){ .steps-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575.98px){ .steps-grid{ grid-template-columns: 1fr; } }

/* === LIVES d'info (dark) === */
#section-lives{ background: #292929; color:#e9ecf2;    pointer-events: auto !important; }

.lives-title {
    font-size: 42px;
    color: #fff;
    font-weight: 300;
    letter-spacing: .04em;
    font-family: 'Anton', sans-serif;
    text-align: center;
}



#section-lives .lives-subtitle{ color:#b7bcc9;    font-family: 'Helvetica', sans-serif;text-align: center}

.lives-scroller{ position:relative; }
.lives-rail{ position: relative;
    pointer-events: auto;display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding: 6px 8px 14px; -webkit-overflow-scrolling: touch; }
.lives-rail::-webkit-scrollbar{ height:10px; }
.lives-rail::-webkit-scrollbar-thumb{ background:#2b3040; border-radius:8px; }
.lives-rail::-webkit-scrollbar-track{ background:transparent; }

.lives-nav{
    position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
    border:1px solid rgba(255, 255, 255, 0.01); background: rgba(246, 246, 248, 0.19); color:#00ffcc;
    display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; cursor:pointer; z-index:2;
    box-shadow:0 10px 24px rgba(0,0,0,.3); transition:.2s;
}
.lives-nav:hover{ transform:translateY(-50%) scale(1.04); }
.lives-nav:disabled{ opacity:.35; cursor:not-allowed; }
.lives-nav.prev{ left:-10px } .lives-nav.next{ right:-10px }

.live-card{pointer-events: auto;
    min-width: 340px; max-width: 360px; background: #fcfcfc; color:#e8ebf4;
    border:1px solid rgba(255,255,255,.06); border-radius:10px; overflow:hidden;
    box-shadow:0 16px 38px rgba(0,0,0,.25); scroll-snap-align:start;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.live-card:hover{ transform:translateY(-3px); box-shadow:0 20px 46px rgba(0,0,0,.32); border-color:rgba(255,255,255,.12); }
.live-top{     font-family: 'Helvetica', sans-serif;height:80px; background: #0b45c3; display:grid; place-items:center; text-align:center; color:#fff; font-size:0.8rem; padding: 10px 10px;font-weight: 600}
.live-body{position: relative;
    z-index: 2;
    pointer-events: auto; padding:16px 18px 18px; }
.live-meta .muted{ color: #a8a7a7; font-weight:500; }

.live-meta .dot {
    width: 10px; /* Point plus petit */
    height: 10px;
    color: #00ffcc;
    background-color: #00ffcc;
}
.live-title2{   font-weight:500; text-align: justify;font-family: 'Helvetica now', sans-serif; color:#292929; line-height:1.25; font-size: 12px; margin: 4px 0 12px 0; }

.live-title{     letter-spacing:.04em;font-family: 'Anton', sans-serif; color:#f5f7ff; line-height:1.25; font-size: 13px; margin: 4px 0 12px 0; }
.live-chips{      letter-spacing:.04em;font-family: 'Helvetica', sans-serif;display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip{      letter-spacing:.04em;font-family: 'Helvetica', sans-serif;display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid #dedee0; color: #505050; background: #e5e5e5; font-size:.60rem; font-weight:300; text-transform:uppercase; }
.live-actions{ display:flex; justify-content:space-between; align-items:center; gap:10px; }


.btn-date{    font-family: 'Helvetica', sans-serif;display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background: #eeeff1; color: #4a4a4b; border:1px solid #b5b9c5; font-weight:300; }
.btn-date .caret{ opacity:.8; margin-left:6px; }
    .btn-cta{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:10px 14px;
        border-radius:10px;
        background:#292929;
        color:#fff;
        text-decoration:none;
        border:1px solid #292929;
        font-weight:300;
        transition:.18s ease;
        position: relative;
        z-index: 3;
        cursor: pointer;
        pointer-events: auto;
    }

.btn-cta:hover{ background: #292929; border-color: #484646; color:#fff; }

.lives-all{ color:#cdd3e6; text-decoration:none; font-weight:300; display:inline-flex; align-items:center; gap:6px; }
.lives-all:hover{ color:#ffffff; }
/* === MODIFICATIONS MOBILE POUR SECTION LIVES === */
@media (max-width: 768px) {
    /* Version compacte mais fonctionnelle */
    .btn-date {
        padding: 5px 7px;
        font-size: 0.72rem;
        min-height: 34px;
        gap: 5px;
        flex: 1; /* Prend l'espace disponible */
        min-width: 0; /* Permet la réduction */
        overflow: hidden;
    }

    .btn-date svg {
        width: 11px;
        height: 11px;
        flex-shrink: 0; /* Garde sa taille */
    }

    .btn-date span:not(.caret) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        text-align: left;
    }

    .btn-cta {
        padding: 5px 10px;
        font-size: 0.72rem;
        min-height: 34px;
        flex-shrink: 0; /* Garde sa taille */
        min-width: fit-content;
    }
}

@media (max-width: 768px) {
    /* Version optimale pour mobile */
    .live-chips {
        display: flex;
        gap: 6px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 8px;
        border-radius: 12px;
        border: 1px solid #dedee0;
        color: #505050;
        background: #e5e5e5;
        font-size: 0.58rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        line-height: 1.2;
        min-height: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px; /* Limite la largeur maximale */
    }

    .chip svg {
        width: 10px;
        height: 10px;
        flex-shrink: 0;
    }

    /* Première chip (durée) */
    .chip:nth-child(1) {
        background-color: #f0f0f0;
        border-color: #d0d0d0;
        color: #404040;
    }

    /* Deuxième chip (replay) */

}
@media (max-width: 768px) {
    /* 1. MASQUER LES BOUTONS DE NAVIGATION */
    .lives-nav {
        display: none;
    }

    /* 2. AJUSTER LE CONTENEUR PRINCIPAL */
    .lives-scroller {
        padding: 0 8px;
    }

    /* 3. CARTES PLUS ÉTROITES POUR MONTRER UNE PARTIE DE LA SUIVANTE */
    .live-card {
        min-width: 75vw; /* Réduit de 82vw à 75vw */
        max-width: 280px;
        flex: 0 0 auto; /* Important pour le défilement */
        scroll-snap-align: start;
        margin-right: 8px; /* Espacement entre cartes */
    }

    /* 4. RAIL DE DÉFILEMENT AVEC DÉPASSEMENT VISIBLE */
    .lives-rail {
        gap: 0; /* On gère l'espacement avec margin-right sur les cartes */
        padding: 6px 0 14px 8px; /* Padding gauche pour créer un espace initial */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        /* Pour montrer qu'il y a plus de contenu à droite */

    }

    /* 5. POUR LES TRÈS PETITS ÉCRANS */
    @media (max-width: 480px) {
        .live-card {
            min-width: 73vw; /* Encore plus étroit sur très petits écrans */
            max-width: 250px;
        }

        .live-title2 {
            font-size: 0.8rem;
            line-height: 1.2;
        }

        .live-top {
            height: 60px;
            padding: 8px;
            font-size: 0.7rem;
        }

        .live-body {
            padding: 12px 14px 14px;
        }
    }

    /* 6. AJUSTEMENT DU TITRE PRINCIPAL */
    .lives-title {
        font-size: 1.4rem;
        line-height: 1.5;
        padding: 0 16px;
        margin-bottom: 0.5rem;
    }

    .lives-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
}
/* Section fond rose (jobs) */
#section-jobs{ background: linear-gradient(180deg, #292929 0%, #f5f0ee 100%); }
.jobs-title{ font-size:42px;letter-spacing:.04em; text-transform:uppercase;     font-family: 'Anton', sans-serif;color: white;text-align: center;
}

@media (max-width: 768px) {
    .jobs-title{
 text-transform:uppercase;     font-family: 'Anton', sans-serif;color: white;text-align: left;

        font-size: 1.6rem;
        line-height: 1.4;
    }
}

.jobs-scroller{ position:relative; }
.jobs-rail{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding: 10px 10px 20px; -webkit-overflow-scrolling: touch; }
.jobs-rail::-webkit-scrollbar{height:10px}
.jobs-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35); border-radius:8px}
.jobs-rail::-webkit-scrollbar-track{background:transparent}

.jobs-nav{
    position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
    border:none; background:rgba(255,255,255,.9); box-shadow:0 6px 20px rgba(0,0,0,.15);
    display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; cursor:pointer; z-index:2; transition:.2s;
}
.jobs-nav:hover{ transform:translateY(-50%) scale(1.04); }
.jobs-nav:disabled{ opacity:.35; cursor:not-allowed; }
.jobs-nav.prev{ left:-14px } .jobs-nav.next{ right:-14px }

.job-card{
    min-width: 380px; max-width: 440px; background:#fff; border-radius:18px; padding:28px 28px 26px;
    scroll-snap-align:start; box-shadow: 0 14px 34px rgba(0,0,0,.10); position:relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; border:1px solid rgba(10,18,62,.06);
}
/*.job-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.14); border-color: rgba(10,18,62,.12); }*/
.job-tag{
    font-family: 'Helvetica', sans-serif;position:absolute; top:-11px; left:22px; background: #292929; color:#fff; font-weight:300; font-size:.95rem;
    border-radius:10px; padding:8px 14px; box-shadow:0 8px 22px rgba(31,42,90,.35); white-space:nowrap;
}
.job-title2{    font-family: 'Helvetica', sans-serif;;margin-top:20px; margin-bottom:14px; font-weight:800; color: #292929; line-height:1.25; font-size: 15px; }

.job-title{    font-family: 'Anton', sans-serif;;margin-top:20px; margin-bottom:14px; font-weight:800; color: #292929; line-height:1.25; font-size: clamp(1.02rem, .9rem + .6vw, 1.25rem); }
.job-meta{    font-family: 'Helvetica', sans-serif;display:flex; align-items:center; gap:8px; color:#6a6f7d; font-weight:700; letter-spacing:.02em; margin-bottom:18px; }
.job-meta svg{ color:#8b91a3 }
.btn-apply {
    display: block;
    margin: 0 auto;
    width: fit-content;
    font-family: 'Helvetica', sans-serif;
    /* gardez le reste de vos styles */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;

    padding: 12px 15px;
    border-radius: 12px;
    border: 2px solid rgba(165, 253, 236, 0.49);
    color: #292929;
    background: rgba(165, 253, 236, 0.49);
    box-shadow: inset 0 0 0 0 #292929, 0 8px 20px rgba(21,33,79,.08);
    transition: .18s ease;
}.btn-apply:hover{ color:#fff; background: #292929; box-shadow: inset 0 0 0 2px #292929, 0 12px 24px rgba(21,33,79,.18); }

@media (max-width: 991.98px){
    .jobs-nav.prev{ left:-6px } .jobs-nav.next{ right:-6px }
    .job-card{ min-width:78vw; max-width:78vw; }
}
@media (max-width: 575.98px){
    .job-card{ min-width:86vw; max-width:86vw; }
    .job-tag{ font-size:.9rem }
}
.btn-all-jobs{
    background-color: #0b45c3; color: #ffffff; padding: 10px 25px; border-radius: 3px; text-decoration: none; font-weight: 600; border: none; display: inline-flex; align-items: center;
}
.btn-all-jobs:hover{ filter:brightness(.95);color: white }
@media (max-width: 768px) {
    /* 1. Cartes plus compactes */
    .job-card {
        min-width: 70vw; /* Réduit par rapport à 92vw pour gagner en largeur */
        max-width: 300px; /* Limite maximale plus basse */
        padding: 16px 18px 18px; /* Padding réduit */
        border-radius: 14px; /* Rayon légèrement réduit */
        margin-right: 8px; /* Espacement réduit entre cartes */
    }

    /* 2. Tag plus compact */
    .job-tag {
        font-size: 0.6rem; /* Texte plus petit */
        padding: 5px 10px; /* Moins de padding */
        top: -10px; /* Position remontée */
        left: 16px; /* Alignement ajusté */
    }

    /* 3. Contenu intérieur optimisé */
    .job-title2 {
        font-size: 0.75rem; /* Taille réduite mais lisible */
        margin-top: 19px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .job-meta {
        font-size: 0.8rem; /* Texte plus petit */
        margin-bottom: 10px; /* Espacement réduit */
        gap: 6px; /* Moins d'espace entre icône et texte */
    }

    /* 4. Bouton plus compact mais toujours tapable */
    .btn-apply {
        min-height: 40px; /* Hauteur réduite mais acceptable */
        padding: 10px 16px; /* Padding réduit */
        font-size: 0.6rem; /* Texte légèrement plus petit */
        border-radius: 10px;
    }

    /* 5. Ajustement du rail de défilement */
    .jobs-rail {
        gap: 16px; /* Moins d'espace entre cartes */
        padding: 8px 8px 12px; /* Padding vertical réduit */
    }

    .btn-all-jobs{
        background-color: #0b45c3; color: #ffffff; padding: 10px 25px; border-radius: 3px; text-decoration: none; font-weight: 200; border: none; display: inline-flex; align-items: center;
        font-family: Helvetica;font-size: 11px;margin-top: 20px;
    }
}

/* PARTENAIRES */
#section-partners{
    background: linear-gradient(90deg, #fffcfc, #ffffff);
}
.title-partner {
    font-family: 'Anton', sans-serif;
    color: #292929;

    font-size: 30px; /* Taille pour les petits écrans (mobile) */
}

@media (max-width: 768px) {
    .title-partner {
        font-family: 'Anton', sans-serif;

        color: #292929;
        font-size: 16px; /* Taille pour les petits écrans (mobile) */
    }
}

@media (max-width: 768px) {
    /* Masquer la scrollbar sur mobile mais garder le défilement */
    .jobs-rail {
        -ms-overflow-style: none;  /* IE et Edge */
        scrollbar-width: none;      /* Firefox */
    }

    .jobs-rail::-webkit-scrollbar {
        display: none;  /* Chrome, Safari et Opera */
    }

    /* Optionnel : indication visuelle pour le défilement */
    .jobs-rail {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Effet de fondu aux bords pour indiquer qu'il y a plus de contenu */


    }
}
#section-partners h2{
    /*font-size: clamp(1.25rem, 1.1rem + 1vw, 2rem);*/
}

.logo-scroller{
    position: relative;
    margin-top: 30px;

    -webkit-mask-image: linear-gradient(to right, transparent, #00ffcc 6%, #00ffcc 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #00ffcc 6%, #00ffcc 94%, transparent);
    overflow: hidden; /* important pour l'auto-scroll */
}

.logos{
    display: flex;
    gap: clamp(1.5rem, 2.5vw, 3rem);
    padding: 4px 0 10px;
    margin: 0;
    overflow-x: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.logos::-webkit-scrollbar{ display: none; }

.logo-item{
    flex: 0 0 auto;
}


.partner-logo {
    height: clamp(32px, 4vw, 52px);
    width: auto;
    display: block;
    filter: grayscale(100%);  /* Applique le filtre noir et blanc */
    opacity: 1;
    transition: transform .25s ease, box-shadow .25s ease;
}

.partner-logo:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 18px rgba(15,23,42,.12);
    filter: grayscale(100%) brightness(1.1); /* Effet léger de luminosité au survol */
}



.logo-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    font-size: 30px;
    font-weight: 800;
    color: #00ffcc;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(15,23,42,.12);
    cursor: pointer;
    z-index: 2;
}

.logo-nav.prev{ left: 8px; }
.logo-nav.next{ right: 8px; }

.logo-nav:disabled{
    opacity: .35;
    cursor: default;
}

/* EXPERIENCE */
#section-experience {
    background: linear-gradient(180deg, #292929 0%, #565555 100%);
    position: relative; /* pour ::before / ::after */
}

/*!* Ruban bleu en haut à gauche *!*/
#section-experience::before {
    content: "";
    position: absolute;
    top: 0px;          /* ajuste si tu veux plus haut / plus bas */
    left: 0;
    width: 110px;
    height: 50px;
    background: #0b45c3;
    /* rectangle dont le bord droit est en biais */
    clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%);
    z-index: 0;
}

/*#section-experience::before{*/
/*    top: 10px;          !* ajuste si tu veux la monter/descendre *!*/
/*    left: 0;*/
/*    width: 110px;*/
/*    height: 50px;*/
/*    background: #0b45c3;*/
/*    !* même style de coupure que sur l'image *!*/
/*    clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%);*/
/*}*/


/* Ruban turquoise au milieu à droite */

#section-experience::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -45px;      /* pour qu'il déborde comme sur l'image */
    width: 120px;
    height: 60px;          /* centré verticalement, ajuste si besoin */
    transform: translateY(-50%);

    background: #00F2C3;
    /* bord gauche en biais (pointe vers la gauche) */
    clip-path: polygon(0 100%, 40% 0, 100% 0, 100% 150%);
    z-index: 0;
}


@media (max-width: 991.98px) {
    #section-experience::before {
        width: 50px;  /* réduit la largeur */
        height: 20px; /* réduit la hauteur */

    }

    #section-experience::after {
        width: 50px;  /* réduit la largeur */
        height: 20px; /* réduit la hauteur */

    }
}
/* Le contenu passe au-dessus des rubans */
#section-experience > .container {
    position: relative;
    z-index: 1;
}


#section-experience > .container h2 {
    font-size:42px ;
    text-align: center !important;
    margin-top: 10px;
    font-weight: 200;
    color: #FFFFFF;
    font-family: 'Anton', sans-serif;
    letter-spacing: .04em;

}

/* Pour les écrans plus larges (≥992px) */
@media (min-width: 789px) {
    #section-experience h2 {
        text-align: left !important;          /* Aligner le texte à gauche pour les écrans larges */
        font-size: 1.8em;            /* Taille de la police plus grande sur grand écran */
    }
}


.fw-bold{ font-weight: 300 !important;}
.xp-tabs{ letter-spacing:.04em; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 1.5rem; }
.xp-tabs::-webkit-scrollbar{ display: none; }
@media (min-width: 992px){ .xp-tabs{ overflow: visible; flex-wrap: wrap !important; } }
.xp-tab{ background:transparent; border:none; padding:8px 0; white-space:nowrap; font-weight:200; color: #d7d7d7; position:relative; margin-left: 30px; }
.xp-tab.active{ color: #ffffff; }
.xp-tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:5px; height:3px; background: #ffffff; border-radius:3px; }
.xp-card{ margin-top:-30px;background:#cfeee6; border-radius:8px; padding:24px 18px; box-shadow:0 10px 30px rgba(0,0,0,.06); }
@media (min-width:992px){ .xp-card{ padding:38px; } }
.xp-chip{ position:absolute; top:24px; width:22px; height:50px; border-radius:10px; }
.chip-left{ left:-10px; background:#2763ff; } .chip-right{ right:-10px; background:#17c099; }
.xp-title{ font-weight:500; color:#0e2722; margin-bottom:14px; }
.xp-text{ color:#1b3a34; margin-bottom:12px;  font-family: 'Helvetica';
    }
.xp-cta{ display:inline-block; margin-top:8px; border:1.5px solid #1b3a34; color:#0e2722; text-decoration:none; border-radius:999px; padding:12px 18px; transition:.2s; }
.xp-cta:hover{ background:rgba(0,0,0,.06);color: black }
.xp-media{ position:relative; border-radius:5px; overflow:hidden; background:#e8f6f2; }
.xp-media img{ width:100%; height:auto; display:block; }
.xp-play{ position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.85); border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.15); transition:.2s; }
.xp-play:hover{ transform:scale(1.04); }
.xp-play-icon{ font-size:28px; color:#0e2722; margin-left:4px; }
.xp-shape{ position:absolute; border-radius:50%; filter:blur(0.5px); opacity:.9; pointer-events:none; }
.xp-shape.s1{ width:240px; height:240px; background:#17c099; right:-60px; top:-40px; opacity:.25; }
.xp-shape.s2{ width:200px; height:200px; background:#2dd5b1; left:-40px; bottom:-30px; opacity:.25; }
.xp-shape.s3{ width:120px; height:120px; background:#7ee6d2; right:20px; bottom:10px; opacity:.2; }
.xp-panel{ display:none; } .xp-panel.active{ display:block; }
@media (max-width:991.98px){ .xp-chip{ display:none; } }
@media (max-width: 768px) {
    /* 1. TITRE PRINCIPAL - Réduit significativement */
    #section-experience > .container h2 {
        font-size: 1.6rem; /* Réduit de 35px à 24px environ */
        line-height: 1.4;
        margin-bottom: 0.8rem;
        text-align: left !important;
    }

    /* 2. ONGLETS - Texte plus petit et compacts */
    .xp-tabs {
        gap: 0.8rem; /* Espacement réduit entre onglets */
        margin-bottom: 1rem;
        padding-bottom: 5px; /* Pour l'indicateur actif */
    }

    .xp-tab {
        font-size: 0.75rem; /* Texte plus petit */
        padding: 6px 0;
        margin-left: 0; /* Retire la marge gauche */
        white-space: nowrap;
        min-width: auto;
    }

    .xp-tab.active::after {
        bottom: 2px; /* Remonté pour les petits textes */
        height: 2px;
    }

    /* 3. CARTE PRINCIPALE - Padding réduit */
    .xp-card {
        padding: 16px 14px; /* Réduit de 24px 18px */
        margin-top: -15px; /* Réduit l'effet de chevauchement */
        border-radius: 18px; /* Rayon réduit */
    }

    /* 4. CONTENU DE LA CARTE - Textes plus petits */
    .xp-title {
        font-size: 1.1rem; /* Réduit */
        margin-bottom: 10px;
        line-height: 1.25;
    }

    .xp-text {
        font-size: 0.85rem; /* Texte principal plus petit */
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .xp-cta {
        font-size: 0.8rem; /* Bouton plus petit */
        padding: 8px 14px;
        margin-top: 6px;
    }

    /* 5. MÉDIAS ET IMAGES */
    .xp-media {
        border-radius: 16px; /* Réduit */
        margin-top: 1rem;
    }

    /* 6. ÉLÉMENTS DÉCORATIFS - Optionnel : réduire ou masquer */
    .xp-chip,
    .xp-shape.s1,
    .xp-shape.s2,
    .xp-shape.s3 {
        display: none; /* Masque les éléments décoratifs pour gagner de l'espace */
    }

    /* 7. RUBANS (::before et ::after) - Optionnel : réduire */
    #section-experience::before {
        width: 80px; /* Réduit */
        height: 35px;
        top: 0;
    }

    #section-experience::after {
        width: 90px; /* Réduit */
        height: 40px;
        bottom: -30px;
    }

    /* 8. ESPACEMENT DES COLONNES */
    .row.gx-4.gx-lg-5 {
        gap: 1rem 0; /* Réduit l'espacement vertical */
    }
}
/* ==== FILIERES ==== */
#section-filieres {
    background: #f5f0ee;
}

.f-tabs {

    /*border: 1px solid #eee;*/
    border-radius: 16px;
    padding: 12px;
}

.f-tab {

    display: block;
    font-size: 15px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 10px;

    font-weight: bold;
    color: #3b3b3b;
    transition: 0.2s;
    font-family: 'Helvetica', sans-serif;
}

.f-tab:last-child {
    margin-bottom: 0;
}

.f-tab:hover {
    border-color: rgba(165, 253, 236, 0.49);
}

.f-tab.active {

    border-color: rgba(165, 253, 236, 0.22);
    /*box-shadow: inset 0 0 0 2px rgb(158, 246, 229);*/
    background-color: rgba(165, 253, 236, 0.49);
}

/* Conteneur des onglets (pour mobile seulement) */
@media (max-width: 767px) {
    .f-tabs {

        display: flex;
        overflow-x: auto;  /* Permet de faire défiler horizontalement sur mobile */
        white-space: nowrap;  /* Empêche les onglets de se répartir sur plusieurs lignes */
        padding-bottom: 8px;  /* Espacement inférieur pour la lisibilité */
        -webkit-overflow-scrolling: touch; /* Améliore l'expérience de défilement sur iOS */
    }

    /* Onglets individuels */
    .f-tab {
        display: inline-block;  /* Permet aux onglets de s'aligner horizontalement */
        padding: 10px 12px;
        margin-right: 10px;  /* Espacement entre les onglets */
        font-weight: 300;
        color: #3b3b3b;
        text-align: center;
        white-space: nowrap; /* Empêche le texte d'être coupé sur plusieurs lignes */
    }

    /* Style de l'onglet actif */
    .f-tab.active {
        border-color:rgba(165, 253, 236, 0.49);
        /*box-shadow: inset 0 0 0 2px rgb(158, 246, 229);*/
        background-color: rgba(165, 253, 236, 0.49);


    }

    /* Style de survol de l'onglet */
    /*.f-tab:hover {*/
    /*    border-color: #0b45c3;);*/
    /*}*/

    /* Ajustement de la taille de police et du padding pour mobile */
    .f-tab {
        font-size: 14px;  /* Taille de texte ajustée pour mobile */
        padding: 10px 12px;  /* Réduction de l'espace autour du texte */
    }

}



.f-slider-wrap{ position:relative; }
.f-nav{ position:absolute; top:-58px; right:0; width:38px; height:38px; border-radius:50%; border:1px solid #ddd; background:#fff; font-size:20px; line-height:36px; display:inline-flex; align-items:center; justify-content:center; transition:.2s; z-index:2; }
.f-nav.prev{ right:48px; }
.f-nav:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); }

.f-slider{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; }
.f-slider::-webkit-scrollbar{ height:8px; }
.f-slider::-webkit-scrollbar-thumb{ background:#ddd; border-radius:8px; }

.f-card{ min-width:250px; max-width:250px; background:#fff; border-radius:5px; overflow:hidden; border:1px solid #eee; box-shadow:0 8px 24px rgba(0,0,0,.05); scroll-snap-align:start; }
.f-cover{ position:relative; aspect-ratio:16/9; background:#eee; }
.f-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.f-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 60%); }
.f-cover-badges{ position:absolute; left:12px; top:10px; right:12px; display:flex; flex-wrap:wrap; gap:6px; }
.f-badge, .f-pill{    font-family: 'Helvetica', sans-serif;color:#fff; font-size:.72rem; font-weight:300; letter-spacing:.2px; background:rgba(0,0,0,.55); border-radius:30px; padding:6px 10px; }
.f-badge.light{
    font-family: Helvetica, sans-serif;
    background-color: rgba(255,255,255,.56) !important;
    color: #222 !important;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
}

.f-badge.light.is-active{
    background-color: #fff !important;
    color: #222 !important;
}


.f-pill{ background: #3d37e5; }
.f-body{ padding:14px 16px 16px; }
.f-cat{     font-family: 'Helvetica', sans-serif;font-size:.52rem; font-weight:400; letter-spacing:.08em; color:#7b7f82; text-transform:uppercase; margin-bottom:6px; }
.f-title{     font-family: 'Helvetica', sans-serif;font-weight:400; color:#1b1f23; margin:0 0 10px;    }
.f-meta{     font-family: 'Helvetica', sans-serif;display:flex; flex-wrap:wrap; gap:5px 10px; color:#5a5f64; font-size:.6rem; }
.f-meta i{ margin-right:2px; }

@media (max-width: 991.98px){
    .f-tabs{ display:flex; gap:8px; border-radius:14px; }
    .f-tab{ flex:1; text-align:center; margin:0; }
    .f-nav{ top:-46px; }

}



/*!* Footer *!*/
/*.footer-custom {  font-size: 12px;letter-spacing:.1em;font-family:  sans-serif; background-color: #0b0b0b; color: #ffffff; padding-top: 40px; }*/
/*.footer-custom h5 { font-family:  'Helvetica',sans-serif;color: white; font-size: 15px; margin-bottom: 20px; }*/
/*.footer-custom ul { font-family:  sans-serif;list-style: none; padding-left: 0; }*/
/*.footer-custom ul li { margin-bottom: 10px; }*/
/*.footer-custom ul li a { font-family:  sans-serif;color: #ffffff; text-decoration: none; transition: color 0.3s; }*/
/*.footer-custom ul li a:hover { color: #00ffcc; }*/
/*.footer-custom address span { display: block; margin-bottom: 10px;font-size: 14px }*/
/*.footer-custom address a { color: #ffffff; text-decoration: none; }*/
/*.footer-custom address a:hover { color: #00ffcc; }*/
/*.footer-custom .id-color { color: #0b45c3; margin-right: 10px; width: 20px; }*/
/*.subfooter { background-color: #000000; padding: 20px 0; margin-top: 30px; border-top: 1px solid #333; }*/
/*.subfooter a { color: #ffffff; text-decoration: none; }*/
/*.certification-box { background-color: #1a1a1a; border-left: 3px solid #0b45c3; padding: 15px; margin-top: 20px; }*/
/*.certification-box h6 {font-family: sans-serif; color: #0b45c3; font-weight: bold; }*/
/*.certification-box ul { margin-top: 10px; }*/
/*.copyright { color: #ffffff; }*/








/* WhatsApp flottant */
.whatsapp-link { position: fixed; bottom: 70px; right: 20px; z-index: 9999; }
.whatsapp-link img { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

/* Header boutons */
.menu_side_area { display: flex; align-items: center; gap: 0; }
.btn-brochure { transition: all 0.3s ease; border: 2px solid #ffffff !important;background-color: transparent; color: #ffffff;  padding: 10px 20px; border-radius: 3px; text-decoration: none; font-weight: 600; margin-right: 15px; display: inline-flex; align-items: center; }


.header-phone { padding: 8px 15px; transition: all 0.3s ease; border-radius: 20px; }
.header-phone:hover { background: rgba(255, 255, 255, 0.1); }
.btn-candidater { transition: all 0.3s ease; }
.btn-candidater:hover { background-color: #0b45c3 !important; transform: translateY(-2px); box-shadow: 0 5px 15px rgb(0, 255, 204); }
.fa-download, .fa-user-plus, .fa-phone { font-size: 14px; }

@media (max-width: 768px) {
    .menu_side_area { flex-direction: column; gap: 10px; }
    .btn-brochure, .header-phone, .btn-candidater { margin-right: 0 !important; margin-bottom: 10px; width: 100%; text-align: center; justify-content: center; }
}

/* Hero */
.hero-content { text-align: center; padding: 80px 0; }
    .main-title {
        font-family: 'Anton', sans-serif;
        font-size:6.1rem;
        font-weight:500;
        margin-bottom: 80px;
        margin-top: 110px;
        color: #00ffcc;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
.badges-container { display: flex; justify-content: center; gap: 30px; margin-bottom: 100px; }
.badge-item { background: rgba(255, 255, 255, 0.15); padding: 15px 25px; border-radius: 8px; font-weight: 600; font-size: 1.1rem; color: #fff; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }

.filter-container { background: rgba(0, 0, 255, 0); padding: 8px; border-radius: 3px; backdrop-filter: blur(15px); border: 2px solid rgb(255, 255, 255); max-width: 1100px; margin: 0 auto;margin-bottom: 50px }
.filter-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.filter-group { flex: 1; min-width: 180px; }
.filter-label { display: block; color: #fff; font-weight: 200; font-size: 15px;font-family: 'Helvetica', sans-serif; letter-spacing:.04em; }
.filter-select {
    width: 90%;
    margin-left: 5px;
    padding: 10px 45px 10px 15px;
    border-radius: 8px;
    border: 0;
    background-color: transparent;
    font-size: 1rem;
    color: #ffffff;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Utilisation de l'image téléchargée pour la flèche */
    background-image: url("https://inatec.fr/flechevertbas.png");

    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;
}


/* Mobile view styles */
/* Mobile view styles */






.btn-filter{margin-bottom:10px;background-color: #0b45c3; color: #ffffff; padding: 10px 25px; border-radius: 3px; text-decoration: none; font-weight: 600; border: none; display: inline-flex; align-items: center;width: 245px}

/* Focus */
    .filter-select:focus {
        outline: none;
        background: rgba(255,255,255,0.1);
    }

    /* Pour les options dans la liste déroulante */
/* Options dropdown : effet "verre" simulé */
.filter-select option {
    background: rgb(41, 41, 41); /* plus transparent et bleuté */
    color: #ffffff;
    padding: 8px;
    text-align: center;
}

/* survol d'une option */
.filter-select option:checked,
.filter-select option:hover {
    background: rgb(41, 41, 41);
    color: #ffffff;
}

    /* Style au focus */
    .filter-select:focus {
        outline: none;
        background: rgba(255, 255, 255, 0.1);
    }

    /* Pour centrer la flèche du select (Webkit) */
    .filter-select::-webkit-select-arrow {
        display: none; /* Cache la flèche par défaut */
    }
.filter-button { background: #ff4a17; color: white; border: none; padding: 12px 30px; border-radius: 8px; font-weight: 600; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; min-width: 180px; height: 48px; }
.filter-button:hover { background: #e03e14; transform: translateY(-2px); }
@media (max-width: 768px) {
    .main-title {
        font-size: 45px;

        margin-top: 0px;
        text-align: left !important;
        /* Forcer chaque mot sur une ligne séparée */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* ou center selon préférence */
        gap: 10px; /* espacement entre les mots */
        white-space: normal;
        word-spacing: normal;
    }

    .badges-container {
        flex-direction: column;
        gap: 15px;
    }

    .filter-row {
        flex-direction: column;
    }

    .filter-group {
        width: 100%;
    }
}

/* Mobile view styles */

/* Desktop view styles (Center everything) */
/* Mobile view styles */
@media (max-width: 768px) {
    .filter-container {
        margin-top: 50px;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        /*margin-top: 0 !important;*/
        border-radius: 0 !important;
        border: 0px;
        padding: 20px 20px;
        background-color: #292929;
        position: relative;
        /* Ajouter du padding en bas pour le bouton qui sera en dessous */
        padding-bottom: 70px !important;
    }

    .filter-row {
        color: white;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .filter-group {
        width: 100%;
    }

    .filter-label {
        font-family: 'Helvetica', Sans-serif;
        font-weight: bold;
        text-align: left;
        font-size: 10px;
        color: #fff;
        margin-bottom: 5px;
    }

    .filter-select {
        font-family: 'Helvetica', Sans-serif;
        text-align: left;
        width: 100%;
        padding: 5px;
        font-size: 11px;
        border-radius: 5px;
        background-color: #292929;
        color: #fff;
        display: block;
        margin: 0;

        background-image: url("https://inatec.fr/flechevertbas.png");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 10px;
    }

    .filter-select option {
        text-align: left;
        background: rgb(41, 41, 41);
        color: #ffffff;
        padding: 8px;
    }

    /* Button styling - SEUL LE BOUTON EST EN DEHORS DU CONTAINER */
    .btn-filter {
        font-size: 11px;
        margin-top: 20px;

        background-color: #0b45c3;
        color: white;
        width: 200px;
        padding: 5px ;
        border-radius: 3px;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;

        /* Positionné en dehors du container, centré horizontalement */
        position: absolute;
        bottom: 8px; /* Positionné 20px sous le container */
        left: 50%;
        transform: translateX(-50%);

        /* Ombre pour le faire ressortir */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        z-index: 10;
    }

    .filter-group + .filter-group {
        margin-top: -10px;
        border-top: 1px solid #efebeb;
    }

    .btn-candidater svg {
        margin-right: 10px;
    }
}

/* Desktop view styles (Align everything to the left) */



/* Conservez vos styles CSS existants mais avec la couleur de fond modifiée */
 .footer-custom {
     background-color: #292929 !important;
     color: #ffffff;
     padding-top: 40px;
     font-family: 'Helvetica New',Sans-serif;
     font-size: 12px;
     letter-spacing: .1em;
 }
.footer-custom h5 {
    color: white; font-family: 'Helvetica New',Sans-serif;
    font-size: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;
}
.footer-custom ul {
    list-style: none;
    padding-left: 0;
}
.footer-custom ul li {
    margin-bottom: 8px;
}
.footer-custom ul li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 12px;
}
.footer-custom ul li a:hover {
    color: #00ffcc;
}
.certification-box {
    background-color: #1a1a1a;
    border-left: 3px solid #0b45c3;
    padding: 15px;
}
.certification-box h6 {
    font-family: sans-serif;
    color: #0b45c3;
    font-weight: bold;
    font-size: 12px;
    margin: 0;
    line-height: 1.5;
}

.social-icon a svg{       text-shadow: none;
    color: #fff;
    padding: 12px 10px 8px 10px;
    width: 34px;
    height: 34px;
    text-align: center;
    font-size: 20px;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    margin: 0 3px 0 3px;
    background: #ffffff;

}

.social-icon i{
    text-shadow: none;
    color: #0b45c3;
    padding: 12px 10px 8px 10px;
    width: 34px;
    height: 34px;
    text-align: center;
    font-size: 16px;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    margin: 0 3px 0 3px;
    background: #ffffff;

}

.btn-candidater-circle{
    --size: 50px;                 /* change la taille ici */
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #0b45c3;
    text-decoration: none;

}

.btn-candidater-circle .icon-user{
    width: calc(var(--size) * 0.45);
    height: calc(var(--size) * 0.45);
}

.btn-candidater-circle:hover{
    transform: translateY(-1px);
}