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

   À CHARGER EN DERNIER dans views/public/partials/haut.php,
   après complements.css : ces règles complètent les vôtres
   plutôt qu'elles ne les remplacent.
   ============================================================ */

:root{
  --p-vert:        #0A6B3B;
  --p-vert-fonce:  #073D22;
  --p-vert-nuit:   #052E1A;
  --p-jaune:       #E8B93B;
  --p-rouge:       #C0392B;
  --p-creme:       #F4F9F5;   /* le fond vert très pâle de gouv.bj */
  --p-texte:       #1B2621;
  --p-gris:        #5B6661;
  --p-bord:        #E3EAE6;
}

/* ------------------------------------------------------------
   1. TYPOGRAPHIE
   ------------------------------------------------------------
   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 blanche pendant ce temps.
   ------------------------------------------------------------ */
body{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color:var(--p-texte);
  font-size:16.5px;
  line-height:1.72;
  background:var(--p-creme);
}

h1, h2, h3, .titre-h,
.hero-titre, .carte-actu h3, .titre-section{
  font-family:'Poppins', 'Inter', system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.22;
  color:var(--p-vert-fonce);
}

/* Les titres de gouv.bj sont grands, et respirent. */
h1{ font-size:clamp(1.9rem, 5.2vw, 3rem); margin-bottom:.5em; }
h2{ font-size:clamp(1.45rem, 3.4vw, 2.05rem); margin-bottom:.45em; }
h3{ font-size:clamp(1.08rem, 2.2vw, 1.3rem); }

p{ margin-bottom:1.05em; }

/* ------------------------------------------------------------
   2. LE FILET TRICOLORE
   Trois segments égaux, vert-jaune-rouge. Il sépare l'en-tête
   du contenu et signe l'appartenance institutionnelle.
   ------------------------------------------------------------ */
.filet-tricolore{
  display:flex; height:5px; width:100%;
}
.filet-tricolore i{ flex:1; display:block; }
.filet-tricolore i:nth-child(1){ background:var(--p-vert); }
.filet-tricolore i:nth-child(2){ background:var(--p-jaune); }
.filet-tricolore i:nth-child(3){ background:var(--p-rouge); }

/* Version courte, centrée, sous un titre de section */
.filet-court{
  display:flex; height:5px; width:190px; margin:14px auto 0;
  border-radius:3px; overflow:hidden;
}
.filet-court i{ flex:1; }
.filet-court i:nth-child(1){ background:var(--p-vert); }
.filet-court i:nth-child(2){ background:var(--p-jaune); }
.filet-court i:nth-child(3){ background:var(--p-rouge); }

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

/* ------------------------------------------------------------
   4. LES CARTES D'ACTUALITÉ
   Image en haut, badge de catégorie en bas à droite de l'image,
   date et rubrique, titre, puis un bouton plein.
   ------------------------------------------------------------ */
.grille-actus{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:26px;
}

.carte-actu{
  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;
}
.carte-actu:hover{
  transform:translateY(-3px);
  box-shadow:0 3px 8px rgba(11,40,25,.09), 0 14px 34px rgba(11,40,25,.11);
}

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

/* Le badge de catégorie : jaune, en capitales, posé sur l'image */
.badge-cat{
  position:absolute; right:0; bottom:16px;
  background:var(--p-jaune); color:var(--p-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);
}

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

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

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

/* Le bouton plein, avec sa flèche — repris de gouv.bj */
.btn-lire{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--p-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;
}
.btn-lire:hover{ background:var(--p-vert); transform:translateX(2px); color:#fff; }
.btn-lire .fl{ font-size:1.05rem; line-height:1; }

/* ------------------------------------------------------------
   5. LE GRAND ARTICLE EN TÊTE
   Une seule actualité, en pleine largeur, avec son texte posé
   sur l'image.
   ------------------------------------------------------------ */
.actu-une{
  position:relative; border-radius:0; overflow:hidden;
  min-height:340px; display:flex; align-items:flex-end;
  background:var(--p-vert-nuit);
}
.actu-une img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.actu-une::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,46,26,.12) 30%, rgba(5,46,26,.86) 100%);
}
.actu-une-in{ position:relative; z-index:2; padding:34px 26px 30px; max-width:820px; }
.actu-une-meta{
  color:#fff; font-size:.9rem; font-weight:600;
  letter-spacing:.06em; margin-bottom:10px; opacity:.94;
}
.actu-une-in h2{
  color:#fff; margin:0 0 20px;
  font-size:clamp(1.4rem, 3.6vw, 2.2rem);
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.btn-or{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--p-jaune); color:var(--p-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;
}
.btn-or:hover{
  transform:translateX(3px);
  box-shadow:0 6px 18px rgba(232,185,59,.4);
  color:var(--p-vert-nuit);
}

/* ------------------------------------------------------------
   6. LES TITRES DE SECTION
   ------------------------------------------------------------ */
.titre-section{
  font-size:clamp(1.5rem, 3.6vw, 2.1rem);
  margin:0 0 22px;
}
.titre-section.centre{ text-align:center; }
.titre-section.centre + .filet-court{ margin-bottom:26px; }

.section{ padding:46px 0; }
.section.pale{ background:#fff; }

/* ------------------------------------------------------------
   7. LA BARRE DU BAS, AVEC LE LOGO AU CENTRE
   ------------------------------------------------------------
   Cinq emplacements, le logo occupant celui du milieu. Il est
   plus grand que les autres et remonte au-dessus de la barre :
   c'est ce qui en fait le point de retour évident.

   Les émojis sont remplacés par des tracés SVG : un émoji change
   d'aspect d'un téléphone à l'autre, et fait « brouillon ».
   ------------------------------------------------------------ */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:flex; align-items:flex-end; justify-content:space-around;
  background:#fff;
  border-top:1px solid var(--p-bord);
  box-shadow:0 -2px 18px rgba(11,40,25,.09);
  padding:0 4px calc(4px + env(safe-area-inset-bottom, 0px));
  min-height:60px;
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:9px 2px 7px;
  text-decoration:none; color:var(--p-gris);
  font-size:.72rem; font-weight:600;
  transition:color .16s ease;
}
.bottom-nav a .bi{ font-size:1.28rem; line-height:1; }
.bottom-nav a .bi svg{ width:23px; height:23px; display:block; }
.bottom-nav a.actif{ color:var(--p-vert); }
.bottom-nav a.actif .bi svg{ stroke:var(--p-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(--p-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 encore déposé son blason */
.bn-logo .rond .initiales{
  font-family:'Poppins', sans-serif; font-weight:700;
  font-size:1.05rem; color:var(--p-vert-fonce); letter-spacing:-.02em;
}
.bn-logo .bl{
  display:block; margin-top:3px;
  font-size:.68rem; color:var(--p-gris); font-weight:600;
}
.bn-logo.actif .rond{
  border-color:var(--p-jaune);
  box-shadow:0 3px 16px rgba(232,185,59,.5);
}

/* La barre masque le bas de page : on lui rend la place. */
body{ padding-bottom:70px; }
@media (min-width:900px){
  .bottom-nav{ display:none; }
  body{ padding-bottom:0; }
}

/* ------------------------------------------------------------
   8. IMAGES — netteté
   ------------------------------------------------------------
   Une photo étirée ou pixellisée fait plus de tort qu'une photo
   absente. `object-fit: cover` recadre sans déformer, et le fond
   pâle évite le trou blanc pendant le chargement.
   ------------------------------------------------------------ */
img{ max-width:100%; height:auto; }
.img-nette{
  image-rendering:auto;
  background:#E8EFEA;
}
figure{ margin:0; }

/* ------------------------------------------------------------
   9. SUR TÉLÉPHONE
   ------------------------------------------------------------ */
@media (max-width:640px){
  body{ font-size:16px; }
  .section{ padding:32px 0; }
  .grille-actus{ grid-template-columns:1fr; gap:20px; }
  .carte-actu-corps{ padding:17px 18px 19px; }
  .carte-actu h3{ font-size:1.1rem; }
  .banniere{ min-height:168px; }
  .actu-une{ min-height:290px; }
  .actu-une-in{ padding:24px 18px 22px; }
}

/* ------------------------------------------------------------
   10. À L'IMPRESSION
   ------------------------------------------------------------ */
@media print{
  .bottom-nav, .cookie, .site-tete{ display:none !important; }
  body{ padding-bottom:0; background:#fff; }
  .carte-actu{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
}