/* ===== REFM — Réseau Experts France Maghreb ===== */

:root{
  --navy-950:#0e1c33;
  --navy-800:#1b3a63;
  --navy-700:#234a7d;
  --navy-600:#2c5a95;
  --navy-100:#e7edf5;
  --paper:#f7f6f2;
  --stone-200:#e8e5dd;
  --line:#d9d5cb;
  --line-navy:#c7d2e3;
  --ink:#1c1c1a;
  --ink-soft:#55554f;
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:'Montserrat', Arial, sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Montserrat', Arial, sans-serif;
  font-weight:700;
  color:var(--navy-950);
  margin:0 0 0.5em;
  line-height:1.2;
  letter-spacing:-0.01em;
}
h1{font-size:2.6rem; font-weight:800;}
h2{font-size:1.9rem;}
h3{font-size:1.25rem;}
p{margin:0 0 1.1em; color:var(--ink-soft); max-width:62ch;}
a{color:var(--navy-700);}
img{max-width:100%; display:block;}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,246,242,0.98);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:92px;
}
.logo-link{display:flex; align-items:center;}
.logo-link img, .logo-link svg{height:72px; width:auto;}

.main-nav{display:flex; align-items:center; gap:2.2rem;}
.main-nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:0.97rem;
  font-weight:500;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{
  color:var(--navy-800);
  border-bottom-color:var(--navy-600);
}
.nav-cta{
  background:var(--navy-800);
  color:#fff !important;
  padding:9px 18px !important;
  border-radius:3px;
  border-bottom:none !important;
}
.nav-cta:hover{background:var(--navy-950); border-bottom:none !important;}

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  padding:8px; margin-right:-8px;
}
.nav-toggle span{
  display:block; width:24px; height:2px; background:var(--navy-950);
  margin:5px 0; transition:.2s;
}

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:3px;
  text-decoration:none;
  font-weight:600;
  font-size:0.96rem;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--navy-800); color:#fff;}
.btn-primary:hover{background:var(--navy-950);}
.btn-outline{background:transparent; color:var(--navy-800); border:1.5px solid var(--navy-700);}
.btn-outline:hover{background:var(--navy-100);}
.btn-white{background:#fff; color:var(--navy-800);}
.btn-white:hover{background:var(--navy-100);}

.text-link{
  color:var(--navy-800); font-weight:600; text-decoration:none;
  border-bottom:1.5px solid var(--navy-600); padding-bottom:1px;
}
.text-link:hover{color:var(--navy-950);}

/* ---------- Page header (pages intérieures) ---------- */
.page-header{
  padding:64px 0 44px;
  border-bottom:1px solid var(--line);
}
.page-header .eyebrow{
  color:var(--navy-700); font-weight:600; font-size:0.85rem; margin-bottom:0.6em;
}
.page-header p{font-size:1.08rem; max-width:60ch;}

/* ---------- Hero (accueil) ---------- */
.hero{padding:70px 0 30px;}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.hero h1{font-size:2.9rem; max-width:14ch;}
.hero .lede{font-size:1.12rem; max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:1.6rem; flex-wrap:wrap;}

/* ---------- Image placeholders ---------- */
.img-placeholder{
  position:relative;
  background:
    repeating-linear-gradient(135deg, var(--stone-200), var(--stone-200) 10px, #f0eee7 10px, #f0eee7 20px);
  border:1px solid var(--line);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  min-height:220px;
  overflow:hidden;
}
.img-placeholder .ph-inner{
  text-align:center; color:var(--ink-soft);
  background:rgba(247,246,242,0.88);
  padding:14px 20px; border-radius:3px;
  font-size:0.86rem; max-width:220px;
}
.img-placeholder svg{width:26px; height:26px; margin:0 auto 8px; display:block; color:var(--navy-700);}
.img-placeholder.tall{min-height:380px;}
.img-placeholder.wide{min-height:260px;}
.img-placeholder.short{min-height:160px;}

/* ---------- Sections ---------- */
section{padding:60px 0;}
.section-narrow{max-width:800px; margin:0 auto;}
.section-head{max-width:640px; margin-bottom:2.4rem;}
.section-alt{background:var(--navy-100);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);}

/* Cards "en bref" */
.brief-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.brief-card{background:#fff; padding:30px 32px;}
.brief-card h3{font-size:1.08rem; margin-bottom:0.5em;}
.brief-card p{font-size:0.94rem; margin-bottom:0;}

/* Pull quote */
.pull-statement{
  padding:78px 0;
  background:var(--navy-950);
  color:#fff;
  text-align:center;
}
.pull-statement blockquote{
  margin:0 auto; font-family:'Montserrat', sans-serif;
  font-size:2.1rem; line-height:1.35; font-weight:500;
  color:#fff; max-width:20ch;
}
.pull-statement .amp{color:#9fb4d4;}

/* CTA band */
.cta-band{
  background:var(--navy-800); color:#fff; border-radius:6px;
  padding:48px 52px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{color:#fff; margin-bottom:0.35em; font-size:1.7rem;}
.cta-band p{color:#d7dfec; margin-bottom:0;}

/* Timeline (histoire) */
.timeline{border-left:2px solid var(--line-navy); margin-left:6px;}
.timeline-item{position:relative; padding:0 0 44px 34px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:''; position:absolute; left:-7px; top:4px;
  width:12px; height:12px; border-radius:50%;
  background:var(--navy-800); border:3px solid var(--paper); outline:2px solid var(--navy-800);
}
.timeline-item .year{
  font-family:'Montserrat', sans-serif; font-weight:700; color:var(--navy-800); font-size:1.15rem;
}

/* Values block */
.values-list{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.values-list li{
  font-family:'Montserrat', sans-serif; font-size:1.2rem; color:var(--navy-950);
  padding-left:22px; position:relative;
}
.values-list li::before{
  content:''; position:absolute; left:0; top:0.55em; width:8px; height:8px; background:var(--navy-600); border-radius:50%;
}

/* Table cotisations */
.table-wrap{border:1px solid var(--line); border-radius:4px; overflow:hidden;}
table{width:100%; border-collapse:collapse; background:#fff;}
th,td{text-align:left; padding:16px 20px; font-size:0.96rem;}
thead th{
  background:var(--navy-950); color:#fff; font-weight:600; font-family:'Montserrat',sans-serif; font-size:0.85rem;
  letter-spacing:0.3px;
}
tbody tr:not(:last-child) td{border-bottom:1px solid var(--line);}
td.amount{font-family:'Montserrat', sans-serif; font-weight:700; color:var(--navy-800); font-size:1.05rem; text-align:right;}

/* Steps (adhésion) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.step{background:#fff; padding:28px 26px;}
.step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--navy-100); color:var(--navy-800);
  font-family:'Montserrat', sans-serif; font-weight:700; font-size:0.95rem; margin-bottom:14px;
}
.step h3{font-size:1rem;}
.step p{font-size:0.92rem; margin-bottom:0;}

/* Info box (paiement) */
.info-box{
  background:#fff; border:1px solid var(--line); border-radius:4px; padding:26px 30px;
}
.info-box dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 20px;}
.info-box dt{color:var(--ink-soft); font-size:0.88rem;}
.info-box dd{margin:0; font-weight:600; color:var(--navy-950);}
.iban{font-family:'IBM Plex Mono', monospace; letter-spacing:0.5px;}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:52px; align-items:start;}
.form-field{margin-bottom:20px;}
.form-field label{
  display:block; font-size:0.86rem; font-weight:600; color:var(--navy-950); margin-bottom:6px;
}
.form-field input, .form-field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:3px;
  font-family:inherit; font-size:0.96rem; background:#fff; color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus{
  outline:2px solid var(--navy-600); outline-offset:1px; border-color:var(--navy-600);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-note{font-size:0.82rem; color:var(--ink-soft); margin-top:10px;}
.form-status{font-size:0.9rem; margin-top:12px; display:none;}
.form-status.visible{display:block;}

.contact-card{background:#fff; border:1px solid var(--line); border-radius:4px; padding:30px 32px; margin-bottom:24px;}
.contact-card h3{font-size:1rem; margin-bottom:14px;}
.contact-card ul{list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:0.94rem;}
.contact-card ul li{display:flex; gap:10px; color:var(--ink-soft);}
.contact-card svg{width:18px; height:18px; flex-shrink:0; color:var(--navy-700); margin-top:2px;}
.map-embed{border:1px solid var(--line); border-radius:4px; overflow:hidden; height:220px;}
.map-embed iframe{width:100%; height:100%; border:0; filter:grayscale(0.15);}

/* ---------- Bureau ---------- */
.bureau-tier{margin-bottom:52px;}
.bureau-tier:last-child{margin-bottom:0;}
.tier-label{
  font-size:0.8rem; font-weight:600; color:var(--navy-700); letter-spacing:0.6px;
  text-transform:uppercase; margin-bottom:20px; text-align:center;
}
.member-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:36px;
}
.member-card{width:190px; text-align:center;}
.member-avatar{
  width:128px; height:128px; border-radius:50%; margin:0 auto 16px;
  overflow:hidden;
  background:repeating-linear-gradient(135deg, var(--stone-200), var(--stone-200) 8px, #f0eee7 8px, #f0eee7 16px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
}
.member-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.member-avatar svg{width:34px; height:34px;}
.bureau-tier.tier-primary .member-avatar{width:152px; height:152px;}
.member-name{font-family:'Montserrat', sans-serif; font-weight:700; font-size:1.05rem; color:var(--navy-950); margin-bottom:4px;}
.member-role{font-size:0.85rem; color:var(--navy-700); font-weight:600;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-950); color:#c7d2e3; margin-top:20px;}
.footer-top{padding:56px 0 40px; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;}
.footer-top img, .footer-top svg{height:46px; margin-bottom:14px;}
.footer-top p{color:#a9b7cf; font-size:0.9rem; max-width:34ch;}
.footer-col h4{color:#fff; font-family:'Montserrat',sans-serif; font-size:0.85rem; letter-spacing:0.4px; margin-bottom:14px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.footer-col a{color:#c7d2e3; text-decoration:none; font-size:0.92rem;}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding:20px 0; font-size:0.82rem; color:#8296b5;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .hero-grid, .grid-2, .contact-grid{grid-template-columns:1fr;}
  .hero-grid{gap:36px;}
  .brief-grid, .steps{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr; gap:28px;}
  h1{font-size:2.2rem;}
  .hero h1{font-size:2.1rem; max-width:none;}
  .pull-statement blockquote{font-size:1.55rem;}
  .cta-band{flex-direction:column; align-items:flex-start;}
  .form-row{grid-template-columns:1fr;}

  .main-nav{
    position:fixed; top:92px; left:0; right:0; bottom:0;
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:24px 28px; gap:0.4rem; transform:translateX(100%);
    transition:transform .22s ease; overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{width:100%; padding:14px 0; border-bottom:1px solid var(--line);}
  .main-nav a[aria-current="page"]{border-bottom:1px solid var(--line);}
  .nav-cta{margin-top:10px; text-align:center;}
  .nav-toggle{display:block;}
}