/* =========================================================
   CombienJeGagne.fr — design tokens
   Palette : encre verte, papier, vert-billet, jaune-jeton
   Type : Space Grotesk (display) / Inter (texte) / IBM Plex Mono (chiffres)
   Signature : cartes-résultat façon "ticket de caisse"
========================================================= */
:root{
  --ink:        #10231C;
  --ink-soft:   #3C5148;
  --paper:      #FBFBF7;
  --paper-dim:  #F1F1EA;
  --line:       #DBDACC;
  --green:      #1E7A4C;
  --green-deep: #14512F;
  --green-tint: #E4F0E7;
  --gold:       #C99A2E;
  --gold-tint:  #FBF0D6;
  --red:        #A63D2F;

  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --radius: 10px;
  --shadow-card: 0 1px 2px rgba(16,35,28,0.06), 0 8px 24px -12px rgba(16,35,28,0.18);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }
:focus-visible{ outline:2.5px solid var(--gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(251,251,247,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{
  display:flex; align-items:baseline; gap:2px;
  font-family:var(--font-display); font-weight:700; font-size:19px;
  text-decoration:none; color:var(--ink);
}
.brand .fr{ color:var(--green); }
.brand .cursor{ display:inline-block; width:8px; height:16px; background:var(--gold); margin-left:4px; border-radius:1px; }

.nav-tabs{
  display:flex; gap:4px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
}
.nav-tabs button{
  border:none; background:transparent; cursor:pointer;
  padding:9px 18px; border-radius:999px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.nav-tabs button.active{ background:var(--ink); color:var(--paper); }
.nav-tabs button:hover:not(.active){ color:var(--ink); }

@media (max-width:640px){
  .nav-tabs{ position:fixed; left:12px; right:12px; bottom:12px; top:auto; z-index:60; box-shadow:var(--shadow-card); }
  .nav-tabs button{ flex:1; text-align:center; padding:11px 10px; }
  body{ padding-bottom:70px; }
}

/* ---------- Hero ---------- */
.hero{ padding:72px 0 56px; border-bottom:1px solid var(--line); }
.hero .eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-deep); background:var(--green-tint);
  display:inline-block; padding:5px 10px; border-radius:5px; margin-bottom:18px;
}
.hero h1{
  font-size:clamp(32px,5vw,52px); line-height:1.05; max-width:15ch;
}
.hero h1 em{ font-style:normal; color:var(--green); }
.hero p.lede{
  margin:18px 0 0; max-width:52ch; font-size:18px; color:var(--ink-soft);
}
.hero-stats{
  display:flex; gap:28px; margin-top:34px; flex-wrap:wrap;
}
.hero-stats .stat b{
  display:block; font-family:var(--font-mono); font-size:24px; color:var(--ink);
}
.hero-stats .stat span{ font-size:13px; color:var(--ink-soft); }

/* ---------- Sections ---------- */
section.view{ padding:52px 0 80px; }
section.view[hidden]{ display:none; }

.section-head{ margin-bottom:28px; max-width:60ch; }
.section-head h2{ font-size:28px; }
.section-head p{ color:var(--ink-soft); margin:8px 0 0; font-size:15.5px; }

/* ---------- Calculator picker ---------- */
.calc-picker{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:32px;
}
@media (max-width:900px){ .calc-picker{ grid-template-columns:repeat(2,1fr); } }
.calc-picker button{
  text-align:left; cursor:pointer;
  border:1px solid var(--line); background:var(--paper);
  border-radius:var(--radius); padding:14px;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.calc-picker button:hover{ border-color:var(--green); transform:translateY(-1px); }
.calc-picker button.active{ background:var(--ink); border-color:var(--ink); }
.calc-picker button.active .ct{ color:var(--paper); }
.calc-picker button.active .cd{ color:#B9C7BF; }
.calc-picker .ci{ font-family:var(--font-mono); font-size:11px; color:var(--gold); }
.calc-picker .ct{ display:block; font-family:var(--font-display); font-weight:600; font-size:15px; margin-top:4px; }
.calc-picker .cd{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

/* ---------- Calculator layout ---------- */
.calc-grid{
  display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start;
}
@media (max-width:860px){ .calc-grid{ grid-template-columns:1fr; } }

.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-card);
}
.panel h3{ font-size:19px; margin-bottom:4px; }
.panel .sub{ font-size:13.5px; color:var(--ink-soft); margin-bottom:22px; }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.field .hint{ font-size:12px; color:var(--ink-soft); margin-top:5px; }
.input-money{
  position:relative;
}
.input-money input, .field select{
  width:100%; padding:11px 14px; font-family:var(--font-mono); font-size:16px;
  border:1.5px solid var(--line); border-radius:8px; background:var(--paper);
  color:var(--ink); transition:border-color .15s ease;
}
.input-money input{ padding-right:36px; }
.input-money input:focus, .field select:focus{ border-color:var(--green); }
.input-money::after{
  content:attr(data-unit); position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); pointer-events:none;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } }

.radio-row{ display:flex; gap:8px; flex-wrap:wrap; }
.radio-row label{
  border:1.5px solid var(--line); border-radius:999px; padding:8px 14px;
  font-size:13.5px; cursor:pointer; font-weight:500; user-select:none;
}
.radio-row input{ position:absolute; opacity:0; pointer-events:none; }
.radio-row label:has(input:checked){ background:var(--green); border-color:var(--green); color:#fff; }

/* ---------- Receipt result card (signature element) ---------- */
.receipt{
  background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:26px 24px 22px; position:relative;
  box-shadow:var(--shadow-card);
  font-family:var(--font-mono);
}
.receipt::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:10px;
  background-image:linear-gradient(135deg, var(--paper) 50%, transparent 50%), linear-gradient(45deg, var(--paper) 50%, transparent 50%);
  background-size:14px 14px; background-position:bottom left; background-repeat:repeat-x;
}
.receipt .r-head{
  text-align:center; padding-bottom:14px; margin-bottom:14px; border-bottom:1px dashed var(--line);
}
.receipt .r-head .r-title{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.02em; }
.receipt .r-head .r-date{ font-size:11px; color:var(--ink-soft); margin-top:3px; }
.receipt .r-line{
  display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; color:var(--ink-soft);
}
.receipt .r-line b{ color:var(--ink); font-weight:600; }
.receipt .r-total{
  margin-top:12px; padding-top:14px; border-top:1px dashed var(--line);
  display:flex; justify-content:space-between; align-items:baseline;
}
.receipt .r-total .lbl{ font-size:13px; color:var(--ink-soft); }
.receipt .r-total .val{ font-size:26px; font-weight:700; color:var(--green-deep); }
.receipt .r-foot{ text-align:center; font-size:10.5px; color:var(--ink-soft); margin-top:16px; letter-spacing:.05em; }
.receipt .barcode{
  height:26px; margin:14px 0 4px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px);
  opacity:.85;
}

.disclaimer{
  font-size:12px; color:var(--ink-soft); margin-top:16px; padding:12px 14px;
  background:var(--gold-tint); border-radius:8px; border:1px solid #EBDBA9;
}

/* ---------- Comparateur métiers ---------- */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; align-items:center;
}
.filters input[type=search]{
  flex:1; min-width:220px; padding:11px 14px; border:1.5px solid var(--line); border-radius:8px;
  font-size:15px; background:var(--paper); font-family:var(--font-body);
}
.filters select{
  padding:11px 14px; border:1.5px solid var(--line); border-radius:8px; font-size:14px; background:var(--paper);
}
.filters input:focus, .filters select:focus{ border-color:var(--green); }
.result-count{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); margin-bottom:16px; }

.metier-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;
}
.metier-card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  padding:20px; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease;
}
.metier-card:hover{ border-color:var(--green); box-shadow:var(--shadow-card); }
.metier-card .sector-tag{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--green-deep); background:var(--green-tint); padding:3px 8px; border-radius:4px; display:inline-block;
}
.metier-card h4{ font-size:17px; margin-top:10px; }
.metier-card .range{
  font-family:var(--font-mono); font-size:14px; margin-top:8px; color:var(--ink);
}
.metier-card .range small{ font-family:var(--font-body); color:var(--ink-soft); font-size:11.5px; }
.metier-card .bar{
  height:5px; border-radius:3px; background:var(--paper-dim); margin-top:8px; overflow:hidden;
}
.metier-card .bar span{ display:block; height:100%; background:var(--gold); }
.metier-card .tags{ margin-top:12px; display:flex; gap:6px; flex-wrap:wrap; }
.metier-card .tags span{
  font-size:11px; color:var(--ink-soft); background:var(--paper-dim); padding:3px 8px; border-radius:999px;
}
.no-results{ padding:40px; text-align:center; color:var(--ink-soft); font-size:14.5px; }

/* ---------- Modal (métier detail) ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(16,35,28,0.45); z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:640px){ .modal-backdrop{ align-items:center; padding:24px; } }
.modal-backdrop[hidden]{ display:none; }
.modal{
  background:var(--paper); width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  border-radius:16px 16px 0 0; padding:30px 28px 34px; position:relative;
  box-shadow:0 -8px 30px rgba(0,0,0,.2);
}
@media (min-width:640px){ .modal{ border-radius:16px; } }
.modal .close-btn{
  position:absolute; top:18px; right:18px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:var(--paper); cursor:pointer; font-size:16px; color:var(--ink-soft);
}
.modal .sector-tag{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--green-deep); background:var(--green-tint); padding:3px 9px; border-radius:4px; display:inline-block;
}
.modal h3{ font-size:24px; margin-top:12px; }
.modal .modal-section{ margin-top:22px; }
.modal .modal-section .lbl{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin-bottom:6px;
}
.modal .modal-section p{ margin:0; font-size:14.5px; line-height:1.55; }
.modal .salary-box{
  display:flex; gap:20px; margin-top:8px; padding:16px; background:var(--paper-dim); border-radius:10px;
}
.modal .salary-box div b{ display:block; font-family:var(--font-mono); font-size:19px; }
.modal .salary-box div span{ font-size:12px; color:var(--ink-soft); }
.modal .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.modal .chips span{ font-size:12px; background:var(--green-tint); color:var(--green-deep); padding:4px 10px; border-radius:999px; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:32px 0; }
footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; }
footer p{ margin:0; font-size:12.5px; color:var(--ink-soft); }