/* =====================================================================
   forex.css - pages Brokers (top_brokers + fiches brokers) : body.p-forex
   Reprend le design system de style.css (variables :root, .hero, .btn,
   .chip, .b, .sub...) et les composants de la page Top Bookmakers.
   A charger APRES style.css. Peut aussi etre colle a la fin de style.css.
   ===================================================================== */

.p-forex section.b{padding:36px 0 0}
.p-forex .sub{margin:0 0 16px}

/* ----- Hero avec carte vedette (comme .p-bookmakers) ----- */
.p-forex .hero{padding:36px 0 40px}
.p-forex .hero .w{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:center}
.p-forex .hero h1{font-size:clamp(28px,4.8vw,46px);line-height:1.08;margin:0 0 10px;letter-spacing:-.02em}
.p-forex .hero p{max-width:34em}
.p-forex .hero .chip{display:inline-block;margin-bottom:12px}
.fx-act{display:flex;flex-wrap:wrap;gap:10px}
.p-forex .hero .btn.alt{color:var(--navtxt);border-color:rgba(255,255,255,.3)}
.p-forex .stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.p-forex .stats div{font-size:13px;opacity:.85}
.p-forex .stats b{display:block;font-size:24px;color:var(--hot);opacity:1}

.p-forex .feat{background:var(--card);color:var(--ink);border-radius:18px;padding:20px;box-shadow:0 18px 40px rgba(0,0,0,.35);position:relative}
.p-forex .feat .tag{position:absolute;top:-12px;left:18px;background:var(--hot);color:#2b1a00;font:800 12px var(--f);padding:4px 10px;border-radius:999px;letter-spacing:.03em}
.p-forex .feat .top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.p-forex .feat .top img{width:52px;height:52px;object-fit:contain;border-radius:10px;background:var(--bg);border:1px solid var(--line);padding:3px}
.p-forex .feat h2{margin:0;font-size:22px}
.p-forex .feat .big{font-size:42px;font-weight:900;line-height:1;color:var(--brand)}
.p-forex .feat .big small{font-size:15px;font-weight:600;color:var(--muted)}
.p-forex .feat .kv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.p-forex .feat .kv div{background:var(--chip);border-radius:10px;padding:8px 10px}
.p-forex .feat .kv small{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.p-forex .feat .kv b{font-size:15px}
.p-forex .feat .btn{width:100%}

/* Note du broker : badge + jauge (comme .p-bookmakers .gr) */
.p-forex .gr{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:var(--muted)}
.p-forex .gr b{font-size:13px;background:var(--nav);color:var(--hot);border-radius:6px;padding:1px 7px}
.p-forex .gr em{font-style:normal;font-weight:700;color:var(--ink)}
.p-forex .meter{flex:1;max-width:120px;height:7px;border-radius:9px;background:var(--line);overflow:hidden}
.p-forex .meter i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--hot));border-radius:9px}

/* Bandeau de cotations */
.fx-quotes{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.fx-quotes iframe{display:block;width:100%;height:40px;border:0}

/* ----- Classement (comme la liste .p-bookmakers .bk) ----- */
.p-forex .list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.p-forex .bk{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.p-forex .bk:hover{border-color:var(--brand);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.p-forex .bk.r1{border:2px solid var(--gold)}
.p-forex .row{display:grid;grid-template-columns:54px 72px minmax(0,1.4fr) 110px 130px 160px;gap:14px;align-items:center;padding:16px}
.p-forex .rk{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:900 18px var(--f);background:var(--chip);color:var(--ink)}
.p-forex .r1 .rk{background:var(--gold);color:#2b1a00}
.p-forex .r2 .rk{background:var(--silver);color:#111}
.p-forex .r3 .rk{background:var(--bronze);color:#fff}
.p-forex .lgo{width:72px;height:72px;border-radius:12px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.p-forex .lgo img{max-width:62px;max-height:62px;object-fit:contain}
.p-forex .nm h3{margin:0;font-size:19px}
.p-forex .nm h3 a{color:var(--ink);text-decoration:none}
.p-forex .nm h3 a:hover{color:var(--brand)}
.p-forex .nm small{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.4}
.p-forex .bn{text-align:center}
.p-forex .bn b{display:block;font-size:24px;font-weight:900;line-height:1.1;color:var(--brand)}
.p-forex .bn.dep b{color:var(--ink);font-size:20px}
.p-forex .bn small{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.p-forex .go{display:flex;flex-direction:column;gap:6px}
.p-forex .go .btn{width:100%}

/* ----- Fiche broker : contenu + colonne laterale (comme .p-semaine .lay) ----- */
.p-forex .lay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.p-forex .side{display:flex;flex-direction:column;gap:12px;position:sticky;top:72px;padding-top:36px}
.p-forex .sc2{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px}
.p-forex .sc2 h3{margin:0;font-size:16px}
.p-forex .sc2 img{border-radius:10px}
.p-forex .sc2.inc{text-align:center}
.p-forex .sc2.inc h1,.p-forex .sc2.inc h2{font-size:16px;margin:8px 0 4px}
.p-forex .bx{padding:0;overflow:hidden;gap:0}
.p-forex .bxh{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--chip)}
.p-forex .bxh small{font-size:12px;color:var(--muted)}
.p-forex .tbl{list-style:none;margin:0;padding:6px 0}
.p-forex .tbl li{display:grid;grid-template-columns:24px 40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 14px}
.p-forex .tbl li+li{border-top:1px solid var(--line)}
.p-forex .tbl li.on{background:var(--chip)}
.p-forex .tbl .rk{width:24px;height:24px;font-size:12px;font-weight:800}
.p-forex .tbl .lo{width:40px;height:40px;border-radius:9px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.p-forex .tbl .lo img{max-width:34px;max-height:34px;object-fit:contain;border-radius:0}
.p-forex .tbl .nb{display:flex;flex-direction:column;min-width:0}
.p-forex .tbl .nb a{font-weight:700;color:var(--ink);text-decoration:none;font-size:14px}
.p-forex .tbl .nb a:hover{color:var(--brand)}
.p-forex .tbl .nb small{font-size:12px;color:var(--muted)}
.p-forex .tbl .bo{font-size:15px;font-weight:900;color:var(--brand);white-space:nowrap}
.p-forex .bx>.btn{margin:4px 14px 14px}

.fx-txt p{line-height:1.7;margin:0 0 12px}
.fx-txt a:not(.btn){font-weight:700}
.fx-center{text-align:center}
.fx-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.fx-box iframe{border:0;max-width:100%}

/* Fiche technique */
.fx-info{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0}
.fx-info div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.fx-info dt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 4px}
.fx-info dd{margin:0;font-weight:700;line-height:1.35}
.fx-info .hl{background:var(--chip);border-color:var(--brand)}
.fx-info .hl dd{color:var(--brand);font-size:18px}

/* Etapes d'inscription */
.fx-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fx-steps figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s,transform .15s}
.fx-steps figure:hover{border-color:var(--brand);transform:translateY(-2px)}
.fx-steps img{display:block;width:100%}
.fx-steps figcaption{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;font-size:13px;line-height:1.4}
.fx-steps figcaption b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-size:11px}

/* Paiements / groupes */
.fx-pay,.fx-soc{display:flex;flex-wrap:wrap;gap:12px;align-items:center;list-style:none;margin:0;padding:0}
.fx-pay img{display:block;height:46px;width:auto;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.fx-soc li{list-style:none}
.fx-soc img{display:block;max-height:96px;border-radius:12px}

/* Autres rubriques (comme .p-bookmakers .links) */
.p-forex .links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.p-forex .lk2{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.p-forex .lk2:hover{border-color:var(--brand);transform:translateY(-2px)}
.p-forex .lk2 img{width:56px;height:56px;object-fit:contain;border-radius:10px;background:var(--chip);flex:0 0 56px}
.p-forex .lk2 span{display:flex;flex-direction:column;min-width:0}
.p-forex .lk2 b{font-size:15px}
.p-forex .lk2 small{font-size:12px;color:var(--muted)}

/* Bandeau d'appel final (meme degrade que .promo) et avertissement */
.p-forex .promo{margin-top:28px;justify-content:space-between}
.p-forex .promo p{margin:0;font-size:17px;font-weight:700;flex:1;min-width:220px}
.p-forex .promo .btn{background:var(--hot);color:#2b1a00}
.p-forex .disc{font-size:13px;color:var(--muted);margin:14px 0 0}

@media (max-width:860px){
  .p-forex .hero .w,.p-forex .lay{grid-template-columns:1fr}
  .p-forex .side{position:static;padding-top:0}
  .p-forex .row{grid-template-columns:44px 60px minmax(0,1fr);gap:10px 12px}
  .p-forex .rk{width:38px;height:38px;font-size:16px}
  .p-forex .lgo{width:60px;height:60px}.p-forex .lgo img{max-width:50px;max-height:50px}
  .p-forex .row .bn{grid-column:span 1}
  .p-forex .row .bn.dep{grid-column:1/3}
  .p-forex .row .go{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.p-forex .bk,.fx-steps figure,.p-forex .lk2{transition:none}}