/* ═══════════════════════════════════════════════
   frontalier-geneve.fr — Shared Stylesheet
   ═══════════════════════════════════════════════ */
:root {
  --gold: #C9A84C;
  --gold-light: #F0D080;
  --gold-dim: rgba(201,168,76,0.12);
  --red: #C0392B;
  --red-light: #E74C3C;
  --green: #27AE60;
  --blue: #2980B9;
  --dark: #0F1114;
  --dark-2: #181C22;
  --dark-3: #232830;
  --dark-4: #2C3240;
  --mid: #3A4150;
  --text: #E8EAF0;
  --text-muted: #8A95A8;
  --text-dim: #5A6478;
  --border: rgba(255,255,255,0.07);
  --border-gold: rgba(201,168,76,0.25);
  --shadow: 0 8px 40px rgba(0,0,0,0.4);
  --radius: 12px;
  --radius-sm: 8px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Sora', sans-serif;
  background:var(--dark);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
}

/* ── TYPOGRAPHY ── */
h1 { font-size:clamp(1.9rem,4vw,3rem); font-weight:800; line-height:1.15; }
h2 { font-size:clamp(1.4rem,3vw,2.2rem); font-weight:800; line-height:1.2; }
h3 { font-size:1.05rem; font-weight:700; }
h4 { font-size:0.9rem; font-weight:700; }
p  { line-height:1.75; }
a  { color:var(--gold); }
em { font-style:normal; color:var(--gold); }

/* ── HEADER ── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(15,17,20,0.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.header-inner {
  max-width:1240px; margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.site-logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text);
  font-size:1rem; font-weight:700;
}
.site-logo .accent { color:var(--gold); }
.logo-flags { display:flex; gap:3px; align-items:center; }
.flag-fr {
  width:13px; height:18px; border-radius:2px;
  background:linear-gradient(to right,#002395 33%,#fff 33% 66%,#ED2939 66%);
}
.flag-ch {
  width:18px; height:18px; border-radius:2px;
  background:#D52B1E; position:relative;
}
.flag-ch::before,.flag-ch::after {
  content:''; position:absolute; background:#fff; border-radius:1px;
}
.flag-ch::before { width:4px; height:11px; top:3.5px; left:7px; }
.flag-ch::after  { width:11px; height:4px; top:7px; left:3.5px; }

.site-nav { display:flex; align-items:center; gap:0; }
.site-nav a {
  color:var(--text-muted); text-decoration:none;
  font-size:0.8rem; font-weight:500; letter-spacing:0.02em;
  padding:0 0.9rem; height:64px; display:flex; align-items:center;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.site-nav a:hover,
.site-nav a.active { color:var(--gold); border-bottom-color:var(--gold); }
.site-nav .nav-cta {
  background:var(--gold); color:var(--dark) !important;
  margin-left:0.5rem; padding:0 1.1rem !important; height:36px !important;
  border-radius:var(--radius-sm); font-weight:700; border-bottom:none !important;
  font-size:0.78rem !important;
}
.site-nav .nav-cta:hover { background:var(--gold-light) !important; }

/* ── DISCLAIMER BANNER (discret) ── */
.disclaimer-bar {
  background:rgba(201,168,76,0.06);
  border-bottom:1px solid rgba(201,168,76,0.12);
  padding:7px 2rem;
  font-size:0.7rem;
  color:var(--text-dim);
  text-align:center;
  position:fixed; top:64px; left:0; right:0; z-index:199;
}
.disclaimer-bar a { color:var(--text-dim); text-decoration:underline; }
.disclaimer-bar a:hover { color:var(--gold); }

/* ── PAGE WRAPPER ── */
.page-wrap { padding-top:96px; } /* header 64 + disclaimer 32 */

/* ── BREADCRUMB ── */
.breadcrumb {
  max-width:1240px; margin:0 auto; padding:1.5rem 2rem 0;
  font-size:0.76rem; color:var(--text-muted);
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.breadcrumb a { color:var(--gold); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span { color:var(--text-dim); }

/* ── SECTIONS ── */
section { padding:5rem 2rem; }
.section-inner { max-width:1240px; margin:0 auto; }
.section-label {
  font-size:0.7rem; font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:0.14em; margin-bottom:0.7rem;
  display:flex; align-items:center; gap:8px;
}
.section-label::before {
  content:''; width:20px; height:2px; background:var(--gold); border-radius:2px;
}
.section-lead {
  font-family:'Lora', serif;
  color:var(--text-muted); font-size:1rem; line-height:1.8;
  max-width:640px; margin-bottom:3rem;
}

/* ── CARDS ── */
.card {
  background:var(--dark-3); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.8rem;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover {
  transform:translateY(-3px);
  border-color:var(--border-gold);
  box-shadow:var(--shadow);
}
.card-link { text-decoration:none; color:inherit; display:block; }
.card-link .card { height:100%; }

/* ── TABLES ── */
.table-wrap {
  background:var(--dark-3); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.table-head {
  background:linear-gradient(135deg,rgba(192,57,43,0.15),rgba(201,168,76,0.08));
  padding:1.2rem 1.5rem; border-bottom:1px solid var(--border);
}
.table-head h3 { font-size:0.95rem; }
.table-head p { font-size:0.74rem; color:var(--text-muted); margin-top:4px; }
table { width:100%; border-collapse:collapse; }
thead th {
  padding:0.7rem 1.2rem; text-align:left;
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--text-muted); background:rgba(255,255,255,0.025);
  border-bottom:1px solid var(--border);
}
tbody td { padding:0.8rem 1.2rem; font-size:0.83rem; border-bottom:1px solid rgba(255,255,255,0.04); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(255,255,255,0.02); }
td.gold { color:var(--gold); font-weight:700; }
td.green { color:var(--green); font-weight:600; }
td.red { color:var(--red-light); font-weight:600; }

/* ── CALLOUT BOXES ── */
.callout {
  border-radius:var(--radius-sm); padding:1.2rem 1.5rem; margin:1.5rem 0;
  display:flex; gap:12px; align-items:flex-start;
}
.callout-icon { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.callout-body strong { display:block; font-size:0.84rem; margin-bottom:5px; }
.callout-body p, .callout-body { font-size:0.81rem; color:var(--text-muted); line-height:1.65; }
.callout.gold  { background:rgba(201,168,76,0.07); border:1px solid var(--border-gold); }
.callout.gold .callout-body strong { color:var(--gold); }
.callout.red   { background:rgba(192,57,43,0.07); border:1px solid rgba(192,57,43,0.25); }
.callout.red .callout-body strong  { color:var(--red-light); }
.callout.green { background:rgba(39,174,96,0.07); border:1px solid rgba(39,174,96,0.25); }
.callout.green .callout-body strong { color:var(--green); }
.callout.blue  { background:rgba(41,128,185,0.07); border:1px solid rgba(41,128,185,0.25); }
.callout.blue .callout-body strong  { color:var(--blue); }

/* ── INLINE DISCLAIMER (dans articles) ── */
.inline-disclaimer {
  font-size:0.72rem; color:var(--text-dim);
  border-left:2px solid var(--border);
  padding-left:0.8rem; margin:1rem 0;
  font-style:italic;
  line-height:1.6;
}
.inline-disclaimer a { color:var(--text-dim); text-decoration:underline; }

/* ── BADGES ── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.07em;
  text-transform:uppercase; padding:3px 9px; border-radius:10px;
}
.badge-gold  { background:rgba(201,168,76,0.12); color:var(--gold);  border:1px solid rgba(201,168,76,0.2); }
.badge-green { background:rgba(39,174,96,0.1);   color:var(--green); border:1px solid rgba(39,174,96,0.2); }
.badge-red   { background:rgba(192,57,43,0.1);   color:var(--red-light); border:1px solid rgba(192,57,43,0.2); }
.badge-blue  { background:rgba(41,128,185,0.1);  color:var(--blue);  border:1px solid rgba(41,128,185,0.2); }
.badge-pulse::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:currentColor; animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:0.8rem 1.6rem; border-radius:var(--radius-sm);
  font-weight:700; font-size:0.87rem; text-decoration:none;
  cursor:pointer; border:none; font-family:'Sora',sans-serif;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform:translateY(-2px); }
.btn-gold {
  background:var(--gold); color:var(--dark);
  box-shadow:0 4px 20px rgba(201,168,76,0.25);
}
.btn-gold:hover { background:var(--gold-light); box-shadow:0 8px 30px rgba(201,168,76,0.4); }
.btn-outline {
  border:1px solid var(--border); color:var(--text);
  background:transparent;
}
.btn-outline:hover { border-color:var(--gold); background:rgba(201,168,76,0.05); color:var(--gold); }

/* ── TOC ── */
.toc {
  background:var(--dark-3); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.5rem;
  margin-bottom:2.5rem;
}
.toc-title {
  font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--text-muted); margin-bottom:0.9rem;
}
.toc ol { padding-left:1.1rem; display:flex; flex-direction:column; gap:5px; }
.toc li { font-size:0.83rem; }
.toc a { color:var(--gold); text-decoration:none; }
.toc a:hover { text-decoration:underline; }

/* ── ARTICLE LAYOUT ── */
.article-wrap { max-width:860px; margin:0 auto; padding:0 2rem 5rem; }
.article-hero { padding:2.5rem 2rem 3.5rem; }
.article-hero-inner { max-width:860px; margin:0 auto; }
.article-meta { display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1.2rem; }
.article-date { font-size:0.74rem; color:var(--text-muted); }
.article-lead {
  font-family:'Lora',serif; font-size:1.05rem; color:var(--text-muted);
  line-height:1.8; margin-top:1rem;
}
.content-section { padding:2.5rem 0; border-top:1px solid var(--border); }
.content-section h2 { margin-bottom:0.9rem; }
.content-section h3 { color:var(--gold); margin:1.8rem 0 0.6rem; font-size:1rem; }
.content-section p { font-family:'Lora',serif; font-size:0.94rem; color:var(--text-muted); margin-bottom:0.9rem; }
.content-section ul, .content-section ol { padding-left:1.3rem; display:flex; flex-direction:column; gap:5px; }
.content-section li { font-family:'Lora',serif; font-size:0.9rem; color:var(--text-muted); line-height:1.65; }

/* ── STEPS ── */
.steps { display:flex; flex-direction:column; gap:1rem; margin:1.5rem 0; }
.step { display:flex; gap:1rem; align-items:flex-start; }
.step-num {
  width:30px; height:30px; border-radius:50%;
  background:var(--gold); color:var(--dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.82rem; flex-shrink:0; margin-top:2px;
}
.step-body h4 { font-size:0.88rem; margin-bottom:3px; }
.step-body p { font-size:0.8rem; color:var(--text-muted); line-height:1.6; }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap:0.5rem; }
.faq-item {
  background:var(--dark-3); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
}
.faq-btn {
  width:100%; text-align:left; padding:1rem 1.3rem;
  background:none; border:none; color:var(--text); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:'Sora',sans-serif; font-size:0.87rem; font-weight:600;
  transition:color .2s;
}
.faq-btn:hover { color:var(--gold); }
.faq-icon { color:var(--gold); font-size:1.3rem; flex-shrink:0; transition:transform .3s; }
.faq-answer {
  max-height:0; overflow:hidden; transition:max-height .4s ease;
  padding:0 1.3rem;
  font-size:0.82rem; color:var(--text-muted); line-height:1.7;
}
.faq-answer a { color:var(--gold); }
.faq-item.open .faq-answer { max-height:400px; padding-bottom:1.2rem; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

/* ── NEWSLETTER ── */
.newsletter-section {
  background:linear-gradient(135deg,rgba(192,57,43,0.1),rgba(201,168,76,0.06));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.newsletter-box { max-width:560px; margin:0 auto; text-align:center; }
.newsletter-box h2 { margin-bottom:0.8rem; }
.newsletter-box p { font-size:0.87rem; color:var(--text-muted); margin-bottom:1.5rem; }
.nl-form { display:flex; gap:0.7rem; flex-wrap:wrap; justify-content:center; }
.nl-input {
  flex:1; min-width:220px; padding:0.8rem 1.1rem;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text);
  font-family:'Sora',sans-serif; font-size:0.87rem; outline:none;
  transition:border-color .2s;
}
.nl-input:focus { border-color:var(--gold); }
.nl-input::placeholder { color:var(--text-muted); }
.nl-note { font-size:0.7rem; color:var(--text-dim); margin-top:0.9rem; }

/* ── FOOTER ── */
.site-footer {
  background:var(--dark); border-top:1px solid var(--border);
  padding:3.5rem 2rem 0;
}
.footer-grid {
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap:2.5rem; padding-bottom:3rem;
}
.footer-brand p { font-size:0.79rem; color:var(--text-muted); line-height:1.7; margin-top:0.8rem; max-width:250px; }
.footer-col h4 {
  font-size:0.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.11em; color:var(--text-dim); margin-bottom:1rem;
}
.footer-col a {
  display:block; color:var(--text-muted); text-decoration:none;
  font-size:0.79rem; margin-bottom:0.45rem; transition:color .2s;
}
.footer-col a:hover { color:var(--gold); }

/* ── FOOTER DISCLAIMER ── */
.footer-disclaimer {
  max-width:1240px; margin:0 auto;
  border-top:1px solid var(--border);
  padding:1.5rem 0;
  font-size:0.72rem; color:var(--text-dim);
  line-height:1.65;
}
.footer-disclaimer strong { color:var(--text-muted); }
.footer-disclaimer a { color:var(--text-dim); text-decoration:underline; }
.footer-disclaimer a:hover { color:var(--gold); }
.footer-bottom {
  max-width:1240px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  border-top:1px solid var(--border);
  padding:1.2rem 0 1.5rem;
  font-size:0.72rem; color:var(--text-dim);
}
.footer-links { display:flex; gap:1.2rem; flex-wrap:wrap; }
.footer-links a { color:var(--text-dim); text-decoration:none; }
.footer-links a:hover { color:var(--gold); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr 1fr; }
  .footer-grid .footer-brand { grid-column:1/-1; }
}
@media (max-width:768px) {
  .site-nav { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  section { padding:3.5rem 1.2rem; }
  .article-wrap { padding:0 1.2rem 4rem; }
}
@media (max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}

/* ── UTILITIES ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.3rem; }
@media (max-width:768px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
}
.mt-1 { margin-top:0.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mt-4 { margin-top:2.5rem; }
.text-gold { color:var(--gold); }
.text-muted { color:var(--text-muted); }
.text-dim { color:var(--text-dim); }
.text-small { font-size:0.78rem; }
.text-xs { font-size:0.7rem; }
.fw-bold { font-weight:700; }
.fw-black { font-weight:800; }

/* ── ANIMATIONS ── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.anim-in { animation:fadeInUp .6s ease both; }
.anim-delay-1 { animation-delay:.1s; }
.anim-delay-2 { animation-delay:.2s; }
.anim-delay-3 { animation-delay:.3s; }
.anim-delay-4 { animation-delay:.4s; }