/* ============================================================
   MAIRIE DE NATITINGOU — Socle visuel institutionnel
   ------------------------------------------------------------
   Se charge APRÈS site.css et animations.css.

   Objectif : donner au site la présence d'un site d'État, sans
   copier le portail gouvernemental. Ce que fait gouv.bj tient à
   trois choses, et à trois seulement :

     1. un filigrane très pâle derrière les grandes sections,
        qui donne de la matière au fond sans jamais gêner la
        lecture ;
     2. des en-têtes de page pleine largeur en vert profond,
        qui installent le sujet avant tout contenu ;
     3. une hiérarchie typographique franche — titres très
        grands, contenu resserré.

   Le filigrane retenu ici n'est pas un motif générique : c'est
   la silhouette du Tata Somba et la géométrie Otammari, propres
   à l'Atacora. Natitingou n'emprunte pas l'habillage de Cotonou,
   elle affiche le sien.
   ============================================================ */

:root{
  --vert-profond:#04361F;
  --vert-nuit:#022515;
  --or-clair:#E4C558;
  --filigrane:rgba(255,255,255,.055);   /* sur fond vert   */
  --filigrane-clair:rgba(4,54,31,.032); /* sur fond clair  */
}

/* ============================================================
   1. LE FILIGRANE
   Motif Otammari : losanges, chevrons et silhouettes de Tata
   Somba. Encodé en SVG dans la feuille — aucun fichier à
   téléverser, aucune requête réseau supplémentaire.
   ============================================================ */

.filigrane-sombre,
.filigrane-clair{position:relative;isolation:isolate}

.filigrane-sombre::before,
.filigrane-clair::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-repeat:repeat;
  background-size:190px 190px;
  pointer-events:none;
}

/* Sur fond vert profond — motif en blanc très dilué */
.filigrane-sombre::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.4'%3E%3Cpath d='M95 18 L128 52 L95 86 L62 52 Z'/%3E%3Cpath d='M95 34 L112 52 L95 70 L78 52 Z'/%3E%3Cpath d='M20 120 h30 l8 -22 h14 l8 22 h30'/%3E%3Cpath d='M28 120 v34 h74 v-34'/%3E%3Cpath d='M46 154 v-18 h14 v18'/%3E%3Ccircle cx='65' cy='112' r='4'/%3E%3Cpath d='M130 118 l14 -14 l14 14 l-14 14 Z'/%3E%3Cpath d='M124 150 h44'/%3E%3Cpath d='M124 160 h44'/%3E%3Cpath d='M0 95 l12 -12 l12 12 l-12 12 Z'/%3E%3Cpath d='M166 95 l12 -12 l12 12 l-12 12 Z'/%3E%3Cpath d='M150 20 v26 M158 20 v26 M166 20 v26'/%3E%3C/g%3E%3C/svg%3E");
}

/* Sur fond clair — même motif, en vert très dilué */
.filigrane-clair::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%2304361F' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M95 18 L128 52 L95 86 L62 52 Z'/%3E%3Cpath d='M95 34 L112 52 L95 70 L78 52 Z'/%3E%3Cpath d='M20 120 h30 l8 -22 h14 l8 22 h30'/%3E%3Cpath d='M28 120 v34 h74 v-34'/%3E%3Cpath d='M46 154 v-18 h14 v18'/%3E%3Ccircle cx='65' cy='112' r='4'/%3E%3Cpath d='M130 118 l14 -14 l14 14 l-14 14 Z'/%3E%3Cpath d='M124 150 h44'/%3E%3Cpath d='M124 160 h44'/%3E%3Cpath d='M0 95 l12 -12 l12 12 l-12 12 Z'/%3E%3Cpath d='M166 95 l12 -12 l12 12 l-12 12 Z'/%3E%3Cpath d='M150 20 v26 M158 20 v26 M166 20 v26'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   2. EN-TÊTE DE PAGE PLEINE LARGEUR
   Remplace le simple titre par un bandeau qui installe le sujet.
   S'applique à .page-tete, déjà présent sur 26 pages.
   ============================================================ */
.page-tete{
  position:relative;isolation:isolate;
  background:linear-gradient(135deg,var(--vert-nuit) 0%,var(--vert-profond) 46%,#0A6B3B 100%);
  color:#fff;
  padding:56px 0 48px;
  margin-bottom:0;
  overflow:hidden;
}
.page-tete::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.4'%3E%3Cpath d='M95 18 L128 52 L95 86 L62 52 Z'/%3E%3Cpath d='M95 34 L112 52 L95 70 L78 52 Z'/%3E%3Cpath d='M20 120 h30 l8 -22 h14 l8 22 h30'/%3E%3Cpath d='M28 120 v34 h74 v-34'/%3E%3Cpath d='M46 154 v-18 h14 v18'/%3E%3Ccircle cx='65' cy='112' r='4'/%3E%3Cpath d='M130 118 l14 -14 l14 14 l-14 14 Z'/%3E%3Cpath d='M124 150 h44'/%3E%3Cpath d='M124 160 h44'/%3E%3C/g%3E%3C/svg%3E");
  background-size:190px 190px;
}
/* Voile dégradé : le motif s'efface vers la droite pour ne pas
   concurrencer le titre. */
.page-tete::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(2,37,21,.72) 0%,rgba(2,37,21,.30) 55%,transparent 100%);
}
.page-tete h1{
  font-size:clamp(2rem,4.6vw,3.35rem);
  line-height:1.08;letter-spacing:-.015em;
  margin:0 0 12px;color:#fff;
}
.page-tete .fil,.page-tete .fil a{color:rgba(255,255,255,.72)}
.page-tete .fil a:hover{color:var(--or-clair)}
.page-tete p,.page-tete .chapeau{
  color:rgba(255,255,255,.88);max-width:62ch;font-size:1.06rem;margin:0;
}
/* Liseré tricolore en pied de bandeau — signature républicaine */
.page-tete{border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,
    var(--vert,#006B3F) 0 33.3%,
    var(--jaune-bj,#FCD116) 33.3% 66.6%,
    var(--rouge-bj,#E8112D) 66.6%) 1;
}

/* ============================================================
   3. SECTIONS ALTERNÉES
   Une section sur deux reçoit le filigrane clair : le regard
   descend par paliers au lieu de glisser sur un aplat continu.
   ============================================================ */
.section-matiere{position:relative;isolation:isolate;background:#F4F7F5}
.section-matiere::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%2304361F' stroke-opacity='0.045' stroke-width='1.4'%3E%3Cpath d='M95 18 L128 52 L95 86 L62 52 Z'/%3E%3Cpath d='M20 120 h30 l8 -22 h14 l8 22 h30'/%3E%3Cpath d='M28 120 v34 h74 v-34'/%3E%3Cpath d='M130 118 l14 -14 l14 14 l-14 14 Z'/%3E%3Cpath d='M124 150 h44'/%3E%3C/g%3E%3C/svg%3E");
  background-size:190px 190px;
}

/* Section en vert profond, pour les blocs à forte charge
   institutionnelle (chiffres clés, mot du Maire). */
.section-etat{
  position:relative;isolation:isolate;color:#fff;
  background:linear-gradient(135deg,var(--vert-nuit),var(--vert-profond) 60%,#0A6B3B);
  padding:64px 0;
}
.section-etat::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.075' stroke-width='1.4'%3E%3Cpath d='M95 18 L128 52 L95 86 L62 52 Z'/%3E%3Cpath d='M20 120 h30 l8 -22 h14 l8 22 h30'/%3E%3Cpath d='M28 120 v34 h74 v-34'/%3E%3Cpath d='M130 118 l14 -14 l14 14 l-14 14 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:190px 190px;
}
.section-etat h2,.section-etat h3{color:#fff}
.section-etat .sec-titre::after,.section-etat .titre-section::after{opacity:.95}

/* ============================================================
   4. TITRES DE SECTION
   Plus grands, plus assumés. Le contenu reste où il est ;
   c'est le titre qui porte la solennité.
   ============================================================ */
.sec-titre,.titre-section{
  font-size:clamp(1.7rem,3.2vw,2.6rem);
  line-height:1.12;letter-spacing:-.012em;
}

/* ============================================================
   5. OPPORTUNITÉS — LISTE
   Bandeau de catégorie en tête de carte, date de clôture en
   rouge : l'usager voit d'un coup d'œil de quoi il s'agit et
   combien de temps il lui reste.
   ============================================================ */
.opp-carte{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #E3EAE6;border-radius:12px;
  overflow:hidden;height:100%;
}
.opp-bandeau{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 18px;background:#EDF3EF;
  border-bottom:1px solid #E3EAE6;
  font-size:.76rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:#3A4A43;
}
.opp-bandeau .pastille-type{color:var(--vert,#006B3F)}
.opp-bandeau .sep{width:5px;height:5px;border-radius:50%;background:#C2D2CA}
.opp-corps{padding:18px;flex:1;display:flex;flex-direction:column;gap:9px}
.opp-corps h3{margin:0;font-size:1.09rem;line-height:1.32}
.opp-corps h3 a{color:#12241C;text-decoration:none}
.opp-corps h3 a:hover{color:var(--vert,#006B3F)}
.opp-extrait{color:#54635C;font-size:.9rem;margin:0;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.opp-pied{
  margin-top:auto;padding:12px 18px;border-top:1px solid #EEF3F0;
  font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.opp-cloture{color:#C62828}
.opp-cloture.expiree{color:#7A8580;text-decoration:line-through}

/* ============================================================
   6. OPPORTUNITÉS — PAGE DE DÉTAIL
   Deux colonnes : le texte à gauche, la fiche signalétique à
   droite. C'est ce qui rend une annonce lisible et crédible.
   ============================================================ */
.opp-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:start}
@media(max-width:900px){.opp-detail{grid-template-columns:1fr}}

.opp-texte{font-size:1.02rem;line-height:1.72;color:#2A3831}
.opp-texte h2{font-size:1.3rem;margin:30px 0 12px}
.opp-texte ul{padding-left:20px}
.opp-texte li{margin:6px 0}
.opp-chapeau{
  border-left:4px solid var(--vert,#006B3F);
  background:#EDF3EF;padding:18px 22px;border-radius:0 10px 10px 0;
  font-size:1.06rem;line-height:1.66;margin-bottom:26px;
}

.opp-fiche{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
@media(max-width:900px){.opp-fiche{position:static}}
.opp-bloc{border:1px solid #E3EAE6;border-radius:10px;overflow:hidden}
.opp-bloc dt{
  padding:9px 14px;font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;margin:0;
}
.opp-bloc dd{padding:12px 14px;margin:0;font-weight:600;color:#12241C;background:#fff}
.opp-bloc.ouverture dt{background:#C9A227}
.opp-bloc.cloture  dt{background:#C62828}
.opp-bloc.structure dt{background:#0A6B3B}
.opp-bloc.type     dt{background:#12241C}
.opp-bloc.categorie dt{background:#E8B93A;color:#3A2E05}
.opp-bloc.secteur  dt{background:#12406B}

.opp-etiquettes{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.opp-etiquette{
  background:#0A6B3B;color:#fff;font-size:.82rem;font-weight:600;
  padding:6px 11px;border-radius:5px;
}

/* Pièces jointes */
.opp-pieces{margin-top:30px;border-top:2px solid #E3EAE6;padding-top:22px}
.opp-piece{
  display:flex;align-items:center;gap:13px;
  padding:13px 16px;border:1px solid #E3EAE6;border-radius:9px;
  background:#fff;margin-bottom:10px;text-decoration:none;color:inherit;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.opp-piece:hover{border-color:var(--vert,#006B3F);box-shadow:0 6px 20px rgba(16,40,30,.09);transform:translateY(-2px)}
.opp-piece-ic{
  flex-shrink:0;width:42px;height:42px;border-radius:8px;
  background:#EDF3EF;color:var(--vert,#006B3F);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;
}
.opp-piece-nom{font-weight:600;font-size:.96rem;color:#12241C}
.opp-piece-meta{font-size:.8rem;color:#6B7873}

/* Documents à fournir */
.opp-dossier{
  margin-top:26px;border:1px solid #E3EAE6;border-left:4px solid #C9A227;
  border-radius:0 10px 10px 0;background:#FFFBF0;padding:20px 24px;
}
.opp-dossier h2{margin:0 0 12px;font-size:1.12rem;color:#5C4708}
.opp-dossier ol,.opp-dossier ul{margin:0;padding-left:20px}
.opp-dossier li{margin:7px 0;color:#3A3325}

/* ============================================================
   7. ÉTAT VIDE
   « Aucune donnée disponible » sur fond blanc donne un site
   inachevé. Un état vide soigné dit l'inverse : la rubrique
   existe, elle sera renseignée.
   ============================================================ */
.etat-vide{
  text-align:center;padding:56px 26px;
  border:1px dashed #C9D6CF;border-radius:14px;background:#F7FAF8;
}
.etat-vide-ic{
  width:58px;height:58px;margin:0 auto 16px;border-radius:50%;
  background:#EDF3EF;color:var(--vert,#006B3F);
  display:flex;align-items:center;justify-content:center;
}
.etat-vide h3{margin:0 0 7px;font-size:1.12rem;color:#12241C}
.etat-vide p{margin:0 auto;max-width:46ch;color:#5B6661;font-size:.95rem}

/* ============================================================
   8. MÉDIAS — GALERIES ET VIDÉOS
   ============================================================ */
.galerie-grille{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.galerie-item{
  position:relative;border-radius:11px;overflow:hidden;
  aspect-ratio:4/3;background:#EDF3EF;
}
.galerie-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.galerie-item:hover img{transform:scale(1.06)}
.galerie-legende{
  position:absolute;left:0;right:0;bottom:0;padding:22px 13px 11px;
  background:linear-gradient(transparent,rgba(2,37,21,.86));
  color:#fff;font-size:.85rem;line-height:1.35;
}

.video-cadre{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:12px;background:#022515;
}
.video-cadre iframe,.video-cadre video{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.video-legende{margin-top:9px;font-size:.9rem;color:#5B6661}

/* ============================================================
   9. IMPRESSION
   ============================================================ */
@media print{
  .page-tete{background:none!important;color:#000;padding:0 0 12px;border:0}
  .page-tete h1{color:#000}
  .page-tete::before,.page-tete::after,
  .section-matiere::before,.section-etat::before{display:none}
  .section-etat{background:none!important;color:#000;padding:12px 0}
  .opp-fiche{position:static}
}