/* ===========================================================
   BANTOUINFO — token system
   =========================================================== */
:root{
  --ink:#14120F;
  --paper:#F7F3E9;
  --paper-raised:#FFFFFF;
  --slate:#3B4450;
  --hairline: rgba(20,18,15,0.14);

  --red:#C8202B;
  --gold:#F0A202;
  --green:#1B7A43;

  --c-politique: var(--red);
  --c-economie: var(--green);
  --c-culture: var(--gold);
  --c-societe:#33587A;
  --c-sport:#B4552E;
  --c-international:#12676B;

  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--gold); color:var(--ink); padding:.75rem 1rem;
  font-family:var(--mono); font-weight:600;
}
.skip-link:focus{ left:0.5rem; top:0.5rem; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.icon{ width:1em; height:1em; fill:currentColor; }
.icon .sun-cog-dot{ fill:var(--gold); }

/* ===========================================================
   Flash info ticker
   =========================================================== */
.ticker{
  background:var(--ink);
  color:var(--paper);
  display:flex;
  align-items:stretch;
  font-family:var(--mono);
  font-size:.8rem;
  overflow:hidden;
}
.ticker__live{
  flex:none;
  display:flex; align-items:center; gap:.4rem;
  background:var(--gold); color:var(--ink);
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.55rem .9rem;
}
.icon--live{ width:1.05em; height:1.05em; animation:spin 14s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.ticker__track{
  flex:1 1 auto; overflow:hidden; position:relative;
  display:flex; align-items:center;
}
.ticker__content{
  display:flex; gap:3rem; white-space:nowrap;
  padding-left:1.5rem;
  animation:marquee 32s linear infinite;
}
.ticker__content span::after{
  content:"◆"; color:var(--gold); margin-left:3rem; font-size:.6rem;
  position:relative; top:-2px;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker__time{
  flex:none; padding:.55rem 1rem; opacity:.75;
  border-left:1px solid rgba(247,243,233,.2);
  display:none;
}

@media (prefers-reduced-motion: reduce){
  .ticker__content{ animation:none; }
  .icon--live{ animation:none; }
}

/* ===========================================================
   Masthead
   =========================================================== */
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:1rem; padding:1.1rem 1.5rem;
  background:var(--paper-raised);
  border-bottom:1px solid var(--hairline);
  overflow-x:auto;
}
.masthead__logo{ flex:none; }
.masthead__logo img{ height:120px; width:auto; max-width:100%; display:block; }

/* ---------- GMCC ad banner (animated, "flash-banner" style loop) ---------- */
.ad-gmcc{
  --gmcc-navy:#1C1E22;
  --gmcc-slate:#54606B;
  --gmcc-gold:#C89B3C;
  --gmcc-gold-light:#E6C878;
  --gmcc-amber:#D9791F;

  display:none;
  position:relative;
  flex:none;
  width:800px; height:120px;
  max-width:100%;
  background:linear-gradient(180deg,#FFFFFF 0%, #FBF9F4 100%);
  border:1px solid rgba(28,30,34,.14);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 8px 24px -12px rgba(28,30,34,.35);
  flex-direction:row;
  align-items:stretch;
}

.ad-gmcc__pub{
  position:absolute; top:4px; right:8px; z-index:2;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gmcc-slate); opacity:.6;
}

.ad-gmcc__shine{
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--gmcc-gold) 0%, var(--gmcc-gold-light) 50%, var(--gmcc-gold) 100%);
  background-size:200% 100%;
  animation:gmccShine 3s linear infinite;
}
@keyframes gmccShine{
  to{ background-position:-200% 0; }
}

.ad-gmcc__brand{
  flex:0 0 21%;
  display:flex; align-items:center; justify-content:center;
  padding:10px;
  border-right:1px solid rgba(28,30,34,.1);
}
.ad-gmcc__logo{
  width:auto; max-width:100%; height:auto; max-height:60px;
  opacity:0; transform:scale(.7);
  animation:gmccLogoIn 8s ease infinite;
  animation-delay:.2s;
}
@keyframes gmccLogoIn{
  0%{ opacity:0; transform:scale(.7); }
  6%{ opacity:1; transform:scale(1.08); }
  9%,90%{ opacity:1; transform:scale(1); }
  97%,100%{ opacity:0; transform:scale(.92); }
}

.ad-gmcc__info{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:8px 18px;
}

.ad-gmcc__lead{
  margin:0 0 6px;
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:.85rem; letter-spacing:.01em;
  color:var(--gmcc-navy);
  opacity:0; transform:translateY(6px);
  animation:gmccFadeUp 8s ease infinite;
  animation-delay:.6s;
}
@keyframes gmccFadeUp{
  0%,6%{ opacity:0; transform:translateY(6px); }
  12%,90%{ opacity:1; transform:translateY(0); }
  97%,100%{ opacity:0; transform:translateY(6px); }
}

.ad-gmcc__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; column-gap:16px; row-gap:4px;
}
.ad-gmcc__list li{
  position:relative; padding-left:14px;
  font-family:var(--mono); font-weight:500; font-size:.68rem;
  line-height:1.3; color:var(--gmcc-slate); letter-spacing:.01em;
  white-space:nowrap;
  opacity:0; transform:translateX(-8px);
  animation:gmccReveal 8s ease infinite;
  animation-delay:calc(1s + var(--i) * .22s);
}
.ad-gmcc__list li b{ color:var(--gmcc-navy); font-weight:700; }
.ad-gmcc__list li::before{
  content:""; position:absolute; left:0; top:.4em;
  width:6px; height:6px; background:var(--gmcc-amber);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
@keyframes gmccReveal{
  0%,6%{ opacity:0; transform:translateX(-8px); }
  12%,90%{ opacity:1; transform:translateX(0); }
  97%,100%{ opacity:0; transform:translateX(-8px); }
}

.ad-gmcc__contact{
  flex:0 0 27%;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:8px 14px;
  background:rgba(200,155,60,.08);
  border-left:1px solid rgba(28,30,34,.1);
}
.ad-gmcc__tel{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-weight:600; font-size:.72rem;
  color:var(--gmcc-navy); text-decoration:none; white-space:nowrap;
  opacity:0; transform:translateX(10px);
  animation:gmccTelIn 8s ease infinite;
}
.ad-gmcc__tel:nth-child(1){ animation-delay:2.4s; }
.ad-gmcc__tel:nth-child(2){ animation-delay:2.7s; }
.ad-gmcc__tel:hover{ color:var(--gmcc-amber); }
.ad-gmcc__tel-icon{ width:12px; height:12px; flex:none; fill:var(--gmcc-amber); }
@keyframes gmccTelIn{
  0%,6%{ opacity:0; transform:translateX(10px); }
  12%,90%{ opacity:1; transform:translateX(0); }
  97%,100%{ opacity:0; transform:translateX(10px); }
}

.ad-gmcc__stripe{
  position:absolute; left:0; right:0; bottom:0; height:4px; width:0%;
  background:repeating-linear-gradient(-45deg, var(--gmcc-navy) 0 8px, var(--gmcc-amber) 8px 16px);
  animation:gmccStripe 8s ease infinite;
}
@keyframes gmccStripe{
  0%,6%{ width:0%; }
  45%,90%{ width:100%; }
  97%,100%{ width:0%; }
}

@media (min-width:640px){
  .ad-gmcc{ display:flex; }
}

@media (max-width:719px){
  .ad-gmcc__contact{ display:none; }
  .ad-gmcc__brand{ flex-basis:26%; }
}

@media (prefers-reduced-motion:reduce){
  .ad-gmcc__shine,.ad-gmcc__logo,.ad-gmcc__lead,.ad-gmcc__list li,.ad-gmcc__stripe,.ad-gmcc__tel{
    animation:none !important;
  }
  .ad-gmcc__logo,.ad-gmcc__lead,.ad-gmcc__list li,.ad-gmcc__tel{ opacity:1; transform:none; }
  .ad-gmcc__stripe{ width:100%; }
}

/* ===========================================================
   Navigation
   =========================================================== */
.nav{
  background:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem;
}
.nav__toggle{
  display:flex; align-items:center; gap:.6rem;
  background:none; border:0; padding:.9rem 0; cursor:pointer;
  color:var(--paper);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
}
.nav__toggle-bars{ display:flex; flex-direction:column; gap:4px; }
.nav__toggle-bars span{
  width:24px; height:2px; background:var(--paper); display:block; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav__toggle-label{ color:var(--paper); }
/* Croix animée quand le menu est ouvert */
body.nav-open .nav__toggle-bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav__toggle-bars span:nth-child(2){ opacity:0; }
body.nav-open .nav__toggle-bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav__drawer-top{ display:none; }
.nav__close{
  background:none; border:0; color:var(--paper); font-size:1.6rem; line-height:1;
  cursor:pointer; padding:.2rem .4rem;
}
.nav__backdrop{
  position:fixed; inset:0; z-index:40;
  background:rgba(0,0,0,.5); border:0;
}
.nav__list{
  list-style:none; margin:0; padding:0;
  display:none;
  flex-wrap:wrap;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; text-transform:uppercase;
}
.nav__list a{
  --accent: var(--gold);
  display:block; padding:1rem .9rem;
  color:var(--paper); opacity:.82;
  border-bottom:2px solid transparent;
  transition:opacity .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.nav__list a:hover,
.nav__list a:focus-visible{ opacity:1; border-color:var(--accent); }
.nav__list a.is-active{ opacity:1; border-color:var(--gold); font-weight:600; }

.nav__dropdown{ position:relative; }
.nav__dropdown summary{
  display:block; padding:1rem .9rem;
  color:var(--paper); opacity:.82;
  border-bottom:2px solid transparent;
  cursor:pointer; list-style:none; white-space:nowrap;
  transition:opacity .15s ease, border-color .15s ease;
}
.nav__dropdown summary::-webkit-details-marker{ display:none; }
.nav__dropdown summary::after{ content:"▾"; margin-left:.4em; font-size:.7em; }
.nav__dropdown[open] summary::after{ content:"▴"; }
.nav__dropdown summary:hover,
.nav__dropdown summary:focus-visible{ opacity:1; border-color:var(--gold); }
.nav__submenu{
  list-style:none; margin:0; padding:.4rem 0;
  position:absolute; top:100%; left:0; z-index:30; min-width:190px;
  background:var(--ink); border:1px solid rgba(247,243,233,.15);
  box-shadow:0 12px 24px -10px rgba(0,0,0,.5);
}
.nav__submenu a{
  display:block; padding:.65rem 1rem;
  color:var(--paper); opacity:.82; white-space:nowrap;
  border-bottom:0;
}
.nav__submenu a:hover,
.nav__submenu a:focus-visible{ opacity:1; background:rgba(255,255,255,.06); }

/* ===========================================================
   Markets ticker (African stock exchanges)
   =========================================================== */
.markets{
  background:var(--paper-raised);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
}
.markets__track{ overflow:hidden; }
.markets__content{
  display:flex; gap:0; white-space:nowrap;
  animation:marketsScroll 40s linear infinite;
  width:max-content;
}
@keyframes marketsScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .markets__content{ animation:none; }
}
.markets__item{
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem 1.1rem; border-right:1px solid var(--hairline);
}
.markets__logo{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--ink); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.55rem; font-weight:600; letter-spacing:.01em;
}
.markets__name{ display:flex; flex-direction:column; line-height:1.2; }
.markets__name b{
  font-family:var(--body); font-size:.78rem; font-weight:600; color:var(--ink);
}
.markets__name span{
  font-family:var(--mono); font-size:.62rem; color:var(--slate); text-transform:uppercase;
}
.markets__value{
  font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--ink);
  display:flex; flex-direction:column; align-items:flex-end; line-height:1.2;
}
.markets__chg{ font-size:.68rem; font-style:normal; }
.markets__chg--up{ color:var(--green); }
.markets__chg--down{ color:var(--red); }

/* ===========================================================
   Revues africaines
   =========================================================== */
.revues__region{ margin-bottom:2.5rem; }
.revues__region h2{
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  color:var(--ink); margin:0 0 1rem;
  padding-bottom:.5rem; border-bottom:2px solid var(--gold);
  display:inline-block;
}
.revues__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1.1rem;
}
.revues__card{
  display:flex; flex-direction:column; gap:.6rem;
  border-radius:6px;
  transition:transform .15s ease;
}
.revues__card:hover{ transform:translateY(-2px); }
.revues__card:hover .revues__media{ box-shadow:0 10px 22px -12px rgba(20,18,15,.4); }

.revues__media{
  position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden;
  background:linear-gradient(150deg,#14120F 0%, #3B4450 100%);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .15s ease;
}
.revues__media .icon{
  width:2.2rem; height:2.2rem; color:var(--paper); opacity:.18;
}
.revues__shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center; background:#14120F;
}
.revues__media-tag{
  position:absolute; left:.5rem; right:.5rem; bottom:.5rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.03em; text-transform:uppercase;
  color:rgba(247,243,233,.85); background:rgba(20,18,15,.4);
  padding:.25rem .4rem; border-radius:4px; text-align:center; line-height:1.25;
}

.revues__info{ display:flex; flex-direction:column; gap:.15rem; padding:0 .1rem; }
.revues__country{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--slate);
}
.revues__paper{
  font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--ink);
  line-height:1.2;
}

.nav__annonces{
  display:none;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); background:var(--gold);
  padding:.5rem 1rem; border-radius:100px; font-weight:600;
  white-space:nowrap;
}
.nav__annonces:hover{ background:#ffb62e; }

@media (min-width:860px){
  .nav__toggle{ display:none; }
  .nav__list{ display:flex; }
  .nav__annonces{ display:inline-block; }
  .masthead__ad{ display:flex; }
}

/* Mobile : menu hamburger + tiroir latéral gauche */
@media (max-width:859px){
  .nav{
    justify-content:space-between;
    padding:0 1rem;
  }
  .nav__toggle{ display:flex; }
  .nav__annonces{ display:inline-block; }

  /* Le tiroir : masqué hors écran à gauche, glisse à l'ouverture */
  .nav__list{
    position:fixed; top:0; left:0; z-index:50;
    display:flex; flex-direction:column; flex-wrap:nowrap;
    width:min(82vw, 320px); height:100dvh;
    margin:0; padding:0;
    background:var(--ink);
    box-shadow:6px 0 24px -6px rgba(0,0,0,.55);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(-100%);
    transition:transform .28s ease;
    visibility:hidden;
  }
  body.nav-open .nav__list{ transform:translateX(0); visibility:visible; }

  .nav__drawer-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.25rem; border-bottom:1px solid rgba(247,243,233,.15);
    font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--paper); position:sticky; top:0; background:var(--ink); z-index:1;
  }

  .nav__list > li{ border-bottom:1px solid rgba(247,243,233,.08); }
  .nav__list a,
  .nav__dropdown summary{
    padding:.95rem 1.25rem;
    border-bottom:0; white-space:normal;
    font-size:.82rem;
  }

  /* Sous-menus déroulants en flux (plus en absolu) dans le tiroir */
  .nav__dropdown summary::after{ float:right; }
  .nav__submenu{
    position:static; min-width:0; border:0; box-shadow:none;
    background:rgba(0,0,0,.25); padding:.2rem 0;
  }
  .nav__submenu a{ padding:.7rem 1.25rem .7rem 2rem; }

  /* Verrouille le défilement du fond quand le tiroir est ouvert */
  body.nav-open{ overflow:hidden; }
}
@media (min-width:860px){
  .nav__backdrop{ display:none; }
}

/* Texte de présentation en tête d'une rubrique */
.rubrique__intro{ max-width:72ch; margin:0 0 2.25rem; color:var(--slate); }

/* ===========================================================
   Sondages
   =========================================================== */
.poll{
  background:var(--paper-raised); border:1px solid var(--hairline);
  border-left:4px solid var(--red); border-radius:10px;
  padding:1.5rem; margin:0 0 1.5rem; max-width:760px;
}
.poll__question{
  font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.25; margin:0 0 .5rem;
}
.poll__desc{ color:var(--slate); margin:0 0 1rem; }
.poll__form{ display:flex; flex-direction:column; gap:.6rem; }
.poll__opt{
  display:flex; align-items:center; gap:.7rem;
  padding:.8rem 1rem; border:1px solid var(--hairline); border-radius:8px;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.poll__opt:hover{ border-color:var(--red); background:rgba(200,32,43,.04); }
.poll__opt input{ accent-color:var(--red); width:1.1rem; height:1.1rem; }
.poll__form .btn{ align-self:flex-start; margin-top:.4rem; }
.poll__results{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.poll__result-head{
  display:flex; justify-content:space-between; font-weight:600; font-size:.92rem; margin-bottom:.3rem;
}
.poll__bar{ height:12px; background:var(--hairline); border-radius:100px; overflow:hidden; }
.poll__bar span{ display:block; height:100%; background:var(--red); border-radius:100px; transition:width .5s ease; }
.poll__votes{ font-family:var(--mono); font-size:.7rem; color:var(--slate); margin-top:.25rem; }
.poll__total{ font-family:var(--mono); font-size:.72rem; color:var(--slate); margin:1rem 0 0; }
.poll__flash{
  background:rgba(27,122,67,.1); border:1px solid rgba(27,122,67,.3); color:var(--green);
  padding:.75rem 1rem; border-radius:8px; margin:0 0 1.5rem; font-weight:600; max-width:760px;
}

/* ===========================================================
   Bannières publicitaires (gérées en back-office)
   =========================================================== */
.banners{
  max-width:1200px; margin:0 auto; padding:1.5rem;
  display:flex; flex-direction:column; gap:1.25rem;
}
.banner{ margin:0; }
.banner__tag{
  display:block; text-align:right; margin:0 0 .3rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); opacity:.55;
}
.banner img{
  display:block; width:100%; max-width:970px; height:auto; margin:0 auto;
  border-radius:8px; border:1px solid var(--hairline);
}
.banner a{ display:block; }

/* ===========================================================
   Encarts éditoriaux de l'accueil (L'interview, Lucarne, Mon billet…)
   =========================================================== */
.highlights{
  max-width:1200px; margin:0 auto;
  padding:2.5rem 1.5rem;
  display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:2.5rem;
  align-items:stretch;
  border-bottom:1px solid var(--hairline);
}
.highlights__main{
  display:flex; flex-direction:column; gap:1.5rem; min-width:0;
}
.highlights__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem;
}
.highlights__pubs{
  margin-top:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
}
.pub-slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  min-height:130px; padding:1.25rem; text-align:center; text-decoration:none;
  border:2px dashed var(--hairline); border-radius:10px;
  background:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(20,18,15,.02) 10px, rgba(20,18,15,.02) 20px);
  color:var(--slate); transition:border-color .15s ease, color .15s ease;
}
.pub-slot:hover{ border-color:var(--gold); color:var(--ink); }
.pub-slot__tag{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6;
}
.pub-slot__text{
  font-family:var(--display); font-weight:700; font-size:1.1rem; color:inherit;
}
.pub-slot__cta{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; text-transform:uppercase; color:var(--gold);
}
/* Emplacement rempli par une vraie bannière (via le gestionnaire) */
.pub-slot--filled{
  min-height:0; padding:0; display:block;
  border:1px solid var(--hairline); border-radius:10px; overflow:hidden; background:none;
}
.pub-slot--filled .pub-slot__tag{
  display:block; text-align:right; padding:.25rem .5rem 0;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); opacity:.55;
}
.pub-slot--filled img{ display:block; width:100%; height:auto; }
.highlight{
  display:flex; flex-direction:column; gap:.75rem;
  background:var(--paper-raised);
  border:1px solid var(--hairline); border-top:3px solid var(--accent, var(--gold));
  border-radius:10px; padding:1.25rem;
}
.highlight__label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color:var(--accent, var(--gold));
}
.highlight__headline{
  font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,2vw,1.4rem);
  line-height:1.25; margin:0;
}
.highlight__headline a{ color:inherit; text-decoration:none; }
.highlight__headline a:hover{ text-decoration:underline; }
.highlight__media{
  position:relative; aspect-ratio:16/9; background:#000;
  border-radius:8px; overflow:hidden;
}
.highlight__media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.highlight__media--image{ aspect-ratio:auto; background:none; }
.highlight__media--image img{ display:block; width:100%; height:auto; border-radius:8px; }
.highlight__body{ color:var(--slate); font-size:.95rem; line-height:1.6; }
.highlight__body :where(p){ margin:0 0 .6rem; }
.highlight__more{
  margin-top:auto; align-self:flex-start;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.03em;
  font-weight:600; color:var(--accent, var(--gold)); text-decoration:none;
}
.highlight__more:hover{ text-decoration:underline; }

@media (max-width:899px){
  .highlights{ grid-template-columns:1fr; gap:1.75rem; padding:2rem 1rem; }
  .highlights .ad-evolutis{ width:100%; max-width:360px; margin:0 auto; }
}

/* ===========================================================
   Mot du Directeur Général
   =========================================================== */
.mot-dg{
  max-width:1200px; margin:0 auto;
  padding:3rem 1.5rem;
  display:flex; gap:2.5rem; align-items:stretch; flex-wrap:wrap;
  border-bottom:1px solid var(--hairline);
}

.mot-dg__main{
  flex:1 1 560px; min-width:0;
  display:flex; gap:2.5rem; flex-wrap:wrap; align-items:flex-start;
}

.mot-dg__divider{
  flex:none; width:1px; align-self:stretch;
  background:var(--hairline); min-height:2rem;
}

@media (max-width:899px){
  .mot-dg{ flex-direction:column; }
  .mot-dg__divider{ width:auto; height:1px; align-self:stretch; min-height:0; }
  .ad-evolutis{ flex-basis:auto; width:100%; }
}

/* ---------- Evolutis Gabon ad banner (animated, "flash-banner" style loop) ---------- */
.ad-evolutis{
  --evo-green:#39B54A;
  --evo-blue:#2B2E9E;

  position:relative; flex:0 0 260px;
  display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(180deg,#FFFFFF 0%, #FBF9F4 100%);
  border:1px solid rgba(28,30,34,.14);
  border-radius:6px; overflow:hidden;
  box-shadow:0 8px 24px -12px rgba(20,18,15,.35);
  padding:0 1.1rem 1.1rem;
}

.ad-evolutis__pub{
  position:absolute; top:6px; right:9px; z-index:2;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--slate); opacity:.6;
}

.ad-evolutis__shine{
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--evo-green) 0%, var(--evo-blue) 50%, var(--evo-green) 100%);
  background-size:200% 100%;
  animation:evoShine 3s linear infinite;
}
@keyframes evoShine{ to{ background-position:-200% 0; } }

.ad-evolutis__logo{
  width:100%; max-width:190px; height:auto; margin:1.3rem 0 .75rem;
  opacity:0; transform:scale(.7);
  animation:evoLogoIn 9s ease infinite; animation-delay:.2s;
}
@keyframes evoLogoIn{
  0%{ opacity:0; transform:scale(.7); }
  6%{ opacity:1; transform:scale(1.06); }
  9%,90%{ opacity:1; transform:scale(1); }
  97%,100%{ opacity:0; transform:scale(.92); }
}

.ad-evolutis__tagline{
  margin:0 0 1rem; text-align:center;
  font-family:var(--display); font-weight:700; font-style:italic; font-size:.98rem;
  color:var(--evo-blue);
  opacity:0; transform:translateY(6px);
  animation:evoFadeUp 9s ease infinite; animation-delay:1s;
}
@keyframes evoFadeUp{
  0%,9%{ opacity:0; transform:translateY(6px); }
  15%,90%{ opacity:1; transform:translateY(0); }
  97%,100%{ opacity:0; transform:translateY(6px); }
}

.ad-evolutis__services{
  list-style:none; margin:0 0 1.1rem; padding:0; width:100%;
  display:flex; flex-direction:column; gap:.4rem;
}
.ad-evolutis__services li{
  position:relative; padding-left:16px;
  font-family:var(--mono); font-size:.72rem; color:var(--slate);
  opacity:0; transform:translateX(-8px);
  animation:evoReveal 9s ease infinite;
  animation-delay:calc(1.6s + var(--i) * .25s);
}
.ad-evolutis__services li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:6px; height:6px; background:var(--evo-green);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
@keyframes evoReveal{
  0%,6%{ opacity:0; transform:translateX(-8px); }
  12%,90%{ opacity:1; transform:translateX(0); }
  97%,100%{ opacity:0; transform:translateX(-8px); }
}

.ad-evolutis__contact{
  width:100%; padding-top:1rem; border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:.7rem;
  opacity:0; transform:translateY(8px);
  animation:evoFadeUp 9s ease infinite; animation-delay:3.2s;
}
.ad-evolutis__contact p{ margin:0; font-size:.78rem; line-height:1.4; color:var(--ink); }
.ad-evolutis__contact a{ color:var(--evo-blue); font-weight:600; }
.ad-evolutis__contact a:hover{ color:var(--evo-green); }
.ad-evolutis__label{
  display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--slate); margin-bottom:.15rem;
}

.ad-evolutis__stripe{
  position:absolute; left:0; right:0; bottom:0; height:4px; width:0%;
  background:repeating-linear-gradient(-45deg, var(--evo-blue) 0 8px, var(--evo-green) 8px 16px);
  animation:evoStripe 9s ease infinite;
}
@keyframes evoStripe{
  0%,6%{ width:0%; }
  45%,90%{ width:100%; }
  97%,100%{ width:0%; }
}

@media (prefers-reduced-motion:reduce){
  .ad-evolutis__shine,.ad-evolutis__logo,.ad-evolutis__tagline,.ad-evolutis__services li,.ad-evolutis__contact,.ad-evolutis__stripe{
    animation:none !important;
  }
  .ad-evolutis__logo,.ad-evolutis__tagline,.ad-evolutis__services li,.ad-evolutis__contact{ opacity:1; transform:none; }
  .ad-evolutis__stripe{ width:100%; }
}

.mot-dg__frame{
  flex:0 0 auto; width:200px;
  border:3px solid var(--gold);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 24px -14px rgba(20,18,15,.4);
  margin:0 auto;
}
.mot-dg__frame img{ display:block; width:100%; aspect-ratio:708/1080; object-fit:cover; object-position:center top; }

.mot-dg__body{ flex:1 1 420px; min-width:0; }

.mot-dg__eyebrow{
  display:inline-block; position:relative;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); font-weight:600;
  padding-bottom:.6rem; margin-bottom:1rem;
}
.mot-dg__eyebrow::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:44px;
  background:var(--green); border-radius:2px;
}

.mot-dg__lede{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.4rem);
  color:var(--ink); margin:0 0 .9rem;
}

.mot-dg__text{ display:flex; flex-direction:column; gap:.9rem; max-width:64ch; }
.mot-dg__text p{
  margin:0; font-size:.98rem; line-height:1.7; color:var(--slate);
}

.mot-dg__signoff{
  margin:1.3rem 0 .2rem; font-size:.95rem; color:var(--slate); font-style:italic;
}
.mot-dg__signature{
  margin:0; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink);
}
.mot-dg__signature span{
  display:block; font-family:var(--mono); font-weight:500; font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--slate); margin-top:.25rem;
}

@media (min-width:640px){
  .mot-dg__frame{ margin:0; }
}

/* ===========================================================
   À la Une
   =========================================================== */
.une{ max-width:1200px; margin:0 auto; padding:2.5rem 1.5rem 4rem; }

.une__head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.75rem; flex-wrap:wrap; }
.une__edition{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate); order:2; flex:1 1 100%;
}
.une__head h1{
  font-family:var(--display); font-weight:900; font-size:clamp(1.8rem,4vw,2.6rem);
  margin:0; letter-spacing:-.01em;
}
.une__rule{ flex:1 1 auto; height:3px; background:var(--green); min-width:2.5rem; margin-bottom:.4rem; }

@media (min-width:640px){
  .une__edition{ order:0; flex:none; margin-right:auto; }
}

.une__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
}

@media (min-width:720px){
  .une__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1080px){
  .une__grid{ grid-template-columns:1.3fr 1fr 1fr; }
  .story--lead{ grid-row:span 2; }
}

.story{ display:flex; flex-direction:column; }
.story__media{
  position:relative; display:block; aspect-ratio:16/10; border-radius:6px; overflow:hidden;
  background:linear-gradient(135deg,var(--from),var(--to));
}
.story__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.story--lead .story__media{ aspect-ratio:16/11; }

.story__watermark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:.16; transform:scale(2.4) rotate(-8deg);
  color:var(--paper);
}
.story__media-tag{
  position:absolute; left:.75rem; bottom:.75rem;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(247,243,233,.85); background:rgba(20,18,15,.35);
  padding:.3rem .55rem; border-radius:100px; backdrop-filter:blur(2px);
}

.story__body{ padding-top:1rem; }
.story__kicker{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--accent); font-family:var(--mono); font-weight:600;
  font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  margin-bottom:.5rem;
}
.icon--bullet{ width:.85em; height:.85em; }

.story h2, .story h3{ font-family:var(--display); margin:0 0 .5rem; line-height:1.15; }
.story h2 a, .story h3 a{ transition:color .15s ease; }
.story h2 a:hover, .story h3 a:hover{ color:var(--red); }

.story--lead h2{ font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:900; }
.story h3{ font-size:1.2rem; font-weight:700; }

.story__dek{
  font-size:.95rem; color:var(--slate); line-height:1.55; margin:0 0 .75rem; max-width:46ch;
}
.story__meta{
  font-family:var(--mono); font-size:.72rem; color:var(--slate); opacity:.75;
}

.story:hover .story__media{ box-shadow:0 12px 30px -12px rgba(20,18,15,.35); }
.story__media{ transition:box-shadow .2s ease; }

/* ===========================================================
   Rubrique (category) pages
   =========================================================== */
.rubrique{ max-width:1200px; margin:0 auto; padding:2.5rem 1.5rem 4rem; }

.rubrique__head{ margin-bottom:2.25rem; }
.rubrique__eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate);
}
.rubrique__head h1{
  font-family:var(--display); font-weight:900; font-size:clamp(2rem,5vw,3rem);
  margin:.3rem 0 .9rem; letter-spacing:-.01em;
}
.rubrique__rule{ display:block; width:64px; height:4px; border-radius:2px; }

.rubrique__grid{ display:flex; flex-direction:column; gap:2.25rem; }

.story--row{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.story--row .story__media{ flex:1 1 280px; max-width:320px; aspect-ratio:4/3; }
.story--row .story__body{ flex:1 1 320px; padding-top:0; }
.story--row .story__dek{ max-width:60ch; }

.rubrique--empty{
  border:1.5px dashed var(--hairline); border-radius:6px;
  padding:3rem 1.5rem; text-align:center; color:var(--slate);
  font-family:var(--mono); font-size:.8rem;
}

/* ===========================================================
   Article (full page)
   =========================================================== */
.article-full{ max-width:760px; margin:0 auto; padding:2.5rem 1.5rem 0; }
.article-full__head{ margin-bottom:1.5rem; }
.article-full__head h1{
  font-family:var(--display); font-weight:900; font-size:clamp(1.8rem,4vw,2.4rem);
  margin:.6rem 0 .6rem; line-height:1.15;
}
.article-full__media{
  position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  background:linear-gradient(135deg,var(--from),var(--to));
  margin-bottom:2rem;
}
.article-full__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-full__body{ font-size:1.05rem; line-height:1.75; color:var(--ink); }
.article-full__body p{ margin:0 0 1.1rem; }
.article-full__lead{
  font-family:var(--display); font-style:italic; font-weight:500; font-size:1.2rem;
  color:var(--ink);
}

/* ===========================================================
   Comment form
   =========================================================== */
.comments{ max-width:760px; margin:1rem auto 0; padding:2.5rem 1.5rem 4rem; border-top:1px solid var(--hairline); }
.comments h2{
  font-family:var(--display); font-weight:800; font-size:1.4rem; margin:0 0 .5rem;
}
.comments__note{ font-size:.85rem; color:var(--slate); margin:0 0 1.5rem; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; max-width:640px; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column:1/-1; }
.field label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink);
}
.field input, .field textarea{
  border:1px solid var(--hairline); border-radius:4px;
  padding:.65rem .75rem; font-family:var(--body); font-size:.92rem;
  background:var(--paper-raised); color:var(--ink);
}
.field input:focus, .field textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);
}
.field textarea{ resize:vertical; }

.btn-submit{
  grid-column:1/-1; justify-self:start;
  background:var(--ink); color:var(--paper); border:0;
  padding:.75rem 1.7rem; border-radius:4px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer; transition:background .15s ease;
}
.btn-submit:hover{ background:var(--red); }

/* ===========================================================
   Simple utility pages (newsletter, sondage, réseaux sociaux, contact)
   =========================================================== */
.simple-page{ max-width:900px; margin:0 auto; padding:2.5rem 1.5rem 4rem; }
.simple-page__intro{
  font-size:1.02rem; line-height:1.65; color:var(--slate); max-width:60ch; margin:0 0 2rem;
}

.poll__question{
  font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--ink);
  margin:0 0 1.25rem;
}
.poll__options{ display:flex; flex-direction:column; gap:.75rem; max-width:420px; margin-bottom:1.5rem; }
.poll__options label{
  display:flex; align-items:center; gap:.6rem;
  font-size:.95rem; color:var(--ink);
  border:1px solid var(--hairline); border-radius:4px; padding:.65rem .9rem;
  cursor:pointer; transition:border-color .15s ease;
}
.poll__options label:hover{ border-color:var(--gold); }
.poll__options input{ accent-color:var(--red); }

.social-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem;
  max-width:900px;
}
.social-card{
  display:flex; align-items:center; gap:.7rem;
  border:1px solid var(--hairline); border-radius:6px;
  padding:1rem 1.1rem; background:var(--paper-raised);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.social-card:hover{ border-color:var(--gold); box-shadow:0 8px 20px -12px rgba(20,18,15,.3); }
.social-card .icon{ width:1.3em; height:1.3em; color:var(--red); flex:none; }
.social-card__name{ font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink); }
.social-card__handle{ display:block; font-family:var(--mono); font-size:.72rem; color:var(--slate); margin-top:.15rem; }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{
  border-top:1px solid var(--hairline);
  padding:1.5rem; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  justify-content:center; color:var(--slate);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; text-align:center;
}
.site-footer__brand{ display:flex; align-items:center; gap:.6rem; }
.site-footer__brand p{ margin:0; }
.site-footer__credit{ margin:0; opacity:.85; }
.site-footer__credit a{ color:var(--red); font-weight:600; text-decoration:none; }
.site-footer__credit a:hover{ text-decoration:underline; }
.icon--footer{ width:1.1em; height:1.1em; }