/* ============================================================
   BCN — Banque Commerciale du Niger
   Feuille de style commune. Aucune ressource externe :
   le site fonctionne intégralement hors CDN.
   Palette extraite du logotype officiel.
   ============================================================ */

:root{
  --bleu:      #4C9CD3;   /* bleu BCN */
  --profond:   #2F6D93;   /* bleu profond */
  --clair:     #66BDE4;   /* bleu clair */
  --brume:     #F2F7FB;   /* fond bleuté */
  --encre:     #1F2933;   /* texte */
  --ligne:     #C9DEED;   /* filets */
  --blanc:     #FFFFFF;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:"Segoe UI", Tahoma, "Noto Sans", "DejaVu Sans", Arial, sans-serif;
  color:var(--encre);
  background:var(--blanc);
  line-height:1.65;
  font-size:17px;
}

/* ---------- signature : cadre octogonal à double filet ---------- */
/* Écho direct de l'emblème : angles coupés, double trait.          */
.octo{
  --cut:18px;
  position:relative;
  background:var(--blanc);
  border:2px solid var(--bleu);
  clip-path:polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0 calc(100% - var(--cut)), 0 var(--cut));
}
.octo::after{
  content:"";
  position:absolute; inset:7px;
  border:1px solid var(--bleu);
  clip-path:polygon(
    calc(var(--cut) - 6px) 0, calc(100% - var(--cut) + 6px) 0,
    100% calc(var(--cut) - 6px), 100% calc(100% - var(--cut) + 6px),
    calc(100% - var(--cut) + 6px) 100%, calc(var(--cut) - 6px) 100%,
    0 calc(100% - var(--cut) + 6px), 0 calc(var(--cut) - 6px));
  pointer-events:none;
}

/* ---------- structure ---------- */
.wrap{ max-width:1060px; margin:0 auto; padding:0 22px; }

header.site{
  border-bottom:1px solid var(--ligne);
  background:var(--blanc);
}
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:16px 0;
}
.masthead img{ height:64px; width:auto; display:block; }
nav.principal{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:640px){
  .masthead{ flex-direction:column; align-items:center; gap:10px; padding:14px 0; }
  .masthead img{ height:54px; }
  nav.principal{ justify-content:center; }
  nav.principal a{ padding:7px 11px; font-size:.9rem; }
}
nav.principal a{
  text-decoration:none; color:var(--profond);
  font-weight:600; font-size:.95rem;
  padding:9px 14px; border:1px solid transparent;
}
nav.principal a:hover{ border-color:var(--ligne); background:var(--brume); }
nav.principal a[aria-current="page"]{
  color:var(--blanc); background:var(--bleu);
}
nav.principal a:focus-visible,
a:focus-visible{ outline:3px solid var(--clair); outline-offset:2px; }

/* bandeau : dégradé du logotype */
.bandeau{
  background:linear-gradient(118deg, var(--clair) 0%, var(--bleu) 46%, var(--profond) 100%);
  color:var(--blanc);
}
.bandeau .wrap{ padding:64px 22px 58px; }
.bandeau h1{
  font-size:clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight:650; letter-spacing:.2px; line-height:1.25;
  max-width:21ch;
}
/* la version arabe fait partie de l'identité : elle accompagne, ne décore pas */
.bandeau .ar{
  direction:rtl; font-size:clamp(1.15rem, 2.4vw, 1.55rem);
  margin-top:10px; opacity:.94; font-weight:500;
}
.bandeau p.tenu{
  margin-top:22px; max-width:58ch; font-size:1.02rem; opacity:.96;
}

/* ---------- sections ---------- */
main{ padding:52px 0 70px; }
section + section{ margin-top:52px; }

h2{
  color:var(--profond); font-size:1.35rem; font-weight:700;
  padding-bottom:8px; margin-bottom:18px;
  border-bottom:2px solid var(--bleu);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
h2 .ar{ direction:rtl; font-size:1.05rem; font-weight:500; color:var(--bleu); }

p + p{ margin-top:12px; }

.grille{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.carte{ padding:26px 24px; }
.carte h3{ color:var(--profond); font-size:1.05rem; margin-bottom:8px; }
.carte p{ font-size:.97rem; }

.fiche{ background:var(--brume); padding:26px 26px; }
.fiche dl{ display:grid; grid-template-columns:max-content 1fr; gap:8px 22px; }
.fiche dt{ font-weight:700; color:var(--profond); white-space:nowrap; }
.fiche dd{ margin:0; }
@media (max-width:560px){
  .fiche dl{ grid-template-columns:1fr; gap:2px; }
  .fiche dd{ margin-bottom:10px; }
}

a{ color:var(--profond); }

/* ---------- pied de page ---------- */
footer.site{
  background:var(--profond); color:var(--blanc);
  margin-top:40px; font-size:.92rem;
}
footer.site .wrap{
  padding:30px 22px; display:flex; justify-content:space-between;
  gap:20px; flex-wrap:wrap; align-items:center;
}
footer.site img{ height:44px; width:auto; }
footer.site a{ color:var(--blanc); }
footer.site .mentions{ opacity:.85; max-width:64ch; }

/* ---------- page juridique ---------- */
.juridique h2{ font-size:1.12rem; margin-top:34px; border-bottom:1px solid var(--ligne); }
.juridique ul{ margin:10px 0 10px 22px; }
.juridique li{ margin-bottom:6px; }
.encart-version{
  padding:16px 20px; margin-bottom:30px;
  font-size:.95rem; background:var(--brume);
}

@media print{
  header.site, footer.site, nav.principal{ display:none; }
  body{ font-size:12pt; }
  .bandeau{ background:none; color:var(--encre); }
}