/* ================================================================
   CGO CONNECT — FRONT V4 DESIGN SYSTEM
   Extracted from cgo_home_v11_complete.html (2026-04-11)
   ================================================================ */

/* ═══ 1. VARIABLES ═══ */
:root {
  /* Neutres */
  --ink: #0A0A0A;
  --i2: #404040;
  --i3: #737373;
  --ln: #E5E1D8;
  --ba: #F5F1EA;

  /* Brand cobalt */
  --br: #1E40AF;
  --brh: #1E3A8A;
  --bb: #EFF2FB;
  --bt: #E8EDFB;

  /* Audiences */
  --cc: #4F46E5;
  --ccb: #EEF2FF;
  --do: #D97706;
  --dob: #FEF3C7;
  --ag: #059669;
  --agb: #D1FAE5;

  /* Accent contextuel (overrided par data-theme) */
  --active-c: var(--br);
  --active-bg: var(--bb);

  /* Typo */
  --f-sans: 'DM Sans', system-ui, sans-serif;

  /* Page */
  --page-bg: #FAFAF7;
}

/* ═══ 2. DATA-THEME OVERRIDES ═══ */
body[data-theme="cc"]    { --active-c: var(--cc); --active-bg: var(--ccb); }
body[data-theme="do"]    { --active-c: var(--do); --active-bg: var(--dob); }
body[data-theme="agent"] { --active-c: var(--ag); --active-bg: var(--agb); }

/* ═══ 3. RESET + BASE ═══ */
* { box-sizing: border-box; margin: 0; padding: 0 }
body {
  font-family: var(--f-sans);
  font-size: 16px;
  background: var(--page-bg);
  color: var(--ink);
  font-feature-settings: 'tnum';
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none }

/* Conteneur centré */
.wrap { max-width:1280px;margin:0 auto;padding:0 24px }

/* ═══ 4. TICKER ═══ */
.tk { background:var(--br);color:#fff;font-size:12px;padding:0;letter-spacing:0.04em;overflow:hidden;position:relative;display:flex;align-items:center;height:34px }
.tk .label { background:#fbbf24;color:var(--br);font-weight:500;padding:6px 12px;font-size:10px;text-transform:uppercase;letter-spacing:0.08em;flex-shrink:0;z-index:2;position:relative;display:flex;align-items:center;gap:6px;height:100% }
.tk .label .pulse { width:6px;height:6px;border-radius:50%;background:var(--br);animation:pulse 1.5s ease-in-out infinite }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.tk .track { flex:1;overflow:hidden;position:relative;height:100%;display:flex;align-items:center }
.tk .track::before,.tk .track::after { content:"";position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none }
.tk .track::before { left:0;background:linear-gradient(90deg,var(--br),transparent) }
.tk .track::after { right:0;background:linear-gradient(270deg,var(--br),transparent) }
.tk .rail { display:flex;animation:tkscroll 40s linear infinite;white-space:nowrap;gap:0 }
.tk .rail:hover { animation-play-state:paused }
.tk .it { padding:0 18px;display:inline-flex;align-items:center;gap:6px;flex-shrink:0 }
.tk .it b { color:#fbbf24;font-weight:500 }
.tk .it .sep { opacity:0.35;margin-left:12px }
@keyframes tkscroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ═══ 5. NAV TOP (noir) ═══ */
.nt { background:#0A0A0A;color:#fff;padding:9px 0;font-size:12px }
.nt .wrap { display:flex;gap:18px;align-items:center }
.nt .lg { font-weight:500;font-size:14px;margin-right:auto }
.nt .lg b { color:#fbbf24 }
.nt a { color:#A3A3A3;text-decoration:none }
.nt a:hover { color:#fff }

/* ═══ 6. NAV BLANCHE ═══ */
.nv { background:#fff;border-bottom:0.5px solid var(--ln);padding:14px 0 }
.nv .wrap { display:flex;gap:22px;align-items:center }
.nv a { font-size:14px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:500 }
.nv a:hover { color:var(--br) }
.nv .r { margin-left:auto;display:flex;gap:8px }
/* Bouton Mon espace (coloré par rôle) */
.ubtn { font-family:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:6px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all 150ms;white-space:nowrap;flex-shrink:0 }
.ubtn:hover { filter:brightness(0.92) }
.nv .ubtn-admin, .ubtn-admin { background:var(--br);color:#fff !important }
.nv .ubtn-cc, .ubtn-cc { background:var(--cc);color:#fff !important }
.nv .ubtn-do, .ubtn-do { background:var(--do);color:var(--ink) !important }
.nv .ubtn-ag, .ubtn-ag { background:var(--ag);color:#fff !important }
.ubtn-logout { font-family:inherit;width:32px;height:32px;border-radius:6px;border:1px solid var(--ln);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--i3);transition:all 150ms;flex-shrink:0 }
.ubtn-logout:hover { border-color:var(--br);color:var(--br);background:var(--bb) }

/* ═══ NAV PUBLIQUE (np-*) ═══ */
.np-bar{background:#fff;border-bottom:0.5px solid var(--ln);padding:10px 0}
.np-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px}
.np-zone{display:flex;flex-direction:column;align-items:center;gap:4px}
.np-zone-btns{display:flex;gap:6px}
.np-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--i3);white-space:nowrap}
.np-sep{width:1px;height:24px;background:var(--ln);flex-shrink:0}
.np-btn{font-family:inherit;font-size:13px;font-weight:700;padding:7px 13px;border-radius:9px;border:1.5px solid;background:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:all 150ms;cursor:pointer}
.np-ag{border-color:var(--ag);color:var(--ag)}
.np-ag:hover{background:var(--agb)}
.np-cc{border-color:var(--cc);color:var(--cc)}
.np-cc:hover{background:var(--ccb)}
.np-do{border-color:var(--do);color:var(--do)}
.np-do:hover{background:var(--dob)}
.np-link{font-size:13px;font-weight:600;color:var(--i2);text-decoration:none;padding:7px 12px;border-radius:8px;white-space:nowrap;transition:all 150ms}
.np-link:hover{background:var(--bb);color:var(--br)}
.np-tarifs{font-family:inherit;font-size:13px;font-weight:700;padding:7px 13px;border-radius:9px;border:none;background:var(--br);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;box-shadow:0 2px 6px rgba(30,64,175,.25);transition:all 150ms}
.np-tarifs:hover{filter:brightness(0.9)}
.np-r{margin-left:auto;display:flex;align-items:center;gap:6px}
@media(max-width:1100px){
  .np-inner{flex-wrap:wrap;gap:10px}
  .np-label{display:none}
}
@media(max-width:768px){
  .np-inner{overflow-x:auto;flex-wrap:nowrap;gap:8px;padding-bottom:6px;scrollbar-width:none}
  .np-inner::-webkit-scrollbar{display:none}
  .np-sep{display:none}
  .np-btn,.np-link,.np-tarifs{font-size:12px;padding:6px 10px}
}

.ndot { width:6px;height:6px;border-radius:50%;flex-shrink:0 }
.ndot.ag { background:var(--ag) }
.ndot.cc { background:var(--cc) }
.ndot.do { background:var(--do) }

/* ═══ 7. BOUTONS ═══ */
.btn { font-family:inherit;font-size:14px;padding:9px 16px;border-radius:8px;border:0.5px solid var(--ln);background:#fff;color:var(--ink);text-decoration:none;display:inline-block;cursor:pointer;transition:all 150ms }
.btn:hover { border-color:var(--br);color:var(--br) }
.bp { background:var(--br);border-color:var(--br);color:#fff }
.bp:hover { background:var(--brh);border-color:var(--brh);color:#fff }
.bcc { background:var(--cc);border-color:var(--cc);color:#fff }
.bdo { background:var(--do);border-color:var(--do);color:#fff }
.bag { background:var(--ag);border-color:var(--ag);color:#fff }
.bw { background:#fff;color:var(--br);border-color:#fff;font-weight:500 }

/* ═══ 8. HERO ═══ */
.hero { position:relative;min-height:360px;background:url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1600&q=80') center/cover;display:flex;align-items:center;justify-content:center;padding:40px 24px }
.hero::before { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.55),rgba(30,64,175,0.78)) }
.hin { position:relative;max-width:820px;width:100%;text-align:center }
.heb { font-size:12px;text-transform:uppercase;letter-spacing:0.12em;color:#fbbf24;font-weight:500;margin:0 0 16px }
.hh1 { font-size:34px;font-weight:500;color:#fff;line-height:1.08;letter-spacing:-0.025em;margin:0 0 18px }
.hh1 em { font-style:normal;color:#fbbf24 }

/* Hero tabs */
.hero-tabs { display:flex;width:100%;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.22);border-radius:8px 8px 0 0;padding:0;gap:0;margin-bottom:0;overflow:hidden }
.hero-tabs .htab { flex:1 1 0;font-family:inherit;font-size:13px;font-weight:500;height:44px;padding:0 16px;border:0;background:transparent;color:#fff;cursor:pointer;letter-spacing:0.02em;transition:all 180ms;display:flex;align-items:center;justify-content:center;gap:7px;border-right:0.5px solid rgba(255,255,255,0.18);min-width:0 }
.hero-tabs .htab:last-child { border-right:0 }
.hero-tabs .htab:hover { background:rgba(255,255,255,0.1) }
.hero-tabs .htab .dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;opacity:0.85 }
.hero-tabs .htab .dot.do { background:#fbbf24 }
.hero-tabs .htab .dot.ag { background:#6ee7b7 }
.hero-tabs .htab .dot.cc { background:#a5b4fc }
.hero-tabs .htab.active { background:var(--active-c) }
.hero-tabs .htab.active .dot { background:#fff;opacity:1 }

/* Hero search bar */
.sb3 { background:#fff;border-radius:0 10px 10px 10px;padding:8px;display:grid;grid-template-columns:1.4fr 1fr 1fr 200px;gap:6px;align-items:center;box-shadow:0 4px 24px rgba(0,0,0,0.15);border-top:2px solid var(--active-c);transition:border-color 200ms }
.sb3 input,.sb3 select { font-family:inherit;font-size:14px;height:44px;padding:0 14px;border:0;background:transparent;color:var(--ink);outline:none;border-right:0.5px solid var(--ln);width:100% }
.sb3 .sbtn { background:var(--active-c);color:#fff;font-weight:500;font-size:14px;padding:0 22px;height:44px;border-radius:6px;border:0;cursor:pointer;font-family:inherit;transition:background 200ms;white-space:nowrap;min-width:200px;flex-shrink:0 }
.hin[data-active="do"] { --active-c:#D97706 }
.hin[data-active="ag"] { --active-c:#059669 }
.hin[data-active="cc"] { --active-c:#4F46E5 }

/* Hero chips */
.chips { margin-top:18px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap }
.chip { background:rgba(255,255,255,0.12);color:#fff;font-size:12px;padding:7px 14px;border-radius:14px;text-decoration:none;border:0.5px solid rgba(255,255,255,0.3) }
.chip.gold { background:#fbbf24;color:var(--br);border-color:#fbbf24;font-weight:500 }

/* ═══ 9. SECTIONS ═══ */
.sec { padding:20px 0;border-bottom:0.5px solid var(--ln) }
.sec > .wrap, .sec > .hd, .sec > .howit { max-width:1280px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px }
.sec.alt { background:var(--ba) }
.hd { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px }
.hd h2 { font-size:18px;font-weight:500;margin:0;letter-spacing:-0.01em }
.hd .sub { font-size:13px;color:var(--i3);margin-left:10px;font-weight:400 }
.hd a { font-size:13px;color:var(--br);text-decoration:none;font-weight:500;text-transform:uppercase;letter-spacing:0.05em }

/* ═══ 10. CARDS PUBLICATIONS ═══ */
.ofg { display:grid;grid-template-columns:repeat(5,1fr);gap:10px }
.of { background:#fff;border:0.5px solid var(--ln);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:all 150ms }
.of:hover { border-color:var(--br);transform:translateY(-2px) }
.of .ph { aspect-ratio:16/9;background-size:cover;background-position:center;position:relative }
.of .lg { position:absolute;left:8px;bottom:-16px;width:34px;height:34px;background:#fff;border:0.5px solid var(--ln);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:500;color:var(--i2);text-align:center;line-height:1.1;padding:3px;overflow:hidden }
.of .badge { position:absolute;top:6px;right:6px;background:#fff;font-size:8px;font-weight:500;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:0.05em }
.of .bd { padding:20px 10px 8px;flex:1;display:flex;flex-direction:column }
.of h3 { font-size:12px;font-weight:500;margin:0 0 3px;line-height:1.25 }
.of .cmp { font-size:10px;color:var(--i2);margin:0 0 6px }
.of .mt { font-size:9px;color:var(--i3);display:flex;gap:6px;margin-top:auto }
.of .ft { padding:5px 10px;border-top:0.5px solid var(--ln);background:var(--ba);font-size:9px;display:flex;justify-content:space-between }
.of .ft .sal { font-weight:500;font-variant-numeric:tabular-nums;font-size:10px }
.of .ft .ag { color:var(--i3);font-size:8px;text-transform:uppercase;letter-spacing:0.05em }
.of.cc { border-top:3px solid var(--cc) }
.of.do { border-top:3px solid var(--do) }
.of.ag-t { border-top:3px solid var(--ag) }
.of.cc .badge,.of.cc .ft .sal { color:var(--cc) }
.of.do .badge,.of.do .ft .sal { color:var(--do) }
.of.ag-t .badge,.of.ag-t .ft .sal { color:var(--ag) }

/* Badges featured/gold */
.bd-feat { position:absolute;top:10px;left:10px;background:#fbbf24;color:#1E40AF;font-size:9px;font-weight:600;padding:4px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:0.05em }
.bd-gold { position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;font-size:9px;font-weight:600;padding:4px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:0.05em }

/* ═══ 11. DUO (publications + villes) ═══ */
.duo { display:grid;grid-template-columns:3fr 1fr;gap:14px;padding:20px 24px;border-bottom:0.5px solid var(--ln);align-items:start;max-width:1280px;margin:0 auto }
.duo .col-pubs,.duo .col-villes { display:flex;flex-direction:column }
.duo .ofg { grid-template-columns:repeat(5,1fr);gap:7px }
.duo .ofg .of { border-radius:8px }
.duo .ofg .of .ph { aspect-ratio:16/8 }
.duo .ofg .of .lg { width:22px;height:22px;bottom:-10px;left:6px;font-size:6px;padding:2px }
.duo .ofg .of .badge { top:5px;right:5px;font-size:7px;padding:2px 5px }
.duo .ofg .of .bd { padding:14px 7px 5px }
.duo .ofg .of h3 { font-size:10px;margin:0 0 2px;line-height:1.2 }
.duo .ofg .of .cmp { font-size:8px;margin:0 0 4px }
.duo .ofg .of .mt { font-size:8px;gap:4px }
.duo .ofg .of .ft { padding:4px 7px;font-size:7px }
.duo .ofg .of .ft .sal { font-size:9px }
.duo .ofg .of .ft .ag { font-size:7px }
.duo .bd-feat,.duo .bd-gold { top:6px;left:6px;font-size:8px;padding:2px 6px;border-radius:4px;display:flex;align-items:center;gap:4px }

/* Villes */
.duo .villes { grid-template-columns:1fr;gap:7px }
.duo .vt { aspect-ratio:3.2/1;border-radius:8px }
.villes { display:grid;grid-template-columns:repeat(6,1fr);gap:12px }
.vt { aspect-ratio:1/1.15;border-radius:10px;background-size:cover;background-position:center;position:relative;overflow:hidden;cursor:pointer }
.vt::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.1) 40%,rgba(10,10,10,0.85)) }
.vt .lab { position:absolute;left:14px;right:14px;bottom:14px;color:#fff;z-index:1 }
.vt .lab b { display:block;font-size:16px;font-weight:500 }
.vt .lab span { font-size:12px;opacity:0.88 }
.duo .vt .lab { left:11px;right:11px;bottom:9px }
.duo .vt .lab b { font-size:14px }
.duo .vt .lab span { font-size:10px }

/* ═══ 12. METIERS PILULES ═══ */
.sec-met { padding:14px 0;background:var(--ba);border-bottom:0.5px solid var(--ln) }
.sec-met .mhd, .sec-met .met-strip { max-width:1280px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px }
.sec-met .mhd { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px }
.sec-met .mhd h2 { font-size:12px;font-weight:500;margin:0;color:var(--i3);text-transform:uppercase;letter-spacing:0.08em }
.sec-met .mhd h2 b { color:var(--ink);font-weight:500 }
.sec-met .mhd a { font-size:10px;color:var(--br);text-decoration:none;text-transform:uppercase;letter-spacing:0.05em;font-weight:500 }
.met-strip { display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ln) transparent;padding-bottom:4px }
.met-strip::-webkit-scrollbar { height:4px }
.met-strip::-webkit-scrollbar-thumb { background:var(--ln);border-radius:2px }
.met-pill { flex-shrink:0;background:#fff;border:0.5px solid var(--ln);border-radius:18px;padding:6px 12px 6px 8px;display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-size:12px;transition:all 150ms;white-space:nowrap }
.met-pill:hover { border-color:var(--br);transform:translateY(-1px);box-shadow:0 2px 6px rgba(30,64,175,0.08) }
.met-pill .ic { width:22px;height:22px;border-radius:50%;background:var(--bb);display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.met-pill .ic svg { width:12px;height:12px;stroke:var(--br);fill:none;stroke-width:2 }
.met-pill b { font-weight:500 }
.met-pill .cnt { color:var(--br);font-weight:500;font-variant-numeric:tabular-nums;font-size:10px;background:var(--bb);padding:1px 6px;border-radius:8px }

/* ═══ 13. COMMENT CA MARCHE ═══ */
.howit { display:grid;grid-template-columns:repeat(4,1fr);gap:10px }
.step { background:#fff;border:0.5px solid var(--ln);border-radius:10px;padding:14px 16px;position:relative }
.step .num { position:absolute;top:-12px;left:18px;width:28px;height:28px;border-radius:50%;background:var(--br);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;border:2px solid var(--page-bg) }
.step .ic { font-size:18px;margin:4px 0 8px }
.step h3 { font-size:14px;font-weight:500;margin:0 0 6px }
.step p { font-size:13px;color:var(--i3);line-height:1.55;margin:0 0 12px }
.step .audi { display:flex;gap:6px }
.step .tag { font-size:9px;text-transform:uppercase;letter-spacing:0.06em;padding:3px 7px;border-radius:3px;font-weight:500 }
.tag.cc { background:var(--ccb);color:var(--cc) }
.tag.do { background:var(--dob);color:var(--do) }
.tag.ag { background:var(--agb);color:var(--ag) }

/* ═══ 14. LOGO GRID (CC + DO) ═══ */
.logo-duo { display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1280px;margin:0 auto }
.logo-grid-sec { padding:20px 24px }
.logo-grid-sec:first-child { border-right:0.5px solid var(--ln) }
.logo-grid-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px }
.logo-grid-hd h2 { font-size:17px;font-weight:700;color:var(--ink);margin:0 }
.logo-grid-hd a { font-size:13px;color:var(--cc);text-decoration:none }
.logo-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px }
.logo-tile { background:#fff;border:1.5px solid var(--ln);border-radius:12px;padding:18px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;transition:border-color .15s,box-shadow .15s;position:relative }
.logo-tile:hover { border-color:var(--cc);box-shadow:0 4px 16px rgba(79,70,229,.1) }
.logo-tile .lt-logo { width:52px;height:52px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0 }
.logo-tile .lt-logo img { width:100%;height:100%;object-fit:contain }
.logo-tile .lt-name { font-size:12px;font-weight:600;color:var(--ink);text-align:center;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical }
.logo-tile .lt-badge { position:absolute;top:8px;right:8px;background:#ECFDF5;color:#059669;border:1px solid #6EE7B7;font-size:10px;font-weight:700;padding:2px 6px;border-radius:20px }
@media(max-width:900px) { .logo-duo { grid-template-columns:1fr } .logo-grid-sec:first-child { border-right:none;border-bottom:0.5px solid var(--ln) } .logo-grid { grid-template-columns:repeat(3,1fr) } }
@media(max-width:500px) { .logo-grid { grid-template-columns:repeat(2,1fr) } }
.dos-mini .doc .l2 .bdg { font-size:9px;color:var(--do);font-weight:500 }
.dos-mini .doc .l2 .note { color:#f59e0b;font-weight:500;font-size:10px }
.dos-mini .doc .pct-c { display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0 }
.dos-mini .doc .pct-c b { font-size:12px;color:var(--do);font-weight:500;font-variant-numeric:tabular-nums;line-height:1 }
.dos-mini .doc .pct-c .bar { width:40px;height:3px;background:var(--ba);border-radius:2px;overflow:hidden }
.dos-mini .doc .pct-c .bar i { display:block;height:100%;background:var(--do) }

/* ═══ 15. FOOTER ═══ */
.ftr { background:#0A0A0A;color:#A3A3A3;padding:32px 0 22px;font-size:13px }
.ftr .fcols, .ftr .fbot { max-width:1280px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px }
.ftr b { color:#fff;font-weight:500 }
.ftr .fcols { display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:24px }
.ftr .fcol h4 { font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:#737373;margin-bottom:12px;font-weight:500 }
.ftr .fcol a { display:block;font-size:13px;color:#A3A3A3;padding:3px 0;text-decoration:none }
.ftr .fcol a:hover { color:#fff }
.ftr .fbot { border-top:0.5px solid #2a2a2a;padding-top:16px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#737373 }
.ftr .fbot .socials { display:flex;gap:12px }
.ftr .fbot .socials a { color:#737373;transition:color 150ms }
.ftr .fbot .socials a:hover { color:#fff }

/* ═══ 15b. FOOTER V3 (stats + 5 colonnes) ═══ */
.footer { background:var(--ink, #0A0A0A);color:white;margin-top:40px;padding:60px 28px 30px }
.footer-inner { max-width:1280px;margin:0 auto }
.footer-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:40px }
.footer-stat-num { font-family:Georgia,serif;font-size:32px;font-weight:600;line-height:1;letter-spacing:-0.025em;margin-bottom:8px;color:#fff }
.footer .footer-stat-num.cc { background:transparent;border:none;padding:0;text-align:left;box-shadow:none }
.footer .footer-stat-num.cc em { color:#a5b4fc;font-style:italic }
.footer .footer-stat-num.do { background:transparent;border:none;padding:0;text-align:left;box-shadow:none }
.footer .footer-stat-num.do em { color:#fcd34d;font-style:italic }
.footer .footer-stat-num.ag { background:transparent;border:none;padding:0;text-align:left;box-shadow:none }
.footer .footer-stat-num.ag em { color:#6ee7b7;font-style:italic }
.footer-stat-num.all em { font-style:italic;background:linear-gradient(90deg,#a5b4fc,#fcd34d,#6ee7b7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent }
.footer-stat-label { font-size:10px;color:rgba(255,255,255,0.55);text-transform:uppercase;letter-spacing:0.08em }
.footer-cols { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px }
.footer-brand-text { font-family:Georgia,serif;font-size:20px;font-weight:500;line-height:1.35;margin-top:16px;color:rgba(255,255,255,0.85);max-width:320px }
.footer-brand-text em { font-style:italic;background:linear-gradient(90deg,#a5b4fc,#fcd34d,#6ee7b7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent }
.footer .footer-cols > div { background:transparent !important;border:none !important;padding:0 !important;box-shadow:none !important;text-align:left !important;border-radius:0 !important }
.footer .footer-col { background:transparent !important;border:none !important;padding:0 !important;box-shadow:none !important;text-align:left !important;border-radius:0 !important }
.footer .footer-col h5 { font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);margin-bottom:16px }
.footer .footer-col a { display:block;font-size:13.5px;color:rgba(255,255,255,0.75);padding:5px 0;transition:color 0.15s;text-decoration:none }
.footer .footer-col.cc a:hover { color:#a5b4fc }
.footer .footer-col.do a:hover { color:#fcd34d }
.footer .footer-col.ag a:hover { color:#6ee7b7 }
.footer .footer-col a:hover { color:white }
.footer-bottom { padding-top:24px;border-top:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:space-between;font-size:13px;color:rgba(255,255,255,0.5) }

/* ═══ 15c. MARKETPLACE HEADER TABS ═══ */
.mkt-header{max-width:1280px;margin:0 auto;padding:1.25rem 24px 0}
.mkt-tabs{display:flex;gap:0;border-bottom:2px solid var(--ln)}
.mkt-tab{padding:10px 18px;font-size:14px;font-weight:600;color:var(--i3);border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .12s;font-family:inherit;text-decoration:none;display:inline-block}
.mkt-tab:hover{color:var(--ink)}
.mkt-tab.active-do{color:var(--do);border-bottom-color:var(--do)}
.mkt-tab.active-cc{color:var(--cc);border-bottom-color:var(--cc)}
.mkt-tab.active-ag{color:var(--ag);border-bottom-color:var(--ag)}

/* ═══ 16. RESPONSIVE ═══ */
@media (max-width:900px) {
  .top-duo { grid-template-columns:1fr }
  .ccs,.dos-mini { grid-template-columns:1fr }
  .howit { grid-template-columns:repeat(2,1fr) }
  .ofg { grid-template-columns:repeat(3,1fr) }
  .footer-cols { grid-template-columns:1fr 1fr }
  .footer-stats { grid-template-columns:1fr 1fr }
}
@media (max-width:640px) {
  .hero-tabs .htab { font-size:10px;padding:0 8px }
  .sb3 .sbtn { min-width:140px;font-size:12px }
  .duo { grid-template-columns:1fr }
  .ofg { grid-template-columns:repeat(2,1fr) }
  .duo .ofg { grid-template-columns:repeat(2,1fr) }
  .howit { grid-template-columns:1fr }
  .nt { flex-wrap:wrap;gap:10px }
  .nv { flex-wrap:wrap;gap:10px }
  .footer-stats, .footer-cols { grid-template-columns:1fr }
}