/* ═════════════════════════════════════════════════════════════════════
   CHARTE-OVERRIDE.CSS — v1.0 — Juillet 2026
   emploi-collectivites.fr — bascule du site existant vers la nouvelle charte

   MODE D'EMPLOI
   À charger APRÈS commonStyle.css sur toutes les pages :
     <link rel="stylesheet" href="/Style/commonStyle.css?v=290">
     <link rel="stylesheet" href="/Style/charte-override.css?v=1">
   + l'import des polices (voir §1).

   Ce fichier ne modifie AUCUN nom de classe : il rebranche les classes
   existantes (BlockLink, offerLine, grid, centrer_menu, form_block…)
   sur les tokens de la nouvelle charte. Aucune modification HTML requise.
   Il expose aussi les nouvelles classes (btn, badge, card, grille-table…)
   pour les nouvelles pages.
   ═════════════════════════════════════════════════════════════════════ */


/* ═══ 1. POLICES ══════════════════════════════════════════════════════
   Ajouter dans le <head> AVANT les CSS :
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   (Les @font-face Inter/Montserrat de commonStyle.css deviennent inutiles
   mais peuvent rester : ils ne seront plus référencés.) */


/* ═══ 2. TOKENS OFFICIELS ════════════════════════════════════════════ */
:root {
  /* Identité */
  --navy: #1A3A6B;
  --navy-deep: #0F2548;
  --red: #C8102E;
  --ivory: #F8F7F4;
  --ivory-warm: #F0EEE9;
  /* Bleus fonctionnels */
  --blue: #2B5BA8;
  --blue-pale: #E6EDF8;
  --blue-mid: #D4E2F4;
  --blue-light: #EEF3FB;
  /* Sémantiques */
  --red-pale: #FDE8EC;
  --green: #1B6B35;
  --green-pale: #E6F4EC;
  /* Neutres */
  --white: #FFFFFF;
  --text: #1A1A1A;
  --muted: #6B7280;
  --border: #E5E7EB;
  /* Typographies */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-h1:  Montserrat,'Inter', system-ui, sans-serif;  
  /* Rayons */
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --r-xl: 16px; --r-pill: 20px;
  /* Ombres */
  --shadow-card: 0 4px 16px rgba(26,58,107,.08);
  --shadow-pop: 0 8px 32px rgba(0,0,0,.3);
  --inner-w:1200px;--inner-px:48px;
  /* Bascule de la base existante (commonStyle :root utilise Inter) */
  font-family: var(--font-body);
}
@supports (font-variation-settings: normal) {
  :root { font-family: var(--font-body); }
}



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-body);color:var(--text);font-size:15px;line-height:1.6;background:var(--ivory);}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:var(--font-display);}
.inner{max-width:var(--inner-w);margin:0 auto;padding:0 var(--inner-px);}

/* NAV */
.nav{background:var(--navy);position:sticky;top:0;z-index:100;}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 48px;height:100px;display:flex;align-items:center;justify-content:space-between;}
.nav-left{display:flex;align-items:center;gap:4px;}
.nav-link{font-family:var(--font-display);font-size:15px;font-weight:500;color:rgba(255,255,255,.85);padding:8px 16px;border-radius:7px;display:flex;align-items:center;gap:6px;transition:background .15s;}
.nav-link:hover{background:rgba(255,255,255,.1);}
.nav-link.active{background:rgba(255,255,255,.12);font-weight:700;}
.chevron{width:13px;height:13px;opacity:.5;}
.nav-center{display:flex;align-items:center;gap:12px;}
.logo-mark{width:34px;height:34px;}
.logo-text{font-family:var(--font-display);font-size:12px;font-weight:800;color:var(--white);letter-spacing:.04em;line-height:1.3;}
.logo-text span{font-size:9px;font-weight:400;color:rgba(255,255,255,.5);display:block;}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-txt{font-family:var(--font-display);font-size:15px;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:7px;}
.nav-txt:hover{color:var(--white);}
.nav-ico{width:16px;height:16px;opacity:.7;}
.nav-right .btn-sm{font-family:var(--font-display);font-size:13px;font-weight:600;line-height:1;padding:9px 16px;margin:0;border:none;border-radius:var(--r-sm);background:var(--red);color:white;cursor:pointer;display:inline-flex;align-items:center;align-self:center;vertical-align:middle;float:none;height:auto;white-space:nowrap;}
.nav-right .btn-sm:hover{background:#A50D26;}
.nav-txt{line-height:1;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;}
.hamburger span{display:block;width:22px;height:2px;background:white;border-radius:2px;transition:transform .25s,opacity .25s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-drawer{display:none;position:fixed;top:64px;left:0;right:0;background:var(--navy-deep);z-index:99;padding:24px 20px;flex-direction:column;gap:4px;border-top:1px solid rgba(255,255,255,.08);}
.mobile-drawer.open{display:flex;}
.drawer-link{font-family:var(--font-display);font-size:16px;color:rgba(255,255,255,.85);padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);}
.drawer-divider{height:1px;background:rgba(255,255,255,.08);margin:8px 0;}
.drawer-cta{margin-top:12px;background:var(--red);color:white;border:none;border-radius:8px;padding:14px;font-family:var(--font-display);font-size:15px;font-weight:600;cursor:pointer;width:100%;}

/* PAGE HERO */
.page-hero{background:var(--navy);padding:0; color:var(--white)}
.ph-inner{max-width:1200px;margin:0 auto;padding:0 48px;}
.bc{display:flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.4);padding:14px 0 0;flex-wrap:wrap;}
.bc a{color:rgba(255,255,255,.6);font-weight:500;transition:color .15s;}
.bc a:hover{color:white;}
.bc-sep{color:rgba(255,255,255,.2);}
.ph-chips{display:flex;gap:6px;margin-top:20px;}
.ph-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-pill);padding:4px 12px;font-size:12px;font-weight:600;color:rgba(255,255,255,.75);font-family:var(--font-display);}
.ph-title{font-family:var(--font-h1);font-size:36px;font-weight:800;color:var(--white);letter-spacing:-.025em;margin-top:12px;margin-bottom:10px;line-height:1.1;}
.ph-desc{font-size:15px;color:rgba(255,255,255,.65);line-height:1.7;max-width:620px;margin-bottom:20px;}

/* STATS ROW */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:0;padding-bottom:28px;}
.stat-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:16px 18px;}
.stat-card-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);font-family:var(--font-display);margin-bottom:6px;}
.stat-card-val{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--white);letter-spacing:-.02em;line-height:1;}
.stat-card-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px;}

/* GRADE TABS */
.grade-tabs-bar{background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.08);}
.grade-tabs{max-width:1200px;margin:0 auto;padding:0 48px;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;}
.grade-tabs::-webkit-scrollbar{display:none;}
.grade-tab{font-family:var(--font-display);font-size:14px;font-weight:500;color:rgba(255,255,255,.45);padding:13px 18px;cursor:pointer;border-bottom:3px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;}
.grade-tab:hover{color:rgba(255,255,255,.8);}
.grade-tab.active{color:var(--white);font-weight:700;border-bottom-color:var(--red);}

/* MAIN */
.main{padding:44px 0 80px;}

/* GRADE SECTIONS */
.grade-section{margin-bottom:48px;}
.grade-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap;}
.grade-section-left{display:flex;align-items:center;gap:12px;}
.grade-bar{width:4px;height:30px;background:var(--red);border-radius:2px;flex-shrink:0;}
.grade-section-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.01em;margin:0;}
.grade-cat-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:white;border-radius:5px;padding:2px 9px;font-size:11px;font-weight:700;font-family:var(--font-display);}
.grade-link{font-size:13px;font-weight:500;color:var(--blue);display:flex;align-items:center;gap:4px;flex-shrink:0;}
.grade-link:hover{text-decoration:underline;}

/* TABLE */
.table-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
.grille-table{width:100%;border-collapse:collapse;}
.grille-table thead tr{background:var(--navy);}
.grille-table thead th{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.6);padding:11px 16px;text-align:left;}
.grille-table thead th.r{text-align:right;}
.grille-table tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
.grille-table tbody tr:last-child{border-bottom:none;}
.grille-table tbody tr:hover{background:var(--blue-pale);}
.grille-table tbody tr:nth-child(even){background:var(--ivory);}
.grille-table tbody tr:nth-child(even):hover{background:var(--blue-pale);}
.grille-table td{padding:11px 16px;font-size:14px;vertical-align:middle;}
.grille-table td.r{text-align:right;}
.td-echelon{font-family:var(--font-display);font-weight:700;color:var(--navy);}
.td-ib{color:var(--muted);}
.td-im{font-weight:700;color:var(--blue);}
.td-brut{font-weight:600;color:var(--navy);}
.td-net{font-weight:700;color:var(--green);}
.td-duree{color:var(--muted);font-size:13px;}
.td-terminal{font-size:11px;font-weight:600;background:var(--blue-pale);color:var(--navy);border-radius:4px;padding:2px 7px;font-family:var(--font-display);}
.table-footer{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:var(--ivory);border-top:1px solid var(--border);font-size:12px;color:var(--muted);flex-wrap:wrap;gap:8px;}
.table-footer-cta{font-size:13px;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:4px;}
.table-footer-cta:hover{text-decoration:underline;}

/* ALERTE BANNER */
.alerte-band{background:var(--ivory);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap;}
.alerte-band-left{display:flex;align-items:center;gap:10px;}
.alerte-icon{width:30px;height:30px;background:var(--blue-pale);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.alerte-text{font-size:13px;color:var(--muted);}
.alerte-text b{font-family:var(--font-display);font-size:13.5px;color:var(--navy);display:block;margin-bottom:3px;font-weight:600;}
.alerte-btn{background:transparent;color:var(--blue);border:1.5px solid var(--blue);border-radius:var(--r-sm);padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-display);white-space:nowrap;transition:background .15s,color .15s;flex-shrink:0;}
.alerte-btn:hover{background:var(--blue);color:white;}

/* OFFRES */
.offres-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy);margin:28px 0 14px;display:flex;align-items:center;justify-content:space-between;}
.offres-title a{font-size:13px;font-weight:500;color:var(--blue);}
.offer-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:8px;display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.offer-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(26,58,107,.07);}
.offer-logo{width:58px;height:46px;border-radius:8px;border:1px solid var(--border);overflow:hidden;background:white;display:flex;align-items:center;justify-content:center;}
.offer-employer{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--blue);margin-bottom:4px;}
.offer-title{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--navy);line-height:1.25;margin-bottom:6px;}
.offer-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);}
.badge-new{background:var(--green-pale);color:var(--green);font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;}
.badge-urgent{background:var(--red-pale);color:var(--red);font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;}
.btn-voir{background:var(--navy);color:white;border:none;border-radius:7px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-display);transition:background .15s;white-space:nowrap;}
.btn-voir:hover{background:var(--red);}

/* SEPARATOR */
.section-sep{border:none;border-top:1px solid var(--border);margin:40px 0;}

/* ÉDITORIAL */
.edito-block{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 36px;margin-bottom:24px;}
.edito-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--navy);margin:0 0 14px;letter-spacing:-.01em;}
.edito-text{font-size:15px;color:var(--muted);line-height:1.75;}
.edito-text b{color:var(--text);font-weight:600;}
.edito-text p{margin-bottom:12px;}
.edito-text p:last-child{margin-bottom:0;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);padding:18px 0;}
.faq-item:last-child{border-bottom:none;}
.faq-q{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.faq-q svg{flex-shrink:0;margin-top:2px;transition:transform .2s;}
.faq-q.open svg{transform:rotate(180deg);}
.faq-a{font-size:14px;color:var(--muted);line-height:1.7;}

/* GRADES NAV */
.grades-nav{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-top:40px;}
.grades-nav-title{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--navy);padding:14px 20px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.06em;margin:0;}
.grades-nav-item{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);font-size:14px;cursor:pointer;transition:background .12s;}
.grades-nav-item:last-child{border-bottom:none;}
.grades-nav-item:hover{background:var(--blue-pale);}
.grades-nav-label{font-family:var(--font-display);font-weight:600;color:var(--navy);}
.grades-nav-sub{font-size:12px;color:var(--muted);font-weight:400;margin-top:2px;}
.grades-nav-arrow{color:var(--muted);font-size:13px;}

/* CTA CALCUL */
.calc-cta{background:var(--blue-pale);border:1px solid var(--blue-mid);border-radius:var(--r-xl);padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:32px 0;flex-wrap:wrap;}
.calc-cta-text{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--navy);}
.calc-cta-sub{font-size:13px;color:var(--muted);margin-top:3px;}
.calc-cta-btn{background:var(--navy);color:white;border:none;border-radius:var(--r-sm);padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-display);white-space:nowrap;}

/* RESPONSIVE */
@media(max-width:767px){
  :root{--inner-px:20px;}
  .nav-inner{height:64px;max-width:100%;padding:0 20px;}
  .nav-left,.nav-txt{display:none;}
  .hamburger{display:flex;}
  .ph-inner{padding:0 20px;max-width:100%;}
  .grade-tabs{padding:0 20px;}
  .ph-title{font-size:26px;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .offer-card{grid-template-columns:46px 1fr;gap:10px;}
  .offer-card .btn-voir{display:none;}
  .edito-block{padding:20px;}
  .grille-table td:nth-child(2),.grille-table th:nth-child(2){display:none;}
}

/* ── HUB FICHES UTILES ── */
.hero-search{margin:22px 0 0;display:flex;gap:10px;}
.hero-search input{flex:1;padding:13px 18px;border-radius:10px;border:none;font-size:15px;font-family:var(--font-body);outline:none;color:var(--navy);}
.hero-search button{padding:13px 22px;border-radius:10px;border:none;background:var(--red);color:white;font-weight:600;font-size:14px;cursor:pointer;font-family:var(--font-display);}
.hero-mini-stats{display:flex;gap:22px;margin-top:20px;flex-wrap:wrap;}
.hms{font-size:13px;color:rgba(255,255,255,.85);}
.hms b{font-family:var(--font-display);font-size:20px;color:white;display:block;letter-spacing:-.01em;}
.rub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.rub-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.rub-grid{grid-template-columns:1fr;}}
.rub-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px 24px;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;position:relative;}
.rub-card:hover{box-shadow:0 8px 24px rgba(15,32,68,.10);transform:translateY(-2px);}
.rub-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.rub-icon{width:42px;height:42px;border-radius:11px;background:#EEF3FB;display:flex;align-items:center;justify-content:center;}
.rub-count{font-size:12px;font-weight:700;color:var(--blue);background:#EEF3FB;padding:4px 11px;border-radius:99px;}
.rub-title{margin:0 0 8px;font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.01em;}
.rub-title a{color:var(--navy);text-decoration:none;}
.rub-title a:hover{color:var(--blue);}
.rub-title a::after{content:"";position:absolute;inset:0;}
.rub-desc{font-size:13.5px;color:var(--muted);line-height:1.55;flex:1;margin:0;}
.rub-go{margin-top:14px;font-size:13px;font-weight:600;color:var(--blue);}
.pop-list{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
.pop-item{display:flex;align-items:center;gap:16px;padding:15px 22px;border-bottom:1px solid var(--bg);text-decoration:none;transition:background .12s;}
.pop-item:last-child{border-bottom:none;}
.pop-item:hover{background:#F7FAFF;}
.pop-num{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--blue);opacity:.5;width:24px;flex-shrink:0;}
.pop-txt{flex:1;}
.pop-name{font-size:14.5px;font-weight:600;color:var(--navy);}
.pop-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
.pop-arrow{color:var(--blue);font-size:16px;flex-shrink:0;}
.maillage{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:800px){.maillage{grid-template-columns:1fr;}}
.mail-col{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px 24px;}
.mail-col h3{margin:0 0 12px;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--navy);}
.mail-col a{display:block;font-size:13.5px;color:var(--text);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--bg);}
.mail-col a:last-child{border-bottom:none;}
.mail-col a:hover{color:var(--blue);}
.hub-h2{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.01em;margin:0 0 16px;}














/* ═══ 3. BASE : TYPO & LIENS ═════════════════════════════════════════ */
body, div, p, table, input, select, textarea, button {
  font-family: var(--font-body);
}
body { color: var(--text); }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
.boxTitle h1, .boxTitle h2, .BlockTitle h1, .BlockTitle .h2,
.h1home, .subMenuTitle {
  font-family: var(--font-h1) !important;
  letter-spacing: -.01em;
}
h1, .h1 { color: var(--navy); font-weight: 800; letter-spacing: -.02em; }
.h1 { color: var(--navy); }
.boxTitle h1, .boxTitle h2 { color: var(--navy); }
.h1home, .h1home div { color: var(--navy); font-weight: 800; }

/* Liens : ancien #1c7ed6 → blue */
a { color: var(--blue); }
a:hover { font-weight: inherit; } /* neutralise le "hover = bold" historique qui fait sauter les layouts */
a:hover { text-decoration: underline; }

.colorB, .fontBlue, .fontwhite3, .linkHL, .fontBBlue, .BeauLien,
.freqSearch a, .redLink, .blueLink, .gridBlueLink,
h2.TitreOffre a, h3.TitreCV a, .selectedOffers h3 a,
#offerScroll span, .blockBanner h3 a, .linkpath, .linkpath a,
a.BlueArrowLink, .SDFAQline, option, .qtab .colored {
  color: var(--blue) !important;
}
.linkHL:hover { color: var(--navy); }

.colorR, .fontred2, .fontred22, .redNotes, .qtab .colored2,
.redLink, a.redLink, a:visited.redLink, .bloc_GI a, #menu_5 > span {
  color: var(--red) !important;
}
.colorG { color: var(--green); }

.bgcolorB { background-color: var(--navy); }
.bgcolorR { background-color: var(--red); }
.bgcolorG { background-color: var(--green); }

.highlight { background-color: var(--blue-pale); border-bottom: solid 1px var(--navy); }


/* ═══ 4. HEADER & MENU ═══════════════════════════════════════════════ */
header { border-bottom: solid 2px var(--navy); }

a.header-button:hover { background-color: var(--navy); }

.connection { font-family: var(--font-display); font-weight: 600; }

#quickmenu a:hover { color: var(--blue); }

.menu_button:hover, .menu_button.hover { color: var(--navy); }
.menu_button.menu_5:hover, .menu_button.menu_5.hover { color: var(--red); }

#centrer_menu ul li ul, #centrer_menu ul li .ul {
  border: solid 1px var(--border);
  border-top: solid 3px var(--blue);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
#menu_5 .ul {
  border-top: solid 3px var(--blue);
}
#centrer_menu > ul > li > span { font-family: var(--font-display); font-weight: 600; }
#accountBlockPopup { background-color: var(--navy); }

/* Menu mobile */
@media (max-width: 750px) {
  #centrer_menu ul li, .blockOnHover .titleOnHover { color: var(--navy); }
  #centrer_menu ul li ul, #centrer_menu ul li .ul { border-top: solid 1px var(--navy); box-shadow: none; }
}


/* ═══ 5. BOUTONS ═════════════════════════════════════════════════════
   Les .BlockLink existants sont rebranchés sur la charte :
   - toutes les variantes red* → rouge charte #C8102E
   - toutes les variantes blue* → navy (plein) ou blue (contour)
   - rayon ramené à --r-sm (8px), typo Space Grotesk 600            */
.BlockLink {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: var(--r-sm);
  transition: opacity .15s, background .15s, color .15s;
}
.BlockLink.big, .BlockLink.round { border-radius: var(--r-sm); }

/* Rouges (pleins) */
a.BlockLink.red, .BlockLink.red,
a.BlockLink.red5, .BlockLink.red5 {
  background-color: var(--red) !important; border-color: var(--red); color: #FFF;
}
a.BlockLink.red:hover, .BlockLink.red:hover, .BlockLink.red.selected,
a.BlockLink.red5:hover, .BlockLink.red5:hover, .BlockLink.red5.selected {
  background-color: #A50D26 !important; border-color: #A50D26;
}
/* Rouges (contour) */
a.BlockLink.red2, .BlockLink.red2, a.BlockLink.red3, .BlockLink.red3 {
  border: solid 1.5px var(--red); color: var(--red); background-color: #FFF;
}
a.BlockLink.red2:hover, .BlockLink.red2:hover, .BlockLink.red2.selected,
a.BlockLink.red3:hover, .BlockLink.red3:hover, .BlockLink.red3.selected {
  background-color: var(--red); color: #FFF !important;
}
a.BlockLink.red4, .BlockLink.red4 {
  border: solid 1px var(--red-pale); background-color: var(--red-pale); color: var(--red);
}
a.BlockLink.red4:hover, .BlockLink.red4:hover, .BlockLink.red4.selected {
  background-color: var(--red); color: #FFF;
}

/* Bleus (pleins) → navy */
a.BlockLink.blue, .BlockLink.blue,
a.BlockLink.blue5, .BlockLink.blue5 {
  background-color: var(--navy) !important; border: solid 1px var(--navy); color: #FFF;
}
a.BlockLink.blue:hover, .BlockLink.blue:hover, .BlockLink.blue.selected,
a.BlockLink.blue5:hover, .BlockLink.blue5:hover, .BlockLink.blue5.selected {
  background-color: var(--navy-deep) !important; border-color: var(--navy-deep);
}
/* Bleus (contour) */
a.BlockLink.blue2, .BlockLink.blue2, a.BlockLink.blue3, .BlockLink.blue3,
a.BlockLink.blue4, .BlockLink.blue4 {
  border: solid 1.5px var(--navy); color: var(--navy); background-color: #FFF !important;
}
a.BlockLink.blue2:hover, .BlockLink.blue2:hover,
a.BlockLink.blue4:hover, .BlockLink.blue4:hover, .BlockLink.blue4.selected {
  background-color: var(--navy) !important; color: #FFF;
}
a.BlockLink.blue3:hover, .BlockLink.blue3:hover { background-color: var(--blue-light) !important; }
a.BlockLink.blue6, .BlockLink.blue6 {
  border: solid 1px var(--blue-mid); background-color: var(--blue-mid); color: var(--navy);
}
a.BlockLink.blue6:hover, .BlockLink.blue6:hover, .BlockLink.blue6.selected {
  background-color: var(--navy); color: #FFF;
}
a.BlockLink.blue7, .BlockLink.blue7 { border: solid 1px var(--border); }
a.BlockLink.blue7:hover, .BlockLink.blue7:hover { background-color: var(--navy); color: #FFF; }

a.BlockLink.green, .BlockLink.green {
  background-color: var(--green) !important; border: solid 1px var(--green);
}
a.BlockLink.green:hover, .BlockLink.green:hover { background-color: #15582B !important; }

/* Anciens boutons d'action */
.act_button, .act_offre { background-color: var(--red); border-radius: var(--r-sm); font-family: var(--font-display); }
.act_button_blue, .act_offre_blue { background-color: var(--navy); }
.searchButton {
  background-color: var(--red); border: none; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 600;
}
.searchButton:hover { background-color: #A50D26; }
#toalerte { background-color: var(--red); }

@keyframes redblink {
  0%   { background-color: var(--red); }
  50%  { background-color: #E8536B; }
  100% { background-color: var(--red); }
}


/* ═══ 6. FORMULAIRES ═════════════════════════════════════════════════ */
input:not([type=checkbox], [type=radio]), button, select {
  font-family: var(--font-body);
  border-radius: var(--r-sm);
}
input:not([type=checkbox], [type=radio]):focus, select:focus, textarea:focus {
  border-color: var(--blue); outline: 2px solid var(--blue-pale);
}
.newselector { border-radius: var(--r-sm); }
.newselector, .newselector input { font-family: var(--font-body); }

.form_block_title { background-color: var(--navy); font-family: var(--font-display); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.form_block_title.red { background-color: var(--red); }
.form_block.blue { background-color: var(--navy); }
.form_block input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form_block select, .form_block textarea, .form_block iframe { border-radius: var(--r-sm); }
.form_block input:checked + label { background-color: var(--navy); }

/* Checkboxes custom */
.choices-thin #foo:checked, .choices-thin label:before { border-color: var(--blue); }
.choices-thin input:checked + label:before, .choices-thin input.full + label:before { background-color: var(--navy); }
.choices-thin input.partial + label:before {
  background: linear-gradient(138deg, var(--navy) 0%, var(--navy) 50%, #FFF 51%, #FFF 100%);
}
.choices-thin input:checked + label { color: var(--navy); }
.form_block .choices-thin input:checked + label { color: var(--navy); }
.form_block .choices-thin #foo:checked, .form_block .choices-thin label:before { border-color: var(--blue); }

/* filterSelector */
.filterSelector > div { border-color: var(--navy); }
.filterSelector > div:first-child { border-radius: var(--r-sm); }
.filterSelector.selected > div:first-child { background-color: var(--navy); }
.filterSelector > div:first-child x { color: var(--white); }
.filterSelector.selected > div { color: var(--navy); }
.filterSelector > div + div { border-color: var(--navy); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }

/* supsel */
.supsel-element { background-color: var(--navy); border-radius: 4px; font-family: var(--font-display); font-size: 13px; }
.option.selected, .group.selected .group-title { background-color: var(--navy); }
.option:hover, .group-title:hover { background-color: var(--blue); }

/* erreurs */
input.errorfield, label.errorfield, select.errorfield, textarea.errorfield, div.errorfield, button.errorfield {
  background-color: var(--red-pale) !important;
  border-color: var(--red) !important;
}
button.errorfield { color: var(--red) !important; }


/* ═══ 7. BLOCS, TITRES DE BLOCS & SIDEBAR ════════════════════════════ */
.blueBlockTitle, .bgbleu, .titreFdBleu, .menubox2,
.candidat_block .BlockTitle, #search_block .BlockTitle,
#offreBlock .BlockTitleBlue, .tbHeader { background-color: var(--navy); }
.bgrouge, #collectivite_block .BlockTitle, #offreBlock .BlockTitleRed { background-color: var(--red); }
.BlockTitleUBlue { border-bottom-color: var(--navy); }
.BlockTitleURed { border-bottom-color: var(--red); }

.candidat_block .BlockContent { border-color: var(--blue-mid); border-radius: 0 0 var(--r-md) var(--r-md); }
#collectivite_block .BlockContent { border-color: var(--red-pale); border-radius: 0 0 var(--r-md) var(--r-md); }
#search_block > div { color: var(--navy); }

.bloc_GI { border-color: var(--navy); }
.cadre_elt_sidebar, .bloc_CP, .bloc_OAP, .bloc_GI { border-color: var(--border); border-radius: var(--r-sm); }
.bloc_CP div { background-color: var(--navy); }

.graySideBlock { background-color: var(--ivory); border-radius: var(--r-md); }
.graySideBlock:hover { border: solid 1px var(--navy); }

.box { box-shadow: var(--shadow-card); border-radius: var(--r-lg); }
.inner_block_frame { box-shadow: var(--shadow-card); border-color: var(--border); }
.header_block_frame { border-color: var(--border); border-radius: var(--r-md); }
.glowy { box-shadow: var(--shadow-card); }

#imageBlock .div .img { border-color: var(--blue-mid); border-radius: var(--r-md); }
.fondLong { background-color: var(--ivory-warm); border-color: var(--border); }

.qtab { border-radius: var(--r-sm); font-family: var(--font-display); }
.qtab.unselected:hover { background: var(--navy); border-color: var(--navy); }


/* ═══ 8. OFFRES & CARDS ══════════════════════════════════════════════ */
.offerLine { border: solid 1px var(--border); border-radius: var(--r-lg); transition: border-color .15s, transform .15s; background-color:white}
.offerLine:hover { font-weight: normal; border: solid 1px var(--blue); transform: translateY(-2px); }
.offerLine.selected { border-color: var(--navy); }
.offerLine .title { font-family: var(--font-display); color: var(--navy); }
.offerLine .OffreDescription h3 + div { color: var(--blue); }
.offerLine .infos { background-color: var(--navy); border-radius: 4px; font-family: var(--font-display); font-size: 12px; }
.logoside { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.voir_offre { font-family: var(--font-display); }
.offerLine:hover .voir_offre { background-color: var(--navy); color: #FFF; }

.selectedOffer { border: solid 1px var(--border); border-radius: var(--r-lg); transition: border-color .15s, transform .15s, box-shadow .15s; }
.selectedOffer:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: var(--shadow-card); }

#propositions div:hover { background-color: var(--blue-light); }

#debList .line { border: solid 1px var(--border); border-radius: var(--r-lg); }
#debList .line:hover { border-color: var(--blue); }
#metierslink a { border: solid 1px var(--border); border-radius: var(--r-sm); }
#metierslink a:hover { transform: none; border-color: var(--blue); color: var(--navy); background-color: var(--blue-light); }

.grayBlockLink, ha.grayBlockLink { border-radius: var(--r-sm); }
#giLinks a.grayBlockLink { background-color: var(--ivory); border-radius: var(--r-sm); }
#giLinks a.grayBlockLink:hover { background-color: var(--blue-pale); font-weight: inherit; color: var(--navy); }
A.Grade2 { background-color: var(--ivory); border-radius: var(--r-sm); }
A:hover.Grade2 { background-color: var(--navy); }


/* ═══ 9. TABLEAUX (grilles indiciaires) ══════════════════════════════ */
#indexGrid th, .tbHeader .even, .even .tbHeader {
  background-color: var(--navy); color: #FFF;
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
}
#indexGrid, #indexGrid td { border-color: var(--border); }
#indexGrid tr:nth-child(even) { background-color: var(--ivory); }

.grid .even td:not(:first-child) { background-color: var(--ivory); }
.grid .even td:first-child { border-color: var(--ivory); }
.grid .colorA { color: var(--navy); }
.grid .colorB { color: var(--blue); }
.grid .colorC { color: var(--muted); }
.blockBanner table tr:nth-child(even) { background-color: var(--ivory); }
.blockBanner table tr.first-line { background-color: var(--navy); }


/* ═══ 10. PAGINATION ═════════════════════════════════════════════════ */
.pagingBox {
  background-color: #FFF; color: var(--navy);
  border: solid 1px var(--border); border-radius: var(--r-sm);
  font-family: var(--font-display);
}
.pagingBox:hover { background-color: var(--blue-pale); }
.pagingBox.selected, .pagingBar .selected { background-color: var(--navy); color: #FFF; }


/* ═══ 11. TOOLTIPS, POPUPS, LOADERS, DIVERS ══════════════════════════ */
.sibling-tooltip-info + .tooltip-info { background: rgba(26,58,107,.95); border-radius: var(--r-sm); }
.help, .help:hover { background-color: var(--navy); border-color: var(--navy); }
.help:hover { background-color: var(--blue); }
.good_popup, .help_popup { background-color: var(--navy); border-radius: var(--r-md); }
.popup { border-radius: var(--r-lg); box-shadow: var(--shadow-pop); border: solid 1px var(--border); }
.heho { border-color: var(--navy); }

.circularG, .bloc1 { background-color: var(--navy); }
.bloc3 { background: var(--red); }
.bloc4 { border-color: var(--navy); }
#diapoRadar span { text-shadow: 1px 1px 1px var(--navy); }
#diapoRadar .selected { color: var(--navy); }

#span_acces_panier { background-color: var(--navy); }
.item0 { background-color: var(--ivory); }


/* ═══ 12. FOOTER ═════════════════════════════════════════════════════ */
footer a, footer a:visited { color: var(--text); }
footer a:hover { color: var(--navy); }


/* ═══ 13. NOUVELLES CLASSES DE LA CHARTE ═════════════════════════════
   Pour les nouvelles pages (cf. document charte graphique + 8 pages
   de référence). Utilisables partout puisque ce fichier est global.  */

/* Conteneur */
.inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 1023px) { .inner { padding: 0 32px; } }
@media (max-width: 767px)  { .inner { padding: 0 20px; } }

/* Boutons nouvelle génération */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: -.01em; padding: 12px 26px; cursor: pointer;
  text-decoration: none !important;
  transition: opacity .15s, background .15s, color .15s;
}
.btn:hover { opacity: .88; font-weight: 600; }
.btn-primary { background: var(--red); color: #FFF !important; }
.btn-navy { background: var(--navy); color: #FFF !important; }
.btn-outline { background: transparent; color: var(--navy) !important; border: 1.5px solid var(--navy); }
.btn-outline-white { background: transparent; color: #FFF !important; border: 1.5px solid rgba(255,255,255,.4); }
.btn-sm { font-size: 13px; padding: 10px 20px; }

/* Chips de filtre */
.chip {
  background: var(--blue-pale); border: none; border-radius: var(--r-sm);
  padding: 9px 16px; font-size: 13px; color: var(--navy); font-weight: 600;
  cursor: pointer; font-family: var(--font-display); letter-spacing: -.01em;
  transition: background .15s, color .15s;
}
.chip:hover, .chip.active { background: var(--navy); color: #FFF; }

/* Badges */
.badge { display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 4px; }
.badge-a { background: var(--navy); color: #FFF; }
.badge-b { background: var(--blue); color: #FFF; }
.badge-c { background: var(--blue-mid); color: var(--navy); }
.badge-new { background: var(--green-pale); color: var(--green); }
.badge-urgent { background: var(--red-pale); color: var(--red); }
.badge-neutral { background: var(--blue-pale); color: var(--navy); }

/* Card standard */
.card {
  background: #FFF; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px; transition: border-color .15s, transform .15s; display: block;
  text-decoration: none !important; color: inherit;
}
.card:hover { border-color: var(--blue); transform: translateY(-2px); font-weight: inherit; }
.card-bar { width: 28px; height: 2.5px; background: var(--red); border-radius: 2px; margin-bottom: 12px; }
.card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 7px; line-height: 1.3; text-align: left; }
.card p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }

/* Titre de section à barre rouge */
.fm-h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--navy); letter-spacing: -.01em;
  display: flex; align-items: center; gap: 12px; text-align: left;
}
.fm-h2::before { content: ""; display: block; width: 4px; height: 22px; background: var(--red); border-radius: 2px; flex-shrink: 0; }

/* Eyebrow */
.eyebrow {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}

/* Tableau charte */
.grille-table { width: 100%; border-collapse: collapse; }
.grille-table thead tr { background: var(--navy); }
.grille-table thead th {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.6);
  padding: 11px 16px; text-align: left;
}
.grille-table tbody tr { border-bottom: 1px solid var(--border); }
.grille-table tbody tr:nth-child(even) { background: var(--ivory); }
.grille-table td { padding: 11px 16px; font-size: 14px; }
.td-net { font-weight: 700; color: var(--green); }
.td-im { font-weight: 700; color: var(--blue); }

/* Hero navy + cercles signature */
.hero-navy { background: var(--navy); position: relative; overflow: hidden; }
.hero-navy::before {
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.03);
}
.hero-navy::after {
  content: ''; position: absolute; right: 180px; bottom: -120px;
  width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.025);
}
.hero-navy > * { position: relative; z-index: 1; }



/* ═══ HERO ═══ */
.hero { background: var(--navy); width: 100%; padding: 80px 0 0; position: relative; }
.hero::before { content: ''; position: absolute; right: -80px; top: -80px; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,.03); pointer-events: none; }
.hero::after  { content: ''; position: absolute; right: 160px; bottom: -100px; width: 250px; height: 250px; border-radius: 50%; background: rgba(255,255,255,.025); pointer-events: none; }
.hero-inner { max-width: var(--inner-w); margin: 0 auto; padding: 0 var(--inner-px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-pill); padding: 6px 16px; margin-bottom: 24px; }
.tag-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.tag-txt { font-size: 13px; color: rgba(255,255,255,.85); font-weight: 500; }
.hero h1 { font-family: var(--font-h1); font-size: 62px; font-weight: 800; color: var(--white); line-height: 1.0; letter-spacing: -.035em; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: rgba(255,255,255,.38); }
.hero-sub { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.7; }
.hero-right { position: relative; z-index: 1; }
.search-box { background: var(--white); border-radius: 18px; padding: 22px; box-shadow: 0 24px 64px rgba(0,0,0,.25); }
.search-label { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 16px; letter-spacing: -.01em; }
.s-field { display: flex; align-items: center; gap: 10px; background: var(--ivory); border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; }
.s-input { border: none; background: var(--ivory); font-size: 14px; color: var(--text); width: 100%; outline: none; font-family: var(--font-body); }
.s-input::placeholder { color: #9CA3AF; }


.s-row2 { display: flex; gap: 10px; margin-bottom: 14px; }
.s-field-half { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--ivory); border-radius: 10px; padding: 13px 16px; }
.s-cta { background: var(--red); color: var(--white); border: none; border-radius: 10px; width: 52px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: opacity .15s; }
.s-cta:hover { opacity: .88; }
.s-filters { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--blue); font-weight: 500; cursor: pointer; }
.s-filters-hint { color: #9CA3AF; font-weight: 400; }
.hero-pad { height: 56px; }

/* ═══ STATS ═══ */
.stats-band { background: var(--navy-deep); width: 100%; }
.stats-inner { max-width: var(--inner-w); margin: 0 auto; padding: 0 var(--inner-px); display: grid; grid-template-columns: repeat(5, 1fr); }
.stat { padding: 26px 0 26px 28px; border-right: 1px solid rgba(255,255,255,.07); }
/*.stat:first-child { padding-left: 0; }*/
.stat:last-child { border-right: none; }
.stat-n { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--white); letter-spacing: -.02em; line-height: 1; margin-bottom: 5px; }
.stat-n b { color: var(--red); font-weight: 800; }
.stat-l { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.4; }


@media (max-width: 1023px) {
  .hero h1     { font-size: 46px; }
  .hero-inner  { gap: 40px; }
  .stats-inner { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .hero        { padding: 40px 0 0; overflow:hidden}
  .hero-inner  { grid-template-columns: 1fr; gap: 32px; }
  .hero h1     { font-size: 36px; letter-spacing: -.025em; }
  .hero-sub    { font-size: 14px; }
  .hero-tag    { font-size: 11px; }
  .hero-pad    { height: 32px; }

  .stats-inner { grid-template-columns: 1fr 1fr; padding: 0 20px; }
  .stat        { padding: 18px 0 18px 16px; text-align:center}
  .stat:nth-child(2), .stat:nth-child(4) { border-right: none; }
  .stat-n      { font-size: 20px; }
  .stat-l      { font-size: 10px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 30px; }
}


/* — Multi-sélection Département / Région — */
.geo-field { position: relative; cursor: pointer; user-select: none; }
.geo-label { font-size: 14px; color: #9CA3AF; flex: 1; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-family: var(--font-body); }
.geo-label.has-val { color: var(--text, #1F2937); font-weight: 500; }
.geo-count { background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 2px 8px; flex-shrink: 0; font-family: var(--font-display); }
.geo-chev { flex-shrink: 0; transition: transform .15s; }
.geo-field.open .geo-chev { transform: rotate(180deg); }
.geo-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 340px; max-width: 90vw;
  background: var(--white); border-radius: 14px; box-shadow: 0 18px 56px rgba(0,0,0,.28); z-index: 400;
  cursor: default; overflow: hidden; }
.geo-field.open .geo-panel { display: block; }
.geo-search-wrap { padding: 12px 12px 8px; }
.geo-search { width: 100%; border: 1px solid var(--border, #E5E7EB); border-radius: 9px; padding: 9px 12px;
  font-size: 13px; font-family: var(--font-body); outline: none; }
.geo-search:focus { border-color: var(--navy); }
.geo-list { max-height: 300px; overflow-y: auto; padding: 0 8px 8px; }        /* ← ascenseur */
.geo-list::-webkit-scrollbar { width: 8px; }
.geo-list::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 8px; }
.geo-region { display: flex; align-items: center; gap: 9px; padding: 9px 8px 7px; font-family: var(--font-display);
  font-size: 13px; font-weight: 700; color: var(--navy); cursor: pointer; border-radius: 8px; }
.geo-region:hover { background: var(--blue-pale, #EEF3FA); }
.geo-dept { display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 26px; font-size: 13px;
  color: var(--text, #374151); cursor: pointer; border-radius: 8px; font-family: var(--font-body); }
.geo-dept:hover { background: var(--blue-pale, #EEF3FA); }
.geo-cb { width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer; flex-shrink: 0; }
.geo-code { color: #9CA3AF; font-size: 12px; margin-left: auto; }
.geo-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
  border-top: 1px solid var(--border, #E5E7EB); background: #FAFAF7; }
.geo-clear { background: none; border: none; font-size: 13px; color: #6B7280; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; }
.geo-clear:hover { color: var(--red, #C8102E); }
.geo-ok { background: var(--navy); color: #fff; border: none; border-radius: 8px; padding: 8px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-display); }
.geo-ok:hover { opacity: .9; }

.fiches-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.fiches-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.fiches-grid{grid-template-columns:1fr;}}

.fiche-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;}
.fiche-card:hover{box-shadow:0 8px 24px rgba(15,32,68,.10);transform:translateY(-2px);}
.fiche-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:linear-gradient(135deg,#EEF3FB,#DCE7F7);display:block;}
.fiche-body{padding:16px 18px 14px;display:flex;flex-direction:column;flex:1;}
.fiche-badges{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
.fb{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;}
.fb-cat{background:var(--navy);color:white;}
.fb-fil{background:#EEF3FB;color:var(--blue);}
.fiche-title{margin:0 0 8px;font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.01em;}
.fiche-title a{color:var(--navy);text-decoration:none;}
.fiche-title a:hover{color:var(--blue);}
.fiche-desc{font-size:13.5px;color:var(--muted);line-height:1.55;flex:1;margin:0;}
.fiche-links{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.fiche-links a{font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;}
.fiche-links a:hover{text-decoration:underline;}
.fiche-links .sec{font-weight:500;color:var(--muted);}

.load-more{display:block;margin:30px auto 0;padding:13px 30px;border-radius:10px;border:1px solid var(--border);background:var(--white);color:var(--navy);font-weight:600;font-size:14px;cursor:pointer;font-family:var(--font-display);}
.load-more:hover{border-color:var(--blue);color:var(--blue);}

/* ═══ TIROIR MOBILE : ACCORDÉONS ═══ */
#mobileDrawer{max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* En-têtes = même look que les anciens drawer-link */
#mobileDrawer .drawer-acc{border-bottom:1px solid rgba(255,255,255,.05);}
#mobileDrawer .drawer-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:none;border-radius:0;box-shadow:none;margin:0;
  color:rgba(255,255,255,.85);font-family:var(--font-display);font-size:16px;font-weight:500;
  padding:13px 16px;text-align:left;cursor:pointer;}
#mobileDrawer .drawer-acc-head::after{content:"";width:7px;height:7px;flex-shrink:0;margin-left:12px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.6;
  transform:rotate(45deg);transition:transform .2s;}
#mobileDrawer .drawer-acc.open .drawer-acc-head{color:#fff;font-weight:600;}
#mobileDrawer .drawer-acc.open .drawer-acc-head::after{transform:rotate(-135deg);}

/* Contenu replié par défaut */
#mobileDrawer .drawer-acc-body{display:none;padding:2px 8px 14px;}
#mobileDrawer .drawer-acc.open .drawer-acc-body{display:block;}

/* Neutralise la mise en page desktop des blocs clonés */
#mobileDrawer .drawer-acc-body .li,
#mobileDrawer .drawer-acc-body [class^="subBlock"],
#mobileDrawer .drawer-acc-body > div{display:block !important;float:none !important;width:auto !important;max-width:none !important;
  position:static !important;margin:0 !important;padding:0 !important;border:none !important;box-shadow:none !important;background:none !important;}
#mobileDrawer .drawer-acc-body br,
#mobileDrawer .drawer-acc-body i{display:none !important;}

/* Intertitres (Offres d'emploi Fonction publique, Solutions…) */
#mobileDrawer .drawer-acc-body .colorB,
#mobileDrawer .drawer-acc-body .colorR{display:block;color:rgba(255,255,255,.4) !important;
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 12px 6px;}
#mobileDrawer .drawer-acc-body .colorB b,
#mobileDrawer .drawer-acc-body .colorR b{font-weight:600;}

/* Liens */
#mobileDrawer .drawer-acc-body a{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:8px 12px;border-radius:6px;color:rgba(255,255,255,.75) !important;
  font-size:14px !important;font-weight:400;line-height:1.35;text-decoration:none;}
#mobileDrawer .drawer-acc-body a b{font-weight:500;color:rgba(255,255,255,.9);}
#mobileDrawer .drawer-acc-body a:hover{background:rgba(255,255,255,.07);color:#fff !important;}
#mobileDrawer .drawer-acc-body a small{flex-basis:100%;padding-left:26px;font-size:12px;color:rgba(255,255,255,.45);}
#mobileDrawer .drawer-acc-body .fpico{width:18px;height:18px;flex-shrink:0;opacity:.7;}

/* Bouton rouge « Se connecter » (accordéon lui aussi) */
#mobileDrawer .drawer-acc-login{border-bottom:none;margin-top:12px;}
#mobileDrawer .drawer-acc-login .drawer-acc-head{justify-content:center;gap:10px;background:var(--red);color:#fff;
  border-radius:8px;font-weight:600;font-size:15px;padding:14px;}
#mobileDrawer .drawer-acc-login .drawer-acc-head::after{margin-left:0;opacity:.9;}
#mobileDrawer .drawer-acc-login .drawer-acc-body{padding-top:8px;}
#mobileDrawer .drawer-acc-login .drawer-acc-body a{justify-content:center;border:1px solid rgba(255,255,255,.15);margin-bottom:6px;padding:12px;}