/* ════════════════════════════════════════════════════════════════════
   FIB — FEDERAL INVESTIGATION BUREAU (San Andreas) — feuille de styles
   Partagée par fib-histoire / fib-organigramme / fib-missions / fib-prevention
   Même DA navy/or que le reste du site (fictif — roleplay).
   ════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
 --usm-navy:#0a1628; --usm-mid:#0d1f3c; --usm-blue:#1b3a6a;
 --usm-gold:#c9a227; --usm-gold2:#e8b830; --usm-light:#f0f4fa;
 --usm-border:#c8d4e8; --usm-text:#1a1a2e; --usm-muted:#5a6a80; --usm-red:#8b0000;
 --fib-accent:#13315c;
}
html{scroll-behavior:smooth}
body{font-family:"Source Sans 3","Segoe UI",sans-serif;color:var(--usm-text);background:#fff;font-size:16px;line-height:1.6}
a{color:var(--usm-blue);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}

.fictif-bar{background:#8b0000;color:#fff;text-align:center;padding:8px 20px;font-size:0.78rem;font-weight:700;letter-spacing:0.05em;line-height:1.5;border-bottom:2px solid #5a0000}
.fictif-bar strong{display:inline-block;background:rgba(0,0,0,0.3);padding:1px 10px;border-radius:2px;margin-bottom:3px;font-size:0.9rem;letter-spacing:0.15em}
.sys-bar{background:#8b0000;color:#fff;text-align:center;padding:5px 20px;font-size:0.72rem;font-weight:700;letter-spacing:0.04em;border-bottom:2px solid #6a0000}
.gov-bar{background:var(--usm-mid);color:#8aaac8;font-size:0.72rem;text-align:center;padding:4px 20px;letter-spacing:0.04em}

header{background:var(--usm-navy);padding:0 40px;display:flex;align-items:stretch;min-height:80px;border-bottom:3px solid var(--usm-gold)}
.h-logo-wrap{display:flex;align-items:center;gap:16px;padding:14px 24px 14px 0;border-right:1px solid rgba(255,255,255,0.12)}
.h-seal{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(201,162,39,0.4))}
.h-title{flex:1;display:flex;flex-direction:column;justify-content:center;padding:12px 24px}
.h-dept{font-size:0.68rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--usm-gold);margin-bottom:3px}
.h-name{font-family:"Merriweather",Georgia,serif;font-size:1.4rem;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:0.06em;line-height:1}
.h-sub{font-size:0.7rem;color:#8aaac8;margin-top:4px;letter-spacing:0.06em;text-transform:uppercase}
.h-right{display:flex;align-items:center;gap:10px;margin-left:auto;padding:0 0 0 20px}
.h-right a{color:#8aaac8;font-size:0.75rem;padding:4px 10px;border:1px solid rgba(255,255,255,0.15);transition:all 0.15s}
.h-right a:hover{color:#fff;border-color:rgba(255,255,255,0.4);text-decoration:none}

nav{background:#323232;border-top:3px solid #fdb81e;display:flex;align-items:stretch;padding:0 40px;position:sticky;top:0;z-index:200;overflow:visible}
.nav-item{color:#fff;font-size:0.85rem;font-weight:600;padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:5px;border-bottom:3px solid transparent;transition:background 0.15s,border-color 0.15s;white-space:nowrap;user-select:none;background:none;border:none;font-family:inherit;text-decoration:none}
.nav-item:hover,.nav-item.active{background:rgba(255,255,255,0.08);border-bottom-color:#fdb81e}
.nav-item .chevron{font-size:0.6rem;opacity:0.7}
a.nav-item{color:#fff;text-decoration:none}a.nav-item:hover{color:#fff;text-decoration:none}
.nav-dropdown{position:relative;cursor:pointer}.nav-dropdown.open>.dropdown-menu{display:block}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 3px);left:0;background:#fff;border-top:3px solid #fdb81e;min-width:240px;box-shadow:0 6px 24px rgba(0,0,0,0.18);z-index:99999;border-radius:0 0 4px 4px}
.dropdown-menu a{display:block;padding:11px 18px;font-size:0.86rem;color:#1b2a4a;font-weight:600;border-bottom:1px solid #eee;text-decoration:none;white-space:nowrap}
.dropdown-menu a:last-child{border-bottom:none}.dropdown-menu a:hover{background:#f0f4fb;color:#205493}

.bc{background:var(--usm-light);border-bottom:1px solid var(--usm-border);padding:8px 40px;font-size:0.75rem;color:var(--usm-muted);display:flex;align-items:center;gap:0}
.bc a{color:var(--usm-blue);font-weight:600}.bc a:hover{text-decoration:underline}.bc-sep{margin:0 8px;color:#bbb}

.pg-hero{background:linear-gradient(135deg,var(--usm-navy) 0%,var(--usm-mid) 55%,var(--fib-accent) 100%);padding:44px 40px;display:flex;align-items:center;gap:32px;border-bottom:4px solid var(--usm-gold);position:relative;overflow:hidden}
.pg-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:280px;height:280px;border:60px solid rgba(201,162,39,0.05);border-radius:50%}
.pg-hero-badge{width:104px;height:104px;object-fit:contain;flex-shrink:0;border-radius:50%;background:#0a1628;box-shadow:0 0 0 3px rgba(201,162,39,.4),0 8px 24px rgba(0,0,0,.4)}
.pg-hero-text{position:relative;z-index:1}
.pg-hero-label{font-size:0.66rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--usm-gold);margin-bottom:6px}
.pg-hero-title{font-family:"Merriweather",Georgia,serif;font-size:2rem;font-weight:900;color:#fff;line-height:1.15;margin-bottom:8px}
.pg-hero-desc{font-size:0.9rem;color:#adc2dc;line-height:1.65;max-width:680px}

.wrap{max-width:1080px;margin:0 auto;padding:48px 40px 80px}
.section-label{font-size:0.66rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--usm-gold);margin-bottom:7px}
.section-title{font-family:"Merriweather",Georgia,serif;color:var(--usm-navy);font-size:1.65rem;font-weight:900;margin-bottom:10px;line-height:1.25}
.gold-bar{width:44px;height:3px;background:var(--usm-gold);margin-bottom:22px}
.body-text{font-size:0.9rem;color:#3a4a5a;line-height:1.8;margin-bottom:14px}
.body-text strong{color:var(--usm-navy);font-weight:700}
.block-head{margin-bottom:18px}
.divider{border:none;border-top:1px solid var(--usm-border);margin:38px 0}

/* ── boîtes ── */
.info-box{background:var(--usm-light);border:1px solid var(--usm-border);border-left:4px solid var(--usm-gold);padding:16px 20px;margin:18px 0;font-size:0.86rem;color:#3a4a5a;line-height:1.75}
.info-box strong{color:var(--usm-navy)}
.warn-box{background:#fef9e7;border:1px solid #e8c84a;border-left:4px solid #c9a227;padding:16px 20px;margin:18px 0;font-size:0.86rem;color:#5a4a00;line-height:1.75}
.danger-box{background:#fef2f2;border:1px solid #fca5a5;border-left:4px solid #dc2626;padding:16px 20px;margin:18px 0;font-size:0.86rem;color:#7f1d1d;line-height:1.75}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
.stat{background:#fff;border:1px solid var(--usm-border);border-top:3px solid var(--usm-gold);padding:16px 14px;text-align:center}
.stat-n{font-family:"Oswald","Impact",sans-serif;font-size:2.1rem;font-weight:700;color:var(--usm-navy)}
.stat-l{font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--usm-muted);margin-top:3px}

.mission-statement{background:var(--usm-navy);border-left:6px solid var(--usm-gold);padding:24px 28px;margin:30px 0}
.mission-statement .ms-label{font-size:0.66rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--usm-gold);margin-bottom:8px}
.mission-statement p{font-family:"Merriweather",Georgia,serif;font-size:1rem;color:#c8daee;line-height:1.8;font-style:italic}

.key-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--usm-border);margin:24px 0}
.kf-label{background:var(--usm-light);padding:10px 16px;font-size:0.8rem;font-weight:700;color:var(--usm-navy);border-bottom:1px solid var(--usm-border);border-right:1px solid var(--usm-border)}
.kf-value{padding:10px 16px;font-size:0.82rem;color:#3a4a5a;border-bottom:1px solid var(--usm-border)}

/* ════ MISE EN PAGE IMAGES — variées ════ */
.feature-row{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;margin:6px 0 8px}
.feature-figure{margin:0}
.feature-img{width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--usm-light);border:1px solid var(--usm-border);box-shadow:18px 18px 0 -2px rgba(201,162,39,.18),0 16px 40px rgba(10,22,40,.28)}
.feature-cap{font-size:0.72rem;color:var(--usm-muted);margin-top:10px;font-style:italic}

.fib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.fib-card{background:#fff;border:1px solid var(--usm-border);border-top:3px solid var(--usm-gold);overflow:hidden;display:flex;flex-direction:column}
.fib-card-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--usm-light);border-bottom:1px solid var(--usm-border)}
.fib-card-body{padding:15px 16px;flex:1}
.fib-card-body h4{font-family:"Merriweather",serif;font-size:0.95rem;color:var(--usm-navy);font-weight:700;margin-bottom:6px}
.fib-card-body p{font-size:0.82rem;color:var(--usm-muted);line-height:1.65}

.gallery-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.gallery-strip figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--usm-border)}
.gallery-strip img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--usm-light)}
.gallery-strip figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(10,22,40,.85),transparent);color:#fff;font-size:0.72rem;font-weight:600;padding:18px 12px 8px}

/* Rangées alternées image / texte (page Missions) */
.alt-row{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin:30px 0}
.alt-row.rev .alt-figure{order:2}
.alt-figure{margin:0}
.alt-img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--usm-light);border:1px solid var(--usm-border);border-top:3px solid var(--usm-gold)}
.alt-row h3{font-family:"Merriweather",serif;color:var(--usm-navy);font-size:1.2rem;font-weight:900;margin-bottom:8px}
.alt-row .tag{display:inline-block;font-size:0.64rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--usm-gold);margin-bottom:6px}

/* Timeline illustrée (page Histoire) */
.timeline{position:relative;padding-left:46px;margin-top:24px}
.timeline::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--usm-gold),var(--usm-blue))}
.tl-item{position:relative;margin-bottom:34px}
.tl-dot{position:absolute;left:-38px;top:5px;width:20px;height:20px;border-radius:50%;background:var(--usm-gold);border:3px solid var(--usm-navy);box-shadow:0 0 0 3px rgba(201,162,39,0.2)}
.tl-year{font-family:"Oswald",sans-serif;font-size:1.05rem;font-weight:700;color:var(--usm-gold);letter-spacing:0.04em}
.tl-title{font-family:"Merriweather",serif;font-size:0.98rem;font-weight:700;color:var(--usm-navy);margin:2px 0 8px}
.tl-body{font-size:0.85rem;color:#3a4a5a;line-height:1.8}
.tl-figure{margin:12px 0 0;max-width:420px}
.tl-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--usm-light);border:1px solid var(--usm-border)}

/* Organigramme + portraits (page Organigramme) */
.org{text-align:center;margin-top:28px}
.org-level{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.org-line{display:flex;justify-content:center}.org-line::before{content:"";display:block;width:2px;height:26px;background:var(--usm-gold)}
.org-box{border:1px solid var(--usm-border);border-top:3px solid var(--usm-gold);padding:11px 14px;text-align:center;min-width:160px;max-width:200px;background:#fff}
.org-box.top-box{background:var(--usm-navy);border-top-color:var(--usm-gold);min-width:250px}
.org-box.top-box .ob-t{color:#fff}.org-box.top-box .ob-s{color:#8aaac8}
.org-box.mid-box{background:#f0f4fb;border-top-color:var(--fib-accent);min-width:200px}
.ob-t{font-family:"Merriweather",serif;font-size:0.82rem;font-weight:700;color:var(--usm-navy);line-height:1.3}
.ob-s{font-size:0.66rem;color:var(--usm-muted);margin-top:3px;text-transform:uppercase;letter-spacing:0.05em}
.lead-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.lead-card{background:#fff;border:1px solid var(--usm-border);border-top:3px solid var(--usm-gold);text-align:center;overflow:hidden}
.lead-photo{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--usm-light);border-bottom:1px solid var(--usm-border)}
.lead-card .lc-body{padding:12px 10px}
.lead-card .lc-name{font-family:"Merriweather",serif;font-size:0.84rem;font-weight:700;color:var(--usm-navy)}
.lead-card .lc-role{font-size:0.68rem;color:var(--usm-muted);text-transform:uppercase;letter-spacing:0.05em;margin-top:3px}

/* Bannière + protocole + mosaïque (page Prévention) */
.banner-figure{margin:0 0 6px;position:relative;overflow:hidden;border:1px solid var(--usm-border);border-top:4px solid var(--usm-gold)}
.banner-img{width:100%;aspect-ratio:21/8;object-fit:cover;background:var(--usm-light)}
.banner-cap{position:absolute;left:0;bottom:0;background:linear-gradient(0deg,rgba(10,22,40,.9),transparent);color:#fff;padding:30px 22px 14px;font-family:"Merriweather",serif;font-weight:700;font-size:1.05rem}
.protocol-wrap{background:var(--usm-navy);padding:28px;margin-top:28px}
.protocol-title{font-family:"Merriweather",serif;color:var(--usm-gold);font-size:1rem;margin-bottom:20px;font-weight:700;border-bottom:1px solid rgba(201,162,39,0.3);padding-bottom:10px}
.protocol-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.p-step{background:rgba(255,255,255,0.05);border:1px solid rgba(201,162,39,0.2);padding:14px 12px;text-align:center}
.p-step-n{font-family:"Oswald",sans-serif;font-size:2rem;font-weight:700;color:var(--usm-gold);line-height:1}
.p-step-t{font-size:0.74rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#fff;margin:6px 0 5px}
.p-step-d{font-size:0.72rem;color:#8aaac8;line-height:1.55}
.urgence-strip{background:#dc2626;color:#fff;text-align:center;padding:14px 20px;margin-top:18px;font-size:0.86rem;font-weight:700;line-height:1.6}
.fib-mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:150px;gap:12px;margin-top:8px}
.fib-mosaic figure{margin:0;overflow:hidden;border:1px solid var(--usm-border)}
.fib-mosaic img{width:100%;height:100%;object-fit:cover;background:var(--usm-light)}
.fib-mosaic .big{grid-row:span 2}

footer{background:#111;border-top:3px solid var(--usm-gold);padding:28px 40px}
.ft-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap}
.ft-brand{display:flex;align-items:center;gap:14px}
.ft-seal{width:44px;height:44px;border-radius:50%;object-fit:contain;opacity:0.85}
.ft-dept{color:#6a7a8a;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em}
.ft-name{font-family:"Merriweather",serif;color:#fff;font-size:0.9rem;font-weight:700;text-transform:uppercase}
.ft-links{display:flex;flex-wrap:wrap;gap:6px 16px}.ft-links a{color:#6a7a8a;font-size:0.72rem;transition:color 0.15s}.ft-links a:hover{color:#fff;text-decoration:none}
.fbot{background:#0a0a0a;padding:7px 40px;text-align:center;font-size:0.66rem;color:#444;letter-spacing:0.04em}
.btop{position:fixed;bottom:20px;right:20px;z-index:999;background:var(--usm-mid);color:#fff;border:1px solid var(--usm-gold);width:42px;height:42px;cursor:pointer;font-size:0.6rem;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}

@media(max-width:860px){
 header{padding:0 16px}nav{padding:0 8px;overflow-x:auto}.wrap{padding:28px 18px 60px}
 .feature-row,.fib-grid,.gallery-strip,.stat-row,.key-facts,.alt-row,.lead-grid,.protocol-steps,.fib-mosaic{grid-template-columns:1fr}
 .alt-row.rev .alt-figure{order:0}.fib-mosaic .big{grid-row:auto}.fib-mosaic{grid-auto-rows:180px}
 .pg-hero{padding:28px 20px;flex-direction:column;text-align:center}.bc{padding:8px 18px}
}