:root {
  --default-font:  "Barlow", sans-serif;
  --heading-font:  "Raleway", sans-serif;
  --nav-font:      "Raleway", sans-serif;
  --background-color: #ffffff;
  --default-color:    #000000;
  --heading-color:    #c59f24;
  --accent-color:     #0063c6;
  --surface-color:    #ffffff;
  --contrast-color:   #ffffff;
  --nav-color:        #444444;
  --nav-hover-color:  #0063c6;
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  color: var(--default-color);
  background-color: #f7f8fa;
  font-family: var(--default-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  margin: 0;
  padding-top: 80px;
}

h1,h2,h3,h4,h5,h6 { color:var(--heading-color); font-family:var(--heading-font); font-weight:700; margin:0 0 15px 0; line-height:1.2; }
a { color:var(--accent-color); text-decoration:none; transition:.3s; }
a:hover { color:color-mix(in srgb, var(--accent-color), transparent 25%); }
p { color:color-mix(in srgb, var(--default-color), transparent 15%); margin:0 0 12px; }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }


/* HERO */
.article-hero {  position:relative; margin-top: -130px; min-height:100vh; width:100%; background:#ffffff; overflow:hidden; display:flex; align-items:center; }
.hero-bg-img {
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:brightness(.38) saturate(1.2);
  transform:scale(1.04);
  animation:heroBgZoom 18s ease-in-out infinite alternate;
}
@keyframes heroBgZoom {
  from{transform:scale(1.04);}
  to{transform:scale(1.12);}
}

/* Dégradé principal bleu foncé → bleu → transparent */


/* Lueur or depuis le bas-droite */
.hero-img-tint {
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(ellipse 55% 60% at 15% 55%,
      rgba(0,99,198,.30) 0%,
      transparent 65%
    ),
    radial-gradient(ellipse 50% 55% at 85% 80%,
      rgba(197,159,36,.25) 0%,
      transparent 60%
    );
  pointer-events:none;
}

/* Glow or animé en haut à droite */
.hero-img-glow {
  position:absolute; top:-100px; right:-100px; z-index:2;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,
    rgba(197,159,36,.22) 0%,
    rgba(197,159,36,.08) 40%,
    transparent 70%
  );
  pointer-events:none;
  animation:glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100%{opacity:.7; transform:scale(1);}
  50%    {opacity:1;   transform:scale(1.18);}
}

/* Vignette sur les bords */
.hero-vignette {
  position:absolute; inset:0; z-index:3;
  background:radial-gradient(ellipse 80% 80% at 30% 50%,
    transparent 0%,
    rgba(0,10,30,.40) 55%,
    rgba(0,5,20,.85) 100%
  );
  pointer-events:none;
}

@keyframes glowPulse { 0%,100%{opacity:.6;transform:scale(1);} 50%{opacity:1;transform:scale(1.15);} }
.hero-vignette { position:absolute; inset:0; z-index:3; background:radial-gradient(ellipse 75% 85% at 28% 50%,rgba(2,12,24,0) 0%,rgba(2,12,24,.45) 55%,rgba(2,12,24,.88) 100%); pointer-events:none; }
.hero-fade-bottom { position:absolute; bottom:0; left:0; right:0; z-index:4; height:120px; background:linear-gradient(to bottom,transparent,); pointer-events:none; }
.article-hero .container { position:relative; z-index:5; padding-top:80px; padding-bottom:100px; }
.hero-text-col { max-width:auto !important; }
.article-hero h1 { font-size:clamp(2.6rem,5vw,4.4rem); color:#fff; margin-bottom:0; line-height:1.05; opacity:0; animation:fadeUp .8s ease forwards .5s; letter-spacing:-1px; }
.article-hero h1 .word-haiti { display:block; background:linear-gradient(100deg,#c59f24 0%,#f0d060 40%,#c59f24 80%); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:goldShimmer 3.5s linear infinite 1.2s; }
@keyframes goldShimmer { 0%{background-position:0%;} 100%{background-position:200%;} }
.hero-desc { color:rgba(255,255,255,.58); font-size:.98rem; line-height:1.85; max-width:480px; margin:24px 0 38px; opacity:0; animation:fadeUp .8s ease forwards .7s; }
.hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; opacity:0; animation:fadeUp .8s ease forwards .9s; }
.hero-cta-ghost { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.72); padding:14px 24px; border-radius:6px; font-family:var(--nav-font); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; transition:all .25s; }
.hero-cta-ghost:hover { border-color:rgba(255,255,255,.45); color:#fff; }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

.wa-hero-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: #25D366; color: #fff;
  margin-top: 15px;
  padding: 14px 28px; border-radius: 50px;
  font-family: var(--nav-font); font-size: 14px; font-weight: 700;
  text-decoration: none; text-transform: uppercase; letter-spacing: 1px;
  transition: all 0.25s; position: relative; overflow: hidden;
}
.wa-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,211,102,0.4);
  color: #fff;
}

/* MAIN */
.main-wrap { padding:48px 0 80px; }
.content-grid { display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start; }
.sec-label { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--accent-color); margin-bottom:10px; }
.sec-label::before { content:""; width:22px; height:2px; background:var(--accent-color); }
.sec-rule { width:50px; height:3px; background:var(--accent-color); border-radius:2px; margin-bottom:28px; }

/* FEATURED */
.featured-article { background:var(--surface-color); border-radius:18px; border:1px solid color-mix(in srgb,var(--default-color),transparent 90%); overflow:hidden; margin-bottom:28px; display:grid; grid-template-columns:1fr 1fr; transition:all .3s ease; }
.featured-article:hover { transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.09); }
.featured-article .fa-img { position:relative; min-height:150px;  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.featured-article .fa-img::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(0,99,198,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,99,198,.08) 1px,transparent 1px); background-size:32px 32px; }
.fa-img-icon { position:relative; z-index:1; font-size:4rem; }
.fa-img .featured-badge { position:absolute; top:16px; left:16px; z-index:2; background:var(--heading-color); color:#fff; font-family:var(--nav-font); font-size:10px; font-weight:700; padding:4px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:1px; }
.featured-article .fa-body { padding:32px 28px; display:flex; flex-direction:column; justify-content:center; }
.art-category { display:inline-flex; align-items:center; gap:5px; font-family:var(--nav-font); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent-color); margin-bottom:12px; }
.art-category i { font-size:12px; }
.fa-body h2 { font-size:1.45rem; margin-bottom:12px; color:var(--heading-color); }
.fa-body p { font-size:15px; line-height:1.7; margin-bottom:18px; }
.art-meta { display:flex; align-items:center; gap:14px; font-size:12px; color:color-mix(in srgb,var(--default-color),transparent 45%); margin-bottom:20px; flex-wrap:wrap; }
.art-meta span { display:flex; align-items:center; gap:5px; }
.art-meta i { font-size:13px; color:var(--accent-color); }
.read-btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent-color); color:#fff; padding:10px 22px; border-radius:10px; font-family:var(--nav-font); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; transition:all .2s; width:fit-content; }
.read-btn:hover { background:#004fa3; color:#fff; transform:translateX(3px); }

/* ARTICLES GRID */
.articles-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:32px; }
.art-card { background:var(--surface-color); border-radius:16px; border:1px solid color-mix(in srgb,var(--default-color),transparent 90%); overflow:hidden; transition:all .3s ease; position:relative; }
.art-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-color); }
.art-card.gold::before { background:var(--heading-color); }
.art-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,.09); }
.art-card .ac-img { height:140px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent-color),transparent 88%),color-mix(in srgb,var(--heading-color),transparent 92%)); display:flex; align-items:center; justify-content:center; font-size:2.5rem; position:relative; overflow:hidden; }
.art-card .ac-img::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(0,99,198,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,99,198,.06) 1px,transparent 1px); background-size:24px 24px; }
.art-card .ac-body { padding:20px 18px; }
.ac-body .art-category { margin-bottom:8px; }
.ac-body h3 { font-size:1rem; margin-bottom:8px; line-height:1.4; color:var(--heading-color); }
.ac-body p { font-size:.83rem; line-height:1.6; margin-bottom:14px; }
.ac-body .art-meta { margin-bottom:14px; }
.read-link { font-family:var(--nav-font); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--accent-color); border-bottom:1px solid color-mix(in srgb,var(--accent-color),transparent 65%); padding-bottom:2px; transition:all .2s; display:inline-flex; align-items:center; gap:5px; }
.read-link:hover { gap:8px; border-bottom-color:var(--accent-color); }

/* PAGINATION */
.pagination-wrap { display:flex; align-items:center; justify-content:space-between; margin-top:32px; flex-wrap:wrap; gap:14px; }
.pagination-info { font-size:13px; color:color-mix(in srgb,var(--default-color),transparent 45%); font-family:var(--nav-font); }
.pagination-info strong { color:var(--accent-color); }
.pagination-controls { display:flex; align-items:center; gap:6px; }
.pg-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb,var(--default-color),transparent 84%); border-radius:8px; background:var(--surface-color); font-family:var(--nav-font); font-size:13px; font-weight:600; color:color-mix(in srgb,var(--default-color),transparent 30%); cursor:pointer; transition:all .2s; }
.pg-btn:hover:not(:disabled) { border-color:var(--accent-color); color:var(--accent-color); background:color-mix(in srgb,var(--accent-color),transparent 94%); }
.pg-btn.active { background:var(--accent-color); border-color:var(--accent-color); color:#fff; }
.pg-btn:disabled { opacity:.35; cursor:not-allowed; }
.pg-btn.pg-arrow { font-size:16px; }
.pg-ellipsis { width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:13px; color:color-mix(in srgb,var(--default-color),transparent 50%); }
@keyframes cardIn { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
.art-card.entering { animation:cardIn .35s ease forwards; }

/* SIDEBAR */
.sidebar { display:flex; flex-direction:column; gap:22px; }
.toc-box { border:0px solid color-mix(in srgb,var(--contrast-color),transparent 88%); border-radius:14px; padding:22px; }
.newsletter-card { background:linear-gradient(135deg,var(--accent-color) 0%,var(--accent-color) 100%); border-radius:16px; padding:26px 22px; color:#fff; position:relative; overflow:hidden; }
.newsletter-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%,rgba(197,159,36,.15) 0%,transparent 50%); }
.newsletter-card .inner { position:relative; }
.wa-btn { display:flex; align-items:center; justify-content:center; gap:10px; background:#25D366; color:#fff; padding:12px 20px; border-radius:8px; font-family:var(--nav-font); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; transition:all .25s; margin-top:4px; }
.wa-btn:hover { background:#1ebe5d; color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.35); }

/* RESPONSIVE */
@media (max-width:992px) { .content-grid{grid-template-columns:1fr;} .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:20px;} }
@media (max-width:768px) { .featured-article{grid-template-columns:1fr;} .featured-article .fa-img{min-height:180px;} .articles-grid{grid-template-columns:1fr;} .sidebar{grid-template-columns:1fr;} .article-hero{min-height:auto;} .article-hero .container{padding-top:60px;padding-bottom:80px;} }