/* ============================================================
   REFONTE DU SITE PUBLIC — v2
   ------------------------------------------------------------
   Inspirée de gouv.bj : typographie ample, filet tricolore,
   cartes nettes, badges de catégorie.

   ── CE QUI A CHANGÉ DEPUIS LA v1 ─────────────────────────────
   La v1 définissait `.actu-une`, `.section`, `.carte-actu`,
   `.titre-section` et `.btn-or`. Or votre site emploie DÉJÀ ces
   noms — `.section` apparaît 97 fois — avec d'autres structures.

   Résultat visible : la première actualité de l'accueil recevait
   un fond vert nuit destiné à porter une image en arrière-plan,
   alors que sa structure met l'image en enfant normal. Le titre,
   vert foncé, devenait vert sur vert. Illisible.

   TOUTES mes classes portent désormais le préfixe `gb-`
   (gouv.bj). Aucune collision n'est plus possible.

   Ce qui n'a PAS de préfixe ci-dessous agit sur des balises
   (body, h1, h2, img) : c'est voulu, c'est le socle typographique.
   ============================================================ */

:root{
  --gb-vert:        #0A6B3B;
  --gb-vert-fonce:  #073D22;
  --gb-vert-nuit:   #052E1A;
  --gb-jaune:       #E8B93B;
  --gb-rouge:       #C0392B;
  --gb-creme:       #F4F9F5;
  --gb-texte:       #1B2621;
  --gb-gris:        #5B6661;
  --gb-bord:        #E3EAE6;
}

/* ------------------------------------------------------------
   1. TYPOGRAPHIE — le socle
   ------------------------------------------------------------
   gouv.bj emploie une grotesque géométrique aux titres. Poppins
   en est l'équivalent libre le plus proche.

   La pile de repli est complète : au Bénin, une connexion lente
   peut retarder Google Fonts de plusieurs secondes. Sans repli,
   la page reste sans texte pendant ce temps.
   ------------------------------------------------------------ */
body{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color:var(--gb-texte);
  font-size:16.5px;
  line-height:1.72;
}

h1, h2, h3{
  font-family:'Poppins', 'Inter', system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.24;
}

h1{ font-size:clamp(1.85rem, 5vw, 2.9rem); }
h2{ font-size:clamp(1.4rem, 3.3vw, 2rem); }
h3{ font-size:clamp(1.05rem, 2.1vw, 1.26rem); }

/* ------------------------------------------------------------
   2. LES ACTUALITÉS QUI DÉFILENT EN HAUT
   ------------------------------------------------------------
   Demande : « les textes des actualités doivent être un peu
   plus petits ».

   Les classes visées sont celles du carrousel — `hc-titre`,
   `hc-date`, `hc-cat` — et NON `hero-titre`, qui porte le nom
   de la Mairie et ne doit pas rétrécir.

   Sur un bandeau, un titre trop grand se coupe en fin de ligne
   et déborde du voile. C'est ce qui se passait sur téléphone.
   ------------------------------------------------------------ */
.hc-titre{
  font-size:clamp(1.1rem, 3.2vw, 1.65rem) !important;
  line-height:1.32 !important;
  margin-bottom:.55em;
}

.hc-date{
  font-size:.82rem !important;
  letter-spacing:.05em;
}

.hc-cat{
  font-size:.74rem !important;
  letter-spacing:.07em;
}

.hc-cta{ font-size:.92rem !important; }

/* Sur téléphone, un cran de plus : c'est là que le titre
   débordait du voile. */
@media (max-width:640px){
  .hc-titre{
    font-size:1.12rem !important;
    line-height:1.3 !important;
  }
  .hc-date{ font-size:.78rem !important; }
  .hc-cat{ font-size:.7rem !important; }
}

/* ------------------------------------------------------------
   3. LE FILET TRICOLORE
   ------------------------------------------------------------ */
.gb-filet{ display:flex; height:5px; width:100%; }
.gb-filet i{ flex:1; display:block; }
.gb-filet i:nth-child(1){ background:var(--gb-vert); }
.gb-filet i:nth-child(2){ background:var(--gb-jaune); }
.gb-filet i:nth-child(3){ background:var(--gb-rouge); }

.gb-filet-court{
  display:flex; height:5px; width:190px; margin:14px auto 0;
  border-radius:3px; overflow:hidden;
}
.gb-filet-court i{ flex:1; }
.gb-filet-court i:nth-child(1){ background:var(--gb-vert); }
.gb-filet-court i:nth-child(2){ background:var(--gb-jaune); }
.gb-filet-court i:nth-child(3){ background:var(--gb-rouge); }

/* ------------------------------------------------------------
   4. LA BANNIÈRE DE PAGE
   Photo pleine largeur, voile sombre, titre blanc au centre.
   ------------------------------------------------------------ */
.gb-banniere{
  position:relative; min-height:210px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--gb-vert-nuit);
}
.gb-banniere img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.62) saturate(.9);
}
/* Le voile : sans lui, un titre blanc sur photo claire est
   illisible. Deux couches, pour tenir sur toute photo. */
.gb-banniere::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,46,26,.34) 0%, rgba(5,46,26,.62) 100%);
}
.gb-banniere-in{ position:relative; z-index:2; text-align:center; padding:46px 20px; }
.gb-banniere-in h1{
  color:#fff; margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.42);
  font-size:clamp(1.9rem, 5.6vw, 3rem);
}
.gb-banniere-in .gb-filet-court{ margin-top:16px; }

/* ------------------------------------------------------------
   5. LES CARTES D'ACTUALITÉ — nouvelle grille
   À employer sur les vues que vous voudrez refondre. Elles
   n'affectent RIEN de l'existant.
   ------------------------------------------------------------ */
.gb-grille{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:26px;
}

.gb-carte{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 1px 3px rgba(11,40,25,.07), 0 6px 22px rgba(11,40,25,.06);
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.gb-carte:hover{
  transform:translateY(-3px);
  box-shadow:0 3px 8px rgba(11,40,25,.09), 0 14px 34px rgba(11,40,25,.11);
}

.gb-carte-img{
  position:relative; aspect-ratio:16/10;
  background:#E8EFEA; overflow:hidden;
}
.gb-carte-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.gb-carte:hover .gb-carte-img img{ transform:scale(1.045); }

/* Le badge de catégorie : jaune, en capitales, posé sur l'image */
.gb-badge{
  position:absolute; right:0; bottom:16px;
  background:var(--gb-jaune); color:var(--gb-vert-nuit);
  font-weight:700; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase;
  padding:9px 18px 9px 20px;
  border-radius:5px 0 0 5px;
  box-shadow:0 2px 10px rgba(0,0,0,.16);
}

.gb-carte-corps{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }

.gb-carte-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.87rem; color:var(--gb-gris);
  padding-bottom:13px; margin-bottom:13px;
  border-bottom:1px solid var(--gb-bord);
}
.gb-point{
  width:7px; height:7px; border-radius:50%;
  background:var(--gb-vert); display:inline-block;
}
.gb-rubrique{
  color:var(--gb-vert); font-weight:600;
  text-transform:uppercase; font-size:.82rem; letter-spacing:.04em;
}

.gb-carte h3{ margin:0 0 18px; font-size:1.16rem; line-height:1.42; flex:1; }
.gb-carte h3 a{ color:var(--gb-vert-fonce); text-decoration:none; }
.gb-carte h3 a:hover{ color:var(--gb-vert); }

/* Le bouton plein, avec sa flèche — repris de gouv.bj */
.gb-btn{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--gb-vert-fonce); color:#fff;
  padding:13px 22px; border-radius:8px;
  font-weight:700; font-size:.94rem; letter-spacing:.02em;
  text-decoration:none; align-self:flex-start;
  transition:background .18s ease, transform .18s ease;
}
.gb-btn:hover{ background:var(--gb-vert); transform:translateX(2px); color:#fff; }

.gb-btn-or{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--gb-jaune); color:var(--gb-vert-nuit);
  padding:14px 26px; border-radius:8px;
  font-weight:700; font-size:.96rem; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.gb-btn-or:hover{
  transform:translateX(3px);
  box-shadow:0 6px 18px rgba(232,185,59,.4);
  color:var(--gb-vert-nuit);
}

/* ------------------------------------------------------------
   6. LA BARRE DU BAS, AVEC LE BLASON AU CENTRE
   ------------------------------------------------------------
   `.bottom-nav` existe déjà dans votre site : ces règles la
   COMPLÈTENT, elles ne la remplacent pas. Seul le bouton central
   `.bn-logo` est nouveau.
   ------------------------------------------------------------ */
.bottom-nav{
  align-items:flex-end;
  box-shadow:0 -2px 18px rgba(11,40,25,.09);
  padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));
  min-height:60px;
}
.bottom-nav a .bi svg{ width:23px; height:23px; display:block; }
.bottom-nav a.actif .bi svg{ stroke:var(--gb-vert); }

/* Le bouton central : le blason de la commune */
.bn-logo{
  flex:0 0 74px !important;
  padding:0 !important;
  position:relative;
}
.bn-logo .rond{
  width:56px; height:56px; margin:-20px auto 0;
  border-radius:50%; background:#fff;
  border:3px solid var(--gb-vert);
  box-shadow:0 3px 14px rgba(11,40,25,.22);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bn-logo:active .rond{ transform:scale(.94); }
.bn-logo .rond img{ width:44px; height:44px; object-fit:contain; display:block; }
/* Repli quand la commune n'a pas déposé son blason */
.bn-logo .rond .initiales{
  font-family:'Poppins', sans-serif; font-weight:700;
  font-size:1.05rem; color:var(--gb-vert-fonce); letter-spacing:-.02em;
}
.bn-logo .bl{
  display:block; margin-top:3px;
  font-size:.68rem; color:var(--gb-gris); font-weight:600;
}
.bn-logo.actif .rond{
  border-color:var(--gb-jaune);
  box-shadow:0 3px 16px rgba(232,185,59,.5);
}

/* ------------------------------------------------------------
   7. IMAGES
   Une photo étirée fait plus de tort qu'une photo absente.
   ------------------------------------------------------------ */
img{ max-width:100%; height:auto; }

/* ------------------------------------------------------------
   8. SUR TÉLÉPHONE
   ------------------------------------------------------------ */
@media (max-width:640px){
  body{ font-size:16px; }
  .gb-grille{ grid-template-columns:1fr; gap:20px; }
  .gb-carte-corps{ padding:17px 18px 19px; }
  .gb-carte h3{ font-size:1.08rem; }
  .gb-banniere{ min-height:168px; }
}

/* ------------------------------------------------------------
   9. À L'IMPRESSION
   ------------------------------------------------------------ */
@media print{
  .bottom-nav{ display:none !important; }
  .gb-carte{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
}