/* ====================================================
   RémunérationBE — style-main.css
   Palette: Orange #e85d26 · Slate #334155 · Amber #f59e0b
   Fonts: Outfit + Spectral
   ==================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Outfit',system-ui,sans-serif;background:#f8f6f2;color:#1e1b18;line-height:1.65}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* WRAPPERS */
.wrap-lg{max-width:1220px;margin:0 auto;padding:0 2rem}
.wrap-md{max-width:820px;margin:0 auto;padding:0 2rem}

/* TOPBAR */
.topbar{background:#1e1b18;color:rgba(255,255,255,.5);font-size:.75rem;padding:.4rem 2rem;display:flex;justify-content:space-between;align-items:center}

/* HEADER */
.site-header{background:#fff;border-bottom:2px solid #e85d26;position:sticky;top:0;z-index:200;box-shadow:0 2px 12px rgba(30,27,24,.07)}
.header-wrap{max-width:1220px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:.75rem;cursor:pointer}
.brand-icon{width:38px;height:38px;border-radius:8px;background:#e85d26;color:#fff;font-family:'Spectral',serif;font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-name{display:block;font-weight:800;font-size:1rem;color:#1e1b18;letter-spacing:-.01em;line-height:1.1}
.brand-sub{display:block;font-size:.7rem;color:#78716c;font-weight:400}
.main-nav{display:flex;gap:.25rem;align-items:center}
.nav-lnk{font-size:.875rem;font-weight:600;color:#44403c;padding:.4rem .85rem;border-radius:6px;transition:color .2s,background .2s}
.nav-lnk:hover{color:#e85d26;background:#fff7ed}
.nav-lnk.active{color:#e85d26;border-bottom:2px solid #e85d26}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:2px;background:#1e1b18;border-radius:2px}

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;gap:.4rem;background:#e85d26;color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:.9rem;padding:.75rem 1.75rem;border-radius:8px;border:none;cursor:pointer;transition:background .2s,transform .15s}
.btn-primary:hover{background:#c94d1a;transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:.4rem;background:none;color:#e85d26;font-weight:700;font-size:.9rem;padding:.75rem 1.25rem;border-radius:8px;border:2px solid #e85d26;cursor:pointer;transition:all .2s}
.btn-ghost:hover{background:#e85d26;color:#fff}

/* SECTION HEADINGS */
.section-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e85d26;margin-bottom:.6rem}
.section-h2{font-family:'Spectral',serif;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:600;color:#1e1b18;letter-spacing:-.02em;line-height:1.2;margin-bottom:.85rem}
.section-lead{font-size:1rem;color:#78716c;max-width:540px;line-height:1.75;margin-bottom:2.5rem}
.section-head{margin-bottom:3rem}

/* ══ HERO ══ */
.hero-block{background:linear-gradient(135deg,#1e1b18 0%,#334155 100%);padding:5rem 0 4.5rem;position:relative;overflow:hidden}
.hero-deco{position:absolute;top:-80px;right:-80px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(232,93,38,.18) 0%,transparent 70%);pointer-events:none}
.hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.pill-tag{display:inline-block;background:rgba(232,93,38,.2);border:1px solid rgba(232,93,38,.35);color:#f59e0b;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .9rem;border-radius:20px;margin-bottom:1.5rem}
.hero-h1{font-family:'Spectral',serif;font-size:clamp(2rem,4.5vw,3.2rem);font-weight:600;color:#fff;line-height:1.15;letter-spacing:-.025em;margin-bottom:1.25rem}
.hero-h1 em{color:#f59e0b;font-style:italic}
.hero-p{font-size:1.05rem;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:2rem;max-width:480px}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}
.num-card{background:rgba(255,255,255,.05);padding:1.5rem 1.75rem;transition:background .2s}
.num-card:hover{background:rgba(255,255,255,.09)}
.accent-card{background:rgba(232,93,38,.15)!important;border:1px solid rgba(232,93,38,.25)}
.num-val{display:block;font-family:'Spectral',serif;font-size:1.8rem;font-weight:600;color:#f59e0b;line-height:1;margin-bottom:.4rem;letter-spacing:-.03em}
.num-lbl{font-size:.75rem;color:rgba(255,255,255,.5);line-height:1.4}

/* ══ INDIC STRIP ══ */
.indic-strip{background:#fff;border-bottom:1px solid #e7e0d5;padding:1.25rem 0}
.indic-row{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.indic-item{display:flex;align-items:center;gap:.75rem}
.indic-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.indic-dot.green{background:#059669}
.indic-dot.orange{background:#e85d26}
.indic-dot.blue{background:#3b82f6}
.indic-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#a8a29e;margin-bottom:.2rem}
.indic-value{font-family:'Spectral',serif;font-size:1.1rem;font-weight:600;color:#1e1b18}
.tag-up{font-size:.7rem;font-weight:700;background:#dcfce7;color:#15803d;padding:.1rem .45rem;border-radius:10px;margin-left:.3rem}
.tag-neu{font-size:.7rem;font-weight:700;background:#f1f5f9;color:#64748b;padding:.1rem .45rem;border-radius:10px;margin-left:.3rem}
.indic-sep{width:1px;height:36px;background:#e7e0d5}
.indic-note{font-size:.82rem;color:#78716c;max-width:320px;line-height:1.6;flex:1}

/* ══ PILLARS ══ */
.pillars-section{padding:5rem 0;background:#f8f6f2}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pillar-card{background:#fff;border:1px solid #e7e0d5;border-radius:10px;padding:2rem;position:relative;overflow:hidden;transition:box-shadow .25s,transform .25s}
.pillar-card:hover{box-shadow:0 8px 32px rgba(30,27,24,.1);transform:translateY(-4px)}
.featured-pillar{border-color:#e85d26;border-top:4px solid #e85d26}
.pillar-num{font-family:'Spectral',serif;font-size:3rem;font-weight:600;color:#e7e0d5;line-height:1;margin-bottom:1rem;letter-spacing:-.05em}
.pillar-card h3{font-family:'Spectral',serif;font-size:1.2rem;font-weight:600;color:#1e1b18;margin-bottom:.75rem}
.pillar-card p{font-size:.9rem;color:#44403c;line-height:1.75;margin-bottom:1.5rem}
.pillar-link{font-size:.85rem;font-weight:700;color:#e85d26;transition:gap .2s}

/* ══ BRUT/NET ══ */
.brunet-section{padding:5rem 0;background:#fff}
.brunet-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.brunet-text p{font-size:.95rem;color:#44403c;line-height:1.75;margin-bottom:1.5rem}
.level-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.level-row{display:flex;align-items:flex-start;gap:1.25rem;padding:1rem;background:#f8f6f2;border-radius:8px}
.level-pct{font-family:'Spectral',serif;font-size:1.5rem;font-weight:600;min-width:70px;line-height:1}
.level-info{display:flex;flex-direction:column;gap:.2rem}
.level-info strong{font-size:.9rem;color:#1e1b18}
.level-info span{font-size:.82rem;color:#78716c}
.bar-visual{display:flex;flex-direction:column;gap:1.25rem;padding:2rem;background:#f8f6f2;border-radius:10px}
.bv-label{font-size:.78rem;font-weight:600;color:#78716c;text-transform:uppercase;letter-spacing:.08em}
.bv-bar{height:40px;border-radius:6px;display:flex;align-items:center;padding:0 1rem;transition:width .5s ease}
.bv-bar span{color:#fff;font-weight:700;font-size:.85rem}

/* ══ SECTORS TABLE ══ */
.sectors-preview{padding:5rem 0;background:#f8f6f2}
.sectors-table-wrap{background:#fff;border:1px solid #e7e0d5;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(30,27,24,.05)}
.sectors-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.sectors-tbl thead tr{background:#1e1b18}
.sectors-tbl th{text-align:left;padding:.85rem 1.25rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sectors-tbl tbody tr{border-bottom:1px solid #f1ede5;transition:background .15s}
.sectors-tbl tbody tr:last-child{border-bottom:none}
.sectors-tbl tbody tr:hover{background:#fff7ed}
.sectors-tbl td{padding:.85rem 1.25rem;color:#44403c}
.td-pos{color:#059669;font-weight:700}
.td-neg{color:#e85d26;font-weight:700}
.lvl-bar{width:120px;height:8px;background:#f1ede5;border-radius:4px;overflow:hidden}
.lvl-bar div{height:100%;border-radius:4px}
.tbl-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.25rem}
.tbl-footer p{font-size:.8rem;color:#a8a29e;font-style:italic}

/* ══ ISSUES ══ */
.issues-section{padding:5rem 0;background:#1e1b18}
.issues-section .section-h2{color:#fff}
.issues-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.issue-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:1.75rem;transition:background .2s}
.issue-card:hover{background:rgba(255,255,255,.08)}
.issue-icon{font-size:1.75rem;margin-bottom:1rem}
.issue-card h3{font-family:'Spectral',serif;font-size:1rem;font-weight:600;color:#fff;margin-bottom:.65rem}
.issue-card p{font-size:.87rem;color:rgba(255,255,255,.55);line-height:1.7}

/* ══ FAQ ══ */
.faq-section{padding:5rem 0;background:#f8f6f2}
.faq-accordion{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
.faq-entry{background:#fff;border:1px solid #e7e0d5;border-radius:8px;overflow:hidden}
.faq-trigger{width:100%;background:none;border:none;cursor:pointer;padding:1.15rem 1.5rem;font-family:'Outfit',sans-serif;font-size:.92rem;font-weight:600;color:#1e1b18;display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;transition:background .2s}
.faq-trigger:hover{background:#fff7ed}
.faq-icon{color:#e85d26;font-size:1.2rem;flex-shrink:0;transition:transform .3s}
.faq-body{max-height:0;overflow:hidden;font-size:.9rem;color:#44403c;line-height:1.75;transition:max-height .35s ease,padding .3s;padding:0 1.5rem}
.faq-body.open{max-height:250px;padding:0 1.5rem 1.25rem}
.faq-body a{color:#e85d26;text-decoration:underline}

/* ══ CTA NAV ══ */
.cta-nav-section{padding:5rem 0;background:#fff}
.cta-nav-title{font-family:'Spectral',serif;font-size:1.8rem;font-weight:600;color:#1e1b18;text-align:center;margin-bottom:2.5rem}
.cta-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.cta-nav-card{background:#f8f6f2;border:1px solid #e7e0d5;border-radius:10px;padding:1.75rem;display:flex;flex-direction:column;gap:.5rem;transition:box-shadow .25s,transform .25s,border-color .2s}
.cta-nav-card:hover{box-shadow:0 8px 24px rgba(30,27,24,.1);transform:translateY(-3px);border-color:#e85d26}
.cna-icon{font-size:1.75rem}
.cta-nav-card strong{font-size:.95rem;color:#1e1b18;font-weight:700}
.cta-nav-card span{font-size:.84rem;color:#78716c;line-height:1.6}

/* ══ FOOTER ══ */
.site-footer{background:#1e1b18;color:rgba(255,255,255,.5);padding:3.5rem 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem}
.footer-about p{font-size:.85rem;line-height:1.7;max-width:280px}
.footer-col h5{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1rem;font-weight:700}
.footer-col a{display:block;color:rgba(255,255,255,.5);font-size:.87rem;margin-bottom:.45rem;transition:color .2s}
.footer-col a:hover{color:#f59e0b}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.25rem 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.8rem}

/* ══ PAGE HERO (inner pages) ══ */
.page-hero{background:linear-gradient(135deg,#334155 0%,#1e1b18 100%);padding:4rem 0 3.5rem;border-bottom:3px solid #e85d26}
.page-hero-inner{max-width:1220px;margin:0 auto;padding:0 2rem}
.page-breadcrumb{font-size:.8rem;color:rgba(255,255,255,.4);margin-bottom:1.25rem}
.page-breadcrumb a{color:rgba(255,255,255,.4);transition:color .2s}
.page-breadcrumb a:hover{color:#f59e0b}
.page-h1{font-family:'Spectral',serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:600;color:#fff;letter-spacing:-.025em;line-height:1.15;margin-bottom:.85rem}
.page-sub{font-size:1.05rem;color:rgba(255,255,255,.65);max-width:560px;line-height:1.7}

/* ══ CONTENT SECTIONS (inner pages) ══ */
.content-section{padding:4.5rem 0}
.content-alt{background:#fff}
.content-warm{background:#fff7ed}
.content-dark{background:#1e1b18}

/* ══ ARTICLE CARDS ══ */
.art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}
.art-box{background:#fff;border:1px solid #e7e0d5;border-radius:10px;padding:2rem;cursor:pointer;transition:box-shadow .25s,transform .25s;border-left:4px solid transparent}
.art-box:hover{box-shadow:0 8px 32px rgba(30,27,24,.1);transform:translateY(-3px);border-left-color:#e85d26}
.art-box .abt{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#e85d26;margin-bottom:.65rem}
.art-box h3{font-family:'Spectral',serif;font-size:1.1rem;font-weight:600;color:#1e1b18;margin-bottom:.65rem;line-height:1.3}
.art-box p{font-size:.88rem;color:#78716c;line-height:1.65;margin-bottom:1.25rem}
.art-box .art-meta{font-size:.78rem;color:#a8a29e;border-top:1px solid #f1ede5;padding-top:.75rem;display:flex;justify-content:space-between}

/* ══ GLOSSAIRE CARDS ══ */
.gloss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.25rem;margin-top:2rem}
.gloss-box{background:#fff;border:1px solid #e7e0d5;border-radius:8px;padding:1.75rem;border-top:3px solid #e85d26}
.gloss-box h4{font-family:'Spectral',serif;font-size:1.05rem;font-weight:600;color:#1e1b18;margin-bottom:.65rem}
.gloss-box p{font-size:.88rem;color:#44403c;line-height:1.7}

/* ══ INFO CARDS ══ */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.5rem}
.info-card{background:#fff;border:1px solid #e7e0d5;border-radius:10px;padding:2rem;box-shadow:0 1px 4px rgba(30,27,24,.05)}
.info-card .ic-num{font-family:'Spectral',serif;font-size:2.2rem;font-weight:600;color:#e85d26;line-height:1;margin-bottom:.65rem;letter-spacing:-.04em}
.info-card .ic-num.alt{color:#334155}
.info-card h3{font-family:'Spectral',serif;font-size:1rem;font-weight:600;color:#1e1b18;margin-bottom:.6rem}
.info-card p{font-size:.88rem;color:#44403c;line-height:1.7}

/* ══ HIGHLIGHT BOX ══ */
.hl-box{border-left:4px solid #e85d26;background:#fff7ed;border-radius:0 8px 8px 0;padding:1.25rem 1.5rem;margin:1.5rem 0;font-size:.94rem;color:#44403c;line-height:1.75}
.hl-box strong{color:#e85d26}
.hl-slate{border-left:4px solid #334155;background:#f1f5f9;border-radius:0 8px 8px 0;padding:1.25rem 1.5rem;margin:1.5rem 0;font-size:.94rem;color:#44403c;line-height:1.75}
.hl-slate strong{color:#334155}

/* ══ SIMULATOR ══ */
.sim-wrap{background:#fff;border:1px solid #e7e0d5;border-radius:10px;padding:2.5rem;box-shadow:0 2px 12px rgba(30,27,24,.06)}
.sim-fields{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}
.sim-field{flex:1;min-width:200px}
.sim-field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#78716c;margin-bottom:.5rem}
.sim-field input,.sim-field select{width:100%;background:#f8f6f2;border:1.5px solid #e7e0d5;color:#1e1b18;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;padding:.7rem 1rem;border-radius:8px;outline:none;transition:border-color .2s;appearance:none}
.sim-field input:focus,.sim-field select:focus{border-color:#e85d26;box-shadow:0 0 0 3px rgba(232,93,38,.1)}
.sim-outputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:#e7e0d5;border:1px solid #e7e0d5;border-radius:8px;overflow:hidden}
.sim-out{background:#f8f6f2;padding:1.25rem 1.5rem}
.sim-out.sim-result-main{background:#fff7ed;border-left:3px solid #e85d26}
.sim-out .so-val{font-family:'Spectral',serif;font-size:1.5rem;font-weight:600;color:#1e1b18;display:block;line-height:1;margin-bottom:.3rem;letter-spacing:-.03em}
.sim-out.sim-result-main .so-val{color:#e85d26}
.sim-out .so-lbl{font-size:.75rem;color:#78716c}
.sim-disclaimer{font-size:.78rem;color:#a8a29e;margin-top:1.25rem;font-style:italic;line-height:1.6}

/* ══ COMPARE TABLE ══ */
.cmp-table-wrap{overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;font-size:.9rem}
.cmp-table thead tr{background:#334155}
.cmp-table th{padding:.85rem 1.25rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:left}
.cmp-table tbody tr{border-bottom:1px solid #f1ede5;transition:background .15s}
.cmp-table tbody tr:hover{background:#fff7ed}
.cmp-table tbody tr.highlight-row{background:#fff7ed;font-weight:600}
.cmp-table tbody tr.highlight-row td{color:#1e1b18}
.cmp-table td{padding:.85rem 1.25rem;color:#44403c;vertical-align:middle}
.cmp-flag{font-size:1.1rem;margin-right:.4rem}

/* ══ RESPONSIVE ══ */
@media(max-width:900px){
  .hero-layout{grid-template-columns:1fr;gap:2.5rem}
  .hero-nums{grid-template-columns:1fr 1fr}
  .pillars-grid{grid-template-columns:1fr}
  .brunet-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-about{grid-column:1/-1}
}
@media(max-width:640px){
  nav.main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;border-bottom:2px solid #e85d26;padding:1rem;box-shadow:0 4px 16px rgba(30,27,24,.1)}
  nav.main-nav.nav-open{display:flex}
  .nav-lnk{padding:.75rem 1rem;border-radius:6px;width:100%}
  .nav-toggle{display:flex}
  .hero-nums{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  section,.content-section{padding:3.5rem 0}
}

/* ══ CHART CANVAS ══ */
.chart-container{background:#fff;border:1px solid #e7e0d5;border-radius:10px;padding:2rem;box-shadow:0 1px 4px rgba(30,27,24,.05)}
.chart-tab-row{display:flex;gap:.5rem;margin-bottom:1.75rem;flex-wrap:wrap}
.cht-tab{background:none;border:1px solid #e7e0d5;color:#78716c;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:600;padding:.38rem .95rem;border-radius:20px;cursor:pointer;transition:all .2s}
.cht-tab:hover{border-color:#e85d26;color:#e85d26}
.cht-tab.on{background:#e85d26;color:#fff;border-color:#e85d26}
canvas{max-height:300px}