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

#section-filieres ::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid #e9ecef;
}

#section-filieres ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 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: #00ffcc rgba(37, 37, 68, 0);
}

#section-lives {
    scrollbar-width: thin;
    scrollbar-color: #A5FDEC7C rgba(37, 37, 68, 0);
}
#section-jobs {
    scrollbar-width: thin;
    scrollbar-color: #A5FDEC7C 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:18px; 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); }
@media (max-width:575.98px){
    .cta-panel{ flex-direction:column; gap:12px; padding:14px; }
    .cta-btn{ width:100%; }
}

/* ===== BLOG ===== */
#section-blog{ background:#f8fafb; }
#section-blog .blog-title{     font-family: 'Anton', sans-serif;font-weight:400; color: #292929; font-size:clamp(1.6rem,1.1rem + 2.2vw,2.7rem); }
#section-blog .blog-subtitle{     font-family: 'Anton', sans-serif;color:#667085; }
.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:18px;
    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{ display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }
.post-cover{ position:relative; overflow:hidden; border-radius:18px 18px 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{ position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:999px; 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-title{    font-family: 'Anton', sans-serif;margin:0; color:#0f172a; font-weight:300; line-height:1.25; font-size:clamp(1.05rem,.9rem + .5vw,1.35rem); }
.post-excerpt{
    margin:0; color:#475569; font-family: 'Anton', sans-serif;
    font-weight: 200;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px;
}
.post-meta{     letter-spacing:.04em; font-family: 'Anton', 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: 'Anton', 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:999px; 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{ 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%, #ffffff 100%); color:#e9e9e9; }
/* 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;
}
#section-steps .steps-title{    font-family: 'Anton', sans-serif;color: #FFFFFF; font-weight:300; letter-spacing:.06em; text-transform:uppercase; }
.steps-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:26px; }
.step-card{    font-family: 'Anton', sans-serif;
    background: #292929; border:1px solid #292929; border-radius:16px; 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, 255, 204, 0.27); color: #00ffcc; }
.step-heading{     letter-spacing:.04em; font-family: 'Anton', sans-serif;margin:6px 0 10px; color:#ffffff; font-weight:300; text-transform:uppercase; letter-spacing:.04em; font-size: clamp(1rem, .9rem + .3vw, 1.1rem); }
.step-text{     font-family: 'Anton', sans-serif;color:#cfd3cf; max-width: 34ch; margin:0 auto; line-height:1.6; font-size:.98rem; 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:#151821; color:#e9ecf2;    pointer-events: auto !important; }
#section-lives .lives-title{ color:#fff; font-weight:300; letter-spacing:.01em;    font-family: 'Anton', sans-serif;}
#section-lives .lives-subtitle{ color:#b7bcc9;    font-family: 'Anton', sans-serif;}

.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,.15); background:rgba(24,27,38,.9); color:#fff;
    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:#202432; color:#e8ebf4;
    border:1px solid rgba(255,255,255,.06); border-radius:16px; 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: 'Anton', sans-serif;height:140px; background: #0b45c3; display:grid; place-items:center; font-weight:400; letter-spacing:.04em; text-align:center; color:#fff; font-size:1.2rem; }
.live-body{position: relative;
    z-index: 2;
    pointer-events: auto; padding:16px 18px 18px; }
.live-meta{     letter-spacing:.04em; font-family: 'Anton', sans-serif;display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.live-meta .dot{ width:10px; height:10px; border-radius:50%; background:#29d09c; display:inline-block; }
.live-meta .muted{ color:#a9afbe; font-weight:700; }
.live-title{     letter-spacing:.04em;font-family: 'Anton', sans-serif;font-weight:300; color:#f5f7ff; line-height:1.25; font-size: clamp(1rem, .50rem + .3vw, 1.05rem); margin: 4px 0 12px 0; }
.live-chips{      letter-spacing:.04em;font-family: 'Anton', sans-serif;display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip{      letter-spacing:.04em;font-family: 'Anton', sans-serif;display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid #3a4154; color:#c9cfde; background:#262b3a; 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: 'Anton', sans-serif;display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:#23283a; color:#dfe4f4; border:1px solid #38405a; 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; }

@media (max-width: 991.98px){
    .lives-nav.prev{ left:-6px } .lives-nav.next{ right:-6px }
    .live-card{ min-width:78vw; max-width:78vw; }
}
@media (max-width: 575.98px){
    .live-card{ min-width:86vw; max-width:86vw; }
    .live-top{ height:120px; font-size:1rem; }
}

/* Section fond rose (jobs) */
#section-jobs{ background: linear-gradient(180deg, #ffffff 0%, #292929 100%); }
.jobs-title{ letter-spacing:.02em; text-transform:uppercase;     font-family: 'Anton', sans-serif;color: black;
}

.jobs-scroller{ position:relative; }
.jobs-rail{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding: 8px 8px 16px; -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: 420px; 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: 'Anton', sans-serif;position:absolute; top:-14px; left:22px; background: #292929; color:#fff; font-weight:800; font-size:.95rem;
    border-radius:10px; padding:8px 14px; box-shadow:0 8px 22px rgba(31,42,90,.35); white-space:nowrap;
}
.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: 'Anton', 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:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; padding:14px 18px; border-radius:12px;
    border:2px solid #0b45c3; 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: 25px; text-decoration: none; font-weight: 600; border: none; display: inline-flex; align-items: center;
}
.btn-all-jobs:hover{ filter:brightness(.95); }

/* PARTENAIRES */
#section-partners{
    background: linear-gradient(90deg, #fffcfc, #ffffff);
}

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

.logo-scroller{
    position: relative;
    padding: 8px 44px;
    -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: none;          /* plus de noir & 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);
}

.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: 60px;          /* 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;
}

/* Ruban turquoise au milieu à droite */
#section-experience::after {
    content: "";
    position: absolute;
    right: 0;
    top: 55%;           /* centré verticalement, ajuste si besoin */
    transform: translateY(-50%);
    width: 80px;
    height: 40px;
    background: #00F2C3;
    /* bord gauche en biais (pointe vers la gauche) */
    clip-path: polygon(0 100%, 40% 0, 100% 0, 100% 150%);
    z-index: 0;
}

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


.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:400; color: #d7d7d7; position:relative; margin-left: 30px; }
.xp-tab.active{ color: #ffffff; }
.xp-tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:-9px; height:3px; background: #ffffff; border-radius:3px; }
.xp-card{ margin-top:-30px;background:#cfeee6; border-radius:28px; 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:800; color:#0e2722; margin-bottom:14px; }
.xp-text{ color:#1b3a34; margin-bottom:12px;  font-family: Helvetica, Arial, sans-serif;
    font-weight: 600; }
.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); }
.xp-media{ position:relative; border-radius:22px; 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; } }

/* ==== FILIERES ==== */
#section-filieres{ background: linear-gradient(180deg, #EEEEEEFF 0%, #EEEEEEFF 100%) }
.f-tabs{ background:#fff; border:1px solid #eee; border-radius:16px; padding:12px; }
.f-tab{ display:block; width:100%; text-align:left; background:#fff; border:1px solid #eee; border-radius:12px; padding:14px 16px; margin-bottom:10px; font-weight:300; color:#3b3b3b; transition:.2s;font-family: 'Anton', sans-serif; }
.f-tab:last-child{ margin-bottom:0; }
.f-tab:hover{ border-color: #0b45c3; }
.f-tab.active{ border-color: #0b45c3; box-shadow: inset 0 0 0 2px rgb(158, 246, 229); background-color: rgba(165, 253, 236, 0.49)
}

.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:310px; max-width:310px; background:#fff; border-radius:18px; 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: 'Anton', sans-serif;color:#fff; font-size:.72rem; font-weight:300; letter-spacing:.2px; background:rgba(0,0,0,.55); border-radius:10px; padding:6px 10px; }
.f-badge.light{     font-family: 'Anton', sans-serif;background:rgba(255,255,255,.85); color:#222; }
.f-pill{ background:#1f9d7a; }
.f-body{ padding:14px 16px 16px; }
.f-cat{     font-family: 'Anton', sans-serif;font-size:.60rem; font-weight:400; letter-spacing:.08em; color:#7b7f82; text-transform:uppercase; margin-bottom:6px; }
.f-title{     font-family: 'Anton', sans-serif;font-weight:400; color:#1b1f23; margin:0 0 10px;    }
.f-meta{     font-family: 'Anton', sans-serif;display:flex; flex-wrap:wrap; gap:10px 14px; color:#5a5f64; font-size:.85rem; }
.f-meta i{ margin-right:6px; }

@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; }
    .f-card{ min-width:78vw; max-width:78vw; }
}
@media (max-width: 575.98px){
    .f-card{ min-width:86vw; max-width:86vw; }
}


/* Footer */
.footer-custom {  font-size: 13px;letter-spacing:.04em;font-family: 'Anton', sans-serif; background-color: #0b0b0b; color: #ffffff; padding-top: 40px; }
.footer-custom h5 { font-family: 'Anton', sans-serif;color: #00ffcc; font-size: 15px; margin-bottom: 20px; }
.footer-custom ul { font-family: 'Anton', sans-serif;list-style: none; padding-left: 0; }
.footer-custom ul li { margin-bottom: 10px; }
.footer-custom ul li a { font-family: 'Anton', 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; }
.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: 'Anton', 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; }
.btn-brochure:hover { background-color: rgba(255, 255, 255, 0) !important; color: rgb(255, 255, 255) !important; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0); }
.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:6rem;
        font-weight:500;
        margin-bottom: 80px;
        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: 10px; border-radius: 60px; backdrop-filter: blur(15px); border: 1px 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: 1rem; }
    .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;

        /* V personnalisé couleur turquoise */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2300F2C3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 28px;
    }





/* 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: 35px; }
    .badges-container { flex-direction: column; gap: 15px; }
    .filter-row { flex-direction: column; }
    .filter-group { width: 100%; }
}